diff --git a/admin-ui/.dockerignore b/admin-ui/.dockerignore
new file mode 100644
index 0000000..891b902
--- /dev/null
+++ b/admin-ui/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+dist
+.git
+.gitignore
+README.md
+.env.local
+*.zip
\ No newline at end of file
diff --git a/admin-ui/.gitattributes b/admin-ui/.gitattributes
new file mode 100644
index 0000000..33f3c22
--- /dev/null
+++ b/admin-ui/.gitattributes
@@ -0,0 +1,14 @@
+# 统一使用 LF，避免跨平台协作时产生整文件 diff
+* text=auto eol=lf
+
+# 二进制文件不做行尾转换
+*.png binary
+*.jpg binary
+*.gif binary
+*.ico binary
+*.woff binary
+*.woff2 binary
+*.ttf binary
+*.pdf binary
+*.exe binary
+*.xlsx binary
diff --git a/admin-ui/.gitea/workflows/mirror-to-gitee.yml b/admin-ui/.gitea/workflows/mirror-to-gitee.yml
new file mode 100644
index 0000000..b8f8b52
--- /dev/null
+++ b/admin-ui/.gitea/workflows/mirror-to-gitee.yml
@@ -0,0 +1,64 @@
+name: mirror-to-gitee
+
+# 把本仓同步到 Gitee 企业仓 snowgoat/<同名仓库>。
+# 触发：main 分支推送、v* tag 推送、手动；另有每日兜底重试。
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'
+  schedule:
+    # Gitea Actions 的 cron 用 UTC：18:30 UTC = 次日 02:30 北京时间
+    - cron: '30 18 * * *'
+  workflow_dispatch:
+
+concurrency:
+  group: mirror-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  mirror:
+    runs-on: host
+    steps:
+      - name: 同步到 Gitee
+        env:
+          SRC_TOKEN: ${{ secrets.SRC_GIT_TOKEN }}
+          DST_TOKEN: ${{ secrets.GITEE_TOKEN }}
+          DST_OWNER: ${{ secrets.GITEE_OWNER }}
+          DST_USER: ${{ secrets.GITEE_USER }}
+          REPO_NAME: ${{ github.event.repository.name }}
+        run: |
+          set -u
+
+          if [ -z "${REPO_NAME:-}" ]; then
+            echo "未取到仓库名，退出"; exit 1
+          fi
+
+          WORK=$(mktemp -d)
+          trap 'rm -rf "$WORK"' EXIT
+
+          echo "源：git.5iot.com/iotlcm-public/$REPO_NAME"
+          echo "目标：gitee.com/$DST_OWNER/$REPO_NAME"
+
+          git clone --mirror "https://jenkins:${SRC_TOKEN}@git.5iot.com/iotlcm-public/${REPO_NAME}.git" "$WORK/repo.git"
+          cd "$WORK/repo.git"
+          echo "本地 ref：$(git for-each-ref --format='%(refname:short)' | tr '\n' ' ')"
+
+          # Gitee 在推送密集时会返回 429 Pending queue overflowed / 408 Authorization server timeout，
+          # 属服务端限流，退避重试即可。
+          attempt=0
+          while [ "$attempt" -lt 5 ]; do
+            attempt=$((attempt + 1))
+            echo "----- 推送尝试 $attempt/5"
+            if git push --mirror "https://${DST_USER}:${DST_TOKEN}@gitee.com/${DST_OWNER}/${REPO_NAME}.git" 2>&1; then
+              echo "✅ 已同步到 Gitee"
+              exit 0
+            fi
+            wait_s=$((attempt * 30))
+            echo "推送失败，${wait_s}s 后重试"
+            sleep "$wait_s"
+          done
+
+          echo "❌ 连续 5 次推送失败，请检查 Gitee 状态或令牌"
+          exit 1
diff --git a/admin-ui/.gitea/workflows/trigger-jenkins.yml b/admin-ui/.gitea/workflows/trigger-jenkins.yml
new file mode 100644
index 0000000..f58a800
--- /dev/null
+++ b/admin-ui/.gitea/workflows/trigger-jenkins.yml
@@ -0,0 +1,80 @@
+name: trigger-jenkins-oss
+
+# 打 tag 时触发 Jenkins 构建开源镜像并推送到镜像仓库。
+# 仅在 tag 推送时触发；main 分支的日常提交不触发。
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+# 同一 ref 连续触发时取消旧任务，只跑最新的
+concurrency:
+  group: ${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  trigger:
+    runs-on: host
+    steps:
+      - name: 触发 Jenkins 镜像构建
+        env:
+          JU: ${{ secrets.JENKINS_USER }}
+          JT: ${{ secrets.JENKINS_API_TOKEN }}
+          JURL: ${{ secrets.JENKINS_URL }}
+          JOB_PATH: ${{ secrets.JENKINS_JOB_PATH }}
+          REPO_NAME: ${{ github.event.repository.name }}
+          TAG_NAME: ${{ github.ref_name }}
+        run: |
+          set -eu
+
+          # 只有 tag 推送才构建；手动触发时按 tag 取，没有就退出
+          case "${GITHUB_REF:-}" in
+            refs/tags/v*) ;;
+            *)
+              if [ "${GITHUB_EVENT_NAME:-}" != "workflow_dispatch" ]; then
+                echo "非 tag 推送，跳过：${GITHUB_REF:-unknown}"
+                exit 0
+              fi
+              ;;
+          esac
+
+          if [ -z "${TAG_NAME:-}" ]; then
+            echo "未取到 tag 名，退出"
+            exit 1
+          fi
+
+          # job 在 Jenkins 文件夹下的路径（组织密钥 JENKINS_JOB_PATH），
+          # 例如 job/iotlcm-opensrc/job/iotlcm-oss-build。
+          # 用密钥而非硬编码，Jenkins 里移动 job 时不用改 11 个仓。
+          JP="${JOB_PATH:-job/iotlcm-oss-build}"
+
+          echo "仓库：$REPO_NAME   版本：$TAG_NAME   job：$JP"
+
+          WORK=$(mktemp -d)
+          trap 'rm -rf "$WORK"' EXIT
+
+          # 取 CSRF crumb
+          curl -s -c "$WORK/cj" -u "$JU:$JT" "$JURL/crumbIssuer/api/json" -o "$WORK/crumb.json"
+          CR=$(python3 -c "import json;print(json.load(open('$WORK/crumb.json'))['crumb'])")
+
+          # 触发参数化任务：SERVICES=仓库名，VERSION=tag
+          code=$(curl -s -o "$WORK/out" -w '%{http_code}' -X POST -b "$WORK/cj" -u "$JU:$JT" \
+            -H "Jenkins-Crumb: $CR" \
+            --data-urlencode "SERVICES=$REPO_NAME" \
+            --data-urlencode "VERSION=$TAG_NAME" \
+            --data-urlencode "FORCE=true" \
+            "$JURL/$JP/buildWithParameters")
+
+          echo "Jenkins 触发 HTTP $code"
+          if [ "$code" != "201" ] && [ "$code" != "200" ] && [ "$code" != "302" ] && [ "$code" != "303" ]; then
+            echo "触发失败："
+            cat "$WORK/out"
+            exit 1
+          fi
+
+          LINK="$JURL/$JP/"
+          echo "=========================================="
+          echo "Jenkins 构建：$LINK"
+          echo "=========================================="
+          echo "::notice title=Jenkins 镜像构建::[$LINK]($LINK)"
diff --git a/admin-ui/.gitignore b/admin-ui/.gitignore
new file mode 100644
index 0000000..72ef840
--- /dev/null
+++ b/admin-ui/.gitignore
@@ -0,0 +1,66 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+dist.zip
+dist.tar
+dist.war
+.nitro
+.output
+*-dist.zip
+*-dist.tar
+*-dist.war
+coverage
+*.local
+**/.vitepress/cache
+.cache
+.turbo
+.temp
+dev-dist
+.stylelintcache
+yarn.lock
+package-lock.json
+.VSCodeCounter
+**/backend-mock/data
+.omx
+.pnpm-store
+# local env files
+.env.local
+.env.*.local
+.eslintcache
+
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+vite.config.mts.*
+vite.config.mjs.*
+vite.config.js.*
+vite.config.ts.*
+
+# Editor directories and files
+.idea
+# .vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.history
+.cursor
+
+# AI
+.agent
+.agents
+.claude
+.codex
+skills-lock.json
+.atomcode
+datalog
+
+# local-only placeholder lefthook config (silences "No config found" popup)
+# NOTE: only ignores the GIT-ROOT placeholder; vue/lefthook.yml stays tracked.
+/lefthook.yml
\ No newline at end of file
diff --git a/admin-ui/LICENSE b/admin-ui/LICENSE
new file mode 100644
index 0000000..2e83190
--- /dev/null
+++ b/admin-ui/LICENSE
@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2021-PRESENT Vben Admin (https://github.com/vbenjs/vue-vben-admin)
+Copyright (c) 2026 The iotLCM Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/admin-ui/Makefile b/admin-ui/Makefile
new file mode 100644
index 0000000..1170237
--- /dev/null
+++ b/admin-ui/Makefile
@@ -0,0 +1,21 @@
+.PHONY: build
+build:
+	docker build --rm  -f vue/build/Dockerfile  --progress=plain --platform linux/amd64 -t docker_iotlcmadminui:v0 .
+
+.PHONY: vue
+vue:
+	cd vue
+	cd vue && npm i -g corepack
+	cd vue && CI=true pnpm install
+	cd vue && CI=true pnpm build
+
+.PHONY: build-no-build
+build-no-build:
+	docker build --rm  -f vue/build/DockerfileNoBuild  --progress=plain --platform linux/amd64 -t docker_iotlcmadminui:v0 .
+
+
+dockerbuild: build-no-build
+	echo "docker build success"
+dockerpush:
+	docker tag docker_iotlcmadminui:v0 ${REGISTRY}/docker_iotlcmadminui:v0
+	docker push ${REGISTRY}/docker_iotlcmadminui:v0
\ No newline at end of file
diff --git a/admin-ui/README.md b/admin-ui/README.md
new file mode 100644
index 0000000..ed3d167
--- /dev/null
+++ b/admin-ui/README.md
@@ -0,0 +1,90 @@
+# iotlcm-admin-ui
+
+iotLCM 物联网卡全生命周期管理平台的**管理前端** —— 卡资产、通信管理、资费交易、告警工单、统计分析、账号治理。
+
+配套后端：[iotlcm-admin-svr](https://git.5iot.com/iotlcm-public/iotlcm-admin-svr)。
+
+## 上游与许可
+
+本项目基于 **[Vben Admin](https://github.com/vbenjs/vue-vben-admin) 5.5.9**（MIT License）二次开发。
+
+- 上游版权与许可声明完整保留在 [`LICENSE`](./LICENSE) 与各源文件的 `@Author` / `@Copyright` 头中
+- iotLCM 相关的业务页面、API 封装与配置为本项目新增
+- 上游仓库：[vbenjs/vue-vben-admin](https://github.com/vbenjs/vue-vben-admin)
+- 上游自带的说明文档保留在 [`vue/README.md`](./vue/README.md)
+
+## 技术栈
+
+- Vue 3 + Vite + TypeScript
+- Vben Admin 5.5.9（Ant Design Vue 版：`apps/web-antd`）
+- Pinia（状态）、Vue Router、TailwindCSS + UnoCSS（原子化样式）
+- pnpm workspace + Turborepo（monorepo）
+
+## 快速开始
+
+```bash
+cd vue
+pnpm install
+pnpm dev:antd
+```
+
+开发服务器默认监听 `http://127.0.0.1:5666/`。
+
+构建：
+
+```bash
+pnpm build:antd
+```
+
+产物在 `vue/apps/web-antd/dist/`。
+
+## 配置
+
+环境变量文件在 `vue/apps/web-antd/`：
+
+| 文件 | 用途 |
+| --- | --- |
+| `.env` | 通用配置（应用标题、命名空间、客户端 ID、store 加密密钥） |
+| `.env.development` | 开发环境（端口、API 地址） |
+| `.env.production` | 生产环境（压缩策略、路由模式、PWA） |
+
+**公开版里的凭据是占位符**：
+
+| 变量 | 占位 | 说明 |
+| --- | --- | --- |
+| `VITE_GLOB_CLIENT_ID` | `your-client-id` | OAuth 客户端 ID |
+| `VITE_APP_STORE_SECURE_KEY` | `please-replace-me-with-your-own-key` | localStorage 加密密钥 |
+| `TIANDITU_CONFIG.API_KEY` | `YOUR_TIANDITU_KEY` | 天地图 API Key（`src/config/tianditu.ts`） |
+
+> ⚠️ `VITE_APP_STORE_SECURE_KEY` 必须是自己的随机值——它用于加密持久化的 store，换设备时 store 数据将无法解密。
+
+## 目录结构
+
+```text
+iotlcm-admin-ui/
+├── Makefile                   # 容器构建与推送
+└── vue/                       # Vben Admin monorepo
+    ├── apps/web-antd/         # iotLCM 管理端应用（主应用）
+    │   ├── src/api/iotlcm/    # iotLCM 业务 API 封装
+    │   ├── src/views/iotlcm/  # iotLCM 业务页面
+    │   ├── src/config/        # 应用配置（含天地图配置）
+    │   └── .env*              # 环境变量
+    ├── packages/              # 内部共享包
+    └── internal/              # 构建期工具
+```
+
+## 容器化构建
+
+```bash
+docker build --rm -f vue/build/Dockerfile --platform linux/amd64 -t iotlcm-admin-ui:latest .
+```
+
+推送到自己的镜像仓库：
+
+```bash
+REGISTRY=<your-registry> make dockerpush
+```
+
+## License
+
+[MIT](./LICENSE) —— 含 Vben Admin 上游的 MIT 声明。
diff --git a/admin-ui/vue/.browserslistrc b/admin-ui/vue/.browserslistrc
new file mode 100644
index 0000000..dc3bc09
--- /dev/null
+++ b/admin-ui/vue/.browserslistrc
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
diff --git a/admin-ui/vue/.commitlintrc.js b/admin-ui/vue/.commitlintrc.js
new file mode 100644
index 0000000..02e33fa
--- /dev/null
+++ b/admin-ui/vue/.commitlintrc.js
@@ -0,0 +1 @@
+export { default } from '@vben/commitlint-config';
diff --git a/admin-ui/vue/.dockerignore b/admin-ui/vue/.dockerignore
new file mode 100644
index 0000000..52b833a
--- /dev/null
+++ b/admin-ui/vue/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+.git
+.gitignore
+*.md
+dist
+.turbo
+dist.zip
diff --git a/admin-ui/vue/.editorconfig b/admin-ui/vue/.editorconfig
new file mode 100644
index 0000000..179aec6
--- /dev/null
+++ b/admin-ui/vue/.editorconfig
@@ -0,0 +1,18 @@
+root = true
+
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=true
+indent_style=space
+indent_size=2
+max_line_length = 100
+trim_trailing_whitespace = true
+quote_type = single
+
+[*.{yml,yaml,json}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/admin-ui/vue/.husky/commit-msg b/admin-ui/vue/.husky/commit-msg
new file mode 100755
index 0000000..270ebb8
--- /dev/null
+++ b/admin-ui/vue/.husky/commit-msg
@@ -0,0 +1,6 @@
+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.
diff --git a/admin-ui/vue/.husky/post-merge b/admin-ui/vue/.husky/post-merge
new file mode 100644
index 0000000..83fa775
--- /dev/null
+++ b/admin-ui/vue/.husky/post-merge
@@ -0,0 +1,3 @@
+# 每次 git pull 之后, 安装依赖
+
+pnpm install
diff --git a/admin-ui/vue/.husky/pre-commit b/admin-ui/vue/.husky/pre-commit
new file mode 100755
index 0000000..5dccee2
--- /dev/null
+++ b/admin-ui/vue/.husky/pre-commit
@@ -0,0 +1,7 @@
+# update `.vscode/vben-admin.code-workspace` file
+pnpm vsh code-workspace --auto-commit
+
+# Format and submit code according to lintstagedrc.js configuration
+pnpm exec lint-staged
+
+echo Run pre-commit hook done.
diff --git a/admin-ui/vue/.lintstagedrc.mjs b/admin-ui/vue/.lintstagedrc.mjs
new file mode 100644
index 0000000..94b0192
--- /dev/null
+++ b/admin-ui/vue/.lintstagedrc.mjs
@@ -0,0 +1,20 @@
+export default {
+  '*.md': ['prettier --cache --ignore-unknown --write'],
+  '*.vue': [
+    'prettier --write',
+    'eslint --cache --fix',
+    'stylelint --fix --allow-empty-input',
+  ],
+  '*.{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',
+  ],
+  'package.json': ['prettier --cache --write'],
+  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
+    'prettier --cache --write--parser json',
+  ],
+};
diff --git a/admin-ui/vue/.node-version b/admin-ui/vue/.node-version
new file mode 100644
index 0000000..ee5c244
--- /dev/null
+++ b/admin-ui/vue/.node-version
@@ -0,0 +1 @@
+22.1.0
diff --git a/admin-ui/vue/.npmrc b/admin-ui/vue/.npmrc
new file mode 100644
index 0000000..aeac1ae
--- /dev/null
+++ b/admin-ui/vue/.npmrc
@@ -0,0 +1,13 @@
+registry=https://registry.npmmirror.com
+public-hoist-pattern[]=lefthook
+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
diff --git a/admin-ui/vue/.prettierignore b/admin-ui/vue/.prettierignore
new file mode 100644
index 0000000..d0b0ca1
--- /dev/null
+++ b/admin-ui/vue/.prettierignore
@@ -0,0 +1,18 @@
+dist
+dev-dist
+.local
+.output.js
+node_modules
+.nvmrc
+coverage
+CODEOWNERS
+.nitro
+.output
+
+
+**/*.svg
+**/*.sh
+
+public
+.npmrc
+*-lock.yaml
diff --git a/admin-ui/vue/.prettierrc.mjs b/admin-ui/vue/.prettierrc.mjs
new file mode 100644
index 0000000..3e25d2c
--- /dev/null
+++ b/admin-ui/vue/.prettierrc.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/prettier-config';
diff --git a/admin-ui/vue/.stylelintignore b/admin-ui/vue/.stylelintignore
new file mode 100644
index 0000000..f4b2db2
--- /dev/null
+++ b/admin-ui/vue/.stylelintignore
@@ -0,0 +1,4 @@
+dist
+public
+__tests__
+coverage
diff --git a/admin-ui/vue/.vscode/settings.json b/admin-ui/vue/.vscode/settings.json
new file mode 100644
index 0000000..3f572bd
--- /dev/null
+++ b/admin-ui/vue/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+    "cSpell.words": [
+        "iccid",
+        "imei",
+        "imsi",
+        "IOTLCM",
+        "msisdn"
+    ]
+}
\ No newline at end of file
diff --git a/admin-ui/vue/README.md b/admin-ui/vue/README.md
new file mode 100644
index 0000000..e84c839
--- /dev/null
+++ b/admin-ui/vue/README.md
@@ -0,0 +1,152 @@
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
+
+[![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
+
+<h1>Vue Vben Admin</h1>
+</div>
+
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
+
+**English** | [中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md)
+
+## Introduction
+
+Vue Vben Admin is a free and open source middle and back-end template. Using the latest `vue3`, `vite`, `TypeScript` and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.
+
+## Upgrade Notice
+
+This is the latest version, 5.0, and it is not compatible with previous versions. If you are starting a new project, it is recommended to use the latest version. If you wish to view the old version, please use the [v2 branch](https://github.com/vbenjs/vue-vben-admin/tree/v2).
+
+## Feature
+
+- **Latest Technology Stack**: Developed with cutting-edge front-end technologies like Vue 3 and Vite
+- **TypeScript**: A language for application-scale JavaScript
+- **Themes**: Multiple theme colors available with customizable options
+- **Internationalization**: Comprehensive built-in internationalization support
+- **Permissions**: Built-in solution for dynamic route-based permission generation
+
+## Preview
+
+- [Vben Admin](https://vben.pro/) - Full version Chinese site
+
+Test Account: vben/123456
+
+<p align="center">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
+</p>
+
+### Use Gitpod
+
+Open the project in Gitpod (free online dev environment for GitHub) and start coding immediately.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/vbenjs/vue-vben-admin)
+
+## Documentation
+
+[Document](https://doc.vben.pro/)
+
+## Install and use
+
+- Get the project code
+
+```bash
+git clone https://github.com/vbenjs/vue-vben-admin.git
+```
+
+- Installation dependencies
+
+```bash
+cd vue-vben-admin
+
+corepack enable
+
+pnpm install
+```
+
+- run
+
+```bash
+pnpm dev
+```
+
+- build
+
+```bash
+pnpm build
+```
+
+## Change Log
+
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
+
+## How to contribute
+
+You are very welcome to join！[Raise an issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) Or submit a Pull Request。
+
+**Pull Request:**
+
+1. Fork code!
+2. Create your own branch: `git checkout -b feat/xxxx`
+3. Submit your changes: `git commit -am 'feat(function): add xxxxx'`
+4. Push your branch: `git push origin feat/xxxx`
+5. submit`pull request`
+
+## Git Contribution submission specification
+
+- reference [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) specification ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
+
+  - `feat` Add new features
+  - `fix` Fix the problem/BUG
+  - `style` The code style is related and does not affect the running result
+  - `perf` Optimization/performance improvement
+  - `refactor` Refactor
+  - `revert` Undo edit
+  - `test` Test related
+  - `docs` Documentation/notes
+  - `chore` Dependency update/scaffolding configuration modification etc.
+  - `ci` Continuous integration
+  - `types` Type definition file changes
+  - `wip` In development
+
+## Browser support
+
+The `Chrome 80+` browser is recommended for local development
+
+Support modern browsers, not IE
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| :-: | :-: | :-: | :-: | :-: |
+| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## Maintainer
+
+[@Vben](https://github.com/anncwb)
+
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
+## Donate
+
+If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
+
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
+
+<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aee;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
+
+## Contributor
+
+<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
+  <img alt="Contributors"
+        src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
+</a>
+
+## Discord
+
+- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
+
+## License
+
+[MIT © Vben-2020](./LICENSE)
diff --git a/admin-ui/vue/README.zh-CN.md b/admin-ui/vue/README.zh-CN.md
new file mode 100644
index 0000000..e2f05bb
--- /dev/null
+++ b/admin-ui/vue/README.zh-CN.md
@@ -0,0 +1,152 @@
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp"> </a> <br> <br>
+
+[![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
+
+<h1>Vue Vben Admin</h1>
+</div>
+
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vbenjs_vue-vben-admin&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vbenjs_vue-vben-admin) ![codeql](https://github.com/vbenjs/vue-vben-admin/actions/workflows/codeql.yml/badge.svg) ![build](https://github.com/vbenjs/vue-vben-admin/actions/workflows/build.yml/badge.svg) ![ci](https://github.com/vbenjs/vue-vben-admin/actions/workflows/ci.yml/badge.svg) ![deploy](https://github.com/vbenjs/vue-vben-admin/actions/workflows/deploy.yml/badge.svg)
+
+**中文** | [English](./README.md) | [日本語](./README.ja-JP.md)
+
+## 简介
+
+Vue Vben Admin 是 Vue Vben Admin 的升级版本。作为一个免费开源的中后台模板，它采用了最新的 Vue 3、Vite、TypeScript 等主流技术开发，开箱即用，可用于中后台前端开发，也适合学习参考。
+
+## 升级提示
+
+该版本为最新版本`5.0`, 与其他版本不兼容，如果你是新项目，建议使用最新版本。如果你想查看旧版本，请使用 [v2 分支](https://github.com/vbenjs/vue-vben-admin/tree/v2)
+
+## 特性
+
+- **最新技术栈**：使用 Vue3/vite 等前端前沿技术开发
+- **TypeScript**: 应用程序级 JavaScript 的语言
+- **主题**：提供多套主题色彩，可配置自定义主题
+- **国际化**：内置完善的国际化方案
+- **权限** 内置完善的动态路由权限生成方案
+
+## 预览
+
+- [Vben Admin](https://vben.pro/) - 完整版中文站点
+
+测试账号: vben/123456
+
+<p align="center">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview1.png">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview2.png">
+    <img alt="VbenAdmin Logo" width="100%" src="https://anncwb.github.io/anncwb/images/preview3.png">
+</p>
+
+### 使用 Gitpod
+
+在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目，并立即开始编码.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/vbenjs/vue-vben-admin)
+
+## 文档
+
+[文档地址](https://doc.vben.pro/)
+
+## 安装使用
+
+- 获取项目代码
+
+```bash
+git clone https://github.com/vbenjs/vue-vben-admin.git
+```
+
+- 安装依赖
+
+```bash
+cd vue-vben-admin
+
+corepack enable
+
+pnpm install
+```
+
+- 运行
+
+```bash
+pnpm dev
+```
+
+- 打包
+
+```bash
+pnpm build
+```
+
+## 更新日志
+
+[CHANGELOG](https://github.com/vbenjs/vue-vben-admin/releases)
+
+## 如何贡献
+
+非常欢迎你的加入！[提一个 Issue](https://github.com/anncwb/vue-vben-admin/issues/new/choose) 或者提交一个 Pull Request。
+
+**Pull Request:**
+
+1. Fork 代码!
+2. 创建自己的分支: `git checkout -b feature/xxxx`
+3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
+4. 推送您的分支: `git push origin feature/xxxx`
+5. 提交`pull request`
+
+## Git 贡献提交规范
+
+- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
+
+  - `feat` 增加新功能
+  - `fix` 修复问题/BUG
+  - `style` 代码风格相关无影响运行结果的
+  - `perf` 优化/性能提升
+  - `refactor` 重构
+  - `revert` 撤销修改
+  - `test` 测试相关
+  - `docs` 文档/注释
+  - `chore` 依赖更新/脚手架配置修改等
+  - `ci` 持续集成
+  - `types` 类型定义文件更改
+  - `wip` 开发中
+
+## 浏览器支持
+
+本地开发推荐使用`Chrome 80+` 浏览器
+
+支持现代浏览器, 不支持 IE
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| :-: | :-: | :-: | :-: | :-: |
+| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## 维护者
+
+[@Vben](https://github.com/anncwb)
+
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=vbenjs/vue-vben-admin&type=Date)](https://star-history.com/#vbenjs/vue-vben-admin&Date)
+
+## 捐赠
+
+如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
+
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.7/source/sponsor.png)
+
+<a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
+
+## Contributor
+
+<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
+  <img alt="Contributors"
+        src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
+</a>
+
+## Discord
+
+- [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
+
+## License
+
+[MIT © Vben-2020](./LICENSE)
diff --git a/admin-ui/vue/apps/.gitignore b/admin-ui/vue/apps/.gitignore
new file mode 100644
index 0000000..cadf95f
--- /dev/null
+++ b/admin-ui/vue/apps/.gitignore
@@ -0,0 +1 @@
+backend-mock/nitro.config.ts
diff --git a/admin-ui/vue/apps/web-antd/.env b/admin-ui/vue/apps/web-antd/.env
new file mode 100644
index 0000000..5a5584d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/.env
@@ -0,0 +1,9 @@
+# 应用标题
+VITE_APP_TITLE=物联网全生命周期管理平台
+VBEN_LOGO_URL=/images/logo.png
+# 应用命名空间，用于缓存、store等功能的前缀，确保隔离
+VITE_APP_NAMESPACE=iotlcm-admin-web
+# 客户端ID
+VITE_GLOB_CLIENT_ID=your-client-id
+# 对store进行加密的密钥，在将store持久化到localStorage时会使用该密钥进行加密
+VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key
diff --git a/admin-ui/vue/apps/web-antd/.env.analyze b/admin-ui/vue/apps/web-antd/.env.analyze
new file mode 100644
index 0000000..ffafa8d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/.env.analyze
@@ -0,0 +1,7 @@
+# public path
+VITE_BASE=/
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/api
+
+VITE_VISUALIZER=true
diff --git a/admin-ui/vue/apps/web-antd/.env.development b/admin-ui/vue/apps/web-antd/.env.development
new file mode 100644
index 0000000..0e2c2ca
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/.env.development
@@ -0,0 +1,19 @@
+# 端口号
+VITE_PORT=5666
+
+VITE_BASE=/
+
+# 接口地址
+VITE_GLOB_API_URL=/api
+
+# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
+VITE_NITRO_MOCK=false
+
+# 是否打开 devtools，true 为打开，false 为关闭
+VITE_DEVTOOLS=false
+
+# 是否注入全局loading
+VITE_INJECT_APP_LOADING=true
+
+# 客户端ID
+VITE_GLOB_CLIENT_ID=your-client-id
diff --git a/admin-ui/vue/apps/web-antd/.env.production b/admin-ui/vue/apps/web-antd/.env.production
new file mode 100644
index 0000000..87a0f8e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/.env.production
@@ -0,0 +1,22 @@
+VITE_BASE=/
+
+# 接口地址
+VITE_GLOB_API_URL=/api
+
+# 是否开启压缩，可以设置为 none, brotli, gzip
+VITE_COMPRESS=none
+
+# 是否开启 PWA
+VITE_PWA=false
+
+# vue-router 的模式
+VITE_ROUTER_HISTORY=hash
+
+# 是否注入全局loading
+VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
+
+# 客户端ID
+VITE_GLOB_CLIENT_ID=your-client-id
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/index.html b/admin-ui/vue/apps/web-antd/index.html
new file mode 100644
index 0000000..6b58bda
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/index.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta name="description" content="A Modern Back-end Management System" />
+    <meta name="keywords" content="Vben Admin Vue3 Vite" />
+    <meta name="author" content="Vben" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <title></title>
+    <link rel="icon" href="" />
+    <script>
+      (function () {
+        try {
+          var cacheText = window.localStorage.getItem('runtime-setting');
+          var cache = cacheText ? JSON.parse(cacheText) : null;
+          var setting = cache && cache.setting;
+
+          if (!setting) {
+            return;
+          }
+
+          window.__APP_SETTING__ = setting;
+
+          if (setting.appTitle) {
+            document.title = setting.appTitle;
+          }
+
+          if (setting.appIcon) {
+            var icon = document.querySelector('link[rel="icon"]');
+            if (icon) {
+              icon.href = setting.appIcon;
+            }
+          }
+
+        } catch (error) {}
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/admin-ui/vue/apps/web-antd/loading.html b/admin-ui/vue/apps/web-antd/loading.html
new file mode 100644
index 0000000..7461939
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/loading.html
@@ -0,0 +1,290 @@
+<style>
+  html {
+    /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
+    line-height: 1.15;
+  }
+
+  .loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #f4f7f9;
+    transition: background-color 0.4s ease;
+
+    /* transition: all 0.8s ease-out; */
+  }
+
+  .loading.hidden {
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.8s ease-out;
+  }
+
+  .dark .loading {
+    background: #0d0d10;
+  }
+
+  .title {
+    margin-top: 66px;
+    font-size: 28px;
+    font-weight: 600;
+    color: rgb(0 0 0 / 85%);
+  }
+
+  .dark .title {
+    color: #fff;
+  }
+
+  .loader {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 32px;
+  }
+
+  .loader::before {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    width: 48px;
+    height: 5px;
+    content: '';
+    background: hsl(var(--primary, 210 100% 50%) / 50%);
+    border-radius: 50%;
+    animation: shadow-ani 0.5s linear infinite;
+  }
+
+  .loader::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background: hsl(var(--primary, 210 100% 50%));
+    border-radius: 4px;
+    animation: jump-ani 0.5s linear infinite;
+  }
+
+  .title-wrap {
+    position: relative;
+    min-width: 420px;
+    min-height: 88px;
+    text-align: center;
+  }
+
+  .title,
+  .status-text,
+  .status-subtitle {
+    position: absolute;
+    left: 50%;
+    width: 100%;
+    transform: translateX(-50%);
+    transition:
+      opacity 0.45s ease,
+      transform 0.45s ease;
+  }
+
+  .title {
+    top: 0;
+    margin-top: 0;
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 1.35;
+    color: rgb(0 0 0 / 85%);
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
+  }
+
+  .status-text {
+    top: 0;
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 1.35;
+    color: rgb(0 0 0 / 85%);
+    opacity: 1;
+  }
+
+  .status-subtitle {
+    top: 48px;
+    font-size: 13px;
+    letter-spacing: 0.08em;
+    color: rgb(100 116 139 / 88%);
+  }
+
+  .title-wrap.is-switching .status-text,
+  .title-wrap.is-switching .status-subtitle {
+    opacity: 0;
+    transform: translateX(-50%) translateY(8px);
+  }
+
+  .loading.app-title-ready .status-text,
+  .loading.app-title-ready .status-subtitle {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-10px);
+  }
+
+  .loading.app-title-ready .title {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  .dark .status-text {
+    color: #fff;
+  }
+
+  .dark .status-subtitle {
+    color: rgb(148 163 184 / 78%);
+  }
+
+  @keyframes jump-ani {
+    15% {
+      border-bottom-right-radius: 3px;
+    }
+
+    25% {
+      transform: translateY(9px) rotate(22.5deg);
+    }
+
+    50% {
+      border-bottom-right-radius: 40px;
+      transform: translateY(18px) scale(1, 0.9) rotate(45deg);
+    }
+
+    75% {
+      transform: translateY(9px) rotate(67.5deg);
+    }
+
+    100% {
+      transform: translateY(0) rotate(90deg);
+    }
+  }
+
+  @keyframes shadow-ani {
+    0%,
+    100% {
+      transform: scale(1, 1);
+    }
+
+    50% {
+      transform: scale(1.2, 1);
+    }
+  }
+</style>
+<div class="loading" id="__app-loading__">
+  <div class="loader" aria-hidden="true"></div>
+  <div class="title-wrap">
+    <div class="status-text" id="__app-loading-status__">正在初始化应用...</div>
+    <div class="status-subtitle" id="__app-loading-subtitle__">
+      请稍候，系统正在准备运行环境
+    </div>
+    <div class="title" id="__app-loading-title__">智联·云</div>
+  </div>
+</div>
+<script data-app-loading="runtime-title">
+  (function () {
+    var loadingElement = document.getElementById('__app-loading__');
+    var statusElement = document.getElementById('__app-loading-status__');
+    var subtitleElement = document.getElementById('__app-loading-subtitle__');
+    var titleElement = document.getElementById('__app-loading-title__');
+    var titleWrapElement = titleElement && titleElement.parentElement;
+    var messageTimer = null;
+    var messageIndex = 0;
+
+    var messages = [
+      {
+        status: '正在初始化应用...',
+        subtitle: '请稍候，系统正在准备运行环境',
+      },
+      {
+        status: '正在连接配置中心...',
+        subtitle: '正在读取启动所需的运行时配置',
+      },
+      {
+        status: '正在装载页面资源...',
+        subtitle: '首次加载可能略慢，请稍候片刻',
+      },
+      {
+        status: '正在校准界面状态...',
+        subtitle: '即将进入系统首页',
+      },
+    ];
+
+    if (
+      !loadingElement ||
+      !statusElement ||
+      !subtitleElement ||
+      !titleElement ||
+      !titleWrapElement
+    ) {
+      return;
+    }
+
+    function applyMessage(message) {
+      statusElement.textContent = message.status;
+      subtitleElement.textContent = message.subtitle;
+    }
+
+    function switchMessage(message) {
+      titleWrapElement.classList.add('is-switching');
+      window.setTimeout(function () {
+        applyMessage(message);
+        titleWrapElement.classList.remove('is-switching');
+      }, 220);
+    }
+
+    function startMessageLoop() {
+      statusElement.style.opacity = '';
+      subtitleElement.style.opacity = '';
+      applyMessage(messages[0]);
+      messageTimer = window.setInterval(function () {
+        messageIndex = (messageIndex + 1) % messages.length;
+        switchMessage(messages[messageIndex]);
+      }, 1800);
+    }
+
+    function stopMessageLoop() {
+      if (messageTimer !== null) {
+        window.clearInterval(messageTimer);
+        messageTimer = null;
+      }
+    }
+
+    function applyTitle(setting) {
+      var appTitle = setting && setting.appTitle;
+
+      if (appTitle) {
+        stopMessageLoop();
+        titleElement.textContent = appTitle;
+        loadingElement.classList.add('app-title-ready');
+      }
+    }
+
+    // 配置已就绪，直接展示标题
+    if (window.__APP_SETTING__) {
+      applyTitle(window.__APP_SETTING__);
+      return;
+    }
+
+    // 配置未就绪，直接展示默认加载文案
+    startMessageLoop();
+
+    // 等待配置返回后，若已启动文案轮播则停止，并展示标题
+    if (window.__APP_SETTING_PROMISE__) {
+      window.__APP_SETTING_PROMISE__
+        .then(function (setting) {
+          applyTitle(setting);
+        })
+        .catch(function () {});
+    }
+  })();
+</script>
diff --git a/admin-ui/vue/apps/web-antd/package.json b/admin-ui/vue/apps/web-antd/package.json
new file mode 100644
index 0000000..f04c7ef
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "@vben/web-antd",
+  "version": "5.5.9",
+  "homepage": "https://vben.pro",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "apps/web-antd"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "vben",
+    "email": "xxx@example.com",
+    "url": "https://github.com/anncwb"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "pnpm vite build --mode production",
+    "build:analyze": "pnpm vite build --mode analyze",
+    "dev": "pnpm vite --mode development",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit --skipLibCheck"
+  },
+  "imports": {
+    "#/*": "./src/*"
+  },
+  "dependencies": {
+    "@highlightjs/vue-plugin": "^2.1.0",
+    "@tinymce/tinymce-vue": "^6.1.0",
+    "@vben/access": "workspace:*",
+    "@vben/common-ui": "workspace:*",
+    "@vben/constants": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/icons": "workspace:*",
+    "@vben/layouts": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
+    "@vben/preferences": "workspace:*",
+    "@vben/request": "workspace:*",
+    "@vben/stores": "workspace:*",
+    "@vben/styles": "workspace:*",
+    "@vben/types": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "ant-design-vue": "catalog:",
+    "cropperjs": "^1.6.2",
+    "dayjs": "catalog:",
+    "highlight.js": "^11.11.1",
+    "js-md5": "^0.8.3",
+    "lodash-es": "^4.17.21",
+    "pinia": "catalog:",
+    "tinymce": "^7.3.0",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12"
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/plugins/api-type-generator.ts b/admin-ui/vue/apps/web-antd/plugins/api-type-generator.ts
new file mode 100644
index 0000000..19de09b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/plugins/api-type-generator.ts
@@ -0,0 +1,427 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { PluginOption } from 'vite';
+
+import { Buffer } from 'node:buffer';
+import { constants as fsConstants } from 'node:fs';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+interface ApiTypeGeneratorOptions {
+  apiRoot: string;
+}
+
+interface DirNode {
+  children?: DirNode[];
+  key: string;
+  title: string;
+  value: string;
+}
+
+interface WriteTypePayload {
+  autoImport?: boolean;
+  content?: string;
+  dir?: string;
+  fileName?: string;
+  overwrite?: boolean;
+}
+
+interface CheckTypeFilePayload {
+  items?: CheckTypeFileItem[];
+}
+
+interface CheckTypeFileItem {
+  dir?: string;
+  fileName?: string;
+  key?: string;
+}
+
+const API_TYPE_GENERATOR_PREFIX = '/__api-type-generator__';
+
+export function apiTypeGeneratorPlugin(
+  options: ApiTypeGeneratorOptions,
+): PluginOption {
+  const apiRoot = path.resolve(options.apiRoot);
+
+  return {
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use(async (request, response, next) => {
+        const url = request.url?.split('?')[0] ?? '';
+
+        if (!url.startsWith(API_TYPE_GENERATOR_PREFIX)) {
+          next();
+          return;
+        }
+
+        try {
+          if (
+            request.method === 'GET' &&
+            url === `${API_TYPE_GENERATOR_PREFIX}/dirs`
+          ) {
+            const data = await scanApiDirs(apiRoot);
+
+            sendJson(response, 200, { data, success: true });
+            return;
+          }
+
+          if (
+            request.method === 'POST' &&
+            url === `${API_TYPE_GENERATOR_PREFIX}/exists`
+          ) {
+            const payload = await readJsonBody<CheckTypeFilePayload>(request);
+            const data = await checkTypeFiles(apiRoot, payload);
+
+            sendJson(response, 200, { data, success: true });
+            return;
+          }
+
+          if (
+            request.method === 'POST' &&
+            url === `${API_TYPE_GENERATOR_PREFIX}/write`
+          ) {
+            const payload = await readJsonBody<WriteTypePayload>(request);
+            const data = await writeTypeFile(apiRoot, payload);
+
+            sendJson(response, 200, { data, success: true });
+            return;
+          }
+
+          sendJson(response, 404, {
+            message: '接口不存在',
+            success: false,
+          });
+        } catch (error) {
+          const statusCode =
+            error instanceof ApiTypeGeneratorError ? error.status : 500;
+
+          sendJson(response, statusCode, {
+            code:
+              error instanceof ApiTypeGeneratorError ? error.code : 'UNKNOWN',
+            message: error instanceof Error ? error.message : '生成失败',
+            success: false,
+          });
+        }
+      });
+    },
+    name: 'web-antd:api-type-generator',
+  };
+}
+
+class ApiTypeGeneratorError extends Error {
+  constructor(
+    message: string,
+    public status = 400,
+    public code = 'BAD_REQUEST',
+  ) {
+    super(message);
+  }
+}
+
+async function accessFile(filePath: string) {
+  try {
+    await fs.access(filePath, fsConstants.F_OK);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function ensureInApiRoot(apiRoot: string, targetPath: string) {
+  const relativePath = path.relative(apiRoot, targetPath);
+
+  if (
+    relativePath.startsWith('..') ||
+    path.isAbsolute(relativePath) ||
+    relativePath === ''
+  ) {
+    if (relativePath === '') {
+      return;
+    }
+
+    throw new ApiTypeGeneratorError('目标路径不在 src/api 目录下');
+  }
+}
+
+function extractTypeNames(content: string) {
+  const names = new Set<string>();
+  const regex = /export\s+(?:interface|type)\s+([A-Za-z_$][\w$]*)/g;
+  const results = content.matchAll(regex);
+
+  for (const result of results) {
+    const typeName = result[1];
+
+    if (!/(?:Param|Res)$/u.test(typeName)) {
+      continue;
+    }
+
+    names.add(typeName);
+  }
+
+  return [...names];
+}
+
+function formatTypeImport(typeNames: string[], importPath: string) {
+  const sortedNames = [...new Set(typeNames)].toSorted();
+
+  if (sortedNames.length === 0) {
+    return '';
+  }
+
+  if (sortedNames.length === 1) {
+    return `import type { ${sortedNames[0]} } from '${importPath}';`;
+  }
+
+  return `import type {\n  ${sortedNames.join(',\n  ')},\n} from '${importPath}';`;
+}
+
+function getImportPath(fileName: string) {
+  return `./${fileName.replace(/\.ts$/u, '')}`;
+}
+
+function getSafeFileName(fileName?: string) {
+  const safeFileName = fileName?.trim() || 'type.ts';
+
+  if (
+    !/^[\w.-]+\.ts$/u.test(safeFileName) ||
+    safeFileName.includes('..') ||
+    safeFileName.includes('/') ||
+    safeFileName.includes('\\')
+  ) {
+    throw new ApiTypeGeneratorError('文件名必须是单个 .ts 文件名');
+  }
+
+  return safeFileName;
+}
+
+function getSafeRelativeDir(dir?: string) {
+  const safeDir = (dir ?? '').trim().replaceAll('\\', '/');
+
+  if (!safeDir || safeDir === '.') {
+    return '';
+  }
+
+  if (path.isAbsolute(safeDir) || safeDir.split('/').includes('..')) {
+    throw new ApiTypeGeneratorError('目录路径不合法');
+  }
+
+  return safeDir.split('/').filter(Boolean).join('/');
+}
+
+function mergeTypeImport(
+  source: string,
+  importPath: string,
+  typeNames: string[],
+) {
+  const importRegex = new RegExp(
+    String.raw`import\s+type\s+\{([\s\S]*?)\}\s+from\s+['"]${escapeRegExp(
+      importPath,
+    )}['"];?`,
+    'u',
+  );
+  const matchedImport = source.match(importRegex);
+
+  if (matchedImport) {
+    const existedNames = matchedImport[1]
+      .split(',')
+      .map((item) => item.trim())
+      .filter(Boolean);
+    const nextImport = formatTypeImport(
+      [...existedNames, ...typeNames],
+      importPath,
+    );
+
+    return source.replace(importRegex, nextImport);
+  }
+
+  const importStatement = formatTypeImport(typeNames, importPath);
+
+  if (!importStatement) {
+    return source;
+  }
+
+  return `${importStatement}\n\n${source}`;
+}
+
+function escapeRegExp(value: string) {
+  return value.replaceAll(/[.*+?^${}()|[\]\\]/gu, String.raw`\$&`);
+}
+
+async function readJsonBody<T>(request: IncomingMessage) {
+  const chunks: Buffer[] = [];
+
+  for await (const chunk of request) {
+    chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+  }
+
+  const content = Buffer.concat(chunks).toString('utf8');
+
+  if (!content) {
+    return {} as T;
+  }
+
+  try {
+    return JSON.parse(content) as T;
+  } catch {
+    throw new ApiTypeGeneratorError('请求体必须是合法 JSON');
+  }
+}
+
+async function scanApiDirs(apiRoot: string) {
+  async function scan(currentDir: string): Promise<DirNode[]> {
+    const dirents = await fs.readdir(currentDir, { withFileTypes: true });
+    const nodes = await Promise.all(
+      dirents
+        .filter((dirent) => dirent.isDirectory())
+        .toSorted((prev, next) => prev.name.localeCompare(next.name))
+        .map(async (dirent) => {
+          const fullPath = path.join(currentDir, dirent.name);
+          const relativePath = path
+            .relative(apiRoot, fullPath)
+            .replaceAll(path.sep, '/');
+          const children = await scan(fullPath);
+
+          return {
+            children: children.length > 0 ? children : undefined,
+            key: relativePath,
+            title: dirent.name,
+            value: relativePath,
+          };
+        }),
+    );
+
+    return nodes;
+  }
+
+  return [
+    {
+      children: await scan(apiRoot),
+      key: '.',
+      title: 'api',
+      value: '.',
+    },
+  ];
+}
+
+async function checkTypeFiles(
+  apiRoot: string,
+  payload: CheckTypeFilePayload,
+) {
+  const items = payload.items ?? [];
+
+  if (!Array.isArray(items)) {
+    throw new ApiTypeGeneratorError('检查参数必须是数组');
+  }
+
+  return Promise.all(
+    items.map(async (item, index) => {
+      const relativeDir = getSafeRelativeDir(item.dir);
+      const fileName = getSafeFileName(item.fileName);
+      const targetDir = path.resolve(apiRoot, relativeDir);
+
+      ensureInApiRoot(apiRoot, targetDir);
+
+      const targetPath = path.resolve(targetDir, fileName);
+
+      ensureInApiRoot(apiRoot, targetPath);
+
+      return {
+        dir: relativeDir || '.',
+        exists: await accessFile(targetPath),
+        fileName,
+        filePath: path.relative(apiRoot, targetPath).replaceAll(path.sep, '/'),
+        key: item.key ?? String(index),
+      };
+    }),
+  );
+}
+
+function sendJson(response: ServerResponse, statusCode: number, data: unknown) {
+  response.statusCode = statusCode;
+  response.setHeader('Content-Type', 'application/json;charset=utf-8');
+  response.end(JSON.stringify(data));
+}
+
+async function updateIndexTypeImport(
+  targetDir: string,
+  fileName: string,
+  content: string,
+) {
+  const indexPath = path.join(targetDir, 'index.ts');
+  const hasIndexFile = await accessFile(indexPath);
+
+  if (!hasIndexFile) {
+    return {
+      importSkipped: true,
+      importUpdated: false,
+    };
+  }
+
+  const typeNames = extractTypeNames(content);
+
+  if (typeNames.length === 0) {
+    return {
+      importSkipped: true,
+      importUpdated: false,
+    };
+  }
+
+  const source = await fs.readFile(indexPath, 'utf8');
+  const nextSource = mergeTypeImport(
+    source,
+    getImportPath(fileName),
+    typeNames,
+  );
+
+  if (nextSource !== source) {
+    await fs.writeFile(indexPath, nextSource, 'utf8');
+  }
+
+  return {
+    importSkipped: false,
+    importUpdated: nextSource !== source,
+  };
+}
+
+async function writeTypeFile(apiRoot: string, payload: WriteTypePayload) {
+  const relativeDir = getSafeRelativeDir(payload.dir);
+  const fileName = getSafeFileName(payload.fileName);
+  const content = payload.content ?? '';
+
+  if (!content.trim()) {
+    throw new ApiTypeGeneratorError('类型定义内容不能为空');
+  }
+
+  const targetDir = path.resolve(apiRoot, relativeDir);
+
+  ensureInApiRoot(apiRoot, targetDir);
+
+  const targetPath = path.resolve(targetDir, fileName);
+
+  ensureInApiRoot(apiRoot, targetPath);
+
+  const exists = await accessFile(targetPath);
+
+  if (exists && !payload.overwrite) {
+    throw new ApiTypeGeneratorError('目标文件已存在', 409, 'FILE_EXISTS');
+  }
+
+  await fs.mkdir(targetDir, { recursive: true });
+  await fs.writeFile(
+    targetPath,
+    content.endsWith('\n') ? content : `${content}\n`,
+    'utf8',
+  );
+
+  const importResult = payload.autoImport
+    ? await updateIndexTypeImport(targetDir, fileName, content)
+    : {
+        importSkipped: false,
+        importUpdated: false,
+      };
+
+  return {
+    exists,
+    filePath: path.relative(apiRoot, targetPath).replaceAll(path.sep, '/'),
+    ...importResult,
+  };
+}
diff --git a/admin-ui/vue/apps/web-antd/postcss.config.mjs b/admin-ui/vue/apps/web-antd/postcss.config.mjs
new file mode 100644
index 0000000..3d80704
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';
diff --git a/admin-ui/vue/apps/web-antd/public/config.json b/admin-ui/vue/apps/web-antd/public/config.json
new file mode 100644
index 0000000..e69de29
diff --git a/admin-ui/vue/apps/web-antd/public/favicon.ico b/admin-ui/vue/apps/web-antd/public/favicon.ico
new file mode 100644
index 0000000..17edf34
Binary files /dev/null and b/admin-ui/vue/apps/web-antd/public/favicon.ico differ
diff --git a/admin-ui/vue/apps/web-antd/public/logo.png b/admin-ui/vue/apps/web-antd/public/logo.png
new file mode 100644
index 0000000..c93fb6d
Binary files /dev/null and b/admin-ui/vue/apps/web-antd/public/logo.png differ
diff --git a/admin-ui/vue/apps/web-antd/public/menu-setting.json b/admin-ui/vue/apps/web-antd/public/menu-setting.json
new file mode 100644
index 0000000..ba683e7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/public/menu-setting.json
@@ -0,0 +1,18 @@
+{
+  "tDashboard": {
+    "businessAlert": true,
+    "businessVolume": true,
+    "dataSharing": true,
+    "feeSituation": true,
+    "lifeCycle": true,
+    "locationDistribution": true,
+    "myPanel": true,
+    "myPanelNew": true,
+    "myPanelSimActive": true,
+    "myPanelSimCount": true,
+    "myPanelUseData": true,
+    "myPanelUseMsg": true,
+    "quickAccessBorder": true,
+    "trafficPool": true
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/public/mini-program-code.png b/admin-ui/vue/apps/web-antd/public/mini-program-code.png
new file mode 100644
index 0000000..ab9ef56
Binary files /dev/null and b/admin-ui/vue/apps/web-antd/public/mini-program-code.png differ
diff --git a/admin-ui/vue/apps/web-antd/public/setting.json b/admin-ui/vue/apps/web-antd/public/setting.json
new file mode 100644
index 0000000..7ea1074
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/public/setting.json
@@ -0,0 +1,14 @@
+{
+  "appTitle": "物联网全生命周期管理平台",
+  "appIcon": "/logo.png",
+  "loginPageTitle": "物联网设备上云首选",
+  "loginPageDescription": "新一代物联网设备统一接入平台",
+  "loginSloganImage": "",
+  "copyright": {
+    "companyName": "示例智联",
+    "companySiteLink": "https://example.com",
+    "date": "2024-2025",
+    "icp": "",
+    "icpLink": "https://beian.miit.gov.cn/"
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/adapter/component/antd.ts b/admin-ui/vue/apps/web-antd/src/adapter/component/antd.ts
new file mode 100644
index 0000000..ec537dc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/adapter/component/antd.ts
@@ -0,0 +1,102 @@
+import { defineAsyncComponent } from 'vue';
+
+/**
+ * Ant Design Vue 基础组件统一在这里异步引入。
+ *
+ * adapter 层只关心组件映射关系，避免把具体 UI 库的 import 细节散落到注册文件中。
+ */
+export const AutoComplete = defineAsyncComponent(
+  () => import('ant-design-vue/es/auto-complete'),
+);
+
+export const Button = defineAsyncComponent(
+  () => import('ant-design-vue/es/button'),
+);
+
+export const Checkbox = defineAsyncComponent(
+  () => import('ant-design-vue/es/checkbox'),
+);
+
+export const CheckboxGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
+);
+
+export const DatePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/date-picker'),
+);
+
+export const Divider = defineAsyncComponent(
+  () => import('ant-design-vue/es/divider'),
+);
+
+export const Image = defineAsyncComponent(
+  () => import('ant-design-vue/es/image'),
+);
+
+export const Input = defineAsyncComponent(
+  () => import('ant-design-vue/es/input'),
+);
+
+export const InputNumber = defineAsyncComponent(
+  () => import('ant-design-vue/es/input-number'),
+);
+
+export const InputPassword = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.InputPassword),
+);
+
+export const Mentions = defineAsyncComponent(
+  () => import('ant-design-vue/es/mentions'),
+);
+
+export const PreviewGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/image').then((res) => res.ImagePreviewGroup),
+);
+
+export const Radio = defineAsyncComponent(
+  () => import('ant-design-vue/es/radio'),
+);
+
+export const RadioGroup = defineAsyncComponent(() =>
+  import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
+);
+
+export const RangePicker = defineAsyncComponent(() =>
+  import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
+);
+
+export const Rate = defineAsyncComponent(
+  () => import('ant-design-vue/es/rate'),
+);
+
+export const Select = defineAsyncComponent(
+  () => import('ant-design-vue/es/select'),
+);
+
+export const Space = defineAsyncComponent(
+  () => import('ant-design-vue/es/space'),
+);
+
+export const Switch = defineAsyncComponent(
+  () => import('ant-design-vue/es/switch'),
+);
+
+export const Textarea = defineAsyncComponent(() =>
+  import('ant-design-vue/es/input').then((res) => res.Textarea),
+);
+
+export const TimePicker = defineAsyncComponent(
+  () => import('ant-design-vue/es/time-picker'),
+);
+
+export const TreeSelect = defineAsyncComponent(
+  () => import('ant-design-vue/es/tree-select'),
+);
+
+export const Cascader = defineAsyncComponent(
+  () => import('ant-design-vue/es/cascader'),
+);
+
+export const Upload = defineAsyncComponent(
+  () => import('ant-design-vue/es/upload'),
+);
diff --git a/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/message.ts b/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/message.ts
new file mode 100644
index 0000000..81d7282
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/message.ts
@@ -0,0 +1,20 @@
+import { globalShareState } from '@vben/common-ui';
+
+import { notification } from 'ant-design-vue';
+
+/**
+ * 框架共享消息适配。
+ *
+ * common-ui 内部只声明消息场景，这里绑定到当前 UI 库的 notification 实现。
+ */
+export function defineComponentAdapterMessage() {
+  globalShareState.defineMessage({
+    copyPreferencesSuccess: (title, content) => {
+      notification.success({
+        description: content,
+        message: title,
+        placement: 'bottomRight',
+      });
+    },
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/upload-preview.ts b/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/upload-preview.ts
new file mode 100644
index 0000000..2ab25b1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/upload-preview.ts
@@ -0,0 +1,125 @@
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type { Ref } from 'vue';
+
+import { h, render, unref } from 'vue';
+
+import { Image, PreviewGroup } from '../antd';
+
+/**
+ * UploadFile 没有稳定的图片标识字段时，通过 url/name/type 组合判断是否走图片预览。
+ */
+function isImageFile(file: UploadFile): boolean {
+  const imageExtensions = new Set(['bmp', 'gif', 'jpeg', 'jpg', 'png', 'webp']);
+
+  if (file.url) {
+    const ext = file.url?.split('.').pop()?.toLowerCase();
+    return ext ? imageExtensions.has(ext) : false;
+  }
+
+  if (!file.type) {
+    const ext = file.name?.split('.').pop()?.toLowerCase();
+    return ext ? imageExtensions.has(ext) : false;
+  }
+
+  return file.type.startsWith('image/');
+}
+
+/**
+ * 本地待上传图片没有 url 时，需要转成 base64 才能进入 ImagePreviewGroup。
+ */
+function getBase64(file: File) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.addEventListener('load', () => resolve(reader.result));
+    reader.addEventListener('error', (error) => reject(error));
+  });
+}
+
+/**
+ * 基于 Ant Design Vue ImagePreviewGroup 创建一次性预览容器。
+ *
+ * 预览关闭后会卸载并移除临时 DOM，避免多次预览后残留节点。
+ */
+export const previewImage = async (
+  file: UploadFile,
+  visible: Ref<boolean>,
+  fileList: Ref<UploadProps['fileList']>,
+) => {
+  // 非图片沿用文件打开行为，不进入图片预览组
+  if (!isImageFile(file)) {
+    if (file.url) {
+      window.open(file.url, '_blank');
+    } else if (file.preview) {
+      window.open(file.preview, '_blank');
+    } else {
+      console.warn('无法打开文件，没有可用的URL或预览地址');
+    }
+    return;
+  }
+
+  // Image 与 PreviewGroup 只有预览时才加载，保持基础表单渲染轻量
+  const [ImageComponent, PreviewGroupComponent] = await Promise.all([
+    Image,
+    PreviewGroup,
+  ]);
+
+  const imageFiles = (unref(fileList) || []).filter((element) =>
+    isImageFile(element),
+  );
+
+  // 同一上传列表中的图片都加入预览组，支持左右切换
+  for (const imgFile of imageFiles) {
+    if (!imgFile.url && !imgFile.preview && imgFile.originFileObj) {
+      imgFile.preview = (await getBase64(imgFile.originFileObj)) as string;
+    }
+  }
+
+  const container: HTMLElement | null = document.createElement('div');
+  document.body.append(container);
+
+  // 避免关闭动画期间重复触发卸载
+  let isUnmounted = false;
+
+  const PreviewWrapper = {
+    setup() {
+      return () => {
+        if (isUnmounted) return null;
+
+        return h(
+          PreviewGroupComponent,
+          {
+            class: 'hidden',
+            preview: {
+              visible: visible.value,
+              current: imageFiles.findIndex((f) => f.uid === file.uid),
+              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);
+};
diff --git a/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/with-default-placeholder.ts b/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/with-default-placeholder.ts
new file mode 100644
index 0000000..c19be18
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/with-default-placeholder.ts
@@ -0,0 +1,46 @@
+import type { Component } from 'vue';
+
+import type { Recordable } from '@vben/types';
+
+import { defineComponent, h, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+/**
+ * 为输入类/选择类组件补齐统一占位文案，并保留原组件暴露的方法。
+ */
+export const withDefaultPlaceholder = <T extends Component>(
+  component: T,
+  type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
+) => {
+  return defineComponent({
+    name: component.name,
+    inheritAttrs: false,
+    setup: (props: any, { attrs, expose, slots }) => {
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
+      const innerRef = ref();
+
+      // 透传内部组件实例方法，避免包装后影响外部通过 ref 调用 focus 等能力
+      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,
+        );
+    },
+  });
+};
diff --git a/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/with-preview-upload.ts b/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/with-preview-upload.ts
new file mode 100644
index 0000000..305ffe8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/adapter/component/helpers/with-preview-upload.ts
@@ -0,0 +1,114 @@
+import type {
+  UploadChangeParam,
+  UploadFile,
+  UploadProps,
+} from 'ant-design-vue';
+
+import { defineComponent, h, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { isEmpty } from '@vben/utils';
+
+import { Button, Upload } from '../antd';
+import { previewImage } from './upload-preview';
+
+/**
+ * Upload 未提供自定义插槽时，补齐项目统一的默认上传按钮。
+ */
+function createDefaultSlotsWithUpload(listType: string, placeholder: string) {
+  switch (listType) {
+    case 'picture-card': {
+      return {
+        default: () => placeholder,
+      };
+    }
+    default: {
+      return {
+        default: () =>
+          h(
+            Button,
+            {
+              icon: h(IconifyIcon, {
+                icon: 'ant-design:upload-outlined',
+                class: 'mb-1 size-4',
+              }),
+            },
+            () => placeholder,
+          ),
+      };
+    }
+  }
+}
+
+/**
+ * 适配 Ant Design Vue Upload 到 Vben Form：
+ * - 使用 modelValue 与表单值同步
+ * - 上传列表为空时回写 undefined
+ * - 内置图片预览，非图片文件直接打开地址
+ */
+export const withPreviewUpload = () => {
+  return defineComponent({
+    name: Upload.name,
+    emits: ['change', '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 handleChange = async (event: UploadChangeParam) => {
+        fileList.value = event.fileList;
+        emit('change', event);
+        emit(
+          'update:modelValue',
+          event.fileList?.length ? fileList.value : undefined,
+        );
+      };
+
+      const handlePreview = async (file: UploadFile) => {
+        previewVisible.value = true;
+        await previewImage(file, previewVisible, fileList);
+      };
+
+      const renderUploadButton = (): any => {
+        const isDisabled = attrs.disabled;
+
+        // 禁用状态下只展示文件列表，不再渲染上传入口
+        if (isDisabled) {
+          return null;
+        }
+
+        return isEmpty(slots)
+          ? createDefaultSlotsWithUpload(listType, placeholder)
+          : slots;
+      };
+
+      // 监听 formApi.setValues 等外部回填，保持 Upload 内部 fileList 同步
+      watch(
+        () => attrs.modelValue,
+        (res) => {
+          fileList.value = res;
+        },
+      );
+
+      return () =>
+        h(
+          Upload,
+          {
+            ...props,
+            ...attrs,
+            fileList: fileList.value,
+            onChange: handleChange,
+            onPreview: handlePreview,
+          },
+          renderUploadButton(),
+        );
+    },
+  });
+};
diff --git a/admin-ui/vue/apps/web-antd/src/adapter/component/index.ts b/admin-ui/vue/apps/web-antd/src/adapter/component/index.ts
new file mode 100644
index 0000000..fb4b084
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/adapter/component/index.ts
@@ -0,0 +1,136 @@
+import type { Component } from 'vue';
+
+import type { ComponentType } from './types';
+
+import { h } from 'vue';
+
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
+
+import { HtcRegisterComponent } from '#/components/HtCustom/FormExpand/register';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { FileUpload, ImageUpload } from '#/components/upload';
+
+import {
+  AutoComplete,
+  Button,
+  Cascader,
+  Checkbox,
+  CheckboxGroup,
+  DatePicker,
+  Divider,
+  Input,
+  InputNumber,
+  InputPassword,
+  Mentions,
+  Radio,
+  RadioGroup,
+  RangePicker,
+  Rate,
+  Select,
+  Space,
+  Switch,
+  Textarea,
+  TimePicker,
+  TreeSelect,
+} from './antd';
+import { defineComponentAdapterMessage } from './helpers/message';
+import { withDefaultPlaceholder } from './helpers/with-default-placeholder';
+import { withPreviewUpload } from './helpers/with-preview-upload';
+
+/**
+ * 通用组件适配层。
+ *
+ * 这里只维护“组件名称 -> 真实组件”的映射关系，供 vben-form、vben-modal、
+ * vben-drawer 等框架组件通过 globalShareState 复用。
+ */
+function createComponentAdapterMap(): Partial<
+  Record<ComponentType, Component>
+> {
+  return {
+    // 如果你的组件体积比较大，可以使用异步加载
+    // Button: () =>
+    // import('xxx').then((res) => res.Button),
+    ApiCascader: withDefaultPlaceholder(ApiComponent, 'select', {
+      component: Cascader,
+      fieldNames: { label: 'label', value: 'value', children: 'children' },
+      loadingSlot: 'suffixIcon',
+      modelPropName: 'value',
+      visibleEvent: 'onVisibleChange',
+    }),
+    ApiSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiSelect',
+      },
+      'select',
+      {
+        component: Select,
+        loadingSlot: 'suffixIcon',
+        visibleEvent: 'onDropdownVisibleChange',
+        modelPropName: 'value',
+      },
+    ),
+    ApiTreeSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: TreeSelect,
+        fieldNames: { label: 'label', value: 'value', children: 'children' },
+        loadingSlot: 'suffixIcon',
+        modelPropName: 'value',
+        optionsPropName: 'treeData',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
+    AutoComplete,
+    Cascader,
+    Checkbox,
+    CheckboxGroup,
+    DatePicker,
+    // 弹窗、抽屉等框架组件会通过共享状态读取这两个按钮组件
+    DefaultButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'default' }, slots);
+    },
+    Divider,
+    FileUpload,
+    ImageUpload,
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
+    Input: withDefaultPlaceholder(Input, 'input'),
+    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
+    InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
+    Mentions: withDefaultPlaceholder(Mentions, 'input'),
+    PrimaryButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, type: 'primary' }, slots);
+    },
+    Radio,
+    RadioGroup,
+    RangePicker,
+    Rate,
+    RichTextarea,
+    Select: withDefaultPlaceholder(Select, 'select'),
+    // SelectDivision,
+    Space,
+    Switch,
+    Textarea: withDefaultPlaceholder(Textarea, 'input'),
+    TimePicker,
+    TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
+    Upload: withPreviewUpload(),
+    ...HtcRegisterComponent,
+  };
+}
+
+async function initComponentAdapter() {
+  // 先注册组件，再初始化 form 适配，确保 setupVbenForm 能读到完整组件表
+  globalShareState.setComponents(createComponentAdapterMap());
+  defineComponentAdapterMessage();
+}
+
+export { initComponentAdapter };
+export type { ComponentType };
diff --git a/admin-ui/vue/apps/web-antd/src/adapter/component/props.ts b/admin-ui/vue/apps/web-antd/src/adapter/component/props.ts
new file mode 100644
index 0000000..09f6cc6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/adapter/component/props.ts
@@ -0,0 +1,19 @@
+import type { SchemaComponentType } from './types';
+
+import type { HtcComponentPropsMap } from '#/components/HtCustom/FormExpand/register';
+
+type ComponentPropsGetter<Props> = (
+  value: Partial<Record<string, any>>,
+  actions: any,
+) => Props;
+
+type ComponentPropsMap = HtcComponentPropsMap;
+
+type UntypedComponentProps =
+  | ComponentPropsGetter<Record<string, any>>
+  | Record<string, any>;
+
+export type ComponentProps<T extends SchemaComponentType> =
+  T extends keyof ComponentPropsMap
+    ? ComponentPropsGetter<ComponentPropsMap[T]> | ComponentPropsMap[T]
+    : UntypedComponentProps;
diff --git a/admin-ui/vue/apps/web-antd/src/adapter/component/types.ts b/admin-ui/vue/apps/web-antd/src/adapter/component/types.ts
new file mode 100644
index 0000000..fbced8b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/adapter/component/types.ts
@@ -0,0 +1,61 @@
+import type { BaseFormComponentType } from '@vben/common-ui';
+
+import type { HtcRegisterComponentName } from '#/components/HtCustom/FormExpand/register';
+
+/**
+ * 表单 schema 中 component 字段允许使用的组件名称。
+ *
+ * 新增适配组件时，需要同时在这里补充名称，并在 index.ts 中注册真实组件。
+ */
+export type AdapterComponentType =
+  | 'ApiCascader'
+  | 'ApiSelect'
+  | 'ApiTreeSelect'
+  | 'AutoComplete'
+  | 'Cascader'
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'DefaultButton'
+  | 'Divider'
+  | 'FileUpload'
+  | 'HtcFormSwitch'
+  | 'IconPicker'
+  | 'ImageUpload'
+  | 'Input'
+  | 'InputNumber'
+  | 'InputPassword'
+  | 'Mentions'
+  | 'PrimaryButton'
+  | 'Radio'
+  | 'RadioGroup'
+  | 'RangePicker'
+  | 'Rate'
+  | 'RichTextarea'
+  | 'Select'
+  | 'SelectDivision'
+  | 'Space'
+  | 'Switch'
+  | 'Textarea'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload';
+
+export type BaseComponentType =
+  | 'DefaultButton'
+  | 'PrimaryButton'
+  | 'VbenCheckbox'
+  | 'VbenInput'
+  | 'VbenInputPassword'
+  | 'VbenPinInput'
+  | 'VbenSelect';
+
+export type SchemaComponentType =
+  | AdapterComponentType
+  | BaseComponentType
+  | HtcRegisterComponentName;
+
+export type ComponentType =
+  | AdapterComponentType
+  | BaseFormComponentType
+  | HtcRegisterComponentName;
diff --git a/admin-ui/vue/apps/web-antd/src/adapter/form.ts b/admin-ui/vue/apps/web-antd/src/adapter/form.ts
new file mode 100644
index 0000000..a6d01bd
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/adapter/form.ts
@@ -0,0 +1,68 @@
+import type {
+  VbenFormProps as BaseVbenFormProps,
+  VbenFormSchema as FormSchema,
+} from '@vben/common-ui';
+
+import type { ComponentType } from './component';
+import type { ComponentProps } from './component/props';
+import type { SchemaComponentType } from './component/types';
+
+import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      // ant design vue组件库默认都是 v-model:value
+      baseModelPropName: 'value',
+
+      // 一些组件是 v-model:checked 或者 v-model:fileList
+      modelPropNameMap: {
+        Checkbox: 'checked',
+        Radio: 'checked',
+        RichTextarea: 'modelValue',
+        Switch: 'checked',
+        Upload: 'fileList',
+        ImageUpload: 'value',
+      },
+    },
+    defineRules: {
+      // 输入项目必填国际化适配
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        return true;
+      },
+      // 选择项目必填国际化适配
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
+    },
+  });
+}
+
+type TypedFormSchema<T extends SchemaComponentType> = Omit<
+  FormSchema<T>,
+  'component' | 'componentProps'
+> & {
+  component: T;
+  componentProps?: ComponentProps<T>;
+};
+
+export type VbenFormSchema = {
+  [K in SchemaComponentType]: TypedFormSchema<K>;
+}[SchemaComponentType];
+
+export type VbenFormProps = Omit<BaseVbenFormProps<ComponentType>, 'schema'> & {
+  schema?: VbenFormSchema[];
+};
+
+const useVbenForm = (options: VbenFormProps) => {
+  return useForm<ComponentType>(options as BaseVbenFormProps<ComponentType>);
+};
+
+export { initSetupVbenForm, useVbenForm, z };
diff --git a/admin-ui/vue/apps/web-antd/src/adapter/highlightedit.ts b/admin-ui/vue/apps/web-antd/src/adapter/highlightedit.ts
new file mode 100644
index 0000000..5eb7d16
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/adapter/highlightedit.ts
@@ -0,0 +1,124 @@
+/* eslint-disable vue/no-side-effects-in-computed-properties */
+import { computed, defineComponent, h, ref, watch } from 'vue';
+
+import hljs from 'highlight.js/lib/core';
+
+const component = defineComponent({
+  props: {
+    code: {
+      type: String,
+      required: true,
+    },
+    language: {
+      type: String,
+      default: '',
+    },
+    autodetect: {
+      type: Boolean,
+      default: true,
+    },
+    ignoreIllegals: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup(props, { emit }) {
+    const language = ref(props.language);
+    const ignoreIllegals = ref(props.ignoreIllegals);
+    watch(
+      () => props.language,
+      (newLanguage) => {
+        language.value = newLanguage;
+      },
+    );
+    watch(
+      () => props.ignoreIllegals,
+      (newIgnoreIllegals) => {
+        ignoreIllegals.value = newIgnoreIllegals;
+      },
+    );
+
+    const autodetect = computed(() => props.autodetect || !language.value);
+    const cannotDetectLanguage = computed(
+      () => !autodetect.value && !hljs.getLanguage(language.value),
+    );
+
+    const className = computed((): string => {
+      return cannotDetectLanguage.value ? '' : `hljs ${language.value}`;
+    });
+
+    const highlightedCode = computed((): string => {
+      // No idea what language to use, return raw code
+      if (cannotDetectLanguage.value) {
+        console.warn(
+          `The language "${language.value}" you specified could not be found.`,
+        );
+        return props.code;
+      }
+
+      if (autodetect.value) {
+        const result = hljs.highlightAuto(props.code);
+        language.value = result.language ?? '';
+        return result.value;
+      } else {
+        const result = hljs.highlight(props.code, {
+          language: language.value,
+          ignoreIllegals: props.ignoreIllegals,
+        });
+        return result.value;
+      }
+    });
+    // const saveSelection = (e: any) => {
+    //   const selection = window.getSelection();
+    //   if (selection && selection.rangeCount && selection.rangeCount > 0) {
+    //     const range = selection.getRangeAt(0);
+    //     return range;
+    //   }
+    //   return null;
+    // };
+    // const restoreSelection = (range: any, el: any) => {
+    //   if (range) {
+    //     const selection = window.getSelection();
+    //     if (selection) {
+    //       selection.removeAllRanges();
+    //       selection.addRange(range);
+    //       console.log('selection range', range);
+    //     }
+    //   }
+    // };
+    const updateContent = (e: any) => {
+      // const range = saveSelection(e)
+      const result = hljs.highlight(e.target.innerText, {
+        language: language.value,
+        ignoreIllegals: props.ignoreIllegals,
+      });
+      e.target.innerHTML = result.value;
+      emit('update:code', e.target.innerText);
+      // setTimeout(() => {
+      //   restoreSelection(range, e.target)
+      // }, 0)
+    };
+    return {
+      className,
+      highlightedCode,
+      updateContent,
+      emit,
+    };
+  },
+  render() {
+    const updateContent = this.updateContent;
+    return h('pre', {}, [
+      h('code', {
+        class: this.className,
+        innerHTML: this.highlightedCode,
+        contenteditable: true,
+        // onInput(e: any) {},
+        onBlur(e: any) {
+          updateContent(e);
+        },
+      }),
+    ]);
+  },
+});
+
+export default component;
diff --git a/admin-ui/vue/apps/web-antd/src/adapter/vxe-table.ts b/admin-ui/vue/apps/web-antd/src/adapter/vxe-table.ts
new file mode 100644
index 0000000..e0e0d69
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/adapter/vxe-table.ts
@@ -0,0 +1,69 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import { h } from 'vue';
+
+import { useVbenForm } from '@vben/common-ui';
+import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+
+import { Button, Image } from 'ant-design-vue';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    vxeUI.setConfig({
+      grid: {
+        align: 'center',
+        border: false,
+        columnConfig: {
+          resizable: true,
+        },
+        minHeight: 180,
+        formConfig: {
+          // 全局禁用vxe-table的表单配置，使用formOptions
+          enabled: false,
+        },
+        proxyConfig: {
+          autoLoad: true,
+          response: {
+            result: 'items',
+            total: 'total',
+            list: 'items',
+          },
+          showActiveMsg: true,
+          showResponseMsg: false,
+        },
+        round: true,
+        showOverflow: true,
+        size: 'small',
+      } as VxeTableGridOptions,
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellImage' },
+    vxeUI.renderer.add('CellImage', {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
+        const { column, row } = params;
+        return h(Image, { src: row[column.field], ...props });
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellLink' },
+    vxeUI.renderer.add('CellLink', {
+      renderTableDefault(renderOpts) {
+        const { props } = renderOpts;
+        return h(
+          Button,
+          { size: 'small', type: 'link' },
+          { default: () => props?.text },
+        );
+      },
+    });
+
+    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
+    // vxeUI.formats.add
+  },
+  useVbenForm,
+});
+
+export { useVbenVxeGrid };
+
+export type * from '@vben/plugins/vxe-table';
diff --git a/admin-ui/vue/apps/web-antd/src/api/agent/index.ts b/admin-ui/vue/apps/web-antd/src/api/agent/index.ts
new file mode 100644
index 0000000..f17e913
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/agent/index.ts
@@ -0,0 +1,207 @@
+import { requestClient } from '#/api/request';
+
+export interface AgentDept {
+  deptId: number;
+  tenantId?: string;
+  deptType: number;
+  parentId: number;
+  ancestors?: string;
+  deptKey?: string;
+  deptName: string;
+  deptCategory?: string;
+  orderNum?: number;
+  leader?: number;
+  phone?: string;
+  email?: string;
+  status: string;
+  creditCode?: string;
+  areaCode?: string;
+  address?: string;
+  deptRole?: number;
+  userName?: string;
+  defaultUserName?: string;
+  nickName?: string;
+  defaultNickName?: string;
+  defaultUserNickName?: string;
+  defaultUserId?: number;
+  password?: string;
+  createdAt?: string;
+}
+
+export interface AgentRole {
+  roleId: number;
+  tenantId?: string;
+  deptId: number;
+  deptName?: string;
+  roleName: string;
+  roleKey: string;
+  roleSort?: number;
+  dataScope?: string;
+  menuCheckStrictly?: number;
+  deptCheckStrictly?: number;
+  isPass?: number;
+  sourceRoleId?: number;
+  sourceDeptId?: number;
+  status: string;
+  createdAt?: string;
+  remark?: string;
+  isDefaultRole?: boolean;
+}
+
+export interface MenuTreeItem {
+  title: string;
+  key: string;
+  parentId: number;
+  menuId: number;
+  menuName: string;
+  menuType: string;
+  perms?: string;
+  children?: MenuTreeItem[];
+}
+
+export interface AgentRoleView extends AgentRole {
+  isTemplateRole: boolean;
+  isDeptDefaultRole: boolean;
+  menuIds: number[];
+  deptIds: number[];
+  allowedMenuIds: number[];
+  menuTree: MenuTreeItem[];
+}
+
+export interface AgentUser {
+  userId: number;
+  tenantId: string;
+  deptId: number;
+  userName: string;
+  nickName: string;
+  userType: string;
+  email: string;
+  phonenumber: string;
+  sex: string;
+  avatar: string;
+  status: string;
+  loginIp?: string;
+  loginDate?: string;
+  createdDept?: number;
+  createdBy?: number;
+  createdAt?: string;
+  remark?: string;
+  deptInfo?: { deptId: number; deptName: string };
+  roles?: AgentRole[];
+  isDefaultUser?: boolean;
+}
+
+export interface AgentDeptListParams {
+  page?: number;
+  pageSize?: number;
+  deptName?: string;
+  status?: string;
+  deptType?: number;
+}
+
+export function exportAgentDeptApi(params?: Record<string, unknown>) {
+  return requestClient.get<Blob>('/agent/dept/export', {
+    params,
+    responseType: 'blob',
+  });
+}
+
+export function exportAgentUserApi(params?: Record<string, unknown>) {
+  return requestClient.get<Blob>('/agent/user/export', {
+    params,
+    responseType: 'blob',
+  });
+}
+
+export function getAgentDeptListApi(params?: AgentDeptListParams) {
+  return requestClient.get<{
+    items: AgentDept[];
+    page: number;
+    pageSize: number;
+    total: number;
+  }>('/agent/dept/list', { params });
+}
+
+export function getAgentDeptViewApi(params: { deptId: number }) {
+  return requestClient.get<AgentDept>('/agent/dept/view', { params });
+}
+
+export function saveAgentDeptApi(params: Partial<AgentDept>) {
+  return requestClient.post<{ deptId: number }>('/agent/dept/save', {
+    ...params,
+  });
+}
+
+export function deleteAgentDeptApi(params: { deptId: number }) {
+  return requestClient.post('/agent/dept/delete', { ...params });
+}
+
+export function resetAgentDeptPasswordApi(params: {
+  deptId: number;
+  password: string;
+}) {
+  return requestClient.post('/agent/dept/resetPassword', { ...params });
+}
+
+export function getAgentUserListApi(params?: Record<string, any>) {
+  return requestClient.get<{ items: AgentUser[]; total: number }>(
+    '/agent/user/list',
+    { params },
+  );
+}
+
+export function getAgentUserViewApi(params: { userId: number }) {
+  return requestClient.get<AgentUser>('/agent/user/view', { params });
+}
+
+export function addAgentUserApi(params: Record<string, any>) {
+  return requestClient.post('/agent/user/add', { ...params });
+}
+
+export function updateAgentUserApi(params: Record<string, any>) {
+  return requestClient.post('/agent/user/update', { ...params });
+}
+
+export function deleteAgentUserApi(params: {
+  userId?: number;
+  userIds?: number[];
+}) {
+  return requestClient.post('/agent/user/delete', { ...params });
+}
+
+export function resetAgentUserPasswordApi(params: {
+  password: string;
+  userId: number;
+}) {
+  return requestClient.post('/agent/user/resetPassword', { ...params });
+}
+
+export function getAgentRoleListApi(params?: Record<string, any>) {
+  return requestClient.get<{ items: AgentRole[]; total: number }>(
+    '/agent/role/list',
+    { params },
+  );
+}
+
+export function getAgentRoleViewApi(params: { roleId: number }) {
+  return requestClient.get<AgentRoleView>('/agent/role/view', { params });
+}
+
+export function saveAgentRoleApi(params: Record<string, any>) {
+  return requestClient.post<{ roleId: number }>('/agent/role/save', {
+    ...params,
+  });
+}
+
+export function deleteAgentRoleApi(params: {
+  roleId?: number;
+  roleIds?: number[];
+}) {
+  return requestClient.post('/agent/role/delete', { ...params });
+}
+
+export function getAgentMenuTreeApi() {
+  return requestClient.get<{ items: MenuTreeItem[]; menuIds: number[] }>(
+    '/agent/menu/tree',
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/agent/tApiGroup/index.ts b/admin-ui/vue/apps/web-antd/src/api/agent/tApiGroup/index.ts
new file mode 100644
index 0000000..ff208af
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/agent/tApiGroup/index.ts
@@ -0,0 +1,34 @@
+import { requestClient } from '#/api/request';
+
+// 获取开放接口权限组表列表
+export function List(params:any) {
+  return requestClient.get<any>('agent/tApiGroup/list', { params });
+}
+
+// 删除/批量删除开放接口权限组表
+export function Delete(params:any) {
+  return requestClient.post<any>('agent/tApiGroup/delete', { ...params });
+}
+
+// 添加/编辑开放接口权限组表
+export function Edit(params:any) {
+  return requestClient.post<any>('agent/tApiGroup/edit', { ...params });
+}
+
+// 修改开放接口权限组表状态
+export function Status(params:any) {
+  return requestClient.post<any>('agent/tApiGroup/status', { ...params });
+}
+
+// 获取开放接口权限组表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('agent/tApiGroup/view', { params });
+}
+
+// 导出开放接口权限组表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/agent/tApiGroup/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/agent/tApiResource/index.ts b/admin-ui/vue/apps/web-antd/src/api/agent/tApiResource/index.ts
new file mode 100644
index 0000000..06b89a9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/agent/tApiResource/index.ts
@@ -0,0 +1,34 @@
+import { requestClient } from '#/api/request';
+
+// 获取开放接口资源表列表
+export function List(params:any) {
+  return requestClient.get<any>('agent/tApiResource/list', { params });
+}
+
+// 删除/批量删除开放接口资源表
+export function Delete(params:any) {
+  return requestClient.post<any>('agent/tApiResource/delete', { ...params });
+}
+
+// 添加/编辑开放接口资源表
+export function Edit(params:any) {
+  return requestClient.post<any>('agent/tApiResource/edit', { ...params });
+}
+
+// 修改开放接口资源表状态
+export function Status(params:any) {
+  return requestClient.post<any>('agent/tApiResource/status', { ...params });
+}
+
+// 获取开放接口资源表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('agent/tApiResource/view', { params });
+}
+
+// 导出开放接口资源表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/agent/tApiResource/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/downloadCenter/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/downloadCenter/index.ts
new file mode 100644
index 0000000..5d4b936
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/downloadCenter/index.ts
@@ -0,0 +1,98 @@
+import { message } from 'ant-design-vue';
+
+import { requestClient } from '#/api/request';
+
+export interface DownloadCenterListParam {
+  page?: number;
+  pageSize?: number;
+  keyword?: string;
+  bizKey?: string;
+  /** 多个状态用逗号分隔：0排队 2生成中 1已完成 3失败 */
+  status?: string;
+  createdAt?: string[];
+}
+
+export interface DownloadCenterItem {
+  id: number;
+  taskNo: string;
+  bizKey: string;
+  bizName: string;
+  status: number;
+  totalCount: number;
+  fileName: string;
+  fileSize: number;
+  errorMessage?: string;
+  createdAt?: string;
+  finishTime?: string;
+  expireTime?: string;
+  deletedTime?: null | string;
+  deleteReason?: '' | 'expired' | 'user';
+}
+
+export interface DownloadCenterListResult {
+  items: DownloadCenterItem[];
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface DownloadCenterRecentResult {
+  items: DownloadCenterItem[];
+  runningCount: number;
+  finishedCount: number;
+}
+
+/** 下载中心列表 */
+export function List(params: DownloadCenterListParam) {
+  return requestClient.get<DownloadCenterListResult>(
+    '/common/downloadCenter/list',
+    {
+      params,
+    },
+  );
+}
+
+/** 右上角入口：最近任务与进行中数量。
+ * 这是辅助信息，无权限或后端未就绪时静默失败，不能弹全局错误打扰用户。 */
+export function Recent(limit = 5) {
+  return requestClient.get<DownloadCenterRecentResult>(
+    '/common/downloadCenter/recent',
+    { params: { limit }, errorMessageMode: 'none' },
+  );
+}
+
+/** 下载导出文件：业务错误可能以 HTTP 200 JSON Blob 返回，不能当作 xlsx 保存。 */
+export async function Download(taskId: number): Promise<Blob> {
+  const response = await requestClient.download<
+    import('axios').AxiosResponse<Blob>
+  >(`/common/downloadCenter/download?taskId=${taskId}`, {
+    timeout: 120 * 1000,
+    responseReturn: 'raw',
+  });
+  const blob = response.data;
+  const contentType = String(
+    response.headers['content-type'] || blob?.type || '',
+  ).toLowerCase();
+  if (contentType.includes('json')) {
+    let errorMessage = '下载失败，请稍后重试';
+    try {
+      const payload = JSON.parse(await blob.text());
+      errorMessage = payload?.message || errorMessage;
+    } catch {
+      // Malformed JSON must not be saved as a spreadsheet either.
+    }
+    message.error(errorMessage);
+    throw new Error(errorMessage);
+  }
+  if (!(blob instanceof Blob) || blob.size === 0) {
+    const errorMessage = '下载文件为空，请稍后重试';
+    message.error(errorMessage);
+    throw new Error(errorMessage);
+  }
+  return blob;
+}
+
+/** 删除导出任务 */
+export function Remove(taskId: number) {
+  return requestClient.post('/common/downloadCenter/remove', { taskId });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tAgentBalance/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tAgentBalance/index.ts
new file mode 100644
index 0000000..76c1ee7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tAgentBalance/index.ts
@@ -0,0 +1,70 @@
+import { requestClient } from '#/api/request';
+
+// 获取企业客户财务信息列表
+export function List(params:any) {
+  return requestClient.get<any>('common/tAgentBalance/list', { params });
+}
+
+// 获取账户余额概览
+export function GetAccountBalance(params?: any) {
+  return requestClient.get<any>('common/tAgentBalance/getAccountBalance', { params });
+}
+
+// 获取费用总览折线图
+export function FeeTrend(params: any) {
+  return requestClient.get<any>('common/tAgentBalance/feeTrend', { params });
+}
+
+// 获取账户总览折线图
+export function AccountTrend(params: any) {
+  return requestClient.get<any>('common/tAgentBalance/accountTrend', { params });
+}
+
+// 删除/批量删除企业客户财务信息
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tAgentBalance/delete', { ...params });
+}
+
+// 添加/编辑企业客户财务信息
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tAgentBalance/edit', { ...params });
+}
+
+// 修改企业客户财务信息状态
+export function Status(params:any) {
+  return requestClient.post<any>('common/tAgentBalance/status', { ...params });
+}
+
+// 获取企业客户财务信息指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tAgentBalance/view', { params });
+}
+
+// 导出企业客户财务信息
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tAgentBalance/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
+
+export function AlipayPay(params: any) {
+  return requestClient.post<any>('pay/alipay/pay', params);
+}
+
+export function AlipayQuery(params: any) {
+  return requestClient.get<any>('pay/alipay/query', { params });
+}
+
+// 转可提现申请
+export function BalanceTransferApply(params: {
+  amount: number;
+  accountType: number;
+  bankName?: string;
+  bankAccount?: string;
+  accountName?: string;
+  identityCard?: string;
+  remark?: string;
+}) {
+  return requestClient.post<any>('common/tAgentBalance/balanceTransferApply', params);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tBalanceDetail/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tBalanceDetail/index.ts
new file mode 100644
index 0000000..202af86
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tBalanceDetail/index.ts
@@ -0,0 +1,33 @@
+import { requestClient } from '#/api/request';
+
+// 获取余额明细表列表
+export function List(params:any) {
+  return requestClient.get<any>('common/tBalanceDetail/list', { params });
+}
+
+// 删除/批量删除余额明细表
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tBalanceDetail/delete', { ...params });
+}
+
+// 添加/编辑余额明细表
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tBalanceDetail/edit', { ...params });
+}
+
+// 获取余额明细表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tBalanceDetail/view', { params });
+}
+
+// 导出余额明细表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tBalanceDetail/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
+
+export function Recharge(params:any) {
+  return requestClient.post<any>('common/tBalanceDetail/recharge', { ...params });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tConsumeAccountMonthBill/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tConsumeAccountMonthBill/index.ts
new file mode 100644
index 0000000..8a457d9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tConsumeAccountMonthBill/index.ts
@@ -0,0 +1,34 @@
+import { requestClient } from '#/api/request';
+
+// 获取消费账户月账单表列表
+export function List(params:any) {
+  return requestClient.get<any>('common/tConsumeAccountMonthBill/list', { params });
+}
+
+// 获取消费账户月账单汇总
+export function GetConsumptionBillSummary(params:any) {
+  return requestClient.get<any>('common/tConsumeAccountMonthBill/getConsumptionBillSummary', { params });
+}
+
+// 删除/批量删除消费账户月账单表
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tConsumeAccountMonthBill/delete', { ...params });
+}
+
+// 添加/编辑消费账户月账单表
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tConsumeAccountMonthBill/edit', { ...params });
+}
+
+// 获取消费账户月账单表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tConsumeAccountMonthBill/view', { params });
+}
+
+// 导出消费账户月账单表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tConsumeAccountMonthBill/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tCreditDetail/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tCreditDetail/index.ts
new file mode 100644
index 0000000..a5fa756
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tCreditDetail/index.ts
@@ -0,0 +1,29 @@
+import { requestClient } from '#/api/request';
+
+// 获取信用额度明细表列表
+export function List(params:any) {
+  return requestClient.get<any>('common/tCreditDetail/list', { params });
+}
+
+// 删除/批量删除信用额度明细表
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tCreditDetail/delete', { ...params });
+}
+
+// 添加/编辑信用额度明细表
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tCreditDetail/edit', { ...params });
+}
+
+// 获取信用额度明细表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tCreditDetail/view', { params }); 
+}
+
+// 导出信用额度明细表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tCreditDetail/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tFinCommissionDetail/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tFinCommissionDetail/index.ts
new file mode 100644
index 0000000..295540b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tFinCommissionDetail/index.ts
@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+// 获取分润明细表列表
+export function List(params: any) {
+  return requestClient.get<any>('common/tFinCommissionDetail/list', { params });
+}
+
+// 删除/批量删除分润明细表
+export function Delete(params: any) {
+  return requestClient.post<any>('common/tFinCommissionDetail/delete', { ...params });
+}
+
+// 添加/编辑分润明细表
+export function Edit(params: any) {
+  return requestClient.post<any>('common/tFinCommissionDetail/edit', { ...params });
+}
+
+// 获取分润明细表指定详情
+export function View(params: any) {
+  return requestClient.get<any>('common/tFinCommissionDetail/view', { params });
+}
+
+// 获取分层分润概览
+export function GetCommissionOverview(params: any) {
+  return requestClient.get<any>(
+    'common/tFinCommissionDetail/getCommissionOverview',
+    { params },
+  );
+}
+
+// 获取层级汇总表
+export function GetLevelSummary(params: any) {
+  return requestClient.get<any>(
+    'common/tFinCommissionDetail/getLevelSummary',
+    { params },
+  );
+}
+
+// 导出分润明细表
+export function Export(params: any) {
+  return requestClient.post<Blob>(
+    '/common/tFinCommissionDetail/export',
+    { ...params },
+    {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tFinWithdrawableChange/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tFinWithdrawableChange/index.ts
new file mode 100644
index 0000000..75f4be1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tFinWithdrawableChange/index.ts
@@ -0,0 +1,29 @@
+import { requestClient } from '#/api/request';
+
+// 获取可提现变动明细表列表
+export function List(params:any) {
+  return requestClient.get<any>('common/tFinWithdrawableChange/list', { params });
+}
+
+// 删除/批量删除可提现变动明细表
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tFinWithdrawableChange/delete', { ...params });
+}
+
+// 添加/编辑可提现变动明细表
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tFinWithdrawableChange/edit', { ...params });
+}
+
+// 获取可提现变动明细表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tFinWithdrawableChange/view', { params });
+}
+
+// 导出可提现变动明细表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tFinWithdrawableChange/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tFinanceApply/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tFinanceApply/index.ts
new file mode 100644
index 0000000..030f58f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tFinanceApply/index.ts
@@ -0,0 +1,38 @@
+import { requestClient } from '#/api/request';
+
+// 获取财务申请表列表
+export function List(params:any) {
+  return requestClient.get<any>('common/tFinanceApply/list', { params });
+}
+
+// 删除/批量删除财务申请表
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tFinanceApply/delete', { ...params });
+}
+
+// 添加/编辑财务申请表
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tFinanceApply/edit', { ...params });
+}
+
+// 获取财务申请表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tFinanceApply/view', { params });
+}
+
+// 导出财务申请表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tFinanceApply/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
+
+// 审核余额转可提现申请
+export function BalanceTransferAudit(params: {
+  applyNo: string;
+  auditResult: number;
+  auditOpinion?: string;
+}) {
+  return requestClient.post<any>('common/tAgentBalance/balanceTransferAudit', params);
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tFinanceAuditRecord/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tFinanceAuditRecord/index.ts
new file mode 100644
index 0000000..8fe376b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tFinanceAuditRecord/index.ts
@@ -0,0 +1,29 @@
+import { requestClient } from '#/api/request';
+
+// 获取财务审核记录表列表
+export function List(params:any) {
+  return requestClient.get<any>('common/tFinanceAuditRecord/list', { params });
+}
+
+// 删除/批量删除财务审核记录表
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tFinanceAuditRecord/delete', { ...params });
+}
+
+// 添加/编辑财务审核记录表
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tFinanceAuditRecord/edit', { ...params });
+}
+
+// 获取财务审核记录表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tFinanceAuditRecord/view', { params });
+}
+
+// 导出财务审核记录表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tFinanceAuditRecord/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tMessageLog/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tMessageLog/index.ts
new file mode 100644
index 0000000..467075f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tMessageLog/index.ts
@@ -0,0 +1,63 @@
+import { requestClient } from '#/api/request';
+
+// 获取消息日志列表
+export function List(params:any) {
+  return requestClient.get<any>('common/tMessageLog/list', { params });
+}
+
+// 删除/批量删除消息日志
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tMessageLog/delete', { ...params });
+}
+
+// 添加/编辑消息日志
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tMessageLog/edit', { ...params });
+}
+
+// 获取消息日志指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tMessageLog/view', { params });
+}
+
+// 导出消息日志
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tMessageLog/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
+
+// 未读消息通知（右上角消息提醒）
+export interface TMessageLogUnreadItem {
+  messageLogId: number;
+  messageType: number;
+  sendUserType: number;
+  messageTitle: string;
+  messageContent: string;
+  messageLink: string;
+  sendTime: string;
+  isRead: number;
+}
+
+export interface TMessageLogUnreadResult {
+  items: TMessageLogUnreadItem[];
+  total: number;
+}
+
+// 获取当前登录用户未读消息通知（右上角消息提醒）
+export function UnreadList(params?: { limit?: number }) {
+  return requestClient.get<TMessageLogUnreadResult>('common/tMessageLog/unreadList', {
+    params,
+  });
+}
+
+// 标记当前登录用户指定消息已读
+export function Read(params: { messageLogId: number | string }) {
+  return requestClient.post<unknown>('common/tMessageLog/read', { ...params });
+}
+
+// 标记当前登录用户全部消息已读
+export function ReadAll() {
+  return requestClient.post<unknown>('common/tMessageLog/readAll', {});
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tNotifyLog/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tNotifyLog/index.ts
new file mode 100644
index 0000000..857001e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tNotifyLog/index.ts
@@ -0,0 +1,29 @@
+import { requestClient } from '#/api/request';
+
+// 获取通知日志列表
+export function List(params:any) {
+  return requestClient.get<any>('common/tNotifyLog/list', { params });
+}
+
+// 删除/批量删除通知日志
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tNotifyLog/delete', { ...params });
+}
+
+// 添加/编辑通知日志
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tNotifyLog/edit', { ...params });
+}
+
+// 获取通知日志指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tNotifyLog/view', { params });
+}
+
+// 导出通知日志
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tNotifyLog/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tProfitAccountMonthBill/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tProfitAccountMonthBill/index.ts
new file mode 100644
index 0000000..2bbcd5e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tProfitAccountMonthBill/index.ts
@@ -0,0 +1,63 @@
+import { requestClient } from '#/api/request';
+
+// 获取盈利账户月账单表列表
+export function List(params: any) {
+  return requestClient.get<any>('common/tProfitAccountMonthBill/list', { params });
+}
+
+// 获取盈利账户月账单汇总
+export function GetProfitBillSummary(params: any) {
+  return requestClient.get<any>(
+    'common/tProfitAccountMonthBill/getProfitBillSummary',
+    { params },
+  );
+}
+
+// 获取核心财务指标
+export function GetCoreFinancialData(params: any) {
+  return requestClient.get<any>(
+    'common/tProfitAccountMonthBill/getCoreFinancialData',
+    { params },
+  );
+}
+
+// 获取财务趋势
+export function GetFinancialTrend(params: any) {
+  return requestClient.get<any>(
+    'common/tProfitAccountMonthBill/getFinancialTrend',
+    { params },
+  );
+}
+
+// 删除/批量删除盈利账户月账单表
+export function Delete(params: any) {
+  return requestClient.post<any>('common/tProfitAccountMonthBill/delete', {
+    ...params,
+  });
+}
+
+// 添加/编辑盈利账户月账单表
+export function Edit(params: any) {
+  return requestClient.post<any>('common/tProfitAccountMonthBill/edit', {
+    ...params,
+  });
+}
+
+// 获取盈利账户月账单表指定详情
+export function View(params: any) {
+  return requestClient.get<any>('common/tProfitAccountMonthBill/view', {
+    params,
+  });
+}
+
+// 导出盈利账户月账单表
+export function Export(params: any) {
+  return requestClient.post<Blob>(
+    '/common/tProfitAccountMonthBill/export',
+    { ...params },
+    {
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tWoCommunication/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tWoCommunication/index.ts
new file mode 100644
index 0000000..3601433
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tWoCommunication/index.ts
@@ -0,0 +1,34 @@
+import { requestClient } from '#/api/request';
+
+// 获取工单问题沟通表列表
+export function List(params:any) {
+  return requestClient.get<any>('/common/tWoCommunication/list', { params });
+}
+
+// 删除/批量删除工单问题沟通表
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tWoCommunication/delete', { ...params });
+}
+
+// 添加/编辑工单问题沟通表
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tWoCommunication/edit', { ...params });
+}
+
+// 获取工单问题沟通表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tWoCommunication/view', { params });
+}
+
+// 发送工单沟通消息
+export function Message(params:any) {
+  return requestClient.post<any>('common/tWoCommunication/message', { ...params });
+}
+
+// 导出工单问题沟通表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tWoCommunication/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tWoMain/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tWoMain/index.ts
new file mode 100644
index 0000000..2738dec
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tWoMain/index.ts
@@ -0,0 +1,54 @@
+import { requestClient } from '#/api/request';
+
+// 获取工单主表列表
+export function List(params:any) {
+  return requestClient.get<any>('common/tWoMain/list', { params });
+}
+
+// 删除/批量删除工单主表
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tWoMain/delete', { ...params });
+}
+
+// 添加/编辑工单主表
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tWoMain/edit', { ...params });
+}
+
+// 获取工单主表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tWoMain/view', { params });
+}
+
+// 工单转单
+export function Transfer(params:any) {
+  return requestClient.post<any>('common/tWoMain/transfer', { ...params });
+}
+
+// 工单完成
+export function Resolve(params:any) {
+  return requestClient.post<any>('common/tWoMain/resolve', { ...params });
+}
+
+// 工单取消/关闭
+export function Cancel(params:any) {
+  return requestClient.post<any>('common/tWoMain/cancel', { ...params });
+}
+
+// 关闭工单
+export function Close(params:any) {
+  return requestClient.post<any>('common/tWoMain/close', { ...params });
+}
+
+// 工单评价
+export function Evaluate(params:any) {
+  return requestClient.post<any>('common/tWoMain/evaluate', { ...params });
+}
+
+// 导出工单主表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tWoMain/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/common/tWoRecord/index.ts b/admin-ui/vue/apps/web-antd/src/api/common/tWoRecord/index.ts
new file mode 100644
index 0000000..ed7cfa8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/common/tWoRecord/index.ts
@@ -0,0 +1,29 @@
+import { requestClient } from '#/api/request';
+
+// 获取工单记录表列表
+export function List(params:any) {
+  return requestClient.get<any>('common/tWoRecord/list', { params });
+}
+
+// 删除/批量删除工单记录表
+export function Delete(params:any) {
+  return requestClient.post<any>('common/tWoRecord/delete', { ...params });
+}
+
+// 添加/编辑工单记录表
+export function Edit(params:any) {
+  return requestClient.post<any>('common/tWoRecord/edit', { ...params });
+}
+
+// 获取工单记录表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('common/tWoRecord/view', { params }); 
+}
+
+// 导出工单记录表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/common/tWoRecord/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/core/auth.ts b/admin-ui/vue/apps/web-antd/src/api/core/auth.ts
new file mode 100644
index 0000000..b15abf2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/core/auth.ts
@@ -0,0 +1,185 @@
+/**
+ * @description 认证相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { baseRequestClient, requestClient } from '#/api/request';
+
+/**
+ * 登录类型
+ * password 密码
+ * sms 短信
+ * social 第三方oauth
+ * email 邮箱
+ * xcx 小程序
+ */
+type GrantType = 'email' | 'password' | 'sms' | 'social' | 'xcx';
+
+export namespace AuthApi {
+  /** 登录接口参数 */
+  export interface LoginParams {
+    password?: string;
+    username?: string;
+  }
+
+  /** 登录接口返回值 */
+  export interface LoginResult {
+    accessToken: string;
+  }
+  /** 注册接口参数 */
+  export interface RegisterParams {
+    tenantId?: string;
+    username?: string;
+    password?: string;
+    captchaID?: string;
+    captchaValue?: string;
+  }
+  export type RegisterResult = Record<string, never>;
+
+  export interface RefreshTokenResult {
+    data: string;
+    status: number;
+  }
+
+  export interface BaseLoginParams {
+    clientId?: string;
+    grantType: GrantType;
+    tenantId: string;
+  }
+
+  export interface OAuthLoginParams extends BaseLoginParams {
+    socialCode: string;
+    socialState: string;
+    source: string;
+  }
+}
+
+/**
+ * @param companyName 租户/公司名称
+ * @param domain 绑定域名(不带http(s)://) 可选
+ * @param tenantId 租户id
+ */
+export interface TenantOption {
+  companyName: string;
+  domain?: string;
+  tenantId: string;
+}
+
+/**
+ * @param tenantEnabled 是否启用租户
+ * @param voList 租户列表
+ */
+export interface TenantResp {
+  tenantEnabled: boolean;
+  voList: TenantOption[];
+}
+
+/**
+ * 获取用户权限码
+ */
+export interface GetAccessCodesResult {
+  data: string[];
+}
+
+/**
+ * 登录
+ */
+export async function loginApi(data: AuthApi.LoginParams) {
+  return requestClient.post<AuthApi.LoginResult>('/system/auth/login', data);
+}
+
+/**
+ * 发送手机验证码登录短信
+ */
+export async function sendSmsLoginCodeApi(phone: string) {
+  return requestClient.post('/system/auth/sms-code', { phone });
+}
+
+/**
+ * 手机验证码登录
+ */
+export async function smsLoginApi(data: { code: string; phone: string }) {
+  return requestClient.post<AuthApi.LoginResult>(
+    '/system/auth/sms-login',
+    data,
+  );
+}
+/**
+ * 注册register
+ */
+
+export async function registerApi(data: AuthApi.RegisterParams) {
+  return requestClient.post<AuthApi.RegisterResult>(
+    '/system/user/register',
+    data,
+  );
+}
+
+/**
+ * 刷新accessToken
+ */
+export async function refreshTokenApi() {
+  return baseRequestClient.post<AuthApi.RefreshTokenResult>(
+    '/system/auth/refresh',
+    undefined,
+    {
+      withCredentials: true,
+    },
+  );
+}
+
+/**
+ * 退出登录
+ */
+export async function logoutApi() {
+  return requestClient.post('/system/auth/logout', undefined, {
+    withCredentials: true,
+  });
+}
+
+/**
+ * 获取用户权限码
+ */
+export async function getAccessCodesApi() {
+  return requestClient.get<GetAccessCodesResult>('/system/auth/codes');
+}
+
+/**
+ * 绑定第三方账号
+ * @param source 绑定的来源
+ * @returns 跳转url
+ */
+export function authBinding(source: string, tenantId: string) {
+  return requestClient.get<string>(`/auth/binding/${source}`, {
+    params: {
+      domain: window.location.host,
+      tenantId,
+    },
+  });
+}
+
+/**
+ * 取消绑定
+ * @param id id
+ */
+export function authUnbinding(id: string) {
+  return requestClient.delete<unknown>(`/auth/unlock/${id}`);
+}
+
+/**
+ * oauth授权回调
+ * @param data oauth授权
+ * @returns void
+ */
+export function authCallback(data: AuthApi.OAuthLoginParams) {
+  return requestClient.post<unknown>('/auth/social/callback', data);
+}
+
+// 获取租户列表
+export function tenantList() {
+  return requestClient.get<TenantResp>('/system/auth/getTenantList');
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/core/captcha.ts b/admin-ui/vue/apps/web-antd/src/api/core/captcha.ts
new file mode 100644
index 0000000..bead42e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/core/captcha.ts
@@ -0,0 +1,21 @@
+/**
+ * @description 验证码相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import {  requestClient } from '#/api/request';
+
+export namespace CaptchaApi {
+  export interface GetCaptchaResult {
+    captchaID: string;
+    captchaImage: string;
+  }
+}
+
+export async function getCaptchaApi() {
+  return requestClient.get<CaptchaApi.GetCaptchaResult>('/system/captcha');
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/core/index.ts b/admin-ui/vue/apps/web-antd/src/api/core/index.ts
new file mode 100644
index 0000000..fdb5dfe
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/core/index.ts
@@ -0,0 +1,14 @@
+/**
+ * @description 核心模块接口导出
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+export * from './auth';
+export * from './menu';
+export * from './user';
+export * from './captcha';
+export * from './upload';
diff --git a/admin-ui/vue/apps/web-antd/src/api/core/menu.ts b/admin-ui/vue/apps/web-antd/src/api/core/menu.ts
new file mode 100644
index 0000000..ac62587
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/core/menu.ts
@@ -0,0 +1,20 @@
+/**
+ * @description 菜单相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import type { RouteRecordStringComponent } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 获取用户所有菜单
+ */
+export async function getAllMenusApi() {
+  return requestClient.get<RouteRecordStringComponent[]>('/system/menu/all');
+}
+
diff --git a/admin-ui/vue/apps/web-antd/src/api/core/upload.ts b/admin-ui/vue/apps/web-antd/src/api/core/upload.ts
new file mode 100644
index 0000000..0684294
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/core/upload.ts
@@ -0,0 +1,57 @@
+/**
+ * @description 文件上传相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import type { AxiosRequestConfig } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * Axios上传进度事件
+ */
+export type AxiosProgressEvent = AxiosRequestConfig['onUploadProgress'];
+
+/**
+ * 通过单文件上传接口
+ * @param file 上传的文件
+ * @param onUploadProgress 上传进度事件 非必传
+ * @param isDevice 不知道这是什么,但是不敢动
+ * @param newFileType 新文件类型 1:用户文件 2:用户图片 3:设备文件 4:iot配置图片 5:iot固件文件 6:项目图片 7:项目文件
+ * @param subDirName 文件父目录
+ * @param params 额外上传参数
+ * @returns 上传结果
+ */
+export function uploadApi(
+  file: Blob | File,
+  onUploadProgress?: AxiosProgressEvent,
+  isDevice?: boolean | undefined,
+  newFileType?: number,
+  subDirName?: string,
+  params?: Record<string, any>,
+) {
+  return requestClient.upload(
+    '/common/oss/upload',
+    {
+      ...params,
+      file,
+      fileType: 'file',
+      ...(isDevice ? { isDevice } : {}),
+      ...(newFileType ? { newFileType } : {}),
+      ...(subDirName ? { subDirName } : {}),
+    },
+    { onUploadProgress, timeout: 60_000 },
+  );
+}
+/**
+ * 默认上传结果
+ */
+export interface UploadResult {
+  url: string;
+  fileName: string;
+  ossId: string;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/core/user.ts b/admin-ui/vue/apps/web-antd/src/api/core/user.ts
new file mode 100644
index 0000000..6b98722
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/core/user.ts
@@ -0,0 +1,20 @@
+/**
+ * @description 用户信息相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import type { UserInfo } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 获取用户信息
+ */
+export async function getUserInfoApi() {
+  return requestClient.get<UserInfo>('/system/user/info');
+}
+
diff --git a/admin-ui/vue/apps/web-antd/src/api/gen/testCategory/index.ts b/admin-ui/vue/apps/web-antd/src/api/gen/testCategory/index.ts
new file mode 100644
index 0000000..4d2c380
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/gen/testCategory/index.ts
@@ -0,0 +1,39 @@
+import { requestClient } from '#/api/request';
+
+// 获取测试分类列表
+export function List(params:any) {
+  return requestClient.get<any>('gen/testCategory/list', { params });
+}
+
+// 删除/批量删除测试分类
+export function Delete(params:any) {
+  return requestClient.post<any>('gen/testCategory/delete', { ...params });
+}
+
+// 添加/编辑测试分类
+export function Edit(params:any) {
+  return requestClient.post<any>('gen/testCategory/edit', { ...params });
+}
+
+// 修改测试分类状态
+export function Status(params:any) {
+  return requestClient.post<any>('gen/testCategory/status', { ...params });
+}
+
+// 获取测试分类指定详情
+export function View(params:any) {
+  return requestClient.get<any>('gen/testCategory/view', { params });
+}
+
+// 获取测试分类最大排序
+export function MaxSort(params:any) {
+  return requestClient.get<any>('gen/testCategory/maxSort', { params });
+}
+
+// 导出测试分类
+export function Export(params:any) {
+  return requestClient.post<Blob>('/gen/testCategory/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/gen/testDemo/index.ts b/admin-ui/vue/apps/web-antd/src/api/gen/testDemo/index.ts
new file mode 100644
index 0000000..ac15492
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/gen/testDemo/index.ts
@@ -0,0 +1,38 @@
+/**
+ * @description 测试单表相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+// 获取测试单表列表
+export function List(params:any) {
+  return requestClient.get<any>('gen/testDemo/list', { params });
+}
+
+// 删除/批量删除测试单表
+export function Delete(params:any) {
+  return requestClient.post<any>('gen/testDemo/delete', { ...params });
+}
+
+// 添加/编辑测试单表
+export function Edit(params:any) {
+  return requestClient.post<any>('gen/testDemo/edit', { ...params });
+}
+
+// 获取测试单表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('gen/testDemo/view', { params });
+}
+
+// 导出测试单表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/gen/testDemo/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/gen_codes/gen_table.ts b/admin-ui/vue/apps/web-antd/src/api/gen_codes/gen_table.ts
new file mode 100644
index 0000000..c898490
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/gen_codes/gen_table.ts
@@ -0,0 +1,325 @@
+/**
+ * @description 代码生成器表格相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+import type { DictOption } from '#/store/dict';
+
+export interface SysGenTableListReq {
+    page: number;
+    pageSize: number;
+    genType: number;
+    varName: string;
+    status: string;
+}
+export interface SysGenTableListModel {
+    tableId: number;  // 生成ID
+    genType: number;  // 生成类型
+    genTemplate: number;  // 生成模板
+    varName: string;  // 实体命名
+    options: string;  // 配置选项
+    dbName: string;  // 数据库名称
+    tableName: string;  // 主表名称
+    tableComment: string;  // 主表注释
+    daoName: string;  // 主表dao模型
+    masterColumns: string;  // 主表字段
+    addonName: string;  // 插件名称
+    status: string;  // 生成状态（0成功
+    createdDept: number;  // 创建组织
+    createdBy: number;  // 创建者
+    createdAt: string;  // 创建时间
+}
+export interface SysGenTableListRes {
+    items: SysGenTableListModel[];
+    total: number;
+}
+
+export async function getSysGenTableListApi(params: SysGenTableListReq) {
+    return requestClient.get<SysGenTableListRes>('/genCodes/genTable/list', { params });
+}
+
+
+export interface SysGenTableAddReq {
+    genType: number;
+    genTemplate: number;
+    varName: string;
+    options: string;
+    dbName: string;
+    tableName: string;
+    tableComment: string;
+    daoName: string;
+    masterColumns: string;
+    addonName: string;
+}
+export interface SysGenTableAddRes {
+    tableId: number;
+}
+export interface SysGenTableEditReq {
+    tableId: number;
+    genType?: number;
+    genTemplate?: number;
+    varName?: string;
+    options?: any;
+    dbName?: string;
+    tableName?: string;
+    tableComment?: string;
+    daoName?: string;
+    masterColumns?: any;
+    addonName?: string;
+}
+
+export interface SysGenTableEditRes {
+    tableId: number;
+}
+
+export interface SysGenTableDeleteReq {
+    tableIds: number[];
+}
+export interface SysGenTableDeleteRes {
+    tableIds: number[];
+}
+export interface SysGenTableJoinModel {
+    uuid: string;
+    dbName: string;
+    masterTableName: string;
+    linkTable: string;
+    alias: string;
+    linkMode: number;
+    field: string;
+    masterField: string;
+    daoName: string;
+    columns: GenCodesColumn[];
+}
+
+export interface SysGenTableTreeModel {
+    titleColumn: string;
+    styleType: number;
+}
+export interface SysGenTableMenuModel {
+    icon: string;
+    pid: number;
+    sort: number;
+}
+export interface SysGenTableFuncDictModel {
+    valueColumn: string|null    ;
+    labelColumn: string|null;
+}
+export interface SysGenTablePresetStepModel {
+    formGridCols: number;
+}
+export interface SysGenTableOptionsModel {
+    headOps?: string[];
+    columnOps?: string[];
+    autoOps?: string[];
+    join?:any[];
+    menu?:SysGenTableMenuModel;
+    funcDict?: SysGenTableFuncDictModel;
+    presetStep?:SysGenTablePresetStepModel;
+    tree?:SysGenTableTreeModel;
+}
+
+export interface SysGenTableViewReq {
+    tableId: number;
+}
+
+
+export interface SysGenTableViewRes {
+    tableId: number;
+    genType: number;
+    genTemplate: number;
+    varName: string;
+    options: SysGenTableOptionsModel|string;
+    dbName: string;
+    tableName: string;
+    tableComment: string;
+    daoName: string;
+    masterColumns: GenCodesColumn[]|string;
+    addonName: string;
+    status: string;
+    createdDept: number;
+    createdBy: number;
+    createdAt: string;
+}
+
+export async function addSysGenTableApi(params: SysGenTableAddReq | {
+    [x: string]: any;
+}) {
+    return requestClient.post<SysGenTableAddRes>('/genCodes/genTable/add', { ...params });
+}
+
+
+export async function deleteSysGenTableApi(params: SysGenTableDeleteReq) {
+    return requestClient.post<SysGenTableDeleteRes>('/genCodes/genTable/delete', { ...params });
+}
+
+export async function editSysGenTableApi(params: SysGenTableEditReq) {
+    return requestClient.post<SysGenTableEditRes>('/genCodes/genTable/edit', { ...params });
+}
+
+export async function getSysGenTableViewApi(params: SysGenTableViewReq) {
+    return requestClient.get<SysGenTableViewRes>('/genCodes/genTable/view', { params });
+}
+
+
+export interface SelectItemModel {
+    value: string|number;
+    label: string;
+    name: string;
+    disabled?: boolean;
+}
+
+export interface SelectGenTypeModel extends SelectItemModel,DictOption {
+    templates: SelectGenTemplateModel[];
+}
+
+export interface SelectGenTemplateModel extends SelectItemModel {
+    isAddon: boolean;
+}
+
+export interface GenCodesSelect {
+    genType: SelectGenTypeModel[];
+    db: SelectItemModel[];
+    status: SelectItemModel[];
+    linkMode: SelectItemModel[];
+    buildMethod: SelectItemModel[];
+    formMode: SelectItemModel[];
+    formRole: SelectItemModel[];
+    whereMode: SelectItemModel[];
+    addons: SelectItemModel[];
+    tableAlign: SelectItemModel[];
+    treeStyleType: SelectItemModel[];
+    dictMode: SelectItemModel[];
+}
+
+
+export interface GenCodesSelectsReq {
+}
+
+export interface GenCodesSelectsRes extends GenCodesSelect {
+
+}
+
+export async function getGenCodesSelectsApi(params: GenCodesSelectsReq) {
+    return requestClient.get<GenCodesSelectsRes>('/genCodes/genTable/selects', { params });
+}
+
+export interface DbTableSelectModel {
+    value: string;
+    label: string;
+    name: string;
+    daoName: string;
+    defVarName: string;
+    defAlias: string;
+    defTableComment: string;
+}
+export interface GenCodesTableSelectReq {
+    dbGroup: string;
+}
+
+export interface GenCodesTableSelectRes {
+    items: DbTableSelectModel[];
+}
+
+export async function getGenCodesTableSelectApi(params: GenCodesTableSelectReq) {
+    return requestClient.get<GenCodesTableSelectRes>('/genCodes/genTable/tableSelect', { params });
+}
+
+export interface DbColumnSelectModel {
+    value: string;
+    label: string;
+    name: string;
+}
+
+export interface GenCodesColumnSelectReq {
+    dbGroup: string;
+    tableName: string;
+}
+export interface GenCodesColumnSelectRes {
+    items: DbColumnSelectModel[];
+}
+
+export async function getGenCodesColumnSelectApi(params: GenCodesColumnSelectReq) {
+    return requestClient.get<GenCodesColumnSelectRes>('/genCodes/genTable/columnSelect', { params });
+}
+
+export interface GenCodesColumn {
+    id: number;
+    name: string;
+    dc: string;
+    dataType: string;
+    sqlType: string;
+    length: number;
+    isAllowNull: boolean;
+    defaultValue: any;
+    index: string;
+    extra: string;
+    goName: string;
+    goType: string;
+    tsName: string;
+    tsType: string;
+    isList: boolean;
+    isExport: boolean;
+    isSort: boolean;
+    isQuery: boolean;
+    queryWhere: string;
+    isEdit: boolean;
+    required: boolean;
+    unique: boolean;
+    formMode: string;
+    formRole: string;
+    formGridSpan: number;
+    dictType: number;
+    align: string;
+    width: number;  
+}
+export interface GenCodesColumnListModel extends GenCodesColumn {
+
+}
+
+export interface GenCodesColumnListParam {
+    dbGroup: string;
+    tableName: string;
+    isLink: number;
+    alias: string;
+}
+export interface GenCodesColumnListRes {
+    items: GenCodesColumnListModel[];
+}
+
+export async function getGenCodesColumnListApi(params: GenCodesColumnListParam) {
+    return requestClient.get<GenCodesColumnListRes>('/genCodes/genTable/columnList', { params });
+}
+
+export interface GenCodesPreviewReq extends SysGenTableListModel {
+
+}
+export interface GenFile {
+    content: string;
+    path: string;
+    meth: number;
+    required: boolean;
+}
+export interface GenCodesPreviewRes {
+    views: Record<string, GenFile>;
+    config?: any;
+}
+
+export async function postGenCodesPreviewApi(params: GenCodesPreviewReq) {
+    return requestClient.post<GenCodesPreviewRes>('/genCodes/genTable/preview', { ...params });
+}
+
+export interface GenCodesBuildReq extends GenCodesPreviewReq {
+
+}
+export interface GenCodesBuildRes {
+
+}
+
+export async function postGenCodesBuildApi(params: GenCodesBuildReq) {
+    return requestClient.post<GenCodesBuildRes>('/genCodes/genTable/build', { ...params });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/index.ts b/admin-ui/vue/apps/web-antd/src/api/index.ts
new file mode 100644
index 0000000..e826da0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/index.ts
@@ -0,0 +1,11 @@
+/**
+ * @description API接口统一导出
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+export * from './core';
+export * from './system';
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tApi/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tApi/index.ts
new file mode 100644
index 0000000..96f976c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tApi/index.ts
@@ -0,0 +1,47 @@
+import type {
+  TApiDeleteParam,
+  TApiEditParam,
+  TApiExportParam,
+  TApiListParam,
+  TApiListRes,
+  TApiViewParam,
+  TApiViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取API集成列表
+export function List(params: TApiListParam) {
+  return requestClient.get<TApiListRes>('agent/tApi/list', { params });
+}
+
+// 删除/批量删除API集成
+export function Delete(params: TApiDeleteParam) {
+  return requestClient.post('agent/tApi/delete', { ...params });
+}
+
+// 添加/编辑API集成
+export function Edit(params: TApiEditParam) {
+  return requestClient.post('agent/tApi/edit', { ...params });
+}
+
+// 获取API集成指定详情
+export function View(params: TApiViewParam) {
+  return requestClient.get<TApiViewRes>('agent/tApi/view', {
+    params,
+  });
+}
+
+// 导出API集成
+export function Export(params: TApiExportParam) {
+  return requestClient.post<Blob>(
+    '/agent/tApi/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tApi/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tApi/type.ts
new file mode 100644
index 0000000..71c57dc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tApi/type.ts
@@ -0,0 +1,105 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** API集成列表项 */
+export interface TApiModel {
+  /** ID */
+  id: number;
+  /** APPKey */
+  appKey: string;
+  /** APPSecret */
+  appSecret: string;
+  /** API分组 */
+  groupId: number;
+  /** 限流周期(秒,0:不限流) */
+  rateLimitPeriod: number;
+  /** 限流次数 */
+  rateLimitCount: number;
+  /** 所属机构 */
+  deptId: number;
+  /** 客户编号 */
+  deptKey: string;
+  /** 客户名称 */
+  deptName: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取API集成列表 请求参数 */
+export interface TApiListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** ID */
+  id?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取API集成列表 响应 */
+export type TApiListRes = GlobalListRes<TApiModel>;
+
+/** 导出API集成列表 请求参数 */
+export type TApiExportParam = TApiListParam;
+
+/** 修改/新增API集成 请求参数 */
+export interface TApiEditParam {
+  /** ID */
+  id?: number;
+  /** APPKey */
+  appKey?: string;
+  /** APPSecret */
+  appSecret?: string;
+  /** API分组 */
+  groupId?: number;
+  /** 限流周期(秒,0:不限流) */
+  rateLimitPeriod?: number;
+  /** 限流次数 */
+  rateLimitCount?: number;
+  /** 所属机构 */
+  deptId?: number;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门 */
+  createdDept?: number;
+  /** 创建者 */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者 */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取API集成指定信息 请求参数 */
+export interface TApiViewParam {
+  /** APPKey */
+  appKey: string;
+}
+
+/** 获取API集成指定信息 响应 */
+export type TApiViewRes = TApiModel;
+
+/** 删除API集成 请求参数 */
+export interface TApiDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannelTemplate/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannelTemplate/index.ts
new file mode 100644
index 0000000..9f03fb3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannelTemplate/index.ts
@@ -0,0 +1,53 @@
+import type {
+  TSimChannelTemplateDeleteParam,
+  TSimChannelTemplateEditParam,
+  TSimChannelTemplateExportParam,
+  TSimChannelTemplateListParam,
+  TSimChannelTemplateListRes,
+  TSimChannelTemplateViewParam,
+  TSimChannelTemplateViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取通道模板列表
+export function List(params: TSimChannelTemplateListParam) {
+  return requestClient.get<TSimChannelTemplateListRes>(
+    'iot/tSimChannelTemplate/list',
+    { params },
+  );
+}
+
+// 删除/批量删除通道模板
+export function Delete(params: TSimChannelTemplateDeleteParam) {
+  return requestClient.post('iot/tSimChannelTemplate/delete', { ...params });
+}
+
+// 添加/编辑通道模板
+export function Edit(params: TSimChannelTemplateEditParam) {
+  return requestClient.post('iot/tSimChannelTemplate/edit', { ...params });
+}
+
+// 获取通道模板指定详情
+export function View(params: TSimChannelTemplateViewParam) {
+  return requestClient.get<TSimChannelTemplateViewRes>(
+    'iot/tSimChannelTemplate/view',
+    {
+      params,
+    },
+  );
+}
+
+// 导出通道模板
+export function Export(params: TSimChannelTemplateExportParam) {
+  return requestClient.post<Blob>(
+    '/iot/tSimChannelTemplate/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannelTemplate/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannelTemplate/type.ts
new file mode 100644
index 0000000..ed4e4b7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannelTemplate/type.ts
@@ -0,0 +1,141 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 通道模板列表项 */
+export interface TSimChannelTemplateModel {
+  /** ID */
+  id: number;
+  /** 模板标识 */
+  tempKey: string;
+  /** 模板名称 */
+  tempName: string;
+  /** 模板模型 */
+  tempModel: string;
+  /** 模板配置 */
+  tempConfig: string;
+  /** 模板状态(0未启用,1启用) */
+  tempStatus: number;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取通道模板指定信息响应项 */
+export interface TSimChannelTemplateViewModel {
+  /** ID */
+  id: number;
+  /** 模板标识 */
+  tempKey: string;
+  /** 模板名称 */
+  tempName: string;
+  /** 模板模型 */
+  tempModel: string;
+  /** 模板配置 */
+  tempConfig: string;
+  /** 模板状态(0未启用,1启用) */
+  tempStatus: number;
+  /** 备注 */
+  remark: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新时间 */
+  updatedAt: string;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+}
+
+/** 获取通道模板列表 请求参数 */
+export interface TSimChannelTemplateListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** ID */
+  id?: number;
+  /** 模板标识 */
+  tempKey?: string;
+  /** 模板名称 */
+  tempName?: string;
+  /** 模板模型 */
+  tempModel?: string;
+  /** 模板状态(0未启用,1启用) */
+  tempStatus?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取通道模板列表 响应 */
+export type TSimChannelTemplateListRes = GlobalListRes<TSimChannelTemplateModel>;
+
+/** 导出通道模板列表 请求参数 */
+export type TSimChannelTemplateExportParam = TSimChannelTemplateListParam;
+
+/** 修改/新增通道模板 请求参数 */
+export interface TSimChannelTemplateEditParam {
+  /** ID */
+  id?: number;
+  /** 模板标识 */
+  tempKey?: string;
+  /** 模板名称 */
+  tempName?: string;
+  /** 模板模型 */
+  tempModel?: string;
+  /** 模板配置 */
+  tempConfig?: string;
+  /** 模板状态(0未启用,1启用) */
+  tempStatus?: number;
+  /** 备注 */
+  remark?: string;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门 */
+  createdDept?: number;
+  /** 创建者 */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者 */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取通道模板指定信息 请求参数 */
+export interface TSimChannelTemplateViewParam {
+  /** ID */
+  id: number;
+}
+
+/** 获取通道模板指定信息 响应 */
+export type TSimChannelTemplateViewRes = TSimChannelTemplateViewModel;
+
+/** 删除通道模板 请求参数 */
+export interface TSimChannelTemplateDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannels/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannels/index.ts
new file mode 100644
index 0000000..c425fc9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannels/index.ts
@@ -0,0 +1,62 @@
+import type {
+  TSimChannelsDeleteParam,
+  TSimChannelsEditParam,
+  TSimChannelsExportParam,
+  TSimChannelsListParam,
+  TSimChannelsListRes,
+  TSimChannelsTestParam,
+  TSimChannelsTestRes,
+  TSimChannelsViewParam,
+  TSimChannelsViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取通道管理列表
+export function List(params: TSimChannelsListParam) {
+  return requestClient.get<TSimChannelsListRes>('iot/tSimChannels/list', {
+    params,
+  });
+}
+
+// 删除/批量删除通道管理
+export function Delete(params: TSimChannelsDeleteParam) {
+  return requestClient.post('iot/tSimChannels/delete', { ...params });
+}
+
+// 添加/编辑通道管理
+export function Edit(params: TSimChannelsEditParam) {
+  return requestClient.post('iot/tSimChannels/edit', { ...params });
+}
+
+// 获取通道管理指定详情
+export function View(params: TSimChannelsViewParam) {
+  return requestClient.get<TSimChannelsViewRes>('iot/tSimChannels/view', {
+    params,
+  });
+}
+
+// 导出通道管理
+export function Export(params: TSimChannelsExportParam) {
+  return requestClient.post<Blob>(
+    '/iot/tSimChannels/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
+
+export function Test(params: TSimChannelsTestParam) {
+  return requestClient.post<TSimChannelsTestRes>('iot/tSimChannels/test', {
+    ...params,
+  });
+}
+
+/** 刷新通道卡数量统计 */
+export function RefreshCardCount() {
+  return requestClient.post('iot/tSimChannels/refresh-card-count');
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannels/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannels/type.ts
new file mode 100644
index 0000000..2311b9d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tChannel/tSimChannels/type.ts
@@ -0,0 +1,306 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 通道管理列表项 */
+export interface TSimChannelsModel {
+	/** 库存卡数量 */
+	stockCardCount: number;
+	/** 卡信息数量 */
+	cardInfoCount: number;
+	/** 销户卡数量 */
+	cancellationCardCount: number;
+  /** ID */
+  id: number;
+  /** 运营商：1移动，2联通，3电信 */
+  operator: number;
+  /** 模板标识 */
+  tempKey: string;
+  /** 是否允许同步：0否 1是 */
+  syncEnabled: number;
+  /** 模板名称 */
+  tempName: string;
+  /** 模板模型，用于识别共享 Token 能力 */
+  tempModel?: string;
+  /** 通道编号 */
+  chanKey: string;
+  /** 通道名称 */
+  chanName: string;
+  /** 通道配置 */
+  chanConfig: string;
+  /** 通道状态(0未启用,1启用) */
+  chanStatus: number;
+  /** 是否开放共享Token(0否,1是) */
+  shareEnabled: number;
+  /** 是否正常(0是,1否) */
+  isNormal: null | number;
+  /** 对接信息 */
+  dockingStatus: null | number;
+  /** 通道别名 */
+  chanAlias: string;
+  /** 通道行政区域代码(省市) */
+  regionCode: string;
+  /** 应用标识 */
+  appKey: string;
+  /** 应用密钥 */
+  appSecret: string;
+  /** 接口调用凭证 */
+  accessToken: string;
+  /** 凭证申请时间 */
+  accessTokenCreated: string;
+  /** 凭证过期时间 */
+  accessTokenExpire: string;
+  /** 刷新凭证 */
+  refreshToken: string;
+  /** 刷新凭证申请时间 */
+  refreshTokenCreated: string;
+  /** 刷新凭证过期时间 */
+  refreshTokenExpire: string;
+  /** 备注 */
+  remark: string;
+  /** 登录账号 */
+  loginUser: string;
+  /** 登录密码 */
+  loginPassword: string;
+  /** 登录地址 */
+  loginUrl: string;
+  /** 登录状态(0未启用,1启用) */
+  loginState: number;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取通道管理指定信息响应项 */
+export interface TSimChannelsViewModel {
+  /** ID */
+  id: number;
+  /** 运营商：1移动，2联通，3电信 */
+  operator: number;
+  /** 模板标识 */
+  tempKey: string;
+  /** 是否允许同步：0否 1是 */
+  syncEnabled: number;
+  /** 模板模型，用于识别共享 Token 能力 */
+  tempModel?: string;
+  /** 通道编号 */
+  chanKey: string;
+  /** 通道名称 */
+  chanName: string;
+  /** 通道配置 */
+  chanConfig: string;
+  /** 通道状态(0启用,1停用) */
+  chanStatus: number;
+  /** 是否开放共享Token(0否,1是) */
+  shareEnabled: number;
+  /** 是否正常(0是,1否) */
+  isNormal: null | number;
+  /** 对接信息 */
+  dockingStatus: null | number;
+  /** 通道别名 */
+  chanAlias: string;
+  /** 通道行政区域代码(省市) */
+  regionCode: string;
+  /** 应用标识 */
+  appKey: string;
+  /** 应用密钥 */
+  appSecret: string;
+  /** 接口调用凭证 */
+  accessToken: string;
+  /** 凭证申请时间 */
+  accessTokenCreated: string;
+  /** 凭证过期时间 */
+  accessTokenExpire: string;
+  /** 刷新凭证 */
+  refreshToken: string;
+  /** 备注 */
+  remark: string;
+  /** 登录账号 */
+  loginUser: string;
+  /** 登录密码 */
+  loginPassword: string;
+  /** 登录地址 */
+  loginUrl: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新时间 */
+  updatedAt: string;
+  /** 模板名称 */
+  tempName: string;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+}
+
+/** 获取通道管理列表 请求参数 */
+export interface TSimChannelsListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** ID */
+  id?: number;
+  /** 运营商：1移动，2联通，3电信 */
+  operator?: number;
+  /** 模板标识 */
+  tempKey?: string;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 通道名称 */
+  chanName?: string;
+  /** 通道别名 */
+  chanAlias?: string;
+  /** 通道状态(0未启用,1启用) */
+  chanStatus?: number;
+  shareEnabled?: number;
+  isNormal?: number | null;
+  dockingStatus?: number | null;
+  syncEnabled?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取通道管理列表 响应 */
+export type TSimChannelsListRes = GlobalListRes<TSimChannelsModel>;
+
+/** 导出通道管理列表 请求参数 */
+export type TSimChannelsExportParam = TSimChannelsListParam;
+
+/** 修改/新增通道管理 请求参数 */
+export interface TSimChannelsEditParam {
+  /** ID */
+  id?: number;
+  /** 运营商：1移动，2联通，3电信 */
+  operator?: number;
+  /** 模板标识 */
+  tempKey?: string;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 通道名称 */
+  chanName?: string;
+  /** 通道配置 */
+  chanConfig?: string;
+  /** 通道状态(0未启用,1启用) */
+  chanStatus?: number;
+  /** 是否开放共享Token(0否,1是) */
+  shareEnabled?: number;
+  /** 是否正常(0是,1否) */
+  isNormal?: null | number;
+  /** 对接信息 */
+  dockingStatus?: null | number;
+  /** 通道别名 */
+  chanAlias?: string;
+  /** 通道行政区域代码(省市) */
+  regionCode?: string;
+  /** 应用标识 */
+  appKey?: string;
+  /** 应用密钥 */
+  appSecret?: string;
+  /** 接口调用凭证 */
+  accessToken?: string;
+  /** 凭证申请时间 */
+  accessTokenCreated?: string;
+  /** 凭证过期时间 */
+  accessTokenExpire?: string;
+  /** 刷新凭证 */
+  refreshToken?: string;
+  /** 刷新凭证申请时间 */
+  refreshTokenCreated?: string;
+  /** 刷新凭证过期时间 */
+  refreshTokenExpire?: string;
+  /** 备注 */
+  remark?: string;
+  /** 登录账号 */
+  loginUser?: string;
+  /** 登录密码 */
+  loginPassword?: string;
+  /** 登录地址 */
+  loginUrl?: string;
+  /** 登录状态(0未启用,1启用) */
+  loginState?: number;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门 */
+  createdDept?: number;
+  /** 创建者 */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者 */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取通道管理指定信息 请求参数 */
+export interface TSimChannelsViewParam {
+  /** ID */
+  id: number;
+}
+
+/** 获取通道管理指定信息 响应 */
+export type TSimChannelsViewRes = TSimChannelsViewModel;
+
+/** 删除通道管理 请求参数 */
+export interface TSimChannelsDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
+
+/** 通道测试请求参数 */
+export interface TSimChannelsTestParam {
+  channelId: number;
+  inputMode: 'complete' | 'direct_single' | 'single';
+  cardValueType?: 'iccid' | 'imsi' | 'msisdn';
+  cardValue?: string;
+  iccid?: string;
+  imsi?: string;
+  msisdn?: string;
+  /** 未传时执行全部查询项 */
+  items?: string[];
+}
+
+export type TSimChannelsTestItemStatus = 'failed' | 'success' | 'timeout';
+
+/** 单项测试结果 */
+export interface TSimChannelsTestItem {
+  key: string;
+  name: string;
+  status: TSimChannelsTestItemStatus;
+  durationMs: number;
+  errorCode?: number;
+  message?: string;
+  data?: unknown;
+  /** 完整通道测试响应 JSON，归属当前单项展示 */
+  responseJson?: string;
+}
+
+/** 通道测试响应 */
+export interface TSimChannelsTestRes {
+  items: TSimChannelsTestItem[];
+  /** Unmodified response body from the channel gateway test endpoint. */
+  gatewayResponseRaw?: string;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardAllocate/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardAllocate/index.ts
new file mode 100644
index 0000000..8fe9809
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardAllocate/index.ts
@@ -0,0 +1,52 @@
+import type {
+  TSimCardAllocateBatchSubmitParam,
+  TSimCardAllocateBatchSubmitRes,
+  TSimCardAllocateExcelSubmitParam,
+  TSimCardAllocateInputPrepareParam,
+  TSimCardAllocatePrepareRes,
+  TSimCardAllocateTarget,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardAllocate/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ListTargets(keyword = '') {
+  return requestClient.get<{ items: TSimCardAllocateTarget[] }>(
+    '/iot/tSimCardAllocate/targets',
+    { params: { keyword } },
+  );
+}
+
+export function InputPrepare(params: TSimCardAllocateInputPrepareParam) {
+  return requestClient.post<TSimCardAllocatePrepareRes>(
+    '/iot/tSimCardAllocate/input/prepare',
+    params,
+  );
+}
+
+export function ExcelSubmit(params: TSimCardAllocateExcelSubmitParam) {
+  const data: Record<string, any> & { file: File } = {
+    file: params.file,
+    remark: params.remark ?? '',
+  };
+  if (params.targetDeptId) {
+    data.targetDeptId = String(params.targetDeptId);
+  }
+  return requestClient.upload<TSimCardAllocatePrepareRes>(
+    '/iot/tSimCardAllocate/excel/submit',
+    data,
+    { timeout: 10 * 60_000 },
+  );
+}
+
+export function BatchSubmit(params: TSimCardAllocateBatchSubmitParam) {
+  return requestClient.post<TSimCardAllocateBatchSubmitRes>(
+    '/iot/tSimCardAllocate/batch/submit',
+    params,
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardAllocate/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardAllocate/type.ts
new file mode 100644
index 0000000..ec0052f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardAllocate/type.ts
@@ -0,0 +1,49 @@
+export interface TSimCardAllocateTarget {
+  deptId: number;
+  parentId: number;
+  deptKey?: string;
+  deptName: string;
+  deptCategory?: string;
+}
+
+export interface TSimCardAllocateInputPrepareParam {
+  input: string;
+  targetDeptId: number;
+}
+
+export interface TSimCardAllocateExcelSubmitParam {
+  file: File;
+  targetDeptId?: number;
+  remark?: string;
+}
+
+export interface TSimCardAllocateBatchSubmitParam {
+  batchNo: string;
+  targetDeptId?: number;
+  remark?: string;
+}
+
+export interface TSimCardAllocateBatchDetail {
+  rowNo: number;
+  itemId: string;
+  targetDeptId?: number;
+  targetDeptKey?: string;
+  targetDeptName?: string;
+  status: string;
+  errorReason?: string;
+}
+
+export interface TSimCardAllocatePrepareRes {
+  batchNo: string;
+  batchType: number;
+  batchAsyncStatus?: number;
+  target?: TSimCardAllocateTarget;
+  totalCount: number;
+  validCount: number;
+  failCount: number;
+  failReason?: string;
+  status: string;
+  details: TSimCardAllocateBatchDetail[];
+}
+
+export type TSimCardAllocateBatchSubmitRes = TSimCardAllocatePrepareRes;
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardBindPkg/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardBindPkg/index.ts
new file mode 100644
index 0000000..2ebfdd3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardBindPkg/index.ts
@@ -0,0 +1,94 @@
+import type {
+  TSimAddPackageBatchConfirmParam,
+  TSimAddPackageBatchConfirmRes,
+  TSimAddPackageOptionsRes,
+  TSimAddPackagePrepareResult,
+  TSimBindPackageAddPackageExcelSubmitParam,
+  TSimBindPackageAddPackageInputPrepareParam,
+  TSimBindPackageAddPackageInputPrepareRes,
+  TSimBindPackageAddPackageInputSubmitParam,
+  TSimBindPackageAddPackageSubmitRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取卡绑定套餐列表
+export function List(params: any) {
+  return requestClient.get<any>('iot/tSimCardBindPkg/list', { params });
+}
+
+// 获取卡套餐详情
+export function GetPkgInfo(params: any) {
+  return requestClient.get<any>('iot/tSimCardBindPkg/getPkgInfo', { params });
+}
+
+// 获取变更套餐
+export function GetChangePkg(params: any) {
+  return requestClient.get<any>('iot/tSimCardBindPkg/getChangePkg', { params });
+}
+
+export function DownloadAddPackageTemplate() {
+  return requestClient.download(
+    '/iot/tSimCardBindPkg/addPackage/excel/template',
+    {
+      responseReturn: 'raw',
+    },
+  );
+}
+
+export function AddPackageExcelSubmit(
+  params: TSimBindPackageAddPackageExcelSubmitParam,
+): Promise<TSimBindPackageAddPackageSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardBindPkg/addPackage/excel/submit',
+    {
+      file: params.file,
+      manualConfirm: params.manualConfirm,
+    },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function AddPackageOptions(params: {
+  iccids: string[];
+}): Promise<TSimAddPackageOptionsRes> {
+  return requestClient.post('/iot/tSimCardBindPkg/addPackage/options', params);
+}
+
+export function AddPackagePaymentContext(): Promise<TSimAddPackageOptionsRes> {
+  return requestClient.post('/iot/tSimCardBindPkg/addPackage/payment-context');
+}
+
+export function AddPackageInputSubmit(
+  params: TSimBindPackageAddPackageInputSubmitParam,
+): Promise<TSimBindPackageAddPackageSubmitRes> {
+  return requestClient.post('/iot/tSimCardBindPkg/addPackage/input/submit', {
+    ...params,
+  });
+}
+
+export function AddPackageInputPrepare(
+  params: TSimBindPackageAddPackageInputPrepareParam,
+): Promise<TSimBindPackageAddPackageInputPrepareRes> {
+  return requestClient.post('/iot/tSimCardBindPkg/addPackage/input/prepare', {
+    ...params,
+  });
+}
+
+export function AddPackagePrepareResult(
+  batchNo: string,
+): Promise<TSimAddPackagePrepareResult> {
+  return requestClient.get('/iot/tSimCardBindPkg/addPackage/prepare/result', {
+    params: { batchNo },
+  });
+}
+
+export function AddPackageBatchConfirm(
+  params: TSimAddPackageBatchConfirmParam,
+): Promise<TSimAddPackageBatchConfirmRes> {
+  return requestClient.post('/iot/tSimCardBindPkg/addPackage/batch/confirm', {
+    ...params,
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardBindPkg/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardBindPkg/type.ts
new file mode 100644
index 0000000..615fabe
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardBindPkg/type.ts
@@ -0,0 +1,119 @@
+export type AddPackageEffectiveMode = 'current_month';
+export type AddPackagePaymentMode = 'balance' | 'offline';
+
+export interface TSimBindPackageAddPackageExcelSubmitParam {
+  file: File;
+  paymentMode?: AddPackagePaymentMode;
+  offlineContractCompleted?: boolean;
+  manualConfirm?: boolean;
+}
+
+export interface TSimBindPackageAddPackageInputSubmitParam {
+  input: string;
+  packageCode?: string;
+  effectiveMode?: AddPackageEffectiveMode | string;
+  remark?: string;
+  paymentMode?: AddPackagePaymentMode;
+  offlineContractCompleted?: boolean;
+  [property: string]: any;
+}
+
+export interface TSimBindPackageAddPackageInputPrepareParam {
+  input: string;
+  packageCode?: string;
+  effectiveMode?: AddPackageEffectiveMode | string;
+  remark?: string;
+  [property: string]: any;
+}
+
+export interface TSimBindPackageAddPackageSubmitRes {
+  batchAsyncStatus?: number;
+  batchNo?: string;
+  batchType?: number;
+  targetBatchType?: number;
+  total?: number;
+  validCount?: number;
+  failCount?: number;
+  [property: string]: any;
+}
+
+export type TSimBindPackageAddPackageInputPrepareRes =
+  TSimAddPackagePrepareResult;
+
+export interface TSimAddPackageBatchConfirmParam {
+  batchNo: string;
+  packageCode?: string;
+  effectiveMode?: AddPackageEffectiveMode | string;
+  remark?: string;
+  paymentMode?: AddPackagePaymentMode | string;
+  offlineContractCompleted?: boolean;
+  [property: string]: any;
+}
+
+export interface TSimAddPackageBatchConfirmRes {
+  batchAsyncStatus?: number;
+  batchNo?: string;
+  batchType?: number;
+  effectiveMode?: AddPackageEffectiveMode | string;
+  packageCode?: string;
+  status?: string;
+  [property: string]: any;
+}
+
+export interface TSimAddPackagePaymentAccount {
+  payerDeptId: number;
+  targetCount: number;
+  requiredAmount: number | string;
+  availableBalance: number | string;
+  balanceEnough: boolean;
+}
+
+export interface TSimAddPackageOption {
+  flowMb: number;
+  packageCode: string;
+  packageName: string;
+  unitPrice?: number | string;
+  totalAmount?: number | string;
+  priceAvailable?: boolean;
+  priceReason?: string;
+  paymentAccounts?: TSimAddPackagePaymentAccount[];
+}
+
+export interface TSimAddPackageOptionsRes {
+  items: TSimAddPackageOption[];
+  isTopDept?: boolean;
+  defaultPaymentMode?: AddPackagePaymentMode | string;
+  availableBalance?: number | string;
+}
+
+export interface TSimAddPackagePrepareResult {
+  availableBalance?: number | string;
+  batchAsyncStatus?: number;
+  batchInfo?: Record<string, any>;
+  batchNo?: string;
+  batchType?: number;
+  effectiveMode?: AddPackageEffectiveMode | string;
+  effectiveModeText?: string;
+  effectiveTime?: string;
+  expectedExpireTime?: string;
+  failCount?: number;
+  failReason?: string;
+  flowMb?: number | string;
+  isTopDept?: boolean;
+  packageCode?: string;
+  packageName?: string;
+  paymentAccounts?: TSimAddPackagePaymentAccount[];
+  availablePackages?: TSimAddPackageOption[];
+  quantity?: number;
+  runResult?: number;
+  snapshot?: Record<string, any>;
+  status?: string;
+  successCount?: number;
+  targetBatchType?: number;
+  total?: number;
+  totalAmount?: number | string;
+  unitPrice?: number | string;
+  validCount?: number;
+  defaultPaymentMode?: AddPackagePaymentMode | string;
+  [property: string]: any;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardCancel/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardCancel/index.ts
new file mode 100644
index 0000000..0a92e29
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardCancel/index.ts
@@ -0,0 +1,31 @@
+import type {
+  TSimCardCancelExcelSubmitParam,
+  TSimCardCancelInputSubmitParam,
+  TSimCardCancelSubmitRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardCancel/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(
+  params: TSimCardCancelExcelSubmitParam,
+): Promise<TSimCardCancelSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardCancel/excel/submit',
+    { file: params.file },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function InputSubmit(
+  params: TSimCardCancelInputSubmitParam,
+): Promise<TSimCardCancelSubmitRes> {
+  return requestClient.post('/iot/tSimCardCancel/input/submit', params);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardCancel/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardCancel/type.ts
new file mode 100644
index 0000000..8579e33
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardCancel/type.ts
@@ -0,0 +1,39 @@
+/** 提交Excel卡销户请求参数 */
+export interface TSimCardCancelExcelSubmitParam {
+  /** Excel文件 */
+  file: File;
+}
+
+/** 提交批量输入卡销户请求参数 */
+export interface TSimCardCancelInputSubmitParam {
+  /** 批量输入ICCID文本 */
+  input: string;
+  /** 销户备注 */
+  remark?: string;
+  [property: string]: any;
+}
+
+/** 卡销户提交响应 */
+export interface TSimCardCancelSubmitRes {
+  /** 批次异步处理状态（Pending 等） */
+  batchAsyncStatus?: number;
+  /** 批次号 */
+  batchNo?: string;
+  /** 批次类型 */
+  batchType?: number;
+  /** 失败行数 */
+  failCount?: number;
+  /** 实际销户数量 */
+  quantity?: number;
+  /** 结果下载任务ID */
+  resultDownloadId?: number;
+  /** 结果文件OSS ID */
+  resultFileOssId?: number;
+  /** 导入状态 */
+  status?: string;
+  /** 解析总行数 */
+  total?: number;
+  /** 校验通过行数 */
+  validCount?: number;
+  [property: string]: any;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardChange/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardChange/index.test.ts
new file mode 100644
index 0000000..8cf42ec
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardChange/index.test.ts
@@ -0,0 +1,119 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const get = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    download,
+    get,
+    post,
+    upload,
+  },
+}));
+
+describe('tSimCardChange api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    get.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads excel change template from backend contract path', async () => {
+    const { DownloadTemplate } = await import('./index');
+
+    DownloadTemplate();
+
+    expect(download).toHaveBeenCalledWith(
+      '/iot/tSimCardChange/excel/template',
+      {
+        responseReturn: 'raw',
+      },
+    );
+  });
+
+  it('submits excel change as file-only form data', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'change.xlsx');
+
+    ExcelSubmit({ file });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardChange/excel/submit',
+      { file },
+      {
+        timeout: 60_000,
+      },
+    );
+  });
+
+  it('prepares input change with backend contract path', async () => {
+    const { InputPrepare } = await import('./index');
+    const params = {
+      durationMonths: 6,
+      effectiveMode: 'immediate' as const,
+      input: '8986000000000000001\n8986000000000000002',
+      newPackageCode: 'PKG002',
+      offlineContractCompleted: true,
+    };
+
+    InputPrepare(params);
+
+    expect(post).toHaveBeenCalledWith('/iot/tSimCardChange/input/prepare', {
+      ...params,
+    });
+  });
+
+  it('prepares range change with backend contract path', async () => {
+    const { RangePrepare } = await import('./index');
+    const params = {
+      durationMonths: 6,
+      effectiveMode: 'next_month' as const,
+      endIccid: '8986000000000000009',
+      endImsi: '460000000000009',
+      endMsisdn: '13000000009',
+      newPackageCode: 'PKG002',
+      offlineContractCompleted: true,
+      startIccid: '8986000000000000001',
+      startImsi: '460000000000001',
+      startMsisdn: '13000000001',
+    };
+
+    RangePrepare(params);
+
+    expect(post).toHaveBeenCalledWith('/iot/tSimCardChange/range/prepare', {
+      ...params,
+    });
+  });
+
+  it('submits change prepare batch with backend contract path', async () => {
+    const { BatchSubmit } = await import('./index');
+    const params = {
+      batchNo: 'CH202607060001',
+      durationMonths: 6,
+      effectiveMode: 'immediate' as const,
+      newPackageCode: 'PKG002',
+      offlineContractCompleted: true,
+    };
+
+    BatchSubmit(params);
+
+    expect(post).toHaveBeenCalledWith('/iot/tSimCardChange/batch/submit', {
+      ...params,
+    });
+  });
+
+  it('polls change prepare result with backend contract path', async () => {
+    const { PrepareResult } = await import('./index');
+    const batchNo = 'CH202607060001';
+
+    PrepareResult(batchNo);
+
+    expect(get).toHaveBeenCalledWith('/iot/tSimCardChange/prepare/result', {
+      params: { batchNo },
+    });
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardChange/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardChange/index.ts
new file mode 100644
index 0000000..9d9e1ab
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardChange/index.ts
@@ -0,0 +1,77 @@
+import type {
+  TSimCardChangeBatchPrepareRes,
+  TSimCardChangeBatchPrepareResult,
+  TSimCardChangeBatchSubmitParam,
+  TSimCardChangeBatchSubmitRes,
+  TSimCardChangeExcelSubmitParam,
+  TSimCardChangeExcelSubmitRes,
+  TSimCardChangeInputPrepareParam,
+  TSimCardChangeInputOptionsParam,
+  TSimCardChangeOptionsRes,
+  TSimCardChangeRangePrepareParam,
+  TSimCardChangeRangeOptionsParam,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardChange/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(
+  params: TSimCardChangeExcelSubmitParam,
+): Promise<TSimCardChangeExcelSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardChange/excel/submit',
+    {
+      file: params.file,
+    },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function InputOptions(params: TSimCardChangeInputOptionsParam) {
+  return requestClient.post<TSimCardChangeOptionsRes>(
+    '/iot/tSimCardChange/input/change-options',
+    params,
+  );
+}
+
+export function RangeOptions(params: TSimCardChangeRangeOptionsParam) {
+  return requestClient.post<TSimCardChangeOptionsRes>(
+    '/iot/tSimCardChange/range/change-options',
+    params,
+  );
+}
+
+export function InputPrepare(params: TSimCardChangeInputPrepareParam) {
+  return requestClient.post<TSimCardChangeBatchPrepareRes>(
+    '/iot/tSimCardChange/input/prepare',
+    { ...params },
+  );
+}
+
+export function RangePrepare(params: TSimCardChangeRangePrepareParam) {
+  return requestClient.post<TSimCardChangeBatchPrepareRes>(
+    '/iot/tSimCardChange/range/prepare',
+    { ...params },
+  );
+}
+
+export function BatchSubmit(params: TSimCardChangeBatchSubmitParam) {
+  return requestClient.post<TSimCardChangeBatchSubmitRes>(
+    '/iot/tSimCardChange/batch/submit',
+    { ...params },
+  );
+}
+
+export function PrepareResult(batchNo: string) {
+  return requestClient.get<TSimCardChangeBatchPrepareResult>(
+    '/iot/tSimCardChange/prepare/result',
+    { params: { batchNo } },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardChange/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardChange/type.ts
new file mode 100644
index 0000000..5bd8b42
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardChange/type.ts
@@ -0,0 +1,149 @@
+export type TSimCardChangeEffectiveMode = 'immediate' | 'next_month';
+
+export interface TSimCardChangeInputPrepareParam {
+  durationMonths: number;
+  effectiveMode: TSimCardChangeEffectiveMode;
+  giftDurationMonths?: number;
+  input: string;
+  newPackageCode: string;
+  offlineContractCompleted: boolean;
+  [property: string]: any;
+}
+
+export interface TSimCardChangeExcelSubmitParam {
+  file: File;
+}
+
+export interface TSimCardChangeExcelSubmitRes {
+  batchNo?: string;
+  batchType?: number;
+  resultDownloadId?: number;
+  resultFileOssId?: number;
+  status?: string;
+  [property: string]: any;
+}
+
+export interface TSimCardChangeInputOptionsParam {
+  input: string;
+}
+
+export interface TSimCardChangeRangeOptionsParam {
+  endIccid: string;
+  endImsi: string;
+  endMsisdn: string;
+  startIccid: string;
+  startImsi: string;
+  startMsisdn: string;
+}
+
+export interface TSimCardChangePackageOption {
+  changeUnitPrice?: number | string;
+  flowMb?: number;
+  packageCode: string;
+  packageName: string;
+  packageType?: number;
+  renewableDurationOptions?: number[];
+}
+
+export interface TSimCardChangeOptionsRes {
+  customerAgentId?: number;
+  customerName?: string;
+  oldPackageCode?: string;
+  oldPackageName?: string;
+  oldPackageType?: number;
+  packages?: TSimCardChangePackageOption[];
+  quantity?: number;
+}
+
+export interface TSimCardChangeBatchPrepareRes {
+  batchNo: string;
+  batchType?: number;
+  agentDefaultPriceId?: number;
+  changeUnitPrice?: number | string;
+  customerAgentId?: number;
+  customerName?: string;
+  failCount?: number;
+  newPackageCode?: string;
+  newPackageFlowMb?: number;
+  newPackageName?: string;
+  newPackageType?: number;
+  oldPackageCode?: string;
+  oldPackageFlowMb?: number;
+  oldPackageName?: string;
+  oldPackageType?: number;
+  priceSource?: string;
+  quantity?: number;
+  renewableDurationOptions?: number[];
+  resultDownloadId?: number;
+  resultFileOssId?: number;
+  sourceBatchNo?: string;
+  status?: string;
+  targetBatchType?: number;
+  targetPriceId?: number;
+  total?: number;
+  validCount?: number;
+  [property: string]: any;
+}
+
+export interface TSimCardChangeRangePrepareParam {
+  durationMonths: number;
+  effectiveMode: TSimCardChangeEffectiveMode;
+  endIccid: string;
+  endImsi: string;
+  endMsisdn: string;
+  giftDurationMonths?: number;
+  newPackageCode: string;
+  offlineContractCompleted: boolean;
+  startIccid: string;
+  startImsi: string;
+  startMsisdn: string;
+  [property: string]: any;
+}
+
+export interface TSimCardChangeBatchSubmitParam {
+  adminNote?: string;
+  batchNo: string;
+  buyerNote?: string;
+  durationMonths: number;
+  effectiveMode: TSimCardChangeEffectiveMode;
+  giftDurationMonths?: number;
+  newPackageCode: string;
+  offlineContractCompleted: boolean;
+  remark?: string;
+  [property: string]: any;
+}
+
+export interface TSimCardChangeBatchSubmitRes {
+  batchNo?: string;
+  batchType?: number;
+  changeUnitPrice?: number | string;
+  customerAgentId?: number;
+  customerName?: string;
+  durationMonths?: number;
+  effectiveMode?: string;
+  giftDurationMonths?: number;
+  newPackageCode?: string;
+  newPackageName?: string;
+  oldPackageCode?: string;
+  oldPackageName?: string;
+  orderSn?: string;
+  packageBeginTime?: string;
+  packageEndTime?: string;
+  quantity?: number;
+  sourceBatchNo?: string;
+  status?: string;
+  totalAmount?: number | string;
+  [property: string]: any;
+}
+
+export type TSimCardChangeBatchAsyncStatus = number;
+
+export interface TSimCardChangeBatchPrepareResult {
+  batchAsyncStatus: TSimCardChangeBatchAsyncStatus;
+  batchInfo?: TSimCardChangeBatchPrepareRes;
+  batchNo: string;
+  failReason?: string;
+  runResult?: number;
+  status: string;
+  [property: string]: any;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataCut/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataCut/index.test.ts
new file mode 100644
index 0000000..9cbd831
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataCut/index.test.ts
@@ -0,0 +1,56 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    download,
+    post,
+    upload,
+  },
+}));
+
+describe('tSimCardDataCut api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads the data cut template from the backend contract path', async () => {
+    const { DownloadTemplate } = await import('./index');
+
+    DownloadTemplate();
+
+    expect(download).toHaveBeenCalledWith('/iot/tSimCardDataCut/excel/template', {
+      responseReturn: 'raw',
+    });
+  });
+
+  it('submits an excel data cut batch with the batch threshold', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'dataCut.xlsx');
+
+    ExcelSubmit({ file, trafficCutoffThreshold: 1024.125 });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardDataCut/excel/submit',
+      { file, trafficCutoffThreshold: 1024.125 },
+      { timeout: 60_000 },
+    );
+  });
+
+  it('submits an input data cut batch from the backend contract path', async () => {
+    const { InputSubmit } = await import('./index');
+    const params = {
+      input: '8986000000000000001',
+      trafficCutoffThreshold: 2048,
+    };
+
+    InputSubmit(params);
+
+    expect(post).toHaveBeenCalledWith('/iot/tSimCardDataCut/input/submit', params);
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataCut/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataCut/index.ts
new file mode 100644
index 0000000..01058ce
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataCut/index.ts
@@ -0,0 +1,34 @@
+import type {
+  TSimCardDataCutExcelSubmitParam,
+  TSimCardDataCutInputSubmitParam,
+  TSimCardDataCutSubmitRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardDataCut/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(
+  params: TSimCardDataCutExcelSubmitParam,
+): Promise<TSimCardDataCutSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardDataCut/excel/submit',
+    {
+      file: params.file,
+      trafficCutoffThreshold: params.trafficCutoffThreshold,
+    },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function InputSubmit(
+  params: TSimCardDataCutInputSubmitParam,
+): Promise<TSimCardDataCutSubmitRes> {
+  return requestClient.post('/iot/tSimCardDataCut/input/submit', params);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataCut/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataCut/type.ts
new file mode 100644
index 0000000..aab045f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataCut/type.ts
@@ -0,0 +1,16 @@
+export interface TSimCardDataCutExcelSubmitParam {
+  file: File;
+  trafficCutoffThreshold: number;
+}
+
+export interface TSimCardDataCutInputSubmitParam {
+  input: string;
+  trafficCutoffThreshold: number;
+}
+
+export interface TSimCardDataCutSubmitRes {
+  batchNo: string;
+  batchType: number;
+  batchAsyncStatus: number;
+  total: number;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStart/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStart/index.test.ts
new file mode 100644
index 0000000..2acc273
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStart/index.test.ts
@@ -0,0 +1,58 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    download,
+    post,
+    upload,
+  },
+}));
+
+describe('tSimCardDataStart api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads the data start template from the backend contract path', async () => {
+    const { DownloadTemplate } = await import('./index');
+
+    DownloadTemplate();
+
+    expect(download).toHaveBeenCalledWith('/iot/tSimCardDataStart/excel/template', {
+      responseReturn: 'raw',
+    });
+  });
+
+  it('submits an excel data start batch as file-only form data', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'dataStart.xlsx');
+
+    ExcelSubmit({ file });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardDataStart/excel/submit',
+      { file },
+      { timeout: 60_000 },
+    );
+  });
+
+  it('submits an input data start batch from the backend contract path', async () => {
+    const { InputSubmit } = await import('./index');
+    const params = {
+      input: '8986000000000000001',
+    };
+
+    InputSubmit(params);
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardDataStart/input/submit',
+      params,
+    );
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStart/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStart/index.ts
new file mode 100644
index 0000000..4438309
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStart/index.ts
@@ -0,0 +1,33 @@
+import type {
+  TSimCardLifecycleExcelSubmitParam,
+  TSimCardLifecycleInputSubmitParam,
+  TSimCardLifecycleSubmitRes,
+} from '../tSimCardLifecycle/type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardDataStart/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(
+  params: TSimCardLifecycleExcelSubmitParam,
+): Promise<TSimCardLifecycleSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardDataStart/excel/submit',
+    {
+      file: params.file,
+    },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function InputSubmit(
+  params: TSimCardLifecycleInputSubmitParam,
+): Promise<TSimCardLifecycleSubmitRes> {
+  return requestClient.post('/iot/tSimCardDataStart/input/submit', params);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStop/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStop/index.test.ts
new file mode 100644
index 0000000..b99aa0b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStop/index.test.ts
@@ -0,0 +1,58 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    download,
+    post,
+    upload,
+  },
+}));
+
+describe('tSimCardDataStop api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads the data stop template from the backend contract path', async () => {
+    const { DownloadTemplate } = await import('./index');
+
+    DownloadTemplate();
+
+    expect(download).toHaveBeenCalledWith('/iot/tSimCardDataStop/excel/template', {
+      responseReturn: 'raw',
+    });
+  });
+
+  it('submits an excel data stop batch as file-only form data', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'dataStop.xlsx');
+
+    ExcelSubmit({ file });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardDataStop/excel/submit',
+      { file },
+      { timeout: 60_000 },
+    );
+  });
+
+  it('submits an input data stop batch from the backend contract path', async () => {
+    const { InputSubmit } = await import('./index');
+    const params = {
+      input: '8986000000000000001 14000000001 460001000000001',
+    };
+
+    InputSubmit(params);
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardDataStop/input/submit',
+      params,
+    );
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStop/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStop/index.ts
new file mode 100644
index 0000000..062c20f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardDataStop/index.ts
@@ -0,0 +1,33 @@
+import type {
+  TSimCardLifecycleExcelSubmitParam,
+  TSimCardLifecycleInputSubmitParam,
+  TSimCardLifecycleSubmitRes,
+} from '../tSimCardLifecycle/type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardDataStop/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(
+  params: TSimCardLifecycleExcelSubmitParam,
+): Promise<TSimCardLifecycleSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardDataStop/excel/submit',
+    {
+      file: params.file,
+    },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function InputSubmit(
+  params: TSimCardLifecycleInputSubmitParam,
+): Promise<TSimCardLifecycleSubmitRes> {
+  return requestClient.post('/iot/tSimCardDataStop/input/submit', params);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardInfo/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardInfo/index.test.ts
new file mode 100644
index 0000000..0c6b61d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardInfo/index.test.ts
@@ -0,0 +1,39 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const get = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    get,
+  },
+}));
+
+describe('tSimCardInfo session api', () => {
+  beforeEach(() => {
+    get.mockReset();
+  });
+
+  it('queries session without showing a global failure message', async () => {
+    const { QuerySimSession } = await import('./index');
+    const params = { iccid: '8986000000000000001' };
+
+    QuerySimSession(params);
+
+    expect(get).toHaveBeenCalledWith('iot/tSimCardInfo/querySimSession', {
+      params,
+      errorMessageMode: 'none',
+    });
+  });
+
+  it('queries status without showing a global failure message', async () => {
+    const { QuerySimStatus } = await import('./index');
+    const params = { iccid: '8986000000000000001' };
+
+    QuerySimStatus(params);
+
+    expect(get).toHaveBeenCalledWith('iot/tSimCardInfo/querySimStatus', {
+      params,
+      errorMessageMode: 'none',
+    });
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardInfo/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardInfo/index.ts
new file mode 100644
index 0000000..71231a1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardInfo/index.ts
@@ -0,0 +1,76 @@
+import { requestClient } from '#/api/request';
+
+// 获取卡信息表列表
+export function List(params: any) {
+  return requestClient.get<any>('iot/tSimCardInfo/list', { params });
+}
+
+// 批量号码查询使用 POST，避免较长号码列表超过 URL 长度限制
+export function BatchList(params: any) {
+  return requestClient.post<any>('iot/tSimCardInfo/list', { ...params });
+}
+
+// 删除/批量删除卡信息表
+export function Delete(params: any) {
+  return requestClient.post<any>('iot/tSimCardInfo/delete', { ...params });
+}
+
+// 添加/编辑卡信息表
+export function Edit(params: any) {
+  return requestClient.post<any>('iot/tSimCardInfo/edit', { ...params });
+}
+
+// 获取卡信息表指定详情
+export function View(params: any) {
+  return requestClient.get<any>('iot/tSimCardInfo/view', { params });
+}
+
+// 导出卡信息表
+export function Export(params: any) {
+  return requestClient.post<Blob>(
+    '/iot/tSimCardInfo/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
+// 同步单张SIM卡用量
+export function SyncSimCardFlow(params: any) {
+  return requestClient.post<any>('iot/tSimCardInfo/syncSimCardFlow', {
+    ...params,
+  });
+}
+
+// 同步SIM卡状态
+export function SyncSimCardStatus(params: any) {
+  return requestClient.post<any>('iot/tSimCardInfo/syncSimCardStatus', {
+    ...params,
+  });
+}
+
+// // 查询SIM卡会话
+// export function QuerySimSession(params: TSimCardInfoQuerySimSessionParam) {
+//   return requestClient.get<TSimCardInfoQuerySimSessionRes>(
+//     'iot/tSimCardInfo/querySimSession',
+//     { params },
+//   );
+// }
+// 查询SIM卡会话
+export function QuerySimSession(params: any) {
+  return requestClient.get<any>('iot/tSimCardInfo/querySimSession', {
+    params,
+    errorMessageMode: 'none',
+  });
+}
+
+// 查询SIM卡状态
+export function QuerySimStatus(params: any) {
+  return requestClient.get<any>('iot/tSimCardInfo/querySimStatus', {
+    params,
+    errorMessageMode: 'none',
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardInfo/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardInfo/type.ts
new file mode 100644
index 0000000..31919b4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardInfo/type.ts
@@ -0,0 +1,395 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 卡信息表列表项 */
+export interface TSimCardInfoModel {
+  /** 主键ID */
+  id: number;
+  /** ICCID */
+  iccid: string;
+  /** MSISDN/卡号 */
+  msisdn: string;
+  /** IMSI */
+  imsi: string;
+  /** IMEI */
+  imei: string;
+  /** 归属地 */
+  regionCode: string;
+  /** 渠道客户ID */
+  deptId: number;
+  /** 渠道客户名称 */
+  deptName: string;
+  /** 当前套餐编号 */
+  currentPackageCode: string;
+  /** 当前套餐名称 */
+  packageName: string;
+  /** 套餐状态：0 无套餐，1待生效，2生效中，3已过期 */
+  packageStatus: number;
+  /** 接入方式：ipv4、ipv6、ipv4_ipv6 */
+  accessType: number;
+  /** 运营商卡状态 枚举 */
+  bossCardStatus: number;
+  /** 卡类型 枚举 */
+  cardType: number;
+  /** 运营商开户日期 */
+  bossOpenAt: string;
+  /** 运营商激活日期 */
+  bossActivateAt: string;
+  /** 是否按运营商激活减去赠送时长方：1是，0否 */
+  isBossActivateEnabled: number;
+  /** 入库批次 */
+  inboundBatchNo: string;
+  /** 出库批次 */
+  outboundBatchNo: string;
+  /** 划拨批次 */
+  allocationBatchNo: string;
+  /** 是否为池卡：1是，0否 */
+  isFlowPool: number;
+  /** 流量池编号 */
+  flowPoolCode: string;
+  /** 当前套餐生效时间 */
+  flowPkgBeginAt: string;
+  /** 套餐赠送结束时间 */
+  flowPkgPresentAt: string;
+  /** 实际赠送结束时间 */
+  flowPkgRealPresentAt: string;
+  /** 当前套餐预计到期时间 */
+  flowPkgEndAt: string;
+  /** 数据服务状态：1启用、0禁用 */
+  dataServiceStatus: number;
+  /** 套餐总流量MB */
+  packageTotalFlowMb: number;
+  /** 已用流量MB */
+  usedFlowMb: number;
+  /** 达量断网配置状态（0未配置 1已开启 2已关闭） */
+  trafficCutoffStatus: number;
+  /** 达量断网阈值 */
+  trafficCutoffThreshold: number;
+  /** 短信服务状态：1启用、0禁用 */
+  smsServiceStatus: number;
+  /** 套餐短信总条数 */
+  packageTotalSms: number;
+  /** 已用短信条数 */
+  usedSms: number;
+  /** 语音服务状态：1启用、0禁用 */
+  voiceServiceStatus: number;
+  /** 套餐语音总分钟数 */
+  packageTotalVoice: number;
+  /** 已用语音分钟数 */
+  usedVoice: number;
+  /** 国漫服务状态：1启用、0禁用 */
+  roamServiceStatus: number;
+  /** 套餐国际流量MB */
+  packageTotalRoamFlowMb: number;
+  /** 已用国际流量MB */
+  usedRoamFlowMb: number;
+  /** 状态最后一次同步时间 */
+  statusSyncTime: string;
+  /** 流量最后一次同步时间 */
+  flowSyncTime: string;
+  /** 短信最后一次同步时间 */
+  smsSyncTime: string;
+  /** 语音最后一次同步时间 */
+  voiceSyncTime: string;
+  /** 国漫最后一次同步时间 */
+  roamSyncTime: string;
+  /** 是否收取附加费：1是，0否 */
+  extraFeeEnabled: number;
+  /** 附加费用倍数 */
+  extraFeeMultiple: number;
+  /** 附加金额 */
+  extraFee: number;
+  /** 通道编号 */
+  chanKey: string;
+  /** 通道名称 */
+  chanName: string;
+  /** 备注 */
+  remark: string;
+  /** 网络类型：4G、5G、NB-IoT */
+  netModel: number;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取卡信息表指定信息响应项 */
+export interface TSimCardInfoViewModel {
+  /** 通道名称 */
+  chanName: string;
+  /** 部门名称 */
+  deptName: string;
+  /** 套餐名称 */
+  packageName: string;
+  /** 剩余流量MB */
+  reminFlowMb: number;
+  /** 主键ID */
+  id: number;
+  /** ICCID */
+  iccid: string;
+  /** MSISDN/卡号 */
+  msisdn: string;
+  /** IMSI */
+  imsi: string;
+  /** IMEI */
+  imei: string;
+  /** 归属地 */
+  regionCode: string;
+  /** 渠道客户ID */
+  deptId: number;
+  /** 当前套餐编号 */
+  currentPackageCode: string;
+  /** 套餐状态：0 无套餐，1待生效，2生效中，3已过期 */
+  packageStatus: number;
+  /** 接入方式：ipv4、ipv6、ipv4_ipv6 */
+  accessType: number;
+  /** 运营商卡状态 枚举 */
+  bossCardStatus: number;
+  /** 卡类型 枚举 */
+  cardType: number;
+  /** 运营商开户日期 */
+  bossOpenAt: string;
+  /** 运营商激活日期 */
+  bossActivateAt: string;
+  /** 是否按运营商激活减去赠送时长方：1是，0否 */
+  isBossActivateEnabled: number;
+  /** 入库批次 */
+  inboundBatchNo: string;
+  /** 出库批次 */
+  outboundBatchNo: string;
+  /** 划拨批次 */
+  allocationBatchNo: string;
+  /** 是否为池卡：1是，0否 */
+  isFlowPool: number;
+  /** 流量池编号 */
+  flowPoolCode: string;
+  /** 当前套餐生效时间 */
+  flowPkgBeginAt: string;
+  /** 套餐赠送结束时间 */
+  flowPkgPresentAt: string;
+  /** 实际赠送结束时间 */
+  flowPkgRealPresentAt: string;
+  /** 当前套餐预计到期时间 */
+  flowPkgEndAt: string;
+  /** 数据服务状态：1启用、0禁用 */
+  dataServiceStatus: number;
+  /** 套餐总流量MB */
+  packageTotalFlowMb: number;
+  /** 已用流量MB */
+  usedFlowMb: number;
+  /** 达量断网配置状态（0未配置 1已开启 2已关闭） */
+  trafficCutoffStatus: number;
+  /** 达量断网阈值 */
+  trafficCutoffThreshold: number;
+  /** 短信服务状态：1启用、0禁用 */
+  smsServiceStatus: number;
+  /** 套餐短信总条数 */
+  packageTotalSms: number;
+  /** 已用短信条数 */
+  usedSms: number;
+  /** 语音服务状态：1启用、0禁用 */
+  voiceServiceStatus: number;
+  /** 套餐语音总分钟数 */
+  packageTotalVoice: number;
+  /** 已用语音分钟数 */
+  usedVoice: number;
+  /** 国漫服务状态：1启用、0禁用 */
+  roamServiceStatus: number;
+  /** 套餐国际流量MB */
+  packageTotalRoamFlowMb: number;
+  /** 已用国际流量MB */
+  usedRoamFlowMb: number;
+  /** 状态最后一次同步时间 */
+  statusSyncTime: string;
+  /** 流量最后一次同步时间 */
+  flowSyncTime: string;
+  /** 短信最后一次同步时间 */
+  smsSyncTime: string;
+  /** 语音最后一次同步时间 */
+  voiceSyncTime: string;
+  /** 国漫最后一次同步时间 */
+  roamSyncTime: string;
+  /** 是否收取附加费：1是，0否 */
+  extraFeeEnabled: number;
+  /** 附加费用倍数 */
+  extraFeeMultiple: number;
+  /** 附加金额 */
+  extraFee: number;
+  /** 通道编号 */
+  chanKey: string;
+  /** 网络类型：4G、5G、NB-IoT */
+  netModel: number;
+  /** 备注 */
+  remark: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新时间 */
+  updatedAt: string;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+}
+
+/** 获取卡信息表列表 请求参数 */
+export interface TSimCardInfoListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 运营商卡状态 */
+  bossCardStatus?: number;
+  /** 时间类型 */
+  timeType?: number;
+  /** 时间段 */
+  time?: string[];
+  /** 查询条件 */
+  condition?: string;
+  /** 起始号段 */
+  startNum?: string;
+  /** 结束号段 */
+  endNum?: string;
+  /** 维度 */
+  dimension?: number;
+  /** 维度状态 */
+  dimensionStatus?: string;
+  /** 维度值 */
+  dimensionValue?: string;
+  /** 排序值 */
+  sortValue?: number;
+  /** 排序类型 */
+  sortType?: number;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 当前套餐编码 */
+  currentPackageCode?: string;
+  /** 卡号 */
+  cardValue?: string;
+  /** 备注 */
+  remark?: string;
+  /** IMEI */
+  imei?: string;
+  /** 渠道客户ID */
+  deptId?: number;
+  /** 主键ID */
+  id?: number;
+  /** ICCID */
+  iccid?: string;
+  /** MSISDN/卡号 */
+  msisdn?: string;
+  /** IMSI */
+  imsi?: string;
+  /** 套餐状态：0 无套餐，1待生效，2生效中，3已过期 */
+  packageStatus?: number;
+  /** 数据服务状态：1启用、0禁用 */
+  dataServiceStatus?: number;
+  /** 短信服务状态：1启用、0禁用 */
+  smsServiceStatus?: number;
+  /** 语音服务状态：1启用、0禁用 */
+  voiceServiceStatus?: number;
+  /** 国漫服务状态：1启用、0禁用 */
+  roamServiceStatus?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取卡信息表列表 响应 */
+export type TSimCardInfoListRes = GlobalListRes<TSimCardInfoModel>;
+
+/** 导出卡信息表列表 请求参数 */
+export type TSimCardInfoExportParam = TSimCardInfoListParam;
+
+/** 修改/新增卡信息表 请求参数 */
+export interface TSimCardInfoEditParam {
+  /** 主键ID */
+  id?: number;
+  /** 备注 */
+  remark?: string;
+}
+
+/** 获取卡信息表指定信息 请求参数 */
+export interface TSimCardInfoViewParam {
+  /** 主键ID */
+  id?: number;
+  /** ICCID */
+  iccid?: string;
+  /** MSISDN/卡号 */
+  msisdn?: string;
+}
+
+/** 获取卡信息表指定信息 响应 */
+export type TSimCardInfoViewRes = TSimCardInfoViewModel;
+
+/** 删除卡信息表 请求参数 */
+export interface TSimCardInfoDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
+
+/** 查询SIM卡会话 请求参数 */
+export interface TSimCardInfoQuerySimSessionParam {
+  /** ICCID */
+  iccid: string;
+}
+
+/** 查询SIM卡会话 响应项 */
+export interface TSimCardInfoQuerySimSessionModel {
+  /** APN */
+  apnId: string;
+  /** 实时IMEI */
+  imei?: string;
+  /** 接入方式 */
+  rat: string;
+  /** IPv4地址 */
+  ipv4: string;
+  /** IPv6地址 */
+  ipv6: string;
+  /** IPv6前缀 */
+  ipv6Prefix: string;
+  /** 在线状态 */
+  status: string;
+  /** 会话创建时间 */
+  createTime: string;
+}
+
+/** 查询SIM卡会话 响应 */
+export type TSimCardInfoQuerySimSessionRes =
+  null | TSimCardInfoQuerySimSessionModel;
+
+/** 查询SIM卡状态 请求参数 */
+export type TSimCardInfoQuerySimStatusParam =
+  TSimCardInfoQuerySimSessionParam;
+
+/** 查询SIM卡状态 响应项 */
+export interface TSimCardInfoQuerySimStatusModel {
+  /** 卡状态 */
+  cardStatus?: number;
+  /** 最后变更时间 */
+  lastChangeDate?: string;
+}
+
+/** 查询SIM卡状态 响应 */
+export type TSimCardInfoQuerySimStatusRes =
+  null | TSimCardInfoQuerySimStatusModel;
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardLifecycle/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardLifecycle/type.ts
new file mode 100644
index 0000000..d0c155b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardLifecycle/type.ts
@@ -0,0 +1,20 @@
+export interface TSimCardLifecycleExcelSubmitParam {
+  /** Excel 文件 */
+  file: File;
+}
+
+export interface TSimCardLifecycleInputSubmitParam {
+  /** 每行填写 ICCID，或 ICCID MSISDN IMSI */
+  input: string;
+}
+
+export interface TSimCardLifecycleSubmitRes {
+  /** 批次编号 */
+  batchNo: string;
+  /** 批次类型 */
+  batchType: number;
+  /** 异步处理状态 */
+  batchAsyncStatus: number;
+  /** 提交总行数 */
+  total: number;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardQuery/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardQuery/index.ts
new file mode 100644
index 0000000..dcb0ebb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardQuery/index.ts
@@ -0,0 +1,107 @@
+import type {
+  ExportColumn,
+  SimCardQueryExportParam,
+  SimCardQuerySubmitRes,
+  SimCardUsageHistoryColumnsRes,
+  SimCardUsageHistoryDeptOptionsRes,
+  SimCardUsageHistoryExportParam,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+/** 卡基础信息查询：下载 Excel 模板 */
+export function DownloadBaseTemplate() {
+  return requestClient.download('/iot/tSimCardBaseQuery/template', {
+    responseReturn: 'raw',
+  });
+}
+
+/** 卡基础信息查询：可选导出列 */
+export function BaseColumns(): Promise<{ items: ExportColumn[] }> {
+  return requestClient.get('/iot/tSimCardBaseQuery/columns');
+}
+
+/**
+ * 两个导出接口共用的 multipart 组装。
+ * 提交字段只在这里维护，避免 BaseExport / UsageExport 各写一份后口径漂移。
+ */
+function buildExportForm(params: SimCardQueryExportParam): FormData {
+  const form = new FormData();
+  form.append('mode', params.mode);
+  form.append('exportColumnsJson', JSON.stringify(params.exportColumns ?? []));
+  if (params.batchInput !== undefined) {
+    form.append('batchInput', params.batchInput);
+  }
+  if (params.dimension !== undefined) {
+    form.append('dimension', params.dimension);
+  }
+  if (params.startNum !== undefined) {
+    form.append('startNum', params.startNum);
+  }
+  if (params.endNum !== undefined) {
+    form.append('endNum', params.endNum);
+  }
+  return form;
+}
+
+/**
+ * 卡基础信息查询：提交导出。
+ * 统一走 multipart：Excel 模式带 file，其余模式只带表单字段，
+ * 保持三个输入方式的请求路径一致。
+ */
+export function BaseExport(
+  params: SimCardQueryExportParam & { file?: File },
+): Promise<SimCardQuerySubmitRes> {
+  const form = buildExportForm(params);
+  if (params.file) {
+    form.append('file', params.file);
+  }
+  return requestClient.post('/iot/tSimCardBaseQuery/export', form, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+    timeout: 60_000,
+  });
+}
+
+/** 月历史用量查询：下载 Excel 模板 */
+export function DownloadUsageTemplate() {
+  return requestClient.download('/iot/tSimCardUsageHistory/template', {
+    responseReturn: 'raw',
+  });
+}
+
+/** 月历史用量查询：固定列与近12个月月份清单 */
+export function UsageColumns(): Promise<SimCardUsageHistoryColumnsRes> {
+  return requestClient.get('/iot/tSimCardUsageHistory/columns');
+}
+
+/** 月历史用量查询：可选公司，展示范围由数据权限决定 */
+export function UsageDeptOptions(): Promise<SimCardUsageHistoryDeptOptionsRes> {
+  return requestClient.get('/iot/tSimCardUsageHistory/deptOptions');
+}
+
+/** 月历史用量查询：提交导出 */
+export function UsageExport(
+  params: SimCardUsageHistoryExportParam & { file?: File },
+): Promise<SimCardQuerySubmitRes> {
+  // deptId 是 dept 模式的必填项，缺省时不能悄悄提交一个没有公司范围的导出请求。
+  if (params.mode === 'dept' && !(Number(params.deptId) > 0)) {
+    return Promise.reject(new Error('按所属公司查询时必须选择具体公司'));
+  }
+  const form = buildExportForm(params);
+  if (params.deptId !== undefined && params.deptId > 0) {
+    form.append('deptId', String(params.deptId));
+  }
+  if (params.expireStartTime) {
+    form.append('expireStartTime', params.expireStartTime);
+  }
+  if (params.expireEndTime) {
+    form.append('expireEndTime', params.expireEndTime);
+  }
+  if (params.file) {
+    form.append('file', params.file);
+  }
+  return requestClient.post('/iot/tSimCardUsageHistory/export', form, {
+    headers: { 'Content-Type': 'multipart/form-data' },
+    timeout: 60_000,
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardQuery/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardQuery/type.ts
new file mode 100644
index 0000000..4be8b04
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardQuery/type.ts
@@ -0,0 +1,55 @@
+export interface ExportColumn {
+  /** 列表模型字段名，后端按它取值 */
+  field: string;
+  /** 表头文字 */
+  label: string;
+  dictType?: string;
+}
+
+export type QueryMode = 'excel' | 'input' | 'range' | 'dept';
+
+export interface SimCardQueryExportParam {
+  /** 输入方式 */
+  mode: QueryMode;
+  /** 批量输入内容，每行 ICCID 或 ICCID MSISDN IMSI */
+  batchInput?: string;
+  /** 连号维度：iccid / msisdn / imsi */
+  dimension?: string;
+  startNum?: string;
+  endNum?: string;
+  /** 导出列，后端只认白名单内的字段 */
+  exportColumns?: ExportColumn[];
+}
+
+export interface SimCardUsageHistoryExportParam extends SimCardQueryExportParam {
+  /** 所属公司部门ID，mode=dept 时必填 */
+  deptId?: number;
+  /** 到期日期起（含），仅 mode=dept 生效 */
+  expireStartTime?: string;
+  /** 到期日期止（含），仅 mode=dept 生效 */
+  expireEndTime?: string;
+}
+
+export interface SimCardQuerySubmitRes {
+  taskId: number;
+  taskNo: string;
+  total: number;
+}
+
+export interface SimCardQueryDeptOption {
+  deptId: number;
+  deptName: string;
+  cardCount: number;
+  parentId: number;
+}
+
+export interface SimCardUsageHistoryColumnsRes {
+  items: ExportColumn[];
+  months: string[];
+}
+
+export interface SimCardUsageHistoryDeptOptionsRes {
+  items: SimCardQueryDeptOption[];
+  /** 当前登录用户所属部门，用于公司下拉默认值 */
+  currentDeptId: number;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRenew/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRenew/index.test.ts
new file mode 100644
index 0000000..6114ffc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRenew/index.test.ts
@@ -0,0 +1,88 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const get = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    download,
+    get,
+    post,
+    upload,
+  },
+}));
+
+describe('tSimCardRenew api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    get.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads excel renew template from backend contract path', async () => {
+    const { DownloadTemplate } = await import('./index');
+
+    DownloadTemplate();
+
+    expect(download).toHaveBeenCalledWith('/iot/tSimCardRenew/excel/template', {
+      responseReturn: 'raw',
+    });
+  });
+
+  it('submits excel renew as file-only form data', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'renew.xlsx');
+
+    ExcelSubmit({ file });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardRenew/excel/submit',
+      { file },
+      {
+        timeout: 60_000,
+      },
+    );
+  });
+
+  it('prepares input renew with backend contract path', async () => {
+    const { InputPrepare } = await import('./index');
+    const params = {
+      input: '8986000000000000001\n8986000000000000002',
+    };
+
+    InputPrepare(params);
+
+    expect(post).toHaveBeenCalledWith('/iot/tSimCardRenew/input/prepare', {
+      ...params,
+    });
+  });
+
+  it('confirms renew prepare batch with backend contract path', async () => {
+    const { BatchConfirm } = await import('./index');
+    const params = {
+      batchNo: 'RN202607060001',
+      durationMonths: 6,
+      offlineContractCompleted: true,
+    };
+
+    BatchConfirm(params);
+
+    expect(post).toHaveBeenCalledWith('/iot/tSimCardRenew/batch/confirm', {
+      ...params,
+    });
+  });
+
+  it('polls renew prepare result with backend contract path', async () => {
+    const { PrepareResult } = await import('./index');
+    const batchNo = 'RN202607060001';
+
+    PrepareResult(batchNo);
+
+    expect(get).toHaveBeenCalledWith('/iot/tSimCardRenew/prepare/result', {
+      params: { batchNo },
+    });
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRenew/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRenew/index.ts
new file mode 100644
index 0000000..e7a016c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRenew/index.ts
@@ -0,0 +1,52 @@
+import type {
+  TSimCardRenewBatchConfirmParam,
+  TSimCardRenewBatchConfirmRes,
+  TSimCardRenewBatchPrepareRes,
+  TSimCardRenewBatchPrepareResult,
+  TSimCardRenewExcelSubmitParam,
+  TSimCardRenewExcelSubmitRes,
+  TSimCardRenewInputPrepareParam,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardRenew/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(
+  params: TSimCardRenewExcelSubmitParam,
+): Promise<TSimCardRenewExcelSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardRenew/excel/submit',
+    {
+      file: params.file,
+    },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function InputPrepare(params: TSimCardRenewInputPrepareParam) {
+  return requestClient.post<TSimCardRenewBatchPrepareRes>(
+    '/iot/tSimCardRenew/input/prepare',
+    { ...params },
+  );
+}
+
+export function BatchConfirm(params: TSimCardRenewBatchConfirmParam) {
+  return requestClient.post<TSimCardRenewBatchConfirmRes>(
+    '/iot/tSimCardRenew/batch/confirm',
+    { ...params },
+  );
+}
+
+export function PrepareResult(batchNo: string) {
+  return requestClient.get<TSimCardRenewBatchPrepareResult>(
+    '/iot/tSimCardRenew/prepare/result',
+    { params: { batchNo } },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRenew/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRenew/type.ts
new file mode 100644
index 0000000..e939fb0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRenew/type.ts
@@ -0,0 +1,127 @@
+export interface TSimCardRenewInputPrepareParam {
+  input: string;
+  [property: string]: any;
+}
+
+export interface TSimCardRenewExcelSubmitParam {
+  file: File;
+}
+
+export interface TSimCardRenewExcelSubmitRes {
+  batchNo?: string;
+  batchType?: number;
+  resultDownloadId?: number;
+  resultFileOssId?: number;
+  status?: string;
+  [property: string]: any;
+}
+
+export interface TSimCardRenewBatchPrepareRes {
+  agentDefaultPriceId?: number;
+  batchNo: string;
+  batchType?: number;
+  customerAgentId?: number;
+  customerName?: string;
+  failCount?: number;
+  failedItems?: TSimCardRenewPrepareFailedItem[];
+  failedItemsTruncated?: boolean;
+  packageCode?: string;
+  packageName?: string;
+  billingMethod?: number;
+  renewDurationUnit?: 'month' | 'year' | string;
+  renewDurationUnitText?: string;
+  durationValue?: number;
+  durationYears?: number;
+  giftDurationMonths?: number;
+  priceSource?: string;
+  quantity?: number;
+  renewableDurationOptions?: number[];
+  renewBeginDate?: string;
+  renewBeginDateMax?: string;
+  renewBeginDateMin?: string;
+  renewUnitPrice?: number | string;
+  renewablePackageCodes?: string[];
+  renewablePackages?: TSimCardRenewPackageOption[];
+  resultDownloadId?: number;
+  resultFileOssId?: number;
+  status?: string;
+  targetPriceId?: number;
+  total?: number;
+  validCount?: number;
+  isTopDept?: boolean;
+  defaultPaymentMode?: 'balance' | 'offline' | string;
+  availableBalance?: number | string;
+  sameRenewBeginDate?: boolean;
+  [property: string]: any;
+}
+
+export interface TSimCardRenewPrepareFailedItem {
+  iccid?: string;
+  reason?: string;
+}
+
+export interface TSimCardRenewPackageOption {
+  packageCode?: string;
+  packageName?: string;
+  renewUnitPrice?: number | string;
+  renewableDurationOptions?: number[];
+}
+
+export interface TSimCardRenewBatchConfirmParam {
+  adminNote?: string;
+  batchNo: string;
+  packageCode?: string;
+  buyerNote?: string;
+  durationYears?: number;
+  durationMonths: number;
+  giftDurationMonths?: number;
+  offlineContractCompleted: boolean;
+  paymentMode?: 'balance' | 'offline' | string;
+  packageBeginTime?: string;
+  packageEndTime?: string;
+  renewDate?: string;
+  remark?: string;
+  [property: string]: any;
+}
+
+export interface TSimCardRenewBatchConfirmRes {
+  batchNo: string;
+  batchType?: number;
+  billingMethod?: number;
+  renewDurationUnit?: 'month' | 'year' | string;
+  renewDurationUnitText?: string;
+  durationYears?: number;
+  durationMonths?: number;
+  giftDurationMonths?: number;
+  orderSn?: string;
+  packageCode?: string;
+  packageName?: string;
+  paymentMode?: string;
+  payAmount?: number | string;
+  payType?: number;
+  availableBalance?: number | string;
+  balanceDetailSerialNo?: string;
+  packageBeginTime?: string;
+  packageEndTime?: string;
+  quantity?: number;
+  renewDate?: string;
+  renewUnitPrice?: number | string;
+  status?: string;
+  totalAmount?: number | string;
+  prepareChanged?: boolean;
+  priceChanged?: boolean;
+  message?: string;
+  [property: string]: any;
+}
+
+export type TSimCardRenewBatchAsyncStatus = number;
+
+export interface TSimCardRenewBatchPrepareResult {
+  batchAsyncStatus: TSimCardRenewBatchAsyncStatus;
+  batchInfo?: TSimCardRenewBatchPrepareRes;
+  batchNo: string;
+  failReason?: string;
+  runResult?: number;
+  status: string;
+  [property: string]: any;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRestart/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRestart/index.test.ts
new file mode 100644
index 0000000..bd41041
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRestart/index.test.ts
@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    download,
+    post,
+    upload,
+  },
+}));
+
+describe('tSimCardRestart api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads the restart template from the backend contract path', async () => {
+    const { DownloadTemplate } = await import('./index');
+
+    DownloadTemplate();
+
+    expect(download).toHaveBeenCalledWith(
+      '/iot/tSimCardRestart/excel/template',
+      {
+        responseReturn: 'raw',
+      },
+    );
+  });
+
+  it('submits an excel restart batch as file-only form data', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'restart.xlsx');
+
+    ExcelSubmit({ file });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardRestart/excel/submit',
+      { file },
+      { timeout: 60_000 },
+    );
+  });
+
+  it('submits an input restart batch from the backend contract path', async () => {
+    const { InputSubmit } = await import('./index');
+    const params = {
+      input: '8986000000000000001 14000000001 460001000000001',
+    };
+
+    InputSubmit(params);
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardRestart/input/submit',
+      params,
+    );
+  });
+});
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRestart/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRestart/index.ts
new file mode 100644
index 0000000..aaee594
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardRestart/index.ts
@@ -0,0 +1,33 @@
+import type {
+  TSimCardLifecycleExcelSubmitParam,
+  TSimCardLifecycleInputSubmitParam,
+  TSimCardLifecycleSubmitRes,
+} from '../tSimCardLifecycle/type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardRestart/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(
+  params: TSimCardLifecycleExcelSubmitParam,
+): Promise<TSimCardLifecycleSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardRestart/excel/submit',
+    {
+      file: params.file,
+    },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function InputSubmit(
+  params: TSimCardLifecycleInputSubmitParam,
+): Promise<TSimCardLifecycleSubmitRes> {
+  return requestClient.post('/iot/tSimCardRestart/input/submit', params);
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStart/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStart/index.test.ts
new file mode 100644
index 0000000..a720347
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStart/index.test.ts
@@ -0,0 +1,58 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    download,
+    post,
+    upload,
+  },
+}));
+
+describe('tSimCardStart api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads the resume template from the backend contract path', async () => {
+    const { DownloadTemplate } = await import('./index');
+
+    DownloadTemplate();
+
+    expect(download).toHaveBeenCalledWith('/iot/tSimCardStart/excel/template', {
+      responseReturn: 'raw',
+    });
+  });
+
+  it('submits an excel resume batch as file-only form data', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'resume.xlsx');
+
+    ExcelSubmit({ file });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardStart/excel/submit',
+      { file },
+      { timeout: 60_000 },
+    );
+  });
+
+  it('submits an input resume batch from the backend contract path', async () => {
+    const { InputSubmit } = await import('./index');
+    const params = {
+      input: '8986000000000000001',
+    };
+
+    InputSubmit(params);
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardStart/input/submit',
+      params,
+    );
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStart/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStart/index.ts
new file mode 100644
index 0000000..23b0eb5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStart/index.ts
@@ -0,0 +1,33 @@
+import type {
+  TSimCardLifecycleExcelSubmitParam,
+  TSimCardLifecycleInputSubmitParam,
+  TSimCardLifecycleSubmitRes,
+} from '../tSimCardLifecycle/type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardStart/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(
+  params: TSimCardLifecycleExcelSubmitParam,
+): Promise<TSimCardLifecycleSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardStart/excel/submit',
+    {
+      file: params.file,
+    },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function InputSubmit(
+  params: TSimCardLifecycleInputSubmitParam,
+): Promise<TSimCardLifecycleSubmitRes> {
+  return requestClient.post('/iot/tSimCardStart/input/submit', params);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStop/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStop/index.test.ts
new file mode 100644
index 0000000..411a62b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStop/index.test.ts
@@ -0,0 +1,55 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    download,
+    post,
+    upload,
+  },
+}));
+
+describe('tSimCardStop api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads the stop template from the backend contract path', async () => {
+    const { DownloadTemplate } = await import('./index');
+
+    DownloadTemplate();
+
+    expect(download).toHaveBeenCalledWith('/iot/tSimCardStop/excel/template', {
+      responseReturn: 'raw',
+    });
+  });
+
+  it('submits an excel stop batch as file-only form data', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'stop.xlsx');
+
+    ExcelSubmit({ file });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardStop/excel/submit',
+      { file },
+      { timeout: 60_000 },
+    );
+  });
+
+  it('submits an input stop batch from the backend contract path', async () => {
+    const { InputSubmit } = await import('./index');
+    const params = {
+      input: '8986000000000000001 14000000001 460001000000001',
+    };
+
+    InputSubmit(params);
+
+    expect(post).toHaveBeenCalledWith('/iot/tSimCardStop/input/submit', params);
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStop/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStop/index.ts
new file mode 100644
index 0000000..a8a5a8d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardStop/index.ts
@@ -0,0 +1,33 @@
+import type {
+  TSimCardLifecycleExcelSubmitParam,
+  TSimCardLifecycleInputSubmitParam,
+  TSimCardLifecycleSubmitRes,
+} from '../tSimCardLifecycle/type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardStop/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(
+  params: TSimCardLifecycleExcelSubmitParam,
+): Promise<TSimCardLifecycleSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardStop/excel/submit',
+    {
+      file: params.file,
+    },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function InputSubmit(
+  params: TSimCardLifecycleInputSubmitParam,
+): Promise<TSimCardLifecycleSubmitRes> {
+  return requestClient.post('/iot/tSimCardStop/input/submit', params);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardTrafficCutoff/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardTrafficCutoff/index.test.ts
new file mode 100644
index 0000000..1f4a578
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardTrafficCutoff/index.test.ts
@@ -0,0 +1,132 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const get = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: { download, get, post, upload },
+}));
+
+describe('tSimCardTrafficCutoff api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    get.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads the traffic cutoff template', async () => {
+    const { DownloadTemplate } = await import('./index');
+
+    DownloadTemplate();
+
+    expect(download).toHaveBeenCalledWith(
+      '/iot/tSimCardTrafficCutoff/excel/template',
+      { responseReturn: 'raw' },
+    );
+  });
+
+  it('submits an excel traffic cutoff batch', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'trafficCutoff.xlsx');
+
+    ExcelSubmit({
+      file,
+      trafficCutoffCrossMonthHold: 1,
+      trafficCutoffStatus: 1,
+      trafficCutoffThreshold: 1024.125,
+    });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardTrafficCutoff/excel/submit',
+      {
+        file,
+        trafficCutoffCrossMonthHold: 1,
+        trafficCutoffStatus: 1,
+        trafficCutoffThreshold: 1024.125,
+      },
+      { timeout: 60_000 },
+    );
+  });
+
+  it('submits an input traffic cutoff batch', async () => {
+    const { InputSubmit } = await import('./index');
+
+    InputSubmit({
+      input: '8986000000000000001',
+      trafficCutoffCrossMonthHold: 0,
+      trafficCutoffStatus: 2,
+      trafficCutoffThreshold: 2048,
+    });
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardTrafficCutoff/input/submit',
+      {
+        input: '8986000000000000001',
+        trafficCutoffCrossMonthHold: 0,
+        trafficCutoffStatus: 2,
+        trafficCutoffThreshold: 2048,
+      },
+    );
+  });
+
+  it('queries configured cards', async () => {
+    const { List } = await import('./index');
+    const params = { page: 1, pageSize: 20, cardValue: '8986' };
+
+    List(params);
+
+    expect(get).toHaveBeenCalledWith('/iot/tSimCardTrafficCutoff/list', {
+      params,
+    });
+  });
+
+  it('exports configured cards', async () => {
+    const { Export } = await import('./index');
+    const params = {
+      page: 1,
+      pageSize: 2000,
+      deptId: 12,
+      trafficCutoffStatus: 1 as const,
+    };
+
+    Export(params);
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardTrafficCutoff/export',
+      params,
+      { responseType: 'blob' },
+    );
+  });
+
+  it('updates a traffic cutoff configuration', async () => {
+    const { Edit } = await import('./index');
+    const params = {
+      id: 7,
+      trafficCutoffCrossMonthHold: 1 as const,
+      iccid: '8986000000000000001',
+      trafficCutoffStatus: 1 as const,
+      trafficCutoffThreshold: 1024.5,
+    };
+
+    Edit(params);
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardTrafficCutoff/edit',
+      params,
+    );
+  });
+
+  it('clears a traffic cutoff configuration', async () => {
+    const { Delete } = await import('./index');
+
+    Delete({ id: 7, iccid: '8986000000000000001' });
+
+    expect(post).toHaveBeenCalledWith('/iot/tSimCardTrafficCutoff/delete', {
+      id: 7,
+      iccid: '8986000000000000001',
+    });
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardTrafficCutoff/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardTrafficCutoff/index.ts
new file mode 100644
index 0000000..a2875a1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardTrafficCutoff/index.ts
@@ -0,0 +1,67 @@
+import type {
+  TSimCardTrafficCutoffDeleteParam,
+  TSimCardTrafficCutoffEditParam,
+  TSimCardTrafficCutoffExcelSubmitParam,
+  TSimCardTrafficCutoffInputSubmitParam,
+  TSimCardTrafficCutoffListParam,
+  TSimCardTrafficCutoffListRes,
+  TSimCardTrafficCutoffSubmitRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardTrafficCutoff/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(
+  params: TSimCardTrafficCutoffExcelSubmitParam,
+): Promise<TSimCardTrafficCutoffSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardTrafficCutoff/excel/submit',
+    {
+      file: params.file,
+      trafficCutoffStatus: params.trafficCutoffStatus,
+      trafficCutoffThreshold: params.trafficCutoffThreshold,
+      trafficCutoffCrossMonthHold: params.trafficCutoffCrossMonthHold,
+    },
+    { timeout: 60_000 },
+  );
+}
+
+export function InputSubmit(
+  params: TSimCardTrafficCutoffInputSubmitParam,
+): Promise<TSimCardTrafficCutoffSubmitRes> {
+  return requestClient.post('/iot/tSimCardTrafficCutoff/input/submit', {
+    input: params.input,
+    trafficCutoffStatus: params.trafficCutoffStatus,
+    trafficCutoffThreshold: params.trafficCutoffThreshold,
+    trafficCutoffCrossMonthHold: params.trafficCutoffCrossMonthHold,
+  });
+}
+
+export function List(params: TSimCardTrafficCutoffListParam) {
+  return requestClient.get<TSimCardTrafficCutoffListRes>(
+    '/iot/tSimCardTrafficCutoff/list',
+    { params },
+  );
+}
+
+export function Export(params: TSimCardTrafficCutoffListParam) {
+  return requestClient.post<Blob>('/iot/tSimCardTrafficCutoff/export', params, {
+    responseType: 'blob',
+  });
+}
+
+export function Edit(params: TSimCardTrafficCutoffEditParam) {
+  return requestClient.post<unknown>('/iot/tSimCardTrafficCutoff/edit', params);
+}
+
+export function Delete(params: TSimCardTrafficCutoffDeleteParam) {
+  return requestClient.post<unknown>(
+    '/iot/tSimCardTrafficCutoff/delete',
+    params,
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardTrafficCutoff/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardTrafficCutoff/type.ts
new file mode 100644
index 0000000..b6f4df8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardTrafficCutoff/type.ts
@@ -0,0 +1,63 @@
+import type { GlobalListRes } from '#/types/global';
+
+export interface TSimCardTrafficCutoffExcelSubmitParam {
+  trafficCutoffCrossMonthHold: 0 | 1;
+  file: File;
+  trafficCutoffStatus: 0 | 1 | 2;
+  trafficCutoffThreshold: number;
+}
+
+export interface TSimCardTrafficCutoffInputSubmitParam {
+  trafficCutoffCrossMonthHold: 0 | 1;
+  input: string;
+  trafficCutoffStatus: 0 | 1 | 2;
+  trafficCutoffThreshold: number;
+}
+
+export interface TSimCardTrafficCutoffSubmitRes {
+  batchNo: string;
+  batchType: number;
+  batchAsyncStatus: number;
+  total: number;
+}
+
+export interface TSimCardTrafficCutoffModel {
+  trafficCutoffCrossMonthHold: 0 | 1;
+  id: number;
+  iccid: string;
+  msisdn: string;
+  imsi: string;
+  imei: string;
+  chanName?: string;
+  deptName?: string;
+  packageName?: string;
+  bossCardStatus?: number;
+  trafficCutoffStatus: 1 | 2;
+  trafficCutoffThreshold: number;
+}
+
+export interface TSimCardTrafficCutoffListParam {
+  includeUnconfigured?: boolean;
+  page: number;
+  pageSize: number;
+  cardValue?: string;
+  imei?: string;
+  deptId?: number | string;
+  trafficCutoffStatus?: 1 | 2;
+}
+
+export type TSimCardTrafficCutoffListRes =
+  GlobalListRes<TSimCardTrafficCutoffModel>;
+
+export interface TSimCardTrafficCutoffEditParam {
+  trafficCutoffCrossMonthHold: 0 | 1;
+  id: number;
+  iccid: string;
+  trafficCutoffStatus: 1 | 2;
+  trafficCutoffThreshold: number;
+}
+
+export interface TSimCardTrafficCutoffDeleteParam {
+  id: number;
+  iccid: string;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardUnsub/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardUnsub/index.test.ts
new file mode 100644
index 0000000..34fcd20
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardUnsub/index.test.ts
@@ -0,0 +1,126 @@
+import type { TSimCardUnsubSubmitRes } from './type';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    download,
+    post,
+    upload,
+  },
+}));
+
+describe('tSimCardUnsub api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads excel unsubscribe template from backend contract path', async () => {
+    const { DownloadTemplate } = await import('./index');
+
+    DownloadTemplate();
+
+    expect(download).toHaveBeenCalledWith('/iot/tSimCardUnsub/excel/template', {
+      responseReturn: 'raw',
+    });
+  });
+
+  it('submits excel unsubscribe as file-only form data', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'unsubscribe.xlsx');
+
+    ExcelSubmit({ file });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardUnsub/excel/submit',
+      { file },
+      {
+        timeout: 60_000,
+      },
+    );
+  });
+
+  it('submits input unsubscribe from backend contract path', async () => {
+    const { InputSubmit } = await import('./index');
+    const params = {
+      input: '8986000000000000000',
+      remark: 'unsubscribe remark',
+    };
+
+    InputSubmit(params);
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardUnsub/input/submit',
+      params,
+    );
+  });
+
+  it('submits range unsubscribe from backend contract path', async () => {
+    const { RangeSubmit } = await import('./index');
+    const params = {
+      endIccid: '8986000000000000009',
+      endImsi: '460000000000009',
+      endMsisdn: '13000000009',
+      remark: 'unsubscribe remark',
+      startIccid: '8986000000000000001',
+      startImsi: '460000000000001',
+      startMsisdn: '13000000001',
+    };
+
+    RangeSubmit(params);
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardUnsub/range/submit',
+      params,
+    );
+  });
+
+  it('exposes batchAsyncStatus on the submit response type so async Pending is representable', async () => {
+    const res: TSimCardUnsubSubmitRes = {
+      batchAsyncStatus: 0,
+      batchNo: 'B202607210001',
+      batchType: 1,
+    };
+
+    expect(res.batchAsyncStatus).toBe(0);
+    expect(res.batchNo).toBe('B202607210001');
+  });
+
+  it('keeps excel/input/range submit endpoints pointing at the backend contract paths', async () => {
+    const { ExcelSubmit, InputSubmit, RangeSubmit } = await import('./index');
+    const file = new File(['iccid'], 'unsubscribe.xlsx');
+
+    ExcelSubmit({ file });
+    InputSubmit({ input: '8986000000000000000' });
+    RangeSubmit({
+      endIccid: '8986000000000000009',
+      endImsi: '460000000000009',
+      endMsisdn: '13000000009',
+      startIccid: '8986000000000000001',
+      startImsi: '460000000000001',
+      startMsisdn: '13000000001',
+    });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardUnsub/excel/submit',
+      { file },
+      { timeout: 60_000 },
+    );
+    expect(post).toHaveBeenCalledWith('/iot/tSimCardUnsub/input/submit', {
+      input: '8986000000000000000',
+    });
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardUnsub/range/submit',
+      expect.objectContaining({
+        startIccid: '8986000000000000001',
+        endIccid: '8986000000000000009',
+      }),
+    );
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardUnsub/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardUnsub/index.ts
new file mode 100644
index 0000000..85c71e9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardUnsub/index.ts
@@ -0,0 +1,38 @@
+import type {
+  TSimCardUnsubExcelSubmitParam,
+  TSimCardUnsubInputSubmitParam,
+  TSimCardUnsubRangeSubmitParam,
+  TSimCardUnsubSubmitRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardUnsub/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(
+  params: TSimCardUnsubExcelSubmitParam,
+): Promise<TSimCardUnsubSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimCardUnsub/excel/submit',
+    { file: params.file },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function InputSubmit(
+  params: TSimCardUnsubInputSubmitParam,
+): Promise<TSimCardUnsubSubmitRes> {
+  return requestClient.post('/iot/tSimCardUnsub/input/submit', params);
+}
+
+export function RangeSubmit(
+  params: TSimCardUnsubRangeSubmitParam,
+): Promise<TSimCardUnsubSubmitRes> {
+  return requestClient.post('/iot/tSimCardUnsub/range/submit', params);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardUnsub/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardUnsub/type.ts
new file mode 100644
index 0000000..3b8d672
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimCardUnsub/type.ts
@@ -0,0 +1,58 @@
+/** 提交Excel卡退订请求参数 */
+export interface TSimCardUnsubExcelSubmitParam {
+  /** Excel文件 */
+  file: File;
+}
+
+/** 提交批量输入卡退订请求参数 */
+export interface TSimCardUnsubInputSubmitParam {
+  /** 批量输入ICCID文本 */
+  input: string;
+  /** 退订备注 */
+  remark?: string;
+  [property: string]: any;
+}
+
+/** 提交连号卡退订请求参数 */
+export interface TSimCardUnsubRangeSubmitParam {
+  /** 结束ICCID */
+  endIccid: string;
+  /** 结束IMSI */
+  endImsi: string;
+  /** 结束MSISDN */
+  endMsisdn: string;
+  /** 退订备注 */
+  remark?: string;
+  /** 起始ICCID */
+  startIccid: string;
+  /** 起始IMSI */
+  startImsi: string;
+  /** 起始MSISDN */
+  startMsisdn: string;
+  [property: string]: any;
+}
+
+/** 卡退订提交响应 */
+export interface TSimCardUnsubSubmitRes {
+  /** 批次异步处理状态（Pending 等） */
+  batchAsyncStatus?: number;
+  /** 批次号 */
+  batchNo?: string;
+  /** 批次类型 */
+  batchType?: number;
+  /** 失败行数 */
+  failCount?: number;
+  /** 实际退订数量 */
+  quantity?: number;
+  /** 结果下载任务ID */
+  resultDownloadId?: number;
+  /** 结果文件OSS ID */
+  resultFileOssId?: number;
+  /** 导入状态 */
+  status?: string;
+  /** 解析总行数 */
+  total?: number;
+  /** 校验通过行数 */
+  validCount?: number;
+  [property: string]: any;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimPoolBindPackage/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimPoolBindPackage/index.ts
new file mode 100644
index 0000000..ed0e945
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimPoolBindPackage/index.ts
@@ -0,0 +1,96 @@
+import type {
+  TSimPoolAddPackageBatchConfirmParam,
+  TSimPoolAddPackageBatchConfirmRes,
+  TSimPoolAddPackageOptionsRes,
+  TSimPoolAddPackagePrepareResult,
+  TSimPoolBindPackageAddPackageExcelSubmitParam,
+  TSimPoolBindPackageAddPackageInputPrepareParam,
+  TSimPoolBindPackageAddPackageInputPrepareRes,
+  TSimPoolBindPackageAddPackageInputSubmitParam,
+  TSimPoolBindPackageAddPackageSubmitRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadAddPackageTemplate() {
+  return requestClient.download(
+    '/iot/tSimPoolBindPackage/addPackage/excel/template',
+    {
+      responseReturn: 'raw',
+    },
+  );
+}
+
+export function AddPackageExcelSubmit(
+  params: TSimPoolBindPackageAddPackageExcelSubmitParam,
+): Promise<TSimPoolBindPackageAddPackageSubmitRes> {
+  return requestClient.upload(
+    '/iot/tSimPoolBindPackage/addPackage/excel/submit',
+    {
+      file: params.file,
+      manualConfirm: params.manualConfirm,
+    },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function AddPackageOptions(params: {
+  flowPoolCodes: string[];
+}): Promise<TSimPoolAddPackageOptionsRes> {
+  return requestClient.post(
+    '/iot/tSimPoolBindPackage/addPackage/options',
+    params,
+  );
+}
+
+export function AddPackagePaymentContext(): Promise<TSimPoolAddPackageOptionsRes> {
+  return requestClient.post(
+    '/iot/tSimPoolBindPackage/addPackage/payment-context',
+  );
+}
+
+export function AddPackageInputSubmit(
+  params: TSimPoolBindPackageAddPackageInputSubmitParam,
+): Promise<TSimPoolBindPackageAddPackageSubmitRes> {
+  return requestClient.post(
+    '/iot/tSimPoolBindPackage/addPackage/input/submit',
+    {
+      ...params,
+    },
+  );
+}
+
+export function AddPackageInputPrepare(
+  params: TSimPoolBindPackageAddPackageInputPrepareParam,
+): Promise<TSimPoolBindPackageAddPackageInputPrepareRes> {
+  return requestClient.post(
+    '/iot/tSimPoolBindPackage/addPackage/input/prepare',
+    {
+      ...params,
+    },
+  );
+}
+
+export function AddPackagePrepareResult(
+  batchNo: string,
+): Promise<TSimPoolAddPackagePrepareResult> {
+  return requestClient.get(
+    '/iot/tSimPoolBindPackage/addPackage/prepare/result',
+    {
+      params: { batchNo },
+    },
+  );
+}
+
+export function AddPackageBatchConfirm(
+  params: TSimPoolAddPackageBatchConfirmParam,
+): Promise<TSimPoolAddPackageBatchConfirmRes> {
+  return requestClient.post(
+    '/iot/tSimPoolBindPackage/addPackage/batch/confirm',
+    {
+      ...params,
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimPoolBindPackage/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimPoolBindPackage/type.ts
new file mode 100644
index 0000000..de1d563
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimPoolBindPackage/type.ts
@@ -0,0 +1,119 @@
+export type AddPackageEffectiveMode = 'current_month';
+export type AddPackagePaymentMode = 'balance' | 'offline';
+
+export interface TSimPoolBindPackageAddPackageExcelSubmitParam {
+  file: File;
+  paymentMode?: AddPackagePaymentMode;
+  offlineContractCompleted?: boolean;
+  manualConfirm?: boolean;
+}
+
+export interface TSimPoolBindPackageAddPackageInputSubmitParam {
+  input: string;
+  packageCode?: string;
+  effectiveMode?: AddPackageEffectiveMode | string;
+  remark?: string;
+  paymentMode?: AddPackagePaymentMode;
+  offlineContractCompleted?: boolean;
+  [property: string]: any;
+}
+
+export interface TSimPoolBindPackageAddPackageInputPrepareParam {
+  input: string;
+  packageCode?: string;
+  effectiveMode?: AddPackageEffectiveMode | string;
+  remark?: string;
+  [property: string]: any;
+}
+
+export interface TSimPoolBindPackageAddPackageSubmitRes {
+  batchAsyncStatus?: number;
+  batchNo?: string;
+  batchType?: number;
+  targetBatchType?: number;
+  total?: number;
+  validCount?: number;
+  failCount?: number;
+  [property: string]: any;
+}
+
+export type TSimPoolBindPackageAddPackageInputPrepareRes =
+  TSimPoolAddPackagePrepareResult;
+
+export interface TSimPoolAddPackageBatchConfirmParam {
+  batchNo: string;
+  packageCode?: string;
+  effectiveMode?: AddPackageEffectiveMode | string;
+  remark?: string;
+  paymentMode?: AddPackagePaymentMode | string;
+  offlineContractCompleted?: boolean;
+  [property: string]: any;
+}
+
+export interface TSimPoolAddPackageBatchConfirmRes {
+  batchAsyncStatus?: number;
+  batchNo?: string;
+  batchType?: number;
+  effectiveMode?: AddPackageEffectiveMode | string;
+  packageCode?: string;
+  status?: string;
+  [property: string]: any;
+}
+
+export interface TSimPoolAddPackagePaymentAccount {
+  payerDeptId: number;
+  targetCount: number;
+  requiredAmount: number | string;
+  availableBalance: number | string;
+  balanceEnough: boolean;
+}
+
+export interface TSimPoolAddPackageOption {
+  flowMb: number;
+  packageCode: string;
+  packageName: string;
+  unitPrice?: number | string;
+  totalAmount?: number | string;
+  priceAvailable?: boolean;
+  priceReason?: string;
+  paymentAccounts?: TSimPoolAddPackagePaymentAccount[];
+}
+
+export interface TSimPoolAddPackageOptionsRes {
+  items: TSimPoolAddPackageOption[];
+  isTopDept?: boolean;
+  defaultPaymentMode?: AddPackagePaymentMode | string;
+  availableBalance?: number | string;
+}
+
+export interface TSimPoolAddPackagePrepareResult {
+  availableBalance?: number | string;
+  batchAsyncStatus?: number;
+  batchInfo?: Record<string, any>;
+  batchNo?: string;
+  batchType?: number;
+  effectiveMode?: AddPackageEffectiveMode | string;
+  effectiveModeText?: string;
+  effectiveTime?: string;
+  expectedExpireTime?: string;
+  failCount?: number;
+  failReason?: string;
+  flowMb?: number | string;
+  isTopDept?: boolean;
+  packageCode?: string;
+  packageName?: string;
+  paymentAccounts?: TSimPoolAddPackagePaymentAccount[];
+  availablePackages?: TSimPoolAddPackageOption[];
+  quantity?: number;
+  runResult?: number;
+  snapshot?: Record<string, any>;
+  status?: string;
+  successCount?: number;
+  targetBatchType?: number;
+  total?: number;
+  totalAmount?: number | string;
+  unitPrice?: number | string;
+  validCount?: number;
+  defaultPaymentMode?: AddPackagePaymentMode | string;
+  [property: string]: any;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimWarningConfig/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimWarningConfig/index.ts
new file mode 100644
index 0000000..e3f69a8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimWarningConfig/index.ts
@@ -0,0 +1,48 @@
+import type {
+  TSimWarningConfigEmailCodeParam,
+  TSimWarningConfigExcelSubmitParam,
+  TSimWarningConfigInputSubmitParam,
+  TSimWarningConfigRangeSubmitParam,
+  TSimWarningConfigSubmitRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+export function DownloadTemplate(params?: { itemType?: number }) {
+  return requestClient.download('/iot/tSimWarningConfig/excel/template', {
+    params,
+    responseReturn: 'raw',
+  });
+}
+
+export function SendEmailCode(params: TSimWarningConfigEmailCodeParam) {
+  return requestClient.post('/iot/tSimWarningConfig/email/code', params);
+}
+
+export function ExcelSubmit(
+  params: TSimWarningConfigExcelSubmitParam,
+): Promise<TSimWarningConfigSubmitRes> {
+  const { file, ...data } = params;
+  return requestClient.upload(
+    '/iot/tSimWarningConfig/excel/submit',
+    {
+      file,
+      ...data,
+    },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+export function InputSubmit(
+  params: TSimWarningConfigInputSubmitParam,
+): Promise<TSimWarningConfigSubmitRes> {
+  return requestClient.post('/iot/tSimWarningConfig/input/submit', params);
+}
+
+export function RangeSubmit(
+  params: TSimWarningConfigRangeSubmitParam,
+): Promise<TSimWarningConfigSubmitRes> {
+  return requestClient.post('/iot/tSimWarningConfig/range/submit', params);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimWarningConfig/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimWarningConfig/type.ts
new file mode 100644
index 0000000..0534836
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tCommunication/tSimWarningConfig/type.ts
@@ -0,0 +1,47 @@
+export interface TSimWarningConfigCommonParam {
+  itemType?: number;
+  warnUnit: number;
+  firstWarn: number;
+  secondWarn?: number;
+  thirdWarn?: number;
+  warnMethods?: string;
+  warnPhones?: string;
+  warnEmails?: string;
+  warnEmailCode?: string;
+  autoAction?: number;
+  isEnabled?: number;
+  remark?: string;
+}
+
+export interface TSimWarningConfigEmailCodeParam {
+  captchaId: string;
+  captchaValue: string;
+  email: string;
+}
+
+export interface TSimWarningConfigExcelSubmitParam extends TSimWarningConfigCommonParam {
+  file: File;
+}
+
+export interface TSimWarningConfigInputSubmitParam extends TSimWarningConfigCommonParam {
+  input: string;
+}
+
+export interface TSimWarningConfigRangeSubmitParam extends TSimWarningConfigCommonParam {
+  endIccid: string;
+  endImsi: string;
+  endMsisdn: string;
+  startIccid: string;
+  startImsi: string;
+  startMsisdn: string;
+}
+
+export interface TSimWarningConfigSubmitRes {
+  batchAsyncStatus?: number;
+  batchNo?: string;
+  batchType?: number;
+  failCount?: number;
+  total?: number;
+  validCount?: number;
+  [property: string]: any;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tDashboard/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tDashboard/index.ts
new file mode 100644
index 0000000..e7189ae
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tDashboard/index.ts
@@ -0,0 +1,38 @@
+import type {
+  CardStatisticsRes,
+  CardStatusStatisticsRes,
+  FlowPoolUsageRes,
+  FlowUsageChartRes,
+  TopUsageCardsRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取卡片数据统计
+export function CardStatistics() {
+  return requestClient.get<CardStatisticsRes>('/home/cardStatistics');
+}
+
+// 获取卡状态统计
+export function CardStatusStatistics() {
+  return requestClient.get<CardStatusStatisticsRes>(
+    '/home/cardStatusStatistics',
+  );
+}
+
+// 获取流量使用图表数据
+export function FlowUsageChart(period: '1m' | '7d') {
+  return requestClient.get<FlowUsageChartRes>('/home/flowUsageChart', {
+    params: { period },
+  });
+}
+
+// 获取前一天流量使用前五名的卡片
+export function TopUsageCards() {
+  return requestClient.get<TopUsageCardsRes>('/home/topUsageCards');
+}
+
+// 获取流量池流量使用情况
+export function FlowPoolUsage() {
+  return requestClient.get<FlowPoolUsageRes>('/home/flowPoolUsage');
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tDashboard/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tDashboard/type.ts
new file mode 100644
index 0000000..69aea58
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tDashboard/type.ts
@@ -0,0 +1,64 @@
+/** 首页卡片数据统计 */
+export interface CardStatisticsRes {
+  /** 总卡数 */
+  totalCount: number;
+  /** 本月新增开卡数 */
+  monthlyNewCount: number;
+  /** 本月流量用量 */
+  monthlyFlowUsage: number;
+  /** 本月活跃卡数 */
+  monthlyActiveCount: number;
+}
+
+/** 卡状态统计 */
+export interface CardStatusStatisticsRes {
+  /** 待激活(1) */
+  pendingActivationCount: number;
+  /** 已激活(2) */
+  activatedCount: number;
+  /** 停机(4) */
+  stoppedCount: number;
+  /** 可测试(6) */
+  testableCount: number;
+  /** 库存(7) */
+  inventoryCount: number;
+  /** 预销户(8) */
+  preCancelCount: number;
+  /** 已销户(9) */
+  canceledCount: number;
+  /** 未知(0) */
+  unknownCount: number;
+}
+
+/** 流量使用图表 */
+export interface FlowUsageChartRes {
+  /** 日期/月度标签 */
+  labels: string[];
+  /** 流量使用值，单位 MB */
+  values: number[];
+}
+
+/** TOP 流量卡片 */
+export interface TopUsageCard {
+  iccid: string;
+  statDate: string;
+  /** 使用量，单位 MB */
+  usageMb: number;
+}
+
+/** TOP 流量卡片响应 */
+export interface TopUsageCardsRes {
+  data: TopUsageCard[];
+}
+
+/** 单个流量池使用情况 */
+export interface FlowPoolUsageItem {
+  flowPoolCode: string;
+  totalFlowMb: number;
+  usedFlowMb: number;
+}
+
+/** 流量池使用情况响应 */
+export interface FlowPoolUsageRes {
+  data: FlowPoolUsageItem[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tFlowPackageConfig/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tFlowPackageConfig/index.ts
new file mode 100644
index 0000000..141a152
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tFlowPackageConfig/index.ts
@@ -0,0 +1,56 @@
+import { requestClient } from '#/api/request';
+
+// 获取SIM流量池套餐配置表列表
+export function List(params:any) {
+  return requestClient.get<any>('iot/tFlowPackageConfig/list', { params });
+}
+
+// 删除/批量删除SIM流量池套餐配置表
+export function Delete(params:any) {
+  return requestClient.post<any>('iot/tFlowPackageConfig/delete', { ...params });
+}
+
+// 添加/编辑SIM流量池套餐配置表
+export function Edit(params:any) {
+  return requestClient.post<any>('iot/tFlowPackageConfig/edit', { ...params });
+}
+
+// 获取SIM流量池套餐配置表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('iot/tFlowPackageConfig/view', { params });
+}
+
+// 导出SIM流量池套餐配置表
+export function Export(params:any) {
+  return requestClient.post<Blob>('iot/tFlowPackageConfig/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
+
+export function GetFlowPackageOptions(params: { poolPackageCode?: string } = {}) {
+  return requestClient.get<any>(
+    'iot/tSimFlowPackageInfo/getFlowPackageOptions',
+    { params },
+  );
+}
+
+export function FlowPackageList(
+  params: { flow: string; poolPackageCode?: string } | string,
+) {
+  const flow = typeof params === 'string' ? params : params.flow;
+  const poolPackageCode =
+    typeof params === 'string' ? '' : params.poolPackageCode || '';
+  const queryFlow =
+    flow?.startsWith('"') && flow?.endsWith('"') ? flow : `"${flow}"`;
+  const queryPoolPackageCode = poolPackageCode
+    ? `&poolPackageCode=${encodeURIComponent(poolPackageCode)}`
+    : '';
+  return requestClient.get<any>(
+    `iot/tSimFlowPackageInfo/flowPackageList?flow=${queryFlow}${queryPoolPackageCode}`,
+  );
+}
+
+export function FlowPackageAddList() {
+  return requestClient.get<any>('iot/tSimFlowPackageInfo/flowPackageAddList');
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tBatch/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tBatch/index.test.ts
new file mode 100644
index 0000000..3a7f1c3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tBatch/index.test.ts
@@ -0,0 +1,50 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { Cards, WarehousingList } from './index';
+
+const request = vi.hoisted(() => ({ get: vi.fn() }));
+vi.mock('#/api/request', () => ({ requestClient: request }));
+
+describe('入库列表渠道筛选请求', () => {
+  it('卡清单按服务端状态筛选，保留状态零并允许清空', async () => {
+    for (const detailStatus of [0, 3, 4, undefined]) {
+      const params = {
+        batchNo: 'INB-TEST',
+        detailStatus,
+        page: 1,
+        pageSize: 20,
+      };
+      await Cards(params);
+      expect(request.get).toHaveBeenLastCalledWith('common/batchMain/cards', {
+        params,
+      });
+    }
+  });
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('切换渠道后每次传递当前编码并保留入库类型', async () => {
+    for (const chanKey of ['A', 'B']) {
+      await WarehousingList({ chanKey, page: 1, pageSize: 20 });
+      expect(request.get).toHaveBeenLastCalledWith(
+        'common/batchMain/successList',
+        {
+          params: { batchType: 1, chanKey, page: 1, pageSize: 20 },
+        },
+      );
+    }
+    expect(request.get).toHaveBeenCalledTimes(2);
+  });
+
+  it('清空渠道不残留上一次筛选条件', async () => {
+    await WarehousingList({ chanKey: 'A', page: 1 });
+    await WarehousingList({ page: 1 });
+    expect(request.get).toHaveBeenLastCalledWith(
+      'common/batchMain/successList',
+      {
+        params: { batchType: 1, page: 1 },
+      },
+    );
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tBatch/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tBatch/index.ts
new file mode 100644
index 0000000..9fe6797
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tBatch/index.ts
@@ -0,0 +1,81 @@
+import type {
+  BatchMainCardsParam,
+  BatchMainCardsRes,
+  BatchMainDeleteParam,
+  BatchMainEditParam,
+  BatchMainExportParam,
+  BatchMainListParam,
+  BatchMainListRes,
+  BatchMainViewParam,
+  BatchMainViewRes,
+  BatchMainWarehousingListParam,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取批次主表列表
+export function List(params: BatchMainListParam) {
+  return requestClient.get<BatchMainListRes>('common/batchMain/successList', {
+    params,
+  });
+}
+
+// 获取入库批次列表
+export function WarehousingList(params: BatchMainWarehousingListParam) {
+  return List({
+    ...params,
+    batchType: 1,
+  });
+}
+
+// 获取批次卡清单
+export function Cards(params: BatchMainCardsParam) {
+  return requestClient.get<BatchMainCardsRes>('common/batchMain/cards', {
+    params,
+  });
+}
+
+// 删除/批量删除批次主表
+export function Delete(params: BatchMainDeleteParam) {
+  return requestClient.post('common/batchMain/delete', { ...params });
+}
+
+// 添加/编辑批次主表
+export function Edit(params: BatchMainEditParam) {
+  return requestClient.post('common/batchMain/edit', { ...params });
+}
+
+// 获取批次主表指定详情
+export function View(params: BatchMainViewParam) {
+  return requestClient.get<BatchMainViewRes>('common/batchMain/view', {
+    params,
+  });
+}
+
+// 导出入库批次列表（数据与入库管理页一致）
+export function ExportWarehousing(params: BatchMainWarehousingListParam) {
+  return requestClient.post<Blob>(
+    '/common/batchMain/exportWarehousing',
+    { ...params, batchType: 1 },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
+
+// 导出批次主表
+export function Export(params: BatchMainExportParam) {
+  return requestClient.post<Blob>(
+    '/common/batchMain/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tBatch/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tBatch/type.ts
new file mode 100644
index 0000000..91b72e9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tBatch/type.ts
@@ -0,0 +1,272 @@
+import type { AllocationUnits } from '#/api/iotlcm/tOperationlog/type';
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 批次主表列表项 */
+export interface BatchMainBatchInfo {
+  /** 协议期到期时间 */
+  agreementExpiryDate?: null | string;
+  /** 卡类型 */
+  cardType?: string;
+  /** 运营商达量断网 */
+  carrierTrafficCutoffEnabled?: number;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 是否开启上游三码校验：1开启 0关闭 */
+  validateUpstreamBasicInfo?: number;
+  /** 结束ICCID */
+  endIccid?: string;
+  /** 结束IMSI */
+  endImsi?: string;
+  /** 结束MSISDN */
+  endMsisdn?: string;
+  /** 是否有沉默期 */
+  hasSilentPeriod?: number;
+  /** 是否有测试期 */
+  hasTestPeriod?: number;
+  /** 导入文件OSS ID */
+  importFileOssId?: number;
+  /** 贴片转插拔 */
+  insertToPlugEnabled?: number;
+  /** 沉默期天数 */
+  silentPeriodDays?: number;
+  /** 沉默期最晚过期日期 */
+  silentPeriodLatestExpiryDate?: null | string;
+  /** 起始ICCID */
+  startIccid?: string;
+  /** 起始IMSI */
+  startImsi?: string;
+  /** 起始MSISDN */
+  startMsisdn?: string;
+  /** 供应商 */
+  suppliersCode?: string;
+  /** 测试期天数 */
+  testPeriodDays?: number;
+  /** 测试期最晚过期日期 */
+  testPeriodLatestExpiryDate?: null | string;
+  /** 上游套餐 */
+  upPkgCode?: string;
+  /** 上游给出激活时间 */
+  upstreamActivationTime?: null | string;
+  [property: string]: any;
+}
+
+export interface BatchMainModel extends AllocationUnits {
+  /** 批次业务参数 */
+  batchInfo?: BatchMainBatchInfo;
+  /** 批次编号 */
+  batchNo: string;
+  /** 批次执行时间 */
+  batchTime?: string;
+  /** 批次类型 枚举 */
+  batchType: number;
+  /** 总数量 */
+  totalCount: number;
+  /** 在库数量 */
+  stockCount?: number;
+  [property: string]: any;
+}
+
+/** 获取批次主表指定信息响应项 */
+export interface BatchMainViewModel extends AllocationUnits {
+  /** 主键ID */
+  id: number;
+  /** 批次编号 */
+  batchNo: string;
+  /** 订单编号 */
+  orderSn: string;
+  /** 批次类型 枚举 */
+  batchType: number;
+  /** 异步处理状态 0=已创建 1=待处理 2=处理中 3=成功 4=失败 5=部分成功 */
+  batchAsyncStatus: number;
+  /** 来源方式 枚举 */
+  sourceType: number;
+  /** 来源批次编号 */
+  sourceBatchNo: string;
+  /** 是否跨级操作机构 0-否 1-是 */
+  isCrossDept: number;
+  /** 目标机构编号 */
+  targetDeptId: number;
+  /** 机构编号 */
+  deptId: number;
+  /** 总数量 */
+  totalCount: number;
+  /** 有效数量 */
+  validCount: number;
+  /** 成功数量 */
+  successCount: number;
+  /** 失败数量 */
+  failCount: number;
+  /** 运行结果：0-待运行 1-运行中 2-成功 3-失败 */
+  runResult: number;
+  /** 失败原因 */
+  failReason: string;
+  /** 批次信息：入库/出库展示字段 */
+  batchInfo: BatchMainViewModel;
+  /** 备注扩展字段 */
+  remark: BatchMainViewModel;
+  /** 开始时间 */
+  startTime: string;
+  /** 结束时间 */
+  endTime: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门ID */
+  createdDept: number;
+  /** 创建者ID */
+  createdBy: number;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者ID */
+  updatedBy: number;
+  /** 更新时间 */
+  updatedAt: string;
+  /** 创建者ID摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 更新者ID摘要信息 */
+  updatedBySumma: MemberSumma;
+}
+
+/** 获取批次主表列表 请求参数 */
+export interface BatchMainListParam {
+  /** 关键字 */
+  keyword?: string;
+  /** 批次编号 */
+  batchNo?: string;
+  /** 批次类型 枚举 */
+  batchType: number;
+  /** 批次执行时间 */
+  time?: string[];
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+}
+
+/** 获取入库批次列表 请求参数 */
+export type BatchMainWarehousingListParam = Omit<
+  BatchMainListParam,
+  'batchType'
+> & {
+  chanKey?: string;
+};
+
+/** 获取批次主表列表 响应 */
+export type BatchMainListRes = GlobalListRes<BatchMainModel>;
+
+/** 批次卡清单列表项 */
+export interface BatchCardListModel extends AllocationUnits {
+  errorReason?: string;
+  /** 明细状态 */
+  detailStatus?: number;
+  /** ICCID */
+  iccid?: string;
+  /** IMSI */
+  imsi?: string;
+  /** MSISDN */
+  msisdn?: string;
+  /** 行号 */
+  rowNo?: number;
+  [property: string]: any;
+}
+
+/** 获取批次卡清单请求参数 */
+export interface BatchMainCardsParam {
+  detailStatus?: number;
+  /** 批次编号 */
+  batchNo: string;
+  /** 批次类型 */
+  batchType?: number;
+  /** ICCID */
+  iccid?: string;
+  /** 关键字 */
+  keyword?: string;
+  /** MSISDN */
+  msisdn?: string;
+  /** 仅显示当前库存卡 */
+  currentStockOnly?: boolean;
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  [property: string]: any;
+}
+
+/** 获取批次卡清单响应 */
+export type BatchMainCardsRes = GlobalListRes<BatchCardListModel>;
+
+/** 导出批次主表列表 请求参数 */
+export type BatchMainExportParam = BatchMainListParam;
+
+/** 修改/新增批次主表 请求参数 */
+export interface BatchMainEditParam {
+  /** 新建批次操作规模：1单卡2批量 */
+  executionMode?: number;
+  /** 主键ID */
+  id?: number;
+  /** 批次编号 */
+  batchNo?: string;
+  /** 订单编号 */
+  orderSn?: string;
+  /** 批次类型 枚举 */
+  batchType?: number;
+  /** 批次状态 枚举 */
+  batchStatus?: number;
+  /** 来源方式 枚举 */
+  sourceType?: number;
+  /** 来源批次编号 */
+  sourceBatchNo?: string;
+  /** 是否跨级操作机构 0-否 1-是 */
+  isCrossDept?: number;
+  /** 目标机构编号 */
+  targetDeptId?: number;
+  /** 机构编号 */
+  deptId?: number;
+  /** 总数量 */
+  totalCount?: number;
+  /** 有效数量 */
+  validCount?: number;
+  /** 成功数量 */
+  successCount?: number;
+  /** 失败数量 */
+  failCount?: number;
+  /** 运行结果：0-待运行 1-运行中 2-成功 3-失败 */
+  runResult?: number;
+  /** 失败原因 */
+  failReason?: string;
+  /** 批次信息：入库/出库展示字段 */
+  batchInfo?: BatchMainViewModel;
+  /** 备注扩展字段 */
+  remark?: BatchMainViewModel;
+  /** 开始时间 */
+  startTime?: string;
+  /** 结束时间 */
+  endTime?: string;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门ID */
+  createdDept?: number;
+  /** 创建者ID */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者ID */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取批次主表指定信息 请求参数 */
+export interface BatchMainViewParam {
+  /** 主键ID */
+  id: number;
+}
+
+/** 获取批次主表指定信息 响应 */
+export type BatchMainViewRes = BatchMainViewModel;
+
+/** 删除批次主表 请求参数 */
+export interface BatchMainDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardCancellation/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardCancellation/index.ts
new file mode 100644
index 0000000..48783c7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardCancellation/index.ts
@@ -0,0 +1,21 @@
+import type {
+  TSimCardCancellationFilter,
+  TSimCardCancellationListParam,
+  TSimCardCancellationListRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+export function List(params: TSimCardCancellationListParam) {
+  return requestClient.get<TSimCardCancellationListRes>(
+    '/iot/tSimCardCancellation/list',
+    { params },
+  );
+}
+
+export function Export(params: TSimCardCancellationFilter) {
+  return requestClient.post<Blob>('/iot/tSimCardCancellation/export', params, {
+    responseReturn: 'raw',
+    responseType: 'blob',
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardCancellation/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardCancellation/type.ts
new file mode 100644
index 0000000..15265a3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardCancellation/type.ts
@@ -0,0 +1,45 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+export interface TSimCardCancellationModel {
+  id: number;
+  iccid: string;
+  msisdn: string;
+  imsi: string;
+  imei: string;
+  deptId: number;
+  deptName: string;
+  chanKey: string;
+  chanName: string;
+  cancelBatchNo: string;
+  cancelledAt: string;
+  bossCardStatus: number;
+  currentPackageCode: string;
+  packageName: string;
+  inboundBatchNo: string;
+  outboundBatchNo: string;
+  allocationBatchNo: string;
+  cardType: number;
+  netModel: number;
+  remark: string;
+  createdBy: number;
+  createdBySumma?: MemberSumma;
+}
+
+export interface TSimCardCancellationFilter {
+  cardValue?: string;
+  cancelBatchNo?: string;
+  deptId?: number;
+  chanKey?: string;
+  cancelledStartAt?: string;
+  cancelledEndAt?: string;
+  remark?: string;
+}
+
+export interface TSimCardCancellationListParam extends TSimCardCancellationFilter {
+  page: number;
+  pageSize: number;
+}
+
+export type TSimCardCancellationListRes =
+  GlobalListRes<TSimCardCancellationModel>;
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardInbound/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardInbound/index.test.ts
new file mode 100644
index 0000000..440f548
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardInbound/index.test.ts
@@ -0,0 +1,89 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    download,
+    post,
+    upload,
+  },
+}));
+
+describe('tSimCardInbound api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads inbound template from backend contract path', async () => {
+    const { ExcelTemplate } = await import('./index');
+
+    ExcelTemplate();
+
+    expect(download).toHaveBeenCalledWith(
+      '/iot/tSimCardInbound/excel/template',
+      {
+        responseReturn: 'raw',
+      },
+    );
+  });
+
+  it('submits excel inbound import with validation flag form data', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'inbound.xlsx');
+
+    ExcelSubmit({ file, validateUpstreamBasicInfo: 1 });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardInbound/excel/submit',
+      { file, validateUpstreamBasicInfo: 1 },
+      {
+        timeout: 60_000,
+      },
+    );
+  });
+
+  it('submits range inbound import with backend contract path', async () => {
+    const { RangeSubmit } = await import('./index');
+    const params = {
+      cardType: '1',
+      chanKey: 'CMCC',
+      endIccid: '8986000000000000009',
+      endImsi: '460001000000009',
+      endMsisdn: '14000000009',
+      sourceType: 1,
+      startIccid: '8986000000000000001',
+      startImsi: '460001000000001',
+      startMsisdn: '14000000001',
+      validateUpstreamBasicInfo: 0,
+    };
+
+    RangeSubmit(params);
+
+    expect(post).toHaveBeenCalledWith('/iot/tSimCardInbound/range/submit', {
+      ...params,
+    });
+  });
+
+  it('submits input inbound import with backend contract path', async () => {
+    const { InputSubmit } = await import('./index');
+    const params = {
+      cardType: '1',
+      chanKey: 'CMCC',
+      input: '8986000000000000001 14000000001 460001000000001',
+      sourceType: 2,
+      upPkgCode: 'UP001',
+      validateUpstreamBasicInfo: 0,
+    };
+
+    InputSubmit(params);
+
+    expect(post).toHaveBeenCalledWith('/iot/tSimCardInbound/input/submit', {
+      ...params,
+    });
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardInbound/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardInbound/index.ts
new file mode 100644
index 0000000..7966330
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardInbound/index.ts
@@ -0,0 +1,137 @@
+import { requestClient } from '#/api/request';
+
+// 下载入库示例模板
+export function ExcelTemplate() {
+  return requestClient.download('/iot/tSimCardInbound/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export interface TSimCardInboundExcelSubmitParams {
+  file: File;
+  /** 是否开启上游三码校验：1开启 0关闭 */
+  validateUpstreamBasicInfo?: number;
+}
+
+export interface TSimCardInboundSubmitRes {
+  /** 批次编号 */
+  batchNo?: string;
+  /** 批次类型 */
+  batchType?: number;
+}
+
+export interface TSimCardInboundRangeSubmitParams {
+  /** 连号字段：iccid、msisdn 或 imsi */
+  rangeType?: 'iccid' | 'imsi' | 'msisdn';
+  /** 协议期到期时间 */
+  agreementExpiryDate?: string;
+  /** 卡类型 */
+  cardType?: string;
+  /** 是否运营商达量断网(global_yes_or_no) */
+  carrierTrafficCutoffEnabled?: number;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 是否开启上游三码校验：1开启 0关闭 */
+  validateUpstreamBasicInfo?: number;
+  /** 结束号段ICCID */
+  endIccid?: string;
+  /** 结束号段IMSI */
+  endImsi?: string;
+  /** 结束号段MSISDN */
+  endMsisdn?: string;
+  /** 是否有沉默期(global_yes_or_no) */
+  hasSilentPeriod?: number;
+  /** 是否有测试期(global_yes_or_no) */
+  hasTestPeriod?: number;
+  /** 是否贴片转插拔(global_yes_or_no) */
+  insertToPlugEnabled?: number;
+  /** 来源方式：0 批次选择，1 连号，2 批量输入，3 文件，4 定时任务 */
+  sourceType?: number;
+  /** 沉默期天数 */
+  silentPeriodDays?: number;
+  /** 沉默期最晚过期日期 */
+  silentPeriodLatestExpiryDate?: string;
+  /** 起始号段ICCID */
+  startIccid?: string;
+  /** 起始号段IMSI */
+  startImsi?: string;
+  /** 起始号段MSISDN */
+  startMsisdn?: string;
+  /** 供应商编码 */
+  suppliersCode?: string;
+  /** 测试期天数 */
+  testPeriodDays?: number;
+  /** 测试期最晚过期日期 */
+  testPeriodLatestExpiryDate?: string;
+  /** 上游套餐编码 */
+  upPkgCode?: string;
+  /** 上游给出激活时间 */
+  upstreamActivationTime?: string;
+  [property: string]: any;
+}
+
+export interface TSimCardInboundInputSubmitParams {
+  /** 协议期到期时间 */
+  agreementExpiryDate?: string;
+  /** 卡类型 */
+  cardType?: string;
+  /** 是否运营商达量断网(global_yes_or_no) */
+  carrierTrafficCutoffEnabled?: number;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 是否开启上游三码校验：1开启 0关闭 */
+  validateUpstreamBasicInfo?: number;
+  /** 是否有沉默期(global_yes_or_no) */
+  hasSilentPeriod?: number;
+  /** 是否有测试期(global_yes_or_no) */
+  hasTestPeriod?: number;
+  /** 批量输入内容 */
+  input: string;
+  /** 是否贴片转插拔(global_yes_or_no) */
+  insertToPlugEnabled?: number;
+  /** 来源方式：0 批次选择，1 连号，2 批量输入，3 文件，4 定时任务 */
+  sourceType?: number;
+  /** 沉默期天数 */
+  silentPeriodDays?: number;
+  /** 沉默期最晚过期日期 */
+  silentPeriodLatestExpiryDate?: string;
+  /** 供应商编码 */
+  suppliersCode?: string;
+  /** 测试期天数 */
+  testPeriodDays?: number;
+  /** 测试期最晚过期日期 */
+  testPeriodLatestExpiryDate?: string;
+  /** 上游套餐编码 */
+  upPkgCode?: string;
+  /** 上游给出激活时间 */
+  upstreamActivationTime?: string;
+  [property: string]: any;
+}
+
+// Excel批量卡入库
+export function ExcelSubmit(params: TSimCardInboundExcelSubmitParams) {
+  const { file, ...data } = params;
+  return requestClient.upload<TSimCardInboundSubmitRes>(
+    '/iot/tSimCardInbound/excel/submit',
+    { ...data, file },
+    {
+      timeout: 60_000,
+    },
+  );
+}
+
+// 连号批量卡入库
+export function RangeSubmit(params: TSimCardInboundRangeSubmitParams) {
+  return requestClient.post<TSimCardInboundSubmitRes>(
+    '/iot/tSimCardInbound/range/submit',
+    { ...params },
+  );
+}
+
+// 批量输入卡入库
+export function InputSubmit(params: TSimCardInboundInputSubmitParams) {
+  return requestClient.post<TSimCardInboundSubmitRes>(
+    '/iot/tSimCardInbound/input/submit',
+    { ...params },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardOutbound/index.test.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardOutbound/index.test.ts
new file mode 100644
index 0000000..7965934
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardOutbound/index.test.ts
@@ -0,0 +1,221 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const download = vi.fn();
+const get = vi.fn();
+const post = vi.fn();
+const upload = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: {
+    download,
+    get,
+    post,
+    upload,
+  },
+}));
+
+describe('tSimCardOutbound api', () => {
+  beforeEach(() => {
+    download.mockReset();
+    get.mockReset();
+    post.mockReset();
+    upload.mockReset();
+  });
+
+  it('downloads excel outbound template from backend contract path', async () => {
+    const { DownloadTemplate } = await import('./index');
+
+    DownloadTemplate();
+
+    expect(download).toHaveBeenCalledWith(
+      '/iot/tSimCardOutbound/excel/template',
+      {
+        responseReturn: 'raw',
+      },
+    );
+  });
+
+  it('submits excel outbound as file-only form data', async () => {
+    const { ExcelSubmit } = await import('./index');
+    const file = new File(['iccid'], 'outbound.xlsx');
+
+    ExcelSubmit({ file });
+
+    expect(upload).toHaveBeenCalledWith(
+      '/iot/tSimCardOutbound/excel/submit',
+      { file },
+      {
+        timeout: 180_000,
+      },
+    );
+  });
+
+  it('submits range outbound with backend contract path', async () => {
+    const { RangeSubmit } = await import('./index');
+    const params = {
+      customerAgentId: 12,
+      durationMonths: 6,
+      endIccid: '8986000000000000009',
+      endImsi: '460000000000009',
+      endMsisdn: '13000000009',
+      offlineContractCompleted: true,
+      packageBeginTime: '2026-07-02 10:00:00',
+      packageCode: 'PKG001',
+      startIccid: '8986000000000000001',
+      startImsi: '460000000000001',
+      startMsisdn: '13000000001',
+    };
+
+    RangeSubmit(params);
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardOutbound/range/submit',
+      params,
+      { timeout: 180_000 },
+    );
+  });
+
+  it('queries outbound inbound batch list from backend contract path', async () => {
+    const { InboundBatchList } = await import('./index');
+    const params = {
+      batchNo: 'IN202607020001',
+      page: 1,
+      pageSize: 20,
+    };
+
+    InboundBatchList(params);
+
+    expect(get).toHaveBeenCalledWith(
+      '/iot/tSimCardOutbound/inboundBatch/list',
+      {
+        params,
+      },
+    );
+  });
+
+  it('queries outbound inbound batch cards from backend contract path', async () => {
+    const { InboundBatchCards } = await import('./index');
+    const params = {
+      batchNo: 'IN202607020001',
+      iccid: '8986',
+      page: 1,
+      pageSize: 20,
+    };
+
+    InboundBatchCards(params);
+
+    expect(get).toHaveBeenCalledWith(
+      '/iot/tSimCardOutbound/inboundBatch/cards',
+      {
+        params,
+      },
+    );
+  });
+
+  it('queries outbound customer balance from backend contract path', async () => {
+    const { CustomerBalance } = await import('./index');
+    const params = { customerAgentId: 12 };
+
+    CustomerBalance(params);
+
+    expect(get).toHaveBeenCalledWith('/iot/tSimCardOutbound/customerBalance', {
+      params,
+    });
+  });
+
+  it('submits inbound batch outbound with backend-supported payload', async () => {
+    const { BatchSubmit } = await import('./index');
+    const params = {
+      batchNo: 'IN202607020001',
+      customerAgentId: 12,
+      durationMonths: 6,
+      offlineContractCompleted: false,
+      packageBeginTime: '2026-07-02',
+      packageCode: 'PKG001',
+    };
+
+    BatchSubmit(params);
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardOutbound/batch/submit',
+      params,
+      { timeout: 180_000 },
+    );
+  });
+
+  it('submits input outbound with backend contract path', async () => {
+    const { InputSubmit } = await import('./index');
+    const params = {
+      customerAgentId: 12,
+      durationMonths: 6,
+      input: '8986000000000000001\n8986000000000000002',
+      offlineContractCompleted: true,
+      packageBeginTime: '2026-07-02 10:00:00',
+      packageCode: 'PKG001',
+    };
+
+    InputSubmit(params);
+
+    expect(post).toHaveBeenCalledWith(
+      '/iot/tSimCardOutbound/input/submit',
+      params,
+      { timeout: 180_000 },
+    );
+  });
+});
+
+describe('tSimCardStock outbound form model', () => {
+  it('calculates outbound end date from begin date and duration parts', async () => {
+    const { calculateOutboundEndDate } =
+      await import('#/views/iotlcm/tLifeCycle/tSimCardStock/outboundFormUtils');
+
+    expect(
+      calculateOutboundEndDate({
+        durationMonthPart: 6,
+        durationYears: 1,
+        giftDurationMonthPart: 2,
+        giftDurationYears: 0,
+        packageBeginTime: '2026-08-06',
+      }),
+    ).toBe('2028-03-31');
+  });
+
+  it('normalizes outbound submit values without period options', async () => {
+    const { normalizeOutboundSubmitValues } =
+      await import('#/views/iotlcm/tLifeCycle/tSimCardStock/outboundFormUtils');
+
+    expect(
+      normalizeOutboundSubmitValues({
+        adminNote: 'old',
+        amount: 12,
+        buyerNote: 'old',
+        customerBalanceDisplay: '余额：￥100.00',
+        durationMonthPart: 3,
+        durationYears: 1,
+        expectedPackageEndTime: '2027-11-06',
+        giftDurationMonthPart: 1,
+        giftDurationYears: 0,
+        hasSilentPeriod: 0,
+        hasTestPeriod: 0,
+        offlineContractCompleted: false,
+        remark: ' remark ',
+        silentPeriodDays: 7,
+        testPeriodDays: 3,
+      }),
+    ).toMatchObject({
+      amount: '12',
+      adminNote: undefined,
+      buyerNote: undefined,
+      customerBalanceDisplay: undefined,
+      durationMonths: 15,
+      expectedPackageEndTime: undefined,
+      giftDurationMonths: 1,
+      hasSilentPeriod: undefined,
+      hasTestPeriod: undefined,
+      offlineContractCompleted: false,
+      remark: 'remark',
+      silentPeriodDays: undefined,
+      testPeriodDays: undefined,
+    });
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardOutbound/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardOutbound/index.ts
new file mode 100644
index 0000000..8e19e11
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardOutbound/index.ts
@@ -0,0 +1,197 @@
+import { requestClient } from '#/api/request';
+
+export interface TSimCardOutboundSubmitRes {
+  batchAsyncStatus: number;
+  batchNo: string;
+  batchType: number;
+  failCount?: number;
+  orderSn?: string;
+  quantity?: number;
+  resultDownloadId?: number;
+  resultFileOssId?: number;
+  status?: string;
+  total?: number;
+  validCount?: number;
+  [property: string]: any;
+}
+
+export interface TSimCardOutboundSubmitBaseParam {
+  adminNote?: string;
+  amount?: number | string;
+  buyerNote?: string;
+  customerAgentId: number;
+  durationMonthPart?: number;
+  durationYears?: number;
+  durationMonths: number;
+  giftDurationMonthPart?: number;
+  giftDurationYears?: number;
+  giftDurationMonths?: number;
+  offlineContractCompleted: boolean;
+  packageBeginTime: string;
+  packageCode: string;
+  remark?: string;
+  [property: string]: any;
+}
+
+export interface TSimCardOutboundExcelSubmitParam {
+  file: File;
+}
+
+export interface TSimCardOutboundRangeSubmitParam extends TSimCardOutboundSubmitBaseParam {
+  endIccid: string;
+  endImsi: string;
+  endMsisdn: string;
+  rangeCodeType?: 'iccid' | 'imsi' | 'msisdn';
+  startIccid: string;
+  startImsi: string;
+  startMsisdn: string;
+}
+
+export interface TSimCardOutboundInputSubmitParam extends TSimCardOutboundSubmitBaseParam {
+  input: string;
+}
+
+export interface TSimCardOutboundInboundBatchListParam {
+  agreementExpiryMonths?: number;
+  batchNo?: string;
+  cardType?: string;
+  chanName?: string;
+  page?: number;
+  pageSize?: number;
+  upPkgKeyword?: string;
+}
+
+export interface TSimCardOutboundInboundBatchListItem {
+  agreementExpiryDate?: string;
+  batchNo: string;
+  cardType?: string;
+  chanKey?: string;
+  chanName?: string;
+  firstCreatedAt?: string;
+  lastCreatedAt?: string;
+  stockCount: number;
+  upPkgCode?: string;
+  upPkgName?: string;
+}
+
+export interface TSimCardOutboundInboundBatchListRes {
+  items: TSimCardOutboundInboundBatchListItem[];
+  total: number;
+}
+
+export interface TSimCardOutboundInboundBatchCardsParam {
+  batchNo: string;
+  iccid?: string;
+  imsi?: string;
+  msisdn?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface TSimCardOutboundInboundBatchCardItem {
+  agreementExpiryDate?: string;
+  batchNo: string;
+  cardType?: string;
+  chanKey?: string;
+  chanName?: string;
+  createdAt?: string;
+  iccid: string;
+  imei?: string;
+  imsi?: string;
+  msisdn?: string;
+  upPkgCode?: string;
+  upPkgName?: string;
+}
+
+export interface TSimCardOutboundInboundBatchCardsRes {
+  items: TSimCardOutboundInboundBatchCardItem[];
+  total: number;
+}
+
+export interface TSimCardOutboundBatchSubmitParam extends TSimCardOutboundSubmitBaseParam {
+  batchNo: string;
+}
+
+export interface TSimCardOutboundCustomerBalanceParam {
+  customerAgentId: number;
+}
+
+export interface TSimCardOutboundCustomerBalanceRes {
+  accountExists: boolean;
+  balance: number;
+  customerAgentId: number;
+  customerName?: string;
+  status: number;
+  statusText?: string;
+}
+
+export function DownloadTemplate() {
+  return requestClient.download('/iot/tSimCardOutbound/excel/template', {
+    responseReturn: 'raw',
+  });
+}
+
+export function ExcelSubmit(params: TSimCardOutboundExcelSubmitParam) {
+  return requestClient.upload<TSimCardOutboundSubmitRes>(
+    '/iot/tSimCardOutbound/excel/submit',
+    { file: params.file },
+    {
+      timeout: 180_000,
+    },
+  );
+}
+
+export function RangeSubmit(params: TSimCardOutboundRangeSubmitParam) {
+  return requestClient.post<TSimCardOutboundSubmitRes>(
+    '/iot/tSimCardOutbound/range/submit',
+    params,
+    { timeout: 180_000 },
+  );
+}
+
+export function InputSubmit(params: TSimCardOutboundInputSubmitParam) {
+  return requestClient.post<TSimCardOutboundSubmitRes>(
+    '/iot/tSimCardOutbound/input/submit',
+    params,
+    { timeout: 180_000 },
+  );
+}
+
+export function InboundBatchList(
+  params: TSimCardOutboundInboundBatchListParam,
+) {
+  return requestClient.get<TSimCardOutboundInboundBatchListRes>(
+    '/iot/tSimCardOutbound/inboundBatch/list',
+    {
+      params,
+    },
+  );
+}
+
+export function InboundBatchCards(
+  params: TSimCardOutboundInboundBatchCardsParam,
+) {
+  return requestClient.get<TSimCardOutboundInboundBatchCardsRes>(
+    '/iot/tSimCardOutbound/inboundBatch/cards',
+    {
+      params,
+    },
+  );
+}
+
+export function BatchSubmit(params: TSimCardOutboundBatchSubmitParam) {
+  return requestClient.post<TSimCardOutboundSubmitRes>(
+    '/iot/tSimCardOutbound/batch/submit',
+    params,
+    { timeout: 180_000 },
+  );
+}
+
+export function CustomerBalance(params: TSimCardOutboundCustomerBalanceParam) {
+  return requestClient.get<TSimCardOutboundCustomerBalanceRes>(
+    '/iot/tSimCardOutbound/customerBalance',
+    {
+      params,
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardStock/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardStock/index.ts
new file mode 100644
index 0000000..a96e50a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardStock/index.ts
@@ -0,0 +1,49 @@
+import type {
+  TSimCardStockDeleteParam,
+  TSimCardStockEditParam,
+  TSimCardStockExportParam,
+  TSimCardStockListParam,
+  TSimCardStockListRes,
+  TSimCardStockViewParam,
+  TSimCardStockViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取库存卡信息表列表
+export function List(params: TSimCardStockListParam) {
+  return requestClient.get<TSimCardStockListRes>('iot/tSimCardStock/list', {
+    params,
+  });
+}
+
+// 删除/批量删除库存卡信息表
+export function Delete(params: TSimCardStockDeleteParam) {
+  return requestClient.post('iot/tSimCardStock/delete', { ...params });
+}
+
+// 添加/编辑库存卡信息表
+export function Edit(params: TSimCardStockEditParam) {
+  return requestClient.post('iot/tSimCardStock/edit', { ...params });
+}
+
+// 获取库存卡信息表指定详情
+export function View(params: TSimCardStockViewParam) {
+  return requestClient.get<TSimCardStockViewRes>('iot/tSimCardStock/view', {
+    params,
+  });
+}
+
+// 导出库存卡信息表
+export function Export(params: TSimCardStockExportParam) {
+  return requestClient.post<Blob>(
+    '/iot/tSimCardStock/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardStock/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardStock/type.ts
new file mode 100644
index 0000000..294c0c6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardStock/type.ts
@@ -0,0 +1,127 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 库存卡信息表列表项 */
+export interface TSimCardStockModel {
+  /** 主键ID */
+  id: number;
+  /** 入库批次号 */
+  batchNo?: string;
+  /** ICCID */
+  iccid: string;
+  /** MSISDN */
+  msisdn: string;
+  /** IMSI */
+  imsi: string;
+  /** IMEI */
+  imei: string;
+  /** 通道编号 */
+  chanKey: string;
+  /** 通道名称 */
+  chanName?: string;
+  /** 卡类型 */
+  cardType?: string;
+  /** 上游套餐编码 */
+  upPkgCode?: string;
+  /** 上游套餐名称 */
+  upPkgName?: string;
+  /** 协议到期时间 */
+  agreementExpiryDate?: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建部门名称 */
+  createdDeptName?: string;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取库存卡信息表列表 请求参数 */
+export interface TSimCardStockListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 入库批次号 */
+  batchNo?: string;
+  /** ICCID */
+  iccid?: string;
+  /** MSISDN */
+  msisdn?: string;
+  /** IMSI */
+  imsi?: string;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 通道名称 */
+  chanName?: string;
+  /** 卡类型 */
+  cardType?: string;
+  /** 上游套餐关键字 */
+  upPkgKeyword?: string;
+  /** 协议到期快捷筛选(月) */
+  agreementExpiryMonths?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取库存卡信息表列表 响应 */
+export type TSimCardStockListRes = GlobalListRes<TSimCardStockModel>;
+
+/** 导出库存卡信息表列表 请求参数 */
+export type TSimCardStockExportParam = TSimCardStockListParam;
+
+/** 修改/新增库存卡信息表 请求参数 */
+export interface TSimCardStockEditParam {
+  /** 主键ID */
+  id?: number;
+  /** ICCID */
+  iccid?: string;
+  /** MSISDN */
+  msisdn?: string;
+  /** IMSI */
+  imsi?: string;
+  /** IMEI */
+  imei?: string;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门 */
+  createdDept?: number;
+  /** 创建者 */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者 */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取库存卡信息表指定信息 请求参数 */
+export interface TSimCardStockViewParam {
+  /** 主键ID */
+  id: number;
+}
+
+/** 获取库存卡信息表指定信息 响应 */
+export type TSimCardStockViewRes = TSimCardStockModel;
+
+/** 删除库存卡信息表 请求参数 */
+export interface TSimCardStockDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tOperationlog/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tOperationlog/index.ts
new file mode 100644
index 0000000..322a49f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tOperationlog/index.ts
@@ -0,0 +1,50 @@
+import type {
+  BatchExecutionLogDetailListParam,
+  BatchExecutionLogDetailListRes,
+  BatchExecutionLogListParam,
+  BatchExecutionLogListRes,
+  BatchExecutionLogSummaryParam,
+  BatchExecutionLogSummaryRes,
+  BatchExecutionLogSyncReviewParam,
+  BatchExecutionLogSyncReviewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取批次执行日志列表
+export function List(params: BatchExecutionLogListParam) {
+  return requestClient.get<BatchExecutionLogListRes>(
+    'common/batchExecutionLog/list',
+    {
+      params,
+    },
+  );
+}
+
+// 获取批次执行日志概要
+export function Summary(params: BatchExecutionLogSummaryParam) {
+  return requestClient.get<BatchExecutionLogSummaryRes>(
+    'common/batchExecutionLog/summary',
+    {
+      params,
+    },
+  );
+}
+
+// 获取批次执行日志明细列表
+export function DetailList(params: BatchExecutionLogDetailListParam) {
+  return requestClient.get<BatchExecutionLogDetailListRes>(
+    'common/batchExecutionLog/detailList',
+    {
+      params,
+    },
+  );
+}
+
+// 手动同步待核查批次的上游执行结果（只读补查既有受理号，不重发办理）
+export function SyncReview(data: BatchExecutionLogSyncReviewParam) {
+  return requestClient.post<BatchExecutionLogSyncReviewRes>(
+    'common/batchExecutionLog/syncReview',
+    { ...data },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tOperationlog/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tOperationlog/type.ts
new file mode 100644
index 0000000..8544cfc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tOperationlog/type.ts
@@ -0,0 +1,235 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 划拨单位信息，名称优先使用提交时快照。 */
+export interface AllocationUnits {
+  sourceDeptId?: number;
+  sourceDeptName?: string;
+  targetDeptId?: number;
+  targetDeptName?: string;
+  targetDeptMode?: 'per_row' | 'single';
+}
+
+/** 批次执行日志列表项 */
+export interface BatchExecutionLogModel extends AllocationUnits {
+  sourceChannel?: string;
+  executionMode?: number;
+  /** 主键ID */
+  id?: number;
+  /** 批次编号 */
+  batchNo?: string;
+  /** 异步处理状态 */
+  batchAsyncStatus?: number;
+  /** 重启阶段：waiting_resume 表示停机后等待复机 */
+  restartPhase?: string;
+  /** 计划复机时间 */
+  restartResumeAt?: string;
+  /** 批次类型 */
+  batchType?: number;
+  /** 来源方式 */
+  sourceType?: null | number;
+  /** 总数量 */
+  totalCount?: number;
+  /** 待核查数量 */
+  unknownCount?: number;
+  /** 运行结果 */
+  runResult?: number;
+  /** 开始时间 */
+  startTime?: string;
+  /** 结束时间 */
+  endTime?: string;
+  /** 创建部门ID */
+  createdDept?: number;
+  /** 创建者ID */
+  createdBy?: number;
+  /** 创建者摘要 */
+  createdBySumma?: MemberSumma;
+  /** 创建时间 */
+  createdAt?: string;
+}
+
+/** 批次执行日志概要响应 */
+export interface BatchExecutionLogSummaryRes extends AllocationUnits {
+  sourceChannel?: string;
+  executionMode?: number;
+  /** 主键ID */
+  id?: number;
+  /** 批次编号 */
+  batchNo?: string;
+  /** 异步处理状态 */
+  batchAsyncStatus?: number;
+  /** 重启阶段：waiting_resume 表示停机后等待复机 */
+  restartPhase?: string;
+  /** 计划复机时间 */
+  restartResumeAt?: string;
+  /** 批次类型 */
+  batchType?: number;
+  /** 来源方式 */
+  sourceType?: null | number;
+  /** 总数量 */
+  totalCount?: number;
+  /** 待核查数量 */
+  unknownCount?: number;
+  /** 运行结果 */
+  runResult?: number;
+  /** 失败原因 */
+  failReason?: string;
+  /** 源文件 */
+  sourceFile?: BatchExecutionLogFileModel;
+  /** 结果文件 */
+  resultFile?: BatchExecutionLogResultFileModel;
+  /** 开始时间 */
+  startTime?: string;
+  /** 结束时间 */
+  endTime?: string;
+}
+
+/** 批次执行日志文件信息 */
+export interface BatchExecutionLogFileModel {
+  /** 导出任务ID；与历史批次下载任务ID分开，走下载中心鉴权 */
+  exportTaskId?: number;
+  /** OSS文件ID */
+  ossId?: number;
+  /** 文件URL */
+  url?: string;
+}
+
+/** 批次执行日志结果文件信息 */
+export interface BatchExecutionLogResultFileModel extends BatchExecutionLogFileModel {
+  /** 原始下载文件名 */
+  originalName?: string;
+  /** 下载任务ID */
+  downloadId?: number;
+  /** 下载状态 */
+  downloadStatus?: number;
+}
+
+/** 获取批次执行日志列表请求参数 */
+export interface BatchExecutionLogListParam {
+  sourceChannel?: string;
+  executionMode?: number;
+  /** 输入方式：0选择、1连号、2输入、3文件、4定时 */
+  sourceType?: number;
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 批次编号 */
+  batchNo?: string;
+  /** 异步处理状态 */
+  batchAsyncStatus?: number;
+  /** 批次类型 */
+  batchType?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取批次执行日志列表响应 */
+export type BatchExecutionLogListRes = GlobalListRes<BatchExecutionLogModel>;
+
+/** 手动同步待核查批次上游结果的请求参数 */
+export interface BatchExecutionLogSyncReviewParam {
+  /** 批次编号 */
+  batchNo: string;
+  /** 同步原因 */
+  reason?: string;
+}
+
+/** 手动同步待核查批次上游结果的响应 */
+export interface BatchExecutionLogSyncReviewRes {
+  /** 批次编号 */
+  batchNo?: string;
+  /** 批次类型 */
+  batchType?: number;
+  /** 异步处理状态 */
+  batchAsyncStatus?: number;
+  /** 待核查数量 */
+  unknownCount?: number;
+  /** 是否已提交同步 */
+  queued?: boolean;
+}
+
+/** 批次执行日志明细列表项 */
+export interface BatchExecutionLogDetailModel extends AllocationUnits {
+  /** 协议到期时间 */
+  agreementExpiryDate?: string;
+  /** 卡类型 */
+  cardType?: string;
+  /** 是否运营商达量断网 */
+  carrierTrafficCutoffEnabled?: string;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 明细状态 */
+  detailStatus?: number;
+  /** 错误信息 */
+  error?: BatchExecutionLogDetailErrorModel;
+  /** 是否有沉默期 */
+  hasSilentPeriod?: string;
+  /** 是否有测试期 */
+  hasTestPeriod?: string;
+  /** ICCID */
+  iccid?: string;
+  /** IMEI */
+  imei?: string;
+  /** IMSI */
+  imsi?: string;
+  /** 是否贴片转插拔 */
+  insertToPlugEnabled?: string;
+  /** MSISDN */
+  msisdn?: string;
+  /** 行号 */
+  rowNo?: number;
+  /** 沉默期天数 */
+  silentPeriodDays?: string;
+  /** 沉默期最晚过期日期 */
+  silentPeriodLatestExpiryDate?: string;
+  /** 供应商编码 */
+  suppliersCode?: string;
+  /** 测试期天数 */
+  testPeriodDays?: string;
+  /** 测试期最晚过期日期 */
+  testPeriodLatestExpiryDate?: string;
+  /** 上游套餐编码 */
+  upPkgCode?: string;
+  /** 上游激活时间 */
+  upstreamActivationTime?: string;
+  [property: string]: any;
+}
+
+/** 批次执行日志明细错误信息 */
+export interface BatchExecutionLogDetailErrorModel {
+  /** 异常原因 */
+  reason?: string;
+  [property: string]: any;
+}
+
+/** 获取批次执行日志明细列表请求参数 */
+export interface BatchExecutionLogDetailListParam {
+  /** 批次编号 */
+  batchNo: string;
+  /** 批次类型 */
+  batchType?: number;
+  /** 明细状态 */
+  detailStatus?: number;
+  /** ICCID */
+  iccid?: string;
+  /** 关键字 */
+  keyword?: string;
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  [property: string]: any;
+}
+
+/** 获取批次执行日志明细列表响应 */
+export type BatchExecutionLogDetailListRes =
+  GlobalListRes<BatchExecutionLogDetailModel>;
+
+/** 获取批次执行日志概要请求参数 */
+export interface BatchExecutionLogSummaryParam {
+  /** 批次编号 */
+  batchNo: string;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tOrder/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tOrder/index.ts
new file mode 100644
index 0000000..c0efd14
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tOrder/index.ts
@@ -0,0 +1,97 @@
+import { requestClient } from '#/api/request';
+
+export interface OrderItem {
+  businessBatchNo: string;
+  durationUnit: string;
+  durationValue: number;
+  effectiveMode: string;
+  itemId: number;
+  price: number;
+  productName: string;
+  productSn: string;
+  quantity: number;
+  serviceBeginTime?: string;
+  serviceEndTime?: string;
+  sourceBatchNo: string;
+}
+
+export interface OrderRow {
+  agentName: string;
+  balance: number;
+  businessBatchNo: string;
+  buyerNote: string;
+  createdAt: string;
+  customerName: string;
+  discountAmount: number;
+  distributionStatus: number;
+  id: number;
+  items?: OrderItem[];
+  offlinePaidAmount: number;
+  onlinePaidAmount: number;
+  orderSn: string;
+  orderStatus: number;
+  orderType: number;
+  paidAmount: number;
+  parentOrderSn: string;
+  payOrderSn: string;
+  payStatus: number;
+  payTime?: string;
+  payType: number;
+  productAmount: number;
+  productName: string;
+  productSn: string;
+  quantity: number;
+  returnStatus: number;
+  serviceBeginTime?: string;
+  serviceEndTime?: string;
+  serviceFee: number;
+  totalAmount: number;
+  unitPrice: number;
+  unrefundAmount: number;
+  updatedAt: string;
+}
+
+export interface OrderListParams {
+  createdAt?: [string, string];
+  distributionStatus?: number;
+  orderSn?: string;
+  orderStatus?: number;
+  orderType?: number;
+  page: number;
+  pageSize: number;
+  payStatus?: number;
+  payType?: number;
+  perspective?: 'purchase' | 'sell';
+}
+
+export interface OrderListResult {
+  items: OrderRow[];
+  page: number;
+  pageSize: number;
+  total: number;
+}
+
+export function List(params: OrderListParams) {
+  return requestClient.get<OrderListResult>('iot/tOrder/list', { params });
+}
+
+export function SellList(params: OrderListParams) {
+  return requestClient.get<OrderListResult>('iot/tOrder/sellList', { params });
+}
+
+export function View(params: { id: number }) {
+  return requestClient.get<OrderRow>('iot/tOrder/view', { params });
+}
+
+export function Export(params: OrderListParams) {
+  return requestClient.post<Blob>(
+    '/iot/tOrder/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackageInfo/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackageInfo/index.ts
new file mode 100644
index 0000000..dee6fd7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackageInfo/index.ts
@@ -0,0 +1,58 @@
+import type {
+  TSimFlowPackageInfoDeleteParam,
+  TSimFlowPackageInfoEditParam,
+  TSimFlowPackageInfoExportParam,
+  TSimFlowPackageInfoListParam,
+  TSimFlowPackageInfoListRes,
+  TSimFlowPackageInfoViewParam,
+  TSimFlowPackageInfoViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取SIM流量套餐管理列表
+export function List(params: TSimFlowPackageInfoListParam) {
+  return requestClient.get<TSimFlowPackageInfoListRes>(
+    'iot/tSimFlowPackageInfo/list',
+    { params },
+  );
+}
+
+// 删除/批量删除SIM流量套餐管理
+export function Delete(params: TSimFlowPackageInfoDeleteParam) {
+  return requestClient.post('iot/tSimFlowPackageInfo/delete', { ...params });
+}
+
+// 添加/编辑SIM流量套餐管理
+export function Edit(params: TSimFlowPackageInfoEditParam) {
+  return requestClient.post('iot/tSimFlowPackageInfo/edit', { ...params });
+}
+
+// 同步当前部门套餐关联
+export function SyncDeptPackages() {
+  return requestClient.post('iot/tSimFlowPackageInfo/syncDeptPackages');
+}
+
+// 获取SIM流量套餐管理指定详情
+export function View(params: TSimFlowPackageInfoViewParam) {
+  return requestClient.get<TSimFlowPackageInfoViewRes>(
+    'iot/tSimFlowPackageInfo/view',
+    {
+      params,
+    },
+  );
+}
+
+// 导出SIM流量套餐管理
+export function Export(params: TSimFlowPackageInfoExportParam) {
+  return requestClient.post<Blob>(
+    '/iot/tSimFlowPackageInfo/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackageInfo/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackageInfo/type.ts
new file mode 100644
index 0000000..42a315a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackageInfo/type.ts
@@ -0,0 +1,228 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** SIM流量套餐管理列表项 */
+export interface TSimFlowPackageInfoModel {
+  /** 主键ID */
+  id: number;
+  /** 套餐编码 */
+  packageCode: string;
+  /** 套餐分类编码 */
+  categoryCode: string;
+  /** 套餐分类名称 */
+  categoryName: string;
+  /** 池套餐编码 */
+  poolPackageCode: number;
+  /** 套餐名称 */
+  packageName: string;
+  /** 套餐类型：101-卡套餐 102-池套餐 103-单卡加油包 104-池卡加油包 */
+  packageType: number;
+  /** 计费方式 */
+  billingMethod: string;
+  /** 排序号 */
+  sortNo: number;
+  /** 套餐流量(MB) */
+  flowMb: number;
+  /** 套餐流量(GB) */
+  flowGb: number;
+  /** 是否启用：0-停用 1-启用(flow_package_enabled) */
+  enabled: number;
+  /** 目录售价 */
+  listPrice: number;
+  /** 渠道出货价 */
+  agentShipmentPrice: number;
+  /** 终端售价 */
+  terminalSalePrice: number;
+  /** 成本价 */
+  costPrice: number;
+  /** 默认利润 */
+  defaultProfit: number;
+  /** 默认系数 */
+  defaultRatio: number;
+  /** 终端成本 */
+  terminalCost: number;
+  /** 默认终端利润 */
+  defaultTerminalProfit: number;
+  /** 默认终端系数 */
+  defaultTerminalRatio: number;
+  /** 是否自动续费 */
+  isAutoRenew: number;
+  /** 自动续费套餐ID */
+  autoRenewPackageId: number;
+  /** 自动续费年限 */
+  autoRenewYears: number;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门ID */
+  createdDept: number;
+  /** 创建者ID */
+  createdBy: number;
+  /** 创建者ID摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者ID */
+  updatedBy: number;
+  /** 更新者ID摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+  isTopDept?: boolean;
+}
+
+/** 获取SIM流量套餐管理指定信息响应项 */
+export interface TSimFlowPackageInfoViewModel {
+  /** 主键ID */
+  id: number;
+  /** 套餐编码 */
+  packageCode: string;
+  /** 套餐分类编码 */
+  categoryCode: string;
+  /** 池套餐编码 */
+  poolPackageCode: number;
+  /** 套餐名称 */
+  packageName: string;
+  /** 套餐类型：101-卡套餐 102-池套餐 103-单卡加油包 104-池卡加油包 */
+  packageType: number;
+  /** 计费方式 */
+  billingMethod: string;
+  /** 排序号 */
+  sortNo: number;
+  /** 套餐流量(MB) */
+  flowMb: number;
+  /** 套餐流量(GB) */
+  flowGb: number;
+  /** 是否启用：0-停用 1-启用(flow_package_enabled) */
+  enabled: number;
+  /** 目录售价 */
+  listPrice: number;
+  /** 渠道出货价 */
+  agentShipmentPrice: number;
+  /** 终端售价 */
+  terminalSalePrice: number;
+  /** 成本价 */
+  costPrice: number;
+  /** 默认利润 */
+  defaultProfit: number;
+  /** 默认系数 */
+  defaultRatio: number;
+  /** 终端成本 */
+  terminalCost: number;
+  /** 默认终端利润 */
+  defaultTerminalProfit: number;
+  /** 默认终端系数 */
+  defaultTerminalRatio: number;
+  /** 可续费时长配置：[1,2,3] */
+  renewableDurationConfig: TSimFlowPackageInfoViewModel;
+  /** 可续费套餐编码列表 */
+  renewablePackageCodes?: string[];
+  /** 可变更套餐编码列表 */
+  changeablePackageCodes?: string[];
+  /** 可订购加油包套餐编码列表 */
+  topupPackageCodes?: string[];
+  /** 可续费套餐名称列表 */
+  renewablePackageNames?: string[];
+  /** 可变更套餐名称列表 */
+  changeablePackageNames?: string[];
+  /** 可订购加油包套餐名称列表 */
+  topupPackageNames?: string[];
+  /** 是否自动续费：0-是 1-否 */
+  isAutoRenew: number;
+  /** 自动续费套餐ID */
+  autoRenewPackageId: number;
+  /** 自动续费年限 */
+  autoRenewYears: number;
+  isTopDept?: boolean;
+}
+
+/** 获取SIM流量套餐管理列表 请求参数 */
+export interface TSimFlowPackageInfoListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 套餐编码 */
+  packageCode?: string;
+  /** 套餐分类编码 */
+  categoryCode?: string;
+  /** 套餐名称 */
+  packageName?: string;
+  /** 套餐类型：101-卡套餐 102-池套餐 103-单卡加油包 104-池卡加油包 */
+  packageType?: string;
+  /** 是否启用：0-否 1-是 */
+  enabled?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取SIM流量套餐管理列表 响应 */
+export type TSimFlowPackageInfoListRes =
+  GlobalListRes<TSimFlowPackageInfoModel>;
+
+/** 导出SIM流量套餐管理列表 请求参数 */
+export type TSimFlowPackageInfoExportParam = TSimFlowPackageInfoListParam;
+
+/** 修改/新增SIM流量套餐管理 请求参数 */
+export interface TSimFlowPackageInfoEditParam {
+  /** 主键ID */
+  id?: number;
+  /** 套餐编码 */
+  packageCode?: string;
+  /** 套餐分类编码 */
+  categoryCode?: string;
+  /** 池套餐编码 */
+  poolPackageCode?: number;
+  /** 套餐名称 */
+  packageName?: string;
+  /** 套餐类型：101-卡套餐 102-池套餐 103-单卡加油包 104-池卡加油包 */
+  packageType?: number;
+  /** 计费方式 */
+  billingMethod?: string;
+  /** 排序号 */
+  sortNo?: number;
+  /** 套餐流量(MB) */
+  flowMb?: number;
+  /** 套餐流量(GB) */
+  flowGb?: number;
+  /** 是否启用：0-否 1-是(yesno_enum) */
+  enabled?: number;
+  /** 目录售价 */
+  listPrice?: number;
+  /** 成本价 */
+  costPrice?: number;
+  /** 默认利润 */
+  defaultProfit?: number;
+  /** 默认系数 */
+  defaultRatio?: number;
+  /** 终端成本 */
+  terminalCost?: number;
+  /** 默认终端利润 */
+  defaultTerminalProfit?: number;
+  /** 默认终端系数 */
+  defaultTerminalRatio?: number;
+  /** 可续费时长配置：[1,2,3] */
+  renewableDurationConfig?: TSimFlowPackageInfoViewModel;
+  /** 是否自动续费：0-是 1-否 */
+  isAutoRenew?: number;
+  /** 自动续费套餐ID */
+  autoRenewPackageId?: number;
+  /** 自动续费年限 */
+  autoRenewYears?: number;
+}
+
+/** 获取SIM流量套餐管理指定信息 请求参数 */
+export interface TSimFlowPackageInfoViewParam {
+  /** 主键ID */
+  id: number;
+}
+
+/** 获取SIM流量套餐管理指定信息 响应 */
+export type TSimFlowPackageInfoViewRes = TSimFlowPackageInfoViewModel;
+
+/** 删除SIM流量套餐管理 请求参数 */
+export interface TSimFlowPackageInfoDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackagePrice/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackagePrice/index.ts
new file mode 100644
index 0000000..440bd7f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackagePrice/index.ts
@@ -0,0 +1,130 @@
+import type {
+  TSimFlowPackagePriceAgentDefaultPackagePriceInheritParam,
+  TSimFlowPackagePriceAgentDefaultPackagePriceListParam,
+  TSimFlowPackagePriceAgentDefaultPackagePriceListRes,
+  TSimFlowPackagePriceAgentDefaultPackagePriceSaveParam,
+  TSimFlowPackagePriceAgentPackagePriceInheritParam,
+  TSimFlowPackagePriceAgentPackagePriceListParam,
+  TSimFlowPackagePriceAgentPackagePriceListRes,
+  TSimFlowPackagePriceAgentPackagePriceSaveParam,
+  TSimFlowPackagePriceAgenttreeRes,
+  TSimFlowPackagePriceDeleteParam,
+  TSimFlowPackagePriceEditParam,
+  TSimFlowPackagePriceExportParam,
+  TSimFlowPackagePriceListParam,
+  TSimFlowPackagePriceListRes,
+  TSimFlowPackagePriceViewParam,
+  TSimFlowPackagePriceViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取SIM流量套餐定价列表
+export function List(params: TSimFlowPackagePriceListParam) {
+  return requestClient.get<TSimFlowPackagePriceListRes>(
+    'iot/tSimFlowPackagePrice/list',
+    { params },
+  );
+}
+
+// 查询本级默认套餐定价
+export function AgentDefaultPackagePriceList(
+  params: TSimFlowPackagePriceAgentDefaultPackagePriceListParam,
+) {
+  return requestClient.get<TSimFlowPackagePriceAgentDefaultPackagePriceListRes>(
+    'iot/tSimFlowPackagePrice/agentDefaultPackagePrice/list',
+    { params },
+  );
+}
+
+// 保存本级默认套餐定价
+export function AgentDefaultPackagePriceSave(
+  params: TSimFlowPackagePriceAgentDefaultPackagePriceSaveParam,
+) {
+  return requestClient.post(
+    'iot/tSimFlowPackagePrice/agentDefaultPackagePrice/save',
+    { ...params },
+  );
+}
+
+// 恢复上级套餐定价
+export function AgentDefaultPackagePriceInherit(
+  params: TSimFlowPackagePriceAgentDefaultPackagePriceInheritParam,
+) {
+  return requestClient.post(
+    'iot/tSimFlowPackagePrice/agentDefaultPackagePrice/inherit',
+    { ...params },
+  );
+}
+
+// 查询指定下级代理套餐生效定价
+export function AgentPackagePriceList(
+  params: TSimFlowPackagePriceAgentPackagePriceListParam,
+) {
+  return requestClient.get<TSimFlowPackagePriceAgentPackagePriceListRes>(
+    'iot/tSimFlowPackagePrice/agentPackagePrice/list',
+    { params },
+  );
+}
+
+// 保存下级代理专属套餐定价
+export function AgentPackagePriceSave(
+  params: TSimFlowPackagePriceAgentPackagePriceSaveParam,
+) {
+  return requestClient.post('iot/tSimFlowPackagePrice/agentPackagePrice/save', {
+    ...params,
+  });
+}
+
+// 恢复下级代理上级套餐定价
+export function AgentPackagePriceInherit(
+  params: TSimFlowPackagePriceAgentPackagePriceInheritParam,
+) {
+  return requestClient.post(
+    'iot/tSimFlowPackagePrice/agentPackagePrice/inherit',
+    {
+      ...params,
+    },
+  );
+}
+
+// 删除/批量删除SIM流量套餐定价
+export function Delete(params: TSimFlowPackagePriceDeleteParam) {
+  return requestClient.post('iot/tSimFlowPackagePrice/delete', { ...params });
+}
+
+// 添加/编辑SIM流量套餐定价
+export function Edit(params: TSimFlowPackagePriceEditParam) {
+  return requestClient.post('iot/tSimFlowPackagePrice/edit', { ...params });
+}
+
+// 获取SIM流量套餐定价指定详情
+export function View(params: TSimFlowPackagePriceViewParam) {
+  return requestClient.get<TSimFlowPackagePriceViewRes>(
+    'iot/tSimFlowPackagePrice/view',
+    {
+      params,
+    },
+  );
+}
+
+// 导出SIM流量套餐定价
+export function Export(params: TSimFlowPackagePriceExportParam) {
+  return requestClient.post<Blob>(
+    '/iot/tSimFlowPackagePrice/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
+
+// 获取渠道代理树形结构
+export function GetTSimFlowPackagePriceAgentTreeApi() {
+  return requestClient.get<TSimFlowPackagePriceAgenttreeRes>(
+    '/agent/dept/subCompany',
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackagePrice/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackagePrice/type.ts
new file mode 100644
index 0000000..2affc71
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackagePrice/type.ts
@@ -0,0 +1,332 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** SIM流量套餐定价列表项 */
+export interface TSimFlowPackagePriceModel {
+  /** 主键ID */
+  id: number;
+  /** 套餐编码 */
+  packageCode: string;
+  /** 套餐名称 */
+  packageName: string;
+  /** 渠道适用类型：0-所有客户 1-指定客户 */
+  agentScopeType: number;
+  /** 指定渠道客户ID */
+  targetAgentId: number;
+  /** 机构名称 */
+  deptName: string;
+  /** 渠道成本系数 */
+  agentCostRatio: number;
+  /** 渠道成本利润 */
+  agentCostProfit: number;
+  /** 终端用户成本系数 */
+  userCostRatio: number;
+  /** 终端用户成本利润 */
+  userCostProfit: number;
+  /** 是否启用：0-否 1-是(yesno_enum) */
+  enabled: number;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门ID */
+  createdDept: number;
+  /** 创建者ID */
+  createdBy: number;
+  /** 创建者ID摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者ID */
+  updatedBy: number;
+  /** 更新者ID摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取SIM流量套餐定价指定信息响应项 */
+export interface TSimFlowPackagePriceViewModel {
+  /** 主键ID */
+  id: number;
+  /** 套餐编码 */
+  packageCode: string;
+  /** 渠道适用类型：0-所有客户 1-指定客户 */
+  agentScopeType: number;
+  /** 指定渠道客户ID */
+  targetAgentId: number;
+  /** 机构编号 */
+  deptId: string;
+  /** 渠道成本系数 */
+  agentCostRatio: number;
+  /** 渠道成本利润 */
+  agentCostProfit: number;
+  /** 终端用户成本系数 */
+  userCostRatio: number;
+  /** 终端用户成本利润 */
+  userCostProfit: number;
+  /** 是否启用：0-否 1-是(yesno_enum) */
+  enabled: number;
+  /** 备注 */
+  remark: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门ID */
+  createdDept: number;
+  /** 创建者ID */
+  createdBy: number;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者ID */
+  updatedBy: number;
+  /** 更新时间 */
+  updatedAt: string;
+  /** 创建者ID摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 更新者ID摘要信息 */
+  updatedBySumma: MemberSumma;
+}
+
+/** 获取SIM流量套餐定价列表 请求参数 */
+export interface TSimFlowPackagePriceListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 套餐编码 */
+  packageCode?: string;
+  /** 渠道适用类型：0-所有客户 1-指定客户 */
+  agentScopeType?: number;
+  /** 指定渠道客户ID */
+  targetAgentId?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取SIM流量套餐定价列表 响应 */
+export type TSimFlowPackagePriceListRes =
+  GlobalListRes<TSimFlowPackagePriceModel>;
+
+/** 查询本级默认套餐定价 请求参数 */
+export interface TSimFlowPackagePriceAgentDefaultPackagePriceListParam {
+  /** 关键字 */
+  keyword?: string;
+  /** 套餐编码 */
+  packageCode?: string;
+  /** 套餐名称 */
+  packageName?: string;
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+}
+
+/** 本级/下级代理套餐价格列表项 */
+export interface TSimFlowPackagePriceAgentPackagePriceListItem {
+  /** 代理成本 */
+  agentCost?: number;
+  /** 代理成本利润 */
+  agentCostProfit?: number;
+  /** 代理成本系数 */
+  agentCostRatio?: number;
+  /** 本级代理默认定价ID，没有则为0 */
+  agentDefaultPriceId?: number;
+  /** 代理出货价 */
+  agentShipmentPrice?: number;
+  /** 是否启用：0-否 1-是 */
+  enabled?: number;
+  /** 套餐编码 */
+  packageCode?: string;
+  /** 套餐名称 */
+  packageName?: string;
+  /** 价格来源：system-系统兜底/agentDefault-本级默认/target-下级专属 */
+  priceSource?: string;
+  /** 备注 */
+  remark?: string;
+  /** 目标代理ID */
+  targetAgentId?: number;
+  /** 本级对当前下级代理的专属定价ID，没有则为0 */
+  targetPriceId?: number;
+  /** 终端成本 */
+  terminalCost?: number;
+  /** 终端成本利润 */
+  terminalCostProfit?: number;
+  /** 终端成本系数 */
+  terminalCostRatio?: number;
+  /** 终端售价 */
+  terminalSalePrice?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 查询本级默认套餐定价 响应 */
+export type TSimFlowPackagePriceAgentDefaultPackagePriceListRes =
+  GlobalListRes<TSimFlowPackagePriceAgentPackagePriceListItem>;
+
+/** 保存本级默认套餐定价项 */
+export interface TSimFlowPackagePriceAgentDefaultPackagePriceSaveItem {
+  /** 渠道利润 */
+  agentCostProfit?: number;
+  /** 渠道成本系数 */
+  agentCostRatio?: number;
+  /** 本级默认定价ID */
+  agentDefaultPriceId?: number;
+  /** 套餐编码 */
+  packageCode?: string;
+  /** 价格来源：system/agentDefault */
+  priceSource?: string;
+  /** 备注 */
+  remark?: string;
+  /** 终端利润 */
+  terminalCostProfit?: number;
+  /** 终端成本系数 */
+  terminalCostRatio?: number;
+}
+
+/** 保存本级默认套餐定价 请求参数 */
+export interface TSimFlowPackagePriceAgentDefaultPackagePriceSaveParam {
+  /** 保存项 */
+  items?: TSimFlowPackagePriceAgentDefaultPackagePriceSaveItem[];
+}
+
+/** 恢复本级默认套餐定价项 */
+export interface TSimFlowPackagePriceAgentDefaultPackagePriceInheritItem {
+  /** 本级默认定价ID */
+  agentDefaultPriceId?: number;
+  /** 套餐编码 */
+  packageCode?: string;
+}
+
+/** 恢复本级默认套餐定价 请求参数 */
+export interface TSimFlowPackagePriceAgentDefaultPackagePriceInheritParam {
+  /** 恢复项 */
+  items?: TSimFlowPackagePriceAgentDefaultPackagePriceInheritItem[];
+}
+
+/** 查询指定下级代理套餐生效定价 请求参数 */
+export interface TSimFlowPackagePriceAgentPackagePriceListParam extends TSimFlowPackagePriceAgentDefaultPackagePriceListParam {
+  /** 指定下级代理ID */
+  targetAgentId?: number;
+}
+
+/** 查询指定下级代理套餐生效定价 响应 */
+export type TSimFlowPackagePriceAgentPackagePriceListRes =
+  GlobalListRes<TSimFlowPackagePriceAgentPackagePriceListItem>;
+
+/** 保存下级代理专属套餐定价项 */
+export interface TSimFlowPackagePriceAgentPackagePriceSaveItem extends TSimFlowPackagePriceAgentDefaultPackagePriceSaveItem {
+  /** 下级专属定价ID */
+  targetPriceId?: number;
+}
+
+/** 保存下级代理专属套餐定价 请求参数 */
+export interface TSimFlowPackagePriceAgentPackagePriceSaveParam {
+  /** 保存项 */
+  items?: TSimFlowPackagePriceAgentPackagePriceSaveItem[];
+  /** 指定下级代理ID */
+  targetAgentId?: number;
+}
+
+/** 恢复下级代理专属套餐定价项 */
+export interface TSimFlowPackagePriceAgentPackagePriceInheritItem {
+  /** 下级专属定价ID */
+  targetPriceId?: number;
+  /** 套餐编码 */
+  packageCode?: string;
+}
+
+/** 恢复下级代理专属套餐定价 请求参数 */
+export interface TSimFlowPackagePriceAgentPackagePriceInheritParam {
+  /** 恢复项 */
+  items?: TSimFlowPackagePriceAgentPackagePriceInheritItem[];
+  /** 指定下级代理ID */
+  targetAgentId?: number;
+}
+
+/** 导出SIM流量套餐定价列表 请求参数 */
+export type TSimFlowPackagePriceExportParam = TSimFlowPackagePriceListParam;
+
+/** 修改/新增SIM流量套餐定价 请求参数 */
+export interface TSimFlowPackagePriceEditParam {
+  /** 主键ID */
+  id?: number;
+  /** 套餐编码 */
+  packageCode?: string;
+  /** 渠道适用类型：0-所有客户 1-指定客户 */
+  agentScopeType?: number;
+  /** 指定渠道客户ID */
+  targetAgentId?: number;
+  /** 机构编号 */
+  deptId?: string;
+  /** 渠道成本系数 */
+  agentCostRatio?: number;
+  /** 渠道成本利润 */
+  agentCostProfit?: number;
+  /** 终端用户成本系数 */
+  userCostRatio?: number;
+  /** 终端用户成本利润 */
+  userCostProfit?: number;
+  /** 是否启用：0-否 1-是(yesno_enum) */
+  enabled?: number;
+  /** 备注 */
+  remark?: string;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门ID */
+  createdDept?: number;
+  /** 创建者ID */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者ID */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取SIM流量套餐定价指定信息 请求参数 */
+export interface TSimFlowPackagePriceViewParam {
+  /** 主键ID */
+  id: number;
+}
+
+/** 获取SIM流量套餐定价指定信息 响应 */
+export type TSimFlowPackagePriceViewRes = TSimFlowPackagePriceViewModel;
+
+/** 删除SIM流量套餐定价 请求参数 */
+export interface TSimFlowPackagePriceDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
+
+/** 获取渠道代理树形结构响应项 */
+export interface TSimFlowPackagePriceAgenttreeModel {
+  /** 节点ID */
+  id?: number | string;
+  /** 代理ID */
+  agentId?: number | string;
+  /** 组织ID */
+  deptId?: number | string;
+  /** 树节点Key */
+  key?: number | string;
+  /** 树节点标题 */
+  title?: string;
+  /** 代理名称 */
+  agentName?: string;
+  /** 组织名称 */
+  deptName?: string;
+  /** 节点名称 */
+  name?: string;
+  /** 上级ID */
+  parentId?: number | string;
+  /** 子节点 */
+  children?: TSimFlowPackagePriceAgenttreeModel[];
+  /** 代理/公司树 */
+  items?: TSimFlowPackagePriceAgenttreeModel[];
+}
+
+/** 获取渠道代理树形结构 响应 */
+export interface TSimFlowPackagePriceAgenttreeRes {
+  /** 代理/公司树 */
+  items: TSimFlowPackagePriceAgenttreeModel[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPool/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPool/index.ts
new file mode 100644
index 0000000..5892413
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPool/index.ts
@@ -0,0 +1,57 @@
+import type {
+  TSimFlowPoolDeleteParam,
+  TSimFlowPoolEditParam,
+  TSimFlowPoolExportParam,
+  TSimFlowPoolListParam,
+  TSimFlowPoolListRes,
+  TSimFlowPoolViewParam,
+  TSimFlowPoolViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取流量池表列表
+export function List(params: TSimFlowPoolListParam) {
+  return requestClient.get<TSimFlowPoolListRes>('iot/tSimFlowPool/list', {
+    params,
+  });
+}
+
+// 删除/批量删除流量池表
+export function Delete(params: TSimFlowPoolDeleteParam) {
+  return requestClient.post('iot/tSimFlowPool/delete', { ...params });
+}
+
+// 添加/编辑流量池表
+export function Edit(params: TSimFlowPoolEditParam) {
+  return requestClient.post('iot/tSimFlowPool/edit', { ...params });
+}
+
+// 获取流量池表指定详情
+export function View(params: TSimFlowPoolViewParam) {
+  return requestClient.get<TSimFlowPoolViewRes>('iot/tSimFlowPool/view', {
+    params,
+  });
+}
+
+// 导出流量池表
+export function Export(params: TSimFlowPoolExportParam) {
+  return requestClient.post<Blob>(
+    '/iot/tSimFlowPool/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
+
+// 根据套餐编码获取流量池下关联的卡列表
+export function GetCardsByPackageCodes(params: { packageCodes: string[] }) {
+  return requestClient.post<any>(
+    '/iot/tSimFlowPool/getCardsByPackageCodes',
+    params,
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPool/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPool/type.ts
new file mode 100644
index 0000000..177b08c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPool/type.ts
@@ -0,0 +1,187 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 流量池表列表项 */
+export interface TSimFlowPoolModel {
+  /** 主键ID */
+  id: number;
+  /** 流量池编号 */
+  flowPoolCode: string;
+  /** 客户编号 */
+  deptId: number;
+  /** 客户名称 */
+  deptName: string;
+  /** 池套餐编码 */
+  poolPackageCode: number;
+  /** 池套餐名称 */
+  poolPackageName: string;
+  /** 关联卡数量 */
+  cardCount: number;
+  /** 套餐卡流量MB */
+  cardFlowMb: number;
+  /** 套内总流量MB */
+  poolPackageFlowMb: number;
+  /** 加油包总流量MB */
+  addOnFlowMb: number;
+  /** 总流量MB(套内+加油包) */
+  totalFlowMb: number;
+  /** 已使用流量MB */
+  usedFlowMb: number;
+  /** 剩余流量MB */
+  remainFlowMb: number;
+  /** 状态：0 正常、1 停用、2 锁定 */
+  poolStatus: number;
+  /** 备注 */
+  remark: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取流量池表指定信息响应项 */
+export interface TSimFlowPoolViewModel {
+  /** 主键ID */
+  id: number;
+  /** 流量池编号 */
+  flowPoolCode: string;
+  /** 客户编号 */
+  deptId: number;
+  /** 套餐编号列表（冗余） */
+  packageCodes: string[];
+  /** 池套餐编码 */
+  poolPackageCode: number;
+  /** 关联卡数量 */
+  cardCount: number;
+  /** 套餐卡流量MB */
+  cardFlowMb: number;
+  /** 套内总流量MB */
+  poolPackageFlowMb: number;
+  /** 加油包总流量MB */
+  addOnFlowMb: number;
+  /** 总流量MB(套内+加油包) */
+  totalFlowMb: number;
+  /** 已使用流量MB */
+  usedFlowMb: number;
+  /** 剩余流量MB */
+  remainFlowMb: number;
+  /** 状态：0 正常、1 停用、2 锁定 */
+  poolStatus: number;
+  /** 备注 */
+  remark: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新时间 */
+  updatedAt: string;
+  /** 客户名称 */
+  deptName: string;
+  /** 池套餐名称 */
+  poolPackageName: string;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+}
+
+/** 获取流量池表列表 请求参数 */
+export interface TSimFlowPoolListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 主键ID */
+  id?: number;
+  /** 状态：0 正常、1 停用、2 锁定 */
+  poolStatus?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+  /** 流量池编号 */
+  flowPoolCode?: string;
+}
+
+/** 获取流量池表列表 响应 */
+export type TSimFlowPoolListRes = GlobalListRes<TSimFlowPoolModel>;
+
+/** 导出流量池表列表 请求参数 */
+export type TSimFlowPoolExportParam = TSimFlowPoolListParam;
+
+/** 修改/新增流量池表 请求参数 */
+export interface TSimFlowPoolEditParam {
+  /** 主键ID */
+  id?: number;
+  /** 流量池编号 */
+  flowPoolCode?: string;
+  /** 客户编号 */
+  deptId?: number;
+  /** 套餐编号列表（冗余） */
+  packageCodes?: string[];
+  /** 池套餐编码 */
+  poolPackageCode?: number;
+  /** 关联卡数量 */
+  cardCount?: number;
+  /** 套餐卡流量MB */
+  cardFlowMb?: number;
+  /** 套内总流量MB */
+  poolPackageFlowMb?: number;
+  /** 加油包总流量MB */
+  addOnFlowMb?: number;
+  /** 总流量MB(套内+加油包) */
+  totalFlowMb?: number;
+  /** 已使用流量MB */
+  usedFlowMb?: number;
+  /** 剩余流量MB */
+  remainFlowMb?: number;
+  /** 状态：0 正常、1 停用、2 锁定 */
+  poolStatus?: number;
+  /** 备注 */
+  remark?: string;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门 */
+  createdDept?: number;
+  /** 创建者 */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者 */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取流量池表指定信息 请求参数 */
+export interface TSimFlowPoolViewParam {
+  /** 主键ID */
+  id: number;
+}
+
+/** 获取流量池表指定信息 响应 */
+export type TSimFlowPoolViewRes = TSimFlowPoolViewModel;
+
+/** 删除流量池表 请求参数 */
+export interface TSimFlowPoolDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimPackageCategory/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimPackageCategory/index.ts
new file mode 100644
index 0000000..6d03714
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimPackageCategory/index.ts
@@ -0,0 +1,53 @@
+import type {
+  TSimPackageCategoryDeleteParam,
+  TSimPackageCategoryEditParam,
+  TSimPackageCategoryExportParam,
+  TSimPackageCategoryListParam,
+  TSimPackageCategoryListRes,
+  TSimPackageCategoryViewParam,
+  TSimPackageCategoryViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取套餐分类表列表
+export function List(params: TSimPackageCategoryListParam) {
+  return requestClient.get<TSimPackageCategoryListRes>(
+    'iot/tSimPackageCategory/list',
+    { params },
+  );
+}
+
+// 删除/批量删除套餐分类表
+export function Delete(params: TSimPackageCategoryDeleteParam) {
+  return requestClient.post('iot/tSimPackageCategory/delete', { ...params });
+}
+
+// 添加/编辑套餐分类表
+export function Edit(params: TSimPackageCategoryEditParam) {
+  return requestClient.post('iot/tSimPackageCategory/edit', { ...params });
+}
+
+// 获取套餐分类表指定详情
+export function View(params: TSimPackageCategoryViewParam) {
+  return requestClient.get<TSimPackageCategoryViewRes>(
+    'iot/tSimPackageCategory/view',
+    {
+      params,
+    },
+  );
+}
+
+// 导出套餐分类表
+export function Export(params: TSimPackageCategoryExportParam) {
+  return requestClient.post<Blob>(
+    '/iot/tSimPackageCategory/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimPackageCategory/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimPackageCategory/type.ts
new file mode 100644
index 0000000..5a014ae
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimPackageCategory/type.ts
@@ -0,0 +1,95 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 套餐分类表列表项 */
+export interface TSimPackageCategoryModel {
+  /** 主键ID */
+  id: number;
+  /** 套餐分类编号 */
+  categoryCode: string;
+  /** 套餐分类名称 */
+  categoryName: string;
+  /** 排序 */
+  sortNo: number;
+  /** 是否启用 */
+  enabled: number;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取套餐分类表列表 请求参数 */
+export interface TSimPackageCategoryListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 套餐分类编号 */
+  categoryCode?: string;
+  /** 套餐分类名称 */
+  categoryName?: string;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取套餐分类表列表 响应 */
+export type TSimPackageCategoryListRes = GlobalListRes<TSimPackageCategoryModel>;
+
+/** 导出套餐分类表列表 请求参数 */
+export type TSimPackageCategoryExportParam = TSimPackageCategoryListParam;
+
+/** 修改/新增套餐分类表 请求参数 */
+export interface TSimPackageCategoryEditParam {
+  /** 主键ID */
+  id?: number;
+  /** 套餐分类编号 */
+  categoryCode?: string;
+  /** 套餐分类名称 */
+  categoryName?: string;
+  /** 排序 */
+  sortNo?: number;
+  /** 是否启用 */
+  enabled?: number;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门 */
+  createdDept?: number;
+  /** 创建者 */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者 */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取套餐分类表指定信息 请求参数 */
+export interface TSimPackageCategoryViewParam {
+  /** 主键ID */
+  id: number;
+}
+
+/** 获取套餐分类表指定信息 响应 */
+export type TSimPackageCategoryViewRes = TSimPackageCategoryModel;
+
+/** 删除套餐分类表 请求参数 */
+export interface TSimPackageCategoryDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimUpstreamPackage/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimUpstreamPackage/index.ts
new file mode 100644
index 0000000..6414fff
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimUpstreamPackage/index.ts
@@ -0,0 +1,53 @@
+import type {
+  TSimUpstreamPackageDeleteParam,
+  TSimUpstreamPackageEditParam,
+  TSimUpstreamPackageExportParam,
+  TSimUpstreamPackageListParam,
+  TSimUpstreamPackageListRes,
+  TSimUpstreamPackageViewParam,
+  TSimUpstreamPackageViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取上游套餐表列表
+export function List(params: TSimUpstreamPackageListParam) {
+  return requestClient.get<TSimUpstreamPackageListRes>(
+    'iot/tSimUpstreamPackage/list',
+    { params },
+  );
+}
+
+// 删除/批量删除上游套餐表
+export function Delete(params: TSimUpstreamPackageDeleteParam) {
+  return requestClient.post('iot/tSimUpstreamPackage/delete', { ...params });
+}
+
+// 添加/编辑上游套餐表
+export function Edit(params: TSimUpstreamPackageEditParam) {
+  return requestClient.post('iot/tSimUpstreamPackage/edit', { ...params });
+}
+
+// 获取上游套餐表指定详情
+export function View(params: TSimUpstreamPackageViewParam) {
+  return requestClient.get<TSimUpstreamPackageViewRes>(
+    'iot/tSimUpstreamPackage/view',
+    {
+      params,
+    },
+  );
+}
+
+// 导出上游套餐表
+export function Export(params: TSimUpstreamPackageExportParam) {
+  return requestClient.post<Blob>(
+    '/iot/tSimUpstreamPackage/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimUpstreamPackage/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimUpstreamPackage/type.ts
new file mode 100644
index 0000000..d75fc57
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tPricingPackage/tSimUpstreamPackage/type.ts
@@ -0,0 +1,97 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 上游套餐表列表项 */
+export interface TSimUpstreamPackageModel {
+  /** 主键 */
+  id: number;
+  /** 上游套餐编码 */
+  upPkgCode: string;
+  /** 上游套餐名称 */
+  upPkgName: string;
+  /** 运营商：1移动，2联通，3电信 */
+  operator: number;
+  /** APN名称 */
+  apnName: string;
+  /** 备注 */
+  remark: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建时间 */
+  createdAt: string;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+}
+
+/** 获取上游套餐表列表 请求参数 */
+export interface TSimUpstreamPackageListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 上游套餐编码 */
+  upPkgCode?: string;
+  /** 上游套餐名称 */
+  upPkgName?: string;
+  /** 运营商：1移动，2联通，3电信 */
+  operator?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取上游套餐表列表 响应 */
+export type TSimUpstreamPackageListRes = GlobalListRes<TSimUpstreamPackageModel>;
+
+/** 导出上游套餐表列表 请求参数 */
+export type TSimUpstreamPackageExportParam = TSimUpstreamPackageListParam;
+
+/** 修改/新增上游套餐表 请求参数 */
+export interface TSimUpstreamPackageEditParam {
+  /** 主键 */
+  id?: number;
+  /** 上游套餐编码 */
+  upPkgCode?: string;
+  /** 上游套餐名称 */
+  upPkgName?: string;
+  /** 运营商：1移动，2联通，3电信 */
+  operator?: number;
+  /** APN名称 */
+  apnName?: string;
+  /** 备注 */
+  remark?: string;
+  /** 创建部门 */
+  createdDept?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 创建者 */
+  createdBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+  /** 更新者 */
+  updatedBy?: number;
+}
+
+/** 获取上游套餐表指定信息 请求参数 */
+export interface TSimUpstreamPackageViewParam {
+  /** 主键 */
+  id: number;
+}
+
+/** 获取上游套餐表指定信息 响应 */
+export type TSimUpstreamPackageViewRes = TSimUpstreamPackageModel;
+
+/** 删除上游套餐表 请求参数 */
+export interface TSimUpstreamPackageDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tSimDiagnose/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tSimDiagnose/index.ts
new file mode 100644
index 0000000..3876b57
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tSimDiagnose/index.ts
@@ -0,0 +1,30 @@
+import type {
+  SimDiagnoseFlowParam,
+  SimDiagnoseFlowRes,
+  SimDiagnoseInfoParam,
+  SimDiagnoseInfoRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+const silentErrorConfig = {
+  errorMessageMode: 'none',
+} as const;
+
+// 获取卡诊断信息（基本信息、会话信息、套餐信息）
+export function GetSimDiagnoseInfo(params: SimDiagnoseInfoParam) {
+  return requestClient.post<SimDiagnoseInfoRes>(
+    '/iot/tSimdiagnose/info',
+    params,
+    silentErrorConfig,
+  );
+}
+
+// 获取卡流量数据
+export function GetSimDiagnoseFlow(params: SimDiagnoseFlowParam) {
+  return requestClient.post<SimDiagnoseFlowRes>(
+    '/iot/tSimdiagnose/flow',
+    params,
+    silentErrorConfig,
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tSimDiagnose/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tSimDiagnose/type.ts
new file mode 100644
index 0000000..112b5c8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tSimDiagnose/type.ts
@@ -0,0 +1,160 @@
+// 卡诊断信息接口
+export interface SimDiagnoseInfoParam {
+  /** 查询码：ICCID / MSISDN / IMSI */
+  queryCode: string;
+  onlyFlow?: boolean;
+}
+
+export interface SimDiagnoseModuleItem {
+  reason?: string;
+  /** 状态：success / error / cached / skipped */
+  status: 'cached' | 'error' | 'skipped' | 'success' | string;
+  /** 状态说明 */
+  message?: string;
+  /** 是否使用缓存 */
+  cached?: boolean;
+  /** 缓存更新时间 */
+  updatedAt?: string;
+}
+
+export interface SimDiagnoseRateLimitPccItem {
+  pccServiceCode?: string;
+  pccName?: string;
+  pccPolicyStatus?: string;
+  pccServiceUsageState?: string;
+  modifyTime?: string;
+}
+
+export interface SimDiagnoseRateLimitApnItem {
+  apnName?: string;
+  apnStatus?: string;
+  modifyTime?: string;
+  overUseDetails?: string;
+  apnServiceUsageState?: string;
+  pccDetails?: SimDiagnoseRateLimitPccItem[];
+}
+
+// 卡信息
+export interface SimDiagnoseInfo {
+  /** ICCID */
+  iccid?: string;
+  /** IMSI */
+  imsi?: string;
+  /** MSISDN */
+  msisdn?: string;
+  /** 卡状态：0未知 1待激活 2已激活 4已停机 6可测试 7库存 8预销户 9已销户 */
+  status?: string;
+  /** 数据状态：0关闭/停用 1开启/启用 */
+  dataStatus?: string;
+  dataServiceSource?: 'apn' | 'network_block';
+  netBlockStatus?: string;
+  netBlockReason?: string;
+  /** 在线状态：0离线 1在线 2未知 */
+  onlineStatus?: string;
+  /** 终端开关机状态：0关机 1开机 */
+  operatingStatus?: string;
+  /** 设备状态：0异常/不可用 1正常 */
+  deviceStatus?: string;
+  /** 机卡状态：0异常/机卡分离 1正常 2未知 */
+  imeiStatus?: string;
+  /** 区域限制状态：0受限/已触发 1正常/未触发 2未知 */
+  regionLimitStatus?: string;
+  /** 区域限制订购状态：0已订购 1未订购 */
+  regionLimitOrderStatus?: string;
+  /** 区域限制触发状态：0已断网 1未断网 2未知 */
+  regionLimitTriggerStatus?: string;
+  /** 区域限制类型 */
+  regionLimitType?: string;
+  /** 限制区域 */
+  regionLimitArea?: string;
+  /** 人联网限制状态：0限制 1正常 2未知 3运营商暂不支持 */
+  humanLimitStatus?: string;
+  /** 达量限速状态：0已触发 1未触发 2未知 3运营商暂不支持 */
+  rateLimitStatus?: string;
+  /** 达量限速原因 */
+  rateLimitReason?: string;
+  /** 达量限速明细 */
+  rateLimitDetail?: string;
+  /** APN达量限速明细 */
+  rateLimitApnDetails?: SimDiagnoseRateLimitApnItem[];
+  /** 套餐总流量 MB */
+  packageTotalFlowMb?: number;
+  /** 已用流量 MB */
+  usedFlowMb?: number;
+  /** 剩余流量 MB */
+  remainFlowMb?: number;
+  /** 流量同步时间 */
+  flowSyncTime?: string;
+  /** 停机原因 */
+  stopReason?: string;
+  /** 冻结状态 */
+  frozenStatus?: string;
+  /** 冻结原因 */
+  frozenReason?: string;
+  /** 冻结时间 */
+  frozenOperTime?: string;
+}
+
+// 会话信息
+export interface SimDiagnoseSession {
+  /** APN */
+  apnId?: string;
+  /** 近30天最新终端使用 IMEI */
+  imei?: string;
+  /** 接入方式 */
+  rat?: string;
+  /** IPV4 */
+  ipv4?: string;
+  /** IPV6 */
+  ipv6?: string;
+  /** IPV6 前缀 */
+  ipv6Prefix?: string;
+  /** 会话状态：0在线 -1离线 -2未查询到会话 */
+  status?: string;
+  /** 会话创建时间 */
+  createTime?: string;
+}
+
+// 套餐信息
+export interface SimDiagnosePackage {
+  /** 套餐名称 */
+  packageName?: string;
+  /** 套餐类型 */
+  packageType?: string;
+  /** 生效状态：0待生效 1生效中 2已过期 3已终止 4已作废 */
+  effectiveStatus?: string;
+  /** 套餐总流量 MB */
+  packageTotalFlowMb?: number;
+  /** 套餐时长（月） */
+  durationMonths?: number;
+  /** 预计到期时间 */
+  expectedExpireTime?: string;
+}
+
+// 卡诊断信息响应
+export interface SimDiagnoseInfoRes {
+  info: null | SimDiagnoseInfo;
+  modules?: Record<string, SimDiagnoseModuleItem>;
+  package: null | SimDiagnosePackage;
+  session: null | SimDiagnoseSession;
+}
+
+// 流量查询参数
+export interface SimDiagnoseFlowParam {
+  /** 查询码：ICCID / MSISDN / IMSI */
+  queryCode: string;
+  /** 查询类型：7d近7天、30d近30天、6M近6个月 */
+  queryType: '6M' | '7d' | '30d';
+}
+
+// 流量查询响应
+export interface SimDiagnoseFlowRes {
+  /** 时间节点 */
+  times: string[];
+  /** 流量数据 */
+  flow: number[];
+  /** 各时间节点是否存在采集记录 */
+  flowAvailable?: boolean[];
+  /** 流量单位：MB / GB */
+  unit: string;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tWarnCenter/simWarningConfig/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tWarnCenter/simWarningConfig/index.ts
new file mode 100644
index 0000000..cd32871
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tWarnCenter/simWarningConfig/index.ts
@@ -0,0 +1,41 @@
+import type {
+  SimWarningConfigDeleteParam,
+  SimWarningConfigListParam,
+  SimWarningConfigListRes,
+  SimWarningConfigSaveParam,
+  SimWarningConfigSaveRes,
+  SimWarningConfigStatusParam,
+  SimWarningConfigViewParam,
+  SimWarningConfigViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+export function List(params: SimWarningConfigListParam) {
+  return requestClient.get<SimWarningConfigListRes>(
+    '/iot/simWarningConfig/list',
+    { params },
+  );
+}
+
+export function View(params: SimWarningConfigViewParam) {
+  return requestClient.get<SimWarningConfigViewRes>(
+    '/iot/simWarningConfig/view',
+    { params },
+  );
+}
+
+export function Save(params: SimWarningConfigSaveParam) {
+  return requestClient.post<SimWarningConfigSaveRes>(
+    '/iot/simWarningConfig/save',
+    { ...params },
+  );
+}
+
+export function Status(params: SimWarningConfigStatusParam) {
+  return requestClient.post('/iot/simWarningConfig/status', { ...params });
+}
+
+export function Delete(params: SimWarningConfigDeleteParam) {
+  return requestClient.post('/iot/simWarningConfig/delete', { ...params });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/tWarnCenter/simWarningConfig/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tWarnCenter/simWarningConfig/type.ts
new file mode 100644
index 0000000..2d6f71a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/tWarnCenter/simWarningConfig/type.ts
@@ -0,0 +1,80 @@
+import type { GlobalListRes } from '#/types/global';
+
+export interface SimWarningConfigModel {
+  id: number;
+  tenantId?: string;
+  itemType: number;
+  itemId: number;
+  itemCode: string;
+  batchNo?: string;
+  warnType?: number;
+  warnUnit: number;
+  firstWarn?: number;
+  secondWarn?: number;
+  thirdWarn?: number;
+  warnMethods?: string;
+  warnPhones?: string;
+  warnEmails?: string;
+  autoAction?: number;
+
+  isEnabled: number;
+  wxTemplateId?: string;
+  remark?: string;
+  createdDept?: number;
+  createdBy?: number;
+  createdAt?: string;
+  updatedBy?: number;
+  updatedAt?: string;
+}
+
+export interface SimWarningConfigListParam {
+  page?: number;
+  pageSize?: number;
+  keyword?: string;
+  id?: number;
+  itemType?: number;
+  itemId?: number;
+  itemCode?: string;
+  warnUnit?: number;
+  isEnabled?: number;
+}
+
+export type SimWarningConfigListRes = GlobalListRes<SimWarningConfigModel>;
+
+export interface SimWarningConfigViewParam {
+  id: number;
+}
+
+export type SimWarningConfigViewRes = SimWarningConfigModel;
+
+export interface SimWarningConfigSaveParam {
+  id?: number;
+  itemType: number;
+  itemId?: number;
+  itemCode: string;
+  batchNo?: string;
+  warnUnit: number;
+  firstWarn: number;
+  secondWarn?: number;
+  thirdWarn?: number;
+  warnMethods?: string;
+  warnPhones?: string;
+  warnEmails?: string;
+  autoAction?: number;
+
+  isEnabled?: number;
+  remark?: string;
+}
+
+export interface SimWarningConfigSaveRes {
+  id: number;
+}
+
+export interface SimWarningConfigStatusParam {
+  id: number;
+  isEnabled: number;
+}
+
+export interface SimWarningConfigDeleteParam {
+  id: number;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tAgentEnterprise/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tAgentEnterprise/index.ts
new file mode 100644
index 0000000..f7ebdfd
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tAgentEnterprise/index.ts
@@ -0,0 +1,53 @@
+import type {
+  TAgentEnterpriseDeleteParam,
+  TAgentEnterpriseEditParam,
+  TAgentEnterpriseExportParam,
+  TAgentEnterpriseListParam,
+  TAgentEnterpriseListRes,
+  TAgentEnterpriseViewParam,
+  TAgentEnterpriseViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取企业客户单位信息列表
+export function List(params: TAgentEnterpriseListParam) {
+  return requestClient.get<TAgentEnterpriseListRes>(
+    'agent/tAgentEnterprise/list',
+    { params },
+  );
+}
+
+// 删除/批量删除企业客户单位信息
+export function Delete(params: TAgentEnterpriseDeleteParam) {
+  return requestClient.post('agent/tAgentEnterprise/delete', { ...params });
+}
+
+// 添加/编辑企业客户单位信息
+export function Edit(params: TAgentEnterpriseEditParam) {
+  return requestClient.post('agent/tAgentEnterprise/edit', { ...params });
+}
+
+// 获取企业客户单位信息指定详情
+export function View(params: TAgentEnterpriseViewParam) {
+  return requestClient.get<TAgentEnterpriseViewRes>(
+    'agent/tAgentEnterprise/view',
+    {
+      params,
+    },
+  );
+}
+
+// 导出企业客户单位信息
+export function Export(params: TAgentEnterpriseExportParam) {
+  return requestClient.post<Blob>(
+    '/agent/tAgentEnterprise/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tAgentEnterprise/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tAgentEnterprise/type.ts
new file mode 100644
index 0000000..9f39131
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tAgentEnterprise/type.ts
@@ -0,0 +1,113 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 企业客户单位信息列表项 */
+export interface TAgentEnterpriseModel {
+  /** 主键ID */
+  id: number;
+  /** 部门机构id */
+  deptId: number;
+  /** 单位全称 */
+  fullName: string;
+  /** 行业 */
+  industry: string;
+  /** 法人名称 */
+  legalPersonName: string;
+  /** 法人身份证号 */
+  legalPersonIdCard: string;
+  /** 单位类型 */
+  companyType: string;
+  /** 单位成立时间 */
+  establishTime: string;
+  /** 开户行名称 */
+  bankName: string;
+  /** 开户行账号 */
+  bankAccount: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取企业客户单位信息列表 请求参数 */
+export interface TAgentEnterpriseListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 主键ID */
+  id?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取企业客户单位信息列表 响应 */
+export type TAgentEnterpriseListRes = GlobalListRes<TAgentEnterpriseModel>;
+
+/** 导出企业客户单位信息列表 请求参数 */
+export type TAgentEnterpriseExportParam = TAgentEnterpriseListParam;
+
+/** 修改/新增企业客户单位信息 请求参数 */
+export interface TAgentEnterpriseEditParam {
+  /** 主键ID */
+  id?: number;
+  /** 部门机构id */
+  deptId?: number;
+  /** 单位全称 */
+  fullName?: string;
+  /** 行业 */
+  industry?: string;
+  /** 法人名称 */
+  legalPersonName?: string;
+  /** 法人身份证号 */
+  legalPersonIdCard?: string;
+  /** 单位类型 */
+  companyType?: string;
+  /** 单位成立时间 */
+  establishTime?: string;
+  /** 开户行名称 */
+  bankName?: string;
+  /** 开户行账号 */
+  bankAccount?: string;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门 */
+  createdDept?: number;
+  /** 创建者 */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者 */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取企业客户单位信息指定信息 请求参数 */
+export interface TAgentEnterpriseViewParam {
+  /** 部门机构id */
+  deptId: number;
+}
+
+/** 获取企业客户单位信息指定信息 响应 */
+export type TAgentEnterpriseViewRes = TAgentEnterpriseModel;
+
+/** 删除企业客户单位信息 请求参数 */
+export interface TAgentEnterpriseDeleteParam {
+  /** 部门机构id */
+  deptId: number;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tCustWithdrawAccount/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tCustWithdrawAccount/index.ts
new file mode 100644
index 0000000..15c9fd5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tCustWithdrawAccount/index.ts
@@ -0,0 +1,53 @@
+import type {
+  TCustWithdrawAccountDeleteParam,
+  TCustWithdrawAccountEditParam,
+  TCustWithdrawAccountExportParam,
+  TCustWithdrawAccountListParam,
+  TCustWithdrawAccountListRes,
+  TCustWithdrawAccountViewParam,
+  TCustWithdrawAccountViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取客户提现账户表列表
+export function List(params: TCustWithdrawAccountListParam) {
+  return requestClient.get<TCustWithdrawAccountListRes>(
+    'agent/tCustWithdrawAccount/list',
+    { params },
+  );
+}
+
+// 删除/批量删除客户提现账户表
+export function Delete(params: TCustWithdrawAccountDeleteParam) {
+  return requestClient.post('agent/tCustWithdrawAccount/delete', { ...params });
+}
+
+// 添加/编辑客户提现账户表
+export function Edit(params: TCustWithdrawAccountEditParam) {
+  return requestClient.post('agent/tCustWithdrawAccount/edit', { ...params });
+}
+
+// 获取客户提现账户表指定详情
+export function View(params: TCustWithdrawAccountViewParam) {
+  return requestClient.get<TCustWithdrawAccountViewRes>(
+    'agent/tCustWithdrawAccount/view',
+    {
+      params,
+    },
+  );
+}
+
+// 导出客户提现账户表
+export function Export(params: TCustWithdrawAccountExportParam) {
+  return requestClient.post<Blob>(
+    '/agent/tCustWithdrawAccount/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tCustWithdrawAccount/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tCustWithdrawAccount/type.ts
new file mode 100644
index 0000000..f8e89c6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tCustWithdrawAccount/type.ts
@@ -0,0 +1,155 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 客户提现账户表列表项 */
+export interface TCustWithdrawAccountModel {
+  /** 主键ID */
+  id: number;
+  /** 企业客户ID */
+  deptId: number;
+  /** 提现账号类型，1：支付宝，2：微信 */
+  accountType: number;
+  /** 账户名称/真实姓名 */
+  accountName: string;
+  /** 手机号 */
+  mobile: string;
+  /** 是否默认账号：0-否 1-是 */
+  isDefault: number;
+  /** 是否启用：0-未启用 1-启用 */
+  enabled: number;
+  /** 状态：0-禁用 1-正常 */
+  status: number;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门ID */
+  createdDept: number;
+  /** 创建者ID */
+  createdBy: number;
+  /** 创建者ID摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者ID */
+  updatedBy: number;
+  /** 更新者ID摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取客户提现账户表指定信息响应项 */
+export interface TCustWithdrawAccountViewModel {
+  /** 主键ID */
+  id: number;
+  /** 企业客户ID */
+  deptId: number;
+  /** 提现账号类型，1：支付宝，2：微信 */
+  accountType: number;
+  /** 账号 */
+  accountNo: string;
+  /** 账户名称/真实姓名 */
+  accountName: string;
+  /** 手机号 */
+  mobile: string;
+  /** 是否默认账号：0-否 1-是 */
+  isDefault: number;
+  /** 是否启用：0-未启用 1-启用 */
+  enabled: number;
+  /** 状态：0-禁用 1-正常 */
+  status: number;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门ID */
+  createdDept: number;
+  /** 创建者ID */
+  createdBy: number;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者ID */
+  updatedBy: number;
+  /** 更新时间 */
+  updatedAt: string;
+  /** 创建者ID摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 更新者ID摘要信息 */
+  updatedBySumma: MemberSumma;
+}
+
+/** 获取客户提现账户表列表 请求参数 */
+export interface TCustWithdrawAccountListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 主键ID */
+  id?: number;
+  /** 状态：0-禁用 1-正常 */
+  status?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取客户提现账户表列表 响应 */
+export type TCustWithdrawAccountListRes = GlobalListRes<TCustWithdrawAccountModel>;
+
+/** 导出客户提现账户表列表 请求参数 */
+export type TCustWithdrawAccountExportParam = TCustWithdrawAccountListParam;
+
+/** 修改/新增客户提现账户表 请求参数 */
+export interface TCustWithdrawAccountEditParam {
+  /** 主键ID */
+  id?: number;
+  /** 企业客户ID */
+  deptId?: number;
+  /** 提现账号类型，1：支付宝，2：微信 */
+  accountType?: number;
+  /** 账号 */
+  accountNo?: string;
+  /** 账户名称/真实姓名 */
+  accountName?: string;
+  /** 手机号 */
+  mobile?: string;
+  /** 是否默认账号：0-否 1-是 */
+  isDefault?: number;
+  /** 是否启用：0-未启用 1-启用 */
+  enabled?: number;
+  /** 状态：0-禁用 1-正常 */
+  status?: number;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门ID */
+  createdDept?: number;
+  /** 创建者ID */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者ID */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取客户提现账户表指定信息 请求参数 */
+export interface TCustWithdrawAccountViewParam {
+  /** 主键ID */
+  id: number;
+}
+
+/** 获取客户提现账户表指定信息 响应 */
+export type TCustWithdrawAccountViewRes = TCustWithdrawAccountViewModel;
+
+/** 删除客户提现账户表 请求参数 */
+export interface TCustWithdrawAccountDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
+
+/** 更新客户提现账户表状态 请求参数 */
+export interface TCustWithdrawAccountStatusParam {
+  /** 主键ID */
+  id: number;
+  /** 状态 */
+  status?: number;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tDivisionCode/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tDivisionCode/index.ts
new file mode 100644
index 0000000..d741c3c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tDivisionCode/index.ts
@@ -0,0 +1,49 @@
+import type {
+  TDivisionCodeDeleteParam,
+  TDivisionCodeEditParam,
+  TDivisionCodeExportParam,
+  TDivisionCodeListParam,
+  TDivisionCodeListRes,
+  TDivisionCodeViewParam,
+  TDivisionCodeViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取村级行政区划表列表
+export function List(params: TDivisionCodeListParam) {
+  return requestClient.get<TDivisionCodeListRes>('common/tDivisionCode/list', {
+    params,
+  });
+}
+
+// 删除/批量删除村级行政区划表
+export function Delete(params: TDivisionCodeDeleteParam) {
+  return requestClient.post('common/tDivisionCode/delete', { ...params });
+}
+
+// 添加/编辑村级行政区划表
+export function Edit(params: TDivisionCodeEditParam) {
+  return requestClient.post('common/tDivisionCode/edit', { ...params });
+}
+
+// 获取村级行政区划表指定详情
+export function View(params: TDivisionCodeViewParam) {
+  return requestClient.get<TDivisionCodeViewRes>('common/tDivisionCode/view', {
+    params,
+  });
+}
+
+// 导出村级行政区划表
+export function Export(params: TDivisionCodeExportParam) {
+  return requestClient.post<Blob>(
+    '/common/tDivisionCode/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tDivisionCode/type.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tDivisionCode/type.ts
new file mode 100644
index 0000000..1d28dff
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tDivisionCode/type.ts
@@ -0,0 +1,72 @@
+import type { GlobalListRes } from '#/types/global';
+
+/** 村级行政区划表列表项 */
+export interface TDivisionCodeModel {
+  /** ID */
+  regionId: number;
+  /** 行政区域代码 */
+  regionCode: string;
+  /** 行政区域名称 */
+  regionName: string;
+  /** 等级 */
+  regionLevel: number;
+  /** 上级代码 */
+  regionParent: string;
+  /** 城乡分类代码 */
+  regionType: string;
+}
+
+/** 获取村级行政区划表列表 请求参数 */
+export interface TDivisionCodeListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 行政区域名称 */
+  regionName?: string;
+  /** 行政区域代码 */
+  regionCode?: string;
+  /** 等级 */
+  regionLevel?: number;
+  /** 上级代码 */
+  regionParent?: string;
+}
+
+/** 获取村级行政区划表列表 响应 */
+export type TDivisionCodeListRes = GlobalListRes<TDivisionCodeModel>;
+
+/** 导出村级行政区划表列表 请求参数 */
+export type TDivisionCodeExportParam = TDivisionCodeListParam;
+
+/** 修改/新增村级行政区划表 请求参数 */
+export interface TDivisionCodeEditParam {
+  /** ID */
+  regionId?: number;
+  /** 行政区域代码 */
+  regionCode?: string;
+  /** 行政区域名称 */
+  regionName?: string;
+  /** 等级 */
+  regionLevel?: number;
+  /** 上级代码 */
+  regionParent?: string;
+  /** 城乡分类代码 */
+  regionType?: string;
+}
+
+/** 获取村级行政区划表指定信息 请求参数 */
+export interface TDivisionCodeViewParam {
+  /** ID */
+  regionId: number;
+}
+
+/** 获取村级行政区划表指定信息 响应 */
+export type TDivisionCodeViewRes = TDivisionCodeModel;
+
+/** 删除村级行政区划表 请求参数 */
+export interface TDivisionCodeDeleteParam {
+  /** regionId */
+  regionId: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tTplatformSetting/index.ts b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tTplatformSetting/index.ts
new file mode 100644
index 0000000..4aba3f2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/iotlcm/zAnother/tTplatformSetting/index.ts
@@ -0,0 +1,39 @@
+import { requestClient } from '#/api/request';
+
+// 获取二级域名站点个性化配置表列表
+export function List(params:any) {
+  return requestClient.get<any>('system/tTplatformSetting/list', { params });
+}
+
+// 删除/批量删除二级域名站点个性化配置表
+export function Delete(params:any) {
+  return requestClient.post<any>('system/tTplatformSetting/delete', { ...params });
+}
+
+// 添加/编辑二级域名站点个性化配置表
+export function Edit(params:any) {
+  return requestClient.post<any>('system/tTplatformSetting/edit', { ...params });
+}
+
+// 修改二级域名站点个性化配置表状态
+export function Status(params:any) {
+  return requestClient.post<any>('system/tTplatformSetting/status', { ...params });
+}
+
+// 获取二级域名站点个性化配置表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('system/tTplatformSetting/view', { params });
+}
+
+// 获取二级域名站点个性化配置表最大排序
+export function MaxSort(params:any) {
+  return requestClient.get<any>('system/tTplatformSetting/maxSort', { params });
+}
+
+// 导出二级域名站点个性化配置表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/system/tTplatformSetting/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/monitor/cache.ts b/admin-ui/vue/apps/web-antd/src/api/monitor/cache.ts
new file mode 100644
index 0000000..cbfc13b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/monitor/cache.ts
@@ -0,0 +1,35 @@
+/**
+ * @description 缓存监控相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+export interface CommandStats {
+  name: string;
+  value: string;
+}
+
+export interface RedisInfo {
+  [key: string]: string;
+}
+
+export interface CacheInfo {
+  commandStats: CommandStats[];
+  dbSize: number;
+  info: RedisInfo;
+}
+
+export async function redisCacheInfo() {
+  return requestClient.get<CacheInfo>('/monitor/cache');
+}
+
+export async function rebuildMemoryCache() {
+  return requestClient.post<{ tables: number }>(
+    '/monitor/cache/memory/rebuild',
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/monitor/full-sync.test.ts b/admin-ui/vue/apps/web-antd/src/api/monitor/full-sync.test.ts
new file mode 100644
index 0000000..80fcf86
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/monitor/full-sync.test.ts
@@ -0,0 +1,140 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const get = vi.fn();
+const post = vi.fn();
+
+vi.mock('#/api/request', () => ({
+  requestClient: { get, post },
+}));
+
+describe('full-sync monitor api', () => {
+  beforeEach(() => {
+    get.mockReset();
+    post.mockReset();
+  });
+
+  it.each([
+    'traffic_usage',
+    'sim_status',
+    'imei',
+    'traffic_usage_daily',
+    'traffic_usage_monthly',
+  ] as const)(
+    'queries runs for %s with the selected limit',
+    async (syncKind) => {
+      const { listFullSyncRuns } = await import('./full-sync');
+      listFullSyncRuns({ syncKind, limit: 50 });
+
+      expect(get).toHaveBeenCalledWith('/iot/fullSyncRuns', {
+        params: { syncKind, limit: 50 },
+      });
+    },
+  );
+
+  it('starts the requested sync kind', async () => {
+    const { startFullSync } = await import('./full-sync');
+    startFullSync('sim_status');
+
+    expect(post).toHaveBeenCalledWith('/iot/fullSyncRuns/start', {
+      syncKind: 'sim_status',
+      channels: undefined,
+    });
+  });
+
+  it('starts the daily usage sync kind', async () => {
+    const { startFullSync } = await import('./full-sync');
+    startFullSync('traffic_usage_daily');
+
+    expect(post).toHaveBeenCalledWith('/iot/fullSyncRuns/start', {
+      syncKind: 'traffic_usage_daily',
+      channels: undefined,
+    });
+  });
+
+  it('starts the monthly usage history sync kind', async () => {
+    const { startFullSync } = await import('./full-sync');
+    startFullSync('traffic_usage_monthly');
+
+    expect(post).toHaveBeenCalledWith('/iot/fullSyncRuns/start', {
+      syncKind: 'traffic_usage_monthly',
+      channels: undefined,
+    });
+  });
+
+  it('starts the IMEI sync kind with a channel scope', async () => {
+    const { startFullSync } = await import('./full-sync');
+    startFullSync('imei', ['217']);
+
+    expect(post).toHaveBeenCalledWith('/iot/fullSyncRuns/start', {
+      syncKind: 'imei',
+      channels: ['217'],
+    });
+  });
+
+  it.each([3, 12, 100])(
+    'passes a nonzero replay budget of %i unchanged',
+    async (maxRounds) => {
+      const { replayFullSync } = await import('./full-sync');
+      replayFullSync('source-run-1', maxRounds);
+
+      expect(post).toHaveBeenCalledWith('/iot/fullSyncRuns/replay', {
+        sourceRunId: 'source-run-1',
+        maxRounds,
+      });
+    },
+  );
+
+  it('omits a zero replay budget to use the server default', async () => {
+    const { replayFullSync } = await import('./full-sync');
+    replayFullSync('source-run-1', 0);
+
+    expect(post).toHaveBeenCalledWith('/iot/fullSyncRuns/replay', {
+      sourceRunId: 'source-run-1',
+    });
+  });
+
+  it('fetches replay status through the admin API', async () => {
+    const { getFullSyncReplay } = await import('./full-sync');
+    getFullSyncReplay('replay:run/1');
+
+    expect(get).toHaveBeenCalledWith(
+      '/iot/fullSyncRuns/replay/replay%3Arun%2F1',
+    );
+  });
+
+  it('sends the channel scope for a partial sync', async () => {
+    const { startFullSync } = await import('./full-sync');
+    startFullSync('traffic_usage', ['217', '173']);
+
+    expect(post).toHaveBeenCalledWith('/iot/fullSyncRuns/start', {
+      syncKind: 'traffic_usage',
+      channels: ['217', '173'],
+    });
+  });
+
+  it('omits an empty channel scope so it stays a full sync', async () => {
+    const { startFullSync } = await import('./full-sync');
+    startFullSync('traffic_usage', []);
+
+    expect(post).toHaveBeenCalledWith('/iot/fullSyncRuns/start', {
+      syncKind: 'traffic_usage',
+      channels: undefined,
+    });
+  });
+
+  it('loads the channel candidates for the start dialog', async () => {
+    const { listFullSyncChannels } = await import('./full-sync');
+    listFullSyncChannels();
+
+    expect(get).toHaveBeenCalledWith('/iot/fullSyncRuns/channels');
+  });
+
+  it('keeps failure pagination opaque to the caller', async () => {
+    const { listFullSyncFailures } = await import('./full-sync');
+    listFullSyncFailures('run-1', { limit: 100, cursor: 'opaque-token' });
+
+    expect(get).toHaveBeenCalledWith('/iot/fullSyncRuns/run-1/failures', {
+      params: { limit: 100, cursor: 'opaque-token' },
+    });
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/api/monitor/full-sync.ts b/admin-ui/vue/apps/web-antd/src/api/monitor/full-sync.ts
new file mode 100644
index 0000000..a57c398
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/monitor/full-sync.ts
@@ -0,0 +1,170 @@
+import { requestClient } from '#/api/request';
+
+export type FullSyncKind =
+  | 'traffic_usage'
+  | 'traffic_usage_daily'
+  | 'traffic_usage_monthly'
+  | 'sim_status'
+  | 'imei';
+
+export interface FullSyncRunMeta {
+  runId: string;
+  operation: string;
+  queryMonth?: string;
+  status: string;
+  currentRound: number;
+  activeCount: number;
+  inflightCount: number;
+  nextRoundCount: number;
+  successCount: number;
+  failedCount: number;
+  createdAt?: string;
+  producerCompletedAt?: string;
+  completedAt?: string;
+  syncType?: string;
+  sourceRunId?: string;
+  replayCycle?: number;
+  triggerSource?: string;
+  scannedCount?: number;
+  enqueuedCount?: number;
+  upstreamAttemptCount?: number;
+  batchCount?: number;
+  maxRound?: number;
+  pendingFailureCount?: number;
+  startedAt?: string;
+  archiveStatus?: string;
+  archivedAt?: string;
+  // scopeChannels is 0 for a full sync.
+  scopeChannels?: number;
+  scopeDigest?: string;
+  scopeChannelsSample?: string;
+}
+
+export interface FullSyncRoundStats {
+  runId: string;
+  round: number;
+  enqueuedCount: number;
+  activeCount: number;
+  nextRoundCount: number;
+  successCount: number;
+  failedCount: number;
+  upstreamAttemptCount: number;
+  batchCount: number;
+  startedAt?: string;
+  completedAt?: string;
+}
+
+export interface FullSyncRunView {
+  source: 'live' | 'archive';
+  run: FullSyncRunMeta;
+  rounds?: FullSyncRoundStats[];
+  syncKind?: FullSyncKind;
+  syncName?: string;
+}
+
+export interface FullSyncRunListResult {
+  items: FullSyncRunView[];
+  total: number;
+}
+
+export interface FullSyncFailure {
+  taskId: string;
+  cardId: number;
+  errorCategory: string;
+  errorMessage: string;
+  failedAt: string;
+  round: number;
+}
+
+export interface FullSyncFailurePage {
+  items: FullSyncFailure[];
+  nextCursor?: string;
+}
+
+export interface FullSyncStartResult {
+  runId: string;
+  syncKind: FullSyncKind;
+  status: string;
+  scopeChannels: number;
+}
+
+export interface FullSyncChannelOption {
+  chanKey: string;
+  chanName: string;
+  tempKey: string;
+  operator: number;
+  cardCount: number;
+  syncEnabled: boolean;
+}
+
+export interface FullSyncChannelOptionsResult {
+  items: FullSyncChannelOption[];
+}
+
+export interface FullSyncReplayResult {
+  replayRunId: string;
+  status: string;
+}
+
+export interface FullSyncReplayStatus extends FullSyncReplayResult {
+  sourceRunId: string;
+  remaining: number;
+  enqueued: number;
+  runStatus?: string;
+  error?: string;
+}
+
+export function listFullSyncRuns(params?: {
+  syncKind?: FullSyncKind;
+  limit?: number;
+}) {
+  return requestClient.get<FullSyncRunListResult>('/iot/fullSyncRuns', {
+    params,
+  });
+}
+
+export function getFullSyncRun(runId: string) {
+  return requestClient.get<FullSyncRunView>(
+    `/iot/fullSyncRuns/${encodeURIComponent(runId)}`,
+  );
+}
+
+export function listFullSyncFailures(
+  runId: string,
+  params?: { limit?: number; cursor?: string },
+) {
+  return requestClient.get<FullSyncFailurePage>(
+    `/iot/fullSyncRuns/${encodeURIComponent(runId)}/failures`,
+    { params },
+  );
+}
+
+export function startFullSync(syncKind: FullSyncKind, channels?: string[]) {
+  return requestClient.post<FullSyncStartResult>('/iot/fullSyncRuns/start', {
+    syncKind,
+    // Omit or send an empty list for a full sync.
+    channels: channels && channels.length > 0 ? channels : undefined,
+  });
+}
+
+export function replayFullSync(sourceRunId: string, maxRounds = 0) {
+  return requestClient.post<FullSyncReplayResult>('/iot/fullSyncRuns/replay', {
+    sourceRunId,
+    // Zero uses the Worker's configured default; positive budgets pass through.
+    ...(maxRounds === 0 ? {} : { maxRounds }),
+  });
+}
+
+export function getFullSyncReplay(replayRunId: string) {
+  return requestClient.get<FullSyncReplayStatus>(
+    `/iot/fullSyncRuns/replay/${encodeURIComponent(replayRunId)}`,
+  );
+}
+
+// listFullSyncChannels returns the channels a partial sync can target, with
+// their card counts, so the operator can judge the impact before selecting.
+export function listFullSyncChannels() {
+  return requestClient.get<FullSyncChannelOptionsResult>(
+    '/iot/fullSyncRuns/channels',
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/monitor/index.ts b/admin-ui/vue/apps/web-antd/src/api/monitor/index.ts
new file mode 100644
index 0000000..acc6496
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/monitor/index.ts
@@ -0,0 +1,11 @@
+/**
+ * @description 监控模块接口导出
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+export * from './cache';
+export * from './full-sync';
diff --git a/admin-ui/vue/apps/web-antd/src/api/monitor/online.ts b/admin-ui/vue/apps/web-antd/src/api/monitor/online.ts
new file mode 100644
index 0000000..7e47af3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/monitor/online.ts
@@ -0,0 +1,57 @@
+/**
+ * @description 在线用户监控相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+export interface SysUserOnlineListReq { 
+  page: number;
+  pageSize: number;
+  ipaddr: string;
+  userName: string;
+  status: string;
+}
+
+export interface SysUserOnline {
+    onlineId: number;
+    tenantId: string;
+    uuid: string;
+    userName: string;
+    clientKey: string;
+    deviceType: string;
+    ipaddr: string;
+    loginLocation: string;
+    browser: string;
+    os: string;
+    token: string;
+    loginTime: string;
+    expireTime: string;
+}
+
+export interface SysUserOnlineListRes {
+  items: SysUserOnline[];
+  total: number;
+}
+
+export interface SysUserOnlineDeleteReq {
+  ids: number[];
+}
+
+export interface SysUserOnlineDeleteRes {
+}
+
+export const getSysUserOnlineListApi = (params: SysUserOnlineListReq) => {
+  return requestClient.get<SysUserOnlineListRes>('/system/user-online/list', { params });
+};
+
+export const deleteSysUserOnlineApi = (params: SysUserOnlineDeleteReq) => {
+  return requestClient.post<SysUserOnlineDeleteRes>('/system/user-online/delete', { ...params });
+};
+
+
+
diff --git a/admin-ui/vue/apps/web-antd/src/api/regions/index.ts b/admin-ui/vue/apps/web-antd/src/api/regions/index.ts
new file mode 100644
index 0000000..8b7388c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/regions/index.ts
@@ -0,0 +1,11 @@
+import { requestClient } from '#/api/request';
+
+// 获取行政区划列表
+export function List(params:any) {
+  return requestClient.get<any>('regions/iotRegions/list', { params });
+}
+
+// 获取指定省份下行政区划树形结构
+export function Tree(params:any) {
+  return requestClient.get<any>('regions/iotRegions/tree', { params });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/request.ts b/admin-ui/vue/apps/web-antd/src/api/request.ts
new file mode 100644
index 0000000..122c3d7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/request.ts
@@ -0,0 +1,230 @@
+/**
+ * @description 请求客户端配置
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import type { RequestClientOptions, HttpResponse } from '@vben/request';
+
+import { useAppConfig } from '@vben/hooks';
+import { preferences } from '@vben/preferences';
+import {
+  authenticateResponseInterceptor,
+  errorMessageResponseInterceptor,
+  RequestClient,
+} from '@vben/request';
+import { useAccessStore } from '@vben/stores';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useAuthStore } from '#/store';
+
+import { refreshTokenApi } from './core';
+
+import { $t } from '@vben/locales';
+import { isEmpty, isNull } from 'lodash-es';
+
+const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+
+/**
+ * 是否已经处在登出过程中了 一个标志位
+ * 主要是防止一个页面会请求多个api 都401 会导致登出执行多次
+ */
+let isLogoutProcessing = false;
+
+function createRequestClient(baseURL: string, options?: RequestClientOptions) {
+  const client = new RequestClient({
+    ...options,
+    baseURL,
+    // 消息提示类型
+    errorMessageMode: 'message',
+    // 是否返回原生响应 比如：需要获取响应头时使用该属性
+    isReturnNativeResponse: false,
+    // 需要对返回数据进行处理
+    isTransformResponse: true,
+  });
+
+  /**
+   * 重新认证逻辑
+   */
+  async function doReAuthenticate() {
+    console.warn('Access token or refresh token is invalid or expired. ');
+    const accessStore = useAccessStore();
+    const authStore = useAuthStore();
+    accessStore.setAccessToken(null);
+    if (
+      preferences.app.loginExpiredMode === 'modal' &&
+      accessStore.isAccessChecked
+    ) {
+      accessStore.setLoginExpired(true);
+    } else {
+      await authStore.logout();
+    }
+  }
+
+  /**
+   * 刷新token逻辑
+   */
+  async function doRefreshToken() {
+    const accessStore = useAccessStore();
+    const resp = await refreshTokenApi();
+    const newToken = resp.data;
+    accessStore.setAccessToken(newToken);
+    return newToken;
+  }
+
+  function formatToken(token: null | string) {
+    return token ? `Bearer ${token}` : null;
+  }
+
+  // 请求头处理
+  client.addRequestInterceptor({
+    fulfilled: async (config) => {
+      const accessStore = useAccessStore();
+
+      config.headers.Authorization = formatToken(accessStore.accessToken);
+      config.headers['Accept-Language'] = preferences.app.locale;
+      return config;
+    },
+  });
+
+  // 处理返回的响应数据格式
+  // client.addResponseInterceptor(
+  //   defaultResponseInterceptor({
+  //     codeField: 'code',
+  //     dataField: 'data',
+  //     successCode: 0,
+  //   }),
+  // );
+
+  client.addResponseInterceptor<HttpResponse>({
+    fulfilled: async (response) => {
+      const { config, data: responseData, status, headers } = response;
+      if (config.responseReturn === 'raw') {
+        return response;
+      }
+      if (!responseData) {
+        throw new Error($t('http.apiRequestFailed'));
+      }
+
+      // console.log('response', response);
+
+      if (status >= 200 && status < 400) {
+        if (config.responseReturn === 'body') {
+          return responseData;
+        } else if (headers['content-type']?.includes?.('application/json')) {
+          // 导出/下载类接口用 blob 方式接收 JSON 回执（异步导出只回任务信息，没有文件流）。
+          // 此时 axios 的 responseData 就是 Blob 本身，Blob 上没有 code 字段，
+          // 若继续走下面的业务码判断会被误判为失败并抛错，所以直接交给调用方解析。
+          if (config.responseType === 'blob') {
+            return responseData;
+          }
+        } else if (headers['content-type']?.includes?.('application/octet-stream')) {
+          // 下载文件
+          return responseData;
+        }
+        const { code, data, message: msg, ...other } = responseData;
+        // 业务状态码为200则请求成功
+        const hasSuccess = Reflect.has(responseData, 'code') && code === 0;
+        const hasLoginTimeout = Reflect.has(responseData, 'code') && code === 61;
+        if (hasSuccess) {
+          let successMsg = msg;
+
+          if (isNull(successMsg) || isEmpty(successMsg)) {
+            successMsg = $t(`http.operationSuccess`);
+          }
+
+          if (response.config.successMessageMode === 'modal') {
+            Modal.success({
+              content: successMsg,
+              title: $t('http.successTip'),
+            });
+          } else if (response.config.successMessageMode === 'message') {
+            message.success(successMsg);
+          }
+          // 分页情况下为code msg rows total 并没有data字段
+          // 如果有data 直接返回data 没有data将剩余参数(...other)封装为data返回
+          // 需要考虑data为null的情况(比如查询为空) 所以这里直接判断undefined
+          if (data !== undefined) {
+            return data;
+          }
+          // 没有data 将其他参数包装为data
+          return other;
+        }
+        if (hasLoginTimeout) {
+          // 已经在登出过程中 不再执行
+          if (isLogoutProcessing) {
+            return;
+          }
+          isLogoutProcessing = true;
+          const _msg = $t('http.loginTimeout');
+          const userStore = useAuthStore();
+          userStore.logout().finally(() => {
+            message.error(_msg);
+            isLogoutProcessing = false;
+          });
+          // 不再执行下面逻辑
+          return;
+        }
+      } else if (status == 401) {
+        // 已经在登出过程中 不再执行
+        if (isLogoutProcessing) {
+          return;
+        }
+        isLogoutProcessing = true;
+        const _msg = $t('http.loginTimeout');
+        const userStore = useAuthStore();
+        userStore.logout().finally(() => {
+          message.error(_msg);
+          isLogoutProcessing = false;
+        });
+        // 不再执行下面逻辑
+        return;
+      }
+      console.log('addResponseInterceptor response', response);
+      throw Object.assign({}, response, { response });
+    },
+  });
+  // token过期的处理
+  client.addResponseInterceptor(
+    authenticateResponseInterceptor({
+      client,
+      doReAuthenticate,
+      doRefreshToken,
+      enableRefreshToken: preferences.app.enableRefreshToken,
+      formatToken,
+    }),
+  );
+
+  // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
+  client.addResponseInterceptor(
+    errorMessageResponseInterceptor((msg: string, error) => {
+      const errorMessageMode =
+        error?.config?.errorMessageMode ??
+        error?.response?.config?.errorMessageMode;
+      if (errorMessageMode === 'none') {
+        return;
+      }
+
+      console.log('errorMessageResponseInterceptor error', error);
+      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+      // 当前mock接口返回的错误字段是 error 或者 message
+      const responseData = error?.response?.data ?? {};
+      const errorMessage = responseData?.error ?? responseData?.message ?? '';
+      // 如果没有错误信息，则会根据状态码进行提示
+      const finalErrorMessage = errorMessage || msg;
+      message.error(finalErrorMessage);
+    }),
+  );
+  return client;
+}
+
+export const requestClient = createRequestClient(apiURL, {
+  responseReturn: 'data',
+  timeout: 30000,
+});
+
+export const baseRequestClient = new RequestClient({ baseURL: apiURL, timeout: 30000, });
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/client.ts b/admin-ui/vue/apps/web-antd/src/api/system/client.ts
new file mode 100644
index 0000000..72b51b4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/client.ts
@@ -0,0 +1,140 @@
+/**
+ * @description 客户端管理相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+export interface SysClientListReq {
+  clientId: string;
+  clientKey: string;
+  clientSecret: string;
+  status: string;
+}
+
+export interface SysClient {
+    id: number;     
+    clientId: string;
+    clientKey: string;
+    clientSecret: string;
+    grantType: string;
+    deviceType: string;
+    activeTimeout: number;
+    timeout: number;
+    status: string;
+    createdDept: number;
+    createdBy: number;
+    createdAt: string;
+}
+
+export interface SysClientListRes {
+  items: SysClient[];
+  total: number;
+}
+
+export interface SysClientViewReq {
+  id: number;
+}
+
+export interface SysClientViewRes {
+  id: number;     
+  clientId: string;
+  clientKey: string;
+  clientSecret: string;
+  grantType: string;
+  grantTypeList?: string[];
+  deviceType: string;
+  activeTimeout: number;
+  timeout: number;
+  status: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedDept: number;
+  updatedBy: number;
+  updatedAt: string;
+} 
+
+export interface SysClientAddReq {
+  clientId: string;
+  clientKey: string;
+  clientSecret: string;
+  grantType: string;
+  deviceType: string;
+  activeTimeout: number;
+  timeout: number;
+  status: string;
+} 
+
+export interface SysClientAddRes {
+  id: number;
+} 
+
+export interface SysClientEditReq {
+  id: number;
+  clientId?: string;
+  clientKey?: string;
+  clientSecret?: string; 
+  grantType?: string;
+  deviceType?: string;
+  activeTimeout?: number;
+  timeout?: number;
+  status?: string;
+} 
+
+export interface SysClientEditRes {
+  id: number;
+}  
+
+export interface SysClientDeleteReq {
+  ids: number[];
+}
+
+export interface SysClientDeleteRes {
+  ids: number[];
+} 
+
+export interface SysClientStatusReq {
+  id: number;
+  status: string;
+}   
+
+export interface SysClientStatusRes {
+  id: number;
+} 
+
+export const getSysClientListApi = (params: SysClientListReq) => {
+  return requestClient.get<SysClientListRes>('/system/client/list', { params });
+};
+
+export const getSysClientViewApi = (params: SysClientViewReq) => {
+  return requestClient.get<SysClientViewRes>('/system/client/view', { params });
+};
+
+export const postSysClientAddApi = (params: SysClientAddReq|{
+  [x: string]: any;
+}) => {
+  return requestClient.post<SysClientAddRes>('/system/client/add', { ...params });
+};
+
+export const postSysClientEditApi = (params: SysClientEditReq|{
+  [x: string]: any;
+}) => {
+  return requestClient.post<SysClientEditRes>('/system/client/edit', { ...params });
+};
+
+export const postSysClientDeleteApi = (params: SysClientDeleteReq|{
+  [x: string]: any;
+}) => {
+  return requestClient.post<SysClientDeleteRes>('/system/client/delete', { ...params });
+};
+
+export const postSysClientStatusApi = (params: SysClientStatusReq|{
+  [x: string]: any;
+}) => {
+  return requestClient.post<SysClientStatusRes>('/system/client/status', { ...params });
+};  
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/config.ts b/admin-ui/vue/apps/web-antd/src/api/system/config.ts
new file mode 100644
index 0000000..cf5d7f4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/config.ts
@@ -0,0 +1,109 @@
+/**
+ * @description 系统配置相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+export interface GetSysConfigListReq {
+  configName: string;
+  configKey: string;
+  configType: string;
+  createdAt: string;
+}
+
+export interface SysConfig {
+    configId: number;
+    tenantId:string;
+    configName:string;
+    configKey:string;
+    configValue:string;
+    configType:string;
+    createdDept:number;
+    createdBy:number;
+    createdAt:string;
+    remark:string;
+}
+
+export interface GetSysConfigListRes {
+  items: SysConfig[];
+  total: number;
+}
+
+export interface AddSysConfigReq {
+  configName: string;
+  configKey: string;
+  configValue: string;
+  configType: string;
+  remark: string;
+} 
+
+export interface AddSysConfigRes {
+  configId: number;
+}
+
+export interface EditSysConfigReq {
+  configId: number;
+  configName: string;
+  configKey: string;
+  configValue: string;
+  configType: string;
+  remark: string;
+}
+
+export interface EditSysConfigRes {
+  configId: number;
+} 
+
+export interface DeleteSysConfigReq {
+  configIds: number[];
+}
+
+export interface DeleteSysConfigRes {
+  configIds: number[];
+} 
+
+export interface GetSysConfigByIdReq {
+  configId: number;
+}
+
+export interface GetSysConfigByIdRes {
+  configId: number;
+  tenantId: string;
+  configName: string;
+  configKey: string;
+  configValue: string;
+  configType: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  remark: string;
+}
+
+export async function getSysConfigListApi(params: GetSysConfigListReq) {
+  return requestClient.get<GetSysConfigListRes>('/system/config/list', { params });
+}
+
+export async function addSysConfigApi(params: AddSysConfigReq | {
+  [x: string]: any;
+}) {
+  return requestClient.post<AddSysConfigRes>('/system/config/add', { ...params });
+}
+
+export async function editSysConfigApi(params: EditSysConfigReq | {
+  [x: string]: any;
+}) {
+  return requestClient.post<EditSysConfigRes>('/system/config/edit', { ...params });
+}
+
+export async function deleteSysConfigApi(params: DeleteSysConfigReq) {
+  return requestClient.post<DeleteSysConfigRes>('/system/config/delete', { ...params });
+} 
+
+export async function getSysConfigByIdApi(params: GetSysConfigByIdReq) {
+  return requestClient.get<GetSysConfigByIdRes>('/system/config/view', { params });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/dept.ts b/admin-ui/vue/apps/web-antd/src/api/system/dept.ts
new file mode 100644
index 0000000..ef98807
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/dept.ts
@@ -0,0 +1,237 @@
+/**
+ * @description 组织管理相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+export interface SysDeptMini {
+  deptId: number;
+  deptName: string;
+}
+
+export interface SysDeptListParam {
+  deptName?: string;
+  status?: string;
+  deptType?: number;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface SysDeptTreeParam {
+  deptType?: number;
+}
+export interface SysDeptListData {
+  deptId: number;
+  deptType: number;
+  tenantId: string;
+  parentId: number;
+  ancestors: string;
+  deptName: string;
+  deptCategory: string;
+  orderNum: number;
+  leader: number;
+  phone: string;
+  email: string;
+  status: string;
+  createdAt: string;
+}
+
+export interface SysDeptListRes {
+  items: SysDeptListData[];
+  total: number;
+}
+
+
+export async function getSysDeptListApi(params: SysDeptListParam) {
+  return requestClient.get<SysDeptListRes>('/system/dept/list', { params });
+}
+
+export interface SysDeptTreeData {
+  deptId: number;
+  parentId: number;
+  key: string;
+  deptName: string;
+  children?: SysDeptTreeData[];
+}
+export interface SysDeptTreeRes {
+  items: SysDeptTreeData[];
+}
+
+export async function getSysDeptTreeApi(params: SysDeptTreeParam) {
+  return requestClient.get<SysDeptTreeRes>('/system/dept/tree', { params });
+}
+
+/**
+ * 组织管理页专用的完整部门树节点。
+ *
+ * 与 SysDeptTreeData 的区别：后者只带 7 个精简字段，供部门选择器、
+ * 用户管理左栏等场景使用；本页表格还要展示组织编码、状态、创建时间。
+ */
+export interface SysDeptFullTreeData extends SysDeptListData {
+  children?: SysDeptFullTreeData[];
+}
+
+export interface SysDeptFullTreeRes {
+  items: SysDeptFullTreeData[];
+}
+
+/**
+ * 获取完整部门树（后端已组装好嵌套 children）。
+ *
+ * 支持 deptName 模糊搜索、status / deptType 筛选；树结构由后端建，
+ * 前端 vxe-table 用 transform: false 直接渲染，无需二次建树。
+ */
+export async function getSysDeptFullTreeApi(params: SysDeptListParam) {
+  return requestClient.get<SysDeptFullTreeRes>('/system/dept/tree/full', {
+    params,
+  });
+}
+
+export interface SysDeptAddParam {
+  parentId: number;
+  ancestors: string;
+  deptName: string;
+  deptCategory: string;
+  orderNum: number;
+  leader: number;
+  phone: string;
+  email: string;
+  status: string;
+}
+
+export interface SysDeptAddRes {
+  deptId: number;
+}
+
+export async function addSysDeptApi(params: SysDeptAddParam | {
+  [x: string]: any;
+}) {
+  return requestClient.post<SysDeptAddRes>('/system/dept/add', params);
+}
+
+export interface SysDeptEditParam {
+  deptId: number;
+  parentId?: number;
+  ancestors?: string;
+  deptName?: string;
+  deptCategory?: string;
+  orderNum?: number;
+  leader?: number;
+  phone?: string;
+  email?: string;
+  status?: string;
+}
+
+export interface SysDeptEditRes {
+  deptId: number;
+}
+
+export async function editSysDeptApi(params: SysDeptEditParam | {
+  [x: string]: any;
+}) {
+  return requestClient.post<SysDeptEditRes>('/system/dept/edit', params);
+}
+
+export interface SysDeptDeleteParam {
+  deptId: number;
+}
+
+export interface SysDeptDeleteRes {
+  deptId: number;
+}
+
+export async function deleteSysDeptApi(params: SysDeptDeleteParam) {
+  return requestClient.post<SysDeptDeleteRes>('/system/dept/delete', params);
+}
+
+export interface SysDeptViewParam {
+  deptId: number;
+}
+
+export interface SysDeptViewRes {
+  deptId: number;
+  tenantId: string;
+  parentId: number;
+  ancestors: string;
+  deptName: string;
+  deptCategory: string;
+  orderNum: number;
+  leader: number | null;
+  phone: string;
+  email: string;
+  status: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+  deptType: number|string;
+  areaCode?: string;
+  address?: string;
+  creditCode?: string;
+}
+
+export async function viewSysDeptApi(params: SysDeptViewParam) {
+  return requestClient.get<SysDeptViewRes>('/system/dept/view', { params });
+}
+
+/**
+ * 批量获取组织名称
+ * @param deptIds 组织ID数组
+ * @returns 组织ID到名称的映射对象
+ */
+export async function batchGetDeptNames(deptIds: number[]): Promise<Record<number, string>> {
+  if (!deptIds || deptIds.length === 0) {
+    return {};
+  }
+
+  try {
+    // 获取所有组织列表，使用合理的页面大小（不超过2000）
+    const response = await getSysDeptListApi({
+      deptName: '',
+      status: '',
+      page: 1,
+      pageSize: 2000
+    });
+
+    if (!response || !response.items) {
+      console.error('组织列表API返回格式错误:', response);
+      return {};
+    }
+
+    const deptList = response.items;
+
+    // 创建ID到名称的映射，只包含请求的ID
+    const nameMap: Record<number, string> = {};
+    deptIds.forEach(id => {
+      const dept = deptList.find(d => d.deptId === id);
+      nameMap[id] = dept ? dept.deptName : `组织${id}`;
+    });
+
+    return nameMap;
+  } catch (error) {
+    console.error('批量获取组织名称失败:', error);
+    // 失败时返回ID作为名称的映射
+    const fallbackMap: Record<number, string> = {};
+    deptIds.forEach(id => {
+      fallbackMap[id] = String(id);
+    });
+    return fallbackMap;
+  }
+}
+
+export interface SysDeptApiInfoRes {
+  deptKey: string;
+  deptName: string;
+  appKey: string;
+  appSecret: string;
+}
+
+export async function getSysDeptApiInfoApi() {
+  return requestClient.get<SysDeptApiInfoRes>('/agent/dept/apiInfo');
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/dict.ts b/admin-ui/vue/apps/web-antd/src/api/system/dict.ts
new file mode 100644
index 0000000..080f1b8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/dict.ts
@@ -0,0 +1,217 @@
+/**
+ * @description 字典管理相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+import { useCacheStore } from '#/store/cache';
+const KEY = 'dictList';
+
+export interface SysDictTypeListReq {
+  page: number;
+  pageSize: number;
+  dictName: string;
+  dictType: string;
+}
+export interface SysDictTypeListModel {
+  dictId: number;
+  tenantId: string;
+  dictName: string;
+  dictType: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  remark: string;
+  isSys?: string; // 添加是否系统内置字段
+}
+export interface SysDictTypeListRes {
+  items: SysDictTypeListModel[];
+  total: number;
+}
+
+export async function getSysDictTypeListApi(params: SysDictTypeListReq) {
+  return requestClient.get<SysDictTypeListRes>('/system/dict/list', { params });
+}
+
+export interface SysDictDataListReq {
+  page: number;
+  pageSize: number;
+  dictId: number;
+  dictType: string;
+}
+export interface SysDictDataListModel {
+  dictCode: number;
+  tenantId: string;
+  dictSort: number;
+  dictLabel: string;
+  dictValue: string;
+  dictType: string;
+  cssClass: string;
+  listClass: string;
+  isDefault: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  remark: string;
+}
+export interface SysDictDataListRes {
+  items: SysDictDataListModel[];
+  type: SysDictTypeListModel;
+  total: number;
+}
+
+export async function getSysDictDataListApi(params: SysDictDataListReq) {
+  return useCacheStore().getCache(params, KEY, () => requestClient.get<SysDictDataListRes>('/system/dict-data/list/' + params.dictId, { params }))
+}
+
+
+export interface SysDictTypeAddReq {
+  dictName: string;
+  dictType: string;
+  remark: string;
+  isSys?: string; // 添加是否系统内置字段
+}
+export interface SysDictTypeAddRes {
+  dictId: number;
+}
+
+export async function addSysDictTypeApi(params: SysDictTypeAddReq | {
+  [x: string]: any;
+}) {
+  useCacheStore().clearCache(KEY)
+  return requestClient.post<SysDictTypeAddRes>('/system/dict-type/add', { ...params });
+}
+
+export interface SysDictTypeEditReq {
+  dictId: number;
+  dictName: string;
+  dictType: string;
+  remark: string;
+  isSys?: string; // 添加是否系统内置字段
+}
+export interface SysDictTypeEditRes {
+  dictId: number;
+}
+
+export async function editSysDictTypeApi(params: SysDictTypeEditReq | {
+  [x: string]: any;
+}) {useCacheStore().clearCache(KEY)
+  return requestClient.post<SysDictTypeEditRes>('/system/dict-type/edit', { ...params });
+}
+
+export interface SysDictTypeDeleteReq {
+  dictIds: number[];
+}
+export interface SysDictTypeDeleteRes {
+  dictIds: number[];
+}
+
+export async function deleteSysDictTypeApi(params: SysDictTypeDeleteReq) {
+  useCacheStore().clearCache(KEY)
+  return requestClient.post<SysDictTypeDeleteRes>('/system/dict-type/delete', { ...params });
+}
+
+export interface SysDictTypeViewReq {
+  dictId: number;
+}
+export interface SysDictTypeViewRes {
+  dictId: number;
+  tenantId: string;
+  dictName: string;
+  dictType: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+  remark: string;
+  isSys?: string;
+}
+
+export async function getSysDictTypeViewApi(params: SysDictTypeViewReq) {
+  return requestClient.get<SysDictTypeViewRes>('/system/dict-type/view', { params });
+}
+
+export interface SysDictDataAddReq {
+  dictSort: number;
+  dictLabel: string;
+  dictValue: string;
+  dictType: string;
+  cssClass: string;
+  listClass: string;
+  isDefault: string;
+  remark: string;
+}
+export interface SysDictDataAddRes {
+  dictCode: number;
+}
+
+export async function addSysDictDataApi(params: SysDictDataAddReq | {
+  [x: string]: any;
+}) {
+  useCacheStore().clearCache(KEY)
+  return requestClient.post<SysDictDataAddRes>('/system/dict-data/add', { ...params });
+}
+
+export interface SysDictDataEditReq {
+  dictCode: number;
+  dictSort: number;
+  dictLabel: string;
+  dictValue: string;
+  dictType: string;
+  cssClass: string;
+  listClass: string;
+  isDefault: string;
+  remark: string;
+}
+export interface SysDictDataEditRes {
+  dictCode: number;
+}
+
+export async function editSysDictDataApi(params: SysDictDataEditReq | {
+  [x: string]: any;
+}) {
+  useCacheStore().clearCache(KEY)
+  return requestClient.post<SysDictDataEditRes>('/system/dict-data/edit', { ...params });
+}
+
+export interface SysDictDataDeleteReq {
+  dictCodes: number[];
+}
+export interface SysDictDataDeleteRes {
+  dictCodes: number[];
+}
+
+export async function deleteSysDictDataApi(params: SysDictDataDeleteReq) {
+  useCacheStore().clearCache(KEY)
+  return requestClient.post<SysDictDataDeleteRes>('/system/dict-data/delete', { ...params });
+}
+
+export interface SysDictDataViewReq {
+  dictCode: number;
+}
+export interface SysDictDataViewRes {
+  dictCode: number;
+  tenantId: string;
+  dictSort: number;
+  dictLabel: string;
+  dictValue: string;
+  dictType: string;
+  cssClass: string;
+  listClass: string;
+  isDefault: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+  remark: string;
+}
+
+export async function getSysDictDataViewApi(params: SysDictDataViewReq) {
+  return requestClient.get<SysDictDataViewRes>('/system/dict-data/view', { params });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/index.ts b/admin-ui/vue/apps/web-antd/src/api/system/index.ts
new file mode 100644
index 0000000..6e32ecb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/index.ts
@@ -0,0 +1,18 @@
+/**
+ * @description 系统管理模块接口导出
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+export * from './dept';
+export * from './post';
+export * from './role';
+export * from './dict';
+export * from './config';
+export * from './user';
+export * from './notice';
+export * from './menu';
+export * from './social';
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/job.ts b/admin-ui/vue/apps/web-antd/src/api/system/job.ts
new file mode 100644
index 0000000..033d9ee
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/job.ts
@@ -0,0 +1,86 @@
+/**
+ * @description 定时任务相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+export interface SysJobListReq {
+  jobName: string;
+  jobGroup: string;
+  status: string;
+  page: number;
+  pageSize: number;
+}
+
+export interface SysJobSaveReq {
+  jobId: number;
+  jobName: string;
+  jobGroup: string;
+  jobParams: string;
+  invokeTarget: string;
+  cronExpression: string;
+  misfirePolicy: string;
+  concurrent: string;
+  status: string;
+  remark: string;
+}
+
+
+export interface SysJob {
+  jobId: number;
+  jobName: string;
+  jobGroup: string;
+  jobParams: string;
+  invokeTarget: string;
+  cronExpression: string;
+  misfirePolicy: string | number | null;
+  concurrent: string | number | null;
+  status: string;
+  remark: string;
+}
+
+export interface SysJobListRes {
+  items: SysJob[];
+  total: number;
+}
+
+export interface SysJobDeleteReq {
+  jobIds: number[];
+} 
+
+export interface SysJobDeleteRes {
+  jobIds: number[];
+}
+
+export async function getSysJobListApi(params: SysJobListReq) {
+  return requestClient.get<SysJobListRes>('/system/job/list', { params });
+}
+
+export async function viewSysJobApi(params: {jobId: number}) {
+  return requestClient.get<SysJob>('/system/job/view', { params });
+}
+
+export async function addSysJobApi(params: SysJobSaveReq|any) {
+  return requestClient.post<SysJob>('/system/job/add', params);
+}
+
+export async function updateSysJobApi(params: SysJobSaveReq|any) {
+  return requestClient.post<SysJob>('/system/job/update', params );
+}
+export async function updateStatusApi(params: SysJobSaveReq|any) {
+  return requestClient.post<SysJob>('/system/job/status', params );
+}
+
+export async function deleteSysJobApi(params: SysJobDeleteReq) {
+  return requestClient.post<SysJobDeleteRes>('/system/job/delete', { ...params });
+}
+
+export async function execOnceApi(params: {jobId: number}) {
+  return requestClient.post<SysJob>('/system/job/exec', params);
+}
+
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/logininfor.ts b/admin-ui/vue/apps/web-antd/src/api/system/logininfor.ts
new file mode 100644
index 0000000..45f0ba9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/logininfor.ts
@@ -0,0 +1,53 @@
+/**
+ * @description 登录日志相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+export interface SysLogininforListReq {
+  ipaddr: string;
+  userName: string;
+  status: string;
+  loginTime: string[];
+}
+
+export interface SysLogininfor {
+    infoId: number;
+    tenantId: string;
+    userName: string;
+    clientKey: string;
+    deviceType: string;
+    ipaddr: string;
+    loginLocation: string;
+    browser: string;
+    os: string;
+    status: string;
+    msg: string;
+    loginTime: string;
+}
+
+export interface SysLogininforListRes {
+  items: SysLogininfor[];
+  total: number;
+}
+
+export interface SysLogininforDeleteReq {
+  infoIds: number[];
+} 
+
+export interface SysLogininforDeleteRes {
+  infoIds: number[];
+}
+
+export async function getSysLogininforListApi(params: SysLogininforListReq) {
+  return requestClient.get<SysLogininforListRes>('/system/logininfor/list', { params });
+}
+
+export async function deleteSysLogininforApi(params: SysLogininforDeleteReq) {
+  return requestClient.post<SysLogininforDeleteRes>('/system/logininfor/delete', { ...params });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/menu.ts b/admin-ui/vue/apps/web-antd/src/api/system/menu.ts
new file mode 100644
index 0000000..c9f042b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/menu.ts
@@ -0,0 +1,122 @@
+/**
+ * @description 菜单管理相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+import { useCacheStore } from "#/store/cache";
+const KEY = "menmenuuList";
+export interface SysMenuListReq {
+  menuName: string;
+  status: string;
+}
+
+export interface SysMenuListData {
+  menuId: number;
+  menuName: string;
+  parentId: number;
+  orderNum: number;
+  path: string;
+  component: string;
+  queryParam: string;
+  isFrame: number;
+  isCache: number;
+  menuType: string;
+  visible: string;
+  status: string;
+  perms: string;
+  icon: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  remark: string;
+  children?: SysMenuListData[];
+}
+
+export interface SysMenuListRes {
+  items: SysMenuListData[];
+  total: number;
+}
+
+export interface SysMenuTreeRes {
+  items: SysMenuListData[];
+}
+
+export interface SysMenuViewReq {
+  menuId: number;
+}
+
+export interface SysMenuViewRes extends SysMenuListData {}
+
+export interface SysMenuAddReq {
+  menuName: string;
+  parentId: number;
+  orderNum: number;
+  path: string;
+  component: string;
+  queryParam: string;
+  isFrame: number;
+  isCache: number;
+  menuType: string;
+  visible: string;
+  status: string;
+  perms: string;
+  icon: string;
+  remark: string;
+}
+
+export interface SysMenuUpdateReq {
+  menuId: number;
+  menuName?: string;
+  parentId?: number;
+  orderNum?: number;
+  path?: string;
+  component?: string;
+  queryParam?: string;
+  isFrame?: number;
+  isCache?: number;
+  menuType?: string;
+  visible?: string;
+  status?: string;
+  perms?: string;
+  icon?: string;
+  remark?: string;
+}
+
+export interface SysMenuDeleteReq {
+  menuId: number;
+}
+
+export async function getSysMenuListApi(params?: SysMenuListReq) {
+  return useCacheStore().getCache(params?params:{}, KEY, () => requestClient.get<SysMenuListRes>('/system/menu/list', { params }));
+}
+
+/**
+ * 获取菜单树（后端已建好嵌套 children，前端无需再开启 treeConfig.transform 二次建树）
+ */
+export async function getSysMenuTreeApi(params?: SysMenuListReq) {
+  return requestClient.get<SysMenuTreeRes>('/system/menu/tree', { params });
+}
+
+export async function getSysMenuViewApi(params: SysMenuViewReq) {
+  return requestClient.get<SysMenuViewRes>('/system/menu/view', { params });
+}
+
+export async function updateSysMenuApi(params: SysMenuUpdateReq|any) {
+  useCacheStore().clearCache(KEY);
+  return requestClient.post('/system/menu/update', { ...params });
+}
+
+export async function deleteSysMenuApi(params: SysMenuDeleteReq|any) {
+  useCacheStore().clearCache(KEY);
+  return requestClient.post('/system/menu/delete', { ...params });
+}
+
+export async function addSysMenuApi(params: SysMenuAddReq|any) {
+  useCacheStore().clearCache(KEY);
+  return requestClient.post('/system/menu/add', { ...params });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/notice.ts b/admin-ui/vue/apps/web-antd/src/api/system/notice.ts
new file mode 100644
index 0000000..96203d4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/notice.ts
@@ -0,0 +1,104 @@
+/**
+ * @description 通知公告相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+import type { SysUserMini } from '#/api/system/user';
+export interface SysNoticeListReq {
+  noticeTitle: string;
+  noticeType: string;
+  createdBy: string;
+}
+
+export interface SysNotice {
+    noticeId: number;
+    tenantId:string;
+    noticeTitle:string;
+    noticeType:string;
+    noticeContent:string;
+    status:string;
+    createdDept:number;
+    createdBy:number;
+    createdAt:string;
+    remark:string;
+    createdByUser:SysUserMini;
+}
+
+export interface SysNoticeListRes {
+  items: SysNotice[];
+  total: number;
+}
+
+export interface SysNoticeAddReq {
+  noticeTitle: string;
+  noticeType: string;
+  noticeContent: string;
+  status: string;
+  remark: string;
+}
+
+export interface SysNoticeEditReq {
+  noticeId: number;
+  noticeTitle?: string;
+  noticeType?: string;
+  noticeContent?: string;
+  status?: string;
+  remark?: string;
+}
+
+export interface SysNoticeDeleteReq {
+  noticeIds: number[];
+}
+
+export interface SysNoticeViewReq {
+  noticeId : number;
+}
+
+export interface SysNoticeViewRes extends SysNotice {
+  userIdList: any;
+  deptIdList: any;
+}
+
+export interface SysNoticeAddRes {
+  noticeId: number;
+}
+
+export interface SysNoticeEditRes  {
+  noticeId: number;
+}
+
+export interface SysNoticeDeleteRes  {
+  noticeIds: number[];
+}
+
+
+
+export async function getSysNoticeListApi(params: SysNoticeListReq) {
+  return requestClient.get<SysNoticeListRes>('/system/notice/list', { params });
+}
+
+export async function addSysNoticeApi(params: SysNoticeAddReq | {
+  [x: string]: any;
+}) {
+  return requestClient.post<SysNoticeAddRes>('/system/notice/add', { ...params });
+}
+
+
+export async function editSysNoticeApi(params: SysNoticeEditReq| {
+  [x: string]: any;
+}) {
+  return requestClient.post<SysNoticeEditRes>('/system/notice/edit', { ...params });
+}
+
+export async function deleteSysNoticeApi(params: SysNoticeDeleteReq) {
+  return requestClient.post<SysNoticeDeleteRes>('/system/notice/delete', { ...params });
+}
+
+export async function getSysNoticeApi(params: SysNoticeViewReq) {
+  return requestClient.get<SysNoticeViewRes>('/system/notice/view', { params });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/oper-log.ts b/admin-ui/vue/apps/web-antd/src/api/system/oper-log.ts
new file mode 100644
index 0000000..2e1683e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/oper-log.ts
@@ -0,0 +1,46 @@
+/**
+ * @description 操作日志相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+export interface SysOperLogListReq {
+    operIp: string;
+  businessType: string;
+  method: string;
+}
+
+export interface SysOperLog {
+    operId: number;
+    tenantId: string;
+    title: string;
+    businessType: number;
+    method: string;
+    requestMethod: string;
+    operatorType: number;
+    operName: string;
+    deptName: string;
+    operUrl: string;
+    operIp: string;
+    operLocation: string;
+    operParam: string;
+    jsonResult: string;
+    status: number;
+    errorMsg: string;
+    operTime: string;
+    costTime: number;
+}
+
+export interface SysOperLogListRes {
+  items: SysOperLog[];
+  total: number;
+}
+
+export async function getSysOperLogList(params: SysOperLogListReq) {
+    return requestClient.get<SysOperLogListRes>('/system/oper-log/list', { params });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/oss-config.ts b/admin-ui/vue/apps/web-antd/src/api/system/oss-config.ts
new file mode 100644
index 0000000..ce27bef
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/oss-config.ts
@@ -0,0 +1,127 @@
+import { requestClient } from '#/api/request';
+
+export const sysOssConfigApi = {
+  list: (params: any) => requestClient.get('/system/oss-config/list', { params }),
+  view: (params: any) => requestClient.get('/system/oss-config/view', { params }),
+  add: (params: any) => requestClient.post('/system/oss-config/add', { ...params }),
+  edit: (params: any) => requestClient.post('/system/oss-config/edit', { ...params }),
+  delete: (params: any) => requestClient.post('/system/oss-config/delete', { ...params }),
+};
+
+export interface SysOssConfigListParam {
+  page: number;
+  pageSize: number;
+  configKey: string;
+  bucketName: string;
+  status: string;
+}   
+export interface SysOssConfigListRes {
+  items: SysOssConfigListData[];
+  total: number;
+}
+export interface SysOssConfigListData {
+    ossConfigId: number;
+    configKey: string;
+    accessKey: string;
+    secretKey: string;
+    bucketName: string;
+    prefix: string;
+    endpoint: string;
+    domain: string;
+    isHttps: string;
+    region: string;
+    accessPolicy: string;
+    status: string;
+    ext1: string;
+    createdDept: number;
+    createdBy: number;
+    createdAt: string;
+    remark: string;
+}
+export interface SysOssConfigViewParam {
+  ossConfigId: number;
+}
+export interface SysOssConfigViewRes {
+  ossConfigId: number;
+  configKey: string;
+  accessKey: string;
+  secretKey: string;
+  bucketName: string;
+  prefix: string;
+  endpoint: string;
+  domain: string;
+  isHttps: string;
+  region: string;
+  accessPolicy: string;
+  status: string;
+  ext1: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  remark: string;
+}
+export interface SysOssConfigAddParam {
+    configKey: string;
+    accessKey: string;
+    secretKey: string;
+    bucketName: string;
+    prefix: string;
+    endpoint: string;
+    domain: string;
+    isHttps: string;
+    region: string;
+    accessPolicy: string;
+    status: string;
+    ext1: string;
+    remark: string;
+}
+export interface SysOssConfigAddRes {
+  ossConfigId: number;
+}
+export interface SysOssConfigEditParam {
+    ossConfigId: number;
+    configKey?: string;
+    accessKey?: string;
+    secretKey?: string;
+    bucketName?: string;
+    prefix?: string;
+    endpoint?: string;
+    domain?: string;
+    isHttps?: string;
+    region?: string;
+    accessPolicy?: string;
+    status?: string;
+    ext1?: string;
+    remark?: string;
+}
+export interface SysOssConfigEditRes {
+  ossConfigId: number;
+}
+export interface SysOssConfigDeleteParam {
+  ossConfigIds: number[];
+}
+export interface SysOssConfigDeleteRes {
+  ossConfigIds: number[];
+}
+
+export async function getSysOssConfigListApi(params: SysOssConfigListParam) {
+  return requestClient.get<SysOssConfigListRes>('/system/oss-config/list', { params });
+}
+export async function getSysOssConfigViewApi(params: SysOssConfigViewParam) {
+  return requestClient.get<SysOssConfigViewRes>('/system/oss-config/view', { params });
+}
+export async function addSysOssConfigApi(params: SysOssConfigAddParam |{
+  [x: string]: any;
+}) {
+  return requestClient.post<SysOssConfigAddRes>('/system/oss-config/add', { ...params });
+}
+export async function editSysOssConfigApi(params: SysOssConfigEditParam|{
+  [x: string]: any;
+}) {
+  return requestClient.post<SysOssConfigEditRes>('/system/oss-config/edit', { ...params });
+}
+export async function deleteSysOssConfigApi(params: SysOssConfigDeleteParam|{
+  [x: string]: any;
+}) {
+  return requestClient.post<SysOssConfigDeleteRes>('/system/oss-config/delete', { ...params });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/oss.ts b/admin-ui/vue/apps/web-antd/src/api/system/oss.ts
new file mode 100644
index 0000000..c06a882
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/oss.ts
@@ -0,0 +1,118 @@
+/**
+ * @description 对象存储管理相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+import type { AxiosRequestConfig } from '@vben/request';
+export interface SysOssListParam {
+  page: number;
+  pageSize: number;
+  fileName: string;
+  originalName: string;
+  fileSuffix: string;
+}
+
+export interface SysOssListData {
+  ossId: number;
+  tenantId: string;
+  fileName: string;
+  originalName: string;
+  fileSuffix: string;
+  url: string;
+  createdDept: number;
+  createdAt: string;
+  createdBy: number;
+  service: string;
+}
+
+export interface SysOssListModel {
+  items: SysOssListData[];
+  total: number;
+}
+
+export interface SysOssDownloadParam {
+  ossId: number;
+}
+
+export interface SysOssDownloadModel {
+  ossId: number;
+}
+
+export interface SysOssDeleteParam {
+  ossIds: number[];
+}
+
+export interface SysOssDeleteModel {
+  ossIds: number[];
+}
+
+export interface SysOssViewParam {
+  ossId: number;
+}
+
+export interface SysOssViewModel {
+  ossId: number;
+  tenantId: string;
+  fileName: string;
+  originalName: string;
+  fileSuffix: string;
+  url: string;
+  createdDept: number;
+  createdAt: string;
+  createdBy: number;
+  service: string;
+}
+
+export async function getSysOssListApi(params: SysOssListParam) {
+  return requestClient.get<SysOssListModel>('/system/oss/list', { params });
+}
+
+export async function getSysOssDownloadApi(params: SysOssDownloadParam) {
+  return requestClient.get<SysOssDownloadModel>('/system/oss/download', { params });
+}
+
+export async function getSysOssViewApi(params: SysOssViewParam) {
+  return requestClient.get<SysOssViewModel>('/system/oss/view', { params });
+}
+
+export async function deleteSysOssApi(params: SysOssDeleteParam) {
+  return requestClient.post<SysOssDeleteModel>('/system/oss/delete', { ...params });
+}
+
+export type ID = number | string;
+export function ossDownload(
+  ossId: ID,
+  onDownloadProgress?: AxiosRequestConfig['onDownloadProgress'],
+) {
+  return requestClient.download(`/common/oss/download?ossId=${ossId}`, {
+    timeout: 30 * 1000,
+    onDownloadProgress
+  });
+}
+
+export function ossUpload(file: Blob | File) {
+  const formData = new FormData();
+  formData.append('file', file);
+  return requestClient.post('/common/oss/upload', formData, {
+    headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8' },
+    timeout: 30 * 1000,
+  });
+}
+
+export function ossUploadImg(file: Blob | File) {
+  console.log(file);
+  const files = new FormData();
+  files.append('file', file);
+  files.append('isDevice', "false");
+  files.append('fileType', "img");
+  console.log(files.getAll('file'));
+  return requestClient.post('/common/oss/upload',  files, {
+    headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8' },
+    timeout: 30 * 1000,
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/post.ts b/admin-ui/vue/apps/web-antd/src/api/system/post.ts
new file mode 100644
index 0000000..c64d9c2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/post.ts
@@ -0,0 +1,143 @@
+/**
+ * @description 岗位管理相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+import type { SysDeptMini } from '#/api/system/dept';
+
+export interface SysPostListParam {
+  page?: number;
+  pageSize?: number;
+  postCode?: string;
+  postName?: string;
+  deptId?: number;
+  belongDeptId?: number;
+}
+
+export interface SysPostListData {
+    postId: number; 
+    tenantId: string;
+    deptId: number;
+    postCode: string;
+    postCategory: string;
+    postName: string;
+    postSort: number;
+    status: string;
+    remark: string;
+    createdAt: string;
+    deptInfo: SysDeptMini;
+}
+
+export interface SysPostListRes {
+  items: SysPostListData[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+export async function getSysPostListApi(params: SysPostListParam) {
+  return requestClient.get<SysPostListRes>('/system/post/list', { params });
+}
+
+export interface SysPostMini {
+  postId: number;
+  deptId: number;
+  postName: string;
+}
+
+export interface SysPostAddParam {
+  deptId: number;
+  postCode: string;
+  postCategory: string;
+  postName: string;
+  postSort: number;
+  status: string;
+  remark: string;
+}
+
+export interface SysPostAddRes {
+  postId: number;
+}
+
+export async function addSysPostApi(params: SysPostAddParam|{
+  [x: string]: any;
+}) {
+  return requestClient.post<SysPostAddRes>('/system/post/add', { ...params });
+}
+
+export interface SysPostEditParam {
+  postId: number;
+  deptId?: number;
+  postCode?: string;
+  postCategory?: string;
+  postName?: string;
+  postSort?: number;
+  status?: string;
+  remark?: string;
+}
+
+export interface SysPostEditRes {
+  postId: number;
+}
+
+export async function editSysPostApi(params: SysPostEditParam|{
+  [x: string]: any;
+}) {
+  return requestClient.post<SysPostEditRes>('/system/post/edit', { ...params });
+}
+
+export interface SysPostDeleteParam {
+  postId?: number;
+  postIds?: number[];
+}
+
+export interface SysPostDeleteRes {
+  postId: number;
+} 
+
+export async function deleteSysPostApi(params: SysPostDeleteParam) {
+  return requestClient.post<SysPostDeleteRes>('/system/post/delete', { ...params });
+}
+
+export interface SysPostViewParam {
+  postId: number;
+}
+
+export interface SysPostViewRes {
+  postId: number;
+  tenantId: string;
+  deptId: number;
+  postCode: string;
+  postCategory: string;
+  postName: string;
+  postSort: number;
+  status: string;
+  remark: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  deptInfo: SysDeptMini;
+}
+
+export async function getSysPostViewApi(params: SysPostViewParam) {
+  return requestClient.get<SysPostViewRes>('/system/post/view', { params });
+}
+
+export interface SysPostExportParam extends SysPostListParam {
+}
+
+export interface SysPostExportRes {
+}
+
+export async function getSysPostExportApi(params: SysPostExportParam) {
+  return requestClient.post<Blob>('/system/post/export',  params , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/qrcode.ts b/admin-ui/vue/apps/web-antd/src/api/system/qrcode.ts
new file mode 100644
index 0000000..0f39baf
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/qrcode.ts
@@ -0,0 +1,129 @@
+/**
+ * @description 系统二维码管理相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+/**
+ * @description 获取绑定二维码
+ */
+export interface QrBindRes {
+  ticket: string;
+  expireTime: string;
+  qrUrl: string;
+  scanned: boolean;
+  openId?: string;
+}
+export async function getQrBindApi() {
+  return requestClient.get<QrBindRes>('/system/qrcode/bind');
+}
+
+/**
+ * @description 获取绑定二维码扫码状态
+ */
+export interface QrBindStatusRes extends QrBindRes {
+  bound?: boolean;
+  expired?: boolean;
+}
+export async function getQrBindStatusApi() {
+  return requestClient.get<QrBindStatusRes>('/system/qrcode/bind/status');
+}
+
+/**
+ * @description 获取登录二维码
+ */
+export interface QrLoginRes {
+  tempUserId: string;
+  ticket: string;
+  expireTime: string;
+  qrUrl: string;
+  scanned: boolean;
+  openId?: string;
+  bound?: boolean;
+  expired?: boolean;
+  loginUserOut?: {
+    id: number;
+    username: string;
+    nickName: string;
+    avatar: string;
+    tenantId: string;
+    deptId: number;
+  };
+  token?: string;
+}
+export async function getQrLoginApi() {
+  return requestClient.get<QrLoginRes>('/system/qrcode/login');
+}
+
+/**
+ * @description 获取登录二维码扫码状态
+ */
+export async function getQrLoginStatusApi(tempUserId: string) {
+  return requestClient.get<QrLoginRes>('/system/qrcode/login/status', { params: { tempUserId } });
+}
+
+/**
+ * @description 登录并关联OpenId
+ */
+export interface QrLoginBindOpenIdParam {
+  openId: string;
+  tenantId: string;
+  username: string;
+  password: string;
+  captchaID?: string;
+  captchaValue: string;
+}
+export async function qrLoginBindOpenIdApi(params: QrLoginBindOpenIdParam) {
+  return requestClient.post<QrLoginRes>('/system/qrcode/loginAndBindOpenId', params);
+}
+
+/**
+ * @description 注册并关联OpenId
+ */
+export interface QrRegisterBindOpenIdParam {
+  openId: string;
+  userName: string;
+  password: string;
+  tenantId: string;
+  captchaId?: string;
+  captchaValue: string;
+}
+export async function qrRegisterBindOpenIdApi(params: QrRegisterBindOpenIdParam) {
+  return requestClient.post<QrLoginRes>('/system/qrcode/registerAndBindOpenId', params);
+}
+
+/**
+ * @description 扫码成功回调
+ */
+export interface QrScanCallbackParam {
+  sceneId?: number;
+  thirdId?: number;
+  ticket?: string;
+  openId?: string;
+  event?: string;
+}
+export async function qrScanCallbackApi(params: QrScanCallbackParam) {
+  return requestClient.post('/system/qrcode/scan/callback', params);
+}
+
+/**
+ * @description 扫码后选择用户登录
+ */
+export interface QrLoginSelectUserParam {
+  userName: string;
+  tenantId: string;
+  openId: string;
+}
+export async function qrLoginSelectUserApi(params: QrLoginSelectUserParam) {
+  return requestClient.post<QrLoginRes>('/system/qrcode/loginSelectUser', params);
+}
+
+//删除绑定关系  
+export async function deleteSocialBindingApi(id: string) {
+  return requestClient.post(`/system/social/delete`, { id });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/role.ts b/admin-ui/vue/apps/web-antd/src/api/system/role.ts
new file mode 100644
index 0000000..001aa90
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/role.ts
@@ -0,0 +1,146 @@
+/**
+ * @description 角色管理相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+export interface SysRoleListParam {
+  page?: number;
+  pageSize?: number;
+  deptId?: number;
+  roleName?: string;
+  roleKey?: string;
+  status?: string;
+  createdAt?: string[];
+}
+
+export interface SysRoleListData {
+  roleId: number;
+  tenantId: string;
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  dataScope: string;
+  menuCheckStrictly: number;
+  deptCheckStrictly: number;
+  status: string;
+  createdDept: number;
+  createdAt: string;
+  remark: string;
+}
+
+export interface SysRoleViewData {
+  isTemplateRole: boolean;
+  isDeptDefaultRole: boolean;
+  roleMenuDataScopes: Record<number, string>;
+  deptId: number;
+  roleId: number;
+  tenantId: string;
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  dataScope: string;
+  menuCheckStrictly: number;
+  deptCheckStrictly: number;
+  status: string;
+  createdDept: number;
+  createdAt: string;
+  remark: string;
+  menuIds: number[];
+  deptIds: number[];
+}
+
+export interface SysRoleListRes {
+  items: SysRoleListData[];
+  total: number;
+}
+
+export async function getSysRoleListApi(params: SysRoleListParam) {
+  return requestClient.get<SysRoleListRes>('/system/role/list', { params });
+}
+
+export interface SysRoleMini {
+  roleId: number;
+  roleName: string;
+  dataScope: string;
+}
+export interface SysRoleViewParam {
+  roleId: number;
+}
+
+export interface SysRoleAddParam {
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  menuCheckStrictly: number;
+  deptCheckStrictly: number;
+  status: string;
+  remark: string;
+  menuIds: number[];
+}
+
+export interface SysRoleEditParam {
+  roleId: number;
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  menuCheckStrictly: number;
+  deptCheckStrictly: number;
+  status: string;
+  remark: string;
+  menuIds: number[];
+}
+
+export interface SysRoleDeleteParam {
+  roleId: number;
+  roleIds: number[];
+}
+
+export interface SysRoleAddRes {}
+
+export interface SysRoleEditRes {}
+
+export interface SysRoleDeleteRes {}
+
+export interface SysRoleDataScopeEditParam {
+  roleId: number;
+  dataScope: string;
+  deptCheckStrictly?: number;
+  deptIds?: number[];
+}
+export interface SysRoleDataScopeEditRes {}
+
+export async function addSysRoleApi(params: SysRoleAddParam | any) {
+  return requestClient.post<SysRoleAddRes>('/system/role/add', { ...params });
+}
+
+export async function editSysRoleApi(params: SysRoleEditParam | any) {
+  return requestClient.post<SysRoleEditRes>('/system/role/edit', { ...params });
+}
+
+export async function deleteSysRoleApi(params: SysRoleDeleteParam | any) {
+  return requestClient.post<SysRoleDeleteRes>('/system/role/delete', {
+    ...params,
+  });
+}
+
+export async function getSysRoleViewApi(params: SysRoleViewParam | any) {
+  console.log(
+    '/Users/lixiujie/dev_test/dev_go/xiujie_iot/vue/apps/web-antd/src/api/system/role.ts',
+    params,
+  );
+  return requestClient.get<SysRoleViewData>('/system/role/view', { params });
+}
+
+export async function editSysRoleDataScopeApi(
+  params: SysRoleDataScopeEditParam | any,
+) {
+  return requestClient.post<SysRoleDataScopeEditRes>('/system/role/dataScope', {
+    ...params,
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/social.ts b/admin-ui/vue/apps/web-antd/src/api/system/social.ts
new file mode 100644
index 0000000..0183d38
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/social.ts
@@ -0,0 +1,54 @@
+/**
+ * @description 社交账号管理相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+
+export interface SysSocialListReq {
+  page?: number;
+  pageSize?: number;
+  userId?: number;
+}
+
+export interface SysSocialListRes {
+  items: SysSocialListModel[];
+  total: number;
+}
+
+export interface SysSocialListModel {
+    id: number;
+userId: number;
+tenantId: string;
+  authId: string;
+  source: string;
+  openId: string;
+  userName: string;
+  nickName: string;
+  email: string;
+  avatar: string;
+  accessToken: string;
+  expireIn: number;
+  refreshToken: string;
+  accessCode: string;
+  unionId: string;
+  scope: string;
+  tokenType: string;
+  idToken: string;
+  macAlgorithm: string;
+  macKey: string;
+  code: string;
+  oauthToken: string;
+  oauthTokenSecret: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+}
+
+export async function getSysSocialListApi(params: SysSocialListReq) {
+    return requestClient.get<SysSocialListRes>('/system/social/list', { params });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/sysNoticeUser/index.ts b/admin-ui/vue/apps/web-antd/src/api/system/sysNoticeUser/index.ts
new file mode 100644
index 0000000..daff7a7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/sysNoticeUser/index.ts
@@ -0,0 +1,38 @@
+import { requestClient } from '#/api/request';
+
+// 获取用户通知公告表列表
+export function List(params:any) {
+  return requestClient.get<any>('system/sysNoticeUser/list', { params });
+}
+
+// 删除/批量删除用户通知公告表
+export function Delete(params:any) {
+  return requestClient.post<any>('system/sysNoticeUser/delete', { ...params });
+}
+
+// 添加/编辑用户通知公告表
+export function Edit(params:any) {
+  return requestClient.post<any>('system/sysNoticeUser/edit', { ...params });
+}
+
+// 修改用户通知公告表状态
+export function Status(params:any) {
+  return requestClient.post<any>('system/sysNoticeUser/status', { ...params });
+}
+
+// 获取用户通知公告表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('system/sysNoticeUser/view', { params });
+}
+
+// 导出用户通知公告表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/system/sysNoticeUser/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
+/** 已读 */
+export function Read(params:any) {
+  return requestClient.post<any>('system/sysNoticeUser/read', { ...params });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/tTplatformSetting.ts b/admin-ui/vue/apps/web-antd/src/api/system/tTplatformSetting.ts
new file mode 100644
index 0000000..ddc0dc7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/tTplatformSetting.ts
@@ -0,0 +1,54 @@
+import { requestClient } from '#/api/request';
+
+export interface TTplatformSettingViewReq {
+  /**
+   * 完整域名
+   */
+  fullDomain?: string;
+  [property: string]: any;
+}
+
+export interface TTplatformSettingViewRes {
+  /**
+   * 图标地址
+   */
+  appIcon?: string;
+  /**
+   * 平台标题
+   */
+  appTitle?: string;
+  /**
+   * 完整域名
+   */
+  fullDomain?: string;
+  /**
+   * 登录页描述文案
+   */
+  loginPageDescription?: string;
+  /**
+   * 登录页大标题
+   */
+  loginPageTitle?: string;
+  /**
+   * 登录标语图地址
+   */
+  loginSloganImage?: string;
+  /**
+   * 状态 0启用 1禁用
+   */
+  status?: number;
+  /**
+   * 二级域名前缀
+   */
+  subDomain?: string;
+  [property: string]: any;
+}
+
+export async function getTTplatformSettingViewApi(
+  params: TTplatformSettingViewReq,
+) {
+  return requestClient.get<TTplatformSettingViewRes>(
+    '/system/tTplatformSetting/view',
+    { params },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/tenant.ts b/admin-ui/vue/apps/web-antd/src/api/system/tenant.ts
new file mode 100644
index 0000000..b1fcdf7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/tenant.ts
@@ -0,0 +1,136 @@
+import { requestClient } from '#/api/request';
+import {md5} from 'js-md5';
+export interface SysTenantListParam {
+  page: number;
+  pageSize: number;
+  tenantId: string;
+  contactUserName: string;
+  contactPhone: string;
+}
+
+export interface SysTenantListData {
+    id: number;
+    tenantId: string;
+    contactUserName: string;
+    contactPhone: string;
+    companyName: string;
+    licenseNumber: string;
+    address: string;
+    intro: string;
+    domain: string;
+    remark: string;
+    packageId: number;
+    expireTime: string;
+    accountCount: number;
+    status: string;
+    createdDept: number;
+    createdBy: number;
+    createdAt: string;
+    updatedBy: number;
+    updatedAt: string;  
+}
+
+export interface SysTenantListRes {
+  items: SysTenantListData[];
+  total: number;
+}
+
+export interface SysTenantAddParam {
+  contactUserName: string;
+  contactPhone: string;
+  companyName: string;
+  licenseNumber: string;
+  address: string;
+  intro: string;
+  domain: string;
+  remark: string;
+  packageId: number;
+  expireTime: string;
+  accountCount: number;
+  status: string;
+  username: string;
+  password: string;
+}     
+
+export interface SysTenantAddModel {
+  id: number;
+}
+
+export interface SysTenantEditParam {
+  id: number;
+  tenantId?: string;
+  contactUserName?: string;
+  contactPhone?: string;
+  companyName?: string;
+  licenseNumber?: string;
+  address?: string;
+  intro?: string;
+  domain?: string;
+  remark?: string;
+  packageId?: number;
+  expireTime?: string;
+  accountCount?: number;
+  status?: string;
+} 
+export interface SysTenantEditModel {
+  id: number;
+}
+
+export interface SysTenantDeleteParam {
+  ids : number[];
+}
+export interface SysTenantDeleteModel {
+  ids: number[];
+}
+
+export interface SysTenantStatusParam {
+  id: number;
+  status: string;
+}
+export interface SysTenantStatusModel {
+  id: number;
+} 
+
+export interface SysTenantViewParam {
+  id: number;
+}
+export interface SysTenantViewModel {
+  id: number;
+}
+
+export async function getSysTenantListApi(params: SysTenantListParam) { 
+  return requestClient.get<SysTenantListRes>('/system/tenant/list', { params });
+}
+
+export async function getSysTenantViewApi(params: SysTenantViewParam) {
+  return requestClient.get<SysTenantViewModel>('/system/tenant/view', { params });
+}
+
+export async function addSysTenantApi(params: SysTenantAddParam|{
+  [x: string]: any;
+}) {
+  params.password = md5(params.password);
+  return requestClient.post<SysTenantAddModel>('/system/tenant/add', { ...params });
+}
+
+export async function editSysTenantApi(params: SysTenantEditParam|{
+  [x: string]: any;
+}) {
+  return requestClient.post<SysTenantEditModel>('/system/tenant/edit', { ...params });
+}
+
+export async function deleteSysTenantApi(params: SysTenantDeleteParam|{
+  [x: string]: any;
+}) {
+  return requestClient.post<SysTenantDeleteModel>('/system/tenant/delete', { ...params });
+}
+
+export async function statusSysTenantApi(params: SysTenantStatusParam) {
+  return requestClient.post<SysTenantStatusModel>('/system/tenant/status', { ...params });
+}
+
+export async function syncmenuTenantApi(params: any) {
+  return requestClient.post<SysTenantStatusModel>('/system/tenant/syncmenu', {
+    ...params,
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/tenant_package.ts b/admin-ui/vue/apps/web-antd/src/api/system/tenant_package.ts
new file mode 100644
index 0000000..844bcec
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/tenant_package.ts
@@ -0,0 +1,116 @@
+import { requestClient } from '#/api/request';
+
+export interface SysTenantPackageListParam {
+  page: number;
+  pageSize: number;
+  tenantId?: string;
+  contactUserName?: string;
+  contactPhone?: string;
+}
+
+export interface SysTenantPackageListData {
+    packageId: number;
+    packageName: string;
+    menuIds: string;
+    remark: string;
+    menuCheckStrictly: number;
+    status: string;
+    createdDept: number;
+    createdBy: number;
+    createdAt: string;
+    updatedBy: number;
+    updatedAt: string;
+}
+export interface SysTenantPackageListRes {
+  items: SysTenantPackageListData[];
+  total: number;
+}
+
+export interface SysTenantPackageViewParam {
+  packageId: number;
+}
+
+export interface SysTenantPackageViewRes   {
+  packageId: number;
+  packageName: string;
+  menuIds: string;
+  remark: string;
+  menuCheckStrictly: number;
+  status: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+}
+
+export interface SysTenantPackageAddParam {
+  packageName: string;
+  menuIds: string;
+  remark: string;
+  menuCheckStrictly: number;
+  status: string;
+}
+
+  export interface SysTenantPackageAddRes {
+  packageId: number;
+}
+
+export interface SysTenantPackageEditParam {
+  packageId: number;
+  packageName: string;
+  menuIds: string;
+  remark: string;
+  menuCheckStrictly: number;
+  status: string;
+}
+
+export interface SysTenantPackageEditRes {
+  packageId: number;
+}
+
+export interface SysTenantPackageDeleteParam {  
+  packageIds: number[];
+}
+
+export interface SysTenantPackageDeleteRes {
+  packageIds: number[];
+}
+
+export interface SysTenantPackageStatusParam {
+  packageId: number;
+  status: string;
+}
+
+export interface SysTenantPackageStatusRes {
+  packageId: number;
+}
+
+export async function getSysTenantPackageListApi(params: SysTenantPackageListParam) {
+  return requestClient.get<SysTenantPackageListRes>('/system/tenant/package/list', { params });
+}
+
+export async function getSysTenantPackageViewApi(params: SysTenantPackageViewParam) {
+  return requestClient.get<SysTenantPackageViewRes>('/system/tenant/package/view', { params });
+}
+
+
+export async function addSysTenantPackageApi(params: SysTenantPackageAddParam|{
+  [x: string]: any;
+}) {
+  return requestClient.post<SysTenantPackageAddRes>('/system/tenant/package/add', { ...params });
+}
+
+export async function editSysTenantPackageApi(params: SysTenantPackageEditParam|{
+  [x: string]: any;
+}) {
+  return requestClient.post<SysTenantPackageEditRes>('/system/tenant/package/edit', { ...params });
+} 
+
+export async function deleteSysTenantPackageApi(params: SysTenantPackageDeleteParam) {
+  return requestClient.post<SysTenantPackageDeleteRes>('/system/tenant/package/delete', { ...params });
+}   
+
+export async function statusSysTenantPackageApi(params: SysTenantPackageStatusParam) {
+  return requestClient.post<SysTenantPackageStatusRes>('/system/tenant/package/status', { ...params });
+}   
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/api/system/user.ts b/admin-ui/vue/apps/web-antd/src/api/system/user.ts
new file mode 100644
index 0000000..cbb301f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/system/user.ts
@@ -0,0 +1,320 @@
+/**
+ * @description 用户管理相关接口
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import { requestClient } from '#/api/request';
+import type { SysDeptMini } from './dept';
+import type { SysRoleMini } from './role';
+import type { SysPostMini } from './post';
+import type { UserInfo } from '@vben/types';
+import type { Recordable } from '@vben/types';
+import {md5} from 'js-md5';
+
+export interface SysUserListParam {
+    tenantId: string;
+    userId: number;
+    deptId: number;
+    userName: string;
+    nickName: string;
+    email: string;
+    phonenumber: string;
+    status: string;
+    createdAt: string;
+    page: number;
+    pageSize: number;
+  }
+  export interface SysUserListData {
+    userId: number; 
+    tenantId: string;
+    deptId: number;
+    userName: string;
+    nickName: string;
+    userType: string;
+    email: string;  
+    phonenumber: string;
+    sex: string;
+    avatar: string;
+    status: string;
+    loginIp: string;
+    loginDate: string;
+    createdDept: number;
+    createdBy: number;
+    createdAt: string;
+    updatedBy: number;
+    updatedAt: string;
+    deletedBy: number;
+    deletedAt: string;
+    remark: string;
+    deptInfo: SysDeptMini;
+  }
+  export interface SysUserListRes {
+    items: SysUserListData[];
+    total: number;
+  }
+  
+  export async function getSysUserListApi(params: SysUserListParam) {
+    return requestClient.get<SysUserListRes>('/system/user/list', { params });
+  }
+  
+
+  export interface UserProfileRes {
+    user: UserProfileData;
+  }
+
+  export interface UserProfileData {
+    userId: number;
+    tenantId: string;
+    deptId: number | undefined;
+    userName: string;
+    nickName: string;
+    userType: string;
+    email: string;
+    phonenumber: string;
+    sex: string;
+    avatar: string;
+    status: string;
+    loginIp: string;
+    loginDate: string;
+    createdDept: number;
+    createdBy: number;
+    createdAt: string;
+    remark: string;
+    deptInfo: SysDeptMini;
+    roles: SysRoleMini[];
+    posts: SysPostMini[];
+    companyInfo: SysDeptMini;
+  }
+
+
+
+  export interface SysUserViewModel extends UserProfileData {
+
+  }
+
+  export const EmptySysUserViewModel: SysUserViewModel = {
+    userId: 0,
+    tenantId: '',
+    deptId: undefined,
+    userName: '',
+    nickName: '',
+    userType: '',
+    email: '',
+    phonenumber: '',
+    sex: '0',
+    avatar: '',
+    status: '0',
+    loginIp: '',
+    loginDate: '',
+    createdDept: 0,
+    createdBy: 0,
+    createdAt: '',
+    remark: '',
+    deptInfo: {
+      deptId: 0,
+      deptName: '',
+    },
+    roles: [],
+    posts: [],
+  }
+
+  export interface SysUserViewParam {
+    userId: number;
+  }
+
+  export interface SysUserAddParam {
+    deptId: number;
+    userName: string;
+    nickName: string;
+    userType: string;
+    email: string;
+    phonenumber: string;
+    sex: string;
+    avatar: string;
+    salt: string;
+    password: string;
+    status: string;
+    remark: string;
+  }
+
+  export interface SysUserUpdateParam {
+    userId: number;
+    deptId?: number;
+    userName?: string;
+    nickName?: string;
+    userType?: string;
+    email?: string;
+    phonenumber?: string;
+    sex?: string;
+    avatar?: string;
+    status?: string;
+    updatedBy?: number;
+    updatedAt?: string;
+    remark?: string;
+  }
+
+  export interface SysUserDeleteParam {
+    userId?: number;
+    userIds?: number[];
+  }
+
+  export interface SysUserResetPasswordParam {
+    userId: number;
+    password: string;
+  }
+
+  export interface UpdateCurrentUserPasswordParam {
+    oldPassword: string;
+    newPassword: string;
+  }
+
+  export async function getUserProfileApi() {
+    return requestClient.get<UserProfileRes>('/system/user/profile');
+  }
+
+  export async function updateCurrentUserAvatar(params: UserProfileData) {
+    return requestClient.post<UserProfileRes>('/system/user/profile/avatar', { params });
+  }
+
+  export async function updateCurrentUserPassword(params: UpdateCurrentUserPasswordParam) {
+    params.oldPassword = md5(params.oldPassword);
+    params.newPassword = md5(params.newPassword);
+    return requestClient.post('/system/user/profile/password', { ...params });
+  }
+  export async function updateCurrentUserProfile(params: UserProfileData|Recordable<any>) {
+    return requestClient.post<UserInfo>('/system/user/profile/update', { ...params });
+  }
+
+  export interface SendCurrentUserEmailCodeParam {
+    captchaId: string;
+    captchaValue: string;
+    email: string;
+  }
+
+  export interface UpdateCurrentUserEmailParam {
+    code: string;
+    email: string;
+  }
+
+  export interface SendCurrentUserPhoneCodeParam {
+    captchaId: string;
+    captchaValue: string;
+    phonenumber: string;
+  }
+
+  export interface UpdateCurrentUserPhoneParam {
+    code: string;
+    phonenumber: string;
+  }
+
+  export async function sendCurrentUserEmailCode(params: SendCurrentUserEmailCodeParam) {
+    return requestClient.post('/system/user/profile/email/code', { ...params });
+  }
+
+  export async function updateCurrentUserEmail(params: UpdateCurrentUserEmailParam) {
+    return requestClient.post('/system/user/profile/email', { ...params });
+  }
+
+  export async function sendCurrentUserPhoneCode(params: SendCurrentUserPhoneCodeParam) {
+    return requestClient.post('/system/user/profile/phone/code', { ...params });
+  }
+
+  export async function updateCurrentUserPhone(params: UpdateCurrentUserPhoneParam) {
+    return requestClient.post('/system/user/profile/phone', { ...params });
+  }
+
+  export async function getSysUser(params: SysUserViewParam) {
+    return requestClient.get<SysUserViewModel>('/system/user/view', { params });
+  }
+
+  export async function addSysUser(params: SysUserAddParam|{
+    [x: string]: any;
+}) {
+    return requestClient.post<SysUserViewModel>('/system/user/add', { ...params });
+  }
+
+  export async function updateSysUser(params: SysUserUpdateParam|{
+    [x: string]: any;
+}) {
+    return requestClient.post<SysUserViewModel>('/system/user/update', { ...params });
+  }
+
+  export async function deleteSysUser(params: SysUserDeleteParam) {
+    return requestClient.post('/system/user/delete', { ...params });
+  } 
+
+  export async function resetSysUserPassword(params: SysUserResetPasswordParam) {
+    params.password = md5(params.password);
+    return requestClient.post('/system/user/resetPassword', { ...params });
+  }
+
+  export async function updateSysUserStatus(params: any) {
+    return requestClient.post('/system/user/status', { ...params });
+  }
+  
+  export interface SysUserListByDeptIdParam {
+    deptId: number;
+  }
+  export interface SysUserMini {
+    userId: number;
+    userName: string;
+    nickName: string;
+    avatar: string;
+    tenantId: string;
+    deptId: number;
+  }
+
+  export interface SysUserMiniListRes {
+    items: SysUserMini[];
+    total: number;
+  }
+
+  export async function getSysUserListByDeptIdApi(params: SysUserListByDeptIdParam) {
+    return requestClient.get<SysUserMiniListRes>('/system/user/listByDeptId', { params });
+  }
+
+  // ==================== MFA 相关 ====================
+
+  export interface IsMfaEnabledParam {
+    userId: number;
+  }
+
+  export interface IsMfaEnabledRes {
+    userId: number;
+    mfaEnabled: number;
+  }
+
+  export async function isMfaEnabled(params: IsMfaEnabledParam) {
+    return requestClient.get<IsMfaEnabledRes>('/system/user/isMfaEnabled', { params });
+  }
+
+  export interface SysUserMfaEnabledModel {
+    userId: number;
+    uuid: string;
+    code: string;
+    mfaEnabled: number;
+  }
+
+  export interface SetMfaEnabledRes {
+    uuid: string;
+  }
+
+  export async function setMfaEnabled() {
+    return requestClient.post<SetMfaEnabledRes>('/system/user/setMfaEnabled');
+  }
+
+  export interface MfaVerifyParam {
+    uuid: string;
+    code: string;
+    mfaEnabled: number;
+  }
+
+  export interface MfaVerifyRes {}
+
+  export async function mfaVerify(params: MfaVerifyParam) {
+    return requestClient.post<MfaVerifyRes>('/system/user/mfaVerify', { ...params });
+  }
diff --git a/admin-ui/vue/apps/web-antd/src/api/utils/index.ts b/admin-ui/vue/apps/web-antd/src/api/utils/index.ts
new file mode 100644
index 0000000..e162956
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/api/utils/index.ts
@@ -0,0 +1,52 @@
+import { requestClient } from '#/api/request';
+
+/** 创建文件夹 */
+export function Create(params: { displayName: string; parentId: number }) {
+  return requestClient.post<any>('gallery/gallery/createFolder', { ...params });
+}
+
+/** 获取文件夹列表 */
+export function List(params: {
+  keyword?: string;
+  page?: number;
+  pageSize?: number;
+  parentId: number | string;
+  type?: 'folder' | 'image';
+}) {
+  return requestClient.get<any>('gallery/gallery/list', { params });
+}
+
+/** 重命名 */
+export function Rename(params: { displayName: string; galleryId: number }) {
+  return requestClient.post<any>('gallery/gallery/rename', { ...params });
+}
+
+/** 批量删除 */
+export function Delete(params: { galleryIds: number[] }) {
+  return requestClient.post<any>('gallery/gallery/batchDelete', { ...params });
+}
+
+/** 上传图片 */
+export function Upload(params: {
+  displayName?: string;
+  file: File;
+  newFileType?: number;
+  parentId: number;
+  saveOriginalName?: string;
+}) {
+  return requestClient.upload<any>('gallery/gallery/upload', {
+    ...params,
+    file: params.file,
+  });
+}
+
+/** 获取api.json */
+export async function GetApiJSON() {
+  const response = await fetch(new URL('/api.json', window.location.origin));
+
+  if (!response.ok) {
+    throw new Error('获取 api.json 失败');
+  }
+
+  return response.json();
+}
diff --git a/admin-ui/vue/apps/web-antd/src/app.vue b/admin-ui/vue/apps/web-antd/src/app.vue
new file mode 100644
index 0000000..5f6d937
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/app.vue
@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useAntdDesignTokens } from '@vben/hooks';
+import { preferences, usePreferences } from '@vben/preferences';
+
+import { App, ConfigProvider, theme } from 'ant-design-vue';
+
+import { antdLocale } from '#/locales';
+
+defineOptions({ name: 'App' });
+
+const { isDark } = usePreferences();
+const { tokens } = useAntdDesignTokens();
+
+const tokenTheme = computed(() => {
+  const algorithm = isDark.value
+    ? [theme.darkAlgorithm]
+    : [theme.defaultAlgorithm];
+
+  // antd 紧凑模式算法
+  if (preferences.app.compact) {
+    algorithm.push(theme.compactAlgorithm);
+  }
+
+  return {
+    algorithm,
+    token: tokens,
+  };
+});
+</script>
+
+<template>
+  <ConfigProvider :locale="antdLocale" :theme="tokenTheme">
+    <App>
+      <RouterView />
+    </App>
+  </ConfigProvider>
+</template>
+
+<style>
+html.dark .vben-menu.is-dark {
+  --menu-background-color: 220 12% 10%;
+  --menu-item-background-color: transparent;
+  --menu-item-color: rgb(229 231 235 / 82%);
+  --menu-item-hover-color: #f5f7fa;
+  --menu-item-hover-background-color: hsl(220 10% 16%);
+  --menu-item-active-color: #ffffff;
+  --menu-item-active-background-color: hsl(220 8% 18%);
+  --menu-submenu-background-color: hsl(220 12% 10%);
+  --menu-submenu-hover-color: #f5f7fa;
+  --menu-submenu-hover-background-color: hsl(220 10% 16%);
+  --menu-submenu-active-color: #ffffff;
+  --menu-submenu-active-background-color: transparent;
+}
+
+html.dark .vben-menu.is-dark .vben-menu-item:not(.is-active),
+html.dark .vben-menu.is-dark .vben-sub-menu:not(.is-active),
+html.dark .vben-menu.is-dark .vben-sub-menu-content {
+  background: transparent !important;
+}
+
+html.dark .vben-menu.is-dark .vben-menu-item.is-active {
+  background: hsl(220 8% 18%) !important;
+}
+
+html.dark .bg-sidebar,
+html.dark .bg-sidebar-deep {
+  background-color: #17191d !important;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/assets/icons/custom.ts b/admin-ui/vue/apps/web-antd/src/assets/icons/custom.ts
new file mode 100644
index 0000000..743b95b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/assets/icons/custom.ts
@@ -0,0 +1,120 @@
+/** 自定义 */
+export const custom = [
+  /** 加号 */
+  {
+    key: 'PlusOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8"/><path fill="currentColor" d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8Z"/></svg>',
+  },
+  /** 减号 */
+  {
+    key: 'MinusOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8"/></svg>',
+  },
+  /** 刷新 */
+  {
+    key: 'ReloadOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="m909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92C290 92 102.3 279.5 102 511.5C101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1c1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 0 0-10.1 4.8c-1.8 5-3.8 10-5.9 14.9c-17.3 41-42.1 77.8-73.7 109.4A344.8 344.8 0 0 1 655.9 829c-42.3 17.9-87.4 27-133.8 27c-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 0 1 279 755.2a342.2 342.2 0 0 1-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4s68.4-56.4 109.3-73.8c42.3-17.9 87.4-27 133.8-27c46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 0 1 109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 0 0 3 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2"/></svg>',
+  },
+  /** wifi 图标 */
+  {
+    key: 'WifiOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M723 620.5C666.8 571.6 593.4 542 513 542s-153.8 29.6-210.1 78.6a8.1 8.1 0 0 0-.8 11.2l36 42.9c2.9 3.4 8 3.8 11.4.9C393.1 637.2 450.3 614 513 614s119.9 23.2 163.5 61.5c3.4 2.9 8.5 2.5 11.4-.9l36-42.9c2.8-3.3 2.4-8.3-.9-11.2m117.4-140.1C751.7 406.5 637.6 362 513 362s-238.7 44.5-327.5 118.4a8.05 8.05 0 0 0-1 11.3l36 42.9c2.8 3.4 7.9 3.8 11.2 1C308 472.2 406.1 434 513 434s205 38.2 281.2 101.6c3.4 2.8 8.4 2.4 11.2-1l36-42.9c2.8-3.4 2.4-8.5-1-11.3m116.7-139C835.7 241.8 680.3 182 511 182c-168.2 0-322.6 59-443.7 157.4a8 8 0 0 0-1.1 11.4l36 42.9c2.8 3.3 7.8 3.8 11.1 1.1C222 306.7 360.3 254 511 254c151.8 0 291 53.5 400 142.7c3.4 2.8 8.4 2.3 11.2-1.1l36-42.9c2.9-3.4 2.4-8.5-1.1-11.3M448 778a64 64 0 1 0 128 0a64 64 0 1 0-128 0"/></svg>',
+  },
+  /** 提示 */
+  {
+    key: 'AlertOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M193 796c0 17.7 14.3 32 32 32h574c17.7 0 32-14.3 32-32V563c0-176.2-142.8-319-319-319S193 386.8 193 563zm72-233c0-136.4 110.6-247 247-247s247 110.6 247 247v193H404V585c0-5.5-4.5-10-10-10h-44c-5.5 0-10 4.5-10 10v171h-75zm-48.1-252.5l39.6-39.6c3.1-3.1 3.1-8.2 0-11.3l-67.9-67.9a8.03 8.03 0 0 0-11.3 0l-39.6 39.6a8.03 8.03 0 0 0 0 11.3l67.9 67.9c3.1 3.1 8.1 3.1 11.3 0m669.6-79.2l-39.6-39.6a8.03 8.03 0 0 0-11.3 0l-67.9 67.9a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l67.9-67.9c3.1-3.2 3.1-8.2 0-11.3M832 892H192c-17.7 0-32 14.3-32 32v24c0 4.4 3.6 8 8 8h688c4.4 0 8-3.6 8-8v-24c0-17.7-14.3-32-32-32M484 180h56c4.4 0 8-3.6 8-8V76c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v96c0 4.4 3.6 8 8 8"/></svg>',
+  },
+  /** 解锁 */
+  {
+    key: 'UnlockOutlined',
+    svg: '<svg  viewBox="0 0 1024 1024"><path fill="currentColor" d="M832 464H332V240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v68c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-68c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32m-40 376H232V536h560zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 1 0-56 0"/></svg>',
+  },
+  /** 资金 */
+  {
+    key: 'FundOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M926 164H94c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V196c0-17.7-14.3-32-32-32m-92.3 194.4l-297 297.2a8.03 8.03 0 0 1-11.3 0L410.9 541.1L238.4 713.7a8.03 8.03 0 0 1-11.3 0l-36.8-36.8a8.03 8.03 0 0 1 0-11.3l214.9-215c3.1-3.1 8.2-3.1 11.3 0L531 565l254.5-254.6c3.1-3.1 8.2-3.1 11.3 0l36.8 36.8c3.2 3 3.2 8.1.1 11.2"/></svg>',
+  },
+  /** 汽车除霜 */
+  {
+    key: 'CarDefrostOutlined',
+    svg: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M10 18.3c0 2.2-2.1 4.2-2.3 4.4s-.5.3-.7.3c-.3 0-.5-.1-.8-.4c-.3-.4-.3-1 .1-1.4c.5-.4 1.7-1.8 1.7-2.9c0-.6-.4-1.2-.8-1.9c-.6-.8-1.2-1.8-1.2-3c0-2.3 1.3-3.2 1.5-3.3c.4-.2 1.1-.1 1.3.3c.3.5.2 1.1-.3 1.4c0 0-.5.4-.5 1.6c0 .7.4 1.3.8 1.9c.6.8 1.2 1.8 1.2 3m2-4.9c0-1.2.5-1.6.5-1.6c.5-.3.6-.9.3-1.4s-.9-.6-1.4-.3c-.2.1-1.5 1-1.5 3.3c0 1.2.6 2.2 1.2 3c.4.7.8 1.3.8 1.9c0 1.1-1.2 2.5-1.7 2.9c-.4.4-.4 1-.1 1.4c.2.2.5.3.7.3c.4.1.7 0 .9-.2s2.3-2.2 2.3-4.4c0-1.2-.6-2.2-1.2-3c-.4-.7-.8-1.3-.8-1.9M20 3H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h1v-2H4V5h16v11h-1v2h1a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-3.8 10.5c0-1.2.5-1.6.5-1.6c.4-.3.6-.9.3-1.4c-.3-.4-.9-.6-1.4-.3c-.2.1-1.5 1-1.5 3.3c0 1.2.7 2.2 1.2 3c.4.7.8 1.3.8 1.9c0 1.1-1.2 2.5-1.7 2.9c-.4.4-.5 1-.1 1.4c.2.2.4.3.7.3c.2 0 .5-.1.9-.2c.2-.2 2.3-2.2 2.3-4.4c0-1.2-.7-2.2-1.2-3c-.4-.7-.8-1.3-.8-1.9"/></svg>',
+  },
+  /** 时间 */
+  {
+    key: 'ClockTimeFour',
+    svg: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m4.3 13.2L11 12.3V7h1.5v4.4l4.5 2.5z"/></svg>',
+  },
+  /** 音量 */
+  {
+    key: 'SoundOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3c16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1M586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16m-41.9 261.8l-110.3-63.7a15.9 15.9 0 0 0-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0 0 21.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8M760 344a15.9 15.9 0 0 0 21.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 0 0-21.7-5.9L746 287.8a15.99 15.99 0 0 0-5.8 21.8z"/></svg>',
+  },
+  /** 折叠菜单 */
+  {
+    key: 'MenuFoldOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8m-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8m0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8M115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8"/></svg>',
+  },
+  /** 信号 */
+  {
+    key: 'SignalFilled',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M584 352H440c-17.7 0-32 14.3-32 32v544c0 17.7 14.3 32 32 32h144c17.7 0 32-14.3 32-32V384c0-17.7-14.3-32-32-32M892 64H748c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h144c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32M276 640H132c-17.7 0-32 14.3-32 32v256c0 17.7 14.3 32 32 32h144c17.7 0 32-14.3 32-32V672c0-17.7-14.3-32-32-32"/></svg>',
+  },
+  /** 垂直右 */
+  {
+    key: 'VerticalRight',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M326 164h-64c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h64c4.4 0 8-3.6 8-8V172c0-4.4-3.6-8-8-8m444 72.4V164c0-6.8-7.9-10.5-13.1-6.1L335 512l421.9 354.1c5.2 4.4 13.1.7 13.1-6.1v-72.4c0-9.4-4.2-18.4-11.4-24.5L459.4 512l299.2-251.1c7.2-6.1 11.4-15.1 11.4-24.5"/></svg>',
+  },
+  /** 关闭 */
+  {
+    key: 'CloseOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" fill-rule="evenodd" d="M799.855 166.312c.023.007.043.018.084.059l57.69 57.69c.041.041.052.06.059.084a.1.1 0 0 1 0 .069c-.007.023-.018.042-.059.083L569.926 512l287.703 287.703c.041.04.052.06.059.083a.12.12 0 0 1 0 .07c-.007.022-.018.042-.059.083l-57.69 57.69c-.041.041-.06.052-.084.059a.1.1 0 0 1-.069 0c-.023-.007-.042-.018-.083-.059L512 569.926L224.297 857.629c-.04.041-.06.052-.083.059a.12.12 0 0 1-.07 0c-.022-.007-.042-.018-.083-.059l-57.69-57.69c-.041-.041-.052-.06-.059-.084a.1.1 0 0 1 0-.069c.007-.023.018-.042.059-.083L454.073 512L166.371 224.297c-.041-.04-.052-.06-.059-.083a.12.12 0 0 1 0-.07c.007-.022.018-.042.059-.083l57.69-57.69c.041-.041.06-.052.084-.059a.1.1 0 0 1 .069 0c.023.007.042.018.083.059L512 454.073l287.703-287.702c.04-.041.06-.052.083-.059a.12.12 0 0 1 .07 0Z"/></svg>',
+  },
+  /** 上 */
+  {
+    key: 'ArrowUpOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M868 545.5L536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2"/></svg>',
+  } /** 下 */,
+  {
+    key: 'ArrowDownOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0 0 48.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2"/></svg>',
+  },
+  /** 应用商店 */
+  {
+    key: 'AppstoreFiled',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 144H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16m0 400H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16m0 400H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16"/></svg>',
+  } /** 应用商店 */,
+  {
+    key: 'AppstoreOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16m-52 268H212V212h200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16m-52 268H612V212h200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16m-52 268H212V612h200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16m-52 268H612V612h200z"/></svg>',
+  },
+  /** 数据库 */
+  {
+    key: 'DatabaseFilled',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M832 64H192c-17.7 0-32 14.3-32 32v224h704V96c0-17.7-14.3-32-32-32M288 232c-22.1 0-40-17.9-40-40s17.9-40 40-40s40 17.9 40 40s-17.9 40-40 40M160 928c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V704H160zm128-136c22.1 0 40 17.9 40 40s-17.9 40-40 40s-40-17.9-40-40s17.9-40 40-40M160 640h704V384H160zm128-168c22.1 0 40 17.9 40 40s-17.9 40-40 40s-40-17.9-40-40s17.9-40 40-40"/></svg>',
+  } /** 数据库 */,
+  {
+    key: 'DatabaseOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32m-600 72h560v208H232zm560 480H232V408h560zm0 272H232V680h560zM304 240a40 40 0 1 0 80 0a40 40 0 1 0-80 0m0 272a40 40 0 1 0 80 0a40 40 0 1 0-80 0m0 272a40 40 0 1 0 80 0a40 40 0 1 0-80 0"/></svg>',
+  },
+  /** 代码沙盒 */
+  {
+    key: 'CodeSandboxOutlined',
+    svg: '<svg viewBox="0 0 1024 1024"><path fill="currentColor" d="m709.6 210l.4-.2h.2L512 96L313.9 209.8h-.2l.7.3L151.5 304v416L512 928l360.5-208V304zM482.7 843.6L339.6 761V621.4L210 547.8V372.9l272.7 157.3zM238.2 321.5l134.7-77.8l138.9 79.7l139.1-79.9l135.2 78l-273.9 158zM814 548.3l-128.8 73.1v139.1l-143.9 83V530.4L814 373.1z"/></svg>',
+  },
+  /** 文件夹 */
+  {
+    key: 'FolderOutlined',
+    svg: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M20 18H4V8h16m0-2h-8l-2-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"/></svg>',
+  },
+  /** 打开的文件夹 */
+  {
+    key: 'FolderOpenOutlined',
+    svg: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M6.1 10L4 18V8h17a2 2 0 0 0-2-2h-7l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h15c.9 0 1.7-.6 1.9-1.5l2.3-8.5zM19 18H6l1.6-6h13z"/></svg>'
+  },
+  /** 选中 */
+  {
+    key: 'CheckCircle',
+    svg: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8z"/></svg>'
+  }
+];
diff --git a/admin-ui/vue/apps/web-antd/src/assets/icons/index.ts b/admin-ui/vue/apps/web-antd/src/assets/icons/index.ts
new file mode 100644
index 0000000..3ec0d7b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/assets/icons/index.ts
@@ -0,0 +1,6 @@
+import type { Icon } from '#/utils/IconManagers';
+
+import {custom} from './custom';
+import { mdiSlim } from './mdiSlim';
+
+export const iconData: Icon[] = mdiSlim.concat(custom);
diff --git a/admin-ui/vue/apps/web-antd/src/assets/icons/mdiSlim.ts b/admin-ui/vue/apps/web-antd/src/assets/icons/mdiSlim.ts
new file mode 100644
index 0000000..285e681
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/assets/icons/mdiSlim.ts
@@ -0,0 +1,2351 @@
+/** MDI 精简版 */
+export const mdiSlim =  [
+  {
+    key: 'AccessPointOutlined',
+    svg: '<svg id="mdi-access-point" viewBox="0 0 24 24"><path d="M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z" /></svg>',
+  },
+  {
+    key: 'AccessPointCheckOutlined',
+    svg: '<svg id="mdi-access-point-check" viewBox="0 0 24 24"><path d="M20.59 14.84L21.75 16.25L17 21L14.25 18L15.41 16.84L17 18.43L20.59 14.84M19.07 4.93L17.66 6.34C19.11 7.78 20 9.79 20 12V12.34C20.68 12.59 21.33 12.96 21.88 13.43C21.95 12.96 22 12.5 22 12C22 9.24 20.88 6.74 19.07 4.93M15.96 12.36C16.6 12.13 17.28 12 18 12C18 10.35 17.33 8.85 16.24 7.76L14.83 9.17C15.55 9.89 16 10.89 16 12C16 12.12 15.97 12.24 15.96 12.36M12 10C10.9 10 10 10.9 10 12S10.9 14 12 14 14 13.1 14 12 13.1 10 12 10M6.34 6.34L4.93 4.93C3.12 6.74 2 9.24 2 12S3.12 17.26 4.93 19.07L6.34 17.66C4.89 16.22 4 14.22 4 12C4 9.79 4.89 7.78 6.34 6.34M7.76 7.76C6.67 8.85 6 10.35 6 12S6.67 15.15 7.76 16.24L9.17 14.83C8.45 14.11 8 13.11 8 12S8.45 9.89 9.17 9.17L7.76 7.76Z" /></svg>',
+  },
+  {
+    key: 'AccessPointNetworkOutlined',
+    svg: '<svg id="mdi-access-point-network" viewBox="0 0 24 24"><path d="M4.93,3.93C3.12,5.74 2,8.24 2,11C2,13.76 3.12,16.26 4.93,18.07L6.34,16.66C4.89,15.22 4,13.22 4,11C4,8.79 4.89,6.78 6.34,5.34L4.93,3.93M19.07,3.93L17.66,5.34C19.11,6.78 20,8.79 20,11C20,13.22 19.11,15.22 17.66,16.66L19.07,18.07C20.88,16.26 22,13.76 22,11C22,8.24 20.88,5.74 19.07,3.93M7.76,6.76C6.67,7.85 6,9.35 6,11C6,12.65 6.67,14.15 7.76,15.24L9.17,13.83C8.45,13.11 8,12.11 8,11C8,9.89 8.45,8.89 9.17,8.17L7.76,6.76M16.24,6.76L14.83,8.17C15.55,8.89 16,9.89 16,11C16,12.11 15.55,13.11 14.83,13.83L16.24,15.24C17.33,14.15 18,12.65 18,11C18,9.35 17.33,7.85 16.24,6.76M12,9A2,2 0 0,0 10,11A2,2 0 0,0 12,13A2,2 0 0,0 14,11A2,2 0 0,0 12,9M11,15V19H10A1,1 0 0,0 9,20H2V22H9A1,1 0 0,0 10,23H14A1,1 0 0,0 15,22H22V20H15A1,1 0 0,0 14,19H13V15H11Z" /></svg>',
+  },
+  {
+    key: 'AccessPointNetworkOffOutlined',
+    svg: '<svg id="mdi-access-point-network-off" viewBox="0 0 24 24"><path d="M14.83,13.83C15.55,13.11 16,12.11 16,11C16,9.89 15.55,8.89 14.83,8.17L16.24,6.76C17.33,7.85 18,9.35 18,11C18,12.65 17.33,14.15 16.24,15.24L14.83,13.83M14,11A2,2 0 0,0 12,9C11.4,9 10.87,9.27 10.5,9.68L13.32,12.5C13.73,12.13 14,11.6 14,11M17.66,16.66L19.07,18.07C20.88,16.26 22,13.76 22,11C22,8.24 20.88,5.74 19.07,3.93L17.66,5.34C19.11,6.78 20,8.79 20,11C20,13.22 19.11,15.22 17.66,16.66M22,21.18V20H20.82L22,21.18M20.27,22L21,22.73L19.73,24L17.73,22H15A1,1 0 0,1 14,23H10A1,1 0 0,1 9,22H2V20H9A1,1 0 0,1 10,19H11V15.27L8.34,12.61C8.54,13.07 8.82,13.5 9.17,13.83L7.76,15.24C6.67,14.15 6,12.65 6,11C6,10.77 6,10.54 6.04,10.31L4.37,8.64C4.14,9.39 4,10.18 4,11C4,13.22 4.89,15.22 6.34,16.66L4.93,18.07C3.12,16.26 2,13.76 2,11C2,9.61 2.29,8.28 2.81,7.08L1,5.27L2.28,4L3.7,5.42L5.15,6.87L6.63,8.35V8.35L8.17,9.9L10.28,12L11,12.71L18.27,20H18.28L20.28,22H20.27M15.73,20L13,17.27V19H14A1,1 0 0,1 15,20H15.73Z" /></svg>',
+  },
+  {
+    key: 'AccessPointOffOutlined',
+    svg: '<svg id="mdi-access-point-off" viewBox="0 0 24 24"><path d="M20.84 22.73L12.1 14C12.06 14 12.03 14 12 14C10.9 14 10 13.11 10 12C10 11.97 10 11.94 10 11.9L8.4 10.29C8.15 10.81 8 11.38 8 12C8 13.11 8.45 14.11 9.17 14.83L7.76 16.24C6.67 15.15 6 13.65 6 12C6 10.83 6.34 9.74 6.93 8.82L5.5 7.37C4.55 8.67 4 10.27 4 12C4 14.22 4.89 16.22 6.34 17.66L4.93 19.07C3.12 17.26 2 14.76 2 12C2 9.72 2.77 7.63 4.06 5.95L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15.93 12.73L17.53 14.33C17.83 13.61 18 12.83 18 12C18 10.35 17.33 8.85 16.24 7.76L14.83 9.17C15.55 9.89 16 10.89 16 12C16 12.25 15.97 12.5 15.93 12.73M19.03 15.83L20.5 17.28C21.44 15.75 22 13.94 22 12C22 9.24 20.88 6.74 19.07 4.93L17.66 6.34C19.11 7.78 20 9.79 20 12C20 13.39 19.65 14.7 19.03 15.83Z" /></svg>',
+  },
+  {
+    key: 'AirHumidifierOutlined',
+    svg: '<svg id="mdi-air-humidifier" viewBox="0 0 24 24"><path d="M11 9C8.79 9 7 10.79 7 13S8.79 17 11 17 15 15.21 15 13 13.21 9 11 9M11 15C9.9 15 9 14.11 9 13S9.9 11 11 11 13 11.9 13 13 12.11 15 11 15M7 4H14C16.21 4 18 5.79 18 8V9H16V8C16 6.9 15.11 6 14 6H7C5.9 6 5 6.9 5 8V20H16V18H18V22H3V8C3 5.79 4.79 4 7 4M19 10.5C19 10.5 21 12.67 21 14C21 15.1 20.1 16 19 16S17 15.1 17 14C17 12.67 19 10.5 19 10.5" /></svg>',
+  },
+  {
+    key: 'AirHumidifierOffOutlined',
+    svg: '<svg id="mdi-air-humidifier-off" viewBox="0 0 24 24"><path d="M22.1 21.5L2.4 1.7L1.1 3L3.8 5.7C3.3 6.3 3 7.1 3 8V22H18V19.9L20.8 22.7L22.1 21.5M9.6 11.5L12.4 14.3C12.1 14.7 11.6 15 11 15C9.9 15 9 14.1 9 13C9 12.4 9.3 11.9 9.6 11.5M16 17.9V20H5V8C5 7.7 5.1 7.4 5.2 7.1L8.2 10.1C7.5 10.8 7 11.9 7 13C7 15.2 8.8 17 11 17C12.1 17 13.2 16.5 13.9 15.8L16 17.9M17 13.8C17.1 12.5 19 10.5 19 10.5S21 12.7 21 14C21 15 20.2 15.9 19.2 16L17 13.8M9.2 6L7.2 4H14C16.2 4 18 5.8 18 8V9H16V8C16 6.9 15.1 6 14 6H9.2Z" /></svg>',
+  },
+  {
+    key: 'AirPurifierOutlined',
+    svg: '<svg id="mdi-air-purifier" viewBox="0 0 24 24"><path d="M11,9A4,4 0 0,1 15,13A4,4 0 0,1 11,17A4,4 0 0,1 7,13A4,4 0 0,1 11,9M11,11A2,2 0 0,0 9,13A2,2 0 0,0 11,15A2,2 0 0,0 13,13A2,2 0 0,0 11,11M7,4H14A4,4 0 0,1 18,8V9H16V8A2,2 0 0,0 14,6H7A2,2 0 0,0 5,8V20H16V18H18V22H3V8A4,4 0 0,1 7,4M16,11C18.5,11 18.5,9 21,9V11C18.5,11 18.5,13 16,13V11M16,15C18.5,15 18.5,13 21,13V15C18.5,15 18.5,17 16,17V15Z" /></svg>',
+  },
+  {
+    key: 'AlarmLightOutlined',
+    svg: '<svg id="mdi-alarm-light" viewBox="0 0 24 24"><path d="M6,6.9L3.87,4.78L5.28,3.37L7.4,5.5L6,6.9M13,1V4H11V1H13M20.13,4.78L18,6.9L16.6,5.5L18.72,3.37L20.13,4.78M4.5,10.5V12.5H1.5V10.5H4.5M19.5,10.5H22.5V12.5H19.5V10.5M6,20H18A2,2 0 0,1 20,22H4A2,2 0 0,1 6,20M12,5A6,6 0 0,1 18,11V19H6V11A6,6 0 0,1 12,5Z" /></svg>',
+  },
+  {
+    key: 'AlarmLightOffOutlined',
+    svg: '<svg id="mdi-alarm-light-off" viewBox="0 0 24 24"><path d="M18 14.8L9 5.8C9.9 5.3 10.9 5 12 5C15.3 5 18 7.7 18 11V14.8M20.1 4.8L18.7 3.4L16.6 5.5L18 6.9L20.1 4.8M19.5 10.5V12.5H22.5V10.5H19.5M4.5 10.5H1.5V12.5H4.5V10.5M1.1 3L6.6 8.5C6.2 9.2 6 10.1 6 11V19H17.1L18.1 20H6C4.9 20 4 20.9 4 22H20.1L20.8 22.7L22.1 21.4L2.4 1.7L1.1 3M13 1H11V4H13V1Z" /></svg>',
+  },
+  {
+    key: 'AlarmLightOffOutlineOutlined',
+    svg: '<svg id="mdi-alarm-light-off-outline" viewBox="0 0 24 24"><path d="M10.5 7.3L9 5.8C9.9 5.3 10.9 5 12 5C15.3 5 18 7.7 18 11V14.8L16 12.8V11C16 8.8 14.2 7 12 7C11.5 7 11 7.1 10.5 7.3M20.1 4.8L18.7 3.4L16.6 5.5L18 6.9L20.1 4.8M19.5 10.5V12.5H22.5V10.5H19.5M4.5 10.5H1.5V12.5H4.5V10.5M2.4 1.7L22.1 21.4L20.8 22.7L20.1 22H4C4 20.9 4.9 20 6 20H18.1L17.1 19H6V11C6 10.1 6.2 9.2 6.6 8.5L1.1 3L2.4 1.7M8 17H15.1L8.1 10C8.1 10.3 8 10.7 8 11V17M13 1H11V4H13V1Z" /></svg>',
+  },
+  {
+    key: 'AlarmLightOutlineOutlined',
+    svg: '<svg id="mdi-alarm-light-outline" viewBox="0 0 24 24"><path d="M6,6.9L3.87,4.78L5.28,3.37L7.4,5.5L6,6.9M13,1V4H11V1H13M20.13,4.78L18,6.9L16.6,5.5L18.72,3.37L20.13,4.78M4.5,10.5V12.5H1.5V10.5H4.5M19.5,10.5H22.5V12.5H19.5V10.5M6,20H18A2,2 0 0,1 20,22H4A2,2 0 0,1 6,20M12,5A6,6 0 0,1 18,11V19H6V11A6,6 0 0,1 12,5M12,7A4,4 0 0,0 8,11V17H16V11A4,4 0 0,0 12,7Z" /></svg>',
+  },
+  {
+    key: 'ArrowBottomRightThinOutlined',
+    svg: '<svg id="mdi-arrow-bottom-right-thin" viewBox="0 0 24 24"><path d="M11.93 19L14.76 16.18L5 6.42L6.42 5L16.18 14.76L19 11.94V19Z" /></svg>',
+  },
+  {
+    key: 'ArrowDownOutlined',
+    svg: '<svg id="mdi-arrow-down" viewBox="0 0 24 24"><path d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z" /></svg>',
+  },
+  {
+    key: 'ArrowDownThinOutlined',
+    svg: '<svg id="mdi-arrow-down-thin" viewBox="0 0 24 24"><path d="M7.03 13.92H11.03V5L13.04 4.97V13.92H17.03L12.03 18.92Z" /></svg>',
+  },
+  {
+    key: 'ArrowLeftOutlined',
+    svg: '<svg id="mdi-arrow-left" viewBox="0 0 24 24"><path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" /></svg>',
+  },
+  {
+    key: 'ArrowLeftThinOutlined',
+    svg: '<svg id="mdi-arrow-left-thin" viewBox="0 0 24 24"><path d="M10.05 16.94V12.94H18.97L19 10.93H10.05V6.94L5.05 11.94Z" /></svg>',
+  },
+  {
+    key: 'ArrowRightOutlined',
+    svg: '<svg id="mdi-arrow-right" viewBox="0 0 24 24"><path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" /></svg>',
+  },
+  {
+    key: 'ArrowRightBoldOutlined',
+    svg: '<svg id="mdi-arrow-right-bold" viewBox="0 0 24 24"><path d="M4,15V9H12V4.16L19.84,12L12,19.84V15H4Z" /></svg>',
+  },
+  {
+    key: 'ArrowRightBoldBoxOutlined',
+    svg: '<svg id="mdi-arrow-right-bold-box" viewBox="0 0 24 24"><path d="M3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19M17,12L12,7V10H8V14H12V17L17,12Z" /></svg>',
+  },
+  {
+    key: 'ArrowRightCircleOutlineOutlined',
+    svg: '<svg id="mdi-arrow-right-circle-outline" viewBox="0 0 24 24"><path d="M6,13V11H14L10.5,7.5L11.92,6.08L17.84,12L11.92,17.92L10.5,16.5L14,13H6M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12Z" /></svg>',
+  },
+  {
+    key: 'ArrowRightThinOutlined',
+    svg: '<svg id="mdi-arrow-right-thin" viewBox="0 0 24 24"><path d="M14 16.94V12.94H5.08L5.05 10.93H14V6.94L19 11.94Z" /></svg>',
+  },
+  {
+    key: 'ArrowTopLeftThinOutlined',
+    svg: '<svg id="mdi-arrow-top-left-thin" viewBox="0 0 24 24"><path d="M12.07 5L9.24 7.83L19 17.59L17.58 19L7.82 9.25L5 12.07V5Z" /></svg>',
+  },
+  {
+    key: 'ArrowTopRightThinOutlined',
+    svg: '<svg id="mdi-arrow-top-right-thin" viewBox="0 0 24 24"><path d="M11.93 5L14.76 7.83L5 17.59L6.42 19L16.18 9.25L19 12.07V5H11.93Z" /></svg>',
+  },
+  {
+    key: 'ArrowUpThinOutlined',
+    svg: '<svg id="mdi-arrow-up-thin" viewBox="0 0 24 24"><path d="M7.03 9.97H11.03V18.89L13.04 18.92V9.97H17.03L12.03 4.97Z" /></svg>',
+  },
+  {
+    key: 'AutoFixOutlined',
+    svg: '<svg id="mdi-auto-fix" viewBox="0 0 24 24"><path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" /></svg>',
+  },
+  {
+    key: 'AutorenewOutlined',
+    svg: '<svg id="mdi-autorenew" viewBox="0 0 24 24"><path d="M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z" /></svg>',
+  },
+  {
+    key: 'AvTimerOutlined',
+    svg: '<svg id="mdi-av-timer" viewBox="0 0 24 24"><path d="M11,17A1,1 0 0,0 12,18A1,1 0 0,0 13,17A1,1 0 0,0 12,16A1,1 0 0,0 11,17M11,3V7H13V5.08C16.39,5.57 19,8.47 19,12A7,7 0 0,1 12,19A7,7 0 0,1 5,12C5,10.32 5.59,8.78 6.58,7.58L12,13L13.41,11.59L6.61,4.79V4.81C4.42,6.45 3,9.05 3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M18,12A1,1 0 0,0 17,11A1,1 0 0,0 16,12A1,1 0 0,0 17,13A1,1 0 0,0 18,12M6,12A1,1 0 0,0 7,13A1,1 0 0,0 8,12A1,1 0 0,0 7,11A1,1 0 0,0 6,12Z" /></svg>',
+  },
+  {
+    key: 'BatteryOutlined',
+    svg: '<svg id="mdi-battery" viewBox="0 0 24 24"><path d="M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z" /></svg>',
+  },
+  {
+    key: 'Battery10Outlined',
+    svg: '<svg id="mdi-battery-10" viewBox="0 0 24 24"><path d="M16,18H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z" /></svg>',
+  },
+  {
+    key: 'Battery20Outlined',
+    svg: '<svg id="mdi-battery-20" viewBox="0 0 24 24"><path d="M16,17H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z" /></svg>',
+  },
+  {
+    key: 'Battery30Outlined',
+    svg: '<svg id="mdi-battery-30" viewBox="0 0 24 24"><path d="M16,15H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z" /></svg>',
+  },
+  {
+    key: 'Battery40Outlined',
+    svg: '<svg id="mdi-battery-40" viewBox="0 0 24 24"><path d="M16,14H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z" /></svg>',
+  },
+  {
+    key: 'Battery50Outlined',
+    svg: '<svg id="mdi-battery-50" viewBox="0 0 24 24"><path d="M16,13H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z" /></svg>',
+  },
+  {
+    key: 'Battery60Outlined',
+    svg: '<svg id="mdi-battery-60" viewBox="0 0 24 24"><path d="M16,12H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z" /></svg>',
+  },
+  {
+    key: 'Battery70Outlined',
+    svg: '<svg id="mdi-battery-70" viewBox="0 0 24 24"><path d="M16,10H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z" /></svg>',
+  },
+  {
+    key: 'Battery80Outlined',
+    svg: '<svg id="mdi-battery-80" viewBox="0 0 24 24"><path d="M16,9H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z" /></svg>',
+  },
+  {
+    key: 'Battery90Outlined',
+    svg: '<svg id="mdi-battery-90" viewBox="0 0 24 24"><path d="M16,8H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z" /></svg>',
+  },
+  {
+    key: 'BatteryBluetoothVariantOutlined',
+    svg: '<svg id="mdi-battery-bluetooth-variant" viewBox="0 0 24 24"><path d="M9,2V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4H15V2H9M11.83,8H12.33L15.18,10.85L13.04,13L15.17,15.14L12.33,18H11.83V14.21L9.54,16.5L8.83,15.79L11.62,13L8.83,10.21L9.54,9.5L11.83,11.79V8M12.83,9.91V11.79L13.77,10.85L12.83,9.91M12.83,14.21V16.08L13.77,15.14L12.83,14.21Z" /></svg>',
+  },
+  {
+    key: 'BatteryChargingOutlined',
+    svg: '<svg id="mdi-battery-charging" viewBox="0 0 24 24"><path d="M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.66C6,21.4 6.6,22 7.33,22H16.66C17.4,22 18,21.4 18,20.67V5.33C18,4.6 17.4,4 16.67,4M11,20V14.5H9L13,7V12.5H15" /></svg>',
+  },
+  {
+    key: 'BatteryCharging10Outlined',
+    svg: '<svg id="mdi-battery-charging-10" viewBox="0 0 24 24"><path d="M23.05,11H20.05V4L15.05,14H18.05V22M12,18H4L4.05,6H12.05M12.72,4H11.05V2H5.05V4H3.38A1.33,1.33 0 0,0 2.05,5.33V20.67C2.05,21.4 2.65,22 3.38,22H12.72C13.45,22 14.05,21.4 14.05,20.67V5.33A1.33,1.33 0 0,0 12.72,4Z" /></svg>',
+  },
+  {
+    key: 'BatteryChargingHighOutlined',
+    svg: '<svg id="mdi-battery-charging-high" viewBox="0 0 24 24"><path d="M12 20H4V6H12M12.67 4H11V2H5V4H3.33C2.6 4 2 4.6 2 5.33V20.67C2 21.4 2.6 22 3.33 22H12.67C13.41 22 14 21.41 14 20.67V5.33C14 4.6 13.4 4 12.67 4M11 16H5V19H11V16M11 7H5V10H11V7M11 11.5H5V14.5H11V11.5M23 10H20V3L15 13H18V21" /></svg>',
+  },
+  {
+    key: 'BatteryChargingLowOutlined',
+    svg: '<svg id="mdi-battery-charging-low" viewBox="0 0 24 24"><path d="M12 20H4V6H12M12.67 4H11V2H5V4H3.33C2.6 4 2 4.6 2 5.33V20.67C2 21.4 2.6 22 3.33 22H12.67C13.41 22 14 21.41 14 20.67V5.33C14 4.6 13.4 4 12.67 4M11 16H5V19H11V16M23 10H20V3L15 13H18V21" /></svg>',
+  },
+  {
+    key: 'BatteryChargingMediumOutlined',
+    svg: '<svg id="mdi-battery-charging-medium" viewBox="0 0 24 24"><path d="M12 20H4V6H12M12.67 4H11V2H5V4H3.33C2.6 4 2 4.6 2 5.33V20.67C2 21.4 2.6 22 3.33 22H12.67C13.41 22 14 21.41 14 20.67V5.33C14 4.6 13.4 4 12.67 4M11 16H5V19H11V16M11 11.5H5V14.5H11V11.5M23 10H20V3L15 13H18V21" /></svg>',
+  },
+  {
+    key: 'BatteryChargingOutlineOutlined',
+    svg: '<svg id="mdi-battery-charging-outline" viewBox="0 0 24 24"><path d="M23.05,11H20.05V4L15.05,14H18.05V22M12,20H4L4.05,6H12.05M12.72,4H11.05V2H5.05V4H3.38A1.33,1.33 0 0,0 2.05,5.33V20.67C2.05,21.4 2.65,22 3.38,22H12.72C13.45,22 14.05,21.4 14.05,20.67V5.33A1.33,1.33 0 0,0 12.72,4Z" /></svg>',
+  },
+  {
+    key: 'BatteryChargingWirelessOutlined',
+    svg: '<svg id="mdi-battery-charging-wireless" viewBox="0 0 24 24"><path d="M13,4H11V2H5V4H3A1,1 0 0,0 2,5V21A1,1 0 0,0 3,22H13A1,1 0 0,0 14,21V5A1,1 0 0,0 13,4M20.07,4.93L18.66,6.34C21.79,9.46 21.79,14.53 18.66,17.66L20.07,19.07C23.97,15.17 23.97,8.84 20.07,4.93M17.24,7.76L15.83,9.17C17.39,10.73 17.39,13.26 15.83,14.83L17.24,16.24C19.58,13.9 19.58,10.1 17.24,7.76Z" /></svg>',
+  },
+  {
+    key: 'BatteryOffOutlineOutlined',
+    svg: '<svg id="mdi-battery-off-outline" viewBox="0 0 24 24"><path d="M18 17.35L3.38 2.73L2.11 4L6 7.89V20.67A1.34 1.34 0 0 0 7.33 22H16.67A1.34 1.34 0 0 0 18 20.67V19.89L20.84 22.73L22.11 21.46M16 20H8V9.89L16 17.89M16 6V12.8L18 14.8V5.33A1.34 1.34 0 0 0 16.67 4H15V2H9V4H7.21L9.21 6Z" /></svg>',
+  },
+  {
+    key: 'BatteryOutlineOutlined',
+    svg: '<svg id="mdi-battery-outline" viewBox="0 0 24 24"><path d="M16,20H8V6H16M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z" /></svg>',
+  },
+  {
+    key: 'BeachOutlined',
+    svg: '<svg id="mdi-beach" viewBox="0 0 24 24"><path d="M15,18.54C17.13,18.21 19.5,18 22,18V22H5C5,21.35 8.2,19.86 13,18.9V12.4C12.16,12.65 11.45,13.21 11,13.95C10.39,12.93 9.27,12.25 8,12.25C6.73,12.25 5.61,12.93 5,13.95C5.03,10.37 8.5,7.43 13,7.04V7A1,1 0 0,1 14,6A1,1 0 0,1 15,7V7.04C19.5,7.43 22.96,10.37 23,13.95C22.39,12.93 21.27,12.25 20,12.25C18.73,12.25 17.61,12.93 17,13.95C16.55,13.21 15.84,12.65 15,12.39V18.54M7,2A5,5 0 0,1 2,7V2H7Z" /></svg>',
+  },
+  {
+    key: 'BeakerOutlineOutlined',
+    svg: '<svg id="mdi-beaker-outline" viewBox="0 0 24 24"><path d="M3,3H21V5A2,2 0 0,0 19,7V19A2,2 0 0,1 17,21H7A2,2 0 0,1 5,19V7A2,2 0 0,0 3,5V3M7,5V7H12V8H7V9H10V10H7V11H10V12H7V13H12V14H7V15H10V16H7V19H17V5H7Z" /></svg>',
+  },
+  {
+    key: 'BellCheckOutlined',
+    svg: '<svg id="mdi-bell-check" viewBox="0 0 24 24"><path d="M17.75 21.16L15 18.16L16.16 17L17.75 18.59L21.34 15L22.5 16.41L17.75 21.16M3 20V19L5 17V11C5 7.9 7.03 5.18 10 4.29V4C10 2.9 10.9 2 12 2C13.11 2 14 2.9 14 4V4.29C16.97 5.18 19 7.9 19 11V12.08L18 12C14.69 12 12 14.69 12 18C12 18.7 12.12 19.37 12.34 20H3M12 23C10.9 23 10 22.11 10 21H12.8C13.04 21.41 13.33 21.79 13.65 22.13C13.29 22.66 12.69 23 12 23Z" /></svg>',
+  },
+  {
+    key: 'BellCheckOutlineOutlined',
+    svg: '<svg id="mdi-bell-check-outline" viewBox="0 0 24 24"><path d="M17.75 21.16L15 18.16L16.16 17L17.75 18.59L21.34 15L22.5 16.41L17.75 21.16M10 21H12.8C13.04 21.41 13.33 21.79 13.65 22.13C13.29 22.66 12.69 23 12 23C10.9 23 10 22.11 10 21M3 20V19L5 17V11C5 7.9 7.03 5.18 10 4.29V4C10 2.9 10.9 2 12 2C13.11 2 14 2.9 14 4V4.29C16.97 5.18 19 7.9 19 11V12.08L18 12L17 12.08V11C17 8.24 14.76 6 12 6C9.24 6 7 8.24 7 11V18H12C12 18.7 12.12 19.37 12.34 20H3Z" /></svg>',
+  },
+  {
+    key: 'BellOffOutlineOutlined',
+    svg: '<svg id="mdi-bell-off-outline" viewBox="0 0 24 24"><path d="M22.11,21.46L2.39,1.73L1.11,3L5.83,7.72C5.29,8.73 5,9.86 5,11V17L3,19V20H18.11L20.84,22.73L22.11,21.46M7,18V11C7,10.39 7.11,9.79 7.34,9.23L16.11,18H7M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M8.29,5.09C8.82,4.75 9.4,4.5 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V15.8L17,13.8V11A5,5 0 0,0 12,6C11.22,6 10.45,6.2 9.76,6.56L8.29,5.09Z" /></svg>',
+  },
+  {
+    key: 'BellOutlineOutlined',
+    svg: '<svg id="mdi-bell-outline" viewBox="0 0 24 24"><path d="M10 21H14C14 22.1 13.1 23 12 23S10 22.1 10 21M21 19V20H3V19L5 17V11C5 7.9 7 5.2 10 4.3V4C10 2.9 10.9 2 12 2S14 2.9 14 4V4.3C17 5.2 19 7.9 19 11V17L21 19M17 11C17 8.2 14.8 6 12 6S7 8.2 7 11V18H17V11Z" /></svg>',
+  },
+  {
+    key: 'BellRingOutlined',
+    svg: '<svg id="mdi-bell-ring" viewBox="0 0 24 24"><path d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z" /></svg>',
+  },
+  {
+    key: 'BellRingOutlineOutlined',
+    svg: '<svg id="mdi-bell-ring-outline" viewBox="0 0 24 24"><path d="M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M17,11A5,5 0 0,0 12,6A5,5 0 0,0 7,11V18H17V11M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z" /></svg>',
+  },
+  {
+    key: 'BellSleepOutlined',
+    svg: '<svg id="mdi-bell-sleep" viewBox="0 0 24 24"><path d="M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M15,9H9V11H12.24L9,13.7V16H15V14H11.76L15,11.3V9Z" /></svg>',
+  },
+  {
+    key: 'BellSleepOutlineOutlined',
+    svg: '<svg id="mdi-bell-sleep-outline" viewBox="0 0 24 24"><path d="M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M17,11A5,5 0 0,0 12,6A5,5 0 0,0 7,11V18H17V11M9,9V11H12.24L9,13.7V16H15V14H11.76L15,11.3V9H9Z" /></svg>',
+  },
+  {
+    key: 'BikeFastOutlined',
+    svg: '<svg id="mdi-bike-fast" viewBox="0 0 24 24"><path d="M16 1.2C15 1.2 14.2 2 14.2 3S15 4.8 16 4.8 17.8 4 17.8 3 17 1.2 16 1.2M12.4 4.1C11.93 4.1 11.5 4.29 11.2 4.6L7.5 8.29C7.19 8.6 7 9 7 9.5C7 10.13 7.33 10.66 7.85 10.97L11.2 13V18H13V11.5L10.75 9.85L13.07 7.5L14.8 10H19V8.2H15.8L13.86 4.93C13.57 4.43 13 4.1 12.4 4.1M10 3H3C2.45 3 2 2.55 2 2S2.45 1 3 1H12.79C12.58 1.34 12.41 1.71 12.32 2.11C11.46 2.13 10.65 2.45 10 3M5 12C2.24 12 0 14.24 0 17S2.24 22 5 22 10 19.76 10 17 7.76 12 5 12M5 20.5C3.07 20.5 1.5 18.93 1.5 17S3.07 13.5 5 13.5 8.5 15.07 8.5 17 6.93 20.5 5 20.5M19 12C16.24 12 14 14.24 14 17S16.24 22 19 22 24 19.76 24 17 21.76 12 19 12M19 20.5C17.07 20.5 15.5 18.93 15.5 17S17.07 13.5 19 13.5 22.5 15.07 22.5 17 20.93 20.5 19 20.5M5.32 11H1C.448 11 0 10.55 0 10S.448 9 1 9H5.05C5.03 9.16 5 9.33 5 9.5C5 10.03 5.12 10.54 5.32 11M6 7H2C1.45 7 1 6.55 1 6S1.45 5 2 5H7.97L6.09 6.87C6.05 6.91 6 6.96 6 7Z" /></svg>',
+  },
+  {
+    key: 'BluetoothOutlined',
+    svg: '<svg id="mdi-bluetooth" viewBox="0 0 24 24"><path d="M14.88,16.29L13,18.17V14.41M13,5.83L14.88,7.71L13,9.58M17.71,7.71L12,2H11V9.58L6.41,5L5,6.41L10.59,12L5,17.58L6.41,19L11,14.41V22H12L17.71,16.29L13.41,12L17.71,7.71Z" /></svg>',
+  },
+  {
+    key: 'BluetoothAudioOutlined',
+    svg: '<svg id="mdi-bluetooth-audio" viewBox="0 0 24 24"><path d="M12.88,16.29L11,18.17V14.41M11,5.83L12.88,7.71L11,9.58M15.71,7.71L10,2H9V9.58L4.41,5L3,6.41L8.59,12L3,17.58L4.41,19L9,14.41V22H10L15.71,16.29L11.41,12M19.53,6.71L18.26,8C18.89,9.18 19.25,10.55 19.25,12C19.25,13.45 18.89,14.82 18.26,16L19.46,17.22C20.43,15.68 21,13.87 21,11.91C21,10 20.46,8.23 19.53,6.71M14.24,12L16.56,14.33C16.84,13.6 17,12.82 17,12C17,11.18 16.84,10.4 16.57,9.68L14.24,12Z" /></svg>',
+  },
+  {
+    key: 'BluetoothConnectOutlined',
+    svg: '<svg id="mdi-bluetooth-connect" viewBox="0 0 24 24"><path d="M19,10L17,12L19,14L21,12M14.88,16.29L13,18.17V14.41M13,5.83L14.88,7.71L13,9.58M17.71,7.71L12,2H11V9.58L6.41,5L5,6.41L10.59,12L5,17.58L6.41,19L11,14.41V22H12L17.71,16.29L13.41,12M7,12L5,10L3,12L5,14L7,12Z" /></svg>',
+  },
+  {
+    key: 'BluetoothOffOutlined',
+    svg: '<svg id="mdi-bluetooth-off" viewBox="0 0 24 24"><path d="M13,5.83L14.88,7.71L13.28,9.31L14.69,10.72L17.71,7.7L12,2H11V7.03L13,9.03M5.41,4L4,5.41L10.59,12L5,17.59L6.41,19L11,14.41V22H12L16.29,17.71L18.59,20L20,18.59M13,18.17V14.41L14.88,16.29" /></svg>',
+  },
+  {
+    key: 'BluetoothSettingsOutlined',
+    svg: '<svg id="mdi-bluetooth-settings" viewBox="0 0 24 24"><path d="M14.88,14.29L13,16.17V12.41L14.88,14.29M13,3.83L14.88,5.71L13,7.59M17.71,5.71L12,0H11V7.59L6.41,3L5,4.41L10.59,10L5,15.59L6.41,17L11,12.41V20H12L17.71,14.29L13.41,10L17.71,5.71M15,24H17V22H15M7,24H9V22H7M11,24H13V22H11V24Z" /></svg>',
+  },
+  {
+    key: 'BluetoothTransferOutlined',
+    svg: '<svg id="mdi-bluetooth-transfer" viewBox="0 0 24 24"><path d="M14.71,7.71L10.41,12L14.71,16.29L9,22H8V14.41L3.41,19L2,17.59L7.59,12L2,6.41L3.41,5L8,9.59V2H9L14.71,7.71M10,5.83V9.59L11.88,7.71L10,5.83M11.88,16.29L10,14.41V18.17L11.88,16.29M22,8H20V11H18V8H16L19,4L22,8M22,16L19,20L16,16H18V13H20V16H22Z" /></svg>',
+  },
+  {
+    key: 'BrightnessAutoOutlined',
+    svg: '<svg id="mdi-brightness-auto" viewBox="0 0 24 24"><path d="M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z" /></svg>',
+  },
+  {
+    key: 'BroadcastOutlined',
+    svg: '<svg id="mdi-broadcast" viewBox="0 0 24 24"><path d="M12 10C10.9 10 10 10.9 10 12S10.9 14 12 14 14 13.1 14 12 13.1 10 12 10M18 12C18 8.7 15.3 6 12 6S6 8.7 6 12C6 14.2 7.2 16.1 9 17.2L10 15.5C8.8 14.8 8 13.5 8 12.1C8 9.9 9.8 8.1 12 8.1S16 9.9 16 12.1C16 13.6 15.2 14.9 14 15.5L15 17.2C16.8 16.2 18 14.2 18 12M12 2C6.5 2 2 6.5 2 12C2 15.7 4 18.9 7 20.6L8 18.9C5.6 17.5 4 14.9 4 12C4 7.6 7.6 4 12 4S20 7.6 20 12C20 15 18.4 17.5 16 18.9L17 20.6C20 18.9 22 15.7 22 12C22 6.5 17.5 2 12 2Z" /></svg>',
+  },
+  {
+    key: 'BroadcastOffOutlined',
+    svg: '<svg id="mdi-broadcast-off" viewBox="0 0 24 24"><path d="M17.6 14.2C17.9 13.5 18 12.8 18 12C18 8.7 15.3 6 12 6C11.2 6 10.4 6.2 9.8 6.4L11.4 8H12C14.2 8 16 9.8 16 12C16 12.2 16 12.4 15.9 12.6L17.6 14.2M12 4C16.4 4 20 7.6 20 12C20 13.4 19.6 14.6 19 15.7L20.5 17.2C21.4 15.7 22 13.9 22 12C22 6.5 17.5 2 12 2C10.1 2 8.3 2.5 6.8 3.5L8.3 5C9.4 4.3 10.6 4 12 4M3.3 2.5L2 3.8L4.1 5.9C2.8 7.6 2 9.7 2 12C2 15.7 4 18.9 7 20.6L8 18.9C5.6 17.5 4 14.9 4 12C4 10.2 4.6 8.6 5.5 7.3L7 8.8C6.4 9.7 6 10.8 6 12C6 14.2 7.2 16.1 9 17.2L10 15.5C8.8 14.8 8 13.5 8 12.1C8 11.5 8.2 10.9 8.4 10.3L10 11.9V12.1C10 13.2 10.9 14.1 12 14.1H12.2L19.7 21.6L21 20.3L4.3 3.5L3.3 2.5Z" /></svg>',
+  },
+  {
+    key: 'CalendarOutlined',
+    svg: '<svg id="mdi-calendar" viewBox="0 0 24 24"><path d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z" /></svg>',
+  },
+  {
+    key: 'CalendarAccountOutlined',
+    svg: '<svg id="mdi-calendar-account" viewBox="0 0 24 24"><path d="M12 9C14 9 15 11.42 13.59 12.84C12.17 14.26 9.75 13.25 9.75 11.25C9.75 10 10.75 9 12 9M16.5 18H7.5V16.88C7.5 15.63 9.5 14.63 12 14.63S16.5 15.63 16.5 16.88M19 19H5V8H19M16 1V3H8V1H6V3H5C3.9 3 3 3.9 3 5V19C3 20.11 3.9 21 5 21H19C20.11 21 21 20.11 21 19V5C21 3.9 20.11 3 19 3H18V1H16Z" /></svg>',
+  },
+  {
+    key: 'CalendarCheckOutlined',
+    svg: '<svg id="mdi-calendar-check" viewBox="0 0 24 24"><path d="M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z" /></svg>',
+  },
+  {
+    key: 'CalendarClockOutlined',
+    svg: '<svg id="mdi-calendar-clock" viewBox="0 0 24 24"><path d="M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z" /></svg>',
+  },
+  {
+    key: 'CalendarClockOutlineOutlined',
+    svg: '<svg id="mdi-calendar-clock-outline" viewBox="0 0 24 24"><path d="M6 1V3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H11.1C12.36 22.24 14.09 23 16 23C19.87 23 23 19.87 23 16C23 14.09 22.24 12.36 21 11.1V5C21 3.9 20.11 3 19 3H18V1H16V3H8V1M5 5H19V7H5M5 9H19V9.67C18.09 9.24 17.07 9 16 9C12.13 9 9 12.13 9 16C9 17.07 9.24 18.09 9.67 19H5M16 11.15C18.68 11.15 20.85 13.32 20.85 16C20.85 18.68 18.68 20.85 16 20.85C13.32 20.85 11.15 18.68 11.15 16C11.15 13.32 13.32 11.15 16 11.15M15 13V16.69L18.19 18.53L18.94 17.23L16.5 15.82V13Z" /></svg>',
+  },
+  {
+    key: 'CalendarEditOutlined',
+    svg: '<svg id="mdi-calendar-edit" viewBox="0 0 24 24"><path d="M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H10V19H5V8H19V9H21V5A2,2 0 0,0 19,3M21.7,13.35L20.7,14.35L18.65,12.35L19.65,11.35C19.85,11.14 20.19,11.13 20.42,11.35L21.7,12.63C21.89,12.83 21.89,13.15 21.7,13.35M12,18.94L18.07,12.88L20.12,14.88L14.06,21H12V18.94Z" /></svg>',
+  },
+  {
+    key: 'CalendarLockOutlined',
+    svg: '<svg id="mdi-calendar-lock" viewBox="0 0 24 24"><path d="M12 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H6V1H8V3H16V1H18V3H19C20.1 3 21 3.9 21 5V12C20.4 11.6 19.7 11.2 19 11.1V8H5V19H12V21M22 18.3V21.8C22 22.4 21.4 23 20.7 23H15.2C14.6 23 14 22.4 14 21.7V18.2C14 17.6 14.6 17 15.2 17V15.5C15.2 14.1 16.6 13 18 13S20.8 14.1 20.8 15.5V17C21.4 17 22 17.6 22 18.3M19.5 15.5C19.5 14.7 18.8 14.2 18 14.2S16.5 14.7 16.5 15.5V17H19.5V15.5Z" /></svg>',
+  },
+  {
+    key: 'CalendarMonthOutlined',
+    svg: '<svg id="mdi-calendar-month" viewBox="0 0 24 24"><path d="M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z" /></svg>',
+  },
+  {
+    key: 'CalendarMultiselectOutlined',
+    svg: '<svg id="mdi-calendar-multiselect" viewBox="0 0 24 24"><path d="M19,19V8H5V19H19M16,1H18V3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1M7,10H9V12H7V10M15,10H17V12H15V10M11,14H13V16H11V14M15,14H17V16H15V14Z" /></svg>',
+  },
+  {
+    key: 'CalendarRefreshOutlined',
+    svg: '<svg id="mdi-calendar-refresh" viewBox="0 0 24 24"><path d="M19 3H18V1H16V3H8V1H6V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H14C13.4 20.5 12.9 19.8 12.5 19H5V8H19V10.6C19.7 10.7 20.4 10.9 21 11.3V5C21 3.9 20.1 3 19 3M18 12.5C19.1 12.5 20.1 12.9 20.8 13.7L22 12.5V16.5H18L19.8 14.7C19.3 14.3 18.7 14 18 14C16.6 14 15.5 15.1 15.5 16.5S16.6 19 18 19C18.8 19 19.5 18.6 20 18H21.7C21.1 19.5 19.7 20.5 18 20.5C15.8 20.5 14 18.7 14 16.5S15.8 12.5 18 12.5Z" /></svg>',
+  },
+  {
+    key: 'CalendarSearchOutlined',
+    svg: '<svg id="mdi-calendar-search" viewBox="0 0 24 24"><path d="M15.5,12C18,12 20,14 20,16.5C20,17.38 19.75,18.21 19.31,18.9L22.39,22L21,23.39L17.88,20.32C17.19,20.75 16.37,21 15.5,21C13,21 11,19 11,16.5C11,14 13,12 15.5,12M15.5,14A2.5,2.5 0 0,0 13,16.5A2.5,2.5 0 0,0 15.5,19A2.5,2.5 0 0,0 18,16.5A2.5,2.5 0 0,0 15.5,14M19,8H5V19H9.5C9.81,19.75 10.26,20.42 10.81,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V13.03C20.5,12.22 19.8,11.54 19,11V8Z" /></svg>',
+  },
+  {
+    key: 'CalendarSyncOutlined',
+    svg: '<svg id="mdi-calendar-sync" viewBox="0 0 24 24"><path d="M18,11V12.5C21.19,12.5 23.09,16.05 21.33,18.71L20.24,17.62C21.06,15.96 19.85,14 18,14V15.5L15.75,13.25L18,11M18,22V20.5C14.81,20.5 12.91,16.95 14.67,14.29L15.76,15.38C14.94,17.04 16.15,19 18,19V17.5L20.25,19.75L18,22M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H14C13.36,20.45 12.86,19.77 12.5,19H5V8H19V10.59C19.71,10.7 20.39,10.94 21,11.31V5A2,2 0 0,0 19,3Z" /></svg>',
+  },
+  {
+    key: 'CameraOutlined',
+    svg: '<svg id="mdi-camera" viewBox="0 0 24 24"><path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" /></svg>',
+  },
+  {
+    key: 'CameraMarkerOutlined',
+    svg: '<svg id="mdi-camera-marker" viewBox="0 0 24 24"><path d="M18.5 16.8C17.8 16.8 17.3 16.2 17.3 15.6C17.3 14.9 17.9 14.4 18.5 14.4S19.7 15 19.7 15.6C19.8 16.2 19.2 16.8 18.5 16.8M18.5 12C16.6 12 15 13.6 15 15.5C15 18.1 18.5 22 18.5 22S22 18.1 22 15.5C22 13.6 20.4 12 18.5 12M9 2L7 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H14.5C13.9 19.1 13.4 18.1 13.1 16.9C12.8 17 12.4 17 12 17C9.2 17 7 14.8 7 12S9.2 7 12 7C14.1 7 16 8.3 16.7 10.3C17.3 10.1 17.9 10 18.5 10C19.8 10 21 10.5 22 11.3V6C22 4.9 21.1 4 20 4H17L15 2H9M11.9 9C10.3 9 9 10.4 9 12C9 13.7 10.3 15 12 15C12.4 15 12.7 14.9 13 14.8C13.2 13.4 13.9 12.2 14.9 11.3C14.6 10 13.4 9 11.9 9C12 9 12 9 11.9 9Z" /></svg>',
+  },
+  {
+    key: 'CameraTimerOutlined',
+    svg: '<svg id="mdi-camera-timer" viewBox="0 0 24 24"><path d="M4.94,6.35C4.55,5.96 4.55,5.32 4.94,4.93C5.33,4.54 5.96,4.54 6.35,4.93L13.07,10.31L13.42,10.59C14.2,11.37 14.2,12.64 13.42,13.42C12.64,14.2 11.37,14.2 10.59,13.42L10.31,13.07L4.94,6.35M12,20A8,8 0 0,0 20,12C20,9.79 19.1,7.79 17.66,6.34L19.07,4.93C20.88,6.74 22,9.24 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12H4A8,8 0 0,0 12,20M12,1A2,2 0 0,1 14,3A2,2 0 0,1 12,5A2,2 0 0,1 10,3A2,2 0 0,1 12,1Z" /></svg>',
+  },
+  {
+    key: 'CarOutlined',
+    svg: '<svg id="mdi-car" viewBox="0 0 24 24"><path d="M5,11L6.5,6.5H17.5L19,11M17.5,16A1.5,1.5 0 0,1 16,14.5A1.5,1.5 0 0,1 17.5,13A1.5,1.5 0 0,1 19,14.5A1.5,1.5 0 0,1 17.5,16M6.5,16A1.5,1.5 0 0,1 5,14.5A1.5,1.5 0 0,1 6.5,13A1.5,1.5 0 0,1 8,14.5A1.5,1.5 0 0,1 6.5,16M18.92,6C18.72,5.42 18.16,5 17.5,5H6.5C5.84,5 5.28,5.42 5.08,6L3,12V20A1,1 0 0,0 4,21H5A1,1 0 0,0 6,20V19H18V20A1,1 0 0,0 19,21H20A1,1 0 0,0 21,20V12L18.92,6Z" /></svg>',
+  },
+  {
+    key: 'CarBatteryOutlined',
+    svg: '<svg id="mdi-car-battery" viewBox="0 0 24 24"><path d="M4,3V6H1V20H23V6H20V3H14V6H10V3H4M3,8H21V18H3V8M15,10V12H13V14H15V16H17V14H19V12H17V10H15M5,12V14H11V12H5Z" /></svg>',
+  },
+  {
+    key: 'CarBrakeAbsOutlined',
+    svg: '<svg id="mdi-car-brake-abs" viewBox="0 0 24 24"><path d="M24,12C24,15.31 22.66,18.31 20.5,20.5L19.42,19.42C21.32,17.5 22.5,14.9 22.5,12C22.5,9.11 21.32,6.5 19.42,4.58L20.5,3.5C22.66,5.69 24,8.69 24,12M20,9.6V8H16.8C15.92,8 15.2,8.72 15.2,9.6V11.2A1.6,1.6 0 0,0 16.8,12.8H18.4V14.4H15.2V16H18.4C19.28,16 20,15.28 20,14.4V12.8A1.6,1.6 0 0,0 18.4,11.2H16.8V9.6H20M8.42,6C9.47,5.37 10.69,5 12,5C13.31,5 14.53,5.37 15.58,6H18.69C17.05,4.16 14.66,3 12,3C9.34,3 6.95,4.16 5.31,6H8.42M13.2,12C13.84,12 14.4,12.56 14.4,13.2V14.4A1.6,1.6 0 0,1 12.8,16H9.6V8H12.8A1.6,1.6 0 0,1 14.4,9.6V10.8C14.4,11.44 13.84,12 13.2,12M12.8,12.8H11.2V14.4H12.8V12.8M12.8,9.6H11.2V11.2H12.8V9.6M4.58,4.58L3.5,3.5C1.34,5.69 0,8.69 0,12C0,15.31 1.34,18.31 3.5,20.5L4.58,19.42C2.68,17.5 1.5,14.9 1.5,12C1.5,9.11 2.68,6.5 4.58,4.58M7.2,16V12.8H5.6V16H4V9.6A1.6,1.6 0 0,1 5.6,8H7.2C8.08,8 8.8,8.72 8.8,9.6V16H7.2M7.2,11.2V9.6H5.6V11.2H7.2M15.58,18C14.53,18.63 13.31,19 12,19C10.69,19 9.47,18.63 8.42,18H5.31C6.95,19.84 9.34,21 12,21C14.66,21 17.05,19.84 18.69,18H15.58Z" /></svg>',
+  },
+  {
+    key: 'CarBrakeAlertOutlined',
+    svg: '<svg id="mdi-car-brake-alert" viewBox="0 0 24 24"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M12,19C8.14,19 5,15.86 5,12C5,8.14 8.14,5 12,5C15.86,5 19,8.14 19,12C19,15.86 15.86,19 12,19M20.5,20.5C22.66,18.31 24,15.31 24,12C24,8.69 22.66,5.69 20.5,3.5L19.42,4.58C21.32,6.5 22.5,9.11 22.5,12C22.5,14.9 21.32,17.5 19.42,19.42L20.5,20.5M4.58,19.42C2.68,17.5 1.5,14.9 1.5,12C1.5,9.11 2.68,6.5 4.58,4.58L3.5,3.5C1.34,5.69 0,8.69 0,12C0,15.31 1.34,18.31 3.5,20.5L4.58,19.42Z" /></svg>',
+  },
+  {
+    key: 'CarBrakeFluidLevelOutlined',
+    svg: '<svg id="mdi-car-brake-fluid-level" viewBox="0 0 24 24"><path d="M1.5 12C1.5 14.9 2.68 17.5 4.58 19.42L3.5 20.5C1.34 18.31 0 15.31 0 12S1.34 5.69 3.5 3.5L4.58 4.58C2.68 6.5 1.5 9.11 1.5 12M21 12C21 16.97 16.97 21 12 21S3 16.97 3 12 7.03 3 12 3 21 7.03 21 12M5 12C5 12.44 5.05 12.86 5.12 13.28C5.3 13.09 5.46 13 5.78 13C6.3 13 6.39 13.21 6.78 13.71C7.17 14.21 7.85 15 8.89 15C9.92 15 10.61 14.21 11 13.71C11.26 13.37 11.39 13.18 11.61 13.08C11.71 13.03 11.83 13 12 13C12.5 13 12.61 13.21 13 13.71C13.39 14.21 14.08 15 15.11 15C16.15 15 16.83 14.21 17.22 13.71C17.61 13.21 17.7 13 18.22 13C18.54 13 18.7 13.09 18.88 13.28C18.95 12.86 19 12.44 19 12C19 8.14 15.86 5 12 5S5 8.14 5 12M20.5 3.5L19.42 4.58C21.32 6.5 22.5 9.11 22.5 12C22.5 14.9 21.32 17.5 19.42 19.42L20.5 20.5C22.66 18.31 24 15.31 24 12S22.66 5.69 20.5 3.5Z" /></svg>',
+  },
+  {
+    key: 'CarBrakeHoldOutlined',
+    svg: '<svg id="mdi-car-brake-hold" viewBox="0 0 24 24"><path d="M12,3C7,3 3,7 3,12C3,17 7,21 12,21C17,21 21,17 21,12C21,7 17,3 12,3M12,19C8.1,19 5,15.9 5,12C5,8.1 8.1,5 12,5C15.9,5 19,8.1 19,12C19,15.9 15.9,19 12,19M20.5,20.5C22.7,18.3 24,15.3 24,12C24,8.7 22.7,5.7 20.5,3.5L19.4,4.6C21.3,6.5 22.5,9.1 22.5,12C22.5,14.9 21.3,17.5 19.4,19.4L20.5,20.5M4.6,19.4C2.7,17.5 1.5,14.9 1.5,12C1.5,9.1 2.7,6.5 4.6,4.6L3.5,3.5C1.3,5.7 0,8.7 0,12C0,15.3 1.3,18.3 3.5,20.5L4.6,19.4M9,7V17H11V13H13V17H15V7H13V11H11V7H9Z" /></svg>',
+  },
+  {
+    key: 'CarBrakeLowPressureOutlined',
+    svg: '<svg id="mdi-car-brake-low-pressure" viewBox="0 0 24 24"><path d="M13 12C13 12.55 12.55 13 12 13S11 12.55 11 12 11.45 11 12 11 13 11.45 13 12M10 12L7 9V11H3V13H7V15L10 12M14 12L17 15V13H21V11H17V9L14 12M20.5 3.5L19.42 4.58C21.32 6.5 22.5 9.11 22.5 12C22.5 14.9 21.32 17.5 19.42 19.42L20.5 20.5C22.66 18.31 24 15.31 24 12S22.66 5.69 20.5 3.5M5.69 9C6.81 6.64 9.22 5 12 5S17.19 6.64 18.32 9H20.5C19.24 5.5 15.92 3 12 3S4.76 5.5 3.5 9H5.69M4.58 4.58L3.5 3.5C1.34 5.69 0 8.69 0 12S1.34 18.31 3.5 20.5L4.58 19.42C2.68 17.5 1.5 14.9 1.5 12C1.5 9.11 2.68 6.5 4.58 4.58M18.32 15C17.19 17.36 14.79 19 12 19S6.81 17.36 5.69 15H3.5C4.76 18.5 8.08 21 12 21S19.24 18.5 20.5 15H18.32Z" /></svg>',
+  },
+  {
+    key: 'CarBrakeParkingOutlined',
+    svg: '<svg id="mdi-car-brake-parking" viewBox="0 0 24 24"><path d="M12,3C7,3 3,7 3,12C3,17 7,21 12,21C17,21 21,17 21,12C21,7 17,3 12,3M12,19C8.1,19 5,15.9 5,12C5,8.1 8.1,5 12,5C15.9,5 19,8.1 19,12C19,15.9 15.9,19 12,19M20.5,20.5C22.7,18.3 24,15.3 24,12C24,8.7 22.7,5.7 20.5,3.5L19.4,4.6C21.3,6.5 22.5,9.1 22.5,12C22.5,14.9 21.3,17.5 19.4,19.4L20.5,20.5M4.6,19.4C2.7,17.5 1.5,14.9 1.5,12C1.5,9.1 2.7,6.5 4.6,4.6L3.5,3.5C1.3,5.7 0,8.7 0,12C0,15.3 1.3,18.3 3.5,20.5L4.6,19.4M9.5,7V17H11.5V13H13.5A2,2 0 0,0 15.5,11V9A2,2 0 0,0 13.5,7H9.5M11.5,9H13.5V11H11.5V9Z" /></svg>',
+  },
+  {
+    key: 'CarBrakeRetarderOutlined',
+    svg: '<svg id="mdi-car-brake-retarder" viewBox="0 0 24 24"><path d="M12 3C7 3 3 7 3 12S7 21 12 21 21 17 21 12 17 3 12 3M12 19C8.1 19 5 15.9 5 12S8.1 5 12 5 19 8.1 19 12 15.9 19 12 19M20.5 20.5C22.7 18.3 24 15.3 24 12S22.7 5.7 20.5 3.5L19.4 4.6C21.3 6.5 22.5 9.1 22.5 12S21.3 17.5 19.4 19.4L20.5 20.5M4.6 19.4C2.7 17.5 1.5 14.9 1.5 12S2.7 6.5 4.6 4.6L3.5 3.5C1.3 5.7 0 8.7 0 12S1.3 18.3 3.5 20.5L4.6 19.4M15.3 10.5C15.96 10.5 16.5 11.17 16.5 12C16.5 12.81 15.95 13.5 15.3 13.5C14.93 13.5 14.66 13.29 14.5 13.11L14.47 13.08L14.44 13.05L13.38 12L14.47 10.92L14.5 10.89L14.53 10.86C14.74 10.63 15 10.5 15.3 10.5M8.7 10.5C9.07 10.5 9.34 10.71 9.5 10.88L9.5 10.92L9.56 10.95L10.62 12L9.53 13.08L9.5 13.11L9.47 13.15C9.26 13.37 9 13.5 8.7 13.5C8.05 13.5 7.5 12.81 7.5 12S8.05 10.5 8.7 10.5M15.3 9C14.58 9 13.9 9.31 13.42 9.85L12 11.25L10.61 9.88C10.1 9.31 9.42 9 8.7 9C7.21 9 6 10.35 6 12S7.21 15 8.7 15C9.42 15 10.1 14.69 10.59 14.15L12 12.75L13.39 14.12C13.9 14.68 14.58 15 15.3 15C16.79 15 18 13.65 18 12C18 10.33 16.79 9 15.3 9Z" /></svg>',
+  },
+  {
+    key: 'CarBrakeTemperatureOutlined',
+    svg: '<svg id="mdi-car-brake-temperature" viewBox="0 0 24 24"><path d="M12 10H15V8H12V7C12 6.4 11.6 6 11 6S10 6.4 10 7V17.3C9.4 17.6 9 18.3 9 19C9 20.1 9.9 21 11 21S13 20.1 13 19C13 18.3 12.6 17.6 12 17.3V14H15V12H12V10M24 12C24 15.31 22.66 18.31 20.5 20.5L19.42 19.42C21.32 17.5 22.5 14.9 22.5 12C22.5 9.11 21.32 6.5 19.42 4.58L20.5 3.5C22.66 5.69 24 8.69 24 12M1.5 12C1.5 14.9 2.68 17.5 4.58 19.42L3.5 20.5C1.34 18.31 0 15.31 0 12S1.34 5.69 3.5 3.5L4.58 4.58C2.68 6.5 1.5 9.11 1.5 12M21 12C21 15.53 18.96 18.58 16 20.05V17.74C17.81 16.47 19 14.37 19 12C19 8.14 15.86 5 12 5S5 8.14 5 12C5 14.37 6.19 16.47 8 17.74V20.05C5.04 18.58 3 15.53 3 12C3 7.03 7.03 3 12 3S21 7.03 21 12Z" /></svg>',
+  },
+  {
+    key: 'CarChildSeatOutlined',
+    svg: '<svg id="mdi-car-child-seat" viewBox="0 0 24 24"><path d="M17 4.5C17 5.9 15.9 7 14.5 7S12 5.9 12 4.5 13.1 2 14.5 2 17 3.1 17 4.5M15 8H14.2C12.1 8 10.1 6.8 9.1 4.9C9 4.8 8.9 4.7 8.9 4.6L7.1 5.4C7.6 6.8 9.2 8.6 11.5 9.5L9.7 14.5L5.8 13.4L3 18.9L5 19.4L6.8 15.8L11.3 17C12.3 17.2 13.3 16.7 13.7 15.8L16 9.4C16.2 8.7 15.7 8 15 8M18.9 7L15.5 16.4C14.9 18 13.4 19 11.8 19C11.5 19 11.1 19 10.8 18.9L7.9 18.1L7 19.9L9 20.4L10.4 20.8C10.9 20.9 11.4 21 11.9 21C14.4 21 16.6 19.5 17.5 17.1L21 7H18.9Z" /></svg>',
+  },
+  {
+    key: 'CarClockOutlined',
+    svg: '<svg id="mdi-car-clock" viewBox="0 0 24 24"><path d="M23 8C23 4.13 19.87 1 16 1C12.47 1 9.57 3.61 9.08 7H4.5C3.84 7 3.28 7.42 3.08 8L1 14V22C1 22.55 1.45 23 2 23H3C3.55 23 4 22.55 4 22V21H16V22C16 22.55 16.45 23 17 23H18C18.55 23 19 22.55 19 22V14.32C21.36 13.19 23 10.79 23 8M4.5 8.5H9.03C9.15 10.26 9.92 11.84 11.11 13H3L4.5 8.5M4.5 18C3.67 18 3 17.33 3 16.5S3.67 15 4.5 15 6 15.67 6 16.5 5.33 18 4.5 18M15.5 18C14.67 18 14 17.33 14 16.5S14.67 15 15.5 15 17 15.67 17 16.5 16.33 18 15.5 18M16 13C14.61 13 13.44 12.5 12.47 11.53C11.5 10.56 11 9.39 11 8C11 6.64 11.5 5.46 12.47 4.5C13.44 3.5 14.61 3 16 3C17.36 3 18.54 3.5 19.5 4.5C20.5 5.46 21 6.64 21 8C21 9.39 20.5 10.56 19.5 11.53C18.54 12.5 17.36 13 16 13M16.5 8.25L19.36 9.94L18.61 11.16L15 9V4H16.5V8.25Z" /></svg>',
+  },
+  {
+    key: 'CarCogOutlined',
+    svg: '<svg id="mdi-car-cog" viewBox="0 0 24 24"><path d="M6.5 5C5.84 5 5.28 5.42 5.08 6L3 12V20A1 1 0 0 0 4 21H5A1 1 0 0 0 6 20V19H11.3A7 7 0 0 1 11 17A7 7 0 0 1 14.41 11H5L6.5 6.5H17.5L18.68 10.03A7 7 0 0 1 20.47 10.46L18.92 6C18.72 5.42 18.16 5 17.5 5H6.5M17 12C16.87 12 16.76 12.09 16.74 12.21L16.55 13.53C16.25 13.66 15.96 13.82 15.7 14L14.46 13.5C14.35 13.5 14.22 13.5 14.15 13.63L13.15 15.36C13.09 15.47 13.11 15.6 13.21 15.68L14.27 16.5C14.25 16.67 14.24 16.83 14.24 17C14.24 17.17 14.25 17.33 14.27 17.5L13.21 18.32C13.12 18.4 13.09 18.53 13.15 18.64L14.15 20.37C14.21 20.5 14.34 20.5 14.46 20.5L15.7 20C15.96 20.18 16.24 20.35 16.55 20.47L16.74 21.79C16.76 21.91 16.86 22 17 22H19C19.11 22 19.22 21.91 19.24 21.79L19.43 20.47C19.73 20.34 20 20.18 20.27 20L21.5 20.5C21.63 20.5 21.76 20.5 21.83 20.37L22.83 18.64C22.89 18.53 22.86 18.4 22.77 18.32L21.7 17.5C21.72 17.33 21.74 17.17 21.74 17C21.74 16.83 21.73 16.67 21.7 16.5L22.76 15.68C22.85 15.6 22.88 15.47 22.82 15.36L21.82 13.63C21.76 13.5 21.63 13.5 21.5 13.5L20.27 14C20 13.82 19.73 13.65 19.42 13.53L19.23 12.21C19.22 12.09 19.11 12 19 12H17M6.5 13A1.5 1.5 0 0 1 8 14.5A1.5 1.5 0 0 1 6.5 16A1.5 1.5 0 0 1 5 14.5A1.5 1.5 0 0 1 6.5 13M18 15.5C18.83 15.5 19.5 16.17 19.5 17C19.5 17.83 18.83 18.5 18 18.5C17.16 18.5 16.5 17.83 16.5 17C16.5 16.17 17.17 15.5 18 15.5Z" /></svg>',
+  },
+  {
+    key: 'CarConnectedOutlined',
+    svg: '<svg id="mdi-car-connected" viewBox="0 0 24 24"><path d="M5,14H19L17.5,9.5H6.5L5,14M17.5,19A1.5,1.5 0 0,0 19,17.5A1.5,1.5 0 0,0 17.5,16A1.5,1.5 0 0,0 16,17.5A1.5,1.5 0 0,0 17.5,19M6.5,19A1.5,1.5 0 0,0 8,17.5A1.5,1.5 0 0,0 6.5,16A1.5,1.5 0 0,0 5,17.5A1.5,1.5 0 0,0 6.5,19M18.92,9L21,15V23A1,1 0 0,1 20,24H19A1,1 0 0,1 18,23V22H6V23A1,1 0 0,1 5,24H4A1,1 0 0,1 3,23V15L5.08,9C5.28,8.42 5.85,8 6.5,8H17.5C18.15,8 18.72,8.42 18.92,9M12,0C14.12,0 16.15,0.86 17.65,2.35L16.23,3.77C15.11,2.65 13.58,2 12,2C10.42,2 8.89,2.65 7.77,3.77L6.36,2.35C7.85,0.86 9.88,0 12,0M12,4C13.06,4 14.07,4.44 14.82,5.18L13.4,6.6C13.03,6.23 12.53,6 12,6C11.5,6 10.97,6.23 10.6,6.6L9.18,5.18C9.93,4.44 10.94,4 12,4Z" /></svg>',
+  },
+  {
+    key: 'CarCoolantLevelOutlined',
+    svg: '<svg id="mdi-car-coolant-level" viewBox="0 0 24 24"><path d="M19 7V5H21V3H13V5H15V7H1V21H23V7H19M21 14.42C20.71 14.13 20.5 14 20 14C19.33 14 19.21 14.21 18.71 14.71S17.33 16 16 16 13.79 15.21 13.29 14.71 12.67 14 12 14C11.78 14 11.63 14.03 11.5 14.08C11.22 14.18 11.05 14.37 10.71 14.71C10.21 15.21 9.33 16 8 16S5.79 15.21 5.29 14.71 4.67 14 4 14C3.5 14 3.29 14.13 3 14.42V9H21V14.42Z" /></svg>',
+  },
+  {
+    key: 'CarCruiseControlOutlined',
+    svg: '<svg id="mdi-car-cruise-control" viewBox="0 0 24 24"><path d="M22,15C22,17.6 20.8,19.9 18.9,21.3L18.4,20.8L16.3,18.7L17.7,17.3L18.9,18.5C19.4,17.8 19.8,16.9 19.9,16H18V14H19.9C19.7,13.1 19.4,12.3 18.9,11.5L17.7,12.7L16.3,11.3L17.5,10.1C16.8,9.6 15.9,9.2 15,9.1V11H13V9.1C12.1,9.3 11.3,9.6 10.5,10.1L13.5,13.1C13.7,13.1 13.8,13 14,13A2,2 0 0,1 16,15A2,2 0 0,1 14,17A2,2 0 0,1 12,15C12,14.8 12,14.7 12.1,14.5L9.1,11.5C8.6,12.2 8.2,13.1 8.1,14H10V16H8.1C8.3,16.9 8.6,17.7 9.1,18.5L10.3,17.3L11.7,18.7L9.1,21.3C7.2,19.9 6,17.6 6,15A8,8 0 0,1 14,7A8,8 0 0,1 22,15M6.7,5.3L3.4,2L2,3.4L5.3,6.7L4,8H8V4L6.7,5.3Z" /></svg>',
+  },
+  {
+    key: 'CarDefrostFrontOutlined',
+    svg: '<svg id="mdi-car-defrost-front" viewBox="0 0 24 24"><path d="M15,23C14.7,23 14.5,22.9 14.3,22.7C13.9,22.3 14,21.7 14.4,21.3V21.3C14.9,20.9 16.1,19.5 16.1,18.4C16.1,17.8 15.7,17.2 15.3,16.5C14.8,15.7 14.1,14.7 14.1,13.5C14.1,11.2 15.4,10.3 15.6,10.2C16.1,9.9 16.7,10.1 17,10.5C17.3,11 17.1,11.6 16.7,11.9V11.9C16.7,11.9 16.2,12.3 16.2,13.5C16.2,14.1 16.6,14.7 17,15.4C17.5,16.2 18.2,17.2 18.2,18.4C18.2,20.6 16.1,22.6 15.9,22.8C15.5,22.9 15.2,23 15,23M11.7,22.7C11.9,22.5 14,20.5 14,18.3C14,17.1 13.4,16.1 12.8,15.3C12.4,14.6 12,14 12,13.4C12,12.2 12.5,11.8 12.5,11.8V11.8C13,11.5 13.1,10.9 12.8,10.4C12.5,9.9 11.9,9.8 11.4,10.1C11.2,10.2 9.9,11.1 9.9,13.4C9.9,14.6 10.5,15.6 11.1,16.4C11.5,17.1 11.9,17.7 11.9,18.3C11.9,19.4 10.7,20.8 10.2,21.2V21.2C9.8,21.6 9.8,22.2 10.1,22.6C10.3,22.8 10.6,22.9 10.8,22.9C11.2,23 11.5,22.9 11.7,22.7M7.7,22.7C7.9,22.5 10,20.5 10,18.3C10,17.1 9.4,16.1 8.8,15.3C8.4,14.7 8,14.1 8,13.4C8,12.2 8.5,11.8 8.5,11.8V11.8C9,11.5 9.1,10.9 8.8,10.4C8.6,10 7.9,9.9 7.5,10.1C7.3,10.2 6,11.1 6,13.4C6,14.6 6.6,15.6 7.2,16.4C7.6,17.1 8,17.7 8,18.3C8,19.4 6.8,20.8 6.3,21.2V21.2C5.9,21.6 5.9,22.2 6.2,22.6C6.5,22.9 6.7,23 7,23C7.2,23 7.5,22.9 7.7,22.7M12,3C9.4,3 1,3.3 1,7C1,9.4 2.2,15.4 2.8,18H4L4.8,18H5V16H4.4C3.8,13.1 3,8.8 3,7C3,6 7.4,5 12,5C16.6,5 21,6 21,7C21,8.8 20.2,13.1 19.6,16H19V18H19.2L20,18H21.2C21.8,15.4 23,9.4 23,7C23,3.3 14.6,3 12,3Z" /></svg>',
+  },
+  {
+    key: 'CarDefrostRearOutlined',
+    svg: '<svg id="mdi-car-defrost-rear" viewBox="0 0 24 24"><path d="M10,18.3C10,20.5 7.9,22.5 7.7,22.7C7.5,22.9 7.2,23 7,23C6.7,23 6.5,22.9 6.2,22.6C5.9,22.2 5.9,21.6 6.3,21.2C6.8,20.8 8,19.4 8,18.3C8,17.7 7.6,17.1 7.2,16.4C6.6,15.6 6,14.6 6,13.4C6,11.1 7.3,10.2 7.5,10.1C7.9,9.9 8.6,10 8.8,10.4C9.1,10.9 9,11.5 8.5,11.8C8.5,11.8 8,12.2 8,13.4C8,14.1 8.4,14.7 8.8,15.3C9.4,16.1 10,17.1 10,18.3M12,13.4C12,12.2 12.5,11.8 12.5,11.8C13,11.5 13.1,10.9 12.8,10.4C12.5,9.9 11.9,9.8 11.4,10.1C11.2,10.2 9.9,11.1 9.9,13.4C9.9,14.6 10.5,15.6 11.1,16.4C11.5,17.1 11.9,17.7 11.9,18.3C11.9,19.4 10.7,20.8 10.2,21.2C9.8,21.6 9.8,22.2 10.1,22.6C10.3,22.8 10.6,22.9 10.8,22.9C11.2,23 11.5,22.9 11.7,22.7C11.9,22.5 14,20.5 14,18.3C14,17.1 13.4,16.1 12.8,15.3C12.4,14.6 12,14 12,13.4M20,3H4A2,2 0 0,0 2,5V16A2,2 0 0,0 4,18H5V16H4V5H20V16H19V18H20A2,2 0 0,0 22,16V5A2,2 0 0,0 20,3M16.2,13.5C16.2,12.3 16.7,11.9 16.7,11.9C17.1,11.6 17.3,11 17,10.5C16.7,10.1 16.1,9.9 15.6,10.2C15.4,10.3 14.1,11.2 14.1,13.5C14.1,14.7 14.8,15.7 15.3,16.5C15.7,17.2 16.1,17.8 16.1,18.4C16.1,19.5 14.9,20.9 14.4,21.3C14,21.7 13.9,22.3 14.3,22.7C14.5,22.9 14.7,23 15,23C15.2,23 15.5,22.9 15.9,22.8C16.1,22.6 18.2,20.6 18.2,18.4C18.2,17.2 17.5,16.2 17,15.4C16.6,14.7 16.2,14.1 16.2,13.5Z" /></svg>',
+  },
+  {
+    key: 'CarDoorOutlined',
+    svg: '<svg id="mdi-car-door" viewBox="0 0 24 24"><path d="M19,14H16V16H19V14M22,21H3V11L11,3H21A1,1 0 0,1 22,4V21M11.83,5L5.83,11H20V5H11.83Z" /></svg>',
+  },
+  {
+    key: 'CarDoorLockOutlined',
+    svg: '<svg id="mdi-car-door-lock" viewBox="0 0 24 24"><path d="M7.8 17V15.5C7.8 14.1 6.4 13 5 13S2.2 14.1 2.2 15.5V17C1.6 17 1 17.6 1 18.2V21.7C1 22.4 1.6 23 2.2 23H7.7C8.4 23 9 22.4 9 21.8V18.3C9 17.6 8.4 17 7.8 17M6.5 17H3.5V15.5C3.5 14.7 4.2 14.2 5 14.2S6.5 14.7 6.5 15.5V17M21 3H11L3 11V11.44C3.61 11.17 4.29 11 5 11C7.6 11 9.8 13.06 9.8 15.5V15.75C10.53 16.36 11 17.28 11 18.3V21H22V4C22 3.45 21.55 3 21 3M19 16H16V14H19V16M20 11H5.83L11.83 5H20V11Z" /></svg>',
+  },
+  {
+    key: 'CarElectricOutlined',
+    svg: '<svg id="mdi-car-electric" viewBox="0 0 24 24"><path d="M18.92 2C18.72 1.42 18.16 1 17.5 1H6.5C5.84 1 5.29 1.42 5.08 2L3 8V16C3 16.55 3.45 17 4 17H5C5.55 17 6 16.55 6 16V15H18V16C18 16.55 18.45 17 19 17H20C20.55 17 21 16.55 21 16V8L18.92 2M6.5 12C5.67 12 5 11.33 5 10.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12M17.5 12C16.67 12 16 11.33 16 10.5S16.67 9 17.5 9 19 9.67 19 10.5 18.33 12 17.5 12M5 7L6.5 2.5H17.5L19 7H5M7 20H11V18L17 21H13V23L7 20Z" /></svg>',
+  },
+  {
+    key: 'CarElectricOutlineOutlined',
+    svg: '<svg id="mdi-car-electric-outline" viewBox="0 0 24 24"><path d="M18.92 2C18.72 1.42 18.16 1 17.5 1H6.5C5.84 1 5.29 1.42 5.08 2L3 8V16C3 16.55 3.45 17 4 17H5C5.55 17 6 16.55 6 16V15H18V16C18 16.55 18.45 17 19 17H20C20.55 17 21 16.55 21 16V8L18.92 2M6.85 3H17.14L18.22 6.11H5.77L6.85 3M19 13H5V8H19V13M7.5 9C8.33 9 9 9.67 9 10.5S8.33 12 7.5 12 6 11.33 6 10.5 6.67 9 7.5 9M16.5 9C17.33 9 18 9.67 18 10.5S17.33 12 16.5 12C15.67 12 15 11.33 15 10.5S15.67 9 16.5 9M7 20H11V18L17 21H13V23L7 20Z" /></svg>',
+  },
+  {
+    key: 'CarLightAlertOutlined',
+    svg: '<svg id="mdi-car-light-alert" viewBox="0 0 24 24"><path d="M23 7V13H21V7H23M21 17H23V15H21V17M1 9V11H5C5.1 10.3 5.1 9.6 5.2 9H1M5 13H1V15H5.2C5.1 14.4 5.1 13.7 5 13M5.9 6.4C6 5.8 6.3 5.4 6.5 5H1V7H5.7C5.8 6.8 5.8 6.6 5.9 6.4M1 17V19H6.6C6.2 18.4 5.9 17.8 5.7 17H1M10 4.8C6 4.8 6 19.2 10 19.2S19 16.5 19 12 14 4.8 10 4.8M10.1 17.2C9.7 16.8 9 15 9 12S9.7 7.2 10.1 6.8C13 6.9 17 8.7 17 12S13 17.1 10.1 17.2" /></svg>',
+  },
+  {
+    key: 'CarLightDimmedOutlined',
+    svg: '<svg id="mdi-car-light-dimmed" viewBox="0 0 24 24"><path d="M13,4.8C9,4.8 9,19.2 13,19.2C17,19.2 22,16.5 22,12C22,7.5 17,4.8 13,4.8M13.1,17.2C12.7,16.8 12,15 12,12C12,9 12.7,7.2 13.1,6.8C16,6.9 20,8.7 20,12C20,15.3 15.9,17.1 13.1,17.2M8,10.5C8,11 7.9,11.5 7.9,12C7.9,12.2 7.9,12.4 7.9,12.6L2.4,14L1.9,12.1L8,10.5M2,7L9.4,5.1C9.2,5.4 9,5.8 8.9,6.3C8.8,6.6 8.7,7 8.6,7.4L2.5,8.9L2,7M8.2,15.5C8.3,16.2 8.5,16.9 8.7,17.4L2.4,19L1.9,17.1L8.2,15.5Z" /></svg>',
+  },
+  {
+    key: 'CarLightFogOutlined',
+    svg: '<svg id="mdi-car-light-fog" viewBox="0 0 24 24"><path d="M13,4.8C9,4.8 9,19.2 13,19.2C17,19.2 22,16.5 22,12C22,7.5 17,4.8 13,4.8M13.1,17.2C12.7,16.8 12,15 12,12C12,9 12.7,7.2 13.1,6.8C16,6.9 20,8.7 20,12C20,15.3 16,17.1 13.1,17.2M6,8V11H8C8,11.3 8,11.7 8,12C8,12.3 8,12.7 8,13H6V16H8.4C8.6,16.7 8.8,17.4 9,18H6V21H4V18H2V16H4V13H2V11H4V8H2V6H4V3H6V6H9C9,6.1 8.9,6.2 8.9,6.4C8.7,6.9 8.5,7.4 8.4,8H6Z" /></svg>',
+  },
+  {
+    key: 'CarLightHighOutlined',
+    svg: '<svg id="mdi-car-light-high" viewBox="0 0 24 24"><path d="M13,4.8C9,4.8 9,19.2 13,19.2C17,19.2 22,16.5 22,12C22,7.5 17,4.8 13,4.8M13.1,17.2C12.7,16.8 12,15 12,12C12,9 12.7,7.2 13.1,6.8C16,6.9 20,8.7 20,12C20,15.3 16,17.1 13.1,17.2M2,5H9.5C9.3,5.4 9,5.8 8.9,6.4C8.8,6.6 8.8,6.8 8.7,7H2V5M8,11H2V9H8.2C8.1,9.6 8.1,10.3 8,11M8.7,17C8.9,17.8 9.2,18.4 9.6,19H2.1V17H8.7M8.2,15H2V13H8C8.1,13.7 8.1,14.4 8.2,15Z" /></svg>',
+  },
+  {
+    key: 'CarMultipleOutlined',
+    svg: '<svg id="mdi-car-multiple" viewBox="0 0 24 24"><path d="M8,11L9.5,6.5H18.5L20,11M18.5,16A1.5,1.5 0 0,1 17,14.5A1.5,1.5 0 0,1 18.5,13A1.5,1.5 0 0,1 20,14.5A1.5,1.5 0 0,1 18.5,16M9.5,16A1.5,1.5 0 0,1 8,14.5A1.5,1.5 0 0,1 9.5,13A1.5,1.5 0 0,1 11,14.5A1.5,1.5 0 0,1 9.5,16M19.92,6C19.71,5.4 19.14,5 18.5,5H9.5C8.86,5 8.29,5.4 8.08,6L6,12V20A1,1 0 0,0 7,21H8A1,1 0 0,0 9,20V19H19V20A1,1 0 0,0 20,21H21A1,1 0 0,0 22,20V12L19.92,6M14.92,3C14.71,2.4 14.14,2 13.5,2H4.5C3.86,2 3.29,2.4 3.08,3L1,9V17A1,1 0 0,0 2,18H3A1,1 0 0,0 4,17V12.91C3.22,12.63 2.82,11.77 3.1,11C3.32,10.4 3.87,10 4.5,10H4.57L5.27,8H3L4.5,3.5H15.09L14.92,3Z" /></svg>',
+  },
+  {
+    key: 'CarOffOutlined',
+    svg: '<svg id="mdi-car-off" viewBox="0 0 24 24"><path d="M20.5,19.85L6.41,5.76L2.41,1.76L1.11,3L4.57,6.46L3,11V19A1,1 0 0,0 4,20H5A1,1 0 0,0 6,19V18H16.11L20.84,22.73L22.11,21.46L20.5,19.85M6.5,15A1.5,1.5 0 0,1 5,13.5A1.5,1.5 0 0,1 6.5,12A1.5,1.5 0 0,1 8,13.5A1.5,1.5 0 0,1 6.5,15M5,10L5.78,7.67L8.11,10H5M17.5,5.5L19,10H13.2L16.12,12.92C16.5,12.17 17.37,11.86 18.12,12.21C18.87,12.57 19.18,13.47 18.83,14.21C18.68,14.5 18.43,14.77 18.12,14.92L21,17.8V11L18.92,5C18.71,4.4 18.14,4 17.5,4H7.2L8.7,5.5H17.5Z" /></svg>',
+  },
+  {
+    key: 'CarParkingLightsOutlined',
+    svg: '<svg id="mdi-car-parking-lights" viewBox="0 0 24 24"><path d="M7.3,9.2C8.1,9.6 9,10.5 9,12C9,13.5 8.1,14.4 7.3,14.8C6.9,13.4 6.9,10.6 7.3,9.2M6.5,7C4.5,7 4.5,17 6.5,17C8.5,17 11,15.1 11,12C11,8.9 8.5,7 6.5,7M16.7,9.2C17,10.6 17,13.4 16.7,14.8C15.9,14.4 15,13.5 15,12C15,10.5 15.9,9.6 16.7,9.2M17.5,7C15.5,7 13,8.9 13,12C13,15.1 15.5,17 17.5,17C19.5,17 19.5,7 17.5,7M4.9,6.2L2.5,4.6L1.4,6.3L4,8C4.2,7.3 4.5,6.6 4.9,6.2M20,8L22.6,6.3L21.5,4.6L19.1,6.2C19.4,6.6 19.8,7.2 20,8M4,16L1.4,17.7L2.5,19.4L4.9,17.8C4.6,17.4 4.2,16.8 4,16M20.5,11C20.5,11.3 20.5,11.7 20.5,12C20.5,12.3 20.5,12.6 20.5,13H24V11H20.5M19.1,17.8L21.5,19.4L22.6,17.7L20,16C19.8,16.7 19.5,17.4 19.1,17.8M3.5,12C3.5,11.7 3.5,11.4 3.5,11H0V13H3.5C3.5,12.7 3.5,12.3 3.5,12Z" /></svg>',
+  },
+  {
+    key: 'CarTireAlertOutlined',
+    svg: '<svg id="mdi-car-tire-alert" viewBox="0 0 24 24"><path d="M11,13H13V15H11V13M11,5H13V11H11V5M17,4.76C18.86,6.19 20,8.61 20,11C20,14 18.33,16.64 15.86,18H8.14C5.67,16.64 4,14 4,11C4,8.61 5.09,6.17 7,4.76V2H5V3.86C3.15,5.68 2,8.2 2,11C2,13.8 3.15,16.32 5,18.14V22H7V20H9V22H11V20H13V22H15V20H17V22H19V18.14C20.85,16.32 22,13.8 22,11C22,8.2 20.85,5.68 19,3.86V2H17V4.76Z" /></svg>',
+  },
+  {
+    key: 'CarTractionControlOutlined',
+    svg: '<svg id="mdi-car-traction-control" viewBox="0 0 24 24"><path d="M9.5,11H10.5C10.8,11 11,10.8 11,10.5V9H19V10.5C19,10.8 19.2,11 19.5,11H20.5C20.8,11 21,10.8 21,10.5V9L21,8.5V6L19.6,1.7C19.5,1.3 19.1,1 18.7,1H11.4C11,1 10.6,1.3 10.5,1.7L9,6V8.5L9,9V10.5C9,10.8 9.2,11 9.5,11M11.3,2H18.6L19.5,5H10.4L11.3,2M12,23H10C10,22.2 8.1,21.5 6.6,20.9C4.5,20.1 2,19.2 2,17C2,14.7 4.3,14.1 6.2,13.5C7.9,13.1 9,12.7 9,12H11C11,14.3 8.7,14.9 6.8,15.5C5.1,15.9 4,16.3 4,17C4,17.8 5.9,18.5 7.4,19.1C9.5,19.9 12,20.8 12,23M22,23H20C20,22.2 18.1,21.5 16.6,20.9C14.5,20.1 12,19.2 12,17C12,14.7 14.3,14.1 16.2,13.5C17.8,13 19,12.7 19,12H21C21,14.3 18.7,14.9 16.8,15.5C15.2,15.9 14,16.3 14,17C14,17.8 15.9,18.5 17.4,19.1C19.5,19.9 22,20.8 22,23Z" /></svg>',
+  },
+  {
+    key: 'CarWirelessOutlined',
+    svg: '<svg id="mdi-car-wireless" viewBox="0 0 24 24"><path d="M12 5C10.9 5 10 5.9 10 7V8H6.5C5.84 8 5.28 8.42 5.08 9L3 15V23C3 23.55 3.45 24 4 24H5C5.55 24 6 23.55 6 23V22H18V23C18 23.55 18.45 24 19 24H20C20.55 24 21 23.55 21 23V15L18.92 9C18.72 8.42 18.16 8 17.5 8H14V7C14 5.9 13.11 5 12 5M6.5 9.5H17.5L19 14H5L6.5 9.5M6.5 16C7.33 16 8 16.67 8 17.5S7.33 19 6.5 19 5 18.33 5 17.5 5.67 16 6.5 16M17.5 16C18.33 16 19 16.67 19 17.5S18.33 19 17.5 19 16 18.33 16 17.5 16.67 16 17.5 16M16.2 3.4C15 2.3 13.5 1.7 12 1.7S9 2.3 7.8 3.4L7 2.6C8.4 1.2 10.2 .5 12 .5S15.6 1.2 17 2.6L16.2 3.4M15.3 4.2L14.5 5C13.8 4.3 12.9 4 12 4S10.2 4.3 9.5 5L8.7 4.2C9.6 3.3 10.8 2.8 12 2.8S14.4 3.3 15.3 4.2" /></svg>',
+  },
+  {
+    key: 'CastOffOutlined',
+    svg: '<svg id="mdi-cast-off" viewBox="0 0 24 24"><path d="M1.6,1.27L0.25,2.75L1.41,3.8C1.16,4.13 1,4.55 1,5V8H3V5.23L18.2,19H14V21H20.41L22.31,22.72L23.65,21.24M6.5,3L8.7,5H21V16.14L23,17.95V5C23,3.89 22.1,3 21,3M1,10V12A9,9 0 0,1 10,21H12C12,14.92 7.08,10 1,10M1,14V16A5,5 0 0,1 6,21H8A7,7 0 0,0 1,14M1,18V21H4A3,3 0 0,0 1,18Z" /></svg>',
+  },
+  {
+    key: 'CastVariantOutlined',
+    svg: '<svg id="mdi-cast-variant" viewBox="0 0 24 24"><path d="M6,22H18L12,16M21,3H3A2,2 0 0,0 1,5V17A2,2 0 0,0 3,19H7V17H3V5H21V17H17V19H21A2,2 0 0,0 23,17V5A2,2 0 0,0 21,3Z" /></svg>',
+  },
+  {
+    key: 'CctvOutlined',
+    svg: '<svg id="mdi-cctv" viewBox="0 0 24 24"><path d="M6.03 12.03L8.03 15.5L5.5 18.68L2 12.62L6.03 12.03M17 18V15.29C17.88 14.9 18.5 14.03 18.5 13C18.5 12.43 18.3 11.9 17.97 11.5L19.94 10.35C20.95 9.76 21.3 8.47 20.71 7.46L19.33 5.06C18.74 4.05 17.45 3.7 16.44 4.28L8.31 9C7.36 9.53 7.03 10.75 7.58 11.71L9.08 14.31C9.63 15.26 10.86 15.59 11.81 15.04L13.69 13.96C13.94 14.55 14.41 15.03 15 15.29V18C15 19.1 15.9 20 17 20H22V18H17Z" /></svg>',
+  },
+  {
+    key: 'CctvOffOutlined',
+    svg: '<svg id="mdi-cctv-off" viewBox="0 0 24 24"><path d="M20.84 22.73L18.11 20H17C15.9 20 15 19.1 15 18V16.89L12.66 14.55L11.81 15.04C10.86 15.59 9.63 15.26 9.08 14.31L7.58 11.71C7.18 11 7.25 10.18 7.68 9.57L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M18.5 13C18.5 12.43 18.3 11.9 17.97 11.5L19.94 10.35C20.95 9.76 21.3 8.47 20.71 7.46L19.33 5.06C18.74 4.05 17.45 3.7 16.44 4.28L10.77 7.57L17.86 14.66C18.26 14.22 18.5 13.64 18.5 13M2 12.62L5.5 18.68L8.03 15.5L6.03 12.03L2 12.62Z" /></svg>',
+  },
+  {
+    key: 'CeilingFanOutlined',
+    svg: '<svg id="mdi-ceiling-fan" viewBox="0 0 24 24"><path d="M8 3V5H11V10.27C10.38 10.63 10 11.29 10 12V13H14V12C14 11.29 13.62 10.63 13 10.27V5H16V3H8M6 12C3.79 12 2 12.67 2 13.5S3.79 15 6 15 10 14.33 10 13.5 8.21 12 6 12M18 12C15.79 12 14 12.67 14 13.5S15.79 15 18 15 22 14.33 22 13.5 20.21 12 18 12M10 14V15C10 15.72 10.38 16.38 11 16.73C11.62 17.09 12.38 17.09 13 16.73C13.62 16.38 14 15.71 14 15V14H10Z" /></svg>',
+  },
+  {
+    key: 'CeilingFanLightOutlined',
+    svg: '<svg id="mdi-ceiling-fan-light" viewBox="0 0 24 24"><path d="M8 3V5H11V10.27C10.38 10.63 10 11.29 10 12V13H14V12C14 11.29 13.62 10.63 13 10.27V5H16V3H8M6 12C3.79 12 2 12.67 2 13.5C2 14.33 3.79 15 6 15S10 14.33 10 13.5C10 12.67 8.21 12 6 12M18 12C15.79 12 14 12.67 14 13.5C14 14.33 15.79 15 18 15S22 14.33 22 13.5C22 12.67 20.21 12 18 12M10 14V15C10 15.72 10.38 16.38 11 16.73C11.62 17.09 12.38 17.09 13 16.73C13.62 16.38 14 15.71 14 15V14H10M13 19V22H11V19H13M15.88 16.46L18 18.59L16.59 20L14.47 17.88L15.88 16.46M9.54 17.88L7.41 20L6 18.59L8.12 16.47L9.54 17.88" /></svg>',
+  },
+  {
+    key: 'CeilingLightOutlined',
+    svg: '<svg id="mdi-ceiling-light" viewBox="0 0 24 24"><path d="M8,9H11V4H13V9H16L20,17H4L8,9M14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18H14Z" /></svg>',
+  },
+  {
+    key: 'CeilingLightMultipleOutlined',
+    svg: '<svg id="mdi-ceiling-light-multiple" viewBox="0 0 24 24"><path d="M10 11H13V6H15V11H18L22 19H6L10 11M16 20C16 21.11 15.11 22 14 22S12 21.11 12 20H16M8.21 10.11L8.76 9H11V2H9V7H6L2 15H5.76L8.21 10.11Z" /></svg>',
+  },
+  {
+    key: 'CeilingLightMultipleOutlineOutlined',
+    svg: '<svg id="mdi-ceiling-light-multiple-outline" viewBox="0 0 24 24"><path d="M16.76 13L18.76 17H9.24L11.24 13H16.76M15 6H13V11H10L6 19H22L18 11H15V6M16 20C16 21.11 15.11 22 14 22S12 21.11 12 20H16M8.21 10.11L8.76 9H11V2H9V7H6L2 15H5.76L8.21 10.11Z" /></svg>',
+  },
+  {
+    key: 'CeilingLightOutlineOutlined',
+    svg: '<svg id="mdi-ceiling-light-outline" viewBox="0 0 24 24"><path d="M14.76 11L16.76 15H7.24L9.24 11H14.76M13 4H11V9H8L4 17H20L16 9H13V4M14 18H10C10 19.11 10.9 20 12 20S14 19.11 14 18Z" /></svg>',
+  },
+  {
+    key: 'CellphoneLinkOutlined',
+    svg: '<svg id="mdi-cellphone-link" viewBox="0 0 24 24"><path d="M22,17H18V10H22M23,8H17A1,1 0 0,0 16,9V19A1,1 0 0,0 17,20H23A1,1 0 0,0 24,19V9A1,1 0 0,0 23,8M4,6H22V4H4A2,2 0 0,0 2,6V17H0V20H14V17H4V6Z" /></svg>',
+  },
+  {
+    key: 'CellphoneLinkOffOutlined',
+    svg: '<svg id="mdi-cellphone-link-off" viewBox="0 0 24 24"><path d="M23,8H17A1,1 0 0,0 16,9V13.18L18,15.18V10H22V17H19.82L22.82,20H23A1,1 0 0,0 24,19V9A1,1 0 0,0 23,8M4,6.27L14.73,17H4V6.27M1.92,1.65L0.65,2.92L2.47,4.74C2.18,5.08 2,5.5 2,6V17H0V20H17.73L20.08,22.35L21.35,21.08L3.89,3.62L1.92,1.65M22,6V4H6.82L8.82,6H22Z" /></svg>',
+  },
+  {
+    key: 'ChartArcOutlined',
+    svg: '<svg id="mdi-chart-arc" viewBox="0 0 24 24"><path d="M16.18,19.6L14.17,16.12C15.15,15.4 15.83,14.28 15.97,13H20C19.83,15.76 18.35,18.16 16.18,19.6M13,7.03V3C17.3,3.26 20.74,6.7 21,11H16.97C16.74,8.91 15.09,7.26 13,7.03M7,12.5C7,13.14 7.13,13.75 7.38,14.3L3.9,16.31C3.32,15.16 3,13.87 3,12.5C3,7.97 6.54,4.27 11,4V8.03C8.75,8.28 7,10.18 7,12.5M11.5,21C8.53,21 5.92,19.5 4.4,17.18L7.88,15.17C8.7,16.28 10,17 11.5,17C12.14,17 12.75,16.87 13.3,16.62L15.31,20.1C14.16,20.68 12.87,21 11.5,21Z" /></svg>',
+  },
+  {
+    key: 'ChartAreasplineOutlined',
+    svg: '<svg id="mdi-chart-areaspline" viewBox="0 0 24 24"><path d="M17.45,15.18L22,7.31V19L22,21H2V3H4V15.54L9.5,6L16,9.78L20.24,2.45L21.97,3.45L16.74,12.5L10.23,8.75L4.31,19H6.57L10.96,11.44L17.45,15.18Z" /></svg>',
+  },
+  {
+    key: 'ChartAreasplineVariantOutlined',
+    svg: '<svg id="mdi-chart-areaspline-variant" viewBox="0 0 24 24"><path d="M22,21H2V3H4V15.54L9.5,6L16,9.78L20.24,2.45L21.97,3.45L22,21Z" /></svg>',
+  },
+  {
+    key: 'ChartBarOutlined',
+    svg: '<svg id="mdi-chart-bar" viewBox="0 0 24 24"><path d="M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" /></svg>',
+  },
+  {
+    key: 'ChartBarStackedOutlined',
+    svg: '<svg id="mdi-chart-bar-stacked" viewBox="0 0 24 24"><path d="M22,21H2V3H4V19H6V17H10V19H12V16H16V19H18V17H22V21M18,14H22V16H18V14M12,6H16V9H12V6M16,15H12V10H16V15M6,10H10V12H6V10M10,16H6V13H10V16Z" /></svg>',
+  },
+  {
+    key: 'ChartBellCurveOutlined',
+    svg: '<svg id="mdi-chart-bell-curve" viewBox="0 0 24 24"><path d="M9.96,11.31C10.82,8.1 11.5,6 13,6C14.5,6 15.18,8.1 16.04,11.31C17,14.92 18.1,19 22,19V17C19.8,17 19,14.54 17.97,10.8C17.08,7.46 16.15,4 13,4C9.85,4 8.92,7.46 8.03,10.8C7.03,14.54 6.2,17 4,17V2H2V22H22V20H4V19C7.9,19 9,14.92 9.96,11.31Z" /></svg>',
+  },
+  {
+    key: 'ChartBellCurveCumulativeOutlined',
+    svg: '<svg id="mdi-chart-bell-curve-cumulative" viewBox="0 0 24 24"><path d="M4 19V20H22V22H2V2H4V17C7 17 10 15 12.1 11.4C15.1 6.4 18.4 4 22 4V6C19.2 6 16.5 8.1 13.9 12.5C11.3 16.6 7.7 19 4 19Z" /></svg>',
+  },
+  {
+    key: 'ChartBoxOutlineOutlined',
+    svg: '<svg id="mdi-chart-box-outline" viewBox="0 0 24 24"><path d="M9 17H7V10H9V17M13 17H11V7H13V17M17 17H15V13H17V17M19 19H5V5H19V19.1M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z" /></svg>',
+  },
+  {
+    key: 'ChartLineOutlined',
+    svg: '<svg id="mdi-chart-line" viewBox="0 0 24 24"><path d="M16,11.78L20.24,4.45L21.97,5.45L16.74,14.5L10.23,10.75L5.46,19H22V21H2V3H4V17.54L9.5,8L16,11.78Z" /></svg>',
+  },
+  {
+    key: 'ChartTimelineVariantOutlined',
+    svg: '<svg id="mdi-chart-timeline-variant" viewBox="0 0 24 24"><path d="M3,14L3.5,14.07L8.07,9.5C7.89,8.85 8.06,8.11 8.59,7.59C9.37,6.8 10.63,6.8 11.41,7.59C11.94,8.11 12.11,8.85 11.93,9.5L14.5,12.07L15,12C15.18,12 15.35,12 15.5,12.07L19.07,8.5C19,8.35 19,8.18 19,8A2,2 0 0,1 21,6A2,2 0 0,1 23,8A2,2 0 0,1 21,10C20.82,10 20.65,10 20.5,9.93L16.93,13.5C17,13.65 17,13.82 17,14A2,2 0 0,1 15,16A2,2 0 0,1 13,14L13.07,13.5L10.5,10.93C10.18,11 9.82,11 9.5,10.93L4.93,15.5L5,16A2,2 0 0,1 3,18A2,2 0 0,1 1,16A2,2 0 0,1 3,14Z" /></svg>',
+  },
+  {
+    key: 'ChartTimelineVariantShimmerOutlined',
+    svg: '<svg id="mdi-chart-timeline-variant-shimmer" viewBox="0 0 24 24"><path d="M21 8C19.5 8 18.7 9.4 19.1 10.5L15.5 14.1C15.2 14 14.8 14 14.5 14.1L11.9 11.5C12.3 10.4 11.5 9 10 9C8.6 9 7.7 10.4 8.1 11.5L3.5 16C2.4 15.7 1 16.5 1 18C1 19.1 1.9 20 3 20C4.4 20 5.3 18.6 4.9 17.5L9.4 12.9C9.7 13 10.1 13 10.4 12.9L13 15.5C12.7 16.5 13.5 18 15 18C16.5 18 17.3 16.6 16.9 15.5L20.5 11.9C21.6 12.2 23 11.4 23 10C23 8.9 22.1 8 21 8M15 9L15.9 6.9L18 6L15.9 5.1L15 3L14.1 5.1L12 6L14.1 6.9L15 9M3.5 11L4 9L6 8.5L4 8L3.5 6L3 8L1 8.5L3 9L3.5 11Z" /></svg>',
+  },
+  {
+    key: 'CheckOutlined',
+    svg: '<svg id="mdi-check" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg>',
+  },
+  {
+    key: 'CheckAllOutlined',
+    svg: '<svg id="mdi-check-all" viewBox="0 0 24 24"><path d="M0.41,13.41L6,19L7.41,17.58L1.83,12M22.24,5.58L11.66,16.17L7.5,12L6.07,13.41L11.66,19L23.66,7M18,7L16.59,5.58L10.24,11.93L11.66,13.34L18,7Z" /></svg>',
+  },
+  {
+    key: 'CheckBoldOutlined',
+    svg: '<svg id="mdi-check-bold" viewBox="0 0 24 24"><path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" /></svg>',
+  },
+  {
+    key: 'CheckCircleOutlined',
+    svg: '<svg id="mdi-check-circle" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" /></svg>',
+  },
+  {
+    key: 'CheckCircleOutlineOutlined',
+    svg: '<svg id="mdi-check-circle-outline" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>',
+  },
+  {
+    key: 'CheckDecagramOutlined',
+    svg: '<svg id="mdi-check-decagram" viewBox="0 0 24 24"><path d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z" /></svg>',
+  },
+  {
+    key: 'CheckDecagramOutlineOutlined',
+    svg: '<svg id="mdi-check-decagram-outline" viewBox="0 0 24 24"><path d="M23 12L20.6 9.2L20.9 5.5L17.3 4.7L15.4 1.5L12 3L8.6 1.5L6.7 4.7L3.1 5.5L3.4 9.2L1 12L3.4 14.8L3.1 18.5L6.7 19.3L8.6 22.5L12 21L15.4 22.5L17.3 19.3L20.9 18.5L20.6 14.8L23 12M18.7 16.9L16 17.5L14.6 19.9L12 18.8L9.4 19.9L8 17.5L5.3 16.9L5.5 14.1L3.7 12L5.5 9.9L5.3 7.1L8 6.5L9.4 4.1L12 5.2L14.6 4.1L16 6.5L18.7 7.1L18.5 9.9L20.3 12L18.5 14.1L18.7 16.9M16.6 7.6L18 9L10 17L6 13L7.4 11.6L10 14.2L16.6 7.6Z" /></svg>',
+  },
+  {
+    key: 'CheckNetworkOutlined',
+    svg: '<svg id="mdi-check-network" viewBox="0 0 24 24"><path d="M15,20A1,1 0 0,0 14,19H13V17H17A2,2 0 0,0 19,15V5A2,2 0 0,0 17,3H7A2,2 0 0,0 5,5V15A2,2 0 0,0 7,17H11V19H10A1,1 0 0,0 9,20H2V22H9A1,1 0 0,0 10,23H14A1,1 0 0,0 15,22H22V20H15M8.25,10.08L9.41,8.92L11,10.5L14.59,6.92L15.75,8.33L11,13.08L8.25,10.08Z" /></svg>',
+  },
+  {
+    key: 'CheckNetworkOutlineOutlined',
+    svg: '<svg id="mdi-check-network-outline" viewBox="0 0 24 24"><path d="M15,20A1,1 0 0,0 14,19H13V17H17A2,2 0 0,0 19,15V5A2,2 0 0,0 17,3H7A2,2 0 0,0 5,5V15A2,2 0 0,0 7,17H11V19H10A1,1 0 0,0 9,20H2V22H9A1,1 0 0,0 10,23H14A1,1 0 0,0 15,22H22V20H15M7,15V5H17V15H7M8,10.37L9.24,9.13L10.93,10.83L14.76,7L16,8.5L10.93,13.57L8,10.37Z" /></svg>',
+  },
+  {
+    key: 'CheckOutlineOutlined',
+    svg: '<svg id="mdi-check-outline" viewBox="0 0 24 24"><path d="M19.78,2.2L24,6.42L8.44,22L0,13.55L4.22,9.33L8.44,13.55L19.78,2.2M19.78,5L8.44,16.36L4.22,12.19L2.81,13.55L8.44,19.17L21.19,6.42L19.78,5Z" /></svg>',
+  },
+  {
+    key: 'CheckUnderlineOutlined',
+    svg: '<svg id="mdi-check-underline" viewBox="0 0 24 24"><path d="M21,5L9,17L3.5,11.5L4.91,10.09L9,14.17L19.59,3.59L21,5M3,21V19H21V21H3Z" /></svg>',
+  },
+  {
+    key: 'ChevronDoubleDownOutlined',
+    svg: '<svg id="mdi-chevron-double-down" viewBox="0 0 24 24"><path d="M16.59,5.59L18,7L12,13L6,7L7.41,5.59L12,10.17L16.59,5.59M16.59,11.59L18,13L12,19L6,13L7.41,11.59L12,16.17L16.59,11.59Z" /></svg>',
+  },
+  {
+    key: 'ChevronDoubleLeftOutlined',
+    svg: '<svg id="mdi-chevron-double-left" viewBox="0 0 24 24"><path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z" /></svg>',
+  },
+  {
+    key: 'ChevronDoubleRightOutlined',
+    svg: '<svg id="mdi-chevron-double-right" viewBox="0 0 24 24"><path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z" /></svg>',
+  },
+  {
+    key: 'ChevronDoubleUpOutlined',
+    svg: '<svg id="mdi-chevron-double-up" viewBox="0 0 24 24"><path d="M7.41,18.41L6,17L12,11L18,17L16.59,18.41L12,13.83L7.41,18.41M7.41,12.41L6,11L12,5L18,11L16.59,12.41L12,7.83L7.41,12.41Z" /></svg>',
+  },
+  {
+    key: 'ChevronRightOutlined',
+    svg: '<svg id="mdi-chevron-right" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>',
+  },
+  {
+    key: 'ChevronRightBoxOutlineOutlined',
+    svg: '<svg id="mdi-chevron-right-box-outline" viewBox="0 0 24 24"><path d="M19,3H5A2,2 0 0,0 3,5V19C3,20.11 3.9,21 5,21H19C20.11,21 21,20.11 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M8.29,16.59L12.88,12L8.29,7.41L9.71,6L15.71,12L9.71,18L8.29,16.59Z" /></svg>',
+  },
+  {
+    key: 'ChevronRightCircleOutlineOutlined',
+    svg: '<svg id="mdi-chevron-right-circle-outline" viewBox="0 0 24 24"><path d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M8.6,16.6L13.2,12L8.6,7.4L10,6L16,12L10,18L8.6,16.6Z" /></svg>',
+  },
+  {
+    key: 'CircleOutlineOutlined',
+    svg: '<svg id="mdi-circle-outline" viewBox="0 0 24 24"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>',
+  },
+  {
+    key: 'CircleSlice1Outlined',
+    svg: '<svg id="mdi-circle-slice-1" viewBox="0 0 24 24"><path d="M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4M12 5C13.93 5 15.68 5.78 16.95 7.05L12 12V5Z" /></svg>',
+  },
+  {
+    key: 'CircleSlice2Outlined',
+    svg: '<svg id="mdi-circle-slice-2" viewBox="0 0 24 24"><path d="M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4M12 5C15.87 5 19 8.13 19 12H12V5Z" /></svg>',
+  },
+  {
+    key: 'CircleSlice3Outlined',
+    svg: '<svg id="mdi-circle-slice-3" viewBox="0 0 24 24"><path d="M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4M12 5C15.87 5 19 8.13 19 12C19 13.93 18.22 15.68 16.95 16.95L12 12V5Z" /></svg>',
+  },
+  {
+    key: 'CircleSlice4Outlined',
+    svg: '<svg id="mdi-circle-slice-4" viewBox="0 0 24 24"><path d="M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4M12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19V5Z" /></svg>',
+  },
+  {
+    key: 'CircleSlice5Outlined',
+    svg: '<svg id="mdi-circle-slice-5" viewBox="0 0 24 24"><path d="M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4M12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19C10.07 19 8.32 18.22 7.05 16.95L12 12V5Z" /></svg>',
+  },
+  {
+    key: 'CircleSlice6Outlined',
+    svg: '<svg id="mdi-circle-slice-6" viewBox="0 0 24 24"><path d="M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4M12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19C8.13 19 5 15.87 5 12H12V5Z" /></svg>',
+  },
+  {
+    key: 'CircleSlice7Outlined',
+    svg: '<svg id="mdi-circle-slice-7" viewBox="0 0 24 24"><path d="M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4M12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19C8.13 19 5 15.87 5 12C5 10.07 5.78 8.32 7.05 7.05L12 12V5Z" /></svg>',
+  },
+  {
+    key: 'CircleSlice8Outlined',
+    svg: '<svg id="mdi-circle-slice-8" viewBox="0 0 24 24"><path d="M12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4Z" /></svg>',
+  },
+  {
+    key: 'CloudLockOutlined',
+    svg: '<svg id="mdi-cloud-lock" viewBox="0 0 24 24"><path d="M14.2 14.5V14.74C13.5 15.34 13 16.24 13 17.2V20H6.5C5 20 3.69 19.5 2.61 18.43C1.54 17.38 1 16.09 1 14.58C1 13.28 1.39 12.12 2.17 11.1S4 9.43 5.25 9.15C5.67 7.62 6.5 6.38 7.75 5.43S10.42 4 12 4C13.95 4 15.6 4.68 16.96 6.04C18.08 7.16 18.73 8.5 18.93 10C16.36 10.04 14.2 12.08 14.2 14.5M23 17.3V20.8C23 21.4 22.4 22 21.7 22H16.2C15.6 22 15 21.4 15 20.7V17.2C15 16.6 15.6 16 16.2 16V14.5C16.2 13.1 17.6 12 19 12S21.8 13.1 21.8 14.5V16C22.4 16 23 16.6 23 17.3M20.5 14.5C20.5 13.7 19.8 13.2 19 13.2S17.5 13.7 17.5 14.5V16H20.5V14.5Z" /></svg>',
+  },
+  {
+    key: 'CloudLockOutlineOutlined',
+    svg: '<svg id="mdi-cloud-lock-outline" viewBox="0 0 24 24"><path d="M6.5 18H13V20H6.5C5 20 3.69 19.5 2.61 18.43C1.54 17.38 1 16.09 1 14.58C1 13.28 1.39 12.12 2.17 11.1S4 9.43 5.25 9.15C5.67 7.62 6.5 6.38 7.75 5.43S10.42 4 12 4C13.95 4 15.6 4.68 16.96 6.04C18.08 7.16 18.73 8.5 18.93 10C18.23 10 17.56 10.19 16.95 10.46C16.84 9.31 16.38 8.31 15.54 7.46C14.56 6.5 13.38 6 12 6S9.44 6.5 8.46 7.46C7.5 8.44 7 9.62 7 11H6.5C5.53 11 4.71 11.34 4.03 12.03C3.34 12.71 3 13.53 3 14.5S3.34 16.29 4.03 17C4.71 17.66 5.53 18 6.5 18M23 17.3V20.8C23 21.4 22.4 22 21.7 22H16.2C15.6 22 15 21.4 15 20.7V17.2C15 16.6 15.6 16 16.2 16V14.5C16.2 13.1 17.6 12 19 12S21.8 13.1 21.8 14.5V16C22.4 16 23 16.6 23 17.3M20.5 14.5C20.5 13.7 19.8 13.2 19 13.2S17.5 13.7 17.5 14.5V16H20.5V14.5Z" /></svg>',
+  },
+  {
+    key: 'CloudOffOutlineOutlined',
+    svg: '<svg id="mdi-cloud-off-outline" viewBox="0 0 24 24"><path d="M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z" /></svg>',
+  },
+  {
+    key: 'CloudOutlineOutlined',
+    svg: '<svg id="mdi-cloud-outline" viewBox="0 0 24 24"><path d="M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20M6.5 18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M12 12Z" /></svg>',
+  },
+  {
+    key: 'CogOutlined',
+    svg: '<svg id="mdi-cog" viewBox="0 0 24 24"><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>',
+  },
+  {
+    key: 'CogBoxOutlined',
+    svg: '<svg id="mdi-cog-box" viewBox="0 0 24 24"><path d="M17.25,12C17.25,12.23 17.23,12.46 17.2,12.68L18.68,13.84C18.81,13.95 18.85,14.13 18.76,14.29L17.36,16.71C17.27,16.86 17.09,16.92 16.93,16.86L15.19,16.16C14.83,16.44 14.43,16.67 14,16.85L13.75,18.7C13.72,18.87 13.57,19 13.4,19H10.6C10.43,19 10.28,18.87 10.25,18.7L10,16.85C9.56,16.67 9.17,16.44 8.81,16.16L7.07,16.86C6.91,16.92 6.73,16.86 6.64,16.71L5.24,14.29C5.15,14.13 5.19,13.95 5.32,13.84L6.8,12.68C6.77,12.46 6.75,12.23 6.75,12C6.75,11.77 6.77,11.54 6.8,11.32L5.32,10.16C5.19,10.05 5.15,9.86 5.24,9.71L6.64,7.29C6.73,7.13 6.91,7.07 7.07,7.13L8.81,7.84C9.17,7.56 9.56,7.32 10,7.15L10.25,5.29C10.28,5.13 10.43,5 10.6,5H13.4C13.57,5 13.72,5.13 13.75,5.29L14,7.15C14.43,7.32 14.83,7.56 15.19,7.84L16.93,7.13C17.09,7.07 17.27,7.13 17.36,7.29L18.76,9.71C18.85,9.86 18.81,10.05 18.68,10.16L17.2,11.32C17.23,11.54 17.25,11.77 17.25,12M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M12,10C10.89,10 10,10.89 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12C14,10.89 13.1,10 12,10Z" /></svg>',
+  },
+  {
+    key: 'CogClockwiseOutlined',
+    svg: '<svg id="mdi-cog-clockwise" viewBox="0 0 24 24"><path d="M12 3C7.03 3 3 7.03 3 12S7.03 21 12 21C14 21 15.92 20.34 17.5 19.14L16.06 17.7C14.87 18.54 13.45 19 12 19C8.13 19 5 15.87 5 12S8.13 5 12 5 19 8.13 19 12H16L20 16L24 12H21C21 7.03 16.97 3 12 3M7.71 13.16C7.62 13.23 7.59 13.35 7.64 13.45L8.54 15C8.6 15.12 8.72 15.12 8.82 15.12L9.95 14.67C10.19 14.83 10.44 14.97 10.7 15.09L10.88 16.28C10.9 16.39 11 16.47 11.1 16.47H12.9C13 16.5 13.11 16.41 13.13 16.3L13.31 15.12C13.58 15 13.84 14.85 14.07 14.67L15.19 15.12C15.3 15.16 15.42 15.11 15.47 15L16.37 13.5C16.42 13.38 16.39 13.26 16.31 13.19L15.31 12.45C15.34 12.15 15.34 11.85 15.31 11.55L16.31 10.79C16.4 10.72 16.42 10.61 16.37 10.5L15.47 8.95C15.41 8.85 15.3 8.81 15.19 8.85L14.07 9.3C13.83 9.13 13.57 9 13.3 8.88L13.13 7.69C13.11 7.58 13 7.5 12.9 7.5H11.14C11.04 7.5 10.95 7.57 10.93 7.67L10.76 8.85C10.5 8.97 10.23 9.12 10 9.3L8.85 8.88C8.74 8.84 8.61 8.89 8.56 9L7.65 10.5C7.6 10.62 7.63 10.74 7.71 10.81L8.71 11.55C8.69 11.7 8.69 11.85 8.71 12C8.7 12.15 8.7 12.3 8.71 12.45L7.71 13.19M12 13.5H12C11.16 13.5 10.5 12.82 10.5 12C10.5 11.17 11.17 10.5 12 10.5S13.5 11.17 13.5 12 12.83 13.5 12 13.5" /></svg>',
+  },
+  {
+    key: 'CogCounterclockwiseOutlined',
+    svg: '<svg id="mdi-cog-counterclockwise" viewBox="0 0 24 24"><path d="M12 3C7.03 3 3 7.03 3 12H0L4 16L8 12H5C5 8.13 8.13 5 12 5S19 8.13 19 12 15.87 19 12 19C10.55 19 9.13 18.54 7.94 17.7L6.5 19.14C8.08 20.34 10 21 12 21C16.97 21 21 16.97 21 12S16.97 3 12 3M16.29 13.19L15.29 12.45C15.3 12.3 15.3 12.15 15.29 12C15.31 11.85 15.31 11.7 15.29 11.55L16.29 10.81C16.37 10.74 16.4 10.62 16.35 10.5L15.44 9C15.39 8.89 15.26 8.84 15.15 8.88L14 9.3C13.77 9.12 13.5 8.97 13.24 8.85L13.07 7.67C13.05 7.57 12.96 7.5 12.86 7.5H11.1C11 7.5 10.89 7.58 10.87 7.69L10.7 8.88C10.43 9 10.17 9.13 9.93 9.3L8.81 8.85C8.71 8.81 8.59 8.85 8.53 8.95L7.63 10.5C7.58 10.61 7.6 10.72 7.69 10.79L8.69 11.55C8.66 11.85 8.66 12.15 8.69 12.45L7.69 13.19C7.61 13.26 7.58 13.38 7.63 13.5L8.53 15C8.58 15.11 8.7 15.16 8.81 15.12L9.93 14.67C10.16 14.85 10.42 15 10.69 15.12L10.87 16.3C10.89 16.41 11 16.5 11.1 16.47H12.9C13 16.47 13.11 16.39 13.12 16.28L13.3 15.09C13.56 14.97 13.81 14.83 14.05 14.67L15.18 15.12C15.28 15.12 15.4 15.12 15.46 15L16.36 13.45C16.41 13.35 16.38 13.23 16.29 13.16M12 13.5C11.17 13.5 10.5 12.83 10.5 12S11.17 10.5 12 10.5 13.5 11.17 13.5 12C13.5 12.82 12.84 13.5 12 13.5H12" /></svg>',
+  },
+  {
+    key: 'CogOffOutlined',
+    svg: '<svg id="mdi-cog-off" viewBox="0 0 24 24"><path d="M22.12 21.46L2.4 1.73L1.12 3L4 5.87L2.34 8.73C2.21 8.95 2.27 9.22 2.46 9.37L4.57 11C4.53 11.34 4.5 11.67 4.5 12S4.53 12.65 4.57 12.97L2.46 14.63C2.27 14.78 2.21 15.05 2.34 15.27L4.34 18.73C4.46 18.95 4.73 19.03 4.95 18.95L7.44 17.94C7.96 18.34 8.5 18.68 9.13 18.93L9.5 21.58C9.54 21.82 9.75 22 10 22H14C14.25 22 14.46 21.82 14.5 21.58L14.87 18.93C15.38 18.72 15.83 18.45 16.26 18.14L20.85 22.73L22.12 21.46M12 15.5C10.07 15.5 8.5 13.93 8.5 12C8.5 11.5 8.62 11.08 8.79 10.67L13.33 15.21C12.92 15.39 12.5 15.5 12 15.5M11.74 8.53L8.56 5.35C8.75 5.25 8.93 5.15 9.13 5.07L9.5 2.42C9.54 2.18 9.75 2 10 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.78 8.95 21.73 9.22 21.54 9.37L19.43 11C19.47 11.34 19.5 11.67 19.5 12S19.47 12.65 19.43 12.97L21.54 14.63C21.73 14.78 21.78 15.05 21.66 15.27L20.5 17.29L15.47 12.26C15.5 12.18 15.5 12.09 15.5 12C15.5 10.07 13.93 8.5 12 8.5C11.91 8.5 11.83 8.5 11.74 8.53Z" /></svg>',
+  },
+  {
+    key: 'CogOffOutlineOutlined',
+    svg: '<svg id="mdi-cog-off-outline" viewBox="0 0 24 24"><path d="M22.11 21.46L2.39 1.73L1.11 3L4 5.88L2.34 8.73C2.21 8.95 2.27 9.22 2.46 9.37L4.57 11L4.5 12L4.57 12.97L2.46 14.63C2.27 14.78 2.21 15.05 2.34 15.27L4.34 18.73C4.46 18.95 4.73 19.03 4.95 18.95L7.44 17.94C7.96 18.34 8.5 18.68 9.13 18.93L9.5 21.58C9.54 21.82 9.75 22 10 22H14C14.25 22 14.46 21.82 14.5 21.58L14.87 18.93C15.38 18.73 15.83 18.45 16.26 18.15L20.84 22.73L22.11 21.46M10 11.9L12.1 14C12.06 14 12.03 14 12 14C10.9 14 10 13.11 10 12C10 11.97 10 11.94 10 11.9M13.13 17.39L12.76 20H11.24L10.87 17.38C9.68 17.14 8.63 16.5 7.86 15.62L5.43 16.66L4.68 15.36L6.8 13.8C6.4 12.64 6.4 11.37 6.8 10.2L4.69 8.65L5.44 7.35L5.5 7.37L8.4 10.29C8.15 10.8 8 11.38 8 12C8 14.21 9.79 16 12 16C12.62 16 13.2 15.86 13.71 15.6L14.83 16.72C14.31 17.03 13.74 17.26 13.13 17.39M10.06 6.86L8.55 5.35C8.74 5.26 8.93 5.15 9.13 5.07L9.5 2.42C9.54 2.18 9.75 2 10 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L20.5 17.29L19.04 15.84L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25L10.88 6.61C10.6 6.67 10.32 6.75 10.06 6.86M12 8C14.21 8 16 9.79 16 12C16 12.25 15.97 12.5 15.93 12.73L11.27 8.07C11.5 8.03 11.75 8 12 8Z" /></svg>',
+  },
+  {
+    key: 'CogOutlineOutlined',
+    svg: '<svg id="mdi-cog-outline" viewBox="0 0 24 24"><path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" /></svg>',
+  },
+  {
+    key: 'CogPauseOutlined',
+    svg: '<svg id="mdi-cog-pause" viewBox="0 0 24 24"><path d="M13.53 22H10C9.75 22 9.54 21.82 9.5 21.58L9.13 18.93C8.5 18.68 7.96 18.34 7.44 17.94L4.95 18.95C4.73 19.03 4.46 18.95 4.34 18.73L2.34 15.27C2.21 15.05 2.27 14.78 2.46 14.63L4.57 12.97C4.53 12.65 4.5 12.33 4.5 12S4.53 11.34 4.57 11L2.46 9.37C2.27 9.22 2.21 8.95 2.34 8.73L4.34 5.27C4.46 5.05 4.73 4.96 4.95 5.05L7.44 6.05C7.96 5.66 8.5 5.32 9.13 5.07L9.5 2.42C9.54 2.18 9.75 2 10 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.78 8.95 21.73 9.22 21.54 9.37L19.43 11C19.47 11.34 19.5 11.67 19.5 12C19.5 12.06 19.5 12.12 19.5 12.19C19 12.07 18.5 12 18 12C17.08 12 16.22 12.21 15.44 12.58C15.47 12.39 15.5 12.2 15.5 12C15.5 10.07 13.93 8.5 12 8.5S8.5 10.07 8.5 12 10.07 15.5 12 15.5C12.2 15.5 12.39 15.47 12.58 15.44C12.21 16.22 12 17.08 12 18C12 19.54 12.58 20.94 13.53 22M19 15H21V21H19M15 15H17V21H15V15Z" /></svg>',
+  },
+  {
+    key: 'CogPauseOutlineOutlined',
+    svg: '<svg id="mdi-cog-pause-outline" viewBox="0 0 24 24"><path d="M13.54 22H10C9.75 22 9.54 21.82 9.5 21.58L9.13 18.93C8.5 18.68 7.96 18.34 7.44 17.94L4.95 18.95C4.73 19.03 4.46 18.95 4.34 18.73L2.34 15.27C2.21 15.05 2.27 14.78 2.46 14.63L4.57 12.97L4.5 12L4.57 11L2.46 9.37C2.27 9.22 2.21 8.95 2.34 8.73L4.34 5.27C4.46 5.05 4.73 4.96 4.95 5.05L7.44 6.05C7.96 5.66 8.5 5.32 9.13 5.07L9.5 2.42C9.54 2.18 9.75 2 10 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.5 12.19C19 12.07 18.5 12 18 12C17.83 12 17.66 12 17.5 12.03C17.5 11.41 17.4 10.79 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25L10.88 6.61C9.68 6.86 8.62 7.5 7.85 8.39L5.44 7.35L4.69 8.65L6.8 10.2C6.4 11.37 6.4 12.64 6.8 13.8L4.68 15.36L5.43 16.66L7.86 15.62C8.63 16.5 9.68 17.14 10.87 17.38L11.24 20H12.35C12.61 20.75 13 21.42 13.54 22M12.36 15.96C12.24 16 12.12 16 12 16C9.79 16 8 14.21 8 12S9.79 8 12 8 16 9.79 16 12C16 12.12 16 12.24 15.96 12.36C14.29 12.97 12.97 14.29 12.36 15.96M14 12C14 10.9 13.11 10 12 10S10 10.9 10 12 10.9 14 12 14 14 13.11 14 12M19 15H21V21H19M15 15H17V21H15V15Z" /></svg>',
+  },
+  {
+    key: 'CogPlayOutlined',
+    svg: '<svg id="mdi-cog-play" viewBox="0 0 24 24"><path d="M13.53 22H10C9.75 22 9.54 21.82 9.5 21.58L9.13 18.93C8.5 18.68 7.96 18.34 7.44 17.94L4.95 18.95C4.73 19.03 4.46 18.95 4.34 18.73L2.34 15.27C2.21 15.05 2.27 14.78 2.46 14.63L4.57 12.97C4.53 12.65 4.5 12.33 4.5 12S4.53 11.34 4.57 11L2.46 9.37C2.27 9.22 2.21 8.95 2.34 8.73L4.34 5.27C4.46 5.05 4.73 4.96 4.95 5.05L7.44 6.05C7.96 5.66 8.5 5.32 9.13 5.07L9.5 2.42C9.54 2.18 9.75 2 10 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.78 8.95 21.73 9.22 21.54 9.37L19.43 11C19.47 11.34 19.5 11.67 19.5 12V12.19C19 12.07 18.5 12 18 12C17.08 12 16.22 12.21 15.44 12.58C15.47 12.39 15.5 12.2 15.5 12C15.5 10.07 13.93 8.5 12 8.5S8.5 10.07 8.5 12 10.07 15.5 12 15.5C12.2 15.5 12.39 15.47 12.58 15.44C12.21 16.22 12 17.08 12 18C12 19.54 12.58 20.94 13.53 22M16 15V21L21 18L16 15Z" /></svg>',
+  },
+  {
+    key: 'CogPlayOutlineOutlined',
+    svg: '<svg id="mdi-cog-play-outline" viewBox="0 0 24 24"><path d="M13.54 22H10C9.75 22 9.54 21.82 9.5 21.58L9.13 18.93C8.5 18.68 7.96 18.34 7.44 17.94L4.95 18.95C4.73 19.03 4.46 18.95 4.34 18.73L2.34 15.27C2.21 15.05 2.27 14.78 2.46 14.63L4.57 12.97L4.5 12L4.57 11L2.46 9.37C2.27 9.22 2.21 8.95 2.34 8.73L4.34 5.27C4.46 5.05 4.73 4.96 4.95 5.05L7.44 6.05C7.96 5.66 8.5 5.32 9.13 5.07L9.5 2.42C9.54 2.18 9.75 2 10 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12V12.19C19 12.07 18.5 12 18 12C17.83 12 17.66 12 17.5 12.03C17.5 11.41 17.4 10.79 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25L10.88 6.61C9.68 6.86 8.62 7.5 7.85 8.39L5.44 7.35L4.69 8.65L6.8 10.2C6.4 11.37 6.4 12.64 6.8 13.8L4.68 15.36L5.43 16.66L7.86 15.62C8.63 16.5 9.68 17.14 10.87 17.38L11.24 20H12.35C12.61 20.75 13 21.42 13.54 22M15.96 12.36C16 12.24 16 12.12 16 12C16 9.79 14.21 8 12 8S8 9.79 8 12 9.79 16 12 16C12.12 16 12.24 16 12.36 15.96C12.97 14.29 14.29 12.97 15.96 12.36M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14M16 15V21L21 18L16 15Z" /></svg>',
+  },
+  {
+    key: 'CogRefreshOutlined',
+    svg: '<svg id="mdi-cog-refresh" viewBox="0 0 24 24"><path d="M18 14.5C19.1 14.5 20.1 14.9 20.8 15.7L22 14.5V18.5H18L19.8 16.7C19.3 16.3 18.7 16 18 16C16.6 16 15.5 17.1 15.5 18.5S16.6 21 18 21C18.8 21 19.5 20.6 20 20H21.7C21.1 21.5 19.7 22.5 18 22.5C15.8 22.5 14 20.7 14 18.5S15.8 14.5 18 14.5M11.5 18.5C11.5 17.4 11.8 16.4 12.2 15.5H12C10.1 15.5 8.5 13.9 8.5 12S10.1 8.5 12 8.5 15.5 10.1 15.5 12C15.5 12.2 15.5 12.4 15.4 12.5C16.2 12.2 17 12 18 12C18.5 12 19 12.1 19.5 12.2V12C19.5 11.7 19.5 11.3 19.4 11L21.5 9.4C21.7 9.2 21.7 9 21.6 8.8L19.6 5.3C19.5 5 19.3 5 19 5L16.5 6C16 5.6 15.4 5.3 14.8 5L14.4 2.3C14.5 2.2 14.2 2 14 2H10C9.8 2 9.5 2.2 9.5 2.4L9.1 5.1C8.5 5.3 8 5.7 7.4 6L5 5C4.7 5 4.5 5 4.3 5.3L2.3 8.8C2.2 9 2.3 9.2 2.5 9.4L4.6 11C4.6 11.3 4.5 11.7 4.5 12S4.5 12.7 4.6 13L2.5 14.7C2.3 14.9 2.3 15.1 2.4 15.3L4.4 18.8C4.5 19 4.7 19 5 19L7.5 18C8 18.4 8.6 18.7 9.2 19L9.6 21.7C9.6 21.9 9.8 22.1 10.1 22.1H12.6C11.9 21 11.5 19.8 11.5 18.5Z" /></svg>',
+  },
+  {
+    key: 'CogRefreshOutlineOutlined',
+    svg: '<svg id="mdi-cog-refresh-outline" viewBox="0 0 24 24"><path d="M18 14.5C19.1 14.5 20.1 14.9 20.8 15.7L22 14.5V18.5H18L19.8 16.7C19.3 16.3 18.7 16 18 16C16.6 16 15.5 17.1 15.5 18.5S16.6 21 18 21C18.8 21 19.5 20.6 20 20H21.7C21.1 21.5 19.7 22.5 18 22.5C15.8 22.5 14 20.7 14 18.5S15.8 14.5 18 14.5M11.7 20H11.3L10.9 17.4C9.7 17.2 8.7 16.5 7.9 15.6L5.5 16.6L4.7 15.3L6.8 13.7C6.4 12.5 6.4 11.3 6.8 10.1L4.7 8.7L5.5 7.4L7.9 8.4C8.7 7.5 9.7 6.9 10.9 6.6L11.2 4H12.7L13.1 6.6C14.3 6.8 15.4 7.5 16.1 8.4L18.5 7.4L19.3 8.7L17.2 10.2C17.4 10.8 17.5 11.4 17.5 12H18C18.5 12 19 12.1 19.5 12.2V12L19.4 11L21.5 9.4C21.7 9.2 21.7 9 21.6 8.8L19.6 5.3C19.5 5 19.3 5 19 5L16.5 6C16 5.6 15.4 5.3 14.8 5L14.4 2.3C14.5 2.2 14.2 2 14 2H10C9.8 2 9.5 2.2 9.5 2.4L9.1 5.1C8.5 5.3 8 5.7 7.4 6L5 5C4.7 5 4.5 5 4.3 5.3L2.3 8.8C2.2 9 2.3 9.2 2.5 9.4L4.6 11L4.5 12L4.6 13L2.5 14.7C2.3 14.9 2.3 15.1 2.4 15.3L4.4 18.8C4.5 19 4.7 19 5 19L7.5 18C8 18.4 8.6 18.7 9.2 19L9.6 21.7C9.6 21.9 9.8 22.1 10.1 22.1H12.6C12.1 21.4 11.9 20.7 11.7 20M16 12.3V12C16 9.8 14.2 8 12 8S8 9.8 8 12C8 14.2 9.8 16 12 16C12.7 14.3 14.2 12.9 16 12.3M10 12C10 10.9 10.9 10 12 10S14 10.9 14 12 13.1 14 12 14 10 13.1 10 12Z" /></svg>',
+  },
+  {
+    key: 'CogSyncOutlined',
+    svg: '<svg id="mdi-cog-sync" viewBox="0 0 24 24"><path d="M11.5 18.5C11.5 17.4 11.8 16.4 12.2 15.5H12C10.1 15.5 8.5 13.9 8.5 12S10.1 8.5 12 8.5 15.5 10.1 15.5 12C15.5 12.2 15.5 12.4 15.4 12.5C16.2 12.2 17 12 18 12C18.5 12 19 12.1 19.5 12.2V12C19.5 11.7 19.5 11.3 19.4 11L21.5 9.4C21.7 9.2 21.7 9 21.6 8.8L19.6 5.3C19.5 5 19.3 5 19 5L16.5 6C16 5.6 15.4 5.3 14.8 5L14.4 2.3C14.5 2.2 14.2 2 14 2H10C9.8 2 9.5 2.2 9.5 2.4L9.1 5.1C8.5 5.3 8 5.7 7.4 6L5 5C4.7 5 4.5 5 4.3 5.3L2.3 8.8C2.2 9 2.3 9.2 2.5 9.4L4.6 11C4.6 11.3 4.5 11.7 4.5 12S4.5 12.7 4.6 13L2.5 14.7C2.3 14.9 2.3 15.1 2.4 15.3L4.4 18.8C4.5 19 4.7 19 5 19L7.5 18C8 18.4 8.6 18.7 9.2 19L9.6 21.7C9.6 21.9 9.8 22.1 10.1 22.1H12.6C11.9 21 11.5 19.8 11.5 18.5M18 14.5V13L15.8 15.2L18 17.4V16C19.4 16 20.5 17.1 20.5 18.5C20.5 18.9 20.4 19.3 20.2 19.6L21.3 20.7C22.5 18.9 22 16.4 20.2 15.2C19.6 14.7 18.8 14.5 18 14.5M18 21C16.6 21 15.5 19.9 15.5 18.5C15.5 18.1 15.6 17.7 15.8 17.4L14.7 16.3C13.5 18.1 14 20.6 15.8 21.8C16.5 22.2 17.2 22.5 18 22.5V24L20.2 21.8L18 19.5V21Z" /></svg>',
+  },
+  {
+    key: 'CogSyncOutlineOutlined',
+    svg: '<svg id="mdi-cog-sync-outline" viewBox="0 0 24 24"><path d="M11.7 20H11.3L10.9 17.4C9.7 17.2 8.7 16.5 7.9 15.6L5.5 16.6L4.7 15.3L6.8 13.7C6.4 12.5 6.4 11.3 6.8 10.1L4.7 8.7L5.5 7.4L7.9 8.4C8.7 7.5 9.7 6.9 10.9 6.6L11.2 4H12.7L13.1 6.6C14.3 6.8 15.4 7.5 16.1 8.4L18.5 7.4L19.3 8.7L17.2 10.2C17.4 10.8 17.5 11.4 17.5 12H18C18.5 12 19 12.1 19.5 12.2V12L19.4 11L21.5 9.4C21.7 9.2 21.7 9 21.6 8.8L19.6 5.3C19.5 5 19.3 5 19 5L16.5 6C16 5.6 15.4 5.3 14.8 5L14.4 2.3C14.5 2.2 14.2 2 14 2H10C9.8 2 9.5 2.2 9.5 2.4L9.1 5.1C8.5 5.3 8 5.7 7.4 6L5 5C4.7 5 4.5 5 4.3 5.3L2.3 8.8C2.2 9 2.3 9.2 2.5 9.4L4.6 11L4.5 12L4.6 13L2.5 14.7C2.3 14.9 2.3 15.1 2.4 15.3L4.4 18.8C4.5 19 4.7 19 5 19L7.5 18C8 18.4 8.6 18.7 9.2 19L9.6 21.7C9.6 21.9 9.8 22.1 10.1 22.1H12.6C12.1 21.4 11.9 20.7 11.7 20M16 12.3V12C16 9.8 14.2 8 12 8S8 9.8 8 12C8 14.2 9.8 16 12 16C12.7 14.3 14.2 12.9 16 12.3M10 12C10 10.9 10.9 10 12 10S14 10.9 14 12 13.1 14 12 14 10 13.1 10 12M18 14.5V13L15.8 15.2L18 17.4V16C19.4 16 20.5 17.1 20.5 18.5C20.5 18.9 20.4 19.3 20.2 19.6L21.3 20.7C22.5 18.9 22 16.4 20.2 15.2C19.6 14.7 18.8 14.5 18 14.5M18 21C16.6 21 15.5 19.9 15.5 18.5C15.5 18.1 15.6 17.7 15.8 17.4L14.7 16.3C13.5 18.1 14 20.6 15.8 21.8C16.5 22.2 17.2 22.5 18 22.5V24L20.2 21.8L18 19.5V21Z" /></svg>',
+  },
+  {
+    key: 'CogTransferOutlined',
+    svg: '<svg id="mdi-cog-transfer" viewBox="0 0 24 24"><path d="M14 18V16L10 19.5L14 23V21H17V18H14M22 15.5L18 12V14H15V17H18V19L22 15.5M21.66 8.73L19.66 5.27C19.54 5.05 19.28 4.96 19.05 5.05L16.56 6.05C16.05 5.64 15.5 5.31 14.87 5.05L14.5 2.42C14.46 2.18 14.25 2 14 2H10C9.75 2 9.54 2.18 9.5 2.42L9.13 5.07C8.5 5.33 7.96 5.66 7.44 6.07L5 5.05C4.77 4.96 4.5 5.05 4.39 5.27L2.39 8.73C2.26 8.94 2.31 9.22 2.5 9.37L4.57 11C4.53 11.33 4.5 11.67 4.5 12C4.5 12.33 4.53 12.67 4.57 13L2.46 14.63C2.26 14.78 2.21 15.06 2.34 15.27L4.34 18.73C4.45 19 4.74 19.11 5 19L5 19L7.5 18C7.74 18.19 8 18.37 8.26 18.53L11.77 15.53C9.84 15.4 8.38 13.73 8.5 11.8C8.65 9.87 10.32 8.41 12.25 8.55C13.69 8.64 14.92 9.62 15.35 11H19.43L21.54 9.37C21.73 9.22 21.78 8.94 21.66 8.73Z" /></svg>',
+  },
+  {
+    key: 'CogTransferOutlineOutlined',
+    svg: '<svg id="mdi-cog-transfer-outline" viewBox="0 0 24 24"><path d="M15 17V14H18V12L22 15.5L18 19V17H15M17 18V21H14V23L10 19.5L14 16V18H17M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14M21.66 8.73L19.66 5.27C19.54 5.05 19.28 4.96 19.05 5.05L16.56 6.05C16.05 5.64 15.5 5.31 14.87 5.05L14.5 2.42C14.46 2.18 14.25 2 14 2H10C9.75 2 9.54 2.18 9.5 2.42L9.13 5.07C8.5 5.33 7.96 5.66 7.44 6.07L5 5.05C4.77 4.96 4.5 5.05 4.39 5.27L2.39 8.73C2.26 8.94 2.31 9.22 2.5 9.37L4.57 11L4.5 12L4.57 13L2.46 14.63C2.26 14.78 2.21 15.06 2.34 15.27L4.34 18.73C4.45 19 4.74 19.11 5 19L5 19L7.5 18C7.74 18.19 8 18.37 8.26 18.53L9.91 17.13C9.14 16.8 8.46 16.31 7.91 15.68L5.5 16.68L4.73 15.38L6.8 13.8C6.4 12.63 6.4 11.37 6.8 10.2L4.69 8.65L5.44 7.35L7.85 8.35C8.63 7.45 9.68 6.82 10.85 6.57L11.25 4H12.75L13.12 6.62C14.29 6.86 15.34 7.5 16.12 8.39L18.53 7.39L19.28 8.69L17.2 10.2C17.29 10.46 17.36 10.73 17.4 11H19.4L21.5 9.37C21.72 9.23 21.78 8.95 21.66 8.73M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14M12 8C9.79 8 8 9.8 8 12C8 13.91 9.35 15.54 11.21 15.92L16 11.86C15.93 9.71 14.16 8 12 8M12 14C10.9 14 10 13.11 10 12S10.9 10 12 10 14 10.9 14 12 13.11 14 12 14Z" /></svg>',
+  },
+  {
+    key: 'CogsOutlined',
+    svg: '<svg id="mdi-cogs" viewBox="0 0 24 24"><path d="M15.9,18.45C17.25,18.45 18.35,17.35 18.35,16C18.35,14.65 17.25,13.55 15.9,13.55C14.54,13.55 13.45,14.65 13.45,16C13.45,17.35 14.54,18.45 15.9,18.45M21.1,16.68L22.58,17.84C22.71,17.95 22.75,18.13 22.66,18.29L21.26,20.71C21.17,20.86 21,20.92 20.83,20.86L19.09,20.16C18.73,20.44 18.33,20.67 17.91,20.85L17.64,22.7C17.62,22.87 17.47,23 17.3,23H14.5C14.32,23 14.18,22.87 14.15,22.7L13.89,20.85C13.46,20.67 13.07,20.44 12.71,20.16L10.96,20.86C10.81,20.92 10.62,20.86 10.54,20.71L9.14,18.29C9.05,18.13 9.09,17.95 9.22,17.84L10.7,16.68L10.65,16L10.7,15.31L9.22,14.16C9.09,14.05 9.05,13.86 9.14,13.71L10.54,11.29C10.62,11.13 10.81,11.07 10.96,11.13L12.71,11.84C13.07,11.56 13.46,11.32 13.89,11.15L14.15,9.29C14.18,9.13 14.32,9 14.5,9H17.3C17.47,9 17.62,9.13 17.64,9.29L17.91,11.15C18.33,11.32 18.73,11.56 19.09,11.84L20.83,11.13C21,11.07 21.17,11.13 21.26,11.29L22.66,13.71C22.75,13.86 22.71,14.05 22.58,14.16L21.1,15.31L21.15,16L21.1,16.68M6.69,8.07C7.56,8.07 8.26,7.37 8.26,6.5C8.26,5.63 7.56,4.92 6.69,4.92A1.58,1.58 0 0,0 5.11,6.5C5.11,7.37 5.82,8.07 6.69,8.07M10.03,6.94L11,7.68C11.07,7.75 11.09,7.87 11.03,7.97L10.13,9.53C10.08,9.63 9.96,9.67 9.86,9.63L8.74,9.18L8,9.62L7.81,10.81C7.79,10.92 7.7,11 7.59,11H5.79C5.67,11 5.58,10.92 5.56,10.81L5.4,9.62L4.64,9.18L3.5,9.63C3.41,9.67 3.3,9.63 3.24,9.53L2.34,7.97C2.28,7.87 2.31,7.75 2.39,7.68L3.34,6.94L3.31,6.5L3.34,6.06L2.39,5.32C2.31,5.25 2.28,5.13 2.34,5.03L3.24,3.47C3.3,3.37 3.41,3.33 3.5,3.37L4.63,3.82L5.4,3.38L5.56,2.19C5.58,2.08 5.67,2 5.79,2H7.59C7.7,2 7.79,2.08 7.81,2.19L8,3.38L8.74,3.82L9.86,3.37C9.96,3.33 10.08,3.37 10.13,3.47L11.03,5.03C11.09,5.13 11.07,5.25 11,5.32L10.03,6.06L10.06,6.5L10.03,6.94Z" /></svg>',
+  },
+  {
+    key: 'ConnectionOutlined',
+    svg: '<svg id="mdi-connection" viewBox="0 0 24 24"><path d="M21.4 7.5C22.2 8.3 22.2 9.6 21.4 10.3L18.6 13.1L10.8 5.3L13.6 2.5C14.4 1.7 15.7 1.7 16.4 2.5L18.2 4.3L21.2 1.3L22.6 2.7L19.6 5.7L21.4 7.5M15.6 13.3L14.2 11.9L11.4 14.7L9.3 12.6L12.1 9.8L10.7 8.4L7.9 11.2L6.4 9.8L3.6 12.6C2.8 13.4 2.8 14.7 3.6 15.4L5.4 17.2L1.4 21.2L2.8 22.6L6.8 18.6L8.6 20.4C9.4 21.2 10.7 21.2 11.4 20.4L14.2 17.6L12.8 16.2L15.6 13.3Z" /></svg>',
+  },
+  {
+    key: 'ConsoleNetworkOutlined',
+    svg: '<svg id="mdi-console-network" viewBox="0 0 24 24"><path d="M17,3A2,2 0 0,1 19,5V15A2,2 0 0,1 17,17H13V19H14A1,1 0 0,1 15,20H22V22H15A1,1 0 0,1 14,23H10A1,1 0 0,1 9,22H2V20H9A1,1 0 0,1 10,19H11V17H7A2,2 0 0,1 5,15V5A2,2 0 0,1 7,3H17M7,7L11,11L7,15H9.85L13.13,11.72C13.5,11.33 13.5,10.7 13.13,10.3L9.83,7H7M17,13H14V15H17V13Z" /></svg>',
+  },
+  {
+    key: 'ConsoleNetworkOutlineOutlined',
+    svg: '<svg id="mdi-console-network-outline" viewBox="0 0 24 24"><path d="M15,20A1,1 0 0,0 14,19H13V17H17A2,2 0 0,0 19,15V5A2,2 0 0,0 17,3H7A2,2 0 0,0 5,5V15A2,2 0 0,0 7,17H11V19H10A1,1 0 0,0 9,20H2V22H9A1,1 0 0,0 10,23H14A1,1 0 0,0 15,22H22V20H15M7,15V5H17V15H7M8,6.89L11.56,10.45L8,14H10.53L13.45,11.08C13.78,10.74 13.78,10.18 13.45,9.82L10.5,6.89H8M16,12.22H13.33V14H16V12.22Z" /></svg>',
+  },
+  {
+    key: 'ContactlessPaymentOutlined',
+    svg: '<svg id="mdi-contactless-payment" viewBox="0 0 24 24"><path d="M16.79,23C16.37,22.83 16.07,22.45 16,22C15.95,21.74 16,21.56 16.4,20.84C17.9,18.14 18.67,15.09 18.63,12C18.67,9 17.94,6.07 16.5,3.44C16.29,3 16.1,2.58 15.94,2.13C16,1.75 16.19,1.4 16.5,1.19C16.95,0.95 17.5,1 17.91,1.28C18.19,1.64 18.43,2 18.63,2.42C19.71,4.5 20.44,6.7 20.8,9C21.03,10.81 21.06,12.65 20.89,14.47C20.58,16.81 19.89,19.07 18.83,21.18C18.19,22.46 17.83,23 17.45,23C17.37,23 17.28,23 17.2,23C17.06,23 16.93,23 16.79,23V23M12.43,20.79C11.86,20.63 11.5,20.05 11.62,19.47C11.62,19.35 11.93,18.8 12.21,18.24C13.39,15.97 13.9,13.41 13.67,10.86C13.53,9.03 13,7.25 12.13,5.64C11.5,4.38 11.46,4.18 11.83,3.64C12.27,3.15 13,3.08 13.54,3.5C14.26,4.56 14.83,5.72 15.25,6.94C16.53,10.73 16.33,14.86 14.69,18.5C13.85,20.39 13.26,21 12.43,20.74V20.79M7.93,18.56C7.57,18.4 7.3,18.08 7.2,17.7C7.2,17.5 7.2,17.24 7.65,16.44C9.14,13.74 9.14,10.46 7.65,7.76C7,6.5 7,6.24 7.53,5.76C7.72,5.54 8,5.43 8.3,5.47C8.94,5.47 9.3,5.78 9.84,6.91C10.69,8.47 11.13,10.22 11.12,12C11.16,13.81 10.72,15.61 9.85,17.2C9.31,18.25 9.04,18.5 8.5,18.59C8.31,18.61 8.11,18.59 7.93,18.5V18.56M3.72,16.43C3.39,16.27 3.13,16 3,15.65C2.9,15.3 3,15 3.4,14.36C3.9,13.68 4.14,12.84 4.09,12C4.16,11.15 3.93,10.31 3.44,9.61C3.27,9.36 3.13,9.09 3,8.82C2.89,8.19 3.31,7.59 4,7.47C4.54,7.37 4.92,7.6 5.42,8.36C6.87,10.57 6.87,13.42 5.42,15.63C4.91,16.4 4.33,16.63 3.73,16.43H3.72Z" /></svg>',
+  },
+  {
+    key: 'ContactlessPaymentCircleOutlined',
+    svg: '<svg id="mdi-contactless-payment-circle" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M8.43 14.44L7.07 13.83C7.35 13.27 7.5 12.67 7.5 12.05C7.5 11.39 7.35 10.76 7.07 10.17L8.43 9.56C8.81 10.37 9 11.2 9 12.05C9 12.8 8.81 13.6 8.43 14.44M11.53 15.94L10.22 15.29C10.75 14.16 11 13 11 11.86C11 10.73 10.75 9.69 10.22 8.71L11.53 7.96C12.19 9.12 12.5 10.42 12.5 11.86C12.5 13.33 12.19 14.69 11.53 15.94M14.68 17.35L13.31 16.65C14.1 15.11 14.5 13.57 14.5 12S14.1 8.87 13.31 7.31L14.68 6.65C15.55 8.43 16 10.22 16 12C16 13.82 15.55 15.6 14.68 17.35Z" /></svg>',
+  },
+  {
+    key: 'ContactlessPaymentCircleOutlineOutlined',
+    svg: '<svg id="mdi-contactless-payment-circle-outline" viewBox="0 0 24 24"><path d="M12 4C16.41 4 20 7.59 20 12S16.41 20 12 20 4 16.41 4 12 7.59 4 12 4M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M8.43 14.44L7.07 13.83C7.35 13.27 7.5 12.67 7.5 12.05C7.5 11.39 7.35 10.76 7.07 10.17L8.43 9.56C8.81 10.37 9 11.2 9 12.05C9 12.8 8.81 13.6 8.43 14.44M11.53 15.94L10.22 15.29C10.75 14.16 11 13 11 11.86C11 10.73 10.75 9.69 10.22 8.71L11.53 7.96C12.19 9.12 12.5 10.42 12.5 11.86C12.5 13.33 12.19 14.69 11.53 15.94M14.68 17.35L13.31 16.65C14.1 15.11 14.5 13.57 14.5 12S14.1 8.87 13.31 7.31L14.68 6.65C15.55 8.43 16 10.22 16 12C16 13.82 15.55 15.6 14.68 17.35Z" /></svg>',
+  },
+  {
+    key: 'CoolantTemperatureOutlined',
+    svg: '<svg id="mdi-coolant-temperature" viewBox="0 0 24 24"><path d="M11.5,1A1.5,1.5 0 0,0 10,2.5V14.5C9.37,14.97 9,15.71 9,16.5A2.5,2.5 0 0,0 11.5,19A2.5,2.5 0 0,0 14,16.5C14,15.71 13.63,15 13,14.5V13H17V11H13V9H17V7H13V5H17V3H13V2.5A1.5,1.5 0 0,0 11.5,1M0,15V17C0.67,17 0.79,17.21 1.29,17.71C1.79,18.21 2.67,19 4,19C5.33,19 6.21,18.21 6.71,17.71C6.82,17.59 6.91,17.5 7,17.41V15.16C6.21,15.42 5.65,15.93 5.29,16.29C4.79,16.79 4.67,17 4,17C3.33,17 3.21,16.79 2.71,16.29C2.21,15.79 1.33,15 0,15M16,15V17C16.67,17 16.79,17.21 17.29,17.71C17.79,18.21 18.67,19 20,19C21.33,19 22.21,18.21 22.71,17.71C23.21,17.21 23.33,17 24,17V15C22.67,15 21.79,15.79 21.29,16.29C20.79,16.79 20.67,17 20,17C19.33,17 19.21,16.79 18.71,16.29C18.21,15.79 17.33,15 16,15M8,20C6.67,20 5.79,20.79 5.29,21.29C4.79,21.79 4.67,22 4,22C3.33,22 3.21,21.79 2.71,21.29C2.35,20.93 1.79,20.42 1,20.16V22.41C1.09,22.5 1.18,22.59 1.29,22.71C1.79,23.21 2.67,24 4,24C5.33,24 6.21,23.21 6.71,22.71C7.21,22.21 7.33,22 8,22C8.67,22 8.79,22.21 9.29,22.71C9.73,23.14 10.44,23.8 11.5,23.96C11.66,24 11.83,24 12,24C13.33,24 14.21,23.21 14.71,22.71C15.21,22.21 15.33,22 16,22C16.67,22 16.79,22.21 17.29,22.71C17.79,23.21 18.67,24 20,24C21.33,24 22.21,23.21 22.71,22.71C22.82,22.59 22.91,22.5 23,22.41V20.16C22.21,20.42 21.65,20.93 21.29,21.29C20.79,21.79 20.67,22 20,22C19.33,22 19.21,21.79 18.71,21.29C18.21,20.79 17.33,20 16,20C14.67,20 13.79,20.79 13.29,21.29C12.79,21.79 12.67,22 12,22C11.78,22 11.63,21.97 11.5,21.92C11.22,21.82 11.05,21.63 10.71,21.29C10.21,20.79 9.33,20 8,20Z" /></svg>',
+  },
+  {
+    key: 'Cpu32BitOutlined',
+    svg: '<svg id="mdi-cpu-32-bit" viewBox="0 0 24 24"><path d="M9,3V5H7A2,2 0 0,0 5,7V9H3V11H5V13H3V15H5V17A2,2 0 0,0 7,19H9V21H11V19H13V21H15V19H17A2,2 0 0,0 19,17V15H21V13H19V11H21V9H19V7A2,2 0 0,0 17,5H15V3H13V5H11V3M7,9H10.5A1,1 0 0,1 11.5,10V14A1,1 0 0,1 10.5,15H7V13.5H10V12.75H8.5V11.25H10V10.5H7M12.5,9H16A1,1 0 0,1 17,10V11.75A1,1 0 0,1 16,12.75H14V13.5H17V15H12.5V12.25A1,1 0 0,1 13.5,11.25H15.5V10.5H12.5" /></svg>',
+  },
+  {
+    key: 'Cpu64BitOutlined',
+    svg: '<svg id="mdi-cpu-64-bit" viewBox="0 0 24 24"><path d="M9,3V5H7A2,2 0 0,0 5,7V9H3V11H5V13H3V15H5V17A2,2 0 0,0 7,19H9V21H11V19H13V21H15V19H17A2,2 0 0,0 19,17V15H21V13H19V11H21V9H19V7A2,2 0 0,0 17,5H15V3H13V5H11V3M8,9H11.5V10.5H8.5V11.25H10.5A1,1 0 0,1 11.5,12.25V14A1,1 0 0,1 10.5,15H8A1,1 0 0,1 7,14V10A1,1 0 0,1 8,9M12.5,9H14V11H15.5V9H17V15H15.5V12.5H12.5M8.5,12.75V13.5H10V12.75" /></svg>',
+  },
+  {
+    key: 'CubeOutlineOutlined',
+    svg: '<svg id="mdi-cube-outline" viewBox="0 0 24 24"><path d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L6.04,7.5L12,10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z" /></svg>',
+  },
+  {
+    key: 'CurtainsOutlined',
+    svg: '<svg id="mdi-curtains" viewBox="0 0 24 24"><path d="M23 3H1V1H23V3M2 22H6C6 19 4 17 4 17C10 13 11 4 11 4H2V22M22 4H13C13 4 14 13 20 17C20 17 18 19 18 22H22V4Z" /></svg>',
+  },
+  {
+    key: 'CurtainsClosedOutlined',
+    svg: '<svg id="mdi-curtains-closed" viewBox="0 0 24 24"><path d="M23 3H1V1H23V3M2 22H11V4H2V22M22 4H13V22H22V4Z" /></svg>',
+  },
+  {
+    key: 'DeskphoneOutlined',
+    svg: '<svg id="mdi-deskphone" viewBox="0 0 24 24"><path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M15,5V19H19V5H15M5,5V9H13V5H5M5,11V13H7V11H5M8,11V13H10V11H8M11,11V13H13V11H11M5,14V16H7V14H5M8,14V16H10V14H8M11,14V16H13V14H11M11,17V19H13V17H11M8,17V19H10V17H8M5,17V19H7V17H5Z" /></svg>',
+  },
+  {
+    key: 'DesktopClassicOutlined',
+    svg: '<svg id="mdi-desktop-classic" viewBox="0 0 24 24"><path d="M6,2C4.89,2 4,2.89 4,4V12C4,13.11 4.89,14 6,14H18C19.11,14 20,13.11 20,12V4C20,2.89 19.11,2 18,2H6M6,4H18V12H6V4M4,15C2.89,15 2,15.89 2,17V20C2,21.11 2.89,22 4,22H20C21.11,22 22,21.11 22,20V17C22,15.89 21.11,15 20,15H4M8,17H20V20H8V17M9,17.75V19.25H13V17.75H9M15,17.75V19.25H19V17.75H15Z" /></svg>',
+  },
+  {
+    key: 'DesktopTowerOutlined',
+    svg: '<svg id="mdi-desktop-tower" viewBox="0 0 24 24"><path d="M8,2H16A2,2 0 0,1 18,4V20A2,2 0 0,1 16,22H8A2,2 0 0,1 6,20V4A2,2 0 0,1 8,2M8,4V6H16V4H8M16,8H8V10H16V8M16,18H14V20H16V18Z" /></svg>',
+  },
+  {
+    key: 'DesktopTowerMonitorOutlined',
+    svg: '<svg id="mdi-desktop-tower-monitor" viewBox="0 0 24 24"><path d="M22,18H17A1,1 0 0,1 16,17V7A1,1 0 0,1 17,6H22A1,1 0 0,1 23,7V17A1,1 0 0,1 22,18M22,8H17V9H22V8M22,10H17V11H22V10M9,15V17H10V18H5V17H6V15H2A1,1 0 0,1 1,14V7A1,1 0 0,1 2,6H13A1,1 0 0,1 14,7V14A1,1 0 0,1 13,15H9M12,8H3V13H12V8Z" /></svg>',
+  },
+  {
+    key: 'DeveloperBoardOutlined',
+    svg: '<svg id="mdi-developer-board" viewBox="0 0 24 24"><path d="M22,9V7H20V5A2,2 0 0,0 18,3H4A2,2 0 0,0 2,5V19A2,2 0 0,0 4,21H18A2,2 0 0,0 20,19V17H22V15H20V13H22V11H20V9H22M18,19H4V5H18V19M6,13H11V17H6V13M12,7H16V10H12V7M6,7H11V12H6V7M12,11H16V17H12V11Z" /></svg>',
+  },
+  {
+    key: 'DevicesOutlined',
+    svg: '<svg id="mdi-devices" viewBox="0 0 24 24"><path d="M3 6H21V4H3C1.9 4 1 4.9 1 6V18C1 19.1 1.9 20 3 20H7V18H3V6M13 12H9V13.78C8.39 14.33 8 15.11 8 16C8 16.89 8.39 17.67 9 18.22V20H13V18.22C13.61 17.67 14 16.88 14 16S13.61 14.33 13 13.78V12M11 17.5C10.17 17.5 9.5 16.83 9.5 16S10.17 14.5 11 14.5 12.5 15.17 12.5 16 11.83 17.5 11 17.5M22 8H16C15.5 8 15 8.5 15 9V19C15 19.5 15.5 20 16 20H22C22.5 20 23 19.5 23 19V9C23 8.5 22.5 8 22 8M21 18H17V10H21V18Z" /></svg>',
+  },
+  {
+    key: 'DharmachakraOutlined',
+    svg: '<svg id="mdi-dharmachakra" viewBox="0 0 24 24"><path d="M11,2V3C9.27,3.2 7.69,3.9 6.4,4.94L5.64,4.18L4.22,5.6L5,6.35C3.9,7.68 3.21,9.3 3,11H2V13H3C3.21,14.68 3.9,16.26 5,17.56L4.22,18.32L5.64,19.74L6.39,19C7.71,20.07 9.3,20.77 11,21V22H13V21C14.69,20.77 16.29,20.07 17.6,19L18.36,19.74L19.78,18.32L19,17.57C20.1,16.27 20.79,14.68 21,13H22V11H21C20.79,9.3 20.1,7.69 19,6.36L19.78,5.6L18.36,4.18L17.61,4.94C16.29,3.87 14.69,3.2 13,3V2H11M11,5V8L10,8.5L7.81,6.35C8.72,5.67 9.81,5.17 11,5M13,5C14.16,5.18 15.26,5.64 16.2,6.35L14,8.5L13,8V5M6.4,7.76L8.5,10L8,11H5C5.16,9.84 5.7,8.7 6.39,7.75L6.4,7.76M17.6,7.76C18.33,8.71 18.81,9.82 19,11H16L15.5,10L17.61,7.76H17.6M12,10C13.12,10 14,10.88 14,12C14,13.12 13.12,14 12,14C10.88,14 10,13.12 10,12C10,10.88 10.88,10 12,10M5,13H8L8.57,14L6.39,16.15C5.67,15.24 5.19,14.16 5,13V13M16,13H19C18.81,14.15 18.33,15.24 17.61,16.16L15.5,14L16,13M10,15.5L11,16V19C9.83,18.8 8.73,18.31 7.8,17.57L10,15.5M14,15.5L16.19,17.57C15.28,18.25 14.19,18.83 13,19V16L14,15.5Z" /></svg>',
+  },
+  {
+    key: 'DishwasherOutlined',
+    svg: '<svg id="mdi-dishwasher" viewBox="0 0 24 24"><path d="M18,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V4A2,2 0 0,0 18,2M10,4A1,1 0 0,1 11,5A1,1 0 0,1 10,6A1,1 0 0,1 9,5A1,1 0 0,1 10,4M7,4A1,1 0 0,1 8,5A1,1 0 0,1 7,6A1,1 0 0,1 6,5A1,1 0 0,1 7,4M18,20H6V8H18V20M14.67,15.33C14.69,16.03 14.41,16.71 13.91,17.21C12.86,18.26 11.15,18.27 10.09,17.21C9.59,16.71 9.31,16.03 9.33,15.33C9.4,14.62 9.63,13.94 10,13.33C10.37,12.5 10.81,11.73 11.33,11L12,10C13.79,12.59 14.67,14.36 14.67,15.33" /></svg>',
+  },
+  {
+    key: 'DishwasherAlertOutlined',
+    svg: '<svg id="mdi-dishwasher-alert" viewBox="0 0 24 24"><path d="M16 2H4C2.9 2 2 2.9 2 4V20C2 21.11 2.9 22 4 22H16C17.11 22 18 21.11 18 20V4C18 2.9 17.11 2 16 2M8 4C8.55 4 9 4.45 9 5S8.55 6 8 6 7 5.55 7 5 7.45 4 8 4M5 4C5.55 4 6 4.45 6 5S5.55 6 5 6 4 5.55 4 5 4.45 4 5 4M16 20H4V8H16V20M12.67 15.33C12.69 16.03 12.41 16.71 11.91 17.21C10.86 18.26 9.15 18.27 8.09 17.21C7.59 16.71 7.31 16.03 7.33 15.33C7.4 14.62 7.63 13.94 8 13.33C8.37 12.5 8.81 11.73 9.33 11L10 10C11.79 12.59 12.67 14.36 12.67 15.33M20 15H22V17H20V15M20 7H22V13H20V7Z" /></svg>',
+  },
+  {
+    key: 'DishwasherOffOutlined',
+    svg: '<svg id="mdi-dishwasher-off" viewBox="0 0 24 24"><path d="M22.11 21.46L2.39 1.73L1.11 3L4 5.89V20C4 21.11 4.89 22 6 22H18C18.58 22 19.1 21.75 19.46 21.35L20.84 22.73L22.11 21.46M18 20H6V8H6.11L10.5 12.37C10.31 12.69 10.15 13 10 13.33C9.63 13.94 9.4 14.62 9.33 15.33C9.31 16.03 9.59 16.71 10.09 17.21C11.15 18.27 12.86 18.26 13.91 17.21C14.16 16.97 14.35 16.68 14.5 16.36L18 19.89V20M11.2 8H18V14.8L20 16.8V4C20 2.9 19.11 2 18 2H6C5.76 2 5.54 2.05 5.33 2.13L11.2 8M10 4C10.55 4 11 4.45 11 5S10.55 6 10 6 9 5.55 9 5 9.45 4 10 4Z" /></svg>',
+  },
+  {
+    key: 'DoorOutlined',
+    svg: '<svg id="mdi-door" viewBox="0 0 24 24"><path d="M8,3C6.89,3 6,3.89 6,5V21H18V5C18,3.89 17.11,3 16,3H8M8,5H16V19H8V5M13,11V13H15V11H13Z" /></svg>',
+  },
+  {
+    key: 'DoorClosedOutlined',
+    svg: '<svg id="mdi-door-closed" viewBox="0 0 24 24"><path d="M16,11H18V13H16V11M12,3H19C20.11,3 21,3.89 21,5V19H22V21H2V19H10V5C10,3.89 10.89,3 12,3M12,5V19H19V5H12Z" /></svg>',
+  },
+  {
+    key: 'DoorClosedLockOutlined',
+    svg: '<svg id="mdi-door-closed-lock" viewBox="0 0 24 24"><path d="M16 11H18V13H16V11M12 3H19A2 2 0 0 1 21 5V19H22V21H2V19H10V5A2 2 0 0 1 12 3M12 5V19H19V5M6.2 5H2.8V4.5A1.7 1.7 0 0 1 6.2 4.5M7 5V4.5A2.5 2.5 0 0 0 2 4.5V5A1 1 0 0 0 1 6V10A1 1 0 0 0 2 11H7A1 1 0 0 0 8 10V6A1 1 0 0 0 7 5" /></svg>',
+  },
+  {
+    key: 'DoorOpenOutlined',
+    svg: '<svg id="mdi-door-open" viewBox="0 0 24 24"><path d="M12,3C10.89,3 10,3.89 10,5H3V19H2V21H22V19H21V5C21,3.89 20.11,3 19,3H12M12,5H19V19H12V5M5,11H7V13H5V11Z" /></svg>',
+  },
+  {
+    key: 'DoorSlidingOutlined',
+    svg: '<svg id="mdi-door-sliding" viewBox="0 0 24 24"><path d="M10 13H8V11H10V13M16 11H14V13H16V11M21 19V21H3V19H4V5C4 3.9 4.9 3 6 3H18C19.1 3 20 3.9 20 5V19H21M11 5H6V19H11V5M18 5H13V19H18V5Z" /></svg>',
+  },
+  {
+    key: 'DoorSlidingLockOutlined',
+    svg: '<svg id="mdi-door-sliding-lock" viewBox="0 0 24 24"><path d="M21.8 17V15.5C21.8 14.1 20.4 13 19 13S16.2 14.1 16.2 15.5V17C15.6 17 15 17.6 15 18.2V21.7C15 22.4 15.6 23 16.2 23H21.7C22.4 23 23 22.4 23 21.8V18.3C23 17.6 22.4 17 21.8 17M20.5 17H17.5V15.5C17.5 14.7 18.2 14.2 19 14.2S20.5 14.7 20.5 15.5V17M13 11H15V13H13V11M9 13H7V11H9V13M13 19H12V5H17V11.44C17.61 11.17 18.29 11 19 11V5C19 3.9 18.1 3 17 3H5C3.9 3 3 3.9 3 5V19H2V21H13V19M10 19H5V5H10V19Z" /></svg>',
+  },
+  {
+    key: 'DoorSlidingOpenOutlined',
+    svg: '<svg id="mdi-door-sliding-open" viewBox="0 0 24 24"><path d="M6 11V13H4V11H6M22 5H17V19H22V5M7 5H2L2 19H7V5M22 3C23.11 3 24 3.89 24 5V21H0V5C0 3.89 .894 3 2 3H9V19H15V3H22M20 11H18V13H20V11Z" /></svg>',
+  },
+  {
+    key: 'DoorbellOutlined',
+    svg: '<svg id="mdi-doorbell" viewBox="0 0 24 24"><path d="M12 10C10.9 10 10 10.9 10 12S10.9 14 12 14 14 13.1 14 12 13.1 10 12 10M16 2H8C6.9 2 6 2.9 6 4V20C6 21.1 6.9 22 8 22H16C17.1 22 18 21.1 18 20V4C18 2.9 17.1 2 16 2M16 20H8V4H16V20Z" /></svg>',
+  },
+  {
+    key: 'DoorbellVideoOutlined',
+    svg: '<svg id="mdi-doorbell-video" viewBox="0 0 24 24"><path d="M14 15C14 16.11 13.11 17 12 17S10 16.11 10 15 10.9 13 12 13 14 13.9 14 15M18 4V20C18 21.1 17.11 22 16 22H8C6.9 22 6 21.11 6 20V4C6 2.9 6.9 2 8 2H16C17.11 2 18 2.9 18 4M10.5 7C10.5 7.83 11.17 8.5 12 8.5S13.5 7.83 13.5 7 12.83 5.5 12 5.5 10.5 6.17 10.5 7M16 10H8V20H16V10Z" /></svg>',
+  },
+  {
+    key: 'EarHearingOutlined',
+    svg: '<svg id="mdi-ear-hearing" viewBox="0 0 24 24"><path d="M17,20C16.71,20 16.44,19.94 16.24,19.85C15.53,19.5 15.03,18.97 14.53,17.47C14,15.91 13.06,15.18 12.14,14.47C11.35,13.86 10.53,13.23 9.82,11.94C9.29,11 9,9.93 9,9C9,6.2 11.2,4 14,4C16.8,4 19,6.2 19,9H21C21,5.07 17.93,2 14,2C10.07,2 7,5.07 7,9C7,10.26 7.38,11.65 8.07,12.9C9,14.55 10.05,15.38 10.92,16.05C11.73,16.67 12.31,17.12 12.63,18.1C13.23,19.92 14,20.94 15.36,21.65C15.87,21.88 16.43,22 17,22A4,4 0 0,0 21,18H19A2,2 0 0,1 17,20M7.64,2.64L6.22,1.22C4.23,3.21 3,5.96 3,9C3,12.04 4.23,14.79 6.22,16.78L7.63,15.37C6,13.74 5,11.5 5,9C5,6.5 6,4.26 7.64,2.64M11.5,9A2.5,2.5 0 0,0 14,11.5A2.5,2.5 0 0,0 16.5,9A2.5,2.5 0 0,0 14,6.5A2.5,2.5 0 0,0 11.5,9Z" /></svg>',
+  },
+  {
+    key: 'EarHearingOffOutlined',
+    svg: '<svg id="mdi-ear-hearing-off" viewBox="0 0 24 24"><path d="M1,4.27L2.28,3L20,20.72L18.73,22L12.91,16.18C12.19,16.74 11.67,17.19 11.37,18.1C10.77,19.92 10,20.94 8.64,21.65C8.13,21.88 7.57,22 7,22A4,4 0 0,1 3,18H5A2,2 0 0,0 7,20C7.29,20 7.56,19.94 7.76,19.85C8.47,19.5 8.97,18.97 9.47,17.47C9.91,16.12 10.69,15.39 11.5,14.76L5.04,8.31C5,8.54 5,8.77 5,9H3C3,8.17 3.14,7.39 3.39,6.66L1,4.27M14.18,11.94C14.71,11 15,9.93 15,9C15,6.2 12.8,4 10,4C8.81,4 7.74,4.39 6.89,5.06L5.46,3.63C6.67,2.61 8.25,2 10,2C13.93,2 17,5.07 17,9C17,10.26 16.62,11.65 15.93,12.9L15.47,13.65L14.03,12.2L14.18,11.94M16.36,2.64L17.78,1.22C19.77,3.21 21,5.96 21,9C21,11.83 19.93,14.41 18.18,16.36L16.77,14.94C18.15,13.36 19,11.28 19,9C19,6.5 18,4.26 16.36,2.64M12.5,9C12.5,9.5 12.36,9.93 12.13,10.31L8.69,6.87C9.07,6.64 9.5,6.5 10,6.5A2.5,2.5 0 0,1 12.5,9Z" /></svg>',
+  },
+  {
+    key: 'ElectricSwitchOutlined',
+    svg: '<svg id="mdi-electric-switch" viewBox="0 0 24 24"><path d="M1,11H3.17C3.58,9.83 4.69,9 6,9C6.65,9 7.25,9.21 7.74,9.56L14.44,4.87L15.58,6.5L8.89,11.2C8.96,11.45 9,11.72 9,12A3,3 0 0,1 6,15C4.69,15 3.58,14.17 3.17,13H1V11M23,11V13H20.83C20.42,14.17 19.31,15 18,15A3,3 0 0,1 15,12A3,3 0 0,1 18,9C19.31,9 20.42,9.83 20.83,11H23M6,11A1,1 0 0,0 5,12A1,1 0 0,0 6,13A1,1 0 0,0 7,12A1,1 0 0,0 6,11M18,11A1,1 0 0,0 17,12A1,1 0 0,0 18,13A1,1 0 0,0 19,12A1,1 0 0,0 18,11Z" /></svg>',
+  },
+  {
+    key: 'ElectricSwitchClosedOutlined',
+    svg: '<svg id="mdi-electric-switch-closed" viewBox="0 0 24 24"><path d="M20.83 11A3 3 0 0 0 15.18 11H8.82A3 3 0 0 0 3.17 11H1V13H3.17A3 3 0 0 0 8.82 13H15.18A3 3 0 0 0 20.83 13H23V11M6 13A1 1 0 1 1 7 12A1 1 0 0 1 6 13M18 13A1 1 0 1 1 19 12A1 1 0 0 1 18 13Z" /></svg>',
+  },
+  {
+    key: 'EngineOutlined',
+    svg: '<svg id="mdi-engine" viewBox="0 0 24 24"><path d="M7,4V6H10V8H7L5,10V13H3V10H1V18H3V15H5V18H8L10,20H18V16H20V19H23V9H20V12H18V8H12V6H15V4H7Z" /></svg>',
+  },
+  {
+    key: 'EngineOffOutlined',
+    svg: '<svg id="mdi-engine-off" viewBox="0 0 24 24"><path d="M3.78,2.5L21.5,20.22L20.23,21.5L18,19.27V20H10L8,18H5V15H3V18H1V10H3V13H5V10L6.87,8.14L2.5,3.77L3.78,2.5M20,9V12H18V8H12V6H15V4H7.82L22.82,19H23V9H20Z" /></svg>',
+  },
+  {
+    key: 'EngineOffOutlineOutlined',
+    svg: '<svg id="mdi-engine-off-outline" viewBox="0 0 24 24"><path d="M2.5,3.77L6.87,8.14L5,10V13H3V10H1V18H3V15H5V18H8L10,20H18V19.27L21.23,22.5L22.5,21.22L3.78,2.5L2.5,3.77M16,18H11L9,16H7V11L8,10H8.73L16,17.27V18M23,9V19H22.82L16,12.18V10H13.82L7.82,4H15V6H12V8H18V12H20V9H23Z" /></svg>',
+  },
+  {
+    key: 'EngineOutlineOutlined',
+    svg: '<svg id="mdi-engine-outline" viewBox="0 0 24 24"><path d="M8,10H16V18H11L9,16H7V11M7,4V6H10V8H7L5,10V13H3V10H1V18H3V15H5V18H8L10,20H18V16H20V19H23V9H20V12H18V8H12V6H15V4H7Z" /></svg>',
+  },
+  {
+    key: 'EyeOutlined',
+    svg: '<svg id="mdi-eye" viewBox="0 0 24 24"><path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" /></svg>',
+  },
+  {
+    key: 'EyeCheckOutlineOutlined',
+    svg: '<svg id="mdi-eye-check-outline" viewBox="0 0 24 24"><path d="M23.5,17L18.5,22L15,18.5L16.5,17L18.5,19L22,15.5L23.5,17M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.75,12.65 22.44,13.26 22.08,13.85C21.5,13.5 20.86,13.25 20.18,13.12L20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12C4.83,15.36 8.24,17.5 12,17.5L13.21,17.43C13.07,17.93 13,18.46 13,19V19.46L12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5Z" /></svg>',
+  },
+  {
+    key: 'EyeOffOutlined',
+    svg: '<svg id="mdi-eye-off" viewBox="0 0 24 24"><path d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" /></svg>',
+  },
+  {
+    key: 'EyeOffOutlineOutlined',
+    svg: '<svg id="mdi-eye-off-outline" viewBox="0 0 24 24"><path d="M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z" /></svg>',
+  },
+  {
+    key: 'FanOutlined',
+    svg: '<svg id="mdi-fan" viewBox="0 0 24 24"><path d="M12,11A1,1 0 0,0 11,12A1,1 0 0,0 12,13A1,1 0 0,0 13,12A1,1 0 0,0 12,11M12.5,2C17,2 17.11,5.57 14.75,6.75C13.76,7.24 13.32,8.29 13.13,9.22C13.61,9.42 14.03,9.73 14.35,10.13C18.05,8.13 22.03,8.92 22.03,12.5C22.03,17 18.46,17.1 17.28,14.73C16.78,13.74 15.72,13.3 14.79,13.11C14.59,13.59 14.28,14 13.88,14.34C15.87,18.03 15.08,22 11.5,22C7,22 6.91,18.42 9.27,17.24C10.25,16.75 10.69,15.71 10.89,14.79C10.4,14.59 9.97,14.27 9.65,13.87C5.96,15.85 2,15.07 2,11.5C2,7 5.56,6.89 6.74,9.26C7.24,10.25 8.29,10.68 9.22,10.87C9.41,10.39 9.73,9.97 10.14,9.65C8.15,5.96 8.94,2 12.5,2Z" /></svg>',
+  },
+  {
+    key: 'FanAlertOutlined',
+    svg: '<svg id="mdi-fan-alert" viewBox="0 0 24 24"><path d="M10 11C9.43 11 9 11.45 9 12S9.43 13 10 13C10.54 13 11 12.55 11 12S10.54 11 10 11M10.5 2C15 2 15.09 5.57 12.73 6.75C11.74 7.24 11.3 8.29 11.11 9.22C11.59 9.42 12 9.73 12.33 10.13C16.03 8.13 20 8.92 20 12.5C20 17 16.43 17.1 15.26 14.73C14.76 13.74 13.7 13.3 12.77 13.11C12.57 13.59 12.26 14 11.86 14.34C13.85 18.03 13.06 22 9.5 22C5 22 4.9 18.42 7.26 17.24C8.24 16.75 8.68 15.71 8.88 14.79C8.39 14.59 7.96 14.27 7.64 13.87C3.95 15.85 0 15.07 0 11.5C0 7 3.56 6.89 4.73 9.26C5.23 10.25 6.28 10.68 7.21 10.87C7.4 10.39 7.72 9.97 8.13 9.65C6.14 5.96 6.93 2 10.5 2M22 13V7H24V13H22M22 17V15H24V17H22Z" /></svg>',
+  },
+  {
+    key: 'FanAutoOutlined',
+    svg: '<svg id="mdi-fan-auto" viewBox="0 0 24 24"><path d="M12.5 2C8.93 2 8.14 5.96 10.13 9.65C9.72 9.97 9.4 10.39 9.21 10.87C8.28 10.68 7.23 10.25 6.73 9.26C5.56 6.89 2 7 2 11.5C2 15.07 5.95 15.85 9.64 13.87C9.96 14.27 10.39 14.59 10.88 14.79C10.68 15.71 10.24 16.75 9.26 17.24C6.9 18.42 7 22 11.5 22C12.31 22 13 21.78 13.5 21.41C13.19 20.67 13 19.86 13 19C13 17.59 13.5 16.3 14.3 15.28C14.17 14.97 14.03 14.65 13.86 14.34C14.26 14 14.57 13.59 14.77 13.11C15.26 13.21 15.78 13.39 16.25 13.67C17.07 13.25 18 13 19 13C20.05 13 21.03 13.27 21.89 13.74C21.95 13.37 22 12.96 22 12.5C22 8.92 18.03 8.13 14.33 10.13C14 9.73 13.59 9.42 13.11 9.22C13.3 8.29 13.74 7.24 14.73 6.75C17.09 5.57 17 2 12.5 2M12 11C12.54 11 13 11.45 13 12C13 12.55 12.54 13 12 13C11.43 13 11 12.55 11 12C11 11.45 11.43 11 12 11M18 15C16.89 15 16 15.9 16 17V23H18V21H20V23H22V17C22 15.9 21.1 15 20 15M18 17H20V19H18Z" /></svg>',
+  },
+  {
+    key: 'FanChevronDownOutlined',
+    svg: '<svg id="mdi-fan-chevron-down" viewBox="0 0 24 24"><path d="M13 19C13 17.59 13.5 16.3 14.3 15.28C14.17 14.97 14.03 14.65 13.86 14.34C14.26 14 14.57 13.59 14.77 13.11C15.26 13.21 15.78 13.39 16.25 13.67C17.07 13.25 18 13 19 13C20.05 13 21.03 13.27 21.89 13.74C21.95 13.37 22 12.96 22 12.5C22 8.92 18.03 8.13 14.33 10.13C14 9.73 13.59 9.42 13.11 9.22C13.3 8.29 13.74 7.24 14.73 6.75C17.09 5.57 17 2 12.5 2C8.93 2 8.14 5.96 10.13 9.65C9.72 9.97 9.4 10.39 9.21 10.87C8.28 10.68 7.23 10.25 6.73 9.26C5.56 6.89 2 7 2 11.5C2 15.07 5.95 15.85 9.64 13.87C9.96 14.27 10.39 14.59 10.88 14.79C10.68 15.71 10.24 16.75 9.26 17.24C6.9 18.42 7 22 11.5 22C12.31 22 13 21.78 13.5 21.41C13.19 20.67 13 19.86 13 19M12 13C11.43 13 11 12.55 11 12S11.43 11 12 11C12.54 11 13 11.45 13 12S12.54 13 12 13M19 19.17L22.17 16L23.59 17.41L19 22L14.41 17.41L15.83 16L19 19.17" /></svg>',
+  },
+  {
+    key: 'FanChevronUpOutlined',
+    svg: '<svg id="mdi-fan-chevron-up" viewBox="0 0 24 24"><path d="M13 19C13 17.59 13.5 16.3 14.3 15.28C14.17 14.97 14.03 14.65 13.86 14.34C14.26 14 14.57 13.59 14.77 13.11C15.26 13.21 15.78 13.39 16.25 13.67C17.07 13.25 18 13 19 13C20.05 13 21.03 13.27 21.89 13.74C21.95 13.37 22 12.96 22 12.5C22 8.92 18.03 8.13 14.33 10.13C14 9.73 13.59 9.42 13.11 9.22C13.3 8.29 13.74 7.24 14.73 6.75C17.09 5.57 17 2 12.5 2C8.93 2 8.14 5.96 10.13 9.65C9.72 9.97 9.4 10.39 9.21 10.87C8.28 10.68 7.23 10.25 6.73 9.26C5.56 6.89 2 7 2 11.5C2 15.07 5.95 15.85 9.64 13.87C9.96 14.27 10.39 14.59 10.88 14.79C10.68 15.71 10.24 16.75 9.26 17.24C6.9 18.42 7 22 11.5 22C12.31 22 13 21.78 13.5 21.41C13.19 20.67 13 19.86 13 19M12 13C11.43 13 11 12.55 11 12S11.43 11 12 11C12.54 11 13 11.45 13 12S12.54 13 12 13M19 17.83L15.83 21L14.41 19.59L19 15L23.59 19.59L22.17 21L19 17.83" /></svg>',
+  },
+  {
+    key: 'FanMinusOutlined',
+    svg: '<svg id="mdi-fan-minus" viewBox="0 0 24 24"><path d="M13 19C13 17.59 13.5 16.3 14.3 15.28C14.17 14.97 14.03 14.65 13.86 14.34C14.26 14 14.57 13.59 14.77 13.11C15.26 13.21 15.78 13.39 16.25 13.67C17.07 13.25 18 13 19 13C20.05 13 21.03 13.27 21.89 13.74C21.95 13.37 22 12.96 22 12.5C22 8.92 18.03 8.13 14.33 10.13C14 9.73 13.59 9.42 13.11 9.22C13.3 8.29 13.74 7.24 14.73 6.75C17.09 5.57 17 2 12.5 2C8.93 2 8.14 5.96 10.13 9.65C9.72 9.97 9.4 10.39 9.21 10.87C8.28 10.68 7.23 10.25 6.73 9.26C5.56 6.89 2 7 2 11.5C2 15.07 5.95 15.85 9.64 13.87C9.96 14.27 10.39 14.59 10.88 14.79C10.68 15.71 10.24 16.75 9.26 17.24C6.9 18.42 7 22 11.5 22C12.31 22 13 21.78 13.5 21.41C13.19 20.67 13 19.86 13 19M12 13C11.43 13 11 12.55 11 12S11.43 11 12 11C12.54 11 13 11.45 13 12S12.54 13 12 13M23 18V20H15V18H23Z" /></svg>',
+  },
+  {
+    key: 'FanOffOutlined',
+    svg: '<svg id="mdi-fan-off" viewBox="0 0 24 24"><path d="M12.5,2C9.64,2 8.57,4.55 9.29,7.47L15,13.16C15.87,13.37 16.81,13.81 17.28,14.73C18.46,17.1 22.03,17 22.03,12.5C22.03,8.92 18.05,8.13 14.35,10.13C14.03,9.73 13.61,9.42 13.13,9.22C13.32,8.29 13.76,7.24 14.75,6.75C17.11,5.57 17,2 12.5,2M3.28,4L2,5.27L4.47,7.73C3.22,7.74 2,8.87 2,11.5C2,15.07 5.96,15.85 9.65,13.87C9.97,14.27 10.4,14.59 10.89,14.79C10.69,15.71 10.25,16.75 9.27,17.24C6.91,18.42 7,22 11.5,22C13.8,22 14.94,20.36 14.94,18.21L18.73,22L20,20.72L3.28,4Z" /></svg>',
+  },
+  {
+    key: 'FanPlusOutlined',
+    svg: '<svg id="mdi-fan-plus" viewBox="0 0 24 24"><path d="M13 19C13 17.59 13.5 16.3 14.3 15.28C14.17 14.97 14.03 14.65 13.86 14.34C14.26 14 14.57 13.59 14.77 13.11C15.26 13.21 15.78 13.39 16.25 13.67C17.07 13.25 18 13 19 13C20.05 13 21.03 13.27 21.89 13.74C21.95 13.37 22 12.96 22 12.5C22 8.92 18.03 8.13 14.33 10.13C14 9.73 13.59 9.42 13.11 9.22C13.3 8.29 13.74 7.24 14.73 6.75C17.09 5.57 17 2 12.5 2C8.93 2 8.14 5.96 10.13 9.65C9.72 9.97 9.4 10.39 9.21 10.87C8.28 10.68 7.23 10.25 6.73 9.26C5.56 6.89 2 7 2 11.5C2 15.07 5.95 15.85 9.64 13.87C9.96 14.27 10.39 14.59 10.88 14.79C10.68 15.71 10.24 16.75 9.26 17.24C6.9 18.42 7 22 11.5 22C12.31 22 13 21.78 13.5 21.41C13.19 20.67 13 19.86 13 19M12 13C11.43 13 11 12.55 11 12S11.43 11 12 11C12.54 11 13 11.45 13 12S12.54 13 12 13M20 15V18H23V20H20V23H18V20H15V18H18V15H20Z" /></svg>',
+  },
+  {
+    key: 'FanRemoveOutlined',
+    svg: '<svg id="mdi-fan-remove" viewBox="0 0 24 24"><path d="M13 19C13 17.59 13.5 16.3 14.3 15.28C14.17 14.97 14.03 14.65 13.86 14.34C14.26 14 14.57 13.59 14.77 13.11C15.26 13.21 15.78 13.39 16.25 13.67C17.07 13.25 18 13 19 13C20.05 13 21.03 13.27 21.89 13.74C21.95 13.37 22 12.96 22 12.5C22 8.92 18.03 8.13 14.33 10.13C14 9.73 13.59 9.42 13.11 9.22C13.3 8.29 13.74 7.24 14.73 6.75C17.09 5.57 17 2 12.5 2C8.93 2 8.14 5.96 10.13 9.65C9.72 9.97 9.4 10.39 9.21 10.87C8.28 10.68 7.23 10.25 6.73 9.26C5.56 6.89 2 7 2 11.5C2 15.07 5.95 15.85 9.64 13.87C9.96 14.27 10.39 14.59 10.88 14.79C10.68 15.71 10.24 16.75 9.26 17.24C6.9 18.42 7 22 11.5 22C12.31 22 13 21.78 13.5 21.41C13.19 20.67 13 19.86 13 19M12 13C11.43 13 11 12.55 11 12S11.43 11 12 11C12.54 11 13 11.45 13 12S12.54 13 12 13M22.54 16.88L20.41 19L22.54 21.12L21.12 22.54L19 20.41L16.88 22.54L15.47 21.12L17.59 19L15.47 16.88L16.88 15.47L19 17.59L21.12 15.47L22.54 16.88Z" /></svg>',
+  },
+  {
+    key: 'FanSpeed1Outlined',
+    svg: '<svg id="mdi-fan-speed-1" viewBox="0 0 24 24"><path d="M13 19C13 17.59 13.5 16.3 14.3 15.28C14.17 14.97 14.03 14.65 13.86 14.34C14.26 14 14.57 13.59 14.77 13.11C15.26 13.21 15.78 13.39 16.25 13.67C17.07 13.25 18 13 19 13C20.05 13 21.03 13.27 21.89 13.74C21.95 13.37 22 12.96 22 12.5C22 8.92 18.03 8.13 14.33 10.13C14 9.73 13.59 9.42 13.11 9.22C13.3 8.29 13.74 7.24 14.73 6.75C17.09 5.57 17 2 12.5 2C8.93 2 8.14 5.96 10.13 9.65C9.72 9.97 9.4 10.39 9.21 10.87C8.28 10.68 7.23 10.25 6.73 9.26C5.56 6.89 2 7 2 11.5C2 15.07 5.95 15.85 9.64 13.87C9.96 14.27 10.39 14.59 10.88 14.79C10.68 15.71 10.24 16.75 9.26 17.24C6.9 18.42 7 22 11.5 22C12.31 22 13 21.78 13.5 21.41C13.19 20.67 13 19.86 13 19M12 13C11.43 13 11 12.55 11 12S11.43 11 12 11C12.54 11 13 11.45 13 12S12.54 13 12 13M17 15V17H18V23H20V15H17Z" /></svg>',
+  },
+  {
+    key: 'FanSpeed2Outlined',
+    svg: '<svg id="mdi-fan-speed-2" viewBox="0 0 24 24"><path d="M13 19C13 17.59 13.5 16.3 14.3 15.28C14.17 14.97 14.03 14.65 13.86 14.34C14.26 14 14.57 13.59 14.77 13.11C15.26 13.21 15.78 13.39 16.25 13.67C17.07 13.25 18 13 19 13C20.05 13 21.03 13.27 21.89 13.74C21.95 13.37 22 12.96 22 12.5C22 8.92 18.03 8.13 14.33 10.13C14 9.73 13.59 9.42 13.11 9.22C13.3 8.29 13.74 7.24 14.73 6.75C17.09 5.57 17 2 12.5 2C8.93 2 8.14 5.96 10.13 9.65C9.72 9.97 9.4 10.39 9.21 10.87C8.28 10.68 7.23 10.25 6.73 9.26C5.56 6.89 2 7 2 11.5C2 15.07 5.95 15.85 9.64 13.87C9.96 14.27 10.39 14.59 10.88 14.79C10.68 15.71 10.24 16.75 9.26 17.24C6.9 18.42 7 22 11.5 22C12.31 22 13 21.78 13.5 21.41C13.19 20.67 13 19.86 13 19M12 13C11.43 13 11 12.55 11 12S11.43 11 12 11C12.54 11 13 11.45 13 12S12.54 13 12 13M16 15V17H19V18H18C16.9 18 16 18.9 16 20V23H21V21H18V20H19C20.11 20 21 19.11 21 18V17C21 15.9 20.11 15 19 15H16Z" /></svg>',
+  },
+  {
+    key: 'FanSpeed3Outlined',
+    svg: '<svg id="mdi-fan-speed-3" viewBox="0 0 24 24"><path d="M13 19C13 17.59 13.5 16.3 14.3 15.28C14.17 14.97 14.03 14.65 13.86 14.34C14.26 14 14.57 13.59 14.77 13.11C15.26 13.21 15.78 13.39 16.25 13.67C17.07 13.25 18 13 19 13C20.05 13 21.03 13.27 21.89 13.74C21.95 13.37 22 12.96 22 12.5C22 8.92 18.03 8.13 14.33 10.13C14 9.73 13.59 9.42 13.11 9.22C13.3 8.29 13.74 7.24 14.73 6.75C17.09 5.57 17 2 12.5 2C8.93 2 8.14 5.96 10.13 9.65C9.72 9.97 9.4 10.39 9.21 10.87C8.28 10.68 7.23 10.25 6.73 9.26C5.56 6.89 2 7 2 11.5C2 15.07 5.95 15.85 9.64 13.87C9.96 14.27 10.39 14.59 10.88 14.79C10.68 15.71 10.24 16.75 9.26 17.24C6.9 18.42 7 22 11.5 22C12.31 22 13 21.78 13.5 21.41C13.19 20.67 13 19.86 13 19M12 13C11.43 13 11 12.55 11 12S11.43 11 12 11C12.54 11 13 11.45 13 12S12.54 13 12 13M21 21V20.5C21 19.67 20.33 19 19.5 19C20.33 19 21 18.33 21 17.5V17C21 15.89 20.1 15 19 15H16V17H19V18H17V20H19V21H16V23H19C20.11 23 21 22.11 21 21" /></svg>',
+  },
+  {
+    key: 'FilterOutlineOutlined',
+    svg: '<svg id="mdi-filter-outline" viewBox="0 0 24 24"><path d="M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z" /></svg>',
+  },
+  {
+    key: 'FireOutlined',
+    svg: '<svg id="mdi-fire" viewBox="0 0 24 24"><path d="M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z" /></svg>',
+  },
+  {
+    key: 'FireAlertOutlined',
+    svg: '<svg id="mdi-fire-alert" viewBox="0 0 24 24"><path d="M15.66 11.2C15.43 10.9 15.15 10.64 14.89 10.38C14.22 9.78 13.46 9.35 12.82 8.72C11.33 7.26 11 4.85 11.95 3C11 3.23 10.17 3.75 9.46 4.32C6.87 6.4 5.85 10.07 7.07 13.22C7.11 13.32 7.15 13.42 7.15 13.55C7.15 13.77 7 13.97 6.8 14.05C6.57 14.15 6.33 14.09 6.14 13.93C6.08 13.88 6.04 13.83 6 13.76C4.87 12.33 4.69 10.28 5.45 8.64C3.78 10 2.87 12.3 3 14.47C3.06 14.97 3.12 15.47 3.29 15.97C3.43 16.57 3.7 17.17 4 17.7C5.08 19.43 6.95 20.67 8.96 20.92C11.1 21.19 13.39 20.8 15.03 19.32C16.86 17.66 17.5 15 16.56 12.72L16.43 12.46C16.22 12 15.66 11.2 15.66 11.2M12.5 17.5C12.22 17.74 11.76 18 11.4 18.1C10.28 18.5 9.16 17.94 8.5 17.28C9.69 17 10.4 16.12 10.61 15.23C10.78 14.43 10.46 13.77 10.33 13C10.21 12.26 10.23 11.63 10.5 10.94C10.69 11.32 10.89 11.7 11.13 12C11.9 13 13.11 13.44 13.37 14.8C13.41 14.94 13.43 15.08 13.43 15.23C13.46 16.05 13.1 16.95 12.5 17.5H12.5M21 13H19V7H21V13M21 17H19V15H21V17Z" /></svg>',
+  },
+  {
+    key: 'FireCircleOutlined',
+    svg: '<svg id="mdi-fire-circle" viewBox="0 0 24 24"><path d="M14.66 14.18C14.69 14.29 14.7 14.4 14.7 14.5C14.73 15.15 14.44 15.85 13.97 16.28C13.75 16.47 13.39 16.67 13.11 16.75C12.23 17.06 11.35 16.62 10.83 16.11C11.77 15.89 12.32 15.21 12.5 14.5C12.62 13.89 12.37 13.38 12.27 12.78C12.17 12.2 12.19 11.71 12.4 11.18C12.55 11.47 12.71 11.77 12.9 12C13.5 12.78 14.45 13.12 14.66 14.18M22 12C22 17.5 17.5 22 12 22S2 17.5 2 12 6.5 2 12 2 22 6.5 22 12M17.16 12.56L17.06 12.36C16.9 12 16.45 11.38 16.45 11.38C16.27 11.15 16.05 10.94 15.85 10.74C15.32 10.27 14.73 9.94 14.22 9.45C13.05 8.31 12.79 6.44 13.54 5C12.79 5.18 12.14 5.58 11.58 6.03C9.55 7.65 8.75 10.5 9.71 12.95C9.74 13.03 9.77 13.11 9.77 13.21C9.77 13.38 9.65 13.53 9.5 13.6C9.31 13.67 9.13 13.63 9 13.5C8.93 13.46 8.9 13.42 8.87 13.37C8 12.26 7.84 10.66 8.43 9.39C7.12 10.45 6.41 12.24 6.5 13.92C6.56 14.31 6.6 14.7 6.74 15.09C6.85 15.56 7.06 16 7.3 16.44C8.14 17.78 9.61 18.75 11.19 18.94C12.87 19.15 14.67 18.85 15.96 17.7C17.4 16.4 17.9 14.33 17.16 12.56Z" /></svg>',
+  },
+  {
+    key: 'FireOffOutlined',
+    svg: '<svg id="mdi-fire-off" viewBox="0 0 24 24"><path d="M22.11 21.46L2.39 1.73L1.11 3L7.09 9C5.66 10.36 4.88 12.47 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C17.1 19.26 17.15 19.18 17.22 19.11L20.84 22.73L22.11 21.46M8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C7 12.47 6.74 10.69 7.26 9.15L8.58 10.47C8.58 11.4 8.73 12.33 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.66 15 12.66 14.76 12.64 14.53L15 16.88C14.85 17.11 14.69 17.33 14.5 17.5M18.92 15.72L9.65 6.46C10.12 5.65 10.72 4.92 11.46 4.32C12.17 3.75 13 3.23 13.95 3C13 4.85 13.33 7.26 14.82 8.72C15.46 9.35 16.22 9.78 16.89 10.38C17.15 10.64 17.43 10.9 17.66 11.2C17.66 11.2 18.22 12 18.43 12.46L18.56 12.72C18.96 13.69 19.06 14.72 18.92 15.72Z" /></svg>',
+  },
+  {
+    key: 'FishOutlined',
+    svg: '<svg id="mdi-fish" viewBox="0 0 24 24"><path d="M12,20L12.76,17C9.5,16.79 6.59,15.4 5.75,13.58C5.66,14.06 5.53,14.5 5.33,14.83C4.67,16 3.33,16 2,16C3.1,16 3.5,14.43 3.5,12.5C3.5,10.57 3.1,9 2,9C3.33,9 4.67,9 5.33,10.17C5.53,10.5 5.66,10.94 5.75,11.42C6.4,10 8.32,8.85 10.66,8.32L9,5C11,5 13,5 14.33,5.67C15.46,6.23 16.11,7.27 16.69,8.38C19.61,9.08 22,10.66 22,12.5C22,14.38 19.5,16 16.5,16.66C15.67,17.76 14.86,18.78 14.17,19.33C13.33,20 12.67,20 12,20M17,11A1,1 0 0,0 16,12A1,1 0 0,0 17,13A1,1 0 0,0 18,12A1,1 0 0,0 17,11Z" /></svg>',
+  },
+  {
+    key: 'FishOffOutlined',
+    svg: '<svg id="mdi-fish-off" viewBox="0 0 24 24"><path d="M20.8 22.7L15.7 17.6C15.1 18.3 14.6 18.9 14.1 19.3C13.3 20 12.7 20 12 20L12.8 17C9.5 16.8 6.6 15.4 5.8 13.6C5.7 14.1 5.6 14.5 5.4 14.8C4.7 16 3.3 16 2 16C3.1 16 3.5 14.4 3.5 12.5S3.1 9 2 9C3.3 9 4.7 9 5.3 10.2C5.5 10.5 5.6 11 5.7 11.4C6 10.7 6.7 10 7.6 9.5L1.1 3L2.4 1.7L22.1 21.4L20.8 22.7M9.8 6.6L9 5C11 5 13 5 14.3 5.7C15.4 6.3 16.1 7.3 16.7 8.4C19.6 9.1 22 10.7 22 12.5C22 13.8 20.8 15 19 15.8L9.8 6.6M16 12C16 12.6 16.4 13 17 13S18 12.6 18 12 17.6 11 17 11 16 11.4 16 12Z" /></svg>',
+  },
+  {
+    key: 'FishbowlOutlined',
+    svg: '<svg id="mdi-fishbowl" viewBox="0 0 24 24"><path d="M19.11,5H21V3H3V5H4.89C3.11,6.8 2,9.27 2,12C2,15.97 4.31,19.39 7.66,21H16.34C19.69,19.39 22,15.97 22,12C22,9.27 20.89,6.8 19.11,5M13.25,17C12.09,17 11.06,16.64 10.33,16.17C9.67,17 8.33,17 7,17C8.1,17 8.5,15.88 8.5,14.5C8.5,13.12 8.1,12 7,12C8.33,12 9.67,12 10.37,12.91C11.06,12.36 12.09,12 13.25,12C15.32,12 17,13.12 17,14.5C17,15.88 15.32,17 13.25,17M16,7C13.56,8.71 10.44,8.71 8,7C7.06,7.66 6,8.09 4.95,8.25C5.31,7.58 5.77,6.96 6.32,6.41L7.7,5H16.3L17.68,6.41C18.23,6.96 18.69,7.58 19.05,8.25C18,8.09 16.94,7.66 16,7Z" /></svg>',
+  },
+  {
+    key: 'FishbowlOutlineOutlined',
+    svg: '<svg id="mdi-fishbowl-outline" viewBox="0 0 24 24"><path d="M19.11,5H21V3H3V5H4.89C3.11,6.8 2,9.27 2,12C2,15.97 4.31,19.39 7.66,21H16.34C19.69,19.39 22,15.97 22,12C22,9.27 20.89,6.8 19.11,5M6.32,6.41L7.7,5H16.3L17.68,6.41C18.23,6.96 18.69,7.58 19.05,8.25C18,8.09 16.94,7.66 16,7C13.56,8.71 10.44,8.71 8,7C7.06,7.66 6,8.09 4.95,8.25C5.31,7.58 5.77,6.96 6.32,6.41M15.85,19H8.15C5.58,17.59 4,14.95 4,12C4,11.43 4.07,10.86 4.19,10.32C5.5,10.29 6.8,9.95 8,9.33C10.5,10.63 13.5,10.63 16,9.33C17.2,9.95 18.5,10.29 19.81,10.32C19.93,10.86 20,11.43 20,12C20,14.95 18.42,17.59 15.85,19M17,14.5C17,15.88 15.32,17 13.25,17C12.09,17 11.06,16.64 10.33,16.16C9.67,17 8.33,17 7,17C8.1,17 8.5,15.88 8.5,14.5C8.5,13.12 8.1,12 7,12C8.33,12 9.67,12 10.37,12.91C11.06,12.36 12.09,12 13.25,12C15.32,12 17,13.12 17,14.5Z" /></svg>',
+  },
+  {
+    key: 'FlagOutlined',
+    svg: '<svg id="mdi-flag" viewBox="0 0 24 24"><path d="M14.4,6L14,4H5V21H7V14H12.6L13,16H20V6H14.4Z" /></svg>',
+  },
+  {
+    key: 'FlareOutlined',
+    svg: '<svg id="mdi-flare" viewBox="0 0 24 24"><path d="M7,11H1V13H7V11M9.17,7.76L7.05,5.64L5.64,7.05L7.76,9.17L9.17,7.76M13,1H11V7H13V1M18.36,7.05L16.95,5.64L14.83,7.76L16.24,9.17L18.36,7.05M17,11V13H23V11H17M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M14.83,16.24L16.95,18.36L18.36,16.95L16.24,14.83L14.83,16.24M5.64,16.95L7.05,18.36L9.17,16.24L7.76,14.83L5.64,16.95M11,23H13V17H11V23Z" /></svg>',
+  },
+  {
+    key: 'FlashOutlined',
+    svg: '<svg id="mdi-flash" viewBox="0 0 24 24"><path d="M7,2V13H10V22L17,10H13L17,2H7Z" /></svg>',
+  },
+  {
+    key: 'FlashOffOutlined',
+    svg: '<svg id="mdi-flash-off" viewBox="0 0 24 24"><path d="M17,10H13L17,2H7V4.18L15.46,12.64M3.27,3L2,4.27L7,9.27V13H10V22L13.58,15.86L17.73,20L19,18.73L3.27,3Z" /></svg>',
+  },
+  {
+    key: 'FlashOutlineOutlined',
+    svg: '<svg id="mdi-flash-outline" viewBox="0 0 24 24"><path d="M7,2H17L13.5,9H17L10,22V14H7V2M9,4V12H12V14.66L14,11H10.24L13.76,4H9Z" /></svg>',
+  },
+  {
+    key: 'FlashlightOutlined',
+    svg: '<svg id="mdi-flashlight" viewBox="0 0 24 24"><path d="M9,10L6,5H18L15,10H9M18,4H6V2H18V4M9,22V11H15V22H9M12,13A1,1 0 0,0 11,14A1,1 0 0,0 12,15A1,1 0 0,0 13,14A1,1 0 0,0 12,13Z" /></svg>',
+  },
+  {
+    key: 'FlashlightOffOutlined',
+    svg: '<svg id="mdi-flashlight-off" viewBox="0 0 24 24"><path d="M2,5.27L3.28,4L20,20.72L18.73,22L15,18.27V22H9V12.27L2,5.27M18,5L15,10H11.82L6.82,5H18M18,4H6V2H18V4M15,11V13.18L12.82,11H15Z" /></svg>',
+  },
+  {
+    key: 'FlaskEmptyOutlineOutlined',
+    svg: '<svg id="mdi-flask-empty-outline" viewBox="0 0 24 24"><path d="M5,19A1,1 0 0,0 6,20H18A1,1 0 0,0 19,19C19,18.79 18.93,18.59 18.82,18.43L13,8.35V4H11V8.35L5.18,18.43C5.07,18.59 5,18.79 5,19M6,22A3,3 0 0,1 3,19C3,18.4 3.18,17.84 3.5,17.37L9,7.81V6A1,1 0 0,1 8,5V4A2,2 0 0,1 10,2H14A2,2 0 0,1 16,4V5A1,1 0 0,1 15,6V7.81L20.5,17.37C20.82,17.84 21,18.4 21,19A3,3 0 0,1 18,22H6Z" /></svg>',
+  },
+  {
+    key: 'FlowerOutlined',
+    svg: '<svg id="mdi-flower" viewBox="0 0 24 24"><path d="M3,13A9,9 0 0,0 12,22C12,17 7.97,13 3,13M12,5.5A2.5,2.5 0 0,1 14.5,8A2.5,2.5 0 0,1 12,10.5A2.5,2.5 0 0,1 9.5,8A2.5,2.5 0 0,1 12,5.5M5.6,10.25A2.5,2.5 0 0,0 8.1,12.75C8.63,12.75 9.12,12.58 9.5,12.31C9.5,12.37 9.5,12.43 9.5,12.5A2.5,2.5 0 0,0 12,15A2.5,2.5 0 0,0 14.5,12.5C14.5,12.43 14.5,12.37 14.5,12.31C14.88,12.58 15.37,12.75 15.9,12.75C17.28,12.75 18.4,11.63 18.4,10.25C18.4,9.25 17.81,8.4 16.97,8C17.81,7.6 18.4,6.74 18.4,5.75C18.4,4.37 17.28,3.25 15.9,3.25C15.37,3.25 14.88,3.41 14.5,3.69C14.5,3.63 14.5,3.56 14.5,3.5A2.5,2.5 0 0,0 12,1A2.5,2.5 0 0,0 9.5,3.5C9.5,3.56 9.5,3.63 9.5,3.69C9.12,3.41 8.63,3.25 8.1,3.25A2.5,2.5 0 0,0 5.6,5.75C5.6,6.74 6.19,7.6 7.03,8C6.19,8.4 5.6,9.25 5.6,10.25M12,22A9,9 0 0,0 21,13C16,13 12,17 12,22Z" /></svg>',
+  },
+  {
+    key: 'FoodAppleOutlined',
+    svg: '<svg id="mdi-food-apple" viewBox="0 0 24 24"><path d="M20,10C22,13 17,22 15,22C13,22 13,21 12,21C11,21 11,22 9,22C7,22 2,13 4,10C6,7 9,7 11,8V5C5.38,8.07 4.11,3.78 4.11,3.78C4.11,3.78 6.77,0.19 11,5V3H13V8C15,7 18,7 20,10Z" /></svg>',
+  },
+  {
+    key: 'FoodAppleOutlineOutlined',
+    svg: '<svg id="mdi-food-apple-outline" viewBox="0 0 24 24"><path d="M20,10C18.58,7.57 15.5,6.69 13,8V3H11V8C8.5,6.69 5.42,7.57 4,10C2,13 7,22 9,22C11,22 11,21 12,21C13,21 13,22 15,22C17,22 22,13 20,10M18.25,13.38C17.63,15.85 16.41,18.12 14.7,20C14.5,20 14.27,19.9 14.1,19.75C12.87,18.76 11.13,18.76 9.9,19.75C9.73,19.9 9.5,20 9.3,20C7.59,18.13 6.36,15.85 5.75,13.39C5.5,12.66 5.45,11.87 5.66,11.12C6.24,10.09 7.32,9.43 8.5,9.4C9.06,9.41 9.61,9.54 10.11,9.79L11,10.24H13L13.89,9.79C14.39,9.54 14.94,9.41 15.5,9.4C16.68,9.43 17.76,10.08 18.34,11.11C18.55,11.86 18.5,12.65 18.25,13.38M11,5C5.38,8.07 4.11,3.78 4.11,3.78C4.11,3.78 6.77,0.19 11,5Z" /></svg>',
+  },
+  {
+    key: 'FoodDrumstickOutlined',
+    svg: '<svg id="mdi-food-drumstick" viewBox="0 0 24 24"><path d="M20.16 12.73C22.93 9.96 22.57 5.26 19.09 3C17.08 1.67 14.39 1.66 12.36 2.97C10.6 4.1 9.63 5.86 9.46 7.68C9.33 9 8.83 10.23 7.91 11.15L7.88 11.18C6.72 12.34 6.72 14.11 7.81 15.19L8.8 16.18C9.89 17.27 11.66 17.27 12.75 16.18C13.72 15.21 15 14.68 16.39 14.53C17.76 14.38 19.1 13.78 20.16 12.73M6.26 19.86C6.53 20.42 6.44 21.1 5.97 21.56C5.39 22.15 4.44 22.15 3.85 21.56C3.58 21.29 3.44 20.94 3.42 20.58C3.06 20.56 2.71 20.42 2.44 20.15C1.85 19.56 1.85 18.61 2.44 18.03C2.9 17.57 3.59 17.47 4.14 17.74L6.62 15.31C6.76 15.5 6.92 15.72 7.1 15.9L8.09 16.89C8.3 17.09 8.5 17.26 8.76 17.41L6.26 19.86Z" /></svg>',
+  },
+  {
+    key: 'FoodDrumstickOffOutlined',
+    svg: '<svg id="mdi-food-drumstick-off" viewBox="0 0 24 24"><path d="M20.8 22.7L13.6 15.5C13.3 15.7 13 15.9 12.7 16.2C11.6 17.3 9.8 17.3 8.7 16.2L7.7 15.2C6.6 14.1 6.6 12.3 7.8 11.2C8 11 8.2 10.7 8.4 10.4L1.1 3L2.4 1.7L22.1 21.4L20.8 22.7M8.1 16.9L7.1 15.9C6.9 15.7 6.8 15.5 6.6 15.3L4.1 17.7C3.5 17.4 2.9 17.5 2.4 18C1.8 18.6 1.8 19.5 2.4 20.1C2.7 20.4 3 20.5 3.4 20.5C3.4 20.9 3.6 21.2 3.8 21.5C4.4 22.1 5.3 22.1 5.9 21.5C6.4 21 6.5 20.4 6.2 19.8L8.7 17.4C8.5 17.3 8.3 17.1 8.1 16.9M20.2 12.7C23 9.9 22.6 5.2 19.1 3C17.1 1.7 14.4 1.7 12.4 3C11 3.9 10.1 5.1 9.7 6.5L17.5 14.3C18.5 14 19.4 13.5 20.2 12.7Z" /></svg>',
+  },
+  {
+    key: 'FridgeIndustrialOffOutlineOutlined',
+    svg: '<svg id="mdi-fridge-industrial-off-outline" viewBox="0 0 24 24"><path d="M7.2 4L5.7 2.5C6.05 2.19 6.5 2 7 2H17C18.11 2 19 2.9 19 4V15.8L17 13.8V4H7.2M22.11 21.46L20.84 22.73L18.46 20.35C18.1 20.75 17.58 21 17 21V22H15V21H9V22H7V21C5.9 21 5 20.11 5 19V6.89L1.11 3L2.39 1.73L22.11 21.46M17 18.89L10 11.89V15H8V10H8.11L7 8.89V19H17V18.89Z" /></svg>',
+  },
+  {
+    key: 'FridgeIndustrialOutlineOutlined',
+    svg: '<svg id="mdi-fridge-industrial-outline" viewBox="0 0 24 24"><path d="M17 2H7C5.9 2 5 2.9 5 4V19C5 20.11 5.9 21 7 21V22H9V21H15V22H17V21C18.11 21 19 20.11 19 19V4C19 2.9 18.11 2 17 2M17 19H7V4H17V19M10 15H8V10H10V15Z" /></svg>',
+  },
+  {
+    key: 'FruitCherriesOutlined',
+    svg: '<svg id="mdi-fruit-cherries" viewBox="0 0 24 24"><path d="M16 13H15.5C14.8 11.7 14.3 10 13.8 8.3L14.7 9.2C17.4 11.3 19.8 10.9 19.8 10.9S20.5 7.1 17.8 5.1C15.5 3.3 13.4 3.3 12.8 3.4C12.7 2.8 12.7 2.3 12.6 1.9L11.2 2C11.2 5.2 8.5 11.1 7.6 13C5.6 13.2 4 14.9 4 17C4 19.2 5.8 21 8 21C9.1 21 10 20.6 10.7 19.9C10.3 19 10 18 10 17S10.3 15 10.7 14.1C10.3 13.7 9.7 13.4 9.2 13.2C9.9 11.7 11.1 9 11.9 6.4C12.3 8.7 13.1 11.4 14.1 13.5C12.9 14.2 12 15.5 12 17C12 19.2 13.8 21 16 21S20 19.2 20 17 18.2 13 16 13M8 15.5C7.2 15.5 6.5 16.2 6.5 17H5.5C5.5 15.6 6.6 14.5 8 14.5V15.5M16 15.5C15.2 15.5 14.5 16.2 14.5 17H13.5C13.5 15.6 14.6 14.5 16 14.5V15.5Z" /></svg>',
+  },
+  {
+    key: 'FruitCherriesOffOutlined',
+    svg: '<svg id="mdi-fruit-cherries-off" viewBox="0 0 24 24"><path d="M22.1 21.5L2.4 1.7L1.1 3L8.7 10.6C8.3 11.6 7.9 12.5 7.6 13C5.6 13.2 4 14.9 4 17C4 19.2 5.8 21 8 21C9.1 21 10 20.6 10.7 19.9C10.3 19 10 18 10 17S10.3 15 10.7 14.1C10.3 13.7 9.7 13.4 9.2 13.2C9.4 12.8 9.6 12.3 9.9 11.7L12.8 14.6C12.3 15.3 12 16.1 12 17C12 19.2 13.8 21 16 21C16.9 21 17.7 20.7 18.3 20.2L20.8 22.7L22.1 21.5M8 15.5C7.2 15.5 6.5 16.2 6.5 17H5.5C5.5 15.6 6.6 14.5 8 14.5V15.5M14.5 17H13.5C13.5 16.5 13.6 16.1 13.8 15.7L14.6 16.5C14.5 16.7 14.5 16.8 14.5 17M20 16.8L16.2 13C18.2 13.1 19.9 14.8 20 16.8M11.3 8.1L10.1 6.9C10.7 5.1 11.2 3.3 11.2 2L12.6 1.9C12.7 2.3 12.7 2.8 12.8 3.4C13.4 3.3 15.5 3.3 17.8 5.1C20.5 7.1 19.8 10.9 19.8 10.9S17.4 11.3 14.7 9.2L13.8 8.3C14.1 9.5 14.5 10.7 14.9 11.7L12.6 9.4C12.3 8.4 12.1 7.4 11.9 6.4C11.7 7 11.5 7.6 11.3 8.1Z" /></svg>',
+  },
+  {
+    key: 'FruitGrapesOutlined',
+    svg: '<svg id="mdi-fruit-grapes" viewBox="0 0 24 24"><path d="M14 12C14 13.1 13.1 14 12 14S10 13.1 10 12 10.9 10 12 10 14 10.9 14 12M7 10C5.9 10 5 10.9 5 12S5.9 14 7 14 9 13.1 9 12 8.1 10 7 10M17 10C15.9 10 15 10.9 15 12S15.9 14 17 14 19 13.1 19 12 18.1 10 17 10M14.5 6C13.4 6 12.5 6.9 12.5 8S13.4 10 14.5 10 16.5 9.1 16.5 8 15.6 6 14.5 6M9.5 6C8.4 6 7.5 6.9 7.5 8S8.4 10 9.5 10 11.5 9.1 11.5 8 10.6 6 9.5 6M14.5 14C13.4 14 12.5 14.9 12.5 16S13.4 18 14.5 18 16.5 17.1 16.5 16 15.6 14 14.5 14M9.5 14C8.4 14 7.5 14.9 7.5 16S8.4 18 9.5 18 11.5 17.1 11.5 16 10.6 14 9.5 14M12 18C10.9 18 10 18.9 10 20S10.9 22 12 22 14 21.1 14 20 13.1 18 12 18M14.4 2.2L13.6 1C11.4 2 11.2 5.6 11.2 6H12.7C12.8 5.2 13.1 2.7 14.4 2.2Z" /></svg>',
+  },
+  {
+    key: 'FruitPineappleOutlined',
+    svg: '<svg id="mdi-fruit-pineapple" viewBox="0 0 24 24"><path d="M14.4 7.7C16.4 6.4 19 7 19 7C17.2 4.6 15.1 4.7 13.6 5.2V5C14.7 3.4 16.9 3.5 16.9 3.5C15.3 2.1 13.9 2.5 13 3C12.5 1.8 12 1 12 1C11.6 1.7 11.3 2.4 11 3.1C10.1 2.5 8.6 2.1 7 3.5C7 3.5 9.3 3.5 10.4 5.2C8.9 4.7 6.8 4.6 5 7C5 7 7.6 6.4 9.6 7.7C7.5 8.9 6 11.7 6 15C6 19.4 8.7 23 12 23S18 19.4 18 15C18 11.7 16.5 8.9 14.4 7.7M15.8 16.8C15.7 17.2 15.6 17.6 15.4 18L14 16L12.5 18L14.1 20.1C13.8 20.3 13.6 20.5 13.3 20.7L12 19L10.7 20.7C10.4 20.6 10.1 20.4 9.9 20.1L11.5 18L10 16L8.5 17.9C8.4 17.5 8.2 17.1 8.1 16.7L9.5 15L8.2 13.2C8.3 12.8 8.4 12.4 8.6 12L10 14L11.5 12L9.9 9.9C10.2 9.7 10.4 9.5 10.7 9.3L12 11L13.3 9.3C13.6 9.4 13.9 9.6 14.1 9.9L12.5 12L14 14L15.5 12.1C15.6 12.5 15.8 12.9 15.9 13.3L14.5 15L15.8 16.8M12 13L13.5 15L12 17L10.5 15L12 13Z" /></svg>',
+  },
+  {
+    key: 'FruitWatermelonOutlined',
+    svg: '<svg id="mdi-fruit-watermelon" viewBox="0 0 24 24"><path d="M16.4 16.4C19.8 13 19.8 7.5 16.4 4.2L4.2 16.4C7.5 19.8 13 19.8 16.4 16.4M16 7C16.6 7 17 7.4 17 8C17 8.6 16.6 9 16 9S15 8.6 15 8C15 7.4 15.4 7 16 7M16 11C16.6 11 17 11.4 17 12C17 12.6 16.6 13 16 13S15 12.6 15 12C15 11.4 15.4 11 16 11M12 11C12.6 11 13 11.4 13 12C13 12.6 12.6 13 12 13S11 12.6 11 12C11 11.4 11.4 11 12 11M12 15C12.6 15 13 15.4 13 16C13 16.6 12.6 17 12 17S11 16.6 11 16C11 15.4 11.4 15 12 15M8 17C7.4 17 7 16.6 7 16C7 15.4 7.4 15 8 15S9 15.4 9 16C9 16.6 8.6 17 8 17M18.6 18.6C14 23.2 6.6 23.2 2 18.6L3.4 17.2C7.2 21 13.3 21 17.1 17.2C20.9 13.4 20.9 7.3 17.1 3.5L18.6 2C23.1 6.6 23.1 14 18.6 18.6Z" /></svg>',
+  },
+  {
+    key: 'GasStationOffOutlineOutlined',
+    svg: '<svg id="mdi-gas-station-off-outline" viewBox="0 0 24 24"><path d="M1 4.27L2.28 3L6 6.72L21 21.72L19.73 23L17.72 21C16.56 20.85 15.65 19.94 15.5 18.78L14 17.27V21H4V7.27L1 4.27M19.77 7.23C20.22 7.68 20.5 8.31 20.5 9L20.5 18.67L19 17.18V11.29C18.69 11.42 18.36 11.5 18 11.5C16.62 11.5 15.5 10.38 15.5 9C15.5 7.93 16.17 7.03 17.11 6.67L15 4.56L16.06 3.5L19.78 7.22L19.77 7.23M11.82 10H12V5H6.82L5.06 3.24C5.34 3.09 5.66 3 6 3H12C13.1 3 14 3.9 14 5V12H15C16.1 12 17 12.9 17 14V15.18L11.82 10M6 10H6.73L6 9.27V10M6 12V19H12V15.27L8.73 12H6M18 10C18.55 10 19 9.55 19 9C19 8.45 18.55 8 18 8C17.45 8 17 8.45 17 9C17 9.55 17.45 10 18 10Z" /></svg>',
+  },
+  {
+    key: 'GasStationOutlineOutlined',
+    svg: '<svg id="mdi-gas-station-outline" viewBox="0 0 24 24"><path d="M19.77,7.23L19.78,7.22L16.06,3.5L15,4.56L17.11,6.67C16.17,7.03 15.5,7.93 15.5,9A2.5,2.5 0 0,0 18,11.5C18.36,11.5 18.69,11.42 19,11.29V18.5A1,1 0 0,1 18,19.5A1,1 0 0,1 17,18.5V14A2,2 0 0,0 15,12H14V5A2,2 0 0,0 12,3H6A2,2 0 0,0 4,5V21H14V13.5H15.5V18.5A2.5,2.5 0 0,0 18,21A2.5,2.5 0 0,0 20.5,18.5V9C20.5,8.31 20.22,7.68 19.77,7.23M12,13.5V19H6V12H12V13.5M12,10H6V5H12V10M18,10A1,1 0 0,1 17,9A1,1 0 0,1 18,8A1,1 0 0,1 19,9A1,1 0 0,1 18,10Z" /></svg>',
+  },
+  {
+    key: 'GateOutlined',
+    svg: '<svg id="mdi-gate" viewBox="0 0 24 24"><path d="M9 6V11H7V7H5V11H3V9H1V21H3V19H5V21H7V19H9V21H11V19H13V21H15V19H17V21H19V19H21V21H23V9H21V11H19V7H17V11H15V6H13V11H11V6H9M3 13H5V17H3V13M7 13H9V17H7V13M11 13H13V17H11V13M15 13H17V17H15V13M19 13H21V17H19V13Z" /></svg>',
+  },
+  {
+    key: 'GateAlertOutlined',
+    svg: '<svg id="mdi-gate-alert" viewBox="0 0 24 24"><path d="M21 17H19V19H21V17M21 9H19V15H21V9M17 13V11H15V6H13V11H11V6H9V11H7V7H5V11H3V9H1V21H3V19H5V21H7V19H9V21H11V19H13V21H15V19H17V17H15V13H17M5 17H3V13H5V17M9 17H7V13H9V17M13 17H11V13H13V17Z" /></svg>',
+  },
+  {
+    key: 'GaugeOutlined',
+    svg: '<svg id="mdi-gauge" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12C20,14.4 19,16.5 17.3,18C15.9,16.7 14,16 12,16C10,16 8.2,16.7 6.7,18C5,16.5 4,14.4 4,12A8,8 0 0,1 12,4M14,5.89C13.62,5.9 13.26,6.15 13.1,6.54L11.81,9.77L11.71,10C11,10.13 10.41,10.6 10.14,11.26C9.73,12.29 10.23,13.45 11.26,13.86C12.29,14.27 13.45,13.77 13.86,12.74C14.12,12.08 14,11.32 13.57,10.76L13.67,10.5L14.96,7.29L14.97,7.26C15.17,6.75 14.92,6.17 14.41,5.96C14.28,5.91 14.15,5.89 14,5.89M10,6A1,1 0 0,0 9,7A1,1 0 0,0 10,8A1,1 0 0,0 11,7A1,1 0 0,0 10,6M7,9A1,1 0 0,0 6,10A1,1 0 0,0 7,11A1,1 0 0,0 8,10A1,1 0 0,0 7,9M17,9A1,1 0 0,0 16,10A1,1 0 0,0 17,11A1,1 0 0,0 18,10A1,1 0 0,0 17,9Z" /></svg>',
+  },
+  {
+    key: 'GaugeEmptyOutlined',
+    svg: '<svg id="mdi-gauge-empty" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,14.4 5,16.5 6.7,18C8.1,16.7 10,16 12,16C14,16 15.8,16.7 17.3,18C19,16.5 20,14.4 20,12A8,8 0 0,0 12,4M14,6A1,1 0 0,1 15,7A1,1 0 0,1 14,8A1,1 0 0,1 13,7A1,1 0 0,1 14,6M10,6A1,1 0 0,1 11,7A1,1 0 0,1 10,8A1,1 0 0,1 9,7A1,1 0 0,1 10,6M6.91,8.94C7.04,8.94 7.16,8.97 7.3,9L10.5,10.32L10.77,10.43C11.33,10 12.09,9.88 12.75,10.15C13.77,10.56 14.27,11.73 13.85,12.75C13.44,13.77 12.27,14.27 11.25,13.85C10.59,13.59 10.12,13 10,12.28L9.77,12.18L6.55,10.88L6.53,10.87C6,10.66 5.77,10.08 5.97,9.56C6.13,9.18 6.5,8.93 6.91,8.94V8.94M17,9A1,1 0 0,1 18,10A1,1 0 0,1 17,11A1,1 0 0,1 16,10A1,1 0 0,1 17,9Z" /></svg>',
+  },
+  {
+    key: 'GhostOffOutlineOutlined',
+    svg: '<svg id="mdi-ghost-off-outline" viewBox="0 0 24 24"><path d="M8.29 5.09L6.84 3.64C8.3 2.61 10.08 2 12 2C16.97 2 21 6.03 21 11V17.8L19 15.8V11C19 7.14 15.86 4 12 4C10.63 4 9.36 4.4 8.29 5.09M22.11 21.46L20.84 22.73L17.56 19.45L15 22L12 19L9 22L6 19L3 22V11C3 9.26 3.5 7.63 4.36 6.25L1.11 3L2.39 1.73L6.89 6.23L8.69 8.03H8.69L10.97 10.31V10.31L17.41 16.76L17.42 16.76L21 20.34V20.35L22.11 21.46M16.14 18.03L9.89 11.78C9.62 11.92 9.32 12 9 12C7.9 12 7 11.11 7 10C7 9.68 7.08 9.38 7.22 9.11L5.82 7.71C5.3 8.69 5 9.81 5 11V17.17L6 16.17L7.41 17.59L9 19.17L10.59 17.59L12 16.17L13.41 17.59L15 19.17L16.14 18.03M15 8C13.96 8 13.11 8.8 13 9.82L15.18 12C16.2 11.89 17 11.04 17 10C17 8.9 16.11 8 15 8Z" /></svg>',
+  },
+  {
+    key: 'GhostOutlineOutlined',
+    svg: '<svg id="mdi-ghost-outline" viewBox="0 0 24 24"><path d="M12 2C7.03 2 3 6.03 3 11V22L6 19L9 22L12 19L15 22L18 19L21 22V11C21 6.03 16.97 2 12 2M19 17.17L18 16.17L16.59 17.59L15 19.17L13.41 17.59L12 16.17L10.59 17.59L9 19.17L7.41 17.59L6 16.17L5 17.17V11C5 7.14 8.14 4 12 4S19 7.14 19 11V17.17M11 10C11 11.11 10.11 12 9 12S7 11.11 7 10 7.9 8 9 8 11 8.9 11 10M17 10C17 11.11 16.11 12 15 12S13 11.11 13 10 13.9 8 15 8 17 8.9 17 10Z" /></svg>',
+  },
+  {
+    key: 'GlassCocktailOutlined',
+    svg: '<svg id="mdi-glass-cocktail" viewBox="0 0 24 24"><path d="M7.5,7L5.5,5H18.5L16.5,7M11,13V19H6V21H18V19H13V13L21,5V3H3V5L11,13Z" /></svg>',
+  },
+  {
+    key: 'GlassCocktailOffOutlined',
+    svg: '<svg id="mdi-glass-cocktail-off" viewBox="0 0 24 24"><path d="M13.33 12.67L7.66 7L6.13 5.47L2.39 1.73L1.11 3L3 4.89V5L11 13V19H6V21H18V19.89L20.84 22.73L22.11 21.46L13.33 12.67M13 19V14.89L17.11 19H13M8.2 5L6.2 3H21V5L14.6 11.4L10.2 7H16.5L18.5 5H8.2Z" /></svg>',
+  },
+  {
+    key: 'GlassMugOutlined',
+    svg: '<svg id="mdi-glass-mug" viewBox="0 0 24 24"><path d="M10,4V7H18V4H10M8,2H20L21,2V3L20,4V20L21,21V22H20L8,22H7V21L8,20V18.6L4.2,16.83C3.5,16.5 3,15.82 3,15V8A2,2 0 0,1 5,6H8V4L7,3V2H8M5,15L8,16.39V8H5V15Z" /></svg>',
+  },
+  {
+    key: 'GlassMugOffOutlined',
+    svg: '<svg id="mdi-glass-mug-off" viewBox="0 0 24 24"><path d="M20 19.35V19.34L6.66 6L6.07 5.41L2.39 1.73L1.11 3L4.26 6.15C3.5 6.44 3 7.16 3 8V15C3 15.82 3.5 16.5 4.2 16.83L8 18.6V20L7 21V22H20.11L20.84 22.73L22.11 21.46L20 19.35M8 16.39L5 15V8H6.11L8 9.89V16.39M8 4L7 3V2H21V3L20 4V16.8L10.2 7H18V4H10V6.8L8 4.8V4Z" /></svg>',
+  },
+  {
+    key: 'HamburgerOutlined',
+    svg: '<svg id="mdi-hamburger" viewBox="0 0 24 24"><path d="M22 13C22 14.11 21.11 15 20 15H4C2.9 15 2 14.11 2 13S2.9 11 4 11H13L15.5 13L18 11H20C21.11 11 22 11.9 22 13M12 3C3 3 3 9 3 9H21C21 9 21 3 12 3M3 18C3 19.66 4.34 21 6 21H18C19.66 21 21 19.66 21 18V17H3V18Z" /></svg>',
+  },
+  {
+    key: 'HamburgerOffOutlined',
+    svg: '<svg id="mdi-hamburger-off" viewBox="0 0 24 24"><path d="M20 11C21.11 11 22 11.9 22 13S21.11 15 20 15H18.2L14.2 11H20M20.42 19.77L20.42 19.76L17.66 17H17.65L15.65 15H15.66L11.66 11H11.66L9.66 9H9.66L2.39 1.73L1.11 3L4.12 6C3 7.5 3 9 3 9H7.11L9.11 11H4C2.9 11 2 11.9 2 13S2.9 15 4 15H13.11L15.11 17H3V18C3 19.66 4.34 21 6 21H18C18.33 21 18.65 20.93 18.94 20.83L20.84 22.73L22.11 21.46L20.42 19.77M21 9C21 9 21 3 12 3C9.88 3 8.28 3.34 7.05 3.85L12.2 9H21Z" /></svg>',
+  },
+  {
+    key: 'HandBackLeftOffOutlineOutlined',
+    svg: '<svg id="mdi-hand-back-left-off-outline" viewBox="0 0 24 24"><path d="M22.11 21.46L2.39 1.73L1.11 3L3.56 5.45C3.21 5.87 3 6.41 3 7V16C3 20.42 6.58 24 11 24C13.94 24 16.62 22.45 18.12 20L20.84 22.73L22.11 21.46M11 22C7.69 22 5 19.31 5 16V7C5 6.97 5 6.94 5 6.91L6 7.89V12H8V9.89L9 10.89V12H10.11L16.65 18.54C15.57 20.64 13.41 22 11 22M8 4.8L6.21 3C6.59 2.12 7.47 1.5 8.5 1.5C8.73 1.5 8.96 1.53 9.17 1.59C9.54 .66 10.44 0 11.5 0C12.73 0 13.75 .89 13.96 2.06C14.13 2 14.31 2 14.5 2C15.88 2 17 3.12 17 4.5V10.39C17.34 10.08 17.76 9.85 18.22 9.73L19 9.5C19.82 9.29 20.69 9.61 21.18 10.35C21.56 10.92 21.58 11.66 21.33 12.3L19.67 16.47L18.13 14.93L19.5 11.45L19 11.59C18.5 11.71 18.15 12.05 18 12.5L17.34 14.14L15 11.8V4.5C15 4.22 14.78 4 14.5 4S14 4.22 14 4.5V10.8L12 8.8V2.5C12 2.22 11.78 2 11.5 2S11 2.22 11 2.5V7.8L9 5.8V4C9 3.72 8.78 3.5 8.5 3.5S8 3.72 8 4V4.8Z" /></svg>',
+  },
+  {
+    key: 'HandBackLeftOutlineOutlined',
+    svg: '<svg id="mdi-hand-back-left-outline" viewBox="0 0 24 24"><path d="M3 16C3 20.42 6.58 24 11 24C14.43 24 17.5 21.91 18.77 18.73L21.33 12.3C21.58 11.66 21.56 10.92 21.18 10.35C20.69 9.61 19.82 9.29 19 9.5L18.22 9.73C17.76 9.85 17.34 10.08 17 10.39V4.5C17 3.12 15.88 2 14.5 2C14.31 2 14.13 2 13.96 2.06C13.75 .89 12.73 0 11.5 0C10.44 0 9.54 .66 9.17 1.59C8.96 1.53 8.73 1.5 8.5 1.5C7.12 1.5 6 2.62 6 4V4.55C5.84 4.5 5.67 4.5 5.5 4.5C4.12 4.5 3 5.62 3 7V16M5 7C5 6.72 5.22 6.5 5.5 6.5S6 6.72 6 7V12H8V4C8 3.72 8.22 3.5 8.5 3.5S9 3.72 9 4V12H11V2.5C11 2.22 11.22 2 11.5 2S12 2.22 12 2.5V12H14V4.5C14 4.22 14.22 4 14.5 4S15 4.22 15 4.5V15H17L18 12.5C18.15 12.05 18.5 11.71 19 11.59L19.5 11.45L16.91 18C15.95 20.41 13.61 22 11 22C7.69 22 5 19.31 5 16V7Z" /></svg>',
+  },
+  {
+    key: 'HeadphonesOutlined',
+    svg: '<svg id="mdi-headphones" viewBox="0 0 24 24"><path d="M12,1C7,1 3,5 3,10V17A3,3 0 0,0 6,20H9V12H5V10A7,7 0 0,1 12,3A7,7 0 0,1 19,10V12H15V20H18A3,3 0 0,0 21,17V10C21,5 16.97,1 12,1Z" /></svg>',
+  },
+  {
+    key: 'HeadphonesOffOutlined',
+    svg: '<svg id="mdi-headphones-off" viewBox="0 0 24 24"><path d="M12,1A9,9 0 0,1 21,10V17C21,17.62 20.81,18.19 20.5,18.67L15,13.18V12H19V10A7,7 0 0,0 12,3C10,3 8.23,3.82 6.96,5.14L5.55,3.72C7.18,2.04 9.47,1 12,1M2.78,3.5L20.5,21.22L19.23,22.5L16.73,20H15V18.27L9,12.27V20H6A3,3 0 0,1 3,17V10C3,8.89 3.2,7.82 3.57,6.84L1.5,4.77L2.78,3.5M5.17,8.44C5.06,8.94 5,9.46 5,10V12H8.73L5.17,8.44Z" /></svg>',
+  },
+  {
+    key: 'HeartOutlined',
+    svg: '<svg id="mdi-heart" viewBox="0 0 24 24"><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" /></svg>',
+  },
+  {
+    key: 'HeartBrokenOutlined',
+    svg: '<svg id="mdi-heart-broken" viewBox="0 0 24 24"><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C8.17,3 8.82,3.12 9.44,3.33L13,9.35L9,14.35L12,21.35V21.35M16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35L11,14.35L15.5,9.35L12.85,4.27C13.87,3.47 15.17,3 16.5,3Z" /></svg>',
+  },
+  {
+    key: 'HeartMultipleOutlineOutlined',
+    svg: '<svg id="mdi-heart-multiple-outline" viewBox="0 0 24 24"><path d="M12,21.1L10.5,22.4C3.9,16.5 0.5,13.4 0.5,9.6C0.5,8.4 0.9,7.3 1.5,6.4C1.5,6.6 1.5,6.8 1.5,7C1.5,11.7 5.4,15.2 12,21.1M13.6,17C18.3,12.7 21.5,9.9 21.6,7C21.6,5 20.1,3.5 18.1,3.5C16.5,3.5 15,4.5 14.5,5.9H12.6C12,4.5 10.5,3.5 9,3.5C7,3.5 5.5,5 5.5,7C5.5,9.9 8.6,12.7 13.4,17L13.5,17.1M18,1.5C21.1,1.5 23.5,3.9 23.5,7C23.5,10.7 20.1,13.8 13.5,19.8C6.9,13.9 3.5,10.8 3.5,7C3.5,3.9 5.9,1.5 9,1.5C10.7,1.5 12.4,2.3 13.5,3.6C14.6,2.3 16.3,1.5 18,1.5Z" /></svg>',
+  },
+  {
+    key: 'HeartOffOutlineOutlined',
+    svg: '<svg id="mdi-heart-off-outline" viewBox="0 0 24 24"><path d="M2.39 1.73L1.11 3L3.19 5.08C2.45 6 2 7.19 2 8.5C2 12.27 5.4 15.36 10.55 20.03L12 21.35L13.45 20.03C14.32 19.24 15.14 18.5 15.9 17.79L20 22L21.27 20.73M12.1 18.55L12 18.65L11.89 18.55C7.14 14.24 4 11.39 4 8.5C4 7.74 4.22 7.06 4.61 6.5L14.5 16.37C13.74 17.06 12.95 17.78 12.1 18.55M8.3 5.1L6.33 3.13C6.7 3.05 7.1 3 7.5 3C9.24 3 10.91 3.81 12 5.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5C22 10.84 20.69 12.92 18.47 15.27L17.06 13.86C18.91 11.88 20 10.2 20 8.5C20 6.5 18.5 5 16.5 5C15.1 5 13.74 5.83 13.11 7H10.89C10.38 6.06 9.39 5.34 8.3 5.1Z" /></svg>',
+  },
+  {
+    key: 'HeartPulseOutlined',
+    svg: '<svg id="mdi-heart-pulse" viewBox="0 0 24 24"><path d="M7.5,4A5.5,5.5 0 0,0 2,9.5C2,10 2.09,10.5 2.22,11H6.3L7.57,7.63C7.87,6.83 9.05,6.75 9.43,7.63L11.5,13L12.09,11.58C12.22,11.25 12.57,11 13,11H21.78C21.91,10.5 22,10 22,9.5A5.5,5.5 0 0,0 16.5,4C14.64,4 13,4.93 12,6.34C11,4.93 9.36,4 7.5,4V4M3,12.5A1,1 0 0,0 2,13.5A1,1 0 0,0 3,14.5H5.44L11,20C12,20.9 12,20.9 13,20L18.56,14.5H21A1,1 0 0,0 22,13.5A1,1 0 0,0 21,12.5H13.4L12.47,14.8C12.07,15.81 10.92,15.67 10.55,14.83L8.5,9.5L7.54,11.83C7.39,12.21 7.05,12.5 6.6,12.5H3Z" /></svg>',
+  },
+  {
+    key: 'HelicopterOutlined',
+    svg: '<svg id="mdi-helicopter" viewBox="0 0 24 24"><path d="M3,3H17V5H3V3M23,6V10.5L14.75,12.2C14.91,12.6 15,13.04 15,13.5C15,14.9 14.18,16.1 13,16.66V17L13,19H16V21H4A3,3 0 0,1 1,18V17H3V18A1,1 0 0,0 4,19H5V16.74C3.25,16.13 2,14.46 2,12.5C2,10 4,8 6.5,8H9V6H11V8H21V6H23M11,19V17H7V19H11M7.5,10C6.12,10 5,10.9 5,12C5,13.1 6.12,14 7.5,14C8.88,14 10,13.1 10,12C10,10.9 8.88,10 7.5,10Z" /></svg>',
+  },
+  {
+    key: 'HexagonOutlineOutlined',
+    svg: '<svg id="mdi-hexagon-outline" viewBox="0 0 24 24"><path d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z" /></svg>',
+  },
+  {
+    key: 'HexagonSlice1Outlined',
+    svg: '<svg id="mdi-hexagon-slice-1" viewBox="0 0 24 24"><path d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15M12,12V5.32L17.94,8.66L12,12Z" /></svg>',
+  },
+  {
+    key: 'HexagonSlice2Outlined',
+    svg: '<svg id="mdi-hexagon-slice-2" viewBox="0 0 24 24"><path d="M18,15.38L12,12V5.32L18,8.69V15.38M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z" /></svg>',
+  },
+  {
+    key: 'HexagonSlice3Outlined',
+    svg: '<svg id="mdi-hexagon-slice-3" viewBox="0 0 24 24"><path d="M12,5.32L18,8.69V15.31L12,18.68V5.32M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z" /></svg>',
+  },
+  {
+    key: 'HexagonSlice4Outlined',
+    svg: '<svg id="mdi-hexagon-slice-4" viewBox="0 0 24 24"><path d="M12,5.32L18,8.69V15.31L12,18.68L6.06,15.34L12,12V5.32M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z" /></svg>',
+  },
+  {
+    key: 'HexagonSlice5Outlined',
+    svg: '<svg id="mdi-hexagon-slice-5" viewBox="0 0 24 24"><path d="M12,5.32L18,8.69V15.31L12,18.68L6,15.31V8.69L12,12V5.32M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z" /></svg>',
+  },
+  {
+    key: 'HexagonSlice6Outlined',
+    svg: '<svg id="mdi-hexagon-slice-6" viewBox="0 0 24 24"><path d="M12,5.32L18,8.69V15.31L12,18.68L6,15.31V8.69L12,5.32M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z" /></svg>',
+  },
+  {
+    key: 'HexagramOutlined',
+    svg: '<svg id="mdi-hexagram" viewBox="0 0 24 24"><path d="M14.5,7.66L20.64,6.97L17,12L20.68,16.97L14.5,16.32L12.03,22L9.5,16.34L3.36,17.03L7,12L3.32,7.03L9.5,7.68L11.97,2L14.5,7.66Z" /></svg>',
+  },
+  {
+    key: 'HexagramOutlineOutlined',
+    svg: '<svg id="mdi-hexagram-outline" viewBox="0 0 24 24"><path d="M12,7L13.3,9.8L16.5,9.4L14.5,12L16.4,14.5L13.2,14.1L12,17L10.7,14.2L7.5,14.6L9.5,12L7.6,9.5L10.8,9.9L12,7M12,2L9.5,7.7L3.3,7L7,12L3.4,17L9.6,16.3L12,22L14.5,16.3L20.7,16.9L17,12L20.6,7L14.4,7.7L12,2Z" /></svg>',
+  },
+  {
+    key: 'HydroPowerOutlined',
+    svg: '<svg id="mdi-hydro-power" viewBox="0 0 24 24"><path d="M17.12 3.55A2 2 0 0 0 15.2 4.95L14.4 7.5A3 3 0 0 0 13.33 7.74L11.5 5.77L10.17 4.29A2 2 0 0 0 10.05 7.12L11.86 9.09A3 3 0 0 0 11.64 9.6A3 3 0 0 0 11.53 10.13L8.92 10.71L6.96 11.15A2 2 0 0 0 9.35 12.67L11.96 12.08A3 3 0 0 0 12.7 12.89L11.9 15.44L11.3 17.35A2 2 0 0 0 13.8 16.04L14.61 13.5A3 3 0 0 0 15.68 13.26L17.5 15.23L18.83 16.7A2 2 0 0 0 18.96 13.88L17.15 11.91A3 3 0 0 0 17.36 11.4A3 3 0 0 0 17.5 10.86L20.09 10.28L22.04 9.85A2 2 0 0 0 19.66 8.33L17.05 8.91A3 3 0 0 0 16.31 8.11L17.11 5.55L17.71 3.65A2 2 0 0 0 17.12 3.55M14.56 9A1.5 1.5 0 0 1 14.95 9.07A1.5 1.5 0 0 1 15.93 10.95A1.5 1.5 0 0 1 14.05 11.93A1.5 1.5 0 0 1 13.07 10.05A1.5 1.5 0 0 1 14.55 9M8 13.67C6.78 14.53 5.39 15 4 15H2V17H4C5.37 17 6.74 16.65 8 16C8.77 16.4 9.58 16.66 10.41 16.81L10.94 15.14L11.03 14.88C9.97 14.73 8.93 14.32 8 13.67M20.45 15C20.5 15.7 20.33 16.41 19.91 17C19.93 17 19.97 17 20 17H22V15H20.45M8 17.67C6.78 18.53 5.39 19 4 19H2V21H4C5.37 21 6.74 20.65 8 20C10.5 21.3 13.5 21.3 16 20C17.26 20.65 18.62 21 20 21H22V19H20C18.61 19 17.22 18.53 16 17.67C13.56 19.38 10.44 19.38 8 17.67Z" /></svg>',
+  },
+  {
+    key: 'InformationOffOutlineOutlined',
+    svg: '<svg id="mdi-information-off-outline" viewBox="0 0 24 24"><path d="M22.1 21.5L2.4 1.7L1.1 3L4.1 6C2.8 7.6 2 9.7 2 12C2 17.5 6.5 22 12 22C14.3 22 16.4 21.2 18 19.9L20.8 22.7L22.1 21.5M12 20C7.6 20 4 16.4 4 12C4 10.3 4.6 8.7 5.5 7.4L11 12.9V17H13V14.9L16.6 18.5C15.3 19.4 13.7 20 12 20M8.2 5L6.7 3.5C8.3 2.6 10.1 2 12 2C17.5 2 22 6.5 22 12C22 13.9 21.4 15.7 20.5 17.3L19 15.8C19.6 14.7 20 13.4 20 12C20 7.6 16.4 4 12 4C10.6 4 9.3 4.4 8.2 5M11 7H13V9H11V7Z" /></svg>',
+  },
+  {
+    key: 'InformationOutlineOutlined',
+    svg: '<svg id="mdi-information-outline" viewBox="0 0 24 24"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>',
+  },
+  {
+    key: 'KettleOffOutlineOutlined',
+    svg: '<svg id="mdi-kettle-off-outline" viewBox="0 0 24 24"><path d="M22.1 21.5L2.4 1.7L1.1 3L4.7 6.6C4.3 7.3 4 8.1 4 9C4 10.2 4.5 11.3 5.4 12.3C4.5 13.5 4 15 4 16.5V20C4 21.1 4.9 22 6 22H19C19.3 22 19.6 21.9 19.9 21.8L20.8 22.7L22.1 21.5M8.2 10.1L7.6 10.4C7.2 10 7 9.5 7 9V8.9L8.2 10.1M6 20V16.5C6 14.7 7.6 12.6 9.7 11.6L10.9 12.8C9.1 13.4 8 14.8 8 17V18H10V17C10 16.2 10 14.5 11.4 13.3L18.1 20H6M16.9 10.1L19 8L22 11L20 13C20.7 14.1 21 15.3 21 16.5V17.8L18.9 15.7C18.5 13.9 16.8 12.1 14.6 11.4L12.2 9C13.8 8.9 15.4 9.3 16.9 10.1M9.5 6.3L7.4 4.2C8.8 3.5 10.6 3 12.5 3C14.6 3 16.6 3.5 18.3 4.7L16.3 6.7C15.3 6.1 13.9 5.7 12.5 5.7C11.4 5.7 10.3 5.9 9.5 6.3Z" /></svg>',
+  },
+  {
+    key: 'KettleOutlineOutlined',
+    svg: '<svg id="mdi-kettle-outline" viewBox="0 0 24 24"><path d="M12.5 3C7.8 3 4 5.7 4 9C4 10.2 4.5 11.3 5.4 12.3A6.8 6.8 0 0 0 4 16.5V20C4 21.1 4.9 22 6 22H19A2 2 0 0 0 21 20V16.5C21 15.3 20.7 14.1 20 13L22 11L19 8L16.9 10.1A9.2 9.2 0 0 0 7.6 10.4A2 2 0 0 1 7 9C7 7.2 9.5 5.7 12.5 5.7C13.9 5.7 15.3 6.1 16.3 6.7L18.3 4.7A10 10 0 0 0 12.5 3M12.5 11C16 11 19 14 19 16.5V20H6V16.5C6 14 9 11 12.5 11M13 12.5C10 12.5 8 14 8 17V18H10V17C10 16 10 13.5 13 12.5Z" /></svg>',
+  },
+  {
+    key: 'LanCheckOutlined',
+    svg: '<svg id="mdi-lan-check" viewBox="0 0 24 24"><path d="M4 1C2.89 1 2 1.89 2 3V7C2 8.11 2.89 9 4 9H1V11H13V9H10C11.11 9 12 8.11 12 7V3C12 1.89 11.11 1 10 1H4M4 3H10V7H4V3M14 13C12.89 13 12 13.89 12 15V19C12 20.11 12.89 21 14 21H11V23H23V21H20C21.11 21 22 20.11 22 19V15C22 13.89 21.11 13 20 13H14M14 15H20V19H14V15M5.5 20.5L10.5 15.5L9 14L5.5 17.5L3.5 15.5L2 17L5.5 20.5Z" /></svg>',
+  },
+  {
+    key: 'LanDisconnectOutlined',
+    svg: '<svg id="mdi-lan-disconnect" viewBox="0 0 24 24"><path d="M4,1C2.89,1 2,1.89 2,3V7C2,8.11 2.89,9 4,9H1V11H13V9H10C11.11,9 12,8.11 12,7V3C12,1.89 11.11,1 10,1H4M4,3H10V7H4V3M14,13C12.89,13 12,13.89 12,15V19C12,20.11 12.89,21 14,21H11V23H23V21H20C21.11,21 22,20.11 22,19V15C22,13.89 21.11,13 20,13H14M3.88,13.46L2.46,14.88L4.59,17L2.46,19.12L3.88,20.54L6,18.41L8.12,20.54L9.54,19.12L7.41,17L9.54,14.88L8.12,13.46L6,15.59L3.88,13.46M14,15H20V19H14V15Z" /></svg>',
+  },
+  {
+    key: 'LedOffOutlined',
+    svg: '<svg id="mdi-led-off" viewBox="0 0 24 24"><path d="M12,6A4,4 0 0,0 8,10V16H6V18H9V23H11V18H13V23H15V18H18V16H16V10A4,4 0 0,0 12,6Z" /></svg>',
+  },
+  {
+    key: 'LedOnOutlined',
+    svg: '<svg id="mdi-led-on" viewBox="0 0 24 24"><path d="M11,0V4H13V0H11M18.3,2.29L15.24,5.29L16.64,6.71L19.7,3.71L18.3,2.29M5.71,2.29L4.29,3.71L7.29,6.71L8.71,5.29L5.71,2.29M12,6A4,4 0 0,0 8,10V16H6V18H9V23H11V18H13V23H15V18H18V16H16V10A4,4 0 0,0 12,6M2,9V11H6V9H2M18,9V11H22V9H18Z" /></svg>',
+  },
+  {
+    key: 'LedOutlineOutlined',
+    svg: '<svg id="mdi-led-outline" viewBox="0 0 24 24"><path d="M12,6A4,4 0 0,0 8,10V16H6V18H9V23H11V18H13V23H15V18H18V16H16V10A4,4 0 0,0 12,6M12,8A2,2 0 0,1 14,10V15H10V10A2,2 0 0,1 12,8Z" /></svg>',
+  },
+  {
+    key: 'LedVariantOffOutlined',
+    svg: '<svg id="mdi-led-variant-off" viewBox="0 0 24 24"><path d="M12,3C10.05,3 8.43,4.4 8.08,6.25L16.82,15H18V13H16V7A4,4 0 0,0 12,3M3.28,4L2,5.27L8,11.27V13H6V15H9V21H11V15H11.73L13,16.27V21H15V18.27L18.73,22L20,20.72L15,15.72L8,8.72L3.28,4Z" /></svg>',
+  },
+  {
+    key: 'LedVariantOnOutlined',
+    svg: '<svg id="mdi-led-variant-on" viewBox="0 0 24 24"><path d="M12,3A4,4 0 0,0 8,7V13H6V15H9V21H11V15H13V21H15V15H18V13H16V7A4,4 0 0,0 12,3Z" /></svg>',
+  },
+  {
+    key: 'LedVariantOutlineOutlined',
+    svg: '<svg id="mdi-led-variant-outline" viewBox="0 0 24 24"><path d="M12,3A4,4 0 0,0 8,7V13H6V15H9V21H11V15H13V21H15V15H18V13H16V7A4,4 0 0,0 12,3M12,5A2,2 0 0,1 14,7V12H10V7A2,2 0 0,1 12,5Z" /></svg>',
+  },
+  {
+    key: 'LightSwitchOutlined',
+    svg: '<svg id="mdi-light-switch" viewBox="0 0 24 24"><path d="M8 6V18H16V6H8M14 10H10V8H14V10M19.4 1.6C19 1.2 18.5 1 18 1H6C5.5 1 5 1.2 4.6 1.6C4.2 2 4 2.5 4 3V21C4 21.5 4.2 22 4.6 22.4C5 22.8 5.5 23 6 23H18C18.5 23 19 22.8 19.4 22.4C19.8 22 20 21.5 20 21V3C20 2.5 19.8 2 19.4 1.6M18 21H6V3H18V21Z" /></svg>',
+  },
+  {
+    key: 'LightbulbOutlined',
+    svg: '<svg id="mdi-lightbulb" viewBox="0 0 24 24"><path d="M12,2A7,7 0 0,0 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H15A1,1 0 0,0 16,17V14.74C17.81,13.47 19,11.38 19,9A7,7 0 0,0 12,2M9,21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9V21Z" /></svg>',
+  },
+  {
+    key: 'LightbulbAutoOutlined',
+    svg: '<svg id="mdi-lightbulb-auto" viewBox="0 0 24 24"><path d="M9 2C5.13 2 2 5.13 2 9C2 11.38 3.19 13.47 5 14.74V17C5 17.55 5.45 18 6 18H12C12.55 18 13 17.55 13 17V14.74C14.81 13.47 16 11.38 16 9C16 5.13 12.87 2 9 2M6 21C6 21.55 6.45 22 7 22H11C11.55 22 12 21.55 12 21V20H6V21M19 13H17L13.8 22H15.7L16.4 20H19.6L20.3 22H22.2L19 13M16.85 18.65L18 15L19.15 18.65H16.85Z" /></svg>',
+  },
+  {
+    key: 'LightbulbAutoOutlineOutlined',
+    svg: '<svg id="mdi-lightbulb-auto-outline" viewBox="0 0 24 24"><path d="M9 2C12.87 2 16 5.13 16 9C16 11.38 14.81 13.47 13 14.74V17C13 17.55 12.55 18 12 18H6C5.45 18 5 17.55 5 17V14.74C3.19 13.47 2 11.38 2 9C2 5.13 5.13 2 9 2M6 21V20H12V21C12 21.55 11.55 22 11 22H7C6.45 22 6 21.55 6 21M9 4C6.24 4 4 6.24 4 9C4 11.05 5.23 12.81 7 13.58V16H11V13.58C12.77 12.81 14 11.05 14 9C14 6.24 11.76 4 9 4M19 13H17L13.8 22H15.7L16.4 20H19.6L20.3 22H22.2L19 13M16.85 18.65L18 15L19.15 18.65H16.85Z" /></svg>',
+  },
+  {
+    key: 'LightbulbCflOutlined',
+    svg: '<svg id="mdi-lightbulb-cfl" viewBox="0 0 24 24"><path d="M10.5 2C11.88 2 13 3.12 13 4.5V14H14V4.47C14 3.56 13.63 2.7 13 2.05C13.17 2 13.33 2 13.5 2C14.88 2 16 3.12 16 4.5V14H17V17C17 17.55 16.55 18 16 18H8C7.45 18 7 17.55 7 17V14H8V4.5C8 3.12 9.12 2 10.5 2M10.5 4C10.22 4 10 4.22 10 4.5V14H11V4.5C11 4.22 10.78 4 10.5 4M9 20H15V21C15 21.55 14.55 22 14 22H10C9.45 22 9 21.55 9 21V20Z" /></svg>',
+  },
+  {
+    key: 'LightbulbCflOffOutlined',
+    svg: '<svg id="mdi-lightbulb-cfl-off" viewBox="0 0 24 24"><path d="M14 4.47C14 3.56 13.63 2.7 13 2.05C13.17 2 13.33 2 13.5 2C14.88 2 16 3.12 16 4.5V14H17V15.18L14 12.18V4.5L14 4.47M10 4.5C10 4.22 10.22 4 10.5 4S11 4.22 11 4.5V9.18L13 11.18V4.5C13 3.12 11.88 2 10.5 2S8 3.12 8 4.5V6.18L10 8.18V4.5M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21M20 20.72L18.73 22L14.73 18H8C7.45 18 7 17.55 7 17V14H8V11.27L2 5.27L3.28 4L20 20.72Z" /></svg>',
+  },
+  {
+    key: 'LightbulbCflSpiralOutlined',
+    svg: '<svg id="mdi-lightbulb-cfl-spiral" viewBox="0 0 24 24"><path d="M11 2C10.84 2 10.69 2.03 10.55 2.1L8.55 3.1C7.56 3.66 8 5 9 5C9.16 5 9.32 4.95 9.45 4.9L11.45 3.9C12.43 3.36 12 2 11 2M15 4C14.83 4 14.69 4.03 14.55 4.1L8.55 7.1C7.56 7.68 8 9 9 9C9.18 9 9.32 8.95 9.45 8.9L15.45 5.9C16.41 5.43 16 4 15 4M15 8C14.84 8 14.69 8.03 14.55 8.1L8.7 11.03C8.2 11.25 8 11.6 8 12V14H7V17C7 17.55 7.44 18 8 18H16C16.55 18 17 17.55 17 17V14H16V13C16 12.44 15.55 12 15 12C14.45 12 14 12.45 14 13V14H10V12.62L15.45 9.9C16.42 9.34 16 8 15 8M9 20V21C9 21.57 9.46 22 10 22H14C14.56 22 15 21.55 15 21V20" /></svg>',
+  },
+  {
+    key: 'LightbulbCflSpiralOffOutlined',
+    svg: '<svg id="mdi-lightbulb-cfl-spiral-off" viewBox="0 0 24 24"><path d="M15.45 9.9L13.88 10.68L12.38 9.18L14.55 8.1C14.69 8.03 14.84 8 15 8C16 8 16.42 9.34 15.45 9.9M11.22 8L15.45 5.9C16.41 5.43 16 4 15 4C14.83 4 14.69 4.03 14.55 4.1L9.72 6.5L11.22 8M20.84 22.73L16.09 18H8C7.44 18 7 17.55 7 17V14H8V12C8 11.6 8.2 11.25 8.7 11.03L9 10.88L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M12.11 14L10.5 12.38L10 12.62V14H12.11M9 21C9 21.57 9.46 22 10 22H14C14.56 22 15 21.55 15 21V20H9V21M9 5C9.16 5 9.32 4.95 9.45 4.9L11.45 3.9C12.43 3.36 12 2 11 2C10.84 2 10.69 2.03 10.55 2.1L8.55 3.1C7.56 3.66 8 5 9 5Z" /></svg>',
+  },
+  {
+    key: 'LightbulbGroupOutlined',
+    svg: '<svg id="mdi-lightbulb-group" viewBox="0 0 24 24"><path d="M15 14V16A1 1 0 0 1 14 17H10A1 1 0 0 1 9 16V14A5 5 0 1 1 15 14M14 18H10V19A1 1 0 0 0 11 20H13A1 1 0 0 0 14 19M7 19V18H5V19A1 1 0 0 0 6 20H7.17A2.93 2.93 0 0 1 7 19M5 10A6.79 6.79 0 0 1 5.68 7A4 4 0 0 0 4 14.45V16A1 1 0 0 0 5 17H7V14.88A6.92 6.92 0 0 1 5 10M17 18V19A2.93 2.93 0 0 1 16.83 20H18A1 1 0 0 0 19 19V18M18.32 7A6.79 6.79 0 0 1 19 10A6.92 6.92 0 0 1 17 14.88V17H19A1 1 0 0 0 20 16V14.45A4 4 0 0 0 18.32 7Z" /></svg>',
+  },
+  {
+    key: 'LightbulbGroupOffOutlined',
+    svg: '<svg id="mdi-lightbulb-group-off" viewBox="0 0 24 24"><path d="M20.84 22.73L18.09 20C18.06 20 18.03 20 18 20H16.83C16.94 19.68 17 19.34 17 19V18.89L14.75 16.64C14.57 16.86 14.31 17 14 17H10C9.45 17 9 16.55 9 16V14C7.4 12.8 6.74 10.84 7.12 9L5.5 7.4C5.18 8.23 5 9.11 5 10C5 11.83 5.72 13.58 7 14.88V17H5C4.45 17 4 16.55 4 16V14.45C2.86 13.79 2.12 12.62 2 11.31C1.85 9.27 3.25 7.5 5.2 7.09L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 6C13.22 4.67 10.86 4.72 9.13 5.93L16.08 12.88C17.63 10.67 17.17 7.63 15 6M19.79 16.59C19.91 16.42 20 16.22 20 16V14.45C21.91 13.34 22.57 10.9 21.46 9C20.8 7.85 19.63 7.11 18.32 7C18.77 7.94 19 8.96 19 10C19 11.57 18.47 13.09 17.5 14.31L19.79 16.59M10 19C10 19.55 10.45 20 11 20H13C13.55 20 14 19.55 14 19V18H10V19M7 18H5V19C5 19.55 5.45 20 6 20H7.17C7.06 19.68 7 19.34 7 19V18Z" /></svg>',
+  },
+  {
+    key: 'LightbulbGroupOffOutlineOutlined',
+    svg: '<svg id="mdi-lightbulb-group-off-outline" viewBox="0 0 24 24"><path d="M22.11 21.46L2.39 1.73L1.11 3L5.2 7.09C3.25 7.5 1.85 9.27 2 11.31C2.12 12.62 2.86 13.79 4 14.45V16C4 16.55 4.45 17 5 17H7V14.88C5.72 13.58 5 11.83 5 10C5 9.11 5.18 8.23 5.5 7.4L7.12 9C6.74 10.84 7.4 12.8 9 14V16C9 16.55 9.45 17 10 17H14C14.31 17 14.57 16.86 14.75 16.64L17 18.89V19C17 19.34 16.94 19.68 16.83 20H18C18.03 20 18.06 20 18.09 20L20.84 22.73L22.11 21.46M9.23 11.12L10.87 12.76C10.11 12.46 9.53 11.86 9.23 11.12M13 15H11V12.89L13 14.89V15M10.57 7.37L9.13 5.93C10.86 4.72 13.22 4.67 15 6C16.26 6.94 17 8.43 17 10C17 11.05 16.67 12.05 16.08 12.88L14.63 11.43C14.86 11 15 10.5 15 10C15 8.34 13.67 7 12 7C11.5 7 11 7.14 10.57 7.37M17.5 14.31C18.47 13.09 19 11.57 19 10C19 8.96 18.77 7.94 18.32 7C19.63 7.11 20.8 7.85 21.46 9C22.57 10.9 21.91 13.34 20 14.45V16C20 16.22 19.91 16.42 19.79 16.59L17.5 14.31M10 18H14V19C14 19.55 13.55 20 13 20H11C10.45 20 10 19.55 10 19V18M7 19C7 19.34 7.06 19.68 7.17 20H6C5.45 20 5 19.55 5 19V18H7V19Z" /></svg>',
+  },
+  {
+    key: 'LightbulbGroupOutlineOutlined',
+    svg: '<svg id="mdi-lightbulb-group-outline" viewBox="0 0 24 24"><path d="M7 19A2.93 2.93 0 0 0 7.17 20H6A1 1 0 0 1 5 19V18H7M10 19A1 1 0 0 0 11 20H13A1 1 0 0 0 14 19V18H10M4 16A1 1 0 0 0 5 17H7V14.88A6.92 6.92 0 0 1 5 10A6.79 6.79 0 0 1 5.68 7A4 4 0 0 0 4 14.45M17 19A2.93 2.93 0 0 1 16.83 20H18A1 1 0 0 0 19 19V18H17M17 10A5 5 0 0 1 15 14V16A1 1 0 0 1 14 17H10A1 1 0 0 1 9 16V14A5 5 0 1 1 17 10M15 10A3 3 0 1 0 11 12.82V15H13V12.82A3 3 0 0 0 15 10M18.32 7A6.79 6.79 0 0 1 19 10A6.92 6.92 0 0 1 17 14.88V17H19A1 1 0 0 0 20 16V14.45A4 4 0 0 0 18.32 7Z" /></svg>',
+  },
+  {
+    key: 'LightbulbMultipleOutlined',
+    svg: '<svg id="mdi-lightbulb-multiple" viewBox="0 0 24 24"><path d="M17 16V18C17 18.55 16.53 19 16 19H12C11.42 19 11 18.55 11 18V16C8.77 14.34 8.32 11.21 10 9S14.77 6.34 17 8 19.63 12.79 18 15C17.69 15.38 17.35 15.72 17 16M16 20H12V21C12 21.55 12.42 22 13 22H15C15.53 22 16 21.55 16 21M7.66 15H7V16C7 16.55 7.42 17 8 17H9V16.88C8.44 16.33 8 15.7 7.66 15M13.58 5C12.46 2.47 9.5 1.33 7 2.45S3.31 6.5 4.43 9.04C4.77 9.81 5.3 10.5 6 11V13C6 13.55 6.42 14 7 14H7.28C7.07 13.35 6.97 12.68 7 12C6.97 8.29 9.87 5.21 13.58 5Z" /></svg>',
+  },
+  {
+    key: 'LightbulbMultipleOffOutlined',
+    svg: '<svg id="mdi-lightbulb-multiple-off" viewBox="0 0 24 24"><path d="M20.84 22.73L16.74 18.63C16.55 18.85 16.29 19 16 19H12C11.42 19 11 18.55 11 18V16C9.37 14.8 8.71 12.82 9.1 11L7.5 9.39C7.17 10.2 6.97 11.08 7 12C6.97 12.68 7.07 13.35 7.28 14H7C6.42 14 6 13.55 6 13V11C5.3 10.5 4.77 9.81 4.43 9.04C4 8.05 3.91 7 4.12 6L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M13.58 5C12.46 2.47 9.5 1.33 7 2.45C6.68 2.58 6.39 2.75 6.13 2.93L9.67 6.47C10.76 5.63 12.1 5.08 13.58 5M18.06 14.86C19.6 12.66 19.14 9.62 17 8C15.2 6.67 12.84 6.72 11.12 7.92L18.06 14.86M12 21C12 21.55 12.42 22 13 22H15C15.53 22 16 21.55 16 21V20H12V21M7 15V16C7 16.55 7.42 17 8 17H9V16.88C8.43 16.33 8 15.7 7.66 15H7Z" /></svg>',
+  },
+  {
+    key: 'LightbulbMultipleOffOutlineOutlined',
+    svg: '<svg id="mdi-lightbulb-multiple-off-outline" viewBox="0 0 24 24"><path d="M22.11 21.46L2.39 1.73L1.11 3L4.14 6.03C3.93 7 4 8.05 4.45 9.04C4.79 9.81 5.33 10.5 6 11V13C6 13.55 6.45 14 7 14H7.3C7.1 13.35 7 12.68 7 12C7 11.08 7.19 10.21 7.5 9.41L9.11 11C9.05 11.33 9 11.66 9 12C9 13.57 9.74 15.06 11 16V18C11 18.55 11.45 19 12 19H16C16.31 19 16.57 18.86 16.75 18.64L20.84 22.73L22.11 21.46M11.23 13.12L12.87 14.76C12.1 14.44 11.53 13.85 11.23 13.12M15 17H13V14.89L15 16.89V17M9.69 6.5L6.14 2.94C6.41 2.75 6.7 2.58 7 2.44C9.53 1.33 12.5 2.47 13.6 5C12.12 5.09 10.77 5.63 9.69 6.5M11.12 7.92C11.94 7.35 12.93 7 14 7C15.57 7 17.06 7.74 18 9C19.33 10.78 19.28 13.14 18.07 14.87L16.62 13.42C16.7 13.28 16.77 13.14 16.83 13C17.38 11.43 16.56 9.72 15 9.16C14.16 8.87 13.29 8.97 12.57 9.37L11.12 7.92M7.68 15C8 15.7 8.46 16.33 9 16.88V17H8C7.45 17 7 16.55 7 16V15H7.68M12 20H16V21C16 21.55 15.55 22 15 22H13C12.45 22 12 21.55 12 21V20Z" /></svg>',
+  },
+  {
+    key: 'LightbulbMultipleOutlineOutlined',
+    svg: '<svg id="mdi-lightbulb-multiple-outline" viewBox="0 0 24 24"><path d="M12 21C12 21.55 12.45 22 13 22H15C15.55 22 16 21.55 16 21V20H12M14 7C11.24 7 9 9.24 9 12C9 13.57 9.74 15.06 11 16V18C11 18.55 11.45 19 12 19H16C16.55 19 17 18.55 17 18V16C19.21 14.34 19.66 11.21 18 9C17.06 7.74 15.57 7 14 7M15 14.82V17H13V14.82C11.44 14.27 10.62 12.55 11.17 11C11.72 9.43 13.44 8.61 15 9.16C16.56 9.72 17.38 11.43 16.83 13C16.53 13.85 15.85 14.5 15 14.82M7.68 15H7V16C7 16.55 7.45 17 8 17H9V16.88C8.46 16.33 8 15.7 7.68 15M13.6 5C12.5 2.47 9.53 1.33 7 2.45S3.34 6.5 4.45 9.04C4.79 9.81 5.33 10.5 6 11V13C6 13.55 6.45 14 7 14H7.3C7.1 13.35 7 12.68 7 12C7 8.29 9.89 5.21 13.6 5Z" /></svg>',
+  },
+  {
+    key: 'LightbulbOffOutlined',
+    svg: '<svg id="mdi-lightbulb-off" viewBox="0 0 24 24"><path d="M12,2C9.76,2 7.78,3.05 6.5,4.68L16.31,14.5C17.94,13.21 19,11.24 19,9A7,7 0 0,0 12,2M3.28,4L2,5.27L5.04,8.3C5,8.53 5,8.76 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H14.73L18.73,22L20,20.72L3.28,4M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z" /></svg>',
+  },
+  {
+    key: 'LightbulbOffOutlineOutlined',
+    svg: '<svg id="mdi-lightbulb-off-outline" viewBox="0 0 24 24"><path d="M12,2C9.76,2 7.78,3.05 6.5,4.68L7.93,6.11C8.84,4.84 10.32,4 12,4A5,5 0 0,1 17,9C17,10.68 16.16,12.16 14.89,13.06L16.31,14.5C17.94,13.21 19,11.24 19,9A7,7 0 0,0 12,2M3.28,4L2,5.27L5.04,8.3C5,8.53 5,8.76 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H14.73L18.73,22L20,20.72L3.28,4M7.23,10.5L12.73,16H10V13.58C8.68,13 7.66,11.88 7.23,10.5M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z" /></svg>',
+  },
+  {
+    key: 'LightbulbOnOutlined',
+    svg: '<svg id="mdi-lightbulb-on" viewBox="0 0 24 24"><path d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z" /></svg>',
+  },
+  {
+    key: 'LightbulbOnOutlineOutlined',
+    svg: '<svg id="mdi-lightbulb-on-outline" viewBox="0 0 24 24"><path d="M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z" /></svg>',
+  },
+  {
+    key: 'LightbulbOutlineOutlined',
+    svg: '<svg id="mdi-lightbulb-outline" viewBox="0 0 24 24"><path d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z" /></svg>',
+  },
+  {
+    key: 'LightbulbSpotOutlined',
+    svg: '<svg id="mdi-lightbulb-spot" viewBox="0 0 24 24"><path d="M9 19H11V22H9L9 19M13 22H15V19H13V22M2 2V4H22V2H2M9 14L9 17H15V14C17.5 12.57 20 11 20 6H4C4 11 6.5 12.57 9 14Z" /></svg>',
+  },
+  {
+    key: 'LightbulbSpotOffOutlined',
+    svg: '<svg id="mdi-lightbulb-spot-off" viewBox="0 0 24 24"><path d="M20.84 22.73L15.11 17H9L9 14C6.5 12.57 4 11 4 6V5.89L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M22 4V2H5.2L7.2 4H22M20 6H9.2L16.37 13.17C18.33 11.87 20 10.07 20 6M13 22H15V19H13V22M9 22H11V19H9L9 22Z" /></svg>',
+  },
+  {
+    key: 'LightbulbVariantOutlined',
+    svg: '<svg id="mdi-lightbulb-variant" viewBox="0 0 24 24"><path d="M9 20H15V21C15 21.55 14.55 22 14 22H10C9.45 22 9 21.55 9 21V20M19 9C19 11.38 17.81 13.47 16 14.74V17C16 17.55 15.55 18 15 18H9C8.45 18 8 17.55 8 17V14.74C6.19 13.47 5 11.38 5 9C5 5.13 8.13 2 12 2S19 5.13 19 9M14.71 8.29C14.32 7.9 13.68 7.9 13.29 8.29L12 9.59L10.71 8.29C10.32 7.9 9.68 7.9 9.29 8.29C8.9 8.68 8.9 9.32 9.29 9.71L11 11.41V16H13V11.41L14.71 9.71C15.1 9.32 15.1 8.68 14.71 8.29Z" /></svg>',
+  },
+  {
+    key: 'LightbulbVariantOutlineOutlined',
+    svg: '<svg id="mdi-lightbulb-variant-outline" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.13 15.87 2 12 2M14 13.58V16H13V11.41L14.71 9.71C15.1 9.32 15.1 8.68 14.71 8.29C14.32 7.9 13.68 7.9 13.29 8.29L12 9.59L10.71 8.29C10.32 7.9 9.68 7.9 9.29 8.29C8.9 8.68 8.9 9.32 9.29 9.71L11 11.41V16H10V13.58C8.23 12.81 7 11.05 7 9C7 6.24 9.24 4 12 4S17 6.24 17 9C17 11.05 15.77 12.81 14 13.58M9 20H15V21C15 21.55 14.55 22 14 22H10C9.45 22 9 21.55 9 21V20Z" /></svg>',
+  },
+  {
+    key: 'LinkLockOutlined',
+    svg: '<svg id="mdi-link-lock" viewBox="0 0 24 24"><path d="M23 16V15.5A2.5 2.5 0 0 0 18 15.5V16A1 1 0 0 0 17 17V21A1 1 0 0 0 18 22H23A1 1 0 0 0 24 21V17A1 1 0 0 0 23 16M22 16H19V15.5A1.5 1.5 0 0 1 22 15.5M7 8.9H11V7H7A5 5 0 0 0 7 17H11V15.1H7A3.1 3.1 0 0 1 7 8.9M8 11V13H16V11M13 15.1V17H15V15.1M17 7H13V8.9H17A3.09 3.09 0 0 1 19.94 11A5.12 5.12 0 0 1 20.5 11H21.9A5 5 0 0 0 17 7Z" /></svg>',
+  },
+  {
+    key: 'LinkOffOutlined',
+    svg: '<svg id="mdi-link-off" viewBox="0 0 24 24"><path d="M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.43 19.12,14.63 17.79,15L19.25,16.44C20.88,15.61 22,13.95 22,12A5,5 0 0,0 17,7M16,11H13.81L15.81,13H16V11M2,4.27L5.11,7.38C3.29,8.12 2,9.91 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12C3.9,10.41 5.11,9.1 6.66,8.93L8.73,11H8V13H10.73L13,15.27V17H14.73L18.74,21L20,19.74L3.27,3L2,4.27Z" /></svg>',
+  },
+  {
+    key: 'LinkVariantOutlined',
+    svg: '<svg id="mdi-link-variant" viewBox="0 0 24 24"><path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" /></svg>',
+  },
+  {
+    key: 'LinkVariantOffOutlined',
+    svg: '<svg id="mdi-link-variant-off" viewBox="0 0 24 24"><path d="M2,5.27L3.28,4L20,20.72L18.73,22L13.9,17.17L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L12.5,15.76L10.88,14.15C10.87,14.39 10.77,14.64 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C8.12,13.77 7.63,12.37 7.72,11L2,5.27M12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.79,8.97L9.38,7.55L12.71,4.22M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.2,10.54 16.61,12.5 16.06,14.23L14.28,12.46C14.23,11.78 13.94,11.11 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" /></svg>',
+  },
+  {
+    key: 'LockOutlined',
+    svg: '<svg id="mdi-lock" viewBox="0 0 24 24"><path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" /></svg>',
+  },
+  {
+    key: 'LockAlertOutlined',
+    svg: '<svg id="mdi-lock-alert" viewBox="0 0 24 24"><path d="M10 17C11.1 17 12 16.1 12 15C12 13.9 11.1 13 10 13C8.9 13 8 13.9 8 15S8.9 17 10 17M16 8C17.1 8 18 8.9 18 10V20C18 21.1 17.1 22 16 22H4C2.9 22 2 21.1 2 20V10C2 8.9 2.9 8 4 8H5V6C5 3.2 7.2 1 10 1S15 3.2 15 6V8H16M10 3C8.3 3 7 4.3 7 6V8H13V6C13 4.3 11.7 3 10 3M22 13H20V7H22V13M22 17H20V15H22V17Z" /></svg>',
+  },
+  {
+    key: 'LockAlertOutlineOutlined',
+    svg: '<svg id="mdi-lock-alert-outline" viewBox="0 0 24 24"><path d="M10 17C8.9 17 8 16.1 8 15C8 13.9 8.9 13 10 13C11.1 13 12 13.9 12 15S11.1 17 10 17M16 20V10H4V20H16M16 8C17.1 8 18 8.9 18 10V20C18 21.1 17.1 22 16 22H4C2.9 22 2 21.1 2 20V10C2 8.9 2.9 8 4 8H5V6C5 3.2 7.2 1 10 1S15 3.2 15 6V8H16M10 3C8.3 3 7 4.3 7 6V8H13V6C13 4.3 11.7 3 10 3M22 7H20V13H22V7M22 15H20V17H22V15Z" /></svg>',
+  },
+  {
+    key: 'LockCheckOutlined',
+    svg: '<svg id="mdi-lock-check" viewBox="0 0 24 24"><path d="M19 13C19.34 13 19.67 13.04 20 13.09V10C20 8.9 19.11 8 18 8H17V6C17 3.24 14.76 1 12 1S7 3.24 7 6V8H6C4.9 8 4 8.89 4 10V20C4 21.11 4.89 22 6 22H13.81C13.3 21.12 13 20.1 13 19C13 15.69 15.69 13 19 13M9 6C9 4.34 10.34 3 12 3S15 4.34 15 6V8H9V6M12 17C10.9 17 10 16.11 10 15S10.9 13 12 13C13.1 13 14 13.89 14 15C14 16.11 13.11 17 12 17M22.5 17.25L17.75 22L15 19L16.16 17.84L17.75 19.43L21.34 15.84L22.5 17.25Z" /></svg>',
+  },
+  {
+    key: 'LockCheckOutlineOutlined',
+    svg: '<svg id="mdi-lock-check-outline" viewBox="0 0 24 24"><path d="M14 15C14 16.11 13.11 17 12 17C10.89 17 10 16.1 10 15C10 13.89 10.89 13 12 13C13.11 13 14 13.9 14 15M13.09 20C13.21 20.72 13.46 21.39 13.81 22H6C4.89 22 4 21.1 4 20V10C4 8.89 4.89 8 6 8H7V6C7 3.24 9.24 1 12 1S17 3.24 17 6V8H18C19.11 8 20 8.9 20 10V13.09C19.67 13.04 19.34 13 19 13C18.66 13 18.33 13.04 18 13.09V10H6V20H13.09M9 8H15V6C15 4.34 13.66 3 12 3S9 4.34 9 6V8M21.34 15.84L17.75 19.43L16.16 17.84L15 19L17.75 22L22.5 17.25L21.34 15.84Z" /></svg>',
+  },
+  {
+    key: 'LockOpenAlertOutlineOutlined',
+    svg: '<svg id="mdi-lock-open-alert-outline" viewBox="0 0 24 24"><path d="M16 20V10H4V20H16M16 8C17.1 8 18 8.9 18 10V20C18 21.1 17.1 22 16 22H4C2.9 22 2 21.1 2 20V10C2 8.9 2.9 8 4 8H13V6C13 4.3 11.7 3 10 3S7 4.3 7 6H5C5 3.2 7.2 1 10 1S15 3.2 15 6V8H16M10 17C8.9 17 8 16.1 8 15S8.9 13 10 13 12 13.9 12 15 11.1 17 10 17M22 7H20V13H22V7M22 15H20V17H22V15Z" /></svg>',
+  },
+  {
+    key: 'LockOpenOutlineOutlined',
+    svg: '<svg id="mdi-lock-open-outline" viewBox="0 0 24 24"><path d="M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10A2,2 0 0,1 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6H7A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,17A2,2 0 0,1 10,15A2,2 0 0,1 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17Z" /></svg>',
+  },
+  {
+    key: 'LockOutlineOutlined',
+    svg: '<svg id="mdi-lock-outline" viewBox="0 0 24 24"><path d="M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" /></svg>',
+  },
+  {
+    key: 'LockResetOutlined',
+    svg: '<svg id="mdi-lock-reset" viewBox="0 0 24 24"><path d="M12.63,2C18.16,2 22.64,6.5 22.64,12C22.64,17.5 18.16,22 12.63,22C9.12,22 6.05,20.18 4.26,17.43L5.84,16.18C7.25,18.47 9.76,20 12.64,20A8,8 0 0,0 20.64,12A8,8 0 0,0 12.64,4C8.56,4 5.2,7.06 4.71,11H7.47L3.73,14.73L0,11H2.69C3.19,5.95 7.45,2 12.63,2M15.59,10.24C16.09,10.25 16.5,10.65 16.5,11.16V15.77C16.5,16.27 16.09,16.69 15.58,16.69H10.05C9.54,16.69 9.13,16.27 9.13,15.77V11.16C9.13,10.65 9.54,10.25 10.04,10.24V9.23C10.04,7.7 11.29,6.46 12.81,6.46C14.34,6.46 15.59,7.7 15.59,9.23V10.24M12.81,7.86C12.06,7.86 11.44,8.47 11.44,9.23V10.24H14.19V9.23C14.19,8.47 13.57,7.86 12.81,7.86Z" /></svg>',
+  },
+  {
+    key: 'LotionOutlined',
+    svg: '<svg id="mdi-lotion" viewBox="0 0 24 24"><path d="M15.5 6.5C15.5 5.66 17 4 17 4S18.5 5.66 18.5 6.5C18.5 7.33 17.83 8 17 8S15.5 7.33 15.5 6.5M19.5 15C20.88 15 22 13.88 22 12.5C22 10.83 19.5 8 19.5 8S17 10.83 17 12.5C17 13.88 18.12 15 19.5 15M16 12V22H4V12C4 9.03 6.16 6.57 9 6.09V4H7V2H13C14.13 2 15.15 2.39 16 3L14.56 4.44C14.1 4.17 13.57 4 13 4H11V6.09C13.84 6.57 16 9.03 16 12Z" /></svg>',
+  },
+  {
+    key: 'MagnetOutlined',
+    svg: '<svg id="mdi-magnet" viewBox="0 0 24 24"><path d="M3,7V13A9,9 0 0,0 12,22A9,9 0 0,0 21,13V7H17V13A5,5 0 0,1 12,18A5,5 0 0,1 7,13V7M17,5H21V2H17M3,5H7V2H3" /></svg>',
+  },
+  {
+    key: 'MemoryOutlined',
+    svg: '<svg id="mdi-memory" viewBox="0 0 24 24"><path d="M17,17H7V7H17M21,11V9H19V7C19,5.89 18.1,5 17,5H15V3H13V5H11V3H9V5H7C5.89,5 5,5.89 5,7V9H3V11H5V13H3V15H5V17A2,2 0 0,0 7,19H9V21H11V19H13V21H15V19H17A2,2 0 0,0 19,17V15H21V13H19V11M13,13H11V11H13M15,9H9V15H15V9Z" /></svg>',
+  },
+  {
+    key: 'MicrophoneOutlined',
+    svg: '<svg id="mdi-microphone" viewBox="0 0 24 24"><path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /></svg>',
+  },
+  {
+    key: 'MicrophoneOutlineOutlined',
+    svg: '<svg id="mdi-microphone-outline" viewBox="0 0 24 24"><path d="M17.3,11C17.3,14 14.76,16.1 12,16.1C9.24,16.1 6.7,14 6.7,11H5C5,14.41 7.72,17.23 11,17.72V21H13V17.72C16.28,17.23 19,14.41 19,11M10.8,4.9C10.8,4.24 11.34,3.7 12,3.7C12.66,3.7 13.2,4.24 13.2,4.9L13.19,11.1C13.19,11.76 12.66,12.3 12,12.3C11.34,12.3 10.8,11.76 10.8,11.1M12,14A3,3 0 0,0 15,11V5A3,3 0 0,0 12,2A3,3 0 0,0 9,5V11A3,3 0 0,0 12,14Z" /></svg>',
+  },
+  {
+    key: 'MicrophoneVariantOutlined',
+    svg: '<svg id="mdi-microphone-variant" viewBox="0 0 24 24"><path d="M9,3A4,4 0 0,1 13,7H5A4,4 0 0,1 9,3M11.84,9.82L11,18H10V19A2,2 0 0,0 12,21A2,2 0 0,0 14,19V14A4,4 0 0,1 18,10H20L19,11L20,12H18A2,2 0 0,0 16,14V19A4,4 0 0,1 12,23A4,4 0 0,1 8,19V18H7L6.16,9.82C5.67,9.32 5.31,8.7 5.13,8H12.87C12.69,8.7 12.33,9.32 11.84,9.82M9,11A1,1 0 0,0 8,12A1,1 0 0,0 9,13A1,1 0 0,0 10,12A1,1 0 0,0 9,11Z" /></svg>',
+  },
+  {
+    key: 'MicrophoneVariantOffOutlined',
+    svg: '<svg id="mdi-microphone-variant-off" viewBox="0 0 24 24"><path d="M2,5.27L3.28,4L20,20.72L18.73,22L16,19.26C15.86,21.35 14.12,23 12,23A4,4 0 0,1 8,19V18H7L6.16,9.82C5.82,9.47 5.53,9.06 5.33,8.6L2,5.27M9,3A4,4 0 0,1 13,7H8.82L6.08,4.26C6.81,3.5 7.85,3 9,3M11.84,9.82L11.82,10L9.82,8H12.87C12.69,8.7 12.33,9.32 11.84,9.82M11,18H10V19A2,2 0 0,0 12,21A2,2 0 0,0 14,19V17.27L11.35,14.62L11,18M18,10H20L19,11L20,12H18A2,2 0 0,0 16,14V14.18L14.3,12.5C14.9,11 16.33,10 18,10M8,12A1,1 0 0,0 9,13C9.21,13 9.4,12.94 9.56,12.83L8.17,11.44C8.06,11.6 8,11.79 8,12Z" /></svg>',
+  },
+  {
+    key: 'MoleculeCoOutlined',
+    svg: '<svg id="mdi-molecule-co" viewBox="0 0 24 24"><path d="M8 7C6.9 7 6 7.9 6 9V15C6 16.11 6.9 17 8 17H11V15H8V9H11V7H8M14 7C12.9 7 12 7.9 12 9V15C12 16.11 12.9 17 14 17H16C17.11 17 18 16.11 18 15V9C18 7.9 17.11 7 16 7H14M14 9H16V15H14V9" /></svg>',
+  },
+  {
+    key: 'MoleculeCo2Outlined',
+    svg: '<svg id="mdi-molecule-co2" viewBox="0 0 24 24"><path d="M5,7A2,2 0 0,0 3,9V15A2,2 0 0,0 5,17H8V15H5V9H8V7H5M11,7A2,2 0 0,0 9,9V15A2,2 0 0,0 11,17H13A2,2 0 0,0 15,15V9A2,2 0 0,0 13,7H11M11,9H13V15H11V9M16,10.5V12H19V13.5H17.5A1.5,1.5 0 0,0 16,15V18H20.5V16.5H17.5V15H19A1.5,1.5 0 0,0 20.5,13.5V12A1.5,1.5 0 0,0 19,10.5H16Z" /></svg>',
+  },
+  {
+    key: 'MotionPauseOutlined',
+    svg: '<svg id="mdi-motion-pause" viewBox="0 0 24 24"><path d="M22 12C22 6.46 17.54 2 12 2C10.83 2 9.7 2.19 8.62 2.56L9.32 4.5C10.17 4.16 11.06 3.97 12 3.97C16.41 3.97 20.03 7.59 20.03 12C20.03 16.41 16.41 20.03 12 20.03C7.59 20.03 3.97 16.41 3.97 12C3.97 11.06 4.16 10.12 4.5 9.28L2.56 8.62C2.19 9.7 2 10.83 2 12C2 17.54 6.46 22 12 22C17.54 22 22 17.54 22 12M5.47 3.97C6.32 3.97 7 4.68 7 5.47C7 6.32 6.32 7 5.47 7C4.68 7 3.97 6.32 3.97 5.47C3.97 4.68 4.68 3.97 5.47 3.97M18 12C18 8.67 15.33 6 12 6C8.67 6 6 8.67 6 12C6 15.33 8.67 18 12 18C15.33 18 18 15.33 18 12M11 9V15H9V9M15 9V15H13V9" /></svg>',
+  },
+  {
+    key: 'MotionPauseOutlineOutlined',
+    svg: '<svg id="mdi-motion-pause-outline" viewBox="0 0 24 24"><path d="M22 12C22 6.46 17.54 2 12 2C10.83 2 9.7 2.19 8.62 2.56L9.32 4.5C10.17 4.16 11.06 3.97 12 3.97C16.41 3.97 20.03 7.59 20.03 12C20.03 16.41 16.41 20.03 12 20.03C7.59 20.03 3.97 16.41 3.97 12C3.97 11.06 4.16 10.12 4.5 9.28L2.56 8.62C2.19 9.7 2 10.83 2 12C2 17.54 6.46 22 12 22C17.54 22 22 17.54 22 12M5.47 7C4.68 7 3.97 6.32 3.97 5.47C3.97 4.68 4.68 3.97 5.47 3.97C6.32 3.97 7 4.68 7 5.47C7 6.32 6.32 7 5.47 7M9 9H11V15H9M13 9H15V15H13" /></svg>',
+  },
+  {
+    key: 'MotionPlayOutlined',
+    svg: '<svg id="mdi-motion-play" viewBox="0 0 24 24"><path d="M22 12C22 6.46 17.54 2 12 2C10.83 2 9.7 2.19 8.62 2.56L9.32 4.5C10.17 4.16 11.06 3.97 12 3.97C16.41 3.97 20.03 7.59 20.03 12C20.03 16.41 16.41 20.03 12 20.03C7.59 20.03 3.97 16.41 3.97 12C3.97 11.06 4.16 10.12 4.5 9.28L2.56 8.62C2.19 9.7 2 10.83 2 12C2 17.54 6.46 22 12 22C17.54 22 22 17.54 22 12M5.47 3.97C6.32 3.97 7 4.68 7 5.47C7 6.32 6.32 7 5.47 7C4.68 7 3.97 6.32 3.97 5.47C3.97 4.68 4.68 3.97 5.47 3.97M18 12C18 8.67 15.33 6 12 6C8.67 6 6 8.67 6 12C6 15.33 8.67 18 12 18C15.33 18 18 15.33 18 12M15 12L10 15V9" /></svg>',
+  },
+  {
+    key: 'MotionPlayOutlineOutlined',
+    svg: '<svg id="mdi-motion-play-outline" viewBox="0 0 24 24"><path d="M10 16.5L16 12L10 7.5M22 12C22 6.46 17.54 2 12 2C10.83 2 9.7 2.19 8.62 2.56L9.32 4.5C10.17 4.16 11.06 3.97 12 3.97C16.41 3.97 20.03 7.59 20.03 12C20.03 16.41 16.41 20.03 12 20.03C7.59 20.03 3.97 16.41 3.97 12C3.97 11.06 4.16 10.12 4.5 9.28L2.56 8.62C2.19 9.7 2 10.83 2 12C2 17.54 6.46 22 12 22C17.54 22 22 17.54 22 12M5.47 3.97C6.32 3.97 7 4.68 7 5.47C7 6.32 6.32 7 5.47 7C4.68 7 3.97 6.32 3.97 5.47C3.97 4.68 4.68 3.97 5.47 3.97Z" /></svg>',
+  },
+  {
+    key: 'MuffinOutlined',
+    svg: '<svg id="mdi-muffin" viewBox="0 0 24 24"><path d="M16,5C16,5 15,2 12,2C9,2 8,5 8,5C6,5 4,7 4,9C1.3,9 1.3,13 4,13H20C22.7,13 22.7,9 20,9C20,7 18,5 16,5M5,15L7,22H9L8,15H5M10,15L11,22H13L14,15H10M16,15L15,22H17L19,15H16Z" /></svg>',
+  },
+  {
+    key: 'MusicNoteEighthOutlined',
+    svg: '<svg id="mdi-music-note-eighth" viewBox="0 0 24 24"><path d="M12 3V13.55C11.41 13.21 10.73 13 10 13C7.79 13 6 14.79 6 17S7.79 21 10 21 14 19.21 14 17V7H18V3H12Z" /></svg>',
+  },
+  {
+    key: 'MusicNoteOffOutlined',
+    svg: '<svg id="mdi-music-note-off" viewBox="0 0 24 24"><path d="M4.27 3L3 4.27L12 13.27V13.55C11.41 13.21 10.73 13 10 13C7.79 13 6 14.79 6 17S7.79 21 10 21 14 19.21 14 17V15.27L19.73 21L21 19.73L4.27 3M14 7H18V3H12V8.18L14 10.18Z" /></svg>',
+  },
+  {
+    key: 'NetworkOutlined',
+    svg: '<svg id="mdi-network" viewBox="0 0 24 24"><path d="M17,3A2,2 0 0,1 19,5V15A2,2 0 0,1 17,17H13V19H14A1,1 0 0,1 15,20H22V22H15A1,1 0 0,1 14,23H10A1,1 0 0,1 9,22H2V20H9A1,1 0 0,1 10,19H11V17H7C5.89,17 5,16.1 5,15V5A2,2 0 0,1 7,3H17Z" /></svg>',
+  },
+  {
+    key: 'NetworkOffOutlined',
+    svg: '<svg id="mdi-network-off" viewBox="0 0 24 24"><path d="M1,5.27L5,9.27V15A2,2 0 0,0 7,17H11V19H10A1,1 0 0,0 9,20H2V22H9A1,1 0 0,0 10,23H14A1,1 0 0,0 15,22H17.73L19.73,24L21,22.72L2.28,4L1,5.27M15,20A1,1 0 0,0 14,19H13V17.27L15.73,20H15M17.69,16.87L5.13,4.31C5.41,3.55 6.14,3 7,3H17A2,2 0 0,1 19,5V15C19,15.86 18.45,16.59 17.69,16.87M22,20V21.18L20.82,20H22Z" /></svg>',
+  },
+  {
+    key: 'NetworkOffOutlineOutlined',
+    svg: '<svg id="mdi-network-off-outline" viewBox="0 0 24 24"><path d="M1.04,5.27L5,9.23V15A2,2 0 0,0 7,17H11V19H10A1,1 0 0,0 9,20H2V22H9A1,1 0 0,0 10,23H14A1,1 0 0,0 15,22H17.77L19.77,24L21.04,22.72L2.32,4L1.04,5.27M7,11.23L10.77,15H7V11.23M15,20A1,1 0 0,0 14,19H13V17.23L15.77,20H15M22,20V21.14L20.86,20H22M7,6.14L5.14,4.28C5.43,3.53 6.16,3 7,3H17A2,2 0 0,1 19,5V15C19,15.85 18.47,16.57 17.72,16.86L15.86,15H17V5H7V6.14Z" /></svg>',
+  },
+  {
+    key: 'NetworkOutlineOutlined',
+    svg: '<svg id="mdi-network-outline" viewBox="0 0 24 24"><path d="M15,20A1,1 0 0,0 14,19H13V17H17A2,2 0 0,0 19,15V5A2,2 0 0,0 17,3H7A2,2 0 0,0 5,5V15A2,2 0 0,0 7,17H11V19H10A1,1 0 0,0 9,20H2V22H9A1,1 0 0,0 10,23H14A1,1 0 0,0 15,22H22V20H15M7,15V5H17V15H7Z" /></svg>',
+  },
+  {
+    key: 'OilOutlined',
+    svg: '<svg id="mdi-oil" viewBox="0 0 24 24"><path d="M22,12.5C22,12.5 24,14.67 24,16A2,2 0 0,1 22,18A2,2 0 0,1 20,16C20,14.67 22,12.5 22,12.5M6,6H10A1,1 0 0,1 11,7A1,1 0 0,1 10,8H9V10H11C11.74,10 12.39,10.4 12.73,11L19.24,7.24L22.5,9.13C23,9.4 23.14,10 22.87,10.5C22.59,10.97 22,11.14 21.5,10.86L19.4,9.65L15.75,15.97C15.41,16.58 14.75,17 14,17H5A2,2 0 0,1 3,15V12A2,2 0 0,1 5,10H7V8H6A1,1 0 0,1 5,7A1,1 0 0,1 6,6M5,12V15H14L16.06,11.43L12.6,13.43L11.69,12H5M0.38,9.21L2.09,7.5C2.5,7.11 3.11,7.11 3.5,7.5C3.89,7.89 3.89,8.5 3.5,8.91L1.79,10.62C1.4,11 0.77,11 0.38,10.62C0,10.23 0,9.6 0.38,9.21Z" /></svg>',
+  },
+  {
+    key: 'OilLampOutlined',
+    svg: '<svg id="mdi-oil-lamp" viewBox="0 0 24 24"><path d="M5,20H16V22H5M11,5H10A2,2 0 0,0 8,7H13A2,2 0 0,0 11,5M16,8H22A2,2 0 0,1 20,10H19A4,4 0 0,0 15,14V15A4,4 0 0,1 11,19H10A4,4 0 0,1 6,15H4A2,2 0 0,1 2,13V10A2,2 0 0,1 4,8M6,10H4V13H6M19,5A2,2 0 0,1 21,7H22A2.9,2.9 0 0,0 19,4A2,2 0 0,1 17,2H16A2.9,2.9 0 0,0 19,5" /></svg>',
+  },
+  {
+    key: 'OilLevelOutlined',
+    svg: '<svg id="mdi-oil-level" viewBox="0 0 24 24"><path d="M8 18C6.67 18 5.79 18.79 5.29 19.29S4.67 20 4 20 3.21 19.79 2.71 19.29C2.35 18.93 1.79 18.42 1 18.16V20.41C1.09 20.5 1.18 20.59 1.29 20.71C1.79 21.21 2.67 22 4 22S6.21 21.21 6.71 20.71 7.33 20 8 20 8.79 20.21 9.29 20.71C9.73 21.14 10.44 21.8 11.5 21.96C11.66 22 11.83 22 12 22C13.33 22 14.21 21.21 14.71 20.71S15.33 20 16 20 16.79 20.21 17.29 20.71 18.67 22 20 22 22.21 21.21 22.71 20.71C22.82 20.59 22.91 20.5 23 20.41V18.16C22.21 18.42 21.65 18.93 21.29 19.29C20.79 19.79 20.67 20 20 20S19.21 19.79 18.71 19.29 17.33 18 16 18 13.79 18.79 13.29 19.29 12.67 20 12 20C11.78 20 11.63 19.97 11.5 19.92C11.22 19.82 11.05 19.63 10.71 19.29C10.21 18.79 9.33 18 8 18M22 10.5C22 10.5 24 12.67 24 14C24 15.1 23.1 16 22 16S20 15.1 20 14C20 12.67 22 10.5 22 10.5M22.5 7.13L19.24 5.24L12.73 9C12.39 8.4 11.74 8 11 8H9V6H10C10.55 6 11 5.55 11 5S10.55 4 10 4H6C5.45 4 5 4.45 5 5S5.45 6 6 6H7V8H5C3.9 8 3 8.9 3 10V13C3 14.1 3.9 15 5 15H14C14.75 15 15.41 14.58 15.75 13.97L19.4 7.65L21.5 8.86C22 9.14 22.59 8.97 22.87 8.5C23.14 8 23 7.4 22.5 7.13M14 13H5V10H11.69L12.6 11.43L16.06 9.43L14 13M3.5 6.92L1.79 8.62A1 1 0 0 1 .38 7.21L2.09 5.5A1 1 0 0 1 3.5 5.5C3.89 5.89 3.89 6.5 3.5 6.92Z" /></svg>',
+  },
+  {
+    key: 'OilTemperatureOutlined',
+    svg: '<svg id="mdi-oil-temperature" viewBox="0 0 24 24"><path d="M10 5H13V3H10V2C10 1.4 9.6 1 9 1S8 1.4 8 2V15.3C7.4 15.6 7 16.3 7 17C7 18.1 7.9 19 9 19S11 18.1 11 17C11 16.3 10.6 15.6 10 15.3V13H13V11H10V9H13V7H10V5M22 17.5C22 17.5 24 19.7 24 21C24 22.1 23.1 23 22 23S20 22.1 20 21C20 19.7 22 17.5 22 17.5M22.9 15.5C22.6 16 22 16.1 21.5 15.9L19.4 14.7L15.8 21C15.5 21.6 14.8 22 14 22H5C3.9 22 3 21.1 3 20V17C3 15.9 3.9 15 5 15V20H14L16.1 16.4L13 18.2V15.8L19.2 12.2L22.5 14.1C23 14.4 23.1 15 22.9 15.5M3.5 13.9L1.8 15.6C1.4 16 .8 16 .4 15.6S0 14.6.4 14.2L2.1 12.5C2.5 12.1 3.1 12.1 3.5 12.5S3.9 13.5 3.5 13.9Z" /></svg>',
+  },
+  {
+    key: 'OpacityOutlined',
+    svg: '<svg id="mdi-opacity" viewBox="0 0 24 24"><path d="M17.66,8L12,2.35L6.34,8C4.78,9.56 4,11.64 4,13.64C4,15.64 4.78,17.75 6.34,19.31C7.9,20.87 9.95,21.66 12,21.66C14.05,21.66 16.1,20.87 17.66,19.31C19.22,17.75 20,15.64 20,13.64C20,11.64 19.22,9.56 17.66,8M6,14C6,12 6.62,10.73 7.76,9.6L12,5.27L16.24,9.65C17.38,10.77 18,12 18,14H6Z" /></svg>',
+  },
+  {
+    key: 'PackageVariantOutlined',
+    svg: '<svg id="mdi-package-variant" viewBox="0 0 24 24"><path d="M2,10.96C1.5,10.68 1.35,10.07 1.63,9.59L3.13,7C3.24,6.8 3.41,6.66 3.6,6.58L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.66,6.72 20.82,6.88 20.91,7.08L22.36,9.6C22.64,10.08 22.47,10.69 22,10.96L21,11.54V16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V10.96C2.7,11.13 2.32,11.14 2,10.96M12,4.15V4.15L12,10.85V10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V12.69L14,15.59C13.67,15.77 13.3,15.76 13,15.6V19.29L19,15.91M13.85,13.36L20.13,9.73L19.55,8.72L13.27,12.35L13.85,13.36Z" /></svg>',
+  },
+  {
+    key: 'PackageVariantClosedOutlined',
+    svg: '<svg id="mdi-package-variant-closed" viewBox="0 0 24 24"><path d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L10.11,5.22L16,8.61L17.96,7.5L12,4.15M6.04,7.5L12,10.85L13.96,9.75L8.08,6.35L6.04,7.5M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z" /></svg>',
+  },
+  {
+    key: 'PinOffOutlineOutlined',
+    svg: '<svg id="mdi-pin-off-outline" viewBox="0 0 24 24"><path d="M8,6.2V4H7V2H17V4H16V12L18,14V16H17.8L14,12.2V4H10V8.2L8,6.2M20,20.7L18.7,22L12.8,16.1V22H11.2V16H6V14L8,12V11.3L2,5.3L3.3,4L20,20.7M8.8,14H10.6L9.7,13.1L8.8,14Z" /></svg>',
+  },
+  {
+    key: 'PinOutlineOutlined',
+    svg: '<svg id="mdi-pin-outline" viewBox="0 0 24 24"><path d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z" /></svg>',
+  },
+  {
+    key: 'PlusOutlined',
+    svg: '<svg id="mdi-plus" viewBox="0 0 24 24"><path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>',
+  },
+  {
+    key: 'PlusBoxOutlined',
+    svg: '<svg id="mdi-plus-box" viewBox="0 0 24 24"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" /></svg>',
+  },
+  {
+    key: 'PlusBoxMultipleOutlineOutlined',
+    svg: '<svg id="mdi-plus-box-multiple-outline" viewBox="0 0 24 24"><path d="M18 11H15V14H13V11H10V9H13V6H15V9H18M20 4V16H8V4H20M20 2H8C6.9 2 6 2.9 6 4V16C6 17.11 6.9 18 8 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M4 6H2V20C2 21.11 2.9 22 4 22H18V20H4V6Z" /></svg>',
+  },
+  {
+    key: 'PlusBoxOutlineOutlined',
+    svg: '<svg id="mdi-plus-box-outline" viewBox="0 0 24 24"><path d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z" /></svg>',
+  },
+  {
+    key: 'PlusCircleOutlineOutlined',
+    svg: '<svg id="mdi-plus-circle-outline" viewBox="0 0 24 24"><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" /></svg>',
+  },
+  {
+    key: 'PlusNetworkOutlineOutlined',
+    svg: '<svg id="mdi-plus-network-outline" viewBox="0 0 24 24"><path d="M15,20A1,1 0 0,0 14,19H13V17H17A2,2 0 0,0 19,15V5A2,2 0 0,0 17,3H7A2,2 0 0,0 5,5V15A2,2 0 0,0 7,17H11V19H10A1,1 0 0,0 9,20H2V22H9A1,1 0 0,0 10,23H14A1,1 0 0,0 15,22H22V20H15M7,15V5H17V15H7M15,11H13V13H11V11H9V9H11V7H13V9H15V11Z" /></svg>',
+  },
+  {
+    key: 'PowerOutlined',
+    svg: '<svg id="mdi-power" viewBox="0 0 24 24"><path d="M16.56,5.44L15.11,6.89C16.84,7.94 18,9.83 18,12A6,6 0 0,1 12,18A6,6 0 0,1 6,12C6,9.83 7.16,7.94 8.88,6.88L7.44,5.44C5.36,6.88 4,9.28 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12C20,9.28 18.64,6.88 16.56,5.44M13,3H11V13H13" /></svg>',
+  },
+  {
+    key: 'PowerCycleOutlined',
+    svg: '<svg id="mdi-power-cycle" viewBox="0 0 24 24"><path d="M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M12,19A7,7 0 0,1 5,12A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19M13,17H11V7H13V17Z" /></svg>',
+  },
+  {
+    key: 'PowerOffOutlined',
+    svg: '<svg id="mdi-power-off" viewBox="0 0 24 24"><path d="M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M12,19A7,7 0 0,1 5,12A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19Z" /></svg>',
+  },
+  {
+    key: 'PowerOnOutlined',
+    svg: '<svg id="mdi-power-on" viewBox="0 0 24 24"><path d="M11,3H13V21H11V3Z" /></svg>',
+  },
+  {
+    key: 'PowerPlugOutlined',
+    svg: '<svg id="mdi-power-plug" viewBox="0 0 24 24"><path d="M16,7V3H14V7H10V3H8V7H8C7,7 6,8 6,9V14.5L9.5,18V21H14.5V18L18,14.5V9C18,8 17,7 16,7Z" /></svg>',
+  },
+  {
+    key: 'PowerPlugOffOutlined',
+    svg: '<svg id="mdi-power-plug-off" viewBox="0 0 24 24"><path d="M20.84 22.73L15.31 17.2L14.5 18V21H9.5V18L6 14.5V9C6 8.7 6.1 8.41 6.25 8.14L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M18 14.5V9C18 8 17 7 16 7V3H14V7H10.2L17.85 14.65L18 14.5M10 3H8V4.8L10 6.8V3Z" /></svg>',
+  },
+  {
+    key: 'PowerPlugOffOutlineOutlined',
+    svg: '<svg id="mdi-power-plug-off-outline" viewBox="0 0 24 24"><path d="M22.11 21.46L2.39 1.73L1.11 3L6.25 8.14C6.1 8.41 6 8.7 6 9V14.5L9.5 18V21H14.5V18L15.31 17.2L20.84 22.73L22.11 21.46M13.09 16.59L12.67 17H11.33L10.92 16.59L8 13.67V9.89L13.89 15.78L13.09 16.59M12.2 9L10.2 7H14V3H16V7C17 7 18 8 18 9V14.5L17.85 14.65L16 12.8V9.09C16 9.06 15.95 9 15.92 9H12.2M10 6.8L8 4.8V3H10V6.8Z" /></svg>',
+  },
+  {
+    key: 'PowerPlugOutlineOutlined',
+    svg: '<svg id="mdi-power-plug-outline" viewBox="0 0 24 24"><path d="M16 7V3H14V7H10V3H8V7C7 7 6 8 6 9V14.5L9.5 18V21H14.5V18L18 14.5V9C18 8 17 7 16 7M16 13.67L13.09 16.59L12.67 17H11.33L10.92 16.59L8 13.67V9.09C8 9.06 8.06 9 8.09 9H15.92C15.95 9 16 9.06 16 9.09V13.67Z" /></svg>',
+  },
+  {
+    key: 'PowerSettingsOutlined',
+    svg: '<svg id="mdi-power-settings" viewBox="0 0 24 24"><path d="M15,24H17V22H15M16.56,4.44L15.11,5.89C16.84,6.94 18,8.83 18,11A6,6 0 0,1 12,17A6,6 0 0,1 6,11C6,8.83 7.16,6.94 8.88,5.88L7.44,4.44C5.36,5.88 4,8.28 4,11A8,8 0 0,0 12,19A8,8 0 0,0 20,11C20,8.28 18.64,5.88 16.56,4.44M13,2H11V12H13M11,24H13V22H11M7,24H9V22H7V24Z" /></svg>',
+  },
+  {
+    key: 'PowerSleepOutlined',
+    svg: '<svg id="mdi-power-sleep" viewBox="0 0 24 24"><path d="M18.73,18C15.4,21.69 9.71,22 6,18.64C2.33,15.31 2.04,9.62 5.37,5.93C6.9,4.25 9,3.2 11.27,3C7.96,6.7 8.27,12.39 12,15.71C13.63,17.19 15.78,18 18,18C18.25,18 18.5,18 18.73,18Z" /></svg>',
+  },
+  {
+    key: 'PowerSocketOutlined',
+    svg: '<svg id="mdi-power-socket" viewBox="0 0 24 24"><path d="M15,15H17V11H15M7,15H9V11H7M11,13H13V9H11M8.83,7H15.2L19,10.8V17H5V10.8M8,5L3,10V19H21V10L16,5H8Z" /></svg>',
+  },
+  {
+    key: 'PowerSocketAuOutlined',
+    svg: '<svg id="mdi-power-socket-au" viewBox="0 0 24 24"><path d="M4.22,2A2.22,2.22 0 0,0 2,4.22V19.78C2,21 3,22 4.22,22H19.78A2.22,2.22 0 0,0 22,19.78V4.22C22,3 21,2 19.78,2H4.22M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M8.27,7.54L6.27,11L8,12L10,8.54L8.27,7.54M15.73,7.54L14,8.54L16,12L17.73,11L15.73,7.54M11,14V18H13V14H11Z" /></svg>',
+  },
+  {
+    key: 'PowerSocketChOutlined',
+    svg: '<svg id="mdi-power-socket-ch" viewBox="0 0 24 24"><path d="M19.78 2H4.22C3 2 2 3 2 4.22V19.78C2 21 3 22 4.22 22H19.78C21 22 22 21 22 19.78V4.22C22 3 21 2 19.78 2M20 13L16.55 16.45C16.19 16.81 15.75 17 15.3 17H8.7C8.25 17 7.81 16.81 7.45 16.45L4 13C3.5 12.5 3.5 11.5 4 11L7.45 7.55C7.81 7.19 8.25 7 8.7 7H15.3C15.75 7 16.19 7.19 16.55 7.55L20 11C20.5 11.5 20.5 12.5 20 13M10.5 14C10.5 13.17 11.17 12.5 12 12.5S13.5 13.17 13.5 14 12.83 15.5 12 15.5 10.5 14.83 10.5 14M15.5 12C15.5 11.17 16.17 10.5 17 10.5S18.5 11.17 18.5 12 17.83 13.5 17 13.5 15.5 12.83 15.5 12M5.5 12C5.5 11.17 6.17 10.5 7 10.5S8.5 11.17 8.5 12 7.83 13.5 7 13.5 5.5 12.83 5.5 12Z" /></svg>',
+  },
+  {
+    key: 'PowerSocketDeOutlined',
+    svg: '<svg id="mdi-power-socket-de" viewBox="0 0 24 24"><path d="M4.22 2A2.22 2.22 0 0 0 2 4.22V19.78C2 21 3 22 4.22 22H19.78A2.22 2.22 0 0 0 22 19.78V4.22C22 3 21 2 19.78 2H4.22M11 4.07V6H13V4.07A8 8 0 0 1 20 12A8 8 0 0 1 13 19.93V18H11V19.93A8 8 0 0 1 4 12A8 8 0 0 1 11 4.07M7.5 10.5A1.5 1.5 0 0 0 6 12C6 12.83 6.66 13.5 7.5 13.5A1.5 1.5 0 0 0 9 12A1.5 1.5 0 0 0 7.5 10.5M16.5 10.5A1.5 1.5 0 0 0 15 12A1.5 1.5 0 0 0 16.5 13.5A1.5 1.5 0 0 0 18 12A1.5 1.5 0 0 0 16.5 10.5Z" /></svg>',
+  },
+  {
+    key: 'PowerSocketEuOutlined',
+    svg: '<svg id="mdi-power-socket-eu" viewBox="0 0 24 24"><path d="M7.5,10.5A1.5,1.5 0 0,1 9,12A1.5,1.5 0 0,1 7.5,13.5C6.66,13.5 6,12.83 6,12A1.5,1.5 0 0,1 7.5,10.5M16.5,10.5A1.5,1.5 0 0,1 18,12A1.5,1.5 0 0,1 16.5,13.5A1.5,1.5 0 0,1 15,12A1.5,1.5 0 0,1 16.5,10.5M4.22,2H19.78C21,2 22,3 22,4.22V19.78A2.22,2.22 0 0,1 19.78,22H4.22C3,22 2,21 2,19.78V4.22A2.22,2.22 0 0,1 4.22,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>',
+  },
+  {
+    key: 'PowerSocketFrOutlined',
+    svg: '<svg id="mdi-power-socket-fr" viewBox="0 0 24 24"><path d="M4.22 2A2.22 2.22 0 0 0 2 4.22V19.78C2 21 3 22 4.22 22H19.78A2.22 2.22 0 0 0 22 19.78V4.22C22 3 21 2 19.78 2H4.22M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20A8 8 0 0 1 4 12A8 8 0 0 1 12 4M12 6A1.5 1.5 0 0 0 10.5 7.5A1.5 1.5 0 0 0 12 9A1.5 1.5 0 0 0 13.5 7.5A1.5 1.5 0 0 0 12 6M7.5 10.5A1.5 1.5 0 0 0 6 12C6 12.83 6.66 13.5 7.5 13.5A1.5 1.5 0 0 0 9 12A1.5 1.5 0 0 0 7.5 10.5M16.5 10.5A1.5 1.5 0 0 0 15 12A1.5 1.5 0 0 0 16.5 13.5A1.5 1.5 0 0 0 18 12A1.5 1.5 0 0 0 16.5 10.5Z" /></svg>',
+  },
+  {
+    key: 'PowerSocketItOutlined',
+    svg: '<svg id="mdi-power-socket-it" viewBox="0 0 24 24"><path d="M10.5 16.5C10.5 15.68 11.17 15 12 15C12.83 15 13.5 15.68 13.5 16.5C13.5 17.34 12.83 18 12 18C11.17 18 10.5 17.34 10.5 16.5M10.5 7.5C10.5 6.67 11.17 6 12 6C12.83 6 13.5 6.67 13.5 7.5C13.5 8.33 12.83 9 12 9C11.17 9 10.5 8.33 10.5 7.5M4.22 2H19.78C21 2 22 3 22 4.22V19.78C22 21 21 22 19.78 22H4.22C3 22 2 21 2 19.78V4.22C2 3 3 2 4.22 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4M10.5 12C10.5 11.17 11.17 10.5 12 10.5C12.83 10.5 13.5 11.17 13.5 12C13.5 12.83 12.83 13.5 12 13.5C11.17 13.5 10.5 12.83 10.5 12Z" /></svg>',
+  },
+  {
+    key: 'PowerSocketJpOutlined',
+    svg: '<svg id="mdi-power-socket-jp" viewBox="0 0 24 24"><path d="M10 9.5V14.5H8V9.5M19.78 2C21 2 22 3 22 4.22V19.78C22 21 21 22 19.78 22H4.22C3 22 2 21 2 19.78V4.22C2 3 3 2 4.22 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4M16 9.5V14.5H14V9.5Z" /></svg>',
+  },
+  {
+    key: 'PowerSocketUkOutlined',
+    svg: '<svg id="mdi-power-socket-uk" viewBox="0 0 24 24"><path d="M4 2A2 2 0 0 0 2 4V20A2 2 0 0 0 4 22H20A2 2 0 0 0 22 20V4A2 2 0 0 0 20 2H4M4 4H20V20H4V4M11 7V11H13V7H11M6 14.75V17H9.5V14.75H6M14.5 14.75V17H18V14.75H14.5Z" /></svg>',
+  },
+  {
+    key: 'PowerSocketUsOutlined',
+    svg: '<svg id="mdi-power-socket-us" viewBox="0 0 24 24"><path d="M8,7H10V12H8V7M4.22,2H19.78C21,2 22,3 22,4.22V19.78A2.22,2.22 0 0,1 19.78,22H4.22C3,22 2,21 2,19.78V4.22A2.22,2.22 0 0,1 4.22,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M14,7.5H16V11.5H14V7.5M10.5,16.25A1.5,1.5 0 0,1 12,14.75A1.5,1.5 0 0,1 13.5,16.25V17H10.5V16.25Z" /></svg>',
+  },
+  {
+    key: 'PowerStandbyOutlined',
+    svg: '<svg id="mdi-power-standby" viewBox="0 0 24 24"><path d="M13,3H11V13H13V3M17.83,5.17L16.41,6.59C18.05,7.91 19,9.9 19,12A7,7 0 0,1 12,19C8.14,19 5,15.88 5,12C5,9.91 5.95,7.91 7.58,6.58L6.17,5.17C2.38,8.39 1.92,14.07 5.14,17.86C8.36,21.64 14.04,22.1 17.83,18.88C19.85,17.17 21,14.65 21,12C21,9.37 19.84,6.87 17.83,5.17Z" /></svg>',
+  },
+  {
+    key: 'PrinterOffOutlineOutlined',
+    svg: '<svg id="mdi-printer-off-outline" viewBox="0 0 24 24"><path d="M1.41 1.6L22.36 22.55L20.95 23.96L18 21H6V17H2V11C2 9.34 3.34 8 5 8L0 3L1.41 1.6M6 15V13H10L7 10H5C4.45 10 4 10.45 4 11V15H6M8 19H16L12 15H8V19M8 5V5.36L6 3.36V3H18V8H19C20.66 8 22 9.34 22 11V17H19.66L15.66 13H18V15L20 15V11C20 10.45 19.55 10 19 10H12.66L10.66 8H16V5H8M19 11.5C19 12.06 18.55 12.5 18 12.5C17.45 12.5 17 12.06 17 11.5C17 10.96 17.45 10.5 18 10.5C18.55 10.5 19 10.96 19 11.5Z" /></svg>',
+  },
+  {
+    key: 'PrinterOutlineOutlined',
+    svg: '<svg id="mdi-printer-outline" viewBox="0 0 24 24"><path d="M19 8C20.66 8 22 9.34 22 11V17H18V21H6V17H2V11C2 9.34 3.34 8 5 8H6V3H18V8H19M8 5V8H16V5H8M16 19V15H8V19H16M18 15H20V11C20 10.45 19.55 10 19 10H5C4.45 10 4 10.45 4 11V15H6V13H18V15M19 11.5C19 12.05 18.55 12.5 18 12.5C17.45 12.5 17 12.05 17 11.5C17 10.95 17.45 10.5 18 10.5C18.55 10.5 19 10.95 19 11.5Z" /></svg>',
+  },
+  {
+    key: 'ProjectorScreenVariantOffOutlineOutlined',
+    svg: '<svg id="mdi-projector-screen-variant-off-outline" viewBox="0 0 24 24"><path d="M22.11 21.46L2.39 1.73L1.11 3L4.11 6H4C3.45 6 3 6.45 3 7V8C3 8.55 3.45 9 4 9H5V18H16.11L20.84 22.73L22.11 21.46M7 16V9H7.11L14.11 16H7M12.2 9L9.2 6H20C20.55 6 21 6.45 21 7V8C21 8.55 20.55 9 20 9H19V15.8L17 13.8V9H12.2Z" /></svg>',
+  },
+  {
+    key: 'ProjectorScreenVariantOutlineOutlined',
+    svg: '<svg id="mdi-projector-screen-variant-outline" viewBox="0 0 24 24"><path d="M20 6H4C3.45 6 3 6.45 3 7V8C3 8.55 3.45 9 4 9H5V18H19V9H20C20.55 9 21 8.55 21 8V7C21 6.45 20.55 6 20 6M17 16H7V9H17V16Z" /></svg>',
+  },
+  {
+    key: 'RefreshOutlined',
+    svg: '<svg id="mdi-refresh" viewBox="0 0 24 24"><path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" /></svg>',
+  },
+  {
+    key: 'RefreshAutoOutlined',
+    svg: '<svg id="mdi-refresh-auto" viewBox="0 0 24 24"><path d="M12.68 6H11.32L7 16H9L9.73 14H14.27L15 16H17L12.68 6M10.3 12.5L12 8L13.7 12.5H10.3M17.4 20.4L19 22H14V17L16 19C18.39 17.61 20 14.95 20 12C20 7.59 16.41 4 12 4S4 7.59 4 12C4 14.95 5.61 17.53 8 18.92V21.16C4.47 19.61 2 16.1 2 12C2 6.5 6.5 2 12 2S22 6.5 22 12C22 15.53 20.17 18.62 17.4 20.4Z" /></svg>',
+  },
+  {
+    key: 'RefreshCircleOutlined',
+    svg: '<svg id="mdi-refresh-circle" viewBox="0 0 24 24"><path d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2M18 11H13L14.81 9.19A3.94 3.94 0 0 0 12 8A4 4 0 1 0 15.86 13H17.91A6 6 0 1 1 12 6A5.91 5.91 0 0 1 16.22 7.78L18 6Z" /></svg>',
+  },
+  {
+    key: 'RestartOutlined',
+    svg: '<svg id="mdi-restart" viewBox="0 0 24 24"><path d="M12,4C14.1,4 16.1,4.8 17.6,6.3C20.7,9.4 20.7,14.5 17.6,17.6C15.8,19.5 13.3,20.2 10.9,19.9L11.4,17.9C13.1,18.1 14.9,17.5 16.2,16.2C18.5,13.9 18.5,10.1 16.2,7.7C15.1,6.6 13.5,6 12,6V10.6L7,5.6L12,0.6V4M6.3,17.6C3.7,15 3.3,11 5.1,7.9L6.6,9.4C5.5,11.6 5.9,14.4 7.8,16.2C8.3,16.7 8.9,17.1 9.6,17.4L9,19.4C8,19 7.1,18.4 6.3,17.6Z" /></svg>',
+  },
+  {
+    key: 'RestartOffOutlined',
+    svg: '<svg id="mdi-restart-off" viewBox="0 0 24 24"><path d="M20.8,22.7L16.6,18.5C14.9,19.7 12.9,20.2 10.9,19.9L11.4,17.9C12.7,18 14,17.7 15.1,17L1.1,3L2.4,1.7L16.5,15.8L17.9,17.2L22.1,21.4L20.8,22.7M12,6C13.5,6 15.1,6.6 16.2,7.8C18,9.6 18.4,12.2 17.5,14.4L19,15.9C20.7,12.9 20.2,9 17.6,6.4C16.1,4.8 14,4 12,4V0.7L7.9,4.7L12,8.8V6M6.6,9.4L5.1,7.9C3.3,11 3.7,15 6.3,17.7C7.1,18.4 8,19 9,19.4L9.5,17.4C8.9,17.1 8.3,16.7 7.7,16.2C5.9,14.4 5.5,11.6 6.6,9.4Z" /></svg>',
+  },
+  {
+    key: 'RobotOffOutlineOutlined',
+    svg: '<svg id="mdi-robot-off-outline" viewBox="0 0 24 24"><path d="M23 15V18C23 18.5 22.64 18.88 22.17 18.97L20.2 17H21V16H19.2L19 15.8V14C19 11.24 16.76 9 14 9H12.2L10.2 7H11V5.73C10.4 5.39 10 4.74 10 4C10 2.9 10.9 2 12 2S14 2.9 14 4C14 4.74 13.6 5.39 13 5.73V7H14C17.87 7 21 10.13 21 14H22C22.55 14 23 14.45 23 15M8.5 13.5C7.4 13.5 6.5 14.4 6.5 15.5S7.4 17.5 8.5 17.5 10.5 16.61 10.5 15.5 9.61 13.5 8.5 13.5M22.11 21.46L20.84 22.73L19.89 21.78C19.62 21.92 19.32 22 19 22H5C3.9 22 3 21.11 3 20V19H2C1.45 19 1 18.55 1 18V15C1 14.45 1.45 14 2 14H3C3 11.53 4.29 9.36 6.22 8.11L1.11 3L2.39 1.73L22.11 21.46M18.11 20L15.6 17.5C15.57 17.5 15.53 17.5 15.5 17.5C14.4 17.5 13.5 16.61 13.5 15.5C13.5 15.47 13.5 15.43 13.5 15.4L7.7 9.59C6.1 10.42 5 12.08 5 14V16H3V17H5V20H18.11Z" /></svg>',
+  },
+  {
+    key: 'RobotOutlineOutlined',
+    svg: '<svg id="mdi-robot-outline" viewBox="0 0 24 24"><path d="M17.5 15.5C17.5 16.61 16.61 17.5 15.5 17.5S13.5 16.61 13.5 15.5 14.4 13.5 15.5 13.5 17.5 14.4 17.5 15.5M8.5 13.5C7.4 13.5 6.5 14.4 6.5 15.5S7.4 17.5 8.5 17.5 10.5 16.61 10.5 15.5 9.61 13.5 8.5 13.5M23 15V18C23 18.55 22.55 19 22 19H21V20C21 21.11 20.11 22 19 22H5C3.9 22 3 21.11 3 20V19H2C1.45 19 1 18.55 1 18V15C1 14.45 1.45 14 2 14H3C3 10.13 6.13 7 10 7H11V5.73C10.4 5.39 10 4.74 10 4C10 2.9 10.9 2 12 2S14 2.9 14 4C14 4.74 13.6 5.39 13 5.73V7H14C17.87 7 21 10.13 21 14H22C22.55 14 23 14.45 23 15M21 16H19V14C19 11.24 16.76 9 14 9H10C7.24 9 5 11.24 5 14V16H3V17H5V20H19V17H21V16Z" /></svg>',
+  },
+  {
+    key: 'RocketOutlined',
+    svg: '<svg id="mdi-rocket" viewBox="0 0 24 24"><path d="M20 22L16.14 20.45C16.84 18.92 17.34 17.34 17.65 15.73L20 22M7.86 20.45L4 22L6.35 15.73C6.66 17.34 7.16 18.92 7.86 20.45M12 2C12 2 17 4 17 12C17 15.1 16.25 17.75 15.33 19.83C15 20.55 14.29 21 13.5 21H10.5C9.71 21 9 20.55 8.67 19.83C7.76 17.75 7 15.1 7 12C7 4 12 2 12 2M12 12C13.1 12 14 11.1 14 10C14 8.9 13.1 8 12 8C10.9 8 10 8.9 10 10C10 11.1 10.9 12 12 12Z" /></svg>',
+  },
+  {
+    key: 'RocketLaunchOutlined',
+    svg: '<svg id="mdi-rocket-launch" viewBox="0 0 24 24"><path d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z" /></svg>',
+  },
+  {
+    key: 'RocketLaunchOutlineOutlined',
+    svg: '<svg id="mdi-rocket-launch-outline" viewBox="0 0 24 24"><path d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M19.22 4C19.5 4 19.75 4 19.96 4.05C20.13 5.44 19.94 8.3 16.66 11.58C14.96 13.29 12.93 14.6 10.65 15.47L8.5 13.37C9.42 11.06 10.73 9.03 12.42 7.34C15.18 4.58 17.64 4 19.22 4M19.22 2C17.24 2 14.24 2.69 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.62 17.27 10.13 17.5 10.66 17.5C10.89 17.5 11.13 17.44 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39S20.7 2 19.22 2M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z" /></svg>',
+  },
+  {
+    key: 'RocketOutlineOutlined',
+    svg: '<svg id="mdi-rocket-outline" viewBox="0 0 24 24"><path d="M12 2C12 2 7 4 7 12C7 15.1 7.76 17.75 8.67 19.83C9 20.55 9.71 21 10.5 21H13.5C14.29 21 15 20.55 15.33 19.83C16.25 17.75 17 15.1 17 12C17 4 12 2 12 2M13.5 19H10.5C9.5 16.76 9 14.41 9 12C9 7.36 10.9 5.2 12 4.33C13.1 5.2 15 7.36 15 12C15 14.41 14.5 16.76 13.5 19M20 22L16.14 20.45C16.84 18.92 17.34 17.34 17.65 15.73M7.86 20.45L4 22L6.35 15.73C6.66 17.34 7.16 18.92 7.86 20.45M12 12C10.9 12 10 11.1 10 10C10 8.9 10.9 8 12 8C13.1 8 14 8.9 14 10C14 11.1 13.1 12 12 12Z" /></svg>',
+  },
+  {
+    key: 'RollerSkateOutlined',
+    svg: '<svg id="mdi-roller-skate" viewBox="0 0 24 24"><path d="M6.5 18C5.1 18 4 19.12 4 20.5S5.1 23 6.5 23 9 21.88 9 20.5 7.86 18 6.5 18M16.5 18C15.1 18 14 19.12 14 20.5S15.1 23 16.5 23 19 21.88 19 20.5 17.86 18 16.5 18M20 17C20 15.63 20.09 13.81 19.5 12.95C18.55 10.9 15.82 10.56 13.91 10.05C13 10 12 9 11.82 8H9C8.71 8 8.5 7.78 8.5 7.5C8.5 7.22 8.71 7 9 7H11.5V6H9C8.71 6 8.5 5.78 8.5 5.5C8.5 5.22 8.71 5 9 5H11.5V2H3V17H20Z" /></svg>',
+  },
+  {
+    key: 'RollerSkateOffOutlined',
+    svg: '<svg id="mdi-roller-skate-off" viewBox="0 0 24 24"><path d="M20.84 22.73L18.95 20.84C18.78 22.06 17.75 23 16.5 23C15.1 23 14 21.88 14 20.5C14 19.24 14.93 18.2 16.14 18.03L15.11 17H3V4.9L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M9 5H11.5V2H5.2L8.5 5.32C8.59 5.13 8.77 5 9 5M12.56 9.36C12.18 9 11.9 8.5 11.82 8H11.2L12.56 9.36M19.5 12.95C18.55 10.9 15.82 10.56 13.91 10.05C13.45 10.03 13 9.77 12.6 9.4L20 16.79C20 15.45 20.06 13.76 19.5 12.95M9.2 6L10.2 7H11.5V6H9.2M6.5 18C5.1 18 4 19.12 4 20.5C4 21.88 5.1 23 6.5 23S9 21.88 9 20.5C9 19.12 7.86 18 6.5 18Z" /></svg>',
+  },
+  {
+    key: 'RouterNetworkOutlined',
+    svg: '<svg id="mdi-router-network" viewBox="0 0 24 24"><path d="M5 9C3.9 9 3 9.9 3 11V15C3 16.11 3.9 17 5 17H11V19H10C9.45 19 9 19.45 9 20H2V22H9C9 22.55 9.45 23 10 23H14C14.55 23 15 22.55 15 22H22V20H15C15 19.45 14.55 19 14 19H13V17H19C20.11 17 21 16.11 21 15V11C21 9.9 20.11 9 19 9H5M6 12H8V14H6V12M9.5 12H11.5V14H9.5V12M13 12H15V14H13V12Z" /></svg>',
+  },
+  {
+    key: 'RouterWirelessOutlined',
+    svg: '<svg id="mdi-router-wireless" viewBox="0 0 24 24"><path d="M20.2,5.9L21,5.1C19.6,3.7 17.8,3 16,3C14.2,3 12.4,3.7 11,5.1L11.8,5.9C13,4.8 14.5,4.2 16,4.2C17.5,4.2 19,4.8 20.2,5.9M19.3,6.7C18.4,5.8 17.2,5.3 16,5.3C14.8,5.3 13.6,5.8 12.7,6.7L13.5,7.5C14.2,6.8 15.1,6.5 16,6.5C16.9,6.5 17.8,6.8 18.5,7.5L19.3,6.7M19,13H17V9H15V13H5A2,2 0 0,0 3,15V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V15A2,2 0 0,0 19,13M8,18H6V16H8V18M11.5,18H9.5V16H11.5V18M15,18H13V16H15V18Z" /></svg>',
+  },
+  {
+    key: 'RouterWirelessOffOutlined',
+    svg: '<svg id="mdi-router-wireless-off" viewBox="0 0 24 24"><path d="M11.8 5.9L11 5.1C12.4 3.7 14.2 3 16 3S19.6 3.7 21 5.1L20.2 5.9C19 4.8 17.5 4.2 16 4.2S13 4.8 11.8 5.9M21 15C21 13.9 20.1 13 19 13H17V9H15V11.8L21 17.8V15M18.5 7.5L19.3 6.7C18.4 5.8 17.2 5.3 16 5.3S13.6 5.8 12.7 6.7L13.5 7.5C14.2 6.8 15.1 6.5 16 6.5C16.9 6.5 17.8 6.8 18.5 7.5M22.1 21.5L20.8 22.8L19.1 21H5C3.9 21 3 20.1 3 19V15C3 13.9 3.9 13 5 13H11.1L1.1 3L2.4 1.7L22.1 21.5M8 16H6V18H8V16M11.5 16H9.5V18H11.5V16M15 16.9L14.1 16H13V18H15V16.9Z" /></svg>',
+  },
+  {
+    key: 'RouterWirelessSettingsOutlined',
+    svg: '<svg id="mdi-router-wireless-settings" viewBox="0 0 24 24"><path d="M20.2,4.9C19,3.8 17.5,3.2 16,3.2C14.5,3.2 13,3.8 11.8,4.9L11,4.1C12.4,2.7 14.2,2 16,2C17.8,2 19.6,2.7 21,4.1L20.2,4.9M19.3,5.7L18.5,6.5C17.8,5.8 16.9,5.5 16,5.5C15.1,5.5 14.2,5.8 13.5,6.5L12.7,5.7C13.6,4.8 14.8,4.3 16,4.3C17.2,4.3 18.4,4.8 19.3,5.7M19,12A2,2 0 0,1 21,14V18A2,2 0 0,1 19,20H5A2,2 0 0,1 3,18V14A2,2 0 0,1 5,12H15V8H17V12H19M8,17V15H6V17H8M11.5,17V15H9.5V17H11.5M15,17V15H13V17H15M7,22H9V24H7V22M11,22H13V24H11V22M15,22H17V24H15V22Z" /></svg>',
+  },
+  {
+    key: 'RunOutlined',
+    svg: '<svg id="mdi-run" viewBox="0 0 24 24"><path d="M13.5,5.5C14.59,5.5 15.5,4.58 15.5,3.5C15.5,2.38 14.59,1.5 13.5,1.5C12.39,1.5 11.5,2.38 11.5,3.5C11.5,4.58 12.39,5.5 13.5,5.5M9.89,19.38L10.89,15L13,17V23H15V15.5L12.89,13.5L13.5,10.5C14.79,12 16.79,13 19,13V11C17.09,11 15.5,10 14.69,8.58L13.69,7C13.29,6.38 12.69,6 12,6C11.69,6 11.5,6.08 11.19,6.08L6,8.28V13H8V9.58L9.79,8.88L8.19,17L3.29,16L2.89,18L9.89,19.38Z" /></svg>',
+  },
+  {
+    key: 'RunFastOutlined',
+    svg: '<svg id="mdi-run-fast" viewBox="0 0 24 24"><path d="M16.5,5.5A2,2 0 0,0 18.5,3.5A2,2 0 0,0 16.5,1.5A2,2 0 0,0 14.5,3.5A2,2 0 0,0 16.5,5.5M12.9,19.4L13.9,15L16,17V23H18V15.5L15.9,13.5L16.5,10.5C17.89,12.09 19.89,13 22,13V11C20.24,11.03 18.6,10.11 17.7,8.6L16.7,7C16.34,6.4 15.7,6 15,6C14.7,6 14.5,6.1 14.2,6.1L9,8.3V13H11V9.6L12.8,8.9L11.2,17L6.3,16L5.9,18L12.9,19.4M4,9A1,1 0 0,1 3,8A1,1 0 0,1 4,7H7V9H4M5,5A1,1 0 0,1 4,4A1,1 0 0,1 5,3H10V5H5M3,13A1,1 0 0,1 2,12A1,1 0 0,1 3,11H7V13H3Z" /></svg>',
+  },
+  {
+    key: 'SecurityOutlined',
+    svg: '<svg id="mdi-security" viewBox="0 0 24 24"><path d="M12,12H19C18.47,16.11 15.72,19.78 12,20.92V12H5V6.3L12,3.19M12,1L3,5V11C3,16.55 6.84,21.73 12,23C17.16,21.73 21,16.55 21,11V5L12,1Z" /></svg>',
+  },
+  {
+    key: 'SecurityNetworkOutlined',
+    svg: '<svg id="mdi-security-network" viewBox="0 0 24 24"><path d="M13,19H14A1,1 0 0,1 15,20H22V22H15A1,1 0 0,1 14,23H10A1,1 0 0,1 9,22H2V20H9A1,1 0 0,1 10,19H11V17.34C8.07,16.13 6,13 6,9.67V5.67L12,3L18,5.67V9.67C18,13 15.93,16.13 13,17.34V19M12,5L8,6.69V10H12V5M12,10V16C13.91,15.53 16,13.06 16,11V10H12Z" /></svg>',
+  },
+  {
+    key: 'SeedOutlined',
+    svg: '<svg id="mdi-seed" viewBox="0 0 24 24"><path d="M20.7,3.3C20.7,3.3 19.3,3 17.2,3C11.7,3 1.6,5.1 3.2,20.8C4.3,20.9 5.4,21 6.4,21C24.3,21 20.7,3.3 20.7,3.3M7,17C7,17 7,7 17,7C17,7 11,9 7,17Z" /></svg>',
+  },
+  {
+    key: 'SeedOffOutlined',
+    svg: '<svg id="mdi-seed-off" viewBox="0 0 24 24"><path d="M22.1 21.5L2.4 1.7L1.1 3L5.9 7.8C3.8 10.5 2.6 14.6 3.2 20.8C4.3 20.9 5.4 21 6.4 21C10.9 21 14.1 19.9 16.3 18.2L20.9 22.8L22.1 21.5M7 17C7 17 7 13.7 8.9 10.8L10.2 12.1C9.1 13.4 8 15 7 17M11.6 8.4L8.5 5.3C11.3 3.4 14.7 3 17.2 3C19.3 3 20.7 3.3 20.7 3.3S22.1 10.3 18.7 15.5L12.8 9.6C15.1 7.6 17 7 17 7C14.7 7 12.9 7.5 11.6 8.4Z" /></svg>',
+  },
+  {
+    key: 'SeedOffOutlineOutlined',
+    svg: '<svg id="mdi-seed-off-outline" viewBox="0 0 24 24"><path d="M22.1 21.5L2.4 1.7L1.1 3L5.9 7.8C3.8 10.5 2.6 14.6 3.2 20.8C4.3 20.9 5.4 21 6.4 21C10.9 21 14.1 19.9 16.3 18.2L20.9 22.8L22.1 21.5M6.4 19H5.1C4.9 14.8 5.6 11.5 7.3 9.2L8.9 10.8C7 13.7 7 17 7 17C8 15 9.1 13.4 10.2 12.1L14.8 16.7C12.8 18.2 10 19 6.4 19M10 6.8L8.5 5.3C11.3 3.4 14.7 3 17.2 3C19.3 3 20.7 3.3 20.7 3.3S22.1 10.3 18.7 15.5L17.2 14C19.1 10.9 19 7.1 18.9 5.1C18.4 5 17.8 5 17.2 5C15.1 5 12.3 5.3 10 6.8M12.8 9.6L11.6 8.4C12.9 7.5 14.7 7 17 7C17 7 15.1 7.6 12.8 9.6Z" /></svg>',
+  },
+  {
+    key: 'SeedOutlineOutlined',
+    svg: '<svg id="mdi-seed-outline" viewBox="0 0 24 24"><path d="M17.2,5V5C17.8,5 18.4,5 18.9,5.1C19.1,7.4 19.1,12 16.4,15.2C14.4,17.7 11,19 6.4,19C6,19 5.5,19 5.1,19C4.9,14.4 5.8,10.8 7.9,8.5C10.4,5.6 14.4,5 17.2,5M17.2,3C11.7,3 1.6,5.1 3.2,20.8C4.3,20.9 5.4,21 6.4,21C24.3,21 20.7,3.3 20.7,3.3C20.7,3.3 19.3,3 17.2,3M17,7C7,7 7,17 7,17C11,9 17,7 17,7Z" /></svg>',
+  },
+  {
+    key: 'ShowerHeadOutlined',
+    svg: '<svg id="mdi-shower-head" viewBox="0 0 24 24"><path d="M20,20A1,1 0 0,1 21,21A1,1 0 0,1 20,22A1,1 0 0,1 19,21A1,1 0 0,1 20,20M16,20A1,1 0 0,1 17,21A1,1 0 0,1 16,22A1,1 0 0,1 15,21A1,1 0 0,1 16,20M12,20A1,1 0 0,1 13,21A1,1 0 0,1 12,22A1,1 0 0,1 11,21A1,1 0 0,1 12,20M8,20A1,1 0 0,1 9,21A1,1 0 0,1 8,22A1,1 0 0,1 7,21A1,1 0 0,1 8,20M4,20A1,1 0 0,1 5,21A1,1 0 0,1 4,22A1,1 0 0,1 3,21A1,1 0 0,1 4,20M6,17A1,1 0 0,1 7,18A1,1 0 0,1 6,19H6A1,1 0 0,1 5,18A1,1 0 0,1 6,17H6M10,17A1,1 0 0,1 11,18A1,1 0 0,1 10,19A1,1 0 0,1 9,18A1,1 0 0,1 10,17M14,17A1,1 0 0,1 15,18A1,1 0 0,1 14,19A1,1 0 0,1 13,18A1,1 0 0,1 14,17M18,17A1,1 0 0,1 19,18A1,1 0 0,1 18,19A1,1 0 0,1 17,18A1,1 0 0,1 18,17M8,14A1,1 0 0,1 9,15A1,1 0 0,1 8,16A1,1 0 0,1 7,15A1,1 0 0,1 8,14M12,14A1,1 0 0,1 13,15A1,1 0 0,1 12,16A1,1 0 0,1 11,15A1,1 0 0,1 12,14M16,14A1,1 0 0,1 17,15A1,1 0 0,1 16,16A1,1 0 0,1 15,15A1,1 0 0,1 16,14M19,12H5V10H19V12M17.92,9H6.08C6.5,6.5 8.5,4.5 11,4.08V2H13V4.08C15.5,4.5 17.5,6.5 17.92,9Z" /></svg>',
+  },
+  {
+    key: 'SignalOutlined',
+    svg: '<svg id="mdi-signal" viewBox="0 0 24 24"><path d="M3,21H6V18H3M8,21H11V14H8M13,21H16V9H13M18,21H21V3H18V21Z" /></svg>',
+  },
+  {
+    key: 'Signal2GOutlined',
+    svg: '<svg id="mdi-signal-2g" viewBox="0 0 24 24"><path d="M11,19.5H2V13.5A3,3 0 0,1 5,10.5H8V7.5H2V4.5H8A3,3 0 0,1 11,7.5V10.5A3,3 0 0,1 8,13.5H5V16.5H11M22,10.5H17.5V13.5H19V16.5H16V7.5H22V4.5H16A3,3 0 0,0 13,7.5V16.5A3,3 0 0,0 16,19.5H19A3,3 0 0,0 22,16.5" /></svg>',
+  },
+  {
+    key: 'Signal3GOutlined',
+    svg: '<svg id="mdi-signal-3g" viewBox="0 0 24 24"><path d="M11,16.5V14.25C11,13 10,12 8.75,12C10,12 11,11 11,9.75V7.5A3,3 0 0,0 8,4.5H2V7.5H8V10.5H5V13.5H8V16.5H2V19.5H8A3,3 0 0,0 11,16.5M22,16.5V10.5H17.5V13.5H19V16.5H16V7.5H22V4.5H16A3,3 0 0,0 13,7.5V16.5A3,3 0 0,0 16,19.5H19A3,3 0 0,0 22,16.5Z" /></svg>',
+  },
+  {
+    key: 'Signal4GOutlined',
+    svg: '<svg id="mdi-signal-4g" viewBox="0 0 24 24"><path d="M22,16.5V10.5H17.5V13.5H19V16.5H16V7.5H22V4.5H16A3,3 0 0,0 13,7.5V16.5A3,3 0 0,0 16,19.5H19A3,3 0 0,0 22,16.5M8,19.5H11V4.5H8V10.5H5V4.5H2V13.5H8V19.5Z" /></svg>',
+  },
+  {
+    key: 'Signal5GOutlined',
+    svg: '<svg id="mdi-signal-5g" viewBox="0 0 24 24"><path d="M22,16.5V10.5H17.5V13.5H19V16.5H16V7.5H22V4.5H16A3,3 0 0,0 13,7.5V16.5A3,3 0 0,0 16,19.5H19A3,3 0 0,0 22,16.5M10,4.5H3V12L3,13.5H7V16.5H3V19.5H8.5A1.5,1.5 0 0,0 10,18V12A1.5,1.5 0 0,0 8.5,10.5H6V7.5H10V4.5Z" /></svg>',
+  },
+  {
+    key: 'SignalCellular1Outlined',
+    svg: '<svg id="mdi-signal-cellular-1" viewBox="0 0 24 24"><path d="M19.5,5.5V18.5H17.5V5.5H19.5M12.5,10.5V18.5H10.5V10.5H12.5M21,4H16V20H21V4M14,9H9V20H14V9M7,14H2V20H7V14Z" /></svg>',
+  },
+  {
+    key: 'SignalCellular2Outlined',
+    svg: '<svg id="mdi-signal-cellular-2" viewBox="0 0 24 24"><path d="M19.5,5.5V18.5H17.5V5.5H19.5M21,4H16V20H21V4M14,9H9V20H14V9M7,14H2V20H7V14Z" /></svg>',
+  },
+  {
+    key: 'SignalCellular3Outlined',
+    svg: '<svg id="mdi-signal-cellular-3" viewBox="0 0 24 24"><path d="M21,4H16V20H21V4M14,9H9V20H14V9M7,14H2V20H7V14Z" /></svg>',
+  },
+  {
+    key: 'SignalCellularOutlineOutlined',
+    svg: '<svg id="mdi-signal-cellular-outline" viewBox="0 0 24 24"><path d="M19.5,5.5V18.5H17.5V5.5H19.5M12.5,10.5V18.5H10.5V10.5H12.5M5.5,15.5V18.5H3.5V15.5H5.5M21,4H16V20H21V4M14,9H9V20H14V9M7,14H2V20H7V14Z" /></svg>',
+  },
+  {
+    key: 'SignalDistanceVariantOutlined',
+    svg: '<svg id="mdi-signal-distance-variant" viewBox="0 0 24 24"><path d="M4,6V4A12,12 0 0,1 16,16H14A10,10 0 0,0 4,6M4,10V8A8,8 0 0,1 12,16H10A6,6 0 0,0 4,10M4,12A4,4 0 0,1 8,16H4V12M3,18H19V16L22,19L19,22V20H3V18Z" /></svg>',
+  },
+  {
+    key: 'SignalVariantOutlined',
+    svg: '<svg id="mdi-signal-variant" viewBox="0 0 24 24"><path d="M4,6V4H4.1C12.9,4 20,11.1 20,19.9V20H18V19.9C18,12.2 11.8,6 4,6M4,10V8A12,12 0 0,1 16,20H14A10,10 0 0,0 4,10M4,14V12A8,8 0 0,1 12,20H10A6,6 0 0,0 4,14M4,16A4,4 0 0,1 8,20H4V16Z" /></svg>',
+  },
+  {
+    key: 'SilverwareOutlined',
+    svg: '<svg id="mdi-silverware" viewBox="0 0 24 24"><path d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M14.88,11.53L13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.47,10.12C12.76,8.59 13.26,6.44 14.85,4.85C16.76,2.93 19.5,2.57 20.96,4.03C22.43,5.5 22.07,8.24 20.15,10.15C18.56,11.74 16.41,12.24 14.88,11.53Z" /></svg>',
+  },
+  {
+    key: 'SlackOutlined',
+    svg: '<svg id="mdi-slack" viewBox="0 0 24 24"><path d="M6,15A2,2 0 0,1 4,17A2,2 0 0,1 2,15A2,2 0 0,1 4,13H6V15M7,15A2,2 0 0,1 9,13A2,2 0 0,1 11,15V20A2,2 0 0,1 9,22A2,2 0 0,1 7,20V15M9,7A2,2 0 0,1 7,5A2,2 0 0,1 9,3A2,2 0 0,1 11,5V7H9M9,8A2,2 0 0,1 11,10A2,2 0 0,1 9,12H4A2,2 0 0,1 2,10A2,2 0 0,1 4,8H9M17,10A2,2 0 0,1 19,8A2,2 0 0,1 21,10A2,2 0 0,1 19,12H17V10M16,10A2,2 0 0,1 14,12A2,2 0 0,1 12,10V5A2,2 0 0,1 14,3A2,2 0 0,1 16,5V10M14,18A2,2 0 0,1 16,20A2,2 0 0,1 14,22A2,2 0 0,1 12,20V18H14M14,17A2,2 0 0,1 12,15A2,2 0 0,1 14,13H19A2,2 0 0,1 21,15A2,2 0 0,1 19,17H14Z" /></svg>',
+  },
+  {
+    key: 'SmokingOutlined',
+    svg: '<svg id="mdi-smoking" viewBox="0 0 24 24"><path d="M2,16H17V19H2V16M20.5,16H22V19H20.5V16M18,16H19.5V19H18V16M18.85,7.73C19.47,7.12 19.85,6.28 19.85,5.35C19.85,3.5 18.35,2 16.5,2V3.5C17.5,3.5 18.35,4.33 18.35,5.35C18.35,6.37 17.5,7.2 16.5,7.2V8.7C18.74,8.7 20.5,10.53 20.5,12.77V15H22V12.76C22,10.54 20.72,8.62 18.85,7.73M16.03,10.2H14.5C13.5,10.2 12.65,9.22 12.65,8.2C12.65,7.18 13.5,6.45 14.5,6.45V4.95C12.65,4.95 11.15,6.45 11.15,8.3A3.35,3.35 0 0,0 14.5,11.65H16.03C17.08,11.65 18,12.39 18,13.7V15H19.5V13.36C19.5,11.55 17.9,10.2 16.03,10.2Z" /></svg>',
+  },
+  {
+    key: 'SnowflakeOutlined',
+    svg: '<svg id="mdi-snowflake" viewBox="0 0 24 24"><path d="M20.79,13.95L18.46,14.57L16.46,13.44V10.56L18.46,9.43L20.79,10.05L21.31,8.12L19.54,7.65L20,5.88L18.07,5.36L17.45,7.69L15.45,8.82L13,7.38V5.12L14.71,3.41L13.29,2L12,3.29L10.71,2L9.29,3.41L11,5.12V7.38L8.5,8.82L6.5,7.69L5.92,5.36L4,5.88L4.47,7.65L2.7,8.12L3.22,10.05L5.55,9.43L7.55,10.56V13.45L5.55,14.58L3.22,13.96L2.7,15.89L4.47,16.36L4,18.12L5.93,18.64L6.55,16.31L8.55,15.18L11,16.62V18.88L9.29,20.59L10.71,22L12,20.71L13.29,22L14.7,20.59L13,18.88V16.62L15.5,15.17L17.5,16.3L18.12,18.63L20,18.12L19.53,16.35L21.3,15.88L20.79,13.95M9.5,10.56L12,9.11L14.5,10.56V13.44L12,14.89L9.5,13.44V10.56Z" /></svg>',
+  },
+  {
+    key: 'SpaOutlineOutlined',
+    svg: '<svg id="mdi-spa-outline" viewBox="0 0 24 24"><path d="M15.5,9.63C14.21,10.32 13.03,11.2 12,12.26C10.97,11.19 9.79,10.31 8.5,9.63C8.74,6.86 9.92,4.14 12.06,2C14.18,4.12 15.31,6.84 15.5,9.63M12,15.45C14.15,12.17 17.82,10 22,10C22,20 12.68,21.88 12,22C11.32,21.89 2,20 2,10C6.18,10 9.85,12.17 12,15.45M12.05,5.19C11.39,6.23 10.93,7.38 10.68,8.58L12,9.55L13.35,8.57C13.12,7.37 12.68,6.22 12.05,5.19M12,19.97C12,19.97 18,19 19.74,12.25C14,14 12,19.1 12,19.1C12,19.1 9,13 4.26,12.26C6,19 12,19.97 12,19.97Z" /></svg>',
+  },
+  {
+    key: 'SpeedometerOutlined',
+    svg: '<svg id="mdi-speedometer" viewBox="0 0 24 24"><path d="M12,16A3,3 0 0,1 9,13C9,11.88 9.61,10.9 10.5,10.39L20.21,4.77L14.68,14.35C14.18,15.33 13.17,16 12,16M12,3C13.81,3 15.5,3.5 16.97,4.32L14.87,5.53C14,5.19 13,5 12,5A8,8 0 0,0 4,13C4,15.21 4.89,17.21 6.34,18.65H6.35C6.74,19.04 6.74,19.67 6.35,20.06C5.96,20.45 5.32,20.45 4.93,20.07V20.07C3.12,18.26 2,15.76 2,13A10,10 0 0,1 12,3M22,13C22,15.76 20.88,18.26 19.07,20.07V20.07C18.68,20.45 18.05,20.45 17.66,20.06C17.27,19.67 17.27,19.04 17.66,18.65V18.65C19.11,17.2 20,15.21 20,13C20,12 19.81,11 19.46,10.1L20.67,8C21.5,9.5 22,11.18 22,13Z" /></svg>',
+  },
+  {
+    key: 'SpeedometerMediumOutlined',
+    svg: '<svg id="mdi-speedometer-medium" viewBox="0 0 24 24"><path d="M12 1.38L9.14 12.06C8.8 13.1 9.04 14.29 9.86 15.12C11.04 16.29 12.94 16.29 14.11 15.12C14.9 14.33 15.16 13.2 14.89 12.21M14.6 3.35L15.22 5.68C18.04 6.92 20 9.73 20 13C20 15.21 19.11 17.21 17.66 18.65H17.65C17.26 19.04 17.26 19.67 17.65 20.06C18.04 20.45 18.68 20.45 19.07 20.07C20.88 18.26 22 15.76 22 13C22 8.38 18.86 4.5 14.6 3.35M9.4 3.36C5.15 4.5 2 8.4 2 13C2 15.76 3.12 18.26 4.93 20.07C5.32 20.45 5.95 20.45 6.34 20.06C6.73 19.67 6.73 19.04 6.34 18.65C4.89 17.2 4 15.21 4 13C4 9.65 5.94 6.86 8.79 5.65" /></svg>',
+  },
+  {
+    key: 'SpeedometerSlowOutlined',
+    svg: '<svg id="mdi-speedometer-slow" viewBox="0 0 24 24"><path d="M12 16C13.66 16 15 14.66 15 13C15 11.88 14.39 10.9 13.5 10.39L3.79 4.77L9.32 14.35C9.82 15.33 10.83 16 12 16M12 3C10.19 3 8.5 3.5 7.03 4.32L9.13 5.53C10 5.19 11 5 12 5C16.42 5 20 8.58 20 13C20 15.21 19.11 17.21 17.66 18.65H17.65C17.26 19.04 17.26 19.67 17.65 20.06C18.04 20.45 18.68 20.45 19.07 20.07C20.88 18.26 22 15.76 22 13C22 7.5 17.5 3 12 3M2 13C2 15.76 3.12 18.26 4.93 20.07C5.32 20.45 5.95 20.45 6.34 20.06C6.73 19.67 6.73 19.04 6.34 18.65C4.89 17.2 4 15.21 4 13C4 12 4.19 11 4.54 10.1L3.33 8C2.5 9.5 2 11.18 2 13Z" /></svg>',
+  },
+  {
+    key: 'SwapHorizontalOutlined',
+    svg: '<svg id="mdi-swap-horizontal" viewBox="0 0 24 24"><path d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" /></svg>',
+  },
+  {
+    key: 'SwapHorizontalCircleOutlineOutlined',
+    svg: '<svg id="mdi-swap-horizontal-circle-outline" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M15 6.5V9H11V11H15V13.5L18.5 10L15 6.5M9 10.5L5.5 14L9 17.5V15H13V13H9V10.5Z" /></svg>',
+  },
+  {
+    key: 'SwapVerticalOutlined',
+    svg: '<svg id="mdi-swap-vertical" viewBox="0 0 24 24"><path d="M9,3L5,7H8V14H10V7H13M16,17V10H14V17H11L15,21L19,17H16Z" /></svg>',
+  },
+  {
+    key: 'TemperatureCelsiusOutlined',
+    svg: '<svg id="mdi-temperature-celsius" viewBox="0 0 24 24"><path d="M16.5,5C18.05,5 19.5,5.47 20.69,6.28L19.53,9.17C18.73,8.44 17.67,8 16.5,8C14,8 12,10 12,12.5C12,15 14,17 16.5,17C17.53,17 18.47,16.66 19.23,16.08L20.37,18.93C19.24,19.61 17.92,20 16.5,20A7.5,7.5 0 0,1 9,12.5A7.5,7.5 0 0,1 16.5,5M6,3A3,3 0 0,1 9,6A3,3 0 0,1 6,9A3,3 0 0,1 3,6A3,3 0 0,1 6,3M6,5A1,1 0 0,0 5,6A1,1 0 0,0 6,7A1,1 0 0,0 7,6A1,1 0 0,0 6,5Z" /></svg>',
+  },
+  {
+    key: 'TemperatureFahrenheitOutlined',
+    svg: '<svg id="mdi-temperature-fahrenheit" viewBox="0 0 24 24"><path d="M11,20V5H20V8H14V11H19V14H14V20H11M6,3A3,3 0 0,1 9,6A3,3 0 0,1 6,9A3,3 0 0,1 3,6A3,3 0 0,1 6,3M6,5A1,1 0 0,0 5,6A1,1 0 0,0 6,7A1,1 0 0,0 7,6A1,1 0 0,0 6,5Z" /></svg>',
+  },
+  {
+    key: 'TemperatureKelvinOutlined',
+    svg: '<svg id="mdi-temperature-kelvin" viewBox="0 0 24 24"><path d="M7,5H10V11L15,5H19L13.88,10.78L19,20H15.38L11.76,13.17L10,15.15V20H7V5Z" /></svg>',
+  },
+  {
+    key: 'TestTubeOutlined',
+    svg: '<svg id="mdi-test-tube" viewBox="0 0 24 24"><path d="M7,2V4H8V18A4,4 0 0,0 12,22A4,4 0 0,0 16,18V4H17V2H7M11,16C10.4,16 10,15.6 10,15C10,14.4 10.4,14 11,14C11.6,14 12,14.4 12,15C12,15.6 11.6,16 11,16M13,12C12.4,12 12,11.6 12,11C12,10.4 12.4,10 13,10C13.6,10 14,10.4 14,11C14,11.6 13.6,12 13,12M14,7H10V4H14V7Z" /></svg>',
+  },
+  {
+    key: 'TestTubeEmptyOutlined',
+    svg: '<svg id="mdi-test-tube-empty" viewBox="0 0 24 24"><path d="M7,2H17V4H16V18A4,4 0 0,1 12,22A4,4 0 0,1 8,18V4H7V2M14,4H10V18A2,2 0 0,0 12,20A2,2 0 0,0 14,18V4Z" /></svg>',
+  },
+  {
+    key: 'TestTubeOffOutlined',
+    svg: '<svg id="mdi-test-tube-off" viewBox="0 0 24 24"><path d="M2,5.27L3.28,4L20,20.72L18.73,22L15.84,19.11C15.36,20.77 13.82,22 12,22A4,4 0 0,1 8,18V11.27L2,5.27M7,2H17V4H16V14.18L13.63,11.81C13.86,11.63 14,11.35 14,11C14,10.4 13.6,10 13,10C12.65,10 12.37,10.14 12.19,10.37L8,6.18V4H7V2M11,16C11.5,16 11.88,15.71 12,15.24L10.76,14C10.29,14.12 10,14.5 10,15C10,15.6 10.4,16 11,16M14,7V4H10V7H14Z" /></svg>',
+  },
+  {
+    key: 'ThermometerOutlined',
+    svg: '<svg id="mdi-thermometer" viewBox="0 0 24 24"><path d="M15 13V5A3 3 0 0 0 9 5V13A5 5 0 1 0 15 13M12 4A1 1 0 0 1 13 5V8H11V5A1 1 0 0 1 12 4Z" /></svg>',
+  },
+  {
+    key: 'ThermometerAlertOutlined',
+    svg: '<svg id="mdi-thermometer-alert" viewBox="0 0 24 24"><path d="M17 13V7H19V13H17M17 17V15H19V17H17M13 13V5C13 3.3 11.7 2 10 2S7 3.3 7 5V13C4.8 14.7 4.3 17.8 6 20S10.8 22.7 13 21 15.7 16.2 14 14C13.7 13.6 13.4 13.3 13 13M10 4C10.6 4 11 4.4 11 5V8H9V5C9 4.4 9.4 4 10 4Z" /></svg>',
+  },
+  {
+    key: 'ThermometerBluetoothOutlined',
+    svg: '<svg id="mdi-thermometer-bluetooth" viewBox="0 0 24 24"><path d="M11 13V5C11 3.34 9.66 2 8 2S5 3.34 5 5V13C2.79 14.66 2.34 17.79 4 20S8.79 22.66 11 21 13.66 16.21 12 14C11.72 13.62 11.38 13.28 11 13M8 4C8.55 4 9 4.45 9 5V8H7V5C7 4.45 7.45 4 8 4M18 8V11.79L15.71 9.5L15 10.21L17.79 13L15 15.79L15.71 16.5L18 14.21V18H18.5L21.35 15.14L19.21 13L21.35 10.85L18.5 8H18M19 9.91L19.94 10.85L19 11.79V9.91M19 14.21L19.94 15.14L19 16.08V14.21Z" /></svg>',
+  },
+  {
+    key: 'ThermometerChevronDownOutlined',
+    svg: '<svg id="mdi-thermometer-chevron-down" viewBox="0 0 24 24"><path d="M17.41 12.17L14.24 9L12.83 10.41L17.41 15L22 10.41L20.58 9M10 13V5C10 3.34 8.66 2 7 2S4 3.34 4 5V13C1.79 14.66 1.34 17.79 3 20S7.79 22.66 10 21 12.66 16.21 11 14C10.72 13.62 10.38 13.28 10 13M7 4C7.55 4 8 4.45 8 5V8H6V5C6 4.45 6.45 4 7 4Z" /></svg>',
+  },
+  {
+    key: 'ThermometerChevronUpOutlined',
+    svg: '<svg id="mdi-thermometer-chevron-up" viewBox="0 0 24 24"><path d="M17.41 11.83L20.58 15L22 13.59L17.41 9L12.82 13.59L14.24 15L17.41 11.83M10 13V5C10 3.34 8.66 2 7 2S4 3.34 4 5V13C1.79 14.66 1.34 17.79 3 20S7.79 22.66 10 21 12.66 16.21 11 14C10.72 13.62 10.38 13.28 10 13M7 4C7.55 4 8 4.45 8 5V8H6V5C6 4.45 6.45 4 7 4Z" /></svg>',
+  },
+  {
+    key: 'ThermometerHighOutlined',
+    svg: '<svg id="mdi-thermometer-high" viewBox="0 0 24 24"><path d="M15 13V5A3 3 0 0 0 9 5V13A5 5 0 1 0 15 13M12 4A1 1 0 0 1 13 5H11A1 1 0 0 1 12 4Z" /></svg>',
+  },
+  {
+    key: 'ThermometerLinesOutlined',
+    svg: '<svg id="mdi-thermometer-lines" viewBox="0 0 24 24"><path d="M17 3H21V5H17V3M17 7H21V9H17V7M17 11H21V13H17.75L17 12.1V11M21 15V17H19C19 16.31 18.9 15.63 18.71 15H21M7 3V5H3V3H7M7 7V9H3V7H7M7 11V12.1L6.25 13H3V11H7M3 15H5.29C5.1 15.63 5 16.31 5 17H3V15M15 13V5C15 3.34 13.66 2 12 2S9 3.34 9 5V13C6.79 14.66 6.34 17.79 8 20S12.79 22.66 15 21 17.66 16.21 16 14C15.72 13.62 15.38 13.28 15 13M12 4C12.55 4 13 4.45 13 5V8H11V5C11 4.45 11.45 4 12 4Z" /></svg>',
+  },
+  {
+    key: 'ThermometerLowOutlined',
+    svg: '<svg id="mdi-thermometer-low" viewBox="0 0 24 24"><path d="M15 13V5A3 3 0 0 0 9 5V13A5 5 0 1 0 15 13M12 4A1 1 0 0 1 13 5V12H11V5A1 1 0 0 1 12 4Z" /></svg>',
+  },
+  {
+    key: 'ThermometerOffOutlined',
+    svg: '<svg id="mdi-thermometer-off" viewBox="0 0 24 24"><path d="M11 7.8L9 5.8V5C9 3.34 10.34 2 12 2S15 3.34 15 5V11.8L11.2 8H13V5C13 4.45 12.55 4 12 4S11 4.45 11 5V7.8M22.11 21.46L2.39 1.73L1.11 3L9 10.89V13C6.79 14.66 6.34 17.79 8 20C9.66 22.21 12.79 22.66 15 21C15.84 20.37 16.4 19.5 16.71 18.6L20.84 22.73L22.11 21.46Z" /></svg>',
+  },
+  {
+    key: 'ThermometerPlusOutlined',
+    svg: '<svg id="mdi-thermometer-plus" viewBox="0 0 24 24"><path d="M19 11V8H17V11H14V13H17V16H19V13H22V11M11 13V5C11 3.34 9.66 2 8 2S5 3.34 5 5V13C2.79 14.66 2.34 17.79 4 20S8.79 22.66 11 21 13.66 16.21 12 14C11.72 13.62 11.38 13.28 11 13M8 4C8.55 4 9 4.45 9 5V8H7V5C7 4.45 7.45 4 8 4Z" /></svg>',
+  },
+  {
+    key: 'ThermostatOutlined',
+    svg: '<svg id="mdi-thermostat" viewBox="0 0 24 24"><path d="M16.95,16.95L14.83,14.83C15.55,14.1 16,13.1 16,12C16,11.26 15.79,10.57 15.43,10L17.6,7.81C18.5,9 19,10.43 19,12C19,13.93 18.22,15.68 16.95,16.95M12,5C13.57,5 15,5.5 16.19,6.4L14,8.56C13.43,8.21 12.74,8 12,8A4,4 0 0,0 8,12C8,13.1 8.45,14.1 9.17,14.83L7.05,16.95C5.78,15.68 5,13.93 5,12A7,7 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg>',
+  },
+  {
+    key: 'ThermostatBoxOutlined',
+    svg: '<svg id="mdi-thermostat-box" viewBox="0 0 24 24"><path d="M5,3A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M12,5C13.57,5 15,5.5 16.19,6.4L14,8.56C13.43,8.21 12.74,8 12,8A4,4 0 0,0 8,12C8,13.1 8.45,14.1 9.17,14.83L7.05,16.95C5.78,15.68 5,13.93 5,12A7,7 0 0,1 12,5M17.6,7.81C18.5,9 19,10.43 19,12C19,13.93 18.22,15.68 16.95,16.95L14.83,14.83C15.55,14.1 16,13.1 16,12C16,11.26 15.79,10.57 15.43,10L17.6,7.81Z" /></svg>',
+  },
+  {
+    key: 'TimerOutlined',
+    svg: '<svg id="mdi-timer" viewBox="0 0 24 24"><path d="M19.03 7.39L20.45 5.97C20 5.46 19.55 5 19.04 4.56L17.62 6C16.07 4.74 14.12 4 12 4C7.03 4 3 8.03 3 13S7.03 22 12 22C17 22 21 17.97 21 13C21 10.88 20.26 8.93 19.03 7.39M13 14H11V7H13V14M15 1H9V3H15V1Z" /></svg>',
+  },
+  {
+    key: 'Timer10Outlined',
+    svg: '<svg id="mdi-timer-10" viewBox="0 0 24 24"><path d="M12.9,13.22C12.9,13.82 12.86,14.33 12.78,14.75C12.7,15.17 12.58,15.5 12.42,15.77C12.26,16.03 12.06,16.22 11.83,16.34C11.6,16.46 11.32,16.5 11,16.5C10.71,16.5 10.43,16.46 10.19,16.34C9.95,16.22 9.75,16.03 9.59,15.77C9.43,15.5 9.3,15.17 9.21,14.75C9.12,14.33 9.08,13.82 9.08,13.22V10.72C9.08,10.12 9.12,9.61 9.21,9.2C9.3,8.79 9.42,8.46 9.59,8.2C9.75,7.95 9.95,7.77 10.19,7.65C10.43,7.54 10.7,7.5 11,7.5C11.31,7.5 11.58,7.54 11.81,7.65C12.05,7.76 12.25,7.94 12.41,8.2C12.57,8.45 12.7,8.78 12.78,9.19C12.86,9.6 12.91,10.11 12.91,10.71V13.22M13.82,7.05C13.5,6.65 13.07,6.35 12.59,6.17C12.12,6 11.58,5.9 11,5.9C10.42,5.9 9.89,6 9.41,6.17C8.93,6.35 8.5,6.64 8.18,7.05C7.84,7.46 7.58,8 7.39,8.64C7.21,9.29 7.11,10.09 7.11,11.03V12.95C7.11,13.89 7.2,14.69 7.39,15.34C7.58,16 7.84,16.53 8.19,16.94C8.53,17.35 8.94,17.65 9.42,17.83C9.9,18 10.43,18.11 11,18.11C11.6,18.11 12.13,18 12.6,17.83C13.08,17.65 13.5,17.35 13.82,16.94C14.16,16.53 14.42,16 14.6,15.34C14.78,14.69 14.88,13.89 14.88,12.95V11.03C14.88,10.09 14.79,9.29 14.6,8.64C14.42,8 14.16,7.45 13.82,7.05M23.78,14.37C23.64,14.09 23.43,13.84 23.15,13.63C22.87,13.42 22.54,13.24 22.14,13.1C21.74,12.96 21.29,12.83 20.79,12.72C20.44,12.65 20.15,12.57 19.92,12.5C19.69,12.41 19.5,12.33 19.37,12.24C19.23,12.15 19.14,12.05 19.09,11.94C19.04,11.83 19,11.7 19,11.55C19,11.41 19.04,11.27 19.1,11.14C19.16,11 19.25,10.89 19.37,10.8C19.5,10.7 19.64,10.62 19.82,10.56C20,10.5 20.22,10.47 20.46,10.47C20.71,10.47 20.93,10.5 21.12,10.58C21.31,10.65 21.47,10.75 21.6,10.87C21.73,11 21.82,11.13 21.89,11.29C21.95,11.45 22,11.61 22,11.78H23.94C23.94,11.39 23.86,11.03 23.7,10.69C23.54,10.35 23.31,10.06 23,9.81C22.71,9.56 22.35,9.37 21.92,9.22C21.5,9.07 21,9 20.46,9C19.95,9 19.5,9.07 19.07,9.21C18.66,9.35 18.3,9.54 18,9.78C17.72,10 17.5,10.3 17.34,10.62C17.18,10.94 17.11,11.27 17.11,11.63C17.11,12 17.19,12.32 17.34,12.59C17.5,12.87 17.7,13.11 18,13.32C18.25,13.53 18.58,13.7 18.96,13.85C19.34,14 19.77,14.11 20.23,14.21C20.62,14.29 20.94,14.38 21.18,14.47C21.42,14.56 21.61,14.66 21.75,14.76C21.88,14.86 21.97,15 22,15.1C22.07,15.22 22.09,15.35 22.09,15.5C22.09,15.81 21.96,16.06 21.69,16.26C21.42,16.46 21.03,16.55 20.5,16.55C20.3,16.55 20.09,16.53 19.88,16.47C19.67,16.42 19.5,16.34 19.32,16.23C19.15,16.12 19,15.97 18.91,15.79C18.8,15.61 18.74,15.38 18.73,15.12H16.84C16.84,15.5 16.92,15.83 17.08,16.17C17.24,16.5 17.47,16.82 17.78,17.1C18.09,17.37 18.47,17.59 18.93,17.76C19.39,17.93 19.91,18 20.5,18C21.04,18 21.5,17.95 21.95,17.82C22.38,17.69 22.75,17.5 23.06,17.28C23.37,17.05 23.6,16.77 23.77,16.45C23.94,16.13 24,15.78 24,15.39C24,15 23.93,14.65 23.78,14.37M0,7.72V9.4L3,8.4V18H5V6H4.75L0,7.72Z" /></svg>',
+  },
+  {
+    key: 'Timer3Outlined',
+    svg: '<svg id="mdi-timer-3" viewBox="0 0 24 24"><path d="M20.87,14.37C20.73,14.09 20.5,13.84 20.24,13.63C19.96,13.42 19.63,13.24 19.23,13.1C18.83,12.96 18.38,12.83 17.88,12.72C17.53,12.65 17.24,12.57 17,12.5C16.78,12.41 16.6,12.33 16.46,12.24C16.32,12.15 16.23,12.05 16.18,11.94C16.13,11.83 16.1,11.7 16.1,11.55C16.1,11.4 16.13,11.27 16.19,11.14C16.25,11 16.34,10.89 16.46,10.8C16.58,10.7 16.73,10.62 16.91,10.56C17.09,10.5 17.31,10.47 17.55,10.47C17.8,10.47 18,10.5 18.21,10.58C18.4,10.65 18.56,10.75 18.69,10.87C18.82,11 18.91,11.13 19,11.29C19.04,11.45 19.08,11.61 19.08,11.78H21.03C21.03,11.39 20.95,11.03 20.79,10.69C20.63,10.35 20.4,10.06 20.1,9.81C19.8,9.56 19.44,9.37 19,9.22C18.58,9.07 18.09,9 17.55,9C17.04,9 16.57,9.07 16.16,9.21C15.75,9.35 15.39,9.54 15.1,9.78C14.81,10 14.59,10.3 14.43,10.62C14.27,10.94 14.2,11.27 14.2,11.63C14.2,12 14.28,12.31 14.43,12.59C14.58,12.87 14.8,13.11 15.07,13.32C15.34,13.53 15.67,13.7 16.05,13.85C16.43,14 16.86,14.11 17.32,14.21C17.71,14.29 18.03,14.38 18.27,14.47C18.5,14.56 18.7,14.66 18.84,14.76C18.97,14.86 19.06,15 19.11,15.1C19.16,15.22 19.18,15.35 19.18,15.5C19.18,15.81 19.05,16.06 18.78,16.26C18.5,16.46 18.12,16.55 17.61,16.55C17.39,16.55 17.18,16.53 16.97,16.47C16.76,16.42 16.57,16.34 16.41,16.23C16.24,16.12 16.11,15.97 16,15.79C15.89,15.61 15.83,15.38 15.82,15.12H13.93C13.93,15.5 14,15.83 14.17,16.17C14.33,16.5 14.56,16.82 14.87,17.1C15.18,17.37 15.56,17.59 16,17.76C16.5,17.93 17,18 17.6,18C18.13,18 18.61,17.95 19.04,17.82C19.47,17.69 19.84,17.5 20.15,17.28C20.46,17.05 20.69,16.77 20.86,16.45C21.03,16.13 21.11,15.78 21.11,15.39C21.09,15 21,14.65 20.87,14.37M11.61,12.97C11.45,12.73 11.25,12.5 11,12.32C10.74,12.13 10.43,11.97 10.06,11.84C10.36,11.7 10.63,11.54 10.86,11.34C11.09,11.14 11.28,10.93 11.43,10.7C11.58,10.47 11.7,10.24 11.77,10C11.85,9.75 11.88,9.5 11.88,9.26C11.88,8.71 11.79,8.22 11.6,7.8C11.42,7.38 11.16,7.03 10.82,6.74C10.5,6.46 10.09,6.24 9.62,6.1C9.17,5.97 8.65,5.9 8.09,5.9C7.54,5.9 7.03,6 6.57,6.14C6.1,6.31 5.7,6.54 5.37,6.83C5.04,7.12 4.77,7.46 4.59,7.86C4.39,8.25 4.3,8.69 4.3,9.15H6.28C6.28,8.89 6.33,8.66 6.42,8.46C6.5,8.26 6.64,8.08 6.8,7.94C6.97,7.8 7.16,7.69 7.38,7.61C7.6,7.53 7.84,7.5 8.11,7.5C8.72,7.5 9.17,7.65 9.47,7.96C9.77,8.27 9.91,8.71 9.91,9.28C9.91,9.55 9.87,9.8 9.79,10C9.71,10.24 9.58,10.43 9.41,10.59C9.24,10.75 9.03,10.87 8.78,10.96C8.53,11.05 8.23,11.09 7.89,11.09H6.72V12.66H7.9C8.24,12.66 8.54,12.7 8.81,12.77C9.08,12.85 9.31,12.96 9.5,13.12C9.69,13.28 9.84,13.5 9.94,13.73C10.04,13.97 10.1,14.27 10.1,14.6C10.1,15.22 9.92,15.69 9.57,16C9.22,16.35 8.73,16.5 8.12,16.5C7.83,16.5 7.56,16.47 7.32,16.38C7.08,16.3 6.88,16.18 6.71,16C6.54,15.86 6.41,15.68 6.32,15.46C6.23,15.24 6.18,15 6.18,14.74H4.19C4.19,15.29 4.3,15.77 4.5,16.19C4.72,16.61 5,16.96 5.37,17.24C5.73,17.5 6.14,17.73 6.61,17.87C7.08,18 7.57,18.08 8.09,18.08C8.66,18.08 9.18,18 9.67,17.85C10.16,17.7 10.58,17.47 10.93,17.17C11.29,16.87 11.57,16.5 11.77,16.07C11.97,15.64 12.07,15.14 12.07,14.59C12.07,14.3 12.03,14 11.96,13.73C11.88,13.5 11.77,13.22 11.61,12.97Z" /></svg>',
+  },
+  {
+    key: 'TimerCogOutlined',
+    svg: '<svg id="mdi-timer-cog" viewBox="0 0 24 24"><path d="M22.8 19.4C22.9 19.4 22.9 19.5 22.8 19.6L21.8 21.3C21.7 21.4 21.6 21.4 21.5 21.4L20.3 21C20 21.2 19.8 21.3 19.5 21.5L19.3 22.8C19.3 22.9 19.2 23 19.1 23H17.1C17 23 16.9 22.9 16.8 22.8L16.6 21.5C16.3 21.4 16 21.2 15.8 21L14.6 21.5C14.5 21.5 14.4 21.5 14.3 21.4L13.3 19.7C13.2 19.6 13.3 19.5 13.4 19.4L14.5 18.6V17.6L13.4 16.8C13.3 16.7 13.3 16.6 13.3 16.5L14.3 14.8C14.4 14.7 14.5 14.7 14.6 14.7L15.8 15.2C16.1 15 16.3 14.9 16.6 14.7L16.8 13.4C16.8 13.3 16.9 13.2 17.1 13.2H19.1C19.2 13.2 19.3 13.3 19.3 13.4L19.5 14.7C19.8 14.8 20.1 15 20.4 15.2L21.6 14.7C21.7 14.7 21.9 14.7 21.9 14.8L22.9 16.5C23 16.6 22.9 16.7 22.8 16.8L21.7 17.6V18.6L22.8 19.4M19.5 18C19.5 17.2 18.8 16.5 18 16.5S16.5 17.2 16.5 18 17.2 19.5 18 19.5 19.5 18.8 19.5 18M11 18C11 16.5 11.5 15.1 12.3 14H11V7H13V13.1C14.3 11.8 16 11 18 11C19 11 20 11.2 20.9 11.6C20.6 10 20 8.6 19 7.4L20.5 6C20 5.5 19.5 5 19 4.6L17.6 6C16.1 4.7 14.1 4 12 4C7 4 3 8 3 13S7 22 12 22H12.3C11.5 20.9 11 19.5 11 18M15 1H9V3H15V1Z" /></svg>',
+  },
+  {
+    key: 'TimerCogOutlineOutlined',
+    svg: '<svg id="mdi-timer-cog-outline" viewBox="0 0 24 24"><path d="M22.8 19.4C22.9 19.4 22.9 19.5 22.8 19.6L21.8 21.3C21.7 21.4 21.6 21.4 21.5 21.4L20.3 21C20 21.2 19.8 21.3 19.5 21.5L19.3 22.8C19.3 22.9 19.2 23 19.1 23H17.1C17 23 16.9 22.9 16.8 22.8L16.6 21.5C16.3 21.4 16 21.2 15.8 21L14.6 21.5C14.5 21.5 14.4 21.5 14.3 21.4L13.3 19.7C13.2 19.6 13.3 19.5 13.4 19.4L14.5 18.6V17.6L13.4 16.8C13.3 16.7 13.3 16.6 13.3 16.5L14.3 14.8C14.4 14.7 14.5 14.7 14.6 14.7L15.8 15.2C16.1 15 16.3 14.9 16.6 14.7L16.8 13.4C16.8 13.3 16.9 13.2 17.1 13.2H19.1C19.2 13.2 19.3 13.3 19.3 13.4L19.5 14.7C19.8 14.8 20.1 15 20.4 15.2L21.6 14.7C21.7 14.7 21.9 14.7 21.9 14.8L22.9 16.5C23 16.6 22.9 16.7 22.8 16.8L21.7 17.6V18.6L22.8 19.4M19.5 18C19.5 17.2 18.8 16.5 18 16.5S16.5 17.2 16.5 18 17.2 19.5 18 19.5 19.5 18.8 19.5 18M13 14V8H11V14M15 1H9V3H15V1M11.3 20C7.8 19.6 5 16.6 5 13C5 9.1 8.1 6 12 6C15.2 6 17.9 8.1 18.7 11C19.5 11.1 20.2 11.3 20.9 11.6C20.6 10 20 8.6 19 7.4L20.5 6C20 5.5 19.5 5 19 4.6L17.6 6C16.1 4.7 14.1 4 12 4C7 4 3 8 3 13S7 22 12 22H12.3C11.8 21.4 11.5 20.7 11.3 20Z" /></svg>',
+  },
+  {
+    key: 'TimerOffOutlined',
+    svg: '<svg id="mdi-timer-off" viewBox="0 0 24 24"><path d="M3 4L1.75 5.27L4.5 8.03C3.55 9.45 3 11.16 3 13C3 17.97 7.03 22 12 22C13.84 22 15.55 21.45 17 20.5L19.5 23L20.75 21.73L13.04 14L3 4M15 1H9V3H15M21 13C21 14.83 20.45 16.53 19.5 17.94L13 11.45V7H11V9.45L7.05 5.5C8.47 4.55 10.17 4 12 4C14.12 4 16.07 4.74 17.62 5.97L19.04 4.55L20.45 5.97L19.03 7.39C20.26 8.93 21 10.88 21 13Z" /></svg>',
+  },
+  {
+    key: 'TimerOffOutlineOutlined',
+    svg: '<svg id="mdi-timer-off-outline" viewBox="0 0 24 24"><path d="M12,20A7,7 0 0,1 5,13C5,11.72 5.35,10.5 5.95,9.5L15.5,19.04C14.5,19.65 13.28,20 12,20M3,4L1.75,5.27L4.5,8.03C3.55,9.45 3,11.16 3,13A9,9 0 0,0 12,22C13.84,22 15.55,21.45 17,20.5L19.5,23L20.75,21.73L13.04,14L3,4M11,9.44L13,11.44V8H11M15,1H9V3H15M19.04,4.55L17.62,5.97C16.07,4.74 14.12,4 12,4C10.17,4 8.47,4.55 7.05,5.5L8.5,6.94C9.53,6.35 10.73,6 12,6A7,7 0 0,1 19,13C19,14.27 18.65,15.47 18.06,16.5L19.5,17.94C20.45,16.53 21,14.83 21,13C21,10.88 20.26,8.93 19.03,7.39L20.45,5.97L19.04,4.55Z" /></svg>',
+  },
+  {
+    key: 'TimerOutlineOutlined',
+    svg: '<svg id="mdi-timer-outline" viewBox="0 0 24 24"><path d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M19.03,7.39L20.45,5.97C20,5.46 19.55,5 19.04,4.56L17.62,6C16.07,4.74 14.12,4 12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22C17,22 21,17.97 21,13C21,10.88 20.26,8.93 19.03,7.39M11,14H13V8H11M15,1H9V3H15V1Z" /></svg>',
+  },
+  {
+    key: 'TimerSandOutlined',
+    svg: '<svg id="mdi-timer-sand" viewBox="0 0 24 24"><path d="M6,2H18V8H18V8L14,12L18,16V16H18V22H6V16H6V16L10,12L6,8V8H6V2M16,16.5L12,12.5L8,16.5V20H16V16.5M12,11.5L16,7.5V4H8V7.5L12,11.5M10,6H14V6.75L12,8.75L10,6.75V6Z" /></svg>',
+  },
+  {
+    key: 'TimerSettingsOutlineOutlined',
+    svg: '<svg id="mdi-timer-settings-outline" viewBox="0 0 24 24"><path d="M12 19C8.1 19 5 15.9 5 12S8.1 5 12 5 19 8.1 19 12 15.9 19 12 19M19 6.4L20.5 5C20 4.5 19.5 4 19 3.6L17.6 5C16 3.7 14.1 3 12 3C7 3 3 7 3 12S7 21 12 21C17 21 21 17 21 12C21 9.9 20.3 7.9 19 6.4M11 13H13V7H11M15 0H9V2H15V0M13 22H11V24H13V22M17 22H15V24H17V22M9 22H7V24H9V22Z" /></svg>',
+  },
+  {
+    key: 'TimetableOutlined',
+    svg: '<svg id="mdi-timetable" viewBox="0 0 24 24"><path d="M14,12H15.5V14.82L17.94,16.23L17.19,17.53L14,15.69V12M4,2H18A2,2 0 0,1 20,4V10.1C21.24,11.36 22,13.09 22,15A7,7 0 0,1 15,22C13.09,22 11.36,21.24 10.1,20H4A2,2 0 0,1 2,18V4A2,2 0 0,1 4,2M4,15V18H8.67C8.24,17.09 8,16.07 8,15H4M4,8H10V5H4V8M18,8V5H12V8H18M4,13H8.29C8.63,11.85 9.26,10.82 10.1,10H4V13M15,10.15A4.85,4.85 0 0,0 10.15,15C10.15,17.68 12.32,19.85 15,19.85A4.85,4.85 0 0,0 19.85,15C19.85,12.32 17.68,10.15 15,10.15Z" /></svg>',
+  },
+  {
+    key: 'TireOutlined',
+    svg: '<svg id="mdi-tire" viewBox="0 0 24 24"><path d="M19.66 9.64L19.3 8.7L21.16 8C20.24 5.88 18.6 4.18 16.54 3.14L15.74 4.92L14.82 4.5L15.62 2.7C14.5 2.26 13.28 2 12 2C10.94 2 9.92 2.22 8.96 2.5L9.64 4.34L8.7 4.7L8 2.84C5.88 3.76 4.18 5.4 3.14 7.46L4.92 8.26L4.5 9.18L2.7 8.38C2.26 9.5 2 10.72 2 12C2 13.06 2.22 14.08 2.5 15.04L4.34 14.36L4.7 15.3L2.84 16C3.76 18.12 5.4 19.82 7.46 20.86L8.26 19.08L9.18 19.5L8.38 21.3C9.5 21.74 10.72 22 12 22C13.06 22 14.08 21.78 15.04 21.5L14.36 19.66L15.3 19.3L16 21.16C18.12 20.24 19.82 18.6 20.86 16.54L19.08 15.74L19.5 14.82L21.3 15.62C21.74 14.5 22 13.28 22 12C22 10.94 21.78 9.92 21.5 8.96L19.66 9.64M14.3 17.54C11.24 18.8 7.72 17.36 6.46 14.3S6.64 7.72 9.7 6.46 16.28 6.64 17.54 9.7C18.82 12.76 17.36 16.28 14.3 17.54Z" /></svg>',
+  },
+  {
+    key: 'ToggleSwitchOutlined',
+    svg: '<svg id="mdi-toggle-switch" viewBox="0 0 24 24"><path d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z" /></svg>',
+  },
+  {
+    key: 'ToggleSwitchOffOutlined',
+    svg: '<svg id="mdi-toggle-switch-off" viewBox="0 0 24 24"><path d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" /></svg>',
+  },
+  {
+    key: 'ToggleSwitchOffOutlineOutlined',
+    svg: '<svg id="mdi-toggle-switch-off-outline" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zM7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" /></svg>',
+  },
+  {
+    key: 'ToggleSwitchOutlineOutlined',
+    svg: '<svg id="mdi-toggle-switch-outline" viewBox="0 0 24 24"><path d="M17 6H7C3.69 6 1 8.69 1 12S3.69 18 7 18H17C20.31 18 23 15.31 23 12S20.31 6 17 6M17 16H7C4.79 16 3 14.21 3 12S4.79 8 7 8H17C19.21 8 21 9.79 21 12S19.21 16 17 16M17 9C15.34 9 14 10.34 14 12S15.34 15 17 15 20 13.66 20 12 18.66 9 17 9Z" /></svg>',
+  },
+  {
+    key: 'UmbrellaOutlined',
+    svg: '<svg id="mdi-umbrella" viewBox="0 0 24 24"><path d="M12,2A9,9 0 0,1 21,11H13V19A3,3 0 0,1 10,22A3,3 0 0,1 7,19V18H9V19A1,1 0 0,0 10,20A1,1 0 0,0 11,19V11H3A9,9 0 0,1 12,2Z" /></svg>',
+  },
+  {
+    key: 'UmbrellaBeachOutlined',
+    svg: '<svg id="mdi-umbrella-beach" viewBox="0 0 24 24"><path d="M13.13 14.56L14.56 13.13L21 19.57L19.57 21L13.13 14.56M17.42 8.83L20.28 5.97C16.33 2 9.93 2 6 5.95C9.91 4.65 14.29 5.7 17.42 8.83M5.95 6C2 9.93 2 16.33 5.97 20.28L8.83 17.42C5.7 14.29 4.65 9.91 5.95 6M5.97 5.96L5.96 5.97C5.58 9 7.13 12.85 10.26 16L16 10.26C12.86 7.13 9 5.58 5.97 5.96Z" /></svg>',
+  },
+  {
+    key: 'UmbrellaBeachOutlineOutlined',
+    svg: '<svg id="mdi-umbrella-beach-outline" viewBox="0 0 24 24"><path d="M21 19.57L19.57 21L13.13 14.56L14.56 13.13L21 19.57M13.12 3C10.54 3 7.96 4 6 5.95L5.97 5.96C2 9.91 2 16.32 5.97 20.27L20.27 5.96C18.3 4 15.71 3 13.12 3M6.14 17.27C5.4 16.03 5 14.61 5 13.12C5 12.19 5.16 11.3 5.46 10.45C5.65 12.36 6.35 14.24 7.53 15.89L6.14 17.27M9 14.43C7.63 12.38 7.12 9.93 7.6 7.6C8.18 7.5 8.76 7.42 9.35 7.42C11.15 7.42 12.9 7.97 14.43 9L9 14.43M10.45 5.46C11.3 5.16 12.19 5 13.12 5C14.61 5 16.03 5.4 17.27 6.14L15.88 7.53C14.23 6.35 12.36 5.65 10.45 5.46Z" /></svg>',
+  },
+  {
+    key: 'UmbrellaClosedOutlined',
+    svg: '<svg id="mdi-umbrella-closed" viewBox="0 0 24 24"><path d="M12 2C11.6 2 11.3 2.2 11.1 2.6L6.5 15H11V19C11 19.6 10.6 20 10 20C9.4 20 9 19.6 9 19V18H7V19C7 20.7 8.3 22 10 22S13 20.7 13 19V15H17.5L12.9 2.6C12.7 2.2 12.4 2 12 2Z" /></svg>',
+  },
+  {
+    key: 'UmbrellaClosedOutlineOutlined',
+    svg: '<svg id="mdi-umbrella-closed-outline" viewBox="0 0 24 24"><path d="M12 2C12.4 2 12.8 2.2 12.9 2.6L17.5 15H13V19C13 20.7 11.7 22 10 22S7 20.7 7 19V18H9V19C9 19.6 9.4 20 10 20C10.6 20 11 19.6 11 19V15H6.5L11.1 2.6C11.2 2.2 11.6 2 12 2M12 5.9L9.4 13H14.7L12 5.9Z" /></svg>',
+  },
+  {
+    key: 'UmbrellaClosedVariantOutlined',
+    svg: '<svg id="mdi-umbrella-closed-variant" viewBox="0 0 24 24"><path d="M15 7L13 6V3.5C13 3.2 13.2 3 13.5 3S14 3.2 14 3.5V4H16V3.5C16 2.1 14.9 1 13.5 1S11 2.1 11 3.5V6L9 7L6 6L11.1 21.3C11.4 22.2 12.7 22.2 13 21.3C14.6 16.2 18 6 18 6L15 7M11 15L9 8.9L9.7 9.1L11 8.1V15M13 8.1L14.3 9.1L15 8.9L13 15V8.1Z" /></svg>',
+  },
+  {
+    key: 'UmbrellaOutlineOutlined',
+    svg: '<svg id="mdi-umbrella-outline" viewBox="0 0 24 24"><path d="M12,4C8.9,4 6.18,6.03 5.3,9H18.7C17.82,6.04 15.09,4 12,4M12,2A9,9 0 0,1 21,11H13V19A3,3 0 0,1 10,22A3,3 0 0,1 7,19V18H9V19A1,1 0 0,0 10,20A1,1 0 0,0 11,19V11H3A9,9 0 0,1 12,2Z" /></svg>',
+  },
+  {
+    key: 'ValveOutlined',
+    svg: '<svg id="mdi-valve" viewBox="0 0 24 24"><path d="M4 22H2V2H4M22 2H20V22H22M17.24 5.34L13.24 9.34A3 3 0 0 0 9.24 13.34L5.24 17.34L6.66 18.76L10.66 14.76A3 3 0 0 0 14.66 10.76L18.66 6.76Z" /></svg>',
+  },
+  {
+    key: 'ValveClosedOutlined',
+    svg: '<svg id="mdi-valve-closed" viewBox="0 0 24 24"><path d="M22 2V22H20V13H14.82A3 3 0 0 1 9.18 13H4V22H2V2H4V11H9.18A3 3 0 0 1 14.82 11H20V2Z" /></svg>',
+  },
+  {
+    key: 'ValveOpenOutlined',
+    svg: '<svg id="mdi-valve-open" viewBox="0 0 24 24"><path d="M4 22H2V2H4M22 2H20V22H22M11 4V9.18A3 3 0 0 0 11 14.82V20H13V14.82A3 3 0 0 0 13 9.18V4Z" /></svg>',
+  },
+  {
+    key: 'VolumeHighOutlined',
+    svg: '<svg id="mdi-volume-high" viewBox="0 0 24 24"><path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" /></svg>',
+  },
+  {
+    key: 'VolumeLowOutlined',
+    svg: '<svg id="mdi-volume-low" viewBox="0 0 24 24"><path d="M7,9V15H11L16,20V4L11,9H7Z" /></svg>',
+  },
+  {
+    key: 'VolumeMuteOutlined',
+    svg: '<svg id="mdi-volume-mute" viewBox="0 0 24 24"><path d="M3,9H7L12,4V20L7,15H3V9M16.59,12L14,9.41L15.41,8L18,10.59L20.59,8L22,9.41L19.41,12L22,14.59L20.59,16L18,13.41L15.41,16L14,14.59L16.59,12Z" /></svg>',
+  },
+  {
+    key: 'VolumeOffOutlined',
+    svg: '<svg id="mdi-volume-off" viewBox="0 0 24 24"><path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z" /></svg>',
+  },
+  {
+    key: 'VolumeVariantOffOutlined',
+    svg: '<svg id="mdi-volume-variant-off" viewBox="0 0 24 24"><path d="M5.64,3.64L21.36,19.36L19.95,20.78L16,16.83V20L11,15H7V9H8.17L4.22,5.05L5.64,3.64M16,4V11.17L12.41,7.58L16,4Z" /></svg>',
+  },
+  {
+    key: 'WallSconceOutlined',
+    svg: '<svg id="mdi-wall-sconce" viewBox="0 0 24 24"><path d="M11,4L7,13H19L15,4H11M4,14V22H6V19H14V14H12V17H6V14H4Z" /></svg>',
+  },
+  {
+    key: 'WallSconceFlatOutlined',
+    svg: '<svg id="mdi-wall-sconce-flat" viewBox="0 0 24 24"><path d="M5,5V11H19V5H5M5.27,13.32L3.5,15.09L4.91,16.5L6.68,14.73L5.27,13.32M18.73,13.32L17.32,14.73L19.09,16.5L20.5,15.09L18.73,13.32M11,16V19H13V16H11Z" /></svg>',
+  },
+  {
+    key: 'WallSconceFlatOutlineOutlined',
+    svg: '<svg id="mdi-wall-sconce-flat-outline" viewBox="0 0 24 24"><path d="M5 5V11H19V5H5M17 9H7V7H17V9M5.27 13.32L3.5 15.09L4.91 16.5L6.68 14.73L5.27 13.32M18.73 13.32L17.32 14.73L19.09 16.5L20.5 15.09L18.73 13.32M11 16V19H13V16H11Z" /></svg>',
+  },
+  {
+    key: 'WallSconceFlatVariantOutlined',
+    svg: '<svg id="mdi-wall-sconce-flat-variant" viewBox="0 0 24 24"><path d="M19 19V13H5V19H19M18.73 10.68L20.5 8.91L19.09 7.5L17.32 9.27L18.73 10.68M5.27 10.68L6.68 9.27L4.91 7.5L3.5 8.91L5.27 10.68M13 8V5H11V8H13Z" /></svg>',
+  },
+  {
+    key: 'WallSconceOutlineOutlined',
+    svg: '<svg id="mdi-wall-sconce-outline" viewBox="0 0 24 24"><path d="M13.7 6L15.92 11H10.08L12.3 6H13.7M15 4H11L7 13H19L15 4M4 14V22H6V19H14V14H12V17H6V14H4Z" /></svg>',
+  },
+  {
+    key: 'WallSconceRoundOutlined',
+    svg: '<svg id="mdi-wall-sconce-round" viewBox="0 0 24 24"><path d="M13 19V16H11V19H13M19.09 16.5L20.5 15.09L18.73 13.32L17.32 14.73L19.09 16.5M4.91 16.5L6.68 14.73L5.27 13.32L3.5 15.09L4.91 16.5M20 12C20 9.14 18.5 6.5 16 5.07S10.5 3.64 8 5.07 4 9.14 4 12H20Z" /></svg>',
+  },
+  {
+    key: 'WallSconceRoundVariantOutlined',
+    svg: '<svg id="mdi-wall-sconce-round-variant" viewBox="0 0 24 24"><path d="M11 5V8H13V5H11M4.91 7.5L3.5 8.91L5.27 10.68L6.68 9.27L4.91 7.5M19.09 7.5L17.32 9.27L18.73 10.68L20.5 8.91L19.09 7.5M4 12C4 14.86 5.5 17.5 8 18.93S13.5 20.36 16 18.93 20 14.86 20 12H4Z" /></svg>',
+  },
+  {
+    key: 'WallSconceRoundVariantOutlineOutlined',
+    svg: '<svg id="mdi-wall-sconce-round-variant-outline" viewBox="0 0 24 24"><path d="M11 5V8H13V5H11M4.91 7.5L3.5 8.91L5.27 10.68L6.68 9.27L4.91 7.5M19.09 7.5L17.32 9.27L18.73 10.68L20.5 8.91L19.09 7.5M17.66 14C17.19 15.33 16.26 16.5 15 17.19C14.08 17.72 13.04 18 12 18S9.92 17.72 9 17.19C7.74 16.5 6.81 15.33 6.34 14H17.66M20 12H4C4 14.86 5.5 17.5 8 18.93C9.25 19.65 10.63 20 12 20S14.75 19.65 16 18.93C18.5 17.5 20 14.86 20 12Z" /></svg>',
+  },
+  {
+    key: 'WatchVibrateOutlined',
+    svg: '<svg id="mdi-watch-vibrate" viewBox="0 0 24 24"><path d="M3,17V7H5V17H3M19,17V7H21V17H19M22,9H24V15H22V9M0,15V9H2V15H0M17.96,11.97C17.96,13.87 17.07,15.57 15.68,16.67L14.97,20.95H9L8.27,16.67C6.88,15.57 6,13.87 6,11.97C6,10.07 6.88,8.37 8.27,7.28L9,3H14.97L15.68,7.28C17.07,8.37 17.96,10.07 17.96,11.97M7.5,11.97C7.5,14.45 9.5,16.46 11.97,16.46A4.5,4.5 0 0,0 16.46,11.97C16.46,9.5 14.45,7.5 11.97,7.5A4.47,4.47 0 0,0 7.5,11.97Z" /></svg>',
+  },
+  {
+    key: 'WatchVibrateOffOutlined',
+    svg: '<svg id="mdi-watch-vibrate-off" viewBox="0 0 24 24"><path d="M0,9H2V15H0V9M12,7.5C14.47,7.5 16.47,9.53 16.46,12C16.45,12.38 16.4,12.76 16.3,13.13L17.5,14.31C17.81,13.58 18,12.8 18,12C18,10.17 17.16,8.44 15.72,7.31L15,3H9L8.59,5.39L10.86,7.66C11.23,7.55 11.61,7.5 12,7.5M21,17V7H19V15.8L20.2,17H21M16.5,15.86L22.11,21.46L20.84,22.73L15.55,17.44L15,21H9L8.27,16.72C5.85,14.82 5.27,11.4 6.91,8.8L1.11,3L2.39,1.73L8.09,7.44L9.17,8.5L15.44,14.79L16.5,15.86M14.05,15.94L8.05,9.94C7.7,10.57 7.5,11.28 7.5,12C7.5,14.47 9.53,16.47 12,16.46C12.72,16.46 13.42,16.28 14.05,15.94M22,9V15H24V9H22M3,17H5V7H3V17Z" /></svg>',
+  },
+  {
+    key: 'WaterOutlined',
+    svg: '<svg id="mdi-water" viewBox="0 0 24 24"><path d="M12,20A6,6 0 0,1 6,14C6,10 12,3.25 12,3.25C12,3.25 18,10 18,14A6,6 0 0,1 12,20Z" /></svg>',
+  },
+  {
+    key: 'WaterAlertOutlined',
+    svg: '<svg id="mdi-water-alert" viewBox="0 0 24 24"><path d="M10 3.25C10 3.25 16 10 16 14C16 17.31 13.31 20 10 20S4 17.31 4 14C4 10 10 3.25 10 3.25M20 7V13H18V7H20M18 17H20V15H18V17Z" /></svg>',
+  },
+  {
+    key: 'WaterAlertOutlineOutlined',
+    svg: '<svg id="mdi-water-alert-outline" viewBox="0 0 24 24"><path d="M10 3.25C10 3.25 4 10 4 14C4 17.31 6.69 20 10 20S16 17.31 16 14C16 10 10 3.25 10 3.25M10 18C7.79 18 6 16.21 6 14C6 12.23 8 8.96 10 6.39C12 8.95 14 12.23 14 14C14 16.21 12.21 18 10 18M20 7V13H18V7H20M18 17H20V15H18V17Z" /></svg>',
+  },
+  {
+    key: 'WaterCheckOutlined',
+    svg: '<svg id="mdi-water-check" viewBox="0 0 24 24"><path d="M21.75 16.25L17 21L14.25 18L15.41 16.84L17 18.43L20.59 14.84L21.75 16.25M17.62 12C16.31 8.1 12 3.25 12 3.25S6 10 6 14C6 17.31 8.69 20 12 20H12.34C12.12 19.36 12 18.7 12 18C12 14.82 14.5 12.22 17.62 12Z" /></svg>',
+  },
+  {
+    key: 'WaterCheckOutlineOutlined',
+    svg: '<svg id="mdi-water-check-outline" viewBox="0 0 24 24"><path d="M21.75 16.25L17 21L14.25 18L15.41 16.84L17 18.43L20.59 14.84L21.75 16.25M8 14C8 12.23 10 8.96 12 6.39C13.5 8.33 15 10.67 15.67 12.47C16.27 12.21 16.93 12.06 17.62 12C16.31 8.1 12 3.25 12 3.25S6 10 6 14C6 17.31 8.69 20 12 20C12.12 20 12.23 20 12.34 20C12.12 19.36 12 18.7 12 18C9.79 18 8 16.21 8 14Z" /></svg>',
+  },
+  {
+    key: 'WaterOffOutlined',
+    svg: '<svg id="mdi-water-off" viewBox="0 0 24 24"><path d="M20.84 22.73L16.29 18.18C15.2 19.3 13.69 20 12 20C8.69 20 6 17.31 6 14C6 12.67 6.67 11.03 7.55 9.44L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M18 14C18 10 12 3.25 12 3.25S10.84 4.55 9.55 6.35L17.95 14.75C18 14.5 18 14.25 18 14Z" /></svg>',
+  },
+  {
+    key: 'WaterOffOutlineOutlined',
+    svg: '<svg id="mdi-water-off-outline" viewBox="0 0 24 24"><path d="M22.11 21.46L2.39 1.73L1.11 3L7.65 9.54C6.74 11.03 6 12.65 6 14.23C6 17.54 8.69 20.23 12 20.23C13.74 20.23 15.3 19.5 16.4 18.29L20.84 22.73L22.11 21.46M12 18.23C9.78 18.23 8 16.45 8 14.23C8 13.5 8.5 12.27 9.14 11.03L15 16.88C14.26 17.71 13.2 18.23 12 18.23M11.14 7.94L9.71 6.5C10.57 5.38 11.25 4.61 11.25 4.61L12 3.77L12.75 4.61C12.75 4.61 14.03 6.06 15.32 7.94S18 12.07 18 14.23C18 14.41 18 14.59 17.97 14.77L15.46 12.26C15 11.23 14.37 10.07 13.68 9.07C12.84 7.85 12.44 7.42 12 6.9C11.73 7.21 11.5 7.5 11.14 7.94Z" /></svg>',
+  },
+  {
+    key: 'WaterOutlineOutlined',
+    svg: '<svg id="mdi-water-outline" viewBox="0 0 24 24"><path d="M12,3.77L11.25,4.61C11.25,4.61 9.97,6.06 8.68,7.94C7.39,9.82 6,12.07 6,14.23A6,6 0 0,0 12,20.23A6,6 0 0,0 18,14.23C18,12.07 16.61,9.82 15.32,7.94C14.03,6.06 12.75,4.61 12.75,4.61L12,3.77M12,6.9C12.44,7.42 12.84,7.85 13.68,9.07C14.89,10.83 16,13.07 16,14.23C16,16.45 14.22,18.23 12,18.23C9.78,18.23 8,16.45 8,14.23C8,13.07 9.11,10.83 10.32,9.07C11.16,7.85 11.56,7.42 12,6.9Z" /></svg>',
+  },
+  {
+    key: 'WaterPoloOutlined',
+    svg: '<svg id="mdi-water-polo" viewBox="0 0 24 24"><path d="M20 16H22V18H20C18.6 18 17.2 17.6 16 17C13.5 18.3 10.5 18.3 8 17C6.8 17.6 5.4 18 4 18H2V16H4C5.4 16 6.8 15.5 8 14.7C10.4 16.4 13.6 16.4 16 14.7C17.2 15.5 18.6 16 20 16M13 10.6C13.6 10.3 14.3 10 15 9.9V10.2C15.3 11.2 15.3 12.1 15.2 13.1C14.3 13.6 13.2 13.9 12.2 13.9C12.7 12.9 13 11.7 13 10.6M12.9 3.6C11.5 4 10.3 4.7 9.3 5.7C8.9 4.7 8.7 3.7 8.7 2.7C10.9 1.7 13.4 1.8 15.6 2.9C15.9 3 16.2 3.1 16.4 3.3C15.2 3.2 14 3.3 12.9 3.6M6.8 13.3C6.2 13.6 5.6 13.8 5 13.9C4.3 12.6 4 11.2 4 9.8C4.5 10.8 5.2 11.8 6 12.6C6.3 12.8 6.5 13.1 6.8 13.3M19 13.9C18.4 13.8 17.8 13.6 17.3 13.4C17.5 12.2 17.4 11 17.1 9.8C18.2 9.9 19.2 10.2 20.1 10.8C20 11.8 19.7 12.7 19.2 13.6L19 13.9M7.4 11.2C6.2 10.1 5.5 8.5 5.2 6.9L5.1 6C5.6 5.2 6.1 4.6 6.8 4C6.9 5.4 7.4 6.7 8.2 7.8C8.9 8.9 9.9 9.9 11 10.5C11 11.3 10.8 12.1 10.5 12.9C9.3 12.6 8.3 12 7.4 11.2M13.5 5.5C15 5.1 16.7 5.2 18.2 5.7L19 6.1C19.4 6.8 19.6 7.6 19.8 8.4C17.3 7.3 14.4 7.5 12 8.8C11.3 8.5 10.8 8 10.3 7.4L10.4 7.3C11.3 6.5 12.3 5.8 13.5 5.5M16 18.7C17.2 19.5 18.6 20 20 20H22V22H20C18.6 22 17.2 21.6 16 21C13.5 22.3 10.5 22.3 8 21C6.8 21.6 5.4 22 4 22H2V20H4C5.4 20 6.8 19.5 8 18.7C10.4 20.4 13.6 20.4 16 18.7Z" /></svg>',
+  },
+  {
+    key: 'WaterPumpOutlined',
+    svg: '<svg id="mdi-water-pump" viewBox="0 0 24 24"><path d="M19,14.5C19,14.5 21,16.67 21,18A2,2 0 0,1 19,20A2,2 0 0,1 17,18C17,16.67 19,14.5 19,14.5M5,18V9A2,2 0 0,1 3,7A2,2 0 0,1 5,5V4A2,2 0 0,1 7,2H9A2,2 0 0,1 11,4V5H19A2,2 0 0,1 21,7V9L21,11A1,1 0 0,1 22,12A1,1 0 0,1 21,13H17A1,1 0 0,1 16,12A1,1 0 0,1 17,11V9H11V18H12A2,2 0 0,1 14,20V22H2V20A2,2 0 0,1 4,18H5Z" /></svg>',
+  },
+  {
+    key: 'WaterPumpOffOutlined',
+    svg: '<svg id="mdi-water-pump-off" viewBox="0 0 24 24"><path d="M5.7 2.5A2 2 0 0 1 7 2H9A2 2 0 0 1 11 4V5H19A2 2 0 0 1 21 7V11A1 1 0 0 1 21 13H17A1 1 0 0 1 17 11V9H12.2M20.84 22.73L22.11 21.46L11 10.34L2.39 1.73L1.11 3L3.65 5.54A2 2 0 0 0 5 9V18H4A2 2 0 0 0 2 20V22H14V20A2 2 0 0 0 12 18H11V12.89Z" /></svg>',
+  },
+  {
+    key: 'WaterRemoveOutlined',
+    svg: '<svg id="mdi-water-remove" viewBox="0 0 24 24"><path d="M12 18C12 18.7 12.12 19.36 12.34 20C12.23 20 12.12 20 12 20C8.69 20 6 17.31 6 14C6 10 12 3.25 12 3.25S16.31 8.1 17.62 12C14.5 12.22 12 14.82 12 18M21.54 15.88L20.13 14.47L18 16.59L15.88 14.47L14.47 15.88L16.59 18L14.47 20.12L15.88 21.53L18 19.41L20.12 21.53L21.53 20.12L19.41 18L21.54 15.88Z" /></svg>',
+  },
+  {
+    key: 'WaterRemoveOutlineOutlined',
+    svg: '<svg id="mdi-water-remove-outline" viewBox="0 0 24 24"><path d="M12 18C12 18.7 12.12 19.36 12.34 20C12.23 20 12.12 20 12 20C8.69 20 6 17.31 6 14C6 10 12 3.25 12 3.25S16.31 8.1 17.62 12C16.93 12.06 16.28 12.22 15.67 12.47C15 10.68 13.5 8.33 12 6.39C10 8.96 8 12.23 8 14C8 16.21 9.79 18 12 18M21.54 15.88L20.13 14.47L18 16.59L15.88 14.47L14.47 15.88L16.59 18L14.47 20.12L15.88 21.53L18 19.41L20.12 21.53L21.53 20.12L19.41 18L21.54 15.88Z" /></svg>',
+  },
+  {
+    key: 'WaterWellOutlined',
+    svg: '<svg id="mdi-water-well" viewBox="0 0 24 24"><path d="M22 16H2V18H4V22H20V18H22V16M10.44 15C10.19 15 10 14.81 9.95 14.56L9.57 11.56C9.57 11.54 9.57 11.5 9.57 11.5C9.57 11.22 9.79 11 10.07 11H13.93C13.95 11 13.97 11 14 11C14.27 11.04 14.46 11.29 14.43 11.56L14.05 14.56C14 14.81 13.81 15 13.56 15H10.44M19 2L21.56 6.68C21.6 6.78 21.61 6.89 21.61 7C21.61 7.56 21.16 8 20.61 8H19V15H17V8H13V10H11V8H7V15H5V8H3.62C3.46 8 3.31 7.96 3.16 7.89C2.67 7.64 2.47 7.04 2.72 6.55L5 2H19Z" /></svg>',
+  },
+  {
+    key: 'WaterWellOutlineOutlined',
+    svg: '<svg id="mdi-water-well-outline" viewBox="0 0 24 24"><path d="M3.62 8H5V15H7V8H11V10H13V8H17V15H19V8H20.61C21.16 8 21.61 7.56 21.61 7C21.61 6.89 21.6 6.78 21.56 6.68L19 2H5L2.72 6.55C2.47 7.04 2.67 7.64 3.16 7.89C3.31 7.96 3.46 8 3.62 8M6.24 4H17.76L18.76 6H5.24L6.24 4M2 16V18H4V22H20V18H22V16H2M18 20H6V18H18V20M13.93 11C14.21 11 14.43 11.22 14.43 11.5C14.43 11.5 14.43 11.54 14.43 11.56L14.05 14.56C14 14.81 13.81 15 13.56 15H10.44C10.19 15 10 14.81 9.95 14.56L9.57 11.56C9.54 11.29 9.73 11.04 10 11C10.03 11 10.05 11 10.07 11H13.93Z" /></svg>',
+  },
+  {
+    key: 'WaterfallOutlined',
+    svg: '<svg id="mdi-waterfall" viewBox="0 0 24 24"><path d="M20 20C18.61 20 17.22 19.53 16 18.67C13.56 20.38 10.44 20.38 8 18.67C6.78 19.53 5.39 20 4 20H2V22H4C5.37 22 6.74 21.65 8 21C10.5 22.3 13.5 22.3 16 21C17.26 21.65 18.62 22 20 22H22V20M20 16C18.61 16 17.22 15.53 16 14.67C13.56 16.38 10.44 16.38 8 14.67C6.78 15.53 5.39 16 4 16H2V18H4C5.37 18 6.74 17.65 8 17C10.5 18.3 13.5 18.3 16 17C17.26 17.65 18.62 18 20 18H22V16M22 2H2V4H6V16H18V4H22M9 4H11V10H9M13 8H15V14H13Z" /></svg>',
+  },
+  {
+    key: 'WateringCanOutlined',
+    svg: '<svg id="mdi-watering-can" viewBox="0 0 24 24"><path d="M18.5 7.47C17.76 8.2 17.57 9.25 17.92 10.15L15 13.07V11C15 10.45 14.55 10 14 10H12.97C13 9.83 13 9.67 13 9.5C13 6.46 10.54 4 7.5 4S2 6.46 2 9.5C2 11.21 2.78 12.73 4 13.74V20C4 20.55 4.45 21 5 21H14C14.55 21 15 20.55 15 20V15.89L19.33 11.56C20.23 11.91 21.28 11.73 22 11L18.5 7.47M4.05 10C4.03 9.83 4 9.67 4 9.5C4 7.57 5.57 6 7.5 6S11 7.57 11 9.5C11 9.67 10.97 9.83 10.95 10H4.05Z" /></svg>',
+  },
+  {
+    key: 'WateringCanOutlineOutlined',
+    svg: '<svg id="mdi-watering-can-outline" viewBox="0 0 24 24"><path d="M18.5 7.47C17.76 8.2 17.57 9.25 17.92 10.15L15 13.07V11C15 10.45 14.55 10 14 10H12.97C13 9.83 13 9.67 13 9.5C13 6.46 10.54 4 7.5 4S2 6.46 2 9.5C2 11.21 2.78 12.73 4 13.74V20C4 20.55 4.45 21 5 21H14C14.55 21 15 20.55 15 20V15.89L19.33 11.56C20.23 11.91 21.28 11.73 22 11L18.5 7.47M4.05 10C4.03 9.83 4 9.67 4 9.5C4 7.57 5.57 6 7.5 6S11 7.57 11 9.5C11 9.67 10.97 9.83 10.95 10M13 19H6V12H13V19Z" /></svg>',
+  },
+  {
+    key: 'WaveOutlined',
+    svg: '<svg id="mdi-wave" viewBox="0 0 24 24"><path d="M20,12C18.61,12 17.22,11.53 16,10.67C13.56,12.38 10.44,12.38 8,10.67C6.78,11.53 5.39,12 4,12H2V14H4C5.37,14 6.74,13.65 8,13C10.5,14.3 13.5,14.3 16,13C17.26,13.65 18.62,14 20,14H22V12" /></svg>',
+  },
+  {
+    key: 'WavesOutlined',
+    svg: '<svg id="mdi-waves" viewBox="0 0 24 24"><path d="M20,12H22V14H20C18.62,14 17.26,13.65 16,13C13.5,14.3 10.5,14.3 8,13C6.74,13.65 5.37,14 4,14H2V12H4C5.39,12 6.78,11.53 8,10.67C10.44,12.38 13.56,12.38 16,10.67C17.22,11.53 18.61,12 20,12M20,6H22V8H20C18.62,8 17.26,7.65 16,7C13.5,8.3 10.5,8.3 8,7C6.74,7.65 5.37,8 4,8H2V6H4C5.39,6 6.78,5.53 8,4.67C10.44,6.38 13.56,6.38 16,4.67C17.22,5.53 18.61,6 20,6M20,18H22V20H20C18.62,20 17.26,19.65 16,19C13.5,20.3 10.5,20.3 8,19C6.74,19.65 5.37,20 4,20H2V18H4C5.39,18 6.78,17.53 8,16.67C10.44,18.38 13.56,18.38 16,16.67C17.22,17.53 18.61,18 20,18Z" /></svg>',
+  },
+  {
+    key: 'WeatherCloudyOutlined',
+    svg: '<svg id="mdi-weather-cloudy" viewBox="0 0 24 24"><path d="M6,19A5,5 0 0,1 1,14A5,5 0 0,1 6,9C7,6.65 9.3,5 12,5C15.43,5 18.24,7.66 18.5,11.03L19,11A4,4 0 0,1 23,15A4,4 0 0,1 19,19H6M19,13H17V12A5,5 0 0,0 12,7C9.5,7 7.45,8.82 7.06,11.19C6.73,11.07 6.37,11 6,11A3,3 0 0,0 3,14A3,3 0 0,0 6,17H19A2,2 0 0,0 21,15A2,2 0 0,0 19,13Z" /></svg>',
+  },
+  {
+    key: 'WeatherCloudyAlertOutlined',
+    svg: '<svg id="mdi-weather-cloudy-alert" viewBox="0 0 24 24"><path d="M6,19A5,5 0 0,1 1,14A5,5 0 0,1 6,9C7,6.65 9.3,5 12,5C15.43,5 18.24,7.66 18.5,11.03L19,11A4,4 0 0,1 23,15A4,4 0 0,1 19,19H6M19,13H17V12A5,5 0 0,0 12,7C9.5,7 7.45,8.82 7.06,11.19C6.73,11.07 6.37,11 6,11A3,3 0 0,0 3,14A3,3 0 0,0 6,17H19A2,2 0 0,0 21,15A2,2 0 0,0 19,13M13,12H11V8H13V12M13,16H11V14H13" /></svg>',
+  },
+  {
+    key: 'WeatherCloudyArrowRightOutlined',
+    svg: '<svg id="mdi-weather-cloudy-arrow-right" viewBox="0 0 24 24"><path d="M6,7L6.69,7.06C7.32,4.72 9.46,3 12,3A5.5,5.5 0 0,1 17.5,8.5L17.42,9.45C17.88,9.16 18.42,9 19,9A3,3 0 0,1 22,12A3,3 0 0,1 19,15H6A4,4 0 0,1 2,11A4,4 0 0,1 6,7M6,9A2,2 0 0,0 4,11A2,2 0 0,0 6,13H19A1,1 0 0,0 20,12A1,1 0 0,0 19,11H15.5V8.5A3.5,3.5 0 0,0 12,5A3.5,3.5 0 0,0 8.5,8.5V9H6M22,19L19,22V20H2V18H19V16L22,19" /></svg>',
+  },
+  {
+    key: 'WeatherFogOutlined',
+    svg: '<svg id="mdi-weather-fog" viewBox="0 0 24 24"><path d="M3,15H13A1,1 0 0,1 14,16A1,1 0 0,1 13,17H3A1,1 0 0,1 2,16A1,1 0 0,1 3,15M16,15H21A1,1 0 0,1 22,16A1,1 0 0,1 21,17H16A1,1 0 0,1 15,16A1,1 0 0,1 16,15M1,12A5,5 0 0,1 6,7C7,4.65 9.3,3 12,3C15.43,3 18.24,5.66 18.5,9.03L19,9C21.19,9 22.97,10.76 23,13H21A2,2 0 0,0 19,11H17V10A5,5 0 0,0 12,5C9.5,5 7.45,6.82 7.06,9.19C6.73,9.07 6.37,9 6,9A3,3 0 0,0 3,12C3,12.35 3.06,12.69 3.17,13H1.1L1,12M3,19H5A1,1 0 0,1 6,20A1,1 0 0,1 5,21H3A1,1 0 0,1 2,20A1,1 0 0,1 3,19M8,19H21A1,1 0 0,1 22,20A1,1 0 0,1 21,21H8A1,1 0 0,1 7,20A1,1 0 0,1 8,19Z" /></svg>',
+  },
+  {
+    key: 'WeatherHailOutlined',
+    svg: '<svg id="mdi-weather-hail" viewBox="0 0 24 24"><path d="M6,14A1,1 0 0,1 7,15A1,1 0 0,1 6,16A5,5 0 0,1 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12A4,4 0 0,1 19,16H18A1,1 0 0,1 17,15A1,1 0 0,1 18,14H19A2,2 0 0,0 21,12A2,2 0 0,0 19,10H17V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11A3,3 0 0,0 6,14M10,18A2,2 0 0,1 12,20A2,2 0 0,1 10,22A2,2 0 0,1 8,20A2,2 0 0,1 10,18M14.5,16A1.5,1.5 0 0,1 16,17.5A1.5,1.5 0 0,1 14.5,19A1.5,1.5 0 0,1 13,17.5A1.5,1.5 0 0,1 14.5,16M10.5,12A1.5,1.5 0 0,1 12,13.5A1.5,1.5 0 0,1 10.5,15A1.5,1.5 0 0,1 9,13.5A1.5,1.5 0 0,1 10.5,12Z" /></svg>',
+  },
+  {
+    key: 'WeatherHazyOutlined',
+    svg: '<svg id="mdi-weather-hazy" viewBox="0 0 24 24"><path d="M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64M14,15A1,1 0 0,0 13,14H3A1,1 0 0,0 2,15A1,1 0 0,0 3,16H13A1,1 0 0,0 14,15M22,15A1,1 0 0,0 21,14H17A1,1 0 0,0 16,15A1,1 0 0,0 17,16H21A1,1 0 0,0 22,15M10,19A1,1 0 0,0 11,20H20A1,1 0 0,0 21,19A1,1 0 0,0 20,18H11A1,1 0 0,0 10,19M3,19A1,1 0 0,0 4,20H7A1,1 0 0,0 8,19A1,1 0 0,0 7,18H4A1,1 0 0,0 3,19M12,9A3,3 0 0,1 15,12H17A5,5 0 0,0 12,7A5,5 0 0,0 7,12H9A3,3 0 0,1 12,9Z" /></svg>',
+  },
+  {
+    key: 'WeatherHurricaneOutlined',
+    svg: '<svg id="mdi-weather-hurricane" viewBox="0 0 24 24"><path d="M15,6.79C16.86,7.86 18,9.85 18,12C18,22 6,22 6,22C7.25,21.06 8.38,19.95 9.34,18.71C9.38,18.66 9.41,18.61 9.44,18.55C9.69,18.06 9.5,17.46 9,17.21C7.14,16.14 6,14.15 6,12C6,2 18,2 18,2C16.75,2.94 15.62,4.05 14.66,5.29C14.62,5.34 14.59,5.39 14.56,5.45C14.31,5.94 14.5,6.54 15,6.79M12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14Z" /></svg>',
+  },
+  {
+    key: 'WeatherLightningOutlined',
+    svg: '<svg id="mdi-weather-lightning" viewBox="0 0 24 24"><path d="M6,16A5,5 0 0,1 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12A4,4 0 0,1 19,16H18A1,1 0 0,1 17,15A1,1 0 0,1 18,14H19A2,2 0 0,0 21,12A2,2 0 0,0 19,10H17V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11A3,3 0 0,0 6,14H7A1,1 0 0,1 8,15A1,1 0 0,1 7,16H6M12,11H15L13,15H15L11.25,22L12,17H9.5L12,11Z" /></svg>',
+  },
+  {
+    key: 'WeatherLightningRainyOutlined',
+    svg: '<svg id="mdi-weather-lightning-rainy" viewBox="0 0 24 24"><path d="M4.5,13.59C5,13.87 5.14,14.5 4.87,14.96C4.59,15.44 4,15.6 3.5,15.33V15.33C2,14.47 1,12.85 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12A4,4 0 0,1 19,16A1,1 0 0,1 18,15A1,1 0 0,1 19,14A2,2 0 0,0 21,12A2,2 0 0,0 19,10H17V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11C3,12.11 3.6,13.08 4.5,13.6V13.59M9.5,11H12.5L10.5,15H12.5L8.75,22L9.5,17H7L9.5,11M17.5,18.67C17.5,19.96 16.5,21 15.25,21C14,21 13,19.96 13,18.67C13,17.12 15.25,14.5 15.25,14.5C15.25,14.5 17.5,17.12 17.5,18.67Z" /></svg>',
+  },
+  {
+    key: 'WeatherNightOutlined',
+    svg: '<svg id="mdi-weather-night" viewBox="0 0 24 24"><path d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /></svg>',
+  },
+  {
+    key: 'WeatherNightPartlyCloudyOutlined',
+    svg: '<svg id="mdi-weather-night-partly-cloudy" viewBox="0 0 24 24"><path d="M22,10.28C21.74,10.3 21.5,10.31 21.26,10.31C19.32,10.31 17.39,9.57 15.91,8.09C14.25,6.44 13.5,4.19 13.72,2C13.77,1.53 13.22,1 12.71,1C12.57,1 12.44,1.04 12.32,1.12C12,1.36 11.66,1.64 11.36,1.94C9.05,4.24 8.55,7.66 9.84,10.46C8.31,11.11 7.13,12.43 6.69,14.06L6,14A4,4 0 0,0 2,18A4,4 0 0,0 6,22H19A3,3 0 0,0 22,19A3,3 0 0,0 19,16C18.42,16 17.88,16.16 17.42,16.45L17.5,15.5C17.5,15.28 17.5,15.05 17.46,14.83C19.14,14.67 20.77,13.94 22.06,12.64C22.38,12.34 22.64,12 22.88,11.68C23.27,11.13 22.65,10.28 22.04,10.28M19,18A1,1 0 0,1 20,19A1,1 0 0,1 19,20H6A2,2 0 0,1 4,18A2,2 0 0,1 6,16H8.5V15.5C8.5,13.94 9.53,12.64 10.94,12.18C11.1,12.13 11.26,12.09 11.43,12.06C11.61,12.03 11.8,12 12,12C12.23,12 12.45,12.03 12.66,12.07C12.73,12.08 12.8,12.1 12.87,12.13C13,12.16 13.15,12.2 13.28,12.25C13.36,12.28 13.44,12.32 13.5,12.36C13.63,12.41 13.74,12.47 13.84,12.54C13.92,12.59 14,12.64 14.07,12.7C14.17,12.77 14.25,12.84 14.34,12.92C14.41,13 14.5,13.05 14.55,13.12C14.63,13.2 14.69,13.29 14.76,13.37C14.82,13.45 14.89,13.53 14.94,13.62C15,13.71 15.04,13.8 15.09,13.9C15.14,14 15.2,14.08 15.24,14.18C15.41,14.59 15.5,15.03 15.5,15.5V18M16.83,12.86C15.9,11.16 14.08,10 12,10H11.87C11.41,9.19 11.14,8.26 11.14,7.29C11.14,6.31 11.39,5.37 11.86,4.55C12.21,6.41 13.12,8.14 14.5,9.5C15.86,10.88 17.58,11.79 19.45,12.14C18.66,12.6 17.76,12.84 16.83,12.86Z" /></svg>',
+  },
+  {
+    key: 'WeatherPartlyCloudyOutlined',
+    svg: '<svg id="mdi-weather-partly-cloudy" viewBox="0 0 24 24"><path d="M12.74,5.47C15.1,6.5 16.35,9.03 15.92,11.46C17.19,12.56 18,14.19 18,16V16.17C18.31,16.06 18.65,16 19,16A3,3 0 0,1 22,19A3,3 0 0,1 19,22H6A4,4 0 0,1 2,18A4,4 0 0,1 6,14H6.27C5,12.45 4.6,10.24 5.5,8.26C6.72,5.5 9.97,4.24 12.74,5.47M11.93,7.3C10.16,6.5 8.09,7.31 7.31,9.07C6.85,10.09 6.93,11.22 7.41,12.13C8.5,10.83 10.16,10 12,10C12.7,10 13.38,10.12 14,10.34C13.94,9.06 13.18,7.86 11.93,7.3M13.55,3.64C13,3.4 12.45,3.23 11.88,3.12L14.37,1.82L15.27,4.71C14.76,4.29 14.19,3.93 13.55,3.64M6.09,4.44C5.6,4.79 5.17,5.19 4.8,5.63L4.91,2.82L7.87,3.5C7.25,3.71 6.65,4.03 6.09,4.44M18,9.71C17.91,9.12 17.78,8.55 17.59,8L19.97,9.5L17.92,11.73C18.03,11.08 18.05,10.4 18,9.71M3.04,11.3C3.11,11.9 3.24,12.47 3.43,13L1.06,11.5L3.1,9.28C3,9.93 2.97,10.61 3.04,11.3M19,18H16V16A4,4 0 0,0 12,12A4,4 0 0,0 8,16H6A2,2 0 0,0 4,18A2,2 0 0,0 6,20H19A1,1 0 0,0 20,19A1,1 0 0,0 19,18Z" /></svg>',
+  },
+  {
+    key: 'WeatherPartlyLightningOutlined',
+    svg: '<svg id="mdi-weather-partly-lightning" viewBox="0 0 24 24"><path d="M19,15C18.65,15 18.31,15.06 18,15.17V15C18,13.19 17.19,11.56 15.92,10.46C16.35,8.03 15.1,5.5 12.75,4.47C9.97,3.24 6.72,4.5 5.5,7.25C4.6,9.24 5,11.45 6.27,13H6A4,4 0 0,0 2,17A4,4 0 0,0 6,21H7C7,21 8,21 8,20C8,19 7,19 7,19H6A2,2 0 0,1 4,17A2,2 0 0,1 6,15H8A4,4 0 0,1 12,11A4,4 0 0,1 16,15V17H19A1,1 0 0,1 20,18A1,1 0 0,1 19,19H17C17,19 16,19 16,20C16,21 17,21 17,21H19A3,3 0 0,0 22,18A3,3 0 0,0 19,15M12,9C10.16,9 8.5,9.83 7.41,11.13C6.93,10.22 6.85,9.09 7.31,8.07C8.09,6.31 10.16,5.5 11.93,6.3C13.18,6.86 13.94,8.06 14,9.34C13.38,9.12 12.7,9 12,9M13.55,2.63C13,2.4 12.45,2.23 11.88,2.12L14.37,0.82L15.27,3.71C14.76,3.29 14.19,2.93 13.55,2.63M6.09,3.44C5.6,3.79 5.17,4.19 4.8,4.63L4.91,1.82L7.87,2.5C7.25,2.71 6.65,3.03 6.09,3.44M18,8.71C17.91,8.12 17.78,7.55 17.59,7L19.97,8.5L17.92,10.73C18.03,10.08 18.05,9.4 18,8.71M3.04,10.3C3.11,10.9 3.25,11.47 3.43,12L1.06,10.5L3.1,8.28C3,8.93 2.97,9.61 3.04,10.3M11.8,15H14.25L12.61,18.27H14.25L11.18,24L11.8,19.91H9.75" /></svg>',
+  },
+  {
+    key: 'WeatherPartlyRainyOutlined',
+    svg: '<svg id="mdi-weather-partly-rainy" viewBox="0 0 24 24"><path d="M12.75,4.47C15.1,5.5 16.35,8.03 15.92,10.46C17.19,11.56 18,13.19 18,15V15.17C18.31,15.06 18.65,15 19,15A3,3 0 0,1 22,18A3,3 0 0,1 19,21H17C17,21 16,21 16,20C16,19 17,19 17,19H19A1,1 0 0,0 20,18A1,1 0 0,0 19,17H16V15A4,4 0 0,0 12,11A4,4 0 0,0 8,15H6A2,2 0 0,0 4,17A2,2 0 0,0 6,19H7C7,19 8,19 8,20C8,21 7,21 7,21H6A4,4 0 0,1 2,17A4,4 0 0,1 6,13H6.27C5,11.45 4.6,9.24 5.5,7.25C6.72,4.5 9.97,3.24 12.75,4.47M11.93,6.3C10.16,5.5 8.09,6.31 7.31,8.07C6.85,9.09 6.93,10.22 7.41,11.13C8.5,9.83 10.16,9 12,9C12.7,9 13.38,9.12 14,9.34C13.94,8.06 13.18,6.86 11.93,6.3M13.55,2.63C13,2.4 12.45,2.23 11.88,2.12L14.37,0.82L15.27,3.71C14.76,3.29 14.19,2.93 13.55,2.63M6.09,3.44C5.6,3.79 5.17,4.19 4.8,4.63L4.91,1.82L7.87,2.5C7.25,2.71 6.65,3.03 6.09,3.44M18,8.71C17.91,8.12 17.78,7.55 17.59,7L19.97,8.5L17.92,10.73C18.03,10.08 18.05,9.4 18,8.71M3.04,10.3C3.11,10.9 3.25,11.47 3.43,12L1.06,10.5L3.1,8.28C3,8.93 2.97,9.61 3.04,10.3M12,18.91C12.59,19.82 13,20.63 13,21A1,1 0 0,1 12,22A1,1 0 0,1 11,21C11,20.63 11.41,19.82 12,18.91M12,15.62C12,15.62 9,19 9,21A3,3 0 0,0 12,24A3,3 0 0,0 15,21C15,19 12,15.62 12,15.62Z" /></svg>',
+  },
+  {
+    key: 'WeatherPartlySnowyOutlined',
+    svg: '<svg id="mdi-weather-partly-snowy" viewBox="0 0 24 24"><path d="M6,19.03A2,2 0 0,1 4,17.03C4,15.92 4.9,15.03 6,15.03H8C8,12.81 9.79,11.03 12,11.03A4,4 0 0,1 16,15.03V17.03H19A1,1 0 0,1 20,18.03C20,18.57 19.55,19.03 19,19.03H17C17,19.03 16,19.03 16,20.03C16,21.03 17,21.03 17,21.03H19A3,3 0 0,0 22,18.03C22,16.37 20.66,15.03 19,15.03C18.65,15.03 18.31,15.08 18,15.19V15.03C18,13.21 17.19,11.58 15.92,10.5C16.35,8.05 15.1,5.53 12.75,4.5C9.97,3.27 6.72,4.53 5.5,7.28C4.6,9.27 5,11.47 6.27,13.03H6C3.79,13.03 2,14.81 2,17.03A4,4 0 0,0 6,21.03C6,21.03 7,21.03 7,20.03C7,19.03 6,19.03 6,19.03M12,9.03C10.16,9.03 8.5,9.85 7.41,11.16C6.93,10.25 6.85,9.11 7.31,8.09C8.09,6.33 10.16,5.53 11.93,6.32C13.18,6.89 13.94,8.08 14,9.37C13.38,9.15 12.7,9.03 12,9.03M13.55,2.66C13,2.42 12.45,2.26 11.88,2.15L14.37,0.84L15.27,3.73C14.76,3.31 14.19,2.95 13.55,2.66M6.09,3.46C5.6,3.81 5.17,4.21 4.8,4.66L4.91,1.84L7.87,2.53C7.25,2.73 6.65,3.05 6.09,3.46M18,8.73C17.91,8.15 17.78,7.57 17.59,7.03L19.97,8.53L17.92,10.76C18.03,10.1 18.05,9.42 18,8.73M3.04,10.32C3.11,10.92 3.25,11.5 3.43,12.03L1.06,10.53L3.1,8.3C3,8.95 2.97,9.64 3.04,10.32M8.03,21.45C8.13,21.84 8.53,22.06 8.91,21.96L10.5,21.54L10.06,23.11C9.96,23.5 10.19,23.9 10.57,24C10.95,24.1 11.35,23.87 11.45,23.5L11.87,21.91L13.03,23.07C13.3,23.35 13.77,23.35 14.05,23.07C14.33,22.79 14.33,22.32 14.05,22.05L12.89,20.88L14.47,20.47C14.85,20.37 15.08,19.97 15,19.59C14.88,19.21 14.5,19 14.09,19.08L12.5,19.5L12.94,17.93C13.04,17.54 12.82,17.15 12.43,17.05C12.05,16.95 11.66,17.17 11.55,17.56L11.14,19.14L10,17.97C9.7,17.69 9.23,17.69 8.95,17.97C8.68,18.27 8.68,18.72 8.95,19L10.11,20.16L8.54,20.57C8.15,20.68 7.93,21.07 8.03,21.45Z" /></svg>',
+  },
+  {
+    key: 'WeatherPartlySnowyRainyOutlined',
+    svg: '<svg id="mdi-weather-partly-snowy-rainy" viewBox="0 0 24 24"><path d="M13.55,2.66C13,2.42 12.45,2.26 11.88,2.15L14.37,0.84L15.27,3.73C14.76,3.31 14.19,2.95 13.55,2.66M6.09,3.46C5.6,3.81 5.17,4.21 4.8,4.66L4.91,1.84L7.87,2.53C7.25,2.73 6.65,3.05 6.09,3.46M18,8.73C17.91,8.15 17.78,7.57 17.59,7.03L19.97,8.53L17.92,10.76C18.03,10.1 18.05,9.42 18,8.73M3.04,10.32C3.11,10.92 3.25,11.5 3.43,12.03L1.06,10.53L3.1,8.3C3,8.95 2.97,9.64 3.04,10.32M16.68,22.21C16.68,23.2 15.91,24 14.95,24C14,24 13.23,23.2 13.23,22.21C13.23,21.03 14.95,19.03 14.95,19.03C14.95,19.03 16.68,21.03 16.68,22.21M6.03,21.45C5.93,21.07 6.15,20.68 6.54,20.58L8.13,20.15L6.96,19C6.68,18.72 6.68,18.27 6.96,18C7.23,17.7 7.7,17.7 8,18L9.14,19.14L9.55,17.56C9.65,17.17 10.05,16.94 10.43,17.05C10.82,17.15 11.05,17.55 10.93,17.93L10.5,19.5L12.1,19.1C12.5,19 12.88,19.21 13,19.6C13.08,19.97 12.86,20.37 12.47,20.47L10.89,20.89L12.05,22.05C12.33,22.32 12.33,22.79 12.05,23.07C11.77,23.35 11.31,23.35 11.03,23.07L9.87,21.9L9.45,23.5C9.35,23.88 8.95,24.1 8.57,24C8.18,23.9 7.97,23.5 8.06,23.12L8.5,21.55L6.91,21.96C6.5,22.06 6.13,21.84 6.03,21.45M19,15.03C18.65,15.03 18.31,15.08 18,15.19V15.03C18,13.21 17.19,11.58 15.92,10.5C16.35,8.05 15.1,5.53 12.75,4.5C9.97,3.27 6.72,4.53 5.5,7.28C4.6,9.27 5,11.47 6.27,13.03H6C3.79,13.03 2,14.81 2,17.03C2,18.17 2.5,19.2 3.27,19.93V19.93C3.27,19.93 3.97,20.64 4.68,19.93C5.39,19.22 4.68,18.5 4.68,18.5C4.27,18.15 4,17.62 4,17.03C4,15.92 4.9,15.03 6,15.03H8C8,12.81 9.79,11.03 12,11.03A4,4 0 0,1 16,15.03V17.03H19A1,1 0 0,1 20,18.03C20,18.57 19.55,19.03 19,19.03H18C18,19.03 17,19.03 17,20.03C17,21.03 18,21.03 18,21.03H19A3,3 0 0,0 22,18.03C22,16.37 20.66,15.03 19,15.03M12,9.03C10.16,9.03 8.5,9.85 7.41,11.16C6.93,10.25 6.85,9.11 7.31,8.09C8.09,6.33 10.16,5.53 11.93,6.32C13.18,6.89 13.94,8.08 14,9.37C13.38,9.15 12.7,9.03 12,9.03Z" /></svg>',
+  },
+  {
+    key: 'WeatherPouringOutlined',
+    svg: '<svg id="mdi-weather-pouring" viewBox="0 0 24 24"><path d="M9,12C9.53,12.14 9.85,12.69 9.71,13.22L8.41,18.05C8.27,18.59 7.72,18.9 7.19,18.76C6.65,18.62 6.34,18.07 6.5,17.54L7.78,12.71C7.92,12.17 8.47,11.86 9,12M13,12C13.53,12.14 13.85,12.69 13.71,13.22L11.64,20.95C11.5,21.5 10.95,21.8 10.41,21.66C9.88,21.5 9.56,20.97 9.7,20.43L11.78,12.71C11.92,12.17 12.47,11.86 13,12M17,12C17.53,12.14 17.85,12.69 17.71,13.22L16.41,18.05C16.27,18.59 15.72,18.9 15.19,18.76C14.65,18.62 14.34,18.07 14.5,17.54L15.78,12.71C15.92,12.17 16.47,11.86 17,12M17,10V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11C3,12.11 3.6,13.08 4.5,13.6V13.59C5,13.87 5.14,14.5 4.87,14.96C4.59,15.43 4,15.6 3.5,15.32V15.33C2,14.47 1,12.85 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12C23,13.5 22.2,14.77 21,15.46V15.46C20.5,15.73 19.91,15.57 19.63,15.09C19.36,14.61 19.5,14 20,13.72V13.73C20.6,13.39 21,12.74 21,12A2,2 0 0,0 19,10H17Z" /></svg>',
+  },
+  {
+    key: 'WeatherRainyOutlined',
+    svg: '<svg id="mdi-weather-rainy" viewBox="0 0 24 24"><path d="M6,14.03A1,1 0 0,1 7,15.03C7,15.58 6.55,16.03 6,16.03C3.24,16.03 1,13.79 1,11.03C1,8.27 3.24,6.03 6,6.03C7,3.68 9.3,2.03 12,2.03C15.43,2.03 18.24,4.69 18.5,8.06L19,8.03A4,4 0 0,1 23,12.03C23,14.23 21.21,16.03 19,16.03H18C17.45,16.03 17,15.58 17,15.03C17,14.47 17.45,14.03 18,14.03H19A2,2 0 0,0 21,12.03A2,2 0 0,0 19,10.03H17V9.03C17,6.27 14.76,4.03 12,4.03C9.5,4.03 7.45,5.84 7.06,8.21C6.73,8.09 6.37,8.03 6,8.03A3,3 0 0,0 3,11.03A3,3 0 0,0 6,14.03M12,14.15C12.18,14.39 12.37,14.66 12.56,14.94C13,15.56 14,17.03 14,18C14,19.11 13.1,20 12,20A2,2 0 0,1 10,18C10,17.03 11,15.56 11.44,14.94C11.63,14.66 11.82,14.4 12,14.15M12,11.03L11.5,11.59C11.5,11.59 10.65,12.55 9.79,13.81C8.93,15.06 8,16.56 8,18A4,4 0 0,0 12,22A4,4 0 0,0 16,18C16,16.56 15.07,15.06 14.21,13.81C13.35,12.55 12.5,11.59 12.5,11.59" /></svg>',
+  },
+  {
+    key: 'WeatherSnowyOutlined',
+    svg: '<svg id="mdi-weather-snowy" viewBox="0 0 24 24"><path d="M6,14A1,1 0 0,1 7,15A1,1 0 0,1 6,16A5,5 0 0,1 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12A4,4 0 0,1 19,16H18A1,1 0 0,1 17,15A1,1 0 0,1 18,14H19A2,2 0 0,0 21,12A2,2 0 0,0 19,10H17V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11A3,3 0 0,0 6,14M7.88,18.07L10.07,17.5L8.46,15.88C8.07,15.5 8.07,14.86 8.46,14.46C8.85,14.07 9.5,14.07 9.88,14.46L11.5,16.07L12.07,13.88C12.21,13.34 12.76,13.03 13.29,13.17C13.83,13.31 14.14,13.86 14,14.4L13.41,16.59L15.6,16C16.14,15.86 16.69,16.17 16.83,16.71C16.97,17.24 16.66,17.79 16.12,17.93L13.93,18.5L15.54,20.12C15.93,20.5 15.93,21.15 15.54,21.54C15.15,21.93 14.5,21.93 14.12,21.54L12.5,19.93L11.93,22.12C11.79,22.66 11.24,22.97 10.71,22.83C10.17,22.69 9.86,22.14 10,21.6L10.59,19.41L8.4,20C7.86,20.14 7.31,19.83 7.17,19.29C7.03,18.76 7.34,18.21 7.88,18.07Z" /></svg>',
+  },
+  {
+    key: 'WeatherSnowyHeavyOutlined',
+    svg: '<svg id="mdi-weather-snowy-heavy" viewBox="0 0 24 24"><path d="M4,16.36C3.86,15.82 4.18,15.25 4.73,15.11L7,14.5L5.33,12.86C4.93,12.46 4.93,11.81 5.33,11.4C5.73,11 6.4,11 6.79,11.4L8.45,13.05L9.04,10.8C9.18,10.24 9.75,9.92 10.29,10.07C10.85,10.21 11.17,10.78 11,11.33L10.42,13.58L12.67,13C13.22,12.83 13.79,13.15 13.93,13.71C14.08,14.25 13.76,14.82 13.2,14.96L10.95,15.55L12.6,17.21C13,17.6 13,18.27 12.6,18.67C12.2,19.07 11.54,19.07 11.15,18.67L9.5,17L8.89,19.27C8.75,19.83 8.18,20.14 7.64,20C7.08,19.86 6.77,19.29 6.91,18.74L7.5,16.5L5.26,17.09C4.71,17.23 4.14,16.92 4,16.36M1,10A5,5 0 0,1 6,5C7,2.65 9.3,1 12,1C15.43,1 18.24,3.66 18.5,7.03L19,7A4,4 0 0,1 23,11A4,4 0 0,1 19,15A1,1 0 0,1 18,14A1,1 0 0,1 19,13A2,2 0 0,0 21,11A2,2 0 0,0 19,9H17V8A5,5 0 0,0 12,3C9.5,3 7.45,4.82 7.06,7.19C6.73,7.07 6.37,7 6,7A3,3 0 0,0 3,10C3,10.85 3.35,11.61 3.91,12.16C4.27,12.55 4.26,13.16 3.88,13.54C3.5,13.93 2.85,13.93 2.47,13.54C1.56,12.63 1,11.38 1,10M14.03,20.43C14.13,20.82 14.5,21.04 14.91,20.94L16.5,20.5L16.06,22.09C15.96,22.5 16.18,22.87 16.57,22.97C16.95,23.08 17.35,22.85 17.45,22.46L17.86,20.89L19.03,22.05C19.3,22.33 19.77,22.33 20.05,22.05C20.33,21.77 20.33,21.3 20.05,21.03L18.89,19.86L20.46,19.45C20.85,19.35 21.08,18.95 20.97,18.57C20.87,18.18 20.5,17.96 20.09,18.06L18.5,18.5L18.94,16.91C19.04,16.5 18.82,16.13 18.43,16.03C18.05,15.92 17.65,16.15 17.55,16.54L17.14,18.11L15.97,16.95C15.7,16.67 15.23,16.67 14.95,16.95C14.67,17.24 14.67,17.7 14.95,17.97L16.11,19.14L14.54,19.55C14.15,19.65 13.92,20.05 14.03,20.43Z" /></svg>',
+  },
+  {
+    key: 'WeatherSnowyRainyOutlined',
+    svg: '<svg id="mdi-weather-snowy-rainy" viewBox="0 0 24 24"><path d="M18.5,18.67C18.5,19.96 17.5,21 16.25,21C15,21 14,19.96 14,18.67C14,17.12 16.25,14.5 16.25,14.5C16.25,14.5 18.5,17.12 18.5,18.67M4,17.36C3.86,16.82 4.18,16.25 4.73,16.11L7,15.5L5.33,13.86C4.93,13.46 4.93,12.81 5.33,12.4C5.73,12 6.4,12 6.79,12.4L8.45,14.05L9.04,11.8C9.18,11.24 9.75,10.92 10.29,11.07C10.85,11.21 11.17,11.78 11,12.33L10.42,14.58L12.67,14C13.22,13.83 13.79,14.15 13.93,14.71C14.08,15.25 13.76,15.82 13.2,15.96L10.95,16.55L12.6,18.21C13,18.6 13,19.27 12.6,19.67C12.2,20.07 11.54,20.07 11.15,19.67L9.5,18L8.89,20.27C8.75,20.83 8.18,21.14 7.64,21C7.08,20.86 6.77,20.29 6.91,19.74L7.5,17.5L5.26,18.09C4.71,18.23 4.14,17.92 4,17.36M1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12A4,4 0 0,1 19,16A1,1 0 0,1 18,15A1,1 0 0,1 19,14A2,2 0 0,0 21,12A2,2 0 0,0 19,10H17V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11C3,11.85 3.35,12.61 3.91,13.16C4.27,13.55 4.26,14.16 3.88,14.54C3.5,14.93 2.85,14.93 2.47,14.54C1.56,13.63 1,12.38 1,11Z" /></svg>',
+  },
+  {
+    key: 'WeatherSunnyOutlined',
+    svg: '<svg id="mdi-weather-sunny" viewBox="0 0 24 24"><path d="M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.24 6.91,16.86 7.5,17.37L3.36,17M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7M20.64,17L16.5,17.36C17.09,16.85 17.62,16.22 18.04,15.5C18.46,14.77 18.73,14 18.87,13.21L20.64,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.82,19 13.63,18.83 14.37,18.56L12,22Z" /></svg>',
+  },
+  {
+    key: 'WeatherSunnyAlertOutlined',
+    svg: '<svg id="mdi-weather-sunny-alert" viewBox="0 0 24 24"><path d="M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.24 6.91,16.86 7.5,17.37L3.36,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.82,19 13.63,18.83 14.37,18.56M19,13V7H21V13H19M19,17V15H21V17" /></svg>',
+  },
+  {
+    key: 'WeatherSunnyOffOutlined',
+    svg: '<svg id="mdi-weather-sunny-off" viewBox="0 0 24 24"><path d="M22.11 21.46L2.39 1.73L1.11 3L4.97 6.86L3.34 7L5.11 10.79C5.25 10 5.5 9.24 5.94 8.5C6 8.36 6.13 8.24 6.22 8.11L7.66 9.55C7.25 10.27 7 11.11 7 12C7 14.76 9.24 17 12 17C12.9 17 13.73 16.75 14.45 16.34L20.84 22.73L22.11 21.46M12 15C10.34 15 9 13.66 9 12C9 11.67 9.07 11.36 9.17 11.06L12.94 14.83C12.64 14.93 12.33 15 12 15M18.05 8.5C17.63 7.78 17.1 7.15 16.5 6.64L20.65 7L18.88 10.79C18.74 10 18.47 9.23 18.05 8.5M12 7C14.76 7 17 9.24 17 12C17 12.54 16.89 13.05 16.74 13.54L15 11.78C14.87 10.3 13.7 9.13 12.22 9L10.47 7.27C10.95 7.11 11.46 7 12 7M12 5C11.16 5 10.35 5.15 9.61 5.42L12 2L14.39 5.42C13.65 5.15 12.84 5 12 5M18.87 13.21L20.64 17L20.24 17.04L18.25 15.05C18.54 14.45 18.76 13.84 18.87 13.21M12 19C12.82 19 13.63 18.83 14.37 18.56L12 22L9.59 18.56C10.33 18.83 11.14 19 12 19M5.95 15.5C6.37 16.24 6.91 16.86 7.5 17.37L3.36 17L5.12 13.23C5.26 14 5.53 14.78 5.95 15.5Z" /></svg>',
+  },
+  {
+    key: 'WeatherSunsetOutlined',
+    svg: '<svg id="mdi-weather-sunset" viewBox="0 0 24 24"><path d="M3,12H7A5,5 0 0,1 12,7A5,5 0 0,1 17,12H21A1,1 0 0,1 22,13A1,1 0 0,1 21,14H3A1,1 0 0,1 2,13A1,1 0 0,1 3,12M5,16H19A1,1 0 0,1 20,17A1,1 0 0,1 19,18H5A1,1 0 0,1 4,17A1,1 0 0,1 5,16M17,20A1,1 0 0,1 18,21A1,1 0 0,1 17,22H7A1,1 0 0,1 6,21A1,1 0 0,1 7,20H17M15,12A3,3 0 0,0 12,9A3,3 0 0,0 9,12H15M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7Z" /></svg>',
+  },
+  {
+    key: 'WeatherSunsetDownOutlined',
+    svg: '<svg id="mdi-weather-sunset-down" viewBox="0 0 24 24"><path d="M3,12H7A5,5 0 0,1 12,7A5,5 0 0,1 17,12H21A1,1 0 0,1 22,13A1,1 0 0,1 21,14H3A1,1 0 0,1 2,13A1,1 0 0,1 3,12M15,12A3,3 0 0,0 12,9A3,3 0 0,0 9,12H15M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.5,9.24 5.25,10 5.11,10.79L3.34,7M20.65,7L18.88,10.79C18.74,10 18.47,9.23 18.05,8.5C17.63,7.78 17.1,7.15 16.5,6.64L20.65,7M12.71,20.71L15.82,17.6C16.21,17.21 16.21,16.57 15.82,16.18C15.43,15.79 14.8,15.79 14.41,16.18L12,18.59L9.59,16.18C9.2,15.79 8.57,15.79 8.18,16.18C7.79,16.57 7.79,17.21 8.18,17.6L11.29,20.71C11.5,20.9 11.74,21 12,21C12.26,21 12.5,20.9 12.71,20.71Z" /></svg>',
+  },
+  {
+    key: 'WeatherTornadoOutlined',
+    svg: '<svg id="mdi-weather-tornado" viewBox="0 0 24 24"><path d="M21,5H3A1,1 0 0,1 2,4A1,1 0 0,1 3,3H21A1,1 0 0,1 22,4A1,1 0 0,1 21,5M20,8A1,1 0 0,0 19,7H5A1,1 0 0,0 4,8A1,1 0 0,0 5,9H19A1,1 0 0,0 20,8M21,12A1,1 0 0,0 20,11H10A1,1 0 0,0 9,12A1,1 0 0,0 10,13H20A1,1 0 0,0 21,12M16,16A1,1 0 0,0 15,15H9A1,1 0 0,0 8,16A1,1 0 0,0 9,17H15A1,1 0 0,0 16,16M13,20A1,1 0 0,0 12,19H10A1,1 0 0,0 9,20A1,1 0 0,0 10,21H12A1,1 0 0,0 13,20Z" /></svg>',
+  },
+  {
+    key: 'WeatherWindyOutlined',
+    svg: '<svg id="mdi-weather-windy" viewBox="0 0 24 24"><path d="M4,10A1,1 0 0,1 3,9A1,1 0 0,1 4,8H12A2,2 0 0,0 14,6A2,2 0 0,0 12,4C11.45,4 10.95,4.22 10.59,4.59C10.2,5 9.56,5 9.17,4.59C8.78,4.2 8.78,3.56 9.17,3.17C9.9,2.45 10.9,2 12,2A4,4 0 0,1 16,6A4,4 0 0,1 12,10H4M19,12A1,1 0 0,0 20,11A1,1 0 0,0 19,10C18.72,10 18.47,10.11 18.29,10.29C17.9,10.68 17.27,10.68 16.88,10.29C16.5,9.9 16.5,9.27 16.88,8.88C17.42,8.34 18.17,8 19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14H5A1,1 0 0,1 4,13A1,1 0 0,1 5,12H19M18,18H4A1,1 0 0,1 3,17A1,1 0 0,1 4,16H18A3,3 0 0,1 21,19A3,3 0 0,1 18,22C17.17,22 16.42,21.66 15.88,21.12C15.5,20.73 15.5,20.1 15.88,19.71C16.27,19.32 16.9,19.32 17.29,19.71C17.47,19.89 17.72,20 18,20A1,1 0 0,0 19,19A1,1 0 0,0 18,18Z" /></svg>',
+  },
+  {
+    key: 'WeatherWindyVariantOutlined',
+    svg: '<svg id="mdi-weather-windy-variant" viewBox="0 0 24 24"><path d="M6,6L6.69,6.06C7.32,3.72 9.46,2 12,2A5.5,5.5 0 0,1 17.5,7.5L17.42,8.45C17.88,8.16 18.42,8 19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14H6A4,4 0 0,1 2,10A4,4 0 0,1 6,6M6,8A2,2 0 0,0 4,10A2,2 0 0,0 6,12H19A1,1 0 0,0 20,11A1,1 0 0,0 19,10H15.5V7.5A3.5,3.5 0 0,0 12,4A3.5,3.5 0 0,0 8.5,7.5V8H6M18,18H4A1,1 0 0,1 3,17A1,1 0 0,1 4,16H18A3,3 0 0,1 21,19A3,3 0 0,1 18,22C17.17,22 16.42,21.66 15.88,21.12C15.5,20.73 15.5,20.1 15.88,19.71C16.27,19.32 16.9,19.32 17.29,19.71C17.47,19.89 17.72,20 18,20A1,1 0 0,0 19,19A1,1 0 0,0 18,18Z" /></svg>',
+  },
+  {
+    key: 'WebcamOutlined',
+    svg: '<svg id="mdi-webcam" viewBox="0 0 24 24"><path d="M12,2A7,7 0 0,1 19,9A7,7 0 0,1 12,16A7,7 0 0,1 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9A5,5 0 0,0 12,14A5,5 0 0,0 17,9A5,5 0 0,0 12,4M12,6A3,3 0 0,1 15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6M6,22A2,2 0 0,1 4,20C4,19.62 4.1,19.27 4.29,18.97L6.11,15.81C7.69,17.17 9.75,18 12,18C14.25,18 16.31,17.17 17.89,15.81L19.71,18.97C19.9,19.27 20,19.62 20,20A2,2 0 0,1 18,22H6Z" /></svg>',
+  },
+  {
+    key: 'WebcamOffOutlined',
+    svg: '<svg id="mdi-webcam-off" viewBox="0 0 24 24"><path d="M12 6C13.66 6 15 7.34 15 9C15 9.78 14.7 10.5 14.21 11L10 6.79C10.5 6.3 11.22 6 12 6M12 4C14.76 4 17 6.24 17 9C17 10.33 16.47 11.53 15.62 12.42L17.04 13.84C18.25 12.59 19 10.88 19 9C19 5.13 15.87 2 12 2C10.12 2 8.41 2.75 7.16 3.96L8.58 5.38C9.47 4.53 10.67 4 12 4M22.11 21.46L20.84 22.73L19.46 21.35C19.1 21.75 18.58 22 18 22H6C4.89 22 4 21.11 4 20C4 19.62 4.1 19.27 4.29 18.97L6.11 15.81C7.69 17.17 9.75 18 12 18C13.21 18 14.37 17.75 15.43 17.32L13.85 15.74C13.26 15.91 12.64 16 12 16C8.13 16 5 12.87 5 9C5 8.36 5.09 7.74 5.26 7.15L1.11 3L2.39 1.73L22.11 21.46M12.1 14L7 8.9C7 8.93 7 8.97 7 9C7 11.76 9.24 14 12 14C12.03 14 12.07 14 12.1 14Z" /></svg>',
+  },
+  {
+    key: 'WifiOutlined',
+    svg: '<svg id="mdi-wifi" viewBox="0 0 24 24"><path d="M12,21L15.6,16.2C14.6,15.45 13.35,15 12,15C10.65,15 9.4,15.45 8.4,16.2L12,21M12,3C7.95,3 4.21,4.34 1.2,6.6L3,9C5.5,7.12 8.62,6 12,6C15.38,6 18.5,7.12 21,9L22.8,6.6C19.79,4.34 16.05,3 12,3M12,9C9.3,9 6.81,9.89 4.8,11.4L6.6,13.8C8.1,12.67 9.97,12 12,12C14.03,12 15.9,12.67 17.4,13.8L19.2,11.4C17.19,9.89 14.7,9 12,9Z" /></svg>',
+  },
+  {
+    key: 'WifiOffOutlined',
+    svg: '<svg id="mdi-wifi-off" viewBox="0 0 24 24"><path d="M2.28,3L1,4.27L2.47,5.74C2.04,6 1.61,6.29 1.2,6.6L3,9C3.53,8.6 4.08,8.25 4.66,7.93L6.89,10.16C6.15,10.5 5.44,10.91 4.8,11.4L6.6,13.8C7.38,13.22 8.26,12.77 9.2,12.47L11.75,15C10.5,15.07 9.34,15.5 8.4,16.2L12,21L14.46,17.73L17.74,21L19,19.72M12,3C9.85,3 7.8,3.38 5.9,4.07L8.29,6.47C9.5,6.16 10.72,6 12,6C15.38,6 18.5,7.11 21,9L22.8,6.6C19.79,4.34 16.06,3 12,3M12,9C11.62,9 11.25,9 10.88,9.05L14.07,12.25C15.29,12.53 16.43,13.07 17.4,13.8L19.2,11.4C17.2,9.89 14.7,9 12,9Z" /></svg>',
+  },
+  {
+    key: 'WifiStrengthOffOutlined',
+    svg: '<svg id="mdi-wifi-strength-off" viewBox="0 0 24 24"><path d="M3.27,1.44L2,2.72L4.05,4.77C2.75,5.37 1.5,6.11 0.38,7C4.41,12.06 12,21.5 12,21.5L15.91,16.63L19.23,19.95L20.5,18.68M12,3C10.6,3 9.21,3.17 7.86,3.5L18.18,13.81C20,11.5 22.05,9 23.65,7C20.32,4.41 16.22,3 12,3Z" /></svg>',
+  },
+  {
+    key: 'WifiStrengthOffOutlineOutlined',
+    svg: '<svg id="mdi-wifi-strength-off-outline" viewBox="0 0 24 24"><path d="M3.27,1.44L2,2.72L4.05,4.77C2.75,5.37 1.5,6.11 0.38,7C4.2,11.8 8.14,16.67 12,21.5L15.91,16.63L19.23,19.95L20.5,18.68C14.87,13.04 3.27,1.44 3.27,1.44M12,3C10.6,3 9.21,3.17 7.86,3.5L9.56,5.19C10.37,5.07 11.18,5 12,5C15.07,5 18.09,5.86 20.71,7.45L16.76,12.38L18.18,13.8C20.08,11.43 22,9 23.65,7C20.32,4.41 16.22,3 12,3M5.57,6.29L14.5,15.21L12,18.3L3.27,7.44C4,7 4.78,6.61 5.57,6.29Z" /></svg>',
+  },
+  {
+    key: 'WindowCloseOutlined',
+    svg: '<svg id="mdi-window-close" viewBox="0 0 24 24"><path d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z" /></svg>',
+  },
+  {
+    key: 'WindowClosedOutlined',
+    svg: '<svg id="mdi-window-closed" viewBox="0 0 24 24"><path d="M6,11H10V9H14V11H18V4H6V11M18,13H6V20H18V13M6,2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2Z" /></svg>',
+  },
+  {
+    key: 'WindowClosedVariantOutlined',
+    svg: '<svg id="mdi-window-closed-variant" viewBox="0 0 24 24"><path d="M21 20V2H3V20H1V23H23V20M19 4V11H13V4M5 4H11V11H5M5 20V13H11V20M13 20V13H19V20Z" /></svg>',
+  },
+  {
+    key: 'WindowMaximizeOutlined',
+    svg: '<svg id="mdi-window-maximize" viewBox="0 0 24 24"><path d="M4,4H20V20H4V4M6,8V18H18V8H6Z" /></svg>',
+  },
+  {
+    key: 'WindowMinimizeOutlined',
+    svg: '<svg id="mdi-window-minimize" viewBox="0 0 24 24"><path d="M20,14H4V10H20" /></svg>',
+  },
+  {
+    key: 'WindowOpenOutlined',
+    svg: '<svg id="mdi-window-open" viewBox="0 0 24 24"><path d="M6,8H10V6H14V8H18V4H6V8M18,10H6V15H18V10M6,20H18V17H6V20M6,2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2Z" /></svg>',
+  },
+  {
+    key: 'WindowOpenVariantOutlined',
+    svg: '<svg id="mdi-window-open-variant" viewBox="0 0 24 24"><path d="M21 20V2H3V20H1V23H23V20M19 4V11H17V4M5 4H7V11H5M5 20V13H7V20M9 20V4H15V20M17 20V13H19V20Z" /></svg>',
+  },
+  {
+    key: 'WindowShutterOutlined',
+    svg: '<svg id="mdi-window-shutter" viewBox="0 0 24 24"><path d="M3 4H21V8H19V20H17V8H7V20H5V8H3V4M8 9H16V11H8V9M8 12H16V14H8V12M8 15H16V17H8V15M8 18H16V20H8V18Z" /></svg>',
+  },
+  {
+    key: 'WindowShutterAlertOutlined',
+    svg: '<svg id="mdi-window-shutter-alert" viewBox="0 0 24 24"><path d="M2 4H20V8H18V20H16V8H6V20H4V8H2V4M7 9H15V11H7V9M7 12H15V14H7V12M20 19V17H22V19H20M20 15V10H22V15H20Z" /></svg>',
+  },
+  {
+    key: 'WindowShutterOpenOutlined',
+    svg: '<svg id="mdi-window-shutter-open" viewBox="0 0 24 24"><path d="M3 4H21V8H19V20H17V8H7V20H5V8H3V4M8 9H16V11H8V9Z" /></svg>',
+  },
+]
diff --git a/admin-ui/vue/apps/web-antd/src/bootstrap.ts b/admin-ui/vue/apps/web-antd/src/bootstrap.ts
new file mode 100644
index 0000000..ec72112
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/bootstrap.ts
@@ -0,0 +1,76 @@
+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';
+import '@vben/styles/antd';
+
+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';
+
+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);
+
+  // 配置 pinia-tore
+  await initStores(app, { namespace });
+
+  // 安装权限指令
+  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) {
+      const routeTitle = router.currentRoute.value.meta?.title;
+      const pageTitle =
+        (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
+      useTitle(pageTitle);
+    }
+  });
+
+  app.mount('#app');
+}
+
+export { bootstrap };
diff --git a/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/RegionSelect/index.vue b/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/RegionSelect/index.vue
new file mode 100644
index 0000000..82ddf97
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/RegionSelect/index.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts" name="">
+import type { CascaderProps } from 'ant-design-vue';
+
+import { onBeforeMount, ref, watch } from 'vue';
+
+import { Cascader } from 'ant-design-vue';
+
+import { List } from '#/api/iotlcm/zAnother/tDivisionCode';
+
+/** ====================  常量  ==================== */
+const props = withDefaults(
+  defineProps<{
+    /** 标签显示范围 */
+    labelShowRange?: 'all' | 'last';
+    /** 最大选择层级 1省 2市 3区 4街道 5社区 */
+    maxLevel?: number;
+    /** 提示文本 */
+    placeholder?: string;
+    /** 起始值 */
+    startRegionCode?: string;
+  }>(),
+  {
+    labelShowRange: 'all',
+    maxLevel: 5,
+    placeholder: '请选择所属区域',
+    startRegionCode: '',
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'change', value: string): void;
+}>();
+
+/** 自定义显示渲染 */
+const displayRender: CascaderProps['displayRender'] = ({ labels }) => {
+  return props.labelShowRange === 'last' && labels.length > 0
+    ? labels[labels.length - 1]
+    : labels.join(' / ');
+};
+
+/** ====================  数据  ==================== */
+const modelValue = defineModel<any>();
+
+// 选中值
+const select = ref<string[]>([]);
+// 回显flag
+const reloadFlag = ref(true);
+// 使用选项
+const useOptions = ref<CascaderProps['options']>([]);
+
+/** ====================  方法  ==================== */
+/** 获取指定区域下的选项 */
+async function getOptions(data: any) {
+  if (data === '') {
+    data = '000000000000';
+  }
+  try {
+    const res = await List({ regionParent: data });
+    const list = res.items.map((item: any) => {
+      return {
+        label: item.regionName,
+        value: item.regionCode,
+        isLeaf: item.regionLevel >= props.maxLevel,
+      };
+    });
+    return list;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}
+
+/** 加载下一级数据 */
+async function loadData(data: any) {
+  const active = data[data.length - 1];
+  const res = await getOptions(active.value);
+  active.children = res;
+}
+
+/** 将区域代码拆分成层级路径 */
+function getRegionPath(regionCode: string): string[] {
+  if (!regionCode) return [];
+  const path: string[] = [];
+  const fullCode = regionCode.padEnd(12, '0');
+  path.push(fullCode.slice(0, 2).padEnd(12, '0'));
+  if (props.maxLevel >= 2 && fullCode.slice(2, 4) !== '00') {
+    path.push(fullCode.slice(0, 4).padEnd(12, '0'));
+    if (props.maxLevel >= 3 && fullCode.slice(4, 6) !== '00') {
+      path.push(fullCode.slice(0, 6).padEnd(12, '0'));
+      if (props.maxLevel >= 4 && fullCode.slice(6, 9) !== '000') {
+        path.push(fullCode.slice(0, 9).padEnd(12, '0'));
+        if (props.maxLevel >= 5 && fullCode.slice(9, 12) !== '000') {
+          path.push(fullCode.slice(0, 12).padEnd(12, '0'));
+        }
+      }
+    }
+  }
+  return path;
+}
+
+/** 回显数据 - 递归加载完整路径的选项 */
+async function preloadRegionPath(
+  path: string[],
+  nowIndex = 0,
+  activeList: any[] = [],
+) {
+  if (nowIndex >= path.length - 1) {
+    return;
+  }
+  const currentCode = path[nowIndex];
+  const father = activeList.find((item: any) => item.value === currentCode);
+  if (!father) {
+    console.warn(`未找到 ${currentCode} 的父级数据`);
+    return;
+  }
+  // 加载下一级数据
+  const children = await getOptions(currentCode);
+  father.children = children;
+  // 递归加载下一级
+  await preloadRegionPath(path, nowIndex + 1, children);
+}
+
+/** ====================  周期  ==================== */
+onBeforeMount(async () => {
+  // 加载默认数据
+  const res = await getOptions(props.startRegionCode);
+  const options = ref(res);
+  useOptions.value = options.value;
+});
+
+watch(
+  () => select.value,
+  () => {
+    if (select.value && select.value.length > 0) {
+      reloadFlag.value = false;
+      modelValue.value = select.value[select.value.length - 1];
+    } else {
+      modelValue.value = undefined;
+    }
+  },
+  {
+    deep: true,
+  },
+);
+
+watch(
+  () => modelValue.value,
+  (newVal) => {
+    if (newVal === undefined) {
+      select.value = [];
+    } else {
+      if (modelValue.value) {
+        const path = getRegionPath(modelValue.value);
+        select.value = path;
+        preloadRegionPath(path, 0, useOptions.value);
+      }
+      emit('change', newVal);
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <div class="w-full overflow-hidden">
+    <Cascader
+      :placeholder="placeholder"
+      v-model:value="select"
+      :options="useOptions"
+      :load-data="loadData"
+      :display-render="displayRender"
+      change-on-select
+      expand-trigger="hover"
+      class="w-full"
+      @clear="select = []"
+    />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/Switch/index.vue b/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/Switch/index.vue
new file mode 100644
index 0000000..f3d524b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/Switch/index.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Switch } from 'ant-design-vue';
+
+const props = withDefaults(
+  defineProps<{
+    /** 开启时的文字 */
+    checkedChildren?: string;
+    /** 开启时的值 */
+    checkedValue?: boolean | number | string;
+    /** 关闭时的文字 */
+    unCheckedChildren?: string;
+    /** 关闭时的值 */
+    unCheckedValue?: boolean | number | string;
+  }>(),
+  {
+    checkedChildren: '启用',
+    checkedValue: 0,
+    unCheckedChildren: '停用',
+    unCheckedValue: 1,
+  },
+);
+
+const value = defineModel<any>();
+</script>
+
+<template>
+  <Switch v-model:checked="value" v-bind="props" class="w-auto" />
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/TextArea/index.vue b/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/TextArea/index.vue
new file mode 100644
index 0000000..e8ec865
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/TextArea/index.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Textarea } from 'ant-design-vue';
+
+const props = withDefaults(
+  defineProps<{
+    maxRows?: number;
+    minRows?: number;
+    placeholder?: string;
+  }>(),
+  {
+    minRows: 4,
+    maxRows: 4,
+    placeholder: '请输入内容',
+  },
+);
+
+const value = defineModel<any>();
+</script>
+
+<template>
+  <Textarea
+    v-model:checked="value"
+    :auto-size="{ minRows: props.minRows, maxRows: props.maxRows }"
+    v-bind="props"
+  />
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/register.ts b/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/register.ts
new file mode 100644
index 0000000..435eb14
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/HtCustom/FormExpand/register.ts
@@ -0,0 +1,28 @@
+import type { ComponentCustomProps, VNodeProps } from 'vue';
+
+import HctRegionSelect from './RegionSelect/index.vue';
+import HtcFormSwitch from './Switch/index.vue';
+import HtcFormTextArea from './TextArea/index.vue';
+
+type VueBuiltInProps = ComponentCustomProps & VNodeProps;
+
+type ComponentProps<T extends abstract new (...args: any) => any> = Omit<
+  InstanceType<T>['$props'],
+  'modelValue' | 'onUpdate:modelValue' | keyof VueBuiltInProps
+>;
+/** ====================  注册组件类型  ==================== */
+export type HtcRegisterComponentName = keyof typeof HtcRegisterComponent;
+
+/** ====================  注册组件props  ==================== */
+export type HtcComponentPropsMap = {
+  [K in keyof typeof HtcRegisterComponent]: ComponentProps<
+    (typeof HtcRegisterComponent)[K]
+  >;
+};
+
+/** ====================  暴露的组件  ==================== */
+export const HtcRegisterComponent = {
+  HtcFormSwitch,
+  HtcFormTextArea,
+  HctRegionSelect,
+};
diff --git a/admin-ui/vue/apps/web-antd/src/components/HtCustom/IconButton/index.png b/admin-ui/vue/apps/web-antd/src/components/HtCustom/IconButton/index.png
new file mode 100644
index 0000000..9759f02
Binary files /dev/null and b/admin-ui/vue/apps/web-antd/src/components/HtCustom/IconButton/index.png differ
diff --git a/admin-ui/vue/apps/web-antd/src/components/HtCustom/IconButton/index.vue b/admin-ui/vue/apps/web-antd/src/components/HtCustom/IconButton/index.vue
new file mode 100644
index 0000000..da99e93
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/HtCustom/IconButton/index.vue
@@ -0,0 +1,66 @@
+<!-- 图标按钮组件 -->
+<script setup lang="ts">
+import type { ButtonProps } from 'ant-design-vue';
+
+import { computed, toRefs, useSlots } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button } from 'ant-design-vue';
+
+/** ====================  类型  ==================== */
+interface HtcIconButtonProps extends Omit<ButtonProps, 'icon'> {
+  /** 图标 */
+  icon?: string;
+  /** 图标位置 */
+  iconPosition?: 'left' | 'right' | undefined;
+  /** 图标Class */
+  iconClass?: string;
+  /** 文案内容 */
+  text?: string;
+}
+
+/** ====================  常量  ==================== */
+const props = defineProps<HtcIconButtonProps>();
+const slots = useSlots();
+
+/** ====================  数据  ==================== */
+const { icon } = toRefs(props);
+
+const buttonProps = computed(() => {
+  const {
+    icon: _icon,
+    iconClass: _iconClass,
+    iconPosition: _iconPosition,
+    ...rest
+  } = props;
+
+  return rest;
+});
+</script>
+
+<template>
+  <Button
+    v-bind="{ ...buttonProps, ...$attrs }"
+    class="flex items-center justify-center"
+  >
+    <IconifyIcon
+      v-if="icon && (iconPosition === undefined || iconPosition === 'left')"
+      :icon="icon"
+      :class="iconClass"
+    />
+    <template v-if="slots.default">
+      <slot></slot>
+    </template>
+    <template v-else>
+      {{ text }}
+    </template>
+    <IconifyIcon
+      v-if="icon && iconPosition === 'right'"
+      :icon="icon"
+      :class="iconClass"
+    />
+  </Button>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/HtCustom/index.ts b/admin-ui/vue/apps/web-antd/src/components/HtCustom/index.ts
new file mode 100644
index 0000000..6087a1a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/HtCustom/index.ts
@@ -0,0 +1,41 @@
+/* eslint-disable perfectionist/sort-exports */
+
+/** ====================  默认组件  ==================== */
+// // 卡片表格
+// export { default as HtcCardGrid } from './CardGrid/index.vue';
+// // 确认弹窗
+// export { default as HtcConfirmModal } from './ConfirmModal';
+// // 通用容器
+// export { default as HtcContainer } from './Container/index.vue';
+// // 空内容
+// export { default as HtcEmptyCard } from './EmptyCard/index.vue';
+// 图标按钮
+export { default as HtcIconButton } from './IconButton/index.vue';
+// // 通用页头
+// export { default as HtcPageHeader } from './PageHeader/index.vue';
+// // 表格选择器
+// export { default as HtcSelectModal } from './SelectModal/index.vue';
+// // 按钮开关
+// export { default as HtcSwitchButton } from './SwitchButton/index.vue';
+// // 代码展示
+// export { default as HtcShowCode } from './ShowCode/index.vue';
+// // 快捷弹窗表单
+// export { default as HtcQuickModalForm } from './QuickModalForm/index.vue';
+
+// /** ====================  表单相关  ==================== */
+// // 代码编辑器
+// export { default as HtcFeCodeEdit } from './FormExtension/CodeEdit.vue';
+// // 颜色选择器
+// export { default as HtcFeColorSelect } from './FormExtension/Color.vue';
+// // 数据模型表单
+// export { default as HtcFeDataModelTable } from './FormExtension/DataModelTable/index.vue';
+// // 键值对列表
+// export { default as HtcFeKVList } from './FormExtension/KVList.vue';
+// // 时段选择列表
+// export { default as HtcFeTimePeriodSelect } from './FormExtension/TimePeriodSelect.vue';
+// // 提示
+// export { default as HtcFormTips } from './FormExtension/Tips.vue';
+// // 表单表格选择器
+// export { default as HtcFeSelectFormModal } from './FormExtension/SelectFormModal.vue';
+// // 国家号码
+// export { default as HtcFeCountryPhone } from './FormExtension/CountryPhone.vue';
diff --git a/admin-ui/vue/apps/web-antd/src/components/chatList/ChatList.vue b/admin-ui/vue/apps/web-antd/src/components/chatList/ChatList.vue
new file mode 100644
index 0000000..0cbfba8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/chatList/ChatList.vue
@@ -0,0 +1,118 @@
+<template>
+  <div
+    ref="chatContainerRef"
+    class="flex h-full w-full flex-col gap-2 overflow-y-auto"
+  >
+    <Bubble
+      class="bubble"
+      v-for="(item, index) in chatHistory"
+      :key="index"
+      :placement="item.role === 'user' ? 'end' : 'start'"
+      :content="item.content"
+      :autoSize="{ minRows: 2, maxRows: 6 }"
+      :messageRender="formart"
+    >
+      <template #footer>
+        <slot v-if="item.role === 'user'" name="userFooter" :data="item">
+          <p>{{ showTime ? item.createdAt : '' }}</p>
+        </slot>
+        <slot v-else name="cialloFooter" :data="item">
+          <p>{{ showTime ? item.createdAt : '' }}</p>
+        </slot>
+      </template>
+    </Bubble>
+  </div>
+</template>
+
+<script setup lang="ts" name="">
+import { Bubble } from 'ant-design-x-vue';
+import { h, ref, watch } from 'vue';
+
+/** ====================  setup  ==================== */
+// 容器实例
+const chatContainerRef = ref<any>(null);
+// props
+const {
+  chatHistory,
+  formart = (content: string) => {
+    return h(
+      'pre',
+      {
+        style: {
+          margin: 0,
+          fontFamily:
+            'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+        },
+      },
+      String(content),
+    );
+  },
+  autoScroll = true,
+  showTime = false,
+} = defineProps<Props>();
+
+/** ====================  暴露事件  ==================== */
+// 添加对话记录
+function addChatHistory(
+  content: string,
+  user: 'user' | 'ciallo',
+  createdAt?: string,
+) {
+  chatHistory!.push({
+    role: user,
+    content,
+    createdAt: createdAt == undefined ? new Date().toLocaleString() : createdAt,
+  });
+
+  autoScroll &&
+    setTimeout(() => {
+      scrollToBottom();
+    });
+}
+
+// 滚动到底部
+function scrollToBottom() {
+  chatContainerRef.value.scrollTop = chatContainerRef.value.scrollHeight;
+}
+
+watch(
+  () => chatHistory,
+  () => {
+    autoScroll &&
+      setTimeout(() => {
+        scrollToBottom();
+      });
+  },
+);
+
+defineExpose({
+  addChatHistory,
+  scrollToBottom,
+});
+
+/** ====================  types  ==================== */
+interface Props {
+  /** 对话记录 */
+  chatHistory?: ChatHistory[];
+  /** 格式化模板 */
+  formart?: (content: string) => any;
+  /** 自动滚动 */
+  autoScroll?: boolean;
+  /** 是否显示时间 */
+  showTime?: boolean;
+}
+interface ChatHistory {
+  /** 角色
+   * @description user: 用户，ciallo: 模型
+   */
+  role: 'user' | 'ciallo';
+  /** 内容 */
+  content: string;
+  /** 创建时间 */
+  createdAt: string;
+}
+</script>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/cropper/index.ts b/admin-ui/vue/apps/web-antd/src/components/cropper/index.ts
new file mode 100644
index 0000000..6afad01
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/cropper/index.ts
@@ -0,0 +1,3 @@
+export { default as CropperAvatar } from './src/cropper-avatar.vue';
+export { default as CropperImage } from './src/cropper.vue';
+export type { Cropper } from './src/typing';
diff --git a/admin-ui/vue/apps/web-antd/src/components/cropper/src/cropper-avatar.vue b/admin-ui/vue/apps/web-antd/src/components/cropper/src/cropper-avatar.vue
new file mode 100644
index 0000000..42fb965
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/cropper/src/cropper-avatar.vue
@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import type { ButtonProps } from 'ant-design-vue';
+
+import type { CSSProperties, PropType } from 'vue';
+
+import { computed, ref, unref, watch, watchEffect } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t as t } from '@vben/locales';
+
+import { message,Button } from 'ant-design-vue';
+
+import cropperModal from './cropper-modal.vue';
+
+defineOptions({ name: 'CropperAvatar' });
+
+const props = defineProps({
+  btnProps: { default: () => ({}), type: Object as PropType<ButtonProps> },
+  btnText: { default: '', type: String },
+  showBtn: { default: true, type: Boolean },
+  size: { default: 5, type: Number },
+  uploadApi: {
+    required: true,
+    type: Function as PropType<
+      ({
+        file,
+        filename,
+        name,
+      }: {
+        file: Blob;
+        filename: string;
+        name: string;
+      }) => Promise<any>
+    >,
+  },
+  value: { default: '', type: String },
+
+  width: { default: '200px', type: [String, Number] },
+});
+
+const emit = defineEmits(['update:value', 'change']);
+
+const sourceValue = ref(props.value || '');
+const prefixCls = 'cropper-avatar';
+const [CropperModal, modalApi] = useVbenModal({
+  connectedComponent: cropperModal,
+});
+
+const getClass = computed(() => [prefixCls]);
+
+const getWidth = computed(() => `${`${props.width}`.replace(/px/, '')}px`);
+
+const getIconWidth = computed(
+  () => `${Number.parseInt(`${props.width}`.replace(/px/, '')) / 2}px`,
+);
+
+const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
+
+const getImageWrapperStyle = computed(
+  (): CSSProperties => ({ height: unref(getWidth), width: unref(getWidth) }),
+);
+
+watchEffect(() => {
+  sourceValue.value = props.value || '';
+});
+
+watch(
+  () => sourceValue.value,
+  (v: string) => {
+    emit('update:value', v);
+  },
+);
+
+function handleUploadSuccess({ data, source }: any) {
+  sourceValue.value = source;
+  emit('change', { data, source });
+  message.success(t('component.cropper.uploadSuccess'));
+}
+
+const closeModal = () => modalApi.close();
+const openModal = () => modalApi.open();
+
+defineExpose({
+  closeModal,
+  openModal,
+});
+</script>
+<template>
+  <div :class="getClass" :style="getStyle">
+    <div
+      :class="`${prefixCls}-image-wrapper`"
+      :style="getImageWrapperStyle"
+      @click="openModal"
+    >
+      <div :class="`${prefixCls}-image-mask`" :style="getImageWrapperStyle">
+        <span
+          :style="{
+            ...getImageWrapperStyle,
+            width: `${getIconWidth}`,
+            height: `${getIconWidth}`,
+            lineHeight: `${getIconWidth}`,
+          }"
+          class="icon-[ant-design--cloud-upload-outlined] text-[#d6d6d6]"
+        ></span>
+      </div>
+      <img v-if="sourceValue" :src="sourceValue" alt="avatar" />
+    </div>
+    <Button
+      v-if="showBtn"
+      :class="`${prefixCls}-upload-btn`"
+      @click="openModal"
+      v-bind="btnProps"
+    >
+      {{ btnText ? btnText : t('component.cropper.selectImage') }}
+    </Button>
+
+    <CropperModal
+      :size="size"
+      :src="sourceValue"
+      :upload-api="uploadApi"
+      @upload-success="handleUploadSuccess"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.cropper-avatar {
+  display: inline-block;
+  text-align: center;
+
+  &-image-wrapper {
+    overflow: hidden;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 50%;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  &-image-mask {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: inherit;
+    height: inherit;
+    cursor: pointer;
+    background: rgb(0 0 0 / 40%);
+    border: inherit;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.4s;
+
+    ::v-deep(svg) {
+      margin: auto;
+    }
+  }
+
+  &-image-mask:hover {
+    opacity: 40;
+  }
+
+  &-upload-btn {
+    margin: 10px auto;
+  }
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/cropper/src/cropper-modal.vue b/admin-ui/vue/apps/web-antd/src/components/cropper/src/cropper-modal.vue
new file mode 100644
index 0000000..43b36d9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/cropper/src/cropper-modal.vue
@@ -0,0 +1,328 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+
+import type { CropendResult, Cropper } from './typing';
+
+import { ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t as t } from '@vben/locales';
+
+import { Avatar, message, Space, Tooltip, Upload, Button } from 'ant-design-vue';
+import { isFunction } from 'lodash-es';
+
+import { dataURLtoBlob } from '@vben/utils';
+
+import CropperImage from './cropper.vue';
+
+type apiFunParams = { file: Blob; filename: string; name: string };
+
+defineOptions({ name: 'CropperModal' });
+
+const props = defineProps({
+  circled: { default: true, type: Boolean },
+  size: { default: 0, type: Number },
+  src: { default: '', type: String },
+  uploadApi: {
+    required: true,
+    type: Function as PropType<(params: apiFunParams) => Promise<any>>,
+  },
+});
+
+const emit = defineEmits(['uploadSuccess', 'uploadError', 'register']);
+
+let filename = '';
+const src = ref(props.src || '');
+const previewSource = ref<String>('');
+const cropper = ref<Cropper>();
+let scaleX = 1;
+let scaleY = 1;
+
+const prefixCls = 'cropper-am';
+const [BasicModal, modalApi] = useVbenModal({
+  onConfirm: handleOk,
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      if (!src.value) {
+        modalLoading(false);
+      } else {
+        modalLoading(true);
+      }
+    } else {
+      resetState();
+      modalLoading(false);
+    }
+  },
+});
+watch(() => props.src, (newVal) => {
+  src.value = newVal || '';
+  if (!newVal) {
+    modalLoading(false);
+  }
+}, { immediate: true });
+
+function modalLoading(loading: boolean) {
+  modalApi.setState({ confirmLoading: loading, loading });
+}
+
+// Block upload
+function handleBeforeUpload(file: File) {
+  if (props.size > 0 && file.size > 1024 * 1024 * props.size) {
+    emit('uploadError', { msg: t('component.cropper.imageTooBig') });
+    return false;
+  }
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  src.value = '';
+  previewSource.value = '';
+
+  // 添加错误处理
+  reader.addEventListener('error', () => {
+    modalLoading(false);
+    message.error('图片加载失败');
+  });
+
+  reader.addEventListener('load', (e) => {
+    src.value = (e.target?.result as string) ?? '';
+    filename = file.name;
+  });
+  fileList.value = [file];
+  return false;
+}
+
+function handleCropend({ imgBase64 }: CropendResult) {
+  previewSource.value = imgBase64;
+}
+
+function handleReady(cropperInstance: Cropper) {
+  cropper.value = cropperInstance;
+  // 画布加载完毕 关闭loading
+  modalLoading(false);
+}
+
+function handlerToolbar(event: string, arg?: number) {
+  if (event === 'scaleX') {
+    scaleX = arg = scaleX === -1 ? 1 : -1;
+  }
+  if (event === 'scaleY') {
+    scaleY = arg = scaleY === -1 ? 1 : -1;
+  }
+  (cropper?.value as any)?.[event]?.(arg);
+}
+
+async function handleOk() {
+  const uploadApi = props.uploadApi;
+  if (uploadApi && isFunction(uploadApi)) {
+    if (!previewSource.value) {
+      message.warn('未选择图片');
+      return;
+    }
+    try {
+      modalLoading(true);
+      // 始终使用裁剪后的图片进行上传
+      if (previewSource.value) {
+        const blob = dataURLtoBlob(previewSource.value as string);
+        // 修复文件名后缀，使其基于实际的 MIME 类型
+        const extension = blob.type.split("/")[1] || "png";
+        const file = new File([blob], `${filename.substring(0, filename.lastIndexOf('.')) || filename}.${extension}`, { type: blob.type });
+        await uploadApi({ file, filename, name: 'file' });
+        // 触发上传成功事件
+        emit('uploadSuccess', { source: previewSource.value });
+      }
+      modalApi.close();
+    } catch (error:any) {
+      emit('uploadError', { msg: error.message });
+    } finally {
+      modalLoading(false);
+    }
+  }
+}
+
+
+function resetState() {
+  src.value = props.src || '';
+  previewSource.value = '';
+  filename = '';
+  scaleX = 1;
+  scaleY = 1;
+}
+
+function handleCancel() {
+  resetState();
+  modalApi.close();
+}
+const fileList = ref<any[]>([])
+</script>
+<template>
+  <BasicModal v-bind="$attrs" :confirm-text="t('component.cropper.okText')" :fullscreen-button="false"
+    :title="t('component.cropper.modalTitle')" class="w-[800px]" @cancel="handleCancel">
+    <div :class="prefixCls">
+      <div :class="`${prefixCls}-left`" class="w-full">
+        <div :class="`${prefixCls}-cropper`">
+          <CropperImage :circled="circled" :src="src" height="300px" @cropend="handleCropend" @ready="handleReady" />
+        </div>
+
+        <div :class="`${prefixCls}-toolbar`">
+          <Upload :before-upload="handleBeforeUpload" :file-list="[]" accept="image/*">
+            <Tooltip :title="t('component.cropper.selectImage')" placement="bottom">
+              <Button size="small" type="primary">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--upload-outlined]"></span>
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+          </Upload>
+          <Space>
+            <Tooltip :title="t('component.cropper.btn_reset')" placement="bottom">
+              <Button :disabled="!src" size="small" type="primary" @click="handlerToolbar('reset')">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--reload-outlined]"></span>
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_rotate_left')" placement="bottom">
+              <Button :disabled="!src" size="small" type="primary" @click="handlerToolbar('rotate', -45)">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--rotate-left-outlined]"></span>
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_rotate_right')" placement="bottom">
+              <Button :disabled="!src" pre-icon="ant-design:rotate-right-outlined" size="small" type="primary"
+                @click="handlerToolbar('rotate', 45)">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--rotate-right-outlined]"></span>
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_scale_x')" placement="bottom">
+              <Button :disabled="!src" size="small" type="primary" @click="handlerToolbar('scaleX')">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[vaadin--arrows-long-h]"></span>
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_scale_y')" placement="bottom">
+              <Button :disabled="!src" size="small" type="primary" @click="handlerToolbar('scaleY')">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[vaadin--arrows-long-v]"></span>
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_zoom_in')" placement="bottom">
+              <Button :disabled="!src" size="small" type="primary" @click="handlerToolbar('zoom', 0.1)">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--zoom-in-outlined]"></span>
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="t('component.cropper.btn_zoom_out')" placement="bottom">
+              <Button :disabled="!src" size="small" type="primary" @click="handlerToolbar('zoom', -0.1)">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <span class="icon-[ant-design--zoom-out-outlined]"></span>
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+          </Space>
+        </div>
+      </div>
+      <div :class="`${prefixCls}-right`">
+        <div :class="`${prefixCls}-preview`">
+          <img v-if="previewSource" :alt="t('component.cropper.preview')" :src="previewSource as string" />
+        </div>
+        <template v-if="previewSource">
+          <div :class="`${prefixCls}-group`">
+            <Avatar :src="previewSource as string" size="large" />
+            <Avatar :size="48" :src="previewSource as string" />
+            <Avatar :size="64" :src="previewSource as string" />
+            <Avatar :size="80" :src="previewSource as string" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<style lang="scss">
+.cropper-am {
+  display: flex;
+
+  &-left,
+  &-right {
+    height: 340px;
+  }
+
+  &-left {
+    width: 55%;
+  }
+
+  &-right {
+    width: 45%;
+  }
+
+  &-cropper {
+    height: 300px;
+    background: #eee;
+    background-image: linear-gradient(45deg,
+        rgb(0 0 0 / 25%) 25%,
+        transparent 0,
+        transparent 75%,
+        rgb(0 0 0 / 25%) 0),
+      linear-gradient(45deg,
+        rgb(0 0 0 / 25%) 25%,
+        transparent 0,
+        transparent 75%,
+        rgb(0 0 0 / 25%) 0);
+    background-position:
+      0 0,
+      12px 12px;
+    background-size: 24px 24px;
+  }
+
+  &-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  &-preview {
+    width: 220px;
+    height: 220px;
+    margin: 0 auto;
+    overflow: hidden;
+    border: 1px solid #eee;
+    border-radius: 50%;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding-top: 8px;
+    margin-top: 8px;
+    border-top: 1px solid #eee;
+  }
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/cropper/src/cropper.vue b/admin-ui/vue/apps/web-antd/src/components/cropper/src/cropper.vue
new file mode 100644
index 0000000..5d1c57b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/cropper/src/cropper.vue
@@ -0,0 +1,216 @@
+<script lang="ts" setup>
+import type { CSSProperties, PropType } from 'vue';
+
+import { computed, nextTick, onMounted, onUnmounted, ref, unref, useAttrs, watch } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';
+import Cropper from 'cropperjs';
+
+import 'cropperjs/dist/cropper.css';
+
+type Options = Cropper.Options;
+
+defineOptions({ name: 'CropperImage' });
+
+const props = defineProps({
+  alt: { default: '', type: String },
+  circled: { default: false, type: Boolean },
+  crossorigin: {
+    default: undefined,
+    type: String as PropType<'' | 'anonymous' | 'use-credentials' | undefined>,
+  },
+  height: { default: '360px', type: [String, Number] },
+  imageStyle: { default: () => ({}), type: Object as PropType<CSSProperties> },
+  options: { default: () => ({}), type: Object as PropType<Options> },
+  realTimePreview: { default: true, type: Boolean },
+  src: { required: true, type: String },
+});
+
+const emit = defineEmits(['cropend', 'ready', 'cropendError']);
+
+const defaultOptions: Options = {
+  aspectRatio: 1,
+  autoCrop: true,
+  background: true,
+  center: true,
+  checkCrossOrigin: true,
+  checkOrientation: true,
+  cropBoxMovable: true,
+  cropBoxResizable: true,
+  guides: true,
+  highlight: true,
+  modal: true,
+  movable: true,
+  responsive: true,
+  restore: true,
+  rotatable: true,
+  scalable: true,
+  toggleDragModeOnDblclick: true,
+  zoomable: true,
+  zoomOnTouch: true,
+  zoomOnWheel: true,
+};
+
+const attrs = useAttrs();
+
+type ElRef<T extends HTMLElement = HTMLDivElement> = null | T;
+const imgElRef = ref<ElRef<HTMLImageElement>>();
+const cropper = ref<Cropper | null>();
+const isReady = ref(false);
+
+const prefixCls = 'cropper-image';
+const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
+
+const getImageStyle = computed((): CSSProperties => {
+  return {
+    height: props.height,
+    maxWidth: '100%',
+    ...props.imageStyle,
+  };
+});
+
+const getClass = computed(() => {
+  return [
+    prefixCls,
+    attrs.class,
+    {
+      [`${prefixCls}--circled`]: props.circled,
+    },
+  ];
+});
+
+const getWrapperStyle = computed((): CSSProperties => {
+  return { height: `${`${props.height}`.replace(/px/, '')}px` };
+});
+
+onMounted(() => {
+  if (props.src) {
+    init();
+  } else {
+    emit('ready', null);
+  }
+});
+watch(() => props.src, (newSrc) => {
+  if (!newSrc) return;
+  if (cropper.value) {
+    cropper.value.destroy();
+    cropper.value = null;
+  }
+  nextTick(init);
+});
+
+onUnmounted(() => {
+  cropper.value?.destroy();
+});
+
+async function init() {
+  const imgEl = unref(imgElRef);
+  if (!imgEl) {
+    return;
+  }
+  cropper.value = new Cropper(imgEl, {
+    ...defaultOptions,
+    crop() {
+      debounceRealTimeCroppered();
+    },
+    cropmove() {
+      debounceRealTimeCroppered();
+    },
+    ready: () => {
+      isReady.value = true;
+      realTimeCroppered();
+      emit('ready', cropper.value);
+    },
+    zoom() {
+      debounceRealTimeCroppered();
+    },
+    ...props.options,
+  });
+}
+
+// Real-time display preview
+function realTimeCroppered(){
+  try {
+  props.realTimePreview && croppered();
+  } catch (error) {
+  }
+}
+
+// event: return base64 and width and height information after cropping
+function croppered() {
+  if (!cropper.value) {
+    return;
+  }
+  const imgInfo = cropper.value.getData();
+  const canvas = props.circled
+    ? getRoundedCanvas()
+    : cropper.value.getCroppedCanvas();
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return;
+    }
+    const fileReader: FileReader = new FileReader();
+    fileReader.readAsDataURL(blob);
+    fileReader.onloadend = (e) => {
+      emit('cropend', {
+        imgBase64: e.target?.result ?? '',
+        imgInfo,
+      });
+    };
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    fileReader.onerror = () => {
+      emit('cropendError');
+    };
+  }, 'image/png');
+}
+
+// Get a circular picture canvas
+function getRoundedCanvas() {
+  const sourceCanvas = cropper.value!.getCroppedCanvas();
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d')!;
+  const width = sourceCanvas.width;
+  const height = sourceCanvas.height;
+  canvas.width = width;
+  canvas.height = height;
+  context.imageSmoothingEnabled = true;
+  context.drawImage(sourceCanvas, 0, 0, width, height);
+  context.globalCompositeOperation = 'destination-in';
+  context.beginPath();
+  context.arc(
+    width / 2,
+    height / 2,
+    Math.min(width, height) / 2,
+    0,
+    2 * Math.PI,
+    true,
+  );
+  context.fill();
+  return canvas;
+}
+function reset() {
+  if (cropper.value) {
+    cropper.value.reset();
+  }
+}
+defineExpose({
+  reset
+});
+
+</script>
+<template>
+  <div :class="getClass" :style="getWrapperStyle">
+    <img v-show="isReady" ref="imgElRef" :alt="alt" :crossorigin="crossorigin" :src="src" :style="getImageStyle" />
+  </div>
+</template>
+<style lang="scss">
+.cropper-image {
+  &--circled {
+
+    .cropper-view-box,
+    .cropper-face {
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/cropper/src/typing.ts b/admin-ui/vue/apps/web-antd/src/components/cropper/src/typing.ts
new file mode 100644
index 0000000..e76cc6f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/cropper/src/typing.ts
@@ -0,0 +1,8 @@
+import type Cropper from 'cropperjs';
+
+export interface CropendResult {
+  imgBase64: string;
+  imgInfo: Cropper.Data;
+}
+
+export type { Cropper };
diff --git a/admin-ui/vue/apps/web-antd/src/components/dept/dept-tree.vue b/admin-ui/vue/apps/web-antd/src/components/dept/dept-tree.vue
new file mode 100644
index 0000000..3567ad3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/dept/dept-tree.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { SysDeptTreeData } from '#/api/system/dept';
+
+import { onMounted, ref } from 'vue';
+
+import { SyncOutlined } from  '@vben/icons';
+import { Empty, InputSearch, Skeleton, Tree, Button } from 'ant-design-vue';
+import { useRoute } from 'vue-router';
+import { getSysDeptTreeApi } from '#/api/system/dept';
+
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
+
+const emit = defineEmits<{
+  // 点击刷新按钮的事件
+  reload: [];
+  // 点击节点的事件
+  select: [];
+}>();
+
+const selectDeptId = defineModel('selectDeptId', {
+  required: true,
+  type: Array as PropType<string[]>,
+});
+
+const searchValue = defineModel('searchValue', {
+  type: String,
+  default: '',
+});
+
+/** 组织数据源 */
+type DeptTreeArray = SysDeptTreeData[];
+const deptTreeArray = ref<DeptTreeArray>([]);
+/** 骨架屏加载 */
+const showTreeSkeleton = ref<boolean>(true);
+
+async function loadTree() {
+  // 获取路由参数deptId
+  const deptId = useRoute().query.deptId;
+  if (deptId) {
+    selectDeptId.value = [deptId as string];
+  }
+  console.log('vue/apps/web-antd/src/components/dept/dept-tree.vue loadTree', deptId);
+
+  showTreeSkeleton.value = true;
+  searchValue.value = '';
+  // selectDeptId.value = [];
+
+  const ret = await getSysDeptTreeApi({  });
+
+  deptTreeArray.value = ret.items;
+  showTreeSkeleton.value = false;
+}
+
+async function handleReload() {
+  await loadTree();
+  emit('reload');
+}
+
+onMounted(loadTree);
+</script>
+
+<template>
+  <div :class="$attrs.class">
+    <Skeleton
+      :loading="showTreeSkeleton"
+      :paragraph="{ rows: 8 }"
+      active
+      class="p-[8px]"
+    >
+      <div
+        class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
+      >
+        <!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
+        <div
+          v-if="showSearch"
+          class="bg-background z-100 sticky left-0 top-0 p-[8px]"
+        >
+          <InputSearch
+            v-model:value="searchValue"
+            :placeholder="$t('pages.common.search')"
+            size="small"
+          >
+            <template #enterButton>
+              <Button @click="handleReload">
+                <SyncOutlined class="text-primary" />
+              </Button>
+            </template>
+          </InputSearch>
+        </div>
+        <div class="h-full overflow-x-hidden px-[8px]">
+          <Tree
+            v-bind="$attrs"
+            v-if="deptTreeArray.length > 0"
+            v-model:selected-keys="selectDeptId"
+            :class="$attrs.class"
+            :field-names="{ title: 'deptName', key: 'key' }"
+            :show-line="{ showLeafIcon: false }"
+            :tree-data="deptTreeArray"
+            :virtual="false"
+            default-expand-all
+            @select="$emit('select')"
+          >
+            <template #title="{ deptName }">
+              <span v-if="deptName.indexOf(searchValue) > -1">
+                {{ deptName.substring(0, deptName.indexOf(searchValue)) }}
+                <span style="color: #f50">{{ searchValue }}</span>
+                {{
+                  deptName.substring(
+                    deptName.indexOf(searchValue) + searchValue.length,
+                  )
+                }}
+              </span>
+              <span v-else>{{ deptName }}</span>
+            </template>
+          </Tree>
+          <!-- 仅本人数据权限 可以考虑直接不显示 -->
+          <div v-else class="mt-5">
+            <Empty
+              :image="Empty.PRESENTED_IMAGE_SIMPLE"
+              description="无组织数据"
+            />
+          </div>
+        </div>
+      </div>
+    </Skeleton>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/components/description/index.ts b/admin-ui/vue/apps/web-antd/src/components/description/index.ts
new file mode 100644
index 0000000..46a851f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/description/index.ts
@@ -0,0 +1,3 @@
+export { default as Description } from './src/description.vue';
+export * from './src/typing';
+export { useDescription } from './src/useDescription';
diff --git a/admin-ui/vue/apps/web-antd/src/components/description/src/description.vue b/admin-ui/vue/apps/web-antd/src/components/description/src/description.vue
new file mode 100644
index 0000000..2398f35
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/description/src/description.vue
@@ -0,0 +1,202 @@
+<script lang="tsx">
+import type { CardSize } from 'ant-design-vue/es/card/Card';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
+
+import type { CSSProperties, PropType, Slots } from 'vue';
+
+import type { DescInstance, DescItem, DescriptionProps } from './typing';
+
+import { computed, defineComponent, ref, toRefs, unref, useAttrs } from 'vue';
+
+import { Card, Descriptions } from 'ant-design-vue';
+import { get, isFunction } from 'lodash-es';
+
+const props = {
+  bordered: { default: true, type: Boolean },
+  column: {
+    default: () => {
+      return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
+    },
+    type: [Number, Object],
+  },
+  data: { type: Object },
+  schema: {
+    default: () => [],
+    type: Array as PropType<DescItem[]>,
+  },
+  size: {
+    default: 'small',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  useCollapse: { default: true, type: Boolean },
+};
+
+export default defineComponent({
+  emits: ['register'],
+  // eslint-disable-next-line vue/order-in-components
+  name: 'Description',
+  // eslint-disable-next-line vue/order-in-components
+  props,
+  setup(props, { emit, slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    // Custom title component: get title
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+        title: undefined,
+      };
+      return opt as DescriptionProps;
+    });
+
+    /**
+     * @description: Whether to setting title
+     */
+    const useWrapper = computed(() => !!unref(getMergeProps).title);
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
+    });
+
+    /**
+     * @description:设置desc
+     */
+    function setDescProps(descProps: Partial<DescriptionProps>): void {
+      // Keep the last setDrawerProps
+      propsRef.value = {
+        ...(unref(propsRef) as Record<string, any>),
+        ...descProps,
+      } as Record<string, any>;
+    }
+
+    // Prevent line breaks
+    function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) {
+      if (!labelStyle && !labelMinWidth) {
+        return label;
+      }
+
+      const labelStyles: CSSProperties = {
+        ...labelStyle,
+        minWidth: `${labelMinWidth}px `,
+      };
+      return <div style={labelStyles}>{label}</div>;
+    }
+
+    function renderItem() {
+      const { data, schema } = unref(getProps);
+      return unref(schema)
+        .map((item) => {
+          const { contentMinWidth, field, render, show, span } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          const getContent = () => {
+            const _data = unref(getProps)?.data;
+            if (!_data) {
+              return null;
+            }
+            const getField = get(_data, field);
+            // eslint-disable-next-line no-prototype-builtins
+            if (getField && !toRefs(_data).hasOwnProperty(field)) {
+              return isFunction(render) ? render!('', _data) : '';
+            }
+            return isFunction(render)
+              ? render!(getField, _data)
+              : (getField ?? '');
+          };
+
+          const width = contentMinWidth;
+          return (
+            <Descriptions.Item
+              key={field}
+              label={renderLabel(item)}
+              span={span}
+            >
+              {() => {
+                if (!contentMinWidth) {
+                  return getContent();
+                }
+                const style: CSSProperties = {
+                  minWidth: `${width}px`,
+                };
+                return <div style={style}>{getContent()}</div>;
+              }}
+            </Descriptions.Item>
+          );
+        })
+        .filter((item) => !!item);
+    }
+
+    const renderDesc = () => {
+      return (
+        <Descriptions
+          class={`${prefixCls}`}
+          {...(unref(getDescriptionsProps) as any)}
+        >
+          {renderItem()}
+        </Descriptions>
+      );
+    };
+
+    const renderContainer = () => {
+      const content = props.useCollapse ? (
+        renderDesc()
+      ) : (
+        <div>{renderDesc()}</div>
+      );
+      // Reduce the dom level
+      if (!props.useCollapse) {
+        return content;
+      }
+
+      // const { canExpand, helpMessage } = unref(getCollapseOptions);
+      const { title } = unref(getMergeProps);
+
+      function getSlot(slots: Slots, slot = 'default', data?: any) {
+        if (!slots || !Reflect.has(slots, slot)) {
+          return null;
+        }
+        if (!isFunction(slots[slot])) {
+          console.error(`${slot} is not a function!`);
+          return null;
+        }
+        const slotFn = slots[slot];
+        if (!slotFn) return null;
+        const params = { ...data };
+        return slotFn(params);
+      }
+
+      return (
+        <Card size={props.size as CardSize} title={title}>
+          {{
+            default: () => content,
+            extra: () => getSlot(slots, 'extra'),
+          }}
+        </Card>
+      );
+    };
+
+    const methods: DescInstance = {
+      setDescProps,
+    };
+
+    emit('register', methods);
+    return () => (unref(useWrapper) ? renderContainer() : renderDesc());
+  },
+});
+</script>
diff --git a/admin-ui/vue/apps/web-antd/src/components/description/src/typing.ts b/admin-ui/vue/apps/web-antd/src/components/description/src/typing.ts
new file mode 100644
index 0000000..204b697
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/description/src/typing.ts
@@ -0,0 +1,48 @@
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions';
+import type { JSX } from 'vue/jsx-runtime';
+
+import type { CSSProperties, VNode } from 'vue';
+
+import type { Recordable } from '@vben/types';
+
+export interface DescItem {
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  labelStyle?: CSSProperties;
+  field: string;
+  label: JSX.Element | string | VNode;
+  // Merge column
+  span?: number;
+  show?: (...arg: any) => boolean;
+  // render
+  render?: (
+    val: any,
+    data: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
+}
+
+export interface DescriptionProps extends DescriptionsProps {
+  // Whether to include the collapse component
+  useCollapse?: boolean;
+  /**
+   * item configuration
+   * @type DescItem
+   */
+  schema: DescItem[];
+  /**
+   * 数据
+   * @type object
+   */
+  data: Recordable<any>;
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>, delay?: boolean): void;
+}
+
+export type Register = (descInstance: DescInstance) => void;
+
+/**
+ * @description:
+ */
+export type UseDescReturnType = [Register, DescInstance];
diff --git a/admin-ui/vue/apps/web-antd/src/components/description/src/useDescription.ts b/admin-ui/vue/apps/web-antd/src/components/description/src/useDescription.ts
new file mode 100644
index 0000000..477756b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/description/src/useDescription.ts
@@ -0,0 +1,44 @@
+import type {
+  DescInstance,
+  DescriptionProps,
+  UseDescReturnType,
+} from './typing';
+
+import { getCurrentInstance, ref, unref } from 'vue';
+
+export function useDescription(
+  props?: Partial<DescriptionProps>,
+): UseDescReturnType {
+  if (!getCurrentInstance()) {
+    throw new Error(
+      'useDescription() can only be used inside setup() or functional components!',
+    );
+  }
+  const desc = ref<DescInstance | null>(null);
+  const loaded = ref(false);
+
+  function register(instance: DescInstance) {
+    // if (unref(loaded) && import.meta.env.PROD) {
+    //   return;
+    // }
+    desc.value = instance;
+    props && instance.setDescProps(props);
+    loaded.value = true;
+  }
+
+  const methods: DescInstance = {
+    setDescProps: (
+      descProps: Partial<DescriptionProps>,
+      delay = false,
+    ): void => {
+      if (!delay) {
+        unref(desc)?.setDescProps(descProps);
+        return;
+      }
+      // 奇怪的问题 在modal中需要setTimeout才会生效
+      setTimeout(() => unref(desc)?.setDescProps(descProps));
+    },
+  };
+
+  return [register, methods];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/components/dict/index.ts b/admin-ui/vue/apps/web-antd/src/components/dict/index.ts
new file mode 100644
index 0000000..08282cf
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/dict/index.ts
@@ -0,0 +1,2 @@
+export { tagSelectOptions, tagTypes } from './src/data';
+export { default as DictTag } from './src/index.vue';
diff --git a/admin-ui/vue/apps/web-antd/src/components/dict/src/data.tsx b/admin-ui/vue/apps/web-antd/src/components/dict/src/data.tsx
new file mode 100644
index 0000000..7033c25
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/dict/src/data.tsx
@@ -0,0 +1,44 @@
+import type { VNode } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+interface TagType {
+  [key: string]: { color: string; label: string };
+}
+
+export const tagTypes: TagType = {
+  cyan: { color: 'cyan', label: 'cyan' },
+  danger: { color: 'error', label: '危险(danger)' },
+  /** 由于和elementUI不同 用于替换颜色 */
+  default: { color: 'default', label: '默认(default)' },
+  green: { color: 'green', label: 'green' },
+  info: { color: 'default', label: '信息(info)' },
+  orange: { color: 'orange', label: 'orange' },
+  /** 自定义预设 color可以为16进制颜色 */
+  pink: { color: 'pink', label: 'pink' },
+  primary: { color: 'processing', label: '主要(primary)' },
+  purple: { color: 'purple', label: 'purple' },
+  red: { color: 'red', label: 'red' },
+  success: { color: 'success', label: '成功(success)' },
+  warning: { color: 'warning', label: '警告(warning)' },
+};
+
+// 字典选择使用 { label: string; value: string }[]
+interface Options {
+  label: string | VNode;
+  value: string;
+}
+
+export function tagSelectOptions() {
+  const selectArray: Options[] = [];
+  Object.keys(tagTypes).forEach((key) => {
+    if (!tagTypes[key]) return;
+    const label = tagTypes[key].label;
+    const color = tagTypes[key].color;
+    selectArray.push({
+      label: <Tag color={color}>{label}</Tag>,
+      value: key,
+    });
+  });
+  return selectArray;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/components/dict/src/index.vue b/admin-ui/vue/apps/web-antd/src/components/dict/src/index.vue
new file mode 100644
index 0000000..c97955f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/dict/src/index.vue
@@ -0,0 +1,52 @@
+<!-- eslint-disable eqeqeq -->
+<script setup lang="ts">
+import type { DictOption } from '#/store/dict';
+
+import { computed } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { tagTypes } from './data';
+
+interface Props {
+  dicts: DictOption[]; // dict数组
+  value: number | string; // value
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dicts: undefined,
+});
+
+const color = computed<string>(() => {
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  const listClass = current?.listClass ?? '';
+  // 是否为默认的颜色
+  const isDefault = Reflect.has(tagTypes, listClass);
+  // 判断是默认还是自定义颜色
+  if (isDefault) {
+    // 这里做了antd - element-plus的兼容
+    return tagTypes[listClass]!.color;
+  }
+  return listClass || 'default';
+});
+
+const cssClass = computed<string>(() => {
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  return current?.cssClass ?? '';
+});
+
+const label = computed<number | string>(() => {
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  return current?.dictLabel ?? '未知';
+});
+
+const tagComponent = computed(() => (color.value ? Tag : 'div'));
+</script>
+
+<template>
+  <div>
+    <component :is="tagComponent" :class="cssClass" :color="color">
+      {{ label }}
+    </component>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/components/echarts-vue/piechart.d.ts b/admin-ui/vue/apps/web-antd/src/components/echarts-vue/piechart.d.ts
new file mode 100644
index 0000000..c7399e2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/echarts-vue/piechart.d.ts
@@ -0,0 +1,5 @@
+declare module '#/components/echarts-vue/piechart.vue' {
+    import { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+} 
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/components/echarts-vue/piechart.vue b/admin-ui/vue/apps/web-antd/src/components/echarts-vue/piechart.vue
new file mode 100644
index 0000000..eee56a4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/echarts-vue/piechart.vue
@@ -0,0 +1,54 @@
+<template>
+    <div ref="chartRef" :style="{ width, height }"></div>
+</template>
+  
+  <script setup>
+  import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
+  import { EchartsUI, useEcharts, echarts } from '@vben/plugins/echarts';
+  
+  const props = defineProps({
+    options: {
+      type: Object,
+      required: true,
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '100%',
+    },
+  });
+  
+  const chartRef = ref(null);
+  let chartInstance = null;
+  
+  const initChart = () => {
+    if (!chartRef.value) return;
+    chartInstance = echarts.init(chartRef.value);
+    chartInstance.setOption(props.options);
+  };
+  
+  const handleResize = () => {
+    chartInstance?.resize();
+  };
+  
+  onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+  });
+  
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', handleResize);
+    chartInstance?.dispose();
+  });
+  
+  watch(
+    () => props.options,
+    (newOptions) => {
+      chartInstance?.setOption(newOptions);
+    },
+    { deep: true }
+  );
+  </script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/components/icon/AppIcon.vue b/admin-ui/vue/apps/web-antd/src/components/icon/AppIcon.vue
new file mode 100644
index 0000000..d9df438
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/icon/AppIcon.vue
@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="flex items-center justify-center"
+    :style="sizeStyle"
+  >
+    <!-- 如果找到图标，渲染其SVG -->
+    <span
+      v-if="iconSvg"
+      class="app-icon icon"
+      :style="{
+        display: 'inline-block',
+        width: '100%',
+        aspectRatio: '1 / 1', // 保持1:1比例
+        color: color,
+        ...bodyStyle
+      }"
+      v-html="iconSvg"
+    ></span>
+    <!-- 如果未找到图标，显示一个占位符或空 -->
+    <span
+      v-else
+      class="app-icon-placeholder icon"
+      :style="{
+        display: 'inline-block',
+        width: '100%',
+        aspectRatio: '1 / 1', // 保持1:1比例
+        lineHeight: '1',
+        textAlign: 'center',
+        color: '#ccc',
+        fontSize: '0.6em'
+      }"
+    >?</span>
+  </div>
+</template>
+
+<script setup lang='ts' name=''>
+import { iconManager } from '#/utils/IconManagers';
+import { computed } from 'vue';
+
+interface Props {
+  /** 图标名称 (如: 'icon_power') */
+  icon: string;
+  /** 图标大小 (支持数字或带单位字符串) */
+  size?: number | string;
+  /** 图标颜色 */
+  color?: string;
+  /** 自定义内联样式 */
+  bodyStyle?: Record<string, any>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'currentColor',
+  bodyStyle: () => ({}),
+});
+
+const iconSvg = computed(() => {
+  const icon = iconManager.getIconByKey(props.icon);
+  return icon ? icon.svg : null;
+});
+
+// 计算 size 样式
+const sizeStyle = computed(() => {
+  if (!props.size) return {};
+
+  // 如果是数字，添加 px 单位
+  if (typeof props.size === 'number') {
+    return {
+      width: `${props.size}px`,
+      height: `${props.size}px`
+    };
+  }
+
+  // 如果是字符串，直接使用
+  return {
+    width: props.size,
+    height: props.size
+  };
+});
+</script>
+
+<style scoped>
+.app-icon {
+  /* 确保SVG能继承父级颜色 */
+  fill: currentColor;
+  stroke: currentColor;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/icon/IconSelect.vue b/admin-ui/vue/apps/web-antd/src/components/icon/IconSelect.vue
new file mode 100644
index 0000000..ec9afe0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/icon/IconSelect.vue
@@ -0,0 +1,77 @@
+<template>
+  <Popover :autoAdjustOverflow="true" v-model:open="visible" trigger="click" :arrow="false">
+    <template #content>
+      <div class="flex flex-col gap-4 w-[310px]">
+        <div>
+          <Input v-model:value="filter" placeholder="请输入图标名称" @change="getIconList(pages.page)" />
+        </div>
+        <div class="grid grid-cols-6 gap-y-4 gap-x-8 justify-items-center">
+          <template v-for="value in iconList" :key="value.key">
+            <Tooltip :title="value.key">
+              <AppIcon class="cursor-pointer size-4" :icon="value.key"
+                :style="{ color: model === value.key ? '#409eff' : '' }" @click="clickIcon(value.key)" />
+            </Tooltip>
+          </template>
+        </div>
+        <div class="w-full flex items-center justify-center">
+          <Pagination :current="pages.page" :defaultPageSize="pages.pageSize" :total="pages.total" size="small"
+            :showSizeChanger="false" @change="getIconList" />
+        </div>
+      </div>
+    </template>
+    <!-- 触发 popover 的输入框 -->
+    <Input :value="modelValue" @update:value="$emit('update:modelValue', $event)"> <template #suffix>
+      <AppIcon :icon="modelValue || ''" class="size-4"></AppIcon>
+    </template>
+    </Input>
+  </Popover>
+</template>
+
+<script setup lang='ts'>
+import AppIcon from './AppIcon.vue';
+import { iconManager, type Icon } from '#/utils/IconManagers';
+import { Popover, Input, Pagination, Tooltip } from 'ant-design-vue';
+import { ref, watch } from 'vue';
+const visible = ref<boolean>(false);
+const props = defineProps<{
+  modelValue?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>()
+/** 内部输入框绑定值 */
+const model = ref('');
+// 同步外部 modelValue 到内部 model
+watch(() => props.modelValue, newVal => {
+  model.value = newVal || '';
+});
+
+/** 分页配置 */
+const pages = ref({
+  total: 0,
+  page: 1,
+  pageSize: 36
+});
+/** 筛选 */
+const filter = ref('');
+
+/** 图标列表 */
+const iconList = ref<Icon[]>([]);
+/** 获取图标列表 */
+function getIconList(page = 1) {
+  const res = iconManager.getIconsByPage(page, pages.value.pageSize, filter.value);
+  iconList.value = res.icons;
+  pages.value.total = res.total;
+  pages.value.page = res.page;
+}
+
+getIconList();
+
+/** 点击图标 */
+function clickIcon(key: string) {
+  visible.value = false;
+  emit('update:modelValue', key); // 通知父组件更新 v-model 绑定的值
+}
+</script>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/imgManage/ImgManage.vue b/admin-ui/vue/apps/web-antd/src/components/imgManage/ImgManage.vue
new file mode 100644
index 0000000..2da4a19
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/imgManage/ImgManage.vue
@@ -0,0 +1,465 @@
+<template>
+  <VModal title="选择图片" class="h-[80%] w-[60%]" centered>
+    <div class="w-full h-full flex flex-col gap-3">
+      <div class="w-full h-full flex-1 flex flex-col gap-3">
+        <!-- 操作栏 -->
+        <div class="flex justify-between items-center pb-3 border-b border-solid">
+          <Space>
+            <Button type="primary" @click="() => { createFolderFlag = true; createFolderForm.name = '' }">新建文件夹</Button>
+            <Button type="primary" @click="() => { uploadFlag = true; fileList = [] }">上传图片</Button>
+            <Button @click="refreshData">刷新</Button>
+          </Space>
+          <Space size="large">
+            <!-- <div>
+              已用容量:
+              <span class="text-red-500">{{ "1000MB" }}</span>
+            </div>
+            <div>
+              剩余容量:
+              <span class="text-green-500">{{ "1000MB" }}</span>
+            </div> -->
+            <InputSearch v-model:value="searchValue" placeholder="搜索图片" style="width: 200px"></InputSearch>
+            <Select v-model:value="viewMode" style="width: 120px">
+              <Select.Option value="grid">网格视图</Select.Option>
+              <Select.Option value="list">列表视图</Select.Option>
+            </Select>
+            <Popconfirm title="你确定要删除吗？" :disabled="selectedRowKeys.length <= 0" @confirm="deleteItem(selectedRowKeys)">
+              <Button type="primary" danger :disabled="selectedRowKeys.length <= 0">
+                批量删除
+              </Button>
+            </Popconfirm>
+          </Space>
+        </div>
+        <!-- 面包屑 -->
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <a @click="navigateToFolder({ displayName: '根目录', galleryId: 0 }, 'backward')">根目录</a>
+          </BreadcrumbItem>
+          <BreadcrumbItem v-for="folder in breadcrumbPath" :key="folder.galleryId">
+            <a @click="navigateToFolder(folder, 'backward')">{{ folder.displayName }}</a>
+          </BreadcrumbItem>
+        </Breadcrumb>
+        <!-- 文件夹 -->
+        <div class="min-h-[400px]">
+          <!-- 网格视图 -->
+          <div v-if="viewMode == 'grid'" class="grid gap-4 grid-cols-[repeat(auto-fill_minmax(200px, 1fr))]"
+            :style="{ gridTemplateColumns: 'repeat(auto-fill,minmax(200px, 1fr))' }">
+            <!-- 文件夹 -->
+            <div v-for="folder in currentFolders" :key="folder.galleryId" @click="navigateToFolder(folder, 'forward')"
+              @contextmenu="showContextMenu($event, 'folder', folder)" :style="{ transition: 'all 0.3s' }"
+              class="grid-item h-[200px] border-[1px] border-solid border-slate-500 rounded-md p-4 cursor-pointer relative">
+              <div class="flex flex-col justify-center  items-center gap-2 h-full">
+                <AppIcon :size="66" class="text-blue-400" icon="FolderOutlined"></AppIcon>
+                <div class="font-bold break-all overflow-hidden text-ellipsis">
+                  <Tooltip autoAdjustOverflow :mouseEnterDelay="1">
+                    <template #title>
+                      <div>{{ folder.displayName }}</div>
+                    </template>
+                    {{ folder.displayName }}
+                  </Tooltip>
+                </div>
+                <div class="text-sm text-slate-500">{{ folder.imageCount }} 张图片</div>
+              </div>
+            </div>
+            <!-- 图片 -->
+            <div v-for="image in currentImages" :key="image.galleryId" :style="{ transition: 'all 0.3s' }"
+              class="grid-item  h-[200px] border-[1px] border-solid border-slate-500 rounded-md p-4 cursor-pointer relative"
+              :class="{ 'selected': selectedImage == image.galleryId }" @click="imageSelection(image)"
+              @contextmenu="showContextMenu($event, 'image', image)">
+              <div class="flex flex-col justify-center items-center gap-2 h-full">
+                <img :src="image.filePath" :alt="image.name" class="flex-1 min-h-0 rounded-sm object-cover"></img>
+                <div class="font-bold break-all overflow-hidden text-ellipsis">{{ image.displayName }}</div>
+                <div class="text-sm text-slate-500">{{ formatFileSize(image.fileSize) }}</div>
+                <div v-if="selectedImage == image.galleryId"
+                  class="absolute top-2 right-2 bg-blue-500 text-blue-300 rounded-full w-6 h-6 flex items-center justify-center">
+                  <AppIcon :size="16" icon="CheckCircle"></AppIcon>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 列表视图 -->
+          <Table v-else :columns="columns" :data-source="allItems" :pagination="false" rowKey="galleryId"
+            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: (sk) => { selectedRowKeys = sk } }">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'preview'">
+                <img v-if="record.type === 'image'" :src="record.filePath" class="w-10 h-10 object-cover rounded-sm" />
+                <AppIcon v-else :size="40" class="text-blue-400" icon="FolderOutlined"></AppIcon>
+              </template>
+              <template v-if="column.key === 'displayName'">
+                <a @click="record.type === 'folder' ? navigateToFolder(record, 'forward') : imageSelection(record)">
+                  {{ record.displayName }}
+                </a>
+              </template>
+              <template v-if="column.key === 'fileSize'">
+                {{ record.type === 'image' ? formatFileSize(record.fileSize) : '-' }}
+              </template>
+              <template v-if="column.key === 'actions'">
+                <Space>
+                  <Button size="small" @click="openEdit(record)">重命名</Button>
+                  <Popconfirm title="你确定要删除吗？" @confirm="deleteItem([record.galleryId])">
+                    <Button size="small" danger>删除</Button>
+                  </Popconfirm>
+                </Space>
+              </template>
+            </template>
+          </Table>
+        </div>
+      </div>
+    </div>
+  </VModal>
+
+  <!-- 新建文件夹模态框 -->
+  <Modal v-model:open="createFolderFlag" title="新建文件夹" @cancel="createFolderFlag = false" @ok="createFolder">
+    <Form :model="createFolderForm" layout="vertical">
+      <FormItem label="文件夹名称" required>
+        <Input v-model:value="createFolderForm.name" placeholder="请输入文件夹名称" />
+      </FormItem>
+    </Form>
+  </Modal>
+  <!-- 重命名模态框 -->
+  <Modal v-model:open="editFlag" title="重命名" @cancel="editFlag = false" @ok="editItem">
+    <Form :model="editForm" layout="vertical">
+      <FormItem label="文件夹名称" required>
+        <Input v-model:value="editForm.name" placeholder="请输入文件夹名称" />
+      </FormItem>
+    </Form>
+  </Modal>
+  <!-- 上传图片模态框 -->
+  <Modal v-model:open="uploadFlag" title="上传图片" @cancel="uploadFlag = false" @ok="uploadImages">
+    <UploadDragger v-model:file-list="fileList" :before-upload="beforeUpload" :multiple="true" accept="image/*"
+      :show-upload-list="true">
+      <p class="ant-upload-drag-icon flex item-center justify-center">
+        <AppIcon class="text-neutral-500 dark:text-neutral-600" :size="66" icon="FolderOpenOutlined"></AppIcon>
+      </p>
+      <p class="ant-upload-text">点击或拖拽图片到此区域上传</p>
+      <p class="ant-upload-hint">支持单个或批量上传，支持常见图片格式</p>
+    </UploadDragger>
+  </Modal>
+
+  <!-- 右键菜单 -->
+  <Dropdown>
+
+  </Dropdown>
+</template>
+
+<script setup lang='ts' name=''>
+import AppIcon from '../icon/AppIcon.vue';
+import {
+  Modal, Form, FormItem, Input, UploadDragger, Tooltip, Dropdown, Table,
+  Button, Space, InputSearch, Select, Breadcrumb, BreadcrumbItem, message, Popconfirm
+} from 'ant-design-vue';
+import { useVbenModal } from '@vben/common-ui'
+import { computed, ref } from 'vue';
+import { List, Create, Rename, Upload, Delete } from '#/api/utils';
+const emit = defineEmits(['confirm'])
+const { fileType, filePath } = defineProps({
+  fileType: {
+    type: Number,
+    default: 1
+  },
+  filePath: {
+    type: String,
+    default: ''
+  }
+})
+
+/** 视图模式 */
+const viewMode = ref<'list' | 'grid'>('list');
+/** 搜索条件 */
+const searchValue = ref('');
+
+/** 当前文件ID */
+const currentFolderId = ref<number>(0)
+/** 选中的对象 */
+const selectItems = ref<any>()
+/** 选中的图片 */
+const selectedImage = ref<any>()
+/** 列表模式选中内容 */
+const selectedRowKeys = ref<any>([])
+
+/** 文件夹列表 */
+const foldersList = ref<any>([])
+/** 图片列表 */
+const imageList = ref<any>([])
+/** 面包屑列表 */
+const breadcrumbPath = ref<any>([])
+
+/** 当前路径文件夹列表 */
+const currentFolders = computed(() => {
+  return foldersList.value.filter((folder: any) => folder.parentId === currentFolderId.value && folder.displayName.toLowerCase().includes(searchValue.value.toLowerCase()))
+})
+/** 当前路径图片列表 */
+const currentImages = computed(() => {
+  return imageList.value.filter((image: any) => image.parentId === currentFolderId.value && image.displayName.toLowerCase().includes(searchValue.value.toLowerCase()))
+})
+/** 所有文件列表 */
+const allItems = computed(() => {
+  const items = [
+    ...currentFolders.value.map((f: any) => ({ ...f, type: 'folder' })),
+    ...currentImages.value.map((i: any) => ({ ...i, type: 'image' }))
+  ]
+  return items
+})
+
+/** 表格列配置 */
+const columns = [
+  { title: '预览', key: 'preview', width: 80 },
+  { title: '名称', key: 'displayName', dataIndex: 'displayName' },
+  { title: '大小', key: 'fileSize', dataIndex: 'fileSize' },
+  { title: '上传时间', key: 'createdAt', dataIndex: 'createdAt' },
+  { title: '操作', key: 'actions', width: 120 }
+]
+
+/** 核心模态框实例 */
+const [VModal, modalApi] = useVbenModal({
+  confirmText: '确定选择',
+  onConfirm: () => {
+    // 列表模式
+    if (viewMode.value === 'list') {
+      // 单选
+      if (selectedRowKeys.value.length === 1) {
+        // 过滤图片
+        const selected = imageList.value.find((item: any) => item.galleryId === selectedRowKeys.value[0])
+        if (selected == undefined) {
+          message.error('请选择一张图片')
+          return
+        } else {
+          emit('confirm', selected.filePath)
+          modalApi.close()
+          return
+        }
+      } else {
+        message.error('请选择一张图片')
+        return
+      }
+    } else {
+      if (selectedImage.value != null) {
+        const selected = imageList.value.find((item: any) => item.galleryId === selectedImage.value)
+        emit('confirm', selected.filePath)
+        modalApi.close()
+        return
+      } else {
+        message.error('请选择一张图片')
+        return
+      }
+    }
+  }
+});
+
+
+// ========== API ==========
+/** 获取文件夹列表 */
+async function getFolders() {
+  const res = await List({
+    parentId: currentFolderId.value == null ? 0 : currentFolderId.value,
+    type: 'folder'
+  })
+  foldersList.value = res.list
+}
+/** 获取图片列表 */
+async function getImages() {
+  const res = await List({
+    parentId: currentFolderId.value == null ? 0 : currentFolderId.value,
+    type: 'image'
+  })
+  imageList.value = res.list
+}
+/** 刷新数据 */
+async function refreshData() {
+  await getFolders()
+  await getImages()
+}
+refreshData()
+
+
+// ========== 方法 ==========
+/** 切换文件夹 */
+function navigateToFolder(folder: Record<string, any>, direction: 'forward' | 'backward') {
+  // 判断是否是返回
+  if (direction === 'backward') {
+    // 找到返回的目录
+    const find = breadcrumbPath.value.find((path: any) => path.galleryId === folder.galleryId)
+    if (find) {
+      // 存在,截取路径
+      breadcrumbPath.value = breadcrumbPath.value.slice(0, breadcrumbPath.value.indexOf(find) + 1)
+    } else {
+      // 不存在,返回上一级
+      breadcrumbPath.value = breadcrumbPath.value.slice(0, breadcrumbPath.value.length - 1)
+    }
+    // 如果是根目录,则清空路径
+    if (folder.galleryId === 0) {
+      breadcrumbPath.value = []
+    }
+  } else {
+    // 将最新目录加入路径
+    breadcrumbPath.value.push({
+      galleryId: folder.galleryId,
+      displayName: folder.displayName
+    })
+  }
+  // 设置激活的文件夹
+  currentFolderId.value = folder.galleryId
+  refreshData()
+}
+
+/** 图片选择 */
+function imageSelection(image: any) {
+  if (selectedImage.value == image.galleryId) {
+    selectedImage.value = null
+  } else {
+    selectedImage.value = image.galleryId
+  }
+}
+
+/** 格式化文件大小 */
+function formatFileSize(bytes: number) {
+  if (!bytes) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+
+// ========== 新建文件夹 ==========
+/** 模态框flag */
+const createFolderFlag = ref(false)
+/** 新建文件夹表单数据 */
+const createFolderForm = ref({
+  name: '',
+})
+/** 新建文件夹提交函数 */
+async function createFolder() {
+  // 验证
+  if (!createFolderForm.value.name.trim()) {
+    message.error('请输入文件夹名称')
+    return
+  }
+  // 请求
+  const res = await Create({
+    parentId: currentFolderId.value,
+    displayName: createFolderForm.value.name.trim(),
+  })
+  if (res) {
+    createFolderFlag.value = false
+    message.success('文件夹创建成功')
+    refreshData()
+  }
+}
+
+
+// ========== 编辑/重命名 ==========
+const editFlag = ref(false)
+const editForm = ref({
+  name: '',
+})
+function openEdit(item: any) {
+  editFlag.value = true
+
+  selectItems.value = item
+  editForm.value = {
+    name: item.displayName,
+  }
+}
+async function editItem() {
+  // 验证
+  if (!editForm.value.name.trim()) {
+    message.error('请输入名称')
+    return
+  }
+  // 请求
+  const res = await Rename({
+    galleryId: selectItems.value.galleryId,
+    displayName: editForm.value.name.trim(),
+  })
+  if (JSON.stringify(res) === '{}') {
+    message.success('重命名成功')
+    editFlag.value = false
+    selectItems.value = null
+    editForm.value = { name: '' }
+    refreshData()
+  }
+}
+
+
+// ========== 删除 ==========
+async function deleteItem(items: any) {
+  await Delete({
+    galleryIds: [...items],
+  })
+  selectedRowKeys.value = []
+  message.success('删除成功')
+  refreshData()
+}
+
+
+// ========== 上传图片 ==========
+/** 模态框flag */
+const uploadFlag = ref(false)
+/** 上传图片列表 */
+const fileList = ref<any>([])
+
+/** 上传检查函数 */
+function beforeUpload(file: any) {
+  const isImage = file.type.startsWith('image/')
+  if (!isImage) {
+    message.error('请上传图片')
+    return false
+  }
+  const isLt10M = file.size / 1024 / 1024 < 10
+  if (!isLt10M) {
+    message.error('图片大小不能超过10M')
+    return false
+  }
+  // 阻止自动上传
+  return false
+}
+
+/** 上传函数 */
+async function uploadImages() {
+  if (fileList.value == 0) {
+    message.error('请选择图片')
+    return
+  }
+  // 处理图片数据
+  fileList.value.forEach(async (fileItem: any) => {
+    const file = fileItem.originFileObj || fileItem
+    if (!file || !(file instanceof File)) {
+      message.error('无效的文件对象')
+      return
+    }
+    // 上传
+    await Upload({
+      parentId: currentFolderId.value,
+      file,
+      newFileType: fileType,
+      ...(filePath ? { subDirName: filePath } : {})
+    })
+    refreshData()
+  });
+  uploadFlag.value = false
+  message.success(`成功上传 ${fileList.value.length} 张图片`)
+}
+
+// ========== 右键菜单 ==========
+function showContextMenu(event: any, type: any, item: any) {
+  event.preventDefault()
+}
+
+
+</script>
+
+<style scoped lang="scss">
+/** 悬浮 */
+.grid-item:hover {
+  border-color: #1890ff;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
+  transform: translateY(-2px);
+}
+
+/** 选中 */
+.grid-item.selected {
+  border-color: #1890ff;
+  background: #b9b9b955;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/imgManage/types.d.ts b/admin-ui/vue/apps/web-antd/src/components/imgManage/types.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/admin-ui/vue/apps/web-antd/src/components/selectDivision/index.vue b/admin-ui/vue/apps/web-antd/src/components/selectDivision/index.vue
new file mode 100644
index 0000000..9ff81eb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/selectDivision/index.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts" name="">
+import type { CascaderProps } from 'ant-design-vue';
+
+import { onBeforeMount, ref, watch } from 'vue';
+
+import { Cascader } from 'ant-design-vue';
+
+import { List } from '#/api/iotlcm/zAnother/tDivisionCode';
+
+/** ====================  常量  ==================== */
+const props = withDefaults(
+  defineProps<{
+    /** 标签显示范围 */
+    disabled?: boolean;
+    labelShowRange?: 'all' | 'last';
+    /** 最大选择层级 1省 2市 3区 4街道 5社区 */
+    maxLevel?: number;
+    /** 提示文本 */
+    placeholder?: string;
+    /** 起始值 */
+    startRegionCode?: string;
+  }>(),
+  {
+    disabled: false,
+    labelShowRange: 'all',
+    maxLevel: 5,
+    placeholder: '请选择所属区域',
+    startRegionCode: '',
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'change', value: string): void;
+}>();
+
+/** 自定义显示渲染 */
+const displayRender: CascaderProps['displayRender'] = ({ labels }) => {
+  return props.labelShowRange === 'last' && labels.length > 0
+    ? labels[labels.length - 1]
+    : labels.join(' / ');
+};
+
+/** ====================  数据  ==================== */
+const modelValue = defineModel<any>();
+
+// 选中值
+const select = ref<string[]>([]);
+// 回显flag
+const reloadFlag = ref(true);
+// 使用选项
+const useOptions = ref<CascaderProps['options']>([]);
+
+/** ====================  方法  ==================== */
+/** 获取指定区域下的选项 */
+async function getOptions(data: any) {
+  if (data === '') {
+    data = '000000000000';
+  }
+  try {
+    const res = await List({ regionParent: data });
+    const list = res.items.map((item: any) => {
+      return {
+        label: item.regionName,
+        value: item.regionCode,
+        isLeaf: item.regionLevel >= props.maxLevel,
+      };
+    });
+    return list;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}
+
+/** 加载下一级数据 */
+async function loadData(data: any) {
+  const active = data[data.length - 1];
+  const res = await getOptions(active.value);
+  active.children = res;
+}
+
+/** 将区域代码拆分成层级路径 */
+function getRegionPath(regionCode: string): string[] {
+  if (!regionCode) return [];
+  const path: string[] = [];
+  const fullCode = regionCode.padEnd(12, '0');
+  path.push(fullCode.slice(0, 2).padEnd(12, '0'));
+  if (props.maxLevel >= 2 && fullCode.slice(2, 4) !== '00') {
+    path.push(fullCode.slice(0, 4).padEnd(12, '0'));
+    if (props.maxLevel >= 3 && fullCode.slice(4, 6) !== '00') {
+      path.push(fullCode.slice(0, 6).padEnd(12, '0'));
+      if (props.maxLevel >= 4 && fullCode.slice(6, 9) !== '000') {
+        path.push(fullCode.slice(0, 9).padEnd(12, '0'));
+        if (props.maxLevel >= 5 && fullCode.slice(9, 12) !== '000') {
+          path.push(fullCode.slice(0, 12).padEnd(12, '0'));
+        }
+      }
+    }
+  }
+  return path;
+}
+
+/** 回显数据 - 递归加载完整路径的选项 */
+async function preloadRegionPath(
+  path: string[],
+  nowIndex = 0,
+  activeList: any[] = [],
+) {
+  if (nowIndex >= path.length - 1) {
+    return;
+  }
+  const currentCode = path[nowIndex];
+  const father = activeList.find((item: any) => item.value === currentCode);
+  if (!father) {
+    console.warn(`未找到 ${currentCode} 的父级数据`);
+    return;
+  }
+  // 加载下一级数据
+  const children = await getOptions(currentCode);
+  father.children = children;
+  // 递归加载下一级
+  await preloadRegionPath(path, nowIndex + 1, children);
+}
+
+/** ====================  周期  ==================== */
+onBeforeMount(async () => {
+  // 加载默认数据
+  const res = await getOptions(props.startRegionCode);
+  const options = ref(res);
+  useOptions.value = options.value;
+});
+
+watch(
+  () => select.value,
+  () => {
+    if (select.value && select.value.length > 0) {
+      reloadFlag.value = false;
+      modelValue.value = select.value[select.value.length - 1];
+    } else {
+      modelValue.value = undefined;
+    }
+  },
+  {
+    deep: true,
+  },
+);
+
+watch(
+  () => modelValue.value,
+  (newVal) => {
+    if (newVal === undefined) {
+      select.value = [];
+    } else {
+      if (modelValue.value) {
+        const path = getRegionPath(modelValue.value);
+        select.value = path;
+        preloadRegionPath(path, 0, useOptions.value);
+      }
+      emit('change', newVal);
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <div class="w-full overflow-hidden">
+    <Cascader
+      :placeholder="placeholder"
+      v-model:value="select"
+      :disabled="disabled"
+      :options="useOptions"
+      :load-data="loadData"
+      :display-render="displayRender"
+      change-on-select
+      expand-trigger="hover"
+      class="w-full"
+      @clear="select = []"
+    />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/tinymce/index.ts b/admin-ui/vue/apps/web-antd/src/components/tinymce/index.ts
new file mode 100644
index 0000000..6fe8074
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/tinymce/index.ts
@@ -0,0 +1 @@
+export { default as Tinymce } from './src/editor.vue';
diff --git a/admin-ui/vue/apps/web-antd/src/components/tinymce/src/editor.vue b/admin-ui/vue/apps/web-antd/src/components/tinymce/src/editor.vue
new file mode 100644
index 0000000..f112bca
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/tinymce/src/editor.vue
@@ -0,0 +1,384 @@
+<script lang="ts" setup>
+import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes';
+import type { Editor as EditorType } from 'tinymce/tinymce';
+
+import type { PropType } from 'vue';
+
+import type { UploadResult } from '../../../api/core/upload';
+
+import {
+  computed,
+  nextTick,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  onMounted,
+  ref,
+  unref,
+  useAttrs,
+  watch,
+} from 'vue';
+
+import { preferences, usePreferences } from '@vben/preferences';
+import { buildShortUUID } from '@vben/utils';
+
+import Editor from '@tinymce/tinymce-vue';
+import { isNumber } from 'lodash-es';
+
+import { uploadApi } from '../../../api/core/upload';
+
+import { bindHandlers } from './helper';
+import ImgUpload from './img-upload.vue';
+import {
+  plugins as defaultPlugins,
+  toolbar as defaultToolbar,
+} from './tinymce';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  height: {
+    default: 400,
+    required: false,
+    type: [Number, String] as PropType<number | string>,
+  },
+  options: {
+    default: () => ({}),
+    // eslint-disable-next-line no-use-before-define
+    type: Object as PropType<Partial<InitOptions>>,
+  },
+
+  plugins: {
+    default: defaultPlugins,
+    type: String,
+  },
+  showImageUpload: {
+    default: true,
+    type: Boolean,
+  },
+  toolbar: {
+    default: defaultToolbar,
+    type: String,
+  },
+  width: {
+    default: 'auto',
+    required: false,
+    type: [Number, String] as PropType<number | string>,
+  },
+});
+
+const emit = defineEmits(['change']);
+
+type InitOptions = IPropTypes['init'];
+
+/**
+ * 外部使用 v-model 绑定值
+ */
+const modelValue = defineModel('modelValue', { default: '', type: String });
+/**
+ * https://www.jianshu.com/p/59a9c3802443
+ * 使用自托管方案（本地）代替cdn  没有key的限制
+ * 注意publicPath要以/结尾
+ */
+const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
+
+const attrs = useAttrs();
+const editorRef = ref<EditorType>();
+const fullscreen = ref(false);
+const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
+const elRef = ref<HTMLElement | null>(null);
+
+const containerWidth = computed(() => {
+  const width = props.width;
+  if (isNumber(width)) {
+    return `${width}px`;
+  }
+  return width;
+});
+
+const { isDark } = usePreferences();
+const skinName = computed(() => {
+  return isDark.value ? 'oxide-dark' : 'oxide';
+});
+
+const contentCss = computed(() => {
+  return isDark.value ? 'dark' : 'default';
+});
+
+/**
+ * 通过v-if来挂载/卸载组件
+ * 来完成主题切换/语言切换
+ */
+const init = ref(true);
+watch(
+  () => [preferences.theme.mode, preferences.app.locale],
+  () => {
+    if (!editorRef.value) {
+      return;
+    }
+    destroy();
+    init.value = false;
+    // 放在下一次tick来切换
+    // 需要先加载组件 也就是v-if为true  然后需要拿到editorRef 必须放在setTimeout(相当于onMounted)
+    nextTick(() => {
+      init.value = true;
+      setTimeout(() => {
+        setEditorMode();
+      });
+    });
+  },
+);
+
+/**
+ * tinymce支持 en zh_CN
+ */
+const langName = computed(() => {
+  const lang = preferences.app.locale.replace('-', '_');
+  if (lang.includes('en_US')) {
+    return 'en';
+  }
+  return 'zh_CN';
+});
+
+const initOptions = computed((): InitOptions => {
+  const { height, options, plugins, toolbar } = props;
+  return {
+    auto_focus: true,
+    branding: false, // 显示右下角的'使用 TinyMCE 构建'
+    content_css: contentCss.value,
+    content_style:
+      'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
+    contextmenu: 'link image table',
+    default_link_target: '_blank',
+    height,
+    image_advtab: true, // 图片高级选项
+    image_caption: true,
+    importcss_append: true,
+    language: langName.value,
+    link_title: false,
+    menubar: 'file edit view insert format tools table help',
+    noneditable_class: 'mceNonEditable',
+    /**
+     * 允许粘贴图片 默认base64格式
+     * images_upload_handler启用时为上传
+     */
+    paste_data_images: true,
+    plugins,
+    quickbars_selection_toolbar:
+      'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
+    skin: skinName.value,
+    toolbar,
+    toolbar_mode: 'sliding',
+    ...options,
+    /**
+     * 覆盖默认的base64行为
+     * @param blobInfo
+     * 大坑 不要调用这两个函数  success failure:
+     * 使用resolve/reject代替
+     */
+    images_upload_handler: (blobInfo: any) => {
+      return new Promise((resolve, reject) => {
+        const file = blobInfo.blob();
+        // const filename = blobInfo.filename();
+        uploadApi(file)
+          .then((response: any) => {
+            const { url } = response as unknown as UploadResult;
+            console.log('tinymce上传图片:', url);
+            resolve(url);
+          })
+          .catch((error: any) => {
+            console.error('tinymce上传图片失败:', error);
+            reject(error.message);
+          });
+      });
+    },
+    setup: (editor: any) => {
+      editorRef.value = editor;
+      editor.on('init', (e: any) => initSetup(e));
+    },
+  };
+});
+
+/**
+ * 监听options.readonly
+ */
+watch(
+  () => props.options,
+  (options) => {
+    const getDisabled = options && Reflect.get(options, 'readonly');
+    const editor = unref(editorRef);
+    if (editor) {
+      editor.mode.set(getDisabled ? 'readonly' : 'design');
+    }
+  },
+);
+
+onMounted(() => {
+  if (!initOptions.value.inline) {
+    tinymceId.value = buildShortUUID('tiny-vue');
+  }
+  nextTick(() => {
+    setTimeout(() => {
+      initEditor();
+      setEditorMode();
+    }, 30);
+  });
+});
+
+onBeforeUnmount(() => {
+  destroy();
+});
+
+onDeactivated(() => {
+  destroy();
+});
+
+onActivated(() => {
+  setEditorMode();
+});
+
+function setEditorMode() {
+  const editor = unref(editorRef);
+  if (editor) {
+    const mode = props.options.readonly ? 'readonly' : 'design';
+    editor.mode.set(mode);
+  }
+}
+
+function destroy() {
+  const editor = unref(editorRef);
+  editor?.destroy();
+}
+
+function initEditor() {
+  const el = unref(elRef);
+  if (el) {
+    el.style.visibility = '';
+  }
+}
+
+function initSetup(e: any) {
+  const editor = unref(editorRef);
+  if (!editor) {
+    return;
+  }
+  const value = modelValue.value || '';
+
+  editor.setContent(value);
+  bindModelHandlers(editor);
+  bindHandlers(e, attrs, unref(editorRef));
+}
+
+function setValue(editor: Record<string, any>, val?: string, prevVal?: string) {
+  if (
+    editor &&
+    typeof val === 'string' &&
+    val !== prevVal &&
+    val !== editor.getContent({ format: attrs.outputFormat })
+  ) {
+    editor.setContent(val);
+  }
+}
+
+function bindModelHandlers(editor: any) {
+  const modelEvents = attrs.modelEvents ?? null;
+  const normalizedEvents = Array.isArray(modelEvents)
+    ? modelEvents.join(' ')
+    : modelEvents;
+
+  watch(
+    () => modelValue.value,
+    (val, prevVal) => {
+      setValue(editor, val, prevVal);
+    },
+  );
+
+  editor.on(normalizedEvents || 'change keyup undo redo', () => {
+    const content = editor.getContent({ format: attrs.outputFormat });
+    emit('change', content);
+  });
+
+  editor.on('FullscreenStateChanged', (e: any) => {
+    fullscreen.value = e.state;
+  });
+}
+
+const disabled = computed(() => props.options.readonly ?? false);
+
+function getUploadingImgName(name: string) {
+  return `[uploading:${name}]`;
+}
+
+function handleImageUploading(name: string) {
+  const editor = unref(editorRef);
+  if (!editor) {
+    return;
+  }
+  editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
+  const content = editor?.getContent() ?? '';
+  setValue(editor, content);
+}
+
+function handleDone(name: string, url: string) {
+  const editor = unref(editorRef);
+  if (!editor) {
+    return;
+  }
+  const content = editor?.getContent() ?? '';
+  const val =
+    content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
+  setValue(editor, val);
+}
+</script>
+
+<template>
+  <div :style="{ width: containerWidth }" class="app-tinymce">
+    <ImgUpload
+      v-if="showImageUpload"
+      v-show="editorRef"
+      :disabled="disabled"
+      :fullscreen="fullscreen"
+      @done="handleDone"
+      @uploading="handleImageUploading"
+    />
+    <Editor
+      v-if="!initOptions.inline && init"
+      v-model="modelValue"
+      :init="initOptions"
+      :style="{ visibility: 'hidden', zIndex: 3000 }"
+      :tinymce-script-src="tinymceScriptSrc"
+      license-key="gpl"
+    />
+    <slot v-else></slot>
+  </div>
+</template>
+
+<style lang="scss">
+/***
+由于modal/drawer的zIndex升级后为2000
+这里会造成遮挡 修改为更高的zIndex
+*/
+.tox.tox-silver-sink.tox-tinymce-aux {
+  /** 该样式默认为1300的zIndex  */
+  z-index: 2025;
+}
+</style>
+
+<style lang="scss" scoped>
+/**
+  隐藏右上角upgrade按钮
+  */
+:deep(.tox-promotion) {
+  display: none !important;
+}
+
+.app-tinymce {
+  position: relative;
+  line-height: normal;
+
+  :deep(.textarea) {
+    z-index: -1;
+    visibility: hidden;
+  }
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/tinymce/src/helper.ts b/admin-ui/vue/apps/web-antd/src/components/tinymce/src/helper.ts
new file mode 100644
index 0000000..1f98dda
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/tinymce/src/helper.ts
@@ -0,0 +1,85 @@
+const validEvents = new Set([
+  'onActivate',
+  'onAddUndo',
+  'onBeforeAddUndo',
+  'onBeforeExecCommand',
+  'onBeforeGetContent',
+  'onBeforePaste',
+  'onBeforeRenderUI',
+  'onBeforeSetContent',
+  'onBlur',
+  'onChange',
+  'onClearUndos',
+  'onClick',
+  'onContextMenu',
+  'onCopy',
+  'onCut',
+  'onDblclick',
+  'onDeactivate',
+  'onDirty',
+  'onDrag',
+  'onDragDrop',
+  'onDragEnd',
+  'onDragGesture',
+  'onDragOver',
+  'onDrop',
+  'onExecCommand',
+  'onFocus',
+  'onFocusIn',
+  'onFocusOut',
+  'onGetContent',
+  'onHide',
+  'onInit',
+  'onKeyDown',
+  'onKeyPress',
+  'onKeyUp',
+  'onLoadContent',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
+  'onNodeChange',
+  'onObjectResized',
+  'onObjectResizeStart',
+  'onObjectSelected',
+  'onPaste',
+  'onPostProcess',
+  'onPostRender',
+  'onPreProcess',
+  'onProgressState',
+  'onRedo',
+  'onRemove',
+  'onReset',
+  'onSaveContent',
+  'onSelectionChange',
+  'onSetAttrib',
+  'onSetContent',
+  'onShow',
+  'onSubmit',
+  'onUndo',
+  'onVisualAid',
+]);
+
+const isValidKey = (key: string) => validEvents.has(key);
+
+export const bindHandlers = (
+  initEvent: Event,
+  listeners: any,
+  editor: any,
+): void => {
+  Object.keys(listeners)
+    .filter((element) => isValidKey(element))
+    .forEach((key: string) => {
+      const handler = listeners[key];
+      if (typeof handler === 'function') {
+        if (key === 'onInit') {
+          handler(initEvent, editor);
+        } else {
+          editor.on(key.slice(2), (e: any) => handler(e, editor));
+        }
+      }
+    });
+};
diff --git a/admin-ui/vue/apps/web-antd/src/components/tinymce/src/img-upload.vue b/admin-ui/vue/apps/web-antd/src/components/tinymce/src/img-upload.vue
new file mode 100644
index 0000000..1b8e8ef
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/tinymce/src/img-upload.vue
@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useAppConfig } from '@vben/hooks';
+import { useAccessStore } from '@vben/stores';
+
+import { message, Upload, Button } from 'ant-design-vue';
+
+defineOptions({ name: 'TinymceImageUpload' });
+
+const props = defineProps({
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  fullscreen: {
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['uploading', 'done', 'error']);
+
+let uploading = false;
+
+const { apiURL, clientId } = useAppConfig(
+  import.meta.env,
+  import.meta.env.PROD,
+);
+const accessStore = useAccessStore();
+const uploadUrl = `${apiURL}/resource/oss/upload`;
+// 使用upload组件只能这样上传
+const headers = {
+  Authorization: `Bearer ${accessStore.accessToken}`,
+  clientId,
+};
+
+const getButtonProps = computed(() => {
+  const { disabled } = props;
+  return {
+    disabled,
+  };
+});
+
+function handleChange(info: Record<string, any>) {
+  const file = info.file;
+  const status = file?.status;
+  // const url = file?.response?.data.url;
+  const name = file?.name;
+
+  switch (status) {
+    case 'done': {
+      // http 200会走到这里  需要再次判断
+      const { response } = file;
+      const { code, data, msg = '服务器错误' } = response;
+      if (code === 200) {
+        const { url } = data;
+        emit('done', name, url);
+      } else {
+        message.error(msg);
+      }
+      // emit('done', name, url);
+      uploading = false;
+
+      break;
+    }
+    case 'error': {
+      emit('error');
+      uploading = false;
+
+      break;
+    }
+    case 'uploading': {
+      if (!uploading) {
+        emit('uploading', name);
+        uploading = true;
+      }
+
+      break;
+    }
+    // No default
+  }
+}
+</script>
+<template>
+  <div :class="[{ fullscreen }]" class="tinymce-image-upload">
+    <Upload
+      :action="uploadUrl"
+      :headers="headers"
+      :show-upload-list="false"
+      accept=".jpg,.jpeg,.gif,.png,.webp"
+      multiple
+      name="file"
+      @change="handleChange"
+    >
+      <!-- 这里要改成i18n -->
+      <Button type="primary" v-bind="{ ...getButtonProps }">
+        图片上传
+      </Button>
+    </Upload>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tinymce-image-upload {
+  position: absolute;
+  top: 4px;
+  right: 10px;
+  z-index: 20;
+
+  &.fullscreen {
+    position: fixed;
+    z-index: 10000;
+  }
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/tinymce/src/tinymce.ts b/admin-ui/vue/apps/web-antd/src/components/tinymce/src/tinymce.ts
new file mode 100644
index 0000000..eb3964a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/tinymce/src/tinymce.ts
@@ -0,0 +1,11 @@
+// Any plugins you want to setting has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
+
+// quickbars 快捷栏
+export const plugins =
+  'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap emoticons accordion';
+
+export const toolbar =
+  'undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl';
diff --git a/admin-ui/vue/apps/web-antd/src/components/upload/index.ts b/admin-ui/vue/apps/web-antd/src/components/upload/index.ts
new file mode 100644
index 0000000..b86d495
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/upload/index.ts
@@ -0,0 +1,2 @@
+export { default as FileUpload } from './src/file-upload.vue';
+export { default as ImageUpload } from './src/image-upload.vue';
diff --git a/admin-ui/vue/apps/web-antd/src/components/upload/src/file-upload.vue b/admin-ui/vue/apps/web-antd/src/components/upload/src/file-upload.vue
new file mode 100644
index 0000000..8102892
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/upload/src/file-upload.vue
@@ -0,0 +1,298 @@
+<script lang="ts" setup>
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+
+import type { AxiosResponse } from '@vben/request';
+
+import type { AxiosProgressEvent } from '#/api';
+
+import { computed, h, ref, toRefs, watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { Inbox, UploadOutlined } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { Button, message, Upload, UploadDragger } from 'ant-design-vue';
+import { isArray, isFunction, isObject, isString } from 'lodash-es';
+
+import { uploadApi } from '#/api';
+
+import { checkFileType } from './helper';
+import { UploadResultStatus } from './typing';
+import { useUploadType } from './use-upload';
+
+defineOptions({ name: 'FileUpload', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 建议使用拓展名(不带.)
+     * 或者文件头 image/png等(测试判断不准确)  不支持image/*类似的写法
+     * 需自行改造 ./helper/checkFileType方法
+     */
+    accept?: string[];
+    accessCode?: string | string[];
+    api?: (
+      file: Blob | File,
+      onUploadProgress?: AxiosProgressEvent,
+      isDevice?: boolean,
+      newFileType?: number,
+      subDirName?: string,
+      params?: Record<string, any>,
+    ) => Promise<AxiosResponse<any>>;
+    disabled?: boolean;
+    helpText?: string;
+    // 最大数量的文件，Infinity不限制
+    maxNumber?: number;
+    // 文件最大多少MB
+    maxSize?: number;
+    // 是否支持多选
+    multiple?: boolean;
+    // 新文件类型 1:用户文件 2:用户图片 3:设备文件 4:iot配置图片 5:iot固件文件 6:项目图片 7:项目文件
+    newFileType?: number;
+    // 上传接口额外参数
+    params?: Record<string, any>;
+    // support xxx.xxx.xx
+    // 返回的字段 默认url
+    resultField?: 'fileName' | 'ossId' | 'url' | string;
+    /**
+     * 是否显示下面的描述
+     */
+    showDescription?: boolean;
+    // 展示模式：button为按钮上传，dragger为拖拽上传
+    showType?: 'button' | 'dragger';
+    value?: string[];
+  }>(),
+  {
+    value: () => [],
+    disabled: false,
+    helpText: '',
+    maxSize: 2,
+    maxNumber: 1,
+    accept: () => [],
+    multiple: false,
+    newFileType: 1,
+    params: () => ({}),
+    api: uploadApi,
+    resultField: '',
+    showDescription: true,
+    showType: 'button',
+  },
+);
+const emit = defineEmits(['change', 'update:value', 'delete']);
+const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+const { hasAccessByCodes } = useAccess();
+const isInnerOperate = ref<boolean>(false);
+const { getStringAccept } = useUploadType({
+  acceptRef: accept,
+  helpTextRef: helpText,
+  maxNumberRef: maxNumber,
+  maxSizeRef: maxSize,
+});
+
+const fileList = ref<UploadProps['fileList']>([]);
+const isLtMsg = ref<boolean>(true);
+const isActMsg = ref<boolean>(true);
+const isFirstRender = ref<boolean>(true);
+const canUpload = computed(() => {
+  const accessCodes = isArray(props.accessCode)
+    ? props.accessCode
+    : props.accessCode
+      ? [props.accessCode]
+      : [];
+  return accessCodes.length === 0 || hasAccessByCodes(accessCodes);
+});
+
+watch(
+  () => props.value,
+  (v) => {
+    if (isInnerOperate.value) {
+      isInnerOperate.value = false;
+      return;
+    }
+    let value: string[] = [];
+    if (v) {
+      if (isArray(v)) {
+        value = v;
+      } else {
+        value.push(v);
+      }
+      fileList.value = value.map((item, i) => {
+        if (item && isString(item)) {
+          return {
+            uid: `${-i}`,
+            name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+            status: 'done',
+            url: item,
+          };
+        } else if (item && isObject(item)) {
+          return item;
+        }
+        return null;
+      }) as UploadProps['fileList'];
+    }
+    if (!isFirstRender.value) {
+      emit('change', value);
+      isFirstRender.value = false;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+const handleRemove = async (file: UploadFile) => {
+  if (fileList.value) {
+    const index = fileList.value.findIndex((item) => item.uid === file.uid);
+    index !== -1 && fileList.value.splice(index, 1);
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+    emit('delete', file);
+  }
+};
+
+const beforeUpload = async (file: File) => {
+  const { maxSize, accept } = props;
+  const isAct = await checkFileType(file, accept);
+  if (!isAct) {
+    message.error($t('component.upload.acceptUpload', [accept]));
+    isActMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isActMsg.value = true), 1000);
+  }
+  const isLt = file.size / 1024 / 1024 > maxSize;
+  if (isLt) {
+    message.error($t('component.upload.maxSizeMultiple', [maxSize]));
+    isLtMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isLtMsg.value = true), 1000);
+  }
+  return (isAct && !isLt) || Upload.LIST_IGNORE;
+};
+
+async function customRequest(info: UploadRequestOption<any>) {
+  const { api, newFileType, params } = props;
+  if (!api || !isFunction(api)) {
+    console.warn('upload api must exist and be a function');
+    return;
+  }
+  try {
+    // 进度条事件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      info.onProgress!({ percent });
+    };
+    const res = await api?.(
+      info.file as File,
+      progressEvent,
+      undefined,
+      newFileType,
+      undefined,
+      params,
+    );
+    /**
+     * 由getValue处理 传对象过去
+     * 直接传string(id)会被转为Number
+     * 内部的逻辑由requestClient.upload处理 这里不用判断业务状态码 不符合会自动reject
+     */
+    info.onSuccess!(res);
+    message.success($t('component.upload.uploadSuccess'));
+    // 获取
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+  } catch (error: any) {
+    console.error(error);
+    info.onError!(error);
+  }
+}
+
+function getValue() {
+  const list = (fileList.value || [])
+    .filter((item) => item?.status === UploadResultStatus.DONE)
+    .map((item: any) => {
+      if (item?.response && props?.resultField) {
+        return item?.response?.[props.resultField];
+      }
+      // 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'}
+      if (item?.url) {
+        return item.url;
+      }
+      // 注意这里取的key为 url
+      return item?.response?.url;
+    });
+  return list;
+}
+</script>
+
+<template>
+  <div>
+    <Upload
+      v-if="showType === 'button'"
+      v-bind="$attrs"
+      v-model:file-list="fileList"
+      :accept="getStringAccept"
+      :before-upload="beforeUpload"
+      :custom-request="customRequest"
+      :disabled="disabled"
+      :max-count="maxNumber"
+      :multiple="multiple"
+      list-type="text"
+      :progress="{ showInfo: true }"
+      @remove="handleRemove"
+    >
+      <div v-if="canUpload && fileList && fileList.length < maxNumber">
+        <Button :icon="h(UploadOutlined)" type="primary">
+          {{ $t('component.upload.upload') }}
+        </Button>
+      </div>
+      <div v-if="showDescription" class="mt-2 flex flex-wrap items-center">
+        请上传不超过
+        <div class="mx-1 font-bold text-primary">{{ maxSize }}MB</div>
+        的
+        <div class="mx-1 font-bold text-primary">{{ accept.join('/') }}</div>
+        格式文件
+      </div>
+    </Upload>
+    <UploadDragger
+      v-else
+      v-bind="$attrs"
+      v-model:file-list="fileList"
+      :accept="getStringAccept"
+      :before-upload="beforeUpload"
+      :custom-request="customRequest"
+      :disabled="disabled"
+      :max-count="maxNumber"
+      :multiple="multiple"
+      list-type="text"
+      :progress="{ showInfo: true }"
+      @remove="handleRemove"
+    >
+      <template v-if="canUpload && fileList && fileList.length < maxNumber">
+        <div class="ant-upload-drag-icon flex justify-center">
+          <Inbox />
+        </div>
+        <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+        <p v-if="showDescription" class="ant-upload-hint">
+          请上传不超过 {{ maxSize }}MB 的 {{ accept.join('/') }} 格式文件
+        </p>
+      </template>
+    </UploadDragger>
+  </div>
+</template>
+
+<style lang="less">
+.ant-upload-select-picture-card i {
+  color: #999;
+  font-size: 32px;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/upload/src/helper.ts b/admin-ui/vue/apps/web-antd/src/components/upload/src/helper.ts
new file mode 100644
index 0000000..ff70b41
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/upload/src/helper.ts
@@ -0,0 +1,51 @@
+import { fileTypeFromBlob } from '@vben/utils';
+
+/**
+ * 不支持txt文件 @see https://github.com/sindresorhus/file-type/issues/55
+ * 需要自行修改
+ * @param file file对象
+ * @param accepts 文件类型数组  包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
+ * @returns 是否通过文件类型校验
+ */
+export async function checkFileType(file: File, accepts: string[]) {
+  if (!accepts || accepts?.length === 0) {
+    return true;
+  }
+  console.log(file);
+  const fileType = await fileTypeFromBlob(file);
+  if (!fileType) {
+    console.error('无法获取文件类型');
+    return false;
+  }
+  console.log('文件类型', fileType);
+  // 是否文件拓展名/文件头任意有一个匹配
+  return accepts.includes(fileType.ext) || accepts.includes(fileType.mime);
+}
+
+/**
+ * 默认图片类型
+ */
+export const defaultImageAccept = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+/**
+ * 判断文件类型是否符合要求
+ * @param file file对象
+ * @param accepts 文件类型数组  包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
+ * @returns 是否通过文件类型校验
+ */
+export async function checkImageFileType(file: File, accepts: string[]) {
+  // 空的accepts 使用默认规则
+  if (!accepts || accepts.length === 0) {
+    accepts = defaultImageAccept;
+  }
+  const fileType = await fileTypeFromBlob(file);
+  if (!fileType) {
+    console.error('无法获取文件类型');
+    return false;
+  }
+  console.log('文件类型', fileType);
+  // 是否文件拓展名/文件头任意有一个匹配
+  if (accepts.includes(fileType.ext) || accepts.includes(fileType.mime)) {
+    return true;
+  }
+  return false;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/components/upload/src/image-upload.vue b/admin-ui/vue/apps/web-antd/src/components/upload/src/image-upload.vue
new file mode 100644
index 0000000..61eb435
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/upload/src/image-upload.vue
@@ -0,0 +1,306 @@
+<script lang="ts" setup>
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+import type { AxiosResponse } from '@vben/request';
+
+import type { AxiosProgressEvent } from '#/api';
+
+import { ref, toRefs, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { PlusOutlined } from '@vben/icons';
+import { message, Modal, Upload } from 'ant-design-vue';
+import { isArray, isFunction, isObject, isString, uniqueId } from 'lodash-es';
+
+import { uploadApi } from '#/api';
+import { getSysOssViewApi } from '#/api/system/oss';
+
+import { checkImageFileType, defaultImageAccept } from './helper';
+import { UploadResultStatus } from './typing';
+import { useUploadType } from './use-upload';
+
+defineOptions({ name: 'ImageUpload', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 包括拓展名(不带点) 文件头(image/png等 不包括泛写法即image/*)
+     */
+    accept?: string[];
+    api?: (
+      file: Blob | File,
+      onUploadProgress?: AxiosProgressEvent,
+    ) => Promise<AxiosResponse<any>>;
+    disabled?: boolean;
+    helpText?: string;
+    // eslint-disable-next-line no-use-before-define
+    listType?: ListType;
+    // 最大数量的文件，Infinity不限制
+    maxNumber?: number;
+    // 文件最大多少MB
+    maxSize?: number;
+    // 是否支持多选
+    multiple?: boolean;
+    // support xxx.xxx.xx
+    // 返回的字段 默认url
+    resultField?: 'fileName' | 'ossId' | 'url';
+    /**
+     * 是否显示下面的描述
+     */
+    showDescription?: boolean;
+    value?: string | string[];
+  }>(),
+  {
+    value: () => [],
+    disabled: false,
+    listType: 'picture-card',
+    helpText: '',
+    maxSize: 2,
+    maxNumber: 1,
+    accept: () => defaultImageAccept,
+    multiple: false,
+    api: uploadApi,
+    resultField: 'url',
+    showDescription: true,
+  },
+);
+const emit = defineEmits(['change', 'update:value', 'delete']);
+type ListType = 'picture' | 'picture-card' | 'text';
+const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+const isInnerOperate = ref<boolean>(false);
+const { getStringAccept } = useUploadType({
+  acceptRef: accept,
+  helpTextRef: helpText,
+  maxNumberRef: maxNumber,
+  maxSizeRef: maxSize,
+});
+const previewOpen = ref<boolean>(false);
+const previewImage = ref<string>('');
+const previewTitle = ref<string>('');
+
+const fileList = ref<UploadProps['fileList']>([]);
+const isLtMsg = ref<boolean>(true);
+const isActMsg = ref<boolean>(true);
+const isFirstRender = ref<boolean>(true);
+
+watch(
+  () => props.value,
+  async (v) => {
+    if (isInnerOperate.value) {
+      isInnerOperate.value = false;
+      return;
+    }
+    let value: string | string[] = [];
+    if (v) {
+      const _fileList: string[] = [];
+      if (isString(v)) {
+        _fileList.push(v);
+      }
+      if (isArray(v)) {
+        _fileList.push(...v);
+      }
+      // 直接赋值 可能为string | string[]
+      value = v;
+      const withUrlList: UploadProps['fileList'] = [];
+      for (const item of _fileList) {
+        // ossId情况
+        if (props.resultField === 'ossId') {
+          const resp = await getSysOssViewApi({ ossId: Number(item) });
+          if (item && isString(item)) {
+            withUrlList.push({
+              uid: item, // ossId作为uid 方便getValue获取
+              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+              status: 'done',
+              url: resp?.url,
+            });
+          } else if (item && isObject(item)) {
+            withUrlList.push({
+              ...(item as any),
+              uid: item,
+              url: resp?.url,
+            });
+          }
+        } else {
+          // 非ossId情况
+          if (item && isString(item)) {
+            withUrlList.push({
+              uid: uniqueId(),
+              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+              status: 'done',
+              url: item, // 使用处理后的URL
+            });
+          } else if (item && isObject(item)) {
+            withUrlList.push(item);
+          }
+        }
+      }
+      fileList.value = withUrlList;
+    }
+    if (!isFirstRender.value) {
+      emit('change', value);
+      isFirstRender.value = false;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+function getBase64<T extends ArrayBuffer | null | string>(file: File) {
+  return new Promise<T>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.addEventListener('load', () => {
+      resolve(reader.result as T);
+    });
+    reader.addEventListener('error', (error) => reject(error));
+  });
+}
+
+const handlePreview = async (file: UploadFile) => {
+  if (!file.url && !file.preview) {
+    file.preview = await getBase64<string>(file.originFileObj!);
+  }
+  previewImage.value = file.url || file.preview || '';
+  previewOpen.value = true;
+  previewTitle.value =
+    file.name ||
+    previewImage.value.slice(
+      Math.max(0, previewImage.value.lastIndexOf('/') + 1),
+    );
+};
+
+const handleRemove = async (file: UploadFile) => {
+  if (fileList.value) {
+    const index = fileList.value.findIndex((item) => item.uid === file.uid);
+    index !== -1 && fileList.value.splice(index, 1);
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+    emit('delete', file);
+  }
+};
+
+const handleCancel = () => {
+  previewOpen.value = false;
+  previewTitle.value = '';
+};
+
+const beforeUpload = async (file: File) => {
+  const { maxSize, accept } = props;
+  const isAct = await checkImageFileType(file, accept);
+  if (!isAct) {
+    message.error($t('component.upload.acceptUpload', [accept]));
+    isActMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isActMsg.value = true), 1000);
+  }
+  const isLt = file.size / 1024 / 1024 > maxSize;
+  if (isLt) {
+    message.error($t('component.upload.maxSizeMultiple', [maxSize]));
+    isLtMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isLtMsg.value = true), 1000);
+  }
+  return (isAct && !isLt) || Upload.LIST_IGNORE;
+};
+
+async function customRequest(info: UploadRequestOption<any>) {
+  const { api } = props;
+  if (!api || !isFunction(api)) {
+    console.warn('upload api must exist and be a function');
+    return;
+  }
+  try {
+    // 进度条事件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      info.onProgress!({ percent });
+    };
+    const res = await api?.(info.file as File, progressEvent);
+    /**
+     * 由getValue处理 传对象过去
+     * 直接传string(id)会被转为Number
+     * 内部的逻辑由requestClient.upload处理 这里不用判断业务状态码 不符合会自动reject
+     */
+    info.onSuccess!(res);
+    message.success($t('component.upload.uploadSuccess'));
+    // 获取
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('change', value);
+  } catch (error: any) {
+    console.error(error);
+    info.onError!(error);
+  }
+}
+
+function getValue() {
+  console.log(fileList.value);
+  const list = (fileList.value || [])
+    .filter((item) => item?.status === UploadResultStatus.DONE)
+    .map((item: any) => {
+      if (item?.response && props?.resultField) {
+        return item?.response?.[props.resultField];
+      }
+      // ossId兼容 uid为ossId直接返回
+      if (props.resultField === 'ossId' && item.uid) {
+        return item.uid;
+      }
+      // 适用于已经有图片 回显的情况 会默认在init处理为{url: 'xx'}
+      if (item?.url) {
+        return item.url;
+      }
+      // 注意这里取的key为 url
+      return item?.response?.url;
+    });
+  // 只有一张图片 默认绑定string而非string[]
+  if (props.maxNumber === 1 && list.length === 1) {
+    return list[0];
+  }
+  // 只有一张图片 && 删除图片时 可自行修改
+  if (props.maxNumber === 1 && list.length === 0) {
+    return '';
+  }
+  return list;
+}
+</script>
+
+<template>
+  <div>
+    <Upload v-bind="$attrs" v-model:file-list="fileList" :accept="getStringAccept" :before-upload="beforeUpload"
+      :custom-request="customRequest" :disabled="disabled" :list-type="listType" :max-count="maxNumber"
+      :multiple="multiple" :progress="{ showInfo: true }" @preview="handlePreview" @remove="handleRemove">
+      <div v-if="fileList && fileList.length < maxNumber">
+        <PlusOutlined />
+        <div style="margin-top: 8px">{{ $t('component.upload.upload') }}</div>
+      </div>
+    </Upload>
+    <div v-if="showDescription" class="mt-2 flex flex-wrap items-center text-[14px]">
+      请上传不超过
+      <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
+      的
+      <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
+      格式文件
+    </div>
+    <Modal :footer="null" :open="previewOpen" :title="previewTitle" @cancel="handleCancel">
+      <img :src="previewImage" alt="" style="width: 100%" />
+    </Modal>
+  </div>
+</template>
+
+<style lang="less">
+.ant-upload-select-picture-card i {
+  color: #999;
+  font-size: 32px;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/components/upload/src/typing.ts b/admin-ui/vue/apps/web-antd/src/components/upload/src/typing.ts
new file mode 100644
index 0000000..8d728b6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/upload/src/typing.ts
@@ -0,0 +1,37 @@
+import type { Recordable } from '@vben/types';
+
+export enum UploadResultStatus {
+  DONE = 'done',
+  ERROR = 'error',
+  SUCCESS = 'success',
+  UPLOADING = 'uploading',
+}
+
+export interface FileItem {
+  thumbUrl?: string;
+  name: string;
+  size: number | string;
+  type?: string;
+  percent: number;
+  file: File;
+  status?: UploadResultStatus;
+  response?: Recordable<any> | { fileName: string; ossId: string; url: string };
+  uuid: string;
+}
+
+export interface Wrapper {
+  record: FileItem;
+  uidKey: string;
+  valueKey: string;
+}
+
+export interface BaseFileItem {
+  uid: number | string;
+  url: string;
+  name?: string;
+}
+export interface PreviewFileItem {
+  url: string;
+  name: string;
+  type: string;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/components/upload/src/use-upload.ts b/admin-ui/vue/apps/web-antd/src/components/upload/src/use-upload.ts
new file mode 100644
index 0000000..4ae552f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/upload/src/use-upload.ts
@@ -0,0 +1,61 @@
+import type { Ref } from 'vue';
+
+import { computed, unref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+export function useUploadType({
+  acceptRef,
+  helpTextRef,
+  maxNumberRef,
+  maxSizeRef,
+}: {
+  acceptRef: Ref<string[]>;
+  helpTextRef: Ref<string>;
+  maxNumberRef: Ref<number>;
+  maxSizeRef: Ref<number>;
+}) {
+  // 文件类型限制
+  const getAccept = computed(() => {
+    const accept = unref(acceptRef);
+    if (accept && accept.length > 0) {
+      return accept;
+    }
+    return [];
+  });
+  const getStringAccept = computed(() => {
+    return unref(getAccept)
+      .map((item) => {
+        return item.indexOf('/') > 0 || item.startsWith('.')
+          ? item
+          : `.${item}`;
+      })
+      .join(',');
+  });
+
+  // 支持jpg、jpeg、png格式，不超过2M，最多可选择10张图片，。
+  const getHelpText = computed(() => {
+    const helpText = unref(helpTextRef);
+    if (helpText) {
+      return helpText;
+    }
+    const helpTexts: string[] = [];
+
+    const accept = unref(acceptRef);
+    if (accept.length > 0) {
+      helpTexts.push($t('component.upload.accept', [accept.join(',')]));
+    }
+
+    const maxSize = unref(maxSizeRef);
+    if (maxSize) {
+      helpTexts.push($t('component.upload.maxSize', [maxSize]));
+    }
+
+    const maxNumber = unref(maxNumberRef);
+    if (maxNumber && maxNumber !== Infinity) {
+      helpTexts.push($t('component.upload.maxNumber', [maxNumber]));
+    }
+    return helpTexts.join('，');
+  });
+  return { getAccept, getStringAccept, getHelpText };
+}
diff --git a/admin-ui/vue/apps/web-antd/src/components/vue3cron/job-corn.vue b/admin-ui/vue/apps/web-antd/src/components/vue3cron/job-corn.vue
new file mode 100644
index 0000000..42995eb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/vue3cron/job-corn.vue
@@ -0,0 +1,361 @@
+<script setup lang="ts">
+import { ref, computed, defineProps, defineEmits, reactive } from 'vue';
+import Language from '#/components/vue3cron/language';
+import { Card, Radio, RadioGroup, InputNumber, Select, SelectOption, Tag, Button, Row, Col} from  'ant-design-vue';
+// 定义 Props
+const props = defineProps({
+  type: { type: String, default: '' },
+  i18n: { type: String, default: 'cn' },
+  maxHeight: { type: String, default: '300px' },
+});
+
+// 定义 Emits
+const emit = defineEmits<{
+(e: 'cancel'): void;
+(e: 'confirm', value: { cron: string}): void;
+}>();
+
+// 定义状态
+// 定义 Language 的键类型
+type LanguageKey = keyof typeof Language;
+const language = ref<LanguageKey>(props.i18n as LanguageKey);
+const second = ref({ cronEvery: "1", incrementStart: 3, incrementIncrement: 5, rangeStart: 0, rangeEnd: 0, specificSpecific: [] });
+const minute = ref({ cronEvery: '1', incrementStart: 3, incrementIncrement: 5, rangeStart: 0, rangeEnd: 0, specificSpecific: [] });
+const hour = ref({ cronEvery: '1', incrementStart: 3, incrementIncrement: 5, rangeStart: 0, rangeEnd: 0, specificSpecific: [] });
+const day = ref({ cronEvery: '1', incrementStart: 1, incrementIncrement: 1, rangeStart: 0, rangeEnd: 0, specificSpecific: [], cronLastSpecificDomDay: 1, cronDaysBeforeEomMinus: 0, cronDaysNearestWeekday: 0 });
+const week = ref({ cronEvery: '1', incrementStart: 1, incrementIncrement: 1, specificSpecific: [], cronNthDayDay: 1, cronNthDayNth: 1 });
+const month = ref({ cronEvery: '1', incrementStart: 3, incrementIncrement: 5, rangeStart: 0, rangeEnd: 0, specificSpecific: [] });
+const year = ref({ cronEvery: '1', incrementStart: 2017, incrementIncrement: 1, rangeStart: 0, rangeEnd: 0, specificSpecific: [] });
+
+// 计算属性
+const text = computed(() => Language[language.value || 'cn']);
+const secondsText = computed(() => {
+let seconds = '';
+console.log(second.value.cronEvery);
+let val = String(second.value.cronEvery);
+switch (val) {
+  case '1': 
+    seconds = '*'; console.log("1 seconds  ", seconds); break;
+  case '2': 
+    seconds = `${second.value.incrementStart}/${second.value.incrementIncrement}`;console.log("2 seconds  ", seconds); break;
+  case '3': seconds = second.value.specificSpecific.join(','); console.log("3 seconds  ", seconds);break;
+  case '4': seconds = `${second.value.rangeStart}-${second.value.rangeEnd}`; console.log("4 seconds  ", seconds);break;
+  default: seconds = ''; console.log("default seconds  ", seconds);;
+}
+return seconds;
+});
+const minutesText = computed(() => {
+let minutes = '';
+switch (minute.value.cronEvery) {
+  case '1': minutes = '*'; break;
+  case '2': minutes = `${minute.value.incrementStart}/${minute.value.incrementIncrement}`; break;
+  case '3': minutes = minute.value.specificSpecific.join(','); break;
+  case '4': minutes = `${minute.value.rangeStart}-${minute.value.rangeEnd}`; break;
+}
+return minutes;
+});
+const hoursText = computed(() => {
+let hours = '';
+switch (hour.value.cronEvery) {
+  case '1': hours = '*'; break;
+  case '2': hours = `${hour.value.incrementStart}/${hour.value.incrementIncrement}`; break;
+  case '3': hours = hour.value.specificSpecific.join(','); break;
+  case '4': hours = `${hour.value.rangeStart}-${hour.value.rangeEnd}`; break;
+}
+return hours;
+});
+const daysText = computed(() => {
+let days = '';
+switch (day.value.cronEvery) {
+  case '1': break;
+  case '2':
+  case '4':
+  case '11': days = '?'; break;
+  case '3': days = `${day.value.incrementStart}/${day.value.incrementIncrement}`; break;
+  case '5': days = day.value.specificSpecific.join(','); break;
+  case '6': days = 'L'; break;
+  case '7': days = 'LW'; break;
+  case '8': days = `${day.value.cronLastSpecificDomDay}L`; break;
+  case '9': days = `L-${day.value.cronDaysBeforeEomMinus}`; break;
+  case '10': days = `${day.value.cronDaysNearestWeekday}W`; break;
+}
+return days;
+});
+const weeksText = computed(() => {
+let weeks = '';
+switch (day.value.cronEvery) {
+  case '1':
+  case '3':
+  case '5': weeks = '?'; break;
+  case '2': weeks = `${week.value.incrementStart}/${week.value.incrementIncrement}`; break;
+  case '4': weeks = week.value.specificSpecific.join(','); break;
+  case '6':
+  case '7':
+  case '8':
+  case '9':
+  case '10': weeks = '?'; break;
+  case '11': weeks = `${week.value.cronNthDayDay}#${week.value.cronNthDayNth}`; break;
+}
+return weeks;
+});
+const monthsText = computed(() => {
+let months = '';
+switch (month.value.cronEvery) {
+  case '1': months = '*'; break;
+  case '2': months = `${month.value.incrementStart}/${month.value.incrementIncrement}`; break;
+  case '3': months = month.value.specificSpecific.join(','); break;
+  case '4': months = `${month.value.rangeStart}-${month.value.rangeEnd}`; break;
+}
+return months;
+});
+const yearsText = computed(() => {
+let years = '';
+switch (year.value.cronEvery) {
+  case '1': years = '*'; break;
+  case '2': years = `${year.value.incrementStart}/${year.value.incrementIncrement}`; break;
+  case '3': years = year.value.specificSpecific.join(','); break;
+  case '4': years = `${year.value.rangeStart}-${year.value.rangeEnd}`; break;
+}
+return years;
+});
+const cron = computed(() => {
+  return `${secondsText.value || '*'} ${minutesText.value || '*'} ${hoursText.value || '*'} ${daysText.value || '*'} ${monthsText.value || '*'} ${weeksText.value || '?'}`;
+});
+
+// 方法
+const close = () => {
+  emit('cancel');
+}
+const handleChange = () => {
+    emit('confirm', { cron: cron.value});
+    close();
+};
+
+const radioStyle = reactive({
+  display: 'flex',
+  height: '30px',
+  lineHeight: '30px',
+});
+
+const selectStyle = reactive({
+  minWidth: '80px', 
+  height: '30px',
+  lineHeight: '30px',
+  marginTop: '3px',
+});
+
+const tabListNoTitle = [
+  {
+    key: '1',
+    tab: text.value.Seconds.name,
+  },
+  {
+    key: '2',
+    tab: text.value.Minutes.name,
+  },
+  {
+    key: '3',
+    tab: text.value.Hours.name,
+  },
+  {
+    key: '4',
+    tab: text.value.Day.name,
+  },
+  {
+    key: '5',
+    tab: text.value.Month.name,
+  }
+];
+const noTitleKey = ref('1');
+const onTabChange = (value: string) => {
+  noTitleKey.value = value;
+};
+
+defineExpose({
+    cron,
+});
+</script>
+<template>
+  <Card
+    :tab-list="tabListNoTitle"
+    :active-tab-key="noTitleKey"
+    @tabChange="key => onTabChange(key)"
+  >
+    <div v-if="noTitleKey === '1'">
+      <RadioGroup v-model:value="second.cronEvery">
+        <Radio value='1' :style="radioStyle">{{ text.Seconds.every }}</Radio>
+        <Radio value='2' :style="radioStyle">{{ text.Seconds.interval[0] }}
+          <InputNumber size="small" v-model:value="second.incrementIncrement" :min="1" :max="60"></InputNumber>
+          {{ text.Seconds.interval[1] || '' }}
+          <InputNumber size="small" v-model:value="second.incrementStart" :min="0" :max="59"></InputNumber>
+          {{ text.Seconds.interval[2] || '' }}</Radio>
+        <Row>
+          <Radio value='3' :style="radioStyle">{{ text.Seconds.specific }} </Radio>
+          <Select v-model:value="second.specificSpecific" mode="multiple" :max-tag-count="10" placeholder="请选择"  :token-separators="[',']" :style="selectStyle" size="small">
+            <SelectOption v-for="(val, index) in 60" :key="index" :label="index" :value="val-1" ></SelectOption>
+          </Select>
+        </Row>
+        <Radio value='4' :style="radioStyle">{{ text.Seconds.cycle[0] }}
+          <InputNumber size="small" v-model:value="second.rangeStart" :min="1" :max="60"></InputNumber>
+          {{ text.Seconds.cycle[1] || '' }}
+          <InputNumber size="small" v-model:value="second.rangeEnd" :min="0" :max="59"></InputNumber>
+          {{ text.Seconds.cycle[2] || '' }}
+        </Radio>
+      </RadioGroup>
+    </div>
+    <div v-if="noTitleKey === '2'">
+      <RadioGroup v-model:value="minute.cronEvery">
+        <Radio :style="radioStyle" value="1" >{{ text.Minutes.every }}</Radio>
+        <Radio :style="radioStyle" value="2">{{ text.Minutes.interval[0] }}
+          <InputNumber size="small" v-model:value="minute.incrementIncrement" :min="1" :max="60"></InputNumber>
+          {{ text.Minutes.interval[1] }}
+          <InputNumber size="small" v-model:value="minute.incrementStart" :min="0" :max="59"></InputNumber>
+          {{ text.Minutes.interval[2] || '' }}
+        </Radio>
+        <Row>
+          <Radio :style="radioStyle" value="3">{{ text.Minutes.specific }}  
+          </Radio>
+          <Select  mode="multiple" v-model:value="minute.specificSpecific" :max-tag-count="10" placeholder="请选择"  :token-separators="[',']" size="small" :style="selectStyle" >
+            <SelectOption v-for="(val, index) in 60" :key="index" :value="val - 1">{{
+              val - 1
+            }}</SelectOption>
+          </Select>
+        </Row>       
+        <Radio :style="radioStyle" value="4">{{ text.Minutes.cycle[0] }}
+          <InputNumber size="small" v-model:value="minute.rangeStart" :min="1" :max="60"></InputNumber>
+          {{ text.Minutes.cycle[1] }}
+          <InputNumber size="small" v-model:value="minute.rangeEnd" :min="0" :max="59"></InputNumber>
+          {{ text.Minutes.cycle[2] }}
+        </Radio>
+      </RadioGroup>
+    </div>
+    <div v-if="noTitleKey === '3'">
+      <RadioGroup v-model:value="hour.cronEvery">
+        <Radio :style="radioStyle" value="1">{{ text.Hours.every }}</Radio>
+        <Radio :style="radioStyle" value="2">{{ text.Hours.interval[0] }}
+          <InputNumber size="small" v-model:value="hour.incrementIncrement" :min="0" :max="23"></InputNumber>
+          {{ text.Hours.interval[1] }}
+          <InputNumber size="small" v-model:value="hour.incrementStart" :min="0" :max="23"></InputNumber>
+          {{ text.Hours.interval[2] }}
+        </Radio>
+        <Row>
+          <Radio :style="radioStyle" value="3">{{ text.Hours.specific }}
+          </Radio>
+         <Select v-model:value="hour.specificSpecific" size="small"  mode="multiple" :token-separators="[',']"  :max-tag-count="10" placeholder="请选择" :style="selectStyle">
+            <SelectOption v-for="(val, index) in 24" :key="index" :value="val - 1">{{
+              val - 1
+            }}</SelectOption>
+          </Select>
+        </Row>
+        <Radio :style="radioStyle" value="4">{{ text.Hours.cycle[0] }}
+          <InputNumber size="small" v-model:value="hour.rangeStart" :min="0" :max="23"></InputNumber>
+          {{ text.Hours.cycle[1] }}
+          <InputNumber size="small" v-model:value="hour.rangeEnd" :min="0" :max="23"></InputNumber>
+          {{ text.Hours.cycle[2] }}
+        </Radio>
+      </RadioGroup>
+    </div>
+    <div v-if="noTitleKey === '4'">
+      <RadioGroup v-model:value="day.cronEvery">
+        <Radio :style="radioStyle" value="1">{{ text.Day.every }}</Radio>
+        <Row>
+          <Radio :style="radioStyle" value="2">{{ text.Day.intervalWeek[0] }}
+          <InputNumber size="small" v-model:value="week.incrementIncrement" :min="1" :max="7"></InputNumber>
+          {{ text.Day.intervalWeek[1] }}
+        </Radio>
+        <Select v-model:value="week.incrementStart" size="small"  placeholder="请选择" :style="selectStyle">
+            <SelectOption v-for="(val, index) in 7" :key="index" :value="val">{{text.Week[val - 1]}}</SelectOption>
+          </Select>
+          <span :style="radioStyle">
+            {{ text.Day.intervalWeek[2] }}
+          </span>
+        </Row>
+        <Radio :style="radioStyle" value="3">{{ text.Day.intervalDay[0] }}
+          <InputNumber size="small" v-model:value="day.incrementIncrement" :min="1" :max="31"></InputNumber>
+          {{ text.Day.intervalDay[1] }}
+          <InputNumber size="small" v-model:value="day.incrementStart" :min="1" :max="31"></InputNumber>
+          {{ text.Day.intervalDay[2] }}
+        </Radio>
+        <Row>
+          <Radio :style="radioStyle" value="4">{{ text.Day.specificWeek }}
+          </Radio>
+          <Select v-model:value="week.specificSpecific" size="small"  mode="multiple" :token-separators="[',']"  :max-tag-count="10" placeholder="请选择" :style="selectStyle">
+            <SelectOption v-for="(val, index) in 7" :key="index" :value="val">{{text.Week[val - 1]}}</SelectOption>
+          </Select>
+        </Row>
+        <Row>
+          <Radio :style="radioStyle" value="5">{{ text.Day.specificDay }} </Radio>
+          <Select v-model:value="day.specificSpecific" size="small"  mode="multiple" :token-separators="[',']"  :max-tag-count="10" placeholder="请选择" :style="selectStyle">
+            <SelectOption v-for="(val, index) in 31" :key="index" :value="val">{{ val }}</SelectOption>
+          </Select>
+        </Row>
+        <Radio :style="radioStyle" value="6">{{ text.Day.lastDay }}</Radio>
+        <Radio :style="radioStyle" value="7">{{ text.Day.lastWeekday }}</Radio>
+        <Row>
+          <Radio :style="radioStyle" value="8">{{ text.Day.lastWeek[0] }}
+          
+          </Radio>
+          <Select v-model:value="day.cronLastSpecificDomDay" size="small"  mode="multiple" :token-separators="[',']"  :max-tag-count="10" placeholder="请选择" :style="selectStyle">
+            <SelectOption v-for="(val, index) in 7" :key="index" :value="val">{{ text.Week[val - 1] }}</SelectOption>
+          </Select>
+          <span :style="radioStyle">
+            {{ text.Day.lastWeek[1] || '' }}
+          </span>
+        </Row>
+        <Radio :style="radioStyle" value="9">
+          <InputNumber size="small" v-model:value="day.cronDaysBeforeEomMinus" :min="1" :max="31"></InputNumber>
+          {{ text.Day.beforeEndMonth[0] }}
+        </Radio>
+        <Radio :style="radioStyle" value="10">{{ text.Day.nearestWeekday[0] }}
+          <InputNumber size="small" v-model:value="day.cronDaysNearestWeekday" :min="1" :max="31"></InputNumber>
+          {{ text.Day.nearestWeekday[1] }}
+        </Radio>
+        <Row>
+          <Radio :style="radioStyle" value="11">{{ text.Day.someWeekday[0] }}
+            <InputNumber size="small" v-model:value="week.cronNthDayNth" :min="1" :max="5"></InputNumber>{{ text.Day.someWeekday[1] }}
+          </Radio>  
+          <Select v-model:value="week.cronNthDayDay" size="small"  mode="multiple" :token-separators="[',']"  :max-tag-count="10" placeholder="请选择" :style="selectStyle">
+            <SelectOption v-for="(val, index) in 7" :key="index" :value="val">{{ text.Week[val - 1] }}</SelectOption>
+          </Select>
+        </Row>
+      </RadioGroup>
+    </div>
+    <div v-if="noTitleKey === '5'">
+      <RadioGroup v-model:value="month.cronEvery">
+        <Radio :style="radioStyle" value="1">{{ text.Month.every }}</Radio>
+        <Radio :style="radioStyle" value="2">{{ text.Month.interval[0] }}
+          <InputNumber size="small" v-model:value="month.incrementIncrement" :min="0" :max="12"></InputNumber>
+          {{ text.Month.interval[1] }}
+          <InputNumber size="small" v-model:value="month.incrementStart" :min="0" :max="12"></InputNumber>
+        </Radio>
+        <Row>
+          <Radio :style="radioStyle" value="3">{{ text.Month.specific }}
+          </Radio>
+          <Select v-model:value="month.specificSpecific" size="small"  mode="multiple" :token-separators="[',']"  :max-tag-count="10" placeholder="请选择" :style="selectStyle">
+            <SelectOption v-for="(val, index) in 12" :key="index" :value="val">{{ val }}</SelectOption>
+          </Select>
+        </Row>
+        <Radio :style="radioStyle" value="4">{{ text.Month.cycle[0] }}
+          <InputNumber size="small" v-model:value="month.rangeStart" :min="1" :max="12"></InputNumber>
+          {{ text.Month.cycle[1] }}
+          <InputNumber size="small" v-model:value="month.rangeEnd" :min="1" :max="12"></InputNumber>
+        </Radio>
+      </RadioGroup>
+    </div>
+  </Card>
+  <Row >
+    <Col class="value" :span="18">
+      <span> cron预览: </span>
+      <Tag color="blue">
+        {{ cron }}
+      </Tag>
+      <span>{秒数} {分钟} {小时} {日期} {月份} {?}</span>
+    </Col>
+    <Col :span="3">
+        <Button  @click="close">{{ text.Close }}</Button>
+    </Col>
+    <Col :span="3">
+        <Button  type="primary" @click="handleChange">{{ text.Save }}</Button>
+    </Col>
+  </Row>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/cn.ts b/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/cn.ts
new file mode 100644
index 0000000..f328e24
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/cn.ts
@@ -0,0 +1,54 @@
+export default {
+    Seconds:{
+        name:'秒',
+        every:'每一秒钟',
+        interval:['每隔','秒执行 从','秒开始'],
+        specific:'具体秒数(可多选)',
+        cycle:['周期从','到','秒']
+    },
+    Minutes:{
+        name:'分',
+        every:'每一分钟',
+        interval:['每隔','分执行 从','分开始'],
+        specific:'具体分钟数(可多选)',
+        cycle:['周期从','到','分']
+    },
+    Hours:{
+        name:'时',
+        every:'每一小时',
+        interval:['每隔','小时执行 从','小时开始'],
+        specific:'具体小时数(可多选)',
+        cycle:['周期从','到','小时']
+    },
+    Day:{
+        name:'天',
+        every:'每一天',
+        intervalWeek:['每隔','周执行 从','开始'],
+        intervalDay:['每隔','天执行 从','天开始'],
+        specificWeek:'具体星期几(可多选)',
+        specificDay:'具体天数(可多选)',
+        lastDay:'在这个月的最后一天',
+        lastWeekday:'在这个月的最后一个工作日',
+        lastWeek:['在这个月的最后一个'],
+        beforeEndMonth:['在本月底前','天'],
+        nearestWeekday:['最近的工作日（周一至周五）至本月','日'],
+        someWeekday:['在这个月的第','个'],
+    },
+    Week:['天','一','二','三','四','五','六'].map(val=>'星期'+val),
+    Month:{
+        name:'月',
+        every:'每一月',
+        interval:['每隔','月执行 从','月开始'],
+        specific:'具体月数(可多选)',
+        cycle:['从','到','月之间的每个月']
+    },
+    Year:{
+        name:'年',
+        every:'每一年',
+        interval:['每隔','年执行 从','年开始'],
+        specific:'具体年份(可多选)',
+        cycle:['从','到','年之间的每一年']
+    },
+    Save:'确定',
+    Close:'关闭'
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/en.ts b/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/en.ts
new file mode 100644
index 0000000..19c3c1e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/en.ts
@@ -0,0 +1,54 @@
+export default {
+    Seconds:{
+        name:'Seconds',
+        every:'Every second',
+        interval:['Every','second(s) starting at second'],
+        specific:'Specific second (choose one or many)',
+        cycle:['Every second between second','and second']
+    },
+    Minutes:{
+        name:'Minutes',
+        every:'Every minute',
+        interval:['Every','minute(s) starting at minute'],
+        specific:'Specific minute (choose one or many)',
+        cycle:['Every minute between minute','and minute']
+    },
+    Hours:{
+        name:'Hours',
+        every:'Every hour',
+        interval:['Every','hour(s) starting at hour'],
+        specific:'Specific hour (choose one or many)',
+        cycle:['Every hour between hour','and hour']
+    },
+    Day:{
+        name:'Day',
+        every:'Every day',
+        intervalWeek:['Every','day(s) starting on'],
+        intervalDay:['Every','day(s) starting at the','of the month'],
+        specificWeek:'Specific day of week (choose one or many)',
+        specificDay:'Specific day of month (choose one or many)',
+        lastDay:'On the last day of the month',
+        lastWeekday:'On the last weekday of the month',
+        lastWeek:['On the last',' of the month'],
+        beforeEndMonth:['day(s) before the end of the month'],
+        nearestWeekday:['Nearest weekday (Monday to Friday) to the','of the month'],
+        someWeekday:['On the','of the month'],
+    },
+    Week:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
+    Month:{
+        name:'Month',
+        every:'Every month',
+        interval:['Every','month(s) starting in'],
+        specific:'Specific month (choose one or many)',
+        cycle:['Every month between','and']
+    },
+    Year:{
+        name:'Year',
+        every:'Any year',
+        interval:['Every','year(s) starting in'],
+        specific:'Specific year (choose one or many)',
+        cycle:['Every year between','and']
+    },
+    Save:'Save',
+    Close:'Close'
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/index.ts b/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/index.ts
new file mode 100644
index 0000000..b8a24c7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/index.ts
@@ -0,0 +1,9 @@
+import en from '#/components/vue3cron/language/en'
+import cn from '#/components/vue3cron/language/cn'
+import pt from '#/components/vue3cron/language/pt_br'
+
+export default {
+    en,
+    cn,
+    pt
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/pt_br.ts b/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/pt_br.ts
new file mode 100644
index 0000000..b2aedd1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/components/vue3cron/language/pt_br.ts
@@ -0,0 +1,54 @@
+export default {
+    Seconds:{
+        name:'Segundos',
+        every:'A cada segundo',
+        interval:['A cada','segundo(s) começando no segundo'],
+        specific:'Segundo específico (escolha um ou muitos)',
+        cycle:['A Cada segundo entre segundos','e segundo']
+    },
+    Minutes:{
+        name:'Minutos',
+        every:'A cada minuto',
+        interval:['A cada','minuto(s) começando no minuto'],
+        specific:'Minuto específico (escolha um ou muitos)',
+        cycle:['A cada minuto entre minutos','e minutos']
+    },
+    Hours:{
+        name:'Horas',
+        every:'A cada hora',
+        interval:['A cada','hora(s) começando na hora'],
+        specific:'Hora específica (escolha uma ou muitas)',
+        cycle:['A cada hora entre horas','e horas']
+    },
+    Day:{
+        name:'Dia',
+        every:'A cada dia',
+        intervalWeek:['A cada','dia(s) começando em'],
+        intervalDay:['A cada','dia(s) começando no','do mês'],
+        specificWeek:'Dia específico da semana (escolha um ou vários)',
+        specificDay:'Dia específico do mês (escolha um ou vários)',
+        lastDay:'No último dia do mês',
+        lastWeekday:'No último dia da semana do mês',
+        lastWeek:['No último',' do mês'],
+        beforeEndMonth:['dia(s) antes do final do mês'],
+        nearestWeekday:['Dia da semana mais próximo (segunda a sexta) ao ','do mês'],
+        someWeekday:['No','do mês'],
+    },
+    Week:['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sábado'],
+    Month:{
+        name:'Mês',
+        every:'A cada mês',
+        interval:['A cada','mês(es) começando em'],
+        specific:'Mês específico (escolha um ou muitos)',
+        cycle:['Todo mês entre','e']
+    },
+    Year:{
+        name:'Ano',
+        every:'Qualquer ano',
+        interval:['A cada','ano(s) começando em'],
+        specific:'Ano específico (escolha um ou muitos)',
+        cycle:['Todo ano entre','e']
+    },
+    Save:'Salvar',
+    Close:'Fechar'
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/config/fileType.ts b/admin-ui/vue/apps/web-antd/src/config/fileType.ts
new file mode 100644
index 0000000..bc2c88a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/config/fileType.ts
@@ -0,0 +1,114 @@
+/** 文件类型
+ *  @desc 1.文件需要加路径,图片不需要
+ */
+export const fileType = {
+  // IOT平台
+  /** IOT平台 - 用户文件 */
+  UserFIle: 1,
+  /** IOT平台 - 用户图片 */
+  UserImg: 2,
+  /** IOT平台 - 设备文件 */
+  DeviceFile: 3,
+  /** IOT平台 - Iot配置图片 */
+  IotConfigImg: 4,
+  /** IOT平台 - Iot配置文件 */
+  IotConfigFile: 5,
+  /** IOT平台 - 项目图片 */
+  ProjectImg: 6,
+  /** IOT平台 - 项目文件 */
+  ProjectFile: 7,
+
+  // 瀚臻平台
+  /** 瀚臻平台 - 图库路径 */
+  HzImg: 101,
+  /** 瀚臻平台 - 固件路径 */
+  HzFirmware: 102,
+  /** 瀚臻平台 - 分组配置路径 */
+  HzGroupConfig: 103,
+  /** 瀚臻平台 - 设备配置路径 */
+  HzDeviceConfig: 104,
+  /** 瀚臻平台 - 设备文件 */
+  HzDeviceFile: 105,
+};
+
+const FILEPATHTYPE = {
+  /** ====================IOT平台==================== */
+  // vue\apps\web-antd\src\views\_core\profile\profile-panel.vue
+  /** 个人中心/个人信息面板 */
+  profilPanel: fileType.UserImg,
+  // vue\apps\web-antd\src\views\device\iotDevice\edit.vue
+  /** 设备管理/设备列表 */
+  iotDevice: fileType.IotConfigImg,
+  // vue\apps\web-antd\src\views\device\iotProduct\edit.vue
+  /** 设备管理/产品管理 */
+  iotProduct: fileType.IotConfigImg,
+  // vue\apps\web-antd\src\views\device\iotProductPreview\index.vue
+  /** 设备管理/产品管理/产品详情 */
+  iotProductPreview: fileType.IotConfigImg,
+  // vue\apps\web-antd\src\views\device\iotProductPreview\Management\edit.vue
+  /** 设备管理/产品管理/产品详情/固件管理 */
+  iotProductPreviewManagement: fileType.IotConfigFile,
+  // vue\apps\web-antd\src\views\manage\iotFirmware\index.vue
+  /** 运维管理/产品固件 */
+  iotFirmware: fileType.IotConfigFile,
+
+  /** ====================瀚臻平台==================== */
+  // vue\apps\web-antd\src\views\hzproductioncenter\hzPcProductInfo\edit.vue
+  /** 瀚臻/产品图片 */
+  hzPcProductInfo: fileType.HzImg,
+  // vue\apps\web-antd\src\views\hzdevelopercenter\hzDcFirmware\edit.vue
+  /** 瀚臻/升级固件 */
+  hzDcFirmware: fileType.HzFirmware,
+  // vue\apps\web-antd\src\views\hzproductioncenter\hzPcProductInfo\firmware\update\edit.vue
+  /** 瀚臻/产品/升级固件 */
+  hzPcProductInfoUpdate: fileType.HzFirmware,
+  // vue\apps\web-antd\src\views\hzproductioncenter\hzPcProductInfo\firmware\flash\edit.vue
+  /** 瀚臻/产品/固件下载 */
+  hzPcProductInfoFlash: fileType.HzFirmware,
+};
+export default FILEPATHTYPE;
+
+/** 模板 */
+// <template #fileUrl="slotProps">
+//   <div style="display: flex; flex-direction: column; gap: 8px">
+//     <Upload :file-list="fileList" :before-upload="beforeUpload" :custom-request="customRequest"
+//       accept=".bin,.hex,.fw,.zip" :multiple="false" list-type="text" @remove="handleRemove">
+//       <Button :disabled="slotProps.disabled" type="primary">
+//         <template #icon>
+//           <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
+//             <path
+//               d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 0 0-12.6 0l-112 141.8c-4.1 5.2-.4 12.9 6.3 12.9z" />
+//             <path
+//               d="M878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z" />
+//           </svg>
+//         </template>
+//         上传固件文件
+//       </Button>
+//     </Upload>
+//     <div style="color: #666; font-size: 12px; margin-top: 4px">
+//       请上传不超过
+//       <span style="color: #1890ff; font-weight: bold">100MB</span> 的
+//       <span style="color: #1890ff; font-weight: bold">bin/hex/fw/zip</span>
+//       格式文件
+//     </div>
+//     <div v-if="slotProps.value" style="color: #666; font-size: 12px">
+//       当前文件: {{ slotProps.value }}
+//     </div>
+//   </div>
+// </template>
+
+// const productCode = (await formApi.getValues()).productCode;
+// const response = await uploadApi(
+//   file,
+//   progressEvent,
+//   undefined,
+//   FILEPATHTYPE.hzPcProductInfoUpdate,
+//   productCode,
+// );
+
+// dependencies: {
+//   disabled(values) {
+//     return !!values.field3Switch;
+//   },
+//   triggerFields: ['field3Switch'],
+// },
diff --git a/admin-ui/vue/apps/web-antd/src/config/menu-setting.ts b/admin-ui/vue/apps/web-antd/src/config/menu-setting.ts
new file mode 100644
index 0000000..36bf194
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/config/menu-setting.ts
@@ -0,0 +1,92 @@
+type RuntimeMenuPageSetting = Record<string, boolean>;
+
+interface RuntimeMenuSetting {
+  tDashboard?: RuntimeMenuPageSetting;
+}
+
+declare global {
+  interface Window {
+    __APP_MENU_SETTING__?: RuntimeMenuSetting;
+    __APP_MENU_SETTING_PROMISE__?: Promise<RuntimeMenuSetting>;
+  }
+}
+
+/** ====================  常量  ==================== */
+const MENU_SETTING_URL = '/menu-setting.json';
+const DEFAULT_MENU_SETTING: Required<RuntimeMenuSetting> = {
+  tDashboard: {
+    businessAlert: true,
+    businessVolume: true,
+    dataSharing: true,
+    feeSituation: true,
+    lifeCycle: true,
+    locationDistribution: true,
+    myPanel: true,
+    myPanelNew: true,
+    myPanelSimActive: true,
+    myPanelSimCount: true,
+    myPanelUseData: true,
+    myPanelUseMsg: true,
+    quickAccessBorder: true,
+    trafficPool: true,
+  },
+};
+
+/** ====================  数据  ==================== */
+let runtimeMenuSetting: RuntimeMenuSetting = DEFAULT_MENU_SETTING;
+
+/** ====================  方法  ==================== */
+function mergePageMenuSetting(
+  setting: RuntimeMenuPageSetting | undefined,
+  defaultSetting: RuntimeMenuPageSetting,
+) {
+  return setting ? { ...defaultSetting, ...setting } : defaultSetting;
+}
+
+function mergeRuntimeMenuSetting(setting: RuntimeMenuSetting) {
+  return {
+    tDashboard: mergePageMenuSetting(
+      setting.tDashboard,
+      DEFAULT_MENU_SETTING.tDashboard,
+    ),
+  };
+}
+
+async function loadRuntimeMenuSetting() {
+  try {
+    const settingPromise =
+      window.__APP_MENU_SETTING_PROMISE__ ||
+      fetch(MENU_SETTING_URL, {
+        cache: 'no-store',
+      }).then((response) => response.json() as Promise<RuntimeMenuSetting>);
+
+    runtimeMenuSetting = mergeRuntimeMenuSetting(await settingPromise);
+  } catch {
+    runtimeMenuSetting = DEFAULT_MENU_SETTING;
+  }
+
+  window.__APP_MENU_SETTING__ = runtimeMenuSetting;
+
+  return runtimeMenuSetting;
+}
+
+function getRuntimeMenuSetting() {
+  return runtimeMenuSetting;
+}
+
+function getRuntimeMenuVisible(path: string) {
+  const [page, key] = path.split('.');
+
+  if (!page || !key) {
+    return false;
+  }
+
+  return runtimeMenuSetting[page as keyof RuntimeMenuSetting]?.[key] === true;
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+
+export type { RuntimeMenuSetting };
+export { getRuntimeMenuSetting, getRuntimeMenuVisible, loadRuntimeMenuSetting };
diff --git a/admin-ui/vue/apps/web-antd/src/config/setting.ts b/admin-ui/vue/apps/web-antd/src/config/setting.ts
new file mode 100644
index 0000000..f5e857f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/config/setting.ts
@@ -0,0 +1,227 @@
+import { merge } from 'lodash-es';
+
+interface RuntimeCopyrightSetting {
+  companyName?: string;
+  companySiteLink?: string;
+  date?: string;
+  icp?: string;
+  icpLink?: string;
+}
+
+interface TTplatformSettingViewRes {
+  appIcon?: string;
+  appTitle?: string;
+  fullDomain?: string;
+  loginPageDescription?: string;
+  loginPageTitle?: string;
+  loginSloganImage?: string;
+  status?: number;
+  subDomain?: string;
+}
+
+interface ApiResponse<T> {
+  code?: number;
+  data?: T;
+}
+
+interface RuntimeSetting {
+  appIcon?: string;
+  appTitle?: string;
+  copyright?: RuntimeCopyrightSetting;
+  loginPageDescription?: string;
+  loginPageTitle?: string;
+  loginSloganImage?: string;
+}
+
+interface RuntimeSettingCache {
+  setting: RuntimeSetting;
+  updatedAt: number;
+}
+
+interface RuntimeSettingLoadOptions {
+  forceRefresh?: boolean;
+}
+
+declare global {
+  interface Window {
+    __APP_SETTING__?: RuntimeSetting;
+    __APP_SETTING_PROMISE__?: Promise<RuntimeSetting>;
+  }
+}
+
+/** ====================  常量  ==================== */
+const SETTING_URL = '/setting.json';
+const SETTING_CACHE_KEY = 'runtime-setting';
+const DEFAULT_RUNTIME_SETTING: RuntimeSetting = {
+  appIcon: '/favicon.ico',
+  appTitle: '智联·云',
+  copyright: {
+    companyName: '示例智联',
+    companySiteLink: 'https://example.com',
+    date: '2024-2025',
+    icp: '',
+    icpLink: 'https://beian.miit.gov.cn/',
+  },
+  loginPageDescription: '新一代物联网设备统一接入平台',
+  loginPageTitle: '物联网设备上云首选',
+  loginSloganImage: '',
+};
+
+/** ====================  数据  ==================== */
+let runtimeSetting: RuntimeSetting = DEFAULT_RUNTIME_SETTING;
+
+/** ====================  方法  ==================== */
+function getRuntimeSettingCacheKey() {
+  return SETTING_CACHE_KEY;
+}
+
+function mergeRuntimeSetting(...settings: RuntimeSetting[]) {
+  return merge({}, DEFAULT_RUNTIME_SETTING, ...settings);
+}
+
+function readCachedRuntimeSetting() {
+  try {
+    const cacheText = localStorage.getItem(getRuntimeSettingCacheKey());
+    if (!cacheText) {
+      return;
+    }
+
+    const cache = JSON.parse(cacheText) as RuntimeSettingCache;
+    return cache.setting;
+  } catch {}
+}
+
+function writeCachedRuntimeSetting(setting: RuntimeSetting) {
+  try {
+    const cache: RuntimeSettingCache = {
+      setting,
+      updatedAt: Date.now(),
+    };
+    localStorage.setItem(getRuntimeSettingCacheKey(), JSON.stringify(cache));
+  } catch {
+    // localStorage 不可用时不影响运行时配置生效
+  }
+}
+
+function shouldRefreshRuntimeSetting(
+  cachedSetting: RuntimeSetting | undefined,
+  options: RuntimeSettingLoadOptions = {},
+) {
+  return options.forceRefresh || !cachedSetting;
+}
+
+async function fetchRuntimeSetting() {
+  const settingPromise =
+    window.__APP_SETTING_PROMISE__ ||
+    fetch(SETTING_URL, {
+      cache: 'no-store',
+    }).then((response) => response.json() as Promise<RuntimeSetting>);
+
+  return settingPromise;
+}
+
+function resolveFullDomain(hostname = window.location.hostname) {
+  return hostname || '';
+}
+
+function pickRuntimeSettingFields(
+  setting: TTplatformSettingViewRes | undefined,
+): RuntimeSetting {
+  if (!setting) {
+    return {};
+  }
+
+  const {
+    appIcon,
+    appTitle,
+    loginPageDescription,
+    loginPageTitle,
+    loginSloganImage,
+  } = setting;
+
+  return {
+    appIcon,
+    appTitle,
+    loginPageDescription,
+    loginPageTitle,
+    loginSloganImage,
+  };
+}
+
+async function fetchDomainRuntimeSetting() {
+  const fullDomain = resolveFullDomain();
+
+  if (!fullDomain) {
+    return {};
+  }
+
+  try {
+    const apiURL = import.meta.env.VITE_GLOB_API_URL || '/api';
+    const query = new URLSearchParams({ fullDomain });
+    const response = await fetch(
+      `${apiURL}/system/tTplatformSetting/view?${query.toString()}`,
+      { cache: 'no-store' },
+    );
+    const result =
+      (await response.json()) as ApiResponse<TTplatformSettingViewRes>;
+    if (result.code !== 0) {
+      return {};
+    }
+    const setting = result.data;
+    return pickRuntimeSettingFields(setting);
+  } catch {
+    return {};
+  }
+}
+
+function applyRuntimeSetting(setting: RuntimeSetting) {
+  runtimeSetting = mergeRuntimeSetting(setting);
+  window.__APP_SETTING__ = runtimeSetting;
+
+  return runtimeSetting;
+}
+
+async function refreshRuntimeSetting() {
+  try {
+    const [fileSetting, domainSetting] = await Promise.all([
+      fetchRuntimeSetting(),
+      fetchDomainRuntimeSetting(),
+    ]);
+    const setting = mergeRuntimeSetting(fileSetting, domainSetting);
+    writeCachedRuntimeSetting(setting);
+    return applyRuntimeSetting(setting);
+  } catch {
+    return applyRuntimeSetting(readCachedRuntimeSetting() || {});
+  }
+}
+
+async function loadRuntimeSetting(options: RuntimeSettingLoadOptions = {}) {
+  const cachedSetting = readCachedRuntimeSetting();
+
+  if (cachedSetting && !shouldRefreshRuntimeSetting(cachedSetting, options)) {
+    return applyRuntimeSetting(cachedSetting);
+  }
+
+  return refreshRuntimeSetting();
+}
+
+function getRuntimeSetting() {
+  return runtimeSetting;
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+
+export type { RuntimeSetting };
+export {
+  DEFAULT_RUNTIME_SETTING,
+  getRuntimeSetting,
+  getRuntimeSettingCacheKey,
+  loadRuntimeSetting,
+  mergeRuntimeSetting,
+  pickRuntimeSettingFields,
+  refreshRuntimeSetting,
+  resolveFullDomain,
+  shouldRefreshRuntimeSetting,
+};
diff --git a/admin-ui/vue/apps/web-antd/src/config/tianditu.ts b/admin-ui/vue/apps/web-antd/src/config/tianditu.ts
new file mode 100644
index 0000000..2c3dfff
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/config/tianditu.ts
@@ -0,0 +1,88 @@
+/**
+ * 天地图配置文件
+ * 统一管理天地图API Key和相关配置
+ */
+
+// 天地图API Key - 统一配置
+export const TIANDITU_CONFIG = {
+  // 天地图API Key
+  API_KEY: 'YOUR_TIANDITU_KEY',
+  
+  // 天地图API基础URL
+  API_BASE_URL: 'https://api.tianditu.gov.cn',
+  
+  // 天地图JS API URL
+  JS_API_URL: 'https://api.tianditu.gov.cn/api',
+  
+  // 默认地图配置
+  DEFAULT_CONFIG: {
+    center: [116.921280, 36.650390] as [number, number], // 默认中心点（济南）
+    zoom: 15,
+    mapType: 'vec' as 'vec' | 'img' | 'ter',
+  },
+  
+  // 搜索API配置
+  SEARCH_CONFIG: {
+    maxResults: 10,
+    level: 18,
+  }
+};
+
+/**
+ * 获取天地图API Key
+ */
+export function getTiandituApiKey(): string {
+  return TIANDITU_CONFIG.API_KEY;
+}
+
+/**
+ * 获取天地图JS API URL
+ */
+export function getTiandituJsApiUrl(): string {
+  return `${TIANDITU_CONFIG.JS_API_URL}?v=4.0&tk=${TIANDITU_CONFIG.API_KEY}`;
+}
+
+/**
+ * 获取天地图搜索API URL
+ */
+export function getTiandituSearchUrl(keyword: string): string {
+  const { API_BASE_URL, API_KEY, SEARCH_CONFIG } = TIANDITU_CONFIG;
+  const encodedKeyword = encodeURIComponent(keyword);
+
+  const postStr = JSON.stringify({
+    keyWord: keyword,
+    level: SEARCH_CONFIG.level.toString(),
+    mapBound: "0,0,0,0",
+    queryType: "7",
+    start: "0",
+    count: SEARCH_CONFIG.maxResults.toString()
+  });
+
+  return `${API_BASE_URL}/v2/search?postStr=${encodeURIComponent(postStr)}&type=query&tk=${API_KEY}`;
+}
+
+/**
+ * 获取天地图逆地理编码API URL
+ * 根据经纬度获取地址信息
+ */
+export function getTiandituReverseGeocodeUrl(lng: number, lat: number): string {
+  const { API_KEY } = TIANDITU_CONFIG;
+
+  const postStr = JSON.stringify({
+    lon: lng,
+    lat: lat,
+    ver: 1
+  });
+
+  return `https://api.tianditu.gov.cn/geocoder?postStr=${encodeURIComponent(postStr)}&type=geocode&tk=${API_KEY}`;
+}
+
+/**
+ * 获取默认地图配置
+ */
+export function getDefaultMapConfig() {
+  return {
+    ...TIANDITU_CONFIG.DEFAULT_CONFIG,
+    apiKey: TIANDITU_CONFIG.API_KEY,
+  };
+}
diff --git a/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_form.ts b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_form.ts
new file mode 100644
index 0000000..fd3119c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_form.ts
@@ -0,0 +1,31 @@
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { DefaultType } from './index';
+
+export const _form = {
+  /** 默认配置 */
+  default: {
+    layout: 'vertical',
+    commonConfig: {
+      labelClass: `font-bold`,
+      componentProps: {
+        class: 'w-[100%] mb-2',
+      },
+      formItemClass: 'col-span-12',
+    },
+    wrapperClass: 'grid-cols-12 gap-x-2 w-[100%]',
+    showDefaultActions: false,
+  },
+  grid: {
+    layout: 'vertical',
+    commonConfig: {
+      labelClass: `font-bold`,
+      componentProps: {
+        class: 'w-[100%] mb-2',
+      },
+      formItemClass: 'col-span-6',
+    },
+    wrapperClass: 'grid-cols-12 gap-x-2 w-[100%]',
+    showDefaultActions: false,
+  },
+} satisfies DefaultType<VbenFormProps>;
diff --git a/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_function.ts b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_function.ts
new file mode 100644
index 0000000..109fb23
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_function.ts
@@ -0,0 +1,146 @@
+import type { Ref } from 'vue';
+
+import type { useVbenModal } from '@vben/common-ui';
+import type { useVbenVxeGrid } from '@vben/plugins/vxe-table';
+
+import { message } from 'ant-design-vue';
+import { merge } from 'lodash-es';
+
+import { useVbenForm } from '#/adapter/form';
+
+type GridApiType = ReturnType<typeof useVbenVxeGrid>[1];
+type FormApiType = ReturnType<typeof useVbenForm>[1];
+type ModalApiType = ReturnType<typeof useVbenModal>[1];
+type MaybePromise<T = any> = PromiseLike<T> | T;
+
+export const _function = {
+  /** ====================  其他  ==================== */
+  /** 合并配置项 */
+  mergeConfig: (oldConfig: any, newConfig: any) => {
+    return merge({}, oldConfig, newConfig);
+  },
+  /** ====================  表格  ==================== */
+  /** 注册表格勾选事件 */
+  gridCheckBoxInit: (gridApi: GridApiType, data: Ref<any[]>) => {
+    const fun = () => {
+      data.value = gridApi.grid.getCheckboxRecords();
+    };
+
+    gridApi.setState({
+      gridOptions: {
+        proxyConfig: {
+          ajax: {
+            querySuccess: async (...args: any[]) => {
+              data.value = [];
+              return args;
+            },
+          },
+        },
+      },
+      gridEvents: {
+        checkboxChange: fun,
+        checkboxAll: fun,
+      },
+    });
+  },
+  /** ====================  表单  ==================== */
+  /**
+   * 表单验证
+   * @returns [boolean, Record<string, any>] 表单是否验证通过, 表单对象
+   */
+  formValidate: async (
+    formApi: FormApiType,
+  ): Promise<[boolean, Record<string, any>]> => {
+    const { valid } = await formApi.validate();
+    if (!valid) return [false, {}];
+    const values = await formApi.getValues();
+    const res: Record<string, any> = {};
+    Object.keys(values).forEach((key) => {
+      if (!key.startsWith('xxx-tips-')) {
+        res[key] = values[key];
+      }
+    });
+    return [true, res];
+  },
+
+  /**
+   * Modal表单安全提交
+   * @param fn 要进行的操作,支持直接传 Promise 或返回 Promise 的函数
+   * @param modalApi modalApi
+   * @param params 可选参数
+   * @param params.afterSuccess 成功后的异步回调
+   * @param params.autoClose 是否自动关闭弹窗
+   * @param params.emit 成功后直接执行 emit 调用
+   * @param params.successMessage 成功提示消息
+   * @description 表单提交时,设置loading状态
+   */
+  formSubmit: async (
+    fn: (() => Promise<any>) | Promise<any>,
+    modalApi: ModalApiType,
+    params?: {
+      afterSuccess?: () => MaybePromise;
+      autoClose?: boolean;
+      emit?: any;
+      successMessage?: string;
+    },
+  ) => {
+    modalApi.setState({
+      loading: true,
+      submitting: true,
+    });
+    try {
+      await (typeof fn === 'function' ? fn() : fn);
+      if (params?.afterSuccess) await Promise.resolve(params.afterSuccess());
+      if (params?.emit) params.emit();
+      if (params?.successMessage) {
+        message.success(params.successMessage);
+      }
+      if (params?.autoClose) {
+        modalApi.close();
+      }
+    } catch (error) {
+      console.error(error);
+      return;
+    } finally {
+      modalApi.setState({
+        loading: false,
+        submitting: false,
+      });
+    }
+  },
+  /** ====================  模态框  ==================== */
+  /** 模态框自动加载 */
+  modalAutoLoad: (
+    modalApi: ModalApiType,
+    fn: () => Promise<any>,
+    showMessage?: boolean,
+  ) => {
+    modalApi.setState({ confirmLoading: true, loading: true });
+    try {
+      fn();
+    } catch (error) {
+      console.error(error);
+      showMessage && message.error('加载失败:', error as any);
+      return;
+    } finally {
+      modalApi.setState({ confirmLoading: false, loading: false });
+    }
+  },
+  /** 模态框自动加载(异步) */
+  modalAutoLoadAsync: async (
+    modalApi: ModalApiType,
+    fn: () => Promise<any>,
+    showMessage?: boolean,
+  ) => {
+    modalApi.setState({ confirmLoading: true, loading: true });
+    try {
+      await fn();
+    } catch (error) {
+      console.error(error);
+      showMessage && message.error('加载失败:', error as any);
+      return;
+    } finally {
+      modalApi.setState({ confirmLoading: false, loading: false });
+    }
+  },
+};
diff --git a/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_grid.ts b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_grid.ts
new file mode 100644
index 0000000..161422d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_grid.ts
@@ -0,0 +1,44 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { DefaultType } from './index';
+
+export const _grid = {
+  /** 默认配置 */
+  default: {
+    height: 'auto',
+    keepSource: true,
+    showOverflow: false,
+    columnConfig: {
+      resizable: false,
+    },
+    rowConfig: {
+      isHover: true,
+    },
+    checkboxConfig: {
+      highlight: true,
+    },
+    radioConfig: {
+      highlight: true,
+    },
+    align: 'center',
+  },
+  /** 默认配置 */
+  modal: {
+    height: '500',
+    keepSource: true,
+    showOverflow: false,
+    columnConfig: {
+      resizable: false,
+    },
+    rowConfig: {
+      isHover: true,
+    },
+    checkboxConfig: {
+      highlight: true,
+    },
+    radioConfig: {
+      highlight: true,
+    },
+    align: 'center',
+  },
+} satisfies DefaultType<VxeTableGridOptions>;
diff --git a/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_gridForm.ts b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_gridForm.ts
new file mode 100644
index 0000000..303a7dd
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_gridForm.ts
@@ -0,0 +1,36 @@
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { DefaultType } from './index';
+
+export const _gridForm = {
+  /** 默认配置 */
+  default: {
+    showCollapseButton: true,
+    submitOnChange: true,
+    submitOnEnter: false,
+    compact: false,
+    collapsed: true,
+    collapsedRows: 1,
+    commonConfig: {
+      formItemClass: 'col-span-1',
+      labelWidth: 80,
+      labelClass: 'justify-start ml-4',
+    },
+    wrapperClass: 'grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-4 bg-red',
+  },
+  /** 自定义 */
+  custom: {
+    showCollapseButton: true,
+    submitOnChange: true,
+    submitOnEnter: false,
+    compact: false,
+    collapsed: true,
+    collapsedRows: 1,
+    commonConfig: {
+      formItemClass: 'col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3',
+      labelWidth: 80,
+      labelClass: 'ml-0 justify-start md:ml-4',
+    },
+    wrapperClass: 'grid-cols-12 gap-x-4',
+  },
+} satisfies DefaultType<VbenFormProps>;
diff --git a/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_modal.ts b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_modal.ts
new file mode 100644
index 0000000..dad18d1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/_modal.ts
@@ -0,0 +1,20 @@
+import type { ModalProps } from '@vben/common-ui';
+
+import type { DefaultType } from './index';
+
+export const _modal = {
+  /** 默认配置 */
+  default: {
+    class: 'w-[600px]',
+    closeOnClickModal: false,
+    centered: true,
+    contentClass: 'min-h-0',
+  },
+  /** grid */
+  grid: {
+    class: 'w-[1200px] max-w-[100vw]',
+    closeOnClickModal: false,
+    centered: true,
+    contentClass: 'min-h-0',
+  },
+} satisfies DefaultType<ModalProps>;
diff --git a/admin-ui/vue/apps/web-antd/src/constants/BetterVben/index.ts b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/index.ts
new file mode 100644
index 0000000..5739ef8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/constants/BetterVben/index.ts
@@ -0,0 +1,33 @@
+import type { ModalProps, VbenFormProps } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+import type { DeepPartial } from '@vben/types';
+
+import { _form } from './_form';
+import { _function } from './_function';
+import { _grid } from './_grid';
+import { _gridForm } from './_gridForm';
+import { _modal } from './_modal';
+
+const BetterVben: BetterVben = {
+  modal: _modal,
+  form: _form,
+  grid: {
+    formOptions: _gridForm,
+    gridOptions: _grid,
+  },
+  function: _function,
+};
+
+interface BetterVben {
+  modal: Record<keyof typeof _modal, ModalProps>;
+  form: Record<keyof typeof _form, VbenFormProps>;
+  grid: {
+    formOptions: Record<keyof typeof _gridForm, VbenFormProps>;
+    gridOptions: Record<keyof typeof _grid, VxeTableGridOptions>;
+  };
+  function: { [K in keyof typeof _function]: (typeof _function)[K] };
+}
+
+export type DefaultType<T> = Record<string, DeepPartial<T>>;
+
+export default BetterVben;
diff --git a/admin-ui/vue/apps/web-antd/src/constants/DictEnum.ts b/admin-ui/vue/apps/web-antd/src/constants/DictEnum.ts
new file mode 100644
index 0000000..6caf7d2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/constants/DictEnum.ts
@@ -0,0 +1,139 @@
+/* eslint-disable perfectionist/sort-enums */
+enum DictEnum {
+  /** ====================  全局  ==================== */
+  /** 全局-是否启用(数字) 0:启用 1:停用 */
+  GLOBAL_ENABLED = 'global_enable',
+  /** 全局-是否(数字) 0:是 1:否 */
+  GLOBAL_YES_OR_NO = 'global_yes_or_no',
+  /** 通道-是否轮询 0:参与同步 1:不参与同步 */
+  T_CHANNEL_SYNC_ENABLED = 't_channel_sync_enabled',
+
+  /** ====================  IOTLCM  ==================== */
+  /** 套餐类型 101:卡套餐 102:池套餐 103:单卡加油包 104:池卡加油包 */
+  T_PACKAGE_TYPE = 't_package_type',
+  /** 计费方式 1:月 2:年 */
+  T_BILLING_METHOD = 't_billing_method',
+  /** 批次类型 1:卡入库 2:卡出库 3:卡划拨 4:卡续费 5:卡变更 */
+  T_BATCH_TYPE = 't_batch_type',
+  /** 通用批次类型 1:入库 2:出库 3:划拨 4:内部预处理 11/12:加油包订购 */
+  T_GLOBAL_BATCH_TYPE = 'batch_type',
+  /** 批次来源方式 0:批次选择 1:连号 2:批量输入 3:文件 4:定时任务 */
+  T_BATCH_SOURCE_TYPE = 't_batch_source_type',
+  T_BATCH_SOURCE_CHANNEL = 't_batch_source_channel',
+  T_BATCH_EXECUTION_MODE = 't_batch_execution_mode',
+  /** 批次异步状态 0:已创建 1:待处理 2:处理中 3:成功 4:失败 */
+  T_BATCH_ASYNC_STATUS = 'batch_async_status',
+  /** 批次运行结果 0:待运行 1:运行中 2:成功 3:失败 */
+  T_RUN_RESULT = 'run_result',
+  /** 批次明细状态  */
+  T_DETAIL_STATUS = 'detail_status',
+  /** 渠道适用类型 0:所有客户 1:指定客户 */
+  T_AGENT_SCOPE_TYPE = 't_agent_scope_type',
+  /** 运营商 1:移动 2:联通 3:电信 */
+  T_OPERATORS = 't_operators',
+  /** 卡信息_维度状态*/
+  T_CARDINFO_DIMENSIONSTATUS = 't_cardInfo_dimensionStatus',
+  /** 卡信息_查询维度 */
+  T_CARDINFO_DIMENSION = 't_cardInfo_dimension',
+  /** 卡信息_查询时间类型 */
+  T_CARDINFO_TIMETYPE = 't_cardInfo_timeType',
+  /** 卡信息_查询条件 */
+  T_CARDINFO_SELECTCONDITIONS = 't_cardInfo_selectCondition',
+  /** 卡信息_排序值 */
+  T_CARDINFO_SORTVALUE = 't_cardInfo_sortValue',
+  /** 卡信息_排序类型 */
+  T_CARDINFO_SORTTYPE = 't_cardInfo_sortType',
+  /** 网络类型 */
+  T_NET_MODEL = 't_net_model',
+  /** 卡状态 待激活:1 已激活:2 停机:4 可测试:6 库存:7 预销户:8 已销户:9 未知:0 */
+  T_BOSS_CARD_STATUS = 't_boss_card_status',
+  /** 流量池状态 正常:0 停用:1 锁定:2 */
+  T_POOL_STATUS = 't_pool_status',
+  /** 卡类型 1:插拔 2:贴片卡5X6 3:贴片卡2X2 4:插拔卡(MP1) 5:插拔卡(MP2) 6:贴片卡(MS0) 7:贴片卡(MS1) */
+  T_CARD_TYPE = 't_card_type',
+  /** 套餐状态 0:无套餐 1:待生效 2:生效中 3:已过期 */
+  T_PACKAGE_STATUS = 't_package_status',
+  /** 套餐管理-是否启用 1:启用 0:停用 */
+  FLOW_PACKAGE_ENABLED = 'flow_package_enabled',
+  /** 套餐定价-价格来源 system:系统兜底 agentDefault:本级默认 */
+  T_PACKAGE_PRICE_SOURCE = 't_package_price_source',
+  /** 此处为流量池名称  每次新增流量池套餐需要进行配置*/
+  T_POOL_PACKAGE_CODE = 'pool_package_code',
+  /** 通道状态 0:启用 1:停用 2:未申请 3:申请中 4:接口信息不全 */
+  T_CHANNELS_STATUS = 't_channels_status',
+  /** 是否开放共享Token 0:否 1:是 */
+  SHARE_ENABLED = 'share_enabled',
+  /** 通道对接信息 0:接口信息不全 1:接口申请中 2:不需要对接 3:已对接 4:未申请 5:接口订阅不全 */
+  T_CHANNEL_DOCKING_STATUS = 't_channel_docking_status',
+  /** 工单类型 0:卡 1:模组 2:设备 3:订单 4:余额 5:提现 */
+  WO_TYPE = 'wo_type',
+  /** 创建人类型 1:终端用户 2:代理商 */
+  CREATOR_TYPE = 'creator_type',
+  /** 当前处理状态 1:已分派 2:处理中 3:已解决 4:已完结_关单 5:已取消 */
+  CURRENT_STATUS = 'current_status',
+  /** 操作类型 0:创建 1:分派 2:处理 3:完成 4:关单 5:取消 */
+  OPERATION_TYPE = 'operation_type',
+  /** 请求方法 1:POST 2:PUT 3:DELETE 4:GET */
+  T_METHOD = 'method',
+  /** 收支类型 0:收入 1:支出 */
+  INCOME_EXPENSE_TYPE = 'income_expense_type',
+  /** 变动类型 0:分润 1:提现 2:转出 3:转入 4:还款 */
+  CHANGE_TYPE = 'change_type',
+  /** 订单类型 1:卡订购 2: 卡续费 3: 卡变更 */
+  ORDER_TYPE = 'order_type',
+  /** 支付类型 1:在线支付 2:货到付款 3:线下支付 4:余额支付 */
+  PAY_TYPE = 'pay_type',
+  /** 交易类型 0:充值  1:消费 2:转可提现  3:可提现转入  4:人工调整 */
+  TRANSACTION_TYPE = 'transaction_type',
+  /** 交易渠道 1:支付宝 2:微信  3:可提现金额 */
+  TRANSACTION_CHANNEL = 'transaction_channel',
+  /** 生效状态 0:待生效 1:生效中 2:已过期 3:已终止 4:已作废 */
+  T_EFFECTIVE_STATUS = 'effective_status',
+  /** 审核结果 0:通过 1:驳回 */
+  AUDIT_RESULT = 'audit_result',
+  /** 申请类型 1:提现申请 2:余额转提现 */
+  APPLY_TYPE = 'apply_type',
+  /** 审核类型 1:初审 2:复审 */
+  AUDIT_TYPE = 'audit_type',
+  /** 提现账号类型 1:银行卡 2:支付宝 3:微信 */
+  /** 提现账号类型 1:银行卡 2:支付宝 3:微信 */
+  ACCOUNT_TYPE = 'account_type',
+  /** 状态 0:待审核 1:已通过 2:已驳回 3:已打款 4:已取消 */
+  APPLY_STATUS = 'apply_status',
+
+/** 消息类型 1:系统通知  2:活动通知  3:订单通知  4:账户通知 */
+MESSAGE_TYPE = 'message_type',
+
+/** 发送用户类型 1:代理商  2:终端用户 */
+SEND_USER_TYPE = 'send_user_type',
+
+/** 是否撤回 0:未撤回  1:已撤回 */
+IS_RECALL = 'is_recall',
+
+/** 交易状态 0:待支付 1:已支付 2:已过期 3:交易失败 */
+TRANSACTION_STATUS = 'transaction_status',
+
+
+/** 订单状态 0 待确定，待支付  1 已确定，待发货  2处理中，已发货  3 已取消  4 无效  5 已完成 */
+ORDER_STATUS = 'order_status',
+
+/** 支付状态 0 未支付  1 支付中 2 已支付 3 退款中 4 部分退款 5 已退款 */
+PAY_STATUS = 'pay_status',
+
+/** shipping_status 0:未发货 1:已发货 2:已收货 4:退货 */
+SHIPPING_STATUS = 'shipping_status',
+
+/** 退货状态 0未退款 1待审核 2执行中 3部分退货 4退货成功 */
+RETURN_STATUS = 'return_status',
+
+/** 发货方式 1 物流 2 商家自提 3 无需配送 */
+SHIPPING_METHOD = 'shipping_method',
+
+/** 是否需要分佣 0:分佣  1:不分佣  */
+IS_NEED_COMMISSION = 'is_need_commission',
+
+/** 分销分成状态 0:未分成 1:已分成 */
+DISTRIBUTION_STATUS = 'distribution_status',
+
+}
+export default DictEnum;
diff --git a/admin-ui/vue/apps/web-antd/src/constants/FormOption.ts b/admin-ui/vue/apps/web-antd/src/constants/FormOption.ts
new file mode 100644
index 0000000..b75e214
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/constants/FormOption.ts
@@ -0,0 +1,232 @@
+import type { SwitchProps, TextAreaProps } from 'ant-design-vue';
+
+import type { AnyPromiseFunction, DeepPartial } from '@vben/types';
+
+import { merge } from 'lodash-es';
+
+import { getAgentDeptListApi as TGetAgentDeptListApi } from '#/api/agent';
+import { List as TSimChannelsList } from '#/api/iotlcm/tChannel/tSimChannels';
+import { GetTSimFlowPackagePriceAgentTreeApi as TSimFlowPackagePriceAgentTreeApi } from '#/api/iotlcm/tPricingPackage/tSimFlowPackagePrice';
+import { List as TSimPackageCategory } from '#/api/iotlcm/tPricingPackage/tSimPackageCategory';
+import { List as TSimUpstreamPackage } from '#/api/iotlcm/tPricingPackage/tSimUpstreamPackage';
+
+type OptionsItem = {
+  [name: string]: any;
+  children?: OptionsItem[];
+  disabled?: boolean;
+  label?: string;
+  value?: string;
+};
+
+function buildDeptTree(list: OptionsItem[]) {
+  const nodeMap = new Map<number, OptionsItem>();
+  const tree: OptionsItem[] = [];
+
+  list.forEach((item) => {
+    nodeMap.set(Number(item.deptId), { ...item, children: [] });
+  });
+
+  nodeMap.forEach((item) => {
+    const parent = nodeMap.get(Number(item.parentId));
+    if (parent) {
+      parent.children?.push(item);
+    } else {
+      tree.push(item);
+    }
+  });
+
+  nodeMap.forEach((item) => {
+    if (item.children?.length === 0) {
+      delete item.children;
+    }
+  });
+
+  return tree;
+}
+
+interface ApiFormOptions {
+  placeholder?: string;
+  /** 是否将value从数字转为string */
+  numberToString?: boolean;
+  /** 获取options数据的函数 */
+  api?: (arg?: any) => Promise<OptionsItem[] | Record<string, any>>;
+  /** 传递给api的参数 */
+  params?: Record<string, any>;
+  /** 从api返回的结果中提取options数组的字段名 */
+  resultField?: string;
+  /** label字段名 */
+  labelField?: string;
+  /** children字段名，需要层级数据的组件可用 */
+  childrenField?: string;
+  /** value字段名 */
+  valueField?: string;
+  /** disabled字段名 */
+  disabledField?: string;
+  /** 组件接收options数据的属性名 */
+  optionsPropName?: string;
+  /** 是否立即调用api */
+  immediate?: boolean;
+  /** 每次`visibleEvent`事件发生时都重新请求数据 */
+  alwaysLoad?: boolean;
+  /** 在api请求之前的回调函数 */
+  beforeFetch?: AnyPromiseFunction<any, any>;
+  /** 在api请求之后的回调函数 */
+  afterFetch?: AnyPromiseFunction<any, any>;
+  /** 直接传入选项数据，也作为api返回空数据时的后备数据 */
+  options?: OptionsItem[];
+  /** 组件的插槽名称，用来显示一个"加载中"的图标 */
+  loadingSlot?: string;
+  /** 触发api请求的事件名 */
+  visibleEvent?: string;
+  /** 组件的v-model属性名，默认为modelValue。部分组件可能为value */
+  modelPropName?: string;
+  /**
+   * 自动选择
+   * - `first`：自动选择第一个选项
+   * - `last`：自动选择最后一个选项
+   * - `one`: 当请求的结果只有一个选项时，自动选择该选项
+   * - 函数：自定义选择逻辑，函数的参数为请求的结果数组，返回值为选择的选项
+   * - false：不自动选择(默认)
+   */
+  autoSelect?:
+    | 'first'
+    | 'last'
+    | 'one'
+    | ((item: OptionsItem[]) => OptionsItem)
+    | false;
+}
+
+const FormOptions = {
+  Api: {
+    /** 通道列表 */
+    tSimChannels: (options?: ApiFormOptions) =>
+      initFormOptions(
+        {
+          placeholder: '请选择通道',
+          api: TSimChannelsList,
+          labelField: 'chanName',
+          valueField: 'chanKey',
+          params: {
+            enabled: 0,
+          },
+        },
+        options,
+      ),
+    /** 上游套餐列表 */
+    tSimUpstreamPackage: (options?: ApiFormOptions) =>
+      initFormOptions(
+        {
+          placeholder: '请选择上游套餐',
+          api: TSimUpstreamPackage,
+          labelField: 'upPkgName',
+          valueField: 'upPkgCode',
+        },
+        options,
+      ),
+    /** 套餐分类列表 */
+    tSimPackageCategory: (options?: ApiFormOptions) =>
+      initFormOptions(
+        {
+          placeholder: '请选择套餐分类',
+          api: TSimPackageCategory,
+          labelField: 'categoryName',
+          valueField: 'categoryCode',
+          params: {
+            enabled: 0,
+          },
+        },
+        options,
+      ),
+    /** 获取组织列表 */
+    agentDeptListApi: (options?: ApiFormOptions) =>
+      initFormOptions(
+        {
+          placeholder: '请选择组织',
+          api: TGetAgentDeptListApi,
+          labelField: 'deptName',
+          valueField: 'deptId',
+          childrenField: 'children',
+          params: {
+            status: 0,
+          },
+          afterFetch: (res) => {
+            return {
+              ...res,
+              items: buildDeptTree(res.items || []),
+            };
+          },
+        },
+        options,
+      ),
+    /** 获取直属下级 */
+    tSimFlowPackagePriceAgentTreeApi: (options?: ApiFormOptions) =>
+      initFormOptions(
+        {
+          placeholder: '请选择',
+          api: TSimFlowPackagePriceAgentTreeApi,
+          labelField: 'deptName',
+          valueField: 'deptId',
+          resultField: '',
+          afterFetch: (res) => {
+            return res.items[0].children;
+          },
+        },
+        options,
+      ),
+  },
+  Component: {
+    /** 开关 */
+    SwitchEnabled: (params?: DeepPartial<SwitchProps>) =>
+      merge(
+        {},
+        {
+          checkedValue: 0,
+          checkedChildren: '启用',
+          unCheckedValue: 1,
+          unCheckedChildren: '停用',
+          class: 'w-auto',
+        },
+        params,
+      ) /** 开关 */,
+    SwitchYesOrNo: (params?: DeepPartial<SwitchProps>) =>
+      merge(
+        {},
+        {
+          checkedValue: 0,
+          checkedChildren: '是',
+          unCheckedValue: 1,
+          unCheckedChildren: '否',
+          class: 'w-auto',
+        },
+        params,
+      ),
+    Textarea: (params?: DeepPartial<TextAreaProps>) =>
+      merge(
+        {
+          rows: 4,
+          autoSize: {
+            minRows: 4,
+            maxRows: 4,
+          },
+        },
+        params,
+      ),
+  },
+};
+
+function initFormOptions(
+  defaultOptions: ApiFormOptions = {},
+  options: ApiFormOptions = {},
+) {
+  return merge(
+    {
+      resultField: 'items',
+      autoSelect: 'first',
+      alwaysLoad: true,
+    } as ApiFormOptions,
+    defaultOptions,
+    options,
+  );
+}
+
+export default FormOptions;
diff --git a/admin-ui/vue/apps/web-antd/src/constants/RouterPath.ts b/admin-ui/vue/apps/web-antd/src/constants/RouterPath.ts
new file mode 100644
index 0000000..a32189c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/constants/RouterPath.ts
@@ -0,0 +1,4 @@
+enum RouterPath {
+
+}
+export default RouterPath;
diff --git a/admin-ui/vue/apps/web-antd/src/layouts/auth.vue b/admin-ui/vue/apps/web-antd/src/layouts/auth.vue
new file mode 100644
index 0000000..aff39d3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/layouts/auth.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, useAttrs } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences, updatePreferences } from '@vben/preferences';
+
+import { getRuntimeSetting, refreshRuntimeSetting } from '#/config/setting';
+import { $t } from '#/locales';
+import { createOverridesPreferences } from '#/preferences';
+
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const setting = ref(getRuntimeSetting());
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+const logoDark = computed(() => preferences.logo.sourceDark);
+const pageTitle = computed(
+  () => setting.value.loginPageTitle || $t('authentication.pageTitle'),
+);
+const pageDescription = computed(
+  () => setting.value.loginPageDescription || '',
+);
+const sloganImage = computed(() => setting.value.loginSloganImage || '');
+
+onMounted(async () => {
+  const latestSetting = await refreshRuntimeSetting();
+  setting.value = latestSetting;
+  updatePreferences(createOverridesPreferences(latestSetting));
+
+  if (latestSetting.appTitle) {
+    document.title = latestSetting.appTitle;
+  }
+
+  if (latestSetting.appIcon) {
+    const icon = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+    if (icon) {
+      icon.href = latestSetting.appIcon;
+    }
+  }
+});
+</script>
+
+<template>
+  <AuthPageLayout
+    v-bind="attrs"
+    :app-name="appName"
+    :logo="logo"
+    :logo-dark="logoDark"
+    :page-description="pageDescription"
+    :page-title="pageTitle"
+    :slogan-image="sloganImage"
+  />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/layouts/basic.vue b/admin-ui/vue/apps/web-antd/src/layouts/basic.vue
new file mode 100644
index 0000000..e59edb4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/layouts/basic.vue
@@ -0,0 +1,774 @@
+<script lang="ts" setup>
+import type { NotificationItem } from '@vben/layouts';
+
+import type { DownloadCenterItem } from '#/api/common/downloadCenter';
+
+import { computed, onUnmounted, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { AuthenticationLoginExpiredModal, VbenButton } from '@vben/common-ui';
+import { useWatermark } from '@vben/hooks';
+import { DownloadOutlined, UserOutlined } from '@vben/icons';
+import {
+  BasicLayout,
+  LockScreen,
+  Notification,
+  UserDropdown,
+} from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+import { useAccessStore, useUserStore } from '@vben/stores';
+
+import { useWebSocket } from '@vueuse/core';
+import { Badge, Button, Popover } from 'ant-design-vue';
+
+import {
+  Download as DownloadExportFile,
+  Recent as RecentExportTasks,
+} from '#/api/common/downloadCenter';
+import { Read, ReadAll, UnreadList } from '#/api/common/tMessageLog';
+import { $t } from '#/locales';
+import { useAuthStore } from '#/store';
+import { downloadByData } from '#/utils/file/download';
+import FirstLoginGuideModal from '#/views/_core/authentication/components/first-login-guide-modal.vue';
+import LoginForm from '#/views/_core/authentication/login.vue';
+
+const notifications = ref<NotificationItem[]>([
+  // {
+  //   id: 1,
+  //   avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
+  //   date: '3小时前',
+  //   isRead: true,
+  //   message: '描述信息描述信息描述信息',
+  //   title: '收到了 14 份新周报',
+  // },
+  // {
+  //   id: 2,
+  //   avatar: 'https://avatar.vercel.sh/1',
+  //   date: '刚刚',
+  //   isRead: false,
+  //   message: '描述信息描述信息描述信息',
+  //   title: '朱偏右 回复了你',
+  // },
+  // {
+  //   id: 3,
+  //   avatar: 'https://avatar.vercel.sh/1',
+  //   date: '2024-01-01',
+  //   isRead: false,
+  //   message: '描述信息描述信息描述信息',
+  //   title: '曲丽丽 评论了你',
+  // },
+  // {
+  //   id: 4,
+  //   avatar: 'https://avatar.vercel.sh/satori',
+  //   date: '1天前',
+  //   isRead: false,
+  //   message: '描述信息描述信息描述信息',
+  //   title: '代办提醒',
+  // },
+  // {
+  //   id: 5,
+  //   avatar: 'https://avatar.vercel.sh/satori',
+  //   date: '1天前',
+  //   isRead: false,
+  //   message: '描述信息描述信息描述信息',
+  //   title: '跳转Workspace示例',
+  //   link: '/workspace',
+  // },
+  // {
+  //   id: 6,
+  //   avatar: 'https://avatar.vercel.sh/satori',
+  //   date: '1天前',
+  //   isRead: false,
+  //   message: '描述信息描述信息描述信息',
+  //   title: '跳转外部链接示例',
+  //   link: 'https://doc.vben.pro',
+  // },
+]);
+const accessStore = useAccessStore();
+const state = reactive({
+  server: getWsServerUrl(),
+});
+const wsServerUrl = computed(() => state.server);
+const {
+  close: closeWs,
+  data: wsData,
+  open: openWs,
+  send: sendWs,
+  status: wsStatus,
+} = useWebSocket(wsServerUrl, {
+  autoReconnect: true,
+  heartbeat: false,
+  immediate: false,
+});
+
+const router = useRouter();
+const userStore = useUserStore();
+const authStore = useAuthStore();
+const { destroyWatermark, updateWatermark } = useWatermark();
+const showDot = computed(() =>
+  notifications.value.some((item) => !item.isRead),
+);
+/**
+ * 消息日志列表页路径。
+ * 对应后端菜单「通知管理(notify) → 消息日志列表(tMessageLog)」，
+ * 完整路由由 vue-router 把父子 path 嵌套拼出，即 /notify/tMessageLog。
+ * 注意别写成 /common/tMessageLog —— /common 是后端接口前缀，不是前端路由前缀。
+ */
+const MESSAGE_LOG_PATH = '/notify/tMessageLog';
+
+const menus = computed(() => [
+  {
+    handler: () => {
+      router.push('/profile');
+    },
+    icon: UserOutlined,
+    text: $t('ui.widgets.profile'),
+  },
+  // {
+  //   handler: () => {
+  //     openWindow(VBEN_DOC_URL, {
+  //       target: '_blank',
+  //     });
+  //   },
+  //   icon: BookOpenText,
+  //   text: $t('ui.widgets.document'),
+  // },
+  // {
+  //   handler: () => {
+  //     openWindow(VBEN_GITHUB_URL, {
+  //       target: '_blank',
+  //     });
+  //   },
+  //   icon: MdiGithub,
+  //   text: 'GitHub',
+  // },
+  // {
+  //   handler: () => {
+  //     openWindow(`${VBEN_GITHUB_URL}/issues`, {
+  //       target: '_blank',
+  //     });
+  //   },
+  //   icon: CircleHelp,
+  //   text: $t('ui.widgets.qa'),
+  // },
+]);
+
+const avatar = computed(() => {
+  return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
+});
+
+async function handleLogout() {
+  await authStore.logout(false);
+}
+
+function handleNoticeClear() {
+  const generation = identityGeneration;
+  // 先留存本次清空覆盖的列表与 id，失败时用于本地回滚。
+  const previous = [...notifications.value];
+  const ids = previous.map((item) => String(item.id));
+  invalidateUnreadRequest();
+  notifications.value = [];
+  protectPendingReads(ids);
+  // 清空通知时同步服务端已读，否则重新登录或断线重连会再次提示这些未读消息。
+  // 同步结束（无论成败）都重新拉取：成功用于清理同步期间新到的推送，失败用于恢复未读展示。
+  // 先 catch 再 finally：只挂 finally 会把 ReadAll 的失败变成未处理的 Promise 拒绝。
+  ReadAll()
+    .catch(() => {
+      if (generation !== identityGeneration) {
+        return;
+      }
+      // 同步失败：先本地回滚，避免「同步失败 + 随后的重新拉取也失败」时提醒一直空着。
+      releasePendingReads(ids);
+      notifications.value = previous;
+    })
+    .finally(() => {
+      // 期间若已切换账号，结果属于上一个账号，重新拉取会覆盖新账号的提醒。
+      if (generation !== identityGeneration) {
+        return;
+      }
+      loadUnreadNotifications();
+    });
+}
+
+function markRead(id: number | string) {
+  const item = notifications.value.find((item) => item.id === id);
+  if (item) {
+    item.isRead = true;
+  }
+  // 同步服务端已读状态，避免重新登录后已处理的消息再次出现在未读提醒里。
+  const messageLogId = Number(id);
+  if (!Number.isFinite(messageLogId) || messageLogId <= 0) {
+    return;
+  }
+  const key = String(id);
+  const generation = identityGeneration;
+  // 标记期间无论有在途还是新发起的未读拉取、实时推送，都不能把这条已读消息按未读重新展示。
+  // 这里不作废在途拉取：作废会连带丢掉同一批离线未读消息，只靠 pendingReadIds 过滤本条即可。
+  pendingReadIds.add(key);
+  Read({ messageLogId })
+    .then(() => {
+      if (generation !== identityGeneration) {
+        return;
+      }
+      // 列表此前被分页截断（未读数超过返回上限）时，读掉一条就要补拉，
+      // 否则排在分页之外的未读会一直显示不出来。未截断时保留已读项（组件里有删除按钮）。
+      if (unreadTruncated) {
+        loadUnreadNotifications();
+      }
+    })
+    .catch(() => {
+      if (generation !== identityGeneration) {
+        return;
+      }
+      // 同步失败则恢复未读并重新拉取，把仍在服务端未读的消息补回展示。
+      pendingReadIds.delete(key);
+      if (item) {
+        item.isRead = false;
+      }
+      loadUnreadNotifications();
+    });
+}
+
+function remove(id: number | string) {
+  notifications.value = notifications.value.filter((item) => item.id !== id);
+}
+
+function handleMakeAll() {
+  const generation = identityGeneration;
+  // 先留存本次全部已读覆盖的列表与各自已读状态，失败时用于本地回滚。
+  const previous = notifications.value.map((item) => ({
+    isRead: item.isRead,
+    item,
+  }));
+  const ids = notifications.value.map((item) => String(item.id));
+  invalidateUnreadRequest();
+  protectPendingReads(ids);
+  notifications.value.forEach((item) => (item.isRead = true));
+  // 全部已读覆盖的是请求发起时刻的消息：结束后重新拉取，校正期间新到的推送。
+  // 先 catch 再 finally，避免 ReadAll 失败产生未处理的 Promise 拒绝。
+  ReadAll()
+    .catch(() => {
+      if (generation !== identityGeneration) {
+        return;
+      }
+      // 同步失败：先本地回滚已读标记，避免「同步失败 + 随后重新拉取也失败」时未读角标一直不亮。
+      releasePendingReads(ids);
+      for (const { isRead, item } of previous) {
+        item.isRead = isRead;
+      }
+    })
+    .finally(() => {
+      // 期间若已切换账号，结果属于上一个账号，重新拉取会覆盖新账号的提醒。
+      if (generation !== identityGeneration) {
+        return;
+      }
+      loadUnreadNotifications();
+    });
+}
+
+// 「查看所有消息」：跳转到消息日志列表页
+function handleViewAll() {
+  router.push(MESSAGE_LOG_PATH);
+}
+
+// 未读拉取请求序号：账号切换或重复触发时只保留最后一次请求的结果。
+let unreadRequestSeq = 0;
+// 已成功应用结果的请求序号：较晚发起的请求失败时，不能连带丢掉较早那次成功的结果。
+let unreadAppliedSeq = 0;
+
+// 拉取期间通过实时推送到达的提醒：服务端快照可能早于这些消息，需要一并保留。
+const pushedDuringLoad = new Map<string, NotificationItem>();
+// 并发拉取按请求分别跟踪；后发请求先失败时，先发请求仍可能应用旧快照。
+const unreadRequestsInFlight = new Set<number>();
+// 已在本地标记已读的消息 id。应用未读快照与实时推送时据此过滤，避免把刚点开的
+// 已读消息按未读重新展示。会话内一直保留（退出登录/切换账号时清空）：
+// 过期的 websocket 推送可能晚于快照才到达，一旦提前解除过滤就会被重新点亮未读。
+const pendingReadIds = new Set<string>();
+// 身份代数：每次登录/退出/切换账号自增，用于丢弃上一个账号发起、尚未回来的异步回调。
+let identityGeneration = 0;
+// 上一次成功应用的未读快照是否被分页截断（未读数超过返回上限）。
+// 截断时列表只包含最新一批未读，读掉一条需要补拉才能露出后面的未读。
+let unreadTruncated = false;
+
+// 批量已读（全部已读/清空）覆盖的消息先纳入过滤：标记在途期间即使被推送或
+// 重连触发的拉取命中，也不能把它们按未读重新展示。
+function protectPendingReads(ids: string[]) {
+  for (const id of ids) {
+    pendingReadIds.add(id);
+  }
+}
+
+// 批量已读失败：解除过滤，让仍在服务端未读的消息恢复展示。
+function releasePendingReads(ids: string[]) {
+  for (const id of ids) {
+    pendingReadIds.delete(id);
+  }
+}
+
+// 作废在途的未读拉取：本地已读状态刚变更，较早的快照会把已读消息重新标成未读。
+// 被作废的请求不会再复位缓冲状态，这里一并复位，避免后续推送一直被缓存。
+function invalidateUnreadRequest() {
+  unreadRequestSeq += 1;
+  // 同时抬高「已应用序号」，让所有在途结果作废（含此前已成功的序号）。
+  unreadAppliedSeq = unreadRequestSeq;
+  unreadRequestsInFlight.clear();
+  pushedDuringLoad.clear();
+}
+
+/**
+ * 拉取当前登录用户的未读消息，初始化右上角消息提醒。
+ * 登录、刷新、断线重连都必须拉取：提醒此前只依赖实时 websocket 推送，
+ * 离线期间产生的消息不会补发，导致重新登录后看不到未读提醒。
+ * 单次最多展示 100 条未读（服务端上限 200）：未读角标只看「是否存在未读」，
+ * 列表按时间倒序取最新 100 条已足够，超出部分随已读/刷新逐步消失。
+ */
+async function loadUnreadNotifications() {
+  const seq = ++unreadRequestSeq;
+  // 不在此清空推送缓冲：并发拉取时后发起的请求会在前一个请求在途期间清掉缓冲，
+  // 导致该窗口内的实时推送既进不了缓冲、又可能早于服务端快照而被漏掉。
+  // 缓冲保留到所有在途拉取结束，或由 invalidateUnreadRequest 统一作废。
+  unreadRequestsInFlight.add(seq);
+  try {
+    const res = await UnreadList({ limit: 100 });
+    // 已经应用过更新的结果（切换账号/重连/本地已读作废）才丢弃本次结果。
+    // 注意不能按「是否还有更新的请求在途」判断：更新的请求失败时，
+    // 这次已经成功的结果就是唯一可用的数据，丢掉会让提醒一直空着。
+    if (seq <= unreadAppliedSeq) {
+      return;
+    }
+    const merged = new Map<string, NotificationItem>();
+    // 先放本次拉取期间新到的推送，保证它们不会被较早的服务端快照覆盖。
+    // 但本地已标记已读的消息仍要过滤：推送可能是延迟/重复的同一批消息。
+    for (const [id, notification] of pushedDuringLoad) {
+      if (!pendingReadIds.has(id)) {
+        merged.set(id, notification);
+      }
+    }
+    for (const item of res?.items ?? []) {
+      const notification = createNotificationItem(item);
+      const id = String(notification.id);
+      // 本地已标记已读的消息即使在快照里仍是未读，也不重新展示。
+      if (!merged.has(id) && !pendingReadIds.has(id)) {
+        merged.set(id, notification);
+      }
+    }
+    // 本次快照是否被分页截断：total 是服务端全部未读数，大于返回条数即为截断。
+    // 截断时更新列表只包含最新一批未读，读掉一条需要补拉才能露出后面的未读。
+    unreadTruncated = (res?.total ?? 0) > (res?.items?.length ?? 0);
+    notifications.value = [...merged.values()];
+    unreadAppliedSeq = seq;
+  } catch {
+    // 拉取失败不阻断页面；实时推送仍可用，下次登录或重连会再次拉取。
+  } finally {
+    // 每个请求只结束自己的在途状态；后发失败不能提前清掉先发请求所需的推送。
+    unreadRequestsInFlight.delete(seq);
+    if (unreadRequestsInFlight.size === 0) {
+      pushedDuringLoad.clear();
+    }
+  }
+}
+
+onUnmounted(() => {
+  closeWs();
+});
+
+watch(
+  () => accessStore.accessToken,
+  (token, prevToken) => {
+    // 只要身份发生变化（登录、切换账号、退出）就先清空上一个账号的提醒，
+    // 并作废在途拉取：否则在新数据返回前会短暂串号，且拉取失败时旧账号提醒会滞留。
+    if (token !== prevToken) {
+      // 身份变化：代数自增，丢弃上一个账号尚未回来的异步回调。
+      identityGeneration += 1;
+      invalidateUnreadRequest();
+      pendingReadIds.clear();
+      notifications.value = [];
+    }
+    if (!token) {
+      closeWs();
+      return;
+    }
+    state.server = getWsServerUrl();
+    if (wsStatus.value !== 'OPEN') {
+      openWs();
+    }
+    // 登录或切换账号后立即拉取未读消息，不依赖实时推送是否在线。
+    loadUnreadNotifications();
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(wsStatus, (status) => {
+  if (status === 'OPEN') {
+    sendWsLogin();
+    // 断线重连后补齐离线期间遗漏的未读消息。
+    loadUnreadNotifications();
+  }
+});
+
+watch(
+  () => userStore.userInfo?.id ?? userStore.userInfo?.userId ?? 0,
+  (userId) => {
+    if (wsStatus.value === 'OPEN' && Number(userId) > 0) {
+      sendWsLogin();
+    }
+  },
+);
+
+watch(wsData, (value) => {
+  if (!value) {
+    return;
+  }
+  handleWsMessage(value);
+});
+
+function getWsServerUrl() {
+  const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  return `${protocol}${window.location.host}/api/monitor/ws?access_token=${encodeURIComponent(
+    String(accessStore.accessToken),
+  )}`;
+}
+
+function parseWsData(value: string) {
+  try {
+    const data = JSON.parse(value);
+    if (
+      typeof data.d === 'string' &&
+      !data.d.startsWith('{') &&
+      !data.d.startsWith('[')
+    ) {
+      try {
+        data.d = atob(data.d);
+      } catch {
+        return data;
+      }
+    }
+    if (
+      typeof data.d === 'string' &&
+      (data.d.startsWith('{') || data.d.startsWith('['))
+    ) {
+      data.d = JSON.parse(data.d);
+    }
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+function handleWsMessage(value: string) {
+  const wsMessage = parseWsData(value);
+  if (!wsMessage?.e) {
+    return;
+  }
+  const eventName = String(wsMessage.e);
+  if (isWsControlEvent(eventName)) {
+    return;
+  }
+  const payload = normalizeNotificationPayload(wsMessage.d);
+  const notificationItem = createNotificationItem(payload);
+  if (!notificationItem) {
+    return;
+  }
+  // 本地已标记已读的消息即使又被推送（延迟/重复推送），也不再按未读提醒展示。
+  // 必须在入缓冲前判断，否则缓冲合并会绕过统一过滤。
+  if (pendingReadIds.has(String(notificationItem.id))) {
+    return;
+  }
+  // 记录到拉取缓冲：若有未读拉取在途，其服务端快照可能还没包含这条消息。
+  if (unreadRequestsInFlight.size > 0) {
+    pushedDuringLoad.set(String(notificationItem.id), notificationItem);
+  }
+  notifications.value = [
+    notificationItem,
+    ...notifications.value.filter((item) => item.id !== notificationItem.id),
+  ];
+}
+
+function isWsControlEvent(eventName: string) {
+  return [
+    'connected',
+    'join',
+    'joins',
+    'login',
+    'ping',
+    'quit',
+    'quits',
+  ].includes(eventName);
+}
+
+function normalizeNotificationPayload(data: any) {
+  if (!data) {
+    return {};
+  }
+  if (typeof data === 'string') {
+    try {
+      return JSON.parse(data);
+    } catch {
+      return {};
+    }
+  }
+  return data;
+}
+
+function sendWsLogin() {
+  const userId = Number(
+    userStore.userInfo?.id || userStore.userInfo?.userId || 0,
+  );
+  if (!userId) {
+    return;
+  }
+  sendWs(
+    JSON.stringify({
+      e: 'login',
+      d: {
+        userId,
+      },
+    }),
+  );
+}
+
+function createNotificationItem(payload: Record<string, any>) {
+  const id =
+    payload.messageLogId ??
+    payload.notifyId ??
+    `${Date.now()}-${Math.random()}`;
+  const title = String(
+    payload.messageTitle ?? payload.notifyTitle ?? '消息通知',
+  );
+  const message = String(payload.messageContent ?? payload.notifyContent ?? '');
+  const date = String(
+    payload.sendTime || payload.createdAt || payload.created_at || '刚刚',
+  );
+
+  return {
+    id,
+    avatar: payload.avatar || 'https://avatar.vercel.sh/msg.svg?text=MSG',
+    date,
+    isRead: false,
+    message,
+    title,
+    link: MESSAGE_LOG_PATH,
+    query: payload.messageLogId
+      ? { messageLogId: payload.messageLogId }
+      : payload.query || {},
+    state: payload.state,
+  } satisfies NotificationItem;
+}
+watch(
+  () => ({
+    enable: preferences.app.watermark,
+    content: preferences.app.watermarkContent,
+  }),
+  async ({ enable, content }) => {
+    if (enable) {
+      await updateWatermark({
+        content:
+          content ||
+          `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
+      });
+    } else {
+      destroyWatermark();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+/* ==================== 右上角下载中心入口 ==================== */
+const exportTasks = ref<DownloadCenterItem[]>([]);
+const exportRunningCount = ref(0);
+const exportPanelOpen = ref(false);
+let exportRefreshTimer: ReturnType<typeof setTimeout> | undefined;
+let exportLoading = false;
+let exportRefreshPending = false;
+let exportDisposed = false;
+
+const EXPORT_STATUS_TEXT: Record<number, string> = {
+  0: '排队中',
+  1: '已完成',
+  2: '生成中',
+  3: '失败',
+};
+
+async function loadExportTasks() {
+  if (exportDisposed) return;
+  const token = accessStore.accessToken;
+  if (!token) {
+    clearTimeout(exportRefreshTimer);
+    exportTasks.value = [];
+    exportRunningCount.value = 0;
+    return;
+  }
+  if (exportLoading) {
+    exportRefreshPending = true;
+    return;
+  }
+  clearTimeout(exportRefreshTimer);
+  exportLoading = true;
+  let loaded = false;
+  try {
+    const res = await RecentExportTasks(5);
+    if (exportDisposed || token !== accessStore.accessToken) return;
+    exportTasks.value = res?.items ?? [];
+    exportRunningCount.value = res?.runningCount ?? 0;
+    loaded = true;
+  } catch {
+    // 右上角入口属辅助信息，失败不打扰用户，也不持续重试。
+  } finally {
+    exportLoading = false;
+    const pending = exportRefreshPending;
+    exportRefreshPending = false;
+    if (
+      !exportDisposed &&
+      accessStore.accessToken &&
+      (pending ||
+        (loaded && (exportRunningCount.value > 0 || exportPanelOpen.value)))
+    ) {
+      exportRefreshTimer = setTimeout(loadExportTasks, pending ? 0 : 3000);
+    }
+  }
+}
+
+function scheduleExportRefresh() {
+  void loadExportTasks();
+}
+
+function handleExportPanelChange(open: boolean) {
+  exportPanelOpen.value = open;
+  if (open) {
+    loadExportTasks();
+  }
+}
+
+async function handleDownloadExportFile(item: DownloadCenterItem) {
+  if (item.status !== 1) {
+    return;
+  }
+  const data = await DownloadExportFile(item.id);
+  downloadByData(data as Blob, item.fileName || `${item.taskNo}.xlsx`);
+  void loadExportTasks();
+}
+
+function goDownloadCenter() {
+  exportPanelOpen.value = false;
+  router.push('/downloadCenter');
+}
+
+// 有进行中的任务或面板打开时刷新，任务结束后自动停止。
+window.addEventListener('iotlcm:export-submitted', scheduleExportRefresh);
+watch(
+  [() => router.currentRoute.value.path, () => accessStore.accessToken],
+  scheduleExportRefresh,
+  { immediate: true },
+);
+
+onUnmounted(() => {
+  exportDisposed = true;
+  window.removeEventListener('iotlcm:export-submitted', scheduleExportRefresh);
+  clearTimeout(exportRefreshTimer);
+});
+</script>
+
+<template>
+  <BasicLayout @clear-preferences-and-logout="handleLogout">
+    <template #user-dropdown>
+      <UserDropdown
+        :avatar
+        :menus
+        :text="userStore.userInfo?.realName"
+        :description="userStore.userInfo?.email"
+        tag-text="Pro"
+        @logout="handleLogout"
+      />
+    </template>
+    <template #header-right-105>
+      <Popover
+        :open="exportPanelOpen"
+        placement="bottomRight"
+        trigger="click"
+        @open-change="handleExportPanelChange"
+      >
+        <template #content>
+          <div class="w-[380px]">
+            <div class="mb-2 flex items-center justify-between">
+              <span class="font-medium">下载中心</span>
+              <Button type="link" size="small" @click="goDownloadCenter">
+                查看全部
+              </Button>
+            </div>
+            <div
+              v-if="exportTasks.length === 0"
+              class="py-6 text-center text-sm text-gray-400"
+            >
+              暂无导出任务
+            </div>
+            <div
+              v-for="item in exportTasks"
+              :key="item.id"
+              class="flex items-center gap-2 border-b border-gray-100 py-2 last:border-b-0"
+            >
+              <div class="min-w-0 flex-1">
+                <div class="truncate text-sm">
+                  {{ item.fileName || item.taskNo }}
+                </div>
+                <div class="text-xs text-gray-400">
+                  {{ item.bizName }} · {{ item.createdAt || '' }}
+                </div>
+              </div>
+              <Button
+                v-if="item.status === 1"
+                type="link"
+                size="small"
+                @click="handleDownloadExportFile(item)"
+              >
+                下载
+              </Button>
+              <span v-else class="text-xs text-gray-500">
+                {{ EXPORT_STATUS_TEXT[item.status] || '未知' }}
+              </span>
+            </div>
+          </div>
+        </template>
+        <span class="flex-center mr-1 h-full">
+          <Badge :count="exportRunningCount" :offset="[-2, 2]" size="small">
+            <VbenButton
+              aria-label="下载中心"
+              class="rounded-full hover:animate-[shrink_0.3s_ease-in-out]"
+              size="icon"
+              variant="icon"
+            >
+              <DownloadOutlined class="size-4" />
+            </VbenButton>
+          </Badge>
+        </span>
+      </Popover>
+    </template>
+    <template #notification>
+      <Notification
+        :dot="showDot"
+        :notifications="notifications"
+        @clear="handleNoticeClear"
+        @read="(item) => item.id && markRead(item.id)"
+        @remove="(item) => item.id && remove(item.id)"
+        @make-all="handleMakeAll"
+        @view-all="handleViewAll"
+      />
+    </template>
+    <template #extra>
+      <AuthenticationLoginExpiredModal
+        v-model:open="accessStore.loginExpired"
+        :avatar
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
+      <!-- 首登引导提示框：未绑定手机号 / 仍为初始密码时登录后弹出 -->
+      <FirstLoginGuideModal />
+    </template>
+    <template #lock-screen>
+      <LockScreen :avatar @to-login="handleLogout" />
+    </template>
+  </BasicLayout>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/layouts/index.ts b/admin-ui/vue/apps/web-antd/src/layouts/index.ts
new file mode 100644
index 0000000..a432078
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/layouts/index.ts
@@ -0,0 +1,6 @@
+const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');
+
+const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
+
+export { AuthPageLayout, BasicLayout, IFrameView };
diff --git a/admin-ui/vue/apps/web-antd/src/locales/README.md b/admin-ui/vue/apps/web-antd/src/locales/README.md
new file mode 100644
index 0000000..7b45103
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/README.md
@@ -0,0 +1,3 @@
+# locale
+
+每个app使用的国际化可能不同，这里用于扩展国际化的功能，例如扩展 dayjs、antd组件库的多语言切换，以及app本身的国际化文件。
diff --git a/admin-ui/vue/apps/web-antd/src/locales/index.ts b/admin-ui/vue/apps/web-antd/src/locales/index.ts
new file mode 100644
index 0000000..7f32bd1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/index.ts
@@ -0,0 +1,102 @@
+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 {
+  $t,
+  setupI18n as coreSetup,
+  loadLocalesMapFromDir,
+} from '@vben/locales';
+import { preferences } from '@vben/preferences';
+
+import antdEnLocale from 'ant-design-vue/es/locale/en_US';
+import antdDefaultLocale from 'ant-design-vue/es/locale/zh_CN';
+import dayjs from 'dayjs';
+
+const antdLocale = ref<Locale>(antdDefaultLocale);
+
+const modules = import.meta.glob('./langs/**/*.json');
+
+const localesMap = loadLocalesMapFromDir(
+  /\.\/langs\/([^/]+)\/(.*)\.json$/,
+  modules,
+);
+/**
+ * 加载应用特有的语言包
+ * 这里也可以改造为从服务端获取翻译数据
+ * @param lang
+ */
+async function loadMessages(lang: SupportedLanguagesType) {
+  const [appLocaleMessages] = await Promise.all([
+    localesMap[lang]?.(),
+    loadThirdPartyMessage(lang),
+  ]);
+  return appLocaleMessages?.default;
+}
+
+/**
+ * 加载第三方组件库的语言包
+ * @param lang
+ */
+async function loadThirdPartyMessage(lang: SupportedLanguagesType) {
+  await Promise.all([loadAntdLocale(lang), loadDayjsLocale(lang)]);
+}
+
+/**
+ * 加载dayjs的语言包
+ * @param lang
+ */
+async function loadDayjsLocale(lang: SupportedLanguagesType) {
+  let locale;
+  switch (lang) {
+    case 'en-US': {
+      locale = await import('dayjs/locale/en');
+      break;
+    }
+    case 'zh-CN': {
+      locale = await import('dayjs/locale/zh-cn');
+      break;
+    }
+    // 默认使用英语
+    default: {
+      locale = await import('dayjs/locale/en');
+    }
+  }
+  if (locale) {
+    dayjs.locale(locale);
+  } else {
+    console.error(`Failed to load dayjs locale for ${lang}`);
+  }
+}
+
+/**
+ * 加载antd的语言包
+ * @param lang
+ */
+async function loadAntdLocale(lang: SupportedLanguagesType) {
+  switch (lang) {
+    case 'en-US': {
+      antdLocale.value = antdEnLocale;
+      break;
+    }
+    case 'zh-CN': {
+      antdLocale.value = antdDefaultLocale;
+      break;
+    }
+  }
+}
+
+async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
+  await coreSetup(app, {
+    defaultLocale: preferences.app.locale,
+    loadMessages,
+    missingWarn: !import.meta.env.PROD,
+    ...options,
+  });
+}
+
+export { $t, antdLocale, setupI18n };
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/component.json b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/component.json
new file mode 100644
index 0000000..c8ebf68
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/component.json
@@ -0,0 +1,55 @@
+{
+  "cropper": {
+    "selectImage": "Select Image",
+    "uploadSuccess": "Uploaded success!",
+    "imageTooBig": "Image too big",
+    "modalTitle": "Avatar upload",
+    "okText": "Confirm and upload",
+    "btn_reset": "Reset",
+    "btn_rotate_left": "Counterclockwise rotation",
+    "btn_rotate_right": "Clockwise rotation",
+    "btn_scale_x": "Flip horizontal",
+    "btn_scale_y": "Flip vertical",
+    "btn_zoom_in": "Zoom in",
+    "btn_zoom_out": "Zoom out",
+    "preview": "Preview"
+  },
+  "tenantToggle": {
+    "placeholder": "Please select a tenant",
+    "switch": "Switch to tenant: ",
+    "reset": "Reset to default tenant"
+  },
+  "notice": {
+    "title": "Notice",
+    "received": "You have received a new message"
+  },
+  "upload": {
+    "save": "Save",
+    "upload": "Upload",
+    "imgUpload": "ImageUpload",
+    "uploaded": "Uploaded",
+    "operating": "Operating",
+    "del": "Delete",
+    "download": "download",
+    "saveWarn": "Please wait for the file to upload and save!",
+    "saveError": "There is no file successfully uploaded and cannot be saved!",
+    "preview": "Preview",
+    "choose": "Select the file",
+    "accept": "Support {0} format",
+    "acceptUpload": "Only upload files in {0} format",
+    "maxSize": "A single file does not exceed {0}MB ",
+    "maxSizeMultiple": "Only upload files up to {0}MB!",
+    "maxNumber": "Only upload up to {0} files",
+    "legend": "Legend",
+    "fileName": "File name",
+    "fileSize": "File size",
+    "fileStatue": "File status",
+    "pending": "Pending",
+    "startUpload": "Start upload",
+    "uploadSuccess": "Upload successfully",
+    "uploadError": "Upload failed",
+    "uploading": "Uploading",
+    "uploadWait": "Please wait for the file upload to finish",
+    "reUploadFailed": "Re-upload failed files"
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/demos.json b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/demos.json
new file mode 100644
index 0000000..0715643
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/demos.json
@@ -0,0 +1,12 @@
+{
+  "title": "Demos",
+  "antd": "Ant Design Vue",
+  "vben": {
+    "title": "Project",
+    "about": "About",
+    "document": "Document",
+    "antdv": "Ant Design Vue Version",
+    "naive-ui": "Naive UI Version",
+    "element-plus": "Element Plus Version"
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/http.json b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/http.json
new file mode 100644
index 0000000..c3ef2a0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/http.json
@@ -0,0 +1,7 @@
+{
+  "apiRequestFailed": "Operation failed",
+  "operationSuccess": "Operation Success",
+  "successTip": "Success Tip",
+  "errorTip": "Error Tip",
+  "loginTimeout": "Login timeout, please log in again"
+}
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/menu.json b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/menu.json
new file mode 100644
index 0000000..6b9e75d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/menu.json
@@ -0,0 +1,36 @@
+{
+  "root": "Root",
+  "system": {
+    "root": "System",
+    "user": "User",
+    "role": "Role",
+    "menu": "Menu",
+    "dept": "Department",
+    "post": "Post",
+    "dict": "Dictionary",
+    "config": "Parameter Settings",
+    "notice": "Notifications",
+    "log": {
+      "root": "Log",
+      "operation": "Operation Log",
+      "login": "Login Log"
+    },
+    "oss": "File",
+    "client": "Client"
+  },
+  "tenant": {
+    "root": "Tenant",
+    "package": "Package"
+  },
+  "monitor": {
+    "root": "System Monitoring",
+    "online": "Online Users",
+    "cache": "Cache Monitoring",
+    "admin": "Admin Monitoring",
+    "job": "Task Scheduling Center"
+  },
+  "tool": {
+    "root": "System Tools",
+    "gen": "Code Generation"
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/page.json b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/page.json
new file mode 100644
index 0000000..39f1641
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/page.json
@@ -0,0 +1,15 @@
+{
+  "auth": {
+    "login": "Login",
+    "register": "Register",
+    "codeLogin": "Code Login",
+    "qrcodeLogin": "Qr Code Login",
+    "forgetPassword": "Forget Password",
+    "profile": "Profile"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "analytics": "Analytics",
+    "workspace": "Workspace"
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/pages.json b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/pages.json
new file mode 100644
index 0000000..3443207
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/pages.json
@@ -0,0 +1,25 @@
+{
+    "common": {
+      "add": "Add",
+      "view": "View",
+      "edit": "Edit",
+      "delete": "Delete",
+      "more": "More",
+      "search": "Search",
+      "reset": "Reset",
+      "import": "Import",
+      "export": "Export",
+      "expand": "Expand",
+      "collapse": "Collapse",
+      "info": "Info",
+      "clear": "Clear",
+      "unlock": "Unlock",
+      "download": "Download",
+      "sync": "Sync",
+      "refresh": "Refresh",
+      "generate": "Generate",
+      "downloadLoading": "Downloading... Please wait.",
+      "preview": "Preview"
+    }
+  }
+  
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/ui.json b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/ui.json
new file mode 100644
index 0000000..1cd046d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/en-US/ui.json
@@ -0,0 +1,6 @@
+{
+    "widgets": {
+        "profile": "Profile",
+        "document": "Document"
+    }
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/component.json b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/component.json
new file mode 100644
index 0000000..b0ef5a2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/component.json
@@ -0,0 +1,55 @@
+{
+  "cropper": {
+    "selectImage": "选择图片",
+    "uploadSuccess": "上传成功",
+    "imageTooBig": "图片超限",
+    "modalTitle": "头像上传",
+    "okText": "确认并上传",
+    "btn_reset": "重置",
+    "btn_rotate_left": "逆时针旋转",
+    "btn_rotate_right": "顺时针旋转",
+    "btn_scale_x": "水平翻转",
+    "btn_scale_y": "垂直翻转",
+    "btn_zoom_in": "放大",
+    "btn_zoom_out": "缩小",
+    "preview": "预览"
+  },
+  "tenantToggle": {
+    "placeholder": "选择租户",
+    "switch": "切换当前租户为: ",
+    "reset": "还原为默认租户"
+  },
+  "notice": {
+    "title": "消息",
+    "received": "收到新消息"
+  },
+  "upload": {
+    "save": "保存",
+    "upload": "上传",
+    "imgUpload": "图片上传",
+    "uploaded": "已上传",
+    "operating": "操作",
+    "del": "删除",
+    "download": "下载",
+    "saveWarn": "请等待文件上传后，保存!",
+    "saveError": "没有上传成功的文件，无法保存!",
+    "preview": "预览",
+    "choose": "选择文件",
+    "accept": "支持{0}格式",
+    "acceptUpload": "只能上传{0}格式文件",
+    "maxSize": "单个文件不超过{0}MB",
+    "maxSizeMultiple": "只能上传不超过{0}MB的文件!",
+    "maxNumber": "最多只能上传{0}个文件",
+    "legend": "略缩图",
+    "fileName": "文件名",
+    "fileSize": "文件大小",
+    "fileStatue": "状态",
+    "pending": "待上传",
+    "startUpload": "开始上传",
+    "uploadSuccess": "上传成功",
+    "uploadError": "上传失败",
+    "uploading": "上传中",
+    "uploadWait": "请等待文件上传结束后操作",
+    "reUploadFailed": "重新上传失败文件"
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/demos.json b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/demos.json
new file mode 100644
index 0000000..93ee722
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/demos.json
@@ -0,0 +1,12 @@
+{
+  "title": "演示",
+  "antd": "Ant Design Vue",
+  "vben": {
+    "title": "项目",
+    "about": "关于",
+    "document": "文档",
+    "antdv": "Ant Design Vue 版本",
+    "naive-ui": "Naive UI 版本",
+    "element-plus": "Element Plus 版本"
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/http.json b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/http.json
new file mode 100644
index 0000000..1df058f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/http.json
@@ -0,0 +1,7 @@
+{
+  "apiRequestFailed": "请求出错，请稍候重试",
+  "operationSuccess": "操作成功",
+  "successTip": "成功提示",
+  "errorTip": "错误提示",
+  "loginTimeout": "登录超时, 请重新登录"
+}
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/menu.json b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/menu.json
new file mode 100644
index 0000000..6170f87
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/menu.json
@@ -0,0 +1,36 @@
+{
+  "root": "根目录",
+  "system": {
+    "root": "系统管理",
+    "user": "用户管理",
+    "role": "角色管理",
+    "menu": "菜单管理",
+    "dept": "部门管理",
+    "post": "岗位管理",
+    "dict": "字典管理",
+    "config": "参数设置",
+    "notice": "通知公告",
+    "log": {
+      "root": "日志管理",
+      "operation": "操作日志",
+      "login": "登录日志"
+    },
+    "oss": "文件管理",
+    "client": "客户端管理"
+  },
+  "tenant": {
+    "root": "租户管理",
+    "package": "套餐管理"
+  },
+  "monitor": {
+    "root": "系统监控",
+    "online": "在线用户",
+    "cache": "缓存监控",
+    "admin": "Admin监控",
+    "job": "任务调度中心"
+  },
+  "tool": {
+    "root": "系统工具",
+    "gen": "代码生成"
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/page.json b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/page.json
new file mode 100644
index 0000000..2192d1d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/page.json
@@ -0,0 +1,15 @@
+{
+  "auth": {
+    "login": "登录",
+    "register": "注册",
+    "codeLogin": "验证码登录",
+    "qrcodeLogin": "二维码登录",
+    "forgetPassword": "忘记密码",
+    "profile": "个人中心"
+  },
+  "dashboard": {
+    "title": "概览",
+    "analytics": "分析页",
+    "workspace": "工作台"
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/pages.json b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/pages.json
new file mode 100644
index 0000000..05b66f9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/pages.json
@@ -0,0 +1,24 @@
+{
+  "common": {
+    "add": "新增",
+    "view": "查看",
+    "edit": "编辑",
+    "delete": "删除",
+    "more": "更多",
+    "search": "搜索",
+    "reset": "重置",
+    "import": "导入",
+    "export": "导出",
+    "expand": "展开",
+    "collapse": "收起",
+    "info": "详情",
+    "clear": "清空",
+    "unlock": "解锁",
+    "download": "下载",
+    "sync": "同步",
+    "refresh": "刷新",
+    "generate": "生成",
+    "downloadLoading": "下载中, 请稍后...",
+    "preview": "预览"
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/ui.json b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/ui.json
new file mode 100644
index 0000000..cbd9998
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/locales/langs/zh-CN/ui.json
@@ -0,0 +1,6 @@
+{
+    "widgets": {
+        "profile": "个人中心",
+        "document": "文档中心"
+    }
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/main.ts b/admin-ui/vue/apps/web-antd/src/main.ts
new file mode 100644
index 0000000..c8ca091
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/main.ts
@@ -0,0 +1,50 @@
+import { initPreferences, updatePreferences } from '@vben/preferences';
+import { unmountGlobalLoading } from '@vben/utils';
+
+import { loadRuntimeMenuSetting } from '#/config/menu-setting';
+import { loadRuntimeSetting } from '#/config/setting';
+
+/**
+ * 应用初始化完成之后再进行页面加载渲染
+ */
+async function initApplication() {
+  // name用于指定项目唯一标识
+  // 用于区分不同项目的偏好设置以及存储数据的key前缀以及其他一些需要隔离的数据
+  const env = import.meta.env.PROD ? 'prod' : 'dev';
+  const appVersion = import.meta.env.VITE_APP_VERSION;
+  const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${appVersion}-${env}`;
+  const [setting] = await Promise.all([
+    loadRuntimeSetting(),
+    loadRuntimeMenuSetting(),
+  ]);
+  const { createOverridesPreferences } = await import('./preferences');
+  const overridesPreferences = createOverridesPreferences(setting);
+
+  if (setting.appTitle) {
+    document.title = setting.appTitle;
+  }
+
+  if (setting.appIcon) {
+    const icon = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+    if (icon) {
+      icon.href = setting.appIcon;
+    }
+  }
+
+  // app偏好设置初始化
+  await initPreferences({
+    namespace,
+    overrides: overridesPreferences,
+  });
+  updatePreferences(overridesPreferences);
+
+  // 启动应用并挂载
+  // vue应用主要逻辑及视图
+  const { bootstrap } = await import('./bootstrap');
+  await bootstrap(namespace);
+
+  // 移除并销毁loading
+  unmountGlobalLoading();
+}
+
+initApplication();
diff --git a/admin-ui/vue/apps/web-antd/src/preferences.ts b/admin-ui/vue/apps/web-antd/src/preferences.ts
new file mode 100644
index 0000000..45005f6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/preferences.ts
@@ -0,0 +1,73 @@
+import type { RuntimeSetting } from './config/setting';
+
+import { defineOverridesPreferences } from '@vben/preferences';
+
+/**
+ * @description 项目配置文件
+ * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ * !!! 更改配置后请清空缓存，否则可能不生效
+ */
+function createOverridesPreferences(setting: RuntimeSetting) {
+  return defineOverridesPreferences({
+    // overrides
+    app: {
+      name: setting.appTitle || '',
+      accessMode: 'backend',
+      authPageLayout: 'panel-right',
+      layout: 'header-sidebar-nav',
+    },
+    breadcrumb: {
+      enable: false,
+    },
+    shortcutKeys: {
+      enable: false,
+    },
+    tabbar: {
+      styleType: 'plain',
+    },
+    theme: {
+      mode: 'light',
+      radius: '0.25',
+    },
+    logo: {
+      enable: true,
+      source: setting.appIcon || '',
+    },
+    copyright: {
+      enable: true,
+      companyName: setting.copyright?.companyName || '',
+      companySiteLink: setting.copyright?.companySiteLink || '',
+      date: setting.copyright?.date || '',
+      icp: setting.copyright?.icp || '',
+      icpLink: setting.copyright?.icpLink || '',
+    },
+    widget: {
+      refresh: false,
+    },
+  });
+}
+
+export { createOverridesPreferences };
+
+// {
+//   // overrides
+//   app: {
+//     name: import.meta.env.VITE_APP_TITLE,
+//       accessMode: 'backend',
+//   },
+//   theme: {
+//     mode: "light"
+//   },
+//   logo: {
+//     enable: true,
+//       source: '/logo.png',
+//   },
+//   copyright: {
+//     enable: true,
+//       companyName: "示例企业",
+//         companySiteLink: "https://example.com",
+//           date: "2024-2025",
+//             icp: "示例ICP备00000000号-1",
+//               icpLink: "https://beian.miit.gov.cn/",
+//   },
+// }
diff --git a/admin-ui/vue/apps/web-antd/src/router/access-root-route.test.ts b/admin-ui/vue/apps/web-antd/src/router/access-root-route.test.ts
new file mode 100644
index 0000000..90cea3c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/access-root-route.test.ts
@@ -0,0 +1,70 @@
+import { createMemoryHistory, createRouter } from 'vue-router';
+
+import { generateAccessible } from '@vben/access';
+
+import { describe, expect, it, vi } from 'vitest';
+
+const NullComponent = { render: () => null };
+
+describe('generateAccessible root route lookup', () => {
+  it('preserves /analytics when an empty-path backend menu also resolves to /', async () => {
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        {
+          children: [],
+          component: NullComponent,
+          name: 'Root',
+          path: '/',
+        },
+        {
+          component: NullComponent,
+          name: 'FallbackNotFound',
+          path: '/:path(.*)*',
+        },
+      ],
+    });
+    router.addRoute('Root', {
+      component: NullComponent,
+      name: 'menu_444',
+      path: '',
+    });
+    expect(
+      router
+        .getRoutes()
+        .filter((route) => route.path === '/')
+        .map((route) => route.name),
+    ).toEqual(expect.arrayContaining(['Root', 'menu_444']));
+    expect(router.getRoutes().find((route) => route.path === '/')?.name).toBe(
+      'menu_444',
+    );
+
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      const { accessibleRoutes } = await generateAccessible('backend', {
+        fetchMenuListAsync: async () => [
+          { component: '/', name: 'menu_444', path: '' },
+          { component: '/analytics', name: 'Analytics', path: '/analytics' },
+        ],
+        layoutMap: {},
+        pageMap: { '/analytics.vue': async () => NullComponent },
+        router,
+        routes: [],
+      });
+
+      expect(warn).toHaveBeenCalledWith(
+        'Skipping backend menu route with an empty path',
+        { name: 'menu_444' },
+      );
+      expect(accessibleRoutes.map((route) => route.name)).toEqual([
+        'Analytics',
+      ]);
+      expect(router.resolve('/analytics').name).toBe('Analytics');
+      expect(
+        router.resolve('/analytics').matched.map((route) => route.name),
+      ).not.toContain('FallbackNotFound');
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/router/access.ts b/admin-ui/vue/apps/web-antd/src/router/access.ts
new file mode 100644
index 0000000..847c52d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/access.ts
@@ -0,0 +1,47 @@
+import type {
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+} from '@vben/types';
+
+import { generateAccessible } from '@vben/access';
+import { preferences } from '@vben/preferences';
+
+import { message } from 'ant-design-vue';
+import { cloneDeep } from 'lodash-es';
+
+import { getAllMenusApi } from '#/api';
+import { BasicLayout, IFrameView } from '#/layouts';
+import { $t } from '#/locales';
+
+import { localRoutes } from './routes/local';
+
+const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
+
+async function generateAccess(options: GenerateMenuAndRoutesOptions) {
+  const pageMap: ComponentRecordType = import.meta.glob('../views/**/*.vue');
+
+  const layoutMap: ComponentRecordType = {
+    BasicLayout,
+    IFrameView,
+    LAYOUT: BasicLayout,
+  };
+
+  return await generateAccessible(preferences.app.accessMode, {
+    ...options,
+    fetchMenuListAsync: async () => {
+      message.loading({
+        content: `${$t('common.loadingMenu')}...`,
+        duration: 1.5,
+      });
+      const backMenuList = await getAllMenusApi();
+      return [...backMenuList, ...cloneDeep(localRoutes)];
+    },
+    // 可以指定没有权限跳转403页面
+    forbiddenComponent,
+    // 如果 route.meta.menuVisibleWithForbidden = true
+    layoutMap,
+    pageMap,
+  });
+}
+
+export { generateAccess };
diff --git a/admin-ui/vue/apps/web-antd/src/router/guard-login-redirect.test.ts b/admin-ui/vue/apps/web-antd/src/router/guard-login-redirect.test.ts
new file mode 100644
index 0000000..2c4edea
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/guard-login-redirect.test.ts
@@ -0,0 +1,100 @@
+import { createMemoryHistory, createRouter, type RouteRecordRaw } from 'vue-router';
+import { describe, expect, it } from 'vitest';
+
+/**
+ * 复现「登录后 404、刷新才好」的守卫缺陷（对照实验）。
+ *
+ * 线上场景：
+ *   - Root 路由 redirect: '/analytics'（= DEFAULT_HOME_PATH）
+ *   - /analytics 是 Dashboard 的绝对路径子路由，属动态路由，首登时尚未注册
+ *   - 守卫在 generateAccess() 注册完路由后返回重定向
+ *
+ * 对比两种返回值写法的最终落地路由：
+ *   旧：{...router.resolve(path), replace:true}   把 name/matched 一起交回路由
+ *   新：{path, replace:true}                      由 vue-router 重新匹配
+ */
+
+const FALLBACK = 'FallbackNotFound';
+
+const DASHBOARD_ROUTES: RouteRecordRaw[] = [
+  {
+    children: [
+      { component: { render: () => null }, name: 'Analytics', path: '/analytics' },
+    ],
+    name: 'Dashboard',
+    path: '/dashboard',
+  },
+];
+
+/** 复刻 vben generateAccessible 的注册方式：推入 root.children 后重挂根路由 */
+function registerDynamicRoutes(router: any) {
+  const root = router.getRoutes().find((item: any) => item.path === '/');
+  const names = root?.children?.map((item: any) => item.name) ?? [];
+  DASHBOARD_ROUTES.forEach((route) => {
+    if (names.includes(route.name as string)) {
+      const index = root.children.findIndex((i: any) => i.name === route.name);
+      if (index !== -1) root.children[index] = route;
+    } else {
+      root.children.push(route);
+    }
+  });
+  if (root?.name) router.removeRoute(root.name);
+  router.addRoute(root);
+}
+
+function createTestRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      {
+        component: { render: () => null },
+        name: 'Root',
+        path: '/',
+        redirect: '/analytics',
+        children: [],
+      },
+      {
+        component: { render: () => null },
+        name: FALLBACK,
+        path: '/:path(.*)*',
+      },
+    ],
+  });
+}
+
+/** 复刻线上守卫；returnResolved=true 即修复前的写法 */
+async function simulateLogin(returnResolved: boolean) {
+  const router = createTestRouter();
+  const state = { checked: false };
+  router.beforeEach(async (to: any) => {
+    if (state.checked) return true;
+    registerDynamicRoutes(router);
+    state.checked = true;
+    const target = '/analytics';
+    return returnResolved
+      ? ({ ...router.resolve(target), replace: true } as any)
+      : ({ path: target, replace: true } as any);
+  });
+
+  await router.push('/analytics').catch(() => {});
+  return router.currentRoute.value.name;
+}
+
+describe('登录后重定向到动态路由 /analytics', () => {
+  it('动态路由注册后能解析到真实路由', () => {
+    const router = createTestRouter();
+    registerDynamicRoutes(router);
+    expect(router.resolve('/analytics').name).toBe('Analytics');
+  });
+
+  it('修复后：登录最终落在 Analytics，而不是 404 页', async () => {
+    const landed = await simulateLogin(false);
+    expect(landed).toBe('Analytics');
+  });
+
+  it('对照：旧写法（spread resolve 结果）的最终落点', async () => {
+    const landed = await simulateLogin(true);
+    // 记录旧写法的实际行为，用于判断修复是否真的改变了结果
+    expect(['Analytics', FALLBACK]).toContain(landed);
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/router/guard.ts b/admin-ui/vue/apps/web-antd/src/router/guard.ts
new file mode 100644
index 0000000..de935a4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/guard.ts
@@ -0,0 +1,138 @@
+import type { Router } from 'vue-router';
+
+import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
+import { useAccessStore, useUserStore } from '@vben/stores';
+import { startProgress, stopProgress } from '@vben/utils';
+
+import { accessRoutes, coreRouteNames } from '#/router/routes';
+import { useAuthStore } from '#/store';
+
+import { generateAccess } from './access';
+
+/**
+ * 通用守卫配置
+ * @param router
+ */
+function setupCommonGuard(router: Router) {
+  // 记录已经加载的页面
+  const loadedPaths = new Set<string>();
+
+  router.beforeEach((to) => {
+    to.meta.loaded = loadedPaths.has(to.path);
+
+    // 页面加载进度条
+    if (!to.meta.loaded && preferences.transition.progress) {
+      startProgress();
+    }
+    return true;
+  });
+
+  router.afterEach((to) => {
+    // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行
+
+    loadedPaths.add(to.path);
+
+    // 关闭页面加载进度条
+    if (preferences.transition.progress) {
+      stopProgress();
+    }
+  });
+}
+
+/**
+ * 权限访问守卫配置
+ * @param router
+ */
+function setupAccessGuard(router: Router) {
+  router.beforeEach(async (to, from) => {
+    const accessStore = useAccessStore();
+    const userStore = useUserStore();
+    const authStore = useAuthStore();
+
+    // 基本路由，这些路由不需要进入权限拦截
+    if (coreRouteNames.includes(to.name as string)) {
+      if (to.path === LOGIN_PATH && accessStore.accessToken) {
+        return decodeURIComponent(
+          (to.query?.redirect as string) ||
+            userStore.userInfo?.homePath ||
+            DEFAULT_HOME_PATH,
+        );
+      }
+      return true;
+    }
+
+    // accessToken 检查
+    if (!accessStore.accessToken) {
+      // 明确声明忽略权限访问权限，则可以访问
+      if (to.meta.ignoreAccess) {
+        return true;
+      }
+
+      // 没有访问权限，跳转登录页面
+      if (to.fullPath !== LOGIN_PATH) {
+        return {
+          path: LOGIN_PATH,
+          // 如不需要，直接删除 query
+          query:
+            to.fullPath === DEFAULT_HOME_PATH
+              ? {}
+              : { redirect: encodeURIComponent(to.fullPath) },
+          // 携带当前跳转的页面，登录后重新跳转该页面
+          replace: true,
+        };
+      }
+      return to;
+    }
+
+    // 是否已经生成过动态路由
+    if (accessStore.isAccessChecked) {
+      return true;
+    }
+
+    // 生成路由表
+    // 当前登录用户拥有的角色标识列表
+    const userInfo = userStore.userInfo || (await authStore.fetchUserInfo());
+    const userRoles = userInfo.roles ?? [];
+
+    // 生成菜单和路由
+    const { accessibleMenus, accessibleRoutes } = await generateAccess({
+      roles: userRoles,
+      router,
+      // 则会在菜单中显示，但是访问会被重定向到403
+      routes: accessRoutes,
+    });
+
+    // 保存菜单信息和路由信息
+    accessStore.setAccessMenus(accessibleMenus);
+    accessStore.setAccessRoutes(accessibleRoutes);
+    accessStore.setIsAccessChecked(true);
+    const redirectPath = (from.query.redirect ??
+      (to.path === DEFAULT_HOME_PATH
+        ? userInfo.homePath || DEFAULT_HOME_PATH
+        : to.fullPath)) as string;
+
+    // 不能返回 router.resolve(...) 的结果：
+    // 目标路径（如 /analytics，它是 Dashboard 的绝对路径子路由）刚由
+    // generateAccess() 注册，若此刻解析不就位，就会落到 /:path(.*)* 兑底路由，
+    // 其 name 一旦被带回导航，即使路由随后注册也会锁在 404 页（刷新才好）。
+    // 改为只返回路径字串，由 vue-router 自己重新匹配（此时路由表已就绪）。
+    return {
+      path: decodeURIComponent(redirectPath),
+      replace: true,
+    };
+  });
+}
+
+/**
+ * 项目守卫配置
+ * @param router
+ */
+function createRouterGuard(router: Router) {
+  /** 通用 */
+  setupCommonGuard(router);
+  /** 权限访问 */
+  setupAccessGuard(router);
+}
+
+export { createRouterGuard };
diff --git a/admin-ui/vue/apps/web-antd/src/router/index.ts b/admin-ui/vue/apps/web-antd/src/router/index.ts
new file mode 100644
index 0000000..4840230
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/index.ts
@@ -0,0 +1,37 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';
+
+import { resetStaticRoutes } from '@vben/utils';
+
+import { createRouterGuard } from './guard';
+import { routes } from './routes';
+
+/**
+ *  @zh_CN 创建vue-router实例
+ */
+const router = createRouter({
+  history:
+    import.meta.env.VITE_ROUTER_HISTORY === 'hash'
+      ? createWebHashHistory(import.meta.env.VITE_BASE)
+      : createWebHistory(import.meta.env.VITE_BASE),
+  // 应该添加到路由的初始路由列表。
+  routes,
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
+  // 是否应该禁止尾部斜杠。
+  // strict: true,
+});
+
+const resetRoutes = () => resetStaticRoutes(router, routes);
+
+// 创建路由守卫
+createRouterGuard(router);
+
+export { resetRoutes, router };
diff --git a/admin-ui/vue/apps/web-antd/src/router/routes/core.ts b/admin-ui/vue/apps/web-antd/src/router/routes/core.ts
new file mode 100644
index 0000000..39c65f2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/routes/core.ts
@@ -0,0 +1,112 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+
+import { AuthPageLayout, BasicLayout } from '#/layouts';
+import { $t } from '#/locales';
+import Login from '#/views/_core/authentication/login.vue';
+
+/** 全局404页面 */
+const fallbackNotFoundRoute: RouteRecordRaw = {
+  component: () => import('#/views/_core/fallback/not-found.vue'),
+  meta: {
+    hideInBreadcrumb: true,
+    hideInMenu: true,
+    hideInTab: true,
+    title: '404',
+  },
+  name: 'FallbackNotFound',
+  path: '/:path(.*)*',
+};
+
+/** 基本路由，这些路由是必须存在的 */
+const coreRoutes: RouteRecordRaw[] = [
+  /**
+   * 根路由
+   * 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
+   * 此路由必须存在，且不应修改
+   */
+  {
+    component: BasicLayout,
+    meta: {
+      hideInBreadcrumb: true,
+      title: 'Root',
+    },
+    name: 'Root',
+    path: '/',
+    redirect: DEFAULT_HOME_PATH,
+    children: [],
+  },
+  {
+    component: AuthPageLayout,
+    props: {
+      pageTitle: "开箱即用的大型中后台管理系统",
+      pageDescription: "",
+      toolbar: true,
+      toolbarList: ['color', 'language', 'layout', 'theme'],
+    },
+    meta: {
+      hideInTab: true,
+      title: 'Authentication',
+    },
+    name: 'Authentication',
+    path: '/auth',
+    redirect: LOGIN_PATH,
+    children: [
+      {
+        name: 'Login',
+        path: 'login',
+        component: Login,
+        meta: {
+          title: $t('page.auth.login'),
+        },
+      },
+      {
+        name: 'CodeLogin',
+        path: 'code-login',
+        component: () => import('#/views/_core/authentication/code-login.vue'),
+        meta: {
+          title: $t('page.auth.codeLogin'),
+        },
+      },
+      {
+        name: 'QrCodeLogin',
+        path: 'qrcode-login',
+        component: () =>
+          import('#/views/_core/authentication/qrcode-login.vue'),
+        meta: {
+          title: $t('page.auth.qrcodeLogin'),
+        },
+      },
+      {
+        name: 'ForgetPassword',
+        path: 'forget-password',
+        component: () =>
+          import('#/views/_core/authentication/forget-password.vue'),
+        meta: {
+          title: $t('page.auth.forgetPassword'),
+        },
+      },
+      {
+        name: 'Register',
+        path: 'register',
+        component: () => import('#/views/_core/authentication/register.vue'),
+        meta: {
+          title: $t('page.auth.register'),
+        },
+      },
+      {
+        name: 'MfaVerify',
+        path: 'mfa-verify',
+        component: () =>
+          import('#/views/_core/authentication/mfa-verify.vue'),
+        meta: {
+          hideInTab: true,
+          title: 'MFA多因子认证',
+        },
+      },
+    ],
+  },
+];
+
+export { coreRoutes, fallbackNotFoundRoute };
diff --git a/admin-ui/vue/apps/web-antd/src/router/routes/index.ts b/admin-ui/vue/apps/web-antd/src/router/routes/index.ts
new file mode 100644
index 0000000..e6fb144
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/routes/index.ts
@@ -0,0 +1,37 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { mergeRouteModules, traverseTreeValues } from '@vben/utils';
+
+import { coreRoutes, fallbackNotFoundRoute } from './core';
+
+const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
+  eager: true,
+});
+
+// 有需要可以自行打开注释，并创建文件夹
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
+// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+
+/** 动态路由 */
+const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
+
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统(不会显示在菜单中) */
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
+// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
+const staticRoutes: RouteRecordRaw[] = [];
+const externalRoutes: RouteRecordRaw[] = [];
+
+/** 路由列表，由基本路由、外部路由和404兜底路由组成
+ *  无需走权限验证（会一直显示在菜单中） */
+const routes: RouteRecordRaw[] = [
+  ...coreRoutes,
+  ...externalRoutes,
+  fallbackNotFoundRoute,
+];
+
+/** 基本路由列表，这些路由不需要进入权限拦截 */
+const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);
+
+/** 有权限校验的路由列表，包含动态路由和静态路由 */
+const accessRoutes = [...dynamicRoutes, ...staticRoutes];
+export { accessRoutes, coreRouteNames, routes };
diff --git a/admin-ui/vue/apps/web-antd/src/router/routes/local.ts b/admin-ui/vue/apps/web-antd/src/router/routes/local.ts
new file mode 100644
index 0000000..8d9a8ed
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/routes/local.ts
@@ -0,0 +1,25 @@
+import type { RouteRecordStringComponent } from '@vben/types';
+import { $t } from '@vben/locales';
+
+// 非后台返回路由
+export const localRoutes : RouteRecordStringComponent[] = [
+    {
+        path: '/profile',
+        name: 'Profile',
+        component: '/_core/profile/index',
+        meta: {
+            title: $t('ui.widgets.profile'),
+            icon: 'mingcute:profile-line',
+            hideInMenu: true,
+        }
+    },
+    {
+        path: '/common/tWoCommunication/detail',
+        name: 'TWoCommunicationDetail',
+        component: '/common/tWoCommunication/index',
+        meta: {
+            title: '工单问题沟通',
+            hideInMenu: true,
+        }
+    },
+]
diff --git a/admin-ui/vue/apps/web-antd/src/router/routes/modules/dashboard.ts b/admin-ui/vue/apps/web-antd/src/router/routes/modules/dashboard.ts
new file mode 100644
index 0000000..5254dc6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/routes/modules/dashboard.ts
@@ -0,0 +1,38 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      icon: 'lucide:layout-dashboard',
+      order: -1,
+      title: $t('page.dashboard.title'),
+    },
+    name: 'Dashboard',
+    path: '/dashboard',
+    children: [
+      {
+        name: 'Analytics',
+        path: '/analytics',
+        component: () => import('#/views/dashboard/analytics/index.vue'),
+        meta: {
+          affixTab: true,
+          icon: 'lucide:area-chart',
+          title: $t('page.dashboard.analytics'),
+        },
+      },
+      {
+        name: 'Workspace',
+        path: '/workspace',
+        component: () => import('#/views/dashboard/workspace/index.vue'),
+        meta: {
+          icon: 'carbon:workspace',
+          title: $t('page.dashboard.workspace'),
+        },
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/admin-ui/vue/apps/web-antd/src/router/routes/modules/demos.ts b/admin-ui/vue/apps/web-antd/src/router/routes/modules/demos.ts
new file mode 100644
index 0000000..55ade09
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/routes/modules/demos.ts
@@ -0,0 +1,28 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      icon: 'ic:baseline-view-in-ar',
+      keepAlive: true,
+      order: 1000,
+      title: $t('demos.title'),
+    },
+    name: 'Demos',
+    path: '/demos',
+    children: [
+      {
+        meta: {
+          title: $t('demos.antd'),
+        },
+        name: 'AntDesignDemos',
+        path: '/demos/ant-design',
+        component: () => import('#/views/demos/antd/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/admin-ui/vue/apps/web-antd/src/router/routes/modules/system.ts b/admin-ui/vue/apps/web-antd/src/router/routes/modules/system.ts
new file mode 100644
index 0000000..6544d2d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/routes/modules/system.ts
@@ -0,0 +1,36 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      icon: 'ic:baseline-view-in-ar',
+      keepAlive: true,
+      order: 1000,
+      title: '系统管理',
+    },
+    name: 'System',
+    path: '/system',
+    children: [
+      {
+        meta: {
+          title: '用户管理',
+        },
+        name: 'systemUser',
+        path: '/system/system—user',
+        component: () => import('#/views/demos/antd/index.vue'),
+      },
+      {
+        meta: {
+          title: '角色管理',
+        },
+        name: 'systemRole',
+        path: '/system/system—role',
+        component: () => import('#/views/demos/antd/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/admin-ui/vue/apps/web-antd/src/router/routes/modules/tenant.ts b/admin-ui/vue/apps/web-antd/src/router/routes/modules/tenant.ts
new file mode 100644
index 0000000..168c334
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/routes/modules/tenant.ts
@@ -0,0 +1,36 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      icon: 'ic:baseline-view-in-ar',
+      keepAlive: true,
+      order: 1000,
+      title: '租户管理',
+    },
+    name: 'Tenant',
+    path: '/tenant',
+    children: [
+      {
+        meta: {
+          title: '租户管理',
+        },
+        name: 'tenant',
+        path: '/tenant/tenant',
+        component: () => import('#/views/demos/antd/index.vue'),
+      },
+      {
+        meta: {
+          title: '租户套餐管理',
+        },
+        name: 'tenantPackage`',
+        path: '/tenant/tenant_package',
+        component: () => import('#/views/demos/antd/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/admin-ui/vue/apps/web-antd/src/router/routes/modules/vben.ts b/admin-ui/vue/apps/web-antd/src/router/routes/modules/vben.ts
new file mode 100644
index 0000000..626fd59
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/router/routes/modules/vben.ts
@@ -0,0 +1,71 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import {
+  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 { SvgTDesignIcon } from '@vben/icons';
+
+import { IFrameView } from '#/layouts';
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      badgeType: 'dot',
+      icon: VBEN_LOGO_URL,
+      order: 9998,
+      title: $t('demos.vben.title'),
+    },
+    name: 'VbenProject',
+    path: '/vben-admin',
+    children: [
+      {
+        name: 'VbenDocument',
+        path: '/vben-admin/document',
+        component: IFrameView,
+        meta: {
+          icon: 'lucide:book-open-text',
+          link: VBEN_DOC_URL,
+          title: $t('demos.vben.document'),
+        },
+      },
+      {
+        name: 'VbenGithub',
+        path: '/vben-admin/github',
+        component: IFrameView,
+        meta: {
+          icon: 'mdi:github',
+          link: VBEN_GITHUB_URL,
+          title: 'Github',
+        },
+      }
+    ],
+  },
+  {
+    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;
diff --git a/admin-ui/vue/apps/web-antd/src/store/auth.ts b/admin-ui/vue/apps/web-antd/src/store/auth.ts
new file mode 100644
index 0000000..3d10831
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/store/auth.ts
@@ -0,0 +1,245 @@
+import type { Recordable, UserInfo } from '@vben/types';
+
+import { nextTick, ref } from 'vue';
+
+import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
+
+import { notification } from 'ant-design-vue';
+import { md5 } from 'js-md5';
+import { defineStore } from 'pinia';
+
+import {
+  getAccessCodesApi,
+  getUserInfoApi,
+  isMfaEnabled,
+  loginApi,
+  logoutApi,
+  setMfaEnabled,
+  smsLoginApi,
+} from '#/api';
+import { $t } from '#/locales';
+
+/**
+ * @description 认证相关状态管理
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+export const useAuthStore = defineStore('auth', () => {
+  const accessStore = useAccessStore();
+  const userStore = useUserStore();
+
+  const loginLoading = ref(false);
+
+  async function getAppRouter() {
+    const { router } = await import('#/router');
+    return router;
+  }
+
+  function clearLoginState() {
+    resetAllStores();
+    accessStore.setAccessToken(null);
+    accessStore.setRefreshToken(null);
+    accessStore.setAccessCodes([]);
+    accessStore.setAccessMenus([]);
+    accessStore.setAccessRoutes([]);
+    accessStore.setIsAccessChecked(false);
+    accessStore.setLoginExpired(false);
+    accessStore.unlockScreen();
+    userStore.setUserInfo(null);
+  }
+
+  async function replaceLoginPage(currentPath: string, redirect: boolean) {
+    const router = await getAppRouter();
+    const target = {
+      path: LOGIN_PATH,
+      query: redirect
+        ? {
+            redirect: encodeURIComponent(currentPath),
+          }
+        : {},
+    };
+    const targetHref = router.resolve(target).href;
+
+    try {
+      await router.replace(target);
+      await nextTick();
+      if (router.currentRoute.value.path !== LOGIN_PATH) {
+        window.location.replace(targetHref);
+      }
+    } catch {
+      window.location.replace(targetHref);
+    }
+  }
+
+  /**
+   * 异步处理登录操作
+   * Asynchronously handle the login process
+   * @param params 登录表单数据
+   */
+  async function authLogin(
+    params: Recordable<any>,
+    _onSuccess?: () => Promise<void> | void,
+  ) {
+    // 异步处理用户登录操作并获取 accessToken
+    let userInfo: null | UserInfo = null;
+    try {
+      loginLoading.value = true;
+      if (params.captcha && params.captcha.length === 2) {
+        params.captchaID = params.captcha[1] || '';
+        params.captchaValue = params.captcha[0] || '';
+      }
+      if (params.password) {
+        params.password = md5(params.password);
+      }
+      // 手机验证码登录走独立接口，不需要密码与图形验证码
+      const { accessToken } =
+        params.grantType === 'sms'
+          ? await smsLoginApi({ code: params.code, phone: params.phone })
+          : await loginApi(params);
+
+      // 如果成功获取到 accessToken
+      if (accessToken) {
+        accessStore.setAccessToken(accessToken);
+
+        // 获取用户信息并存储到 accessStore 中
+        const [fetchUserInfoResult, accessCodes] = await Promise.all([
+          fetchUserInfo(),
+          getAccessCodesApi(),
+        ]);
+        // console.log('vue/apps/web-antd/src/store/auth.ts','fetchUserInfoResult',fetchUserInfoResult);
+        userInfo = fetchUserInfoResult;
+
+        userStore.setUserInfo(userInfo);
+        if (accessCodes && accessCodes.data) {
+          accessStore.setAccessCodes(accessCodes.data);
+        }
+
+        if (accessStore.loginExpired) {
+          accessStore.setLoginExpired(false);
+        } else {
+          // 检查是否开启了MFA验证
+          await checkMfaEnabledAndRedirect(userInfo);
+        }
+        // console.log('vue/apps/web-antd/src/store/auth.ts','userInfo.realName',userInfo?.realName);
+        if (userInfo?.realName) {
+          notification.success({
+            description: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
+            duration: 3,
+            message: $t('authentication.loginSuccess'),
+          });
+        }
+      }
+    } finally {
+      loginLoading.value = false;
+    }
+
+    return {
+      userInfo,
+    };
+  }
+
+  async function logout(redirect: boolean = true) {
+    const router = await getAppRouter();
+    const currentPath = router.currentRoute.value.fullPath;
+    try {
+      await Promise.race([
+        logoutApi(),
+        new Promise((resolve) => window.setTimeout(resolve, 1000)),
+      ]);
+    } catch {
+      // 本地退出不能被服务端退出接口阻塞。
+    }
+
+    accessStore.setAccessToken(null);
+    accessStore.setRefreshToken(null);
+    accessStore.setLoginExpired(false);
+    accessStore.unlockScreen();
+    userStore.setUserInfo(null);
+
+    // 回登录页带上当前路由地址
+    await replaceLoginPage(currentPath, redirect);
+
+    try {
+      clearLoginState();
+    } catch (error) {
+      console.error('清理登录状态失败', error);
+    }
+  }
+
+  async function fetchUserInfo() {
+    let userInfo: null | UserInfo = null;
+    userInfo = await getUserInfoApi();
+    userStore.setUserInfo(userInfo);
+    return userInfo;
+  }
+
+  /**
+   * 检查用户MFA状态并重定向
+   * @param userInfo 用户信息
+   */
+  async function checkMfaEnabledAndRedirect(userInfo: UserInfo) {
+    const router = await getAppRouter();
+    try {
+      const userId = (userInfo as any).id || (userInfo as any).userId;
+      if (!userId) {
+        // 没有用户ID，直接跳转到首页
+        await redirectAfterLogin(userInfo);
+        return;
+      }
+
+      // 查询MFA状态
+      const res = await isMfaEnabled({ userId: Number(userId) });
+
+      if (res.mfaEnabled === 1) {
+        // 已开启MFA，跳转到MFA验证页面
+        // 先调用setMfaEnabled获取新的uuid
+        const setMfaRes = await setMfaEnabled();
+        const uuid = setMfaRes.uuid;
+
+        await router.push({
+          path: '/auth/mfa-verify',
+          query: {
+            userId: String(userId),
+            uuid,
+            mfaEnabled: '1',
+            fromLogin: 'true',
+          },
+        });
+      } else {
+        // 未开启MFA，进入后续引导/首页跳转
+        await redirectAfterLogin(userInfo);
+      }
+    } catch (error) {
+      console.error('检查MFA状态失败', error);
+      // 出错时直接跳转到首页
+      await redirectAfterLogin(userInfo);
+    }
+  }
+
+  /**
+   * 登录后跳转首页。
+   * 需绑定手机号 / 修改初始密码的提醒改由登录后弹出的 FirstLoginGuideModal
+   * 提示框承担（挂载于 layouts/basic.vue），不再占用整页引导。
+   */
+  async function redirectAfterLogin(userInfo: UserInfo) {
+    const router = await getAppRouter();
+    await router.push(userInfo.homePath || DEFAULT_HOME_PATH);
+  }
+
+  function $reset() {
+    loginLoading.value = false;
+  }
+
+  return {
+    $reset,
+    authLogin,
+    fetchUserInfo,
+    loginLoading,
+    logout,
+  };
+});
diff --git a/admin-ui/vue/apps/web-antd/src/store/cache.ts b/admin-ui/vue/apps/web-antd/src/store/cache.ts
new file mode 100644
index 0000000..b9a4575
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/store/cache.ts
@@ -0,0 +1,66 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+/** 缓存开关 */
+const cacheFlag = true;
+export const useCacheStore = defineStore("cache", () => {
+  /** 缓存核心 */
+  const cache = ref<Record<string, any>>({});
+
+  /** 获取缓存数据
+   * @param params 请求参数,将作为唯一key查询
+   * @param label 缓存标签,查找的缓存库
+   * @param fun 缓存数据获取方法,缓存数据不存在时自动调用该方法获取数据
+   * @returns 目标数据
+   */
+  const getCache = async (params: Record<any, any>, label: string, fun: Promise<any> | (() => Promise<any>)) => {
+    /** 关闭缓存时直接返回请求方法 */
+    if (!cacheFlag) {
+      await (typeof fun === 'function' ? fun() : fun)
+    }
+
+    /** debug使用 */
+    const debugMsg: any = {
+      label: true,
+      data: true
+    }
+    // console.log("\n\n\n")
+
+
+    const strParams = JSON.stringify(params);
+    if (cache.value[label] == undefined || cache.value[label] == null) {
+      // console.log("cache.value  [", label, "]  为空")
+      cache.value[label] = {};
+      debugMsg["label"] = false
+    }
+    if (cache.value[label][strParams] == undefined || cache.value[label][strParams] == null) {
+      // console.log("cache.value  [", label, "]  [", strParams, "]  为空")
+      cache.value[label][strParams] = await (typeof fun === 'function' ? fun() : fun);
+      debugMsg["data"] = false
+    }
+
+    // console.log(label, "本地存储结构:", debugMsg["label"], "  本地存在数据:", debugMsg["data"], "  参数:", strParams)
+    // if (debugMsg["data"] == false) { console.log("cache.value  [", label, "]  [", strParams, "]  已缓存到本地") }
+    // else { console.log("cache.value  [", label, "]  [", strParams, "]  调用本地缓存") }
+    return cache.value[label][strParams];
+  }
+
+  /**
+   * 清空缓存,通常在修改数据后调用
+   * @param label 要清空的缓存库
+   */
+  const clearCache = (label: string) => {
+    // console.log("cache.value  [", label, "]  已清空")
+    cache.value[label] = {};
+  }
+
+
+  /** 退出登录时清空缓存 */
+  function $reset() {
+    cache.value = {};
+  }
+  return {
+    getCache,
+    clearCache,
+    $reset
+  }
+})
diff --git a/admin-ui/vue/apps/web-antd/src/store/dict.ts b/admin-ui/vue/apps/web-antd/src/store/dict.ts
new file mode 100644
index 0000000..37a013d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/store/dict.ts
@@ -0,0 +1,69 @@
+import type { SysDictDataListModel } from '#/api/system/dict';
+
+import { reactive } from 'vue';
+
+import { defineStore } from 'pinia';
+
+export interface DictOption extends SysDictDataListModel {
+  disabled?: boolean;
+  label: string;
+  value: number | string;
+}
+
+export function dictToOptions(
+  data: SysDictDataListModel[],
+  formatNumber = false,
+): DictOption[] {
+  return data.map((item) => ({
+    ...item,
+    label: item.dictLabel,
+    value: formatNumber ? Number(item.dictValue) : item.dictValue,
+  }));
+}
+
+export const useDictStore = defineStore('app-dict', () => {
+  const dictOptionsMap = reactive(new Map<string, DictOption[]>());
+  const dictRequestCache = reactive(
+    new Map<string, Promise<SysDictDataListModel[] | undefined>>(),
+  );
+  function getDictOptions(dictName: string): DictOption[] {
+    if (!dictName) return [];
+    // 没有key 添加一个空数组
+    if (!dictOptionsMap.has(dictName)) {
+      dictOptionsMap.set(dictName, []);
+    }
+    // 这里拿到的就不可能为空了
+    return dictOptionsMap.get(dictName) || [];
+  }
+  function resetCache() {
+    dictOptionsMap.clear();
+    dictRequestCache.clear();
+  }
+  function setDictInfo(
+    dictName: string,
+    dictValue: SysDictDataListModel[],
+    formatNumber = false,
+  ) {
+    if (
+      dictOptionsMap.has(dictName) &&
+      dictOptionsMap.get(dictName)?.length === 0
+    ) {
+      dictOptionsMap
+        .get(dictName)
+        ?.push(...dictToOptions(dictValue, formatNumber));
+    } else {
+      dictOptionsMap.set(dictName, dictToOptions(dictValue, formatNumber));
+    }
+  }
+  function $reset() {
+    resetCache();
+  }
+  return {
+    $reset,
+    dictOptionsMap,
+    dictRequestCache,
+    getDictOptions,
+    resetCache,
+    setDictInfo,
+  };
+});
diff --git a/admin-ui/vue/apps/web-antd/src/store/index.ts b/admin-ui/vue/apps/web-antd/src/store/index.ts
new file mode 100644
index 0000000..269586e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/store/index.ts
@@ -0,0 +1 @@
+export * from './auth';
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/README.md b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/README.md
new file mode 100644
index 0000000..346d98c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/README.md
@@ -0,0 +1,441 @@
+# IOTLCM CRUD 新风格模板
+
+本目录用于把默认生成或旧风格的 IOTLCM CRUD 页面迁移为当前统一风格。模板是可复制使用的示例，迁移时先复制文件，再按真实模块替换类型名、API 路径、字段、主键、权限码和表格标题。
+
+## 目录说明
+
+```text
+iotlcm-crud-style/
+├── README.md
+├── template/
+│   ├── api/
+│   │   ├── index.ts  # 类型化 API 调用模板
+│   │   └── type.ts   # API 参数和响应类型模板
+│   └── view/
+│       ├── index.vue # 列表页模板
+│       ├── edit.vue  # 新增/编辑弹窗模板
+│       ├── view.vue  # 查看弹窗模板
+│       └── model.tsx # 查询表单、表格列、编辑表单、查看描述配置
+└── compare/
+    ├── before/       # 修改前完整代码快照
+    └── after/        # 修改后完整代码快照
+```
+
+`compare` 是完整对照组，不是片段示例：
+
+- 对照文件统一使用 `.txt` 后缀保存完整源码，避免旧代码被 ESLint/TypeScript 当作真实业务代码扫描。
+- 迁移时必须同时看 `before/api -> after/api` 和 `before/view -> after/view`，不要只改视图。
+
+## 常见踩坑
+
+模板迁移中的典型纠错，动手前先过一遍：
+
+- 接口返回未知时不要凭前端字段伪造响应类型，保留 `any` 并明确说明。
+- 查看弹窗内新增 Tab/Grid 时，相关列和查询表单应放在 `model.tsx` 的 `ViewDescSchema` 后面。
+- 弹窗内 Grid 应使用 `BetterVben.grid.gridOptions.modal`。
+- 弹窗内 Grid 的数据加载应使用 `proxyConfig.ajax.query`，打开弹窗后调用 `gridApi.query()`，不要手动 `setGridOptions({ data })`。
+
+## 迁移前检查
+
+1. 确认视图目录和 API 目录是一一对应的，例如：
+   - 视图：`apps/web-antd/src/views/iotlcm/tLifeCycle/tExample`
+   - API：`apps/web-antd/src/api/iotlcm/tLifeCycle/tExample`
+2. 先打开真实模块的 `type.ts`，确认主键字段。不要默认所有模块都用 `id`，也可能是 `appKey`、`deptId`、`regionId` 等。
+3. 记录原代码里的业务差异：自定义按钮、特殊 API、权限码、查询参数转换、插槽渲染、弹窗传参、提交前后处理。
+4. 检查本地 Skill 和项目参考：优先参考 `C:\Users\HuanTian\.claude\skills` 下的 `vben-page-guide`、`vben-grid-guide`、`vben-form-guide`、`vben-modal-guide`、`vben-form-grid`。
+
+## 硬性执行边界
+
+视图模块和 API 模块是一个迁移单元。即使用户只点名 `apps/web-antd/src/views/iotlcm/...`，也必须同步检查并改造对应的 `apps/web-antd/src/api/iotlcm/...`：
+
+| 用户给出的路径 | 必须同步处理的路径 |
+| --- | --- |
+| `apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch` | `apps/web-antd/src/api/iotlcm/tLifeCycle/tBatch` |
+| `apps/web-antd/src/views/iotlcm/tChannel/tSimChannels` | `apps/web-antd/src/api/iotlcm/tChannel/tSimChannels` |
+
+跳过 API 文件属于迁移未完成。最终结果至少要覆盖：
+
+- API：`index.ts`、`type.ts`
+- 视图：`index.vue`、`edit.vue`、`view.vue`、`model.tsx`
+
+不要做“半旧半新”的局部改造。旧代码中的业务字段、接口路径、权限码、查询参数可以保留，但面板骨架必须收敛到本模板。尤其是从旧 `Drawer` 页面迁移时，不能只把 `useVbenDrawer` 改成 `useVbenModal` 后继续保留旧写法。
+
+## 目标参考
+
+新人迁移时可以把 `template/view/`、`template/api/` 和 `compare/after/` 当作最终形态参考。迁移后的结果不要求字段完全相同，但代码组织和基础逻辑应基本一致：
+
+- `index.vue` 使用 `Page + Grid + EditModal + ViewModal`。
+- `index.vue` 中表格标题、导出文件名、权限码直接替换为真实模块值。
+- `index.vue` 中 `formOptions.schema` 使用 `IndexGridSchema`，`gridOptions.columns` 使用 `IndexGridColumns`。
+- `index.vue` 操作插槽使用 `#action="{ row }"`，查看、修改、删除方法都接收 `row`。
+- `edit.vue` 使用 `ModalProps { data, isUpdate }`、`handleOpen`、`handleConfirm`、`handleCancel`。
+- `edit.vue` 编辑回显调用 `View`，提交调用 `Edit(value as XxxModel)` 或真实编辑参数类型。
+- `view.vue` 使用 `ViewDescSchema + Description + useDescription`。
+- 基础 CRUD 的 `model.tsx` 只导出 `IndexGridSchema`、`IndexGridColumns`、`EditFormSchema`、`ViewDescSchema` 这四类核心配置。
+- 如果查看弹窗内新增业务 Tab/Grid，相关列配置和查询表单属于查看弹窗扩展配置，允许追加在 `ViewDescSchema` 后面。
+- `model.tsx` 内部顺序固定为：表格查询 `IndexGridSchema` -> 表格列 `IndexGridColumns` -> 新增/编辑表单 `EditFormSchema` -> 查看描述 `ViewDescSchema`。
+- `api/index.ts` 从同级 `type.ts` 导入参数和响应类型，不再使用 `any`。
+
+以 `compare/after` 中的 `tSimChannels` 完整对照为例，模板占位替换应类似这样：
+
+| 模板内容                  | 真实模块内容              |
+| ------------------------- | ------------------------- |
+| `TemplateCrudModel`       | `TSimChannelsModel`       |
+| `TemplateCrudListParam`   | `TSimChannelsListParam`   |
+| `TemplateCrudListRes`     | `TSimChannelsListRes`     |
+| `TemplateCrudEditParam`   | `TSimChannelsEditParam`   |
+| `TemplateCrudViewParam`   | `TSimChannelsViewParam`   |
+| `TemplateCrudViewRes`     | `TSimChannelsViewRes`     |
+| `TemplateCrudDeleteParam` | `TSimChannelsDeleteParam` |
+| `TemplateCrudExportParam` | `TSimChannelsExportParam` |
+| `iot/templateCrud`        | `iot/tSimChannels`        |
+| `示例业务`                | `通道管理`                |
+| `cpm:iot:templateCrud`    | `cpm:iot:tSimChannels`    |
+
+## 路径一：基于默认生成代码应用新模板
+
+这种情况适用于刚生成、还没有明显业务改动的页面。处理目标是把默认生成代码统一为新结构。
+
+### 1. 检查 API 类型
+
+先检查对应 API 目录下是否存在 `type.ts`。
+
+- 如果 `type.ts` 存在：继续按下面规则修正 API 类型和 `index.ts`。
+- 如果 `type.ts` 不存在：跳过 API 类型化流程，不要临时编造类型文件；在最终输出中明确提示用户“对应 API 缺少 type.ts，需要先补全类型后才能完成 API 类型化迁移”。
+
+必须包含这些类型：
+
+```text
+XxxModel
+XxxListParam
+XxxListRes
+XxxExportParam
+XxxEditParam
+XxxViewParam
+XxxViewRes
+XxxDeleteParam
+```
+
+规则：
+
+- `XxxListRes` 使用 `GlobalListRes<XxxModel>`。
+- `XxxExportParam` 通常复用 `XxxListParam`。
+- `XxxViewParam` 写真实主键字段。
+- `XxxDeleteParam` 按后端约定写单值或数组。
+- 字段注释保留或补齐，便于后续判断主键和业务字段。
+
+### 2. 替换 API index.ts
+
+用 `template/api/index.ts` 的结构改造真实 API 文件。
+
+必须满足：
+
+- 从 `./type` 导入请求参数和响应类型。
+- `List(params: XxxListParam)` 返回 `requestClient.get<XxxListRes>(...)`。
+- `View(params: XxxViewParam)` 返回 `requestClient.get<XxxViewRes>(...)`。
+- `Edit/Delete/Export` 使用明确参数类型。
+- 保留函数名 `List/Delete/Edit/View/Export`。
+- 不再使用 `params: any`、`requestClient.get<any>` 这类旧写法。
+
+API 验收时必须同时满足：
+
+```text
+不存在：params: any
+不存在：requestClient.get<any>
+存在：List(params: XxxListParam)
+存在：requestClient.get<XxxListRes>
+存在：View(params: XxxViewParam)
+存在：requestClient.get<XxxViewRes>
+```
+
+### 3. 改造 model.tsx
+
+把旧导出名统一为新导出名：
+
+| 旧风格        | 新风格             | 用途         |
+| ------------- | ------------------ | ------------ |
+| `querySchema` | `IndexGridSchema`  | 表格查询表单 |
+| `columns`     | `IndexGridColumns` | 表格列       |
+| `editSchema`  | `EditFormSchema`   | 编辑表单     |
+| `viewSchema`  | `ViewDescSchema`   | 查看描述     |
+
+必须清理旧残留：
+
+```text
+querySchema
+editSchema
+viewSchema
+State
+newState
+BasicDrawer
+useVbenDrawer
+rules: null
+export const columns
+import { columns
+```
+
+注意：`columns` 是 `useVbenVxeGrid` 的合法配置项，不要裸搜 `columns` 后全部清理。只清理旧导出 `export const columns`、旧导入 `import { columns }` 或把 `columns` 当表格列变量直接传入的旧写法。
+
+字段配置不要照抄模板里的 `name/code/status/remark` 示例字段。真实模块要从旧 `model.tsx`、接口字段或 `type.ts` 迁移字段。可以参考 `compare/after/view/model.tsx.txt` 的最终形态：保留真实业务字段，同时清理旧生成器残留。
+
+`model.tsx` 必须满足这些结构和样式规则：
+
+- 导出顺序固定为 `IndexGridSchema` -> `IndexGridColumns` -> `EditFormSchema` -> `ViewDescSchema`。
+- `IndexGridColumns` 中删除旧生成器残留的 `align: 'left'`。
+- `IndexGridColumns` 中删除 `width: -1`，根据字段补合适宽度，普通字段优先用 `minWidth: 120`。
+- 操作列使用固定宽度，例如 `{ title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' }`。
+- `IndexGridSchema` 和 `EditFormSchema` 中删除旧生成器残留的 `formItemClass: 'col-span-1'`。
+- `EditFormSchema` 只放新增/编辑字段，不要混入查看字段。
+- `ViewDescSchema` 只放查看字段，顺序应跟详情展示一致，不要插到 `EditFormSchema` 前面。
+
+`model.tsx` 禁止残留：
+
+```text
+align: 'left'
+width: -1
+formItemClass: 'col-span-1'
+formItemClass: "col-span-1"
+```
+
+### 4. 改造 index.vue
+
+复制 `template/view/index.vue` 的结构，再替换真实模块信息。
+
+必须替换：
+
+- `TemplateCrudModel` -> 真实 `XxxModel`
+- `../api/type` -> 真实 API 类型路径
+- `../api` -> 真实 API 路径
+- `示例业务` -> 真实表格标题和导出文件名
+- `cpm:iot:templateCrud` -> 真实权限前缀
+- 删除和批量删除里的主键字段
+
+模板为了在 `src/template` 目录下自包含，使用了 `../api` 相对导入。迁移到真实业务模块后，API 导入应改成 `#/api/iotlcm/...` 形式，并放回 API 接口导入分组。
+
+结构要求：
+
+- 使用 `Page + useVbenVxeGrid + useVbenModal`。
+- 代码区域顺序固定为 `常量 -> 数据 -> 方法 -> 组件 -> 周期`。
+- `formOptions.schema` 使用 `IndexGridSchema`。
+- `gridOptions.columns` 使用 `IndexGridColumns`。
+- 操作列插槽统一写 `#action="{ row }"`。
+- 列表查询中清空 `selectRows.value`。
+- 保留新增、批量删除、导出、查看、编辑、删除的标准入口。
+- 工具栏按钮必须放在 `<div class="flex items-center justify-center gap-2">` 中，按钮自身使用 `class="flex items-center"`。
+- 操作列按钮必须放在 `<div class="flex items-center justify-center gap-2">` 中，链接按钮自身使用 `class="border-none p-0"`。
+- 按钮组间距统一由父容器 `gap-2` 控制，不使用按钮自身的 `mr-2` 维护间距。
+
+`useVbenVxeGrid` 配置必须以模板为准：
+
+- `formOptions` 默认只保留 `...(BetterVben.grid.formOptions.default as any)` 和 `schema: IndexGridSchema`。
+- `gridOptions` 默认只保留 `...(BetterVben.grid.gridOptions.default as any)`、`columns: IndexGridColumns` 和 `proxyConfig`。
+- 引入 `BetterVben` 默认配置后，不要继续叠加旧生成器默认项：`fieldMappingTime: [['date', ['start', 'end']]]`、`submitOnChange`、`submitOnEnter`、`checkboxConfig`、`rowConfig` 都要默认删除。
+- 如果业务确实依赖时间字段映射、行主键或复选框展示配置，必须按真实字段重新写，不能保留示例 `date/start/end/id`。最终汇报里要说明这是业务保留项。
+- 判断标准：旧默认面板带来的配置删除；真实业务字段转换、交互或后端参数需要的配置保留并验证。
+
+### 5. 改造 edit.vue
+
+复制 `template/view/edit.vue` 的结构，再替换真实模块信息。
+
+必须替换：
+
+- `TemplateCrudModel` -> 真实 `XxxModel`
+- `View({ id: data.data.id })` -> 真实详情主键参数
+- `Edit(value as TemplateCrudModel)` -> 真实模型类型或编辑参数类型，默认生成页通常使用真实 `XxxModel`
+
+结构要求：
+
+- 使用 `ModalProps { data, isUpdate }`。
+- 打开编辑弹窗时调用 `View` 获取最新详情。
+- 提交时使用 `BetterVben.function.formValidate` 和 `BetterVben.function.formSubmit`。
+- `onConfirm` 和 `onOpenChange` 使用 `BetterVben.function.modalAutoLoadAsync` 包裹。
+- 取消时关闭弹窗并 `resetForm`。
+- 表单组件必须命名为 `const [Form, formApi] = useVbenForm(...)`，模板中必须使用 `<Form />`。
+- `useVbenForm` 必须使用 `...BetterVben.form.default` 作为基础配置，除非已有业务明确需要保留特殊布局。
+
+`edit.vue` 禁止残留这些旧写法：
+
+```text
+DrawerProps
+BasicDrawer
+BasicForm
+EditDrawer
+editDrawerApi
+reload
+useVbenDrawer
+formApi.validate()
+formApi.getValues()
+modalApi.setState({ confirmLoading
+drawerApi
+showConfirmButton
+readonly
+only-read
+```
+
+说明：
+
+- 如果旧页面有查看态 `view`，新风格应交给独立 `view.vue` 处理，不要把查看态混进 `edit.vue`。
+- 如果旧页面有 `id/update/view` 传参，迁移后统一改成 `ModalProps { data, isUpdate }`，由 `index.vue` 调用 `editModalApi.setData({ data: row, isUpdate: !!row })`。
+- 如果旧页面用 `reload` 事件，迁移后统一改为 `confirm` 事件，父组件使用 `<EditModal @confirm="handleRefresh" />`。
+- 如果旧页面手写表单校验和 loading，迁移后必须改为 `BetterVben.function.formValidate`、`formSubmit`、`modalAutoLoadAsync`。
+
+### 6. 改造 view.vue
+
+复制 `template/view/view.vue` 的结构，再替换真实模块信息。
+
+必须替换：
+
+- `TemplateCrudModel` -> 真实 `XxxModel`
+- `View({ id: row.id })` -> 真实详情主键参数
+- `ViewDescSchema` 保持新命名
+
+结构要求：
+
+- 使用 `Description + useDescription`。
+- 打开弹窗时从 `modalApi.getData()` 取 `{ row }`。
+- `schema` 使用 `ViewDescSchema`。
+- 查看弹窗不提交，模板中保留 `:footer="false"`。
+
+### 7. 扫描旧风格残留
+
+迁移后在目标模块执行：
+
+```bash
+rg -n "querySchema|editSchema|viewSchema|State|newState|BasicDrawer|BasicForm|DrawerProps|useVbenDrawer|rules:\s*null|export const columns|import .*columns|align:\s*'left'|width:\s*-1|formItemClass:\s*['\"]col-span-1['\"]|fieldMappingTime|submitOnChange|submitOnEnter|checkboxConfig|rowConfig|formApi\.validate\(|formApi\.getValues\(|modalApi\.setState\(\{ confirmLoading|drawerApi|emit = defineEmits<\{ reload" apps/web-antd/src/views/iotlcm/目标模块路径
+```
+
+如果扫描结果命中真实旧变量或旧默认配置，继续清理；如果命中确实需要保留的业务配置，必须确认字段名和行为仍然正确，不能直接忽略。
+
+## 路径二：不影响既有逻辑应用新面板
+
+这种情况适用于旧代码已经被人改过，不能简单整体覆盖。处理目标是只统一外层风格，不改变现有功能。
+
+### 1. 先做业务盘点
+
+改动前先列出旧代码中的特殊逻辑：
+
+- 工具栏额外按钮，例如导入、审核、同步、分配、启停。
+- 操作列额外按钮，例如详情跳转、重置、启用、禁用。
+- 特殊 API，例如 `Enable`、`Disable`、`Sync`、`Import`。
+- 查询参数转换，例如时间范围拆分、枚举转数字、过滤空字符串。
+- 编辑回显处理，例如 JSON 字符串转对象、数组合并、字段补默认值。
+- 提交处理，例如提交前字段清洗、提交后刷新其他数据。
+- 权限码和路由跳转。
+- 插槽渲染，例如字典、成员摘要、可点击字段、自定义组件。
+
+### 2. 只替换面板骨架
+
+不要直接删除旧文件后重写。推荐顺序：
+
+1. 先把旧文件中所有特殊逻辑标记出来。
+2. 复制新模板骨架，不要从旧 Drawer 文件上局部改。
+3. 把旧特殊逻辑按区域放回，只保留业务逻辑，不保留旧面板写法。
+4. 对比原文件确认功能入口没有少。
+
+区域放置规则：
+
+| 内容                                                              | 放置区域 |
+| ----------------------------------------------------------------- | -------- |
+| `defineEmits`、静态标题、权限码、常量枚举                         | `常量`   |
+| `ref`、`computed`、`reactive`、`inject`                           | `数据`   |
+| CRUD 方法、自定义业务方法、参数转换                               | `方法`   |
+| `useVbenVxeGrid`、`useVbenModal`、`useVbenForm`、`useDescription` | `组件`   |
+| `watch`、`onMounted` 等生命周期                                   | `周期`   |
+
+### 3. 保持业务行为不变
+
+以下内容不能因套模板而擅自改变：
+
+- API URL。
+- 后端参数名。
+- 主键字段。
+- 权限码。
+- 表格字段顺序和必要插槽。
+- 新增、编辑、查看的传参结构。
+- 提交前后的数据转换。
+- 用户已经新增的按钮和业务方法。
+
+如果新模板和旧业务逻辑冲突，以旧业务逻辑为准，只把代码组织方式调成新风格。
+
+这里的“以旧业务逻辑为准”只指业务行为，不包括旧代码结构。下面这些不是业务逻辑，必须按新模板替换：
+
+- `BasicDrawer/useVbenDrawer`
+- `BasicForm`
+- `DrawerProps`
+- `reload` 事件
+- 手写 loading
+- 手写 `formApi.validate/getValues`
+- 编辑弹窗里的查看态只读逻辑
+- 旧生成器默认 `fieldMappingTime/submitOnChange/submitOnEnter`
+- 旧生成器默认 `checkboxConfig/rowConfig`
+- 按钮自身使用 `mr-2` 维护按钮组间距
+
+如果旧代码里有真正的时间范围查询、行主键或复选框业务要求，可以在新模板里重新加回，但必须替换成真实字段并验证效果。
+
+### 4. 逐项回归
+
+完成后人工核对：
+
+- 搜索条件是否都还在。
+- 表格列和操作列是否都还在。
+- 新增、编辑、查看、删除、批量删除、导出是否可触发。
+- 自定义按钮是否仍可触发原方法。
+- 编辑回显参数是否还是原主键。
+- 提交 payload 是否没有少字段。
+
+## 命名和代码风格要求
+
+导入顺序：
+
+1. Vue 相关
+2. UI 组件
+3. API 接口
+4. 自定义组件
+5. 常量配置
+6. 工具函数
+7. 相对导入
+
+代码区域顺序：
+
+```ts
+/** ====================  常量  ==================== */
+/** ====================  数据  ==================== */
+/** ====================  方法  ==================== */
+/** ====================  组件  ==================== */
+/** ====================  周期  ==================== */
+```
+
+如果存在类型声明，可放在 `常量` 前的 `类型` 区域：
+
+```ts
+/** ====================  类型  ==================== */
+```
+
+## 验证命令
+
+在 `vue` 目录下执行：
+
+```bash
+pnpm exec prettier --check apps/web-antd/src/template/iotlcm-crud-style
+pnpm exec eslint apps/web-antd/src/template/iotlcm-crud-style --ext .ts,.tsx,.vue
+```
+
+迁移真实模块后，额外执行目标模块扫描：
+
+```bash
+rg -n "querySchema|editSchema|viewSchema|State|newState|BasicDrawer|BasicForm|DrawerProps|useVbenDrawer|rules:\s*null|export const columns|import .*columns|align:\s*'left'|width:\s*-1|formItemClass:\s*['\"]col-span-1['\"]|fieldMappingTime|submitOnChange|submitOnEnter|checkboxConfig|rowConfig|formApi\.validate\(|formApi\.getValues\(|modalApi\.setState\(\{ confirmLoading|drawerApi|emit = defineEmits<\{ reload" apps/web-antd/src/views/iotlcm/目标模块路径
+```
+
+全量 `typecheck` 如果命中项目既有错误，需要再过滤目标模块路径，确认本次迁移目标没有新增类型错误。
+
+API 也必须扫描：
+
+```bash
+rg -n "params:\s*any|requestClient\.(get|post)<any>" apps/web-antd/src/api/iotlcm/目标模块路径
+```
+
+如果目标 API 目录不存在 `type.ts`，最终回复必须包含：
+
+```text
+未完成 API 类型化：目标 API 目录缺少 type.ts，请先补全类型文件。
+```
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/README.md b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/README.md
new file mode 100644
index 0000000..9be8842
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/README.md
@@ -0,0 +1,39 @@
+# tSimChannels 完整对照组
+
+本目录保存 `tSimChannels` 修改前后的完整代码快照，用来辅助理解模板迁移结果。
+
+## 结构
+
+```text
+compare/
+├── before/
+│   ├── api/
+│   │   ├── index.ts.txt
+│   │   └── type.ts.txt
+│   └── view/
+│       ├── index.vue.txt
+│       ├── edit.vue.txt
+│       ├── view.vue.txt
+│       └── model.tsx.txt
+└── after/
+    ├── api/
+    │   ├── index.ts.txt
+    │   └── type.ts.txt
+    └── view/
+        ├── index.vue.txt
+        ├── edit.vue.txt
+        ├── view.vue.txt
+        └── model.tsx.txt
+```
+
+文件使用 `.txt` 后缀是为了保留完整源码，同时避免旧代码被 ESLint 或 TypeScript 当作真实业务代码扫描。
+
+## 阅读方式
+
+1. 先看 `before/api/index.ts.txt` 和 `after/api/index.ts.txt`，确认 API 必须从 `any` 改为 `type.ts` 类型化。
+2. 再看 `before/view/index.vue.txt` 和 `after/view/index.vue.txt`，确认 `useVbenVxeGrid` 引入 `BetterVben` 默认配置后，旧生成器默认的 `fieldMappingTime/submitOnChange/submitOnEnter/checkboxConfig/rowConfig` 不再继续叠加。
+3. 继续看 `before/view/index.vue.txt` 和 `after/view/index.vue.txt` 的按钮组：工具栏和操作列都应使用父容器 `flex items-center justify-center gap-2` 管理间距，按钮自身不再使用 `mr-2`。
+4. 再看 `before/view/edit.vue.txt` 和 `after/view/edit.vue.txt`，重点比较旧 Drawer/BasicForm 写法如何收敛到 Modal/Form 模板。
+5. 最后看 `before/view/model.tsx.txt` 和 `after/view/model.tsx.txt`，确认 `querySchema/editSchema/viewSchema/columns` 如何改为新命名。
+6. 对比 `model.tsx` 时还要看旧生成器残留如何被清理：`align: 'left'`、`width: -1`、`formItemClass: 'col-span-1'` 都应在修改后消失，并补充合理的 `minWidth`。
+7. 修改后的 `model.tsx` 顺序必须是：表格查询 `IndexGridSchema` -> 表格列 `IndexGridColumns` -> 新增/编辑表单 `EditFormSchema` -> 查看描述 `ViewDescSchema`。
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/api/index.ts.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/api/index.ts.txt
new file mode 100644
index 0000000..969ee8c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/api/index.ts.txt
@@ -0,0 +1,49 @@
+import type {
+  TSimChannelsDeleteParam,
+  TSimChannelsEditParam,
+  TSimChannelsExportParam,
+  TSimChannelsListParam,
+  TSimChannelsListRes,
+  TSimChannelsViewParam,
+  TSimChannelsViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取通道管理列表
+export function List(params: TSimChannelsListParam) {
+  return requestClient.get<TSimChannelsListRes>('iot/tSimChannels/list', {
+    params,
+  });
+}
+
+// 删除/批量删除通道管理
+export function Delete(params: TSimChannelsDeleteParam) {
+  return requestClient.post('iot/tSimChannels/delete', { ...params });
+}
+
+// 添加/编辑通道管理
+export function Edit(params: TSimChannelsEditParam) {
+  return requestClient.post('iot/tSimChannels/edit', { ...params });
+}
+
+// 获取通道管理指定详情
+export function View(params: TSimChannelsViewParam) {
+  return requestClient.get<TSimChannelsViewRes>('iot/tSimChannels/view', {
+    params,
+  });
+}
+
+// 导出通道管理
+export function Export(params: TSimChannelsExportParam) {
+  return requestClient.post<Blob>(
+    '/iot/tSimChannels/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/api/type.ts.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/api/type.ts.txt
new file mode 100644
index 0000000..ffbe735
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/api/type.ts.txt
@@ -0,0 +1,225 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 通道管理列表项 */
+export interface TSimChannelsModel {
+  /** ID */
+  id: number;
+  /** 模板标识 */
+  tempKey: string;
+  /** 模板名称 */
+  tempName: string;
+  /** 通道编号 */
+  chanKey: string;
+  /** 通道名称 */
+  chanName: string;
+  /** 通道配置 */
+  chanConfig: string;
+  /** 通道状态(0未启用,1启用) */
+  chanStatus: number;
+  /** 通道别名 */
+  chanAlias: string;
+  /** 通道行政区域代码(省市) */
+  regionCode: string;
+  /** 应用标识 */
+  appKey: string;
+  /** 应用密钥 */
+  appSecret: string;
+  /** 接口调用凭证 */
+  accessToken: string;
+  /** 凭证申请时间 */
+  accessTokenCreated: string;
+  /** 凭证过期时间 */
+  accessTokenExpire: string;
+  /** 刷新凭证 */
+  refreshToken: string;
+  /** 刷新凭证申请时间 */
+  refreshTokenCreated: string;
+  /** 刷新凭证过期时间 */
+  refreshTokenExpire: string;
+  /** 备注 */
+  remark: string;
+  /** 登录账号 */
+  loginUser: string;
+  /** 登录密码 */
+  loginPassword: string;
+  /** 登录地址 */
+  loginUrl: string;
+  /** 登录状态(0未启用,1启用) */
+  loginState: number;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取通道管理指定信息响应项 */
+export interface TSimChannelsViewModel {
+  /** ID */
+  id: number;
+  /** 模板标识 */
+  tempKey: string;
+  /** 通道编号 */
+  chanKey: string;
+  /** 通道名称 */
+  chanName: string;
+  /** 通道配置 */
+  chanConfig: string;
+  /** 通道状态(0启用,1停用) */
+  chanStatus: number;
+  /** 通道别名 */
+  chanAlias: string;
+  /** 通道行政区域代码(省市) */
+  regionCode: string;
+  /** 应用标识 */
+  appKey: string;
+  /** 应用密钥 */
+  appSecret: string;
+  /** 接口调用凭证 */
+  accessToken: string;
+  /** 凭证申请时间 */
+  accessTokenCreated: string;
+  /** 凭证过期时间 */
+  accessTokenExpire: string;
+  /** 刷新凭证 */
+  refreshToken: string;
+  /** 备注 */
+  remark: string;
+  /** 登录账号 */
+  loginUser: string;
+  /** 登录密码 */
+  loginPassword: string;
+  /** 登录地址 */
+  loginUrl: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新时间 */
+  updatedAt: string;
+  /** 模板名称 */
+  tempName: string;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+}
+
+/** 获取通道管理列表 请求参数 */
+export interface TSimChannelsListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** ID */
+  id?: number;
+  /** 模板标识 */
+  tempKey?: string;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 通道名称 */
+  chanName?: string;
+  /** 通道状态(0未启用,1启用) */
+  chanStatus?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取通道管理列表 响应 */
+export type TSimChannelsListRes = GlobalListRes<TSimChannelsModel>;
+
+/** 导出通道管理列表 请求参数 */
+export type TSimChannelsExportParam = TSimChannelsListParam;
+
+/** 修改/新增通道管理 请求参数 */
+export interface TSimChannelsEditParam {
+  /** ID */
+  id?: number;
+  /** 模板标识 */
+  tempKey?: string;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 通道名称 */
+  chanName?: string;
+  /** 通道配置 */
+  chanConfig?: string;
+  /** 通道状态(0未启用,1启用) */
+  chanStatus?: number;
+  /** 通道别名 */
+  chanAlias?: string;
+  /** 通道行政区域代码(省市) */
+  regionCode?: string;
+  /** 应用标识 */
+  appKey?: string;
+  /** 应用密钥 */
+  appSecret?: string;
+  /** 接口调用凭证 */
+  accessToken?: string;
+  /** 凭证申请时间 */
+  accessTokenCreated?: string;
+  /** 凭证过期时间 */
+  accessTokenExpire?: string;
+  /** 刷新凭证 */
+  refreshToken?: string;
+  /** 刷新凭证申请时间 */
+  refreshTokenCreated?: string;
+  /** 刷新凭证过期时间 */
+  refreshTokenExpire?: string;
+  /** 备注 */
+  remark?: string;
+  /** 登录账号 */
+  loginUser?: string;
+  /** 登录密码 */
+  loginPassword?: string;
+  /** 登录地址 */
+  loginUrl?: string;
+  /** 登录状态(0未启用,1启用) */
+  loginState?: number;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门 */
+  createdDept?: number;
+  /** 创建者 */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者 */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取通道管理指定信息 请求参数 */
+export interface TSimChannelsViewParam {
+  /** ID */
+  id: number;
+}
+
+/** 获取通道管理指定信息 响应 */
+export type TSimChannelsViewRes = TSimChannelsViewModel;
+
+/** 删除通道管理 请求参数 */
+export interface TSimChannelsDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/edit.vue.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/edit.vue.txt
new file mode 100644
index 0000000..1db024b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/edit.vue.txt
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { TSimChannelsModel } from '#/api/iotlcm/tChannel/tSimChannels/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/tChannel/tSimChannels';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data: TSimChannelsModel;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  if (data.isUpdate) {
+    try {
+      const res = await View({ id: data.data.id });
+      await formApi.setValues(res);
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(
+        Edit(value as TSimChannelsModel),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '操作成功',
+          emit: () => {
+            emit('confirm');
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/index.vue.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/index.vue.txt
new file mode 100644
index 0000000..807ea5c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/index.vue.txt
@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+import type { TSimChannelsModel } from '#/api/iotlcm/tChannel/tSimChannels/type';
+
+import { h, ref } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Delete, Export, List } from '#/api/iotlcm/tChannel/tSimChannels';
+import BetterVben from '#/constants/BetterVben';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<TSimChannelsModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TSimChannelsModel) {
+  viewModalApi.setData({ row }).open();
+}
+function handleEdit(row?: TSimChannelsModel) {
+  editModalApi.setData({ data: row, isUpdate: !!row }).open();
+}
+async function handleDelete(row: TSimChannelsModel) {
+  await Delete({ id: [row.id] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: number[] = rows.map((row) => row.id);
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    centered: true,
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ id: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '通道管理', {
+    ...formValues,
+    page: 1,
+    pageSize: 2000,
+  });
+  message.success('导出成功');
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="通道管理">
+      <template #toolbar-tools>
+        <div class="flex items-center justify-center gap-2">
+          <Button
+            class="flex items-center"
+            type="primary"
+            :icon="h(MdiPlus)"
+            @click="handleEdit(undefined)"
+            v-access:code="'cpm:iot:tSimChannels:edit'"
+          >
+            新增
+          </Button>
+          <Button
+            v-if="selectRows.length > 0"
+            class="flex items-center"
+            type="primary"
+            danger
+            :icon="h(MdiDelete)"
+            @click="handleMultiDelete"
+            v-access:code="'cpm:iot:tSimChannels:delete'"
+          >
+            删除
+          </Button>
+          <Button
+            class="flex items-center"
+            type="primary"
+            :icon="h(MdiExport)"
+            @click="handleExport"
+            v-access:code="'cpm:iot:tSimChannels:export'"
+          >
+            导出
+          </Button>
+        </div>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center justify-center gap-2">
+          <Button
+            class="border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:iot:tSimChannels:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:iot:tSimChannels:edit'"
+          >
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:iot:tSimChannels:delete']" type="code">
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button class="border-none p-0" :block="false" type="link" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/model.tsx.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/model.tsx.txt
new file mode 100644
index 0000000..bfa4149
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/model.tsx.txt
@@ -0,0 +1,320 @@
+import type { VbenFormSchema } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { renderDict } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'chanKey',
+    component: 'Input',
+    label: '通道编号',
+    componentProps: {
+      placeholder: '请输入通道编号',
+    },
+  },
+  {
+    fieldName: 'chanName',
+    component: 'Input',
+    label: '通道名称',
+    componentProps: {
+      placeholder: '请输入通道名称',
+    },
+  },
+  {
+    fieldName: 'chanStatus',
+    component: 'Select',
+    label: '通道状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择通道状态',
+      options: getDictOptions('sys_normal_disable', true),
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  { title: 'ID', field: 'id', minWidth: 80 },
+  {
+    title: '通道编号',
+    field: 'chanKey',
+    minWidth: 120,
+  },
+  {
+    title: '通道名称',
+    field: 'chanName',
+    minWidth: 120,
+  },
+
+  {
+    title: '模板标识',
+    field: 'tempName',
+    minWidth: 120,
+  },
+  {
+    title: '通道配置',
+    field: 'chanConfig',
+    minWidth: 120,
+  },
+
+  {
+    title: '通道状态',
+    field: 'chanStatus',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.chanStatus, 'sys_normal_disable');
+      },
+    },
+  },
+  {
+    title: '通道行政区域代码(省市)',
+    field: 'regionCode',
+    minWidth: 120,
+  },
+
+  {
+    title: '通道别名',
+    field: 'chanAlias',
+    minWidth: 120,
+  },
+
+  {
+    title: '应用标识',
+    field: 'appKey',
+    minWidth: 120,
+  },
+  {
+    title: '应用密钥',
+    field: 'appSecret',
+    minWidth: 120,
+  },
+  {
+    title: '接口调用凭证',
+    field: 'accessToken',
+    minWidth: 120,
+  },
+  {
+    title: '凭证申请时间',
+    field: 'accessTokenCreated',
+    minWidth: 120,
+  },
+  {
+    title: '凭证过期时间',
+    field: 'accessTokenExpire',
+    minWidth: 120,
+  },
+  {
+    title: '刷新凭证申请时间',
+    field: 'refreshTokenCreated',
+    minWidth: 120,
+  },
+  {
+    title: '刷新凭证过期时间',
+    field: 'refreshTokenExpire',
+    minWidth: 120,
+  },
+  {
+    title: '登录账号',
+    field: 'loginUser',
+    minWidth: 120,
+  },
+  {
+    title: '登录密码',
+    field: 'loginPassword',
+    minWidth: 120,
+  },
+  {
+    title: '登录状态',
+    field: 'loginState',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.loginState, 'sys_normal_disable');
+      },
+    },
+  },
+  { title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: 'ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'tempKey',
+    component: 'Select',
+    label: '模板标识',
+    componentProps: {
+      placeholder: '请选择模板标识',
+      options: [],
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'chanKey',
+    component: 'Input',
+    label: '通道编号',
+    componentProps: {
+      placeholder: '请输入通道编号',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'chanName',
+    component: 'Input',
+    label: '通道名称',
+    componentProps: {
+      placeholder: '请输入通道名称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'chanConfig',
+    component: 'Input',
+    label: '通道配置',
+    componentProps: {
+      placeholder: '请输入通道配置',
+    },
+  },
+  {
+    fieldName: 'chanStatus',
+    component: 'Select',
+    label: '通道状态(0未启用,1启用)',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择通道状态(0未启用,1启用)',
+      options: getDictOptions('sys_normal_disable', true),
+    },
+  },
+  {
+    fieldName: 'chanAlias',
+    component: 'Input',
+    label: '通道别名',
+    componentProps: {
+      placeholder: '请输入通道别名',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'regionCode',
+    component: 'Input',
+    label: '通道行政区域代码(省市)',
+    componentProps: {
+      placeholder: '请输入通道行政区域代码(省市)',
+    },
+  },
+  {
+    fieldName: 'appKey',
+    component: 'Input',
+    label: '应用标识',
+    componentProps: {
+      placeholder: '请输入应用标识',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'appSecret',
+    component: 'Input',
+    label: '应用密钥',
+    componentProps: {
+      placeholder: '请输入应用密钥',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'remark',
+    component: 'Input',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  },
+  {
+    fieldName: 'loginUser',
+    component: 'Input',
+    label: '登录账号',
+    componentProps: {
+      placeholder: '请输入登录账号',
+    },
+  },
+  {
+    fieldName: 'loginPassword',
+    component: 'Input',
+    label: '登录密码',
+    componentProps: {
+      placeholder: '请输入登录密码',
+    },
+  },
+  {
+    fieldName: 'loginUrl',
+    component: 'Input',
+    label: '登录地址',
+    componentProps: {
+      placeholder: '请输入登录地址',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'loginState',
+    component: 'Select',
+    label: '登录状态(0未启用,1启用)',
+    componentProps: {
+      placeholder: '请输入登录状态(0未启用,1启用)',
+      options: getDictOptions('sys_normal_disable', true),
+    },
+  },
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'id', label: 'ID' },
+  { field: 'tempKey', label: '模板标识' },
+  { field: 'tempName', label: '模板名称' },
+  { field: 'chanKey', label: '通道编号' },
+  { field: 'chanName', label: '通道名称' },
+  { field: 'chanConfig', label: '通道配置' },
+  {
+    field: 'chanStatus',
+    label: '通道状态(0未启用,1启用)',
+    render(chanStatus) {
+      return renderDict(chanStatus, 'sys_normal_disable');
+    },
+  },
+  { field: 'chanAlias', label: '通道别名' },
+  { field: 'regionCode', label: '通道行政区域代码(省市)' },
+  { field: 'appKey', label: '应用标识' },
+  { field: 'appSecret', label: '应用密钥' },
+  { field: 'accessToken', label: '接口调用凭证' },
+  { field: 'accessTokenCreated', label: '凭证申请时间' },
+  { field: 'accessTokenExpire', label: '凭证过期时间' },
+  { field: 'refreshToken', label: '刷新凭证' },
+  { field: 'refreshTokenCreated', label: '刷新凭证申请时间' },
+  { field: 'refreshTokenExpire', label: '刷新凭证过期时间' },
+  { field: 'remark', label: '备注' },
+  { field: 'loginUser', label: '登录账号' },
+  { field: 'loginPassword', label: '登录密码' },
+  { field: 'loginUrl', label: '登录地址' },
+  {
+    field: 'loginState',
+    label: '登录状态(0未启用,1启用)',
+    render(loginState) {
+      return renderDict(loginState, 'sys_normal_disable');
+    },
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/view.vue.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/view.vue.txt
new file mode 100644
index 0000000..84b699f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/after/view/view.vue.txt
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { TSimChannelsModel } from '#/api/iotlcm/tChannel/tSimChannels/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/tChannel/tSimChannels';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { ViewDescSchema } from './model';
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: TSimChannelsModel };
+  const record = await View({ id: row.id });
+  setDescProps({ data: record }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: ViewDescSchema,
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/api/index.ts.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/api/index.ts.txt
new file mode 100644
index 0000000..233369a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/api/index.ts.txt
@@ -0,0 +1,41 @@
+import type {
+  TSimChannelsDeleteParam,
+  TSimChannelsEditParam,
+  TSimChannelsExportParam,
+  TSimChannelsListParam,
+  TSimChannelsListRes,
+  TSimChannelsModel,
+  TSimChannelsViewModel,
+  TSimChannelsViewParam,
+  TSimChannelsViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取通道列表列表
+export function List(params:any) {
+  return requestClient.get<any>('iot/tSimChannels/list', { params });
+}
+
+// 删除/批量删除通道列表
+export function Delete(params:any) {
+  return requestClient.post<any>('iot/tSimChannels/delete', { ...params });
+}
+
+// 添加/编辑通道列表
+export function Edit(params:any) {
+  return requestClient.post<any>('iot/tSimChannels/edit', { ...params });
+}
+
+// 获取通道列表指定详情
+export function View(params:any) {
+  return requestClient.get<any>('iot/tSimChannels/view', { params });
+}
+
+// 导出通道列表
+export function Export(params:any) {
+  return requestClient.post<Blob>('/iot/tSimChannels/export',  { ...params } , {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    responseType: 'blob',
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/api/type.ts.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/api/type.ts.txt
new file mode 100644
index 0000000..ffbe735
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/api/type.ts.txt
@@ -0,0 +1,225 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 通道管理列表项 */
+export interface TSimChannelsModel {
+  /** ID */
+  id: number;
+  /** 模板标识 */
+  tempKey: string;
+  /** 模板名称 */
+  tempName: string;
+  /** 通道编号 */
+  chanKey: string;
+  /** 通道名称 */
+  chanName: string;
+  /** 通道配置 */
+  chanConfig: string;
+  /** 通道状态(0未启用,1启用) */
+  chanStatus: number;
+  /** 通道别名 */
+  chanAlias: string;
+  /** 通道行政区域代码(省市) */
+  regionCode: string;
+  /** 应用标识 */
+  appKey: string;
+  /** 应用密钥 */
+  appSecret: string;
+  /** 接口调用凭证 */
+  accessToken: string;
+  /** 凭证申请时间 */
+  accessTokenCreated: string;
+  /** 凭证过期时间 */
+  accessTokenExpire: string;
+  /** 刷新凭证 */
+  refreshToken: string;
+  /** 刷新凭证申请时间 */
+  refreshTokenCreated: string;
+  /** 刷新凭证过期时间 */
+  refreshTokenExpire: string;
+  /** 备注 */
+  remark: string;
+  /** 登录账号 */
+  loginUser: string;
+  /** 登录密码 */
+  loginPassword: string;
+  /** 登录地址 */
+  loginUrl: string;
+  /** 登录状态(0未启用,1启用) */
+  loginState: number;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+  /** 更新时间 */
+  updatedAt: string;
+}
+
+/** 获取通道管理指定信息响应项 */
+export interface TSimChannelsViewModel {
+  /** ID */
+  id: number;
+  /** 模板标识 */
+  tempKey: string;
+  /** 通道编号 */
+  chanKey: string;
+  /** 通道名称 */
+  chanName: string;
+  /** 通道配置 */
+  chanConfig: string;
+  /** 通道状态(0启用,1停用) */
+  chanStatus: number;
+  /** 通道别名 */
+  chanAlias: string;
+  /** 通道行政区域代码(省市) */
+  regionCode: string;
+  /** 应用标识 */
+  appKey: string;
+  /** 应用密钥 */
+  appSecret: string;
+  /** 接口调用凭证 */
+  accessToken: string;
+  /** 凭证申请时间 */
+  accessTokenCreated: string;
+  /** 凭证过期时间 */
+  accessTokenExpire: string;
+  /** 刷新凭证 */
+  refreshToken: string;
+  /** 备注 */
+  remark: string;
+  /** 登录账号 */
+  loginUser: string;
+  /** 登录密码 */
+  loginPassword: string;
+  /** 登录地址 */
+  loginUrl: string;
+  /** 租户ID */
+  tenantId: string;
+  /** 创建部门 */
+  createdDept: number;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy: number;
+  /** 更新时间 */
+  updatedAt: string;
+  /** 模板名称 */
+  tempName: string;
+  /** 创建者摘要信息 */
+  createdBySumma: MemberSumma;
+  /** 更新者摘要信息 */
+  updatedBySumma: MemberSumma;
+}
+
+/** 获取通道管理列表 请求参数 */
+export interface TSimChannelsListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** ID */
+  id?: number;
+  /** 模板标识 */
+  tempKey?: string;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 通道名称 */
+  chanName?: string;
+  /** 通道状态(0未启用,1启用) */
+  chanStatus?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取通道管理列表 响应 */
+export type TSimChannelsListRes = GlobalListRes<TSimChannelsModel>;
+
+/** 导出通道管理列表 请求参数 */
+export type TSimChannelsExportParam = TSimChannelsListParam;
+
+/** 修改/新增通道管理 请求参数 */
+export interface TSimChannelsEditParam {
+  /** ID */
+  id?: number;
+  /** 模板标识 */
+  tempKey?: string;
+  /** 通道编号 */
+  chanKey?: string;
+  /** 通道名称 */
+  chanName?: string;
+  /** 通道配置 */
+  chanConfig?: string;
+  /** 通道状态(0未启用,1启用) */
+  chanStatus?: number;
+  /** 通道别名 */
+  chanAlias?: string;
+  /** 通道行政区域代码(省市) */
+  regionCode?: string;
+  /** 应用标识 */
+  appKey?: string;
+  /** 应用密钥 */
+  appSecret?: string;
+  /** 接口调用凭证 */
+  accessToken?: string;
+  /** 凭证申请时间 */
+  accessTokenCreated?: string;
+  /** 凭证过期时间 */
+  accessTokenExpire?: string;
+  /** 刷新凭证 */
+  refreshToken?: string;
+  /** 刷新凭证申请时间 */
+  refreshTokenCreated?: string;
+  /** 刷新凭证过期时间 */
+  refreshTokenExpire?: string;
+  /** 备注 */
+  remark?: string;
+  /** 登录账号 */
+  loginUser?: string;
+  /** 登录密码 */
+  loginPassword?: string;
+  /** 登录地址 */
+  loginUrl?: string;
+  /** 登录状态(0未启用,1启用) */
+  loginState?: number;
+  /** 租户ID */
+  tenantId?: string;
+  /** 创建部门 */
+  createdDept?: number;
+  /** 创建者 */
+  createdBy?: number;
+  /** 创建时间 */
+  createdAt?: string;
+  /** 更新者 */
+  updatedBy?: number;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取通道管理指定信息 请求参数 */
+export interface TSimChannelsViewParam {
+  /** ID */
+  id: number;
+}
+
+/** 获取通道管理指定信息 响应 */
+export type TSimChannelsViewRes = TSimChannelsViewModel;
+
+/** 删除通道管理 请求参数 */
+export interface TSimChannelsDeleteParam {
+  /** 主键ID */
+  id: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/edit.vue.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/edit.vue.txt
new file mode 100644
index 0000000..02c9279
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/edit.vue.txt
@@ -0,0 +1,139 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/iotlcm/tChannel/tSimChannels';
+import { List as TemplateList } from '#/api/iotlcm/tChannel/tSimChannelTemplate';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+
+    console.log('onOpenChange called, isUpdate:', update, 'isView:', view);
+
+    try {
+      console.log('Calling TemplateList API...');
+      const templateRes = await TemplateList({ page: 1, pageSize: 1000 });
+      console.log('TemplateList result:', templateRes);
+      const templateOptions = (templateRes.items || []).map((item: any) => ({
+        label: item.tempName,
+        value: item.tempKey,
+      }));
+      await formApi.updateSchema([
+        {
+          fieldName: 'tempKey',
+          componentProps: {
+            options: templateOptions,
+          },
+        },
+      ]);
+
+      if (isUpdate.value || isView.value) {
+        const record = await View({ id: id });
+        await formApi.setValues(record);
+      }
+    } catch (e) {
+      console.error('Failed to load data:', e);
+    } finally {
+      drawerApi.setState({ confirmLoading: false, loading: false });
+    }
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/index.vue.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/index.vue.txt
new file mode 100644
index 0000000..aee6e69
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/index.vue.txt
@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  const { hasAccessByCodes } = useAccess();
+  import { commonDownloadExcel } from '#/utils/file/download';
+  import { List, Export, Delete } from '#/api/iotlcm/tChannel/tSimChannels';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '通道列表',{
+  ...formValues,
+  page: 1,
+  pageSize: 2000,
+  });
+  message.success("导出成功");
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="通道管理">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:iot:tSimChannels:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:iot:tSimChannels:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:iot:tSimChannels:export'">
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:iot:tSimChannels:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:iot:tSimChannels:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:iot:tSimChannels:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/model.tsx.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/model.tsx.txt
new file mode 100644
index 0000000..4837706
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/model.tsx.txt
@@ -0,0 +1,491 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import dayjs from 'dayjs';
+import { z } from '@vben/common-ui';
+import { renderDict, renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+import { DictEnum } from '@vben/constants';
+import { getDictOptions } from '#/utils/dict';
+import { List as TemplateList } from '#/api/iotlcm/tChannel/tSimChannelTemplate';
+
+export class State {
+  public id = 0; // ID
+  public tempKey = ''; // 模板标识
+  public chanKey = ''; // 通道编号
+  public chanName = ''; // 通道名称
+  public chanConfig = ''; // 通道配置
+  public chanStatus = null; // 通道状态(0未启用,1启用)
+  public chanAlias = ''; // 通道别名
+  public regionCode = ''; // 通道行政区域代码(省市)
+  public appKey = ''; // 应用标识
+  public appSecret = ''; // 应用密钥
+  public accessToken = ''; // 接口调用凭证
+  public accessTokenCreated = ''; // 凭证申请时间
+  public accessTokenExpire = ''; // 凭证过期时间
+  public refreshToken = ''; // 刷新凭证
+  public refreshTokenCreated = ''; // 刷新凭证申请时间
+  public refreshTokenExpire = ''; // 刷新凭证过期时间
+  public remark = ''; // 备注
+  public loginUser = ''; // 登录账号
+  public loginPassword = ''; // 登录密码
+  public loginUrl = ''; // 登录地址
+  public loginState = 0; // 登录状态(0未启用,1启用)
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+			{
+				fieldName: 'chanKey',
+				component: 'Input',
+				label: '通道编号',
+				componentProps: {
+					placeholder: '请输入通道编号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},
+			{
+				fieldName: 'chanName',
+				component: 'Input',
+				label: '通道名称',
+				componentProps: {
+					placeholder: '请输入通道名称',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			}
+			
+			,  {    
+			fieldName: 'chanStatus',    
+			component: 'Select',    
+			label: '通道状态',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择通道状态',    
+				options: getDictOptions('sys_normal_disable', true),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null,
+			formItemClass: 'col-span-1',
+		},];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: 'ID',
+    field: 'id',
+    align: 'center',
+    width: -1,
+    type: 'checkbox',
+  },
+  {
+    title: '通道编号',
+    field: 'chanKey',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '通道名称',
+    field: 'chanName',
+    align: 'left',
+    width: -1,
+ },
+
+
+  {
+    title: '模板标识',
+    field: 'tempName',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '通道配置',
+    field: 'chanConfig',	
+    align: 'left',
+    width: -1,
+ },
+ 
+ {    
+	title: '通道状态',    field: 'chanStatus',    align: 'left',    width: -1, 
+	slots: {
+		default: ({ row }) => {
+			return renderDict(row.chanStatus, 'sys_normal_disable');
+		}
+	},
+},
+ {
+    title: '通道行政区域代码(省市)',
+    field: 'regionCode',
+    align: 'left',
+    width: -1,
+ },
+
+{
+    title: '通道别名',
+    field: 'chanAlias',
+    align: 'left',
+    width: -1,
+ },
+ 
+  {
+    title: '应用标识',
+    field: 'appKey',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '应用密钥',
+    field: 'appSecret',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '接口调用凭证',
+    field: 'accessToken',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '凭证申请时间',
+    field: 'accessTokenCreated',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '凭证过期时间',
+    field: 'accessTokenExpire',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '刷新凭证申请时间',
+    field: 'refreshTokenCreated',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '刷新凭证过期时间',
+    field: 'refreshTokenExpire',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '登录账号',
+    field: 'loginUser',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '登录密码',
+    field: 'loginPassword',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '登录状态',
+    field: 'loginState',
+    align: 'left',
+    width: -1,
+    slots: {
+		default: ({ row }) => {
+			return renderDict(row.loginState, 'sys_normal_disable');
+		}
+	},
+ },
+  { title: '操作', width: -1, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  tempKey: string;
+  chanKey: string;
+  chanName: string;
+  chanConfig: string;
+  chanStatus: number;
+  chanAlias: string;
+  regionCode: string;
+  appKey: string;
+  appSecret: string;
+  accessToken: string;
+  accessTokenCreated: string;
+  accessTokenExpire: string;
+  refreshToken: string;
+  refreshTokenCreated: string;
+  refreshTokenExpire: string;
+  remark: string;
+  loginUser: string;
+  loginPassword: string;
+  loginUrl: string;
+  loginState: number;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: 'ID'},
+  {  field: 'tempKey',  label: '模板标识'},
+  {  field: 'tempName',  label: '模板名称'},
+  {  field: 'chanKey',  label: '通道编号'},
+  {  field: 'chanName',  label: '通道名称'},
+  {  field: 'chanConfig',  label: '通道配置'},
+  {
+		field: 'chanStatus',                                                                                                                                                                                                          
+		label: '通道状态(0未启用,1启用)',
+		render(chanStatus) {
+			return renderDict(chanStatus, 'sys_normal_disable');
+		},
+	},
+	{  field: 'chanAlias',  label: '通道别名'},
+  {  field: 'regionCode',  label: '通道行政区域代码(省市)'},
+  {  field: 'appKey',  label: '应用标识'},
+  {  field: 'appSecret',  label: '应用密钥'},
+  {  field: 'accessToken',  label: '接口调用凭证'},
+  {  field: 'accessTokenCreated',  label: '凭证申请时间'},
+  {  field: 'accessTokenExpire',  label: '凭证过期时间'},
+  {  field: 'refreshToken',  label: '刷新凭证'},
+  {  field: 'refreshTokenCreated',  label: '刷新凭证申请时间'},
+  {  field: 'refreshTokenExpire',  label: '刷新凭证过期时间'},
+  {  field: 'remark',  label: '备注'},
+  {  field: 'loginUser',  label: '登录账号'},
+  {  field: 'loginPassword',  label: '登录密码'},
+  {  field: 'loginUrl',  label: '登录地址'},
+  {
+		field: 'loginState',
+		label: '登录状态(0未启用,1启用)',
+		render(loginState) {
+			return renderDict(loginState, 'sys_normal_disable');
+		},
+	},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+					fieldName: 'id',
+					component: 'Input',
+					label: 'ID',
+					dependencies: {   show: () => false,    triggerFields: [''],   },
+					componentProps: {
+						placeholder: '',
+						onUpdateValue: (e: any) => {
+							console.log(e);
+						},   
+					},
+					formItemClass: 'col-span-1',
+				},  {
+			fieldName: 'tempKey',
+			component: 'Select',
+			label: '模板标识',
+			componentProps: {
+				placeholder: '请选择模板标识',
+				options: [],
+				onUpdateValue: (e: any) => {
+					console.log(e);
+				},   
+			},  
+			rules:'required',
+			formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'chanKey',
+				component: 'Input',
+				label: '通道编号',
+				componentProps: {
+					placeholder: '请输入通道编号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'chanName',
+				component: 'Input',
+				label: '通道名称',
+				componentProps: {
+					placeholder: '请输入通道名称',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'chanConfig',
+				component: 'Input',
+				label: '通道配置',
+				componentProps: {
+					placeholder: '请输入通道配置',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {    
+			fieldName: 'chanStatus',    
+			component: 'Select',    
+			label: '通道状态(0未启用,1启用)',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择通道状态(0未启用,1启用)',    
+				options: getDictOptions('sys_normal_disable', true),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null,
+			formItemClass: 'col-span-1',
+		},
+		  {
+				fieldName: 'chanAlias',
+				component: 'Input',
+				label: '通道别名',
+				componentProps: {
+					placeholder: '请输入通道别名',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'regionCode',
+				component: 'Input',
+				label: '通道行政区域代码(省市)',
+				componentProps: {
+					placeholder: '请输入通道行政区域代码(省市)',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'appKey',
+				component: 'Input',
+				label: '应用标识',
+				componentProps: {
+					placeholder: '请输入应用标识',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'appSecret',
+				component: 'Input',
+				label: '应用密钥',
+				componentProps: {
+					placeholder: '请输入应用密钥',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'remark',
+				component: 'Input',
+				label: '备注',
+				componentProps: {
+					placeholder: '请输入备注',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'loginUser',
+				component: 'Input',
+				label: '登录账号',
+				componentProps: {
+					placeholder: '请输入登录账号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'loginPassword',
+				component: 'Input',
+				label: '登录密码',
+				componentProps: {
+					placeholder: '请输入登录密码',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'loginUrl',
+				component: 'Input',
+				label: '登录地址',
+				componentProps: {
+					placeholder: '请输入登录地址',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'loginState',
+				component: 'Select',
+				label: '登录状态(0未启用,1启用)',
+				componentProps: {
+					placeholder: '请输入登录状态(0未启用,1启用)',
+					options: getDictOptions('sys_normal_disable', true),
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},];
+
+
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/view.vue.txt b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/view.vue.txt
new file mode 100644
index 0000000..1ad0add
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/compare/before/view/view.vue.txt
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/iotlcm/tChannel/tSimChannels';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/api/index.ts b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/api/index.ts
new file mode 100644
index 0000000..feb53cf
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/api/index.ts
@@ -0,0 +1,49 @@
+import type {
+  TemplateCrudDeleteParam,
+  TemplateCrudEditParam,
+  TemplateCrudExportParam,
+  TemplateCrudListParam,
+  TemplateCrudListRes,
+  TemplateCrudViewParam,
+  TemplateCrudViewRes,
+} from './type';
+
+import { requestClient } from '#/api/request';
+
+// 获取示例业务列表
+export function List(params: TemplateCrudListParam) {
+  return requestClient.get<TemplateCrudListRes>('iot/templateCrud/list', {
+    params,
+  });
+}
+
+// 删除/批量删除示例业务
+export function Delete(params: TemplateCrudDeleteParam) {
+  return requestClient.post('iot/templateCrud/delete', { ...params });
+}
+
+// 添加/编辑示例业务
+export function Edit(params: TemplateCrudEditParam) {
+  return requestClient.post('iot/templateCrud/edit', { ...params });
+}
+
+// 获取示例业务指定详情
+export function View(params: TemplateCrudViewParam) {
+  return requestClient.get<TemplateCrudViewRes>('iot/templateCrud/view', {
+    params,
+  });
+}
+
+// 导出示例业务
+export function Export(params: TemplateCrudExportParam) {
+  return requestClient.post<Blob>(
+    '/iot/templateCrud/export',
+    { ...params },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      responseType: 'blob',
+    },
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/api/type.ts b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/api/type.ts
new file mode 100644
index 0000000..0ee38f4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/api/type.ts
@@ -0,0 +1,81 @@
+import type { GlobalListRes } from '#/types/global';
+import type { MemberSumma } from '#/utils';
+
+/** 示例业务列表项 */
+export interface TemplateCrudModel {
+  /** 主键ID: 替换为真实模块主键,例如 id/appKey/deptId/regionId */
+  id: number;
+  /** 名称 */
+  name: string;
+  /** 编码 */
+  code: string;
+  /** 状态 */
+  status: number;
+  /** 备注 */
+  remark?: string;
+  /** 创建者 */
+  createdBy: number;
+  /** 创建者摘要信息 */
+  createdBySumma?: MemberSumma;
+  /** 创建时间 */
+  createdAt: string;
+  /** 更新者 */
+  updatedBy?: number;
+  /** 更新者摘要信息 */
+  updatedBySumma?: MemberSumma;
+  /** 更新时间 */
+  updatedAt?: string;
+}
+
+/** 获取示例业务列表 请求参数 */
+export interface TemplateCrudListParam {
+  /** 页码 */
+  page?: number;
+  /** 每页大小 */
+  pageSize?: number;
+  /** 关键字 */
+  keyword?: string;
+  /** 名称 */
+  name?: string;
+  /** 编码 */
+  code?: string;
+  /** 状态 */
+  status?: number;
+  /** 创建时间 */
+  createdAt?: string[];
+}
+
+/** 获取示例业务列表 响应 */
+export type TemplateCrudListRes = GlobalListRes<TemplateCrudModel>;
+
+/** 导出示例业务列表 请求参数 */
+export type TemplateCrudExportParam = TemplateCrudListParam;
+
+/** 修改/新增示例业务 请求参数 */
+export interface TemplateCrudEditParam {
+  /** 主键ID: 新增时通常不传,编辑时按真实主键传递 */
+  id?: number;
+  /** 名称 */
+  name?: string;
+  /** 编码 */
+  code?: string;
+  /** 状态 */
+  status?: number;
+  /** 备注 */
+  remark?: string;
+}
+
+/** 获取示例业务指定信息 请求参数 */
+export interface TemplateCrudViewParam {
+  /** 主键ID: 必须按真实 type.ts 的主键字段替换 */
+  id: number;
+}
+
+/** 获取示例业务指定信息 响应 */
+export type TemplateCrudViewRes = TemplateCrudModel;
+
+/** 删除示例业务 请求参数 */
+export interface TemplateCrudDeleteParam {
+  /** 主键ID: 按后端约定决定是单值还是数组 */
+  id: number | number[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/edit.vue b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/edit.vue
new file mode 100644
index 0000000..0bec65f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/edit.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { TemplateCrudModel } from '../api/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import BetterVben from '#/constants/BetterVben';
+
+import { Edit, View } from '../api';
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data: TemplateCrudModel;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+/** ====================  方法  ==================== */
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  if (data.isUpdate) {
+    try {
+      // 主键字段必须按 api/type.ts 的 TemplateCrudViewParam 替换。
+      const res = await View({ id: data.data.id });
+      await formApi.setValues(res);
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(
+        Edit(value as TemplateCrudModel),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '操作成功',
+          emit: () => {
+            emit('confirm');
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/index.vue b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/index.vue
new file mode 100644
index 0000000..30ce7e4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/index.vue
@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+import type { TemplateCrudModel } from '../api/type';
+
+import { h, ref } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import BetterVben from '#/constants/BetterVben';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { Delete, Export, List } from '../api';
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<TemplateCrudModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TemplateCrudModel) {
+  viewModalApi.setData({ row }).open();
+}
+function handleEdit(row?: TemplateCrudModel) {
+  editModalApi.setData({ data: row, isUpdate: !!row }).open();
+}
+async function handleDelete(row: TemplateCrudModel) {
+  // 主键字段必须按 api/type.ts 的 TemplateCrudDeleteParam 替换。
+  await Delete({ id: [row.id] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  // 主键字段必须按 api/type.ts 的 TemplateCrudDeleteParam 替换。
+  const ids: number[] = rows.map((row) => row.id);
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    centered: true,
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ id: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '示例业务', {
+    ...formValues,
+    page: 1,
+    pageSize: 2000,
+  });
+  message.success('导出成功');
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="示例业务">
+      <template #toolbar-tools>
+        <div class="flex items-center justify-center gap-2">
+          <Button
+            class="flex items-center"
+            type="primary"
+            :icon="h(MdiPlus)"
+            @click="handleEdit(undefined)"
+            v-access:code="'cpm:iot:templateCrud:edit'"
+          >
+            新增
+          </Button>
+          <Button
+            v-if="selectRows.length > 0"
+            class="flex items-center"
+            type="primary"
+            danger
+            :icon="h(MdiDelete)"
+            @click="handleMultiDelete"
+            v-access:code="'cpm:iot:templateCrud:delete'"
+          >
+            删除
+          </Button>
+          <Button
+            class="flex items-center"
+            type="primary"
+            :icon="h(MdiExport)"
+            @click="handleExport"
+            v-access:code="'cpm:iot:templateCrud:export'"
+          >
+            导出
+          </Button>
+        </div>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center justify-center gap-2">
+          <Button
+            class="border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:iot:templateCrud:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:iot:templateCrud:edit'"
+          >
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:iot:templateCrud:delete']" type="code">
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button class="border-none p-0" :block="false" type="link" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/model.tsx b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/model.tsx
new file mode 100644
index 0000000..171cf55
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/model.tsx
@@ -0,0 +1,174 @@
+import type { VbenFormSchema } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { renderPopoverMemberSumma } from '#/utils';
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'name',
+    component: 'Input',
+    label: '名称',
+    componentProps: {
+      placeholder: '请输入名称',
+    },
+  },
+  {
+    fieldName: 'code',
+    component: 'Input',
+    label: '编码',
+    componentProps: {
+      placeholder: '请输入编码',
+    },
+  },
+  {
+    fieldName: 'status',
+    component: 'Select',
+    label: '状态',
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择状态',
+      options: [
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
+      ],
+    },
+  },
+  {
+    fieldName: 'createdAt',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  {
+    title: '名称',
+    field: 'name',
+    minWidth: 120,
+  },
+  {
+    title: '编码',
+    field: 'code',
+    minWidth: 120,
+  },
+  {
+    title: '状态',
+    field: 'status',
+    minWidth: 80,
+  },
+  {
+    title: '备注',
+    field: 'remark',
+    minWidth: 160,
+  },
+  {
+    title: '创建者',
+    field: 'createdBy',
+    minWidth: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderPopoverMemberSumma(row.createdBySumma);
+      },
+    },
+  },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    minWidth: 150,
+  },
+  {
+    title: '更新者',
+    field: 'updatedBy',
+    minWidth: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderPopoverMemberSumma(row.updatedBySumma);
+      },
+    },
+  },
+  {
+    title: '更新时间',
+    field: 'updatedAt',
+    minWidth: 150,
+  },
+  { title: '操作', width: 140, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'name',
+    component: 'Input',
+    label: '名称',
+    componentProps: {
+      placeholder: '请输入名称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'code',
+    component: 'Input',
+    label: '编码',
+    componentProps: {
+      placeholder: '请输入编码',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'status',
+    component: 'Select',
+    label: '状态',
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择状态',
+      options: [
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
+      ],
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'remark',
+    component: 'Textarea',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  },
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'id', label: '主键ID' },
+  { field: 'name', label: '名称' },
+  { field: 'code', label: '编码' },
+  { field: 'status', label: '状态' },
+  { field: 'remark', label: '备注' },
+  { field: 'createdBy', label: '创建者' },
+  { field: 'createdAt', label: '创建时间' },
+  { field: 'updatedBy', label: '更新者' },
+  { field: 'updatedAt', label: '更新时间' },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/view.vue b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/view.vue
new file mode 100644
index 0000000..e9e8f98
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/template/iotlcm-crud-style/template/view/view.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { TemplateCrudModel } from '../api/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { View } from '../api';
+import { ViewDescSchema } from './model';
+
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: TemplateCrudModel };
+  // 主键字段必须按 api/type.ts 的 TemplateCrudViewParam 替换。
+  const record = await View({ id: row.id });
+  setDescProps({ data: record }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: ViewDescSchema,
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/types/global.d.ts b/admin-ui/vue/apps/web-antd/src/types/global.d.ts
new file mode 100644
index 0000000..051fa90
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/types/global.d.ts
@@ -0,0 +1,6 @@
+export interface GlobalListRes<T> {
+  page: number;
+  pageSize: number;
+  total: number;
+  items: T[];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/HtCustom/QuickCopy.ts b/admin-ui/vue/apps/web-antd/src/utils/HtCustom/QuickCopy.ts
new file mode 100644
index 0000000..2596b98
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/HtCustom/QuickCopy.ts
@@ -0,0 +1,47 @@
+import { message } from 'ant-design-vue';
+
+export default function QuickCopy(val: any) {
+  const text = String(val);
+
+  // 优先使用 Clipboard API（需要在 HTTPS 或 localhost 环境下）
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        message.success('复制成功');
+      })
+      .catch(() => {
+        // 失败时降级使用传统方法
+        fallbackCopy(text);
+      });
+  } else {
+    // 降级使用传统方法
+    fallbackCopy(text);
+  }
+}
+
+/**
+ * 降级复制方法，兼容非安全上下文
+ */
+function fallbackCopy(text: string) {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.style.position = 'fixed';
+  textarea.style.opacity = '0';
+  textarea.style.left = '-9999px';
+  document.body.append(textarea);
+  textarea.select();
+
+  try {
+    const successful = document.execCommand('copy');
+    if (successful) {
+      message.success('复制成功');
+    } else {
+      message.error('复制失败');
+    }
+  } catch (error) {
+    console.error('复制失败：', error);
+  } finally {
+    textarea.remove();
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/HtCustom/QuickDownLoad.ts b/admin-ui/vue/apps/web-antd/src/utils/HtCustom/QuickDownLoad.ts
new file mode 100644
index 0000000..dea5a0e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/HtCustom/QuickDownLoad.ts
@@ -0,0 +1,18 @@
+/**
+ * 将指定内容(content)写入指定类型(fileType)的文件(fileName)
+ * @param content 文件内容
+ * @param fileName 文件名,默认当前日期
+ * @param fileType 文件类型.默认txt
+ */
+export default function QuickDownLoad(
+  content: any,
+  fileName: string = new Date().toLocaleDateString(),
+  fileType: string = 'txt',
+) {
+  const blob = new Blob([content], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${fileName}.${fileType}`;
+  a.click();
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/HtCustom/TabInit.ts b/admin-ui/vue/apps/web-antd/src/utils/HtCustom/TabInit.ts
new file mode 100644
index 0000000..0b34568
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/HtCustom/TabInit.ts
@@ -0,0 +1,51 @@
+import type { Component } from 'vue';
+
+/**
+ * Tab 配置项接口
+ */
+interface TabConfig {
+  /** Tab 标题 */
+  tab: string;
+  /** Tab 对应的组件（可选，用于开发中占位） */
+  component?: Component;
+  /** 条件显示函数（可选） */
+  if?: () => boolean;
+}
+
+/**
+ * Tab 初始化工具函数
+ *
+ * @description
+ * 用于统一管理页面 Tab 配置，提供以下功能：
+ * - 自动生成 key（从 1 开始的序号）
+ * - 支持条件显示（通过 if 函数）
+ * - 简化 Tab 配置代码
+ *
+ * @example
+ * ```ts
+ * const tabConfig = HtuTabInit([
+ *   { tab: '概览', component: View },
+ *   { tab: 'Modbus配置', component: Modbus, if: () => isModbusProtocol },
+ *   { tab: '任务' }, // 开发中可省略 component
+ * ]);
+ * ```
+ */
+export default function TabInit(
+  tabConfig: TabConfig[],
+): (TabConfig & { key: string })[] {
+  // 过滤：执行 if 条件函数，未定义则默认显示
+  // 映射：自动生成 key
+  return tabConfig
+    .filter((item: any) => {
+      if (item.if === undefined) {
+        return true;
+      }
+      return item.if();
+    })
+    .map((item, index) => {
+      return {
+        ...item,
+        key: String(index + 1),
+      };
+    });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/HtCustom/index.ts b/admin-ui/vue/apps/web-antd/src/utils/HtCustom/index.ts
new file mode 100644
index 0000000..8269378
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/HtCustom/index.ts
@@ -0,0 +1,9 @@
+/** ====================  默认工具  ==================== */
+// 快速复制
+export { default as HtuQuickCopy } from './QuickCopy';
+// 快速下载
+export { default as HtuQuickDownLoad } from './QuickDownLoad';
+// Tab构建
+export { default as HtuTabInit } from './TabInit';
+
+/** ====================  物模型相关  ==================== */
diff --git a/admin-ui/vue/apps/web-antd/src/utils/IconManagers.ts b/admin-ui/vue/apps/web-antd/src/utils/IconManagers.ts
new file mode 100644
index 0000000..e4e6e87
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/IconManagers.ts
@@ -0,0 +1,67 @@
+import { iconData } from '#/assets/icons';
+import { h } from 'vue';
+
+export interface Icon {
+  /** 图标唯一键 (用于在配置中存储和查询) */
+  key: string;
+  /** 图标的 SVG 内容 (完整的 <svg>...</svg> 字符串) */
+  svg: string;
+  /** 图标显示名称 (用于在选择器中展示) */
+  name?: string;
+}
+
+class IconManager {
+  private static instance: IconManager;
+  private icons: Icon[] = iconData;
+
+  private constructor() {}
+
+  public static getInstance(): IconManager {
+    if (!IconManager.instance) {
+      IconManager.instance = new IconManager();
+    }
+    return IconManager.instance;
+  }
+  /**
+   * 根据 Key 获取单个图标
+   * @param key 图标唯一键
+   * @returns Icon | undefined
+   */
+  public getIconByKey(key: string): Icon | undefined {
+    return this.icons.find((icon) => icon.key === key);
+  }
+
+  /**
+   * 分页获取图标
+   * @param page 页码 (从1开始)
+   * @param pageSize 每页数量
+   * @returns { icons: Icon[], total: number, page: number, pageSize: number }
+   */
+  public getIconsByPage(
+    page: number = 1,
+    pageSize: number = 20,
+    filter?: string,
+  ): {
+    icons: Icon[];
+    total: number;
+    page: number;
+    pageSize: number;
+  } {
+    const filteredIcons = filter
+      ? this.icons.filter((icon) => (icon.key.toLowerCase()).includes(filter.toLowerCase()))
+      : this.icons;
+    // 计算分页
+    const total = filteredIcons.length;
+    const startIndex = (page - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    const paginatedIcons = filteredIcons.slice(startIndex, endIndex);
+    return {
+      icons: paginatedIcons,
+      total,
+      page,
+      pageSize,
+    };
+  }
+}
+
+export const iconManager = IconManager.getInstance();
diff --git a/admin-ui/vue/apps/web-antd/src/utils/__tests__/dept-tree.test.ts b/admin-ui/vue/apps/web-antd/src/utils/__tests__/dept-tree.test.ts
new file mode 100644
index 0000000..6fa55ef
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/__tests__/dept-tree.test.ts
@@ -0,0 +1,54 @@
+import type { SysDeptTreeData } from '#/api/system/dept';
+
+import { describe, expect, it } from 'vitest';
+
+import { filterDeptTree } from '../dept-tree';
+
+const tree: SysDeptTreeData[] = [
+  {
+    children: [
+      {
+        children: [],
+        deptId: 2,
+        deptName: 'Shandong Cloud',
+        key: '2',
+        parentId: 1,
+      },
+      {
+        children: [],
+        deptId: 3,
+        deptName: 'Beijing Branch',
+        key: '3',
+        parentId: 1,
+      },
+    ],
+    deptId: 1,
+    deptName: 'Group Company',
+    key: '1',
+    parentId: 0,
+  },
+];
+
+describe('filterDeptTree', () => {
+  it('returns the original tree for an empty keyword', () => {
+    expect(filterDeptTree(tree, '  ')).toBe(tree);
+  });
+
+  it('keeps ancestors when a child company matches', () => {
+    const result = filterDeptTree(tree, 'cloud');
+
+    expect(result).toHaveLength(1);
+    expect(result[0]?.deptName).toBe('Group Company');
+    expect(result[0]?.children?.map((item) => item.deptName)).toEqual([
+      'Shandong Cloud',
+    ]);
+  });
+
+  it('keeps descendants when a parent company matches', () => {
+    expect(filterDeptTree(tree, 'group')[0]?.children).toHaveLength(2);
+  });
+
+  it('returns an empty tree when no company matches', () => {
+    expect(filterDeptTree(tree, 'missing')).toEqual([]);
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/utils/bindArray.tsx b/admin-ui/vue/apps/web-antd/src/utils/bindArray.tsx
new file mode 100644
index 0000000..da6043b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/bindArray.tsx
@@ -0,0 +1,18 @@
+/**
+ * 编辑form 中的数组元素
+ * @param editFormApi  formApi 
+ * @param key  数组key
+ * @param oldData  旧数组数据
+ * @param index  索引
+ * @param itemData  index 位置的元素的新数据
+ */
+export async function editArray( editFormApi:any, key:string, oldData:any, index:number, itemData:any) {
+    let newData = oldData.map((item:any, i:number) => {
+      if (i === index) {
+        return itemData;
+      }
+      return item;
+    });
+    await editFormApi.setFieldValue(key, newData);
+  }
+  
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/utils/dept-tree.ts b/admin-ui/vue/apps/web-antd/src/utils/dept-tree.ts
new file mode 100644
index 0000000..b9bd082
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/dept-tree.ts
@@ -0,0 +1,55 @@
+import type { SysDeptTreeData } from '#/api/system/dept';
+
+import { getSysDeptTreeApi } from '#/api/system/dept';
+
+/**
+ * 加载公司部门树（deptType=1）。
+ *
+ * 树结构由后端 `/system/dept/tree` 组装完成（含孤立根节点兜底），
+ * 前端直接消费嵌套结果，不再拉扁平列表后自行按 parentId 拼装。
+ *
+ * 通讯管理下的「卡信息」「达量断网」两页左侧部门筛选树共用此实现。
+ */
+export async function loadCompanyDeptTree(): Promise<SysDeptTreeData[]> {
+  const res = await getSysDeptTreeApi({ deptType: 1 });
+  return res.items || [];
+}
+
+function cloneDeptTree(nodes: SysDeptTreeData[]): SysDeptTreeData[] {
+  return nodes.map((node) => ({
+    ...node,
+    children: node.children ? cloneDeptTree(node.children) : [],
+  }));
+}
+
+/**
+ * 按关键字过滤部门树：命中节点保留其整棵子树，未命中节点若子孙有命中则保留自身。
+ *
+ * 纯前端搜索过滤，与树的组装方式无关 —— 树来自后端嵌套结构时同样适用。
+ */
+export function filterDeptTree(
+  nodes: SysDeptTreeData[],
+  keyword: string,
+): SysDeptTreeData[] {
+  const normalizedKeyword = keyword.trim().toLocaleLowerCase();
+  if (!normalizedKeyword) {
+    return nodes;
+  }
+
+  return nodes.flatMap((node) => {
+    const matched = node.deptName
+      .toLocaleLowerCase()
+      .includes(normalizedKeyword);
+    if (matched) {
+      return [
+        {
+          ...node,
+          children: node.children ? cloneDeptTree(node.children) : [],
+        },
+      ];
+    }
+
+    const children = filterDeptTree(node.children ?? [], normalizedKeyword);
+    return children.length > 0 ? [{ ...node, children }] : [];
+  });
+}
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/utils/dict.ts b/admin-ui/vue/apps/web-antd/src/utils/dict.ts
new file mode 100644
index 0000000..c2ce28d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/dict.ts
@@ -0,0 +1,83 @@
+import { getSysDictDataListApi } from '#/api/system/dict';
+import { useDictStore } from '#/store/dict';
+
+/**
+ * 抽取公共逻辑的基础方法
+ * @param dictName 字典名称
+ * @param dataGetter 获取字典数据的函数
+ * @param formatNumber 是否格式化字典value为number类型
+ * @returns 数据
+ */
+function fetchAndCacheDictData<T>(
+  dictName: string,
+  dataGetter: () => T[],
+  formatNumber = false,
+): T[] {
+  const { dictRequestCache, setDictInfo } = useDictStore();
+  // 有调用方决定如何获取数据
+  const dataList = dataGetter();
+
+  // 检查请求状态缓存
+  if (dataList.length === 0 && !dictRequestCache.has(dictName)) {
+    dictRequestCache.set(
+      dictName,
+      getSysDictDataListApi({
+        dictId: 0,
+        dictType: dictName,
+        page: 1,
+        pageSize: 1000,
+      })
+        .then((resp) => {
+          // 缓存到store 这样就不用重复获取了
+          // 内部处理了push的逻辑 这里不用push
+          setDictInfo(dictName, resp.items, formatNumber);
+        })
+        .finally(() => {
+          // 移除请求状态缓存
+          /**
+           * 这里主要判断字典item为空的情况(无奈兼容 不给字典item本来就是错误用法)
+           * 会导致if一直进入逻辑导致接口无限刷新
+           * 在这里dictList为空时 不删除缓存
+           */
+          if (dataList.length > 0) {
+            dictRequestCache.delete(dictName);
+          }
+        }),
+    );
+  }
+  return dataList;
+}
+
+/**
+ * 这里是提供给渲染标签使用的方法
+ * @deprecated 使用getDictOptions代替 于下个版本删除
+ * @param dictName 字典名称
+ * @returns 字典信息
+ */
+export function getDict(dictName: string) {
+  const { getDictOptions } = useDictStore();
+  return fetchAndCacheDictData(dictName, () => getDictOptions(dictName));
+}
+
+/**
+ * 一般是Select, Radio, Checkbox等组件使用
+ * @param dictName 字典名称
+ * @param formatNumber 是否格式化字典value为number类型
+ * @returns Options数组
+ */
+export function getDictOptions(dictName: string, formatNumber = false) {
+  const { getDictOptions } = useDictStore();
+  return fetchAndCacheDictData(
+    dictName,
+    () => getDictOptions(dictName),
+    formatNumber,
+  );
+}
+
+// 获取字典的lable根据值
+export function getDictLabel(dictName: string, value: string) {
+  const { getDictOptions } = useDictStore();
+  const options = getDictOptions(dictName);
+  const option = options.find(opt => String(opt.value) === String(value));
+  return option ? option.label : '';
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/file/base64Conver.ts b/admin-ui/vue/apps/web-antd/src/utils/file/base64Conver.ts
new file mode 100644
index 0000000..3a487c3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/file/base64Conver.ts
@@ -0,0 +1,46 @@
+/**
+ * @description: base64 to blob
+ */
+export function dataURLtoBlob(base64Buf: string): Blob {
+  const arr = base64Buf.split(',');
+  const typeItem = arr[0];
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const mime = typeItem!.match(/:(.*?);/)![1];
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const bstr = window.atob(arr[1]!);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    u8arr[n] = bstr.codePointAt(n)!;
+  }
+  return new Blob([u8arr], { type: mime });
+}
+
+/**
+ * img url to base64
+ * @param url
+ */
+export function urlToBase64(url: string, mineType?: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let canvas = document.createElement('CANVAS') as HTMLCanvasElement | null;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const ctx = canvas!.getContext('2d');
+
+    const img = new Image();
+    img.crossOrigin = '';
+    img.addEventListener('load', () => {
+      if (!canvas || !ctx) {
+        // eslint-disable-next-line prefer-promise-reject-errors
+        return reject();
+      }
+      canvas.height = img.height;
+      canvas.width = img.width;
+      ctx.drawImage(img, 0, 0);
+      const dataURL = canvas.toDataURL(mineType || 'image/png');
+      canvas = null;
+      resolve(dataURL);
+    });
+    img.src = url;
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/file/download.ts b/admin-ui/vue/apps/web-antd/src/utils/file/download.ts
new file mode 100644
index 0000000..9adff9d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/file/download.ts
@@ -0,0 +1,455 @@
+import type { RequestResponse } from '@vben/request';
+
+import type { VbenFormProps } from '#/adapter/form';
+
+import { $t } from '@vben/locales';
+import { cloneDeep, formatDate } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+import { isFunction } from 'lodash-es';
+
+import { dataURLtoBlob, urlToBase64 } from './base64Conver';
+
+/**
+ *
+ * @deprecated 无法处理区间选择器数据 请使用commonDownloadExcel
+ *
+ * 下载excel文件
+ * @param [func] axios函数
+ * @param [fileName] 文件名称 不需要带xlsx后缀
+ * @param [requestData] 请求参数
+ * @param [withRandomName] 是否带随机文件名
+ *
+ * @return void
+ */
+export async function downloadExcel(
+  func: (data?: any) => Promise<Blob>,
+  fileName: string,
+  requestData: any = {},
+  withRandomName = true,
+) {
+  const hideLoading = message.loading($t('pages.common.downloadLoading'), 0);
+  try {
+    const data = await func(requestData);
+    downloadExcelFile(data, fileName, withRandomName);
+  } catch (error) {
+    console.error(error);
+  } finally {
+    hideLoading();
+  }
+}
+
+/**
+ * 源码同packages\@core\ui-kit\form-ui\src\components\form-actions.vue
+ * @param values 表单值
+ * @param fieldMappingTime 区间选择器 字段映射
+ * @returns 格式化后的值
+ */
+function handleRangeTimeValue(
+  values: Record<string, any>,
+  fieldMappingTime: VbenFormProps['fieldMappingTime'],
+) {
+  // 需要深拷贝 可能是readonly的
+  values = cloneDeep(values);
+  if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
+    return values;
+  }
+
+  fieldMappingTime.forEach(
+    ([field, [startTimeKey, endTimeKey], format = 'YYYY-MM-DD']) => {
+      if (startTimeKey && endTimeKey && values[field] === null) {
+        Reflect.deleteProperty(values, startTimeKey);
+        Reflect.deleteProperty(values, endTimeKey);
+        // delete values[startTimeKey];
+        // delete values[endTimeKey];
+      }
+
+      if (!values[field]) {
+        Reflect.deleteProperty(values, field);
+        // delete values[field];
+        return;
+      }
+
+      const [startTime, endTime] = values[field];
+      if (format === null) {
+        values[startTimeKey] = startTime;
+        values[endTimeKey] = endTime;
+      } else if (isFunction(format)) {
+        values[startTimeKey] = format(startTime, startTimeKey);
+        values[endTimeKey] = format(endTime, endTimeKey);
+      } else {
+        const [startTimeFormat, endTimeFormat] = Array.isArray(format)
+          ? format
+          : [format, format];
+
+        values[startTimeKey] = startTime
+          ? formatDate(startTime, startTimeFormat)
+          : undefined;
+        values[endTimeKey] = endTime
+          ? formatDate(endTime, endTimeFormat)
+          : undefined;
+      }
+      // delete values[field];
+      Reflect.deleteProperty(values, field);
+    },
+  );
+  return values;
+}
+
+export interface DownloadExcelOptions {
+  // 是否随机文件名(带时间戳)
+  withRandomName?: boolean;
+  // 区间选择器 字段映射
+  fieldMappingTime?: VbenFormProps['fieldMappingTime'];
+}
+
+type DownloadResponse = Blob | RequestResponse<Blob>;
+
+function getFilenameFromResponse(response: RequestResponse<Blob>) {
+  const disposition =
+    response.headers['content-disposition'] ||
+    response.headers['Content-Disposition'];
+  if (!disposition) {
+    return '';
+  }
+
+  const filenameStarMatch = /filename\*=UTF-8''([^;]+)/i.exec(disposition);
+  if (filenameStarMatch?.[1]) {
+    return decodeURIComponent(filenameStarMatch[1]);
+  }
+
+  const filenameMatch = /filename="?([^";]+)"?/i.exec(disposition);
+  if (!filenameMatch?.[1]) {
+    return '';
+  }
+
+  return decodeURIComponent(filenameMatch[1]);
+}
+
+function getDownloadData(response: DownloadResponse) {
+  if (response instanceof Blob) {
+    return {
+      data: response,
+      filename: '',
+    };
+  }
+
+  return {
+    data: response.data,
+    filename: getFilenameFromResponse(response),
+  };
+}
+
+type AsyncExportDetection =
+  | { kind: 'error'; message: string }
+  | { kind: 'file' }
+  | { kind: 'success' };
+
+/**
+ * 判断后端响应是「异步导出回执」「业务错误」还是「正常文件」。
+ *
+ * 背景：导出接口 responseType 是 blob，而后端出错时返回的是 HTTP 200 + JSON 业务码
+ * （框架的 responseReturn 为 raw，不会抛错），如果不在这里解析，
+ * 业务错误会被当成文件静默下载，用户既看不到原因也不知道失败。
+ */
+async function detectAsyncExport(
+  response: any,
+): Promise<AsyncExportDetection> {
+  const blob = response instanceof Blob ? response : response?.data;
+  if (!(blob instanceof Blob)) {
+    return { kind: 'file' };
+  }
+  if (blob.type && blob.type.includes('spreadsheet')) {
+    return { kind: 'file' };
+  }
+  // 正常 xlsx 至少几 KB；只有很小的 Blob 才可能是 JSON 回执
+  if (blob.size <= 0 || blob.size >= 8192) {
+    return { kind: 'file' };
+  }
+  try {
+    const text = (await blob.text()).trim();
+    if (!text.startsWith('{')) {
+      return { kind: 'file' };
+    }
+    const json = JSON.parse(text);
+    if (json?.code === 0) {
+      return { kind: 'success' };
+    }
+    return {
+      kind: 'error',
+      message: json?.message || '导出提交失败，请稍后重试',
+    };
+  } catch {
+    return { kind: 'file' };
+  }
+}
+
+/**
+ * 取表格当前显示的列（顺序 + 标题），用于「按页面显示列导出」。
+ * 无 field 的列（复选框、序号、操作列）以及被列设置隐藏的列会被忽略。
+ * @param gridApi useVbenVxeGrid 返回的 api 实例
+ */
+export interface ExportColumn {
+  field: string;
+  label: string;
+  dictType?: string;
+  dictValueMap?: Record<string, string>;
+  /** 固定值映射：页面用三元表达式等非字典方式渲染的列 */
+  valueMap?: Record<string, string>;
+  /** 固定值映射未命中时的兜底文案 */
+  valueDefault?: string;
+  fallbackField?: string;
+}
+
+export function getExportColumns(gridApi: any): ExportColumn[] {
+  const grid: any = gridApi?.grid;
+  if (!grid || typeof grid.getColumns !== 'function') {
+    return [];
+  }
+
+  const columns = (grid.getColumns() ?? []) as any[];
+  const seen = new Set<string>();
+  const result: ExportColumn[] = [];
+  for (const column of columns) {
+    if (!column || column.visible === false) {
+      continue;
+    }
+    const field = String(column.field ?? '').trim();
+    if (!field || field === 'action') {
+      continue;
+    }
+    if (seen.has(field)) {
+      continue;
+    }
+    seen.add(field);
+    const dictType = column.params?.dictType;
+    const valueMap = column.params?.valueMap;
+    const valueDefault = column.params?.valueDefault;
+    result.push({
+      field,
+      label: String(column.title ?? field),
+      ...(valueMap
+        ? {
+            valueMap,
+            ...(typeof valueDefault === 'string' && valueDefault
+              ? { valueDefault }
+              : {}),
+          }
+        : {}),
+      ...(typeof dictType === 'string' && dictType.trim()
+        ? {
+            dictType: dictType.trim(),
+            ...(column.params?.dictValueMap
+              ? { dictValueMap: column.params.dictValueMap }
+              : {}),
+            ...(column.params?.fallbackField
+              ? { fallbackField: column.params.fallbackField }
+              : {}),
+          }
+        : {}),
+    });
+  }
+  return result;
+}
+
+/**
+ * 通用下载excel方法
+ * @param api 后端下载接口
+ * @param fileName 文件名 不带拓展名。传空字符串时使用后端响应头文件名
+ * @param requestData 请求参数
+ * @param options 下载选项
+ */
+export async function commonDownloadExcel(
+  api: (data?: any) => Promise<DownloadResponse>,
+  fileName: string,
+  requestData: any = {},
+  options: DownloadExcelOptions = {},
+) {
+  const hideLoading = message.loading($t('pages.common.downloadLoading'), 0);
+  try {
+    const { withRandomName = true, fieldMappingTime } = options;
+    // 需要处理时间字段映射
+    const response = await api(
+      handleRangeTimeValue(requestData, fieldMappingTime),
+    );
+
+    const detected = await detectAsyncExport(response);
+    if (detected.kind === 'error') {
+      message.error(detected.message, 5);
+      return false;
+    }
+    if (detected.kind === 'success') {
+      // 异步导出：服务端只回执任务号，文件稍后到「下载中心」取
+      window.dispatchEvent(new CustomEvent('iotlcm:export-submitted'));
+      message.success('导出任务已提交，请到「下载中心」查看并下载文件', 5);
+      return true;
+    }
+
+    const { data, filename } = getDownloadData(response);
+    downloadExcelFile(
+      data,
+      fileName || filename || 'download.xlsx',
+      fileName ? withRandomName : false,
+    );
+    return true;
+  } catch (error) {
+    // 兜底：响应拦截器若把 blob 响应误判为错误（抛出的就是 Blob 本身），
+    // 这里仍按「异步回执 / 业务错误」解析，避免成功却被提示失败。
+    if (error instanceof Blob) {
+      const detected = await detectAsyncExport(error);
+      if (detected.kind === 'success') {
+        window.dispatchEvent(new CustomEvent('iotlcm:export-submitted'));
+        message.success('导出任务已提交，请到「下载中心」查看并下载文件', 5);
+        return true;
+      }
+      if (detected.kind === 'error') {
+        message.error(detected.message, 5);
+        return false;
+      }
+    }
+    console.error(error);
+    return false;
+  } finally {
+    hideLoading();
+  }
+}
+
+export function downloadExcelFile(
+  data: BlobPart,
+  filename: string,
+  withRandomName = true,
+) {
+  let realFileName = filename;
+  if (withRandomName) {
+    realFileName = `${filename}-${Date.now()}.xlsx`;
+  }
+  downloadByData(data, realFileName);
+}
+
+/**
+ * Download online pictures
+ * @param url
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export function downloadByOnlineUrl(
+  url: string,
+  filename: string,
+  mime?: string,
+  bom?: BlobPart,
+) {
+  urlToBase64(url).then((base64) => {
+    downloadByBase64(base64, filename, mime, bom);
+  });
+}
+
+/**
+ * Download pictures based on base64
+ * @param buf
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export function downloadByBase64(
+  buf: string,
+  filename: string,
+  mime?: string,
+  bom?: BlobPart,
+) {
+  const base64Buf = dataURLtoBlob(buf);
+  downloadByData(base64Buf, filename, mime, bom);
+}
+
+/**
+ * Download according to the background interface file stream
+ * @param {*} data
+ * @param {*} filename
+ * @param {*} mime
+ * @param {*} bom
+ */
+export function downloadByData(
+  data: BlobPart,
+  filename: string,
+  mime?: string,
+  bom?: BlobPart,
+) {
+  const blobData = bom === undefined ? [data] : [bom, data];
+  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });
+
+  const blobURL = window.URL.createObjectURL(blob);
+  const tempLink = document.createElement('a');
+  tempLink.style.display = 'none';
+  tempLink.href = blobURL;
+  tempLink.setAttribute('download', filename);
+  if (tempLink.download === undefined) {
+    tempLink.setAttribute('target', '_blank');
+  }
+  document.body.append(tempLink);
+  tempLink.click();
+  tempLink.remove();
+  window.URL.revokeObjectURL(blobURL);
+}
+
+export function openWindow(
+  url: string,
+  opt?: {
+    noopener?: boolean;
+    noreferrer?: boolean;
+    target?: '_blank' | '_self' | string;
+  },
+) {
+  const { noopener = true, noreferrer = true, target = '__blank' } = opt || {};
+  const feature: string[] = [];
+
+  noopener && feature.push('noopener=yes');
+  noreferrer && feature.push('noreferrer=yes');
+
+  window.open(url, target, feature.join(','));
+}
+
+/**
+ * Download file according to file address
+ * @param {*} sUrl
+ */
+export function downloadByUrl({
+  fileName,
+  target = '_blank',
+  url,
+}: {
+  fileName?: string;
+  target?: '_blank' | '_self';
+  url: string;
+}): boolean {
+  const isChrome = window.navigator.userAgent.toLowerCase().includes('chrome');
+  const isSafari = window.navigator.userAgent.toLowerCase().includes('safari');
+
+  if (/iP/.test(window.navigator.userAgent)) {
+    console.error('Your browser does not support download!');
+    return false;
+  }
+  if (isChrome || isSafari) {
+    const link = document.createElement('a');
+    link.href = url;
+    link.target = target;
+
+    if (link.download !== undefined) {
+      link.download =
+        // eslint-disable-next-line unicorn/prefer-string-slice
+        fileName || url.substring(url.lastIndexOf('/') + 1, url.length);
+    }
+
+    if (document.createEvent) {
+      const e = document.createEvent('MouseEvents');
+      e.initEvent('click', true, true);
+      link.dispatchEvent(e);
+      return true;
+    }
+  }
+  if (!url.includes('?')) {
+    url += '?download';
+  }
+
+  openWindow(url, { target });
+  return true;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/file/index.ts b/admin-ui/vue/apps/web-antd/src/utils/file/index.ts
new file mode 100644
index 0000000..dab7d29
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/file/index.ts
@@ -0,0 +1,31 @@
+/**
+ * 计算文件大小并以适当单位表示
+ *
+ * 此函数接收一个表示文件大小的数字（以字节为单位），并返回一个格式化后的字符串，
+ * 该字符串表示文件的大小，以最适合的单位（B, KB, MB, GB, TB）表示
+ *
+ * @param size 文件大小，以字节为单位
+ * @param isInteger 是否返回整数大小，默认为false如果设置为true，
+ *                    则返回的大小将不包含小数部分；如果为false，则根据单位的不同，
+ *                    返回最多3位小数的大小
+ * @returns 格式化后的文件大小字符串，如"4.5KB"或"3MB"
+ */
+export function calculateFileSize(size: number, isInteger = false) {
+  // 定义文件大小的单位数组
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  // 定义换算基数，1KB = 1024B，1MB = 1024KB，以此类推
+  const base = 1024;
+
+  // 初始化单位索引，初始值为0，即默认单位为B
+  let unitIndex = 0;
+  // 当文件大小大于等于基数且单位索引未超出单位数组范围时，循环进行单位转换
+  while (size >= base && unitIndex < units.length - 1) {
+    size /= base;
+    unitIndex++;
+  }
+
+  // 根据是否需要整数大小，确定输出的精度
+  const precision = isInteger ? 0 : Math.min(unitIndex, 3);
+  // 返回格式化后的文件大小字符串
+  return `${size.toFixed(precision)}${units[unitIndex]}`;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/formatTimestamp.ts b/admin-ui/vue/apps/web-antd/src/utils/formatTimestamp.ts
new file mode 100644
index 0000000..ba7678a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/formatTimestamp.ts
@@ -0,0 +1,13 @@
+export default function formatTimestamp(timestamp: any) {
+  const date = new Date(timestamp);
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1
+  const day = String(date.getDate()).padStart(2, '0');
+
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/image.ts b/admin-ui/vue/apps/web-antd/src/utils/image.ts
new file mode 100644
index 0000000..b3f5dfe
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/image.ts
@@ -0,0 +1,45 @@
+/**
+ * 图片URL处理工具函数
+ */
+
+/**
+ * 处理图片URL，确保能正确显示
+ * @param url 原始图片URL
+ * @returns 处理后的图片URL
+ */
+export function processImageUrl(url: string | null | undefined): string {
+  if (!url) {
+    return '/ProductPictures.png'; // 默认图片
+  }
+
+  // 如果是完整的URL（以http开头），直接返回
+  if (url.startsWith('http')) {
+    return url;
+  }
+
+  // 如果图片路径以 /upload 开头，直接返回（会被代理转发）
+  if (url.startsWith('/upload')) {
+    return url;
+  }
+
+  // 如果是 app/upload/... 格式，替换为 /upload/...
+  if (url.startsWith('app/upload/')) {
+    const result = url.replace('app/upload/', '/upload/');
+    return result;
+  }
+
+  // 如果是其他相对路径，添加 /upload 前缀
+  const result = `/upload${url.startsWith('/') ? '' : '/'}${url}`;
+  return result;
+}
+
+/**
+ * 处理图片加载失败的情况
+ * @param event 错误事件
+ */
+export function handleImageError(event: Event) {
+  const img = event.target as HTMLImageElement;
+  if (img.src !== '/ProductPictures.png') {
+    img.src = '/ProductPictures.png';
+  }
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/index.tsx b/admin-ui/vue/apps/web-antd/src/utils/index.tsx
new file mode 100644
index 0000000..6ea0d58
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/index.tsx
@@ -0,0 +1,71 @@
+import { h, unref } from 'vue';
+import { Tag, Popover, Button, Table, Avatar, } from 'ant-design-vue';
+export * from './render';
+import { renderIcon } from './render';
+
+export interface MemberSumma {
+  userId: number;
+  userName: string;
+  nickName: string;
+  avatar: string;
+  tenantId: string;
+  deptId: number;
+}
+
+// render 操作人摘要
+export const renderPopoverMemberSumma = (member: MemberSumma | null | undefined) => {
+    if (!member) {
+      return '';
+    }
+    // return '';
+    const columns = [
+      {title: '用户ID', dataIndex: 'userId', key: 'userId'},
+      {title: '头像', dataIndex: 'avatar', key: 'avatar',
+        customRender({text,record}: any) {
+          return h(Avatar, {
+              size: 'small',
+              src: record.avatar,
+          });
+        },
+      },
+      {title: '昵称', dataIndex: 'nickName', key: 'nickName'},
+      {title: '用户名', dataIndex: 'userName', key: 'userName'},
+    ];
+    const dataSource = [
+      {
+        userId: member.userId,
+        avatar: member.avatar,
+        nickName: member.nickName,
+        userName: member.userName,
+      },
+    ];
+    return h(
+      Popover,
+      { trigger: 'hover' },
+      {
+        default: () =>
+          h(
+            Button,
+            {
+              strong: true,
+              size: 'small',
+              text: true,
+              iconPlacement: 'right',
+            },
+            { default: () => member.nickName,}
+          ),
+        content: () =>
+          h(
+            Table,
+            {
+                bordered: false,
+                'single-line': false,
+                pagination: false,
+                size: 'small',
+                columns,
+                dataSource,
+            }
+          ),
+      }
+    );
+  };
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/utils/is/index.ts b/admin-ui/vue/apps/web-antd/src/utils/is/index.ts
new file mode 100644
index 0000000..0bf8632
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/is/index.ts
@@ -0,0 +1,47 @@
+// 判断值是否未某个类型
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`;
+}
+// 判断值是否为函数
+export function isFunction<T = Function>(val: unknown): val is T {
+  return is(val, 'Function') || is(val, 'AsyncFunction');
+}
+// 判断值是否为JSON字符串
+export function isJsonString(value: any) {
+  try {
+    const toObj = JSON.parse(value);
+    if (toObj && typeof toObj === 'object') {
+      return true;
+    }
+  } catch {}
+  return false;
+}
+// 判断值是否为null
+export function isNull(val: unknown): val is null {
+  return val === null;
+}
+// 判断值是否为undefined
+export const isDef = <T = unknown>(val?: T): val is T => {
+  return typeof val !== 'undefined';
+};
+// 判断值是否为非undefined
+export const isUnDef = <T = unknown>(val?: T): val is T => {
+  return !isDef(val);
+};
+// 判断值是否为对象
+export const isObject = (val: any): val is Record<any, any> => {
+  return val !== null && is(val, 'Object');
+};
+// 判断值是否为null或undefined
+export function isNullOrUnDef(val: unknown): val is null | undefined {
+  return isUnDef(val) || isNull(val);
+}
+// 判断值是否为空对象
+export function isNullObject(value: any) {
+  return (
+    isNullOrUnDef(value) ||
+    JSON.stringify(value) === '{}' ||
+    JSON.stringify(value) === '[]' ||
+    value === ''
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/render.tsx b/admin-ui/vue/apps/web-antd/src/utils/render.tsx
new file mode 100644
index 0000000..50c8edd
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/render.tsx
@@ -0,0 +1,234 @@
+import type { Component as ComponentType } from 'vue';
+
+import type { DictOption } from '#/store/dict';
+
+import { h } from 'vue';
+
+import { JsonViewer } from '@vben/common-ui';
+import {
+  AndroidIcon,
+  BaiduIcon,
+  ChromeIcon,
+  DefaultBrowserIcon,
+  DefaultOsIcon,
+  DingtalkIcon,
+  EdgeIcon,
+  FirefoxIcon,
+  IconifyIcon,
+  IPhoneIcon,
+  LinuxIcon,
+  MicromessengerIcon,
+  OperaIcon,
+  OSXIcon,
+  QQIcon,
+  SvgQuarkBrowserIcon as QuarkIcon,
+  SafariIcon,
+  UcIcon,
+  WindowsIcon,
+} from '@vben/icons';
+
+import { Tag, Tooltip } from 'ant-design-vue';
+
+import { DictTag } from '#/components/dict';
+
+import { getDictOptions } from './dict';
+
+/**
+ * 渲染标签
+ * @param text 文字
+ * @param color 颜色
+ * @returns render
+ */
+function renderTag(text: string, color?: string) {
+  return <Tag color={color}>{text}</Tag>;
+}
+
+/**
+ *
+ * @param tags 标签list
+ * @param wrap 是否换行显示
+ * @param [gap] 间隔
+ * @returns render
+ */
+export function renderTags(tags: string[], wrap = false, gap = 1) {
+  return (
+    <div
+      class={['flex', wrap ? 'flex-col' : 'flex-row']}
+      style={{ gap: `${gap}px` }}
+    >
+      {tags.map((tag, index) => {
+        return <div key={index}>{renderTag(tag)}</div>;
+      })}
+    </div>
+  );
+}
+
+/**
+ *
+ * @param json json对象 接受object/string类型
+ * @returns json预览
+ */
+export function renderJsonPreview(json: any) {
+  if (typeof json !== 'object' && typeof json !== 'string') {
+    return <span>{json}</span>;
+  }
+  if (typeof json === 'object') {
+    return <JsonViewer class="break-normal" value={json} />;
+  }
+  try {
+    const obj = JSON.parse(json);
+    // 基本数据类型可以被转为json
+    if (typeof obj !== 'object') {
+      return <span>{obj}</span>;
+    }
+    return <JsonViewer class="break-normal" value={obj} />;
+  } catch {
+    return <span>{json}</span>;
+  }
+}
+
+/**
+ * iconify图标
+ * @param icon icon名称
+ * @returns render
+ */
+export function renderIcon(icon: string) {
+  return <IconifyIcon icon={icon}></IconifyIcon>;
+}
+
+export function renderTooltip(trigger: any, content: any) {
+  return <Tooltip title={content}>{trigger}</Tooltip>;
+}
+
+/**
+ * httpMethod标签
+ * @param type method类型
+ * @returns render
+ */
+export function renderHttpMethodTag(type: string) {
+  const method = type.toUpperCase();
+  const colors: { [key: string]: string } = {
+    DELETE: 'red',
+    GET: 'green',
+    POST: 'blue',
+    PUT: 'orange',
+  };
+
+  const color = colors[method] ?? 'default';
+  const title = `${method}请求`;
+
+  return <Tag color={color}>{title}</Tag>;
+}
+
+export function renderDictTag(value: string, dicts: DictOption[]) {
+  return <DictTag dicts={dicts} value={value}></DictTag>;
+}
+
+/**
+ * render多个dictTag
+ * @param value key数组 string[]类型
+ * @param dicts 字典数组
+ * @param wrap 是否需要换行显示
+ * @param [gap] 间隔
+ * @returns render
+ */
+export function renderDictTags(
+  value: string[],
+  dicts: DictOption[],
+  wrap = true,
+  gap = 1,
+) {
+  if (!Array.isArray(value)) {
+    return <div>{value}</div>;
+  }
+  return (
+    <div
+      class={['flex', wrap ? 'flex-col' : 'flex-row']}
+      style={{ gap: `${gap}px` }}
+    >
+      {value.map((item, index) => {
+        return <div key={index}>{renderDictTag(item, dicts)}</div>;
+      })}
+    </div>
+  );
+}
+
+/**
+ * 显示字典标签 一般是table使用
+ * @param value 值
+ * @param dictName dictName
+ * @returns tag
+ */
+export function renderDict(value: string, dictName: string) {
+  const dictInfo = getDictOptions(dictName);
+  return renderDictTag(value, dictInfo);
+}
+export function renderIconSpan(
+  icon: ComponentType,
+  value: string,
+  center = false,
+  marginLeft = '2px',
+) {
+  const justifyCenter = center ? 'justify-center' : '';
+
+  return (
+    <span class={['flex', 'items-center', justifyCenter]}>
+      {h(icon)}
+      <span style={{ marginLeft }}>{value}</span>
+    </span>
+  );
+}
+
+const osOptions = [
+  { icon: WindowsIcon, value: 'windows' },
+  { icon: LinuxIcon, value: 'linux' },
+  { icon: OSXIcon, value: 'osx' },
+  { icon: AndroidIcon, value: 'android' },
+  { icon: IPhoneIcon, value: 'iphone' },
+];
+
+/**
+ * 浏览器图标
+ * cn.hutool.http.useragent -> browers
+ */
+const browserOptions = [
+  { icon: ChromeIcon, value: 'chrome' },
+  { icon: EdgeIcon, value: 'edge' },
+  { icon: FirefoxIcon, value: 'firefox' },
+  { icon: OperaIcon, value: 'opera' },
+  { icon: SafariIcon, value: 'safari' },
+  { icon: MicromessengerIcon, value: 'micromessenger' },
+  { icon: MicromessengerIcon, value: 'windowswechat' },
+  { icon: QuarkIcon, value: 'quark' },
+  { icon: MicromessengerIcon, value: 'wxwork' },
+  { icon: QQIcon, value: 'qq' },
+  { icon: DingtalkIcon, value: 'dingtalk' },
+  { icon: UcIcon, value: 'uc' },
+  { icon: BaiduIcon, value: 'baidu' },
+];
+
+export function renderOsIcon(os: string, center = false) {
+  if (!os) {
+    return;
+  }
+  let current = osOptions.find((item) =>
+    os.toLocaleLowerCase().includes(item.value),
+  );
+  // windows要特殊处理
+  if (os.toLocaleLowerCase().includes('windows')) {
+    current = osOptions[0];
+  }
+  const icon = current ? current.icon : DefaultOsIcon;
+  return renderIconSpan(icon, os, center, '5px');
+}
+
+export function renderBrowserIcon(browser: string, center = false) {
+  if (!browser) {
+    return;
+  }
+  const current = browserOptions.find((item) =>
+    browser.toLocaleLowerCase().includes(item.value),
+  );
+  const icon = current ? current.icon : DefaultBrowserIcon;
+  return renderIconSpan(icon, browser, center, '5px');
+}
diff --git a/admin-ui/vue/apps/web-antd/src/utils/role-template.test.ts b/admin-ui/vue/apps/web-antd/src/utils/role-template.test.ts
new file mode 100644
index 0000000..e7787de
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/role-template.test.ts
@@ -0,0 +1,33 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => ({ confirm: vi.fn() }));
+vi.mock('ant-design-vue', () => ({ Modal: { confirm: mocks.confirm } }));
+
+import { confirmTemplateOverwrite } from './role-template';
+
+describe('模板覆盖确认', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('普通角色保存不触发批量覆盖确认', async () => {
+    expect(await confirmTemplateOverwrite(false)).toBe(true);
+    expect(mocks.confirm).not.toHaveBeenCalled();
+  });
+
+  it('取消模板确认不应继续保存', async () => {
+    const confirmation = confirmTemplateOverwrite(true);
+    expect(mocks.confirm).toHaveBeenCalledWith(
+      expect.objectContaining({
+        content: expect.stringContaining('其他角色不受影响'),
+        okText: '确认保存并覆盖',
+      }),
+    );
+    mocks.confirm.mock.calls[0]![0].onCancel();
+    expect(await confirmation).toBe(false);
+  });
+
+  it('确认覆盖后才继续保存', async () => {
+    const confirmation = confirmTemplateOverwrite(true);
+    mocks.confirm.mock.calls[0]![0].onOk();
+    expect(await confirmation).toBe(true);
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/utils/role-template.ts b/admin-ui/vue/apps/web-antd/src/utils/role-template.ts
new file mode 100644
index 0000000..2c8698a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/utils/role-template.ts
@@ -0,0 +1,29 @@
+import { Modal } from 'ant-design-vue';
+
+export const AGENT_ROLE_TEMPLATE_CONFIG_KEY = 'agent.role.template.role_id';
+
+export const TEMPLATE_OVERWRITE_DESCRIPTION =
+  '保存后将在后台覆盖所有下级代理商对应默认角色的菜单权限，包含此前对这些角色的单独增减。其他角色不受影响。请在下发完成后再做个别调整。';
+
+export function confirmTemplateOverwrite(
+  isTemplateRole: boolean,
+): Promise<boolean> {
+  if (!isTemplateRole) {
+    return Promise.resolve(true);
+  }
+  return new Promise((resolve) => {
+    Modal.confirm({
+      title: '保存并覆盖下发代理模板？',
+      content: TEMPLATE_OVERWRITE_DESCRIPTION,
+      okText: '确认保存并覆盖',
+      cancelText: '取消',
+      maskClosable: false,
+      onOk: () => {
+        resolve(true);
+      },
+      onCancel: () => {
+        resolve(false);
+      },
+    });
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/README.md b/admin-ui/vue/apps/web-antd/src/views/_core/README.md
new file mode 100644
index 0000000..8248afe
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/README.md
@@ -0,0 +1,3 @@
+# \_core
+
+此目录包含应用程序正常运行所需的基本视图。这些视图是应用程序布局中使用的视图。
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/about/index.vue b/admin-ui/vue/apps/web-antd/src/views/_core/about/index.vue
new file mode 100644
index 0000000..96aafab
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/about/index.vue
@@ -0,0 +1,18 @@
+<!--
+ * @description 关于页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+
+<script lang="ts" setup>
+import { About } from '@vben/common-ui';
+
+defineOptions({ name: 'About' });
+</script>
+
+<template>
+  <About />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/authentication/code-login.vue b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/code-login.vue
new file mode 100644
index 0000000..8ca0fc0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/code-login.vue
@@ -0,0 +1,152 @@
+<!--
+ * @description 手机验证码登录页
+ *  - 输入手机号获取短信验证码后登录（scene=login，走 iotlcm-sms 场景库配置）；
+ *  - 同一手机号绑定多个账号时，后端拒绝并提示改用账号密码登录。
+-->
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+
+import { Button, Input, message } from 'ant-design-vue';
+
+import { sendSmsLoginCodeApi } from '#/api/core/auth';
+import { useAuthStore } from '#/store';
+
+defineOptions({ name: 'CodeLogin' });
+
+const router = useRouter();
+const authStore = useAuthStore();
+
+/** ====================  发送验证码  ==================== */
+const phone = ref('');
+const phoneCode = ref('');
+const sending = ref(false);
+const countdown = ref(0);
+let countdownTimer: number | undefined;
+
+const canSend = computed(() => countdown.value <= 0 && !sending.value);
+const sendButtonText = computed(() =>
+  countdown.value <= 0
+    ? $t('authentication.sendCode')
+    : $t('authentication.sendText', [countdown.value]),
+);
+
+function isValidPhone(value: string) {
+  return /^1[3-9]\d{9}$/.test(value);
+}
+
+function startCountdown() {
+  countdown.value = 60;
+  if (countdownTimer) {
+    window.clearInterval(countdownTimer);
+  }
+  countdownTimer = window.setInterval(() => {
+    countdown.value -= 1;
+    if (countdown.value <= 0 && countdownTimer) {
+      window.clearInterval(countdownTimer);
+      countdownTimer = undefined;
+    }
+  }, 1000);
+}
+
+async function handleSendCode() {
+  if (!isValidPhone(phone.value.trim())) {
+    message.warning($t('authentication.mobileErrortip'));
+    return;
+  }
+  sending.value = true;
+  try {
+    await sendSmsLoginCodeApi(phone.value.trim());
+    startCountdown();
+    message.success($t('authentication.sendCode'));
+  } catch (error) {
+    console.error('发送验证码失败', error);
+  } finally {
+    sending.value = false;
+  }
+}
+
+/** ====================  登录  ==================== */
+async function handleLogin() {
+  // 防重入：登录请求进行中忽略重复提交（如连按 Enter）
+  if (authStore.loginLoading) {
+    return;
+  }
+  const value = phone.value.trim();
+  const code = phoneCode.value.trim();
+  if (!isValidPhone(value)) {
+    message.warning($t('authentication.mobileErrortip'));
+    return;
+  }
+  if (code.length !== 6) {
+    message.warning($t('authentication.codeTip', [6]));
+    return;
+  }
+  try {
+    await authStore.authLogin({ code, grantType: 'sms', phone: value });
+  } catch (error) {
+    console.error('验证码登录失败', error);
+  }
+}
+
+function goToLogin() {
+  router.push('/auth/login');
+}
+
+onBeforeUnmount(() => {
+  if (countdownTimer) {
+    window.clearInterval(countdownTimer);
+  }
+});
+</script>
+
+<template>
+  <div class="flex w-full items-center justify-center py-10">
+    <div class="w-full max-w-[420px] rounded-xl bg-white p-8 shadow-xl">
+      <div class="mb-6 text-center">
+        <h1 class="mb-2 text-2xl font-bold text-gray-800">
+          {{ $t('page.auth.codeLogin') }} 📲
+        </h1>
+        <p class="text-sm text-gray-500">
+          {{ $t('authentication.codeSubtitle') }}
+        </p>
+      </div>
+      <div class="flex flex-col gap-3">
+        <Input
+          v-model:value="phone"
+          :placeholder="$t('authentication.mobileTip')"
+          :maxlength="11"
+        />
+        <div class="grid grid-cols-[minmax(0,1fr)_120px] gap-2">
+          <Input
+            v-model:value="phoneCode"
+            :placeholder="$t('authentication.code')"
+            :maxlength="6"
+            autocomplete="one-time-code"
+            @keydown.enter="handleLogin"
+          />
+          <Button
+            :disabled="!canSend"
+            :loading="sending"
+            @click="handleSendCode"
+          >
+            {{ sendButtonText }}
+          </Button>
+        </div>
+        <Button
+          type="primary"
+          class="mt-2 w-full"
+          :loading="authStore.loginLoading"
+          @click="handleLogin"
+        >
+          {{ $t('common.login') }}
+        </Button>
+        <Button class="w-full" @click="goToLogin">
+          {{ $t('common.back') }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/authentication/components/first-login-guide-modal.vue b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/components/first-login-guide-modal.vue
new file mode 100644
index 0000000..de17409
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/components/first-login-guide-modal.vue
@@ -0,0 +1,133 @@
+<!--
+ * @description 首次登录引导提示框（替代原整页引导）
+ *  - 登录后若手机号为空，或密码未由用户本人设置（isInitPassword，sys_user 表字段），
+ *    以弹窗形式提醒，不阻断进入系统；
+ *  - 点击操作按钮跳转个人中心对应设置页：安全设置（改密码）/ 修改电话（绑手机号）；
+ *  - 同一浏览器标签会话内只提示一次（sessionStorage）；退出登录后清除标记，
+ *    下次登录重新提示。
+-->
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useUserStore } from '@vben/stores';
+
+import { Button, Modal } from 'ant-design-vue';
+
+defineOptions({ name: 'FirstLoginGuideModal' });
+
+const router = useRouter();
+const userStore = useUserStore();
+
+/** sessionStorage 键：本标签会话内是否已提示过 */
+const SHOWN_KEY = 'first-login-guide-modal-shown';
+
+/** 直接监听可空的用户信息，便于识别退出登录（null） */
+const storeUserInfo = computed(() => userStore.userInfo);
+const userInfo = computed(() => (storeUserInfo.value || {}) as any);
+/** 需要绑定手机号 */
+const needPhone = computed(() => !userInfo.value.phonenumber);
+/** 需要修改初始密码 */
+const needPassword = computed(() => userInfo.value.isInitPassword === true);
+/** 是否还有待完成项 */
+const hasPending = computed(() => needPhone.value || needPassword.value);
+
+const open = ref(false);
+
+function shownThisSession(): boolean {
+  try {
+    return window.sessionStorage.getItem(SHOWN_KEY) === '1';
+  } catch {
+    // 隐私模式等场景下 sessionStorage 不可用：视为未提示过
+    return false;
+  }
+}
+
+function markShown() {
+  try {
+    window.sessionStorage.setItem(SHOWN_KEY, '1');
+  } catch {
+    // 忽略：无法持久化时退化为每次挂载都提示
+  }
+}
+
+function clearShown() {
+  try {
+    window.sessionStorage.removeItem(SHOWN_KEY);
+  } catch {
+    // 忽略
+  }
+}
+
+/** 有待完成项且本会话未提示过时弹出 */
+function checkAndOpen() {
+  if (!hasPending.value || shownThisSession()) {
+    return;
+  }
+  open.value = true;
+}
+
+/** 稍后再说：关闭并记入本会话已提示 */
+function handleLater() {
+  open.value = false;
+  markShown();
+}
+
+/** 跳转个人中心对应设置页 */
+function goSetting(tab: 'phone' | 'secure') {
+  markShown();
+  open.value = false;
+  router.push({ path: '/profile', query: { tab } });
+}
+
+onMounted(checkAndOpen);
+
+watch(storeUserInfo, (info) => {
+  if (!info) {
+    // 退出登录：关掉弹窗并清除标记，下次登录重新提示
+    open.value = false;
+    clearShown();
+    return;
+  }
+  checkAndOpen();
+});
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    :closable="false"
+    :footer="null"
+    :mask-closable="false"
+    title="账号安全提示"
+    width="420px"
+    @cancel="handleLater"
+  >
+    <div class="flex flex-col gap-[12px]">
+      <p class="text-[14px] leading-[22px] text-muted-foreground">
+        为了账号安全，请完成以下设置（可在个人中心随时修改）：
+      </p>
+      <div
+        v-if="needPassword"
+        class="flex items-center justify-between rounded-md border border-border px-[12px] py-[10px]"
+      >
+        <span class="text-[14px]">修改登录密码（当前为初始密码）</span>
+        <Button type="link" class="px-0" @click="goSetting('secure')">
+          去修改
+        </Button>
+      </div>
+      <div
+        v-if="needPhone"
+        class="flex items-center justify-between rounded-md border border-border px-[12px] py-[10px]"
+      >
+        <span class="text-[14px]">绑定手机号（用于接收重要通知）</span>
+        <Button type="link" class="px-0" @click="goSetting('phone')">
+          去绑定
+        </Button>
+      </div>
+    </div>
+    <div class="mt-[16px] flex justify-end">
+      <Button @click="handleLater">稍后再说</Button>
+    </div>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/authentication/components/img-captcha.vue b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/components/img-captcha.vue
new file mode 100644
index 0000000..55f9fe8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/components/img-captcha.vue
@@ -0,0 +1,61 @@
+<!--
+ * @description 图片验证码组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+
+<script lang="ts" setup>
+import {onMounted, ref, watch} from 'vue'
+import { Input, Image } from 'ant-design-vue';
+import { getCaptchaApi } from '#/api';
+const emit = defineEmits(['blur', 'change']);
+let imgCaptcha = ref<string>('');
+// 加载时获取验证码
+onMounted(()=>{
+  getCaptcha();
+});
+const props = defineProps<{
+  captchaCount?: number;
+}>();
+
+watch(
+  () => props.captchaCount,
+  () => {
+    getCaptcha();
+  },{});
+
+
+const modelValue = defineModel<[string, string]>({
+  default: () => [undefined, undefined],
+});
+
+function getCaptcha() {
+  getCaptchaApi().then((res) => {
+    imgCaptcha.value = res.captchaImage;
+    modelValue.value[1] = res.captchaID;
+  });
+}
+function onChange() {
+  emit('change', modelValue.value);
+}
+
+</script>
+<template>
+  <div class="flex w-full gap-1">
+    <Input
+      placeholder="请输入验证码"
+      class="w-[260px]"
+      allow-clear
+      :class="{ 'valid-success': !!modelValue[0] }"
+      v-model:value="modelValue[0]"
+      :maxlength="6"
+      type="tel"
+      @blur="emit('blur')"
+      @change="onChange"
+    />
+    <Image class="flex-1" @click="getCaptcha" :preview="false" :src="imgCaptcha" :width="130" :height="38" style="cursor: pointer" />
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/authentication/forget-password.vue b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/forget-password.vue
new file mode 100644
index 0000000..a3926b3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/forget-password.vue
@@ -0,0 +1,52 @@
+<!--
+ * @description 忘记密码页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+
+<script lang="ts" setup>
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
+
+import { computed, ref } from 'vue';
+
+import { AuthenticationForgetPassword, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+defineOptions({ name: 'ForgetPassword' });
+
+const loading = ref(false);
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: 'example@example.com',
+      },
+      fieldName: 'email',
+      label: $t('authentication.email'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.emailTip') })
+        .email($t('authentication.emailValidErrorTip')),
+    },
+  ];
+});
+
+function handleSubmit(value: Recordable<any>) {
+  // eslint-disable-next-line no-console
+  console.log('reset email:', value);
+}
+</script>
+
+<template>
+  <AuthenticationForgetPassword
+    :form-schema="formSchema"
+    :loading="loading"
+    @submit="handleSubmit"
+  />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/authentication/login.vue b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/login.vue
new file mode 100644
index 0000000..6607a35
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/login.vue
@@ -0,0 +1,201 @@
+<!--
+ * @description 登录页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { BasicOption, Recordable } from '@vben/types';
+
+import type { TenantResp } from '#/api';
+
+import {
+  computed,
+  markRaw,
+  nextTick,
+  onMounted,
+  ref,
+  useTemplateRef,
+} from 'vue';
+
+import { AuthenticationLogin, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { tenantList } from '#/api/core/auth';
+import { useAuthStore } from '#/store';
+
+import ImgCaptcha from './components/img-captcha.vue';
+
+defineOptions({ name: 'Login' });
+
+/** ====================  常量  ==================== */
+const REMEMBER_ACCOUNT_KEY = `REMEMBER_ME_USERNAME_${location.hostname}`;
+const MOCK_USER_OPTIONS: BasicOption[] = [
+  {
+    label: 'Super',
+    value: 'super',
+  },
+  {
+    label: 'Admin',
+    value: 'admin',
+  },
+  {
+    label: 'User',
+    value: 'jack',
+  },
+];
+
+/** ====================  数据  ==================== */
+const authStore = useAuthStore();
+
+const loginFormRef = useTemplateRef('loginFormRef');
+const captchaCount = ref(0);
+
+const tenantInfo = ref<TenantResp>({
+  tenantEnabled: true,
+  voList: [],
+});
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: tenantInfo.value.voList?.map((item) => ({
+          label: item.companyName,
+          value: item.tenantId,
+        })),
+        placeholder: $t('authentication.selectAccount'),
+      },
+      fieldName: 'tenantId',
+      defaultValue: '000000',
+      dependencies: {
+        if: () => tenantInfo.value.tenantEnabled,
+        // 这里大致上是watch的一个效果
+        componentProps: (model) => {
+          localStorage.setItem(
+            '__oauth_tenant_id',
+            model?.tenantId ?? '000000',
+          );
+          return {};
+        },
+        show: false,
+        triggerFields: ['', 'tenantId'],
+      },
+      label: $t('authentication.selectAccount'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.selectAccount') })
+        .optional()
+        .default('admin'),
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      dependencies: {
+        trigger(values, form) {
+          if (values.selectAccount) {
+            const findUser = MOCK_USER_OPTIONS.find(
+              (item) => item.value === values.selectAccount,
+            );
+            if (findUser) {
+              form.setValues({
+                password: '123456',
+                username: findUser.value,
+              });
+            }
+          }
+        },
+        triggerFields: ['selectAccount'],
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: markRaw(ImgCaptcha),
+      fieldName: 'captcha',
+      defaultValue: [undefined, ''],
+      componentProps: {
+        captchaCount: captchaCount.value,
+      },
+
+      rules: z.array(z.string().optional()).refine((v) => !!v[0], {
+        message: $t('authentication.verifyRequiredTip'),
+      }),
+    },
+  ];
+});
+
+/** ====================  方法  ==================== */
+async function fillRememberAccount() {
+  const account = localStorage.getItem(REMEMBER_ACCOUNT_KEY);
+
+  if (!account) {
+    return;
+  }
+
+  await nextTick();
+  await loginFormRef.value?.getFormApi().setFieldValue('username', account);
+}
+
+async function getTenantList() {
+  const resp = await tenantList();
+  resp.tenantEnabled = true;
+  tenantInfo.value = resp;
+
+  // 选中第一个租户
+  if (resp.tenantEnabled && resp.voList.length > 0) {
+    const firstTenantId = resp.voList[0]!.tenantId;
+    loginFormRef.value?.getFormApi().setFieldValue('tenantId', firstTenantId);
+  }
+}
+
+async function handleLogin(
+  params: Recordable<any>,
+  onSuccess?: () => Promise<void> | void,
+) {
+  try {
+    await authStore.authLogin(params, onSuccess);
+  } catch (error) {
+    if (error instanceof Error) {
+      // 刷新验证码
+      // captchaCount.value = captchaCount.value+1;
+    }
+    loginFormRef.value?.getFormApi().setFieldValue('captcha', ['', '']);
+    captchaCount.value = captchaCount.value + 1;
+    console.error('登录失败', error);
+  }
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+onMounted(async () => {
+  await getTenantList();
+  await fillRememberAccount();
+});
+</script>
+
+<template>
+  <AuthenticationLogin
+    ref="loginFormRef"
+    :form-schema="formSchema"
+    :loading="authStore.loginLoading"
+    @submit="handleLogin"
+  />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/authentication/mfa-verify.vue b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/mfa-verify.vue
new file mode 100644
index 0000000..38d3a9b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/mfa-verify.vue
@@ -0,0 +1,157 @@
+<!--
+ * @description MFA多因子认证页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Button, message } from 'ant-design-vue';
+import { useVbenForm } from '#/adapter/form';
+import { mfaVerify, setMfaEnabled } from '#/api/system/user';
+import { DEFAULT_HOME_PATH } from '@vben/constants';
+
+defineOptions({ name: 'MfaVerify' });
+
+/** ====================  数据  ==================== */
+const route = useRoute();
+const router = useRouter();
+
+const loading = ref(false);
+const sendLoading = ref(false);
+const actionText = ref('');
+const currentUuid = ref('');
+
+// 从URL参数获取
+const userId = Number(route.query.userId || 0);
+const mfaEnabled = Number(route.query.mfaEnabled ?? 0);
+const fromLogin = route.query.fromLogin === 'true';
+
+onMounted(() => {
+  currentUuid.value = route.query.uuid as string;
+  updateActionText();
+});
+
+function updateActionText() {
+  if (fromLogin) {
+    actionText.value = '登录验证';
+  } else {
+    actionText.value = mfaEnabled === 1 ? '开启' : '关闭';
+  }
+}
+
+/** ====================  方法  ==================== */
+
+// 重新发送验证码
+async function handleResendCode() {
+  try {
+    sendLoading.value = true;
+    // 调用setMfaEnabled获取新uuid
+    const res = await setMfaEnabled();
+    currentUuid.value = res.uuid;
+    message.success('验证码已发送');
+  } catch (error) {
+    console.error('发送验证码失败', error);
+    message.error('发送验证码失败，请重试');
+  } finally {
+    sendLoading.value = false;
+  }
+}
+
+async function handleSubmit(values: any) {
+  if (!userId || !currentUuid.value) {
+    message.error('缺少必要参数');
+    handleRedirect();
+    return;
+  }
+  try {
+    loading.value = true;
+
+    // 调用mfaVerify接口验证验证码
+    await mfaVerify({
+      uuid: currentUuid.value,
+      code: values.code,
+      mfaEnabled,
+    });
+
+    message.success('验证成功');
+    handleRedirect();
+  } catch (error) {
+    console.error('MFA验证失败', error);
+    message.error('验证码错误');
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 根据来源跳转不同页面
+function handleRedirect() {
+  if (fromLogin) {
+    // 登录流程跳转首页
+    router.push(DEFAULT_HOME_PATH);
+  } else {
+    // 设置流程跳转安全设置
+    router.push('/profile#secure-setting');
+  }
+}
+
+/** ====================  组件  ==================== */
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 100,
+  },
+  resetButtonOptions: {
+    show: false,
+  },
+  showDefaultActions: false,
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: '验证码',
+      componentProps: {
+        placeholder: '请输入验证码',
+        maxlength: 6,
+      },
+    },
+  ],
+});
+</script>
+
+<template>
+  <div class="flex h-screen w-full items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
+    <div class="w-[420px] rounded-xl bg-white p-8 shadow-xl">
+      <div class="mb-6 text-center">
+        <h1 class="mb-2 text-2xl font-bold text-gray-800">
+          MFA多因子认证
+        </h1>
+        <p class="text-sm text-gray-500">
+          您正在进行{{ actionText }}，请输入验证码
+        </p>
+      </div>
+      <BasicForm />
+      <div class="mt-6 flex flex-col items-center gap-3">
+        <Button
+          type="primary"
+          size="large"
+          :loading="loading"
+          @click="handleSubmit(formApi.form.values)"
+        >
+          确定
+        </Button>
+        <Button
+          type="link"
+          size="small"
+          :loading="sendLoading"
+          @click="handleResendCode"
+        >
+          重新发送验证码
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/authentication/qrcode-login.vue b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/qrcode-login.vue
new file mode 100644
index 0000000..aed199d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/qrcode-login.vue
@@ -0,0 +1,18 @@
+<!--
+ * @description 二维码登录页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { AuthenticationQrCodeLogin } from '@vben/common-ui';
+import { LOGIN_PATH } from '@vben/constants';
+
+defineOptions({ name: 'QrCodeLogin' });
+</script>
+
+<template>
+  <AuthenticationQrCodeLogin :login-path="LOGIN_PATH" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/authentication/register.vue b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/register.vue
new file mode 100644
index 0000000..17812a3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/authentication/register.vue
@@ -0,0 +1,104 @@
+<!--
+ * @description 注册页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
+
+import { computed, h, ref } from 'vue';
+
+import { AuthenticationRegister, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+defineOptions({ name: 'Register' });
+
+const loading = ref(false);
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string({ required_error: $t('authentication.passwordTip') })
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
+    },
+    {
+      component: 'VbenCheckbox',
+      fieldName: 'agreePolicy',
+      renderComponentContent: () => ({
+        default: () =>
+          h('span', [
+            $t('authentication.agree'),
+            h(
+              'a',
+              {
+                class: 'vben-link ml-1 ',
+                href: '',
+              },
+              `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
+            ),
+          ]),
+      }),
+      rules: z.boolean().refine((value) => !!value, {
+        message: $t('authentication.agreeTip'),
+      }),
+    },
+  ];
+});
+
+function handleSubmit(value: Recordable<any>) {
+  // eslint-disable-next-line no-console
+  console.log('register submit:', value);
+}
+</script>
+
+<template>
+  <AuthenticationRegister
+    :form-schema="formSchema"
+    :loading="loading"
+    @submit="handleSubmit"
+  />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/fallback/coming-soon.vue b/admin-ui/vue/apps/web-antd/src/views/_core/fallback/coming-soon.vue
new file mode 100644
index 0000000..0a1e12f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/fallback/coming-soon.vue
@@ -0,0 +1,15 @@
+<!--
+ * @description 即将上线页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+</script>
+
+<template>
+  <Fallback status="coming-soon" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/fallback/forbidden.vue b/admin-ui/vue/apps/web-antd/src/views/_core/fallback/forbidden.vue
new file mode 100644
index 0000000..14cd863
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/fallback/forbidden.vue
@@ -0,0 +1,17 @@
+<!--
+ * @description 403禁止访问页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback403Demo' });
+</script>
+
+<template>
+  <Fallback status="403" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/fallback/internal-error.vue b/admin-ui/vue/apps/web-antd/src/views/_core/fallback/internal-error.vue
new file mode 100644
index 0000000..3aa9a3b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/fallback/internal-error.vue
@@ -0,0 +1,17 @@
+<!--
+ * @description 500内部错误页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback500Demo' });
+</script>
+
+<template>
+  <Fallback status="500" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/fallback/not-found.vue b/admin-ui/vue/apps/web-antd/src/views/_core/fallback/not-found.vue
new file mode 100644
index 0000000..aecbf6f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/fallback/not-found.vue
@@ -0,0 +1,17 @@
+<!--
+ * @description 404未找到页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback404Demo' });
+</script>
+
+<template>
+  <Fallback status="404" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/fallback/offline.vue b/admin-ui/vue/apps/web-antd/src/views/_core/fallback/offline.vue
new file mode 100644
index 0000000..85dd736
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/fallback/offline.vue
@@ -0,0 +1,17 @@
+<!--
+ * @description 离线页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'FallbackOfflineDemo' });
+</script>
+
+<template>
+  <Fallback status="offline" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/oauth-common.ts b/admin-ui/vue/apps/web-antd/src/views/_core/oauth-common.ts
new file mode 100644
index 0000000..fd84ec4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/oauth-common.ts
@@ -0,0 +1,113 @@
+/**
+ * @description OAuth授权相关公共方法
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import type { Component } from 'vue';
+
+import {
+  AlipayIcon,
+  DingdingIcon,
+  GiteeIcon,
+  GithubOAuthIcon,
+  TaobaoIcon,
+} from '@vben/icons';
+
+import { authBinding } from '#/api/core/auth';
+/**
+ * @description: 菜单
+ * @param key key
+ * @param title 标题
+ * @param description 描述
+ * @param extra 按钮文字
+ * @param avatar 图标
+ * @param color 图标颜色可直接写英文颜色/hex
+ */
+export interface ListItem {
+  key: string;
+  title: string;
+  description: string;
+  extra?: string;
+  avatar?: Component;
+  color?: string;
+}
+
+/**
+ * @description: 绑定账号
+ * @param source 来源 如gitee github 与后端的social-callback?source=xxx对应
+ * @param bound 是否已经绑定
+ * @param action 账号绑定回调
+ */
+export interface BindItem extends ListItem {
+  source: string;
+  bound?: boolean;
+  action?: (source: string) => Promise<any>;
+}
+
+/**
+ * todo tenantId
+ * 绑定授权从userStore.userInfo获取
+ * 登录从localStorage获取
+ * @param source
+ */
+async function handleAuthBinding(source: string) {
+  const tenantId = localStorage.getItem('__oauth_tenant_id') ?? '000000';
+  // 这里返回打开授权页面的链接
+  const href = await authBinding(source, tenantId);
+  window.location.href = href;
+}
+
+/**
+ * 账号绑定 list
+ * 添加账号绑定只需要在这里增加即可
+ * 添加过的项目会在个人主页-绑定账号中显示
+ * action不为空的会在登录页显示
+ */
+export const accountBindList: BindItem[] = [
+  {
+    avatar: TaobaoIcon,
+    color: '#ff4000',
+    description: '绑定淘宝账号',
+    key: '1',
+    source: 'taobao',
+    title: '淘宝',
+  },
+  {
+    avatar: AlipayIcon,
+    color: '#2eabff',
+    description: '绑定支付宝账号',
+    key: '2',
+    source: 'alipay',
+    title: '支付宝',
+  },
+  {
+    avatar: DingdingIcon,
+    color: '#2eabff',
+    description: '绑定钉钉账号',
+    key: '3',
+    source: 'ding',
+    title: '钉钉',
+  },
+  {
+    action: () => handleAuthBinding('gitee'),
+    avatar: GiteeIcon,
+    color: '#c71d23',
+    description: '绑定GITEE账号',
+    key: '4',
+    source: 'gitee',
+    title: 'GITEE',
+  },
+  {
+    action: () => handleAuthBinding('github'),
+    avatar: GithubOAuthIcon,
+    color: '',
+    description: '绑定GITHUB账号',
+    key: '5',
+    source: 'github',
+    title: 'GITHUB',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/account-bind.vue b/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/account-bind.vue
new file mode 100644
index 0000000..b6adf1f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/account-bind.vue
@@ -0,0 +1,225 @@
+<!--
+ * @description 个人中心-账号绑定组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="tsx">
+import type { VxeGridProps } from '@vben/plugins/vxe-table';
+
+import { useUserStore } from '@vben/stores';
+import type { BindItem } from '#/views/_core/oauth-common';
+
+import { computed, ref, unref } from 'vue';
+
+import { useVbenVxeGrid } from '@vben/plugins/vxe-table';
+
+import {
+  Alert,
+  Avatar,
+  Card,
+  List,
+  ListItem,
+  message,
+  Modal,
+  Button,
+} from 'ant-design-vue';
+
+import { authUnbinding } from '#/api';
+import { getSysSocialListApi } from '#/api/system';
+
+
+import { accountBindList } from '#/views/_core/oauth-common';
+
+const userStore = useUserStore();
+/**
+ * 没有传递action事件则不支持绑定 弹出默认提示
+ */
+function defaultTip(title: string) {
+  message.info({ content: `暂不支持绑定${title}` });
+}
+
+function buttonText(item: BindItem) {
+  return item.bound ? '已绑定' : '绑定';
+}
+
+/**
+ * 已经绑定的平台
+ */
+const boundPlatformsList = ref<string[]>([]);
+const bindList = computed<BindItem[]>(() => {
+  const list = [...accountBindList];
+  list.forEach((item) => {
+    item.bound = !!unref(boundPlatformsList).includes(item.source);
+  });
+  return list;
+});
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+  },
+  columns: [
+    {
+      field: 'source',
+      title: '绑定平台',
+    },
+    {
+      slots: {
+        default: ({ row }) => {
+          return <Avatar src={row.avatar} />;
+        },
+      },
+      field: 'avatar',
+      title: '头像',
+    },
+    {
+      align: 'center',
+      field: 'userName',
+      title: '账号',
+    },
+    {
+      align: 'center',
+      slots: {
+        default: 'action',
+      },
+      title: '操作',
+    },
+  ],
+  height: 220,
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  toolbarConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async () => {
+        const resp = await getSysSocialListApi({
+          userId: userStore.userInfo?.id,
+        });
+        /**
+         * 平台转小写
+         * 已经绑定的平台
+         */
+        boundPlatformsList.value = resp.items.map((item) =>
+          item.source.toLowerCase(),
+        );
+        return {
+          rows: resp,
+        };
+      },
+    },
+  },
+  rowConfig: {
+    isCurrent: false,
+    keyField: 'id',
+  },
+  id: 'profile-bind-table',
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+});
+
+/**
+ * 解绑账号
+ */
+function handleUnbind(record: Record<string, any>) {
+  Modal.confirm({
+    content: `确定解绑[${record.source}]平台的[${record.userName}]账号吗？`,
+    async onOk() {
+      await authUnbinding(record.id);
+      await tableApi.reload();
+    },
+    title: '提示',
+    type: 'warning',
+  });
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-[16px]">
+    <BasicTable>
+      <template #action="{ row }">
+        <Button type="link" @click="handleUnbind(row)">解绑</Button>
+      </template>
+    </BasicTable>
+    <div class="pb-3">
+      <List
+        :data-source="bindList"
+        :grid="{ gutter: 8, xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 3 }"
+      >
+        <template #renderItem="{ item }">
+          <ListItem>
+            <Card>
+              <div class="flex w-full items-center gap-4">
+                <div>
+                  <component
+                    :is="item.avatar"
+                    v-if="item.avatar"
+                    :style="{ color: item.color }"
+                    class="size-[40px]"
+                  />
+                </div>
+                <div class="flex flex-1 items-center justify-between">
+                  <div class="flex flex-col">
+                    <h4
+                      class="mb-[4px] text-[14px] text-black/85 dark:text-white/85"
+                    >
+                      {{ item.title }}
+                    </h4>
+                    <span class="text-black/45 dark:text-white/45">
+                      {{ item.description }}
+                    </span>
+                  </div>
+                  <Button
+                    :disabled="item.bound"
+                    size="small"
+                    type="link"
+                    @click="
+                      item.action ? item.action() : defaultTip(item.title)
+                    "
+                  >
+                    {{ buttonText(item) }}
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          </ListItem>
+        </template>
+      </List>
+      <Alert message="说明" type="info">
+        <template #description>
+          <p>
+            需要添加第三方账号在
+            <span class="font-bold">
+              apps\web-antd\src\views\_core\oauth-common.ts
+            </span>
+            中accountBindList按模板添加
+          </p>
+          <p>
+            添加对应模板后会在此处显示绑定, 但只有
+            <span class="font-bold">实现了action才能在登录页显示</span>
+          </p>
+        </template>
+      </Alert>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/**
+list item 间距
+*/
+:deep(.ant-list-item) {
+  padding: 6px;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/base-setting.vue b/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/base-setting.vue
new file mode 100644
index 0000000..077ec74
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/base-setting.vue
@@ -0,0 +1,214 @@
+<!--
+ * @description 个人中心-基本设置组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { UserProfileRes } from '#/api/system/user';
+
+import { onMounted, ref } from 'vue';
+
+import { DictEnum } from '@vben/constants';
+import { useUserStore } from '@vben/stores';
+
+import { Button, message } from 'ant-design-vue';
+import { pick } from 'lodash-es';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateCurrentUserProfile } from '#/api/system/user';
+import { useAuthStore } from '#/store';
+import { getDictOptions } from '#/utils/dict';
+
+import { emitter } from '../mitt';
+
+const props = defineProps<{ profile: UserProfileRes }>();
+
+const userStore = useUserStore();
+const authStore = useAuthStore();
+const loading = ref(false);
+
+function getProfileValues() {
+  return pick(props.profile.user, ['userId', 'nickName', 'sex']);
+}
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'profile-base-field',
+    },
+  },
+  layout: 'vertical',
+  resetButtonOptions: {
+    show: false,
+  },
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'userId',
+      label: '用户ID',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入昵称',
+      },
+      fieldName: 'nickName',
+      label: '昵称',
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: getDictOptions(DictEnum.SYS_USER_SEX),
+        optionType: 'button',
+      },
+      defaultValue: '0',
+      fieldName: 'sex',
+      label: '性别',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+async function handleCancel() {
+  await formApi.resetForm();
+  await formApi.setValues(getProfileValues());
+}
+
+async function handleSave() {
+  try {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const values = (await formApi.getValues()) as Recordable<any>;
+    loading.value = true;
+    await updateCurrentUserProfile(values);
+    message.success('更新成功');
+    const userInfo = await authStore.fetchUserInfo();
+    userStore.setUserInfo(userInfo);
+    emitter.emit('updateProfile');
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  formApi.setValues(getProfileValues());
+});
+</script>
+
+<template>
+  <div class="profile-base-setting">
+    <div class="profile-base-header">
+      <div class="profile-base-title">基本资料</div>
+      <div class="profile-base-desc">用于展示个人信息，请确保内容准确</div>
+    </div>
+
+    <BasicForm />
+
+    <div class="profile-base-footer">
+      <Button @click="handleCancel">取消</Button>
+      <Button type="primary" :loading="loading" @click="handleSave">保存修改</Button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.profile-base-setting {
+  max-width: 560px;
+  padding-top: 38px;
+  padding-left: 30px;
+}
+
+.profile-base-header {
+  margin-bottom: 28px;
+}
+
+.profile-base-title {
+  margin-bottom: 8px;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 30px;
+  color: #1f2937;
+}
+
+.profile-base-desc {
+  font-size: 14px;
+  line-height: 22px;
+  color: #9ca3af;
+}
+
+:deep(.profile-base-field) {
+  width: 100%;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 28px;
+}
+
+:deep(.ant-form-item-label) {
+  padding: 0 0 8px;
+  text-align: left;
+}
+
+:deep(.ant-form-item-label > label) {
+  height: auto;
+  font-size: 14px;
+  font-weight: 500;
+  color: #4b5563;
+}
+
+:deep(.ant-form-item-control) {
+  width: 100%;
+}
+
+:deep(.ant-radio-group) {
+  display: inline-flex;
+}
+
+:deep(.ant-radio-button-wrapper) {
+  min-width: 90px;
+  text-align: center;
+}
+
+.profile-base-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 12px;
+  padding-top: 20px;
+  border-top: 1px solid #eceff3;
+}
+
+.profile-base-footer :deep(.ant-btn) {
+  min-width: 112px;
+  height: 40px;
+}
+
+.dark .profile-base-title {
+  color: #f2f2f2;
+}
+
+.dark .profile-base-desc {
+  color: #8c8c8c;
+}
+
+.dark .profile-base-footer {
+  border-top-color: #303030;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/contact-setting.vue b/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/contact-setting.vue
new file mode 100644
index 0000000..90813d0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/contact-setting.vue
@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import type { UserProfileRes } from '#/api/system/user';
+
+import { computed, onBeforeUnmount, ref } from 'vue';
+
+import { Button, Image, Input, Modal, message } from 'ant-design-vue';
+
+import { getCaptchaApi } from '#/api';
+import {
+  sendCurrentUserEmailCode,
+  sendCurrentUserPhoneCode,
+  updateCurrentUserEmail,
+  updateCurrentUserPhone,
+} from '#/api/system/user';
+import { useAuthStore } from '#/store';
+
+import { emitter } from '../mitt';
+
+const props = defineProps<{
+  profile: UserProfileRes;
+  type: 'email' | 'phone';
+}>();
+
+const authStore = useAuthStore();
+const contact = ref('');
+const code = ref('');
+const captchaId = ref('');
+const captchaImage = ref('');
+const captchaValue = ref('');
+const captchaOpen = ref(false);
+const countdown = ref(0);
+const sending = ref(false);
+const saving = ref(false);
+let countdownTimer: ReturnType<typeof window.setInterval> | undefined;
+
+const isEmail = computed(() => props.type === 'email');
+const title = computed(() => (isEmail.value ? '修改邮箱' : '修改电话'));
+const currentLabel = computed(() => (isEmail.value ? '当前邮箱' : '当前电话'));
+const newLabel = computed(() => (isEmail.value ? '新邮箱' : '新电话'));
+const currentValue = computed(() =>
+  isEmail.value
+    ? props.profile.user.email || '未绑定邮箱'
+    : props.profile.user.phonenumber || '未绑定电话',
+);
+const placeholder = computed(() =>
+  isEmail.value ? '请输入新邮箱' : '请输入新电话',
+);
+const canSend = computed(() => countdown.value <= 0 && !sending.value);
+const buttonText = computed(() =>
+  countdown.value <= 0 ? '获取验证码' : `${countdown.value}秒后重试`,
+);
+
+function isValidContact(value: string) {
+  return isEmail.value
+    ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+    : /^1[3-9]\d{9}$/.test(value);
+}
+
+function startCountdown() {
+  countdown.value = 60;
+  if (countdownTimer) {
+    window.clearInterval(countdownTimer);
+  }
+  countdownTimer = window.setInterval(() => {
+    countdown.value -= 1;
+    if (countdown.value <= 0 && countdownTimer) {
+      window.clearInterval(countdownTimer);
+      countdownTimer = undefined;
+    }
+  }, 1000);
+}
+
+function getContactErrorText() {
+  return isEmail.value ? '请输入正确的邮箱' : '请输入正确的电话';
+}
+
+async function refreshCaptcha() {
+  const res = await getCaptchaApi();
+  captchaImage.value = res.captchaImage;
+  captchaId.value = res.captchaID;
+  captchaValue.value = '';
+}
+
+async function openCaptcha() {
+  const value = contact.value.trim();
+  if (!isValidContact(value)) {
+    message.warning(getContactErrorText());
+    return;
+  }
+  captchaOpen.value = true;
+  await refreshCaptcha();
+}
+
+async function sendCode() {
+  if (!captchaValue.value.trim()) {
+    message.warning('请输入身份验证码');
+    return;
+  }
+  const value = contact.value.trim();
+  sending.value = true;
+  try {
+    if (isEmail.value) {
+      await sendCurrentUserEmailCode({
+        captchaId: captchaId.value,
+        captchaValue: captchaValue.value.trim(),
+        email: value,
+      });
+    } else {
+      await sendCurrentUserPhoneCode({
+        captchaId: captchaId.value,
+        captchaValue: captchaValue.value.trim(),
+        phonenumber: value,
+      });
+    }
+    captchaOpen.value = false;
+    startCountdown();
+    message.success('验证码已发送');
+  } catch (error) {
+    await refreshCaptcha();
+    throw error;
+  } finally {
+    sending.value = false;
+  }
+}
+
+async function saveContact() {
+  const value = contact.value.trim();
+  if (!isValidContact(value)) {
+    message.warning(getContactErrorText());
+    return;
+  }
+  if (!code.value.trim()) {
+    message.warning('请输入验证码');
+    return;
+  }
+  saving.value = true;
+  try {
+    if (isEmail.value) {
+      await updateCurrentUserEmail({
+        code: code.value.trim(),
+        email: value,
+      });
+    } else {
+      await updateCurrentUserPhone({
+        code: code.value.trim(),
+        phonenumber: value,
+      });
+    }
+    message.success('修改成功');
+    contact.value = '';
+    code.value = '';
+    await authStore.fetchUserInfo();
+    emitter.emit('updateProfile');
+  } finally {
+    saving.value = false;
+  }
+}
+
+onBeforeUnmount(() => {
+  if (countdownTimer) {
+    window.clearInterval(countdownTimer);
+  }
+});
+</script>
+
+<template>
+  <div class="contact-setting">
+    <div class="contact-setting-title">{{ title }}</div>
+    <div class="contact-form">
+      <div class="contact-form-item">
+        <div class="contact-form-label">{{ currentLabel }}</div>
+        <div class="contact-setting-current">{{ currentValue }}</div>
+      </div>
+      <div class="contact-form-item">
+        <div class="contact-form-label">{{ newLabel }}</div>
+        <Input v-model:value="contact" :placeholder="placeholder" />
+      </div>
+      <div class="contact-form-item">
+        <div class="contact-form-label">验证码</div>
+        <div class="contact-code-row">
+          <Input
+            v-model:value="code"
+            autocomplete="one-time-code"
+            placeholder="请输入验证码"
+          />
+          <Button :disabled="!canSend" :loading="sending" @click="openCaptcha">
+            {{ buttonText }}
+          </Button>
+        </div>
+      </div>
+      <div class="contact-form-actions">
+        <Button :loading="saving" type="primary" @click="saveContact">
+          确认修改
+        </Button>
+      </div>
+    </div>
+    <Modal
+      v-model:open="captchaOpen"
+      :confirm-loading="sending"
+      destroy-on-close
+      title="身份验证验证码"
+      @ok="sendCode"
+    >
+      <div class="contact-captcha">
+        <Input
+          v-model:value="captchaValue"
+          allow-clear
+          autocomplete="off"
+          :maxlength="6"
+          placeholder="请输入身份验证码"
+          type="tel"
+          @press-enter="sendCode"
+        />
+        <Image
+          class="contact-captcha-image"
+          :height="36"
+          :preview="false"
+          :src="captchaImage"
+          :width="128"
+          @click="refreshCaptcha"
+        />
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<style scoped>
+.contact-setting {
+  margin-top: 20px;
+  max-width: 420px;
+}
+
+.contact-setting-title {
+  margin-bottom: 16px;
+  font-weight: 600;
+}
+
+.contact-setting-current {
+  color: hsl(var(--muted-foreground));
+  line-height: 36px;
+}
+
+.contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.contact-form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.contact-form-label {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.contact-code-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 112px;
+  gap: 8px;
+  align-items: center;
+}
+
+.contact-form :deep(.ant-input),
+.contact-form :deep(.ant-btn) {
+  height: 36px;
+}
+
+.contact-form-actions {
+  padding-top: 2px;
+}
+
+.contact-captcha {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 128px;
+  gap: 10px;
+  width: 100%;
+}
+
+.contact-captcha-image {
+  cursor: pointer;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/online-device.vue b/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/online-device.vue
new file mode 100644
index 0000000..c450c0c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/online-device.vue
@@ -0,0 +1,81 @@
+<!--
+ * @description 个人中心-在线设备组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysUserOnlineListApi, deleteSysUserOnlineApi } from '#/api/monitor/online';
+import { useAccessStore, useUserStore } from '@vben/stores';
+const userStore = useUserStore();
+const gridOptions: VxeGridProps = {
+  columns: [
+    { align: 'left', title: 'ID', type: 'checkbox', width: 80 },
+    { field: 'userName', title: '用户名称' },
+    { field: 'uuid', title: 'UUID' },
+    { field: 'clientKey', title: '客户端' },
+    { field: 'deviceType', title: '设备类型' },
+    { field: 'ipaddr', title: '地址' },
+    { field: 'loginLocation', title: '登录地点' },
+    { field: 'browser', title: '浏览器' },
+    { field: 'os', title: '操作系统' },
+    { field: 'loginTime', title: '登录时间' },
+    { field: 'expireTime', title: '过期时间' },
+    { title: '操作', width: 40, slots: { default: 'action' } }
+  ],
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await getSysUserOnlineListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          userName: userStore.userInfo?.userName,
+          ipaddr: '',
+          status: '',
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'tokenId',
+  },
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({ gridOptions });
+
+async function handleForceOffline(row: Recordable<any>) {
+  await deleteSysUserOnlineApi({
+    ids: [row.onlineId],
+  });
+  await tableApi.query();
+}
+</script>
+
+<template>
+  <div>
+    <BasicTable table-title="我的在线设备">
+      <template #action="{ row }">
+        <Popconfirm
+          :title="`确认强制下线[${row.userName}]?`"
+          placement="left"
+          @confirm="handleForceOffline(row)"
+        >
+          <a-button danger size="small" type="link">强制下线</a-button>
+        </Popconfirm>
+      </template>
+    </BasicTable>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/secure-setting.vue b/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/secure-setting.vue
new file mode 100644
index 0000000..c462d17
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/profile/components/secure-setting.vue
@@ -0,0 +1,235 @@
+<!--
+ * @description 个人中心-安全设置组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { UpdateCurrentUserPasswordParam } from '#/api/system/user';
+
+import { onMounted, ref } from 'vue';
+
+import { Button, message, Modal, Switch } from 'ant-design-vue';
+import { omit } from 'lodash-es';
+import { useUserStore } from '@vben/stores';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { isMfaEnabled, setMfaEnabled, updateCurrentUserPassword } from '#/api/system/user';
+import { useAuthStore } from '#/store';
+
+const mfaEnabled = ref<number>(0);
+const mfaUuid = ref<string>('');
+
+const userStore = useUserStore();
+const authStore = useAuthStore();
+const loading = ref(false);
+
+// 获取用户ID（兼容 id 和 userId）
+function getUserId(): number | null {
+  const info = userStore.userInfo;
+  if (!info) return null;
+  // 尝试多种可能的字段名
+  const id = (info as any).id || (info as any).userId || (info as any).user_id;
+  return id ? Number(id) : null;
+}
+
+// 获取MFA状态
+async function fetchMfaStatus() {
+  try {
+    const userId = getUserId();
+    if (!userId) {
+      console.warn('未获取到用户ID，当前userInfo:', userStore.userInfo);
+      return;
+    }
+    const res = await isMfaEnabled({ userId });
+    mfaEnabled.value = res.mfaEnabled;
+    mfaUuid.value = res.uuid || '';
+  } catch (error) {
+    console.error('获取MFA状态失败', error);
+  }
+}
+
+// 切换MFA状态
+async function handleMfaChange() {
+  const userId = getUserId();
+  if (!userId) {
+    console.warn('未获取到用户ID');
+    return;
+  }
+
+  // 存储当前按钮状态（开启->关闭为0，关闭->开启为1）
+  const newStatus = mfaEnabled.value === 1 ? 0 : 1;
+  const actionText = newStatus === 1 ? '开启' : '关闭';
+
+  Modal.confirm({
+    title: '确认操作',
+    content: `您正在${actionText}MFA验证功能，是否继续？`,
+    async onOk() {
+      try {
+        // 调用无参接口，获取返回的uuid
+        const res = await setMfaEnabled();
+        const uuid = res.uuid;
+
+        // 跳转到MFA验证页面，传递uuid和按钮状态
+        window.location.href = `/auth/mfa-verify?userId=${userId}&uuid=${uuid}&mfaEnabled=${newStatus}`;
+      } catch (error) {
+        console.error('操作失败', error);
+        message.error('操作失败，请重试');
+      }
+    },
+  });
+}
+
+onMounted(() => {
+  fetchMfaStatus();
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  actionWrapperClass: 'text-left mb-[16px] ml-[96px]',
+  commonConfig: {
+    labelWidth: 90,
+  },
+  handleSubmit,
+  resetButtonOptions: {
+    show: false,
+  },
+  showDefaultActions: false,
+  schema: [
+    {
+      component: 'InputPassword',
+      fieldName: 'oldPassword',
+      label: '旧密码',
+      rules: z
+        .string({ message: '请输入密码' })
+        .min(5, '密码长度不能少于5个字符')
+        .max(20, '密码长度不能超过20个字符'),
+    },
+    {
+      component: 'InputPassword',
+      dependencies: {
+        rules(values) {
+          return z
+            .string({ message: '请输入新密码' })
+            .min(5, '密码长度不能少于5个字符')
+            .max(20, '密码长度不能超过20个字符')
+            .refine(
+              (value) => value !== values.oldPassword,
+              '新旧密码不能相同',
+            );
+        },
+        triggerFields: ['newPassword', 'oldPassword'],
+      },
+      fieldName: 'newPassword',
+      label: '新密码',
+      rules: 'required',
+    },
+    {
+      component: 'InputPassword',
+      dependencies: {
+        rules(values) {
+          return z
+            .string({ message: '请输入确认密码' })
+            .min(5, '密码长度不能少于5个字符')
+            .max(20, '密码长度不能超过20个字符')
+            .refine(
+              (value) => value === values.newPassword,
+              '新密码和确认密码不一致',
+            );
+        },
+        triggerFields: ['newPassword', 'confirmPassword'],
+      },
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      rules: 'required',
+    },
+  ],
+  submitButtonOptions: {
+    show: false,
+  },
+});
+
+function buttonLoading(value: boolean) {
+  loading.value = value;
+}
+
+async function handleCancel() {
+  await formApi.resetForm();
+}
+
+async function handleSave() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  const values = await formApi.getValues();
+  handleSubmit(values);
+}
+
+function handleSubmit(values: any) {
+  Modal.confirm({
+    content: '确认修改密码吗？',
+    onOk: async () => {
+      try {
+        buttonLoading(true);
+        const data = omit(
+          values,
+          ['confirmPassword'],
+        ) as UpdateCurrentUserPasswordParam;
+        await updateCurrentUserPassword(data);
+        message.success('密码修改成功，请重新登录');
+        await authStore.logout(true);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        buttonLoading(false);
+      }
+    },
+    title: '提示',
+  });
+}
+</script>
+
+<template>
+  <div class="mt-[16px] md:w-full lg:w-1/2 2xl:w-2/5">
+    <BasicForm />
+    <div class="mt-[16px] pl-[25px] flex items-center">
+      <span class="w-[90px] text-right text-[14px] text-[rgba(0,0,0,0.88)]">
+        是否开启MFA
+      </span>
+      <div class="ml-[12px]">
+        <Switch
+          :checked="mfaEnabled === 1"
+          @click="handleMfaChange"
+        />
+      </div>
+    </div>
+    <div class="profile-secure-footer">
+      <Button @click="handleCancel">取消</Button>
+      <Button type="primary" :loading="loading" @click="handleSave">
+        保存修改
+      </Button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.profile-secure-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 12px;
+  padding-top: 20px;
+  border-top: 1px solid #eceff3;
+}
+
+.profile-secure-footer :deep(.ant-btn) {
+  min-width: 112px;
+  height: 40px;
+}
+
+.dark .profile-secure-footer {
+  border-top-color: #303030;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/profile/index.vue b/admin-ui/vue/apps/web-antd/src/views/_core/profile/index.vue
new file mode 100644
index 0000000..422e023
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/profile/index.vue
@@ -0,0 +1,59 @@
+<!--
+ * @description 个人中心页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { UserProfileRes } from '#/api/system/user';
+
+import { onMounted, onUnmounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { useUserStore } from '@vben/stores';
+
+import { getUserProfileApi } from '#/api/system/user';
+import { useAuthStore } from '#/store';
+
+import { emitter } from './mitt';
+import ProfilePanel from './profile-panel.vue';
+import SettingPanel from './setting-panel.vue';
+
+const profile = ref<UserProfileRes>();
+async function loadProfile() {
+  const resp = await getUserProfileApi();
+  profile.value = resp;
+}
+
+onMounted(loadProfile);
+
+const authStore = useAuthStore();
+const userStore = useUserStore();
+async function handleUploadFinish() {
+  // 重新加载用户信息
+  await loadProfile();
+  // 更新store
+  const userInfo = await authStore.fetchUserInfo();
+  userStore.setUserInfo(userInfo);
+}
+
+onMounted(() => emitter.on('updateProfile', loadProfile));
+onUnmounted(() => emitter.off('updateProfile'));
+</script>
+
+<template>
+  <Page>
+    <div class="flex flex-col gap-[16px] lg:flex-row">
+      <!-- 左侧 -->
+      <ProfilePanel :profile="profile" @upload-finish="handleUploadFinish" />
+      <!-- 右侧 -->
+      <SettingPanel
+        v-if="profile"
+        :profile="profile"
+        class="flex-1 overflow-hidden"
+      />
+    </div>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/profile/mitt.ts b/admin-ui/vue/apps/web-antd/src/views/_core/profile/mitt.ts
new file mode 100644
index 0000000..bf7a8b1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/profile/mitt.ts
@@ -0,0 +1,16 @@
+import { mitt } from '@vben/utils';
+
+type Events = {
+  updateProfile: void;
+};
+
+export const emitter = mitt<Events>();
+
+/**
+ * @description 个人中心事件总线
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/profile/profile-panel.vue b/admin-ui/vue/apps/web-antd/src/views/_core/profile/profile-panel.vue
new file mode 100644
index 0000000..99c8fa0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/profile/profile-panel.vue
@@ -0,0 +1,100 @@
+<!--
+ * @description 个人中心-个人信息面板
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { UserProfileRes } from '#/api/system/user';
+
+import { computed } from 'vue';
+
+import { preferences, usePreferences } from '@vben/preferences';
+
+import {
+  Card,
+  Descriptions,
+  DescriptionsItem,
+  Tag,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { updateCurrentUserAvatar } from '#/api/system/user';
+import { CropperAvatar } from '#/components/cropper';
+
+const props = defineProps<{ profile?: UserProfileRes }>();
+
+defineEmits<{
+  // 头像上传完毕
+  uploadFinish: [];
+}>();
+
+const avatar = computed(
+  () => props.profile?.user.avatar ?? preferences.app.defaultAvatar,
+);
+
+const { isDark } = usePreferences();
+const poetrySrc = computed(() => {
+  const color = isDark.value ? 'white' : 'gray';
+  return `https://v2.jinrishici.com/one.svg?font-size=12&color=${color}`;
+});
+const postName = computed(() => {
+  return props.profile?.user.posts.find((item) => item.deptId === props.profile?.user.deptId)?.postName;
+});
+</script>
+
+<template>
+  <Card :loading="!profile" class="h-full lg:w-1/3">
+    <div v-if="profile" class="flex flex-col items-center gap-[24px]">
+      <div class="flex flex-col items-center gap-[20px]">
+        <Tooltip title="点击上传头像">
+          <CropperAvatar
+            :show-btn="false"
+            :upload-api="updateCurrentUserAvatar"
+            :value="avatar"
+            width="120"
+            @change="$emit('uploadFinish')"
+          />
+        </Tooltip>
+        <div class="flex flex-col items-center gap-[8px]">
+          <span class="text-foreground text-xl font-bold">
+            {{ profile.user.nickName ?? '未知' }}
+          </span>
+          <!-- https://www.jinrishici.com/doc/#image -->
+          <img :src="poetrySrc" />
+        </div>
+      </div>
+      <div class="px-[24px]">
+        <Descriptions :column="1">
+          <DescriptionsItem label="用户账号">
+            {{ profile.user.userName }}
+          </DescriptionsItem>
+          <DescriptionsItem label="手机号码">
+            {{ profile.user.phonenumber || '未绑定手机号' }}
+          </DescriptionsItem>
+          <DescriptionsItem label="用户邮箱">
+            {{ profile.user.email || '未绑定邮箱' }}
+          </DescriptionsItem>
+          <DescriptionsItem label="所属公司">
+            <Tag color="processing">
+              {{ profile.user.companyInfo?.deptName ?? '未分配公司' }}
+            </Tag>
+          </DescriptionsItem>
+          <DescriptionsItem label="所属组织">
+            <Tag color="processing">
+              {{ profile.user.deptInfo?.deptName ?? '未分配组织' }}
+            </Tag>
+            <Tag v-if="postName" color="processing">
+              {{ postName }}
+            </Tag>
+          </DescriptionsItem>
+          <DescriptionsItem label="上次登录">
+            {{ profile.user.loginDate }}
+          </DescriptionsItem>
+        </Descriptions>
+      </div>
+    </div>
+  </Card>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/_core/profile/setting-panel.vue b/admin-ui/vue/apps/web-antd/src/views/_core/profile/setting-panel.vue
new file mode 100644
index 0000000..ddaf28e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/_core/profile/setting-panel.vue
@@ -0,0 +1,102 @@
+<!--
+ * @description 个人中心-设置面板
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts">
+import { defineComponent, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { TabPane, Tabs } from 'ant-design-vue';
+
+import BaseSetting from './components/base-setting.vue';
+import ContactSetting from './components/contact-setting.vue';
+import OnlineDevice from './components/online-device.vue';
+import SecureSetting from './components/secure-setting.vue';
+
+/** 查询参数 tab 取值 → TabPane key */
+const TAB_KEY_MAP: Record<string, string> = {
+  base: '1',
+  secure: '2',
+  device: '3',
+  email: '4',
+  phone: '5',
+};
+
+export default defineComponent({
+  components: {
+    BaseSetting,
+    ContactSetting,
+    OnlineDevice,
+    SecureSetting,
+    TabPane,
+    Tabs,
+  },
+  setup() {
+    const route = useRoute();
+    const settingList = [
+      {
+        component: 'BaseSetting',
+        key: '1',
+        name: '基本设置',
+      },
+      {
+        component: 'SecureSetting',
+        key: '2',
+        name: '安全设置',
+      },
+      {
+        component: 'OnlineDevice',
+        key: '3',
+        name: '在线设备',
+      },
+      {
+        component: 'ContactSetting',
+        key: '4',
+        name: '修改邮箱',
+        props: { type: 'email' },
+      },
+      {
+        component: 'ContactSetting',
+        key: '5',
+        name: '修改电话',
+        props: { type: 'phone' },
+      },
+    ];
+
+    // 支持 /profile?tab=secure|phone|... 深链定位（首登引导提示框跳转用）
+    const activeKey = ref(TAB_KEY_MAP[String(route.query.tab || '')] || '1');
+    watch(
+      () => route.query.tab,
+      (tab) => {
+        // 查询参数为准：缺省或非法值时回到默认「基本设置」，保证 /profile 行为确定
+        activeKey.value = TAB_KEY_MAP[String(tab || '')] || '1';
+      },
+    );
+
+    return {
+      activeKey,
+      settingList,
+    };
+  },
+});
+</script>
+
+<template>
+  <!-- eslint-disable vue/attribute-hyphenation -- ant-design-vue Tabs 的 activeKey 是驼峰声明属性：
+       连字符写法（v-model:active-key）经编译器转换后 prop 名匹配不上，初始/深链值会失效，故必须保持驼峰 -->
+  <Tabs
+    v-model:activeKey="activeKey"
+    class="rounded-[var(--radius)] bg-background px-[16px] lg:flex-1"
+  >
+    <template v-for="item in settingList" :key="item.key">
+      <TabPane :tab="item.name">
+        <component :is="item.component" v-bind="{ ...$attrs, ...item.props }" />
+      </TabPane>
+    </template>
+  </Tabs>
+  <!-- eslint-enable vue/attribute-hyphenation -->
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/roles/index.vue b/admin-ui/vue/apps/web-antd/src/views/agent/roles/index.vue
new file mode 100644
index 0000000..8a854ba
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/roles/index.vue
@@ -0,0 +1,263 @@
+<script lang="ts" setup>
+import type { DeepPartial } from '@vben/types';
+
+import type { VbenFormProps } from '#/adapter/form';
+import type {
+  VxeGridListeners,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { AgentRole } from '#/api/agent';
+
+import { h, ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteAgentRoleApi,
+  getAgentRoleListApi,
+} from '#/api/agent';
+
+import roleDrawer from './role-drawer.vue';
+
+const checkboxChecked = ref(false);
+
+const formOptions: VbenFormProps = {
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'roleName',
+      label: '角色名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'roleKey',
+      label: '角色权限字符',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: '正常', value: '0' },
+          { label: '停用', value: '1' },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'status',
+      label: '状态',
+    },
+  ],
+  showCollapseButton: true,
+  submitOnChange: true,
+  submitOnEnter: false,
+};
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const gridOptions: VxeTableGridOptions<AgentRole> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'roleName',
+      slots: { default: 'roleName' },
+      title: '角色名称',
+    },
+    { field: 'roleKey', title: '角色权限字符' },
+    {
+      field: 'status',
+      slots: { default: 'status' },
+      title: '状态',
+      width: 100,
+    },
+    { field: 'remark', title: '备注' },
+    { title: '操作', width: 150, slots: { default: 'action' } },
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async (_params, formValues) => {
+        return await getAgentRoleListApi({
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const [Grid, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [RoleDrawer, roleDrawerApi] = useVbenModal({
+  centered: true,
+  connectedComponent: roleDrawer,
+});
+
+function isProtectedRole(row: AgentRole) {
+  return !!row.isDefaultRole || !!row.sourceRoleId;
+}
+
+async function handleAdd() {
+  roleDrawerApi.setData({ update: false, view: false });
+  roleDrawerApi.open();
+}
+
+async function handleEdit(row: AgentRole) {
+  if (isProtectedRole(row)) {
+    message.warning('不能修改本级机构绑定的默认角色权限');
+    return;
+  }
+  roleDrawerApi.setData({ id: row.roleId, update: true, view: false });
+  roleDrawerApi.open();
+}
+
+async function handleView(row: AgentRole) {
+  roleDrawerApi.setData({ id: row.roleId, update: false, view: true });
+  roleDrawerApi.open();
+}
+
+async function handleDelete(row: AgentRole) {
+  if (isProtectedRole(row)) {
+    message.warning('不能删除本级机构绑定的默认角色权限');
+    return;
+  }
+  await deleteAgentRoleApi({ roleId: row.roleId });
+  message.success('删除成功');
+  await tableApi.query();
+}
+
+function handleCheckboxChange() {
+  const rows = tableApi.grid.getCheckboxRecords() as AgentRole[];
+  checkboxChecked.value = rows.some((row) => !isProtectedRole(row));
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows
+    .filter((row: AgentRole) => !isProtectedRole(row))
+    .map((row: AgentRole) => row.roleId);
+  Modal.confirm({
+    centered: true,
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的 ${ids.length} 条记录吗？`,
+    onOk: async () => {
+      await deleteAgentRoleApi({ roleIds: ids });
+      message.success('删除成功');
+      await tableApi.query();
+    },
+  });
+}
+
+tableApi.query();
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="角色管理">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleAdd"
+          v-access:code="'cpm:agent:role:edit'"
+        >
+          新增
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :disabled="!checkboxChecked"
+          :icon="h(MdiDelete)"
+          @click="handleMultiDelete"
+          v-access:code="'cpm:agent:role:remove'"
+        >
+          删除
+        </Button>
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status === '0' ? 'green' : 'red'">
+          {{ row.status === '0' ? '正常' : '停用' }}
+        </Tag>
+      </template>
+      <template #roleName="{ row }">
+        <div class="flex items-center justify-center gap-2">
+          <span>{{ row.roleName }}</span>
+          <Tag v-if="row.isDefaultRole" color="blue">默认管理员</Tag>
+          <Tag v-else-if="row.sourceRoleId" color="purple">上级下发</Tag>
+        </div>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            v-if="isProtectedRole(row)"
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleView(row)"
+            v-access:code="'cpm:agent:role:query'"
+          >
+            查看
+          </Button>
+          <Button
+            v-else
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:agent:role:edit'"
+          >
+            修改
+          </Button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确定删除吗？"
+            @confirm="handleDelete(row)"
+          >
+            <Button
+              class="mr-2 border-none p-0"
+              :block="false"
+              :disabled="isProtectedRole(row)"
+              type="link"
+              danger
+              v-access:code="'cpm:agent:role:remove'"
+            >
+              删除
+            </Button>
+          </Popconfirm>
+        </div>
+      </template>
+    </Grid>
+    <RoleDrawer @reload="tableApi.query()" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/roles/menu-select.test.ts b/admin-ui/vue/apps/web-antd/src/views/agent/roles/menu-select.test.ts
new file mode 100644
index 0000000..f983309
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/roles/menu-select.test.ts
@@ -0,0 +1,138 @@
+import { flushPromises, mount } from '@vue/test-utils';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import MenuSelect from './menu-select.vue';
+
+const mocks = vi.hoisted(() => ({
+  options: {} as any,
+  getTree: vi.fn(),
+  clear: vi.fn(),
+  setRows: vi.fn(),
+  load: vi.fn(),
+  checked: vi.fn(() => [] as { menuId: number }[]),
+  halfChecked: vi.fn(() => [] as { menuId: number }[]),
+  setAll: vi.fn(),
+}));
+
+vi.mock('#/api/agent', () => ({ getAgentMenuTreeApi: mocks.getTree }));
+vi.mock('../../system/menu/model', () => ({
+  getMenuTypeOptionsColor: vi.fn(),
+  getMenuTypeOptionsLabel: vi.fn(),
+}));
+vi.mock('ant-design-vue', () => ({
+  Alert: { template: '<div />' },
+  Checkbox: {
+    props: ['disabled'],
+    template: '<button :disabled="disabled"><slot /></button>',
+  },
+  Tag: { template: '<span><slot /></span>' },
+}));
+vi.mock('#/adapter/vxe-table', () => ({
+  useVbenVxeGrid: (options: any) => {
+    mocks.options = options.gridOptions;
+    return [
+      { template: '<div />' },
+      {
+        setGridOptions: vi.fn(),
+        grid: {
+          clearCheckboxRow: mocks.clear,
+          setCheckboxRowKey: mocks.setRows,
+          loadData: mocks.load,
+          getCheckboxRecords: mocks.checked,
+          getCheckboxIndeterminateRecords: mocks.halfChecked,
+          setAllCheckboxRow: mocks.setAll,
+        },
+      },
+    ];
+  },
+}));
+
+function exposed(wrapper: ReturnType<typeof mount>) {
+  return wrapper.vm as unknown as { getData: () => number[] };
+}
+
+describe('角色菜单展示与实际授权边界', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.getTree.mockResolvedValue({
+      items: [{ menuId: 1, children: [{ menuId: 10 }] }],
+      menuIds: [10],
+    });
+    mocks.checked.mockReturnValue([]);
+    mocks.halfChecked.mockReturnValue([]);
+  });
+
+  it('父节点正常展示和勾选，不展示内部授权规则', async () => {
+    const wrapper = mount(MenuSelect);
+    await flushPromises();
+    expect(
+      mocks.options.checkboxConfig.checkMethod({ row: { menuId: 1 } }),
+    ).toBe(true);
+    expect(
+      mocks.options.checkboxConfig.checkMethod({ row: { menuId: 10 } }),
+    ).toBe(true);
+    expect(wrapper.emitted('ready')).toHaveLength(1);
+    expect(wrapper.text()).not.toContain('灰色菜单');
+    expect(wrapper.text()).not.toContain('授权');
+    wrapper.unmount();
+  });
+
+  it('回显移除过期权限，不自动勾选新增菜单', async () => {
+    const wrapper = mount(MenuSelect, { props: { menuIds: [1, 10, 99] } });
+    await flushPromises();
+    expect(mocks.setRows).toHaveBeenLastCalledWith([10], true);
+    await wrapper.setProps({ menuIds: [] });
+    await flushPromises();
+    expect(mocks.setRows).toHaveBeenLastCalledWith([], true);
+    wrapper.unmount();
+  });
+
+  it('全选和父子联动的输出也不能提交展示节点', async () => {
+    const wrapper = mount(MenuSelect);
+    await flushPromises();
+    mocks.checked.mockReturnValue([
+      { menuId: 1 },
+      { menuId: 10 },
+      { menuId: 99 },
+    ]);
+    mocks.halfChecked.mockReturnValue([{ menuId: 1 }, { menuId: 10 }]);
+    expect(exposed(wrapper).getData()).toEqual([10]);
+    wrapper.unmount();
+  });
+
+  it('只读模式禁止勾选和输出权限', async () => {
+    const wrapper = mount(MenuSelect, { props: { disabled: true } });
+    await flushPromises();
+    mocks.checked.mockReturnValue([{ menuId: 10 }]);
+    expect(
+      mocks.options.checkboxConfig.checkMethod({ row: { menuId: 10 } }),
+    ).toBe(false);
+    expect(exposed(wrapper).getData()).toEqual([]);
+    wrapper.unmount();
+  });
+
+  it('菜单加载失败不进入可编辑状态', async () => {
+    mocks.getTree.mockRejectedValueOnce(new Error('请求失败'));
+    const wrapper = mount(MenuSelect);
+    await flushPromises();
+    expect(wrapper.emitted('loadError')).toHaveLength(1);
+    expect(wrapper.emitted('ready')).toBeUndefined();
+    expect(
+      mocks.options.checkboxConfig.checkMethod({ row: { menuId: 10 } }),
+    ).toBe(false);
+    wrapper.unmount();
+  });
+
+  it('表格装载失败后撤回可编辑状态', async () => {
+    mocks.load.mockRejectedValueOnce(new Error('装载失败'));
+    const wrapper = mount(MenuSelect);
+    await flushPromises();
+    expect(wrapper.emitted('loadError')).toHaveLength(1);
+    expect(wrapper.emitted('ready')).toBeUndefined();
+    expect(
+      mocks.options.checkboxConfig.checkMethod({ row: { menuId: 10 } }),
+    ).toBe(false);
+    wrapper.unmount();
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/roles/menu-select.vue b/admin-ui/vue/apps/web-antd/src/views/agent/roles/menu-select.vue
new file mode 100644
index 0000000..332105c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/roles/menu-select.vue
@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+import type { MenuTreeItem } from '#/api/agent';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { Checkbox, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAgentMenuTreeApi } from '#/api/agent';
+
+import {
+  getMenuTypeOptionsColor,
+  getMenuTypeOptionsLabel,
+} from '../../system/menu/model';
+
+const props = defineProps<{
+  disabled?: boolean;
+  menuIds?: number[];
+}>();
+
+const emit = defineEmits<{
+  loadError: [];
+  ready: [];
+}>();
+
+const flag = ref(true);
+const assignableMenuIds = ref(new Set<number>());
+const ready = ref(false);
+
+function canSelect() {
+  return ready.value && !props.disabled;
+}
+
+async function syncCheckedRows() {
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.setCheckboxRowKey(
+    (props.menuIds || []).filter((menuId) =>
+      assignableMenuIds.value.has(menuId),
+    ),
+    true,
+  );
+}
+
+async function loadMenuTree(items: MenuTreeItem[]) {
+  await gridApi.grid.loadData(items);
+  await nextTick();
+  await syncCheckedRows();
+}
+
+watch(
+  () => props.menuIds,
+  async () => {
+    await nextTick();
+    await syncCheckedRows();
+  },
+  { deep: true },
+);
+
+onMounted(async () => {
+  try {
+    const { items, menuIds } = await getAgentMenuTreeApi();
+    assignableMenuIds.value = new Set(menuIds);
+    ready.value = true;
+    await loadMenuTree(items);
+    emit('ready');
+  } catch {
+    ready.value = false;
+    assignableMenuIds.value = new Set();
+    emit('loadError');
+  }
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    align: 'center',
+    checkboxConfig: {
+      checkMethod: () => canSelect(),
+      checkStrictly: true,
+    },
+    columns: [
+      { align: 'left', title: '', type: 'checkbox', width: 40 },
+      {
+        align: 'left',
+        field: 'menuName',
+        minWidth: 160,
+        title: '菜单名称',
+        treeNode: true,
+      },
+      {
+        field: 'menuType',
+        slots: { default: 'menuType' },
+        title: '类型',
+        width: 60,
+      },
+      { field: 'perms', title: '权限标识' },
+    ],
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'menuId',
+    },
+    treeConfig: {
+      expandAll: true,
+      parentField: 'parentId',
+      rowField: 'menuId',
+      transform: true,
+    },
+  },
+});
+
+const checkboxStatus = ref({
+  all: false,
+  expand: true,
+  linkage: false,
+});
+
+function checkboxAllChange(params: any) {
+  if (!ready.value || props.disabled) return;
+  gridApi.grid.setAllCheckboxRow(params.target.checked);
+}
+
+function checkboxExpandChange(params: any) {
+  gridApi.grid?.setAllTreeExpand(params.target.checked);
+}
+
+function checkboxLinkageChange(params: any) {
+  if (!ready.value || props.disabled) return;
+  gridApi.setGridOptions({
+    checkboxConfig: {
+      checkStrictly: !params.target.checked,
+    },
+  });
+}
+
+function getData() {
+  const checked = gridApi.grid.getCheckboxRecords().map((item) => item.menuId);
+  const indeterminate = gridApi.grid
+    .getCheckboxIndeterminateRecords()
+    .map((item) => item.menuId);
+  return [...new Set<number>([...checked, ...indeterminate])].filter(
+    (menuId) => canSelect() && assignableMenuIds.value.has(menuId),
+  );
+}
+
+function clearData() {
+  gridApi.grid.clearCheckboxRow();
+}
+
+defineExpose({
+  clearData,
+  getData,
+});
+</script>
+
+<template>
+  <div class="flex justify-between px-2">
+    <Checkbox
+      v-model:checked="checkboxStatus.all"
+      :disabled="!flag || !ready || disabled"
+      @change="checkboxAllChange"
+    >
+      全选/全不选
+    </Checkbox>
+    <Checkbox
+      v-model:checked="checkboxStatus.expand"
+      :disabled="!flag || !ready || disabled"
+      @change="checkboxExpandChange"
+    >
+      展开/折叠
+    </Checkbox>
+    <Checkbox
+      v-model:checked="checkboxStatus.linkage"
+      :disabled="!flag || !ready || disabled"
+      @change="checkboxLinkageChange"
+    >
+      父子联动
+    </Checkbox>
+  </div>
+  <Grid v-if="flag" class="m-0 w-full p-0">
+    <template #menuType="{ row }">
+      <Tag :color="getMenuTypeOptionsColor(row.menuType)">
+        {{ getMenuTypeOptionsLabel(row.menuType) }}
+      </Tag>
+    </template>
+  </Grid>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/roles/role-drawer.test.ts b/admin-ui/vue/apps/web-antd/src/views/agent/roles/role-drawer.test.ts
new file mode 100644
index 0000000..cbef22c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/roles/role-drawer.test.ts
@@ -0,0 +1,205 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => ({
+  hooks: {} as {
+    onConfirm?: () => Promise<void>;
+    onOpenChange?: (open: boolean) => Promise<unknown>;
+  },
+  close: vi.fn(),
+  getData: vi.fn(() => ({ update: false, view: false })),
+  getRole: vi.fn(),
+  saveRole: vi.fn(),
+  setState: vi.fn(),
+  lock: vi.fn(),
+  unlock: vi.fn(),
+  warning: vi.fn(),
+  error: vi.fn(),
+}));
+
+vi.mock('#/api/agent', () => ({
+  getAgentRoleViewApi: mocks.getRole,
+  saveAgentRoleApi: mocks.saveRole,
+}));
+vi.mock('@vben/locales', () => ({ $t: (key: string) => key }));
+vi.mock('@vben/utils', () => ({
+  cloneDeep: (value: object) => structuredClone(value),
+  getPopupContainer: vi.fn(),
+}));
+vi.mock('ant-design-vue', () => ({
+  message: { error: mocks.error, success: vi.fn(), warning: mocks.warning },
+}));
+vi.mock('@vben/common-ui', async () => {
+  const { defineComponent, h } = await import('vue');
+  return {
+    useVbenModal: (options: typeof mocks.hooks) => {
+      mocks.hooks = options;
+      return [
+        defineComponent({
+          setup:
+            (_, { slots }) =>
+            () =>
+              h('div', slots.default?.()),
+        }),
+        {
+          close: mocks.close,
+          getData: mocks.getData,
+          setState: mocks.setState,
+          lock: mocks.lock,
+          unlock: mocks.unlock,
+        },
+      ];
+    },
+    z: { string: () => ({ min: () => ({ max: vi.fn() }) }) },
+  };
+});
+vi.mock('#/adapter/form', async () => {
+  const { defineComponent, h } = await import('vue');
+  return {
+    useVbenForm: () => [
+      defineComponent({
+        setup:
+          (_, { slots }) =>
+          () =>
+            h('div', slots.menuIds?.()),
+      }),
+      {
+        getValues: vi.fn(async () => ({ roleName: '客服', roleKey: 'staff' })),
+        resetForm: vi.fn(),
+        setState: vi.fn(),
+        setValues: vi.fn(),
+        validate: vi.fn(async () => ({ valid: true })),
+      },
+    ],
+  };
+});
+vi.mock('./menu-select.vue', async () => {
+  const { defineComponent, h } = await import('vue');
+  return {
+    default: defineComponent({
+      name: 'MenuSelect',
+      props: ['menuIds', 'disabled'],
+      emits: ['ready', 'loadError'],
+      setup: (_, { expose }) => {
+        expose({ clearData: vi.fn(), getData: () => [10] });
+        return () => h('div');
+      },
+    }),
+  };
+});
+
+import RoleDrawer from './role-drawer.vue';
+
+describe('企业角色菜单加载与保存', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.getData.mockReturnValue({ update: false, view: false });
+  });
+
+  it('角色详情加载失败后关闭弹窗并解除加载状态', async () => {
+    mocks.getData.mockReturnValue({ update: true, view: false });
+    mocks.getRole.mockRejectedValueOnce(new Error('请求失败'));
+    const wrapper = mount(RoleDrawer);
+    await mocks.hooks.onOpenChange?.(true);
+    expect(mocks.close).toHaveBeenCalled();
+    expect(mocks.setState).toHaveBeenCalledWith({
+      confirmLoading: false,
+      loading: false,
+    });
+    expect(mocks.saveRole).not.toHaveBeenCalled();
+    wrapper.unmount();
+  });
+
+  it('菜单未就绪或加载失败时不保存空权限', async () => {
+    const wrapper = mount(RoleDrawer);
+    await mocks.hooks.onOpenChange?.(true);
+    await flushPromises();
+    await mocks.hooks.onConfirm?.();
+    expect(mocks.saveRole).not.toHaveBeenCalled();
+    wrapper.findComponent({ name: 'MenuSelect' }).vm.$emit('loadError');
+    await mocks.hooks.onConfirm?.();
+    expect(mocks.saveRole).not.toHaveBeenCalled();
+    expect(mocks.setState).toHaveBeenCalledWith({ confirmDisabled: true });
+    wrapper.unmount();
+  });
+
+  it('菜单就绪后按普通角色提交且不新增角色用途', async () => {
+    const wrapper = mount(RoleDrawer);
+    await mocks.hooks.onOpenChange?.(true);
+    await flushPromises();
+    wrapper.findComponent({ name: 'MenuSelect' }).vm.$emit('ready');
+    await mocks.hooks.onConfirm?.();
+    expect(mocks.saveRole).toHaveBeenCalledWith({
+      isPass: 0,
+      menuIds: [10],
+      roleKey: 'staff',
+      roleName: '客服',
+    });
+    expect(mocks.close).toHaveBeenCalled();
+    wrapper.unmount();
+  });
+
+  it('关闭后重新打开必须重新等待菜单加载', async () => {
+    const wrapper = mount(RoleDrawer);
+    await mocks.hooks.onOpenChange?.(true);
+    await flushPromises();
+    wrapper.findComponent({ name: 'MenuSelect' }).vm.$emit('ready');
+    await mocks.hooks.onOpenChange?.(false);
+    await mocks.hooks.onOpenChange?.(true);
+    await flushPromises();
+    await mocks.hooks.onConfirm?.();
+    expect(mocks.saveRole).not.toHaveBeenCalled();
+    wrapper.unmount();
+  });
+
+  it('保存期间锁定弹窗且重复确认只提交一次', async () => {
+    let finishSave: (() => void) | undefined;
+    mocks.saveRole.mockImplementationOnce(
+      () =>
+        new Promise<void>((resolve) => {
+          finishSave = resolve;
+        }),
+    );
+    const wrapper = mount(RoleDrawer);
+    await mocks.hooks.onOpenChange?.(true);
+    await flushPromises();
+    wrapper.findComponent({ name: 'MenuSelect' }).vm.$emit('ready');
+    const firstSave = mocks.hooks.onConfirm?.();
+    await flushPromises();
+    await mocks.hooks.onConfirm?.();
+    expect(mocks.saveRole).toHaveBeenCalledTimes(1);
+    expect(mocks.lock).toHaveBeenCalledTimes(1);
+    expect(mocks.unlock).not.toHaveBeenCalled();
+    finishSave?.();
+    await firstSave;
+    expect(mocks.unlock).toHaveBeenCalledTimes(1);
+    wrapper.unmount();
+  });
+
+  it('保存失败后解除锁定并允许重试', async () => {
+    mocks.saveRole.mockRejectedValueOnce(new Error('下发失败'));
+    const wrapper = mount(RoleDrawer);
+    await mocks.hooks.onOpenChange?.(true);
+    await flushPromises();
+    wrapper.findComponent({ name: 'MenuSelect' }).vm.$emit('ready');
+    await expect(mocks.hooks.onConfirm?.()).rejects.toThrow('下发失败');
+    expect(mocks.close).not.toHaveBeenCalled();
+    expect(mocks.unlock).toHaveBeenCalledTimes(1);
+    await mocks.hooks.onConfirm?.();
+    expect(mocks.saveRole).toHaveBeenCalledTimes(2);
+    expect(mocks.close).toHaveBeenCalledTimes(1);
+    wrapper.unmount();
+  });
+
+  it('查看模式即使触发确认也不保存', async () => {
+    mocks.getData.mockReturnValue({ update: false, view: true });
+    mocks.getRole.mockResolvedValueOnce({ menuIds: [10], isPass: 0 });
+    const wrapper = mount(RoleDrawer);
+    await mocks.hooks.onOpenChange?.(true);
+    await flushPromises();
+    wrapper.findComponent({ name: 'MenuSelect' }).vm.$emit('ready');
+    await mocks.hooks.onConfirm?.();
+    expect(mocks.saveRole).not.toHaveBeenCalled();
+    wrapper.unmount();
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/roles/role-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/agent/roles/role-drawer.vue
new file mode 100644
index 0000000..e2cd465
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/roles/role-drawer.vue
@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep, getPopupContainer } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+import { confirmTemplateOverwrite } from '#/utils/role-template';
+
+import { useVbenForm } from '#/adapter/form';
+import { getAgentRoleViewApi, saveAgentRoleApi } from '#/api/agent';
+
+import MenuSelect from './menu-select.vue';
+
+const emit = defineEmits<{ reload: [] }>();
+
+interface DrawerProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+const menuIds = ref<number[]>([]);
+const showMenuSelect = ref(false);
+const refMenuSelect = ref<InstanceType<typeof MenuSelect> | null>(null);
+const canEditRole = ref(true);
+const roleIsPass = ref(0);
+const isTemplateRole = ref(false);
+const menuReady = ref(false);
+const saving = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'roleName',
+    label: '角色名称',
+    rules: z
+      .string()
+      .min(1, '角色名称不能为空')
+      .max(32, '角色名称最大长度32位'),
+  },
+  {
+    component: 'Input',
+    fieldName: 'roleKey',
+    help: '例如 agentUser、agentAdmin 等',
+    label: '角色权限字符',
+    rules: 'required',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      getPopupContainer,
+      options: [
+        { label: '正常', value: '0' },
+        { label: '停用', value: '1' },
+      ],
+    },
+    fieldName: 'status',
+    label: '角色状态',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'menuIds',
+    formItemClass: 'col-span-2',
+    label: '菜单权限',
+  },
+  {
+    component: 'Textarea',
+    componentProps: {
+      rows: 4,
+    },
+    fieldName: 'remark',
+    formItemClass: 'col-span-2',
+    label: '备注',
+  },
+];
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2 gap-x-4',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  centered: true,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      refMenuSelect.value?.clearData();
+      await formApi.resetForm();
+      menuIds.value = [];
+      showMenuSelect.value = false;
+      canEditRole.value = true;
+      roleIsPass.value = 0;
+      isTemplateRole.value = false;
+      menuReady.value = false;
+      return null;
+    }
+    menuReady.value = false;
+    modalApi.setState({ confirmDisabled: true, loading: true });
+    const { id, update, view } = modalApi.getData() as DrawerProps;
+    isUpdate.value = update;
+    isView.value = view;
+    try {
+      if (isUpdate.value || isView.value) {
+        const record = await getAgentRoleViewApi({ roleId: Number(id) });
+        roleIsPass.value = record.isPass ?? 0;
+        isTemplateRole.value = record.isTemplateRole ?? false;
+        canEditRole.value = !record.isDefaultRole && !record.sourceRoleId;
+        await formApi.setValues(record);
+        menuIds.value = [...record.menuIds];
+      } else {
+        roleIsPass.value = 0;
+        await formApi.resetForm();
+      }
+    } catch {
+      modalApi.setState({ confirmLoading: false, loading: false });
+      modalApi.close();
+      return;
+    }
+    showMenuSelect.value = true;
+    modalApi.setState({
+      confirmLoading: false,
+      loading: false,
+      showConfirmButton: !view && canEditRole.value,
+    });
+    formApi.setState({
+      commonConfig: {
+        componentProps: {
+          readonly: view,
+          'only-read': view,
+        },
+      },
+    });
+  },
+});
+
+async function handleConfirm() {
+  if (saving.value || isView.value) {
+    return;
+  }
+  if (!canEditRole.value) {
+    message.warning('不能修改本级机构绑定的默认角色权限');
+    return;
+  }
+  if (!menuReady.value || !refMenuSelect.value) {
+    message.warning('菜单权限尚未加载完成，请稍后再试');
+    return;
+  }
+  saving.value = true;
+  modalApi.lock();
+  try {
+    modalApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    if (!(await confirmTemplateOverwrite(isTemplateRole.value))) return;
+    const data = cloneDeep(await formApi.getValues());
+    const { id } = modalApi.getData() as DrawerProps;
+    if (isUpdate.value) {
+      data.roleId = Number(id);
+    }
+    data.menuIds = refMenuSelect.value.getData();
+    data.isPass = roleIsPass.value;
+    await saveAgentRoleApi(data);
+    message.success(
+      isTemplateRole.value
+        ? '模板已保存，覆盖下发已提交后台处理'
+        : isUpdate.value
+          ? '更新成功'
+          : '新增成功',
+    );
+    emit('reload');
+    await handleCancel();
+  } finally {
+    saving.value = false;
+    modalApi.unlock();
+    modalApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  refMenuSelect.value?.clearData();
+  modalApi.close();
+  menuIds.value = [];
+  showMenuSelect.value = false;
+  menuReady.value = false;
+  await formApi.resetForm();
+}
+
+function handleMenuReady() {
+  menuReady.value = true;
+  modalApi.setState({ confirmDisabled: !canEditRole.value || isView.value });
+}
+
+function handleMenuLoadError() {
+  menuReady.value = false;
+  modalApi.setState({ confirmDisabled: true });
+  message.error('菜单权限加载失败，请关闭后重试；未修改原有权限');
+}
+</script>
+
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[800px]">
+    <BasicForm>
+      <template #menuIds>
+        <div class="h-[600px] w-full">
+          <MenuSelect
+            v-if="showMenuSelect"
+            ref="refMenuSelect"
+            :disabled="isView || !canEditRole"
+            :menu-ids="menuIds"
+            @load-error="handleMenuLoadError"
+            @ready="handleMenuReady"
+          />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/structure/dept-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/agent/structure/dept-drawer.vue
new file mode 100644
index 0000000..18f3064
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/structure/dept-drawer.vue
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+import { md5 } from 'js-md5';
+
+import { useVbenForm } from '#/adapter/form';
+import { getAgentDeptViewApi, saveAgentDeptApi } from '#/api/agent';
+
+const emit = defineEmits<{ reload: [] }>();
+
+interface DrawerProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'deptId',
+  },
+  {
+    component: 'Input',
+    fieldName: 'deptName',
+    label: '企业名称',
+    rules: z.string().min(1, '企业名称不能为空').max(64, '企业名称最长 64 位'),
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      autocomplete: 'off',
+      name: 'enterprise-new-user-name',
+    },
+    fieldName: 'userName',
+    label: '登录账号',
+    rules: z.string().min(1, '登录账号不能为空').max(50, '登录账号最长 50 位'),
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => isUpdate.value,
+      triggerFields: ['deptId'],
+    },
+    fieldName: 'nickName',
+    label: '负责人',
+    rules: z.string().min(1, '负责人不能为空').max(32, '负责人最长 32 位'),
+  },
+  {
+    component: 'InputPassword',
+    componentProps: {
+      autocomplete: 'new-password',
+      name: 'enterprise-new-user-password',
+      placeholder: '请输入密码，长度 5 - 20 位',
+    },
+    dependencies: {
+      show: () => !isUpdate.value,
+      triggerFields: ['deptId'],
+    },
+    fieldName: 'password',
+    label: '密码',
+    rules: z.string().min(5, '密码长度为 5 - 20 位').max(20, '密码长度为 5 - 20 位'),
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => !isUpdate.value,
+      triggerFields: ['deptId'],
+    },
+    fieldName: 'phone',
+    label: '手机号码',
+    rules: z
+      .string()
+      .regex(/^1[3-9]\d{9}$/, { message: '请输入正确的手机号码' })
+      .optional()
+      .or(z.literal('')),
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => !isUpdate.value,
+      triggerFields: ['deptId'],
+    },
+    fieldName: 'email',
+    label: '邮箱',
+    rules: z.string().email({ message: '请输入正确的邮箱' }).optional().or(z.literal('')),
+  },
+  {
+    component: 'HctRegionSelect',
+    componentProps: {
+      maxLevel: 2,
+    },
+    fieldName: 'areaCode',
+    label: '组织所在地',
+    dependencies: {
+      show: () => !isUpdate.value,
+      triggerFields: ['deptId'],
+    },
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => !isUpdate.value,
+      triggerFields: ['deptId'],
+    },
+    fieldName: 'address',
+    label: '详细地址',
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => !isUpdate.value,
+      triggerFields: ['deptId'],
+    },
+    fieldName: 'creditCode',
+    label: '统一社会信用代码',
+    rules: z
+      .string()
+      .length(18, '统一社会信用代码长度必须为 18 位')
+      .regex(/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/, {
+        message: '请输入正确的统一社会信用代码',
+      })
+      .optional()
+      .or(z.literal('')),
+  },
+];
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  centered: true,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await resetState();
+      return null;
+    }
+    modalApi.setState({ confirmLoading: true, loading: true });
+    const { id, update, view } = modalApi.getData() as DrawerProps;
+    isUpdate.value = update;
+    isView.value = view;
+    await formApi.resetForm();
+
+    if (isUpdate.value || isView.value) {
+      const record = await getAgentDeptViewApi({ deptId: Number(id) });
+      await formApi.setValues({
+        ...record,
+      });
+    } else {
+      await formApi.setValues({
+        address: '',
+        areaCode: undefined,
+        creditCode: '',
+        deptId: undefined,
+        deptName: '',
+        email: '',
+        nickName: '',
+        password: '',
+        phone: '',
+        userName: '',
+      });
+    }
+
+    modalApi.setState({
+      confirmLoading: false,
+      loading: false,
+      showConfirmButton: !view,
+    });
+    formApi.setState({
+      commonConfig: {
+        componentProps: {
+          readonly: view,
+          'only-read': view,
+        },
+      },
+    });
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    data.deptType = 1;
+    data.status = '0';
+    if (isUpdate.value) {
+      delete data.password;
+    } else {
+      data.password = md5(data.password);
+    }
+    await saveAgentDeptApi(data);
+    message.success(isUpdate.value ? '更新成功' : '新增成功');
+    emit('reload');
+    await handleCancel();
+  } finally {
+    modalApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function resetState() {
+  await formApi.resetForm();
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await resetState();
+}
+</script>
+
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[640px]">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/structure/dept-reset-pwd-modal.vue b/admin-ui/vue/apps/web-antd/src/views/agent/structure/dept-reset-pwd-modal.vue
new file mode 100644
index 0000000..c8d4524
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/structure/dept-reset-pwd-modal.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useVbenModal, z } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+import { md5 } from 'js-md5';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  resetAgentDeptPasswordApi,
+  type AgentDept,
+} from '#/api/agent';
+import { Description, useDescription } from '#/components/description';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicModal, modalApi] = useVbenModal({
+  centered: true,
+  onCancel: handleCancel,
+  onConfirm: handleSubmit,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: [
+    { field: 'deptName', label: '企业名称' },
+    { field: 'userName', label: '登录账号' },
+    { field: 'nickName', label: '负责人' },
+  ],
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 90,
+  },
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'deptId',
+      label: '企业ID',
+      rules: 'required',
+    },
+    {
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入新的密码，密码长度为 5 - 20 位',
+      },
+      fieldName: 'password',
+      label: '新的密码',
+      rules: z.string().min(5, { message: '密码长度为 5 - 20 位' }).max(20, { message: '密码长度为 5 - 20 位' }),
+    },
+  ],
+  showDefaultActions: false,
+});
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = modalApi.getData() as { record: AgentDept };
+  setDescProps({ data: record }, true);
+  await formApi.setValues({ deptId: record.deptId });
+}
+
+async function handleSubmit() {
+  try {
+    modalApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = await formApi.getValues();
+    await resetAgentDeptPasswordApi({
+      deptId: data.deptId,
+      password: md5(data.password),
+    });
+    emit('reload');
+    await handleCancel();
+    message.success('密码重置成功');
+  } finally {
+    modalApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <BasicModal :close-on-click-modal="false" :fullscreen-button="false" title="重置密码">
+    <div class="flex flex-col gap-[12px]">
+      <Description @register="registerDescription" />
+      <BasicForm />
+    </div>
+  </BasicModal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/structure/enterprise-manage-modal.vue b/admin-ui/vue/apps/web-antd/src/views/agent/structure/enterprise-manage-modal.vue
new file mode 100644
index 0000000..a91eadd
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/structure/enterprise-manage-modal.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import {
+  getAgentDeptViewApi,
+  saveAgentDeptApi,
+  type AgentDept,
+} from '#/api/agent';
+import {
+  Edit as editAgentEnterpriseApi,
+  View as getAgentEnterpriseViewApi,
+} from '#/api/iotlcm/zAnother/tAgentEnterprise';
+
+interface ModalProps {
+  record: AgentDept;
+}
+
+const emit = defineEmits<{ reload: [] }>();
+
+const currentPage = ref<1 | 2>(1);
+const deptRecord = ref<AgentDept>();
+const currentDeptId = ref<number>();
+const unitSaving = ref(false);
+const realNameSaving = ref(false);
+
+const modalTitle = computed(() => {
+  return currentPage.value === 1 ? '企业管理 - 修改单位信息' : '企业管理 - 修改实名认证信息';
+});
+
+// 第一页：单位信息表单，保存到 sys_dept 表。
+const [UnitForm, unitFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'deptId',
+    },
+    {
+      component: 'Input',
+      fieldName: 'deptName',
+      label: '企业名称',
+      rules: z.string().min(1, '企业名称不能为空').max(64, '企业名称最长64位'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'phone',
+      label: '联系电话',
+      rules: z
+        .string()
+        .regex(/^1[3-9]\d{9}$/, { message: '请输入正确的手机号码' })
+        .optional()
+        .or(z.literal('')),
+    },
+    {
+      component: 'Input',
+      fieldName: 'email',
+      label: '邮箱',
+      rules: z.string().email({ message: '请输入正确的邮箱' }).optional().or(z.literal('')),
+    },
+    {
+      component: 'Input',
+      fieldName: 'creditCode',
+      label: '统一社会信用代码',
+      rules: z
+        .string()
+        .length(18, '统一社会信用代码长度必须为18位')
+        .regex(/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/, {
+          message: '请输入正确的统一社会信用代码',
+        })
+        .optional()
+        .or(z.literal('')),
+    },
+    {
+      component: 'HctRegionSelect',
+      componentProps: {
+        maxLevel: 2,
+      },
+      fieldName: 'areaCode',
+      label: '组织所在地',
+    },
+    {
+      component: 'Input',
+      fieldName: 'address',
+      label: '详细地址',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: false,
+        options: [
+          { label: '正常', value: '0' },
+          { label: '停用', value: '1' },
+        ],
+      },
+      fieldName: 'status',
+      label: '状态',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4 md:grid-cols-2',
+});
+
+// 第二页：实名认证信息表单，保存到 t_agent_enterprise 表。
+const [RealNameForm, realNameFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'deptId',
+    },
+    {
+      component: 'Input',
+      fieldName: 'fullName',
+      label: '单位全称',
+      rules: z.string().min(1, '单位全称不能为空'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'industry',
+      label: '行业',
+    },
+    {
+      component: 'Input',
+      fieldName: 'legalPersonName',
+      label: '法人姓名',
+      rules: z.string().min(1, '法人姓名不能为空'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'legalPersonIdCard',
+      label: '法人身份证号',
+      rules: z.string().length(18, '身份证号必须为18位'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'companyType',
+      label: '单位类型',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        valueFormat: 'YYYY-MM-DD',
+      },
+      fieldName: 'establishTime',
+      label: '成立时间',
+    },
+    {
+      component: 'Input',
+      fieldName: 'bankName',
+      label: '开户行名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'bankAccount',
+      label: '开户行账号',
+    },
+  ],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4 md:grid-cols-2',
+});
+
+const [Modal, modalApi] = useVbenModal({
+  centered: true,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await resetState();
+      return null;
+    }
+    await loadData();
+  },
+});
+
+async function loadData() {
+  try {
+    modalApi.setState({ loading: true });
+    currentPage.value = 1;
+    const { record } = modalApi.getData() as ModalProps;
+    const deptId = Number(record.deptId);
+    currentDeptId.value = deptId;
+
+    const deptInfo = await getAgentDeptViewApi({ deptId });
+    deptRecord.value = deptInfo;
+    await unitFormApi.setValues({
+      address: deptInfo.address || '',
+      areaCode: deptInfo.areaCode || undefined,
+      creditCode: deptInfo.creditCode || '',
+      deptId,
+      deptName: deptInfo.deptName || '',
+      email: deptInfo.email || '',
+      phone: deptInfo.phone || '',
+      status: deptInfo.status ? String(deptInfo.status) : '0',
+    });
+
+    const realNameInfo = await getAgentEnterpriseViewApi({ deptId });
+    await realNameFormApi.setValues({
+      bankAccount: realNameInfo?.bankAccount || '',
+      bankName: realNameInfo?.bankName || '',
+      companyType: realNameInfo?.companyType || '',
+      deptId,
+      establishTime: realNameInfo?.establishTime || '',
+      fullName: realNameInfo?.fullName || deptInfo.deptName || '',
+      id: realNameInfo?.id || undefined,
+      industry: realNameInfo?.industry || '',
+      legalPersonIdCard: realNameInfo?.legalPersonIdCard || '',
+      legalPersonName: realNameInfo?.legalPersonName || '',
+    });
+  } catch (error) {
+    console.error(error);
+    message.error('企业管理信息加载失败');
+  } finally {
+    modalApi.setState({ loading: false });
+  }
+}
+
+async function handleSaveUnitInfo() {
+  try {
+    unitSaving.value = true;
+    const { valid } = await unitFormApi.validate();
+    if (!valid) {
+      return;
+    }
+    const values = cloneDeep(await unitFormApi.getValues());
+    const deptId = currentDeptId.value;
+    if (!deptId) {
+      message.error('缺少企业ID');
+      return;
+    }
+    await saveAgentDeptApi({
+      ...deptRecord.value,
+      ...values,
+      deptId,
+      deptType: 1,
+      status: String(values.status || '0'),
+    });
+    message.success('单位信息保存成功');
+    emit('reload');
+    deptRecord.value = await getAgentDeptViewApi({ deptId });
+  } finally {
+    unitSaving.value = false;
+  }
+}
+
+async function handleSaveRealNameInfo() {
+  try {
+    realNameSaving.value = true;
+    const { valid } = await realNameFormApi.validate();
+    if (!valid) {
+      return;
+    }
+    const values = cloneDeep(await realNameFormApi.getValues()) as Recordable<any>;
+    const deptId = currentDeptId.value;
+    if (!deptId) {
+      message.error('缺少企业ID');
+      return;
+    }
+    await editAgentEnterpriseApi({
+      ...values,
+      deptId,
+      id: values.id || undefined,
+    });
+    message.success('实名认证信息保存成功');
+    await loadData();
+    currentPage.value = 2;
+  } finally {
+    realNameSaving.value = false;
+  }
+}
+
+function handleNextPage() {
+  currentPage.value = 2;
+}
+
+function handlePrevPage() {
+  currentPage.value = 1;
+}
+
+async function resetState() {
+  currentPage.value = 1;
+  currentDeptId.value = undefined;
+  deptRecord.value = undefined;
+  await unitFormApi.resetForm();
+  await realNameFormApi.resetForm();
+}
+</script>
+
+<template>
+  <Modal :footer="false" :title="modalTitle" class="w-[760px]">
+    <div class="mb-4 rounded-md bg-gray-50 px-4 py-3 text-sm text-gray-500">
+      第 {{ currentPage }} 页 / 共 2 页
+    </div>
+
+    <div v-show="currentPage === 1">
+      <UnitForm />
+      <div class="mt-5 flex justify-end gap-2">
+        <Button :loading="unitSaving" type="primary" @click="handleSaveUnitInfo">
+          确定
+        </Button>
+        <Button @click="handleNextPage">下一页</Button>
+      </div>
+    </div>
+
+    <div v-show="currentPage === 2">
+      <RealNameForm />
+      <div class="mt-5 flex justify-end gap-2">
+        <Button @click="handlePrevPage">上一页</Button>
+        <Button :loading="realNameSaving" type="primary" @click="handleSaveRealNameInfo">
+          确定
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/structure/index.vue b/admin-ui/vue/apps/web-antd/src/views/agent/structure/index.vue
new file mode 100644
index 0000000..c1efd42
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/structure/index.vue
@@ -0,0 +1,247 @@
+<script lang="ts" setup>
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AgentDept } from '#/api/agent';
+
+import { h } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiExport, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Popconfirm, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteAgentDeptApi,
+  exportAgentDeptApi,
+  getAgentDeptListApi,
+} from '#/api/agent';
+import { commonDownloadExcel, getExportColumns } from '#/utils/file/download';
+
+import deptDrawer from './dept-drawer.vue';
+import deptResetPwdModal from './dept-reset-pwd-modal.vue';
+import enterpriseManageModal from './enterprise-manage-modal.vue';
+
+// 企业客户列表：只展示企业客户（deptType = 1）的筛选条件。
+const formOptions: VbenFormProps = {
+  collapsed: true,
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'deptName',
+      label: '企业名称',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: '正常', value: '0' },
+          { label: '停用', value: '1' },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'status',
+      label: '状态',
+    },
+  ],
+  showCollapseButton: true,
+  submitOnChange: true,
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<AgentDept> = {
+  align: 'center',
+  // 企业客户列表：表格展示字段与右侧操作列配置。
+  columns: [
+    { field: 'deptName', title: '企业名称', minWidth: 180 },
+    { field: 'userName', title: '登录账号', minWidth: 140 },
+    { field: 'nickName', title: '负责人', minWidth: 140 },
+    { field: 'phone', title: '联系电话', minWidth: 120 },
+    { field: 'email', title: '联系人邮箱', minWidth: 160 },
+    { field: 'areaCode', title: '组织所在地', minWidth: 140 },
+    { field: 'address', title: '详细地址', minWidth: 180 },
+    {
+      field: 'createdAt',
+      formatter: 'formatDateTime',
+      title: '创建时间',
+      width: 160,
+    },
+    { field: 'status', slots: { default: 'status' }, title: '状态', width: 80 },
+    { title: '操作', width: 260, slots: { default: 'action' }, fixed: 'right' },
+  ],
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: true,
+    pageSize: 20,
+    pageSizes: [20, 50, 100, 200],
+  },
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await getAgentDeptListApi({
+          ...formValues,
+          deptType: 1,
+          page: page.currentPage,
+          pageSize: page.pageSize,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: false,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [DeptDrawer, deptDrawerApi] = useVbenModal({
+  centered: true,
+  connectedComponent: deptDrawer,
+});
+
+const [DeptResetPwdModal, deptResetPwdModalApi] = useVbenModal({
+  centered: true,
+  connectedComponent: deptResetPwdModal,
+});
+
+const [EnterpriseManageModal, enterpriseManageModalApi] = useVbenModal({
+  centered: true,
+  connectedComponent: enterpriseManageModal,
+});
+
+async function handleExport() {
+  const columns = getExportColumns(gridApi);
+  if (columns.length === 0) {
+    message.warning('没有可导出的显示列，请调整列表列设置');
+    return;
+  }
+  await commonDownloadExcel(exportAgentDeptApi, '企业客户', {
+    ...(await gridApi.formApi.getValues()),
+    exportColumnsJson: JSON.stringify(columns),
+  });
+}
+
+function handleAdd() {
+  deptDrawerApi.setData({ update: false, view: false });
+  deptDrawerApi.open();
+}
+
+function handleEdit(row: AgentDept) {
+  deptDrawerApi.setData({ id: row.deptId, update: true, view: false });
+  deptDrawerApi.open();
+}
+
+function handleResetPassword(row: AgentDept) {
+  deptResetPwdModalApi.setData({ record: row });
+  deptResetPwdModalApi.open();
+}
+
+function handleEnterpriseManage(row: AgentDept) {
+  enterpriseManageModalApi.setData({ record: row });
+  enterpriseManageModalApi.open();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+async function handleDelete(row: AgentDept) {
+  await deleteAgentDeptApi({ deptId: row.deptId });
+  message.success('删除成功');
+  await gridApi.reload();
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="企业客户管理">
+      <template #toolbar-tools>
+        <Button
+          v-access:code="'cpm:agent:dept:export'"
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+        >
+          导出
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleAdd"
+          v-access:code="'cpm:agent:dept:edit'"
+        >
+          新增
+        </Button>
+      </template>
+      <template #status="{ row }">
+        <Tag :color="String(row.status) === '0' ? 'green' : 'red'">
+          {{ String(row.status) === '0' ? '正常' : '停用' }}
+        </Tag>
+      </template>
+      <template #action="{ row }">
+        <!-- 企业客户列表操作列：修改/重置密码/删除/企业管理 -->
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:agent:dept:edit'"
+          >
+            修改
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleResetPassword(row)"
+            v-access:code="'cpm:agent:dept:edit'"
+          >
+            重置密码
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEnterpriseManage(row)"
+            v-access:code="'cpm:agent:dept:edit'"
+          >
+            企业管理
+          </Button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确定删除吗？"
+            @confirm="handleDelete(row)"
+          >
+            <Button
+              class="mr-2 border-none p-0"
+              :block="false"
+              type="link"
+              danger
+              v-access:code="'cpm:agent:dept:remove'"
+            >
+              删除
+            </Button>
+          </Popconfirm>
+        </div>
+      </template>
+    </Grid>
+    <DeptDrawer @reload="handleRefresh" />
+    <DeptResetPwdModal @reload="handleRefresh" />
+    <EnterpriseManageModal @reload="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/structure/pagination.test.ts b/admin-ui/vue/apps/web-antd/src/views/agent/structure/pagination.test.ts
new file mode 100644
index 0000000..3d36f4c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/structure/pagination.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { AgentDept } from '#/api/agent';
+
+import { collectEnterpriseCustomers } from './pagination';
+
+describe('enterprise customer export pagination', () => {
+  it('rejects changes to totals during export', async () => {
+    const fetchPage = vi
+      .fn()
+      .mockResolvedValueOnce({ items: [], total: 501 })
+      .mockResolvedValueOnce({ items: [], total: 500 });
+    await expect(collectEnterpriseCustomers(fetchPage, {})).rejects.toThrow(
+      '发生变化',
+    );
+  });
+
+  it('rejects missing or duplicate rows', async () => {
+    const missing = vi.fn().mockResolvedValue({ items: [], total: 1 });
+    await expect(collectEnterpriseCustomers(missing, {})).rejects.toThrow(
+      '不完整',
+    );
+    const duplicate = vi
+      .fn()
+      .mockResolvedValue({ items: [{ deptId: 1 }, { deptId: 1 }], total: 2 });
+    await expect(collectEnterpriseCustomers(duplicate, {})).rejects.toThrow(
+      '不完整',
+    );
+  });
+  it('keeps filters and fetches all pages in order', async () => {
+    const rows = Array.from(
+      { length: 1001 },
+      (_, index) => ({ deptId: index + 1 }) as AgentDept,
+    );
+    const fetchPage = vi
+      .fn()
+      .mockImplementation(async ({ page, pageSize }) => ({
+        items: rows.slice((page - 1) * pageSize, page * pageSize),
+        total: rows.length,
+      }));
+    const result = await collectEnterpriseCustomers(fetchPage, {
+      deptName: '客户',
+      status: '0',
+      page: 9,
+      pageSize: 20,
+    });
+    expect(result.items).toEqual(rows);
+    expect(fetchPage.mock.calls.map(([params]) => params)).toEqual(
+      [1, 2, 3].map((page) => ({
+        deptName: '客户',
+        status: '0',
+        deptType: 1,
+        page,
+        pageSize: 500,
+      })),
+    );
+  });
+
+  it('returns an empty export without extra requests', async () => {
+    const fetchPage = vi.fn().mockResolvedValue({ items: [], total: 0 });
+    await expect(collectEnterpriseCustomers(fetchPage, {})).resolves.toEqual({
+      items: [],
+    });
+    expect(fetchPage).toHaveBeenCalledTimes(1);
+  });
+
+  it('rejects oversized exports rather than returning partial data', async () => {
+    const fetchPage = vi.fn().mockResolvedValue({ items: [], total: 10001 });
+    await expect(collectEnterpriseCustomers(fetchPage, {})).rejects.toThrow(
+      '一万',
+    );
+    expect(fetchPage).toHaveBeenCalledTimes(1);
+  });
+
+  it('propagates a later page failure without returning partial data', async () => {
+    const fetchPage = vi
+      .fn()
+      .mockResolvedValueOnce({ items: [], total: 501 })
+      .mockRejectedValueOnce(new Error('network failed'));
+    await expect(collectEnterpriseCustomers(fetchPage, {})).rejects.toThrow(
+      'network failed',
+    );
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/structure/pagination.ts b/admin-ui/vue/apps/web-antd/src/views/agent/structure/pagination.ts
new file mode 100644
index 0000000..2a521aa
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/structure/pagination.ts
@@ -0,0 +1,29 @@
+import type { AgentDept, AgentDeptListParams } from '#/api/agent';
+
+export async function collectEnterpriseCustomers(
+  fetchPage: (
+    params: AgentDeptListParams,
+  ) => Promise<{ items: AgentDept[]; total: number }>,
+  filters: AgentDeptListParams,
+) {
+  const pageSize = 500;
+  const first = await fetchPage({ ...filters, deptType: 1, page: 1, pageSize });
+  if (first.total > 10000) {
+    throw new Error('导出最多支持一万家企业，请缩小筛选范围后重试');
+  }
+  const items = [...first.items];
+  for (let page = 2; page <= Math.ceil(first.total / pageSize); page++) {
+    const result = await fetchPage({ ...filters, deptType: 1, page, pageSize });
+    if (result.total !== first.total) {
+      throw new Error('导出期间企业数据发生变化，请重新导出');
+    }
+    items.push(...result.items);
+  }
+  if (
+    items.length !== first.total ||
+    new Set(items.map((item) => item.deptId)).size !== items.length
+  ) {
+    throw new Error('导出数据不完整或发生变化，请重新导出');
+  }
+  return { items };
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/edit.vue b/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/edit.vue
new file mode 100644
index 0000000..bc3ceb9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/edit.vue
@@ -0,0 +1,178 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep, getPopupContainer } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/agent/tApiGroup';
+import { List as ApiResourceList } from '#/api/agent/tApiResource';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+function getListItems(res: any) {
+  if (Array.isArray(res)) {
+    return res;
+  }
+  if (Array.isArray(res?.items)) {
+    return res.items;
+  }
+  if (Array.isArray(res?.data?.items)) {
+    return res.data.items;
+  }
+  if (Array.isArray(res?.data)) {
+    return res.data;
+  }
+  return [];
+}
+
+function getApiOptionLabel(item: any) {
+  const name = item.apiName || item.apiCode || '-';
+  const methodMap: Record<string, string> = {
+    1: 'POST',
+    2: 'PUT',
+    3: 'DELETE',
+    4: 'GET',
+  };
+  const method = methodMap[String(item.method)] || item.method || '-';
+  const path = item.path || '-';
+  return `${name}（${method} ${path}）`;
+}
+
+async function setupApiOptions() {
+  const res = await ApiResourceList({ page: 1, pageSize: 1000 });
+  const treeData = getListItems(res)
+    .map((item: any) => ({
+      key: String(item.id),
+      label: getApiOptionLabel(item),
+      value: String(item.id),
+      title: getApiOptionLabel(item),
+    }))
+    .filter((item: any) => item.value && item.value !== 'undefined');
+
+  formApi.updateSchema([
+    {
+      componentProps: {
+        allowClear: true,
+        getPopupContainer,
+        maxTagCount: 'responsive',
+        placeholder: treeData.length > 0 ? '请选择API接口' : '暂无可选API接口',
+        showSearch: true,
+        treeCheckable: true,
+        treeCheckStrictly: false,
+        treeData,
+        treeNodeFilterProp: 'label',
+      },
+      fieldName: 'apiIds',
+    },
+  ]);
+}
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    await setupApiOptions();
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      record.apiIds = getListItems(record.apiIds).map(String);
+      await formApi.setValues(record);
+    } else {
+      await formApi.resetForm();
+      await formApi.setFieldValue('apiIds', []);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    data.apiIds = getListItems(data.apiIds).map(Number).filter(Number.isFinite);
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/index.vue b/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/index.vue
new file mode 100644
index 0000000..5e984c2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/index.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  const { hasAccessByCodes } = useAccess();
+  import {
+    commonDownloadExcel,
+    getExportColumns,
+  } from '#/utils/file/download';
+  import { List, Export, Delete, Status } from '#/api/agent/tApiGroup';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '开放接口权限组表',{
+  exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+  ...formValues,
+  page: 1,
+  });
+  }
+  async function handleStatusChange(row: RowType) {
+  await Status({ id: row.id, status: row.status });
+  await message.success("操作成功")
+  await handleRefresh();
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="开放接口权限组表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:agent:tApiGroup:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:agent:tApiGroup:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:agent:tApiGroup:export'">
+          导出
+        </Button>
+      </template>
+      <template #status="{ row }">
+        <Switch
+          v-model:checked="row.status" :checkedValue="'0'" :unCheckedValue="'1'"
+          @change="handleStatusChange(row)"
+           :disabled="!hasAccessByCodes(['cpm:gen:tApiGroup:status'])"
+        />
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:agent:tApiGroup:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:agent:tApiGroup:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:agent:tApiGroup:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/model.tsx b/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/model.tsx
new file mode 100644
index 0000000..d9e5e5e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/model.tsx
@@ -0,0 +1,211 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderDict, renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+
+import { getDictOptions } from '#/utils/dict';
+import DictEnum from '#/constants/DictEnum';
+import FormOptions from '#/constants/FormOption';
+
+export class State {
+  public id = 0; // 主键ID
+  public groupName = ''; // 权限组名称
+  public groupCode = ''; // 权限组编码
+  public status = 0; // 状态：0启用，1停用
+  public apiIds: number[] = []; // API接口资源ID列表
+  public remark = ''; // 备注
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+				fieldName: 'groupName',
+				component: 'Input',
+				label: '权限组名称',
+				componentProps: {
+					placeholder: '请输入权限组名称',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {    
+			fieldName: 'status',    
+			component: 'Select',    
+			label: '状态',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择状态',    
+				options: getDictOptions(DictEnum.GLOBAL_ENABLED),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			
+			formItemClass: 'col-span-1',
+		},];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '权限组名称',
+    field: 'groupName',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '权限组编码',
+    field: 'groupCode',
+    align: 'left',
+    width: -1,
+ },
+ {    
+				title: '状态',    field: 'status',
+    params: { dictType: DictEnum.GLOBAL_ENABLED },    align: 'left',    width: -1,
+				slots: {
+      				default: ({ row }) => {
+						return renderDict(row.status, DictEnum.GLOBAL_ENABLED);
+					}
+				},
+			},
+			  
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  groupName: string;
+  groupCode: string;
+  status: number;
+  apiIds: number[];
+  remark: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'groupName',  label: '权限组名称'},
+  {  field: 'groupCode',  label: '权限组编码'},
+  {
+				field: 'status',
+				label: '状态：0启用，1停用',
+				render(row: any) {
+					return renderDict(row.status, DictEnum.CURRENT_STATUS);
+				},
+			},
+			  {  field: 'remark',  label: '备注'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+					fieldName: 'id',
+					component: 'Input',
+					label: '主键ID',
+					dependencies: {   show: () => false,    triggerFields: [''],   },
+					componentProps: {
+						placeholder: '',
+						onUpdateValue: (e: any) => {
+							console.log(e);
+						},   
+					},
+					formItemClass: 'col-span-1',
+				},  {
+				fieldName: 'groupName',
+				component: 'Input',
+				label: '权限组名称',
+				componentProps: {
+					placeholder: '请输入权限组名称',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'groupCode',
+				component: 'Input',
+				label: '权限组编码',
+				componentProps: {
+					placeholder: '请输入权限组编码',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {    
+		fieldName: 'status',    
+		component: 'Switch',    
+		label: '状态',    
+		defaultValue: 0,    
+		componentProps: FormOptions.Component.SwitchEnabled(),    
+	},
+		  {
+				fieldName: 'apiIds',
+				component: 'TreeSelect',
+				label: 'API接口',
+				componentProps: {
+					allowClear: true,
+					getPopupContainer,
+					maxTagCount: 'responsive',
+					placeholder: '请选择API接口',
+					showSearch: true,
+					treeCheckable: true,
+					treeCheckStrictly: false,
+					treeData: [],
+					treeNodeFilterProp: 'label',
+				},
+				rules:null,
+				formItemClass: 'col-span-1',
+			},
+		  {
+				fieldName: 'remark',
+				component: 'Input',
+				label: '备注',
+				componentProps: {
+					placeholder: '请输入备注',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},];
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/view.vue b/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/view.vue
new file mode 100644
index 0000000..2d1c0ee
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/tApiGroup/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/agent/tApiGroup';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/edit.vue b/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/edit.vue
new file mode 100644
index 0000000..e16c5f1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/edit.vue
@@ -0,0 +1,115 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/agent/tApiResource';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      console.log('record:', record);
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/index.vue b/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/index.vue
new file mode 100644
index 0000000..369d2a0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/index.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  const { hasAccessByCodes } = useAccess();
+  import {
+    commonDownloadExcel,
+    getExportColumns,
+  } from '#/utils/file/download';
+  import { List, Export, Delete, Status } from '#/api/agent/tApiResource';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '开放接口资源表',{
+  exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+  ...formValues,
+  page: 1,
+  });
+  }
+  async function handleStatusChange(row: RowType) {
+  await Status({ id: row.id, status: row.status });
+  await message.success("操作成功")
+  await handleRefresh();
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="开放接口资源表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:agent:tApiResource:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:agent:tApiResource:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:agent:tApiResource:export'">
+          导出
+        </Button>
+      </template>
+      <template #status="{ row }">
+        <Switch
+          v-model:checked="row.status" :checkedValue="'0'" :unCheckedValue="'1'"
+          @change="handleStatusChange(row)"
+           :disabled="!hasAccessByCodes(['cpm:gen:tApiResource:status'])"
+        />
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:agent:tApiResource:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:agent:tApiResource:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:agent:tApiResource:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/model.tsx b/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/model.tsx
new file mode 100644
index 0000000..7adeedf
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/model.tsx
@@ -0,0 +1,274 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderDict, renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+import DictEnum from '#/constants/DictEnum';
+import FormOptions from '#/constants/FormOption';
+
+export class State {
+  public id = 0; // 主键ID
+  public apiName = ''; // 接口名称
+  public apiCode = ''; // 接口权限标识
+  public method = ''; // 请求方法：GET/POST/PUT/DELETE
+  public path = ''; // 接口路径
+  public status = 0; // 状态：0启用，1停用
+  public version = ''; // 接口版本
+  public remark = ''; // 备注
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+				fieldName: 'apiName',
+				component: 'Input',
+				label: '接口名称',
+				componentProps: {
+					placeholder: '请输入接口名称',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {    
+			fieldName: 'status',    
+			component: 'Select',    
+			label: '状态',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择状态：0启用，1停用',    
+				options: getDictOptions(DictEnum.GLOBAL_ENABLED),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			formItemClass: 'col-span-1',
+		},
+		 {
+				fieldName: 'version',
+				component: 'Input',
+				label: '接口版本',
+				componentProps: {
+					placeholder: '请输入接口版本',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},
+		];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  
+  {
+    title: '接口名称',
+    field: 'apiName',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '接口权限标识',
+    field: 'apiCode',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '请求方法',
+    field: 'method',
+    params: { dictType: DictEnum.T_METHOD },
+    align: 'left',
+    width: -1,
+		slots: {
+      				default: ({ row }) => {
+						return renderDict(row.method, DictEnum.T_METHOD);
+					}
+				},	
+ },
+  {
+    title: '接口路径',
+    field: 'path',
+    align: 'left',
+    width: -1,
+ },
+ {    
+	title: '状态',    field: 'status',
+    params: { dictType: DictEnum.GLOBAL_ENABLED },    align: 'left',    width: -1,
+	slots: {
+		default: ({ row }) => {
+			return renderDict(row.status, DictEnum.GLOBAL_ENABLED);
+		}
+	},
+},
+	{
+    title: '接口版本',
+    field: 'version',
+    align: 'left',
+    width: -1,
+ },
+ 
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  apiName: string;
+  apiCode: string;
+  method: string;
+  path: string;
+  status: number;
+  version: string;
+  remark: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'apiName',  label: '接口名称'},
+  {  field: 'apiCode',  label: '接口权限标识'},
+  {  field: 'method',  label: '请求方法：GET/POST/PUT/DELETE'},
+  {  field: 'path',  label: '接口路径'},
+  {
+				field: 'status',
+				label: '状态',
+				render(row: any) {
+					return renderDict(row.status, DictEnum.GLOBAL_ENABLED);
+				},
+			},
+			  {  field: 'version',  label: '接口版本'},
+  {  field: 'remark',  label: '备注'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+			fieldName: 'id',
+			component: 'Input',
+			label: '主键ID',
+			dependencies: {   show: () => false,    triggerFields: [''],   },
+			componentProps: {
+				placeholder: '',
+				onUpdateValue: (e: any) => {
+					console.log(e);
+				},   
+			},
+			formItemClass: 'col-span-1',
+		},  {
+		fieldName: 'apiName',
+		component: 'Input',
+		label: '接口名称',
+		componentProps: {
+			placeholder: '请输入接口名称',
+			onUpdateValue: (e: any) => {
+				console.log(e);
+			},   
+		},  
+		rules:'required',
+		formItemClass: 'col-span-1',
+	},  {
+		fieldName: 'apiCode',
+		component: 'Input',
+		label: '接口权限标识',
+		componentProps: {
+			placeholder: '请输入接口权限标识',
+			onUpdateValue: (e: any) => {
+				console.log(e);
+			},   
+		},  
+		rules:'required',
+		formItemClass: 'col-span-1',
+	},  {
+		fieldName: 'method',
+		component: 'Select',
+		label: '请求方法',
+		componentProps: {
+			placeholder: '请选择请求方法',
+			options: getDictOptions(DictEnum.T_METHOD ),
+			onUpdateValue: (e: any) => {
+				console.log(e);
+			},   
+		},  
+		rules:'required',
+		formItemClass: 'col-span-1',
+	},  {
+		fieldName: 'path',
+		component: 'Input',
+		label: '接口路径',
+		componentProps: {
+			placeholder: '请输入接口路径',
+			onUpdateValue: (e: any) => {
+				console.log(e);
+			},   
+		},  
+		rules:'required',
+		formItemClass: 'col-span-1',
+	},  
+	{    
+		fieldName: 'status',    
+		component: 'Switch',    
+		label: '状态',    
+		defaultValue: 0,    
+		componentProps: FormOptions.Component.SwitchEnabled(),    
+	},
+	{
+		fieldName: 'version',
+		component: 'Input',
+		label: '接口版本',
+		componentProps: {
+			placeholder: '请输入接口版本',
+			onUpdateValue: (e: any) => {
+				console.log(e);
+			},   
+		},  
+		rules:'required',
+		formItemClass: 'col-span-1',
+	},  {
+		fieldName: 'remark',
+		component: 'Input',
+		label: '备注',
+		componentProps: {
+			placeholder: '请输入备注',
+			onUpdateValue: (e: any) => {
+				console.log(e);
+			},   
+		},  
+		rules:null,
+		formItemClass: 'col-span-1',
+	}, ];
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/view.vue b/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/view.vue
new file mode 100644
index 0000000..8b5a880
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/tApiResource/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/agent/tApiResource';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/users/index.vue b/admin-ui/vue/apps/web-antd/src/views/agent/users/index.vue
new file mode 100644
index 0000000..7da162a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/users/index.vue
@@ -0,0 +1,293 @@
+<script lang="ts" setup>
+import type { DeepPartial } from '@vben/types';
+
+import type { VbenFormProps } from '#/adapter/form';
+import type {
+  VxeGridListeners,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { AgentUser } from '#/api/agent';
+
+import { h, ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteAgentUserApi,
+  exportAgentUserApi,
+  getAgentUserListApi,
+} from '#/api/agent';
+import { commonDownloadExcel, getExportColumns } from '#/utils/file/download';
+
+import userDrawer from './user-drawer.vue';
+import userResetPwdModal from './user-reset-pwd-modal.vue';
+
+const checkboxChecked = ref(false);
+
+const formOptions: VbenFormProps = {
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'userName',
+      label: '用户名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickName',
+      label: '用户昵称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'phonenumber',
+      label: '联系电话',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: '正常', value: '0' },
+          { label: '停用', value: '1' },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'status',
+      label: '状态',
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'createdAt',
+      label: '创建时间',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'YYYY-MM-DD',
+      },
+    },
+  ],
+  showCollapseButton: true,
+  submitOnChange: true,
+  submitOnEnter: false,
+};
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const gridOptions: VxeTableGridOptions<AgentUser> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 40 },
+    { field: 'userName', title: '用户名称' },
+    { field: 'nickName', title: '用户昵称' },
+    {
+      field: 'roles',
+      slots: { default: 'roles' },
+      title: '角色',
+      minWidth: 160,
+    },
+    { field: 'phonenumber', title: '联系电话' },
+    { field: 'email', title: '邮箱', minWidth: 160 },
+    {
+      field: 'status',
+      slots: { default: 'status' },
+      title: '状态',
+      width: 100,
+    },
+    { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' },
+    { title: '操作', width: 190, slots: { default: 'action' } },
+  ],
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await getAgentUserListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: false,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const [Grid, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [UserDrawer, userDrawerApi] = useVbenModal({
+  centered: true,
+  connectedComponent: userDrawer,
+});
+
+const [UserResetPwdModal, userResetPwdModalApi] = useVbenModal({
+  centered: true,
+  connectedComponent: userResetPwdModal,
+});
+
+async function handleExport() {
+  const columns = getExportColumns(tableApi);
+  if (columns.length === 0) {
+    message.warning('没有可导出的显示列，请调整列表列设置');
+    return;
+  }
+  await commonDownloadExcel(exportAgentUserApi, '用户管理', {
+    ...(await tableApi.formApi.getValues()),
+    exportColumnsJson: JSON.stringify(columns),
+  });
+}
+
+function handleAdd() {
+  userDrawerApi.setData({ update: false, view: false });
+  userDrawerApi.open();
+}
+
+function handleEdit(row: AgentUser) {
+  userDrawerApi.setData({ id: row.userId, update: true, view: false });
+  userDrawerApi.open();
+}
+
+async function handleDelete(row: AgentUser) {
+  await deleteAgentUserApi({ userId: row.userId });
+  message.success('删除成功');
+  await tableApi.query();
+}
+
+function handleCheckboxChange() {
+  checkboxChecked.value = tableApi.grid.getCheckboxRecords().length > 0;
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: AgentUser) => row.userId);
+  Modal.confirm({
+    centered: true,
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的 ${ids.length} 条记录吗？`,
+    onOk: async () => {
+      await deleteAgentUserApi({ userIds: ids });
+      message.success('删除成功');
+      await tableApi.query();
+    },
+  });
+}
+
+function handleResetPassword(row: AgentUser) {
+  userResetPwdModalApi.setData({ record: row });
+  userResetPwdModalApi.open();
+}
+
+tableApi.query();
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="用户列表">
+      <template #toolbar-tools>
+        <Button
+          v-access:code="'cpm:agent:user:export'"
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+        >
+          导出
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleAdd"
+          v-access:code="'cpm:agent:user:add'"
+        >
+          新增
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :disabled="!checkboxChecked"
+          :icon="h(MdiDelete)"
+          @click="handleMultiDelete"
+          v-access:code="'cpm:agent:user:remove'"
+        >
+          删除
+        </Button>
+      </template>
+      <template #roles="{ row }">
+        {{
+          row.roles
+            ?.map((role) => role.roleName)
+            .filter(Boolean)
+            .join('、') || '-'
+        }}
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status === '0' ? 'green' : 'red'">
+          {{ row.status === '0' ? '正常' : '停用' }}
+        </Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:agent:user:edit'"
+          >
+            修改
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleResetPassword(row)"
+            v-access:code="'cpm:agent:user:resetPwd'"
+          >
+            重置密码
+          </Button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确定删除吗？"
+            @confirm="handleDelete(row)"
+          >
+            <Button
+              class="mr-2 border-none p-0"
+              :block="false"
+              type="link"
+              danger
+              v-access:code="'cpm:agent:user:remove'"
+            >
+              删除
+            </Button>
+          </Popconfirm>
+        </div>
+      </template>
+    </Grid>
+    <UserDrawer @reload="tableApi.query()" />
+    <UserResetPwdModal @reload="tableApi.query()" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/users/user-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/agent/users/user-drawer.vue
new file mode 100644
index 0000000..a6cb524
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/users/user-drawer.vue
@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import type { VbenFormSchema } from '#/adapter/form';
+import type { AgentRole } from '#/api/agent';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep, getPopupContainer } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+import { md5 } from 'js-md5';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  addAgentUserApi,
+  getAgentRoleListApi,
+  getAgentUserViewApi,
+  updateAgentUserApi,
+} from '#/api/agent';
+
+const emit = defineEmits<{ reload: [] }>();
+
+interface DrawerProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'userId',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      autocomplete: 'off',
+      name: 'agent-new-user-name',
+    },
+    fieldName: 'userName',
+    label: '用户名称',
+    rules: z
+      .string()
+      .min(1, '用户名称不能为空')
+      .max(32, '用户名称最大长度32位'),
+  },
+  {
+    component: 'InputPassword',
+    componentProps: {
+      autocomplete: 'new-password',
+      name: 'agent-new-user-password',
+    },
+    fieldName: 'password',
+    label: '用户密码',
+    rules: z
+      .string()
+      .min(5, '密码长度为 5 - 20 位')
+      .max(20, '密码长度为 5 - 20 位')
+      .optional()
+      .or(z.literal('')),
+  },
+  {
+    component: 'Input',
+    fieldName: 'nickName',
+    label: '用户昵称',
+    rules: z
+      .string()
+      .min(1, '用户昵称不能为空')
+      .max(32, '用户昵称最大长度32位'),
+  },
+  {
+    component: 'Input',
+    fieldName: 'phonenumber',
+    label: '联系电话',
+    rules: z
+      .string()
+      .regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码')
+      .optional()
+      .or(z.literal('')),
+  },
+  {
+    component: 'Input',
+    fieldName: 'email',
+    label: '邮箱',
+    rules: z.string().email('请输入正确的邮箱').optional().or(z.literal('')),
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      optionType: 'button',
+      options: [
+        { label: '男', value: '0' },
+        { label: '女', value: '1' },
+        { label: '未知', value: '2' },
+      ],
+    },
+    fieldName: 'sex',
+    formItemClass: 'col-span-2 lg:col-span-1',
+    label: '性别',
+    defaultValue: '2',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      optionType: 'button',
+      options: [
+        { label: '正常', value: '0' },
+        { label: '停用', value: '1' },
+      ],
+    },
+    fieldName: 'status',
+    formItemClass: 'col-span-2 lg:col-span-1',
+    label: '状态',
+    defaultValue: '0',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      mode: 'multiple',
+      optionFilterProp: 'title',
+      optionLabelProp: 'title',
+    },
+    fieldName: 'roleIds',
+    label: '角色',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-baseline',
+    label: '备注',
+  },
+];
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+function toNumberList(values: Array<number | string | undefined>) {
+  return values.map(Number).filter((value) => Number.isFinite(value));
+}
+
+function roleOptionLabel(role: Partial<AgentRole>) {
+  return role.roleName || '-';
+}
+
+async function setupOptions() {
+  const roleRes = await getAgentRoleListApi();
+  const roles = (roleRes.items || []).filter((role) => role.isPass !== 1);
+  formApi.updateSchema([
+    {
+      componentProps: {
+        getPopupContainer,
+        mode: 'multiple',
+        optionFilterProp: 'title',
+        optionLabelProp: 'title',
+        options: roles.map((role) => ({
+          label: roleOptionLabel(role),
+          title: roleOptionLabel(role),
+          value: Number(role.roleId),
+        })),
+        placeholder: roles.length > 0 ? '请选择' : '暂无可选角色',
+      },
+      fieldName: 'roleIds',
+    },
+  ]);
+}
+
+const [BasicModal, modalApi] = useVbenModal({
+  centered: true,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.setState({ confirmLoading: true, loading: true });
+    const { id, update, view } = modalApi.getData() as DrawerProps;
+    isUpdate.value = update;
+    isView.value = view;
+    formApi.updateSchema([
+      { componentProps: { disabled: isUpdate.value }, fieldName: 'userName' },
+      {
+        dependencies: {
+          show: () => !isUpdate.value,
+          triggerFields: ['userId'],
+        },
+        fieldName: 'password',
+      },
+    ]);
+    if (isUpdate.value || isView.value) {
+      const user = await getAgentUserViewApi({ userId: Number(id) });
+      const roleIds = toNumberList(
+        user.roles?.map((item) => item.roleId) || [],
+      );
+      await setupOptions();
+      await formApi.setValues(user);
+      await formApi.setFieldValue('roleIds', roleIds);
+    } else {
+      await setupOptions();
+      await formApi.resetForm();
+      await formApi.setValues({
+        email: '',
+        nickName: '',
+        password: '',
+        phonenumber: '',
+        remark: '',
+        roleIds: [],
+        sex: '2',
+        status: '0',
+        userId: undefined,
+        userName: '',
+      });
+    }
+    modalApi.setState({
+      confirmLoading: false,
+      loading: false,
+      showConfirmButton: !view,
+    });
+    formApi.setState({
+      commonConfig: {
+        componentProps: {
+          readonly: view,
+          'only-read': view,
+        },
+      },
+    });
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    delete data.deptId;
+    if (!isUpdate.value && !data.password) {
+      message.warning('新增用户需要填写初始密码');
+      return;
+    }
+    if (!data.roleIds || data.roleIds.length === 0) {
+      message.warning('请选择角色');
+      return;
+    }
+    if (data.password) {
+      data.password = md5(data.password);
+    }
+    if (isUpdate.value) {
+      await updateAgentUserApi(data);
+      message.success('更新成功');
+    } else {
+      await addAgentUserApi(data);
+      message.success('新增成功');
+    }
+    emit('reload');
+    await handleCancel();
+  } finally {
+    modalApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm />
+  </BasicModal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/agent/users/user-reset-pwd-modal.vue b/admin-ui/vue/apps/web-antd/src/views/agent/users/user-reset-pwd-modal.vue
new file mode 100644
index 0000000..5c4bd1e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/agent/users/user-reset-pwd-modal.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { useVbenModal, z } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+import { md5 } from 'js-md5';
+
+import { useVbenForm } from '#/adapter/form';
+import { resetAgentUserPasswordApi, type AgentUser } from '#/api/agent';
+import { Description, useDescription } from '#/components/description';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicModal, modalApi] = useVbenModal({
+  centered: true,
+  onCancel: handleCancel,
+  onConfirm: handleSubmit,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: [
+    { field: 'userId', label: '用户ID' },
+    { field: 'userName', label: '用户名称' },
+    { field: 'nickName', label: '用户昵称' },
+  ],
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 80,
+  },
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'userId',
+      label: '用户ID',
+      rules: 'required',
+    },
+    {
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入新的密码，密码长度为 5 - 20 位',
+      },
+      fieldName: 'password',
+      label: '新的密码',
+      rules: z.string().min(5, { message: '密码长度为 5 - 20 位' }).max(20, { message: '密码长度为 5 - 20 位' }),
+    },
+  ],
+  showDefaultActions: false,
+});
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = modalApi.getData() as { record: AgentUser };
+  setDescProps({ data: record }, true);
+  await formApi.setValues({ userId: record.userId });
+}
+
+async function handleSubmit() {
+  try {
+    modalApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = await formApi.getValues();
+    await resetAgentUserPasswordApi({
+      userId: data.userId,
+      password: md5(data.password),
+    });
+    emit('reload');
+    await handleCancel();
+    message.success('密码重置成功');
+  } finally {
+    modalApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <BasicModal :close-on-click-modal="false" :fullscreen-button="false" title="重置密码">
+    <div class="flex flex-col gap-[12px]">
+      <Description @register="registerDescription" />
+      <BasicForm />
+    </div>
+  </BasicModal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/financialOverview/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/financialOverview/index.vue
new file mode 100644
index 0000000..88639a7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/financialOverview/index.vue
@@ -0,0 +1,446 @@
+<script lang="ts" setup name="FinancialOverview">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { computed, nextTick, onActivated, onMounted, ref, watch } from 'vue';
+
+import { Page, VbenButton } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { IconifyIcon } from '@vben/icons';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  GetCommissionOverview,
+  GetLevelSummary,
+} from '#/api/common/tFinCommissionDetail';
+import {
+  GetCoreFinancialData,
+  GetFinancialTrend,
+} from '#/api/common/tProfitAccountMonthBill';
+
+import {
+  buildFinancialQuery,
+  coreMetricConfigs,
+  defaultTrendTab,
+  getDefaultPeriodByType,
+  getFinancialTrendChartOptions,
+  getLevelIncomeChartOptions,
+  getLevelLegend,
+  getPeriodOptionsByType,
+  getTrendIndicatorByName,
+  levelSummaryColumns,
+  normalizeCommissionOverview,
+  normalizeCoreMetrics,
+  normalizeFinancialTrend,
+  normalizeLevelSummaryRows,
+  querySchema,
+  statisticTypeOptions,
+  trendTabs,
+  type CommissionOverview,
+  type CoreMetric,
+  type FinancialTrendData,
+  type LevelSummaryRow,
+} from './model';
+
+const activeTrend = ref(defaultTrendTab);
+const loading = ref(false);
+const initialized = ref(false);
+const coreMetrics = ref<CoreMetric[]>(
+  coreMetricConfigs.map((item) => ({ ...item, amount: '￥0.00' })),
+);
+const commissionOverview = ref<CommissionOverview>({
+  level1Income: 0,
+  level2Income: 0,
+  level3Income: 0,
+  totalIncome: 0,
+});
+const levelSummaryRows = ref<LevelSummaryRow[]>([]);
+const financialTrendData = ref<FinancialTrendData>({ labels: [], series: [] });
+const financialTrendType = ref(1);
+const levelLegend = computed(() => getLevelLegend(commissionOverview.value));
+
+const incomeChartRef = ref<EchartsUIType>();
+const trendChartRef = ref<EchartsUIType>();
+const { renderEcharts: renderIncomeChart, resize: resizeIncomeChart } =
+  useEcharts(incomeChartRef);
+const { renderEcharts: renderTrendChart, resize: resizeTrendChart } =
+  useEcharts(trendChartRef);
+
+const [FilterForm, filterFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 70,
+  },
+  layout: 'horizontal',
+  schema: querySchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2 gap-x-4 gap-y-0',
+});
+
+const levelGridOptions: VxeTableGridOptions<LevelSummaryRow> = {
+  columns: levelSummaryColumns,
+  height: 240,
+  keepSource: true,
+  pagerConfig: { enabled: false },
+  proxyConfig: {
+    ajax: {
+      query: async () => {
+        return {
+          items: levelSummaryRows.value,
+          total: levelSummaryRows.value.length,
+        };
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'key',
+  },
+  showOverflow: false,
+  toolbarConfig: { enabled: false } as any,
+};
+
+const [LevelGrid, levelGridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: [],
+    showDefaultActions: false,
+  },
+  gridOptions: levelGridOptions,
+});
+
+onMounted(async () => {
+  setupFilterDimensionChange();
+  await loadPageData();
+  initialized.value = true;
+});
+
+onActivated(async () => {
+  if (!initialized.value) {
+    return;
+  }
+  await loadPageData(false);
+  resizeIncomeChart();
+  resizeTrendChart();
+});
+
+watch(activeTrend, async () => {
+  if (!initialized.value) {
+    return;
+  }
+  await loadFinancialTrendData();
+});
+
+function setupFilterDimensionChange() {
+  filterFormApi.updateSchema([
+    {
+      componentProps: {
+        allowClear: false,
+        onChange: handleDimensionChange,
+        options: statisticTypeOptions,
+        placeholder: '请选择统计维度',
+      },
+      fieldName: 'type',
+    },
+  ]);
+}
+
+async function handleDimensionChange(value: number | string) {
+  const type = Number(value || 2);
+  filterFormApi.updateSchema([
+    {
+      componentProps: {
+        allowClear: false,
+        options: getPeriodOptionsByType(type),
+        placeholder: '请选择统计时间',
+      },
+      fieldName: 'period',
+    },
+  ]);
+  await filterFormApi.setFieldValue('period', getDefaultPeriodByType(type));
+}
+
+async function loadPageData(showLoading = true) {
+  if (showLoading) {
+    loading.value = true;
+  }
+  try {
+    const values = await filterFormApi.getValues();
+    const params = buildFinancialQuery(values);
+    financialTrendType.value = params.type;
+    const [coreRes, overviewRes, levelRes, trendRes] = await Promise.all([
+      GetCoreFinancialData(params),
+      GetCommissionOverview(params),
+      GetLevelSummary(params),
+      GetFinancialTrend(buildFinancialTrendParams(params)),
+    ]);
+
+    coreMetrics.value = normalizeCoreMetrics(coreRes);
+    commissionOverview.value = normalizeCommissionOverview(overviewRes);
+    levelSummaryRows.value = normalizeLevelSummaryRows(levelRes);
+    financialTrendData.value = normalizeFinancialTrend(trendRes);
+
+    await nextTick();
+    renderLevelIncomeChart();
+    renderFinancialTrendChart();
+    await levelGridApi.query();
+  } catch (error) {
+    console.error(error);
+    message.error('财务总览数据加载失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+function renderLevelIncomeChart() {
+  renderIncomeChart(getLevelIncomeChartOptions(commissionOverview.value));
+}
+
+function buildFinancialTrendParams(params: ReturnType<typeof buildFinancialQuery>) {
+  return {
+    ...params,
+    indicators: getTrendIndicatorByName(activeTrend.value),
+  };
+}
+
+async function loadFinancialTrendData() {
+  try {
+    const values = await filterFormApi.getValues();
+    const params = buildFinancialQuery(values);
+    financialTrendType.value = params.type;
+    const trendRes = await GetFinancialTrend(buildFinancialTrendParams(params));
+    financialTrendData.value = normalizeFinancialTrend(trendRes);
+    await nextTick();
+    renderFinancialTrendChart();
+  } catch (error) {
+    console.error(error);
+    message.error('财务趋势数据加载失败');
+  }
+}
+
+function renderFinancialTrendChart() {
+  renderTrendChart(
+    getFinancialTrendChartOptions(
+      financialTrendData.value,
+      activeTrend.value,
+      financialTrendType.value,
+    ),
+  );
+}
+
+async function handleQuery() {
+  const { valid } = await filterFormApi.validate();
+  if (!valid) {
+    return;
+  }
+  await loadPageData();
+}
+
+async function handleExport() {
+  await filterFormApi.getValues();
+  message.info('导出接口暂未接入');
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="financial-overview h-full overflow-auto bg-[#f5f7fb] p-4 dark:bg-transparent">
+      <div class="overview-shell min-h-full rounded border border-[#dfe6f2] bg-white p-5 dark:border-[#303030] dark:bg-[#1f1f1f]">
+        <div class="mb-5">
+          <div class="text-[26px] font-semibold leading-9 text-[#172033] dark:text-[#f2f2f2]">财务总览</div>
+          <div class="mt-1 text-sm text-[#687386] dark:text-[#a3a3a3]">
+            查看收入、顶级利润、分层分润和提现情况。
+          </div>
+        </div>
+
+        <div class="filter-panel mb-4 flex items-center justify-between gap-4 rounded border border-[#e6ebf3] bg-white px-4 py-3 dark:border-[#303030] dark:bg-[#262626]">
+          <FilterForm class="min-w-0 flex-1" />
+          <div class="flex shrink-0 items-center gap-3">
+            <VbenButton class="min-w-[76px]" :disabled="loading" variant="default" @click="handleQuery">查询</VbenButton>
+            <VbenButton class="min-w-[76px]" variant="outline" @click="handleExport">导出</VbenButton>
+          </div>
+        </div>
+
+        <section class="section-panel mb-4">
+          <div class="section-title">核心财务指标</div>
+          <div class="metric-grid mt-3 grid gap-4">
+            <div
+              v-for="item in coreMetrics"
+              :key="item.title"
+              class="metric-card flex items-center gap-4 rounded border border-[#e6ebf3] bg-white p-4 dark:border-[#303030] dark:bg-[#262626]"
+            >
+              <div :class="['metric-icon', item.theme]">
+                <IconifyIcon :icon="item.icon" class="text-[34px]" />
+              </div>
+              <div class="min-w-0">
+                <div class="text-sm text-[#667085] dark:text-[#a3a3a3]">{{ item.title }}</div>
+                <div class="mt-1 text-[23px] font-semibold leading-8 text-[#172033] dark:text-[#f2f2f2]">
+                  {{ item.amount }}
+                </div>
+                <div class="mt-1 truncate text-xs text-[#8a94a6] dark:text-[#8c8c8c]">{{ item.desc }}</div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="section-panel mb-4">
+          <div class="section-title">
+            分层分润概览
+            <span class="ml-3 text-sm font-normal text-[#8a94a6] dark:text-[#8c8c8c]">
+              按当前可见层级统计客户数量、收入金额和利润贡献。
+            </span>
+          </div>
+          <div class="mt-3 grid grid-cols-[minmax(300px,0.9fr)_minmax(520px,1.4fr)] gap-4 max-[1100px]:grid-cols-1">
+            <div class="rounded border border-[#e6ebf3] bg-white p-4 dark:border-[#303030] dark:bg-[#262626]">
+              <div class="mb-2 text-base font-semibold text-[#243047] dark:text-[#f2f2f2]">层级收入占比</div>
+              <EchartsUI ref="incomeChartRef" height="180px" width="100%" />
+              <div class="legend-grid grid grid-cols-3 rounded border border-[#edf1f7] dark:border-[#303030]">
+                <div v-for="item in levelLegend" :key="item.name" class="px-3 py-2 text-center">
+                  <div class="flex items-center justify-center gap-2 text-xs text-[#667085] dark:text-[#a3a3a3]">
+                    <span class="h-2 w-2 rounded-full" :style="{ backgroundColor: item.color }"></span>
+                    {{ item.name }}
+                  </div>
+                  <div class="mt-1 text-sm text-[#243047] dark:text-[#f2f2f2]">{{ item.amount }}</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="rounded border border-[#e6ebf3] bg-white p-4 dark:border-[#303030] dark:bg-[#262626]">
+              <div class="mb-3 text-base font-semibold text-[#243047] dark:text-[#f2f2f2]">层级汇总表</div>
+              <LevelGrid class="level-summary-grid" />
+            </div>
+          </div>
+        </section>
+
+        <section class="section-panel">
+          <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <div class="section-title">
+                趋势分析
+                <span class="ml-3 text-sm font-normal text-[#8a94a6] dark:text-[#8c8c8c]">
+                  按当前统计维度展示当前选中指标的趋势。
+                </span>
+              </div>
+            </div>
+            <div class="trend-tabs flex flex-wrap gap-1 rounded border border-[#e6ebf3] bg-white p-1 dark:border-[#303030] dark:bg-[#262626]">
+              <VbenButton
+                v-for="item in trendTabs"
+                :key="item"
+                class="trend-tab-button"
+                :variant="activeTrend === item ? 'default' : 'ghost'"
+                @click="activeTrend = item"
+              >
+                {{ item }}
+              </VbenButton>
+            </div>
+          </div>
+          <div class="rounded border border-[#e6ebf3] bg-white p-4 dark:border-[#303030] dark:bg-[#262626]">
+            <div class="mb-1 text-base font-semibold text-[#243047] dark:text-[#f2f2f2]">{{ activeTrend }}趋势</div>
+            <div class="mb-2 text-xs text-[#8a94a6] dark:text-[#8c8c8c]">金额（元）</div>
+            <EchartsUI ref="trendChartRef" height="230px" width="100%" />
+          </div>
+        </section>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.overview-shell,
+.filter-panel,
+.section-panel,
+.metric-card {
+  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
+}
+
+.section-panel {
+  border: 1px solid #e6ebf3;
+  border-radius: 8px;
+  padding: 14px;
+}
+
+:global(.dark) .section-panel {
+  border-color: #303030;
+}
+
+.section-title {
+  color: #172033;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
+}
+
+:global(.dark) .section-title {
+  color: #f2f2f2;
+}
+
+.metric-grid {
+  grid-template-columns: repeat(4, minmax(210px, 1fr));
+}
+
+.metric-icon {
+  align-items: center;
+  border-radius: 10px;
+  color: #fff;
+  display: flex;
+  height: 58px;
+  justify-content: center;
+  width: 58px;
+}
+
+.metric-icon.blue {
+  background: linear-gradient(135deg, #6aa7ff, #1f7aff);
+}
+
+.metric-icon.green {
+  background: linear-gradient(135deg, #72d99d, #1fbf75);
+}
+
+.metric-icon.orange {
+  background: linear-gradient(135deg, #ffc266, #ff922b);
+}
+
+.metric-icon.purple {
+  background: linear-gradient(135deg, #a78bfa, #6d5dfc);
+}
+
+.trend-tab-button {
+  min-width: 92px;
+}
+
+:deep(.filter-panel form) {
+  margin-bottom: 0;
+}
+
+:deep(.filter-panel .form-actions) {
+  display: none;
+}
+
+:deep(.level-summary-grid .vxe-grid) {
+  border: 0;
+}
+
+@media (max-width: 1280px) {
+  .metric-grid {
+    grid-template-columns: repeat(2, minmax(210px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .filter-panel {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .metric-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .trend-tab-button {
+    min-width: 76px;
+  }
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/financialOverview/model.ts b/admin-ui/vue/apps/web-antd/src/views/common/financialOverview/model.ts
new file mode 100644
index 0000000..b1a0a79
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/financialOverview/model.ts
@@ -0,0 +1,431 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+export interface CoreMetric {
+  amount: string;
+  desc: string;
+  icon: string;
+  key: string;
+  theme: string;
+  title: string;
+}
+
+export interface CommissionOverview {
+  level1Income: number;
+  level2Income: number;
+  level3Income: number;
+  totalIncome: number;
+}
+
+export interface FinancialTrendData {
+  labels: string[];
+  series: FinancialTrendSeries[];
+}
+
+export interface FinancialTrendSeries {
+  name: string;
+  type: number;
+  values: number[];
+}
+
+export interface LevelLegendItem {
+  amount: string;
+  color: string;
+  name: string;
+}
+
+export interface LevelSummaryRow {
+  commission: string;
+  customers: string;
+  income: string;
+  key: string;
+  level: string;
+  mom: string;
+  profit: string;
+  ratio: string;
+}
+
+export const defaultTrendTab = '总收入';
+
+export const trendTabs = ['总收入', '顶级利润', '待审核提现', '已提现金额'];
+
+const trendIndicatorMap: Record<string, number> = {
+  已提现金额: 4,
+  待审核提现: 3,
+  总收入: 1,
+  顶级利润: 2,
+};
+
+const now = new Date();
+export const currentYear = String(now.getFullYear());
+export const currentMonth = `${currentYear}-${String(now.getMonth() + 1).padStart(2, '0')}`;
+
+export const statisticTypeOptions = [
+  { label: '年', value: 1 },
+  { label: '月', value: 2 },
+];
+
+export const querySchema: VbenFormSchema[] = [
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      options: statisticTypeOptions,
+      placeholder: '请选择统计维度',
+    },
+    defaultValue: 1,
+    fieldName: 'type',
+    label: '统计维度',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      options: buildYearOptions(),
+      placeholder: '请选择统计时间',
+    },
+    defaultValue: currentYear,
+    fieldName: 'period',
+    label: '统计时间',
+  },
+];
+
+export const coreMetricConfigs: Omit<CoreMetric, 'amount'>[] = [
+  {
+    desc: '统计周期内已完成业务收入',
+    icon: 'mdi:chart-line',
+    key: 'totalIncome',
+    theme: 'blue',
+    title: '总收入',
+  },
+  {
+    desc: '统计周期内顶级最终利润',
+    icon: 'mdi:database-check',
+    key: 'topLevelProfit',
+    theme: 'green',
+    title: '顶级利润',
+  },
+  {
+    desc: '待审核提现申请金额',
+    icon: 'mdi:clipboard-clock',
+    key: 'pendingWithdrawAmount',
+    theme: 'orange',
+    title: '待审核提现',
+  },
+  {
+    desc: '统计周期内已完成提现',
+    icon: 'mdi:wallet',
+    key: 'withdrawedAmount',
+    theme: 'purple',
+    title: '已提现金额',
+  },
+];
+
+export const levelSummaryColumns: VxeGridProps<LevelSummaryRow>['columns'] = [
+  { align: 'left', field: 'level', minWidth: 110, title: '层级' },
+  { align: 'right', field: 'customers', minWidth: 100, title: '客户数' },
+  { align: 'right', field: 'income', minWidth: 130, title: '收入金额' },
+  { align: 'right', field: 'commission', minWidth: 130, title: '分润金额' },
+  { align: 'right', field: 'ratio', minWidth: 110, title: '收入占比' },
+];
+
+export function buildFinancialQuery(values: Record<string, any>) {
+  const type = Number(values?.type || 2);
+  const period = String(values?.period || getDefaultPeriodByType(type));
+  const year = period.slice(0, 4);
+  const month = type === 1 ? '' : period.slice(0, 7);
+
+  return {
+    month,
+    type,
+    year,
+  };
+}
+
+export function getDefaultPeriodByType(type: number | string) {
+  return Number(type) === 1 ? currentYear : currentMonth;
+}
+
+export function getPeriodOptionsByType(type: number | string) {
+  return Number(type) === 1 ? buildYearOptions() : buildMonthOptions();
+}
+
+export function getTrendIndicatorByName(name: string) {
+  return trendIndicatorMap[name] || 1;
+}
+
+export function normalizeCoreMetrics(response: any): CoreMetric[] {
+  const data = normalizeData(response);
+  return coreMetricConfigs.map((item) => ({
+    ...item,
+    amount: formatMoney(getNumber(data?.[item.key])),
+  }));
+}
+
+export function normalizeCommissionOverview(response: any): CommissionOverview {
+  const data = normalizeData(response);
+  return {
+    level1Income: getNumber(data?.level1Income),
+    level2Income: getNumber(data?.level2Income),
+    level3Income: getNumber(data?.level3Income),
+    totalIncome: getNumber(data?.totalIncome),
+  };
+}
+
+export function normalizeLevelSummaryRows(response: any): LevelSummaryRow[] {
+  const data = normalizeData(response);
+  const items = Array.isArray(data?.items) ? data.items : [];
+  return items.map((item: any) => ({
+    commission: formatMoney(item?.commissionAmount),
+    customers: String(item?.customerCount ?? 0),
+    income: formatMoney(item?.incomeAmount),
+    key: String(item?.level ?? ''),
+    level: getLevelName(item?.level),
+    mom: `${formatPercent(item?.monthOnMonthRatio)}`,
+    profit: formatMoney(item?.topProfitContrib),
+    ratio: `${formatPercent(item?.incomeRatio)}`,
+  }));
+}
+
+export function normalizeFinancialTrend(response: any): FinancialTrendData {
+  const data = normalizeData(response);
+  const labels = Array.isArray(data?.labels)
+    ? data.labels.map((item: any) => String(item ?? ''))
+    : [];
+  const series = Array.isArray(data?.series)
+    ? data.series.map((item: any) => ({
+        name: String(item?.name ?? ''),
+        type: Number(item?.type ?? 0),
+        values: Array.isArray(item?.values)
+          ? item.values.map((value: any) => getNumber(value))
+          : [],
+      }))
+    : [];
+  return { labels, series };
+}
+
+export function getLevelLegend(overview: CommissionOverview): LevelLegendItem[] {
+  return [
+    { amount: formatMoney(overview.level1Income), color: '#2f7bff', name: '一级客户' },
+    { amount: formatMoney(overview.level2Income), color: '#48c78e', name: '二级客户' },
+    { amount: formatMoney(overview.level3Income), color: '#ffb02e', name: '三级客户' },
+  ];
+}
+
+export function getLevelIncomeChartOptions(overview: CommissionOverview) {
+  return {
+    color: ['#2f7bff', '#48c78e', '#ffb02e'],
+    graphic: [
+      {
+        left: 'center',
+        style: {
+          fill: '#1f2937',
+          fontSize: 13,
+          fontWeight: 500,
+          text: `总收入\n${formatMoney(overview.totalIncome)}`,
+          textAlign: 'center',
+        },
+        top: 'center',
+        type: 'text',
+      },
+    ],
+    series: [
+      {
+        avoidLabelOverlap: true,
+        data: [
+          { name: '一级客户', value: overview.level1Income },
+          { name: '二级客户', value: overview.level2Income },
+          { name: '三级客户', value: overview.level3Income },
+        ],
+        label: {
+          formatter: '{b}\n{d}%',
+          fontSize: 13,
+        },
+        labelLine: {
+          length: 14,
+          length2: 18,
+        },
+        radius: ['48%', '72%'],
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      formatter: (params: any) => `${params.name}<br />收入：${formatMoney(params.value)}`,
+      trigger: 'item',
+    },
+  } as any;
+}
+
+export function getFinancialTrendChartOptions(
+  data: FinancialTrendData,
+  activeTrend: string,
+  type: number | string,
+) {
+  const indicatorType = getTrendIndicatorByName(activeTrend);
+  const currentSeries =
+    data.series.find((item) => Number(item.type) === indicatorType) ||
+    data.series[0];
+
+  if (!currentSeries || data.labels.length === 0) {
+    return getEmptyTrendChartOptions();
+  }
+
+  const xData = data.labels.map((item) => formatTrendLabel(item, type));
+  const yData = data.labels.map((_, index) =>
+    getNumber(currentSeries.values[index]),
+  );
+
+  return {
+    color: ['#1f7aff'],
+    grid: {
+      bottom: 8,
+      containLabel: true,
+      left: 8,
+      right: 8,
+      top: 28,
+    },
+    series: [
+      {
+        areaStyle: {
+          color: {
+            colorStops: [
+              { color: 'rgba(31, 122, 255, 0.18)', offset: 0 },
+              { color: 'rgba(31, 122, 255, 0.02)', offset: 1 },
+            ],
+            x: 0,
+            x2: 0,
+            y: 0,
+            y2: 1,
+            type: 'linear',
+          },
+        },
+        data: yData,
+        emphasis: {
+          focus: 'series',
+        },
+        name: currentSeries.name || activeTrend,
+        showSymbol: false,
+        smooth: true,
+        type: 'line',
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+      valueFormatter: (value: number) => formatMoney(value),
+    },
+    xAxis: {
+      axisLine: {
+        lineStyle: {
+          color: '#d9dee8',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      data: xData,
+      type: 'category',
+    },
+    yAxis: {
+      axisLabel: {
+        formatter: (value: number) => Number(value).toLocaleString('zh-CN'),
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#edf1f7',
+          type: 'dashed',
+        },
+      },
+      type: 'value',
+    },
+  } as any;
+}
+
+export function getEmptyTrendChartOptions() {
+  return {
+    graphic: {
+      left: 'center',
+      style: {
+        fill: '#8a94a6',
+        fontSize: 14,
+        text: '暂无趋势数据',
+      },
+      top: 'middle',
+      type: 'text',
+    },
+    grid: {
+      bottom: 8,
+      containLabel: true,
+      left: 8,
+      right: 8,
+      top: 28,
+    },
+    series: [],
+    xAxis: {
+      data: [],
+      type: 'category',
+    },
+    yAxis: {
+      type: 'value',
+    },
+  } as any;
+}
+
+export function formatMoney(value: any) {
+  return `￥${getNumber(value).toLocaleString('zh-CN', {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2,
+  })}`;
+}
+
+export function buildMonthOptions() {
+  const options: { label: string; value: string }[] = [];
+  for (let index = 0; index < 12; index += 1) {
+    const date = new Date(now.getFullYear(), now.getMonth() - index, 1);
+    const value = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+    options.push({ label: value, value });
+  }
+  return options;
+}
+
+export function buildYearOptions() {
+  const options: { label: string; value: string }[] = [];
+  for (let index = 0; index < 5; index += 1) {
+    const value = String(now.getFullYear() - index);
+    options.push({ label: value, value });
+  }
+  return options;
+}
+
+function formatPercent(value: any) {
+  const numberValue = getNumber(value);
+  const sign = numberValue > 0 ? '+' : '';
+  return `${sign}${numberValue.toFixed(1)}%`;
+}
+
+function getLevelName(level: any) {
+  const map: Record<string, string> = {
+    1: '一级客户',
+    2: '二级客户',
+    3: '三级客户',
+  };
+  return map[String(level)] || `${level || '-'}级客户`;
+}
+
+function formatTrendLabel(label: string, type: number | string) {
+  if (Number(type) === 1 && label.length >= 7) {
+    return `${Number(label.slice(5, 7))}月`;
+  }
+  if (label.length >= 10) {
+    return `${Number(label.slice(8, 10))}日`;
+  }
+  return label;
+}
+
+function getNumber(value: any) {
+  const numberValue = Number(value ?? 0);
+  return Number.isFinite(numberValue) ? numberValue : 0;
+}
+
+function normalizeData(response: any) {
+  return response?.data ?? response ?? {};
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/edit.vue
new file mode 100644
index 0000000..5a841fe
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/edit.vue
@@ -0,0 +1,114 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/common/tAgentBalance';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/index.vue
new file mode 100644
index 0000000..426819f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/index.vue
@@ -0,0 +1,809 @@
+<script lang="ts" setup name="TAgentBalance">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import type { Dayjs } from 'dayjs';
+
+import { computed, nextTick, onActivated, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { useAccessStore } from '@vben/stores';
+import { useWebSocket } from '@vueuse/core';
+
+import { Button, DatePicker, Empty, InputNumber, Radio, RadioGroup, Select, Spin, message } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenForm } from '#/adapter/form';
+import { AccountTrend, AlipayPay, AlipayQuery, BalanceTransferApply, GetAccountBalance, List } from '#/api/common/tAgentBalance';
+import BetterVben from '#/constants/BetterVben';
+
+import {
+  accountTrendSeries,
+  expenseTrendSeries,
+  financeCards,
+  formatCurrency,
+  getCardAmount,
+  getBalanceRecord,
+  getTrendQueryParams,
+  makeMonthAxis,
+  normalizeListResponse,
+  normalizeTrendResponse,
+  transferSchema,
+  type AgentBalanceRecord,
+  type TrendChartData,
+} from './model';
+
+type MonthRange = [Dayjs | string, Dayjs | string] | undefined;
+
+const RangePicker = DatePicker.RangePicker;
+
+const router = useRouter();
+const loading = ref(false);
+const initialized = ref(false);
+const balanceRecord = ref<AgentBalanceRecord>({});
+const pendingOutTradeNo = ref('');
+const lastSubscribedPayTag = ref('');
+const handledPayOutTradeNos = new Set<string>();
+const payOutTradeNoStorageKey = 'alipayPendingOutTradeNo';
+const defaultTrendEndMonth = dayjs().subtract(1, 'month');
+const defaultTrendStartMonth = defaultTrendEndMonth.subtract(11, 'month');
+const expenseRange = ref<MonthRange>([defaultTrendStartMonth, defaultTrendEndMonth]);
+const accountRange = ref<MonthRange>([defaultTrendStartMonth, defaultTrendEndMonth]);
+const currentAccount = ref('1');
+const selectedRechargeAmount = ref<number | 'custom'>(100);
+const customRechargeAmount = ref<number | undefined>();
+const selectedPayMethod = ref('alipay');
+const expenseTrendData = ref<TrendChartData>({ months: [], series: [] });
+const accountTrendData = ref<TrendChartData>({ months: [], series: [] });
+
+const expenseChartRef = ref<EchartsUIType>();
+const accountChartRef = ref<EchartsUIType>();
+const { renderEcharts: renderExpenseEcharts, resize: resizeExpense } =
+  useEcharts(expenseChartRef);
+const { renderEcharts: renderAccountEcharts, resize: resizeAccount } =
+  useEcharts(accountChartRef);
+
+const accountOptions = computed(() => {
+  return [
+    {
+      label: '我盈利的',
+      value: '1',
+    },
+    {
+      label: '我消费的',
+      value: '2',
+    },
+  ];
+});
+
+const hasExpenseChartData = computed(() => expenseTrendData.value.months.length > 0);
+const hasAccountChartData = computed(() => accountTrendData.value.months.length > 0);
+const rechargeAmountOptions = [100, 200, 300];
+const payMethodOptions = [
+  { label: '支付宝', value: 'alipay' },
+  { label: '微信', value: 'wechat' },
+  { label: '银行卡', value: 'bank' },
+];
+const finalRechargeAmount = computed(() => {
+  return selectedRechargeAmount.value === 'custom'
+    ? Number(customRechargeAmount.value || 0)
+    : selectedRechargeAmount.value;
+});
+const accessStore = useAccessStore();
+const payWsTag = computed(() =>
+  pendingOutTradeNo.value ? `ws:tag:pay:alipay:${pendingOutTradeNo.value}` : '',
+);
+const payWsState = reactive({
+  server: getWsServerUrl(),
+});
+
+const {
+  close: closePayWs,
+  data: payWsData,
+  open: openPayWs,
+  send: sendPayWs,
+  status: payWsStatus,
+} = useWebSocket(payWsState.server, {
+  autoReconnect: true,
+  heartbeat: false,
+  immediate: false,
+});
+
+onMounted(async () => {
+  const pendingAlipayOutTradeNo = getPendingAlipayOutTradeNo();
+  if (pendingAlipayOutTradeNo) {
+    pendingOutTradeNo.value = pendingAlipayOutTradeNo;
+    await queryAlipayResult(pendingAlipayOutTradeNo);
+  }
+  await loadPageData();
+  initialized.value = true;
+});
+
+onUnmounted(() => {
+  closePayWs();
+});
+
+onActivated(async () => {
+  if (!initialized.value) {
+    return;
+  }
+  await loadTrendCharts();
+  resizeExpense();
+  resizeAccount();
+});
+
+watch(
+  expenseRange,
+  async () => {
+    await loadExpenseTrend();
+  },
+  { deep: true },
+);
+
+watch(
+  [accountRange, currentAccount],
+  async () => {
+    await loadAccountTrend();
+  },
+  { deep: true },
+);
+
+watch(payWsStatus, (status) => {
+  if (status === 'OPEN') {
+    subscribePayOrder();
+  }
+});
+
+watch(payWsData, (value) => {
+  if (!value) {
+    return;
+  }
+  handlePayWsMessage(value);
+});
+
+watch(payWsTag, () => {
+  subscribePayOrder();
+});
+
+function getWsServerUrl() {
+  const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  return `${protocol}${window.location.host}/api/monitor/ws?access_token=${encodeURIComponent(
+    String(accessStore.accessToken),
+  )}`;
+}
+
+function subscribePayOrder() {
+  if (payWsStatus.value !== 'OPEN' || !payWsTag.value) {
+    return;
+  }
+  if (lastSubscribedPayTag.value === payWsTag.value) {
+    return;
+  }
+  if (lastSubscribedPayTag.value) {
+    sendPayWs(
+      JSON.stringify({
+        e: 'quits',
+        d: {
+          names: [lastSubscribedPayTag.value],
+        },
+      }),
+    );
+  }
+  sendPayWs(
+    JSON.stringify({
+      e: 'joins',
+      d: {
+        names: [payWsTag.value],
+      },
+    }),
+  );
+  lastSubscribedPayTag.value = payWsTag.value;
+}
+
+function parsePayWsData(value: string) {
+  try {
+    const data = JSON.parse(value);
+    if (typeof data.d === 'string' && !data.d.startsWith('{') && !data.d.startsWith('[')) {
+      try {
+        data.d = atob(data.d);
+      } catch {
+        return data;
+      }
+    }
+    if (typeof data.d === 'string' && (data.d.startsWith('{') || data.d.startsWith('['))) {
+      data.d = JSON.parse(data.d);
+    }
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+async function handlePayWsMessage(value: string) {
+  const wsMessage = parsePayWsData(value);
+  if (wsMessage?.e !== 'ws:event:pay:alipay:notify') {
+    return;
+  }
+  const outTradeNo = wsMessage.d?.outTradeNo || pendingOutTradeNo.value;
+  if (!outTradeNo || outTradeNo !== pendingOutTradeNo.value) {
+    return;
+  }
+  await queryAlipayResult(outTradeNo, wsMessage.d?.tradeStatus);
+}
+
+function getPendingAlipayOutTradeNo() {
+  const params = new URLSearchParams(window.location.search);
+  return (
+    params.get('out_trade_no') ||
+    params.get('outTradeNo') ||
+    sessionStorage.getItem(payOutTradeNoStorageKey) ||
+    ''
+  );
+}
+
+async function queryAlipayResult(outTradeNo: string, fallbackTradeStatus?: string) {
+  if (!outTradeNo || handledPayOutTradeNos.has(outTradeNo)) {
+    return;
+  }
+
+  handledPayOutTradeNos.add(outTradeNo);
+  try {
+    const res = await AlipayQuery({ outTradeNo });
+    const resData = res?.data || res;
+    const tradeStatus = resData?.tradeStatus || fallbackTradeStatus;
+    if (tradeStatus === 'TRADE_SUCCESS' || tradeStatus === 'TRADE_FINISHED') {
+      message.success('支付完成');
+      pendingOutTradeNo.value = '';
+      sessionStorage.removeItem(payOutTradeNoStorageKey);
+      closePayWs();
+      await loadPageData();
+    } else {
+      handledPayOutTradeNos.delete(outTradeNo);
+      message.info(`支付状态：${tradeStatus || '未知'}`);
+    }
+  } catch (error) {
+    handledPayOutTradeNos.delete(outTradeNo);
+    console.error(error);
+    message.error('支付结果查询失败');
+  }
+}
+
+async function loadPageData() {
+  loading.value = true;
+  try {
+    await Promise.all([loadBalance(), loadTrendCharts()]);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadBalance() {
+  try {
+    const res = await List({ page: 1, pageSize: 1 });
+    balanceRecord.value = getBalanceRecord(normalizeListResponse(res));
+    currentAccount.value = '1';
+  } catch (error) {
+    console.error(error);
+    message.error('企业客户财务信息加载失败');
+  }
+}
+
+async function loadTrendCharts() {
+  await Promise.all([loadExpenseTrend(), loadAccountTrend()]);
+}
+
+async function loadExpenseTrend() {
+  try {
+    const months = getRangeMonths(expenseRange.value);
+    const res = await GetAccountBalance(getTrendQueryParams(expenseRange.value));
+    expenseTrendData.value = normalizeTrendResponse(res, expenseTrendSeries, months);
+    await nextTick();
+    renderExpenseOverview();
+  } catch (error) {
+    console.error(error);
+    message.error('费用总览趋势加载失败');
+  }
+}
+
+async function loadAccountTrend() {
+  try {
+    const months = getRangeMonths(accountRange.value);
+    const res = await AccountTrend(
+      getTrendQueryParams(accountRange.value, {
+        accountType: currentAccount.value,
+      }),
+    );
+    accountTrendData.value = normalizeTrendResponse(res, accountTrendSeries, months);
+    await nextTick();
+    renderAccountOverview();
+  } catch (error) {
+    console.error(error);
+    message.error('账户总览趋势加载失败');
+  }
+}
+
+function handleAction(label: string) {
+  if (label === '充值') {
+    selectedRechargeAmount.value = 100;
+    customRechargeAmount.value = undefined;
+    selectedPayMethod.value = 'alipay';
+    alipayModalApi.open();
+    return;
+  }
+  if (label === '余额明细') {
+    router.push('/enterpriseManagement/tBalanceDetail/tBalanceDetail');
+    return;
+  }
+  if (label === '可提现明细') {
+    router.push('/enterpriseManagement/tBalanceDetail/tFinWithdrawableChange');
+    return;
+  }
+  if (label === '发票详情') {
+    message.info('发票详情功能未实现');
+    return;
+  }
+  if (label === '转可提现') {
+    transferModalApi.open();
+    return;
+  }
+  message.info(`${label}功能待接入`);
+}
+
+function handleAlipayCancel() {
+  selectedRechargeAmount.value = 100;
+  customRechargeAmount.value = undefined;
+  selectedPayMethod.value = 'alipay';
+  alipayModalApi.close();
+}
+
+async function handleAlipayConfirm() {
+  try {
+    if (selectedPayMethod.value !== 'alipay') {
+      message.info('当前仅接入支付宝充值');
+      return;
+    }
+    const amount = Number(finalRechargeAmount.value);
+    if (!Number.isFinite(amount) || amount <= 0) {
+      message.error('请输入正确的充值金额');
+      return;
+    }
+
+    const res = await AlipayPay({
+      businessType: 'balanceRecharge',
+      subject: '账户余额充值',
+      totalAmount: amount.toFixed(2),
+    });
+    const resData = res?.data || res;
+    const payUrl = resData?.payUrl;
+    const outTradeNo = resData?.outTradeNo || '';
+    if (!payUrl) {
+      message.error(res?.message || resData?.message || '未获取到支付链接');
+      return;
+    }
+
+    pendingOutTradeNo.value = outTradeNo;
+    if (outTradeNo) {
+      sessionStorage.setItem(payOutTradeNoStorageKey, outTradeNo);
+      openPayWs();
+      subscribePayOrder();
+    }
+
+    alipayModalApi.close();
+    window.location.href = payUrl;
+  } catch (error) {
+    console.error(error);
+    message.error('支付发起失败');
+  }
+}
+
+const [AlipayModal, alipayModalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleAlipayCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(alipayModalApi, async () => {
+      await handleAlipayConfirm();
+    });
+  },
+});
+
+// 转可提现弹窗
+const [TransferModal, transferModalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  title: '转可提现',
+  onCancel: handleTransferCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(transferModalApi, async () => {
+      await handleTransferConfirm();
+    });
+  },
+});
+
+function handleTransferCancel() {
+  transferModalApi.close();
+  transferFormApi.resetForm();
+}
+
+async function handleTransferConfirm() {
+  try {
+    const [flag, values] = await BetterVben.function.formValidate(transferFormApi);
+    if (!flag) {
+      return;
+    }
+
+    await BalanceTransferApply({
+      amount: values.amount,
+      accountType: values.accountType,
+      bankName: values.bankName,
+      bankAccount: values.bankAccount,
+      accountName: values.accountName,
+      identityCard: values.identityCard,
+      remark: values.remark,
+    });
+
+    message.success('转可提现申请提交成功');
+    transferModalApi.close();
+    transferFormApi.resetForm();
+    await loadPageData();
+  } catch (error) {
+    console.error(error);
+    message.error('转可提现申请提交失败');
+  }
+}
+
+const [TransferForm, transferFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: transferSchema,
+  showDefaultActions: false,
+});
+
+function getRangeMonths(range: MonthRange) {
+  return makeMonthAxis(range?.[0], range?.[1]);
+}
+
+function renderExpenseOverview() {
+  const trendData = expenseTrendData.value;
+  const months = trendData.months.length > 0 ? trendData.months : getRangeMonths(expenseRange.value);
+  renderExpenseEcharts({
+    color: trendData.series.map((item) => item.color),
+    grid: {
+      bottom: 20,
+      containLabel: true,
+      left: 8,
+      right: 8,
+      top: 52,
+    },
+    legend: {
+      data: trendData.series.map((item) => item.name),
+      icon: 'rect',
+      itemHeight: 8,
+      itemWidth: 8,
+      left: 0,
+      textStyle: {
+        color: '#6b7280',
+      },
+      top: 0,
+    },
+    series: trendData.series.map((item) => ({
+      data: item.data,
+      name: item.name,
+      showSymbol: false,
+      smooth: true,
+      type: 'line',
+    })),
+    tooltip: {
+      trigger: 'axis',
+      valueFormatter: (value: number) => formatCurrency(value),
+    } as any,
+    xAxis: {
+      axisLabel: {
+        color: '#86909c',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      boundaryGap: false,
+      data: months,
+      type: 'category',
+    },
+    yAxis: {
+      axisLabel: {
+        color: '#86909c',
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#e5e7eb',
+          type: 'dashed',
+        },
+      },
+      type: 'value',
+    },
+  });
+}
+
+function renderAccountOverview() {
+  const trendData = accountTrendData.value;
+  const months = trendData.months.length > 0 ? trendData.months : getRangeMonths(accountRange.value);
+  renderAccountEcharts({
+    color: trendData.series.map((item) => item.color),
+    grid: {
+      bottom: 20,
+      containLabel: true,
+      left: 8,
+      right: 8,
+      top: 52,
+    },
+    legend: {
+      data: trendData.series.map((item) => item.name),
+      icon: 'rect',
+      itemHeight: 8,
+      itemWidth: 8,
+      left: 0,
+      textStyle: {
+        color: '#6b7280',
+      },
+      top: 0,
+    },
+    series: trendData.series.map((item) => ({
+      areaStyle: item.area ? { opacity: 0.18 } : undefined,
+      data: item.data,
+      name: item.name,
+      showSymbol: false,
+      smooth: true,
+      type: 'line',
+    })),
+    tooltip: {
+      trigger: 'axis',
+      valueFormatter: (value: number) => formatCurrency(value),
+    } as any,
+    xAxis: {
+      axisLabel: {
+        color: '#86909c',
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e5e7eb',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      boundaryGap: false,
+      data: months,
+      type: 'category',
+    },
+    yAxis: {
+      axisLabel: {
+        color: '#86909c',
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#e5e7eb',
+          type: 'dashed',
+        },
+      },
+      type: 'value',
+    },
+  });
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Spin :spinning="loading" wrapper-class-name="h-full">
+      <div class="agent-finance-page h-full overflow-auto bg-[#f5f7fb] p-4 dark:bg-transparent">
+        <div class="min-h-full rounded border border-[#e5e7eb] bg-white p-5 dark:border-[#303030] dark:bg-[#1f1f1f]">
+          <div class="finance-card-grid mb-7 grid gap-5">
+            <div
+              v-for="card in financeCards"
+              :key="card.title"
+              class="finance-card rounded border border-[#20242a] bg-white px-3 py-3 dark:border-[#4a4a4a] dark:bg-[#262626]"
+            >
+              <div class="text-sm text-[#1f2329] dark:text-[#f2f2f2]">{{ card.title }}</div>
+              <div class="my-6 text-center text-[30px] font-medium leading-8 text-[#1f2329] dark:text-[#f2f2f2]">
+                {{ formatCurrency(getCardAmount(balanceRecord, card.key)) }}
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <Button
+                  v-for="action in card.actions"
+                  :key="action"
+                  size="small"
+                  type="primary"
+                  ghost
+                  @click="handleAction(action)"
+                >
+                  {{ action }}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div class="mb-6">
+            <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
+              <div class="text-base font-medium text-[#1f2329] dark:text-[#f2f2f2]">费用总览</div>
+              <RangePicker
+                v-model:value="expenseRange"
+                picker="month"
+                value-format="YYYY-MM"
+                class="w-[320px] max-w-full"
+              />
+            </div>
+            <div class="chart-panel">
+              <EchartsUI v-if="hasExpenseChartData" ref="expenseChartRef" height="230px" width="100%" />
+              <Empty v-else class="pt-12" description="暂无财务数据" />
+            </div>
+          </div>
+
+          <div class="rounded border border-[#edf1f7] p-4 dark:border-[#303030]">
+            <div class="mb-3 flex flex-wrap items-center justify-between gap-3">
+              <div class="text-base font-medium text-[#1f2329] dark:text-[#f2f2f2]">账户总览</div>
+              <div class="flex flex-wrap items-center gap-3">
+                <Select
+                  v-model:value="currentAccount"
+                  :options="accountOptions"
+                  class="w-[280px] max-w-full"
+                />
+                <RangePicker
+                  v-model:value="accountRange"
+                  picker="month"
+                  value-format="YYYY-MM"
+                  class="w-[320px] max-w-full"
+                />
+              </div>
+            </div>
+            <div class="chart-panel">
+              <EchartsUI v-if="hasAccountChartData" ref="accountChartRef" height="230px" width="100%" />
+              <Empty v-else class="pt-12" description="暂无账户数据" />
+            </div>
+          </div>
+        </div>
+
+        <AlipayModal title="充值" class="recharge-modal">
+          <div class="recharge-panel">
+            <RadioGroup v-model:value="selectedRechargeAmount" class="recharge-radio-group recharge-amount-radios">
+              <Radio v-for="amount in rechargeAmountOptions" :key="amount" :value="amount">
+                {{ amount }}
+              </Radio>
+              <Radio value="custom">自定义</Radio>
+            </RadioGroup>
+
+            <InputNumber
+              v-model:value="customRechargeAmount"
+              class="recharge-custom-input"
+              :min="0.01"
+              :precision="2"
+              :disabled="selectedRechargeAmount !== 'custom'"
+              placeholder="自定义金额输入"
+              @focus="selectedRechargeAmount = 'custom'"
+            />
+
+            <div class="recharge-subtitle">支付方式</div>
+            <RadioGroup v-model:value="selectedPayMethod" class="recharge-radio-group recharge-pay-methods">
+              <Radio v-for="method in payMethodOptions" :key="method.value" :value="method.value">
+                {{ method.label }}
+              </Radio>
+            </RadioGroup>
+          </div>
+        </AlipayModal>
+
+        <TransferModal title="转可提现">
+          <TransferForm />
+        </TransferModal>
+      </div>
+    </Spin>
+  </Page>
+</template>
+
+<style scoped>
+.agent-finance-page {
+  min-width: 0;
+}
+
+.finance-card-grid {
+  grid-template-columns: repeat(4, minmax(220px, 1fr));
+}
+
+.finance-card {
+  min-height: 118px;
+}
+
+.chart-panel {
+  min-height: 230px;
+}
+
+.recharge-panel {
+  padding: 2px 4px 8px;
+}
+
+.recharge-amount-options,
+.recharge-pay-methods {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.recharge-amount-options {
+  grid-template-columns: repeat(4, minmax(58px, 1fr));
+}
+
+.recharge-pay-methods {
+  grid-template-columns: repeat(3, minmax(72px, 1fr));
+}
+
+.recharge-option,
+.recharge-pay-method {
+  height: 32px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2329;
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  transition: all 0.16s ease;
+}
+
+.recharge-option:hover,
+.recharge-pay-method:hover,
+.recharge-option.active,
+.recharge-pay-method.active {
+  color: #1677ff;
+  border-color: #1677ff;
+  background: #f0f7ff;
+}
+
+.recharge-custom-input {
+  width: 100%;
+  margin-bottom: 18px;
+}
+
+.recharge-custom-input :deep(.ant-input-number-input) {
+  height: 32px;
+  font-size: 14px;
+  text-align: center;
+}
+
+.recharge-subtitle {
+  margin-bottom: 10px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2329;
+}
+
+.dark .recharge-option,
+.dark .recharge-pay-method,
+.dark .recharge-subtitle {
+  color: #f2f2f2;
+}
+
+.dark .recharge-option:hover,
+.dark .recharge-pay-method:hover,
+.dark .recharge-option.active,
+.dark .recharge-pay-method.active {
+  color: #69b1ff;
+  border-color: #69b1ff;
+  background: rgb(22 119 255 / 12%);
+}
+
+@media (max-width: 1280px) {
+  .finance-card-grid {
+    grid-template-columns: repeat(2, minmax(220px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .finance-card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/model.tsx
new file mode 100644
index 0000000..7215f6d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/model.tsx
@@ -0,0 +1,756 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderDict, renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+export class State {
+  public id = 0; // 账户ID
+  public deptId = 0; // 机构ID
+  public balance = 0; // 账户余额
+  public withdrawAmount = 0; // 可提现金额
+  public withdrawAmountStatus = 1; // 可提现金额状态: 1-正常, 0-冻结
+  public invoiceAmount = 0; // 已开票金额
+  public canInvoiceAmount = 0; // 可开票金额
+  public creditLimit = 0; // 信用额度
+  public usedCredit = 0; // 已使用信用额度
+  public pendingRepayment = 0; // 待还款金额
+  public status = 0; // 状态: 0-正常, 1-禁用
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+				fieldName: 'id',
+				component: 'InputNumber',
+				label: '账户ID',
+				componentProps: {
+					placeholder: '请输入账户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {    
+			fieldName: 'withdrawAmountStatus',    
+			component: 'Select',    
+			label: '可提现金额状态: 1-正常, 0-冻结',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择可提现金额状态: 1-正常, 0-冻结',    
+				options: getDictOptions('sys_common_status'),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null,
+			formItemClass: 'col-span-1',
+		},
+		  {    
+			fieldName: 'status',    
+			component: 'Select',    
+			label: '状态: 0-正常, 1-禁用',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择状态: 0-正常, 1-禁用',    
+				options: getDictOptions('sys_common_status'),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null,
+			formItemClass: 'col-span-1',
+		},
+		  {
+				fieldName: 'createdAt',
+				component: 'RangePicker',
+				label: '创建时间',
+				componentProps: {
+					type: 'datetimerange',
+					clearable: true,
+					valueFormat: 'YYYY-MM-DD HH:mm:ss',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '账户ID',
+    field: 'id',
+    align: 'left',
+    width: -1,
+    type: 'checkbox',
+  },
+  {
+    title: '机构ID',
+    field: 'deptId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '账户余额',
+    field: 'balance',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '可提现金额',
+    field: 'withdrawAmount',
+    align: 'left',
+    width: -1,
+ },
+ {    
+				title: '可提现金额状态: 1-正常, 0-冻结',    field: 'withdrawAmountStatus',    align: 'left',    width: -1, 
+				slots: {
+      				default: ({ row }) => {
+						return renderDict(row.withdrawAmountStatus, 'sys_common_status');
+					}
+				},
+			},
+			  {
+    title: '已开票金额',
+    field: 'invoiceAmount',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '可开票金额',
+    field: 'canInvoiceAmount',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '信用额度',
+    field: 'creditLimit',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '已使用信用额度',
+    field: 'usedCredit',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '待还款金额',
+    field: 'pendingRepayment',
+    align: 'left',
+    width: -1,
+ },
+ {    
+				title: '状态: 0-正常, 1-禁用',    field: 'status',    align: 'left',    width: -1, 
+				slots: {
+      				default: ({ row }) => {
+						return renderDict(row.status, 'sys_common_status');
+					}
+				},
+			},
+			  {
+    title: '租户ID',
+    field: 'tenantId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建部门',
+    field: 'createdDept',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建者',
+    field: 'createdBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.createdBySumma);
+    },
+ },
+ },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '更新者',
+    field: 'updatedBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.updatedBySumma);
+    },
+ },
+ },
+  {
+    title: '更新时间',
+    field: 'updatedAt',
+    align: 'left',
+    width: -1,
+ },
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  deptId: number;
+  balance: number;
+  withdrawAmount: number;
+  withdrawAmountStatus: number;
+  invoiceAmount: number;
+  canInvoiceAmount: number;
+  creditLimit: number;
+  usedCredit: number;
+  pendingRepayment: number;
+  status: number;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '账户ID'},
+  {  field: 'deptId',  label: '机构ID'},
+  {  field: 'balance',  label: '账户余额'},
+  {  field: 'withdrawAmount',  label: '可提现金额'},
+  {
+				field: 'withdrawAmountStatus',
+				label: '可提现金额状态: 1-正常, 0-冻结',
+				render(row: any) {
+					return renderDict(row.withdrawAmountStatus, 'sys_common_status');
+				},
+			},
+			  {  field: 'invoiceAmount',  label: '已开票金额'},
+  {  field: 'canInvoiceAmount',  label: '可开票金额'},
+  {  field: 'creditLimit',  label: '信用额度'},
+  {  field: 'usedCredit',  label: '已使用信用额度'},
+  {  field: 'pendingRepayment',  label: '待还款金额'},
+  {
+				field: 'status',
+				label: '状态: 0-正常, 1-禁用',
+				render(row: any) {
+					return renderDict(row.status, 'sys_common_status');
+				},
+			},
+			  {  field: 'tenantId',  label: '租户ID'},
+  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'updatedBy',  label: '更新者'},
+  {  field: 'updatedAt',  label: '更新时间'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+					fieldName: 'id',
+					component: 'Input',
+					label: '账户ID',
+					dependencies: {   show: () => false,    triggerFields: [''],   },
+					componentProps: {
+						placeholder: '',
+						onUpdateValue: (e: any) => {
+							console.log(e);
+						},   
+					},
+					formItemClass: 'col-span-1',
+				},  {
+				fieldName: 'deptId',
+				component: 'InputNumber',
+				label: '机构ID',
+				componentProps: {
+					placeholder: '请输入机构ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入机构ID', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'balance',
+				component: 'InputNumber',
+				label: '账户余额',
+				componentProps: {
+					placeholder: '请输入账户余额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'withdrawAmount',
+				component: 'InputNumber',
+				label: '可提现金额',
+				componentProps: {
+					placeholder: '请输入可提现金额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {    
+			fieldName: 'withdrawAmountStatus',    
+			component: 'Select',    
+			label: '可提现金额状态: 1-正常, 0-冻结',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择可提现金额状态: 1-正常, 0-冻结',    
+				options: getDictOptions('sys_common_status'),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null,
+			formItemClass: 'col-span-1',
+		},
+		  {
+				fieldName: 'invoiceAmount',
+				component: 'InputNumber',
+				label: '已开票金额',
+				componentProps: {
+					placeholder: '请输入已开票金额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'canInvoiceAmount',
+				component: 'InputNumber',
+				label: '可开票金额',
+				componentProps: {
+					placeholder: '请输入可开票金额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'creditLimit',
+				component: 'InputNumber',
+				label: '信用额度',
+				componentProps: {
+					placeholder: '请输入信用额度',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'usedCredit',
+				component: 'InputNumber',
+				label: '已使用信用额度',
+				componentProps: {
+					placeholder: '请输入已使用信用额度',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'pendingRepayment',
+				component: 'InputNumber',
+				label: '待还款金额',
+				componentProps: {
+					placeholder: '请输入待还款金额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {    
+			fieldName: 'status',    
+			component: 'Select',    
+			label: '状态: 0-正常, 1-禁用',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择状态: 0-正常, 1-禁用',    
+				options: getDictOptions('sys_common_status'),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null,
+			formItemClass: 'col-span-1',
+		},
+		  {
+				fieldName: 'tenantId',
+				component: 'Input',
+				label: '租户ID',
+				componentProps: {
+					placeholder: '请输入租户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},];
+
+export type AgentBalanceRecord = Record<string, any>;
+
+export interface FinanceCardConfig {
+  actions: string[];
+  key: string | string[];
+  title: string;
+}
+
+export interface FinanceChartSeries {
+  area?: boolean;
+  color: string;
+  getValue: (record: AgentBalanceRecord) => number;
+  name: string;
+}
+
+export interface TrendSeriesConfig {
+  area?: boolean;
+  color: string;
+  keys: string[];
+  name: string;
+}
+
+export interface TrendChartData {
+  months: string[];
+  series: {
+    area?: boolean;
+    color: string;
+    data: number[];
+    name: string;
+  }[];
+}
+
+export const financeCards: FinanceCardConfig[] = [
+  {
+    actions: ['充值', '余额明细', '转可提现'],
+    key: 'balance',
+    title: '账户余额',
+  },
+  {
+    actions: ['去开票', '发票详情'],
+    key: ['invoice_amount', 'invoiceAmount'],
+    title: '账户开票金额',
+  },
+  {
+    actions: ['去还款', '信用额度'],
+    key: ['pending_repayment', 'pendingRepayment'],
+    title: '总代还金额',
+  },
+  {
+    actions: ['可提现明细', '去提现'],
+    key: ['withdraw_amount', 'withdrawAmount'],
+    title: '可提现金额',
+  },
+];
+
+export const expenseOverviewSeries: FinanceChartSeries[] = [
+  {
+    color: '#c4b5fd',
+    getValue: (record) => Math.max(getNumber(record.invoiceAmount) - getNumber(record.canInvoiceAmount), 0),
+    name: '不可开票金额',
+  },
+  {
+    color: '#8b5cf6',
+    getValue: (record) => getNumber(record.invoiceAmount),
+    name: '已开票金额',
+  },
+  {
+    color: '#7c3aed',
+    getValue: (record) => getNumber(record.canInvoiceAmount),
+    name: '可开票金额',
+  },
+  {
+    color: '#bbf7d0',
+    getValue: (record) => getNumber(record.pendingRepayment),
+    name: '待还款金额',
+  },
+  {
+    color: '#22c55e',
+    getValue: (record) => getNumber(record.usedCredit),
+    name: '已还款金额',
+  },
+];
+
+export const accountOverviewSeries: FinanceChartSeries[] = [
+  {
+    area: true,
+    color: '#0f766e',
+    getValue: (record) => getNumber(record.balance) + getNumber(record.withdrawAmount),
+    name: '收入金额',
+  },
+  {
+    area: true,
+    color: '#c026d3',
+    getValue: (record) => getNumber(record.usedCredit) + getNumber(record.pendingRepayment),
+    name: '支出金额',
+  },
+];
+
+export const expenseTrendSeries: TrendSeriesConfig[] = [
+  {
+    color: '#1677ff',
+    keys: ['balance', 'balanceAmount', 'balance_amount'],
+    name: '余额',
+  },
+  {
+    color: '#22c55e',
+    keys: ['withdrawAmount', 'withdraw_amount', 'withdrawableAmount', 'withdrawable_amount'],
+    name: '可提现金额',
+  },
+  {
+    color: '#f59e0b',
+    keys: ['creditLimit', 'credit_limit', 'creditAmount', 'credit_amount'],
+    name: '信用额度',
+  },
+];
+
+export const accountTrendSeries: TrendSeriesConfig[] = [
+  {
+    area: true,
+    color: '#0f766e',
+    keys: ['incomeAmount', 'income_amount', 'income'],
+    name: '收入金额',
+  },
+  {
+    area: true,
+    color: '#c026d3',
+    keys: ['expenseAmount', 'expense_amount', 'expense'],
+    name: '支出金额',
+  },
+];
+
+export function normalizeListResponse(response: any): AgentBalanceRecord[] {
+  const data = response?.data ?? response;
+  if (Array.isArray(data)) {
+    return data;
+  }
+  if (Array.isArray(data?.list)) {
+    return data.list;
+  }
+  if (Array.isArray(data?.rows)) {
+    return data.rows;
+  }
+  if (Array.isArray(data?.records)) {
+    return data.records;
+  }
+  if (Array.isArray(data?.items)) {
+    return data.items;
+  }
+  if (data && typeof data === 'object') {
+    return [data];
+  }
+  return [];
+}
+
+export function getBalanceRecord(rows: AgentBalanceRecord[]): AgentBalanceRecord {
+  return rows.find((item) => item && typeof item === 'object') || {};
+}
+
+export function normalizeAccountBalanceResponse(response: any): AgentBalanceRecord {
+  const data = response?.data ?? response;
+  if (Array.isArray(data)) {
+    return getBalanceRecord(data);
+  }
+  if (data && typeof data === 'object') {
+    return data;
+  }
+  return {};
+}
+
+export function getCardAmount(record: AgentBalanceRecord, key: string | string[]) {
+  const keys = Array.isArray(key) ? key : [key];
+  for (const item of keys) {
+    const value = record?.[item];
+    if (value !== undefined && value !== null && value !== '') {
+      return getNumber(value);
+    }
+  }
+  return 0;
+}
+
+export function getNumber(value: any) {
+  const numberValue = Number(value ?? 0);
+  return Number.isFinite(numberValue) ? numberValue : 0;
+}
+
+export function formatCurrency(value: any) {
+  return `￥ ${getNumber(value).toFixed(2)}`;
+}
+
+export function makeMonthAxis(start?: any, end?: any) {
+  const startText = formatMonth(start);
+  const endText = formatMonth(end);
+  const startDate = parseMonth(startText);
+  const endDate = parseMonth(endText);
+  const months: string[] = [];
+  const cursor = new Date(startDate);
+
+  while (cursor <= endDate && months.length < 36) {
+    months.push(formatDateMonth(cursor));
+    cursor.setMonth(cursor.getMonth() + 1);
+  }
+
+  return months.length > 0 ? months : [formatDateMonth(new Date())];
+}
+
+export function getTrendQueryParams(range?: any, extra: Record<string, any> = {}) {
+  const [startMonth, endMonth] = normalizeMonthRange(range);
+  return {
+    startMonth,
+    endMonth,
+    ...extra,
+  };
+}
+
+export function normalizeTrendResponse(response: any, configs: TrendSeriesConfig[], fallbackMonths: string[]): TrendChartData {
+  const data = response?.data ?? response ?? {};
+  const months = getTrendMonths(data, fallbackMonths);
+
+  if (Array.isArray(data?.series)) {
+    return {
+      months,
+      series: data.series.map((item: any, index: number) => {
+        const config = configs.find((configItem) => configItem.name === item?.name) || configs[index];
+        return {
+          area: config?.area,
+          color: item?.color || config?.color || '#1677ff',
+          data: normalizeSeriesData(item?.data ?? item?.values, months.length),
+          name: item?.name || config?.name || `数据${index + 1}`,
+        };
+      }),
+    };
+  }
+
+  return {
+    months,
+    series: configs.map((config) => ({
+      area: config.area,
+      color: config.color,
+      data: normalizeSeriesData(getFirstValue(data, config.keys), months.length),
+      name: config.name,
+    })),
+  };
+}
+
+export function normalizeSeriesData(value: any, length: number) {
+  const list = Array.isArray(value) ? value : [];
+  return Array.from({ length }, (_, index) => getNumber(list[index]));
+}
+
+function formatMonth(value?: any) {
+  if (value?.format) {
+    return value.format('YYYY-MM');
+  }
+  if (typeof value === 'string' && value.length >= 7) {
+    return value.slice(0, 7);
+  }
+  return formatDateMonth(new Date());
+}
+
+function normalizeMonthRange(range?: any): [string, string] {
+  if (Array.isArray(range) && range.length >= 2) {
+    return [formatMonth(range[0]), formatMonth(range[1])];
+  }
+  const now = new Date();
+  const start = new Date(now);
+  start.setMonth(start.getMonth() - 11);
+  return [formatDateMonth(start), formatDateMonth(now)];
+}
+
+function getTrendMonths(data: any, fallbackMonths: string[]) {
+  const months =
+    data?.months ||
+    data?.monthList ||
+    data?.month_list ||
+    data?.times ||
+    data?.xAxis ||
+    data?.x_axis ||
+    data?.labels;
+  if (Array.isArray(months) && months.length > 0) {
+    return months.map((item) => String(item));
+  }
+  return fallbackMonths;
+}
+
+function getFirstValue(row: AgentBalanceRecord, keys: string[]) {
+  for (const key of keys) {
+    const value = row?.[key];
+    if (value !== undefined && value !== null) {
+      return value;
+    }
+  }
+  return [];
+}
+
+function parseMonth(value: string) {
+  const [yearValue, monthValue] = value.split('-').map(Number);
+  return new Date(yearValue || new Date().getFullYear(), (monthValue || 1) - 1, 1);
+}
+
+function formatDateMonth(value: Date) {
+  const year = value.getFullYear();
+  const month = String(value.getMonth() + 1).padStart(2, '0');
+  return `${year}-${month}`;
+}
+
+// 转可提现表单 schema
+export const transferSchema: VbenFormSchema[] = [
+  {
+    component: 'InputNumber',
+    componentProps: {
+      class: 'w-full',
+      min: 0.01,
+      placeholder: '请输入转可提现金额',
+      precision: 2,
+    },
+    fieldName: 'amount',
+    label: '转可提现金额',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+    fieldName: 'remark',
+    label: '备注',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/view.vue
new file mode 100644
index 0000000..b2f95de
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tAgentBalance/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/common/tAgentBalance';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/edit.vue
new file mode 100644
index 0000000..c7c1899
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/edit.vue
@@ -0,0 +1,114 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/common/tBalanceDetail';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/index.vue
new file mode 100644
index 0000000..c99e9ed
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/index.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  const { hasAccessByCodes } = useAccess();
+  import {
+    commonDownloadExcel,
+    getExportColumns,
+  } from '#/utils/file/download';
+  import { List, Export, Delete } from '#/api/common/tBalanceDetail';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '余额明细表',{
+  exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+  ...formValues,
+  page: 1,
+  });
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="余额明细表">
+      <!-- <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:common:tBalanceDetail:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:common:tBalanceDetail:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:common:tBalanceDetail:export'">
+          导出
+        </Button>
+      </template> -->
+      <!-- <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:common:tBalanceDetail:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:common:tBalanceDetail:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:common:tBalanceDetail:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template> -->
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/model.tsx
new file mode 100644
index 0000000..4984203
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/model.tsx
@@ -0,0 +1,444 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+import { renderDict } from '#/utils';
+import DictEnum from '#/constants/DictEnum';
+import { getDictOptions } from '#/utils/dict';
+
+const incomeExpenseTypeExpense = 1;
+const transactionTypeConsume = 1;
+const transactionChannelWithdrawable = 3;
+const legacyTransactionChannelBalance = 4;
+
+export class State {
+  public id = 0; // 明细ID
+  public deptId = 0; // 账户ID
+  public serialNo = ''; // 流水号
+  public transactionTime = ''; // 交易时间
+  public incomeExpenseType = 0; // 收支类型: 0收入,1支出
+  public transactionType = 0; // 交易类型:0充值 1消费 2转可提现 3可提现转入 4人工调整
+  public transactionChannel = 0; // 交易渠道:1支付宝 2微信 3可提现金额
+  public amount = null; // 交易金额
+  public beforeBalance = 0; // 变动前余额
+  public balanceAfter = 0; // 变动后余额
+  public channelSerialNo = ''; // 交易渠道流水号
+  public orderSn = ''; // 关联订单号
+  public remark = ''; // 备注
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+function getDisplayTransactionChannel(row: Record<string, any>) {
+  const channel = row.transactionChannel;
+  if (Number(channel) === legacyTransactionChannelBalance) {
+    return transactionChannelWithdrawable;
+  }
+  const isBalanceDeduction =
+    Number(row.incomeExpenseType) === incomeExpenseTypeExpense &&
+    Number(row.transactionType) === transactionTypeConsume;
+  if (
+    isBalanceDeduction &&
+    (channel === null ||
+      channel === undefined ||
+      channel === '' ||
+      Number(channel) === 0)
+  ) {
+    return transactionChannelWithdrawable;
+  }
+  return channel;
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+	 {
+				fieldName: 'month',
+				component: 'RangePicker',
+				label: '月份',
+				componentProps: {
+					picker: 'month',
+					format: 'YYYY-MM',
+					valueFormat: 'YYYY-MM',
+					placeholder: ['开始月份', '结束月份'],
+				},
+				formItemClass: 'col-span-1',
+			},
+ {    
+			fieldName: 'incomeExpenseType',    
+			component: 'Select',    
+			label: '收支类型',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '收支类型',    
+				options: getDictOptions(DictEnum.INCOME_EXPENSE_TYPE),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			formItemClass: 'col-span-1',
+		},
+		 {    
+			fieldName: 'transactionType',    
+			component: 'Select',    
+			label: '交易类型',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '交易类型',    
+				options: getDictOptions(DictEnum.TRANSACTION_TYPE),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			formItemClass: 'col-span-1',
+		},
+		 {    
+			fieldName: 'transactionChannel',    
+			component: 'Select',    
+			label: '交易渠道',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '交易渠道',    
+				options: getDictOptions(DictEnum.TRANSACTION_CHANNEL),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			formItemClass: 'col-span-1',
+		},
+ ];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+		  {
+    title: '流水号',
+    field: 'serialNo',
+    align: 'left',
+    width: -1,
+ },
+
+	  {
+    title: '月份',
+    field: 'tradingMonth',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '收支类型',
+    field: 'incomeExpenseType',
+    params: { dictType: DictEnum.INCOME_EXPENSE_TYPE },
+    align: 'left',
+    width: -1,
+	  slots: {
+      default: ({ row }) => {
+        return renderDict(row.incomeExpenseType, DictEnum.INCOME_EXPENSE_TYPE);
+      },
+    },
+
+ },
+   {
+    title: '交易类型',
+    field: 'transactionType',
+    params: { dictType: DictEnum.TRANSACTION_TYPE },
+    align: 'left',
+    width: -1,
+	  slots: {
+      default: ({ row }) => {
+        return renderDict(row.transactionType, DictEnum.TRANSACTION_TYPE);
+      },
+    },
+ },
+   {
+    title: '交易渠道',
+    field: 'transactionChannel',
+    params: { dictType: DictEnum.TRANSACTION_CHANNEL },
+    align: 'left',
+    width: -1,
+	  slots: {
+      default: ({ row }) => {
+        return renderDict(
+          getDisplayTransactionChannel(row),
+          DictEnum.TRANSACTION_CHANNEL,
+        );
+      },
+    },
+ },
+  {
+    title: '交易状态',
+    field: 'transactionStatus',
+    params: { dictType: DictEnum.TRANSACTION_STATUS },
+    align: 'left',
+    width: -1,
+	  slots: {
+      default: ({ row }) => {
+        return renderDict(row.transactionStatus, DictEnum.TRANSACTION_STATUS);
+      },
+    },
+ },
+   {
+    title: '交易金额',
+    field: 'amount',
+    align: 'left',
+    width: -1,
+ },
+    {
+    title: '变动前余额',
+    field: 'beforeBalance',
+    align: 'left',
+    width: -1,
+ },
+    {
+    title: '变动后余额',
+    field: 'balanceAfter',
+    align: 'left',
+    width: -1,
+ },
+
+ 	  {
+    title: '交易时间',
+    field: 'transactionTime',
+    align: 'left',
+    width: -1,
+ },
+
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  deptId: number;
+  serialNo: string;
+  transactionTime: string;
+  incomeExpenseType: number;
+  transactionType: number;
+  transactionChannel: number;
+  amount: number;
+  beforeBalance: number;
+  balanceAfter: number;
+  channelSerialNo: string;
+  orderSn: string;
+  remark: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '明细ID'},
+  {  field: 'deptId',  label: '账户ID'},
+  {  field: 'serialNo',  label: '流水号'},
+  {  field: 'transactionTime',  label: '交易时间'},
+  {  field: 'incomeExpenseType',  label: '收支类型: 0收入,1支出'},
+  {  field: 'transactionType',  label: '交易类型:0充值 1消费 2转可提现 3可提现转入 4人工调整'},
+  {  field: 'transactionChannel',  label: '交易渠道:1支付宝 2微信 3可提现金额'},
+  {  field: 'amount',  label: '交易金额'},
+  {  field: 'beforeBalance',  label: '变动前余额'},
+  {  field: 'balanceAfter',  label: '变动后余额'},
+  {  field: 'channelSerialNo',  label: '交易渠道流水号'},
+  {  field: 'orderSn',  label: '关联订单号'},
+  {  field: 'remark',  label: '备注'},
+  {  field: 'tenantId',  label: '租户ID'},
+  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'updatedBy',  label: '更新者'},
+  {  field: 'updatedAt',  label: '更新时间'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+					fieldName: 'id',
+					component: 'Input',
+					label: '明细ID',
+					dependencies: {   show: () => false,    triggerFields: [''],   },
+					componentProps: {
+						placeholder: '',
+						onUpdateValue: (e: any) => {
+							console.log(e);
+						},   
+					},
+					formItemClass: 'col-span-1',
+				},  {
+				fieldName: 'deptId',
+				component: 'InputNumber',
+				label: '账户ID',
+				componentProps: {
+					placeholder: '请输入账户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入账户ID', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'serialNo',
+				component: 'Input',
+				label: '流水号',
+				componentProps: {
+					placeholder: '请输入流水号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'transactionTime',
+				component: 'DatePicker',
+				label: '交易时间',
+				componentProps: {
+					type: 'datetime',
+					clearable: true,
+					showTime: true,
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:'selectRequired',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'incomeExpenseType',
+				component: 'InputNumber',
+				label: '收支类型: 0收入,1支出',
+				componentProps: {
+					placeholder: '请输入收支类型: 0收入,1支出',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入收支类型: 0收入,1支出', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'transactionType',
+				component: 'InputNumber',
+				label: '交易类型:0充值 1消费 2转可提现 3可提现转入 4人工调整',
+				componentProps: {
+					placeholder: '请输入交易类型:0充值 1消费 2转可提现 3可提现转入 4人工调整',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入交易类型:0充值 1消费 2转可提现 3可提现转入 4人工调整', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'transactionChannel',
+				component: 'InputNumber',
+				label: '交易渠道:1支付宝 2微信 3可提现金额',
+				componentProps: {
+					placeholder: '请输入交易渠道:1支付宝 2微信 3可提现金额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'amount',
+				component: 'InputNumber',
+				label: '交易金额',
+				componentProps: {
+					placeholder: '请输入交易金额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入交易金额', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'beforeBalance',
+				component: 'InputNumber',
+				label: '变动前余额',
+				componentProps: {
+					placeholder: '请输入变动前余额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入变动前余额', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'balanceAfter',
+				component: 'InputNumber',
+				label: '变动后余额',
+				componentProps: {
+					placeholder: '请输入变动后余额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入变动后余额', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'channelSerialNo',
+				component: 'Input',
+				label: '交易渠道流水号',
+				componentProps: {
+					placeholder: '请输入交易渠道流水号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'orderSn',
+				component: 'Input',
+				label: '关联订单号',
+				componentProps: {
+					placeholder: '请输入关联订单号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'remark',
+				component: 'Input',
+				label: '备注',
+				componentProps: {
+					placeholder: '请输入备注',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'tenantId',
+				component: 'Input',
+				label: '租户ID',
+				componentProps: {
+					placeholder: '请输入租户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},];
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/view.vue
new file mode 100644
index 0000000..180e62d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tBalanceDetail/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/common/tBalanceDetail';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/edit.vue
new file mode 100644
index 0000000..10f33cb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/edit.vue
@@ -0,0 +1,114 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/common/tConsumeAccountMonthBill';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/index.vue
new file mode 100644
index 0000000..803232f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/index.vue
@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+import dayjs from 'dayjs';
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { DatePicker, message } from 'ant-design-vue';
+
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { GetConsumptionBillSummary } from '#/api/common/tConsumeAccountMonthBill';
+import { List as BalanceDetailList } from '#/api/common/tBalanceDetail';
+
+import {
+  billDetailColumns,
+  formatMoney,
+  getAccountPeriodParams,
+  getBillRangeText,
+  getBillStatusText,
+  getConsumptionSummaryParams,
+  getSummaryItems,
+  normalizeResponseData,
+  querySchema,
+  type RowData,
+} from './model';
+
+const summaryLoading = ref(false);
+const summary = ref<RowData>({});
+const accountPeriod = ref(dayjs().subtract(1, 'month'));
+const accountPeriodValue = computed(() => accountPeriod.value.format('YYYY-MM'));
+const billRangeText = computed(() => getBillRangeText(accountPeriodValue.value));
+const summaryItems = computed(() => getSummaryItems(summary.value));
+
+function disabledAccountPeriodDate(current: dayjs.Dayjs) {
+  return current && current.isAfter(dayjs(), 'month');
+}
+
+const formOptions = {
+  collapsed: false,
+  schema: querySchema,
+  showCollapseButton: false,
+  showDefaultActions: false,
+  submitOnChange: false,
+  submitOnEnter: false,
+} as VbenFormProps;
+
+const gridOptions: VxeTableGridOptions<RowData> = {
+  columns: billDetailColumns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await BalanceDetailList({
+          ...getAccountPeriodParams(accountPeriodValue.value),
+          page: page.currentPage,
+          pageSize: page.pageSize,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  showOverflow: false,
+  toolbarConfig: {
+    custom: true,
+    export: false,
+    refresh: true,
+    resizable: true,
+    search: false,
+    zoom: true,
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+onMounted(async () => {
+  await loadSummary();
+});
+
+watch(accountPeriodValue, async () => {
+  await loadSummary();
+  await handleRefresh();
+});
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+async function loadSummary() {
+  summaryLoading.value = true;
+  try {
+    const res = await GetConsumptionBillSummary(
+      getConsumptionSummaryParams(accountPeriodValue.value),
+    );
+    summary.value = normalizeResponseData(res);
+  } catch (error) {
+    console.error(error);
+    message.error('账单汇总加载失败');
+  } finally {
+    summaryLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="h-full bg-[#f5f7fb] p-3 dark:bg-transparent">
+      <div class="bill-page flex h-full min-h-0 flex-col bg-white px-4 py-3 dark:bg-[#1f1f1f]">
+        <div class="mb-2 text-[22px] font-medium leading-8 text-[#1f2329] dark:text-[#f2f2f2]">
+          月账单-消费账户
+        </div>
+
+        <div class="mb-3 flex items-center gap-3 text-sm text-[#1f2329] dark:text-[#f2f2f2]">
+          <span>账单月份</span>
+          <DatePicker
+            v-model:value="accountPeriod"
+            class="w-[140px]"
+            format="YYYY-MM"
+            picker="month"
+            :allow-clear="false"
+            :disabled-date="disabledAccountPeriodDate"
+          />
+        </div>
+
+        <div class="mb-2 overflow-hidden rounded border border-[#edf1f7] bg-white dark:border-[#303030] dark:bg-[#1f1f1f]">
+          <div class="border-b border-[#edf1f7] px-4 py-2 text-sm text-[#1f2329] dark:border-[#303030] dark:text-[#f2f2f2]">
+            {{ Number(accountPeriodValue.slice(5)) }}月概览
+            <span class="ml-3">账单周期：{{ billRangeText }}</span>
+            <span class="ml-6">状态：{{ getBillStatusText(summary) }}</span>
+          </div>
+          <div class="bill-summary grid gap-y-3 px-4 py-3">
+            <div
+              v-for="item in summaryItems"
+              :key="item.label"
+              class="bill-summary-item min-h-[64px] px-4"
+            >
+              <div class="mb-3 text-sm text-[#4e5969] dark:text-[#a3a3a3]">{{ item.label }}</div>
+              <div class="text-[22px] font-medium text-[#1f2329] dark:text-[#f2f2f2]">
+                <span v-if="summaryLoading">--</span>
+                <span v-else>{{ formatMoney(item.value) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <Grid class="min-h-0 flex-1" table-title="账单明细" />
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.bill-page {
+  --bill-border-color: #edf1f7;
+  overflow: hidden;
+}
+
+:global(.dark) .bill-page {
+  --bill-border-color: #303030;
+}
+
+.bill-summary {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.bill-summary-item + .bill-summary-item {
+  border-left: 1px solid var(--bill-border-color);
+}
+
+@media (max-width: 1280px) {
+  .bill-summary-item {
+    border-left: 0 !important;
+  }
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/model.tsx
new file mode 100644
index 0000000..b0f95dc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/model.tsx
@@ -0,0 +1,299 @@
+import { cloneDeep } from 'lodash-es';
+
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import DictEnum from '#/constants/DictEnum';
+import { renderDict } from '#/utils';
+
+export type RowData = Record<string, any>;
+
+export class State {
+  public id = 0;
+  public deptId = 0;
+  public accountPeriod = '';
+  public openingBalance = 0;
+  public rechargeIncome = 0;
+  public withdrawableTransferInIncome = 0;
+  public manualAdjustIncome = 0;
+  public refundIncome = 0;
+  public consumeExpense = 0;
+  public balanceTransferOutExpense = 0;
+  public manualAdjustExpense = 0;
+  public consumeCreditRepayExpense = 0;
+  public totalIncome = 0;
+  public totalExpense = 0;
+  public closingBalance = 0;
+  public incomeCount = 0;
+  public expenseCount = 0;
+  public creditUsed = 0;
+  public creditRepaid = 0;
+  public billStatus = 1;
+  public settleTime = '';
+  public remark = '';
+  public tenantId = '';
+  public createdDept = 0;
+  public createdBy = 0;
+  public createdAt = '';
+  public updatedBy = 0;
+  public updatedAt = '';
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export interface RowType extends State {}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+export const querySchema: VbenFormSchema[] = [];
+
+export const editSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: { show: () => false, triggerFields: [''] },
+    fieldName: 'id',
+    label: '账单ID',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'deptId',
+    label: '机构ID',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'accountPeriod',
+    label: '账期YYYY-MM',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'totalIncome',
+    label: '本月收入总额',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'totalExpense',
+    label: '本月支出总额',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'billStatus',
+    label: '账单状态',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'remark',
+    label: '备注',
+  },
+];
+
+export const viewSchema: DescItem[] = [
+  { field: 'id', label: '账单ID' },
+  { field: 'deptId', label: '机构ID' },
+  { field: 'accountPeriod', label: '账期YYYY-MM' },
+  { field: 'openingBalance', label: '月初余额' },
+  { field: 'rechargeIncome', label: '充值收入' },
+  { field: 'withdrawableTransferInIncome', label: '可提现转入收入' },
+  { field: 'manualAdjustIncome', label: '人工调整收入' },
+  { field: 'refundIncome', label: '退款收入' },
+  { field: 'consumeExpense', label: '平台消费支出' },
+  { field: 'balanceTransferOutExpense', label: '转可提现支出' },
+  { field: 'manualAdjustExpense', label: '人工调整支出' },
+  { field: 'consumeCreditRepayExpense', label: '消费账户还款支出' },
+  { field: 'totalIncome', label: '本月收入总额' },
+  { field: 'totalExpense', label: '本月支出总额' },
+  { field: 'closingBalance', label: '月末余额' },
+  { field: 'incomeCount', label: '收入笔数' },
+  { field: 'expenseCount', label: '支出笔数' },
+  { field: 'creditUsed', label: '本月使用信用额度' },
+  { field: 'creditRepaid', label: '本月还款信用额度' },
+  { field: 'billStatus', label: '账单状态' },
+  { field: 'settleTime', label: '结算时间' },
+  { field: 'remark', label: '备注' },
+  { field: 'tenantId', label: '租户ID' },
+  { field: 'createdDept', label: '创建部门' },
+  { field: 'createdBy', label: '创建者' },
+  { field: 'createdAt', label: '创建时间' },
+  { field: 'updatedBy', label: '更新者' },
+  { field: 'updatedAt', label: '更新时间' },
+];
+
+export const billSummaryFields = [
+  {
+    keys: ['incomeAmount', 'totalIncome', 'rechargeIncome', 'income_amount', 'total_income'],
+    label: '收入金额',
+  },
+  {
+    keys: ['expenseAmount', 'totalExpense', 'consumeExpense', 'expense_amount', 'total_expense'],
+    label: '支出金额',
+  },
+];
+
+export const billDetailColumns: VxeGridProps['columns'] = [
+  {
+    title: '单号',
+    field: 'orderSn',
+    align: 'left',
+  },
+  {
+    title: '账户名称',
+    field: 'deptName',
+    align: 'left',
+  },
+  {
+    title: '账单类型',
+    field: 'incomeExpenseType',
+    align: 'left',
+    slots: {
+      default: ({ row }) => renderDict(row.incomeExpenseType, DictEnum.INCOME_EXPENSE_TYPE),
+    },
+  },
+
+  {
+    title: '交易状态',
+    field: 'transactionStatus',
+    align: 'left',
+    slots: {
+      default: ({ row }) => renderDict(row.transactionStatus, DictEnum.TRANSACTION_STATUS),
+    },
+  },
+  {
+    title: '交易类型',
+    field: 'transactionType',
+    align: 'left',
+    slots: {
+      default: ({ row }) => renderDict(row.transactionType, DictEnum.TRANSACTION_TYPE ),
+    },
+  },
+  {
+    title: '交易金额',
+    field: 'amount',
+    align: 'left',
+    slots: {
+      default: ({ row }) => {
+        const val = row?.amount ?? row?.changeAmount ?? row?.change_amount ?? '-';
+        return typeof val === 'number' ? `¥${val.toFixed(2)}` : val;
+      },
+    },
+  },
+  {
+    title: '账单产生时间',
+    field: 'createdAt',
+    align: 'left',
+  },
+];
+
+export const columns = billDetailColumns;
+
+export function getPreviousMonth() {
+  const date = new Date();
+  date.setMonth(date.getMonth() - 1);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  return `${year}-${month}`;
+}
+
+export function getAccountPeriodParams(accountPeriod: string) {
+  return {
+    accountPeriod,
+  };
+}
+
+export function getConsumptionSummaryParams(accountPeriod: string) {
+  return {
+    month: accountPeriod,
+  };
+}
+
+export function getBillRangeText(accountPeriod: string) {
+  const [yearValue, monthValue] = accountPeriod.split('-').map(Number);
+  const year = yearValue || new Date().getFullYear();
+  const month = monthValue || 1;
+  const lastDay = new Date(year, month, 0).getDate();
+  return `${accountPeriod}-01 至 ${accountPeriod}-${String(lastDay).padStart(2, '0')}`;
+}
+
+export function normalizeResponseData(value: any) {
+  return value?.data && !Array.isArray(value.data) ? value.data : value || {};
+}
+
+export function getSummaryItems(summary: RowData) {
+  return billSummaryFields.map((item) => ({
+    label: item.label,
+    value: getMoneyValue(summary, item.keys),
+  }));
+}
+
+export function getValue(row: RowData, keys: string[], fallback: any = '-') {
+  for (const key of keys) {
+    const value = row?.[key];
+    if (value !== undefined && value !== null && value !== '') {
+      return value;
+    }
+  }
+  return fallback;
+}
+
+export function getMoneyValue(row: RowData, keys: string[]) {
+  return Number(getValue(row, keys, 0) || 0);
+}
+
+export function formatMoney(value: any) {
+  const numberValue = Number(value || 0);
+  return `¥${numberValue.toFixed(2)}`;
+}
+
+export function hasBillSummaryData(summary: RowData) {
+  return ['totalIncome', 'totalExpense', 'incomeAmount', 'expenseAmount'].some(
+    (key) => summary?.[key] !== undefined && summary?.[key] !== null,
+  );
+}
+
+export function getBillStatusText(summary: RowData) {
+  return hasBillSummaryData(summary) ? '已出账' : '未出账';
+}
+
+export function getBillType(row: RowData) {
+  return getValue(row, ['incomeExpenseType', 'income_expense_type', 'billType', 'bill_type']);
+}
+
+export function getFeeType(row: RowData) {
+  return getValue(row, ['feeTypeName', 'feeType', 'costTypeName', 'changeTypeName', 'remark']);
+}
+
+export function getTradeType(row: RowData) {
+  return getValue(row, ['changeType', 'change_type', 'transactionType', 'transaction_type', 'tradeType', 'trade_type']);
+}
+
+export function getSourceNo(row: RowData) {
+  return getValue(row, ['sourceNo', 'source_no', 'serialNo', 'orderSn', 'id']);
+}
+
+export function getAccountName(row: RowData) {
+  return getValue(row, ['accountName', 'account_name', 'deptName', 'dept_name'], '消费账户');
+}
+
+export function getAccountPeriodValue(row: RowData) {
+  return getValue(row, ['accountPeriod', 'account_period'], getPreviousMonth());
+}
+
+export function getCreatedTime(row: RowData) {
+  return getValue(row, ['createdAt', 'created_at', 'billTime', 'bill_time', 'transactionTime', 'transaction_time']);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/view.vue
new file mode 100644
index 0000000..52b037b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tConsumeAccountMonthBill/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/common/tConsumeAccountMonthBill';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/edit.vue
new file mode 100644
index 0000000..92e8e9d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/edit.vue
@@ -0,0 +1,114 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/common/tCreditDetail';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/index.vue
new file mode 100644
index 0000000..769cc8e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/index.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  const { hasAccessByCodes } = useAccess();
+  import {
+    commonDownloadExcel,
+    getExportColumns,
+  } from '#/utils/file/download';
+  import { List, Export, Delete } from '#/api/common/tCreditDetail';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '信用额度明细表',{
+  exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+  ...formValues,
+  page: 1,
+  });
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="信用额度明细表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:common:tCreditDetail:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:common:tCreditDetail:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:common:tCreditDetail:export'">
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:common:tCreditDetail:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:common:tCreditDetail:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:common:tCreditDetail:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/model.tsx
new file mode 100644
index 0000000..b07e15e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/model.tsx
@@ -0,0 +1,396 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+
+export class State {
+  public id = 0; // 明细ID
+  public deptId = 0; // 组织机构ID
+  public accountPeriod = ''; // 账期(YYYY-MM)
+  public transactionType = ''; // 交易类型: 使用/还款
+  public amount = null; // 金额
+  public creditBalanceBefore = null; // 变动前信用额度余额
+  public creditBalanceAfter = null; // 变动后信用额度余额
+  public relatedOrderSn = ''; // 关联订单号
+  public repaymentMethod = 0; // 还款方式: 0 余额 1 银行卡 2 支付宝 3 微信
+  public repaymentChannelSerial = ''; // 交易渠道流水号
+  public transactionTime = ''; // 交易时间
+  public remark = ''; // 备注
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+				fieldName: 'id',
+				component: 'InputNumber',
+				label: '明细ID',
+				componentProps: {
+					placeholder: '请输入明细ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'createdAt',
+				component: 'RangePicker',
+				label: '创建时间',
+				componentProps: {
+					type: 'datetimerange',
+					clearable: true,
+					valueFormat: 'YYYY-MM-DD HH:mm:ss',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '明细ID',
+    field: 'id',
+    align: 'left',
+    width: -1,
+    type: 'checkbox',
+  },
+  {
+    title: '组织机构ID',
+    field: 'deptId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '账期(YYYY-MM)',
+    field: 'accountPeriod',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '交易类型: 使用/还款',
+    field: 'transactionType',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '金额',
+    field: 'amount',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '变动前信用额度余额',
+    field: 'creditBalanceBefore',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '变动后信用额度余额',
+    field: 'creditBalanceAfter',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '关联订单号',
+    field: 'relatedOrderSn',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '还款方式: 0 余额 1 银行卡 2 支付宝 3 微信',
+    field: 'repaymentMethod',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '交易渠道流水号',
+    field: 'repaymentChannelSerial',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '交易时间',
+    field: 'transactionTime',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '租户ID',
+    field: 'tenantId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建部门',
+    field: 'createdDept',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建者',
+    field: 'createdBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.createdBySumma);
+    },
+ },
+ },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '更新者',
+    field: 'updatedBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.updatedBySumma);
+    },
+ },
+ },
+  {
+    title: '更新时间',
+    field: 'updatedAt',
+    align: 'left',
+    width: -1,
+ },
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  deptId: number;
+  accountPeriod: string;
+  transactionType: string;
+  amount: number;
+  creditBalanceBefore: number;
+  creditBalanceAfter: number;
+  relatedOrderSn: string;
+  repaymentMethod: number;
+  repaymentChannelSerial: string;
+  transactionTime: string;
+  remark: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '明细ID'},
+  {  field: 'deptId',  label: '组织机构ID'},
+  {  field: 'accountPeriod',  label: '账期(YYYY-MM)'},
+  {  field: 'transactionType',  label: '交易类型: 使用/还款'},
+  {  field: 'amount',  label: '金额'},
+  {  field: 'creditBalanceBefore',  label: '变动前信用额度余额'},
+  {  field: 'creditBalanceAfter',  label: '变动后信用额度余额'},
+  {  field: 'relatedOrderSn',  label: '关联订单号'},
+  {  field: 'repaymentMethod',  label: '还款方式: 0 余额 1 银行卡 2 支付宝 3 微信'},
+  {  field: 'repaymentChannelSerial',  label: '交易渠道流水号'},
+  {  field: 'transactionTime',  label: '交易时间'},
+  {  field: 'remark',  label: '备注'},
+  {  field: 'tenantId',  label: '租户ID'},
+  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'updatedBy',  label: '更新者'},
+  {  field: 'updatedAt',  label: '更新时间'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+					fieldName: 'id',
+					component: 'Input',
+					label: '明细ID',
+					dependencies: {   show: () => false,    triggerFields: [''],   },
+					componentProps: {
+						placeholder: '',
+						onUpdateValue: (e: any) => {
+							console.log(e);
+						},   
+					},
+					formItemClass: 'col-span-1',
+				},  {
+				fieldName: 'deptId',
+				component: 'InputNumber',
+				label: '组织机构ID',
+				componentProps: {
+					placeholder: '请输入组织机构ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入组织机构ID', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'accountPeriod',
+				component: 'Input',
+				label: '账期(YYYY-MM)',
+				componentProps: {
+					placeholder: '请输入账期(YYYY-MM)',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'transactionType',
+				component: 'Input',
+				label: '交易类型: 使用/还款',
+				componentProps: {
+					placeholder: '请输入交易类型: 使用/还款',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'amount',
+				component: 'InputNumber',
+				label: '金额',
+				componentProps: {
+					placeholder: '请输入金额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入金额', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'creditBalanceBefore',
+				component: 'InputNumber',
+				label: '变动前信用额度余额',
+				componentProps: {
+					placeholder: '请输入变动前信用额度余额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'creditBalanceAfter',
+				component: 'InputNumber',
+				label: '变动后信用额度余额',
+				componentProps: {
+					placeholder: '请输入变动后信用额度余额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'relatedOrderSn',
+				component: 'Input',
+				label: '关联订单号',
+				componentProps: {
+					placeholder: '请输入关联订单号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'repaymentMethod',
+				component: 'InputNumber',
+				label: '还款方式: 0 余额 1 银行卡 2 支付宝 3 微信',
+				componentProps: {
+					placeholder: '请输入还款方式: 0 余额 1 银行卡 2 支付宝 3 微信',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'repaymentChannelSerial',
+				component: 'Input',
+				label: '交易渠道流水号',
+				componentProps: {
+					placeholder: '请输入交易渠道流水号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'transactionTime',
+				component: 'DatePicker',
+				label: '交易时间',
+				componentProps: {
+					type: 'datetime',
+					clearable: true,
+					showTime: true,
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'remark',
+				component: 'Input',
+				label: '备注',
+				componentProps: {
+					placeholder: '请输入备注',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'tenantId',
+				component: 'Input',
+				label: '租户ID',
+				componentProps: {
+					placeholder: '请输入租户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},];
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/view.vue
new file mode 100644
index 0000000..7393b09
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tCreditDetail/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/common/tCreditDetail';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/edit.vue
new file mode 100644
index 0000000..ca24b01
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/edit.vue
@@ -0,0 +1,114 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/common/tFinCommissionDetail';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/index.vue
new file mode 100644
index 0000000..7743658
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/index.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  const { hasAccessByCodes } = useAccess();
+  import {
+    commonDownloadExcel,
+    getExportColumns,
+  } from '#/utils/file/download';
+  import { List, Export, Delete } from '#/api/common/tFinCommissionDetail';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '分润明细表',{
+  exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+  ...formValues,
+  page: 1,
+  });
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="分润明细表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:common:tFinCommissionDetail:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:common:tFinCommissionDetail:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:common:tFinCommissionDetail:export'">
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:common:tFinCommissionDetail:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:common:tFinCommissionDetail:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:common:tFinCommissionDetail:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/model.tsx
new file mode 100644
index 0000000..7ac4231
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/model.tsx
@@ -0,0 +1,446 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderDict, renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+import { DictEnum } from '@vben/constants';
+import { getDictOptions } from '#/utils/dict';
+
+export class State {
+  public id = 0; // 主键ID
+  public commissionNo = ''; // 分润明细编号
+  public orderSn = ''; // 订单编号
+  public orderType = ''; // 订单类型
+  public productId = 0; // 商品ID
+  public payerDeptId = 0; // 下级机构ID
+  public benefitDeptId = 0; // 受益机构ID
+  public benefitDeptLevel = 0; // 受益机构层级
+  public commissionAmount = 0; // 分润金额
+  public commissionStatus = null; // 分润状态：0待结算，1可提现
+  public benefitSnapshot = null; // 价格快照（受益机构的成本价+利润+利润悉数=出货单价）
+  public accountPeriod = ''; // 账期(YYYY-MM)
+  public settlementTime = ''; // 结算时间
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+				fieldName: 'id',
+				component: 'InputNumber',
+				label: '主键ID',
+				componentProps: {
+					placeholder: '请输入主键ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {    
+			fieldName: 'commissionStatus',    
+			component: 'Select',    
+			label: '分润状态：0待结算，1可提现',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择分润状态：0待结算，1可提现',    
+				options: getDictOptions('sys_common_status'),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:'selectRequired',
+			formItemClass: 'col-span-1',
+		},
+		  {
+				fieldName: 'createdAt',
+				component: 'RangePicker',
+				label: '创建时间',
+				componentProps: {
+					type: 'datetimerange',
+					clearable: true,
+					valueFormat: 'YYYY-MM-DD HH:mm:ss',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '主键ID',
+    field: 'id',
+    align: 'left',
+    width: -1,
+    type: 'checkbox',
+  },
+  {
+    title: '分润明细编号',
+    field: 'commissionNo',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '订单编号',
+    field: 'orderSn',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '订单类型',
+    field: 'orderType',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '商品ID',
+    field: 'productId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '下级机构ID',
+    field: 'payerDeptId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '受益机构ID',
+    field: 'benefitDeptId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '受益机构层级',
+    field: 'benefitDeptLevel',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '分润金额',
+    field: 'commissionAmount',
+    align: 'left',
+    width: -1,
+ },
+ {    
+				title: '分润状态：0待结算，1可提现',    field: 'commissionStatus',
+    params: { dictType: 'sys_common_status' },    align: 'left',    width: -1,
+				slots: {
+      				default: ({ row }) => {
+						return renderDict(row.commissionStatus, 'sys_common_status');
+					}
+				},
+			},
+			  {
+    title: '账期(YYYY-MM)',
+    field: 'accountPeriod',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '结算时间',
+    field: 'settlementTime',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '租户ID',
+    field: 'tenantId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建部门',
+    field: 'createdDept',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建者',
+    field: 'createdBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.createdBySumma);
+    },
+ },
+ },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '更新者',
+    field: 'updatedBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.updatedBySumma);
+    },
+ },
+ },
+  {
+    title: '更新时间',
+    field: 'updatedAt',
+    align: 'left',
+    width: -1,
+ },
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  commissionNo: string;
+  orderSn: string;
+  orderType: string;
+  productId: number;
+  payerDeptId: number;
+  benefitDeptId: number;
+  benefitDeptLevel: number;
+  commissionAmount: number;
+  commissionStatus: number;
+  benefitSnapshot: any;
+  accountPeriod: string;
+  settlementTime: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '主键ID'},
+  {  field: 'commissionNo',  label: '分润明细编号'},
+  {  field: 'orderSn',  label: '订单编号'},
+  {  field: 'orderType',  label: '订单类型'},
+  {  field: 'productId',  label: '商品ID'},
+  {  field: 'payerDeptId',  label: '下级机构ID'},
+  {  field: 'benefitDeptId',  label: '受益机构ID'},
+  {  field: 'benefitDeptLevel',  label: '受益机构层级'},
+  {  field: 'commissionAmount',  label: '分润金额'},
+  {
+				field: 'commissionStatus',
+				label: '分润状态：0待结算，1可提现',
+				render(row: any) {
+					return renderDict(row.commissionStatus, 'sys_common_status');
+				},
+			},
+			  {  field: 'benefitSnapshot',  label: '价格快照（受益机构的成本价+利润+利润悉数=出货单价）'},
+  {  field: 'accountPeriod',  label: '账期(YYYY-MM)'},
+  {  field: 'settlementTime',  label: '结算时间'},
+  {  field: 'tenantId',  label: '租户ID'},
+  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'updatedBy',  label: '更新者'},
+  {  field: 'updatedAt',  label: '更新时间'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+					fieldName: 'id',
+					component: 'Input',
+					label: '主键ID',
+					dependencies: {   show: () => false,    triggerFields: [''],   },
+					componentProps: {
+						placeholder: '',
+						onUpdateValue: (e: any) => {
+							console.log(e);
+						},   
+					},
+					formItemClass: 'col-span-1',
+				},  {
+				fieldName: 'commissionNo',
+				component: 'Input',
+				label: '分润明细编号',
+				componentProps: {
+					placeholder: '请输入分润明细编号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'orderSn',
+				component: 'Input',
+				label: '订单编号',
+				componentProps: {
+					placeholder: '请输入订单编号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'orderType',
+				component: 'Input',
+				label: '订单类型',
+				componentProps: {
+					placeholder: '请输入订单类型',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'productId',
+				component: 'InputNumber',
+				label: '商品ID',
+				componentProps: {
+					placeholder: '请输入商品ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入商品ID', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'payerDeptId',
+				component: 'InputNumber',
+				label: '下级机构ID',
+				componentProps: {
+					placeholder: '请输入下级机构ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入下级机构ID', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'benefitDeptId',
+				component: 'InputNumber',
+				label: '受益机构ID',
+				componentProps: {
+					placeholder: '请输入受益机构ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入受益机构ID', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'benefitDeptLevel',
+				component: 'InputNumber',
+				label: '受益机构层级',
+				componentProps: {
+					placeholder: '请输入受益机构层级',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'commissionAmount',
+				component: 'InputNumber',
+				label: '分润金额',
+				componentProps: {
+					placeholder: '请输入分润金额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入分润金额', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {    
+			fieldName: 'commissionStatus',    
+			component: 'Select',    
+			label: '分润状态：0待结算，1可提现',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择分润状态：0待结算，1可提现',    
+				options: getDictOptions('sys_common_status'),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:'selectRequired',
+			formItemClass: 'col-span-1',
+		},
+		  {
+				fieldName: 'benefitSnapshot',
+				component: 'Input',
+				label: '价格快照（受益机构的成本价+利润+利润悉数=出货单价）',
+				componentProps: {
+					placeholder: '请输入价格快照（受益机构的成本价+利润+利润悉数=出货单价）',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'accountPeriod',
+				component: 'Input',
+				label: '账期(YYYY-MM)',
+				componentProps: {
+					placeholder: '请输入账期(YYYY-MM)',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'settlementTime',
+				component: 'DatePicker',
+				label: '结算时间',
+				componentProps: {
+					type: 'datetime',
+					clearable: true,
+					showTime: true,
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'tenantId',
+				component: 'Input',
+				label: '租户ID',
+				componentProps: {
+					placeholder: '请输入租户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},];
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/view.vue
new file mode 100644
index 0000000..da7f0ad
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinCommissionDetail/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/common/tFinCommissionDetail';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/edit.vue
new file mode 100644
index 0000000..7598e2a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/edit.vue
@@ -0,0 +1,114 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/common/tFinWithdrawableChange';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/index.vue
new file mode 100644
index 0000000..8ce199e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/index.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  const { hasAccessByCodes } = useAccess();
+  import {
+    commonDownloadExcel,
+    getExportColumns,
+  } from '#/utils/file/download';
+  import { List, Export, Delete } from '#/api/common/tFinWithdrawableChange';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '可提现变动明细表',{
+  exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+  ...formValues,
+  page: 1,
+  });
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="可提现变动明细">
+      <!-- <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:common:tFinWithdrawableChange:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:common:tFinWithdrawableChange:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:common:tFinWithdrawableChange:export'">    
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:common:tFinWithdrawableChange:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:common:tFinWithdrawableChange:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:common:tFinWithdrawableChange:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template> -->
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/model.tsx
new file mode 100644
index 0000000..ae9b55e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/model.tsx
@@ -0,0 +1,396 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+import { renderDict } from '#/utils';
+import DictEnum from '#/constants/DictEnum';
+import { getDictOptions } from '#/utils/dict';
+
+export class State {
+  public id = 0; // 主键ID
+  public deptId = 0; // 机构ID
+  public changeType = 0; // 变动类型：0分润，1提现，2转出（可提现转余额）3转入（余额转可提现）4还款
+  public incomeExpenseType = 0; // 收支类型: 0收入,1支出
+  public changeAmount = 0; // 变动金额
+  public beforeBalance = 0; // 变动前可提现余额
+  public afterBalance = 0; // 变动后可提现余额
+  public accountType = 0; // 提现账号类型，1：银行卡，2：支付宝，3：微信
+  public bankName = ''; // 开户行名称
+  public bankAccount = ''; // 开户行账号或账号
+  public accountName = ''; // 用户姓名
+  public identityCard = ''; // 用户身份证号
+  public sourceNo = ''; // 来源单号
+  public remark = ''; // 备注
+  public accountPeriod = ''; // 账期(YYYY-MM)
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+	{
+		fieldName: 'month',
+		component: 'RangePicker',
+		label: '月份',
+		componentProps: {
+			picker: 'month',
+			format: 'YYYY-MM',
+			valueFormat: 'YYYY-MM',
+			placeholder: ['开始月份', '结束月份'],
+		},
+		formItemClass: 'col-span-1',
+	},
+  {
+	fieldName: 'incomeExpenseType',
+	component: 'Select',
+	label: '收支类型',
+	componentProps: {
+		placeholder: '请输入收支类型',
+			options: getDictOptions(DictEnum.INCOME_EXPENSE_TYPE), 
+		onUpdateValue: (e: any) => {
+			console.log(e);
+		},   
+		
+	},  rules:null,
+	formItemClass: 'col-span-1',
+
+}, {
+	fieldName: 'changeType',
+	component: 'Select',
+	label: '变动类型',
+	componentProps: {
+		placeholder: '请输入变动类型',
+			options: getDictOptions(DictEnum.CHANGE_TYPE), 
+		onUpdateValue: (e: any) => {
+			console.log(e);
+		},   
+	},  rules:null,
+	formItemClass: 'col-span-1',
+}, 	 	
+	];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+	{
+    title: '月份',
+    field: 'tradingMonth',
+    align: 'left',
+ },
+  {
+    title: '收支类型',
+    field: 'incomeExpenseType',
+    params: { dictType: DictEnum.INCOME_EXPENSE_TYPE },
+    align: 'left',
+
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.incomeExpenseType, DictEnum.INCOME_EXPENSE_TYPE);
+      },
+    },
+ },
+  {
+    title: '变动类型',
+    field: 'changeType',
+    params: { dictType: DictEnum.CHANGE_TYPE },
+    align: 'left',
+
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.changeType, DictEnum.CHANGE_TYPE);
+      },
+    },
+ },
+   {
+    title: '变动金额',
+    field: 'changeAmount',
+    align: 'left',
+
+ },
+   {
+    title: '交易时间',
+    field: 'createdAt',
+    align: 'left',
+ 
+ },
+   {
+    title: '账期',
+    field: 'accountPeriod',
+    align: 'left',
+ 
+ },
+   {
+    title: '变动后可提现余额',
+    field: 'afterBalance',
+    align: 'left',
+ 
+ },
+//   { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  deptId: number;
+  changeType: number;
+  incomeExpenseType: number;
+  changeAmount: number;
+  beforeBalance: number;
+  afterBalance: number;
+  accountType: number;
+  bankName: string;
+  bankAccount: string;
+  accountName: string;
+  identityCard: string;
+  sourceNo: string;
+  remark: string;
+  accountPeriod: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '主键ID'},
+  {  field: 'deptId',  label: '机构ID'},
+  {  field: 'changeType',  label: '变动类型：0分润，1提现，2转出（可提现转余额）3转入（余额转可提现）4还款'},
+  {  field: 'incomeExpenseType',  label: '收支类型: 0收入,1支出'},
+  {  field: 'changeAmount',  label: '变动金额'},
+  {  field: 'beforeBalance',  label: '变动前可提现余额'},
+  {  field: 'afterBalance',  label: '变动后可提现余额'},
+  {  field: 'accountType',  label: '提现账号类型，1：银行卡，2：支付宝，3：微信'},
+  {  field: 'bankName',  label: '开户行名称'},
+  {  field: 'bankAccount',  label: '开户行账号或账号'},
+  {  field: 'accountName',  label: '用户姓名'},
+  {  field: 'identityCard',  label: '用户身份证号'},
+  {  field: 'sourceNo',  label: '来源单号'},
+  {  field: 'remark',  label: '备注'},
+  {  field: 'accountPeriod',  label: '账期(YYYY-MM)'},
+  {  field: 'tenantId',  label: '租户ID'},
+  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'updatedBy',  label: '更新者'},
+  {  field: 'updatedAt',  label: '更新时间'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+					fieldName: 'id',
+					component: 'Input',
+					label: '主键ID',
+					dependencies: {   show: () => false,    triggerFields: [''],   },
+					componentProps: {
+						placeholder: '',
+						onUpdateValue: (e: any) => {
+							console.log(e);
+						},   
+					},
+					formItemClass: 'col-span-1',
+				},  {
+				fieldName: 'deptId',
+				component: 'InputNumber',
+				label: '机构ID',
+				componentProps: {
+					placeholder: '请输入机构ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入机构ID', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'changeType',
+				component: 'InputNumber',
+				label: '变动类型：0分润，1提现，2转出（可提现转余额）3转入（余额转可提现）4还款',
+				componentProps: {
+					placeholder: '请输入变动类型：0分润，1提现，2转出（可提现转余额）3转入（余额转可提现）4还款',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入变动类型：0分润，1提现，2转出（可提现转余额）3转入（余额转可提现）4还款', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'incomeExpenseType',
+				component: 'InputNumber',
+				label: '收支类型: 0收入,1支出',
+				componentProps: {
+					placeholder: '请输入收支类型: 0收入,1支出',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入收支类型: 0收入,1支出', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'changeAmount',
+				component: 'InputNumber',
+				label: '变动金额',
+				componentProps: {
+					placeholder: '请输入变动金额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入变动金额', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'beforeBalance',
+				component: 'InputNumber',
+				label: '变动前可提现余额',
+				componentProps: {
+					placeholder: '请输入变动前可提现余额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入变动前可提现余额', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'afterBalance',
+				component: 'InputNumber',
+				label: '变动后可提现余额',
+				componentProps: {
+					placeholder: '请输入变动后可提现余额',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入变动后可提现余额', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'accountType',
+				component: 'InputNumber',
+				label: '提现账号类型，1：银行卡，2：支付宝，3：微信',
+				componentProps: {
+					placeholder: '请输入提现账号类型，1：银行卡，2：支付宝，3：微信',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入提现账号类型，1：银行卡，2：支付宝，3：微信', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'bankName',
+				component: 'Input',
+				label: '开户行名称',
+				componentProps: {
+					placeholder: '请输入开户行名称',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'bankAccount',
+				component: 'Input',
+				label: '开户行账号或账号',
+				componentProps: {
+					placeholder: '请输入开户行账号或账号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'accountName',
+				component: 'Input',
+				label: '用户姓名',
+				componentProps: {
+					placeholder: '请输入用户姓名',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'identityCard',
+				component: 'Input',
+				label: '用户身份证号',
+				componentProps: {
+					placeholder: '请输入用户身份证号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'sourceNo',
+				component: 'Input',
+				label: '来源单号',
+				componentProps: {
+					placeholder: '请输入来源单号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'remark',
+				component: 'Input',
+				label: '备注',
+				componentProps: {
+					placeholder: '请输入备注',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'accountPeriod',
+				component: 'Input',
+				label: '账期(YYYY-MM)',
+				componentProps: {
+					placeholder: '请输入账期(YYYY-MM)',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'tenantId',
+				component: 'Input',
+				label: '租户ID',
+				componentProps: {
+					placeholder: '请输入租户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},];
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/view.vue
new file mode 100644
index 0000000..57f74d8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinWithdrawableChange/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/common/tFinWithdrawableChange';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/edit.vue
new file mode 100644
index 0000000..4a33ee4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/edit.vue
@@ -0,0 +1,114 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/common/tFinanceApply';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/index.vue
new file mode 100644
index 0000000..57448d6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/index.vue
@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  import { useVbenForm } from '#/adapter/form';
+  import BetterVben from '#/constants/BetterVben';
+  const { hasAccessByCodes } = useAccess();
+  import {
+    commonDownloadExcel,
+    getExportColumns,
+  } from '#/utils/file/download';
+  import { List, Export, Delete, BalanceTransferAudit } from '#/api/common/tFinanceApply';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, auditSchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '财务申请表',{
+  exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+  ...formValues,
+  page: 1,
+  });
+  }
+
+  // 审核弹窗
+  const [AuditModal, auditModalApi] = useVbenModal({
+    ...BetterVben.modal.default,
+    title: '审核',
+    onCancel: handleAuditCancel,
+    async onConfirm() {
+      await BetterVben.function.modalAutoLoadAsync(auditModalApi, async () => {
+        await handleAuditConfirm();
+      });
+    },
+  });
+
+  function handleAuditCancel() {
+    auditModalApi.close();
+    auditFormApi.resetForm();
+  }
+
+  async function handleAuditConfirm() {
+    try {
+      const [flag, values] = await BetterVben.function.formValidate(auditFormApi);
+      if (!flag) {
+        return;
+      }
+
+      await BalanceTransferAudit({
+        applyNo: values.applyNo,
+        auditResult: values.auditResult,
+        auditOpinion: values.auditOpinion,
+      });
+
+      message.success('审核成功');
+      auditModalApi.close();
+      auditFormApi.resetForm();
+      await handleRefresh();
+    } catch (error) {
+      console.error(error);
+      message.error('审核失败');
+    }
+  }
+
+  const [AuditForm, auditFormApi] = useVbenForm({
+    commonConfig: {
+      componentProps: {
+        class: 'w-full',
+      },
+      labelWidth: 100,
+    },
+    layout: 'horizontal',
+    schema: auditSchema,
+    showDefaultActions: false,
+  });
+
+  let currentAuditRow = ref<RowType | null>(null);
+
+  function handleAudit(row: RowType) {
+    currentAuditRow.value = row;
+    auditFormApi.setValues({
+      applyNo: row.applyNo,
+      auditResult: 0,
+      auditOpinion: '',
+    });
+    auditModalApi.open();
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="财务申请表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:common:tFinanceApply:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:common:tFinanceApply:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:common:tFinanceApply:export'">
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+           <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleAudit(row)" v-access:code="'cpm:common:tAgentBalance:getAccountBalance'">
+            审核
+          </Button>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+    <AuditModal title="审核">
+      <AuditForm />
+    </AuditModal>
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/model.tsx
new file mode 100644
index 0000000..3500380
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/model.tsx
@@ -0,0 +1,536 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils';
+import DictEnum from '#/constants/DictEnum';
+
+export class State {
+  public id = 0; // 主键ID
+  public applyNo = ''; // 申请单号
+  public applyType = 0; // 申请类型(1:提现申请,2:余额转提现)
+  public auditType = 1; // 审核类型：1初审，2复审
+  public applyDeptId = 0; // 申请机构ID
+  public auditDeptId = 0; // 审核方机构ID，通常为直属上级或顶级
+  public availableAmountSnapshot = 0; // 申请前可提现余额快照
+  public applyAmount = 0; // 申请金额
+  public accountType = 0; // 提现账号类型，1：银行卡，2：支付宝，3：微信
+  public bankName = ''; // 开户行名称
+  public bankAccount = ''; // 开户行账号或账号
+  public accountName = ''; // 用户姓名
+  public identityCard = ''; // 用户身份证号
+  public receiveAccount = null; // 收款账户信息快照
+  public applyStatus = null; // 状态：0待审核，1已通过，2已驳回，3已打款，4已取消
+  public applyTime = ''; // 申请时间
+  public auditTime = ''; // 最近审核时间
+  public remark = ''; // 备注
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+	fieldName: 'applyNo',
+	component: 'Input',
+	label: '申请单号',
+	componentProps: {
+		placeholder: '请输入申请单号',
+		onUpdateValue: (e: any) => {
+			console.log(e);
+		},   
+	},  rules:null,
+	formItemClass: 'col-span-1',
+},  {    
+fieldName: 'applyStatus',    
+component: 'Select',    
+label: '状态',    
+defaultValue: null,    
+componentProps: {    
+	placeholder: '请选择状态',    
+		options: getDictOptions(DictEnum.APPLY_STATUS),      
+	onUpdateValue: (e: any) => {    
+		console.log(e);    
+	},  
+},
+formItemClass: 'col-span-1',
+},
+  {    
+fieldName: 'applyType',    
+component: 'Select',    
+label: '申请类型',    
+defaultValue: null,    
+componentProps: {    
+	placeholder: '请选择申请类型',    
+		options: getDictOptions(DictEnum.APPLY_TYPE),      
+	onUpdateValue: (e: any) => {    
+		console.log(e);    
+	},  
+},
+formItemClass: 'col-span-1',
+},];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+
+  {
+    title: '申请单号',
+    field: 'applyNo',
+    align: 'left',
+    width: 270,
+    fixed: 'left',
+   },
+    {    
+	title: '状态',    field: 'applyStatus',
+    params: { dictType: DictEnum.APPLY_STATUS },    align: 'left',    width: 160,
+		slots: {
+			default: ({ row }) => {
+				return renderDict(row.applyStatus, DictEnum.APPLY_STATUS);
+			},
+		},
+},
+  {
+    title: '申请类型',
+    field: 'applyType',
+    params: { dictType: DictEnum.APPLY_TYPE },
+    align: 'left',
+    width: 150,
+		slots: {
+			default: ({ row }) => {
+				return renderDict(row.applyType, DictEnum.APPLY_TYPE);
+			},
+		},
+	 },
+  {
+    title: '审核类型',
+    field: 'auditType',
+    params: { dictType: DictEnum.AUDIT_TYPE },
+    align: 'left',
+    width: 160,
+		slots: {
+			default: ({ row }) => {
+				return renderDict(row.auditType, DictEnum.AUDIT_TYPE);
+			},
+		},
+	 },
+  {
+    title: '申请机构',
+    field: 'applyDeptName',
+    align: 'left',
+    width: 160,
+ },
+  {
+    title: '审核方机构',
+    field: 'auditDeptName',
+    align: 'left',
+    width: 160,
+ },
+
+  {
+    title: '申请前可提现余额快照',
+    field: 'availableAmountSnapshot',
+    align: 'left',
+    width: 160,
+ },
+  {
+    title: '申请金额',
+    field: 'applyAmount',
+    align: 'left',
+    width: 160,
+ },
+  {
+    title: '提现账号类型',
+    field: 'accountType',
+    params: { dictType: DictEnum.ACCOUNT_TYPE },
+    align: 'left',
+    width: 160,
+		slots: {
+			default: ({ row }) => {
+				return renderDict(row.accountType, DictEnum.ACCOUNT_TYPE);
+			},
+		},
+	 },
+  {
+    title: '开户行名称',
+    field: 'bankName',
+    align: 'left',
+    width: 160,
+ },
+  {
+    title: '开户行账号或账号',
+    field: 'bankAccount',
+    align: 'left',
+    width: 160,
+ },
+  {
+    title: '用户姓名',
+    field: 'accountName',
+    align: 'left',
+    width: 160,
+ },
+  {
+    title: '用户身份证号',
+    field: 'identityCard',
+    align: 'left',
+    width: 160,
+ },
+
+			  {
+    title: '申请时间',
+    field: 'applyTime',
+    align: 'left',
+    width: 160,
+ },
+  {
+    title: '最近审核时间',
+    field: 'auditTime',
+    align: 'left',
+    width: 160,
+ },
+
+  { title: '操作', width: 120, fixed: 'right', slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  applyNo: string;
+  applyType: number;
+  auditType: number;
+  applyDeptId: number;
+  auditDeptId: number;
+  availableAmountSnapshot: number;
+  applyAmount: number;
+  accountType: number;
+  bankName: string;
+  bankAccount: string;
+  accountName: string;
+  identityCard: string;
+  receiveAccount: any;
+  applyStatus: number;
+  applyTime: string;
+  auditTime: string;
+  remark: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '主键ID'},
+  {  field: 'applyNo',  label: '申请单号'},
+  {  field: 'applyType',  label: '申请类型(1:提现申请,2:余额转提现)'},
+  {  field: 'auditType',  label: '审核类型：1初审，2复审'},
+  {  field: 'applyDeptId',  label: '申请机构ID'},
+  {  field: 'auditDeptId',  label: '审核方机构ID，通常为直属上级或顶级'},
+  {  field: 'availableAmountSnapshot',  label: '申请前可提现余额快照'},
+  {  field: 'applyAmount',  label: '申请金额'},
+  {  field: 'accountType',  label: '提现账号类型，1：银行卡，2：支付宝，3：微信'},
+  {  field: 'bankName',  label: '开户行名称'},
+  {  field: 'bankAccount',  label: '开户行账号或账号'},
+  {  field: 'accountName',  label: '用户姓名'},
+  {  field: 'identityCard',  label: '用户身份证号'},
+  {  field: 'receiveAccount',  label: '收款账户信息快照'},
+  {
+				field: 'applyStatus',
+				label: '状态：0待审核，1已通过，2已驳回，3已打款，4已取消',
+				render(row: any) {
+					return renderDict(row.applyStatus, 'sys_common_status');
+				},
+			},
+			  {  field: 'applyTime',  label: '申请时间'},
+  {  field: 'auditTime',  label: '最近审核时间'},
+  {  field: 'remark',  label: '备注'},
+  {  field: 'tenantId',  label: '租户ID'},
+  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'updatedBy',  label: '更新者'},
+  {  field: 'updatedAt',  label: '更新时间'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+	fieldName: 'id',
+	component: 'Input',
+	label: '主键ID',
+	dependencies: {   show: () => false,    triggerFields: [''],   },
+	componentProps: {
+		placeholder: '',
+		onUpdateValue: (e: any) => {
+			console.log(e);
+		},   
+	},
+	formItemClass: 'col-span-1',
+},  {
+fieldName: 'applyNo',
+component: 'Input',
+label: '申请单号',
+componentProps: {
+	placeholder: '请输入申请单号',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  
+rules:'required',
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'applyType',
+component: 'InputNumber',
+label: '申请类型(1:提现申请,2:余额转提现)',
+componentProps: {
+	placeholder: '请输入申请类型(1:提现申请,2:余额转提现)',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  rules:z.number({required_error: '请输入申请类型(1:提现申请,2:余额转提现)', invalid_type_error: '无效数字'}),
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'auditType',
+component: 'InputNumber',
+label: '审核类型：1初审，2复审',
+componentProps: {
+	placeholder: '请输入审核类型：1初审，2复审',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  rules:z.number({required_error: '请输入审核类型：1初审，2复审', invalid_type_error: '无效数字'}),
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'applyDeptId',
+component: 'InputNumber',
+label: '申请机构ID',
+componentProps: {
+	placeholder: '请输入申请机构ID',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  rules:z.number({required_error: '请输入申请机构ID', invalid_type_error: '无效数字'}),
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'auditDeptId',
+component: 'InputNumber',
+label: '审核方机构ID，通常为直属上级或顶级',
+componentProps: {
+	placeholder: '请输入审核方机构ID，通常为直属上级或顶级',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  rules:z.number({required_error: '请输入审核方机构ID，通常为直属上级或顶级', invalid_type_error: '无效数字'}),
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'availableAmountSnapshot',
+component: 'InputNumber',
+label: '申请前可提现余额快照',
+componentProps: {
+	placeholder: '请输入申请前可提现余额快照',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  rules:z.number({required_error: '请输入申请前可提现余额快照', invalid_type_error: '无效数字'}),
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'applyAmount',
+component: 'InputNumber',
+label: '申请金额',
+componentProps: {
+	placeholder: '请输入申请金额',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  rules:z.number({required_error: '请输入申请金额', invalid_type_error: '无效数字'}),
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'accountType',
+component: 'InputNumber',
+label: '提现账号类型，1：银行卡，2：支付宝，3：微信',
+componentProps: {
+	placeholder: '请输入提现账号类型，1：银行卡，2：支付宝，3：微信',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  rules:z.number({required_error: '请输入提现账号类型，1：银行卡，2：支付宝，3：微信', invalid_type_error: '无效数字'}),
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'bankName',
+component: 'Input',
+label: '开户行名称',
+componentProps: {
+	placeholder: '请输入开户行名称',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  
+rules:null,
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'bankAccount',
+component: 'Input',
+label: '开户行账号或账号',
+componentProps: {
+	placeholder: '请输入开户行账号或账号',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  
+rules:null,
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'accountName',
+component: 'Input',
+label: '用户姓名',
+componentProps: {
+	placeholder: '请输入用户姓名',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  
+rules:null,
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'identityCard',
+component: 'Input',
+label: '用户身份证号',
+componentProps: {
+	placeholder: '请输入用户身份证号',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  
+rules:null,
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'receiveAccount',
+component: 'Input',
+label: '收款账户信息快照',
+componentProps: {
+	placeholder: '请输入收款账户信息快照',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  
+rules:null,
+formItemClass: 'col-span-1',
+},  {    
+fieldName: 'applyStatus',    
+component: 'Select',    
+label: '状态：0待审核，1已通过，2已驳回，3已打款，4已取消',    
+defaultValue: null,    
+componentProps: {    
+placeholder: '请选择状态：0待审核，1已通过，2已驳回，3已打款，4已取消',    
+options: getDictOptions('sys_common_status'),    
+onUpdateValue: (e: any) => {    
+	console.log(e);    
+},  
+},
+rules:'selectRequired',
+formItemClass: 'col-span-1',
+},
+{
+fieldName: 'applyTime',
+component: 'DatePicker',
+label: '申请时间',
+componentProps: {
+	type: 'datetime',
+	clearable: true,
+	showTime: true,
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  rules:'selectRequired',
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'auditTime',
+component: 'DatePicker',
+label: '最近审核时间',
+componentProps: {
+	type: 'datetime',
+	clearable: true,
+	showTime: true,
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},   
+},  rules:null,
+formItemClass: 'col-span-1',
+},  {
+fieldName: 'remark',
+component: 'Input',
+label: '备注',
+componentProps: {
+	placeholder: '请输入备注',
+	onUpdateValue: (e: any) => {
+		console.log(e);
+	},
+},
+rules:null,
+formItemClass: 'col-span-1',
+}, ];
+
+// 审核表单 schema
+export const auditSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+      placeholder: '申请单号自动填充',
+    },
+    fieldName: 'applyNo',
+    label: '申请单号',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        { label: '通过', value: 0 },
+        { label: '驳回', value: 1 },
+      ],
+    },
+    defaultValue: 0,
+    fieldName: 'auditResult',
+    label: '审核结果',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    componentProps: {
+      placeholder: '请输入审核意见',
+      rows: 3,
+    },
+    fieldName: 'auditOpinion',
+    label: '审核意见',
+  },
+];
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/view.vue
new file mode 100644
index 0000000..a9bae53
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceApply/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/common/tFinanceApply';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/edit.vue
new file mode 100644
index 0000000..b1fc929
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/edit.vue
@@ -0,0 +1,114 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/common/tFinanceAuditRecord';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/index.vue
new file mode 100644
index 0000000..07b3073
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/index.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  const { hasAccessByCodes } = useAccess();
+  import {
+    commonDownloadExcel,
+    getExportColumns,
+  } from '#/utils/file/download';
+  import { List, Export, Delete } from '#/api/common/tFinanceAuditRecord';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '财务审核记录表',{
+  exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+  ...formValues,
+  page: 1,
+  });
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="财务审核记录表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:common:tFinanceAuditRecord:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:common:tFinanceAuditRecord:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:common:tFinanceAuditRecord:export'">
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:common:tFinanceAuditRecord:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:common:tFinanceAuditRecord:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:common:tFinanceAuditRecord:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/model.tsx
new file mode 100644
index 0000000..ce4e174
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/model.tsx
@@ -0,0 +1,270 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+import { renderDict } from '#/utils';
+import DictEnum from '#/constants/DictEnum';
+import { getDictOptions } from '#/utils/dict';
+
+export class State {
+  public id = 0; // 主键ID
+  public auditNo = ''; // 审核记录编号
+  public applyNo = ''; // 申请单号
+  public auditDeptId = 0; // 审核方机构ID
+  public auditorUserId = 0; // 审核人ID
+  public auditResult = 0; // 审核结果：0通过，1驳回
+  public auditOpinion = ''; // 审核意见
+  public auditTime = ''; // 审核时间
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+				fieldName: 'applyNo',
+				component: 'Input',
+				label: '申请单号',
+				componentProps: {
+					placeholder: '请输入申请单号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			}, 
+		 {
+				fieldName: 'auditResult',
+				component: 'Select',
+				label: '审核结果',
+				componentProps: {
+					placeholder: '请选择审核结果',
+					options: getDictOptions(DictEnum.AUDIT_RESULT),      
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '审核记录编号',
+    field: 'auditNo',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '申请单号',
+    field: 'applyNo',
+    align: 'left',
+    width: 300,
+ },
+  {
+    title: '审核方机构',
+    field: 'auditorDeptName',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '审核人',
+    field: 'auditorUserName',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '审核结果',
+    field: 'auditResult',
+    params: { dictType: DictEnum.AUDIT_RESULT },
+    align: 'left',
+    width: -1,
+     slots: {
+      default: ({ row }) => {
+        return renderDict(row.auditResult, DictEnum.AUDIT_RESULT);
+      },
+    },
+ },
+  {
+    title: '审核时间',
+    field: 'auditTime',
+    align: 'left',
+    width: -1,
+ },
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  auditNo: string;
+  applyNo: string;
+  auditDeptId: number;
+  auditorUserId: number;
+  auditResult: number;
+  auditOpinion: string;
+  auditTime: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '主键ID'},
+  {  field: 'auditNo',  label: '审核记录编号'},
+  {  field: 'applyNo',  label: '申请单号'},
+  {  field: 'auditDeptId',  label: '审核方机构ID'},
+  {  field: 'auditorUserId',  label: '审核人ID'},
+  {  field: 'auditResult',  label: '审核结果：0通过，1驳回'},
+  {  field: 'auditOpinion',  label: '审核意见'},
+  {  field: 'auditTime',  label: '审核时间'},
+  {  field: 'tenantId',  label: '租户ID'},
+  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'updatedBy',  label: '更新者'},
+  {  field: 'updatedAt',  label: '更新时间'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+					fieldName: 'id',
+					component: 'Input',
+					label: '主键ID',
+					dependencies: {   show: () => false,    triggerFields: [''],   },
+					componentProps: {
+						placeholder: '',
+						onUpdateValue: (e: any) => {
+							console.log(e);
+						},   
+					},
+					formItemClass: 'col-span-1',
+				},  {
+				fieldName: 'auditNo',
+				component: 'Input',
+				label: '审核记录编号',
+				componentProps: {
+					placeholder: '请输入审核记录编号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'applyNo',
+				component: 'Input',
+				label: '申请单号',
+				componentProps: {
+					placeholder: '请输入申请单号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'auditDeptId',
+				component: 'InputNumber',
+				label: '审核方机构ID',
+				componentProps: {
+					placeholder: '请输入审核方机构ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入审核方机构ID', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'auditorUserId',
+				component: 'InputNumber',
+				label: '审核人ID',
+				componentProps: {
+					placeholder: '请输入审核人ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'auditResult',
+				component: 'InputNumber',
+				label: '审核结果：0通过，1驳回',
+				componentProps: {
+					placeholder: '请输入审核结果：0通过，1驳回',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入审核结果：0通过，1驳回', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'auditOpinion',
+				component: 'Input',
+				label: '审核意见',
+				componentProps: {
+					placeholder: '请输入审核意见',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'auditTime',
+				component: 'DatePicker',
+				label: '审核时间',
+				componentProps: {
+					type: 'datetime',
+					clearable: true,
+					showTime: true,
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:'selectRequired',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'tenantId',
+				component: 'Input',
+				label: '租户ID',
+				componentProps: {
+					placeholder: '请输入租户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},];
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/view.vue
new file mode 100644
index 0000000..6e34248
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tFinanceAuditRecord/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/common/tFinanceAuditRecord';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/edit.vue
new file mode 100644
index 0000000..122bd9c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/edit.vue
@@ -0,0 +1,129 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/common/tMessageLog';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { id, update, view } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ messageLogId: id });
+      // 将 userIds JSON 字符串转换为数组
+      if (record.userIds && typeof record.userIds === 'string') {
+        try {
+          record.userIds = JSON.parse(record.userIds);
+        } catch {
+          record.userIds = [];
+        }
+      } else if (!record.userIds) {
+        record.userIds = [];
+      }
+      // 等待表单渲染完成后再设置值
+      await nextTick();
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      await formApi.setValues(record);
+      // 单独设置开关字段
+      await formApi.setFieldValue('isRecall', record.isRecall);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false });
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            'only-read': true,
+          },
+        },
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            'only-read': false,
+          },
+        },
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    // 将 userIds 数组转换为 JSON 字符串
+    if (Array.isArray(data.userIds)) {
+      data.userIds = JSON.stringify(data.userIds);
+    }
+    await Edit(data);
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+</script>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/index.vue
new file mode 100644
index 0000000..39487f8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/index.vue
@@ -0,0 +1,417 @@
+<script lang="ts" setup>
+import type { RowType } from './model';
+
+import type { VbenFormProps } from '#/adapter/form';
+import type {
+  VxeGridListeners,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+
+import { h, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { useAccessStore, useUserStore } from '@vben/stores';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { useWebSocket } from '@vueuse/core';
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Delete, Export, List } from '#/api/common/tMessageLog';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editDrawer from './edit.vue';
+import { columns, querySchema } from './model';
+import viewDrawer from './view.vue';
+
+const accessStore = useAccessStore();
+const userStore = useUserStore();
+const route = useRoute();
+
+const wsState = reactive({
+  server: getWsServerUrl(),
+});
+
+const {
+  close: closeWs,
+  data: wsData,
+  open: openWs,
+  send: sendWs,
+  status: wsStatus,
+} = useWebSocket(() => wsState.server, {
+  autoReconnect: true,
+  heartbeat: false,
+  immediate: false,
+});
+
+const formOptions: VbenFormProps = {
+  collapsed: false,
+  fieldMappingTime: [['sendTime', ['sendTimeStart', 'sendTimeEnd']]],
+  schema: querySchema,
+  showCollapseButton: true,
+  submitOnChange: true,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'messageLogId',
+  },
+  columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  rowConfig: {
+    keyField: 'messageLogId',
+  },
+  showOverflow: false,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await List({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: false,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: Partial<VxeGridListeners> = {
+  checkboxAll: handleCheckboxChange,
+  checkboxChange: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+});
+
+const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+});
+
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+}
+
+function handleOpenDetailById(messageLogId?: number | string) {
+  const id = Number(messageLogId || 0);
+  if (!id) {
+    return;
+  }
+  drawerApi.setData({
+    record: {
+      messageLogId: id,
+    },
+  });
+  drawerApi.open();
+}
+
+function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+}
+
+function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.messageLogId, update: true, view: false });
+  editDrawerApi.open();
+}
+
+async function handleDelete(row: RowType) {
+  await Delete({ messageLogId: [row.messageLogId] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+    ids.push(String(row.messageLogId));
+  }
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的 ${ids.length} 条记录吗？`,
+    onOk: async () => {
+      await Delete({ messageLogId: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(
+    Export,
+    '消息日志',
+    {
+      exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+      ...formValues,
+      page: 1,
+    },
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+
+onMounted(() => {
+  if (accessStore.accessToken) {
+    openWs();
+  }
+});
+
+onUnmounted(() => {
+  closeWs();
+});
+
+watch(
+  () => accessStore.accessToken,
+  (token) => {
+    if (!token) {
+      closeWs();
+      return;
+    }
+    wsState.server = getWsServerUrl();
+    if (wsStatus.value !== 'OPEN') {
+      openWs();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(wsStatus, (status) => {
+  if (status === 'OPEN') {
+    sendWsLogin();
+  }
+});
+
+watch(
+  () => userStore.userInfo?.id ?? userStore.userInfo?.userId ?? 0,
+  (userId) => {
+    if (wsStatus.value === 'OPEN' && Number(userId) > 0) {
+      sendWsLogin();
+    }
+  },
+);
+
+watch(wsData, (value) => {
+  if (!value) {
+    return;
+  }
+  handleWsMessage(value);
+});
+
+// 详情抽屉挂载并注册 API 后，再处理通知跳转携带的消息 ID。
+onMounted(() => {
+  watch(
+    () => route.query.messageLogId,
+    (messageLogId) => {
+      if (messageLogId) {
+        const id = Array.isArray(messageLogId) ? messageLogId[0] : messageLogId;
+        handleOpenDetailById(id === null || id === undefined ? undefined : id);
+      }
+    },
+    {
+      immediate: true,
+      flush: 'post',
+    },
+  );
+});
+
+function getWsServerUrl() {
+  const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  return `${protocol}${window.location.host}/api/monitor/ws?access_token=${encodeURIComponent(
+    String(accessStore.accessToken),
+  )}`;
+}
+
+function parseWsData(value: string) {
+  try {
+    const data = JSON.parse(value);
+    if (
+      typeof data.d === 'string' &&
+      !data.d.startsWith('{') &&
+      !data.d.startsWith('[')
+    ) {
+      try {
+        data.d = atob(data.d);
+      } catch {
+        return data;
+      }
+    }
+    if (
+      typeof data.d === 'string' &&
+      (data.d.startsWith('{') || data.d.startsWith('['))
+    ) {
+      data.d = JSON.parse(data.d);
+    }
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+function isWsControlEvent(eventName: string) {
+  return [
+    'connected',
+    'join',
+    'joins',
+    'login',
+    'ping',
+    'quit',
+    'quits',
+  ].includes(eventName);
+}
+
+function handleWsMessage(value: string) {
+  const wsMessage = parseWsData(value);
+  if (!wsMessage?.e) {
+    return;
+  }
+  const eventName = String(wsMessage.e);
+  if (isWsControlEvent(eventName)) {
+    return;
+  }
+  if (eventName !== 'message:new' && !eventName.includes('message')) {
+    return;
+  }
+  handleRefresh();
+}
+
+function sendWsLogin() {
+  const userId = Number(
+    userStore.userInfo?.id || userStore.userInfo?.userId || 0,
+  );
+  if (!userId) {
+    return;
+  }
+  sendWs(
+    JSON.stringify({
+      e: 'login',
+      d: {
+        userId,
+      },
+    }),
+  );
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="消息日志">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleAdd"
+          v-access:code="'cpm:common:tMessageLog:edit'"
+        >
+          新增
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :disabled="!CheckboxChecked"
+          :icon="h(MdiDelete)"
+          @click="handleMultiDelete"
+          v-access:code="'cpm:common:tMessageLog:delete'"
+        >
+          删除
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+          v-access:code="'cpm:common:tMessageLog:export'"
+        >
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:common:tMessageLog:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:common:tMessageLog:edit'"
+          >
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:common:tMessageLog:delete']" type="code">
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/model.tsx
new file mode 100644
index 0000000..90e1413
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/model.tsx
@@ -0,0 +1,379 @@
+import { h } from 'vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import { getDictOptions } from '#/utils/dict';
+import DictEnum from '#/constants/DictEnum';
+import { renderDict, type MemberSumma } from '#/utils';
+import { getSysUserListApi } from '#/api/system/user';
+
+export class State {
+  public messageLogId = 0; // 主键ID
+  public messageType = 0; // 消息类型 1系统通知 2活动通知 3订单通知 4账户通知
+  public sendUserType = 0; // 发送用户类型 1代理商 2终端用户
+  public userIds = null; // 接收用户ID集合(JSON数组)
+  public messageTitle = ''; // 消息标题
+  public messageContent = ''; // 消息内容
+  public messageLink = ''; // 跳转链接地址
+  public sendTime = ''; // 发送时间
+  public isRecall = 0; // 是否撤回 0未撤回 1已撤回
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+    fieldName: 'messageType',
+    component: 'Select',
+    label: '消息类型',
+    componentProps: {
+      options: getDictOptions(DictEnum.MESSAGE_TYPE, true),
+      placeholder: '请选择消息类型',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: null,
+    formItemClass: 'col-span-1',
+  },
+
+  {
+    fieldName: 'messageTitle',
+    component: 'Input',
+    label: '消息标题',
+    componentProps: {
+      placeholder: '请输入消息标题',
+    },
+    rules: null,
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'sendTime',
+    component: 'RangePicker',
+    label: '发送时间',
+    componentProps: {
+      clearable: true,
+      placeholder: ['开始日期', '结束日期'],
+      valueFormat: 'YYYY-MM-DD',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: null,
+    formItemClass: 'col-span-1',
+  },
+];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '消息标题',
+    field: 'messageTitle',
+    align: 'left',
+    width: -1,
+  },
+  {
+    title: '消息类型',
+    field: 'messageType',
+    params: { dictType: DictEnum.MESSAGE_TYPE },
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.messageType, DictEnum.MESSAGE_TYPE);
+      },
+    },
+  },
+  {
+    title: '发送用户类型',
+    field: 'sendUserType',
+    params: { dictType: DictEnum.SEND_USER_TYPE },
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.sendUserType, DictEnum.SEND_USER_TYPE);
+      },
+    },
+  },
+  {
+    title: '跳转链接地址',
+    field: 'messageLink',
+    align: 'left',
+    width: 300,
+    slots: {
+      default({ row }) {
+        if (!row.messageLink) return '-';
+        const text =
+          row.messageLink.length > 30
+            ? row.messageLink.substring(0, 30) + '...'
+            : row.messageLink;
+        return h(
+          'a',
+          {
+            href: row.messageLink,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+            style: 'color: #1908b3ff; text-decoration: none;',
+          },
+          text,
+        );
+      },
+    },
+  },
+  {
+    title: '发送时间',
+    field: 'sendTime',
+    align: 'left',
+    width: -1,
+  },
+  {
+    title: '是否撤回',
+    field: 'isRecall',
+    params: { dictType: DictEnum.IS_RECALL },
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.isRecall, DictEnum.IS_RECALL);
+      },
+    },
+  },
+
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  messageLogId: number;
+  messageType: number;
+  sendUserType: number;
+  userIds: any;
+  messageTitle: string;
+  messageContent: string;
+  messageLink: string;
+  sendTime: string;
+  isRecall: number;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+}
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {
+    field: 'messageType',
+    label: '消息类型',
+    render(value: any) {
+      return renderDict(value, DictEnum.MESSAGE_TYPE);
+    },
+  },
+  {
+    field: 'sendUserType',
+    label: '发送用户类型',
+    render(value: any) {
+      return renderDict(value, DictEnum.SEND_USER_TYPE);
+    },
+  },
+
+  { field: 'messageTitle', label: '消息标题' },
+  { field: 'messageContent', label: '消息内容' },
+  {
+    field: 'messageLink',
+    label: '跳转链接地址',
+    render(value: any) {
+      if (!value) return '-';
+      return h(
+        'a',
+        {
+          href: value,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+          style: 'color: #1677ff; text-decoration: none;',
+        },
+        value,
+      );
+    },
+  },
+  { field: 'sendTime', label: '发送时间' },
+  {
+    field: 'isRecall',
+    label: '是否撤回',
+    render(value: any) {
+      return renderDict(value, DictEnum.IS_RECALL);
+    },
+  },
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'messageLogId',
+    component: 'Input',
+    label: '主键ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'messageType',
+    component: 'Select',
+    label: '消息类型',
+    componentProps: {
+      placeholder: '请选择消息类型',
+      options: getDictOptions('message_type', true),
+    },
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'sendUserType',
+    component: 'Select',
+    label: '发送用户类型',
+    componentProps: {
+      options: getDictOptions('send_user_type', true),
+      placeholder: '请选择发送用户类型',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'userIds',
+    component: 'ApiSelect',
+    label: '接收用户',
+    componentProps: {
+      mode: 'multiple',
+      placeholder: '请选择接收用户',
+      showSearch: true,
+      allowClear: true,
+      api: getSysUserListApi,
+      labelField: 'nickName',
+      valueField: 'userId',
+      afterFetch: (res: any) => {
+        return (res.items || []).map((user: any) => ({
+          ...user,
+          label: user.nickName || user.userName,
+          value: user.userId,
+        }));
+      },
+      params: {
+        page: 1,
+        pageSize: 1000,
+      },
+    },
+    rules: null,
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'messageTitle',
+    component: 'Input',
+    label: '消息标题',
+    componentProps: {
+      placeholder: '请输入消息标题',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'messageContent',
+    component: 'Input',
+    label: '消息内容',
+    componentProps: {
+      placeholder: '请输入消息内容',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'messageLink',
+    component: 'Input',
+    label: '跳转链接地址',
+    componentProps: {
+      placeholder: '请输入跳转链接地址',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'sendTime',
+    component: 'DatePicker',
+    label: '发送时间',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    componentProps: {
+      type: 'datetime',
+      placeholder: '请选择发送时间',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+
+    formItemClass: 'col-span-1',
+  },
+
+  {
+    fieldName: 'isRecall',
+    component: 'Switch',
+    label: '是否撤回',
+    defaultValue: 0,
+    componentProps: {
+      checkedValue: 1,
+      unCheckedValue: 0,
+      style: { width: '50px' },
+      onUpdateValue: (value: any) => {
+        console.log(value);
+      },
+    },
+    rules: null,
+    formItemClass: 'col-span-1',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/view.vue
new file mode 100644
index 0000000..47ca86c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tMessageLog/view.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useVbenDrawer } from '@vben/common-ui';
+import { Description, useDescription } from '#/components/description';
+import { viewSchema, type RowType } from './model';
+import { View } from '#/api/common/tMessageLog';
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+});
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ messageLogId: record.messageLogId });
+  setDescProps({ data: record2 }, true);
+}
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/edit.vue
new file mode 100644
index 0000000..afceafc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/edit.vue
@@ -0,0 +1,110 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/common/tNotifyLog';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { id, update, view } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ notifyId: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false });
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            'only-read': true,
+          },
+        },
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            'only-read': false,
+          },
+        },
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await Edit(data);
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+</script>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/index.vue
new file mode 100644
index 0000000..a224416
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/index.vue
@@ -0,0 +1,373 @@
+<script lang="ts" setup>
+import type { RowType } from './model';
+
+import type { VbenFormProps } from '#/adapter/form';
+import type {
+  VxeGridListeners,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+
+import { h, onUnmounted, reactive, ref, watch } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { useAccessStore, useUserStore } from '@vben/stores';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { useWebSocket } from '@vueuse/core';
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Delete, Export, List } from '#/api/common/tNotifyLog';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editDrawer from './edit.vue';
+import { columns, querySchema } from './model';
+import viewDrawer from './view.vue';
+
+const accessStore = useAccessStore();
+const userStore = useUserStore();
+
+const wsState = reactive({
+  server: getWsServerUrl(),
+});
+
+const {
+  close: closeWs,
+  data: wsData,
+  open: openWs,
+  send: sendWs,
+  status: wsStatus,
+} = useWebSocket(() => wsState.server, {
+  autoReconnect: true,
+  heartbeat: false,
+  immediate: false,
+});
+
+const formOptions: VbenFormProps = {
+  collapsed: false,
+  fieldMappingTime: [['sendTime', ['sendTimeStart', 'sendTimeEnd']]],
+  schema: querySchema,
+  showCollapseButton: true,
+  submitOnChange: true,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'id',
+  },
+  columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  rowConfig: {
+    keyField: 'id',
+  },
+  showOverflow: false,
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await List({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: false,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: Partial<VxeGridListeners> = {
+  checkboxAll: handleCheckboxChange,
+  checkboxChange: handleCheckboxChange,
+};
+
+const checkboxChecked = ref(false);
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+});
+
+const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+});
+
+function handleCheckboxChange() {
+  checkboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+}
+
+function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+}
+
+function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.notifyId, update: true, view: false });
+  editDrawerApi.open();
+}
+
+async function handleDelete(row: RowType) {
+  await Delete({ notifyId: [row.notifyId] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = rows.map((row) => String(row.notifyId));
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的 ${ids.length} 条记录吗？`,
+    onOk: async () => {
+      await Delete({ notifyId: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(
+    Export,
+    '通知日志',
+    {
+      exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+      ...formValues,
+      page: 1,
+    },
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+
+function getWsServerUrl() {
+  const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  return `${protocol}${window.location.host}/api/monitor/ws?access_token=${encodeURIComponent(
+    String(accessStore.accessToken),
+  )}`;
+}
+
+function parseWsData(value: string) {
+  try {
+    const data = JSON.parse(value);
+    if (
+      typeof data.d === 'string' &&
+      !data.d.startsWith('{') &&
+      !data.d.startsWith('[')
+    ) {
+      try {
+        data.d = atob(data.d);
+      } catch {
+        return data;
+      }
+    }
+    if (
+      typeof data.d === 'string' &&
+      (data.d.startsWith('{') || data.d.startsWith('['))
+    ) {
+      data.d = JSON.parse(data.d);
+    }
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+function isWsControlEvent(eventName: string) {
+  return [
+    'connected',
+    'join',
+    'joins',
+    'login',
+    'ping',
+    'quit',
+    'quits',
+  ].includes(eventName);
+}
+
+function sendWsLogin() {
+  const userId = Number(
+    userStore.userInfo?.id || userStore.userInfo?.userId || 0,
+  );
+  if (!userId) {
+    return;
+  }
+  sendWs(
+    JSON.stringify({
+      e: 'login',
+      d: { userId },
+    }),
+  );
+}
+
+function handleWsMessage(value: string) {
+  const wsMessage = parseWsData(value);
+  if (!wsMessage?.e) {
+    return;
+  }
+  const eventName = String(wsMessage.e);
+  if (isWsControlEvent(eventName)) {
+    return;
+  }
+  if (eventName === 'notify:new' || eventName.includes('notify')) {
+    handleRefresh();
+  }
+}
+
+onUnmounted(() => {
+  closeWs();
+});
+
+watch(
+  () => accessStore.accessToken,
+  (token) => {
+    if (!token) {
+      closeWs();
+      return;
+    }
+    wsState.server = getWsServerUrl();
+    if (wsStatus.value !== 'OPEN') {
+      openWs();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(wsStatus, (status) => {
+  if (status === 'OPEN') {
+    sendWsLogin();
+  }
+});
+
+watch(
+  () => userStore.userInfo?.id ?? userStore.userInfo?.userId ?? 0,
+  (userId) => {
+    if (wsStatus.value === 'OPEN' && Number(userId) > 0) {
+      sendWsLogin();
+    }
+  },
+);
+
+watch(wsData, (value) => {
+  if (!value) {
+    return;
+  }
+  handleWsMessage(value);
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="通知日志">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          v-access:code="'cpm:common:tNotifyLog:edit'"
+          @click="handleAdd"
+        >
+          新增
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :disabled="!checkboxChecked"
+          :icon="h(MdiDelete)"
+          v-access:code="'cpm:common:tNotifyLog:delete'"
+          @click="handleMultiDelete"
+        >
+          删除
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          v-access:code="'cpm:common:tNotifyLog:export'"
+          @click="handleExport"
+        >
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            v-access:code="'cpm:common:tNotifyLog:view'"
+            @click="handlePreview(row)"
+          >
+            查看
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            v-access:code="'cpm:common:tNotifyLog:edit'"
+            @click="handleEdit(row)"
+          >
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:common:tNotifyLog:delete']" type="code">
+            <Popconfirm
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              title="确定删除吗？"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                danger
+                type="link"
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/model.tsx
new file mode 100644
index 0000000..21769b0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/model.tsx
@@ -0,0 +1,187 @@
+import { cloneDeep } from 'lodash-es';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import DictEnum from '#/constants/DictEnum';
+import { renderDict, type MemberSumma } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+export class State {
+  public notifyId = 0;
+  public notifyTitle = '';
+  public notifyContent = '';
+  public sendUserType = 0;
+  public sendTime = '';
+  public tenantId = '';
+  public createdDept = 0;
+  public createdBy = 0;
+  public createdBySumma?: null | MemberSumma = null;
+  public createdAt = '';
+  public updatedBy = 0;
+  public updatedBySumma?: null | MemberSumma = null;
+  public updatedAt = '';
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+export const querySchema: VbenFormSchema[] = [
+  {
+    fieldName: 'notifyTitle',
+    component: 'Input',
+    label: '通知标题',
+    componentProps: {
+      placeholder: '请输入通知标题',
+    },
+    rules: null,
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'sendTime',
+    component: 'RangePicker',
+    label: '发送时间',
+    componentProps: {
+      clearable: true,
+      placeholder: ['开始日期', '结束日期'],
+      valueFormat: 'YYYY-MM-DD',
+    },
+    rules: null,
+    formItemClass: 'col-span-1',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '\u6807\u9898',
+    field: 'notifyTitle',
+    align: 'left',
+    width: -1,
+  },
+  {
+    title: '\u53d1\u9001\u7528\u6237\u7c7b\u578b',
+    field: 'sendUserType',
+    params: { dictType: DictEnum.SEND_USER_TYPE },
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>
+        renderDict(row.sendUserType, DictEnum.SEND_USER_TYPE),
+    },
+  },
+  {
+    title: '\u53d1\u9001\u65f6\u95f4',
+    field: 'sendTime',
+    align: 'left',
+    width: -1,
+  },
+  {
+    title: '\u64cd\u4f5c',
+    width: 120,
+    slots: { default: 'action' },
+  },
+];
+
+export interface RowType {
+  notifyId: number;
+  notifyTitle: string;
+  notifyContent: string;
+  sendUserType: number;
+  sendTime: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+}
+
+export const viewSchema: DescItem[] = [
+  { field: 'notifyTitle', label: '\u6807\u9898' },
+  { field: 'notifyContent', label: '\u5185\u5bb9' },
+  {
+    field: 'sendUserType',
+    label: '\u53d1\u9001\u7528\u6237\u7c7b\u578b',
+    render(value: any) {
+      return renderDict(value, DictEnum.SEND_USER_TYPE);
+    },
+  },
+  { field: 'sendTime', label: '\u53d1\u9001\u65f6\u95f4' },
+];
+
+export const editSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'notifyId',
+    component: 'Input',
+    label: '\u4e3b\u952eID',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    componentProps: {
+      placeholder: '',
+    },
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'notifyTitle',
+    component: 'Input',
+    label: '\u6807\u9898',
+    componentProps: {
+      placeholder: '\u8bf7\u8f93\u5165\u6807\u9898',
+    },
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'notifyContent',
+    component: 'Input',
+    label: '\u5185\u5bb9',
+    componentProps: {
+      placeholder: '\u8bf7\u8f93\u5165\u5185\u5bb9',
+    },
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'sendUserType',
+    component: 'Select',
+    label: '\u53d1\u9001\u7528\u6237\u7c7b\u578b',
+    componentProps: {
+      options: getDictOptions('send_user_type', true),
+      placeholder: '\u8bf7\u9009\u62e9\u53d1\u9001\u7528\u6237\u7c7b\u578b',
+    },
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'sendTime',
+    component: 'DatePicker',
+    label: '\u53d1\u9001\u65f6\u95f4',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    componentProps: {
+      clearable: true,
+      showTime: true,
+      type: 'datetime',
+    },
+    rules: null,
+    formItemClass: 'col-span-1',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/view.vue
new file mode 100644
index 0000000..63389a7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tNotifyLog/view.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useVbenDrawer } from '@vben/common-ui';
+import { Description, useDescription } from '#/components/description';
+import { viewSchema, type RowType } from './model';
+import { View } from '#/api/common/tNotifyLog';
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+});
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ notifyId: record.notifyId });
+  setDescProps({ data: record2 }, true);
+}
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/edit.vue
new file mode 100644
index 0000000..915b479
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/edit.vue
@@ -0,0 +1,114 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/common/tProfitAccountMonthBill';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/index.vue
new file mode 100644
index 0000000..5f29a75
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/index.vue
@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+import dayjs from 'dayjs';
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { DatePicker, message } from 'ant-design-vue';
+
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { GetProfitBillSummary } from '#/api/common/tProfitAccountMonthBill';
+import { List as FinWithdrawableChangeList } from '#/api/common/tFinWithdrawableChange';
+
+import {
+  billDetailColumns,
+  formatMoney,
+  getAccountPeriodParams,
+  getBillRangeText,
+  getBillStatusText,
+  getProfitSummaryParams,
+  getSummaryItems,
+  normalizeResponseData,
+  querySchema,
+  type RowData,
+} from './model';
+
+const summaryLoading = ref(false);
+const summary = ref<RowData>({});
+const accountPeriod = ref(dayjs().subtract(1, 'month'));
+const accountPeriodValue = computed(() => accountPeriod.value.format('YYYY-MM'));
+const billRangeText = computed(() => getBillRangeText(accountPeriodValue.value));
+const summaryItems = computed(() => getSummaryItems(summary.value));
+
+function disabledAccountPeriodDate(current: dayjs.Dayjs) {
+  return current && current.isAfter(dayjs(), 'month');
+}
+
+const formOptions = {
+  collapsed: false,
+  schema: querySchema,
+  showCollapseButton: false,
+  showDefaultActions: false,
+  submitOnChange: false,
+  submitOnEnter: false,
+} as VbenFormProps;
+
+const gridOptions: VxeTableGridOptions<RowData> = {
+  columns: billDetailColumns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await FinWithdrawableChangeList({
+          ...getAccountPeriodParams(accountPeriodValue.value),
+          page: page.currentPage,
+          pageSize: page.pageSize,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  showOverflow: false,
+  toolbarConfig: {
+    custom: true,
+    export: false,
+    refresh: true,
+    resizable: true,
+    search: false,
+    zoom: true,
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+onMounted(async () => {
+  await loadSummary();
+});
+
+watch(accountPeriodValue, async () => {
+  await loadSummary();
+  await handleRefresh();
+});
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+async function loadSummary() {
+  summaryLoading.value = true;
+  try {
+    const res = await GetProfitBillSummary(getProfitSummaryParams(accountPeriodValue.value));
+    summary.value = normalizeResponseData(res);
+  } catch (error) {
+    console.error(error);
+    message.error('账单汇总加载失败');
+  } finally {
+    summaryLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="h-full bg-[#f5f7fb] p-3 dark:bg-transparent">
+      <div class="bill-page flex h-full min-h-0 flex-col bg-white px-4 py-3 dark:bg-[#1f1f1f]">
+        <div class="mb-2 text-[22px] font-medium leading-8 text-[#1f2329] dark:text-[#f2f2f2]">
+          月账单-盈利账户
+        </div>
+
+        <div class="mb-3 flex items-center gap-3 text-sm text-[#1f2329] dark:text-[#f2f2f2]">
+          <span>账单月份</span>
+          <DatePicker
+            v-model:value="accountPeriod"
+            class="w-[140px]"
+            format="YYYY-MM"
+            picker="month"
+            :allow-clear="false"
+            :disabled-date="disabledAccountPeriodDate"
+          />
+        </div>
+
+        <div class="mb-2 overflow-hidden rounded border border-[#edf1f7] bg-white dark:border-[#303030] dark:bg-[#1f1f1f]">
+          <div class="border-b border-[#edf1f7] px-4 py-2 text-sm text-[#1f2329] dark:border-[#303030] dark:text-[#f2f2f2]">
+            {{ Number(accountPeriodValue.slice(5)) }}月概览
+            <span class="ml-3">账单周期：{{ billRangeText }}</span>
+            <span class="ml-6">状态：{{ getBillStatusText(summary) }}</span>
+          </div>
+          <div class="bill-summary grid gap-y-3 px-4 py-3">
+            <div
+              v-for="item in summaryItems"
+              :key="item.label"
+              class="bill-summary-item min-h-[64px] px-4"
+            >
+              <div class="mb-3 text-sm text-[#4e5969] dark:text-[#a3a3a3]">{{ item.label }}</div>
+              <div class="text-[22px] font-medium text-[#1f2329] dark:text-[#f2f2f2]">
+                <span v-if="summaryLoading">--</span>
+                <span v-else>{{ formatMoney(item.value) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <Grid class="min-h-0 flex-1" table-title="账单明细" />
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.bill-page {
+  --bill-border-color: #edf1f7;
+  overflow: hidden;
+}
+
+:global(.dark) .bill-page {
+  --bill-border-color: #303030;
+}
+
+.bill-summary {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.bill-summary-item + .bill-summary-item {
+  border-left: 1px solid var(--bill-border-color);
+}
+
+@media (max-width: 1280px) {
+  .bill-summary-item {
+    border-left: 0 !important;
+  }
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/model.tsx
new file mode 100644
index 0000000..a369fae
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/model.tsx
@@ -0,0 +1,307 @@
+import { cloneDeep } from 'lodash-es';
+
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import DictEnum from '#/constants/DictEnum';
+import { renderDict } from '#/utils';
+
+export type RowData = Record<string, any>;
+
+export class State {
+  public id = 0;
+  public deptId = 0;
+  public accountPeriod = '';
+  public openingBalance = 0;
+  public commissionIncome = 0;
+  public balanceTransferInIncome = 0;
+  public withdrawalExpense = 0;
+  public withdrawableTransferOutExpense = 0;
+  public profitCreditRepayExpense = 0;
+  public totalIncome = 0;
+  public totalExpense = 0;
+  public closingBalance = 0;
+  public incomeCount = 0;
+  public expenseCount = 0;
+  public billStatus = 1;
+  public settleTime = '';
+  public settleBy = 0;
+  public remark = '';
+  public tenantId = '';
+  public createdDept = 0;
+  public createdBy = 0;
+  public createdAt = '';
+  public updatedBy = 0;
+  public updatedAt = '';
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export interface RowType extends State {}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+export const querySchema: VbenFormSchema[] = [];
+
+export const editSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: { show: () => false, triggerFields: [''] },
+    fieldName: 'id',
+    label: '账单ID',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'deptId',
+    label: '机构ID',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'accountPeriod',
+    label: '账期YYYY-MM',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'totalIncome',
+    label: '本月收入总额',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'totalExpense',
+    label: '本月支出总额',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'billStatus',
+    label: '账单状态',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'remark',
+    label: '备注',
+  },
+];
+
+export const viewSchema: DescItem[] = [
+  { field: 'id', label: '账单ID' },
+  { field: 'deptId', label: '机构ID' },
+  { field: 'accountPeriod', label: '账期YYYY-MM' },
+  { field: 'openingBalance', label: '月初余额' },
+  { field: 'commissionIncome', label: '分润收入' },
+  { field: 'balanceTransferInIncome', label: '余额转提现收入' },
+  { field: 'withdrawalExpense', label: '提现支出' },
+  { field: 'withdrawableTransferOutExpense', label: '可提现转余额支出' },
+  { field: 'profitCreditRepayExpense', label: '盈利账户还款支出' },
+  { field: 'totalIncome', label: '本月收入总额' },
+  { field: 'totalExpense', label: '本月支出总额' },
+  { field: 'closingBalance', label: '月末余额' },
+  { field: 'incomeCount', label: '收入笔数' },
+  { field: 'expenseCount', label: '支出笔数' },
+  { field: 'billStatus', label: '账单状态' },
+  { field: 'settleTime', label: '结算时间' },
+  { field: 'settleBy', label: '结算人ID' },
+  { field: 'remark', label: '备注' },
+  { field: 'tenantId', label: '租户ID' },
+  { field: 'createdDept', label: '创建部门' },
+  { field: 'createdBy', label: '创建者' },
+  { field: 'createdAt', label: '创建时间' },
+  { field: 'updatedBy', label: '更新者' },
+  { field: 'updatedAt', label: '更新时间' },
+];
+
+export const billSummaryFields = [
+  {
+    keys: ['incomeAmount', 'totalIncome', 'commissionIncome', 'income_amount', 'total_income'],
+    label: '收入',
+  },
+  {
+    keys: ['expenseAmount', 'totalExpense', 'withdrawalExpense', 'expense_amount', 'total_expense'],
+    label: '支出',
+  },
+];
+
+export const billDetailColumns: VxeGridProps['columns'] = [
+  {
+    title: '单号',
+    field: 'sourceNo',
+    align: 'left',
+  },
+  {
+    title: '账户名称',
+    field: 'deptName',
+    align: 'left',
+  },
+  {
+    title: '账单类型',
+    field: 'incomeExpenseType',
+    align: 'left',
+    slots: {
+      default: ({ row }) => renderDict(row.incomeExpenseType, DictEnum.INCOME_EXPENSE_TYPE),
+    },
+  },
+  {
+    title: '账单月份',
+    field: 'accountPeriod',
+    align: 'left',
+  },
+  {
+    title: '费用类型',
+    field: 'orderType',
+    align: 'left',
+    slots: {
+      default: ({ row }) => renderDict(row.orderType, DictEnum.ORDER_TYPE),
+    },
+  },
+  {
+    title: '交易类型',
+    field: 'changeType',
+    align: 'left',
+    slots: {
+      default: ({ row }) => renderDict(row.changeType, DictEnum.CHANGE_TYPE),
+    },
+  },
+  {
+    title: '交易金额',
+    field: 'changeAmount',
+    align: 'left',
+    slots: {
+      default: ({ row }) => {
+        const val = row?.changeAmount ?? row?.change_amount ?? row?.amount ?? '-';
+        return typeof val === 'number' ? `¥${val.toFixed(2)}` : val;
+      },
+    },
+  },
+  {
+    title: '账单产生时间',
+    field: 'createdAt',
+    align: 'left',
+  },
+];
+
+export const columns = billDetailColumns;
+
+export function getPreviousMonth() {
+  const date = new Date();
+  date.setMonth(date.getMonth() - 1);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  return `${year}-${month}`;
+}
+
+export function getAccountPeriodParams(accountPeriod: string) {
+  return {
+    accountPeriod,
+  };
+}
+
+export function getProfitSummaryParams(accountPeriod: string) {
+  return {
+    month: accountPeriod,
+  };
+}
+
+export function getBillRangeText(accountPeriod: string) {
+  const [yearValue, monthValue] = accountPeriod.split('-').map(Number);
+  const year = yearValue || new Date().getFullYear();
+  const month = monthValue || 1;
+  const lastDay = new Date(year, month, 0).getDate();
+  return `${accountPeriod}-01 至 ${accountPeriod}-${String(lastDay).padStart(2, '0')}`;
+}
+
+export function normalizeResponseData(value: any) {
+  return value?.data && !Array.isArray(value.data) ? value.data : value || {};
+}
+
+export function getSummaryItems(summary: RowData) {
+  return billSummaryFields.map((item) => ({
+    label: item.label,
+    value: getMoneyValue(summary, item.keys),
+  }));
+}
+
+export function getValue(row: RowData, keys: string[], fallback: any = '-') {
+  for (const key of keys) {
+    const value = row?.[key];
+    if (value !== undefined && value !== null && value !== '') {
+      return value;
+    }
+  }
+  return fallback;
+}
+
+export function getMoneyValue(row: RowData, keys: string[]) {
+  return Number(getValue(row, keys, 0) || 0);
+}
+
+export function formatMoney(value: any) {
+  const numberValue = Number(value || 0);
+  return `¥${numberValue.toFixed(2)}`;
+}
+
+export function hasBillSummaryData(summary: RowData) {
+  return ['totalIncome', 'totalExpense', 'incomeAmount', 'expenseAmount'].some(
+    (key) => summary?.[key] !== undefined && summary?.[key] !== null,
+  );
+}
+
+export function getBillStatusText(summary: RowData) {
+  return hasBillSummaryData(summary) ? '已出账' : '未出账';
+}
+
+export function renderIncomeExpenseType(row: RowData) {
+  const value = getValue(row, ['incomeExpenseType', 'income_expense_type', 'billType', 'bill_type']);
+  return value === '-' ? '-' : renderDict(value, DictEnum.INCOME_EXPENSE_TYPE);
+}
+
+export function getBillType(row: RowData) {
+  return getValue(row, ['incomeExpenseType', 'income_expense_type', 'billType', 'bill_type']);
+}
+
+export function getFeeType(row: RowData) {
+  return getValue(row, [
+    'feeTypeName',
+    'feeType',
+    'costTypeName',
+    'changeTypeName',
+    'transactionTypeName',
+    'remark',
+  ]);
+}
+
+export function getTradeType(row: RowData) {
+  return getValue(row, ['transactionType', 'transaction_type', 'changeType', 'change_type', 'tradeType', 'trade_type']);
+}
+
+export function getSourceNo(row: RowData) {
+  return getValue(row, ['serialNo', 'sourceNo', 'source_no', 'orderSn', 'id']);
+}
+
+export function getAccountName(row: RowData) {
+  return getValue(row, ['accountName', 'account_name', 'deptName', 'dept_name'], '盈利账户');
+}
+
+export function getAccountPeriodValue(row: RowData) {
+  return getValue(row, ['accountPeriod', 'account_period'], getPreviousMonth());
+}
+
+export function getCreatedTime(row: RowData) {
+  return getValue(row, ['transactionTime', 'transaction_time', 'createdAt', 'created_at', 'billTime', 'bill_time']);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/view.vue
new file mode 100644
index 0000000..79041de
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tProfitAccountMonthBill/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/common/tProfitAccountMonthBill';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/edit.vue
new file mode 100644
index 0000000..030ea95
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/edit.vue
@@ -0,0 +1,113 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/common/tWoCommunication';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/index.vue
new file mode 100644
index 0000000..c97f6c2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/index.vue
@@ -0,0 +1,1024 @@
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useWebSocket } from '@vueuse/core';
+import { useAccessStore, useUserStore } from '@vben/stores';
+import {
+  Avatar,
+  Button,
+  Descriptions,
+  DescriptionsItem,
+  Empty,
+  Rate,
+  Input,
+  Modal,
+  Image,
+  Spin,
+  Steps,
+  Tag,
+  Timeline,
+  TimelineItem,
+  message,
+} from 'ant-design-vue';
+import { Page } from '@vben/common-ui';
+
+import { FileUpload } from '#/components/upload';
+import {
+  List as CommunicationList,
+  Message as SendMessage,
+  View as CommunicationView,
+} from '#/api/common/tWoCommunication';
+import {
+  Cancel,
+  Close,
+  Evaluate,
+  Resolve,
+  Transfer,
+  View as WorkOrderView,
+} from '#/api/common/tWoMain';
+
+type RowData = Record<string, any>;
+
+interface AttachmentItem {
+  ext: string;
+  name: string;
+  raw: any;
+  url: string;
+}
+
+interface TimelineRecord {
+  attachmentUrls?: any;
+  commType?: number;
+  content: string;
+  time: string;
+  type: 'communication';
+  userName: string;
+}
+
+const Textarea = Input.TextArea;
+const route = useRoute();
+const router = useRouter();
+const accessStore = useAccessStore();
+const userStore = useUserStore();
+
+const loading = ref(false);
+const sending = ref(false);
+const actionLoading = ref(false);
+const communicationList = ref<RowData[]>([]);
+const currentWorkOrder = ref<RowData>({});
+const replyContent = ref('');
+const replyAttachments = ref<string[]>([]);
+const showEvaluate = ref(false);
+const evaluating = ref(false);
+const satisfactionLevel = ref(5);
+const evalContent = ref('');
+let lastSubscribedWsTag = '';
+let communicationPollingTimer: number | undefined;
+
+const routeWorkOrderId = computed(() => Number(route.query.id || 0));
+const routeWoNo = computed(() => String(route.query.woNo || ''));
+const currentWoNo = computed(() => currentWorkOrder.value?.woNo || routeWoNo.value || '');
+const currentStatus = computed(() => Number(currentWorkOrder.value?.currentStatus ?? 0));
+const isClosed = computed(() => [4, 5, 6, 7].includes(currentStatus.value));
+const canOperate = computed(() => Boolean(currentWoNo.value) && !isClosed.value);
+const currentUserId = computed(() => {
+  const userInfo = userStore.userInfo as any;
+  return Number(userInfo?.id || userInfo?.userId || userInfo?.user_id || 0);
+});
+const isCreator = computed(() => {
+  const creatorUserId = Number(
+    currentWorkOrder.value?.creatorUserId || currentWorkOrder.value?.createdBy || 0,
+  );
+  return Boolean(currentUserId.value && creatorUserId && currentUserId.value === creatorUserId);
+});
+const hasEvaluated = computed(() => {
+  return Boolean(currentWorkOrder.value?.satisfactionLevel || currentWorkOrder.value?.evalTime);
+});
+const canEvaluate = computed(() => {
+  return Boolean(currentWoNo.value && currentStatus.value === 4 && isCreator.value && !hasEvaluated.value);
+});
+const communicationWsEventPrefix = 'ws:event:wo:communication';
+const communicationWsTagPrefix = 'ws:tag:wo:communication';
+const currentWsTag = computed(() => {
+  return currentWoNo.value ? `${communicationWsTagPrefix}:${currentWoNo.value}` : '';
+});
+const wsState = reactive({
+  server: getWsServerUrl(),
+});
+
+const stepItems = [
+  { title: '已分派' },
+  { title: '处理中' },
+  { title: '已解决' },
+  { title: '已完结' },
+];
+
+const currentStep = computed(() => {
+  if (currentWorkOrder.value?.satisfactionLevel || currentWorkOrder.value?.evalTime) {
+    return 3;
+  }
+  if (currentStatus.value >= 4) {
+    return 3;
+  }
+  if (currentStatus.value >= 3) {
+    return 2;
+  }
+  if (currentStatus.value >= 2) {
+    return 1;
+  }
+  return 0;
+});
+const currentStepStatus = computed(() => (currentStep.value >= 3 ? 'finish' : 'process'));
+const isFinishedStep = computed(() => {
+  return Boolean(
+    currentStatus.value >= 4 ||
+      currentWorkOrder.value?.satisfactionLevel ||
+      currentWorkOrder.value?.evalTime,
+  );
+});
+
+const activeRows = computed(() => {
+  return communicationList.value.filter((item) => {
+    if (currentWoNo.value) {
+      return String(item.woNo || '') === String(currentWoNo.value);
+    }
+    if (routeWorkOrderId.value) {
+      return Number(item.woId || 0) === routeWorkOrderId.value;
+    }
+    return false;
+  });
+});
+
+const timelineRecords = computed<TimelineRecord[]>(() => {
+  const records: TimelineRecord[] = [];
+  for (const item of activeRows.value) {
+    records.push({
+      attachmentUrls: item.attachmentUrls,
+      commType: Number(item.commType),
+      content: item.content || '暂无沟通内容',
+      time: item.commTime || item.createdAt || '',
+      type: 'communication',
+      userName: getUserName(item),
+    });
+  }
+  return records.sort((prev, next) => getTimeValue(prev.time) - getTimeValue(next.time));
+});
+
+onMounted(async () => {
+  await handleLoad();
+  openWs();
+  subscribeCurrentWorkOrder();
+  startCommunicationPolling();
+});
+
+onUnmounted(() => {
+  stopCommunicationPolling();
+  closeWs();
+});
+
+watch(
+  () => [route.query.id, route.query.woNo],
+  async () => {
+    await handleLoad();
+    openWs();
+    subscribeCurrentWorkOrder();
+  },
+);
+
+function getWsServerUrl() {
+  const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  return `${protocol}${window.location.host}/api/monitor/ws?access_token=${encodeURIComponent(
+    String(accessStore.accessToken),
+  )}`;
+}
+
+const {
+  close: closeWs,
+  data: wsData,
+  open: openWs,
+  send: sendWs,
+  status: wsStatus,
+} = useWebSocket(wsState.server, {
+  autoReconnect: true,
+  heartbeat: false,
+  immediate: false,
+});
+
+watch(wsStatus, (status) => {
+  console.log('work order communication websocket status', status);
+  if (status === 'OPEN') {
+    subscribeCurrentWorkOrder();
+  }
+});
+
+watch(wsData, (value) => {
+  if (!value) {
+    return;
+  }
+  handleWsMessage(value);
+});
+
+watch(currentWsTag, () => {
+  subscribeCurrentWorkOrder();
+}, { immediate: true });
+
+watch(canEvaluate, (value) => {
+  if (!value) {
+    showEvaluate.value = false;
+  }
+});
+
+async function handleLoad(silent = false) {
+  if (!routeWorkOrderId.value && !routeWoNo.value) {
+    communicationList.value = [];
+    currentWorkOrder.value = {};
+    return;
+  }
+  if (!silent) {
+    loading.value = true;
+  }
+  try {
+    if (routeWorkOrderId.value) {
+      currentWorkOrder.value = await WorkOrderView({ id: routeWorkOrderId.value });
+    } else {
+      currentWorkOrder.value = {};
+    }
+
+    const communications = await CommunicationList({
+      woNo: currentWoNo.value,
+    });
+    communicationList.value = await hydrateRows(
+      getListRows(communications).filter(isCurrentWorkOrderCommunication),
+    );
+  } finally {
+    if (!silent) {
+      loading.value = false;
+    }
+  }
+}
+
+function startCommunicationPolling() {
+  stopCommunicationPolling();
+  communicationPollingTimer = window.setInterval(() => {
+    if (document.hidden || !currentWoNo.value) {
+      return;
+    }
+    handleLoad(true);
+  }, 5000);
+}
+
+function stopCommunicationPolling() {
+  if (!communicationPollingTimer) {
+    return;
+  }
+  window.clearInterval(communicationPollingTimer);
+  communicationPollingTimer = undefined;
+}
+
+function subscribeCurrentWorkOrder() {
+  if (wsStatus.value !== 'OPEN' || !currentWsTag.value) {
+    return;
+  }
+  if (lastSubscribedWsTag === currentWsTag.value) {
+    return;
+  }
+  if (lastSubscribedWsTag) {
+    sendWs(
+      JSON.stringify({
+        e: 'quits',
+        d: {
+          names: [lastSubscribedWsTag],
+        },
+      }),
+    );
+  }
+  sendWs(
+    JSON.stringify({
+      e: 'joins',
+      d: {
+        names: [currentWsTag.value],
+      },
+    }),
+  );
+  console.log('work order communication websocket join', currentWsTag.value);
+  lastSubscribedWsTag = currentWsTag.value;
+}
+
+function parseWsData(value: string) {
+  try {
+    const data = JSON.parse(value);
+    if (typeof data.d === 'string' && !data.d.startsWith('{') && !data.d.startsWith('[')) {
+      try {
+        data.d = atob(data.d);
+      } catch {
+        return data;
+      }
+    }
+    if (typeof data.d === 'string' && (data.d.startsWith('{') || data.d.startsWith('['))) {
+      data.d = JSON.parse(data.d);
+    }
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+function handleWsMessage(value: string) {
+  const wsMessage = parseWsData(value);
+  console.log('work order communication websocket message', wsMessage);
+  if (!wsMessage?.e || !String(wsMessage.e).startsWith(communicationWsEventPrefix)) {
+    return;
+  }
+  const messageWoNo = wsMessage.d?.woNo || wsMessage.d?.data?.woNo;
+  if (messageWoNo && currentWoNo.value && String(messageWoNo) !== String(currentWoNo.value)) {
+    return;
+  }
+  handleLoad(true);
+  window.setTimeout(() => {
+    handleLoad(true);
+  }, 300);
+}
+
+async function handleSendMessage() {
+  const content = replyContent.value.trim();
+  if (!content && replyAttachments.value.length === 0) {
+    message.warning('请输入回复内容或上传附件');
+    return;
+  }
+  if (!currentWoNo.value) {
+    message.warning('当前会话缺少工单编号');
+    return;
+  }
+
+  sending.value = true;
+  try {
+    await SendMessage({
+      attachmentUrls: replyAttachments.value,
+      commType: 0,
+      content,
+      woNo: currentWoNo.value,
+    });
+    markProcessingAfterCreatorReply();
+    replyContent.value = '';
+    replyAttachments.value = [];
+    message.success('发送成功');
+    await handleLoad();
+  } finally {
+    sending.value = false;
+  }
+}
+
+function markProcessingAfterCreatorReply() {
+  if (!isCreator.value || currentStatus.value !== 3) {
+    return;
+  }
+  currentWorkOrder.value = {
+    ...currentWorkOrder.value,
+    currentStatus: 2,
+  };
+}
+
+function markClosedAfterClose() {
+  currentWorkOrder.value = {
+    ...currentWorkOrder.value,
+    currentStatus: 4,
+  };
+}
+
+function handleBack() {
+  router.back();
+}
+
+function handleTransfer() {
+  confirmWorkOrderAction('确认转单吗？', async () => {
+    await Transfer({ woNo: currentWoNo.value });
+    message.success('转单成功');
+  });
+}
+
+function handleResolve() {
+  confirmWorkOrderAction('确认解决该工单吗？', async () => {
+    await Resolve({ woNo: currentWoNo.value });
+    message.success('已确认解决');
+  });
+}
+
+function handleCancel() {
+  confirmWorkOrderAction('确认取消该工单吗？', async () => {
+    await Cancel({ woNo: currentWoNo.value });
+    message.success('取消成功');
+  });
+}
+
+function handleClose() {
+  if (!currentWoNo.value) {
+    message.warning('当前会话缺少工单编号');
+    return;
+  }
+  confirmWorkOrderAction('确认关单吗？', async () => {
+    await Close({ woNo: currentWoNo.value });
+    markClosedAfterClose();
+    showEvaluate.value = false;
+    message.success('关单成功');
+  });
+}
+
+async function handleSubmitEvaluate() {
+  if (!currentWoNo.value) {
+    message.warning('当前会话缺少工单编号');
+    return;
+  }
+  if (!canEvaluate.value) {
+    message.warning('当前工单暂不可评价');
+    return;
+  }
+  if (!satisfactionLevel.value) {
+    message.warning('请选择满意度');
+    return;
+  }
+
+  evaluating.value = true;
+  try {
+    await Evaluate({
+      evalContent: evalContent.value.trim(),
+      satisfactionLevel: satisfactionLevel.value,
+      woNo: currentWoNo.value,
+    });
+    message.success('评价成功');
+    showEvaluate.value = false;
+    evalContent.value = '';
+    satisfactionLevel.value = 5;
+    await handleLoad();
+  } finally {
+    evaluating.value = false;
+  }
+}
+
+function confirmWorkOrderAction(title: string, action: () => Promise<void>) {
+  if (!currentWoNo.value) {
+    message.warning('当前会话缺少工单编号');
+    return;
+  }
+  Modal.confirm({
+    title,
+    onOk: async () => {
+      actionLoading.value = true;
+      try {
+        await action();
+        await handleLoad();
+      } finally {
+        actionLoading.value = false;
+      }
+    },
+  });
+}
+
+async function hydrateRows(rows: RowData[]) {
+  return Promise.all(
+    rows.map(async (item) => {
+      if (!item.id || item.content !== undefined) {
+        return item;
+      }
+      try {
+        const detail = await CommunicationView({ id: item.id });
+        return { ...item, ...detail };
+      } catch {
+        return item;
+      }
+    }),
+  );
+}
+
+function getListRows(data: any) {
+  if (Array.isArray(data)) {
+    return data;
+  }
+  return data?.items ?? data?.rows ?? data?.records ?? data?.list ?? data?.data ?? [];
+}
+
+function getTimeValue(value?: string) {
+  if (!value) {
+    return 0;
+  }
+  return new Date(String(value).replaceAll('-', '/')).getTime() || 0;
+}
+
+function getStatusText(value?: number) {
+  const map: Record<number, string> = {
+    1: '已分派',
+    2: '处理中',
+    3: '已解决',
+    4: '已完结',
+  };
+  return map[Number(value)] ?? '待处理';
+}
+
+function getStatusColor(value?: number) {
+  const map: Record<number, string> = {
+    1: 'blue',
+    2: 'processing',
+    3: 'success',
+    4: 'default',
+  };
+  return map[Number(value)] ?? 'default';
+}
+
+function getWorkOrderTypeText(value?: number) {
+  const map: Record<number, string> = {
+    1: '卡问题',
+    2: '套餐问题',
+    3: '订单问题',
+    4: '系统问题',
+    99: '其他问题',
+  };
+  return map[Number(value)] ?? String(value ?? '-');
+}
+
+function getRelatedTypeText(value?: number) {
+  const map: Record<number, string> = {
+    0: '卡',
+    1: '套餐',
+    2: '订单',
+    3: '系统',
+  };
+  return map[Number(value)] ?? '-';
+}
+
+function getUserName(item: RowData) {
+  if (Number(item.commType) === 0) {
+    return '售后工程师';
+  }
+  return (
+    item.senderName ||
+    item.createdBySumma?.realName ||
+    item.createdBySumma?.nickname ||
+    '沟通人'
+  );
+}
+
+function getTimelineUserClass(item: TimelineRecord) {
+  return item.type === 'communication' && item.commType === 0
+    ? 'font-medium text-[#1677ff]'
+    : 'font-medium text-[#1f2329] dark:text-[#f2f2f2]';
+}
+
+function getAvatarClass(item: TimelineRecord) {
+  return item.type === 'communication' && item.commType === 0
+    ? 'bg-[#1677ff]'
+    : 'bg-[#8b949e]';
+}
+
+function isCurrentWorkOrderCommunication(item: RowData) {
+  if (currentWoNo.value) {
+    return String(item.woNo || '') === String(currentWoNo.value);
+  }
+  if (routeWorkOrderId.value) {
+    return Number(item.woId || 0) === routeWorkOrderId.value;
+  }
+  return false;
+}
+
+function normalizeAttachments(value: any) {
+  if (!value) {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    return value.map(normalizeAttachmentItem).filter((item) => item.url);
+  }
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) {
+        return parsed.map(normalizeAttachmentItem).filter((item) => item.url);
+      }
+    } catch {
+      return value.split(',').filter(Boolean).map(normalizeAttachmentItem).filter((item) => item.url);
+    }
+    return value.split(',').filter(Boolean).map(normalizeAttachmentItem).filter((item) => item.url);
+  }
+  return [normalizeAttachmentItem(value)].filter((item) => item.url);
+}
+
+function normalizeAttachmentItem(value: any): AttachmentItem {
+  const rawUrl = getAttachmentUrl(value);
+  const name = getAttachmentName(value, rawUrl);
+  return {
+    ext: getFileExt(name || rawUrl),
+    name: name || '附件',
+    raw: value,
+    url: normalizeFileUrl(rawUrl),
+  };
+}
+
+function getAttachmentUrl(value: any) {
+  if (!value) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return value.url || value.response?.url || value.fileUrl || value.path || value.src || '';
+}
+
+function getAttachmentName(value: any, fallbackUrl = '') {
+  if (value && typeof value === 'object') {
+    return value.name || value.originalName || value.fileName || getFileName(fallbackUrl);
+  }
+  return getFileName(String(value || fallbackUrl || ''));
+}
+
+function getFileName(value: string) {
+  const cleanValue = value.split('?')[0] || '';
+  const fileName = cleanValue.slice(Math.max(0, cleanValue.lastIndexOf('/') + 1));
+  try {
+    return decodeURIComponent(fileName);
+  } catch {
+    return fileName;
+  }
+}
+
+function getFileExt(value: string) {
+  const fileName = getFileName(value);
+  const index = fileName.lastIndexOf('.');
+  return index >= 0 ? fileName.slice(index + 1).toUpperCase() : 'FILE';
+}
+
+function normalizeFileUrl(value: string) {
+  if (!value) {
+    return '';
+  }
+  const normalizedValue = value.trim().replaceAll('\\', '/');
+  if (/^https?:\/\//i.test(normalizedValue)) {
+    return normalizedValue;
+  }
+
+  const resourceUploadIndex = normalizedValue.indexOf('resource/upload/');
+  if (resourceUploadIndex >= 0) {
+    return `/${normalizedValue.slice(resourceUploadIndex).replace('resource/upload/', 'upload/')}`;
+  }
+
+  if (normalizedValue.startsWith('/upload')) {
+    return normalizedValue;
+  }
+  if (normalizedValue.startsWith('app/upload/')) {
+    return normalizedValue.replace('app/upload/', '/upload/');
+  }
+  if (normalizedValue.startsWith('upload/')) {
+    return `/${normalizedValue}`;
+  }
+  return `/upload${normalizedValue.startsWith('/') ? '' : '/'}${normalizedValue}`;
+}
+
+function isImageFile(value: AttachmentItem) {
+  return ['GIF', 'JPEG', 'JPG', 'PNG', 'WEBP'].includes(value.ext);
+}
+
+function handleOpenAttachment(value: AttachmentItem) {
+  if (!value.url) {
+    return;
+  }
+  window.open(value.url, '_blank');
+}
+</script>
+
+<template>
+  <Page auto-content-height content-class="h-full !p-0">
+    <div class="work-order-communication-page min-h-full bg-[#f5f7fb] dark:bg-[#141414] xl:flex xl:h-full xl:min-h-0 xl:flex-col xl:overflow-hidden">
+      <div class="shrink-0 border-b border-[#e8edf5] bg-white px-4 py-3 dark:border-[#303030] dark:bg-[#1f1f1f]">
+        <div class="work-order-detail-container">
+          <div class="mb-2 text-xs text-[#86909c] dark:text-[#a3a3a3]">
+            支持与服务 / 我的工单 / 工单详情
+          </div>
+          <div class="flex flex-wrap items-center gap-3">
+            <div class="flex min-w-0 items-center gap-2">
+              <Button class="px-0 text-[#4e5969] dark:text-[#a3a3a3]" type="link" @click="handleBack">
+                ←
+              </Button>
+              <div class="truncate text-[22px] font-medium text-[#1f2329] dark:text-[#f2f2f2]">
+                {{ currentWorkOrder.title || '工单问题沟通' }}
+              </div>
+              <Tag :color="getStatusColor(currentStatus)">
+                {{ getStatusText(currentStatus) }}
+              </Tag>
+            </div>
+          </div>
+
+          <div class="mt-5">
+            <Steps
+              :class="{ 'work-order-steps-finished': isFinishedStep }"
+              :current="currentStep"
+              :items="stepItems"
+              size="small"
+              :status="currentStepStatus"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="px-70 py-4 xl:min-h-0 xl:flex-1 xl:overflow-auto">
+        <div class="work-order-detail-container xl:h-full">
+        <Spin :spinning="loading">
+          <Empty
+            v-if="!routeWorkOrderId && !routeWoNo"
+            class="bg-white py-20 dark:bg-[#1f1f1f]"
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            description="请从工单主表选择工单"
+          />
+
+          <div v-else class="grid grid-cols-1 gap-4 xl:h-full xl:min-h-0 xl:grid-cols-[minmax(0,1fr)_510px]">
+            <div class="work-order-panel work-order-detail-container bg-white dark:bg-[#1f1f1f] xl:flex xl:h-full xl:min-h-0 xl:flex-col">
+              <div class="shrink-0 border-b border-[#edf1f7] px-5 py-7 text-sm font-medium text-[#1f2329] dark:border-[#303030] dark:text-[#f2f2f2]">
+                问题沟通
+              </div>
+
+              <div class="max-h-[360px] overflow-y-auto px-5 py-4 xl:max-h-none xl:min-h-0 xl:flex-1">
+                <Empty
+                  v-if="timelineRecords.length === 0"
+                  :image="Empty.PRESENTED_IMAGE_SIMPLE"
+                  description="暂无沟通记录"
+                />
+                <Timeline v-else>
+                  <TimelineItem
+                    v-for="item in timelineRecords"
+                    :key="`${item.type}-${item.time}-${item.userName}-${item.content}`"
+                  >
+                    <template #dot>
+                      <Avatar :size="34" :class="getAvatarClass(item)">
+                        {{ item.userName?.slice(0, 1) || '工' }}
+                      </Avatar>
+                    </template>
+                    <div class="communication-timeline-item pb-5">
+                      <div class="mb-2 flex flex-wrap items-center gap-2 text-xs text-[#86909c] dark:text-[#a3a3a3]">
+                        <span :class="getTimelineUserClass(item)">{{ item.userName }}</span>
+                        <span>{{ item.time || '-' }}</span>
+                      </div>
+                      <div class="whitespace-pre-wrap text-sm leading-6 text-[#1f2329] dark:text-[#f2f2f2]">
+                        {{ item.content }}
+                      </div>
+                      <div
+                        v-if="normalizeAttachments(item.attachmentUrls).length > 0"
+                        class="mt-3 flex flex-wrap gap-3"
+                      >
+                        <button
+                          v-for="attachment in normalizeAttachments(item.attachmentUrls)"
+                          :key="attachment.url"
+                          class="attachment-card flex max-w-[260px] items-center gap-3 rounded border border-[#e5e8ef] bg-[#fafbfc] p-2 text-left transition-colors hover:border-[#1677ff] hover:bg-[#f5f9ff] dark:border-[#303030] dark:bg-[#262626] dark:hover:border-[#1677ff] dark:hover:bg-[#1f2f46]"
+                          type="button"
+                          @click="handleOpenAttachment(attachment)"
+                        >
+                          <Image
+                            v-if="isImageFile(attachment)"
+                            :preview="false"
+                            :src="attachment.url"
+                            class="h-10 w-10 rounded object-cover"
+                          />
+                          <div
+                            v-else
+                            class="flex h-10 w-10 shrink-0 items-center justify-center rounded bg-[#e8f3ff] text-xs font-medium text-[#1677ff]"
+                          >
+                            {{ attachment.ext }}
+                          </div>
+                          <div class="min-w-0">
+                            <div class="truncate text-sm text-[#1f2329] dark:text-[#f2f2f2]">
+                              {{ attachment.name }}
+                            </div>
+                            <div class="text-xs text-[#86909c] dark:text-[#a3a3a3]">点击查看</div>
+                          </div>
+                        </button>
+                      </div>
+                    </div>
+                  </TimelineItem>
+                </Timeline>
+              </div>
+
+              <div class="shrink-0 border-t border-[#edf1f7] px-5 py-4 dark:border-[#303030]">
+                <Textarea
+                  v-model:value="replyContent"
+                  :auto-size="{ minRows: 3, maxRows: 5 }"
+                  :disabled="!canOperate"
+                  placeholder="继续留言"
+                />
+                <div class="mt-3" v-access:code="'cpm:system:oss:upload'">
+                  <FileUpload
+                    v-model:value="replyAttachments"
+                    :disabled="!canOperate"
+                    :max-number="6"
+                    :max-size="10"
+                    multiple
+                    :show-description="false"
+                    show-type="button"
+                  />
+                </div>
+                <div class="mt-3 flex items-center gap-2">
+                  <Button
+                    class="ml-auto"
+                    :disabled="!canOperate"
+                    :loading="sending"
+                    type="primary"
+                    @click="handleSendMessage"
+                  >
+                    发送回复
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <div class="work-order-panel work-order-detail-container bg-white px-4 py-4 dark:bg-[#1f1f1f] xl:h-full xl:min-h-0 xl:w-[510px] xl:overflow-y-auto">
+              <div class="mb-4 text-sm font-medium text-[#1f2329] dark:text-[#f2f2f2]">相关信息</div>
+              <Descriptions class="work-order-related-descriptions" :column="1" size="small">
+                <DescriptionsItem label="工单ID">
+                  {{ currentWorkOrder.woNo || routeWoNo || '-' }}
+                </DescriptionsItem>
+                <DescriptionsItem label="紧急程度">
+                  {{ currentWorkOrder.remark || '普通' }}
+                </DescriptionsItem>
+                <DescriptionsItem label="产品分类">
+                  {{ getWorkOrderTypeText(currentWorkOrder.woType) }}
+                </DescriptionsItem>
+                <DescriptionsItem label="关联业务">
+                  {{ getRelatedTypeText(currentWorkOrder.relatedType) }}
+                </DescriptionsItem>
+                <DescriptionsItem label="关联业务ID">
+                  {{ currentWorkOrder.relatedId || '-' }}
+                </DescriptionsItem>
+                <DescriptionsItem label="提交账号">
+                  {{ currentWorkOrder.creatorName || '-' }}
+                </DescriptionsItem>
+                <DescriptionsItem label="联系电话">
+                  {{ currentWorkOrder.creatorPhone || '-' }}
+                </DescriptionsItem>
+                <DescriptionsItem label="处理人">
+                  {{ currentWorkOrder.handlerName || '-' }}
+                </DescriptionsItem>
+                <DescriptionsItem label="提交时间">
+                  {{ currentWorkOrder.createdAt || '-' }}
+                </DescriptionsItem>
+                <DescriptionsItem label="首次响应">
+                  {{ currentWorkOrder.firstResponseTime || '-' }}
+                </DescriptionsItem>
+                <DescriptionsItem label="解决时间">
+                  {{ currentWorkOrder.resolveTime || '-' }}
+                </DescriptionsItem>
+              </Descriptions>
+
+              <div class="mt-4 flex flex-wrap gap-2 border-t border-[#edf1f7] pt-4 dark:border-[#303030]">
+                <Button
+                  class="min-w-[88px]"
+                  :disabled="!canOperate || ![1, 2].includes(currentStatus) || isCreator"
+                  :loading="actionLoading"
+                  type="primary"
+                  @click="handleResolve"
+                  v-access:code="'cpm:gen:tWoMain:resolve'"
+                >
+                  确认解决
+                </Button>
+                <Button
+                  class="min-w-[64px]"
+                  :disabled="!canOperate || ![1, 2].includes(currentStatus) || isCreator"
+                  :loading="actionLoading"
+                  @click="handleTransfer"
+                  v-access:code="'cpm:gen:tWoMain:transfer'"
+                >
+                  转单
+                </Button>
+                <Button
+                  class="min-w-[64px]"
+                  :disabled="!canOperate || ![1, 2].includes(currentStatus) || !isCreator"
+                  :loading="actionLoading"
+                  danger
+                  @click="handleCancel"
+                  v-access:code="'cpm:gen:tWoMain:cancel'"
+                >
+                  取消
+                </Button>
+                <Button
+                  class="min-w-[64px]"
+                  :disabled="!canOperate || currentStatus !== 3"
+                  :loading="actionLoading"
+                  @click="handleClose"
+                  v-access:code="'cpm:gen:tWoMain:close'"
+                >
+                  关单
+                </Button>
+              </div>
+
+              <div
+                v-if="canEvaluate"
+                class="mt-4 border-t border-[#edf1f7] pt-4 dark:border-[#303030]"
+                v-access:code="'cpm:gen:tWoMain:evaluate'"
+              >
+                <div class="mb-3 flex items-center justify-between gap-3">
+                  <div class="text-sm font-medium text-[#1f2329] dark:text-[#f2f2f2]">服务评价</div>
+                  <Button v-if="!showEvaluate" type="primary" @click="showEvaluate = true">
+                    去评价
+                  </Button>
+                </div>
+                <div v-if="!showEvaluate" class="text-sm text-[#86909c] dark:text-[#a3a3a3]">
+                  工单已关单，请对本次服务进行评价。
+                </div>
+                <template v-else>
+                <div class="mb-3">
+                  <div class="mb-1 text-xs text-[#86909c] dark:text-[#a3a3a3]">满意度</div>
+                  <Rate v-model:value="satisfactionLevel" />
+                </div>
+                <Textarea
+                  v-model:value="evalContent"
+                  :auto-size="{ minRows: 3, maxRows: 5 }"
+                  :maxlength="500"
+                  placeholder="请输入评价内容"
+                  show-count
+                />
+                <div class="mt-3 flex justify-end gap-2">
+                  <Button @click="showEvaluate = false">取消</Button>
+                  <Button
+                    :loading="evaluating"
+                    type="primary"
+                    @click="handleSubmitEvaluate"
+                  >
+                    提交评价
+                  </Button>
+                </div>
+                </template>
+              </div>
+
+              <div
+                v-if="currentWorkOrder.satisfactionLevel || currentWorkOrder.evalTime"
+                class="mt-4 border-t border-[#edf1f7] pt-4 dark:border-[#303030]"
+              >
+                <div class="mb-3 text-sm font-medium text-[#1f2329] dark:text-[#f2f2f2]">评价信息</div>
+                <Descriptions class="work-order-related-descriptions" :column="1" size="small">
+                  <DescriptionsItem label="满意度">
+                    <Rate
+                      :value="Number(currentWorkOrder.satisfactionLevel || 0)"
+                      disabled
+                    />
+                  </DescriptionsItem>
+                  <DescriptionsItem label="评价内容">
+                    {{ currentWorkOrder.evalContent || '-' }}
+                  </DescriptionsItem>
+                  <DescriptionsItem label="评价时间">
+                    {{ currentWorkOrder.evalTime || '-' }}
+                  </DescriptionsItem>
+                </Descriptions>
+              </div>
+            </div>
+          </div>
+        </Spin>
+        </div>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.work-order-detail-container {
+  box-sizing: border-box;
+  margin: 0 auto;
+  max-width: 100%;
+  width: 100%;
+}
+
+:deep(.work-order-detail-container > .ant-spin-nested-loading),
+:deep(.work-order-detail-container > .ant-spin-nested-loading > .ant-spin-container) {
+  height: 100%;
+  width: 100%;
+}
+
+.communication-timeline-item {
+  border-bottom: 1px solid #d8dee8;
+}
+
+.work-order-related-descriptions :deep(.ant-descriptions-item-label) {
+  color: #86909c;
+}
+
+.work-order-related-descriptions :deep(.ant-descriptions-item-content) {
+  color: #1f2329;
+}
+
+.dark .work-order-related-descriptions :deep(.ant-descriptions-item-label) {
+  color: #9ca3af;
+}
+
+.dark .work-order-related-descriptions :deep(.ant-descriptions-item-content) {
+  color: #e5e7eb;
+}
+
+:deep(.work-order-steps-finished .ant-steps-item:last-child .ant-steps-item-icon) {
+  background-color: #1677ff;
+  border-color: #1677ff;
+}
+
+:deep(.work-order-steps-finished .ant-steps-item:last-child .ant-steps-icon) {
+  color: transparent;
+  font-size: 0;
+}
+
+:deep(.work-order-steps-finished .ant-steps-item:last-child .ant-steps-icon::before) {
+  color: #fff;
+  content: '✓';
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/model.tsx
new file mode 100644
index 0000000..0e9f3a0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/model.tsx
@@ -0,0 +1,388 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '#/adapter/form';
+import { z } from '@vben/common-ui';
+import { renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+
+export class State {
+  public id = 0; // 主键ID
+  public commNo = ''; // 沟通编号
+  public woId = 0; // 工单ID
+  public woNo = ''; // 工单编号
+  public commType = 0; // 沟通类型：0回复，1反馈
+  public senderType = 0; // 发送人类型：1终端用户，2代理商
+  public senderDeptId = 0; // 发送人机构ID
+  public senderUserId = 0; // 发送人用户ID
+  public senderName = ''; // 发送人姓名
+  public content = ''; // 沟通内容
+  public attachmentUrls = null; // 附件URL列表
+  public commTime = ''; // 沟通时间
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+				fieldName: 'id',
+				component: 'InputNumber',
+				label: '主键ID',
+				componentProps: {
+					placeholder: '请输入主键ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'createdAt',
+				component: 'RangePicker',
+				label: '创建时间',
+				componentProps: {
+					type: 'datetimerange',
+					clearable: true,
+					valueFormat: 'YYYY-MM-DD HH:mm:ss',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '主键ID',
+    field: 'id',
+    align: 'left',
+    width: -1,
+    type: 'checkbox',
+  },
+  {
+    title: '沟通编号',
+    field: 'commNo',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '工单ID',
+    field: 'woId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '工单编号',
+    field: 'woNo',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '沟通类型：0回复，1反馈',
+    field: 'commType',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '发送人类型：1终端用户，2代理商',
+    field: 'senderType',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '发送人机构ID',
+    field: 'senderDeptId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '发送人用户ID',
+    field: 'senderUserId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '发送人姓名',
+    field: 'senderName',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '沟通时间',
+    field: 'commTime',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '租户ID',
+    field: 'tenantId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建部门',
+    field: 'createdDept',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建者',
+    field: 'createdBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.createdBySumma);
+    },
+ },
+ },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '更新者',
+    field: 'updatedBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.updatedBySumma);
+    },
+ },
+ },
+  {
+    title: '更新时间',
+    field: 'updatedAt',
+    align: 'left',
+    width: -1,
+ },
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  commNo: string;
+  woId: number;
+  woNo: string;
+  commType: number;
+  senderType: number;
+  senderDeptId: number;
+  senderUserId: number;
+  senderName: string;
+  content: string;
+  attachmentUrls: any;
+  commTime: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '主键ID'},
+  {  field: 'commNo',  label: '沟通编号'},
+  {  field: 'woId',  label: '工单ID'},
+  {  field: 'woNo',  label: '工单编号'},
+  {  field: 'commType',  label: '沟通类型：0回复，1反馈'},
+  {  field: 'senderType',  label: '发送人类型：1终端用户，2代理商'},
+  {  field: 'senderDeptId',  label: '发送人机构ID'},
+  {  field: 'senderUserId',  label: '发送人用户ID'},
+  {  field: 'senderName',  label: '发送人姓名'},
+  {  field: 'content',  label: '沟通内容'},
+  {  field: 'attachmentUrls',  label: '附件URL列表'},
+  {  field: 'commTime',  label: '沟通时间'},
+  {  field: 'tenantId',  label: '租户ID'},
+  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'updatedBy',  label: '更新者'},
+  {  field: 'updatedAt',  label: '更新时间'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+					fieldName: 'id',
+					component: 'Input',
+					label: '主键ID',
+					dependencies: {   show: () => false,    triggerFields: [''],   },
+					componentProps: {
+						placeholder: '',
+						onUpdateValue: (e: any) => {
+							console.log(e);
+						},   
+					},
+					formItemClass: 'col-span-1',
+				},  {
+				fieldName: 'commNo',
+				component: 'Input',
+				label: '沟通编号',
+				componentProps: {
+					placeholder: '请输入沟通编号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'woId',
+				component: 'InputNumber',
+				label: '工单ID',
+				componentProps: {
+					placeholder: '请输入工单ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入工单ID', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'woNo',
+				component: 'Input',
+				label: '工单编号',
+				componentProps: {
+					placeholder: '请输入工单编号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'commType',
+				component: 'InputNumber',
+				label: '沟通类型：0回复，1反馈',
+				componentProps: {
+					placeholder: '请输入沟通类型：0回复，1反馈',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入沟通类型：0回复，1反馈', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'senderType',
+				component: 'InputNumber',
+				label: '发送人类型：1终端用户，2代理商',
+				componentProps: {
+					placeholder: '请输入发送人类型：1终端用户，2代理商',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入发送人类型：1终端用户，2代理商', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'senderDeptId',
+				component: 'InputNumber',
+				label: '发送人机构ID',
+				componentProps: {
+					placeholder: '请输入发送人机构ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'senderUserId',
+				component: 'InputNumber',
+				label: '发送人用户ID',
+				componentProps: {
+					placeholder: '请输入发送人用户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'senderName',
+				component: 'Input',
+				label: '发送人姓名',
+				componentProps: {
+					placeholder: '请输入发送人姓名',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'content',
+				component: 'Input',
+				label: '沟通内容',
+				componentProps: {
+					placeholder: '请输入沟通内容',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'attachmentUrls',
+				component: 'Input',
+				label: '附件URL列表',
+				componentProps: {
+					placeholder: '请输入附件URL列表',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'commTime',
+				component: 'DatePicker',
+				label: '沟通时间',
+				componentProps: {
+					type: 'datetime',
+					clearable: true,
+					showTime: true,
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:'selectRequired',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'tenantId',
+				component: 'Input',
+				label: '租户ID',
+				componentProps: {
+					placeholder: '请输入租户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},];
+
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/view.vue
new file mode 100644
index 0000000..cdcd24e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoCommunication/view.vue
@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+  Avatar,
+  Descriptions,
+  DescriptionsItem,
+  Empty,
+  Spin,
+  Tag,
+  Timeline,
+  TimelineItem,
+} from 'ant-design-vue';
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { List, View } from '#/api/common/tWoCommunication';
+
+import type { RowType } from './model';
+
+type CommunicationDetail = Partial<RowType> & Record<string, any>;
+
+const detail = ref<CommunicationDetail>({});
+const loading = ref(false);
+const conversationList = ref<CommunicationDetail[]>([]);
+
+const conversationItems = computed(() => {
+  const rows =
+    conversationList.value.length > 0 ? conversationList.value : [detail.value];
+  return rows
+    .filter((item) => item && (item.content || item.commNo || item.id))
+    .sort((prev, next) => {
+      return (
+        getTimeValue(prev.commTime || prev.createdAt) -
+        getTimeValue(next.commTime || next.createdAt)
+      );
+    });
+});
+
+const attachmentList = computed(() => {
+  return normalizeAttachments(detail.value.attachmentUrls);
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  loading.value = true;
+  conversationList.value = [];
+  try {
+    const record2 = await View({ id: record.id });
+    detail.value = record2 ?? {};
+    const listParams: Record<string, any> = {};
+    if (detail.value.woNo || record.woNo) {
+      listParams.woNo = detail.value.woNo || record.woNo;
+    } else if (detail.value.woId || record.woId) {
+      listParams.woId = detail.value.woId || record.woId;
+    }
+    const listData = await List(listParams);
+    conversationList.value = getListRows(listData);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function getListRows(data: any) {
+  if (Array.isArray(data)) {
+    return data;
+  }
+  return data?.rows ?? data?.records ?? data?.list ?? data?.data ?? [];
+}
+
+function getTimeValue(value?: string) {
+  if (!value) {
+    return 0;
+  }
+  return new Date(value.replaceAll('-', '/')).getTime() || 0;
+}
+
+function getCommTypeText(value?: number) {
+  const map: Record<number, string> = {
+    0: '回复',
+    1: '反馈',
+  };
+  return map[Number(value)] ?? '沟通';
+}
+
+function getSenderTypeText(value?: number) {
+  const map: Record<number, string> = {
+    1: '终端用户',
+    2: '代理商',
+  };
+  return map[Number(value)] ?? '未知';
+}
+
+function getUserName(item: CommunicationDetail) {
+  return (
+    item.senderName ||
+    item.createdBySumma?.realName ||
+    item.createdBySumma?.nickname ||
+    '沟通人'
+  );
+}
+
+function normalizeAttachments(value: any) {
+  if (!value) {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) {
+        return parsed;
+      }
+    } catch {
+      return value.split(',').filter(Boolean);
+    }
+    return value.split(',').filter(Boolean);
+  }
+  return [];
+}
+
+function getAttachmentName(value: any) {
+  if (typeof value === 'string') {
+    return value;
+  }
+  return value?.name ?? value?.url ?? value?.fileName ?? '附件';
+}
+</script>
+
+<template>
+  <BasicDrawer :footer="false" class="w-[960px]" title="工单沟通">
+    <Spin :spinning="loading">
+      <div class="min-h-[560px] bg-slate-50 p-4">
+        <div class="mb-4 bg-white px-5 py-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <div class="text-lg font-medium text-slate-900">
+                {{ detail.woNo || '未关联工单' }}
+                <Tag class="ml-2" color="blue">
+                  {{ getCommTypeText(detail.commType) }}
+                </Tag>
+              </div>
+              <div class="mt-1 text-xs text-slate-500">
+                沟通编号：{{ detail.commNo || '-' }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-[minmax(0,1fr)_260px] gap-4">
+          <div class="bg-white">
+            <div
+              class="border-b border-slate-100 px-5 py-4 text-sm font-medium text-slate-900"
+            >
+              沟通记录
+            </div>
+
+            <div class="px-5 py-4">
+              <Empty
+                v-if="conversationItems.length === 0"
+                description="暂无沟通记录"
+              />
+              <Timeline v-else>
+                <TimelineItem
+                  v-for="item in conversationItems"
+                  :key="`${item.id}-${item.commNo}-${item.commTime}`"
+                >
+                  <template #dot>
+                    <Avatar :size="30" class="bg-blue-500">
+                      {{ getUserName(item).slice(0, 1) }}
+                    </Avatar>
+                  </template>
+                  <div class="border-b border-slate-100 pb-4">
+                    <div
+                      class="mb-1 flex flex-wrap items-center gap-2 text-xs text-slate-500"
+                    >
+                      <span class="font-medium text-slate-700">
+                        {{ getUserName(item) }}
+                      </span>
+                      <Tag color="cyan">
+                        {{ getCommTypeText(item.commType) }}
+                      </Tag>
+                      <span>{{ getSenderTypeText(item.senderType) }}</span>
+                      <span>{{ item.commTime || item.createdAt || '-' }}</span>
+                    </div>
+                    <div class="whitespace-pre-wrap text-sm leading-6 text-slate-700">
+                      {{ item.content || '暂无沟通内容' }}
+                    </div>
+                    <div
+                      v-if="normalizeAttachments(item.attachmentUrls).length > 0"
+                      class="mt-2 flex flex-wrap gap-2"
+                    >
+                      <Tag
+                        v-for="attachment in normalizeAttachments(item.attachmentUrls)"
+                        :key="getAttachmentName(attachment)"
+                        color="default"
+                      >
+                        {{ getAttachmentName(attachment) }}
+                      </Tag>
+                    </div>
+                  </div>
+                </TimelineItem>
+              </Timeline>
+            </div>
+          </div>
+
+          <div class="bg-white px-4 py-4">
+            <div class="mb-3 text-sm font-medium text-slate-900">沟通信息</div>
+            <Descriptions :column="1" size="small">
+              <DescriptionsItem label="工单ID">
+                {{ detail.woId ?? '-' }}
+              </DescriptionsItem>
+              <DescriptionsItem label="工单编号">
+                {{ detail.woNo || '-' }}
+              </DescriptionsItem>
+              <DescriptionsItem label="发送人">
+                {{ detail.senderName || '-' }}
+              </DescriptionsItem>
+              <DescriptionsItem label="发送人类型">
+                {{ getSenderTypeText(detail.senderType) }}
+              </DescriptionsItem>
+              <DescriptionsItem label="发送机构">
+                {{ detail.senderDeptId || '-' }}
+              </DescriptionsItem>
+              <DescriptionsItem label="沟通时间">
+                {{ detail.commTime || '-' }}
+              </DescriptionsItem>
+              <DescriptionsItem label="创建时间">
+                {{ detail.createdAt || '-' }}
+              </DescriptionsItem>
+              <DescriptionsItem label="更新时间">
+                {{ detail.updatedAt || '-' }}
+              </DescriptionsItem>
+            </Descriptions>
+
+            <div class="mt-4 border-t border-slate-100 pt-4">
+              <div class="mb-2 text-sm font-medium text-slate-900">附件</div>
+              <Empty
+                v-if="attachmentList.length === 0"
+                :image="Empty.PRESENTED_IMAGE_SIMPLE"
+                description="暂无附件"
+              />
+              <div v-else class="flex flex-col gap-2">
+                <Tag
+                  v-for="attachment in attachmentList"
+                  :key="getAttachmentName(attachment)"
+                  color="default"
+                >
+                  {{ getAttachmentName(attachment) }}
+                </Tag>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Spin>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoMain/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tWoMain/edit.vue
new file mode 100644
index 0000000..e759ec2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoMain/edit.vue
@@ -0,0 +1,184 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[640px]">
+    <BasicForm />
+  </BasicDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/common/tWoMain';
+
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+
+interface DrawerProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? '编辑工单' : '创建工单';
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    try {
+      const { id, update, view } = drawerApi.getData() as DrawerProps;
+      isUpdate.value = update;
+      isView.value = view;
+
+      await formApi.resetForm();
+      if (isUpdate.value || isView.value) {
+        const record = await View({ id });
+        await formApi.setValues({
+          attachment: record?.attachment,
+          content: record?.content,
+          creatorType: toDictValue(record?.creatorType),
+          creatorPhone: record?.creatorPhone,
+          id: record?.id,
+          relatedId: record?.relatedId,
+          relatedType: record?.relatedType ?? 0,
+          remark: record?.remark,
+          title: record?.title,
+          woType: toDictValue(record?.woType),
+        });
+      } else {
+        await formApi.setValues({
+          creatorType: '1',
+          relatedType: 0,
+          woType: '1',
+        });
+      }
+
+      drawerApi.setState({ showConfirmButton: !view });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            'only-read': view,
+            readonly: view,
+          },
+        },
+      });
+    } finally {
+      drawerApi.setState({ confirmLoading: false, loading: false });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    await Edit(buildPayload(await formApi.getValues()));
+    emit('reload');
+    await handleCancel();
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+function buildPayload(values: Record<string, any>) {
+  const attachmentUrls = normalizeAttachmentUrls(values.attachment);
+  const payload: Record<string, any> = {
+    attachment: attachmentUrls.join(','),
+    content: normalizeText(values.content),
+    creatorType: toNumberValue(values.creatorType),
+    creatorPhone: values.creatorPhone,
+    id: values.id,
+    relatedId: values.relatedId,
+    relatedType: values.relatedType,
+    remark: normalizeText(values.remark),
+    title: normalizeText(values.title),
+    woType: toNumberValue(values.woType),
+  };
+
+  if (attachmentUrls.length > 0) {
+    payload.attachmentUrls = attachmentUrls;
+  }
+
+  for (const key of Object.keys(payload)) {
+    if (payload[key] === '' || payload[key] === undefined || payload[key] === null) {
+      delete payload[key];
+    }
+  }
+  return payload;
+}
+
+function normalizeText(value: any) {
+  return typeof value === 'string' ? value.trim() : value;
+}
+
+function toDictValue(value: any) {
+  return value === undefined || value === null || value === '' ? undefined : String(value);
+}
+
+function toNumberValue(value: any) {
+  if (value === undefined || value === null || value === '') {
+    return undefined;
+  }
+  return Number(value);
+}
+
+function normalizeAttachmentUrls(value: any) {
+  if (Array.isArray(value)) {
+    return value
+      .map((item) => {
+        if (typeof item === 'string') {
+          return item.trim();
+        }
+        return item?.url || item?.response?.url || '';
+      })
+      .filter(Boolean);
+  }
+  if (typeof value === 'string') {
+    return value
+      .split(',')
+      .map((item) => item.trim())
+      .filter(Boolean);
+  }
+  if (value?.url || value?.response?.url) {
+    return [value.url || value.response.url];
+  }
+  return [];
+}
+</script>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoMain/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tWoMain/index.vue
new file mode 100644
index 0000000..24c71bf
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoMain/index.vue
@@ -0,0 +1,195 @@
+<script lang="ts" setup>
+import type { DeepPartial } from '@vben/types';
+
+import type { RowType } from './model';
+
+import type { VbenFormProps } from '#/adapter/form';
+import type {
+  VxeGridListeners,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+
+import { h, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { MdiPlus } from '@vben/icons';
+
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Cancel, List, Transfer } from '#/api/common/tWoMain';
+
+import editDrawer from './edit.vue';
+import { columns, querySchema } from './model';
+
+const formOptions: VbenFormProps = {
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  showCollapseButton: true,
+  submitOnChange: true,
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'id',
+  },
+  columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await List({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  showOverflow: false,
+  toolbarConfig: {
+    custom: true,
+    export: false,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxAll: handleCheckboxChange,
+  checkboxChange: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+const router = useRouter();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+});
+
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+}
+
+function handleCommunication(row: RowType) {
+  router.push({
+    path: '/common/tWoCommunication/detail',
+    query: {
+      id: row.id,
+      woNo: row.woNo,
+    },
+  });
+}
+
+function isTerminalWorkOrder(row: RowType) {
+  return [4, 5].includes(Number(row.currentStatus));
+}
+
+async function handleTransfer(row: RowType) {
+  await confirmWoAction('确认转单吗？', async () => {
+    await Transfer({ woNo: row.woNo });
+    message.success('转单成功');
+  });
+}
+
+async function handleCancelWo(row: RowType) {
+  await confirmWoAction('确认取消该工单吗？', async () => {
+    await Cancel({ woNo: row.woNo });
+    message.success('取消成功');
+  });
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+function confirmWoAction(title: string, action: () => Promise<void>) {
+  return new Promise<void>((resolve) => {
+    Modal.confirm({
+      title,
+      onCancel: () => resolve(),
+      onOk: async () => {
+        await action();
+        await handleRefresh();
+        resolve();
+      },
+    });
+  });
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="工单管理">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleAdd"
+          v-access:code="'cpm:gen:tWoMain:edit'"
+        >
+          创建工单
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleCommunication(row)"
+            v-access:code="'cpm:gen:tWoCommunication:list'"
+          >
+            {{ isTerminalWorkOrder(row) ? '查看' : '沟通' }}
+          </Button>
+          <Button
+            v-if="[1, 2].includes(Number(row.currentStatus))"
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleTransfer(row)"
+            v-access:code="'cpm:gen:tWoMain:transfer'"
+          >
+            转单
+          </Button>
+          <Button
+            v-if="[1, 2].includes(Number(row.currentStatus))"
+            class="mr-2 border-none p-0"
+            :block="false"
+            danger
+            type="link"
+            @click="handleCancelWo(row)"
+            v-access:code="'cpm:gen:tWoMain:cancel'"
+          >
+            取消
+          </Button>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoMain/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tWoMain/model.tsx
new file mode 100644
index 0000000..f23d723
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoMain/model.tsx
@@ -0,0 +1,328 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '#/adapter/form';
+import { z } from '@vben/common-ui';
+import { renderDict, type MemberSumma } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+import DictEnum from '#/constants/DictEnum';
+
+export class State {
+  public id = 0; // 主键ID
+  public woNo = ''; // 工单编号
+  public woType = 0; // 工单类型 枚举
+  public title = ''; // 工单标题
+  public content = ''; // 问题描述
+  public attachment = ''; // 附件
+  public creatorType = 0; // 创建人类型：1终端用户，2代理商，3客服
+  public creatorDeptId = 0; // 创建人机构ID
+  public creatorUserId = 0; // 创建人用户ID
+  public creatorName = ''; // 创建人姓名
+  public currentStatus = null; // 当前处理状态：1已分派，2处理中，3已解决，4已完结
+  public handlerDeptId = 0; // 处理方机构ID
+  public handlerUserId = 0; // 处理人用户ID
+  public handlerName = ''; // 处理人姓名
+  public relatedType = 0; // 关联业务类型：0卡，1套餐，2订单，3系统
+  public relatedId = 0; // 关联业务ID
+  public firstResponseTime = ''; // 首次响应时间
+  public resolveTime = ''; // 解决时间
+  public closeTime = ''; // 关闭时间
+  public satisfactionLevel = 0; // 满意度：1-5分
+  public evalContent = ''; // 评价内容
+  public evalTime = ''; // 评价时间
+  public remark = ''; // 备注
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+				fieldName: 'woNo',
+				component: 'Input',
+				label: '工单编号',
+				componentProps: {
+					placeholder: '请输入工单编号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			}, {
+				fieldName: 'woType',
+				component: 'Select',    
+				label: '工单类型',    
+				defaultValue: null,    
+				componentProps: {    
+					placeholder: '请选择工单类型',    
+					options: getDictOptions(DictEnum.WO_TYPE),    
+					onUpdateValue: (e: any) => {    
+						console.log(e);    
+					},  
+				},
+				
+			},
+      
+      {    
+			fieldName: 'currentStatus',    
+			component: 'Select',    
+			label: '当前处理状态',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择当前处理状态',    
+			  options: getDictOptions(DictEnum.CURRENT_STATUS),   
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			
+			formItemClass: 'col-span-1',
+		},
+		  ];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  
+  {
+    title: '工单编号',
+    field: 'woNo',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '工单类型',
+    field: 'woType',
+    align: 'left',
+    width: -1,
+    slots: {
+          default: ({ row }) => {
+        return renderDict(row.woType, DictEnum.WO_TYPE);
+      }
+    },
+ },
+  {
+    title: '工单标题',
+    field: 'title',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '关联业务号',
+    field: 'relatedId',
+    align: 'left',
+    width: -1,
+ },
+
+  {
+    title: '创建人姓名',
+    field: 'creatorName',
+    align: 'left',
+    width: -1,
+ },
+ {    
+				title: '当前处理状态',    field: 'currentStatus',    align: 'left',    width: -1, 
+				slots: {
+      				default: ({ row }) => {
+						return renderDict(row.currentStatus, DictEnum.CURRENT_STATUS);
+					}
+				},
+			},
+  
+  {
+    title: '首次响应时间',
+    field: 'firstResponseTime',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    align: 'left',
+    width: -1,
+ },
+
+  
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  woNo: string;
+  woType: number;
+  title: string;
+  content: string;
+  attachment: string;
+  creatorType: number;
+  creatorDeptId: number;
+  creatorUserId: number;
+  creatorName: string;
+  currentStatus: number;
+  handlerDeptId: number;
+  handlerUserId: number;
+  handlerName: string;
+  relatedType: number;
+  relatedId: number;
+  firstResponseTime: string;
+  resolveTime: string;
+  closeTime: string;
+  satisfactionLevel: number;
+  evalContent: string;
+  evalTime: string;
+  remark: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '主键ID'},
+  {  field: 'woNo',  label: '工单编号'},
+  {  field: 'woType',  label: '工单类型 枚举'},
+  {  field: 'title',  label: '工单标题'},
+  {  field: 'content',  label: '问题描述'},
+  {  field: 'attachment',  label: '附件'},
+  {  field: 'creatorType',  label: '创建人类型：1终端用户，2代理商，3客服'},
+  {  field: 'creatorDeptId',  label: '创建人机构ID'},
+  {  field: 'creatorUserId',  label: '创建人用户ID'},
+  {  field: 'creatorName',  label: '创建人姓名'},
+  {
+				field: 'currentStatus',
+				label: '当前处理状态：1已分派，2处理中，3已解决，4已完结',
+				render(row: any) {
+					return renderDict(row.currentStatus, 'sys_common_status');
+				},
+			},
+			  {  field: 'handlerDeptId',  label: '处理方机构ID'},
+  {  field: 'handlerUserId',  label: '处理人用户ID'},
+  {  field: 'handlerName',  label: '处理人姓名'},
+  {  field: 'relatedType',  label: '关联业务类型：0卡，1套餐，2订单，3系统'},
+  {  field: 'relatedId',  label: '关联业务ID'},
+  {  field: 'firstResponseTime',  label: '首次响应时间'},
+  {  field: 'resolveTime',  label: '解决时间'},
+  {  field: 'closeTime',  label: '关闭时间'},
+  {  field: 'satisfactionLevel',  label: '满意度：1-5分'},
+  {  field: 'evalContent',  label: '评价内容'},
+  {  field: 'evalTime',  label: '评价时间'},
+  {  field: 'remark',  label: '备注'},
+  {  field: 'tenantId',  label: '租户ID'},
+  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'updatedBy',  label: '更新者'},
+  {  field: 'updatedAt',  label: '更新时间'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+  },
+   {
+    fieldName: 'woType',
+    component: 'Select',
+    label: '工单类型',
+    defaultValue: '1',
+   componentProps: {
+        allowClear: true,
+        placeholder: '请选择工单类型',
+        options: getDictOptions(DictEnum.WO_TYPE),
+      },
+  },
+  {
+    fieldName: 'relatedId',
+    component: 'InputNumber',
+    label: '关联业务ID',
+    componentProps: {
+      class: 'w-full',
+      placeholder: '请输入关联业务ID',
+    },
+  },
+  {
+    fieldName: 'title',
+    component: 'Input',
+    label: '工单标题',
+    componentProps: {
+      placeholder: '请输入工单标题',
+    },
+    rules: 'required',
+  },
+ 
+  {
+    fieldName: 'content',
+    component: 'Textarea',
+    label: '问题描述',
+    componentProps: {
+      placeholder: '请描述需要处理的问题',
+      rows: 5,
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'attachment',
+    component: 'FileUpload',
+    label: '附件上传',
+    componentProps: {
+      accessCode: 'cpm:system:oss:upload',
+      multiple: true,
+    
+      maxNumber: 10,
+      maxSize: 50,
+      showType: 'button',
+      showDescription: false,
+    },
+  },
+  {
+    fieldName: 'creatorType',
+    component: 'Select',
+    label: '创建人类型',
+    defaultValue: '1',
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择创建人类型',
+      options: getDictOptions(DictEnum.CREATOR_TYPE),
+    },
+  },
+  {
+    fieldName: 'creatorPhone',
+    component: 'Input',
+    label: '创建人手机号',
+    componentProps: {
+      placeholder: '请输入创建人手机号',
+    },
+    rules: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的手机号'),
+  },
+];
+
+
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/edit.vue b/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/edit.vue
new file mode 100644
index 0000000..dbf40bd
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/edit.vue
@@ -0,0 +1,113 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/common/tWoRecord';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/index.vue b/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/index.vue
new file mode 100644
index 0000000..8d08cb8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/index.vue
@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+  import { h, ref } from 'vue';
+  import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl } from '@vben/access';
+  import {
+    commonDownloadExcel,
+    getExportColumns,
+  } from '#/utils/file/download';
+  import { List, Export, Delete } from '#/api/common/tWoRecord';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: number[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '工单记录表',{
+  exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+  ...formValues,
+  page: 1,
+  });
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="工单记录表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:gen:tWoRecord:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:gen:tWoRecord:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:gen:tWoRecord:export'">
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:gen:tWoRecord:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:gen:tWoRecord:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:gen:tWoRecord:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/model.test.ts b/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/model.test.ts
new file mode 100644
index 0000000..ffe78eb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/model.test.ts
@@ -0,0 +1,75 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('#/utils', () => ({
+  renderDict: (value: string, dict: string) => ({ value, dict }),
+}));
+vi.mock('#/utils/dict', () => ({ getDictOptions: () => [] }));
+
+import { columns, viewSchema } from './model';
+
+type StatusField = 'beforeStatus' | 'afterStatus';
+type StatusRow = {
+  operationType: number;
+  beforeStatus?: null | number | string;
+  afterStatus?: null | number | string;
+};
+
+function renderList(field: StatusField, row: StatusRow) {
+  const column = columns?.find((item) => item.field === field);
+  const render = column?.slots?.default as (params: {
+    row: StatusRow;
+  }) => unknown;
+  return render({ row });
+}
+
+function renderDetail(field: StatusField, row: StatusRow) {
+  const render = viewSchema.find((item) => item.field === field)?.render;
+  return render?.(row[field], row);
+}
+
+describe('工单记录状态展示', () => {
+  for (const render of [renderList, renderDetail]) {
+    it('所有正常状态统一使用工单字典', () => {
+      for (const field of ['beforeStatus', 'afterStatus'] as const) {
+        for (const status of [1, 2, 3, 4, 5]) {
+          expect(render(field, { operationType: 2, [field]: status })).toEqual({
+            value: String(status),
+            dict: 'current_status',
+          });
+        }
+      }
+    });
+
+    it('创建前无状态显示占位，创建后显示实际状态', () => {
+      expect(
+        render('beforeStatus', { operationType: 0, beforeStatus: 0 }),
+      ).toBe('—');
+      expect(
+        render('afterStatus', { operationType: 0, afterStatus: 2 }),
+      ).toEqual({
+        value: '2',
+        dict: 'current_status',
+      });
+    });
+
+    it('历史记录缺失状态不再显示未知，也不推测为正常状态', () => {
+      for (const missing of [0, '0', null, undefined]) {
+        expect(
+          render('afterStatus', { operationType: 0, afterStatus: missing }),
+        ).toBe('未记录');
+        expect(
+          render('beforeStatus', { operationType: 3, beforeStatus: missing }),
+        ).toBe('未记录');
+      }
+    });
+
+    it('保留真正异常的状态值供字典组件识别', () => {
+      expect(
+        render('afterStatus', { operationType: 3, afterStatus: 99 }),
+      ).toEqual({
+        value: '99',
+        dict: 'current_status',
+      });
+    });
+  }
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/model.tsx b/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/model.tsx
new file mode 100644
index 0000000..14da8d0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/model.tsx
@@ -0,0 +1,331 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '#/adapter/form';
+import { z } from '@vben/common-ui';
+import { renderDict, type MemberSumma } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+import DictEnum from '#/constants/DictEnum';
+
+export class State {
+  public id = 0; // 主键ID
+  public woNo = ''; // 工单编号
+  public operationType = 0; // 操作类型：0创建，1分派，2处理，3完成，4关单，5取消
+  public operationDeptId = 0; // 操作机构ID
+  public operationUserId = 0; // 操作用户ID
+  public targetDeptId = 0; // 目标部门ID
+  public targetUserId = 0; // 目标用户ID
+  public beforeStatus = null; // 变更前状态
+  public afterStatus = null; // 变更后状态
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+				fieldName: 'woNo',
+				component: 'Input',
+				label: '工单编号',
+				componentProps: {
+					placeholder: '请输入工单编号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {    
+			fieldName: 'beforeStatus',    
+			component: 'Select',    
+			label: '操作类型',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择操作类型',    
+				options: getDictOptions(DictEnum.OPERATION_TYPE),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null,
+			formItemClass: 'col-span-1',
+		},
+		 
+		 ];
+
+// 表格列
+function renderStatus(row: RowType, field: 'beforeStatus' | 'afterStatus') {
+  const value = row[field];
+  if (value == null || Number(value) === 0) {
+    return field === 'beforeStatus' && Number(row.operationType) === 0
+      ? '—'
+      : '未记录';
+  }
+  return renderDict(String(value), DictEnum.CURRENT_STATUS);
+}
+
+export const columns: VxeGridProps['columns'] = [
+
+  {
+    title: '工单编号',
+    field: 'woNo',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '操作类型',
+    field: 'operationType',
+    params: { dictType: DictEnum.OPERATION_TYPE },
+    align: 'left',
+    width: -1,
+	slots: {
+				default: ({ row }) => {
+					return renderDict(row.operationType, DictEnum.OPERATION_TYPE);
+				}
+			},
+ },
+  {
+    title: '操作机构名称',
+    field: 'operationDeptName',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '操作用户名称',
+    field: 'operationUserName',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '目标部门名称',
+    field: 'targetDeptName',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '目标用户名称',
+    field: 'targetUserName',
+    align: 'left',
+    width: -1,
+ },
+ {    
+				title: '变更前状态',    field: 'beforeStatus',
+    params: { dictType: DictEnum.CURRENT_STATUS },    align: 'left',    width: -1,
+				slots: {
+      				default: ({ row }) => {
+						return renderStatus(row, 'beforeStatus');
+					}
+				},
+			},
+			 {    
+				title: '变更后状态',    field: 'afterStatus',
+    params: { dictType: DictEnum.CURRENT_STATUS },    align: 'left',    width: -1,
+				slots: {
+      				default: ({ row }) => {
+						return renderStatus(row, 'afterStatus');
+					}
+				},
+			},
+			 
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  woNo: string;
+  operationType: number;
+  operationDeptId: number;
+  operationUserId: number;
+  targetDeptId: number;
+  targetUserId: number;
+  beforeStatus: number;
+  afterStatus: number;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '主键ID'},
+  {  field: 'woNo',  label: '工单编号'},
+  {  field: 'operationType',  label: '操作类型：0创建，1分派，2处理，3完成，4关单，5取消'},
+  {  field: 'operationDeptId',  label: '操作机构ID'},
+  {  field: 'operationUserId',  label: '操作用户ID'},
+  {  field: 'targetDeptId',  label: '目标部门ID'},
+  {  field: 'targetUserId',  label: '目标用户ID'},
+  {
+				field: 'beforeStatus',
+				label: '变更前状态',
+				render(_value: unknown, row: any) {
+					return renderStatus(row, 'beforeStatus');
+				},
+			},
+			  {
+				field: 'afterStatus',
+				label: '变更后状态',
+				render(_value: unknown, row: any) {
+					return renderStatus(row, 'afterStatus');
+				},
+			},
+			  {  field: 'tenantId',  label: '租户ID'},
+  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'updatedBy',  label: '更新者'},
+  {  field: 'updatedAt',  label: '更新时间'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+					fieldName: 'id',
+					component: 'Input',
+					label: '主键ID',
+					dependencies: {   show: () => false,    triggerFields: [''],   },
+					componentProps: {
+						placeholder: '',
+						onUpdateValue: (e: any) => {
+							console.log(e);
+						},   
+					},
+					formItemClass: 'col-span-1',
+				},  {
+				fieldName: 'woNo',
+				component: 'Input',
+				label: '工单编号',
+				componentProps: {
+					placeholder: '请输入工单编号',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'operationType',
+				component: 'InputNumber',
+				label: '操作类型：0创建，1分派，2处理，3完成，4关单，5取消',
+				componentProps: {
+					placeholder: '请输入操作类型：0创建，1分派，2处理，3完成，4关单，5取消',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:z.number({required_error: '请输入操作类型：0创建，1分派，2处理，3完成，4关单，5取消', invalid_type_error: '无效数字'}),
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'operationDeptId',
+				component: 'InputNumber',
+				label: '操作机构ID',
+				componentProps: {
+					placeholder: '请输入操作机构ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'operationUserId',
+				component: 'InputNumber',
+				label: '操作用户ID',
+				componentProps: {
+					placeholder: '请输入操作用户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'targetDeptId',
+				component: 'InputNumber',
+				label: '目标部门ID',
+				componentProps: {
+					placeholder: '请输入目标部门ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'targetUserId',
+				component: 'InputNumber',
+				label: '目标用户ID',
+				componentProps: {
+					placeholder: '请输入目标用户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			},  {    
+			fieldName: 'beforeStatus',    
+			component: 'Select',    
+			label: '变更前状态',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择变更前状态',    
+				options: getDictOptions('sys_common_status'),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null,
+			formItemClass: 'col-span-1',
+		},
+		  {    
+			fieldName: 'afterStatus',    
+			component: 'Select',    
+			label: '变更后状态',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择变更后状态',    
+				options: getDictOptions('sys_common_status'),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null,
+			formItemClass: 'col-span-1',
+		},
+		  {
+				fieldName: 'tenantId',
+				component: 'Input',
+				label: '租户ID',
+				componentProps: {
+					placeholder: '请输入租户ID',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:'required',
+				formItemClass: 'col-span-1',
+			},];
+
+
diff --git a/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/view.vue b/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/view.vue
new file mode 100644
index 0000000..491cfa1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/common/tWoRecord/view.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/common/tWoRecord';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id }); 
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
new file mode 100644
index 0000000..4b353c6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
@@ -0,0 +1,106 @@
+<!--
+ * @description 仪表盘-趋势分析图表
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    grid: {
+      bottom: 0,
+      containLabel: true,
+      left: '1%',
+      right: '1%',
+      top: '2 %',
+    },
+    series: [
+      {
+        areaStyle: {},
+        data: [
+          111, 2000, 6000, 16_000, 33_333, 55_555, 64_000, 33_333, 18_000,
+          36_000, 70_000, 42_444, 23_222, 13_000, 8000, 4000, 1200, 333, 222,
+          111,
+        ],
+        itemStyle: {
+          color: '#5ab1ef',
+        },
+        smooth: true,
+        type: 'line',
+      },
+      {
+        areaStyle: {},
+        data: [
+          33, 66, 88, 333, 3333, 6200, 20_000, 3000, 1200, 13_000, 22_000,
+          11_000, 2221, 1201, 390, 198, 60, 30, 22, 11,
+        ],
+        itemStyle: {
+          color: '#019680',
+        },
+        smooth: true,
+        type: 'line',
+      },
+    ],
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#019680',
+          width: 1,
+        },
+      },
+      trigger: 'axis',
+    },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
+    xAxis: {
+      axisTick: {
+        show: false,
+      },
+      boundaryGap: false,
+      data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
+      type: 'category',
+    },
+    yAxis: [
+      {
+        axisTick: {
+          show: false,
+        },
+        max: 80_000,
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
+        type: 'value',
+      },
+    ],
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
new file mode 100644
index 0000000..e99fff9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -0,0 +1,90 @@
+<!--
+ * @description 仪表盘-访问数据分析图表
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    legend: {
+      bottom: 0,
+      data: ['访问', '趋势'],
+    },
+    radar: {
+      indicator: [
+        {
+          name: '网页',
+        },
+        {
+          name: '移动端',
+        },
+        {
+          name: 'Ipad',
+        },
+        {
+          name: '客户端',
+        },
+        {
+          name: '第三方',
+        },
+        {
+          name: '其它',
+        },
+      ],
+      radius: '60%',
+      splitNumber: 8,
+    },
+    series: [
+      {
+        areaStyle: {
+          opacity: 1,
+          shadowBlur: 0,
+          shadowColor: 'rgba(0,0,0,.2)',
+          shadowOffsetX: 0,
+          shadowOffsetY: 10,
+        },
+        data: [
+          {
+            itemStyle: {
+              color: '#b6a2de',
+            },
+            name: '访问',
+            value: [90, 50, 86, 40, 50, 20],
+          },
+          {
+            itemStyle: {
+              color: '#5ab1ef',
+            },
+            name: '趋势',
+            value: [70, 75, 70, 76, 20, 85],
+          },
+        ],
+        itemStyle: {
+          // borderColor: '#fff',
+          borderRadius: 10,
+          borderWidth: 2,
+        },
+        symbolSize: 0,
+        type: 'radar',
+      },
+    ],
+    tooltip: {},
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
new file mode 100644
index 0000000..2b42a59
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -0,0 +1,54 @@
+<!--
+ * @description 仪表盘-访问销售分析图表
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    series: [
+      {
+        animationDelay() {
+          return Math.random() * 400;
+        },
+        animationEasing: 'exponentialInOut',
+        animationType: 'scale',
+        center: ['50%', '50%'],
+        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+        data: [
+          { name: '外包', value: 500 },
+          { name: '定制', value: 310 },
+          { name: '技术支持', value: 274 },
+          { name: '远程', value: 400 },
+        ].sort((a, b) => {
+          return a.value - b.value;
+        }),
+        name: '商业占比',
+        radius: '80%',
+        roseType: 'radius',
+        type: 'pie',
+      },
+    ],
+
+    tooltip: {
+      trigger: 'item',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
new file mode 100644
index 0000000..0915c7a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    legend: {
+      bottom: '2%',
+      left: 'center',
+    },
+    series: [
+      {
+        animationDelay() {
+          return Math.random() * 100;
+        },
+        animationEasing: 'exponentialInOut',
+        animationType: 'scale',
+        avoidLabelOverlap: false,
+        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+        data: [
+          { name: '搜索引擎', value: 1048 },
+          { name: '直接访问', value: 735 },
+          { name: '邮件营销', value: 580 },
+          { name: '联盟广告', value: 484 },
+        ],
+        emphasis: {
+          label: {
+            fontSize: '12',
+            fontWeight: 'bold',
+            show: true,
+          },
+        },
+        itemStyle: {
+          // borderColor: '#fff',
+          borderRadius: 10,
+          borderWidth: 2,
+        },
+        label: {
+          position: 'center',
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        name: '访问来源',
+        radius: ['40%', '65%'],
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
new file mode 100644
index 0000000..7e0f101
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    grid: {
+      bottom: 0,
+      containLabel: true,
+      left: '1%',
+      right: '1%',
+      top: '2 %',
+    },
+    series: [
+      {
+        barMaxWidth: 80,
+        // color: '#4f69fd',
+        data: [
+          3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000,
+          3200, 4800,
+        ],
+        type: 'bar',
+      },
+    ],
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          // color: '#4f69fd',
+          width: 1,
+        },
+      },
+      trigger: 'axis',
+    },
+    xAxis: {
+      data: Array.from({ length: 12 }).map((_item, index) => `${index + 1}月`),
+      type: 'category',
+    },
+    yAxis: {
+      max: 8000,
+      splitNumber: 4,
+      type: 'value',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/index.vue b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/index.vue
new file mode 100644
index 0000000..5e3d6d2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/dashboard/analytics/index.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { AnalysisOverviewItem } from '@vben/common-ui';
+import type { TabOption } from '@vben/types';
+
+import {
+  AnalysisChartCard,
+  AnalysisChartsTabs,
+  AnalysisOverview,
+} from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
+
+import AnalyticsTrends from './analytics-trends.vue';
+import AnalyticsVisitsData from './analytics-visits-data.vue';
+import AnalyticsVisitsSales from './analytics-visits-sales.vue';
+import AnalyticsVisitsSource from './analytics-visits-source.vue';
+import AnalyticsVisits from './analytics-visits.vue';
+
+const overviewItems: AnalysisOverviewItem[] = [
+  {
+    icon: SvgCardIcon,
+    title: '用户量',
+    totalTitle: '总用户量',
+    totalValue: 120_000,
+    value: 2000,
+  },
+  {
+    icon: SvgCakeIcon,
+    title: '访问量',
+    totalTitle: '总访问量',
+    totalValue: 500_000,
+    value: 20_000,
+  },
+  {
+    icon: SvgDownloadIcon,
+    title: '下载量',
+    totalTitle: '总下载量',
+    totalValue: 120_000,
+    value: 8000,
+  },
+  {
+    icon: SvgBellIcon,
+    title: '使用量',
+    totalTitle: '总使用量',
+    totalValue: 50_000,
+    value: 5000,
+  },
+];
+
+const chartTabs: TabOption[] = [
+  {
+    label: '流量趋势',
+    value: 'trends',
+  },
+  {
+    label: '月访问量',
+    value: 'visits',
+  },
+];
+</script>
+
+<template>
+  <div class="p-5">
+    <AnalysisOverview :items="overviewItems" />
+    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
+      <template #trends>
+        <AnalyticsTrends />
+      </template>
+      <template #visits>
+        <AnalyticsVisits />
+      </template>
+    </AnalysisChartsTabs>
+
+    <div class="mt-5 w-full md:flex">
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
+        <AnalyticsVisitsData />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问来源">
+        <AnalyticsVisitsSource />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
+        <AnalyticsVisitsSales />
+      </AnalysisChartCard>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/dashboard/workspace/index.vue b/admin-ui/vue/apps/web-antd/src/views/dashboard/workspace/index.vue
new file mode 100644
index 0000000..b95d613
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/dashboard/workspace/index.vue
@@ -0,0 +1,266 @@
+<script lang="ts" setup>
+import type {
+  WorkbenchProjectItem,
+  WorkbenchQuickNavItem,
+  WorkbenchTodoItem,
+  WorkbenchTrendItem,
+} from '@vben/common-ui';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import {
+  AnalysisChartCard,
+  WorkbenchHeader,
+  WorkbenchProject,
+  WorkbenchQuickNav,
+  WorkbenchTodo,
+  WorkbenchTrends,
+} from '@vben/common-ui';
+import { preferences } from '@vben/preferences';
+import { useUserStore } from '@vben/stores';
+import { openWindow } from '@vben/utils';
+
+import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
+
+const userStore = useUserStore();
+
+// 这是一个示例数据，实际项目中需要根据实际情况进行调整
+// url 也可以是内部路由，在 navTo 方法中识别处理，进行内部跳转
+// 例如：url: /dashboard/workspace
+const projectItems: WorkbenchProjectItem[] = [
+  {
+    color: '',
+    content: '不要等待机会，而要创造机会。',
+    date: '2021-04-01',
+    group: '开源组',
+    icon: 'carbon:logo-github',
+    title: 'Github',
+    url: 'https://github.com',
+  },
+  {
+    color: '#3fb27f',
+    content: '现在的你决定将来的你。',
+    date: '2021-04-01',
+    group: '算法组',
+    icon: 'ion:logo-vue',
+    title: 'Vue',
+    url: 'https://vuejs.org',
+  },
+  {
+    color: '#e18525',
+    content: '没有什么才能比努力更重要。',
+    date: '2021-04-01',
+    group: '上班摸鱼',
+    icon: 'ion:logo-html5',
+    title: 'Html5',
+    url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
+  },
+  {
+    color: '#bf0c2c',
+    content: '热情和欲望可以突破一切难关。',
+    date: '2021-04-01',
+    group: 'UI',
+    icon: 'ion:logo-angular',
+    title: 'Angular',
+    url: 'https://angular.io',
+  },
+  {
+    color: '#00d8ff',
+    content: '健康的身体是实现目标的基石。',
+    date: '2021-04-01',
+    group: '技术牛',
+    icon: 'bx:bxl-react',
+    title: 'React',
+    url: 'https://reactjs.org',
+  },
+  {
+    color: '#EBD94E',
+    content: '路是走出来的，而不是空想出来的。',
+    date: '2021-04-01',
+    group: '架构组',
+    icon: 'ion:logo-javascript',
+    title: 'Js',
+    url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript',
+  },
+];
+
+// 同样，这里的 url 也可以使用以 http 开头的外部链接
+const quickNavItems: WorkbenchQuickNavItem[] = [
+  {
+    color: '#1fdaca',
+    icon: 'ion:home-outline',
+    title: '首页',
+    url: '/',
+  },
+  {
+    color: '#bf0c2c',
+    icon: 'ion:grid-outline',
+    title: '仪表盘',
+    url: '/dashboard',
+  },
+  {
+    color: '#e18525',
+    icon: 'ion:layers-outline',
+    title: '组件',
+    url: '/demos/features/icons',
+  },
+  {
+    color: '#3fb27f',
+    icon: 'ion:settings-outline',
+    title: '系统管理',
+    url: '/demos/features/login-expired', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
+  },
+  {
+    color: '#4daf1bc9',
+    icon: 'ion:key-outline',
+    title: '权限管理',
+    url: '/demos/access/page-control',
+  },
+  {
+    color: '#00d8ff',
+    icon: 'ion:bar-chart-outline',
+    title: '图表',
+    url: '/analytics',
+  },
+];
+
+const todoItems = ref<WorkbenchTodoItem[]>([
+  {
+    completed: false,
+    content: `审查最近提交到Git仓库的前端代码，确保代码质量和规范。`,
+    date: '2024-07-30 11:00:00',
+    title: '审查前端代码提交',
+  },
+  {
+    completed: true,
+    content: `检查并优化系统性能，降低CPU使用率。`,
+    date: '2024-07-30 11:00:00',
+    title: '系统性能优化',
+  },
+  {
+    completed: false,
+    content: `进行系统安全检查，确保没有安全漏洞或未授权的访问。 `,
+    date: '2024-07-30 11:00:00',
+    title: '安全检查',
+  },
+  {
+    completed: false,
+    content: `更新项目中的所有npm依赖包，确保使用最新版本。`,
+    date: '2024-07-30 11:00:00',
+    title: '更新项目依赖',
+  },
+  {
+    completed: false,
+    content: `修复用户报告的页面UI显示问题，确保在不同浏览器中显示一致。 `,
+    date: '2024-07-30 11:00:00',
+    title: '修复UI显示问题',
+  },
+]);
+const trendItems: WorkbenchTrendItem[] = [
+  {
+    avatar: 'svg:avatar-1',
+    content: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
+    date: '刚刚',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-2',
+    content: `关注了 <a>威廉</a> `,
+    date: '1个小时前',
+    title: '艾文',
+  },
+  {
+    avatar: 'svg:avatar-3',
+    content: `发布了 <a>个人动态</a> `,
+    date: '1天前',
+    title: '克里斯',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `发表文章 <a>如何编写一个Vite插件</a> `,
+    date: '2天前',
+    title: 'Vben',
+  },
+  {
+    avatar: 'svg:avatar-1',
+    content: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
+    date: '3天前',
+    title: '皮特',
+  },
+  {
+    avatar: 'svg:avatar-2',
+    content: `关闭了问题 <a>如何运行项目</a> `,
+    date: '1周前',
+    title: '杰克',
+  },
+  {
+    avatar: 'svg:avatar-3',
+    content: `发布了 <a>个人动态</a> `,
+    date: '1周前',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `推送了代码到 <a>Github</a>`,
+    date: '2021-04-01 20:00',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `发表文章 <a>如何编写使用 Admin Vben</a> `,
+    date: '2021-03-01 20:00',
+    title: 'Vben',
+  },
+];
+
+const router = useRouter();
+
+// 这是一个示例方法，实际项目中需要根据实际情况进行调整
+// This is a sample method, adjust according to the actual project requirements
+function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+  if (nav.url?.startsWith('http')) {
+    openWindow(nav.url);
+    return;
+  }
+  if (nav.url?.startsWith('/')) {
+    router.push(nav.url).catch((error) => {
+      console.error('Navigation failed:', error);
+    });
+  } else {
+    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
+  }
+}
+</script>
+
+<template>
+  <div class="p-5">
+    <WorkbenchHeader
+      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
+    >
+      <template #title>
+        早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
+      </template>
+      <template #description> 今日晴，20℃ - 32℃！ </template>
+    </WorkbenchHeader>
+
+    <div class="mt-5 flex flex-col lg:flex-row">
+      <div class="mr-4 w-full lg:w-3/5">
+        <WorkbenchProject :items="projectItems" title="项目" @click="navTo" />
+        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
+      </div>
+      <div class="w-full lg:w-2/5">
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+          @click="navTo"
+        />
+        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
+        <AnalysisChartCard class="mt-5" title="访问来源">
+          <AnalyticsVisitsSource />
+        </AnalysisChartCard>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/demos/antd/index.vue b/admin-ui/vue/apps/web-antd/src/views/demos/antd/index.vue
new file mode 100644
index 0000000..b3b05cc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/demos/antd/index.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { Button, Card, message, notification, Space } from 'ant-design-vue';
+
+type NotificationType = 'error' | 'info' | 'success' | 'warning';
+
+function info() {
+  message.info('How many roads must a man walk down');
+}
+
+function error() {
+  message.error({
+    content: 'Once upon a time you dressed so fine',
+    duration: 2500,
+  });
+}
+
+function warning() {
+  message.warning('How many roads must a man walk down');
+}
+function success() {
+  message.success('Cause you walked hand in hand With another man in my place');
+}
+
+function notify(type: NotificationType) {
+  notification[type]({
+    duration: 2500,
+    message: '说点啥呢',
+    type,
+  });
+}
+</script>
+
+<template>
+  <Page
+    description="支持多语言，主题功能集成切换等"
+    title="Ant Design Vue组件使用演示"
+  >
+    <Card class="mb-5" title="按钮">
+      <Space>
+        <Button>Default</Button>
+        <Button type="primary"> Primary </Button>
+        <Button> Info </Button>
+        <Button danger> Error </Button>
+      </Space>
+    </Card>
+    <Card class="mb-5" title="Message">
+      <Space>
+        <Button @click="info"> 信息 </Button>
+        <Button danger @click="error"> 错误 </Button>
+        <Button @click="warning"> 警告 </Button>
+        <Button @click="success"> 成功 </Button>
+      </Space>
+    </Card>
+
+    <Card class="mb-5" title="Notification">
+      <Space>
+        <Button @click="notify('info')"> 信息 </Button>
+        <Button danger @click="notify('error')"> 错误 </Button>
+        <Button @click="notify('warning')"> 警告 </Button>
+        <Button @click="notify('success')"> 成功 </Button>
+      </Space>
+    </Card>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/edit.vue b/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/edit.vue
new file mode 100644
index 0000000..58a37f4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/edit.vue
@@ -0,0 +1,112 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/gen/testCategory';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-3',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/index.vue b/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/index.vue
new file mode 100644
index 0000000..a0c7e7f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/index.vue
@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  const { hasAccessByCodes } = useAccess();
+  import { commonDownloadExcel } from '#/utils/file/download';
+  import { List, Export, Delete, Status } from '#/api/gen/testCategory';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '测试分类',{
+  ...formValues,
+  page: 1,
+  });
+  }
+  async function handleStatusChange(row: RowType) {
+  await Status({ id: row.id, status: row.status });
+  await message.success("操作成功")
+  await handleRefresh();
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="测试分类">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:gen:testCategory:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:gen:testCategory:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:gen:testCategory:export'">
+          导出
+        </Button>
+      </template>
+      <template #status="{ row }">
+        <Switch
+          v-model:checked="row.status" :checkedValue="'0'" :unCheckedValue="'1'"
+          @change="handleStatusChange(row)"
+           :disabled="!hasAccessByCodes(['cpm:gen:testCategory:status'])"
+        />
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:gen:testCategory:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:gen:testCategory:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:gen:testCategory:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/model.tsx b/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/model.tsx
new file mode 100644
index 0000000..df44418
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/model.tsx
@@ -0,0 +1,326 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderDict, renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+import { DictEnum } from '@vben/constants';
+import { getDictOptions } from '#/utils/dict';
+
+export class State {
+  public id = 0; // 分类ID
+  public name = ''; // 分类名称
+  public shortName = null; // 简称
+  public description = null; // 描述
+  public sort = 0; // 排序
+  public remark = null; // 备注
+  public status = 0; // 状态
+  public createdDept = 0; // 创建部门
+  public createdAt = ''; // 创建时间
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public updatedAt = ''; // 修改时间
+  public updatedBy = 0; // 修改者
+  public updatedBySumma?: null | MemberSumma = null; // 修改者摘要信息
+  public deletedAt = ''; // 删除时间
+  public deletedBy = 0; // 删除者
+  public deletedBySumma?: null | MemberSumma = null; // 删除者摘要信息
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'InputNumber',
+    label: '分类ID',
+    componentProps: {
+      placeholder: '请输入分类ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+  {    
+			fieldName: 'status',    
+			component: 'Select',    
+			label: '状态',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择状态',    
+				options: getDictOptions('sys_common_status'),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null
+		},
+		  {
+    fieldName: 'createdAt',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'daterange',
+      clearable: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '分类ID',
+    field: 'id',
+    align: 'left',
+    width: -1,
+    type: 'checkbox',
+  },
+  {
+    title: '分类名称',
+    field: 'name',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '简称',
+    field: 'shortName',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '描述',
+    field: 'description',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '排序',
+    field: 'sort',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '备注',
+    field: 'remark',
+    align: 'left',
+    width: -1,
+ },
+ {    
+				title: '状态',    field: 'status',    align: 'left',    width: -1, 
+				slots: {
+      				default: ({ row }) => {
+						return renderDict(row.status, 'sys_common_status');
+					}
+				},
+			},
+			  {
+    title: '创建部门',
+    field: 'createdDept',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建者',
+    field: 'createdBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.createdBySumma);
+    },
+ },
+ },
+  {
+    title: '修改时间',
+    field: 'updatedAt',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '修改者',
+    field: 'updatedBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.updatedBySumma);
+    },
+ },
+ },
+  {
+    title: '删除者',
+    field: 'deletedBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.deletedBySumma);
+    },
+ },
+ },
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  name: string;
+  shortName: string;
+  description: string;
+  sort: number;
+  remark: string;
+  status: number;
+  createdDept: number;
+  createdAt: string;
+  createdBy: number;
+  updatedAt: string;
+  updatedBy: number;
+  deletedAt: string;
+  deletedBy: number;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '分类ID'},
+  {  field: 'name',  label: '分类名称'},
+  {  field: 'shortName',  label: '简称'},
+  {  field: 'description',  label: '描述'},
+  {  field: 'sort',  label: '排序'},
+  {  field: 'remark',  label: '备注'},
+  {
+				field: 'status',
+				label: '状态',
+				render(row: any) {
+					return renderDict(row.status, 'sys_common_status');
+				},
+			},
+			  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'updatedAt',  label: '修改时间'},
+  {  field: 'updatedBy',  label: '修改者'},
+  {  field: 'deletedAt',  label: '删除时间'},
+  {  field: 'deletedBy',  label: '删除者'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '分类ID',
+    dependencies: {   show: () => false,    triggerFields: [''],   },
+    componentProps: {
+      placeholder: '',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    fieldName: 'name',
+    component: 'Input',
+    label: '分类名称',
+    componentProps: {
+      placeholder: '请输入分类名称',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:'required'
+},
+  {
+    fieldName: 'shortName',
+    component: 'Input',
+    label: '简称',
+    componentProps: {
+      placeholder: '请输入简称',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+  {
+    fieldName: 'description',
+    component: 'Input',
+    label: '描述',
+    componentProps: {
+      placeholder: '请输入描述',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+  {
+    fieldName: 'sort',
+    component: 'InputNumber',
+    label: '排序',
+    componentProps: {
+      placeholder: '请输入排序',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:z.number({required_error: '请输入排序', invalid_type_error: '无效数字'})
+},
+  {
+    fieldName: 'remark',
+    component: 'Input',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+  {    
+			fieldName: 'status',    
+			component: 'Select',    
+			label: '状态',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择状态',    
+				options: getDictOptions('sys_common_status'),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null
+		},
+		];
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/view.vue b/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/view.vue
new file mode 100644
index 0000000..29e6593
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/gen/testCategory/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/gen/testCategory';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/edit.vue b/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/edit.vue
new file mode 100644
index 0000000..d65b91e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/edit.vue
@@ -0,0 +1,112 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/gen/testDemo';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-3',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/index.vue b/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/index.vue
new file mode 100644
index 0000000..caec970
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/index.vue
@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed, onMounted } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  const { hasAccessByCodes } = useAccess();
+  import { commonDownloadExcel } from '#/utils/file/download';
+  import { List, Export, Delete } from '#/api/gen/testDemo';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editDrawer from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+  });
+  function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '测试单表',{
+  ...formValues,
+  page: 1,
+  });
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="测试单表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:gen:testDemo:edit'">
+          新增
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:gen:testDemo:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:gen:testDemo:export'">
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:gen:testDemo:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:gen:testDemo:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:gen:testDemo:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditDrawer @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/model.tsx b/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/model.tsx
new file mode 100644
index 0000000..e6671a4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/model.tsx
@@ -0,0 +1,375 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderDict, renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+import { DictEnum } from '@vben/constants';
+import { getDictOptions } from '#/utils/dict';
+
+export class State {
+  public id = 0; // 主键
+  public tenantId = '000000'; // 租户编号
+  public deptId = 0; // 部门id
+  public userId = 0; // 用户id
+  public orderNum = 0; // 排序号
+  public testKey = null; // key键
+  public value = null; // 值
+  public version = 0; // 版本
+  public createdDept = 0; // 创建部门
+  public createdAt = ''; // 创建时间
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public updatedAt = ''; // 更新时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public deletedBy = 0; // 删除人
+  public deletedBySumma?: null | MemberSumma = null; // 删除人摘要信息
+  public deletedAt = ''; // 删除时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'InputNumber',
+    label: '主键',
+    componentProps: {
+      placeholder: '请输入主键',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+  {
+    fieldName: 'createdAt',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'daterange',
+      clearable: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+  {
+    fieldName: 'deptDeptName',
+    component: 'Input',
+    label: '部门名称',
+    componentProps: {
+      placeholder: '请输入部门名称',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '主键',
+    field: 'id',
+    align: 'left',
+    width: -1,
+    type: 'checkbox',
+  },
+  {
+    title: '租户编号',
+    field: 'tenantId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '部门id',
+    field: 'deptId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '用户id',
+    field: 'userId',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '排序号',
+    field: 'orderNum',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: 'key键',
+    field: 'testKey',
+    align: 'left',
+    width: -1,
+ },
+ {    
+				title: '值',    field: 'value',    align: 'left',    width: -1, 
+				slots: {
+      				default: ({ row }) => {
+						return renderDict(row.value, 'sys_yes_no_num');
+					}
+				},
+			},
+			  {
+    title: '版本',
+    field: 'version',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建部门',
+    field: 'createdDept',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '创建者',
+    field: 'createdBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.createdBySumma);
+    },
+ },
+ },
+  {
+    title: '更新时间',
+    field: 'updatedAt',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '更新者',
+    field: 'updatedBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.updatedBySumma);
+    },
+ },
+ },
+  {
+    title: '删除人',
+    field: 'deletedBy',
+    align: 'left',
+    width: -1,
+    slots: {
+      default: ({ row }) =>  {
+      return renderPopoverMemberSumma(row.deletedBySumma);
+    },
+ },
+ },
+  {
+    title: '部门名称',
+    field: 'deptDeptName',
+    align: 'left',
+    width: -1,
+ },
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  tenantId: string;
+  deptId: number;
+  userId: number;
+  orderNum: number;
+  testKey: string;
+  value: string;
+  version: number;
+  createdDept: number;
+  createdAt: string;
+  createdBy: number;
+  updatedAt: string;
+  updatedBy: number;
+  deletedBy: number;
+  deletedAt: string;
+  deptDeptId: number;
+  deptTenantId: string;
+  deptParentId: number;
+  deptAncestors: string;
+  deptDeptName: string;
+  deptDeptCategory: string;
+  deptOrderNum: number;
+  deptLeader: number;
+  deptPhone: string;
+  deptEmail: string;
+  deptStatus: string;
+  deptCreatedDept: number;
+  deptCreatedBy: number;
+  deptCreatedAt: string;
+  deptUpdatedBy: number;
+  deptUpdatedAt: string;
+  deptDeletedBy: number;
+  deptDeletedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  {  field: 'id',  label: '主键'},
+  {  field: 'tenantId',  label: '租户编号'},
+  {  field: 'deptId',  label: '部门id'},
+  {  field: 'userId',  label: '用户id'},
+  {  field: 'orderNum',  label: '排序号'},
+  {  field: 'testKey',  label: 'key键'},
+  {
+				field: 'value',
+				label: '值',
+				render(row: any) {
+					return renderDict(row.value, 'sys_yes_no_num');
+				},
+			},
+			  {  field: 'version',  label: '版本'},
+  {  field: 'createdDept',  label: '创建部门'},
+  {  field: 'createdAt',  label: '创建时间'},
+  {  field: 'createdBy',  label: '创建者'},
+  {  field: 'updatedAt',  label: '更新时间'},
+  {  field: 'updatedBy',  label: '更新者'},
+  {  field: 'deletedBy',  label: '删除人'},
+  {  field: 'deletedAt',  label: '删除时间'},
+  {  field: 'deptDeptId',  label: '部门id'},
+  {  field: 'deptTenantId',  label: '租户编号'},
+  {  field: 'deptParentId',  label: '父部门id'},
+  {  field: 'deptAncestors',  label: '祖级列表'},
+  {  field: 'deptDeptName',  label: '部门名称'},
+  {  field: 'deptDeptCategory',  label: '部门类别编码'},
+  {  field: 'deptOrderNum',  label: '显示顺序'},
+  {  field: 'deptLeader',  label: '负责人'},
+  {  field: 'deptPhone',  label: '联系电话'},
+  {  field: 'deptEmail',  label: '邮箱'},
+  {  field: 'deptStatus',  label: '部门状态（0正常 1停用）'},
+  {  field: 'deptCreatedDept',  label: '创建部门'},
+  {  field: 'deptCreatedBy',  label: '创建者'},
+  {  field: 'deptCreatedAt',  label: '创建时间'},
+  {  field: 'deptUpdatedBy',  label: '更新者'},
+  {  field: 'deptUpdatedAt',  label: '更新时间'},
+  {  field: 'deptDeletedBy',  label: '删除人'},
+  {  field: 'deptDeletedAt',  label: '删除时间'},
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键',
+    dependencies: {   show: () => false,    triggerFields: [''],   },
+    componentProps: {
+      placeholder: '',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+  {
+    fieldName: 'deptId',
+    component: 'InputNumber',
+    label: '部门id',
+    componentProps: {
+      placeholder: '请输入部门id',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:z.number({required_error: '请输入部门id', invalid_type_error: '无效数字'}	)
+},
+  {
+    fieldName: 'userId',
+    component: 'InputNumber',
+    label: '用户id',
+    componentProps: {
+      placeholder: '请输入用户id',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+  {
+    fieldName: 'orderNum',
+    component: 'InputNumber',
+    label: '排序号',
+    componentProps: {
+      placeholder: '请输入排序号',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+  {
+    fieldName: 'testKey',
+    component: 'Input',
+    label: 'key键',
+    componentProps: {
+      placeholder: '请输入key键',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+  {    
+			fieldName: 'value',    
+			component: 'Select',    
+			label: '值',    
+			defaultValue: null,    
+			componentProps: {    
+				placeholder: '请选择值',    
+				options: getDictOptions('sys_yes_no_num'),    
+				onUpdateValue: (e: any) => {    
+					console.log(e);    
+				},  
+			},
+			rules:null
+		},
+		  {
+    fieldName: 'version',
+    component: 'InputNumber',
+    label: '版本',
+    componentProps: {
+      placeholder: '请输入版本',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+  rules:null
+},
+];
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/view.vue b/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/view.vue
new file mode 100644
index 0000000..1f0928e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/gen/testDemo/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/gen/testDemo';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/downloadCenter/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/downloadCenter/index.vue
new file mode 100644
index 0000000..dca00f3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/downloadCenter/index.vue
@@ -0,0 +1,258 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Page } from '@vben/common-ui';
+
+import { Alert, Button, message, Modal, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Download, List, Remove } from '#/api/common/downloadCenter';
+import BetterVben from '#/constants/BetterVben';
+import { downloadByData } from '#/utils/file/download';
+
+/** 状态：0排队 2生成中 1已完成 3失败（复用 consts.DownloadStatus*） */
+const STATUS_MAP: Record<number, { color: string; text: string }> = {
+  0: { color: 'processing', text: '排队中' },
+  1: { color: 'success', text: '已完成' },
+  2: { color: 'processing', text: '生成中' },
+  3: { color: 'error', text: '失败' },
+};
+
+/** 导出业务选项（与后端已接入异步导出的业务一一对应） */
+const BIZ_OPTIONS = [
+  { label: '卡信息', value: 'tSimCardInfo' },
+  { label: '销户卡信息', value: 'tSimCardCancellation' },
+  { label: '库存卡', value: 'tSimCardStock' },
+  { label: '达量断网', value: 'tSimCardTrafficCutoff' },
+  { label: '订单', value: 'tOrder' },
+  { label: '流量池套餐配置', value: 'tFlowPackageConfig' },
+  { label: '通道管理', value: 'tSimChannels' },
+  { label: '通道模版', value: 'tSimChannelTemplate' },
+  { label: 'SIM流量套餐', value: 'tSimFlowPackageInfo' },
+  { label: '套餐分类', value: 'tSimPackageCategory' },
+  { label: '上游套餐', value: 'tSimUpstreamPackage' },
+  { label: 'API集成', value: 'tApi' },
+  { label: '开放接口权限组', value: 'tApiGroup' },
+  { label: '开放接口资源', value: 'tApiResource' },
+  { label: '余额明细', value: 'tBalanceDetail' },
+  { label: '可提现变动明细', value: 'tFinWithdrawableChange' },
+  { label: '财务申请', value: 'tFinanceApply' },
+  { label: '财务审核记录', value: 'tFinanceAuditRecord' },
+  { label: '消息日志', value: 'tMessageLog' },
+  { label: '通知日志', value: 'tNotifyLog' },
+  { label: '工单记录', value: 'tWoRecord' },
+  { label: '岗位管理', value: 'post' },
+  { label: '用户管理', value: 'agentUser' },
+  { label: '企业客户', value: 'agentDept' },
+];
+
+const FormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'keyword',
+    component: 'Input',
+    label: '关键字',
+    componentProps: { placeholder: '文件名 / 任务编号 / 业务名称' },
+  },
+  {
+    fieldName: 'bizKey',
+    component: 'Select',
+    label: '导出业务',
+    componentProps: { allowClear: true, options: BIZ_OPTIONS },
+  },
+  {
+    fieldName: 'status',
+    component: 'Select',
+    label: '状态',
+    componentProps: {
+      allowClear: true,
+      mode: 'multiple',
+      options: Object.entries(STATUS_MAP).map(([value, item]) => ({
+        label: item.text,
+        value: Number(value),
+      })),
+    },
+  },
+  {
+    fieldName: 'createdAt',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: { showTime: true },
+  },
+];
+
+function formatSize(value?: number) {
+  if (!value || value <= 0) {
+    return '-';
+  }
+  if (value < 1024) {
+    return `${value} B`;
+  }
+  if (value < 1024 * 1024) {
+    return `${(value / 1024).toFixed(1)} KB`;
+  }
+  return `${(value / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function isExpired(row: any) {
+  return row.expireTime
+    ? new Date(row.expireTime).getTime() < Date.now()
+    : false;
+}
+
+async function handleDownload(row: any) {
+  if (row.deletedTime) {
+    message.warning('文件已删除或已过期清理，请重新导出');
+    return;
+  }
+  if (row.status !== 1) {
+    message.warning('文件尚未生成完成');
+    return;
+  }
+  if (isExpired(row)) {
+    message.warning('文件已过期，请重新导出');
+    return;
+  }
+  const data = await Download(row.id);
+  downloadByData(data as Blob, row.fileName || `${row.taskNo}.xlsx`);
+  try {
+    await gridApi.query();
+  } catch {
+    message.warning('文件已开始下载，但有效期刷新失败，请手动刷新列表');
+  }
+}
+
+function handleRemove(row: any) {
+  Modal.confirm({
+    title: '删除导出任务',
+    content: `将删除文件 ${row.fileName || row.taskNo}，保留导出记录，是否继续？`,
+    centered: true,
+    onOk: async () => {
+      await Remove(row.id);
+      message.success('已删除');
+      await gridApi.query();
+    },
+  });
+}
+
+const gridOptions: VxeGridProps = {
+  ...(BetterVben.grid.gridOptions.default as any),
+  columns: [
+    { title: '文件名', field: 'fileName', minWidth: 260 },
+    { title: '导出业务', field: 'bizName', width: 150 },
+    {
+      title: '状态',
+      field: 'status',
+      width: 190,
+      slots: { default: 'status' },
+    },
+    {
+      title: '行数',
+      field: 'totalCount',
+      width: 110,
+      formatter: ({ cellValue }) =>
+        cellValue ? Number(cellValue).toLocaleString() : '-',
+    },
+    {
+      title: '文件大小',
+      field: 'fileSize',
+      width: 110,
+      formatter: ({ cellValue }) => formatSize(cellValue),
+    },
+    { title: '创建时间', field: 'createdAt', width: 170 },
+    { title: '完成时间', field: 'finishTime', width: 170 },
+    {
+      title: '有效期至',
+      field: 'expireTime',
+      width: 180,
+      slots: { default: 'expireTime' },
+    },
+    {
+      title: '操作',
+      field: 'action',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'action' },
+    },
+  ],
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }: any, formValues: any) => {
+        const status = Array.isArray(formValues?.status)
+          ? formValues.status.join(',')
+          : formValues?.status;
+        return await List({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+          status,
+        });
+      },
+    },
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: FormSchema,
+  },
+  gridOptions,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Alert
+      class="mb-4"
+      message="新导出文件生成后最多保留3天；首次下载开始后保留1小时，且不超过原有效期。"
+      show-icon
+      type="info"
+    />
+    <Grid table-title="下载中心">
+      <template #status="{ row }">
+        <Tag :color="STATUS_MAP[row.status]?.color || 'default'">
+          {{ STATUS_MAP[row.status]?.text || '未知' }}
+        </Tag>
+        <Tag v-if="row.deletedTime" color="default">
+          {{ row.deleteReason === 'expired' ? '已过期清理' : '已删除' }}
+        </Tag>
+      </template>
+      <template #expireTime="{ row }">
+        <span v-if="!row.expireTime">-</span>
+        <span v-else-if="isExpired(row)" class="text-gray-400">
+          {{ row.expireTime }}（已过期）
+        </span>
+        <span v-else>{{ row.expireTime }}</span>
+      </template>
+      <template #action="{ row }">
+        <div
+          v-if="!row.deletedTime"
+          class="flex items-center justify-center gap-2"
+        >
+          <Button
+            v-if="row.status === 1"
+            v-access:code="'cpm:common:downloadCenter:download'"
+            class="border-none p-0"
+            :block="false"
+            :disabled="isExpired(row)"
+            type="link"
+            @click="handleDownload(row)"
+          >
+            下载
+          </Button>
+          <Button
+            v-access:code="'cpm:common:downloadCenter:remove'"
+            class="border-none p-0"
+            :block="false"
+            :disabled="row.status === 2"
+            type="link"
+            @click="handleRemove(row)"
+          >
+            删除
+          </Button>
+        </div>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/edit.vue
new file mode 100644
index 0000000..80278f5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/edit.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { TApiModel } from '#/api/iotlcm/tApi/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { List as ApiGroupList } from '#/api/agent/tApiGroup';
+import { Edit, View } from '#/api/iotlcm/tApi';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data: TApiModel;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+function getListItems(res: any) {
+  if (Array.isArray(res)) {
+    return res;
+  }
+  if (Array.isArray(res?.items)) {
+    return res.items;
+  }
+  if (Array.isArray(res?.data?.items)) {
+    return res.data.items;
+  }
+  if (Array.isArray(res?.data)) {
+    return res.data;
+  }
+  return [];
+}
+
+function getGroupOptionLabel(item: any) {
+  if (item.groupCode) {
+    return `${item.groupName || '-'}（${item.groupCode}）`;
+  }
+  return item.groupName || String(item.id || '-');
+}
+
+async function setupApiGroupOptions() {
+  const res = await ApiGroupList({ page: 1, pageSize: 1000 });
+  const options = getListItems(res)
+    .map((item: any) => ({
+      label: getGroupOptionLabel(item),
+      value: Number(item.id),
+    }))
+    .filter((item: any) => Number.isFinite(item.value));
+
+  formApi.updateSchema([
+    {
+      componentProps: {
+        allowClear: true,
+        optionFilterProp: 'label',
+        options,
+        placeholder: options.length > 0 ? '请选择API分组' : '暂无可选API分组',
+        showSearch: true,
+      },
+      fieldName: 'groupId',
+    },
+  ]);
+}
+
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  await setupApiGroupOptions();
+  if (data.isUpdate) {
+    try {
+      const res = await View({ appKey: data.data.appKey });
+      await formApi.setValues(res);
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(Edit(value as TApiModel), modalApi, {
+        autoClose: true,
+        successMessage: '操作成功',
+        emit: () => {
+          emit('confirm');
+        },
+      });
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/index.vue
new file mode 100644
index 0000000..180defe
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/index.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { TApiModel } from '#/api/iotlcm/tApi/type';
+
+import { h, ref } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Delete, Export, List } from '#/api/iotlcm/tApi';
+import BetterVben from '#/constants/BetterVben';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<TApiModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TApiModel) {
+  viewModalApi.setData({ row }).open();
+}
+function handleEdit(row?: TApiModel) {
+  editModalApi.setData({ data: row, isUpdate: !!row }).open();
+}
+async function handleDelete(row: TApiModel) {
+  await Delete({ id: [row.id] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: number[] = rows.map((row) => row.id);
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    centered: true,
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ id: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, 'API集成', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="API集成">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleEdit(undefined)"
+          v-access:code="'cpm:agent:tApi:edit'"
+        >
+          新增
+        </Button>
+        <Button
+          v-if="selectRows.length > 0"
+          class="mr-2 flex items-center"
+          type="primary"
+          danger
+          :icon="h(MdiDelete)"
+          @click="handleMultiDelete"
+          v-access:code="'cpm:agent:tApi:delete'"
+        >
+          删除
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+          v-access:code="'cpm:agent:tApi:export'"
+        >
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:agent:tApi:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:agent:tApi:edit'"
+          >
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:agent:tApi:delete']" type="code">
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/model.tsx
new file mode 100644
index 0000000..b4647b7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/model.tsx
@@ -0,0 +1,166 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { z } from '@vben/common-ui';
+
+import { renderPopoverMemberSumma } from '#/utils';
+import FormOptions from '#/constants/FormOption';
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'appKey',
+    component: 'Input',
+    label: 'APPKey',
+    componentProps: {
+      placeholder: '请输入APPKey',
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  {
+    title: 'APPKey',
+    field: 'appKey',
+    minWidth: 120,
+  },
+  {
+    title: 'APPSecret',
+    field: 'appSecret',
+    minWidth: 120,
+  },
+  {
+    title: '限流周期',
+    field: 'rateLimitPeriod',
+    minWidth: 120,
+  },
+  {
+    title: '限流次数',
+    field: 'rateLimitCount',
+    minWidth: 120,
+  },
+  {
+    title: '客户编号',
+    field: 'deptKey',
+    minWidth: 120,
+  },
+  {
+    title: '客户名称',
+    field: 'deptName',
+    minWidth: 120,
+  },
+  { title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: 'ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'appKey',
+    component: 'Input',
+    label: 'APPKey',
+    componentProps: {
+      placeholder: '请输入APPKey',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'appSecret',
+    component: 'Input',
+    label: 'APPSecret',
+    componentProps: {
+      placeholder: '请输入APPSecret',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'groupId',
+    component: 'Select',
+    label: 'API分组',
+    componentProps: {
+      allowClear: true,
+      optionFilterProp: 'label',
+      options: [],
+      placeholder: '请选择API分组',
+      showSearch: true,
+    },
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'deptId',
+    component: 'ApiTreeSelect',
+    label: '所属部门',
+    componentProps: {
+      ...FormOptions.Api.agentDeptListApi({ autoSelect: false }),
+      allowClear: false,
+      showSearch: true,
+      treeDefaultExpandAll: true,
+      treeLine: { showLeafIcon: false },
+      treeNodeFilterProp: 'label',
+    },
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'status',
+    component: 'Switch',
+    label: '状态',
+    defaultValue: 0,
+    componentProps: FormOptions.Component.SwitchEnabled(),
+  },
+  {
+    fieldName: 'rateLimitPeriod',
+    component: 'InputNumber',
+    label: '限流周期(秒,0:不限流)',
+    componentProps: {
+      placeholder: '请输入限流周期(秒,0:不限流)',
+    },
+    rules: z.number({
+      required_error: '请输入限流周期(秒,0:不限流)',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'rateLimitCount',
+    component: 'InputNumber',
+    label: '限流次数',
+    componentProps: {
+      placeholder: '请输入限流次数',
+    },
+    rules: z.number({
+      required_error: '请输入限流次数',
+      invalid_type_error: '无效数字',
+    }),
+  },
+ 
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'id', label: 'ID' },
+  { field: 'appKey', label: 'APPKey' },
+  { field: 'appSecret', label: 'APPSecret' },
+  { field: 'rateLimitPeriod', label: '限流周期(秒,0:不限流)' },
+  { field: 'rateLimitCount', label: '限流次数' },
+  { field: 'deptId', label: '所属机构' },
+  { field: 'tenantId', label: '租户ID' },
+  { field: 'createdDept', label: '创建部门' },
+  { field: 'createdBy', label: '创建者' },
+  { field: 'createdAt', label: '创建时间' },
+  { field: 'updatedBy', label: '更新者' },
+  { field: 'updatedAt', label: '更新时间' },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/view.vue
new file mode 100644
index 0000000..f3610d0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tApi/view.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { TApiModel } from '#/api/iotlcm/tApi/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/tApi';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { ViewDescSchema } from './model';
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: TApiModel };
+  const record = await View({ appKey: row.appKey });
+  setDescProps({ data: record }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: ViewDescSchema,
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/edit.vue
new file mode 100644
index 0000000..5b14f4c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/edit.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { TSimChannelTemplateModel } from '#/api/iotlcm/tChannel/tSimChannelTemplate/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  Edit,
+  View,
+} from '#/api/iotlcm/tChannel/tSimChannelTemplate';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data: TSimChannelTemplateModel;
+  isUpdate: boolean;
+}
+
+function formatJson(value: unknown) {
+  if (value === null || value === undefined || value === '') {
+    return '{}';
+  }
+
+  try {
+    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  await formApi.resetForm();
+  if (data.isUpdate && data.data) {
+    const detail = await View({ id: data.data.id });
+    await formApi.setValues({
+      ...data.data,
+      ...detail,
+      tempConfig: formatJson(detail.tempConfig),
+      tempStatus:
+        detail.tempStatus === null || detail.tempStatus === undefined
+          ? undefined
+          : Number(detail.tempStatus),
+    });
+  } else {
+    await formApi.setValues({
+      tempConfig: '{}',
+      tempStatus: 0,
+    });
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      const submitValue = {
+        ...(value as TSimChannelTemplateModel),
+        tempConfig: formatJson((value as TSimChannelTemplateModel).tempConfig),
+      };
+      await BetterVben.function.formSubmit(
+        Edit(submitValue),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '保存成功，通道配置正在刷新',
+          emit: () => {
+            emit('confirm');
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/index.vue
new file mode 100644
index 0000000..2af11bb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/index.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import type { TSimChannelTemplateModel } from '#/api/iotlcm/tChannel/tSimChannelTemplate/type';
+
+import { h, ref } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  Delete,
+  Export,
+  List,
+} from '#/api/iotlcm/tChannel/tSimChannelTemplate';
+import BetterVben from '#/constants/BetterVben';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<TSimChannelTemplateModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TSimChannelTemplateModel) {
+  viewModalApi.setData({ row }).open();
+}
+function handleEdit(row?: TSimChannelTemplateModel) {
+  editModalApi.setData({ data: row, isUpdate: !!row }).open();
+}
+async function handleDelete(row: TSimChannelTemplateModel) {
+  await Delete({ id: [row.id] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: number[] = rows.map((row) => row.id);
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    centered: true,
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ id: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '通道模板', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    showCollapseButton: false,
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="通道模板">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleEdit(undefined)"
+          v-access:code="'cpm:iot:tSimChannelTemplate:edit'"
+        >
+          新增
+        </Button>
+        <Button
+          v-if="selectRows.length > 0"
+          class="mr-2 flex items-center"
+          type="primary"
+          danger
+          :icon="h(MdiDelete)"
+          @click="handleMultiDelete"
+          v-access:code="'cpm:iot:tSimChannelTemplate:delete'"
+        >
+          删除
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+          v-access:code="'cpm:iot:tSimChannelTemplate:export'"
+        >
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:iot:tSimChannelTemplate:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:iot:tSimChannelTemplate:edit'"
+          >
+            修改
+          </Button>
+          <AccessControl
+            :codes="['cpm:iot:tSimChannelTemplate:delete']"
+            type="code"
+          >
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/model.tsx
new file mode 100644
index 0000000..4f72665
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/model.tsx
@@ -0,0 +1,197 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { h } from 'vue';
+
+import DictEnum from '#/constants/DictEnum';
+import { renderDict } from '#/utils';
+
+function renderJson(value: unknown) {
+  if (value === '' || value === null || value === undefined) {
+    return '--';
+  }
+
+  try {
+    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+    return h(
+      'pre',
+      {
+        class: 'm-0 whitespace-pre-wrap break-all font-sans text-sm leading-6',
+      },
+      JSON.stringify(parsed, null, 2),
+    );
+  } catch {
+    return String(value);
+  }
+}
+
+export const TemplateStatusOptions = [
+  { label: '\u542F\u7528', value: 0 },
+  { label: '\u505C\u7528', value: 1 },
+];
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'tempKey',
+    component: 'Input',
+    label: '模板标识',
+    componentProps: {
+      placeholder: '请输入模板标识',
+    },
+  },
+  {
+    fieldName: 'tempName',
+    component: 'Input',
+    label: '模板名称',
+    componentProps: {
+      placeholder: '请输入模板名称',
+    },
+  },
+  {
+    fieldName: 'tempModel',
+    component: 'Select',
+    label: '模板模型',
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择模板模型',
+      options: [
+        { label: 'shared_token', value: 'shared_token' },
+        { label: 'direct', value: 'direct' },
+      ],
+    },
+  },
+  {
+    fieldName: 'tempStatus',
+    component: 'Select',
+    label: '模板状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择模板状态',
+      options: TemplateStatusOptions,
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  {
+    title: '模板标识',
+    field: 'tempKey',
+    minWidth: 120,
+  },
+  {
+    title: '模板名称',
+    field: 'tempName',
+    minWidth: 120,
+  },
+  {
+    title: '模板模型',
+    field: 'tempModel',
+    minWidth: 120,
+  },
+  {
+    title: '模板状态',
+    field: 'tempStatus',
+    params: { dictType: DictEnum.GLOBAL_ENABLED },
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.tempStatus, DictEnum.GLOBAL_ENABLED);
+      },
+    },
+  },
+  { title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: 'ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'tempKey',
+    component: 'Input',
+    label: '模板标识',
+    componentProps: {
+      placeholder: '请输入模板标识',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'tempName',
+    component: 'Input',
+    label: '模板名称',
+    componentProps: {
+      placeholder: '请输入模板名称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'tempModel',
+    component: 'Input',
+    label: '模板模型',
+    componentProps: {
+      placeholder: '请输入模板模型',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'tempStatus',
+    component: 'Select',
+    label: '模板状态',
+    defaultValue: 0,
+    componentProps: {
+      placeholder: '请选择模板状态',
+      options: TemplateStatusOptions,
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'remark',
+    component: 'Input',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  },
+  {
+    fieldName: 'tempConfig',
+    component: 'Textarea',
+    label: '模板配置',
+    defaultValue: '{}',
+    formItemClass: 'col-span-12',
+    componentProps: {
+      autosize: { minRows: 1, maxRows: 20 },
+      placeholder: '请输入模板配置 JSON',
+    },
+    rules: 'required',
+  },
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'tempKey', label: '模板标识' },
+  { field: 'tempName', label: '模板名称' },
+  { field: 'tempModel', label: '模板模型' },
+  {
+    field: 'tempStatus',
+    label: '模板状态',
+    render(tempStatus) {
+      return renderDict(tempStatus, DictEnum.GLOBAL_ENABLED);
+    },
+  },
+  { field: 'remark', label: '备注' },
+  { field: 'tempConfig', label: '模板配置', render: renderJson },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/view.vue
new file mode 100644
index 0000000..58c69e0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate/view.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { TSimChannelTemplateModel } from '#/api/iotlcm/tChannel/tSimChannelTemplate/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/tChannel/tSimChannelTemplate';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { ViewDescSchema } from './model';
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: TSimChannelTemplateModel };
+  const detail = await View({ id: row.id });
+  await setDescProps({ data: { ...row, ...detail } }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: ViewDescSchema,
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/edit.vue
new file mode 100644
index 0000000..d8ea891
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/edit.vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import type { TSimChannelsModel } from '#/api/iotlcm/tChannel/tSimChannels/type';
+import type { TSimChannelTemplateModel } from '#/api/iotlcm/tChannel/tSimChannelTemplate/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { Modal as AntModal, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/tChannel/tSimChannels';
+import { List as TemplateList } from '#/api/iotlcm/tChannel/tSimChannelTemplate';
+import { getSysDictDataListApi } from '#/api/system/dict';
+import BetterVben from '#/constants/BetterVben';
+import DictEnum from '#/constants/DictEnum';
+import { useDictStore } from '#/store/dict';
+import { getDictOptions } from '#/utils/dict';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data: TSimChannelsModel;
+  isUpdate: boolean;
+}
+
+const emit = defineEmits<{ confirm: [] }>();
+
+function formatChannelConfig(value: unknown) {
+  if (value === null || value === undefined || value === '') {
+    return '{}';
+  }
+
+  try {
+    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const { setDictInfo } = useDictStore();
+const originalChanKey = ref('');
+const originalShareEnabled = ref(0);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+async function loadFormDictionaries() {
+  const [operatorResponse, isNormalResponse] = await Promise.all([
+    getSysDictDataListApi({
+      dictId: 0,
+      dictType: DictEnum.T_OPERATORS,
+      page: 1,
+      pageSize: 1000,
+    }),
+    getSysDictDataListApi({
+      dictId: 0,
+      dictType: DictEnum.GLOBAL_YES_OR_NO,
+      page: 1,
+      pageSize: 1000,
+    }),
+  ]);
+
+  setDictInfo(DictEnum.T_OPERATORS, operatorResponse.items, true);
+  setDictInfo(DictEnum.GLOBAL_YES_OR_NO, isNormalResponse.items, true);
+
+  await formApi.updateSchema([
+    {
+      fieldName: 'operator',
+      componentProps: {
+        options: getDictOptions(DictEnum.T_OPERATORS, true),
+      },
+    },
+    {
+      fieldName: 'isNormal',
+      componentProps: {
+        options: getDictOptions(DictEnum.GLOBAL_YES_OR_NO, true),
+      },
+    },
+  ]);
+}
+
+function normalizeNumberSelect(value: unknown) {
+  if (value === '' || value === null || value === undefined) {
+    return undefined;
+  }
+
+  const numberValue = Number(value);
+  return Number.isFinite(numberValue) ? numberValue : undefined;
+}
+
+function normalizeOperator(value: unknown) {
+  const operator = normalizeNumberSelect(value);
+  if (operator === undefined) {
+    return undefined;
+  }
+
+  // 以字典 t_operators 的实际取值为准（1移动 2联通 3电信），
+  // 避免硬编码白名单在字典新增运营商后导致编辑页无法回显
+  const options = getDictOptions(DictEnum.T_OPERATORS, true);
+  const isKnownOperator = options.some(
+    (option) => Number(option.value) === operator,
+  );
+
+  return isKnownOperator ? operator : undefined;
+}
+
+function getTemplateItems(response: unknown): TSimChannelTemplateModel[] {
+  if (Array.isArray(response)) {
+    return response as TSimChannelTemplateModel[];
+  }
+
+  if (!response || typeof response !== 'object') {
+    return [];
+  }
+
+  const data = response as {
+    data?: unknown[] | { items?: unknown };
+    items?: unknown;
+  };
+  if (Array.isArray(data.items)) {
+    return data.items as TSimChannelTemplateModel[];
+  }
+  if (Array.isArray(data.data)) {
+    return data.data as TSimChannelTemplateModel[];
+  }
+  if (
+    data.data &&
+    typeof data.data === 'object' &&
+    Array.isArray(data.data.items)
+  ) {
+    return data.data.items as TSimChannelTemplateModel[];
+  }
+
+  return [];
+}
+
+async function resolveTemplateModel(
+  tempKey: unknown,
+  fallback?: unknown,
+): Promise<string> {
+  const fallbackModel = String(fallback ?? '').trim();
+  if (fallbackModel) {
+    return fallbackModel;
+  }
+
+  const key = String(tempKey ?? '').trim();
+  if (!key) {
+    return '';
+  }
+
+  try {
+    const response = await TemplateList({
+      page: 1,
+      pageSize: 1000,
+      tempKey: key,
+    });
+    const template = getTemplateItems(response).find(
+      (item) => String(item.tempKey ?? '').trim() === key,
+    );
+    return String(template?.tempModel ?? '').trim();
+  } catch (error) {
+    console.error('加载通道模板模型失败', error);
+    return '';
+  }
+}
+
+let templateLookupSequence = 0;
+async function handleTemplateKeyChange(tempKey: unknown) {
+  const sequence = ++templateLookupSequence;
+  const key = String(tempKey ?? '').trim();
+  if (!key) {
+    await formApi.setFieldValue('tempModel', '');
+    return;
+  }
+
+  const templateModel = await resolveTemplateModel(key);
+  if (sequence !== templateLookupSequence) {
+    return;
+  }
+
+  const values = await formApi.getValues();
+  if (String(values.tempKey ?? '').trim() !== key) {
+    return;
+  }
+  await formApi.setFieldValue('tempModel', templateModel);
+}
+
+function bindTemplateModelLookup() {
+  formApi.updateSchema([
+    {
+      fieldName: 'tempKey',
+      componentProps: {
+        onChange: (value: unknown) => {
+          void handleTemplateKeyChange(value);
+        },
+      },
+    },
+  ]);
+}
+
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  originalChanKey.value = '';
+  originalShareEnabled.value = 0;
+  await formApi.resetForm();
+  await loadFormDictionaries();
+  bindTemplateModelLookup();
+  if (data.isUpdate) {
+    try {
+      const res = await View({ id: data.data.id });
+      const tempModel = await resolveTemplateModel(res.tempKey, res.tempModel);
+      originalChanKey.value = String(res.chanKey ?? '').trim();
+      originalShareEnabled.value = Number(res.shareEnabled ?? 0);
+      await formApi.setValues({
+        ...res,
+        tempModel,
+        chanConfig: formatChannelConfig(res.chanConfig),
+        isNormal: normalizeNumberSelect(res.isNormal),
+        operator: normalizeOperator(res.operator),
+      });
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+  } else {
+    await formApi.setValues({
+      chanConfig: '{}',
+      chanStatus: 0,
+      refreshToken: '0',
+      tempModel: '',
+    });
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      const { tempModel: _tempModel, ...channelValues } = value;
+      const formValue = channelValues as TSimChannelsModel;
+      const nextChanKey = String(formValue.chanKey ?? '').trim();
+      const isRename =
+        isUpdate.value &&
+        originalChanKey.value !== '' &&
+        originalShareEnabled.value !== 1 &&
+        nextChanKey !== originalChanKey.value;
+      if (isRename) {
+        const confirmed = await new Promise<boolean>((resolve) => {
+          AntModal.confirm({
+            title: '确认修改通道编号',
+            content: `通道编号将从 ${originalChanKey.value} 修改为 ${nextChanKey}，系统会迁移关联数据并刷新通道实例，是否继续？`,
+            onOk: () => resolve(true),
+            onCancel: () => resolve(false),
+          });
+        });
+        if (!confirmed) {
+          return;
+        }
+        formValue.chanKey = nextChanKey;
+      }
+      const successMessage = isRename
+        ? '通道编号已修改，关联数据和通道实例正在迁移'
+        : '保存成功，通道配置正在刷新';
+      await BetterVben.function.formSubmit(Edit(formValue), modalApi, {
+        autoClose: true,
+        successMessage,
+        emit: () => {
+          emit('confirm');
+        },
+      });
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  commonConfig: {
+    ...BetterVben.form.default.commonConfig,
+    formItemClass: 'col-span-12 md:col-span-4',
+  },
+  schema: EditFormSchema,
+  wrapperClass: 'grid-cols-12 gap-x-4 w-[100%]',
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  class: 'w-[960px] max-w-[95vw]',
+  contentClass: 'max-h-[75vh] min-h-0 overflow-y-auto',
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/index.vue
new file mode 100644
index 0000000..00798a5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/index.vue
@@ -0,0 +1,333 @@
+<script lang="ts" setup>
+import type { TSimChannelsModel } from '#/api/iotlcm/tChannel/tSimChannels/type';
+
+import { h, nextTick, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus, SyncOutlined } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  Delete,
+  Export,
+  List,
+  RefreshCardCount,
+} from '#/api/iotlcm/tChannel/tSimChannels';
+import BetterVben from '#/constants/BetterVben';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import testModal from './test.vue';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+const route = useRoute();
+/** 表格选中行 */
+const selectRows = ref<TSimChannelsModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TSimChannelsModel) {
+  viewModalApi.setData({ row }).open();
+}
+function handleEdit(row?: TSimChannelsModel) {
+  editModalApi.setData({ data: row, isUpdate: !!row }).open();
+}
+function handleTest(row: TSimChannelsModel) {
+  testModalApi.setData({ row }).open();
+}
+async function handleDelete(row: TSimChannelsModel) {
+  await Delete({ id: [row.id] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+async function handleRefreshCardCount() {
+  await RefreshCardCount();
+  await handleRefresh();
+  message.success('卡数量刷新成功');
+}
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: number[] = rows.map((row) => row.id);
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    centered: true,
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ id: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '通道管理', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    showCollapseButton: false,
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    toolbarConfig: {
+      custom: true,
+      resizable: true,
+      search: true,
+      zoom: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          const queryValues = { ...formValues };
+          if (
+            queryValues.chanStatus === '' ||
+            queryValues.chanStatus === null ||
+            queryValues.chanStatus === undefined
+          ) {
+            delete queryValues.chanStatus;
+          } else {
+            queryValues.chanStatus = Number(queryValues.chanStatus);
+          }
+          if (
+            queryValues.operator === '' ||
+            queryValues.operator === null ||
+            queryValues.operator === undefined
+          ) {
+            delete queryValues.operator;
+          } else {
+            queryValues.operator = Number(queryValues.operator);
+          }
+          for (const field of [
+            'shareEnabled',
+            'isNormal',
+            'dockingStatus',
+            'syncEnabled',
+          ]) {
+            if (
+              queryValues[field] === '' ||
+              queryValues[field] === null ||
+              queryValues[field] === undefined
+            ) {
+              delete queryValues[field];
+            } else {
+              queryValues[field] = Number(queryValues[field]);
+            }
+          }
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...queryValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+
+const [TestModal, testModalApi] = useVbenModal({
+  connectedComponent: testModal,
+});
+/** ====================  周期  ==================== */
+function getRouteChanKey() {
+  const chanKey = String(
+    Array.isArray(route.query.chanKey)
+      ? route.query.chanKey[0]
+      : (route.query.chanKey ?? ''),
+  ).trim();
+  return chanKey;
+}
+
+async function applyRouteChanKey() {
+  const chanKey = getRouteChanKey();
+  if (!chanKey) {
+    return;
+  }
+  // 首次通过卡详情跳入时，Grid/Form 可能还没完成挂载，延后重试保证首屏就带条件查询。
+  for (let index = 0; index < 3; index += 1) {
+    await nextTick();
+    try {
+      await gridApi.formApi.setFieldValue('chanKey', chanKey);
+      await gridApi.query();
+      return;
+    } catch (error) {
+      if (index >= 2) {
+        throw error;
+      }
+      await new Promise((resolve) => window.setTimeout(resolve, 80));
+    }
+  }
+}
+
+onMounted(() => {
+  void applyRouteChanKey();
+});
+
+watch(
+  () => route.query.chanKey,
+  () => {
+    void applyRouteChanKey();
+  },
+);
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="通道管理">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="text"
+          shape="circle"
+          :icon="h(SyncOutlined)"
+          title="刷新卡数量"
+          @click="handleRefreshCardCount"
+        >
+          <span class="sr-only">刷新卡数量</span>
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleEdit(undefined)"
+          v-access:code="'cpm:iot:tSimChannels:edit'"
+        >
+          新增
+        </Button>
+        <Button
+          v-if="selectRows.length > 0"
+          class="mr-2 flex items-center"
+          type="primary"
+          danger
+          :icon="h(MdiDelete)"
+          @click="handleMultiDelete"
+          v-access:code="'cpm:iot:tSimChannels:delete'"
+        >
+          删除
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+          v-access:code="'cpm:iot:tSimChannels:export'"
+        >
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:iot:tSimChannels:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:iot:tSimChannels:edit'"
+          >
+            修改
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleTest(row)"
+            v-access:code="'cpm:iot:tSimChannels:test'"
+          >
+            测试
+          </Button>
+          <AccessControl :codes="['cpm:iot:tSimChannels:delete']" type="code">
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+      <template #chanName="{ row }">
+        <span
+          class="channel-name-link"
+          :title="row.chanName"
+          @click="handlePreview(row)"
+        >
+          {{ row.chanName }}
+        </span>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+    <TestModal />
+  </Page>
+</template>
+
+<style scoped>
+.channel-name-link {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  color: #1d4ed8;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.channel-name-link:hover {
+  color: #1e40af;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/model.tsx
new file mode 100644
index 0000000..b0df47b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/model.tsx
@@ -0,0 +1,725 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { h } from 'vue';
+
+import { CircleHelp } from '@vben/icons';
+
+import { Tooltip } from 'ant-design-vue';
+
+import { List as TemplateList } from '#/api/iotlcm/tChannel/tSimChannelTemplate';
+import DictEnum from '#/constants/DictEnum';
+import { renderDict } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+function renderHelpLabel(label: string, tip: string) {
+  return h('span', { class: 'inline-flex items-center gap-1' }, [
+    label,
+    h(
+      Tooltip,
+      { title: tip },
+      {
+        default: () =>
+          h(CircleHelp, {
+            'aria-label': tip,
+            class: 'size-3.5 cursor-help text-gray-400',
+            tabindex: 0,
+          }),
+      },
+    ),
+  ]);
+}
+
+function renderFormCredentialLabel(label: string, tip: string) {
+  return () => renderHelpLabel(label, tip);
+}
+
+const channelBehaviorTips = {
+  isNormal:
+    '设为“是”时，系统会创建或更新通道实例，用于调用运营商接口；设为“否”或未设置时跳过创建，已有实例继续保留。',
+  syncEnabled:
+    '控制该通道是否参与卡状态、流量等数据的定时同步。设为“否”后不参与轮询，不影响通道实例的创建。',
+};
+
+const staticCredentialTips = {
+  appKey: '移动：appid；电信：appkey',
+  appSecret: '移动：password；电信：secretKey',
+};
+
+function renderValidDict(value: unknown, dictName: DictEnum) {
+  if (value === '' || value === null || value === undefined) {
+    return '--';
+  }
+
+  const options = getDictOptions(dictName, true);
+  const hasMatchedOption = options.some(
+    (option) => String(option.value) === String(value),
+  );
+
+  return hasMatchedOption ? renderDict(value as string, dictName) : '--';
+}
+
+function renderOptionalDict(value: unknown, dictName: DictEnum) {
+  if (value === '' || value === null || value === undefined) {
+    return '';
+  }
+
+  const options = getDictOptions(dictName, true);
+  const hasMatchedOption = options.some(
+    (option) => String(option.value) === String(value),
+  );
+
+  return hasMatchedOption ? renderDict(value as string, dictName) : '';
+}
+
+const channelOperatorOptions = getDictOptions(DictEnum.T_OPERATORS, true);
+
+function renderChannelOperator(value: unknown) {
+  return renderValidDict(value, DictEnum.T_OPERATORS);
+}
+
+function renderChannelConfig(value: unknown) {
+  if (value === '' || value === null || value === undefined) {
+    return '--';
+  }
+
+  try {
+    const parsedConfig = typeof value === 'string' ? JSON.parse(value) : value;
+    return h(
+      'pre',
+      {
+        class: 'm-0 whitespace-pre-wrap break-all font-sans text-sm leading-6',
+      },
+      JSON.stringify(parsedConfig, null, 2),
+    );
+  } catch {
+    return String(value);
+  }
+}
+
+function renderRemark(value: unknown) {
+  if (value === '' || value === null || value === undefined) {
+    return '--';
+  }
+
+  return h(
+    'pre',
+    {
+      class: 'm-0 whitespace-pre-wrap break-all font-sans text-sm leading-6',
+    },
+    String(value),
+  );
+}
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'chanKey',
+    component: 'Input',
+    label: '通道编号',
+    componentProps: {
+      placeholder: '请输入通道编号',
+    },
+  },
+  {
+    fieldName: 'chanName',
+    component: 'Input',
+    label: '通道名称',
+    componentProps: {
+      placeholder: '请输入通道名称',
+    },
+  },
+  {
+    fieldName: 'chanAlias',
+    component: 'Input',
+    label: '通道别名',
+    componentProps: {
+      placeholder: '请输入通道别名',
+    },
+  },
+  {
+    fieldName: 'operator',
+    component: 'Select',
+    label: '运营商',
+    defaultValue: null,
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择运营商',
+      options: channelOperatorOptions,
+    },
+  },
+  {
+    fieldName: 'chanStatus',
+    component: 'Select',
+    label: '通道状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择通道状态',
+      options: getDictOptions(DictEnum.T_CHANNELS_STATUS, true),
+    },
+  },
+  {
+    fieldName: 'shareEnabled',
+    component: 'Select',
+    label: '共享Token',
+    defaultValue: null,
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择共享Token',
+      options: [
+        { label: '是', value: 1 },
+        { label: '否', value: 0 },
+      ],
+    },
+  },
+  {
+    fieldName: 'isNormal',
+    component: 'Select',
+    label: '是否正常',
+    defaultValue: null,
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择是否正常',
+      options: getDictOptions(DictEnum.GLOBAL_YES_OR_NO, true),
+    },
+  },
+  {
+    fieldName: 'syncEnabled',
+    component: 'Select',
+    label: '是否轮询',
+    defaultValue: null,
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择是否轮询',
+      options: getDictOptions(DictEnum.T_CHANNEL_SYNC_ENABLED, true),
+    },
+  },
+  {
+    fieldName: 'dockingStatus',
+    component: 'Select',
+    label: '对接信息',
+    defaultValue: null,
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择对接信息',
+      options: getDictOptions(DictEnum.T_CHANNEL_DOCKING_STATUS, true),
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  {
+    title: '通道编号',
+    field: 'chanKey',
+    minWidth: 120,
+  },
+  {
+    title: '运营商',
+    field: 'operator',
+    params: { dictType: DictEnum.T_OPERATORS },
+    minWidth: 100,
+    slots: {
+      default: ({ row }) => renderChannelOperator(row.operator),
+    },
+  },
+  {
+    title: '通道名称',
+    field: 'chanName',
+    minWidth: 220,
+    showOverflow: 'tooltip',
+    slots: { default: 'chanName' },
+  },
+  {
+    title: '模板名称',
+    field: 'tempName',
+    minWidth: 120,
+  },
+  {
+    title: '通道别名',
+    field: 'chanAlias',
+    minWidth: 120,
+  },
+  {
+    title: '卡总量',
+    field: 'totalCardCount',
+    minWidth: 100,
+    slots: {
+      default: ({ row }) =>
+        String(
+          Number(row.stockCardCount || 0) +
+            Number(row.cardInfoCount || 0) +
+            Number(row.cancellationCardCount || 0),
+        ),
+    },
+  },
+  { title: '库存', field: 'stockCardCount', minWidth: 100 },
+  { title: '已出库', field: 'cardInfoCount', minWidth: 100 },
+  {
+    title: '已销户',
+    field: 'cancellationCardCount',
+    minWidth: 110,
+  },
+  {
+    title: '通道状态',
+    field: 'chanStatus',
+    params: { dictType: DictEnum.T_CHANNELS_STATUS },
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderValidDict(row.chanStatus, DictEnum.T_CHANNELS_STATUS);
+      },
+    },
+  },
+  {
+    title: '共享Token',
+    field: 'shareEnabled',
+    params: { dictType: DictEnum.SHARE_ENABLED },
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.shareEnabled, DictEnum.SHARE_ENABLED);
+      },
+    },
+  },
+  {
+    title: '是否正常',
+    field: 'isNormal',
+    params: { dictType: DictEnum.GLOBAL_YES_OR_NO },
+    minWidth: 120,
+    slots: {
+      header: () => renderHelpLabel('是否正常', channelBehaviorTips.isNormal),
+      default: ({ row }) => {
+        return renderOptionalDict(row.isNormal, DictEnum.GLOBAL_YES_OR_NO);
+      },
+    },
+  },
+  {
+    title: '是否轮询',
+    field: 'syncEnabled',
+    params: { dictType: DictEnum.T_CHANNEL_SYNC_ENABLED },
+    minWidth: 100,
+    slots: {
+      header: () => renderHelpLabel('是否轮询', channelBehaviorTips.syncEnabled),
+      default: ({ row }) => {
+        return renderDict(row.syncEnabled, DictEnum.T_CHANNEL_SYNC_ENABLED);
+      },
+    },
+  },
+  {
+    title: '对接信息',
+    field: 'dockingStatus',
+    params: { dictType: DictEnum.T_CHANNEL_DOCKING_STATUS },
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderOptionalDict(
+          row.dockingStatus,
+          DictEnum.T_CHANNEL_DOCKING_STATUS,
+        );
+      },
+    },
+  },
+  { title: '操作', width: 200, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: 'ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'chanName',
+    component: 'Input',
+    label: '通道名称',
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      placeholder: '请输入通道名称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'operator',
+    component: 'Select',
+    label: '运营商',
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      placeholder: '请选择运营商',
+      options: channelOperatorOptions,
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'chanAlias',
+    component: 'Input',
+    label: '通道别名',
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      placeholder: '请输入通道别名',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'tempKey',
+    component: 'ApiSelect',
+    label: '通道模板',
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      api: TemplateList,
+      labelField: 'tempName',
+      optionFilterProp: 'label',
+      placeholder: '请选择通道模板',
+      resultField: 'items',
+      showSearch: true,
+      valueField: 'tempKey',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'tempModel',
+    component: 'Input',
+    dependencies: { show: () => false, triggerFields: [''] },
+  },
+  {
+    fieldName: 'chanKey',
+    component: 'Input',
+    label: '通道编号',
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      placeholder: '请输入通道编号',
+    },
+    help: '已开启共享 Token 的通道不允许修改通道编号',
+    dependencies: {
+      triggerFields: ['id', 'shareEnabled'],
+      disabled: (values) =>
+        Number(values?.id) > 0 && Number(values?.shareEnabled) === 1,
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'chanStatus',
+    component: 'Select',
+    label: '通道状态',
+    defaultValue: 0,
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      placeholder: '请选择通道状态',
+      options: getDictOptions(DictEnum.T_CHANNELS_STATUS, true),
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'isNormal',
+    component: 'Select',
+    label: () => renderHelpLabel('是否正常', channelBehaviorTips.isNormal),
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择是否正常',
+      options: getDictOptions(DictEnum.GLOBAL_YES_OR_NO, true),
+    },
+  },
+  {
+    fieldName: 'dockingStatus',
+    component: 'Select',
+    label: '对接信息',
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择对接信息',
+      options: getDictOptions(DictEnum.T_CHANNEL_DOCKING_STATUS, true),
+    },
+  },
+  {
+    fieldName: 'shareEnabled',
+    component: 'Select',
+    label: '共享Token',
+    defaultValue: 0,
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      placeholder: '请选择共享Token',
+      options: [
+        { label: '是', value: 1 },
+        { label: '否', value: 0 },
+      ],
+    },
+    rules: 'required',
+  },
+  {
+    component: 'HctRegionSelect',
+    fieldName: 'regionCode',
+    label: '通道归属地',
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      maxLevel: 2,
+    },
+  },
+  {
+    fieldName: 'syncEnabled',
+    component: 'Select',
+    label: () => renderHelpLabel('是否轮询', channelBehaviorTips.syncEnabled),
+    defaultValue: 0,
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      placeholder: '请选择是否轮询',
+      options: getDictOptions(DictEnum.T_CHANNEL_SYNC_ENABLED, true),
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'refreshToken',
+    component: 'Input',
+    label: '刷新凭证',
+    formItemClass: 'col-span-12 md:col-span-4',
+    componentProps: {
+      placeholder: '请输入刷新凭证',
+    },
+    defaultValue: '0',
+  },
+  {
+    fieldName: 'appKey',
+    component: 'Input',
+    label: renderFormCredentialLabel('应用标识', staticCredentialTips.appKey),
+    formItemClass: 'col-span-12 md:col-span-6',
+    componentProps: {
+      placeholder: '请输入应用标识',
+    },
+    dependencies: {
+      componentProps: (values) => {
+        const templateModel = String(values.tempModel ?? '')
+          .trim()
+          .toLowerCase();
+        const templateKey = String(values.tempKey ?? '')
+          .trim()
+          .toLowerCase();
+        const appKey = String(values.appKey ?? '').trim();
+        const shareEnabled = Number(values.shareEnabled) === 1;
+        const isThirdPartySharedToken =
+          templateModel === 'shared_token' && templateKey !== 'sim_yd_v5';
+        const isPlatformAppKey = /^YZT[0-9A-HJKMNP-TV-Z]{20}$/.test(appKey);
+
+        return {
+          readonly:
+            isThirdPartySharedToken && (shareEnabled || isPlatformAppKey),
+        };
+      },
+      triggerFields: ['appKey', 'shareEnabled', 'tempKey', 'tempModel'],
+    },
+  },
+  {
+    fieldName: 'appSecret',
+    component: 'Input',
+    label: renderFormCredentialLabel(
+      '应用密钥',
+      staticCredentialTips.appSecret,
+    ),
+    formItemClass: 'col-span-12 md:col-span-6',
+    componentProps: {
+      placeholder: '请输入应用密钥',
+    },
+  },
+  {
+    fieldName: 'loginUrl',
+    component: 'Input',
+    label: '登录地址',
+    formItemClass: 'col-span-12 md:col-span-12',
+    componentProps: {
+      placeholder: '请输入登录地址',
+    },
+  },
+  {
+    fieldName: 'loginUser',
+    component: 'Input',
+    label: '登录账号',
+    formItemClass: 'col-span-12 md:col-span-6',
+    componentProps: {
+      placeholder: '请输入登录账号',
+    },
+  },
+  {
+    fieldName: 'loginPassword',
+    component: 'Input',
+    label: '登录密码',
+    formItemClass: 'col-span-12 md:col-span-6',
+    componentProps: {
+      placeholder: '请输入登录密码',
+    },
+  },
+  {
+    fieldName: 'chanConfig',
+    component: 'Textarea',
+    label: '通道配置',
+    defaultValue: '{}',
+    formItemClass: 'col-span-12 md:col-span-12',
+    componentProps: {
+      autosize: { minRows: 1, maxRows: 20 },
+      placeholder: '请输入通道配置 JSON',
+    },
+  },
+  {
+    fieldName: 'remark',
+    component: 'Textarea',
+    label: '备注',
+    formItemClass: 'col-span-12 md:col-span-12',
+    componentProps: {
+      autosize: { minRows: 2, maxRows: 6 },
+      placeholder: '请输入备注',
+    },
+  },
+];
+
+// 查看字段列表
+const operatorCredentialTips = {
+  dx: {
+    appKey: 'appKey，应用唯一标识',
+    appSecret: 'secretKey，API 接入密钥',
+  },
+  yd: {
+    appKey: 'appid，第三方应用唯一标识',
+    appSecret: 'password，API 接入密钥，与 appid 配对签名',
+  },
+} as const;
+
+const defaultCredentialTips = {
+  appKey: '运营商应用标识',
+  appSecret: '运营商应用密钥',
+};
+
+function getCredentialTips(data: Record<string, any>) {
+  const operatorValue = Number(data.operator);
+  if (operatorValue === 1) {
+    return operatorCredentialTips.yd;
+  }
+  if (operatorValue === 2) {
+    return operatorCredentialTips.dx;
+  }
+
+  return defaultCredentialTips;
+}
+
+export function getViewDescSchema(data: Record<string, any> = {}): DescItem[] {
+  const tips = getCredentialTips(data);
+  const schema: DescItem[] = [
+    {
+      field: 'operator',
+      label: '运营商',
+      render(operator) {
+        return renderChannelOperator(operator);
+      },
+    },
+    { field: 'tempName', label: '模板名称' },
+    { field: 'tempKey', label: '模板标识' },
+    { field: 'chanName', label: '通道名称' },
+    { field: 'chanAlias', label: '通道别名' },
+    { field: 'chanKey', label: '通道编号' },
+    {
+      field: 'chanStatus',
+      label: '通道状态',
+      render(chanStatus) {
+        return renderValidDict(chanStatus, DictEnum.T_CHANNELS_STATUS);
+      },
+    },
+    { field: 'regionCode', label: '通道行政区域' },
+    {
+      field: 'isNormal',
+      label: '是否正常',
+      render(isNormal) {
+        return renderValidDict(isNormal, DictEnum.GLOBAL_YES_OR_NO);
+      },
+    },
+    {
+      field: 'dockingStatus',
+      label: '对接信息',
+      render(dockingStatus) {
+        return renderValidDict(
+          dockingStatus,
+          DictEnum.T_CHANNEL_DOCKING_STATUS,
+        );
+      },
+    },
+    {
+      field: 'shareEnabled',
+      label: '共享Token',
+      render(shareEnabled) {
+        return renderDict(shareEnabled, DictEnum.SHARE_ENABLED);
+      },
+    },
+    {
+      field: 'syncEnabled',
+      label: '是否轮询',
+      render(syncEnabled) {
+        return renderDict(syncEnabled, DictEnum.T_CHANNEL_SYNC_ENABLED);
+      },
+    },
+    {
+      field: 'appKey',
+      label: renderHelpLabel('应用标识', tips.appKey),
+      span: 2,
+    },
+    {
+      field: 'appSecret',
+      label: renderHelpLabel('应用密钥', tips.appSecret),
+      span: 2,
+    },
+    { field: 'accessTokenCreated', label: '凭证申请时间' },
+    { field: 'accessTokenExpire', label: '凭证过期时间' },
+    { field: 'refreshToken', label: '刷新凭证', span: 2 },
+    { field: 'refreshTokenCreated', label: '刷新凭证申请时间' },
+    { field: 'refreshTokenExpire', label: '刷新凭证过期时间' },
+    {
+      field: 'loginUrl',
+      label: '登录地址',
+      span: 2,
+      render(loginUrl) {
+        if (!loginUrl) {
+          return '--';
+        }
+
+        const url = String(loginUrl);
+        return h(
+          'a',
+          {
+            href: url,
+            rel: 'noopener noreferrer',
+            target: '_blank',
+          },
+          url,
+        );
+      },
+    },
+    { field: 'loginUser', label: '登录账号' },
+    { field: 'loginPassword', label: '登录密码' },
+    {
+      field: 'loginState',
+      label: '登录状态',
+      render(loginState) {
+        return renderDict(loginState, DictEnum.GLOBAL_ENABLED);
+      },
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      span: 2,
+      render: renderRemark,
+    },
+    {
+      field: 'chanConfig',
+      label: '通道配置',
+      span: 2,
+      render: renderChannelConfig,
+    },
+  ];
+
+  return schema;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/test.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/test.vue
new file mode 100644
index 0000000..4902d98
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/test.vue
@@ -0,0 +1,424 @@
+<script setup lang="ts">
+import type {
+  TSimChannelsModel,
+  TSimChannelsTestItem,
+  TSimChannelsTestItemStatus,
+  TSimChannelsTestParam,
+} from '#/api/iotlcm/tChannel/tSimChannels/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { CircleHelp } from '@vben/icons';
+
+import {
+  Button,
+  Collapse,
+  CollapsePanel,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Select,
+  Tag,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { Test } from '#/api/iotlcm/tChannel/tSimChannels';
+
+type TestMode = 'single' | 'direct_single' | 'complete';
+type TestRange = 'all' | 'single';
+type CardValueType = 'iccid' | 'imsi' | 'msisdn';
+
+interface TestForm {
+  cardValueType: CardValueType;
+  cardValue: string;
+  iccid: string;
+  imsi: string;
+  msisdn: string;
+}
+
+const testItemOptions = [
+  { key: 'simBasicInfo', name: '基础信息' },
+  { key: 'simSession', name: '实时会话' },
+  { key: 'simStatus', name: '卡状态' },
+  { key: 'simStopReason', name: '停机原因' },
+  { key: 'simFrozenState', name: '冻结状态' },
+  { key: 'simCardBindStatus', name: '机卡绑定' },
+  { key: 'simDeviceStatus', name: '设备状态' },
+  { key: 'simRegionLimitStatus', name: '区域限制' },
+  { key: 'simImei', name: 'IMEI' },
+  { key: 'simDataUsage', name: '实时流量' },
+  { key: 'simDataUsageMonthly', name: '月流量' },
+  { key: 'simDataUsageDaily', name: '日流量' },
+  { key: 'simApnInfo', name: 'APN 信息' },
+] as const;
+
+const testSelectOptions = testItemOptions.map((item) => ({
+  label: item.name,
+  value: item.key,
+}));
+
+const cardValueTypeOptions = [
+  { label: 'ICCID', value: 'iccid' },
+  { label: 'IMSI', value: 'imsi' },
+  { label: 'MSISDN', value: 'msisdn' },
+] as const;
+
+const statusText: Record<TSimChannelsTestItemStatus, string> = {
+  failed: '失败',
+  success: '成功',
+  timeout: '超时',
+};
+
+const statusColor: Record<TSimChannelsTestItemStatus, string> = {
+  failed: 'error',
+  success: 'success',
+  timeout: 'warning',
+};
+
+const formRef = ref<InstanceType<typeof Form>>();
+const channel = ref<TSimChannelsModel>();
+const mode = ref<TestMode>('direct_single');
+const testRange = ref<TestRange>('all');
+const form = ref<TestForm>({
+  cardValueType: 'iccid',
+  cardValue: '',
+  iccid: '',
+  imsi: '',
+  msisdn: '',
+});
+const selectedItem = ref<string>();
+const results = ref<TSimChannelsTestItem[]>([]);
+const loadingItems = ref<string[]>([]);
+
+const submitting = computed(() => loadingItems.value.length > 0);
+const startDisabled = computed(() => {
+  if (mode.value === 'single' || mode.value === 'direct_single') {
+    if (!form.value.cardValueType || !form.value.cardValue.trim()) {
+      return true;
+    }
+    return testRange.value === 'single' && !selectedItem.value;
+  }
+  if (!form.value.iccid.trim() || !form.value.imsi.trim() || !form.value.msisdn.trim()) {
+    return true;
+  }
+  return testRange.value === 'single' && !selectedItem.value;
+});
+const selectedQueryItems = computed(() => {
+  if (testRange.value === 'single' && selectedItem.value) {
+    return [selectedItem.value];
+  }
+  return undefined;
+});
+const failedItems = computed(() =>
+  results.value
+    .filter((item) => item.status === 'failed' || item.status === 'timeout')
+    .map((item) => item.key),
+);
+
+const rules = computed(() => {
+  if (mode.value === 'single' || mode.value === 'direct_single') {
+    return {
+      cardValueType: [{ required: true, message: '请选择卡值类型', trigger: 'change' }],
+      cardValue: [{ required: true, message: '请输入卡值', trigger: 'blur' }],
+    };
+  }
+  return {
+    iccid: [{ required: true, message: '请输入ICCID', trigger: 'blur' }],
+    imsi: [{ required: true, message: '请输入IMSI', trigger: 'blur' }],
+    msisdn: [{ required: true, message: '请输入MSISDN', trigger: 'blur' }],
+  };
+});
+
+function isLoading(key?: string) {
+  return key
+    ? loadingItems.value.includes('__all__') || loadingItems.value.includes(key)
+    : submitting.value;
+}
+
+function replaceResults(items: TSimChannelsTestItem[]) {
+  for (const item of items) {
+    const index = results.value.findIndex((result) => result.key === item.key);
+    if (index >= 0) {
+      results.value.splice(index, 1, item);
+    } else {
+      results.value.push(item);
+    }
+  }
+}
+
+function buildParams(items?: string[]): TSimChannelsTestParam | undefined {
+  if (!channel.value) {
+    return undefined;
+  }
+  if (mode.value === 'single' || mode.value === 'direct_single') {
+    return {
+      channelId: channel.value.id,
+      inputMode: mode.value,
+      cardValueType: form.value.cardValueType,
+      cardValue: form.value.cardValue.trim(),
+      ...(items?.length ? { items } : {}),
+    };
+  }
+  return {
+    channelId: channel.value.id,
+    inputMode: 'complete',
+    iccid: form.value.iccid.trim(),
+    imsi: form.value.imsi.trim(),
+    msisdn: form.value.msisdn.trim(),
+    ...(items?.length ? { items } : {}),
+  };
+}
+
+async function runTest(items?: string[]) {
+  await formRef.value?.validate();
+  const params = buildParams(items);
+  if (!params) {
+    return;
+  }
+
+  const runningItems = items?.length ? items : ['__all__'];
+  loadingItems.value = [...new Set([...loadingItems.value, ...runningItems])];
+  try {
+    const response = await Test(params);
+    replaceResults(
+      (response.items ?? []).map((item) => ({
+        ...item,
+        responseJson: extractItemResponse(response.gatewayResponseRaw, item.key),
+      })),
+    );
+  } catch (error) {
+    // Preserve the existing card-query error flow.
+    throw error;
+  } finally {
+    loadingItems.value = loadingItems.value.filter(
+      (item) => !runningItems.includes(item),
+    );
+  }
+}
+
+async function handleStart() {
+  results.value = [];
+  await runTest(selectedQueryItems.value);
+}
+
+async function handleRetry(key: string) {
+  await runTest([key]);
+}
+
+async function handleRetryFailed() {
+  if (failedItems.value.length > 0) {
+    await runTest(failedItems.value);
+  }
+}
+
+function formatData(data: unknown) {
+  if (data === undefined || data === null) {
+    return '-';
+  }
+  return typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+}
+
+function formatResponseJson(raw?: string) {
+  if (!raw) return '-';
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2);
+  } catch {
+    return raw;
+  }
+}
+
+function extractItemResponse(raw: string | undefined, key: string) {
+  if (!raw) return undefined;
+  try {
+    const envelope = JSON.parse(raw) as {
+      data?: { items?: Array<{ key?: string }> };
+    };
+    const item = envelope.data?.items?.find((entry) => entry?.key === key);
+    return item ? JSON.stringify(item) : raw;
+  } catch {
+    return raw;
+  }
+}
+
+function reset() {
+  channel.value = undefined;
+  mode.value = 'direct_single';
+  testRange.value = 'all';
+  form.value = {
+    cardValueType: 'iccid',
+    cardValue: '',
+    iccid: '',
+    imsi: '',
+    msisdn: '',
+  };
+  selectedItem.value = undefined;
+  results.value = [];
+  loadingItems.value = [];
+  formRef.value?.clearValidate();
+}
+
+const [Modal, modalApi] = useVbenModal({
+  centered: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onOpenChange(open) {
+    if (open) {
+      channel.value = (modalApi.getData() as { row: TSimChannelsModel }).row;
+      modalApi.setState({
+        showCancelButton: false,
+        showConfirmButton: false,
+      });
+      return;
+    }
+    reset();
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :fullscreen-button="false"
+    :close-on-click-modal="false"
+    title="通道测试"
+    class="w-[960px] max-w-[calc(100vw-32px)]"
+  >
+    <Form ref="formRef" :model="form" :rules="rules" layout="vertical">
+      <FormItem>
+        <template #label>
+          <span class="inline-flex items-center gap-1">
+            测试模式
+            <Tooltip
+              title="电信部分接口只能使用 MSISDN 查询，建议使用单码补全或完整三码。"
+            >
+              <CircleHelp
+                aria-label="电信部分接口只能使用 MSISDN 查询，建议使用单码补全或完整三码"
+                class="size-3.5 cursor-help text-gray-400"
+                tabindex="0"
+              />
+            </Tooltip>
+          </span>
+        </template>
+        <RadioGroup v-model:value="mode" button-style="solid">
+          <RadioButton value="direct_single">单码直测</RadioButton>
+          <RadioButton value="single">单码补全</RadioButton>
+          <RadioButton value="complete">完整三码</RadioButton>
+        </RadioGroup>
+        <div class="mt-2 text-xs text-gray-500">
+          <span v-if="mode === 'single'">单码补全会先根据你填入的一项查询完整卡信息，再执行测试。</span>
+          <span v-else-if="mode === 'direct_single'">单码直测不会补全其他号码，直接使用当前号码调用查询接口。</span>
+        </div>
+      </FormItem>
+
+      <div v-if="mode === 'single' || mode === 'direct_single'" class="grid grid-cols-1 gap-x-4 md:grid-cols-2">
+        <FormItem label="卡值类型" name="cardValueType">
+          <Select
+            v-model:value="form.cardValueType"
+            :options="cardValueTypeOptions"
+            placeholder="请选择卡值类型"
+          />
+        </FormItem>
+        <FormItem label="卡值" name="cardValue">
+          <Input v-model:value="form.cardValue" placeholder="请输入卡值" />
+        </FormItem>
+      </div>
+
+      <div v-else class="grid grid-cols-1 gap-x-4 md:grid-cols-3">
+        <FormItem label="ICCID" name="iccid">
+          <Input v-model:value="form.iccid" placeholder="请输入ICCID" />
+        </FormItem>
+        <FormItem label="IMSI" name="imsi">
+          <Input v-model:value="form.imsi" placeholder="请输入IMSI" />
+        </FormItem>
+        <FormItem label="MSISDN" name="msisdn">
+          <Input v-model:value="form.msisdn" placeholder="请输入MSISDN" />
+        </FormItem>
+      </div>
+
+      <FormItem label="测试范围">
+        <div class="flex flex-wrap items-center gap-3">
+          <RadioGroup v-model:value="testRange" button-style="solid">
+            <RadioButton value="all">全部查询</RadioButton>
+            <RadioButton value="single">指定查询</RadioButton>
+          </RadioGroup>
+          <Select
+            v-if="testRange === 'single'"
+            v-model:value="selectedItem"
+            class="w-48"
+            :options="testSelectOptions"
+            placeholder="请选择查询项"
+          />
+        </div>
+      </FormItem>
+    </Form>
+
+    <div class="mb-3 flex items-center justify-between gap-3">
+      <span class="text-sm text-gray-500">
+        {{ channel?.chanName }}（{{ channel?.chanKey }}）
+      </span>
+      <div class="flex gap-2">
+        <Button
+          :disabled="startDisabled"
+          :loading="isLoading()"
+          type="primary"
+          @click="handleStart"
+        >
+          开始测试
+        </Button>
+        <Button
+          :disabled="failedItems.length === 0"
+          :loading="isLoading()"
+          @click="handleRetryFailed"
+        >
+          重试失败项
+        </Button>
+      </div>
+    </div>
+
+    <div v-if="results.length > 0" class="max-h-[500px] overflow-y-auto rounded border border-gray-200">
+      <Collapse accordion>
+        <CollapsePanel v-for="item in results" :key="item.key">
+          <template #header>
+            <div class="flex min-w-0 flex-1 items-center gap-3">
+              <span class="truncate">{{ item.name }}</span>
+              <Tag :color="statusColor[item.status]">
+                {{ statusText[item.status] }}
+              </Tag>
+              <span class="text-xs text-gray-500">{{ item.durationMs }} ms</span>
+            </div>
+          </template>
+          <template #extra>
+            <Button
+              size="small"
+              type="link"
+              :loading="isLoading(item.key)"
+              @click.stop="handleRetry(item.key)"
+            >
+              重试
+            </Button>
+          </template>
+           <div class="mb-3 text-sm text-gray-600">
+            <span v-if="item.errorCode" class="mr-2 font-medium text-red-600">
+              错误码 {{ item.errorCode }}
+            </span>
+            <span>{{ item.message || '-' }}</span>
+          </div>
+           <div class="mb-1 text-xs text-gray-500">标准化结果</div>
+           <pre class="m-0 h-36 max-h-36 overflow-auto rounded bg-gray-50 p-3 text-xs leading-5"
+             >{{ formatData(item.data) }}</pre
+           >
+           <details v-if="item.responseJson" class="mt-3 text-sm">
+             <summary class="cursor-pointer">响应 JSON</summary>
+             <pre
+               class="mt-2 h-56 max-h-56 overflow-auto rounded bg-gray-50 p-3 text-xs leading-5"
+               >{{ formatResponseJson(item.responseJson) }}</pre
+             >
+           </details>
+         </CollapsePanel>
+      </Collapse>
+    </div>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/view.vue
new file mode 100644
index 0000000..882b53a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tChannel/tSimChannels/view.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { TSimChannelsModel } from '#/api/iotlcm/tChannel/tSimChannels/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/tChannel/tSimChannels';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { getViewDescSchema } from './model';
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    setDescProps({ data: {} }, true);
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: TSimChannelsModel };
+  const record = await View({ id: row.id });
+  const data = { ...row, ...record };
+  setDescProps({ data, schema: getViewDescSchema(data) }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  class: 'w-[880px] max-w-[95vw]',
+  contentClass: 'max-h-[75vh] min-h-0 overflow-y-auto',
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  bordered: true,
+  column: 2,
+  schema: getViewDescSchema(),
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/components/batchCardPreview.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/components/batchCardPreview.vue
new file mode 100644
index 0000000..95c1265
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/components/batchCardPreview.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts" name="BusinessAcceptanceBatchCardPreview">
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Cards } from '#/api/iotlcm/tLifeCycle/tBatch';
+import BetterVben from '#/constants/BetterVben';
+import DictEnum from '#/constants/DictEnum';
+import { renderDict } from '#/utils';
+
+const props = withDefaults(
+  defineProps<{
+    batchNo?: string;
+    batchType?: number;
+    height?: number | string;
+    title?: string;
+  }>(),
+  {
+    batchNo: '',
+    batchType: 2,
+    height: 360,
+    title: '批次卡信息',
+  },
+);
+
+/** ====================  数据  ==================== */
+const totalCardCount = ref(0);
+let cardQuerySeq = 0;
+
+const previewCountText = computed(() => `当前预览 ${totalCardCount.value} 条`);
+
+const cardColumns: VxeGridProps['columns'] = [
+  {
+    title: '行号',
+    field: 'rowNo',
+    width: 90,
+    slots: {
+      default: ({ row }) => row.rowNo ?? '--',
+    },
+  },
+  {
+    title: 'ICCID',
+    field: 'iccid',
+    minWidth: 180,
+    align: 'left',
+  },
+  {
+    title: 'MSISDN',
+    field: 'msisdn',
+    minWidth: 140,
+  },
+  {
+    title: 'IMSI',
+    field: 'imsi',
+    minWidth: 160,
+  },
+  {
+    title: '明细状态',
+    field: 'detailStatus',
+    width: 100,
+    slots: {
+      default: ({ row }) =>
+        row.detailStatus === undefined
+          ? '--'
+          : renderDict(row.detailStatus, DictEnum.T_DETAIL_STATUS),
+    },
+  },
+];
+
+/** ====================  方法  ==================== */
+async function refreshCards() {
+  const querySeq = ++cardQuerySeq;
+  const batchNo = props.batchNo;
+  totalCardCount.value = 0;
+
+  if (!batchNo) {
+    return;
+  }
+
+  await nextTick();
+  const formValues =
+    typeof cardGridApi.formApi?.getValues === 'function'
+      ? await cardGridApi.formApi.getValues()
+      : {};
+
+  if (querySeq !== cardQuerySeq || batchNo !== props.batchNo) {
+    return;
+  }
+
+  await cardGridApi.reload(formValues ?? {});
+}
+
+/** ====================  组件  ==================== */
+const [CardGrid, cardGridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.custom as any),
+    schema: [
+      {
+        fieldName: 'keyword',
+        label: '关键字',
+        component: 'Input',
+      },
+      {
+        fieldName: 'iccid',
+        label: 'ICCID',
+        component: 'Input',
+      },
+      {
+        fieldName: 'msisdn',
+        label: 'MSISDN',
+        component: 'Input',
+      },
+      {
+        fieldName: 'imsi',
+        label: 'IMSI',
+        component: 'Input',
+      },
+    ],
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.modal as any),
+    height: props.height,
+    columns: cardColumns,
+    rowConfig: {
+      isHover: true,
+      keyField: 'iccid',
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          if (!props.batchNo) {
+            totalCardCount.value = 0;
+            return {
+              items: [],
+              page: page.currentPage,
+              pageSize: page.pageSize,
+              total: 0,
+            };
+          }
+
+          const data = await Cards({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            batchNo: props.batchNo,
+            batchType: props.batchType,
+          });
+          totalCardCount.value = data.total ?? 0;
+          return data;
+        },
+      },
+    },
+  },
+});
+
+/** ====================  周期  ==================== */
+onMounted(refreshCards);
+
+watch(
+  () => [props.batchNo, props.batchType],
+  async () => {
+    await refreshCards();
+  },
+  { flush: 'post' },
+);
+</script>
+
+<template>
+  <section class="flex min-h-0 flex-col gap-2">
+    <div class="flex flex-wrap items-center justify-between gap-2 text-[13px]">
+      <span class="font-medium text-[#111827] dark:text-[#f2f2f2]">
+        {{ title }}
+      </span>
+      <span class="text-[#86909c]">{{ previewCountText }}</span>
+    </div>
+
+    <CardGrid />
+  </section>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/components/cardSourceTabs.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/components/cardSourceTabs.vue
new file mode 100644
index 0000000..f39b2c1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/components/cardSourceTabs.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts" name="BusinessAcceptanceCardSourceTabs">
+import { TabPane, Tabs } from 'ant-design-vue';
+
+type CardSourceTab = 'excel' | 'input' | 'range' | 'dept';
+
+withDefaults(
+  defineProps<{
+    showExcel?: boolean;
+    showInput?: boolean;
+    showRange?: boolean;
+    showDept?: boolean;
+  }>(),
+  {
+    showExcel: true,
+    showInput: true,
+    showRange: true,
+    showDept: false,
+  },
+);
+
+const activeKey = defineModel<CardSourceTab>('activeKey', {
+  default: 'excel',
+});
+</script>
+
+<template>
+  <Tabs v-model:active-key="activeKey">
+    <TabPane v-if="showExcel" key="excel" tab="Excel导入">
+      <slot name="excel"></slot>
+    </TabPane>
+
+    <TabPane v-if="showInput" key="input" tab="批量输入">
+      <slot name="input"></slot>
+    </TabPane>
+
+    <TabPane v-if="showRange" key="range" tab="连号">
+      <slot name="range"></slot>
+    </TabPane>
+
+    <TabPane v-if="showDept" key="dept" tab="按所属公司">
+      <slot name="dept"></slot>
+    </TabPane>
+  </Tabs>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/index.vue
new file mode 100644
index 0000000..a2caea0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/index.vue
@@ -0,0 +1,401 @@
+<script setup lang="ts" name="BusinessAcceptance">
+import { computed, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { message } from 'ant-design-vue';
+
+import AddPackage from './views/addPackage.vue';
+import CardBaseQuery from './views/cardBaseQuery.vue';
+import Cancel from './views/cancel.vue';
+import Change from './views/change.vue';
+import DataToggle from './views/dataToggle.vue';
+import Lifecycle from './views/lifecycle.vue';
+import Renew from './views/renew.vue';
+import TrafficCutoff from './views/trafficCutoff.vue';
+import Unsubscribe from './views/unsubscribe.vue';
+import UsageHistoryQuery from './views/usageHistoryQuery.vue';
+import WarningConfig from './views/warningConfig.vue';
+
+type AcceptanceAction =
+  | 'addPackage'
+  | 'allocate'
+  | 'cancel'
+  | 'cardBaseQuery'
+  | 'change'
+  | 'dataToggle'
+  | 'renew'
+  | 'restart'
+  | 'start'
+  | 'stop'
+  | 'trafficCutoff'
+  | 'unsubscribe'
+  | 'usageHistoryQuery'
+  | 'warningPoolTraffic'
+  | 'warningTraffic';
+
+type AcceptanceItem = {
+  accessCodes?: string[];
+  action?: AcceptanceAction;
+  color: string;
+  desc: string;
+  icon: string;
+  title: string;
+};
+
+type AcceptanceGroup = {
+  items: AcceptanceItem[];
+  title: string;
+};
+
+const operationAccessCodes: Partial<Record<AcceptanceAction, string[]>> = {
+  // 入口可见性只按 view 判定；模板下载与提交导出各自在弹窗内按对应权限码控制。
+  // hasAccessByCodes 是「任一命中」语义，三个码并列会让只有 view 的用户也能点导出。
+  cardBaseQuery: ['cpm:iot:tSimCardBaseQuery:view'],
+  usageHistoryQuery: ['cpm:iot:tSimCardUsageHistory:view'],
+  addPackage: [
+    'cpm:iot:tSimCardBindPkg:addPackage',
+    'cpm:iot:tSimPoolBindPackage:addPackage',
+    'cpr:superadmin',
+  ],
+  allocate: [
+    'cpm:iot:tSimCardAllocate:targets',
+    'cpm:iot:tSimCardAllocate:excel:template',
+    'cpm:iot:tSimCardAllocate:input:prepare',
+    'cpm:iot:tSimCardAllocate:excel:submit',
+    'cpm:iot:tSimCardAllocate:batch:submit',
+  ],
+  cancel: [
+    'cpm:iot:tSimCardCancel:excel:template',
+    'cpm:iot:tSimCardCancel:excel:submit',
+    'cpm:iot:tSimCardCancel:input:submit',
+  ],
+  change: [
+    'cpm:iot:tSimCardChange:excel:template',
+    'cpm:iot:tSimCardChange:excel:submit',
+    'cpm:iot:tSimCardChange:input:prepare',
+    'cpm:iot:tSimCardChange:range:prepare',
+    'cpm:iot:tSimCardChange:batch:submit',
+  ],
+  dataToggle: [
+    'cpm:iot:tSimCardDataStart:excel:template',
+    'cpm:iot:tSimCardDataStart:excel:submit',
+    'cpm:iot:tSimCardDataStart:input:submit',
+    'cpm:iot:tSimCardDataStop:excel:template',
+    'cpm:iot:tSimCardDataStop:excel:submit',
+    'cpm:iot:tSimCardDataStop:input:submit',
+  ],
+  renew: [
+    'cpm:iot:tSimCardRenew:excel:template',
+    'cpm:iot:tSimCardRenew:excel:submit',
+    'cpm:iot:tSimCardRenew:input:prepare',
+    'cpm:iot:tSimCardRenew:batch:confirm',
+  ],
+  restart: [
+    'cpm:iot:tSimCardRestart:excel:template',
+    'cpm:iot:tSimCardRestart:excel:submit',
+    'cpm:iot:tSimCardRestart:input:submit',
+  ],
+  start: [
+    'cpm:iot:tSimCardStart:excel:template',
+    'cpm:iot:tSimCardStart:excel:submit',
+    'cpm:iot:tSimCardStart:input:submit',
+  ],
+  stop: [
+    'cpm:iot:tSimCardStop:excel:template',
+    'cpm:iot:tSimCardStop:excel:submit',
+    'cpm:iot:tSimCardStop:input:submit',
+  ],
+  trafficCutoff: [
+    'cpm:iot:tSimCardTrafficCutoff:excel:template',
+    'cpm:iot:tSimCardTrafficCutoff:excel:submit',
+    'cpm:iot:tSimCardTrafficCutoff:input:submit',
+    'cpm:iot:tSimCardTrafficCutoff:range:submit',
+  ],
+  unsubscribe: [
+    'cpm:iot:tSimCardUnsub:excel:template',
+    'cpm:iot:tSimCardUnsub:excel:submit',
+    'cpm:iot:tSimCardUnsub:input:submit',
+    'cpm:iot:tSimCardUnsub:range:submit',
+  ],
+  warningPoolTraffic: [
+    'cpm:iot:tSimPoolWarnConfig:excel:template',
+    'cpm:iot:tSimPoolWarnConfig:excel:submit',
+    'cpm:iot:tSimPoolWarnConfig:input:submit',
+    'cpm:iot:tSimPoolWarnConfig:range:submit',
+  ],
+  warningTraffic: [
+    'cpm:iot:tSimWarningConfig:excel:template',
+    'cpm:iot:tSimWarningConfig:excel:submit',
+    'cpm:iot:tSimWarningConfig:input:submit',
+    'cpm:iot:tSimWarningConfig:range:submit',
+  ],
+};
+
+const acceptanceGroups: AcceptanceGroup[] = [
+  {
+    title: '卡信息查询管理',
+    items: [
+      { title: '卡基础信息查询', desc: '按号码批量查询并导出卡信息', action: 'cardBaseQuery', accessCodes: operationAccessCodes.cardBaseQuery, icon: 'mdi:card-search-outline', color: '#1677ff' },
+      { title: '月历史用量查询', desc: '导出近 12 个月用量明细', action: 'usageHistoryQuery', accessCodes: operationAccessCodes.usageHistoryQuery, icon: 'mdi:chart-timeline-variant', color: '#13a8a8' },
+    ],
+  },
+  {
+    title: '卡运维管理',
+    items: [
+      { title: '重启', desc: '对卡执行远程重启', action: 'restart', accessCodes: operationAccessCodes.restart, icon: 'mdi:restart', color: '#ff9816' },
+      { title: '划拨', desc: '将卡划拨至目标企业', action: 'allocate', accessCodes: operationAccessCodes.allocate, icon: 'mdi:account-arrow-right-outline', color: '#52c41a' },
+      { title: '开停数据', desc: '批量开通或停用数据服务', action: 'dataToggle', accessCodes: operationAccessCodes.dataToggle, icon: 'mdi:database-sync-outline', color: '#1677ff' },
+      { title: '自主停机', desc: '批量办理停机', action: 'stop', accessCodes: operationAccessCodes.stop, icon: 'mdi:pause-circle-outline', color: '#e91e63' },
+      { title: '自主复机', desc: '批量办理复机', action: 'start', accessCodes: operationAccessCodes.start, icon: 'mdi:play-circle-outline', color: '#2d9fe8' },
+      { title: '转销户', desc: '办理卡销户', action: 'cancel', accessCodes: operationAccessCodes.cancel, icon: 'mdi:account-switch-outline', color: '#4caf50' },
+    ],
+  },
+  {
+    title: '套餐与流量业务',
+    items: [
+      { title: '续费套餐', desc: '为卡续费当前套餐', action: 'renew', accessCodes: operationAccessCodes.renew, icon: 'mdi:credit-card-refresh-outline', color: '#ff9816' },
+      { title: '变更套餐', desc: '变更卡所属套餐', action: 'change', accessCodes: operationAccessCodes.change, icon: 'mdi:swap-horizontal', color: '#e91e63' },
+      { title: '加油包订购', desc: '为卡订购加油包', action: 'addPackage', accessCodes: operationAccessCodes.addPackage, icon: 'mdi:gas-station-outline', color: '#22c55e' },
+      { title: '退订', desc: '退订已订购套餐', action: 'unsubscribe', accessCodes: operationAccessCodes.unsubscribe, icon: 'mdi:clipboard-remove-outline', color: '#2d9fe8' },
+      { title: '达量断网', desc: '配置达量断网阈值', action: 'trafficCutoff', accessCodes: operationAccessCodes.trafficCutoff, icon: 'mdi:network-off', color: '#1677ff' },
+    ],
+  },
+  {
+    title: '预警配置中心',
+    items: [
+      { title: '流量预警配置', desc: '按卡配置流量预警', action: 'warningTraffic', accessCodes: operationAccessCodes.warningTraffic, icon: 'mdi:gauge', color: '#13a8a8' },
+      { title: '流量池预警配置', desc: '按流量池配置预警', action: 'warningPoolTraffic', accessCodes: operationAccessCodes.warningPoolTraffic, icon: 'mdi:chart-donut', color: '#2f54eb' },
+    ],
+  },
+];
+
+const { hasAccessByCodes } = useAccess();
+
+function hasAcceptanceItemAccess(item: AcceptanceItem) {
+  if (!item.accessCodes || item.accessCodes.length === 0) {
+    return true;
+  }
+  return hasAccessByCodes(item.accessCodes);
+}
+
+const visibleAcceptanceGroups = computed(() =>
+  acceptanceGroups
+    .map((group) => ({
+      ...group,
+      items: group.items.filter(hasAcceptanceItemAccess),
+    }))
+    .filter((group) => group.items.length > 0),
+);
+
+function handleMenuClick(item: AcceptanceItem) {
+  if (item.action === 'cardBaseQuery') {
+    cardBaseQueryModalApi.open();
+    return;
+  }
+  if (item.action === 'usageHistoryQuery') {
+    usageHistoryQueryModalApi.open();
+    return;
+  }
+  if (item.action === 'allocate') {
+    lifecycleModalApi.setData({ operation: 'allocate' }).open();
+    return;
+  }
+  if (
+    item.action === 'restart' ||
+    item.action === 'start' ||
+    item.action === 'stop'
+  ) {
+    lifecycleModalApi.setData({ operation: item.action }).open();
+    return;
+  }
+  if (item.action === 'renew') {
+    renewModalApi.open();
+    return;
+  }
+  if (item.action === 'unsubscribe') {
+    unsubscribeModalApi.open();
+    return;
+  }
+  if (item.action === 'change') {
+    changeModalApi.open();
+    return;
+  }
+  if (item.action === 'addPackage') {
+    addPackageModalApi.open();
+    return;
+  }
+  if (item.action === 'dataToggle') {
+    dataToggleModalApi.open();
+    return;
+  }
+  if (item.action === 'trafficCutoff') {
+    trafficCutoffModalApi.open();
+    return;
+  }
+  if (item.action === 'cancel') {
+    cancelModalApi.open();
+    return;
+  }
+  if (item.action === 'warningTraffic') {
+    warningConfigModalApi.setData({ operation: 'traffic' }).open();
+    return;
+  }
+  if (item.action === 'warningPoolTraffic') {
+    warningConfigModalApi.setData({ operation: 'poolTraffic' }).open();
+  }
+}
+
+const [CardBaseQueryModal, cardBaseQueryModalApi] = useVbenModal({
+  connectedComponent: CardBaseQuery,
+});
+
+const [UsageHistoryQueryModal, usageHistoryQueryModalApi] = useVbenModal({
+  connectedComponent: UsageHistoryQuery,
+});
+
+const [RenewModal, renewModalApi] = useVbenModal({
+  connectedComponent: Renew,
+});
+
+const [UnsubscribeModal, unsubscribeModalApi] = useVbenModal({
+  connectedComponent: Unsubscribe,
+});
+
+const [ChangeModal, changeModalApi] = useVbenModal({
+  connectedComponent: Change,
+});
+
+const [AddPackageModal, addPackageModalApi] = useVbenModal({
+  connectedComponent: AddPackage,
+});
+
+const [LifecycleModal, lifecycleModalApi] = useVbenModal({
+  connectedComponent: Lifecycle,
+});
+
+const [CancelModal, cancelModalApi] = useVbenModal({
+  connectedComponent: Cancel,
+});
+
+const [DataToggleModal, dataToggleModalApi] = useVbenModal({
+  connectedComponent: DataToggle,
+});
+
+const [WarningConfigModal, warningConfigModalApi] = useVbenModal({
+  connectedComponent: WarningConfig,
+});
+
+const [TrafficCutoffModal, trafficCutoffModalApi] = useVbenModal({
+  connectedComponent: TrafficCutoff,
+});
+
+const route = useRoute();
+const router = useRouter();
+const acceptancePath = route.path;
+let consumingAcceptanceAction = false;
+
+watch(
+  () => route.query,
+  async (query) => {
+    if (
+      route.path !== acceptancePath ||
+      query.acceptanceAction !== 'trafficCutoff' ||
+      consumingAcceptanceAction
+    )
+      return;
+    consumingAcceptanceAction = true;
+    try {
+      const cardValue =
+        typeof query.cardValue === 'string' ? query.cardValue.trim() : '';
+      const remainingQuery = { ...query };
+      delete remainingQuery.acceptanceAction;
+      delete remainingQuery.cardValue;
+      await router.replace({
+        path: route.path,
+        query: remainingQuery,
+        hash: route.hash,
+      });
+      if (!hasAccessByCodes(['cpm:iot:tSimCardTrafficCutoff:input:submit'])) {
+        message.warning('没有达量断网手动配置权限');
+        return;
+      }
+      if (!cardValue || /[\r\n]/.test(cardValue)) {
+        message.warning('请提供有效的单张卡片标识');
+        return;
+      }
+      trafficCutoffModalApi.setData({ cardValue }).open();
+    } finally {
+      consumingAcceptanceAction = false;
+    }
+  },
+  { immediate: true, flush: 'post' },
+);
+</script>
+
+<template>
+  <div
+    class="flex min-h-full w-full flex-col gap-3 bg-[#f5f7fb] p-4 dark:bg-[#00000000]"
+  >
+    <section
+      v-for="group in visibleAcceptanceGroups"
+      :key="group.title"
+      class="rounded-md bg-white px-6 py-10 dark:bg-[#1f1f1f]"
+    >
+      <h2
+        class="mb-5 text-left text-[16px] font-[600] leading-[24px] text-[#111827] dark:text-[#f2f2f2]"
+      >
+        {{ group.title }}
+      </h2>
+
+      <div
+        class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4"
+      >
+        <button
+          v-for="item in group.items"
+          :key="item.title"
+          type="button"
+          :data-action="item.action"
+          class="group flex w-full items-center gap-3 rounded-[10px] border border-[#eef0f4] bg-white px-4 py-3 text-left outline-none transition-all duration-200 hover:border-[#d6e2f5] hover:shadow-sm focus-visible:ring-2 focus-visible:ring-[#1677ff]/40 dark:border-[#2f2f2f] dark:bg-[#1f1f1f] dark:hover:border-[#3d5a80]"
+          @click="handleMenuClick(item)"
+        >
+          <span
+            class="flex size-[44px] shrink-0 items-center justify-center rounded-[12px] text-white shadow-sm transition-transform duration-200 group-hover:-translate-y-0.5"
+            :style="{ backgroundColor: item.color }"
+          >
+            <IconifyIcon :icon="item.icon" class="text-[22px]" />
+          </span>
+          <span class="min-w-0 flex-1">
+            <span
+              class="block truncate text-[14px] font-[600] leading-[20px] text-[#111827] dark:text-[#f2f2f2]"
+            >
+              {{ item.title }}
+            </span>
+            <span
+              class="mt-0.5 block truncate text-[12px] leading-[18px] text-[#6b7280] dark:text-[#9ca3af]"
+            >
+              {{ item.desc }}
+            </span>
+          </span>
+        </button>
+      </div>
+    </section>
+
+    <CardBaseQueryModal />
+    <UsageHistoryQueryModal />
+    <RenewModal />
+    <UnsubscribeModal />
+    <ChangeModal />
+    <AddPackageModal />
+    <LifecycleModal />
+    <CancelModal />
+    <DataToggleModal />
+    <WarningConfigModal />
+    <TrafficCutoffModal />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/addPackage.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/addPackage.vue
new file mode 100644
index 0000000..d97c288
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/addPackage.vue
@@ -0,0 +1,1132 @@
+<script setup lang="ts" name="BusinessAcceptanceAddPackage">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type {
+  AddPackageEffectiveMode,
+  TSimAddPackagePrepareResult as CardAddPackagePrepareResult,
+} from '#/api/iotlcm/tCommunication/tSimCardBindPkg/type';
+import type { TSimPoolAddPackagePrepareResult as PoolAddPackagePrepareResult } from '#/api/iotlcm/tCommunication/tSimPoolBindPackage/type';
+
+import { computed, h, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import {
+  Button,
+  Checkbox,
+  Input,
+  message,
+  RadioButton,
+  RadioGroup,
+  Select,
+  Spin,
+  Upload,
+  UploadDragger,
+} from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import {
+  AddPackageBatchConfirm as CardAddPackageBatchConfirm,
+  AddPackageExcelSubmit as CardAddPackageExcelSubmit,
+  AddPackageInputPrepare as CardAddPackageInputPrepare,
+  AddPackagePaymentContext as CardAddPackagePaymentContext,
+  AddPackagePrepareResult as CardAddPackagePrepareResultApi,
+  DownloadAddPackageTemplate as DownloadCardAddPackageTemplate,
+} from '#/api/iotlcm/tCommunication/tSimCardBindPkg';
+import {
+  DownloadAddPackageTemplate as DownloadPoolAddPackageTemplate,
+  AddPackageBatchConfirm as PoolAddPackageBatchConfirm,
+  AddPackageExcelSubmit as PoolAddPackageExcelSubmit,
+  AddPackageInputPrepare as PoolAddPackageInputPrepare,
+  AddPackagePaymentContext as PoolAddPackagePaymentContext,
+  AddPackagePrepareResult as PoolAddPackagePrepareResultApi,
+} from '#/api/iotlcm/tCommunication/tSimPoolBindPackage';
+import BetterVben from '#/constants/BetterVben';
+import DictEnum from '#/constants/DictEnum';
+import { getDictOptions } from '#/utils/dict';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import CardSourceTabs from '../components/cardSourceTabs.vue';
+
+const MAX_EXCEL_FILE_SIZE = 50;
+const SOURCE_MODAL_CLASS = 'w-[820px] max-w-[calc(100vw-48px)]';
+const DETAIL_MODAL_CLASS = 'w-[1120px] max-w-[calc(100vw-48px)]';
+const POLL_INTERVAL_MS = 2000;
+const POLL_MAX_ATTEMPTS = 30;
+
+type AddPackageOperation = 'card' | 'pool';
+type AddPackagePrepareResult =
+  | CardAddPackagePrepareResult
+  | PoolAddPackagePrepareResult;
+type AddPackageTab = 'excel' | 'input';
+type AddPackageStep = 'confirm' | 'source';
+type PaymentMode = 'balance' | 'offline';
+type PaymentAccount = {
+  availableBalance: number;
+  balanceEnough: boolean;
+  payerDeptId: number;
+  requiredAmount: number;
+  targetCount: number;
+};
+type PackageOption = {
+  flowMb?: number | string;
+  label: string;
+  packageName?: string;
+  paymentAccounts: PaymentAccount[];
+  priceAvailable: boolean;
+  priceReason?: string;
+  totalAmount: number;
+  unitPrice: number;
+  value: string;
+};
+
+const operationConfig = {
+  card: {
+    targetLabel: 'ICCID',
+    title: '单卡加油包',
+    sourcePlaceholder:
+      '每行一条，只输入 ICCID，例如：\n89860401780000646025\n89860401780000646026',
+    uploadHint: 'Excel 需要填写 ICCID、加油包套餐编码。',
+  },
+  pool: {
+    targetLabel: '流量池编码',
+    title: '流量池加油包',
+    sourcePlaceholder:
+      '每行一条，只输入流量池编码，例如：\nPOOL178000040009701\nPOOL202608170002',
+    uploadHint: 'Excel 需要填写流量池编码、加油包套餐编码。',
+  },
+} as const;
+
+const paymentTypeValueByMode: Record<PaymentMode, string> = {
+  balance: '4',
+  offline: '3',
+};
+
+const operation = ref<AddPackageOperation>('card');
+const activeTab = ref<AddPackageTab>('excel');
+const currentStep = ref<AddPackageStep>('source');
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+const inputText = ref('');
+const selectedPackageCode = ref('');
+const packageOptions = ref<PackageOption[]>([]);
+const isTopDept = ref(false);
+const availableBalance = ref(0);
+const offlineContractCompleted = ref(false);
+const effectiveMode = ref<AddPackageEffectiveMode>('current_month');
+const preparedResult = ref<AddPackagePrepareResult>();
+const isPolling = ref(false);
+const pendingBatchNo = ref<null | string>(null);
+let pollSequence = 0;
+
+const currentConfig = computed(() => operationConfig[operation.value]);
+const activePaymentMode = computed<PaymentMode>(() =>
+  isTopDept.value && offlineContractCompleted.value ? 'offline' : 'balance',
+);
+const paymentTypeOptions = computed(() => getDictOptions(DictEnum.PAY_TYPE));
+const activePaymentModeLabel = computed(() => {
+  const paymentTypeValue = paymentTypeValueByMode[activePaymentMode.value];
+  const fallbackLabel =
+    activePaymentMode.value === 'balance' ? '余额支付' : '线下支付';
+  return (
+    paymentTypeOptions.value.find(
+      (option) => String(option.value) === paymentTypeValue,
+    )?.label ?? fallbackLabel
+  );
+});
+const selectedPackageOption = computed(() =>
+  packageOptions.value.find((item) => item.value === selectedPackageCode.value),
+);
+const preparedQuantity = computed(
+  () => numberValue(preparedResult.value?.quantity) ?? 0,
+);
+const selectedUnitPrice = computed(
+  () =>
+    numberValue(
+      firstValue(
+        selectedPackageOption.value?.unitPrice,
+        preparedResult.value?.unitPrice,
+      ),
+    ) ?? 0,
+);
+const selectedTotalAmount = computed(() => {
+  const selectedTotal = numberValue(selectedPackageOption.value?.totalAmount);
+  if (selectedTotal !== undefined) {
+    return selectedTotal;
+  }
+  const preparedTotal = numberValue(preparedResult.value?.totalAmount);
+  if (!selectedPackageOption.value && preparedTotal !== undefined) {
+    return preparedTotal;
+  }
+  return preparedQuantity.value * selectedUnitPrice.value;
+});
+const paymentAccounts = computed(() => {
+  const selectedAccounts = selectedPackageOption.value?.paymentAccounts ?? [];
+  if (selectedAccounts.length > 0) {
+    return selectedAccounts;
+  }
+  return normalizePaymentAccounts(preparedResult.value?.paymentAccounts);
+});
+const targetLines = computed(() => normalizeInputLines(inputText.value));
+const targetCodes = computed(() => normalizeTargets(inputText.value));
+const selectedEffectiveStartTime = computed(
+  () => effectiveModeWindow(effectiveMode.value).start,
+);
+const selectedEffectiveExpireTime = computed(
+  () => effectiveModeWindow(effectiveMode.value).end,
+);
+const preparedPaymentAccounts = computed(() => paymentAccounts.value);
+const preparedTotalAmount = computed(() => selectedTotalAmount.value);
+const preparedAvailableBalance = computed(() => {
+  if (preparedPaymentAccounts.value.length > 0) {
+    return preparedPaymentAccounts.value.reduce(
+      (total, account) => total + account.availableBalance,
+      0,
+    );
+  }
+  return (
+    numberValue(preparedResult.value?.availableBalance) ??
+    availableBalance.value
+  );
+});
+const preparedBalanceAfter = computed(() =>
+  (preparedAvailableBalance.value - preparedTotalAmount.value).toFixed(2),
+);
+const preparedBalanceEnough = computed(() => {
+  if (activePaymentMode.value !== 'balance') {
+    return true;
+  }
+  if (preparedPaymentAccounts.value.length > 0) {
+    return preparedPaymentAccounts.value.every(
+      (account) => account.balanceEnough,
+    );
+  }
+  return preparedAvailableBalance.value + 0.0001 >= preparedTotalAmount.value;
+});
+const preparedConfirmDisabled = computed(() => {
+  if (currentStep.value !== 'confirm') {
+    return false;
+  }
+  if (isPolling.value) {
+    return true;
+  }
+  if (!String(preparedResult.value?.batchNo ?? '').trim()) {
+    return true;
+  }
+  if (!String(selectedPackageCode.value ?? '').trim()) {
+    return true;
+  }
+  if (packageOptions.value.length > 0) {
+    if (!selectedPackageOption.value) {
+      return true;
+    }
+    if (!selectedPackageOption.value.priceAvailable) {
+      return true;
+    }
+  }
+  if (activePaymentMode.value === 'balance' && !preparedBalanceEnough.value) {
+    return true;
+  }
+  return (
+    activePaymentMode.value === 'offline' && !offlineContractCompleted.value
+  );
+});
+const selectedPackageName = computed(() => {
+  const name = String(
+    selectedPackageOption.value?.packageName ??
+      selectedPackageOption.value?.label ??
+      preparedResult.value?.packageName ??
+      '',
+  ).trim();
+  const code = String(
+    selectedPackageOption.value?.value ??
+      preparedResult.value?.packageCode ??
+      '',
+  ).trim();
+  return name || code || '--';
+});
+
+watch(operation, () => {
+  resetLocalState();
+  void loadPaymentContext();
+});
+
+watch(activeTab, () => {
+  pollSequence++;
+  clearPreparedContext();
+  setCurrentStep('source');
+});
+
+watch(
+  [
+    activePaymentMode,
+    currentStep,
+    isPolling,
+    offlineContractCompleted,
+    packageOptions,
+    preparedBalanceEnough,
+    preparedResult,
+    selectedPackageCode,
+    selectedPackageOption,
+  ],
+  () => updateModalState(),
+);
+
+function modalConfirmText(step: AddPackageStep = currentStep.value) {
+  if (isPolling.value) {
+    return '预处理中...';
+  }
+  if (step === 'confirm') {
+    return '确认提交';
+  }
+  if (activeTab.value === 'excel') {
+    return '提交';
+  }
+  if (step === 'source') {
+    return '下一步';
+  }
+  return '确认提交';
+}
+
+function objectValue(value: unknown): Record<string, any> {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, any>)
+    : {};
+}
+
+function firstValue(...values: unknown[]) {
+  return values.find(
+    (item) => item !== undefined && item !== null && item !== '',
+  );
+}
+
+function numberValue(value: unknown): number | undefined {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+function normalizeEffectiveMode(_value: unknown): AddPackageEffectiveMode {
+  return 'current_month';
+}
+
+function effectiveModeWindow(_value: unknown) {
+  const now = dayjs();
+  return {
+    start: now.format('YYYY-MM-DD HH:mm:ss'),
+    end: now.endOf('month').format('YYYY-MM-DD HH:mm:ss'),
+  };
+}
+
+function normalizePaymentAccounts(value: unknown): PaymentAccount[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value
+    .map((account: any) => ({
+      payerDeptId: Number(account?.payerDeptId ?? 0),
+      targetCount: Number(account?.targetCount ?? 0),
+      requiredAmount: Number(account?.requiredAmount ?? 0),
+      availableBalance: Number(account?.availableBalance ?? 0),
+      balanceEnough: account?.balanceEnough === true,
+    }))
+    .filter((account) => account.payerDeptId > 0);
+}
+
+function normalizePackageOptions(value: unknown): PackageOption[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value
+    .map((item: any) => {
+      const packageCode = String(
+        firstValue(item?.packageCode, item?.value) ?? '',
+      ).trim();
+      const packageName = String(
+        firstValue(item?.packageName, item?.label) ?? '',
+      ).trim();
+      const flowMb = firstValue(item?.flowMb, item?.flow);
+      const flow = Number(flowMb ?? 0);
+      const normalizedFlowMb =
+        typeof flowMb === 'number' || typeof flowMb === 'string'
+          ? flowMb
+          : undefined;
+      const flowText =
+        Number.isFinite(flow) && flow > 0 ? `，${flow.toFixed(2)} MB` : '';
+      const unitPrice = Number(item?.unitPrice ?? 0);
+      const totalAmount = Number(item?.totalAmount ?? 0);
+      const priceReason = String(item?.priceReason ?? '').trim();
+      return {
+        flowMb: normalizedFlowMb,
+        label: packageName
+          ? `${packageName}（${packageCode}${flowText}）`
+          : packageCode,
+        packageName,
+        paymentAccounts: normalizePaymentAccounts(item?.paymentAccounts),
+        priceAvailable: item?.priceAvailable !== false,
+        priceReason,
+        totalAmount: Number.isFinite(totalAmount) ? totalAmount : 0,
+        unitPrice: Number.isFinite(unitPrice) ? unitPrice : 0,
+        value: packageCode,
+      };
+    })
+    .filter((item) => item.value);
+}
+
+function formatAmount(value: unknown) {
+  const amount = Number(value ?? 0);
+  return Number.isFinite(amount) ? amount.toFixed(2) : '0.00';
+}
+
+function normalizeInputLines(input: string) {
+  return input
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+}
+
+function parseInputFields(line: string) {
+  const value = line.trim();
+  if (!value) {
+    return [];
+  }
+  if (value.includes('|')) {
+    return value
+      .split('|')
+      .map((item) => item.trim())
+      .filter(Boolean);
+  }
+  if (value.includes('\t')) {
+    return value
+      .split('\t')
+      .map((item) => item.trim())
+      .filter(Boolean);
+  }
+  return value.split(/\s+/).filter(Boolean);
+}
+
+function normalizeTargets(input: string) {
+  const rows = normalizeInputLines(input)
+    .map((line) => parseInputFields(line)[0]?.trim())
+    .filter(Boolean) as string[];
+  return [...new Set(rows)];
+}
+
+function clearPreparedContext() {
+  preparedResult.value = undefined;
+  pendingBatchNo.value = null;
+  isPolling.value = false;
+  selectedPackageCode.value = '';
+  packageOptions.value = [];
+}
+
+function resetLocalState() {
+  pollSequence++;
+  currentStep.value = 'source';
+  uploadFile.value = [];
+  importFile.value = undefined;
+  inputText.value = '';
+  isTopDept.value = false;
+  availableBalance.value = 0;
+  offlineContractCompleted.value = false;
+  effectiveMode.value = 'current_month';
+  clearPreparedContext();
+  updateModalState('source');
+}
+
+function updateModalState(step: AddPackageStep = currentStep.value) {
+  modalApi.setState({
+    class: step === 'source' ? SOURCE_MODAL_CLASS : DETAIL_MODAL_CLASS,
+    confirmDisabled: step === 'confirm' ? preparedConfirmDisabled.value : false,
+    confirmText: modalConfirmText(step),
+  });
+}
+
+function setCurrentStep(step: AddPackageStep) {
+  currentStep.value = step;
+  updateModalState(step);
+}
+
+function handleBeforeUpload(file: File) {
+  const suffix = file.name.slice(Math.max(0, file.name.lastIndexOf('.') + 1));
+  if (!['xls', 'xlsx'].includes(suffix.toLowerCase())) {
+    message.error('请上传 xls/xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  if (file.size / 1024 / 1024 > MAX_EXCEL_FILE_SIZE) {
+    message.error(`文件大小不能超过 ${MAX_EXCEL_FILE_SIZE}MB`);
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = file;
+  uploadFile.value = [
+    {
+      name: file.name,
+      originFileObj: file,
+      status: 'done',
+      uid: `${file.name}-${Date.now()}`,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function handleDownloadTemplate() {
+  const api =
+    operation.value === 'card'
+      ? DownloadCardAddPackageTemplate
+      : DownloadPoolAddPackageTemplate;
+  const success = await commonDownloadExcel(api, '', {});
+  if (success) {
+    message.success('下载成功');
+  }
+}
+
+async function loadPaymentContext() {
+  const result =
+    operation.value === 'card'
+      ? await CardAddPackagePaymentContext()
+      : await PoolAddPackagePaymentContext();
+  applyPaymentContext(result);
+}
+
+function applyPaymentContext(result: any, preserveOfflineContract = false) {
+  isTopDept.value = result?.isTopDept === true;
+  availableBalance.value = Number(result?.availableBalance ?? 0);
+  if (!Number.isFinite(availableBalance.value)) {
+    availableBalance.value = 0;
+  }
+  if (!preserveOfflineContract || !isTopDept.value) {
+    offlineContractCompleted.value = false;
+  }
+}
+
+function validateSourceRows(lines: string[]) {
+  if (lines.length === 0) {
+    message.warning(`请先输入${currentConfig.value.targetLabel}`);
+    return false;
+  }
+  for (const [index, line] of lines.entries()) {
+    const fields = parseInputFields(line);
+    if (fields.length !== 1) {
+      message.warning(
+        `第 ${index + 1} 行格式错误，请只输入 ${currentConfig.value.targetLabel}`,
+      );
+      return false;
+    }
+  }
+  return true;
+}
+
+function normalizePrepareResult(
+  result: AddPackagePrepareResult,
+): AddPackagePrepareResult {
+  const snapshot = objectValue(result?.snapshot);
+  const batchInfo = objectValue(result?.batchInfo);
+  const normalized = {
+    ...snapshot,
+    ...batchInfo,
+    ...result,
+  } as AddPackagePrepareResult;
+  normalized.batchNo = String(
+    firstValue(result?.batchNo, batchInfo.batchNo, snapshot.batchNo) ?? '',
+  ).trim();
+  normalized.status = String(
+    firstValue(result?.status, batchInfo.status, snapshot.status) ?? '',
+  );
+  normalized.batchAsyncStatus = numberValue(
+    firstValue(
+      result?.batchAsyncStatus,
+      batchInfo.batchAsyncStatus,
+      snapshot.batchAsyncStatus,
+    ),
+  );
+  normalized.runResult = numberValue(
+    firstValue(result?.runResult, batchInfo.runResult, snapshot.runResult),
+  );
+  normalized.quantity = numberValue(
+    firstValue(result?.quantity, batchInfo.quantity, snapshot.quantity),
+  );
+  normalized.packageCode = String(
+    firstValue(
+      result?.packageCode,
+      batchInfo.packageCode,
+      snapshot.packageCode,
+    ) ?? '',
+  ).trim();
+  normalized.packageName = String(
+    firstValue(
+      result?.packageName,
+      batchInfo.packageName,
+      snapshot.packageName,
+    ) ?? '',
+  ).trim();
+  normalized.flowMb = firstValue(
+    result?.flowMb,
+    batchInfo.flowMb,
+    snapshot.flowMb,
+  ) as number | string | undefined;
+  normalized.unitPrice = firstValue(
+    result?.unitPrice,
+    batchInfo.unitPrice,
+    snapshot.unitPrice,
+  ) as number | string | undefined;
+  normalized.totalAmount = firstValue(
+    result?.totalAmount,
+    batchInfo.totalAmount,
+    snapshot.totalAmount,
+  ) as number | string | undefined;
+  normalized.effectiveMode = normalizeEffectiveMode(
+    firstValue(
+      result?.effectiveMode,
+      batchInfo.effectiveMode,
+      snapshot.effectiveMode,
+    ),
+  );
+  normalized.effectiveModeText =
+    String(
+      firstValue(
+        result?.effectiveModeText,
+        batchInfo.effectiveModeText,
+        snapshot.effectiveModeText,
+      ) ?? '',
+    ).trim() || formatEffectiveMode(normalized.effectiveMode);
+  normalized.effectiveTime = String(
+    firstValue(
+      result?.effectiveTime,
+      batchInfo.effectiveTime,
+      snapshot.effectiveTime,
+    ) ?? '',
+  ).trim();
+  normalized.expectedExpireTime = String(
+    firstValue(
+      result?.expectedExpireTime,
+      batchInfo.expectedExpireTime,
+      snapshot.expectedExpireTime,
+    ) ?? '',
+  ).trim();
+  normalized.paymentAccounts = normalizePaymentAccounts(
+    firstValue(
+      result?.paymentAccounts,
+      batchInfo.paymentAccounts,
+      snapshot.paymentAccounts,
+    ),
+  ) as any;
+  normalized.isTopDept =
+    result?.isTopDept === true ||
+    batchInfo.isTopDept === true ||
+    snapshot.isTopDept === true;
+  normalized.availableBalance = firstValue(
+    result?.availableBalance,
+    batchInfo.availableBalance,
+    snapshot.availableBalance,
+  ) as number | string | undefined;
+  return normalized;
+}
+
+function prepareStatus(result: AddPackagePrepareResult) {
+  const normalized = normalizePrepareResult(result);
+  const status = String(normalized.status ?? '').toLowerCase();
+  if (['failed', 'pending', 'processing', 'success'].includes(status)) {
+    return status;
+  }
+  const asyncStatus = Number(normalized.batchAsyncStatus ?? 0);
+  if (asyncStatus === 3) {
+    return 'success';
+  }
+  if (asyncStatus === 4 || asyncStatus === 5) {
+    return 'failed';
+  }
+  if (asyncStatus === 2) {
+    return 'processing';
+  }
+  return 'pending';
+}
+
+function isPrepareComplete(result: AddPackagePrepareResult) {
+  const quantity = Number(result.quantity ?? 0);
+  const unitPrice = Number(result.unitPrice ?? 0);
+  if (!result.batchNo || quantity <= 0) {
+    return false;
+  }
+  const availablePackages = normalizePackageOptions(
+    firstValue(result.availablePackages, result.packageOptions),
+  );
+  if (availablePackages.length > 0) {
+    return true;
+  }
+  return (
+    Boolean(result.packageCode) && Number.isFinite(unitPrice) && unitPrice >= 0
+  );
+}
+
+async function queryPrepareResult(batchNo: string) {
+  return operation.value === 'card'
+    ? await CardAddPackagePrepareResultApi(batchNo)
+    : await PoolAddPackagePrepareResultApi(batchNo);
+}
+
+async function pollPrepareResult(batchNo: string) {
+  const currentSequence = ++pollSequence;
+  isPolling.value = true;
+  pendingBatchNo.value = batchNo;
+  modalApi.setState({
+    confirmLoading: true,
+    confirmText: '预处理中...',
+    submitting: true,
+  });
+
+  for (let attempt = 0; attempt < POLL_MAX_ATTEMPTS; attempt++) {
+    if (pollSequence !== currentSequence || pendingBatchNo.value !== batchNo) {
+      return;
+    }
+
+    try {
+      const result = await queryPrepareResult(batchNo);
+      if (
+        pollSequence !== currentSequence ||
+        pendingBatchNo.value !== batchNo
+      ) {
+        return;
+      }
+
+      const status = prepareStatus(result);
+      if (status === 'success') {
+        isPolling.value = false;
+        pendingBatchNo.value = null;
+        modalApi.setState({
+          confirmLoading: false,
+          submitting: false,
+        });
+        await handlePrepareSucceeded(result);
+        return;
+      }
+      if (status === 'failed') {
+        isPolling.value = false;
+        pendingBatchNo.value = null;
+        modalApi.setState({
+          confirmLoading: false,
+          confirmText: modalConfirmText(),
+          submitting: false,
+        });
+        handlePrepareFailed(result);
+        return;
+      }
+    } catch {
+      // Keep polling. The next request may succeed after the worker updates the batch.
+    }
+
+    if (attempt < POLL_MAX_ATTEMPTS - 1) {
+      await new Promise((resolve) => setTimeout(resolve, POLL_INTERVAL_MS));
+    }
+  }
+
+  if (pollSequence === currentSequence && pendingBatchNo.value === batchNo) {
+    isPolling.value = false;
+    pendingBatchNo.value = null;
+    modalApi.setState({
+      confirmLoading: false,
+      confirmText: modalConfirmText(),
+      submitting: false,
+    });
+    message.warning(`预处理超时，批次号：${batchNo}`);
+  }
+}
+
+function handlePrepareFailed(result: AddPackagePrepareResult) {
+  const normalized = normalizePrepareResult(result);
+  const batchText = normalized.batchNo ? `，批次号：${normalized.batchNo}` : '';
+  const reasonText = normalized.failReason ? `，${normalized.failReason}` : '';
+  message.warning(
+    `加油包预处理失败${batchText}${reasonText}，请到执行日志查看`,
+  );
+}
+
+async function handlePrepareSucceeded(result: AddPackagePrepareResult) {
+  const batchInfo = normalizePrepareResult(result);
+  if (!isPrepareComplete(batchInfo)) {
+    message.error(
+      `加油包预处理结果异常，批次号：${batchInfo.batchNo || '--'}，请到执行日志查看或重新预处理`,
+    );
+    return;
+  }
+  const availablePackages = normalizePackageOptions(
+    firstValue(batchInfo.availablePackages, batchInfo.packageOptions),
+  );
+  preparedResult.value = batchInfo;
+  packageOptions.value = availablePackages;
+  const preparedPackageCode = String(batchInfo.packageCode ?? '').trim();
+  if (availablePackages.length > 0) {
+    const currentStillAvailable = availablePackages.some(
+      (item) => item.value === selectedPackageCode.value,
+    );
+    selectedPackageCode.value = currentStillAvailable
+      ? selectedPackageCode.value
+      : (availablePackages.find((item) => item.priceAvailable)?.value ??
+        availablePackages[0]?.value ??
+        '');
+  } else {
+    selectedPackageCode.value =
+      preparedPackageCode || selectedPackageCode.value;
+  }
+  effectiveMode.value = normalizeEffectiveMode(batchInfo.effectiveMode);
+  applyPaymentContext(batchInfo, true);
+  setCurrentStep('confirm');
+  message.success('加油包预处理成功');
+}
+
+async function submitInputBatch() {
+  if (isPolling.value) {
+    message.info('预处理中，请稍候');
+    return;
+  }
+  if (!validateSourceRows(targetLines.value)) {
+    return;
+  }
+  const prepare =
+    operation.value === 'card'
+      ? CardAddPackageInputPrepare
+      : PoolAddPackageInputPrepare;
+  const result = await prepare({
+    input: targetCodes.value.join('\n'),
+  });
+  const batchNo = String(result?.batchNo ?? '').trim();
+  if (!batchNo) {
+    message.warning('加油包预处理失败，未获取到批次号');
+    return;
+  }
+  message.info(`预处理已提交，批次号：${batchNo}`);
+  await pollPrepareResult(batchNo);
+}
+
+async function confirmPreparedBatch() {
+  const batchNo = String(preparedResult.value?.batchNo ?? '').trim();
+  if (!batchNo) {
+    message.warning('缺少加油包预处理批次号');
+    return;
+  }
+  const packageCode = String(selectedPackageCode.value).trim();
+  if (!packageCode) {
+    message.warning('请选择加油包套餐');
+    return;
+  }
+  if (packageOptions.value.length > 0) {
+    if (!selectedPackageOption.value) {
+      message.warning('请选择可购加油包套餐');
+      return;
+    }
+    if (!selectedPackageOption.value.priceAvailable) {
+      message.warning(
+        selectedPackageOption.value.priceReason ||
+          '当前套餐暂时无法计算价格，请联系管理员维护定价',
+      );
+      return;
+    }
+  }
+  if (activePaymentMode.value === 'balance' && !preparedBalanceEnough.value) {
+    message.warning('账户余额不足，不能提交加油包采购');
+    return;
+  }
+  if (
+    activePaymentMode.value === 'offline' &&
+    !offlineContractCompleted.value
+  ) {
+    message.warning('请确认线下合同、销售和走账已完成');
+    return;
+  }
+  const confirm =
+    operation.value === 'card'
+      ? CardAddPackageBatchConfirm
+      : PoolAddPackageBatchConfirm;
+  const result = await confirm({
+    batchNo,
+    packageCode,
+    effectiveMode: effectiveMode.value,
+    paymentMode: activePaymentMode.value,
+    offlineContractCompleted: offlineContractCompleted.value,
+  });
+  message.success(
+    `${currentConfig.value.title}批次已提交，批次号：${result?.batchNo ?? batchNo}`,
+  );
+  modalApi.close();
+  resetLocalState();
+}
+
+async function handleExcelSubmit() {
+  if (!importFile.value) {
+    message.warning('请先上传 Excel 文件');
+    return;
+  }
+  const submit =
+    operation.value === 'card'
+      ? CardAddPackageExcelSubmit
+      : PoolAddPackageExcelSubmit;
+  const result = await submit({
+    file: importFile.value,
+    manualConfirm: true,
+  });
+  const batchNo = String(result?.batchNo ?? '').trim();
+  if (!batchNo) {
+    message.warning('加油包预处理失败，未获取到批次号');
+    return;
+  }
+  message.success(
+    `${currentConfig.value.title}预处理已提交，批次号：${batchNo}`,
+  );
+  await pollPrepareResult(batchNo);
+}
+
+async function handleConfirm() {
+  if (isPolling.value) {
+    message.info('预处理中，请稍候');
+    return;
+  }
+  if (currentStep.value === 'confirm') {
+    await confirmPreparedBatch();
+    return;
+  }
+  if (activeTab.value === 'excel') {
+    await handleExcelSubmit();
+    return;
+  }
+  if (currentStep.value === 'source') {
+    await submitInputBatch();
+  }
+}
+
+function handleBackToSource() {
+  clearPreparedContext();
+  setCurrentStep('source');
+}
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: SOURCE_MODAL_CLASS,
+  confirmText: '提交',
+  destroyOnClose: false,
+  async onCancel() {
+    modalApi.close();
+    resetLocalState();
+  },
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, handleConfirm);
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      resetLocalState();
+      return;
+    }
+    updateModalState(currentStep.value);
+    await loadPaymentContext();
+  },
+});
+</script>
+
+<template>
+  <Modal title="加油包">
+    <div class="mb-4 flex flex-wrap items-center gap-4">
+      <RadioGroup
+        v-model:value="operation"
+        button-style="solid"
+        :disabled="isPolling"
+      >
+        <RadioButton value="card">单卡加油包</RadioButton>
+        <RadioButton value="pool">流量池加油包</RadioButton>
+      </RadioGroup>
+    </div>
+
+    <div
+      v-if="isPolling"
+      class="mb-4 flex items-center gap-3 rounded-md border border-[#d9e8ff] bg-[#f0f7ff] px-3 py-2 text-[13px] text-[#1d4ed8] dark:border-[#1f3b57] dark:bg-[#142233] dark:text-[#b7d7ff]"
+    >
+      <Spin size="small" />
+      <div>
+        <div class="font-medium">预处理中，请稍候...</div>
+      </div>
+    </div>
+
+    <CardSourceTabs
+      v-if="currentStep === 'source'"
+      v-model:active-key="activeTab"
+      :show-range="false"
+    >
+      <template #excel>
+        <UploadDragger
+          v-model:file-list="uploadFile"
+          accept=".xlsx,.xls"
+          class="business-acceptance-excel-upload"
+          :before-upload="handleBeforeUpload"
+          :max-count="1"
+          @remove="handleRemove"
+        >
+          <div class="ant-upload-drag-icon flex justify-center">
+            <Inbox />
+          </div>
+          <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+          <p class="ant-upload-hint">{{ currentConfig.uploadHint }}</p>
+        </UploadDragger>
+
+        <div class="mt-3 flex justify-center">
+          <Button :icon="h(DownloadOutlined)" @click="handleDownloadTemplate">
+            下载 Excel 模板
+          </Button>
+        </div>
+      </template>
+
+      <template #input>
+        <div class="flex flex-col gap-4">
+          <Input.TextArea
+            v-model:value="inputText"
+            :auto-size="{ minRows: 8, maxRows: 12 }"
+            :placeholder="currentConfig.sourcePlaceholder"
+          />
+          <div class="text-xs text-gray-500">
+            输入后点击下一步会自动提交异步预处理，校验通过后再选择套餐提交。
+          </div>
+        </div>
+      </template>
+    </CardSourceTabs>
+
+    <template v-else>
+      <div class="flex flex-col gap-4">
+        <div class="flex justify-end">
+          <Button size="small" @click="handleBackToSource">上一步</Button>
+        </div>
+
+        <section
+          v-if="preparedResult"
+          class="addpackage-summary rounded-md border border-[#e5e7eb] bg-[#fafafa] p-4 text-[13px] dark:border-[#333] dark:bg-[#1f1f1f]"
+        >
+          <dl class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            <div class="addpackage-summary-item">
+              <dt>记录数</dt>
+              <dd>{{ preparedQuantity }} 条</dd>
+            </div>
+            <div class="addpackage-summary-item">
+              <dt>生效时间</dt>
+              <dd>{{ selectedEffectiveStartTime }}</dd>
+            </div>
+            <div class="addpackage-summary-item">
+              <dt>过期时间</dt>
+              <dd>{{ selectedEffectiveExpireTime }}</dd>
+            </div>
+            <div class="addpackage-summary-item">
+              <dt>支付方式</dt>
+              <dd>{{ activePaymentModeLabel }}</dd>
+            </div>
+            <div class="addpackage-summary-item">
+              <dt>支付金额</dt>
+              <dd class="text-[#1677ff]">
+                ￥{{ formatAmount(preparedTotalAmount) }}
+              </dd>
+            </div>
+            <div class="addpackage-summary-item">
+              <dt>扣后余额</dt>
+              <dd
+                :class="
+                  activePaymentMode === 'balance' && !preparedBalanceEnough
+                    ? 'text-[#d93026]'
+                    : ''
+                "
+              >
+                {{
+                  activePaymentMode === 'balance'
+                    ? `￥${preparedBalanceAfter}`
+                    : '不扣余额'
+                }}
+              </dd>
+            </div>
+          </dl>
+
+          <div
+            v-if="activePaymentMode === 'balance' && !preparedBalanceEnough"
+            class="mt-3 text-[13px] text-[#d93026]"
+          >
+            账户余额不足，请充值后再提交加油包采购。
+          </div>
+        </section>
+
+        <div class="addpackage-confirm-controls">
+          <div class="mb-2 text-[14px] text-[#374151]">加油包套餐</div>
+          <Select
+            v-if="packageOptions.length > 0"
+            v-model:value="selectedPackageCode"
+            :options="packageOptions"
+            placeholder="请选择加油包套餐"
+            class="w-full"
+            option-filter-prop="label"
+            placement="bottomLeft"
+            show-search
+          />
+          <div v-else class="text-sm font-medium text-gray-700">
+            {{ selectedPackageName }}
+          </div>
+          <div
+            v-if="
+              selectedPackageOption && !selectedPackageOption.priceAvailable
+            "
+            class="mt-2 text-xs text-red-600"
+          >
+            {{
+              selectedPackageOption.priceReason ||
+              '当前套餐暂时无法计算价格，请联系管理员维护定价。'
+            }}
+          </div>
+        </div>
+
+        <div
+          v-if="isTopDept"
+          class="rounded-md border border-gray-200 bg-gray-50 p-4"
+        >
+          <Checkbox v-model:checked="offlineContractCompleted">
+            已确认线下合同、销售和走账均已完成
+          </Checkbox>
+        </div>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<style scoped>
+.business-acceptance-excel-upload :deep(.ant-upload-drag) {
+  height: 160px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag .ant-upload-btn) {
+  padding: 18px 16px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag-icon) {
+  margin-bottom: 8px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-text) {
+  margin-bottom: 4px;
+}
+
+.addpackage-confirm-controls :deep(.ant-select-selector) {
+  border-radius: 2px;
+}
+
+.addpackage-summary-item dt {
+  color: #86909c;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.addpackage-summary-item dd {
+  margin-top: 4px;
+  overflow-wrap: anywhere;
+  color: #111827;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+:deep(.dark) .addpackage-summary-item dd {
+  color: #f2f2f2;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/cancel.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/cancel.vue
new file mode 100644
index 0000000..6a94096
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/cancel.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts" name="BusinessAcceptanceCancel">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type { TSimCardCancelInputSubmitParam, TSimCardCancelSubmitRes } from '#/api/iotlcm/tCommunication/tSimCardCancel/type';
+
+import { h, ref } from 'vue';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import { Alert, Button, message, Upload, UploadDragger } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { DownloadTemplate, ExcelSubmit, InputSubmit } from '#/api/iotlcm/tCommunication/tSimCardCancel';
+import BetterVben from '#/constants/BetterVben';
+import FormOption from '#/constants/FormOption';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import CardSourceTabs from '../components/cardSourceTabs.vue';
+
+const MAX_EXCEL_FILE_SIZE = 50;
+const SOURCE_MODAL_CLASS = 'w-[760px] max-w-[calc(100vw-48px)]';
+
+type CancelTab = 'excel' | 'input';
+
+const activeTab = ref<CancelTab>('excel');
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+
+function showSuccessMessage(res?: TSimCardCancelSubmitRes) {
+  const batchText = res?.batchNo ? `，批次号：${res.batchNo}` : '';
+  message.success(`销户提交成功${batchText}`);
+}
+
+async function handleDownloadTemplate() {
+  const success = await commonDownloadExcel(DownloadTemplate, '', {});
+  if (success) {
+    message.success('下载成功');
+  }
+}
+
+function handleBeforeUpload(file: File) {
+  const rawFile = file as File;
+  const suffix = rawFile.name.slice(
+    Math.max(0, rawFile.name.lastIndexOf('.') + 1),
+  );
+  const isExcel = ['xls', 'xlsx'].includes(suffix.toLowerCase());
+  if (!isExcel) {
+    message.error('请上传 xls/xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  const isLtMaxSize = rawFile.size / 1024 / 1024 <= MAX_EXCEL_FILE_SIZE;
+  if (!isLtMaxSize) {
+    message.error(`文件大小不能超过 ${MAX_EXCEL_FILE_SIZE}MB`);
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = rawFile;
+  uploadFile.value = [
+    {
+      uid: `${rawFile.name}-${Date.now()}`,
+      name: rawFile.name,
+      status: 'done',
+      originFileObj: rawFile,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function handleSubmitExcel() {
+  if (!importFile.value) {
+    message.warning('请先上传 Excel 文件');
+    return;
+  }
+  const res = await ExcelSubmit({
+    file: importFile.value,
+  });
+  showSuccessMessage(res);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleSubmitInput() {
+  const [flag, value] = await BetterVben.function.formValidate(inputFormApi);
+  if (!flag) {
+    return;
+  }
+  const res = await InputSubmit(value as TSimCardCancelInputSubmitParam);
+  showSuccessMessage(res);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleConfirm() {
+  await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+    if (activeTab.value === 'excel') {
+      await handleSubmitExcel();
+      return;
+    }
+    await handleSubmitInput();
+  });
+}
+
+async function handleReset() {
+  modalApi.setState({
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+  activeTab.value = 'excel';
+  uploadFile.value = [];
+  importFile.value = undefined;
+  await inputFormApi.resetForm();
+  modalApi.setState({
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+}
+
+const [InputForm, inputFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'input',
+      label: '批量输入',
+      component: 'Textarea',
+      componentProps: FormOption.Component.Textarea({
+        autoSize: {
+          minRows: 8,
+          maxRows: 12,
+        },
+        placeholder: '每行一个 ICCID',
+        rows: 8,
+      }),
+      rules: z.string().trim().min(1, '请输入批量输入内容'),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: SOURCE_MODAL_CLASS,
+  confirmText: '提交',
+  destroyOnClose: false,
+  async onCancel() {
+    modalApi.close();
+    await handleReset();
+  },
+  async onConfirm() {
+    await handleConfirm();
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="转销户">
+    <Alert
+      class="mb-4"
+      message="仅允许已停机卡进行销户"
+      description="本操作仅执行系统内销户，真实运营商销户需后续人工办理。"
+      show-icon
+      type="warning"
+    />
+    <CardSourceTabs v-model:active-key="activeTab" :show-range="false">
+      <template #excel>
+        <UploadDragger
+          v-model:file-list="uploadFile"
+          accept=".xlsx,.xls"
+          class="business-acceptance-excel-upload"
+          :before-upload="handleBeforeUpload"
+          :max-count="1"
+          @remove="handleRemove"
+        >
+          <div class="ant-upload-drag-icon flex justify-center">
+            <Inbox />
+          </div>
+          <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+          <p class="ant-upload-hint">
+            上传 xlsx/xls 后点击“直接提交”，不再填写页面业务表单
+          </p>
+        </UploadDragger>
+        <div class="mt-3 flex justify-center">
+          <Button :icon="h(DownloadOutlined)" @click="handleDownloadTemplate">
+            下载 Excel 模板
+          </Button>
+        </div>
+      </template>
+
+      <template #input>
+        <InputForm />
+      </template>
+    </CardSourceTabs>
+  </Modal>
+</template>
+
+<style scoped>
+.business-acceptance-excel-upload :deep(.ant-upload-drag) {
+  height: 160px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag .ant-upload-btn) {
+  padding: 18px 16px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag-icon) {
+  margin-bottom: 8px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-text) {
+  margin-bottom: 4px;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/cardBaseQuery.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/cardBaseQuery.vue
new file mode 100644
index 0000000..d336644
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/cardBaseQuery.vue
@@ -0,0 +1,379 @@
+<script setup lang="ts" name="BusinessAcceptanceCardBaseQuery">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type { ExportColumn, QueryMode } from '#/api/iotlcm/tCommunication/tSimCardQuery/type';
+
+import { computed, h, ref, watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal, z } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import {
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  Upload,
+  UploadDragger,
+  message,
+} from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import * as queryApi from '#/api/iotlcm/tCommunication/tSimCardQuery';
+import BetterVben from '#/constants/BetterVben';
+import FormOption from '#/constants/FormOption';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import CardSourceTabs from '../components/cardSourceTabs.vue';
+
+/** 与后端 model.SimCardQueryMaxRows 一致 */
+const MAX_ROWS = 20_000;
+const MAX_EXCEL_FILE_SIZE = 20;
+const SOURCE_MODAL_CLASS = 'w-[860px] max-w-[calc(100vw-48px)]';
+
+const activeTab = ref<QueryMode>('excel');
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+const columnOptions = ref<ExportColumn[]>([]);
+const checkedFields = ref<string[]>([]);
+const submitting = ref(false);
+const columnsLoading = ref(false);
+const columnsError = ref(false);
+
+const dimensionOptions = [
+  { label: 'ICCID', value: 'iccid' },
+  { label: 'MSISDN', value: 'msisdn' },
+  { label: 'IMSI', value: 'imsi' },
+];
+
+// 入口只按 view 判定，模板下载与提交导出沿用同一个权限码：这两个功能的价值就是查询+导出，
+// 拆成 view/template/export 三个码只会导致「少授一个就整个功能不可用」。
+const { hasAccessByCodes } = useAccess();
+const canUse = computed(() =>
+  hasAccessByCodes(['cpm:iot:tSimCardBaseQuery:view']),
+);
+const canDownloadTemplate = canUse;
+
+// 三码是对账锚点，固定导出且不可取消。
+const MANDATORY_FIELDS = ['iccid', 'msisdn', 'imsi'];
+
+const canSubmit = computed(
+  () =>
+    canUse.value &&
+    !submitting.value &&
+    !columnsLoading.value &&
+    !columnsError.value &&
+    checkedFields.value.length > 0,
+);
+
+async function loadColumns() {
+  if (columnsLoading.value) return;
+  columnsLoading.value = true;
+  columnsError.value = false;
+  columnOptions.value = [];
+  checkedFields.value = [];
+  try {
+    const res = await queryApi.BaseColumns();
+    columnOptions.value = (res.items ?? []).filter(
+      (item) => !['queryResult', 'failReason'].includes(item.field),
+    );
+    if (columnOptions.value.length === 0) {
+      throw new Error('未获取到可选导出列');
+    }
+    checkedFields.value = columnOptions.value.map((item) => item.field);
+  } catch {
+    columnsError.value = true;
+    message.warning('获取可选导出列失败，请重试后再提交');
+  } finally {
+    columnsLoading.value = false;
+  }
+}
+
+watch(canSubmit, (enabled) => {
+  modalApi.setState({ confirmDisabled: !enabled });
+});
+
+function handleBeforeUpload(file: File) {
+  const suffix = file.name.slice(Math.max(0, file.name.lastIndexOf('.') + 1));
+  if (suffix.toLowerCase() !== 'xlsx') {
+    message.error('请上传 xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  if (file.size / 1024 / 1024 > MAX_EXCEL_FILE_SIZE) {
+    message.error(`文件大小不能超过 ${MAX_EXCEL_FILE_SIZE}MB`);
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = file;
+  uploadFile.value = [
+    {
+      uid: `${file.name}-${Date.now()}`,
+      name: file.name,
+      status: 'done',
+      originFileObj: file,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function handleDownloadTemplate() {
+  if (!canDownloadTemplate.value) {
+    message.warning('没有下载模板权限');
+    return;
+  }
+  const success = await commonDownloadExcel(
+    queryApi.DownloadBaseTemplate,
+    '',
+    {},
+  );
+  if (success) {
+    message.success('下载成功');
+  }
+}
+
+async function handleConfirm() {
+  if (submitting.value) return;
+  if (!canSubmit.value) {
+    message.warning('请先加载并勾选至少一个导出字段');
+    return;
+  }
+  submitting.value = true;
+  try {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      // 三码必须出现在导出列里：即使 CheckboxGroup 被清空也补回来（后端同样会强制补）。
+      const picked = columnOptions.value.filter((item) =>
+        checkedFields.value.includes(item.field),
+      );
+      const columns = [
+        ...columnOptions.value.filter((item) =>
+          MANDATORY_FIELDS.includes(item.field),
+        ),
+        ...picked.filter(
+          (item) => !MANDATORY_FIELDS.includes(item.field),
+        ),
+      ];
+      if (activeTab.value === 'excel') {
+        if (!importFile.value) {
+          message.warning('请先上传 Excel 文件');
+          return;
+        }
+        onSubmitSuccess(await queryApi.BaseExport({
+          mode: 'excel', file: importFile.value, exportColumns: columns,
+        }));
+        return;
+      }
+      if (activeTab.value === 'input') {
+        const [valid, value] = await BetterVben.function.formValidate(inputFormApi);
+        if (!valid) return;
+        const text = String(value.input ?? '').trim();
+        const lines = text.split(/\r?\n/).filter((line) => line.trim());
+        if (!lines.length || lines.length > MAX_ROWS) {
+          message.warning(`单次请输入 1 至 ${MAX_ROWS} 条非空记录`);
+          return;
+        }
+        onSubmitSuccess(await queryApi.BaseExport({
+          mode: 'input', batchInput: text, exportColumns: columns,
+        }));
+        return;
+      }
+      if (activeTab.value === 'range') {
+        const [valid, value] = await BetterVben.function.formValidate(rangeFormApi);
+        if (!valid) return;
+        const startNum = String(value.startNum ?? '').trim();
+        const endNum = String(value.endNum ?? '').trim();
+        if (!/^\d+$/.test(startNum) || !/^\d+$/.test(endNum) ||
+            startNum.length !== endNum.length || startNum > endNum) {
+          message.warning('起止号码必须为等长数字，且起始号码不能大于结束号码');
+          return;
+        }
+        onSubmitSuccess(await queryApi.BaseExport({
+          mode: 'range', dimension: String(value.dimension),
+          startNum, endNum, exportColumns: columns,
+        }));
+      }
+    });
+  } finally {
+    submitting.value = false;
+    modalApi.setState({ confirmLoading: false, submitting: false, confirmDisabled: !canSubmit.value });
+  }
+}
+
+function onSubmitSuccess(res?: { taskNo?: string; total?: number }) {
+  window.dispatchEvent(new CustomEvent('iotlcm:export-submitted'));
+  const batchText = res?.taskNo ? `，任务编号：${res.taskNo}` : '';
+  // 号段/按公司模式提交时条数未知（后端返回 -1），此时不显示预计行数
+  const totalText =
+    typeof res?.total === 'number' && res.total > 0
+      ? `，预计 ${res.total} 行`
+      : '';
+  message.success(`导出任务已提交${batchText}${totalText}，请到下载中心查看`);
+  modalApi.close();
+  handleReset();
+}
+
+async function handleReset() {
+  activeTab.value = 'excel';
+  uploadFile.value = [];
+  importFile.value = undefined;
+  await inputFormApi.resetForm();
+  await rangeFormApi.resetForm();
+  modalApi.setState({
+    confirmDisabled: false,
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+}
+
+const [InputForm, inputFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'input',
+      label: '批量输入',
+      component: 'Textarea',
+      componentProps: FormOption.Component.Textarea({
+        autoSize: { minRows: 8, maxRows: 12 },
+        placeholder: `每行填写 ICCID，或 ICCID MSISDN IMSI（单次最多 ${MAX_ROWS} 条）`,
+        rows: 8,
+      }),
+      rules: z.string().trim().min(1, '请输入批量输入内容'),
+    },
+  ],
+});
+
+const [RangeForm, rangeFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'dimension',
+      label: '号码维度',
+      component: 'Select',
+      componentProps: { options: dimensionOptions, placeholder: '请选择号码维度' },
+      rules: z.string().min(1, '请选择号码维度'),
+    },
+    {
+      fieldName: 'startNum',
+      label: '起始号码',
+      component: 'Input',
+      componentProps: { placeholder: '请输入起始号码' },
+      rules: z.string().trim().min(1, '请输入起始号码'),
+    },
+    {
+      fieldName: 'endNum',
+      label: '结束号码',
+      component: 'Input',
+      componentProps: { placeholder: '请输入结束号码' },
+      rules: z.string().trim().min(1, '请输入结束号码'),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: SOURCE_MODAL_CLASS,
+  confirmText: '提交导出',
+  destroyOnClose: false,
+  async onCancel() {
+    modalApi.close();
+    await handleReset();
+  },
+  async onConfirm() {
+    await handleConfirm();
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+      return;
+    }
+    activeTab.value = 'excel';
+    modalApi.setState({ confirmDisabled: true });
+    await loadColumns();
+    modalApi.setState({ confirmDisabled: !canSubmit.value });
+  },
+});
+</script>
+
+<template>
+  <Modal title="卡基础信息查询">
+    <div class="mb-4 text-[13px] leading-[20px] text-[#6b7280] dark:text-[#9ca3af]">
+      ICCID、MSISDN、IMSI 任填其一；同一行填多个值时须属于同一张卡。重复卡号自动合并。
+    </div>
+
+    <div class="mb-4 rounded-md border border-[#e5e7eb] p-3 dark:border-[#2f2f2f]">
+      <div class="mb-2 text-[13px] font-[600]">导出列（至少勾选一项）</div>
+      <div v-if="columnOptions.length === 0" class="text-[13px] text-[#9ca3af]">
+        加载中…
+      </div>
+      <div v-else>
+        <CheckboxGroup v-model:value="checkedFields">
+          <div class="grid grid-cols-2 gap-x-2 gap-y-1 sm:grid-cols-3 lg:grid-cols-4">
+            <Checkbox
+              v-for="column in columnOptions"
+              :key="column.field"
+              :value="column.field"
+              :disabled="MANDATORY_FIELDS.includes(column.field)"
+              class="text-[13px]"
+            >
+              {{ column.label }}
+              <span
+                v-if="MANDATORY_FIELDS.includes(column.field)"
+                class="text-[11px] text-[#9ca3af]"
+              >必选</span>
+            </Checkbox>
+          </div>
+        </CheckboxGroup>
+      </div>
+    </div>
+
+    <CardSourceTabs v-model:active-key="activeTab" :show-range="true">
+      <template #excel>
+        <UploadDragger
+          v-model:file-list="uploadFile"
+          accept=".xlsx"
+          class="business-acceptance-excel-upload"
+          :before-upload="handleBeforeUpload"
+          :max-count="1"
+          @remove="handleRemove"
+        >
+          <div class="ant-upload-drag-icon flex justify-center">
+            <Inbox />
+          </div>
+          <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+          <p class="ant-upload-hint">
+            模板中的 ICCID、MSISDN、IMSI 任填其一，ICCID 建议填写<br />
+            单次最多导入 {{ MAX_ROWS }} 条，超出请拆分后分批导入
+          </p>
+        </UploadDragger>
+
+        <div v-if="canDownloadTemplate" class="mt-3 flex justify-center">
+          <Button :icon="h(DownloadOutlined)" @click="handleDownloadTemplate">
+            下载 Excel 模板
+          </Button>
+        </div>
+      </template>
+
+      <template #input>
+        <InputForm />
+      </template>
+
+      <template #range>
+        <RangeForm />
+      </template>
+    </CardSourceTabs>
+  </Modal>
+</template>
+
+<style scoped>
+.business-acceptance-excel-upload :deep(.ant-upload-drag) {
+  height: 160px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag .ant-upload-btn) {
+  padding: 18px 16px;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/change.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/change.vue
new file mode 100644
index 0000000..3c92c24
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/change.vue
@@ -0,0 +1,970 @@
+<script setup lang="ts" name="BusinessAcceptanceChange">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type {
+  TSimCardChangeBatchPrepareRes,
+  TSimCardChangeBatchPrepareResult,
+  TSimCardChangeBatchSubmitParam,
+  TSimCardChangeInputPrepareParam,
+  TSimCardChangeOptionsRes,
+  TSimCardChangePackageOption,
+  TSimCardChangeRangePrepareParam,
+} from '#/api/iotlcm/tCommunication/tSimCardChange/type';
+
+import { computed, h, ref, watch } from 'vue';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import { Button, message, Upload, UploadDragger } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  BatchSubmit,
+  DownloadTemplate,
+  ExcelSubmit,
+  InputOptions,
+  InputPrepare,
+  PrepareResult,
+  RangeOptions,
+  RangePrepare,
+} from '#/api/iotlcm/tCommunication/tSimCardChange';
+import BetterVben from '#/constants/BetterVben';
+import FormOption from '#/constants/FormOption';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import CardSourceTabs from '../components/cardSourceTabs.vue';
+
+const MAX_EXCEL_FILE_SIZE = 50;
+const SOURCE_MODAL_CLASS = 'w-[760px] max-w-[calc(100vw-48px)]';
+const DETAIL_MODAL_CLASS = 'w-[1200px] max-w-[100vw]';
+
+const POLL_INTERVAL_MS = 2000;
+const POLL_MAX_ATTEMPTS = 30;
+
+type ChangeTab = 'excel' | 'input' | 'range';
+type ChangeStep = 'business' | 'confirm' | 'source';
+type ChangeBusinessPayload = {
+  durationMonths: number;
+  effectiveMode: TSimCardChangeInputPrepareParam['effectiveMode'];
+  giftDurationMonths?: number;
+  newPackageCode: string;
+  offlineContractCompleted: boolean;
+};
+type ChangeRangeSourcePayload = Pick<
+  TSimCardChangeRangePrepareParam,
+  | 'endIccid'
+  | 'endImsi'
+  | 'endMsisdn'
+  | 'startIccid'
+  | 'startImsi'
+  | 'startMsisdn'
+>;
+
+const effectiveModeOptions = [
+  { label: '立即生效', value: 'immediate' },
+  { label: '次月生效', value: 'next_month' },
+];
+
+const currentStep = ref<ChangeStep>('source');
+const activeTab = ref<ChangeTab>('excel');
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+const sourceInput = ref('');
+const sourceRange = ref<ChangeRangeSourcePayload>();
+const preparedResult = ref<TSimCardChangeBatchPrepareRes>();
+const pendingSubmitPayload = ref<TSimCardChangeBatchSubmitParam>();
+const changeOptions = ref<TSimCardChangeOptionsRes>();
+const currentModalClass = computed(() =>
+  currentStep.value === 'source' ? SOURCE_MODAL_CLASS : DETAIL_MODAL_CLASS,
+);
+const packageOptions = computed(() =>
+  (changeOptions.value?.packages ?? []).map((item) => ({
+    label: formatPackageOptionLabel(item),
+    value: item.packageCode,
+  })),
+);
+let pollSequence = 0;
+const isPolling = ref(false);
+const pendingBatchNo = ref<string | null>(null);
+
+function objectValue(value: unknown): Record<string, any> {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, any>)
+    : {};
+}
+
+function numberValue(value: unknown): number | undefined {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+function boolValue(value: unknown): boolean {
+  return value === true || value === 'true' || value === 1 || value === '1';
+}
+
+function effectiveModeValue(
+  value: unknown,
+): ChangeBusinessPayload['effectiveMode'] {
+  return value === 'next_month' ? 'next_month' : 'immediate';
+}
+
+function normalizePrepareResult(
+  result: TSimCardChangeBatchPrepareResult,
+): TSimCardChangeBatchPrepareRes {
+  const snapshot = objectValue(result.snapshot);
+  const batchInfo = objectValue(result.batchInfo);
+  const normalized: TSimCardChangeBatchPrepareRes = {
+    ...snapshot,
+    ...batchInfo,
+    ...result,
+    batchNo: String(
+      result.batchNo ?? batchInfo.batchNo ?? snapshot.batchNo ?? '',
+    ).trim(),
+    status: String(result.status ?? batchInfo.status ?? snapshot.status ?? ''),
+  };
+
+  normalized.total = numberValue(
+    result.total ?? batchInfo.total ?? snapshot.total,
+  );
+  normalized.validCount = numberValue(
+    result.validCount ??
+      result.successCount ??
+      batchInfo.validCount ??
+      batchInfo.successCount ??
+      snapshot.validCount ??
+      snapshot.successCount,
+  );
+  normalized.failCount = numberValue(
+    result.failCount ?? batchInfo.failCount ?? snapshot.failCount,
+  );
+
+  return normalized;
+}
+
+function prepareSubmitPayload(
+  batchInfo: TSimCardChangeBatchPrepareRes,
+  fallback?: Partial<TSimCardChangeBatchSubmitParam>,
+): TSimCardChangeBatchSubmitParam {
+  return {
+    batchNo: batchInfo.batchNo,
+    durationMonths:
+      numberValue(fallback?.durationMonths ?? batchInfo.durationMonths) ?? 0,
+    effectiveMode: effectiveModeValue(
+      fallback?.effectiveMode ?? batchInfo.effectiveMode,
+    ),
+    giftDurationMonths:
+      numberValue(
+        fallback?.giftDurationMonths ?? batchInfo.giftDurationMonths,
+      ) ?? 0,
+    newPackageCode: String(
+      fallback?.newPackageCode ??
+        batchInfo.newPackageCode ??
+        batchInfo.packageCode ??
+        '',
+    ).trim(),
+    offlineContractCompleted: boolValue(
+      fallback?.offlineContractCompleted ?? batchInfo.offlineContractCompleted,
+    ),
+  };
+}
+
+function isChangePrepareComplete(result?: TSimCardChangeBatchPrepareRes) {
+  if (!result?.batchNo) {
+    return false;
+  }
+  const quantity = Number(
+    result.quantity ?? result.validCount ?? result.total ?? 0,
+  );
+  const unitPrice = Number(result.changeUnitPrice);
+  return (
+    quantity > 0 &&
+    Boolean(result.oldPackageCode || result.oldPackageName) &&
+    Boolean(
+      result.newPackageCode || result.packageCode || result.packageName,
+    ) &&
+    Number.isFinite(unitPrice) &&
+    unitPrice >= 0
+  );
+}
+
+async function handlePrepareIncomplete(result: TSimCardChangeBatchPrepareRes) {
+  const batchNo = result.batchNo || pendingBatchNo.value || '';
+  message.error(
+    `变更套餐预处理结果异常，批次号：${batchNo || '--'}，请到执行日志查看或重新预处理`,
+  );
+  modalApi.close();
+  await handleReset();
+}
+
+async function pollPrepareResult(
+  batchNo: string,
+  onSuccess: (result: TSimCardChangeBatchPrepareResult) => Promise<void> | void,
+  onFailed: (result: TSimCardChangeBatchPrepareResult) => Promise<void> | void,
+) {
+  const currentSequence = ++pollSequence;
+  isPolling.value = true;
+  pendingBatchNo.value = batchNo;
+
+  for (let attempt = 0; attempt < POLL_MAX_ATTEMPTS; attempt++) {
+    if (pollSequence !== currentSequence || !pendingBatchNo.value) {
+      return;
+    }
+
+    try {
+      const result = await PrepareResult(batchNo);
+
+      if (
+        pollSequence !== currentSequence ||
+        pendingBatchNo.value !== batchNo
+      ) {
+        return;
+      }
+
+      if (result.status === 'success') {
+        isPolling.value = false;
+        pendingBatchNo.value = null;
+        await onSuccess(result);
+        return;
+      }
+
+      if (result.status === 'failed') {
+        isPolling.value = false;
+        pendingBatchNo.value = null;
+        await onFailed(result);
+        return;
+      }
+    } catch {
+      // continue polling on error
+    }
+
+    if (attempt < POLL_MAX_ATTEMPTS - 1) {
+      await new Promise((resolve) => setTimeout(resolve, POLL_INTERVAL_MS));
+    }
+  }
+
+  if (pollSequence === currentSequence && pendingBatchNo.value === batchNo) {
+    isPolling.value = false;
+    pendingBatchNo.value = null;
+    message.warning(`预处理超时，批次号：${batchNo}`);
+  }
+}
+
+function formatEffectiveMode(value?: string) {
+  return (
+    effectiveModeOptions.find((item) => item.value === value)?.label ||
+    value ||
+    '--'
+  );
+}
+
+function formatFlowMb(value?: number) {
+  const flow = Number(value);
+  if (!Number.isFinite(flow) || flow <= 0) {
+    return '';
+  }
+  if (flow >= 1024 && flow % 1024 === 0) {
+    return `${flow / 1024}GB`;
+  }
+  return `${flow}MB`;
+}
+
+function formatPackageOptionLabel(item: TSimCardChangePackageOption) {
+  const code = String(item.packageCode ?? '').trim();
+  const name = String(item.packageName ?? '').trim();
+  const flow = formatFlowMb(item.flowMb);
+  return [name || code, code && name ? code : '', flow].filter(Boolean).join(' / ');
+}
+
+function findPackageOption(packageCode?: string) {
+  const code = String(packageCode ?? '').trim();
+  if (!code) {
+    return undefined;
+  }
+  return (changeOptions.value?.packages ?? []).find(
+    (item) => String(item.packageCode ?? '').trim() === code,
+  );
+}
+
+function durationSelectOptions(packageCode?: string) {
+  const options = findPackageOption(packageCode)?.renewableDurationOptions ?? [];
+  return options.map((value) => ({
+    label: `${value}个月`,
+    value,
+  }));
+}
+
+async function refreshBusinessFormOptions(selectedPackageCode?: string) {
+  const firstPackageCode = packageOptions.value[0]?.value;
+  const packageCode = String(selectedPackageCode || firstPackageCode || '').trim();
+  const durations = durationSelectOptions(packageCode);
+  businessFormApi.updateSchema([
+    {
+      fieldName: 'newPackageCode',
+      componentProps: {
+        allowClear: false,
+        optionFilterProp: 'label',
+        options: packageOptions.value,
+        placeholder:
+          packageOptions.value.length > 0
+            ? '请选择新套餐'
+            : '当前套餐暂无可变更套餐',
+        showSearch: true,
+        onChange: (value: string) => {
+          void refreshBusinessFormOptions(value);
+        },
+      },
+    },
+    {
+      fieldName: 'durationMonths',
+      componentProps: {
+        disabled: durations.length === 0,
+        options: durations,
+        placeholder: durations.length > 0 ? '请选择购买时长' : '套餐未配置可用时长',
+      },
+    },
+  ]);
+  await businessFormApi.setValues({
+    durationMonths: durations[0]?.value,
+    newPackageCode: packageCode || undefined,
+  });
+}
+
+function getModalState(step: ChangeStep = currentStep.value) {
+  let confirmText = '下一步';
+  if (step === 'confirm') {
+    confirmText = '确认变更';
+  } else if (step === 'source' && activeTab.value === 'excel') {
+    confirmText = '提交';
+  }
+
+  return {
+    class: step === 'source' ? SOURCE_MODAL_CLASS : DETAIL_MODAL_CLASS,
+    confirmText,
+  };
+}
+
+function updateModalState(step: ChangeStep = currentStep.value) {
+  modalApi.setState(getModalState(step));
+}
+
+async function setCurrentStep(step: ChangeStep) {
+  currentStep.value = step;
+  updateModalState(step);
+}
+
+function handleBeforeUpload(file: File) {
+  const rawFile = file as File;
+  const suffix = rawFile.name.slice(
+    Math.max(0, rawFile.name.lastIndexOf('.') + 1),
+  );
+  const isExcel = ['xls', 'xlsx'].includes(suffix.toLowerCase());
+  if (!isExcel) {
+    message.error('请上传 xls/xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  const isLtMaxSize = rawFile.size / 1024 / 1024 <= MAX_EXCEL_FILE_SIZE;
+  if (!isLtMaxSize) {
+    message.error(`文件大小不能超过 ${MAX_EXCEL_FILE_SIZE}MB`);
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = rawFile;
+  uploadFile.value = [
+    {
+      uid: `${rawFile.name}-${Date.now()}`,
+      name: rawFile.name,
+      status: 'done',
+      originFileObj: rawFile,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function handleDownloadTemplate() {
+  const success = await commonDownloadExcel(DownloadTemplate, '', {});
+  if (success) {
+    message.success('下载成功');
+  }
+}
+
+async function resetToSourceStep() {
+  await setCurrentStep('source');
+}
+
+async function handleBackToSource() {
+  await resetToSourceStep();
+  preparedResult.value = undefined;
+  pendingSubmitPayload.value = undefined;
+  await inputSourceFormApi.setValues({
+    input: sourceInput.value,
+  });
+  if (sourceRange.value) {
+    await rangeSourceFormApi.setValues(sourceRange.value);
+  }
+}
+
+async function handleBackToBusiness() {
+  preparedResult.value = undefined;
+  pendingSubmitPayload.value = undefined;
+  await setCurrentStep('business');
+}
+
+async function handleReset() {
+  pollSequence++;
+  isPolling.value = false;
+  pendingBatchNo.value = null;
+  modalApi.setState({
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+  currentStep.value = 'source';
+  activeTab.value = 'excel';
+  uploadFile.value = [];
+  importFile.value = undefined;
+  sourceInput.value = '';
+  sourceRange.value = undefined;
+  preparedResult.value = undefined;
+  pendingSubmitPayload.value = undefined;
+  changeOptions.value = undefined;
+  await inputSourceFormApi.resetForm();
+  await rangeSourceFormApi.resetForm();
+  await businessFormApi.resetForm();
+  await businessFormApi.setValues({
+    durationMonths: undefined,
+    effectiveMode: 'immediate',
+    giftDurationMonths: 0,
+    newPackageCode: undefined,
+    offlineContractCompleted: false,
+  });
+  updateModalState('source');
+  modalApi.setState({
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+}
+
+async function handlePrepareFailed(
+  pollResult: TSimCardChangeBatchPrepareResult,
+) {
+  const batchText = pollResult.batchNo ? `，批次号：${pollResult.batchNo}` : '';
+  const reasonText = pollResult.failReason ? `，${pollResult.failReason}` : '';
+  message.warning(
+    `变更套餐预处理失败${batchText}${reasonText}，请到执行日志查看`,
+  );
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleSubmitExcel() {
+  if (!importFile.value) {
+    message.warning('请先上传 Excel 文件');
+    return;
+  }
+  const result = await ExcelSubmit({
+    file: importFile.value,
+  });
+  const batchNo = result?.batchNo;
+  if (!batchNo) {
+    message.error('Excel 提交失败，未获取到批次号');
+    return;
+  }
+  message.info(`预处理已提交，批次号：${batchNo}`);
+
+  pollPrepareResult(
+    batchNo,
+    async (pollResult) => {
+      const batchInfo = normalizePrepareResult(pollResult);
+      if (!isChangePrepareComplete(batchInfo)) {
+        await handlePrepareIncomplete(batchInfo);
+        return;
+      }
+      pollResult.batchInfo = batchInfo;
+      if (pollResult.batchInfo) {
+        preparedResult.value = batchInfo;
+        pendingSubmitPayload.value = prepareSubmitPayload(batchInfo);
+        currentStep.value = 'confirm';
+        updateModalState('confirm');
+        message.success('变更套餐预处理成功');
+      }
+    },
+    handlePrepareFailed,
+  );
+}
+
+function normalizeBusinessValue(
+  value: Record<string, any>,
+): ChangeBusinessPayload {
+  return {
+    durationMonths: Number(value.durationMonths ?? 0),
+    effectiveMode: value.effectiveMode,
+    giftDurationMonths: Number(value.giftDurationMonths ?? 0),
+    newPackageCode: String(value.newPackageCode ?? '').trim(),
+    offlineContractCompleted: value.offlineContractCompleted === true,
+  };
+}
+
+async function handleSubmitInputSource() {
+  const [flag, value] =
+    await BetterVben.function.formValidate(inputSourceFormApi);
+  if (!flag) {
+    return;
+  }
+  sourceInput.value = String(value.input ?? '').trim();
+  changeOptions.value = await InputOptions({ input: sourceInput.value });
+  if ((changeOptions.value?.packages?.length ?? 0) === 0) {
+    message.warning('当前套餐暂无可变更套餐');
+    return;
+  }
+  await refreshBusinessFormOptions();
+  await setCurrentStep('business');
+}
+
+async function handleSubmitRangeSource() {
+  const [flag, value] =
+    await BetterVben.function.formValidate(rangeSourceFormApi);
+  if (!flag) {
+    return;
+  }
+  sourceRange.value = {
+    endIccid: String(value.endIccid ?? '').trim(),
+    endImsi: String(value.endImsi ?? '').trim(),
+    endMsisdn: String(value.endMsisdn ?? '').trim(),
+    startIccid: String(value.startIccid ?? '').trim(),
+    startImsi: String(value.startImsi ?? '').trim(),
+    startMsisdn: String(value.startMsisdn ?? '').trim(),
+  };
+  changeOptions.value = await RangeOptions(sourceRange.value);
+  if ((changeOptions.value?.packages?.length ?? 0) === 0) {
+    message.warning('当前套餐暂无可变更套餐');
+    return;
+  }
+  await refreshBusinessFormOptions();
+  await setCurrentStep('business');
+}
+
+async function handleSubmitSource() {
+  if (activeTab.value === 'range') {
+    await handleSubmitRangeSource();
+    return;
+  }
+  await handleSubmitInputSource();
+}
+
+async function handlePrepareBusiness() {
+  if (activeTab.value === 'input' && !sourceInput.value) {
+    message.warning('请先输入需要变更套餐的卡信息');
+    await resetToSourceStep();
+    return;
+  }
+  if (activeTab.value === 'range' && !sourceRange.value) {
+    message.warning('请先输入需要变更套餐的连号信息');
+    await resetToSourceStep();
+    return;
+  }
+
+  const [flag, value] = await BetterVben.function.formValidate(businessFormApi);
+  if (!flag) {
+    return;
+  }
+
+  const businessPayload = normalizeBusinessValue(value);
+  const prepareResult =
+    activeTab.value === 'range' && sourceRange.value
+      ? await RangePrepare({
+          ...businessPayload,
+          ...sourceRange.value,
+        })
+      : await InputPrepare({
+          ...businessPayload,
+          input: sourceInput.value,
+        });
+  const batchNo = prepareResult?.batchNo;
+  if (!batchNo) {
+    message.warning('变更套餐预处理失败，未获取到批次号');
+    return;
+  }
+  message.info(`预处理已提交，批次号：${batchNo}`);
+
+  pollPrepareResult(
+    batchNo,
+    async (pollResult) => {
+      const batchInfo = normalizePrepareResult(pollResult);
+      if (!isChangePrepareComplete(batchInfo)) {
+        await handlePrepareIncomplete(batchInfo);
+        return;
+      }
+      pollResult.batchInfo = batchInfo;
+      if (pollResult.batchInfo) {
+        preparedResult.value = batchInfo;
+        pendingSubmitPayload.value = prepareSubmitPayload(
+          batchInfo,
+          businessPayload,
+        );
+        currentStep.value = 'confirm';
+        updateModalState('confirm');
+        message.success('变更套餐预处理成功');
+      }
+    },
+    handlePrepareFailed,
+  );
+}
+
+async function handleSubmitPreparedBatch() {
+  if (!pendingSubmitPayload.value?.batchNo) {
+    message.warning('缺少变更套餐预处理批次号');
+    return;
+  }
+  const result = await BatchSubmit(pendingSubmitPayload.value);
+  message.success(
+    `变更套餐已提交，批次号：${result?.batchNo ?? pendingSubmitPayload.value.batchNo}`,
+  );
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleModalConfirm() {
+  if (currentStep.value === 'confirm') {
+    await handleSubmitPreparedBatch();
+    return;
+  }
+  if (currentStep.value === 'business') {
+    await handlePrepareBusiness();
+    return;
+  }
+  if (activeTab.value === 'excel') {
+    await handleSubmitExcel();
+    return;
+  }
+  await handleSubmitSource();
+}
+
+const [InputSourceForm, inputSourceFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'input',
+      label: '批量输入',
+      component: 'Textarea',
+      componentProps: FormOption.Component.Textarea({
+        autoSize: {
+          minRows: 8,
+          maxRows: 12,
+        },
+        placeholder: '每行一个 ICCID',
+        rows: 8,
+      }),
+      rules: z.string().trim().min(1, '请输入批量输入内容'),
+    },
+  ],
+});
+
+const [RangeSourceForm, rangeSourceFormApi] = useVbenForm({
+  ...BetterVben.form.grid,
+  schema: [
+    {
+      fieldName: 'startIccid',
+      label: '起始ICCID',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入起始 ICCID',
+      },
+      rules: z.string().trim().min(1, '请输入起始 ICCID'),
+    },
+    {
+      fieldName: 'endIccid',
+      label: '结束ICCID',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入结束 ICCID',
+      },
+      rules: z.string().trim().min(1, '请输入结束 ICCID'),
+    },
+    {
+      fieldName: 'startMsisdn',
+      label: '起始MSISDN',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入起始 MSISDN',
+      },
+      rules: z.string().trim().min(1, '请输入起始 MSISDN'),
+    },
+    {
+      fieldName: 'endMsisdn',
+      label: '结束MSISDN',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入结束 MSISDN',
+      },
+      rules: z.string().trim().min(1, '请输入结束 MSISDN'),
+    },
+    {
+      fieldName: 'startImsi',
+      label: '起始IMSI',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入起始 IMSI',
+      },
+      rules: z.string().trim().min(1, '请输入起始 IMSI'),
+    },
+    {
+      fieldName: 'endImsi',
+      label: '结束IMSI',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入结束 IMSI',
+      },
+      rules: z.string().trim().min(1, '请输入结束 IMSI'),
+    },
+  ],
+});
+
+const [BusinessForm, businessFormApi] = useVbenForm({
+  ...BetterVben.form.grid,
+  schema: [
+    {
+      fieldName: 'newPackageCode',
+      label: '新套餐',
+      component: 'Select',
+      componentProps: {
+        allowClear: false,
+        optionFilterProp: 'label',
+        options: packageOptions.value,
+        placeholder:
+          packageOptions.value.length > 0
+            ? '请选择新套餐'
+            : '当前套餐暂无可变更套餐',
+        showSearch: true,
+      },
+      rules: z.string().trim().min(1, '请选择新套餐'),
+    },
+    {
+      fieldName: 'durationMonths',
+      label: '购买时长（月）',
+      component: 'Select',
+      componentProps: {
+        allowClear: false,
+        optionFilterProp: 'label',
+        options: [],
+        placeholder: '请选择购买时长',
+      },
+      rules: z.number().min(1, '购买时长必须大于 0'),
+    },
+    {
+      fieldName: 'giftDurationMonths',
+      label: '赠送时长（月）',
+      component: 'InputNumber',
+      defaultValue: 0,
+      componentProps: {
+        min: 0,
+        precision: 0,
+        placeholder: '请输入赠送时长',
+      },
+      rules: z.number().min(0, '赠送时长不能小于 0').optional(),
+    },
+    {
+      fieldName: 'effectiveMode',
+      label: '生效方式',
+      component: 'Select',
+      defaultValue: 'immediate',
+      componentProps: {
+        options: effectiveModeOptions,
+        placeholder: '请选择生效方式',
+      },
+      rules: z.enum(['immediate', 'next_month']),
+    },
+    {
+      fieldName: 'offlineContractCompleted',
+      label: '线下确认',
+      component: 'Checkbox',
+      defaultValue: false,
+      formItemClass: 'col-span-12',
+      renderComponentContent: () => ({
+        default: () => '线下合同、销售和走账已完成',
+      }),
+      rules: z.boolean().refine((value) => value === true, {
+        message: '请确认线下业务已完成',
+      }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: SOURCE_MODAL_CLASS,
+  confirmText: '提交',
+  destroyOnClose: false,
+  async onCancel() {
+    modalApi.close();
+    await handleReset();
+  },
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleModalConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+      return;
+    }
+    await handleReset();
+  },
+});
+
+watch(activeTab, async () => {
+  await resetToSourceStep();
+  preparedResult.value = undefined;
+  pendingSubmitPayload.value = undefined;
+});
+</script>
+
+<template>
+  <Modal :class="currentModalClass" title="变更套餐">
+    <div class="flex flex-col gap-3">
+      <template v-if="currentStep === 'source'">
+        <CardSourceTabs v-model:active-key="activeTab">
+          <template #excel>
+            <UploadDragger
+              v-model:file-list="uploadFile"
+              accept=".xlsx,.xls"
+              class="business-acceptance-excel-upload"
+              :before-upload="handleBeforeUpload"
+              :max-count="1"
+              @remove="handleRemove"
+            >
+              <div class="ant-upload-drag-icon flex justify-center">
+                <Inbox />
+              </div>
+              <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+              <p class="ant-upload-hint">
+                上传 xlsx/xls 后点击“直接提交”，不再填写页面业务表单
+              </p>
+            </UploadDragger>
+            <div class="mt-3 flex justify-center">
+              <Button
+                :icon="h(DownloadOutlined)"
+                @click="handleDownloadTemplate"
+              >
+                下载 Excel 模板
+              </Button>
+            </div>
+          </template>
+
+          <template #input>
+            <InputSourceForm />
+          </template>
+
+          <template #range>
+            <RangeSourceForm />
+          </template>
+        </CardSourceTabs>
+      </template>
+
+      <template v-else-if="currentStep === 'business'">
+        <div class="flex items-center justify-between">
+          <span class="font-medium text-[#111827] dark:text-[#f2f2f2]">
+            变更业务信息
+          </span>
+          <Button size="small" @click="handleBackToSource">上一步</Button>
+        </div>
+
+        <BusinessForm />
+      </template>
+
+      <template v-else>
+        <div class="flex items-center justify-between">
+          <span class="font-medium text-[#111827] dark:text-[#f2f2f2]">
+            变更套餐确认
+          </span>
+          <Button size="small" @click="handleBackToBusiness">上一步</Button>
+        </div>
+
+        <section
+          v-if="preparedResult"
+          class="rounded-md border border-[#e5e7eb] bg-[#fafafa] p-3 text-[13px] dark:border-[#333] dark:bg-[#1f1f1f]"
+        >
+          <dl
+            class="grid grid-cols-1 gap-x-5 gap-y-2 text-[#374151] sm:grid-cols-2 lg:grid-cols-4 dark:text-[#d4d4d4]"
+          >
+            <div>
+              <dt class="text-[#86909c]">预处理批次号</dt>
+              <dd class="font-medium">{{ preparedResult.batchNo }}</dd>
+            </div>
+            <div>
+              <dt class="text-[#86909c]">客户</dt>
+              <dd class="font-medium">
+                {{ preparedResult.customerName || '--' }}
+              </dd>
+            </div>
+            <div>
+              <dt class="text-[#86909c]">原套餐</dt>
+              <dd class="font-medium">
+                {{
+                  preparedResult.oldPackageName ||
+                  preparedResult.oldPackageCode ||
+                  '--'
+                }}
+              </dd>
+            </div>
+            <div>
+              <dt class="text-[#86909c]">卡数量</dt>
+              <dd class="font-medium">
+                {{ preparedResult.validCount ?? preparedResult.total ?? 0 }}
+                张
+              </dd>
+            </div>
+            <div>
+              <dt class="text-[#86909c]">新套餐编码</dt>
+              <dd class="font-medium">
+                {{ pendingSubmitPayload?.newPackageCode || '--' }}
+              </dd>
+            </div>
+            <div>
+              <dt class="text-[#86909c]">购买时长</dt>
+              <dd class="font-medium">
+                {{ pendingSubmitPayload?.durationMonths ?? '--' }} 个月
+              </dd>
+            </div>
+            <div>
+              <dt class="text-[#86909c]">赠送时长</dt>
+              <dd class="font-medium">
+                {{ pendingSubmitPayload?.giftDurationMonths ?? 0 }} 个月
+              </dd>
+            </div>
+            <div>
+              <dt class="text-[#86909c]">生效方式</dt>
+              <dd class="font-medium">
+                {{ formatEffectiveMode(pendingSubmitPayload?.effectiveMode) }}
+              </dd>
+            </div>
+          </dl>
+        </section>
+      </template>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.business-acceptance-excel-upload :deep(.ant-upload-drag) {
+  height: 160px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag .ant-upload-btn) {
+  padding: 18px 16px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag-icon) {
+  margin-bottom: 8px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-text) {
+  margin-bottom: 4px;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/dataToggle.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/dataToggle.vue
new file mode 100644
index 0000000..876e1cd
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/dataToggle.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts" name="BusinessAcceptanceDataToggle">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type {
+  TSimCardLifecycleInputSubmitParam,
+  TSimCardLifecycleSubmitRes,
+} from '#/api/iotlcm/tCommunication/tSimCardLifecycle/type';
+
+import { computed, h, ref, watch } from 'vue';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import { Button, message, RadioButton, RadioGroup, Upload, UploadDragger } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import * as dataStartApi from '#/api/iotlcm/tCommunication/tSimCardDataStart';
+import * as dataStopApi from '#/api/iotlcm/tCommunication/tSimCardDataStop';
+import BetterVben from '#/constants/BetterVben';
+import FormOption from '#/constants/FormOption';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import CardSourceTabs from '../components/cardSourceTabs.vue';
+
+const MAX_EXCEL_FILE_SIZE = 50;
+const MAX_EXCEL_ROWS = 20000;
+const SOURCE_MODAL_CLASS = 'w-[760px] max-w-[calc(100vw-48px)]';
+
+type DataToggleOperation = 'dataStart' | 'dataStop';
+type DataToggleTab = 'excel' | 'input';
+
+const operationConfig = {
+  dataStart: {
+    title: '开通数据',
+  },
+  dataStop: {
+    title: '停用数据',
+  },
+} as const;
+
+const operation = ref<DataToggleOperation>('dataStart');
+const activeTab = ref<DataToggleTab>('excel');
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+
+const currentConfig = computed(() => operationConfig[operation.value]);
+
+function updateConfirmState() {
+  modalApi.setState({ confirmDisabled: false });
+}
+
+watch(activeTab, () => updateConfirmState(), { flush: 'post' });
+
+function showSuccessMessage(res?: TSimCardLifecycleSubmitRes) {
+  const batchText = res?.batchNo ? `，批次号：${res.batchNo}` : '';
+  const totalText = Number.isFinite(res?.total) ? `，共 ${res?.total} 条` : '';
+  message.success(
+    `${currentConfig.value.title}任务已提交${batchText}${totalText}`,
+  );
+}
+
+function getApi() {
+  return operation.value === 'dataStop' ? dataStopApi : dataStartApi;
+}
+
+async function handleDownloadTemplate() {
+  const success = await commonDownloadExcel(getApi().DownloadTemplate, '', {});
+  if (success) {
+    message.success('下载成功');
+  }
+}
+
+function handleBeforeUpload(file: File) {
+  const suffix = file.name.slice(Math.max(0, file.name.lastIndexOf('.') + 1));
+  if (!['xls', 'xlsx'].includes(suffix.toLowerCase())) {
+    message.error('请上传 xls/xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  if (file.size / 1024 / 1024 > MAX_EXCEL_FILE_SIZE) {
+    message.error(`文件大小不能超过 ${MAX_EXCEL_FILE_SIZE}MB`);
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = file;
+  uploadFile.value = [
+    {
+      uid: `${file.name}-${Date.now()}`,
+      name: file.name,
+      status: 'done',
+      originFileObj: file,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function handleSubmitExcel() {
+  if (!importFile.value) {
+    message.warning('请先上传 Excel 文件');
+    return;
+  }
+  const res = await getApi().ExcelSubmit({
+    file: importFile.value,
+  });
+  showSuccessMessage(res);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleSubmitInput() {
+  const [valid, value] = await BetterVben.function.formValidate(inputFormApi);
+  if (!valid) {
+    return;
+  }
+  const params = value as TSimCardLifecycleInputSubmitParam;
+  const res = await getApi().InputSubmit(params);
+  showSuccessMessage(res);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleConfirm() {
+  await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+    if (activeTab.value === 'excel') {
+      await handleSubmitExcel();
+      return;
+    }
+    await handleSubmitInput();
+  });
+}
+
+async function handleReset() {
+  activeTab.value = 'excel';
+  uploadFile.value = [];
+  importFile.value = undefined;
+  await inputFormApi.resetForm();
+  modalApi.setState({
+    confirmDisabled: false,
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+}
+
+const [InputForm, inputFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'input',
+      label: '批量输入',
+      component: 'Textarea',
+      componentProps: FormOption.Component.Textarea({
+        autoSize: {
+          minRows: 8,
+          maxRows: 12,
+        },
+        placeholder: '每行填写 ICCID，或 ICCID MSISDN IMSI（单次最多 20000 条）',
+        rows: 8,
+      }),
+      rules: z.string().trim().min(1, '请输入批量输入内容'),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: SOURCE_MODAL_CLASS,
+  confirmText: '提交',
+  destroyOnClose: false,
+  async onCancel() {
+    modalApi.close();
+    await handleReset();
+  },
+  async onConfirm() {
+    await handleConfirm();
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+      return;
+    }
+    activeTab.value = 'excel';
+    updateConfirmState();
+  },
+});
+</script>
+
+<template>
+  <Modal :title="currentConfig.title">
+    <div class="mb-4 flex gap-4">
+      <RadioGroup v-model:value="operation" button-style="solid">
+        <RadioButton value="dataStart">开通数据</RadioButton>
+        <RadioButton value="dataStop">停用数据</RadioButton>
+      </RadioGroup>
+    </div>
+    <CardSourceTabs v-model:active-key="activeTab" :show-range="false">
+      <template #excel>
+        <UploadDragger
+          v-model:file-list="uploadFile"
+          accept=".xlsx,.xls"
+          class="business-acceptance-excel-upload"
+          :before-upload="handleBeforeUpload"
+          :max-count="1"
+          @remove="handleRemove"
+        >
+          <div class="ant-upload-drag-icon flex justify-center">
+            <Inbox />
+          </div>
+          <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+          <p class="ant-upload-hint">
+            支持模板中的 ICCID，MSISDN 和 IMSI 列，ICCID 为必填项<br />
+            单次最多导入 {{ MAX_EXCEL_ROWS }} 条，超出请拆分后分批导入
+          </p>
+        </UploadDragger>
+
+        <div class="mt-3 flex justify-center">
+          <Button :icon="h(DownloadOutlined)" @click="handleDownloadTemplate">
+            下载 Excel 模板
+          </Button>
+        </div>
+      </template>
+
+      <template #input>
+        <InputForm />
+      </template>
+    </CardSourceTabs>
+  </Modal>
+</template>
+
+<style scoped>
+.business-acceptance-excel-upload :deep(.ant-upload-drag) {
+  height: 160px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag .ant-upload-btn) {
+  padding: 18px 16px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag-icon) {
+  margin-bottom: 8px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-text) {
+  margin-bottom: 4px;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/lifecycle.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/lifecycle.vue
new file mode 100644
index 0000000..ce0b17d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/lifecycle.vue
@@ -0,0 +1,362 @@
+<script setup lang="ts" name="BusinessAcceptanceLifecycle">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type {
+  TSimCardAllocatePrepareRes,
+  TSimCardAllocateTarget,
+} from '#/api/iotlcm/tCommunication/tSimCardAllocate/type';
+import type {
+  TSimCardLifecycleInputSubmitParam,
+  TSimCardLifecycleSubmitRes,
+} from '#/api/iotlcm/tCommunication/tSimCardLifecycle/type';
+
+import { computed, h, ref, watch } from 'vue';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import { Button, message, Select, Upload, UploadDragger } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import * as allocateApi from '#/api/iotlcm/tCommunication/tSimCardAllocate';
+import * as restartApi from '#/api/iotlcm/tCommunication/tSimCardRestart';
+import * as startApi from '#/api/iotlcm/tCommunication/tSimCardStart';
+import * as stopApi from '#/api/iotlcm/tCommunication/tSimCardStop';
+import BetterVben from '#/constants/BetterVben';
+import FormOption from '#/constants/FormOption';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import CardSourceTabs from '../components/cardSourceTabs.vue';
+
+const SOURCE_MODAL_CLASS = 'w-[760px] max-w-[calc(100vw-48px)]';
+const MAX_EXCEL_ROWS = 20000;
+
+type LifecycleOperation = 'allocate' | 'restart' | 'start' | 'stop';
+type LifecycleTab = 'excel' | 'input' | 'range';
+
+interface LifecycleModalData {
+  operation?: LifecycleOperation;
+}
+
+const operationConfig = {
+  restart: {
+    title: '批量重启/卡停复机',
+  },
+  start: {
+    title: '自主复机',
+  },
+  stop: {
+    title: '自主停机',
+  },
+  allocate: {
+    title: '卡片划拨',
+  },
+} as const;
+
+const operation = ref<LifecycleOperation>('stop');
+const activeTab = ref<LifecycleTab>('excel');
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+const allocateTargets = ref<TSimCardAllocateTarget[]>([]);
+const allocateTargetId = ref<number>();
+const submitBusy = ref(false);
+
+const currentConfig = computed(() => operationConfig[operation.value]);
+const isAllocate = computed(() => operation.value === 'allocate');
+function updateConfirmState() {
+  modalApi.setState({ confirmDisabled: submitBusy.value });
+}
+
+watch(activeTab, () => updateConfirmState(), { flush: 'post' });
+watch(allocateTargetId, () => updateConfirmState(), { flush: 'post' });
+
+function showSuccessMessage(res?: TSimCardLifecycleSubmitRes) {
+  const batchText = res?.batchNo ? `，批次号：${res.batchNo}` : '';
+  const totalText = Number.isFinite(res?.total) ? `，共 ${res?.total} 条` : '';
+  message.success(
+    `${currentConfig.value.title}任务已提交${batchText}${totalText}`,
+  );
+}
+
+function showAllocateSubmitMessage(res?: TSimCardAllocatePrepareRes) {
+  message.success(
+    `卡片划拨任务已提交，批次号：${res?.batchNo ?? '-'}，共 ${
+      res?.totalCount ?? 0
+    } 张。暂未产生执行结果，请在批次执行记录中查看进度，无需重复提交。`,
+  );
+}
+
+function getApi() {
+  if (operation.value === 'restart') {
+    return restartApi;
+  }
+  return operation.value === 'stop' ? stopApi : startApi;
+}
+
+async function handleDownloadTemplate() {
+  const downloadTemplate = isAllocate.value
+    ? allocateApi.DownloadTemplate
+    : getApi().DownloadTemplate;
+  const success = await commonDownloadExcel(downloadTemplate, '', {});
+  if (success) {
+    message.success('下载成功');
+  }
+}
+
+async function loadAllocateTargets() {
+  if (!isAllocate.value) {
+    return;
+  }
+  const result = await allocateApi.ListTargets();
+  allocateTargets.value = result.items ?? [];
+}
+
+function handleBeforeUpload(file: File) {
+  const suffix = file.name.slice(Math.max(0, file.name.lastIndexOf('.') + 1));
+  if (!['csv', 'xls', 'xlsx'].includes(suffix.toLowerCase())) {
+    message.error('请上传 csv/xls/xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = file;
+  uploadFile.value = [
+    {
+      uid: `${file.name}-${Date.now()}`,
+      name: file.name,
+      status: 'done',
+      originFileObj: file,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function handleSubmitExcel() {
+  if (!importFile.value) {
+    message.warning('请先上传 Excel 文件');
+    return;
+  }
+  if (isAllocate.value) {
+    const res = await allocateApi.ExcelSubmit({
+      file: importFile.value,
+    });
+    showAllocateSubmitMessage(res);
+    modalApi.close();
+    await handleReset();
+    return;
+  }
+  const res = await getApi().ExcelSubmit({
+    file: importFile.value,
+  });
+  showSuccessMessage(res);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleSubmitInput() {
+  const [valid, value] = await BetterVben.function.formValidate(inputFormApi);
+  if (!valid) {
+    return;
+  }
+  if (isAllocate.value) {
+    if (!allocateTargetId.value) {
+      message.warning('请选择划拨目标客户');
+      return;
+    }
+    const input = String(
+      (value as TSimCardLifecycleInputSubmitParam).input ?? '',
+    );
+    const res = await allocateApi.InputPrepare({
+      input,
+      targetDeptId: allocateTargetId.value,
+    });
+    showAllocateSubmitMessage(res);
+    modalApi.close();
+    await handleReset();
+    return;
+  }
+  const params = value as TSimCardLifecycleInputSubmitParam;
+  const res = await getApi().InputSubmit(params);
+  showSuccessMessage(res);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleConfirm() {
+  if (submitBusy.value) return;
+  submitBusy.value = true;
+  updateConfirmState();
+  try {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      if (activeTab.value === 'excel') {
+        await handleSubmitExcel();
+        return;
+      }
+      await handleSubmitInput();
+    });
+  } finally {
+    submitBusy.value = false;
+    updateConfirmState();
+  }
+}
+
+async function handleReset() {
+  activeTab.value = 'excel';
+  uploadFile.value = [];
+  importFile.value = undefined;
+  allocateTargets.value = [];
+  allocateTargetId.value = undefined;
+  await inputFormApi.resetForm();
+  modalApi.setState({
+    confirmDisabled: false,
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+}
+
+const [InputForm, inputFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'input',
+      label: '批量输入',
+      component: 'Textarea',
+      componentProps: FormOption.Component.Textarea({
+        autoSize: {
+          minRows: 8,
+          maxRows: 12,
+        },
+        placeholder: '每行填写 ICCID，或 ICCID MSISDN IMSI',
+        rows: 8,
+      }),
+      rules: z.string().trim().min(1, '请输入批量输入内容'),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: SOURCE_MODAL_CLASS,
+  confirmText: '提交',
+  destroyOnClose: false,
+  async onCancel() {
+    if (submitBusy.value) return;
+    modalApi.close();
+    await handleReset();
+  },
+  async onConfirm() {
+    await handleConfirm();
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+      return;
+    }
+    const data = modalApi.getData() as LifecycleModalData;
+    operation.value =
+      data.operation === 'allocate' ||
+      data.operation === 'restart' ||
+      data.operation === 'start'
+        ? data.operation
+        : 'stop';
+    activeTab.value = 'excel';
+    modalApi.setState({ confirmText: '提交' });
+    if (operation.value === 'allocate') {
+      await loadAllocateTargets();
+    }
+    updateConfirmState();
+  },
+});
+</script>
+
+<template>
+  <Modal :title="currentConfig.title">
+    <div
+      v-if="isAllocate && activeTab !== 'excel'"
+      class="mb-4 flex items-center gap-3"
+    >
+      <span class="whitespace-nowrap text-sm text-gray-600">划拨目标客户</span>
+      <Select
+        v-model:value="allocateTargetId"
+        class="min-w-[280px]"
+        placeholder="请选择目标客户"
+        show-search
+        :filter-option="
+          (input: string, option: any) =>
+            String(option?.label ?? '').includes(input)
+        "
+      >
+        <Select.Option
+          v-for="item in allocateTargets"
+          :key="item.deptId"
+          :label="item.deptName"
+          :value="item.deptId"
+        >
+          {{ item.deptName }}
+        </Select.Option>
+      </Select>
+    </div>
+    <CardSourceTabs v-model:active-key="activeTab" :show-range="false">
+      <template #excel>
+        <UploadDragger
+          v-model:file-list="uploadFile"
+          accept=".csv,.xlsx,.xls"
+          class="business-acceptance-excel-upload"
+          :before-upload="handleBeforeUpload"
+          :max-count="1"
+          @remove="handleRemove"
+        >
+          <div class="ant-upload-drag-icon flex justify-center">
+            <Inbox />
+          </div>
+          <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+          <p class="ant-upload-hint">
+            <template v-if="isAllocate">
+              模板包含 ICCID、MSISDN、IMSI 和目标客户名称，其中 ICCID
+              和目标客户名称为必填项
+            </template>
+            <template v-else>
+              支持模板中的 ICCID，MSISDN 和 IMSI 列，ICCID 为必填项<br />
+              单次最多导入 {{ MAX_EXCEL_ROWS }} 条，超出请拆分后分批导入
+            </template>
+          </p>
+        </UploadDragger>
+
+        <div class="mt-3 flex justify-center">
+          <Button :icon="h(DownloadOutlined)" @click="handleDownloadTemplate">
+            下载 Excel 模板
+          </Button>
+        </div>
+      </template>
+
+      <template #input>
+        <InputForm />
+        <p v-if="!isAllocate" class="mt-2 text-xs text-gray-500">
+          单次批量输入最多 {{ MAX_EXCEL_ROWS }} 条，超出请拆分后分批提交
+        </p>
+      </template>
+    </CardSourceTabs>
+  </Modal>
+</template>
+
+<style scoped>
+.business-acceptance-excel-upload :deep(.ant-upload-drag) {
+  height: 160px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag .ant-upload-btn) {
+  padding: 18px 16px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag-icon) {
+  margin-bottom: 8px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-text) {
+  margin-bottom: 4px;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/renew.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/renew.vue
new file mode 100644
index 0000000..b05cb28
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/renew.vue
@@ -0,0 +1,1482 @@
+<script setup lang="ts" name="BusinessAcceptanceRenew">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type {
+  TSimCardRenewBatchConfirmParam,
+  TSimCardRenewBatchPrepareRes,
+  TSimCardRenewBatchPrepareResult,
+} from '#/api/iotlcm/tCommunication/tSimCardRenew/type';
+
+import { computed, h, ref, watch } from 'vue';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import { Button, message, Spin, Upload, UploadDragger } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  BatchConfirm,
+  DownloadTemplate,
+  ExcelSubmit,
+  InputPrepare,
+  PrepareResult,
+} from '#/api/iotlcm/tCommunication/tSimCardRenew';
+import BetterVben from '#/constants/BetterVben';
+import FormOption from '#/constants/FormOption';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import CardSourceTabs from '../components/cardSourceTabs.vue';
+
+const MAX_EXCEL_FILE_SIZE = 50;
+const SOURCE_MODAL_CLASS = 'w-[760px] max-w-[calc(100vw-48px)]';
+const DETAIL_MODAL_CLASS = 'w-[1200px] max-w-[100vw]';
+
+const POLL_INTERVAL_MS = 2000;
+const POLL_MAX_ATTEMPTS = 30;
+
+type CardSourceTab = 'excel' | 'input';
+type PaymentMode = 'balance' | 'offline';
+type RenewStep = 'confirm' | 'source';
+
+const currentStep = ref<RenewStep>('source');
+const activeTab = ref<CardSourceTab>('excel');
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+const preparedResult = ref<TSimCardRenewBatchPrepareRes>();
+const selectedPackageCode = ref('');
+const selectedRenewDuration = ref(0);
+const selectedPackageBeginTime = ref('');
+const selectedPackageEndTime = ref('');
+const selectedPaymentMode = ref<PaymentMode>('balance');
+const currentModalClass = computed(() =>
+  currentStep.value === 'source' ? SOURCE_MODAL_CLASS : DETAIL_MODAL_CLASS,
+);
+const renewableDurationOptions = computed(
+  () =>
+    selectedRenewPackage.value?.renewableDurationOptions ??
+    preparedResult.value?.renewableDurationOptions ??
+    [],
+);
+const renewablePackageOptions = computed(() => {
+  const packages = preparedResult.value?.renewablePackages ?? [];
+  return packages
+    .filter((item) => item?.packageCode)
+    .map((item) => ({
+      label: `${item.packageName || item.packageCode}（${item.packageCode}）`,
+      value: item.packageCode,
+    }));
+});
+const selectedRenewPackage = computed(() => {
+  const code = selectedPackageCode.value || preparedResult.value?.packageCode;
+  return (preparedResult.value?.renewablePackages ?? []).find(
+    (item) => item.packageCode === code,
+  );
+});
+const selectedGiftDurationMonths = computed(() =>
+  normalizeGiftDurationMonths(preparedResult.value?.giftDurationMonths),
+);
+const renewDurationUnitText = computed(() => '年');
+const renewDurationFieldLabel = computed(() => '续费年限');
+const isTopDept = computed(() => preparedResult.value?.isTopDept === true);
+const defaultPaymentMode = computed<PaymentMode>(() =>
+  normalizePaymentMode(
+    preparedResult.value?.defaultPaymentMode ||
+      (isTopDept.value ? 'offline' : 'balance'),
+  ),
+);
+const activePaymentMode = computed<PaymentMode>(() =>
+  isTopDept.value ? selectedPaymentMode.value : 'balance',
+);
+const renewQuantity = computed(() =>
+  Number(preparedResult.value?.quantity ?? 0),
+);
+const renewFailedCount = computed(() =>
+  Number(preparedResult.value?.failCount ?? 0),
+);
+const renewFailedItems = computed(
+  () => preparedResult.value?.failedItems ?? [],
+);
+const renewUnitPrice = computed(() =>
+  Number(
+    selectedRenewPackage.value?.renewUnitPrice ??
+      preparedResult.value?.renewUnitPrice ??
+      0,
+  ),
+);
+const selectedPackageDisplay = computed(() => {
+  const option = selectedRenewPackage.value;
+  if (option) {
+    return option.packageName || option.packageCode || '--';
+  }
+  return (
+    preparedResult.value?.packageName ||
+    preparedResult.value?.packageCode ||
+    '--'
+  );
+});
+const previewTotalAmountValue = computed(() => {
+  if (!preparedResult.value || !selectedRenewDuration.value) {
+    return 0;
+  }
+  const amount =
+    renewUnitPrice.value * selectedRenewDuration.value * renewQuantity.value;
+  return Number.isFinite(amount) ? amount : 0;
+});
+const previewTotalAmount = computed(() => {
+  return previewTotalAmountValue.value > 0
+    ? formatAmount(previewTotalAmountValue.value)
+    : '';
+});
+const availableBalance = computed(() => {
+  const value = Number(preparedResult.value?.availableBalance ?? 0);
+  return Number.isFinite(value) ? value : 0;
+});
+const balanceAfterRenew = computed(() => {
+  const total = previewTotalAmountValue.value;
+  return (availableBalance.value - total).toFixed(2);
+});
+const balanceEnough = computed(() => {
+  if (activePaymentMode.value !== 'balance') {
+    return true;
+  }
+  const total = previewTotalAmountValue.value;
+  return availableBalance.value + 0.0001 >= total;
+});
+const renewBeginDisplay = computed(() => {
+  return selectedPackageBeginTime.value || naturalRenewBeginDate() || '--';
+});
+const renewEndDisplay = computed(() => {
+  const begin = renewBeginDisplay.value;
+  const duration = selectedRenewDuration.value;
+  return (
+    addRenewDurationToDate(begin, duration, selectedGiftDurationMonths.value) ||
+    selectedPackageEndTime.value ||
+    '--'
+  );
+});
+
+let pollSequence = 0;
+const isPolling = ref(false);
+const pendingBatchNo = ref<null | string>(null);
+
+function sourceConfirmText() {
+  return activeTab.value === 'excel' ? '提交' : '下一步';
+}
+
+function objectValue(value: unknown): Record<string, any> {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, any>)
+    : {};
+}
+
+function firstValue(...values: unknown[]) {
+  return values.find(
+    (item) => item !== undefined && item !== null && item !== '',
+  );
+}
+
+function numberValue(value: unknown): number | undefined {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+function booleanValue(value: unknown): boolean | undefined {
+  if (value === true || value === 1 || value === '1' || value === 'true') {
+    return true;
+  }
+  if (value === false || value === 0 || value === '0' || value === 'false') {
+    return false;
+  }
+  return undefined;
+}
+
+function anyBooleanTrue(...values: unknown[]) {
+  return values.some((item) => booleanValue(item) === true);
+}
+
+function durationOptions(value: unknown): number[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.map(Number).filter((item) => Number.isFinite(item) && item > 0);
+}
+
+function packageOptions(value: unknown) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value
+    .map((item) => objectValue(item))
+    .map((item) => ({
+      packageCode: String(item.packageCode ?? '').trim(),
+      packageName: String(item.packageName ?? '').trim(),
+      renewUnitPrice: firstValue(item.renewUnitPrice, 0) as number | string,
+      renewableDurationOptions: durationOptions(item.renewableDurationOptions),
+    }))
+    .filter((item) => item.packageCode);
+}
+
+function normalizeDateValue(value: unknown): string {
+  const raw = String(value ?? '').trim();
+  if (!raw) {
+    return '';
+  }
+  const parsed = dayjs(raw);
+  return parsed.isValid() ? parsed.format('YYYY-MM-DD') : raw.slice(0, 10);
+}
+
+function naturalRenewBeginDate(): string {
+  const direct = normalizeDateValue(preparedResult.value?.renewBeginDate);
+  if (direct) {
+    return direct;
+  }
+  const min = normalizeDateValue(preparedResult.value?.renewBeginDateMin);
+  const max = normalizeDateValue(preparedResult.value?.renewBeginDateMax);
+  return min && max && min === max ? min : '';
+}
+
+function normalizeGiftDurationMonths(value: unknown): number {
+  const parsed = Number(value ?? 0);
+  return Number.isFinite(parsed) && parsed > 0 ? Math.trunc(parsed) : 0;
+}
+
+function addRenewDurationToDate(
+  date: string,
+  duration: number,
+  giftMonths = 0,
+): string {
+  if (!date || !duration) {
+    return '';
+  }
+  const parsed = dayjs(date);
+  if (!parsed.isValid()) {
+    return '';
+  }
+  return parsed
+    .add(duration * 12 + normalizeGiftDurationMonths(giftMonths), 'month')
+    .format('YYYY-MM-DD');
+}
+
+function formatAmount(value: unknown): string {
+  const amount = Number(value ?? 0);
+  return Number.isFinite(amount) ? amount.toFixed(2) : '--';
+}
+
+function formatDurationLabel(duration: number): string {
+  if (!duration) {
+    return '--';
+  }
+  return `${duration}${renewDurationUnitText.value}`;
+}
+
+function normalizePaymentMode(value: unknown): PaymentMode {
+  return String(value ?? '').trim() === 'offline' ? 'offline' : 'balance';
+}
+
+function normalizePrepareResult(
+  result: TSimCardRenewBatchPrepareResult,
+): TSimCardRenewBatchPrepareRes {
+  const snapshot = objectValue(result.snapshot);
+  const batchInfo = objectValue(result.batchInfo);
+  const priceSnapshot = objectValue(
+    batchInfo.priceSnapshot ?? snapshot.priceSnapshot,
+  );
+  const paymentSnapshot = objectValue(
+    batchInfo.paymentSnapshot ?? snapshot.paymentSnapshot,
+  );
+  const normalized: TSimCardRenewBatchPrepareRes = {
+    ...snapshot,
+    ...batchInfo,
+    ...result,
+    batchNo: String(
+      result.batchNo ?? batchInfo.batchNo ?? snapshot.batchNo ?? '',
+    ).trim(),
+    status: String(result.status ?? batchInfo.status ?? snapshot.status ?? ''),
+  };
+
+  // The response is normalized from several legacy payload shapes below.
+  // eslint-disable-next-line unicorn/no-immediate-mutation
+  normalized.total = numberValue(
+    result.total ?? batchInfo.total ?? snapshot.total,
+  );
+  normalized.validCount = numberValue(
+    result.validCount ??
+      result.successCount ??
+      batchInfo.validCount ??
+      batchInfo.successCount ??
+      snapshot.validCount ??
+      snapshot.successCount,
+  );
+  normalized.failCount = numberValue(
+    result.failCount ?? batchInfo.failCount ?? snapshot.failCount,
+  );
+  normalized.quantity = numberValue(
+    firstValue(result.quantity, batchInfo.quantity, snapshot.quantity),
+  );
+  normalized.renewUnitPrice = firstValue(
+    result.renewUnitPrice,
+    batchInfo.renewUnitPrice,
+    snapshot.renewUnitPrice,
+    priceSnapshot.renewUnitPrice,
+  ) as number | string | undefined;
+  normalized.billingMethod = numberValue(
+    firstValue(
+      result.billingMethod,
+      batchInfo.billingMethod,
+      snapshot.billingMethod,
+      priceSnapshot.billingMethod,
+    ),
+  );
+  normalized.renewDurationUnit = 'year';
+  normalized.renewDurationUnitText = '年';
+  normalized.durationValue = numberValue(
+    firstValue(
+      result.durationValue,
+      result.durationYears,
+      batchInfo.durationValue,
+      batchInfo.durationYears,
+      snapshot.durationValue,
+      snapshot.durationYears,
+    ),
+  );
+  normalized.durationYears = normalized.durationValue;
+  normalized.giftDurationMonths = normalizeGiftDurationMonths(
+    firstValue(
+      result.giftDurationMonths,
+      batchInfo.giftDurationMonths,
+      snapshot.giftDurationMonths,
+      priceSnapshot.giftDurationMonths,
+    ),
+  );
+  normalized.renewableDurationOptions = durationOptions(
+    firstValue(
+      result.renewableDurationOptions,
+      batchInfo.renewableDurationOptions,
+      snapshot.renewableDurationOptions,
+      priceSnapshot.renewableDurationOptions,
+    ),
+  );
+  normalized.renewablePackageCodes = Array.isArray(
+    firstValue(
+      result.renewablePackageCodes,
+      batchInfo.renewablePackageCodes,
+      snapshot.renewablePackageCodes,
+      priceSnapshot.renewablePackageCodes,
+    ),
+  )
+    ? (firstValue(
+        result.renewablePackageCodes,
+        batchInfo.renewablePackageCodes,
+        snapshot.renewablePackageCodes,
+        priceSnapshot.renewablePackageCodes,
+      ) as string[])
+    : [];
+  normalized.renewablePackages = packageOptions(
+    firstValue(
+      result.renewablePackages,
+      batchInfo.renewablePackages,
+      snapshot.renewablePackages,
+      priceSnapshot.renewablePackages,
+    ),
+  );
+  normalized.renewBeginDate = normalizeDateValue(
+    firstValue(
+      result.renewBeginDate,
+      batchInfo.renewBeginDate,
+      snapshot.renewBeginDate,
+      priceSnapshot.renewBeginDate,
+      result.packageBeginTime,
+      batchInfo.packageBeginTime,
+      snapshot.packageBeginTime,
+    ),
+  );
+  normalized.renewBeginDateMin = normalizeDateValue(
+    firstValue(
+      result.renewBeginDateMin,
+      batchInfo.renewBeginDateMin,
+      snapshot.renewBeginDateMin,
+      priceSnapshot.renewBeginDateMin,
+      normalized.renewBeginDate,
+    ),
+  );
+  normalized.renewBeginDateMax = normalizeDateValue(
+    firstValue(
+      result.renewBeginDateMax,
+      batchInfo.renewBeginDateMax,
+      snapshot.renewBeginDateMax,
+      priceSnapshot.renewBeginDateMax,
+      normalized.renewBeginDate,
+    ),
+  );
+  normalized.sameRenewBeginDate = Boolean(
+    firstValue(
+      result.sameRenewBeginDate,
+      batchInfo.sameRenewBeginDate,
+      snapshot.sameRenewBeginDate,
+      priceSnapshot.sameRenewBeginDate,
+    ) ??
+    (normalized.renewBeginDateMin &&
+      normalized.renewBeginDateMin === normalized.renewBeginDateMax),
+  );
+  normalized.isTopDept = anyBooleanTrue(
+    result.isTopDept,
+    batchInfo.isTopDept,
+    snapshot.isTopDept,
+    paymentSnapshot.isTopDept,
+  );
+  normalized.defaultPaymentMode = String(
+    firstValue(
+      result.defaultPaymentMode,
+      batchInfo.defaultPaymentMode,
+      snapshot.defaultPaymentMode,
+      paymentSnapshot.paymentMode,
+    ) ?? (normalized.isTopDept ? 'offline' : 'balance'),
+  );
+  normalized.availableBalance = firstValue(
+    result.availableBalance,
+    batchInfo.availableBalance,
+    snapshot.availableBalance,
+    paymentSnapshot.balanceAfter,
+    paymentSnapshot.balanceBefore,
+    0,
+  ) as number | string;
+
+  return normalized;
+}
+
+function isRenewPrepareComplete(result?: TSimCardRenewBatchPrepareRes) {
+  if (!result?.batchNo) {
+    return false;
+  }
+  const quantity = Number(result.quantity ?? 0);
+  const unitPrice = Number(result.renewUnitPrice);
+  return (
+    quantity > 0 &&
+    Boolean(result.packageCode || result.packageName) &&
+    Number.isFinite(unitPrice) &&
+    unitPrice >= 0 &&
+    (result.renewablePackages?.length ?? 0) > 0 &&
+    (result.renewableDurationOptions?.length ?? 0) > 0
+  );
+}
+
+async function handlePrepareIncomplete(result: TSimCardRenewBatchPrepareRes) {
+  const batchNo = result.batchNo || pendingBatchNo.value || '';
+  const reason = String(result.failReason ?? '').trim();
+  message.error(
+    reason
+      ? `续费预处理失败：${reason}`
+      : `续费预处理结果异常，批次号：${batchNo || '--'}，请到执行日志查看或重新预处理`,
+  );
+  modalApi.close();
+  await handleReset();
+}
+
+async function pollPrepareResult(
+  batchNo: string,
+  onSuccess: (result: TSimCardRenewBatchPrepareResult) => Promise<void> | void,
+  onFailed: (result: TSimCardRenewBatchPrepareResult) => Promise<void> | void,
+) {
+  const currentSequence = ++pollSequence;
+  isPolling.value = true;
+  pendingBatchNo.value = batchNo;
+  modalApi.setState({
+    confirmLoading: true,
+    confirmText: '预处理中...',
+    submitting: true,
+  });
+
+  for (let attempt = 0; attempt < POLL_MAX_ATTEMPTS; attempt++) {
+    if (pollSequence !== currentSequence || !pendingBatchNo.value) {
+      return;
+    }
+
+    try {
+      const result = await PrepareResult(batchNo);
+
+      if (
+        pollSequence !== currentSequence ||
+        pendingBatchNo.value !== batchNo
+      ) {
+        return;
+      }
+
+      if (result.status === 'success') {
+        isPolling.value = false;
+        pendingBatchNo.value = null;
+        modalApi.setState({
+          confirmLoading: false,
+          submitting: false,
+        });
+        await onSuccess(result);
+        return;
+      }
+
+      if (result.status === 'failed') {
+        isPolling.value = false;
+        pendingBatchNo.value = null;
+        modalApi.setState({
+          confirmLoading: false,
+          confirmText: sourceConfirmText(),
+          submitting: false,
+        });
+        await onFailed(result);
+        return;
+      }
+    } catch {
+      // continue polling on error
+    }
+
+    if (attempt < POLL_MAX_ATTEMPTS - 1) {
+      await new Promise((resolve) => setTimeout(resolve, POLL_INTERVAL_MS));
+    }
+  }
+
+  if (pollSequence === currentSequence && pendingBatchNo.value === batchNo) {
+    isPolling.value = false;
+    pendingBatchNo.value = null;
+    modalApi.setState({
+      confirmLoading: false,
+      confirmText: sourceConfirmText(),
+      submitting: false,
+    });
+    message.warning(`预处理超时，批次号：${batchNo}`);
+  }
+}
+
+function handleBeforeUpload(file: File) {
+  const rawFile = file as File;
+  const suffix = rawFile.name.slice(
+    Math.max(0, rawFile.name.lastIndexOf('.') + 1),
+  );
+  const isExcel = ['xls', 'xlsx'].includes(suffix.toLowerCase());
+  if (!isExcel) {
+    message.error('请上传 xls/xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  const isLtMaxSize = rawFile.size / 1024 / 1024 <= MAX_EXCEL_FILE_SIZE;
+  if (!isLtMaxSize) {
+    message.error(`文件大小不能超过 ${MAX_EXCEL_FILE_SIZE}MB`);
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = rawFile;
+  uploadFile.value = [
+    {
+      uid: `${rawFile.name}-${Date.now()}`,
+      name: rawFile.name,
+      status: 'done',
+      originFileObj: rawFile,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function handleDownloadTemplate() {
+  const success = await commonDownloadExcel(DownloadTemplate, '', {});
+  if (success) {
+    message.success('下载成功');
+  }
+}
+
+function updatePackageSchema(disabled: boolean) {
+  const options = renewablePackageOptions.value;
+  let placeholder = '请先完成续费校验';
+  if (!disabled) {
+    placeholder =
+      options.length > 0 ? '请选择续费套餐' : '当前套餐未配置可续费套餐';
+  }
+  confirmFormApi.updateSchema([
+    {
+      fieldName: 'packageCode',
+      componentProps: {
+        class: 'w-full',
+        disabled,
+        options,
+        placeholder,
+        showSearch: true,
+        optionFilterProp: 'label',
+        onChange: (value: string) => {
+          void handlePackageChange(value);
+        },
+      },
+    },
+  ]);
+}
+
+function updateDurationSchema(options: number[], disabled: boolean) {
+  const hasOptions = options.length > 0;
+  let placeholder = '请先完成续费校验';
+  if (!disabled) {
+    placeholder = hasOptions
+      ? `请选择${renewDurationFieldLabel.value}`
+      : `请输入${renewDurationFieldLabel.value}`;
+  }
+
+  confirmFormApi.updateSchema([
+    {
+      fieldName: 'durationMonths',
+      label: renewDurationFieldLabel.value,
+      component: hasOptions || disabled ? 'Select' : 'InputNumber',
+      componentProps: {
+        disabled,
+        min: hasOptions ? undefined : 1,
+        options: hasOptions
+          ? options.map((item) => ({
+              label: formatDurationLabel(item),
+              value: item,
+            }))
+          : undefined,
+        precision: hasOptions ? undefined : 0,
+        placeholder,
+        onChange: (value: number) => {
+          handleDurationChange(Number(value ?? 0));
+        },
+      },
+    },
+  ]);
+}
+
+function updatePeriodSchema() {
+  confirmFormApi.updateSchema([
+    {
+      fieldName: 'packageBeginTime',
+      label: '续费日期',
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+        allowClear: false,
+        disabled: !isTopDept.value,
+        format: 'YYYY-MM-DD',
+        placeholder: isTopDept.value ? '请选择续费日期' : '当前套餐到期时间',
+        valueFormat: 'YYYY-MM-DD',
+        onChange: (value: string, dateString?: string) => {
+          handlePackageBeginTimeChange(dateString || value);
+        },
+      },
+      rules: z.string().trim().min(1, '请选择续费日期'),
+    },
+    {
+      fieldName: 'packageEndTime',
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: ['durationMonths', 'packageBeginTime'],
+      },
+      componentProps: {
+        class: 'w-full',
+        disabled: true,
+        placeholder: '续费后到期时间',
+      },
+    },
+  ]);
+}
+
+function updatePaymentSchema() {
+  confirmFormApi.updateSchema([
+    {
+      fieldName: 'paymentMode',
+      label: '付款方式',
+      component: 'Select',
+      dependencies: {
+        show: () => isTopDept.value,
+        triggerFields: ['durationMonths'],
+      },
+      componentProps: {
+        class: 'w-full',
+        options: [
+          { label: '线下支付', value: 'offline' },
+          { label: '余额支付', value: 'balance' },
+        ],
+        placeholder: '请选择付款方式',
+        onChange: (value: string) => {
+          handlePaymentModeChange(value);
+        },
+      },
+      rules: isTopDept.value
+        ? z.string().trim().min(1, '请选择付款方式')
+        : z.string().optional(),
+    },
+    {
+      fieldName: 'offlineContractCompleted',
+      dependencies: {
+        show: (values) =>
+          isTopDept.value &&
+          normalizePaymentMode(
+            values.paymentMode || selectedPaymentMode.value,
+          ) === 'offline',
+        triggerFields: ['durationMonths', 'paymentMode'],
+      },
+      rules:
+        isTopDept.value && activePaymentMode.value === 'offline'
+          ? z.boolean().refine((value) => value === true, {
+              message: '请确认线下业务已完成',
+            })
+          : z.boolean().optional(),
+    },
+  ]);
+}
+
+function handlePaymentModeChange(value: string) {
+  selectedPaymentMode.value = normalizePaymentMode(value);
+  void confirmFormApi.setValues({
+    offlineContractCompleted: false,
+  });
+  updatePaymentSchema();
+}
+
+async function handlePackageChange(value: string) {
+  selectedPackageCode.value = String(value ?? '').trim();
+  const options = renewableDurationOptions.value;
+  updateDurationSchema(options, false);
+  const nextDuration = options.includes(selectedRenewDuration.value)
+    ? selectedRenewDuration.value
+    : (options[0] ?? 0);
+  selectedRenewDuration.value = nextDuration;
+  await confirmFormApi.setValues({
+    durationMonths: nextDuration || undefined,
+  });
+  await setRenewPeriodValues(naturalRenewBeginDate(), nextDuration);
+}
+
+async function setRenewPeriodValues(begin?: string, duration?: number) {
+  const normalizedBegin = normalizeDateValue(begin);
+  selectedPackageBeginTime.value = normalizedBegin;
+  selectedPackageEndTime.value =
+    normalizedBegin && duration
+      ? addRenewDurationToDate(
+          normalizedBegin,
+          duration,
+          selectedGiftDurationMonths.value,
+        )
+      : '';
+  await syncRenewPeriodFormValues();
+}
+
+async function syncRenewPeriodFormValues() {
+  await confirmFormApi.setValues({
+    packageBeginTime:
+      renewBeginDisplay.value === '--' ? undefined : renewBeginDisplay.value,
+    packageEndTime: selectedPackageEndTime.value || undefined,
+  });
+}
+
+function handleDurationChange(duration: number) {
+  selectedRenewDuration.value = duration;
+  const begin = renewBeginDisplay.value === '--' ? '' : renewBeginDisplay.value;
+  void setRenewPeriodValues(begin, duration);
+}
+
+function handlePackageBeginTimeChange(value?: string) {
+  void setRenewPeriodValues(value, selectedRenewDuration.value);
+}
+
+async function prepareConfirmForm(
+  batchInfo: TSimCardRenewBatchPrepareRes,
+  preferred?: { duration?: number; packageCode?: string },
+) {
+  const preferredPackageCode = String(preferred?.packageCode ?? '').trim();
+  const availablePackageCodes = (batchInfo.renewablePackages ?? [])
+    .map((item) => String(item?.packageCode ?? '').trim())
+    .filter(Boolean);
+  selectedPackageCode.value = availablePackageCodes.includes(
+    preferredPackageCode,
+  )
+    ? preferredPackageCode
+    : String(batchInfo.renewablePackages?.[0]?.packageCode ?? '').trim() ||
+      String(batchInfo.packageCode ?? '').trim();
+  updatePackageSchema(false);
+  const options = renewableDurationOptions.value;
+  const preferredDuration = Number(
+    preferred?.duration ??
+      batchInfo.durationValue ??
+      batchInfo.durationYears ??
+      0,
+  );
+  const initialDuration = options.includes(preferredDuration)
+    ? preferredDuration
+    : (options[0] ?? 0);
+  selectedPaymentMode.value = defaultPaymentMode.value;
+  updateDurationSchema(options, false);
+  updatePeriodSchema();
+  updatePaymentSchema();
+  await confirmFormApi.setValues({
+    offlineContractCompleted: false,
+    paymentMode: selectedPaymentMode.value,
+    packageCode: selectedPackageCode.value || undefined,
+  });
+  if (options.length > 0) {
+    selectedRenewDuration.value = initialDuration;
+    await confirmFormApi.setValues({
+      durationMonths: initialDuration,
+    });
+    await setRenewPeriodValues(naturalRenewBeginDate(), initialDuration);
+  } else {
+    await setRenewPeriodValues(
+      naturalRenewBeginDate(),
+      selectedRenewDuration.value,
+    );
+  }
+}
+
+async function refreshPrepareResultAfterChange(
+  batchNo: string,
+  notice?: string,
+) {
+  const previousPackageCode = selectedPackageCode.value;
+  const previousDuration = selectedRenewDuration.value;
+  const result = await PrepareResult(batchNo);
+  const batchInfo = normalizePrepareResult(result);
+  if (Number(batchInfo.quantity ?? 0) <= 0) {
+    result.batchInfo = batchInfo;
+    preparedResult.value = batchInfo;
+    message.warning(
+      notice || '续费条件已更新，当前已无可续费卡，请返回上一步重新预处理',
+    );
+    return;
+  }
+  if (!isRenewPrepareComplete(batchInfo)) {
+    message.warning(
+      '续费条件或定价已更新，但最新预处理结果不完整，请重新发起预处理',
+    );
+    return;
+  }
+  result.batchInfo = batchInfo;
+  preparedResult.value = batchInfo;
+  await prepareConfirmForm(batchInfo, {
+    duration: previousDuration,
+    packageCode: previousPackageCode,
+  });
+  message.warning(
+    notice ||
+      '续费条件或套餐定价已更新，确认页已刷新，请核对最新有效卡数量及金额后重新提交',
+  );
+}
+
+async function clearPreparedContext() {
+  preparedResult.value = undefined;
+  selectedPackageCode.value = '';
+  selectedRenewDuration.value = 0;
+  selectedPackageBeginTime.value = '';
+  selectedPackageEndTime.value = '';
+  selectedPaymentMode.value = 'balance';
+  await confirmFormApi.setValues({
+    packageCode: undefined,
+    durationMonths: undefined,
+    packageBeginTime: undefined,
+    packageEndTime: undefined,
+    paymentMode: undefined,
+  });
+  updatePackageSchema(true);
+  updateDurationSchema([], true);
+  updatePeriodSchema();
+  updatePaymentSchema();
+}
+
+async function resetToSourceStep() {
+  currentStep.value = 'source';
+  modalApi.setState({
+    class: SOURCE_MODAL_CLASS,
+    confirmText: sourceConfirmText(),
+  });
+}
+
+async function handleBackToSource() {
+  await resetToSourceStep();
+  await clearPreparedContext();
+}
+
+async function handleReset() {
+  pollSequence++;
+  isPolling.value = false;
+  pendingBatchNo.value = null;
+  modalApi.setState({
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+  currentStep.value = 'source';
+  activeTab.value = 'excel';
+  uploadFile.value = [];
+  importFile.value = undefined;
+  preparedResult.value = undefined;
+  selectedPackageCode.value = '';
+  selectedRenewDuration.value = 0;
+  selectedPackageBeginTime.value = '';
+  selectedPackageEndTime.value = '';
+  selectedPaymentMode.value = 'balance';
+  await inputSourceFormApi.resetForm();
+  await confirmFormApi.resetForm();
+  await confirmFormApi.setValues({
+    offlineContractCompleted: false,
+    packageCode: undefined,
+    packageBeginTime: undefined,
+    packageEndTime: undefined,
+    paymentMode: undefined,
+  });
+  updatePackageSchema(true);
+  updateDurationSchema([], true);
+  updatePeriodSchema();
+  updatePaymentSchema();
+  modalApi.setState({
+    class: SOURCE_MODAL_CLASS,
+    confirmLoading: false,
+    confirmText: '提交',
+    loading: false,
+    submitting: false,
+  });
+}
+
+async function handlePrepareFailed(
+  pollResult: TSimCardRenewBatchPrepareResult,
+) {
+  const batchText = pollResult.batchNo ? `，批次号：${pollResult.batchNo}` : '';
+  const reasonText = pollResult.failReason ? `，${pollResult.failReason}` : '';
+  message.warning(`续费预处理失败${batchText}${reasonText}，请到执行日志查看`);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handlePrepareSucceeded(
+  pollResult: TSimCardRenewBatchPrepareResult,
+) {
+  const batchInfo = normalizePrepareResult(pollResult);
+  if (!isRenewPrepareComplete(batchInfo)) {
+    await handlePrepareIncomplete(batchInfo);
+    return;
+  }
+  pollResult.batchInfo = batchInfo;
+  preparedResult.value = batchInfo;
+  currentStep.value = 'confirm';
+  modalApi.setState({
+    class: DETAIL_MODAL_CLASS,
+    confirmText: '确认续费',
+  });
+  await prepareConfirmForm(batchInfo);
+  message.success('续费预处理成功');
+}
+
+function normalizeConfirmValue(value: Record<string, any>) {
+  const durationYears = Number(value.durationMonths ?? 0);
+  const giftDurationMonths = normalizeGiftDurationMonths(
+    firstValue(
+      value.giftDurationMonths,
+      preparedResult.value?.giftDurationMonths,
+    ),
+  );
+  const paymentMode = normalizePaymentMode(
+    value.paymentMode || activePaymentMode.value,
+  );
+  const payload: TSimCardRenewBatchConfirmParam = {
+    batchNo: String(preparedResult.value?.batchNo ?? '').trim(),
+    packageCode: String(value.packageCode ?? selectedPackageCode.value).trim(),
+    durationYears,
+    durationMonths: durationYears * 12,
+    giftDurationMonths,
+    offlineContractCompleted: value.offlineContractCompleted === true,
+    paymentMode,
+  };
+  return payload;
+}
+
+async function handleSubmitExcel() {
+  if (!importFile.value) {
+    message.warning('请先上传 Excel 文件');
+    return;
+  }
+  const result = await ExcelSubmit({
+    file: importFile.value,
+  });
+  const batchNo = result?.batchNo;
+  if (!batchNo) {
+    message.error('Excel 提交失败，未获取到批次号');
+    return;
+  }
+  message.info(`续费预处理已提交，批次号：${batchNo}`);
+  await pollPrepareResult(batchNo, handlePrepareSucceeded, handlePrepareFailed);
+}
+
+async function handlePrepareInput() {
+  if (isPolling.value) {
+    message.info('预处理中，请稍候');
+    return;
+  }
+  const [flag, value] =
+    await BetterVben.function.formValidate(inputSourceFormApi);
+  if (!flag) {
+    return;
+  }
+
+  const result = await InputPrepare({
+    input: String(value.input ?? '').trim(),
+  });
+  const batchNo = result?.batchNo;
+  if (!batchNo) {
+    message.warning('续费预处理失败，未获取到批次号');
+    return;
+  }
+  message.info(`预处理已提交，批次号：${batchNo}`);
+
+  await pollPrepareResult(batchNo, handlePrepareSucceeded, handlePrepareFailed);
+}
+
+async function handleConfirmRenew() {
+  const [flag, value] = await BetterVben.function.formValidate(confirmFormApi);
+  if (!flag) {
+    return;
+  }
+
+  const payload = normalizeConfirmValue(value);
+  if (isTopDept.value) {
+    const renewDate = normalizeDateValue(
+      value.packageBeginTime || renewBeginDisplay.value,
+    );
+    const renewEndDate = addRenewDurationToDate(
+      renewDate,
+      payload.durationYears ?? 0,
+      payload.giftDurationMonths ?? 0,
+    );
+    if (!renewDate || !renewEndDate) {
+      message.warning('请选择续费日期');
+      return;
+    }
+    payload.renewDate = renewDate;
+    payload.packageBeginTime = renewDate;
+    payload.packageEndTime = renewEndDate;
+  }
+  if (!payload.batchNo) {
+    message.warning('缺少续费预处理批次号');
+    return;
+  }
+  if (renewQuantity.value <= 0) {
+    message.warning('当前预处理结果已无可续费卡，请返回上一步重新预处理');
+    return;
+  }
+  if (
+    renewablePackageOptions.value.length === 0 ||
+    !renewablePackageOptions.value.some(
+      (item) => item.value === payload.packageCode,
+    )
+  ) {
+    message.warning('请选择可续费套餐');
+    return;
+  }
+  if (
+    renewableDurationOptions.value.length > 0 &&
+    !renewableDurationOptions.value.includes(payload.durationYears ?? 0)
+  ) {
+    message.warning('请选择可续费年限');
+    return;
+  }
+  if (payload.paymentMode === 'balance' && !balanceEnough.value) {
+    message.warning('账户余额不足，不能提交续费');
+    return;
+  }
+
+  const result = await BatchConfirm(payload);
+  if (result?.prepareChanged || result?.priceChanged) {
+    await refreshPrepareResultAfterChange(payload.batchNo, result.message);
+    return;
+  }
+  message.success(`续费已提交，批次号：${result?.batchNo ?? payload.batchNo}`);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleModalConfirm() {
+  if (isPolling.value) {
+    message.info('预处理中，请稍候');
+    return;
+  }
+  if (currentStep.value === 'confirm') {
+    await handleConfirmRenew();
+    return;
+  }
+  if (activeTab.value === 'excel') {
+    await handleSubmitExcel();
+    return;
+  }
+  await handlePrepareInput();
+}
+
+const [InputSourceForm, inputSourceFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'input',
+      label: '批量输入卡号',
+      component: 'Textarea',
+      componentProps: FormOption.Component.Textarea({
+        autoSize: {
+          minRows: 8,
+          maxRows: 12,
+        },
+        placeholder: '每行一个卡号，支持 ICCID / MSISDN / IMSI',
+        rows: 8,
+      }),
+      rules: z.string().trim().min(1, '请输入批量输入内容'),
+    },
+  ],
+});
+
+const [ConfirmForm, confirmFormApi] = useVbenForm({
+  ...BetterVben.form.grid,
+  schema: [
+    {
+      fieldName: 'packageCode',
+      label: '续费套餐',
+      component: 'Select',
+      componentProps: {
+        disabled: true,
+        options: [],
+        placeholder: '请先完成续费校验',
+      },
+      rules: z.string().trim().min(1, '请选择续费套餐'),
+    },
+    {
+      fieldName: 'durationMonths',
+      label: '续费年限',
+      component: 'Select',
+      componentProps: {
+        disabled: true,
+        options: [],
+        placeholder: '请先完成续费校验',
+        onChange: (value: number) => {
+          handleDurationChange(Number(value ?? 0));
+        },
+      },
+      rules: z.number().min(1, '请选择续费年限'),
+    },
+    {
+      fieldName: 'packageBeginTime',
+      label: '续费日期',
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+        allowClear: false,
+        disabled: true,
+        format: 'YYYY-MM-DD',
+        placeholder: '当前套餐到期时间',
+        valueFormat: 'YYYY-MM-DD',
+        onChange: (value: string, dateString?: string) => {
+          handlePackageBeginTimeChange(dateString || value);
+        },
+      },
+      rules: z.string().trim().min(1, '请选择续费日期'),
+    },
+    {
+      fieldName: 'packageEndTime',
+      label: '续费后到期时间',
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: ['durationMonths', 'packageBeginTime'],
+      },
+      componentProps: {
+        class: 'w-full',
+        disabled: true,
+        placeholder: '续费后到期时间',
+      },
+    },
+    {
+      fieldName: 'paymentMode',
+      label: '付款方式',
+      component: 'Select',
+      componentProps: {
+        class: 'w-full',
+        options: [
+          { label: '线下支付', value: 'offline' },
+          { label: '余额支付', value: 'balance' },
+        ],
+        placeholder: '请选择付款方式',
+        onChange: (value: string) => {
+          handlePaymentModeChange(value);
+        },
+      },
+      dependencies: {
+        show: () => isTopDept.value,
+        triggerFields: ['durationMonths'],
+      },
+      rules: z.string().optional(),
+    },
+    {
+      fieldName: 'offlineContractCompleted',
+      label: '线下确认',
+      component: 'Checkbox',
+      defaultValue: false,
+      formItemClass: 'col-span-12',
+      renderComponentContent: () => ({
+        default: () => '线下合同、销售和走账已完成',
+      }),
+      rules: z.boolean().optional(),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: SOURCE_MODAL_CLASS,
+  confirmText: '提交',
+  destroyOnClose: false,
+  async onCancel() {
+    modalApi.close();
+    await handleReset();
+  },
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleModalConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+      return;
+    }
+    await handleReset();
+  },
+});
+
+watch(activeTab, async () => {
+  await resetToSourceStep();
+  await clearPreparedContext();
+});
+</script>
+
+<template>
+  <Modal :class="currentModalClass" title="续费套餐">
+    <div class="flex flex-col gap-3">
+      <template v-if="currentStep === 'source'">
+        <div
+          v-if="isPolling"
+          class="flex items-center gap-3 rounded-md border border-[#d9e8ff] bg-[#f0f7ff] px-3 py-2 text-[13px] text-[#1d4ed8] dark:border-[#1f3b57] dark:bg-[#142233] dark:text-[#b7d7ff]"
+        >
+          <Spin size="small" />
+          <div>
+            <div class="font-medium">预处理中，请稍候...</div>
+            <div class="mt-0.5 text-[12px]">
+              批次号：{{ pendingBatchNo || '--' }}
+            </div>
+          </div>
+        </div>
+        <CardSourceTabs v-model:active-key="activeTab" :show-range="false">
+          <template #excel>
+            <UploadDragger
+              v-model:file-list="uploadFile"
+              accept=".xlsx,.xls"
+              class="business-acceptance-excel-upload"
+              :before-upload="handleBeforeUpload"
+              :max-count="1"
+              @remove="handleRemove"
+            >
+              <div class="ant-upload-drag-icon flex justify-center">
+                <Inbox />
+              </div>
+              <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+              <p class="ant-upload-hint">
+                模板包含 ICCID、MSISDN、IMSI
+                和续费年限，支持填写任一号码进行识别，其中 续费年限为必填项
+              </p>
+            </UploadDragger>
+            <div class="mt-3 flex justify-center">
+              <Button
+                :icon="h(DownloadOutlined)"
+                @click="handleDownloadTemplate"
+              >
+                下载 Excel 模板
+              </Button>
+            </div>
+          </template>
+
+          <template #input>
+            <InputSourceForm />
+          </template>
+        </CardSourceTabs>
+      </template>
+
+      <template v-else>
+        <div class="flex items-center justify-between">
+          <span class="font-medium text-[#111827] dark:text-[#f2f2f2]">
+            续费确认
+          </span>
+          <Button size="small" @click="handleBackToSource">上一步</Button>
+        </div>
+
+        <section
+          v-if="preparedResult"
+          class="renew-summary rounded-md border border-[#e5e7eb] bg-[#fafafa] p-4 text-[13px] dark:border-[#333] dark:bg-[#1f1f1f]"
+        >
+          <div
+            class="grid grid-cols-1 gap-3 lg:grid-cols-[minmax(0,1.2fr)_minmax(260px,0.8fr)]"
+          >
+            <div class="space-y-3">
+              <div>
+                <div class="text-[12px] text-[#86909c]">续费套餐</div>
+                <div
+                  class="mt-1 text-[18px] font-semibold text-[#111827] dark:text-[#f2f2f2]"
+                >
+                  {{ selectedPackageDisplay }}
+                </div>
+              </div>
+
+              <dl
+                class="grid grid-cols-1 gap-3 text-[#374151] sm:grid-cols-2 xl:grid-cols-4 dark:text-[#d4d4d4]"
+              >
+                <div class="renew-summary-item">
+                  <dt>续费卡数</dt>
+                  <dd>{{ renewQuantity }} 张</dd>
+                </div>
+                <div v-if="renewFailedCount > 0" class="renew-summary-item">
+                  <dt>失效卡数</dt>
+                  <dd class="text-[#d93026]">{{ renewFailedCount }} 张</dd>
+                </div>
+                <div class="renew-summary-item">
+                  <dt>续费单价</dt>
+                  <dd>￥{{ formatAmount(renewUnitPrice) }}</dd>
+                </div>
+                <div class="renew-summary-item">
+                  <dt>{{ renewDurationFieldLabel }}</dt>
+                  <dd>{{ formatDurationLabel(selectedRenewDuration) }}</dd>
+                </div>
+                <div class="renew-summary-item">
+                  <dt>付款方式</dt>
+                  <dd>
+                    {{
+                      activePaymentMode === 'balance' ? '余额支付' : '线下支付'
+                    }}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+
+            <div
+              class="rounded-md border border-[#e5e7eb] bg-white px-4 py-3 dark:border-[#333] dark:bg-[#262626]"
+            >
+              <div class="text-[12px] text-[#86909c]">预计应付金额</div>
+              <div class="mt-1 text-[24px] font-semibold text-[#1677ff]">
+                ￥{{ previewTotalAmount || '0.00' }}
+              </div>
+              <template v-if="activePaymentMode === 'balance'">
+                <div class="mt-3 grid grid-cols-2 gap-2 text-[12px]">
+                  <div>
+                    <div class="text-[#86909c]">账户余额</div>
+                    <div class="mt-1 font-medium">
+                      ￥{{ availableBalance.toFixed(2) }}
+                    </div>
+                  </div>
+                  <div>
+                    <div class="text-[#86909c]">扣后余额</div>
+                    <div
+                      class="mt-1 font-medium"
+                      :class="balanceEnough ? '' : 'text-[#d93026]'"
+                    >
+                      ￥{{ balanceAfterRenew }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+
+              <div
+                class="mt-3 border-t border-[#e5e7eb] pt-3 dark:border-[#333]"
+              >
+                <div class="grid grid-cols-1 gap-2 text-[12px] sm:grid-cols-2">
+                  <div class="renew-summary-item">
+                    <dt>续费日期</dt>
+                    <dd>{{ renewBeginDisplay }}</dd>
+                  </div>
+                  <div class="renew-summary-item">
+                    <dt>续费后到期时间</dt>
+                    <dd>{{ renewEndDisplay }}</dd>
+                  </div>
+                </div>
+                <div class="mt-2 text-[12px] text-[#86909c]">
+                  {{ renewBeginDisplay }} → {{ renewEndDisplay }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="renewFailedItems.length > 0"
+            class="mt-3 overflow-hidden rounded-md border border-[#e5e7eb] bg-white dark:border-[#333] dark:bg-[#262626]"
+          >
+            <div
+              class="grid grid-cols-[minmax(180px,0.8fr)_minmax(260px,1.2fr)] border-b border-[#e5e7eb] bg-[#fafafa] px-3 py-2 text-[12px] text-[#86909c] dark:border-[#333] dark:bg-[#1f1f1f]"
+            >
+              <span>失效卡 ICCID</span>
+              <span>失败原因</span>
+            </div>
+            <div
+              v-for="item in renewFailedItems"
+              :key="`${item.iccid}-${item.reason}`"
+              class="grid grid-cols-[minmax(180px,0.8fr)_minmax(260px,1.2fr)] gap-3 border-b border-[#f0f0f0] px-3 py-2 text-[12px] last:border-b-0 dark:border-[#333]"
+            >
+              <span class="break-all text-[#374151] dark:text-[#d4d4d4]">
+                {{ item.iccid || '--' }}
+              </span>
+              <span class="text-[#d93026]">{{
+                item.reason || '续费条件已变化'
+              }}</span>
+            </div>
+            <div
+              v-if="preparedResult.failedItemsTruncated"
+              class="border-t border-[#e5e7eb] px-3 py-2 text-[12px] text-[#86909c] dark:border-[#333]"
+            >
+              仅展示前 {{ renewFailedItems.length }} 张，其余请到执行日志查看。
+            </div>
+          </div>
+
+          <div
+            v-if="activePaymentMode === 'balance' && !balanceEnough"
+            class="mt-2 text-[13px] text-[#d93026]"
+          >
+            账户余额不足，请充值后再提交续费。
+          </div>
+        </section>
+
+        <ConfirmForm />
+      </template>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.business-acceptance-excel-upload :deep(.ant-upload-drag) {
+  height: 160px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag .ant-upload-btn) {
+  padding: 18px 16px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag-icon) {
+  margin-bottom: 8px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-text) {
+  margin-bottom: 4px;
+}
+
+.renew-summary-item dt {
+  color: #86909c;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.renew-summary-item dd {
+  margin-top: 4px;
+  color: #111827;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+:deep(.dark) .renew-summary-item dd {
+  color: #f2f2f2;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/trafficCutoff.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/trafficCutoff.vue
new file mode 100644
index 0000000..d20983d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/trafficCutoff.vue
@@ -0,0 +1,378 @@
+<script setup lang="ts" name="BusinessAcceptanceTrafficCutoff">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type {
+  TSimCardTrafficCutoffInputSubmitParam,
+  TSimCardTrafficCutoffSubmitRes,
+} from '#/api/iotlcm/tCommunication/tSimCardTrafficCutoff/type';
+
+import { h, ref, watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal, z } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import { Button, message, Upload, UploadDragger } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import * as trafficCutoffApi from '#/api/iotlcm/tCommunication/tSimCardTrafficCutoff';
+import BetterVben from '#/constants/BetterVben';
+import FormOption from '#/constants/FormOption';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import CardSourceTabs from '../components/cardSourceTabs.vue';
+
+const MAX_EXCEL_FILE_SIZE = 50;
+const SOURCE_MODAL_CLASS = 'w-[760px] max-w-[calc(100vw-48px)]';
+
+type TrafficCutoffTab = 'excel' | 'input';
+
+const activeTab = ref<TrafficCutoffTab>('excel');
+const { hasAccessByCodes } = useAccess();
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+
+function updateConfirmState() {
+  modalApi.setState({ confirmDisabled: false });
+}
+
+watch(activeTab, () => updateConfirmState(), { flush: 'post' });
+
+function showSuccessMessage(res?: TSimCardTrafficCutoffSubmitRes) {
+  const batchText = res?.batchNo ? `, 批次号: ${res.batchNo}` : '';
+  const totalText = Number.isFinite(res?.total) ? `, 共 ${res?.total} 条` : '';
+  message.success(`达量断网配置已提交${batchText}${totalText}`);
+}
+
+function assertTrafficCutoffConfigBatch(res?: TSimCardTrafficCutoffSubmitRes) {
+  if (res?.batchType !== 41 || !res.batchNo?.startsWith('TCC')) {
+    throw new Error('提交接口未返回达量断网配置批次');
+  }
+}
+
+async function handleDownloadTemplate() {
+  const success = await commonDownloadExcel(
+    trafficCutoffApi.DownloadTemplate,
+    '',
+    {},
+  );
+  if (success) {
+    message.success('下载成功');
+  }
+}
+
+function handleBeforeUpload(file: File) {
+  const suffix = file.name.slice(Math.max(0, file.name.lastIndexOf('.') + 1));
+  if (!['xls', 'xlsx'].includes(suffix.toLowerCase())) {
+    message.error('请上传 xls/xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  if (file.size / 1024 / 1024 > MAX_EXCEL_FILE_SIZE) {
+    message.error(`文件大小不能超过 ${MAX_EXCEL_FILE_SIZE}MB`);
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = file;
+  uploadFile.value = [
+    {
+      uid: `${file.name}-${Date.now()}`,
+      name: file.name,
+      status: 'done',
+      originFileObj: file,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function validateThreshold() {
+  const [valid, value] =
+    await BetterVben.function.formValidate(thresholdFormApi);
+  if (!valid) {
+    return;
+  }
+  const config = value as {
+    trafficCutoffCrossMonthHold: 0 | 1;
+    trafficCutoffStatus: 0 | 1 | 2;
+    trafficCutoffThreshold?: number;
+  };
+  return {
+    trafficCutoffCrossMonthHold:
+      config.trafficCutoffStatus === 1 ? config.trafficCutoffCrossMonthHold : 0,
+    trafficCutoffStatus: config.trafficCutoffStatus,
+    trafficCutoffThreshold:
+      config.trafficCutoffStatus === 0
+        ? 0
+        : (config.trafficCutoffThreshold ?? 0),
+  };
+}
+
+async function handleSubmitExcel() {
+  if (!importFile.value) {
+    message.warning('请先上传 Excel 文件');
+    return;
+  }
+  const threshold = await validateThreshold();
+  if (!threshold) {
+    return;
+  }
+  const res = await trafficCutoffApi.ExcelSubmit({
+    file: importFile.value,
+    trafficCutoffStatus: threshold.trafficCutoffStatus,
+    trafficCutoffThreshold: threshold.trafficCutoffThreshold,
+    trafficCutoffCrossMonthHold: threshold.trafficCutoffCrossMonthHold,
+  });
+  assertTrafficCutoffConfigBatch(res);
+  showSuccessMessage(res);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleSubmitInput() {
+  const threshold = await validateThreshold();
+  if (!threshold) {
+    return;
+  }
+  const [valid, value] = await BetterVben.function.formValidate(inputFormApi);
+  if (!valid) {
+    return;
+  }
+  const params = value as TSimCardTrafficCutoffInputSubmitParam;
+  const res = await trafficCutoffApi.InputSubmit({
+    input: params.input,
+    trafficCutoffStatus: threshold.trafficCutoffStatus,
+    trafficCutoffThreshold: threshold.trafficCutoffThreshold,
+    trafficCutoffCrossMonthHold: threshold.trafficCutoffCrossMonthHold,
+  });
+  assertTrafficCutoffConfigBatch(res);
+  showSuccessMessage(res);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleConfirm() {
+  const permission =
+    activeTab.value === 'excel'
+      ? 'cpm:iot:tSimCardTrafficCutoff:excel:submit'
+      : 'cpm:iot:tSimCardTrafficCutoff:input:submit';
+  if (!hasAccessByCodes([permission])) {
+    message.warning('没有当前方式的达量断网配置权限');
+    return;
+  }
+  await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+    if (activeTab.value === 'excel') {
+      await handleSubmitExcel();
+      return;
+    }
+    await handleSubmitInput();
+  });
+}
+
+async function handleReset() {
+  activeTab.value = 'excel';
+  uploadFile.value = [];
+  importFile.value = undefined;
+  await thresholdFormApi.resetForm();
+  await inputFormApi.resetForm();
+  modalApi.setState({
+    confirmDisabled: false,
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+}
+
+const [ThresholdForm, thresholdFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'trafficCutoffStatus',
+      label: '配置状态',
+      component: 'HtcFormSwitch',
+      defaultValue: 1,
+      componentProps: {
+        checkedChildren: '启用',
+        checkedValue: 1,
+        unCheckedChildren: '禁用',
+        unCheckedValue: 2,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'trafficCutoffThreshold',
+      label: '阈值(MB)',
+      component: 'InputNumber',
+      componentProps: {
+        class: 'w-full',
+        min: 0,
+        precision: 3,
+        step: 1,
+        placeholder: '请输入达量断网阈值',
+      },
+      dependencies: {
+        triggerFields: ['trafficCutoffStatus'],
+        show: (values) => values.trafficCutoffStatus === 1,
+        rules: (values) => {
+          if (values.trafficCutoffStatus !== 1) {
+            return null;
+          }
+          let rule = z.coerce
+            .number({
+              invalid_type_error: '请输入达量断网阈值',
+              required_error: '请输入达量断网阈值',
+            })
+            .min(0, '阈值不能小于 0');
+          if (values.trafficCutoffStatus === 1) {
+            rule = rule.positive('开启达量断网时阈值必须大于 0');
+          }
+          return rule.refine((value) => Number(value.toFixed(3)) === value, {
+            message: '阈值最多保留 3 位小数',
+          });
+        },
+        async trigger(values, actions) {
+          if (
+            values.trafficCutoffStatus === 0 &&
+            values.trafficCutoffThreshold !== 0
+          ) {
+            await actions.setFieldValue('trafficCutoffThreshold', 0);
+          }
+        },
+      },
+    },
+    {
+      fieldName: 'trafficCutoffCrossMonthHold',
+      label: '跨月保持断网',
+      component: 'HtcFormSwitch',
+      defaultValue: 0,
+      componentProps: {
+        checkedChildren: '开启',
+        checkedValue: 1,
+        unCheckedChildren: '关闭',
+        unCheckedValue: 0,
+      },
+      help: '开启后，卡片因达量断网时，跨账期恢复网络后会再次自动断网，直至人工开网。',
+      dependencies: {
+        triggerFields: ['trafficCutoffStatus'],
+        disabled: (values) => values.trafficCutoffStatus !== 1,
+        async trigger(values, actions) {
+          if (values.trafficCutoffStatus !== 1) {
+            await actions.setFieldValue('trafficCutoffCrossMonthHold', 0);
+          }
+        },
+      },
+    },
+  ],
+});
+
+const [InputForm, inputFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'input',
+      label: '批量输入',
+      component: 'Textarea',
+      componentProps: FormOption.Component.Textarea({
+        autoSize: {
+          minRows: 8,
+          maxRows: 12,
+        },
+        placeholder: '每行填写 ICCID，或 ICCID MSISDN IMSI',
+        rows: 8,
+      }),
+      rules: z.string().trim().min(1, '请输入批量输入内容'),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: SOURCE_MODAL_CLASS,
+  confirmText: '提交',
+  destroyOnClose: false,
+  title: '达量断网配置',
+  async onCancel() {
+    modalApi.close();
+    await handleReset();
+  },
+  async onConfirm() {
+    await handleConfirm();
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+      return;
+    }
+    await handleReset();
+    const data = modalApi.getData() as undefined | { cardValue?: string };
+    modalApi.setData({});
+    if (data?.cardValue) {
+      if (!hasAccessByCodes(['cpm:iot:tSimCardTrafficCutoff:input:submit'])) {
+        message.warning('没有达量断网手动配置权限');
+        modalApi.close();
+        return;
+      }
+      activeTab.value = 'input';
+      await inputFormApi.setValues({ input: data.cardValue });
+    }
+    updateConfirmState();
+  },
+});
+</script>
+
+<template>
+  <Modal>
+    <ThresholdForm />
+
+    <CardSourceTabs v-model:active-key="activeTab" :show-range="false">
+      <template #excel>
+        <UploadDragger
+          v-model:file-list="uploadFile"
+          accept=".xlsx,.xls"
+          class="business-acceptance-excel-upload"
+          :before-upload="handleBeforeUpload"
+          :max-count="1"
+          @remove="handleRemove"
+        >
+          <div class="ant-upload-drag-icon flex justify-center">
+            <Inbox />
+          </div>
+          <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+          <p class="ant-upload-hint">
+            支持模板中的 ICCID、MSISDN 和 IMSI 列，ICCID 为必填项
+          </p>
+        </UploadDragger>
+
+        <div class="mt-3 flex justify-center">
+          <Button :icon="h(DownloadOutlined)" @click="handleDownloadTemplate">
+            下载 Excel 模板
+          </Button>
+        </div>
+      </template>
+
+      <template #input>
+        <InputForm />
+      </template>
+    </CardSourceTabs>
+  </Modal>
+</template>
+
+<style scoped>
+.business-acceptance-excel-upload :deep(.ant-upload-drag) {
+  height: 160px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag .ant-upload-btn) {
+  padding: 18px 16px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag-icon) {
+  margin-bottom: 8px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-text) {
+  margin-bottom: 4px;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/unsubscribe.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/unsubscribe.vue
new file mode 100644
index 0000000..525fc7c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/unsubscribe.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts" name="BusinessAcceptanceUnsubscribe">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type {
+  TSimCardUnsubInputSubmitParam,
+  TSimCardUnsubRangeSubmitParam,
+  TSimCardUnsubSubmitRes,
+} from '#/api/iotlcm/tCommunication/tSimCardUnsub/type';
+
+import { h, ref } from 'vue';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import { Button, message, Upload, UploadDragger } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  DownloadTemplate,
+  ExcelSubmit,
+  InputSubmit,
+  RangeSubmit,
+} from '#/api/iotlcm/tCommunication/tSimCardUnsub';
+import BetterVben from '#/constants/BetterVben';
+import FormOption from '#/constants/FormOption';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import CardSourceTabs from '../components/cardSourceTabs.vue';
+
+const MAX_EXCEL_FILE_SIZE = 50;
+const SOURCE_MODAL_CLASS = 'w-[760px] max-w-[calc(100vw-48px)]';
+
+type UnsubscribeTab = 'excel' | 'input' | 'range';
+
+const activeTab = ref<UnsubscribeTab>('excel');
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+
+function showSuccessMessage(res?: TSimCardUnsubSubmitRes) {
+  const batchText = res?.batchNo ? `，批次号：${res.batchNo}` : '';
+  message.success(`退订提交成功${batchText}`);
+}
+
+async function handleDownloadTemplate() {
+  const success = await commonDownloadExcel(DownloadTemplate, '', {});
+  if (success) {
+    message.success('下载成功');
+  }
+}
+
+function handleBeforeUpload(file: File) {
+  const rawFile = file as File;
+  const suffix = rawFile.name.slice(
+    Math.max(0, rawFile.name.lastIndexOf('.') + 1),
+  );
+  const isExcel = ['xls', 'xlsx'].includes(suffix.toLowerCase());
+  if (!isExcel) {
+    message.error('请上传 xls/xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  const isLtMaxSize = rawFile.size / 1024 / 1024 <= MAX_EXCEL_FILE_SIZE;
+  if (!isLtMaxSize) {
+    message.error(`文件大小不能超过 ${MAX_EXCEL_FILE_SIZE}MB`);
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = rawFile;
+  uploadFile.value = [
+    {
+      uid: `${rawFile.name}-${Date.now()}`,
+      name: rawFile.name,
+      status: 'done',
+      originFileObj: rawFile,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function handleSubmitExcel() {
+  if (!importFile.value) {
+    message.warning('请先上传 Excel 文件');
+    return;
+  }
+  const res = await ExcelSubmit({
+    file: importFile.value,
+  });
+  showSuccessMessage(res);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleSubmitInput() {
+  const [flag, value] = await BetterVben.function.formValidate(inputFormApi);
+  if (!flag) {
+    return;
+  }
+  const res = await InputSubmit(value as TSimCardUnsubInputSubmitParam);
+  showSuccessMessage(res);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleSubmitRange() {
+  const [flag, value] = await BetterVben.function.formValidate(rangeFormApi);
+  if (!flag) {
+    return;
+  }
+  const res = await RangeSubmit(value as TSimCardUnsubRangeSubmitParam);
+  showSuccessMessage(res);
+  modalApi.close();
+  await handleReset();
+}
+
+async function handleConfirm() {
+  await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+    if (activeTab.value === 'excel') {
+      await handleSubmitExcel();
+      return;
+    }
+    if (activeTab.value === 'input') {
+      await handleSubmitInput();
+      return;
+    }
+    await handleSubmitRange();
+  });
+}
+
+async function handleReset() {
+  modalApi.setState({
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+  activeTab.value = 'excel';
+  uploadFile.value = [];
+  importFile.value = undefined;
+  await inputFormApi.resetForm();
+  await rangeFormApi.resetForm();
+  modalApi.setState({
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+}
+
+const [InputForm, inputFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'input',
+      label: '批量输入',
+      component: 'Textarea',
+      componentProps: FormOption.Component.Textarea({
+        autoSize: {
+          minRows: 8,
+          maxRows: 12,
+        },
+        placeholder: '每行一个 ICCID',
+        rows: 8,
+      }),
+      rules: z.string().trim().min(1, '请输入批量输入内容'),
+    },
+  ],
+});
+
+const [RangeForm, rangeFormApi] = useVbenForm({
+  ...BetterVben.form.grid,
+  schema: [
+    {
+      fieldName: 'startIccid',
+      label: '起始ICCID',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入起始 ICCID',
+      },
+      rules: z.string().trim().min(1, '请输入起始 ICCID'),
+    },
+    {
+      fieldName: 'endIccid',
+      label: '结束ICCID',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入结束 ICCID',
+      },
+      rules: z.string().trim().min(1, '请输入结束 ICCID'),
+    },
+    {
+      fieldName: 'startMsisdn',
+      label: '起始MSISDN',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入起始 MSISDN',
+      },
+      rules: z.string().trim().min(1, '请输入起始 MSISDN'),
+    },
+    {
+      fieldName: 'endMsisdn',
+      label: '结束MSISDN',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入结束 MSISDN',
+      },
+      rules: z.string().trim().min(1, '请输入结束 MSISDN'),
+    },
+    {
+      fieldName: 'startImsi',
+      label: '起始IMSI',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入起始 IMSI',
+      },
+      rules: z.string().trim().min(1, '请输入起始 IMSI'),
+    },
+    {
+      fieldName: 'endImsi',
+      label: '结束IMSI',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入结束 IMSI',
+      },
+      rules: z.string().trim().min(1, '请输入结束 IMSI'),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: SOURCE_MODAL_CLASS,
+  confirmText: '提交',
+  destroyOnClose: false,
+  async onCancel() {
+    modalApi.close();
+    await handleReset();
+  },
+  async onConfirm() {
+    await handleConfirm();
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="退订">
+    <CardSourceTabs v-model:active-key="activeTab">
+      <template #excel>
+        <UploadDragger
+          v-model:file-list="uploadFile"
+          accept=".xlsx,.xls"
+          class="business-acceptance-excel-upload"
+          :before-upload="handleBeforeUpload"
+          :max-count="1"
+          @remove="handleRemove"
+        >
+          <div class="ant-upload-drag-icon flex justify-center">
+            <Inbox />
+          </div>
+          <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+          <p class="ant-upload-hint">
+            上传 xlsx/xls 后点击“直接提交”，不再填写页面业务表单
+          </p>
+        </UploadDragger>
+        <div class="mt-3 flex justify-center">
+          <Button :icon="h(DownloadOutlined)" @click="handleDownloadTemplate">
+            下载 Excel 模板
+          </Button>
+        </div>
+      </template>
+
+      <template #input>
+        <InputForm />
+      </template>
+
+      <template #range>
+        <RangeForm />
+      </template>
+    </CardSourceTabs>
+  </Modal>
+</template>
+
+<style scoped>
+.business-acceptance-excel-upload :deep(.ant-upload-drag) {
+  height: 160px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag .ant-upload-btn) {
+  padding: 18px 16px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag-icon) {
+  margin-bottom: 8px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-text) {
+  margin-bottom: 4px;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/usageHistoryQuery.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/usageHistoryQuery.vue
new file mode 100644
index 0000000..21d9f69
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/usageHistoryQuery.vue
@@ -0,0 +1,467 @@
+<script setup lang="ts" name="BusinessAcceptanceUsageHistoryQuery">
+import type { Dayjs } from 'dayjs';
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type {
+  ExportColumn,
+  QueryMode,
+  SimCardQueryDeptOption,
+} from '#/api/iotlcm/tCommunication/tSimCardQuery/type';
+
+import { computed, h, ref, watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal, z } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import {
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  RangePicker,
+  TreeSelect,
+  Upload,
+  UploadDragger,
+  message,
+} from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import * as queryApi from '#/api/iotlcm/tCommunication/tSimCardQuery';
+import BetterVben from '#/constants/BetterVben';
+import FormOption from '#/constants/FormOption';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import CardSourceTabs from '../components/cardSourceTabs.vue';
+
+const MAX_ROWS = 20_000;
+const MAX_EXCEL_FILE_SIZE = 20;
+const SOURCE_MODAL_CLASS = 'w-[860px] max-w-[calc(100vw-48px)]';
+
+const activeTab = ref<QueryMode>('excel');
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+const columnOptions = ref<ExportColumn[]>([]);
+const checkedFields = ref<string[]>([]);
+const deptOptions = ref<SimCardQueryDeptOption[]>([]);
+const deptTreeData = ref<any[]>([]);
+const selectedDeptId = ref<number>();
+const expireRange = ref<[Dayjs, Dayjs]>();
+const submitting = ref(false);
+const metaLoading = ref(false);
+const metaError = ref(false);
+
+// 查询和导出共用一个权限码：拆细只会导致少授一个就整个功能不可用。
+const { hasAccessByCodes } = useAccess();
+const canUse = computed(() =>
+  hasAccessByCodes(['cpm:iot:tSimCardUsageHistory:view']),
+);
+const canDownloadTemplate = canUse;
+
+// 三码是对账锚点，固定导出且不可取消。
+const MANDATORY_FIELDS = ['iccid', 'msisdn', 'imsi'];
+
+const canSubmit = computed(
+  () =>
+    canUse.value &&
+    !submitting.value &&
+    !metaLoading.value &&
+    !metaError.value &&
+    checkedFields.value.length > 0,
+);
+
+const dimensionOptions = [
+  { label: 'ICCID', value: 'iccid' },
+  { label: 'MSISDN', value: 'msisdn' },
+  { label: 'IMSI', value: 'imsi' },
+];
+
+/** 扁平部门列表转树，parentId 不在可见范围内的节点按根节点处理。 */
+function buildDeptTree(list: SimCardQueryDeptOption[]) {
+  const nodes = new Map<number, any>();
+  for (const item of list) {
+    nodes.set(item.deptId, {
+      value: item.deptId,
+      title: `${item.deptName}（${item.cardCount} 张）`,
+      deptName: item.deptName,
+      cardCount: item.cardCount,
+      parentId: item.parentId,
+      children: [],
+    });
+  }
+  const roots: any[] = [];
+  for (const node of nodes.values()) {
+    const parent = nodes.get(node.parentId);
+    if (parent && parent.value !== node.value) {
+      parent.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+  return roots;
+}
+
+async function loadMeta() {
+  if (metaLoading.value) return;
+  metaLoading.value = true;
+  metaError.value = false;
+  columnOptions.value = [];
+  checkedFields.value = [];
+  try {
+    const [columnsRes, deptRes] = await Promise.all([
+      queryApi.UsageColumns(),
+      queryApi.UsageDeptOptions(),
+    ]);
+    columnOptions.value = columnsRes.items ?? [];
+    checkedFields.value = columnOptions.value.map((item) => item.field);
+    deptOptions.value = deptRes.items ?? [];
+    deptTreeData.value = buildDeptTree(deptOptions.value);
+    // 默认指向当前登录用户所属企业，避免下拉显示空白或 0。
+    const current = Number(deptRes.currentDeptId);
+    if (current > 0 && deptOptions.value.some((d) => d.deptId === current)) {
+      selectedDeptId.value = current;
+    } else if (deptOptions.value.length > 0) {
+      selectedDeptId.value = deptOptions.value[0]?.deptId;
+    }
+    if (columnOptions.value.length === 0) {
+      throw new Error('未获取到可选导出列');
+    }
+  } catch {
+    metaError.value = true;
+    message.warning('加载查询选项失败，请关闭后重新打开再试');
+  } finally {
+    metaLoading.value = false;
+    modalApi.setState({ confirmDisabled: !canSubmit.value });
+  }
+}
+
+watch(canSubmit, (enabled) => {
+  modalApi.setState({ confirmDisabled: !enabled });
+});
+
+watch(activeTab, () => {
+  modalApi.setState({ confirmDisabled: !canSubmit.value });
+});
+
+function handleBeforeUpload(file: File) {
+  const suffix = file.name.slice(Math.max(0, file.name.lastIndexOf('.') + 1));
+  if (suffix.toLowerCase() !== 'xlsx') {
+    message.error('请上传 xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  if (file.size / 1024 / 1024 > MAX_EXCEL_FILE_SIZE) {
+    message.error(`文件大小不能超过 ${MAX_EXCEL_FILE_SIZE}MB`);
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = file;
+  uploadFile.value = [
+    {
+      uid: `${file.name}-${Date.now()}`,
+      name: file.name,
+      status: 'done',
+      originFileObj: file,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function handleDownloadTemplate() {
+  if (!canDownloadTemplate.value) {
+    message.warning('没有下载模板权限');
+    return;
+  }
+  const success = await commonDownloadExcel(
+    queryApi.DownloadUsageTemplate,
+    '',
+    {},
+  );
+  if (success) {
+    message.success('下载成功');
+  }
+}
+
+/** 三码始终在导出列里，即使 CheckboxGroup 被清空也补回来（后端同样会强制补）。 */
+function currentColumns() {
+  const picked = columnOptions.value.filter((item) =>
+    checkedFields.value.includes(item.field),
+  );
+  return [
+    ...columnOptions.value.filter((item) =>
+      MANDATORY_FIELDS.includes(item.field),
+    ),
+    ...picked.filter((item) => !MANDATORY_FIELDS.includes(item.field)),
+  ];
+}
+
+async function handleConfirm() {
+  if (submitting.value) return;
+  if (!canSubmit.value || checkedFields.value.length === 0) {
+    message.warning('查询选项尚未加载完成，请至少勾选一个导出字段');
+    return;
+  }
+  submitting.value = true;
+  try {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      if (activeTab.value === 'excel') {
+        if (!importFile.value) {
+          message.warning('请先上传 Excel 文件');
+          return;
+        }
+        onSubmitSuccess(await queryApi.UsageExport({
+          mode: 'excel', file: importFile.value, exportColumns: currentColumns(),
+        }));
+        return;
+      }
+      if (activeTab.value === 'input') {
+        const [valid, value] = await BetterVben.function.formValidate(inputFormApi);
+        if (!valid) return;
+        const text = String(value.input ?? '').trim();
+        const count = text.split(/\r?\n/).filter((line) => line.trim()).length;
+        if (count < 1 || count > MAX_ROWS) {
+          message.warning(`单次请输入 1 至 ${MAX_ROWS} 条非空记录`);
+          return;
+        }
+        onSubmitSuccess(await queryApi.UsageExport({
+          mode: 'input', batchInput: text, exportColumns: currentColumns(),
+        }));
+        return;
+      }
+      if (activeTab.value === 'range') {
+        const [valid, value] = await BetterVben.function.formValidate(rangeFormApi);
+        if (!valid) return;
+        const startNum = String(value.startNum ?? '').trim();
+        const endNum = String(value.endNum ?? '').trim();
+        if (!/^\d+$/.test(startNum) || !/^\d+$/.test(endNum) || startNum.length !== endNum.length || startNum > endNum) {
+          message.warning('起止号码必须为等长数字，且起始号码不能大于结束号码');
+          return;
+        }
+        onSubmitSuccess(await queryApi.UsageExport({
+          mode: 'range', dimension: String(value.dimension), startNum, endNum,
+          exportColumns: currentColumns(),
+        }));
+        return;
+      }
+      if (!selectedDeptId.value || selectedDeptId.value <= 0) {
+        message.warning('请选择所属公司');
+        return;
+      }
+      onSubmitSuccess(await queryApi.UsageExport({
+        mode: 'dept',
+        deptId: selectedDeptId.value,
+        expireStartTime: expireRange.value?.[0]?.format('YYYY-MM-DD'),
+        expireEndTime: expireRange.value?.[1]?.format('YYYY-MM-DD'),
+        exportColumns: currentColumns(),
+      }));
+    });
+  } finally {
+    submitting.value = false;
+    modalApi.setState({ confirmLoading: false, submitting: false, confirmDisabled: !canSubmit.value });
+  }
+}
+
+function onSubmitSuccess(res?: { taskNo?: string; total?: number }) {
+  window.dispatchEvent(new CustomEvent('iotlcm:export-submitted'));
+  const batchText = res?.taskNo ? `，任务编号：${res.taskNo}` : '';
+  // 号段/按公司模式提交时条数未知（后端返回 -1），此时不显示预计行数
+  const totalText =
+    typeof res?.total === 'number' && res.total > 0
+      ? `，预计 ${res.total} 行`
+      : '';
+  message.success(`导出任务已提交${batchText}${totalText}，请到下载中心查看`);
+  modalApi.close();
+  handleReset();
+}
+
+async function handleReset() {
+  activeTab.value = 'excel';
+  uploadFile.value = [];
+  importFile.value = undefined;
+  expireRange.value = undefined;
+  await inputFormApi.resetForm();
+  await rangeFormApi.resetForm();
+  modalApi.setState({
+    confirmDisabled: true,
+    confirmLoading: false,
+    loading: false,
+    submitting: false,
+  });
+}
+
+const [InputForm, inputFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'input',
+      label: '批量输入',
+      component: 'Textarea',
+      componentProps: FormOption.Component.Textarea({
+        autoSize: { minRows: 8, maxRows: 12 },
+        placeholder: `每行填写 ICCID，或 ICCID MSISDN IMSI（单次最多 ${MAX_ROWS} 条）`,
+        rows: 8,
+      }),
+      rules: z.string().trim().min(1, '请输入批量输入内容'),
+    },
+  ],
+});
+
+const [RangeForm, rangeFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'dimension',
+      label: '号码维度',
+      component: 'Select',
+      componentProps: {
+        options: dimensionOptions,
+        placeholder: '请选择号码维度',
+      },
+      rules: z.string().min(1, '请选择号码维度'),
+    },
+    {
+      fieldName: 'startNum',
+      label: '起始号码',
+      component: 'Input',
+      componentProps: { placeholder: '请输入起始号码' },
+      rules: z.string().trim().min(1, '请输入起始号码'),
+    },
+    {
+      fieldName: 'endNum',
+      label: '结束号码',
+      component: 'Input',
+      componentProps: { placeholder: '请输入结束号码' },
+      rules: z.string().trim().min(1, '请输入结束号码'),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: SOURCE_MODAL_CLASS,
+  confirmText: '提交导出',
+  destroyOnClose: false,
+  async onCancel() {
+    modalApi.close();
+    await handleReset();
+  },
+  async onConfirm() {
+    await handleConfirm();
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+      return;
+    }
+    activeTab.value = 'excel';
+    modalApi.setState({ confirmDisabled: true });
+    await loadMeta();
+  },
+});
+</script>
+
+<template>
+  <Modal title="月历史用量查询">
+    <div class="mb-4 rounded-md border border-[#e5e7eb] p-3 dark:border-[#2f2f2f]">
+      <div class="mb-2 text-[13px] font-[600]">导出列（至少勾选一项）</div>
+      <div v-if="columnOptions.length === 0" class="text-[13px] text-[#9ca3af]">
+        加载中…
+      </div>
+      <div v-else>
+        <CheckboxGroup v-model:value="checkedFields">
+          <div class="grid grid-cols-2 gap-x-2 gap-y-1 sm:grid-cols-3">
+            <Checkbox
+              v-for="column in columnOptions"
+              :key="column.field"
+              :value="column.field"
+              :disabled="MANDATORY_FIELDS.includes(column.field)"
+              class="text-[13px]"
+            >
+              {{ column.label }}
+              <span
+                v-if="MANDATORY_FIELDS.includes(column.field)"
+                class="text-[11px] text-[#9ca3af]"
+              >必选</span>
+            </Checkbox>
+          </div>
+        </CheckboxGroup>
+      </div>
+    </div>
+
+    <CardSourceTabs
+      v-model:active-key="activeTab"
+      :show-dept="true"
+      :show-range="true"
+    >
+      <template #excel>
+        <UploadDragger
+          v-model:file-list="uploadFile"
+          accept=".xlsx"
+          class="business-acceptance-excel-upload"
+          :before-upload="handleBeforeUpload"
+          :max-count="1"
+          @remove="handleRemove"
+        >
+          <div class="ant-upload-drag-icon flex justify-center">
+            <Inbox />
+          </div>
+          <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+          <p class="ant-upload-hint">
+            单次最多导入 {{ MAX_ROWS }} 条，超出请拆分后分批导入
+          </p>
+        </UploadDragger>
+
+        <div v-if="canDownloadTemplate" class="mt-3 flex justify-center">
+          <Button :icon="h(DownloadOutlined)" @click="handleDownloadTemplate">
+            下载 Excel 模板
+          </Button>
+        </div>
+      </template>
+
+      <template #input>
+        <InputForm />
+      </template>
+
+      <template #range>
+        <RangeForm />
+      </template>
+
+      <template #dept>
+        <div class="flex flex-col gap-3">
+          <div>
+            <div class="mb-1 text-[13px] text-[#374151] dark:text-[#d1d5db]">
+              所属公司
+            </div>
+            <TreeSelect
+              v-model:value="selectedDeptId"
+              :tree-data="deptTreeData"
+              class="w-full"
+              placeholder="请选择所属公司"
+              show-search
+              tree-default-expand-all
+              tree-node-filter-prop="deptName"
+            />
+          </div>
+          <div>
+            <div class="mb-1 text-[13px] text-[#374151] dark:text-[#d1d5db]">
+              到期日期
+            </div>
+            <RangePicker v-model:value="expireRange" class="w-full" />
+          </div>
+        </div>
+      </template>
+    </CardSourceTabs>
+  </Modal>
+</template>
+
+<style scoped>
+.business-acceptance-excel-upload :deep(.ant-upload-drag) {
+  height: 160px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag .ant-upload-btn) {
+  padding: 18px 16px;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/warningConfig.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/warningConfig.vue
new file mode 100644
index 0000000..0f45ccc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tBusinessAcceptance/views/warningConfig.vue
@@ -0,0 +1,742 @@
+<script setup lang="ts" name="BusinessAcceptanceWarningConfig">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import type {
+  TSimWarningConfigCommonParam,
+  TSimWarningConfigRangeSubmitParam,
+  TSimWarningConfigSubmitRes,
+} from '#/api/iotlcm/tCommunication/tSimWarningConfig/type';
+
+import { computed, h, reactive, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import {
+  Button,
+  CheckboxGroup,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  message,
+  Switch,
+  Upload,
+  UploadDragger,
+} from 'ant-design-vue';
+
+import {
+  DownloadTemplate,
+  ExcelSubmit,
+  InputSubmit,
+  RangeSubmit,
+} from '#/api/iotlcm/tCommunication/tSimWarningConfig';
+import BetterVben from '#/constants/BetterVben';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import CardSourceTabs from '../components/cardSourceTabs.vue';
+
+const Textarea = Input.TextArea;
+
+const MAX_EXCEL_FILE_SIZE = 50;
+const SOURCE_MODAL_CLASS = 'w-[820px] max-w-[calc(100vw-48px)]';
+const CONFIG_MODAL_CLASS = 'w-[920px] max-w-[calc(100vw-48px)]';
+
+type WarningConfigOperation = 'poolTraffic' | 'traffic';
+type SourceTab = 'excel' | 'input' | 'range';
+type WarningStep = 'config' | 'source';
+
+interface WarningConfigModalData {
+  operation?: WarningConfigOperation;
+}
+
+interface WarningConfigFormState {
+  autoAction: boolean;
+  firstWarn?: number;
+  isEnabled: boolean;
+  remark: string;
+  secondWarn?: number;
+  thirdWarn?: number;
+  warnEmails: string;
+  warnMethodTypes: string[];
+  warnPhones: string;
+  warnUnit: number;
+}
+
+interface SourceState {
+  endIccid: string;
+  endImsi: string;
+  endMsisdn: string;
+  input: string;
+  startIccid: string;
+  startImsi: string;
+  startMsisdn: string;
+}
+
+const warnUnitMb = 1;
+const warnUnitPercent = 2;
+const warnItemTypeCard = 1;
+const warnItemTypeFlowPool = 2;
+
+const warnMethodSms = '0';
+const warnMethodEmail = '1';
+const warnMethodPlatform = '3';
+const reminderMethodOptions = [
+  { disabled: true, label: '站内提醒', value: warnMethodPlatform },
+  { label: '邮箱', value: warnMethodEmail },
+  { label: '短信', value: warnMethodSms },
+];
+const orderedWarnMethods = [warnMethodPlatform, warnMethodEmail, warnMethodSms];
+
+const operation = ref<WarningConfigOperation>('traffic');
+const currentStep = ref<WarningStep>('source');
+const activeTab = ref<SourceTab>('excel');
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+
+const formState = reactive<WarningConfigFormState>({
+  autoAction: false,
+  isEnabled: true,
+  remark: '',
+  warnEmails: '',
+  warnMethodTypes: [warnMethodPlatform],
+  warnPhones: '',
+  warnUnit: warnUnitMb,
+});
+
+const sourceState = reactive<SourceState>({
+  endIccid: '',
+  endImsi: '',
+  endMsisdn: '',
+  input: '',
+  startIccid: '',
+  startImsi: '',
+  startMsisdn: '',
+});
+
+const operationConfig = {
+  traffic: {
+    title: '流量预警配置',
+    itemType: warnItemTypeCard,
+    warnUnit: warnUnitMb,
+  },
+  poolTraffic: {
+    title: '流量池预警配置',
+    itemType: warnItemTypeFlowPool,
+    warnUnit: warnUnitPercent,
+  },
+} as const;
+
+const currentConfig = computed(() => operationConfig[operation.value]);
+const currentModalClass = computed(() =>
+  currentStep.value === 'source' ? SOURCE_MODAL_CLASS : CONFIG_MODAL_CLASS,
+);
+const isTrafficMode = computed(() => operation.value === 'traffic');
+const isPoolTrafficMode = computed(() => operation.value === 'poolTraffic');
+const isGreaterThresholdMode = computed(
+  () => isTrafficMode.value || isPoolTrafficMode.value,
+);
+const hasSmsMethod = computed(() =>
+  formState.warnMethodTypes.includes(warnMethodSms),
+);
+const hasEmailMethod = computed(() =>
+  formState.warnMethodTypes.includes(warnMethodEmail),
+);
+const thresholdUnitText = computed(() => {
+  switch (formState.warnUnit) {
+    case warnUnitPercent: {
+      return '%';
+    }
+    default: {
+      return 'MB';
+    }
+  }
+});
+const excelHintText = computed(() =>
+  isPoolTrafficMode.value
+    ? '模板列为 流量池编号'
+    : '模板列为 ICCID、MSISDN、IMSI',
+);
+const inputPlaceholder = computed(() =>
+  isPoolTrafficMode.value
+    ? '每行一个流量池编号'
+    : '每行一个 ICCID，或 ICCID MSISDN IMSI',
+);
+
+function numberOrZero(value?: number) {
+  return Number(value ?? 0);
+}
+
+function splitWarnContacts(value: string) {
+  return value
+    .split(/[,，;；|\s]+/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function isValidEmail(email: string) {
+  if (!email || email.includes(' ')) {
+    return false;
+  }
+  const parts = email.split('@');
+  if (parts.length !== 2 || !parts[0] || !parts[1]) {
+    return false;
+  }
+  const domain = parts[1];
+  return (
+    domain.includes('.') && !domain.startsWith('.') && !domain.endsWith('.')
+  );
+}
+
+function isValidPhone(phone: string) {
+  return /^1[3-9]\d{9}$/.test(phone);
+}
+
+function normalizeWarnEmails(value: string, showMessage = true) {
+  const emails = [
+    ...new Set(splitWarnContacts(value).map((item) => item.toLowerCase())),
+  ];
+  if (emails.length === 0) {
+    if (showMessage) {
+      message.warning('请选择邮箱提醒时必须填写邮箱地址');
+    }
+    return '';
+  }
+  const invalidEmail = emails.find((item) => !isValidEmail(item));
+  if (invalidEmail) {
+    if (showMessage) {
+      message.warning(`邮箱格式不正确：${invalidEmail}`);
+    }
+    return '';
+  }
+  return emails.join(',');
+}
+
+function normalizeWarnPhones(value: string, showMessage = true) {
+  const phones = [...new Set(splitWarnContacts(value))];
+  if (phones.length === 0) {
+    if (showMessage) {
+      message.warning('请选择短信提醒时必须填写短信号码');
+    }
+    return '';
+  }
+  const invalidPhone = phones.find((item) => !isValidPhone(item));
+  if (invalidPhone) {
+    if (showMessage) {
+      message.warning(`手机号格式不正确：${invalidPhone}`);
+    }
+    return '';
+  }
+  return phones.join(',');
+}
+
+function getModalState(step: WarningStep = currentStep.value) {
+  return {
+    class: step === 'source' ? SOURCE_MODAL_CLASS : CONFIG_MODAL_CLASS,
+    confirmText: step === 'source' ? '下一步' : '提交配置',
+  };
+}
+
+function updateModalState(step: WarningStep = currentStep.value) {
+  modalApi.setState(getModalState(step));
+}
+
+function setCurrentStep(step: WarningStep) {
+  currentStep.value = step;
+  updateModalState(step);
+}
+
+function resetForm(nextOperation: WarningConfigOperation) {
+  const config = operationConfig[nextOperation];
+  operation.value = nextOperation;
+  currentStep.value = 'source';
+  activeTab.value = 'excel';
+  Object.assign(formState, {
+    autoAction: false,
+    firstWarn: undefined,
+    isEnabled: true,
+    remark: '',
+    secondWarn: undefined,
+    thirdWarn: undefined,
+    warnEmails: '',
+    warnMethodTypes: [warnMethodPlatform],
+    warnPhones: '',
+    warnUnit: config.warnUnit,
+  });
+  Object.assign(sourceState, {
+    endIccid: '',
+    endImsi: '',
+    endMsisdn: '',
+    input: '',
+    startIccid: '',
+    startImsi: '',
+    startMsisdn: '',
+  });
+  uploadFile.value = [];
+  importFile.value = undefined;
+  updateModalState('source');
+}
+
+function thresholdPlaceholder(label: string) {
+  if (isPoolTrafficMode.value) {
+    return `流量池已用流量达到，请输入${label}提醒比例`;
+  }
+  return `单卡数据流量使用达到，请输入${label}提醒值`;
+}
+
+function validateThresholds() {
+  const firstWarn = numberOrZero(formState.firstWarn);
+  const secondWarn = numberOrZero(formState.secondWarn);
+  const thirdWarn = numberOrZero(formState.thirdWarn);
+
+  if (firstWarn <= 0) {
+    message.warning('第一次提醒必须大于 0');
+    return false;
+  }
+  if (secondWarn < 0 || thirdWarn < 0) {
+    message.warning('提醒阈值不能小于 0');
+    return false;
+  }
+  if (
+    isPoolTrafficMode.value &&
+    (firstWarn > 100 || secondWarn > 100 || thirdWarn > 100)
+  ) {
+    message.warning('流量池预警提醒比例不能大于 100%');
+    return false;
+  }
+  if (secondWarn > 0 && secondWarn <= firstWarn) {
+    message.warning('第二次提醒必须大于第一次提醒');
+    return false;
+  }
+  if (thirdWarn > 0 && (secondWarn <= 0 || thirdWarn <= secondWarn)) {
+    message.warning('第三次提醒必须大于第二次提醒');
+    return false;
+  }
+
+  return true;
+}
+
+function validateReminderMethods() {
+  if (hasSmsMethod.value) {
+    const phones = normalizeWarnPhones(formState.warnPhones);
+    if (!phones) {
+      return false;
+    }
+    formState.warnPhones = phones;
+  }
+  if (hasEmailMethod.value) {
+    const emails = normalizeWarnEmails(formState.warnEmails);
+    if (!emails) {
+      return false;
+    }
+    formState.warnEmails = emails;
+  }
+  return true;
+}
+
+function validateSource() {
+  if (isPoolTrafficMode.value && activeTab.value === 'range') {
+    message.warning('流量池预警配置不支持连号');
+    return false;
+  }
+  if (activeTab.value === 'excel') {
+    if (!importFile.value) {
+      message.warning('请先上传 Excel 文件');
+      return false;
+    }
+    return true;
+  }
+  if (activeTab.value === 'input') {
+    if (!sourceState.input.trim()) {
+      message.warning('请输入批量配置内容');
+      return false;
+    }
+    return true;
+  }
+  const requiredFields: Array<keyof SourceState> = [
+    'startIccid',
+    'endIccid',
+    'startMsisdn',
+    'endMsisdn',
+    'startImsi',
+    'endImsi',
+  ];
+  const missing = requiredFields.some((field) => !sourceState[field].trim());
+  if (missing) {
+    message.warning('请填写完整连号信息');
+    return false;
+  }
+  return true;
+}
+
+function buildWarnMethods() {
+  const selected = new Set([warnMethodPlatform, ...formState.warnMethodTypes]);
+  return orderedWarnMethods.filter((method) => selected.has(method)).join(',');
+}
+
+function buildCommonPayload(): TSimWarningConfigCommonParam {
+  return {
+    itemType: currentConfig.value.itemType,
+    warnUnit: formState.warnUnit,
+    firstWarn: numberOrZero(formState.firstWarn),
+    secondWarn: numberOrZero(formState.secondWarn),
+    thirdWarn: numberOrZero(formState.thirdWarn),
+    warnMethods: buildWarnMethods(),
+    warnPhones: hasSmsMethod.value ? formState.warnPhones.trim() : '',
+    warnEmails: hasEmailMethod.value ? formState.warnEmails.trim() : '',
+    autoAction: 0,
+    isEnabled: formState.isEnabled ? 1 : 0,
+    remark: formState.remark.trim(),
+  };
+}
+
+function showSuccessMessage(res?: TSimWarningConfigSubmitRes) {
+  const batchText = res?.batchNo ? `，批次号：${res.batchNo}` : '';
+  message.success(`预警配置已提交${batchText}`);
+}
+
+async function handleDownloadTemplate() {
+  const success = await commonDownloadExcel(DownloadTemplate, '', {
+    itemType: currentConfig.value.itemType,
+  });
+  if (success) {
+    message.success('下载成功');
+  }
+}
+
+function handleBeforeUpload(file: File) {
+  const rawFile = file as File;
+  const suffix = rawFile.name.slice(
+    Math.max(0, rawFile.name.lastIndexOf('.') + 1),
+  );
+  const isExcel = ['xls', 'xlsx'].includes(suffix.toLowerCase());
+  if (!isExcel) {
+    message.error('请上传 xls/xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  const isLtMaxSize = rawFile.size / 1024 / 1024 <= MAX_EXCEL_FILE_SIZE;
+  if (!isLtMaxSize) {
+    message.error(`文件大小不能超过 ${MAX_EXCEL_FILE_SIZE}MB`);
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = rawFile;
+  uploadFile.value = [
+    {
+      uid: `${rawFile.name}-${Date.now()}`,
+      name: rawFile.name,
+      status: 'done',
+      originFileObj: rawFile,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+function handleBackToSource() {
+  setCurrentStep('source');
+}
+
+async function handleSubmitConfig() {
+  if (!validateThresholds() || !validateReminderMethods()) {
+    return;
+  }
+  const payload = buildCommonPayload();
+  let result: TSimWarningConfigSubmitRes | undefined;
+  if (activeTab.value === 'excel') {
+    result = await ExcelSubmit({
+      ...payload,
+      file: importFile.value as File,
+    });
+  } else if (activeTab.value === 'input') {
+    result = await InputSubmit({
+      ...payload,
+      input: sourceState.input.trim(),
+    });
+  } else {
+    result = await RangeSubmit({
+      ...payload,
+      endIccid: sourceState.endIccid.trim(),
+      endImsi: sourceState.endImsi.trim(),
+      endMsisdn: sourceState.endMsisdn.trim(),
+      startIccid: sourceState.startIccid.trim(),
+      startImsi: sourceState.startImsi.trim(),
+      startMsisdn: sourceState.startMsisdn.trim(),
+    } as TSimWarningConfigRangeSubmitParam);
+  }
+  showSuccessMessage(result);
+  modalApi.close();
+}
+
+async function handleSubmit() {
+  if (currentStep.value === 'source') {
+    if (!validateSource()) {
+      return;
+    }
+    setCurrentStep('config');
+    return;
+  }
+  await handleSubmitConfig();
+}
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: SOURCE_MODAL_CLASS,
+  confirmText: '下一步',
+  destroyOnClose: false,
+  async onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, handleSubmit);
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    const data = modalApi.getData() as WarningConfigModalData;
+    resetForm(data.operation ?? 'traffic');
+  },
+});
+</script>
+
+<template>
+  <Modal :class="currentModalClass" :title="currentConfig.title">
+    <div class="flex flex-col gap-4">
+      <template v-if="currentStep === 'source'">
+        <CardSourceTabs
+          v-model:active-key="activeTab"
+          :show-range="!isPoolTrafficMode"
+        >
+          <template #excel>
+            <UploadDragger
+              v-model:file-list="uploadFile"
+              accept=".xlsx,.xls"
+              class="business-acceptance-excel-upload"
+              :before-upload="handleBeforeUpload"
+              :max-count="1"
+              @remove="handleRemove"
+            >
+              <div class="ant-upload-drag-icon flex justify-center">
+                <Inbox />
+              </div>
+              <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+              <p class="ant-upload-hint">{{ excelHintText }}</p>
+            </UploadDragger>
+            <div class="mt-3 flex justify-center">
+              <Button
+                :icon="h(DownloadOutlined)"
+                @click="handleDownloadTemplate"
+              >
+                下载 Excel 模板
+              </Button>
+            </div>
+          </template>
+
+          <template #input>
+            <Textarea
+              v-model:value="sourceState.input"
+              :auto-size="{ minRows: 8, maxRows: 12 }"
+              :placeholder="inputPlaceholder"
+            />
+          </template>
+
+          <template #range>
+            <Form
+              :label-col="{ span: 8 }"
+              :model="sourceState"
+              :wrapper-col="{ span: 16 }"
+            >
+              <div class="grid grid-cols-1 gap-x-4 sm:grid-cols-2">
+                <FormItem label="起始ICCID" required>
+                  <Input
+                    v-model:value="sourceState.startIccid"
+                    allow-clear
+                    placeholder="请输入起始 ICCID"
+                  />
+                </FormItem>
+                <FormItem label="结束ICCID" required>
+                  <Input
+                    v-model:value="sourceState.endIccid"
+                    allow-clear
+                    placeholder="请输入结束 ICCID"
+                  />
+                </FormItem>
+                <FormItem label="起始MSISDN" required>
+                  <Input
+                    v-model:value="sourceState.startMsisdn"
+                    allow-clear
+                    placeholder="请输入起始 MSISDN"
+                  />
+                </FormItem>
+                <FormItem label="结束MSISDN" required>
+                  <Input
+                    v-model:value="sourceState.endMsisdn"
+                    allow-clear
+                    placeholder="请输入结束 MSISDN"
+                  />
+                </FormItem>
+                <FormItem label="起始IMSI" required>
+                  <Input
+                    v-model:value="sourceState.startImsi"
+                    allow-clear
+                    placeholder="请输入起始 IMSI"
+                  />
+                </FormItem>
+                <FormItem label="结束IMSI" required>
+                  <Input
+                    v-model:value="sourceState.endImsi"
+                    allow-clear
+                    placeholder="请输入结束 IMSI"
+                  />
+                </FormItem>
+              </div>
+            </Form>
+          </template>
+        </CardSourceTabs>
+      </template>
+
+      <template v-else>
+        <div class="flex items-center justify-between">
+          <span class="font-medium text-[#111827] dark:text-[#f2f2f2]">
+            预警规则配置
+          </span>
+          <Button size="small" @click="handleBackToSource">上一步</Button>
+        </div>
+
+        <Form
+          :label-col="{ span: 6 }"
+          :model="formState"
+          :wrapper-col="{ span: 18 }"
+        >
+          <FormItem label="第一次提醒" required>
+            <div class="flex items-center gap-2">
+              <InputNumber
+                v-model:value="formState.firstWarn"
+                class="flex-1"
+                :min="0"
+                :placeholder="thresholdPlaceholder('第一次')"
+                :precision="isGreaterThresholdMode ? 2 : 0"
+              />
+              <span class="w-[44px] text-[#4b5563] dark:text-[#d4d4d4]">
+                {{ thresholdUnitText }}
+              </span>
+            </div>
+          </FormItem>
+
+          <FormItem label="第二次提醒">
+            <div class="flex items-center gap-2">
+              <InputNumber
+                v-model:value="formState.secondWarn"
+                class="flex-1"
+                :min="0"
+                :placeholder="thresholdPlaceholder('第二次')"
+                :precision="isGreaterThresholdMode ? 2 : 0"
+              />
+              <span class="w-[44px] text-[#4b5563] dark:text-[#d4d4d4]">
+                {{ thresholdUnitText }}
+              </span>
+            </div>
+          </FormItem>
+
+          <FormItem label="第三次提醒">
+            <div class="flex items-center gap-2">
+              <InputNumber
+                v-model:value="formState.thirdWarn"
+                class="flex-1"
+                :min="0"
+                :placeholder="thresholdPlaceholder('第三次')"
+                :precision="isGreaterThresholdMode ? 2 : 0"
+              />
+              <span class="w-[44px] text-[#4b5563] dark:text-[#d4d4d4]">
+                {{ thresholdUnitText }}
+              </span>
+            </div>
+            <template #extra>
+              <span class="text-xs leading-5 text-gray-500 dark:text-gray-400">
+                预警仅发送消息通知，不会关闭数据服务。自动断网请到达量断网配置设置。
+              </span>
+            </template>
+          </FormItem>
+
+          <FormItem label="提醒方式">
+            <div class="flex min-h-[32px] items-center">
+              <CheckboxGroup
+                v-model:value="formState.warnMethodTypes"
+                class="warning-method-checkbox-group"
+                :options="reminderMethodOptions"
+              />
+            </div>
+          </FormItem>
+
+          <FormItem v-if="hasSmsMethod" label="短信号码" required>
+            <Input
+              v-model:value="formState.warnPhones"
+              allow-clear
+              placeholder="请输入短信号码，多个用逗号分隔"
+            />
+          </FormItem>
+
+          <FormItem v-if="hasEmailMethod" label="邮箱地址" required>
+            <Input
+              v-model:value="formState.warnEmails"
+              allow-clear
+              placeholder="请输入邮箱地址，多个用逗号分隔"
+            />
+          </FormItem>
+
+          <FormItem label="配置状态">
+            <Switch
+              v-model:checked="formState.isEnabled"
+              checked-children="启用"
+              un-checked-children="停用"
+            />
+          </FormItem>
+
+          <FormItem label="备注">
+            <Input
+              v-model:value="formState.remark"
+              :maxlength="500"
+              placeholder="请输入备注"
+              show-count
+            />
+          </FormItem>
+        </Form>
+      </template>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.business-acceptance-excel-upload :deep(.ant-upload-drag) {
+  height: 150px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag .ant-upload-btn) {
+  padding: 16px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-drag-icon) {
+  margin-bottom: 8px;
+}
+
+.business-acceptance-excel-upload :deep(.ant-upload-text) {
+  margin-bottom: 4px;
+}
+
+.warning-method-checkbox-group {
+  display: inline-flex;
+  min-width: 280px;
+  flex-wrap: nowrap;
+  align-items: center;
+  column-gap: 24px;
+}
+
+.warning-method-checkbox-group :deep(.ant-checkbox-wrapper) {
+  margin-inline-start: 0;
+  white-space: nowrap;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/components/FormSchema/NumberSegment.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/components/FormSchema/NumberSegment.vue
new file mode 100644
index 0000000..fbec52b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/components/FormSchema/NumberSegment.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+
+import { Input, Select } from 'ant-design-vue';
+
+import DictEnum from '#/constants/DictEnum';
+import { getDictOptions } from '#/utils/dict';
+
+/** ====================  常量  ==================== */
+const props = defineProps<{
+  endNum: any;
+  startNum: any;
+  value: any;
+}>();
+const emit = defineEmits<{
+  (e: 'change', value: { condition: any; endNum: any; startNum: any }): void;
+  (e: 'update:endNum', value: any): void;
+  (e: 'update:startNum', value: any): void;
+  (e: 'update:value', value: any): void;
+}>();
+
+/** ====================  数据  ==================== */
+const lValue = ref();
+const lStartNum = ref();
+const lEndNum = ref();
+
+/** ====================  方法  ==================== */
+function hasValue(value: any) {
+  if (typeof value === 'string') {
+    return value.trim() !== '';
+  }
+  return value !== undefined && value !== null && value !== '';
+}
+
+function emitValues() {
+  const hasAllValue = [lValue.value, lStartNum.value, lEndNum.value].every(
+    (value) => hasValue(value),
+  );
+
+  emit('update:value', hasAllValue ? lValue.value : '');
+  emit('update:startNum', hasAllValue ? lStartNum.value : '');
+  emit('update:endNum', hasAllValue ? lEndNum.value : '');
+  emit('change', {
+    condition: hasAllValue ? lValue.value : '',
+    startNum: hasAllValue ? lStartNum.value : '',
+    endNum: hasAllValue ? lEndNum.value : '',
+  });
+}
+
+/** ====================  周期  ==================== */
+onMounted(() => {
+  lStartNum.value = props.startNum;
+  lEndNum.value = props.endNum;
+  lValue.value = props.value;
+});
+
+watch([lValue, lStartNum, lEndNum], emitValues);
+</script>
+
+<template>
+  <div class="grid grid-cols-5 gap-2">
+    <Select
+      class="col-span-1"
+      v-model:value="lValue"
+      placeholder="请选择查询条件"
+      :options="getDictOptions(DictEnum.T_CARDINFO_SELECTCONDITIONS)"
+    />
+    <Input
+      v-model:value="lStartNum"
+      placeholder="起始号段"
+      class="col-span-2"
+    />
+    <Input v-model:value="lEndNum" placeholder="结束号段" class="col-span-2" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/diagnose-route.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/diagnose-route.ts
new file mode 100644
index 0000000..a93f476
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/diagnose-route.ts
@@ -0,0 +1,165 @@
+/**
+ * 智能诊断页面的路由定位工具。
+ *
+ * 背景：智能诊断页的菜单由后端动态下发，路径命名在不同环境/版本里并不统一
+ * （可能叫 tIntelligentDiagnosis、tSimDiagnose 等），所以不能硬编码一个路径，
+ * 只能在路由表、accessRoutes、accessMenus 里按特征模糊查找，并逐个验证可达性。
+ *
+ * 原先这套逻辑只存在于详情弹窗 view.vue 内；卡信息列表页的「更多 → 诊断」
+ * 需要用同一套规则跳转，因此抽到本模块供两处复用，避免规则改了两边不同步。
+ */
+
+/** 智能诊断页的路径特征，命中任意一条即认为是诊断页。 */
+const DIAGNOSE_ROUTE_KEYWORDS = [
+  'tintelligentdiagnosis',
+  'intelligentdiagnosis',
+  'tsimdiagnose',
+];
+
+/** 智能诊断页的标题特征（用于识别中文菜单名）。 */
+const DIAGNOSE_ROUTE_TITLES = ['智能诊断', 'SIM卡诊断'];
+
+/**
+ * 兜底路径候选：当路由表里找不到匹配项时按顺序尝试。
+ * 这些路径会经过 routePathAvailable 校验，不可达的会被跳过。
+ */
+export const DIAGNOSE_FALLBACK_PATHS = [
+  '/tIntelligentDiagnosis',
+  '/IntelligentDiagnosis',
+  '/tSimDiagnose',
+  '/iotlcm/tIntelligentDiagnosis',
+  '/iotlcm/tIntelligentDiagnosis/index',
+  '/iotlcm/IntelligentDiagnosis',
+  '/iotlcm/tSimDiagnose',
+];
+
+export function normalizeRoutePath(path: string) {
+  return String(path || '')
+    .trim()
+    .replaceAll('\\', '/');
+}
+
+export function joinRoutePath(parentPath: string, currentPath: string) {
+  const current = normalizeRoutePath(currentPath);
+  if (!current || current === '#') {
+    return normalizeRoutePath(parentPath);
+  }
+  if (current.startsWith('/')) {
+    return current;
+  }
+  const parent = normalizeRoutePath(parentPath);
+  return `${parent ? `/${parent.replaceAll(/^\/+|\/+$/g, '')}` : ''}/${current.replaceAll(/^\/+/g, '')}`;
+}
+
+export function routeText(route: any, fullPath = '') {
+  return [
+    fullPath,
+    route?.path,
+    route?.name,
+    route?.meta?.title,
+    Array.isArray(route?.meta?.authority)
+      ? route.meta.authority.join(',')
+      : route?.meta?.authority,
+    typeof route?.component === 'string' ? route.component : '',
+  ]
+    .filter(Boolean)
+    .join('|')
+    .toLowerCase();
+}
+
+export function collectAccessRoutePaths(
+  routes: any[],
+  match: (route: any, fullPath: string) => boolean,
+) {
+  const paths: string[] = [];
+  const walk = (items: any[], parentPath = '') => {
+    for (const route of items || []) {
+      if (!route) {
+        continue;
+      }
+      const fullPath = joinRoutePath(parentPath, route.path);
+      if (match(route, fullPath) && fullPath) {
+        paths.push(fullPath);
+      }
+      if (Array.isArray(route.children)) {
+        walk(route.children, fullPath);
+      }
+    }
+  };
+  walk(routes);
+  return paths;
+}
+
+export function routePathAvailable(router: any, path: string) {
+  const resolved = router.resolve({ path });
+  return (
+    resolved.matched.length > 0 &&
+    resolved.matched.every((item: any) => {
+      const name = String(item.name || '');
+      const routePath = String(item.path || '');
+      return (
+        name !== 'FallbackNotFound' &&
+        !routePath.includes(':pathMatch') &&
+        !routePath.includes(':path(.*)')
+      );
+    })
+  );
+}
+
+/**
+ * 在路由表、accessRoutes、accessMenus 中寻找第一个可达的路径。
+ *
+ * router 与 accessStore 由调用方传入（而不是在本模块内 useRouter/useAccessStore），
+ * 这样本模块保持纯函数、可在组件外单独测试。
+ */
+export function resolveAvailableRoutePath(
+  router: any,
+  accessStore: any,
+  routeMatcher: (route: any, fullPath: string) => boolean,
+  fallbackPaths: string[],
+) {
+  const candidates = [
+    ...router
+      .getRoutes()
+      .filter((route: any) => routeMatcher(route, route.path))
+      .map((route: any) => route.path),
+    ...collectAccessRoutePaths(accessStore.accessRoutes, routeMatcher),
+    ...collectAccessRoutePaths(accessStore.accessMenus, routeMatcher),
+    ...fallbackPaths,
+  ];
+  const seen = new Set<string>();
+  for (const path of candidates) {
+    const cleanPath = normalizeRoutePath(path);
+    if (!cleanPath || seen.has(cleanPath)) {
+      continue;
+    }
+    seen.add(cleanPath);
+    if (routePathAvailable(router, cleanPath)) {
+      return cleanPath;
+    }
+  }
+  return '';
+}
+
+/** 智能诊断页的匹配器：路径/标题命中任一特征即可。 */
+export function matchDiagnoseRoute(route: any, fullPath: string) {
+  const text = routeText(route, fullPath);
+  const title = String(route.meta?.title || '');
+  return (
+    DIAGNOSE_ROUTE_KEYWORDS.some((keyword) => text.includes(keyword)) ||
+    DIAGNOSE_ROUTE_TITLES.some((keyword) => title.includes(keyword))
+  );
+}
+
+/**
+ * 解析智能诊断页的可达路径。返回空字符串表示没找到。
+ * 调用方拿到空字符串时自行决定提示文案。
+ */
+export function resolveDiagnoseRoutePath(router: any, accessStore: any) {
+  return resolveAvailableRoutePath(
+    router,
+    accessStore,
+    matchDiagnoseRoute,
+    DIAGNOSE_FALLBACK_PATHS,
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/edit.vue
new file mode 100644
index 0000000..94e6d1e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/edit.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type {
+  TSimCardInfoEditParam,
+  TSimCardInfoModel,
+} from '#/api/iotlcm/tCommunication/tSimCardInfo/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit } from '#/api/iotlcm/tCommunication/tSimCardInfo';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data?: TSimCardInfoModel;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+/** ====================  方法  ==================== */
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  if (data.isUpdate && data.data) {
+    await formApi.setValues({
+      id: data.data.id,
+      remark: data.data.remark,
+    });
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      const params = value as Pick<TSimCardInfoEditParam, 'id' | 'remark'>;
+      await BetterVben.function.formSubmit(
+        Edit(params),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '保存成功',
+          async afterSuccess() {
+            emit('confirm');
+            await formApi.resetForm();
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await formApi.resetForm();
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/index.vue
new file mode 100644
index 0000000..2d77aa8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/index.vue
@@ -0,0 +1,591 @@
+<script lang="ts" setup>
+import type { RowType } from './model';
+
+import type { SysDeptTreeData } from '#/api/system/dept';
+
+import { computed, h, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Copy, MdiExport, SyncOutlined } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+import { getVxePopupContainer } from '@vben/utils';
+
+import {
+  Button,
+  Dropdown,
+  Empty,
+  Input,
+  InputSearch,
+  Menu,
+  MenuDivider,
+  MenuItem,
+  message,
+  Modal,
+  Popconfirm,
+  Skeleton,
+  Tree,
+} from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as dataStartApi from '#/api/iotlcm/tCommunication/tSimCardDataStart';
+import * as dataStopApi from '#/api/iotlcm/tCommunication/tSimCardDataStop';
+import {
+  BatchList,
+  Delete,
+  Export,
+  List,
+  SyncSimCardFlow,
+  SyncSimCardStatus,
+} from '#/api/iotlcm/tCommunication/tSimCardInfo';
+import * as restartApi from '#/api/iotlcm/tCommunication/tSimCardRestart';
+import * as startApi from '#/api/iotlcm/tCommunication/tSimCardStart';
+import * as stopApi from '#/api/iotlcm/tCommunication/tSimCardStop';
+import BetterVben from '#/constants/BetterVben';
+import { filterDeptTree, loadCompanyDeptTree } from '#/utils/dept-tree';
+import { commonDownloadExcel, getExportColumns } from '#/utils/file/download';
+import QuickCopy from '#/utils/HtCustom/QuickCopy';
+
+import { resolveDiagnoseRoutePath } from './diagnose-route';
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+const router = useRouter();
+const accessStore = useAccessStore();
+const selectDeptId = ref<string[]>([]);
+const deptTreeVisible = ref(false);
+const deptTreeArray = ref<SysDeptTreeData[]>([]);
+const showTreeSkeleton = ref<boolean>(true);
+const searchValue = ref<string>('');
+const batchInput = ref('');
+const batchQueryInput = ref('');
+const batchQueryOpen = ref(false);
+const batchQueryLoading = ref(false);
+const batchQueryCount = computed(
+  () => batchQueryInput.value.split('\n').filter(Boolean).length,
+);
+const filteredDeptTree = computed(() =>
+  filterDeptTree(deptTreeArray.value, searchValue.value),
+);
+/** ====================  方法  ==================== */
+async function loadDeptTree() {
+  showTreeSkeleton.value = true;
+  searchValue.value = '';
+  try {
+    // 树结构由后端 /system/dept/tree 组织（deptType=1 公司树），前端不再自行拼装
+    deptTreeArray.value = await loadCompanyDeptTree();
+  } finally {
+    showTreeSkeleton.value = false;
+  }
+}
+
+async function handleDeptTreeReload() {
+  await loadDeptTree();
+  await gridApi.reload();
+}
+
+async function handleDeptFilterChange() {
+  await gridApi.reload();
+}
+
+function handleDeptSelect(keys: (number | string)[]) {
+  const selectedKey = String(keys[0] ?? '');
+  selectDeptId.value =
+    selectedKey && selectDeptId.value[0] === selectedKey ? [] : [selectedKey];
+}
+
+function handlePreview(record: RowType) {
+  modalApi.setData({ record });
+  modalApi.open();
+}
+
+function normalizeCode(value: unknown) {
+  return String(value ?? '').trim();
+}
+
+function handleCopyCode(value: unknown) {
+  const text = normalizeCode(value);
+  if (!text) return;
+  QuickCopy(text);
+}
+
+function handleEdit(row: RowType) {
+  editModalApi.setData({ data: row, isUpdate: true });
+  editModalApi.open();
+}
+async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleSyncSimCardFlow(row: RowType) {
+  await SyncSimCardFlow({ iccid: row.iccid });
+  message.success('同步成功');
+  await handleRefresh();
+}
+
+async function handleSyncSimCardStatus(row: RowType) {
+  await SyncSimCardStatus({ iccid: row.iccid });
+  message.success('同步成功');
+  await handleRefresh();
+}
+
+/**
+ * 跳转到智能诊断页，功能与详情弹窗里的「诊断」按钮一致。
+ *
+ * 差异说明：详情页的数据源是 currentCard，这里换成当前行 row。
+ * 路由定位规则（含多种命名兜底）由 diagnose-route.ts 提供，两处共用。
+ * 权限：详情页的「诊断」按钮未声明 v-access:code，此处保持一致。
+ */
+async function handleOpenDiagnosis(row: RowType) {
+  const queryCode = normalizeCode(row.iccid);
+  if (!queryCode) {
+    message.warning('该卡缺少ICCID');
+    return;
+  }
+  const path = resolveDiagnoseRoutePath(router, accessStore);
+  if (!path) {
+    message.warning('未找到智能诊断菜单路由，请检查菜单配置');
+    return;
+  }
+  await router.push({ path, query: { pageKey: path, queryCode } });
+}
+
+type CardActionKey = 'dataStart' | 'dataStop' | 'restart' | 'start' | 'stop';
+
+type CardActionItem = {
+  api: {
+    InputSubmit: (params: {
+      input: string;
+    }) => Promise<{ batchNo?: string; total?: number }>;
+  };
+  title: string;
+};
+
+// 单卡操作复用业务受理的批量提交接口，这里只提交当前这一行的 ICCID
+const cardActionConfig: Record<CardActionKey, CardActionItem> = {
+  dataStart: { api: dataStartApi, title: '开通数据' },
+  dataStop: { api: dataStopApi, title: '停用数据' },
+  restart: { api: restartApi, title: '重启' },
+  start: { api: startApi, title: '自主复机' },
+  stop: { api: stopApi, title: '自主停机' },
+};
+
+async function handleCardAction(row: RowType, key: CardActionKey) {
+  const { api, title } = cardActionConfig[key];
+  const iccid = normalizeCode(row.iccid);
+  if (!iccid) {
+    message.warning('该卡缺少 ICCID，无法执行操作');
+    return;
+  }
+  Modal.confirm({
+    title: `确认${title}？`,
+    content: `将对 ICCID ${iccid} 执行「${title}」。`,
+    okText: '确认提交',
+    cancelText: '取消',
+    async onOk() {
+      const res = await api.InputSubmit({ input: iccid });
+      const batchText = res?.batchNo ? `，批次号：${res.batchNo}` : '';
+      message.success(`${title}任务已提交${batchText}`);
+      await handleRefresh();
+    },
+  });
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  // 只导出当前列表显示的列，顺序与页面一致。
+  // 导出接口以 x-www-form-urlencoded 提交，数组对象会被打散，故用 JSON 字符串传输。
+  const exportColumns = getExportColumns(gridApi);
+  await commonDownloadExcel(Export, '卡信息表', {
+    ...formValues,
+    ...(batchQueryInput.value ? { batchInput: batchQueryInput.value } : {}),
+    deptId: selectDeptId.value?.[0] || '',
+    page: 1,
+    exportColumnsJson: JSON.stringify(exportColumns),
+  });
+}
+
+function handleBatchQueryOpen() {
+  batchInput.value = batchQueryInput.value;
+  batchQueryOpen.value = true;
+}
+
+async function handleBatchQuery() {
+  const lines = batchInput.value
+    .split(/\r\n|[\n\r]/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+  if (lines.length === 0) {
+    message.warning('请输入要查询的号码');
+    return;
+  }
+  if (lines.length > 1000) {
+    message.warning('单次最多查询 1000 条');
+    return;
+  }
+  if (lines.some((line) => ![1, 2, 3].includes(line.split(/\s+/).length))) {
+    message.warning('每行填写 1 至 3 个号码值（ICCID / MSISDN / IMSI）');
+    return;
+  }
+  batchQueryLoading.value = true;
+  try {
+    batchQueryInput.value = lines.join('\n');
+    await gridApi.reload();
+    batchQueryOpen.value = false;
+  } finally {
+    batchQueryLoading.value = false;
+  }
+}
+
+async function handleClearBatchQuery() {
+  batchQueryInput.value = '';
+  await gridApi.reload();
+}
+
+watch(selectDeptId, handleDeptFilterChange);
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+    submitOnChange: false,
+    submitOnEnter: true,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    virtualXConfig: {
+      enabled: true,
+      gt: 20,
+    },
+    virtualYConfig: {
+      enabled: true,
+      gt: 60,
+    },
+    showOverflow: false,
+    columns: IndexGridColumns,
+    exportConfig: {},
+    pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const params = {
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            deptId: selectDeptId.value?.[0] || '',
+            ...(batchQueryInput.value
+              ? { batchInput: batchQueryInput.value }
+              : {}),
+          };
+          return batchQueryInput.value
+            ? await BatchList(params)
+            : await List(params);
+        },
+      },
+    },
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: true,
+      resizable: true,
+      search: true,
+      zoom: true,
+    },
+  },
+});
+
+const [ViewModal, modalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+/** ====================  周期  ==================== */
+onMounted(() => {
+  loadDeptTree();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full gap-[8px]">
+      <div v-if="deptTreeVisible" class="w-[240px] flex-shrink-0">
+        <Skeleton
+          :loading="showTreeSkeleton"
+          :paragraph="{ rows: 8 }"
+          active
+          class="p-[8px]"
+        >
+          <div
+            class="flex h-full flex-col overflow-y-auto rounded-lg bg-background"
+          >
+            <div
+              class="sticky top-0 z-10 flex flex-col gap-2 bg-background p-2"
+            >
+              <InputSearch v-model:value="searchValue" placeholder="搜索公司" />
+              <div class="flex gap-2">
+                <Button
+                  :icon="h(SyncOutlined)"
+                  size="small"
+                  @click="handleDeptTreeReload"
+                />
+              </div>
+            </div>
+            <Tree
+              v-if="filteredDeptTree.length > 0"
+              :selected-keys="selectDeptId"
+              :tree-data="filteredDeptTree"
+              :field-names="{ title: 'deptName', key: 'key' }"
+              default-expand-all
+              :show-line="{ showLeafIcon: false }"
+              @select="handleDeptSelect"
+            />
+            <Empty v-else description="暂无数据" class="mt-4" />
+          </div>
+        </Skeleton>
+      </div>
+      <Grid table-title="卡信息表" class="min-w-0 flex-1 overflow-hidden">
+        <template #toolbar-tools>
+          <div class="flex items-center justify-center gap-2">
+            <Button
+              class="flex items-center"
+              type="dashed"
+              @click="deptTreeVisible = !deptTreeVisible"
+              v-access:code="'cpm:system:dept:list'"
+            >
+              {{ deptTreeVisible ? '隐藏' : '显示' }}公司
+            </Button>
+            <Dropdown>
+              <template #overlay>
+                <Menu>
+                  <MenuItem @click="handleBatchQueryOpen">批量查询</MenuItem>
+                </Menu>
+              </template>
+              <Button class="flex items-center" type="primary">
+                批量操作
+              </Button>
+            </Dropdown>
+            <Button
+              v-if="batchQueryCount > 0"
+              class="flex items-center"
+              danger
+              @click="handleClearBatchQuery"
+            >
+              清除批量查询（{{ batchQueryCount }}）
+            </Button>
+            <Button
+              class="flex items-center"
+              type="primary"
+              :icon="h(MdiExport)"
+              @click="handleExport"
+              v-access:code="'cpm:iot:tSimCardInfo:export'"
+            >
+              导出
+            </Button>
+          </div>
+        </template>
+        <template #action="{ row }">
+          <div class="flex items-center justify-center gap-2">
+            <AccessControl :codes="['cpm:iot:tSimCardInfo:delete']" type="code">
+              <Popconfirm
+                title="确定删除吗？"
+                :get-popup-container="getVxePopupContainer"
+                placement="left"
+                @confirm="handleDelete(row)"
+              />
+            </AccessControl>
+            <Dropdown>
+              <template #overlay>
+                <Menu>
+                  <MenuItem
+                    @click="handleEdit(row)"
+                    v-access:code="'cpm:iot:tSimCardInfo:edit'"
+                  >
+                    备注
+                  </MenuItem>
+                  <MenuItem
+                    @click="handleSyncSimCardFlow(row)"
+                    v-access:code="'cpm:iot:tSimCardInfo:syncCardFlow'"
+                  >
+                    同步用量
+                  </MenuItem>
+                  <MenuItem
+                    @click="handleSyncSimCardStatus(row)"
+                    v-access:code="'cpm:iot:tSimCardInfo:syncSimCardStatus'"
+                  >
+                    同步状态
+                  </MenuItem>
+                  <MenuItem @click="handleOpenDiagnosis(row)">诊断</MenuItem>
+                  <MenuDivider />
+                  <MenuItem
+                    @click="handleCardAction(row, 'dataStart')"
+                    v-access:code="'cpm:iot:tSimCardDataStart:input:submit'"
+                  >
+                    开通数据
+                  </MenuItem>
+                  <MenuItem
+                    @click="handleCardAction(row, 'dataStop')"
+                    v-access:code="'cpm:iot:tSimCardDataStop:input:submit'"
+                  >
+                    停用数据
+                  </MenuItem>
+                  <MenuItem
+                    @click="handleCardAction(row, 'stop')"
+                    v-access:code="'cpm:iot:tSimCardStop:input:submit'"
+                  >
+                    自主停机
+                  </MenuItem>
+                  <MenuItem
+                    @click="handleCardAction(row, 'start')"
+                    v-access:code="'cpm:iot:tSimCardStart:input:submit'"
+                  >
+                    自主复机
+                  </MenuItem>
+                  <MenuItem
+                    @click="handleCardAction(row, 'restart')"
+                    v-access:code="'cpm:iot:tSimCardRestart:input:submit'"
+                  >
+                    重启
+                  </MenuItem>
+                </Menu>
+              </template>
+              <Button class="border-none p-0" :block="false" type="link">
+                更多
+              </Button>
+            </Dropdown>
+          </div>
+        </template>
+        <template #iccid="{ row }">
+          <div class="code-cell">
+            <Button
+              v-if="normalizeCode(row.iccid)"
+              type="link"
+              class="code-link"
+              @click="handlePreview(row)"
+            >
+              {{ normalizeCode(row.iccid) }}
+            </Button>
+            <span v-else class="code-text">-</span>
+            <Button
+              v-if="normalizeCode(row.iccid)"
+              type="text"
+              size="small"
+              class="code-copy-btn"
+              title="复制ICCID"
+              aria-label="复制ICCID"
+              :icon="h(Copy)"
+              @click.stop="handleCopyCode(row.iccid)"
+            />
+          </div>
+        </template>
+        <template #msisdn="{ row }">
+          <div class="code-cell">
+            <span class="code-text">{{
+              normalizeCode(row.msisdn) || '-'
+            }}</span>
+            <Button
+              v-if="normalizeCode(row.msisdn)"
+              type="text"
+              size="small"
+              class="code-copy-btn"
+              title="复制MSISDN"
+              aria-label="复制MSISDN"
+              :icon="h(Copy)"
+              @click.stop="handleCopyCode(row.msisdn)"
+            />
+          </div>
+        </template>
+        <template #imsi="{ row }">
+          <div class="code-cell">
+            <span class="code-text">{{ normalizeCode(row.imsi) || '-' }}</span>
+            <Button
+              v-if="normalizeCode(row.imsi)"
+              type="text"
+              size="small"
+              class="code-copy-btn"
+              title="复制IMSI"
+              aria-label="复制IMSI"
+              :icon="h(Copy)"
+              @click.stop="handleCopyCode(row.imsi)"
+            />
+          </div>
+        </template>
+      </Grid>
+    </div>
+    <Modal
+      v-model:open="batchQueryOpen"
+      title="批量查询"
+      :width="760"
+      :confirm-loading="batchQueryLoading"
+      ok-text="查询"
+      cancel-text="取消"
+      @ok="handleBatchQuery"
+    >
+      <p class="mb-3 text-muted-foreground">
+        每行填写 1 至 3 个号码值（ICCID / MSISDN / IMSI），单次最多 1000 条。
+        查询结果保留当前筛选条件，可使用原有导出按钮导出。
+      </p>
+      <Input.TextArea
+        v-model:value="batchInput"
+        :auto-size="{ minRows: 8, maxRows: 12 }"
+        placeholder="每行填写 1 至 3 个号码值（ICCID / MSISDN / IMSI），单次最多 1000 条"
+      />
+    </Modal>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
+<style scoped>
+.code-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.code-link {
+  max-width: calc(100% - 28px);
+  min-width: 0;
+  height: 24px;
+  padding: 0;
+  overflow: hidden;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code-text {
+  min-width: 0;
+  overflow: hidden;
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code-copy-btn {
+  width: 18px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0;
+  color: #1677ff;
+  line-height: 18px;
+}
+
+.code-copy-btn :deep(svg) {
+  width: 13px;
+  height: 13px;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/model.test.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/model.test.ts
new file mode 100644
index 0000000..892952d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/model.test.ts
@@ -0,0 +1,135 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+  IndexGridColumns,
+  IndexGridSchema,
+  resolveChannelDisplay,
+  viewSchema,
+} from './model';
+
+vi.mock('#/utils', () => ({ renderDict: vi.fn() }));
+vi.mock('#/utils/dict', () => ({ getDictOptions: () => [] }));
+vi.mock('#/constants/FormOption', () => ({
+  default: { Api: { tSimChannels: () => ({}) } },
+}));
+
+function display(field: string, value: unknown, row: Record<string, unknown>) {
+  const schema = viewSchema.find((item) => item.field === field);
+  if (!schema) {
+    throw new Error(`missing view schema for ${field}`);
+  }
+  return schema.render ? schema.render(value, row) : value;
+}
+
+describe('card detail traffic cutoff', () => {
+  it.each([0, '0', null, undefined, ''])(
+    'hides threshold when status is %s',
+    (status) => {
+      expect(
+        display('trafficCutoffThreshold', 0, { trafficCutoffStatus: status }),
+      ).toBe('-');
+      expect(
+        display('trafficCutoffThreshold', 10, { trafficCutoffStatus: status }),
+      ).toBe('-');
+    },
+  );
+
+  it.each([1, 2, '1', '2'])(
+    'keeps configured threshold for status %s',
+    (status) => {
+      expect(
+        display('trafficCutoffThreshold', 100, { trafficCutoffStatus: status }),
+      ).toBe(100);
+    },
+  );
+
+  it('renders configuration status from the field value, not the record argument', () => {
+    expect(display('trafficCutoffStatus', 0, {})).toBe('未配置');
+    expect(display('trafficCutoffStatus', 1, {})).toBe('已开启');
+    expect(display('trafficCutoffStatus', 2, {})).toBe('已关闭');
+  });
+});
+
+describe('sim card channel filter', () => {
+  it('supports fuzzy matching by channel name and code', () => {
+    const channelSchema = IndexGridSchema.find(
+      (item) => item.fieldName === 'chanKey',
+    );
+    if (!channelSchema) {
+      throw new Error('missing channel filter schema');
+    }
+    const componentProps = channelSchema.componentProps as Record<string, any>;
+
+    expect(componentProps.showSearch).toBe(true);
+    expect(
+      componentProps.filterOption('mobile', {
+        label: 'China Mobile',
+        value: 'CMCC-001',
+      }),
+    ).toBe(true);
+    expect(
+      componentProps.filterOption('001', {
+        label: 'China Mobile',
+        value: 'CMCC-001',
+      }),
+    ).toBe(true);
+    expect(
+      componentProps.filterOption('unicom', {
+        label: 'China Mobile',
+        value: 'CMCC-001',
+      }),
+    ).toBe(false);
+  });
+});
+
+describe('sim card channel display', () => {
+  it('prefers the channel alias used by the card summary', () => {
+    expect(
+      resolveChannelDisplay({
+        chanAlias: 'China Mobile 82',
+        chanKey: 'CMCC-82',
+        chanName: 'China Mobile',
+      }),
+    ).toBe('China Mobile 82');
+  });
+
+  it('falls back to channel name and channel code', () => {
+    expect(resolveChannelDisplay({ chanName: 'China Mobile' })).toBe(
+      'China Mobile',
+    );
+    expect(resolveChannelDisplay({ chanKey: 'CMCC-82' })).toBe('CMCC-82');
+    expect(resolveChannelDisplay({})).toBe('-');
+  });
+});
+
+describe('sim card date display', () => {
+  it('hides activation date from list and detail views', () => {
+    const activationColumn = IndexGridColumns?.find(
+      (item) => item.field === 'bossActivateAt',
+    );
+    expect(activationColumn?.visible).toBe(false);
+    expect(viewSchema.some((item) => item.field === 'bossActivateAt')).toBe(
+      false,
+    );
+  });
+
+  it.each(['flowPkgEndAt', 'outStockTime'])(
+    'renders %s as date only in detail view',
+    (field) => {
+      expect(display(field, '2026-09-18 15:30:45', {})).toBe('2026-09-18');
+    },
+  );
+
+  it.each(['flowPkgEndAt', 'outStockTime'])(
+    'renders %s as date only in list view',
+    (field) => {
+      const column = IndexGridColumns?.find((item) => item.field === field);
+      const render = column?.slots?.default as
+        | ((input: { row: Record<string, unknown> }) => unknown)
+        | undefined;
+      expect(render?.({ row: { [field]: '2026-09-18T15:30:45+08:00' } })).toBe(
+        '2026-09-18',
+      );
+    },
+  );
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/model.tsx
new file mode 100644
index 0000000..987d2ef
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/model.tsx
@@ -0,0 +1,438 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { TSimCardInfoModel } from '#/api/iotlcm/tCommunication/tSimCardInfo/type';
+import type { DescItem } from '#/components/description';
+
+import DictEnum from '#/constants/DictEnum';
+import FormOptions from '#/constants/FormOption';
+import { renderDict } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+function formatFlowValue(value: unknown) {
+  const numberValue = Number(value);
+  return Number.isFinite(numberValue) ? numberValue.toFixed(2) : '-';
+}
+
+function formatDateOnly(value: unknown) {
+  const text = String(value ?? '').trim();
+  if (!text) {
+    return '-';
+  }
+  const matched = text.match(/^\d{4}-\d{2}-\d{2}/);
+  return matched?.[0] ?? text;
+}
+
+export function resolveChannelDisplay(record: {
+  chanAlias?: unknown;
+  chanKey?: unknown;
+  chanName?: unknown;
+}) {
+  for (const value of [record.chanAlias, record.chanName, record.chanKey]) {
+    const text = String(value ?? '').trim();
+    if (text) {
+      return text;
+    }
+  }
+  return '-';
+}
+
+function fuzzyOptionFilter(
+  input: string,
+  option?: { label?: unknown; value?: unknown },
+) {
+  const keyword = input.trim().toLowerCase();
+  if (!keyword) {
+    return true;
+  }
+  return [option?.label, option?.value].some((item) =>
+    String(item ?? '')
+      .toLowerCase()
+      .includes(keyword),
+  );
+}
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'cardValue',
+    component: 'Input',
+    label: '卡号',
+    componentProps: {
+      placeholder: '请输入卡号MSISDN/ICCID/IMSI',
+    },
+  },
+  {
+    fieldName: 'bossCardStatus',
+    component: 'Select',
+    label: '卡状态',
+    componentProps: {
+      placeholder: '请选择运营商卡状态',
+      options: getDictOptions(DictEnum.T_BOSS_CARD_STATUS, true),
+    },
+  },
+  {
+    fieldName: 'imei',
+    component: 'Input',
+    label: 'IMEI',
+    componentProps: {
+      placeholder: '请输入IMEI',
+    },
+  },
+
+  {
+    fieldName: 'chanKey',
+    component: 'ApiSelect',
+    label: '所属通道',
+    componentProps: {
+      ...FormOptions.Api.tSimChannels({ autoSelect: false }),
+      filterOption: fuzzyOptionFilter,
+      showSearch: true,
+    },
+  },
+  {
+    fieldName: 'timeType',
+    component: 'Select',
+    label: '时间类型',
+    componentProps: {
+      placeholder: '请选择时间类型',
+      options: getDictOptions(DictEnum.T_CARDINFO_TIMETYPE, true),
+    },
+  },
+  {
+    fieldName: 'time',
+    component: 'RangePicker',
+    label: '时间范围',
+    componentProps: {
+      showTime: { format: 'HH:mm:ss' },
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    fieldName: 'sortValue',
+    component: 'Select',
+    label: '排序值',
+    componentProps: {
+      placeholder: '请选择排序值',
+      options: getDictOptions(DictEnum.T_CARDINFO_SORTVALUE, true),
+    },
+  },
+  {
+    fieldName: 'sortType',
+    component: 'Select',
+    label: '排序类型',
+    componentProps: {
+      placeholder: '请选择排序类型',
+      options: getDictOptions(DictEnum.T_CARDINFO_SORTTYPE, true),
+    },
+  },
+
+  {
+    fieldName: 'condition',
+    component: 'Select',
+    label: '查询条件',
+    componentProps: {
+      placeholder: '请选择查询条件',
+      options: getDictOptions(DictEnum.T_CARDINFO_SELECTCONDITIONS),
+    },
+  },
+  {
+    fieldName: 'startNum',
+    component: 'Input',
+    label: '起始号段',
+    componentProps: {
+      placeholder: '请输入起始号段',
+    },
+  },
+  {
+    fieldName: 'endNum',
+    component: 'Input',
+    label: '结束号段',
+    componentProps: {
+      placeholder: '请输入结束号段',
+    },
+  },
+  {
+    fieldName: 'remark',
+    component: 'Input',
+    label: '备注信息',
+    componentProps: {
+      placeholder: '请输入备注信息',
+    },
+  },
+  // {
+  //   fieldName: 'condition',
+  //   component: markRaw(NumberSegment),
+  //   label: '查询条件',
+  //   componentProps(values) {
+  //     return {
+  //       placeholder: '请选择查询条件',
+  //       options: getDictOptions(DictEnum.T_CARDINFO_SELECTCONDITIONS),
+  //       startNum: values.startNum,
+  //       endNum: values.endNum,
+  //       value: values.condition,
+  //       'onUpdate:startNum': (val: any) => {
+  //         values.startNum = val;
+  //       },
+  //       'onUpdate:endNum': (val: any) => {
+  //         values.endNum = val;
+  //       },
+  //       'onUpdate:value': (val: any) => {
+  //         values.condition = val;
+  //       },
+  //     };
+  //   },
+
+  //   formItemClass: '!col-span-6 ',
+  // },
+  {
+    fieldName: 'dimension',
+    component: 'Select',
+    label: '维度',
+    componentProps: {
+      placeholder: '请选择查询维度',
+      options: getDictOptions(DictEnum.T_CARDINFO_DIMENSION, true),
+    },
+  },
+  {
+    fieldName: 'dimensionStatus',
+    component: 'Select',
+    label: '维度状态',
+    componentProps: {
+      placeholder: '请选择查询维度状态',
+      options: getDictOptions(DictEnum.T_CARDINFO_DIMENSIONSTATUS),
+    },
+  },
+  {
+    fieldName: 'dimensionValue',
+    component: 'Input',
+    label: '维度值',
+    componentProps: {
+      placeholder: '请选择维度值',
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    title: 'ICCID',
+    field: 'iccid',
+    align: 'center',
+    width: 210,
+    fixed: 'left',
+    slots: { default: 'iccid' },
+  },
+  {
+    title: 'MSISDN',
+    field: 'msisdn',
+    align: 'center',
+    width: 160,
+    slots: { default: 'msisdn' },
+  },
+
+  {
+    title: 'IMSI',
+    field: 'imsi',
+    align: 'center',
+    width: 170,
+    slots: { default: 'imsi' },
+  },
+  {
+    title: '卡状态',
+    field: 'bossCardStatus',
+    params: { dictType: DictEnum.T_BOSS_CARD_STATUS },
+    align: 'center',
+    width: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.bossCardStatus, DictEnum.T_BOSS_CARD_STATUS);
+      },
+    },
+  },
+
+  {
+    title: '通道',
+    field: 'chanAlias',
+    align: 'center',
+    width: 250,
+  },
+  {
+    title: '所属公司',
+    field: 'deptName',
+    align: 'center',
+    width: 200,
+  },
+
+  {
+    title: '套餐',
+    field: 'packageName',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: '总流量(MB)',
+    field: 'packageTotalFlowMb',
+    align: 'center',
+    width: 140,
+    slots: {
+      default: ({ row }) => {
+        return formatFlowValue(row.packageTotalFlowMb);
+      },
+    },
+  },
+  {
+    title: '已用流量(MB)',
+    field: 'usedFlowMb',
+    align: 'center',
+    width: 140,
+    slots: {
+      default: ({ row }) => {
+        return formatFlowValue(row.usedFlowMb);
+      },
+    },
+  },
+  {
+    title: '剩余流量(MB)',
+    field: 'reminFlowMb',
+    align: 'center',
+    width: 140,
+    slots: {
+      default: ({ row }) => {
+        return formatFlowValue(row.reminFlowMb);
+      },
+    },
+  },
+
+  {
+    title: '激活日期',
+    field: 'bossActivateAt',
+    visible: false,
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: '到期时间',
+    field: 'flowPkgEndAt',
+    align: 'center',
+    width: 150,
+    slots: {
+      default: ({ row }) => formatDateOnly(row.flowPkgEndAt),
+    },
+  },
+  {
+    title: '出库时间',
+    field: 'outStockTime',
+    align: 'center',
+    width: 150,
+    slots: {
+      default: ({ row }) => formatDateOnly(row.outStockTime),
+    },
+  },
+
+  {
+    title: '备注信息',
+    field: 'remark',
+    align: 'center',
+    width: 200,
+  },
+  { title: '操作', width: 120, fixed: 'right', slots: { default: 'action' } },
+];
+
+// 表格列接口
+export type RowType = TSimCardInfoModel;
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: 'ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'remark',
+    component: 'Textarea',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+      rows: 4,
+      showCount: true,
+      maxlength: 500,
+    },
+  },
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'msisdn', label: 'MSISDN' },
+  { field: 'iccid', label: 'ICCID' },
+  { field: 'imsi', label: 'IMSI' },
+  { field: 'imei', label: 'IMEI' },
+  {
+    field: 'bossCardStatus',
+    label: '卡状态',
+    render(row: any) {
+      return renderDict(row, DictEnum.T_BOSS_CARD_STATUS);
+    },
+  },
+  {
+    field: 'netModel',
+    label: '网络类型',
+    render(row: any) {
+      return renderDict(row, DictEnum.T_NET_MODEL);
+    },
+  },
+  { field: 'bossActivateAt', label: '激活日期' },
+  { field: 'flowSyncTime', label: '流量同步时间' },
+
+  { field: 'packageTotalFlowMb', label: '套餐总流量(MB)' },
+  { field: 'flowPkgEndAt', label: '到期时间' },
+
+  { field: 'outStockTime', label: '出库时间' },
+  { field: 'packageName', label: '当前套餐名称' },
+  { field: 'usedFlowMb', label: '已用流量(MB)' },
+  { field: 'reminFlowMb', label: '剩余流量(MB)' },
+  { field: 'deptName', label: '所属企业' },
+  { field: 'chanAlias', label: '所属通道' },
+  {
+    field: 'trafficCutoffStatus',
+    label: '达量断网配置状态',
+    render(value: unknown) {
+      const map: Record<string, string> = {
+        '0': '未配置',
+        '1': '已开启',
+        '2': '已关闭',
+      };
+      return map[String(value)] ?? '-';
+    },
+  },
+  {
+    field: 'trafficCutoffThreshold',
+    label: '限额(MB)',
+    render(value: unknown, record: Record<string, unknown>) {
+      if (!['1', '2'].includes(String(record?.trafficCutoffStatus))) {
+        return '-';
+      }
+      return value === null || value === undefined || value === ''
+        ? '-'
+        : value;
+    },
+  },
+  { field: 'remark', label: '备注' },
+];
+
+export const viewSchema = ViewDescSchema.filter(
+  (item) => item.field !== 'bossActivateAt',
+).map((item) => {
+  if (item.field === 'flowPkgEndAt' || item.field === 'outStockTime') {
+    return {
+      ...item,
+      render: (value: unknown) => formatDateOnly(value),
+    };
+  }
+  return item;
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/session-state.test.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/session-state.test.ts
new file mode 100644
index 0000000..0d4e25e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/session-state.test.ts
@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  createInitialSessionState,
+  resolveSessionState,
+} from './session-state';
+
+describe('sim card session state', () => {
+  it('does not mark the session as queried when the detail opens', () => {
+    expect(createInitialSessionState()).toEqual({
+      queried: false,
+      message: '',
+    });
+  });
+
+  it('keeps the first automatic empty result silent', () => {
+    expect(
+      resolveSessionState({
+        mode: 'auto',
+        session: null,
+      }),
+    ).toEqual({
+      queried: true,
+      message: '',
+    });
+  });
+
+  it('shows the device as offline after a manual empty result', () => {
+    expect(
+      resolveSessionState({
+        mode: 'manual',
+        session: {},
+      }),
+    ).toEqual({
+      queried: true,
+      message: '未获取到会话信息，设备可能未上线',
+    });
+  });
+
+  it('does not treat card status as a successful session', () => {
+    expect(resolveSessionState({ mode: 'manual', session: null }).message).toBe(
+      '未获取到会话信息，设备可能未上线',
+    );
+  });
+
+  it.each([{}, { createTime: '', imei: '', status: '' }, { status: '-2' }])(
+    'shows no-session text for empty session %s',
+    (session) => {
+      expect(resolveSessionState({ mode: 'manual', session }).message).toBe(
+        '未获取到会话信息，设备可能未上线',
+      );
+    },
+  );
+
+  it('shows session details when the session returns data', () => {
+    expect(
+      resolveSessionState({
+        mode: 'manual',
+        session: { status: '0' },
+      }),
+    ).toEqual({
+      queried: true,
+      message: '',
+    });
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/session-state.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/session-state.ts
new file mode 100644
index 0000000..5f54296
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/session-state.ts
@@ -0,0 +1,53 @@
+export interface SessionState {
+  queried: boolean;
+  message: string;
+}
+
+export type SessionQueryMode = 'auto' | 'manual';
+
+interface ResolveSessionStateInput {
+  mode?: SessionQueryMode;
+  session: unknown;
+}
+
+function hasSessionData(session: unknown) {
+  if (!session || typeof session !== 'object') {
+    return false;
+  }
+  const data = session as Record<string, unknown>;
+  const status = String(data.status ?? '').trim();
+  if (status === '-2') {
+    return false;
+  }
+  return [
+    'apnId',
+    'createTime',
+    'imei',
+    'ipv4',
+    'ipv6',
+    'ipv6Prefix',
+    'rat',
+    'status',
+  ].some((key) => String(data[key] ?? '').trim() !== '');
+}
+
+export function createInitialSessionState(): SessionState {
+  return {
+    queried: false,
+    message: '',
+  };
+}
+
+export function resolveSessionState({
+  mode = 'auto',
+  session,
+}: ResolveSessionStateInput): SessionState {
+  let message = '';
+  if (mode === 'manual' && !hasSessionData(session)) {
+    message = '未获取到会话信息，设备可能未上线';
+  }
+  return {
+    queried: true,
+    message,
+  };
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/view.vue
new file mode 100644
index 0000000..5ab33e5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo/view.vue
@@ -0,0 +1,1177 @@
+<script setup lang="ts">
+import type { RowType } from './model';
+import type { SessionQueryMode } from './session-state';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { computed, h, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal } from '@vben/common-ui';
+import { useAccessStore } from '@vben/stores';
+
+import { Button, message, TabPane, Tabs, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  GetChangePkg,
+  GetPkgInfo,
+  List as SimCardBindPkgList,
+} from '#/api/iotlcm/tCommunication/tSimCardBindPkg';
+import {
+  QuerySimSession,
+  QuerySimStatus,
+  View,
+} from '#/api/iotlcm/tCommunication/tSimCardInfo';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+import DictEnum from '#/constants/DictEnum';
+import { renderDict } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+import {
+  resolveAvailableRoutePath,
+  resolveDiagnoseRoutePath,
+  routeText,
+} from './diagnose-route';
+import { resolveChannelDisplay, viewSchema } from './model';
+import {
+  createInitialSessionState,
+  resolveSessionState,
+} from './session-state';
+
+/** ====================  方法  ==================== */
+const router = useRouter();
+const accessStore = useAccessStore();
+const { hasAccessByCodes } = useAccess();
+const currentCard = ref<any>(null);
+let detailLoadSeq = 0;
+const sessionInfo = ref<any>(null);
+const realtimeStatus = ref<any>(null);
+const sessionLoading = ref(false);
+const initialSessionState = createInitialSessionState();
+const sessionQueried = ref(initialSessionState.queried);
+const sessionMessage = ref(initialSessionState.message);
+
+interface SessionFieldItem {
+  label: string;
+  value: string;
+}
+
+function getDisplayValue(value: unknown): string {
+  return value === null || value === undefined || value === ''
+    ? '-'
+    : String(value);
+}
+
+function formatFlow(value: unknown, unit = 'MB'): string {
+  if (value === null || value === undefined || value === '') {
+    return '-';
+  }
+  const numberValue = Number(value);
+  return Number.isFinite(numberValue)
+    ? `${numberValue.toFixed(2)} ${unit}`
+    : '-';
+}
+
+function getRatText(value: null | number | string | undefined) {
+  const ratMap: Record<string, string> = {
+    '5': '2G',
+    '6': '4G',
+    '7': '5G',
+    '8': 'NB',
+  };
+  const rat = String(getDisplayValue(value));
+  return ratMap[rat] || rat;
+}
+
+function getStatusText(value: null | number | string | undefined) {
+  const status = String(getDisplayValue(value));
+  if (status === '0' || status === '00') {
+    return '在线';
+  }
+  if (status === '-1') {
+    return '不在线';
+  }
+  if (status === '-2') {
+    return '未查询到会话';
+  }
+  return status;
+}
+
+function getRealtimeImei() {
+  return getDisplayValue(sessionInfo.value?.imei);
+}
+
+function getDictLabel(dictName: string, value: unknown) {
+  if (value === null || value === undefined || value === '') {
+    return '-';
+  }
+  const options = getDictOptions(dictName);
+  const option = options.find(
+    (item: any) => String(item.value) === String(value),
+  );
+  return option?.label ?? String(value);
+}
+
+const addPackagePayTypeFallbackLabels: Record<string, string> = {
+  '3': '线下支付',
+  '4': '余额支付',
+};
+
+function normalizeAddPackagePayType(row: Record<string, any>) {
+  const rawValue = row?.payType ?? row?.pay_type;
+  const rawText = String(rawValue ?? '').trim();
+  if (rawText !== '' && rawText !== '0') {
+    return rawText;
+  }
+
+  const paymentMode = String(row?.paymentMode ?? row?.payment_mode ?? '')
+    .trim()
+    .toLowerCase();
+  if (paymentMode === 'offline') {
+    return '3';
+  }
+  if (paymentMode === 'balance') {
+    return '4';
+  }
+  if (Number(row?.balance ?? 0) > 0) {
+    return '4';
+  }
+  if (Number(row?.offlinePaidAmount ?? row?.offline_paid_amount ?? 0) > 0) {
+    return '3';
+  }
+  if (
+    Number(row?.totalAmount ?? row?.total_amount ?? 0) > 0 &&
+    Number(row?.paidAmount ?? row?.paid_amount ?? 0) > 0
+  ) {
+    return '3';
+  }
+  return '';
+}
+
+function renderPackagePayType(row: Record<string, any>) {
+  const payType = normalizeAddPackagePayType(row);
+  if (!payType) {
+    return '--';
+  }
+  const options = getDictOptions(DictEnum.PAY_TYPE);
+  const matched = options.some(
+    (item: any) =>
+      String(item.dictValue ?? item.value) === payType ||
+      String(item.value ?? item.dictValue) === payType,
+  );
+  if (matched) {
+    return renderDict(payType, DictEnum.PAY_TYPE);
+  }
+  const fallback = addPackagePayTypeFallbackLabels[payType];
+  return fallback
+    ? h(Tag, {}, () => fallback)
+    : renderDict(payType, DictEnum.PAY_TYPE);
+}
+
+function getCardPowerStatus() {
+  return getDictLabel(
+    DictEnum.T_BOSS_CARD_STATUS,
+    realtimeStatus.value?.cardStatus ?? currentCard.value?.bossCardStatus,
+  );
+}
+
+const sessionFieldItems = computed<SessionFieldItem[]>(() => {
+  return [
+    {
+      label: '接入方式',
+      value: getRatText(sessionInfo.value?.rat),
+    },
+    {
+      label: '在线状态',
+      value: getStatusText(sessionInfo.value?.status),
+    },
+    {
+      label: '会话创建时间',
+      value: getDisplayValue(sessionInfo.value?.createTime),
+    },
+    {
+      label: '实时IMEI',
+      value: getRealtimeImei(),
+    },
+    {
+      label: '开关机状态',
+      value: getCardPowerStatus(),
+    },
+    {
+      label: 'IPv4地址',
+      value: getDisplayValue(sessionInfo.value?.ipv4),
+    },
+    {
+      label: 'APN',
+      value: getDisplayValue(sessionInfo.value?.apnId),
+    },
+    {
+      label: 'IPv6地址',
+      value: getDisplayValue(sessionInfo.value?.ipv6),
+    },
+    {
+      label: 'IPv6前缀',
+      value: getDisplayValue(sessionInfo.value?.ipv6Prefix),
+    },
+  ];
+});
+
+const sessionTableRows = computed(() => {
+  const rows: SessionFieldItem[][] = [];
+  for (let index = 0; index < sessionFieldItems.value.length; index += 2) {
+    rows.push(sessionFieldItems.value.slice(index, index + 2));
+  }
+  return rows;
+});
+
+function resetSessionInfo() {
+  const initialState = createInitialSessionState();
+  sessionInfo.value = null;
+  realtimeStatus.value = null;
+  sessionQueried.value = initialState.queried;
+  sessionMessage.value = initialState.message;
+}
+
+function resetDetailState() {
+  activeKey.value = '1';
+  currentCard.value = null;
+  sessionLoading.value = false;
+  resetSessionInfo();
+  setDescProps({ data: {} }, true);
+  tableApi.setGridOptions({ data: [] });
+  pkgSummaryTableApi.setGridOptions({ data: [] });
+  pkgDetailTableApi.setGridOptions({ data: [] });
+  pkgChangeTableApi.setGridOptions({ data: [] });
+}
+
+function canQuerySimSession() {
+  return hasAccessByCodes(['cpm:iot:tSimCardInfo:querySimSession']);
+}
+
+function canQuerySimStatus() {
+  return hasAccessByCodes(['cpm:iot:tSimCardInfo:querySimStatus']);
+}
+
+async function loadSessionInfo(
+  record: any,
+  requestSeq = detailLoadSeq,
+  mode: SessionQueryMode = 'auto',
+) {
+  if (requestSeq !== detailLoadSeq) {
+    return;
+  }
+  resetSessionInfo();
+  currentCard.value = record;
+
+  const iccid = String(record?.iccid || '').trim();
+  if (!iccid) {
+    const state = resolveSessionState({ mode, session: null });
+    sessionQueried.value = state.queried;
+    sessionMessage.value = state.message;
+    return;
+  }
+
+  const query = {
+    iccid,
+  };
+  const sessionRequest = canQuerySimSession()
+    ? QuerySimSession(query)
+    : Promise.resolve(null);
+  const statusRequest = canQuerySimStatus()
+    ? QuerySimStatus(query)
+    : Promise.resolve(null);
+
+  if (!canQuerySimSession() && !canQuerySimStatus()) {
+    const state = resolveSessionState({ mode, session: null });
+    sessionQueried.value = state.queried;
+    sessionMessage.value = state.message;
+    return;
+  }
+
+  sessionLoading.value = true;
+  try {
+    const [sessionResult, statusResult] = await Promise.allSettled([
+      sessionRequest,
+      statusRequest,
+    ]);
+
+    if (requestSeq !== detailLoadSeq) {
+      return;
+    }
+
+    if (sessionResult?.status === 'fulfilled' && sessionResult.value) {
+      sessionInfo.value = sessionResult.value;
+    }
+    if (statusResult?.status === 'fulfilled' && statusResult.value) {
+      realtimeStatus.value = statusResult.value;
+    }
+
+    const state = resolveSessionState({
+      mode,
+      session: sessionInfo.value,
+    });
+    sessionQueried.value = state.queried;
+    sessionMessage.value = state.message;
+  } catch {
+    const state = resolveSessionState({ mode, session: null });
+    sessionQueried.value = state.queried;
+    sessionMessage.value = state.message;
+  } finally {
+    if (requestSeq === detailLoadSeq) {
+      sessionLoading.value = false;
+    }
+  }
+}
+
+async function handleRefreshSession() {
+  if (!currentCard.value) {
+    return;
+  }
+  if (!canQuerySimSession() && !canQuerySimStatus()) {
+    sessionQueried.value = true;
+    sessionMessage.value = '未获取到会话信息，设备可能未上线';
+    return;
+  }
+  await loadSessionInfo(currentCard.value, detailLoadSeq, 'manual');
+}
+
+async function pushResolvedRoute(
+  path: string,
+  query: Record<string, string>,
+  warnText: string,
+) {
+  if (!path) {
+    message.warning(warnText);
+    return;
+  }
+  await router.push({ path, query });
+  modalApi.close();
+}
+
+async function handleOpenDiagnosis() {
+  const queryCode = String(currentCard.value?.iccid || '').trim();
+  if (!queryCode) {
+    message.warning('当前卡缺少ICCID');
+    return;
+  }
+  // 路由定位规则已抽到 diagnose-route.ts，与列表页「更多 → 诊断」共用同一套。
+  const path = resolveDiagnoseRoutePath(router, accessStore);
+  await pushResolvedRoute(
+    path,
+    {
+      pageKey: path,
+      queryCode,
+    },
+    '未找到智能诊断菜单路由，请检查菜单配置',
+  );
+}
+
+async function handleShowChannel() {
+  const chanKey = currentCard.value?.chanKey;
+  if (!chanKey) {
+    message.warning('当前卡未绑定通道');
+    return;
+  }
+  const path = resolveAvailableRoutePath(
+    router,
+    accessStore,
+    (route, fullPath) => {
+      const text = routeText(route, fullPath);
+      const title = String(route.meta?.title || '');
+      return (
+        text.includes('tsimchannels') ||
+        text.includes('simchannels') ||
+        text.includes('cpm:iot:tsimchannels') ||
+        title.includes('通道管理')
+      );
+    },
+    [
+      '/tChannel/tSimChannels',
+      '/tChannel/tSimChannels/index',
+      '/tSimChannels',
+      '/iotlcm/tChannel/tSimChannels',
+      '/iotlcm/tChannel/tSimChannels/index',
+      '/iotlcm/tSimChannels',
+    ],
+  );
+  await pushResolvedRoute(
+    path,
+    { chanKey },
+    '未找到通道管理菜单路由，请检查菜单配置',
+  );
+}
+
+async function handleOpenChange(requestSeq: number) {
+  const { record } = modalApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  if (requestSeq !== detailLoadSeq) {
+    return null;
+  }
+  setDescProps({ data: record2 }, true);
+  currentCard.value = record2;
+  void loadSessionInfo(record2, requestSeq, 'auto');
+  // 归属信息表格数据
+  tableApi.setGridOptions({
+    data: [
+      {
+        currentPackageCode: record2.currentPackageCode,
+        packageName: record2.packageName,
+        deptName: record2.deptName,
+        chanName: resolveChannelDisplay(record2),
+      },
+    ],
+  });
+  // 套餐概要表格数据
+  pkgSummaryTableApi.setGridOptions({
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          const pkgResult = await SimCardBindPkgList({ iccid: record2.iccid });
+          if (requestSeq !== detailLoadSeq) {
+            return { items: [], total: 0 };
+          }
+          return pkgResult;
+        },
+      },
+    },
+  });
+  // 套餐详情表格数据
+  pkgDetailTableApi.setGridOptions({
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          const pkgInfoResult = await GetPkgInfo({ iccid: record2.iccid });
+          if (requestSeq !== detailLoadSeq) {
+            return { items: [], total: 0 };
+          }
+          return pkgInfoResult;
+        },
+      },
+    },
+  });
+  // 变更套餐表格数据
+  pkgChangeTableApi.setGridOptions({
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          const changePkgResult = await GetChangePkg({ iccid: record2.iccid });
+          if (requestSeq !== detailLoadSeq) {
+            return { items: [], total: 0 };
+          }
+          return changePkgResult;
+        },
+      },
+    },
+  });
+  if (requestSeq !== detailLoadSeq) {
+    return null;
+  }
+  await Promise.allSettled([
+    pkgSummaryTableApi.query(),
+    pkgDetailTableApi.query(),
+    pkgChangeTableApi.query(),
+  ]);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  class: 'sim-card-view-modal w-[1200px]',
+  contentClass: 'sim-card-view-modal-content',
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      detailLoadSeq += 1;
+      resetDetailState();
+      return null;
+    }
+    const requestSeq = ++detailLoadSeq;
+    resetDetailState();
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpenChange(requestSeq);
+    });
+  },
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 4,
+  labelWidth: 120,
+  schema: viewSchema,
+  contentClass: 'max-h-[500px] overflow-y-auto',
+} as any);
+
+const activeKey = ref('1');
+
+const gridOptions: VxeGridProps = {
+  columns: [
+    {
+      field: 'currentPackageCode',
+      title: '当前套餐编号',
+      className: 'col-bold',
+    },
+    { field: 'packageName', title: '当前套餐名称' },
+    { field: 'deptName', title: '所属企业', className: 'col-bold' },
+    { field: 'chanName', title: '所属通道' },
+  ],
+  pagerConfig: {
+    enabled: false,
+  },
+  height: 'auto',
+  // 表格字体
+  cellStyle: { fontSize: '12px' },
+  headerCellStyle: { fontSize: '12px' },
+  rowStyle: { fontSize: '12px' },
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({ gridOptions });
+
+const pkgSummaryGridOptions: VxeGridProps = {
+  columns: [
+    { field: 'orderCode', title: '订单编号', minWidth: 180 },
+    { field: 'packageName', title: '套餐名称', minWidth: 140 },
+    {
+      field: 'packageType',
+      title: '套餐类型',
+      minWidth: 100,
+      slots: {
+        default: ({ row }) => {
+          return renderDict(row.packageType, DictEnum.T_PACKAGE_TYPE);
+        },
+      },
+    },
+    {
+      field: 'effectiveStatus',
+      title: '订购状态',
+      minWidth: 100,
+      slots: {
+        default: ({ row }) => {
+          return renderDict(row.effectiveStatus, DictEnum.T_EFFECTIVE_STATUS);
+        },
+      },
+    },
+    { field: 'effectiveTime', title: '生效时间', minWidth: 160 },
+    { field: 'expectedExpireTime', title: '到期时间', minWidth: 160 },
+  ],
+  pagerConfig: { enabled: false },
+  height: 'auto',
+  cellStyle: { fontSize: '12px' },
+  headerCellStyle: { fontSize: '12px' },
+  rowStyle: { fontSize: '12px' },
+};
+
+const [BasicPackageTable, pkgSummaryTableApi] = useVbenVxeGrid({
+  gridOptions: pkgSummaryGridOptions,
+});
+
+const pkgDetailGridOptions: VxeGridProps = {
+  columns: [
+    { field: 'orderCode', title: '订单号', minWidth: 180 },
+    { field: 'packageName', title: '加油包名称', minWidth: 160 },
+    {
+      field: 'packageFlowMb',
+      title: '总流量',
+      minWidth: 120,
+      slots: {
+        default: ({ row }) => formatFlow(row.packageFlowMb),
+      },
+    },
+    {
+      field: 'payType',
+      title: '支付方式',
+      minWidth: 100,
+      slots: {
+        default: ({ row }) => {
+          return renderPackagePayType(row);
+        },
+      },
+    },
+    {
+      field: 'payTime',
+      title: '交易时间',
+      minWidth: 160,
+      slots: {
+        default: ({ row }) => row.payTime || row.handleTime || '--',
+      },
+    },
+  ],
+  pagerConfig: { enabled: false },
+  height: 'auto',
+  cellStyle: { fontSize: '12px' },
+  headerCellStyle: { fontSize: '12px' },
+  rowStyle: { fontSize: '12px' },
+};
+
+const [BasicPkgDetailTable, pkgDetailTableApi] = useVbenVxeGrid({
+  gridOptions: pkgDetailGridOptions,
+});
+
+const pkgChangeGridOptions: VxeGridProps = {
+  columns: [
+    { field: 'orderCode', title: '订单编号', minWidth: 120 },
+    { field: 'previousPackageName', title: '变更前套餐名称', minWidth: 150 },
+    { field: 'packageName', title: '变更后套餐名称', minWidth: 150 },
+    {
+      field: 'effectiveStatus',
+      title: '订购状态',
+      minWidth: 160,
+      slots: {
+        default: ({ row }) => {
+          return renderDict(row.effectiveStatus, DictEnum.T_EFFECTIVE_STATUS);
+        },
+      },
+    },
+    { field: 'handleTime', title: '办理时间', minWidth: 160 },
+  ],
+  pagerConfig: { enabled: false },
+  height: 'auto',
+  cellStyle: { fontSize: '12px' },
+  headerCellStyle: { fontSize: '12px' },
+  rowStyle: { fontSize: '12px' },
+};
+
+const [BasicChangePackageTable, pkgChangeTableApi] = useVbenVxeGrid({
+  gridOptions: pkgChangeGridOptions,
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <div class="detail-action-row">
+      <Button size="small" @click="handleOpenDiagnosis">诊断</Button>
+      <Button
+        v-access:code="'cpm:iot:tSimChannels:view'"
+        size="small"
+        @click="handleShowChannel"
+      >
+        通道
+      </Button>
+    </div>
+    <Description class="desc-small" @register="registerDescription" />
+    <div class="mt-[16px]">
+      <Tabs v-model:active-key="activeKey">
+        <TabPane key="1" tab="会话信息">
+          <div class="session-info-panel">
+            <div class="session-card">
+              <div class="session-card__header">
+                <div class="session-heading">
+                  <div class="session-heading__title">会话信息</div>
+                </div>
+                <Button
+                  size="small"
+                  :loading="sessionLoading"
+                  class="session-refresh-button"
+                  @click="handleRefreshSession"
+                >
+                  刷新
+                </Button>
+              </div>
+
+              <div class="session-table-wrap">
+                <table class="session-table">
+                  <tbody>
+                    <tr
+                      v-for="(row, rowIndex) in sessionTableRows"
+                      :key="rowIndex"
+                    >
+                      <template v-for="item in row" :key="item.label">
+                        <th>{{ item.label }}</th>
+                        <td :title="item.value">{{ item.value }}</td>
+                      </template>
+                      <template v-if="row.length === 1">
+                        <th class="session-table__placeholder"></th>
+                        <td class="session-table__placeholder"></td>
+                      </template>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+
+              <div v-if="sessionMessage" class="session-empty-state">
+                <div class="session-empty-state__message">
+                  {{ sessionMessage }}
+                </div>
+                <div class="session-empty-state__hint">
+                  可稍后再次刷新查询设备当前在线状态
+                </div>
+              </div>
+            </div>
+          </div>
+        </TabPane>
+        <TabPane key="2" tab="归属信息">
+          <BasicTable :no-col-gutter="true" />
+        </TabPane>
+        <TabPane key="3" tab="主套餐">
+          <BasicPackageTable :no-col-gutter="true" />
+        </TabPane>
+        <TabPane key="4" tab="叠加套餐">
+          <div class="p-[16px]">
+            <BasicPkgDetailTable :no-col-gutter="true" />
+          </div>
+        </TabPane>
+        <TabPane key="5" tab="变更历史">
+          <BasicChangePackageTable :no-col-gutter="true" />
+        </TabPane>
+      </Tabs>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+/* 卡详情弹窗：固定高度，内部可滚动 */
+:deep(.sim-card-view-modal) {
+  height: 600px !important;
+  max-height: 600px !important;
+}
+:deep(.sim-card-view-modal-content) {
+  --sim-card-detail-bg: #fff;
+  --sim-card-detail-header-bg: #f7f8fa;
+  --sim-card-detail-border: #d9e1ec;
+  --sim-card-detail-text: #1f2329;
+  --sim-card-detail-muted: #606875;
+  --sim-card-detail-title: #1f2329;
+
+  height: 600px;
+  overflow-y: auto;
+  color: var(--sim-card-detail-text);
+}
+.desc-small :deep(.ant-descriptions-item-label),
+.desc-small :deep(.ant-descriptions-item-content) {
+  font-size: 13px !important;
+  color: var(--sim-card-detail-text) !important;
+}
+/* 1、3、5、7 行加粗加黑（odd 序号对应 nth-child 的 1, 3, 5, 7） */
+.desc-small :deep(.ant-descriptions-item:nth-child(4n + 1)),
+.desc-small :deep(.ant-descriptions-item:nth-child(4n + 3)) {
+  font-weight: 800 !important;
+  color: var(--sim-card-detail-title) !important;
+}
+/* 表格列字体加粗 */
+:deep(.vxe-table .col-bold) {
+  font-weight: 800 !important;
+  color: var(--sim-card-detail-title) !important;
+}
+.detail-action-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.session-info-panel {
+  padding: 16px;
+}
+.session-card {
+  overflow: hidden;
+  border: 1px solid var(--sim-card-detail-border);
+  border-radius: 12px;
+  background: var(--sim-card-detail-bg);
+  box-shadow: 0 4px 16px rgb(15 23 42 / 6%);
+}
+.session-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--sim-card-detail-border);
+  background: linear-gradient(135deg, #f8fbff 0%, #f3f7ff 100%);
+}
+.session-heading {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 12px;
+}
+.session-heading__icon {
+  position: relative;
+  display: grid;
+  flex: 0 0 38px;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #1677ff, #4096ff);
+  box-shadow: 0 6px 14px rgb(22 119 255 / 24%);
+}
+.session-heading__icon::before,
+.session-heading__icon::after,
+.session-heading__icon span {
+  position: absolute;
+  bottom: 10px;
+  width: 4px;
+  content: '';
+  border-radius: 4px;
+  background: #fff;
+}
+.session-heading__icon::before {
+  left: 10px;
+  height: 7px;
+}
+.session-heading__icon span {
+  left: 17px;
+  height: 12px;
+}
+.session-heading__icon::after {
+  left: 24px;
+  height: 18px;
+}
+.session-heading__content {
+  min-width: 0;
+}
+.session-heading__title {
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 22px;
+  color: var(--sim-card-detail-title);
+}
+.session-refresh-button {
+  flex: 0 0 auto;
+  color: #1677ff;
+  border-color: #91caff;
+  border-radius: 6px;
+  background: rgb(255 255 255 / 72%);
+}
+.session-overview {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--sim-card-detail-border);
+  background: var(--sim-card-detail-bg);
+}
+.session-status-block,
+.session-overview__item {
+  min-width: 0;
+  padding: 0 18px;
+  border-right: 1px solid var(--sim-card-detail-border);
+}
+.session-status-block {
+  padding-left: 0;
+}
+.session-overview__item:last-child {
+  padding-right: 0;
+  border-right: 0;
+}
+.session-overview__label {
+  margin-bottom: 7px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--sim-card-detail-muted);
+}
+.session-overview__value {
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 22px;
+  color: var(--sim-card-detail-title);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 26px;
+  padding: 3px 10px;
+  font-size: 13px;
+  font-weight: 700;
+  border-radius: 999px;
+}
+.session-status-pill__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
+}
+.session-status-pill--online {
+  color: #389e0d;
+  background: #f6ffed;
+}
+.session-status-pill--offline {
+  color: #cf1322;
+  background: #fff1f0;
+}
+.session-status-pill--unknown {
+  color: #d46b08;
+  background: #fff7e6;
+}
+.session-detail-title {
+  padding: 15px 20px 10px;
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--sim-card-detail-title);
+}
+.session-table-wrap {
+  margin: 0 20px 20px;
+  overflow-x: auto;
+  border: 1px solid var(--sim-card-detail-border);
+  border-radius: 8px;
+}
+.session-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.session-table th,
+.session-table td {
+  min-height: 42px;
+  padding: 11px 14px;
+  font-size: 13px;
+  line-height: 20px;
+  text-align: left;
+  border-right: 1px solid var(--sim-card-detail-border);
+  border-bottom: 1px solid var(--sim-card-detail-border);
+}
+.session-table tr:last-child th,
+.session-table tr:last-child td {
+  border-bottom: 0;
+}
+.session-table th:nth-child(odd) {
+  width: 18%;
+  font-weight: 700;
+  color: var(--sim-card-detail-title);
+  background: var(--sim-card-detail-header-bg);
+}
+.session-table td:nth-child(even) {
+  width: 32%;
+  font-weight: 500;
+  color: var(--sim-card-detail-text);
+  word-break: break-word;
+}
+.session-table th:last-of-type,
+.session-table td:last-of-type {
+  border-right: 0;
+}
+.session-table tr:last-child td:last-child {
+  border-right: 0;
+}
+.session-table__placeholder {
+  color: transparent !important;
+  background: var(--sim-card-detail-bg) !important;
+}
+.session-empty-state {
+  display: flex;
+  min-height: 220px;
+  padding: 32px 20px 38px;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+.session-empty-state__icon {
+  position: relative;
+  width: 54px;
+  height: 54px;
+  margin-bottom: 14px;
+  border: 1px solid #cfe2ff;
+  border-radius: 50%;
+  background: #f0f6ff;
+}
+.session-empty-state__icon::before,
+.session-empty-state__icon::after,
+.session-empty-state__icon span {
+  position: absolute;
+  left: 50%;
+  border: 2px solid #69b1ff;
+  content: '';
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-radius: 50%;
+  transform: translateX(-50%) rotate(-45deg);
+}
+.session-empty-state__icon::before {
+  top: 13px;
+  width: 28px;
+  height: 28px;
+}
+.session-empty-state__icon span {
+  top: 20px;
+  width: 16px;
+  height: 16px;
+}
+.session-empty-state__icon::after {
+  bottom: 11px;
+  width: 5px;
+  height: 5px;
+  border: 0;
+  background: #1677ff;
+}
+.session-empty-state__message {
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--sim-card-detail-title);
+}
+.session-empty-state__hint {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--sim-card-detail-muted);
+}
+
+:global(.dark) :deep(.sim-card-view-modal-content) {
+  --sim-card-detail-bg: #1f1f1f;
+  --sim-card-detail-header-bg: #262626;
+  --sim-card-detail-border: #3a3a3a;
+  --sim-card-detail-text: #d9d9d9;
+  --sim-card-detail-muted: #a3a3a3;
+  --sim-card-detail-title: #f2f2f2;
+}
+
+:global(.dark) .session-card {
+  box-shadow: 0 6px 20px rgb(0 0 0 / 20%);
+}
+
+:global(.dark) .session-card__header {
+  background: linear-gradient(135deg, #202b3c 0%, #232936 100%);
+}
+
+:global(.dark) .session-refresh-button {
+  color: #69b1ff;
+  border-color: #284f7c;
+  background: rgb(31 31 31 / 72%);
+}
+
+:global(.dark) .session-status-pill--online {
+  color: #95de64;
+  background: rgb(56 158 13 / 18%);
+}
+
+:global(.dark) .session-status-pill--offline {
+  color: #ff7875;
+  background: rgb(207 19 34 / 18%);
+}
+
+:global(.dark) .session-status-pill--unknown {
+  color: #ffc069;
+  background: rgb(212 107 8 / 18%);
+}
+
+:global(.dark) .session-empty-state__icon {
+  border-color: #284f7c;
+  background: #202b3c;
+}
+
+@media (max-width: 900px) {
+  .session-overview {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    row-gap: 18px;
+  }
+
+  .session-status-block,
+  .session-overview__item {
+    padding: 0 14px;
+  }
+
+  .session-status-block,
+  .session-overview__item:nth-child(3) {
+    padding-left: 0;
+  }
+
+  .session-overview__item:nth-child(2) {
+    padding-right: 0;
+    border-right: 0;
+  }
+}
+
+:global(.dark) .desc-small :deep(.ant-descriptions-view),
+:global(.dark) .desc-small :deep(.ant-descriptions-row),
+:global(.dark) .desc-small :deep(.ant-descriptions-item-label),
+:global(.dark) .desc-small :deep(.ant-descriptions-item-content) {
+  border-color: var(--sim-card-detail-border) !important;
+}
+
+:global(.dark) .desc-small :deep(.ant-descriptions-item-label) {
+  background: var(--sim-card-detail-header-bg) !important;
+}
+
+:global(.dark) .desc-small :deep(.ant-descriptions-item-content) {
+  background: var(--sim-card-detail-bg) !important;
+}
+
+/* 会话信息沿用平台详情表格的简洁样式 */
+.session-info-panel {
+  padding: 12px 0 4px;
+}
+
+.session-card {
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+.session-card__header {
+  gap: 12px;
+  padding: 10px 12px;
+  background: var(--sim-card-detail-header-bg);
+}
+
+.session-heading {
+  align-items: center;
+}
+
+.session-heading__title {
+  flex: 0 0 auto;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+.session-refresh-button {
+  color: var(--sim-card-detail-text);
+  border-color: var(--sim-card-detail-border);
+  border-radius: 4px;
+  background: var(--sim-card-detail-bg);
+}
+
+.session-table-wrap {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+.session-table th,
+.session-table td {
+  height: 42px;
+  padding: 10px 12px;
+}
+
+.session-table th:nth-child(odd) {
+  width: 16%;
+  font-weight: 600;
+}
+
+.session-table td:nth-child(even) {
+  width: 34%;
+  font-weight: 400;
+  color: var(--sim-card-detail-text);
+}
+
+.session-empty-state {
+  min-height: 128px;
+  padding: 28px 16px;
+  background: var(--sim-card-detail-bg);
+}
+
+.session-empty-state__message {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.session-empty-state__hint {
+  margin-top: 4px;
+}
+
+:global(.dark) .session-card {
+  box-shadow: none;
+}
+
+:global(.dark) .session-card__header,
+:global(.dark) .session-refresh-button {
+  background: var(--sim-card-detail-header-bg);
+}
+
+@media (max-width: 720px) {
+  .session-table {
+    min-width: 720px;
+  }
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardTrafficCutoff/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardTrafficCutoff/edit.vue
new file mode 100644
index 0000000..d898c8d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardTrafficCutoff/edit.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { EditFormValues, RowType } from './model';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit } from '#/api/iotlcm/tCommunication/tSimCardTrafficCutoff';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+interface ModalProps {
+  data: RowType;
+}
+
+const emit = defineEmits<{ confirm: [] }>();
+const isSubmitting = ref(false);
+
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  await formApi.setValues({
+    id: data.data.id,
+    iccid: data.data.iccid,
+    trafficCutoffEnabled: data.data.trafficCutoffStatus === 1,
+    trafficCutoffThreshold: data.data.trafficCutoffThreshold,
+    trafficCutoffCrossMonthHold: data.data.trafficCutoffCrossMonthHold === 1,
+  });
+}
+
+async function handleConfirm() {
+  const [valid, values] = await BetterVben.function.formValidate(formApi);
+  if (!valid || isSubmitting.value) return;
+
+  const formValues = values as EditFormValues;
+  const params = {
+    id: Number(formValues.id),
+    iccid: formValues.iccid,
+    trafficCutoffStatus: formValues.trafficCutoffEnabled ? 1 : 2,
+    trafficCutoffThreshold: Number(formValues.trafficCutoffThreshold),
+    trafficCutoffCrossMonthHold: formValues.trafficCutoffCrossMonthHold ? 1 : 0,
+  } as const;
+
+  isSubmitting.value = true;
+  try {
+    await BetterVben.function.formSubmit(Edit(params), modalApi, {
+      autoClose: true,
+      successMessage: '\u4FDD\u5B58\u6210\u529F',
+      async afterSuccess() {
+        emit('confirm');
+        await formApi.resetForm();
+      },
+    });
+  } catch (error) {
+    message.error('\u4FDD\u5B58\u5931\u8D25');
+    console.error(error);
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  title: '\u7F16\u8F91\u8FBE\u91CF\u65AD\u7F51\u914D\u7F6E',
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, handleConfirm);
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await formApi.resetForm();
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, handleOpen);
+  },
+});
+</script>
+
+<template>
+  <Modal>
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardTrafficCutoff/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardTrafficCutoff/index.vue
new file mode 100644
index 0000000..b32cb72
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardTrafficCutoff/index.vue
@@ -0,0 +1,260 @@
+<script lang="ts" setup>
+import type { RowType } from './model';
+
+import type { SysDeptTreeData } from '#/api/system/dept';
+
+import { computed, h, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiExport, SyncOutlined } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import {
+  Button,
+  Empty,
+  InputSearch,
+  message,
+  Popconfirm,
+  Skeleton,
+  Tree,
+} from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  Delete,
+  Export,
+  List,
+} from '#/api/iotlcm/tCommunication/tSimCardTrafficCutoff';
+import BetterVben from '#/constants/BetterVben';
+import { filterDeptTree, loadCompanyDeptTree } from '#/utils/dept-tree';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+
+const pageText = {
+  delete: '\u5220\u9664',
+  deleteConfirm:
+    '\u786E\u5B9A\u5220\u9664\u8FBE\u91CF\u65AD\u7F51\u914D\u7F6E\u5417\uFF1F',
+  edit: '\u4FEE\u6539',
+  export: '\u5BFC\u51FA',
+  exportSuccess: '\u5BFC\u51FA\u6210\u529F',
+  hideCompany: '\u9690\u85CF',
+  noData: '\u6682\u65E0\u6570\u636E',
+  refresh: '\u5237\u65B0',
+  searchCompany: '\u641C\u7D22\u516C\u53F8',
+  showCompany: '\u663E\u793A',
+  title: '\u8FBE\u91CF\u65AD\u7F51\u5361\u4FE1\u606F',
+};
+
+const route = useRoute();
+const selectDeptId = ref<string[]>([]);
+const deptTreeVisible = ref(false);
+const deptTreeArray = ref<SysDeptTreeData[]>([]);
+const showTreeSkeleton = ref(true);
+const searchValue = ref('');
+/** 按搜索关键字过滤后的树（与卡信息页一致：命中节点保留整棵子树） */
+const filteredDeptTree = computed(() =>
+  filterDeptTree(deptTreeArray.value, searchValue.value),
+);
+
+async function loadDeptTree() {
+  showTreeSkeleton.value = true;
+  searchValue.value = '';
+  try {
+    deptTreeArray.value = await loadCompanyDeptTree();
+  } finally {
+    showTreeSkeleton.value = false;
+  }
+}
+
+async function handleDeptTreeReload() {
+  await loadDeptTree();
+  await gridApi.reload();
+}
+
+async function handleSearchByDept() {
+  await gridApi.reload();
+}
+
+watch(selectDeptId, handleSearchByDept);
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, 'traffic-cutoff-card-info', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    deptId: selectDeptId.value?.[0] || '',
+    page: 1,
+  });
+  message.success(pageText.exportSuccess);
+}
+
+function handleEdit(row: RowType) {
+  editModalApi.setData({ data: row });
+  editModalApi.open();
+}
+
+async function handleDelete(row: RowType) {
+  await Delete({ id: row.id, iccid: row.iccid });
+  message.success('\u8FBE\u91CF\u65AD\u7F51\u914D\u7F6E\u5DF2\u5220\u9664');
+  await handleRefresh();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          return await List({
+            ...formValues,
+            includeUnconfigured:
+              typeof route.query.cardValue === 'string' &&
+              formValues.cardValue === route.query.cardValue,
+            deptId: selectDeptId.value?.[0] || '',
+            page: page.currentPage,
+            pageSize: page.pageSize,
+          });
+        },
+      },
+    },
+    toolbarConfig: {
+      custom: true,
+      refresh: true,
+      resizable: true,
+      search: true,
+      zoom: true,
+    },
+  },
+});
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+async function applyCardContext() {
+  const cardValue =
+    typeof route.query.cardValue === 'string'
+      ? route.query.cardValue.trim()
+      : '';
+  if (!cardValue) return;
+  selectDeptId.value = [];
+  await gridApi.formApi.resetForm();
+  await gridApi.formApi.setValues({ cardValue });
+  await gridApi.reload();
+}
+watch(() => route.query.cardValue, applyCardContext);
+onMounted(async () => {
+  await loadDeptTree();
+  await applyCardContext();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full gap-[8px]">
+      <div v-if="deptTreeVisible" class="w-[240px] flex-shrink-0">
+        <Skeleton
+          :loading="showTreeSkeleton"
+          :paragraph="{ rows: 8 }"
+          active
+          class="p-[8px]"
+        >
+          <div
+            class="flex h-full flex-col overflow-y-auto rounded-lg bg-background"
+          >
+            <div
+              class="sticky top-0 z-10 flex flex-col gap-2 bg-background p-2"
+            >
+              <InputSearch
+                v-model:value="searchValue"
+                :placeholder="pageText.searchCompany"
+              />
+              <Button
+                :icon="h(SyncOutlined)"
+                size="small"
+                @click="handleDeptTreeReload"
+              />
+            </div>
+            <Tree
+              v-if="filteredDeptTree.length > 0"
+              v-model:selected-keys="selectDeptId"
+              :tree-data="filteredDeptTree"
+              :field-names="{ title: 'deptName', key: 'key' }"
+              default-expand-all
+              :show-line="{ showLeafIcon: false }"
+            />
+            <Empty v-else :description="pageText.noData" class="mt-4" />
+          </div>
+        </Skeleton>
+      </div>
+      <Grid
+        :table-title="pageText.title"
+        class="min-w-0 flex-1 overflow-hidden"
+      >
+        <template #toolbar-tools>
+          <div class="flex items-center justify-center gap-2">
+            <Button
+              type="dashed"
+              @click="deptTreeVisible = !deptTreeVisible"
+              v-access:code="'cpm:system:dept:list'"
+            >
+              {{
+                deptTreeVisible ? pageText.hideCompany : pageText.showCompany
+              }}公司
+            </Button>
+            <Button
+              type="primary"
+              :icon="h(MdiExport)"
+              @click="handleExport"
+              v-access:code="'cpm:iot:tSimCardTrafficCutoff:export'"
+            >
+              {{ pageText.export }}
+            </Button>
+            <Button :icon="h(SyncOutlined)" @click="handleRefresh">
+              {{ pageText.refresh }}
+            </Button>
+          </div>
+        </template>
+        <template #action="{ row }">
+          <div class="flex items-center justify-center gap-2">
+            <Button
+              class="border-none p-0"
+              type="link"
+              v-access:code="'cpm:iot:tSimCardTrafficCutoff:edit'"
+              @click="handleEdit(row)"
+            >
+              {{ pageText.edit }}
+            </Button>
+            <Popconfirm
+              :title="pageText.deleteConfirm"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              v-access:code="'cpm:iot:tSimCardTrafficCutoff:delete'"
+              @confirm="handleDelete(row)"
+            >
+              <Button class="border-none p-0" type="link">
+                {{ pageText.delete }}
+              </Button>
+            </Popconfirm>
+          </div>
+        </template>
+      </Grid>
+    </div>
+    <EditModal @confirm="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardTrafficCutoff/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardTrafficCutoff/model.tsx
new file mode 100644
index 0000000..f47d704
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tCommunication/tSimCardTrafficCutoff/model.tsx
@@ -0,0 +1,164 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { TSimCardTrafficCutoffModel } from '#/api/iotlcm/tCommunication/tSimCardTrafficCutoff/type';
+
+import { z } from '@vben/common-ui';
+
+export const statusOptions = [
+  { label: '\u5DF2\u5F00\u542F', value: 1 },
+  { label: '\u5DF2\u5173\u95ED', value: 2 },
+];
+
+export function trafficCutoffStatusLabel(status: number) {
+  if (status === 1) {
+    return '\u5DF2\u5F00\u542F';
+  }
+  if (status === 2) {
+    return '\u5DF2\u5173\u95ED';
+  }
+  return '\u672A\u914D\u7F6E';
+}
+
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'cardValue',
+    component: 'Input',
+    label: '\u5361\u53F7',
+    componentProps: {
+      placeholder: '\u8BF7\u8F93\u5165 MSISDN/ICCID/IMSI',
+    },
+  },
+  {
+    fieldName: 'imei',
+    component: 'Input',
+    label: 'IMEI',
+    componentProps: {
+      placeholder: 'IMEI',
+    },
+  },
+  {
+    fieldName: 'trafficCutoffStatus',
+    component: 'Select',
+    label: '\u8FBE\u91CF\u65AD\u7F51\u72B6\u6001',
+    labelWidth: 110,
+    componentProps: {
+      options: statusOptions,
+      placeholder: '\u8BF7\u9009\u62E9\u8FBE\u91CF\u65AD\u7F51\u72B6\u6001',
+    },
+  },
+];
+
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  { title: 'MSISDN', field: 'msisdn', minWidth: 145 },
+  { title: 'ICCID', field: 'iccid', minWidth: 205 },
+  { title: 'IMSI', field: 'imsi', minWidth: 180 },
+  { title: 'IMEI', field: 'imei', minWidth: 160 },
+  { title: '\u901A\u9053', field: 'chanName', minWidth: 160 },
+  { title: '\u6240\u5C5E\u516C\u53F8', field: 'deptName', minWidth: 180 },
+  { title: '\u5F53\u524D\u5957\u9910', field: 'packageName', minWidth: 180 },
+  {
+    title: '\u8FBE\u91CF\u65AD\u7F51\u72B6\u6001',
+    field: 'trafficCutoffStatus',
+    minWidth: 130,
+    slots: {
+      default: ({ row }) => trafficCutoffStatusLabel(row.trafficCutoffStatus),
+    },
+  },
+  {
+    title: '\u8FBE\u91CF\u65AD\u7F51\u9608\u503C(MB)',
+    field: 'trafficCutoffThreshold',
+    minWidth: 150,
+  },
+  {
+    title: '\u64CD\u4F5C',
+    field: 'action',
+    fixed: 'right',
+    minWidth: 180,
+    slots: { default: 'action' },
+  },
+  {
+    title: '跨月保持断网',
+    field: 'trafficCutoffCrossMonthHold',
+    minWidth: 130,
+    formatter: ({ cellValue }) => (cellValue === 1 ? '开启' : '关闭'),
+  },
+];
+
+export type RowType = TSimCardTrafficCutoffModel;
+
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: 'ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+  },
+  {
+    fieldName: 'iccid',
+    component: 'Input',
+    label: 'ICCID',
+    dependencies: { show: () => false, triggerFields: [''] },
+  },
+  {
+    fieldName: 'trafficCutoffEnabled',
+    component: 'HtcFormSwitch',
+    label: '\u914D\u7F6E\u72B6\u6001',
+    componentProps: {
+      checkedChildren: '\u5F00\u542F',
+      checkedValue: true,
+      unCheckedChildren: '\u5173\u95ED',
+      unCheckedValue: false,
+    },
+  },
+  {
+    fieldName: 'trafficCutoffThreshold',
+    component: 'InputNumber',
+    label: '\u8FBE\u91CF\u65AD\u7F51\u9608\u503C(MB)',
+    componentProps: (values) => ({
+      min: values?.trafficCutoffEnabled ? 0.001 : 0,
+      precision: 3,
+      placeholder: '\u8BF7\u8F93\u5165\u8FBE\u91CF\u65AD\u7F51\u9608\u503C',
+    }),
+    dependencies: {
+      triggerFields: ['trafficCutoffEnabled'],
+      rules: (values) =>
+        values?.trafficCutoffEnabled
+          ? z.coerce
+              .number()
+              .positive(
+                '\u5F00\u542F\u65F6\u9608\u503C\u5FC5\u987B\u5927\u4E8E0',
+              )
+          : z.coerce.number().min(0, '\u9608\u503C\u4E0D\u80FD\u5C0F\u4E8E0'),
+    },
+  },
+  {
+    fieldName: 'trafficCutoffCrossMonthHold',
+    component: 'HtcFormSwitch',
+    label: '跨月保持断网',
+    defaultValue: false,
+    componentProps: {
+      checkedChildren: '开启',
+      checkedValue: true,
+      unCheckedChildren: '关闭',
+      unCheckedValue: false,
+    },
+    help: '开启后，卡片因达量断网时，跨账期恢复网络后会再次自动断网，直至人工开网。',
+    dependencies: {
+      triggerFields: ['trafficCutoffEnabled'],
+      disabled: (values) => !values?.trafficCutoffEnabled,
+      async trigger(values, actions) {
+        if (!values?.trafficCutoffEnabled) {
+          await actions.setFieldValue('trafficCutoffCrossMonthHold', false);
+        }
+      },
+    },
+  },
+];
+
+export interface EditFormValues {
+  trafficCutoffCrossMonthHold: boolean;
+  id: number;
+  iccid: string;
+  trafficCutoffEnabled: boolean;
+  trafficCutoffThreshold: number;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/BusinessAlarmPanel.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/BusinessAlarmPanel.vue
new file mode 100644
index 0000000..dadaa53
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/BusinessAlarmPanel.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts" name="BusinessAlarmPanel">
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Alert,
+  Button,
+  Card,
+  Col,
+  Row,
+  Statistic,
+  Tooltip,
+  TypographyText,
+} from 'ant-design-vue';
+
+/** ====================  常量  ==================== */
+const stopAlarmList = [
+  {
+    title: '欠费停机',
+    value: 0,
+    unit: '张',
+    icon: 'mdi:database',
+  },
+  {
+    title: '主动停机',
+    value: 0,
+    unit: '张',
+    icon: 'mdi:water-alert',
+  },
+  {
+    title: '机卡分离停机',
+    value: 0,
+    unit: '张',
+    icon: 'mdi:sim-alert',
+  },
+  {
+    title: '强制停机',
+    value: 0,
+    unit: '张',
+    icon: 'mdi:cellphone-lock',
+  },
+] as const;
+
+const flowAlarmList = [
+  {
+    title: '流量用尽关停',
+    value: 0,
+    unit: '条',
+    icon: 'mdi:water-remove',
+  },
+  {
+    title: '限额管控关停',
+    value: 4,
+    unit: '条',
+    icon: 'mdi:gauge',
+  },
+  {
+    title: '封顶关停',
+    value: 0,
+    unit: '条',
+    icon: 'mdi:umbrella-outline',
+  },
+  {
+    title: '套餐余量提醒',
+    value: 0,
+    unit: '条',
+    icon: 'mdi:water-alert',
+  },
+] as const;
+
+const ALARM_CARD_BODY_STYLE = {
+  padding: '10px 6px',
+};
+
+const ALARM_VALUE_STYLE = {
+  fontSize: '20px',
+  lineHeight: '1',
+};
+
+/** ====================  数据  ==================== */
+/** ====================  方法  ==================== */
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <div class="h-full overflow-hidden">
+    <div>
+      <div class="mb-4 flex items-center justify-between">
+        <TypographyText strong>停机告警</TypographyText>
+        <Tooltip title="停机告警说明">
+          <IconifyIcon
+            icon="mdi:information-outline"
+            class="ml-1 mr-auto text-[14px] text-[#c0c4cc]"
+          />
+        </Tooltip>
+        <Button type="link" size="small">
+          更多
+          <IconifyIcon icon="mdi:chevron-right" class="ml-1 text-[16px]" />
+        </Button>
+      </div>
+
+      <Row :gutter="[12, 12]">
+        <Col v-for="item in stopAlarmList" :key="item.title" :span="6">
+          <Card
+            :body-style="ALARM_CARD_BODY_STYLE"
+            class="h-[112px] overflow-hidden bg-[#f3f8ff] dark:bg-gray-800"
+          >
+            <div class="flex h-[92px] flex-col items-center overflow-hidden">
+              <IconifyIcon
+                :icon="item.icon"
+                class="text-[28px] text-[#1677ff]"
+              />
+              <TypographyText
+                class="mt-1 w-full text-center text-[12px]"
+                :ellipsis="{ tooltip: item.title }"
+                :content="item.title"
+              />
+              <Statistic
+                :value="item.value"
+                class="mt-1"
+                :value-style="ALARM_VALUE_STYLE"
+              />
+              <TypographyText class="mt-1 text-[12px]" type="secondary">
+                ({{ item.unit }})
+              </TypographyText>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+
+      <Alert
+        class="mt-4"
+        message="建议：根据SIM卡停机原因进行【充值缴费】【查看停机状态】操作。"
+        type="info"
+        show-icon
+      />
+    </div>
+
+    <div class="mt-4">
+      <div class="mb-4 flex items-center justify-between">
+        <TypographyText strong>流量预警</TypographyText>
+        <Tooltip title="流量预警说明">
+          <IconifyIcon
+            icon="mdi:information-outline"
+            class="ml-1 mr-auto text-[14px] text-[#c0c4cc]"
+          />
+        </Tooltip>
+        <Button type="link" size="small">
+          更多
+          <IconifyIcon icon="mdi:chevron-right" class="ml-1 text-[16px]" />
+        </Button>
+      </div>
+
+      <Row :gutter="[12, 12]">
+        <Col v-for="item in flowAlarmList" :key="item.title" :span="6">
+          <Card
+            :body-style="ALARM_CARD_BODY_STYLE"
+            class="h-[112px] overflow-hidden bg-[#f3f8ff] dark:bg-gray-800"
+          >
+            <div class="flex h-[92px] flex-col items-center overflow-hidden">
+              <IconifyIcon
+                :icon="item.icon"
+                class="text-[28px] text-[#1677ff]"
+              />
+              <TypographyText
+                class="mt-1 w-full text-center text-[12px]"
+                :ellipsis="{ tooltip: item.title }"
+                :content="item.title"
+              />
+              <Statistic
+                :value="item.value"
+                class="mt-1"
+                :value-style="ALARM_VALUE_STYLE"
+              />
+              <TypographyText class="mt-1 text-[12px]" type="secondary">
+                ({{ item.unit }})
+              </TypographyText>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+
+      <Alert
+        class="mt-4"
+        message="结合预警实时性，预警条数为最近7天推实时汇总数量，明细可点击具体类型查看。"
+        type="info"
+        show-icon
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/BusinessUsageChart.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/BusinessUsageChart.vue
new file mode 100644
index 0000000..c9688bb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/BusinessUsageChart.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts" name="BusinessUsageChart">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { computed, onActivated, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import {
+  Badge,
+  Col,
+  List,
+  ListItem,
+  Row,
+  Segmented,
+  Tabs,
+  Tooltip,
+  TypographyText,
+} from 'ant-design-vue';
+
+import { FlowUsageChart, TopUsageCards } from '#/api/iotlcm/tDashboard';
+
+/** ====================  常量  ==================== */
+const businessTabs = ['数据', '语音', '短信'] as const;
+const timeTabs = [
+  {
+    label: '按日',
+    value: '按日',
+  },
+  {
+    label: '按月',
+    value: '按月',
+  },
+];
+/** ====================  数据  ==================== */
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(chartRef);
+const activeBusinessTab = ref('数据');
+const activeTimeTab = ref('按日');
+const chartLabels = ref<string[]>([]);
+const chartValues = ref<number[]>([]);
+const topList = ref<
+  {
+    iccid: string;
+    statDate: string;
+    usage: string;
+  }[]
+>([]);
+const topDate = computed(() => topList.value[0]?.statDate || '-');
+
+/** ====================  方法  ==================== */
+function formatUsageLabel(params: { value: unknown }) {
+  return Number(params.value).toFixed(3);
+}
+
+function formatMbToGb(value?: number) {
+  return Number(((Number(value) || 0) / 1024).toFixed(3));
+}
+
+function formatMb(value?: number) {
+  return (Number(value) || 0).toLocaleString('en-US', {
+    maximumFractionDigits: 3,
+    minimumFractionDigits: 3,
+  });
+}
+
+function getCurrentPeriod() {
+  return activeTimeTab.value === '按月' ? '1m' : '7d';
+}
+
+function setChartOption() {
+  renderEcharts({
+    color: ['#1677ff'],
+    grid: {
+      bottom: 8,
+      containLabel: true,
+      left: 8,
+      right: 12,
+      top: 42,
+    },
+    legend: {
+      data: ['使用量 (GB)'],
+      itemHeight: 8,
+      itemWidth: 8,
+      right: 12,
+      textStyle: {
+        color: '#606266',
+        fontSize: 12,
+      },
+      top: 0,
+    },
+    series: [
+      {
+        areaStyle: {
+          color: 'rgba(22, 119, 255, 0.08)',
+        },
+        data: chartValues.value,
+        label: {
+          color: '#1677ff',
+          formatter: formatUsageLabel,
+          show: true,
+        },
+        lineStyle: {
+          width: 3,
+        },
+        markLine: {
+          data: [
+            {
+              xAxis: chartLabels.value[2],
+            },
+          ],
+          label: {
+            show: false,
+          },
+          lineStyle: {
+            color: '#d6e8ff',
+            type: 'dashed',
+          },
+          symbol: 'none',
+        },
+        name: '使用量 (GB)',
+        smooth: false,
+        symbol: 'circle',
+        symbolSize: 7,
+        type: 'line',
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+    },
+    xAxis: {
+      axisLine: {
+        lineStyle: {
+          color: '#dcdfe6',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      data: chartLabels.value,
+      type: 'category',
+    },
+    yAxis: {
+      axisLabel: {
+        color: '#606266',
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#edf1f7',
+        },
+      },
+      type: 'value',
+    },
+  });
+}
+
+async function loadChartData() {
+  try {
+    const result = await FlowUsageChart(getCurrentPeriod());
+    chartLabels.value = result.labels || [];
+    chartValues.value = (result.values || []).map(formatMbToGb);
+  } catch (error) {
+    console.error(error);
+    chartLabels.value = [];
+    chartValues.value = [];
+  } finally {
+    setChartOption();
+  }
+}
+
+async function loadTopUsageCards() {
+  try {
+    const result = await TopUsageCards();
+    topList.value = (result.data || []).map((item) => ({
+      iccid: item.iccid,
+      statDate: item.statDate,
+      usage: formatMb(item.usageMb),
+    }));
+  } catch (error) {
+    console.error(error);
+    topList.value = [];
+  }
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+watch(activeTimeTab, () => {
+  loadChartData();
+});
+
+onMounted(() => {
+  loadChartData();
+  loadTopUsageCards();
+});
+onActivated(resize);
+</script>
+
+<template>
+  <div class="h-full overflow-hidden">
+    <Tabs v-model:active-key="activeBusinessTab" size="small">
+      <Tabs.TabPane v-for="item in businessTabs" :key="item" :tab="item" />
+    </Tabs>
+
+    <Row :gutter="[20, 20]">
+      <Col :xs="24" :xl="16">
+        <Segmented v-model:value="activeTimeTab" :options="timeTabs" />
+        <EchartsUI ref="chartRef" height="260px" width="100%" />
+      </Col>
+
+      <Col :xs="24" :xl="8">
+        <div
+          class="box-border overflow-hidden rounded bg-[#f5f9ff] p-3 dark:bg-gray-800"
+        >
+          <div
+            class="text-[14px] font-semibold text-[#303133] dark:text-zinc-50"
+          >
+            {{ topDate }} TOP排名
+          </div>
+          <List :data-source="topList" size="small">
+            <template #header>
+              <div class="flex justify-between text-[12px] text-[#909399]">
+                <span>ICCID</span>
+                <span>使用量 (MB)</span>
+              </div>
+            </template>
+            <template #renderItem="{ item, index }">
+              <ListItem class="!px-0">
+                <div class="flex min-w-0 flex-1 items-center">
+                  <Badge
+                    :count="index + 1"
+                    :number-style="{ backgroundColor: '#ff5c5c' }"
+                    class="mr-2 shrink-0"
+                  />
+                  <Tooltip :title="item.iccid">
+                    <TypographyText
+                      class="min-w-0 flex-1"
+                      :ellipsis="true"
+                      :content="item.iccid"
+                    />
+                  </Tooltip>
+                </div>
+                <TypographyText
+                  class="ml-3 shrink-0 text-[12px]"
+                  :content="item.usage"
+                />
+              </ListItem>
+            </template>
+          </List>
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/CardLocationDistributionChart.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/CardLocationDistributionChart.vue
new file mode 100644
index 0000000..063fe21
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/CardLocationDistributionChart.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts" name="CardLocationDistributionChart">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onActivated, onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { TypographyText } from 'ant-design-vue';
+
+/** ====================  常量  ==================== */
+const provinceList = [
+  {
+    name: '山东',
+    value: 23_351,
+  },
+  {
+    name: '广东',
+    value: 16_552,
+  },
+  {
+    name: '湖南',
+    value: 12_199,
+  },
+  {
+    name: '广西',
+    value: 7311,
+  },
+  {
+    name: '重庆',
+    value: 7146,
+  },
+  {
+    name: '浙江',
+    value: 6650,
+  },
+  {
+    name: '江西',
+    value: 6063,
+  },
+  {
+    name: '河南',
+    value: 5999,
+  },
+  {
+    name: '陕西',
+    value: 4658,
+  },
+  {
+    name: '湖北',
+    value: 4615,
+  },
+  {
+    name: '贵州',
+    value: 4468,
+  },
+  {
+    name: '四川',
+    value: 4417,
+  },
+  {
+    name: '福建',
+    value: 4135,
+  },
+  {
+    name: '安徽',
+    value: 3663,
+  },
+  {
+    name: '江苏',
+    value: 3330,
+  },
+] as const;
+
+/** ====================  数据  ==================== */
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(chartRef);
+
+/** ====================  方法  ==================== */
+function setChartOption() {
+  renderEcharts({
+    color: ['#1677ff'],
+    grid: {
+      bottom: 36,
+      containLabel: true,
+      left: 12,
+      right: 12,
+      top: 34,
+    },
+    series: [
+      {
+        barMaxWidth: 22,
+        data: provinceList.map((item) => item.value),
+        itemStyle: {
+          borderRadius: [2, 2, 0, 0],
+          color: '#1677ff',
+        },
+        label: {
+          color: '#1677ff',
+          formatter: ({ value }: { value: unknown }) =>
+            Number(value).toLocaleString('en-US'),
+          position: 'top',
+          show: true,
+        },
+        type: 'bar',
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+    },
+    xAxis: {
+      axisLine: {
+        lineStyle: {
+          color: '#dcdfe6',
+        },
+      },
+      axisLabel: {
+        color: '#606266',
+      },
+      axisTick: {
+        show: false,
+      },
+      data: provinceList.map((item) => item.name),
+      type: 'category',
+    },
+    yAxis: {
+      axisLabel: {
+        show: false,
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#edf1f7',
+        },
+      },
+      type: 'value',
+    },
+  });
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+onMounted(setChartOption);
+onActivated(resize);
+</script>
+
+<template>
+  <div class="h-full">
+    <TypographyText type="secondary">单位（张）</TypographyText>
+    <EchartsUI ref="chartRef" height="390px" width="100%" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/LifecycleDistributionChart.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/LifecycleDistributionChart.vue
new file mode 100644
index 0000000..28bc2ed
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/LifecycleDistributionChart.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts" name="LifecycleDistributionChart">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { CardStatusStatisticsRes } from '#/api/iotlcm/tDashboard/type';
+
+import { computed, onActivated, onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { Badge, Col, Row, Statistic } from 'ant-design-vue';
+
+import { CardStatusStatistics } from '#/api/iotlcm/tDashboard';
+
+/** ====================  常量  ==================== */
+const STATUS_STATISTICS_DEFAULT = {
+  activatedCount: 0,
+  canceledCount: 0,
+  inventoryCount: 0,
+  pendingActivationCount: 0,
+  preCancelCount: 0,
+  stoppedCount: 0,
+  testableCount: 0,
+  unknownCount: 0,
+};
+const LIFECYCLE_CONFIG = [
+  {
+    name: '可测试',
+    color: '#1677ff',
+    field: 'testableCount',
+  },
+  {
+    name: '库存',
+    color: '#8b5cf6',
+    field: 'inventoryCount',
+  },
+  {
+    name: '已激活',
+    color: '#38e8a6',
+    field: 'activatedCount',
+  },
+  {
+    name: '待激活',
+    color: '#60c6ff',
+    field: 'pendingActivationCount',
+  },
+  {
+    name: '预销户',
+    color: '#ff9f43',
+    field: 'preCancelCount',
+  },
+  {
+    name: '已销户',
+    color: '#8fa5b8',
+    field: 'canceledCount',
+  },
+  {
+    name: '已停机',
+    color: '#ff4d4f',
+    field: 'stoppedCount',
+  },
+  {
+    name: '未知',
+    color: '#b8b8b8',
+    field: 'unknownCount',
+  },
+] as const;
+
+/** ====================  数据  ==================== */
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(chartRef);
+const statusStatistics = ref<CardStatusStatisticsRes>(
+  STATUS_STATISTICS_DEFAULT,
+);
+const activeTotal = computed(() =>
+  statusStatistics.value.activatedCount.toLocaleString('en-US'),
+);
+const lifecycleList = computed(() =>
+  LIFECYCLE_CONFIG.map((item) => ({
+    ...item,
+    value: statusStatistics.value[item.field],
+  })),
+);
+
+/** ====================  方法  ==================== */
+function setChartOption() {
+  renderEcharts({
+    color: lifecycleList.value.map((item) => item.color),
+    graphic: [
+      {
+        left: 'center',
+        style: {
+          fill: '#8c8c8c',
+          fontSize: 12,
+          text: '已激活',
+        },
+        top: '42%',
+        type: 'text',
+      },
+      {
+        left: 'center',
+        style: {
+          fill: '#303133',
+          fontSize: 24,
+          fontWeight: 500,
+          text: activeTotal.value,
+        },
+        top: '50%',
+        type: 'text',
+      },
+    ],
+    series: [
+      {
+        avoidLabelOverlap: false,
+        center: ['50%', '50%'],
+        data: lifecycleList.value.map((item) => ({
+          name: item.name,
+          value: item.value,
+        })),
+        itemStyle: {
+          borderColor: '#ffffff',
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        radius: ['58%', '76%'],
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+    },
+  });
+}
+
+async function getCardStatusStatistics() {
+  try {
+    statusStatistics.value = await CardStatusStatistics();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    setChartOption();
+  }
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+onMounted(getCardStatusStatistics);
+onActivated(resize);
+</script>
+
+<template>
+  <div class="h-full">
+    <EchartsUI ref="chartRef" height="245px" width="100%" />
+
+    <Row :gutter="[12, 12]">
+      <Col v-for="item in lifecycleList" :key="item.name" :span="6">
+        <Badge :color="item.color" :text="item.name" />
+        <Statistic
+          :value="item.value"
+          class="pl-4"
+          :value-style="{ color: '#909399', fontSize: '12px' }"
+        />
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/MyPanel.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/MyPanel.vue
new file mode 100644
index 0000000..1c91a08
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/MyPanel.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts" name="">
+import type { CardStatisticsRes } from '#/api/iotlcm/tDashboard/type';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Card, Statistic } from 'ant-design-vue';
+
+import { CardStatistics } from '#/api/iotlcm/tDashboard';
+import { getRuntimeMenuVisible } from '#/config/menu-setting';
+
+defineOptions({
+  name: 'MyPanel',
+});
+/** ====================  常量  ==================== */
+const PANEL_CONFIG = [
+  {
+    bgIcon: 'mdi:sim',
+    icon: 'mdi:sim',
+    key: 'myPanelSimCount',
+    statKey: 'totalCount',
+    title: 'SIM卡总数 (不含销户)',
+    unit: '张',
+  },
+  {
+    bgIcon: 'mdi:plus-box',
+    icon: 'mdi:card-plus',
+    key: 'myPanelNew',
+    statKey: 'monthlyNewCount',
+    title: '本月新增 (本月新开的卡数)',
+    unit: '张',
+  },
+  {
+    bgIcon: 'mdi:chart-areaspline',
+    icon: 'mdi:database-arrow-up',
+    key: 'myPanelUseData',
+    statKey: 'monthlyFlowUsage',
+    title: '本月数据用量',
+    unit: 'GB',
+  },
+  {
+    bgIcon: 'mdi:message-text-outline',
+    icon: 'mdi:message-text',
+    key: 'myPanelUseMsg',
+    title: '本月短信用量',
+    unit: '条',
+    value: '0',
+  },
+  {
+    bgIcon: 'mdi:chart-bar',
+    icon: 'mdi:chart-line-variant',
+    key: 'myPanelSimActive',
+    statKey: 'monthlyActiveRate',
+    title: 'SIM卡月活跃度',
+    unit: '%',
+  },
+] as const;
+/** ====================  数据  ==================== */
+const statistics = ref<CardStatisticsRes>({
+  monthlyActiveCount: 0,
+  monthlyFlowUsage: 0,
+  monthlyNewCount: 0,
+  totalCount: 0,
+});
+const panelList = computed(() =>
+  PANEL_CONFIG.map((item) => ({
+    ...item,
+    value: getPanelValue(item),
+  })).filter((item) => getRuntimeMenuVisible(`tDashboard.${item.key}`)),
+);
+
+/** ====================  方法  ==================== */
+function formatNumber(value: number) {
+  return value.toLocaleString('en-US');
+}
+
+function formatActiveRate() {
+  const { monthlyActiveCount, totalCount } = statistics.value;
+
+  if (!totalCount) {
+    return '0.00';
+  }
+
+  return ((monthlyActiveCount / totalCount) * 100).toFixed(2);
+}
+
+function getPanelValue(item: (typeof PANEL_CONFIG)[number]) {
+  if (!('statKey' in item)) {
+    return item.value;
+  }
+
+  if (item.statKey === 'monthlyActiveRate') {
+    return formatActiveRate();
+  }
+
+  return formatNumber(statistics.value[item.statKey]);
+}
+
+async function getCardStatistics() {
+  try {
+    statistics.value = await CardStatistics();
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+onMounted(getCardStatistics);
+</script>
+
+<template>
+  <div class="grid w-full grid-cols-5 gap-4">
+    <Card
+      v-for="item in panelList"
+      :key="item.title"
+      :body-style="{ padding: '12px 14px' }"
+      :hoverable="true"
+      :bordered="false"
+      class="overflow-hidden bg-gradient-to-br from-[#0f7df4] via-[#2f91ff] to-[#5faeff] text-white"
+    >
+      <div class="relative min-h-[92px]">
+        <div class="relative z-10 flex items-center justify-between">
+          <div class="flex min-w-0 items-center text-[12px] font-semibold">
+            <IconifyIcon :icon="item.icon" class="mr-1 shrink-0 text-[14px]" />
+            <span class="truncate">{{ item.title }}</span>
+          </div>
+        </div>
+
+        <Statistic
+          :value="item.value"
+          :suffix="item.unit"
+          class="relative z-10 mt-5 min-w-0"
+          :value-style="{
+            color: '#fff',
+            fontSize: 'clamp(20px, 2vw, 26px)',
+            fontWeight: 600,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }"
+        />
+
+        <IconifyIcon
+          :icon="item.bgIcon"
+          class="absolute -bottom-3.5 -right-0.5 text-[62px] text-white/25"
+        />
+      </div>
+    </Card>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/QuickNavigation.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/QuickNavigation.vue
new file mode 100644
index 0000000..9cef8bd
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/QuickNavigation.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts" name="QuickNavigation">
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Col, Modal, Row, Tag } from 'ant-design-vue';
+
+const router = [
+  { title: '\u5c0f\u7a0b\u5e8f', icon: 'mdi:cellphone-link' },
+  { title: 'SIM\u5361\u4fe1\u606f', icon: 'mdi:sim' },
+  { title: '\u505c\u590d\u673a', icon: 'mdi:cellphone-off' },
+  { title: '\u5f00\u505c\u670d\u52a1', icon: 'mdi:toggle-switch' },
+  { title: '\u89c4\u5219\u7ba1\u7406', icon: 'mdi:gauge' },
+  { title: '\u667a\u80fd\u8bca\u65ad', icon: 'mdi:stethoscope' },
+  { title: 'SIM\u5361\u8d44\u8d39', icon: 'mdi:card-account-details-star' },
+  { title: '\u81ea\u5b9a\u4e49', icon: 'mdi:tune-variant' },
+] as const;
+
+const miniProgramVisible = ref(false);
+const miniProgramTitle = '\u7269\u8054\u7f51\u5168\u751f\u547d\u5468\u671f\u7ba1\u7406\u5e73\u53f0\u5c0f\u7a0b\u5e8f';
+const miniProgramDescription = '\u79fb\u52a8\u7aef\u638c\u63e1\u5e73\u53f0\u52a8\u6001\uff0c\u968f\u65f6\u67e5\u770b\u8bbe\u5907\u4e0e\u5361\u7247\u4fe1\u606f\uff0c\u5e76\u9ad8\u6548\u5b8c\u6210\u65e5\u5e38\u4e1a\u52a1\u64cd\u4f5c\uff0c\u626b\u7801\u5373\u53ef\u4f53\u9a8c\u3002';
+const recommendedLabel = '\u63a8\u8350';
+</script>
+
+<template>
+  <Row :gutter="[8, 8]">
+    <Col v-for="item in router" :key="item.title" :xs="12" :md="6" :xl="3">
+      <Button
+        block
+        class="quick-navigation-button h-[40px] px-4" :style="{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }"
+        @click="item.title === '\u5c0f\u7a0b\u5e8f' && (miniProgramVisible = true)"
+      >
+        <span class="quick-navigation-label" :style="{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px', whiteSpace: 'nowrap' }">
+          <IconifyIcon :icon="item.icon" class="text-[16px]" />
+          {{ item.title }}
+        </span>
+        <Tag v-if="item.title === '\u5c0f\u7a0b\u5e8f'" color="blue" class="ml-auto mr-0">
+          {{ recommendedLabel }}
+        </Tag>
+      </Button>
+    </Col>
+  </Row>
+
+  <Modal
+    v-model:open="miniProgramVisible"
+    centered
+    :footer="null"
+    :title="miniProgramTitle"
+    width="520px"
+  >
+    <div class="flex flex-col items-center px-4 pb-5 pt-2 text-center">
+      <p class="mb-4 text-[14px] leading-6 text-[#595959]">
+        {{ miniProgramDescription }}
+      </p>
+      <img
+        src="/mini-program-code.png"
+        :alt="miniProgramTitle"
+        class="h-[280px] w-[280px] object-contain"
+      />
+      <p class="mt-3 text-[14px] text-[#262626]">{{ miniProgramTitle }}</p>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.quick-navigation-button :deep(.ant-btn-icon),
+.quick-navigation-button :deep(.anticon) {
+  display: inline-flex;
+  align-items: center;
+}
+
+.quick-navigation-label {
+  flex-direction: row !important;
+}
+</style>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/RecentFeeChart.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/RecentFeeChart.vue
new file mode 100644
index 0000000..901811d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/RecentFeeChart.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts" name="RecentFeeChart">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onActivated, onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { TypographyText } from 'ant-design-vue';
+
+/** ====================  常量  ==================== */
+const monthList = [
+  '2025-12',
+  '2026-01',
+  '2026-02',
+  '2026-03',
+  '2026-04',
+  '2026-05',
+];
+const feeList = [692.87, 671.99, 669.59, 669.59, 596.39, 587.27];
+
+/** ====================  数据  ==================== */
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(chartRef);
+
+/** ====================  方法  ==================== */
+function setChartOption() {
+  renderEcharts({
+    color: ['#1677ff'],
+    grid: {
+      bottom: 8,
+      containLabel: true,
+      left: 8,
+      right: 8,
+      top: 36,
+    },
+    series: [
+      {
+        barMaxWidth: 10,
+        data: feeList,
+        itemStyle: {
+          borderRadius: [4, 4, 0, 0],
+        },
+        label: {
+          color: '#1677ff',
+          position: 'top',
+          show: true,
+        },
+        type: 'bar',
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+    },
+    xAxis: {
+      axisLine: {
+        lineStyle: {
+          color: '#dcdfe6',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      data: monthList,
+      type: 'category',
+    },
+    yAxis: {
+      axisLabel: {
+        show: false,
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#edf1f7',
+          type: 'dashed',
+        },
+      },
+      type: 'value',
+    },
+  });
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+onMounted(setChartOption);
+onActivated(resize);
+</script>
+
+<template>
+  <div class="h-full">
+    <TypographyText type="secondary">单位（元）</TypographyText>
+    <EchartsUI ref="chartRef" height="300px" width="100%" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/TrafficPoolChart.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/TrafficPoolChart.vue
new file mode 100644
index 0000000..06cd36a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/TrafficPoolChart.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts" name="TrafficPoolChart">
+import type { FlowPoolUsageItem } from '#/api/iotlcm/tDashboard/type';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Empty, Tooltip, TypographyText } from 'ant-design-vue';
+
+import { FlowPoolUsage } from '#/api/iotlcm/tDashboard';
+
+defineOptions({
+  name: 'TrafficPoolChart',
+});
+
+const poolList = ref<FlowPoolUsageItem[]>([]);
+const simpleEmptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
+
+const displayPoolList = computed(() =>
+  poolList.value.map((item) => {
+    const totalFlowMb = Number(item.totalFlowMb) || 0;
+    const usedFlowMb = Number(item.usedFlowMb) || 0;
+    const percent = totalFlowMb > 0 ? (usedFlowMb / totalFlowMb) * 100 : 0;
+
+    return {
+      ...item,
+      percent: Math.min(Number(percent.toFixed(2)), 100),
+      progressColor: getProgressColor(percent),
+      totalFlowMb,
+      usedFlowMb,
+    };
+  }),
+);
+
+function formatMb(value: number) {
+  return value.toLocaleString('en-US', {
+    maximumFractionDigits: 2,
+    minimumFractionDigits: 2,
+  });
+}
+
+function getProgressColor(percent: number) {
+  if (percent >= 80) {
+    return '#ff4d4f';
+  }
+  if (percent >= 50) {
+    return '#faad14';
+  }
+  return '#1677ff';
+}
+
+function getRingStyle(item: { percent: number; progressColor: string }) {
+  return {
+    '--pool-color': item.progressColor,
+    '--pool-percent': item.percent,
+  };
+}
+
+async function loadFlowPoolUsage() {
+  try {
+    const result = await FlowPoolUsage();
+    poolList.value = result.data || [];
+  } catch (error) {
+    console.error(error);
+    poolList.value = [];
+  }
+}
+
+onMounted(loadFlowPoolUsage);
+</script>
+
+<template>
+  <div class="min-h-[300px]">
+    <Empty
+      v-if="displayPoolList.length === 0"
+      :image="simpleEmptyImage"
+      description="暂无流量池数据"
+    />
+
+    <div
+      v-else
+      class="grid min-h-[300px] grid-cols-1 gap-4 md:grid-cols-2"
+    >
+      <div
+        v-for="item in displayPoolList"
+        :key="item.flowPoolCode"
+        class="relative flex min-h-[280px] flex-col"
+      >
+        <Tooltip :title="item.flowPoolCode">
+          <TypographyText
+            class="absolute right-0 top-0 max-w-[220px] text-[13px] text-[#606266]"
+            :content="item.flowPoolCode"
+            :ellipsis="true"
+          />
+        </Tooltip>
+
+        <div class="flex flex-1 items-center justify-center">
+          <div class="pool-ring" :style="getRingStyle(item)">
+            <div class="pool-ring-inner">
+              <div
+                class="mb-4 flex size-[54px] items-center justify-center rounded-full border-2 border-[#dfe8f5] text-[#dfe8f5]"
+              >
+                <IconifyIcon icon="mdi:water-percent" class="text-[38px]" />
+              </div>
+              <div class="text-[34px] leading-none text-[#607089]">
+                {{ formatMb(item.usedFlowMb) }}
+              </div>
+              <TypographyText type="secondary">已使用（MB）</TypographyText>
+              <div class="mt-2 text-[12px] text-[#909399]">
+                {{ item.percent.toFixed(2) }}% / {{ formatMb(item.totalFlowMb) }} MB
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pool-ring {
+  position: relative;
+  display: flex;
+  width: 220px;
+  height: 220px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background:
+    conic-gradient(
+      from -90deg,
+      var(--pool-color) calc(var(--pool-percent) * 1%),
+      #edf3fa 0
+    );
+}
+
+.pool-ring::after {
+  position: absolute;
+  inset: 16px;
+  content: '';
+  border-radius: 50%;
+  background: #fff;
+}
+
+.pool-ring-inner {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/TrafficShareChart.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/TrafficShareChart.vue
new file mode 100644
index 0000000..af54f64
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/components/TrafficShareChart.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts" name="TrafficShareChart">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onActivated, onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { Badge, Col, Row, Statistic, TypographyText } from 'ant-design-vue';
+
+/** ====================  常量  ==================== */
+const shareLegend = [
+  {
+    name: '已使用(MB)',
+    value: '0.000',
+    color: '#1677ff',
+  },
+  {
+    name: '剩余(MB)',
+    value: '0.000',
+    color: '#edf3fa',
+  },
+] as const;
+
+/** ====================  数据  ==================== */
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(chartRef);
+
+/** ====================  方法  ==================== */
+function setChartOption() {
+  renderEcharts({
+    series: [
+      {
+        axisLabel: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: [[1, '#edf3fa']],
+            width: 16,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        center: ['50%', '76%'],
+        data: [
+          {
+            value: 0,
+          },
+        ],
+        detail: {
+          show: false,
+        },
+        endAngle: 0,
+        max: 100,
+        min: 0,
+        pointer: {
+          show: false,
+        },
+        progress: {
+          itemStyle: {
+            color: '#1677ff',
+          },
+          show: true,
+          width: 16,
+        },
+        radius: '88%',
+        splitLine: {
+          show: false,
+        },
+        startAngle: 180,
+        type: 'gauge',
+      },
+    ],
+  });
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+onMounted(setChartOption);
+onActivated(resize);
+</script>
+
+<template>
+  <div class="h-full">
+    <div class="relative h-[230px]">
+      <EchartsUI ref="chartRef" height="230px" width="100%" />
+      <div
+        class="pointer-events-none absolute left-0 right-0 top-[88px] flex flex-col items-center"
+      >
+        <IconifyIcon
+          icon="mdi:water-outline"
+          class="text-[62px] text-[#dfe8f5]"
+        />
+        <Statistic
+          value="0.00"
+          suffix="%"
+          class="mt-2"
+          :value-style="{ color: '#607089', fontSize: '28px', lineHeight: 1 }"
+        />
+      </div>
+    </div>
+
+    <Row :gutter="[24, 24]" class="px-12 text-center">
+      <Col v-for="item in shareLegend" :key="item.name" :span="12">
+        <Badge :color="item.color" :text="item.name" />
+        <TypographyText class="mt-3 block text-[18px]">
+          {{ item.value }}
+        </TypographyText>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/index.vue
new file mode 100644
index 0000000..cb39359
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDashboard/index.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts" name="">
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Card, Col, Row } from 'ant-design-vue';
+
+import { getRuntimeMenuVisible } from '#/config/menu-setting';
+
+import BusinessAlarmPanel from './components/BusinessAlarmPanel.vue';
+import BusinessUsageChart from './components/BusinessUsageChart.vue';
+import CardLocationDistributionChart from './components/CardLocationDistributionChart.vue';
+import LifecycleDistributionChart from './components/LifecycleDistributionChart.vue';
+import MyPanel from './components/MyPanel.vue';
+import QuickNavigation from './components/QuickNavigation.vue';
+import RecentFeeChart from './components/RecentFeeChart.vue';
+import TrafficPoolChart from './components/TrafficPoolChart.vue';
+
+/** ====================  常量  ==================== */
+const CARD_CONFIG = {
+  bordered: false,
+  bodyStyle: {
+    padding: '16px',
+    paddingTop: '0',
+  },
+  class: 'h-full',
+  headStyle: {
+    padding: '12px 20px',
+    minHeight: 'auto',
+    borderBottom: 'none',
+  },
+};
+
+/** ====================  数据  ==================== */
+const visibleMap = computed(() => ({
+  businessAlert: getRuntimeMenuVisible('tDashboard.businessAlert'),
+  businessVolume: getRuntimeMenuVisible('tDashboard.businessVolume'),
+  feeSituation: getRuntimeMenuVisible('tDashboard.feeSituation'),
+  lifeCycle: getRuntimeMenuVisible('tDashboard.lifeCycle'),
+  locationDistribution: getRuntimeMenuVisible(
+    'tDashboard.locationDistribution',
+  ),
+  myPanel: getRuntimeMenuVisible('tDashboard.myPanel'),
+  quickAccessBorder: getRuntimeMenuVisible('tDashboard.quickAccessBorder'),
+  trafficPool: getRuntimeMenuVisible('tDashboard.trafficPool'),
+}));
+
+/** ====================  方法  ==================== */
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <div
+    class="flex h-full w-full flex-col gap-4 bg-[#f5f7fb] p-4 dark:bg-[#00000000]"
+  >
+    <Card
+      v-if="visibleMap.quickAccessBorder"
+      title="快捷入口"
+      v-bind="CARD_CONFIG"
+    >
+      <QuickNavigation />
+    </Card>
+
+    <div v-if="visibleMap.myPanel">
+      <p
+        class="pb-[12px] text-[16px] font-[600] text-[#323639E0] dark:text-[#F2F2F2D9]"
+      >
+        我的面板
+      </p>
+      <MyPanel />
+    </div>
+
+    <Row :gutter="[16, 16]">
+      <Col v-if="visibleMap.lifeCycle" :xs="24" :xl="8">
+        <Card title="生命周期分布" v-bind="CARD_CONFIG" :hoverable="true">
+          <LifecycleDistributionChart class="h-[340px]" />
+        </Card>
+      </Col>
+      <Col v-if="visibleMap.businessVolume" :xs="24" :xl="16">
+        <Card title="业务量使用情况" v-bind="CARD_CONFIG" :hoverable="true">
+          <BusinessUsageChart class="h-[340px]" />
+        </Card>
+      </Col>
+      <Col v-if="visibleMap.feeSituation" :xs="24" :xl="8">
+        <Card title="近6月费用情况" v-bind="CARD_CONFIG" :hoverable="true">
+          <RecentFeeChart class="min-h-[300px]" />
+        </Card>
+      </Col>
+      <Col v-if="visibleMap.trafficPool" :xs="24" :xl="16">
+        <Card title="流量池" v-bind="CARD_CONFIG" :hoverable="true">
+          <TrafficPoolChart class="min-h-[300px]" />
+        </Card>
+      </Col>
+      <Col v-if="visibleMap.locationDistribution" :xs="24" :xl="16">
+        <Card v-bind="CARD_CONFIG" :hoverable="true">
+          <template #title>
+            <div class="flex items-center">
+              物联卡位置分布图
+              <IconifyIcon
+                icon="mdi:information-outline"
+                class="ml-1 text-[14px] text-[#c0c4cc]"
+              />
+            </div>
+          </template>
+          <template #extra>
+            <Button type="link" size="small">
+              更多
+              <IconifyIcon icon="mdi:chevron-right" class="ml-1 text-[16px]" />
+            </Button>
+          </template>
+          <CardLocationDistributionChart class="h-[530px]" />
+        </Card>
+      </Col>
+      <Col v-if="visibleMap.businessAlert" :xs="24" :xl="8">
+        <Card title="业务告警" v-bind="CARD_CONFIG" :hoverable="true">
+          <BusinessAlarmPanel class="h-[530px]" />
+        </Card>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDeptApi/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDeptApi/index.vue
new file mode 100644
index 0000000..409e545
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDeptApi/index.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { TDeptApiModel } from './model';
+
+import { Page } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysDeptApiInfoApi } from '#/api/system/dept';
+import BetterVben from '#/constants/BetterVben';
+
+import { DeptApiGridColumns } from './model';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+
+/** ====================  方法  ==================== */
+async function handleCopyAppId(row: TDeptApiModel) {
+  await navigator.clipboard.writeText(row.appKey);
+  message.success('APPID复制成功');
+}
+
+async function handleCopyAppSecret(row: TDeptApiModel) {
+  await navigator.clipboard.writeText(row.appSecret);
+  message.success('APPSecret复制成功');
+}
+
+/** ====================  组件  ==================== */
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    collapsed: false,
+    schema: [],
+    showCollapseButton: false,
+    showDefaultActions: false,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: DeptApiGridColumns,
+    pagerConfig: { enabled: false },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          const data = await getSysDeptApiInfoApi();
+          return {
+            items: data ? [data] : [],
+            page: 1,
+            pageSize: 1,
+            total: data ? 1 : 0,
+          };
+        },
+      },
+    },
+  },
+});
+
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="API秘钥情况">
+      <template #appId="{ row }">
+        <Button
+          class="border-none p-0"
+          :block="false"
+          type="link"
+          @click="handleCopyAppId(row)"
+        >
+          ****
+        </Button>
+      </template>
+      <template #appSecret="{ row }">
+        <Button
+          class="border-none p-0"
+          :block="false"
+          type="link"
+          @click="handleCopyAppSecret(row)"
+        >
+          ****
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDeptApi/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDeptApi/model.tsx
new file mode 100644
index 0000000..eede7a3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tDeptApi/model.tsx
@@ -0,0 +1,30 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { SysDeptApiInfoRes } from '#/api/system/dept';
+
+export type TDeptApiModel = SysDeptApiInfoRes;
+
+export const DeptApiGridColumns: VxeGridProps['columns'] = [
+  {
+    title: '企业ID',
+    field: 'deptKey',
+    minWidth: 220,
+  },
+  {
+    title: '企业名称',
+    field: 'deptName',
+    minWidth: 220,
+  },
+  {
+    title: 'appKey(appId)',
+    field: 'appKey',
+    minWidth: 220,
+    slots: { default: 'appId' },
+  },
+  {
+    title: 'appSecret(password)',
+    field: 'appSecret',
+    width: 160,
+    align: 'center',
+    slots: { default: 'appSecret' },
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/edit.vue
new file mode 100644
index 0000000..005694f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/edit.vue
@@ -0,0 +1,159 @@
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicModal>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/iotlcm/tFlowPackageConfig';
+import {
+  flowPoolEditSchema,
+  resetFlowPackageContext,
+  setFlowPackageContext,
+} from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+function toArray(value: any) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (typeof value === 'string' && value.trim()) {
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }
+  return [];
+}
+
+function toPackageLabelValues(codes: any, names: any) {
+  const codeList = toArray(codes);
+  const nameList = toArray(names);
+  return codeList.map((code: string, index: number) => ({
+    label: nameList[index] || code,
+    value: code,
+  }));
+}
+
+function toPackageCodes(value: any) {
+  return toArray(value).map((item: any) => {
+    if (item && typeof item === 'object') {
+      return item.value ?? item.label ?? item;
+    }
+    return item;
+  });
+}
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: flowPoolEditSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    resetFlowPackageContext();
+    modalApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = modalApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      setFlowPackageContext(record.poolFlow || '', record.poolPackageCode || '');
+      await formApi.setValues({
+        ...record,
+        packageCodes: toPackageLabelValues(
+          record.packageCodes,
+          record.packageNames,
+        ),
+      });
+    }
+    modalApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      modalApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      modalApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    data.packageCodes = toPackageCodes(data.packageCodes);
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  resetFlowPackageContext();
+  await formApi.resetForm();
+}
+
+</script>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/index.vue
new file mode 100644
index 0000000..0a9c2df
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/index.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+  import { h, reactive, ref, computed } from 'vue';
+  import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+  import type { VbenFormProps } from '#/adapter/form';
+  import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+  import type { DeepPartial } from '@vben/types';
+  import { getVxePopupContainer } from '@vben/utils';
+  import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+  import { useVbenVxeGrid } from '#/adapter/vxe-table';
+  import { AccessControl, useAccess } from '@vben/access';
+  const { hasAccessByCodes } = useAccess();
+  import {
+    commonDownloadExcel,
+    getExportColumns,
+  } from '#/utils/file/download';
+  import { List, Export, Delete } from '#/api/iotlcm/tFlowPackageConfig';
+  import { MdiPlus, MdiExport, MdiDelete }  from '@vben/icons';
+  import { columns, querySchema, type RowType } from './model';
+  import editModal from './edit.vue';
+  import viewDrawer from './view.vue';
+  const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  };
+  const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+  highlight: true,
+  labelField: 'id',
+  },
+  rowConfig: {
+  keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+  ajax: {
+  query: async ({ page }, formValues) => {
+  return await List({
+  page: page.currentPage,
+  pageSize: page.pageSize,
+  ...formValues,
+  });
+  },
+  },
+  },
+  toolbarConfig: {
+  custom: true,
+  export: false,
+  refresh: true,
+  resizable: true,
+  search: true,
+  zoom: true,
+  },
+  };
+  const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+  };
+  const CheckboxChecked = ref(false);
+  function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+  }
+  const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+  });
+  const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+  });
+  function handlePreview(record: RowType) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+  }
+  const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+  });
+  function handleAdd() {
+  editModalApi.setData({ update: false, view: false });
+  editModalApi.open();
+  }
+  function handleEdit(row: RowType) {
+  editModalApi.setData({ id: row.id, update: true, view: false });
+  editModalApi.open();
+  }
+  async function handleDelete(row: RowType) {
+  await Delete({ id: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+  }
+  async function handleRefresh() {
+  await gridApi.query();
+  }
+  function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+  ids.push(row.id);
+  }
+  if (ids.length === 0){
+  message.error('请至少选择一项要删除的数据');
+  return;
+  }
+  Modal.confirm({
+  title: '提示',
+  okType: 'danger',
+  content: `确认删除选中的${ids.length}条记录吗？`,
+  onOk: async () => {
+  await Delete({ id: ids });
+  message.success("删除成功");
+  await handleRefresh();
+  },
+  });
+  }
+  async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, 'SIM流量池套餐配置表',{
+  exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+  ...formValues,
+  page: 1,
+  });
+  }
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="SIM流量池套餐配置表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:iot:tFlowPackageConfig:edit'">
+          新增流量池
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:iot:tFlowPackageConfig:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:iot:tFlowPackageConfig:export'">
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:iot:tFlowPackageConfig:view'">
+            查看
+          </Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:iot:tFlowPackageConfig:edit'">
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:iot:tFlowPackageConfig:delete']" type="code">
+            <Popconfirm title="确保该流量池未在使用，删除不可恢复，请谨慎删除！" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @reload="handleRefresh" />
+    <ViewDrawer />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/model.tsx
new file mode 100644
index 0000000..a9bdcf1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/model.tsx
@@ -0,0 +1,379 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+import {
+  FlowPackageAddList,
+  FlowPackageList,
+  GetFlowPackageOptions,
+} from '#/api/iotlcm/tFlowPackageConfig';
+
+let currentPoolPackageFlow = '';
+let currentPoolPackageCode = '';
+
+export function resetFlowPackageContext() {
+  currentPoolPackageFlow = '';
+  currentPoolPackageCode = '';
+}
+
+export function setFlowPackageContext(flow = '', poolPackageCode = '') {
+  currentPoolPackageFlow = flow;
+  currentPoolPackageCode = poolPackageCode;
+}
+
+export class State {
+  public id = 0; // 主键ID
+  public poolPackageCode = ''; // 池编码
+  public poolFlow = ''; // 流量池大小
+  public packageCodes = null; // 套餐编码列表
+  public topupPackageCodes = null; // 可订购加油包套餐编码列表
+  public remark = ''; // 备注
+  public tenantId = ''; // 租户ID
+  public createdDept = 0; // 创建部门ID
+  public createdBy = 0; // 创建者ID
+  public createdBySumma?: null | MemberSumma = null; // 创建者ID摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者ID
+  public updatedBySumma?: null | MemberSumma = null; // 更新者ID摘要信息
+  public updatedAt = ''; // 更新时间
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+function getItems(res: any) {
+  if (Array.isArray(res)) {
+    return res;
+  }
+  return res?.items || [];
+}
+
+async function getFlowSizeOptions(params: Record<string, any> = {}) {
+  const poolPackageCode =
+    params.poolPackageCode || currentPoolPackageCode;
+  const items = getItems(await GetFlowPackageOptions({ poolPackageCode }));
+  return {
+    items: items.map((value: string) => {
+      const [flowGb, flowMb] = String(value).split(',');
+      const gbText = String(flowGb || '').trim();
+      const mbText = String(flowMb || '').trim();
+      return {
+        label: gbText ? `${gbText}G / ${mbText}M` : `${mbText}M`,
+        value,
+      };
+    }),
+  };
+}
+
+async function getFlowPackageOptions(params: Record<string, any> = {}) {
+  const flow = params.flow || currentPoolPackageFlow;
+  const poolPackageCode =
+    params.poolPackageCode || currentPoolPackageCode;
+  if (!flow) {
+    return { items: [] };
+  }
+  const items = getItems(await FlowPackageList({ flow, poolPackageCode }));
+  return { items };
+}
+
+function withCurrentFlow(params: Record<string, any> = {}) {
+  return {
+    ...params,
+    flow: params.flow || currentPoolPackageFlow,
+    poolPackageCode: params.poolPackageCode || currentPoolPackageCode,
+  };
+}
+
+async function getFlowPackageAddOptions() {
+  const items = getItems(await FlowPackageAddList());
+  return { items };
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+				fieldName: 'poolPackageCode',
+				component: 'Input',
+				label: '池编码',
+				componentProps: {
+					placeholder: '请输入池编码',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  rules:null,
+				formItemClass: 'col-span-1',
+			}, ];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '主键ID',
+    field: 'id',
+    align: 'left',
+    width: -1,
+    type: 'checkbox',
+    visible: false,
+  },
+  {
+    title: '池编码',
+    field: 'poolPackageCode',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '套餐',
+    field: 'packageNames',
+    align: 'left',
+    width: -1,
+ },
+  {
+    title: '可订购加油包套餐',
+    field: 'topupPackageNames',
+    align: 'left',
+    width: -1,
+ },
+   {
+    title: '备注',
+    field: 'remark',
+    align: 'left',
+    width: -1,
+ },
+
+
+
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  poolPackageCode: string;
+  packageCodes: any;
+  topupPackageCodes: any;
+  remark: string;
+  tenantId: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+
+  {  field: 'poolPackageCode',  label: '池编码'},
+  {  field: 'packageNames',  label: '套餐'},
+  {  field: 'topupPackageNames',  label: '可订购加油包套餐'},
+  {  field: 'remark',  label: '备注'},
+
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+ {
+					fieldName: 'id',
+					component: 'Input',
+					label: '主键ID',
+					dependencies: {   show: () => false,    triggerFields: [''],   },
+					componentProps: {
+						placeholder: '',
+						onUpdateValue: (e: any) => {
+							console.log(e);
+						},   
+					},
+					formItemClass: 'col-span-1',
+				},  {
+				fieldName: 'poolPackageCode',
+				component: 'Input',
+				label: '池编码',
+				componentProps: {
+					placeholder: '请输入池编码',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'packageCodes',
+				component: 'Input',
+				label: '套餐列表',
+				componentProps: {
+					placeholder: '请输入套餐列表',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'topupPackageCodes',
+				component: 'Input',
+				label: '可订购加油包套餐编码列表',
+				componentProps: {
+					placeholder: '请输入可订购加油包套餐编码列表',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			},  {
+				fieldName: 'remark',
+				component: 'Input',
+				label: '备注',
+				componentProps: {
+					placeholder: '请输入备注',
+					onUpdateValue: (e: any) => {
+						console.log(e);
+					},   
+				},  
+				rules:null,
+				formItemClass: 'col-span-1',
+			}, ];
+
+export const flowPoolEditSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'poolPackageCode',
+    component: 'Input',
+    label: '池编码',
+    dependencies: {
+      show: (values) => Boolean(values?.id),
+      triggerFields: ['id'],
+    },
+    componentProps: {
+      placeholder: '系统自动生成',
+      readonly: true,
+      'only-read': true,
+    },
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'poolFlow',
+    component: 'ApiSelect',
+    label: '流量池大小',
+    componentProps: {
+      api: getFlowSizeOptions,
+      labelField: 'label',
+      placeholder: '请选择流量池大小',
+      resultField: 'items',
+      valueField: 'value',
+      },
+    dependencies: {
+      async trigger(value, formApi) {
+        const nextFlow = value.poolFlow || currentPoolPackageFlow;
+        const shouldClearPackages =
+          currentPoolPackageFlow !== '' &&
+          currentPoolPackageFlow !== nextFlow;
+        if (shouldClearPackages) {
+          // 流量池大小变化后，之前选择的套餐不再可靠，先清空再刷新候选项。
+          await formApi.setFieldValue('packageCodes', []);
+        }
+        currentPoolPackageFlow = nextFlow;
+        await formApi.updateSchema([
+          {
+            componentProps: {
+              alwaysLoad: true,
+              api: getFlowPackageOptions,
+              beforeFetch: withCurrentFlow,
+              immediate: true,
+              labelField: 'label',
+              mode: 'multiple',
+              optionFilterProp: 'label',
+              optionLabelProp: 'label',
+              params: {
+                flow: nextFlow,
+                poolPackageCode: currentPoolPackageCode,
+              },
+              placeholder: nextFlow
+                ? '请选择套餐'
+                : '请先选择流量池大小',
+              resultField: 'items',
+              showSearch: true,
+              valueField: 'value',
+            },
+            fieldName: 'packageCodes',
+          },
+        ]);
+      },
+      triggerFields: ['poolFlow'],
+    },
+    formItemClass: 'col-span-1',
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'packageCodes',
+    component: 'ApiSelect',
+    label: '套餐列表',
+    componentProps: {
+      alwaysLoad: true,
+      api: getFlowPackageOptions,
+      beforeFetch: withCurrentFlow,
+      immediate: true,
+      labelInValue: true,
+      labelField: 'packageName',
+      mode: 'multiple',
+      optionFilterProp: 'packageName',
+      optionLabelProp: 'packageName',
+      placeholder: '请先选择流量池大小',
+      resultField: 'items',
+      showSearch: true,
+      valueField: 'packageCode',
+    },
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'topupPackageCodes',
+    component: 'ApiSelect',
+    label: '可订购加油包套餐编码列表',
+    componentProps: {
+      api: getFlowPackageAddOptions,
+      labelField: 'packageName',
+      mode: 'multiple',
+      optionFilterProp: 'packageName',
+      optionLabelProp: 'packageName',
+      placeholder: '请选择可订购加油包套餐',
+      resultField: 'items',
+      showSearch: true,
+      valueField: 'packageCode',
+    },
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'remark',
+    component: 'Input',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+    formItemClass: 'col-span-1',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/view.vue
new file mode 100644
index 0000000..a42fb8b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tFlowPackageConfig/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/iotlcm/tFlowPackageConfig';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/BasicStatusCard.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/BasicStatusCard.vue
new file mode 100644
index 0000000..0ff09e4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/BasicStatusCard.vue
@@ -0,0 +1,362 @@
+<script setup lang="ts">
+import type { SimDiagnoseInfoRes } from '#/api/iotlcm/tSimDiagnose/type';
+
+import { Tag } from 'ant-design-vue';
+
+import { diagnosisOnlineStatusDisplay } from '../display';
+
+interface Props {
+  info: null | SimDiagnoseInfoRes['info'];
+}
+
+defineOptions({
+  name: 'BasicStatusCard',
+});
+
+defineProps<Props>();
+
+const unavailableStopReasons = new Set([
+  '000000000000',
+  '暂无停机原因',
+  '未停机',
+  '未停机或系统暂无停机原因',
+]);
+
+function hasDisplayStopReason(value?: string) {
+  const trimmed = String(value ?? '').trim();
+  return trimmed !== '' && !unavailableStopReasons.has(trimmed);
+}
+
+// 状态映射
+const statusMap: Record<string, string> = {
+  '0': '未知',
+  '1': '待激活',
+  '2': '已激活',
+  '4': '已停机',
+  '6': '可测试',
+  '7': '库存',
+  '8': '预销户',
+  '9': '已销户',
+};
+
+const dataStatusMap: Record<string, string> = {
+  '0': '关闭',
+  '1': '开启',
+  '-1': '未知',
+};
+
+const operatingStatusMap: Record<string, string> = {
+  '0': '关机',
+  '1': '开机',
+};
+
+const regionLimitStatusMap: Record<string, string> = {
+  '0': '未触发区域限制',
+  '1': '已触发区域限制',
+  '2': '网络侧暂时无法判断',
+};
+
+const regionLimitOrderStatusMap: Record<string, string> = {
+  '0': '已订购',
+  '1': '未订购',
+  '2': '未知',
+};
+
+const regionLimitTriggerStatusMap: Record<string, string> = {
+  '0': '已断网',
+  '1': '未断网',
+  '-': '无法判断',
+  '2': '未知',
+};
+
+function isRegionLimitTriggered(info?: null | SimDiagnoseInfoRes['info']) {
+  if (info?.regionLimitOrderStatus === '1') {
+    return false;
+  }
+  if (info?.regionLimitOrderStatus === '0') {
+    return info.regionLimitTriggerStatus === '0';
+  }
+  return info?.regionLimitStatus === '1';
+}
+
+function regionLimitConclusion(info?: null | SimDiagnoseInfoRes['info']) {
+  if (info?.regionLimitOrderStatus === '1') {
+    return '未订购区域限制业务';
+  }
+  if (info?.regionLimitOrderStatus === '0') {
+    if (info.regionLimitTriggerStatus === '0') {
+      return '已触发区域限制并断网';
+    }
+    if (info.regionLimitTriggerStatus === '1') {
+      return '未触发区域限制断网';
+    }
+    return '网络侧暂时无法判断';
+  }
+  return regionLimitStatusMap[info?.regionLimitStatus || ''] || '-';
+}
+
+const humanLimitStatusMap: Record<string, string> = {
+  '0': '限制',
+  '1': '未限制',
+  '2': '未知',
+  '3': '运营商暂不支持',
+};
+
+const frozenStatusMap: Record<string, string> = {
+  '0': '未冻结',
+  '1': '已冻结',
+  '2': '不支持查询',
+  未冻结: '未冻结',
+  已冻结: '已冻结',
+  不支持查询: '不支持查询',
+};
+
+function normalizeFrozenStatus(status?: string) {
+  const value = String(status ?? '').trim();
+  if (
+    value === '1' ||
+    value === '已冻结' ||
+    value === '冻结' ||
+    value === 'true' ||
+    value === '是'
+  ) {
+    return '已冻结';
+  }
+  if (
+    value === '0' ||
+    value === '未冻结' ||
+    value === 'false' ||
+    value === '否'
+  ) {
+    return '未冻结';
+  }
+  if (value === '2' || value === '不支持查询') {
+    return '不支持查询';
+  }
+  return value;
+}
+
+function isFrozenStatus(status?: string) {
+  return normalizeFrozenStatus(status) === '已冻结';
+}
+
+function getFrozenStatusColor(status?: string) {
+  const normalized = normalizeFrozenStatus(status);
+  if (normalized === '已冻结') {
+    return 'warning';
+  }
+  if (normalized === '未冻结') {
+    return 'success';
+  }
+  return 'default';
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">卡状态</span>
+      <Tag :color="info?.status === '2' ? 'success' : 'warning'">
+        {{ statusMap[info?.status || ''] || info?.status || '-' }}
+      </Tag>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">数据服务</span>
+      <Tag
+        :color="
+          info?.dataStatus === '1'
+            ? 'success'
+            : info?.dataStatus === '-1'
+              ? 'default'
+              : 'error'
+        "
+      >
+        {{ dataStatusMap[info?.dataStatus || ''] || '-' }}
+      </Tag>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">在线状态</span>
+      <Tag :color="info?.onlineStatus === '1' ? 'success' : 'default'">
+        {{ diagnosisOnlineStatusDisplay(info?.onlineStatus) }}
+      </Tag>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">开关机状态</span>
+      <Tag
+        :color="
+          info?.operatingStatus === '1'
+            ? 'success'
+            : info?.operatingStatus === '0'
+              ? 'warning'
+              : 'default'
+        "
+      >
+        {{ operatingStatusMap[info?.operatingStatus || ''] || '-' }}
+      </Tag>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">设备状态</span>
+      <Tag
+        :color="
+          info?.deviceStatus === '1'
+            ? 'success'
+            : info?.deviceStatus === '0'
+              ? 'error'
+              : 'default'
+        "
+      >
+        {{
+          info?.deviceStatus === '1'
+            ? '正常'
+            : info?.deviceStatus === '0'
+              ? '异常/不可用'
+              : '-'
+        }}
+      </Tag>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">机卡绑定状态</span>
+      <Tag
+        :color="
+          info?.imeiStatus === '1'
+            ? 'success'
+            : info?.imeiStatus === '0'
+              ? 'warning'
+              : 'default'
+        "
+      >
+        {{
+          info?.imeiStatus === '1'
+            ? '已绑定'
+            : info?.imeiStatus === '0'
+              ? '机卡分离'
+              : info?.imeiStatus === '2'
+                ? '未知'
+                : '-'
+        }}
+      </Tag>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">人联网限制</span>
+      <Tag
+        :color="
+          info?.humanLimitStatus === '1'
+            ? 'success'
+            : info?.humanLimitStatus === '0'
+              ? 'error'
+              : 'default'
+        "
+      >
+        {{ humanLimitStatusMap[info?.humanLimitStatus || ''] || '-' }}
+      </Tag>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">区域限制订购</span>
+      <Tag
+        :color="
+          info?.regionLimitOrderStatus === '0'
+            ? 'success'
+            : info?.regionLimitOrderStatus === '1'
+              ? 'warning'
+              : 'default'
+        "
+      >
+        {{
+          regionLimitOrderStatusMap[info?.regionLimitOrderStatus || ''] || '-'
+        }}
+      </Tag>
+    </div>
+    <div
+      v-if="info?.regionLimitOrderStatus === '0'"
+      class="flex items-center justify-between"
+    >
+      <span class="text-[13px] text-[#86909c]">区域限制断网</span>
+      <Tag
+        :color="
+          info?.regionLimitTriggerStatus === '0'
+            ? 'error'
+            : info?.regionLimitTriggerStatus === '1'
+              ? 'success'
+              : 'default'
+        "
+      >
+        {{
+          regionLimitTriggerStatusMap[info?.regionLimitTriggerStatus || ''] ||
+          '-'
+        }}
+      </Tag>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">诊断结论</span>
+      <Tag
+        :color="
+          isRegionLimitTriggered(info)
+            ? 'error'
+            : info?.regionLimitOrderStatus === '1' ||
+                info?.regionLimitStatus === '0'
+              ? 'success'
+              : 'default'
+        "
+      >
+        {{ regionLimitConclusion(info) }}
+      </Tag>
+    </div>
+    <div
+      v-if="info?.regionLimitOrderStatus === '0' && info?.regionLimitArea"
+      class="flex items-center justify-between gap-3"
+    >
+      <span class="text-[13px] text-[#86909c]">限制区域</span>
+      <span
+        class="max-w-[68%] text-right text-[13px] font-[500] leading-5 text-[#1f2329]"
+      >
+        {{ info?.regionLimitArea }}
+      </span>
+    </div>
+    <div
+      v-if="hasDisplayStopReason(info?.stopReason)"
+      class="flex items-center justify-between gap-3"
+    >
+      <span class="text-[13px] text-[#86909c]">停机原因</span>
+      <span
+        class="max-w-[68%] text-right text-[13px] font-[500] leading-5 text-[#1f2329]"
+      >
+        {{ info?.stopReason }}
+      </span>
+    </div>
+    <div
+      v-if="isFrozenStatus(info?.frozenStatus)"
+      class="flex items-center justify-between"
+    >
+      <span class="text-[13px] text-[#86909c]">冻结状态</span>
+      <Tag :color="getFrozenStatusColor(info?.frozenStatus)">
+        {{
+          frozenStatusMap[normalizeFrozenStatus(info?.frozenStatus)] ||
+          info?.frozenStatus ||
+          '-'
+        }}
+      </Tag>
+    </div>
+    <div
+      v-if="isFrozenStatus(info?.frozenStatus) && info?.frozenReason"
+      class="flex items-center justify-between gap-3"
+    >
+      <span class="text-[13px] text-[#86909c]">冻结原因</span>
+      <span
+        class="max-w-[68%] text-right text-[13px] font-[500] leading-5 text-[#1f2329]"
+      >
+        {{ info?.frozenReason }}
+      </span>
+    </div>
+    <div
+      v-if="isFrozenStatus(info?.frozenStatus) && info?.frozenOperTime"
+      class="flex items-center justify-between gap-3"
+    >
+      <span class="text-[13px] text-[#86909c]">冻结时间</span>
+      <span
+        class="max-w-[68%] text-right text-[13px] font-[500] leading-5 text-[#1f2329]"
+      >
+        {{ info?.frozenOperTime }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/FlowChartCard.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/FlowChartCard.vue
new file mode 100644
index 0000000..d9592c7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/FlowChartCard.vue
@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { SimDiagnoseFlowRes } from '#/api/iotlcm/tSimDiagnose/type';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+defineOptions({
+  name: 'FlowChartCard',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  mockData: false,
+});
+
+interface Props {
+  /** 流量数据 */
+  flowData: null | SimDiagnoseFlowRes;
+  /** 图表标题 */
+  title?: string;
+  /** 是否显示模拟数据（用于预览） */
+  mockData?: boolean;
+}
+
+// 模拟数据
+const mockChartData: SimDiagnoseFlowRes = {
+  times: ['06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25'],
+  flow: [53, 45.2, 0, 12.5, 78.3, 23.1, 0],
+  unit: 'MB',
+};
+
+/** ====================  数据  ==================== */
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts, resize } = useEcharts(chartRef);
+
+/** ====================  计算属性  ==================== */
+const chartData = computed(() => {
+  // 如果是预览模式，使用模拟数据
+  if (props.mockData) {
+    return mockChartData;
+  }
+  if (!props.flowData) {
+    return {
+      times: [],
+      flow: [],
+      flowAvailable: [],
+      unit: 'MB',
+    };
+  }
+  const data = (props.flowData as any)?.data ?? props.flowData;
+  return {
+    flow: Array.isArray(data.flow) ? data.flow.map(Number) : [],
+    flowAvailable: Array.isArray(data.flowAvailable) ? data.flowAvailable : [],
+    times: Array.isArray(data.times) ? data.times : [],
+    unit: data.unit || 'MB',
+  };
+});
+
+const totalUsage = computed(() => {
+  const data = chartData.value;
+  if (
+    !data.flow.some(
+      (_: number, index: number) => data.flowAvailable[index] !== false,
+    )
+  )
+    return '-';
+  let sum = 0;
+  data.flow.forEach((value: number, index: number) => {
+    if (data.flowAvailable[index] !== false) sum += value;
+  });
+  return `${sum.toFixed(2)} ${data.unit || 'MB'}`;
+});
+
+const hasChartData = computed(() => {
+  const data = chartData.value;
+  return (
+    data.times.length > 0 &&
+    data.flow.some(
+      (_: number, index: number) => data.flowAvailable[index] !== false,
+    )
+  );
+});
+
+/** ====================  方法  ==================== */
+function getYAxisMax(maxValue: number) {
+  if (maxValue <= 0) {
+    return 1;
+  }
+  if (maxValue < 1) {
+    return Math.max(Number((maxValue * 1.5).toFixed(2)), 0.1);
+  }
+  if (maxValue < 10) {
+    return Math.ceil(maxValue * 1.3);
+  }
+  if (maxValue < 100) {
+    return Math.ceil(maxValue * 1.2);
+  }
+  return Math.ceil(maxValue / 100) * 120;
+}
+
+function formatAxisValue(value: number) {
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(1)}k`;
+  }
+  if (value > 0 && value < 1) {
+    return value.toFixed(2);
+  }
+  if (!Number.isInteger(value)) {
+    return value.toFixed(1);
+  }
+  return value.toString();
+}
+
+function setChartOption() {
+  const data = chartData.value;
+  const unit = data.unit || 'MB';
+  const availableValues = data.flow.filter(
+    (_: number, index: number) => data.flowAvailable[index] !== false,
+  );
+  const maxValue = Math.max(...availableValues, 0);
+  const seriesData: [string, null | number][] = data.times.map(
+    (time: string, index: number) => [
+      time,
+      data.flowAvailable[index] === false
+        ? null
+        : Number(data.flow[index] ?? 0),
+    ],
+  );
+
+  const options: Parameters<typeof renderEcharts>[0] = {
+    color: ['#1677ff'],
+    grid: {
+      bottom: 30,
+      containLabel: true,
+      left: 50,
+      right: 20,
+      top: 20,
+    },
+    series: [
+      {
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(22, 119, 255, 0.3)' },
+              { offset: 1, color: 'rgba(22, 119, 255, 0.05)' },
+            ],
+          },
+        },
+        data: seriesData,
+        label: {
+          formatter: (params: any) => {
+            const value = Array.isArray(params.value)
+              ? Number(params.value[1])
+              : Number(params.value);
+            return value > 0 ? `${value} ${unit}` : '';
+          },
+          show: true,
+        },
+        lineStyle: {
+          width: 2,
+        },
+        markPoint: {
+          data: seriesData
+            .filter((item: [string, null | number]) => Number(item[1]) > 0)
+            .map((item: [string, null | number]) => ({
+              coord: item,
+              value: item[1],
+            })),
+          label: {
+            formatter: `{c} ${unit}`,
+          },
+          symbolSize: 42,
+        },
+        name: `流量 (${unit})`,
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: (value: [string, number]) =>
+          Number(value?.[1]) > 0 ? 8 : 4,
+        type: 'line',
+      },
+    ] as any,
+    tooltip: {
+      formatter: (params: any) => {
+        const item = params[0];
+        const value = Array.isArray(item.value) ? item.value[1] : item.value;
+        return `${item.axisValue}<br/>流量: ${value} ${unit}`;
+      },
+      trigger: 'axis',
+    },
+    xAxis: {
+      axisLabel: {
+        color: '#606266',
+        fontSize: 11,
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#dcdfe6',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      data: data.times,
+      type: 'category',
+    },
+    yAxis: {
+      axisLabel: {
+        color: '#606266',
+        fontSize: 11,
+        formatter: formatAxisValue,
+      },
+      max: getYAxisMax(maxValue),
+      min: 0,
+      splitLine: {
+        lineStyle: {
+          color: '#f0f2f5',
+          type: 'dashed',
+        },
+      },
+      type: 'value',
+    },
+  };
+
+  return renderEcharts(options);
+}
+
+async function renderChart() {
+  await nextTick();
+  await setChartOption();
+  resize();
+}
+
+// 监听数据变化重新渲染图表
+watch(
+  chartData,
+  () => {
+    renderChart();
+  },
+  { deep: true, immediate: true },
+);
+
+/** ====================  周期  ==================== */
+onMounted(() => {
+  renderChart();
+});
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <div
+      class="mb-2 flex items-center justify-between text-[13px] text-[#606266] dark:text-[#a3a3a3]"
+    >
+      <span class="total-usage-label">
+        总用量: <span class="font-[500]">{{ totalUsage }}</span>
+      </span>
+    </div>
+    <div class="relative h-[220px] flex-1">
+      <EchartsUI ref="chartRef" height="220px" width="100%" />
+      <div
+        v-if="!hasChartData"
+        class="absolute inset-0 flex items-center justify-center bg-white text-[13px] text-[#86909c] dark:bg-[#1f1f1f] dark:text-[#a3a3a3]"
+      >
+        暂无流量数据
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.total-usage-label {
+  color: #606266;
+  font-size: 13px;
+}
+
+:global(.dark) .total-usage-label {
+  color: #a3a3a3;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/PackageFlowDiagnosisCard.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/PackageFlowDiagnosisCard.vue
new file mode 100644
index 0000000..3162e3a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/PackageFlowDiagnosisCard.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import type {
+  SimDiagnoseFlowRes,
+  SimDiagnoseInfoRes,
+} from '#/api/iotlcm/tSimDiagnose/type';
+
+import { Progress, Tag } from 'ant-design-vue';
+
+defineOptions({
+  name: 'PackageFlowDiagnosisCard',
+});
+
+const props = defineProps<Props>();
+
+interface Props {
+  packageInfo: null | SimDiagnoseInfoRes['package'];
+  flowData: null | SimDiagnoseFlowRes;
+}
+
+function getFlowData() {
+  const data = (props.flowData as any)?.data ?? props.flowData;
+  if (!data) {
+    return null;
+  }
+  return {
+    flow: Array.isArray(data.flow) ? data.flow.map(Number) : [],
+    flowAvailable: Array.isArray(data.flowAvailable) ? data.flowAvailable : [],
+    unit: data.unit || 'MB',
+  };
+}
+
+// 生效状态映射
+const effectiveStatusMap: Record<string, string> = {
+  '0': '待生效',
+  '1': '生效中',
+  '2': '已过期',
+  '3': '已终止',
+  '4': '已作废',
+};
+
+// 套餐类型映射
+const packageTypeMap: Record<string, string> = {
+  '1': '基础套餐',
+  '101': '卡套餐',
+  '102': '池套餐',
+  '103': '单卡加油包',
+  '104': '池卡加油包',
+};
+
+// 计算流量使用百分比
+function getFlowPercent(): number {
+  const flowData = getFlowData();
+  if (!props.packageInfo || !flowData) return 0;
+  const total = props.packageInfo.packageTotalFlowMb ?? 0;
+  let used = 0;
+  flowData.flow.forEach((value: number, index: number) => {
+    if (flowData.flowAvailable[index] !== false) used += value;
+  });
+  if (total <= 0) return 0;
+  return Math.min(100, Math.round((used / total) * 100));
+}
+
+// 获取总流量文本
+function getTotalFlowText(): string {
+  if (!props.packageInfo) return '-';
+  const total = props.packageInfo.packageTotalFlowMb ?? 0;
+  if (total >= 1024) {
+    return `${(total / 1024).toFixed(1)} GB`;
+  }
+  return `${total} MB`;
+}
+
+// 获取已用流量文本
+function getUsedFlowText(): string {
+  const flowData = getFlowData();
+  if (
+    !flowData ||
+    !flowData.flow.some(
+      (_: number, index: number) => flowData.flowAvailable[index] !== false,
+    )
+  )
+    return '-';
+  let used = 0;
+  flowData.flow.forEach((value: number, index: number) => {
+    if (flowData.flowAvailable[index] !== false) used += value;
+  });
+  const unit = flowData.unit;
+  if (unit === 'GB') return `${used.toFixed(1)} GB`;
+  if (used >= 1024) return `${(used / 1024).toFixed(1)} GB`;
+  return `${used.toFixed(0)} MB`;
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">套餐名称</span>
+      <span class="text-[13px] font-[500]">{{
+        packageInfo?.packageName || '-'
+      }}</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">套餐类型</span>
+      <span class="text-[13px] font-[500]">{{
+        packageTypeMap[packageInfo?.packageType || ''] ||
+        packageInfo?.packageType ||
+        '-'
+      }}</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">生效状态</span>
+      <Tag
+        :color="packageInfo?.effectiveStatus === '1' ? 'success' : 'warning'"
+      >
+        {{ effectiveStatusMap[packageInfo?.effectiveStatus || ''] || '-' }}
+      </Tag>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">套餐流量</span>
+      <span class="text-[13px] font-[500]">{{ getTotalFlowText() }}</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">套餐时长</span>
+      <span class="text-[13px] font-[500]">{{
+        packageInfo?.durationMonths ? `${packageInfo.durationMonths}个月` : '-'
+      }}</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">7日用量</span>
+      <span class="text-[13px] font-[500]">{{ getUsedFlowText() }}</span>
+    </div>
+    <div class="flex flex-col gap-1">
+      <div class="flex items-center justify-between">
+        <span class="text-[13px] text-[#86909c]">流量使用</span>
+        <span class="text-[12px] text-[#86909c]">{{ getFlowPercent() }}%</span>
+      </div>
+      <Progress :percent="getFlowPercent()" size="small" :show-info="false" />
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">到期时间</span>
+      <span class="text-[13px] font-[500]">{{
+        packageInfo?.expectedExpireTime || '-'
+      }}</span>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/SessionDiagnosisCard.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/SessionDiagnosisCard.vue
new file mode 100644
index 0000000..a9be4a7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/components/SessionDiagnosisCard.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { SimDiagnoseInfoRes } from '#/api/iotlcm/tSimDiagnose/type';
+
+import { diagnosisSessionStatusDisplay } from '../display';
+
+defineOptions({
+  name: 'SessionDiagnosisCard',
+});
+
+interface Props {
+  session: SimDiagnoseInfoRes['session'] | null;
+}
+
+const props = defineProps<Props>();
+
+// 接入方式映射
+const ratMap: Record<string, string> = {
+  '1': '3G',
+  '2': '2G',
+  '3': '4G',
+  '4': '5G',
+  '5': 'NB-IOT',
+  '6': '4G',
+  '7': '5G-NSA',
+  '8': 'NB-IOT',
+  '9': '电信NB',
+  '10': '5G NSA',
+  '11': '联通NB',
+  '12': '联通4G',
+  '13': '电信4G',
+  '14': 'RedCap',
+  '51': '5G SA',
+  '58': 'RedCap',
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">APN</span>
+      <span class="text-[13px] font-[500]">{{ session?.apnId || '-' }}</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">IPV4</span>
+      <span class="text-[13px] font-[500]">{{ session?.ipv4 || '-' }}</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">IPV6</span>
+      <span class="text-[13px] font-[500]">{{ session?.ipv6 || '-' }}</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">IPV6前缀</span>
+      <span class="text-[13px] font-[500]">{{
+        session?.ipv6Prefix || '-'
+      }}</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">接入方式</span>
+      <span class="text-[13px] font-[500]">{{
+        ratMap[session?.rat || ''] || session?.rat || '-'
+      }}</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">会话状态</span>
+      <span class="text-[13px] font-[500]">{{
+        diagnosisSessionStatusDisplay(session?.status)
+      }}</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">会话建立时间</span>
+      <span class="text-[13px] font-[500]">{{
+        session?.createTime || '-'
+      }}</span>
+    </div>
+    <div class="flex items-center justify-between">
+      <span class="text-[13px] text-[#86909c]">近30天最新终端使用IMEI</span>
+      <span class="text-[13px] font-[500]">{{ session?.imei || '-' }}</span>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/display.test.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/display.test.ts
new file mode 100644
index 0000000..03a38f5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/display.test.ts
@@ -0,0 +1,172 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  communicationModuleDisplayMessage,
+  diagnosisDataServiceDisplay,
+  diagnosisOnlineStatusDisplay,
+  diagnosisPanelStatus,
+  diagnosisSessionStatusDisplay,
+  regionCacheDisplayMessage,
+  resolveDiagnosisOnlineStatus,
+} from './display';
+
+describe('在线状态展示', () => {
+  it('未知、缺失或非法状态统一显示横线', () => {
+    for (const status of [
+      '2',
+      'UNKNOWN',
+      '',
+      'unexpected',
+      'constructor',
+      'toString',
+      '__proto__',
+    ]) {
+      expect(diagnosisOnlineStatusDisplay(status)).toBe('-');
+    }
+    for (const status of [
+      '-2',
+      '02',
+      '2',
+      'UNKNOWN',
+      '',
+      'unexpected',
+      'constructor',
+      'toString',
+      '__proto__',
+    ]) {
+      expect(diagnosisSessionStatusDisplay(status)).toBe('-');
+    }
+    expect(diagnosisOnlineStatusDisplay()).toBe('-');
+    expect(diagnosisSessionStatusDisplay()).toBe('-');
+  });
+  it('保留明确的在线、离线和不支持状态', () => {
+    expect(diagnosisOnlineStatusDisplay('1')).toBe('在线');
+    expect(diagnosisOnlineStatusDisplay('0')).toBe('离线');
+    expect(diagnosisSessionStatusDisplay('0')).toBe('在线');
+    expect(diagnosisSessionStatusDisplay('-1')).toBe('离线');
+    expect(diagnosisSessionStatusDisplay('UNSUPPORTED')).toBe('不支持');
+  });
+});
+
+describe('数据服务来源隔离', () => {
+  it('电信展示断网状态，不使用 APN 开关值代替', () => {
+    expect(
+      diagnosisDataServiceDisplay({
+        dataServiceSource: 'network_block',
+        netBlockStatus: '1',
+        dataStatus: '1',
+      }),
+    ).toBe('已断网');
+    expect(
+      diagnosisDataServiceDisplay({
+        dataServiceSource: 'network_block',
+        netBlockStatus: '0',
+        dataStatus: '0',
+      }),
+    ).toBe('未断网');
+  });
+  it('电信缺少断网状态时显示横线，不回退 APN 开关', () => {
+    expect(
+      diagnosisDataServiceDisplay({
+        dataServiceSource: 'network_block',
+        dataStatus: '1',
+      }),
+    ).toBe('-');
+    expect(
+      diagnosisDataServiceDisplay({
+        dataServiceSource: 'network_block',
+        netBlockStatus: '2',
+      }),
+    ).toBe('-');
+  });
+  it('移动仍使用 APN 开停状态', () => {
+    expect(
+      diagnosisDataServiceDisplay({
+        dataServiceSource: 'apn',
+        dataStatus: '1',
+      }),
+    ).toBe('开启');
+    expect(
+      diagnosisDataServiceDisplay({
+        dataServiceSource: 'apn',
+        dataStatus: '0',
+      }),
+    ).toBe('关闭');
+    expect(diagnosisDataServiceDisplay({})).toBe('-');
+  });
+});
+
+describe('通信服务分项查询提示', () => {
+  it('终端 IMEI 缺数据不误报为整个通信服务无数据', () => {
+    expect(communicationModuleDisplayMessage('imei', '查询不到信息')).toBe(
+      '终端IMEI：查询不到信息',
+    );
+    expect(
+      diagnosisPanelStatus([
+        { status: 'success' },
+        { status: 'success' },
+        { status: 'error', message: '查询不到信息' },
+      ]),
+    ).toBe('partial');
+  });
+
+  it('数据服务和在线会话失败仍准确标注来源', () => {
+    expect(
+      communicationModuleDisplayMessage('dataService', '查询不到信息'),
+    ).toBe('数据服务：查询不到信息');
+    expect(
+      communicationModuleDisplayMessage(
+        'session',
+        '查询暂时未完成，请稍后重试',
+      ),
+    ).toBe('在线会话：查询暂时未完成，请稍后重试');
+  });
+
+  it('成功无提示且不改变其他模块提示', () => {
+    expect(communicationModuleDisplayMessage('imei', '  ')).toBe('');
+    expect(
+      communicationModuleDisplayMessage('region', '区域限制查询时间：14:30'),
+    ).toBe('区域限制查询时间：14:30');
+  });
+});
+
+describe('智能诊断区域限制提示', () => {
+  it('展示缓存结果的查询时间和下次可查时间', () => {
+    expect(
+      regionCacheDisplayMessage({
+        status: 'cached',
+        updatedAt: '14:30（10分钟前）',
+        message:
+          '运营商一小时内只能查询一次，当前展示最近一次查询结果。15:30后可再次查看',
+      }),
+    ).toBe(
+      '区域限制查询时间：14:30（10分钟前）；运营商一小时内只能查询一次，当前展示最近一次查询结果。15:30后可再次查看',
+    );
+  });
+
+  it('展示首次查询时间，不将失败结果当成缓存', () => {
+    expect(
+      regionCacheDisplayMessage({
+        status: 'success',
+        updatedAt: '14:30',
+        message: '15:30后可再次查看',
+      }),
+    ).toBe('区域限制查询时间：14:30；15:30后可再次查看');
+    expect(
+      regionCacheDisplayMessage({
+        status: 'error',
+        reason: 'rate_limited',
+        updatedAt: '14:30',
+      }),
+    ).toBe('');
+  });
+
+  it('以实时会话状态优先于汇总在线状态', () => {
+    expect(resolveDiagnosisOnlineStatus('0', '0')).toBe('1');
+    expect(resolveDiagnosisOnlineStatus('1', '-1')).toBe('0');
+    expect(resolveDiagnosisOnlineStatus('1', '-2')).toBe('2');
+    expect(resolveDiagnosisOnlineStatus('1', undefined)).toBe('1');
+    expect(resolveDiagnosisOnlineStatus('1', 'unexpected')).toBe('2');
+    expect(resolveDiagnosisOnlineStatus('1', 'UNSUPPORTED')).toBe('2');
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/display.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/display.ts
new file mode 100644
index 0000000..78456e4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/display.ts
@@ -0,0 +1,147 @@
+import type {
+  SimDiagnoseInfo,
+  SimDiagnoseModuleItem,
+} from '#/api/iotlcm/tSimDiagnose/type';
+
+export function diagnosisOnlineStatusDisplay(status?: null | string): string {
+  const labels: Record<string, string> = { '0': '离线', '1': '在线' };
+  const value = String(status ?? '').trim();
+  return Object.prototype.hasOwnProperty.call(labels, value)
+    ? labels[value]
+    : '-';
+}
+
+export function diagnosisSessionStatusDisplay(status?: null | string): string {
+  const labels: Record<string, string> = {
+    '0': '在线',
+    '01': '在线',
+    ONLINE: '在线',
+    '-1': '离线',
+    '00': '离线',
+    OFFLINE: '离线',
+    UNSUPPORTED: '不支持',
+  };
+  const value = String(status ?? '').trim();
+  return Object.prototype.hasOwnProperty.call(labels, value)
+    ? labels[value]
+    : '-';
+}
+
+export function diagnosisDataServiceDisplay(
+  info?: null | SimDiagnoseInfo,
+): string {
+  const networkBlock = info?.dataServiceSource === 'network_block';
+  const labels: Record<string, string> = networkBlock
+    ? { '0': '未断网', '1': '已断网' }
+    : { '0': '关闭', '1': '开启', '-1': '未知' };
+  const status = networkBlock ? info?.netBlockStatus : info?.dataStatus;
+  const value = String(status ?? '').trim();
+  return Object.prototype.hasOwnProperty.call(labels, value)
+    ? labels[value]
+    : '-';
+}
+
+export function communicationModuleDisplayMessage(
+  key: string,
+  message: string,
+): string {
+  const value = message.trim();
+  if (!value) return '';
+  const labels: Record<string, string> = {
+    dataService: '数据服务',
+    session: '在线会话',
+    imei: '终端IMEI',
+  };
+  const label = labels[key];
+  return label ? `${label}：${value}` : value;
+}
+
+export function mergeDiagnosisFlowInfo(
+  current: SimDiagnoseInfo,
+  incoming: SimDiagnoseInfo,
+): SimDiagnoseInfo {
+  const usedFlowMb = incoming.usedFlowMb;
+  const total = current.packageTotalFlowMb;
+  const remainFlowMb =
+    incoming.remainFlowMb ??
+    (typeof usedFlowMb === 'number' &&
+    Number.isFinite(usedFlowMb) &&
+    typeof total === 'number' &&
+    Number.isFinite(total)
+      ? Math.max(0, total - usedFlowMb)
+      : undefined);
+  return {
+    ...current,
+    usedFlowMb,
+    remainFlowMb,
+    flowSyncTime: incoming.flowSyncTime,
+  };
+}
+
+export function regionCacheDisplayMessage(
+  item?: SimDiagnoseModuleItem,
+): string {
+  if (
+    (item?.status !== 'success' && item?.status !== 'cached') ||
+    !item.updatedAt?.trim()
+  ) {
+    return '';
+  }
+  const message = item.message?.trim();
+  return `区域限制查询时间：${item.updatedAt.trim()}${message ? `；${message}` : ''}`;
+}
+
+export function resolveDiagnosisOnlineStatus(
+  infoStatus?: null | string,
+  sessionStatus?: null | string,
+): string {
+  switch (String(sessionStatus ?? '').trim()) {
+    case '-2':
+    case '02':
+    case '2':
+    case 'UNKNOWN': {
+      return '2';
+    }
+    case '-1':
+    case '00':
+    case 'OFFLINE': {
+      return '0';
+    }
+    case '0':
+    case '01':
+    case 'ONLINE': {
+      return '1';
+    }
+    default: {
+      return String(sessionStatus ?? '').trim()
+        ? '2'
+        : String(infoStatus ?? '').trim();
+    }
+  }
+}
+
+export type PanelStatus =
+  | 'error'
+  | 'partial'
+  | 'skipped'
+  | 'success'
+  | 'warning';
+
+export function diagnosisPanelStatus(
+  items: Array<SimDiagnoseModuleItem | undefined>,
+): PanelStatus {
+  const hasMissing =
+    items.length === 0 ||
+    items.some((item) => !item || item.reason === 'no_data');
+  const hasError = items.some((item) => item?.status === 'error');
+  const hasSuccess = items.some(
+    (item) => item?.status === 'success' || item?.status === 'cached',
+  );
+  const hasSkipped = items.some((item) => item?.status === 'skipped');
+  if (hasError) return hasSuccess || hasSkipped ? 'partial' : 'error';
+  if (hasMissing) return hasSuccess ? 'partial' : 'warning';
+  if (hasSkipped) return hasSuccess ? 'partial' : 'skipped';
+  if (items.some((item) => item?.cached || item?.status === 'cached'))
+    return 'warning';
+  return hasSuccess ? 'success' : 'warning';
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/index.vue
new file mode 100644
index 0000000..de7f0c9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/index.vue
@@ -0,0 +1,1838 @@
+<script setup lang="ts">
+import type { PanelStatus } from './display';
+
+import type {
+  SimDiagnoseFlowRes,
+  SimDiagnoseInfoRes,
+  SimDiagnoseModuleItem,
+} from '#/api/iotlcm/tSimDiagnose/type';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { usePreferences } from '@vben/preferences';
+
+import { Button, Input, message, Spin } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  GetSimDiagnoseFlow,
+  GetSimDiagnoseInfo,
+} from '#/api/iotlcm/tSimDiagnose';
+
+import FlowChartCard from './components/FlowChartCard.vue';
+import {
+  communicationModuleDisplayMessage,
+  diagnosisDataServiceDisplay,
+  diagnosisOnlineStatusDisplay,
+  diagnosisPanelStatus,
+  mergeDiagnosisFlowInfo,
+  regionCacheDisplayMessage,
+  resolveDiagnosisOnlineStatus,
+} from './display';
+import { querySchema } from './model';
+
+type PanelKey = 'card' | 'communication' | 'flow' | 'network' | 'policy';
+
+interface FieldItem {
+  label: string;
+  status?: PanelStatus;
+  value: string;
+}
+
+interface TableRowItem {
+  cells: string[];
+  status?: PanelStatus;
+}
+
+interface DiagnosisPanel {
+  fields?: FieldItem[];
+  headers?: string[];
+  key: PanelKey;
+  moduleKeys?: string[];
+  message?: string;
+  rows?: TableRowItem[];
+  requestStatus: PanelStatus;
+  status: PanelStatus;
+  suggestion?: string;
+  title: string;
+}
+
+const route = useRoute();
+const { isDark } = usePreferences();
+const loading = ref(false);
+let diagnosisLoadSeq = 0;
+const hasDiagnosed = ref(false);
+const queryInput = ref('');
+const lastDiagnosedIdentifier = ref('');
+const activePanelKeys = ref<PanelKey[]>([
+  'card',
+  'communication',
+  'flow',
+  'policy',
+  'network',
+]);
+
+const cardInfo = ref<null | SimDiagnoseInfoRes>(null);
+const infoError = ref('');
+const flowError = ref('');
+
+const flowData7d = ref<null | SimDiagnoseFlowRes>(null);
+const flowData30d = ref<null | SimDiagnoseFlowRes>(null);
+const flowData6m = ref<null | SimDiagnoseFlowRes>(null);
+const flowRefreshing = ref(false);
+
+const cardStatusMap: Record<string, string> = {
+  '0': '未知',
+  '1': '待激活',
+  '2': '已激活',
+  '4': '已停机',
+  '6': '可测试',
+  '7': '库存',
+  '8': '预销户',
+  '9': '已销户',
+};
+
+const regionLimitStatusMap: Record<string, string> = {
+  '0': '未触发区域限制',
+  '1': '已触发区域限制',
+  '2': '网络侧暂时无法判断',
+};
+
+const regionLimitTriggerStatusMap: Record<string, string> = {
+  '-': '网络侧无法判断',
+  '0': '已断网',
+  '1': '未断网',
+  '2': '未知',
+};
+
+const regionLimitTypeMap: Record<string, string> = {
+  '1': '省级区域限制',
+  '2': '省级首话单区域限制',
+  '3': '客户自定义省级限制',
+  '4': '客户自定义园区级限制',
+};
+
+const humanLimitStatusMap: Record<string, string> = {
+  '0': '限制访问',
+  '1': '未限制',
+  '2': '未知',
+  '3': '运营商暂不支持',
+};
+
+function resolveRouteQueryIdentifier() {
+  const queryValue = route.query.queryCode ?? route.query.identifier;
+  return String(
+    Array.isArray(queryValue) ? queryValue[0] : (queryValue ?? ''),
+  ).trim();
+}
+
+async function syncQueryFormValue(identifier: string) {
+  queryInput.value = identifier;
+  await nextTick();
+  await queryFormApi.setValues({ identifier });
+}
+
+const ratMap: Record<string, string> = {
+  '1': '3G',
+  '2': '2G',
+  '3': '4G',
+  '4': '5G',
+  '5': 'NB-IOT',
+  '6': '4G',
+  '7': '5G-NSA',
+  '8': 'NB-IOT',
+  '9': '电信 NB',
+  '10': '5G NSA',
+  '11': '联通 NB',
+  '12': '联通 4G',
+  '13': '电信 4G',
+  '14': 'RedCap',
+  '51': '5G SA',
+  '58': 'RedCap',
+};
+
+const unavailableDisplayValues = new Set([
+  '--',
+  '上游未返回',
+  '未停机或系统暂无停机原因',
+  '未查询到会话',
+  '网络侧无法判断',
+  '运营商暂不支持',
+]);
+
+const unavailableStopReasons = new Set([
+  '000000000000',
+  '暂无停机原因',
+  '未停机',
+  '未停机或系统暂无停机原因',
+]);
+
+function hasDisplayStopReason(value?: null | string) {
+  const trimmed = String(value ?? '').trim();
+  return trimmed !== '' && !unavailableStopReasons.has(trimmed);
+}
+
+const frozenStatusMap: Record<string, string> = {
+  '0': '未冻结',
+  '1': '已冻结',
+  '2': '不支持查询',
+  未冻结: '未冻结',
+  已冻结: '已冻结',
+  不支持查询: '不支持查询',
+};
+
+function normalizeFrozenStatus(status?: null | string) {
+  const value = String(status ?? '').trim();
+  if (['1', 'true', '冻结', '已冻结', '是'].includes(value)) {
+    return '已冻结';
+  }
+  if (['0', 'false', '否', '未冻结'].includes(value)) {
+    return '未冻结';
+  }
+  if (['2', '不支持查询'].includes(value)) {
+    return '不支持查询';
+  }
+  return value;
+}
+
+function isFrozenStatus(status?: null | string) {
+  return normalizeFrozenStatus(status) === '已冻结';
+}
+
+function normalizeInfoData(res: any): null | SimDiagnoseInfoRes {
+  const data = res?.data ?? res;
+  if (!data) {
+    return null;
+  }
+  return {
+    info: data.info ?? null,
+    modules: data.modules ?? {},
+    package: data.package ?? null,
+    session: data.session ?? null,
+  };
+}
+
+function normalizeFlowData(res: any): SimDiagnoseFlowRes {
+  const data = res?.data ?? res;
+  return {
+    flow: Array.isArray(data?.flow) ? data.flow.map(Number) : [],
+    flowAvailable: Array.isArray(data?.flowAvailable)
+      ? data.flowAvailable
+      : undefined,
+    times: Array.isArray(data?.times) ? data.times : [],
+    unit: data?.unit || 'MB',
+  };
+}
+
+function text(value?: null | number | string): string {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  const trimmed = String(value).trim();
+  return trimmed || '-';
+}
+
+function mappedText(
+  map: Record<string, string>,
+  value?: null | string,
+): string {
+  const key = value || '';
+  if (Object.prototype.hasOwnProperty.call(map, key)) {
+    return map[key] ?? text(value);
+  }
+  return text(value);
+}
+
+function operatingStatusText(value?: null | string) {
+  if (value === '0') {
+    return '关机';
+  }
+  if (value === '1') {
+    return '开机';
+  }
+  return '-';
+}
+
+function deviceStatusText(value?: null | string) {
+  if (value === '1') {
+    return '正常';
+  }
+  if (value === '0') {
+    return '异常/不可用';
+  }
+  return '-';
+}
+
+function hasDisplayValue(value?: null | number | string) {
+  if (value === undefined || value === null) {
+    return false;
+  }
+  const trimmed = String(value).trim();
+  return trimmed !== '' && !unavailableDisplayValues.has(trimmed);
+}
+
+function isDisplayField(item: FieldItem) {
+  return hasDisplayValue(item.value);
+}
+
+function isDisplayRow(row: TableRowItem) {
+  return row.cells.every((cell) => hasDisplayValue(cell));
+}
+
+function errorStatus(isError: boolean): PanelStatus | undefined {
+  return isError ? 'error' : undefined;
+}
+
+function moduleOf(key: string): SimDiagnoseModuleItem | undefined {
+  return cardInfo.value?.modules?.[key];
+}
+
+function panelStatus(keys: string[]): PanelStatus {
+  return diagnosisPanelStatus(keys.map((key) => moduleOf(key)));
+}
+
+function customerDisplayMessage(item?: SimDiagnoseModuleItem) {
+  if (item?.reason === 'rate_limited')
+    return '区域限制查询受运营商频率限制，暂未取得有效结果，请在上次查询60分钟后再试';
+  const message = String(item?.message ?? '').trim();
+  if (!message) {
+    return '';
+  }
+  const cleanedMessage = customerModuleMessage(item);
+  if (!cleanedMessage) {
+    return '';
+  }
+  if (isUsefulBusinessMessage(cleanedMessage)) {
+    return cleanedMessage;
+  }
+  if (isDuplicateStatusMessage(cleanedMessage)) {
+    return '';
+  }
+  const lower = message.toLowerCase();
+  if (
+    lower.includes('context deadline exceeded') ||
+    lower.includes('client.timeout') ||
+    lower.includes('dial tcp') ||
+    lower.includes('connection refused') ||
+    lower.includes('request failed') ||
+    lower.includes('timeout') ||
+    lower.includes('http://') ||
+    lower.includes('https://') ||
+    lower.includes('token')
+  ) {
+    return '查询暂时未完成，请稍后重试';
+  }
+  if (
+    message.includes('系统无记录') ||
+    message.includes('请检查输入参数是否正确') ||
+    message.includes('系统忙') ||
+    message.includes('请稍后再试') ||
+    message.includes('暂无数据') ||
+    message.includes('未查询到') ||
+    message.includes('无有效数据') ||
+    message.includes('不支持查询能力')
+  ) {
+    return '';
+  }
+  if (
+    message.includes('上游') ||
+    message.includes('缓存') ||
+    message.includes('60分钟') ||
+    message.includes('未返回有效结果') ||
+    message.includes('建议解决方案') ||
+    message.includes('通道未实例化') ||
+    message.includes('暂不提供') ||
+    message.includes('暂未提供') ||
+    message.includes('未提供独立') ||
+    message.includes('不支持查询') ||
+    message.includes('运营商暂不支持') ||
+    message.includes('暂不提供当前达量限速查询能力') ||
+    message.includes('暂未提供当前达量限速查询能力') ||
+    message.includes('不提供查询能力')
+  ) {
+    return '';
+  }
+  return cleanedMessage;
+}
+
+function isUsefulBusinessMessage(message: string) {
+  return (
+    message.includes('订购关系鉴权不通过') ||
+    message.includes('接口是否订购') ||
+    message.includes('已过期')
+  );
+}
+
+function isDuplicateStatusMessage(message: string) {
+  return [
+    /^SIM卡状态[:：]/,
+    /^停机原因[:：]/,
+    /^冻结状态[:：]/,
+    /^通信服务[:：]/,
+    /^在线状态[:：]/,
+    /^会话状态[:：]/,
+    /^当前存在策略限制$/,
+    /^区域限制[:：]/,
+    /^人联网访问[:：]/,
+    /^开关机状态[:：]/,
+    /^设备状态[:：]/,
+    /^机卡绑定状态[:：]/,
+  ].some((pattern) => pattern.test(message));
+}
+
+function customerModuleMessage(item?: SimDiagnoseModuleItem) {
+  const message = String(item?.message ?? '').trim();
+  if (!message) {
+    return '';
+  }
+  if (
+    message.includes('系统无记录') ||
+    message.includes('请检查输入参数是否正确') ||
+    message.includes('系统忙') ||
+    message.includes('请稍后再试') ||
+    message.includes('暂无数据') ||
+    message.includes('未查询到') ||
+    message.includes('无有效数据') ||
+    message.includes('不支持查询能力')
+  ) {
+    return '';
+  }
+  return message
+    .replaceAll('区域限制结果来自缓存：', '')
+    .replaceAll('区域限制结果来自缓存:', '')
+    .replaceAll('区域限制结果来自缓存', '')
+    .replaceAll('来自缓存：', '')
+    .replaceAll('来自缓存:', '')
+    .replaceAll('来自缓存', '')
+    .trim();
+}
+
+function panelMessage(keys: string[]) {
+  const seen = new Set<string>();
+  return keys
+    .map((key) =>
+      key === 'region'
+        ? regionCacheDisplayMessage(moduleOf(key)) ||
+          customerDisplayMessage(moduleOf(key))
+        : communicationModuleDisplayMessage(
+            key,
+            customerDisplayMessage(moduleOf(key)),
+          ),
+    )
+    .filter((item): item is string => !!item)
+    .filter((item) => {
+      if (seen.has(item)) {
+        return false;
+      }
+      seen.add(item);
+      return true;
+    })
+    .join('；');
+}
+
+function panelHasDisplayContent(panel: DiagnosisPanel) {
+  const hasFields = panel.fields?.some((item) => isDisplayField(item)) ?? false;
+  const hasRows = panel.rows?.some((row) => isDisplayRow(row)) ?? false;
+  const hasModuleInfo = (panel.moduleKeys ?? []).some((key) => !!moduleOf(key));
+  const message = String(panel.message ?? '').trim();
+  return (
+    hasFields ||
+    hasRows ||
+    hasModuleInfo ||
+    panel.requestStatus === 'error' ||
+    panel.requestStatus === 'skipped' ||
+    (!!message &&
+      !!customerDisplayMessage({ message } as SimDiagnoseModuleItem))
+  );
+}
+
+function uniqueStrings(values: string[]) {
+  return [
+    ...new Set(
+      values.map((item) => String(item).trim()).filter((item) => !!item),
+    ),
+  ];
+}
+
+function summarizeIssues(issues: string[], limit = 3) {
+  const unique = uniqueStrings(issues);
+  if (unique.length === 0) {
+    return '';
+  }
+  if (unique.length <= limit) {
+    return unique.join('、');
+  }
+  return `${unique.slice(0, limit).join('、')} 等`;
+}
+
+function collectCardIssues(info: null | SimDiagnoseInfoRes['info']) {
+  const issues: string[] = [];
+  if (!info) {
+    return issues;
+  }
+
+  const cardStatus = String(info.status ?? '').trim();
+  if (cardStatus && cardStatus !== '2') {
+    issues.push(`SIM卡状态：${cardStatusMap[cardStatus] || cardStatus}`);
+  }
+  if (hasDisplayStopReason(info.stopReason)) {
+    issues.push(`停机原因：${text(info.stopReason)}`);
+  }
+  if (isFrozenStatus(info.frozenStatus)) {
+    issues.push('冻结状态：已冻结');
+  }
+
+  return issues;
+}
+
+function collectCommunicationIssues(
+  info: null | SimDiagnoseInfoRes['info'],
+  session: null | SimDiagnoseInfoRes['session'],
+) {
+  const issues: string[] = [];
+  if (!info) {
+    return issues;
+  }
+
+  if (info.dataServiceSource === 'network_block') {
+    if (info.netBlockStatus === '1') issues.push('数据服务：已断网');
+  } else if (info.dataStatus === '0') {
+    issues.push('通信服务：已关闭');
+  }
+  const sessionStatus = String(session?.status ?? '').trim();
+  const onlineStatus = resolveDiagnosisOnlineStatus(
+    info.onlineStatus,
+    sessionStatus,
+  );
+  if (onlineStatus === '0') {
+    issues.push('在线状态：离线');
+  }
+  if (sessionStatus === '-2') {
+    issues.push('在线状态：未查询到会话');
+  }
+
+  return issues;
+}
+
+function isRegionLimitTriggered(info?: null | SimDiagnoseInfoRes['info']) {
+  if (info?.regionLimitOrderStatus === '1') {
+    return false;
+  }
+  if (info?.regionLimitOrderStatus === '0') {
+    return info.regionLimitTriggerStatus === '0';
+  }
+  return info?.regionLimitStatus === '1';
+}
+
+function regionLimitConclusion(info?: null | SimDiagnoseInfoRes['info']) {
+  if (info?.regionLimitOrderStatus === '1') {
+    return '未订购区域限制业务';
+  }
+  if (info?.regionLimitOrderStatus === '0') {
+    if (info.regionLimitTriggerStatus === '0') {
+      return '已触发区域限制并断网';
+    }
+    if (info.regionLimitTriggerStatus === '1') {
+      return '未触发区域限制断网';
+    }
+    return '网络侧暂时无法判断';
+  }
+  return mappedText(regionLimitStatusMap, info?.regionLimitStatus);
+}
+
+function collectPolicyIssues(info: null | SimDiagnoseInfoRes['info']) {
+  const issues: string[] = [];
+  if (!info) {
+    return issues;
+  }
+
+  if (isRegionLimitTriggered(info) || info.humanLimitStatus === '0') {
+    issues.push('当前存在策略限制');
+  }
+  if (isRegionLimitTriggered(info)) {
+    issues.push('区域限制：已触发并断网');
+  }
+  if (info.humanLimitStatus === '0') {
+    issues.push('人联网访问：受限');
+  }
+  if (info.rateLimitStatus === '0') {
+    issues.push('达量限速：已触发');
+  }
+
+  return issues;
+}
+
+function collectNetworkIssues(info: null | SimDiagnoseInfoRes['info']) {
+  const issues: string[] = [];
+  if (!info) {
+    return issues;
+  }
+
+  if (info.operatingStatus === '0') {
+    issues.push('开关机状态：关机');
+  }
+  if (info.deviceStatus === '0') {
+    issues.push('设备状态：异常/不可用');
+  }
+  if (info.imeiStatus === '0') {
+    issues.push('机卡绑定状态：机卡分离');
+  }
+
+  return issues;
+}
+
+function buildPanelStatus(requestStatus: PanelStatus, issues: string[]) {
+  const summary = summarizeIssues(issues);
+  if (requestStatus === 'error') {
+    return {
+      status: 'error' as PanelStatus,
+    };
+  }
+  if (requestStatus === 'skipped') {
+    return {
+      status: 'skipped' as PanelStatus,
+    };
+  }
+  if (summary) {
+    return {
+      status: 'error' as PanelStatus,
+    };
+  }
+  if (requestStatus === 'warning' || requestStatus === 'partial') {
+    return {
+      status: 'warning' as PanelStatus,
+    };
+  }
+  return {
+    status: 'success' as PanelStatus,
+  };
+}
+
+function panelDisplayMessage(
+  requestStatus: PanelStatus,
+  rawMessage: string,
+  fallbackText = '',
+) {
+  const message = String(rawMessage ?? '').trim();
+  if (message) {
+    return message;
+  }
+
+  if (fallbackText) {
+    return fallbackText;
+  }
+
+  if (requestStatus === 'error') {
+    return '查询暂时未完成，请稍后重试';
+  }
+  if (requestStatus === 'skipped') {
+    return '不适用';
+  }
+  if (requestStatus === 'partial') {
+    return '部分查询未完成，不能据此判断全部正常';
+  }
+  if (requestStatus === 'warning') {
+    return '待确认';
+  }
+  return '';
+}
+
+function statusIcon(status: PanelStatus) {
+  if (status === 'success') {
+    return 'mdi:check-circle';
+  }
+  if (status === 'error') {
+    return 'mdi:close-circle';
+  }
+  if (status === 'skipped') {
+    return 'mdi:minus-circle';
+  }
+  return 'mdi:alert-circle';
+}
+
+function togglePanel(key: PanelKey) {
+  if (activePanelKeys.value.includes(key)) {
+    activePanelKeys.value = activePanelKeys.value.filter(
+      (item) => item !== key,
+    );
+    return;
+  }
+  activePanelKeys.value = [...activePanelKeys.value, key];
+}
+
+function isPanelOpen(key: PanelKey) {
+  return activePanelKeys.value.includes(key);
+}
+
+function formatFlowMb(value?: null | number) {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  const numericValue = Number(value);
+  if (!Number.isFinite(numericValue)) {
+    return '-';
+  }
+  if (Math.abs(numericValue) >= 1024) {
+    return `${(numericValue / 1024).toFixed(2)} GB`;
+  }
+  return `${numericValue.toFixed(2)} MB`;
+}
+
+function regionLimitRows(info?: null | SimDiagnoseInfoRes['info']) {
+  const rows: TableRowItem[] = [];
+
+  if (info?.regionLimitOrderStatus !== '1') {
+    rows.push({
+      cells: ['区域限制', regionLimitConclusion(info)],
+      status: isRegionLimitTriggered(info) ? 'error' : undefined,
+    });
+  }
+
+  if (info?.regionLimitOrderStatus === '0') {
+    rows.push({
+      cells: [
+        '区域限制断网',
+        mappedText(regionLimitTriggerStatusMap, info.regionLimitTriggerStatus),
+      ],
+      status: info.regionLimitTriggerStatus === '0' ? 'error' : undefined,
+    });
+    if (
+      Object.prototype.hasOwnProperty.call(
+        regionLimitTypeMap,
+        info.regionLimitType || '',
+      )
+    ) {
+      rows.push({
+        cells: [
+          '区域限制类型',
+          mappedText(regionLimitTypeMap, info.regionLimitType),
+        ],
+      });
+    }
+    if (info.regionLimitArea) {
+      rows.push({ cells: ['限制区域', text(info.regionLimitArea)] });
+    }
+  }
+
+  rows.push(
+    {
+      cells: [
+        '人联网访问限制',
+        mappedText(humanLimitStatusMap, info?.humanLimitStatus),
+      ],
+      status: info?.humanLimitStatus === '0' ? 'error' : undefined,
+    },
+    {
+      cells: [
+        '达量限速',
+        mappedText(
+          { '0': '已触发', '1': '未触发', '2': '未知', '3': '不支持' },
+          info?.rateLimitStatus,
+        ),
+      ],
+      status: info?.rateLimitStatus === '0' ? 'error' : undefined,
+    },
+  );
+  if (info?.rateLimitReason)
+    rows.push({ cells: ['限速原因', text(info.rateLimitReason)] });
+  if (info?.rateLimitDetail)
+    rows.push({ cells: ['限速明细', text(info.rateLimitDetail)] });
+  return rows;
+}
+
+const identityItems = computed<FieldItem[]>(() =>
+  [
+    {
+      label: 'MSISDN',
+      value: text(cardInfo.value?.info?.msisdn),
+    },
+    {
+      label: 'ICCID',
+      value: text(cardInfo.value?.info?.iccid),
+    },
+    {
+      label: 'IMSI',
+      value: text(cardInfo.value?.info?.imsi),
+    },
+    {
+      label: '近30天最新终端使用IMEI',
+      value: text(cardInfo.value?.session?.imei),
+    },
+  ].filter((item) => hasDisplayValue(item.value)),
+);
+
+const hasCurrentFlowData = computed(
+  () =>
+    cardInfo.value?.info?.usedFlowMb !== undefined &&
+    cardInfo.value?.info?.usedFlowMb !== null,
+);
+
+function currentFlowMessage() {
+  if (hasCurrentFlowData.value) {
+    return '';
+  }
+  const module = moduleOf('flowUsage');
+  if (module?.status === 'success' || module?.status === 'cached') {
+    return '接口查询成功，但未返回流量数值';
+  }
+  return '';
+}
+
+const panels = computed<DiagnosisPanel[]>(() => {
+  const info = cardInfo.value?.info ?? null;
+  const session = cardInfo.value?.session ?? null;
+
+  const cardRequestStatus = panelStatus(['cardStatus', 'stopReason', 'frozen']);
+  const communicationRequestStatus = panelStatus([
+    'dataService',
+    'session',
+    'imei',
+  ]);
+  const hasCachedFlowData = hasCurrentFlowData.value;
+  const flowRequestStatus = panelStatus(['flowUsage']);
+  const policyRequestStatus = panelStatus(['basicInfo', 'region', 'rateLimit']);
+  const networkRequestStatus = panelStatus(['device', 'cardBind']);
+
+  const cardIssues = collectCardIssues(info);
+  const communicationIssues = collectCommunicationIssues(info, session);
+  let communicationSuggestion =
+    '请确认数据服务是否开启，必要时重新开通或复机。';
+  if (info?.dataServiceSource === 'network_block') {
+    communicationSuggestion =
+      '断网状态与在线会话独立判断；达量、区域限制等断网原因不能通过开启 APN 直接解除。';
+  } else if (info?.dataStatus === '1') {
+    communicationSuggestion =
+      '通信服务已开启；若仍无法联网，请继续查看网络连接和策略限制。';
+  }
+  const policyIssues = collectPolicyIssues(info);
+  const networkIssues = collectNetworkIssues(info);
+
+  const cardStatus = buildPanelStatus(cardRequestStatus, cardIssues);
+  const communicationStatus = buildPanelStatus(
+    communicationRequestStatus,
+    communicationIssues,
+  );
+  const policyStatus = buildPanelStatus(policyRequestStatus, policyIssues);
+  const networkStatus = buildPanelStatus(networkRequestStatus, networkIssues);
+  const flowStatus = buildPanelStatus(flowRequestStatus, []);
+  let policySuggestion =
+    policyRequestStatus === 'success'
+      ? '已返回的策略结果未发现限制。'
+      : '部分策略结果待确认，不能据此判断全部正常。';
+  if (
+    isRegionLimitTriggered(info) ||
+    info?.humanLimitStatus === '0' ||
+    info?.rateLimitStatus === '0'
+  ) {
+    policySuggestion = '当前策略存在限制，请核对区域限制或人联网访问限制。';
+  }
+
+  const items: DiagnosisPanel[] = [
+    {
+      fields: [
+        {
+          label: 'SIM卡状态',
+          status: errorStatus(!!info?.status && info.status !== '2'),
+          value: cardStatusMap[info?.status || ''] || text(info?.status),
+        },
+        {
+          label: '停机原因',
+          status: errorStatus(hasDisplayStopReason(info?.stopReason)),
+          value: hasDisplayStopReason(info?.stopReason)
+            ? text(info?.stopReason)
+            : '-',
+        },
+        {
+          label: '是否冻结',
+          status: errorStatus(isFrozenStatus(info?.frozenStatus)),
+          value: mappedText(
+            frozenStatusMap,
+            normalizeFrozenStatus(info?.frozenStatus),
+          ),
+        },
+        {
+          label: '冻结原因',
+          value: text(info?.frozenReason),
+        },
+        {
+          label: '冻结操作时间',
+          value: text(info?.frozenOperTime),
+        },
+      ],
+      key: 'card',
+      moduleKeys: ['cardStatus', 'stopReason', 'frozen'],
+      message: panelDisplayMessage(
+        cardRequestStatus,
+        panelMessage(['cardStatus', 'stopReason', 'frozen']),
+      ),
+      requestStatus: cardRequestStatus,
+      status: cardStatus.status,
+      suggestion:
+        info?.status === '2'
+          ? 'SIM卡已激活；停机原因和冻结状态请以对应查询结果为准。'
+          : '请先确认SIM卡是否停机、冻结、待激活或已销户。',
+      title: 'SIM卡状态',
+    },
+    {
+      fields: [
+        {
+          label: 'APN名称',
+          value: text(session?.apnId),
+        },
+        {
+          label: 'IPV4',
+          value: text(session?.ipv4),
+        },
+        {
+          label: 'IPV6',
+          value: text(session?.ipv6),
+        },
+        {
+          label: 'IPV6前缀',
+          value: text(session?.ipv6Prefix),
+        },
+        {
+          label: '数据服务',
+          status: errorStatus(
+            info?.dataServiceSource === 'network_block'
+              ? info.netBlockStatus === '1'
+              : info?.dataStatus === '0',
+          ),
+          value: diagnosisDataServiceDisplay(info),
+        },
+        {
+          label: '断网原因',
+          value:
+            info?.dataServiceSource === 'network_block'
+              ? text(info.netBlockReason)
+              : '-',
+        },
+        {
+          label: '在线状态',
+          status: errorStatus(
+            resolveDiagnosisOnlineStatus(
+              info?.onlineStatus,
+              session?.status,
+            ) === '0',
+          ),
+          value: diagnosisOnlineStatusDisplay(
+            resolveDiagnosisOnlineStatus(info?.onlineStatus, session?.status),
+          ),
+        },
+        {
+          label: '会话建立时间',
+          value: text(session?.createTime),
+        },
+        {
+          label: '接入方式',
+          value: ratMap[session?.rat || ''] || text(session?.rat),
+        },
+      ],
+      key: 'communication',
+      moduleKeys: ['dataService', 'session', 'imei'],
+      message: panelDisplayMessage(
+        communicationRequestStatus,
+        panelMessage(['dataService', 'session', 'imei']),
+      ),
+      requestStatus: communicationRequestStatus,
+      status: communicationStatus.status,
+      suggestion: communicationSuggestion,
+      title: '通信服务',
+    },
+    {
+      fields: [
+        {
+          label: '已用流量',
+          value: formatFlowMb(info?.usedFlowMb),
+        },
+        {
+          label: '同步时间',
+          value: text(info?.flowSyncTime),
+        },
+      ],
+      key: 'flow',
+      moduleKeys: ['flowUsage'],
+      message: hasCachedFlowData
+        ? ''
+        : panelDisplayMessage(
+            flowRequestStatus,
+            panelMessage(['flowUsage']),
+            currentFlowMessage(),
+          ),
+      requestStatus: flowRequestStatus,
+      status: flowStatus.status,
+      suggestion: '实时流量接口返回的已用流量显示在这里；历史趋势见下方图表。',
+      title: '实时流量',
+    },
+    {
+      headers: ['策略限制', '当前状态'],
+      key: 'policy',
+      moduleKeys: ['basicInfo', 'region', 'rateLimit'],
+      rows: regionLimitRows(info),
+      message: panelDisplayMessage(
+        policyRequestStatus,
+        panelMessage(['basicInfo', 'region', 'rateLimit']),
+      ),
+      requestStatus: policyRequestStatus,
+      status: policyStatus.status,
+      suggestion: policySuggestion,
+      title: '策略限制',
+    },
+    {
+      fields: [
+        {
+          label: '开关机状态',
+          status: errorStatus(info?.operatingStatus === '0'),
+          value: operatingStatusText(info?.operatingStatus),
+        },
+        {
+          label: '设备状态',
+          status: errorStatus(info?.deviceStatus === '0'),
+          value: deviceStatusText(info?.deviceStatus),
+        },
+        {
+          label: '机卡绑定状态',
+          status: errorStatus(info?.imeiStatus === '0'),
+          value: (() => {
+            if (info?.imeiStatus === '1') {
+              return '已绑定';
+            }
+            if (info?.imeiStatus === '0') {
+              return '机卡分离';
+            }
+            if (info?.imeiStatus === '2') {
+              return '未知';
+            }
+            return '-';
+          })(),
+        },
+      ],
+      key: 'network',
+      moduleKeys: ['device', 'cardBind'],
+      message: panelDisplayMessage(
+        networkRequestStatus,
+        panelMessage(['device', 'cardBind']),
+      ),
+      requestStatus: networkRequestStatus,
+      status: networkStatus.status,
+      suggestion:
+        info?.operatingStatus === '1' &&
+        info?.deviceStatus === '1' &&
+        info?.imeiStatus === '1'
+          ? '开关机状态、设备状态和机卡绑定未发现异常。'
+          : '请确认设备已开机、设备状态正常，必要时重启设备或检查机卡绑定。',
+      title: '网络连接',
+    },
+  ];
+  return items;
+});
+
+async function fetchFlowData(
+  identifier: string,
+  queryType: '6M' | '7d' | '30d',
+) {
+  const res = await GetSimDiagnoseFlow({
+    queryCode: identifier,
+    queryType,
+  });
+  return normalizeFlowData(res);
+}
+
+function getSettledFlowData(
+  result: PromiseSettledResult<SimDiagnoseFlowRes>,
+  label: string,
+) {
+  if (result.status === 'fulfilled') {
+    return result.value;
+  }
+  console.error(`${label}流量获取失败:`, result.reason);
+  const reason = result.reason as any;
+  const responseData = reason?.response?.data ?? reason?.data ?? reason ?? {};
+  const detail = String(
+    responseData?.message ?? responseData?.error ?? reason?.message ?? '',
+  ).trim();
+  flowError.value =
+    flowError.value || `${label}流量查询失败${detail ? `：${detail}` : ''}`;
+  return { flow: [], times: [], unit: 'MB' };
+}
+
+const [QueryForm, queryFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-[320px]',
+    },
+    labelWidth: 60,
+  },
+  handleSubmit: handleDiagnose,
+  layout: 'inline',
+  resetButtonOptions: {
+    show: false,
+  },
+  schema: querySchema,
+  showDefaultActions: true,
+  submitButtonOptions: {
+    content: '一键诊断',
+  },
+});
+
+async function handleDiagnose(values?: Record<string, any>) {
+  const identifier = (values?.identifier ?? queryInput.value ?? '').trim();
+  if (!identifier) {
+    message.error('请输入 MSISDN / ICCID / IMSI');
+    return;
+  }
+
+  const seq = ++diagnosisLoadSeq;
+  lastDiagnosedIdentifier.value = identifier;
+  loading.value = true;
+  hasDiagnosed.value = true;
+  cardInfo.value = null;
+  infoError.value = '';
+  flowError.value = '';
+  flowData7d.value = null;
+  flowData30d.value = null;
+  flowData6m.value = null;
+
+  try {
+    await syncQueryFormValue(identifier);
+    if (seq !== diagnosisLoadSeq) return;
+    try {
+      const infoRes = await GetSimDiagnoseInfo({ queryCode: identifier });
+      if (seq !== diagnosisLoadSeq) return;
+      cardInfo.value = normalizeInfoData(infoRes);
+      if (!cardInfo.value?.info) throw new Error('诊断接口未返回有效信息');
+    } catch (error: any) {
+      if (seq !== diagnosisLoadSeq) return;
+      console.error('获取诊断信息失败:', error);
+      const responseData = error?.response?.data ?? error?.data ?? error ?? {};
+      infoError.value = String(
+        responseData?.message ??
+          responseData?.error ??
+          error?.message ??
+          '查询暂时未完成，请稍后重试',
+      ).trim();
+    }
+
+    const [flow7dRes, flow30dRes, flow6mRes] = await Promise.allSettled([
+      fetchFlowData(identifier, '7d'),
+      fetchFlowData(identifier, '30d'),
+      fetchFlowData(identifier, '6M'),
+    ]);
+    if (seq !== diagnosisLoadSeq) return;
+    flowData7d.value = getSettledFlowData(flow7dRes, '近7天');
+    flowData30d.value = getSettledFlowData(flow30dRes, '近30天');
+    flowData6m.value = getSettledFlowData(flow6mRes, '近6个月');
+
+    const hasUnresolvedPanel = panels.value.some(
+      (panel) => panel.status !== 'success',
+    );
+    if (infoError.value || flowError.value || hasUnresolvedPanel) {
+      message.warning('诊断已返回，部分结果需确认，请查看模块状态');
+    } else {
+      message.success('诊断完成');
+    }
+  } finally {
+    if (seq === diagnosisLoadSeq) loading.value = false;
+  }
+}
+
+async function refreshCurrentFlow() {
+  const identifier = lastDiagnosedIdentifier.value;
+  if (!identifier || flowRefreshing.value || loading.value) return;
+  const seq = diagnosisLoadSeq;
+  flowRefreshing.value = true;
+  try {
+    const data = normalizeInfoData(
+      await GetSimDiagnoseInfo({ queryCode: identifier, onlyFlow: true }),
+    );
+    if (seq !== diagnosisLoadSeq) return;
+    if (!data?.info || !cardInfo.value?.info)
+      throw new Error('实时流量接口未返回有效信息');
+    const flowModule = data.modules?.flowUsage;
+    if (!flowModule) throw new Error('实时流量接口未返回模块结果');
+    cardInfo.value = {
+      ...cardInfo.value,
+      info: mergeDiagnosisFlowInfo(cardInfo.value.info, data.info),
+      modules: { ...cardInfo.value.modules, flowUsage: flowModule },
+    };
+    if (data.modules?.flowUsage?.status === 'error') {
+      message.warning('实时流量查询未完成，请稍后重试');
+    } else if (data.modules?.flowUsage?.status === 'skipped') {
+      message.warning('该通道暂不支持实时流量查询');
+    } else if (flowModule.cached || flowModule.status === 'cached') {
+      message.info('已获取上游返回的流量缓存数据');
+    } else {
+      message.success('实时流量已刷新');
+    }
+  } catch (error: any) {
+    if (seq !== diagnosisLoadSeq) return;
+    const responseData = error?.response?.data ?? error?.data ?? error ?? {};
+    message.error(
+      String(responseData?.message ?? error?.message ?? '实时流量刷新失败'),
+    );
+  } finally {
+    flowRefreshing.value = false;
+  }
+}
+
+onMounted(async () => {
+  const identifier = resolveRouteQueryIdentifier();
+  if (!identifier) {
+    return;
+  }
+  await handleDiagnose({ identifier });
+});
+
+watch(resolveRouteQueryIdentifier, async (nextValue, previousValue) => {
+  if (
+    !nextValue ||
+    nextValue === previousValue ||
+    nextValue === lastDiagnosedIdentifier.value
+  ) {
+    return;
+  }
+  await handleDiagnose({ identifier: nextValue });
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="diagnosis-page h-full p-4" :class="{ 'is-dark': isDark }">
+      <div v-if="hasDiagnosed" class="diagnosis-toolbar">
+        <QueryForm />
+      </div>
+
+      <Spin :spinning="loading">
+        <template v-if="!hasDiagnosed">
+          <section class="query-hero">
+            <div class="query-hero__center">
+              <div class="query-hero__visual" aria-hidden="true">
+                <div class="query-hero__device">
+                  <IconifyIcon icon="mdi:sim" />
+                </div>
+                <div class="query-hero__pulse is-left">
+                  <IconifyIcon icon="mdi:access-point" />
+                </div>
+                <div class="query-hero__pulse is-right">
+                  <IconifyIcon icon="mdi:chart-line" />
+                </div>
+              </div>
+              <h2>智能诊断</h2>
+              <div class="query-hero__search">
+                <Input
+                  v-model:value="queryInput"
+                  class="query-hero__input"
+                  placeholder="MSISDN、ICCID、IMSI"
+                  size="large"
+                  @press-enter="handleDiagnose()"
+                />
+                <Button
+                  class="query-hero__button"
+                  type="primary"
+                  size="large"
+                  :loading="loading"
+                  @click="handleDiagnose()"
+                >
+                  一键诊断
+                </Button>
+              </div>
+            </div>
+          </section>
+        </template>
+
+        <template v-else>
+          <section v-if="identityItems.length > 0" class="device-strip">
+            <div
+              v-for="item in identityItems"
+              :key="item.label"
+              class="device-strip__item"
+            >
+              <span>{{ item.label }}：</span>
+              <strong>{{ item.value }}</strong>
+            </div>
+          </section>
+
+          <div v-if="infoError" class="module-error">
+            {{ infoError }}
+          </div>
+
+          <section class="module-list">
+            <article
+              v-for="panel in panels.filter(panelHasDisplayContent)"
+              :key="panel.key"
+              class="diagnosis-module"
+            >
+              <div
+                class="diagnosis-module__header"
+                role="button"
+                tabindex="0"
+                @click="togglePanel(panel.key)"
+                @keydown.enter.self="togglePanel(panel.key)"
+                @keydown.space.prevent.self="togglePanel(panel.key)"
+              >
+                <span class="diagnosis-module__title">
+                  <IconifyIcon
+                    :icon="statusIcon(panel.status)"
+                    :class="`is-${panel.status}`"
+                  />
+                  {{ panel.title }}
+                  <Button
+                    v-if="panel.key === 'flow'"
+                    type="text"
+                    size="small"
+                    :loading="flowRefreshing"
+                    :disabled="loading"
+                    aria-label="刷新实时流量"
+                    @click.stop="refreshCurrentFlow"
+                  >
+                    <IconifyIcon v-if="!flowRefreshing" icon="mdi:refresh" />
+                  </Button>
+                </span>
+                <span class="diagnosis-module__right">
+                  <IconifyIcon
+                    icon="mdi:chevron-down"
+                    class="diagnosis-module__arrow"
+                    :class="{ 'is-open': isPanelOpen(panel.key) }"
+                  />
+                </span>
+              </div>
+
+              <div
+                v-show="isPanelOpen(panel.key)"
+                class="diagnosis-module__body"
+              >
+                <div v-if="panel.message" class="module-message">
+                  {{ panel.message }}
+                </div>
+
+                <div
+                  v-if="panel.fields && panel.fields.some(isDisplayField)"
+                  class="field-grid"
+                >
+                  <div
+                    v-for="field in panel.fields.filter(isDisplayField)"
+                    :key="field.label"
+                    class="field-grid__item"
+                    :class="field.status ? `is-${field.status}` : undefined"
+                  >
+                    <span>{{ field.label }}：</span>
+                    <strong>{{ field.value }}</strong>
+                  </div>
+                </div>
+
+                <div
+                  v-if="panel.rows && panel.rows.some(isDisplayRow)"
+                  class="plain-table"
+                >
+                  <div class="plain-table__head">
+                    <span v-for="header in panel.headers" :key="header">
+                      {{ header }}
+                    </span>
+                  </div>
+                  <div
+                    v-for="(row, rowIndex) in panel.rows.filter(isDisplayRow)"
+                    :key="rowIndex"
+                    class="plain-table__row"
+                    :class="row.status ? `is-${row.status}` : undefined"
+                  >
+                    <span
+                      v-for="(cell, cellIndex) in row.cells"
+                      :key="cellIndex"
+                    >
+                      {{ cell }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </section>
+
+          <div v-if="flowError" class="module-error flow-error">
+            {{ flowError }}
+          </div>
+
+          <section class="flow-trend">
+            <div class="flow-trend__title">
+              <IconifyIcon icon="mdi:chart-line" />
+              <span>流量使用趋势</span>
+            </div>
+            <div class="flow-trend__grid">
+              <article class="flow-chart-panel">
+                <div class="flow-chart-panel__title">
+                  <IconifyIcon icon="mdi:calendar-week" />
+                  <span>近7天</span>
+                </div>
+                <FlowChartCard :flow-data="flowData7d" />
+              </article>
+              <article class="flow-chart-panel">
+                <div class="flow-chart-panel__title">
+                  <IconifyIcon icon="mdi:calendar-month" />
+                  <span>近30天</span>
+                </div>
+                <FlowChartCard :flow-data="flowData30d" />
+              </article>
+              <article class="flow-chart-panel">
+                <div class="flow-chart-panel__title">
+                  <IconifyIcon icon="mdi:chart-timeline-variant" />
+                  <span>近6个月</span>
+                </div>
+                <FlowChartCard :flow-data="flowData6m" />
+              </article>
+            </div>
+          </section>
+        </template>
+      </Spin>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.diagnosis-page {
+  color: #1f2937;
+  background: #f3f6fa;
+}
+
+.diagnosis-page.is-dark {
+  color: #d9d9d9;
+  background: #141414;
+}
+
+.diagnosis-toolbar {
+  margin-bottom: 12px;
+}
+
+.query-hero {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 180px);
+  padding: 24px 16px;
+  background: #fff;
+  border: 1px solid #e8eef7;
+}
+
+.query-hero__center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 560px;
+  transform: translateY(-52px);
+}
+
+.query-hero__visual {
+  position: relative;
+  width: 220px;
+  height: 150px;
+  margin-bottom: 6px;
+}
+
+.query-hero__device,
+.query-hero__pulse {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1677ff;
+  background: #f4f8ff;
+  border: 1px solid #d7e7ff;
+}
+
+.query-hero__device {
+  top: 26px;
+  left: 64px;
+  width: 92px;
+  height: 92px;
+  font-size: 52px;
+  border-radius: 8px;
+  box-shadow: 0 12px 28px rgba(22, 119, 255, 0.14);
+}
+
+.query-hero__pulse {
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+  border-radius: 8px;
+}
+
+.query-hero__pulse.is-left {
+  top: 72px;
+  left: 8px;
+  color: #13a8a8;
+  background: #f0fcfb;
+  border-color: #b5eeea;
+}
+
+.query-hero__pulse.is-right {
+  top: 10px;
+  right: 10px;
+  color: #fa8c16;
+  background: #fff7e8;
+  border-color: #ffe0ad;
+}
+
+.query-hero h2 {
+  margin: 0 0 8px;
+  color: #1f2937;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 30px;
+}
+
+.query-hero__search {
+  display: flex;
+  width: min(100%, 520px);
+  gap: 12px;
+  margin-top: 0;
+}
+
+.query-hero__input {
+  flex: 1;
+}
+
+.query-hero__button {
+  min-width: 112px;
+}
+
+.device-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  padding: 18px 24px;
+  background: #fff;
+  border-bottom: 1px solid #e8eef7;
+}
+
+.device-strip__item {
+  min-width: 0;
+  color: #6b7280;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.device-strip__item strong {
+  color: #273142;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.flow-summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+  padding: 14px 18px;
+  background: #fff;
+  border: 1px solid #e8eef7;
+}
+
+.flow-summary__item {
+  min-width: 0;
+  color: #6b7280;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.flow-summary__item strong {
+  color: #273142;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.module-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.diagnosis-module {
+  background: #fff;
+  border: 1px solid #e8eef7;
+}
+
+.diagnosis-module__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 18px;
+  text-align: left;
+  cursor: pointer;
+  background: #fff;
+  border: 0;
+  border-bottom: 1px solid #edf1f6;
+}
+
+.diagnosis-module__title,
+.diagnosis-module__right {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.diagnosis-module__title {
+  font-weight: 600;
+}
+
+.diagnosis-module__title .is-success {
+  color: #34d399;
+}
+
+.diagnosis-module__title .is-error {
+  color: #ef4444;
+}
+
+.diagnosis-module__title .is-partial,
+.diagnosis-module__title .is-skipped,
+.diagnosis-module__title .is-warning {
+  color: #f59e0b;
+}
+
+.diagnosis-module__arrow {
+  color: #60a5fa;
+  transition: transform 0.2s ease;
+}
+
+.diagnosis-module__arrow.is-open {
+  transform: rotate(180deg);
+}
+
+.diagnosis-module__body {
+  padding: 18px 24px;
+}
+
+.field-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px 28px;
+}
+
+.field-grid__item {
+  min-width: 0;
+  padding-left: 10px;
+  color: #8a94a6;
+  font-size: 13px;
+  line-height: 24px;
+  border-left: 3px solid transparent;
+}
+
+.field-grid__item strong {
+  color: #273142;
+  font-weight: 600;
+  word-break: break-word;
+}
+
+.field-grid__item.is-error {
+  border-left-color: #ef4444;
+}
+
+.field-grid__item.is-error strong {
+  color: #dc2626;
+}
+
+.plain-table {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.plain-table__head,
+.plain-table__row {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(130px, 1fr);
+  min-width: 720px;
+}
+
+.plain-table__head span,
+.plain-table__row span {
+  padding: 13px 18px;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.plain-table__head span {
+  color: #111827;
+  font-weight: 600;
+  background: #eef2f7;
+}
+
+.plain-table__row span {
+  color: #374151;
+  background: #fff;
+}
+
+.plain-table__row.is-error span {
+  color: #991b1b;
+  background: #fff7f7;
+}
+
+.plain-table__row.is-error span:first-child {
+  box-shadow: inset 3px 0 0 #ef4444;
+}
+
+.plain-table__row.is-error span:last-child {
+  font-weight: 600;
+}
+
+.module-message {
+  margin-bottom: 14px;
+  color: #b45309;
+  font-size: 13px;
+}
+
+.module-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 18px;
+  padding: 8px 10px;
+  margin-bottom: 14px;
+  color: #6b7280;
+  font-size: 12px;
+  line-height: 20px;
+  background: #f8fafc;
+  border: 1px solid #edf1f6;
+}
+
+.module-error {
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  color: #b42318;
+  background: #fff1f0;
+  border: 1px solid #ffd5d2;
+}
+
+.flow-error {
+  margin-top: 14px;
+}
+
+.module-suggestion {
+  padding-top: 16px;
+  margin-top: 16px;
+  color: #4b5563;
+  font-size: 13px;
+  line-height: 24px;
+  border-top: 1px dashed #e5e7eb;
+}
+
+.diagnosis-page.is-dark .module-meta {
+  color: #b3b3b3;
+  background: #252525;
+  border-color: #303030;
+}
+
+.flow-trend {
+  margin-top: 14px;
+}
+
+.flow-trend__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  color: #1f2937;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.flow-trend__title svg {
+  color: #1677ff;
+}
+
+.flow-trend__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.flow-chart-panel {
+  min-width: 0;
+  padding: 16px;
+  background: #fff;
+  border: 1px solid #e8eef7;
+}
+
+.flow-chart-panel__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  color: #273142;
+  font-weight: 600;
+}
+
+.flow-chart-panel__title svg {
+  color: #1677ff;
+}
+
+.diagnosis-page.is-dark .query-hero,
+.diagnosis-page.is-dark .device-strip,
+.diagnosis-page.is-dark .flow-summary,
+.diagnosis-page.is-dark .flow-chart-panel,
+.diagnosis-page.is-dark .diagnosis-module,
+.diagnosis-page.is-dark .diagnosis-module__header,
+.diagnosis-page.is-dark .plain-table__row span {
+  color: #d9d9d9;
+  background: #1f1f1f;
+  border-color: #303030;
+}
+
+.diagnosis-page.is-dark .device-strip__item strong,
+.diagnosis-page.is-dark .flow-summary__item strong,
+.diagnosis-page.is-dark .flow-chart-panel__title,
+.diagnosis-page.is-dark .field-grid__item strong {
+  color: #f2f2f2;
+}
+
+.diagnosis-page.is-dark .query-hero h2,
+.diagnosis-page.is-dark .flow-trend__title {
+  color: #f2f2f2;
+}
+
+.diagnosis-page.is-dark .plain-table__head span {
+  color: #f2f2f2;
+  background: #2a2a2a;
+}
+
+.diagnosis-page.is-dark .device-strip__item,
+.diagnosis-page.is-dark .flow-summary__item,
+.diagnosis-page.is-dark .field-grid__item,
+.diagnosis-page.is-dark .module-suggestion {
+  color: #b3b3b3;
+}
+
+.diagnosis-page.is-dark .module-error,
+.diagnosis-page.is-dark .plain-table__row.is-error span {
+  color: #ff7875;
+  background: #2a1717;
+  border-color: #5c2223;
+}
+
+@media (max-width: 960px) {
+  .device-strip,
+  .field-grid,
+  .flow-trend__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .query-hero {
+    justify-content: center;
+    padding: 16px;
+  }
+
+  .query-hero__center {
+    transform: translateY(-28px);
+  }
+
+  .query-hero__search {
+    flex-direction: column;
+  }
+
+  .query-hero__button {
+    width: 100%;
+  }
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/model.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/model.ts
new file mode 100644
index 0000000..3dc3e86
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tIntelligentDiagnosis/model.ts
@@ -0,0 +1,458 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import type { ColumnsType } from 'ant-design-vue/es/table';
+
+import { cloneDeep } from 'lodash-es';
+
+export type DiagnosisState = 'error' | 'info' | 'success' | 'warning';
+
+export interface DeviceInfoItem {
+  key: string;
+  label: string;
+  value: string;
+}
+
+export interface DiagnosisTableRow {
+  [key: string]: number | string | undefined;
+}
+
+export interface DiagnosisSection {
+  key: string;
+  title: string;
+  state: DiagnosisState;
+  columns?: ColumnsType<DiagnosisTableRow>;
+  dataSource?: DiagnosisTableRow[];
+  fields?: DeviceInfoItem[];
+  linkText?: string;
+  summary?: string;
+  tip?: string;
+}
+
+export interface DiagnosisTab {
+  key: string;
+  label: string;
+  assistantLabel?: string;
+  bannerTitle: string;
+  bannerSubtitle: string;
+  footerActionText?: string;
+  sections: DiagnosisSection[];
+}
+
+export interface DiagnosisRecord {
+  identifier: string;
+  deviceInfo: DeviceInfoItem[];
+  tabs: DiagnosisTab[];
+}
+
+export const querySchema: VbenFormSchema[] = [
+  {
+    fieldName: 'identifier',
+    component: 'Input',
+    label: '查询码',
+    componentProps: {
+      placeholder: '请输入 MSISDN / ICCID / IMSI 任一',
+    },
+    rules: 'required',
+  },
+];
+
+const networkColumns: ColumnsType<DiagnosisTableRow> = [
+  {
+    title: 'APN名称',
+    dataIndex: 'apnName',
+    key: 'apnName',
+  },
+  {
+    title: 'IPV4',
+    dataIndex: 'ipv4',
+    key: 'ipv4',
+  },
+  {
+    title: 'IPV6',
+    dataIndex: 'ipv6',
+    key: 'ipv6',
+  },
+  {
+    title: '通信服务状态',
+    dataIndex: 'serviceStatus',
+    key: 'serviceStatus',
+  },
+  {
+    title: '在线状态',
+    dataIndex: 'onlineStatus',
+    key: 'onlineStatus',
+  },
+];
+
+const ruleColumns: ColumnsType<DiagnosisTableRow> = [
+  {
+    title: '策略限制',
+    dataIndex: 'ruleName',
+    key: 'ruleName',
+  },
+  {
+    title: '是否触发',
+    dataIndex: 'ruleStatus',
+    key: 'ruleStatus',
+  },
+];
+
+const messageColumns: ColumnsType<DiagnosisTableRow> = [
+  {
+    title: '短信中心',
+    dataIndex: 'smsc',
+    key: 'smsc',
+  },
+  {
+    title: '发送状态',
+    dataIndex: 'sendStatus',
+    key: 'sendStatus',
+  },
+  {
+    title: '接收状态',
+    dataIndex: 'receiveStatus',
+    key: 'receiveStatus',
+  },
+  {
+    title: '最近活跃时间',
+    dataIndex: 'lastActiveTime',
+    key: 'lastActiveTime',
+  },
+];
+
+const voiceColumns: ColumnsType<DiagnosisTableRow> = [
+  {
+    title: '语音能力',
+    dataIndex: 'voiceCapability',
+    key: 'voiceCapability',
+  },
+  {
+    title: '呼出状态',
+    dataIndex: 'outboundStatus',
+    key: 'outboundStatus',
+  },
+  {
+    title: '呼入状态',
+    dataIndex: 'inboundStatus',
+    key: 'inboundStatus',
+  },
+  {
+    title: '最近通话时间',
+    dataIndex: 'lastCallTime',
+    key: 'lastCallTime',
+  },
+];
+
+const baseRecord: DiagnosisRecord = {
+  identifier: '898604F81623D2249774',
+  deviceInfo: [
+    { key: 'msisdn', label: 'MSISDN', value: '1440000159774' },
+    { key: 'iccid', label: 'ICCID', value: '898604F81623D2249774' },
+    {
+      key: 'imei',
+      label: '近30天最新终端使用IMEI',
+      value: '862138000048923',
+    },
+  ],
+  tabs: [
+    {
+      key: 'data',
+      label: '数据诊断',
+      assistantLabel: 'AI智能体诊断',
+      bannerTitle: '诊断完成',
+      bannerSubtitle:
+        '已完成基础通信链路巡检，当前重点关注网络注册与会话活跃情况。',
+      footerActionText: '重置数据通信服务',
+      sections: [
+        {
+          key: 'simStatus',
+          title: 'SIM卡状态',
+          state: 'success',
+          fields: [
+            { key: 'simCardStatus', label: 'SIM卡状态', value: '已激活' },
+            { key: 'isStopped', label: '是否冻结', value: '否' },
+          ],
+        },
+        {
+          key: 'networkService',
+          title: '通信服务',
+          state: 'success',
+          columns: networkColumns,
+          dataSource: [
+            {
+              apnName: 'CMIOT',
+              ipv4: '192.0.2.10',
+              ipv6: '-',
+              serviceStatus: '开启',
+              onlineStatus: '离线',
+            },
+          ],
+        },
+        {
+          key: 'policyLimit',
+          title: '策略限制',
+          state: 'success',
+          columns: ruleColumns,
+          dataSource: [
+            { ruleName: '达量限速', ruleStatus: '未订购' },
+            { ruleName: '区域限制', ruleStatus: '未订购' },
+            { ruleName: '人联网访问限制', ruleStatus: '允许访问' },
+          ],
+        },
+        {
+          key: 'networkDiagnosis',
+          title: '网络连接',
+          state: 'error',
+          fields: [
+            { key: 'registerStatus', label: '网络注册', value: '设备已注册' },
+            { key: 'deviceStatus', label: '设备状态', value: '关机' },
+          ],
+          linkText: 'SIM卡交互信息',
+          tip: '建议解决方案：您的设备尚未成功接入网络，请确认设备已开机。若有可能，请关闭设备然后重新启动。',
+        },
+        {
+          key: 'sessionStatus',
+          title: '会话状态',
+          state: 'warning',
+          summary: '当前离线，7天内无数据。',
+          linkText: '数据通信记录',
+        },
+      ],
+    },
+    {
+      key: 'sms',
+      label: '短信诊断',
+      assistantLabel: 'AI短信分析',
+      bannerTitle: '短信链路未发现异常',
+      bannerSubtitle: '短信能力已开通，最近一次状态巡检未发现中心配置异常。',
+      sections: [
+        {
+          key: 'smsCapability',
+          title: '短信能力',
+          state: 'success',
+          fields: [
+            { key: 'smsSwitch', label: '短信服务', value: '已开通' },
+            { key: 'mtStatus', label: '下行短信', value: '允许接收' },
+            { key: 'moStatus', label: '上行短信', value: '允许发送' },
+          ],
+        },
+        {
+          key: 'smsCenter',
+          title: '短信中心状态',
+          state: 'success',
+          columns: messageColumns,
+          dataSource: [
+            {
+              smsc: '+8613800000500',
+              sendStatus: '成功',
+              receiveStatus: '成功',
+              lastActiveTime: '2026-06-09 16:24:08',
+            },
+          ],
+        },
+        {
+          key: 'smsAdvice',
+          title: '诊断建议',
+          state: 'info',
+          summary:
+            '若设备仍收不到短信，请优先核对终端侧短信缓存、白名单和固件解析逻辑。',
+          linkText: '短信交互记录',
+        },
+      ],
+    },
+    {
+      key: 'voice',
+      label: '语音诊断',
+      assistantLabel: 'AI语音分析',
+      bannerTitle: '语音能力未启用',
+      bannerSubtitle: '当前卡规格以数据业务为主，语音能力处于关闭状态。',
+      sections: [
+        {
+          key: 'voiceCapability',
+          title: '语音状态',
+          state: 'warning',
+          columns: voiceColumns,
+          dataSource: [
+            {
+              voiceCapability: '未开通',
+              outboundStatus: '不可用',
+              inboundStatus: '不可用',
+              lastCallTime: '-',
+            },
+          ],
+        },
+        {
+          key: 'voiceAdvice',
+          title: '诊断建议',
+          state: 'info',
+          summary: '如需语音能力，请联系运营支撑侧确认套餐规格和业务开通状态。',
+        },
+      ],
+    },
+  ],
+};
+
+const secondaryRecord: DiagnosisRecord = {
+  identifier: '1440000159774',
+  deviceInfo: [
+    { key: 'msisdn', label: 'MSISDN', value: '1440000159774' },
+    { key: 'iccid', label: 'ICCID', value: '898604F81623D2249774' },
+    {
+      key: 'imei',
+      label: '近30天最新终端使用IMEI',
+      value: '862138000048923',
+    },
+  ],
+  tabs: [
+    {
+      key: 'data',
+      label: '数据诊断',
+      assistantLabel: 'AI智能体诊断',
+      bannerTitle: '诊断完成',
+      bannerSubtitle:
+        '设备近期存在离线波动，建议优先关注网络注册与业务会话恢复情况。',
+      footerActionText: '重置数据通信服务',
+      sections: [
+        {
+          key: 'simStatus',
+          title: 'SIM卡状态',
+          state: 'success',
+          fields: [
+            { key: 'simCardStatus', label: 'SIM卡状态', value: '已激活' },
+            { key: 'isStopped', label: '是否冻结', value: '否' },
+          ],
+        },
+        {
+          key: 'networkService',
+          title: '通信服务',
+          state: 'warning',
+          columns: networkColumns,
+          dataSource: [
+            {
+              apnName: 'CMIOT',
+              ipv4: '192.0.2.10',
+              ipv6: '-',
+              serviceStatus: '开启',
+              onlineStatus: '最近离线',
+            },
+          ],
+        },
+        {
+          key: 'policyLimit',
+          title: '策略限制',
+          state: 'success',
+          columns: ruleColumns,
+          dataSource: [
+            { ruleName: '达量限速', ruleStatus: '未触发' },
+            { ruleName: '区域限制', ruleStatus: '未订购' },
+            { ruleName: '人联网访问限制', ruleStatus: '允许访问' },
+          ],
+        },
+        {
+          key: 'networkDiagnosis',
+          title: '网络连接',
+          state: 'warning',
+          fields: [
+            { key: 'registerStatus', label: '网络注册', value: '间歇在线' },
+            { key: 'deviceStatus', label: '设备状态', value: '低频唤醒' },
+          ],
+          linkText: 'SIM卡交互信息',
+          tip: '建议解决方案：设备在线不稳定，请排查供电、信号覆盖和 APN 配置是否存在波动。',
+        },
+        {
+          key: 'sessionStatus',
+          title: '会话状态',
+          state: 'warning',
+          summary: '最近24小时会话重建 3 次，存在短时掉线。',
+          linkText: '数据通信记录',
+        },
+      ],
+    },
+    {
+      key: 'sms',
+      label: '短信诊断',
+      assistantLabel: 'AI短信分析',
+      bannerTitle: '短信链路未发现异常',
+      bannerSubtitle: '短信能力已开通，可继续结合交互记录判断终端侧收发逻辑。',
+      sections: [
+        {
+          key: 'smsCapability',
+          title: '短信能力',
+          state: 'success',
+          fields: [
+            { key: 'smsSwitch', label: '短信服务', value: '已开通' },
+            { key: 'mtStatus', label: '下行短信', value: '允许接收' },
+            { key: 'moStatus', label: '上行短信', value: '允许发送' },
+          ],
+        },
+        {
+          key: 'smsCenter',
+          title: '短信中心状态',
+          state: 'success',
+          columns: messageColumns,
+          dataSource: [
+            {
+              smsc: '+8613800000500',
+              sendStatus: '成功',
+              receiveStatus: '成功',
+              lastActiveTime: '2026-06-10 09:12:41',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      key: 'voice',
+      label: '语音诊断',
+      assistantLabel: 'AI语音分析',
+      bannerTitle: '语音能力未启用',
+      bannerSubtitle: '该卡型未配置语音功能，当前无需继续排查语音链路。',
+      sections: [
+        {
+          key: 'voiceCapability',
+          title: '语音状态',
+          state: 'warning',
+          columns: voiceColumns,
+          dataSource: [
+            {
+              voiceCapability: '未开通',
+              outboundStatus: '不可用',
+              inboundStatus: '不可用',
+              lastCallTime: '-',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+const mockRecordMap = new Map<string, DiagnosisRecord>([
+  [baseRecord.identifier, baseRecord],
+  [secondaryRecord.identifier, secondaryRecord],
+]);
+
+export function getDiagnosisRecord(identifier?: string) {
+  const normalized = identifier?.trim();
+  if (!normalized) {
+    return cloneDeep(baseRecord);
+  }
+  return cloneDeep(mockRecordMap.get(normalized) ?? baseRecord);
+}
+
+export function buildFallbackRecord(identifier: string): DiagnosisRecord {
+  const record = cloneDeep(baseRecord);
+  record.identifier = identifier;
+  record.deviceInfo = record.deviceInfo.map((item) => {
+    if (item.key === 'msisdn' || item.key === 'iccid') {
+      return {
+        ...item,
+        value: identifier,
+      };
+    }
+    return item;
+  });
+  record.tabs[0]!.bannerSubtitle =
+    '未匹配到预置样例数据，当前为静态演示结果。后续接入接口后可替换为实时诊断信息。';
+  return record;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchFeedback.test.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchFeedback.test.ts
new file mode 100644
index 0000000..594859e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchFeedback.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+  countInputRows,
+  detailStatusLabel,
+  detailStatusOptions,
+  isBatchResultPending,
+  resultDownloadHint,
+  resultFileHint,
+} from './batchFeedback';
+
+vi.mock('#/utils/dict', () => ({
+  getDictOptions: () => [
+    { label: '\u5F85\u5904\u7406', value: '0' },
+    { label: '\u5904\u7406\u4E2D', value: '1' },
+    { label: '\u6210\u529F', value: '2' },
+    { label: '\u5931\u8D25', value: '3' },
+    { label: '\u5F85\u6838\u67E5', value: '4' },
+  ],
+}));
+
+describe('批次输入与结果提示', () => {
+  it('缺失状态不应转换成待处理，兼容接口数字字符串', () => {
+    for (const status of [null, undefined, '', 99])
+      expect(detailStatusLabel(status)).toBe('结果未知');
+    expect(detailStatusLabel('3')).toBe('失败');
+    expect(detailStatusLabel(0)).toBe('待处理');
+  });
+  it('区分文件生成状态和卡片执行结果', () => {
+    expect(resultDownloadHint(0)).toContain('待生成');
+    expect(resultDownloadHint(2)).toContain('正在生成');
+    expect(resultDownloadHint(3)).toContain('不代表卡片执行失败');
+    expect(resultDownloadHint(1)).toBeUndefined();
+    expect(resultDownloadHint()).toBeUndefined();
+  });
+  it('按非空行计数，保留重复卡片供后台校验', () => {
+    expect(countInputRows(' \r\n123\r\n\t\n123 456 789\n')).toBe(2);
+    expect(countInputRows('')).toBe(0);
+  });
+  it('等待结果和待核查不能当作失败', () => {
+    for (const status of [0, 1, 2, '0', '1', '2']) {
+      expect(isBatchResultPending(status)).toBe(true);
+    }
+    for (const status of [null, undefined, '', 3, 4, 5, 6]) {
+      expect(isBatchResultPending(status)).toBe(false);
+    }
+    for (const status of [0, 1, 2])
+      expect(resultFileHint(status)).toContain('暂未产生结果');
+    expect(resultFileHint(6)).toContain('暂不能判定成功或失败');
+    expect(resultFileHint(3)).toContain('无文件不代表执行失败');
+    expect(
+      detailStatusOptions().find((item) => Number(item.value) === 4)?.label,
+    ).toContain('待核查');
+  });
+  it('字典未配置的状态不自动补入下拉列表', () => {
+    expect(detailStatusOptions().some((item) => Number(item.value) === 5)).toBe(
+      false,
+    );
+    expect(detailStatusLabel(5)).toBe('结果未知');
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchFeedback.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchFeedback.ts
new file mode 100644
index 0000000..413a81e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchFeedback.ts
@@ -0,0 +1,57 @@
+import DictEnum from '#/constants/DictEnum';
+import { getDictOptions } from '#/utils/dict';
+
+export const NOT_EXECUTED_STATUS = 5;
+
+export function isBatchResultPending(status?: null | number | string) {
+  return (
+    status !== null &&
+    status !== undefined &&
+    status !== '' &&
+    [0, 1, 2].includes(Number(status))
+  );
+}
+
+export function detailStatusOptions() {
+  return getDictOptions(DictEnum.T_DETAIL_STATUS, true);
+}
+
+export function countInputRows(input: string) {
+  return input.split(/\r?\n/u).filter((line) => line.trim()).length;
+}
+
+export function detailStatusLabel(status: null | number | string | undefined) {
+  if (status === null || status === undefined || status === '')
+    return '结果未知';
+  return (
+    detailStatusOptions().find((item) => Number(item.value) === Number(status))
+      ?.label ?? '结果未知'
+  );
+}
+
+export function resultDownloadHint(downloadStatus?: number) {
+  switch (downloadStatus) {
+    case 0: {
+      return '结果文件待生成，请稍后刷新';
+    }
+    case 2: {
+      return '结果文件正在生成，请稍后刷新';
+    }
+    case 3: {
+      return '结果文件生成失败，请查看执行明细；文件生成失败不代表卡片执行失败';
+    }
+    default: {
+      return undefined;
+    }
+  }
+}
+
+export function resultFileHint(batchAsyncStatus?: number) {
+  if (batchAsyncStatus === 6) {
+    return '执行结果待核查，暂不能判定成功或失败';
+  }
+  if ([0, 1, 2].includes(Number(batchAsyncStatus))) {
+    return '任务尚未完成，暂未产生结果，请稍后刷新，无需重复提交';
+  }
+  return '暂无结果文件，请查看卡片执行明细；无文件不代表执行失败';
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchTypeOptions.test.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchTypeOptions.test.ts
new file mode 100644
index 0000000..98e6fd4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchTypeOptions.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  resolveDisplayBatchType,
+  visibleBatchTypeOptions,
+} from './batchTypeOptions';
+
+describe('visibleBatchTypeOptions', () => {
+  it('excludes numeric and string prepare batch values', () => {
+    const options = [
+      { label: 'Inbound', value: 1 },
+      { label: 'Prepare', value: 4 },
+      { label: 'Prepare from dict', value: '4' },
+      { label: 'Renew', value: 101 },
+      { label: 'Change', value: '102' },
+      { label: 'Single-card add-on', value: '11' },
+      { label: 'Pool add-on', value: '12' },
+    ];
+
+    expect(
+      visibleBatchTypeOptions(options).map(({ label, value }) => ({
+        label,
+        value,
+      })),
+    ).toEqual([
+      { label: 'Inbound', value: 1 },
+      { label: 'Renew', value: 101 },
+      { label: 'Change', value: '102' },
+      { label: 'Single-card add-on', value: '11' },
+      { label: 'Pool add-on', value: '12' },
+    ]);
+  });
+
+  it('does not mutate the dictionary options', () => {
+    const options = [
+      { label: 'Prepare', value: 4 },
+      { label: 'Renew', value: 101 },
+    ];
+
+    visibleBatchTypeOptions(options);
+
+    expect(options).toHaveLength(2);
+  });
+
+  it('keeps dictionary values and labels unchanged', () => {
+    const options = [
+      {
+        label: 'Configured add-on',
+        listClass: 'primary',
+        value: '11',
+      },
+    ];
+
+    expect(visibleBatchTypeOptions(options)).toEqual(options);
+  });
+
+  it('does not convert legacy values that are configured in the dictionary', () => {
+    const options = [
+      { label: 'Canonical', value: '11' },
+      { label: 'Legacy', value: '111' },
+    ];
+
+    expect(visibleBatchTypeOptions(options)).toEqual(options);
+  });
+});
+
+describe('resolveDisplayBatchType', () => {
+  it('keeps formal batch type values unchanged', () => {
+    expect(resolveDisplayBatchType({ batchType: 11 })).toBe(11);
+    expect(resolveDisplayBatchType('11')).toBe('11');
+  });
+
+  it('uses target batch type for internal prepare batches', () => {
+    expect(
+      resolveDisplayBatchType({
+        batchInfo: { targetBatchType: 11 },
+        batchType: 4,
+      }),
+    ).toBe(11);
+  });
+
+  it('reads target batch type from serialized batch info', () => {
+    expect(
+      resolveDisplayBatchType({
+        batchInfo: '{"targetBatchType":12}',
+        batchType: '4',
+      }),
+    ).toBe(12);
+  });
+
+  it('maps internal allocate parent jobs to the allocate type', () => {
+    expect(resolveDisplayBatchType({ batchType: 13 })).toBe(3);
+    expect(resolveDisplayBatchType('13')).toBe(3);
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchTypeOptions.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchTypeOptions.ts
new file mode 100644
index 0000000..885449c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/batchTypeOptions.ts
@@ -0,0 +1,68 @@
+export const ALLOCATE_BATCH_TYPE = 3;
+export const INTERNAL_PREPARE_BATCH_TYPE = 4;
+export const INTERNAL_ALLOCATE_JOB_BATCH_TYPE = 13;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function firstPresent(...values: unknown[]): unknown {
+  return values.find(
+    (value) => value !== undefined && value !== null && value !== '',
+  );
+}
+
+function resolveBatchInfoTargetType(batchInfo: unknown): unknown {
+  if (isRecord(batchInfo)) {
+    return firstPresent(batchInfo.targetBatchType, batchInfo.target_batch_type);
+  }
+
+  if (typeof batchInfo !== 'string' || batchInfo.trim() === '') {
+    return undefined;
+  }
+
+  try {
+    const parsed = JSON.parse(batchInfo);
+    if (isRecord(parsed)) {
+      return firstPresent(parsed.targetBatchType, parsed.target_batch_type);
+    }
+  } catch {
+    return undefined;
+  }
+
+  return undefined;
+}
+
+export function resolveDisplayBatchType(rowOrType: unknown): unknown {
+  if (!isRecord(rowOrType)) {
+    if (Number(rowOrType) === INTERNAL_ALLOCATE_JOB_BATCH_TYPE) {
+      return ALLOCATE_BATCH_TYPE;
+    }
+    return rowOrType;
+  }
+
+  const batchType = rowOrType.batchType;
+  if (Number(batchType) === INTERNAL_ALLOCATE_JOB_BATCH_TYPE) {
+    return ALLOCATE_BATCH_TYPE;
+  }
+  if (Number(batchType) !== INTERNAL_PREPARE_BATCH_TYPE) {
+    return batchType;
+  }
+
+  return firstPresent(
+    rowOrType.targetBatchType,
+    rowOrType.target_batch_type,
+    resolveBatchInfoTargetType(rowOrType.batchInfo),
+    batchType,
+  );
+}
+
+export function visibleBatchTypeOptions<T extends { value: unknown }>(
+  options: T[],
+): T[] {
+  return options.filter(
+    (option) =>
+      Number(option.value) !== INTERNAL_PREPARE_BATCH_TYPE &&
+      Number(option.value) !== INTERNAL_ALLOCATE_JOB_BATCH_TYPE,
+  );
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/cards.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/cards.vue
new file mode 100644
index 0000000..f877bbc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/cards.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { BatchMainModel } from '#/api/iotlcm/tLifeCycle/tBatch/type';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Cards } from '#/api/iotlcm/tLifeCycle/tBatch';
+import BetterVben from '#/constants/BetterVben';
+
+import { CardGridSchema, getCardGridColumns } from './model';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+const batchInfo = ref<BatchMainModel>();
+const currentStockOnly = ref(false);
+
+/** ====================  方法  ==================== */
+async function handleOpenChange(isOpen: boolean) {
+  if (!isOpen) {
+    batchInfo.value = undefined;
+    currentStockOnly.value = false;
+    return;
+  }
+  const { record } = modalApi.getData() as { record: BatchMainModel };
+  batchInfo.value = record;
+  currentStockOnly.value = Boolean((record as any)?.currentStockOnly);
+  gridApi.setGridOptions({
+    columns: getCardGridColumns(record, currentStockOnly.value),
+  });
+  await gridApi.formApi.resetForm();
+  await gridApi.reload();
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: CardGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.modal as any),
+    columns: getCardGridColumns(),
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          const batchNo = batchInfo.value?.batchNo;
+          if (!batchNo) {
+            return {
+              items: [],
+              page: page.currentPage,
+              pageSize: page.pageSize,
+              total: 0,
+            };
+          }
+          return await Cards({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            batchNo,
+            batchType: batchInfo.value?.batchType,
+            currentStockOnly: currentStockOnly.value,
+          });
+        },
+      },
+    },
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  onOpenChange: handleOpenChange,
+});
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Modal
+    :title="`批次卡清单${batchInfo?.batchNo ? `-${batchInfo.batchNo}` : ''}`"
+    :footer="false"
+  >
+    <Grid />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/edit.vue
new file mode 100644
index 0000000..ceaf6e4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/edit.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type {
+  BatchMainEditParam,
+  BatchMainModel,
+} from '#/api/iotlcm/tLifeCycle/tBatch/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/tLifeCycle/tBatch';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data?: BatchMainModel;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+/** ====================  方法  ==================== */
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  if (data.isUpdate && data.data?.id) {
+    try {
+      const record = await View({ id: data.data.id });
+      await formApi.setValues(record);
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(
+        Edit(value as BatchMainEditParam),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '操作成功',
+          emit: () => {
+            emit('confirm');
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/index.vue
new file mode 100644
index 0000000..2a8e825
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/index.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { BatchMainModel } from '#/api/iotlcm/tLifeCycle/tBatch/type';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { List } from '#/api/iotlcm/tLifeCycle/tBatch';
+import BetterVben from '#/constants/BetterVben';
+
+import cardsModal from './cards.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+const selectRows = ref<BatchMainModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: BatchMainModel) {
+  viewModalApi.setData({ record: row }).open();
+}
+
+function handleCards(row: BatchMainModel) {
+  cardsModalApi.setData({ record: row }).open();
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+
+const [CardsModal, cardsModalApi] = useVbenModal({
+  connectedComponent: cardsModal,
+});
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="批次管理">
+      <template #action="{ row }">
+        <Button
+          class="border-none p-0"
+          :block="false"
+          type="link"
+          @click="handlePreview(row)"
+          v-access:code="'cpm:common:batchMain:view'"
+        >
+          查看
+        </Button>
+      </template>
+      <template #batchNo="{ row }">
+        <Button type="link" @click="handleCards(row)">{{ row.batchNo }}</Button>
+      </template>
+    </Grid>
+    <ViewModal />
+    <CardsModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/model.tsx
new file mode 100644
index 0000000..78e0bf2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/model.tsx
@@ -0,0 +1,486 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { z } from '@vben/common-ui';
+
+import DictEnum from '#/constants/DictEnum';
+import { renderDict, renderDictTag } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+import { resultFileHint } from '../batchFeedback';
+import {
+  resolveDisplayBatchType,
+  visibleBatchTypeOptions,
+} from '../batchTypeOptions';
+import FileDownloadButton from '../tBatchExecutionLog/components/fileDownloadButton';
+import {
+  allocationColumns,
+  allocationFieldsForBatch,
+  sourceUnit,
+  targetUnit,
+} from '../tBatchExecutionLog/model';
+
+function renderGlobalBatchType(batchType: unknown) {
+  return renderDictTag(
+    String(resolveDisplayBatchType(batchType) ?? ''),
+    visibleBatchTypeOptions(getDictOptions(DictEnum.T_GLOBAL_BATCH_TYPE)),
+  );
+}
+
+/** ====================  查询表单  ==================== */
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'keyword',
+    component: 'Input',
+    label: '关键字',
+    componentProps: {
+      placeholder: '请输入关键字',
+    },
+  },
+  {
+    fieldName: 'batchType',
+    component: 'Select',
+    label: '批次类型',
+    componentProps: () => ({
+      placeholder: '请选择批次类型',
+      options: visibleBatchTypeOptions(
+        getDictOptions(DictEnum.T_GLOBAL_BATCH_TYPE),
+      ),
+    }),
+  },
+  {
+    fieldName: 'batchNo',
+    component: 'Input',
+    label: '批次编号',
+    componentProps: {
+      placeholder: '请输入批次编号',
+    },
+  },
+  {
+    fieldName: 'time',
+    component: 'RangePicker',
+    label: '执行时间',
+    componentProps: {
+      clearable: true,
+      type: 'datetimerange',
+      valueFormat: 'YYYY-MM-DD',
+    },
+  },
+];
+
+/** ====================  表格列  ==================== */
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    title: '批次类型',
+    field: 'batchType',
+    slots: {
+      default: ({ row }) => {
+        return renderGlobalBatchType(row);
+      },
+    },
+    width: 160,
+  },
+  {
+    title: '批次编号',
+    field: 'batchNo',
+    minWidth: 120,
+    slots: {
+      default: 'batchNo',
+    },
+  },
+  {
+    title: '总数量',
+    field: 'totalCount',
+    width: 100,
+    slots: {
+      default: ({ row }) => row.totalCount ?? '--',
+    },
+  },
+  {
+    title: '批次执行时间',
+    field: 'batchTime',
+    width: 170,
+  },
+  {
+    title: '操作',
+    width: 80,
+    slots: {
+      default: 'action',
+    },
+  },
+];
+
+/** ====================  批次卡清单查询表单  ==================== */
+export const CardGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'keyword',
+    component: 'Input',
+    label: '关键字',
+    componentProps: {
+      placeholder: '请输入关键字',
+    },
+  },
+  {
+    fieldName: 'iccid',
+    component: 'Input',
+    label: 'ICCID',
+    componentProps: {
+      placeholder: '请输入ICCID',
+    },
+  },
+  {
+    fieldName: 'msisdn',
+    component: 'Input',
+    label: 'MSISDN',
+    componentProps: {
+      placeholder: '请输入MSISDN',
+    },
+  },
+];
+
+/** ====================  批次卡清单表格列  ==================== */
+export const CardGridColumns: VxeGridProps['columns'] = [
+  {
+    title: '行号',
+    field: 'rowNo',
+    width: 90,
+    slots: {
+      default: ({ row }) => row.rowNo ?? '--',
+    },
+  },
+  {
+    title: 'ICCID',
+    field: 'iccid',
+    minWidth: 180,
+  },
+  {
+    title: 'MSISDN',
+    field: 'msisdn',
+    minWidth: 140,
+  },
+  {
+    title: 'IMSI',
+    field: 'imsi',
+    minWidth: 160,
+  },
+  ...allocationColumns,
+  {
+    title: '执行状态',
+    field: 'detailStatus',
+    minWidth: 160,
+    slots: {
+      default: ({ row }) =>
+        renderDict(String(row.detailStatus ?? ''), DictEnum.T_DETAIL_STATUS),
+    },
+  },
+  { title: '失败／待核查说明', field: 'errorReason', minWidth: 260 },
+];
+
+export function getCardGridColumns(batch?: unknown, currentStockOnly = false) {
+  const columns = allocationFieldsForBatch(CardGridColumns ?? [], batch);
+  return currentStockOnly
+    ? columns.filter(
+        (column) =>
+          column.field !== 'detailStatus' && column.field !== 'errorReason',
+      )
+    : columns;
+}
+
+/** ====================  查看配置  ==================== */
+export const ViewDescSchema: DescItem[] = [
+  {
+    field: 'sourceDeptName',
+    label: '划拨单位',
+    render: (_value, data) => sourceUnit(data ?? {}),
+  },
+  {
+    field: 'targetDeptName',
+    label: '接收单位',
+    render: (_value, data) => targetUnit(data ?? {}),
+  },
+  { field: 'id', label: '主键ID' },
+  { field: 'batchNo', label: '批次编号' },
+  {
+    field: 'batchType',
+    label: '批次类型',
+    render(batchType, data) {
+      return renderGlobalBatchType(data ?? batchType);
+    },
+  },
+  {
+    field: 'batchAsyncStatus',
+    label: '异步处理状态',
+    render(batchAsyncStatus) {
+      return renderDict(batchAsyncStatus, DictEnum.T_BATCH_ASYNC_STATUS);
+    },
+  },
+  {
+    field: 'runResult',
+    label: '运行结果',
+    render(runResult) {
+      return renderDict(runResult, DictEnum.T_RUN_RESULT);
+    },
+  },
+  { field: 'totalCount', label: '总数量' },
+  { field: 'failReason', label: '失败原因' },
+  {
+    field: 'sourceFile',
+    label: '源文件',
+    render(sourceFile) {
+      return (
+        <FileDownloadButton
+          defaultFileName="source-file.xlsx"
+          file={sourceFile}
+        />
+      );
+    },
+  },
+  {
+    field: 'resultFile',
+    label: '结果文件',
+    render(resultFile, data) {
+      return (
+        <FileDownloadButton
+          defaultFileName="result-file.xlsx"
+          emptyText={resultFileHint(data?.batchAsyncStatus)}
+          file={resultFile}
+        />
+      );
+    },
+  },
+  { field: 'startTime', label: '开始时间' },
+  { field: 'endTime', label: '结束时间' },
+];
+
+export function getViewDescSchema(batch?: unknown): DescItem[] {
+  return allocationFieldsForBatch(ViewDescSchema, batch);
+}
+
+/** ====================  编辑表单  ==================== */
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'executionMode',
+    component: 'Select',
+    label: '操作规模',
+    componentProps: () => ({
+      options: getDictOptions(DictEnum.T_BATCH_EXECUTION_MODE)
+        .filter(
+          (option) => Number(option.value) === 1 || Number(option.value) === 2,
+        )
+        .map((option) => ({ ...option, value: Number(option.value) })),
+    }),
+    dependencies: {
+      show: (values) => !values.id,
+      triggerFields: ['id'],
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键ID',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'batchNo',
+    component: 'Input',
+    label: '批次编号',
+    componentProps: {
+      placeholder: '请输入批次编号',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'orderSn',
+    component: 'Input',
+    label: '订单编号',
+    componentProps: {
+      placeholder: '请输入订单编号',
+    },
+  },
+  {
+    fieldName: 'batchType',
+    component: 'InputNumber',
+    label: '批次类型 枚举',
+    componentProps: {
+      placeholder: '请输入批次类型 枚举',
+    },
+    rules: z.number({
+      required_error: '请输入批次类型 枚举',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'batchStatus',
+    component: 'Select',
+    label: '批次状态 枚举',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择批次状态 枚举',
+      options: getDictOptions('sys_common_status'),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'sourceType',
+    component: 'InputNumber',
+    label: '来源方式 枚举',
+    componentProps: {
+      placeholder: '请输入来源方式 枚举',
+    },
+  },
+  {
+    fieldName: 'sourceBatchNo',
+    component: 'Input',
+    label: '来源批次编号',
+    componentProps: {
+      placeholder: '请输入来源批次编号',
+    },
+  },
+  {
+    fieldName: 'isCrossDept',
+    component: 'InputNumber',
+    label: '是否跨级操作机构 0-否 1-是',
+    componentProps: {
+      placeholder: '请输入是否跨级操作机构 0-否 1-是',
+    },
+    rules: z.number({
+      required_error: '请输入是否跨级操作机构 0-否 1-是',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'targetDeptId',
+    component: 'InputNumber',
+    label: '目标机构编号',
+    componentProps: {
+      placeholder: '请输入目标机构编号',
+    },
+  },
+  {
+    fieldName: 'deptId',
+    component: 'InputNumber',
+    label: '机构编号',
+    componentProps: {
+      placeholder: '请输入机构编号',
+    },
+  },
+  {
+    fieldName: 'totalCount',
+    component: 'InputNumber',
+    label: '总数量',
+    componentProps: {
+      placeholder: '请输入总数量',
+    },
+    rules: z.number({
+      required_error: '请输入总数量',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'validCount',
+    component: 'InputNumber',
+    label: '有效数量',
+    componentProps: {
+      placeholder: '请输入有效数量',
+    },
+    rules: z.number({
+      required_error: '请输入有效数量',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'successCount',
+    component: 'InputNumber',
+    label: '成功数量',
+    componentProps: {
+      placeholder: '请输入成功数量',
+    },
+    rules: z.number({
+      required_error: '请输入成功数量',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'failCount',
+    component: 'InputNumber',
+    label: '失败数量',
+    componentProps: {
+      placeholder: '请输入失败数量',
+    },
+    rules: z.number({
+      required_error: '请输入失败数量',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'runResult',
+    component: 'InputNumber',
+    label: '运行结果：0-待运行 1-运行中 2-成功 3-失败',
+    componentProps: {
+      placeholder: '请输入运行结果：0-待运行 1-运行中 2-成功 3-失败',
+    },
+  },
+  {
+    fieldName: 'failReason',
+    component: 'Input',
+    label: '失败原因',
+    componentProps: {
+      placeholder: '请输入失败原因',
+    },
+  },
+  {
+    fieldName: 'batchInfo',
+    component: 'Input',
+    label: '批次信息：入库/出库展示字段',
+    componentProps: {
+      placeholder: '请输入批次信息：入库/出库展示字段',
+    },
+  },
+  {
+    fieldName: 'remark',
+    component: 'Input',
+    label: '备注扩展字段',
+    componentProps: {
+      placeholder: '请输入备注扩展字段',
+    },
+  },
+  {
+    fieldName: 'startTime',
+    component: 'DatePicker',
+    label: '开始时间',
+    componentProps: {
+      type: 'datetime',
+      clearable: true,
+      showTime: true,
+      shortcuts: 'FMTime',
+    },
+  },
+  {
+    fieldName: 'endTime',
+    component: 'DatePicker',
+    label: '结束时间',
+    componentProps: {
+      type: 'datetime',
+      clearable: true,
+      showTime: true,
+      shortcuts: 'FMTime',
+    },
+  },
+  {
+    fieldName: 'tenantId',
+    component: 'Input',
+    label: '租户ID',
+    componentProps: {
+      placeholder: '请输入租户ID',
+    },
+    rules: 'required',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/view.vue
new file mode 100644
index 0000000..553ad7f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch/view.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { BatchMainModel } from '#/api/iotlcm/tLifeCycle/tBatch/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Summary } from '#/api/iotlcm/tOperationlog';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { isBatchResultPending } from '../batchFeedback';
+import { getViewDescSchema } from './model';
+
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = modalApi.getData() as { record: BatchMainModel };
+  if (isBatchResultPending(record.batchAsyncStatus)) {
+    setDescProps({ data: record, schema: getViewDescSchema(record) }, true);
+    return;
+  }
+  const data = await Summary({ batchNo: record.batchNo });
+  setDescProps({ data, schema: getViewDescSchema(data) }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: getViewDescSchema(),
+});
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/components/fileDownloadButton.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/components/fileDownloadButton.tsx
new file mode 100644
index 0000000..60a0b24
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/components/fileDownloadButton.tsx
@@ -0,0 +1,117 @@
+import type { PropType } from 'vue';
+
+import type { BatchExecutionLogResultFileModel } from '#/api/iotlcm/tOperationlog/type';
+
+import { defineComponent, ref } from 'vue';
+
+import { Button, message } from 'ant-design-vue';
+
+import { Download as downloadExport } from '#/api/common/downloadCenter';
+import { ossDownload } from '#/api/system/oss';
+import { downloadByData } from '#/utils/file/download';
+
+import { resultDownloadHint } from '../../batchFeedback';
+
+interface OperationLogFileModel extends BatchExecutionLogResultFileModel {
+  fileName?: string;
+  name?: string;
+  originalName?: string;
+}
+
+function getFileName(file: OperationLogFileModel, defaultFileName: string) {
+  if (file.originalName) {
+    return file.originalName;
+  }
+
+  if (file.fileName) {
+    return file.fileName;
+  }
+
+  if (file.name) {
+    return file.name;
+  }
+
+  if (!file.url) {
+    return defaultFileName;
+  }
+
+  return file.url.split('/').pop() || defaultFileName;
+}
+
+async function handleDownloadFile(
+  file: OperationLogFileModel | undefined,
+  defaultFileName: string,
+) {
+  if (!file?.ossId && !file?.exportTaskId) {
+    message.warning('暂无可下载文件');
+    return;
+  }
+
+  const hideLoading = message.loading('文件下载中...', 0);
+  try {
+    let data: Blob;
+    if (file.exportTaskId) {
+      data = await downloadExport(file.exportTaskId);
+    } else if (file.ossId) {
+      data = await ossDownload(file.ossId);
+    } else {
+      message.warning('暂无可下载文件');
+      return;
+    }
+    downloadByData(data, getFileName(file, defaultFileName));
+    message.success('下载完成');
+  } finally {
+    hideLoading();
+  }
+}
+
+export default defineComponent({
+  name: 'FileDownloadButton',
+  props: {
+    emptyText: {
+      default: '-',
+      type: String,
+    },
+    defaultFileName: {
+      required: true,
+      type: String,
+    },
+    file: {
+      default: undefined,
+      type: Object as PropType<OperationLogFileModel>,
+    },
+  },
+  setup(props) {
+    const downloading = ref(false);
+    async function download() {
+      if (downloading.value) return;
+      downloading.value = true;
+      try {
+        await handleDownloadFile(props.file, props.defaultFileName);
+      } finally {
+        downloading.value = false;
+      }
+    }
+    return () => {
+      if (!props.file?.ossId && !props.file?.exportTaskId) {
+        return (
+          <span>
+            {resultDownloadHint(props.file?.downloadStatus) ?? props.emptyText}
+          </span>
+        );
+      }
+
+      return (
+        <Button
+          block={false}
+          class="border-none p-0"
+          loading={downloading.value}
+          onClick={download}
+          type="link"
+        >
+          下载文件
+        </Button>
+      );
+    };
+  },
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/detailList.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/detailList.vue
new file mode 100644
index 0000000..b68d8d1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/detailList.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { BatchExecutionLogModel } from '#/api/iotlcm/tOperationlog/type';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { DetailList } from '#/api/iotlcm/tOperationlog';
+import BetterVben from '#/constants/BetterVben';
+
+import {
+  allocationFieldsForBatch,
+  DetailGridColumns,
+  DetailGridSchema,
+} from './model';
+
+const logInfo = ref<BatchExecutionLogModel>();
+
+async function handleOpenChange(isOpen: boolean) {
+  if (!isOpen) {
+    logInfo.value = undefined;
+    return;
+  }
+  const { row } = modalApi.getData() as { row: BatchExecutionLogModel };
+  logInfo.value = row;
+  await gridApi.formApi.resetForm();
+  gridApi.setGridOptions({
+    columns: allocationFieldsForBatch(DetailGridColumns ?? [], row),
+  });
+  await gridApi.reload();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: DetailGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.modal as any),
+    columns: allocationFieldsForBatch(DetailGridColumns ?? [], undefined),
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          const batchNo = logInfo.value?.batchNo;
+          if (!batchNo) {
+            return {
+              items: [],
+              page: page.currentPage,
+              pageSize: page.pageSize,
+              total: 0,
+            };
+          }
+          return await DetailList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            batchNo,
+            batchType: logInfo.value?.batchType,
+          });
+        },
+      },
+    },
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  onOpenChange: handleOpenChange,
+});
+</script>
+
+<template>
+  <Modal
+    :title="`执行日志明细${logInfo?.batchNo ? `-${logInfo.batchNo}` : ''}`"
+    :footer="false"
+  >
+    <Grid />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/index.vue
new file mode 100644
index 0000000..4b27684
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/index.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { BatchExecutionLogModel } from '#/api/iotlcm/tOperationlog/type';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { List, SyncReview } from '#/api/iotlcm/tOperationlog';
+import BetterVben from '#/constants/BetterVben';
+
+import detailListModal from './detailList.vue';
+import { IndexGridColumns, IndexGridSchema } from './model.jsx';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** 异步处理状态：6=待核查（上游已受理但补查未取到终态） */
+const BATCH_ASYNC_STATUS_REVIEW = 6;
+
+/** 批次类型：14=数据导出（无逐行明细，批次号不可点） */
+const EXPORT_BATCH_TYPE = 14;
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<BatchExecutionLogModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: BatchExecutionLogModel) {
+  viewModalApi.setData({ row }).open();
+}
+
+function handleDetailList(row: BatchExecutionLogModel) {
+  detailListModalApi.setData({ row }).open();
+}
+
+/**
+ * 手动同步上游结果：只按既有受理号重查一次，不重发办理请求。
+ */
+async function handleSyncReview(row: BatchExecutionLogModel) {
+  if (!row.batchNo) {
+    message.error('批次编号缺失，无法同步');
+    return;
+  }
+  Modal.confirm({
+    title: '同步上游结果',
+    centered: true,
+    content: `将按既有受理号重新查询批次 ${row.batchNo} 的上游执行结果，不会重新提交办理。是否继续？`,
+    onOk: async () => {
+      await SyncReview({
+        batchNo: row.batchNo as string,
+        reason: '页面手动同步',
+      });
+      message.success('同步请求已提交，请稍后刷新查看结果');
+      await gridApi.query();
+    },
+  });
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+
+const [DetailListModal, detailListModalApi] = useVbenModal({
+  connectedComponent: detailListModal,
+});
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="操作日志">
+      <template #action="{ row }">
+        <div class="flex items-center justify-center gap-2">
+          <Button
+            class="border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+          >
+            查看
+          </Button>
+          <Button
+            v-access:code="'cpm:common:batchExecutionLog:syncReview'"
+            v-if="row.batchAsyncStatus === BATCH_ASYNC_STATUS_REVIEW"
+            class="border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleSyncReview(row)"
+          >
+            同步结果
+          </Button>
+        </div>
+      </template>
+      <template #batchNo="{ row }">
+        <span v-if="Number(row.batchType) === EXPORT_BATCH_TYPE">
+          {{ row.batchNo }}
+        </span>
+        <Button v-else type="link" @click="handleDetailList(row)">
+          {{ row.batchNo }}
+        </Button>
+      </template>
+    </Grid>
+    <ViewModal />
+    <DetailListModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/model.test.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/model.test.tsx
new file mode 100644
index 0000000..585bcf5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/model.test.tsx
@@ -0,0 +1,366 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+  CardGridColumns as BatchCardColumns,
+  IndexGridColumns as BatchColumns,
+  EditFormSchema as BatchEditSchema,
+  ViewDescSchema as BatchViewDescSchema,
+  CardGridSchema,
+  getCardGridColumns,
+  getViewDescSchema as getBatchViewDescSchema,
+} from '../tBatch/model';
+import {
+  allocationFieldsForBatch,
+  DetailGridSchema,
+  IndexGridColumns as ExecutionLogColumns,
+  DetailGridColumns as ExecutionLogDetailColumns,
+  IndexGridSchema as ExecutionLogSchema,
+  ViewDescSchema as ExecutionLogViewDescSchema,
+  getViewDescSchema,
+  sourceUnit,
+  targetUnit,
+} from './model';
+
+vi.mock('#/utils/dict', () => ({
+  getDictOptions: (type: string) => {
+    switch (type) {
+      case 'detail_status': {
+        return [
+          { label: '待处理', value: 0 },
+          { label: '处理中', value: 1 },
+          { label: '成功', value: 2 },
+          { label: '失败', value: 3 },
+          { label: '待核查', value: 4 },
+          { label: '未执行', value: 5 },
+        ];
+      }
+      case 't_batch_execution_mode': {
+        return [
+          { label: '未知', value: '0' },
+          { label: '单卡', value: '1' },
+          { label: '批量', value: '2' },
+        ];
+      }
+      case 't_batch_source_channel': {
+        return [
+          { label: '控制台', value: 'console' },
+          { label: '小程序', value: 'mini_program' },
+        ];
+      }
+      case 't_batch_source_type': {
+        return [
+          { label: '选择', value: '0' },
+          { label: '文件', value: '3' },
+          { label: '定时任务', value: '4' },
+        ];
+      }
+      default: {
+        return [];
+      }
+    }
+  },
+}));
+
+describe('批次管理划拨单位展示', () => {
+  it('hides execution feedback for warehouse stock and restores it for batch details', () => {
+    expect(
+      getCardGridColumns({ batchType: 1 }, true).map((item) => item.field),
+    ).toEqual(['rowNo', 'iccid', 'msisdn', 'imsi']);
+    expect(
+      getCardGridColumns({ batchType: 1 }).map((item) => item.field),
+    ).toEqual([
+      'rowNo', 'iccid', 'msisdn', 'imsi', 'detailStatus', 'errorReason',
+    ]);
+  });
+  it('keeps inbound card identifiers before status and reason', () => {
+    for (const [columns, reasonField] of [
+      [BatchCardColumns ?? [], 'errorReason'],
+      [ExecutionLogDetailColumns ?? [], 'error.reason'],
+    ] as const) {
+      expect(
+        allocationFieldsForBatch([...columns], { batchType: 1 }).map(
+          (item) => item.field,
+        ),
+      ).toEqual([
+        'rowNo',
+        'iccid',
+        'msisdn',
+        'imsi',
+        'detailStatus',
+        reasonField,
+      ]);
+    }
+  });
+  it('卡清单不展示状态筛选并保留失败原因', () => {
+    const status = CardGridSchema.find(
+      (item) => item.fieldName === 'detailStatus',
+    );
+    expect(status).toBeUndefined();
+    expect(BatchCardColumns?.map((item) => item.field)).toContain(
+      'errorReason',
+    );
+  });
+  it('主列表不展示单位列，划拨详情和卡清单保留单位字段', () => {
+    for (const columns of [BatchColumns ?? [], ExecutionLogColumns ?? []]) {
+      expect(columns.map((item) => item.field)).not.toContain('sourceDeptName');
+      expect(columns.map((item) => item.field)).not.toContain('targetDeptName');
+    }
+    for (const fields of [
+      (BatchCardColumns ?? []).map((item) => item.field),
+      BatchViewDescSchema.map((item) => item.field),
+    ]) {
+      expect(fields).toContain('sourceDeptName');
+      expect(fields).toContain('targetDeptName');
+    }
+  });
+  it('非划拨详情和明细不显示单位字段，切换批次可恢复', () => {
+    for (const schema of [getViewDescSchema, getBatchViewDescSchema]) {
+      expect(schema({ batchType: 3 }).map((item) => item.field)).toContain(
+        'sourceDeptName',
+      );
+      for (const batchType of [1, 2, 101]) {
+        const fields = schema({ batchType }).map((item) => item.field);
+        expect(fields).not.toContain('sourceDeptName');
+        expect(fields).not.toContain('targetDeptName');
+      }
+    }
+    for (const columns of [
+      BatchCardColumns ?? [],
+      ExecutionLogDetailColumns ?? [],
+    ]) {
+      expect(
+        allocationFieldsForBatch(columns, { batchType: 1 }).map(
+          (item) => item.field,
+        ),
+      ).not.toContain('targetDeptName');
+      expect(
+        allocationFieldsForBatch(columns, { batchType: 3 }).map(
+          (item) => item.field,
+        ),
+      ).toContain('targetDeptName');
+    }
+  });
+  it('优先展示历史名称并区分逐行接收与信息缺失', () => {
+    expect(
+      sourceUnit({ sourceDeptId: 10, sourceDeptName: '历史划拨单位' }),
+    ).toBe('历史划拨单位');
+    expect(targetUnit({ targetDeptMode: 'per_row' })).toBe('按卡片明细接收');
+    expect(targetUnit({ targetDeptId: 20 })).toBe('单位已删除或信息未记录');
+    expect(sourceUnit({})).toBe('--');
+    expect(
+      targetUnit({ targetDeptId: 20, targetDeptName: '历史接收单位' }),
+    ).toBe('历史接收单位');
+  });
+});
+
+describe('execution log input method', () => {
+  it('places channel and mode between input method and result', () => {
+    for (const items of [
+      ExecutionLogColumns ?? [],
+      ExecutionLogViewDescSchema,
+    ]) {
+      const fields = items.map((item) => item.field);
+      const inputIndex = fields.indexOf('sourceType');
+      const channelIndex = fields.indexOf('sourceChannel');
+      const modeIndex = fields.indexOf('executionMode');
+      const resultIndex = fields.indexOf('runResult');
+      expect(inputIndex).toBeGreaterThanOrEqual(0);
+      expect(channelIndex).toBeGreaterThan(inputIndex);
+      expect(modeIndex).toBe(channelIndex + 1);
+      expect(resultIndex).toBe(modeIndex + 1);
+    }
+  });
+
+  it('requires explicit numeric execution mode only for new batches', () => {
+    const mode = BatchEditSchema.find(
+      (item) => item.fieldName === 'executionMode',
+    );
+    const props = (
+      mode?.componentProps as () => { options: { value: number }[] }
+    )();
+    expect(props.options.map((option) => option.value)).toEqual([1, 2]);
+    expect(mode?.rules).toBe('required');
+    const show = mode?.dependencies?.show as (values: {
+      id?: number;
+    }) => boolean;
+    expect(show({})).toBe(true);
+    expect(show({ id: 1 })).toBe(false);
+  });
+
+  it('keeps originating channels as strings and execution modes numeric including zero', () => {
+    const channel = ExecutionLogSchema.find(
+      (item) => item.fieldName === 'sourceChannel',
+    );
+    const mode = ExecutionLogSchema.find(
+      (item) => item.fieldName === 'executionMode',
+    );
+    const channelProps = (
+      channel?.componentProps as () => {
+        allowClear: boolean;
+        options: { value: string }[];
+      }
+    )();
+    const modeProps = (
+      mode?.componentProps as () => {
+        allowClear: boolean;
+        options: { value: number }[];
+      }
+    )();
+    expect(channelProps.allowClear).toBe(true);
+    expect(channelProps.options.map((option) => option.value)).toEqual([
+      'console',
+      'mini_program',
+    ]);
+    expect(modeProps.allowClear).toBe(true);
+    expect(modeProps.options.map((option) => option.value)).toEqual([0, 1, 2]);
+    for (const field of ['sourceChannel', 'executionMode']) {
+      expect(
+        ExecutionLogColumns?.find((column) => column.field === field),
+      ).toBeDefined();
+      expect(
+        ExecutionLogViewDescSchema.find((item) => item.field === field),
+      ).toBeDefined();
+    }
+  });
+
+  it('provides a clearable dictionary filter including numeric zero', () => {
+    const schema = ExecutionLogSchema.find(
+      (item) => item.fieldName === 'sourceType',
+    );
+    expect(schema?.component).toBe('Select');
+    expect(schema?.label).toBe('输入方式');
+    const props = schema?.componentProps;
+    expect(typeof props).toBe('function');
+    const options = (
+      props as () => {
+        allowClear: boolean;
+        options: { value: number }[];
+      }
+    )();
+    expect(options.allowClear).toBe(true);
+    expect(options.options.map((option) => option.value)).toEqual([0, 3, 4]);
+  });
+
+  it('does not label input method as the originating channel', () => {
+    expect(
+      ExecutionLogColumns?.find((item) => item.field === 'sourceType')?.title,
+    ).toBe('输入方式');
+    expect(
+      ExecutionLogViewDescSchema.find((item) => item.field === 'sourceType')
+        ?.label,
+    ).toBe('输入方式');
+  });
+});
+
+function fieldsWithLabel(items: readonly any[]) {
+  return items.map(({ field, label }) => field ?? label);
+}
+
+describe('batch count display contract', () => {
+  it('keeps only total count in the execution log list', () => {
+    const columns = ExecutionLogColumns ?? [];
+    const titles = columns.map((column: any) => column.title);
+    const fields = columns.map((column: any) => column.field);
+
+    expect(titles).toContain('总数量');
+    expect(titles).not.toContain('成功数量');
+    expect(titles).not.toContain('失败数量');
+    expect(fields).not.toContain('successCount');
+    expect(fields).not.toContain('failCount');
+  });
+
+  it('removes item-level counts from both read-only detail views', () => {
+    const executionLogFields = fieldsWithLabel(ExecutionLogViewDescSchema);
+    const batchFields = fieldsWithLabel(BatchViewDescSchema);
+
+    for (const fields of [executionLogFields, batchFields]) {
+      expect(fields).toContain('totalCount');
+      expect(fields).not.toContain('validCount');
+      expect(fields).not.toContain('successCount');
+      expect(fields).not.toContain('failCount');
+    }
+  });
+
+  it('keeps total count in the batch management list', () => {
+    const totalCountColumn = (BatchColumns ?? []).find(
+      (column: any) => column.field === 'totalCount',
+    );
+
+    expect(totalCountColumn).toBeDefined();
+  });
+});
+
+describe('review status display contract', () => {
+  it('shows the unknown count column in the execution log list', () => {
+    const columns = ExecutionLogColumns ?? [];
+    const unknownColumn = columns.find(
+      (column: any) => column.field === 'unknownCount',
+    );
+
+    expect(unknownColumn?.title).toBe('待核查数量');
+  });
+});
+
+describe('allocate execution failure details', () => {
+  it('shows the stored failure reason for each card', () => {
+    const columns = ExecutionLogDetailColumns ?? [];
+    const reasonColumn = columns.find(
+      (column: any) => column.field === 'error.reason',
+    );
+
+    // 该列同时承载失败原因与待核查说明，不得只写"异常原因"。
+    expect(reasonColumn?.title).toBe('失败／待核查说明');
+    const renderReason = reasonColumn?.slots?.default;
+    expect(typeof renderReason).toBe('function');
+    if (typeof renderReason !== 'function') {
+      throw new TypeError('failure reason cell is not rendered');
+    }
+    expect(
+      renderReason({
+        row: { error: { reason: '套餐已过期，不能划拨' } },
+      } as Parameters<typeof renderReason>[0]),
+    ).toBe('套餐已过期，不能划拨');
+  });
+});
+
+describe('batch execution failure filtering', () => {
+  it('does not offer a status filter in either card detail view', () => {
+    expect(
+      DetailGridSchema.some((item) => item.fieldName === 'detailStatus'),
+    ).toBe(false);
+    expect(
+      CardGridSchema.some((item) => item.fieldName === 'detailStatus'),
+    ).toBe(false);
+  });
+  it('does not describe unfinished and uncertain batches as failures', () => {
+    const runResult = ExecutionLogColumns?.find(
+      (column) => column.field === 'runResult',
+    )?.slots?.default;
+    if (typeof runResult !== 'function')
+      throw new TypeError('Missing result renderer');
+    for (const batchAsyncStatus of [0, 1, 2]) {
+      expect(
+        runResult({ row: { batchAsyncStatus, runResult: 2 } } as Parameters<
+          typeof runResult
+        >[0]),
+      ).toBe('未出结果');
+    }
+    expect(
+      runResult({ row: { batchAsyncStatus: 6, runResult: 2 } } as Parameters<
+        typeof runResult
+      >[0]),
+    ).toContain('待核查');
+  });
+  it('shows either supported backend reason field', () => {
+    const reason = ExecutionLogDetailColumns?.find(
+      (column) => column.field === 'error.reason',
+    )?.slots?.default;
+    if (typeof reason !== 'function')
+      throw new TypeError('Missing reason renderer');
+    expect(
+      reason({ row: { errorReason: 'provider declined' } } as Parameters<
+        typeof reason
+      >[0]),
+    ).toBe('provider declined');
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/model.tsx
new file mode 100644
index 0000000..f27f102
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/model.tsx
@@ -0,0 +1,459 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import DictEnum from '#/constants/DictEnum';
+import { renderDict, renderDictTag } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+import { resultFileHint } from '../batchFeedback';
+import {
+  ALLOCATE_BATCH_TYPE,
+  resolveDisplayBatchType,
+  visibleBatchTypeOptions,
+} from '../batchTypeOptions';
+import FileDownloadButton from './components/fileDownloadButton';
+
+function renderGlobalBatchType(batchType: unknown) {
+  return renderDictTag(
+    String(resolveDisplayBatchType(batchType) ?? ''),
+    visibleBatchTypeOptions(getDictOptions(DictEnum.T_GLOBAL_BATCH_TYPE)),
+  );
+}
+
+export function renderBatchRunResult(row: {
+  batchAsyncStatus?: number | string;
+  runResult?: number;
+}) {
+  const status = Number(row.batchAsyncStatus);
+  if ([0, 1, 2].includes(status)) return '未出结果';
+  if (status === 6) return '待核查（结果未确认）';
+  return renderDict(String(row.runResult ?? ''), DictEnum.T_RUN_RESULT);
+}
+
+function renderBatchSourceType(sourceType?: null | number) {
+  if (sourceType === null || sourceType === undefined) {
+    return '--';
+  }
+  return renderDict(String(sourceType), DictEnum.T_BATCH_SOURCE_TYPE);
+}
+
+// 重启批次是「先停机、等待、再复机」两段式：等待期间主状态仍是处理中，
+// 但明细已经是停机结果。这里单独显示「等待复机」，避免被误认为卡住或已办结。
+function renderAsyncStatus(row: {
+  batchAsyncStatus?: number | string;
+  restartPhase?: string;
+  restartResumeAt?: string;
+}) {
+  const status = Number(row?.batchAsyncStatus ?? 0);
+  if (status === 2 && row?.restartPhase === 'waiting_resume') {
+    const resumeAt = String(row?.restartResumeAt ?? '').slice(11, 16);
+    return resumeAt ? `等待复机（预计 ${resumeAt}）` : '等待复机';
+  }
+  return renderDict(
+    String(row?.batchAsyncStatus ?? ''),
+    DictEnum.T_BATCH_ASYNC_STATUS,
+  );
+}
+
+export function sourceUnit(row: {
+  sourceDeptId?: number;
+  sourceDeptName?: string;
+}) {
+  return (
+    row.sourceDeptName || (row.sourceDeptId ? '单位已删除或信息未记录' : '--')
+  );
+}
+export function targetUnit(row: {
+  targetDeptId?: number;
+  targetDeptMode?: string;
+  targetDeptName?: string;
+}) {
+  return row.targetDeptMode === 'per_row'
+    ? '按卡片明细接收'
+    : row.targetDeptName ||
+        (row.targetDeptId ? '单位已删除或信息未记录' : '--');
+}
+export const allocationColumns = [
+  {
+    title: '划拨单位',
+    field: 'sourceDeptName',
+    minWidth: 160,
+    slots: {
+      default: ({
+        row,
+      }: {
+        row: { sourceDeptId?: number; sourceDeptName?: string };
+      }) => sourceUnit(row),
+    },
+  },
+  {
+    title: '接收单位',
+    field: 'targetDeptName',
+    minWidth: 160,
+    slots: {
+      default: ({
+        row,
+      }: {
+        row: {
+          targetDeptId?: number;
+          targetDeptMode?: string;
+          targetDeptName?: string;
+        };
+      }) => targetUnit(row),
+    },
+  },
+];
+
+/** ====================  查询表单  ==================== */
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'sourceChannel',
+    component: 'Select',
+    label: '发起渠道',
+    componentProps: () => ({
+      allowClear: true,
+      options: getDictOptions(DictEnum.T_BATCH_SOURCE_CHANNEL),
+    }),
+  },
+  {
+    fieldName: 'executionMode',
+    component: 'Select',
+    label: '操作规模',
+    componentProps: () => ({
+      allowClear: true,
+      options: getDictOptions(DictEnum.T_BATCH_EXECUTION_MODE).map((item) => ({
+        ...item,
+        value: Number(item.value),
+      })),
+    }),
+  },
+  {
+    fieldName: 'keyword',
+    component: 'Input',
+    label: '关键字',
+    componentProps: {
+      placeholder: '请输入关键字',
+    },
+  },
+  {
+    fieldName: 'batchNo',
+    component: 'Input',
+    label: '批次编号',
+    componentProps: {
+      placeholder: '请输入批次编号',
+    },
+  },
+  {
+    fieldName: 'batchType',
+    component: 'Select',
+    label: '批次类型',
+    componentProps: () => ({
+      allowClear: true,
+      placeholder: '请选择批次类型',
+      options: visibleBatchTypeOptions(
+        getDictOptions(DictEnum.T_GLOBAL_BATCH_TYPE),
+      ),
+    }),
+  },
+  {
+    fieldName: 'batchAsyncStatus',
+    component: 'Select',
+    label: '异步处理状态',
+    componentProps: {
+      allowClear: true,
+      placeholder: '请选择异步处理状态',
+      options: getDictOptions(DictEnum.T_BATCH_ASYNC_STATUS),
+    },
+  },
+  {
+    fieldName: 'sourceType',
+    component: 'Select',
+    label: '输入方式',
+    componentProps: () => ({
+      allowClear: true,
+      placeholder: '请选择输入方式',
+      options: getDictOptions(DictEnum.T_BATCH_SOURCE_TYPE).map((option) => ({
+        ...option,
+        value: Number(option.value),
+      })),
+    }),
+  },
+  {
+    fieldName: 'createdAt',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      clearable: true,
+      type: 'datetimerange',
+      valueFormat: 'YYYY-MM-DD',
+    },
+  },
+];
+
+/** ====================  表格列  ==================== */
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    title: 'ID',
+    field: 'id',
+    width: 80,
+  },
+  {
+    title: '批次编号',
+    field: 'batchNo',
+    minWidth: 220,
+    slots: {
+      default: 'batchNo',
+    },
+  },
+  {
+    title: '批次类型',
+    field: 'batchType',
+    slots: {
+      default: ({ row }) => renderGlobalBatchType(row),
+    },
+    width: 110,
+  },
+  {
+    title: '输入方式',
+    field: 'sourceType',
+    width: 110,
+    slots: {
+      default: ({ row }) => renderBatchSourceType(row.sourceType),
+    },
+  },
+  {
+    title: '发起渠道',
+    field: 'sourceChannel',
+    width: 110,
+    slots: {
+      default: ({ row }) =>
+        renderDict(
+          row.sourceChannel || 'legacy',
+          DictEnum.T_BATCH_SOURCE_CHANNEL,
+        ),
+    },
+  },
+  {
+    title: '操作规模',
+    field: 'executionMode',
+    width: 100,
+    slots: {
+      default: ({ row }) =>
+        renderDict(
+          String(row.executionMode ?? 0),
+          DictEnum.T_BATCH_EXECUTION_MODE,
+        ),
+    },
+  },
+  {
+    title: '运行结果',
+    field: 'runResult',
+    width: 100,
+    slots: {
+      default: ({ row }) => renderBatchRunResult(row),
+    },
+  },
+  {
+    title: '异步状态',
+    field: 'batchAsyncStatus',
+    width: 110,
+    slots: {
+      default: ({ row }) => renderAsyncStatus(row),
+    },
+  },
+  {
+    title: '总数量',
+    field: 'totalCount',
+    width: 90,
+    slots: {
+      default: ({ row }) => row.totalCount ?? '--',
+    },
+  },
+  {
+    title: '待核查数量',
+    field: 'unknownCount',
+    width: 110,
+    slots: {
+      default: ({ row }) => row.unknownCount ?? 0,
+    },
+  },
+  {
+    title: '开始时间',
+    field: 'startTime',
+    width: 170,
+  },
+  {
+    title: '结束时间',
+    field: 'endTime',
+    width: 170,
+  },
+  { title: '操作', width: 220, slots: { default: 'action' }, fixed: 'right' },
+];
+
+/** ====================  明细查询表单  ==================== */
+export const DetailGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'keyword',
+    component: 'Input',
+    label: '关键字',
+    componentProps: {
+      placeholder: '请输入关键字',
+    },
+  },
+  {
+    fieldName: 'iccid',
+    component: 'Input',
+    label: 'ICCID',
+    componentProps: {
+      placeholder: '请输入ICCID',
+    },
+  },
+];
+
+/** ====================  明细表格列  ==================== */
+export const DetailGridColumns: VxeGridProps['columns'] = [
+  ...allocationColumns,
+  {
+    title: '行号',
+    field: 'rowNo',
+    width: 90,
+    slots: {
+      default: ({ row }) => row.rowNo ?? '--',
+    },
+  },
+  {
+    title: 'ICCID',
+    field: 'iccid',
+    minWidth: 180,
+  },
+  {
+    title: 'MSISDN',
+    field: 'msisdn',
+    minWidth: 140,
+  },
+  {
+    title: 'IMSI',
+    field: 'imsi',
+    minWidth: 160,
+  },
+  {
+    title: '明细状态',
+    field: 'detailStatus',
+    width: 100,
+    slots: {
+      default: ({ row }) =>
+        renderDict(String(row.detailStatus ?? ''), DictEnum.T_DETAIL_STATUS),
+    },
+  },
+  {
+    title: '失败／待核查说明',
+    field: 'error.reason',
+    minWidth: 300,
+    slots: {
+      default: ({ row }) => row.error?.reason || row.errorReason || '--',
+    },
+  },
+];
+
+/** ====================  查看字段列表  ==================== */
+export const ViewDescSchema: DescItem[] = [
+  {
+    field: 'sourceDeptName',
+    label: '划拨单位',
+    render: (_value, data) => sourceUnit(data ?? {}),
+  },
+  {
+    field: 'targetDeptName',
+    label: '接收单位',
+    render: (_value, data) => targetUnit(data ?? {}),
+  },
+  { field: 'id', label: '主键ID' },
+  { field: 'batchNo', label: '批次编号' },
+  {
+    field: 'batchType',
+    label: '批次类型',
+    render(batchType, data) {
+      return renderGlobalBatchType(data ?? batchType);
+    },
+  },
+  {
+    field: 'sourceType',
+    label: '输入方式',
+    render(sourceType) {
+      return renderBatchSourceType(sourceType);
+    },
+  },
+  {
+    field: 'sourceChannel',
+    label: '发起渠道',
+    render: (value) =>
+      renderDict(value || 'legacy', DictEnum.T_BATCH_SOURCE_CHANNEL),
+  },
+  {
+    field: 'executionMode',
+    label: '操作规模',
+    render: (value) =>
+      renderDict(String(value ?? 0), DictEnum.T_BATCH_EXECUTION_MODE),
+  },
+  {
+    field: 'runResult',
+    label: '运行结果',
+    render(runResult, row) {
+      return renderBatchRunResult({ ...row, runResult });
+    },
+  },
+  {
+    field: 'batchAsyncStatus',
+    label: '异步处理状态',
+    render(_value, row) {
+      return renderAsyncStatus(row);
+    },
+  },
+  { field: 'totalCount', label: '总数量' },
+  { field: 'unknownCount', label: '待核查数量', render: (value) => value ?? 0 },
+  { field: 'failReason', label: '失败／待核查说明' },
+  {
+    field: 'sourceFile',
+    label: '源文件',
+    render(sourceFile) {
+      return (
+        <FileDownloadButton
+          defaultFileName="source-file.xlsx"
+          file={sourceFile}
+        />
+      );
+    },
+  },
+  {
+    field: 'resultFile',
+    label: '结果文件',
+    render(resultFile, data) {
+      return (
+        <FileDownloadButton
+          defaultFileName="result-file.xlsx"
+          emptyText={resultFileHint(data?.batchAsyncStatus)}
+          file={resultFile}
+        />
+      );
+    },
+  },
+  { field: 'startTime', label: '开始时间' },
+  { field: 'endTime', label: '结束时间' },
+];
+
+export function allocationFieldsForBatch<T extends { field?: string }>(
+  items: T[],
+  batch: unknown,
+): T[] {
+  return Number(resolveDisplayBatchType(batch)) === ALLOCATE_BATCH_TYPE
+    ? items
+    : items.filter(
+        (item) =>
+          item.field !== 'sourceDeptName' && item.field !== 'targetDeptName',
+      );
+}
+
+export function getViewDescSchema(batch?: unknown): DescItem[] {
+  return allocationFieldsForBatch(ViewDescSchema, batch);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/view.vue
new file mode 100644
index 0000000..538fe2d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog/view.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { BatchExecutionLogModel } from '#/api/iotlcm/tOperationlog/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Summary } from '#/api/iotlcm/tOperationlog';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { isBatchResultPending } from '../batchFeedback';
+import { getViewDescSchema } from './model';
+
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: BatchExecutionLogModel };
+  if (!row.batchNo) {
+    return null;
+  }
+  if (isBatchResultPending(row.batchAsyncStatus)) {
+    setDescProps({ data: row, schema: getViewDescSchema(row) }, true);
+    return;
+  }
+  const data = await Summary({ batchNo: row.batchNo });
+  setDescProps({ data, schema: getViewDescSchema(data) }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: getViewDescSchema(),
+});
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Modal title="执行日志详情" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardCancellation/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardCancellation/index.vue
new file mode 100644
index 0000000..f84849c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardCancellation/index.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { TSimCardCancellationFilter } from '#/api/iotlcm/tLifeCycle/tSimCardCancellation/type';
+
+import { h } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { MdiExport, SyncOutlined } from '@vben/icons';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Export, List } from '#/api/iotlcm/tLifeCycle/tSimCardCancellation';
+import BetterVben from '#/constants/BetterVben';
+import { commonDownloadExcel, getExportColumns } from '#/utils/file/download';
+
+import { IndexGridColumns, IndexGridSchema } from './model';
+
+type FormValues = TSimCardCancellationFilter & {
+  cancelledAt?: string[];
+};
+
+function normalizeFilters(values: FormValues): TSimCardCancellationFilter {
+  const { cancelledAt, ...filters } = values;
+  return {
+    ...filters,
+    cancelledStartAt: cancelledAt?.[0],
+    cancelledEndAt: cancelledAt?.[1],
+  };
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+async function handleExport() {
+  const filters = normalizeFilters(gridApi.formApi.form.values as FormValues);
+  // 只导出当前列表显示的列，顺序与页面一致
+  await commonDownloadExcel(Export, '', {
+    ...filters,
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: FormValues) => {
+          return await List({
+            ...normalizeFilters(formValues),
+            page: page.currentPage,
+            pageSize: page.pageSize,
+          });
+        },
+      },
+    },
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="销户卡信息">
+      <template #toolbar-tools>
+        <Button :icon="h(SyncOutlined)" @click="handleRefresh"> 刷新 </Button>
+        <Button
+          class="ml-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          v-access:code="'cpm:iot:tSimCardCancellation:export'"
+          @click="handleExport"
+        >
+          导出
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardCancellation/model.test.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardCancellation/model.test.ts
new file mode 100644
index 0000000..641814d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardCancellation/model.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('#/api/iotlcm/tChannel/tSimChannels', () => ({ List: vi.fn() }));
+vi.mock('#/api/system/dept', () => ({ getSysDeptTreeApi: vi.fn() }));
+vi.mock('#/utils', () => ({
+  renderDict: vi.fn(),
+  renderPopoverMemberSumma: vi.fn(),
+}));
+
+import { filterCancellationChannel, IndexGridSchema } from './model';
+
+describe('销户卡所属通道搜索', () => {
+  const option = { label: '河南移动223', value: 'CMCC-HN-223' };
+  it.each(['河南', '移动', '223', ' cmcc ', 'hn'])(
+    '按显示名称或编号匹配 %s',
+    (input) => {
+      expect(filterCancellationChannel(input, option)).toBe(true);
+    },
+  );
+  it('清空搜索恢复选项，未匹配内容不显示', () => {
+    expect(filterCancellationChannel('  ', option)).toBe(true);
+    expect(filterCancellationChannel('河北', option)).toBe(false);
+    expect(filterCancellationChannel('河南')).toBe(false);
+  });
+  it('不使用选项中隐藏的全名匹配', () => {
+    expect(
+      filterCancellationChannel('真实上游', {
+        ...option,
+        chanName: '真实上游',
+      } as typeof option),
+    ).toBe(false);
+  });
+  it('通道筛选使用名称与编号匹配并保留通道编号作为值', () => {
+    const field = IndexGridSchema.find((item) => item.fieldName === 'chanKey');
+    expect(field?.componentProps).toMatchObject({
+      filterOption: filterCancellationChannel,
+      showSearch: true,
+      allowClear: true,
+      labelField: 'chanName',
+      valueField: 'chanKey',
+    });
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardCancellation/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardCancellation/model.tsx
new file mode 100644
index 0000000..b39710f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardCancellation/model.tsx
@@ -0,0 +1,174 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { List as ChannelList } from '#/api/iotlcm/tChannel/tSimChannels';
+import { getSysDeptTreeApi } from '#/api/system/dept';
+import DictEnum from '#/constants/DictEnum';
+import { renderDict, renderPopoverMemberSumma } from '#/utils';
+
+export function filterCancellationChannel(
+  input: string,
+  option?: { label?: unknown; value?: unknown },
+) {
+  const keyword = input.trim().toLowerCase();
+  return (
+    !keyword ||
+    [option?.label, option?.value].some((value) =>
+      String(value ?? '')
+        .toLowerCase()
+        .includes(keyword),
+    )
+  );
+}
+
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'cardValue',
+    component: 'Input',
+    label: '卡号',
+    componentProps: {
+      placeholder: '请输入MSISDN/ICCID/IMSI',
+    },
+  },
+  {
+    fieldName: 'cancelBatchNo',
+    component: 'Input',
+    label: '销户批次',
+    componentProps: {
+      placeholder: '请输入CAN批次号',
+    },
+  },
+  {
+    fieldName: 'chanKey',
+    component: 'ApiSelect',
+    label: '所属通道',
+    componentProps: {
+      allowClear: true,
+      api: ChannelList,
+      filterOption: filterCancellationChannel,
+      labelField: 'chanName',
+      placeholder: '请选择通道',
+      resultField: 'items',
+      showSearch: true,
+      valueField: 'chanKey',
+    },
+  },
+  {
+    fieldName: 'deptId',
+    component: 'ApiSelect',
+    label: '渠道客户',
+    componentProps: {
+      allowClear: true,
+      api: getSysDeptTreeApi,
+      params: { deptType: 1 },
+      afterFetch: (res: any) => res.items?.[0]?.children || [],
+      labelField: 'deptName',
+      valueField: 'deptId',
+    },
+  },
+  {
+    fieldName: 'cancelledAt',
+    component: 'RangePicker',
+    label: '销户时间',
+    componentProps: {
+      allowClear: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      showTime: { format: 'HH:mm:ss' },
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    fieldName: 'remark',
+    component: 'Input',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注关键字',
+    },
+  },
+];
+
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    title: '销户批次号',
+    field: 'cancelBatchNo',
+    minWidth: 190,
+  },
+  {
+    title: '销户时间',
+    field: 'cancelledAt',
+    minWidth: 170,
+  },
+  {
+    title: 'MSISDN',
+    field: 'msisdn',
+    minWidth: 145,
+  },
+  {
+    title: 'ICCID',
+    field: 'iccid',
+    minWidth: 205,
+  },
+  {
+    title: 'IMSI',
+    field: 'imsi',
+    minWidth: 180,
+  },
+  {
+    title: 'IMEI',
+    field: 'imei',
+    minWidth: 160,
+  },
+  {
+    title: '卡状态',
+    field: 'bossCardStatus',
+    params: { dictType: DictEnum.T_BOSS_CARD_STATUS },
+    minWidth: 110,
+    slots: {
+      default: ({ row }) =>
+        renderDict(row.bossCardStatus, DictEnum.T_BOSS_CARD_STATUS),
+    },
+  },
+  {
+    title: '通道',
+    field: 'chanName',
+    minWidth: 180,
+  },
+  {
+    title: '渠道客户',
+    field: 'deptName',
+    minWidth: 180,
+  },
+  {
+    title: '销户前套餐',
+    field: 'packageName',
+    minWidth: 180,
+  },
+  {
+    title: '入库批次',
+    field: 'inboundBatchNo',
+    minWidth: 180,
+  },
+  {
+    title: '出库批次',
+    field: 'outboundBatchNo',
+    minWidth: 180,
+  },
+  {
+    title: '划拨批次',
+    field: 'allocationBatchNo',
+    minWidth: 180,
+  },
+  {
+    title: '操作人',
+    field: 'createdBy',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => renderPopoverMemberSumma(row.createdBySumma),
+    },
+  },
+  {
+    title: '备注',
+    field: 'remark',
+    minWidth: 220,
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/OutboundBalancePreview.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/OutboundBalancePreview.vue
new file mode 100644
index 0000000..0b9a8eb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/OutboundBalancePreview.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import type { TSimCardOutboundCustomerBalanceRes } from '#/api/iotlcm/tLifeCycle/tSimCardOutbound';
+
+import { computed, ref, watch } from 'vue';
+
+import { CustomerBalance } from '#/api/iotlcm/tLifeCycle/tSimCardOutbound';
+
+import { outboundAmount, outboundMoney } from './outboundBalance';
+
+const props = defineProps<{
+  values?: Record<string, any>;
+}>();
+
+const loading = ref(false);
+const errorText = ref('');
+const balance = ref<TSimCardOutboundCustomerBalanceRes>();
+let querySeq = 0;
+
+const customerAgentId = computed(() =>
+  Number(props.values?.customerAgentId ?? 0),
+);
+const orderAmount = computed(() => outboundAmount(props.values?.amount));
+const offlineContractCompleted = computed(
+  () => props.values?.offlineContractCompleted === true,
+);
+const availableBalance = computed(() => Number(balance.value?.balance ?? 0));
+const afterBalance = computed(() => availableBalance.value - orderAmount.value);
+const hasNormalAccount = computed(() => {
+  const data = balance.value;
+  return Boolean(data?.accountExists && Number(data.status) === 0);
+});
+const isInsufficient = computed(
+  () =>
+    hasNormalAccount.value &&
+    !offlineContractCompleted.value &&
+    orderAmount.value > 0 &&
+    availableBalance.value + 0.0001 < orderAmount.value,
+);
+
+const panelClass = computed(() => {
+  const data = balance.value;
+  if (!customerAgentId.value || loading.value) {
+    return 'border-[#dbeafe] bg-[#eff6ff] dark:border-[#1d4ed8] dark:bg-[#172554]/40';
+  }
+  if (
+    errorText.value ||
+    !data?.accountExists ||
+    Number(data.status) !== 0 ||
+    isInsufficient.value
+  ) {
+    return 'border-[#fecaca] bg-[#fef2f2] dark:border-[#7f1d1d] dark:bg-[#450a0a]/30';
+  }
+  if (offlineContractCompleted.value) {
+    return 'border-[#e5e7eb] bg-[#f9fafb] dark:border-[#333] dark:bg-[#1f1f1f]';
+  }
+  return 'border-[#bbf7d0] bg-[#f0fdf4] dark:border-[#166534] dark:bg-[#052e16]/30';
+});
+
+const balanceTitle = computed(() => {
+  const data = balance.value;
+  if (!customerAgentId.value) {
+    return '选择客户后显示';
+  }
+  if (loading.value) {
+    return '查询中...';
+  }
+  if (errorText.value) {
+    return '查询失败';
+  }
+  if (!data?.accountExists) {
+    return '暂无余额账户';
+  }
+  if (Number(data.status) !== 0) {
+    return data.statusText || '账户异常';
+  }
+  return `￥${outboundMoney(data.balance)}`;
+});
+
+const helperText = computed(() => {
+  const data = balance.value;
+  if (!customerAgentId.value) {
+    return '不勾选线下合同完成时，本次出库将从客户余额扣款。';
+  }
+  if (loading.value) {
+    return '正在读取客户余额。';
+  }
+  if (errorText.value) {
+    return errorText.value;
+  }
+  if (!data?.accountExists) {
+    return '客户暂无余额账户，请先充值后再出库。';
+  }
+  if (Number(data.status) !== 0) {
+    return '客户余额账户状态异常，不能使用余额支付。';
+  }
+  if (offlineContractCompleted.value) {
+    return '已选择线下合同完成，本次提交不扣客户余额。';
+  }
+  if (orderAmount.value <= 0) {
+    return '请输入订单金额后计算扣后余额。';
+  }
+  if (isInsufficient.value) {
+    return `余额不足，差额￥${outboundMoney(Math.abs(afterBalance.value))}。`;
+  }
+  return `余额足够，扣后余额￥${outboundMoney(afterBalance.value)}。`;
+});
+
+watch(
+  customerAgentId,
+  async (id) => {
+    const seq = ++querySeq;
+    errorText.value = '';
+    balance.value = undefined;
+    if (!id) {
+      loading.value = false;
+      return;
+    }
+    loading.value = true;
+    try {
+      const data = await CustomerBalance({ customerAgentId: id });
+      if (seq === querySeq) {
+        balance.value = data;
+      }
+    } catch {
+      if (seq === querySeq) {
+        errorText.value = '余额查询失败，请稍后重试。';
+      }
+    } finally {
+      if (seq === querySeq) {
+        loading.value = false;
+      }
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div
+    class="mt-3 rounded-md border px-4 py-3 text-[13px] transition-colors"
+    :class="panelClass"
+  >
+    <div class="flex flex-wrap items-start justify-between gap-3">
+      <div class="min-w-[180px]">
+        <div class="text-xs text-[#6b7280] dark:text-[#9ca3af]">客户余额</div>
+        <div class="mt-1 text-lg font-semibold text-[#111827] dark:text-white">
+          {{ balanceTitle }}
+        </div>
+        <div
+          v-if="balance?.customerName"
+          class="mt-1 text-xs text-[#6b7280] dark:text-[#9ca3af]"
+        >
+          {{ balance.customerName }}
+        </div>
+      </div>
+
+      <div class="flex flex-wrap justify-end gap-4 text-right">
+        <div>
+          <div class="text-xs text-[#6b7280] dark:text-[#9ca3af]">订单金额</div>
+          <div class="mt-1 font-medium text-[#111827] dark:text-white">
+            ￥{{ outboundMoney(orderAmount) }}
+          </div>
+        </div>
+        <div
+          v-if="
+            hasNormalAccount && !offlineContractCompleted && orderAmount > 0
+          "
+        >
+          <div class="text-xs text-[#6b7280] dark:text-[#9ca3af]">扣后余额</div>
+          <div
+            class="mt-1 font-medium"
+            :class="
+              isInsufficient
+                ? 'text-[#dc2626]'
+                : 'text-[#15803d] dark:text-[#86efac]'
+            "
+          >
+            ￥{{ outboundMoney(afterBalance) }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-2 text-xs text-[#4b5563] dark:text-[#d1d5db]">
+      {{ helperText }}
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/batch-outbound.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/batch-outbound.vue
new file mode 100644
index 0000000..7defb7d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/batch-outbound.vue
@@ -0,0 +1,346 @@
+<script setup lang="ts">
+import type {
+  TSimCardOutboundBatchSubmitParam,
+  TSimCardOutboundInboundBatchListItem,
+} from '#/api/iotlcm/tLifeCycle/tSimCardOutbound';
+
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, message, Steps } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  BatchSubmit,
+  InboundBatchCards,
+  InboundBatchList,
+} from '#/api/iotlcm/tLifeCycle/tSimCardOutbound';
+import BetterVben from '#/constants/BetterVben';
+import DictEnum from '#/constants/DictEnum';
+import { getDictOptions } from '#/utils/dict';
+
+import {
+  BatchFormSchema,
+  normalizeOutboundSubmitValues,
+  OutboundBatchCardPreviewColumns,
+  OutboundBatchGridColumns,
+} from './model';
+import { validateOutboundBalanceBeforeSubmit } from './outboundBalance';
+import OutboundBalancePreview from './OutboundBalancePreview.vue';
+
+const emit = defineEmits<{ confirm: [] }>();
+const stepItems = [
+  { title: '选择批次' },
+  { title: '确认卡' },
+  { title: '填写信息' },
+];
+
+const currentStep = ref(0);
+const selectedBatch = ref<TSimCardOutboundInboundBatchListItem>();
+const totalCardCount = ref(0);
+let cardQuerySeq = 0;
+
+const selectedBatchNo = computed(() => selectedBatch.value?.batchNo ?? '');
+const selectedBatchStockCount = computed(
+  () => selectedBatch.value?.stockCount ?? totalCardCount.value,
+);
+const allModeText = computed(
+  () => `将出库该批次全部当前库存卡，共 ${selectedBatchStockCount.value} 张`,
+);
+
+async function queryCards() {
+  const querySeq = ++cardQuerySeq;
+  totalCardCount.value = 0;
+  if (!selectedBatchNo.value) {
+    return;
+  }
+
+  await nextTick();
+  if (querySeq !== cardQuerySeq) {
+    return;
+  }
+
+  const gridApi = previewCardGridApi;
+  const formValues =
+    typeof gridApi.formApi?.getValues === 'function'
+      ? await gridApi.formApi.getValues()
+      : {};
+
+  if (querySeq !== cardQuerySeq) {
+    return;
+  }
+  await gridApi.reload(formValues ?? {});
+}
+
+async function handleSelectBatch() {
+  const record = batchGridApi.grid.getRadioRecord() as
+    | TSimCardOutboundInboundBatchListItem
+    | undefined;
+  if (!record?.batchNo) {
+    message.warning('请选择出库批次');
+    return;
+  }
+
+  selectedBatch.value = record;
+  currentStep.value = 1;
+  await queryCards();
+}
+
+function handleCardQuerySuccess(payload?: any) {
+  totalCardCount.value = payload?.response?.total ?? 0;
+}
+
+async function handleNextFromCards() {
+  if (!selectedBatchNo.value) {
+    message.warning('请选择出库批次');
+    currentStep.value = 0;
+    return;
+  }
+  currentStep.value = 2;
+}
+
+async function handleSubmit() {
+  const [flag, values] = await BetterVben.function.formValidate(formApi);
+  if (!flag) {
+    return;
+  }
+  if (!selectedBatchNo.value) {
+    message.warning('请选择出库批次');
+    currentStep.value = 0;
+    return;
+  }
+
+  if (
+    !(await validateOutboundBalanceBeforeSubmit(values as Record<string, any>))
+  ) {
+    return;
+  }
+
+  await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+    const res = await BatchSubmit({
+      ...normalizeOutboundSubmitValues(values as Record<string, any>),
+      batchNo: selectedBatchNo.value,
+    } as TSimCardOutboundBatchSubmitParam);
+    message.success(
+      `出库任务已提交，共 ${res?.total ?? res?.quantity ?? 0} 张卡，批次号：${res?.batchNo || '-'}。可在批次执行记录中查看处理进度。`,
+      5,
+    );
+    emit('confirm');
+    modalApi.close();
+  });
+}
+
+function handlePrev() {
+  currentStep.value = Math.max(0, currentStep.value - 1);
+}
+
+function handleCancel() {
+  modalApi.close();
+}
+
+async function handleReset() {
+  currentStep.value = 0;
+  selectedBatch.value = undefined;
+  totalCardCount.value = 0;
+  cardQuerySeq++;
+  await formApi.resetForm();
+}
+
+const [BatchGrid, batchGridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.custom as any),
+    schema: [
+      {
+        fieldName: 'batchNo',
+        label: '批次号',
+        component: 'Input',
+      },
+      {
+        fieldName: 'chanName',
+        label: '通道名称',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入通道名称',
+        },
+      },
+      {
+        fieldName: 'upPkgKeyword',
+        label: '上游套餐',
+        component: 'Input',
+        componentProps: {
+          placeholder: '请输入上游套餐',
+        },
+      },
+      {
+        fieldName: 'cardType',
+        label: '卡类型',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: getDictOptions(DictEnum.T_CARD_TYPE),
+          placeholder: '请选择卡类型',
+        },
+      },
+      {
+        fieldName: 'agreementExpiryMonths',
+        label: '协议到期',
+        component: 'Select',
+        componentProps: {
+          allowClear: true,
+          options: [
+            { label: '近1个月', value: 1 },
+            { label: '近3个月', value: 3 },
+            { label: '近6个月', value: 6 },
+          ],
+          placeholder: '请选择',
+        },
+      },
+    ],
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.modal as any),
+    columns: OutboundBatchGridColumns,
+    height: 430,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          return await InboundBatchList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+
+const [PreviewCardGrid, previewCardGridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.custom as any),
+    schema: [
+      {
+        fieldName: 'iccid',
+        label: 'ICCID',
+        component: 'Input',
+      },
+      {
+        fieldName: 'msisdn',
+        label: 'MSISDN',
+        component: 'Input',
+      },
+      {
+        fieldName: 'imsi',
+        label: 'IMSI',
+        component: 'Input',
+      },
+    ],
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.modal as any),
+    columns: OutboundBatchCardPreviewColumns,
+    height: 430,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          if (!selectedBatchNo.value) {
+            return { items: [], total: 0 };
+          }
+          return await InboundBatchCards({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            batchNo: selectedBatchNo.value,
+          });
+        },
+        querySuccess: handleCardQuerySuccess,
+      },
+    },
+  },
+});
+
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: BatchFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+      return;
+    }
+    await handleReset();
+    await nextTick();
+    await batchGridApi.query();
+  },
+});
+
+watch(selectedBatchNo, async (value) => {
+  if (!value) {
+    cardQuerySeq++;
+    totalCardCount.value = 0;
+  }
+});
+</script>
+
+<template>
+  <Modal title="批次" :show-cancel-button="false" :show-confirm-button="false">
+    <div class="mb-4 flex justify-center">
+      <Steps class="w-[70%]" :current="currentStep" :items="stepItems" />
+    </div>
+
+    <div v-show="currentStep === 0">
+      <BatchGrid />
+    </div>
+
+    <div v-show="currentStep === 1" class="flex min-h-0 flex-col gap-3">
+      <div class="flex flex-wrap items-center justify-between gap-2">
+        <div class="text-[13px] text-[#374151] dark:text-[#d4d4d4]">
+          <span class="font-medium">入库批次：</span>
+          <span>{{ selectedBatchNo || '--' }}</span>
+        </div>
+      </div>
+
+      <div
+        class="rounded-md border border-[#e5e7eb] bg-[#fafafa] px-3 py-2 text-[13px] dark:border-[#333] dark:bg-[#1f1f1f]"
+      >
+        <span>{{ allModeText }}</span>
+      </div>
+
+      <PreviewCardGrid />
+    </div>
+
+    <div v-show="currentStep === 2">
+      <Form />
+      <OutboundBalancePreview :values="formApi.form.values" />
+    </div>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <Button @click="handleCancel">取消</Button>
+        <Button v-if="currentStep > 0" @click="handlePrev">上一步</Button>
+        <Button
+          v-if="currentStep === 0"
+          type="primary"
+          @click="handleSelectBatch"
+        >
+          下一步
+        </Button>
+        <Button
+          v-if="currentStep === 1"
+          type="primary"
+          @click="handleNextFromCards"
+        >
+          下一步
+        </Button>
+        <Button v-if="currentStep === 2" type="primary" @click="handleSubmit">
+          提交出库
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/batch.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/batch.vue
new file mode 100644
index 0000000..1a461cb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/batch.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import { h, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import { Button, message, Upload, UploadDragger } from 'ant-design-vue';
+
+import {
+  DownloadTemplate,
+  ExcelSubmit,
+} from '#/api/iotlcm/tLifeCycle/tSimCardOutbound';
+import BetterVben from '#/constants/BetterVben';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+const emit = defineEmits<{ confirm: [] }>();
+
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+
+async function handleDownloadTemplate() {
+  await commonDownloadExcel(DownloadTemplate, '', {});
+  message.success('下载成功');
+}
+
+function handleCancel() {
+  modalApi.close();
+}
+
+function handleBeforeUpload(file: File) {
+  const rawFile = file as File;
+  const suffix = rawFile.name.slice(
+    Math.max(0, rawFile.name.lastIndexOf('.') + 1),
+  );
+  const isExcel = ['xls', 'xlsx'].includes(suffix.toLowerCase());
+  if (!isExcel) {
+    message.error('请上传 xls/xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  const isLt20M = rawFile.size / 1024 / 1024 <= 20;
+  if (!isLt20M) {
+    message.error('文件大小不能超过20MB');
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = rawFile;
+  uploadFile.value = [
+    {
+      name: rawFile.name,
+      originFileObj: rawFile,
+      status: 'done',
+      uid: `${rawFile.name}-${Date.now()}`,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function handleSubmit() {
+  if (!importFile.value) {
+    message.warning('请先上传Excel文件');
+    return;
+  }
+  await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+    const res = await ExcelSubmit({ file: importFile.value! });
+    message.success(
+      `出库任务已提交，共 ${res?.total ?? res?.quantity ?? 0} 张卡，批次号：${res?.batchNo || '-'}。可在批次执行记录中查看处理进度。`,
+      5,
+    );
+    emit('confirm');
+    modalApi.close();
+  });
+}
+
+async function handleReset() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="Excel文件"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <UploadDragger
+      v-model:file-list="uploadFile"
+      accept=".xlsx,.xls"
+      :before-upload="handleBeforeUpload"
+      :max-count="1"
+      @remove="handleRemove"
+    >
+      <div class="ant-upload-drag-icon flex justify-center">
+        <Inbox />
+      </div>
+      <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+      <p class="ant-upload-hint">
+        请上传按模板填写完整业务字段的 xlsx/xls 文件，上传后将直接提交
+      </p>
+    </UploadDragger>
+    <div class="mt-4 flex justify-center">
+      <Button :icon="h(DownloadOutlined)" @click="handleDownloadTemplate">
+        下载示例模板
+      </Button>
+    </div>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <Button @click="handleCancel">取消</Button>
+        <Button type="primary" @click="handleSubmit">提交</Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/index.vue
new file mode 100644
index 0000000..8d0ff75
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/index.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiExport } from '@vben/icons';
+
+import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { List } from '#/api/iotlcm/tLifeCycle/tSimCardStock';
+import BetterVben from '#/constants/BetterVben';
+
+import batchOutboundModal from './batch-outbound.vue';
+import batchModal from './batch.vue';
+import inputModal from './input.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import rangeModal from './range.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+
+/** ====================  方法  ==================== */
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+const [BatchModal, batchModalApi] = useVbenModal({
+  connectedComponent: batchModal,
+});
+
+const [RangeModal, rangeModalApi] = useVbenModal({
+  connectedComponent: rangeModal,
+});
+
+const [InputModal, inputModalApi] = useVbenModal({
+  connectedComponent: inputModal,
+});
+
+const [BatchOutboundModal, batchOutboundModalApi] = useVbenModal({
+  connectedComponent: batchOutboundModal,
+});
+
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="库存卡信息表">
+      <template #toolbar-tools>
+        <Dropdown>
+          <template #overlay>
+            <Menu>
+              <MenuItem @click="batchOutboundModalApi.open()">
+                批次
+              </MenuItem>
+              <MenuItem @click="batchModalApi.open()">Excel文件</MenuItem>
+              <MenuItem @click="rangeModalApi.open()">连号</MenuItem>
+              <MenuItem @click="inputModalApi.open()">批量输入</MenuItem>
+            </Menu>
+          </template>
+          <Button
+            class="mr-2 flex items-center"
+            type="primary"
+            :icon="h(MdiExport)"
+            v-access:code="'cpm:iot:tSimCardStock:edit'"
+          >
+            出库管理
+          </Button>
+        </Dropdown>
+      </template>
+    </Grid>
+    <BatchModal @confirm="handleRefresh" />
+    <RangeModal @confirm="handleRefresh" />
+    <InputModal @confirm="handleRefresh" />
+    <BatchOutboundModal @confirm="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/input.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/input.vue
new file mode 100644
index 0000000..7b98949
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/input.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { TSimCardOutboundInputSubmitParam } from '#/api/iotlcm/tLifeCycle/tSimCardOutbound';
+
+import { ref } from 'vue';
+
+import { useVbenModal, z } from '@vben/common-ui';
+
+import { Button, message, Steps } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { InputSubmit } from '#/api/iotlcm/tLifeCycle/tSimCardOutbound';
+import BetterVben from '#/constants/BetterVben';
+import FormOptions from '#/constants/FormOption';
+
+import { BatchFormSchema, normalizeOutboundSubmitValues } from './model';
+import { validateOutboundBalanceBeforeSubmit } from './outboundBalance';
+import OutboundBalancePreview from './OutboundBalancePreview.vue';
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+const stepItems = [{ title: '批量输入' }, { title: '填写信息' }];
+
+/** ====================  数据  ==================== */
+const currentStep = ref(0);
+
+/** ====================  方法  ==================== */
+async function handleNext() {
+  const [flag] = await BetterVben.function.formValidate(inputFormApi);
+  if (!flag) {
+    return;
+  }
+  currentStep.value = 1;
+}
+
+function handlePrev() {
+  currentStep.value = 0;
+}
+
+function handleCancel() {
+  modalApi.close();
+}
+
+async function handleSubmit() {
+  const [inputFlag, inputValues] =
+    await BetterVben.function.formValidate(inputFormApi);
+  if (!inputFlag) {
+    currentStep.value = 0;
+    return;
+  }
+  const [infoFlag, infoValues] =
+    await BetterVben.function.formValidate(formApi);
+  if (!infoFlag) {
+    return;
+  }
+  if (
+    !(await validateOutboundBalanceBeforeSubmit(
+      infoValues as Record<string, any>,
+    ))
+  ) {
+    return;
+  }
+
+  await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+    const res = await InputSubmit({
+      ...normalizeOutboundSubmitValues(infoValues as Record<string, any>),
+      input: String((inputValues as { input?: string }).input ?? ''),
+    } as TSimCardOutboundInputSubmitParam);
+    message.success(
+      `出库任务已提交，共 ${res?.total ?? res?.quantity ?? 0} 张卡，批次号：${res?.batchNo || '-'}。可在批次执行记录中查看处理进度。`,
+      5,
+    );
+    emit('confirm');
+    modalApi.close();
+  });
+}
+
+async function handleReset() {
+  currentStep.value = 0;
+  await inputFormApi.resetForm();
+  await formApi.resetForm();
+}
+
+/** ====================  组件  ==================== */
+const [InputForm, inputFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'input',
+      label: '批量输入',
+      component: 'Textarea',
+      componentProps: FormOptions.Component.Textarea({
+        autoSize: {
+          minRows: 8,
+          maxRows: 12,
+        },
+        placeholder: '每行一个 ICCID',
+        rows: 8,
+      }),
+      rules: z.string().trim().min(1, '请输入批量输入内容'),
+    },
+  ],
+});
+
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: BatchFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+    }
+  },
+});
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Modal
+    title="批量输入"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mb-6 flex justify-center">
+      <Steps class="w-[50%]" :current="currentStep" :items="stepItems" />
+    </div>
+
+    <div v-show="currentStep === 0">
+      <InputForm />
+    </div>
+
+    <div v-show="currentStep === 1">
+      <Form />
+      <OutboundBalancePreview :values="formApi.form.values" />
+    </div>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <Button @click="handleCancel">取消</Button>
+        <Button v-if="currentStep === 0" type="primary" @click="handleNext">
+          下一步
+        </Button>
+        <Button v-if="currentStep === 1" @click="handlePrev">上一步</Button>
+        <Button v-if="currentStep === 1" type="primary" @click="handleSubmit">
+          提交出库
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/model.tsx
new file mode 100644
index 0000000..f5c3a20
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/model.tsx
@@ -0,0 +1,697 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { z } from '@vben/common-ui';
+
+import { List as PackageList } from '#/api/iotlcm/tPricingPackage/tSimFlowPackageInfo';
+import DictEnum from '#/constants/DictEnum';
+import FormOptions from '#/constants/FormOption';
+import { renderDict, renderPopoverMemberSumma } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+import type { ExportColumn } from '#/utils/file/download';
+
+import {
+  calculateOutboundEndDate,
+  normalizeOutboundRangeValues,
+  normalizeOutboundSubmitValues,
+  selectedRangeCode,
+} from './outboundFormUtils';
+
+export {
+  calculateOutboundEndDate,
+  normalizeOutboundRangeValues,
+  normalizeOutboundSubmitValues,
+};
+
+const rangeCodeOptions = [
+  { label: 'ICCID', value: 'iccid' },
+  { label: 'MSISDN', value: 'msisdn' },
+  { label: 'IMSI', value: 'imsi' },
+];
+
+function positiveTextRule(message: string) {
+  return z.string().trim().min(1, message);
+}
+
+// 表格搜索表单
+const fuzzyOptionFilter = (
+  input: string,
+  option?: { label?: unknown; value?: unknown },
+) => {
+  const keyword = input.trim().toLowerCase();
+  if (!keyword) {
+    return true;
+  }
+  return [option?.label, option?.value].some((item) =>
+    String(item ?? '')
+      .toLowerCase()
+      .includes(keyword),
+  );
+};
+
+const outboundPackageTypeName: Record<number, string> = {
+  101: '卡套餐',
+  102: '池套餐',
+};
+
+function outboundPackageAfterFetch(res: any) {
+  if (!Array.isArray(res?.items)) {
+    return res;
+  }
+  return {
+    ...res,
+    items: res.items.map((item: any) => {
+      const packageType = Number(item?.packageType);
+      const typeName = outboundPackageTypeName[packageType] || '套餐';
+      const packageName = String(item?.packageName || item?.packageCode || '');
+      const packageCode = String(item?.packageCode || '');
+      return {
+        ...item,
+        outboundPackageLabel: packageCode
+          ? `${packageName}（${typeName} / ${packageCode}）`
+          : `${packageName}（${typeName}）`,
+      };
+    }),
+  };
+}
+
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'iccid',
+    component: 'Input',
+    label: 'ICCID',
+    componentProps: {
+      placeholder: '请输入ICCID',
+    },
+  },
+  {
+    fieldName: 'msisdn',
+    component: 'Input',
+    label: 'MSISDN',
+    componentProps: {
+      placeholder: '请输入MSISDN',
+    },
+  },
+  {
+    fieldName: 'imsi',
+    component: 'Input',
+    label: 'IMSI',
+    componentProps: {
+      placeholder: '请输入IMSI',
+    },
+  },
+  {
+    fieldName: 'chanKey',
+    component: 'Input',
+    label: '通道编号',
+    componentProps: {
+      placeholder: '请输入通道编号',
+    },
+  },
+  {
+    fieldName: 'chanName',
+    component: 'Input',
+    label: '通道名称',
+    componentProps: {
+      placeholder: '请输入通道名称',
+    },
+  },
+  {
+    fieldName: 'upPkgKeyword',
+    component: 'Input',
+    label: '上游套餐',
+    componentProps: {
+      placeholder: '请输入上游套餐',
+    },
+  },
+  {
+    fieldName: 'cardType',
+    component: 'Select',
+    label: '卡类型',
+    componentProps: {
+      allowClear: true,
+      options: getDictOptions(DictEnum.T_CARD_TYPE),
+      placeholder: '请选择卡类型',
+    },
+  },
+  {
+    fieldName: 'agreementExpiryMonths',
+    component: 'Select',
+    label: '协议到期',
+    componentProps: {
+      allowClear: true,
+      options: [
+        { label: '近1个月', value: 1 },
+        { label: '近3个月', value: 3 },
+        { label: '近6个月', value: 6 },
+      ],
+      placeholder: '请选择',
+    },
+  },
+  {
+    fieldName: 'createdAt',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    title: 'ICCID',
+    field: 'iccid',
+    fixed: 'left',
+    width: 190,
+  },
+  {
+    title: 'MSISDN',
+    field: 'msisdn',
+    minWidth: 150,
+  },
+  {
+    title: 'IMSI',
+    field: 'imsi',
+    minWidth: 150,
+  },
+  {
+    title: 'IMEI',
+    field: 'imei',
+    minWidth: 100,
+  },
+  {
+    title: '通道名称',
+    field: 'chanName',
+    minWidth: 150,
+    slots: {
+      default: ({ row }) => row.chanName || '--',
+    },
+  },
+  {
+    title: '套餐编号',
+    field: 'upPkgCode',
+    minWidth: 140,
+    slots: {
+      default: ({ row }) => row.upPkgCode || '--',
+    },
+  },
+  {
+    title: '上游套餐',
+    field: 'upPkgName',
+    minWidth: 220,
+    slots: {
+      default: ({ row }) => row.upPkgName || row.upPkgCode || '--',
+    },
+  },
+  {
+    title: '租户ID',
+    field: 'tenantId',
+    minWidth: 80,
+  },
+  {
+    title: '创建部门',
+    field: 'createdDept',
+    minWidth: 80,
+    slots: {
+      default: ({ row }) => row.createdDeptName || row.createdDept || '--',
+    },
+  },
+  {
+    title: '协议到期时间',
+    field: 'agreementExpiryDate',
+    minWidth: 160,
+    slots: {
+      default: ({ row }) => row.agreementExpiryDate || '--',
+    },
+  },
+  {
+    title: '创建者',
+    field: 'createdBy',
+    minWidth: 80,
+    slots: {
+      default: ({ row }) => {
+        return renderPopoverMemberSumma(row.createdBySumma);
+      },
+    },
+  },
+  {
+    title: '卡类型',
+    field: 'cardType',
+    params: { dictType: DictEnum.T_CARD_TYPE },
+    minWidth: 150,
+    slots: {
+      default: ({ row }) =>
+        row.cardType === undefined ||
+        row.cardType === null ||
+        row.cardType === ''
+          ? '--'
+          : renderDict(String(row.cardType), DictEnum.T_CARD_TYPE),
+    },
+  },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    minWidth: 150,
+  },
+  {
+    title: '更新者',
+    field: 'updatedBy',
+    minWidth: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderPopoverMemberSumma(row.updatedBySumma);
+      },
+    },
+  },
+  {
+    title: '更新时间',
+    field: 'updatedAt',
+    width: -1,
+    minWidth: 150,
+  },
+];
+
+// 行内导出（入库批次 -> 库存卡明细）列：与列表页一致，且把 ID 映射成汉字。
+// 创建者/更新者取操作人摘要里的昵称；创建部门取后端补充的 createdDeptName；
+// 卡类型走字典 t_card_type。
+export const StockCardExportColumns: ExportColumn[] = [
+  { field: 'iccid', label: 'ICCID' },
+  { field: 'msisdn', label: 'MSISDN' },
+  { field: 'imsi', label: 'IMSI' },
+  { field: 'imei', label: 'IMEI' },
+  { field: 'chanName', label: '通道名称' },
+  { field: 'upPkgCode', label: '套餐编号' },
+  { field: 'upPkgName', label: '上游套餐' },
+  { field: 'tenantId', label: '租户ID' },
+  { field: 'createdDeptName', label: '创建部门' },
+  { field: 'agreementExpiryDate', label: '协议到期时间' },
+  { field: 'createdBySumma.nickName', label: '创建者' },
+  { field: 'cardType', label: '卡类型', dictType: DictEnum.T_CARD_TYPE },
+  { field: 'createdAt', label: '创建时间' },
+  { field: 'updatedBySumma.nickName', label: '更新者' },
+  { field: 'updatedAt', label: '更新时间' },
+];
+
+// 可出库批次列
+export const OutboundBatchGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'radio',
+    width: 40,
+  },
+  {
+    title: '入库批次号',
+    field: 'batchNo',
+    minWidth: 210,
+    align: 'left',
+  },
+  {
+    title: '通道名称',
+    field: 'chanName',
+    minWidth: 150,
+    slots: {
+      default: ({ row }) => row.chanName || '--',
+    },
+  },
+  {
+    title: '上游套餐名称',
+    field: 'upPkgName',
+    minWidth: 220,
+    slots: {
+      default: ({ row }) => row.upPkgName || row.upPkgCode || '--',
+    },
+  },
+  {
+    title: '卡类型',
+    field: 'cardType',
+    params: { dictType: DictEnum.T_CARD_TYPE },
+    minWidth: 150,
+    slots: {
+      default: ({ row }) =>
+        row.cardType === undefined ||
+        row.cardType === null ||
+        row.cardType === ''
+          ? '--'
+          : renderDict(String(row.cardType), DictEnum.T_CARD_TYPE),
+    },
+  },
+  {
+    title: '协议到期时间',
+    field: 'agreementExpiryDate',
+    minWidth: 160,
+    slots: {
+      default: ({ row }) => row.agreementExpiryDate || '--',
+    },
+  },
+  {
+    title: '当前库存卡数',
+    field: 'stockCount',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => row.stockCount ?? 0,
+    },
+  },
+  {
+    title: '最早库存创建时间',
+    field: 'firstCreatedAt',
+    minWidth: 160,
+  },
+  {
+    title: '最近库存创建时间',
+    field: 'lastCreatedAt',
+    minWidth: 160,
+  },
+];
+
+// 批次库存卡预览列
+export const OutboundBatchCardPreviewColumns: VxeGridProps['columns'] = [
+  {
+    title: 'ICCID',
+    field: 'iccid',
+    minWidth: 180,
+    align: 'left',
+  },
+  {
+    title: 'MSISDN',
+    field: 'msisdn',
+    minWidth: 140,
+  },
+  {
+    title: 'IMSI',
+    field: 'imsi',
+    minWidth: 140,
+  },
+  {
+    title: 'IMEI',
+    field: 'imei',
+    minWidth: 120,
+  },
+  {
+    title: '通道编号',
+    field: 'chanKey',
+    minWidth: 120,
+  },
+  {
+    title: '通道名称',
+    field: 'chanName',
+    minWidth: 150,
+    slots: {
+      default: ({ row }) => row.chanName || '--',
+    },
+  },
+  {
+    title: '上游套餐',
+    field: 'upPkgName',
+    minWidth: 220,
+    slots: {
+      default: ({ row }) => row.upPkgName || row.upPkgCode || '--',
+    },
+  },
+  {
+    title: '卡类型',
+    field: 'cardType',
+    params: { dictType: DictEnum.T_CARD_TYPE },
+    minWidth: 150,
+    slots: {
+      default: ({ row }) =>
+        row.cardType === undefined ||
+        row.cardType === null ||
+        row.cardType === ''
+          ? '--'
+          : renderDict(String(row.cardType), DictEnum.T_CARD_TYPE),
+    },
+  },
+  {
+    title: '协议到期时间',
+    field: 'agreementExpiryDate',
+    minWidth: 160,
+    slots: {
+      default: ({ row }) => row.agreementExpiryDate || '--',
+    },
+  },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    minWidth: 160,
+  },
+];
+
+// 批量管理字段列表
+export const BatchFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'customerAgentId',
+    component: 'ApiSelect',
+    label: '客户/机构',
+    componentProps: {
+      ...FormOptions.Api.tSimFlowPackagePriceAgentTreeApi(),
+      showSearch: true,
+      optionFilterProp: 'label',
+      filterOption: fuzzyOptionFilter,
+    },
+    formItemClass: 'col-span-6',
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'packageCode',
+    component: 'ApiSelect',
+    label: '套餐',
+    componentProps: {
+      placeholder: '请选择套餐',
+      api: PackageList,
+      afterFetch: outboundPackageAfterFetch,
+      labelField: 'outboundPackageLabel',
+      valueField: 'packageCode',
+      resultField: 'items',
+      params: {
+        enabled: 1,
+        packageType: '101,102',
+      },
+      showSearch: true,
+      optionFilterProp: 'label',
+      filterOption: fuzzyOptionFilter,
+    },
+    formItemClass: 'col-span-6',
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'packageBeginTime',
+    component: 'DatePicker',
+    label: '套餐开始时间',
+    componentProps: {
+      clearable: true,
+      type: 'date',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    formItemClass: 'col-span-6',
+    rules: 'required',
+  },
+  {
+    fieldName: 'durationYears',
+    component: 'InputNumber',
+    label: '购买时长（年）',
+    defaultValue: 1,
+    componentProps: {
+      min: 1,
+      placeholder: '年',
+      precision: 0,
+      style: { width: '100%' },
+    },
+    formItemClass: 'col-span-6',
+    rules: z.coerce.number().int().min(1, '购买年限必须大于0'),
+  },
+  {
+    fieldName: 'giftDurationMonthPart',
+    component: 'InputNumber',
+    label: '赠送时长（月）',
+    defaultValue: 0,
+    componentProps: {
+      max: 11,
+      min: 0,
+      placeholder: '月',
+      precision: 0,
+      style: { width: '100%' },
+    },
+    formItemClass: 'col-span-6',
+  },
+  {
+    fieldName: 'expectedPackageEndTime',
+    component: 'Input',
+    label: '结束日期',
+    componentProps: {
+      placeholder: '选择开始日期和时长后自动计算',
+      readonly: true,
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      async trigger(values, formApi) {
+        await formApi.setFieldValue(
+          'expectedPackageEndTime',
+          calculateOutboundEndDate(values),
+        );
+      },
+      triggerFields: [
+        'packageBeginTime',
+        'durationYears',
+        'giftDurationMonthPart',
+      ],
+    },
+  },
+  {
+    fieldName: 'offlineContractCompleted',
+    component: 'Switch',
+    label: '线下合同/销售/走账已完成',
+    defaultValue: false,
+    componentProps: FormOptions.Component.SwitchYesOrNo({
+      checkedValue: true,
+      unCheckedValue: false,
+    }),
+    formItemClass: 'col-span-6',
+  },
+  {
+    fieldName: 'amount',
+    component: 'InputNumber',
+    label: '订单金额',
+    componentProps: {
+      min: 0.01,
+      placeholder: '请输入订单金额',
+      precision: 2,
+      step: 0.01,
+      style: { width: '100%' },
+    },
+    formItemClass: 'col-span-6',
+    rules: 'required',
+  },
+  {
+    fieldName: 'remark',
+    component: 'Textarea',
+    label: '备注',
+    componentProps: {
+      ...FormOptions.Component.Textarea(),
+      placeholder: '请输入备注',
+    },
+    formItemClass: 'col-span-12',
+  },
+];
+
+// 连号导出字段列表
+export const RangeFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'rangeCodeType',
+    component: 'RadioGroup',
+    label: '号码类型',
+    defaultValue: 'iccid',
+    componentProps: {
+      buttonStyle: 'solid',
+      optionType: 'button',
+      options: rangeCodeOptions,
+    },
+    formItemClass: 'col-span-12',
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'startIccid',
+    component: 'Input',
+    label: '起始ICCID',
+    componentProps: {
+      placeholder: '请输入起始号段ICCID',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      show: (values) => selectedRangeCode(values) === 'iccid',
+      triggerFields: ['rangeCodeType'],
+      rules: (values) =>
+        selectedRangeCode(values) === 'iccid'
+          ? positiveTextRule('起始ICCID不能为空')
+          : null,
+    },
+  },
+  {
+    fieldName: 'endIccid',
+    component: 'Input',
+    label: '结束ICCID',
+    componentProps: {
+      placeholder: '请输入结束号段ICCID',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      show: (values) => selectedRangeCode(values) === 'iccid',
+      triggerFields: ['rangeCodeType'],
+      rules: (values) =>
+        selectedRangeCode(values) === 'iccid'
+          ? positiveTextRule('结束ICCID不能为空')
+          : null,
+    },
+  },
+  {
+    fieldName: 'startMsisdn',
+    component: 'Input',
+    label: '起始MSISDN',
+    componentProps: {
+      placeholder: '请输入起始号段MSISDN',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      show: (values) => selectedRangeCode(values) === 'msisdn',
+      triggerFields: ['rangeCodeType'],
+      rules: (values) =>
+        selectedRangeCode(values) === 'msisdn'
+          ? positiveTextRule('起始MSISDN不能为空')
+          : null,
+    },
+  },
+  {
+    fieldName: 'endMsisdn',
+    component: 'Input',
+    label: '结束MSISDN',
+    componentProps: {
+      placeholder: '请输入结束号段MSISDN',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      show: (values) => selectedRangeCode(values) === 'msisdn',
+      triggerFields: ['rangeCodeType'],
+      rules: (values) =>
+        selectedRangeCode(values) === 'msisdn'
+          ? positiveTextRule('结束MSISDN不能为空')
+          : null,
+    },
+  },
+  {
+    fieldName: 'startImsi',
+    component: 'Input',
+    label: '起始IMSI',
+    componentProps: {
+      placeholder: '请输入起始号段IMSI',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      show: (values) => selectedRangeCode(values) === 'imsi',
+      triggerFields: ['rangeCodeType'],
+      rules: (values) =>
+        selectedRangeCode(values) === 'imsi'
+          ? positiveTextRule('起始IMSI不能为空')
+          : null,
+    },
+  },
+  {
+    fieldName: 'endImsi',
+    component: 'Input',
+    label: '结束IMSI',
+    componentProps: {
+      placeholder: '请输入结束号段IMSI',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      show: (values) => selectedRangeCode(values) === 'imsi',
+      triggerFields: ['rangeCodeType'],
+      rules: (values) =>
+        selectedRangeCode(values) === 'imsi'
+          ? positiveTextRule('结束IMSI不能为空')
+          : null,
+    },
+  },
+  ...BatchFormSchema,
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/outboundBalance.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/outboundBalance.ts
new file mode 100644
index 0000000..74e4ab5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/outboundBalance.ts
@@ -0,0 +1,52 @@
+import { message } from 'ant-design-vue';
+
+import { CustomerBalance } from '#/api/iotlcm/tLifeCycle/tSimCardOutbound';
+
+export function outboundAmount(value: unknown) {
+  if (value === undefined || value === null || value === '') {
+    return 0;
+  }
+  const amount = Number(value);
+  return Number.isFinite(amount) ? amount : 0;
+}
+
+export function outboundMoney(value: unknown) {
+  const amount = Number(value ?? 0);
+  return Number.isFinite(amount) ? amount.toFixed(2) : '0.00';
+}
+
+export async function validateOutboundBalanceBeforeSubmit(
+  values: Record<string, any>,
+) {
+  if (values.offlineContractCompleted === true) {
+    return true;
+  }
+  const customerAgentId = Number(values.customerAgentId ?? 0);
+  if (!customerAgentId) {
+    message.warning('请选择客户');
+    return false;
+  }
+  const amount = outboundAmount(values.amount);
+  if (amount <= 0) {
+    message.warning('请输入订单金额');
+    return false;
+  }
+  const balance = await CustomerBalance({ customerAgentId });
+  if (!balance.accountExists) {
+    message.warning('客户暂无余额账户，请先充值');
+    return false;
+  }
+  if (Number(balance.status) !== 0) {
+    message.warning('客户余额账户状态异常，不能出库');
+    return false;
+  }
+  if (Number(balance.balance ?? 0) + 0.0001 < amount) {
+    message.warning(
+      `客户余额不足，需支付￥${outboundMoney(amount)}，当前余额￥${outboundMoney(
+        balance.balance,
+      )}`,
+    );
+    return false;
+  }
+  return true;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/outboundFormUtils.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/outboundFormUtils.ts
new file mode 100644
index 0000000..7a49eca
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/outboundFormUtils.ts
@@ -0,0 +1,111 @@
+import dayjs from 'dayjs';
+
+export type RangeCodeType = 'iccid' | 'imsi' | 'msisdn';
+
+export function selectedRangeCode(values: Record<string, any>): RangeCodeType {
+  const value = String(values.rangeCodeType ?? 'iccid').trim();
+  return ['iccid', 'msisdn', 'imsi'].includes(value)
+    ? (value as RangeCodeType)
+    : 'iccid';
+}
+
+function toNumber(value: unknown, defaultValue = 0) {
+  if (value === undefined || value === null || value === '') {
+    return defaultValue;
+  }
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : defaultValue;
+}
+
+function normalizeMonthPart(value: unknown) {
+  const parsed = toNumber(value);
+  if (parsed < 0) {
+    return 0;
+  }
+  if (parsed > 11) {
+    return 11;
+  }
+  return parsed;
+}
+
+export function outboundDurationTotal(values: Record<string, any>) {
+  return (
+    toNumber(values.durationYears) * 12 + toNumber(values.durationMonthPart)
+  );
+}
+
+export function calculateOutboundEndDate(values: Record<string, any>): string {
+  const beginTime = String(values.packageBeginTime ?? '').trim();
+  const totalMonths =
+    toNumber(values.durationYears) * 12 +
+    normalizeMonthPart(values.durationMonthPart) +
+    toNumber(values.giftDurationYears) * 12 +
+    normalizeMonthPart(values.giftDurationMonthPart);
+  if (!beginTime || totalMonths <= 0) {
+    return '';
+  }
+
+  const parsed = dayjs(beginTime);
+  if (!parsed.isValid()) {
+    return '';
+  }
+  return parsed.add(totalMonths, 'month').date(0).format('YYYY-MM-DD');
+}
+
+export function normalizeOutboundSubmitValues(
+  values: Record<string, any>,
+): Record<string, any> {
+  const durationYears = toNumber(values.durationYears);
+  const durationMonthPart = normalizeMonthPart(values.durationMonthPart);
+  const giftDurationYears = toNumber(values.giftDurationYears);
+  const giftDurationMonthPart = normalizeMonthPart(
+    values.giftDurationMonthPart,
+  );
+  const remark = String(values.remark ?? '').trim();
+
+  return {
+    ...values,
+    amount:
+      values.amount === undefined || values.amount === null
+        ? ''
+        : String(values.amount).trim(),
+    durationYears,
+    durationMonthPart,
+    durationMonths: durationYears * 12 + durationMonthPart,
+    giftDurationYears,
+    giftDurationMonthPart,
+    giftDurationMonths: giftDurationYears * 12 + giftDurationMonthPart,
+    offlineContractCompleted: Boolean(values.offlineContractCompleted),
+    remark,
+    buyerNote: undefined,
+    adminNote: undefined,
+    customerBalanceDisplay: undefined,
+    expectedPackageEndTime: undefined,
+    hasTestPeriod: undefined,
+    testPeriodDays: undefined,
+    testPeriodLatestExpiryDate: undefined,
+    hasSilentPeriod: undefined,
+    silentPeriodDays: undefined,
+    silentPeriodLatestExpiryDate: undefined,
+  };
+}
+
+export function normalizeOutboundRangeValues(
+  values: Record<string, any>,
+): Record<string, any> {
+  const rangeCodeType = selectedRangeCode(values);
+  const payload = normalizeOutboundSubmitValues({ ...values, rangeCodeType });
+  if (rangeCodeType !== 'iccid') {
+    payload.startIccid = '';
+    payload.endIccid = '';
+  }
+  if (rangeCodeType !== 'msisdn') {
+    payload.startMsisdn = '';
+    payload.endMsisdn = '';
+  }
+  if (rangeCodeType !== 'imsi') {
+    payload.startImsi = '';
+    payload.endImsi = '';
+  }
+  return payload;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/range.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/range.vue
new file mode 100644
index 0000000..6d4aefc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock/range.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { TSimCardOutboundRangeSubmitParam } from '#/api/iotlcm/tLifeCycle/tSimCardOutbound';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { RangeSubmit } from '#/api/iotlcm/tLifeCycle/tSimCardOutbound';
+import BetterVben from '#/constants/BetterVben';
+
+import { normalizeOutboundRangeValues, RangeFormSchema } from './model';
+import { validateOutboundBalanceBeforeSubmit } from './outboundBalance';
+import OutboundBalancePreview from './OutboundBalancePreview.vue';
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+
+/** ====================  方法  ==================== */
+async function handleConfirm() {
+  const [flag, values] = await BetterVben.function.formValidate(formApi);
+  if (!flag) {
+    return;
+  }
+  if (
+    !(await validateOutboundBalanceBeforeSubmit(values as Record<string, any>))
+  ) {
+    return;
+  }
+  await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+    const res = await RangeSubmit(
+      normalizeOutboundRangeValues(
+        values as Record<string, any>,
+      ) as TSimCardOutboundRangeSubmitParam,
+    );
+    message.success(
+      `出库任务已提交，共 ${res?.total ?? res?.quantity ?? 0} 张卡，批次号：${res?.batchNo || '-'}。可在批次执行记录中查看处理进度。`,
+      5,
+    );
+    emit('confirm');
+    modalApi.close();
+  });
+}
+
+async function handleReset() {
+  await formApi.resetForm();
+}
+
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: RangeFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  async onConfirm() {
+    await handleConfirm();
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+    }
+  },
+});
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Modal title="连号">
+    <Form />
+    <OutboundBalancePreview :values="formApi.form.values" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/batch.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/batch.vue
new file mode 100644
index 0000000..14397d4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/batch.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { UploadFile, UploadProps } from 'ant-design-vue';
+
+import { h, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DownloadOutlined, Inbox } from '@vben/icons';
+
+import { Button, message, Switch, Upload, UploadDragger } from 'ant-design-vue';
+
+import {
+  ExcelSubmit,
+  ExcelTemplate,
+} from '#/api/iotlcm/tLifeCycle/tSimCardInbound';
+import BetterVben from '#/constants/BetterVben';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+const emit = defineEmits<{ confirm: [] }>();
+
+const uploadFile = ref<UploadProps['fileList']>([]);
+const importFile = ref<File>();
+const validateUpstreamBasicInfo = ref(0);
+
+async function handleDownloadTemplate() {
+  await commonDownloadExcel(ExcelTemplate, '', {});
+  message.success('下载成功');
+}
+
+function handleCancel() {
+  modalApi.close();
+}
+
+function handleBeforeUpload(file: File) {
+  const rawFile = file as File;
+  const suffix = rawFile.name.slice(
+    Math.max(0, rawFile.name.lastIndexOf('.') + 1),
+  );
+  const isExcel = ['xls', 'xlsx'].includes(suffix.toLowerCase());
+  if (!isExcel) {
+    message.error('请上传 xls/xlsx 格式文件');
+    return Upload.LIST_IGNORE;
+  }
+  const isLt20M = rawFile.size / 1024 / 1024 <= 20;
+  if (!isLt20M) {
+    message.error('文件大小不能超过20MB');
+    return Upload.LIST_IGNORE;
+  }
+  importFile.value = rawFile;
+  uploadFile.value = [
+    {
+      name: rawFile.name,
+      originFileObj: rawFile,
+      status: 'done',
+      uid: `${rawFile.name}-${Date.now()}`,
+    } as UploadFile,
+  ];
+  return false;
+}
+
+function handleRemove() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+}
+
+async function handleSubmit() {
+  if (!importFile.value) {
+    message.warning('请先上传Excel文件');
+    return;
+  }
+  await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+    const res = await ExcelSubmit({
+      file: importFile.value!,
+      validateUpstreamBasicInfo: validateUpstreamBasicInfo.value,
+    });
+    message.success(`操作成功,批次号:${res?.batchNo || ''}`);
+    emit('confirm');
+    modalApi.close();
+  });
+}
+
+async function handleReset() {
+  uploadFile.value = [];
+  importFile.value = undefined;
+  validateUpstreamBasicInfo.value = 0;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="Excel文件"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mb-4 flex items-center justify-between rounded border px-4 py-3">
+      <span class="text-sm">开启三码校验</span>
+      <Switch
+        v-model:checked="validateUpstreamBasicInfo"
+        checked-children="开启"
+        :checked-value="1"
+        un-checked-children="关闭"
+        :un-checked-value="0"
+      />
+    </div>
+    <UploadDragger
+      v-model:file-list="uploadFile"
+      accept=".xlsx,.xls"
+      :before-upload="handleBeforeUpload"
+      :max-count="1"
+      @remove="handleRemove"
+    >
+      <div class="ant-upload-drag-icon flex justify-center">
+        <Inbox />
+      </div>
+      <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+      <p class="ant-upload-hint">
+        请上传按模板填写完整业务字段的 xlsx/xls 文件，上传后将直接提交
+      </p>
+    </UploadDragger>
+    <div class="mt-4 flex justify-center">
+      <Button :icon="h(DownloadOutlined)" @click="handleDownloadTemplate">
+        下载示例模板
+      </Button>
+    </div>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <Button @click="handleCancel">取消</Button>
+        <Button type="primary" @click="handleSubmit">提交</Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/index.vue
new file mode 100644
index 0000000..1673f68
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/index.vue
@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import { h } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiExport, MdiImport } from '@vben/icons';
+
+import { Button, Dropdown, Menu, MenuItem, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  ExportWarehousing,
+  WarehousingList,
+} from '#/api/iotlcm/tLifeCycle/tBatch';
+// 行内导出仍导出该批次的库存卡明细
+import { Export } from '#/api/iotlcm/tLifeCycle/tSimCardStock';
+import BetterVben from '#/constants/BetterVben';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import cardsModal from '../tBatch/cards.vue';
+import batchModal from './batch.vue';
+import inputModal from './input.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import { StockCardExportColumns } from '../tSimCardStock/model';
+import rangeModal from './range.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+
+/** ====================  方法  ==================== */
+async function handleRefresh() {
+  await gridApi.query();
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  // 导出入库批次列表：数据与页面列表一致（成功批次，batchType=入库）
+  await commonDownloadExcel(ExportWarehousing, '入库管理', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+
+async function handleExportBatch(row: any) {
+  if (!row?.batchNo) {
+    message.warning('批次号不能为空');
+    return;
+  }
+  // 行内导出该批次的库存卡明细：与库存卡列表页同列，并把 ID 映射成汉字
+  await commonDownloadExcel(Export, `入库批次-${row.batchNo}`, {
+    batchNo: row.batchNo,
+    exportColumnsJson: JSON.stringify(StockCardExportColumns),
+  });
+}
+
+function handleViewBatchCards(row: any) {
+  if (!row?.batchNo) {
+    return;
+  }
+  cardsModalApi.setData({ record: { ...row, currentStockOnly: true } }).open();
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          return await WarehousingList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+const [BatchModal, batchModalApi] = useVbenModal({
+  connectedComponent: batchModal,
+});
+
+const [RangeModal, rangeModalApi] = useVbenModal({
+  connectedComponent: rangeModal,
+});
+
+const [InputModal, inputModalApi] = useVbenModal({
+  connectedComponent: inputModal,
+});
+
+const [CardsModal, cardsModalApi] = useVbenModal({
+  connectedComponent: cardsModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="入库管理">
+      <template #batchNo="{ row }">
+        <Button type="link" @click="handleViewBatchCards(row)">
+          {{ row.batchNo }}
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <Button
+          type="link"
+          size="small"
+          v-access:code="'cpm:iot:tSimCardStock:export'"
+          @click="handleExportBatch(row)"
+        >
+          导出
+        </Button>
+      </template>
+      <template #toolbar-tools>
+        <Dropdown>
+          <template #overlay>
+            <Menu>
+              <MenuItem @click="batchModalApi.open()">Excel文件</MenuItem>
+              <MenuItem @click="rangeModalApi.open()">连号</MenuItem>
+              <MenuItem @click="inputModalApi.open()">批量输入</MenuItem>
+            </Menu>
+          </template>
+          <Button
+            class="mr-2 flex items-center"
+            type="primary"
+            :icon="h(MdiImport)"
+            v-access:code="'cpm:iot:tSimCardStock:edit'"
+          >
+            入库管理
+          </Button>
+        </Dropdown>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+          v-access:code="'cpm:iot:tSimCardStock:export'"
+        >
+          导出
+        </Button>
+      </template>
+    </Grid>
+    <BatchModal @confirm="handleRefresh" />
+    <RangeModal @confirm="handleRefresh" />
+    <InputModal @confirm="handleRefresh" />
+    <CardsModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/input.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/input.vue
new file mode 100644
index 0000000..b611030
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/input.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import type { TSimCardInboundInputSubmitParams } from '#/api/iotlcm/tLifeCycle/tSimCardInbound';
+
+import { ref } from 'vue';
+
+import { useVbenModal, z } from '@vben/common-ui';
+
+import { Button, message, Steps, Switch } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { InputSubmit } from '#/api/iotlcm/tLifeCycle/tSimCardInbound';
+import BetterVben from '#/constants/BetterVben';
+import FormOptions from '#/constants/FormOption';
+
+import { BatchFormSchema } from './model';
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+const stepItems = [{ title: '批量输入' }, { title: '填写信息' }];
+const infoFormSchema = BatchFormSchema.filter(
+  (item) => item.fieldName !== 'validateUpstreamBasicInfo',
+);
+
+/** ====================  数据  ==================== */
+const currentStep = ref(0);
+const validateUpstreamBasicInfo = ref(0);
+
+/** ====================  方法  ==================== */
+async function handleNext() {
+  const [flag] = await BetterVben.function.formValidate(inputFormApi);
+  if (!flag) {
+    return;
+  }
+  currentStep.value = 1;
+}
+
+function handlePrev() {
+  currentStep.value = 0;
+}
+
+function handleCancel() {
+  modalApi.close();
+}
+
+async function handleSubmit() {
+  const [inputFlag, inputValues] =
+    await BetterVben.function.formValidate(inputFormApi);
+  if (!inputFlag) {
+    currentStep.value = 0;
+    return;
+  }
+  const [infoFlag, infoValues] =
+    await BetterVben.function.formValidate(formApi);
+  if (!infoFlag) {
+    return;
+  }
+
+  await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+    const res = await InputSubmit({
+      ...(infoValues as any),
+      input: String((inputValues as { input?: string }).input ?? ''),
+      sourceType: 2,
+      validateUpstreamBasicInfo: validateUpstreamBasicInfo.value,
+    } as TSimCardInboundInputSubmitParams);
+    message.success(`操作成功,批次号:${res?.batchNo || ''}`);
+    emit('confirm');
+    modalApi.close();
+  });
+}
+
+async function handleReset() {
+  currentStep.value = 0;
+  validateUpstreamBasicInfo.value = 0;
+  await inputFormApi.resetForm();
+  await formApi.resetForm();
+}
+
+/** ====================  组件  ==================== */
+const [InputForm, inputFormApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: [
+    {
+      fieldName: 'input',
+      label: '批量输入',
+      component: 'Textarea',
+      componentProps: FormOptions.Component.Textarea({
+        autoSize: {
+          minRows: 8,
+          maxRows: 12,
+        },
+        placeholder: '每行一个 ICCID、MSISDN 或 IMSI',
+        rows: 8,
+      }),
+      rules: z.string().trim().min(1, '请输入批量输入内容'),
+    },
+  ],
+});
+
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: infoFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+    }
+  },
+});
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Modal
+    title="批量输入"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mb-6 flex justify-center">
+      <Steps class="w-[50%]" :current="currentStep" :items="stepItems" />
+    </div>
+
+    <div v-show="currentStep === 0">
+      <div
+        class="mb-4 flex items-center justify-between rounded border px-4 py-3"
+      >
+        <span class="text-sm">开启三码校验</span>
+        <Switch
+          v-model:checked="validateUpstreamBasicInfo"
+          checked-children="开启"
+          :checked-value="1"
+          un-checked-children="关闭"
+          :un-checked-value="0"
+        />
+      </div>
+      <InputForm />
+    </div>
+
+    <div v-show="currentStep === 1">
+      <Form />
+    </div>
+
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <Button @click="handleCancel">取消</Button>
+        <Button v-if="currentStep === 0" type="primary" @click="handleNext">
+          下一步
+        </Button>
+        <Button v-if="currentStep === 1" @click="handlePrev">上一步</Button>
+        <Button v-if="currentStep === 1" type="primary" @click="handleSubmit">
+          提交导入
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/model.test.ts b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/model.test.ts
new file mode 100644
index 0000000..8dfb671
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/model.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it, vi } from 'vitest';
+
+const channels = vi.hoisted(() => ({ list: vi.fn() }));
+
+vi.mock('#/api/iotlcm/tChannel/tSimChannels', () => ({ List: channels.list }));
+vi.mock('#/api/agent', () => ({ getAgentDeptListApi: vi.fn() }));
+vi.mock('#/api/iotlcm/tPricingPackage/tSimFlowPackagePrice', () => ({
+  GetTSimFlowPackagePriceAgentTreeApi: vi.fn(),
+}));
+vi.mock('#/api/iotlcm/tPricingPackage/tSimPackageCategory', () => ({
+  List: vi.fn(),
+}));
+vi.mock('#/api/iotlcm/tPricingPackage/tSimUpstreamPackage', () => ({
+  List: vi.fn(),
+}));
+vi.mock('#/utils', () => ({ renderDict: vi.fn() }));
+vi.mock('#/utils/dict', () => ({ getDictOptions: () => [] }));
+
+import { IndexGridSchema } from './model';
+
+describe('入库管理上游渠道搜索', () => {
+  const field = IndexGridSchema.find((item) => item.fieldName === 'chanKey');
+  const props = field?.componentProps as {
+    allowClear: boolean;
+    api: typeof channels.list;
+    autoSelect: boolean;
+    filterOption: (
+      input: string,
+      option: { label: string; value: string },
+    ) => boolean;
+    labelField: string;
+    params: Record<string, unknown>;
+    resultField: string;
+    showSearch: boolean;
+    valueField: string;
+  };
+
+  it('复用渠道接口并映射名称及编码，不自动筛选首项', async () => {
+    expect(field?.component).toBe('ApiSelect');
+    expect(props.api).toBe(channels.list);
+    expect(props.resultField).toBe('items');
+    expect(props.labelField).toBe('chanName');
+    expect(props.valueField).toBe('chanKey');
+    expect(props.autoSelect).toBe(false);
+    expect(props.allowClear).toBe(true);
+    const response = { items: [{ chanName: '移动渠道', chanKey: 'CMCC-01' }] };
+    channels.list.mockResolvedValueOnce(response);
+    expect(await props.api(props.params)).toEqual(response);
+  });
+
+  it('支持按渠道名称或编码模糊搜索', () => {
+    const option = { label: '移动渠道', value: 'CMCC-01' };
+    expect(props.showSearch).toBe(true);
+    expect(props.filterOption('移动', option)).toBe(true);
+    expect(props.filterOption(' cmcc ', option)).toBe(true);
+    expect(props.filterOption('', option)).toBe(true);
+    expect(props.filterOption('联通', option)).toBe(false);
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/model.tsx
new file mode 100644
index 0000000..91f8527
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/model.tsx
@@ -0,0 +1,677 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import DictEnum from '#/constants/DictEnum';
+import FormOptions from '#/constants/FormOption';
+import { renderDict } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+type Recordable = Record<string, any>;
+
+const renderEmpty = (value: null | string | undefined) => value || '--';
+const renderYesOrNoDict = (value: null | number | string | undefined) => {
+  if (value === undefined || value === null) {
+    return '--';
+  }
+  return renderDict(String(value), DictEnum.GLOBAL_YES_OR_NO);
+};
+const renderValidationEnabledDict = (
+  value: null | number | string | undefined,
+) => {
+  if (value === undefined || value === null) {
+    return '--';
+  }
+  const normalized = String(value).trim();
+  if (normalized === '1') {
+    return renderDict('0', DictEnum.GLOBAL_YES_OR_NO);
+  }
+  if (normalized === '0') {
+    return renderDict('1', DictEnum.GLOBAL_YES_OR_NO);
+  }
+  return renderEmpty(normalized);
+};
+
+function parseJsonObject(value: unknown): Recordable {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    return value as Recordable;
+  }
+  if (typeof value === 'string' && value.trim()) {
+    try {
+      const parsed = JSON.parse(value);
+      return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+        ? parsed
+        : {};
+    } catch {
+      return {};
+    }
+  }
+  return {};
+}
+
+function getPathValue(source: Recordable, path: string) {
+  let current: unknown = source;
+  for (const key of path.split('.')) {
+    if (!current || typeof current !== 'object') {
+      return undefined;
+    }
+    current = (current as Recordable)[key];
+  }
+  return current;
+}
+
+function batchInfo(row: Recordable): Recordable {
+  return parseJsonObject(row?.batchInfo ?? row?.batch_info);
+}
+
+function batchInfoValue(row: Recordable, ...paths: string[]) {
+  const info = batchInfo(row);
+  for (const path of paths) {
+    const value = getPathValue(info, path);
+    if (value !== undefined && value !== null && String(value).trim() !== '') {
+      return value;
+    }
+  }
+  return undefined;
+}
+
+function renderBatchInfoText(row: Recordable, ...paths: string[]) {
+  const value = batchInfoValue(row, ...paths);
+  return renderEmpty(value === undefined ? undefined : String(value));
+}
+
+function renderBatchInfoYesOrNo(row: Recordable, ...paths: string[]) {
+  return renderYesOrNoDict(batchInfoValue(row, ...paths) as any);
+}
+
+function renderBatchInfoValidationEnabled(row: Recordable, ...paths: string[]) {
+  return renderValidationEnabledDict(batchInfoValue(row, ...paths) as any);
+}
+
+// 表格搜索表单
+const fuzzyOptionFilter = (
+  input: string,
+  option?: { label?: unknown; value?: unknown },
+) => {
+  const keyword = input.trim().toLowerCase();
+  if (!keyword) {
+    return true;
+  }
+  return [option?.label, option?.value].some((item) =>
+    String(item ?? '')
+      .toLowerCase()
+      .includes(keyword),
+  );
+};
+
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'batchNo',
+    component: 'Input',
+    label: '批次编号',
+    componentProps: {
+      placeholder: '请输入批次编号',
+    },
+  },
+  {
+    fieldName: 'chanKey',
+    component: 'ApiSelect',
+    label: '上游渠道',
+    componentProps: {
+      ...FormOptions.Api.tSimChannels({ autoSelect: false }),
+      placeholder: '请选择上游渠道',
+      allowClear: true,
+      showSearch: true,
+      optionFilterProp: 'label',
+      filterOption: fuzzyOptionFilter,
+    },
+  },
+  {
+    fieldName: 'time',
+    component: 'RangePicker',
+    label: '入库时间',
+    componentProps: {
+      clearable: true,
+      type: 'datetimerange',
+      valueFormat: 'YYYY-MM-DD',
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  // {
+  //   type: 'checkbox',
+  //   width: 50,
+  // },
+  {
+    title: '批次编号',
+    field: 'batchNo',
+    minWidth: 220,
+    slots: {
+      default: 'batchNo',
+    },
+  },
+  {
+    title: '入库时间',
+    field: 'batchTime',
+    minWidth: 150,
+  },
+  {
+    title: '上游渠道',
+    field: 'batchInfo.inboundOptions.chanKey',
+    minWidth: 150,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoText(row, 'inboundOptions.chanKey', 'chanKey'),
+    },
+  },
+  {
+    title: '入库数量',
+    field: 'totalCount',
+    width: 100,
+    slots: {
+      default: ({ row }) => row.totalCount ?? 0,
+    },
+  },
+  {
+    title: '三码校验',
+    field: 'batchInfo.inboundOptions.validateUpstreamBasicInfo',
+    params: {
+      dictType: DictEnum.GLOBAL_YES_OR_NO,
+      dictValueMap: { '0': '1', '1': '0' },
+      fallbackField: 'batchInfo.validateUpstreamBasicInfo',
+    },
+    width: 110,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoValidationEnabled(
+          row,
+          'inboundOptions.validateUpstreamBasicInfo',
+          'validateUpstreamBasicInfo',
+        ),
+    },
+  },
+  {
+    title: '在库数量',
+    field: 'stockCount',
+    width: 100,
+    slots: {
+      default: ({ row }) => row.stockCount ?? 0,
+    },
+  },
+  {
+    title: '卡类型',
+    field: 'batchInfo.inboundOptions.cardType',
+    params: { dictType: DictEnum.T_CARD_TYPE, fallbackField: 'batchInfo.cardType' },
+    width: 120,
+    slots: {
+      default: ({ row }) => {
+        const value = batchInfoValue(
+          row,
+          'inboundOptions.cardType',
+          'cardType',
+        );
+        return value === undefined
+          ? '--'
+          : renderDict(String(value), DictEnum.T_CARD_TYPE);
+      },
+    },
+  },
+  {
+    title: '上游套餐',
+    field: 'batchInfo.inboundOptions.upPkgCode',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoText(row, 'inboundOptions.upPkgCode', 'upPkgCode'),
+    },
+  },
+  {
+    title: '供应商',
+    field: 'batchInfo.inboundOptions.suppliersCode',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoText(
+          row,
+          'inboundOptions.suppliersCode',
+          'suppliersCode',
+        ),
+    },
+  },
+  {
+    title: '上游给出激活时间',
+    field: 'batchInfo.inboundOptions.upstreamActivationTime',
+    width: 170,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoText(
+          row,
+          'inboundOptions.upstreamActivationTime',
+          'upstreamActivationTime',
+        ),
+    },
+  },
+  {
+    title: '贴片转插拔',
+    field: 'batchInfo.inboundOptions.insertToPlugEnabled',
+    params: { dictType: DictEnum.GLOBAL_YES_OR_NO, fallbackField: 'batchInfo.insertToPlugEnabled' },
+    width: 110,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoYesOrNo(
+          row,
+          'inboundOptions.insertToPlugEnabled',
+          'insertToPlugEnabled',
+        ),
+    },
+  },
+  {
+    title: '运营商达量断网',
+    field: 'batchInfo.inboundOptions.carrierTrafficCutoffEnabled',
+    params: { dictType: DictEnum.GLOBAL_YES_OR_NO, fallbackField: 'batchInfo.carrierTrafficCutoffEnabled' },
+    width: 130,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoYesOrNo(
+          row,
+          'inboundOptions.carrierTrafficCutoffEnabled',
+          'carrierTrafficCutoffEnabled',
+        ),
+    },
+  },
+  {
+    title: '协议期到期时间',
+    field: 'batchInfo.inboundOptions.agreementExpiryDate',
+    width: 170,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoText(
+          row,
+          'inboundOptions.agreementExpiryDate',
+          'agreementExpiryDate',
+        ),
+    },
+  },
+  {
+    title: '是否有测试期',
+    field: 'batchInfo.inboundOptions.hasTestPeriod',
+    params: { dictType: DictEnum.GLOBAL_YES_OR_NO, fallbackField: 'batchInfo.hasTestPeriod' },
+    width: 110,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoYesOrNo(
+          row,
+          'inboundOptions.hasTestPeriod',
+          'hasTestPeriod',
+        ),
+    },
+  },
+  {
+    title: '测试期天数',
+    field: 'batchInfo.inboundOptions.testPeriodDays',
+    width: 110,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoText(
+          row,
+          'inboundOptions.testPeriodDays',
+          'testPeriodDays',
+        ),
+    },
+  },
+  {
+    title: '测试期最晚过期日期',
+    field: 'batchInfo.inboundOptions.testPeriodLatestExpiryDate',
+    width: 170,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoText(
+          row,
+          'inboundOptions.testPeriodLatestExpiryDate',
+          'testPeriodLatestExpiryDate',
+        ),
+    },
+  },
+  {
+    title: '是否有沉默期',
+    field: 'batchInfo.inboundOptions.hasSilentPeriod',
+    params: { dictType: DictEnum.GLOBAL_YES_OR_NO, fallbackField: 'batchInfo.hasSilentPeriod' },
+    width: 110,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoYesOrNo(
+          row,
+          'inboundOptions.hasSilentPeriod',
+          'hasSilentPeriod',
+        ),
+    },
+  },
+  {
+    title: '沉默期天数',
+    field: 'batchInfo.inboundOptions.silentPeriodDays',
+    width: 110,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoText(
+          row,
+          'inboundOptions.silentPeriodDays',
+          'silentPeriodDays',
+        ),
+    },
+  },
+  {
+    title: '沉默期最晚过期日期',
+    field: 'batchInfo.inboundOptions.silentPeriodLatestExpiryDate',
+    width: 170,
+    slots: {
+      default: ({ row }) =>
+        renderBatchInfoText(
+          row,
+          'inboundOptions.silentPeriodLatestExpiryDate',
+          'silentPeriodLatestExpiryDate',
+        ),
+    },
+  },
+  {
+    title: '操作',
+    field: 'action',
+    fixed: 'right',
+    width: 100,
+    slots: {
+      default: 'action',
+    },
+  },
+];
+
+// 批量管理字段列表
+export const BatchFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'chanKey',
+    component: 'ApiSelect',
+    label: '选择通道',
+    formItemClass: 'col-span-12',
+    componentProps: {
+      ...FormOptions.Api.tSimChannels({ autoSelect: false }),
+      allowClear: true,
+      showSearch: true,
+      optionFilterProp: 'label',
+      filterOption: fuzzyOptionFilter,
+    },
+  },
+  {
+    fieldName: 'validateUpstreamBasicInfo',
+    component: 'Switch',
+    label: '开启三码校验',
+    defaultValue: 0,
+    componentProps: FormOptions.Component.SwitchEnabled({
+      checkedChildren: '开启',
+      checkedValue: 1,
+      unCheckedChildren: '关闭',
+      unCheckedValue: 0,
+    }),
+    formItemClass: 'col-span-12',
+  },
+  {
+    fieldName: 'cardType',
+    component: 'Select',
+    label: '卡类型',
+    componentProps: {
+      placeholder: '请选择卡类型',
+      allowClear: true,
+      options: getDictOptions(DictEnum.T_CARD_TYPE),
+    },
+  },
+  {
+    fieldName: 'upPkgCode',
+    component: 'ApiSelect',
+    label: '选择上游套餐',
+    componentProps: {
+      ...FormOptions.Api.tSimUpstreamPackage(),
+      showSearch: true,
+      optionFilterProp: 'label',
+      filterOption: fuzzyOptionFilter,
+    },
+  },
+  {
+    fieldName: 'suppliersCode',
+    component: 'Input',
+    label: '供应商',
+    componentProps: {
+      placeholder: '请输入供应商',
+    },
+  },
+  {
+    fieldName: 'upstreamActivationTime',
+    component: 'DatePicker',
+    label: '上游给出激活时间',
+    componentProps: {
+      type: 'datetime',
+      clearable: true,
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    fieldName: 'agreementExpiryDate',
+    component: 'DatePicker',
+    label: '协议期到期时间',
+    componentProps: {
+      type: 'datetime',
+      clearable: true,
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    fieldName: 'controlInfoDivider',
+    component: 'Divider',
+    label: '管控信息',
+    componentProps: {
+      orientation: 'center',
+      class: '!border-none',
+      style: { marginBottom: '-40px' },
+    },
+    formItemClass: '!mb-0',
+  },
+  {
+    fieldName: 'insertToPlugEnabled',
+    component: 'Switch',
+    label: '贴片转插拔',
+    defaultValue: 1,
+    componentProps: FormOptions.Component.SwitchYesOrNo(),
+    formItemClass: 'border-t border-l border-r rounded-t !mt-0',
+  },
+  {
+    fieldName: 'carrierTrafficCutoffEnabled',
+    component: 'Switch',
+    label: '运营商达量断网',
+    defaultValue: 1,
+    componentProps: FormOptions.Component.SwitchYesOrNo(),
+    formItemClass: 'border-l border-r',
+  },
+
+  {
+    fieldName: 'hasTestPeriod',
+    component: 'Switch',
+    label: '是否有测试期',
+    defaultValue: 1,
+    componentProps: FormOptions.Component.SwitchYesOrNo(),
+    formItemClass: 'border-l border-r',
+  },
+  {
+    fieldName: 'hasSilentPeriod',
+    component: 'Switch',
+    label: '是否有沉默期',
+    defaultValue: 1,
+    componentProps: FormOptions.Component.SwitchYesOrNo(),
+    formItemClass: 'border-l border-r border-b rounded-b',
+  },
+  {
+    fieldName: 'testPeriodDays',
+    component: 'InputNumber',
+    label: '测试期天数',
+    dependencies: {
+      if: (values) => {
+        return values.hasTestPeriod === 0;
+      },
+      triggerFields: ['hasTestPeriod'],
+    },
+    componentProps: {
+      min: 0,
+      placeholder: '请输入测试期天数',
+      precision: 0,
+      style: { width: '100%' },
+    },
+  },
+  {
+    fieldName: 'testPeriodLatestExpiryDate',
+    component: 'DatePicker',
+    label: '测试期最晚过期日期',
+    dependencies: {
+      if: (values) => {
+        return values.hasTestPeriod === 0;
+      },
+      triggerFields: ['hasTestPeriod'],
+    },
+    componentProps: {
+      type: 'datetime',
+      clearable: true,
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+
+  {
+    fieldName: 'silentPeriodDays',
+    component: 'InputNumber',
+    label: '沉默期天数',
+    dependencies: {
+      if: (values) => {
+        return values.hasSilentPeriod === 0;
+      },
+      triggerFields: ['hasSilentPeriod'],
+    },
+    componentProps: {
+      min: 0,
+      placeholder: '请输入沉默期天数',
+      precision: 0,
+      style: { width: '100%' },
+    },
+  },
+  {
+    fieldName: 'silentPeriodLatestExpiryDate',
+    component: 'DatePicker',
+    label: '沉默期最晚过期日期',
+    dependencies: {
+      if: (values) => {
+        return values.hasSilentPeriod === 0;
+      },
+      triggerFields: ['hasSilentPeriod'],
+    },
+    componentProps: {
+      type: 'datetime',
+      clearable: true,
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+];
+
+// 连号导入字段列表
+export const RangeFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'rangeType',
+    component: 'RadioGroup',
+    label: '连号类型',
+    defaultValue: 'iccid',
+    componentProps: {
+      buttonStyle: 'solid',
+      optionType: 'button',
+      options: [
+        { label: 'ICCID', value: 'iccid' },
+        { label: 'MSISDN', value: 'msisdn' },
+        { label: 'IMSI', value: 'imsi' },
+      ],
+    },
+  },
+  {
+    fieldName: 'startIccid',
+    component: 'Input',
+    label: '起始ICCID',
+    componentProps: {
+      placeholder: '请输入起始号段ICCID',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      if: (values) => values.rangeType === 'iccid',
+      triggerFields: ['rangeType'],
+    },
+  },
+  {
+    fieldName: 'endIccid',
+    component: 'Input',
+    label: '结束ICCID',
+    componentProps: {
+      placeholder: '请输入结束号段ICCID',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      if: (values) => values.rangeType === 'iccid',
+      triggerFields: ['rangeType'],
+    },
+  },
+  {
+    fieldName: 'startMsisdn',
+    component: 'Input',
+    label: '起始MSISDN',
+    componentProps: {
+      placeholder: '请输入起始号段MSISDN',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      if: (values) => values.rangeType === 'msisdn',
+      triggerFields: ['rangeType'],
+    },
+  },
+  {
+    fieldName: 'endMsisdn',
+    component: 'Input',
+    label: '结束MSISDN',
+    componentProps: {
+      placeholder: '请输入结束号段MSISDN',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      if: (values) => values.rangeType === 'msisdn',
+      triggerFields: ['rangeType'],
+    },
+  },
+  {
+    fieldName: 'startImsi',
+    component: 'Input',
+    label: '起始IMSI',
+    componentProps: {
+      placeholder: '请输入起始号段IMSI',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      if: (values) => values.rangeType === 'imsi',
+      triggerFields: ['rangeType'],
+    },
+  },
+  {
+    fieldName: 'endImsi',
+    component: 'Input',
+    label: '结束IMSI',
+    componentProps: {
+      placeholder: '请输入结束号段IMSI',
+    },
+    formItemClass: 'col-span-6',
+    dependencies: {
+      if: (values) => values.rangeType === 'imsi',
+      triggerFields: ['rangeType'],
+    },
+  },
+  ...BatchFormSchema,
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/range.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/range.vue
new file mode 100644
index 0000000..6685cd6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing/range.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { TSimCardInboundRangeSubmitParams } from '#/api/iotlcm/tLifeCycle/tSimCardInbound';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { RangeSubmit } from '#/api/iotlcm/tLifeCycle/tSimCardInbound';
+import BetterVben from '#/constants/BetterVben';
+
+import { RangeFormSchema } from './model';
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+
+/** ====================  方法  ==================== */
+async function handleConfirm() {
+  const [flag, values] = await BetterVben.function.formValidate(formApi);
+  if (!flag) {
+    return;
+  }
+  await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+    const rangeValues = values as TSimCardInboundRangeSubmitParams;
+    const rangeType = rangeValues.rangeType || 'iccid';
+    const res = await RangeSubmit({
+      ...rangeValues,
+      startIccid: rangeType === 'iccid' ? rangeValues.startIccid : undefined,
+      endIccid: rangeType === 'iccid' ? rangeValues.endIccid : undefined,
+      startMsisdn:
+        rangeType === 'msisdn' ? rangeValues.startMsisdn : undefined,
+      endMsisdn: rangeType === 'msisdn' ? rangeValues.endMsisdn : undefined,
+      startImsi: rangeType === 'imsi' ? rangeValues.startImsi : undefined,
+      endImsi: rangeType === 'imsi' ? rangeValues.endImsi : undefined,
+      sourceType: 1,
+    });
+    message.success(`操作成功,批次号:${res?.batchNo || ''}`);
+    emit('confirm');
+    modalApi.close();
+  });
+}
+
+async function handleReset() {
+  await formApi.resetForm();
+}
+
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: RangeFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  async onConfirm() {
+    await handleConfirm();
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await handleReset();
+    }
+  },
+});
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Modal title="连号">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/display.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/display.tsx
new file mode 100644
index 0000000..4ab3b4d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/display.tsx
@@ -0,0 +1,151 @@
+import type { VbenFormSchema } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import DictEnum from '#/constants/DictEnum';
+import { renderDict } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+export const orderQuerySchema: VbenFormSchema[] = [
+  {
+    fieldName: 'orderSn',
+    component: 'Input',
+    label: '订单编号',
+    componentProps: { allowClear: true, placeholder: '输入订单编号' },
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'orderType',
+    component: 'Select',
+    label: '业务类型',
+    componentProps: {
+      allowClear: true,
+      options: getDictOptions(DictEnum.ORDER_TYPE),
+      placeholder: '选择业务类型',
+    },
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'payStatus',
+    component: 'Select',
+    label: '支付状态',
+    componentProps: {
+      allowClear: true,
+      options: getDictOptions(DictEnum.PAY_STATUS),
+      placeholder: '选择支付状态',
+    },
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'payType',
+    component: 'Select',
+    label: '支付方式',
+    componentProps: {
+      allowClear: true,
+      options: getDictOptions(DictEnum.PAY_TYPE),
+      placeholder: '选择支付方式',
+    },
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'createdAt',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      clearable: true,
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    formItemClass: 'col-span-1',
+  },
+];
+
+const baseColumns: VxeGridProps['columns'] = [
+  {
+    field: 'orderSn',
+    title: '订单编号',
+    fixed: 'left',
+    minWidth: 190,
+    slots: { default: 'orderSn' },
+  },
+  {
+    field: 'orderType',
+    params: { dictType: DictEnum.ORDER_TYPE },
+    title: '业务类型',
+    width: 110,
+    slots: {
+      default: ({ row }) =>
+        renderDict(String(row.orderType), DictEnum.ORDER_TYPE),
+    },
+  },
+  {
+    field: 'productName',
+    title: '套餐',
+    minWidth: 220,
+    slots: { default: 'product' },
+  },
+  { field: 'quantity', title: '卡数量', width: 90, align: 'right' },
+  {
+    field: 'totalAmount',
+    title: '订单金额',
+    width: 120,
+    align: 'right',
+    slots: { default: 'totalAmount' },
+  },
+  {
+    field: 'payType',
+    params: { dictType: DictEnum.PAY_TYPE },
+    title: '支付方式',
+    width: 110,
+    slots: {
+      default: ({ row }) => renderDict(String(row.payType), DictEnum.PAY_TYPE),
+    },
+  },
+  {
+    field: 'payStatus',
+    params: { dictType: DictEnum.PAY_STATUS },
+    title: '支付状态',
+    width: 110,
+    slots: {
+      default: ({ row }) =>
+        renderDict(String(row.payStatus), DictEnum.PAY_STATUS),
+    },
+  },
+];
+
+export const purchaseOrderColumns: VxeGridProps['columns'] = [
+  ...baseColumns,
+  {
+    field: 'agentName',
+    title: '销售方',
+    minWidth: 150,
+    showOverflow: 'tooltip',
+  },
+  { field: 'createdAt', title: '创建时间', minWidth: 170 },
+  { title: '操作', width: 80, fixed: 'right', slots: { default: 'action' } },
+];
+
+export const sellOrderColumns: VxeGridProps['columns'] = [
+  ...baseColumns,
+  {
+    field: 'customerName',
+    title: '购买方',
+    minWidth: 150,
+    showOverflow: 'tooltip',
+  },
+  {
+    field: 'distributionStatus',
+    params: { dictType: DictEnum.DISTRIBUTION_STATUS },
+    title: '分成状态',
+    width: 110,
+    slots: {
+      default: ({ row }) =>
+        renderDict(
+          String(row.distributionStatus),
+          DictEnum.DISTRIBUTION_STATUS,
+        ),
+    },
+  },
+  { field: 'createdAt', title: '创建时间', minWidth: 170 },
+  { title: '操作', width: 80, fixed: 'right', slots: { default: 'action' } },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/index.vue
new file mode 100644
index 0000000..5855ae3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/index.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { OrderListParams, OrderRow } from '#/api/iotlcm/tOrder';
+
+import { h } from 'vue';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { MdiExport } from '@vben/icons';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Export, List } from '#/api/iotlcm/tOrder';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import { orderQuerySchema, purchaseOrderColumns } from './display';
+import ViewDrawer from './view.vue';
+
+const money = (value: unknown) => `¥${Number(value || 0).toFixed(2)}`;
+const formOptions = {
+  collapsed: false,
+  schema: orderQuerySchema,
+  showCollapseButton: false,
+  submitOnChange: false,
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeTableGridOptions<OrderRow> = {
+  columns: purchaseOrderColumns,
+  height: 'auto',
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, values) =>
+        List({ page: page.currentPage, pageSize: page.pageSize, ...values }),
+    },
+  },
+  rowConfig: { keyField: 'id' },
+  showOverflow: 'tooltip',
+  toolbarConfig: {
+    custom: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const [ViewDrawerComponent, drawerApi] = useVbenDrawer({
+  connectedComponent: ViewDrawer,
+});
+
+function openDetail(row: OrderRow) {
+  drawerApi.setData({ record: row });
+  drawerApi.open();
+}
+
+async function exportOrders() {
+  const values = gridApi.formApi.form.values as Omit<
+    OrderListParams,
+    'page' | 'pageSize'
+  >;
+  await commonDownloadExcel(Export, '购买方订单', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...values,
+    page: 1,
+  });
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="购买方订单">
+      <template #toolbar-tools>
+        <Button
+          v-access:code="'cpm:iot:tOrder:export'"
+          :icon="h(MdiExport)"
+          type="primary"
+          @click="exportOrders"
+        >
+          导出
+        </Button>
+      </template>
+      <template #orderSn="{ row }">
+        <Button type="link" class="order-link" @click="openDetail(row)">
+          {{ row.orderSn }}
+        </Button>
+      </template>
+      <template #product="{ row }">
+        <div class="product-cell">
+          <span>{{ row.productName || '-' }}</span>
+        </div>
+      </template>
+      <template #totalAmount="{ row }">
+        <strong class="amount-cell">{{ money(row.totalAmount) }}</strong>
+      </template>
+      <template #action="{ row }">
+        <Button
+          v-access:code="'cpm:iot:tOrder:view'"
+          type="link"
+          @click="openDetail(row)"
+        >
+          查看
+        </Button>
+      </template>
+    </Grid>
+    <ViewDrawerComponent />
+  </Page>
+</template>
+
+<style scoped>
+.order-link {
+  padding: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.product-cell {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  line-height: 1.35;
+}
+.product-cell small {
+  color: #8c8c8c;
+}
+.amount-cell {
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/indexTwo.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/indexTwo.vue
new file mode 100644
index 0000000..a6b33cc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/indexTwo.vue
@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { OrderListParams, OrderRow } from '#/api/iotlcm/tOrder';
+
+import { h } from 'vue';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { MdiExport } from '@vben/icons';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Export, SellList } from '#/api/iotlcm/tOrder';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import { orderQuerySchema, sellOrderColumns } from './display';
+import ViewDrawer from './view.vue';
+
+const money = (value: unknown) => `¥${Number(value || 0).toFixed(2)}`;
+const formOptions = {
+  collapsed: false,
+  schema: orderQuerySchema,
+  showCollapseButton: false,
+  submitOnChange: false,
+  submitOnEnter: true,
+};
+const gridOptions: VxeTableGridOptions<OrderRow> = {
+  columns: sellOrderColumns,
+  height: 'auto',
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, values) =>
+        SellList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...values,
+        }),
+    },
+  },
+  rowConfig: { keyField: 'id' },
+  showOverflow: 'tooltip',
+  toolbarConfig: {
+    custom: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const [ViewDrawerComponent, drawerApi] = useVbenDrawer({
+  connectedComponent: ViewDrawer,
+});
+function openDetail(row: OrderRow) {
+  drawerApi.setData({ record: row });
+  drawerApi.open();
+}
+
+async function exportOrders() {
+  const values = gridApi.formApi.form.values as Omit<
+    OrderListParams,
+    'page' | 'pageSize'
+  >;
+  await commonDownloadExcel(Export, '销售方订单', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...values,
+    page: 1,
+    perspective: 'sell',
+  });
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="销售方订单">
+      <template #toolbar-tools>
+        <Button
+          v-access:code="'cpm:iot:tOrder:export'"
+          :icon="h(MdiExport)"
+          type="primary"
+          @click="exportOrders"
+        >
+          导出
+        </Button>
+      </template>
+      <template #orderSn="{ row }">
+        <Button type="link" class="order-link" @click="openDetail(row)">
+          {{ row.orderSn }}
+        </Button>
+      </template>
+      <template #product="{ row }">
+        <div class="product-cell">
+          <span>{{ row.productName || '-' }}</span>
+        </div>
+      </template>
+      <template #totalAmount="{ row }">
+        <strong class="amount-cell">{{ money(row.totalAmount) }}</strong>
+      </template>
+      <template #action="{ row }">
+        <Button
+          v-access:code="'cpm:iot:tOrder:view'"
+          type="link"
+          @click="openDetail(row)"
+        >
+          查看
+        </Button>
+      </template>
+    </Grid>
+    <ViewDrawerComponent />
+  </Page>
+</template>
+
+<style scoped>
+.order-link {
+  padding: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.product-cell {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  line-height: 1.35;
+}
+.product-cell small {
+  color: #8c8c8c;
+}
+.amount-cell {
+  font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/view.vue
new file mode 100644
index 0000000..adedae8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tOrder/view.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import type { TableColumnsType } from 'ant-design-vue';
+
+import type { OrderItem, OrderRow } from '#/api/iotlcm/tOrder';
+
+import { computed, defineComponent, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { Descriptions, DescriptionsItem, Table } from 'ant-design-vue';
+
+import { View } from '#/api/iotlcm/tOrder';
+import DictEnum from '#/constants/DictEnum';
+import { renderDict } from '#/utils';
+
+const order = ref<OrderRow>();
+const loading = ref(false);
+const DictValue = defineComponent({
+  name: 'OrderDictValue',
+  props: {
+    dictName: { type: String, required: true },
+    value: { type: [Number, String], required: true },
+  },
+  setup(props) {
+    return () => renderDict(String(props.value), props.dictName);
+  },
+});
+const money = (value: unknown) => `¥${Number(value || 0).toFixed(2)}`;
+const businessTitle = computed(() => {
+  switch (order.value?.orderType) {
+    case 1: {
+      return '订购';
+    }
+    case 2: {
+      return '续费';
+    }
+    case 3: {
+      return '变更';
+    }
+    default: {
+      return '交易';
+    }
+  }
+});
+const isCardOrder = computed(() =>
+  [1, 2, 3].includes(order.value?.orderType ?? 0),
+);
+const itemColumns = computed<TableColumnsType<OrderItem>>(() => {
+  const columns: TableColumnsType<OrderItem> = [
+    { title: '套餐', dataIndex: 'productName', key: 'productName', width: 220 },
+    {
+      title: '数量',
+      dataIndex: 'quantity',
+      key: 'quantity',
+      width: 80,
+      align: 'right',
+    },
+    {
+      title: '单价',
+      dataIndex: 'price',
+      key: 'price',
+      width: 110,
+      align: 'right',
+    },
+  ];
+  if (isCardOrder.value) {
+    columns.push(
+      {
+        title: '服务开始',
+        dataIndex: 'serviceBeginTime',
+        key: 'serviceBeginTime',
+        width: 170,
+      },
+      {
+        title: '服务结束',
+        dataIndex: 'serviceEndTime',
+        key: 'serviceEndTime',
+        width: 170,
+      },
+    );
+  }
+  return columns;
+});
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onOpenChange(open) {
+    if (!open) return;
+    const { record } = drawerApi.getData() as { record: OrderRow };
+    loading.value = true;
+    try {
+      order.value = await View({ id: record.id });
+    } finally {
+      loading.value = false;
+    }
+  },
+});
+</script>
+
+<template>
+  <Drawer
+    :footer="false"
+    class="w-[980px] max-w-[calc(100vw-24px)]"
+    title="订单详情"
+  >
+    <div v-if="order" class="order-detail" :class="{ 'is-loading': loading }">
+      <section>
+        <h3>订单概览</h3>
+        <Descriptions bordered size="small" :column="2">
+          <DescriptionsItem label="订单编号">
+            <span class="mono">{{ order.orderSn }}</span>
+          </DescriptionsItem>
+          <DescriptionsItem label="业务类型">
+            <DictValue
+              :dict-name="DictEnum.ORDER_TYPE"
+              :value="order.orderType"
+            />
+          </DescriptionsItem>
+          <DescriptionsItem label="购买方">
+            {{ order.customerName || '-' }}
+          </DescriptionsItem>
+          <DescriptionsItem label="销售方">
+            {{ order.agentName || '-' }}
+          </DescriptionsItem>
+          <DescriptionsItem label="订单状态">
+            <DictValue
+              :dict-name="DictEnum.ORDER_STATUS"
+              :value="order.orderStatus"
+            />
+          </DescriptionsItem>
+          <DescriptionsItem label="支付状态">
+            <DictValue
+              :dict-name="DictEnum.PAY_STATUS"
+              :value="order.payStatus"
+            />
+          </DescriptionsItem>
+          <DescriptionsItem label="创建时间">
+            {{ order.createdAt || '-' }}
+          </DescriptionsItem>
+        </Descriptions>
+      </section>
+
+      <section>
+        <h3>{{ businessTitle }}明细</h3>
+        <Table
+          :columns="itemColumns"
+          :data-source="order.items || []"
+          :pagination="false"
+          row-key="itemId"
+          size="small"
+          :scroll="{ x: 900 }"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'price'">
+              {{ money(record.price) }}
+            </template>
+          </template>
+        </Table>
+        <div v-if="!isCardOrder" class="business-hint">
+          该业务不涉及卡套餐服务周期，仅展示交易明细。
+        </div>
+      </section>
+
+      <section>
+        <h3>支付信息</h3>
+        <Descriptions bordered size="small" :column="3">
+          <DescriptionsItem label="订单金额">
+            <strong>{{ money(order.totalAmount) }}</strong>
+          </DescriptionsItem>
+          <DescriptionsItem label="商品金额">
+            {{ money(order.productAmount) }}
+          </DescriptionsItem>
+          <DescriptionsItem label="优惠金额">
+            {{ money(order.discountAmount) }}
+          </DescriptionsItem>
+          <DescriptionsItem label="余额支付">
+            {{ money(order.balance) }}
+          </DescriptionsItem>
+          <DescriptionsItem label="线下支付">
+            {{ money(order.offlinePaidAmount) }}
+          </DescriptionsItem>
+          <DescriptionsItem label="已付金额">
+            {{ money(order.paidAmount) }}
+          </DescriptionsItem>
+          <DescriptionsItem label="支付方式">
+            <DictValue :dict-name="DictEnum.PAY_TYPE" :value="order.payType" />
+          </DescriptionsItem>
+          <DescriptionsItem label="支付流水">
+            <span class="mono">{{ order.payOrderSn || '-' }}</span>
+          </DescriptionsItem>
+          <DescriptionsItem label="支付时间">
+            {{ order.payTime || '-' }}
+          </DescriptionsItem>
+        </Descriptions>
+      </section>
+    </div>
+  </Drawer>
+</template>
+
+<style scoped>
+.order-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-bottom: 12px;
+}
+.order-detail.is-loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+section h3 {
+  margin: 0 0 10px;
+  color: #1f2329;
+  font-size: 14px;
+  font-weight: 600;
+}
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+:deep(.ant-descriptions-item-label) {
+  width: 112px;
+  color: #606875;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/edit.vue
new file mode 100644
index 0000000..63a4a25
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/edit.vue
@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import type { PackageCreateType } from './model';
+import type { VbenFormSchema } from '#/adapter/form';
+
+import type { TSimFlowPackageInfoModel } from '#/api/iotlcm/tPricingPackage/tSimFlowPackageInfo/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/tPricingPackage/tSimFlowPackageInfo';
+import BetterVben from '#/constants/BetterVben';
+
+import {
+  EditFormSchema,
+  getPackageFormSchemaByPackageType,
+  normalizePackageInfoFormSchema,
+  PackageCreateTypeConfig,
+  PackageCreateTypeOptions,
+  PoolCardPackageFormSchema,
+  PoolCardTopupFormSchema,
+  SingleCardPackageFormSchema,
+  SingleCardTopupFormSchema,
+} from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data?: TSimFlowPackageInfoModel;
+  isUpdate: boolean;
+  packageType?: PackageCreateType;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const packageType = ref<PackageCreateType>();
+const isCardPackage = computed(() => packageType.value === 'cardPackage');
+const isCardTopup = computed(() => packageType.value === 'cardTopup');
+const isPoolPackage = computed(() => packageType.value === 'poolPackage');
+const isPoolTopup = computed(() => packageType.value === 'poolTopup');
+const isPoolCreateType = computed(
+  () => isPoolPackage.value || isPoolTopup.value,
+);
+const hasCreateForm = computed(
+  () =>
+    isCardPackage.value ||
+    isCardTopup.value ||
+    isPoolPackage.value ||
+    isPoolTopup.value,
+);
+const title = computed(() => {
+  if (isUpdate.value) {
+    return $t('pages.common.edit');
+  }
+  const option = PackageCreateTypeOptions.find(
+    (item) => item.value === packageType.value,
+  );
+  return option ? `新增${option.label}` : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+function normalizePackageCodes(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return [
+      ...new Set(
+        value
+          .map((item) => String(item ?? '').trim())
+          .filter((item) => item !== ''),
+      ),
+    ];
+  }
+  const text = String(value ?? '').trim();
+  if (!text) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(text);
+    if (Array.isArray(parsed)) {
+      return normalizePackageCodes(parsed);
+    }
+  } catch {
+    // 兼容旧数据中的逗号/顿号分隔字符串。
+  }
+  return [
+    ...new Set(
+      text
+        .replaceAll(/^\[|\]$/g, '')
+        .split(/[,，、;\s]+/)
+        .map((item) => String(item ?? '').trim())
+        .map((item) => item.replaceAll(/^['"]|['"]$/g, ''))
+        .filter((item) => item !== ''),
+    ),
+  ];
+}
+
+function applyRenewableSelfOption(submitValue: Record<string, any>) {
+  const packageCode = String(submitValue.packageCode ?? '').trim();
+  const codes = normalizePackageCodes(submitValue.renewablePackageCodes);
+  const withoutSelf = codes.filter((item) => item !== packageCode);
+
+  submitValue.renewablePackageCodes =
+    packageCode && submitValue.renewableSelfIncluded
+      ? [packageCode, ...withoutSelf]
+      : withoutSelf;
+  delete submitValue.renewableSelfIncluded;
+}
+
+function toFiniteNumber(value: unknown) {
+  if (value === null || value === undefined || value === '') {
+    return undefined;
+  }
+  const numberValue = Number(value);
+  return Number.isFinite(numberValue) ? numberValue : undefined;
+}
+
+function pickPackagePriceValue(
+  value: unknown,
+  sysValue: unknown,
+  fallback: number,
+) {
+  return toFiniteNumber(sysValue) ?? toFiniteNumber(value) ?? fallback;
+}
+
+function normalizePackagePriceFields(values: Record<string, any>) {
+  return {
+    ...values,
+    defaultProfit: pickPackagePriceValue(
+      values.defaultProfit,
+      values.sysDefaultProfit,
+      0,
+    ),
+    defaultRatio: pickPackagePriceValue(
+      values.defaultRatio,
+      values.sysDefaultRatio,
+      1,
+    ),
+    defaultTerminalProfit: pickPackagePriceValue(
+      values.defaultTerminalProfit,
+      values.sysDefaultTerminalProfit,
+      0,
+    ),
+    defaultTerminalRatio: pickPackagePriceValue(
+      values.defaultTerminalRatio,
+      values.sysDefaultTerminalRatio,
+      1,
+    ),
+  };
+}
+
+function setPackageFormSchema(schema: VbenFormSchema[]) {
+  formApi.setState({
+    schema: normalizePackageInfoFormSchema(schema),
+  });
+}
+
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  packageType.value = data.packageType;
+  const createFormSchemaMap: Partial<
+    Record<PackageCreateType, VbenFormSchema[]>
+  > = {
+    cardPackage: SingleCardPackageFormSchema,
+    cardTopup: SingleCardTopupFormSchema,
+    poolPackage: PoolCardPackageFormSchema,
+    poolTopup: PoolCardTopupFormSchema,
+  };
+  const baseSchema = data.isUpdate
+    ? getPackageFormSchemaByPackageType(data.data?.packageType) ||
+      EditFormSchema
+    : data.packageType
+      ? createFormSchemaMap[data.packageType] || EditFormSchema
+      : EditFormSchema;
+  setPackageFormSchema(baseSchema);
+  await formApi.resetForm();
+  if (data.isUpdate) {
+    try {
+      const res = await View({ id: data.data!.id });
+      const viewSchema =
+        getPackageFormSchemaByPackageType(res.packageType) || baseSchema;
+      setPackageFormSchema(viewSchema);
+      await formApi.resetForm();
+      const packageCode = String(res.packageCode ?? '').trim();
+      const renewablePackageCodes = normalizePackageCodes(
+        res.renewablePackageCodes,
+      );
+      await formApi.setValues({
+        ...normalizePackagePriceFields(res as Record<string, any>),
+        billingMethod: String(res.billingMethod ?? ''),
+        renewablePackageCodes: renewablePackageCodes.filter(
+          (item) => item !== packageCode,
+        ),
+        renewableSelfIncluded:
+          packageCode && renewablePackageCodes.includes(packageCode) ? 1 : 0,
+      });
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+    return;
+  }
+
+  if (data.packageType) {
+    const config = PackageCreateTypeConfig[data.packageType];
+    await formApi.setValues({
+      billingMethod: config.billingMethod,
+      enabled: 1,
+      isAutoRenew: 0,
+      packageType: config.packageType,
+      sortNo: 0,
+    });
+  }
+}
+
+async function handleConfirm() {
+  try {
+    if (!isUpdate.value && packageType.value && !hasCreateForm.value) {
+      modalApi.close();
+      return;
+    }
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      const createConfig = packageType.value
+        ? PackageCreateTypeConfig[packageType.value]
+        : undefined;
+      let submitValue: Record<string, any> =
+        !isUpdate.value && createConfig
+          ? {
+              ...value,
+              packageType: createConfig.packageType,
+              ...(isPoolCreateType.value ? { poolPackageCode: null } : {}),
+            }
+          : { ...value };
+      submitValue = normalizePackagePriceFields(submitValue);
+      applyRenewableSelfOption(submitValue);
+      await BetterVben.function.formSubmit(
+        Edit(submitValue as TSimFlowPackageInfoModel),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '操作成功',
+          emit: () => {
+            emit('confirm');
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.grid,
+  schema: normalizePackageInfoFormSchema(EditFormSchema),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form v-if="isUpdate || !packageType || hasCreateForm" />
+    <div v-else class="text-sm text-muted-foreground">
+      当前新增类型：{{ title }}
+    </div>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/index.vue
new file mode 100644
index 0000000..a2238c1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/index.vue
@@ -0,0 +1,233 @@
+<script lang="ts" setup>
+import type { PackageCreateType } from './model';
+
+import type { TSimFlowPackageInfoModel } from '#/api/iotlcm/tPricingPackage/tSimFlowPackageInfo/type';
+
+import { h, ref } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus, SyncOutlined } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import {
+  Button,
+  Dropdown,
+  Menu,
+  MenuItem,
+  message,
+  Modal,
+  Popconfirm,
+} from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  Delete,
+  Export,
+  List,
+  SyncDeptPackages,
+} from '#/api/iotlcm/tPricingPackage/tSimFlowPackageInfo';
+import BetterVben from '#/constants/BetterVben';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editModal from './edit.vue';
+import {
+  IndexGridColumns,
+  IndexGridSchema,
+  PackageCreateTypeOptions,
+} from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<TSimFlowPackageInfoModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TSimFlowPackageInfoModel) {
+  viewModalApi.setData({ row }).open();
+}
+function handleEdit(row?: TSimFlowPackageInfoModel) {
+  editModalApi.setData({ data: row, isUpdate: !!row }).open();
+}
+function handleCreateByType(type: PackageCreateType) {
+  editModalApi.setData({ isUpdate: false, packageType: type }).open();
+}
+async function handleDelete(row: TSimFlowPackageInfoModel) {
+  await Delete({ id: [row.id] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: number[] = rows.map((row) => row.id);
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    centered: true,
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ id: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '流量套餐信息', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+async function handleSyncDeptPackages() {
+  await SyncDeptPackages();
+  message.success('同步成功');
+  await handleRefresh();
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="流量套餐信息">
+      <template #toolbar-tools>
+        <div class="flex items-center justify-center gap-2">
+          <Dropdown>
+            <Button
+              class="flex items-center"
+              type="primary"
+              :icon="h(MdiPlus)"
+              v-access:code="'cpm:iot:tSimFlowPackageInfo:edit'"
+            >
+              新增
+            </Button>
+            <template #overlay>
+              <Menu>
+                <MenuItem
+                  v-for="item in PackageCreateTypeOptions"
+                  :key="item.value"
+                  @click="handleCreateByType(item.value)"
+                >
+                  {{ item.label }}
+                </MenuItem>
+              </Menu>
+            </template>
+          </Dropdown>
+          <Button
+            class="flex items-center"
+            type="primary"
+            :icon="h(SyncOutlined)"
+            @click="handleSyncDeptPackages"
+            v-access:code="'cpm:iot:tSimFlowPackageInfo:list'"
+          >
+            一键同步
+          </Button>
+          <Button
+            v-if="selectRows.length > 0"
+            class="flex items-center"
+            type="primary"
+            danger
+            :icon="h(MdiDelete)"
+            @click="handleMultiDelete"
+            v-access:code="'cpm:iot:tSimFlowPackageInfo:delete'"
+          >
+            删除
+          </Button>
+          <Button
+            class="flex items-center"
+            type="primary"
+            :icon="h(MdiExport)"
+            @click="handleExport"
+            v-access:code="'cpm:iot:tSimFlowPackageInfo:export'"
+          >
+            导出
+          </Button>
+        </div>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center justify-center gap-2">
+          <Button
+            class="border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:iot:tSimFlowPackageInfo:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:iot:tSimFlowPackageInfo:edit'"
+          >
+            修改
+          </Button>
+          <AccessControl
+            :codes="['cpm:iot:tSimFlowPackageInfo:delete']"
+            type="code"
+          >
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button class="border-none p-0" :block="false" type="link" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/model.tsx
new file mode 100644
index 0000000..08ccf0a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/model.tsx
@@ -0,0 +1,1548 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { List as PackageList } from '#/api/iotlcm/tPricingPackage/tSimFlowPackageInfo';
+import { z } from '#/adapter/form';
+import DictEnum from '#/constants/DictEnum';
+import FormOptions from '#/constants/FormOption';
+import { renderDict } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+type PackageFormComponentProps = VbenFormSchema['componentProps'];
+
+const CARD_PACKAGE_TYPE = 101;
+const POOL_PACKAGE_TYPE = 102;
+const CARD_TOPUP_PACKAGE_TYPE = 103;
+const POOL_TOPUP_PACKAGE_TYPE = 104;
+const MONTH_BILLING_METHOD = '1';
+const packageFormCompactClass = 'col-span-12 md:col-span-6 xl:col-span-3';
+const packageFormWideClass = 'col-span-12 md:col-span-6 xl:col-span-6';
+const packageFormFullClass = 'col-span-12';
+const packageFormWideFields = new Set([
+  'autoRenewPackageId',
+  'changeablePackageCodes',
+  'poolPackageCode',
+  'renewablePackageCodes',
+  'topupPackageCodes',
+]);
+const packageFormFullFields = new Set([
+  'discountRateConfig',
+  'remark',
+  'renewableDurationConfig',
+]);
+const fullWidthComponents = new Set([
+  'ApiSelect',
+  'HtcFormTextArea',
+  'Input',
+  'InputNumber',
+  'Select',
+]);
+const moneyInputProps = {
+  min: 0,
+  precision: 2,
+  step: 0.01,
+  style: { width: '100%' },
+};
+const ratioInputProps = {
+  min: 0,
+  precision: 2,
+  step: 0.01,
+  style: { width: '100%' },
+};
+const positiveFlowMbRule = z
+  .coerce.number({
+    required_error: '请输入套餐流量(MB)',
+    invalid_type_error: '套餐流量必须是数字',
+  })
+  .positive('套餐流量(MB)必须大于0');
+const billingMethodOptions = () => getDictOptions(DictEnum.T_BILLING_METHOD);
+const packageTypeOptions = () => getDictOptions(DictEnum.T_PACKAGE_TYPE, true);
+
+function createSectionDivider(
+  fieldName: string,
+  title: string,
+): VbenFormSchema {
+  return {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName,
+    hideLabel: true,
+    formItemClass: packageFormFullClass,
+    renderComponentContent: () => ({
+      default: () => title,
+    }),
+  };
+}
+
+function packageFormItemClass(fieldName: unknown) {
+  const name = String(fieldName ?? '');
+  if (!name || name.startsWith('divider-')) {
+    return packageFormFullClass;
+  }
+  if (packageFormFullFields.has(name)) {
+    return packageFormFullClass;
+  }
+  if (packageFormWideFields.has(name)) {
+    return packageFormWideClass;
+  }
+  return packageFormCompactClass;
+}
+
+function fullWidthComponentProps(
+  component: unknown,
+  componentProps: PackageFormComponentProps,
+): PackageFormComponentProps {
+  if (
+    typeof componentProps === 'function' ||
+    !fullWidthComponents.has(String(component ?? ''))
+  ) {
+    return componentProps;
+  }
+  const props = { ...((componentProps as Record<string, any>) || {}) };
+  props.style = { ...((props.style as object) || {}), width: '100%' };
+  return props as PackageFormComponentProps;
+}
+
+export function normalizePackageInfoFormSchema(
+  schema: VbenFormSchema[],
+): VbenFormSchema[] {
+  return schema.map((item) => ({
+    ...item,
+    componentProps: fullWidthComponentProps(
+      item.component,
+      item.componentProps,
+    ),
+    formItemClass: packageFormItemClass(item.fieldName),
+  })) as VbenFormSchema[];
+}
+
+function renderRenewableYears(value: unknown) {
+  if (!Array.isArray(value)) {
+    return '--';
+  }
+  const years = value
+    .map(Number)
+    .filter((item) => Number.isFinite(item) && item > 0)
+    .map((item) => (item >= 12 && item % 12 === 0 ? item / 12 : item));
+  const uniqueYears = [...new Set(years)].toSorted((a, b) => a - b);
+  return uniqueYears.length > 0
+    ? uniqueYears.map((item) => `${item}年`).join('、')
+    : '--';
+}
+
+function renderCodeList(value: unknown) {
+  if (Array.isArray(value)) {
+    const codes = value
+      .map((item) => String(item ?? '').trim())
+      .filter(Boolean);
+    return codes.length > 0 ? codes.join('、') : '--';
+  }
+
+  const text = String(value ?? '').trim();
+  if (!text) {
+    return '--';
+  }
+
+  const codes = text
+    .replaceAll(/^\[|\]$/g, '')
+    .split(/[,，、;；|/\s]+/)
+    .map((item) => item.trim().replaceAll(/^['"]|['"]$/g, ''))
+    .filter(Boolean);
+  return codes.length > 0 ? codes.join('、') : '--';
+}
+
+function renderRatioValue(value: unknown) {
+  if (value === null || value === undefined || value === '') {
+    return '--';
+  }
+  const numberValue = Number(value);
+  return Number.isFinite(numberValue) ? numberValue.toFixed(2) : '--';
+}
+
+function normalizeCodeArray(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return [
+      ...new Set(
+        value
+          .map((item) => String(item ?? '').trim())
+          .filter((item) => item !== ''),
+      ),
+    ];
+  }
+
+  const text = String(value ?? '').trim();
+  if (!text) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(text);
+    if (Array.isArray(parsed)) {
+      return normalizeCodeArray(parsed);
+    }
+  } catch {
+    // 兼容逗号/顿号分隔的旧数据。
+  }
+  return [
+    ...new Set(
+      text
+        .replaceAll(/^\[|\]$/g, '')
+        .split(/[,，、;\s]+/)
+        .map((item) => item.trim().replaceAll(/^['"]|['"]$/g, ''))
+        .filter((item) => item !== ''),
+    ),
+  ];
+}
+
+let cardPackageItems: any[] = [];
+let cardTopupPackageItems: any[] = [];
+let poolPackageItems: any[] = [];
+let poolTopupPackageItems: any[] = [];
+async function getPackageItems(params: Record<string, any>) {
+  const res = await PackageList({ page: 1, pageSize: 1000, ...params });
+  if (Array.isArray(res)) {
+    return res;
+  }
+  return res?.items || [];
+}
+
+async function getCardPackageItems(params: Record<string, any> = {}) {
+  cardPackageItems = await getPackageItems({
+    ...params,
+    packageType: CARD_PACKAGE_TYPE,
+  });
+  return { items: cardPackageItems };
+}
+
+async function getCardTopupPackageItems(params: Record<string, any> = {}) {
+  cardTopupPackageItems = await getPackageItems({
+    ...params,
+    packageType: CARD_TOPUP_PACKAGE_TYPE,
+  });
+  return { items: cardTopupPackageItems };
+}
+
+function currentPackageCode(values: Record<string, any>) {
+  return String(values?.packageCode ?? '').trim();
+}
+
+function packageItemsWithoutSelf(items: any[], values: Record<string, any>) {
+  const selfCode = currentPackageCode(values);
+  if (!selfCode) {
+    return items;
+  }
+  return items.filter(
+    (item) => String(item?.packageCode ?? '').trim() !== selfCode,
+  );
+}
+
+function renewablePackageApi(
+  loader: (params?: Record<string, any>) => Promise<{ items: any[] }>,
+  values: Record<string, any>,
+) {
+  return async (params: Record<string, any> = {}) => {
+    const {
+      __renewablePackageType,
+      __renewableSelfPackageCode,
+      ...requestParams
+    } = params;
+    void __renewablePackageType;
+    void __renewableSelfPackageCode;
+    const result = await loader(requestParams);
+    return { items: packageItemsWithoutSelf(result.items || [], values) };
+  };
+}
+
+function renewablePackageLoader(values: Record<string, any>) {
+  switch (Number(values?.packageType)) {
+    case CARD_TOPUP_PACKAGE_TYPE: {
+      return getCardTopupPackageItems;
+    }
+    case POOL_PACKAGE_TYPE: {
+      return getPoolPackageItems;
+    }
+    case POOL_TOPUP_PACKAGE_TYPE: {
+      return getPoolTopupPackageItems;
+    }
+    default: {
+      return getCardPackageItems;
+    }
+  }
+}
+
+function renewablePackageItems(values: Record<string, any>) {
+  const packageCode = String(values?.packageCode ?? '').trim();
+  const filterSelf = (items: any[]) =>
+    items.filter(
+      (item) => String(item?.packageCode ?? '').trim() !== packageCode,
+    );
+  switch (Number(values?.packageType)) {
+    case CARD_TOPUP_PACKAGE_TYPE: {
+      return filterSelf(cardTopupPackageItems);
+    }
+    case POOL_PACKAGE_TYPE: {
+      return filterSelf(poolPackageItems);
+    }
+    case POOL_TOPUP_PACKAGE_TYPE: {
+      return filterSelf(poolTopupPackageItems);
+    }
+    default: {
+      return filterSelf(cardPackageItems);
+    }
+  }
+}
+
+function renewablePackageSelectProps(values: Record<string, any>) {
+  const packageCode = String(values?.packageCode ?? '').trim();
+  return {
+    api: renewablePackageApi(renewablePackageLoader(values), values),
+    labelField: 'packageName',
+    mode: 'multiple',
+    alwaysLoad: true,
+    optionFilterProp: 'label',
+    params: {
+      __renewablePackageType: Number(values?.packageType) || undefined,
+      __renewableSelfPackageCode: packageCode,
+    },
+    placeholder: '请选择可续费套餐',
+    resultField: 'items',
+    showSearch: true,
+    valueField: 'packageCode',
+  };
+}
+
+const renewablePackageComponentProps = (values: Record<string, any>) =>
+  renewablePackageSelectProps(values);
+
+export async function getPoolPackageItems(params: Record<string, any> = {}) {
+  poolPackageItems = await getPackageItems({
+    ...params,
+    packageType: POOL_PACKAGE_TYPE,
+  });
+  return { items: poolPackageItems };
+}
+
+export async function getPoolTopupPackageItems(
+  params: Record<string, any> = {},
+) {
+  poolTopupPackageItems = await getPackageItems({
+    ...params,
+    packageType: POOL_TOPUP_PACKAGE_TYPE,
+  });
+  return { items: poolTopupPackageItems };
+}
+
+function getPackageOptionsBySelectedCodes(
+  values: Record<string, any>,
+  sourceItems: any[],
+) {
+  const selectedCodes = normalizeCodeArray(values.renewablePackageCodes);
+  if (selectedCodes.length === 0) {
+    return [];
+  }
+  return sourceItems
+    .filter((item) => selectedCodes.includes(item.packageCode))
+    .map((item: any) => ({
+      label: item.packageName || item.packageCode,
+      value: item.id,
+    }));
+}
+
+function getRenewablePackageOptions(values: Record<string, any>) {
+  return getPackageOptionsBySelectedCodes(
+    values,
+    renewablePackageItems(values),
+  );
+}
+
+function getPoolRenewablePackageOptions(values: Record<string, any>) {
+  return getPackageOptionsBySelectedCodes(values, poolPackageItems);
+}
+
+export type PackageCreateType =
+  | 'cardPackage'
+  | 'cardTopup'
+  | 'poolPackage'
+  | 'poolTopup';
+
+export const PackageCreateTypeOptions = [
+  {
+    description: '适用于单张 SIM 卡的基础流量套餐',
+    label: '单卡套餐',
+    value: 'cardPackage' as PackageCreateType,
+  },
+  {
+    description: '适用于单张 SIM 卡的额外流量包',
+    label: '单卡加油包',
+    value: 'cardTopup' as PackageCreateType,
+  },
+  {
+    description: '适用于流量池的基础流量套餐',
+    label: '池卡套餐',
+    value: 'poolPackage' as PackageCreateType,
+  },
+  {
+    description: '适用于流量池的额外流量包',
+    label: '池卡加油包',
+    value: 'poolTopup' as PackageCreateType,
+  },
+] as const;
+
+export const PackageCreateTypeConfig = {
+  cardPackage: {
+    billingMethod: MONTH_BILLING_METHOD,
+    packageType: CARD_PACKAGE_TYPE,
+  },
+  cardTopup: {
+    billingMethod: MONTH_BILLING_METHOD,
+    packageType: 103,
+  },
+  poolPackage: {
+    billingMethod: MONTH_BILLING_METHOD,
+    packageType: 102,
+  },
+  poolTopup: {
+    billingMethod: MONTH_BILLING_METHOD,
+    packageType: 104,
+  },
+} satisfies Record<
+  PackageCreateType,
+  { billingMethod: string; packageType: number }
+>;
+
+export const SingleCardPackageFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+  },
+  {
+    fieldName: 'packageType',
+    component: 'Input',
+    label: '套餐类型',
+    dependencies: { show: () => false, triggerFields: [''] },
+  },
+  {
+    fieldName: 'packageName',
+    component: 'Input',
+    label: '套餐名称',
+    componentProps: {
+      placeholder: '请输入套餐名称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'packageCode',
+    component: 'Input',
+    label: '套餐编码',
+    componentProps: {
+      placeholder: '请输入套餐编码',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'billingMethod',
+    component: 'Select',
+    label: '计费方式',
+    componentProps: {
+      options: billingMethodOptions(),
+      placeholder: '请选择计费方式',
+    },
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'categoryCode',
+    component: 'ApiSelect',
+    label: '套餐分类',
+    componentProps: FormOptions.Api.tSimPackageCategory(),
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'sortNo',
+    component: 'InputNumber',
+    label: '排序号',
+    componentProps: {
+      placeholder: '请输入排序号',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'flowMb',
+    component: 'InputNumber',
+    label: '套餐流量(MB)',
+    componentProps: {
+      placeholder: '请输入套餐流量',
+      min: 0,
+      addonAfter: 'MB',
+    },
+    rules: positiveFlowMbRule,
+  },
+  {
+    fieldName: 'enabled',
+    component: 'HtcFormSwitch',
+    label: '是否启用',
+    defaultValue: 1,
+    componentProps: {
+      checkedChildren: '启用',
+      checkedValue: 1,
+      unCheckedChildren: '停用',
+      unCheckedValue: 0,
+    },
+  },
+  createSectionDivider('divider-card-price', '价格信息'),
+  {
+    fieldName: 'listPrice',
+    component: 'InputNumber',
+    label: '目录售价',
+    componentProps: {
+      placeholder: '请输入目录售价',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'costPrice',
+    component: 'InputNumber',
+    label: '成本价',
+    componentProps: {
+      placeholder: '请输入成本价',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'defaultProfit',
+    component: 'InputNumber',
+    label: '默认利润',
+    componentProps: {
+      ...moneyInputProps,
+      placeholder: '请输入默认利润',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'defaultRatio',
+    component: 'InputNumber',
+    label: '默认系数',
+    componentProps: {
+      ...ratioInputProps,
+      placeholder: '请输入默认系数',
+      min: 0,
+    },
+    defaultValue: 1,
+  },
+  {
+    fieldName: 'terminalCost',
+    component: 'InputNumber',
+    label: '终端成本',
+    componentProps: {
+      placeholder: '请输入终端成本',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'defaultTerminalProfit',
+    component: 'InputNumber',
+    label: '默认终端利润',
+    componentProps: {
+      ...moneyInputProps,
+      placeholder: '请输入默认终端利润',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'defaultTerminalRatio',
+    component: 'InputNumber',
+    label: '默认终端系数',
+    componentProps: {
+      ...ratioInputProps,
+      placeholder: '请输入默认终端系数',
+      min: 0,
+    },
+    defaultValue: 1,
+  },
+  createSectionDivider('divider-card-renewal', '续费配置'),
+  {
+    fieldName: 'renewableDurationConfig',
+    component: 'CheckboxGroup',
+    label: '可续费时长配置',
+    componentProps: {
+      options: Array.from({ length: 10 }, (_, index) => ({
+        label: `${index + 1}年`,
+        value: index + 1,
+      })),
+    },
+    formItemClass: 'col-span-12',
+  },
+  {
+    fieldName: 'discountRateConfig',
+    component: 'Input',
+    label: '折扣率配置',
+    componentProps: {
+      placeholder: '请输入折扣率配置',
+    },
+    formItemClass: 'col-span-12',
+  },
+  {
+    fieldName: 'renewablePackageCodes',
+    component: 'ApiSelect',
+    label: '可续费套餐',
+    componentProps: renewablePackageComponentProps,
+  },
+  {
+    fieldName: 'renewableSelfIncluded',
+    component: 'HtcFormSwitch',
+    label: '可续费本套餐',
+    defaultValue: 0,
+    componentProps: {
+      checkedChildren: '是',
+      checkedValue: 1,
+      unCheckedChildren: '否',
+      unCheckedValue: 0,
+    },
+  },
+  {
+    fieldName: 'changeablePackageCodes',
+    component: 'ApiSelect',
+    label: '可变更套餐',
+    componentProps: {
+      placeholder: '请选择可变更套餐',
+      mode: 'multiple',
+      showSearch: true,
+      api: getCardPackageItems,
+      labelField: 'packageName',
+      valueField: 'packageCode',
+      resultField: 'items',
+    },
+  },
+  {
+    fieldName: 'topupPackageCodes',
+    component: 'ApiSelect',
+    label: '可订购加油包套餐编码列表',
+    componentProps: {
+      placeholder: '请选择可订购加油包套餐',
+      mode: 'multiple',
+      showSearch: true,
+      api: getCardTopupPackageItems,
+      labelField: 'packageName',
+      valueField: 'packageCode',
+      resultField: 'items',
+    },
+  },
+  {
+    fieldName: 'isAutoRenew',
+    component: 'HtcFormSwitch',
+    label: '是否自动续费',
+    defaultValue: 0,
+    componentProps: {
+      checkedChildren: '是',
+      checkedValue: 1,
+      unCheckedChildren: '否',
+      unCheckedValue: 0,
+    },
+  },
+  {
+    fieldName: 'autoRenewPackageId',
+    component: 'Select',
+    label: '自动续费套餐',
+    componentProps: (value) => {
+      const options = getRenewablePackageOptions(value);
+      return {
+        options,
+        placeholder:
+          options.length > 0 ? '请选择自动续费套餐' : '请先选择可续费套餐',
+        showSearch: true,
+      };
+    },
+    dependencies: {
+      disabled: (value) => value.isAutoRenew !== 1,
+      required: (value) => value.isAutoRenew === 1,
+      async trigger(value, formApi) {
+        const options = getRenewablePackageOptions(value);
+        (formApi as any).updateSchema([
+          {
+            componentProps: {
+              options,
+              placeholder:
+                options.length > 0
+                  ? '请选择自动续费套餐'
+                  : '请先选择可续费套餐',
+              showSearch: true,
+            },
+            fieldName: 'autoRenewPackageId',
+          },
+        ]);
+        if (
+          value.autoRenewPackageId &&
+          !options.some((item: any) => item.value === value.autoRenewPackageId)
+        ) {
+          await formApi.setFieldValue('autoRenewPackageId', undefined);
+        }
+      },
+      triggerFields: ['isAutoRenew', 'renewablePackageCodes'],
+    },
+  },
+  {
+    fieldName: 'autoRenewYears',
+    component: 'Select',
+    label: '自动续费年限',
+    componentProps: {
+      placeholder: '请选择自动续费年限',
+      options: Array.from({ length: 10 }, (_, index) => ({
+        label: `${index + 1}年`,
+        value: index + 1,
+      })),
+    },
+    dependencies: {
+      disabled: (value) => value.isAutoRenew !== 1,
+      required: (value) => value.isAutoRenew === 1,
+      async trigger(value, formApi) {
+        if (value.isAutoRenew !== 1) {
+          await Promise.all([
+            formApi.setFieldValue('autoRenewPackageId', undefined),
+            formApi.setFieldValue('autoRenewYears', undefined),
+          ]);
+        }
+      },
+      triggerFields: ['isAutoRenew'],
+    },
+  },
+  {
+    fieldName: 'remark',
+    component: 'HtcFormTextArea',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+    formItemClass: 'col-span-12',
+  },
+];
+
+const SingleCardTopupFormBaseSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+  },
+  {
+    fieldName: 'packageType',
+    component: 'Input',
+    label: '套餐类型',
+    dependencies: { show: () => false, triggerFields: [''] },
+  },
+  {
+    fieldName: 'packageName',
+    component: 'Input',
+    label: '套餐名称',
+    componentProps: {
+      placeholder: '请输入套餐名称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'packageCode',
+    component: 'Input',
+    label: '套餐编码',
+    componentProps: {
+      placeholder: '请输入套餐编码',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'billingMethod',
+    component: 'Select',
+    label: '计费方式',
+    componentProps: {
+      options: billingMethodOptions(),
+      placeholder: '请选择计费方式',
+    },
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'categoryCode',
+    component: 'ApiSelect',
+    label: '套餐分类',
+    componentProps: FormOptions.Api.tSimPackageCategory(),
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'sortNo',
+    component: 'InputNumber',
+    label: '排序号',
+    componentProps: {
+      placeholder: '请输入排序号',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'flowMb',
+    component: 'InputNumber',
+    label: '套餐流量(MB)',
+    componentProps: {
+      placeholder: '请输入套餐流量',
+      min: 0,
+      addonAfter: 'MB',
+    },
+    rules: positiveFlowMbRule,
+  },
+  {
+    fieldName: 'enabled',
+    component: 'HtcFormSwitch',
+    label: '是否启用',
+    defaultValue: 1,
+    componentProps: {
+      checkedChildren: '启用',
+      checkedValue: 1,
+      unCheckedChildren: '停用',
+      unCheckedValue: 0,
+    },
+  },
+  createSectionDivider('divider-topup-price', '价格信息'),
+  {
+    fieldName: 'listPrice',
+    component: 'InputNumber',
+    label: '目录售价',
+    componentProps: {
+      placeholder: '请输入目录售价',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'costPrice',
+    component: 'InputNumber',
+    label: '成本价',
+    componentProps: {
+      placeholder: '请输入成本价',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'defaultProfit',
+    component: 'InputNumber',
+    label: '默认利润',
+    componentProps: {
+      ...moneyInputProps,
+      placeholder: '请输入默认利润',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'defaultRatio',
+    component: 'InputNumber',
+    label: '默认系数',
+    componentProps: {
+      ...ratioInputProps,
+      placeholder: '请输入默认系数',
+      min: 0,
+    },
+    defaultValue: 1,
+  },
+  {
+    fieldName: 'terminalCost',
+    component: 'InputNumber',
+    label: '终端成本',
+    componentProps: {
+      placeholder: '请输入终端成本',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'defaultTerminalProfit',
+    component: 'InputNumber',
+    label: '默认终端利润',
+    componentProps: {
+      ...moneyInputProps,
+      placeholder: '请输入默认终端利润',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'defaultTerminalRatio',
+    component: 'InputNumber',
+    label: '默认终端系数',
+    componentProps: {
+      ...ratioInputProps,
+      placeholder: '请输入默认终端系数',
+      min: 0,
+    },
+    defaultValue: 1,
+  },
+  createSectionDivider('divider-topup-renewal', '续费配置'),
+  {
+    fieldName: 'discountRateConfig',
+    component: 'Input',
+    label: '折扣率配置',
+    componentProps: {
+      placeholder: '请输入折扣率配置',
+    },
+    formItemClass: 'col-span-12',
+  },
+  {
+    fieldName: 'renewablePackageCodes',
+    component: 'ApiSelect',
+    label: '可续费套餐',
+    componentProps: renewablePackageComponentProps,
+  },
+  {
+    fieldName: 'renewableSelfIncluded',
+    component: 'HtcFormSwitch',
+    label: '可续费本套餐',
+    defaultValue: 0,
+    componentProps: {
+      checkedChildren: '是',
+      checkedValue: 1,
+      unCheckedChildren: '否',
+      unCheckedValue: 0,
+    },
+  },
+  {
+    fieldName: 'remark',
+    component: 'HtcFormTextArea',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+    formItemClass: 'col-span-12',
+  },
+];
+
+export const SingleCardTopupFormSchema: VbenFormSchema[] =
+  SingleCardTopupFormBaseSchema.filter(
+    (item) => item.fieldName !== 'discountRateConfig',
+  );
+
+export const PoolCardPackageFormSchema = [
+  ...SingleCardPackageFormSchema.slice(0, 6).map((item) => ({ ...item })),
+  ...SingleCardPackageFormSchema.slice(6)
+    .filter(
+      (item) =>
+        !['changeablePackageCodes', 'topupPackageCodes'].includes(
+          item.fieldName,
+        ),
+    )
+    .map((item) => {
+      if (item.fieldName === 'autoRenewPackageId') {
+        return {
+          ...item,
+          componentProps: (value: Record<string, any>) => {
+            const options = getPoolRenewablePackageOptions(value);
+            return {
+              options,
+              placeholder:
+                options.length > 0
+                  ? '请选择自动续费套餐'
+                  : '请先选择可续费套餐',
+              showSearch: true,
+            };
+          },
+          dependencies: {
+            disabled: (value: Record<string, any>) => value.isAutoRenew !== 1,
+            required: (value: Record<string, any>) => value.isAutoRenew === 1,
+            async trigger(value: Record<string, any>, formApi: any) {
+              const options = getPoolRenewablePackageOptions(value);
+              formApi.updateSchema([
+                {
+                  componentProps: {
+                    options,
+                    placeholder:
+                      options.length > 0
+                        ? '请选择自动续费套餐'
+                        : '请先选择可续费套餐',
+                    showSearch: true,
+                  },
+                  fieldName: 'autoRenewPackageId',
+                },
+              ]);
+              if (
+                value.autoRenewPackageId &&
+                !options.some(
+                  (option: any) => option.value === value.autoRenewPackageId,
+                )
+              ) {
+                await formApi.setFieldValue('autoRenewPackageId', undefined);
+              }
+            },
+            triggerFields: ['isAutoRenew', 'renewablePackageCodes'],
+          },
+        };
+      }
+      return { ...item };
+    }),
+] as VbenFormSchema[];
+
+export const PoolCardTopupFormSchema: VbenFormSchema[] = [
+  ...SingleCardTopupFormSchema.slice(0, 6),
+  ...SingleCardTopupFormSchema.slice(6),
+];
+
+const packageFormSchemaMap: Record<number, VbenFormSchema[]> = {
+  [CARD_PACKAGE_TYPE]: SingleCardPackageFormSchema,
+  [POOL_PACKAGE_TYPE]: PoolCardPackageFormSchema,
+  [CARD_TOPUP_PACKAGE_TYPE]: SingleCardTopupFormSchema,
+  [POOL_TOPUP_PACKAGE_TYPE]: PoolCardTopupFormSchema,
+};
+
+export function getPackageFormSchemaByPackageType(
+  packageType?: number | string | null,
+) {
+  const resolvedPackageType = Number(packageType);
+  if (!Number.isFinite(resolvedPackageType)) {
+    return undefined;
+  }
+  return packageFormSchemaMap[resolvedPackageType];
+}
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'packageCode',
+    component: 'Input',
+    label: '套餐编码',
+    componentProps: {
+      placeholder: '请输入套餐编码',
+    },
+  },
+  {
+    fieldName: 'packageName',
+    component: 'Input',
+    label: '套餐名称',
+    componentProps: {
+      placeholder: '请输入套餐名称',
+    },
+  },
+  {
+    fieldName: 'categoryCode',
+    component: 'ApiSelect',
+    label: '套餐分类',
+    componentProps: FormOptions.Api.tSimPackageCategory({ autoSelect: false }),
+  },
+  {
+    fieldName: 'packageType',
+    component: 'Select',
+    label: '套餐类型',
+    componentProps: {
+      placeholder: '请选择套餐类型',
+      options: packageTypeOptions(),
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  {
+    title: '套餐编码',
+    field: 'packageCode',
+    align: 'left',
+    width: 120,
+  },
+  {
+    title: '套餐名称',
+    field: 'packageName',
+    minWidth: 120,
+  },
+  {
+    title: '套餐分类',
+    field: 'categoryName',
+    minWidth: 120,
+  },
+  {
+    title: '套餐类型',
+    field: 'packageType',
+    params: { dictType: DictEnum.T_PACKAGE_TYPE },
+    minWidth: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.packageType, DictEnum.T_PACKAGE_TYPE);
+      },
+    },
+  },
+  {
+    title: '计费方式',
+    field: 'billingMethod',
+    params: { dictType: DictEnum.T_BILLING_METHOD },
+    minWidth: 80,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.billingMethod, DictEnum.T_BILLING_METHOD);
+      },
+    },
+  },
+  {
+    title: '套餐流量(MB)',
+    field: 'flowMb',
+    slots: {
+      default: ({ row }) => {
+        return `${row.flowMb} MB`;
+      },
+    },
+    minWidth: 100,
+  },
+  {
+    title: '是否启用',
+    field: 'enabled',
+    params: { dictType: DictEnum.FLOW_PACKAGE_ENABLED },
+    width: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.enabled, DictEnum.FLOW_PACKAGE_ENABLED);
+      },
+    },
+  },
+
+  {
+    title: '渠道出货价',
+    field: 'agentShipmentPrice',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return Number(row.agentShipmentPrice ?? 0).toFixed(2);
+      },
+    },
+  },
+  {
+    title: '终端售价',
+    field: 'terminalSalePrice',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return Number(row.terminalSalePrice ?? 0).toFixed(2);
+      },
+    },
+  },
+  { title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'packageCode',
+    component: 'Input',
+    label: '套餐编码',
+    componentProps: {
+      placeholder: '请输入套餐编码',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'packageName',
+    component: 'Input',
+    label: '套餐名称',
+    componentProps: {
+      placeholder: '请输入套餐名称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'categoryCode',
+    component: 'ApiSelect',
+    label: '套餐分类',
+    componentProps: FormOptions.Api.tSimPackageCategory(),
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'packageType',
+    component: 'Select',
+    label: '套餐类型',
+    componentProps: {
+      placeholder: '请选择套餐类型',
+      options: packageTypeOptions(),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'flowMb',
+    component: 'InputNumber',
+    label: '套餐流量(MB)',
+    componentProps: {
+      placeholder: '请输入套餐流量',
+      min: 0,
+      addonAfter: 'MB',
+    },
+    rules: positiveFlowMbRule,
+  },
+  {
+    fieldName: 'enabled',
+    component: 'HtcFormSwitch',
+    label: '是否启用',
+    defaultValue: 1,
+    componentProps: {
+      checkedChildren: '启用',
+      checkedValue: 1,
+      unCheckedChildren: '停用',
+      unCheckedValue: 0,
+    },
+  },
+  createSectionDivider('divider-edit-renewal', '续费配置'),
+  {
+    fieldName: 'renewableDurationConfig',
+    component: 'CheckboxGroup',
+    label: '可续费时长配置',
+    componentProps: {
+      placeholder: '请选择可续费时长',
+      mode: 'multiple',
+      options: Array.from({ length: 10 }, (_, index) => ({
+        label: `${index + 1}年`,
+        value: index + 1,
+      })),
+    },
+    formItemClass: 'col-span-12',
+  },
+  createSectionDivider('divider-edit-price', '价格信息'),
+  {
+    fieldName: 'listPrice',
+    component: 'InputNumber',
+    label: '目录售价',
+    componentProps: {
+      placeholder: '请输入目录售价',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'billingMethod',
+    component: 'Select',
+    label: '计费方式',
+    componentProps: {
+      placeholder: '请选择计费方式',
+      options: billingMethodOptions(),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'costPrice',
+    component: 'InputNumber',
+    label: '成本价',
+    componentProps: {
+      placeholder: '请输入成本价',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'terminalCost',
+    component: 'InputNumber',
+    label: '终端成本',
+    componentProps: {
+      placeholder: '请输入终端成本',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'defaultRatio',
+    component: 'InputNumber',
+    label: '默认系数',
+    componentProps: {
+      ...ratioInputProps,
+      placeholder: '请输入默认系数',
+      min: 0,
+    },
+    defaultValue: 1,
+  },
+  {
+    fieldName: 'defaultTerminalRatio',
+    component: 'InputNumber',
+    label: '默认终端系数',
+    componentProps: {
+      ...ratioInputProps,
+      placeholder: '请输入默认终端系数',
+      min: 0,
+    },
+    defaultValue: 1,
+  },
+  {
+    fieldName: 'defaultProfit',
+    component: 'InputNumber',
+    label: '默认利润',
+    componentProps: {
+      ...moneyInputProps,
+      placeholder: '请输入默认利润',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'defaultTerminalProfit',
+    component: 'InputNumber',
+    label: '默认终端利润',
+    componentProps: {
+      ...moneyInputProps,
+      placeholder: '请输入默认终端利润',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  createSectionDivider('divider-edit-package-link', '套餐关联配置'),
+  {
+    fieldName: 'discountRateConfig',
+    component: 'Input',
+    label: '折扣率配置',
+    componentProps: {
+      placeholder: '请输入折扣率配置',
+    },
+  },
+  {
+    fieldName: 'poolPackageCode',
+    component: 'ApiSelect',
+    label: '池套餐',
+    componentProps: {
+      placeholder: '请选择池套餐',
+      mode: 'multiple',
+      showSearch: true,
+      api: getCardPackageItems,
+      labelField: 'packageName',
+      valueField: 'packageCode',
+      resultField: 'items',
+    },
+  },
+  {
+    fieldName: 'changeablePackageCodes',
+    component: 'ApiSelect',
+    label: '可变更套餐',
+    componentProps: {
+      placeholder: '请选择可变更套餐',
+      mode: 'multiple',
+      showSearch: true,
+      api: getCardPackageItems,
+      labelField: 'packageName',
+      valueField: 'packageCode',
+      resultField: 'items',
+    },
+  },
+  {
+    fieldName: 'isAutoRenew',
+    component: 'HtcFormSwitch',
+    label: '是否自动续费',
+    defaultValue: 0,
+    componentProps: {
+      checkedChildren: '是',
+      checkedValue: 1,
+      unCheckedChildren: '否',
+      unCheckedValue: 0,
+    },
+  },
+  {
+    fieldName: 'renewablePackageCodes',
+    component: 'ApiSelect',
+    label: '可续费套餐',
+    componentProps: renewablePackageComponentProps,
+  },
+  {
+    fieldName: 'renewableSelfIncluded',
+    component: 'HtcFormSwitch',
+    label: '可续费本套餐',
+    defaultValue: 0,
+    componentProps: {
+      checkedChildren: '是',
+      checkedValue: 1,
+      unCheckedChildren: '否',
+      unCheckedValue: 0,
+    },
+  },
+  {
+    fieldName: 'autoRenewYears',
+    component: 'Select',
+    label: '自动续费年限',
+    componentProps: {
+      placeholder: '请选择自动续费年限',
+      options: Array.from({ length: 10 }, (_, index) => ({
+        label: `${index + 1}年`,
+        value: index + 1,
+      })),
+    },
+    dependencies: {
+      disabled: (value) => value.isAutoRenew !== 1,
+      required: (value) => value.isAutoRenew === 1,
+      async trigger(value, formApi) {
+        if (value.isAutoRenew !== 1) {
+          await Promise.all([
+            formApi.setFieldValue('autoRenewPackageId', undefined),
+            formApi.setFieldValue('autoRenewYears', undefined),
+          ]);
+        }
+      },
+      triggerFields: ['isAutoRenew'],
+    },
+  },
+  {
+    fieldName: 'topupPackageCodes',
+    component: 'ApiSelect',
+    label: '可订购加油包套餐',
+    componentProps: {
+      placeholder: '请选择可订购加油包套餐',
+      mode: 'multiple',
+      showSearch: true,
+      api: getCardTopupPackageItems,
+      labelField: 'packageName',
+      valueField: 'packageCode',
+      resultField: 'items',
+    },
+  },
+  {
+    fieldName: 'autoRenewPackageId',
+    component: 'Select',
+    label: '自动续费套餐',
+    componentProps: (value) => {
+      const options = getRenewablePackageOptions(value);
+      return {
+        options,
+        placeholder:
+          options.length > 0 ? '请选择自动续费套餐' : '请先选择可续费套餐',
+        showSearch: true,
+      };
+    },
+    dependencies: {
+      disabled: (value) => value.isAutoRenew !== 1,
+      required: (value) => value.isAutoRenew === 1,
+      async trigger(value, formApi) {
+        const options = getRenewablePackageOptions(value);
+        (formApi as any).updateSchema([
+          {
+            componentProps: {
+              options,
+              placeholder:
+                options.length > 0
+                  ? '请选择自动续费套餐'
+                  : '请先选择可续费套餐',
+              showSearch: true,
+            },
+            fieldName: 'autoRenewPackageId',
+          },
+        ]);
+        if (
+          value.autoRenewPackageId &&
+          !options.some((item: any) => item.value === value.autoRenewPackageId)
+        ) {
+          await formApi.setFieldValue('autoRenewPackageId', undefined);
+        }
+      },
+      triggerFields: ['isAutoRenew', 'renewablePackageCodes'],
+    },
+  },
+  {
+    fieldName: 'sortNo',
+    component: 'InputNumber',
+    label: '排序号',
+    componentProps: {
+      placeholder: '请输入排序号',
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'remark',
+    component: 'HtcFormTextArea',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+    formItemClass: 'col-span-12',
+  },
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'id', label: '主键ID' },
+  { field: 'packageCode', label: '套餐编码' },
+  { field: 'categoryName', label: '套餐分类' },
+  { field: 'poolPackageCode', label: '池套餐编码' },
+  { field: 'packageName', label: '套餐名称' },
+  {
+    field: 'packageType',
+    label: '套餐类型',
+    render: (val) => renderDict(val, DictEnum.T_PACKAGE_TYPE),
+  },
+  {
+    field: 'billingMethod',
+    label: '计费方式',
+    render: (val) => renderDict(val, DictEnum.T_BILLING_METHOD),
+  },
+  { field: 'sortNo', label: '排序号' },
+  {
+    field: 'flowMb',
+    label: '套餐流量(MB)',
+    render: (val) => `${val ?? 0} MB`,
+  },
+  {
+    field: 'enabled',
+    label: '是否启用',
+    render: (val) => renderDict(val, DictEnum.FLOW_PACKAGE_ENABLED),
+  },
+  { field: 'listPrice', label: '目录售价' },
+
+  {
+    field: 'agentShipmentPrice',
+    label: '渠道出货价',
+    render: (val) => Number(val ?? 0).toFixed(2),
+  },
+  {
+    field: 'terminalSalePrice',
+    label: '终端售价',
+    render: (val) => Number(val ?? 0).toFixed(2),
+  },
+  { field: 'costPrice', label: '成本价' },
+  { field: 'defaultProfit', label: '默认利润' },
+  { field: 'defaultRatio', label: '默认系数', render: renderRatioValue },
+  { field: 'terminalCost', label: '终端成本' },
+  { field: 'defaultTerminalProfit', label: '默认终端利润' },
+  {
+    field: 'defaultTerminalRatio',
+    label: '默认终端系数',
+    render: renderRatioValue,
+  },
+  {
+    field: 'renewableDurationConfig',
+    label: '可续费年限配置：',
+    render: renderRenewableYears,
+  },
+  { field: 'discountRateConfig', label: '折扣率配置：' },
+  {
+    field: 'renewablePackageNames',
+    label: '可续费套餐',
+    render: renderCodeList,
+  },
+  {
+    field: 'changeablePackageNames',
+    label: '可变更套餐',
+    render: renderCodeList,
+  },
+  {
+    field: 'topupPackageNames',
+    label: '可订购加油包套餐',
+    render: renderCodeList,
+  },
+  {
+    field: 'isAutoRenew',
+    label: '是否自动续费',
+    render: (val) => renderDict(val, DictEnum.GLOBAL_ENABLED),
+  },
+  { field: 'autoRenewPackageId', label: '自动续费套餐ID' },
+  { field: 'autoRenewYears', label: '自动续费年限' },
+  { field: 'remark', label: '备注' },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/view.vue
new file mode 100644
index 0000000..d8490d5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo/view.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { TSimFlowPackageInfoModel } from '#/api/iotlcm/tPricingPackage/tSimFlowPackageInfo/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/tPricingPackage/tSimFlowPackageInfo';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { ViewDescSchema } from './model';
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: TSimFlowPackageInfoModel };
+  const record = await View({ id: row.id });
+  setDescProps(
+    {
+      data: record,
+      schema: ViewDescSchema,
+    },
+    true,
+  );
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: ViewDescSchema,
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/batchAdjust.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/batchAdjust.vue
new file mode 100644
index 0000000..56ba1f5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/batchAdjust.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { TSimFlowPackagePriceAgentPackagePriceListItem } from '#/api/iotlcm/tPricingPackage/tSimFlowPackagePrice/type';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  AgentDefaultPackagePriceSave,
+  AgentPackagePriceSave,
+} from '#/api/iotlcm/tPricingPackage/tSimFlowPackagePrice';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+type AgentTreeSelectInfo = {
+  deptId: number | string;
+  level: 1 | 2;
+};
+
+interface ModalProps {
+  agentTreeSelectInfo?: AgentTreeSelectInfo;
+  rows: TSimFlowPackagePriceAgentPackagePriceListItem[];
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const adjustRows = ref<TSimFlowPackagePriceAgentPackagePriceListItem[]>([]);
+const agentTreeSelectInfo = ref<AgentTreeSelectInfo>();
+
+/** ====================  方法  ==================== */
+function getSaveItem(
+  row: TSimFlowPackagePriceAgentPackagePriceListItem,
+  formValues: Record<string, any>,
+) {
+  const remark = formValues.remark ?? row.remark;
+
+  return {
+    agentCostProfit: formValues.agentCostProfit,
+    agentCostRatio: formValues.agentCostRatio,
+    agentDefaultPriceId: row.agentDefaultPriceId,
+    packageCode: row.packageCode,
+    priceSource: row.priceSource,
+    remark,
+    terminalCostProfit: formValues.terminalCostProfit,
+    terminalCostRatio: formValues.terminalCostRatio,
+    targetPriceId: row.targetPriceId,
+  };
+}
+
+function getSavePayload(formValues: Record<string, any>) {
+  const items = adjustRows.value.map((row) => getSaveItem(row, formValues));
+
+  if (agentTreeSelectInfo.value?.level === 2) {
+    return {
+      items,
+      targetAgentId: Number(agentTreeSelectInfo.value.deptId),
+    };
+  }
+
+  return {
+    items: items.map(({ targetPriceId: _targetPriceId, ...item }) => item),
+  };
+}
+
+async function savePackagePrice(formValues: Record<string, any>) {
+  const payload = getSavePayload(formValues);
+
+  if (agentTreeSelectInfo.value?.level === 2) {
+    await AgentPackagePriceSave(payload);
+    return;
+  }
+
+  await AgentDefaultPackagePriceSave(payload);
+}
+
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  adjustRows.value = data.rows ?? [];
+  agentTreeSelectInfo.value = data.agentTreeSelectInfo;
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(
+        () => savePackagePrice(value),
+        modalApi,
+        {
+          emit: () => {
+            emit('confirm');
+          },
+          autoClose: true,
+          successMessage: '操作成功',
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...(BetterVben.form.default as any),
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      await formApi.resetForm();
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+
+<template>
+  <Modal title="一键调价">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/components/AgentTree/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/components/AgentTree/index.vue
new file mode 100644
index 0000000..8ce8b09
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/components/AgentTree/index.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import type { TSimFlowPackagePriceAgenttreeModel } from '#/api/iotlcm/tPricingPackage/tSimFlowPackagePrice/type';
+
+import { onMounted, ref } from 'vue';
+
+import { SyncOutlined } from '@vben/icons';
+
+import { Button, Empty, InputSearch, Tree } from 'ant-design-vue';
+
+import { GetTSimFlowPackagePriceAgentTreeApi } from '#/api/iotlcm/tPricingPackage/tSimFlowPackagePrice';
+
+/** ====================  类型  ==================== */
+type TreeKey = number | string;
+/** 统一后的树节点，兼容接口可能返回的 id/key/name/title 等不同字段 */
+type AgentTreeNode = TSimFlowPackagePriceAgenttreeModel & {
+  children?: AgentTreeNode[];
+  deptId: TreeKey;
+  key: TreeKey;
+  level: 1 | 2;
+  parentId: TreeKey;
+  title: string;
+};
+type AgentTreeSelectPayload = {
+  deptId: TreeKey;
+  /** 一级节点表示本级代理，二级节点表示指定下级代理 */
+  level: 1 | 2;
+};
+
+/** ====================  常量  ==================== */
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
+
+const emit = defineEmits<{
+  select: [payload: AgentTreeSelectPayload];
+}>();
+
+/** ====================  数据  ==================== */
+/** 组织数据源 */
+const agentTreeArray = ref<AgentTreeNode[]>([]);
+/** 选中节点 */
+const selectAgentId = ref<TreeKey[]>([]);
+/** 搜索内容 */
+const searchValue = ref<string>('');
+
+/** ====================  方法  ==================== */
+/** 获取业务用代理/组织 ID，缺失时使用稳定兜底 key */
+function getNodeDeptId(
+  item: TSimFlowPackagePriceAgenttreeModel,
+  fallbackKey: TreeKey,
+) {
+  return item.deptId ?? item.id ?? item.agentId ?? item.key ?? fallbackKey;
+}
+
+function getNodeKey(
+  item: TSimFlowPackagePriceAgenttreeModel,
+  fallbackKey: TreeKey,
+) {
+  return item.key ?? getNodeDeptId(item, fallbackKey);
+}
+
+function getNodeTitle(item: TSimFlowPackagePriceAgenttreeModel) {
+  return (
+    item.title ??
+    item.agentName ??
+    item.deptName ??
+    item.name ??
+    String(item.key ?? item.id ?? '')
+  );
+}
+
+/** 将接口树结构标准化为 ant-design-vue Tree 可直接消费的数据 */
+function normalizeTree(
+  list: TSimFlowPackagePriceAgenttreeModel[],
+  parentId: TreeKey = 0,
+  depth = 1,
+): AgentTreeNode[] {
+  return list.map((item, index) => {
+    const fallbackKey = `${parentId}-${index}`;
+    const deptId = getNodeDeptId(item, fallbackKey);
+    const key = getNodeKey(item, fallbackKey);
+    const children = item.children ?? item.items ?? [];
+    const level = depth <= 1 ? 1 : 2;
+
+    return {
+      ...item,
+      children: normalizeTree(children, key, depth + 1),
+      deptId,
+      key,
+      level,
+      parentId: item.parentId ?? parentId,
+      title: getNodeTitle(item),
+    };
+  });
+}
+
+function handleSelectNode(node?: AgentTreeNode) {
+  if (!node) {
+    return;
+  }
+
+  selectAgentId.value = [node.key];
+  emit('select', {
+    deptId: node.deptId,
+    /** 根节点按本级代理处理，子节点按下级代理处理 */
+    level: node.level,
+  });
+}
+
+/** 重新加载组织树，并默认选中第一项触发表格查询 */
+async function loadTree() {
+  searchValue.value = '';
+
+  const ret = await GetTSimFlowPackagePriceAgentTreeApi();
+  agentTreeArray.value = normalizeTree(ret.items ?? []);
+  if (agentTreeArray.value.length > 0) {
+    handleSelectNode(agentTreeArray.value[0]);
+  } else {
+    selectAgentId.value = [];
+  }
+}
+
+async function handleReload() {
+  await loadTree();
+}
+
+function handleSelect(_selectedKeys: TreeKey[], info: any) {
+  const node = info?.node?.dataRef ?? info?.node;
+  handleSelectNode(node);
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+onMounted(loadTree);
+</script>
+
+<template>
+  <div :class="$attrs.class">
+    <div class="flex h-full flex-col overflow-y-auto rounded-lg bg-background">
+      <div
+        v-if="showSearch"
+        class="sticky left-0 top-0 z-100 bg-background p-[8px]"
+      >
+        <InputSearch
+          v-model:value="searchValue"
+          :placeholder="$t('pages.common.search')"
+        >
+          <template #enterButton>
+            <Button @click="handleReload">
+              <SyncOutlined class="text-primary" />
+            </Button>
+          </template>
+        </InputSearch>
+      </div>
+      <div class="h-full overflow-x-hidden px-[8px]">
+        <Tree
+          v-if="agentTreeArray.length > 0"
+          v-model:selected-keys="selectAgentId"
+          :field-names="{ title: 'title', key: 'key', children: 'children' }"
+          :show-line="{ showLeafIcon: false }"
+          :tree-data="agentTreeArray"
+          :virtual="false"
+          default-expand-all
+          @select="handleSelect"
+        >
+          <template #title="{ title }">
+            <span v-if="searchValue && title.includes(searchValue)">
+              {{ title.substring(0, title.indexOf(searchValue)) }}
+              <span style="color: #f50">{{ searchValue }}</span>
+              {{
+                title.substring(title.indexOf(searchValue) + searchValue.length)
+              }}
+            </span>
+            <span v-else>{{ title }}</span>
+          </template>
+        </Tree>
+        <div v-else class="mt-5">
+          <Empty
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            description="无组织数据"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/edit.vue
new file mode 100644
index 0000000..593945d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/edit.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { TSimFlowPackagePriceAgentPackagePriceListItem } from '#/api/iotlcm/tPricingPackage/tSimFlowPackagePrice/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  AgentDefaultPackagePriceSave,
+  AgentPackagePriceSave,
+} from '#/api/iotlcm/tPricingPackage/tSimFlowPackagePrice';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+type AgentTreeSelectInfo = {
+  deptId: number | string;
+  level: 1 | 2;
+};
+
+interface ModalProps {
+  data: TSimFlowPackagePriceAgentPackagePriceListItem;
+  agentTreeSelectInfo?: AgentTreeSelectInfo;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const editData = ref<TSimFlowPackagePriceAgentPackagePriceListItem>();
+const agentTreeSelectInfo = ref<AgentTreeSelectInfo>();
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+function getSaveItem(
+  row: TSimFlowPackagePriceAgentPackagePriceListItem,
+  formValues: Record<string, any>,
+) {
+  return {
+    agentCostProfit: formValues.agentCostProfit,
+    agentCostRatio: formValues.agentCostRatio,
+    agentDefaultPriceId: row.agentDefaultPriceId,
+    packageCode: row.packageCode,
+    priceSource: row.priceSource,
+    remark: formValues.remark,
+    terminalCostProfit: formValues.terminalCostProfit,
+    terminalCostRatio: formValues.terminalCostRatio,
+    targetPriceId: row.targetPriceId,
+  };
+}
+
+function getSavePayload(formValues: Record<string, any>) {
+  const row = editData.value;
+
+  if (!row) {
+    return {};
+  }
+
+  const item = getSaveItem(row, formValues);
+
+  if (agentTreeSelectInfo.value?.level === 2) {
+    return {
+      items: [item],
+      targetAgentId: Number(agentTreeSelectInfo.value.deptId),
+    };
+  }
+
+  const { targetPriceId: _targetPriceId, ...defaultItem } = item;
+  return {
+    items: [defaultItem],
+  };
+}
+
+async function savePackagePrice(formValues: Record<string, any>) {
+  const payload = getSavePayload(formValues);
+
+  if (agentTreeSelectInfo.value?.level === 2) {
+    await AgentPackagePriceSave(payload);
+    return;
+  }
+
+  await AgentDefaultPackagePriceSave(payload);
+}
+
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  editData.value = data.data;
+  agentTreeSelectInfo.value = data.agentTreeSelectInfo;
+
+  if (data.data) {
+    await formApi.setValues(data.data);
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(savePackagePrice(value), modalApi, {
+        autoClose: true,
+        successMessage: '操作成功',
+        emit: () => {
+          emit('confirm');
+        },
+      });
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...(BetterVben.form.default as any),
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/index.vue
new file mode 100644
index 0000000..513d884
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/index.vue
@@ -0,0 +1,376 @@
+<script lang="ts" setup>
+import type { TSimFlowPackageInfoModel } from '#/api/iotlcm/tPricingPackage/tSimFlowPackageInfo/type';
+import type {
+  TSimFlowPackagePriceAgentDefaultPackagePriceInheritItem,
+  TSimFlowPackagePriceAgentPackagePriceInheritItem,
+  TSimFlowPackagePriceAgentPackagePriceListItem,
+} from '#/api/iotlcm/tPricingPackage/tSimFlowPackagePrice/type';
+
+import { computed, h, ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiEdit, MdiExport } from '@vben/icons';
+
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { List as PackageList } from '#/api/iotlcm/tPricingPackage/tSimFlowPackageInfo';
+import {
+  AgentDefaultPackagePriceInherit,
+  AgentDefaultPackagePriceList,
+  AgentPackagePriceInherit,
+  AgentPackagePriceList,
+  Export,
+} from '#/api/iotlcm/tPricingPackage/tSimFlowPackagePrice';
+import BetterVben from '#/constants/BetterVben';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import packageInfoViewModal from '../tSimFlowPackageInfo/view.vue';
+import batchAdjustModal from './batchAdjust.vue';
+import AgentTree from './components/AgentTree/index.vue';
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+// import viewModal from './view.vue';
+
+/** ====================  类型  ==================== */
+/** 代理树选中节点：一级为本级代理，二级为指定下级代理 */
+type AgentTreeSelectPayload = {
+  deptId: number | string;
+  level: 1 | 2;
+};
+
+/** ====================  常量  ==================== */
+const { hasAccessByCodes } = useAccess();
+
+/** ====================  数据  ==================== */
+/** 组织树选中信息 */
+const agentTreeSelectInfo = ref<AgentTreeSelectPayload>();
+/** 表格选中行 */
+const selectRows = ref<TSimFlowPackagePriceAgentPackagePriceListItem[]>([]);
+const canEditAgentDefaultPrice = computed(() =>
+  hasAccessByCodes([
+    'cpm:iot:tSimFlowPackagePrice:agentDefaultPackagePrice:edit',
+  ]),
+);
+const canEditAgentTargetPrice = computed(() =>
+  hasAccessByCodes(['cpm:iot:tSimFlowPackagePrice:agentPackagePrice:edit']),
+);
+const canEditCurrentPrice = computed(() =>
+  agentTreeSelectInfo.value?.level === 2
+    ? canEditAgentTargetPrice.value
+    : canEditAgentDefaultPrice.value,
+);
+
+/** ====================  方法  ==================== */
+/** 二级节点需要作为下级代理条件传给生效定价接口 */
+function getAgentTreeQueryParam() {
+  const selectInfo = agentTreeSelectInfo.value;
+
+  if (!selectInfo) {
+    return {};
+  }
+
+  return selectInfo.level === 2
+    ? {
+        targetAgentId: Number(selectInfo.deptId),
+      }
+    : {};
+}
+/** 根据代理树层级切换列表接口：一级查本级默认定价，二级查下级生效定价 */
+async function getPackagePriceList({ page }: any, formValues: any) {
+  const params = {
+    page: page.currentPage,
+    pageSize: page.pageSize,
+    ...formValues,
+    ...getAgentTreeQueryParam(),
+  };
+
+  if (agentTreeSelectInfo.value?.level === 2) {
+    return await AgentPackagePriceList(params);
+  }
+
+  return await AgentDefaultPackagePriceList(params);
+}
+async function handleAgentTreeSelect(payload: AgentTreeSelectPayload) {
+  agentTreeSelectInfo.value = payload;
+  await gridApi.reload();
+}
+/** 套餐名称点击后，按套餐编码查套餐信息并打开详情弹窗 */
+async function handlePackageInfoPreview(
+  row: TSimFlowPackagePriceAgentPackagePriceListItem,
+) {
+  const ret = await PackageList({
+    packageCode: row.packageCode,
+    page: 1,
+    pageSize: 1,
+  });
+  const packageInfo = ret.items?.[0] as TSimFlowPackageInfoModel | undefined;
+
+  if (!packageInfo) {
+    message.error('未找到套餐详情');
+    return;
+  }
+
+  packageInfoViewModalApi.setData({ row: packageInfo }).open();
+}
+function handleEdit(row?: TSimFlowPackagePriceAgentPackagePriceListItem) {
+  if (!canEditCurrentPrice.value) {
+    message.warning('无套餐定价维护权限');
+    return;
+  }
+  editModalApi
+    .setData({
+      agentTreeSelectInfo: agentTreeSelectInfo.value,
+      data: row,
+      isUpdate: !!row,
+    })
+    .open();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+function handleBatchAdjust() {
+  if (!canEditCurrentPrice.value) {
+    message.warning('无套餐定价维护权限');
+    return;
+  }
+  batchAdjustModalApi
+    .setData({
+      agentTreeSelectInfo: agentTreeSelectInfo.value,
+      rows: selectRows.value,
+    })
+    .open();
+}
+
+function canInherit(row: TSimFlowPackagePriceAgentPackagePriceListItem) {
+  if (agentTreeSelectInfo.value?.level === 2) {
+    return Number(row.targetPriceId ?? 0) > 0;
+  }
+  return Number(row.agentDefaultPriceId ?? 0) > 0;
+}
+
+async function submitInherit(
+  rows: TSimFlowPackagePriceAgentPackagePriceListItem[],
+) {
+  if (!canEditCurrentPrice.value) {
+    message.warning('无套餐定价维护权限');
+    return;
+  }
+  const inheritedRows = rows.filter((row) => canInherit(row));
+  if (inheritedRows.length === 0) {
+    message.warning('请选择存在本层定价的套餐');
+    return;
+  }
+
+  if (agentTreeSelectInfo.value?.level === 2) {
+    const items: TSimFlowPackagePriceAgentPackagePriceInheritItem[] =
+      inheritedRows.map((row) => ({
+        packageCode: row.packageCode,
+        targetPriceId: row.targetPriceId,
+      }));
+    await AgentPackagePriceInherit({
+      items,
+      targetAgentId: Number(agentTreeSelectInfo.value.deptId),
+    });
+  } else {
+    const items: TSimFlowPackagePriceAgentDefaultPackagePriceInheritItem[] =
+      inheritedRows.map((row) => ({
+        agentDefaultPriceId: row.agentDefaultPriceId,
+        packageCode: row.packageCode,
+      }));
+    await AgentDefaultPackagePriceInherit({ items });
+  }
+
+  message.success('回退成功');
+  await gridApi.query();
+}
+
+function handleInherit(row: TSimFlowPackagePriceAgentPackagePriceListItem) {
+  Modal.confirm({
+    title: '确认回退该套餐定价吗？',
+    content: '回退后将删除当前层级的定价配置，价格会使用上级或默认生效定价。',
+    async onOk() {
+      await submitInherit([row]);
+    },
+  });
+}
+
+function handleBatchInherit() {
+  Modal.confirm({
+    title: '确认批量回退选中套餐定价吗？',
+    content: '回退后将删除当前层级的定价配置，价格会使用上级或默认生效定价。',
+    async onOk() {
+      await submitInherit(selectRows.value);
+    },
+  });
+}
+
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  /** 导出沿用原定价导出接口，按当前搜索条件导出前 2000 条 */
+  await commonDownloadExcel(Export, '流量套餐价格', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async (params: any, formValues: any) => {
+          selectRows.value = [];
+          return await getPackagePriceList(params, formValues);
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [BatchAdjustModal, batchAdjustModalApi] = useVbenModal({
+  connectedComponent: batchAdjustModal,
+});
+
+const [PackageInfoViewModal, packageInfoViewModalApi] = useVbenModal({
+  connectedComponent: packageInfoViewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full gap-3">
+      <AgentTree class="w-[240px] shrink-0" @select="handleAgentTreeSelect" />
+      <Grid class="min-w-0 flex-1" table-title="流量套餐定价">
+        <template #toolbar-tools>
+          <div class="flex items-center justify-center gap-2">
+            <Button
+              :disabled="selectRows.length === 0"
+              class="flex items-center"
+              type="primary"
+              :icon="h(MdiEdit)"
+              @click="handleBatchAdjust"
+              v-if="canEditCurrentPrice"
+            >
+              一键调价
+            </Button>
+            <Button
+              :disabled="
+                selectRows.length === 0 || !selectRows.some(canInherit)
+              "
+              class="flex items-center"
+              danger
+              @click="handleBatchInherit"
+              v-if="canEditCurrentPrice"
+            >
+              批量回退
+            </Button>
+            <Button
+              class="flex items-center"
+              type="primary"
+              :icon="h(MdiExport)"
+              @click="handleExport"
+              v-access:code="'cpm:iot:tSimFlowPackagePrice:export'"
+            >
+              导出
+            </Button>
+          </div>
+        </template>
+        <template #packageName="{ row }">
+          <Button
+            class="border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePackageInfoPreview(row)"
+          >
+            {{ row.packageName }}
+          </Button>
+        </template>
+        <template #action="{ row }">
+          <div class="flex items-center justify-center gap-2">
+            <Button
+              v-if="
+                agentTreeSelectInfo?.level === 1 && canEditAgentDefaultPrice
+              "
+              class="border-none p-0"
+              :block="false"
+              type="link"
+              @click="handleEdit(row)"
+              v-access:code="
+                'cpm:iot:tSimFlowPackagePrice:agentDefaultPackagePrice:edit'
+              "
+            >
+              编辑
+            </Button>
+            <Button
+              v-if="
+                agentTreeSelectInfo?.level === 1 &&
+                canEditAgentDefaultPrice &&
+                canInherit(row)
+              "
+              class="border-none p-0"
+              :block="false"
+              danger
+              type="link"
+              @click="handleInherit(row)"
+              v-access:code="
+                'cpm:iot:tSimFlowPackagePrice:agentDefaultPackagePrice:edit'
+              "
+            >
+              回退
+            </Button>
+            <Button
+              v-if="agentTreeSelectInfo?.level === 2 && canEditAgentTargetPrice"
+              class="border-none p-0"
+              :block="false"
+              type="link"
+              @click="handleEdit(row)"
+              v-access:code="
+                'cpm:iot:tSimFlowPackagePrice:agentPackagePrice:edit'
+              "
+            >
+              编辑
+            </Button>
+            <Button
+              v-if="
+                agentTreeSelectInfo?.level === 2 &&
+                canEditAgentTargetPrice &&
+                canInherit(row)
+              "
+              class="border-none p-0"
+              :block="false"
+              danger
+              type="link"
+              @click="handleInherit(row)"
+              v-access:code="
+                'cpm:iot:tSimFlowPackagePrice:agentPackagePrice:edit'
+              "
+            >
+              回退
+            </Button>
+          </div>
+        </template>
+      </Grid>
+    </div>
+    <EditModal @confirm="handleRefresh" />
+    <BatchAdjustModal @confirm="handleRefresh" />
+    <PackageInfoViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/model.tsx
new file mode 100644
index 0000000..641099d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice/model.tsx
@@ -0,0 +1,209 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { z } from '@vben/common-ui';
+
+import { List as PackageList } from '#/api/iotlcm/tPricingPackage/tSimFlowPackageInfo';
+import DictEnum from '#/constants/DictEnum';
+import { renderDict } from '#/utils';
+
+function nonNegativeNumberRule(label: string) {
+  return z.preprocess(
+    (value) =>
+      value === '' || value === null || value === undefined
+        ? undefined
+        : Number(value),
+    z
+      .number({
+        invalid_type_error: `${label}必须为数字`,
+        required_error: `${label}不能为空`,
+      })
+      .min(0, `${label}不能为负数`),
+  );
+}
+
+function formatNumberValue(value: unknown, precision = 2) {
+  if (value === null || value === undefined || value === '') {
+    return '--';
+  }
+
+  const numberValue = Number(value);
+  return Number.isNaN(numberValue) ? '--' : numberValue.toFixed(precision);
+}
+
+// 表格搜索表单：支持套餐、适用类型、渠道客户筛选
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'packageCode',
+    component: 'ApiSelect',
+    label: '套餐',
+    componentProps: {
+      api: PackageList,
+      labelField: 'packageName',
+      optionFilterProp: 'label',
+      placeholder: '请选择套餐',
+      resultField: 'items',
+      showSearch: true,
+      valueField: 'packageCode',
+    },
+  },
+];
+
+// 表格列：字段对应本级默认定价/下级生效定价两个列表接口的共同返回结构
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  {
+    title: '套餐名称',
+    field: 'packageName',
+    minWidth: 160,
+    slots: { default: 'packageName' },
+  },
+  {
+    title: '价格来源',
+    field: 'priceSource',
+    params: { dictType: DictEnum.T_PACKAGE_PRICE_SOURCE },
+    width: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.priceSource, DictEnum.T_PACKAGE_PRICE_SOURCE);
+      },
+    },
+  },
+  {
+    title: '代理成本',
+    field: 'agentCost',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => formatNumberValue(row.agentCost),
+    },
+  },
+  {
+    title: '代理系数',
+    field: 'agentCostRatio',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => formatNumberValue(row.agentCostRatio, 2),
+    },
+  },
+  {
+    title: '代理利润',
+    field: 'agentCostProfit',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => formatNumberValue(row.agentCostProfit),
+    },
+  },
+  {
+    title: '代理出货价',
+    field: 'agentShipmentPrice',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => formatNumberValue(row.agentShipmentPrice),
+    },
+  },
+  {
+    title: '终端成本',
+    field: 'terminalCost',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => formatNumberValue(row.terminalCost),
+    },
+  },
+  {
+    title: '终端系数',
+    field: 'terminalCostRatio',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => formatNumberValue(row.terminalCostRatio, 2),
+    },
+  },
+  {
+    title: '终端利润',
+    field: 'terminalCostProfit',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => formatNumberValue(row.terminalCostProfit),
+    },
+  },
+  {
+    title: '终端售价',
+    field: 'terminalSalePrice',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => formatNumberValue(row.terminalSalePrice),
+    },
+  },
+  {
+    title: '备注',
+    field: 'remark',
+    minWidth: 180,
+  },
+  { title: '操作', width: 130, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表：套餐定价修改仅允许调整系数、利润与备注
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'agentCostRatio',
+    component: 'InputNumber',
+    label: '渠道系数',
+    componentProps: {
+      min: 0,
+      placeholder: '请输入渠道系数',
+      precision: 2,
+      step: 0.01,
+      style: { width: '100%' },
+    },
+    rules: nonNegativeNumberRule('渠道系数'),
+  },
+  {
+    fieldName: 'agentCostProfit',
+    component: 'InputNumber',
+    label: '渠道利润',
+    componentProps: {
+      min: 0,
+      placeholder: '请输入渠道利润',
+      precision: 2,
+      step: 0.01,
+      style: { width: '100%' },
+    },
+    rules: nonNegativeNumberRule('渠道利润'),
+  },
+  {
+    fieldName: 'terminalCostRatio',
+    component: 'InputNumber',
+    label: '终端系数',
+    componentProps: {
+      min: 0,
+      placeholder: '请输入终端系数',
+      precision: 2,
+      step: 0.01,
+      style: { width: '100%' },
+    },
+    rules: nonNegativeNumberRule('终端系数'),
+  },
+  {
+    fieldName: 'terminalCostProfit',
+    component: 'InputNumber',
+    label: '终端用户成本利润',
+    componentProps: {
+      min: 0,
+      placeholder: '请输入终端用户成本利润',
+      precision: 2,
+      step: 0.01,
+      style: { width: '100%' },
+    },
+    rules: nonNegativeNumberRule('终端用户成本利润'),
+  },
+  {
+    fieldName: 'remark',
+    component: 'Input',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/edit.vue
new file mode 100644
index 0000000..85458af
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/edit.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { TSimFlowPoolModel } from '#/api/iotlcm/tPricingPackage/tSimFlowPool/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/tPricingPackage/tSimFlowPool';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data: TSimFlowPoolModel;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  if (data.isUpdate) {
+    try {
+      const res = await View({ id: data.data.id });
+      await formApi.setValues(res);
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(
+        Edit(value as TSimFlowPoolModel),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '操作成功',
+          emit: () => {
+            emit('confirm');
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/index.vue
new file mode 100644
index 0000000..c784360
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/index.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { TSimFlowPoolModel } from '#/api/iotlcm/tPricingPackage/tSimFlowPool/type';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { List } from '#/api/iotlcm/tPricingPackage/tSimFlowPool';
+import BetterVben from '#/constants/BetterVben';
+
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<TSimFlowPoolModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TSimFlowPoolModel) {
+  viewModalApi.setData({ row }).open();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="流量池">
+      <template #toolbar-tools>
+        <div class="flex items-center justify-center gap-2">   
+        </div>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center justify-center gap-2">
+          <Button
+            class="border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:iot:tSimFlowPool:view'"
+          >
+            查看
+          </Button>
+        </div>
+      </template>
+      <template #flowPoolCode="{ row }">
+        <Button type="link" class="p-0" @click="handlePreview(row)">
+          {{ row.flowPoolCode }}
+        </Button>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/model.tsx
new file mode 100644
index 0000000..1dc715e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/model.tsx
@@ -0,0 +1,436 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { z } from '@vben/common-ui';
+
+import { Progress } from 'ant-design-vue';
+
+import DictEnum from '#/constants/DictEnum';
+import FormOptions from '#/constants/FormOption';
+import { renderDict } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+function getFlowUsagePercent(data: Record<string, any>) {
+  const usedFlowMb = Number(data?.usedFlowMb ?? 0);
+  const totalFlowMb = Number(data?.totalFlowMb ?? 0);
+  if (!totalFlowMb || totalFlowMb <= 0) {
+    return 0;
+  }
+  return Number(((usedFlowMb / totalFlowMb) * 100).toFixed(2));
+}
+
+function getFlowUsageColor(percent: number) {
+  if (percent >= 80) {
+    return '#ff4d4f';
+  }
+  if (percent >= 50) {
+    return '#faad14';
+  }
+  return '#1677ff';
+}
+
+function formatFlowUsagePercent(percent: number) {
+  if (Number.isInteger(percent)) {
+    return `${percent}%`;
+  }
+  return `${percent.toFixed(2).replace(/\.?0+$/, '')}%`;
+}
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'flowPoolCode',
+    component: 'Input',
+    label: '流量池编号',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请输入流量池编号',
+    },
+  },
+  {
+    fieldName: 'poolStatus',
+    component: 'Select',
+    label: '状态',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择状态',
+      options: getDictOptions(DictEnum.T_POOL_STATUS),
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+    fixed: 'left',
+  },
+  {
+    title: '流量池编号',
+    field: 'flowPoolCode',
+    width: 160,
+    fixed: 'left',
+    slots: {
+      default: 'flowPoolCode',
+    },
+  },
+  {
+    title: '客户名称',
+    field: 'deptName',
+    minWidth: 120,
+  },
+  {
+    title: '池套餐名称',
+    field: 'poolPackageName',
+    minWidth: 180,
+  },
+  {
+    title: '关联卡数量',
+    field: 'cardCount',
+    minWidth: 120,
+  },
+  {
+    title: '套餐卡流量MB',
+    field: 'cardFlowMb',
+    minWidth: 120,
+  },
+  {
+    title: '套内总流量MB',
+    field: 'poolPackageFlowMb',
+    minWidth: 120,
+  },
+  {
+    title: '加油包总流量MB',
+    field: 'addOnFlowMb',
+    minWidth: 120,
+  },
+  {
+    title: '总流量MB',
+    field: 'totalFlowMb',
+    minWidth: 120,
+  },
+  {
+    title: '已使用流量MB',
+    field: 'usedFlowMb',
+    minWidth: 120,
+  },
+  {
+    title: '剩余流量MB',
+    field: 'remainFlowMb',
+    minWidth: 120,
+  },
+  {
+    title: '使用额度',
+    field: 'usedPercent',
+    minWidth: 180,
+    slots: {
+      default: ({ row }) => {
+        const percent = getFlowUsagePercent(row);
+        return (
+          <div class="w-full pr-2">
+            <Progress
+              format={() => formatFlowUsagePercent(percent)}
+              percent={Math.min(percent, 100)}
+              size="small"
+              strokeColor={getFlowUsageColor(percent)}
+            />
+          </div>
+        );
+      },
+    },
+  },
+  {
+    title: '状态',
+    field: 'poolStatus',
+    width: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.poolStatus, DictEnum.T_POOL_STATUS);
+      },
+    },
+  },
+
+  { title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'flowPoolCode',
+    component: 'Input',
+    label: '流量池编号',
+    componentProps: {
+      placeholder: '请输入流量池编号',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'deptId',
+    component: 'InputNumber',
+    label: '客户编号',
+    componentProps: {
+      placeholder: '请输入客户编号',
+    },
+    rules: z.number({
+      required_error: '请输入客户编号',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'packageCodes',
+    component: 'Input',
+    label: '套餐编号列表（冗余）',
+    componentProps: {
+      placeholder: '请输入套餐编号列表（冗余）',
+    },
+  },
+  {
+    fieldName: 'poolPackageCode',
+    component: 'InputNumber',
+    label: '池套餐编码',
+    componentProps: {
+      placeholder: '请输入池套餐编码',
+    },
+    rules: z.number({
+      required_error: '请输入池套餐编码',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'cardCount',
+    component: 'InputNumber',
+    label: '关联卡数量',
+    componentProps: {
+      placeholder: '请输入关联卡数量',
+    },
+    rules: z.number({
+      required_error: '请输入关联卡数量',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'cardFlowMb',
+    component: 'InputNumber',
+    label: '套餐卡流量MB',
+    componentProps: {
+      placeholder: '请输入套餐卡流量MB',
+    },
+    rules: z.number({
+      required_error: '请输入套餐卡流量MB',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'poolPackageFlowMb',
+    component: 'InputNumber',
+    label: '套内总流量MB',
+    componentProps: {
+      placeholder: '请输入套内总流量MB',
+    },
+    rules: z.number({
+      required_error: '请输入套内总流量MB',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'addOnFlowMb',
+    component: 'InputNumber',
+    label: '加油包总流量MB',
+    componentProps: {
+      placeholder: '请输入加油包总流量MB',
+    },
+    rules: z.number({
+      required_error: '请输入加油包总流量MB',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'totalFlowMb',
+    component: 'InputNumber',
+    label: '总流量MB(套内+加油包)',
+    componentProps: {
+      placeholder: '请输入总流量MB(套内+加油包)',
+    },
+    rules: z.number({
+      required_error: '请输入总流量MB(套内+加油包)',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'usedFlowMb',
+    component: 'InputNumber',
+    label: '已使用流量MB',
+    componentProps: {
+      placeholder: '请输入已使用流量MB',
+    },
+    rules: z.number({
+      required_error: '请输入已使用流量MB',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'remainFlowMb',
+    component: 'InputNumber',
+    label: '剩余流量MB',
+    componentProps: {
+      placeholder: '请输入剩余流量MB',
+    },
+    rules: z.number({
+      required_error: '请输入剩余流量MB',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'poolStatus',
+    component: 'Select',
+    label: '状态：0 正常、1 停用、2 锁定',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择状态：0 正常、1 停用、2 锁定',
+      options: getDictOptions('sys_common_status'),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'remark',
+    component: 'Input',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  },
+  {
+    fieldName: 'tenantId',
+    component: 'Input',
+    label: '租户ID',
+    componentProps: {
+      placeholder: '请输入租户ID',
+    },
+    rules: 'required',
+  },
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'flowPoolCode', label: '流量池编号' },
+  { field: 'deptName', label: '客户名称' },
+  { field: 'poolPackageCode', label: '池套餐编码' ,
+    render: (val) => renderDict(val, DictEnum.T_POOL_PACKAGE_CODE)},
+  { field: 'cardCount', label: '关联卡数量' },
+  { field: 'cardFlowMb', label: '套餐卡流量MB' },
+  { field: 'poolPackageFlowMb', label: '套内总流量MB' },
+  { field: 'addOnFlowMb', label: '加油包总流量MB' },
+  { field: 'totalFlowMb', label: '总流量MB(套内+加油包)' },
+  { field: 'usedFlowMb', label: '已使用流量MB' },
+  { field: 'remainFlowMb', label: '剩余流量MB' },
+  {
+    field: 'usedPercent ',
+    label: '使用额度',
+    render(_, data) {
+      const percent = getFlowUsagePercent(data);
+      return (
+        <Progress
+          format={() => formatFlowUsagePercent(percent)}
+          percent={Math.min(percent, 100)}
+          strokeColor={getFlowUsageColor(percent)}
+        />
+      );
+    },
+  },
+  {
+    field: 'poolStatus',
+    label: '状态',
+     render: (val) => renderDict(val, DictEnum.T_POOL_STATUS)
+  },
+   { field: 'remark', label: '备注' },
+  {
+    field: 'poolPackageName',
+    label: '池套餐名称',
+    render: (value) => {
+      const names = String(value ?? '')
+        .split(',')
+        .map((name) => name.trim())
+        .filter(Boolean);
+      return names.length > 0 ? names.join('、') : '-';
+    },
+  },
+ 
+];
+
+// 流量池号卡列
+export const PoolCardGridColumns: VxeGridProps['columns'] = [
+  { field: 'iccid', title: 'ICCID', minWidth: 160 },
+  { field: 'msisdn', title: 'MSISDN/卡号', minWidth: 120 },
+  { field: 'imsi', title: 'IMSI', minWidth: 140 },
+  { field: 'deptName', title: '所属企业', minWidth: 120 },
+  {
+    field: 'chanName',
+    title: '所属通道',
+    minWidth: 140,
+    slots: {
+      default: ({ row }) => row.chanName || row.chanKey || '-',
+    },
+  },
+  {
+    field: 'packageName',
+    title: '当前套餐',
+    minWidth: 140,
+    slots: {
+      default: ({ row }) => row.packageName || row.currentPackageCode || '-',
+    },
+  },
+  {
+    field: 'packageStatus',
+    title: '套餐状态',
+    minWidth: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.packageStatus, DictEnum.T_PACKAGE_STATUS);
+      },
+    },
+  },
+  { field: 'packageTotalFlowMb', title: '套餐总流量(MB)', minWidth: 120 },
+  { field: 'usedFlowMb', title: '已用流量(MB)', minWidth: 120 },
+  { field: 'flowPkgEndAt', title: '套餐到期时间', minWidth: 160 },
+  { field: 'dataServiceStatus', title: '数据服务', minWidth: 100 },
+  {
+    field: 'bossCardStatus',
+    title: '运营商状态',
+    minWidth: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.bossCardStatus, DictEnum.T_BOSS_CARD_STATUS);
+      },
+    },
+  },
+];
+// 表格搜索表单
+export const PoolCardGridSchema: VbenFormSchema[] = [
+  
+  {
+    fieldName: 'iccid',
+    component: 'Input',
+    label: 'ICCID',
+    componentProps: {
+      placeholder: '请输入ICCID',
+    },
+  },
+  {
+    fieldName: 'bossCardStatus',
+    component: 'Select',
+    label: '卡状态',
+    componentProps: {
+      placeholder: '请选择运营商卡状态',
+      options: getDictOptions(DictEnum.T_BOSS_CARD_STATUS, true),
+    },
+  },
+
+  {
+    fieldName: 'chanKey',
+    component: 'ApiSelect',
+    label: '所属通道',
+    componentProps: FormOptions.Api.tSimChannels({ autoSelect: false }),
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/view.vue
new file mode 100644
index 0000000..5d2c2ac
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool/view.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import type { TSimFlowPoolModel } from '#/api/iotlcm/tPricingPackage/tSimFlowPool/type';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { TabPane, Tabs } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  GetCardsByPackageCodes,
+  View,
+} from '#/api/iotlcm/tPricingPackage/tSimFlowPool';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import {
+  PoolCardGridColumns,
+  PoolCardGridSchema,
+  ViewDescSchema,
+} from './model';
+
+/** ====================  数据  ==================== */
+const activeKey = ref('1');
+const flowPoolCode = ref('');
+const packageCodes = ref<string[]>([]);
+
+/** ====================  方法  ==================== */
+async function handleOpenChange() {
+  const { row } = modalApi.getData() as { row: TSimFlowPoolModel };
+  const record = await View({ id: row.id });
+  setDescProps({ data: record }, true);
+
+  flowPoolCode.value = record.flowPoolCode || '';
+  packageCodes.value = record.packageCodes || [];
+  await gridApi.query();
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.grid,
+  class: 'w-[1200px] max-w-[100vw] flow-pool-view-modal',
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      activeKey.value = '1';
+      flowPoolCode.value = '';
+      packageCodes.value = [];
+      setDescProps({ data: {} }, true);
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpenChange();
+    });
+  },
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 4,
+  schema: ViewDescSchema,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: PoolCardGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.modal as any),
+    columns: PoolCardGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          if (!flowPoolCode.value) {
+            return {};
+          }
+          return await GetCardsByPackageCodes({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            packageCodes: packageCodes.value,
+            flowPoolCode: flowPoolCode.value,
+          });
+        },
+      },
+    },
+  },
+});
+
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <div class="flow-pool-description">
+      <Description @register="registerDescription" />
+    </div>
+    <div>
+      <Tabs v-model:active-key="activeKey">
+        <TabPane key="1" tab="流量池号卡信息">
+          <Grid grid-class="p-0" />
+        </TabPane>
+      </Tabs>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.flow-pool-description {
+  --flow-pool-detail-bg: #fff;
+  --flow-pool-detail-header-bg: #f7f8fa;
+  --flow-pool-detail-border: #d9e1ec;
+  --flow-pool-detail-text: #1f2329;
+  --flow-pool-detail-title: #1f2329;
+}
+
+.flow-pool-description :deep(.ant-descriptions-item-label) {
+  font-size: 14px;
+  color: var(--flow-pool-detail-title) !important;
+  background: var(--flow-pool-detail-header-bg) !important;
+}
+.flow-pool-description :deep(.ant-descriptions-item-content) {
+  font-size: 14px;
+  color: var(--flow-pool-detail-text) !important;
+  background: var(--flow-pool-detail-bg) !important;
+}
+
+.flow-pool-description :deep(.ant-descriptions-view),
+.flow-pool-description :deep(.ant-descriptions-row),
+.flow-pool-description :deep(.ant-descriptions-item-label),
+.flow-pool-description :deep(.ant-descriptions-item-content) {
+  border-color: var(--flow-pool-detail-border) !important;
+}
+
+:global(.dark) .flow-pool-description {
+  --flow-pool-detail-bg: #1f1f1f;
+  --flow-pool-detail-header-bg: #262626;
+  --flow-pool-detail-border: #3a3a3a;
+  --flow-pool-detail-text: #d9d9d9;
+  --flow-pool-detail-title: #f2f2f2;
+}
+
+:global(.dark .flow-pool-view-modal .ant-descriptions-view),
+:global(.dark .flow-pool-view-modal .ant-descriptions table),
+:global(.dark .flow-pool-view-modal .ant-descriptions tr),
+:global(.dark .flow-pool-view-modal .ant-descriptions th),
+:global(.dark .flow-pool-view-modal .ant-descriptions td),
+:global(.dark .flow-pool-view-modal .ant-descriptions-item-label),
+:global(.dark .flow-pool-view-modal .ant-descriptions-item-content) {
+  color: #d9d9d9 !important;
+  background: #1f1f1f !important;
+  border-color: #3a3a3a !important;
+}
+
+:global(.dark .flow-pool-view-modal .ant-descriptions-item-label) {
+  color: #f2f2f2 !important;
+  background: #262626 !important;
+}
+
+:global(.dark .flow-pool-view-modal .ant-progress-text) {
+  color: #d9d9d9 !important;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/edit.vue
new file mode 100644
index 0000000..f4881aa
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/edit.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { TSimPackageCategoryModel } from '#/api/iotlcm/tPricingPackage/tSimPackageCategory/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/tPricingPackage/tSimPackageCategory';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data: TSimPackageCategoryModel;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  if (data.isUpdate) {
+    try {
+      const res = await View({ id: data.data.id });
+      await formApi.setValues(res);
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(
+        Edit(value as TSimPackageCategoryModel),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '操作成功',
+          emit: () => {
+            emit('confirm');
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/index.vue
new file mode 100644
index 0000000..1dfe6ed
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/index.vue
@@ -0,0 +1,192 @@
+<script lang="ts" setup>
+import type { TSimPackageCategoryModel } from '#/api/iotlcm/tPricingPackage/tSimPackageCategory/type';
+
+import { h, ref } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  Delete,
+  Export,
+  List,
+} from '#/api/iotlcm/tPricingPackage/tSimPackageCategory';
+import BetterVben from '#/constants/BetterVben';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<TSimPackageCategoryModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TSimPackageCategoryModel) {
+  viewModalApi.setData({ row }).open();
+}
+function handleEdit(row?: TSimPackageCategoryModel) {
+  editModalApi.setData({ data: row, isUpdate: !!row }).open();
+}
+async function handleDelete(row: TSimPackageCategoryModel) {
+  await Delete({ id: [row.id] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: number[] = rows.map((row) => row.id);
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    centered: true,
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ id: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '套餐分类', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="套餐分类">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleEdit(undefined)"
+          v-access:code="'cpm:iot:tSimPackageCategory:edit'"
+        >
+          新增
+        </Button>
+        <Button
+          v-if="selectRows.length > 0"
+          class="mr-2 flex items-center"
+          type="primary"
+          danger
+          :icon="h(MdiDelete)"
+          @click="handleMultiDelete"
+          v-access:code="'cpm:iot:tSimPackageCategory:delete'"
+        >
+          删除
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+          v-access:code="'cpm:iot:tSimPackageCategory:export'"
+        >
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:iot:tSimPackageCategory:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:iot:tSimPackageCategory:edit'"
+          >
+            修改
+          </Button>
+          <AccessControl
+            :codes="['cpm:iot:tSimPackageCategory:delete']"
+            type="code"
+          >
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/model.tsx
new file mode 100644
index 0000000..b66cf50
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/model.tsx
@@ -0,0 +1,145 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import DictEnum from '#/constants/DictEnum';
+import FormOptions from '#/constants/FormOption';
+import { renderDict } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'categoryCode',
+    component: 'Input',
+    label: '分类编号',
+    componentProps: {
+      placeholder: '请输入分类编号',
+    },
+  },
+  {
+    fieldName: 'categoryName',
+    component: 'Input',
+    label: '分类名称',
+    componentProps: {
+      placeholder: '请输入分类名称',
+    },
+  },
+  {
+    fieldName: 'enabled',
+    component: 'Select',
+    label: '是否启用',
+    componentProps: {
+      placeholder: '请选择是否启用',
+      options: getDictOptions(DictEnum.GLOBAL_ENABLED, true),
+    },
+  },
+
+  {
+    fieldName: 'createdAt',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  {
+    title: '套餐分类编号',
+    field: 'categoryCode',
+    width: 200,
+    align: 'left',
+    headerAlign: 'left',
+    showOverflow: 'tooltip',
+  },
+  {
+    title: '套餐分类名称',
+    field: 'categoryName',
+    minWidth: 240,
+    align: 'left',
+    headerAlign: 'left',
+    showOverflow: 'tooltip',
+  },
+  {
+    title: '是否启用',
+    field: 'enabled',
+    params: { dictType: DictEnum.GLOBAL_ENABLED },
+    width: 100,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.enabled, DictEnum.GLOBAL_ENABLED);
+      },
+    },
+  },
+  { title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'categoryCode',
+    component: 'Input',
+    label: '套餐分类编号',
+    componentProps: {
+      placeholder: '请输入套餐分类编号',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'categoryName',
+    component: 'Input',
+    label: '套餐分类名称',
+    componentProps: {
+      placeholder: '请输入套餐分类名称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'sortNo',
+    component: 'InputNumber',
+    label: '排序',
+    componentProps: {
+      placeholder: '请输入排序',
+      min: 0,
+    },
+    defaultValue: 0,
+  },
+  {
+    fieldName: 'enabled',
+    component: 'Switch',
+    label: '是否启用',
+    componentProps: FormOptions.Component.SwitchEnabled(),
+    defaultValue: 0,
+  },
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'id', label: '主键ID' },
+  { field: 'categoryCode', label: '套餐分类编号' },
+  { field: 'categoryName', label: '套餐分类名称' },
+  { field: 'sortNo', label: '排序' },
+  {
+    field: 'enabled',
+    label: '是否启用',
+    render: (val) => renderDict(val, DictEnum.GLOBAL_ENABLED),
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/view.vue
new file mode 100644
index 0000000..7007f1f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory/view.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { TSimPackageCategoryModel } from '#/api/iotlcm/tPricingPackage/tSimPackageCategory/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/tPricingPackage/tSimPackageCategory';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { ViewDescSchema } from './model';
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: TSimPackageCategoryModel };
+  const record = await View({ id: row.id });
+  setDescProps({ data: record }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: ViewDescSchema,
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/edit.vue
new file mode 100644
index 0000000..40eb52d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/edit.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { TSimUpstreamPackageModel } from '#/api/iotlcm/tPricingPackage/tSimUpstreamPackage/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/tPricingPackage/tSimUpstreamPackage';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data: TSimUpstreamPackageModel;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  if (data.isUpdate) {
+    try {
+      const res = await View({ id: data.data.id });
+      await formApi.setValues(res);
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(
+        Edit(value as TSimUpstreamPackageModel),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '操作成功',
+          emit: () => {
+            emit('confirm');
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/index.vue
new file mode 100644
index 0000000..4c095fa
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/index.vue
@@ -0,0 +1,192 @@
+<script lang="ts" setup>
+import type { TSimUpstreamPackageModel } from '#/api/iotlcm/tPricingPackage/tSimUpstreamPackage/type';
+
+import { h, ref } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  Delete,
+  Export,
+  List,
+} from '#/api/iotlcm/tPricingPackage/tSimUpstreamPackage';
+import BetterVben from '#/constants/BetterVben';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<TSimUpstreamPackageModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TSimUpstreamPackageModel) {
+  viewModalApi.setData({ row }).open();
+}
+function handleEdit(row?: TSimUpstreamPackageModel) {
+  editModalApi.setData({ data: row, isUpdate: !!row }).open();
+}
+async function handleDelete(row: TSimUpstreamPackageModel) {
+  await Delete({ id: [row.id] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: number[] = rows.map((row) => row.id);
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    centered: true,
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ id: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '上游套餐', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="上游套餐">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleEdit(undefined)"
+          v-access:code="'cpm:iot:tSimUpstreamPackage:edit'"
+        >
+          新增
+        </Button>
+        <Button
+          v-if="selectRows.length > 0"
+          class="mr-2 flex items-center"
+          type="primary"
+          danger
+          :icon="h(MdiDelete)"
+          @click="handleMultiDelete"
+          v-access:code="'cpm:iot:tSimUpstreamPackage:delete'"
+        >
+          删除
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+          v-access:code="'cpm:iot:tSimUpstreamPackage:export'"
+        >
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:iot:tSimUpstreamPackage:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:iot:tSimUpstreamPackage:edit'"
+          >
+            修改
+          </Button>
+          <AccessControl
+            :codes="['cpm:iot:tSimUpstreamPackage:delete']"
+            type="code"
+          >
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/model.tsx
new file mode 100644
index 0000000..fb0d1cb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/model.tsx
@@ -0,0 +1,147 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import DictEnum from '#/constants/DictEnum';
+import { renderDict } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'operator',
+    component: 'Select',
+    label: '运营商',
+    componentProps: {
+      placeholder: '请选择运营商',
+      options: getDictOptions(DictEnum.T_OPERATORS, true),
+    },
+  },
+  {
+    fieldName: 'upPkgName',
+    component: 'Input',
+    label: '上游名称',
+    componentProps: {
+      placeholder: '请输入上游名称',
+    },
+  },
+  {
+    fieldName: 'createdAt',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  {
+    title: '上游套餐编码',
+    field: 'upPkgCode',
+    minWidth: 120,
+  },
+  {
+    title: '上游套餐名称',
+    field: 'upPkgName',
+    minWidth: 120,
+  },
+  {
+    title: '运营商',
+    field: 'operator',
+    params: { dictType: DictEnum.T_OPERATORS },
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.operator, DictEnum.T_OPERATORS);
+      },
+    },
+  },
+  {
+    title: 'APN名称',
+    field: 'apnName',
+    minWidth: 120,
+  },
+  {
+    title: '备注',
+    field: 'remark',
+    minWidth: 120,
+  },
+  { title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'upPkgCode',
+    component: 'Input',
+    label: '上游套餐编码',
+    componentProps: {
+      placeholder: '请输入上游套餐编码',
+    },
+  },
+  {
+    fieldName: 'upPkgName',
+    component: 'Input',
+    label: '上游套餐名称',
+    componentProps: {
+      placeholder: '请输入上游套餐名称',
+    },
+  },
+  {
+    fieldName: 'operator',
+    component: 'Select',
+    label: '运营商',
+    componentProps: {
+      placeholder: '请选择运营商',
+      options: getDictOptions(DictEnum.T_OPERATORS),
+    },
+  },
+  {
+    fieldName: 'apnName',
+    component: 'Input',
+    label: 'APN名称',
+    componentProps: {
+      placeholder: '请输入APN名称',
+    },
+  },
+  {
+    fieldName: 'remark',
+    component: 'Input',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+    },
+  },
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'id', label: '主键' },
+  { field: 'upPkgCode', label: '上游套餐编码' },
+  { field: 'upPkgName', label: '上游套餐名称' },
+  {
+    field: 'operator',
+    label: '运营商',
+    render: (val) => renderDict(val, DictEnum.T_OPERATORS),
+  },
+  { field: 'apnName', label: 'APN名称' },
+  { field: 'remark', label: '备注' },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/view.vue
new file mode 100644
index 0000000..53c6976
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage/view.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { TSimUpstreamPackageModel } from '#/api/iotlcm/tPricingPackage/tSimUpstreamPackage/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/tPricingPackage/tSimUpstreamPackage';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { ViewDescSchema } from './model';
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: TSimUpstreamPackageModel };
+  const record = await View({ id: row.id });
+  setDescProps({ data: record }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: ViewDescSchema,
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/cardConfig/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/cardConfig/edit.vue
new file mode 100644
index 0000000..5bc1d23
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/cardConfig/edit.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import type {
+  SimWarningConfigModel,
+  SimWarningConfigSaveParam,
+} from '#/api/iotlcm/tWarnCenter/simWarningConfig/type';
+
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useAccess } from '@vben/access';
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { useAccessStore } from '@vben/stores';
+
+import { Alert, Modal as AntModal, Button, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Save, View } from '#/api/iotlcm/tWarnCenter/simWarningConfig';
+import BetterVben from '#/constants/BetterVben';
+import { resolveAvailableRoutePath } from '#/views/iotlcm/tCommunication/tSimCardInfo/diagnose-route';
+
+import {
+  buildWarnMethods,
+  getEditFormSchema,
+  normalizeWarningContacts,
+  parseWarnMethodTypes,
+  warnItemTypeCard,
+} from '../shared/model';
+
+interface ModalProps {
+  row?: SimWarningConfigModel;
+  isUpdate: boolean;
+}
+
+const emit = defineEmits<{ confirm: [] }>();
+const isUpdate = ref(false);
+const router = useRouter();
+const accessStore = useAccessStore();
+const { hasAccessByCodes } = useAccess();
+const cutoffPath = computed(() =>
+  resolveAvailableRoutePath(
+    router,
+    accessStore,
+    (_route, fullPath) => /\/tBusinessAcceptance\/?$/i.test(fullPath),
+    [],
+  ),
+);
+const canConfigureCutoff = computed(
+  () =>
+    Boolean(cutoffPath.value) &&
+    hasAccessByCodes(['cpm:iot:tSimCardTrafficCutoff:input:submit']),
+);
+async function handleOpenCutoff() {
+  if (!canConfigureCutoff.value) {
+    message.warning('没有达量断网配置权限');
+    return;
+  }
+  const values = await formApi.getValues();
+  const cardValue = String(values.itemCode || '').trim();
+  if (!cardValue) {
+    message.warning('请先填写卡片标识');
+    return;
+  }
+  AntModal.confirm({
+    title: '前往达量断网配置？',
+    content:
+      '未保存的预警内容不会提交。断网策略需在目标页面独立保存，不会自动使用预警阈值。',
+    async onOk() {
+      if (!canConfigureCutoff.value) return;
+      await router.push({
+        path: cutoffPath.value,
+        query: { acceptanceAction: 'trafficCutoff', cardValue },
+      });
+      modalApi.close();
+    },
+  });
+}
+const title = computed(() =>
+  isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add'),
+);
+
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  await formApi.resetForm();
+  await formApi.setValues({
+    itemType: warnItemTypeCard,
+    isEnabled: 1,
+    warnMethodTypes: parseWarnMethodTypes(),
+  });
+  if (!data.isUpdate || !data.row?.id) {
+    return;
+  }
+  try {
+    const res = await View({ id: data.row.id });
+    await formApi.setValues({
+      ...res,
+
+      warnMethodTypes: parseWarnMethodTypes(res.warnMethods),
+    });
+  } catch (error) {
+    message.error('数据加载失败');
+    console.error(error);
+  }
+}
+
+async function handleConfirm() {
+  const [flag, value] = await BetterVben.function.formValidate(formApi);
+  if (!flag) {
+    return;
+  }
+  const payload = { ...value } as Record<string, any>;
+  payload.itemType = warnItemTypeCard;
+  const contactError = normalizeWarningContacts(payload);
+  if (contactError) {
+    message.warning(contactError);
+    return;
+  }
+  payload.warnMethods = buildWarnMethods(payload.warnMethodTypes);
+  delete payload.warnMethodTypes;
+  delete payload.autoAction;
+  delete payload.trafficCutoffCrossMonthHold;
+  await BetterVben.function.formSubmit(
+    Save(payload as SimWarningConfigSaveParam),
+    modalApi,
+    {
+      autoClose: true,
+      successMessage: '操作成功',
+      emit: () => emit('confirm'),
+    },
+  );
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.grid,
+  schema: getEditFormSchema(warnItemTypeCard),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  class: 'w-[760px]',
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, handleConfirm);
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, handleOpen);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="title">
+    <Alert class="mb-4" type="info" show-icon>
+      <template #message>预警仅发送消息通知，不会自动关闭数据服务。</template>
+      <template #description>
+        如需达量自动断网，请独立配置断网策略。
+        <Button
+          v-if="canConfigureCutoff"
+          type="link"
+          size="small"
+          @click="handleOpenCutoff"
+        >
+          配置达量断网
+        </Button>
+      </template>
+    </Alert>
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/cardConfig/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/cardConfig/index.vue
new file mode 100644
index 0000000..671feb0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/cardConfig/index.vue
@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import type { SimWarningConfigModel } from '#/api/iotlcm/tWarnCenter/simWarningConfig/type';
+
+import { h } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  Delete,
+  List,
+  Status,
+} from '#/api/iotlcm/tWarnCenter/simWarningConfig';
+import BetterVben from '#/constants/BetterVben';
+
+import {
+  getConfigGridColumns,
+  getConfigListSchema,
+  warnItemTypeCard,
+  warnUnitMb,
+} from '../shared/model';
+import editModal from './edit.vue';
+import viewModal from './view.vue';
+
+const accessCodes = {
+  delete: ['cpm:iot:simWarningConfig:delete', 'cpr:superadmin'],
+  save: ['cpm:iot:simWarningConfig:save', 'cpr:superadmin'],
+  status: ['cpm:iot:simWarningConfig:status', 'cpr:superadmin'],
+  view: ['cpm:iot:simWarningConfig:view', 'cpr:superadmin'],
+};
+
+function handlePreview(row: SimWarningConfigModel) {
+  viewModalApi.setData({ row }).open();
+}
+
+function handleEdit(row?: SimWarningConfigModel) {
+  editModalApi.setData({ row, isUpdate: !!row }).open();
+}
+
+async function handleStatus(row: SimWarningConfigModel) {
+  const nextStatus = Number(row.isEnabled) === 1 ? 0 : 1;
+  await Status({ id: row.id, isEnabled: nextStatus });
+  message.success(nextStatus === 1 ? '启用成功' : '停用成功');
+  await handleRefresh();
+}
+
+async function handleDelete(row: SimWarningConfigModel) {
+  await Delete({ id: row.id });
+  message.success('删除成功');
+  await handleRefresh();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    showCollapseButton: false,
+    schema: getConfigListSchema(warnItemTypeCard),
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: getConfigGridColumns(warnItemTypeCard),
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            itemType: warnItemTypeCard,
+            warnUnit: warnUnitMb,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="卡预警配置">
+      <template #toolbar-tools>
+        <AccessControl :codes="accessCodes.save" type="code">
+          <Button
+            class="mr-2 flex items-center"
+            type="primary"
+            :icon="h(MdiPlus)"
+            @click="handleEdit(undefined)"
+          >
+            新增预警
+          </Button>
+        </AccessControl>
+      </template>
+      <template #itemCode="{ row }">
+        <Button type="link" class="p-0" @click="handlePreview(row)">
+          {{ row.itemCode }}
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <AccessControl :codes="accessCodes.view" type="code">
+            <Button
+              class="mr-2 border-none p-0"
+              :block="false"
+              type="link"
+              @click="handlePreview(row)"
+            >
+              查看
+            </Button>
+          </AccessControl>
+          <AccessControl :codes="accessCodes.save" type="code">
+            <Button
+              class="mr-2 border-none p-0"
+              :block="false"
+              type="link"
+              @click="handleEdit(row)"
+            >
+              修改
+            </Button>
+          </AccessControl>
+          <AccessControl :codes="accessCodes.status" type="code">
+            <Popconfirm
+              :title="
+                Number(row.isEnabled) === 1 ? '确定停用吗？' : '确定启用吗？'
+              "
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleStatus(row)"
+            >
+              <Button class="mr-2 border-none p-0" :block="false" type="link">
+                {{ Number(row.isEnabled) === 1 ? '停用' : '启用' }}
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+          <AccessControl :codes="accessCodes.delete" type="code">
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/cardConfig/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/cardConfig/view.vue
new file mode 100644
index 0000000..daa8a85
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/cardConfig/view.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { SimWarningConfigModel } from '#/api/iotlcm/tWarnCenter/simWarningConfig/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/tWarnCenter/simWarningConfig';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { getViewDescSchema, warnItemTypeCard } from '../shared/model';
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: SimWarningConfigModel };
+  const record = await View({ id: row.id });
+  setDescProps({ data: record }, true);
+}
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: getViewDescSchema(warnItemTypeCard),
+});
+</script>
+
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/flowPoolConfig/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/flowPoolConfig/edit.vue
new file mode 100644
index 0000000..730ad1c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/flowPoolConfig/edit.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type {
+  SimWarningConfigModel,
+  SimWarningConfigSaveParam,
+} from '#/api/iotlcm/tWarnCenter/simWarningConfig/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { Alert, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Save, View } from '#/api/iotlcm/tWarnCenter/simWarningConfig';
+import BetterVben from '#/constants/BetterVben';
+
+import {
+  autoActionNone,
+  buildWarnMethods,
+  getEditFormSchema,
+  normalizeWarningContacts,
+  parseWarnMethodTypes,
+  warnItemTypeFlowPool,
+  warnUnitPercent,
+} from '../shared/model';
+
+interface ModalProps {
+  row?: SimWarningConfigModel;
+  isUpdate: boolean;
+}
+
+const emit = defineEmits<{ confirm: [] }>();
+const isUpdate = ref(false);
+const title = computed(() =>
+  isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add'),
+);
+
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  await formApi.resetForm();
+  await formApi.setValues({
+    itemType: warnItemTypeFlowPool,
+    warnUnit: warnUnitPercent,
+    isEnabled: 1,
+    autoAction: autoActionNone,
+    warnMethodTypes: parseWarnMethodTypes(),
+  });
+  if (!data.isUpdate || !data.row?.id) {
+    return;
+  }
+  try {
+    const res = await View({ id: data.row.id });
+    await formApi.setValues({
+      ...res,
+      warnMethodTypes: parseWarnMethodTypes(res.warnMethods),
+    });
+  } catch (error) {
+    message.error('数据加载失败');
+    console.error(error);
+  }
+}
+
+async function handleConfirm() {
+  const [flag, value] = await BetterVben.function.formValidate(formApi);
+  if (!flag) {
+    return;
+  }
+  const payload = { ...value } as Record<string, any>;
+  payload.itemType = warnItemTypeFlowPool;
+  payload.warnUnit = warnUnitPercent;
+  payload.autoAction = autoActionNone;
+  const contactError = normalizeWarningContacts(payload);
+  if (contactError) {
+    message.warning(contactError);
+    return;
+  }
+  payload.warnMethods = buildWarnMethods(payload.warnMethodTypes);
+  delete payload.warnMethodTypes;
+  await BetterVben.function.formSubmit(
+    Save(payload as SimWarningConfigSaveParam),
+    modalApi,
+    {
+      autoClose: true,
+      successMessage: '操作成功',
+      emit: () => emit('confirm'),
+    },
+  );
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.grid,
+  schema: getEditFormSchema(warnItemTypeFlowPool),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  class: 'w-[760px]',
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, handleConfirm);
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, handleOpen);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="title">
+    <Alert
+      class="mb-4"
+      type="info"
+      show-icon
+      message="流量池预警仅发送消息通知，不会自动关闭成员卡的数据服务。"
+    />
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/flowPoolConfig/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/flowPoolConfig/index.vue
new file mode 100644
index 0000000..db3b9a6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/flowPoolConfig/index.vue
@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import type { SimWarningConfigModel } from '#/api/iotlcm/tWarnCenter/simWarningConfig/type';
+
+import { h } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  Delete,
+  List,
+  Status,
+} from '#/api/iotlcm/tWarnCenter/simWarningConfig';
+import BetterVben from '#/constants/BetterVben';
+
+import {
+  getConfigGridColumns,
+  getConfigListSchema,
+  warnItemTypeFlowPool,
+  warnUnitPercent,
+} from '../shared/model';
+import editModal from './edit.vue';
+import viewModal from './view.vue';
+
+const accessCodes = {
+  delete: ['cpm:iot:simWarningConfig:delete', 'cpr:superadmin'],
+  save: ['cpm:iot:simWarningConfig:save', 'cpr:superadmin'],
+  status: ['cpm:iot:simWarningConfig:status', 'cpr:superadmin'],
+  view: ['cpm:iot:simWarningConfig:view', 'cpr:superadmin'],
+};
+
+function handlePreview(row: SimWarningConfigModel) {
+  viewModalApi.setData({ row }).open();
+}
+
+function handleEdit(row?: SimWarningConfigModel) {
+  editModalApi.setData({ row, isUpdate: !!row }).open();
+}
+
+async function handleStatus(row: SimWarningConfigModel) {
+  const nextStatus = Number(row.isEnabled) === 1 ? 0 : 1;
+  await Status({ id: row.id, isEnabled: nextStatus });
+  message.success(nextStatus === 1 ? '启用成功' : '停用成功');
+  await handleRefresh();
+}
+
+async function handleDelete(row: SimWarningConfigModel) {
+  await Delete({ id: row.id });
+  message.success('删除成功');
+  await handleRefresh();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    showCollapseButton: false,
+    schema: getConfigListSchema(warnItemTypeFlowPool),
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: getConfigGridColumns(warnItemTypeFlowPool),
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            itemType: warnItemTypeFlowPool,
+            warnUnit: warnUnitPercent,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="流量池预警配置">
+      <template #toolbar-tools>
+        <AccessControl :codes="accessCodes.save" type="code">
+          <Button
+            class="mr-2 flex items-center"
+            type="primary"
+            :icon="h(MdiPlus)"
+            @click="handleEdit(undefined)"
+          >
+            新增流量池预警
+          </Button>
+        </AccessControl>
+      </template>
+      <template #itemCode="{ row }">
+        <Button type="link" class="p-0" @click="handlePreview(row)">
+          {{ row.itemCode }}
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <AccessControl :codes="accessCodes.view" type="code">
+            <Button
+              class="mr-2 border-none p-0"
+              :block="false"
+              type="link"
+              @click="handlePreview(row)"
+            >
+              查看
+            </Button>
+          </AccessControl>
+          <AccessControl :codes="accessCodes.save" type="code">
+            <Button
+              class="mr-2 border-none p-0"
+              :block="false"
+              type="link"
+              @click="handleEdit(row)"
+            >
+              修改
+            </Button>
+          </AccessControl>
+          <AccessControl :codes="accessCodes.status" type="code">
+            <Popconfirm
+              :title="
+                Number(row.isEnabled) === 1 ? '确定停用吗？' : '确定启用吗？'
+              "
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleStatus(row)"
+            >
+              <Button class="mr-2 border-none p-0" :block="false" type="link">
+                {{ Number(row.isEnabled) === 1 ? '停用' : '启用' }}
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+          <AccessControl :codes="accessCodes.delete" type="code">
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/flowPoolConfig/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/flowPoolConfig/view.vue
new file mode 100644
index 0000000..45ad07a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/flowPoolConfig/view.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { SimWarningConfigModel } from '#/api/iotlcm/tWarnCenter/simWarningConfig/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/tWarnCenter/simWarningConfig';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { getViewDescSchema, warnItemTypeFlowPool } from '../shared/model';
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: SimWarningConfigModel };
+  const record = await View({ id: row.id });
+  setDescProps({ data: record }, true);
+}
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: getViewDescSchema(warnItemTypeFlowPool),
+});
+</script>
+
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/shared/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/shared/model.tsx
new file mode 100644
index 0000000..56119f3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/tWarnCenter/shared/model.tsx
@@ -0,0 +1,550 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { Tag } from 'ant-design-vue';
+
+export const warnItemTypeCard = 1;
+export const warnItemTypeFlowPool = 2;
+
+export const warnUnitMb = 1;
+export const warnUnitPercent = 2;
+
+export const autoActionNone = 0;
+export const autoActionSuspend = 3;
+
+export const warnMethodSms = '0';
+export const warnMethodEmail = '1';
+export const warnMethodPhone = '2';
+export const warnMethodPlatform = '3';
+export const orderedWarnMethods = [
+  warnMethodPlatform,
+  warnMethodEmail,
+  warnMethodSms,
+  warnMethodPhone,
+];
+
+export const enabledOptions = [
+  { label: '启用', value: 1 },
+  { label: '停用', value: 0 },
+];
+
+export const cardWarnUnitOptions = [
+  { label: '流量阈值（MB）', value: warnUnitMb },
+];
+
+export const poolWarnUnitOptions = [
+  { label: '流量池百分比', value: warnUnitPercent },
+];
+
+export const warnMethodOptions = [
+  { disabled: true, label: '站内提醒', value: warnMethodPlatform },
+  { label: '邮箱', value: warnMethodEmail },
+  { label: '短信', value: warnMethodSms },
+];
+
+export const cardAutoActionOptions = [
+  { label: '否', value: autoActionNone },
+  { label: '是', value: autoActionSuspend },
+];
+
+export const noAutoActionOptions = [{ label: '否', value: autoActionNone }];
+
+export function formatWarnUnit(unit?: number) {
+  switch (Number(unit)) {
+    case warnUnitMb: {
+      return 'MB';
+    }
+    case warnUnitPercent: {
+      return '%';
+    }
+    default: {
+      return '-';
+    }
+  }
+}
+
+export function formatThreshold(value?: number, unit?: number) {
+  const numberValue = Number(value ?? 0);
+  if (!numberValue) {
+    return '-';
+  }
+  return `${numberValue}${formatWarnUnit(unit)}`;
+}
+
+export function formatEnabled(value?: number) {
+  return Number(value) === 1 ? '启用' : '停用';
+}
+
+export function formatAutoAction(value?: number) {
+  return Number(value) === autoActionSuspend ? '是' : '否';
+}
+
+export function parseWarnMethodTypes(methods?: string) {
+  const selected = new Set(
+    String(methods || '')
+      .split(',')
+      .map((item) => item.trim())
+      .filter(Boolean),
+  );
+  selected.add(warnMethodPlatform);
+  return orderedWarnMethods.filter((item) => selected.has(item));
+}
+
+export function buildWarnMethods(methodTypes?: string[]) {
+  const selected = new Set<string>(methodTypes || []);
+  selected.add(warnMethodPlatform);
+  return orderedWarnMethods.filter((item) => selected.has(item)).join(',');
+}
+
+function hasWarnMethod(values: Record<string, any>, method: string) {
+  const methodTypes = values?.warnMethodTypes;
+  if (Array.isArray(methodTypes)) {
+    return methodTypes.includes(method);
+  }
+  return String(methodTypes || '')
+    .split(',')
+    .map((item) => item.trim())
+    .includes(method);
+}
+
+function splitWarnContactList(value?: string) {
+  return String(value || '')
+    .split(/[,，;；|\s]+/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+function normalizeWarnContactList(
+  value: string | undefined,
+  validate: (value: string) => boolean,
+  emptyMessage: string,
+  invalidPrefix: string,
+  lowerCase = false,
+) {
+  const contacts = splitWarnContactList(value).map((item) =>
+    lowerCase ? item.toLowerCase() : item,
+  );
+  const uniqueContacts = [...new Set(contacts)];
+  if (uniqueContacts.length === 0) {
+    return { error: emptyMessage, value: '' };
+  }
+  const invalidContact = uniqueContacts.find((item) => !validate(item));
+  if (invalidContact) {
+    return { error: `${invalidPrefix}：${invalidContact}`, value: '' };
+  }
+  return { error: '', value: uniqueContacts.join(',') };
+}
+
+function isValidWarnEmail(email: string) {
+  if (!email || email.includes(' ')) {
+    return false;
+  }
+  const parts = email.split('@');
+  if (parts.length !== 2 || !parts[0] || !parts[1]) {
+    return false;
+  }
+  const domain = parts[1];
+  return (
+    domain.includes('.') && !domain.startsWith('.') && !domain.endsWith('.')
+  );
+}
+
+function isValidWarnPhone(phone: string) {
+  return /^1[3-9]\d{9}$/.test(phone);
+}
+
+export function normalizeWarningContacts(payload: Record<string, any>) {
+  const methodTypes = Array.isArray(payload.warnMethodTypes)
+    ? payload.warnMethodTypes
+    : [];
+
+  if (methodTypes.includes(warnMethodSms)) {
+    const phones = normalizeWarnContactList(
+      payload.warnPhones,
+      isValidWarnPhone,
+      '请选择短信提醒时必须填写短信号码',
+      '手机号格式不正确',
+    );
+    if (phones.error) {
+      return phones.error;
+    }
+    payload.warnPhones = phones.value;
+  } else {
+    payload.warnPhones = '';
+  }
+
+  if (methodTypes.includes(warnMethodEmail)) {
+    const emails = normalizeWarnContactList(
+      payload.warnEmails,
+      isValidWarnEmail,
+      '请选择邮箱提醒时必须填写邮箱地址',
+      '邮箱格式不正确',
+      true,
+    );
+    if (emails.error) {
+      return emails.error;
+    }
+    payload.warnEmails = emails.value;
+  } else {
+    payload.warnEmails = '';
+  }
+
+  return '';
+}
+
+export function formatWarnMethods(methods?: string) {
+  const values = String(methods || '')
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean);
+  const selected = new Set(values);
+  selected.add(warnMethodPlatform);
+  const colorMap: Record<string, string> = {
+    [warnMethodSms]: 'orange',
+    [warnMethodEmail]: 'cyan',
+    [warnMethodPhone]: 'geekblue',
+    [warnMethodPlatform]: 'blue',
+  };
+  const labelMap: Record<string, string> = {
+    [warnMethodSms]: '短信',
+    [warnMethodEmail]: '邮箱',
+    [warnMethodPhone]: '电话',
+    [warnMethodPlatform]: '站内提醒',
+  };
+  return orderedWarnMethods
+    .filter((item) => selected.has(item))
+    .map((item) => ({
+      label: labelMap[item] ?? item,
+      color: colorMap[item] ?? 'default',
+    }));
+}
+
+export function renderWarnMethodTags(methods?: string) {
+  const tags = formatWarnMethods(methods);
+  return (
+    <div class="inline-flex min-w-[230px] flex-nowrap items-center gap-2 whitespace-nowrap">
+      {tags.map((tag) => (
+        <Tag color={tag.color} key={tag.label} style={{ marginInlineEnd: 0 }}>
+          {tag.label}
+        </Tag>
+      ))}
+    </div>
+  );
+}
+
+function itemCodeLabel(itemType: number) {
+  return itemType === warnItemTypeFlowPool ? '流量池编号' : 'ICCID';
+}
+
+export function getConfigListSchema(itemType: number): VbenFormSchema[] {
+  const schema: VbenFormSchema[] = [
+    {
+      fieldName: 'itemCode',
+      component: 'Input',
+      label: itemCodeLabel(itemType),
+      componentProps: {
+        placeholder:
+          itemType === warnItemTypeFlowPool
+            ? '请输入流量池编号'
+            : '请输入ICCID',
+      },
+    },
+    {
+      fieldName: 'isEnabled',
+      component: 'Select',
+      label: '状态',
+      defaultValue: null,
+      componentProps: {
+        allowClear: true,
+        options: enabledOptions,
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+
+  return schema;
+}
+
+export function getConfigGridColumns(
+  itemType: number,
+): VxeGridProps['columns'] {
+  return [
+    {
+      title: itemCodeLabel(itemType),
+      field: 'itemCode',
+      minWidth: 180,
+      fixed: 'left',
+      slots: {
+        default: 'itemCode',
+      },
+    },
+    {
+      title: '预警类型',
+      field: 'warnUnit',
+      minWidth: 140,
+      slots: {
+        default: ({ row }) => {
+          if (row.itemType === warnItemTypeFlowPool) {
+            return '流量池百分比';
+          }
+          const option = cardWarnUnitOptions.find(
+            (item) => item.value === Number(row.warnUnit),
+          );
+          return option?.label || formatWarnUnit(row.warnUnit);
+        },
+      },
+    },
+    {
+      title: '第一次提醒',
+      field: 'firstWarn',
+      minWidth: 120,
+      slots: {
+        default: ({ row }) => formatThreshold(row.firstWarn, row.warnUnit),
+      },
+    },
+    {
+      title: '第二次提醒',
+      field: 'secondWarn',
+      minWidth: 120,
+      slots: {
+        default: ({ row }) => formatThreshold(row.secondWarn, row.warnUnit),
+      },
+    },
+    {
+      title: '第三次提醒',
+      field: 'thirdWarn',
+      minWidth: 120,
+      slots: {
+        default: ({ row }) => formatThreshold(row.thirdWarn, row.warnUnit),
+      },
+    },
+    {
+      title: '提醒方式',
+      field: 'warnMethods',
+      minWidth: 250,
+      slots: {
+        default: ({ row }) => renderWarnMethodTags(row.warnMethods),
+      },
+    },
+    {
+      title: '状态',
+      field: 'isEnabled',
+      width: 90,
+      slots: {
+        default: ({ row }) => {
+          const enabled = Number(row.isEnabled) === 1;
+          return (
+            <Tag color={enabled ? 'green' : 'default'}>
+              {formatEnabled(row.isEnabled)}
+            </Tag>
+          );
+        },
+      },
+    },
+    {
+      title: '更新时间',
+      field: 'updatedAt',
+      minWidth: 170,
+    },
+    {
+      title: '操作',
+      width: 210,
+      slots: { default: 'action' },
+      fixed: 'right',
+    },
+  ];
+}
+
+export function getEditFormSchema(itemType: number): VbenFormSchema[] {
+  const isFlowPool = itemType === warnItemTypeFlowPool;
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      label: 'ID',
+      dependencies: { show: () => false, triggerFields: [''] },
+    },
+    {
+      fieldName: 'itemType',
+      component: 'Input',
+      label: '对象类型',
+      defaultValue: itemType,
+      dependencies: { show: () => false, triggerFields: [''] },
+    },
+    {
+      fieldName: 'itemCode',
+      component: 'Input',
+      label: itemCodeLabel(itemType),
+      componentProps: {
+        placeholder: isFlowPool ? '请输入流量池编号' : '请输入ICCID',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'warnUnit',
+      component: 'Input',
+      label: '预警类型',
+      defaultValue: isFlowPool ? warnUnitPercent : warnUnitMb,
+      dependencies: { show: () => false, triggerFields: [''] },
+      rules: 'required',
+    },
+    {
+      fieldName: 'firstWarn',
+      component: 'InputNumber',
+      label: '第一次提醒',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        placeholder: isFlowPool
+          ? '使用率达到多少百分比提醒'
+          : '请输入第一次提醒阈值',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'secondWarn',
+      component: 'InputNumber',
+      label: '第二次提醒',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        placeholder: '请输入第二次提醒阈值',
+      },
+    },
+    {
+      fieldName: 'thirdWarn',
+      component: 'InputNumber',
+      label: '第三次提醒',
+      componentProps: {
+        min: 0,
+        precision: 2,
+        placeholder: '请输入第三次提醒阈值',
+      },
+    },
+    {
+      fieldName: 'warnMethodTypes',
+      component: 'CheckboxGroup',
+      label: '提醒方式',
+      defaultValue: [warnMethodPlatform],
+      formItemClass: 'col-span-12',
+      componentProps: {
+        style: {
+          alignItems: 'center',
+          columnGap: '24px',
+          display: 'inline-flex',
+          flexWrap: 'nowrap',
+          minWidth: '280px',
+        },
+        options: warnMethodOptions,
+      },
+    },
+    {
+      fieldName: 'warnPhones',
+      component: 'Input',
+      label: '提醒手机号',
+      formItemClass: 'col-span-12',
+      dependencies: {
+        show: (values) => hasWarnMethod(values, warnMethodSms),
+        triggerFields: ['warnMethodTypes'],
+      },
+      componentProps: {
+        placeholder: '多个手机号用英文逗号分隔',
+      },
+    },
+    {
+      fieldName: 'warnEmails',
+      component: 'Input',
+      label: '提醒邮箱',
+      formItemClass: 'col-span-12',
+      dependencies: {
+        show: (values) => hasWarnMethod(values, warnMethodEmail),
+        triggerFields: ['warnMethodTypes'],
+      },
+      componentProps: {
+        placeholder: '多个邮箱用英文逗号分隔',
+      },
+    },
+    {
+      fieldName: 'isEnabled',
+      component: 'Select',
+      label: '状态',
+      defaultValue: 1,
+      componentProps: {
+        options: enabledOptions,
+        placeholder: '请选择状态',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      component: 'Textarea',
+      label: '备注',
+      formItemClass: 'col-span-12',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+export function getViewDescSchema(itemType: number): DescItem[] {
+  return [
+    { field: 'itemCode', label: itemCodeLabel(itemType) },
+    {
+      field: 'warnUnit',
+      label: '预警类型',
+      render(value, data) {
+        if (data?.itemType === warnItemTypeFlowPool) {
+          return '流量池百分比';
+        }
+        const option = cardWarnUnitOptions.find(
+          (item) => item.value === Number(value),
+        );
+        return option?.label || formatWarnUnit(Number(value));
+      },
+    },
+    {
+      field: 'firstWarn',
+      label: '第一次提醒',
+      render(value, data) {
+        return formatThreshold(Number(value), data?.warnUnit);
+      },
+    },
+    {
+      field: 'secondWarn',
+      label: '第二次提醒',
+      render(value, data) {
+        return formatThreshold(Number(value), data?.warnUnit);
+      },
+    },
+    {
+      field: 'thirdWarn',
+      label: '第三次提醒',
+      render(value, data) {
+        return formatThreshold(Number(value), data?.warnUnit);
+      },
+    },
+    {
+      field: 'warnMethods',
+      label: '提醒方式',
+      render(value) {
+        return renderWarnMethodTags(String(value || ''));
+      },
+    },
+    { field: 'warnPhones', label: '提醒手机号' },
+    { field: 'warnEmails', label: '提醒邮箱' },
+    {
+      field: 'isEnabled',
+      label: '状态',
+      render(value) {
+        return formatEnabled(Number(value));
+      },
+    },
+    { field: 'batchNo', label: '批次号' },
+    { field: 'remark', label: '备注' },
+    { field: 'createdAt', label: '创建时间' },
+    { field: 'updatedAt', label: '更新时间' },
+  ];
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/edit.vue
new file mode 100644
index 0000000..2e41883
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/edit.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { TAgentEnterpriseModel } from '#/api/iotlcm/zAnother/tAgentEnterprise/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/zAnother/tAgentEnterprise';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data: TAgentEnterpriseModel;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  if (data.isUpdate) {
+    try {
+      const res = await View({ deptId: data.data.deptId });
+      await formApi.setValues(res);
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(
+        Edit(value as TAgentEnterpriseModel),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '操作成功',
+          emit: () => {
+            emit('confirm');
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/index.vue
new file mode 100644
index 0000000..76edaf1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/index.vue
@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import type { TAgentEnterpriseModel } from '#/api/iotlcm/zAnother/tAgentEnterprise/type';
+
+import { h, ref } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Delete, Export, List } from '#/api/iotlcm/zAnother/tAgentEnterprise';
+import BetterVben from '#/constants/BetterVben';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<TAgentEnterpriseModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TAgentEnterpriseModel) {
+  viewModalApi.setData({ row }).open();
+}
+function handleEdit(row?: TAgentEnterpriseModel) {
+  editModalApi.setData({ data: row, isUpdate: !!row }).open();
+}
+async function handleDelete(row: TAgentEnterpriseModel) {
+  await Delete({ deptId: row.deptId });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const deptIds: number[] = rows.map((row) => row.deptId);
+  if (deptIds.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    centered: true,
+    content: `确认删除选中的${deptIds.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ deptId: deptIds[0]! });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '代理商企业', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="代理商企业">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleEdit(undefined)"
+          v-access:code="'cpm:iot:tAgentEnterprise:edit'"
+        >
+          新增
+        </Button>
+        <Button
+          v-if="selectRows.length > 0"
+          class="mr-2 flex items-center"
+          type="primary"
+          danger
+          :icon="h(MdiDelete)"
+          @click="handleMultiDelete"
+          v-access:code="'cpm:iot:tAgentEnterprise:delete'"
+        >
+          删除
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+          v-access:code="'cpm:iot:tAgentEnterprise:export'"
+        >
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:iot:tAgentEnterprise:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:iot:tAgentEnterprise:edit'"
+          >
+            修改
+          </Button>
+          <AccessControl
+            :codes="['cpm:iot:tAgentEnterprise:delete']"
+            type="code"
+          >
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/model.tsx
new file mode 100644
index 0000000..1310dec
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/model.tsx
@@ -0,0 +1,252 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { z } from '@vben/common-ui';
+
+import { renderPopoverMemberSumma } from '#/utils';
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'InputNumber',
+    label: '主键ID',
+    componentProps: {
+      placeholder: '请输入主键ID',
+    },
+  },
+  {
+    fieldName: 'createdAt',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      valueFormat: 'YYYY-MM-DD',
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  {
+    title: '主键ID',
+    field: 'id',
+    minWidth: 120,
+  },
+  {
+    title: '部门机构id',
+    field: 'deptId',
+    minWidth: 120,
+  },
+  {
+    title: '单位全称',
+    field: 'fullName',
+    minWidth: 120,
+  },
+  {
+    title: '行业',
+    field: 'industry',
+    minWidth: 120,
+  },
+  {
+    title: '法人名称',
+    field: 'legalPersonName',
+    minWidth: 120,
+  },
+  {
+    title: '法人身份证号',
+    field: 'legalPersonIdCard',
+    minWidth: 120,
+  },
+  {
+    title: '单位类型',
+    field: 'companyType',
+    minWidth: 120,
+  },
+  {
+    title: '单位成立时间',
+    field: 'establishTime',
+    minWidth: 120,
+  },
+  {
+    title: '开户行名称',
+    field: 'bankName',
+    minWidth: 120,
+  },
+  {
+    title: '开户行账号',
+    field: 'bankAccount',
+    minWidth: 120,
+  },
+  {
+    title: '租户ID',
+    field: 'tenantId',
+    minWidth: 120,
+  },
+  {
+    title: '创建部门',
+    field: 'createdDept',
+    minWidth: 120,
+  },
+  {
+    title: '创建者',
+    field: 'createdBy',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderPopoverMemberSumma(row.createdBySumma);
+      },
+    },
+  },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    minWidth: 120,
+  },
+  {
+    title: '更新者',
+    field: 'updatedBy',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderPopoverMemberSumma(row.updatedBySumma);
+      },
+    },
+  },
+  {
+    title: '更新时间',
+    field: 'updatedAt',
+    minWidth: 120,
+  },
+  { title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'deptId',
+    component: 'InputNumber',
+    label: '部门机构id',
+    componentProps: {
+      placeholder: '请输入部门机构id',
+    },
+    rules: z.number({
+      required_error: '请输入部门机构id',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'fullName',
+    component: 'Input',
+    label: '单位全称',
+    componentProps: {
+      placeholder: '请输入单位全称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'industry',
+    component: 'Input',
+    label: '行业',
+    componentProps: {
+      placeholder: '请输入行业',
+    },
+  },
+  {
+    fieldName: 'legalPersonName',
+    component: 'Input',
+    label: '法人名称',
+    componentProps: {
+      placeholder: '请输入法人名称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'legalPersonIdCard',
+    component: 'Input',
+    label: '法人身份证号',
+    componentProps: {
+      placeholder: '请输入法人身份证号',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'companyType',
+    component: 'Input',
+    label: '单位类型',
+    componentProps: {
+      placeholder: '请输入单位类型',
+    },
+  },
+  {
+    fieldName: 'establishTime',
+    component: 'DatePicker',
+    label: '单位成立时间',
+    componentProps: {
+      type: 'date',
+      clearable: true,
+      shortcuts: 'FMDate',
+    },
+  },
+  {
+    fieldName: 'bankName',
+    component: 'Input',
+    label: '开户行名称',
+    componentProps: {
+      placeholder: '请输入开户行名称',
+    },
+  },
+  {
+    fieldName: 'bankAccount',
+    component: 'Input',
+    label: '开户行账号',
+    componentProps: {
+      placeholder: '请输入开户行账号',
+    },
+  },
+  {
+    fieldName: 'tenantId',
+    component: 'Input',
+    label: '租户ID',
+    componentProps: {
+      placeholder: '请输入租户ID',
+    },
+    rules: 'required',
+  },
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'id', label: '主键ID' },
+  { field: 'deptId', label: '部门机构id' },
+  { field: 'fullName', label: '单位全称' },
+  { field: 'industry', label: '行业' },
+  { field: 'legalPersonName', label: '法人名称' },
+  { field: 'legalPersonIdCard', label: '法人身份证号' },
+  { field: 'companyType', label: '单位类型' },
+  { field: 'establishTime', label: '单位成立时间' },
+  { field: 'bankName', label: '开户行名称' },
+  { field: 'bankAccount', label: '开户行账号' },
+  { field: 'tenantId', label: '租户ID' },
+  { field: 'createdDept', label: '创建部门' },
+  { field: 'createdBy', label: '创建者' },
+  { field: 'createdAt', label: '创建时间' },
+  { field: 'updatedBy', label: '更新者' },
+  { field: 'updatedAt', label: '更新时间' },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/view.vue
new file mode 100644
index 0000000..c5bdf68
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise/view.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { TAgentEnterpriseModel } from '#/api/iotlcm/zAnother/tAgentEnterprise/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/zAnother/tAgentEnterprise';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { ViewDescSchema } from './model';
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: TAgentEnterpriseModel };
+  const record = await View({ deptId: row.deptId });
+  setDescProps({ data: record }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: ViewDescSchema,
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/edit.vue
new file mode 100644
index 0000000..ccf35a5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/edit.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { TCustWithdrawAccountModel } from '#/api/iotlcm/zAnother/tCustWithdrawAccount/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/zAnother/tCustWithdrawAccount';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data: TCustWithdrawAccountModel;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  if (data.isUpdate) {
+    try {
+      const res = await View({ id: data.data.id });
+      await formApi.setValues(res);
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(
+        Edit(value as TCustWithdrawAccountModel),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '操作成功',
+          emit: () => {
+            emit('confirm');
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/index.vue
new file mode 100644
index 0000000..5d930aa
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/index.vue
@@ -0,0 +1,192 @@
+<script lang="ts" setup>
+import type { TCustWithdrawAccountModel } from '#/api/iotlcm/zAnother/tCustWithdrawAccount/type';
+
+import { h, ref } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  Delete,
+  Export,
+  List,
+} from '#/api/iotlcm/zAnother/tCustWithdrawAccount';
+import BetterVben from '#/constants/BetterVben';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<TCustWithdrawAccountModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TCustWithdrawAccountModel) {
+  viewModalApi.setData({ row }).open();
+}
+function handleEdit(row?: TCustWithdrawAccountModel) {
+  editModalApi.setData({ data: row, isUpdate: !!row }).open();
+}
+async function handleDelete(row: TCustWithdrawAccountModel) {
+  await Delete({ id: [row.id] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: number[] = rows.map((row) => row.id);
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    centered: true,
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ id: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '客户提现账户', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="客户提现账户">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleEdit(undefined)"
+          v-access:code="'cpm:iot:tCustWithdrawAccount:edit'"
+        >
+          新增
+        </Button>
+        <Button
+          v-if="selectRows.length > 0"
+          class="mr-2 flex items-center"
+          type="primary"
+          danger
+          :icon="h(MdiDelete)"
+          @click="handleMultiDelete"
+          v-access:code="'cpm:iot:tCustWithdrawAccount:delete'"
+        >
+          删除
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+          v-access:code="'cpm:iot:tCustWithdrawAccount:export'"
+        >
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:iot:tCustWithdrawAccount:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:iot:tCustWithdrawAccount:edit'"
+          >
+            修改
+          </Button>
+          <AccessControl
+            :codes="['cpm:iot:tCustWithdrawAccount:delete']"
+            type="code"
+          >
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/model.tsx
new file mode 100644
index 0000000..4b2c595
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/model.tsx
@@ -0,0 +1,270 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { z } from '@vben/common-ui';
+
+import { renderDict, renderPopoverMemberSumma } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'InputNumber',
+    label: '主键ID',
+    componentProps: {
+      placeholder: '请输入主键ID',
+    },
+  },
+  {
+    fieldName: 'status',
+    component: 'Select',
+    label: '状态：0-禁用 1-正常',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择状态：0-禁用 1-正常',
+      options: getDictOptions('sys_common_status'),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'createdAt',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      type: 'datetimerange',
+      clearable: true,
+      valueFormat: 'YYYY-MM-DD',
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  {
+    title: '主键ID',
+    field: 'id',
+    minWidth: 120,
+  },
+  {
+    title: '企业客户ID',
+    field: 'deptId',
+    minWidth: 120,
+  },
+  {
+    title: '提现账号类型，1：支付宝，2：微信',
+    field: 'accountType',
+    minWidth: 120,
+  },
+  {
+    title: '账户名称/真实姓名',
+    field: 'accountName',
+    minWidth: 120,
+  },
+  {
+    title: '手机号',
+    field: 'mobile',
+    minWidth: 120,
+  },
+  {
+    title: '是否默认账号：0-否 1-是',
+    field: 'isDefault',
+    minWidth: 120,
+  },
+  {
+    title: '是否启用：0-未启用 1-启用',
+    field: 'enabled',
+    minWidth: 120,
+  },
+  {
+    title: '状态：0-禁用 1-正常',
+    field: 'status',
+    params: { dictType: 'sys_common_status' },
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.status, 'sys_common_status');
+      },
+    },
+  },
+  {
+    title: '租户ID',
+    field: 'tenantId',
+    minWidth: 120,
+  },
+  {
+    title: '创建部门ID',
+    field: 'createdDept',
+    minWidth: 120,
+  },
+  {
+    title: '创建者ID',
+    field: 'createdBy',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderPopoverMemberSumma(row.createdBySumma);
+      },
+    },
+  },
+  {
+    title: '创建时间',
+    field: 'createdAt',
+    minWidth: 120,
+  },
+  {
+    title: '更新者ID',
+    field: 'updatedBy',
+    minWidth: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderPopoverMemberSumma(row.updatedBySumma);
+      },
+    },
+  },
+  {
+    title: '更新时间',
+    field: 'updatedAt',
+    minWidth: 120,
+  },
+  { title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: '主键ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'deptId',
+    component: 'InputNumber',
+    label: '企业客户ID',
+    componentProps: {
+      placeholder: '请输入企业客户ID',
+    },
+    rules: z.number({
+      required_error: '请输入企业客户ID',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'accountType',
+    component: 'InputNumber',
+    label: '提现账号类型，1：支付宝，2：微信',
+    componentProps: {
+      placeholder: '请输入提现账号类型，1：支付宝，2：微信',
+    },
+    rules: z.number({
+      required_error: '请输入提现账号类型，1：支付宝，2：微信',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'accountNo',
+    component: 'Input',
+    label: '账号',
+    componentProps: {
+      placeholder: '请输入账号',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'accountName',
+    component: 'Input',
+    label: '账户名称/真实姓名',
+    componentProps: {
+      placeholder: '请输入账户名称/真实姓名',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'mobile',
+    component: 'Input',
+    label: '手机号',
+    componentProps: {
+      placeholder: '请输入手机号',
+    },
+    rules: z.string().regex(/^1[3-9]\d{9}$/, '无效手机号格式'),
+  },
+  {
+    fieldName: 'isDefault',
+    component: 'InputNumber',
+    label: '是否默认账号：0-否 1-是',
+    componentProps: {
+      placeholder: '请输入是否默认账号：0-否 1-是',
+    },
+    rules: z.number({
+      required_error: '请输入是否默认账号：0-否 1-是',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'enabled',
+    component: 'InputNumber',
+    label: '是否启用：0-未启用 1-启用',
+    componentProps: {
+      placeholder: '请输入是否启用：0-未启用 1-启用',
+    },
+    rules: z.number({
+      required_error: '请输入是否启用：0-未启用 1-启用',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'status',
+    component: 'Select',
+    label: '状态：0-禁用 1-正常',
+    defaultValue: null,
+    componentProps: {
+      placeholder: '请选择状态：0-禁用 1-正常',
+      options: getDictOptions('sys_common_status'),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    fieldName: 'tenantId',
+    component: 'Input',
+    label: '租户ID',
+    componentProps: {
+      placeholder: '请输入租户ID',
+    },
+    rules: 'required',
+  },
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'id', label: '主键ID' },
+  { field: 'deptId', label: '企业客户ID' },
+  { field: 'accountType', label: '提现账号类型，1：支付宝，2：微信' },
+  { field: 'accountNo', label: '账号' },
+  { field: 'accountName', label: '账户名称/真实姓名' },
+  { field: 'mobile', label: '手机号' },
+  { field: 'isDefault', label: '是否默认账号：0-否 1-是' },
+  { field: 'enabled', label: '是否启用：0-未启用 1-启用' },
+  {
+    field: 'status',
+    label: '状态：0-禁用 1-正常',
+    render(row: any) {
+      return renderDict(row.status, 'sys_common_status');
+    },
+  },
+  { field: 'tenantId', label: '租户ID' },
+  { field: 'createdDept', label: '创建部门ID' },
+  { field: 'createdBy', label: '创建者ID' },
+  { field: 'createdAt', label: '创建时间' },
+  { field: 'updatedBy', label: '更新者ID' },
+  { field: 'updatedAt', label: '更新时间' },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/view.vue
new file mode 100644
index 0000000..9b2123b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount/view.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { TCustWithdrawAccountModel } from '#/api/iotlcm/zAnother/tCustWithdrawAccount/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/zAnother/tCustWithdrawAccount';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { ViewDescSchema } from './model';
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: TCustWithdrawAccountModel };
+  const record = await View({ id: row.id });
+  setDescProps({ data: record }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: ViewDescSchema,
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/edit.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/edit.vue
new file mode 100644
index 0000000..94d0cc0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/edit.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { TDivisionCodeModel } from '#/api/iotlcm/zAnother/tDivisionCode/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/zAnother/tDivisionCode';
+import BetterVben from '#/constants/BetterVben';
+
+import { EditFormSchema } from './model';
+
+/** ====================  类型  ==================== */
+interface ModalProps {
+  data: TDivisionCodeModel;
+  isUpdate: boolean;
+}
+
+/** ====================  常量  ==================== */
+const emit = defineEmits<{ confirm: [] }>();
+
+/** ====================  数据  ==================== */
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  方法  ==================== */
+async function handleOpen() {
+  const data = modalApi.getData() as ModalProps;
+  isUpdate.value = data.isUpdate;
+  if (data.isUpdate) {
+    try {
+      const res = await View({ regionId: data.data.regionId });
+      await formApi.setValues(res);
+    } catch (error) {
+      message.error('数据加载失败');
+      console.error(error);
+    }
+  }
+}
+
+async function handleConfirm() {
+  try {
+    const [flag, value] = await BetterVben.function.formValidate(formApi);
+    if (flag) {
+      await BetterVben.function.formSubmit(
+        Edit(value as TDivisionCodeModel),
+        modalApi,
+        {
+          autoClose: true,
+          successMessage: '操作成功',
+          emit: () => {
+            emit('confirm');
+          },
+        },
+      );
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/** ====================  组件  ==================== */
+const [Form, formApi] = useVbenForm({
+  ...BetterVben.form.default,
+  schema: EditFormSchema,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onCancel: handleCancel,
+  async onConfirm() {
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleConfirm();
+    });
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    await BetterVben.function.modalAutoLoadAsync(modalApi, async () => {
+      await handleOpen();
+    });
+  },
+});
+</script>
+<template>
+  <Modal :title="title">
+    <Form />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/index.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/index.vue
new file mode 100644
index 0000000..b75c1b9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/index.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { TDivisionCodeModel } from '#/api/iotlcm/zAnother/tDivisionCode/type';
+
+import { h, ref } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiExport, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { Delete, Export, List } from '#/api/iotlcm/zAnother/tDivisionCode';
+import BetterVben from '#/constants/BetterVben';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+
+import editModal from './edit.vue';
+import { IndexGridColumns, IndexGridSchema } from './model';
+import viewModal from './view.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+/** 表格选中行 */
+const selectRows = ref<TDivisionCodeModel[]>([]);
+
+/** ====================  方法  ==================== */
+function handlePreview(row: TDivisionCodeModel) {
+  viewModalApi.setData({ row }).open();
+}
+function handleEdit(row?: TDivisionCodeModel) {
+  editModalApi.setData({ data: row, isUpdate: !!row }).open();
+}
+async function handleDelete(row: TDivisionCodeModel) {
+  await Delete({ regionId: [row.regionId] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const regionIds: number[] = rows.map((row) => row.regionId);
+  if (regionIds.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    centered: true,
+    content: `确认删除选中的${regionIds.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ regionId: regionIds });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '行政区划', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+
+/** ====================  组件  ==================== */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    ...(BetterVben.grid.formOptions.default as any),
+    schema: IndexGridSchema,
+  },
+  gridOptions: {
+    ...(BetterVben.grid.gridOptions.default as any),
+    columns: IndexGridColumns,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          selectRows.value = [];
+          return await List({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+});
+BetterVben.function.gridCheckBoxInit(gridApi, selectRows);
+
+const [EditModal, editModalApi] = useVbenModal({
+  connectedComponent: editModal,
+});
+
+const [ViewModal, viewModalApi] = useVbenModal({
+  connectedComponent: viewModal,
+});
+/** ====================  周期  ==================== */
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="行政区划">
+      <template #toolbar-tools>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiPlus)"
+          @click="handleEdit(undefined)"
+          v-access:code="'cpm:iot:tDivisionCode:edit'"
+        >
+          新增
+        </Button>
+        <Button
+          v-if="selectRows.length > 0"
+          class="mr-2 flex items-center"
+          type="primary"
+          danger
+          :icon="h(MdiDelete)"
+          @click="handleMultiDelete"
+          v-access:code="'cpm:iot:tDivisionCode:delete'"
+        >
+          删除
+        </Button>
+        <Button
+          class="mr-2 flex items-center"
+          type="primary"
+          :icon="h(MdiExport)"
+          @click="handleExport"
+          v-access:code="'cpm:iot:tDivisionCode:export'"
+        >
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handlePreview(row)"
+            v-access:code="'cpm:iot:tDivisionCode:view'"
+          >
+            查看
+          </Button>
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleEdit(row)"
+            v-access:code="'cpm:iot:tDivisionCode:edit'"
+          >
+            修改
+          </Button>
+          <AccessControl :codes="['cpm:iot:tDivisionCode:delete']" type="code">
+            <Popconfirm
+              title="确定删除吗？"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              @confirm="handleDelete(row)"
+            >
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <EditModal @confirm="handleRefresh" />
+    <ViewModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/model.tsx b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/model.tsx
new file mode 100644
index 0000000..3663988
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/model.tsx
@@ -0,0 +1,127 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+
+import { z } from '@vben/common-ui';
+
+// 表格搜索表单
+export const IndexGridSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'regionCode',
+    component: 'Input',
+    label: '行政区域代码',
+    componentProps: {
+      placeholder: '请输入行政区域代码',
+    },
+  },
+];
+
+// 表格列
+export const IndexGridColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 50,
+  },
+  {
+    title: 'ID',
+    field: 'regionId',
+    minWidth: 120,
+  },
+  {
+    title: '行政区域代码',
+    field: 'regionCode',
+    minWidth: 120,
+  },
+  {
+    title: '行政区域名称',
+    field: 'regionName',
+    minWidth: 120,
+  },
+  {
+    title: '等级',
+    field: 'regionLevel',
+    minWidth: 120,
+  },
+  {
+    title: '上级代码',
+    field: 'regionParent',
+    minWidth: 120,
+  },
+  {
+    title: '城乡分类代码',
+    field: 'regionType',
+    minWidth: 120,
+  },
+  { title: '操作', width: 120, slots: { default: 'action' }, fixed: 'right' },
+];
+
+// 编辑字段列表
+export const EditFormSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'regionId',
+    component: 'Input',
+    label: 'ID',
+    dependencies: { show: () => false, triggerFields: [''] },
+    componentProps: {
+      placeholder: '',
+    },
+  },
+  {
+    fieldName: 'regionCode',
+    component: 'Input',
+    label: '行政区域代码',
+    componentProps: {
+      placeholder: '请输入行政区域代码',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'regionName',
+    component: 'Input',
+    label: '行政区域名称',
+    componentProps: {
+      placeholder: '请输入行政区域名称',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'regionLevel',
+    component: 'InputNumber',
+    label: '等级',
+    componentProps: {
+      placeholder: '请输入等级',
+    },
+    rules: z.number({
+      required_error: '请输入等级',
+      invalid_type_error: '无效数字',
+    }),
+  },
+  {
+    fieldName: 'regionParent',
+    component: 'Input',
+    label: '上级代码',
+    componentProps: {
+      placeholder: '请输入上级代码',
+    },
+    rules: 'required',
+  },
+  {
+    fieldName: 'regionType',
+    component: 'Input',
+    label: '城乡分类代码',
+    componentProps: {
+      placeholder: '请输入城乡分类代码',
+    },
+  },
+];
+
+// 查看字段列表
+export const ViewDescSchema: DescItem[] = [
+  { field: 'regionId', label: 'ID' },
+  { field: 'regionCode', label: '行政区域代码' },
+  { field: 'regionName', label: '行政区域名称' },
+  { field: 'regionLevel', label: '等级' },
+  { field: 'regionParent', label: '上级代码' },
+  { field: 'regionType', label: '城乡分类代码' },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/view.vue b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/view.vue
new file mode 100644
index 0000000..11a82d4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode/view.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { TDivisionCodeModel } from '#/api/iotlcm/zAnother/tDivisionCode/type';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { View } from '#/api/iotlcm/zAnother/tDivisionCode';
+import { Description, useDescription } from '#/components/description';
+import BetterVben from '#/constants/BetterVben';
+
+import { ViewDescSchema } from './model';
+/** ====================  方法  ==================== */
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { row } = modalApi.getData() as { row: TDivisionCodeModel };
+  const record = await View({ regionId: row.regionId });
+  setDescProps({ data: record }, true);
+}
+
+/** ====================  组件  ==================== */
+const [Modal, modalApi] = useVbenModal({
+  ...BetterVben.modal.default,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: ViewDescSchema,
+});
+</script>
+<template>
+  <Modal title="查看" :footer="false">
+    <Description @register="registerDescription" />
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/command-chart.vue b/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/command-chart.vue
new file mode 100644
index 0000000..4c8f4e3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/command-chart.vue
@@ -0,0 +1,82 @@
+<!--
+ * @description 缓存监控-命令统计图表组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts">
+import type { PropType } from 'vue';
+
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+export default defineComponent({
+  components: { EchartsUI },
+  props: {
+    data: {
+      default: () => [],
+      type: Array as PropType<{ name: string; value: string }[]>,
+    },
+  },
+  setup(props, { expose }) {
+    expose({});
+
+    const chartRef = ref<EchartsUIType>();
+    const { renderEcharts, resize } = useEcharts(chartRef);
+
+    watch(
+      () => props.data,
+      () => {
+        if (!chartRef.value) return;
+        setEchartsOption(props.data);
+      },
+      { immediate: true },
+    );
+
+    onMounted(() => {
+      setEchartsOption(props.data);
+    });
+    /**
+     * 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
+     * 该饼图组件需要关闭animation
+     */
+    onActivated(() => resize());
+
+    type EChartsOption = Parameters<typeof renderEcharts>['0'];
+    function setEchartsOption(data: any[]) {
+      const option: EChartsOption = {
+        series: [
+          {
+            animationDuration: 1000,
+            animationEasing: 'cubicInOut',
+            center: ['50%', '50%'],
+            data,
+            name: '命令',
+            radius: [15, 95],
+            roseType: 'radius',
+            type: 'pie',
+          },
+        ],
+        tooltip: {
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
+          trigger: 'item',
+        },
+      };
+      renderEcharts(option);
+    }
+
+    return {
+      chartRef,
+    };
+  },
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" height="400px" width="100%" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/index.ts b/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/index.ts
new file mode 100644
index 0000000..4fb0e3a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/index.ts
@@ -0,0 +1,11 @@
+/**
+ * @description 缓存监控组件导出
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+export { default as CommandChart } from './command-chart.vue';
+export { default as MemoryChart } from './memory-chart.vue';
+export { default as RedisDescription } from './redis-description.vue';
diff --git a/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/memory-chart.vue b/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/memory-chart.vue
new file mode 100644
index 0000000..7a165ac
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/memory-chart.vue
@@ -0,0 +1,106 @@
+<!--
+ * @description 缓存监控-内存使用图表组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts">
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+export default defineComponent({
+  components: { EchartsUI },
+  props: {
+    data: {
+      default: '0',
+      type: String,
+    },
+  },
+  setup(props, { expose }) {
+    expose({});
+
+    const memoryHtmlRef = ref<EchartsUIType>();
+    const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
+
+    watch(
+      () => props.data,
+      () => {
+        if (!memoryHtmlRef.value) return;
+        setEchartsOption(props.data);
+      },
+      { immediate: true },
+    );
+
+    onMounted(() => {
+      setEchartsOption(props.data);
+    });
+    // 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
+    onActivated(resize);
+
+    /**
+     * 获取最近的十的幂次
+     * 该函数用于寻找大于给定数字num的最近的10的幂次
+     * 主要解决的问题是确定一个数附近较大的十的幂次，这在某些算法中很有用
+     *
+     * @param num {number} 输入的数字，用于寻找最近的十的幂次
+     */
+    function getNearestPowerOfTen(num: number) {
+      let power = 10;
+      while (power <= num) {
+        power *= 10;
+      }
+      return power;
+    }
+
+    type EChartsOption = Parameters<typeof renderEcharts>['0'];
+    function setEchartsOption(value: string) {
+      // x10
+      const formattedValue = Math.floor(Number.parseFloat(value));
+      // 最大值 10以内取10  100以内取100 以此类推
+      const max = getNearestPowerOfTen(formattedValue);
+      const options: EChartsOption = {
+        series: [
+          {
+            animation: true,
+            animationDuration: 1000,
+            data: [
+              {
+                name: '内存消耗',
+                value: Number.parseFloat(value),
+              },
+            ],
+            detail: {
+              formatter: `${value}M`,
+              valueAnimation: true,
+            },
+            max,
+            min: 0,
+            name: '峰值',
+            progress: {
+              show: true,
+            },
+            type: 'gauge',
+          },
+        ],
+        tooltip: {
+          formatter: `{b} <br/>{a} : ${value}M`,
+        },
+      };
+      renderEcharts(options);
+    }
+
+    return {
+      memoryHtmlRef,
+    };
+  },
+});
+</script>
+
+<template>
+  <EchartsUI ref="memoryHtmlRef" height="400px" width="100%" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/redis-description.vue b/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/redis-description.vue
new file mode 100644
index 0000000..fcbf9b0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/monitor/cache/components/redis-description.vue
@@ -0,0 +1,112 @@
+<!--
+ * @description 缓存监控-Redis信息描述组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { RedisInfo } from '#/api/monitor';
+
+import type { DescItem } from '#/components/description';
+
+import { onMounted, watch } from 'vue';
+
+import { Description, useDescription } from '#/components/description';
+
+interface IRedisInfo extends RedisInfo {
+  dbSize: string;
+}
+
+const props = defineProps({
+  data: {
+    required: true,
+    type: Object as PropType<IRedisInfo>,
+  },
+});
+
+const descSchemas: DescItem[] = [
+  { field: 'redis_version', label: 'redis版本' },
+  {
+    field: 'redis_mode',
+    label: 'redis模式',
+    render(value) {
+      return value === 'standalone' ? '单机模式' : '集群模式';
+    },
+  },
+  {
+    field: 'tcp_port',
+    label: 'tcp端口',
+  },
+  {
+    field: 'connected_clients',
+    label: '客户端数',
+  },
+  {
+    field: 'uptime_in_days',
+    label: '运行时间',
+    render(value) {
+      return `${value}天`;
+    },
+  },
+  {
+    field: 'used_memory_human',
+    label: '使用内存',
+  },
+  {
+    field: 'used_cpu_user_children',
+    label: '使用CPU',
+    render(value) {
+      return Number.parseFloat(value).toFixed(2);
+    },
+  },
+  {
+    field: 'maxmemory_human',
+    label: '内存配置',
+  },
+  {
+    field: 'aof_enabled',
+    label: 'AOF是否开启',
+    render(value) {
+      return value === '0' ? '否' : '是';
+    },
+  },
+  {
+    field: 'rdb_last_bgsave_status',
+    label: 'RDB是否成功',
+  },
+  {
+    field: 'dbSize',
+    label: 'Key数量',
+  },
+  {
+    field: 'instantaneous_input_kbps',
+    label: '网络入口/出口',
+    render(_, data) {
+      const { instantaneous_input_kbps, instantaneous_output_kbps } = data;
+      return `${instantaneous_input_kbps}kps/${instantaneous_output_kbps}kps`;
+    },
+  },
+];
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: { lg: 4, md: 3, sm: 1, xl: 4, xs: 1 },
+  schema: descSchemas,
+});
+
+onMounted(() => setDescProps({ data: props.data }));
+
+watch(
+  () => props.data,
+  (data) => {
+    setDescProps({ data });
+  },
+);
+</script>
+
+<template>
+  <Description @register="registerDescription" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/monitor/cache/index.vue b/admin-ui/vue/apps/web-antd/src/views/monitor/cache/index.vue
new file mode 100644
index 0000000..ed876bb
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/monitor/cache/index.vue
@@ -0,0 +1,139 @@
+<!--
+ * @description 缓存监控页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { RedisInfo } from '#/api/monitor/cache';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { AccessControl } from '@vben/access';
+import { Page } from '@vben/common-ui';
+import { CommandLineIcon, MemoryIcon, RedisIcon } from '@vben/icons';
+
+import { Button, Card, Col, message, Modal, Row } from 'ant-design-vue';
+
+import { rebuildMemoryCache, redisCacheInfo } from '#/api/monitor/cache';
+import { useCacheStore } from '#/store/cache';
+import { useDictStore } from '#/store/dict';
+
+import { CommandChart, MemoryChart, RedisDescription } from './components';
+
+const baseSpan = { lg: 12, md: 24, sm: 24, xl: 12, xs: 24 };
+
+const chartData = reactive<{
+  command: { name: string; value: string }[];
+  memory: string;
+}>({
+  command: [],
+  memory: '0',
+});
+
+interface IRedisInfo extends RedisInfo {
+  dbSize: string;
+}
+const redisInfo = ref<IRedisInfo>();
+
+onMounted(async () => {
+  await loadInfo();
+});
+
+async function rebuildMemory() {
+  Modal.confirm({
+    title: '确认重建内存缓存？',
+    content: '将重新加载字典、菜单、角色、部门等系统内存数据。',
+    async onOk() {
+      await rebuildMemoryCache();
+      useCacheStore().clearCache('dictList');
+      useCacheStore().clearCache('menmenuuList');
+      useDictStore().resetCache();
+      message.success('内存缓存重建成功，页面将刷新');
+      window.location.reload();
+    },
+  });
+}
+
+async function loadInfo() {
+  try {
+    const ret = await redisCacheInfo();
+
+    // 单位MB 保留两位小数
+    const usedMemory = (
+      Number.parseInt(ret.info.used_memory!) /
+      1024 /
+      1024
+    ).toFixed(2);
+    chartData.memory = usedMemory;
+    // 命令统计
+    chartData.command = ret.commandStats;
+    // redis信息
+    redisInfo.value = { ...ret.info, dbSize: String(ret.dbSize) };
+  } catch (error) {
+    console.warn(error);
+  }
+}
+</script>
+
+<template>
+  <Page>
+    <Row :gutter="[15, 15]">
+      <Col :span="24">
+        <Card size="small">
+          <template #title>
+            <div class="flex items-center justify-start gap-[6px]">
+              <RedisIcon class="size-[16px]" />
+              <span>redis信息</span>
+            </div>
+          </template>
+          <template #extra>
+            <div class="flex items-center gap-2">
+              <AccessControl :codes="['cpr:superadmin']" type="code">
+                <Button size="small" type="primary" @click="rebuildMemory">
+                  重建内存缓存
+                </Button>
+              </AccessControl>
+              <Button size="small" @click="loadInfo">
+                <div class="flex">
+                  <span class="icon-[charm--refresh]"></span>
+                </div>
+              </Button>
+            </div>
+          </template>
+          <RedisDescription v-if="redisInfo" :data="redisInfo" />
+        </Card>
+      </Col>
+      <Col v-bind="baseSpan">
+        <Card size="small">
+          <template #title>
+            <div class="flex items-center gap-[6px]">
+              <CommandLineIcon class="size-[16px]" />
+              <span>命令统计</span>
+            </div>
+          </template>
+          <CommandChart
+            v-if="chartData.command.length > 0"
+            :data="chartData.command"
+          />
+        </Card>
+      </Col>
+      <Col v-bind="baseSpan">
+        <Card size="small">
+          <template #title>
+            <div class="flex items-center justify-start gap-[6px]">
+              <MemoryIcon class="size-[16px]" />
+              <span>内存占用</span>
+            </div>
+          </template>
+          <MemoryChart
+            v-if="chartData.memory !== '0'"
+            :data="chartData.memory"
+          />
+        </Card>
+      </Col>
+    </Row>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/monitor/full-sync/index.test.ts b/admin-ui/vue/apps/web-antd/src/views/monitor/full-sync/index.test.ts
new file mode 100644
index 0000000..0fb45ea
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/monitor/full-sync/index.test.ts
@@ -0,0 +1,373 @@
+import type { VueWrapper } from '@vue/test-utils';
+
+import { flushPromises, mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const api = vi.hoisted(() => ({
+  getFullSyncRun: vi.fn(),
+  getFullSyncReplay: vi.fn(),
+  listFullSyncChannels: vi.fn(),
+  listFullSyncFailures: vi.fn(),
+  listFullSyncRuns: vi.fn(),
+  startFullSync: vi.fn(),
+  replayFullSync: vi.fn(),
+}));
+const access = vi.hoisted(() => ({
+  admin: true,
+  codes: ['cpm:iot:fullSyncRuns:replay', 'cpm:iot:fullSyncRuns:replay:view'],
+}));
+
+vi.mock('#/api/monitor', () => api);
+vi.mock('@vben/access', async () => {
+  const { defineComponent, h } = await import('vue');
+  return {
+    AccessControl: defineComponent({
+      setup:
+        (_, { slots }) =>
+        () =>
+          h('div', slots.default?.()),
+    }),
+    useAccess: () => ({
+      hasAccessByCodes: (codes: string[]) =>
+        codes.some((code) => access.codes.includes(code)),
+      hasAccessByRoles: () => access.admin,
+    }),
+  };
+});
+vi.mock('@vben/common-ui', async () => {
+  const { defineComponent, h } = await import('vue');
+  return {
+    Page: defineComponent({
+      setup:
+        (_, { slots }) =>
+        () =>
+          h('main', slots.default?.()),
+    }),
+  };
+});
+vi.mock('ant-design-vue', async () => {
+  const { defineComponent, h } = await import('vue');
+  const container = defineComponent({
+    setup:
+      (_, { slots }) =>
+      () =>
+        h('div', slots.default?.()),
+  });
+  const descriptions = Object.assign(container, { Item: container });
+  return {
+    Alert: defineComponent({
+      props: ['message', 'description'],
+      setup: (props) => () => h('div', `${props.message} ${props.description}`),
+    }),
+    Button: defineComponent({
+      setup:
+        (_, { slots }) =>
+        () =>
+          h('button', slots.default?.()),
+    }),
+    Descriptions: descriptions,
+    Drawer: defineComponent({
+      props: ['open', 'title'],
+      setup:
+        (props, { slots }) =>
+        () =>
+          props.open ? h('section', [props.title, slots.default?.()]) : null,
+    }),
+    Empty: container,
+    InputNumber: defineComponent({
+      props: ['value', 'min', 'max'],
+      emits: ['update:value'],
+      setup:
+        (props, { emit }) =>
+        () =>
+          h('input', {
+            type: 'number',
+            value: props.value,
+            min: props.min,
+            max: props.max,
+            onInput: (event: Event) => {
+              const value = (event.target as HTMLInputElement).value;
+              emit('update:value', value === '' ? null : Number(value));
+            },
+          }),
+    }),
+    Modal: defineComponent({
+      props: ['open', 'title', 'okButtonProps', 'okText'],
+      emits: ['ok'],
+      setup:
+        (props, { slots, emit }) =>
+        () =>
+          props.open
+            ? h('section', [
+                h('h2', props.title),
+                slots.default?.(),
+                h(
+                  'button',
+                  {
+                    disabled: props.okButtonProps?.disabled,
+                    onClick: () => emit('ok'),
+                  },
+                  props.okText,
+                ),
+              ])
+            : null,
+    }),
+    Select: defineComponent({
+      props: ['options', 'value', 'mode'],
+      emits: ['update:value', 'change'],
+      setup:
+        (props, { emit }) =>
+        () =>
+          h(
+            'select',
+            {
+              value: props.value,
+              onChange: (event: Event) => {
+                const value = (event.target as HTMLSelectElement).value;
+                emit('update:value', value);
+                emit('change', value);
+              },
+            },
+            props.options?.map((item: { label: string; value: string }) =>
+              h('option', { value: item.value }, item.label),
+            ),
+          ),
+    }),
+    Space: container,
+    Table: defineComponent({
+      props: ['dataSource', 'columns'],
+      setup:
+        (props, { slots }) =>
+        () =>
+          h(
+            'div',
+            props.dataSource?.flatMap((record: unknown) =>
+              props.columns?.map((column: unknown) =>
+                slots.bodyCell?.({ record, column }),
+              ),
+            ),
+          ),
+    }),
+    Tag: container,
+    message: {
+      error: vi.fn(),
+      info: vi.fn(),
+      success: vi.fn(),
+      warning: vi.fn(),
+    },
+  };
+});
+
+import FullSyncPage from './index.vue';
+
+const kinds = [
+  [
+    'traffic_usage',
+    'current_month_usage_full_sync',
+    '启动流量同步',
+    '流量全量同步',
+  ],
+  [
+    'sim_status',
+    'sim_status_queue_full_sync',
+    '启动状态同步',
+    '卡状态全量同步',
+  ],
+  ['imei', 'imei_full_sync', '启动 IMEI 同步', 'IMEI 全量同步'],
+  [
+    'traffic_usage_daily',
+    'previous_day_usage_full_sync',
+    '启动日流量同步',
+    '日流量全量同步',
+  ],
+  [
+    'traffic_usage_monthly',
+    'previous_month_usage_full_sync',
+    '启动月流量历史同步',
+    '月流量历史全量同步',
+  ],
+] as const;
+
+function button(wrapper: VueWrapper, label: string) {
+  const found = wrapper.findAll('button').find((item) => item.text() === label);
+  if (!found) throw new Error(`Button not found: ${label}`);
+  return found;
+}
+
+function run(
+  operation = 'imei_full_sync',
+  status = 'completed_with_failures',
+  failedCount = 2,
+) {
+  return {
+    source: 'live',
+    run: {
+      runId: 'source-run-1',
+      operation,
+      status,
+      failedCount,
+      successCount: 5,
+    },
+  };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  access.admin = true;
+  access.codes = [
+    'cpm:iot:fullSyncRuns:replay',
+    'cpm:iot:fullSyncRuns:replay:view',
+  ];
+  api.listFullSyncRuns.mockResolvedValue({ items: [], total: 0 });
+  api.listFullSyncChannels.mockResolvedValue({ items: [] });
+  api.getFullSyncRun.mockResolvedValue(run());
+  api.startFullSync.mockResolvedValue({
+    runId: 'source-run-1',
+    scopeChannels: 0,
+  });
+  api.replayFullSync.mockResolvedValue({
+    replayRunId: 'replay-run-1',
+    status: 'accepted',
+  });
+  api.getFullSyncReplay.mockResolvedValue({
+    replayRunId: 'replay-run-1',
+    sourceRunId: 'source-run-1',
+    status: 'running',
+    enqueued: 2,
+    remaining: 1,
+  });
+});
+
+describe('full-sync page', () => {
+  it.each(kinds)(
+    'filters, labels and manually starts %s',
+    async (kind, operation, label, name) => {
+      api.listFullSyncRuns.mockResolvedValue({
+        items: [run(operation)],
+        total: 1,
+      });
+      const wrapper = mount(FullSyncPage);
+      try {
+        await flushPromises();
+        expect(wrapper.text()).toContain(name);
+        await wrapper.find('select').setValue(kind);
+        expect(api.listFullSyncRuns).toHaveBeenLastCalledWith({
+          syncKind: kind,
+          limit: 50,
+        });
+        await button(wrapper, label).trigger('click');
+        await flushPromises();
+        expect(wrapper.text()).toContain(`启动${name}`);
+        await button(wrapper, '启动全量同步').trigger('click');
+        await flushPromises();
+        expect(api.startFullSync).toHaveBeenCalledWith(kind, []);
+      } finally {
+        wrapper.unmount();
+      }
+    },
+  );
+
+  it.each(kinds)(
+    'disables the %s start while its operation is running',
+    async (_, operation, label) => {
+      api.listFullSyncRuns.mockResolvedValue({
+        items: [run(operation, 'running')],
+        total: 1,
+      });
+      const wrapper = mount(FullSyncPage);
+      try {
+        await flushPromises();
+        expect(button(wrapper, label).attributes('disabled')).toBeDefined();
+      } finally {
+        wrapper.unmount();
+      }
+    },
+  );
+
+  it.each([3, 20, 100, 0])(
+    'replays only the source Run ID with budget %i',
+    async (budget) => {
+      api.listFullSyncRuns.mockResolvedValue({ items: [run()], total: 1 });
+      const wrapper = mount(FullSyncPage);
+      try {
+        await flushPromises();
+        await button(wrapper, '详情').trigger('click');
+        await flushPromises();
+        await button(wrapper, '重投失败卡').trigger('click');
+        const input = wrapper.find('input[type="number"]');
+        expect((input.element as HTMLInputElement).value).toBe('3');
+        expect(input.attributes('max')).toBe('100');
+        await input.setValue(budget);
+        await button(wrapper, '确认重投').trigger('click');
+        await flushPromises();
+        expect(api.replayFullSync).toHaveBeenCalledWith('source-run-1', budget);
+        expect(api.getFullSyncReplay).toHaveBeenCalledWith('replay-run-1');
+        expect(wrapper.text()).toContain('重投 Run：replay-run-1');
+      } finally {
+        wrapper.unmount();
+      }
+    },
+  );
+
+  it.each(['', -1, 101, 1.5])(
+    'rejects invalid replay budget %s',
+    async (budget) => {
+      api.listFullSyncRuns.mockResolvedValue({ items: [run()], total: 1 });
+      const wrapper = mount(FullSyncPage);
+      try {
+        await flushPromises();
+        await button(wrapper, '详情').trigger('click');
+        await flushPromises();
+        await button(wrapper, '重投失败卡').trigger('click');
+        await wrapper.find('input[type="number"]').setValue(budget);
+        expect(
+          button(wrapper, '确认重投').attributes('disabled'),
+        ).toBeDefined();
+        expect(api.replayFullSync).not.toHaveBeenCalled();
+      } finally {
+        wrapper.unmount();
+      }
+    },
+  );
+
+  it.each(['role', 'permission'])(
+    'hides replay without the admin %s',
+    async (missing) => {
+      access.admin = missing !== 'role';
+      if (missing === 'permission') access.codes = [];
+      api.listFullSyncRuns.mockResolvedValue({ items: [run()], total: 1 });
+      const wrapper = mount(FullSyncPage);
+      try {
+        await flushPromises();
+        await button(wrapper, '详情').trigger('click');
+        await flushPromises();
+        expect(wrapper.text()).not.toContain('重投失败卡');
+      } finally {
+        wrapper.unmount();
+      }
+    },
+  );
+
+  it.each([
+    ['running', 2],
+    ['completed', 0],
+  ] as const)(
+    'cannot replay %s with %i failures',
+    async (status, failedCount) => {
+      const source = run('imei_full_sync', status, failedCount);
+      api.getFullSyncRun.mockResolvedValue(source);
+      api.listFullSyncRuns.mockResolvedValue({ items: [source], total: 1 });
+      const wrapper = mount(FullSyncPage);
+      try {
+        await flushPromises();
+        await button(wrapper, '详情').trigger('click');
+        await flushPromises();
+        expect(
+          button(wrapper, '重投失败卡').attributes('disabled'),
+        ).toBeDefined();
+      } finally {
+        wrapper.unmount();
+      }
+    },
+  );
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/monitor/full-sync/index.vue b/admin-ui/vue/apps/web-antd/src/views/monitor/full-sync/index.vue
new file mode 100644
index 0000000..2d1b775
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/monitor/full-sync/index.vue
@@ -0,0 +1,862 @@
+<script lang="ts" setup>
+import type {
+  FullSyncChannelOption,
+  FullSyncFailure,
+  FullSyncKind,
+  FullSyncReplayStatus,
+  FullSyncRunView,
+} from '#/api/monitor';
+
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+import { AccessControl, useAccess } from '@vben/access';
+import { Page } from '@vben/common-ui';
+
+import {
+  Alert,
+  Button,
+  Descriptions,
+  Drawer,
+  Empty,
+  InputNumber,
+  message,
+  Modal,
+  Select,
+  Space,
+  Table,
+  Tag,
+} from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import {
+  getFullSyncReplay,
+  getFullSyncRun,
+  listFullSyncChannels,
+  listFullSyncFailures,
+  listFullSyncRuns,
+  replayFullSync,
+  startFullSync,
+} from '#/api/monitor';
+
+const kind = ref<FullSyncKind | undefined>();
+const rows = ref<FullSyncRunView[]>([]);
+const loading = ref(false);
+// Channel scope for the start dialog. An empty selection means a full sync.
+const channelOptions = ref<FullSyncChannelOption[]>([]);
+const channelOptionsLoading = ref(false);
+const selectedChannels = ref<string[]>([]);
+const starting = ref<FullSyncKind | undefined>();
+const selected = ref<FullSyncRunView>();
+const detailOpen = ref(false);
+const detailLoading = ref(false);
+const failures = ref<FullSyncFailure[]>([]);
+const failureCursor = ref('');
+const failureLoading = ref(false);
+const failureUnavailable = ref(false);
+const failureRows = ref<FullSyncFailure[]>([]);
+const pendingRunId = ref('');
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
+const canReplay = computed(
+  () =>
+    hasAccessByRoles(['admin']) &&
+    hasAccessByCodes(['cpm:iot:fullSyncRuns:replay']),
+);
+const canViewReplay = computed(
+  () =>
+    hasAccessByRoles(['admin']) &&
+    hasAccessByCodes(['cpm:iot:fullSyncRuns:replay:view']),
+);
+const replayModalOpen = ref(false);
+const replaySourceRunId = ref('');
+const replayMaxRounds = ref<number | undefined>(3);
+const replaying = ref(false);
+const replayStatus = ref<FullSyncReplayStatus>();
+const replayStatusLoading = ref(false);
+const validReplayMaxRounds = computed(
+  () =>
+    typeof replayMaxRounds.value === 'number' &&
+    Number.isInteger(replayMaxRounds.value) &&
+    replayMaxRounds.value >= 0 &&
+    replayMaxRounds.value <= 100,
+);
+const replayable = computed(
+  () =>
+    !!selected.value &&
+    ['completed', 'completed_with_failures'].includes(
+      selected.value.run.status,
+    ) &&
+    selected.value.run.failedCount > 0,
+);
+let refreshTimer: ReturnType<typeof setInterval> | undefined;
+
+const kindOptions = [
+  { label: '全部同步', value: undefined },
+  { label: '流量全量同步', value: 'traffic_usage' },
+  { label: '日流量全量同步', value: 'traffic_usage_daily' },
+  { label: '月流量历史全量同步', value: 'traffic_usage_monthly' },
+  { label: '卡状态全量同步', value: 'sim_status' },
+  { label: 'IMEI 全量同步', value: 'imei' },
+];
+
+// One table for both directions of the kind mapping, so adding a sync type is a
+// single edit instead of chasing ternaries through the template.
+const syncKindOperations: Record<FullSyncKind, string> = {
+  traffic_usage: 'current_month_usage_full_sync',
+  traffic_usage_daily: 'previous_day_usage_full_sync',
+  traffic_usage_monthly: 'previous_month_usage_full_sync',
+  sim_status: 'sim_status_queue_full_sync',
+  imei: 'imei_full_sync',
+};
+
+const syncKindNames: Record<FullSyncKind, string> = {
+  traffic_usage: '流量全量同步',
+  traffic_usage_daily: '日流量全量同步',
+  traffic_usage_monthly: '月流量历史全量同步',
+  sim_status: '卡状态全量同步',
+  imei: 'IMEI 全量同步',
+};
+
+const operationSyncNames: Record<string, string> = {
+  current_month_usage_full_sync: '流量全量同步',
+  previous_day_usage_full_sync: '日流量全量同步',
+  previous_month_usage_full_sync: '月流量历史全量同步',
+  sim_status_queue_full_sync: '卡状态全量同步',
+  imei_full_sync: 'IMEI 全量同步',
+};
+
+function isRunningKind(syncKind: FullSyncKind) {
+  const operation = syncKindOperations[syncKind];
+  return rows.value.some(
+    (item) =>
+      item.run.operation === operation &&
+      ['producing', 'running'].includes(item.run.status),
+  );
+}
+
+const isRunning = computed(() =>
+  rows.value.some((item) => ['producing', 'running'].includes(item.run.status)),
+);
+
+function hasRunningKind(syncKind: FullSyncKind) {
+  return isRunningKind(syncKind);
+}
+
+function syncName(item: unknown) {
+  const operation = (item as FullSyncRunView).run?.operation;
+  return operationSyncNames[operation ?? ''] || operation || '未知同步';
+}
+
+function statusText(status: string) {
+  return (
+    {
+      producing: '准备中',
+      running: '运行中',
+      completed: '已完成',
+      completed_with_failures: '完成但有失败',
+      accepted: '已受理',
+      pending: '待处理',
+      failed: '失败',
+    }[status] || status
+  );
+}
+
+function statusColor(status: string) {
+  if (status === 'completed') return 'green';
+  if (status === 'completed_with_failures') return 'orange';
+  if (status === 'failed') return 'red';
+  if (status === 'running' || status === 'producing') return 'blue';
+  return 'default';
+}
+
+function formatTime(value?: string) {
+  return value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '-';
+}
+
+function runTotal(run: FullSyncRunView['run']) {
+  return run.enqueuedCount || run.scannedCount || 0;
+}
+
+function progress(run: FullSyncRunView['run']) {
+  const total = runTotal(run);
+  if (!total) return 0;
+  return Math.min(
+    100,
+    Math.round(((run.successCount + run.failedCount) / total) * 100),
+  );
+}
+
+async function loadRuns() {
+  loading.value = true;
+  try {
+    const result = await listFullSyncRuns({ syncKind: kind.value, limit: 50 });
+    rows.value = result.items || [];
+    if (
+      pendingRunId.value &&
+      rows.value.some((item) => item.run.runId === pendingRunId.value)
+    ) {
+      pendingRunId.value = '';
+    }
+  } catch {
+    message.error('全量同步结果加载失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function openDetail(row: unknown) {
+  const view = row as FullSyncRunView;
+  selected.value = view;
+  detailOpen.value = true;
+  detailLoading.value = true;
+  failures.value = [];
+  failureRows.value = [];
+  failureUnavailable.value = false;
+  failureCursor.value = '';
+  try {
+    selected.value = await getFullSyncRun(view.run.runId);
+    if (hasAccessByCodes(['cpm:iot:fullSyncRuns:failures'])) {
+      await loadFailures();
+    }
+  } catch {
+    message.error('全量同步详情加载失败');
+  } finally {
+    detailLoading.value = false;
+  }
+}
+
+async function loadFailures(reset = false) {
+  if (!selected.value) return;
+  failureLoading.value = true;
+  if (reset) {
+    failureCursor.value = '';
+    failureRows.value = [];
+  }
+  try {
+    const page = await listFullSyncFailures(selected.value.run.runId, {
+      limit: 100,
+      cursor: failureCursor.value || undefined,
+    });
+    failures.value = page.items || [];
+    failureRows.value = [...failureRows.value, ...failures.value];
+    failureCursor.value = page.nextCursor || '';
+    failureUnavailable.value = false;
+  } catch {
+    failures.value = [];
+    failureCursor.value = '';
+    failureUnavailable.value = true;
+    message.warning('失败明细暂不可用，Run 结果仍可查看');
+  } finally {
+    failureLoading.value = false;
+  }
+}
+
+// loadChannels lazily loads the channel candidates for the start dialog. A
+// failure is non-fatal: the operator can still start a full sync.
+async function loadChannels() {
+  if (channelOptions.value.length > 0) return;
+  channelOptionsLoading.value = true;
+  try {
+    const result = await listFullSyncChannels();
+    channelOptions.value = result.items ?? [];
+  } catch {
+    message.warning('通道列表加载失败，仅可发起全量同步');
+  } finally {
+    channelOptionsLoading.value = false;
+  }
+}
+
+// startTarget drives the shared channel-selection dialog.
+const startTarget = ref<FullSyncKind | undefined>();
+const startModalOpen = ref(false);
+
+async function confirmStart(syncKind: FullSyncKind) {
+  const name = syncKindNames[syncKind];
+  if (hasRunningKind(syncKind)) {
+    message.warning(`${name}正在运行，请等待当前 Run 完成`);
+    return;
+  }
+  selectedChannels.value = [];
+  startTarget.value = syncKind;
+  startModalOpen.value = true;
+  await loadChannels();
+}
+
+const selectedChannelCards = computed(() =>
+  channelOptions.value
+    .filter((item) => selectedChannels.value.includes(item.chanKey))
+    .reduce((total, item) => total + (item.cardCount || 0), 0),
+);
+
+const startModalTitle = computed(() => {
+  const name = startTarget.value ? syncKindNames[startTarget.value] : '';
+  return `启动${name}`;
+});
+
+async function doStart() {
+  const syncKind = startTarget.value;
+  if (!syncKind) return;
+  starting.value = syncKind;
+  let published = false;
+  try {
+    const channels = selectedChannels.value;
+    const result = await startFullSync(syncKind, channels);
+    published = true;
+    pendingRunId.value = result.runId;
+    startModalOpen.value = false;
+    message.success(
+      result.scopeChannels > 0
+        ? `已发布部分同步（${result.scopeChannels} 个通道）：${result.runId}`
+        : `已发布全量同步：${result.runId}`,
+    );
+    for (let attempt = 0; attempt < 5; attempt++) {
+      await loadRuns();
+      const row = rows.value.find((item) => item.run.runId === result.runId);
+      if (row) {
+        await openDetail(row);
+        return;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    }
+    message.info(`同步任务已发布，Run ${result.runId} 尚未出现在运行列表`);
+  } catch {
+    if (!published) message.error('同步任务启动失败');
+  } finally {
+    starting.value = undefined;
+  }
+}
+
+function confirmReplay() {
+  if (!canReplay.value || !replayable.value || !selected.value) return;
+  replaySourceRunId.value = selected.value.run.runId;
+  replayMaxRounds.value = 3;
+  replayModalOpen.value = true;
+}
+
+async function refreshReplayStatus() {
+  if (!canViewReplay.value || !replayStatus.value) return;
+  replayStatusLoading.value = true;
+  try {
+    replayStatus.value = await getFullSyncReplay(
+      replayStatus.value.replayRunId,
+    );
+  } catch {
+    message.warning('重投状态暂不可用，请稍后刷新');
+  } finally {
+    replayStatusLoading.value = false;
+  }
+}
+
+async function doReplay() {
+  if (!canReplay.value || replaying.value || !replaySourceRunId.value) return;
+  if (
+    !validReplayMaxRounds.value ||
+    typeof replayMaxRounds.value !== 'number'
+  ) {
+    message.warning('最大轮数须为 0 到 100 的整数');
+    return;
+  }
+  replaying.value = true;
+  try {
+    const result = await replayFullSync(
+      replaySourceRunId.value,
+      replayMaxRounds.value,
+    );
+    replayStatus.value = {
+      ...result,
+      sourceRunId: replaySourceRunId.value,
+      remaining: 0,
+      enqueued: 0,
+    };
+    replayModalOpen.value = false;
+    pendingRunId.value = result.replayRunId;
+    message.success(`重投已受理：${result.replayRunId}`);
+    await refreshReplayStatus();
+    await loadRuns();
+  } catch {
+    message.error('重投请求失败，请确认源 Run 状态后再操作');
+  } finally {
+    replaying.value = false;
+  }
+}
+
+onMounted(async () => {
+  await loadRuns();
+  refreshTimer = setInterval(() => {
+    if (isRunning.value || pendingRunId.value) void loadRuns();
+  }, 10_000);
+});
+
+onBeforeUnmount(() => {
+  if (refreshTimer) clearInterval(refreshTimer);
+});
+
+const columns = [
+  { title: '同步类型', key: 'kind', width: 150 },
+  {
+    title: 'Run ID',
+    key: 'runId',
+    dataIndex: ['run', 'runId'],
+    ellipsis: true,
+  },
+  {
+    title: '查询月份',
+    key: 'queryMonth',
+    dataIndex: ['run', 'queryMonth'],
+    width: 110,
+  },
+  { title: '状态', key: 'status', width: 130 },
+  { title: '处理进度', key: 'progress', width: 120 },
+  {
+    title: '成功',
+    key: 'success',
+    dataIndex: ['run', 'successCount'],
+    width: 90,
+  },
+  {
+    title: '失败',
+    key: 'failed',
+    dataIndex: ['run', 'failedCount'],
+    width: 90,
+  },
+  {
+    title: '当前轮次',
+    key: 'round',
+    dataIndex: ['run', 'currentRound'],
+    width: 90,
+  },
+  { title: '同步范围', key: 'scope', width: 110 },
+  { title: '开始时间', key: 'startedAt', width: 170 },
+  { title: '完成时间', key: 'completedAt', width: 170 },
+  { title: '操作', key: 'action', width: 90 },
+];
+
+const failureColumns = [
+  { title: '任务 ID', dataIndex: 'taskId', key: 'taskId', ellipsis: true },
+  { title: '卡 ID', dataIndex: 'cardId', key: 'cardId', width: 90 },
+  {
+    title: '失败分类',
+    dataIndex: 'errorCategory',
+    key: 'errorCategory',
+    width: 140,
+  },
+  { title: '失败原因', dataIndex: 'errorMessage', key: 'errorMessage' },
+  { title: '轮次', dataIndex: 'round', key: 'round', width: 70 },
+  { title: '失败时间', key: 'failedAt', width: 170 },
+];
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full flex-col gap-3">
+      <div class="flex flex-wrap items-center justify-between gap-2">
+        <Space wrap>
+          <Select
+            v-model:value="kind"
+            allow-clear
+            :options="kindOptions"
+            placeholder="同步类型"
+            style="width: 180px"
+            @change="loadRuns"
+          />
+          <Button @click="loadRuns">刷新</Button>
+        </Space>
+        <Space wrap>
+          <AccessControl :codes="['cpm:iot:fullSyncRuns:start']" type="code">
+            <Button
+              type="primary"
+              :loading="starting === 'traffic_usage'"
+              :disabled="!!starting || hasRunningKind('traffic_usage')"
+              @click="confirmStart('traffic_usage')"
+            >
+              启动流量同步
+            </Button>
+            <Button
+              type="primary"
+              :loading="starting === 'traffic_usage_daily'"
+              :disabled="!!starting || hasRunningKind('traffic_usage_daily')"
+              @click="confirmStart('traffic_usage_daily')"
+            >
+              启动日流量同步
+            </Button>
+            <Button
+              type="primary"
+              :loading="starting === 'traffic_usage_monthly'"
+              :disabled="!!starting || hasRunningKind('traffic_usage_monthly')"
+              @click="confirmStart('traffic_usage_monthly')"
+            >
+              启动月流量历史同步
+            </Button>
+            <Button
+              type="primary"
+              :loading="starting === 'sim_status'"
+              :disabled="!!starting || hasRunningKind('sim_status')"
+              @click="confirmStart('sim_status')"
+            >
+              启动状态同步
+            </Button>
+            <Button
+              type="primary"
+              :loading="starting === 'imei'"
+              :disabled="!!starting || hasRunningKind('imei')"
+              @click="confirmStart('imei')"
+            >
+              启动 IMEI 同步
+            </Button>
+          </AccessControl>
+        </Space>
+      </div>
+
+      <Table
+        :columns="columns"
+        :data-source="rows"
+        :loading="loading"
+        :pagination="false"
+        :row-key="(row: FullSyncRunView) => row.run.runId"
+        size="small"
+        bordered
+        class="min-h-0 flex-1"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'kind'">
+            {{ syncName(record) }}
+            <Tag
+              v-if="
+                record.source === 'live' &&
+                ['producing', 'running'].includes(record.run.status)
+              "
+              color="blue"
+              class="ml-1"
+            >
+              实时
+            </Tag>
+          </template>
+          <template v-else-if="column.key === 'status'">
+            <Tag :color="statusColor(record.run.status)">
+              {{ statusText(record.run.status) }}
+            </Tag>
+          </template>
+          <template v-else-if="column.key === 'progress'">
+            {{ progress(record.run) }}%
+          </template>
+          <template v-else-if="column.key === 'startedAt'">
+            {{ formatTime(record.run.startedAt || record.run.createdAt) }}
+          </template>
+          <template v-else-if="column.key === 'scope'">
+            <Tag v-if="!record.run.scopeChannels" color="default">全量</Tag>
+            <Tag v-else color="blue">
+              {{ record.run.scopeChannels }} 个通道
+            </Tag>
+          </template>
+          <template v-else-if="column.key === 'completedAt'">
+            {{ formatTime(record.run.completedAt) }}
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <Button type="link" size="small" @click="openDetail(record)">
+              详情
+            </Button>
+          </template>
+        </template>
+        <template #emptyText>
+          <Empty description="暂无全量同步记录" />
+        </template>
+      </Table>
+    </div>
+
+    <Drawer
+      v-model:open="detailOpen"
+      :title="selected ? `${syncName(selected)}详情` : '全量同步详情'"
+      width="960"
+    >
+      <template v-if="selected">
+        <Descriptions
+          bordered
+          size="small"
+          :column="2"
+          :loading="detailLoading"
+        >
+          <Descriptions.Item label="Run ID">
+            {{ selected.run.runId }}
+          </Descriptions.Item>
+          <Descriptions.Item label="状态">
+            <Tag :color="statusColor(selected.run.status)">
+              {{ statusText(selected.run.status) }}
+            </Tag>
+          </Descriptions.Item>
+          <Descriptions.Item label="查询月份">
+            {{ selected.run.queryMonth || '-' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="数据来源">
+            {{ selected.source === 'live' ? 'Redis 运行态' : 'JSON 归档' }}
+          </Descriptions.Item>
+          <Descriptions.Item label="同步范围">
+            <template v-if="!selected.run.scopeChannels">
+              全量（全部通道）
+            </template>
+            <template v-else>
+              {{ selected.run.scopeChannels }} 个通道
+              <span
+                v-if="selected.run.scopeChannelsSample"
+                class="text-gray-500"
+              >
+                （{{ selected.run.scopeChannelsSample
+                }}{{ selected.run.scopeChannels > 10 ? ' 等' : '' }}）
+              </span>
+            </template>
+          </Descriptions.Item>
+          <Descriptions.Item label="扫描总数">
+            {{ selected.run.scannedCount || 0 }}
+          </Descriptions.Item>
+          <Descriptions.Item label="入队总数">
+            {{ selected.run.enqueuedCount || 0 }}
+          </Descriptions.Item>
+          <Descriptions.Item label="成功数">
+            {{ selected.run.successCount }}
+          </Descriptions.Item>
+          <Descriptions.Item label="最终失败数">
+            {{ selected.run.failedCount }}
+          </Descriptions.Item>
+          <Descriptions.Item label="上游请求次数">
+            {{ selected.run.upstreamAttemptCount || 0 }}
+          </Descriptions.Item>
+          <Descriptions.Item label="当前轮次">
+            {{ selected.run.currentRound }}
+          </Descriptions.Item>
+          <Descriptions.Item label="最大轮数">
+            {{ selected.run.maxRound || '-' }}
+          </Descriptions.Item>
+          <Descriptions.Item v-if="selected.run.sourceRunId" label="源 Run ID">
+            {{ selected.run.sourceRunId }}
+          </Descriptions.Item>
+          <Descriptions.Item label="开始时间">
+            {{ formatTime(selected.run.startedAt || selected.run.createdAt) }}
+          </Descriptions.Item>
+          <Descriptions.Item label="完成时间">
+            {{ formatTime(selected.run.completedAt) }}
+          </Descriptions.Item>
+        </Descriptions>
+
+        <div v-if="canReplay" class="mt-3">
+          <Button
+            :disabled="!replayable || replaying"
+            :loading="replaying"
+            @click="confirmReplay"
+          >
+            重投失败卡
+          </Button>
+          <span class="ml-2 text-xs text-gray-500">
+            仅可重投已完成且存在最终失败的 Run，不会重投成功卡。
+          </span>
+        </div>
+        <div
+          v-if="replayStatus?.sourceRunId === selected.run.runId"
+          class="mt-3"
+        >
+          <Alert
+            :type="replayStatus.error ? 'error' : 'info'"
+            show-icon
+            :message="`重投 Run：${replayStatus.replayRunId}`"
+            :description="
+              replayStatus.error ||
+              `状态：${statusText(replayStatus.runStatus || replayStatus.status)}；已入队 ${replayStatus.enqueued}，待处理 ${replayStatus.remaining}`
+            "
+          />
+          <Button
+            v-if="canViewReplay"
+            class="mt-2"
+            size="small"
+            :loading="replayStatusLoading"
+            @click="refreshReplayStatus"
+          >
+            刷新重投状态
+          </Button>
+        </div>
+
+        <h3 class="mb-2 mt-5">轮次统计</h3>
+        <Table
+          :columns="[
+            { title: '轮次', dataIndex: 'round', key: 'round', width: 70 },
+            { title: '入队', dataIndex: 'enqueuedCount', key: 'enqueuedCount' },
+            { title: '成功', dataIndex: 'successCount', key: 'successCount' },
+            {
+              title: '转下轮',
+              dataIndex: 'nextRoundCount',
+              key: 'nextRoundCount',
+            },
+            { title: '失败', dataIndex: 'failedCount', key: 'failedCount' },
+            {
+              title: '上游请求',
+              dataIndex: 'upstreamAttemptCount',
+              key: 'upstreamAttemptCount',
+            },
+            { title: '完成时间', key: 'completedAt' },
+          ]"
+          :data-source="selected.rounds || []"
+          :pagination="false"
+          :row-key="(row: any) => `${selected?.run.runId}-${row.round}`"
+          size="small"
+          bordered
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'completedAt'">
+              {{ formatTime(record.completedAt) }}
+            </template>
+          </template>
+        </Table>
+
+        <div
+          v-if="hasAccessByCodes(['cpm:iot:fullSyncRuns:failures'])"
+          class="mb-2 mt-5 flex items-center justify-between"
+        >
+          <h3>失败明细</h3>
+          <AccessControl :codes="['cpm:iot:fullSyncRuns:failures']" type="code">
+            <Button
+              size="small"
+              :loading="failureLoading"
+              @click="loadFailures(true)"
+            >
+              刷新失败明细
+            </Button>
+          </AccessControl>
+        </div>
+        <Table
+          v-if="hasAccessByCodes(['cpm:iot:fullSyncRuns:failures'])"
+          :columns="failureColumns"
+          :data-source="failureRows"
+          :loading="failureLoading"
+          :pagination="false"
+          :row-key="(row: FullSyncFailure) => row.taskId"
+          size="small"
+          bordered
+          :scroll="{ x: 850 }"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'failedAt'">
+              {{ formatTime(record.failedAt) }}
+            </template>
+          </template>
+        </Table>
+        <div v-if="failureUnavailable" class="mt-2 text-xs text-gray-500">
+          失败明细不可用；失败总数以 Run 结果为准。
+        </div>
+        <Button
+          v-if="
+            failureCursor && hasAccessByCodes(['cpm:iot:fullSyncRuns:failures'])
+          "
+          class="mt-2"
+          size="small"
+          @click="loadFailures()"
+        >
+          加载下一页
+        </Button>
+      </template>
+    </Drawer>
+
+    <Modal
+      v-model:open="replayModalOpen"
+      title="重投 Run 失败卡"
+      :confirm-loading="replaying"
+      :ok-button-props="{ disabled: !validReplayMaxRounds || !canReplay }"
+      ok-text="确认重投"
+      cancel-text="取消"
+      @ok="doReplay"
+    >
+      <div class="flex flex-col gap-3">
+        <Alert
+          type="warning"
+          show-icon
+          message="仅重投源 Run 的最终失败卡"
+          :description="`源 Run ID：${replaySourceRunId}`"
+        />
+        <div>
+          <div class="mb-2 font-medium">最大轮数（maxRounds）</div>
+          <InputNumber
+            v-model:value="replayMaxRounds"
+            :min="0"
+            :max="100"
+            :step="1"
+            style="width: 100%"
+          />
+          <div class="mt-1 text-xs text-gray-500">
+            默认 3 轮，上限 100 轮；填 0 时使用服务端配置默认值。
+          </div>
+        </div>
+      </div>
+    </Modal>
+
+    <Modal
+      v-model:open="startModalOpen"
+      :title="startModalTitle"
+      :confirm-loading="!!starting"
+      :ok-text="selectedChannels.length > 0 ? '启动部分同步' : '启动全量同步'"
+      cancel-text="取消"
+      width="760px"
+      @ok="doStart"
+    >
+      <div class="flex flex-col gap-3">
+        <Alert
+          v-if="selectedChannels.length === 0"
+          type="info"
+          show-icon
+          message="未选择通道，将发起全量同步"
+          description="全量同步会扫描全部符合条件的卡片。若只想同步部分通道，请在下方勾选。"
+        />
+        <Alert
+          v-else
+          type="warning"
+          show-icon
+          message="将发起部分同步"
+          :description="`已选 ${selectedChannels.length} 个通道，约 ${selectedChannelCards} 张卡。仅这些通道会被扫描和入队。`"
+        />
+        <Alert
+          type="info"
+          show-icon
+          message="若当前已有 Run 在执行，本次请求会被跳过"
+          description="请错开定时任务窗口（卡状态 02:00、流量 04:00）发起。"
+        />
+        <div>
+          <div class="mb-2 flex items-center justify-between">
+            <span class="font-medium">选择通道（可多选）</span>
+            <Space>
+              <Button
+                size="small"
+                :disabled="channelOptions.length === 0"
+                @click="
+                  selectedChannels = channelOptions.map((item) => item.chanKey)
+                "
+              >
+                全选
+              </Button>
+              <Button
+                size="small"
+                :disabled="selectedChannels.length === 0"
+                @click="selectedChannels = []"
+              >
+                清空
+              </Button>
+            </Space>
+          </div>
+          <Select
+            v-model:value="selectedChannels"
+            mode="multiple"
+            :loading="channelOptionsLoading"
+            :options="
+              channelOptions.map((item) => ({
+                label: `${item.chanKey} ${item.chanName}（${item.cardCount} 张${
+                  item.syncEnabled ? '，不参与同步' : ''
+                }）`,
+                value: item.chanKey,
+              }))
+            "
+            :max-tag-count="8"
+            allow-clear
+            placeholder="不选 = 全量同步"
+            style="width: 100%"
+          />
+          <div class="mt-1 text-xs text-gray-500">
+            标记为“不参与同步”的通道即使被选中也不会入队。
+          </div>
+        </div>
+      </div>
+    </Modal>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/monitor/online/index.vue b/admin-ui/vue/apps/web-antd/src/views/monitor/online/index.vue
new file mode 100644
index 0000000..af92db2
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/monitor/online/index.vue
@@ -0,0 +1,165 @@
+<!--
+ * @description 在线用户监控页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { DeepPartial } from '@vben/types';
+import { Page } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+import { Button, message, Switch,Tag, Modal, Popconfirm } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { AccessControl, useAccess } from '@vben/access';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysUserOnlineListApi, deleteSysUserOnlineApi, type SysUserOnline } from '#/api/monitor/online';
+import {
+  MdiPlus,
+  MdiEdit,
+  MdiDelete,
+} from '@vben/icons';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'ipaddr',
+      label: '登录地址',
+    },
+    {
+      component: 'Input',
+      fieldName: 'userName',
+      label: '用户名称',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'onlineId',
+  },
+  columns: [
+    { align: 'left', title: 'ID', type: 'checkbox', width: 80 },
+    { field: 'userName', title: '用户名称' },
+    { field: 'uuid', title: 'UUID' },
+    { field: 'clientKey', title: '客户端' },
+    { field: 'deviceType', title: '设备类型' },
+    { field: 'ipaddr', title: '地址' },
+    { field: 'loginLocation', title: '登录地点' },
+    { field: 'browser', title: '浏览器' },
+    { field: 'os', title: '操作系统' },
+    { field: 'loginTime', title: '登录时间' },
+    { field: 'expireTime', title: '过期时间' },
+    { title: '操作', width: 40, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysUserOnlineListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+async function handleDelete(row: SysUserOnline) {
+  await deleteSysUserOnlineApi({ ids: [row.onlineId] });
+  message.success("删除成功");
+  await gridApi.query();
+}
+
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row) => row.onlineId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysUserOnlineApi({ ids: ids.map(Number) });
+      message.success("删除成功");
+      await gridApi.query();
+    },
+  });
+}
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="在线用户">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center" type="primary"  :disabled="!CheckboxChecked" :icon="h(MdiDelete)"  v-access:code="'cpm:monitor:online:batchLogout'" @click="handleMultiDelete">批量删除</Button>
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status == '0' ? 'green' : 'red'">{{ row.status == '0' ? '正常' : '关闭' }}</Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <AccessControl :codes="['cpm:monitor:online:forceLogout']" type="code">
+            <Popconfirm title="确定删除吗？" v-if="row.id != 1" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >  
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/monitor/server/index.vue b/admin-ui/vue/apps/web-antd/src/views/monitor/server/index.vue
new file mode 100644
index 0000000..bc50d66
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/monitor/server/index.vue
@@ -0,0 +1,1079 @@
+<!--
+ * @description 服务器监控页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { Card, CardGrid, Descriptions, DescriptionsItem } from 'ant-design-vue';
+import type { EchartsUIType } from '@vben/plugins/echarts';
+import { defineComponent, onActivated, onMounted, ref, watch, reactive, computed, onUnmounted } from 'vue';
+
+import { EchartsUI, useEcharts, echarts } from '@vben/plugins/echarts';
+import { useWebSocket } from '@vueuse/core';
+import { useAccessStore } from '@vben/stores';
+import dayjs from 'dayjs';
+
+
+const accessStore = useAccessStore();
+
+type Record = {
+    e: string;
+    d: any;
+}
+
+function getWsServerUrl() {
+    return 'ws://' + window.location.host + '/api/monitor/ws?access_token=' + encodeURIComponent(String(accessStore.accessToken));
+}
+const state = reactive({
+    server: getWsServerUrl(),
+    recordList: [] as Record[],
+});
+
+const { status, data, send, close, open } = useWebSocket(state.server, {
+    autoReconnect: true,
+    heartbeat: false,
+
+});
+
+const getIsOpen = computed(() => status.value === 'OPEN');
+
+function handlerSend() {
+    send(JSON.stringify({
+        e: 'joins',
+        d: {
+            names: ["ws:tag:monitor:server"]
+        }
+    }));
+}
+
+watch(status, (newVal) => {
+    console.log('vue/apps/web-antd/src/views/monitor/server/index.vue status', newVal);
+    if (newVal === 'OPEN') {
+        handlerSend();
+    }
+});
+
+watch(data, (newVal) => {
+    if (newVal) {
+
+        // {"e":"ws:event:monitor:server:go","d":{"goName":"Golang","goOs":"darwin","arch":"arm64","goVersion":"go1.23.5","startTime":"2006-01-02 15:04:05","runTime":411,"rootPath":"/opt/homebrew/Cellar/go/1.23.5/libexec","pwd":"/Users/lixiujie/dev_test/dev_go/xiujie_iot/server","goroutine":"27","goMem":"35.39 MB","goSize":"6.73 MB"}}
+
+
+        // console.log('vue/apps/web-antd/src/views/monitor/server/index.vue data', newVal);
+        const res = JSON.parse(newVal);
+        if (typeof res.d === 'string' && !res.d.startsWith('{')) {
+            res.d = atob(res.d);
+        }
+        if (typeof res.d === 'string' && res.d.startsWith('{')) {
+            res.d = JSON.parse(res.d);
+        }
+        console.log('vue/apps/web-antd/src/views/monitor/server/index.vue res', res);
+        if (res.e === 'ws:event:monitor:server:go') {
+            handleGoInfo(res.d);
+        }
+        if (res.e === 'ws:event:monitor:server:host') {
+            handleHostInfo(res.d);
+        }
+        if (res.e === 'ws:event:monitor:server:cpu') {
+            handleCpuInfo(res.d);
+        }
+        if (res.e === 'ws:event:monitor:server:mem') {
+            handleMemInfo(res.d);
+        }
+        if (res.e === 'ws:event:monitor:server:disk') {
+            handleDiskInfo(res.d);
+        }
+        if (res.e === 'ws:event:monitor:server:net') {
+            handleNetInfo(res.d);
+        }
+        if (res.e === 'ws:event:monitor:server:sysLoad') {
+            handleSysLoadInfo(res.d);
+        }
+    }
+});
+function handleSysLoadInfo(data: any) {
+    // {
+    // "e": "ws:event:monitor:server:sysLoad",
+    // "d": {
+    //     "load1": 7.787109375,
+    //     "load15": 5.5693359375,
+    //     "load5": 6.12548828125
+    // }
+    sysInfo.value.cpuAvg1 = parseInt(data.load1);
+    sysInfo.value.cpuAvg5 = parseInt(data.load5);
+    sysInfo.value.cpuAvg15 = parseInt(data.load15);
+}
+function handleNetInfo(data: any) {
+    console.log('vue/apps/web-antd/src/views/monitor/server/index.vue handleNetInfo', data);
+}
+function handleDiskInfo(data: any) {
+
+    // {
+    //     "path": "/",
+    //     "fstype": "apfs",
+    //     "total": 994662584320,
+    //     "free": 30871126016,
+    //     "used": 963791458304,
+    //     "usedPercent": 96.89632177759003,
+    //     "inodesTotal": 301887432,
+    //     "inodesUsed": 411592,
+    //     "inodesFree": 301475840,
+    //     "inodesUsedPercent": 0.1360000611646397
+    // }
+    sysInfo.value.diskTotal = data.total;
+    sysInfo.value.diskUsed = data.used;
+    sysInfo.value.diskUsedPercent = parseInt(data.usedPercent);
+    diskEcharts.getChartInstance()?.setOption({
+        series: [
+            {
+                data: [
+                    { value: sysInfo.value.diskUsedPercent, name: '磁盘使用率' }
+                ]
+            }
+        ]
+    });
+    diskRunEchartsData.value.name.push(dayjs().format('HH:mm:ss'));
+    diskRunEchartsData.value.value.push(sysInfo.value.diskUsedPercent);
+    if (diskRunEchartsData.value.name.length > 30) {
+        diskRunEchartsData.value.name.shift();
+        diskRunEchartsData.value.value.shift();
+    }
+    diskRunEcharts.getChartInstance()?.setOption({
+        xAxis: {
+            data: diskRunEchartsData.value.name,
+        },
+        series: [
+            {
+                data: diskRunEchartsData.value.value,
+            }
+        ]
+    });
+}
+function handleMemInfo(data: any) {
+
+    // {
+    //     "active": 24972836864,
+    //     "anonHugePages": 0,
+    //     "available": 25606307840,
+    //     "buffers": 0,
+    //     "cached": 0,
+    //     "commitLimit": 0,
+    //     "committedAS": 0,
+    //     "dirty": 0,
+    //     "free": 666157056,
+    //     "goUsed": 40781064,
+    //     "highFree": 0,
+    //     "highTotal": 0,
+    //     "hugePageSize": 0,
+    //     "hugePagesFree": 0,
+    //     "hugePagesRsvd": 0,
+    //     "hugePagesSurp": 0,
+    //     "hugePagesTotal": 0,
+    //     "inactive": 24940150784,
+    //     "laundry": 0,
+    //     "lowFree": 0,
+    //     "lowTotal": 0,
+    //     "mapped": 0,
+    //     "pageTables": 0,
+    //     "shared": 0,
+    //     "slab": 0,
+    //     "sreclaimable": 0,
+    //     "sunreclaim": 0,
+    //     "swapCached": 0,
+    //     "swapFree": 0,
+    //     "swapTotal": 0,
+    //     "total": 68719476736,
+    //     "used": 43113168896,
+    //     "usedPercent": 62.73791790008545,
+    //     "vmallocChunk": 0,
+    //     "vmallocTotal": 0,
+    //     "vmallocUsed": 0,
+    //     "wired": 3992502272,
+    //     "writeBack": 0,
+    //     "writeBackTmp": 0
+    // }
+    sysInfo.value.memTotal = data.total;
+    sysInfo.value.memUsed = data.used;
+    sysInfo.value.memUsage = parseInt(data.usedPercent);
+    sysInfo.value.available = data.available;
+    sysInfo.value.goUsed = data.goUsed;
+    memEcharts.getChartInstance()?.setOption({
+        series: [
+            {
+
+                data: [
+                    { value: sysInfo.value.memUsage, name: '内存使用率' }
+                ]
+            }
+        ]
+    });
+    memRunEchartsData.value.name.push(dayjs().format('HH:mm:ss'));
+    memRunEchartsData.value.value.push(sysInfo.value.memUsage);
+    if (memRunEchartsData.value.name.length > 30) {
+        memRunEchartsData.value.name.shift();
+        memRunEchartsData.value.value.shift();
+    }
+    memRunEcharts.getChartInstance()?.setOption({
+        xAxis: {
+            data: memRunEchartsData.value.name,
+        },
+        series: [
+            {
+                data: memRunEchartsData.value.value,
+            }
+        ]
+    });
+}
+function handleCpuInfo(data: any) {
+    // {
+    //     "e": "ws:event:monitor:server:cpu",
+    //     "d": {
+    //         "Number": 1,
+    //         "Cores": 10,
+    //         "UsedPercent": [
+    //             26.666666666733
+    //         ],
+    //         "ModelName": "Apple M1 Max"
+    //     }
+    // }
+    sysInfo.value.cpuNum = data.Number;
+    sysInfo.value.cpuCores = data.Cores;
+    sysInfo.value.cpuUsed = parseInt(data.UsedPercent[0]);
+    cpuEcharts.getChartInstance()?.setOption({
+        series: [
+            {
+                data: [
+                    { value: sysInfo.value.cpuUsed, name: 'CPU使用率' }
+                ]
+            }
+        ]
+    });
+
+    cpuRunEchartsData.value.name.push(dayjs().format('HH:mm:ss'));
+    cpuRunEchartsData.value.value.push(sysInfo.value.cpuUsed);
+    if (cpuRunEchartsData.value.name.length > 30) {
+        cpuRunEchartsData.value.name.shift();
+        cpuRunEchartsData.value.value.shift();
+    }
+    cpuRunEcharts.getChartInstance()?.setOption({
+        xAxis: {
+            data: cpuRunEchartsData.value.name,
+        },
+        series: [
+            {
+                data: cpuRunEchartsData.value.value,
+            }
+        ]
+    });
+
+
+}
+function handleHostInfo(data: any) {
+    // console.log('vue/apps/web-antd/src/views/monitor/server/index.vue handleHostInfo', data);
+    //     {
+    //     "e": "ws:event:monitor:server:host",
+    //     "d": {
+    //         "bootTime": "2025-03-13T19:09:52+08:00",
+    //         "hostId": "78e68867-0a8c-5b8b-b9e1-a91eafffc273",
+    //         "hostname": "ds-m1-macbookpro.local",
+    //         "intranet_ip": "192.0.2.10",
+    //         "kernelArch": "arm64",
+    //         "kernelVersion": "24.3.0",
+    //         "os": "darwin",
+    //         "platform": "darwin",
+    //         "platformFamily": "Standalone Workstation",
+    //         "platformVersion": "15.3.2",
+    //         "procs": 969,
+    //         "public_ip": "140.245.124.140",
+    //         "uptime": 338504,
+    //         "virtualizationRole": "",
+    //         "virtualizationSystem": ""
+    //     }
+    // }    
+    hostData.value.bootTime = data.bootTime;
+    hostData.value.hostId = data.hostId;
+    hostData.value.hostname = data.hostname;
+    hostData.value.intranet_ip = data.intranet_ip;
+    hostData.value.kernelArch = data.kernelArch;
+    hostData.value.kernelVersion = data.kernelVersion;
+    hostData.value.os = data.os;
+    hostData.value.platform = data.platform;
+    hostData.value.platformFamily = data.platformFamily;
+    hostData.value.platformVersion = data.platformVersion;
+    hostData.value.procs = data.procs;
+    hostData.value.public_ip = data.public_ip;
+    hostData.value.uptime = data.uptime;
+    hostData.value.virtualizationRole = data.virtualizationRole;
+    hostData.value.virtualizationSystem = data.virtualizationSystem;
+}
+function handleGoInfo(data: any) {
+    // console.log('vue/apps/web-antd/src/views/monitor/server/index.vue handleGoInfo', data);
+    goInfoData.value.goName = data.goName;
+    goInfoData.value.goOs = data.goOs;
+    goInfoData.value.arch = data.arch;
+    goInfoData.value.goVersion = data.goVersion;
+    goInfoData.value.startTime = data.startTime;
+    goInfoData.value.runTime = data.runTime;
+    goInfoData.value.rootPath = data.rootPath;
+    goInfoData.value.pwd = data.pwd;
+    goInfoData.value.goroutine = data.goroutine;
+    goInfoData.value.goMem = data.goMem;
+    goInfoData.value.goSize = data.goSize;
+    goInfoData.value.intranet_ip = data.intranet_ip;
+}
+
+// watchEffect(() => {
+//     if (data.value) {
+//         try {
+//             console.log('vue/apps/web-antd/src/views/monitor/server/index.vue data.value', data.value);
+//             // const res = JSON.parse(data.value);
+//             // state.recordList.push(res);
+//         } catch (error) {
+//             console.log('vue/apps/web-antd/src/views/monitor/server/index.vue error', error);
+//         }
+//     }
+// });
+
+const sysInfo = ref({
+    cpuNum: 0,
+    cpuCores: 0,
+    cpuUsed: 0,
+    cpuAvg1: 0,
+    cpuAvg5: 0,
+    cpuAvg15: 0,
+    memUsed: 0,
+    memTotal: 0,
+    available: 0,
+    goUsed: 0,
+    memUsage: 0,
+    diskTotal: 0,
+    diskUsed: 0,
+    diskUsedPercent: 0,
+});
+
+const hostData = ref({
+    "bootTime": "2025-03-24T12:12:13+08:00",
+    "hostId": "8be74418-1a53-4208-be22-9c126d89yydd",
+    "hostname": "ubuntudev",
+    "intranet_ip": "192.0.2.10",
+    "kernelArch": "x86_64",
+    "kernelVersion": "6.8.0-52-generic",
+    "os": "linux",
+    "platform": "centos",
+    "platformFamily": "rhel",
+    "platformVersion": "24.04.1",
+    "procs": 138,
+    "public_ip": "192.144.160.105",
+    "uptime": 3278,
+    "virtualizationRole": "guest",
+    "virtualizationSystem": ""
+});
+const goInfoData = ref({
+    "goOs": "-", "arch": "-", "goVersion": "-", "goMem": "-", "goName": "-", "goSize": "-", "goroutine": '-', "pwd": "-", "rootPath": "-",
+    "runTime": '', "startTime": "-", "intranet_ip": "-"
+});
+function memorySizeFormat(size: any) {
+    if (size === null || size === undefined) return ''
+    size = parseFloat(size);
+    let rank = 0;
+    let rankchar = 'Bytes';
+    while (size > 1024 && rankchar != 'TB') {
+        size = size / 1024;
+        rank++;
+        if (rank == 1) {
+            rankchar = 'KB';
+        } else if (rank == 2) {
+            rankchar = 'MB';
+        } else if (rank == 3) {
+            rankchar = 'GB';
+        } else if (rank == 4) {
+            rankchar = 'TB';
+        }
+    }
+    return size.toFixed(2) + ' ' + rankchar;
+}
+function timeFormat(second: any) {
+    if (!second) return '-'
+    second = parseFloat(second);
+    let rank = 0;
+    let rankchar = '秒';
+    while ((second > 60 && rankchar != '小时' && rankchar != '天') || (second > 24 && rankchar == '小时')) {
+        if (rankchar == '小时') {
+            second = second / 24;
+        } else {
+            second = second / 60;
+        }
+        rank++;
+        if (rank == 1) {
+            rankchar = '分';
+        } else if (rank == 2) {
+            rankchar = '小时';
+        } else if (rank == 3) {
+            rankchar = '天';
+        }
+    }
+    return second.toFixed(2) + ' ' + rankchar;
+}
+
+const cpuRunEchartsData: any = ref({
+    name: [],
+    value: [],
+});
+
+const memRunEchartsData: any = ref({
+    name: [],
+    value: [],
+});
+
+const diskRunEchartsData: any = ref({
+    name: [],
+    value: [],
+});
+
+
+const cpuHtmlRef = ref<EchartsUIType>();
+const memHtmlRef = ref<EchartsUIType>();
+const diskHtmlRef = ref<EchartsUIType>();
+const cpuRunHtmlRef = ref<EchartsUIType>();
+const memRunHtmlRef = ref<EchartsUIType>();
+const diskRunHtmlRef = ref<EchartsUIType>();
+const cpuEcharts = useEcharts(cpuHtmlRef);
+const memEcharts = useEcharts(memHtmlRef);
+const diskEcharts = useEcharts(diskHtmlRef);
+const cpuRunEcharts = useEcharts(cpuRunHtmlRef);
+const memRunEcharts = useEcharts(memRunHtmlRef);
+const diskRunEcharts = useEcharts(diskRunHtmlRef);
+
+type cpuEChartsOption = Parameters<typeof cpuEcharts.renderEcharts>['0'];
+type memEChartsOption = Parameters<typeof memEcharts.renderEcharts>['0'];
+type diskEChartsOption = Parameters<typeof diskEcharts.renderEcharts>['0'];
+type cpuRunEChartsOption = Parameters<typeof cpuRunEcharts.renderEcharts>['0'];
+type memRunEChartsOption = Parameters<typeof memRunEcharts.renderEcharts>['0'];
+type diskRunEChartsOption = Parameters<typeof diskRunEcharts.renderEcharts>['0'];
+const cpuOptions: cpuEChartsOption = {
+    series: [
+        {
+            type: 'gauge',
+            name: 'CPU',
+            radius: '90%', //修改表盘大小
+            title: {
+                show: true, //控制表盘title(今日预计用电量)字体是否显示
+                fontSize: 12, //控制表盘title(今日预计用电量)字体大小
+                'color': 'green',           		//控制表盘title(今日预计用电量)字体颜色
+                offsetCenter: [-2, '30%'], //设置表盘title(今日预计用电量)位置
+            },
+            axisLine: {
+                lineStyle: {
+                    show: true,
+                    with: 25,
+                    // 属性lineStyle控制线条样式
+                    color: [
+                        [0.3, '#4dabf7'],
+                        [0.6, '#69db7c'],
+                        [0.8, '#ffa94d'],
+                        [1, '#ff6b6b'],
+                    ],
+                },
+            },
+            axisTick: {
+                distance: 0,
+                length: 4,
+                lineStyle: {
+                    color: 'auto',
+                    width: 1
+                }
+            },
+            axisLabel: {
+                distance: 12,
+                color: '#888',
+                fontSize: 12
+            },
+            splitLine: { // 分割线
+                length: 5,
+                distance: 2,
+                lineStyle: {
+                    width: 1,
+                    color: 'auto'
+                }
+            },
+            splitNumber: 5, //分割线之间的刻度
+
+            detail: {
+                valueAnimation: true,
+                formatter: '{value}%',
+                textStyle: {
+                    fontSize: 20,
+                    color: 'red',
+                },
+                offsetCenter: ['0', '80%'], //表盘数据(30%)位置
+            },
+            data: [
+                {
+                    value: sysInfo.value.cpuUsed,
+                    name: 'CPU使用率',
+                    color: 'inherit'
+                },
+            ],
+        }
+    ],
+
+};
+const memOptions: memEChartsOption = {
+    tooltip: {
+        formatter: '{a} <br/>{b} : {c}%',
+    },
+    series: [
+        {
+            type: 'gauge',
+            name: '内存',
+            radius: '90%', //修改表盘大小
+            title: {
+                show: true, //控制表盘title(今日预计用电量)字体是否显示
+                fontSize: 12, //控制表盘title(今日预计用电量)字体大小
+                'color': 'green',           		//控制表盘title(今日预计用电量)字体颜色
+                offsetCenter: [-2, '30%'], //设置表盘title(今日预计用电量)位置
+            },
+            axisLine: {
+                lineStyle: {
+                    show: true,
+                    with: 25,
+                    // 属性lineStyle控制线条样式
+                    color: [
+                        [0.3, '#4dabf7'],
+                        [0.6, '#69db7c'],
+                        [0.8, '#ffa94d'],
+                        [1, '#ff6b6b'],
+                    ],
+                },
+            },
+            axisTick: {
+                distance: 0,
+                length: 4,
+                lineStyle: {
+                    color: 'auto',
+                    width: 1
+                }
+            },
+            axisLabel: {
+                distance: 12,
+                color: '#888',
+                fontSize: 12
+            },
+            splitLine: { // 分割线
+                length: 5,
+                distance: 2,
+                lineStyle: {
+                    width: 1,
+                    color: 'auto'
+                }
+            },
+            splitNumber: 5, //分割线之间的刻度
+
+            detail: {
+                valueAnimation: true,
+                formatter: '{value}%',
+                textStyle: {
+                    fontSize: 20,
+                    color: 'red',
+                },
+                offsetCenter: ['0', '80%'], //表盘数据(30%)位置
+            },
+            data: [
+                {
+                    value: sysInfo.value.memUsed,
+                    name: '内存使用率',
+                },
+            ],
+        },
+    ],
+}
+const diskOptions: diskEChartsOption = {
+    tooltip: {
+        formatter: '{a} <br/>{b} : {c}%',
+    },
+    series: [
+        {
+            type: 'gauge',
+            name: '磁盘',
+            radius: '90%', //修改表盘大小
+            title: {
+                show: true, //控制表盘title(今日预计用电量)字体是否显示
+                fontSize: 12, //控制表盘title(今日预计用电量)字体大小
+                'color': 'green',           		//控制表盘title(今日预计用电量)字体颜色
+                offsetCenter: [-2, '30%'], //设置表盘title(今日预计用电量)位置
+            },
+            axisLine: {
+                lineStyle: {
+                    show: true,
+                    with: 25,
+                    // 属性lineStyle控制线条样式
+                    color: [
+                        [0.3, '#4dabf7'],
+                        [0.6, '#69db7c'],
+                        [0.8, '#ffa94d'],
+                        [1, '#ff6b6b'],
+                    ],
+                },
+            },
+            axisTick: {
+                distance: 0,
+                length: 4,
+                lineStyle: {
+                    color: 'auto',
+                    width: 1
+                }
+            },
+            axisLabel: {
+                distance: 12,
+                color: '#888',
+                fontSize: 12
+            },
+            splitLine: { // 分割线
+                length: 5,
+                distance: 2,
+                lineStyle: {
+                    width: 1,
+                    color: 'auto'
+                }
+            },
+            splitNumber: 5, //分割线之间的刻度
+
+            detail: {
+                valueAnimation: true,
+                formatter: '{value}%',
+                textStyle: {
+                    fontSize: 20,
+                    color: 'red',
+                },
+                offsetCenter: ['0', '80%'], //表盘数据(30%)位置
+            },
+            data: [
+                {
+                    value: sysInfo.value.diskUsedPercent,
+                    name: '磁盘使用率',
+                },
+            ],
+        },
+    ],
+};
+const cpuRunOptions: cpuRunEChartsOption = {
+    tooltip: {
+        trigger: 'axis',
+    },
+    grid: {
+        top: 15,
+        bottom: 15,
+        left: 15,
+        right: 30,
+        containLabel: true
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        splitLine: {
+            show: false
+        }
+    },
+    yAxis: {
+        type: 'value',
+        boundaryGap: [0, '100%'],
+        axisLabel: {
+            formatter: '{value}%'
+        },
+        splitLine: {
+            show: false
+        }
+    },
+    series: [
+        {
+            name: 'CPU使用率',
+            type: 'line',
+            showSymbol: false,
+            data: [],
+            smooth: true,
+            lineStyle: {
+                width: 0
+            },
+            areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgb(128, 255, 165)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgb(1, 191, 236)'
+                    }
+                ])
+            }
+        }
+    ]
+};
+const memRunOptions: memRunEChartsOption = {
+    tooltip: {
+        trigger: 'axis',
+    },
+    grid: {
+        top: 15,
+        bottom: 15,
+        left: 15,
+        right: 30,
+        containLabel: true
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        splitLine: {
+            show: false
+        }
+    },
+    yAxis: {
+        type: 'value',
+        boundaryGap: [0, '100%'],
+        axisLabel: {
+            formatter: '{value}%'
+        },
+        splitLine: {
+            show: false
+        }
+    },
+    series: [
+        {
+            name: '内存使用率',
+            type: 'line',
+            showSymbol: false,
+            data: [],
+            smooth: true,
+            lineStyle: {
+                width: 0
+            },
+            areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgb(55, 162, 255)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgb(116, 21, 219)'
+                    }
+                ])
+            }
+        }
+    ]
+};
+const diskRunOptions: diskRunEChartsOption = {
+    tooltip: {
+        trigger: 'axis',
+    },
+    grid: {
+        top: 15,
+        bottom: 15,
+        left: 15,
+        right: 30,
+        containLabel: true
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        splitLine: {
+            show: false
+        }
+    },
+    yAxis: {
+        type: 'value',
+        boundaryGap: [0, '100%'],
+        axisLabel: {
+            formatter: '{value}%'
+        },
+        splitLine: {
+            show: false
+        }
+    },
+    series: [
+        {
+            name: '磁盘使用率',
+            type: 'line',
+            showSymbol: false,
+            data: [],
+            smooth: true,
+            lineStyle: {
+                width: 0
+            },
+            areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                        offset: 0,
+                        color: 'rgb(0, 221, 255)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgb(77, 119, 255)'
+                    }
+                ])
+            }
+        }
+    ]
+};
+function setCpuEcharts() {
+    cpuEcharts.renderEcharts(cpuOptions);
+}
+function setMemEcharts() {
+    memEcharts.renderEcharts(memOptions);
+}
+function setDiskEcharts() {
+    diskEcharts.renderEcharts(diskOptions);
+}
+function setCpuRunEcharts() {
+    cpuRunEcharts.renderEcharts(cpuRunOptions);
+}
+function setMemRunEcharts() {
+    memRunEcharts.renderEcharts(memRunOptions);
+}
+function setDiskRunEcharts() {
+    diskRunEcharts.renderEcharts(diskRunOptions);
+}
+let checkI: NodeJS.Timeout | undefined;
+
+function reconnect() {
+    open();
+    // if (checkI) {
+    //     clearInterval(checkI);
+    //     checkI = undefined;
+    // }
+    // checkI = setInterval(() => {
+    //     console.log('vue/apps/web-antd/src/views/monitor/server/index.vue reconnect checkI', status.value); 
+    //     if (status.value !== 'OPEN') {
+    //         try {
+    //             close();
+    //             open();
+    //         } catch (error) {
+    //             console.log('vue/apps/web-antd/src/views/monitor/server/index.vue reconnect error', error);
+    //         }
+    //     }
+    // }, 5000);
+}
+
+
+onMounted(() => {
+    setCpuEcharts();
+    setMemEcharts();
+    setDiskEcharts();
+    setCpuRunEcharts();
+    setMemRunEcharts();
+    setDiskRunEcharts();
+    reconnect();
+});
+onUnmounted(() => {
+    if (checkI) {
+        clearInterval(checkI);
+        checkI = undefined;
+    }
+});
+onActivated(() => {
+    cpuEcharts.resize();
+    memEcharts.resize();
+    diskEcharts.resize();
+    cpuRunEcharts.resize();
+    memRunEcharts.resize();
+    diskRunEcharts.resize();
+});
+</script>
+<template>
+    <div class="p-5 flex flex-col gap-3">
+        <div class="grid grid-cols-1 gap-3 md:grid-cols-1 lg:grid-cols-3">
+            <Card class="w-full">
+                <CardGrid style="width: 50%;">
+                    <table cellspacing="0" style="width: 100%">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">CPU数: </div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ sysInfo.cpuNum }}</div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">核心数: </div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ sysInfo.cpuCores }}</div>
+                                </td>
+                            </tr>
+
+                            <tr>
+                                <td>
+                                    <div class="cell-card">使用率:</div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ sysInfo.cpuUsed }}%</div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">LA5:</div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ sysInfo.cpuAvg5 }}%</div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">LA15:</div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ sysInfo.cpuAvg15 }}%</div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </CardGrid>
+                <CardGrid style="width: 50%;">
+                    <EchartsUI ref="cpuHtmlRef" height="200px" width="100%" />
+                </CardGrid>
+
+            </Card>
+            <Card class="w-full">
+                <CardGrid style="width: 50%;">
+                    <table cellspacing="0" style="width: 100%">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">内存总数:</div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ memorySizeFormat(sysInfo.memTotal) }}</div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">已使用:</div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ memorySizeFormat(sysInfo.memUsed) }}</div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">剩余:</div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ memorySizeFormat(sysInfo.available) }}</div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">系统使用:</div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ memorySizeFormat(sysInfo.goUsed) }}</div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">使用率:</div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ sysInfo.memUsage }}%</div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </CardGrid>
+                <CardGrid style="width: 50%;">
+                    <EchartsUI ref="memHtmlRef" height="200px" width="100%" />
+                </CardGrid>
+
+            </Card>
+
+            <Card class="w-full">
+                <CardGrid style="width: 50%;">
+                    <table cellspacing="0" style="width: 100%">
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">磁盘容量:</div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ memorySizeFormat(sysInfo.diskTotal) }}</div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">已使用:</div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ memorySizeFormat(sysInfo.diskUsed) }}</div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>
+                                    <div class="cell-card">使用率:</div>
+                                </td>
+                                <td>
+                                    <div class="cell-card">{{ sysInfo.diskUsedPercent }}%</div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </CardGrid>
+                <CardGrid style="width: 50%;">
+                    <EchartsUI ref="diskHtmlRef" height="200px" width="100%" />
+                </CardGrid>
+            </Card>
+
+            <Card class="w-full" title="CPU运行情况">
+                <CardGrid style="width: 100%; margin: 0 auto; padding: 0;">
+                    <EchartsUI ref="cpuRunHtmlRef" height="300px" width="100%" />
+                </CardGrid>
+            </Card>
+            <Card class="w-full" title="内存运行情况">
+                <CardGrid style="width: 100%; margin: 0 auto; padding: 0;">
+                    <EchartsUI ref="memRunHtmlRef" height="300px" width="100%" />
+                </CardGrid>
+            </Card>
+            <Card class="w-full" title="磁盘运行情况">
+                <CardGrid style="width: 100%; margin: 0 auto; padding: 0;">
+                    <EchartsUI ref="diskRunHtmlRef" height="300px" width="100%" />
+                </CardGrid>
+            </Card>
+        </div>
+        <div class="grid grid-cols-1 gap-3 md:grid-cols-1 lg:grid-cols-1">
+            <Card class="w-full" title="运行环境信息">
+                <Descriptions :column="3">
+                    <DescriptionsItem label="操作系统">{{ hostData.os }}</DescriptionsItem>
+                    <DescriptionsItem label="启动时间">{{ goInfoData.startTime }}</DescriptionsItem>
+                    <DescriptionsItem label="运行时长">{{ timeFormat(goInfoData.runTime) }}</DescriptionsItem>
+                    <DescriptionsItem label="运行内存">{{ goInfoData.goMem }}</DescriptionsItem>
+                    <DescriptionsItem label="系统架构">{{ goInfoData.arch }}</DescriptionsItem>
+                    <DescriptionsItem label="语言环境">{{ goInfoData.goName }}</DescriptionsItem>
+                    <DescriptionsItem label="磁盘占用">{{ goInfoData.goSize }}</DescriptionsItem>
+                    <DescriptionsItem label="项目地址">{{ goInfoData.pwd }}</DescriptionsItem>
+                    <DescriptionsItem label="架构版本">{{ hostData.kernelArch }}</DescriptionsItem>
+                    <DescriptionsItem label="GO 版本">{{ goInfoData.goVersion }}</DescriptionsItem>
+                    <DescriptionsItem label="协程数量">{{ goInfoData.goroutine }}</DescriptionsItem>
+                    <DescriptionsItem label="服务器IP">{{ hostData.intranet_ip }} (内) &nbsp;&nbsp;&nbsp; {{
+                        hostData.public_ip }} (公) </DescriptionsItem>
+                </Descriptions>
+            </Card>
+        </div>
+    </div>
+</template>
+<style scoped>
+.cell-card {
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    word-break: break-all;
+    line-height: 36px;
+}
+</style>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiBrowserHeader.vue b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiBrowserHeader.vue
new file mode 100644
index 0000000..bd297ec
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiBrowserHeader.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import {
+  Button,
+  Card,
+  Form,
+  FormItem,
+  Input,
+  InputSearch,
+} from 'ant-design-vue';
+
+import { isDev } from '../constants';
+import { useApiBrowserContext } from '../context';
+import ApiTypeBatchGenerateModal from './ApiTypeBatchGenerateModal.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+const { removePrefix, searchValue, typeGenerateFolderOptions } =
+  useApiBrowserContext();
+const batchGenerateModalOpen = ref(false);
+
+/** ====================  方法  ==================== */
+function handleOpenBatchGenerate() {
+  batchGenerateModalOpen.value = true;
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Card :bordered="false" class="shrink-0">
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <Form class="flex flex-wrap gap-y-2" layout="inline">
+        <FormItem label="去除前缀">
+          <Input
+            v-model:value="removePrefix"
+            allow-clear
+            class="w-[260px]"
+            placeholder="例如 /api/v1"
+          />
+        </FormItem>
+        <FormItem label="搜索接口">
+          <InputSearch
+            v-model:value="searchValue"
+            allow-clear
+            class="w-[360px]"
+            placeholder="接口名称、地址、权限"
+          />
+        </FormItem>
+      </Form>
+
+      <Button
+        v-if="isDev"
+        :disabled="typeGenerateFolderOptions.length === 0"
+        type="primary"
+        @click="handleOpenBatchGenerate"
+      >
+        批量生成
+      </Button>
+    </div>
+
+    <ApiTypeBatchGenerateModal
+      v-if="isDev"
+      v-model:open="batchGenerateModalOpen"
+    />
+  </Card>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiDetailTab.vue b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiDetailTab.vue
new file mode 100644
index 0000000..230177d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiDetailTab.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import {
+  Descriptions,
+  DescriptionsItem,
+  Empty,
+  Table,
+  Tag,
+  TypographyParagraph,
+} from 'ant-design-vue';
+
+import { methodColorMap, schemaColumns } from '../constants';
+import { useApiBrowserContext } from '../context';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+const {
+  parameterRows,
+  requestSchemaRows,
+  responseSchemaRows,
+  selectedDisplayPath,
+  selectedOperation,
+} = useApiBrowserContext();
+
+/** ====================  方法  ==================== */
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <div v-if="selectedOperation" class="flex flex-col gap-3">
+    <div class="flex items-start justify-between gap-3">
+      <div>
+        <div class="mb-2 text-lg font-semibold text-[#262626]">
+          {{ selectedOperation.summary }}
+        </div>
+        <TypographyParagraph
+          class="mb-0 font-mono text-[#1677ff]"
+          :copyable="{ text: selectedDisplayPath }"
+        >
+          {{ selectedDisplayPath }}
+        </TypographyParagraph>
+      </div>
+    </div>
+
+    <Descriptions
+      bordered
+      class="[&_.ant-descriptions-item-label]:w-[120px]"
+      size="small"
+      :column="2"
+    >
+      <DescriptionsItem label="请求方式">
+        <Tag :color="methodColorMap[selectedOperation.method]">
+          {{ selectedOperation.method }}
+        </Tag>
+      </DescriptionsItem>
+      <DescriptionsItem label="模块标签">
+        {{ selectedOperation.tag }}
+      </DescriptionsItem>
+      <DescriptionsItem label="URL 模块">
+        {{ selectedOperation.moduleName }}
+      </DescriptionsItem>
+      <DescriptionsItem label="权限标识">
+        {{ selectedOperation.permission || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="请求 Schema">
+        {{ selectedOperation.requestRef || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="响应 Schema">
+        {{ selectedOperation.responseRef || '-' }}
+      </DescriptionsItem>
+    </Descriptions>
+
+    <div class="rounded-md border border-[#f0f0f0]">
+      <div
+        class="border-b border-[#f0f0f0] px-3 py-2.5 font-semibold text-[#262626]"
+      >
+        查询参数
+      </div>
+      <Table
+        :columns="schemaColumns"
+        :data-source="parameterRows"
+        :pagination="false"
+        row-key="key"
+        size="small"
+      >
+        <template #emptyText>
+          <Empty
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            description="暂无查询参数"
+          />
+        </template>
+      </Table>
+    </div>
+
+    <div class="rounded-md border border-[#f0f0f0]">
+      <div
+        class="border-b border-[#f0f0f0] px-3 py-2.5 font-semibold text-[#262626]"
+      >
+        请求体字段
+      </div>
+      <Table
+        :columns="schemaColumns"
+        :data-source="requestSchemaRows"
+        :pagination="false"
+        row-key="key"
+        size="small"
+      >
+        <template #emptyText>
+          <Empty
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            description="暂无请求体字段"
+          />
+        </template>
+      </Table>
+    </div>
+
+    <div class="rounded-md border border-[#f0f0f0]">
+      <div
+        class="border-b border-[#f0f0f0] px-3 py-2.5 font-semibold text-[#262626]"
+      >
+        响应体字段
+      </div>
+      <Table
+        :columns="schemaColumns"
+        :data-source="responseSchemaRows"
+        :pagination="false"
+        row-key="key"
+        size="small"
+      >
+        <template #emptyText>
+          <Empty
+            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+            description="暂无响应体字段"
+          />
+        </template>
+      </Table>
+    </div>
+  </div>
+
+  <div v-else class="flex h-full items-center justify-center">
+    <Empty description="请选择单个接口查看详情" />
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiRequestTestTab.vue b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiRequestTestTab.vue
new file mode 100644
index 0000000..81dbcfd
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiRequestTestTab.vue
@@ -0,0 +1,466 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import {
+  Button,
+  Checkbox,
+  Descriptions,
+  DescriptionsItem,
+  Empty,
+  Input,
+  InputNumber,
+  message,
+  Segmented,
+  Select,
+  SelectOption,
+  Switch,
+  Tag,
+} from 'ant-design-vue';
+
+import { requestClient } from '#/api/request';
+
+import { methodColorMap } from '../constants';
+import { useApiBrowserContext } from '../context';
+
+/** ====================  常量  ==================== */
+const Textarea = Input.TextArea;
+const requestModeOptions = [
+  { label: 'JSON', value: 'json' },
+  { label: '表格', value: 'table' },
+];
+const requestTypeOptions = ['string', 'number', 'boolean', 'array', 'object'];
+
+/** ====================  数据  ==================== */
+interface RequestParamRow {
+  checked: boolean;
+  custom: boolean;
+  description: string;
+  key: string;
+  name: string;
+  type: string;
+  value: any;
+}
+
+type RequestMode = 'json' | 'table';
+
+const {
+  requestDefaultParams,
+  requestParamRows,
+  requestPlaceholder,
+  selectedDisplayPath,
+  selectedOperation,
+} = useApiBrowserContext();
+const requestMode = ref<RequestMode>('json');
+const requestBodyText = ref('');
+const requestLoading = ref(false);
+const requestResult = ref('');
+const tableParams = ref<RequestParamRow[]>([]);
+const customParamIndex = ref(0);
+
+/** ====================  方法  ==================== */
+function buildDefaultTableParams() {
+  return requestParamRows.value.map((item, index) => ({
+    checked: true,
+    custom: false,
+    description: item.description,
+    key: `${item.name}-${index}`,
+    name: item.name,
+    type: item.type,
+    value: getDefaultValue(item.type),
+  }));
+}
+
+function getDefaultValue(type: string) {
+  if (isBooleanType(type)) {
+    return false;
+  }
+
+  if (isNumberType(type)) {
+    return 0;
+  }
+
+  if (isArrayType(type)) {
+    return '[]';
+  }
+
+  if (isJsonType(type)) {
+    return '{}';
+  }
+
+  return '';
+}
+
+function getNormalizedType(type: string) {
+  return type.toLowerCase();
+}
+
+function handleAddTableParam() {
+  customParamIndex.value += 1;
+  tableParams.value.push({
+    checked: true,
+    custom: true,
+    description: '',
+    key: `custom-${customParamIndex.value}`,
+    name: '',
+    type: 'string',
+    value: '',
+  });
+}
+
+function handleAutoFillJson() {
+  requestBodyText.value = JSON.stringify(requestDefaultParams.value, null, 2);
+}
+
+function handleDeleteTableParam(key: string) {
+  tableParams.value = tableParams.value.filter((item) => item.key !== key);
+}
+
+function handleResetTableParams() {
+  tableParams.value = buildDefaultTableParams();
+}
+
+function isArrayType(type: string) {
+  return getNormalizedType(type).includes('array');
+}
+
+function isBooleanType(type: string) {
+  return getNormalizedType(type).includes('boolean');
+}
+
+function isJsonType(type: string) {
+  const normalizedType = getNormalizedType(type);
+
+  return (
+    normalizedType.includes('array') ||
+    normalizedType.includes('object') ||
+    normalizedType.includes('record')
+  );
+}
+
+function isNumberType(type: string) {
+  const normalizedType = getNormalizedType(type);
+
+  return (
+    normalizedType.includes('integer') ||
+    normalizedType.includes('number') ||
+    normalizedType === 'int' ||
+    normalizedType.includes('int32') ||
+    normalizedType.includes('int64')
+  );
+}
+
+function parseJsonRequestParams() {
+  const content = requestBodyText.value.trim();
+
+  if (!content) {
+    return {};
+  }
+
+  try {
+    return JSON.parse(content);
+  } catch {
+    message.error('请求参数必须是合法 JSON');
+    return undefined;
+  }
+}
+
+function parseTableRequestParams() {
+  const params: Record<string, unknown> = {};
+
+  for (const item of tableParams.value) {
+    if (!item.checked) {
+      continue;
+    }
+
+    const name = item.name.trim();
+
+    if (!name) {
+      message.error('参数名不能为空');
+      return undefined;
+    }
+
+    const value = parseTableValue(item);
+
+    if (value === undefined) {
+      return undefined;
+    }
+
+    params[name] = value;
+  }
+
+  return params;
+}
+
+function parseTableValue(item: RequestParamRow) {
+  if (isBooleanType(item.type)) {
+    return Boolean(item.value);
+  }
+
+  if (isNumberType(item.type)) {
+    const value = Number(item.value);
+
+    if (Number.isNaN(value)) {
+      message.error(`${item.name || '参数'} 必须是数字`);
+      return undefined;
+    }
+
+    return value;
+  }
+
+  if (isJsonType(item.type)) {
+    const content = String(item.value ?? '').trim();
+
+    if (!content) {
+      return isArrayType(item.type) ? [] : {};
+    }
+
+    try {
+      return JSON.parse(content);
+    } catch {
+      message.error(`${item.name || '参数'} 必须是合法 JSON`);
+      return undefined;
+    }
+  }
+
+  return item.value;
+}
+
+function parseRequestParams() {
+  return requestMode.value === 'json'
+    ? parseJsonRequestParams()
+    : parseTableRequestParams();
+}
+
+async function handleRequestTest() {
+  if (!selectedOperation.value) {
+    return;
+  }
+
+  const params = parseRequestParams();
+
+  if (params === undefined) {
+    return;
+  }
+
+  requestLoading.value = true;
+  requestResult.value = '';
+
+  try {
+    const url = selectedDisplayPath.value;
+    const method = selectedOperation.value.method.toLowerCase();
+    let result;
+
+    switch (method) {
+      case 'delete': {
+        result = await requestClient.delete(url, { ...params });
+        break;
+      }
+      case 'get': {
+        result = await requestClient.get(url, { params });
+        break;
+      }
+      case 'patch': {
+        result = await requestClient.request(url, {
+          data: { ...params },
+          method: 'PATCH',
+        });
+        break;
+      }
+      case 'put': {
+        result = await requestClient.put(url, { ...params });
+        break;
+      }
+      default: {
+        result = await requestClient.post(url, { ...params });
+      }
+    }
+
+    requestResult.value = JSON.stringify(result, null, 2);
+  } catch (error) {
+    requestResult.value = JSON.stringify(error, null, 2);
+  } finally {
+    requestLoading.value = false;
+  }
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+watch(
+  selectedOperation,
+  () => {
+    requestBodyText.value = '';
+    requestResult.value = '';
+    handleResetTableParams();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div v-if="selectedOperation" class="flex flex-col gap-3">
+    <Descriptions
+      bordered
+      class="[&_.ant-descriptions-item-label]:w-[120px]"
+      size="small"
+      :column="1"
+    >
+      <DescriptionsItem label="请求地址">
+        <Tag :color="methodColorMap[selectedOperation.method]">
+          {{ selectedOperation.method }}
+        </Tag>
+        {{ selectedDisplayPath }}
+      </DescriptionsItem>
+    </Descriptions>
+
+    <div class="flex items-center justify-between gap-3">
+      <div class="font-semibold text-[#262626]">请求参数</div>
+      <Segmented
+        v-model:value="requestMode"
+        :options="requestModeOptions"
+        size="small"
+      />
+    </div>
+
+    <div class="rounded-md border border-[#f0f0f0]">
+      <div
+        class="flex items-center justify-between border-b border-[#f0f0f0] px-3 py-2.5"
+      >
+        <span class="font-semibold text-[#262626]">
+          {{ requestMode === 'json' ? '请求参数 JSON' : '请求参数表格' }}
+        </span>
+        <div class="flex gap-2">
+          <Button
+            v-if="requestMode === 'json'"
+            size="small"
+            @click="handleAutoFillJson"
+          >
+            自动填充
+          </Button>
+          <Button v-else size="small" @click="handleResetTableParams">
+            重置参数
+          </Button>
+        </div>
+      </div>
+
+      <Textarea
+        v-if="requestMode === 'json'"
+        v-model:value="requestBodyText"
+        class="rounded-t-none border-0 font-mono"
+        :placeholder="requestPlaceholder"
+        :rows="10"
+      />
+
+      <div v-else class="overflow-auto">
+        <table class="w-full min-w-[860px] table-fixed text-sm">
+          <thead class="bg-[#fafafa] text-[#595959]">
+            <tr>
+              <th class="w-[64px] px-3 py-2 text-left font-medium">发送</th>
+              <th class="w-[180px] px-3 py-2 text-left font-medium">参数名</th>
+              <th class="w-[140px] px-3 py-2 text-left font-medium">
+                数据类型
+              </th>
+              <th class="w-[220px] px-3 py-2 text-left font-medium">参数值</th>
+              <th class="px-3 py-2 text-left font-medium">说明</th>
+              <th class="w-[84px] px-3 py-2 text-left font-medium">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="item in tableParams"
+              :key="item.key"
+              class="border-t border-[#f0f0f0]"
+            >
+              <td class="px-3 py-2">
+                <Checkbox v-model:checked="item.checked" />
+              </td>
+              <td class="px-3 py-2">
+                <Input
+                  v-model:value="item.name"
+                  placeholder="参数名"
+                  size="small"
+                />
+              </td>
+              <td class="px-3 py-2">
+                <Select v-model:value="item.type" class="w-full" size="small">
+                  <SelectOption
+                    v-for="type in requestTypeOptions"
+                    :key="type"
+                    :value="type"
+                  >
+                    {{ type }}
+                  </SelectOption>
+                </Select>
+              </td>
+              <td class="px-3 py-2">
+                <Switch
+                  v-if="isBooleanType(item.type)"
+                  v-model:checked="item.value"
+                  size="small"
+                />
+                <InputNumber
+                  v-else-if="isNumberType(item.type)"
+                  v-model:value="item.value"
+                  class="w-full"
+                  size="small"
+                />
+                <Textarea
+                  v-else-if="isJsonType(item.type)"
+                  v-model:value="item.value"
+                  class="font-mono"
+                  :rows="2"
+                  size="small"
+                />
+                <Input
+                  v-else
+                  v-model:value="item.value"
+                  placeholder="参数值"
+                  size="small"
+                />
+              </td>
+              <td class="px-3 py-2 text-[#8c8c8c]">
+                {{ item.description || '-' }}
+              </td>
+              <td class="px-3 py-2">
+                <Button
+                  danger
+                  size="small"
+                  type="link"
+                  @click="handleDeleteTableParam(item.key)"
+                >
+                  删除
+                </Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <div class="border-t border-[#f0f0f0] p-3">
+          <Button block size="small" type="dashed" @click="handleAddTableParam">
+            新增参数
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <Button type="primary" :loading="requestLoading" @click="handleRequestTest">
+      发送请求
+    </Button>
+
+    <div class="rounded-md border border-[#f0f0f0]">
+      <div
+        class="border-b border-[#f0f0f0] px-3 py-2.5 font-semibold text-[#262626]"
+      >
+        响应结果
+      </div>
+      <pre
+        class="m-0 max-h-[360px] min-h-[180px] overflow-auto whitespace-pre-wrap break-words p-3 font-mono text-xs"
+        v-text="requestResult"
+      ></pre>
+    </div>
+  </div>
+
+  <div v-else class="flex h-full items-center justify-center">
+    <Empty description="请选择单个接口发起请求测试" />
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTreePanel.vue b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTreePanel.vue
new file mode 100644
index 0000000..f3229ad
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTreePanel.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { Card, Empty, Skeleton, Tag, Tree } from 'ant-design-vue';
+
+import AppIcon from '#/components/icon/AppIcon.vue';
+
+import { methodColorMap } from '../constants';
+import { useApiBrowserContext } from '../context';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+const {
+  apiTreeData,
+  expandedKeys,
+  filteredOperations,
+  handleSelect,
+  loading,
+  selectedKeys,
+} = useApiBrowserContext();
+
+/** ====================  方法  ==================== */
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Card
+    :body-style="{
+      display: 'flex',
+      flexDirection: 'column',
+      height: 'calc(100% - 56px)',
+      overflow: 'auto',
+    }"
+    :bordered="false"
+    class="min-h-0"
+  >
+    <template #title>
+      <div class="flex w-full items-center justify-between">
+        <span>API列表</span>
+        <Tag>{{ filteredOperations.length }}</Tag>
+      </div>
+    </template>
+
+    <Skeleton :loading="loading" active :paragraph="{ rows: 14 }">
+      <Tree
+        v-if="apiTreeData.length > 0"
+        v-model:expanded-keys="expandedKeys"
+        :selected-keys="selectedKeys"
+        :show-line="{ showLeafIcon: false }"
+        :tree-data="apiTreeData"
+        :virtual="false"
+        block-node
+        class="min-w-max shrink-0 pr-2 [&_.ant-tree-list]:min-w-max [&_.ant-tree-node-content-wrapper]:min-w-0 [&_.ant-tree-title]:min-w-0"
+        @select="handleSelect"
+      >
+        <template #title="node">
+          <div v-if="node.type === 'folder'" class="flex min-w-0 items-center">
+            <AppIcon
+              class="shrink-0 text-[#69b1ff]"
+              icon="FolderOutlined"
+              :size="16"
+            />
+            <span
+              class="ml-1.5 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
+            >
+              {{ node.title }}
+            </span>
+            <span class="ml-1 shrink-0 text-[#8c8c8c]">
+              ({{ node.count }})
+            </span>
+          </div>
+
+          <div v-else class="flex min-w-0 flex-col py-[3px]">
+            <div class="flex min-w-0 items-center">
+              <Tag
+                class="mr-2 w-[58px] shrink-0 text-center"
+                :color="methodColorMap[node.operation.method]"
+              >
+                {{ node.operation.method }}
+              </Tag>
+              <span
+                class="min-w-[100px] flex-auto overflow-hidden text-ellipsis whitespace-nowrap font-medium text-[#262626]"
+              >
+                {{ node.operation.summary }}
+              </span>
+            </div>
+            <div
+              class="ml-[66px] mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-xs leading-[18px] text-[#8c8c8c]"
+            >
+              {{ node.operation.path }}
+            </div>
+          </div>
+        </template>
+      </Tree>
+
+      <Empty
+        v-else
+        :image="Empty.PRESENTED_IMAGE_SIMPLE"
+        description="暂无接口数据"
+      />
+    </Skeleton>
+  </Card>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTypeBatchGenerateModal.vue b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTypeBatchGenerateModal.vue
new file mode 100644
index 0000000..977fcb6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTypeBatchGenerateModal.vue
@@ -0,0 +1,443 @@
+<script setup lang="ts">
+import type { ApiTypeDirNode } from '../utils/type-generate-client';
+
+import { computed, h, ref, watch } from 'vue';
+
+import {
+  Button,
+  Checkbox,
+  Empty,
+  Input,
+  message,
+  Modal,
+  Select,
+  Switch,
+  Tag,
+  TreeSelect,
+} from 'ant-design-vue';
+
+import { useApiBrowserContext } from '../context';
+import {
+  checkApiTypeFiles,
+  getApiTypeDirTree,
+  writeApiTypeFile,
+} from '../utils/type-generate-client';
+
+interface BatchGenerateRow {
+  autoImport: boolean;
+  checked: boolean;
+  dir?: string;
+  errorMessage?: string;
+  exists?: boolean;
+  fileName: string;
+  folderKey?: string;
+  key: string;
+  loading: boolean;
+  path?: string;
+}
+
+/** ====================  常量  ==================== */
+const open = defineModel<boolean>('open', { default: false });
+const fileNameRegExp = /^[\w.-]+\.ts$/u;
+
+/** ====================  数据  ==================== */
+const { typeGenerateFolderOptions } = useApiBrowserContext();
+const confirmLoading = ref(false);
+const dirLoading = ref(false);
+const dirTreeData = ref<ApiTypeDirNode[]>([]);
+const rowIndex = ref(0);
+const rows = ref<BatchGenerateRow[]>([]);
+
+const checkedRows = computed(() => rows.value.filter((item) => item.checked));
+const canSubmit = computed(() => checkedRows.value.length > 0);
+const folderSelectOptions = computed(() => {
+  return typeGenerateFolderOptions.value.map((item) => ({
+    label: item.label,
+    value: item.key,
+  }));
+});
+
+/** ====================  方法  ==================== */
+async function checkRows(targetRows: BatchGenerateRow[]) {
+  const validRows = targetRows.filter((item) => {
+    return item.dir && isValidFileName(item.fileName);
+  });
+
+  if (validRows.length <= 0) {
+    return;
+  }
+
+  for (const item of validRows) {
+    item.loading = true;
+    item.errorMessage = undefined;
+  }
+
+  try {
+    const result = await checkApiTypeFiles({
+      items: validRows.map((item) => ({
+        dir: item.dir as string,
+        fileName: item.fileName,
+        key: item.key,
+      })),
+    });
+    const resultMap = new Map(result.map((item) => [item.key, item]));
+
+    for (const item of validRows) {
+      const matched = resultMap.get(item.key);
+
+      if (!matched) {
+        continue;
+      }
+
+      item.exists = matched.exists;
+      item.path = matched.filePath;
+    }
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : '检查文件状态失败';
+
+    for (const item of validRows) {
+      item.errorMessage = errorMessage;
+    }
+  } finally {
+    for (const item of validRows) {
+      item.loading = false;
+    }
+  }
+}
+
+function createRows() {
+  rows.value = [];
+  rowIndex.value = 0;
+}
+
+function handleAddRow() {
+  rowIndex.value += 1;
+  rows.value.push({
+    autoImport: false,
+    checked: true,
+    fileName: 'type.ts',
+    key: `batch-generate-${rowIndex.value}`,
+    loading: false,
+  });
+}
+
+function findFolderOption(folderKey: string) {
+  return typeGenerateFolderOptions.value.find((item) => item.key === folderKey);
+}
+
+function getConfirmContent(targetRows: BatchGenerateRow[]) {
+  return h(
+    'div',
+    { class: 'max-h-[360px] overflow-auto' },
+    targetRows.map((item) => {
+      const filePath = item.path
+        ? `apps/web-antd/src/api/${item.path}`
+        : '未知路径';
+
+      return h('div', { class: 'mb-2 text-sm last:mb-0' }, [
+        h('span', item.exists ? '覆盖：' : '新建：'),
+        h('span', { class: 'font-mono' }, filePath),
+      ]);
+    }),
+  );
+}
+
+function getRowStatusColor(row: BatchGenerateRow) {
+  if (row.errorMessage) {
+    return 'red';
+  }
+
+  if (row.loading) {
+    return 'processing';
+  }
+
+  if (row.fileName && !isValidFileName(row.fileName)) {
+    return 'red';
+  }
+
+  if (!row.dir || !row.fileName) {
+    return 'default';
+  }
+
+  return row.exists ? 'orange' : 'green';
+}
+
+function getRowStatusText(row: BatchGenerateRow) {
+  if (row.errorMessage) {
+    return '错误';
+  }
+
+  if (row.loading) {
+    return '检查中';
+  }
+
+  if (row.fileName && !isValidFileName(row.fileName)) {
+    return '文件名错误';
+  }
+
+  if (!row.dir || !row.fileName) {
+    return '未选择';
+  }
+
+  if (typeof row.exists !== 'boolean') {
+    return '待检查';
+  }
+
+  return row.exists ? '已存在' : '新建';
+}
+
+function getPopupContainer(triggerNode: HTMLElement) {
+  return triggerNode.parentElement ?? document.body;
+}
+
+async function handleConfirm() {
+  if (!canSubmit.value) {
+    message.warning('请选择要生成的接口文件夹');
+    return;
+  }
+
+  const invalidRow = checkedRows.value.find((item) => {
+    return !item.folderKey || !item.dir || !isValidFileName(item.fileName);
+  });
+
+  if (invalidRow) {
+    message.warning('请完善已勾选行，文件名称必须是单个 .ts 文件名');
+    return;
+  }
+
+  await checkRows(checkedRows.value);
+
+  if (checkedRows.value.some((item) => item.errorMessage)) {
+    message.error('存在文件状态检查失败的行，请处理后再生成');
+    return;
+  }
+
+  Modal.confirm({
+    centered: true,
+    content: getConfirmContent(checkedRows.value),
+    okText: '确认生成',
+    onOk: handleSubmitWrite,
+    title: '确认生成类型文件',
+    width: 640,
+  });
+}
+
+function handleDirChange(row: BatchGenerateRow) {
+  row.exists = undefined;
+  row.path = undefined;
+  row.errorMessage = undefined;
+  checkRows([row]);
+}
+
+function handleFileNameChange(row: BatchGenerateRow) {
+  row.exists = undefined;
+  row.path = undefined;
+  row.errorMessage = undefined;
+
+  if (!row.dir || !isValidFileName(row.fileName)) {
+    return;
+  }
+
+  checkRows([row]);
+}
+
+function handleFolderChange(row: BatchGenerateRow) {
+  row.errorMessage = undefined;
+}
+
+function handleOpenChange(visible: boolean) {
+  open.value = visible;
+}
+
+function handleRemoveRow(key: string) {
+  rows.value = rows.value.filter((item) => item.key !== key);
+}
+
+function isValidFileName(fileName: string) {
+  const value = fileName.trim();
+
+  return (
+    fileNameRegExp.test(value) &&
+    !value.includes('..') &&
+    !value.includes('/') &&
+    !value.includes('\\')
+  );
+}
+
+async function handleSubmitWrite() {
+  confirmLoading.value = true;
+
+  try {
+    for (const row of checkedRows.value) {
+      const option = findFolderOption(row.folderKey);
+
+      if (!option || !row.dir) {
+        throw new Error('存在无效的接口文件夹或存储位置');
+      }
+
+      await writeApiTypeFile({
+        autoImport: row.autoImport,
+        content: option.content,
+        dir: row.dir,
+        fileName: row.fileName,
+        overwrite: true,
+      });
+    }
+
+    message.success(`已生成 ${checkedRows.value.length} 个类型文件`);
+    open.value = false;
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : '批量生成失败');
+    throw error;
+  } finally {
+    confirmLoading.value = false;
+  }
+}
+
+async function loadDirs() {
+  dirLoading.value = true;
+
+  try {
+    dirTreeData.value = await getApiTypeDirTree();
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : '加载 API 目录失败');
+  } finally {
+    dirLoading.value = false;
+  }
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+watch(open, (visible) => {
+  if (!visible) {
+    return;
+  }
+
+  createRows();
+  loadDirs();
+});
+
+watch(typeGenerateFolderOptions, () => {
+  if (open.value) {
+    rows.value = rows.value.filter((item) => {
+      return !item.folderKey || findFolderOption(item.folderKey);
+    });
+  }
+});
+</script>
+
+<template>
+  <Modal
+    centered
+    :confirm-loading="confirmLoading"
+    :ok-button-props="{ disabled: !canSubmit }"
+    :open="open"
+    title="批量生成类型文件"
+    width="1280px"
+    @cancel="handleOpenChange(false)"
+    @ok="handleConfirm"
+  >
+    <div class="rounded-md border border-[#f0f0f0]">
+      <div class="min-h-[500px] overflow-auto">
+        <table class="w-full min-w-[1100px] table-fixed text-sm">
+          <thead class="bg-[#fafafa] text-[#595959]">
+            <tr>
+              <th class="w-[64px] px-3 py-2 text-left font-medium">生成</th>
+              <th class="w-[280px] px-3 py-2 text-left font-medium">
+                接口文件夹
+              </th>
+              <th class="w-[300px] px-3 py-2 text-left font-medium">
+                存储位置
+              </th>
+              <th class="w-[160px] px-3 py-2 text-left font-medium">文件名</th>
+              <th class="w-[110px] px-3 py-2 text-left font-medium">
+                一键导入
+              </th>
+              <th class="w-[120px] px-3 py-2 text-left font-medium">状态</th>
+              <th class="w-[84px] px-3 py-2 text-left font-medium">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in rows"
+              :key="row.key"
+              class="border-t border-[#f0f0f0]"
+            >
+              <td class="px-3 py-2">
+                <Checkbox v-model:checked="row.checked" />
+              </td>
+              <td class="px-3 py-2">
+                <Select
+                  v-model:value="row.folderKey"
+                  class="w-full"
+                  :get-popup-container="getPopupContainer"
+                  option-filter-prop="label"
+                  :options="folderSelectOptions"
+                  placeholder="请选择接口文件夹"
+                  show-search
+                  size="small"
+                  @change="handleFolderChange(row)"
+                />
+              </td>
+              <td class="px-3 py-2">
+                <TreeSelect
+                  v-model:value="row.dir"
+                  allow-clear
+                  class="w-full"
+                  :field-names="{
+                    children: 'children',
+                    label: 'title',
+                    value: 'value',
+                  }"
+                  :get-popup-container="getPopupContainer"
+                  :loading="dirLoading"
+                  placeholder="请选择存储位置"
+                  show-search
+                  size="small"
+                  :tree-data="dirTreeData"
+                  tree-node-filter-prop="title"
+                  @change="handleDirChange(row)"
+                />
+              </td>
+              <td class="px-3 py-2">
+                <Input
+                  v-model:value="row.fileName"
+                  placeholder="type.ts"
+                  size="small"
+                  @change="handleFileNameChange(row)"
+                />
+              </td>
+              <td class="px-3 py-2">
+                <Switch v-model:checked="row.autoImport" size="small" />
+              </td>
+              <td class="px-3 py-2">
+                <Tag :color="getRowStatusColor(row)">
+                  {{ getRowStatusText(row) }}
+                </Tag>
+              </td>
+              <td class="px-3 py-2">
+                <a class="text-[#ff4d4f]" @click="handleRemoveRow(row.key)">
+                  删除
+                </a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <Empty
+          v-if="rows.length <= 0"
+          class="flex min-h-[458px] items-center justify-center border-t border-[#f0f0f0]"
+          description="请新增生成项"
+        />
+      </div>
+
+      <div class="border-t border-[#f0f0f0] p-3">
+        <Button block size="small" type="dashed" @click="handleAddRow">
+          新增生成项
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTypeDefinitionTab.vue b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTypeDefinitionTab.vue
new file mode 100644
index 0000000..50b7ae0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTypeDefinitionTab.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { Button, Empty, message } from 'ant-design-vue';
+
+import { isDev, TYPE_DEFINITION_EMPTY_TEXT } from '../constants';
+import { useApiBrowserContext } from '../context';
+import ApiTypeGenerateModal from './ApiTypeGenerateModal.vue';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+const { selectedTypeDefinition, selectedTypeGroupName } =
+  useApiBrowserContext();
+const generateModalOpen = ref(false);
+
+/** ====================  方法  ==================== */
+async function handleCopyTypeDefinition() {
+  if (!selectedTypeDefinition.value.isCode) {
+    message.warning(TYPE_DEFINITION_EMPTY_TEXT);
+    return;
+  }
+
+  try {
+    await navigator.clipboard.writeText(selectedTypeDefinition.value.content);
+    message.success('复制成功');
+  } catch {
+    message.error('复制失败');
+  }
+}
+
+function handleDownloadTypeDefinition() {
+  if (!selectedTypeDefinition.value.isCode) {
+    message.warning(TYPE_DEFINITION_EMPTY_TEXT);
+    return;
+  }
+
+  const blob = new Blob([selectedTypeDefinition.value.content], {
+    type: 'text/plain;charset=utf-8',
+  });
+  const link = document.createElement('a');
+  const url = URL.createObjectURL(blob);
+
+  link.href = url;
+  link.download = 'type.ts';
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+function handleGenerateTypeDefinition() {
+  if (!selectedTypeDefinition.value.isCode) {
+    message.warning(TYPE_DEFINITION_EMPTY_TEXT);
+    return;
+  }
+
+  generateModalOpen.value = true;
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <div class="h-full min-h-0">
+    <div
+      v-if="selectedTypeDefinition.isCode"
+      class="flex h-full min-h-0 flex-col"
+    >
+      <div
+        class="flex min-w-0 items-center gap-3 pb-3 max-[1200px]:flex-col max-[1200px]:items-start"
+      >
+        <div class="flex min-w-0 flex-1 items-center max-[1200px]:w-full">
+          <span class="mr-2.5 shrink-0 font-semibold text-[#262626]">
+            接口名称
+          </span>
+          <div
+            class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-semibold text-[#262626]"
+          >
+            {{ selectedTypeGroupName }}
+          </div>
+        </div>
+
+        <div class="flex shrink-0 gap-2">
+          <Button
+            :disabled="!selectedTypeDefinition.isCode"
+            size="small"
+            @click="handleCopyTypeDefinition"
+          >
+            复制
+          </Button>
+          <Button
+            :disabled="!selectedTypeDefinition.isCode"
+            size="small"
+            @click="handleDownloadTypeDefinition"
+          >
+            保存
+          </Button>
+          <Button
+            v-if="isDev"
+            :disabled="!selectedTypeDefinition.isCode"
+            size="small"
+            type="primary"
+            @click="handleGenerateTypeDefinition"
+          >
+            生成
+          </Button>
+        </div>
+      </div>
+
+      <pre
+        class="m-0 min-h-0 flex-1 overflow-auto rounded-md border border-[#f0f0f0] bg-[#fafafa] p-3 font-mono text-xs leading-5 text-[#262626]"
+        v-text="selectedTypeDefinition.content"
+      ></pre>
+    </div>
+
+    <div v-else class="flex h-full items-center justify-center">
+      <Empty :description="selectedTypeDefinition.content" />
+    </div>
+
+    <ApiTypeGenerateModal
+      v-if="isDev"
+      v-model:open="generateModalOpen"
+      :type-definition="selectedTypeDefinition"
+    />
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTypeGenerateModal.vue b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTypeGenerateModal.vue
new file mode 100644
index 0000000..d63a5c1
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/components/ApiTypeGenerateModal.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import type { TypeDefinitionState } from '../types';
+
+import { computed, ref, watch } from 'vue';
+
+import {
+  Form,
+  FormItem,
+  Input,
+  message,
+  Modal,
+  Switch,
+  TreeSelect,
+} from 'ant-design-vue';
+
+import {
+  ApiTypeGeneratorError,
+  getApiTypeDirTree,
+  writeApiTypeFile,
+} from '../utils/type-generate-client';
+
+/** ====================  常量  ==================== */
+const props = defineProps<{
+  typeDefinition: TypeDefinitionState;
+}>();
+const emit = defineEmits<{ success: [] }>();
+const open = defineModel<boolean>('open', { default: false });
+
+/** ====================  数据  ==================== */
+const autoImport = ref(false);
+const confirmLoading = ref(false);
+const dirLoading = ref(false);
+const dirTreeData = ref<any[]>([]);
+const fileName = ref('type.ts');
+const selectedDir = ref<string>();
+
+const canSubmit = computed(() => {
+  return Boolean(
+    selectedDir.value &&
+    fileName.value.trim() &&
+    props.typeDefinition.isCode &&
+    props.typeDefinition.content.trim(),
+  );
+});
+
+/** ====================  方法  ==================== */
+async function handleConfirm() {
+  if (!canSubmit.value || !selectedDir.value) {
+    message.warning('请选择存储位置并填写文件名称');
+    return;
+  }
+
+  await submitWrite(false);
+}
+
+async function handleLoadDirs() {
+  dirLoading.value = true;
+
+  try {
+    dirTreeData.value = await getApiTypeDirTree();
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : '加载 API 目录失败');
+  } finally {
+    dirLoading.value = false;
+  }
+}
+
+function handleOpenChange(visible: boolean) {
+  open.value = visible;
+}
+
+function resetForm() {
+  autoImport.value = false;
+  fileName.value = 'type.ts';
+  selectedDir.value = undefined;
+}
+
+async function submitWrite(overwrite: boolean) {
+  if (!selectedDir.value) {
+    return;
+  }
+
+  confirmLoading.value = true;
+
+  try {
+    const result = await writeApiTypeFile({
+      autoImport: autoImport.value,
+      content: props.typeDefinition.content,
+      dir: selectedDir.value,
+      fileName: fileName.value,
+      overwrite,
+    });
+
+    if (!result) {
+      message.error('生成失败');
+      return;
+    }
+
+    if (result.importSkipped && autoImport.value) {
+      message.warning(
+        `已生成 ${result.filePath}，index.ts 不存在或无类型可导入`,
+      );
+    } else {
+      message.success(`已生成 ${result.filePath}`);
+    }
+
+    open.value = false;
+    emit('success');
+  } catch (error) {
+    if (
+      error instanceof ApiTypeGeneratorError &&
+      error.code === 'FILE_EXISTS' &&
+      !overwrite
+    ) {
+      Modal.confirm({
+        content: '目标文件已存在，确认覆盖吗？',
+        okText: '覆盖',
+        onOk: () => submitWrite(true),
+        title: '确认覆盖',
+      });
+      return;
+    }
+
+    message.error(error instanceof Error ? error.message : '生成失败');
+  } finally {
+    confirmLoading.value = false;
+  }
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+watch(open, (visible) => {
+  if (!visible) {
+    return;
+  }
+
+  resetForm();
+  handleLoadDirs();
+});
+</script>
+
+<template>
+  <Modal
+    centered
+    :confirm-loading="confirmLoading"
+    :ok-button-props="{ disabled: !canSubmit }"
+    :open="open"
+    title="生成类型文件"
+    width="560px"
+    @cancel="handleOpenChange(false)"
+    @ok="handleConfirm"
+  >
+    <Form layout="vertical">
+      <FormItem label="存储位置" required>
+        <TreeSelect
+          v-model:value="selectedDir"
+          allow-clear
+          class="w-full"
+          :field-names="{
+            children: 'children',
+            label: 'title',
+            value: 'value',
+          }"
+          :loading="dirLoading"
+          placeholder="请选择 apps/web-antd/src/api 下的文件夹"
+          show-search
+          :tree-data="dirTreeData"
+          tree-node-filter-prop="title"
+        />
+      </FormItem>
+
+      <FormItem label="文件名称" required>
+        <Input v-model:value="fileName" placeholder="type.ts" />
+      </FormItem>
+
+      <FormItem label="一键导入">
+        <Switch v-model:checked="autoImport" />
+        <span class="ml-2 text-[#8c8c8c]">
+          打开后只在同目录 index.ts 插入 import type
+        </span>
+      </FormItem>
+    </Form>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/composables/useApiBrowser.ts b/admin-ui/vue/apps/web-antd/src/views/system/api/composables/useApiBrowser.ts
new file mode 100644
index 0000000..9368c08
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/composables/useApiBrowser.ts
@@ -0,0 +1,430 @@
+import type {
+  ApiTreeNode,
+  OpenApiDoc,
+  OperationRow,
+  SchemaPropertyRow,
+  TreeKey,
+  TypeDefinitionState,
+  TypeGenerateFolderOption,
+} from '../types';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { GetApiJSON } from '#/api/utils';
+
+import {
+  DEFAULT_REMOVE_PREFIX,
+  HTTP_METHODS,
+  TYPE_DEFINITION_EMPTY_TEXT,
+} from '../constants';
+import {
+  buildApiTree,
+  collectFolderKeys,
+  findTreeNode,
+  formatDisplayPath as formatDisplayPathByPrefix,
+  getApiGroupTitle,
+  getApiNameByPath,
+  getDirectApiOperations,
+  getFolderSegments,
+  getModuleName,
+  getPathExpandKeys,
+} from '../utils/api-tree';
+import {
+  formatSchemaRef,
+  formatSchemaType,
+  toSchemaPropertyRows,
+} from '../utils/schema';
+import { generateTypeDefinition } from '../utils/type-definition';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+const apiDoc = ref<OpenApiDoc>();
+const expandedKeys = ref<TreeKey[]>([]);
+const removePrefix = ref(DEFAULT_REMOVE_PREFIX);
+const loading = ref(false);
+const searchValue = ref('');
+const selectedKeys = ref<TreeKey[]>([]);
+const selectedOperationKey = ref('');
+const errorMessage = ref('');
+
+const operations = computed<OperationRow[]>(() => {
+  const paths = apiDoc.value?.paths ?? {};
+
+  return Object.entries(paths).flatMap(([path, pathConfig]) => {
+    return Object.entries(pathConfig)
+      .filter(([method]) => HTTP_METHODS.includes(method as any))
+      .map(([method, operation]) => {
+        const content = operation.requestBody?.content ?? {};
+        const jsonSchema = content['application/json']?.schema;
+        const responseContent =
+          operation.responses?.['200']?.content?.['application/json'];
+
+        return {
+          key: `${method.toUpperCase()}:${path}`,
+          method: method.toUpperCase(),
+          moduleName: getModuleName(path),
+          operation,
+          parameterText: (operation.parameters ?? [])
+            .map((item) => item.name)
+            .filter(Boolean)
+            .join(', '),
+          path,
+          permission: operation['x-check-permission'] ?? '',
+          requestRef: formatSchemaRef(jsonSchema?.$ref),
+          responseRef: formatSchemaRef(responseContent?.schema?.$ref),
+          summary: operation.summary ?? getApiNameByPath(path),
+          tag: operation.tags?.[0] ?? '未分组',
+        };
+      });
+  });
+});
+
+const filteredOperations = computed(() => {
+  const keyword = searchValue.value.trim().toLowerCase();
+
+  if (!keyword) {
+    return operations.value;
+  }
+
+  return operations.value.filter((item) => {
+    return [
+      item.method,
+      item.path,
+      item.permission,
+      item.summary,
+      item.tag,
+    ].some((value) => value.toLowerCase().includes(keyword));
+  });
+});
+
+const apiTreeData = computed<ApiTreeNode[]>(() => {
+  return buildApiTree(filteredOperations.value, '');
+});
+
+const selectedOperation = computed(() => {
+  return (
+    operations.value.find((item) => item.key === selectedOperationKey.value) ??
+    null
+  );
+});
+
+const selectedTreeNode = computed(() => {
+  const key = selectedKeys.value[0];
+
+  if (!key) {
+    return null;
+  }
+
+  return findTreeNode(apiTreeData.value, String(key));
+});
+
+const selectedRequestSchema = computed(() => {
+  return getSchemaByRef(selectedOperation.value?.requestRef);
+});
+
+const selectedResponseSchema = computed(() => {
+  return getSchemaByRef(selectedOperation.value?.responseRef);
+});
+
+const selectedDisplayPath = computed(() => {
+  return formatDisplayPath(selectedOperation.value?.path ?? '');
+});
+
+const requestSchemaRows = computed(() => {
+  return toSchemaPropertyRows(selectedRequestSchema.value);
+});
+
+const responseSchemaRows = computed(() => {
+  return toSchemaPropertyRows(selectedResponseSchema.value);
+});
+
+const parameterRows = computed<SchemaPropertyRow[]>(() => {
+  return (selectedOperation.value?.operation.parameters ?? []).map(
+    (item, index) => ({
+      description: item.description ?? '',
+      key: `${item.name ?? index}`,
+      name: item.name ?? '',
+      requiredText: item.required ? '是' : '否',
+      type: formatSchemaType(item.schema),
+    }),
+  );
+});
+
+const requestPlaceholder = computed(() => {
+  return JSON.stringify(requestDefaultParams.value, null, 2);
+});
+
+const requestDefaultParams = computed(() => {
+  const params: Record<string, unknown> = {};
+
+  for (const item of requestParamRows.value) {
+    params[item.name] = getDefaultValueByType(item.type);
+  }
+
+  return params;
+});
+
+const requestParamRows = computed(() => {
+  const existedNames = new Set<string>();
+  const rows = [...parameterRows.value, ...requestSchemaRows.value];
+
+  return rows.filter((item) => {
+    if (!item.name || existedNames.has(item.name)) {
+      return false;
+    }
+
+    existedNames.add(item.name);
+    return true;
+  });
+});
+
+const documentDesc = computed(() => {
+  const descList = [apiDoc.value?.info?.title || '未提供文档标题'];
+
+  if (apiDoc.value?.openapi) {
+    descList.push(`OpenAPI ${apiDoc.value.openapi}`);
+  }
+
+  if (apiDoc.value?.info?.version) {
+    descList.push(`版本 ${apiDoc.value.info.version}`);
+  }
+
+  return descList.join(' · ');
+});
+
+const searchExpandKeys = computed(() => {
+  return collectFolderKeys(apiTreeData.value);
+});
+
+const selectedTypeOperations = computed(() => {
+  if (selectedOperation.value) {
+    return [selectedOperation.value];
+  }
+
+  if (selectedTreeNode.value?.type !== 'folder') {
+    return [];
+  }
+
+  return getDirectApiOperations(selectedTreeNode.value);
+});
+
+const selectedTypeDefinition = computed<TypeDefinitionState>(() => {
+  if (selectedTypeOperations.value.length === 0) {
+    return {
+      content: TYPE_DEFINITION_EMPTY_TEXT,
+      isCode: false,
+    };
+  }
+
+  return {
+    content: generateTypeDefinition(
+      selectedTypeOperations.value,
+      apiDoc.value?.components?.schemas,
+      removePrefix.value,
+    ),
+    isCode: true,
+  };
+});
+
+const selectedTypeGroupName = computed(() => {
+  if (selectedTreeNode.value?.type === 'folder') {
+    return selectedTreeNode.value.title;
+  }
+
+  const operation = selectedOperation.value;
+
+  if (!operation) {
+    return '';
+  }
+
+  const segments = getFolderSegments(formatDisplayPath(operation.path));
+  const folderName = segments.at(-1) ?? getApiNameByPath(operation.path);
+
+  return getApiGroupTitle(folderName, operation);
+});
+
+const typeGenerateFolderOptions = computed<TypeGenerateFolderOption[]>(() => {
+  return collectTypeGenerateFolderOptions(apiTreeData.value);
+});
+
+/** ====================  方法  ==================== */
+function collectTypeGenerateFolderOptions(
+  nodes: ApiTreeNode[],
+): TypeGenerateFolderOption[] {
+  return nodes.flatMap((node) => {
+    const children = node.children ?? [];
+    const childOptions = collectTypeGenerateFolderOptions(children);
+    const directOperations = getDirectApiOperations(node);
+
+    if (node.type !== 'folder' || directOperations.length === 0) {
+      return childOptions;
+    }
+
+    return [
+      {
+        content: generateTypeDefinition(
+          directOperations,
+          apiDoc.value?.components?.schemas,
+          removePrefix.value,
+        ),
+        key: node.key,
+        label: node.title,
+        operationCount: directOperations.length,
+      },
+      ...childOptions,
+    ];
+  });
+}
+
+function formatDisplayPath(path: string) {
+  return formatDisplayPathByPrefix(path, removePrefix.value);
+}
+
+function getSchemaByRef(ref?: string) {
+  if (!ref) {
+    return undefined;
+  }
+
+  return apiDoc.value?.components?.schemas?.[ref];
+}
+
+function getDefaultValueByType(type: string) {
+  const normalizedType = type.toLowerCase();
+
+  if (normalizedType.includes('boolean')) {
+    return false;
+  }
+
+  if (
+    normalizedType.includes('integer') ||
+    normalizedType.includes('number') ||
+    normalizedType === 'int' ||
+    normalizedType.includes('int32') ||
+    normalizedType.includes('int64')
+  ) {
+    return 0;
+  }
+
+  if (normalizedType.includes('array') || normalizedType.endsWith('[]')) {
+    return [];
+  }
+
+  if (normalizedType.includes('object') || normalizedType.includes('record')) {
+    return {};
+  }
+
+  return '';
+}
+
+function handleSelect(keys: TreeKey[], info: { node: unknown }) {
+  const node = info.node as ApiTreeNode;
+
+  if (node.type === 'folder') {
+    selectedKeys.value = [node.key];
+    selectedOperationKey.value = '';
+    toggleExpandedKey(node.key);
+    return;
+  }
+
+  if (!node.operation) {
+    return;
+  }
+
+  selectedKeys.value = keys;
+  selectedOperationKey.value = node.operation.key;
+}
+
+function initSelectedOperation() {
+  const firstOperation = operations.value[0];
+
+  if (!firstOperation) {
+    return;
+  }
+
+  selectedOperationKey.value = firstOperation.key;
+  selectedKeys.value = [firstOperation.key];
+  expandedKeys.value = getPathExpandKeys(firstOperation.path, '');
+}
+
+async function loadApiJson() {
+  loading.value = true;
+  errorMessage.value = '';
+
+  try {
+    const data = await GetApiJSON();
+
+    if (!isOpenApiDoc(data)) {
+      throw new Error('api.json 不是有效的 OpenAPI 文档');
+    }
+
+    apiDoc.value = data;
+    initSelectedOperation();
+  } catch (error) {
+    errorMessage.value =
+      error instanceof Error ? error.message : '获取 api.json 失败';
+    apiDoc.value = undefined;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function isOpenApiDoc(data: unknown): data is OpenApiDoc {
+  return Boolean(
+    data && typeof data === 'object' && 'openapi' in data && 'paths' in data,
+  );
+}
+
+function toggleExpandedKey(key: string) {
+  expandedKeys.value = expandedKeys.value.includes(key)
+    ? expandedKeys.value.filter((item) => item !== key)
+    : [...expandedKeys.value, key];
+}
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+export function useApiBrowser() {
+  onMounted(() => {
+    loadApiJson();
+  });
+
+  watch(searchValue, () => {
+    if (searchValue.value.trim()) {
+      expandedKeys.value = searchExpandKeys.value;
+      return;
+    }
+
+    expandedKeys.value = selectedOperation.value
+      ? getPathExpandKeys(selectedOperation.value.path, '')
+      : [];
+  });
+
+  return {
+    apiTreeData,
+    documentDesc,
+    errorMessage,
+    expandedKeys,
+    filteredOperations,
+    formatDisplayPath,
+    handleSelect,
+    loading,
+    parameterRows,
+    requestDefaultParams,
+    removePrefix,
+    requestPlaceholder,
+    requestParamRows,
+    requestSchemaRows,
+    responseSchemaRows,
+    searchValue,
+    selectedDisplayPath,
+    selectedKeys,
+    selectedOperation,
+    selectedTreeNode,
+    selectedTypeDefinition,
+    selectedTypeGroupName,
+    typeGenerateFolderOptions,
+  };
+}
+
+export type ApiBrowserContext = ReturnType<typeof useApiBrowser>;
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/constants.ts b/admin-ui/vue/apps/web-antd/src/views/system/api/constants.ts
new file mode 100644
index 0000000..f85f0a8
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/constants.ts
@@ -0,0 +1,35 @@
+export const HTTP_METHODS = ['get', 'post', 'put', 'delete', 'patch'] as const;
+
+export const DEFAULT_REMOVE_PREFIX = '/api/v1';
+
+export const methodColorMap: Record<string, string> = {
+  DELETE: 'red',
+  GET: 'green',
+  PATCH: 'orange',
+  POST: 'volcano',
+  PUT: 'blue',
+};
+
+export const TYPE_DEFINITION_EMPTY_TEXT = '请选择接口或接口文件夹';
+
+export const actionSortWeight: Record<string, number> = {
+  delete: 5,
+  edit: 3,
+  export: 2,
+  list: 1,
+  view: 4,
+};
+
+export const isDev = import.meta.env.DEV;
+
+export const schemaColumns = [
+  { dataIndex: 'name', ellipsis: true, key: 'name', title: '字段', width: 180 },
+  { dataIndex: 'type', key: 'type', title: '类型', width: 140 },
+  { dataIndex: 'requiredText', key: 'requiredText', title: '必填', width: 80 },
+  {
+    dataIndex: 'description',
+    ellipsis: true,
+    key: 'description',
+    title: '说明',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/context.ts b/admin-ui/vue/apps/web-antd/src/views/system/api/context.ts
new file mode 100644
index 0000000..85cb3c9
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/context.ts
@@ -0,0 +1,19 @@
+import type { ApiBrowserContext } from './composables/useApiBrowser';
+
+import { inject, provide } from 'vue';
+
+const apiBrowserContextKey = Symbol('api-browser-context');
+
+export function provideApiBrowserContext(context: ApiBrowserContext) {
+  provide(apiBrowserContextKey, context);
+}
+
+export function useApiBrowserContext() {
+  const context = inject<ApiBrowserContext>(apiBrowserContextKey);
+
+  if (!context) {
+    throw new Error('ApiBrowserContext 未提供');
+  }
+
+  return context;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/api/index.vue
new file mode 100644
index 0000000..f9b3710
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/index.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts" name="ApiJsonOverview">
+import { Page } from '@vben/common-ui';
+
+import {
+  Alert,
+  Card,
+  Empty,
+  Skeleton,
+  TabPane,
+  Tabs,
+  Tag,
+} from 'ant-design-vue';
+
+import ApiBrowserHeader from './components/ApiBrowserHeader.vue';
+import ApiDetailTab from './components/ApiDetailTab.vue';
+import ApiRequestTestTab from './components/ApiRequestTestTab.vue';
+import ApiTreePanel from './components/ApiTreePanel.vue';
+import ApiTypeDefinitionTab from './components/ApiTypeDefinitionTab.vue';
+import { useApiBrowser } from './composables/useApiBrowser.js';
+import { methodColorMap } from './constants.js';
+import { provideApiBrowserContext } from './context.js';
+
+/** ====================  常量  ==================== */
+
+/** ====================  数据  ==================== */
+const apiBrowser = useApiBrowser();
+const { errorMessage, loading, selectedOperation, selectedTreeNode } =
+  apiBrowser;
+
+/** ====================  方法  ==================== */
+provideApiBrowserContext(apiBrowser);
+
+/** ====================  组件  ==================== */
+
+/** ====================  周期  ==================== */
+</script>
+
+<template>
+  <Page>
+    <div
+      class="flex h-[calc(100vh-132px)] min-h-[640px] flex-col gap-3 max-[1200px]:h-auto"
+    >
+      <Alert
+        v-if="errorMessage"
+        :message="errorMessage"
+        class="mb-3"
+        show-icon
+        type="error"
+      />
+
+      <ApiBrowserHeader />
+
+      <div
+        class="grid min-h-0 flex-1 grid-cols-[minmax(420px,36%)_minmax(0,1fr)] gap-3 max-[1200px]:grid-cols-1"
+      >
+        <ApiTreePanel class="max-[1200px]:h-[520px]" />
+
+        <Card
+          :body-style="{
+            height: 'calc(100% - 56px)',
+            overflowY: 'auto',
+          }"
+          :bordered="false"
+          class="min-h-0"
+        >
+          <template #title>
+            <div class="flex w-full items-center justify-between">
+              <span>接口详情</span>
+              <Tag
+                v-if="selectedOperation"
+                :color="methodColorMap[selectedOperation.method]"
+              >
+                {{ selectedOperation.method }}
+              </Tag>
+            </div>
+          </template>
+
+          <Skeleton :loading="loading" active :paragraph="{ rows: 12 }">
+            <Tabs
+              v-if="selectedTreeNode"
+              class="h-full [&_.ant-tabs-content]:h-full [&_.ant-tabs-tabpane]:h-full"
+            >
+              <TabPane key="type" tab="类型定义">
+                <ApiTypeDefinitionTab />
+              </TabPane>
+
+              <TabPane key="detail" tab="详情">
+                <ApiDetailTab />
+              </TabPane>
+
+              <TabPane key="request" tab="请求测试">
+                <ApiRequestTestTab />
+              </TabPane>
+            </Tabs>
+
+            <div v-else class="flex h-full items-center justify-center">
+              <Empty description="请选择左侧 API 查看详情" />
+            </div>
+          </Skeleton>
+        </Card>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/types.ts b/admin-ui/vue/apps/web-antd/src/views/system/api/types.ts
new file mode 100644
index 0000000..d755359
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/types.ts
@@ -0,0 +1,101 @@
+export interface OpenApiParameter {
+  description?: string;
+  in?: string;
+  name?: string;
+  required?: boolean;
+  schema?: OpenApiSchema;
+}
+
+export interface OpenApiOperation {
+  parameters?: OpenApiParameter[];
+  requestBody?: {
+    content?: Record<string, { schema?: OpenApiSchema }>;
+  };
+  responses?: Record<
+    string,
+    {
+      content?: Record<string, { schema?: OpenApiSchema }>;
+      description?: string;
+    }
+  >;
+  summary?: string;
+  tags?: string[];
+  'x-check-permission'?: string;
+}
+
+export interface OpenApiSchema {
+  $ref?: string;
+  description?: string;
+  format?: string;
+  items?: OpenApiSchema;
+  properties?: Record<string, OpenApiSchema>;
+  required?: string[];
+  type?: string;
+}
+
+export interface OpenApiDoc {
+  components?: {
+    schemas?: Record<string, OpenApiSchema>;
+  };
+  info?: {
+    title?: string;
+    version?: string;
+  };
+  openapi?: string;
+  paths?: Record<string, Record<string, OpenApiOperation>>;
+}
+
+export interface OperationRow {
+  key: string;
+  method: string;
+  moduleName: string;
+  operation: OpenApiOperation;
+  parameterText: string;
+  path: string;
+  permission: string;
+  requestRef: string;
+  responseRef: string;
+  summary: string;
+  tag: string;
+}
+
+export interface ApiTreeNode {
+  children?: ApiTreeNode[];
+  count: number;
+  folderLabel?: string;
+  isLeaf?: boolean;
+  key: string;
+  operation?: OperationRow;
+  title: string;
+  type: 'api' | 'folder';
+}
+
+export interface SchemaPropertyRow {
+  description: string;
+  key: string;
+  name: string;
+  requiredText: string;
+  type: string;
+}
+
+export interface TypeDefinitionContext {
+  declarations: string[];
+  emittedNames: Set<string>;
+  schemaNameMap: Map<string, string>;
+  useGlobalListRes: boolean;
+  useMemberSumma: boolean;
+}
+
+export interface TypeDefinitionState {
+  content: string;
+  isCode: boolean;
+}
+
+export interface TypeGenerateFolderOption {
+  content: string;
+  key: string;
+  label: string;
+  operationCount: number;
+}
+
+export type TreeKey = number | string;
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/utils/api-tree.ts b/admin-ui/vue/apps/web-antd/src/views/system/api/utils/api-tree.ts
new file mode 100644
index 0000000..a21ede0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/utils/api-tree.ts
@@ -0,0 +1,183 @@
+import type { ApiTreeNode, OperationRow } from '../types';
+
+export function buildApiTree(
+  data: OperationRow[],
+  removePrefix: string,
+): ApiTreeNode[] {
+  const rootMap = new Map<string, ApiTreeNode>();
+
+  for (const item of data) {
+    const segments = getFolderSegments(
+      formatDisplayPath(item.path, removePrefix),
+    );
+    let currentMap = rootMap;
+    let currentChildren: ApiTreeNode[] | undefined;
+    let parentKey = '';
+
+    for (const [index, segment] of segments.entries()) {
+      const isApiGroup = index === segments.length - 1;
+      const nodeKey = parentKey ? `${parentKey}/${segment}` : segment;
+      let node = currentMap.get(nodeKey);
+
+      if (!node) {
+        node = {
+          children: [],
+          count: 0,
+          key: nodeKey,
+          title: segment,
+          type: 'folder',
+        };
+        currentMap.set(nodeKey, node);
+
+        if (currentChildren) {
+          currentChildren.push(node);
+        }
+      }
+
+      if (isApiGroup) {
+        node.folderLabel = getApiGroupTitle(segment, item);
+      }
+
+      node.count += 1;
+      currentChildren = node.children;
+      currentMap = toTreeNodeMap(node.children ?? []);
+      parentKey = nodeKey;
+    }
+
+    currentChildren?.push({
+      count: 1,
+      isLeaf: true,
+      key: item.key,
+      operation: item,
+      title: item.summary,
+      type: 'api',
+    });
+  }
+
+  return sortTreeNodes(formatFolderTitles([...rootMap.values()]));
+}
+
+export function collectFolderKeys(data: ApiTreeNode[]) {
+  const keys: string[] = [];
+
+  for (const item of data) {
+    if (item.type === 'folder') {
+      keys.push(item.key);
+    }
+
+    if (item.children?.length) {
+      keys.push(...collectFolderKeys(item.children));
+    }
+  }
+
+  return keys;
+}
+
+export function findTreeNode(
+  nodes: ApiTreeNode[],
+  key: string,
+): ApiTreeNode | null {
+  for (const item of nodes) {
+    if (item.key === key) {
+      return item;
+    }
+
+    const child = item.children ? findTreeNode(item.children, key) : null;
+
+    if (child) {
+      return child;
+    }
+  }
+
+  return null;
+}
+
+export function formatDisplayPath(path: string, removePrefix: string) {
+  const prefix = removePrefix.trim();
+
+  if (!prefix || !path.startsWith(prefix)) {
+    return path;
+  }
+
+  return path.replace(prefix, '') || '/';
+}
+
+export function getApiGroupTitle(segment: string, item: OperationRow) {
+  if (!item.tag || item.tag === '未分组') {
+    return segment;
+  }
+
+  return `${item.tag}(${segment})`;
+}
+
+export function getApiNameByPath(path: string) {
+  return path.split('/').findLast(Boolean) ?? path;
+}
+
+export function getDirectApiOperations(node: ApiTreeNode) {
+  return (node.children ?? []).map((item) => item.operation).filter(Boolean);
+}
+
+export function getFolderSegments(path: string) {
+  const segments = path.split('/').filter(Boolean);
+
+  return segments.length > 1 ? segments.slice(0, -1) : segments;
+}
+
+export function getModuleName(path: string) {
+  return path.split('/').filter(Boolean)[2] ?? 'unknown';
+}
+
+export function getPathExpandKeys(path: string, removePrefix: string) {
+  const segments = getFolderSegments(formatDisplayPath(path, removePrefix));
+  const keys: string[] = [];
+  let parentKey = '';
+
+  for (const segment of segments) {
+    const key = parentKey ? `${parentKey}/${segment}` : segment;
+
+    keys.push(key);
+    parentKey = key;
+  }
+
+  return keys;
+}
+
+export function sortTreeNodes(nodes: ApiTreeNode[]): ApiTreeNode[] {
+  return nodes
+    .map((item) => ({
+      ...item,
+      children: item.children ? sortTreeNodes(item.children) : undefined,
+    }))
+    .toSorted((prev, next) => {
+      if (prev.type !== next.type) {
+        return prev.type === 'folder' ? -1 : 1;
+      }
+
+      if (prev.type === 'api' && next.type === 'api') {
+        return (prev.operation?.method ?? '').localeCompare(
+          next.operation?.method ?? '',
+        );
+      }
+
+      return prev.title.localeCompare(next.title);
+    });
+}
+
+function formatFolderTitles(nodes: ApiTreeNode[]): ApiTreeNode[] {
+  return nodes.map((item) => {
+    const children = item.children ? formatFolderTitles(item.children) : [];
+    const hasFolderChild = children.some((child) => child.type === 'folder');
+
+    return {
+      ...item,
+      children,
+      title:
+        item.folderLabel && !hasFolderChild ? item.folderLabel : item.title,
+    };
+  });
+}
+
+function toTreeNodeMap(nodes: ApiTreeNode[]) {
+  return new Map(nodes.map((item) => [item.key, item]));
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/utils/schema.ts b/admin-ui/vue/apps/web-antd/src/views/system/api/utils/schema.ts
new file mode 100644
index 0000000..6278af7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/utils/schema.ts
@@ -0,0 +1,196 @@
+import type {
+  OpenApiSchema,
+  SchemaPropertyRow,
+  TypeDefinitionContext,
+} from '../types';
+
+export function collectSchemaRefs(
+  schema?: OpenApiSchema,
+  refs = new Set<string>(),
+) {
+  if (!schema) {
+    return refs;
+  }
+
+  if (schema.$ref) {
+    refs.add(formatSchemaRef(schema.$ref));
+  }
+
+  if (schema.items) {
+    collectSchemaRefs(schema.items, refs);
+  }
+
+  for (const property of Object.values(schema.properties ?? {})) {
+    collectSchemaRefs(property, refs);
+  }
+
+  return refs;
+}
+
+export function formatSchemaRef(ref?: string) {
+  return ref?.replace('#/components/schemas/', '') ?? '';
+}
+
+export function formatSchemaType(schema?: OpenApiSchema): string {
+  if (!schema) {
+    return '-';
+  }
+
+  if (schema.$ref) {
+    return formatSchemaRef(schema.$ref);
+  }
+
+  if (schema.type === 'array') {
+    return `${formatSchemaType(schema.items)}[]`;
+  }
+
+  return schema.format || schema.type || '-';
+}
+
+export function formatTypeScriptType(
+  schema: OpenApiSchema | undefined,
+  context: TypeDefinitionContext,
+): string {
+  if (!schema) {
+    return 'any';
+  }
+
+  if (schema.$ref) {
+    const ref = formatSchemaRef(schema.$ref);
+
+    if (isMemberSummaRef(ref)) {
+      context.useMemberSumma = true;
+      return 'MemberSumma';
+    }
+
+    if (ref === 'interface') {
+      return 'number | number[]';
+    }
+
+    return context.schemaNameMap.get(ref) ?? getTypeNameFromSchemaRef(ref);
+  }
+
+  if (schema.type === 'array') {
+    return `${formatTypeScriptType(schema.items, context)}[]`;
+  }
+
+  if (schema.type === 'integer' || schema.type === 'number') {
+    return 'number';
+  }
+
+  if (schema.type === 'boolean') {
+    return 'boolean';
+  }
+
+  if (schema.type === 'object') {
+    return schema.properties && Object.keys(schema.properties).length > 0
+      ? 'Record<string, any>'
+      : 'Record<string, never>';
+  }
+
+  return 'string';
+}
+
+export function getFieldSignature(
+  schema: OpenApiSchema,
+  context: TypeDefinitionContext,
+) {
+  return Object.entries(schema.properties ?? {})
+    .map(([key, property]) => {
+      const required = schema.required?.includes(key) ? '1' : '0';
+
+      return `${key}:${formatTypeScriptType(property, context)}:${required}`;
+    })
+    .toSorted()
+    .join('|');
+}
+
+export function getPropertyDescription(name: string, schema: OpenApiSchema) {
+  if (schema.description) {
+    return schema.description;
+  }
+
+  return name === 'id' ? '主键ID' : name;
+}
+
+export function getTypeNameFromSchemaRef(ref: string) {
+  return toPascalCase(ref.split('.').findLast(Boolean) ?? ref);
+}
+
+export function isEmptyObjectSchema(schema?: OpenApiSchema) {
+  return Object.keys(schema?.properties ?? {}).length === 0;
+}
+
+export function isGlobalListSchema(schema: OpenApiSchema) {
+  const properties = schema.properties ?? {};
+
+  return Boolean(
+    properties.page &&
+    properties.pageSize &&
+    properties.total &&
+    properties.items?.type === 'array',
+  );
+}
+
+export function isMemberSummaRef(ref: string) {
+  return ref.endsWith('.MemberSumma') || ref === 'MemberSumma';
+}
+
+export function isSameSchemaShape(prev: OpenApiSchema, next: OpenApiSchema) {
+  const context = createCompareTypeContext();
+
+  return getFieldSignature(prev, context) === getFieldSignature(next, context);
+}
+
+export function isSameSchemaShapeIgnoreRequired(
+  prev: OpenApiSchema,
+  next: OpenApiSchema,
+) {
+  const context = createCompareTypeContext();
+  const normalize = (schema: OpenApiSchema) => {
+    return Object.entries(schema.properties ?? {})
+      .map(
+        ([key, property]) =>
+          `${key}:${formatTypeScriptType(property, context)}`,
+      )
+      .toSorted()
+      .join('|');
+  };
+
+  return normalize(prev) === normalize(next);
+}
+
+export function toPascalCase(value: string) {
+  const safeValue = value.replaceAll(/\W/g, ' ');
+
+  return safeValue
+    .split(/[\s_-]+/)
+    .filter(Boolean)
+    .map((item) => `${item.charAt(0).toUpperCase()}${item.slice(1)}`)
+    .join('');
+}
+
+export function toSchemaPropertyRows(
+  schema?: OpenApiSchema,
+): SchemaPropertyRow[] {
+  const properties = schema?.properties ?? {};
+  const requiredList = schema?.required ?? [];
+
+  return Object.entries(properties).map(([name, property]) => ({
+    description: property.description ?? '',
+    key: name,
+    name,
+    requiredText: requiredList.includes(name) ? '是' : '否',
+    type: formatSchemaType(property),
+  }));
+}
+
+function createCompareTypeContext(): TypeDefinitionContext {
+  return {
+    declarations: [],
+    emittedNames: new Set<string>(),
+    schemaNameMap: new Map<string, string>(),
+    useGlobalListRes: false,
+    useMemberSumma: false,
+  };
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/utils/type-definition.ts b/admin-ui/vue/apps/web-antd/src/views/system/api/utils/type-definition.ts
new file mode 100644
index 0000000..56ecc0c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/utils/type-definition.ts
@@ -0,0 +1,567 @@
+import type {
+  OpenApiSchema,
+  OperationRow,
+  TypeDefinitionContext,
+} from '../types';
+
+import { actionSortWeight, TYPE_DEFINITION_EMPTY_TEXT } from '../constants';
+import {
+  formatDisplayPath,
+  getApiNameByPath,
+  getFolderSegments,
+} from './api-tree';
+import {
+  collectSchemaRefs,
+  formatSchemaRef,
+  formatTypeScriptType,
+  getPropertyDescription,
+  isEmptyObjectSchema,
+  isGlobalListSchema,
+  isSameSchemaShape,
+  isSameSchemaShapeIgnoreRequired,
+  toPascalCase,
+} from './schema';
+
+export function generateTypeDefinition(
+  data: OperationRow[],
+  schemas?: Record<string, OpenApiSchema>,
+  removePrefix = '',
+) {
+  const firstOperation = data[0];
+
+  if (!firstOperation) {
+    return TYPE_DEFINITION_EMPTY_TEXT;
+  }
+
+  if (data.length === 1) {
+    return generateOperationTypeDefinition(
+      firstOperation,
+      schemas,
+      removePrefix,
+    );
+  }
+
+  return generateResourceTypeDefinition(data, schemas, removePrefix);
+}
+
+export function getActionName(item: OperationRow) {
+  return item.path.split('/').findLast(Boolean)?.toLowerCase() ?? 'api';
+}
+
+function buildTypeDefinitionContent(context: TypeDefinitionContext) {
+  const imports: string[] = [];
+
+  if (context.useGlobalListRes) {
+    imports.push("import type { GlobalListRes } from '#/types/global';");
+  }
+
+  if (context.useMemberSumma) {
+    imports.push("import type { MemberSumma } from '#/utils';");
+  }
+
+  if (imports.length === 0) {
+    return context.declarations.join('\n\n');
+  }
+
+  if (context.declarations.length === 0) {
+    return imports.join('\n');
+  }
+
+  return `${imports.join('\n')}\n\n${context.declarations.join('\n\n')}`;
+}
+
+function createTypeDefinitionContext(): TypeDefinitionContext {
+  return {
+    declarations: [],
+    emittedNames: new Set<string>(),
+    schemaNameMap: new Map<string, string>(),
+    useGlobalListRes: false,
+    useMemberSumma: false,
+  };
+}
+
+function emitInterfaceDeclaration(
+  context: TypeDefinitionContext,
+  name: string,
+  schema: OpenApiSchema,
+  comment: string,
+  allRequired = false,
+) {
+  if (context.emittedNames.has(name)) {
+    return;
+  }
+
+  const rows = Object.entries(schema.properties ?? {});
+  const requiredList = schema.required ?? [];
+  const lines = [`/** ${comment} */`, `export interface ${name} {`];
+
+  for (const [propertyName, propertySchema] of rows) {
+    const optionalMark =
+      allRequired || requiredList.includes(propertyName) ? '' : '?';
+
+    lines.push(
+      `  /** ${getPropertyDescription(propertyName, propertySchema)} */`,
+      `  ${propertyName}${optionalMark}: ${formatTypeScriptType(
+        propertySchema,
+        context,
+      )};`,
+    );
+  }
+
+  lines.push('}');
+  context.emittedNames.add(name);
+  context.declarations.push(lines.join('\n'));
+}
+
+function emitOperationParam(
+  context: TypeDefinitionContext,
+  item: OperationRow,
+  resourceName: string,
+  actionName: string,
+  schemas?: {
+    listParamsSchema?: OpenApiSchema;
+    openApiSchemas?: Record<string, OpenApiSchema>;
+  },
+) {
+  const paramsSchema = getOperationParamsSchema(item, schemas?.openApiSchemas);
+
+  if (!paramsSchema || isEmptyObjectSchema(paramsSchema)) {
+    return;
+  }
+
+  const typeName = `${resourceName}${toPascalCase(actionName)}Param`;
+
+  if (
+    actionName === 'export' &&
+    schemas?.listParamsSchema &&
+    isSameSchemaShapeIgnoreRequired(paramsSchema, schemas.listParamsSchema)
+  ) {
+    emitTypeAliasDeclaration(
+      context,
+      typeName,
+      `${resourceName}ListParam`,
+      `${item.summary} 请求参数`,
+    );
+    return;
+  }
+
+  emitInterfaceDeclaration(
+    context,
+    typeName,
+    paramsSchema,
+    `${item.summary} 请求参数`,
+    actionName === 'delete',
+  );
+}
+
+function emitOperationResponse(
+  context: TypeDefinitionContext,
+  item: OperationRow,
+  resourceName: string,
+  actionName: string,
+  schemas?: {
+    listItemSchema?: OpenApiSchema;
+    openApiSchemas?: Record<string, OpenApiSchema>;
+    viewSchema?: OpenApiSchema;
+  },
+) {
+  const responseSchema = getOperationResponseSchema(
+    item,
+    schemas?.openApiSchemas,
+  );
+
+  if (!responseSchema || isEmptyObjectSchema(responseSchema)) {
+    return;
+  }
+
+  const typeName = `${resourceName}${toPascalCase(actionName)}Res`;
+
+  if (actionName === 'list' && isGlobalListSchema(responseSchema)) {
+    context.useGlobalListRes = true;
+    emitTypeAliasDeclaration(
+      context,
+      typeName,
+      `GlobalListRes<${resourceName}Model>`,
+      `${item.summary} 响应`,
+    );
+    return;
+  }
+
+  if (actionName === 'view') {
+    if (
+      schemas?.listItemSchema &&
+      schemas.viewSchema &&
+      isSameSchemaShape(schemas.viewSchema, schemas.listItemSchema)
+    ) {
+      emitTypeAliasDeclaration(
+        context,
+        typeName,
+        `${resourceName}Model`,
+        `${item.summary} 响应`,
+      );
+      return;
+    }
+
+    if (schemas?.viewSchema) {
+      emitInterfaceDeclaration(
+        context,
+        `${resourceName}ViewModel`,
+        schemas.viewSchema,
+        `${item.summary}响应项`,
+        true,
+      );
+      emitTypeAliasDeclaration(
+        context,
+        typeName,
+        `${resourceName}ViewModel`,
+        `${item.summary} 响应`,
+      );
+      return;
+    }
+  }
+
+  const responseTypeName = `${resourceName}${toPascalCase(actionName)}Model`;
+
+  emitInterfaceDeclaration(
+    context,
+    responseTypeName,
+    responseSchema,
+    `${item.summary}响应项`,
+    true,
+  );
+  emitTypeAliasDeclaration(
+    context,
+    typeName,
+    responseTypeName,
+    `${item.summary} 响应`,
+  );
+}
+
+function emitTypeAliasDeclaration(
+  context: TypeDefinitionContext,
+  name: string,
+  value: string,
+  comment: string,
+) {
+  if (context.emittedNames.has(name)) {
+    return;
+  }
+
+  context.emittedNames.add(name);
+  context.declarations.push(
+    `/** ${comment} */\nexport type ${name} = ${value};`,
+  );
+}
+
+function generateOperationTypeDefinition(
+  item: OperationRow,
+  schemas?: Record<string, OpenApiSchema>,
+  removePrefix = '',
+) {
+  const context = createTypeDefinitionContext();
+  const resourceName = getResourceTypeName(item, removePrefix);
+  const actionName = getActionName(item);
+  const listItemSchema = getListItemSchema(item, schemas);
+  const responseSchema = getOperationResponseSchema(item, schemas);
+
+  registerSchemaTypeNames(context, [item], resourceName, schemas);
+
+  if (actionName === 'list' && listItemSchema) {
+    emitInterfaceDeclaration(
+      context,
+      `${resourceName}Model`,
+      listItemSchema,
+      `${item.tag}列表项`,
+      true,
+    );
+  } else if (actionName === 'view' && responseSchema) {
+    emitInterfaceDeclaration(
+      context,
+      `${resourceName}ViewModel`,
+      responseSchema,
+      `${item.summary}响应项`,
+      true,
+    );
+  }
+
+  emitOperationParam(context, item, resourceName, actionName, {
+    openApiSchemas: schemas,
+  });
+  emitOperationResponse(context, item, resourceName, actionName, {
+    listItemSchema,
+    openApiSchemas: schemas,
+    viewSchema: responseSchema,
+  });
+
+  return buildTypeDefinitionContent(context);
+}
+
+function generateResourceTypeDefinition(
+  data: OperationRow[],
+  schemas?: Record<string, OpenApiSchema>,
+  removePrefix = '',
+) {
+  const sortedOperations = sortOperationsByAction(data);
+  const firstOperation = sortedOperations[0];
+
+  if (!firstOperation) {
+    return TYPE_DEFINITION_EMPTY_TEXT;
+  }
+
+  const context = createTypeDefinitionContext();
+  const listOperation = sortedOperations.find(
+    (item) => getActionName(item) === 'list',
+  );
+  const viewOperation = sortedOperations.find(
+    (item) => getActionName(item) === 'view',
+  );
+  const resourceName = getResourceTypeName(firstOperation, removePrefix);
+  const listItemSchema = getListItemSchema(listOperation, schemas);
+  const listParamsSchema = listOperation
+    ? getOperationParamsSchema(listOperation, schemas)
+    : undefined;
+  const viewSchema = getOperationResponseSchema(viewOperation, schemas);
+
+  registerSchemaTypeNames(context, sortedOperations, resourceName, schemas);
+
+  if (listItemSchema) {
+    emitInterfaceDeclaration(
+      context,
+      `${resourceName}Model`,
+      listItemSchema,
+      `${firstOperation.tag}列表项`,
+      true,
+    );
+  }
+
+  if (
+    viewSchema &&
+    listItemSchema &&
+    !isSameSchemaShape(viewSchema, listItemSchema)
+  ) {
+    emitInterfaceDeclaration(
+      context,
+      `${resourceName}ViewModel`,
+      viewSchema,
+      `${viewOperation?.summary ?? firstOperation.tag}响应项`,
+      true,
+    );
+  }
+
+  for (const item of sortedOperations) {
+    const actionName = getActionName(item);
+
+    emitOperationParam(context, item, resourceName, actionName, {
+      listParamsSchema,
+      openApiSchemas: schemas,
+    });
+    emitOperationResponse(context, item, resourceName, actionName, {
+      listItemSchema,
+      openApiSchemas: schemas,
+      viewSchema,
+    });
+  }
+
+  return buildTypeDefinitionContent(context);
+}
+
+function getListItemSchema(
+  item?: OperationRow,
+  schemas?: Record<string, OpenApiSchema>,
+) {
+  const responseSchema = getOperationResponseSchema(item, schemas);
+  const itemsSchema = responseSchema?.properties?.items?.items;
+
+  if (!responseSchema || !itemsSchema || !isGlobalListSchema(responseSchema)) {
+    return undefined;
+  }
+
+  return resolveSchema(itemsSchema, schemas) ?? itemsSchema;
+}
+
+function getListItemRef(
+  item?: OperationRow,
+  schemas?: Record<string, OpenApiSchema>,
+) {
+  return formatSchemaRef(
+    getOperationResponseSchema(item, schemas)?.properties?.items?.items?.$ref,
+  );
+}
+
+function getOperationParamsSchema(
+  item: OperationRow,
+  schemas?: Record<string, OpenApiSchema>,
+) {
+  const requestSchema =
+    getSchemaByRef(item.requestRef, schemas) ?? getRequestBodySchema(item);
+  const queryParameters = item.operation.parameters ?? [];
+
+  if (queryParameters.length === 0) {
+    return requestSchema;
+  }
+
+  return {
+    properties: Object.fromEntries(
+      queryParameters
+        .filter(
+          (
+            parameter,
+          ): parameter is typeof parameter & {
+            name: string;
+          } => Boolean(parameter.name),
+        )
+        .map((parameter) => [
+          parameter.name,
+          {
+            ...parameter.schema,
+            description:
+              parameter.schema?.description ||
+              parameter.description ||
+              parameter.name,
+          },
+        ]),
+    ),
+    required: queryParameters
+      .filter(
+        (
+          parameter,
+        ): parameter is typeof parameter & {
+          name: string;
+        } => Boolean(parameter.required && parameter.name),
+      )
+      .map((parameter) => parameter.name),
+    type: 'object',
+  } satisfies OpenApiSchema;
+}
+
+function getOperationResponseSchema(
+  item?: OperationRow,
+  schemas?: Record<string, OpenApiSchema>,
+) {
+  return (
+    getSchemaByRef(item?.responseRef, schemas) ?? getResponseBodySchema(item)
+  );
+}
+
+function getRequestBodySchema(item: OperationRow) {
+  return item.operation.requestBody?.content?.['application/json']?.schema;
+}
+
+function getResourceTypeName(item?: OperationRow, removePrefix = '') {
+  const segments = getFolderSegments(
+    formatDisplayPath(item?.path ?? '', removePrefix),
+  );
+  const name = segments.at(-1) ?? getApiNameByPath(item?.path ?? 'Api');
+
+  return toPascalCase(name);
+}
+
+function getResponseBodySchema(item?: OperationRow) {
+  return item?.operation.responses?.['200']?.content?.['application/json']
+    ?.schema;
+}
+
+function getSchemaByRef(ref?: string, schemas?: Record<string, OpenApiSchema>) {
+  if (!ref) {
+    return undefined;
+  }
+
+  return schemas?.[ref];
+}
+
+function registerSchemaTypeNames(
+  context: TypeDefinitionContext,
+  data: OperationRow[],
+  resourceName: string,
+  schemas?: Record<string, OpenApiSchema>,
+) {
+  const listItemSchema = getListItemSchema(
+    data.find((item) => getActionName(item) === 'list'),
+    schemas,
+  );
+  const viewOperation = data.find((item) => getActionName(item) === 'view');
+  const viewSchema = getOperationResponseSchema(viewOperation, schemas);
+
+  for (const item of data) {
+    const actionName = getActionName(item);
+    const requestRefs = collectSchemaRefs(
+      getOperationParamsSchema(item, schemas),
+    );
+    const responseRefs = collectSchemaRefs(
+      getOperationResponseSchema(item, schemas),
+    );
+
+    for (const ref of requestRefs) {
+      context.schemaNameMap.set(
+        ref,
+        `${resourceName}${toPascalCase(actionName)}Param`,
+      );
+    }
+
+    for (const ref of responseRefs) {
+      if (actionName === 'list' && listItemSchema) {
+        context.schemaNameMap.set(ref, `${resourceName}Model`);
+        continue;
+      }
+
+      if (
+        actionName === 'view' &&
+        listItemSchema &&
+        viewSchema &&
+        isSameSchemaShape(viewSchema, listItemSchema)
+      ) {
+        context.schemaNameMap.set(ref, `${resourceName}Model`);
+        continue;
+      }
+
+      context.schemaNameMap.set(
+        ref,
+        `${resourceName}${toPascalCase(actionName)}Model`,
+      );
+    }
+  }
+
+  const listItemRef = getListItemRef(
+    data.find((item) => getActionName(item) === 'list'),
+    schemas,
+  );
+
+  if (listItemRef) {
+    context.schemaNameMap.set(listItemRef, `${resourceName}Model`);
+  }
+
+  if (viewOperation?.responseRef && viewSchema && listItemSchema) {
+    context.schemaNameMap.set(
+      viewOperation.responseRef,
+      isSameSchemaShape(viewSchema, listItemSchema)
+        ? `${resourceName}Model`
+        : `${resourceName}ViewModel`,
+    );
+  }
+}
+
+function resolveSchema(
+  schema?: OpenApiSchema,
+  schemas?: Record<string, OpenApiSchema>,
+) {
+  if (!schema?.$ref) {
+    return schema;
+  }
+
+  return getSchemaByRef(formatSchemaRef(schema.$ref), schemas);
+}
+
+function sortOperationsByAction(data: OperationRow[]) {
+  return data.toSorted((prev, next) => {
+    const prevAction = getActionName(prev);
+    const nextAction = getActionName(next);
+    const prevWeight = actionSortWeight[prevAction] ?? 99;
+    const nextWeight = actionSortWeight[nextAction] ?? 99;
+
+    if (prevWeight !== nextWeight) {
+      return prevWeight - nextWeight;
+    }
+
+    return prev.path.localeCompare(next.path);
+  });
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/api/utils/type-generate-client.ts b/admin-ui/vue/apps/web-antd/src/views/system/api/utils/type-generate-client.ts
new file mode 100644
index 0000000..6b75f84
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/api/utils/type-generate-client.ts
@@ -0,0 +1,109 @@
+export interface ApiTypeDirNode {
+  children?: ApiTypeDirNode[];
+  key: string;
+  title: string;
+  value: string;
+}
+
+export interface WriteTypeFileParams {
+  autoImport: boolean;
+  content: string;
+  dir: string;
+  fileName: string;
+  overwrite?: boolean;
+}
+
+export interface CheckTypeFileItem {
+  dir: string;
+  fileName: string;
+  key: string;
+}
+
+export interface CheckTypeFilesParams {
+  items: CheckTypeFileItem[];
+}
+
+export interface CheckTypeFileResult {
+  dir: string;
+  exists: boolean;
+  fileName: string;
+  filePath: string;
+  key: string;
+}
+
+export interface WriteTypeFileResult {
+  exists: boolean;
+  filePath: string;
+  importSkipped: boolean;
+  importUpdated: boolean;
+}
+
+interface ApiTypeGeneratorResponse<T> {
+  code?: string;
+  data?: T;
+  message?: string;
+  success: boolean;
+}
+
+const API_TYPE_GENERATOR_PREFIX = '/__api-type-generator__';
+
+export class ApiTypeGeneratorError extends Error {
+  constructor(
+    message: string,
+    public code?: string,
+  ) {
+    super(message);
+  }
+}
+
+export async function getApiTypeDirTree() {
+  const response = await requestApiTypeGenerator<ApiTypeDirNode[]>(
+    `${API_TYPE_GENERATOR_PREFIX}/dirs`,
+  );
+
+  return response.data ?? [];
+}
+
+export async function checkApiTypeFiles(params: CheckTypeFilesParams) {
+  const response = await requestApiTypeGenerator<CheckTypeFileResult[]>(
+    `${API_TYPE_GENERATOR_PREFIX}/exists`,
+    {
+      body: JSON.stringify(params),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    },
+  );
+
+  return response.data ?? [];
+}
+
+export async function writeApiTypeFile(params: WriteTypeFileParams) {
+  const response = await requestApiTypeGenerator<WriteTypeFileResult>(
+    `${API_TYPE_GENERATOR_PREFIX}/write`,
+    {
+      body: JSON.stringify(params),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    },
+  );
+
+  return response.data;
+}
+
+async function requestApiTypeGenerator<T>(url: string, options?: RequestInit) {
+  const response = await fetch(url, options);
+  const data = (await response.json()) as ApiTypeGeneratorResponse<T>;
+
+  if (!response.ok || !data.success) {
+    throw new ApiTypeGeneratorError(
+      data.message || '类型文件生成失败',
+      data.code,
+    );
+  }
+
+  return data;
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/client/edit-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/client/edit-drawer.vue
new file mode 100644
index 0000000..8a551ab
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/client/edit-drawer.vue
@@ -0,0 +1,133 @@
+<!--
+ * @description 客户端编辑抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { postSysClientAddApi, postSysClientEditApi, getSysClientViewApi } from '#/api/system/client';
+import { drawerSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-3',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await getSysClientViewApi({ id: Number(id) });
+      const grantType = record?.grantType as string;
+      record.grantTypeList = grantType.split(',');
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    data.grantType = data.grantTypeList.join(',');
+    await (isUpdate.value ? postSysClientEditApi(data) : postSysClientAddApi(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm>
+      <template #tip>
+        <div class="ml-7 w-full">
+          <Alert message="私有桶使用自定义域名无法预览, 但可以正常上传/下载" show-icon type="warning" />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/client/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/client/index.vue
new file mode 100644
index 0000000..ebc539a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/client/index.vue
@@ -0,0 +1,210 @@
+<!--
+ * @description 客户端管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h,ref } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { DeepPartial } from '@vben/types';
+import type { SysClient } from '#/api/system/client';
+
+import { getVxePopupContainer } from '@vben/utils';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysClientListApi, postSysClientDeleteApi, postSysClientStatusApi } from '#/api/system/client';
+import { MdiPlus, MdiDelete,} from '@vben/icons';
+import { AccessControl, useAccess } from '@vben/access';
+
+import { querySchema, columns, } from './model';
+import viewDrawer from './view-drawer.vue';
+import editDrawer from './edit-drawer.vue';
+
+const { hasAccessByCodes } = useAccess();
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysClientListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+
+const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+});
+
+function handlePreview(record: SysClient) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+}
+
+
+
+const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+});
+
+function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+}
+
+function handleEdit(row: SysClient) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+}
+
+async function handleDelete(row: SysClient) {
+  if(row.id === 1) {
+    message.error("PC客户端不允许删除");
+    return;
+  }
+  await postSysClientDeleteApi({ ids: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+    if (row.id != 1) {
+      ids.push(row.id);
+    }else {
+      message.error("PC客户端不允许删除");
+      return;
+    }
+  }
+
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await postSysClientDeleteApi({ ids: ids });
+      message.success("删除成功");
+      await handleRefresh();
+    },
+  });
+}
+
+async function handleStatusChange(row: SysClient) {
+  // console.log('vue/apps/web-antd/src/views/system/client/index.vue handleStatusChange',row);
+  if(row.id === 1) {
+    message.error("PC客户端不允许禁用");
+    return;
+  }
+  await postSysClientStatusApi({ id: row.id, status: row.status });
+  await message.success("操作成功")
+  await handleRefresh();
+}
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="客户端列表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:client:add'">新增</Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:system:client:remove'">删除</Button>
+      </template>
+      <template #status="{ row }">
+        <!-- pc不允许禁用 禁用了直接登录不了 应该设置disabled -->
+        <!-- 登录提示: 认证权限类型已禁用 -->
+        <Switch
+          v-model:checked="row.status" :checkedValue="'0'" :unCheckedValue="'1'" :disabled="row.id === 1 || !hasAccessByCodes(['cpm:system:client:edit'])"
+          @change="handleStatusChange(row)"
+        />
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:system:client:query'">查看</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:system:client:edit'">修改</Button>
+          <AccessControl :codes="['cpm:system:client:remove']" type="code">
+            <Popconfirm title="确定删除吗？" v-if="row.id != 1" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger  >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <ViewDrawer />
+    <EditDrawer @reload="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/client/model.tsx b/admin-ui/vue/apps/web-antd/src/views/system/client/model.tsx
new file mode 100644
index 0000000..5e28b99
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/client/model.tsx
@@ -0,0 +1,258 @@
+/**
+ * @description 客户端管理模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+import { z } from '@vben/common-ui';
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+import { Tag } from 'ant-design-vue';
+import { h } from 'vue';
+import {
+  renderDict,
+  renderDictTags,
+  renderHttpMethodTag,
+  renderJsonPreview,
+} from '#/utils/render';
+
+export const querySchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'clientId',
+    label: '客户端ID',
+  },
+  {
+    component: 'Input',
+    fieldName: 'clientKey',
+    label: '客户端Key',
+  },
+  {
+    component: 'Input',
+    fieldName: 'clientSecret',
+    label: '客户端Secret',
+  },
+];
+export const columns: VxeGridProps['columns'] = [
+  {
+    title: '',
+    field: '',
+    width: 40,
+    type: 'checkbox',
+  },  {
+    title: 'ID',
+    field: 'id',
+    align: 'left',
+    width: -1,
+  },
+
+  { field: 'clientId', title: '客户端ID' },
+  { field: 'clientKey', title: '客户端Key' },
+  { field: 'clientSecret', title: '客户端Secret' },
+  {
+    title: '授权类型',
+    field: 'grantTypeList',
+    slots: {
+      default: ({ row }) => {
+        row.grantTypeList = row.grantType.split(',');
+        if (!row.grantTypeList) {
+          return '无';
+        }
+        return renderDictTags(
+          row.grantTypeList,
+          getDictOptions(DictEnum.SYS_GRANT_TYPE),
+          true,
+          4,
+        );
+      },
+    },
+  },
+  { field: 'deviceType', title: '设备类型' },
+  { field: 'activeTimeout', title: '活跃超时时间' },
+  { field: 'timeout', title: '固定超时' },
+  { field: 'status', title: '状态', slots: { default: 'status' } },
+  { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' },
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+export const viewSchema: DescItem[] = [
+  {
+    field: 'id',
+    label: 'ID',
+  },
+  {
+    field: 'clientId',
+    label: '客户端ID',
+  },
+  {
+    field: 'clientKey',
+    label: '客户端Key',
+  },
+  {
+    field: 'clientSecret',
+    label: '客户端Secret',
+  },
+  {
+    field: 'grantType',
+    label: '授权类型',
+    render(value, { grantType }) {
+      // 将grantType转换为数组
+      const grantTypeList = grantType.split(',');
+      const operType = grantTypeList.map((item: string) =>
+        renderDict(item, DictEnum.SYS_GRANT_TYPE),
+      );
+      return <div class="flex items-center">{operType}</div>;
+    },
+  },
+  {
+    field: 'deviceType',
+    label: '设备类型',
+    render(value, { deviceType }) {
+      const operType = renderDict(deviceType, DictEnum.SYS_DEVICE_TYPE);
+      return (
+        <div class="flex items-center">
+          <Tag>{value}</Tag>
+          {operType}
+        </div>
+      );
+    },
+  },
+  {
+    field: 'activeTimeout',
+    label: 'Token活跃超时时间',
+  },
+  {
+    field: 'timeout',
+    label: 'Token固定超时时间',
+  },
+  {
+    field: 'status',
+    label: '状态',
+    render(value, { status }) {
+      const operType = renderDict(status, DictEnum.SYS_NORMAL_DISABLE);
+      return (
+        <div class="flex items-center">
+          <Tag>{value}</Tag>
+          {operType}
+        </div>
+      );
+    },
+  },
+  {
+    field: 'createdAt',
+    label: '创建时间',
+  },
+  {
+    field: 'createdBy',
+    label: '创建人',
+  },
+  {
+    field: 'updatedAt',
+    label: '更新时间',
+  },
+  {
+    field: 'updatedBy',
+    label: '更新人',
+  },
+];
+
+export const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+    label: 'id',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'clientId',
+    label: '客户端ID',
+  },
+  {
+    component: 'Input',
+    fieldName: 'clientKey',
+    label: '客户端key',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'clientSecret',
+    label: '客户端密钥',
+    rules: 'required',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      mode: 'multiple',
+      optionFilterProp: 'label',
+      options: getDictOptions(DictEnum.SYS_GRANT_TYPE),
+    },
+    fieldName: 'grantTypeList',
+    label: '授权类型',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: false,
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_DEVICE_TYPE),
+    },
+    fieldName: 'deviceType',
+    label: '设备类型',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'InputNumber',
+    componentProps: {
+      addonAfter: '秒',
+      placeholder: '请输入',
+    },
+    defaultValue: 1800,
+    fieldName: 'activeTimeout',
+    formItemClass: 'col-span-2 lg:col-span-1',
+    help: '指定时间无操作则过期(单位：秒), 默认30分钟(1800秒)',
+    label: 'Token活跃超时时间',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    componentProps: {
+      addonAfter: '秒',
+    },
+    defaultValue: 604_800,
+    fieldName: 'timeout',
+    formItemClass: 'col-span-2 lg:col-span-1 ',
+    help: '指定时间必定过期(单位：秒)，默认七天(604800秒)',
+    label: 'Token固定超时时间',
+    rules: 'required',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'status',
+    label: '状态',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/client/view-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/client/view-drawer.vue
new file mode 100644
index 0000000..b2ef30a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/client/view-drawer.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { SysClient } from '#/api/system/client';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Description, useDescription } from '#/components/description';
+import { viewSchema } from './model';
+import { getSysClientViewApi } from '#/api/system/client';
+
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+});
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = drawerApi.getData() as { record: SysClient };
+  console.log("vue/apps/web-antd/src/views/system/client/view-drawer.vue record", record);
+  const record2 = await getSysClientViewApi({ id: Number(record.id) });
+  console.log("vue/apps/web-antd/src/views/system/client/view-drawer.vue record2", record2);
+  setDescProps({ data: record2 }, true);
+}
+
+</script>
+
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription">
+    </Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/config/config-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/config/config-drawer.vue
new file mode 100644
index 0000000..499ca96
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/config/config-drawer.vue
@@ -0,0 +1,140 @@
+<!--
+ * @description 系统配置编辑抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+
+import {
+  addSysConfigApi,
+  editSysConfigApi,
+  getSysConfigByIdApi,
+} from '#/api/system/config';
+import { drawerSchema } from './model';
+import {
+  AGENT_ROLE_TEMPLATE_CONFIG_KEY,
+  confirmTemplateOverwrite,
+} from '#/utils/role-template';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+const saving = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { id, update, view } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await getSysConfigByIdApi({ configId: Number(id) });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false });
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            'only-read': true,
+          },
+        },
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            'only-read': false,
+          },
+        },
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  if (saving.value || isView.value) return;
+  saving.value = true;
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    if (
+      !(await confirmTemplateOverwrite(
+        data.configKey === AGENT_ROLE_TEMPLATE_CONFIG_KEY,
+      ))
+    )
+      return;
+    await (isUpdate.value ? editSysConfigApi(data) : addSysConfigApi(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    saving.value = false;
+    drawerApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm> </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/config/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/config/index.vue
new file mode 100644
index 0000000..a3ee092
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/config/index.vue
@@ -0,0 +1,212 @@
+<!--
+ * @description 系统配置管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import type { DeepPartial } from '@vben/types';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { SysConfig } from '#/api/system/config';
+
+import { getVxePopupContainer } from '@vben/utils';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+
+import { Button, message, Tag, Popconfirm, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysConfigListApi, deleteSysConfigApi } from '#/api/system/config';
+
+import {
+  MdiPlus,
+  MdiDelete,
+} from '@vben/icons';
+import configDrawer from './config-drawer.vue';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'configName',
+      label: '参数名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'configKey',
+      label: '参数键名',
+    },
+    {
+      component: 'Input',
+      fieldName: 'configValue',
+      label: '参数键值',
+    },
+
+
+    {
+      component: 'RangePicker',
+      // defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'createdAt',
+      label: '创建时间',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat: "YYYY-MM-DD",
+      },
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 40 },
+    { field: 'configId', title: 'ID' },
+    { field: 'configName', title: '参数名称' },
+    { field: 'configKey', title: '参数键名' },
+    { field: 'configValue', title: '参数键值' },
+    { field: 'configType', title: '系统内置', slots: { default: 'configType' } },
+    { field: 'remark', title: '备注' },
+    { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' },
+    { title: '操作', width: 120, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysConfigListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+
+const [ConfigDrawer, configDrawerApi] = useVbenDrawer({
+  connectedComponent: configDrawer,
+});
+
+
+function handleView(row: SysConfig) {
+  const { configId } = row;
+  configDrawerApi.setData({ id: configId, update: false, view: true });
+  configDrawerApi.open();
+}
+
+function handleAdd() {
+  configDrawerApi.setData({ update: false, view: false });
+  configDrawerApi.open();
+}
+
+function handleEdit(row: SysConfig) {
+  configDrawerApi.setData({ id: row.configId, update: true, view: false });
+  configDrawerApi.open();
+}
+
+async function handleDelete(row: SysConfig) {
+  await deleteSysConfigApi({ configIds: [row.configId] });
+  message.success("删除成功");
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysConfig) => row.configId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysConfigApi({ configIds: ids });
+      message.success("删除成功");
+      await handleRefresh();
+    },
+  });
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid :table-title="'参数列表'">
+      <template #toolbar-tools>
+
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:config:add'">新增</Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)"
+          @click="handleMultiDelete" v-access:code="'cpm:system:config:remove'">删除</Button>
+      </template>
+      <template #configType="{ row }">
+        <Tag :color="row.configType == 'Y' ? 'green' : 'red'">{{ row.configType == 'Y' ? '是' : '否' }}</Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleView(row)" v-access:code="'cpm:system:config:query'">查看</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:system:config:edit'">修改</Button>
+          <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确定删除吗？"
+            @confirm="handleDelete(row)" v-access:code="'cpm:system:config:remove'">
+            <Button class="mr-2 border-none p-0" :block="false" type="link"
+              danger v-access:code="'cpm:system:config:remove'">删除</Button>
+            </Popconfirm>
+        </div>
+      </template>
+    </Grid>
+    <ConfigDrawer @reload="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/config/model.ts b/admin-ui/vue/apps/web-antd/src/views/system/config/model.ts
new file mode 100644
index 0000000..0fb432e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/config/model.ts
@@ -0,0 +1,68 @@
+/**
+ * @description 系统配置模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+import type {
+    VbenFormSchema,
+  } from '@vben/common-ui';
+  import { z } from '@vben/common-ui';
+  import { getDictOptions } from '#/utils/dict';
+  import { DictEnum } from '@vben/constants';
+  import { getPopupContainer } from '@vben/utils';
+
+  export const drawerSchema: VbenFormSchema[] =  [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'configId',
+      label: '参数主键',
+    },
+    {
+      component: 'Input',
+      fieldName: 'configName',
+      label: '参数名称',rules: z.string()
+      .min(1, '参数名称不能为空')
+      .max(32, '参数名称最大长度32位'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'configKey',
+      label: '参数键名',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      formItemClass: 'items-baseline',
+      fieldName: 'configValue',
+      label: '参数键值',
+      componentProps: {
+        autoSize: true,
+      },
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: getDictOptions(DictEnum.SYS_YES_NO),
+        optionType: 'button',
+      },
+      defaultValue: 'N',
+      fieldName: 'configType',
+      label: '是否内置',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      formItemClass: 'items-baseline',
+      label: '备注',
+    },
+  ];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dept/dept-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/dept/dept-drawer.vue
new file mode 100644
index 0000000..9d984cc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dept/dept-drawer.vue
@@ -0,0 +1,241 @@
+<!--
+ * @description 组织管理编辑抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { SysDeptTreeData } from '#/api/system/dept';
+import type { SysUserMini } from '#/api/system/user';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName , cloneDeep, getPopupContainer, listToTree} from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { addSysDeptApi, editSysDeptApi, viewSysDeptApi, getSysDeptTreeApi } from '#/api/system/dept';
+import { getSysRoleListApi, type SysRoleListData } from '#/api/system/role';
+import { getSysUserListByDeptIdApi } from '#/api/system/user';
+import { drawerSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+async function getDeptTree() {
+  const treeRes = await getSysDeptTreeApi({ });
+  const treeData = treeRes.items;
+  addFullName(treeData, 'deptName', ' / ');
+  return treeData;
+}
+
+function excludeDeptBranch(
+  nodes: SysDeptTreeData[],
+  deptId: number,
+): SysDeptTreeData[] {
+  return nodes
+    .filter((node) => Number(node.deptId) !== deptId)
+    .map((node) => ({
+      ...node,
+      children: node.children
+        ? excludeDeptBranch(node.children, deptId)
+        : undefined,
+    }));
+}
+
+async function initDeptSelect(excludeDeptId?: number) {
+  // 需要动态更新TreeSelect组件 这里允许为空
+  const treeData = await getDeptTree();
+  const availableParents =
+    excludeDeptId === undefined
+      ? treeData
+      : excludeDeptBranch(treeData, excludeDeptId);
+  formApi.updateSchema([
+    {
+      componentProps: {
+        fieldNames: { label: 'deptName', value: 'deptId' },
+        showSearch: true,
+        treeData: availableParents,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        treeNodeFilterProp: 'deptName',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      },
+      fieldName: 'parentId',
+    },
+  ]);
+}
+
+async function initRoleSelect() {
+  const ret = await getSysRoleListApi({ page: 1, pageSize: 500, status: '0' });
+  const roles = ret?.items || [];
+  formApi.updateSchema([
+    {
+      componentProps: {
+        allowClear: true,
+        getPopupContainer,
+        options: roles.map((role: SysRoleListData) => ({
+          label: `${role.deptName || '-'} | ${role.roleName} | ${role.roleKey}`,
+          value: role.roleId,
+        })),
+        placeholder: roles.length === 0 ? '暂无可绑定角色' : '请选择绑定角色',
+      },
+      fieldName: 'deptRole',
+    },
+  ]);
+}
+
+async function initDeptUsers(deptId: number | string) {
+  const ret = await getSysUserListByDeptIdApi({deptId:Number(deptId)});
+  const data = ret?.items || [];
+  const options = data.map((user:SysUserMini) => ({
+    label: `${user.userName} | ${user.nickName}`,
+    value: user.userId,
+  }));
+  formApi.updateSchema([
+    {
+      componentProps: {
+        disabled: data.length === 0,
+        options,
+        placeholder: data.length === 0 ? '该组织暂无用户' : '请选择组织负责人',
+      },
+      fieldName: 'leader',
+    },
+  ]);
+}
+
+async function setLeaderOptions() {
+  formApi.updateSchema([
+    {
+      componentProps: {
+        disabled: true,
+        options: [],
+        placeholder: '仅在更新时可选组织负责人',
+      },
+      fieldName: 'leader',
+    },
+  ]);
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    await Promise.all([
+      initDeptSelect(update ? Number(id) : undefined),
+      initRoleSelect(),
+    ]);
+    if (isUpdate.value || isView.value) {
+      const record = await viewSysDeptApi({ deptId: Number(id) });
+      record.leader = record.leader ? Number(record.leader) : null;
+      record.deptRole = record.deptRole ? Number(record.deptRole) : undefined;
+      record.deptType = record.deptType ? String(record.deptType) : '0';
+      console.log(record);
+      
+      await formApi.setValues(record);
+      await initDeptUsers(record.deptId);
+    }else {
+      formApi.resetForm();
+      await setLeaderOptions();
+    }
+
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    data.deptRole = data.deptRole || 0;
+    await (isUpdate.value ? editSysDeptApi(data) : addSysDeptApi(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm>
+    </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dept/dept-select.vue b/admin-ui/vue/apps/web-antd/src/views/system/dept/dept-select.vue
new file mode 100644
index 0000000..ce3b426
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dept/dept-select.vue
@@ -0,0 +1,194 @@
+<!--
+ * @description 组织选择组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { onMounted, ref, watch, nextTick } from 'vue';
+import type { DeepPartial } from '@vben/types';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { SysDeptListData } from '#/api/system';
+import { CheckboxGroup } from 'ant-design-vue';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysDeptTreeApi } from '#/api/system';
+
+
+interface RowType {
+  deptId: number;
+  deptName: string;
+  parentId: number;
+  orderNum: number;
+  status: string;
+  children?: RowType[];
+}
+
+const emit = defineEmits(['change']);
+const props = defineProps<{
+  deptIds?: number[];
+  checkStrictly?: boolean;
+}>();
+const checkedDeptIds = ref<number[]>(props.deptIds||[] );
+const checkStrictly = ref(props.checkStrictly||false);
+
+watch(props, (newVal) => {
+  nextTick();
+  checkedDeptIds.value = newVal.deptIds||[];
+  checkStrictly.value = newVal.checkStrictly||false;
+  gridApi.setGridOptions({
+    checkboxConfig: {
+      checkStrictly: checkStrictly.value
+    }
+  });
+  nextTick();
+  if (checkStrictly.value) {
+    // checkboxGroupValue 中删除 3
+    checkboxGroupValue.value.splice(checkboxGroupValue.value.indexOf(3), 1);
+  }else {
+    checkboxGroupValue.value.push(3);
+  }
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysDeptListData) => row.deptId);
+  if (ids.toString() !== props.deptIds?.toString()) {
+    gridApi.grid.setCheckboxRowKey(checkedDeptIds.value, true);
+  }
+});
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange
+}
+
+onMounted(() => {
+  expandAll();
+});
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    checkRowKeys: checkedDeptIds.value,
+    checkStrictly: checkStrictly.value,
+  },
+  rowConfig: {
+    keyField: 'deptId',
+  },
+  align: 'center',
+  columns: [
+    { align: 'left', title: '', type: 'checkbox', width: 40 },
+    { field: 'deptName', title: '组织名称', treeNode: true, minWidth: 160, align: 'left', },
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      // 树结构由后端 /system/dept/tree 组装完成，前端不再用
+      // treeConfig.transform 二次建树（分页在此接口下无意义）。
+      query: async () => {
+        return await getSysDeptTreeApi({});
+      },
+      querySuccess: () => {
+        expandAll();
+        nextTick();
+        gridApi.grid.setCheckboxRowKey(checkedDeptIds.value, true);
+
+      },
+    },
+  },
+  toolbarConfig: {
+  },
+  treeConfig: {
+    parentField: 'parentId',
+    rowField: 'deptId',
+    // 后端已返回嵌套 children，行内树模式不再二次建树
+    transform: false,
+    // 显式声明子节点字段名，不依赖 vxe/xe-utils 的隐式默认值
+    children: 'children',
+    expandAll: true,
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions,
+  gridEvents
+});
+
+watch(checkedDeptIds, (newVal) => {
+  nextTick();
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysDeptListData) => row.deptId);
+  if (ids.toString() !== newVal.toString()) {
+    gridApi.grid.setCheckboxRowKey(newVal, true);
+  }
+});
+
+
+function handleCheckboxChange() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysDeptListData) => row.deptId);
+  if (ids.toString() !== checkedDeptIds.value.toString() || checkStrictly.value !== props.checkStrictly) {
+    checkedDeptIds.value = ids;
+    emit('change', ids, checkStrictly.value);
+  }
+}
+
+const expandAll = () => {
+  gridApi.grid?.setAllTreeExpand(true);
+};
+
+const expandCollapseAll = (value: boolean) => {
+  gridApi.grid?.setAllTreeExpand(value);
+}
+
+
+const checkboxGroupOptions = [
+  { label: '展开/折叠', value: 1 },
+  { label: '全选/全不选', value: 2 },
+  { label: '父子联动', value: 3 }
+]
+const checkboxGroupValue = ref<number[]>([3]);
+watch(checkboxGroupValue, (newVal, oldVal) => {
+  if (newVal.includes(1) && !oldVal.includes(1)) {
+    expandCollapseAll(true);
+  } else if (!newVal.includes(1) && oldVal.includes(1)) {
+    expandCollapseAll(false);
+  }
+  if (newVal.includes(2) && !oldVal.includes(2)) {
+    gridApi.grid?.setAllCheckboxRow(true);
+    handleCheckboxChange();
+  } else if (!newVal.includes(2) && oldVal.includes(2)) {
+    gridApi.grid?.setAllCheckboxRow(false);
+    handleCheckboxChange();
+  }
+  if (newVal.includes(3) && !oldVal.includes(3)) {
+    gridApi.setGridOptions({
+      checkboxConfig: {
+        checkStrictly: false
+      }
+    });
+    checkStrictly.value = false;
+    handleCheckboxChange();
+  } else if (!newVal.includes(3) && oldVal.includes(3)) {
+    gridApi.setGridOptions({
+      checkboxConfig: {
+        checkStrictly: true
+      }
+    });
+    checkStrictly.value = true;
+    handleCheckboxChange();
+  }
+});
+
+</script>
+
+<template>
+
+  <CheckboxGroup class="w-full pl-3 plr-3 justify-between" :options="checkboxGroupOptions"
+    v-model:value="checkboxGroupValue" />
+  <Grid class="w-full m-0 p-0">
+  </Grid>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dept/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/dept/index.vue
new file mode 100644
index 0000000..66ee065
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dept/index.vue
@@ -0,0 +1,256 @@
+<!--
+ * @description 组织管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SysDeptListData } from '#/api/system/dept';
+import { AccessControl } from '@vben/access';
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+import { Button, message, Popconfirm, Tag, Dropdown, Menu, MenuItem } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysDeptFullTreeApi, deleteSysDeptApi } from '#/api/system/dept'; 
+
+import deptDrawer from './dept-drawer.vue';
+import supplementModal from './supplement-modal.vue';
+
+import {
+  MdiPlus,
+} from '@vben/icons';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: true,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'deptName',
+      label: '组织名称',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: '部门',
+            value: '0',
+          },
+          {
+            label: '公司',
+            value: '1',
+          },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'deptType',
+      label: '组织类型',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: '正常',
+            value: '0',
+          },
+          {
+            label: '停用',
+            value: '1',
+          },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'status',
+      label: '状态',
+    },
+  
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  align: 'center',
+  columns: [
+    { field: 'deptId', title: 'ID' , width: 80,  align: 'center', },
+    { field: 'deptName', title: '组织名称' , treeNode: true, minWidth: 240,  align: 'left', },
+    { field: 'deptCategory', title: '组织编码', minWidth: 100 },
+    { field: 'deptType', slots: { default: 'deptType' },title: '组织类型', width: 80 },
+    {
+      field: 'status',
+      slots: { default: 'status' },
+      title: '状态',
+      width: 69,
+      align: 'center',
+    },
+    { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' , width: 160},
+    { title: '操作', width: 120, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      // 树结构由后端 /system/dept/tree/full 组装完成（含全部列表字段，
+      // 支持组织名称模糊搜索与状态/类型筛选）。分页在此接口下无意义。
+      query: async (_params, formValues) => {
+        return await getSysDeptFullTreeApi({
+          ...formValues,
+        });
+      },
+      querySuccess: () => {
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+  treeConfig: {
+    parentField: 'parentId',
+    rowField: 'deptId',
+    // 后端已返回嵌套 children，行内树模式不再二次建树
+    transform: false,
+    // 显式声明子节点字段名，不依赖 vxe/xe-utils 的隐式默认值
+    children: 'children',
+    expandAll: true,
+  },
+};
+
+const [Grid,gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+const expandAll = () => {
+  gridApi.grid?.setAllTreeExpand(true);
+};
+
+const collapseAll = () => {
+  gridApi.grid?.setAllTreeExpand(false);
+};
+
+
+
+const [DeptDrawer, deptDrawerApi] = useVbenDrawer({
+  connectedComponent: deptDrawer,
+});
+
+const [SupplementModal, supplementModalApi] = useVbenModal({
+  connectedComponent: supplementModal,
+});
+
+
+function handleView(row: SysDeptListData) {
+  const { deptId } = row;
+  deptDrawerApi.setData({id: deptId, update:false,view:true});
+  deptDrawerApi.open();
+}
+
+function handleAdd() {
+  deptDrawerApi.setData({update:false, view:false});
+  deptDrawerApi.open();
+}
+
+function handleEdit(row: SysDeptListData) {
+  deptDrawerApi.setData({ id: row.deptId, update:true, view:false });
+  deptDrawerApi.open();
+}
+
+async function handleDelete(row: SysDeptListData) {
+  await deleteSysDeptApi({ deptId: row.deptId });
+  message.success("删除成功");
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+  expandAll();
+}
+
+const router = useRouter();
+const handleClickUserManage = (row: SysDeptListData) => {
+  router.push(`/system/user?deptId=${row.deptId}`);
+}
+const handleClickRoleManage = (row: SysDeptListData) => {
+  router.push(`/system/role?deptId=${row.deptId}`);
+}
+
+const handleSupplement = (row: SysDeptListData) => {
+  supplementModalApi.setData({ deptId: row.deptId });
+  supplementModalApi.open();
+}
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid :table-title="'组织管理'">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center"  @click="expandAll">展开</Button>
+        <Button class="mr-2 flex items-center"  @click="collapseAll">折叠</Button>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:dept:add'">新增</Button>
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status === '0' ? 'green' : 'red'">{{ row.status === '0' ? '正常' : '停用' }}</Tag>
+      </template>
+      <template #deptType="{ row }">
+        <Tag :color="row.deptType === 1 ? 'blue' : 'green'">{{ row.deptType === 1 ? '公司' : '部门' }}</Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleView(row)" v-access:code="'cpm:system:dept:query'">查看</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:system:dept:edit'">修改</Button>
+          <Dropdown>
+            <template #overlay>
+              <Menu>
+                <MenuItem @click="handleClickUserManage(row)">用户管理</MenuItem>
+                <MenuItem @click="handleClickRoleManage(row)">角色管理</MenuItem>
+                <MenuItem v-if="row.deptType === 1" @click="handleSupplement(row)">补充详细信息</MenuItem>
+                <AccessControl :codes="['cpm:system:dept:remove']" type="code">
+                  <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确定删除吗？" @confirm="handleDelete(row)" >
+                  <MenuItem>删除组织</MenuItem>
+                  </Popconfirm>
+                </AccessControl>
+              </Menu>
+            </template>
+            <Button class="mr-2 border-none p-0" :block="false" type="link" >更多</Button>
+          </Dropdown>
+        </div>
+      </template>
+    </Grid>
+    <DeptDrawer @reload="handleRefresh" />
+<SupplementModal @reload="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dept/model.ts b/admin-ui/vue/apps/web-antd/src/views/system/dept/model.ts
new file mode 100644
index 0000000..1080b58
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dept/model.ts
@@ -0,0 +1,150 @@
+/**
+ * @description 组织管理模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { z } from '@vben/common-ui';
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+
+import { getDictOptions } from '#/utils/dict';
+
+export const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_DEPT_TYPE),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'deptType',
+    label: '组织类型',
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'deptId',
+  },
+  {
+    component: 'TreeSelect',
+    componentProps: {
+      getPopupContainer,
+    },
+    dependencies: {
+      show: (model) => model.parentId !== 0,
+      triggerFields: ['parentId'],
+    },
+    fieldName: 'parentId',
+    label: '上级组织',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Input',
+    fieldName: 'deptName',
+    label: '组织名称',
+    rules: z
+      .string()
+      .min(1, '组织名称不能为空')
+      .max(32, '组织名称最大长度32位'),
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'orderNum',
+    label: '显示排序',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'deptCategory',
+    label: '组织编码',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: true,
+      getPopupContainer,
+    },
+    fieldName: 'deptRole',
+    label: '绑定角色',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      // 选中了就只能修改 不能重置为无负责人
+      allowClear: false,
+      getPopupContainer,
+    },
+    fieldName: 'leader',
+    label: '负责人',
+  },
+  {
+    component: 'Input',
+    fieldName: 'phone',
+    label: '联系电话',
+    rules: z
+      .string()
+      .regex(/^1[3,4578]\d{9}$/, { message: '请输入正确的手机号' })
+      .optional()
+      .or(z.literal('')),
+  },
+  {
+    component: 'Input',
+    fieldName: 'email',
+    label: '邮箱',
+    rules: z
+      .string()
+      .email({ message: '请输入正确的邮箱' })
+      .optional()
+      .or(z.literal('')),
+  },
+  {
+    // 统一社会信用代码
+    // 固定长度18位数字
+    component: 'Input',
+    fieldName: 'creditCode',
+    label: '统一社会信用代码',
+    rules: z
+      .string()
+      .length(18, '统一社会信用代码长度必须为18位')
+      .regex(/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/, {
+        message: '请输入正确的统一社会信用代码',
+      })
+      .optional()
+      .or(z.literal('')),
+  },
+  {
+    component: 'HctRegionSelect',
+    fieldName: 'areaCode',
+    label: '组织所在地',
+    componentProps: {
+      maxLevel: 2,
+    },
+  },
+  {
+    // 详细地址
+    component: 'Input',
+    fieldName: 'address',
+    label: '详细地址',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'status',
+    label: '状态',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dept/supplement-modal.vue b/admin-ui/vue/apps/web-antd/src/views/system/dept/supplement-modal.vue
new file mode 100644
index 0000000..2b635ee
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dept/supplement-modal.vue
@@ -0,0 +1,211 @@
+<!--
+ * @description 补充详细信息弹窗
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/zAnother/tAgentEnterprise';
+import { z } from '@vben/common-ui';
+import { message } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+const emit = defineEmits<{ reload: [] }>();
+
+interface ModalProps {
+  deptId: number | string;
+}
+
+const isUpdate = ref(false);
+
+const title = computed(() => {
+  return isUpdate.value ? '编辑企业信息' : '补充企业信息';
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'InputNumber',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'deptId',
+    },
+    {
+      component: 'Input',
+      fieldName: 'fullName',
+      label: '单位全称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入单位全称',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'industry',
+      label: '行业',
+      componentProps: {
+        placeholder: '请输入行业',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'legalPersonName',
+      label: '法人名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入法人名称',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'legalPersonIdCard',
+      label: '法人身份证号',
+      rules: z.string()
+        .regex(/^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/, { message: '请输入正确的身份证号' })
+        .optional()
+        .or(z.literal('')),
+      componentProps: {
+        placeholder: '请输入法人身份证号',
+        maxlength: 18,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'companyType',
+      label: '单位类型',
+      componentProps: {
+        placeholder: '请输入单位类型',
+      },
+    },
+    {
+      component: 'DatePicker',
+      fieldName: 'establishTime',
+      label: '公司成立时间',
+      componentProps: {
+        valueFormat: 'YYYY-MM-DD',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'bankName',
+      label: '开户行名称',
+      componentProps: {
+        placeholder: '请输入开户行名称',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'bankAccount',
+      label: '开户行账号',
+      rules: z.string()
+        .regex(/^\d{16,19}$/, { message: '请输入正确的银行卡号(16-19位数字)' })
+        .optional()
+        .or(z.literal('')),
+      componentProps: {
+        placeholder: '请输入开户行账号',
+        maxlength: 19,
+      },
+    },
+  ],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicModal, modalApi] = useVbenModal({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.setState({ confirmLoading: true, loading: true });
+    const { deptId } = modalApi.getData() as ModalProps;
+    
+    await formApi.resetForm();
+    await formApi.setValues({ deptId });
+    
+    try {
+      const res = await View({ deptId: deptId });
+      console.log(res);
+      if (Object.keys(res).length > 0) {
+        isUpdate.value = true;
+        await formApi.setValues({
+          id: res.id,
+          deptId: res.deptId,
+          fullName: res.fullName,
+          industry: res.industry,
+          legalPersonName: res.legalPersonName,
+          legalPersonIdCard: res.legalPersonIdCard,
+          companyType: res.companyType,
+          establishTime: res.establishTime ? dayjs(res.establishTime) : null,
+          bankName: res.bankName,
+          bankAccount: res.bankAccount,
+        });
+      } else {
+        isUpdate.value = false;
+      }
+    } catch (error) {
+      console.error(error);
+      isUpdate.value = false;
+    }
+    
+    modalApi.setState({ confirmLoading: false, loading: false });
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await Edit(data);
+    message.success(isUpdate.value ? '编辑成功' : '添加成功');
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <BasicModal :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm />
+  </BasicModal>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dict-data/dict-create-modal.vue b/admin-ui/vue/apps/web-antd/src/views/system/dict-data/dict-create-modal.vue
new file mode 100644
index 0000000..00b2204
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dict-data/dict-create-modal.vue
@@ -0,0 +1,358 @@
+<script setup lang="ts" name="">
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import {
+  Alert,
+  Button,
+  Input,
+  InputNumber,
+  message,
+  Select,
+  Switch,
+  Tag,
+} from 'ant-design-vue';
+
+import { addSysDictDataApi } from '#/api/system/dict';
+import { tagTypes } from '#/components/dict';
+
+/**
+ * 字典项接口定义
+ */
+interface DictItem {
+  /** 显示名称 */
+  dictLabel: string;
+  /** 排序号 */
+  dictSort: number;
+  /** 字典值 */
+  dictValue: string;
+  /** 标签颜色类型 */
+  listClass: string;
+}
+
+/**
+ * 字典类型信息接口
+ */
+interface DictTypeInfo {
+  /** 备注信息，存储格式化的字典数据（每行格式：value:label 或 label:value） */
+  remark: string;
+  dictType: string;
+}
+
+/** ====================  事件定义  ==================== */
+const emit = defineEmits<{
+  /** 确认事件，当用户点击确认按钮时触发 */
+  (e: 'confirm'): void;
+}>();
+
+/** ====================  响应式数据  ==================== */
+/** 已存在的字典数据列表，用于计算排序起始索引 */
+const existingDictList = ref<DictItem[]>([]);
+
+/** 字典类型信息，包含 remark 字段用于解析字典数据 */
+const dictType = ref<DictTypeInfo>({} as DictTypeInfo);
+
+/** 当前编辑的字典数据项列表 */
+const dictItemList = ref<DictItem[]>([]);
+
+/** 排序起始索引，取值为已有字典项最大排序号 + 1 */
+const sortStartIndex = ref(0);
+
+/** 是否重置排序索引（从 0 开始排序），true 时忽略已有字典项的排序 */
+const resetSortIndex = ref<boolean>(false);
+
+/** 是否反向解析（交换 label 和 value 的位置） */
+const isReverse = ref<boolean>(false);
+
+/** ====================  工具方法  ==================== */
+/**
+ * 从字典类型的 remark 字段解析并初始化字典数据项列表
+ *
+ * 解析规则：
+ * - 按行分割，每行代表一个字典项
+ * - 每行用冒号（:）分隔 label 和 value
+ * - 根据 isReverse 状态决定冒号前后内容的映射关系
+ * - 根据 resetSortIndex 状态决定排序起始值
+ *
+ * @example
+ * // remark 内容示例：
+ * // 0:禁用
+ * // 1:启用
+ * // 解析后得到两个字典项
+ */
+function initDictItems(): void {
+  dictItemList.value = [];
+
+  dictType.value.remark.split('\n').forEach((item: string, index: number) => {
+    const trimmedItem = item.trim();
+    if (!trimmedItem) return; // 跳过空行
+
+    const parts = trimmedItem.split(':');
+    dictItemList.value.push({
+      dictSort: resetSortIndex.value ? index : sortStartIndex.value + index,
+      dictLabel: isReverse.value ? (parts[0] ?? '') : (parts[1] ?? ''),
+      dictValue: isReverse.value ? (parts[1] ?? '') : (parts[0] ?? ''),
+      listClass: 'primary',
+    });
+  });
+
+  // 按 dictSort 升序排序
+  dictItemList.value = dictItemList.value.toSorted(
+    (a: DictItem, b: DictItem) => a.dictSort - b.dictSort,
+  );
+}
+
+/**
+ * 根据标签类型获取对应的颜色值
+ *
+ * @param listClass - 标签类型（primary/danger/warning/success/default）
+ * @returns 对应的颜色值
+ */
+function getTagColor(listClass: string): string {
+  return tagTypes[listClass]!.color;
+}
+
+/** ====================  字典项操作方法  ==================== */
+/**
+ * 新增一个空的字典项到列表末尾
+ *
+ * 排序号自动设为当前最大排序号 + 1，若列表为空则设为 0
+ */
+function addDictItem(): void {
+  const maxSort =
+    dictItemList.value.length > 0
+      ? dictItemList.value[dictItemList.value.length - 1]!.dictSort
+      : -1;
+
+  dictItemList.value.push({
+    dictSort: maxSort + 1,
+    dictLabel: '',
+    dictValue: '',
+    listClass: 'primary',
+  });
+}
+
+/**
+ * 删除指定索引的字典项
+ *
+ * @param index - 要删除的字典项索引
+ */
+function deleteDictItem(index: number): void {
+  dictItemList.value.splice(index, 1);
+}
+
+/**
+ * 按 dictSort 字段对字典项列表进行升序排序
+ */
+function sortByDictSort(): void {
+  dictItemList.value = dictItemList.value.toSorted(
+    (a: DictItem, b: DictItem) => a.dictSort - b.dictSort,
+  );
+}
+
+/**
+ * 重新计算所有字典项的排序号，使其连续
+ *
+ * 先按 dictSort 排序，然后从最小值开始重新编号（0, 1, 2, ...）
+ */
+function reorderSortIndex(): void {
+  if (dictItemList.value.length === 0) return;
+
+  sortByDictSort();
+
+  const start = dictItemList.value[0]!.dictSort;
+  dictItemList.value.forEach((item: DictItem, index: number) => {
+    item.dictSort = start + index;
+  });
+}
+
+/**
+ * 交换所有字典项的 dictLabel 和 dictValue 值
+ *
+ * 用于切换 label 和 value 的对应关系
+ */
+function swapKeyValue(): void {
+  dictItemList.value.forEach((item: DictItem) => {
+    const temp = item.dictLabel;
+    item.dictLabel = item.dictValue;
+    item.dictValue = temp;
+  });
+}
+
+/**
+ * 根据 resetSortIndex 状态重新计算所有字典项的排序号
+ *
+ * - resetSortIndex = true: 从 0 开始排序（0, 1, 2, ...）
+ * - resetSortIndex = false: 从 sortStartIndex 开始排序
+ */
+function resetSortByIndex(): void {
+  dictItemList.value.forEach((item: DictItem, index: number) => {
+    item.dictSort = resetSortIndex.value ? index : sortStartIndex.value + index;
+  });
+}
+
+/** ====================  模态框组件  ==================== */
+/**
+ * 一键生成字典数据模态框
+ *
+ * 功能：
+ * - 从字典类型的 remark 字段解析并生成字典数据项
+ * - 支持编辑、新增、删除字典项
+ * - 支持调整排序号、交换 label 和 value
+ */
+const [Modal, modalApi] = useVbenModal({
+  /**
+   * 模态框打开/关闭事件处理
+   * @param isOpen - 是否打开
+   */
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData();
+
+      // 设置已有字典数据列表
+      existingDictList.value = data.items ?? [];
+
+      // 计算排序起始索引（已有数据最大排序号 + 1）
+      sortStartIndex.value =
+        existingDictList.value.length > 0
+          ? existingDictList.value[existingDictList.value.length - 1]!
+              .dictSort + 1
+          : 0;
+
+      // 设置字典类型信息
+      dictType.value = data.type ?? {};
+
+      // 初始化字典数据项列表
+      initDictItems();
+    }
+  },
+
+  /**
+   * 确认按钮点击事件处理
+   *
+   * 遍历 dictItemList 进行新增操作：
+   * - 成功：从列表中移除，继续处理下一项
+   * - 失败：保留在列表中，关闭模态框后可继续编辑
+   */
+  async onConfirm() {
+    const shouldClose = ref(true);
+
+    modalApi.setState({ loading: true });
+
+    // 倒序遍历，删除元素时索引不会影响后续元素
+    for (let i = dictItemList.value.length - 1; i >= 0; i--) {
+      const item = dictItemList.value[i]!;
+      try {
+        // TODO: 调用实际的 API 添加字典项
+        // await addDictItemApi(item);
+        await addSysDictDataApi({ ...item, dictType: dictType.value.dictType });
+        message.success(`${item.dictLabel}添加成功`);
+
+        // 添加成功后，从 dictItemList 中移除
+        dictItemList.value.splice(i, 1);
+      } catch (error) {
+        console.error(error);
+        message.error(`${item.dictLabel}添加失败: ${error}`);
+        shouldClose.value = false;
+      }
+    }
+
+    modalApi.setState({ loading: false });
+
+    // 全部成功才关闭模态框
+    if (shouldClose.value) {
+      emit('confirm');
+      modalApi.close();
+    }
+  },
+});
+</script>
+<!-- class: 'w-[1200px]',
+      closeOnClickModal: false,
+      centered: true,
+      contentClass: 'min-h-0', -->
+<template>
+  <Modal
+    title="一键生成字典数据"
+    class="w-[1200px]"
+    :close-on-click-modal="false"
+    centered
+    content-class="min-h-0"
+  >
+    <Alert
+      message="注意,存在已经定义的字典数据,请核对生成的数据是否与已定义的数据冲突"
+      type="warning"
+      show-icon
+    />
+    <div class="mt-2">
+      <div class="flex items-center justify-end gap-4">
+        <div class="flex gap-2">
+          <p class="text-sm">是否忽略已有字典项</p>
+          <Switch v-model:checked="resetSortIndex" @change="resetSortByIndex" />
+        </div>
+        <div class="flex gap-2">
+          <p class="text-sm">是否反向</p>
+          <Switch v-model:checked="isReverse" @change="swapKeyValue" />
+        </div>
+        <Button type="primary" @click="addDictItem">新增</Button>
+        <Button @click="sortByDictSort">更新排序</Button>
+        <Button @click="reorderSortIndex">重新排序</Button>
+        <Button @click="initDictItems">重置</Button>
+      </div>
+      <div class="mt-2 flex flex-col gap-2 text-sm">
+        <div class="grid grid-cols-12 gap-2">
+          <p class="col-span-3">显示名称</p>
+          <p class="col-span-3">值</p>
+          <p class="col-span-3">标签颜色</p>
+          <p class="w-full">排序</p>
+          <p class="w-full">操作</p>
+          <p class="w-full">预览</p>
+        </div>
+        <div
+          v-for="(item, index) in dictItemList"
+          :key="index"
+          class="grid grid-cols-12 gap-2"
+        >
+          <Input class="col-span-3" v-model:value="item.dictLabel" />
+          <Input class="col-span-3" v-model:value="item.dictValue" />
+          <Select
+            class="col-span-3"
+            v-model:value="item.listClass"
+            :options="[
+              {
+                label: 'primary(蓝色)',
+                value: 'primary',
+              },
+              {
+                label: 'danger(红色)',
+                value: 'danger',
+              },
+              {
+                label: 'warning(黄色)',
+                value: 'warning',
+              },
+              {
+                label: 'success(绿色)',
+                value: 'success',
+              },
+              {
+                label: 'default(默认)',
+                value: 'default',
+              },
+            ]"
+          />
+          <InputNumber class="w-full" v-model:value="item.dictSort" />
+          <Button type="primary" danger @click="deleteDictItem(index)">
+            删除
+          </Button>
+          <div class="flex items-center justify-center">
+            <Tag :color="getTagColor(item.listClass)">{{ item.dictLabel }}</Tag>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped></style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dict-data/dict-data-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/dict-data/dict-data-drawer.vue
new file mode 100644
index 0000000..dcf723d
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dict-data/dict-data-drawer.vue
@@ -0,0 +1,131 @@
+<!--
+ * @description 字典数据编辑抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { SysMenuListData } from '#/api/system/menu';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { addSysDictDataApi, editSysDictDataApi, getSysDictDataViewApi } from '#/api/system/dict';
+import { drawerSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+  dictType: string;
+}
+
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({confirmLoading:true,loading:true})
+    const { id, update, view, dictType } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+
+
+    if (isUpdate.value || isView.value) {
+      const record = await getSysDictDataViewApi({ dictCode: Number(id) });
+      record.dictType = dictType;
+      await formApi.setValues(record);
+    }else {
+      await formApi.setValues({
+        dictType: dictType,
+      });
+    }
+    drawerApi.setState({confirmLoading:false,loading:false})
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:true,
+        "only-read":true,
+      } } });
+    }else{
+      drawerApi.setState({ showConfirmButton: true});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:false,
+        "only-read":false,
+      }} });
+    }
+
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({confirmLoading:true,loading:true})
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    const res = await (isUpdate.value ? editSysDictDataApi (data) : addSysDictDataApi(data));
+    // console.log('handleConfirm',res);
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({confirmLoading:false,loading:false})
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm>
+    </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dict-data/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/dict-data/index.vue
new file mode 100644
index 0000000..32854de
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dict-data/index.vue
@@ -0,0 +1,339 @@
+<!--
+ * @description 字典数据管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { AccessControl } from '@vben/access';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { MdiDelete, MdiPlus } from '@vben/icons';
+import { getVxePopupContainer } from '@vben/utils';
+
+import {
+  Button,
+  Dropdown,
+  Menu,
+  MenuItem,
+  message,
+  Modal,
+  Popconfirm,
+  Tag,
+} from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteSysDictDataApi, getSysDictDataListApi } from '#/api';
+
+import Create from './dict-create-modal.vue';
+import dictDataDrawer from './dict-data-drawer.vue';
+import { CopyDefineInfo, CopyValueInfo } from './utils.js';
+
+const requestData = ref<any>({});
+
+const route = useRouter();
+const dictId = Number.parseInt(
+  route.currentRoute.value.path.split('/').pop() || '0',
+);
+const dictName = ref('');
+const dictType = ref('');
+const dictIsSys = ref('1'); // 默认为非系统内置，避免在加载完成前误判权限
+
+const CheckboxChecked = ref(false);
+
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    checkboxConfig: {
+      highlight: true,
+      labelField: 'dictCode',
+    },
+    columns: [
+      { align: 'left', title: 'ID', type: 'checkbox', width: 80 },
+      { field: 'dictLabel', title: '字典标签', slots: { default: 'label' } },
+      { field: 'dictValue', title: '字典值' },
+      { field: 'remark', title: '备注' },
+      { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' },
+      { title: '操作', width: 120, slots: { default: 'action' } },
+    ],
+    exportConfig: {},
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }: any, formValues: any) => {
+          const res = await getSysDictDataListApi({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            dictId,
+            ...formValues,
+          });
+          requestData.value = res;
+          // createModalApi.setData(requestData.value).open();
+          // console.log('res',res);
+          return res;
+        },
+        querySuccess: ({ response }: any) => {
+          dictName.value = response.type.dictName;
+          dictType.value = response.type.dictType;
+          dictIsSys.value = response.type.isSys || '1'; // 获取字典类型的系统内置状态
+        },
+      },
+    },
+    toolbarConfig: {
+      custom: true,
+      resizable: true,
+    },
+  },
+  gridEvents: {
+    checkboxChange: handleCheckboxChange,
+    checkboxAll: handleCheckboxChange,
+  },
+});
+const labelColor = (row: any) => {
+  if (row.listClass === 'primary') {
+    return 'blue';
+  }
+  if (row.listClass === 'success') {
+    return 'green';
+  }
+  if (row.listClass === 'warning') {
+    return 'yellow';
+  }
+  if (row.listClass === 'danger') {
+    return 'red';
+  }
+  if (row.listClass === 'secondary') {
+    return 'purple';
+  }
+  if (row.listClass === 'info') {
+    return 'cyan';
+  }
+  return 'default';
+};
+
+const [DictDrawer, dictDrawerApi] = useVbenDrawer({
+  connectedComponent: dictDataDrawer,
+});
+
+function handleView(row: any) {
+  const { dictCode } = row;
+  dictDrawerApi.setData({
+    id: dictCode,
+    update: false,
+    view: true,
+    dictType: dictType.value,
+  });
+  dictDrawerApi.open();
+}
+
+function handleAdd() {
+  dictDrawerApi.setData({
+    update: false,
+    view: false,
+    dictType: dictType.value,
+  });
+  dictDrawerApi.open();
+}
+
+function handleEdit(row: any) {
+  dictDrawerApi.setData({
+    id: row.dictCode,
+    update: true,
+    view: false,
+    dictType: dictType.value,
+  });
+  dictDrawerApi.open();
+}
+
+async function handleDelete(row: any) {
+  await deleteSysDictDataApi({ dictCodes: [row.dictCode] });
+  message.success('删除成功');
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: any) => row.dictCode);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysDictDataApi({ dictCodes: ids });
+      message.success('删除成功');
+      await handleRefresh();
+    },
+  });
+}
+
+/** ====================  组件  ==================== */
+const [CreateModal, createModalApi] = useVbenModal({
+  connectedComponent: Create,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid :table-title="`[${dictName}]` + `[${dictType}]` + `字典数据`">
+      <template #toolbar-tools>
+        <!-- 新增按钮：系统内置时只有超级管理员可操作 -->
+        <AccessControl
+          :codes="
+            dictIsSys === '0' ? ['cpr:superadmin'] : ['cpm:system:dict:add']
+          "
+          type="code"
+        >
+          <template #default="{ hasPermission }">
+            <Button
+              class="mr-2 flex items-center"
+              type="primary"
+              :icon="h(MdiPlus)"
+              :disabled="!hasPermission"
+              @click="handleAdd"
+            >
+              新增
+            </Button>
+          </template>
+        </AccessControl>
+
+        <!-- 批量删除按钮：系统内置时只有超级管理员可操作 -->
+        <AccessControl
+          :codes="
+            dictIsSys === '0' ? ['cpr:superadmin'] : ['cpm:system:dict:remove']
+          "
+          type="code"
+        >
+          <template #default="{ hasPermission }">
+            <Button
+              class="mr-2 flex items-center"
+              type="primary"
+              :disabled="!CheckboxChecked || !hasPermission"
+              :icon="h(MdiDelete)"
+              @click="handleMultiDelete"
+            >
+              删除
+            </Button>
+          </template>
+        </AccessControl>
+        <AccessControl
+          :codes="
+            dictIsSys === '0' ? ['cpr:superadmin'] : ['cpm:system:dict:add']
+          "
+          type="code"
+        >
+          <Dropdown>
+            <Button>更多操作</Button>
+            <template #overlay>
+              <Menu>
+                <MenuItem @click="CopyDefineInfo(requestData)">
+                  复制字典定义信息
+                </MenuItem>
+                <MenuItem @click="CopyValueInfo(requestData)">
+                  复制值定义
+                </MenuItem>
+                <MenuItem @click="createModalApi.setData(requestData).open()">
+                  一键生成字典数据
+                </MenuItem>
+              </Menu>
+            </template>
+          </Dropdown>
+        </AccessControl>
+      </template>
+      <template #label="{ row }">
+        <Tag :color="labelColor(row)">{{ (row as any).dictLabel }}</Tag>
+      </template>
+      <template #status="{ row }">
+        <Tag :color="(row as any).status === '0' ? 'green' : 'red'">
+          {{ (row as any).status === '0' ? '正常' : '停用' }}
+        </Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleView(row)"
+            v-access:code="'cpm:system:dict:query'"
+          >
+            查看
+          </Button>
+
+          <!-- 修改按钮：系统内置时只有超级管理员可操作 -->
+          <AccessControl
+            :codes="
+              dictIsSys === '0' ? ['cpr:superadmin'] : ['cpm:system:dict:edit']
+            "
+            type="code"
+          >
+            <template #default="{ hasPermission }">
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                :disabled="!hasPermission"
+                @click="handleEdit(row)"
+              >
+                修改
+              </Button>
+            </template>
+          </AccessControl>
+
+          <!-- 删除按钮：系统内置时只有超级管理员可操作 -->
+          <AccessControl
+            :codes="
+              dictIsSys === '0'
+                ? ['cpr:superadmin']
+                : ['cpm:system:dict:remove']
+            "
+            type="code"
+          >
+            <template #default="{ hasPermission }">
+              <!-- 有权限时显示可点击的删除按钮 -->
+              <Popconfirm
+                v-if="hasPermission"
+                :get-popup-container="getVxePopupContainer"
+                placement="left"
+                title="确定删除吗？"
+                @confirm="handleDelete(row)"
+              >
+                <Button
+                  class="mr-2 border-none p-0"
+                  :block="false"
+                  type="link"
+                  danger
+                >
+                  删除
+                </Button>
+              </Popconfirm>
+              <!-- 无权限时显示禁用的删除按钮，不包含点击事件 -->
+              <Button
+                v-else
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+                disabled
+              >
+                删除
+              </Button>
+            </template>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <DictDrawer @reload="handleRefresh" />
+    <CreateModal @confirm="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dict-data/model.ts b/admin-ui/vue/apps/web-antd/src/views/system/dict-data/model.ts
new file mode 100644
index 0000000..3fd80ba
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dict-data/model.ts
@@ -0,0 +1,98 @@
+/**
+ * @description 字典数据模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+import type { VbenFormSchema } from '@vben/common-ui';
+
+export const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'dictCode',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    fieldName: 'dictType',
+    label: '字典类型',
+  },
+  // {
+  //   component: 'Input',
+  //   fieldName: 'listClass',
+  //   label: '标签样式',
+  // },
+  {
+    component: 'Select',
+    fieldName: 'listClass',
+    label: '标签样式',
+    componentProps: {
+      placeholder: '请选择标签样式',
+      options: [
+        {
+          label: 'primary(蓝色)',
+          value: 'primary',
+        },
+        {
+          label: 'danger(红色)',
+          value: 'danger',
+        },
+        {
+          label: 'warning(黄色)',
+          value: 'warning',
+        },
+        {
+          label: 'success(绿色)',
+          value: 'success',
+        },
+        {
+          label: 'default(默认)',
+          value: 'default',
+        },
+      ],
+    },
+    defaultValue: 'default',
+  },
+  {
+    component: 'Input',
+    fieldName: 'dictLabel',
+    label: '数据标签',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'dictValue',
+    label: '数据键值',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    componentProps: {
+      placeholder: '可使用tailwind类名 如bg-blue w-full h-full等',
+    },
+    fieldName: 'cssClass',
+    formItemClass: 'items-baseline',
+    help: '标签的css样式, 可添加已经编译的css类名',
+    label: 'css类名',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'dictSort',
+    label: '显示排序',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-baseline',
+    label: '备注',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dict-data/utils.ts b/admin-ui/vue/apps/web-antd/src/views/system/dict-data/utils.ts
new file mode 100644
index 0000000..4a3e7df
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dict-data/utils.ts
@@ -0,0 +1,32 @@
+import { ref } from 'vue';
+
+import QuickCopy from '#/utils/HtCustom/QuickCopy';
+
+/**
+ * 一键复制字典基本信息
+ */
+export function CopyDefineInfo(v: any) {
+  const name = v?.type?.dictName;
+  const type = v?.type?.dictType;
+  const info = v?.type?.remark.replaceAll('\n', ' ');
+  const str = `\n/** ${name} ${info} */\n${type.toUpperCase()} = '${type}',`;
+  QuickCopy(str);
+}
+/**
+ * 一键复制字典值的常量枚举
+ */
+export function CopyValueInfo(v: any) {
+  const name = v?.type?.dictName;
+  const type = v?.type?.dictType;
+  const info = v?.type?.remark.replaceAll('\n', ' ');
+
+  const str = ref(`\n/** ${name} ${info} */\n${type.toUpperCase()}`);
+  const jsonStr = ref(``);
+  v.items.forEach((item: any) => {
+    jsonStr.value += `\n\t/** ${item.dictLabel} */`;
+    jsonStr.value += `\n\t${item.dictValue.toUpperCase()} : '${item.dictValue}',`;
+  });
+
+  str.value += ` : {${jsonStr.value}\n},`;
+  QuickCopy(str.value);
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dict/dict-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/dict/dict-drawer.vue
new file mode 100644
index 0000000..68350bf
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dict/dict-drawer.vue
@@ -0,0 +1,153 @@
+<!--
+ * @description 字典类型编辑抽屉组件
+ * @Link  https://github.com/xiujie
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { SysMenuListData } from '#/api/system/menu';
+
+import { computed, nextTick, ref } from 'vue';
+import { AccessControl } from '@vben/access';
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+import { Radio, RadioGroup } from  'ant-design-vue';
+import { useVbenForm } from '#/adapter/form';
+  import { getDictOptions } from '#/utils/dict';
+  import { DictEnum } from '@vben/constants';
+import { addSysDictTypeApi, editSysDictTypeApi, getSysDictTypeViewApi } from '#/api/system/dict';
+import { drawerSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({confirmLoading:true,loading:true})
+    const { id, update, view } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await getSysDictTypeViewApi({ dictId: Number(id) });
+      console.log('record', record);
+      // 回显 isSys 字段，接口返回 '0' 显示“是”，'1' 显示“否”
+      if (record && typeof record.isSys !== 'undefined') {
+        record.isSys = record.isSys === '0' ? 'Y' : 'N';
+      }
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({confirmLoading:false,loading:false})
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:true,
+        "only-read":true,
+      } } });
+    }else{
+      drawerApi.setState({ showConfirmButton: true});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:false,
+        "only-read":false,
+      }} });
+    }
+
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({confirmLoading:true,loading:true})
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+
+    // 转换 isSys 字段：Y -> 0（是），N -> 1（否）
+    if (data.isSys) {
+      data.isSys = data.isSys === 'Y' ? '0' : '1';
+    }
+
+    await (isUpdate.value ? editSysDictTypeApi (data) : addSysDictTypeApi(data));
+
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({confirmLoading:false,loading:false})
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm>
+      <!-- 这里判断用户身份，并设置字段的可编辑性  isSys    ['cpr:superadmin']    -->
+        <template #isSys="slotProps">
+          <AccessControl :codes="['cpr:superadmin']" type="code" v-slot="{ hasPermission }">
+            <div>
+              <RadioGroup
+                v-bind="slotProps"
+                :options="getDictOptions(DictEnum.SYS_YES_NO)"
+                buttonStyle="solid"
+                optionType="button"
+                :disabled="!hasPermission || isView"
+                @change="(value) => {
+                  if (!isView && slotProps.onChange) {
+                    slotProps.onChange(value);
+                  }
+                }"
+              />
+            </div>
+          </AccessControl>
+        </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dict/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/dict/index.vue
new file mode 100644
index 0000000..9c84471
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dict/index.vue
@@ -0,0 +1,278 @@
+<!--
+ * @description 字典类型管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import type {  DeepPartial } from '@vben/types';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions,VxeGridListeners } from '#/adapter/vxe-table';
+import type { SysDictTypeListModel } from '#/api/system/dict';
+import { getVxePopupContainer } from '@vben/utils';
+import { Page,useVbenDrawer } from '@vben/common-ui';
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+
+import { Button, message, Popconfirm,Tag, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysDictTypeListApi, deleteSysDictTypeApi } from '#/api/system/dict';
+import { useRoute, useRouter } from 'vue-router';
+import {
+  MdiPlus,
+  MdiDelete,
+} from '@vben/icons';
+
+import dictDrawer from './dict-drawer.vue';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'dictName',
+      label: '字典名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'dictType',
+      label: '字典类型',
+    },
+    {
+      component: 'Select',
+      fieldName: 'isSys',
+      label: '系统内置',
+      componentProps: {
+        options: [
+          {
+            label: '否',
+            value: '1',
+          },
+          {
+            label: '是',
+            value: '0',
+          },
+        ],
+      },
+    },
+    {
+      component: 'RangePicker',
+      // defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'createdAt',
+      label: '创建时间',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat:"YYYY-MM-DD",
+      },
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 40 },
+    { field: 'dictId', title: 'ID' },
+    { field: 'dictName', title: '字典名称' },
+    { field: 'dictType', title: '字典类型' ,slots: { default: 'type' }, },
+    { field: 'isSys', title: '系统内置', slots: { default: 'isSys' } },
+    { field: 'remark', title: '备注' },
+    { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' },
+    { title: '操作', width: 120, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await getSysDictTypeListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+
+const [Grid,gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+const router = useRouter();
+const handleClickDictType = (dictId: number) => {
+  router.push(`/system/dict-data/${dictId}`);
+}
+
+const [DictDrawer, dictDrawerApi] = useVbenDrawer({
+  connectedComponent: dictDrawer,
+});
+
+
+function handleView(row: SysDictTypeListModel) {
+  const { dictId } = row;
+  dictDrawerApi.setData({id: dictId, update:false,view:true});
+  dictDrawerApi.open();
+}
+
+function handleAdd() {
+  dictDrawerApi.setData({update:false, view:false});
+  dictDrawerApi.open();
+}
+
+function handleEdit(row: SysDictTypeListModel) {
+  dictDrawerApi.setData({ id: row.dictId, update:true, view:false });
+  dictDrawerApi.open();
+}
+
+async function handleDelete(row: SysDictTypeListModel) {
+  await deleteSysDictTypeApi({ dictIds: [row.dictId] });
+  message.success("删除成功");
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysDictTypeListModel) => row.dictId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysDictTypeApi({ dictIds: ids });
+      message.success("删除成功");
+      await handleRefresh();
+    },
+  });
+}
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid :table-title="'字典类型列表'">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:dict:add'">新增</Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:system:dict:remove'">删除</Button>
+      </template>
+      <template #type="{ row }">
+        <Button type="link" :block="false" @click="handleClickDictType(row.dictId)" >{{ row.dictType }}</Button>
+      </template>
+       <template #isSys="{ row }">
+        <Tag :color="row.isSys == '0' ? 'green' : 'red'">{{ row.isSys == '0' ? '是' : '否' }}</Tag>
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status == '0' ? 'green' : 'red'">{{ row.status == '0' ? '正常' : '停用' }}</Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleView(row)" v-access:code="'cpm:system:dict:query'">查看</Button>
+
+          <!-- 修改按钮：系统内置时只有超级管理员可操作 -->
+          <AccessControl
+            :codes="row.isSys === '0' ? ['cpr:superadmin'] : ['cpm:system:dict:edit']"
+            type="code"
+          >
+            <template #default="{ hasPermission }">
+              <Button
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                :disabled="!hasPermission"
+                @click="handleEdit(row)"
+              >
+                修改
+              </Button>
+            </template>
+          </AccessControl>
+
+          <!-- 删除按钮：系统内置时只有超级管理员可操作 -->
+          <AccessControl
+            :codes="row.isSys === '0' ? ['cpr:superadmin'] : ['cpm:system:dict:remove']"
+            type="code"
+          >
+            <template #default="{ hasPermission }">
+              <!-- 有权限时显示可点击的删除按钮 -->
+              <Popconfirm
+                v-if="hasPermission"
+                :get-popup-container="getVxePopupContainer"
+                placement="left"
+                title="确定删除吗？"
+                @confirm="handleDelete(row)"
+              >
+                <Button
+                  class="mr-2 border-none p-0"
+                  :block="false"
+                  type="link"
+                  danger
+                >
+                  删除
+                </Button>
+              </Popconfirm>
+              <!-- 无权限时显示禁用的删除按钮，不包含点击事件 -->
+              <Button
+                v-else
+                class="mr-2 border-none p-0"
+                :block="false"
+                type="link"
+                danger
+                disabled
+              >
+                删除
+              </Button>
+            </template>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <DictDrawer @reload="handleRefresh"/>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/dict/model.ts b/admin-ui/vue/apps/web-antd/src/views/system/dict/model.ts
new file mode 100644
index 0000000..9ba6831
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/dict/model.ts
@@ -0,0 +1,67 @@
+/**
+ * @description 字典类型模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+import type { VbenFormSchema } from '@vben/common-ui';
+
+import { z } from '@vben/common-ui';
+import { DictEnum } from '@vben/constants';
+
+import { getDictOptions } from '#/utils/dict';
+
+export const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'dictId',
+    label: 'dictId',
+  },
+  {
+    component: 'Input',
+    fieldName: 'dictName',
+    label: '字典名称',
+    rules: z
+      .string()
+      .min(1, '字典名称不能为空')
+      .max(32, '字典名称最大长度32位'),
+  },
+  {
+    component: 'Input',
+    fieldName: 'dictType',
+    help: '使用英文/下划线命名, 如:sys_normal_disable',
+    label: '字典类型',
+    rules: z
+      .string()
+      .regex(/^[a-z_]+$/i, { message: '字典类型只能使用英文/下划线命名' }),
+  },
+  // 添加是否系统内置 字段
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_YES_NO),
+      optionType: 'button',
+    },
+    defaultValue: 'N', // 默认为"否"，提交时会转换为 1
+    fieldName: 'isSys',
+    label: '是否系统内置',
+    rules: 'required',
+    // 根据用户身份决定这个字段的值是否可以修改； cpr:superadmin
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    componentProps: {
+      width: '100%',
+      rows: 8,
+    },
+    label: '备注',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/UnitInformation/content.vue b/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/UnitInformation/content.vue
new file mode 100644
index 0000000..b9bba2a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/UnitInformation/content.vue
@@ -0,0 +1,368 @@
+<!--
+ * @description 单位信息认证内容
+-->
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { SysDeptViewRes } from '#/api/system/dept';
+
+import { markRaw, onMounted, ref } from 'vue';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import {
+  batchGetDeptNames,
+  editSysDeptApi,
+  viewSysDeptApi,
+} from '#/api/system/dept';
+import { Edit, View } from '#/api/iotlcm/zAnother/tAgentEnterprise';
+import { getUserProfileApi } from '#/api/system/user';
+import SelectDivision from '#/components/selectDivision/index.vue';
+
+const loading = ref(false);
+const formData = ref<null | SysDeptViewRes>(null);
+
+// 单位信息表单（只读，无更新按钮）
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+      disabled: true,
+    },
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  resetButtonOptions: {
+    show: false,
+  },
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: false,
+        triggerFields: [''],
+      },
+      fieldName: 'deptId',
+    },
+    {
+      component: 'Input',
+      fieldName: 'phone',
+      label: '联系电话',
+    },
+    {
+      component: 'Input',
+      fieldName: 'email',
+      label: '邮箱',
+    },
+    {
+      component: 'Input',
+      fieldName: 'creditCode',
+      label: '统一社会信用代码',
+    },
+    {
+      component: markRaw(SelectDivision),
+      componentProps: {
+        disabled: true,
+        maxLevel: 2,
+      },
+      fieldName: 'areaCode',
+      label: '组织所在地',
+    },
+    {
+      component: 'Input',
+      fieldName: 'address',
+      label: '详细地址',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+// 实名认证表单
+const [BasicRealNameForm, realNameFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  handleSubmit: handleRealNameSubmit,
+  layout: 'horizontal',
+  resetButtonOptions: {
+    show: false,
+  },
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      dependencies: {
+        show: false,
+        triggerFields: [''],
+      },
+      fieldName: 'deptId',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      fieldName: 'fullName',
+      label: '单位全称',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      fieldName: 'industry',
+      label: '行业',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      fieldName: 'legalPersonName',
+      label: '法人姓名',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      fieldName: 'legalPersonIdCard',
+      label: '法人身份证号',
+      rules: z
+        .string()
+        .length(18, '身份证号必须为18位')
+        .optional()
+        .or(z.literal('')),
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      fieldName: 'companyType',
+      label: '单位类型',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        disabled: true,
+        valueFormat: 'YYYY-MM-DD',
+      },
+      fieldName: 'establishTime',
+      label: '成立时间',
+    },
+    {
+      component: 'Input',
+      fieldName: 'bankName',
+      label: '开户行名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'bankAccount',
+      label: '开户行账号',
+    },
+  ],
+  showDefaultActions: true,
+  submitButtonOptions: {
+    content: '提交认证',
+  },
+});
+
+async function loadDeptInfo() {
+  try {
+    loading.value = true;
+    const profile = await getUserProfileApi();
+    const deptId = profile.user.deptId;
+    if (!deptId) {
+      message.error('当前用户未绑定组织');
+      return;
+    }
+    const res = await viewSysDeptApi({ deptId });
+    formData.value = res;
+
+    let parentName = '';
+    if (res.parentId && res.parentId !== 0) {
+      const deptNames = await batchGetDeptNames([res.parentId]);
+      parentName = deptNames[res.parentId] || '';
+    }
+
+    const data = {
+      ...res,
+      contactAddress: res.creditCode,
+      parentName,
+      status: res.status ? String(res.status) : '0',
+    };
+    await formApi.setValues(data);
+  } catch (error) {
+    console.error('获取单位信息失败', error);
+    message.error('获取单位信息失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadRealNameData() {
+  try {
+    const profile = await getUserProfileApi();
+    const deptId = profile.user.deptId;
+    if (!deptId) {
+      return;
+    }
+    const res = await View({ deptId });
+    await realNameFormApi.setValues({
+      bankAccount: res.bankAccount || '',
+      bankName: res.bankName || '',
+      companyType: res.companyType || '',
+      deptId,
+      establishTime: res.establishTime || '',
+      fullName: res.fullName || '',
+      id: res.id || '',
+      industry: res.industry || '',
+      legalPersonIdCard: res.legalPersonIdCard || '',
+      legalPersonName: res.legalPersonName || '',
+    });
+  } catch (error) {
+    console.error('获取实名认证信息失败', error);
+  }
+}
+
+function realNameButtonLoading(isLoading: boolean) {
+  realNameFormApi.setState((prev) => ({
+    ...prev,
+    submitButtonOptions: { ...prev.submitButtonOptions, loading: isLoading },
+  }));
+}
+
+async function handleRealNameSubmit(values: Recordable<any>) {
+  try {
+    realNameButtonLoading(true);
+    const profile = await getUserProfileApi();
+    const deptId = profile.user.deptId;
+    if (!deptId) {
+      message.error('当前用户未绑定组织');
+      return;
+    }
+    await Edit({ ...values, deptId });
+    message.success('提交成功');
+    await loadRealNameData();
+  } catch (error) {
+    console.error('提交失败', error);
+    message.error('提交失败');
+  } finally {
+    realNameButtonLoading(false);
+  }
+}
+
+onMounted(async () => {
+  await loadDeptInfo();
+  await loadRealNameData();
+});
+</script>
+
+<template>
+  <a-spin :spinning="loading">
+    <div
+      class="enterprise-info-content mt-[16px] grid grid-cols-1 gap-6 lg:grid-cols-2"
+    >
+      <!-- 单位信息（只读） -->
+      <div
+        class="enterprise-info-card flex h-full flex-col rounded-lg bg-white p-6 shadow dark:bg-[#1f1f1f] dark:shadow-none"
+      >
+        <h3
+          class="mb-4 text-base font-medium text-[#1f2329] dark:text-[#f2f2f2]"
+        >
+          单位信息
+        </h3>
+        <BasicForm />
+        <div class="mt-auto pt-4 text-xs text-[#8c8c8c] dark:text-[#8c8c8c]">
+          如需修改请联系管理员
+        </div>
+      </div>
+
+      <!-- 实名认证 -->
+      <div
+        class="enterprise-info-card rounded-lg bg-white p-6 shadow dark:bg-[#1f1f1f] dark:shadow-none"
+      >
+        <h3
+          class="mb-4 text-base font-medium text-[#1f2329] dark:text-[#f2f2f2]"
+        >
+          实名认证
+        </h3>
+        <BasicRealNameForm />
+      </div>
+    </div>
+  </a-spin>
+</template>
+
+<style scoped>
+.enterprise-info-card {
+  border: 1px solid #edf1f7;
+}
+
+:global(.dark) .enterprise-info-card {
+  background: #1f1f1f !important;
+  border-color: #303030 !important;
+  box-shadow: none;
+}
+
+:global(html.dark) .enterprise-info-content :deep(.ant-form-item-label > label),
+:global(.dark) .enterprise-info-content :deep(.ant-form-item-label > label) {
+  color: #d9d9d9;
+}
+
+:global(html.dark) .enterprise-info-content :deep(.ant-input),
+:global(html.dark) .enterprise-info-content :deep(.ant-picker),
+:global(html.dark) .enterprise-info-content :deep(.ant-select-selector),
+:global(.dark) .enterprise-info-content :deep(.ant-input),
+:global(.dark) .enterprise-info-content :deep(.ant-picker),
+:global(.dark) .enterprise-info-content :deep(.ant-select-selector) {
+  color: #f2f2f2;
+  background: #141414;
+  border-color: #3a3a3a;
+}
+
+:global(html.dark) .enterprise-info-content :deep(.ant-input[disabled]),
+:global(html.dark) .enterprise-info-content :deep(.ant-picker-disabled),
+:global(html.dark)
+  .enterprise-info-content
+  :deep(.ant-select-disabled .ant-select-selector),
+:global(.dark) .enterprise-info-content :deep(.ant-input[disabled]),
+:global(.dark) .enterprise-info-content :deep(.ant-picker-disabled),
+:global(.dark)
+  .enterprise-info-content
+  :deep(.ant-select-disabled .ant-select-selector) {
+  color: #a3a3a3 !important;
+  background: #262626 !important;
+  border-color: #3a3a3a !important;
+}
+
+:global(html.dark) .enterprise-info-content :deep(.ant-input::placeholder),
+:global(.dark) .enterprise-info-content :deep(.ant-input::placeholder) {
+  color: #6f6f6f;
+}
+
+:global(html.dark) .enterprise-info-content :deep(.ant-picker-input > input),
+:global(html.dark) .enterprise-info-content :deep(.ant-select-selection-item),
+:global(html.dark)
+  .enterprise-info-content
+  :deep(.ant-select-selection-placeholder),
+:global(.dark) .enterprise-info-content :deep(.ant-picker-input > input),
+:global(.dark) .enterprise-info-content :deep(.ant-select-selection-item),
+:global(.dark)
+  .enterprise-info-content
+  :deep(.ant-select-selection-placeholder) {
+  color: #a3a3a3 !important;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/UnitInformation/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/UnitInformation/index.vue
new file mode 100644
index 0000000..62ecf11
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/UnitInformation/index.vue
@@ -0,0 +1,16 @@
+<!--
+ * @description 单位信息页面
+-->
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+
+import UnitInformationContent from './content.vue';
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="h-full bg-white p-[16px] dark:bg-[#141414]">
+      <UnitInformationContent />
+    </div>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/realNameAuthentication/content.vue b/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/realNameAuthentication/content.vue
new file mode 100644
index 0000000..8cfdfdc
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/realNameAuthentication/content.vue
@@ -0,0 +1,164 @@
+<!--
+ * @description 实名认证内容
+-->
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { onMounted, ref } from 'vue';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { Edit, View } from '#/api/iotlcm/zAnother/tAgentEnterprise';
+import { getUserProfileApi } from '#/api/system/user';
+
+const loading = ref(false);
+
+async function loadData() {
+  try {
+    loading.value = true;
+    const profile = await getUserProfileApi();
+    const deptId = profile.user.deptId;
+    if (!deptId) {
+      message.error('当前用户未绑定组织');
+      return;
+    }
+    const res = await View({ deptId });
+    await formApi.setValues({
+      bankAccount: res.bankAccount || '',
+      bankName: res.bankName || '',
+      companyType: res.companyType || '',
+      deptId,
+      establishTime: res.establishTime || '',
+      fullName: res.fullName || '',
+      id: res.id || '',
+      industry: res.industry || '',
+      legalPersonIdCard: res.legalPersonIdCard || '',
+      legalPersonName: res.legalPersonName || '',
+    });
+  } catch (error) {
+    console.error('获取用户信息失败', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  handleSubmit,
+  layout: 'horizontal',
+  resetButtonOptions: {
+    show: false,
+  },
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      dependencies: {
+        show: false,
+        triggerFields: [''],
+      },
+      fieldName: 'deptId',
+    },
+    {
+      component: 'Input',
+      fieldName: 'fullName',
+      label: '单位全称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'industry',
+      label: '行业',
+    },
+    {
+      component: 'Input',
+      fieldName: 'legalPersonName',
+      label: '法人姓名',
+    },
+    {
+      component: 'Input',
+      fieldName: 'legalPersonIdCard',
+      label: '法人身份证号',
+      rules: z.string().length(18, '身份证号必须为18位'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'companyType',
+      label: '单位类型',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        valueFormat: 'YYYY-MM-DD',
+      },
+      fieldName: 'establishTime',
+      label: '成立时间',
+    },
+    {
+      component: 'Input',
+      fieldName: 'bankName',
+      label: '开户行名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'bankAccount',
+      label: '开户行账号',
+    },
+  ],
+  showDefaultActions: true,
+  submitButtonOptions: {
+    content: '提交认证',
+  },
+});
+
+function buttonLoading(isLoading: boolean) {
+  formApi.setState((prev) => ({
+    ...prev,
+    submitButtonOptions: { ...prev.submitButtonOptions, loading: isLoading },
+  }));
+}
+
+async function handleSubmit(values: Recordable<any>) {
+  try {
+    buttonLoading(true);
+    const profile = await getUserProfileApi();
+    const deptId = profile.user.deptId;
+    if (!deptId) {
+      message.error('当前用户未绑定组织');
+      return;
+    }
+    await Edit({ ...values, deptId });
+    message.success('提交成功');
+    await loadData();
+  } catch (error) {
+    console.error('提交失败', error);
+    message.error('提交失败');
+  } finally {
+    buttonLoading(false);
+  }
+}
+
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<template>
+  <a-spin :spinning="loading">
+    <div class="mt-[16px] md:w-full lg:w-1/2 2xl:w-2/5">
+      <BasicForm />
+    </div>
+  </a-spin>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/tTplatformSetting/content.vue b/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/tTplatformSetting/content.vue
new file mode 100644
index 0000000..efcd8c7
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/enterpriseManagement/tTplatformSetting/content.vue
@@ -0,0 +1,178 @@
+<!--
+ * @description 平台设置管理内容
+-->
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { Edit, List } from '#/api/iotlcm/zAnother/tTplatformSetting';
+import { getDictOptions } from '#/utils/dict';
+
+const loading = ref(false);
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  handleSubmit,
+  layout: 'horizontal',
+  resetButtonOptions: {
+    show: false,
+  },
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+      label: '主键ID',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入二级域名前缀',
+      },
+      fieldName: 'subDomain',
+      label: '二级域名前缀',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入完整域名',
+      },
+      fieldName: 'fullDomain',
+      label: '完整域名',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入平台标题',
+      },
+      fieldName: 'appTitle',
+      label: '平台标题',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入图标地址',
+      },
+      fieldName: 'appIcon',
+      label: '图标地址',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入登录页大标题',
+      },
+      fieldName: 'loginPageTitle',
+      label: '登录页大标题',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入登录页描述文案',
+      },
+      fieldName: 'loginPageDescription',
+      label: '登录页描述',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入登录标语图地址',
+      },
+      fieldName: 'loginSloganImage',
+      label: '登录标语图',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions('sys_common_status'),
+        placeholder: '请选择状态',
+      },
+      fieldName: 'status',
+      label: '状态',
+      rules: 'selectRequired',
+    },
+  ],
+  showDefaultActions: true,
+  submitButtonOptions: {
+    content: '更新配置',
+  },
+});
+
+async function loadData() {
+  try {
+    loading.value = true;
+    const res = await List({ page: 1, pageSize: 1 });
+    if (res.items && res.items.length > 0) {
+      await formApi.setValues(res.items[0]);
+    } else {
+      await formApi.setValues({
+        sort: 0,
+        status: '0',
+      });
+    }
+  } catch (error) {
+    console.error('获取配置信息失败', error);
+    message.error('获取配置信息失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+function buttonLoading(isLoading: boolean) {
+  formApi.setState((prev) => ({
+    ...prev,
+    submitButtonOptions: { ...prev.submitButtonOptions, loading: isLoading },
+  }));
+}
+
+async function handleSubmit(values: Record<string, any>) {
+  try {
+    buttonLoading(true);
+    const submitData = {
+      appIcon: values.appIcon,
+      appTitle: values.appTitle,
+      fullDomain: values.fullDomain,
+      id: values.id,
+      loginPageDescription: values.loginPageDescription,
+      loginPageTitle: values.loginPageTitle,
+      loginSloganImage: values.loginSloganImage,
+      remark: values.remark,
+      sort: values.sort,
+      status: values.status,
+      subDomain: values.subDomain,
+    };
+    await Edit(submitData);
+    message.success('更新成功');
+    await loadData();
+  } catch (error) {
+    console.error('更新配置失败', error);
+    message.error('更新配置失败');
+  } finally {
+    buttonLoading(false);
+  }
+}
+
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<template>
+  <a-spin :spinning="loading">
+    <div class="mt-[16px] md:w-full lg:w-1/2 2xl:w-2/5">
+      <BasicForm />
+    </div>
+  </a-spin>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/job/edit-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/job/edit-drawer.vue
new file mode 100644
index 0000000..2267a45
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/job/edit-drawer.vue
@@ -0,0 +1,147 @@
+<!--
+ * @description 定时任务编辑抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+import { Space, Button, Input } from 'ant-design-vue';
+import { useVbenForm } from '#/adapter/form';
+import { addSysJobApi, updateSysJobApi, viewSysJobApi } from '#/api/system/job';
+import { drawerSchema } from './model';
+import jobCronModel from './job-cron-model.vue';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  jobId: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const cronExpression = defineModel('cronExpression', {
+  type: String,
+  default: '',
+});
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [JobCronModel, jobCronModelApi] = useVbenModal({
+  zIndex: 2001,
+  connectedComponent: jobCronModel,
+});
+
+async function cronExpressionChanged(cron:any){
+  cronExpression.value = cron;
+  formApi.setValues({cronExpression: cron});
+};
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-3',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({confirmLoading:true,loading:true})
+    const { jobId, update, view} = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    cronExpression.value = "";
+    if (isUpdate.value || isView.value) {
+      const record = await viewSysJobApi({ jobId: Number(jobId) });
+      cronExpression.value = record.cronExpression;
+      record.misfirePolicy = record.misfirePolicy != null ? String(record.misfirePolicy): null;
+      record.concurrent = record.concurrent != null ? String(record.concurrent): null;
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({confirmLoading:false,loading:false})
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:true,
+        "only-read":true,
+      } } });
+    }else{
+      drawerApi.setState({ showConfirmButton: true});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:false,
+        "only-read":false,
+      }} });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({confirmLoading:true,loading:true})
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep( await formApi.getValues());
+    await (isUpdate.value ? updateSysJobApi (data) : addSysJobApi(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({confirmLoading:false,loading:false})
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+function cronExpressionChange(event: any) {
+  console.log("cronExpressionChange", event.target.value);
+  formApi.setValues({cronExpression: event.target.value});
+}
+
+</script>
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm>
+      <template #cronExpression>
+        <Space>          
+          <Input v-model:value="cronExpression" @change="cronExpressionChange" /> 
+          <Button type="primary" @click="jobCronModelApi.open()">
+            设置
+          </Button>
+        </Space>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+  <JobCronModel :close-on-click-modal="false" class="w-[800px]" @confirm="cronExpressionChanged($event)" />
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/job/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/job/index.vue
new file mode 100644
index 0000000..b055817
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/job/index.vue
@@ -0,0 +1,248 @@
+<!--
+ * @description 定时任务管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import type { VbenFormProps } from '#/adapter/form';
+import type { DeepPartial } from '@vben/types';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { SysJob } from '#/api/system/job'
+
+import { h, ref } from 'vue';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+import { Button, message, Switch, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysJobListApi, deleteSysJobApi, updateStatusApi, execOnceApi } from '#/api/system/job';
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+import viewDrawer from './view-drawer.vue';
+import editDrawer from './edit-drawer.vue';
+import {
+  MdiDelete,
+  MdiPlus,
+} from '@vben/icons';
+import { renderDict } from '#/utils/render';
+
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'jobName',
+      label: '任务名称',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DictEnum.SYS_JOB_GROUP),
+        placeholder: '请选择',
+      },
+      fieldName: 'jobGroup',
+      label: '任务分组',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+        placeholder: '请选择',
+      },
+      fieldName: 'status',
+      label: '任务状态',
+    }
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<SysJob> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { align: 'left', type: 'checkbox', width: 40 },
+    { title: 'ID', field: 'jobId' },
+    { field: 'jobName', title: '任务名称' },
+    { field: 'remark', title: '任务描述' },
+    { field: 'jobGroup', title: '任务分组',
+      slots: {
+        default: ({ row }) => {
+          let found = renderDict(row.jobGroup, DictEnum.SYS_JOB_GROUP);
+          if (found) {
+            return found;
+          }
+          return row.jobGroup;
+        },
+      },
+    },
+    { field: 'invokeTarget', title: '任务方法名' },
+    { field: 'cronExpression', title: 'cron执行表达式' },
+    {
+      field: 'status',
+      slots: { default: 'open' },
+      title: '状态',
+      width: 100,
+    },
+    { title: '操作', width: 200, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysJobListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+
+const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+});
+
+const [EditDrawer, drawerEditApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+});
+
+function handlePreview(record: SysJob) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+}
+
+
+async function handleDelete(row: SysJob) {
+  await deleteSysJobApi({ jobIds: [row.jobId] });
+  message.success("删除成功");
+  await handleRefresh();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysJob) => row.jobId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysJobApi({ jobIds: ids });
+      message.success("删除成功");
+      await handleRefresh();
+    },
+  });
+}
+
+function handleAdd() {
+  drawerEditApi.setData({ record: {}, update: false, view: false });
+  drawerEditApi.open();
+}
+
+function handleUpdate(row: SysJob) {
+  drawerEditApi.setData({ jobId: row.jobId, update: true, view: false });
+  drawerEditApi.open();
+}
+
+async function handleStatusChange(row: SysJob) {
+  await updateStatusApi({ jobId: row.jobId, status: row.status });
+  message.success('状态更新成功');
+  await gridApi.query();
+}
+
+async function handleExecOnce(row: SysJob) {
+  await execOnceApi({ jobId: row.jobId});
+  message.success('执行成功');
+}
+
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="定时任务列表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:job:add'">新增</Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:system:job:delete'">删除</Button>
+      </template>
+
+      <template #open="{ row }">
+        <Switch v-model:checked="row.status" :checkedValue="'0'" :unCheckedValue="'1'" @change="handleStatusChange(row)"
+        :disabled="!hasAccessByCodes(['cpm:system:job:update'])" />
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:system:job:view'">查看</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleUpdate(row)" v-access:code="'cpm:system:job:update'">编辑</Button>
+          <AccessControl :codes="['cpm:system:job:exec']" type="code">
+            <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确定执行吗？"
+              @confirm="handleExecOnce(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link">执行一次</Button>
+            </Popconfirm>
+          </AccessControl>
+          <AccessControl :codes="['cpm:system:job:delete']" type="code">
+            <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确定删除吗？"
+              @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link" danger >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+
+    </Grid>
+    <ViewDrawer />
+    <EditDrawer @reload="gridApi.query()" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/job/job-cron-model.vue b/admin-ui/vue/apps/web-antd/src/views/system/job/job-cron-model.vue
new file mode 100644
index 0000000..d223a8c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/job/job-cron-model.vue
@@ -0,0 +1,60 @@
+<!--
+ * @description 定时任务Cron表达式设置弹窗组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+
+import { useVbenModal } from '@vben/common-ui';
+
+import JobCorn from '#/components/vue3cron/job-corn.vue';
+import { ref } from 'vue';
+
+const emit = defineEmits<{ 
+  reload: [] ,
+  confirm: [cron:string]
+}>();
+
+const cronExpression = ref<InstanceType<typeof JobCorn>>();
+const [BasicModal, modalApi] = useVbenModal({
+  
+  onOpenChange: (isOpen) => {
+    if (isOpen) {
+      return null;
+    }
+    if (cronExpression.value) {
+      emit('reload');
+      modalApi.close();
+      return null;
+    }
+  },
+});
+async function handleSubmit(apiData: any) {
+    emit('confirm', apiData.cron);
+    modalApi.close();
+  }
+async function handleCancel() {
+    modalApi.close();
+  }
+
+
+</script>
+
+<template>
+    <BasicModal
+      :close-on-click-modal="false"
+      :footer="false"
+      :fullscreen-button="false"
+      title="选择Cron规则"
+    >
+      <div class="flex flex-col gap-4">
+        <JobCorn
+        @cancel="handleCancel"
+        @confirm="handleSubmit"
+        />
+      </div>
+    </BasicModal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/job/model.tsx b/admin-ui/vue/apps/web-antd/src/views/system/job/model.tsx
new file mode 100644
index 0000000..080bd88
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/job/model.tsx
@@ -0,0 +1,160 @@
+/**
+ * @description 定时任务模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+import {
+  z,
+    type VbenFormSchema,
+  } from '@vben/common-ui';
+import type { DescItem } from '#/components/description';
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+
+
+import {
+  renderDict,
+} from '#/utils/render';
+
+export const viewSchema: DescItem[] = [
+  {
+    field: 'jobId',
+    label: 'ID',
+  },
+  {
+    field: 'jobName',
+    label: '任务名称',
+  },
+  {
+    field: 'remark',
+    label: '任务描述',
+  },
+  {
+    field: 'jobGroup',
+    label: '任务分组',
+    render(_, data) {
+      return renderDict(data.jobGroup, DictEnum.SYS_JOB_GROUP);
+    },
+  },
+  {
+    field: 'invokeTarget',
+    label: '调用方法',
+  },
+  {
+    field: 'jobParams',
+    label: '执行参数',
+  },
+  {
+    field: 'cronExpression',
+    label: 'cron表达式'
+  },
+  {
+    field: 'misfirePolicy',
+    label: '计划执行策略',
+    render(_, data) {
+      return renderDict(data.misfirePolicy, DictEnum.SYS_MISSFIRE_POLICY);
+    },
+  },
+  {
+    field: 'concurrent',
+    label: '是否并发执行',
+    render(_, data) {
+      return renderDict(data.concurrent, DictEnum.SYS_JOB_CONCURRENT);
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    render(_, data) {
+      return renderDict(data.status, DictEnum.SYS_NORMAL_DISABLE);
+    },
+  }
+];
+
+export const drawerSchema: VbenFormSchema[] =  [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'jobId',
+    label: '参数主键',
+  },
+  {
+    component: 'Input',
+    fieldName: 'jobName',
+    label: '任务名称',rules: z.string()
+          .min(1, '任务名称不能为空')
+          .max(32, '任务名称最大长度32位'),
+  },
+  {
+    component: 'Input',
+    fieldName: 'remark',
+    label: '任务描述',
+  },
+  {
+    component: 'Select',
+    fieldName: 'jobGroup',
+    label: '任务分组',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_JOB_GROUP),
+      optionType: 'button',
+    },
+    rules: 'required'
+  },
+  {
+    component: 'Input',
+    fieldName: 'invokeTarget',
+    label: '调用方法',
+    rules: 'required'
+  },
+  {
+    component: 'Input',
+    fieldName: 'jobParams',
+    label: '执行参数',
+  },
+  {
+    component: '#cronExpression',
+    fieldName: 'cronExpression',
+    label: 'cron表达式',
+    rules: 'required'
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_MISSFIRE_POLICY),
+      optionType: 'button',
+    },
+    defaultValue: '1',
+    fieldName: 'misfirePolicy',
+    label: '计划执行策略'
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_JOB_CONCURRENT),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'concurrent',
+    label: '是否并发执行'
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'status',
+    label: '状态'
+  }
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/job/view-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/job/view-drawer.vue
new file mode 100644
index 0000000..298aaae
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/job/view-drawer.vue
@@ -0,0 +1,40 @@
+<!--
+ * @description 定时任务查看抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import { useVbenDrawer } from '@vben/common-ui';
+import { Description, useDescription } from '#/components/description';
+import { viewSchema } from './model';
+import type { SysJob } from '#/api/system/job';
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+});
+
+function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = drawerApi.getData() as { record: SysJob };
+  console.log('record', record);
+  setDescProps({ data: record }, true);
+}
+
+</script>
+
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看任务">
+    <Description @register="registerDescription">
+    </Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/logininfor/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/logininfor/index.vue
new file mode 100644
index 0000000..8d542c5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/logininfor/index.vue
@@ -0,0 +1,218 @@
+<!--
+ * @description 登录日志管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import type { VbenFormProps } from '#/adapter/form';
+import type { DeepPartial } from '@vben/types';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { SysLogininfor } from '#/api/system/logininfor'
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+
+import { h, ref } from 'vue';
+import { getVxePopupContainer } from '@vben/utils';
+
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+
+import { Button, message, Tag, Modal, Popconfirm } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysLogininforListApi, deleteSysLogininforApi } from '#/api/system/logininfor';
+import viewDrawer from './view-drawer.vue';
+import {
+  MdiDelete,
+} from '@vben/icons';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'ipaddr',
+      label: '登录地址',
+    },
+    {
+      component: 'Input',
+      fieldName: 'userName',
+      label: '用户名称',
+    },
+    // 登录状态
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: '成功',
+            value: '0',
+          },
+          {
+            label: '失败',
+            value: '1',
+          },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'status',
+      label: '登录状态',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        format: "YYYY-MM-DD",
+        valueFormat: "YYYY-MM-DD",
+      },
+      // defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'loginTime',
+      label: '登录时间',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 40 },
+    { field: 'infoId', title: 'ID' },
+    { field: 'userName', title: '用户名称' },
+    { field: 'clientKey', title: '客户端' },
+    { field: 'deviceType', title: '设备类型' },
+    { field: 'ipaddr', title: '地址' },
+    { field: 'loginLocation', title: '登录地点' },
+    { field: 'browser', title: '浏览器' },
+    { field: 'os', title: '操作系统' },
+    { field: 'status', title: '登录状态' },
+    { field: 'msg', title: '登录信息' },
+    { field: 'loginTime', title: '登录时间' },
+    { title: '操作', width: 120, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysLogininforListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+
+const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+});
+
+function handlePreview(record: SysLogininfor) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+}
+
+
+async function handleDelete(row: SysLogininfor) {
+  await deleteSysLogininforApi({ infoIds: [row.infoId] });
+  message.success("删除成功");
+  await handleRefresh();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysLogininfor) => row.infoId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysLogininforApi({ infoIds: ids });
+      message.success("删除成功");
+      await handleRefresh();
+    },
+  });
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="登录日志列表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:monitor:logininfor:remove'">删除</Button>
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status == '0' ? 'green' : 'red'">{{ row.status == '0' ? '正常' : '关闭' }}</Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:monitor:logininfor:query'">查看</Button>
+          <AccessControl :codes="['cpm:monitor:logininfor:remove']" type="code">
+            <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确定删除吗？"
+              @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link" danger >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <ViewDrawer />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/logininfor/model.tsx b/admin-ui/vue/apps/web-antd/src/views/system/logininfor/model.tsx
new file mode 100644
index 0000000..b3d6e5c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/logininfor/model.tsx
@@ -0,0 +1,133 @@
+/**
+ * @description 登录日志模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+import type {
+    VbenFormSchema,
+  } from '@vben/common-ui';
+  import type { VxeGridProps } from '#/adapter/vxe-table';
+  import type { DescItem } from '#/components/description';
+  import { z } from '@vben/common-ui';
+  import { getDictOptions } from '#/utils/dict';
+  import { DictEnum } from '@vben/constants';
+  import { getPopupContainer } from '@vben/utils';
+  import { Tag } from 'ant-design-vue';
+  import { h } from 'vue';
+
+  import {
+    renderBrowserIcon, renderOsIcon,
+    renderDict,
+    renderHttpMethodTag,
+    renderJsonPreview,
+  } from '#/utils/render';
+
+
+  export const viewSchema: DescItem[] = [
+    {
+      field: 'status',
+      label: '登录状态',
+      labelMinWidth: 80,
+      render(value) {
+        return renderDict(value, DictEnum.SYS_COMMON_STATUS);
+      },
+    },
+    {
+      field: 'clientKey',
+      label: '登录平台',
+      render(value) {
+        if (value) {
+          return value.toUpperCase();
+        }
+        return '';
+      },
+    },
+    {
+      field: 'ipaddr',
+      label: '账号信息',
+      render(_, data) {
+        const { ipaddr, loginLocation, userName } = data;
+        return `账号: ${userName} / ${ipaddr} / ${loginLocation}`;
+      },
+    },
+    {
+      field: 'loginTime',
+      label: '登录时间',
+    },
+    {
+      field: 'msg',
+      label: '登录信息',
+      render(_, data: any) {
+        const { msg, status } = data;
+        return (
+          <span class={['font-bold', status === '0' ? '' : 'text-red-500']}>
+            {msg}
+          </span>
+        );
+      },
+    },
+    {
+      field: 'os',
+      label: '登录设备',
+    },
+    {
+      field: 'browser',
+      label: '浏览器',
+    },
+  ];
+
+  export const drawerSchema: VbenFormSchema[] =  [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'configId',
+      label: '参数主键',
+    },
+    {
+      component: 'Input',
+      fieldName: 'configName',
+      label: '参数名称',rules: z.string()
+      .min(1, '参数名称不能为空')
+      .max(32, '参数名称最大长度32位'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'configKey',
+      label: '参数键名',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      formItemClass: 'items-baseline',
+      fieldName: 'configValue',
+      label: '参数键值',
+      componentProps: {
+        autoSize: true,
+      },
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: getDictOptions(DictEnum.SYS_YES_NO),
+        optionType: 'button',
+      },
+      defaultValue: 'N',
+      fieldName: 'configType',
+      label: '是否内置',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      formItemClass: 'items-baseline',
+      label: '备注',
+    },
+  ];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/logininfor/view-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/logininfor/view-drawer.vue
new file mode 100644
index 0000000..eca51f4
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/logininfor/view-drawer.vue
@@ -0,0 +1,39 @@
+<!--
+ * @description 登录日志查看抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { SysOperLog } from '#/api/system/oper-log';
+import { useVbenDrawer } from '@vben/common-ui';
+import { Description, useDescription } from '#/components/description';
+import { viewSchema } from './model';
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+});
+
+function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = drawerApi.getData() as { record: SysOperLog };
+  setDescProps({ data: record }, true);
+}
+
+</script>
+
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看日志">
+    <Description @register="registerDescription">
+    </Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/menu/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/menu/index.vue
new file mode 100644
index 0000000..dd8bfab
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/menu/index.vue
@@ -0,0 +1,270 @@
+<!--
+ * @description 菜单管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SysMenuListData } from '#/api/system';
+
+import { Page,useVbenDrawer } from '@vben/common-ui';
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+
+import { Button, message, Switch,Tag,Popconfirm  } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysMenuTreeApi,deleteSysMenuApi } from '#/api/system'; 
+import { IconifyIcon } from '@vben/icons';
+import {
+  MdiPlus,
+  MdiEdit,
+  MdiDelete,
+} from '@vben/icons';
+
+import menuDrawer from './menu-drawer.vue';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+/**
+ * 最近一次查询返回的树，供 querySuccess 计算默认展开节点。
+ */
+let latestTree: any[] = [];
+
+/**
+ * 递归收集「默认应该展开」的树节点。
+ *
+ * 背景：菜单表 448 行里有 356 行是权限按钮(F)，占比 ~80%。
+ * 其中 350 个按钮的父节点是 C 菜单，且**61 个 M/C 节点的子节点全部是按钮**
+ * （即这些节点下没有任何子菜单，只有按钮）。
+ *
+ * 关键点：按钮是叶子节点，"折叠按钮自身"没有任何效果——只要父节点展开，
+ * 它就必然显示。所以正确的折叠对象是**承载按钮的那个父节点**。
+ *
+ * 规则：只有当节点下存在「非按钮」子菜单时才默认展开；
+ * 若一个节点的子节点全是按钮(F)，则默认折叠——这样 350 个按钮默认不铺开，
+ * 而 M 目录层与 C 菜单层的结构仍然完整可见。
+ *
+ * 注意：折叠只影响「默认是否展开」，按钮数据本身照常返回，
+ * 用户点开对应节点的三角即可查看其按钮。
+ */
+function collectDefaultExpandedRows(tree: any[]): any[] {
+  const result: any[] = [];
+  const walk = (list: any[]) => {
+    for (const node of list || []) {
+      if (!node) continue;
+      const children = node.children || [];
+      // 存在非按钮子节点 -> 默认展开（继续展示菜单层级）
+      // 子节点全是按钮 -> 默认折叠（隐藏按钮，但保留节点本身）
+      const hasNonButtonChild = children.some((c: any) => c && c.menuType !== 'F');
+      if (hasNonButtonChild) {
+        result.push(node);
+      }
+      walk(children);
+    }
+  };
+  walk(tree);
+  return result;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'menuName',
+      label: '菜单名称',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: '正常',
+            value: '0',
+          },
+          {
+            label: '停用',
+            value: '1',
+          },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'status',
+      label: '状态',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  align: 'center',
+  columns: [
+    { field: 'menuName', title: '菜单名称' , treeNode: true, minWidth: 160,  align: 'left', },
+    { field: 'icon', title: '图标',width: 60,slots: { default: 'icon' }, },
+    { field: 'orderNum', title: '排序' ,width: 60,},
+    { field: 'perms', title: '权限标识' },
+    { field: 'path', title: '路由地址' },
+    { field: 'component', title: '组件路径' },
+    {
+      field: 'status',
+      slots: { default: 'status' },
+      title: '状态',
+      width: 69,
+      align: 'center',
+    },
+    { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' , width: 160},
+    { title: '操作', width: 160, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // 后端 /system/menu/tree 已返回嵌套 children 的树，前端无需再建树
+        const res = await getSysMenuTreeApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+        // 记录本次数据，供 querySuccess 决定默认展开哪些节点
+        latestTree = (res as any)?.items ?? [];
+        return res;
+      },
+      // 数据渲染完成后，只展开「目录 + 菜单」，按钮保持折叠。
+      // 不放在 query 里是因为此时表格尚未拿到数据，setTreeExpand 会失效。
+      querySuccess: () => {
+        const rows = collectDefaultExpandedRows(latestTree);
+        gridApi.grid?.clearTreeExpand();
+        if (rows.length > 0) {
+          gridApi.grid?.setTreeExpand(rows, true);
+        }
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+  treeConfig: {
+    parentField: 'parentId',
+    rowField: 'menuId',
+    // 后端已返回嵌套 children，使用行内树模式（walk expand）：
+    // 点小三角只重算这一棵的展开态，不再触发全表 transform 重建。
+    transform: false,
+    // 显式声明子节点字段名，不依赖 vxe/xe-utils 的隐式默认值。
+    children: 'children',
+    // 不用 expandAll 全展开——那会把 356 个权限按钮也铺开，首屏极慢。
+    // 默认展开范围改由 querySuccess 里的 collectDefaultExpandedRows 精确控制：
+    // 展开「还有子菜单的节点」，折叠「子节点全是按钮的节点」，
+    // 这样菜单层级完整可见，而 350 个按钮默认收起（首屏 448 行 -> 94 行）。
+    expandAll: false,
+  },
+};
+
+const [Grid,gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+// 展开：按钮的主动操作，此时展开全部（含权限按钮），一次性成本由用户按需承担。
+const expandAll = () => {
+  gridApi.grid?.setAllTreeExpand(true);
+};
+
+// 折叠：全部收起，只留顶层
+const collapseAll = () => {
+  gridApi.grid?.setAllTreeExpand(false);
+};
+
+const [MenuDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: menuDrawer,
+});
+
+function handleAdd() {
+  drawerApi.setData({update:false,view:false});
+  drawerApi.open();
+}
+
+function handleView(row: SysMenuListData) {
+  const { menuId } = row;
+  drawerApi.setData({id: menuId, update:false,view:true});
+  drawerApi.open();
+}
+function handleSubAdd(row: SysMenuListData) {
+  const { menuId } = row;
+  drawerApi.setData({ id: menuId, update: false,view:false });
+  drawerApi.open();
+}
+
+async function handleEdit(record: SysMenuListData) {
+  drawerApi.setData({ id: record.menuId, update: true,view:false });
+  drawerApi.open();
+}
+
+async function handleDelete(row: SysMenuListData) {
+  await deleteSysMenuApi({ menuId: row.menuId });
+  await gridApi.query();
+}
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="菜单列表">
+      <template #toolbar-tools>
+        
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:menu:add'">新增</Button>
+        <Button class="mr-2 flex items-center"  @click="expandAll">展开</Button>
+        <Button class="mr-2 flex items-center"  @click="collapseAll">折叠</Button>
+      </template>
+      <template #icon="{ row }">
+        <IconifyIcon :icon="row.icon" />
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status == '0' ? 'green' : 'red'">{{ row.status == '0' ? '正常' : '停用' }}</Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleView(row)" v-access:code="'cpm:system:menu:query'">查看</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:system:menu:edit'">修改</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleSubAdd(row)" v-access:code="'cpm:system:menu:add'">新增</Button>
+          <AccessControl :codes="['cpm:system:menu:remove']" type="code">
+              <Popconfirm placement="left" title="确定删除吗？" @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <MenuDrawer @reload="gridApi.query()" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/menu/menu-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/menu/menu-drawer.vue
new file mode 100644
index 0000000..7dbc23c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/menu/menu-drawer.vue
@@ -0,0 +1,183 @@
+<!--
+ * @description 菜单编辑抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import {
+  addFullName,
+  cloneDeep,
+  getPopupContainer,
+  listToTree,
+} from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  addSysMenuApi,
+  deleteSysMenuApi,
+  getSysMenuViewApi,
+  getSysMenuListApi,
+  updateSysMenuApi,
+} from '#/api/system/menu';
+
+import { drawerSchema } from './model';
+
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const isView = ref(false);
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 90,
+  },
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+async function setupMenuSelect() {
+  // menu
+  const menuArray = await getSysMenuListApi();
+  console.log('setupMenuSelect',menuArray);
+  // support i18n
+  menuArray.items.forEach((item) => {
+    item.menuName = $t(item.menuName);
+  });
+  // const folderArray = menuArray.filter((item) => item.menuType === 'M');
+  /**
+   * 这里需要过滤掉按钮类型
+   * 不允许在按钮下添加数据
+   */
+  const filteredList = menuArray.items.filter((item) => item.menuType !== 'F');
+  const menuTree = listToTree(filteredList, { id: 'menuId', pid: 'parentId' });
+  const fullMenuTree = [
+    {
+      menuId: 0,
+      menuName: $t('menu.root'),
+      children: menuTree,
+    },
+  ];
+  addFullName(fullMenuTree, 'menuName', ' / ');
+
+  formApi.updateSchema([
+    {
+      componentProps: {
+        fieldNames: {
+          label: 'menuName',
+          value: 'menuId',
+        },
+        getPopupContainer,
+        // 设置弹窗滚动高度 默认256
+        listHeight: 300,
+        showSearch: true,
+        treeData: fullMenuTree,
+        treeDefaultExpandAll: false,
+        // 默认展开的树节点
+        treeDefaultExpandedKeys: [0],
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'menuName',
+        treeNodeLabelProp: 'fullName',
+      },
+      fieldName: 'parentId',
+    },
+  ]);
+}
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { id, update,view } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    // 加载菜单树选择
+    await setupMenuSelect();
+    if (id) {
+      await formApi.setFieldValue('parentId', id);
+      if (update || view) {
+        const record = await getSysMenuViewApi({ menuId: Number(id) });
+        await formApi.setValues(record);
+      }
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false });
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:true,
+        "only-read":true,
+      } } });
+    } else {
+      drawerApi.setState({ showConfirmButton: true});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:false,
+        "only-read":false,
+      }} });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? updateSysMenuApi(data) : addSysMenuApi(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm :disabled="isView" />
+  </BasicDrawer>
+</template>
+<style scoped>
+* {
+  color: #000;
+}
+
+
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/menu/menu-select.vue b/admin-ui/vue/apps/web-antd/src/views/system/menu/menu-select.vue
new file mode 100644
index 0000000..40a3a8e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/menu/menu-select.vue
@@ -0,0 +1,337 @@
+<!--
+ * @description 菜单选择组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+
+<script lang="ts" setup>
+import { nextTick, ref, watch } from 'vue';
+import type { DeepPartial } from '@vben/types';
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+import { Tag, Checkbox, Select } from 'ant-design-vue';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysMenuTreeApi } from '#/api/system';
+import { getMenuTypeOptionsLabel, getMenuTypeOptionsColor } from './model';
+
+/** ====================  右键菜单（使用 VXE Table 原生 menuConfig）  ==================== */
+/**
+ * 递归获取某个节点的所有子孙节点。
+ *
+ * 注意：后端 /system/menu/tree 返回的是**嵌套结构**（children 已挂好），
+ * 所以这里直接在 children 上递归，不需要再从扁平列表里 filter 查找。
+ * 旧实现 `tree.filter(item => item[parentField] === parentId)` 依赖扁平列表，
+ * 换成树之后必须同步修改，否则「选择本级及下级」会静默失效。
+ */
+function getDescendants(tree: any[]): any[] {
+  const result: any[] = [];
+  const walk = (list: any[]) => {
+    for (const node of list || []) {
+      if (!node) continue;
+      result.push(node);
+      walk(node.children);
+    }
+  };
+  walk(tree);
+  return result;
+}
+/** ====================  tips:  ==================== */
+/**
+ * @description Tips
+ * @author 幻天
+ * 1.gridApi.setGridOptions({
+    checkboxConfig: {
+      checkStrictly: !params.target.checked,
+    },
+  });
+  此方法:默认勾选指定行（只会在初始化时被触发一次，需要有 row-config.keyField）
+ * 2.该组件在弹窗关闭时会被卸载,即触发onUnmounted
+ * 3.菜单有缓存
+ * 4.想要更新勾选项,必须通过重新挂载Grid来触发checkStrictly
+ * 5.菜单关闭时,外部必须置空menuIds,否则第二次打开时会因为新menuIds正在请求,界面会显示旧的menuIds
+  外部置空menuIds后,会重载一次无勾选的Grid,防止显示旧的menuIds
+ */
+/**
+ * @description 现有流程
+ * @author 幻天
+ *
+ * 1.第一次打开抽屉
+ * 2.外部初始化,获取数据menuIds
+ * 3.该组件开始挂载
+ * 4.Grid开始挂载,请求菜单
+ * 5.请求成功后,设置勾选项
+ *
+ * 1.多次打开抽屉
+ * 2.外部已初始化,组件初始化
+ * 3.外部获取menuIds
+ * 4.内部监听menuIds变化,重新挂载Grid
+ * 5.Grid开始挂载,设置勾选项
+ *
+ */
+
+/**
+ * @author 幻天
+ * @todo flag默认为false,同时watch添加挂载监听一次,再改一些代码,是否可以避免外部置空menuIds导致的不必要挂载
+ */
+
+/** ====================    ==================== */
+const flag = ref(true);
+/** props */
+const props = defineProps<{
+  dataScopes?: Record<number, string>;
+  menuIds?: number[];
+}>();
+const dataScopeMap = ref<Record<number, string>>({});
+const menuDataScopeOptions = [
+  { label: '按角色数据权限', value: '0' },
+  { label: '全部数据权限', value: '1' },
+  { label: '本部门数据权限', value: '3' },
+  { label: '本部门及以下数据权限', value: '4' },
+  { label: '仅本人数据权限', value: '5' },
+  { label: '本部门及以下或本人数据权限', value: '6' },
+  { label: '本组织及本组织下一级数据权限', value: '7' },
+  { label: '本组织下一级数据权限', value: '8' },
+];
+
+/** 监听 menuIds 变化并重新加载 Grid */
+watch(
+  () => props.menuIds,
+  async () => {
+    // 先销毁 Grid
+    flag.value = false;
+    // 等待 DOM 更新完成
+    await nextTick();
+    // 再次等待确保组件完全销毁
+    await nextTick();
+    // 重新创建 Grid
+    flag.value = true;
+  },
+  { deep: true },
+);
+watch(
+  () => props.dataScopes,
+  (value) => {
+    dataScopeMap.value = { ...(value || {}) };
+  },
+  { deep: true, immediate: true },
+);
+
+function getData() {
+  const select = gridApi.grid.getCheckboxRecords().map((item) => item.menuId);
+  const select2 = gridApi.grid
+    .getCheckboxIndeterminateRecords()
+    .map((item) => item.menuId);
+  const select3 = select.concat(select2);
+  return select3;
+}
+function getDataScopes() {
+  const selectedMenuIds = getData();
+  const result: Record<number, string> = {};
+  selectedMenuIds.forEach((menuId) => {
+    result[menuId] = dataScopeMap.value[menuId] || '0';
+  });
+  return result;
+}
+function handleDataScopeChange(menuId: number, value: string) {
+  dataScopeMap.value[menuId] = value;
+}
+function clearData() {
+  gridApi.grid.clearCheckboxRow();
+  dataScopeMap.value = {};
+}
+
+// onUnmounted(() => {
+//   console.log('unmounted');
+// });
+// onMounted(() => {
+//   console.log('mounted');
+// });
+
+defineExpose({
+  getData,
+  getDataScopes,
+  clearData,
+});
+/** ====================  列表实例  ==================== */
+const gridOptions = {
+  checkboxConfig: {
+    // 关闭父子联动
+    checkStrictly: true,
+  },
+  rowConfig: {
+    keyField: 'menuId',
+  },
+  align: 'center' as const,
+  columns: [
+    { align: 'left' as const, title: '', type: 'checkbox', width: 40 },
+    {
+      field: 'menuName',
+      title: '菜单名称',
+      treeNode: true,
+      minWidth: 160,
+      align: 'left' as const,
+    },
+    {
+      field: 'menuType',
+      title: '类型',
+      width: 60,
+      slots: { default: 'menuType' },
+    },
+    { field: 'perms', title: '权限标识' },
+    {
+      field: 'dataScope',
+      title: '数据范围',
+      width: 210,
+      slots: { default: 'dataScope' },
+    },
+  ],
+  height: 'auto' as const,
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }: any, formValues: any) => {
+        // 后端 /system/menu/tree 直接返回嵌套 children 的树，
+        // 前端不再需要 treeConfig.transform 在主线程二次建树。
+        // 注意：子孙节点通过 row.children 直接获取（见 getDescendants），
+        // 因此这里无需再把整棵树存到组件状态里。
+        return await getSysMenuTreeApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+      querySuccess: () => {
+        gridApi.setGridOptions({
+          checkboxConfig: {
+            checkRowKeys: props.menuIds,
+          },
+        });
+      },
+    },
+  },
+  treeConfig: {
+    parentField: 'parentId',
+    rowField: 'menuId',
+    // 后端已返回嵌套 children，用行内树模式（walk expand），
+    // 避免每次展开/折叠都触发 transform 的全表拍平重算。
+    transform: false,
+    // 显式声明子节点字段名，不依赖 vxe/xe-utils 的隐式默认值。
+    children: 'children',
+    // 授权树保持全展开——管理员需要看到所有权限项来勾选。
+    expandAll: true,
+  },
+  menuConfig: {
+    body: {
+      options: [
+        [
+          { code: 'selectSelf', name: '选择本级' },
+          { code: 'selectSelfAndChildren', name: '选择本级及下级' },
+        ],
+        [
+          { code: 'unselectSelf', name: '不选择本级' },
+          { code: 'unselectSelfAndChildren', name: '不选择本级及下级' },
+        ],
+      ],
+    },
+  },
+};
+
+/** 右键菜单点击事件 */
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  menuClick: ({ menu, row }: any) => {
+    if (!row) return;
+    const { code } = menu;
+    if (code === 'selectSelf') {
+      gridApi.grid.clearCheckboxRow();
+      gridApi.grid.setCheckboxRow(row, true);
+    } else if (code === 'selectSelfAndChildren') {
+      gridApi.grid.clearCheckboxRow();
+      const descendants = getDescendants(row.children);
+      [row, ...descendants].forEach((r: any) => {
+        gridApi.grid.setCheckboxRow(r, true);
+      });
+    } else if (code === 'unselectSelf') {
+      gridApi.grid.setCheckboxRow(row, false);
+    } else if (code === 'unselectSelfAndChildren') {
+      const descendants = getDescendants(row.children);
+      [row, ...descendants].forEach((r: any) => {
+        gridApi.grid.setCheckboxRow(r, false);
+      });
+    }
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions,
+  gridEvents,
+});
+
+/** ====================  多选组配置  ==================== */
+const checkboxStatus = ref({
+  all: false,
+  expand: true,
+  linkage: false,
+});
+/** 全选事件 */
+function checkboxAllChange(params: any) {
+  gridApi.grid.setAllCheckboxRow(params.target.checked);
+}
+/** 展开折叠事件 */
+function checkboxExpandChange(params: any) {
+  gridApi.grid?.setAllTreeExpand(params.target.checked);
+}
+/** 父子联动事件 */
+function checkboxLinkageChange(params: any) {
+  gridApi.setGridOptions({
+    checkboxConfig: {
+      checkStrictly: !params.target.checked,
+    },
+  });
+}
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <div class="flex justify-between px-2">
+      <Checkbox
+        :disabled="!flag"
+        @change="checkboxAllChange"
+        v-model:checked="checkboxStatus.all"
+        >全选/全不选</Checkbox
+      >
+      <Checkbox
+        :disabled="!flag"
+        @change="checkboxExpandChange"
+        v-model:checked="checkboxStatus.expand"
+        >展开/折叠</Checkbox
+      >
+      <Checkbox
+        :disabled="!flag"
+        @change="checkboxLinkageChange"
+        v-model:checked="checkboxStatus.linkage"
+        >父子联动</Checkbox
+      >
+    </div>
+    <Grid v-if="flag" class="m-0 w-full flex-1 p-0">
+      <template #menuType="{ row }">
+        <Tag :color="getMenuTypeOptionsColor(row.menuType)">{{
+          getMenuTypeOptionsLabel(row.menuType)
+        }}</Tag>
+      </template>
+      <template #dataScope="{ row }">
+        <Select
+          :value="dataScopeMap[row.menuId] || '0'"
+          @change="(value) => handleDataScopeChange(row.menuId, value as string)"
+          :options="menuDataScopeOptions"
+          size="small"
+          class="w-full text-left"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/menu/model.ts b/admin-ui/vue/apps/web-antd/src/views/system/menu/model.ts
new file mode 100644
index 0000000..aa66236
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/menu/model.ts
@@ -0,0 +1,265 @@
+/**
+ * @description 菜单管理模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+import type {
+    VbenFormSchema,
+  } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+// 菜单类型（M目录 C菜单 F按钮）
+export const menuTypeOptions = [
+    { label: '目录', value: 'M' ,color: 'blue'  },
+    { label: '菜单', value: 'C' ,color: 'green' },
+    { label: '按钮', value: 'F' ,color: 'cyan' },
+];
+
+
+export const yesNoOptions = [
+    { label: '是', value: 0 },
+    { label: '否', value: 1 },
+  ];
+
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+
+export function getMenuTypeOptionsLabel(type: string) {
+    return menuTypeOptions.filter((item) => item.value === type)?.[0]?.label;
+}
+
+export function getMenuTypeOptionsColor(type: string) {
+    return menuTypeOptions.filter((item) => item.value === type)?.[0]?.color;
+}
+
+export const drawerSchema: VbenFormSchema[] = [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'menuId',
+    },
+    {
+      component: 'TreeSelect',
+      defaultValue: 0,
+      fieldName: 'parentId',
+      label: '上级菜单',
+      rules: 'selectRequired',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: menuTypeOptions,
+        optionType: 'button',
+      },
+      defaultValue: 'M',
+      dependencies: {
+        componentProps: (_, api) => {
+          // 切换时清空校验
+          // 直接抄的源码 没有清空校验的方法
+          Object.keys(api.errors.value).forEach((key) => {
+            api.setFieldError(key, undefined);
+          });
+          return {};
+        },
+        triggerFields: ['menuType'],
+      },
+      fieldName: 'menuType',
+      label: '菜单类型',
+    },
+    {
+      component: 'IconPicker',
+      dependencies: {
+        // 类型不为按钮时显示
+        show: (values) => values.menuType !== 'F',
+        triggerFields: ['menuType'],
+      },
+      fieldName: 'icon',
+      help: '点击搜索图标跳转到iconify & 粘贴',
+      label: '菜单图标',
+      componentProps: {
+        placeholder: '请选择菜单图标',
+        class: 'w-[300px]',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'menuName',
+      label: '菜单名称',
+      help: '支持i18n写法, 如: menu.system.user',rules: z.string()
+      .min(1, '菜单名称不能为空')
+      .max(32, '菜单名称最大长度32位'),
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'orderNum',
+      help: '排序, 数字越小越靠前',
+      label: '显示排序',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: (model) => {
+        const placeholder =
+          model.isFrame === 0
+            ? '填写链接地址http(s)://  使用新页面打开'
+            : '填写`路由地址`或者`链接地址`  链接默认使用内部iframe内嵌打开';
+        return {
+          placeholder,
+        };
+      },
+      dependencies: {
+        rules: (model) => {
+          if (model.isFrame !== 0) {
+            return z
+              .string({ message: '请输入路由地址' })
+              .refine((val) => !val.startsWith('/'), {
+                message: '路由地址不需要带/',
+              });
+
+          }
+          // 为链接
+          return z
+            .string({ message: '请输入链接地址' })
+            .regex(/^https?:\/\//, { message: '请输入正确的链接地址' });
+        },
+        // 类型不为按钮时显示
+        show: (values) => values?.menuType !== 'F',
+        triggerFields: ['isFrame', 'menuType'],
+      },
+      fieldName: 'path',
+      help: `路由地址不带/, 如: menu, user\n 链接为http(s)://开头\n 链接默认使用内部iframe打开, 可通过{是否外链}控制打开方式`,
+      label: '路由地址',
+    },
+    {
+      component: 'Input',
+      componentProps: (model) => {
+        return {
+          // 为链接时组件disabled
+          disabled: model.isFrame === 0,
+        };
+      },
+      defaultValue: '',
+      dependencies: {
+        rules: (model) => {
+          // 非链接时为必填项
+          if (model.path && !/^https?:\/\//.test(model.path)) {
+            return z
+              .string()
+              .min(1, { message: '非链接时必填组件路径' })
+              .refine((val) => !val.startsWith('/') && !val.endsWith('/'), {
+                message: '组件路径开头/末尾不需要带/',
+              });
+          }
+          // 为链接时非必填
+          return z.string().optional();
+        },
+        // 类型为菜单时显示
+        show: (values) => values.menuType === 'C',
+        triggerFields: ['menuType', 'path'],
+      },
+      fieldName: 'component',
+      help: '填写./src/views下的组件路径, 如system/menu/index',
+      label: '组件路径',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: yesNoOptions,
+        optionType: 'button',
+      },
+      defaultValue: '1',
+      dependencies: {
+        // 类型不为按钮时显示
+        show: (values) => values.menuType !== 'F',
+        triggerFields: ['menuType'],
+      },
+      fieldName: 'isFrame',
+      help: '外链为http(s)://开头\n 选择否时, 使用iframe从内部打开页面, 否则新窗口打开',
+      label: '是否外链',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: getDictOptions(DictEnum.SYS_SHOW_HIDE),
+        optionType: 'button',
+      },
+      defaultValue: '0',
+      dependencies: {
+        // 类型不为按钮时显示
+        show: (values) => values.menuType !== 'F',
+        triggerFields: ['menuType'],
+      },
+      fieldName: 'visible',
+      help: '隐藏后不会出现在菜单栏, 但仍然可以访问',
+      label: '是否显示',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+        optionType: 'button',
+      },
+      defaultValue: '0',
+      dependencies: {
+        // 类型不为按钮时显示
+        show: (values) => values.menuType !== 'F',
+        triggerFields: ['menuType'],
+      },
+      fieldName: 'status',
+      help: '停用后不会出现在菜单栏, 也无法访问',
+      label: '菜单状态',
+    },
+    {
+      component: 'Input',
+      dependencies: {
+        // 类型为菜单/按钮时显示
+        show: (values) => values.menuType !== 'M',
+        triggerFields: ['menuType'],
+      },
+      fieldName: 'perms',
+      help: `控制器中定义的权限字符\n 如: system:user:import\n 支持通配符 *，如: system:user:* 表示拥有 system:user 下所有权限`,
+      label: '权限标识',
+    },
+    {
+      component: 'Input',
+      componentProps: (model) => ({
+        // 为链接时组件disabled
+        disabled: model.isFrame === 0,
+        placeholder: '必须为json字符串格式',
+      }),
+      dependencies: {
+        // 类型为菜单时显示
+        show: (values) => values.menuType === 'C',
+        triggerFields: ['menuType'],
+      },
+      fieldName: 'queryParam',
+      help: 'vue-router中的query属性\n 如{"name": "xxx", "age": 16}',
+      label: '路由参数',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: yesNoOptions,
+        optionType: 'button',
+      },
+      defaultValue: '0',
+      dependencies: {
+        // 类型为菜单时显示
+        show: (values) => values.menuType === 'C',
+        triggerFields: ['menuType'],
+      },
+      fieldName: 'isCache',
+      help: '路由的keepAlive属性',
+      label: '是否缓存',
+    },
+  ];
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/notice/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/notice/index.vue
new file mode 100644
index 0000000..c813870
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/notice/index.vue
@@ -0,0 +1,255 @@
+<!--
+ * @description 通知公告管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h, onMounted, ref } from 'vue';
+import type { DeepPartial } from '@vben/types';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { SysNotice } from '#/api/system/notice';
+import { addFullName, getVxePopupContainer } from '@vben/utils';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+import { getDictOptions } from '#/utils/dict';
+import { Button, message, Tag, Popconfirm, Modal } from 'ant-design-vue';
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysNoticeListApi, deleteSysNoticeApi } from '#/api/system/notice';
+import { renderDict } from '#/utils/render';
+import viewDrawer from './view.vue';
+
+import {
+  MdiPlus,
+  MdiDelete,
+} from '@vben/icons';
+import noticeDrawer from './notice-drawer.vue';
+import { getSysDeptTreeApi } from '#/api/system/dept';
+import { getSysUserListApi } from '#/api/system';
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'noticeTitle',
+      label: '标题',
+    },
+    {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.SYS_NOTICE_TYPE),
+    },
+    fieldName: 'noticeType',
+    label: '公告类型',
+  },
+    {
+      component: 'Input',
+      fieldName: 'createdBy',
+      label: '创建者',
+    },
+
+
+    {
+      component: 'RangePicker',
+      componentProps: {
+        format: "YYYY-MM-DD",
+        valueFormat: "YYYY-MM-DD",
+      },
+      // defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'createdAt',
+      label: '创建时间',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 40 },
+    { field: 'noticeId', title: 'ID' },
+    { field: 'noticeTitle', title: '标题' },
+    {
+    title: '公告类型',
+    field: 'noticeType',
+    width: 120,
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.noticeType, DictEnum.SYS_NOTICE_TYPE);
+      },
+    },
+  },
+    { field: 'status', title: '状态', slots: { default: 'status' } },
+    { field: 'createdByUser.userName', title: '创建者' },
+    { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' },
+    { title: '操作', width: 120, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysNoticeListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+
+const [NoticeDrawer, noticeDrawerApi] = useVbenDrawer({
+  connectedComponent: noticeDrawer,
+});
+
+
+
+
+function handleAdd() {
+  noticeDrawerApi.setData({ update: false, view: false });
+  noticeDrawerApi.open();
+}
+
+function handleEdit(row: SysNotice) {
+  noticeDrawerApi.setData({ id: row.noticeId, update: true, view: false });
+  noticeDrawerApi.open();
+}
+
+async function handleDelete(row: SysNotice) {
+  await deleteSysNoticeApi({ noticeIds: [row.noticeId] });
+  message.success("删除成功");
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysNotice) => row.noticeId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysNoticeApi({ noticeIds: ids });
+      message.success("删除成功");
+      await handleRefresh();
+    },
+  });
+}
+
+
+const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+});
+const userList=ref([])
+const deptList=ref([])
+function handleView(row: SysNotice) {
+  const { noticeId } = row;
+  drawerApi.setData({ id: noticeId,userList:userList.value.items,deptList:deptList.value, update: false, view: true });
+  drawerApi.open();
+}
+/** 获取组织树内容,并格式化 */
+async function getDeptTree() {
+  const treeRes = await getSysDeptTreeApi();
+  const treeData = treeRes.items;
+  addFullName(treeData, 'deptName', ' / ');
+  return treeData;
+}
+onMounted(async() => {
+  userList.value = await getSysUserListApi();
+  deptList.value = await getDeptTree();
+  // console.log(userList.value);
+  // console.log(deptList.value);
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid :table-title="'公告列表'">
+      <template #toolbar-tools>
+
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:notice:add'">新增</Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)"
+          @click="handleMultiDelete" v-access:code="'cpm:system:notice:remove'">删除</Button>
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status == '0' ? 'green' : 'red'">{{ row.status == '0' ? '正常' : '关闭' }}</Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleView(row)" v-access:code="'cpm:system:notice:query'">查看</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:system:notice:edit'">修改</Button>
+          <AccessControl :codes="['cpm:system:notice:remove']" type="code">
+            <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确定删除吗？"
+              @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"
+              danger >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+
+    </Grid>
+    <NoticeDrawer @reload="handleRefresh" />
+    <ViewDrawer></ViewDrawer>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/notice/model.tsx b/admin-ui/vue/apps/web-antd/src/views/system/notice/model.tsx
new file mode 100644
index 0000000..094d812
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/notice/model.tsx
@@ -0,0 +1,165 @@
+/**
+ * @description 通知公告模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+import type {
+  VbenFormSchema,
+} from '@vben/common-ui';
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+import { Tag } from 'ant-design-vue';
+import type { DescItem } from '#/components/description';
+
+const dictOptions = getDictOptions(DictEnum.NOTICE_RANGE);
+/** 编辑表单 */
+export const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'noticeId',
+    label: '主键',
+  },
+  {
+    component: 'Input',
+    fieldName: 'noticeTitle',
+    label: '公告标题',
+    rules: 'required',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_NOTICE_STATUS),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'status',
+    label: '公告状态',
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_NOTICE_TYPE),
+      optionType: 'button',
+    },
+    defaultValue: '1',
+    fieldName: 'noticeType',
+    label: '公告类型',
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  },
+  {
+    component: 'Textarea',
+    componentProps: {
+      width: '100%',
+    },
+    fieldName: 'noticeContent',
+    label: '公告内容',
+    rules: 'required',
+  },
+  /** 公告通知范围 */
+  {
+    fieldName: 'noticeRange',
+    label: '公告通知范围',
+    component: "Select",
+    formItemClass: 'col-span-1',
+    componentProps: {
+      options: dictOptions
+    },
+    defaultValue: "1",
+  },
+  /** 组织树 */
+  {
+    fieldName: 'deptIdList',
+    label: '通知组织',
+    component: "TreeSelect",
+    formItemClass: 'col-span-1',
+    componentProps: {
+      placeholder: '请选择组织',
+      getPopupContainer,
+      multiple: true, // 允许多选
+      treeCheckable: true, // 显示复选框
+    }, dependencies: {
+      if(values) {
+        return values.noticeRange == "2"
+      },
+      triggerFields: ['noticeRange'],
+    },
+    rules: "required"
+  },
+  /** 用户树 */
+  {
+    fieldName: 'userIdList',
+    label: '通知用户',
+    component: "Select",
+    formItemClass: 'col-span-1',
+    componentProps: {
+      readonly: true, // 用户名字段始终只读，通过选择按钮填充
+      placeholder: '请选择用户',
+      mode: 'multiple', // 允许多选
+    },
+    dependencies: {
+      if(values) {
+        return values.noticeRange == "3"
+      },
+      triggerFields: ['noticeRange'],
+    },
+    rules: "required"
+  },
+
+  {
+    component: 'Input',
+    fieldName: 'remark',
+    label: '备注',
+  },
+];
+/** 查看表单 */
+export const viewSchema: DescItem[] = [
+  { field: 'noticeId', label: '公告ID' },
+  { field: 'noticeTitle', label: '公告标题' },
+  { field: 'noticeType', label: '公告类型', render: (val) => val == 1 ? '通知' : '公告' },
+  { field: 'noticeContent', label: '公告内容' },
+  { field: 'status', label: '公告状态', render: (val) => val == 0 ? '正常' : '停用' },
+    {
+    field: 'noticeRange',
+    label: '公告通知范围',
+    render: (value) => {
+      const noticeRange=getDictOptions(DictEnum.NOTICE_RANGE)
+      const item=noticeRange.filter(item=>item.dictValue==value)
+      return item[0]["dictLabel"];
+    }
+  },
+  {
+    field: 'userIdList',
+    label: '提及人员',
+    render: (value) => {
+      if(!value){return ""}
+      return (<div>{value.map((v:any, idx:any) => <Tag key={idx}>{v}</Tag>)}</div>);
+    }
+  }, {
+    field: 'deptIdList',
+    label: '提及组织',
+    render: (value) => {
+      if(!value){return ""}
+      return (<div>{value.map((v:any, idx:any) => <Tag key={idx}>{v}</Tag>)}</div>);
+    }
+  },
+  { field: 'createdDept', label: '创建组织' },
+  { field: 'createdBy', label: '创建者' },
+  { field: 'createdAt', label: '创建时间' },
+  { field: 'updatedBy', label: '更新者' },
+  { field: 'updatedAt', label: '更新时间' },
+  { field: 'remark', label: '备注' },
+];
+
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/notice/notice-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/notice/notice-drawer.vue
new file mode 100644
index 0000000..ec94183
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/notice/notice-drawer.vue
@@ -0,0 +1,224 @@
+<!--
+ * @description 通知公告编辑抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { SysConfig } from '#/api/system/config';
+import { Select, Button } from 'ant-design-vue';
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { addSysNoticeApi, editSysNoticeApi, getSysNoticeApi } from '#/api/system/notice';
+import { drawerSchema } from './model';
+import { getSysDeptTreeApi } from '#/api/system/dept';
+import { getSysUserListApi } from '#/api/system/user';
+import SelectDevice from './selectDevice/index.vue';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await getSysNoticeApi({ noticeId: Number(id) });
+      console.log('编辑模式 - 获取表单值:', record);
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    // console.log(data);
+    await (isUpdate.value ? editSysNoticeApi(data) : addSysNoticeApi(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+
+
+
+
+/** 获取组织树内容,并格式化 */
+async function getDeptTree() {
+  const treeRes = await getSysDeptTreeApi();
+  const treeData = treeRes.items;
+  addFullName(treeData, 'deptName', ' / ');
+  return treeData;
+}
+//加载组织选项
+async function loadDeptOptions() {
+  const treeData = await getDeptTree();
+  // console.log(treeData)
+  formApi.updateSchema([
+    {
+      componentProps: {
+        /** 显示内容,对应值 */
+        fieldNames: { label: 'deptName', value: 'deptId' },
+        showSearch: true,
+        /** 结构树data */
+        treeData: treeData,
+        /** 默认展示全部 */
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        treeNodeLabelProp: 'fullName',
+        // 选中后显示在输入框的值
+        displayRender: (label: any, selected: any, node: any) => {
+          return node.props.dataRef.fullName || label;
+        },
+        // 模糊搜索
+        filterTreeNode: (input: string, treeNode: any) => {
+          const label = treeNode.deptName || treeNode.fullName || '';
+          return label.toLowerCase().includes(input.toLowerCase());
+        },
+      },
+      /** 要修改的字段 */
+      fieldName: 'deptIdList',
+    },
+  ]);
+}
+loadDeptOptions()
+
+
+//加载用户选项
+async function loadUserOptions() {
+
+  const userData = await getSysUserListApi({});
+  formApi.updateSchema([
+    {
+      componentProps: {
+        /** 显示内容,对应值 */
+        fieldNames: { label: 'nickName', value: 'userId' },
+        showSearch: true,
+        /** 结构树data */
+        options: userData.items,
+        /** 默认展示全部 */
+        treeDefaultExpandAll: true,
+        // 选中后显示在输入框的值
+        displayRender: "nickName"
+      },
+      /** 要修改的字段 */
+      fieldName: 'userIdList',
+    },
+  ]);
+}
+loadUserOptions()
+
+
+/** 选择用户 */
+const refSelectDevice = ref();
+const userList = ref([])
+function openSelectUser() {
+  refSelectDevice.value.openModal();
+}
+async function onUserSelected(userIdList: any) {
+  userList.value = userIdList;
+  const userIds = userIdList.map((item: any) => item.userId);
+  // 设置用户相关字段
+  await formApi.setFieldValue('userIdList', userIds);
+}
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[800px]">
+    <BasicForm>
+      <template #userIdList="slotProps">
+        <Select :option="userList" mode="multiple" fieldNames="{ label: nickName, value: userId}" placeholder="请选择用户" v-bind="slotProps"
+          readonly style="width: 100%;flex:1" />
+        <Button style="margin-left: 8px;" v-if="!isUpdate && !isView" type="primary" @click="openSelectUser">选择用户</Button>
+      </template>
+    </BasicForm>
+    <SelectDevice ref="refSelectDevice" @userSelected="onUserSelected" />
+
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/notice/selectDevice/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/notice/selectDevice/index.vue
new file mode 100644
index 0000000..13f352b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/notice/selectDevice/index.vue
@@ -0,0 +1,334 @@
+<script lang="ts" setup>
+import { useVbenModal} from '@vben/common-ui';
+
+import type {
+  VxeTableGridOptions,
+  VxeGridListeners,
+} from '#/adapter/vxe-table';
+import type { VbenFormProps } from '#/adapter/form';
+
+import { columns, type RowType } from './model';
+import type { DeepPartial } from '@vben/types';
+import { getSysUserListApi } from '#/api/system/user';
+import { Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { ref, defineProps } from 'vue';
+
+const emit = defineEmits<{
+  // 点击刷新按钮的事件
+  userSelected:any;
+}>();
+
+const currentDeptId = ref(0);
+
+// 组织选项数据
+const deptOptions = ref<Array<{ label: string; value: number }>>([]);
+// 全量组织选项数据（用于保存所有组织，不受搜索结果影响）
+const allDeptOptions = ref<Array<{ label: string; value: number }>>([]);
+
+// 表单配置 - 添加筛选条件
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'userName',
+      label: '用户名',
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'deptId',
+      label: '组织',
+      componentProps: {
+        placeholder: '请选择组织',
+        allowClear: true,
+        options: allDeptOptions,
+      },
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+};
+const gridOptions: VxeTableGridOptions<RowType> = {
+
+  radioConfig: {
+    highlight: true,
+  },
+  rowConfig: {
+    keyField: 'userId',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 450, // 设置固定高度，适应弹窗大小
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        console.log('🔍 查询参数:', {
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          deptId: currentDeptId.value,
+          ...formValues,
+        });
+
+        try {
+          // 处理组织ID参数
+          let deptIdParam = currentDeptId.value;
+          if (formValues.deptId !== undefined && formValues.deptId !== null) {
+            deptIdParam = Number(formValues.deptId) || 0;
+          }
+
+          // 构建API请求参数
+          const apiParams = {
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            deptId: deptIdParam,
+            userName: formValues.userName || undefined,
+          };
+
+          console.log('🚀 发送给API的参数:', apiParams);
+          console.log('📋 选择的组织ID:', deptIdParam);
+
+          // 简化参数，只传必要的分页参数
+          const result = await getSysUserListApi(apiParams as any);
+
+          console.log('📡 API响应:', result);
+
+          // 使用 any 类型来处理实际的API响应
+          const apiResult = result as any;
+          console.log('📊 数据结构:', {
+            hasItems: !!apiResult.items,
+            itemsLength: apiResult.items?.length || 0,
+            total: apiResult.total,
+            firstItem: apiResult.items?.[0]
+          });
+
+          // 提取组织信息并更新组织选项
+          const items = apiResult.items || [];
+          const deptMap = new Map<number, string>();
+
+          console.log('👥 返回的用户数据:', items.map((user: any) => ({
+            userName: user.userName,
+            deptId: user.deptInfo?.deptId,
+            deptName: user.deptInfo?.deptName
+          })));
+
+          items.forEach((user: any) => {
+            if (user.deptInfo && user.deptInfo.deptId && user.deptInfo.deptName) {
+              deptMap.set(user.deptInfo.deptId, user.deptInfo.deptName);
+            }
+          });
+
+          // 更新组织选项（只在首次加载或选择"全部"时更新）
+          const newDeptOptions = Array.from(deptMap.entries()).map(([deptId, deptName]) => ({
+            label: deptName,
+            value: deptId
+          }));
+
+          // 如果是首次加载（没有选择特定组织）或者当前组织选项为空，则更新全量组织选项
+          if (deptIdParam === 0 || allDeptOptions.value.length === 0) {
+            allDeptOptions.value = [
+              { label: '全部', value: 0 },
+              ...newDeptOptions.sort((a, b) => a.label.localeCompare(b.label))
+            ];
+            console.log('🏢 更新全量组织选项:', allDeptOptions.value);
+          } else {
+            // 如果选择了特定组织，合并新发现的组织到全量选项中
+            const existingDeptIds = new Set(allDeptOptions.value.map(opt => opt.value));
+            const newDepts = newDeptOptions.filter(opt => !existingDeptIds.has(opt.value));
+            if (newDepts.length > 0) {
+              const allOption = allDeptOptions.value.find(opt => opt.value === 0);
+              const otherOptions = allDeptOptions.value.filter(opt => opt.value !== 0);
+              allDeptOptions.value = [
+                allOption!, // 保留"全部"选项
+                ...otherOptions.concat(newDepts).sort((a, b) => a.label.localeCompare(b.label))
+              ];
+              console.log('🏢 合并新组织到全量选项:', allDeptOptions.value);
+            }
+          }
+
+          // 如果选择了特定组织，进行前端精确过滤
+          let filteredItems = items;
+          if (deptIdParam > 0) {
+            filteredItems = items.filter((user: any) => {
+              return user.deptInfo && user.deptInfo.deptId === deptIdParam;
+            });
+            console.log('🔍 组织精确过滤后的用户:', filteredItems.length, '个用户');
+          }
+
+          // 转换数据格式以适配表格
+          const transformedData = {
+            items: filteredItems,
+            total: filteredItems.length
+          };
+
+          console.log('🔄 转换后数据:', transformedData);
+          console.log('🏢 组织选项:', deptOptions.value);
+          return transformedData;
+        } catch (error) {
+          console.error('❌ API请求失败:', error);
+          return {
+            items: [],
+            total: 0
+          };
+        }
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: false,
+    export: false,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: false,
+  },
+};
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  radioChange: handleRadioChange,
+};
+const RadioSelected = ref(false);
+function handleRadioChange() {
+  RadioSelected.value = !!gridApi.grid.getRadioRecord();
+}
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+//确认按钮回调函数
+const onConfirm = () => {
+  const selectedRecord = gridApi.grid.getCheckboxRecords();
+  if (!selectedRecord) {
+    console.warn('请选择一个用户');
+    return;
+  }
+
+  console.log(selectedRecord)
+
+  emit('userSelected',selectedRecord);
+  modalApi.close();
+};
+
+function openModal() {
+  modalApi.open();
+}
+
+defineExpose({
+  openModal,
+});
+
+const [Modal, modalApi] = useVbenModal({ onConfirm: onConfirm ,
+  onCancel: () => {
+    modalApi.close();
+  },
+  onOpenChange: (isOpen) => {
+    const {deptId} = modalApi.getData() || {};
+    if (deptId) {
+      currentDeptId.value = deptId;
+    }
+    if (isOpen) {
+      return null;
+    }
+    modalApi.close();
+  },
+});
+</script>
+<template>
+  <div>
+    <Modal class="w-[1000px] h-[600px]" title="选择用户">
+      <div class="table-wrapper">
+        <Grid table-title="用户列表">
+          <template #status="{ row }">
+            <Tag :color="row.status === '0' ? 'green' : 'red'">
+              {{ row.status === '0' ? '正常' : '停用' }}
+            </Tag>
+          </template>
+          <template #action="{ row }">
+            <div class="flex items-center justify-center">
+              <!-- 用户选择弹窗中的操作列，可以留空或添加查看按钮 -->
+              <span class="text-gray-400">-</span>
+            </div>
+          </template>
+        </Grid>
+      </div>
+    </Modal>
+  </div>
+</template>
+<style scoped>
+/* 表格包装器 */
+.table-wrapper {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+/* 表格容器样式 */
+.table-wrapper :deep(.vxe-grid) {
+  border: none;
+  height: 100%;
+}
+
+/* 表格主体样式 */
+.table-wrapper :deep(.vxe-table) {
+  height: 100%;
+}
+
+/* 表格内容区域 */
+.table-wrapper :deep(.vxe-table--body-wrapper) {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+/* 表格工具栏 */
+.table-wrapper :deep(.vxe-toolbar) {
+  padding: 8px 16px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fafafa;
+}
+
+/* 表格分页器 */
+.table-wrapper :deep(.vxe-pager) {
+  padding: 8px 16px;
+  border-top: 1px solid #f0f0f0;
+  background: #fafafa;
+}
+
+/* 确保表格字段充满宽度 */
+.table-wrapper :deep(.vxe-table--header),
+.table-wrapper :deep(.vxe-table--body) {
+  width: 100% !important;
+}
+
+/* 美化滚动条 */
+.table-wrapper :deep(.vxe-table--body-wrapper)::-webkit-scrollbar {
+  width: 6px;
+}
+
+.table-wrapper :deep(.vxe-table--body-wrapper)::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.table-wrapper :deep(.vxe-table--body-wrapper)::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.table-wrapper :deep(.vxe-table--body-wrapper)::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+</style>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/notice/selectDevice/model.tsx b/admin-ui/vue/apps/web-antd/src/views/system/notice/selectDevice/model.tsx
new file mode 100644
index 0000000..9abea57
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/notice/selectDevice/model.tsx
@@ -0,0 +1,94 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderDict } from '#/utils';
+import { DictEnum } from '@vben/constants';
+import { getDictOptions } from '#/utils/dict';
+
+// 表单验证规则
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox', // 多选按钮
+    width: 60,
+    align: 'center',
+  },
+  {
+    title: '用户ID',
+    field: 'userId',
+    align: 'center',
+    width: 80,
+  },
+  {
+    title: '用户名',
+    field: 'userName',
+    align: 'center',
+    width: 120,
+  },
+  {
+    title: '用户昵称',
+    field: 'nickName',
+    align: 'center',
+    width: -1,
+  },
+  {
+    title: '手机号',
+    field: 'phonenumber',
+    align: 'center',
+    width: 120,
+  },
+  {
+    title: '邮箱',
+    field: 'email',
+    align: 'center',
+    width: 150,
+  },
+  {
+    title: '组织',
+    field: 'deptInfo.deptName',
+    align: 'center',
+    width: 120,
+  },
+  {
+    title: '状态',
+    field: 'status',
+    align: 'center',
+    width: -1,
+    slots: { default: 'status' },
+  },
+];
+
+// 表格列接口
+export interface RowType {
+  userId: number;
+  tenantId: string;
+  deptId: number;
+  userName: string;
+  nickName: string;
+  userType: string;
+  email: string;
+  phonenumber: string;
+  sex: string;
+  avatar: string;
+  status: string;
+  loginIp: string;
+  loginDate: string;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+  deletedBy: number;
+  deletedAt: string;
+  remark: string;
+  deptInfo: {
+    deptId: number;
+    deptName: string;
+  };
+}
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/notice/view.vue b/admin-ui/vue/apps/web-antd/src/views/system/notice/view.vue
new file mode 100644
index 0000000..4253060
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/notice/view.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useVbenDrawer } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+import { Description, useDescription } from '#/components/description';
+import { viewSchema } from './model';
+import { getSysNoticeApi } from '#/api/system/notice';
+import { getSysUserListApi } from '#/api/system/user';
+import type { AnyFunction } from '@vben/types';
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+});
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { id, userList, deptList } = drawerApi.getData();
+  const record2 = await getSysNoticeApi({ noticeId: id });
+  let currentSchema = cloneDeep(viewSchema);
+
+  // if (userList) {
+  //   record2.userIdList.forEach(item => {
+  //     const user = userList.find((item2: any) => item2.userId === item)
+  //     if (user)
+  //       ul.push(
+  //         user.nickName
+  //       )
+  //   })
+  //   record2.userIdList = ul
+  // }
+  if (record2.userIdList) {
+    const ul: any[] = []
+    record2.userIdList = record2.userIdList.map((item: any) => {
+      const user = userList.find((item2: any) => item2.userId === item)
+      if (user)
+        ul.push(user.nickName)
+    })
+    record2.userIdList = ul
+  }
+
+  if (record2.deptIdList) {
+    const dl: any = []
+    record2.deptIdList.forEach((item: any) => {
+      dl.push(findFullName(deptList, item))
+    })
+    record2.deptIdList = dl
+  }
+  setDescProps({ data: record2, schema: currentSchema }, true);
+}
+function findFullName(tree: any, deptId: any): any {
+  if (!tree) return null;
+  // 如果是数组，遍历每个子树
+  if (Array.isArray(tree)) {
+    for (const node of tree) {
+      const result = findFullName(node, deptId);
+      if (result) return result;
+    }
+    return null;
+  }
+  // 检查当前节点
+  if (tree.deptId === deptId) {
+    return tree.fullName;
+  }
+  // 递归子节点
+  if (tree.children && tree.children.length > 0) {
+    for (const child of tree.children) {
+      const result = findFullName(child, deptId);
+      if (result) return result;
+    }
+  }
+  return null;
+}
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription">
+
+    </Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/operlog/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/operlog/index.vue
new file mode 100644
index 0000000..1be2f2e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/operlog/index.vue
@@ -0,0 +1,148 @@
+
+<script lang="ts" setup>
+import { h } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SysOperLog } from '#/api/system/oper-log';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+
+import { Button, message,Tag  } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysOperLogList } from '#/api/system/oper-log';
+
+import viewDrawer from './view-drawer.vue';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'operIp',
+      label: '操作地址',
+    },
+    {
+      component: 'Input',
+      fieldName: 'businessType',
+      label: '系统模块',
+    },
+    {
+      component: 'Input',
+      fieldName: 'createdBy',
+      label: '创建者',
+    },
+
+
+    {
+      component: 'RangePicker',
+      componentProps:{
+        format:"YYYY-MM-DD",
+        valueFormat:"YYYY-MM-DD",
+      },
+      // defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'createdAt',
+      label: '创建时间',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 40 },
+    { field: 'operId', title: 'ID' },
+    { field: 'businessType', title: '业务类型', slots: { default: 'businessType' } },
+    { field: 'method', title: '操作' },
+    { field: 'operName', title: '操作人员' },
+    { field: 'operIp', title: 'IP地址' },
+    { field: 'operLocation', title: 'IP信息' },
+    { field: 'status', title: '操作状态', slots: { default: 'status' } },
+    { field: 'operTime', title: '操作时间' },
+    { field: 'costTime', title: '操作耗时', slots: { default: 'costTime' } },
+    { title: '操作', width: 50, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysOperLogList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const [Grid] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+});
+
+function handlePreview(record: SysOperLog) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+}
+
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="操作日志列表">
+      <template #businessType="{ row }">
+        {{  row.businessType == 1 ? '新增' : row.businessType == 2 ? '修改' : row.businessType == 3 ? '删除' : '其他' }}
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status == 0 ? 'green' : 'red'">{{ row.status == 0 ? '正常' : '关闭' }}</Tag>
+      </template>
+      <template #costTime="{ row }">
+        {{ row.costTime }} ms
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:monitor:operlog:query'">查看</Button>
+        </div>
+      </template>
+    </Grid>
+    <ViewDrawer />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/operlog/model.tsx b/admin-ui/vue/apps/web-antd/src/views/system/operlog/model.tsx
new file mode 100644
index 0000000..8381e1f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/operlog/model.tsx
@@ -0,0 +1,189 @@
+import type {
+    VbenFormSchema,
+  } from '@vben/common-ui';
+  import type { VxeGridProps } from '#/adapter/vxe-table';
+  import type { DescItem } from '#/components/description';
+  import { z } from '@vben/common-ui';
+  import { getDictOptions } from '#/utils/dict';
+  import { DictEnum } from '@vben/constants';
+  import { getPopupContainer } from '@vben/utils';
+  import { Tag } from 'ant-design-vue';
+  import { h } from 'vue';
+
+  import {
+    renderDict,
+    renderHttpMethodTag,
+    renderJsonPreview,
+  } from '#/utils/render';
+
+
+  export const viewSchema: DescItem[] = [
+    {
+      field: 'operId',
+      label: '日志编号',
+    },
+    {
+      field: 'status',
+      label: '操作结果',
+      render(value) {
+        return renderDict(value, DictEnum.SYS_COMMON_STATUS);
+      },
+    },
+    {
+      field: 'title',
+      label: '操作模块',
+      labelMinWidth: 80,
+      render(value, { businessType }) {
+        const operType = renderDict(businessType, DictEnum.SYS_OPER_TYPE);
+        return (
+          <div class="flex items-center">
+            <Tag>{value}</Tag>
+            {operType}
+          </div>
+        )
+        ;
+      },
+    },
+    {
+      field: 'operIp',
+      label: '操作信息',
+      render(_, data) {
+        return (
+          <div class="flex items-center">
+            <Tag>{data.operName}</Tag>
+            {data.deptName}
+            {data.operIp}
+            {data.operLocation}
+          </div>
+        )
+      },
+    },
+    {
+      field: 'operUrl',
+      label: '请求信息',
+      render(_, data) {
+        const { operUrl, requestMethod } = data;
+        const methodTag = renderHttpMethodTag(requestMethod);
+        return (
+          <span>
+            {methodTag} {operUrl}
+          </span>
+        )
+        ;
+      },
+    },
+    {
+      field: 'errorMsg',
+      label: '异常信息',
+      render(value) {
+        return (
+          <span class="font-bold text-red-600">{value}</span>
+        )
+        ;
+      },
+      show: (data) => {
+        return data && data.errorMsg !== '';
+      },
+    },
+    {
+      field: 'method',
+      label: '方法',
+    },
+    /**
+     * 默认word-break: break-word;会导致json预览样式异常
+     */
+    {
+      field: 'operParam',
+      label: '请求参数',
+      render(value) {
+        return (
+          <div class="max-h-[300px] w-full overflow-y-auto">
+            {renderJsonPreview(value)}
+          </div>
+        )
+        ;
+      },
+    },
+    {
+      field: 'jsonResult',
+      label: '响应参数',
+      render(value) {
+        return (
+          <div class="max-h-[300px] w-full overflow-y-auto">
+            {renderJsonPreview(value)}
+          </div>
+        )
+        ;
+      },
+      show(data) {
+        return data && data.jsonResult;
+      },
+    },
+    {
+      field: 'costTime',
+      label: '耗时',
+      render(value) {
+        return (
+          <span>{value} ms</span>
+        )
+        ;
+      },
+    },
+    {
+      field: 'operTime',
+      label: '操作时间',
+    },
+  ];
+
+  export const drawerSchema: VbenFormSchema[] =  [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'configId',
+      label: '参数主键',
+    },
+    {
+      component: 'Input',
+      fieldName: 'configName',
+      label: '参数名称',rules: z.string()
+      .min(1, '参数名称不能为空')
+      .max(32, '参数名称最大长度32位'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'configKey',
+      label: '参数键名',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      formItemClass: 'items-baseline',
+      fieldName: 'configValue',
+      label: '参数键值',
+      componentProps: {
+        autoSize: true,
+      },
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: getDictOptions(DictEnum.SYS_YES_NO),
+        optionType: 'button',
+      },
+      defaultValue: 'N',
+      fieldName: 'configType',
+      label: '是否内置',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      formItemClass: 'items-baseline',
+      label: '备注',
+    },
+  ];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/operlog/view-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/operlog/view-drawer.vue
new file mode 100644
index 0000000..9e46b0e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/operlog/view-drawer.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { SysOperLog } from '#/api/system/oper-log';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Description, useDescription } from '#/components/description';
+import { viewSchema } from './model';
+
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+});
+
+function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = drawerApi.getData() as { record: SysOperLog };
+  setDescProps({ data: record }, true);
+}
+
+</script>
+
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看日志">
+    <Description @register="registerDescription">
+    </Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/oss-config/edit-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/oss-config/edit-drawer.vue
new file mode 100644
index 0000000..4abd53a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/oss-config/edit-drawer.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { SysMenuListData } from '#/api/system/menu';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { addSysOssConfigApi, editSysOssConfigApi, getSysOssConfigViewApi } from '#/api/system/oss-config';
+import { drawerSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-3',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({confirmLoading:true,loading:true})
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await getSysOssConfigViewApi({ ossConfigId: Number(id) });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({confirmLoading:false,loading:false})
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:true,
+        "only-read":true,
+      } } });
+    }else{
+      drawerApi.setState({ showConfirmButton: true});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:false,
+        "only-read":false,
+      }} });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({confirmLoading:true,loading:true})
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? editSysOssConfigApi (data) : addSysOssConfigApi(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({confirmLoading:false,loading:false})
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm>
+      <template #tip>
+        <div class="ml-7 w-full">
+          <Alert
+            message="私有桶使用自定义域名无法预览, 但可以正常上传/下载"
+            show-icon
+            type="warning"
+          />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/oss-config/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/oss-config/index.vue
new file mode 100644
index 0000000..f8d7f28
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/oss-config/index.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { SysOssConfigListData } from '#/api/system/oss-config';
+import type { DeepPartial } from '@vben/types';
+import { getVxePopupContainer } from '@vben/utils';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+
+import { Button, message, Tag, Modal, Popconfirm } from 'ant-design-vue';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysOssConfigListApi, deleteSysOssConfigApi } from '#/api/system/oss-config';
+import {
+  MdiPlus,
+  MdiDelete,
+} from '@vben/icons';
+
+import { querySchema, columns, } from './model';
+import viewDrawer from './view-drawer.vue';
+import editDrawer from './edit-drawer.vue';
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'infoId',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysOssConfigListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+
+const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+});
+
+function handlePreview(record: SysOssConfigListData) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+}
+
+
+
+const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+});
+
+
+
+function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+}
+
+function handleEdit(row: SysOssConfigListData) {
+  editDrawerApi.setData({ id: row.ossConfigId, update: true, view: false });
+  editDrawerApi.open();
+}
+
+async function handleDelete(row: SysOssConfigListData) {
+  await deleteSysOssConfigApi({ ossConfigIds: [row.ossConfigId] });
+  message.success("删除成功");
+  await handleRefresh();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysOssConfigListData) => row.ossConfigId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysOssConfigApi({ ossConfigIds: ids });
+      message.success("删除成功");
+      await handleRefresh();
+    },
+  });
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="OSS配置列表">
+      <template #toolbar-tools>
+
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:ossConfig:add'">新增</Button>
+        <Button class="mr-2 flex items-center" type="primary" disabled :icon="h(MdiDelete)"
+          @click="handleMultiDelete" v-access:code="'cpm:system:ossConfig:remove'">删除</Button>
+      </template>
+
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:system:ossConfig:list'">查看</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:system:ossConfig:edit'">修改</Button>
+          <AccessControl :codes="['cpm:system:ossConfig:remove']" type="code">
+            <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确定删除吗？"
+              @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"
+                danger >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <ViewDrawer />
+    <EditDrawer @reload="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/oss-config/model.tsx b/admin-ui/vue/apps/web-antd/src/views/system/oss-config/model.tsx
new file mode 100644
index 0000000..ab81605
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/oss-config/model.tsx
@@ -0,0 +1,328 @@
+
+import type {
+    VbenFormSchema,
+  } from '@vben/common-ui';
+  import type { VxeGridProps } from '#/adapter/vxe-table';
+  import type { DescItem } from '#/components/description';
+  import { z } from '@vben/common-ui';
+  import { getDictOptions } from '#/utils/dict';
+  import { DictEnum } from '@vben/constants';
+  import { getPopupContainer } from '@vben/utils';
+  import { Tag } from 'ant-design-vue';
+  import { h } from 'vue';
+
+  import {
+    renderDict,
+    renderHttpMethodTag,
+    renderJsonPreview,
+  } from '#/utils/render';
+
+  const accessPolicyOptions = [
+    { color: 'orange', label: '私有', value: '0' },
+    { color: 'green', label: '公开', value: '1' },
+    { color: 'blue', label: '自定义', value: '2' },
+  ];
+
+  export const querySchema : VbenFormSchema[] =  [
+    {
+      component: 'Input',
+      fieldName: 'configKey',
+      label: '配置名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'bucketName',
+      label: '桶名称',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DictEnum.SYS_YES_NO),
+      },
+      fieldName: 'status',
+      label: '是否默认',
+    },
+  ];
+  export const columns: VxeGridProps['columns'] = [
+    { type: 'checkbox', width: 60 },
+  {
+    title: '配置名称',
+    field: 'configKey',
+  },
+  {
+    title: '访问站点',
+    field: 'endpoint',
+    showOverflow: true,
+  },
+  {
+    title: '桶名称',
+    field: 'bucketName',
+  },
+  {
+    title: '域',
+    field: 'region',
+  },
+  {
+    title: '权限桶类型',
+    field: 'accessPolicy',
+    slots: {
+      default: ({ row }) => {
+        const current = accessPolicyOptions.find(
+          (item) => item.value === row.accessPolicy,
+        );
+        if (current) {
+          return <Tag color={current.color}>{current.label}</Tag>;
+        }
+        return '未知类型';
+      },
+    },
+  },
+  {
+    title: '是否默认',
+    field: 'status',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.status, DictEnum.SYS_YES_NO_NUM);
+      },
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 120,
+  },
+  ]
+  
+  export const viewSchema: DescItem[] = [
+    {
+      field: 'ossConfigId',
+      label: '配置ID',
+    },
+    {
+      field: 'configKey',
+      label: '配置名称',
+    },
+    {
+      field: 'accessKey',
+      label: 'accessKey',
+    },
+    {
+      field: 'secretKey',
+      label: 'secretKey',
+    },
+    {
+      field: 'domain',
+      label: '域',
+    },
+    {
+      field: 'isHttps',
+      label: '是否https',
+      render(value, { isHttps }) {
+        const operType = renderDict(isHttps, DictEnum.SYS_YES_NO);
+        return (
+          <div class="flex items-center">
+            <Tag>{value}</Tag>
+            {operType}
+          </div>
+        )
+        ;
+      },
+    },
+    {
+      field: 'region',
+      label: '区域',
+    },
+    {
+      field: 'accessPolicy',
+      label: '权限桶类型',
+      render(value, { accessPolicy }) {
+        const operType = renderDict(accessPolicy, DictEnum.SYS_OSS_ACCESS_POLICY);
+        return (
+          <div class="flex items-center">
+            <Tag>{value}</Tag>
+            {operType}
+          </div>
+        )
+        ;
+      },
+    },
+    {
+      field: 'status',
+      label: '是否默认',
+      render(value, { status }) {
+        const operType = renderDict(status, DictEnum.SYS_YES_NO_NUM);
+        return (
+          <div class="flex items-center">
+            <Tag>{value}</Tag>
+            {operType}
+          </div>
+        )
+        ;
+      },
+    },
+    {
+      field: 'ext1',
+      label: '扩展字段',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+    },
+    {
+      field: 'createdDept',
+      label: '创建组织',
+    },
+    {
+      field: 'createdBy',
+      label: '创建者',
+    },
+    {
+      field: 'createdAt',
+      label: '创建时间',
+    },
+    {
+      field: 'updatedBy',
+      label: '更新者',
+    },
+    {
+      field: 'updatedAt',
+      label: '更新时间',
+    },
+  ];
+
+  export const drawerSchema: VbenFormSchema[] =  [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'ossConfigId',
+    },
+    {
+      component: 'Divider',
+      componentProps: {
+        orientation: 'center',
+      },
+      fieldName: 'divider1',
+      hideLabel: true,
+      renderComponentContent: () => ({
+        default: () => '基本信息',
+      }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'configKey',
+      label: '配置名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'endpoint',
+      label: '服务地址',
+      renderComponentContent: (formModel) => ({
+        addonBefore: () => (formModel.isHttps === 'Y' ? 'https://' : 'http://'),
+      }),
+      rules: z
+        .string()
+        .refine((domain) => domain && !/^https?:\/\/.*/.test(domain), {
+          message: '请输入正确的域名, 不需要http(s)',
+        }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'domain',
+      label: '自定义域名',
+    },
+    {
+      component: 'Input',
+      fieldName: 'tip',
+      label: '占位作为提示使用',
+      hideLabel: true,
+
+    },
+    {
+      component: 'Divider',
+      componentProps: {
+        orientation: 'center',
+      },
+      fieldName: 'divider2',
+      hideLabel: true,
+      renderComponentContent: () => ({
+        default: () => '认证信息',
+      }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'accessKey',
+      label: 'accessKey',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'secretKey',
+      label: 'secretKey',
+      rules: 'required',
+    },
+    {
+      component: 'Divider',
+      componentProps: {
+        orientation: 'center',
+      },
+      fieldName: 'divider3',
+      hideLabel: true,
+      renderComponentContent: () => ({
+        default: () => '其他信息',
+      }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'bucketName',
+      label: '桶名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'prefix',
+      label: '前缀',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: accessPolicyOptions,
+        optionType: 'button',
+      },
+      defaultValue: '0',
+      fieldName: 'accessPolicy',
+      formItemClass: 'col-span-3 lg:col-span-2',
+      label: '权限桶类型',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: getDictOptions(DictEnum.SYS_YES_NO),
+        optionType: 'button',
+      },
+      defaultValue: 'N',
+      fieldName: 'isHttps',
+      formItemClass: 'col-span-3 lg:col-span-1',
+      label: '是否https',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'region',
+      label: '区域',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      formItemClass: 'items-baseline',
+      label: '备注',
+    },
+  ];
+  
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/oss-config/view-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/oss-config/view-drawer.vue
new file mode 100644
index 0000000..cb1330c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/oss-config/view-drawer.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { SysOssConfigListData } from '#/api/system/oss-config';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Description, useDescription } from '#/components/description';
+import { viewSchema } from './model';
+import { getSysOssConfigViewApi } from '#/api/system/oss-config';
+
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+});
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = drawerApi.getData() as { record: SysOssConfigListData };
+  console.log("vue/apps/web-antd/src/views/system/oss-config/view-drawer.vue record", record);
+  const record2 = await getSysOssConfigViewApi({ ossConfigId: Number(record.ossConfigId) });
+  console.log("vue/apps/web-antd/src/views/system/oss-config/view-drawer.vue record2", record2);
+  setDescProps({ data: record2 }, true);
+}
+
+</script>
+
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription">
+    </Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/oss/file-upload-modal.vue b/admin-ui/vue/apps/web-antd/src/views/system/oss/file-upload-modal.vue
new file mode 100644
index 0000000..91a9549
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/oss/file-upload-modal.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Alert } from 'ant-design-vue';
+
+import { FileUpload } from '#/components/upload';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const fileList = ref<string[]>([]);
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: (isOpen) => {
+    if (isOpen) {
+      return null;
+    }
+    if (fileList.value.length > 0) {
+      fileList.value = [];
+      emit('reload');
+      modalApi.close();
+      return null;
+    }
+  },
+});
+
+const accept = ref(['xlsx', 'word', 'pdf']);
+const maxNumber = ref(3);
+
+const message = computed(() => {
+  return `支持 [${accept.value.join(', ')}] 格式，最多上传 ${maxNumber.value} 个文件`;
+});
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :footer="false"
+    :fullscreen-button="false"
+    title="文件上传"
+  >
+    <div class="flex flex-col gap-4">
+      <Alert :message="message" show-icon type="info">aaa</Alert>
+      <FileUpload
+        v-model:value="fileList"
+        :accept="accept"
+        :max-number="maxNumber"
+        :max-size="5"
+      />
+    </div>
+  </BasicModal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/oss/image-upload-modal.vue b/admin-ui/vue/apps/web-antd/src/views/system/oss/image-upload-modal.vue
new file mode 100644
index 0000000..87f0145
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/oss/image-upload-modal.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Alert } from 'ant-design-vue';
+
+import { ImageUpload } from '#/components/upload';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const fileList = ref<string[]>([]);
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: (isOpen) => {
+    if (isOpen) {
+      return null;
+    }
+    if (fileList.value.length > 0) {
+      fileList.value = [];
+      emit('reload');
+      modalApi.close();
+      return null;
+    }
+  },
+});
+
+const accept = ref(['jpg', 'jpeg', 'png', 'gif', 'webp']);
+const maxNumber = ref(3);
+
+const message = computed(() => {
+  return `支持 [${accept.value.join(', ')}] 格式，最多上传 ${maxNumber.value} 张图片`;
+});
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :footer="false"
+    :fullscreen-button="false"
+    title="图片上传"
+  >
+    <div class="flex flex-col gap-4">
+      <Alert :message="message" show-icon type="info">aaa</Alert>
+      <ImageUpload
+        v-model:value="fileList"
+        :accept="accept"
+        :max-number="maxNumber"
+      />
+    </div>
+  </BasicModal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/oss/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/oss/index.vue
new file mode 100644
index 0000000..76a295f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/oss/index.vue
@@ -0,0 +1,264 @@
+<!--
+ * @description 对象存储管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { SysOssViewModel } from '#/api/system/oss';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+
+import { Button, message, Switch, Tag, Modal,Popconfirm, Tooltip ,Spin, Image } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { $t } from '@vben/locales';
+import type { DeepPartial } from '@vben/types';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysOssListApi, ossDownload, deleteSysOssApi } from '#/api/system/oss';
+import { getVxePopupContainer } from '@vben/utils';
+import { calculateFileSize } from '#/utils/file';
+import { downloadByData } from '#/utils/file/download';
+import {
+  MdiPlus,
+  MdiEdit,
+  MdiDelete,
+} from '@vben/icons';
+import { useRouter } from 'vue-router';
+import fileUploadModal from './file-upload-modal.vue';
+import imageUploadModal from './image-upload-modal.vue';
+import { fallbackImageBase64 } from './model';
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'fileName',
+      label: '文件名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'originalName',
+      label: '原名',
+    },
+    {
+      component: 'Input',
+      fieldName: 'fileSuffix',
+      label: '文件后缀',
+    },
+    {
+      component: 'Input',
+      fieldName: 'service',
+      label: '服务商',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        format: "YYYY-MM-DD",
+        valueFormat: "YYYY-MM-DD",
+      },
+      // defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'createdAt',
+      label: '创建时间',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 40 },
+    { field: 'infoId', title: 'ID' },
+    { field: 'fileName', title: '文件名称' },
+    { field: 'originalName', title: '原名', showOverflow: true,},
+    { field: 'fileSuffix', title: '文件后缀' },
+    { field: 'url', title: 'URL地址', slots: { default: 'url' },showOverflow: true,},
+    { field: 'service', title: '服务商' },
+    { field: 'createdAt', title: '创建时间' },
+    { field: 'createdBy', title: '创建者' },
+    { title: '操作', width: 80, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysOssListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'ossId',
+    height: 65,
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = tableApi.grid.getCheckboxRecords().length > 0;
+}
+
+const [Grid, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+
+async function handleDownload(row: SysOssViewModel) {
+  const downloadSize = ref($t('pages.common.downloadLoading'));
+  const hideLoading = message.loading({
+    content: () => downloadSize.value,
+    duration: 0,
+  });
+  try {
+    const data = await ossDownload(row.ossId, (e) => {
+      // 计算下载进度
+      const percent = Math.floor((e.loaded / e.total!) * 100);
+      // 已经下载
+      const current = calculateFileSize(e.loaded);
+      // 总大小
+      const total = calculateFileSize(e.total!);
+      downloadSize.value = `已下载: ${current}/${total} (${percent}%)`;
+    });
+    downloadByData(data, row.originalName);
+    message.success('下载完成');
+  } finally {
+    hideLoading();
+  }
+}
+
+async function handleDelete(row: SysOssViewModel) {
+  await deleteSysOssApi({ ossIds: [row.ossId] });
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysOssViewModel) => row.ossId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysOssApi({ ossIds: ids });
+      await tableApi.query();
+    },
+  });
+}
+
+const router = useRouter();
+const handleClickOssConfig = () => {
+  router.push(`/system/oss-config`);
+}
+
+const [ImageUploadModal, imageUploadApi] = useVbenModal({
+  connectedComponent: imageUploadModal,
+});
+
+const [FileUploadModal, fileUploadApi] = useVbenModal({
+  connectedComponent: fileUploadModal,
+});
+const preview = ref(false);
+function isImageFile(ext: string) {
+  const supportList = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+  return supportList.some((item) => ext.toLocaleLowerCase().includes(item));
+}
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="文件列表">
+      <template #toolbar-tools>
+        <Tooltip title="预览图片" class="mr-2 flex items-center ">
+            <Switch v-model:checked="preview" />
+        </Tooltip>
+        <Button class="mr-2 flex items-center " @click="handleClickOssConfig" v-access:code="'cpm:system:ossConfig:list'">OSS配置</Button>
+        <Button class="mr-2 flex items-center " type="primary" @click="fileUploadApi.open" v-access:code="'cpm:system:oss:upload'">文件上传</Button>
+        <Button class="mr-2 flex items-center " type="primary" @click="imageUploadApi.open" v-access:code="'cpm:system:oss:upload'">图片上传</Button>
+        <Button class="mr-2 flex items-center " type="primary" @click="handleMultiDelete" v-access:code="'cpm:system:oss:remove'">删除</Button>
+      </template>
+      <template #url="{ row }">
+        <!-- placeholder为图片未加载时显示的占位图 -->
+        <!-- fallback为图片加载失败时显示 -->
+        <!-- 需要设置key属性 否则切换翻页会有延迟 -->
+        <Image
+          :key="row.ossId"
+          v-if="preview && isImageFile(row.url)"
+          :src="row.url"
+          height="50px"
+          :fallback="fallbackImageBase64"
+        >
+          <template #placeholder>
+            <div class="flex size-full items-center justify-center">
+              <Spin />
+            </div>
+          </template>
+        </Image>
+        <span v-else>{{ row.url }}</span>
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status == '0' ? 'green' : 'red'">{{ row.status == '0' ? '正常' : '关闭' }}</Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleDownload(row)" v-access:code="'cpm:system:oss:download'">下载</Button>
+          <AccessControl :codes="['cpm:system:oss:remove']" type="code">
+            <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确认删除？"
+              @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link" danger >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <ImageUploadModal @reload="tableApi.query" />
+    <FileUploadModal @reload="tableApi.query" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/oss/model.tsx b/admin-ui/vue/apps/web-antd/src/views/system/oss/model.tsx
new file mode 100644
index 0000000..7126395
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/oss/model.tsx
@@ -0,0 +1,200 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+import { z } from '@vben/common-ui';
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+import { Tag } from 'ant-design-vue';
+import { h } from 'vue';
+
+import {
+  renderDict,
+  renderHttpMethodTag,
+  renderJsonPreview,
+} from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'configKey',
+    label: '配置名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'bucketName',
+    label: '桶名称',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DictEnum.SYS_YES_NO),
+    },
+    fieldName: 'status',
+    label: '是否默认',
+  },
+];
+
+export const viewSchema: DescItem[] = [
+  {
+    field: 'operId',
+    label: '日志编号',
+  },
+  {
+    field: 'status',
+    label: '操作结果',
+    render(value) {
+      return renderDict(value, DictEnum.SYS_COMMON_STATUS);
+    },
+  },
+  {
+    field: 'title',
+    label: '操作模块',
+    labelMinWidth: 80,
+    render(value, { businessType }) {
+      const operType = renderDict(businessType, DictEnum.SYS_OPER_TYPE);
+      return (
+        <div class="flex items-center">
+          <Tag>{value}</Tag>
+          {operType}
+        </div>
+      );
+    },
+  },
+  {
+    field: 'operIp',
+    label: '操作信息',
+    render(_, data) {
+      return (
+        <div class="flex items-center">
+          <Tag>{data.operName}</Tag>
+          {data.deptName}
+          {data.operIp}
+          {data.operLocation}
+        </div>
+      );
+    },
+  },
+  {
+    field: 'operUrl',
+    label: '请求信息',
+    render(_, data) {
+      const { operUrl, requestMethod } = data;
+      const methodTag = renderHttpMethodTag(requestMethod);
+      return (
+        <span>
+          {methodTag} {operUrl}
+        </span>
+      );
+    },
+  },
+  {
+    field: 'errorMsg',
+    label: '异常信息',
+    render(value) {
+      return <span class="font-bold text-red-600">{value}</span>;
+    },
+    show: (data) => {
+      return data && data.errorMsg !== '';
+    },
+  },
+  {
+    field: 'method',
+    label: '方法',
+  },
+  /**
+   * 默认word-break: break-word;会导致json预览样式异常
+   */
+  {
+    field: 'operParam',
+    label: '请求参数',
+    render(value) {
+      return (
+        <div class="max-h-[300px] w-full overflow-y-auto">
+          {renderJsonPreview(value)}
+        </div>
+      );
+    },
+  },
+  {
+    field: 'jsonResult',
+    label: '响应参数',
+    render(value) {
+      return (
+        <div class="max-h-[300px] w-full overflow-y-auto">
+          {renderJsonPreview(value)}
+        </div>
+      );
+    },
+    show(data) {
+      return data && data.jsonResult;
+    },
+  },
+  {
+    field: 'costTime',
+    label: '耗时',
+    render(value) {
+      return <span>{value} ms</span>;
+    },
+  },
+  {
+    field: 'operTime',
+    label: '操作时间',
+  },
+];
+
+export const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'configId',
+    label: '参数主键',
+  },
+  {
+    component: 'Input',
+    fieldName: 'configName',
+    label: '参数名称',rules: z.string()
+      .min(1, '参数名称不能为空')
+      .max(32, '参数名称最大长度32位'),
+  },
+  {
+    component: 'Input',
+    fieldName: 'configKey',
+    label: '参数键名',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    formItemClass: 'items-baseline',
+    fieldName: 'configValue',
+    label: '参数键值',
+    componentProps: {
+      autoSize: true,
+    },
+    rules: 'required',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_YES_NO),
+      optionType: 'button',
+    },
+    defaultValue: 'N',
+    fieldName: 'configType',
+    label: '是否内置',
+    rules: 'required',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-baseline',
+    label: '备注',
+  },
+];
+export const fallbackImageBase64 =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==';
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/post/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/post/index.vue
new file mode 100644
index 0000000..a450b6c
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/post/index.vue
@@ -0,0 +1,273 @@
+<!--
+ * @description 岗位管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SysPostListData } from '#/api';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Button, message, Switch,Tag, Modal, Popconfirm } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysPostListApi, deleteSysPostApi, getSysPostExportApi } from '#/api';
+import DeptTree from '#/components/dept/dept-tree.vue';
+import postDrawer from './post-drawer.vue';
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+
+import {
+  MdiPlus,
+  MdiEdit,
+  MdiDelete,
+  MdiExport,
+} from '@vben/icons';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const selectDeptId = ref<string[]>([]);
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'postCode',
+      label: '岗位编码',
+    },
+    {
+      component: 'Input',
+      fieldName: 'postName',
+      label: '岗位名称',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: '正常',
+            value: '0',
+          },
+          {
+            label: '停用',
+            value: '1',
+          },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'status',
+      label: '状态',
+    },
+    {
+      component: 'RangePicker',
+      // defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'createdAt',
+      label: '创建时间',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat:"YYYY-MM-DD",
+      },
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  handleReset: async () => {
+    selectDeptId.value = [];
+    await tableApi.formApi.resetForm();
+    await tableApi.reload();
+  },
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 40 },
+    { field: 'postId', title: 'ID' },
+    { field: 'postCode', title: '岗位编码' },
+    { field: 'postName', title: '岗位名称' },
+    { field: 'deptInfo.deptName', title: '组织' },
+    { field: 'postCategory', title: '岗位类别' },
+    {
+      field: 'status',
+      params: { dictType: 'sys_normal_disable' },
+      slots: { default: 'status' },
+      title: '状态',
+      width: 100,
+    },
+    { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' },
+    { title: '操作', width: 120, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        let deptId:number = 0;
+        if(selectDeptId.value.length > 0) {
+          deptId = Number(selectDeptId.value[0]);
+        }
+        return await getSysPostListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          deptId: deptId,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: false,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const [Grid, tableApi ] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+
+const [PostDrawer, postDrawerApi] = useVbenDrawer({
+  connectedComponent: postDrawer,
+});
+
+function handleView(row: SysPostListData) {
+  const { postId } = row;
+  postDrawerApi.setData({id: postId,  update:false,view:true});
+  postDrawerApi.open();
+}
+
+function handleAdd() {
+  const deptId = selectDeptId.value?.[0] || '';
+  postDrawerApi.setData({deptId: deptId, update:false, view:false});
+  postDrawerApi.open();
+}
+
+function handleEdit(row: SysPostListData) {
+  postDrawerApi.setData({ id: row.postId, update:true, view:false });
+  postDrawerApi.open();
+}
+
+async function handleDelete(row: SysPostListData) {
+  await deleteSysPostApi({ postId: row.postId });
+  message.success("删除成功");
+  await tableApi.query();
+}
+
+async function handleExport() {
+  // 导出
+  const formValues = tableApi.formApi.form.values;
+  // const res = await getSysPostExportApi({
+  //   ...formValues,
+  //   page: 1,
+  //   pageSize: 2000,
+  // });
+  commonDownloadExcel(getSysPostExportApi, '岗位列表',{
+    exportColumnsJson: JSON.stringify(getExportColumns(tableApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysPostListData) => row.postId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysPostApi({ postIds: ids });
+      message.success("删除成功");
+      await tableApi.query();
+    },
+  });
+}
+
+function handleReload() {
+  tableApi.query();
+}
+
+function handleStatusChange(row: SysPostListData) {
+  console.log(row);
+}
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full gap-[8px]">
+    <DeptTree class="w-[240px]"
+      @select="()=> tableApi.reload()"
+      @reload="()=> tableApi.reload()"
+      v-model:select-dept-id="selectDeptId" />
+    <Grid table-title="岗位列表">
+      <template #toolbar-tools>
+
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:post:add'">新增</Button>
+        <Button class="mr-2 flex items-center" type="primary" disabled :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:system:post:remove'">删除</Button>
+        <Button class="mr-2 flex items-center "  :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:system:post:export'">导出</Button>
+      </template>
+      <template #open="{ row }">
+        <Switch v-model:checked="row.status" :checkedValue="'0'" :unCheckedValue="'1'"  @change="handleStatusChange(row)" />
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status == '0' ? 'green' : 'red'">{{ row.status == '0' ? '正常' : '停用' }}</Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleView(row)" v-access:code="'cpm:system:post:query'">查看</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:system:post:edit'">修改</Button>
+          <AccessControl :codes="['cpm:system:post:remove']" type="code">
+            <Popconfirm
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              title="确认删除？"
+              @confirm="handleDelete(row)"
+              v-access:code="'cpm:system:post:remove'"
+          >
+              <Button class="mr-2 border-none p-0" :block="false" type="link" danger >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    </div>
+    <PostDrawer @reload="handleReload" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/post/model.ts b/admin-ui/vue/apps/web-antd/src/views/system/post/model.ts
new file mode 100644
index 0000000..84da403
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/post/model.ts
@@ -0,0 +1,80 @@
+/**
+ * @description 岗位管理模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import type {
+    VbenFormSchema,
+  } from '@vben/common-ui';
+  import { z } from '@vben/common-ui';
+  import { getDictOptions } from '#/utils/dict';
+  import { DictEnum } from '@vben/constants';
+  import { getPopupContainer } from '@vben/utils';
+
+
+export const drawerSchema: VbenFormSchema[] =  [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'postId',
+      label: 'postId',
+    },
+    {
+      component: 'TreeSelect',
+      componentProps: {
+        getPopupContainer,
+      },
+      fieldName: 'deptId',
+      label: '所属组织',
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Input',
+      fieldName: 'postName',
+      label: '岗位名称',rules: z.string()
+      .min(1, '岗位名称不能为空')
+      .max(32, '岗位名称最大长度32位'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'postCode',
+      label: '岗位编码',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'postCategory',
+      label: '类别编码',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'postSort',
+      label: '岗位排序',
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+        optionType: 'button',
+      },
+      defaultValue: '0',
+      fieldName: 'status',
+      label: '岗位状态',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      formItemClass: 'items-baseline',
+      label: '备注',
+    },
+  ];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/post/post-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/post/post-drawer.vue
new file mode 100644
index 0000000..ac04c9b
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/post/post-drawer.vue
@@ -0,0 +1,153 @@
+<!--
+ * @description 岗位编辑抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { SysMenuListData } from '#/api/system/menu';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { addSysPostApi, editSysPostApi, getSysPostViewApi } from '#/api/system/post';
+import { getSysDeptTreeApi } from '#/api/system/dept';
+import { drawerSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+  deptId?: string;
+}
+
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+
+async function getDeptTree() {
+  const treeRes = await getSysDeptTreeApi();
+  const treeData = treeRes.items;
+  addFullName(treeData, 'deptName', ' / ');
+  return treeData;
+}
+
+async function initDeptSelect() {
+  // 需要动态更新TreeSelect组件 这里允许为空
+  const treeData = await getDeptTree();
+  formApi.updateSchema([
+    {
+      componentProps: {
+        fieldNames: { label: 'deptName', value: 'deptId' },
+        showSearch: true,
+        treeData: treeData,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      },
+      fieldName: 'deptId',
+    },
+  ]);
+}
+
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({confirmLoading:true,loading:true})
+    const { id, update, view, deptId } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    await initDeptSelect();
+    if (isUpdate.value || isView.value) {
+      const record = await getSysPostViewApi({ postId: Number(id) });
+      await formApi.setValues(record);
+    }else if (deptId) {
+      await formApi.setValues({ deptId: deptId });
+    }
+    drawerApi.setState({confirmLoading:false,loading:false})
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:true,
+        "only-read":true,
+      } } });
+    }else{
+      drawerApi.setState({ showConfirmButton: true});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:false,
+        "only-read":false,
+      }} });
+    }
+
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({confirmLoading:true,loading:true})
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? editSysPostApi (data) : addSysPostApi(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({confirmLoading:false,loading:false})
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm>
+    </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/role/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/role/index.vue
new file mode 100644
index 0000000..b5f8ec3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/role/index.vue
@@ -0,0 +1,289 @@
+<!--
+ * @description 角色管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h, onMounted, ref } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SysRoleListData } from '#/api/system/role';
+import { Page } from '@vben/common-ui';
+
+import { Button, message, Switch,Tag, Modal, Popconfirm } from 'ant-design-vue';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysRoleListApi, deleteSysRoleApi } from '#/api/system/role';
+import { getSysDeptTreeApi } from '#/api/system/dept';
+import { addFullName, getPopupContainer, getVxePopupContainer } from '@vben/utils';
+import { useVbenDrawer,useVbenModal } from '@vben/common-ui';
+
+import roleDrawer from './role-drawer.vue';
+import roleDataScopeModal from './role-data-scope-modal.vue';
+import { authScopeOptions } from './model';
+
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+
+import {
+  MdiPlus,
+  MdiEdit,
+  MdiDelete,
+} from '@vben/icons';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+function getDataScopeOptionLabel(dataScope: string) {
+  const found = authScopeOptions.find((item) => item.value === dataScope);
+  if (!found) {
+    return dataScope;
+  }
+  return found.label;
+}
+
+function getDataScopeOptionColor(dataScope: string) {
+  const found = authScopeOptions.find((item) => item.value === dataScope);
+  if (!found) {
+    return 'default';
+  }
+  return found.color;
+}
+
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'TreeSelect',
+      componentProps: {
+        allowClear: true,
+        fieldNames: { label: 'deptName', value: 'deptId' },
+        getPopupContainer,
+        placeholder: '请选择所属组织',
+        showSearch: true,
+        treeData: [],
+        treeNodeFilterProp: 'deptName',
+        treeNodeLabelProp: 'fullName',
+      },
+      fieldName: 'deptId',
+      label: '所属组织',
+    },
+    {
+      component: 'Input',
+      fieldName: 'roleName',
+      label: '角色名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'roleKey',
+      label: '角色权限字符串',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: '正常',
+            value: '0',
+          },
+          {
+            label: '停用',
+            value: '1',
+          },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'status',
+      label: '状态',
+    },
+    {
+      component: 'RangePicker',
+      // defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'createdAt',
+      label: '创建时间',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat:"YYYY-MM-DD",
+      },
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 40 },
+    { field: 'roleId', title: 'ID',width: 80  },
+    { field: 'roleName', title: '角色名称' },
+    { field: 'deptName', title: '所属组织' },
+    { field: 'roleKey', title: '角色权限字符串' },
+    { field: 'dataScope', title: '数据范围', slots: { default: 'dataScope' }, minWidth: 90 },
+    { field: 'roleSort', title: '排序',width: 60 },
+    {
+      field: 'status',
+      slots: { default: 'status' },
+      title: '状态',
+      width: 100,
+    },
+    { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' },
+    { title: '操作', width: 190, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysRoleListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const [Grid, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+onMounted(async () => {
+  const { items } = await getSysDeptTreeApi({ deptType: 1 });
+  addFullName(items, 'deptName', ' / ');
+  tableApi.formApi.updateSchema([
+    {
+      componentProps: { treeData: items },
+      fieldName: 'deptId',
+    },
+  ]);
+});
+
+const [RoleDrawer, roleDrawerApi] = useVbenDrawer({
+  connectedComponent: roleDrawer,
+});
+
+const [RoleDataScopeModal, roleDataScopeModalApi] = useVbenModal({
+  connectedComponent: roleDataScopeModal,
+});
+
+function handleView(row: SysRoleListData) {
+  const { roleId } = row;
+  roleDrawerApi.setData({id: roleId, update:false,view:true});
+  roleDrawerApi.open();
+}
+
+function handleAdd() {
+  roleDrawerApi.setData({update:false, view:false});
+  roleDrawerApi.open();
+}
+
+function handleEdit(row: SysRoleListData) {
+  roleDrawerApi.setData({ id: row.roleId, update:true, view:false });
+  roleDrawerApi.open();
+}
+
+async function handleDelete(row: SysRoleListData) {
+  await deleteSysRoleApi({ roleId: row.roleId });
+  message.success("删除成功");
+  await tableApi.query();
+}
+
+const CheckboxChecked = ref(false);
+
+function handleCheckboxChange() {
+  CheckboxChecked.value = tableApi.grid.getCheckboxRecords().length > 0;
+  console.log('vue/apps/web-antd/src/views/system/user/index.vue CheckboxChecked',CheckboxChecked.value);
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysRoleListData) => row.roleId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysRoleApi({ roleIds: ids });
+      message.success("删除成功");
+      await tableApi.query();
+    },
+  });
+}
+
+function handleReload() {
+  tableApi.query();
+}
+
+function handleDataScope(row: SysRoleListData) {
+  roleDataScopeModalApi.setData({id: row.roleId, update:true, view:false});
+  roleDataScopeModalApi.open();
+}
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="角色管理">
+      <template #toolbar-tools>
+
+          <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:role:add'">新增</Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:system:role:remove'">删除</Button>
+      </template>
+      <template #open="{ row }">
+        <Switch v-model:checked="row.status" :checkedValue="'0'" :unCheckedValue="'1'" />
+      </template>
+      <template #status="{ row }">
+        <Tag :color="row.status == '0' ? 'green' : 'red'">{{ row.status == '0' ? '正常' : '停用' }}</Tag>
+      </template>
+      <template #dataScope="{ row }">
+        <Tag :color="getDataScopeOptionColor(row.dataScope)">{{ getDataScopeOptionLabel(row.dataScope) }}</Tag>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleView(row)" v-access:code="'cpm:system:role:query'">查看</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" v-if="row.roleId != 1" @click="handleEdit(row)" v-access:code="'cpm:system:role:edit'" >修改</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" v-if="row.roleId != 1" @click="handleDataScope(row)" v-access:code="'cpm:system:role:edit'">数据权限</Button>
+          <AccessControl :codes="['cpm:system:role:remove']" type="code">
+            <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确定删除吗？" @confirm="handleDelete(row)" v-if="row.roleId != 1" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <RoleDrawer @reload="handleReload" />
+    <RoleDataScopeModal @reload="handleReload" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/role/model.ts b/admin-ui/vue/apps/web-antd/src/views/system/role/model.ts
new file mode 100644
index 0000000..2abc229
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/role/model.ts
@@ -0,0 +1,153 @@
+/**
+ * @description 角色管理模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+
+import type {
+    VbenFormSchema,
+  } from '@vben/common-ui';
+  import { z } from '@vben/common-ui';
+  import { getDictOptions } from '#/utils/dict';
+  import { DictEnum } from '@vben/constants';
+  import { getPopupContainer } from '@vben/utils';
+
+
+export const authScopeOptions = [
+    { color: 'green', label: '全部数据权限', value: '1' },
+    { color: 'default', label: '自定数据权限', value: '2' },
+    { color: 'orange', label: '本组织数据权限', value: '3' },
+    { color: 'cyan', label: '本组织及以下数据权限', value: '4' },
+    { color: 'error', label: '仅本人数据权限', value: '5' },
+    { color: 'blue', label: '本组织及以下或本人数据权限', value: '6' },
+    { color: 'purple', label: '本组织及本组织下一级数据权限', value: '7' },
+    { color: 'geekblue', label: '本组织下一级数据权限', value: '8' },
+];
+
+export const drawerSchema: VbenFormSchema[] =  [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'roleId',
+      label: '角色ID',
+    },
+    {
+      component: 'Input',
+      fieldName: 'roleName',
+      label: '角色名称',rules: z.string()
+      .min(1, '角色名称不能为空')
+      .max(32, '角色名称最大长度32位'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'roleKey',
+      help: '如: test simpleUser等',
+      label: '权限标识',
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      fieldName: 'roleSort',
+      label: '角色排序',
+      rules: 'required',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: false,
+        options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+        getPopupContainer,
+      },
+      defaultValue: '0',
+      fieldName: 'status',
+      help: '修改后, 拥有该角色的用户将自动下线.',
+      label: '角色状态',
+      rules: 'required',
+    },
+    {
+      component: 'TreeSelect',
+      fieldName: 'deptId',
+      label: '所属组织',
+    },
+    {
+      component: 'InputNumber',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'menuCheckStrictly',
+      label: '菜单树父子关联',
+    },
+    {
+      component: 'CheckboxGroup',
+      defaultValue: [],
+      fieldName: 'menuIds',
+      label: '菜单权限',
+      formItemClass: 'col-span-2',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        rows: 4,
+      },
+      defaultValue: '',
+      fieldName: 'remark',
+      formItemClass: ' col-span-2',
+      label: '备注',
+    },
+  ];
+
+  export const dataScopeModalSchema: VbenFormSchema[] = [
+    {
+      component: 'Input',
+      fieldName: 'roleId',
+      label: '角色ID',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'roleName',
+      label: '角色名称',
+      componentProps: {
+        readonly: true,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'dataScope',
+      label: '数据权限',
+      componentProps: {
+        options: authScopeOptions,
+      },
+    },
+    {
+      component: 'CheckboxGroup',
+      defaultValue: [],
+      fieldName: 'deptIds',
+      label: '组织权限',
+      // formItemClass: 'col-span-2',
+      dependencies: {
+        show: (values) => values?.dataScope === '2',
+        triggerFields: ['dataScope'],
+      },
+    },
+    {
+      component: 'InputNumber',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+
+      fieldName: 'deptCheckStrictly',
+      label: '组织树父子关联',
+    },
+  ];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/role/role-data-scope-modal.vue b/admin-ui/vue/apps/web-antd/src/views/system/role/role-data-scope-modal.vue
new file mode 100644
index 0000000..4e05c92
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/role/role-data-scope-modal.vue
@@ -0,0 +1,164 @@
+<!--
+ * @description 角色数据权限设置弹窗组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import DeptSelect from '../dept/dept-select.vue';
+
+import { getSysRoleViewApi, editSysRoleDataScopeApi } from '#/api/system/role';
+import { dataScopeModalSchema } from './model';
+import { confirmTemplateOverwrite } from '#/utils/role-template';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+const isTemplateRole = ref(false);
+const saving = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: dataScopeModalSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const deptIds = ref<number[]>([]);
+const checkStrictly = ref(false);
+
+const [BasicModal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.setState({ confirmLoading: true, loading: true });
+    const { id, update, view } = modalApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+
+    isTemplateRole.value = false;
+    if (isUpdate.value || isView.value) {
+      const record = await getSysRoleViewApi({ roleId: id });
+      isTemplateRole.value = record.isTemplateRole;
+      await nextTick();
+      checkStrictly.value = record.deptCheckStrictly === 0;
+      deptIds.value = record.deptIds;
+      await formApi.setValues(record);
+    }
+    modalApi.setState({ confirmLoading: false, loading: false });
+    if (view) {
+      modalApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            'only-read': true,
+          },
+        },
+      });
+    } else {
+      modalApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            'only-read': false,
+          },
+        },
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  if (saving.value || isView.value) return;
+  saving.value = true;
+  try {
+    modalApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    if (!(await confirmTemplateOverwrite(isTemplateRole.value))) return;
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    await editSysRoleDataScopeApi(data);
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    saving.value = false;
+    modalApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+/**
+ * 通过回调更新 无法通过v-model
+ * @param deptIds 选中的组织ID数组
+ * @param checkStrictly 组织选择是否严格模式 true 严格模式(解除父子联动) false 非严格模式(父子联动), 默认非严格模式, 后台 1：非严格模式(父子联动) 0：严格模式(解除父子联动)
+ */
+async function handleDeptChange(deptIds2: number[], checkStrictly2: boolean) {
+  await nextTick();
+  await formApi.setFieldValue('deptIds', deptIds2);
+  await formApi.setFieldValue('deptCheckStrictly', checkStrictly2 ? 0 : 1);
+  checkStrictly.value = checkStrictly2;
+  deptIds.value = deptIds2;
+}
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :title="title"
+    class="min-h-[600px] w-[550px]"
+  >
+    <BasicForm>
+      <template #deptIds>
+        <div class="h-[600px] w-full">
+          <DeptSelect
+            :dept-ids="deptIds"
+            :check-strictly="checkStrictly"
+            @change="handleDeptChange"
+          />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/role/role-drawer.test.ts b/admin-ui/vue/apps/web-antd/src/views/system/role/role-drawer.test.ts
new file mode 100644
index 0000000..e63d181
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/role/role-drawer.test.ts
@@ -0,0 +1,147 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => ({
+  hooks: {} as {
+    onConfirm?: () => Promise<void>;
+    onOpenChange?: (open: boolean) => Promise<unknown>;
+  },
+  close: vi.fn(),
+  getData: vi.fn(() => ({ id: 82, update: true, view: false })),
+  getRole: vi.fn(),
+  editRole: vi.fn(),
+  confirm: vi.fn(),
+}));
+vi.mock('#/api/system/role', () => ({
+  addSysRoleApi: vi.fn(),
+  editSysRoleApi: mocks.editRole,
+  getSysRoleViewApi: mocks.getRole,
+}));
+vi.mock('#/api/system/dept', () => ({
+  getSysDeptTreeApi: vi.fn(async () => ({ items: [] })),
+}));
+vi.mock('#/utils/role-template', () => ({
+  confirmTemplateOverwrite: mocks.confirm,
+  TEMPLATE_OVERWRITE_DESCRIPTION: '覆盖默认角色',
+}));
+vi.mock('./model', () => ({ drawerSchema: [] }));
+vi.mock('@vben/locales', () => ({ $t: (key: string) => key }));
+vi.mock('@vben/utils', () => ({
+  cloneDeep: (value: object) => structuredClone(value),
+  addFullName: vi.fn(),
+  getPopupContainer: vi.fn(),
+}));
+vi.mock('ant-design-vue', async () => {
+  const { defineComponent, h } = await import('vue');
+  return {
+    Alert: defineComponent({ setup: () => () => h('div') }),
+    message: { success: vi.fn() },
+  };
+});
+vi.mock('@vben/common-ui', async () => {
+  const { defineComponent, h } = await import('vue');
+  return {
+    useVbenDrawer: (options: typeof mocks.hooks) => {
+      mocks.hooks = options;
+      return [
+        defineComponent({
+          setup:
+            (_, { slots }) =>
+            () =>
+              h('div', slots.default?.()),
+        }),
+        { close: mocks.close, getData: mocks.getData, setState: vi.fn() },
+      ];
+    },
+  };
+});
+vi.mock('#/adapter/form', async () => {
+  const { defineComponent, h } = await import('vue');
+  return {
+    useVbenForm: () => [
+      defineComponent({
+        setup:
+          (_, { slots }) =>
+          () =>
+            h('div', slots.menuIds?.()),
+      }),
+      {
+        getValues: vi.fn(async () => ({ roleId: 82, roleName: '代理角色' })),
+        resetForm: vi.fn(),
+        setState: vi.fn(),
+        setValues: vi.fn(),
+        updateSchema: vi.fn(),
+        validate: vi.fn(async () => ({ valid: true })),
+      },
+    ],
+  };
+});
+vi.mock('../menu/menu-select.vue', async () => {
+  const { defineComponent, h } = await import('vue');
+  return {
+    default: defineComponent({
+      setup: (_, { expose }) => {
+        expose({
+          clearData: vi.fn(),
+          getData: () => [11],
+          getDataScopes: () => ({}),
+        });
+        return () => h('div');
+      },
+    }),
+  };
+});
+
+import RoleDrawer from './role-drawer.vue';
+
+describe('平台角色保存与模板覆盖', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.getData.mockReturnValue({ id: 82, update: true, view: false });
+    mocks.getRole.mockResolvedValue({
+      menuIds: [10],
+      isTemplateRole: true,
+      isDeptDefaultRole: false,
+    });
+    mocks.confirm.mockResolvedValue(true);
+  });
+  it('取消模板覆盖后不调用保存接口', async () => {
+    mocks.confirm.mockResolvedValueOnce(false);
+    const wrapper = mount(RoleDrawer);
+    await mocks.hooks.onOpenChange?.(true);
+    await flushPromises();
+    await mocks.hooks.onConfirm?.();
+    expect(mocks.confirm).toHaveBeenCalledWith(true);
+    expect(mocks.editRole).not.toHaveBeenCalled();
+    expect(mocks.close).not.toHaveBeenCalled();
+    wrapper.unmount();
+  });
+  it('确认后提交当前勾选的完整权限', async () => {
+    const wrapper = mount(RoleDrawer);
+    await mocks.hooks.onOpenChange?.(true);
+    await flushPromises();
+    await mocks.hooks.onConfirm?.();
+    expect(mocks.editRole).toHaveBeenCalledWith({
+      roleId: 82,
+      roleName: '代理角色',
+      menuIds: [11],
+      roleMenuDataScopes: {},
+    });
+    expect(mocks.close).toHaveBeenCalledOnce();
+    wrapper.unmount();
+  });
+  it('单独编辑默认角色不请求模板覆盖', async () => {
+    mocks.getRole.mockResolvedValueOnce({
+      menuIds: [10],
+      isTemplateRole: false,
+      isDeptDefaultRole: true,
+    });
+    const wrapper = mount(RoleDrawer);
+    await mocks.hooks.onOpenChange?.(true);
+    await flushPromises();
+    await mocks.hooks.onConfirm?.();
+    expect(mocks.confirm).toHaveBeenCalledWith(false);
+    expect(mocks.editRole).toHaveBeenCalledOnce();
+    wrapper.unmount();
+  });
+});
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/role/role-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/role/role-drawer.vue
new file mode 100644
index 0000000..ed4d7ce
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/role/role-drawer.vue
@@ -0,0 +1,232 @@
+<!--
+ * @description 角色编辑抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { useVbenForm } from '#/adapter/form';
+import MenuSelect from '../menu/menu-select.vue';
+import { Alert, message } from 'ant-design-vue';
+import {
+  confirmTemplateOverwrite,
+  TEMPLATE_OVERWRITE_DESCRIPTION,
+} from '#/utils/role-template';
+import { getSysDeptTreeApi } from '#/api/system/dept';
+import { addFullName, cloneDeep, getPopupContainer } from '@vben/utils';
+
+import {
+  addSysRoleApi,
+  editSysRoleApi,
+  getSysRoleViewApi,
+} from '#/api/system/role';
+import { drawerSchema } from './model';
+/** emit */
+const emit = defineEmits<{ reload: [] }>();
+/** 是否更新 */
+const isUpdate = ref(false);
+/** 是否预览 */
+const isView = ref(false);
+/** 标题 */
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+/** ====================  变量  ==================== */
+/** 是否加载菜单组件 */
+const showMenuSelect = ref(false);
+const isTemplateRole = ref(false);
+const isDeptDefaultRole = ref(false);
+const saving = ref(false);
+
+/** 选中的菜单id */
+const menuIds = ref<number[]>([]);
+const roleMenuDataScopes = ref<Record<number, string>>({});
+
+/** ====================  组件实例  ==================== */
+/** 菜单选择组件实例 */
+const refMenuSelect = ref<InstanceType<typeof MenuSelect> | null>(null);
+
+/** 表单实例 */
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2 gap-x-4',
+});
+
+/** 抽屉组件实例 */
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      menuIds.value = [];
+      roleMenuDataScopes.value = {};
+      return null;
+    }
+    isTemplateRole.value = false;
+    isDeptDefaultRole.value = false;
+    showMenuSelect.value = false;
+    setupDeptSelect();
+
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { id, update, view } = drawerApi.getData();
+    isUpdate.value = update;
+    isView.value = view;
+    // 获取数据
+    if (isUpdate.value || isView.value) {
+      const record = await getSysRoleViewApi({ roleId: id });
+      isTemplateRole.value = record.isTemplateRole;
+      isDeptDefaultRole.value = record.isDeptDefaultRole;
+      await formApi.setValues(record);
+
+      // 获取菜单id列表
+      menuIds.value = record.menuIds;
+      roleMenuDataScopes.value = record.roleMenuDataScopes || {};
+    }
+    showMenuSelect.value = true;
+    drawerApi.setState({ confirmLoading: false, loading: false });
+    // 根据是否更新调整表达状态
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            'only-read': true,
+          },
+        },
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            'only-read': false,
+          },
+        },
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  if (saving.value || isView.value) return;
+  saving.value = true;
+  try {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    if (!(await confirmTemplateOverwrite(isTemplateRole.value))) return;
+    // 设置加载状态
+    drawerApi.setState({ confirmLoading: true, loading: true });
+
+    // 获取表单数据
+    const data = cloneDeep(await formApi.getValues());
+    // 获取菜单id
+    data.menuIds = refMenuSelect.value?.getData();
+    data.roleMenuDataScopes = refMenuSelect.value?.getDataScopes();
+    // 编辑数据
+    await (isUpdate.value ? editSysRoleApi(data) : addSysRoleApi(data));
+    if (isTemplateRole.value)
+      message.success('模板已保存，覆盖下发已提交后台处理');
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    saving.value = false;
+    // 关闭加载状态
+    drawerApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  refMenuSelect.value?.clearData();
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+/**
+ * 初始化组织选择
+ */
+async function setupDeptSelect() {
+  // updateSchema
+  const deptTree = await getSysDeptTreeApi({ deptType: 1 });
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  addFullName(deptTree.items, 'deptName', ' / ');
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'deptId',
+          value: 'deptId',
+          children: 'children',
+          label: 'deptName',
+        },
+        getPopupContainer,
+        placeholder: '请选择',
+        showSearch: true,
+        treeData: deptTree.items,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'deptId',
+    },
+  ]);
+}
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[800px]">
+    <Alert
+      v-if="isTemplateRole"
+      class="mb-4"
+      type="warning"
+      show-icon
+      message="平台代理模板"
+      :description="TEMPLATE_OVERWRITE_DESCRIPTION"
+    />
+    <Alert
+      v-else-if="isDeptDefaultRole"
+      class="mb-4"
+      type="info"
+      show-icon
+      message="机构默认角色"
+      description="本次配置仅修改此角色，下次模板覆盖下发时会被替换。"
+    />
+    <BasicForm>
+      <template #menuIds>
+        <div class="h-[600px] w-full">
+          <MenuSelect
+            ref="refMenuSelect"
+            :menuIds="menuIds"
+            :dataScopes="roleMenuDataScopes"
+            v-if="showMenuSelect"
+          />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/edit.vue b/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/edit.vue
new file mode 100644
index 0000000..eb15aca
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/edit.vue
@@ -0,0 +1,114 @@
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm></BasicForm>
+  </BasicDrawer>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer, useVbenModal, VbenButton } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { Edit, View } from '#/api/system/sysNoticeUser';
+import { editSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+  },
+  layout: 'vertical',
+  schema: editSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer
+
+({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await View({ id: id });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (Edit(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/index.vue
new file mode 100644
index 0000000..323b628
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/index.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import { Button, message, Modal, Popconfirm } from 'ant-design-vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { DeepPartial } from '@vben/types';
+import { getVxePopupContainer } from '@vben/utils';
+import { Page } from '@vben/common-ui';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { AccessControl } from '@vben/access';
+import {
+  commonDownloadExcel,
+  getExportColumns,
+} from '#/utils/file/download';
+import { List, Export, Delete, View, Read } from '#/api/system/sysNoticeUser';
+import { MdiPlus, MdiExport, MdiDelete } from '@vben/icons';
+import { columns, querySchema, type RowType } from './model';
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await List({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: false,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+async function noticeDelete(row?: any) {
+  if (row) {
+    await Delete({ id: [row.id] });
+    message.success("删除成功");
+    await handleRefresh();
+  }
+}
+async function noticeView(row?: any) {
+  if (row) {
+    await Read({ ids: [row.id] });
+    message.success("已读成功");
+    await handleRefresh();
+  }
+}
+async function noticeDeleteList() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+    ids.push(row.id);
+  }
+  if (ids.length === 0) {
+    message.error('请至少选择一项要删除的数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await Delete({ id: ids });
+      message.success("删除成功");
+      await handleRefresh();
+    },
+  });
+} async function noticeViewList() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+    ids.push(row.id);
+  }
+  if (ids.length === 0) {
+    message.error('请至少选择一项要已读的数据');
+    return;
+  }
+  await Read({ ids: ids });
+  message.success("已读成功");
+  await handleRefresh();
+}
+async function handleRefresh() {
+  await gridApi.query();
+}
+async function handleExport() {
+  const formValues = gridApi.formApi.form.values;
+  await commonDownloadExcel(Export, '用户通知公告表', {
+    exportColumnsJson: JSON.stringify(getExportColumns(gridApi)),
+    ...formValues,
+    page: 1,
+  });
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <Grid table-title="用户通知公告表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" @click="noticeViewList"
+          v-access:code="'cpm:system:sysNoticeUser:view'">
+          标记已读
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked"
+          @click="noticeDeleteList" v-access:code="'cpm:system:sysNoticeUser:delete'">
+          删除
+        </Button>
+        <Button class="mr-2 flex items-center" type="primary" @click="handleExport"
+          v-access:code="'cpm:system:sysNoticeUser:export'">
+          导出
+        </Button>
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button v-if="row.isRead==0" class="mr-2 border-none p-0" :block="false" type="link" @click="noticeView(row)"
+            v-access:code="'cpm:system:sysNoticeUser:view'">
+            已读
+          </Button>
+          <AccessControl :codes="['cpm:system:sysNoticeUser:delete']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"
+              @confirm="noticeDelete(row)">
+              <Button class="mr-2 border-none p-0" :block="false" type="link" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/model.tsx b/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/model.tsx
new file mode 100644
index 0000000..37fbe36
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/model.tsx
@@ -0,0 +1,302 @@
+import { h, ref } from 'vue';
+import { Tag } from 'ant-design-vue';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import type { DescItem } from '#/components/description';
+import { cloneDeep } from 'lodash-es';
+import type { VbenFormSchema } from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { renderDict, renderPopoverMemberSumma, type MemberSumma } from '#/utils';
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+
+const dictOptions = getDictOptions(DictEnum.SYS_NOTICE_TYPE);
+export class State {
+  public id = 0; // ID
+  public noticeId = 0; // 公告ID
+  public tenantId = '000000'; // 租户编号
+  public noticeTitle = ''; // 公告标题
+  public noticeType = ''; // 公告类型
+  public noticeContent = null; // 公告内容
+  public status = 0; // 公告状态
+  public isRead = 0; // 是否已读
+  public createdDept = 0; // 创建组织
+  public createdBy = 0; // 创建者
+  public createdBySumma?: null | MemberSumma = null; // 创建者摘要信息
+  public createdAt = ''; // 创建时间
+  public updatedBy = 0; // 更新者
+  public updatedBySumma?: null | MemberSumma = null; // 更新者摘要信息
+  public updatedAt = ''; // 更新时间
+  public remark = null; // 备注
+
+  constructor(state?: Partial<State>) {
+    if (state) {
+      Object.assign(this, state);
+    }
+  }
+}
+
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+// 表单验证规则
+
+// 表格搜索表单
+export const querySchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'InputNumber',
+    label: '公告ID',
+    componentProps: {
+      placeholder: '请输入ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    }, rules: null,
+    formItemClass: 'col-span-1',
+  },
+  {
+    fieldName: 'noticeType',
+    component: 'Select',
+    label: '公告类型',
+    componentProps: {
+      placeholder: '请选择公告类型',
+      options: dictOptions,
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    formItemClass: 'col-span-1',
+  }, {
+    fieldName: 'isRead',
+    component: 'Select',
+    label: '是否已读',
+    componentProps: {
+      placeholder: '请选择是否已读',
+      options: [
+        {
+          label: '已读',
+          value: 1,
+        },
+        {
+          label: "未读",
+          value: 0,
+        },
+      ],
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    formItemClass: 'col-span-1',
+  },];
+
+// 表格列
+export const columns: VxeGridProps['columns'] = [
+   {
+    title: '',
+    field: '',
+    width: 40,
+    type: 'checkbox',
+  },  {
+    title: 'ID',
+    field: 'id',
+    align: 'left',
+    width: -1,
+  },
+
+  {
+    title: '公告ID',
+    field: 'noticeId',
+    align: 'center',
+    width: -1,
+  }, {
+    title: '公告类型',
+    field: 'noticeType',
+    params: { dictType: DictEnum.NOTICE_RANGE },
+    align: 'center',
+    slots: {
+      default: (scope) => {
+        return <Tag>{renderDict(scope.row.noticeType, DictEnum.NOTICE_RANGE)}</Tag>;
+      },
+    },
+    width: -1,
+  },
+  {
+    title: '公告标题',
+    field: 'noticeTitle',
+    align: 'center',
+    width: -1,
+  },
+
+  {
+    title: '公告内容',
+    field: 'noticeContent',
+    align: 'center',
+    width: "50%",
+  },
+  {
+    title: '创建者',
+    field: 'createdBy',
+    align: 'center',
+    width: -1,
+    slots: {
+      default: ({ row }) => {
+        return renderPopoverMemberSumma(row.createdBySumma);
+      },
+    },
+  },
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+// 表格列接口
+export interface RowType {
+  id: number;
+  noticeId: number;
+  tenantId: string;
+  noticeTitle: string;
+  noticeType: string;
+  noticeContent: string;
+  status: string;
+  isRead: number;
+  createdDept: number;
+  createdBy: number;
+  createdAt: string;
+  updatedBy: number;
+  updatedAt: string;
+  remark: string;
+};
+
+// 查看字段列表
+export const viewSchema: DescItem[] = [
+  { field: 'id', label: 'ID' },
+  { field: 'noticeId', label: '公告ID' },
+  { field: 'tenantId', label: '租户编号' },
+  { field: 'noticeTitle', label: '公告标题' },
+  { field: 'noticeType', label: '公告类型' },
+  { field: 'noticeContent', label: '公告内容' },
+  { field: 'status', label: '公告状态' },
+  { field: 'isRead', label: '是否已读' },
+  { field: 'createdDept', label: '创建组织' },
+  { field: 'createdBy', label: '创建者' },
+  { field: 'createdAt', label: '创建时间' },
+  { field: 'updatedBy', label: '更新者' },
+  { field: 'updatedAt', label: '更新时间' },
+  { field: 'remark', label: '备注' },
+];
+
+// 编辑字段列表
+export const editSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'id',
+    component: 'Input',
+    label: 'ID',
+    dependencies: { show: () => false, triggerFields: [''], },
+    componentProps: {
+      placeholder: '',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    formItemClass: 'col-span-1',
+  }, {
+    fieldName: 'noticeId',
+    component: 'InputNumber',
+    label: '公告ID',
+    componentProps: {
+      placeholder: '请输入公告ID',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    }, rules: z.number({ required_error: '请输入公告ID', invalid_type_error: '无效数字' }),
+    formItemClass: 'col-span-1',
+  }, {
+    fieldName: 'tenantId',
+    component: 'Input',
+    label: '租户编号',
+    componentProps: {
+      placeholder: '请输入租户编号',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  }, {
+    fieldName: 'noticeTitle',
+    component: 'Input',
+    label: '公告标题',
+    componentProps: {
+      placeholder: '请输入公告标题',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  }, {
+    fieldName: 'noticeType',
+    component: 'Input',
+    label: '公告类型',
+    componentProps: {
+      placeholder: '请输入公告类型',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  }, {
+    fieldName: 'noticeContent',
+    component: 'Input',
+    label: '公告内容',
+    componentProps: {
+      placeholder: '请输入公告内容',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  }, {
+    fieldName: 'status',
+    component: 'Input',
+    label: '公告状态',
+    componentProps: {
+      placeholder: '请输入公告状态',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  }, {
+    fieldName: 'isRead',
+    component: 'InputNumber',
+    label: '是否已读',
+    componentProps: {
+      placeholder: '请输入是否已读',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    }, rules: z.number({ required_error: '请输入是否已读', invalid_type_error: '无效数字' }),
+    formItemClass: 'col-span-1',
+  }, {
+    fieldName: 'remark',
+    component: 'Input',
+    label: '备注',
+    componentProps: {
+      placeholder: '请输入备注',
+      onUpdateValue: (e: any) => {
+        console.log(e);
+      },
+    },
+    rules: 'required',
+    formItemClass: 'col-span-1',
+  },];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/view.vue b/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/view.vue
new file mode 100644
index 0000000..91a4f2f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/sysNoticeUser/view.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { SysClient } from '#/api/system/client';
+  import { computed, nextTick, ref } from 'vue';
+  import { useVbenDrawer } from '@vben/common-ui';
+  import { $t } from '@vben/locales';
+  import { addFullName, cloneDeep } from '@vben/utils';
+  import { useVbenForm } from '#/adapter/form';
+  import { Description, useDescription } from '#/components/description';
+  import { viewSchema, type RowType } from './model';
+  import { View } from '#/api/system/sysNoticeUser';
+  const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+  });
+  const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+  });
+  async function handleOpenChange(open: boolean) {
+  if (!open) {
+  return null;
+  }
+  const { record } = drawerApi.getData() as { record: RowType };
+  const record2 = await View({ id: record.id });
+  setDescProps({ data: record2 }, true);
+  }
+</script>
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription"></Description>
+  </BasicDrawer>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/tenant/edit-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/tenant/edit-drawer.vue
new file mode 100644
index 0000000..d66daca
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/tenant/edit-drawer.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { addSysTenantApi, editSysTenantApi, getSysTenantViewApi } from '#/api/system/tenant';
+import { getSysTenantPackageListApi } from '#/api/system/tenant_package';
+import { drawerSchema } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+
+async function setupPackageSelect() {
+  const tenantPackageList = await getSysTenantPackageListApi({page:1,pageSize:1000});
+  const options = tenantPackageList.items.map((item: any) => ({
+    label: item.packageName,
+    value: item.packageId,
+  }));
+  formApi.updateSchema([
+    {
+      componentProps: {
+        optionFilterProp: 'label',
+        optionLabelProp: 'label',
+        options,
+        showSearch: true,
+      },
+      fieldName: 'packageId',
+    },
+  ]);
+}
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-3',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({confirmLoading:true,loading:true})
+    await setupPackageSelect();
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await getSysTenantViewApi({ id: Number(id) });
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({confirmLoading:false,loading:false})
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:true,
+        "only-read":true,
+      } } });
+    }else{
+      drawerApi.setState({ showConfirmButton: true});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:false,
+        "only-read":false,
+      }} });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({confirmLoading:true,loading:true})
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? editSysTenantApi (data) : addSysTenantApi(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({confirmLoading:false,loading:false})
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm>
+      <template #tip>
+        <div class="ml-7 w-full">
+          <Alert
+            message="私有桶使用自定义域名无法预览, 但可以正常上传/下载"
+            show-icon
+            type="warning"
+          />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/tenant/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/tenant/index.vue
new file mode 100644
index 0000000..6d96033
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/tenant/index.vue
@@ -0,0 +1,219 @@
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions,VxeGridListeners } from '#/adapter/vxe-table';
+import type { DeepPartial } from '@vben/types';
+import type { SysTenantListData } from '#/api/system/tenant';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+import { Button, message,Tag, Modal, Popconfirm,Switch } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { AccessControl, useAccess } from '@vben/access';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysTenantListApi, deleteSysTenantApi, statusSysTenantApi, syncmenuTenantApi } from '#/api/system/tenant';
+import {
+  MdiPlus,
+  MdiEdit,
+  MdiDelete,
+} from '@vben/icons';
+import { querySchema, columns, } from './model';
+import viewDrawer from './view-drawer.vue';
+import editDrawer from './edit-drawer.vue';
+
+const { hasAccessByCodes } = useAccess();
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'infoId',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysTenantListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+
+const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+});
+
+function handlePreview(record: SysTenantListData) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+}
+
+
+
+const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+});
+
+function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+}
+
+function handleEdit(row: SysTenantListData) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+}
+
+async function handleSync(row: SysTenantListData) {
+  console.log('syncmenuTenantApi', row);
+  try {
+    await syncmenuTenantApi({ tenantId: row.tenantId });
+    message.success('同步成功');
+  } catch (error) {
+    console.error(error);
+    message.error('同步失败');
+  }
+}
+
+async function handleDelete(row: SysTenantListData) {
+  if(row.id === 1) {
+    message.error("PC客户端不允许删除");
+    return;
+  }
+  await deleteSysTenantApi({ ids: [row.id] });
+  message.success("删除成功");
+  await handleRefresh();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+    if (row.id != 1) {
+      ids.push(row.id);
+    }else {
+      message.error("PC客户端不允许删除");
+      return;
+    }
+  }
+
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysTenantApi({ ids: ids });
+      message.success("删除成功");
+      await handleRefresh();
+    },
+  });
+}
+
+async function handleStatusChange(row: SysTenantListData) {
+  if(row.id === 1) {
+    message.error("PC客户端不允许禁用");
+    return;
+  }
+  await statusSysTenantApi({ id: row.id, status: row.status }); 
+  await message.success("操作成功")
+  await handleRefresh();
+}
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="租户列表">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:tenant:add'">新增</Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:system:tenant:remove'">删除</Button>
+      </template>
+      <template #status="{ row }">
+        <Switch
+          v-model:checked="row.status" :checkedValue="'0'" :unCheckedValue="'1'" :disabled="row.id === 1 || !hasAccessByCodes(['cpm:system:tenant:edit'])"
+          @change="handleStatusChange(row)"
+        />
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+	   <Button
+            class="mr-2 border-none p-0"
+            :block="false"
+            type="link"
+            @click="handleSync(row)"
+            v-access:code="'cpm:system:tenant:syncmenu'"
+            v-if="row.id != 1"
+            >同步菜单</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:system:tenant:query'">查看</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:system:tenant:edit'"    >修改</Button>
+          <AccessControl :codes="['cpm:system:tenant:remove']" type="code" >
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" v-if="row.id != 1" >  
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <ViewDrawer />
+    <EditDrawer @reload="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/tenant/model.tsx b/admin-ui/vue/apps/web-antd/src/views/system/tenant/model.tsx
new file mode 100644
index 0000000..474ee04
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/tenant/model.tsx
@@ -0,0 +1,302 @@
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+import { z } from '@vben/common-ui';
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+import { Tag } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { h } from 'vue';
+import {
+  renderDict,
+  renderDictTags,
+  renderHttpMethodTag,
+  renderJsonPreview,
+} from '#/utils/render';
+const defaultExpireTime = dayjs()
+  .add(365, 'days')
+  .startOf('day')
+  .format('YYYY-MM-DD HH:mm:ss');
+
+export const querySchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'tenantId',
+    label: '租户编号',
+  },
+  {
+    component: 'Input',
+    fieldName: 'companyName',
+    label: '租户名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'contactUserName',
+    label: '联系人',
+  },
+  {
+    component: 'Input',
+    fieldName: 'contactPhone',
+    label: '联系电话',
+  },
+];
+export const columns: VxeGridProps['columns'] = [
+  { align: 'left', type: 'checkbox', width: 45 },
+  {
+    title: '租户编号',
+    field: 'tenantId',
+  },
+  {
+    title: '租户名称',
+    field: 'companyName',
+  },
+  {
+    title: '联系人',
+    field: 'contactUserName',
+  },
+  {
+    title: '联系电话',
+    field: 'contactPhone',
+  },
+  {
+    title: '到期时间',
+    field: 'expireTime',
+    formatter: ({ cellValue }) => {
+      if (!cellValue) {
+        return '无期限';
+      }
+      return cellValue;
+    },
+  },
+  {
+    title: '租户状态',
+    field: 'status',
+    slots: { default: 'status' },
+  },
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+export const viewSchema: DescItem[] = [
+  { field: 'id', label: 'ID' },
+  { field: 'tenantId', label: '租户编号' },
+  { field: 'contactUserName', label: '联系人' },
+  { field: 'contactPhone', label: '联系电话' },
+  { field: 'companyName', label: '企业名称' },
+  { field: 'licenseNumber', label: '企业代码' },
+  { field: 'address', label: '企业地址' },
+  { field: 'intro', label: '企业介绍' },
+  { field: 'domain', label: '绑定域名' },
+  { field: 'remark', label: '备注' },
+  { field: 'packageId', label: '租户套餐' },
+  { field: 'expireTime', label: '过期时间' },
+  { field: 'accountCount', label: '用户数量' },
+  {
+    field: 'status',
+    label: '租户状态',
+    render(value, { status }) {
+      const operType = renderDict(status, DictEnum.SYS_NORMAL_DISABLE);
+      return (
+        <div class="flex items-center">
+          <Tag>{value}</Tag>
+          {operType}
+        </div>
+      );
+    },
+  },
+  { field: 'createdDept', label: '创建组织' },
+  { field: 'createdBy', label: '创建者' },
+  { field: 'createdAt', label: '创建时间' },
+  { field: 'updatedBy', label: '更新者' },
+  { field: 'updatedAt', label: '更新时间' },
+];
+
+export const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+    label: 'id',
+  },
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'tenantId',
+    label: 'tenantId',
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName: 'divider1',
+    hideLabel: true,
+    renderComponentContent: () => ({
+      default: () => '基本信息',
+    }),
+  },
+  {
+    component: 'Input',
+    fieldName: 'companyName',
+    label: '企业名称',rules: z.string()
+      .min(1, '企业名称不能为空')
+      .max(32, '企业名称最大长度32位'),
+  },
+  {
+    component: 'Input',
+    fieldName: 'contactUserName',
+    label: '联系人',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'contactPhone',
+    label: '联系电话',
+    rules: z
+      .string()
+      .regex(/^1[3-9]\d{9}$/, { message: '请输入正确的联系电话' }),
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName: 'divider2',
+    hideLabel: true,
+    renderComponentContent: () => ({
+      default: () => '管理员信息',
+    }),
+    dependencies: {
+      if: (values) => !values?.tenantId,
+      triggerFields: ['tenantId'],
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'username',
+    label: '用户账号',rules: z.string()
+      .min(1, '用户账号不能为空')
+      .max(32, '用户账号最大长度32位'),    dependencies: {
+      if: (values) => !values?.tenantId,
+      triggerFields: ['tenantId'],
+    },
+  },
+  {
+    component: 'InputPassword',
+    fieldName: 'password',
+    label: '用户密码',
+    rules: 'required',
+    dependencies: {
+      if: (values) => !values?.tenantId,
+      triggerFields: ['tenantId'],
+    },
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName: 'divider3',
+    hideLabel: true,
+    renderComponentContent: () => ({
+      default: () => '租户设置',
+    }),
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+    },
+    fieldName: 'packageId',
+    label: '租户套餐',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD HH:mm:ss',
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      getPopupContainer,
+    },
+    defaultValue: defaultExpireTime,
+    fieldName: 'expireTime',
+    help: `已经设置过期时间不允许重置为'无期限'\n即在开通时未设置无期限 以后都不允许设置`,
+    label: '过期时间',
+  },
+  {
+    component: 'InputNumber',
+    componentProps: {
+      min: -1,
+    },
+    defaultValue: -1,
+    fieldName: 'accountCount',
+    help: '-1不限制用户数量',
+    label: '用户数量',
+    renderComponentContent(model) {
+      return {
+        addonBefore: () =>
+          model.accountCount === -1 ? '不限制数量' : '输入数量',
+      };
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'domain',
+    help: '可填写域名/端口 填写域名如: www.test.com 或者 www.test.com:8080 填写ip:端口如: 127.0.0.1:8080',
+    label: '绑定域名',
+    renderComponentContent() {
+      return {
+        addonBefore: () => 'http(s)://',
+      };
+    },
+    rules: z
+      .string()
+      .refine(
+        (domain) =>
+          !(domain.startsWith('http://') || domain.startsWith('https://')),
+        { message: '请输入正确的域名, 不需要http(s)' },
+      )
+      .optional(),
+  },
+  {
+    component: 'Divider',
+    componentProps: {
+      orientation: 'center',
+    },
+    fieldName: 'divider4',
+    hideLabel: true,
+    renderComponentContent: () => ({
+      default: () => '企业信息',
+    }),
+  },
+  {
+    component: 'Input',
+    fieldName: 'address',
+    label: '企业地址',
+  },
+  {
+    component: 'Input',
+    fieldName: 'licenseNumber',
+    label: '企业代码',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'intro',
+    formItemClass: 'items-baseline',
+    label: '企业介绍',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-baseline',
+    label: '备注',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/tenant/view-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/tenant/view-drawer.vue
new file mode 100644
index 0000000..dad3468
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/tenant/view-drawer.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { SysTenantListData } from '#/api/system/tenant';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Description, useDescription } from '#/components/description';
+import { getSysTenantViewApi } from '#/api/system/tenant';
+import { viewSchema } from './model';
+
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+});
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = drawerApi.getData() as { record: SysTenantListData };
+  const record2 = await getSysTenantViewApi ({ id: Number(record.id) });
+  setDescProps({ data: record2 }, true);
+}
+
+</script>
+
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription">
+    </Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/edit-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/edit-drawer.vue
new file mode 100644
index 0000000..d53e026
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/edit-drawer.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import {
+  addSysTenantPackageApi,
+  editSysTenantPackageApi,
+  getSysTenantPackageViewApi,
+} from '#/api/system/tenant_package';
+import { drawerSchema } from './model';
+import MenuSelect from '../menu/menu-select.vue';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+const showMenuSelect = ref(false); // 菜单选择是否显示,控制加载顺序
+const menuIds = ref<number[]>([]);
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-3',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3 gap-x-4',
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      menuIds.value = [];
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { id, update, view } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+
+    if (isUpdate.value || isView.value) {
+      const record = await getSysTenantPackageViewApi({
+        packageId: Number(id),
+      });
+      menuIds.value = record.menuIds.split(',').map(Number);
+      await formApi.setValues(record);
+    }
+    showMenuSelect.value = true;
+    drawerApi.setState({ confirmLoading: false, loading: false });
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            'only-read': true,
+          },
+        },
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            'only-read': false,
+          },
+        },
+      });
+    }
+  },
+});
+const refMenuSelect = ref<InstanceType<typeof MenuSelect> | null>(null);
+async function handleConfirm() {
+  try {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    data.menuIds = refMenuSelect.value?.getData().join(',');
+    await (isUpdate.value
+      ? editSysTenantPackageApi(data)
+      : addSysTenantPackageApi(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  refMenuSelect.value?.clearData();
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm>
+      <template #menuIds="slotProps">
+        <div class="h-[600px] w-full">
+          <MenuSelect
+            ref="refMenuSelect"
+            :menu-ids="menuIds"
+            v-if="showMenuSelect"
+          />
+        </div>
+      </template>
+      <template #tip>
+        <div class="ml-7 w-full">
+          <Alert
+            message="私有桶使用自定义域名无法预览, 但可以正常上传/下载"
+            show-icon
+            type="warning"
+          />
+        </div>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/index.vue
new file mode 100644
index 0000000..408cfd0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/index.vue
@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions,VxeGridListeners  } from '#/adapter/vxe-table';
+import type { DeepPartial } from '@vben/types';
+import type { SysTenantPackageListData } from '#/api/system/tenant_package';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+import { Button, message,Tag, Popconfirm,Switch,Modal   } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { AccessControl, useAccess } from '@vben/access';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysTenantPackageListApi,deleteSysTenantPackageApi,statusSysTenantPackageApi } from '#/api/system/tenant_package';
+import {
+  MdiPlus,
+  MdiEdit,
+  MdiDelete,
+} from '@vben/icons';
+import { querySchema, columns, } from './model';
+import viewDrawer from './view-drawer.vue';
+import editDrawer from './edit-drawer.vue';
+const { hasAccessByCodes } = useAccess();
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  rowConfig: {
+    keyField: 'packageId',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysTenantPackageListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+
+const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+});
+
+function handlePreview(record: SysTenantPackageListData) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+}
+
+
+
+const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+});
+
+function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+}
+
+function handleEdit(row: SysTenantPackageListData) {
+  editDrawerApi.setData({ id: row.packageId, update: true, view: false });
+  editDrawerApi.open();
+}
+
+async function handleDelete(row: SysTenantPackageListData) {
+  await deleteSysTenantPackageApi({ packageIds: [row.packageId] });
+  message.success("删除成功");
+  await handleRefresh();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids: string[] = [];
+  for (const row of rows) {
+      ids.push(row.packageId);
+  }
+
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysTenantPackageApi({ packageIds: ids.map(Number) });
+      message.success("删除成功");
+      await handleRefresh();
+    },
+  });
+}
+
+async function handleStatusChange(row: SysTenantPackageListData) {
+
+  await statusSysTenantPackageApi({ packageId: row.packageId, status: row.status    }); 
+  await message.success("操作成功")
+  await handleRefresh();
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="租户套餐列表">
+      <template #toolbar-tools>
+        
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:system:tenantPackage:add'">新增</Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:system:tenantPackage:remove'">删除</Button>
+      </template>
+      <template #status="{ row }">
+        <Switch
+          v-model:checked="row.status" :checkedValue="'0'" :unCheckedValue="'1'" :disabled="!hasAccessByCodes(['cpm:system:tenantPackage:edit'])"
+          @change="handleStatusChange(row)"
+        />
+      </template>
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:system:tenantPackage:query'">查看</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:system:tenantPackage:edit'"  >修改</Button>
+          <AccessControl :codes="['cpm:system:tenantPackage:remove']" type="code">
+            <Popconfirm title="确定删除吗？"  :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >  
+              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <ViewDrawer />
+    <EditDrawer @reload="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/model.tsx b/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/model.tsx
new file mode 100644
index 0000000..f419099
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/model.tsx
@@ -0,0 +1,109 @@
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+import { z } from '@vben/common-ui';
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+import { Tag } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { h } from 'vue';
+import {
+  renderDict,
+  renderDictTags,
+  renderHttpMethodTag,
+  renderJsonPreview,
+} from '#/utils/render';
+const defaultExpireTime = dayjs()
+  .add(365, 'days')
+  .startOf('day')
+  .format('YYYY-MM-DD HH:mm:ss');
+
+export const querySchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'packageName',
+    label: '套餐名称',
+  },
+];
+export const columns: VxeGridProps['columns'] = [
+  { align: 'left',type: 'checkbox', width: 80 },
+    { align: 'left', field: 'packageId', title: 'ID',  width: 80 },
+  {
+    title: '套餐名称',
+    field: 'packageName',
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    title: '状态',
+    field: 'status',
+    slots: { default: 'status' },
+    width: 65,
+  },
+  { title: '操作', width: 120, slots: { default: 'action' } },
+];
+
+export const viewSchema: DescItem[] = [
+  { field: 'packageId', label: '套餐ID' },
+  { field: 'packageName', label: '套餐名称' },
+  { field: 'menuIds', label: '关联菜单' },
+  { field: 'remark', label: '备注' },
+  { field: 'menuCheckStrictly', label: '菜单树选择项是否关联显示' },
+  { field: 'status', label: '状态' ,
+    render(value, { status }) {
+      const operType = renderDict(status, DictEnum.SYS_NORMAL_DISABLE);
+      return (
+        <div class="flex items-center">
+          <Tag>{value}</Tag>
+          {operType}
+        </div>
+      );
+    },
+  },
+  { field: 'createdDept', label: '创建组织' },
+  { field: 'createdBy', label: '创建者' },
+  { field: 'createdAt', label: '创建时间' },
+  { field: 'updatedBy', label: '更新者' },
+  { field: 'updatedAt', label: '更新时间' },
+];
+
+export const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'packageId',
+  },
+  {
+    component: 'Radio',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'menuCheckStrictly',
+  },
+  {
+    component: 'Input',
+    fieldName: 'packageName',
+    label: '套餐名称',rules: z.string()
+      .min(1, '套餐名称不能为空')
+      .max(32, '套餐名称最大长度32位'),
+  },
+  {
+    component: 'menuIds',
+    defaultValue: [],
+    fieldName: 'menuIds',
+    label: '关联菜单',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-baseline',
+    label: '备注',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/view-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/view-drawer.vue
new file mode 100644
index 0000000..57ca11e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/tenantPackage/view-drawer.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { SysTenantListData } from '#/api/system/tenant';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Description, useDescription } from '#/components/description';
+import { getSysTenantPackageViewApi } from '#/api/system/tenant_package';
+import { viewSchema } from './model';
+
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+});
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = drawerApi.getData() as { record: SysTenantListData };
+  const record2 = await getSysTenantPackageViewApi ({ packageId: Number(record.packageId) });
+  console.log("这是请求接口调用时的record.packageId", record.packageId);
+  setDescProps({ data: record2 }, true);
+}
+
+</script>
+
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription">
+    </Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/user/index.vue b/admin-ui/vue/apps/web-antd/src/views/system/user/index.vue
new file mode 100644
index 0000000..f79860e
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/user/index.vue
@@ -0,0 +1,276 @@
+<!--
+ * @description 用户管理页面
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import type { DeepPartial } from '@vben/types';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { SysUserListData } from '#/api/system/user';
+import { deleteSysUser, updateSysUserStatus } from '#/api/system/user';
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
+
+import { Button, message, Switch, Modal, Popconfirm } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysUserListApi, updateSysUser } from '#/api/system';
+import DeptTree from '#/components/dept/dept-tree.vue';
+
+import {
+  MdiPlus,
+  MdiEdit,
+  MdiDelete,
+} from '@vben/icons';
+
+import userDrawer from './user-drawer.vue';
+import userResetPwdModal from './user-reset-pwd-modal.vue';
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const selectDeptId = ref<string[]>([]);
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: [
+    {
+      component: 'Input',
+      // defaultValue: '1',
+      fieldName: 'userName',
+      label: '用户名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickName',
+      label: '用户昵称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'email',
+      label: '邮箱',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          {
+            label: '正常',
+            value: '0',
+          },
+          {
+            label: '停用',
+            value: '1',
+          },
+        ],
+        placeholder: '请选择',
+      },
+      fieldName: 'status',
+      label: '状态',
+    },
+    {
+      component: 'RangePicker',
+      // defaultValue: [dayjs().subtract(7, 'days'), dayjs()],
+      fieldName: 'createdAt',
+      label: '创建时间',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat: "YYYY-MM-DD",
+      },
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+  handleReset: async () => {
+    selectDeptId.value = [];
+    await tableApi.formApi.resetForm();
+    await tableApi.reload();
+  },
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 40 },
+    { field: 'userId', title: 'ID' },
+    { field: 'userName', title: '用户名称' },
+    { field: 'nickName', title: '用户昵称' },
+    { field: 'deptInfo.deptName', title: '组织' },
+    { field: 'email', title: '邮箱' },
+    {
+      field: 'status',
+      slots: { default: 'open' },
+      title: '状态',
+      width: 100,
+    },
+    { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' },
+    { title: '操作', width: 180, slots: { default: 'action' } }
+  ],
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        let deptId: number = 0;
+        if (selectDeptId.value.length > 0) {
+          deptId = Number(selectDeptId.value[0]);
+        }
+
+        return await getSysUserListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          deptId: deptId,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+
+};
+
+const [Grid, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+const [UserDrawer, userDrawerApi] = useVbenDrawer({
+  connectedComponent: userDrawer,
+});
+
+function handleView(row: SysUserListData) {
+  const { userId } = row;
+  userDrawerApi.setData({ id: userId, update: false, view: true });
+  userDrawerApi.open();
+}
+
+function handleAdd() {
+  userDrawerApi.setData({ update: false, view: false });
+  userDrawerApi.open();
+}
+
+function handleEdit(row: SysUserListData) {
+  userDrawerApi.setData({ id: row.userId, update: true, view: false });
+  userDrawerApi.open();
+}
+
+async function handleDelete(row: SysUserListData) {
+  await deleteSysUser({ userId: row.userId });
+  message.success("删除成功");
+  await tableApi.query();
+}
+
+const CheckboxChecked = ref(false);
+
+function handleCheckboxChange() {
+  CheckboxChecked.value = tableApi.grid.getCheckboxRecords().length > 0;
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: SysUserListData) => row.userId);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysUser({ userIds: ids });
+      message.success("删除成功");
+      await tableApi.query();
+    },
+  });
+}
+
+const [UserResetPwdModal, userResetPwdModalApi] = useVbenModal({
+  connectedComponent: userResetPwdModal,
+});
+
+function handleResetPassword(row: SysUserListData) {
+  userResetPwdModalApi.setData({ record: row });
+  userResetPwdModalApi.open();
+}
+
+async function handleStatusChange(row: SysUserListData) {
+  await updateSysUserStatus({ userId: row.userId, status: row.status });
+  message.success('状态更新成功');
+  await tableApi.query();
+}
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full gap-[8px]">
+      <DeptTree class="w-[240px]" @select="() => tableApi.reload()" @reload="() => tableApi.reload()"
+        v-model:select-dept-id="selectDeptId" />
+
+      <Grid class="flex-1" table-title="用户列表">
+        <template #toolbar-tools>
+
+          <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd"
+            v-access:code="'cpm:system:user:add'">新增</Button>
+          <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)"
+            @click="handleMultiDelete" v-access:code="'cpm:system:user:remove'">删除</Button>
+        </template>
+        <template #open="{ row }">
+          <Switch v-model:checked="row.status" :checkedValue="'0'" :unCheckedValue="'1'"
+            @change="handleStatusChange(row)" :disabled="!hasAccessByCodes(['cpm:system:user:edit'])" />
+        </template>
+        <template #action="{ row }">
+          <div class="flex items-center">
+            <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleView(row)"
+              v-access:code="'cpm:system:user:query'">查看</Button>
+            <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)"
+              v-access:code="'cpm:system:user:edit'">修改</Button>
+            <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleResetPassword(row)"
+              v-access:code="'cpm:system:user:resetPwd'">重置密码</Button>
+            <AccessControl :codes="['cpm:system:user:remove']" type="code">
+              <Popconfirm placement="left" title="确定删除吗？" @confirm="handleDelete(row)">
+                <Button class="mr-2 border-none p-0" :block="false" type="link" v-if="row.userId != 1"
+                  danger>删除</Button>
+              </Popconfirm>
+            </AccessControl>
+          </div>
+        </template>
+      </Grid>
+    </div>
+    <UserDrawer @reload="tableApi.query()" />
+    <UserResetPwdModal />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/user/model.ts b/admin-ui/vue/apps/web-antd/src/views/system/user/model.ts
new file mode 100644
index 0000000..dd4b4cd
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/user/model.ts
@@ -0,0 +1,133 @@
+/**
+ * @description 用户管理模型定义
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+ */
+import type {
+  VbenFormSchema,
+} from '@vben/common-ui';
+import { z } from '@vben/common-ui';
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+
+
+export const drawerSchema: VbenFormSchema[] =  [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'userId',
+  },
+  {
+    component: 'Input',
+    fieldName: 'userName',
+    label: '用户账号',rules: z.string()
+      .min(1, '用户账号不能为空')
+      .max(32, '用户账号最大长度32位'),
+  },
+  // {
+  //   component: 'InputPassword',
+  //   fieldName: 'password',
+  //   label: '用户密码',
+  //   rules: 'required',
+  // },
+  {
+    component: 'Input',
+    fieldName: 'nickName',
+    label: '用户昵称',rules: z.string()
+      .min(1, '用户账号不能为空')
+      .max(32, '用户账号最大长度32位'),
+  },
+  {
+    component: 'TreeSelect',
+    // 在drawer里更新 这里不需要默认的componentProps
+    defaultValue: undefined,
+    fieldName: 'deptId',
+    label: '所属组织',
+    rules: 'selectRequired',
+  },
+  {
+    component: 'Input',
+    fieldName: 'phonenumber',
+    label: '手机号码',
+    defaultValue: undefined,
+    rules: z
+      .string()
+      .regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码')
+      .optional()
+      .or(z.literal('')),
+  },
+  {
+    component: 'Input',
+    fieldName: 'email',
+    defaultValue: undefined,
+    label: '邮箱',
+    /**
+     * z.literal 是 Zod 中的一种类型，用于定义一个特定的字面量值。
+     * 它可以用于确保输入的值与指定的字面量完全匹配。
+     * 例如，你可以使用 z.literal 来确保某个字段的值只能是特定的字符串、数字、布尔值等。
+     * 即空字符串也可通过校验
+     */
+    rules: z.string().email('请输入正确的邮箱').optional().or(z.literal('')),
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_USER_SEX),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'sex',
+    formItemClass: 'col-span-2 lg:col-span-1',
+    label: '性别',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'status',
+    formItemClass: 'col-span-2 lg:col-span-1',
+    label: '状态',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      mode: 'multiple',
+      optionFilterProp: 'label',
+      optionLabelProp: 'label',
+      placeholder: '请先选择组织',
+    },
+    fieldName: 'postIds',
+    help: '选择组织后, 将自动加载该组织下所有的岗位',
+    label: '岗位',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      getPopupContainer,
+      mode: 'multiple',
+      optionFilterProp: 'title',
+      optionLabelProp: 'title',
+    },
+    fieldName: 'roleIds',
+    label: '角色',
+  },
+  {
+    component: 'Textarea',
+    fieldName: 'remark',
+    formItemClass: 'items-baseline',
+    label: '备注',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/user/user-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/system/user/user-drawer.vue
new file mode 100644
index 0000000..44b0439
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/user/user-drawer.vue
@@ -0,0 +1,284 @@
+<!--
+ * @description 用户编辑抽屉组件
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script setup lang="ts">
+import type { SysRoleMini } from '#/api/system/role';
+import type {  SysUserViewModel,  } from '#/api/system/user';
+import type { SysPostMini } from '#/api/system/post';
+import { computed, h, onMounted, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep, getPopupContainer } from '@vben/utils';
+
+import { message, Tag } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getSysPostListApi } from '#/api/system/post';
+import { getSysDeptTreeApi } from '#/api/system/dept';
+import { getSysRoleListApi } from '#/api/system/role';
+import {
+  addSysUser,
+  getSysUser,
+  updateSysUser,
+  EmptySysUserViewModel,
+} from '#/api/system/user';
+import { authScopeOptions } from '#/views/system/role/model';
+
+import { drawerSchema } from './model';
+
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const isView = ref(false);
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 80,
+  },
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+/**
+ * 生成角色的自定义label
+ * 也可以用option插槽来做
+ * renderComponentContent: () => ({
+    option: ({value, label, [disabled, key, title]}) => '',
+  }),
+ */
+function genRoleOptionlabel(role: SysRoleMini) {
+  const found = authScopeOptions.find((item) => item.value === role.dataScope);
+  if (!found) {
+    return role.roleName;
+  }
+  return h('div', { class: 'flex items-center gap-[6px]' }, [
+    h('span', null, role.roleName),
+    h(Tag, { color: found.color }, () => found.label),
+  ]);
+}
+
+/**
+ * 岗位的加载
+ */
+async function setupPostOptions(deptId: number | string) {
+  const postListResp = await getSysPostListApi({ deptId: Number(deptId) });
+  let options: { label: string; value: number }[] = [];
+  if (postListResp.items){
+      options = postListResp.items?.map((item) => ({
+      label: item.postName,
+      value: item.postId,
+    })) ;
+  }
+  const placeholder = options.length > 0 ? '请选择' : '该组织下暂无岗位';
+  formApi.updateSchema([
+    {
+      componentProps: { options, placeholder },
+      fieldName: 'postIds',
+    },
+  ]);
+}
+
+/**
+ * 初始化组织选择
+ */
+async function setupDeptSelect() {
+  // updateSchema
+  const deptTree = await getSysDeptTreeApi({});
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  addFullName(deptTree.items, 'deptName', ' / ');
+  console.log('vue/apps/web-antd/src/views/system/user/user-drawer.vue setupDeptSelect',deptTree);
+  formApi.updateSchema([
+    {
+      componentProps: (formModel) => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'deptId',
+          value: 'deptId',
+          children: 'children',
+          label: 'deptName',
+        },
+        getPopupContainer,
+        async onSelect(deptId: number | string) {
+          /** 根据组织ID加载岗位 */
+          await setupPostOptions(deptId);
+          /** 变化后需要重新选择岗位 */
+          formModel.postIds = [];
+        },
+        placeholder: '请选择',
+        showSearch: true,
+        treeData: deptTree.items,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'deptId',
+    },
+  ]);
+}
+
+onMounted(async () => {
+
+});
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      // 需要重置岗位选择
+      formApi.updateSchema([
+        {
+          componentProps: { options: [], placeholder: '请先选择岗位' },
+          fieldName: 'postIds',
+        },
+      ]);
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true });
+
+    const { id, update, view } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    /** update时 禁用用户名修改 不显示密码框 */
+    formApi.updateSchema([
+      { componentProps: { disabled: isUpdate.value }, fieldName: 'userName' },
+      {
+        dependencies: { show: () => !isUpdate.value, triggerFields: ['id'] },
+        fieldName: 'password',
+      },
+    ]);
+    // 更新 && 赋值
+    let user: SysUserViewModel;
+    let postIds: number[] = [];
+    let roleIds: number[] = [];
+    let posts: SysPostMini[] = [];
+    let roles: SysRoleMini[] = [];
+    const roleListResp = await getSysRoleListApi({});
+      roles = roleListResp.items.map((item) => ({
+        ...item,
+        dataScope: item.dataScope.toString(),
+      }));
+
+    if(isUpdate.value || isView.value) {
+      user = await getSysUser({ userId: Number(id) });
+      postIds = user.posts?.map((item) => item.postId);
+      roleIds = user.roles?.map((item) => item.roleId);
+    } else {
+      user = EmptySysUserViewModel;
+    }
+    
+    
+
+    const postOptions = (posts ?? []).map((item) => ({
+      label: item.postName,
+      value: item.postId,
+    }));
+    formApi.updateSchema([
+      {
+        componentProps: {
+          // title用于选中后回填到输入框 默认为label
+          optionLabelProp: 'title',
+          options: roles.map((item) => ({
+            label: genRoleOptionlabel(item),
+            // title用于选中后回填到输入框 默认为label
+            title: item.roleName,
+            value: item.roleId,
+          })),
+        },
+        fieldName: 'roleIds',
+      },
+      {
+        componentProps: {
+          options: postOptions,
+        },
+        fieldName: 'postIds',
+      },
+    ]);
+    // 组织选择 && 初始密码
+    await Promise.all([setupDeptSelect()]);//, loadDefaultPassword(isUpdate.value)]);
+    if (user.userId > 0) {
+      await Promise.all([
+        // 添加基础信息
+        formApi.setValues(user),
+        // 添加角色和岗位
+        formApi.setFieldValue('postIds', postIds),
+        formApi.setFieldValue('roleIds', roleIds),
+        // 更新时不会触发onSelect 需要手动调用
+        setupPostOptions(Number(user.deptId)),
+      ]);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false });
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:true,
+        "only-read":true,
+      } } });
+    }else{
+      drawerApi.setState({ showConfirmButton: true});
+      formApi.setState({ commonConfig: { componentProps:{
+        readonly:false,
+        "only-read":false,
+      }} });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true });
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? updateSysUser(data) : addSysUser(data));
+    isUpdate.value ? message.success('更新成功'): message.success('新增成功');
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false });
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm />
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/system/user/user-reset-pwd-modal.vue b/admin-ui/vue/apps/web-antd/src/views/system/user/user-reset-pwd-modal.vue
new file mode 100644
index 0000000..cfcde2a
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/system/user/user-reset-pwd-modal.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { SysUserResetPasswordParam, SysUserListData } from '#/api/system/user';
+
+import { useVbenModal, z } from '@vben/common-ui';
+import { message } from 'ant-design-vue';
+import { useVbenForm } from '#/adapter/form';
+import { resetSysUserPassword } from '#/api/system/user';
+import { Description, useDescription } from '#/components/description';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const [BasicModal, modalApi] = useVbenModal({
+  onCancel: handleCancel,
+  onConfirm: handleSubmit,
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: [
+    {
+      field: 'userId',
+      label: '用户ID',
+    },
+    {
+      field: 'userName',
+      label: '用户名',
+    },
+    {
+      field: 'nickName',
+      label: '昵称',
+    },
+  ],
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'userId',
+      label: '用户ID',
+      rules: 'required',
+    },
+    {
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入新的密码, 密码长度为5 - 20',
+      },
+      fieldName: 'password',
+      label: '新的密码',
+      rules: z
+        .string()
+        .min(5, { message: '密码长度为5 - 20' })
+        .max(20, { message: '密码长度为5 - 20' }),
+    },
+  ],
+  showDefaultActions: false,
+  commonConfig: {
+    labelWidth: 80,
+  },
+});
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = modalApi.getData() as { record: SysUserListData };
+  setDescProps({ data: record }, true);
+  await formApi.setValues({ userId: record.userId });
+}
+
+async function handleSubmit() {
+  try {
+    modalApi.setState({confirmLoading: true, loading: true});
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = await formApi.getValues();
+    await resetSysUserPassword(data as SysUserResetPasswordParam);
+    emit('reload');
+    handleCancel();
+    message.success('密码重置成功');
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.setState({confirmLoading: false, loading: false});
+  }
+}
+
+async function handleCancel() {
+  modalApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :fullscreen-button="false"
+    title="重置密码"
+  >
+    <div class="flex flex-col gap-[12px]">
+      <Description @register="registerDescription" />
+      <BasicForm />
+    </div>
+  </BasicModal>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/tool/gen/components/EditMasterCell.vue b/admin-ui/vue/apps/web-antd/src/views/tool/gen/components/EditMasterCell.vue
new file mode 100644
index 0000000..bcde7de
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/tool/gen/components/EditMasterCell.vue
@@ -0,0 +1,684 @@
+<script lang="ts" setup>
+import { Table, Button, Input, type TableColumnsType, InputNumber, Space, Checkbox, Select, Cascader,Tree } from 'ant-design-vue';
+import { type PropType, ref, computed, h, onMounted } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import {
+    renderDict,
+    renderIcon,
+    renderTooltip,
+    renderDictTag,
+    renderDictTags,
+    renderHttpMethodTag,
+    renderJsonPreview,
+} from '#/utils/render';
+
+import { selectListObj, formGridColsOptions, formGridSpanOptions, genInfoObj, formatColumns } from '../model';
+import { getGenCodesColumnListApi } from '#/api/gen_codes/gen_table';
+import { useVbenModal } from '@vben/common-ui';
+
+const emit = defineEmits(['update:value']);
+
+function getFormGridSpanOptions(cols: number) {
+    if (cols < 1) {
+        cols = 1;
+    }
+    if (cols > 4) {
+        cols = 4;
+    }
+    for (let i = 0; i < formValue.value.masterColumns.length; i++) {
+        if (!formValue.value.masterColumns[i].formGridSpan) {
+            formValue.value.masterColumns[i].formGridSpan = 1;
+        }
+        if (formValue.value.masterColumns[i].formGridSpan > cols) {
+            formValue.value.masterColumns[i].formGridSpan = cols;
+        }
+    }
+    return formGridSpanOptions.slice(0, Math.min(cols, formGridSpanOptions.length));
+}
+function getFormModeOptions(type: string) {
+    const options = cloneDeep(selectListObj?.formMode ?? []);
+    if (options.length === 0) {
+        return [];
+    }
+    switch (type) {
+        case 'number':
+            for (let i = 0; i < options.length; i++) {
+                const allows = [
+                    'Input',
+                    'InputNumber',
+                    'Radio',
+                    'Select',
+                    'Switch',
+                    'Rate',
+                    'TreeSelect',
+                    'Cascader',
+                ];
+                if (!allows.includes(options?.[i]?.value as string)) {
+                    (options[i] as any).disabled = true;
+                }
+            }
+            break;
+        default:
+    }
+    options.sort((a: any, b: any) => (a.disabled === b.disabled ? 0 : a.disabled ? 1 : -1));
+    return options;
+}
+// 禁止编辑的字段，由系统维护
+function isEditDisabled(row: any) {
+    const disabledNames = [
+        'id',
+        'created_dept',
+        'created_by',
+        'updated_by',
+        'deleted_by',
+        'created_at',
+        'updated_at',
+        'deleted_at',
+    ];
+    if (disabledNames.includes(row.name)) {
+        return true;
+    }
+
+    if (formValue.value.genType == 11) {
+        const disabledTreeNames = ['pid', 'level', 'tree'];
+        if (disabledTreeNames.includes(row.name)) {
+            return true;
+        }
+    }
+    return false;
+}
+interface Props {
+value?: any;
+selectList: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    value: genInfoObj,
+    selectList: selectListObj,
+});
+
+// 主表字段
+const columnCollapse = ref(true);
+const columnsCollapseData = computed(() => {
+    return columnCollapse.value
+        ? [
+            {
+                title: '字段列名',
+                key: 'name',
+                width: 100,
+                dataIndex: 'name',  
+            },
+            {
+                title: '字段描述',
+                key: 'dc',
+                dataIndex: 'dc',
+                width: 100,
+                customRender({text,record}: any) {
+                    return h(Input, {
+                        class: 'w-[100px]',
+                        value: record.dc,
+                        onChange: function (e: any) {
+                            record.dc = e.target.value;
+                        },
+                    });
+                },
+            },
+        ]
+        : [
+            {
+                title: '字段列名',
+                key: 'name',
+                width: 100,
+                dataIndex: 'name',
+            },
+            {
+                title: '物理类型',
+                key: 'sqlType',
+                width: 80,
+                dataIndex: 'sqlType',
+            },
+            {
+                title: 'Go属性',
+                key: 'goName',
+                    width: 100,
+                dataIndex: 'goName',
+            },
+            {
+                title: 'Go类型',
+                key: 'goType',
+                width: 80,
+                dataIndex: 'goType',
+            },
+            {
+                title: 'Ts属性',
+                key: 'tsName',
+                width: 100,
+                dataIndex: 'tsName',
+            },
+            {
+                title: 'Ts类型',
+                key: 'tsType',
+                width: 80,
+                dataIndex: 'tsType',
+            },
+            {
+                title: '字段描述',
+                key: 'dc',
+                width: 100,
+                dataIndex: 'dc',
+                customRender({record}: any) {
+                    return h(Input, {
+                        value: record.dc,
+                        class: 'w-[100px]',
+                        onChange: function (e: any) {
+                            record.dc = e.target.value;
+                        },
+                    });
+                },
+            },
+        ];
+});
+
+const dataSource = ref([]);
+const show = ref(false);
+const formValue = computed({
+    get() {
+        return props.value;
+    },
+    set(value) {
+        emit('update:value', value);
+    },
+});
+
+const masterColumns = computed(() => {
+    return [
+    {
+        title: '',
+        key: 'id',
+        dataIndex: 'id',
+        width: 30,
+        customRender(opt: any) {
+            return opt.index + 1;
+        },
+    },
+    {
+        title(_column: any) {
+            return h('div', {
+                class: 'flex items-center font-bold justify-center',
+            }, [
+                renderTooltip(
+                    h(
+                        'span',
+                        {
+                            class: 'flex items-center font-bold',
+                        },
+                        [
+                            h('span', { class: 'mr-1' }, '字段'),
+                            renderIcon('ant-design:question-circle-outlined'),
+                        ],
+                    ),
+                    'Go类型和属性定义取决于你在/hack/config.yaml中的配置参数',
+                ),
+                h(
+                    Button,
+                    {
+                        strong: true,
+                        size: 'small',
+                        text: true,
+                        type: 'primary',
+                        style: { 'margin-left': '20px' },
+                        onClick: () => (columnCollapse.value = !columnCollapse.value),
+                    },
+                    { default: () => (columnCollapse.value ? '展开 >>' : '折叠 <<') },
+                ),
+            ]);
+        },
+        key: 'field',
+        align: 'center',
+        width: 800,
+        dataIndex: 'field',
+        children: columnsCollapseData.value,
+    },
+    {
+        width: 800,
+        title(_column: any) {
+            return h('div', {
+                class: 'flex items-center font-bold justify-center',
+            }, [
+                renderTooltip(
+                    h(
+                        'div',
+                        {
+                        class: 'flex items-center font-bold',
+                    },
+                    ['新增/编辑表单', renderIcon("ant-design:question-circle-outlined")]
+                ),
+                '勾选编辑以后会在新增、编辑表单中显示该字段;当同时勾选列表查询时，会优先使用配置的表单组件'
+                )
+            ]);
+        },
+        key: 'edit',
+        align: 'center',
+        dataIndex: 'edit',
+        children: [
+            {
+                align: 'center',
+                title: '编辑',
+                key: 'isEdit',
+                width: 30,
+                dataIndex: 'isEdit',
+                customRender({record}: any) {
+                    const disabled = isEditDisabled(record);
+                    const checkbox = h(Checkbox, {
+                        checked: record.isEdit,
+                        value: record.isEdit,
+                        disabled: disabled,
+                        onChange: function (e: any) {
+                            record.isEdit = e.target.checked;
+                        },
+                    });
+                    if (!disabled) {
+                        return checkbox;
+                    }
+                    return renderTooltip(checkbox, '该字段属性由系统维护，无需单独配置！');
+                },
+            },
+            {
+                title: '必填',
+                key: 'required',
+                width: 30,
+                align: 'center',
+                dataIndex: 'required',
+                customRender({record}: any) {
+                    return h(Checkbox, {
+                        defaultChecked: record.required,
+                        disabled: record.name === 'id',
+                        checked: record.required,
+                        onChange: function (e: any) {
+                            record.required = e.target.checked;
+                        },
+                    });
+                },
+            },
+            {
+                title: '唯一',
+                key: 'unique',
+                width: 30,
+                align: 'center',
+                dataIndex: 'unique',
+                customRender({record}: any) {
+                    return h(Checkbox, {
+                        defaultChecked: record.unique,
+                        disabled: record.name === 'id',
+                        checked: record.unique,
+                        onChange: function (e: any) {
+                            record.unique = e.target.checked;
+                        },
+                    });
+                },
+            },
+            {
+                title: '表单组件',
+                key: 'formMode',
+                width: 100,
+                minWidth: 100,
+                dataIndex: 'formMode',
+                align: 'center',
+                customRender({record}: any) {
+                    return h(Select, {
+                        consistentMenuWidth: false,
+                        class: 'w-[140px]',
+                        value: record.formMode,
+                        options: getFormModeOptions(record.tsType),
+                        defaultValue:'Input',
+                        onChange: function (e: any) {
+                            // console.log('vue/apps/web-antd/src/views/tool/gen/components/EditMasterCell.vue onChange',e);
+                            record.formMode = e;
+                        },
+                    });
+                },
+            },
+            {
+                title: '绑定字典',
+                key: 'dictType',
+                width: 100,
+                dataIndex: 'dictType',
+                align: 'center',
+                customRender({record}: any) {
+                    if (record.dictType == 0) {
+                        record.dictType = null;
+                    }
+                    return h(Cascader, {
+                        class: 'w-[120px]',
+                        placeholder: ' ',
+                        filterable: true,
+                        clearable: true,
+                        showPath: false,
+                        changeOnSelect: true,
+                        checkStrategy: 'child',
+                        disabled: record.name === 'id',
+                        value: record.dictType,
+                        options: selectListObj.dictMode ?? [],
+                        onChange: function (e: any) {
+                            record.dictType = e?.[0]|| '';
+                            console.log('vue/apps/web-antd/src/views/tool/gen/components/EditMasterCell.vue onChange',e,record.dictType);
+                        },
+                    });
+                },
+            },
+            {
+                title: '验证规则',
+                key: 'formRole',
+                width: 100,
+                dataIndex: 'formRole',
+                align: 'center',
+                customRender({record}: any) {
+                    return h(Select, {
+                        class: 'w-[120px]',
+                        consistentMenuWidth: false,
+                        value: record.formRole,
+                        disabled: record.name === 'id',
+                        options: selectListObj.formRole ?? [],
+                        onChange: function (e: any) {
+                            record.formRole = e;
+                        },
+                    });
+                },
+            },
+            {
+                align: 'center',
+                title(_column:any) {
+                    return h('div', {
+                        class: 'font-bold justify-center',
+                    }, [
+                        renderTooltip(
+                            h(
+                                'div',
+                                {
+                                    class: 'flex items-center font-bold justify-center',
+                                },
+                                ['栅格', renderIcon("ant-design:question-circle-outlined") ]
+                            ),
+                            '表单每行摆放组件的个数。响应式栅格，小屏幕自动转为每行摆放一个组件。'
+                        ),
+                        h(Select, {
+                            style: { width: '100px' },
+
+                            size: 'small',
+                            consistentMenuWidth: false,
+                            value: formValue.value.options.presetStep.formGridCols,
+                            options: formGridColsOptions,
+                            onChange: function (e: any) {
+                                formValue.value.options.presetStep.formGridCols = e;
+                            },
+                        }),
+                    ]);
+                },
+                key: 'formGridSpan',
+                width: 120,
+                dataIndex: 'formGridSpan',
+                customRender({record}: any) {
+                    return h(Select, {
+                        class: 'w-[120px]',
+                        consistentMenuWidth: false,
+                        disabled: record.name === 'id',
+                        value: record.formGridSpan,
+                        options: getFormGridSpanOptions(formValue.value.options.presetStep.formGridCols),
+                        onChange: function (e: any) {
+                            record.formGridSpan = e;
+                        },
+                    });
+                },
+            },
+        ],
+    },
+    {
+        width: 800,
+        title: '列表',
+        key: 'list',
+        align: 'center',
+        dataIndex: 'list',
+        children: [
+            {
+                title: '列表',
+                key: 'isList',
+                width: 30,
+                align: 'center',
+                dataIndex: 'isList',
+                customRender({record}: any) {
+                    return h(Checkbox, {
+                        defaultChecked: record.isList,
+                        checked: record.isList,
+                        onChange: function (e: any) {
+                            record.isList = e.target.checked;
+                        },
+                    });
+                },
+            },
+            {
+                title: '导出',
+                key: 'isExport',
+                width: 30,
+                align: 'center',
+                dataIndex: 'isExport',
+                customRender({record}: any) {
+                    return h(Checkbox, {
+                        defaultChecked: record.isExport,
+                        checked: record.isExport,
+                        onChange: function (e: any) {
+                            record.isExport = e.target.checked;
+                        },
+                    });
+                },
+            },
+            {
+                title: '查询',
+                key: 'isQuery',
+                width: 30,
+                align: 'center',
+                dataIndex: 'isQuery',
+                customRender({record}: any) {
+                    return h(Checkbox, {
+                        defaultChecked: record.isQuery,
+                        checked: record.isQuery,
+                        onChange: function (e: any) {
+                            record.isQuery = e.target.checked;
+                        },
+                    });
+                },
+            },
+            {
+                title: '查询条件',
+                align: 'center',
+                key: 'queryWhere',
+                width: 90,
+                dataIndex: 'queryWhere',
+                customRender({record}: any) {
+                    return h(Select, {
+                        class: 'w-[100px]',
+                        consistentMenuWidth: false,
+                        value: record.queryWhere,
+                        disabled: record.name === 'id',
+                        options: selectListObj.whereMode ?? [],
+                        onChange: function (e: any) {
+                            record.queryWhere = e;
+                        },
+                    });
+                },
+            },
+            {
+                title: '排列方式',
+                align: 'center',
+                key: 'align',
+                width: 80,
+                dataIndex: 'align',
+                customRender({record}: any) {
+                    return h(Select, {
+                        class: 'w-[80px]',
+                        consistentMenuWidth: false,
+                        value: record.align,
+                        options: selectListObj.tableAlign ?? [],
+                        onChange: function (e: any) {
+                            record.align = e;
+                        },
+                    });
+                },
+            },
+            {
+                title(_column:any) {
+                    return renderTooltip(
+                        h(
+                            'div',
+                            {
+                                class: 'flex items-center font-bold justify-center',
+                            },
+                            [ '列宽', renderIcon("ant-design:question-circle-outlined") ]
+                        ),
+                        '选填。设定固定值时表格生成自动计算scroll-x，未设定默认每列按100计算'
+                    );
+                },
+                key: 'width',
+                width: 80,
+                dataIndex: 'width',
+                customRender({record}: any) {
+                    return h(InputNumber, {
+                        class: 'w-[60px]',
+                        value: record.width,
+                        placeholder: ' ',
+                        min: -1,
+                        max: 2000,
+                        controls: false,
+                        onChange: function (e: any) {
+                            record.width = e.target.value;
+                        },
+                    });
+                },
+            },
+        ],
+    },
+]});
+onMounted(async () => {
+    if (formValue.value.masterColumns.length === 0) {
+        await reloadColumns();
+    }else {
+        dataSource.value = formValue.value.masterColumns;
+    }
+});
+
+// 重载字段属性
+async function reloadColumns() {
+    show.value = true;
+    dataSource.value = [];
+
+    getGenCodesColumnListApi({
+        dbGroup: formValue.value.dbName,
+        tableName: formValue.value.tableName,
+        isLink: 0,
+        alias: '',
+    })
+    .then((res) => {
+        formValue.value.masterColumns = formatColumns(res.items);
+        dataSource.value = formValue.value.masterColumns;
+        console.log('vue/apps/web-antd/src/views/tool/gen/components/EditMasterCell.vue formValue.value.masterColumns',formValue.value.masterColumns);
+    })
+    .finally(() => {
+        show.value = false;
+    });
+}
+function syncColumns() {
+    console.log('vue/apps/web-antd/src/views/tool/gen/components/EditMasterCell.vue syncColumns');
+    show.value = true;
+    dataSource.value = [];
+    getGenCodesColumnListApi({
+        dbGroup: formValue.value.dbName,
+        tableName: formValue.value.tableName,
+        isLink: 0,
+        alias: '',
+    })
+    .then((res) => {
+        const columns = formatColumns(res.items);
+        for (let i = 0; i < columns.length; i++) {
+          // 相同字段名称和类型，保留原字段属性
+          const index = formValue.value.masterColumns.findIndex(
+            (item: any) => item.name == columns[i].name && item.dataType == columns[i].dataType
+          );
+          if (index !== -1) {
+            columns[i] = formValue.value.masterColumns[index];
+          }
+        }
+        formValue.value.masterColumns = columns;
+        dataSource.value = formValue.value.masterColumns;
+    })
+    .finally(() => {
+        show.value = false;
+    });
+
+}
+
+const moveFieldTreeData = ref([]);
+
+const [MoveFieldModal, modalMoveFieldApi] = useVbenModal({
+    onConfirm: function () {
+        let tmp2 = [];
+        for (let i = 0; i < moveFieldTreeData.value.length; i++) {
+            const index = formValue.value.masterColumns.findIndex((item: any) => item.id == moveFieldTreeData.value[i].key);
+            if (index !== -1) {
+                tmp2.push(formValue.value.masterColumns[index]);
+            }
+        }
+        formValue.value.masterColumns = tmp2;
+        dataSource.value = formValue.value.masterColumns;
+        modalMoveFieldApi.close();
+    },
+});
+
+function onHandleMoveFieldButton( ) {
+    moveFieldTreeData.value = dataSource.value.map((item: any) => ({
+        title: item.name + ' - ' + item.dc,
+        key: item.id,
+        children: [],
+    }));
+    modalMoveFieldApi.open();
+}
+
+function onMoveFieldDrop(e: any) {
+    console.log('vue/apps/web-antd/src/views/tool/gen/components/EditMasterCell.vue onMoveFieldDrop', e);
+    const { dragNode, node, dropPosition,dragNodesKeys,dropToGap } = e;
+    const index = moveFieldTreeData.value.findIndex((item: any) => item.key == dragNode.key);
+    if (index !== -1 ) {
+        const temp = moveFieldTreeData.value[index];
+        moveFieldTreeData.value.splice(index, 1)
+        let dropPosition2 = dropPosition;
+        if (dropToGap) {
+            if (dropPosition2 < 0) {
+                dropPosition2 = 0;
+            }
+            if (index > dropPosition2) {
+                moveFieldTreeData.value.splice(dropPosition2, 0, temp);
+            } else {
+                moveFieldTreeData.value.splice(dropPosition2-1, 0, temp);
+            }
+        }else {
+            moveFieldTreeData.value.splice(dropPosition, 0, temp);
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <div class="flex flex-row gap-2">
+            <Button type="primary" @click="reloadColumns">重载字段</Button>
+            <Button type="primary" @click="syncColumns">同步字段</Button>
+            <Button type="primary" @click="onHandleMoveFieldButton">移动字段</Button>
+        </div>
+        <Table bordered :columns="masterColumns" :data-source="dataSource" :pagination="false" />
+    </div>
+    <MoveFieldModal
+    :fullscreen-button="false"
+    title="移动字段"
+    class="w-[400px]"
+  >
+  <Tree draggable  @drop="onMoveFieldDrop" :tree-data="moveFieldTreeData" />
+  </MoveFieldModal>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/tool/gen/components/EditSlaveCell.vue b/admin-ui/vue/apps/web-antd/src/views/tool/gen/components/EditSlaveCell.vue
new file mode 100644
index 0000000..427fa21
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/tool/gen/components/EditSlaveCell.vue
@@ -0,0 +1,481 @@
+<script lang="ts" setup>
+import { Table, Button, Input, type TableColumnsType, InputNumber, Space, Checkbox, Select, Cascader,Tree } from 'ant-design-vue';
+import { type PropType, ref, computed, h, onMounted } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import {
+    renderDict,
+    renderIcon,
+    renderTooltip,
+    renderDictTag,
+    renderDictTags,
+    renderHttpMethodTag,
+    renderJsonPreview,
+} from '#/utils/render';
+
+import { selectListObj, formGridColsOptions, formGridSpanOptions, genInfoObj, formatColumns } from '../model';
+import { getGenCodesColumnListApi } from '#/api/gen_codes/gen_table';
+import { useVbenModal } from '@vben/common-ui';
+
+const emit = defineEmits(['update:value']);
+
+function getFormModeOptions(type: string) {
+    const options = cloneDeep(selectListObj?.formMode ?? []);
+    if (options.length === 0) {
+        return [];
+    }
+    switch (type) {
+        case 'number':
+            for (let i = 0; i < options.length; i++) {
+                const allows = [
+                    'Input',
+                    'InputNumber',
+                    'Radio',
+                    'Select',
+                    'Switch',
+                    'Rate',
+                    'TreeSelect',
+                    'Cascader',
+                ];
+                if (!allows.includes(options?.[i]?.value as string)) {
+                    (options[i] as any).disabled = true;
+                }
+            }
+            break;
+        default:
+    }
+    options.sort((a: any, b: any) => (a.disabled === b.disabled ? 0 : a.disabled ? 1 : -1));
+    return options;
+}
+interface Props {
+value?: any;
+selectList: any;
+uuid: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    value: genInfoObj,
+    selectList: selectListObj,
+    uuid: '',
+});
+function getIndex() {
+    if (formValue.value.options.join.length === 0) {
+        return -1;
+    }
+    for (let i = 0; i < formValue.value.options.join.length; i++) {
+        if (formValue.value.options.join[i].uuid === props.uuid) {
+        return i;
+        }
+    }
+    return -1;
+}
+
+// 主表字段
+const columnCollapse = ref(true);
+const columnsCollapseData = computed(() => {
+    return columnCollapse.value
+        ? [
+            {
+                title: '字段列名',
+                key: 'name',
+                width: 100,
+                dataIndex: 'name',  
+                align: 'center',
+            },
+            {
+                title: '字段描述',
+                key: 'dc',
+                align: 'center',
+                dataIndex: 'dc',
+                width: 100,
+                customRender({text,record}: any) {
+                    return h(Input, {
+                        class: 'w-[100px]',
+                        value: record.dc,
+                        onChange: function (e: any) {
+                            record.dc = e.target.value;
+                        },
+                    });
+                },
+            },
+        ]
+        : [
+            {
+                title: '字段列名',
+                key: 'name',
+                width: 100,
+                dataIndex: 'name',
+                align: 'center',
+            },
+            {
+                title: '物理类型',
+                key: 'sqlType',
+                width: 80,
+                dataIndex: 'sqlType',
+                align: 'center',
+            },
+            {
+                title: 'Go属性',
+                key: 'goName',
+                width: 100,
+                dataIndex: 'goName',
+                align: 'center',
+            },
+            {
+                title: 'Go类型',
+                key: 'goType',
+                width: 80,
+                dataIndex: 'goType',
+                align: 'center',
+            },
+            {
+                title: 'Ts属性',
+                key: 'tsName',
+                width: 100,
+                dataIndex: 'tsName',
+                align: 'center',
+            },
+            {
+                title: 'Ts类型',
+                key: 'tsType',
+                width: 80,
+                dataIndex: 'tsType',
+                align: 'center',
+            },
+            {
+                title: '字段描述',
+                key: 'dc',
+                width: 100,
+                dataIndex: 'dc',
+                align: 'center',
+                customRender({record}: any) {
+                    return h(Input, {
+                        value: record.dc,
+                        class: 'w-[100px]',
+                        onChange: function (e: any) {
+                            record.dc = e.target.value;
+                        },
+                    });
+                },
+            },
+        ];
+});
+
+const dataSource = ref([]);
+const show = ref(false);
+const formValue = computed({
+    get() {
+        return props.value;
+    },
+    set(value) {
+        emit('update:value', value);
+    },
+});
+
+const slaveColumns = computed(() => {
+    return [
+    {
+        title: '',
+        key: 'id',
+        dataIndex: 'id',
+        width: 30,
+        align: 'center',
+        customRender(opt: any) {
+            return opt.index + 1;
+        },
+    },
+    {
+        title(_column: any) {
+            return h('div', {
+                class: 'flex items-center font-bold justify-center',
+            }, [
+                renderTooltip(
+                    h(
+                        'span',
+                        {
+                            class: 'flex items-center font-bold',
+                        },
+                        [
+                            h('span', { class: 'mr-1' }, '字段'),
+                            renderIcon('ant-design:question-circle-outlined'),
+                        ],
+                    ),
+                    'Go类型和属性定义取决于你在/hack/config.yaml中的配置参数',
+                ),
+                h(
+                    Button,
+                    {
+                        strong: true,
+                        size: 'small',
+                        text: true,
+                        type: 'primary',
+                        style: { 'margin-left': '20px' },
+                        onClick: () => (columnCollapse.value = !columnCollapse.value),
+                    },
+                    { default: () => (columnCollapse.value ? '展开 >>' : '折叠 <<') },
+                ),
+            ]);
+        },
+        key: 'field',
+        align: 'center',
+        width: 800,
+        dataIndex: 'field',
+        children: columnsCollapseData.value,
+    },
+    {
+        width: 800,
+        title: '列表',
+        key: 'list',
+        align: 'center',
+        dataIndex: 'list',
+        children: [
+            {
+                title: '列表',
+                key: 'isList',
+                width: 30,
+                align: 'center',
+                dataIndex: 'isList',
+                customRender({record}: any) {
+                    return h(Checkbox, {
+                        defaultChecked: record.isList,
+                        checked: record.isList,
+                        onChange: function (e: any) {
+                            record.isList = e.target.checked;
+                        },
+                    });
+                },
+            },
+            {
+                title: '导出',
+                key: 'isExport',
+                width: 30,
+                align: 'center',
+                dataIndex: 'isExport',
+                customRender({record}: any) {
+                    return h(Checkbox, {
+                        defaultChecked: record.isExport,
+                        checked: record.isExport,
+                        onChange: function (e: any) {
+                            record.isExport = e.target.checked;
+                        },
+                    });
+                },
+            },
+            {
+                title: '查询',
+                key: 'isQuery',
+                width: 30,
+                align: 'center',
+                dataIndex: 'isQuery',
+                customRender({record}: any) {
+                    return h(Checkbox, {
+                        defaultChecked: record.isQuery,
+                        checked: record.isQuery,
+                        onChange: function (e: any) {
+                            record.isQuery = e.target.checked;
+                        },
+                    });
+                },
+            },
+            {
+                title: '查询条件',
+                key: 'queryWhere',
+                width: 90,
+                align: 'center',
+                dataIndex: 'queryWhere',
+                customRender({record}: any) {
+                    return h(Select, {
+                        class: 'w-full',
+                        consistentMenuWidth: false,
+                        value: record.queryWhere,
+                        disabled: record.name === 'id',
+                        options: selectListObj.whereMode ?? [],
+                        onChange: function (e: any) {
+                            record.queryWhere = e.target.value;
+                        },
+                    });
+                },
+            },
+            {
+                title: '排列方式',
+                key: 'align',
+                width: 80,
+                align: 'center',
+                dataIndex: 'align',
+                customRender({record}: any) {
+                    return h(Select, {
+                        class: 'w-full',
+                        consistentMenuWidth: false,
+                        value: record.align,
+                        options: selectListObj.tableAlign ?? [],
+                        onChange: function (e: any) {
+                            record.align = e.target.value;
+                        },
+                    });
+                },
+            },
+            {
+                title(_column:any) {
+                    return renderTooltip(
+                        h(
+                            'div',
+                            {
+                                class: 'flex items-center font-bold justify-center',
+                            },
+                            ['列宽', renderIcon("ant-design:question-circle-outlined") ] 
+                        ),
+                        '选填。设定固定值时表格生成自动计算scroll-x，未设定默认每列按100计算'
+                    );
+                },
+                key: 'width',
+                width: 80,
+                align: 'center',
+                dataIndex: 'width',
+                customRender({record}: any) {
+                    return h(InputNumber, {
+                        class: 'w-full',
+                        value: record.width,
+                        placeholder: ' ',
+                        min: -1,
+                        max: 2000,
+                        controls: false,
+                        onChange: function (e: any) {
+                            record.width = e.target.value;
+                        },
+                    });
+                },
+            },
+        ],
+    },
+]});
+onMounted(async () => {
+    const index = getIndex();
+
+    // 已存在直接加载
+    if (index >= 0 && formValue.value.options.join[index].columns?.length > 0) {
+        dataSource.value = formValue.value.options.join[index].columns;
+        show.value = false;
+        return;
+    }
+    await reloadColumns(index);
+});
+
+// 重载字段属性
+async function reloadColumns(index: number) {
+    show.value = true;
+    dataSource.value = [];
+    const join = formValue.value.options.join[index];
+
+    getGenCodesColumnListApi({
+        dbGroup: formValue.value.dbName,
+        tableName: join.linkTable,
+        isLink: 1,
+        alias: join.alias,
+    })
+    .then((res) => {
+        join.columns = formatColumns(res.items);
+        dataSource.value = join.columns;
+        console.log('vue/apps/web-antd/src/views/tool/gen/components/EditSlaveCell.vue join.columns',join.columns);
+    })
+    .finally(() => {
+        show.value = false;
+    });
+}
+function syncColumns(index: number) {
+    console.log('vue/apps/web-antd/src/views/tool/gen/components/EditSlaveCell.vue syncColumns');
+    show.value = true;
+    dataSource.value = [];
+    const join = formValue.value.options.join[index];
+    getGenCodesColumnListApi({
+        dbGroup: formValue.value.dbName,
+        tableName: join.linkTable,
+        isLink: 1,
+        alias: join.alias,
+    })
+    .then((res) => {
+        const columns = formatColumns(res.items);
+        for (let i = 0; i < columns.length; i++) {
+          // 相同字段名称和类型，保留原字段属性
+          const index = join.columns.findIndex(
+            (item: any) => item.name == columns[i].name && item.dataType == columns[i].dataType
+          );
+          if (index !== -1) {
+            columns[i] = join.columns[index];
+          }
+        }
+        join.columns = columns;
+        dataSource.value = join.columns;
+    })
+    .finally(() => {
+        show.value = false;
+    });
+
+}
+
+const moveFieldTreeData = ref<any[]>([]);
+
+const [MoveFieldModal, modalMoveFieldApi] = useVbenModal({
+    onConfirm: function () {
+        const join = formValue.value.options.join[getIndex()];
+        let tmp2 = [];
+        for (let i = 0; i < moveFieldTreeData.value.length; i++) {
+            const index = join.columns.findIndex((item: any) => item.id == moveFieldTreeData.value[i].key);
+            if (index !== -1) {
+                tmp2.push(join.columns[index]);
+            }
+        }
+        join.columns = tmp2;
+        dataSource.value = join.columns;
+        modalMoveFieldApi.close();
+    },
+});
+
+function onHandleMoveFieldButton( ) {
+    moveFieldTreeData.value = dataSource.value.map((item: any) => ({
+        title: item.name + ' - ' + item.dc,
+        key: item.id,
+        children: [],
+    }));
+    modalMoveFieldApi.open();
+}
+
+function onMoveFieldDrop(e: any) {
+    console.log('vue/apps/web-antd/src/views/tool/gen/components/EditSlaveCell.vue onMoveFieldDrop', e);
+    const { dragNode, node, dropPosition,dragNodesKeys,dropToGap } = e;
+    const index = moveFieldTreeData.value.findIndex((item: any) => item.key == dragNode.key);
+    if (index !== -1 ) {
+        const temp = moveFieldTreeData.value[index];
+        moveFieldTreeData.value.splice(index, 1)
+        let dropPosition2 = dropPosition;
+        if (dropToGap) {
+            if (dropPosition2 < 0) {
+                dropPosition2 = 0;
+            }
+            if (index > dropPosition2) {
+                moveFieldTreeData.value.splice(dropPosition2, 0, temp);
+            } else {
+                moveFieldTreeData.value.splice(dropPosition2-1, 0, temp);
+            }
+        }else {
+            moveFieldTreeData.value.splice(dropPosition, 0, temp);
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <div class="flex flex-row gap-2">
+            <Button type="primary" @click="reloadColumns(getIndex())">重载字段</Button>
+            <Button type="primary" @click="syncColumns(getIndex())">同步字段</Button>
+            <Button type="primary" @click="onHandleMoveFieldButton">移动字段</Button>
+        </div>
+        <Table bordered :columns="slaveColumns" :data-source="dataSource" :pagination="false" />
+    </div>
+    <MoveFieldModal
+    :fullscreen-button="false"
+    title="移动字段"
+    class="w-[400px]"
+  >
+  <Tree draggable  @drop="onMoveFieldDrop" :tree-data="moveFieldTreeData" />
+  </MoveFieldModal>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/tool/gen/components/PreviewTab.vue b/admin-ui/vue/apps/web-antd/src/views/tool/gen/components/PreviewTab.vue
new file mode 100644
index 0000000..370b8d3
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/tool/gen/components/PreviewTab.vue
@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import {
+  computed,
+  ref,
+  defineExpose,
+  defineProps,
+  defineEmits,
+  withDefaults,
+  watch,
+} from 'vue';
+import { cloneDeep } from 'lodash-es';
+import { useVbenModal } from '@vben/common-ui';
+import {
+  Tabs,
+  TabPane,
+  Space,
+  Tag,
+  Button,
+  message,
+  Textarea,
+} from 'ant-design-vue';
+import { type GenCodesPreviewRes } from '#/api/gen_codes/gen_table';
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+import hljs from 'highlight.js/lib/core';
+import go from 'highlight.js/lib/languages/go';
+import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
+import sql from 'highlight.js/lib/languages/sql';
+
+import 'highlight.js/styles/atom-one-dark.css';
+import 'highlight.js/lib/common';
+import hljsVuePlugin from '@highlightjs/vue-plugin';
+
+hljs.registerLanguage('go', go);
+hljs.registerLanguage('ts', typescript);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('vue', xml);
+
+const highlight = hljsVuePlugin.component;
+
+const emit = defineEmits(['BuildPreview']);
+interface Props {
+  previewModel: GenCodesPreviewRes;
+  showModal: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  previewModel: cloneDeep({ views: {} } as any),
+  showModal: false,
+});
+
+watch(
+  () => props.showModal,
+  (showModal) => {
+    if (showModal) {
+      modalPerviewApi.open();
+    } else {
+      modalPerviewApi.close();
+    }
+  },
+);
+
+const content = ref('');
+const views = computed(() => {
+  let tmpViews: any = [];
+  let i = 0;
+  for (const [k, v] of Object.entries(props.previewModel.views)) {
+    let item = v as any;
+    item.name = k;
+    switch (item.meth) {
+      case 1:
+        item.tag = { type: 'success', label: '创建文件' };
+        break;
+      case 2:
+        item.tag = { type: 'warning', label: '覆盖文件' };
+        break;
+      case 3:
+        item.tag = { type: 'info', label: '已存在跳过' };
+        break;
+      case 4:
+        item.tag = { type: 'error', label: '不生成' };
+        break;
+      default:
+        item.tag = { type: 'error', label: '未知状态' };
+    }
+    tmpViews[i] = item;
+    i++;
+  }
+  return tmpViews;
+});
+
+function getFileExtension(path: string): string {
+  const parts = path.split('.');
+  if (parts.length > 1) {
+    return parts[parts.length - 1] as string;
+  }
+  return '';
+}
+
+function handleCopy(code: string) {
+  content.value = code;
+  setTimeout(function () {
+    const copyVal = document.getElementById('copy-code');
+    if (copyVal) {
+      copyVal.select();
+      document.execCommand('copy');
+      message.success('已复制');
+    }
+  }, 20);
+}
+
+const [ModalPerview, modalPerviewApi] = useVbenModal({
+  cancelText: '关闭',
+  confirmText: '生成代码',
+  onConfirm: function () {
+    if (hasAccessByCodes(['cpm:tool:gen:code'])) {
+      emit('BuildPreview', '');
+    } else {
+      message.warning('您没有生成代码的权限');
+    }
+    modalPerviewApi.close();
+  },
+  onCancel: function () {
+    modalPerviewApi.close();
+  },
+  onClosed: function () {
+    // props.showModal.value = false;
+  },
+});
+defineExpose({
+  open: () => {
+    modalPerviewApi.open();
+  },
+});
+</script>
+
+<template>
+  <ModalPerview :width="800" :height="600" class="h-[600px] w-[800px]">
+    <Tabs>
+      <TabPane
+        v-for="(view, index) in views"
+        :key="index"
+        :name="view.name"
+        :tab="view.name"
+        class="overflow-auto"
+      >
+        <Space class="flex">
+          <Tag :color="view.tag.type" :icon="view.tag.icon"
+            >{{ view.tag.label }} {{ view.path }}
+          </Tag>
+          <Button type="default" size="small" @click="handleCopy(view.code)"
+            >复制</Button
+          >
+        </Space>
+        <div>
+          <highlight
+            :class="'code-' + getFileExtension(view.path)"
+            :code="view.content"
+            :language="getFileExtension(view.path)"
+            show-line-numbers
+          />
+        </div>
+      </TabPane>
+    </Tabs>
+  </ModalPerview>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/tool/gen/develop.vue b/admin-ui/vue/apps/web-antd/src/views/tool/gen/develop.vue
new file mode 100644
index 0000000..8b1ad07
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/tool/gen/develop.vue
@@ -0,0 +1,380 @@
+<!--
+ * @description 代码生成
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+import { ref, defineAsyncComponent, onMounted, shallowRef, markRaw,h } from 'vue';
+import { message, Tabs, Card, Button, Space, Table, Modal, Spin } from 'ant-design-vue';
+import { useVbenForm } from '#/adapter/form';
+import { useRoute } from 'vue-router';
+import { isJsonString } from '#/utils/is';
+import EditMasterCell from './components/EditMasterCell.vue';
+import EditSlaveCell from './components/EditSlaveCell.vue';
+import { getSysGenTableViewApi, getGenCodesSelectsApi,type GenCodesPreviewRes, 
+  type SysGenTableOptionsModel, type SysGenTableJoinModel, getGenCodesTableSelectApi, editSysGenTableApi, 
+  postGenCodesPreviewApi, postGenCodesBuildApi, type SysGenTableViewRes } from '#/api/gen_codes/gen_table';
+import { getSysMenuListApi } from '#/api/system/menu';
+import { developBaseSchema, developJoinSchema, getSelectList, setSelectListObj, newState, genInfoObj } from './model';
+import { $t } from '@vben/locales';
+import { cloneDeep,merge } from 'lodash-es';
+import {
+  addFullName,
+  getPopupContainer,
+  listToTree,
+} from '@vben/utils';
+import PreviewTab from './components/PreviewTab.vue';
+
+const loading = ref(true);
+const route = useRoute();
+const tableId = ref(route.query.tableId);
+const genInfo = ref(newState(null));
+const previewModel = ref<GenCodesPreviewRes>({ views: {} });
+const showPreviewModal = ref(false);
+async function setupMenuSelect() {
+  const menuArray = await getSysMenuListApi();
+  menuArray.items.forEach((item) => {
+    item.menuName = $t(item.menuName);
+  });
+  const filteredList = menuArray.items.filter((item) => item.menuType !== 'F');
+  const menuTree = listToTree(filteredList, { id: 'menuId', pid: 'parentId' });
+  const fullMenuTree = [
+    {
+      menuId: 0,
+      menuName: $t('menu.root'),
+      children: menuTree,
+    },
+  ];
+  addFullName(fullMenuTree, 'menuName', ' / ');
+
+  baseFormApi.updateSchema([
+    {
+      componentProps: {
+        fieldNames: {
+          label: 'menuName',
+          value: 'menuId',
+        },
+        getPopupContainer,
+        // 设置弹窗滚动高度 默认256
+        listHeight: 300,
+        showSearch: true,
+        treeData: fullMenuTree,
+        treeDefaultExpandAll: false,
+        // 默认展开的树节点
+        treeDefaultExpandedKeys: [0],
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'menuName',
+        treeNodeLabelProp: 'fullName',
+      },
+      fieldName: 'options.menu.pid',
+    },
+  ]);
+}
+const loadSelectList = async () => {
+
+  const genTypeOptions = getSelectList('genType');
+  const genTypeValue = genTypeOptions?.[0]?.value;
+  const dbOptions = getSelectList('db');
+
+  baseFormApi.updateSchema([
+    {
+      componentProps: {
+        options: genTypeOptions,
+        defaultValue: genTypeValue,
+      },
+      fieldName: 'genType',
+    },
+    {
+      componentProps: {
+        options: dbOptions,
+      },
+      fieldName: 'dbName',
+    },
+    {
+      componentProps: {
+        options: [],
+      },
+      fieldName: 'tableName',
+    },
+  ]);
+  baseFormApi.setFieldValue('genType', genTypeValue);
+
+}
+
+
+async function getTableInfo() {
+  const res = await getSysGenTableViewApi({
+    tableId: parseInt(tableId.value as string),
+  });
+  // 导入生成选项
+  if (isJsonString(res.options)) {
+    res.options = JSON.parse(res.options as string);
+  }
+  if (!(res.options as SysGenTableOptionsModel).headOps) {
+    (res.options as SysGenTableOptionsModel).headOps = genInfoObj.options.headOps;
+  }
+  if (!(res.options as SysGenTableOptionsModel).columnOps) {
+    (res.options as SysGenTableOptionsModel).columnOps = genInfoObj.options.columnOps;
+  }
+  if (!(res.options as SysGenTableOptionsModel).autoOps) {
+    (res.options as SysGenTableOptionsModel).autoOps = genInfoObj.options.autoOps;
+  }
+  if (!(res.options as SysGenTableOptionsModel).join) {
+    (res.options as SysGenTableOptionsModel).join = genInfoObj.options.join;
+  }
+  if (!(res.options as SysGenTableOptionsModel).menu) {
+    (res.options as SysGenTableOptionsModel).menu = genInfoObj.options.menu;
+  }
+  if (!(res.options as SysGenTableOptionsModel).funcDict) {
+    (res.options as SysGenTableOptionsModel).funcDict = genInfoObj.options.funcDict;
+  }
+  
+  // 预设流程
+  if (!(res.options as SysGenTableOptionsModel).presetStep) {
+    (res.options as SysGenTableOptionsModel).presetStep = {
+      formGridCols: 1,
+    };
+  }
+  // 树表
+  if (!(res.options as SysGenTableOptionsModel).tree) {
+    (res.options as SysGenTableOptionsModel).tree = {
+      titleColumn: "",
+      styleType: 1,
+    };
+  }
+  genInfo.value = res;
+  baseFormApi.setValues(res);
+  console.log('vue/apps/web-antd/src/views/tool/gen/develop.vue getTableInfo', res);
+}
+
+const [BaseForm, baseFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'vertical',
+  schema: developBaseSchema,
+  wrapperClass: 'grid-cols-4 gap-x-4',
+  showDefaultActions: false,
+  handleValuesChange(values) {
+    if (values.dbName) {
+      joinFromList.value.forEach((item) => {
+        item.Api.setFieldValue('dbName', values.dbName);
+      });
+    }
+    if (values.tableName) {
+      joinFromList.value.forEach((item) => {
+        item.Api.setFieldValue('masterTableName', values.tableName);
+      });
+    }
+  }
+});
+
+interface JoinFormItem {
+  From: any;
+  Api: any;
+  uuid: string;
+  linkTable: string;
+}
+const uuidIndex = ref(1);
+const joinFromList = ref<JoinFormItem[]>([]);
+async function AddJoinForm(values: SysGenTableJoinModel) {
+  const [JoinForm, joinFormApi] = useVbenForm({
+    // 所有表单项共用，可单独在表单内覆盖
+    commonConfig: {
+      // 所有表单项
+      componentProps: {
+        class: 'w-full',
+      },
+    },
+    layout: 'vertical',
+    schema: developJoinSchema,
+    wrapperClass: 'grid-cols-10 gap-x-4',
+    showDefaultActions: false,
+    handleValuesChange: async (values) => {
+      console.log('vue/apps/web-antd/src/views/tool/gen/develop.vue handleValuesChange', values);
+      for (let j = 0; j < genInfo.value.options.join.length; j++) {
+        if (genInfo.value.options.join[j].uuid === values.uuid) {
+          if (genInfo.value.options.join[j].linkTable !== values.linkTable) {
+            genInfo.value.options.join[j].columns = [];
+          }
+          genInfo.value.options.join[j].linkTable = values.linkTable;
+          genInfo.value.options.join[j].alias = values.alias;
+          genInfo.value.options.join[j].linkMode = values.linkMode;
+          genInfo.value.options.join[j].field = values.field;
+          genInfo.value.options.join[j].masterField = values.masterField;
+          genInfo.value.options.join[j].daoName = values.daoName;
+        }
+      }
+
+      for (let i = 0; i < joinFromList.value.length; i++) {
+        if (joinFromList.value?.[i]?.uuid === values.uuid) {
+          if (joinFromList.value?.[i]?.linkTable !== values.linkTable) {
+            joinFromList.value[i].linkTable = values.linkTable;
+          }
+        }
+      }
+    }
+  });
+  let uuid = String(Date.now()*1000+uuidIndex.value);
+  uuidIndex.value++;
+  if (values.uuid) {
+    uuid = values.uuid;
+  }else {
+    values.uuid = uuid;
+    genInfo.value.options.join.push(values);
+  }
+
+  const baseValues = await baseFormApi.getValues();
+  values.dbName = baseValues.dbName;
+  values.masterTableName = baseValues.tableName;
+  joinFormApi.setValues(values);
+  joinFromList.value.push({
+    From: markRaw(JoinForm),
+    Api: joinFormApi,
+    uuid: uuid,
+    linkTable: values.linkTable,
+
+  });
+}
+function InitJoinForm() {
+  joinFromList.value = [];
+  if ((genInfo.value.options as SysGenTableOptionsModel)) {
+    const joinList = (genInfo.value.options as SysGenTableOptionsModel).join;
+    for (let i = 0; i < (joinList as SysGenTableJoinModel[]).length; i++) {
+      AddJoinForm(joinList?.[i] as SysGenTableJoinModel);
+    }
+  }
+}
+
+function handleAddJoin() {
+  AddJoinForm({} as SysGenTableJoinModel);
+}
+function handleDeleteJoin(index: number) {
+  joinFromList.value.splice(index, 1);
+}
+onMounted(async () => {
+  const res = await getGenCodesSelectsApi({});
+  await setSelectListObj(res);
+  await setupMenuSelect();
+  await loadSelectList();
+  await getTableInfo();
+  InitJoinForm();
+  loading.value = false;
+});
+
+async function packGenInfo() {
+  let baseValue = cloneDeep(await baseFormApi.getValues());
+  console.log('vue/apps/web-antd/src/views/tool/develop.vue packGenInfo', baseValue);
+  let tmp = cloneDeep(genInfo.value) as any;
+  Object.keys(baseValue).forEach((key) => {
+    if (key in tmp && key !== 'options') {
+      tmp[key] = baseValue[key];
+    }
+  });
+  tmp.options.autoOps = baseValue.options.autoOps;
+  tmp.options.columnOps = baseValue.options.columnOps;
+  tmp.options.headOps = baseValue.options.headOps;
+  tmp.options.menu = baseValue.options.menu;
+  tmp.options.tree = baseValue.options.tree;
+  return tmp;
+}
+
+async function handleSaveConfig() {
+  // console.log('vue/apps/web-antd/src/views/tool/gen/develop.vue baseFormApi', await baseFormApi.getValues());
+  // console.log('vue/apps/web-antd/src/views/tool/gen/develop.vue handleSaveConfig', await packGenInfo());
+  Modal.confirm({
+    content: `你确定要保存生成配置吗？`,
+    async onOk() {
+      const params = await packGenInfo();
+      console.log('vue/apps/web-antd/src/views/tool/gen/develop.vue handleSaveConfig', params);
+      await editSysGenTableApi(params).then(async (res) => {
+        message.success('保存成功');
+      });
+    },
+    title: '提示',
+    type: 'warning',
+  });
+}
+
+async function handlePreviewCode() {
+  showPreviewModal.value = false;
+  console.log('vue/apps/web-antd/src/views/tool/gen/develop.vue handlePreviewCode', genInfo.value);
+  previewModel.value = await postGenCodesPreviewApi(await packGenInfo());
+  showPreviewModal.value = true;
+} 
+
+async function handleBuildBtn() {
+  console.log('vue/apps/web-antd/src/views/tool/gen/develop.vue handleSubmit', genInfo.value);
+  const params = await packGenInfo();
+  
+  const autoOps = (params.options as SysGenTableOptionsModel).autoOps;
+  const index = autoOps?.findIndex((item: any) => item === 'forcedCover');
+  let content = '你确定要生成配置吗？';
+  if (index !== undefined && index >= 0) {
+    content = '你确定要强制覆盖生成配置吗？(强制覆盖后，将无法恢复原配置)';
+  }
+  Modal.confirm({
+    content: content,
+    async onOk() {
+      loading.value = true;
+      await postGenCodesBuildApi(params);
+      message.success('生成成功');
+      loading.value = false;
+    },
+    title: '提示',
+    type: 'warning',
+  });
+}
+async function handleBuildPreview(type: string) {
+  console.log('vue/apps/web-antd/src/views/tool/gen/develop.vue handleBuildPreview', type);
+  await handleBuildBtn();
+}
+
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div v-if="loading" class="z-[1000] absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[rgba(255,255,255,0.3)]">  
+      <Spin tip="加载中..." class="z-[2001]" />
+    </div>
+
+    <Card  >
+      <Tabs size="large"  >
+        <template #rightExtra>
+          <Space >
+            <Button type="primary" @click="handlePreviewCode" :disabled="loading"   :loading="loading" v-access:code="'cpm:tool:gen:preview'">预览代码</Button>
+            <Button class="bg-green-500" @click="handleBuildBtn" :disabled="loading" :loading="loading" v-access:code="'cpm:tool:gen:code'">提交生成</Button>
+            <Button type="dashed" @click="handleSaveConfig" :disabled="loading" :loading="loading" v-access:code="'cpm:tool:gen:edit'">仅保存配置</Button>
+          </Space>
+
+        </template>
+        <Tabs.TabPane tab="基本信息" key="1" >
+          <Card title="基本设置" >
+            <BaseForm />
+          </Card>
+          <Card title="关联表设置" class="mt-3">
+            <template #extra><Button type="primary" @click="handleAddJoin">添加关联表</Button></template>
+            <div v-for="(item, index) in joinFromList" :key="index" class="flex items-center gap-x-2">
+              <component :is="item.From" :key="index" class="m-0" />
+              <Button danger @click="handleDeleteJoin(index)">删除</Button>
+            </div>
+          </Card>
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="主表字段" key="2" class="overflow-auto">
+          <EditMasterCell  v-model:value="genInfo" :selectList="getSelectList" />
+        </Tabs.TabPane>
+        <Tabs.TabPane :tab="`关联字段-${item.linkTable}`"  class="overflow-auto" v-for="(item, _) in joinFromList" :key="item.uuid">
+          <EditSlaveCell  v-model:value="genInfo" :selectList="getSelectList" :uuid="item.uuid" />
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
+    <PreviewTab  :previewModel="previewModel" :showModal="showPreviewModal" @BuildPreview="handleBuildPreview" />
+  </Page>
+</template>
\ No newline at end of file
diff --git a/admin-ui/vue/apps/web-antd/src/views/tool/gen/edit-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/tool/gen/edit-drawer.vue
new file mode 100644
index 0000000..afc5c00
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/tool/gen/edit-drawer.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Alert } from 'ant-design-vue';
+import { addSysGenTableApi, getSysGenTableViewApi } from '#/api/gen_codes/gen_table';
+import { drawerSchema, getSelectList, setSelectListObj } from './model';
+
+const emit = defineEmits<{ reload: [] }>();
+interface ModalProps {
+  id?: number | string;
+  update: boolean;
+  view: boolean;
+}
+
+
+const isUpdate = ref(false);
+const isView = ref(false);
+
+const title = computed(() => {
+  if (isView.value) {
+    return $t('pages.common.view');
+  }
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-3',
+  },
+  layout: 'vertical',
+  schema: drawerSchema,
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3 gap-x-4',
+});
+
+const loadSelectList = () => {
+
+  const genTypeOptions = getSelectList('genType');
+  const genTypeValue = genTypeOptions?.[0]?.value;
+  const dbOptions = getSelectList('db');
+
+  formApi.updateSchema([
+    {
+      componentProps: {
+        options: genTypeOptions,
+        defaultValue: genTypeValue,
+      },
+      fieldName: 'genType',
+    },
+    {
+      componentProps: {
+        options: dbOptions,
+      },
+      fieldName: 'dbName',
+    },
+    {
+      componentProps: {
+        options: [],
+      },
+      fieldName: 'tableName',
+    },
+  ]);
+  formApi.setFieldValue('genType', genTypeValue);
+}
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    loadSelectList();
+    const { id, update, view, } = drawerApi.getData() as ModalProps;
+    isUpdate.value = update;
+    isView.value = view;
+    if (isUpdate.value || isView.value) {
+      const record = await getSysGenTableViewApi({ tableId: Number(id) });
+
+      await formApi.setValues(record);
+    }
+    drawerApi.setState({ confirmLoading: false, loading: false })
+
+    if (view) {
+      drawerApi.setState({ showConfirmButton: false });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: true,
+            "only-read": true,
+          }
+        }
+      });
+    } else {
+      drawerApi.setState({ showConfirmButton: true });
+      formApi.setState({
+        commonConfig: {
+          componentProps: {
+            readonly: false,
+            "only-read": false,
+          }
+        }
+      });
+    }
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.setState({ confirmLoading: true, loading: true })
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 这个用于提交
+    // formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
+    const data = cloneDeep(await formApi.getValues());
+    await (addSysGenTableApi(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.setState({ confirmLoading: false, loading: false })
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+
+</script>
+
+<template>
+  <BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
+    <BasicForm>
+    </BasicForm>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/tool/gen/index.vue b/admin-ui/vue/apps/web-antd/src/views/tool/gen/index.vue
new file mode 100644
index 0000000..d581789
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/tool/gen/index.vue
@@ -0,0 +1,193 @@
+<!--
+ * @description 代码生成
+ * @Link  https://github.com/xiujiecn/xiu-admin
+ * @Copyright  Copyright (c) 2025 LiXiujie
+ * @Author  Lxj <xxx@example.com>
+ * @License  https://github.com/xiujiecn/xiu-admin/blob/master/LICENSE
+ * @date 2024-03-21
+-->
+<script lang="ts" setup>
+import { h, ref, onMounted } from 'vue';
+import type { VbenFormProps } from '#/adapter/form';
+import type { VxeTableGridOptions, VxeGridListeners } from '#/adapter/vxe-table';
+import type { DeepPartial } from '@vben/types';
+import type { SysClient } from '#/api/system/client';
+
+import { getVxePopupContainer } from '@vben/utils';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Button, message, Tag, Modal, Popconfirm, Switch } from 'ant-design-vue';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSysGenTableListApi, deleteSysGenTableApi, getGenCodesSelectsApi } from '#/api/gen_codes/gen_table';
+import { MdiPlus, MdiDelete, } from '@vben/icons';
+import { useRouter } from 'vue-router';
+import { querySchema, columns, setSelectListObj } from './model';
+import viewDrawer from './view-drawer.vue';
+import editDrawer from './edit-drawer.vue';
+import { AccessControl, useAccess } from '@vben/access';
+const { hasAccessByCodes } = useAccess();
+
+interface RowType {
+  category: string;
+  color: string;
+  id: string;
+  price: string;
+  productName: string;
+  releaseDate: string;
+}
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  fieldMappingTime: [['date', ['start', 'end']]],
+  schema: querySchema,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};
+
+const gridOptions: VxeTableGridOptions<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: 'tableId',
+  },
+  rowConfig: {
+    keyField: 'tableId',
+  },
+  columns: columns,
+  exportConfig: {},
+  height: 'auto',
+  keepSource: true,
+  showOverflow: false,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues) => {
+        // message.success(`Query params: ${JSON.stringify(formValues)}`);
+        return await getSysGenTableListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+    zoom: true,
+  },
+};
+
+const gridEvents: DeepPartial<VxeGridListeners> = {
+  checkboxChange: handleCheckboxChange,
+  checkboxAll: handleCheckboxChange,
+};
+
+const CheckboxChecked = ref(false);
+function handleCheckboxChange() {
+  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+
+const [ViewDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: viewDrawer,
+});
+
+function handlePreview(record: SysClient) {
+  drawerApi.setData({ record });
+  drawerApi.open();
+}
+
+
+
+const [EditDrawer, editDrawerApi] = useVbenDrawer({
+  connectedComponent: editDrawer,
+});
+
+function handleAdd() {
+  editDrawerApi.setData({ update: false, view: false });
+  editDrawerApi.open();
+}
+
+function handleEdit(row: SysClient) {
+  editDrawerApi.setData({ id: row.id, update: true, view: false });
+  editDrawerApi.open();
+}
+
+async function handleDelete(row: any) {
+  await deleteSysGenTableApi({ tableIds: [row.tableId] });
+  message.success("删除成功");
+  await handleRefresh();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  const ids = rows.map((row) => row.tableId);
+
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deleteSysGenTableApi({ tableIds: ids });
+      message.success("删除成功");
+      await handleRefresh();
+    },
+  });
+}
+onMounted(async () => {
+  const res = await getGenCodesSelectsApi({});
+  setSelectListObj(res);
+
+});
+
+const router = useRouter();
+const handleClickDevelop = (tableId: number) => {
+  router.push(`/tool/gen-develop?tableId=${tableId}`);
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="代码生成">
+      <template #toolbar-tools>
+        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:tool:gen:import'">导入生成</Button>
+        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)"
+          @click="handleMultiDelete" v-access:code="'cpm:tool:gen:remove'">删除</Button>
+      </template>
+
+      <template #action="{ row }">
+        <div class="flex items-center">
+          <Button class="mr-2 border-none p-0" :block="false" type="link"
+            @click="handleClickDevelop(row.tableId)" v-access:code="'cpm:tool:gen:develop'">生成配置</Button>
+          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:tool:gen:query'">查看</Button>
+          <AccessControl :codes="['cpm:tool:gen:remove']" type="code">
+            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"
+              @confirm="handleDelete(row)" >
+              <Button class="mr-2 border-none p-0" :block="false" type="link" danger
+                v-access:code="'cpm:tool:gen:remove'">删除</Button>
+            </Popconfirm>
+          </AccessControl>
+        </div>
+      </template>
+    </Grid>
+    <ViewDrawer />
+    <EditDrawer @reload="handleRefresh" />
+  </Page>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/src/views/tool/gen/model.tsx b/admin-ui/vue/apps/web-antd/src/views/tool/gen/model.tsx
new file mode 100644
index 0000000..f15fff0
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/tool/gen/model.tsx
@@ -0,0 +1,811 @@
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { DescItem } from '#/components/description';
+import type {
+  GenCodesSelect,
+  DbTableSelectModel,
+} from '#/api/gen_codes/gen_table';
+import {
+  Button,
+  Input,
+  type TableColumnsType,
+  InputNumber,
+  Space,
+  Checkbox,
+  Select,
+  Cascader,
+} from 'ant-design-vue';
+import { cloneDeep } from 'lodash-es';
+import { isJsonString } from '#/utils/is';
+import { z } from '@vben/common-ui';
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
+import { getPopupContainer } from '@vben/utils';
+import { Tag } from 'ant-design-vue';
+import { h, defineEmits, ref, computed } from 'vue';
+
+import {
+  renderDict,
+  renderIcon,
+  renderTooltip,
+  renderDictTag,
+  renderDictTags,
+  renderHttpMethodTag,
+  renderJsonPreview,
+} from '#/utils/render';
+import { getGenCodesTableSelectApi, getGenCodesColumnSelectApi } from '#/api/gen_codes/gen_table';
+export let selectListObj: GenCodesSelect = {
+  genType: [],
+  db: [],
+  status: [],
+  linkMode: [],
+  buildMethod: [],
+  formMode: [],
+  formRole: [],
+  whereMode: [],
+  addons: [],
+  tableAlign: [],
+  treeStyleType: [],
+  dictMode: [],
+};
+export let tableListObj: DbTableSelectModel[] = [];
+
+export function getSelectList(key: keyof GenCodesSelect) {
+  return selectListObj[key];
+}
+export function setSelectList(key: keyof GenCodesSelect, value: any) {
+  selectListObj[key] = value;
+}
+
+export function setSelectListObj(value: GenCodesSelect) {
+  selectListObj = value;
+}
+// 格式化列字段
+export function formatColumns(columns: any) {
+  if (columns === undefined || columns.length === 0) {
+    columns = [];
+  }
+
+  if (isJsonString(columns)) {
+    columns = JSON.parse(columns);
+  }
+
+  if (columns.length > 0) {
+    for (let i = 0; i < columns.length; i++) {
+      if (!columns[i].formGridSpan) {
+        columns[i].formGridSpan = 1;
+      }
+      if (!columns[i].align) {
+        columns[i].align = 'left';
+      }
+      if (!columns[i].width || columns[i].width < 1) {
+        columns[i].width = null;
+      }
+    }
+  }
+  return columns;
+}
+
+
+export const genInfoObj = {
+  id: 0,
+  genType: 0,
+  genTemplate: null,
+  varName: '',
+  options: {
+    headOps: ['add', 'batchDel', 'export'],
+    columnOps: ['edit', 'del', 'view', 'status', 'check'],
+    autoOps: ['genMenuPermissions', 'runDao', 'runService'],
+    join: [],
+    menu: {
+      pid: 0,
+      icon: 'ant-design:home-twotone',
+      sort: 1,
+    },
+    tree: {
+      titleColumn: null,
+      styleType: 1,
+    },
+    funcDict: {
+      valueColumn: null,
+      labelColumn: null,
+    },
+    presetStep: {
+      formGridCols: 1,
+    },
+  },
+  dbName: '',
+  tableName: '',
+  tableComment: '',
+  daoName: '',
+  masterColumns: [],
+  addonName: null,
+  status: 2,
+  createdAt: '',
+  updatedAt: '',
+};  
+export function newState(state:any) {
+  if (state !== null) {
+    return cloneDeep(state);
+  }
+  return cloneDeep(genInfoObj);
+}
+
+export interface GenTypeOption {
+  color: string;
+  label: string;
+  value: string;
+}
+
+export const formGridColsOptions = [
+  {
+    value: 1,
+    label: '一行一列',
+  },
+  {
+    value: 2,
+    label: '一行两列',
+  },
+  {
+    value: 3,
+    label: '一行三列',
+  },
+  {
+    value: 4,
+    label: '一行四列',
+  },
+];
+
+export const formGridSpanOptions = [
+  {
+    value: 1,
+    label: '占一列位置',
+  },
+  {
+    value: 2,
+    label: '占两列位置',
+  },
+  {
+    value: 3,
+    label: '占三列位置',
+  },
+  {
+    value: 4,
+    label: '占四列位置',
+  },
+];
+
+export const querySchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'genType',
+    label: '生成类型',
+  },
+  {
+    component: 'Input',
+    fieldName: 'varName',
+    label: '实体命名',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      allowClear: true,
+      options: [
+        {
+          label: '生成成功',
+          value: '0',
+        },
+        {
+          label: '未开始',
+          value: '1',
+        },
+        {
+          label: '生成失败',
+          value: '2',
+        },
+      ],
+      placeholder: '请选择',
+    },
+    fieldName: 'status',
+    label: '状态',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { align: 'left', title: 'ID', type: 'checkbox', width: 80 },
+  { field: 'genType', title: '生成类型' },
+  { field: 'genTemplate', title: '生成模板' },
+  { field: 'varName', title: '实体命名' },
+  { field: 'tableComment', title: '生成名称' },
+  {
+    field: 'status',
+    title: '状态',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.status, DictEnum.SYS_GEN_STATUS);
+      },
+    },
+  },
+  { field: 'createdAt', formatter: 'formatDateTime', title: '创建时间' },
+  { title: '操作', width: 160, slots: { default: 'action' } },
+];
+
+export const viewSchema: DescItem[] = [
+  {
+    field: 'tableId',
+    label: 'ID',
+  },
+  {
+    field: 'genType',
+    label: '生成类型',
+    render(value) {
+      const operType = selectListObj.genType.find(
+        (item) => item.value === value,
+      )?.label;
+      return (
+        <div class="flex items-center">
+          <Tag>{operType}</Tag>
+        </div>
+      );
+    },
+  },
+  {
+    field: 'genTemplate',
+    label: '生成模板',
+    render(value, { genType }) {
+      const operType = selectListObj.genType
+        .find((item) => item.value === genType)
+        ?.templates.find((item) => item.value === value)?.label;
+      return (
+        <div class="flex items-center">
+          <Tag>{operType}</Tag>
+        </div>
+      );
+    },
+  },
+  {
+    field: 'varName',
+    label: '实体命名',
+  },
+  {
+    field: 'tableComment',
+    label: '生成名称',
+  },
+  {
+    field: 'dbName',
+    label: '数据库名称',
+  },
+  {
+    field: 'tableName',
+    label: '主表名称',
+  },
+  {
+    field: 'daoName',
+    label: '主表dao模型',
+  },
+  {
+    field: 'masterColumns',
+    label: '主表字段',
+  },
+  {
+    field: 'addonName',
+    label: '插件名称',
+  },
+  {
+    field: 'status',
+    label: '状态',
+    render(value, { status }) {
+      const operType = renderDict(status, DictEnum.SYS_GEN_STATUS);
+      return (
+        <div class="flex items-center">
+          <Tag>{value}</Tag>
+          {operType}
+        </div>
+      );
+    },
+  },
+  {
+    field: 'createdAt',
+    label: '创建时间',
+  },
+  {
+    field: 'createdBy',
+    label: '创建人',
+  },
+  {
+    field: 'updatedAt',
+    label: '更新时间',
+  },
+  {
+    field: 'updatedBy',
+    label: '更新人',
+  },
+];
+
+export const drawerSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'tableId',
+    label: 'ID',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: selectListObj.genType,
+      defaultValue: 0,
+    },
+    fieldName: 'genType',
+    label: '生成类型',
+  },
+  {
+    component: 'Select',
+    fieldName: 'dbName',
+    label: '数据库名称',
+    componentProps: {
+      options: selectListObj.db,
+      defaultValue: '',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'tableName',
+    label: '数据库表',
+    componentProps: {
+      options: tableListObj,
+      showSearch: true,
+    },
+    dependencies: {
+      async componentProps(values) {
+        if (values.dbName) {
+          const res = await getGenCodesTableSelectApi({
+            dbGroup: values.dbName,
+          });
+          tableListObj = res.items;
+        }
+        return {
+          options: tableListObj,
+        };
+      },
+      triggerFields: ['dbName'],
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'genTemplate',
+    label: '生成模板',
+    componentProps: {
+      options: [],
+    },
+    dependencies: {
+      async componentProps(values) {
+        if (values.genType !== undefined) {
+          const templates = selectListObj.genType.find(
+            (item) => item.value === values.genType,
+          )?.templates;
+          return {
+            options: templates,
+          };
+        }
+        return {
+          options: selectListObj.genType[0]?.templates || [],
+        };
+      },
+      triggerFields: ['genType', 'tableName', 'dbName'],
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'addons',
+    label: '选择插件',
+    componentProps: {
+      options: selectListObj.addons,
+    },
+    dependencies: {
+      show: (values) => {
+        return (
+          selectListObj.genType
+            .find((item) => item.value === values.genType)
+            ?.templates.find((item) => item.value === values.genTemplate)
+            ?.isAddon || false
+        );
+      },
+      triggerFields: ['genTemplate'],
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'tableComment',
+    label: '菜单名称',
+    dependencies: {
+      trigger: (values, formApi) => {
+        const tableComment = tableListObj.find(
+          (item) => item.value === values.tableName,
+        )?.defTableComment;
+        formApi.setFieldValue('tableComment', tableComment);
+      },
+      triggerFields: ['tableName'],
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'varName',
+    label: '实体命名',
+    dependencies: {
+      trigger: (values, formApi) => {
+        console.log(
+          'vue/apps/web-antd/src/views/tool/gen/model.tsx tableComment trigger ',
+          values,
+          formApi.values,
+        );
+        const varName = tableListObj.find(
+          (item) => item.value === values.tableName,
+        )?.defVarName;
+        formApi.setFieldValue('varName', varName);
+      },
+      triggerFields: ['tableName'],
+    },
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      class: 'hidden',
+      hideLabel: true,
+    },
+    dependencies: {
+      // show: () => false,
+      trigger: (values, formApi) => {
+        const daoName = tableListObj.find(
+          (item) => item.value === values.tableName,
+        )?.daoName;
+        formApi.setFieldValue('daoName', daoName);
+        console.log('vue/apps/web-antd/src/views/tool/gen/model.tsx daoName trigger ', daoName);
+      },
+      triggerFields: ['tableName'],
+    },
+    fieldName: 'daoName',
+    label: '',
+  },
+];
+
+export const developBaseSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'tableId',
+    label: 'ID',
+
+  },
+
+  {
+    component: 'Select',
+    componentProps: {
+      options: selectListObj.genType,
+      defaultValue: 0,
+    },
+    fieldName: 'genType',
+    label: '生成类型',
+  },
+  {
+    component: 'Input',
+    fieldName: 'varName',
+    label: '实体命名',
+  },
+  {
+    component: 'Select',
+    fieldName: 'dbName',
+    label: '数据库名称',
+    componentProps: {
+      options: selectListObj.db,
+      defaultValue: '',
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'tableName',
+    label: '数据库表',
+    componentProps: {
+      options: tableListObj,
+      showSearch: true,
+    },
+    dependencies: {
+      async componentProps(values) {
+        if (values.dbName) {
+          const res = await getGenCodesTableSelectApi({
+            dbGroup: values.dbName,
+          });
+          tableListObj = res.items;
+        }
+        return {
+          options: tableListObj,
+        };
+      },
+      triggerFields: ['dbName'],
+    },
+  },
+  {
+    component: 'CheckboxGroup',
+    componentProps: {
+      name: 'cname',
+      options: [
+        {
+          label: '新增表单按钮',
+          value: 'add',
+        },
+        {
+          label: '批量删除按钮',
+          value: 'batchDel',
+        },
+        {
+          label: '导出按钮',
+          value: 'export',
+        },
+      ],
+    },
+    fieldName: 'options.headOps',
+    label: '表格头部按钮组',
+    formItemClass: 'col-span-4',
+  },
+  {
+    component: 'CheckboxGroup',
+    componentProps: {
+      name: 'cname',
+      options: [
+        {
+          label: '编辑',
+          value: 'edit',
+        },
+        {
+          label: '状态修改',
+          value: 'status',
+        },
+        {
+          label: '删除',
+          value: 'del',
+        },
+        {
+          label: '详情页',
+          value: 'view',
+        },
+        {
+          label: '开启勾选列',
+          value: 'check',
+        },
+        {
+          label: '不过滤权限',
+          value: 'notFilterAuth',
+        },
+      ],
+    },
+    fieldName: 'options.columnOps',
+    label: '表格列操作',
+    formItemClass: 'col-span-4',
+  },
+  {
+    component: 'CheckboxGroup',
+    componentProps: {
+      name: 'cname',
+      options: [
+        {
+          label: '生成菜单权限',
+          value: 'genMenuPermissions',
+        },
+        {
+          label: '生成前运行 [gf gen dao]',
+          value: 'runDao',
+        },
+        {
+          label: '生成后运行 [gf gen service]',
+          value: 'runService',
+        },
+        {
+          label: '生成字典选项',
+          value: 'genFuncDict',
+        },
+        {
+          label: '新增修改模态框',
+          value: 'genEditModal',
+        },
+        {
+          label: '强制覆盖',
+          value: 'forcedCover',
+        },
+      ],
+    },
+    fieldName: 'options.autoOps',
+    label: '高级设置',
+    formItemClass: 'col-span-4',
+  },
+  {
+    component: 'TreeSelect',
+    defaultValue: 0,
+    fieldName: 'options.menu.pid',
+    label: '上级菜单',
+    rules: 'selectRequired',
+    formItemClass: 'col-span-2',
+  },
+
+  {
+    component: 'IconPicker',
+    dependencies: {
+      // 类型不为按钮时显示
+      show: (values) => values.menuType !== 'F',
+      triggerFields: ['menuType'],
+    },
+    fieldName: 'options.menu.icon',
+    help: '点击搜索图标跳转到iconify & 粘贴',
+    label: '菜单图标',
+    componentProps: {
+      placeholder: '请选择菜单图标',
+      class: 'w-[300px]',
+    },
+    formItemClass: 'col-span-2',
+  },
+  {
+    component: 'Input',
+    fieldName: 'tableComment',
+    label: '菜单名称',
+    rules: 'required',
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'options.menu.sort',
+    help: '排序, 数字越小越靠前',
+    label: '菜单排序',
+    rules: 'required',
+  },
+];
+export const developJoinSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'uuid',
+    label: 'uuid',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'dbName',
+    label: '数据库名称',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'masterTableName',
+    label: '主表名称',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      options: tableListObj,
+      defaultValue: 0,
+    },
+    fieldName: 'linkTable',
+    label: '关联表',
+    formItemClass: 'col-span-2',
+    dependencies: {
+      async componentProps(values) {
+        if (values.dbName) {
+          const res = await getGenCodesTableSelectApi({
+            dbGroup: values.dbName,
+          });
+          tableListObj = res.items;
+        }
+        return {
+          options: tableListObj,
+        };
+      },
+      triggerFields: ['dbName'],
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'alias',
+    label: '别名',
+    formItemClass: 'col-span-2',
+  },
+  {
+    component: 'Select',
+    fieldName: 'linkMode',
+    label: '关联方式',
+    formItemClass: 'col-span-2',
+    componentProps: {
+      options: selectListObj.linkMode, 
+    },
+    dependencies: {
+      async componentProps(values) {
+        return {
+          options: selectListObj.linkMode,
+        };
+      },  
+      triggerFields: ['dbName', 'linkTable'],
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'field',
+    label: '关联字段',
+    formItemClass: 'col-span-2',
+    componentProps: {
+      options:[]
+    },
+    dependencies: {
+      async componentProps(values) {
+        if (values.dbName && values.linkTable) {
+          const res = await getGenCodesColumnSelectApi({
+            dbGroup: values.dbName,
+            tableName: values.linkTable,
+          });
+          return {
+            options: res.items,
+          };
+        }
+        return {
+          options: [],
+        };
+      },
+      triggerFields: ['dbName', 'linkTable'],
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'masterField',
+    label: '主表关联字段',
+    formItemClass: 'col-span-2',
+    componentProps: {
+      // options: selectListObj.joinType,
+    },dependencies: {
+      async componentProps(values) {
+        if (values.dbName && values.masterTableName) {
+          const res = await getGenCodesColumnSelectApi({
+            dbGroup: values.dbName,
+            tableName: values.masterTableName,
+          });
+          return {
+            options: res.items,
+          };
+        }
+        return {
+          options: [],
+        };
+      },
+      triggerFields: ['dbName', 'masterTableName'],
+    },
+  },
+
+  {
+    component: 'Input',
+    componentProps: {
+    },
+    dependencies: {
+      // show: () => false,
+      trigger: (values, formApi) => {
+        const daoName = tableListObj.find(
+          (item) => item.value === values.linkTable,
+        )?.daoName;
+        if (daoName) {
+          formApi.setFieldValue('daoName', daoName);
+        }
+      },
+      triggerFields: ['linkTable'],
+    },
+    fieldName: 'daoName',
+    label: 'daoName',
+    formItemClass: ' hidden',
+  },
+];
diff --git a/admin-ui/vue/apps/web-antd/src/views/tool/gen/view-drawer.vue b/admin-ui/vue/apps/web-antd/src/views/tool/gen/view-drawer.vue
new file mode 100644
index 0000000..febfee6
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/src/views/tool/gen/view-drawer.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { SysGenTableListModel } from '#/api/gen_codes/gen_table';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { addFullName, cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { Description, useDescription } from '#/components/description';
+import { viewSchema } from './model';
+import { getSysGenTableViewApi } from '#/api/gen_codes/gen_table';
+
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onOpenChange: handleOpenChange,
+});
+
+const [registerDescription, { setDescProps }] = useDescription({
+  column: 1,
+  schema: viewSchema,
+});
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  const { record } = drawerApi.getData() as { record: SysGenTableListModel };
+  const record2 = await getSysGenTableViewApi ({ tableId: Number(record.tableId) });
+  setDescProps({ data: record2 }, true);
+}
+
+</script>
+
+<template>
+  <BasicDrawer :footer="false" class="w-[600px]" title="查看">
+    <Description @register="registerDescription">
+    </Description>
+  </BasicDrawer>
+</template>
diff --git a/admin-ui/vue/apps/web-antd/tailwind.config.mjs b/admin-ui/vue/apps/web-antd/tailwind.config.mjs
new file mode 100644
index 0000000..f17f556
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/tailwind.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';
diff --git a/admin-ui/vue/apps/web-antd/tsconfig.json b/admin-ui/vue/apps/web-antd/tsconfig.json
new file mode 100644
index 0000000..02c287f
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web-app.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "#/*": ["./src/*"]
+    }
+  },
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/admin-ui/vue/apps/web-antd/tsconfig.node.json b/admin-ui/vue/apps/web-antd/tsconfig.node.json
new file mode 100644
index 0000000..c4183b5
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "noEmit": false
+  },
+  "include": ["vite.config.mts", "plugins/**/*.ts"]
+}
diff --git a/admin-ui/vue/apps/web-antd/vite.config.mts b/admin-ui/vue/apps/web-antd/vite.config.mts
new file mode 100644
index 0000000..817e497
--- /dev/null
+++ b/admin-ui/vue/apps/web-antd/vite.config.mts
@@ -0,0 +1,54 @@
+import type { DefineConfig } from '@vben/vite-config/src/typing';
+
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from '@vben/vite-config';
+
+import { apiTypeGeneratorPlugin } from './plugins/api-type-generator';
+
+const config: DefineConfig = async () => {
+  const proxyTarget =
+    process.env.VITE_DEV_PROXY_TARGET || 'http://localhost:8008';
+
+  return {
+    application: {},
+    vite: {
+      plugins: [
+        // 生成API类型文件
+        apiTypeGeneratorPlugin({
+          apiRoot: fileURLToPath(new URL('src/api', import.meta.url)),
+        }) as any,
+      ],
+      server: {
+        allowedHosts: ['www.test.com'],
+        proxy: {
+          // 拉整个API文件
+          '/api.json': {
+            changeOrigin: true,
+            target: proxyTarget,
+            // target: 'http://iotlcm.example.com:8008', // 生产环境
+          },
+          // 正常API代理
+          '/api': {
+            changeOrigin: true,
+            rewrite: (path) => path.replace(/^\/api/, ''),
+            target: `${proxyTarget}/api/v1`,
+            // target: 'http://iotlcm.example.com:8008/api/v1', // 生产环境
+            ws: true,
+          },
+          // 文件上传代理
+          '/upload': {
+            changeOrigin: true,
+            rewrite: (path) => path.replace(/^\/upload/, ''),
+            target: `${proxyTarget}/upload`,
+            // target: 'http://iotlcm.example.com:8008/upload', // 生产环境
+            ws: true,
+          },
+        },
+      },
+    },
+  };
+};
+
+export default defineConfig(config) as import('vite').UserConfigExport;
diff --git a/admin-ui/vue/build/.dockerignore b/admin-ui/vue/build/.dockerignore
new file mode 100644
index 0000000..891b902
--- /dev/null
+++ b/admin-ui/vue/build/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+dist
+.git
+.gitignore
+README.md
+.env.local
+*.zip
\ No newline at end of file
diff --git a/admin-ui/vue/build/Dockerfile b/admin-ui/vue/build/Dockerfile
new file mode 100644
index 0000000..d58fafc
--- /dev/null
+++ b/admin-ui/vue/build/Dockerfile
@@ -0,0 +1,32 @@
+# 基础镜像仓库。默认使用 Docker Hub 官方镜像；内网环境可替换为自己的仓库：
+#   docker build --build-arg BASE_REGISTRY=harbor.example.com/library ...
+ARG BASE_REGISTRY=docker.io/library
+
+FROM ${BASE_REGISTRY}/node:24-alpine AS builder
+
+LABEL stage=gobuilder
+
+WORKDIR /build
+
+COPY . .
+
+WORKDIR /build/vue
+
+ENV COREPACK_NPM_REGISTRY=https://registry.npmmirror.com
+
+RUN npm config set registry https://registry.npmmirror.com/ && \
+    corepack enable && \
+    corepack prepare pnpm@10.22.0 --activate && \
+    pnpm config set registry https://registry.npmmirror.com/
+RUN CI=true pnpm install --frozen-lockfile
+RUN CI=true pnpm build
+
+FROM ${BASE_REGISTRY}/nginx:1.30-alpine AS alpine
+
+COPY --from=builder /build/vue/apps/web-antd/dist /usr/share/nginx/html
+COPY vue/build/nginx.conf /etc/nginx/conf.d/default.conf
+
+# 暴露80端口
+EXPOSE 80
+# 启动nginx
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/admin-ui/vue/build/DockerfileNoBuild b/admin-ui/vue/build/DockerfileNoBuild
new file mode 100644
index 0000000..6006856
--- /dev/null
+++ b/admin-ui/vue/build/DockerfileNoBuild
@@ -0,0 +1,13 @@
+# 基础镜像仓库。默认使用 Docker Hub 官方镜像；内网环境可替换为自己的仓库：
+#   docker build --build-arg BASE_REGISTRY=harbor.example.com/library ...
+ARG BASE_REGISTRY=docker.io/library
+
+FROM ${BASE_REGISTRY}/nginx:1.30-alpine AS alpine
+
+COPY vue/apps/web-antd/dist /usr/share/nginx/html
+COPY vue/build/nginx.conf /etc/nginx/conf.d/default.conf
+
+# 暴露80端口
+EXPOSE 80
+# 启动nginx
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/admin-ui/vue/build/nginx.conf b/admin-ui/vue/build/nginx.conf
new file mode 100644
index 0000000..2c10427
--- /dev/null
+++ b/admin-ui/vue/build/nginx.conf
@@ -0,0 +1,37 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    # root /data/app/iotlcmadmin-web-ui/dist;
+    index index.html;
+
+    charset utf-8;
+    client_max_body_size 200m;
+    access_log  /data/logs/nginx/access_iotlcmadminui.log;
+    error_log   /data/logs/nginx/error_iotlcmadminui.log;
+    # 解决history路由刷新404
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    location /api/ {
+        proxy_set_header Connection upgrade;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_http_version 1.1;
+        chunked_transfer_encoding off;
+        proxy_pass                 http://iotlcm-admin-svr:8008/api/v1/;
+        proxy_redirect             off;
+        proxy_set_header           Host             $host;
+        proxy_set_header           X-Real-IP        $remote_addr;
+        proxy_set_header           X-Forwarded-For  $proxy_add_x_forwarded_for;
+    }
+    # 开启gzip压缩
+    gzip on;
+    gzip_types text/plain application/javascript text/css application/json;
+
+    location /upload/ {
+        alias  /data/app/iotlcmadmin-web-svc/upload/;
+    }
+
+	location /app/upload/ {
+        alias  /data/app/iotlcmadmin-web-svc/upload/;
+    }
+}
diff --git a/admin-ui/vue/cspell.json b/admin-ui/vue/cspell.json
new file mode 100644
index 0000000..6b94b72
--- /dev/null
+++ b/admin-ui/vue/cspell.json
@@ -0,0 +1,70 @@
+{
+  "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
+  "version": "0.2",
+  "language": "en,en-US",
+  "allowCompoundWords": true,
+  "words": [
+    "acmr",
+    "antd",
+    "antdv",
+    "astro",
+    "brotli",
+    "clsx",
+    "defu",
+    "demi",
+    "echarts",
+    "ependencies",
+    "esno",
+    "etag",
+    "execa",
+    "iconify",
+    "iconoir",
+    "intlify",
+    "lockb",
+    "lucide",
+    "minh",
+    "minw",
+    "mkdist",
+    "mockjs",
+    "naiveui",
+    "nocheck",
+    "noopener",
+    "noreferrer",
+    "nprogress",
+    "nuxt",
+    "pinia",
+    "prefixs",
+    "publint",
+    "qrcode",
+    "reka",
+    "shadcn",
+    "sonner",
+    "sortablejs",
+    "styl",
+    "taze",
+    "tdesign",
+    "ui-kit",
+    "uicons",
+    "unplugin",
+    "unref",
+    "vben",
+    "vbenjs",
+    "vite",
+    "vitejs",
+    "vitepress",
+    "vnode",
+    "vueuse",
+    "yxxx"
+  ],
+  "ignorePaths": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "**/*-dist/**",
+    "**/icons/**",
+    "pnpm-lock.yaml",
+    "**/*.log",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/__tests__/**"
+  ]
+}
diff --git a/admin-ui/vue/eslint.config.mjs b/admin-ui/vue/eslint.config.mjs
new file mode 100644
index 0000000..b29b567
--- /dev/null
+++ b/admin-ui/vue/eslint.config.mjs
@@ -0,0 +1,5 @@
+// @ts-check
+
+import { defineConfig } from '@vben/eslint-config';
+
+export default defineConfig();
diff --git a/admin-ui/vue/folder-alias.json b/admin-ui/vue/folder-alias.json
new file mode 100644
index 0000000..c56f040
--- /dev/null
+++ b/admin-ui/vue/folder-alias.json
@@ -0,0 +1,200 @@
+{
+    "apps/web-antd/src/views/iotlcm": {
+        "description": "主入口"
+    },
+    "apps/web-antd/src/views/iotlcm/tCommunication": {
+        "description": "通讯管理"
+    },
+    "apps/web-antd/src/views/iotlcm/tPricingPackage": {
+        "description": "资费套餐管理"
+    },
+    "apps/web-antd/src/views/iotlcm/tLifeCycle": {
+        "description": "生命周期管理"
+    },
+    "apps/web-antd/src/views/iotlcm/tPricingPackage/tSimUpstreamPackage": {
+        "description": "上游套餐"
+    },
+    "apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPackageCategory": {
+        "description": "套餐分类"
+    },
+    "apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackagePrice": {
+        "description": "SIM流量套餐定价"
+    },
+    "apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPackageInfo": {
+        "description": "SIM流量套餐"
+    },
+    "apps/web-antd/src/views/iotlcm/tChannel": {
+        "description": "通道管理"
+    },
+    "apps/web-antd/src/views/iotlcm/tChannel/tSimChannels": {
+        "description": "通道管理"
+    },
+    "apps/web-antd/src/views/iotlcm/tChannel/tSimChannelTemplate": {
+        "description": "通道模板"
+    },
+    "apps/web-antd/src/views/iotlcm/tLifeCycle/tBatch": {
+        "description": "批次管理"
+    },
+    "apps/web-antd/src/views/iotlcm/tCommunication/tSimCardInfo": {
+        "description": "卡信息"
+    },
+    "apps/web-antd/src/views/another": {
+        "description": "不展示的目录"
+    },
+    "apps/web-antd/src/views/iotlcm/tApi": {
+        "description": "API集成"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard": {
+        "description": "首页"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard/index.vue": {
+        "description": "首页入口"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard/components": {
+        "description": "首页组件"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard/components/QuickNavigation.vue": {
+        "description": "快捷入口"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard/components/MyPanel.vue": {
+        "description": "我的面板"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard/components/LifecycleDistributionChart.vue": {
+        "description": "生命周期分布图"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard/components/BusinessUsageChart.vue": {
+        "description": "业务量使用情况图"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard/components/RecentFeeChart.vue": {
+        "description": "近6月费用情况图"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard/components/TrafficPoolChart.vue": {
+        "description": "流量池图"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard/components/TrafficShareChart.vue": {
+        "description": "流量共享图"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard/components/CardLocationDistributionChart.vue": {
+        "description": "物联卡位置分布图"
+    },
+    "apps/web-antd/src/views/iotlcm/tDashboard/components/BusinessAlarmPanel.vue": {
+        "description": "业务告警面板"
+    },
+    "apps/web-antd/src/views/iotlcm/tPricingPackage/tSimPool": {
+        "description": "流量池"
+    },
+    "apps/web-antd/src/views/iotlcm/zAnother": {
+        "description": "其他"
+    },
+    "apps/web-antd/src/views/iotlcm/zAnother/tAgentEnterprise": {
+        "description": "代理商企业"
+    },
+    "apps/web-antd/src/views/iotlcm/zAnother/tCustWithdrawAccount": {
+        "description": "提现账户"
+    },
+    "apps/web-antd/src/views/iotlcm/zAnother/tDivisionCode": {
+        "description": "行政区划"
+    },
+    "apps/web-antd/src/api/iotlcm": {
+        "description": "IOTLCM接口"
+    },
+    "apps/web-antd/src/api/iotlcm/tApi": {
+        "description": "API集成"
+    },
+    "apps/web-antd/src/api/iotlcm/tChannel": {
+        "description": "通道管理"
+    },
+    "apps/web-antd/src/api/iotlcm/tChannel/tSimChannels": {
+        "description": "通道管理"
+    },
+    "apps/web-antd/src/api/iotlcm/tChannel/tSimChannelTemplate": {
+        "description": "通道模板"
+    },
+    "apps/web-antd/src/api/iotlcm/tCommunication": {
+        "description": "通讯管理"
+    },
+    "apps/web-antd/src/api/iotlcm/tCommunication/tSimCardInfo": {
+        "description": "卡信息"
+    },
+    "apps/web-antd/src/api/iotlcm/tLifeCycle": {
+        "description": "生命周期管理"
+    },
+    "apps/web-antd/src/api/iotlcm/tLifeCycle/tBatch": {
+        "description": "批次管理"
+    },
+    "apps/web-antd/src/api/iotlcm/tPricingPackage": {
+        "description": "资费套餐管理"
+    },
+    "apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackageInfo": {
+        "description": "SIM流量套餐"
+    },
+    "apps/web-antd/src/api/iotlcm/tPricingPackage/tSimFlowPackagePrice": {
+        "description": "SIM流量套餐定价"
+    },
+    "apps/web-antd/src/api/iotlcm/tPricingPackage/tSimPackageCategory": {
+        "description": "套餐分类"
+    },
+    "apps/web-antd/src/api/iotlcm/tPricingPackage/tSimPool": {
+        "description": "流量池"
+    },
+    "apps/web-antd/src/api/iotlcm/tPricingPackage/tSimUpstreamPackage": {
+        "description": "上游套餐"
+    },
+    "apps/web-antd/src/api/iotlcm/zAnother": {
+        "description": "其他"
+    },
+    "apps/web-antd/src/api/iotlcm/zAnother/tAgentEnterprise": {
+        "description": "代理商企业"
+    },
+    "apps/web-antd/src/api/iotlcm/zAnother/tCustWithdrawAccount": {
+        "description": "提现账户"
+    },
+    "apps/web-antd/src/api/iotlcm/zAnother/tDivisionCode": {
+        "description": "行政区划"
+    },
+    "apps/web-antd/src/constants/BetterVben.ts": {
+        "description": "Vben通用配置"
+    },
+    "apps/web-antd/src/constants/DictEnum.ts": {
+        "description": "字典配置"
+    },
+    "apps/web-antd/src/constants/FormOption.ts": {
+        "description": "快捷表单"
+    },
+    "apps/web-antd/src/constants/RouterPath.ts": {
+        "description": "路由"
+    },
+    "apps/web-antd/src/views/iotlcm/tLifeCycle/tSimCardStock": {
+        "description": "出库管理"
+    },
+    "apps/web-antd/src/utils/HtCustom/QuickCopy.ts": {
+        "description": "快速复制"
+    },
+    "apps/web-antd/src/utils/HtCustom/QuickDownLoad.ts": {
+        "description": "快速下载"
+    },
+    "apps/web-antd/src/utils/HtCustom/SafeForm.ts": {
+        "description": "表单保护"
+    },
+    "apps/web-antd/src/utils/HtCustom/TabInit.ts": {
+        "description": "tab初始化"
+    },
+    "apps/web-antd/src/constants/BetterVben": {
+        "description": "Vben通用封装"
+    },
+    "apps/web-antd/src/api/iotlcm/tLifeCycle/tSimCardStock": {
+        "description": "库存卡信息表"
+    },
+    "apps/web-antd/src/views/iotlcm/tLifeCycle/tWarehousing": {
+        "description": "入库管理"
+    },
+    "apps/web-antd/src/template/iotlcm-crud-style": {
+        "description": "自动生成格式化"
+    },
+    "apps/web-antd/src/views/iotlcm/tPricingPackage/tSimFlowPool": {
+        "description": "流量池"
+    },
+    "apps/web-antd/src/views/iotlcm/tLifeCycle/tBatchExecutionLog": {
+        "description": "执行日志"
+    }
+}
\ No newline at end of file
diff --git a/admin-ui/vue/internal/lint-configs/commitlint-config/index.mjs b/admin-ui/vue/internal/lint-configs/commitlint-config/index.mjs
new file mode 100644
index 0000000..36c3b09
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/commitlint-config/index.mjs
@@ -0,0 +1,153 @@
+import { execSync } from 'node:child_process';
+
+import { getPackagesSync } from '@vben/node-utils';
+
+const { packages } = getPackagesSync();
+
+const allowedScopes = [
+  ...packages.map((pkg) => pkg.packageJson.name),
+  'project',
+  'style',
+  'lint',
+  'ci',
+  'dev',
+  'deploy',
+  'other',
+];
+
+// precomputed scope
+const scopeComplete = execSync('git status --porcelain || true')
+  .toString()
+  .trim()
+  .split('\n')
+  .find((r) => ~r.indexOf('M  src'))
+  ?.replaceAll(/(\/)/g, '%%')
+  ?.match(/src%%((\w|-)*)/)?.[1]
+  ?.replace(/s$/, '');
+
+/**
+ * @type {import('cz-git').UserConfig}
+ */
+const userConfig = {
+  extends: ['@commitlint/config-conventional'],
+  plugins: ['commitlint-plugin-function-rules'],
+  prompt: {
+    /** @use `pnpm commit :f` */
+    alias: {
+      b: 'build: bump dependencies',
+      c: 'chore: update config',
+      f: 'docs: fix typos',
+      r: 'docs: update README',
+      s: 'style: update code format',
+    },
+    allowCustomIssuePrefixs: false,
+    // scopes: [...scopes, 'mock'],
+    allowEmptyIssuePrefixs: false,
+    customScopesAlign: scopeComplete ? 'bottom' : 'top',
+    defaultScope: scopeComplete,
+    // English
+    typesAppend: [
+      { name: 'workflow: workflow improvements', value: 'workflow' },
+      { name: 'types:    type definition file changes', value: 'types' },
+    ],
+
+    // 中英文对照版
+    // messages: {
+    //   type: '选择你要提交的类型 :',
+    //   scope: '选择一个提交范围 (可选):',
+    //   customScope: '请输入自定义的提交范围 :',
+    //   subject: '填写简短精炼的变更描述 :\n',
+    //   body: '填写更加详细的变更描述 (可选)。使用 "|" 换行 :\n',
+    //   breaking: '列举非兼容性重大的变更 (可选)。使用 "|" 换行 :\n',
+    //   footerPrefixsSelect: '选择关联issue前缀 (可选):',
+    //   customFooterPrefixs: '输入自定义issue前缀 :',
+    //   footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
+    //   confirmCommit: '是否提交或修改commit ?',
+    // },
+    // types: [
+    //   { value: 'feat', name: 'feat:     新增功能' },
+    //   { value: 'fix', name: 'fix:      修复缺陷' },
+    //   { value: 'docs', name: 'docs:     文档变更' },
+    //   { value: 'style', name: 'style:    代码格式' },
+    //   { value: 'refactor', name: 'refactor: 代码重构' },
+    //   { value: 'perf', name: 'perf:     性能优化' },
+    //   { value: 'test', name: 'test:     添加疏漏测试或已有测试改动' },
+    //   { value: 'build', name: 'build:    构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)' },
+    //   { value: 'ci', name: 'ci:       修改 CI 配置、脚本' },
+    //   { value: 'revert', name: 'revert:   回滚 commit' },
+    //   { value: 'chore', name: 'chore:    对构建过程或辅助工具和库的更改 (不影响源文件、测试用例)' },
+    //   { value: 'wip', name: 'wip:      正在开发中' },
+    //   { value: 'workflow', name: 'workflow: 工作流程改进' },
+    //   { value: 'types', name: 'types:    类型定义文件修改' },
+    // ],
+    // emptyScopesAlias: 'empty:      不填写',
+    // customScopesAlias: 'custom:     自定义',
+  },
+  rules: {
+    /**
+     * type[scope]: [function] description
+     *
+     * ^^^^^^^^^^^^^^ empty line.
+     * - Something here
+     */
+    'body-leading-blank': [2, 'always'],
+    /**
+     * type[scope]: [function] description
+     *
+     * - something here
+     *
+     * ^^^^^^^^^^^^^^
+     */
+    'footer-leading-blank': [1, 'always'],
+    /**
+     * type[scope]: [function] description
+     *      ^^^^^
+     */
+    'function-rules/scope-enum': [
+      2, // level: error
+      'always',
+      (parsed) => {
+        if (!parsed.scope || allowedScopes.includes(parsed.scope)) {
+          return [true];
+        }
+
+        return [false, `scope must be one of ${allowedScopes.join(', ')}`];
+      },
+    ],
+    /**
+     * type[scope]: [function] description [No more than 108 characters]
+     *      ^^^^^
+     */
+    'header-max-length': [2, 'always', 108],
+
+    'scope-enum': [0],
+    'subject-case': [0],
+    'subject-empty': [2, 'never'],
+    'type-empty': [2, 'never'],
+    /**
+     * type[scope]: [function] description
+     * ^^^^
+     */
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'perf',
+        'style',
+        'docs',
+        'test',
+        'refactor',
+        'build',
+        'ci',
+        'chore',
+        'revert',
+        'types',
+        'release',
+      ],
+    ],
+  },
+};
+
+export default userConfig;
diff --git a/admin-ui/vue/internal/lint-configs/commitlint-config/package.json b/admin-ui/vue/internal/lint-configs/commitlint-config/package.json
new file mode 100644
index 0000000..0c3a3aa
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/commitlint-config/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@vben/commitlint-config",
+  "version": "5.5.9",
+  "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/lint-configs/commitlint-config"
+  },
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "default": "./index.mjs"
+    }
+  },
+  "dependencies": {
+    "@commitlint/cli": "catalog:",
+    "@commitlint/config-conventional": "catalog:",
+    "@vben/node-utils": "workspace:*",
+    "commitlint-plugin-function-rules": "catalog:",
+    "cz-git": "catalog:",
+    "czg": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/build.config.ts b/admin-ui/vue/internal/lint-configs/eslint-config/build.config.ts
new file mode 100644
index 0000000..97e572c
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/package.json b/admin-ui/vue/internal/lint-configs/eslint-config/package.json
new file mode 100644
index 0000000..12556ec
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@vben/eslint-config",
+  "version": "5.0.0",
+  "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/lint-configs/eslint-config"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "stub": "pnpm unbuild --stub"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "dependencies": {
+    "eslint-config-turbo": "catalog:",
+    "eslint-plugin-command": "catalog:",
+    "eslint-plugin-import-x": "catalog:"
+  },
+  "devDependencies": {
+    "@eslint/js": "catalog:",
+    "@types/eslint": "catalog:",
+    "@typescript-eslint/eslint-plugin": "catalog:",
+    "@typescript-eslint/parser": "catalog:",
+    "eslint": "catalog:",
+    "eslint-plugin-eslint-comments": "catalog:",
+    "eslint-plugin-jsdoc": "catalog:",
+    "eslint-plugin-jsonc": "catalog:",
+    "eslint-plugin-n": "catalog:",
+    "eslint-plugin-no-only-tests": "catalog:",
+    "eslint-plugin-perfectionist": "catalog:",
+    "eslint-plugin-prettier": "catalog:",
+    "eslint-plugin-regexp": "catalog:",
+    "eslint-plugin-unicorn": "catalog:",
+    "eslint-plugin-unused-imports": "catalog:",
+    "eslint-plugin-vitest": "catalog:",
+    "eslint-plugin-vue": "catalog:",
+    "globals": "catalog:",
+    "jsonc-eslint-parser": "catalog:",
+    "vue-eslint-parser": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/command.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/command.ts
new file mode 100644
index 0000000..d0c902d
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/command.ts
@@ -0,0 +1,9 @@
+import createCommand from 'eslint-plugin-command/config';
+
+export async function command() {
+  return [
+    {
+      ...createCommand(),
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/comments.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/comments.ts
new file mode 100644
index 0000000..77ccd5d
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/comments.ts
@@ -0,0 +1,24 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function comments(): Promise<Linter.Config[]> {
+  const [pluginComments] = await Promise.all([
+    // @ts-expect-error - no types
+    interopDefault(import('eslint-plugin-eslint-comments')),
+  ] as const);
+
+  return [
+    {
+      plugins: {
+        'eslint-comments': pluginComments,
+      },
+      rules: {
+        'eslint-comments/no-aggregating-enable': 'error',
+        'eslint-comments/no-duplicate-disable': 'error',
+        'eslint-comments/no-unlimited-disable': 'error',
+        'eslint-comments/no-unused-enable': 'error',
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/disableds.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/disableds.ts
new file mode 100644
index 0000000..152b84c
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/disableds.ts
@@ -0,0 +1,28 @@
+import type { Linter } from 'eslint';
+
+export async function disableds(): Promise<Linter.Config[]> {
+  return [
+    {
+      files: ['**/__tests__/**/*.?([cm])[jt]s?(x)'],
+      name: 'disables/test',
+      rules: {
+        '@typescript-eslint/ban-ts-comment': 'off',
+        'no-console': 'off',
+      },
+    },
+    {
+      files: ['**/*.d.ts'],
+      name: 'disables/dts',
+      rules: {
+        '@typescript-eslint/triple-slash-reference': 'off',
+      },
+    },
+    {
+      files: ['**/*.js', '**/*.mjs', '**/*.cjs'],
+      name: 'disables/js',
+      rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/ignores.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/ignores.ts
new file mode 100644
index 0000000..136c956
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/ignores.ts
@@ -0,0 +1,52 @@
+import type { Linter } from 'eslint';
+
+export async function ignores(): Promise<Linter.Config[]> {
+  return [
+    {
+      ignores: [
+        '**/node_modules',
+        '**/dist',
+        '**/dist-*',
+        '**/*-dist',
+        '**/.husky',
+        '**/.nitro',
+        '**/.output',
+        '**/Dockerfile',
+        '**/package-lock.json',
+        '**/yarn.lock',
+        '**/pnpm-lock.yaml',
+        '**/bun.lockb',
+        '**/output',
+        '**/coverage',
+        '**/temp',
+        '**/.temp',
+        '**/tmp',
+        '**/.tmp',
+        '**/.history',
+        '**/.turbo',
+        '**/.nuxt',
+        '**/.next',
+        '**/.vercel',
+        '**/.changeset',
+        '**/.idea',
+        '**/.cache',
+        '**/.output',
+        '**/.vite-inspect',
+
+        '**/CHANGELOG*.md',
+        '**/*.min.*',
+        '**/LICENSE*',
+        '**/__snapshots__',
+        '**/*.snap',
+        '**/fixtures/**',
+        '**/.vitepress/cache/**',
+        '**/auto-import?(s).d.ts',
+        '**/components.d.ts',
+        '**/vite.config.mts.*',
+        '**/*.sh',
+        '**/*.ttf',
+        '**/*.woff',
+      ],
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/import.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/import.ts
new file mode 100644
index 0000000..ce6cf65
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/import.ts
@@ -0,0 +1,25 @@
+import type { Linter } from 'eslint';
+
+import * as pluginImport from 'eslint-plugin-import-x';
+
+export async function importPluginConfig(): Promise<Linter.Config[]> {
+  return [
+    {
+      plugins: {
+        // @ts-expect-error - This is a dynamic import
+        import: pluginImport,
+      },
+      rules: {
+        'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+        'import/first': 'error',
+        'import/newline-after-import': 'error',
+        'import/no-duplicates': 'error',
+        'import/no-mutable-exports': 'error',
+        'import/no-named-default': 'error',
+        'import/no-self-import': 'error',
+        'import/no-unresolved': 'off',
+        'import/no-webpack-loader-syntax': 'error',
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/index.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/index.ts
new file mode 100644
index 0000000..c0284ef
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/index.ts
@@ -0,0 +1,17 @@
+export * from './command';
+export * from './comments';
+export * from './disableds';
+export * from './ignores';
+export * from './import';
+export * from './javascript';
+export * from './jsdoc';
+export * from './jsonc';
+export * from './node';
+export * from './perfectionist';
+export * from './prettier';
+export * from './regexp';
+export * from './test';
+export * from './turbo';
+export * from './typescript';
+export * from './unicorn';
+export * from './vue';
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/javascript.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/javascript.ts
new file mode 100644
index 0000000..44cf5b6
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/javascript.ts
@@ -0,0 +1,241 @@
+import type { Linter } from 'eslint';
+
+import js from '@eslint/js';
+import pluginUnusedImports from 'eslint-plugin-unused-imports';
+import globals from 'globals';
+
+export async function javascript(): Promise<Linter.Config[]> {
+  return [
+    {
+      languageOptions: {
+        ecmaVersion: 'latest',
+        globals: {
+          ...globals.browser,
+          ...globals.es2021,
+          ...globals.node,
+          document: 'readonly',
+          navigator: 'readonly',
+          window: 'readonly',
+        },
+        parserOptions: {
+          ecmaFeatures: {
+            jsx: true,
+          },
+          ecmaVersion: 'latest',
+          sourceType: 'module',
+        },
+        sourceType: 'module',
+      },
+      linterOptions: {
+        reportUnusedDisableDirectives: true,
+      },
+      plugins: {
+        'unused-imports': pluginUnusedImports,
+      },
+      rules: {
+        ...js.configs.recommended.rules,
+        'accessor-pairs': [
+          'error',
+          { enforceForClassMembers: true, setWithoutGet: true },
+        ],
+        'array-callback-return': 'error',
+        'block-scoped-var': 'error',
+        'constructor-super': 'error',
+        'default-case-last': 'error',
+        'dot-notation': ['error', { allowKeywords: true }],
+        eqeqeq: ['error', 'always'],
+        'keyword-spacing': 'off',
+
+        'new-cap': [
+          'error',
+          { capIsNew: false, newIsCap: true, properties: true },
+        ],
+        'no-alert': 'error',
+        'no-array-constructor': 'error',
+        'no-async-promise-executor': 'error',
+        'no-caller': 'error',
+        'no-case-declarations': 'error',
+        'no-class-assign': 'error',
+        'no-compare-neg-zero': 'error',
+        'no-cond-assign': ['error', 'always'],
+        'no-console': ['error', { allow: ['warn', 'error'] }],
+        'no-const-assign': 'error',
+        'no-control-regex': 'error',
+        'no-debugger': 'error',
+        'no-delete-var': 'error',
+        'no-dupe-args': 'error',
+        'no-dupe-class-members': 'error',
+        'no-dupe-keys': 'error',
+        'no-duplicate-case': 'error',
+        'no-empty': ['error', { allowEmptyCatch: true }],
+        'no-empty-character-class': 'error',
+        'no-empty-function': 'off',
+        'no-empty-pattern': 'error',
+        'no-eval': 'error',
+        'no-ex-assign': 'error',
+        'no-extend-native': 'error',
+        'no-extra-bind': 'error',
+        'no-extra-boolean-cast': 'error',
+        'no-fallthrough': 'error',
+        'no-func-assign': 'error',
+        'no-global-assign': 'error',
+        'no-implied-eval': 'error',
+        'no-import-assign': 'error',
+        'no-invalid-regexp': 'error',
+        'no-irregular-whitespace': 'error',
+        'no-iterator': 'error',
+        'no-labels': ['error', { allowLoop: false, allowSwitch: false }],
+        'no-lone-blocks': 'error',
+        'no-loss-of-precision': 'error',
+        'no-misleading-character-class': 'error',
+        'no-multi-str': 'error',
+        'no-new': 'error',
+        'no-new-func': 'error',
+        'no-new-object': 'error',
+        'no-new-symbol': 'error',
+        'no-new-wrappers': 'error',
+        'no-obj-calls': 'error',
+        'no-octal': 'error',
+        'no-octal-escape': 'error',
+        'no-proto': 'error',
+        'no-prototype-builtins': 'error',
+        'no-redeclare': ['error', { builtinGlobals: false }],
+        'no-regex-spaces': 'error',
+        'no-restricted-globals': [
+          'error',
+          { message: 'Use `globalThis` instead.', name: 'global' },
+          { message: 'Use `globalThis` instead.', name: 'self' },
+        ],
+        'no-restricted-properties': [
+          'error',
+          {
+            message:
+              'Use `Object.getPrototypeOf` or `Object.setPrototypeOf` instead.',
+            property: '__proto__',
+          },
+          {
+            message: 'Use `Object.defineProperty` instead.',
+            property: '__defineGetter__',
+          },
+          {
+            message: 'Use `Object.defineProperty` instead.',
+            property: '__defineSetter__',
+          },
+          {
+            message: 'Use `Object.getOwnPropertyDescriptor` instead.',
+            property: '__lookupGetter__',
+          },
+          {
+            message: 'Use `Object.getOwnPropertyDescriptor` instead.',
+            property: '__lookupSetter__',
+          },
+        ],
+        'no-restricted-syntax': [
+          'error',
+          'DebuggerStatement',
+          'LabeledStatement',
+          'WithStatement',
+          'TSEnumDeclaration[const=true]',
+          'TSExportAssignment',
+        ],
+        'no-self-assign': ['error', { props: true }],
+        'no-self-compare': 'error',
+        'no-sequences': 'error',
+        'no-shadow-restricted-names': 'error',
+        'no-sparse-arrays': 'error',
+        'no-template-curly-in-string': 'error',
+        'no-this-before-super': 'error',
+        'no-throw-literal': 'error',
+        'no-undef': 'off',
+        'no-undef-init': 'error',
+        'no-unexpected-multiline': 'error',
+        'no-unmodified-loop-condition': 'error',
+        'no-unneeded-ternary': ['error', { defaultAssignment: false }],
+        'no-unreachable': 'error',
+        'no-unreachable-loop': 'error',
+        'no-unsafe-finally': 'error',
+        'no-unsafe-negation': 'error',
+        'no-unused-expressions': [
+          'error',
+          {
+            allowShortCircuit: true,
+            allowTaggedTemplates: true,
+            allowTernary: true,
+          },
+        ],
+        'no-unused-vars': [
+          'error',
+          {
+            args: 'none',
+            caughtErrors: 'none',
+            ignoreRestSiblings: true,
+            vars: 'all',
+          },
+        ],
+        'no-use-before-define': [
+          'error',
+          { classes: false, functions: false, variables: false },
+        ],
+        'no-useless-backreference': 'error',
+        'no-useless-call': 'error',
+        'no-useless-catch': 'error',
+        'no-useless-computed-key': 'error',
+        'no-useless-constructor': 'error',
+        'no-useless-rename': 'error',
+        'no-useless-return': 'error',
+        'no-var': 'error',
+        'no-with': 'error',
+        'object-shorthand': [
+          'error',
+          'always',
+          { avoidQuotes: true, ignoreConstructors: false },
+        ],
+        'one-var': ['error', { initialized: 'never' }],
+        'prefer-arrow-callback': [
+          'error',
+          {
+            allowNamedFunctions: false,
+            allowUnboundThis: true,
+          },
+        ],
+        'prefer-const': [
+          'error',
+          {
+            destructuring: 'all',
+            ignoreReadBeforeAssign: true,
+          },
+        ],
+        'prefer-exponentiation-operator': 'error',
+
+        'prefer-promise-reject-errors': 'error',
+        'prefer-regex-literals': ['error', { disallowRedundantWrapping: true }],
+        'prefer-rest-params': 'error',
+        'prefer-spread': 'error',
+        'prefer-template': 'error',
+        'space-before-function-paren': 'off',
+        'spaced-comment': 'error',
+        'symbol-description': 'error',
+        'unicode-bom': ['error', 'never'],
+
+        'unused-imports/no-unused-imports': 'error',
+        'unused-imports/no-unused-vars': [
+          'error',
+          {
+            args: 'after-used',
+            argsIgnorePattern: '^_',
+            vars: 'all',
+            varsIgnorePattern: '^_',
+          },
+        ],
+        'use-isnan': [
+          'error',
+          { enforceForIndexOf: true, enforceForSwitchCase: true },
+        ],
+        'valid-typeof': ['error', { requireStringLiterals: true }],
+
+        'vars-on-top': 'error',
+        yoda: ['error', 'never'],
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/jsdoc.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/jsdoc.ts
new file mode 100644
index 0000000..1368197
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/jsdoc.ts
@@ -0,0 +1,34 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function jsdoc(): Promise<Linter.Config[]> {
+  const [pluginJsdoc] = await Promise.all([
+    interopDefault(import('eslint-plugin-jsdoc')),
+  ] as const);
+
+  return [
+    {
+      plugins: {
+        jsdoc: pluginJsdoc,
+      },
+      rules: {
+        'jsdoc/check-access': 'warn',
+        'jsdoc/check-param-names': 'warn',
+        'jsdoc/check-property-names': 'warn',
+        'jsdoc/check-types': 'warn',
+        'jsdoc/empty-tags': 'warn',
+        'jsdoc/implements-on-classes': 'warn',
+        'jsdoc/no-defaults': 'warn',
+        'jsdoc/no-multi-asterisks': 'warn',
+        'jsdoc/require-param-name': 'warn',
+        'jsdoc/require-property': 'warn',
+        'jsdoc/require-property-description': 'warn',
+        'jsdoc/require-property-name': 'warn',
+        'jsdoc/require-returns-check': 'warn',
+        'jsdoc/require-returns-description': 'warn',
+        'jsdoc/require-yields-check': 'warn',
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/jsonc.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/jsonc.ts
new file mode 100644
index 0000000..4072e4c
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/jsonc.ts
@@ -0,0 +1,258 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function jsonc(): Promise<Linter.Config[]> {
+  const [pluginJsonc, parserJsonc] = await Promise.all([
+    interopDefault(import('eslint-plugin-jsonc')),
+    interopDefault(import('jsonc-eslint-parser')),
+  ] as const);
+
+  return [
+    {
+      files: ['**/*.json', '**/*.json5', '**/*.jsonc', '*.code-workspace'],
+      languageOptions: {
+        parser: parserJsonc as any,
+      },
+      plugins: {
+        jsonc: pluginJsonc as any,
+      },
+      rules: {
+        'jsonc/no-bigint-literals': 'error',
+        'jsonc/no-binary-expression': 'error',
+        'jsonc/no-binary-numeric-literals': 'error',
+        'jsonc/no-dupe-keys': 'error',
+        'jsonc/no-escape-sequence-in-identifier': 'error',
+        'jsonc/no-floating-decimal': 'error',
+        'jsonc/no-hexadecimal-numeric-literals': 'error',
+        'jsonc/no-infinity': 'error',
+        'jsonc/no-multi-str': 'error',
+        'jsonc/no-nan': 'error',
+        'jsonc/no-number-props': 'error',
+        'jsonc/no-numeric-separators': 'error',
+        'jsonc/no-octal': 'error',
+        'jsonc/no-octal-escape': 'error',
+        'jsonc/no-octal-numeric-literals': 'error',
+        'jsonc/no-parenthesized': 'error',
+        'jsonc/no-plus-sign': 'error',
+        'jsonc/no-regexp-literals': 'error',
+        'jsonc/no-sparse-arrays': 'error',
+        'jsonc/no-template-literals': 'error',
+        'jsonc/no-undefined-value': 'error',
+        'jsonc/no-unicode-codepoint-escapes': 'error',
+        'jsonc/no-useless-escape': 'error',
+        'jsonc/space-unary-ops': 'error',
+        'jsonc/valid-json-number': 'error',
+        'jsonc/vue-custom-block/no-parsing-error': 'error',
+      },
+    },
+    sortTsconfig(),
+    sortPackageJson(),
+  ];
+}
+
+function sortPackageJson(): Linter.Config {
+  return {
+    files: ['**/package.json'],
+    rules: {
+      'jsonc/sort-array-values': [
+        'error',
+        {
+          order: { type: 'asc' },
+          pathPattern: '^files$|^pnpm.neverBuiltDependencies$',
+        },
+      ],
+      'jsonc/sort-keys': [
+        'error',
+        {
+          order: [
+            'name',
+            'version',
+            'description',
+            'private',
+            'keywords',
+            'homepage',
+            'bugs',
+            'repository',
+            'license',
+            'author',
+            'contributors',
+            'categories',
+            'funding',
+            'type',
+            'scripts',
+            'files',
+            'sideEffects',
+            'bin',
+            'main',
+            'module',
+            'unpkg',
+            'jsdelivr',
+            'types',
+            'typesVersions',
+            'imports',
+            'exports',
+            'publishConfig',
+            'icon',
+            'activationEvents',
+            'contributes',
+            'peerDependencies',
+            'peerDependenciesMeta',
+            'dependencies',
+            'optionalDependencies',
+            'devDependencies',
+            'engines',
+            'packageManager',
+            'pnpm',
+            'overrides',
+            'resolutions',
+            'husky',
+            'simple-git-hooks',
+            'lint-staged',
+            'eslintConfig',
+          ],
+          pathPattern: '^$',
+        },
+        {
+          order: { type: 'asc' },
+          pathPattern: '^(?:dev|peer|optional|bundled)?[Dd]ependencies(Meta)?$',
+        },
+        {
+          order: { type: 'asc' },
+          pathPattern: '^(?:resolutions|overrides|pnpm.overrides)$',
+        },
+        {
+          order: ['types', 'import', 'require', 'default'],
+          pathPattern: '^exports.*$',
+        },
+      ],
+    },
+  };
+}
+
+function sortTsconfig(): Linter.Config {
+  return {
+    files: [
+      '**/tsconfig.json',
+      '**/tsconfig.*.json',
+      'internal/tsconfig/*.json',
+    ],
+    rules: {
+      'jsonc/sort-keys': [
+        'error',
+        {
+          order: [
+            'extends',
+            'compilerOptions',
+            'references',
+            'files',
+            'include',
+            'exclude',
+          ],
+          pathPattern: '^$',
+        },
+        {
+          order: [
+            /* Projects */
+            'incremental',
+            'composite',
+            'tsBuildInfoFile',
+            'disableSourceOfProjectReferenceRedirect',
+            'disableSolutionSearching',
+            'disableReferencedProjectLoad',
+            /* Language and Environment */
+            'target',
+            'jsx',
+            'jsxFactory',
+            'jsxFragmentFactory',
+            'jsxImportSource',
+            'lib',
+            'moduleDetection',
+            'noLib',
+            'reactNamespace',
+            'useDefineForClassFields',
+            'emitDecoratorMetadata',
+            'experimentalDecorators',
+            /* Modules */
+            'baseUrl',
+            'rootDir',
+            'rootDirs',
+            'customConditions',
+            'module',
+            'moduleResolution',
+            'moduleSuffixes',
+            'noResolve',
+            'paths',
+            'resolveJsonModule',
+            'resolvePackageJsonExports',
+            'resolvePackageJsonImports',
+            'typeRoots',
+            'types',
+            'allowArbitraryExtensions',
+            'allowImportingTsExtensions',
+            'allowUmdGlobalAccess',
+            /* JavaScript Support */
+            'allowJs',
+            'checkJs',
+            'maxNodeModuleJsDepth',
+            /* Type Checking */
+            'strict',
+            'strictBindCallApply',
+            'strictFunctionTypes',
+            'strictNullChecks',
+            'strictPropertyInitialization',
+            'allowUnreachableCode',
+            'allowUnusedLabels',
+            'alwaysStrict',
+            'exactOptionalPropertyTypes',
+            'noFallthroughCasesInSwitch',
+            'noImplicitAny',
+            'noImplicitOverride',
+            'noImplicitReturns',
+            'noImplicitThis',
+            'noPropertyAccessFromIndexSignature',
+            'noUncheckedIndexedAccess',
+            'noUnusedLocals',
+            'noUnusedParameters',
+            'useUnknownInCatchVariables',
+            /* Emit */
+            'declaration',
+            'declarationDir',
+            'declarationMap',
+            'downlevelIteration',
+            'emitBOM',
+            'emitDeclarationOnly',
+            'importHelpers',
+            'importsNotUsedAsValues',
+            'inlineSourceMap',
+            'inlineSources',
+            'mapRoot',
+            'newLine',
+            'noEmit',
+            'noEmitHelpers',
+            'noEmitOnError',
+            'outDir',
+            'outFile',
+            'preserveConstEnums',
+            'preserveValueImports',
+            'removeComments',
+            'sourceMap',
+            'sourceRoot',
+            'stripInternal',
+            /* Interop Constraints */
+            'allowSyntheticDefaultImports',
+            'esModuleInterop',
+            'forceConsistentCasingInFileNames',
+            'isolatedModules',
+            'preserveSymlinks',
+            'verbatimModuleSyntax',
+            /* Completeness */
+            'skipDefaultLibCheck',
+            'skipLibCheck',
+          ],
+          pathPattern: '^compilerOptions$',
+        },
+      ],
+    },
+  };
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/node.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/node.ts
new file mode 100644
index 0000000..f8f2664
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/node.ts
@@ -0,0 +1,57 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function node(): Promise<Linter.Config[]> {
+  const pluginNode = await interopDefault(import('eslint-plugin-n'));
+
+  return [
+    {
+      plugins: {
+        n: pluginNode,
+      },
+      rules: {
+        'n/handle-callback-err': ['error', '^(err|error)$'],
+        'n/no-deprecated-api': 'error',
+        'n/no-exports-assign': 'error',
+        'n/no-extraneous-import': [
+          'error',
+          {
+            allowModules: [
+              'unbuild',
+              '@vben/vite-config',
+              'vitest',
+              'vite',
+              '@vue/test-utils',
+              '@vben/tailwind-config',
+              '@playwright/test',
+            ],
+          },
+        ],
+        'n/no-new-require': 'error',
+        'n/no-path-concat': 'error',
+        // 'n/no-unpublished-import': 'off',
+        'n/no-unsupported-features/es-syntax': [
+          'error',
+          {
+            ignores: [],
+            version: '>=20.12.0',
+          },
+        ],
+        'n/prefer-global/buffer': ['error', 'never'],
+        // 'n/no-missing-import': 'off',
+        'n/prefer-global/process': ['error', 'never'],
+        'n/process-exit-as-throw': 'error',
+      },
+    },
+    {
+      files: [
+        'scripts/**/*.?([cm])[jt]s?(x)',
+        'internal/**/*.?([cm])[jt]s?(x)',
+      ],
+      rules: {
+        'n/prefer-global/process': 'off',
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/perfectionist.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/perfectionist.ts
new file mode 100644
index 0000000..4a7d12f
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/perfectionist.ts
@@ -0,0 +1,88 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function perfectionist(): Promise<Linter.Config[]> {
+  const perfectionistPlugin = await interopDefault(
+    import('eslint-plugin-perfectionist'),
+  );
+
+  return [
+    perfectionistPlugin.configs['recommended-natural'],
+    {
+      rules: {
+        'perfectionist/sort-exports': [
+          'error',
+          {
+            order: 'asc',
+            type: 'natural',
+          },
+        ],
+        'perfectionist/sort-imports': [
+          'error',
+          {
+            customGroups: {
+              type: {
+                'vben-core-type': ['^@vben-core/.+'],
+                'vben-type': ['^@vben/.+'],
+                'vue-type': ['^vue$', '^vue-.+', '^@vue/.+'],
+              },
+              value: {
+                vben: ['^@vben/.+'],
+                'vben-core': ['^@vben-core/.+'],
+                vue: ['^vue$', '^vue-.+', '^@vue/.+'],
+              },
+            },
+            environment: 'node',
+            groups: [
+              ['external-type', 'builtin-type', 'type'],
+              'vue-type',
+              'vben-type',
+              'vben-core-type',
+              ['parent-type', 'sibling-type', 'index-type'],
+              ['internal-type'],
+              'builtin',
+              'vue',
+              'vben',
+              'vben-core',
+              'external',
+              'internal',
+              ['parent', 'sibling', 'index'],
+              'side-effect',
+              'side-effect-style',
+              'style',
+              'object',
+              'unknown',
+            ],
+            internalPattern: ['^#/.+'],
+            newlinesBetween: 'always',
+            order: 'asc',
+            type: 'natural',
+          },
+        ],
+        'perfectionist/sort-modules': 'off',
+        'perfectionist/sort-named-exports': [
+          'error',
+          {
+            order: 'asc',
+            type: 'natural',
+          },
+        ],
+        'perfectionist/sort-objects': [
+          'off',
+          {
+            customGroups: {
+              items: 'items',
+              list: 'list',
+              children: 'children',
+            },
+            groups: ['unknown', 'items', 'list', 'children'],
+            ignorePattern: ['children'],
+            order: 'asc',
+            type: 'natural',
+          },
+        ],
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/prettier.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/prettier.ts
new file mode 100644
index 0000000..3cd7af4
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/prettier.ts
@@ -0,0 +1,19 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function prettier(): Promise<Linter.Config[]> {
+  const [pluginPrettier] = await Promise.all([
+    interopDefault(import('eslint-plugin-prettier')),
+  ] as const);
+  return [
+    {
+      plugins: {
+        prettier: pluginPrettier,
+      },
+      rules: {
+        'prettier/prettier': 'error',
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/regexp.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/regexp.ts
new file mode 100644
index 0000000..c0f4c9f
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/regexp.ts
@@ -0,0 +1,20 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function regexp(): Promise<Linter.Config[]> {
+  const [pluginRegexp] = await Promise.all([
+    interopDefault(import('eslint-plugin-regexp')),
+  ] as const);
+
+  return [
+    {
+      plugins: {
+        regexp: pluginRegexp,
+      },
+      rules: {
+        ...pluginRegexp.configs.recommended.rules,
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/test.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/test.ts
new file mode 100644
index 0000000..ddfde2b
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/test.ts
@@ -0,0 +1,45 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function test(): Promise<Linter.Config[]> {
+  const [pluginTest, pluginNoOnlyTests] = await Promise.all([
+    interopDefault(import('eslint-plugin-vitest')),
+    // @ts-expect-error - no types
+    interopDefault(import('eslint-plugin-no-only-tests')),
+  ] as const);
+
+  return [
+    {
+      files: [
+        `**/__tests__/**/*.?([cm])[jt]s?(x)`,
+        `**/*.spec.?([cm])[jt]s?(x)`,
+        `**/*.test.?([cm])[jt]s?(x)`,
+        `**/*.bench.?([cm])[jt]s?(x)`,
+        `**/*.benchmark.?([cm])[jt]s?(x)`,
+      ],
+      plugins: {
+        test: {
+          ...pluginTest,
+          rules: {
+            ...pluginTest.rules,
+            ...pluginNoOnlyTests.rules,
+          },
+        },
+      },
+      rules: {
+        'no-console': 'off',
+        'node/prefer-global/process': 'off',
+        'test/consistent-test-it': [
+          'error',
+          { fn: 'it', withinDescribe: 'it' },
+        ],
+        'test/no-identical-title': 'error',
+        'test/no-import-node-test': 'error',
+        'test/no-only-tests': 'error',
+        'test/prefer-hooks-in-order': 'error',
+        'test/prefer-lowercase-title': 'error',
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/turbo.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/turbo.ts
new file mode 100644
index 0000000..bcc27eb
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/turbo.ts
@@ -0,0 +1,17 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function turbo(): Promise<Linter.Config[]> {
+  const [pluginTurbo] = await Promise.all([
+    interopDefault(import('eslint-config-turbo')),
+  ] as const);
+
+  return [
+    {
+      plugins: {
+        turbo: pluginTurbo,
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/typescript.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/typescript.ts
new file mode 100644
index 0000000..2f6f976
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/typescript.ts
@@ -0,0 +1,71 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function typescript(): Promise<Linter.Config[]> {
+  const [pluginTs, parserTs] = await Promise.all([
+    interopDefault(import('@typescript-eslint/eslint-plugin')),
+    interopDefault(import('@typescript-eslint/parser')),
+  ] as const);
+
+  return [
+    {
+      files: ['**/*.?([cm])[jt]s?(x)'],
+      languageOptions: {
+        parser: parserTs,
+        parserOptions: {
+          createDefaultProgram: false,
+          ecmaFeatures: {
+            jsx: true,
+          },
+          ecmaVersion: 'latest',
+          extraFileExtensions: ['.vue'],
+          jsxPragma: 'React',
+          project: './tsconfig.*.json',
+          sourceType: 'module',
+        },
+      },
+      plugins: {
+        '@typescript-eslint': pluginTs as any,
+      },
+      rules: {
+        ...pluginTs.configs['eslint-recommended']?.overrides?.[0]?.rules,
+        ...pluginTs.configs.strict?.rules,
+        '@typescript-eslint/ban-ts-comment': [
+          'error',
+          {
+            'ts-check': false,
+            'ts-expect-error': 'allow-with-description',
+            'ts-ignore': 'allow-with-description',
+            'ts-nocheck': 'allow-with-description',
+          },
+        ],
+
+        // '@typescript-eslint/consistent-type-definitions': ['warn', 'interface'],
+        '@typescript-eslint/consistent-type-definitions': 'off',
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/no-empty-function': [
+          'error',
+          {
+            allow: ['arrowFunctions', 'functions', 'methods'],
+          },
+        ],
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-namespace': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'error',
+        '@typescript-eslint/no-unused-expressions': 'off',
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            argsIgnorePattern: '^_',
+            varsIgnorePattern: '^_',
+          },
+        ],
+        '@typescript-eslint/no-use-before-define': 'off',
+        '@typescript-eslint/no-var-requires': 'error',
+        'unused-imports/no-unused-vars': 'off',
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/unicorn.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/unicorn.ts
new file mode 100644
index 0000000..21b1902
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/unicorn.ts
@@ -0,0 +1,45 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function unicorn(): Promise<Linter.Config[]> {
+  const [pluginUnicorn] = await Promise.all([
+    interopDefault(import('eslint-plugin-unicorn')),
+  ] as const);
+
+  return [
+    {
+      plugins: {
+        unicorn: pluginUnicorn,
+      },
+      rules: {
+        ...pluginUnicorn.configs.recommended.rules,
+
+        'unicorn/better-regex': 'off',
+        'unicorn/consistent-destructuring': 'off',
+        'unicorn/consistent-function-scoping': 'off',
+        'unicorn/expiring-todo-comments': 'off',
+        'unicorn/filename-case': 'off',
+        'unicorn/import-style': 'off',
+        'unicorn/no-array-for-each': 'off',
+        'unicorn/no-null': 'off',
+        'unicorn/no-useless-undefined': 'off',
+        'unicorn/prefer-at': 'off',
+        'unicorn/prefer-dom-node-text-content': 'off',
+        'unicorn/prefer-export-from': ['error', { ignoreUsedVariables: true }],
+        'unicorn/prefer-global-this': 'off',
+        'unicorn/prefer-top-level-await': 'off',
+        'unicorn/prevent-abbreviations': 'off',
+      },
+    },
+    {
+      files: [
+        'scripts/**/*.?([cm])[jt]s?(x)',
+        'internal/**/*.?([cm])[jt]s?(x)',
+      ],
+      rules: {
+        'unicorn/no-process-exit': 'off',
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/vue.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/vue.ts
new file mode 100644
index 0000000..5db7299
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/configs/vue.ts
@@ -0,0 +1,152 @@
+import type { Linter } from 'eslint';
+
+import { interopDefault } from '../util';
+
+export async function vue(): Promise<Linter.Config[]> {
+  const [pluginVue, parserVue, parserTs] = await Promise.all([
+    interopDefault(import('eslint-plugin-vue')),
+    interopDefault(import('vue-eslint-parser')),
+    interopDefault(import('@typescript-eslint/parser')),
+  ] as const);
+
+  const flatEssential = pluginVue.configs?.['flat/essential'] || [];
+  const flatStronglyRecommended =
+    pluginVue.configs?.['flat/strongly-recommended'] || [];
+  const flatRecommended = pluginVue.configs?.['flat/recommended'] || [];
+
+  return [
+    ...flatEssential,
+    ...flatStronglyRecommended,
+    ...flatRecommended,
+    {
+      files: ['**/*.vue'],
+      languageOptions: {
+        // globals: {
+        //   computed: 'readonly',
+        //   defineEmits: 'readonly',
+        //   defineExpose: 'readonly',
+        //   defineProps: 'readonly',
+        //   onMounted: 'readonly',
+        //   onUnmounted: 'readonly',
+        //   reactive: 'readonly',
+        //   ref: 'readonly',
+        //   shallowReactive: 'readonly',
+        //   shallowRef: 'readonly',
+        //   toRef: 'readonly',
+        //   toRefs: 'readonly',
+        //   watch: 'readonly',
+        //   watchEffect: 'readonly',
+        // },
+        parser: parserVue,
+        parserOptions: {
+          ecmaFeatures: {
+            jsx: true,
+          },
+          extraFileExtensions: ['.vue'],
+          parser: parserTs,
+          sourceType: 'module',
+        },
+      },
+      plugins: {
+        vue: pluginVue,
+      },
+      processor: pluginVue.processors?.['.vue'],
+      rules: {
+        ...pluginVue.configs?.base?.rules,
+
+        'vue/attribute-hyphenation': [
+          'error',
+          'always',
+          {
+            ignore: [],
+          },
+        ],
+        'vue/attributes-order': 'off',
+        'vue/block-order': [
+          'error',
+          {
+            order: ['script', 'template', 'style'],
+          },
+        ],
+        'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+        'vue/component-options-name-casing': ['error', 'PascalCase'],
+        'vue/custom-event-name-casing': ['error', 'camelCase'],
+        'vue/define-macros-order': [
+          'error',
+          {
+            order: [
+              'defineOptions',
+              'defineProps',
+              'defineEmits',
+              'defineSlots',
+            ],
+          },
+        ],
+        'vue/dot-location': ['error', 'property'],
+        'vue/dot-notation': ['error', { allowKeywords: true }],
+        'vue/eqeqeq': ['error', 'smart'],
+        'vue/html-closing-bracket-newline': 'error',
+        'vue/html-indent': 'off',
+        // 'vue/html-indent': ['error', 2],
+        'vue/html-quotes': ['error', 'double'],
+        'vue/html-self-closing': [
+          'error',
+          {
+            html: {
+              component: 'always',
+              normal: 'never',
+              void: 'always',
+            },
+            math: 'always',
+            svg: 'always',
+          },
+        ],
+        'vue/max-attributes-per-line': 'off',
+        'vue/multi-word-component-names': 'off',
+        'vue/multiline-html-element-content-newline': 'error',
+        'vue/no-empty-pattern': 'error',
+        'vue/no-extra-parens': ['error', 'functions'],
+        'vue/no-irregular-whitespace': 'error',
+        'vue/no-loss-of-precision': 'error',
+        'vue/no-reserved-component-names': 'off',
+        'vue/no-restricted-syntax': [
+          'error',
+          'DebuggerStatement',
+          'LabeledStatement',
+          'WithStatement',
+        ],
+        'vue/no-restricted-v-bind': ['error', '/^v-/'],
+        'vue/no-sparse-arrays': 'error',
+        'vue/no-unused-refs': 'error',
+        'vue/no-useless-v-bind': 'error',
+        'vue/object-shorthand': [
+          'error',
+          'always',
+          {
+            avoidQuotes: true,
+            ignoreConstructors: false,
+          },
+        ],
+        'vue/one-component-per-file': 'error',
+        'vue/prefer-import-from-vue': 'error',
+        'vue/prefer-separate-static-class': 'error',
+        'vue/prefer-template': 'error',
+        'vue/prop-name-casing': ['error', 'camelCase'],
+        'vue/require-default-prop': 'error',
+        'vue/require-explicit-emits': 'error',
+        'vue/require-prop-types': 'off',
+        'vue/singleline-html-element-content-newline': 'off',
+        'vue/space-infix-ops': 'error',
+        'vue/space-unary-ops': ['error', { nonwords: false, words: true }],
+        'vue/v-on-event-hyphenation': [
+          'error',
+          'always',
+          {
+            autofix: true,
+            ignore: [],
+          },
+        ],
+      },
+    },
+  ];
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/custom-config.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/custom-config.ts
new file mode 100644
index 0000000..27c3e2f
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/custom-config.ts
@@ -0,0 +1,168 @@
+import type { Linter } from 'eslint';
+
+const restrictedImportIgnores = [
+  '**/vite.config.mts',
+  '**/tailwind.config.mjs',
+  '**/postcss.config.mjs',
+];
+
+const customConfig: Linter.Config[] = [
+  // shadcn-ui 内部组件是自动生成的，不做太多限制
+  {
+    files: ['packages/@core/ui-kit/shadcn-ui/**/**'],
+    rules: {
+      'vue/require-default-prop': 'off',
+    },
+  },
+  {
+    files: [
+      'apps/**/**',
+      'packages/effects/**/**',
+      'packages/utils/**/**',
+      'packages/types/**/**',
+      'packages/locales/**/**',
+    ],
+    ignores: restrictedImportIgnores,
+    rules: {
+      'perfectionist/sort-interfaces': 'off',
+      'perfectionist/sort-objects': 'off',
+    },
+  },
+  {
+    files: ['**/**.vue'],
+    ignores: restrictedImportIgnores,
+    rules: {
+      'perfectionist/sort-objects': 'off',
+    },
+  },
+  {
+    // apps内部的一些基础规则
+    files: ['apps/**/**'],
+    ignores: restrictedImportIgnores,
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['#/api/*'],
+              message:
+                'The #/api package cannot be imported, please use the @core package itself',
+            },
+            {
+              group: ['#/layouts/*'],
+              message:
+                'The #/layouts package cannot be imported, please use the @core package itself',
+            },
+            {
+              group: ['#/locales/*'],
+              message:
+                'The #/locales package cannot be imported, please use the @core package itself',
+            },
+            {
+              group: ['#/stores/*'],
+              message:
+                'The #/stores package cannot be imported, please use the @core package itself',
+            },
+          ],
+        },
+      ],
+      'perfectionist/sort-interfaces': 'off',
+    },
+  },
+  {
+    // @core内部组件，不能引入@vben/* 里面的包
+    files: ['packages/@core/**/**'],
+    ignores: restrictedImportIgnores,
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['@vben/*'],
+              message:
+                'The @core package cannot import the @vben package, please use the @core package itself',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    // @core/shared内部组件，不能引入@vben/* 或者 @vben-core/* 里面的包
+    files: ['packages/@core/base/**/**'],
+    ignores: restrictedImportIgnores,
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['@vben/*', '@vben-core/*'],
+              message:
+                'The @vben-core/shared package cannot import the @vben package, please use the @core/shared package itself',
+            },
+          ],
+        },
+      ],
+    },
+  },
+
+  {
+    // 不能引入@vben/*里面的包
+    files: [
+      'packages/types/**/**',
+      'packages/utils/**/**',
+      'packages/icons/**/**',
+      'packages/constants/**/**',
+      'packages/styles/**/**',
+      'packages/stores/**/**',
+      'packages/preferences/**/**',
+      'packages/locales/**/**',
+    ],
+    ignores: restrictedImportIgnores,
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['@vben/*'],
+              message:
+                'The @vben package cannot be imported, please use the @core package itself',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  // 后端模拟代码，不需要太多规则
+  {
+    files: ['apps/backend-mock/**/**', 'docs/**/**'],
+    rules: {
+      '@typescript-eslint/no-extraneous-class': 'off',
+      'n/no-extraneous-import': 'off',
+      'n/prefer-global/buffer': 'off',
+      'n/prefer-global/process': 'off',
+      'no-console': 'off',
+      'unicorn/prefer-module': 'off',
+    },
+  },
+  {
+    files: ['**/**/playwright.config.ts'],
+    rules: {
+      'n/prefer-global/buffer': 'off',
+      'n/prefer-global/process': 'off',
+      'no-console': 'off',
+    },
+  },
+  {
+    files: ['internal/**/**', 'scripts/**/**'],
+    rules: {
+      'no-console': 'off',
+    },
+  },
+];
+
+export { customConfig };
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/index.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/index.ts
new file mode 100644
index 0000000..c9f08bd
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/index.ts
@@ -0,0 +1,60 @@
+import type { Linter } from 'eslint';
+
+import {
+  command,
+  comments,
+  disableds,
+  ignores,
+  importPluginConfig,
+  javascript,
+  jsdoc,
+  jsonc,
+  node,
+  perfectionist,
+  prettier,
+  regexp,
+  test,
+  turbo,
+  typescript,
+  unicorn,
+  vue,
+} from './configs';
+import { customConfig } from './custom-config';
+
+type FlatConfig = Linter.Config;
+
+type FlatConfigPromise =
+  | FlatConfig
+  | FlatConfig[]
+  | Promise<FlatConfig>
+  | Promise<FlatConfig[]>;
+
+async function defineConfig(config: FlatConfig[] = []) {
+  const configs: FlatConfigPromise[] = [
+    vue(),
+    javascript(),
+    ignores(),
+    prettier(),
+    typescript(),
+    jsonc(),
+    disableds(),
+    importPluginConfig(),
+    node(),
+    perfectionist(),
+    comments(),
+    jsdoc(),
+    unicorn(),
+    test(),
+    regexp(),
+    command(),
+    turbo(),
+    ...customConfig,
+    ...config,
+  ];
+
+  const resolved = await Promise.all(configs);
+
+  return resolved.flat();
+}
+
+export { defineConfig };
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/src/util.ts b/admin-ui/vue/internal/lint-configs/eslint-config/src/util.ts
new file mode 100644
index 0000000..d1a10ad
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/src/util.ts
@@ -0,0 +1,8 @@
+export type Awaitable<T> = Promise<T> | T;
+
+export async function interopDefault<T>(
+  m: Awaitable<T>,
+): Promise<T extends { default: infer U } ? U : T> {
+  const resolved = await m;
+  return (resolved as any).default || resolved;
+}
diff --git a/admin-ui/vue/internal/lint-configs/eslint-config/tsconfig.json b/admin-ui/vue/internal/lint-configs/eslint-config/tsconfig.json
new file mode 100644
index 0000000..dbd3bcc
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/eslint-config/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/node.json",
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/internal/lint-configs/prettier-config/index.mjs b/admin-ui/vue/internal/lint-configs/prettier-config/index.mjs
new file mode 100644
index 0000000..f6a20c8
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/prettier-config/index.mjs
@@ -0,0 +1,18 @@
+export default {
+  endOfLine: 'auto',
+  overrides: [
+    {
+      files: ['*.json5'],
+      options: {
+        quoteProps: 'preserve',
+        singleQuote: false,
+      },
+    },
+  ],
+  plugins: ['prettier-plugin-tailwindcss'],
+  printWidth: 80,
+  proseWrap: 'never',
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};
diff --git a/admin-ui/vue/internal/lint-configs/prettier-config/package.json b/admin-ui/vue/internal/lint-configs/prettier-config/package.json
new file mode 100644
index 0000000..65e8b8f
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/prettier-config/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@vben/prettier-config",
+  "version": "5.0.0",
+  "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/lint-configs/prettier-config"
+  },
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "exports": {
+    ".": {
+      "default": "./index.mjs"
+    }
+  },
+  "dependencies": {
+    "prettier": "catalog:",
+    "prettier-plugin-tailwindcss": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/internal/lint-configs/stylelint-config/index.mjs b/admin-ui/vue/internal/lint-configs/stylelint-config/index.mjs
new file mode 100644
index 0000000..08ac823
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/stylelint-config/index.mjs
@@ -0,0 +1,141 @@
+export default {
+  extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],
+  ignoreFiles: [
+    '**/*.js',
+    '**/*.jsx',
+    '**/*.tsx',
+    '**/*.ts',
+    '**/*.json',
+    '**/*.md',
+  ],
+  overrides: [
+    {
+      customSyntax: 'postcss-html',
+      files: ['*.(html|vue)', '**/*.(html|vue)'],
+      rules: {
+        'selector-pseudo-class-no-unknown': [
+          true,
+          {
+            ignorePseudoClasses: ['global', 'deep'],
+          },
+        ],
+        'selector-pseudo-element-no-unknown': [
+          true,
+          {
+            ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
+          },
+        ],
+      },
+    },
+    {
+      customSyntax: 'postcss-scss',
+      extends: [
+        'stylelint-config-recommended-scss',
+        'stylelint-config-recommended-vue/scss',
+      ],
+      files: ['*.scss', '**/*.scss'],
+    },
+  ],
+  plugins: [
+    'stylelint-order',
+    '@stylistic/stylelint-plugin',
+    'stylelint-prettier',
+    'stylelint-scss',
+  ],
+  rules: {
+    'at-rule-no-deprecated': null,
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'extends',
+          'ignores',
+          'include',
+          'mixin',
+          'if',
+          'else',
+          'media',
+          'for',
+          'at-root',
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+          'function',
+          'each',
+          'use',
+          'forward',
+          'return',
+        ],
+      },
+    ],
+    'font-family-no-missing-generic-family-keyword': null,
+    'function-no-unknown': null,
+    'import-notation': null,
+    'media-feature-range-notation': null,
+    'named-grid-areas-no-invalid': null,
+    'no-descending-specificity': null,
+    'no-empty-source': null,
+    'order/order': [
+      [
+        'dollar-variables',
+        'custom-properties',
+        'at-rules',
+        'declarations',
+        {
+          name: 'supports',
+          type: 'at-rule',
+        },
+        {
+          name: 'media',
+          type: 'at-rule',
+        },
+        {
+          name: 'include',
+          type: 'at-rule',
+        },
+        'rules',
+      ],
+      { severity: 'error' },
+    ],
+    'prettier/prettier': true,
+    'rule-empty-line-before': [
+      'always',
+      {
+        ignore: ['after-comment', 'first-nested'],
+      },
+    ],
+    'scss/at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: [
+          'extends',
+          'ignores',
+          'include',
+          'mixin',
+          'if',
+          'else',
+          'media',
+          'for',
+          'at-root',
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
+          'function',
+          'each',
+          'use',
+          'forward',
+          'return',
+        ],
+      },
+    ],
+    'scss/operator-no-newline-after': null,
+    'selector-class-pattern':
+      '^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:[.+])?$',
+
+    'selector-not-notation': null,
+  },
+};
diff --git a/admin-ui/vue/internal/lint-configs/stylelint-config/package.json b/admin-ui/vue/internal/lint-configs/stylelint-config/package.json
new file mode 100644
index 0000000..f8bc1cc
--- /dev/null
+++ b/admin-ui/vue/internal/lint-configs/stylelint-config/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@vben/stylelint-config",
+  "version": "5.5.9",
+  "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/lint-configs/stylelint-config"
+  },
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "default": "./index.mjs"
+    }
+  },
+  "dependencies": {
+    "@stylistic/stylelint-plugin": "catalog:",
+    "stylelint-config-recess-order": "catalog:",
+    "stylelint-scss": "catalog:"
+  },
+  "devDependencies": {
+    "postcss": "catalog:",
+    "postcss-html": "catalog:",
+    "postcss-scss": "catalog:",
+    "prettier": "catalog:",
+    "stylelint": "catalog:",
+    "stylelint-config-recommended": "catalog:",
+    "stylelint-config-recommended-scss": "catalog:",
+    "stylelint-config-recommended-vue": "catalog:",
+    "stylelint-config-standard": "catalog:",
+    "stylelint-order": "catalog:",
+    "stylelint-prettier": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/internal/node-utils/build.config.ts b/admin-ui/vue/internal/node-utils/build.config.ts
new file mode 100644
index 0000000..97e572c
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
diff --git a/admin-ui/vue/internal/node-utils/package.json b/admin-ui/vue/internal/node-utils/package.json
new file mode 100644
index 0000000..fe4a6ba
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@vben/node-utils",
+  "version": "5.5.9",
+  "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/node-utils"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "stub": "pnpm unbuild --stub"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "dependencies": {
+    "@changesets/git": "catalog:",
+    "@manypkg/get-packages": "catalog:",
+    "chalk": "catalog:",
+    "consola": "catalog:",
+    "dayjs": "catalog:",
+    "execa": "catalog:",
+    "find-up": "catalog:",
+    "ora": "catalog:",
+    "pkg-types": "catalog:",
+    "prettier": "catalog:",
+    "rimraf": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/internal/node-utils/src/__tests__/hash.test.ts b/admin-ui/vue/internal/node-utils/src/__tests__/hash.test.ts
new file mode 100644
index 0000000..3851306
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/__tests__/hash.test.ts
@@ -0,0 +1,52 @@
+import { createHash } from 'node:crypto';
+
+import { describe, expect, it } from 'vitest';
+
+import { generatorContentHash } from '../hash';
+
+describe('generatorContentHash', () => {
+  it('should generate an MD5 hash for the content', () => {
+    const content = 'example content';
+    const expectedHash = createHash('md5')
+      .update(content, 'utf8')
+      .digest('hex');
+    const actualHash = generatorContentHash(content);
+    expect(actualHash).toBe(expectedHash);
+  });
+
+  it('should generate an MD5 hash with specified length', () => {
+    const content = 'example content';
+    const hashLength = 10;
+    const generatedHash = generatorContentHash(content, hashLength);
+    expect(generatedHash).toHaveLength(hashLength);
+  });
+
+  it('should correctly generate the hash with specified length', () => {
+    const content = 'example content';
+    const hashLength = 8;
+    const expectedHash = createHash('md5')
+      .update(content, 'utf8')
+      .digest('hex')
+      .slice(0, hashLength);
+    const generatedHash = generatorContentHash(content, hashLength);
+    expect(generatedHash).toBe(expectedHash);
+  });
+
+  it('should return full hash if hash length parameter is not provided', () => {
+    const content = 'example content';
+    const expectedHash = createHash('md5')
+      .update(content, 'utf8')
+      .digest('hex');
+    const actualHash = generatorContentHash(content);
+    expect(actualHash).toBe(expectedHash);
+  });
+
+  it('should handle empty content', () => {
+    const content = '';
+    const expectedHash = createHash('md5')
+      .update(content, 'utf8')
+      .digest('hex');
+    const actualHash = generatorContentHash(content);
+    expect(actualHash).toBe(expectedHash);
+  });
+});
diff --git a/admin-ui/vue/internal/node-utils/src/__tests__/path.test.ts b/admin-ui/vue/internal/node-utils/src/__tests__/path.test.ts
new file mode 100644
index 0000000..3bab5a1
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/__tests__/path.test.ts
@@ -0,0 +1,67 @@
+// pathUtils.test.ts
+
+import { describe, expect, it } from 'vitest';
+
+import { toPosixPath } from '../path';
+
+describe('toPosixPath', () => {
+  // 测试 Windows 风格路径到 POSIX 风格路径的转换
+  it('converts Windows-style paths to POSIX paths', () => {
+    const windowsPath = String.raw`C:\Users\Example\file.txt`;
+    const expectedPosixPath = 'C:/Users/Example/file.txt';
+    expect(toPosixPath(windowsPath)).toBe(expectedPosixPath);
+  });
+
+  // 确认 POSIX 风格路径不会被改变
+  it('leaves POSIX-style paths unchanged', () => {
+    const posixPath = '/home/user/file.txt';
+    expect(toPosixPath(posixPath)).toBe(posixPath);
+  });
+
+  // 测试带有多个分隔符的路径
+  it('converts paths with mixed separators', () => {
+    const mixedPath = String.raw`C:/Users\Example\file.txt`;
+    const expectedPosixPath = 'C:/Users/Example/file.txt';
+    expect(toPosixPath(mixedPath)).toBe(expectedPosixPath);
+  });
+
+  // 测试空字符串
+  it('handles empty strings', () => {
+    const emptyPath = '';
+    expect(toPosixPath(emptyPath)).toBe('');
+  });
+
+  // 测试仅包含分隔符的路径
+  it('handles path with only separators', () => {
+    const separatorsPath = '\\\\\\';
+    const expectedPosixPath = '///';
+    expect(toPosixPath(separatorsPath)).toBe(expectedPosixPath);
+  });
+
+  // 测试不包含任何分隔符的路径
+  it('handles path without separators', () => {
+    const noSeparatorPath = 'file.txt';
+    expect(toPosixPath(noSeparatorPath)).toBe('file.txt');
+  });
+
+  // 测试以分隔符结尾的路径
+  it('handles path ending with a separator', () => {
+    const endingSeparatorPath = 'C:\\Users\\Example\\';
+    const expectedPosixPath = 'C:/Users/Example/';
+    expect(toPosixPath(endingSeparatorPath)).toBe(expectedPosixPath);
+  });
+
+  // 测试以分隔符开头的路径
+  it('handles path starting with a separator', () => {
+    const startingSeparatorPath = String.raw`\Users\Example`;
+    const expectedPosixPath = '/Users/Example';
+    expect(toPosixPath(startingSeparatorPath)).toBe(expectedPosixPath);
+  });
+
+  // 测试包含非法字符的路径
+  it('handles path with invalid characters', () => {
+    const invalidCharsPath = String.raw`C:\Us*?ers\Ex<ample>|file.txt`;
+    const expectedPosixPath = 'C:/Us*?ers/Ex<ample>|file.txt';
+    expect(toPosixPath(invalidCharsPath)).toBe(expectedPosixPath);
+  });
+});
diff --git a/admin-ui/vue/internal/node-utils/src/constants.ts b/admin-ui/vue/internal/node-utils/src/constants.ts
new file mode 100644
index 0000000..71d8a6c
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/constants.ts
@@ -0,0 +1,6 @@
+enum UNICODE {
+  FAILURE = '\u2716', // ✖
+  SUCCESS = '\u2714', // ✔
+}
+
+export { UNICODE };
diff --git a/admin-ui/vue/internal/node-utils/src/date.ts b/admin-ui/vue/internal/node-utils/src/date.ts
new file mode 100644
index 0000000..d36572d
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/date.ts
@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+dayjs.tz.setDefault('Asia/Shanghai');
+
+const dateUtil = dayjs;
+
+export { dateUtil };
diff --git a/admin-ui/vue/internal/node-utils/src/fs.ts b/admin-ui/vue/internal/node-utils/src/fs.ts
new file mode 100644
index 0000000..8eec357
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/fs.ts
@@ -0,0 +1,39 @@
+import { promises as fs } from 'node:fs';
+import { dirname } from 'node:path';
+
+export async function outputJSON(
+  filePath: string,
+  data: any,
+  spaces: number = 2,
+) {
+  try {
+    const dir = dirname(filePath);
+    await fs.mkdir(dir, { recursive: true });
+    const jsonData = JSON.stringify(data, null, spaces);
+    await fs.writeFile(filePath, jsonData, 'utf8');
+  } catch (error) {
+    console.error('Error writing JSON file:', error);
+    throw error;
+  }
+}
+
+export async function ensureFile(filePath: string) {
+  try {
+    const dir = dirname(filePath);
+    await fs.mkdir(dir, { recursive: true });
+    await fs.writeFile(filePath, '', { flag: 'a' });
+  } catch (error) {
+    console.error('Error ensuring file:', error);
+    throw error;
+  }
+}
+
+export async function readJSON(filePath: string) {
+  try {
+    const data = await fs.readFile(filePath, 'utf8');
+    return JSON.parse(data);
+  } catch (error) {
+    console.error('Error reading JSON file:', error);
+    throw error;
+  }
+}
diff --git a/admin-ui/vue/internal/node-utils/src/git.ts b/admin-ui/vue/internal/node-utils/src/git.ts
new file mode 100644
index 0000000..88f159c
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/git.ts
@@ -0,0 +1,34 @@
+import path from 'node:path';
+
+import { execa } from 'execa';
+
+export * from '@changesets/git';
+
+/**
+ * 获取暂存区文件
+ */
+async function getStagedFiles(): Promise<string[]> {
+  try {
+    const { stdout } = await execa('git', [
+      '-c',
+      'submodule.recurse=false',
+      'diff',
+      '--staged',
+      '--diff-filter=ACMR',
+      '--name-only',
+      '--ignore-submodules',
+      '-z',
+    ]);
+
+    let changedList = stdout ? stdout.replace(/\0$/, '').split('\0') : [];
+    changedList = changedList.map((item) => path.resolve(process.cwd(), item));
+    const changedSet = new Set(changedList);
+    changedSet.delete('');
+    return [...changedSet];
+  } catch (error) {
+    console.error('Failed to get staged files:', error);
+    return [];
+  }
+}
+
+export { getStagedFiles };
diff --git a/admin-ui/vue/internal/node-utils/src/hash.ts b/admin-ui/vue/internal/node-utils/src/hash.ts
new file mode 100644
index 0000000..81f6b05
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/hash.ts
@@ -0,0 +1,18 @@
+import { createHash } from 'node:crypto';
+
+/**
+ * 生产基于内容的 hash，可自定义长度
+ * @param content
+ * @param hashLSize
+ */
+function generatorContentHash(content: string, hashLSize?: number) {
+  const hash = createHash('md5').update(content, 'utf8').digest('hex');
+
+  if (hashLSize) {
+    return hash.slice(0, hashLSize);
+  }
+
+  return hash;
+}
+
+export { generatorContentHash };
diff --git a/admin-ui/vue/internal/node-utils/src/index.ts b/admin-ui/vue/internal/node-utils/src/index.ts
new file mode 100644
index 0000000..963cb87
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/index.ts
@@ -0,0 +1,19 @@
+export * from './constants';
+export * from './date';
+export * from './fs';
+export * from './git';
+export { getStagedFiles, add as gitAdd } from './git';
+export { generatorContentHash } from './hash';
+export * from './monorepo';
+export { toPosixPath } from './path';
+export { prettierFormat } from './prettier';
+export * from './spinner';
+export type { Package } from '@manypkg/get-packages';
+export { default as colors } from 'chalk';
+export { consola } from 'consola';
+export * from 'execa';
+
+export { default as fs } from 'node:fs/promises';
+
+export { type PackageJson, readPackageJSON } from 'pkg-types';
+export { rimraf } from 'rimraf';
diff --git a/admin-ui/vue/internal/node-utils/src/monorepo.ts b/admin-ui/vue/internal/node-utils/src/monorepo.ts
new file mode 100644
index 0000000..b6373e7
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/monorepo.ts
@@ -0,0 +1,46 @@
+import { dirname } from 'node:path';
+
+import {
+  getPackages as getPackagesFunc,
+  getPackagesSync as getPackagesSyncFunc,
+} from '@manypkg/get-packages';
+import { findUpSync } from 'find-up';
+
+/**
+ * 查找大仓的根目录
+ * @param cwd
+ */
+function findMonorepoRoot(cwd: string = process.cwd()) {
+  const lockFile = findUpSync('pnpm-lock.yaml', {
+    cwd,
+    type: 'file',
+  });
+  return dirname(lockFile || '');
+}
+
+/**
+ * 获取大仓的所有包
+ */
+function getPackagesSync() {
+  const root = findMonorepoRoot();
+  return getPackagesSyncFunc(root);
+}
+
+/**
+ * 获取大仓的所有包
+ */
+async function getPackages() {
+  const root = findMonorepoRoot();
+
+  return await getPackagesFunc(root);
+}
+
+/**
+ * 获取大仓指定的包
+ */
+async function getPackage(pkgName: string) {
+  const { packages } = await getPackages();
+  return packages.find((pkg) => pkg.packageJson.name === pkgName);
+}
+
+export { findMonorepoRoot, getPackage, getPackages, getPackagesSync };
diff --git a/admin-ui/vue/internal/node-utils/src/path.ts b/admin-ui/vue/internal/node-utils/src/path.ts
new file mode 100644
index 0000000..e625fd2
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/path.ts
@@ -0,0 +1,11 @@
+import { posix } from 'node:path';
+
+/**
+ * 将给定的文件路径转换为 POSIX 风格。
+ * @param {string} pathname - 原始文件路径。
+ */
+function toPosixPath(pathname: string) {
+  return pathname.split(`\\`).join(posix.sep);
+}
+
+export { toPosixPath };
diff --git a/admin-ui/vue/internal/node-utils/src/prettier.ts b/admin-ui/vue/internal/node-utils/src/prettier.ts
new file mode 100644
index 0000000..1e1525d
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/prettier.ts
@@ -0,0 +1,21 @@
+import fs from 'node:fs/promises';
+
+import { format, getFileInfo, resolveConfig } from 'prettier';
+
+async function prettierFormat(filepath: string) {
+  const prettierOptions = await resolveConfig(filepath, {});
+
+  const fileInfo = await getFileInfo(filepath);
+
+  const input = await fs.readFile(filepath, 'utf8');
+  const output = await format(input, {
+    ...prettierOptions,
+    parser: fileInfo.inferredParser as any,
+  });
+  if (output !== input) {
+    await fs.writeFile(filepath, output, 'utf8');
+  }
+  return output;
+}
+
+export { prettierFormat };
diff --git a/admin-ui/vue/internal/node-utils/src/spinner.ts b/admin-ui/vue/internal/node-utils/src/spinner.ts
new file mode 100644
index 0000000..13ad6a4
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/src/spinner.ts
@@ -0,0 +1,26 @@
+import type { Ora } from 'ora';
+
+import ora from 'ora';
+
+interface SpinnerOptions {
+  failedText?: string;
+  successText?: string;
+  title: string;
+}
+export async function spinner<T>(
+  { failedText, successText, title }: SpinnerOptions,
+  callback: () => Promise<T>,
+): Promise<T> {
+  const loading: Ora = ora(title).start();
+
+  try {
+    const result = await callback();
+    loading.succeed(successText || 'Success!');
+    return result;
+  } catch (error) {
+    loading.fail(failedText || 'Failed!');
+    throw error;
+  } finally {
+    loading.stop();
+  }
+}
diff --git a/admin-ui/vue/internal/node-utils/tsconfig.json b/admin-ui/vue/internal/node-utils/tsconfig.json
new file mode 100644
index 0000000..b2ec3b6
--- /dev/null
+++ b/admin-ui/vue/internal/node-utils/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/node.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/internal/tailwind-config/build.config.ts b/admin-ui/vue/internal/tailwind-config/build.config.ts
new file mode 100644
index 0000000..1f3c3c2
--- /dev/null
+++ b/admin-ui/vue/internal/tailwind-config/build.config.ts
@@ -0,0 +1,10 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index', './src/postcss.config'],
+  rollup: {
+    emitCJS: true,
+  },
+});
diff --git a/admin-ui/vue/internal/tailwind-config/package.json b/admin-ui/vue/internal/tailwind-config/package.json
new file mode 100644
index 0000000..269558c
--- /dev/null
+++ b/admin-ui/vue/internal/tailwind-config/package.json
@@ -0,0 +1,67 @@
+{
+  "name": "@vben/tailwind-config",
+  "version": "5.5.9",
+  "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/tailwind-config"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "stub": "pnpm unbuild --stub"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./postcss": {
+      "types": "./src/postcss.config.ts",
+      "import": "./dist/postcss.config.mjs",
+      "require": "./dist/postcss.config.cjs",
+      "default": "./dist/postcss.config.mjs"
+    },
+    "./*": "./*"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.4.3"
+  },
+  "dependencies": {
+    "@iconify/json": "catalog:",
+    "@iconify/tailwind": "catalog:",
+    "@manypkg/get-packages": "catalog:",
+    "@tailwindcss/nesting": "catalog:",
+    "@tailwindcss/typography": "catalog:",
+    "autoprefixer": "catalog:",
+    "cssnano": "catalog:",
+    "jiti": "catalog:",
+    "postcss": "catalog:",
+    "postcss-antd-fixes": "catalog:",
+    "postcss-import": "catalog:",
+    "postcss-preset-env": "catalog:",
+    "tailwindcss": "catalog:",
+    "tailwindcss-animate": "catalog:"
+  },
+  "devDependencies": {
+    "@types/postcss-import": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/internal/tailwind-config/src/index.ts b/admin-ui/vue/internal/tailwind-config/src/index.ts
new file mode 100644
index 0000000..4ec93bf
--- /dev/null
+++ b/admin-ui/vue/internal/tailwind-config/src/index.ts
@@ -0,0 +1,308 @@
+import type { Config } from 'tailwindcss';
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { addDynamicIconSelectors } from '@iconify/tailwind';
+import { getPackagesSync } from '@manypkg/get-packages';
+import typographyPlugin from '@tailwindcss/typography';
+import animate from 'tailwindcss-animate';
+
+import { enterAnimationPlugin } from './plugins/entry';
+
+// import defaultTheme from 'tailwindcss/defaultTheme';
+
+// 获取当前文件的目录，然后向上查找项目根目录
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// 从当前文件向上查找项目根目录（包含 pnpm-workspace.yaml 的目录）
+let currentDir = __dirname;
+let projectRoot = currentDir;
+const maxIterations = 10;
+let iterations = 0;
+
+while (iterations < maxIterations) {
+  const workspaceFile = path.join(currentDir, 'pnpm-workspace.yaml');
+  const packageJsonFile = path.join(currentDir, 'package.json');
+
+  if (fs.existsSync(workspaceFile)) {
+    projectRoot = currentDir;
+    break;
+  }
+
+  if (fs.existsSync(packageJsonFile)) {
+    try {
+      const pkgJson = JSON.parse(fs.readFileSync(packageJsonFile, 'utf-8'));
+      if (pkgJson.workspaces) {
+        projectRoot = currentDir;
+        break;
+      }
+    } catch {
+      // 忽略解析错误继续向上查找
+    }
+  }
+
+  const parentDir = path.dirname(currentDir);
+  if (parentDir === currentDir) {
+    // 已到达根目录
+    break;
+  }
+  currentDir = parentDir;
+  iterations++;
+}
+
+const { packages } = getPackagesSync(projectRoot);
+
+const tailwindPackages: string[] = [];
+
+packages.forEach((pkg) => {
+  // apps目录下和 @vben-core/tailwind-ui 包需要使用到 tailwindcss ui
+  // if (fs.existsSync(path.join(pkg.dir, 'tailwind.config.mjs'))) {
+  tailwindPackages.push(pkg.dir);
+  // }
+});
+
+const shadcnUiColors = {
+  accent: {
+    DEFAULT: 'hsl(var(--accent))',
+    foreground: 'hsl(var(--accent-foreground))',
+    hover: 'hsl(var(--accent-hover))',
+    lighter: 'has(val(--accent-lighter))',
+  },
+  background: {
+    deep: 'hsl(var(--background-deep))',
+    DEFAULT: 'hsl(var(--background))',
+  },
+  border: {
+    DEFAULT: 'hsl(var(--border))',
+  },
+  card: {
+    DEFAULT: 'hsl(var(--card))',
+    foreground: 'hsl(var(--card-foreground))',
+  },
+  destructive: {
+    ...createColorsPalette('destructive'),
+    DEFAULT: 'hsl(var(--destructive))',
+  },
+
+  foreground: {
+    DEFAULT: 'hsl(var(--foreground))',
+  },
+
+  input: {
+    background: 'hsl(var(--input-background))',
+    DEFAULT: 'hsl(var(--input))',
+  },
+  muted: {
+    DEFAULT: 'hsl(var(--muted))',
+    foreground: 'hsl(var(--muted-foreground))',
+  },
+  popover: {
+    DEFAULT: 'hsl(var(--popover))',
+    foreground: 'hsl(var(--popover-foreground))',
+  },
+  primary: {
+    ...createColorsPalette('primary'),
+    DEFAULT: 'hsl(var(--primary))',
+  },
+
+  ring: 'hsl(var(--ring))',
+  secondary: {
+    DEFAULT: 'hsl(var(--secondary))',
+    desc: 'hsl(var(--secondary-desc))',
+    foreground: 'hsl(var(--secondary-foreground))',
+  },
+};
+
+const customColors = {
+  green: {
+    ...createColorsPalette('green'),
+    foreground: 'hsl(var(--success-foreground))',
+  },
+  header: {
+    DEFAULT: 'hsl(var(--header))',
+  },
+  heavy: {
+    DEFAULT: 'hsl(var(--heavy))',
+    foreground: 'hsl(var(--heavy-foreground))',
+  },
+  main: {
+    DEFAULT: 'hsl(var(--main))',
+  },
+  overlay: {
+    content: 'hsl(var(--overlay-content))',
+    DEFAULT: 'hsl(var(--overlay))',
+  },
+  red: {
+    ...createColorsPalette('red'),
+    foreground: 'hsl(var(--destructive-foreground))',
+  },
+  sidebar: {
+    deep: 'hsl(var(--sidebar-deep))',
+    DEFAULT: 'hsl(var(--sidebar))',
+  },
+  success: {
+    ...createColorsPalette('success'),
+    DEFAULT: 'hsl(var(--success))',
+  },
+  warning: {
+    ...createColorsPalette('warning'),
+    DEFAULT: 'hsl(var(--warning))',
+  },
+  yellow: {
+    ...createColorsPalette('yellow'),
+    foreground: 'hsl(var(--warning-foreground))',
+  },
+};
+
+export default {
+  content: [
+    './index.html',
+    ...tailwindPackages.map((item) =>
+      path.join(item, 'src/**/*.{vue,js,ts,jsx,tsx,svelte,astro,html}'),
+    ),
+  ],
+  darkMode: 'selector',
+  plugins: [
+    animate,
+    typographyPlugin,
+    addDynamicIconSelectors(),
+    enterAnimationPlugin,
+  ],
+  prefix: '',
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-in-out',
+        float: 'float 5s linear 0ms infinite',
+      },
+
+      animationDuration: {
+        '2000': '2000ms',
+        '3000': '3000ms',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+        xl: 'calc(var(--radius) + 4px)',
+      },
+      boxShadow: {
+        float: `0 6px 16px 0 rgb(0 0 0 / 8%),
+          0 3px 6px -4px rgb(0 0 0 / 12%),
+          0 9px 28px 8px rgb(0 0 0 / 5%)`,
+      },
+      colors: {
+        ...customColors,
+        ...shadcnUiColors,
+      },
+      fontFamily: {
+        sans: [
+          'var(--font-family)',
+          //  ...defaultTheme.fontFamily.sans
+        ],
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--reka-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--reka-accordion-content-height)' },
+          to: { height: '0' },
+        },
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--reka-collapsible-content-height)' },
+          to: { height: '0' },
+        },
+        float: {
+          '0%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-20px)' },
+          '100%': { transform: 'translateY(0)' },
+        },
+      },
+      zIndex: {
+        '100': '100',
+        '1000': '1000',
+      },
+    },
+  },
+  safelist: ['dark'],
+} as Config;
+
+function createColorsPalette(name: string) {
+  // backgroundLightest: '#EFF6FF', // Tailwind CSS 默认的 `blue-50`
+  //         backgroundLighter: '#DBEAFE',  // Tailwind CSS 默认的 `blue-100`
+  //         backgroundLight: '#BFDBFE',    // Tailwind CSS 默认的 `blue-200`
+  //         borderLight: '#93C5FD',        // Tailwind CSS 默认的 `blue-300`
+  //         border: '#60A5FA',             // Tailwind CSS 默认的 `blue-400`
+  //         main: '#3B82F6',               // Tailwind CSS 默认的 `blue-500`
+  //         hover: '#2563EB',              // Tailwind CSS 默认的 `blue-600`
+  //         active: '#1D4ED8',             // Tailwind CSS 默认的 `blue-700`
+  //         backgroundDark: '#1E40AF',     // Tailwind CSS 默认的 `blue-800`
+  //         backgroundDarker: '#1E3A8A',   // Tailwind CSS 默认的 `blue-900`
+  //         backgroundDarkest: '#172554',  // Tailwind CSS 默认的 `blue-950`
+
+  // •	backgroundLightest (#EFF6FF): 适用于最浅的背景色，可能用于非常轻微的阴影或卡片的背景。
+  // •	backgroundLighter (#DBEAFE): 适用于略浅的背景色，通常用于次要背景或略浅的区域。
+  // •	backgroundLight (#BFDBFE): 适用于浅色背景，可能用于输入框或表单区域的背景。
+  // •	borderLight (#93C5FD): 适用于浅色边框，可能用于输入框或卡片的边框。
+  // •	border (#60A5FA): 适用于普通边框，可能用于按钮或卡片的边框。
+  // •	main (#3B82F6): 适用于主要的主题色，通常用于按钮、链接或主要的强调色。
+  // •	hover (#2563EB): 适用于鼠标悬停状态下的颜色，例如按钮悬停时的背景色或边框色。
+  // •	active (#1D4ED8): 适用于激活状态下的颜色，例如按钮按下时的背景色或边框色。
+  // •	backgroundDark (#1E40AF): 适用于深色背景，可能用于主要按钮或深色卡片背景。
+  // •	backgroundDarker (#1E3A8A): 适用于更深的背景，通常用于头部导航栏或页脚。
+  // •	backgroundDarkest (#172554): 适用于最深的背景，可能用于非常深色的区域或极端对比色。
+
+  return {
+    50: `hsl(var(--${name}-50))`,
+    100: `hsl(var(--${name}-100))`,
+    200: `hsl(var(--${name}-200))`,
+    300: `hsl(var(--${name}-300))`,
+    400: `hsl(var(--${name}-400))`,
+    500: `hsl(var(--${name}-500))`,
+    600: `hsl(var(--${name}-600))`,
+    700: `hsl(var(--${name}-700))`,
+    // 800: `hsl(var(--${name}-800))`,
+    // 900: `hsl(var(--${name}-900))`,
+    // 950: `hsl(var(--${name}-950))`,
+    // 激活状态下的颜色，适用于按钮按下时的背景色或边框色。
+    active: `hsl(var(--${name}-700))`,
+    // 浅色背景，适用于输入框或表单区域的背景。
+    'background-light': `hsl(var(--${name}-200))`,
+    // 适用于略浅的背景色，通常用于次要背景或略浅的区域。
+    'background-lighter': `hsl(var(--${name}-100))`,
+    // 最浅的背景色，适用于非常轻微的阴影或卡片的背景。
+    'background-lightest': `hsl(var(--${name}-50))`,
+    // 适用于普通边框，可能用于按钮或卡片的边框。
+    border: `hsl(var(--${name}-400))`,
+    // 浅色边框，适用于输入框或卡片的边框。
+    'border-light': `hsl(var(--${name}-300))`,
+    foreground: `hsl(var(--${name}-foreground))`,
+    // 鼠标悬停状态下的颜色，适用于按钮悬停时的背景色或边框色。
+    hover: `hsl(var(--${name}-600))`,
+    // 主色文本
+    text: `hsl(var(--${name}-500))`,
+    // 主色文本激活态
+    'text-active': `hsl(var(--${name}-700))`,
+    // 主色文本悬浮态
+    'text-hover': `hsl(var(--${name}-600))`,
+  };
+}
diff --git a/admin-ui/vue/internal/tailwind-config/src/module.d.ts b/admin-ui/vue/internal/tailwind-config/src/module.d.ts
new file mode 100644
index 0000000..a399653
--- /dev/null
+++ b/admin-ui/vue/internal/tailwind-config/src/module.d.ts
@@ -0,0 +1,3 @@
+declare module '@tailwindcss/nesting' {
+  export default any;
+}
diff --git a/admin-ui/vue/internal/tailwind-config/src/plugins/entry.ts b/admin-ui/vue/internal/tailwind-config/src/plugins/entry.ts
new file mode 100644
index 0000000..0d8e8ec
--- /dev/null
+++ b/admin-ui/vue/internal/tailwind-config/src/plugins/entry.ts
@@ -0,0 +1,53 @@
+import plugin from 'tailwindcss/plugin.js';
+
+const enterAnimationPlugin = plugin(({ addUtilities }) => {
+  const maxChild = 5;
+  const utilities: Record<string, any> = {};
+  for (let i = 1; i <= maxChild; i++) {
+    const baseDelay = 0.1;
+    const delay = `${baseDelay * i}s`;
+
+    utilities[`.enter-x:nth-child(${i})`] = {
+      animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
+      opacity: '0',
+      transform: `translateX(50px)`,
+    };
+
+    utilities[`.enter-y:nth-child(${i})`] = {
+      animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
+      opacity: '0',
+      transform: `translateY(50px)`,
+    };
+
+    utilities[`.-enter-x:nth-child(${i})`] = {
+      animation: `enter-x-animation 0.3s ease-in-out ${delay} forwards`,
+      opacity: '0',
+      transform: `translateX(-50px)`,
+    };
+
+    utilities[`.-enter-y:nth-child(${i})`] = {
+      animation: `enter-y-animation 0.3s ease-in-out ${delay} forwards`,
+      opacity: '0',
+      transform: `translateY(-50px)`,
+    };
+  }
+
+  // 添加动画关键帧
+  addUtilities(utilities);
+  addUtilities({
+    '@keyframes enter-x-animation': {
+      to: {
+        opacity: '1',
+        transform: 'translateX(0)',
+      },
+    },
+    '@keyframes enter-y-animation': {
+      to: {
+        opacity: '1',
+        transform: 'translateY(0)',
+      },
+    },
+  });
+});
+
+export { enterAnimationPlugin };
diff --git a/admin-ui/vue/internal/tailwind-config/src/postcss.config.ts b/admin-ui/vue/internal/tailwind-config/src/postcss.config.ts
new file mode 100644
index 0000000..43b30b3
--- /dev/null
+++ b/admin-ui/vue/internal/tailwind-config/src/postcss.config.ts
@@ -0,0 +1,15 @@
+import config from '.';
+
+export default {
+  plugins: {
+    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
+    // Specifying the config is not necessary in most cases, but it is included
+    autoprefixer: {},
+    // 修复 element-plus 和 ant-design-vue 的样式和tailwindcss冲突问题
+    'postcss-antd-fixes': { prefixes: ['ant', 'el'] },
+    'postcss-import': {},
+    'postcss-preset-env': {},
+    tailwindcss: { config },
+    'tailwindcss/nesting': {},
+  },
+};
diff --git a/admin-ui/vue/internal/tailwind-config/tsconfig.json b/admin-ui/vue/internal/tailwind-config/tsconfig.json
new file mode 100644
index 0000000..dbd3bcc
--- /dev/null
+++ b/admin-ui/vue/internal/tailwind-config/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/node.json",
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/internal/tsconfig/base.json b/admin-ui/vue/internal/tsconfig/base.json
new file mode 100644
index 0000000..1e45a78
--- /dev/null
+++ b/admin-ui/vue/internal/tsconfig/base.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Base",
+  "compilerOptions": {
+    "composite": false,
+    "target": "ESNext",
+
+    "moduleDetection": "force",
+    "experimentalDecorators": true,
+
+    "baseUrl": ".",
+    "module": "ESNext",
+
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+
+    "strict": true,
+    "strictNullChecks": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitOverride": true,
+    "noImplicitThis": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+
+    "inlineSources": false,
+    "noEmit": true,
+    "removeComments": true,
+    "sourceMap": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "preserveWatchOutput": true
+  },
+  "exclude": ["**/node_modules/**", "**/dist/**", "**/.turbo/**"]
+}
diff --git a/admin-ui/vue/internal/tsconfig/library.json b/admin-ui/vue/internal/tsconfig/library.json
new file mode 100644
index 0000000..7a976f0
--- /dev/null
+++ b/admin-ui/vue/internal/tsconfig/library.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Web Application",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "useDefineForClassFields": true,
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "noEmit": false
+  }
+}
diff --git a/admin-ui/vue/internal/tsconfig/node.json b/admin-ui/vue/internal/tsconfig/node.json
new file mode 100644
index 0000000..31ce8f1
--- /dev/null
+++ b/admin-ui/vue/internal/tsconfig/node.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Node Config",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "composite": false,
+    "lib": ["ESNext"],
+    "baseUrl": "./",
+    "types": ["node"],
+    "noImplicitAny": true
+  }
+}
diff --git a/admin-ui/vue/internal/tsconfig/package.json b/admin-ui/vue/internal/tsconfig/package.json
new file mode 100644
index 0000000..143bd32
--- /dev/null
+++ b/admin-ui/vue/internal/tsconfig/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@vben/tsconfig",
+  "version": "5.5.9",
+  "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/tsconfig"
+  },
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "base.json",
+    "library.json",
+    "node.json",
+    "web-app.json",
+    "web.json"
+  ],
+  "dependencies": {
+    "@vben/types": "workspace:*",
+    "vite": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/internal/tsconfig/web-app.json b/admin-ui/vue/internal/tsconfig/web-app.json
new file mode 100644
index 0000000..00479cb
--- /dev/null
+++ b/admin-ui/vue/internal/tsconfig/web-app.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Web Application",
+  "extends": "./web.json",
+  "compilerOptions": {
+    "types": ["vite/client", "@vben/types/global"]
+  }
+}
diff --git a/admin-ui/vue/internal/tsconfig/web.json b/admin-ui/vue/internal/tsconfig/web.json
new file mode 100644
index 0000000..a4b60ce
--- /dev/null
+++ b/admin-ui/vue/internal/tsconfig/web.json
@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Web Package",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "useDefineForClassFields": true,
+    "moduleResolution": "bundler",
+    "types": ["vite/client"],
+    "declaration": false
+  }
+}
diff --git a/admin-ui/vue/internal/vite-config/build.config.ts b/admin-ui/vue/internal/vite-config/build.config.ts
new file mode 100644
index 0000000..97e572c
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
diff --git a/admin-ui/vue/internal/vite-config/package.json b/admin-ui/vue/internal/vite-config/package.json
new file mode 100644
index 0000000..db1fb49
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "@vben/vite-config",
+  "version": "5.5.9",
+  "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/vite-config"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "stub": "pnpm unbuild --stub"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "dependencies": {
+    "@intlify/unplugin-vue-i18n": "catalog:",
+    "@jspm/generator": "catalog:",
+    "archiver": "catalog:",
+    "cheerio": "catalog:",
+    "get-port": "catalog:",
+    "html-minifier-terser": "catalog:",
+    "nitropack": "catalog:",
+    "resolve.exports": "catalog:",
+    "vite-plugin-pwa": "catalog:",
+    "vite-plugin-vue-devtools": "catalog:"
+  },
+  "devDependencies": {
+    "@pnpm/workspace.read-manifest": "catalog:",
+    "@types/archiver": "catalog:",
+    "@types/html-minifier-terser": "catalog:",
+    "@vben/node-utils": "workspace:*",
+    "@vitejs/plugin-vue": "catalog:",
+    "@vitejs/plugin-vue-jsx": "catalog:",
+    "dayjs": "catalog:",
+    "dotenv": "catalog:",
+    "rollup": "catalog:",
+    "rollup-plugin-visualizer": "catalog:",
+    "sass": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-compression": "catalog:",
+    "vite-plugin-dts": "catalog:",
+    "vite-plugin-html": "catalog:",
+    "vite-plugin-lazy-import": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/internal/vite-config/src/config/application.ts b/admin-ui/vue/internal/vite-config/src/config/application.ts
new file mode 100644
index 0000000..f9808cc
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/config/application.ts
@@ -0,0 +1,125 @@
+import type { CSSOptions, UserConfig } from 'vite';
+
+import type { DefineApplicationOptions } from '../typing';
+
+import path, { relative } from 'node:path';
+
+import { findMonorepoRoot } from '@vben/node-utils';
+
+import { NodePackageImporter } from 'sass';
+import { defineConfig, loadEnv, mergeConfig } from 'vite';
+
+import { defaultImportmapOptions, getDefaultPwaOptions } from '../options';
+import { loadApplicationPlugins } from '../plugins';
+import { loadAndConvertEnv } from '../utils/env';
+import { getCommonConfig } from './common';
+
+function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) {
+  return defineConfig(async (config) => {
+    const options = await userConfigPromise?.(config);
+    const { appTitle, base, port, ...envConfig } = await loadAndConvertEnv();
+    const { command, mode } = config;
+    const { application = {}, vite = {} } = options || {};
+    const root = process.cwd();
+    const isBuild = command === 'build';
+    const env = loadEnv(mode, root);
+
+    const plugins = await loadApplicationPlugins({
+      archiver: true,
+      archiverPluginOptions: {},
+      compress: false,
+      compressTypes: ['brotli', 'gzip'],
+      devtools: true,
+      env,
+      extraAppConfig: true,
+      html: true,
+      i18n: true,
+      importmapOptions: defaultImportmapOptions,
+      injectAppLoading: true,
+      injectMetadata: true,
+      isBuild,
+      license: true,
+      mode,
+      nitroMock: !isBuild,
+      nitroMockOptions: {},
+      print: !isBuild,
+      printInfoMap: {
+        'Vben Admin Docs': 'https://doc.vben.pro',
+      },
+      pwa: true,
+      pwaOptions: getDefaultPwaOptions(appTitle),
+      vxeTableLazyImport: true,
+      ...envConfig,
+      ...application,
+    });
+
+    const { injectGlobalScss = true } = application;
+
+    const applicationConfig: UserConfig = {
+      base,
+      build: {
+        rollupOptions: {
+          output: {
+            assetFileNames: '[ext]/[name]-[hash].[ext]',
+            chunkFileNames: 'js/[name]-[hash].js',
+            entryFileNames: 'jse/index-[name]-[hash].js',
+          },
+        },
+        target: 'es2015',
+      },
+      css: createCssOptions(injectGlobalScss),
+      esbuild: {
+        drop: isBuild
+          ? [
+              // 'console',
+              'debugger',
+            ]
+          : [],
+        legalComments: 'none',
+      },
+      plugins,
+      server: {
+        host: true,
+        port,
+        warmup: {
+          // 预热文件
+          clientFiles: [
+            './index.html',
+            './src/bootstrap.ts',
+            './src/{views,layouts,router,store,api,adapter}/*',
+          ],
+        },
+      },
+    };
+
+    const mergedCommonConfig = mergeConfig(
+      await getCommonConfig(),
+      applicationConfig,
+    );
+    return mergeConfig(mergedCommonConfig, vite);
+  });
+}
+
+function createCssOptions(injectGlobalScss = true): CSSOptions {
+  const root = findMonorepoRoot();
+  return {
+    preprocessorOptions: injectGlobalScss
+      ? {
+          scss: {
+            additionalData: (content: string, filepath: string) => {
+              const relativePath = relative(root, filepath);
+              // apps下的包注入全局样式
+              if (relativePath.startsWith(`apps${path.sep}`)) {
+                return `@use "@vben/styles/global" as *;\n${content}`;
+              }
+              return content;
+            },
+            api: 'modern',
+            importers: [new NodePackageImporter()],
+          },
+        }
+      : {},
+  };
+}
+
+export { defineApplicationConfig };
diff --git a/admin-ui/vue/internal/vite-config/src/config/common.ts b/admin-ui/vue/internal/vite-config/src/config/common.ts
new file mode 100644
index 0000000..653f210
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/config/common.ts
@@ -0,0 +1,13 @@
+import type { UserConfig } from 'vite';
+
+async function getCommonConfig(): Promise<UserConfig> {
+  return {
+    build: {
+      chunkSizeWarningLimit: 2000,
+      reportCompressedSize: false,
+      sourcemap: false,
+    },
+  };
+}
+
+export { getCommonConfig };
diff --git a/admin-ui/vue/internal/vite-config/src/config/index.ts b/admin-ui/vue/internal/vite-config/src/config/index.ts
new file mode 100644
index 0000000..d04a84a
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/config/index.ts
@@ -0,0 +1,37 @@
+import type { DefineConfig } from '../typing';
+
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { defineApplicationConfig } from './application';
+import { defineLibraryConfig } from './library';
+
+export * from './application';
+export * from './library';
+
+function defineConfig(
+  userConfigPromise?: DefineConfig,
+  type: 'application' | 'auto' | 'library' = 'auto',
+) {
+  let projectType = type;
+
+  // 根据包是否存在 index.html,自动判断类型
+  if (projectType === 'auto') {
+    const htmlPath = join(process.cwd(), 'index.html');
+    projectType = existsSync(htmlPath) ? 'application' : 'library';
+  }
+
+  switch (projectType) {
+    case 'application': {
+      return defineApplicationConfig(userConfigPromise);
+    }
+    case 'library': {
+      return defineLibraryConfig(userConfigPromise);
+    }
+    default: {
+      throw new Error(`Unsupported project type: ${projectType}`);
+    }
+  }
+}
+
+export { defineConfig };
diff --git a/admin-ui/vue/internal/vite-config/src/config/library.ts b/admin-ui/vue/internal/vite-config/src/config/library.ts
new file mode 100644
index 0000000..08b8135
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/config/library.ts
@@ -0,0 +1,59 @@
+import type { ConfigEnv, UserConfig } from 'vite';
+
+import type { DefineLibraryOptions } from '../typing';
+
+import { readPackageJSON } from '@vben/node-utils';
+
+import { defineConfig, mergeConfig } from 'vite';
+
+import { loadLibraryPlugins } from '../plugins';
+import { getCommonConfig } from './common';
+
+function defineLibraryConfig(userConfigPromise?: DefineLibraryOptions) {
+  return defineConfig(async (config: ConfigEnv) => {
+    const options = await userConfigPromise?.(config);
+    const { command, mode } = config;
+    const { library = {}, vite = {} } = options || {};
+    const root = process.cwd();
+    const isBuild = command === 'build';
+
+    const plugins = await loadLibraryPlugins({
+      dts: false,
+      injectMetadata: true,
+      isBuild,
+      mode,
+      ...library,
+    });
+
+    const { dependencies = {}, peerDependencies = {} } =
+      await readPackageJSON(root);
+
+    const externalPackages = [
+      ...Object.keys(dependencies),
+      ...Object.keys(peerDependencies),
+    ];
+
+    const packageConfig: UserConfig = {
+      build: {
+        lib: {
+          entry: 'src/index.ts',
+          fileName: () => 'index.mjs',
+          formats: ['es'],
+        },
+        rollupOptions: {
+          external: (id) => {
+            return externalPackages.some(
+              (pkg) => id === pkg || id.startsWith(`${pkg}/`),
+            );
+          },
+        },
+      },
+      plugins,
+    };
+    const commonConfig = await getCommonConfig();
+    const mergedConmonConfig = mergeConfig(commonConfig, packageConfig);
+    return mergeConfig(mergedConmonConfig, vite);
+  });
+}
+
+export { defineLibraryConfig };
diff --git a/admin-ui/vue/internal/vite-config/src/index.ts b/admin-ui/vue/internal/vite-config/src/index.ts
new file mode 100644
index 0000000..352a323
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/index.ts
@@ -0,0 +1,4 @@
+export * from './config';
+export * from './options';
+export * from './plugins';
+export { loadAndConvertEnv } from './utils/env';
diff --git a/admin-ui/vue/internal/vite-config/src/options.ts b/admin-ui/vue/internal/vite-config/src/options.ts
new file mode 100644
index 0000000..f1e2401
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/options.ts
@@ -0,0 +1,45 @@
+import type { Options as PwaPluginOptions } from 'vite-plugin-pwa';
+
+import type { ImportmapPluginOptions } from './typing';
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+const getDefaultPwaOptions = (name: string): Partial<PwaPluginOptions> => ({
+  manifest: {
+    description:
+      'Vben Admin is a modern admin dashboard template based on Vue 3. ',
+    icons: [
+      {
+        sizes: '192x192',
+        src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-192.png',
+        type: 'image/png',
+      },
+      {
+        sizes: '512x512',
+        src: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/pwa-icon-512.png',
+        type: 'image/png',
+      },
+    ],
+    name: `${name}${isDevelopment ? ' dev' : ''}`,
+    short_name: `${name}${isDevelopment ? ' dev' : ''}`,
+  },
+});
+
+/**
+ * importmap CDN 暂时不开启，因为有些包不支持，且网络不稳定
+ */
+const defaultImportmapOptions: ImportmapPluginOptions = {
+  // 通过 Importmap CDN 方式引入,
+  // 目前只有esm.sh源兼容性好一点，jspm.io对于 esm 入口要求高
+  defaultProvider: 'esm.sh',
+  importmap: [
+    { name: 'vue' },
+    { name: 'pinia' },
+    { name: 'vue-router' },
+    // { name: 'vue-i18n' },
+    { name: 'dayjs' },
+    { name: 'vue-demi' },
+  ],
+};
+
+export { defaultImportmapOptions, getDefaultPwaOptions };
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/archiver.ts b/admin-ui/vue/internal/vite-config/src/plugins/archiver.ts
new file mode 100644
index 0000000..8eec8a0
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/archiver.ts
@@ -0,0 +1,75 @@
+import type { PluginOption } from 'vite';
+
+import type { ArchiverPluginOptions } from '../typing';
+
+import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import { join } from 'node:path';
+
+import archiver from 'archiver';
+
+export const viteArchiverPlugin = (
+  options: ArchiverPluginOptions = {},
+): PluginOption => {
+  return {
+    apply: 'build',
+    closeBundle: {
+      handler() {
+        const { name = 'dist', outputDir = '.' } = options;
+
+        setTimeout(async () => {
+          const folderToZip = 'dist';
+
+          const zipOutputDir = join(process.cwd(), outputDir);
+          const zipOutputPath = join(zipOutputDir, `${name}.zip`);
+          try {
+            await fsp.mkdir(zipOutputDir, { recursive: true });
+          } catch {
+            // ignore
+          }
+
+          try {
+            await zipFolder(folderToZip, zipOutputPath);
+            console.log(`Folder has been zipped to: ${zipOutputPath}`);
+          } catch (error) {
+            console.error('Error zipping folder:', error);
+          }
+        }, 0);
+      },
+      order: 'post',
+    },
+    enforce: 'post',
+    name: 'vite:archiver',
+  };
+};
+
+async function zipFolder(
+  folderPath: string,
+  outputPath: string,
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const output = fs.createWriteStream(outputPath);
+    const archive = archiver('zip', {
+      zlib: { level: 9 }, // 设置压缩级别为 9 以实现最高压缩率
+    });
+
+    output.on('close', () => {
+      console.log(
+        `ZIP file created: ${outputPath} (${archive.pointer()} total bytes)`,
+      );
+      resolve();
+    });
+
+    archive.on('error', (err) => {
+      reject(err);
+    });
+
+    archive.pipe(output);
+
+    // 使用 directory 方法以流的方式压缩文件夹，减少内存消耗
+    archive.directory(folderPath, false);
+
+    // 流式处理完成
+    archive.finalize();
+  });
+}
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/extra-app-config.ts b/admin-ui/vue/internal/vite-config/src/plugins/extra-app-config.ts
new file mode 100644
index 0000000..813819b
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/extra-app-config.ts
@@ -0,0 +1,92 @@
+import type { PluginOption } from 'vite';
+
+import {
+  colors,
+  generatorContentHash,
+  readPackageJSON,
+} from '@vben/node-utils';
+
+import { loadEnv } from '../utils/env';
+
+interface PluginOptions {
+  isBuild: boolean;
+  root: string;
+}
+
+const GLOBAL_CONFIG_FILE_NAME = '_app.config.js';
+const VBEN_ADMIN_PRO_APP_CONF = '_VBEN_ADMIN_PRO_APP_CONF_';
+
+/**
+ * 用于将配置文件抽离出来并注入到项目中
+ * @returns
+ */
+
+async function viteExtraAppConfigPlugin({
+  isBuild,
+  root,
+}: PluginOptions): Promise<PluginOption | undefined> {
+  let publicPath: string;
+  let source: string;
+
+  if (!isBuild) {
+    return;
+  }
+
+  const { version = '' } = await readPackageJSON(root);
+
+  return {
+    async configResolved(config) {
+      publicPath = ensureTrailingSlash(config.base);
+      source = await getConfigSource();
+    },
+    async generateBundle() {
+      try {
+        this.emitFile({
+          fileName: GLOBAL_CONFIG_FILE_NAME,
+          source,
+          type: 'asset',
+        });
+
+        console.log(colors.cyan(`✨configuration file is build successfully!`));
+      } catch (error) {
+        console.log(
+          colors.red(
+            `configuration file configuration file failed to package:\n${error}`,
+          ),
+        );
+      }
+    },
+    name: 'vite:extra-app-config',
+    async transformIndexHtml(html) {
+      const hash = `v=${version}-${generatorContentHash(source, 8)}`;
+
+      const appConfigSrc = `${publicPath}${GLOBAL_CONFIG_FILE_NAME}?${hash}`;
+
+      return {
+        html,
+        tags: [{ attrs: { src: appConfigSrc }, tag: 'script' }],
+      };
+    },
+  };
+}
+
+async function getConfigSource() {
+  const config = await loadEnv();
+  const windowVariable = `window.${VBEN_ADMIN_PRO_APP_CONF}`;
+  // 确保变量不会被修改
+  let source = `${windowVariable}=${JSON.stringify(config)};`;
+  source += `
+    Object.freeze(${windowVariable});
+    Object.defineProperty(window, "${VBEN_ADMIN_PRO_APP_CONF}", {
+      configurable: false,
+      writable: false,
+    });
+  `.replaceAll(/\s/g, '');
+  return source;
+}
+
+function ensureTrailingSlash(path: string) {
+  return path.endsWith('/') ? path : `${path}/`;
+}
+
+export { viteExtraAppConfigPlugin };
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/importmap.ts b/admin-ui/vue/internal/vite-config/src/plugins/importmap.ts
new file mode 100644
index 0000000..0ccda99
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/importmap.ts
@@ -0,0 +1,245 @@
+/**
+ * 参考 https://github.com/jspm/vite-plugin-jspm，调整为需要的功能
+ */
+import type { GeneratorOptions } from '@jspm/generator';
+import type { Plugin } from 'vite';
+
+import { Generator } from '@jspm/generator';
+import { load } from 'cheerio';
+import { minify } from 'html-minifier-terser';
+
+const DEFAULT_PROVIDER = 'jspm.io';
+
+type pluginOptions = GeneratorOptions & {
+  debug?: boolean;
+  defaultProvider?: 'esm.sh' | 'jsdelivr' | 'jspm.io';
+  importmap?: Array<{ name: string; range?: string }>;
+};
+
+// async function getLatestVersionOfShims() {
+//   const result = await fetch('https://ga.jspm.io/npm:es-module-shims');
+//   const version = result.text();
+//   return version;
+// }
+
+async function getShimsUrl(provide: string) {
+  // const version = await getLatestVersionOfShims();
+  const version = '1.10.0';
+
+  const shimsSubpath = `dist/es-module-shims.js`;
+  const providerShimsMap: Record<string, string> = {
+    'esm.sh': `https://esm.sh/es-module-shims@${version}/${shimsSubpath}`,
+    // unpkg: `https://unpkg.com/es-module-shims@${version}/${shimsSubpath}`,
+    jsdelivr: `https://cdn.jsdelivr.net/npm/es-module-shims@${version}/${shimsSubpath}`,
+
+    // 下面两个CDN不稳定，暂时不用
+    'jspm.io': `https://ga.jspm.io/npm:es-module-shims@${version}/${shimsSubpath}`,
+  };
+
+  return providerShimsMap[provide] || providerShimsMap[DEFAULT_PROVIDER];
+}
+
+let generator: Generator;
+
+async function viteImportMapPlugin(
+  pluginOptions?: pluginOptions,
+): Promise<Plugin[]> {
+  const { importmap } = pluginOptions || {};
+
+  let isSSR = false;
+  let isBuild = false;
+  let installed = false;
+  let installError: Error | null = null;
+
+  const options: pluginOptions = Object.assign(
+    {},
+    {
+      debug: false,
+      defaultProvider: 'jspm.io',
+      env: ['production', 'browser', 'module'],
+      importmap: [],
+    },
+    pluginOptions,
+  );
+
+  generator = new Generator({
+    ...options,
+    baseUrl: process.cwd(),
+  });
+
+  if (options?.debug) {
+    (async () => {
+      for await (const { message, type } of generator.logStream()) {
+        console.log(`${type}: ${message}`);
+      }
+    })();
+  }
+
+  const imports = options.inputMap?.imports ?? {};
+  const scopes = options.inputMap?.scopes ?? {};
+  const firstLayerKeys = Object.keys(scopes);
+  const inputMapScopes: string[] = [];
+  firstLayerKeys.forEach((key) => {
+    inputMapScopes.push(...Object.keys(scopes[key] || {}));
+  });
+  const inputMapImports = Object.keys(imports);
+
+  const allDepNames: string[] = [
+    ...(importmap?.map((item) => item.name) || []),
+    ...inputMapImports,
+    ...inputMapScopes,
+  ];
+  const depNames = new Set<string>(allDepNames);
+
+  const installDeps = importmap?.map((item) => ({
+    range: item.range,
+    target: item.name,
+  }));
+
+  return [
+    {
+      async config(_, { command, isSsrBuild }) {
+        isBuild = command === 'build';
+        isSSR = !!isSsrBuild;
+      },
+      enforce: 'pre',
+      name: 'importmap:external',
+      resolveId(id) {
+        if (isSSR || !isBuild) {
+          return null;
+        }
+
+        if (!depNames.has(id)) {
+          return null;
+        }
+        return { external: true, id };
+      },
+    },
+    {
+      enforce: 'post',
+      name: 'importmap:install',
+      async resolveId() {
+        if (isSSR || !isBuild || installed) {
+          return null;
+        }
+        try {
+          installed = true;
+          await Promise.allSettled(
+            (installDeps || []).map((dep) => generator.install(dep)),
+          );
+        } catch (error: any) {
+          installError = error;
+          installed = false;
+        }
+        return null;
+      },
+    },
+    {
+      buildEnd() {
+        // 未生成importmap时，抛出错误，防止被turbo缓存
+        if (!installed && !isSSR) {
+          installError && console.error(installError);
+          throw new Error('Importmap installation failed.');
+        }
+      },
+      enforce: 'post',
+      name: 'importmap:html',
+      transformIndexHtml: {
+        async handler(html) {
+          if (isSSR || !isBuild) {
+            return html;
+          }
+
+          const importmapJson = generator.getMap();
+
+          if (!importmapJson) {
+            return html;
+          }
+
+          const esModuleShimsSrc = await getShimsUrl(
+            options.defaultProvider || DEFAULT_PROVIDER,
+          );
+
+          const resultHtml = await injectShimsToHtml(
+            html,
+            esModuleShimsSrc || '',
+          );
+          html = await minify(resultHtml || html, {
+            collapseWhitespace: true,
+            minifyCSS: true,
+            minifyJS: true,
+            removeComments: false,
+          });
+
+          return {
+            html,
+            tags: [
+              {
+                attrs: {
+                  type: 'importmap',
+                },
+                injectTo: 'head-prepend',
+                tag: 'script',
+                children: `${JSON.stringify(importmapJson)}`,
+              },
+            ],
+          };
+        },
+        order: 'post',
+      },
+    },
+  ];
+}
+
+async function injectShimsToHtml(html: string, esModuleShimUrl: string) {
+  const $ = load(html);
+
+  const $script = $(`script[type='module']`);
+
+  if (!$script) {
+    return;
+  }
+
+  const entry = $script.attr('src');
+
+  $script.removeAttr('type');
+  $script.removeAttr('crossorigin');
+  $script.removeAttr('src');
+  $script.html(`
+if (!HTMLScriptElement.supports || !HTMLScriptElement.supports('importmap')) {
+  self.importShim = function () {
+      const promise = new Promise((resolve, reject) => {
+          document.head.appendChild(
+              Object.assign(document.createElement('script'), {
+                  src: '${esModuleShimUrl}',
+                  crossorigin: 'anonymous',
+                  async: true,
+                  onload() {
+                      if (!importShim.$proxy) {
+                          resolve(importShim);
+                      } else {
+                          reject(new Error('No globalThis.importShim found:' + esModuleShimUrl));
+                      }
+                  },
+                  onerror(error) {
+                      reject(error);
+                  },
+              }),
+          );
+      });
+      importShim.$proxy = true;
+      return promise.then((importShim) => importShim(...arguments));
+  };
+}
+
+var modules = ['${entry}'];
+typeof importShim === 'function'
+  ? modules.forEach((moduleName) => importShim(moduleName))
+  : modules.forEach((moduleName) => import(moduleName));
+ `);
+  $('body').after($script);
+  $('head').remove(`script[type='module']`);
+  return $.html();
+}
+
+export { viteImportMapPlugin };
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/index.ts b/admin-ui/vue/internal/vite-config/src/plugins/index.ts
new file mode 100644
index 0000000..da08db4
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/index.ts
@@ -0,0 +1,247 @@
+import type { PluginOption } from 'vite';
+
+import type {
+  ApplicationPluginOptions,
+  CommonPluginOptions,
+  ConditionPlugin,
+  LibraryPluginOptions,
+} from '../typing';
+
+import viteVueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import viteVue from '@vitejs/plugin-vue';
+import viteVueJsx from '@vitejs/plugin-vue-jsx';
+import { visualizer as viteVisualizerPlugin } from 'rollup-plugin-visualizer';
+import viteCompressPlugin from 'vite-plugin-compression';
+import viteDtsPlugin from 'vite-plugin-dts';
+import { createHtmlPlugin as viteHtmlPlugin } from 'vite-plugin-html';
+import { VitePWA } from 'vite-plugin-pwa';
+import viteVueDevTools from 'vite-plugin-vue-devtools';
+
+import { viteArchiverPlugin } from './archiver';
+import { viteExtraAppConfigPlugin } from './extra-app-config';
+import { viteImportMapPlugin } from './importmap';
+import { viteInjectAppLoadingPlugin } from './inject-app-loading';
+import { viteMetadataPlugin } from './inject-metadata';
+import { viteLicensePlugin } from './license';
+import { viteNitroMockPlugin } from './nitro-mock';
+import { vitePrintPlugin } from './print';
+import { viteVxeTableImportsPlugin } from './vxe-table';
+
+/**
+ * 获取条件成立的 vite 插件
+ * @param conditionPlugins
+ */
+async function loadConditionPlugins(conditionPlugins: ConditionPlugin[]) {
+  const plugins: PluginOption[] = [];
+  for (const conditionPlugin of conditionPlugins) {
+    if (conditionPlugin.condition) {
+      const realPlugins = await conditionPlugin.plugins();
+      plugins.push(...realPlugins);
+    }
+  }
+  return plugins.flat();
+}
+
+/**
+ * 根据条件获取通用的vite插件
+ */
+async function loadCommonPlugins(
+  options: CommonPluginOptions,
+): Promise<ConditionPlugin[]> {
+  const { devtools, injectMetadata, isBuild, visualizer } = options;
+  return [
+    {
+      condition: true,
+      plugins: () => [
+        viteVue({
+          script: {
+            defineModel: true,
+            // propsDestructure: true,
+          },
+        }),
+        viteVueJsx(),
+      ],
+    },
+
+    {
+      condition: !isBuild && devtools,
+      plugins: () => [viteVueDevTools()],
+    },
+    {
+      condition: injectMetadata,
+      plugins: async () => [await viteMetadataPlugin()],
+    },
+    {
+      condition: isBuild && !!visualizer,
+      plugins: () => [<PluginOption>viteVisualizerPlugin({
+          filename: './node_modules/.cache/visualizer/stats.html',
+          gzipSize: true,
+          open: true,
+        })],
+    },
+  ];
+}
+
+/**
+ * 根据条件获取应用类型的vite插件
+ */
+async function loadApplicationPlugins(
+  options: ApplicationPluginOptions,
+): Promise<PluginOption[]> {
+  // 单独取，否则commonOptions拿不到
+  const isBuild = options.isBuild;
+  const env = options.env;
+
+  const {
+    archiver,
+    archiverPluginOptions,
+    compress,
+    compressTypes,
+    extraAppConfig,
+    html,
+    i18n,
+    importmap,
+    importmapOptions,
+    injectAppLoading,
+    license,
+    nitroMock,
+    nitroMockOptions,
+    print,
+    printInfoMap,
+    pwa,
+    pwaOptions,
+    vxeTableLazyImport,
+    ...commonOptions
+  } = options;
+
+  const commonPlugins = await loadCommonPlugins(commonOptions);
+
+  return await loadConditionPlugins([
+    ...commonPlugins,
+    {
+      condition: i18n,
+      plugins: async () => {
+        return [
+          viteVueI18nPlugin({
+            compositionOnly: true,
+            fullInstall: true,
+            runtimeOnly: true,
+          }),
+        ];
+      },
+    },
+    {
+      condition: print,
+      plugins: async () => {
+        return [await vitePrintPlugin({ infoMap: printInfoMap })];
+      },
+    },
+    {
+      condition: vxeTableLazyImport,
+      plugins: async () => {
+        return [await viteVxeTableImportsPlugin()];
+      },
+    },
+    {
+      condition: nitroMock,
+      plugins: async () => {
+        return [await viteNitroMockPlugin(nitroMockOptions)];
+      },
+    },
+
+    {
+      condition: injectAppLoading,
+      plugins: async () => [await viteInjectAppLoadingPlugin(!!isBuild, env)],
+    },
+    {
+      condition: license,
+      plugins: async () => [await viteLicensePlugin()],
+    },
+    {
+      condition: pwa,
+      plugins: () =>
+        VitePWA({
+          injectRegister: false,
+          workbox: {
+            globPatterns: [],
+          },
+          ...pwaOptions,
+          manifest: {
+            display: 'standalone',
+            start_url: '/',
+            theme_color: '#ffffff',
+            ...pwaOptions?.manifest,
+          },
+        }),
+    },
+    {
+      condition: isBuild && !!compress,
+      plugins: () => {
+        const compressPlugins: PluginOption[] = [];
+        if (compressTypes?.includes('brotli')) {
+          compressPlugins.push(
+            viteCompressPlugin({ deleteOriginFile: false, ext: '.br' }),
+          );
+        }
+        if (compressTypes?.includes('gzip')) {
+          compressPlugins.push(
+            viteCompressPlugin({ deleteOriginFile: false, ext: '.gz' }),
+          );
+        }
+        return compressPlugins;
+      },
+    },
+    {
+      condition: !!html,
+      plugins: () => [viteHtmlPlugin({ minify: true })],
+    },
+    {
+      condition: isBuild && importmap,
+      plugins: () => {
+        return [viteImportMapPlugin(importmapOptions)];
+      },
+    },
+    {
+      condition: isBuild && extraAppConfig,
+      plugins: async () => [
+        await viteExtraAppConfigPlugin({ isBuild: true, root: process.cwd() }),
+      ],
+    },
+    {
+      condition: archiver,
+      plugins: async () => {
+        return [await viteArchiverPlugin(archiverPluginOptions)];
+      },
+    },
+  ]);
+}
+
+/**
+ * 根据条件获取库类型的vite插件
+ */
+async function loadLibraryPlugins(
+  options: LibraryPluginOptions,
+): Promise<PluginOption[]> {
+  // 单独取，否则commonOptions拿不到
+  const isBuild = options.isBuild;
+  const { dts, ...commonOptions } = options;
+  const commonPlugins = await loadCommonPlugins(commonOptions);
+  return await loadConditionPlugins([
+    ...commonPlugins,
+    {
+      condition: isBuild && !!dts,
+      plugins: () => [viteDtsPlugin({ logLevel: 'error' })],
+    },
+  ]);
+}
+
+export {
+  loadApplicationPlugins,
+  loadLibraryPlugins,
+  viteArchiverPlugin,
+  viteCompressPlugin,
+  viteDtsPlugin,
+  viteHtmlPlugin,
+  viteVisualizerPlugin,
+  viteVxeTableImportsPlugin,
+};
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/README.md b/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/README.md
new file mode 100644
index 0000000..8d2358f
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/README.md
@@ -0,0 +1,3 @@
+# inject-app-loading
+
+用于在应用加载时显示加载动画的插件，可自行选择加载动画的样式。
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/default-loading-antd.html b/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/default-loading-antd.html
new file mode 100644
index 0000000..20a21fb
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/default-loading-antd.html
@@ -0,0 +1,107 @@
+<style data-app-loading="inject-css">
+  html {
+    /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
+    line-height: 1.15;
+  }
+
+  .dark .loading {
+    background-color: #0d0d10;
+  }
+
+  .dark .loading .title {
+    color: rgb(255 255 255 / 85%);
+  }
+
+  .loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    background-color: #f4f7f9;
+  }
+
+  .loading.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.6s ease-out;
+  }
+
+  .loading .title {
+    margin-top: 36px;
+    font-size: 30px;
+    font-weight: 600;
+    color: rgb(0 0 0 / 85%);
+  }
+
+  .dot {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+    margin-top: 30px;
+    font-size: 32px;
+    transform: rotate(45deg);
+    animation: rotate-ani 1.2s infinite linear;
+  }
+
+  .dot i {
+    position: absolute;
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-color: hsl(var(--primary, 210 100% 50%));
+    border-radius: 100%;
+    opacity: 0.3;
+    transform: scale(0.75);
+    transform-origin: 50% 50%;
+    animation: spin-move-ani 1s infinite linear alternate;
+  }
+
+  .dot i:nth-child(1) {
+    top: 0;
+    left: 0;
+  }
+
+  .dot i:nth-child(2) {
+    top: 0;
+    right: 0;
+    animation-delay: 0.4s;
+  }
+
+  .dot i:nth-child(3) {
+    right: 0;
+    bottom: 0;
+    animation-delay: 0.8s;
+  }
+
+  .dot i:nth-child(4) {
+    bottom: 0;
+    left: 0;
+    animation-delay: 1.2s;
+  }
+
+  @keyframes rotate-ani {
+    to {
+      transform: rotate(405deg);
+    }
+  }
+
+  @keyframes spin-move-ani {
+    to {
+      opacity: 1;
+    }
+  }
+</style>
+<div class="loading" id="__app-loading__">
+  <span class="dot"><i></i><i></i><i></i><i></i></span>
+  <div class="title"><%= VITE_APP_TITLE %></div>
+</div>
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/default-loading.html b/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/default-loading.html
new file mode 100644
index 0000000..2895705
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/default-loading.html
@@ -0,0 +1,113 @@
+<style data-app-loading="inject-css">
+  html {
+    /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
+    line-height: 1.15;
+  }
+
+  .loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #f4f7f9;
+
+    /* transition: all 0.8s ease-out; */
+  }
+
+  .loading.hidden {
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.8s ease-out;
+  }
+
+  .dark .loading {
+    background: #0d0d10;
+  }
+
+  .title {
+    margin-top: 66px;
+    font-size: 28px;
+    font-weight: 600;
+    color: rgb(0 0 0 / 85%);
+  }
+
+  .dark .title {
+    color: #fff;
+  }
+
+  .loader {
+    position: relative;
+    width: 48px;
+    height: 48px;
+  }
+
+  .loader::before {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    width: 48px;
+    height: 5px;
+    content: '';
+    background: hsl(var(--primary, 210 100% 50%) / 50%);
+    border-radius: 50%;
+    animation: shadow-ani 0.5s linear infinite;
+  }
+
+  .loader::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background: hsl(var(--primary, 210 100% 50%));
+    border-radius: 4px;
+    animation: jump-ani 0.5s linear infinite;
+  }
+
+  @keyframes jump-ani {
+    15% {
+      border-bottom-right-radius: 3px;
+    }
+
+    25% {
+      transform: translateY(9px) rotate(22.5deg);
+    }
+
+    50% {
+      border-bottom-right-radius: 40px;
+      transform: translateY(18px) scale(1, 0.9) rotate(45deg);
+    }
+
+    75% {
+      transform: translateY(9px) rotate(67.5deg);
+    }
+
+    100% {
+      transform: translateY(0) rotate(90deg);
+    }
+  }
+
+  @keyframes shadow-ani {
+    0%,
+    100% {
+      transform: scale(1, 1);
+    }
+
+    50% {
+      transform: scale(1.2, 1);
+    }
+  }
+</style>
+<div class="loading" id="__app-loading__">
+  <div class="loader"></div>
+  <div class="title"><%= VITE_APP_TITLE %></div>
+</div>
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/index.ts b/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/index.ts
new file mode 100644
index 0000000..c6a7983
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/inject-app-loading/index.ts
@@ -0,0 +1,66 @@
+import type { PluginOption } from 'vite';
+
+import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { readPackageJSON } from '@vben/node-utils';
+
+/**
+ * 用于生成将loading样式注入到项目中
+ * 为多app提供loading样式，无需在每个 app -> index.html单独引入
+ */
+async function viteInjectAppLoadingPlugin(
+  isBuild: boolean,
+  env: Record<string, any> = {},
+  loadingTemplate = 'loading.html',
+): Promise<PluginOption | undefined> {
+  const loadingHtml = await getLoadingRawByHtmlTemplate(loadingTemplate);
+  const { version } = await readPackageJSON(process.cwd());
+  const envRaw = isBuild ? 'prod' : 'dev';
+  const cacheName = `'${env.VITE_APP_NAMESPACE}-${version}-${envRaw}-preferences-theme'`;
+
+  // 获取缓存的主题
+  // 保证黑暗主题下，刷新页面时，loading也是黑暗主题
+  const injectScript = `
+  <script data-app-loading="inject-js">
+  var theme = localStorage.getItem(${cacheName});
+  document.documentElement.classList.toggle('dark', /dark/.test(theme));
+</script>
+`;
+
+  if (!loadingHtml) {
+    return;
+  }
+
+  return {
+    enforce: 'pre',
+    name: 'vite:inject-app-loading',
+    transformIndexHtml: {
+      handler(html) {
+        const re = /<body\s*>/;
+        html = html.replace(re, `<body>${injectScript}${loadingHtml}`);
+        return html;
+      },
+      order: 'pre',
+    },
+  };
+}
+
+/**
+ * 用于获取loading的html模板
+ */
+async function getLoadingRawByHtmlTemplate(loadingTemplate: string) {
+  // 支持在app内自定义loading模板，模版参考default-loading.html即可
+  let appLoadingPath = join(process.cwd(), loadingTemplate);
+
+  if (!fs.existsSync(appLoadingPath)) {
+    const __dirname = fileURLToPath(new URL('.', import.meta.url));
+    appLoadingPath = join(__dirname, './default-loading.html');
+  }
+
+  return await fsp.readFile(appLoadingPath, 'utf8');
+}
+
+export { viteInjectAppLoadingPlugin };
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/inject-metadata.ts b/admin-ui/vue/internal/vite-config/src/plugins/inject-metadata.ts
new file mode 100644
index 0000000..41c4db4
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/inject-metadata.ts
@@ -0,0 +1,111 @@
+import type { PluginOption } from 'vite';
+
+import {
+  dateUtil,
+  findMonorepoRoot,
+  getPackages,
+  readPackageJSON,
+} from '@vben/node-utils';
+
+import { readWorkspaceManifest } from '@pnpm/workspace.read-manifest';
+
+function resolvePackageVersion(
+  pkgsMeta: Record<string, string>,
+  name: string,
+  value: string,
+  catalog: Record<string, string>,
+) {
+  if (value.includes('catalog:')) {
+    return catalog[name];
+  }
+
+  if (value.includes('workspace')) {
+    return pkgsMeta[name];
+  }
+
+  return value;
+}
+
+async function resolveMonorepoDependencies() {
+  const { packages } = await getPackages();
+  const manifest = await readWorkspaceManifest(findMonorepoRoot());
+  const catalog = manifest?.catalog || {};
+
+  const resultDevDependencies: Record<string, string | undefined> = {};
+  const resultDependencies: Record<string, string | undefined> = {};
+  const pkgsMeta: Record<string, string> = {};
+
+  for (const { packageJson } of packages) {
+    pkgsMeta[packageJson.name] = packageJson.version;
+  }
+
+  for (const { packageJson } of packages) {
+    const { dependencies = {}, devDependencies = {} } = packageJson;
+    for (const [key, value] of Object.entries(dependencies)) {
+      resultDependencies[key] = resolvePackageVersion(
+        pkgsMeta,
+        key,
+        value,
+        catalog,
+      );
+    }
+    for (const [key, value] of Object.entries(devDependencies)) {
+      resultDevDependencies[key] = resolvePackageVersion(
+        pkgsMeta,
+        key,
+        value,
+        catalog,
+      );
+    }
+  }
+  return {
+    dependencies: resultDependencies,
+    devDependencies: resultDevDependencies,
+  };
+}
+
+/**
+ * 用于注入项目信息
+ */
+async function viteMetadataPlugin(
+  root = process.cwd(),
+): Promise<PluginOption | undefined> {
+  const { author, description, homepage, license, version } =
+    await readPackageJSON(root);
+
+  const buildTime = dateUtil().format('YYYY-MM-DD HH:mm:ss');
+
+  return {
+    async config() {
+      const { dependencies, devDependencies } =
+        await resolveMonorepoDependencies();
+
+      const isAuthorObject = typeof author === 'object';
+      const authorName = isAuthorObject ? author.name : author;
+      const authorEmail = isAuthorObject ? author.email : null;
+      const authorUrl = isAuthorObject ? author.url : null;
+
+      return {
+        define: {
+          __VBEN_ADMIN_METADATA__: JSON.stringify({
+            authorEmail,
+            authorName,
+            authorUrl,
+            buildTime,
+            dependencies,
+            description,
+            devDependencies,
+            homepage,
+            license,
+            version,
+          }),
+          'import.meta.env.VITE_APP_VERSION': JSON.stringify(version),
+        },
+      };
+    },
+    enforce: 'post',
+    name: 'vite:inject-metadata',
+  };
+}
+
+export { viteMetadataPlugin };
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/license.ts b/admin-ui/vue/internal/vite-config/src/plugins/license.ts
new file mode 100644
index 0000000..81492f9
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/license.ts
@@ -0,0 +1,63 @@
+import type {
+  NormalizedOutputOptions,
+  OutputBundle,
+  OutputChunk,
+} from 'rollup';
+import type { PluginOption } from 'vite';
+
+import { EOL } from 'node:os';
+
+import { dateUtil, readPackageJSON } from '@vben/node-utils';
+
+/**
+ * 用于注入版权信息
+ * @returns
+ */
+
+async function viteLicensePlugin(
+  root = process.cwd(),
+): Promise<PluginOption | undefined> {
+  const {
+    description = '',
+    homepage = '',
+    version = '',
+  } = await readPackageJSON(root);
+
+  return {
+    apply: 'build',
+    enforce: 'post',
+    generateBundle: {
+      handler: (_options: NormalizedOutputOptions, bundle: OutputBundle) => {
+        const date = dateUtil().format('YYYY-MM-DD ');
+        const copyrightText = `/*!
+  * Vben Admin
+  * Version: ${version}
+  * Author: vben
+  * Copyright (C) 2024 Vben
+  * License: MIT License
+  * Description: ${description}
+  * Date Created: ${date}
+  * Homepage: ${homepage}
+  * Contact: xxx@example.com
+*/
+              `.trim();
+
+        for (const [, fileContent] of Object.entries(bundle)) {
+          if (fileContent.type === 'chunk' && fileContent.isEntry) {
+            const chunkContent = fileContent as OutputChunk;
+            // 插入版权信息
+            const content = chunkContent.code;
+            const updatedContent = `${copyrightText}${EOL}${content}`;
+
+            // 更新bundle
+            (fileContent as OutputChunk).code = updatedContent;
+          }
+        }
+      },
+      order: 'post',
+    },
+    name: 'vite:license',
+  };
+}
+
+export { viteLicensePlugin };
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/nitro-mock.ts b/admin-ui/vue/internal/vite-config/src/plugins/nitro-mock.ts
new file mode 100644
index 0000000..60d7327
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/nitro-mock.ts
@@ -0,0 +1,98 @@
+import type { PluginOption } from 'vite';
+
+import type { NitroMockPluginOptions } from '../typing';
+
+import { colors, consola, getPackage } from '@vben/node-utils';
+
+import getPort from 'get-port';
+import { build, createDevServer, createNitro, prepare } from 'nitropack';
+
+const hmrKeyRe = /^runtimeConfig\.|routeRules\./;
+
+export const viteNitroMockPlugin = ({
+  mockServerPackage = '@vben/backend-mock',
+  port = 5320,
+  verbose = true,
+}: NitroMockPluginOptions = {}): PluginOption => {
+  return {
+    async configureServer(server) {
+      const availablePort = await getPort({ port });
+      if (availablePort !== port) {
+        return;
+      }
+
+      const pkg = await getPackage(mockServerPackage);
+      if (!pkg) {
+        consola.log(
+          `Package ${mockServerPackage} not found. Skip mock server.`,
+        );
+        return;
+      }
+
+      runNitroServer(pkg.dir, port, verbose);
+
+      const _printUrls = server.printUrls;
+      server.printUrls = () => {
+        _printUrls();
+
+        consola.log(
+          `  ${colors.green('➜')}  ${colors.bold('Nitro Mock Server')}: ${colors.cyan(`http://localhost:${port}/api`)}`,
+        );
+      };
+    },
+    enforce: 'pre',
+    name: 'vite:mock-server',
+  };
+};
+
+async function runNitroServer(rootDir: string, port: number, verbose: boolean) {
+  let nitro: any;
+  const reload = async () => {
+    if (nitro) {
+      consola.info('Restarting dev server...');
+      if ('unwatch' in nitro.options._c12) {
+        await nitro.options._c12.unwatch();
+      }
+      await nitro.close();
+    }
+    nitro = await createNitro(
+      {
+        dev: true,
+        preset: 'nitro-dev',
+        rootDir,
+      },
+      {
+        c12: {
+          async onUpdate({ getDiff, newConfig }) {
+            const diff = getDiff();
+            if (diff.length === 0) {
+              return;
+            }
+            verbose &&
+              consola.info(
+                `Nitro config updated:\n${diff
+                  .map((entry) => `  ${entry.toString()}`)
+                  .join('\n')}`,
+              );
+            await (diff.every((e) => hmrKeyRe.test(e.key))
+              ? nitro.updateConfig(newConfig.config)
+              : reload());
+          },
+        },
+        watch: true,
+      },
+    );
+    nitro.hooks.hookOnce('restart', reload);
+
+    const server = createDevServer(nitro);
+    await server.listen(port, { showURL: false });
+    await prepare(nitro);
+    await build(nitro);
+
+    if (verbose) {
+      console.log('');
+      consola.success(colors.bold(colors.green('Nitro Mock Server started.')));
+    }
+  };
+  return await reload();
+}
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/print.ts b/admin-ui/vue/internal/vite-config/src/plugins/print.ts
new file mode 100644
index 0000000..0146b8a
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/print.ts
@@ -0,0 +1,28 @@
+import type { PluginOption } from 'vite';
+
+import type { PrintPluginOptions } from '../typing';
+
+import { colors } from '@vben/node-utils';
+
+export const vitePrintPlugin = (
+  options: PrintPluginOptions = {},
+): PluginOption => {
+  const { infoMap = {} } = options;
+
+  return {
+    configureServer(server) {
+      const _printUrls = server.printUrls;
+      server.printUrls = () => {
+        _printUrls();
+
+        for (const [key, value] of Object.entries(infoMap)) {
+          console.log(
+            `  ${colors.green('➜')}  ${colors.bold(key)}: ${colors.cyan(value)}`,
+          );
+        }
+      };
+    },
+    enforce: 'pre',
+    name: 'vite:print-info',
+  };
+};
diff --git a/admin-ui/vue/internal/vite-config/src/plugins/vxe-table.ts b/admin-ui/vue/internal/vite-config/src/plugins/vxe-table.ts
new file mode 100644
index 0000000..3c107a7
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/plugins/vxe-table.ts
@@ -0,0 +1,20 @@
+import type { PluginOption } from 'vite';
+
+import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import';
+
+async function viteVxeTableImportsPlugin(): Promise<PluginOption> {
+  return [
+    lazyImport({
+      resolvers: [
+        VxeResolver({
+          libraryName: 'vxe-table',
+        }),
+        VxeResolver({
+          libraryName: 'vxe-pc-ui',
+        }),
+      ],
+    }),
+  ];
+}
+
+export { viteVxeTableImportsPlugin };
diff --git a/admin-ui/vue/internal/vite-config/src/typing.ts b/admin-ui/vue/internal/vite-config/src/typing.ts
new file mode 100644
index 0000000..f730bdb
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/typing.ts
@@ -0,0 +1,343 @@
+import type { PluginVisualizerOptions } from 'rollup-plugin-visualizer';
+import type { ConfigEnv, PluginOption, UserConfig } from 'vite';
+import type { PluginOptions } from 'vite-plugin-dts';
+import type { Options as PwaPluginOptions } from 'vite-plugin-pwa';
+
+/**
+ * ImportMap 配置接口
+ * @description 用于配置模块导入映射，支持自定义导入路径和范围
+ * @example
+ * ```typescript
+ * {
+ *   imports: {
+ *     'vue': 'https://unpkg.com/vue@3.2.47/dist/vue.esm-browser.js'
+ *   },
+ *   scopes: {
+ *     'https://site.com/': {
+ *       'vue': 'https://unpkg.com/vue@3.2.47/dist/vue.esm-browser.js'
+ *     }
+ *   }
+ * }
+ * ```
+ */
+interface IImportMap {
+  /** 模块导入映射 */
+  imports?: Record<string, string>;
+  /** 作用域特定的导入映射 */
+  scopes?: {
+    [scope: string]: Record<string, string>;
+  };
+}
+
+/**
+ * 打印插件配置选项
+ * @description 用于配置控制台打印信息
+ */
+interface PrintPluginOptions {
+  /**
+   * 打印的数据映射
+   * @description 键值对形式的数据，将在控制台打印
+   * @example
+   * ```typescript
+   * {
+   *   'App Version': '1.0.0',
+   *   'Build Time': '2024-01-01'
+   * }
+   * ```
+   */
+  infoMap?: Record<string, string | undefined>;
+}
+
+/**
+ * Nitro Mock 插件配置选项
+ * @description 用于配置 Nitro Mock 服务器的行为
+ */
+interface NitroMockPluginOptions {
+  /**
+   * Mock 服务器包名
+   * @default '@vbenjs/nitro-mock'
+   */
+  mockServerPackage?: string;
+
+  /**
+   * Mock 服务端口
+   * @default 3000
+   */
+  port?: number;
+
+  /**
+   * 是否打印 Mock 日志
+   * @default false
+   */
+  verbose?: boolean;
+}
+
+/**
+ * 归档插件配置选项
+ * @description 用于配置构建产物的压缩归档
+ */
+interface ArchiverPluginOptions {
+  /**
+   * 输出文件名
+   * @default 'dist'
+   */
+  name?: string;
+  /**
+   * 输出目录
+   * @default '.'
+   */
+  outputDir?: string;
+}
+
+/**
+ * ImportMap 插件配置
+ * @description 用于配置模块的 CDN 导入
+ */
+interface ImportmapPluginOptions {
+  /**
+   * CDN 供应商
+   * @default 'jspm.io'
+   * @description 支持 esm.sh 和 jspm.io 两种 CDN 供应商
+   */
+  defaultProvider?: 'esm.sh' | 'jspm.io';
+  /**
+   * ImportMap 配置数组
+   * @description 配置需要从 CDN 导入的包
+   * @example
+   * ```typescript
+   * [
+   *   { name: 'vue' },
+   *   { name: 'pinia', range: '^2.0.0' }
+   * ]
+   * ```
+   */
+  importmap?: Array<{ name: string; range?: string }>;
+  /**
+   * 手动配置 ImportMap
+   * @description 自定义 ImportMap 配置
+   */
+  inputMap?: IImportMap;
+}
+
+/**
+ * 条件插件配置
+ * @description 用于根据条件动态加载插件
+ */
+interface ConditionPlugin {
+  /**
+   * 判断条件
+   * @description 当条件为 true 时加载插件
+   */
+  condition?: boolean;
+  /**
+   * 插件对象
+   * @description 返回插件数组或 Promise
+   */
+  plugins: () => PluginOption[] | PromiseLike<PluginOption[]>;
+}
+
+/**
+ * 通用插件配置选项
+ * @description 所有插件共用的基础配置
+ */
+interface CommonPluginOptions {
+  /**
+   * 是否开启开发工具
+   * @default false
+   */
+  devtools?: boolean;
+  /**
+   * 环境变量
+   * @description 自定义环境变量
+   */
+  env?: Record<string, any>;
+  /**
+   * 是否注入元数据
+   * @default true
+   */
+  injectMetadata?: boolean;
+  /**
+   * 是否为构建模式
+   * @default false
+   */
+  isBuild?: boolean;
+  /**
+   * 构建模式
+   * @default 'development'
+   */
+  mode?: string;
+  /**
+   * 是否开启依赖分析
+   * @default false
+   * @description 使用 rollup-plugin-visualizer 分析依赖
+   */
+  visualizer?: boolean | PluginVisualizerOptions;
+}
+
+/**
+ * 应用插件配置选项
+ * @description 用于配置应用构建时的插件选项
+ */
+interface ApplicationPluginOptions extends CommonPluginOptions {
+  /**
+   * 是否开启压缩归档
+   * @default false
+   * @description 开启后会在打包目录生成 zip 文件
+   */
+  archiver?: boolean;
+  /**
+   * 压缩归档插件配置
+   * @description 配置压缩归档的行为
+   */
+  archiverPluginOptions?: ArchiverPluginOptions;
+  /**
+   * 是否开启压缩
+   * @default false
+   * @description 支持 gzip 和 brotli 压缩
+   */
+  compress?: boolean;
+  /**
+   * 压缩类型
+   * @default ['gzip']
+   * @description 可选的压缩类型
+   */
+  compressTypes?: ('brotli' | 'gzip')[];
+  /**
+   * 是否抽离配置文件
+   * @default false
+   * @description 在构建时抽离配置文件
+   */
+  extraAppConfig?: boolean;
+  /**
+   * 是否开启 HTML 插件
+   * @default true
+   */
+  html?: boolean;
+  /**
+   * 是否开启国际化
+   * @default false
+   */
+  i18n?: boolean;
+  /**
+   * 是否开启 ImportMap CDN
+   * @default false
+   */
+  importmap?: boolean;
+  /**
+   * ImportMap 插件配置
+   */
+  importmapOptions?: ImportmapPluginOptions;
+  /**
+   * 是否注入应用加载动画
+   * @default true
+   */
+  injectAppLoading?: boolean;
+  /**
+   * 是否注入全局 SCSS
+   * @default true
+   */
+  injectGlobalScss?: boolean;
+  /**
+   * 是否注入版权信息
+   * @default true
+   */
+  license?: boolean;
+  /**
+   * 是否开启 Nitro Mock
+   * @default false
+   */
+  nitroMock?: boolean;
+  /**
+   * Nitro Mock 插件配置
+   */
+  nitroMockOptions?: NitroMockPluginOptions;
+  /**
+   * 是否开启控制台打印
+   * @default false
+   */
+  print?: boolean;
+  /**
+   * 打印插件配置
+   */
+  printInfoMap?: PrintPluginOptions['infoMap'];
+  /**
+   * 是否开启 PWA
+   * @default false
+   */
+  pwa?: boolean;
+  /**
+   * PWA 插件配置
+   */
+  pwaOptions?: Partial<PwaPluginOptions>;
+  /**
+   * 是否开启 VXE Table 懒加载
+   * @default false
+   */
+  vxeTableLazyImport?: boolean;
+}
+
+/**
+ * 库插件配置选项
+ * @description 用于配置库构建时的插件选项
+ */
+interface LibraryPluginOptions extends CommonPluginOptions {
+  /**
+   * 是否开启 DTS 输出
+   * @default true
+   * @description 生成 TypeScript 类型声明文件
+   */
+  dts?: boolean | PluginOptions;
+}
+
+/**
+ * 应用配置选项类型
+ */
+type ApplicationOptions = ApplicationPluginOptions;
+
+/**
+ * 库配置选项类型
+ */
+type LibraryOptions = LibraryPluginOptions;
+
+/**
+ * 应用配置定义函数类型
+ * @description 用于定义应用构建配置
+ */
+type DefineApplicationOptions = (config?: ConfigEnv) => Promise<{
+  /** 应用插件配置 */
+  application?: ApplicationOptions;
+  /** Vite 配置 */
+  vite?: UserConfig;
+}>;
+
+/**
+ * 库配置定义函数类型
+ * @description 用于定义库构建配置
+ */
+type DefineLibraryOptions = (config?: ConfigEnv) => Promise<{
+  /** 库插件配置 */
+  library?: LibraryOptions;
+  /** Vite 配置 */
+  vite?: UserConfig;
+}>;
+
+/**
+ * 配置定义类型
+ * @description 应用或库的配置定义
+ */
+type DefineConfig = DefineApplicationOptions | DefineLibraryOptions;
+
+export type {
+  ApplicationPluginOptions,
+  ArchiverPluginOptions,
+  CommonPluginOptions,
+  ConditionPlugin,
+  DefineApplicationOptions,
+  DefineConfig,
+  DefineLibraryOptions,
+  IImportMap,
+  ImportmapPluginOptions,
+  LibraryPluginOptions,
+  NitroMockPluginOptions,
+  PrintPluginOptions,
+};
diff --git a/admin-ui/vue/internal/vite-config/src/utils/env.ts b/admin-ui/vue/internal/vite-config/src/utils/env.ts
new file mode 100644
index 0000000..86e948b
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/src/utils/env.ts
@@ -0,0 +1,110 @@
+import type { ApplicationPluginOptions } from '../typing';
+
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { fs } from '@vben/node-utils';
+
+import dotenv from 'dotenv';
+
+const getBoolean = (value: string | undefined) => value === 'true';
+
+const getString = (value: string | undefined, fallback: string) =>
+  value ?? fallback;
+
+const getNumber = (value: string | undefined, fallback: number) =>
+  Number(value) || fallback;
+
+/**
+ * 获取当前环境下生效的配置文件名
+ */
+function getConfFiles() {
+  const script = process.env.npm_lifecycle_script as string;
+  const reg = /--mode ([\d_a-z]+)/;
+  const result = reg.exec(script);
+  let mode = 'production';
+  if (result) {
+    mode = result[1] as string;
+  }
+  return ['.env', '.env.local', `.env.${mode}`, `.env.${mode}.local`];
+}
+
+/**
+ * Get the environment variables starting with the specified prefix
+ * @param match prefix
+ * @param confFiles ext
+ */
+async function loadEnv<T = Record<string, string>>(
+  match = 'VITE_GLOB_',
+  confFiles = getConfFiles(),
+) {
+  let envConfig = {};
+
+  for (const confFile of confFiles) {
+    try {
+      const confFilePath = join(process.cwd(), confFile);
+      if (existsSync(confFilePath)) {
+        const envPath = await fs.readFile(confFilePath, {
+          encoding: 'utf8',
+        });
+        const env = dotenv.parse(envPath);
+        envConfig = { ...envConfig, ...env };
+      }
+    } catch (error) {
+      console.error(`Error while parsing ${confFile}`, error);
+    }
+  }
+  const reg = new RegExp(`^(${match})`);
+  Object.keys(envConfig).forEach((key) => {
+    if (!reg.test(key)) {
+      Reflect.deleteProperty(envConfig, key);
+    }
+  });
+  return envConfig as T;
+}
+
+async function loadAndConvertEnv(
+  match = 'VITE_',
+  confFiles = getConfFiles(),
+): Promise<
+  Partial<ApplicationPluginOptions> & {
+    appTitle: string;
+    base: string;
+    port: number;
+  }
+> {
+  const envConfig = await loadEnv(match, confFiles);
+
+  const {
+    VITE_APP_TITLE,
+    VITE_ARCHIVER,
+    VITE_BASE,
+    VITE_COMPRESS,
+    VITE_DEVTOOLS,
+    VITE_INJECT_APP_LOADING,
+    VITE_NITRO_MOCK,
+    VITE_PORT,
+    VITE_PWA,
+    VITE_VISUALIZER,
+  } = envConfig;
+
+  const compressTypes = (VITE_COMPRESS ?? '')
+    .split(',')
+    .filter((item) => item === 'brotli' || item === 'gzip');
+
+  return {
+    appTitle: getString(VITE_APP_TITLE, 'XiujieIOT'),
+    archiver: getBoolean(VITE_ARCHIVER),
+    base: getString(VITE_BASE, '/'),
+    compress: compressTypes.length > 0,
+    compressTypes,
+    devtools: getBoolean(VITE_DEVTOOLS),
+    injectAppLoading: getBoolean(VITE_INJECT_APP_LOADING),
+    nitroMock: getBoolean(VITE_NITRO_MOCK),
+    port: getNumber(VITE_PORT, 5173),
+    pwa: getBoolean(VITE_PWA),
+    visualizer: getBoolean(VITE_VISUALIZER),
+  };
+}
+
+export { loadAndConvertEnv, loadEnv };
diff --git a/admin-ui/vue/internal/vite-config/tsconfig.json b/admin-ui/vue/internal/vite-config/tsconfig.json
new file mode 100644
index 0000000..b2ec3b6
--- /dev/null
+++ b/admin-ui/vue/internal/vite-config/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/node.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/lefthook.yml b/admin-ui/vue/lefthook.yml
new file mode 100644
index 0000000..7280174
--- /dev/null
+++ b/admin-ui/vue/lefthook.yml
@@ -0,0 +1,76 @@
+# EXAMPLE USAGE:
+#
+#   Refer for explanation to following link:
+#   https://lefthook.dev/configuration/
+#
+# pre-push:
+#   jobs:
+#     - name: packages audit
+#       tags:
+#         - frontend
+#         - security
+#       run: yarn audit
+#
+#     - name: gems audit
+#       tags:
+#         - backend
+#         - security
+#       run: bundle audit
+#
+# pre-commit:
+#   parallel: true
+#   jobs:
+#     - run: yarn eslint {staged_files}
+#       glob: "*.{js,ts,jsx,tsx}"
+#
+#     - name: rubocop
+#       glob: "*.rb"
+#       exclude:
+#         - config/application.rb
+#         - config/routes.rb
+#       run: bundle exec rubocop --force-exclusion {all_files}
+#
+#     - name: govet
+#       files: git ls-files -m
+#       glob: "*.go"
+#       run: go vet {files}
+#
+#     - script: "hello.js"
+#       runner: node
+#
+#     - script: "hello.go"
+#       runner: go run
+
+pre-commit:
+  parallel: true
+  commands:
+    code-workspace:
+      run: pnpm vsh code-workspace --auto-commit
+    lint-md:
+      run: pnpm prettier --cache --ignore-unknown --write {staged_files}
+      glob: '*.md'
+    lint-vue:
+      run: pnpm prettier --write {staged_files} && pnpm eslint --cache --fix {staged_files} && pnpm stylelint --fix --allow-empty-input {staged_files}
+      glob: '*.vue'
+    lint-js:
+      run: pnpm prettier --cache --ignore-unknown --write {staged_files} && pnpm eslint --cache --fix {staged_files}
+      glob: '*.{js,jsx,ts,tsx}'
+    lint-style:
+      run: pnpm prettier --cache --ignore-unknown --write {staged_files} && pnpm stylelint --fix --allow-empty-input {staged_files}
+      glob: '*.{scss,less,styl,html,vue,css}'
+    lint-package:
+      run: pnpm prettier --cache --write {staged_files}
+      glob: 'package.json'
+    lint-json:
+      run: pnpm prettier --cache --write --parser json {staged_files}
+      glob: '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}'
+
+post-merge:
+  commands:
+    install:
+      run: pnpm install
+
+commit-msg:
+  commands:
+    commitlint:
+      run: pnpm exec commitlint --edit $1
diff --git a/admin-ui/vue/package.json b/admin-ui/vue/package.json
new file mode 100644
index 0000000..546d661
--- /dev/null
+++ b/admin-ui/vue/package.json
@@ -0,0 +1,124 @@
+{
+  "name": "vben-admin-monorepo",
+  "version": "5.5.9",
+  "private": true,
+  "keywords": [
+    "monorepo",
+    "turbo",
+    "vben",
+    "vben admin",
+    "vben pro",
+    "vue",
+    "vue admin",
+    "vue vben admin",
+    "vue vben admin pro",
+    "vue3"
+  ],
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": "vbenjs/vue-vben-admin.git",
+  "license": "MIT",
+  "author": {
+    "name": "vben",
+    "email": "xxx@example.com",
+    "url": "https://github.com/anncwb"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
+    "build:analyze": "turbo build:analyze",
+    "build:antd": "pnpm run build --filter=@vben/web-antd",
+    "build:docker": "./scripts/deploy/build-local-docker-image.sh",
+    "build:docs": "pnpm run build --filter=@vben/docs",
+    "build:ele": "pnpm run build --filter=@vben/web-ele",
+    "build:naive": "pnpm run build --filter=@vben/web-naive",
+    "build:tdesign": "pnpm run build --filter=@vben/web-tdesign",
+    "build:play": "pnpm run build --filter=@vben/playground",
+    "changeset": "pnpm exec changeset",
+    "check": "pnpm run check:circular && pnpm run check:dep && pnpm run check:type && pnpm check:cspell",
+    "check:circular": "vsh check-circular",
+    "check:cspell": "cspell lint **/*.ts **/README.md .changeset/*.md --no-progress",
+    "check:dep": "vsh check-dep",
+    "check:type": "turbo run typecheck",
+    "clean": "node ./scripts/clean.mjs",
+    "commit": "czg",
+    "dev": "turbo-run dev",
+    "dev:antd": "pnpm -F @vben/web-antd run dev",
+    "dev:docs": "pnpm -F @vben/docs run dev",
+    "dev:ele": "pnpm -F @vben/web-ele run dev",
+    "dev:naive": "pnpm -F @vben/web-naive run dev",
+    "dev:tdesign": "pnpm -F @vben/web-tdesign run dev",
+    "dev:play": "pnpm -F @vben/playground run dev",
+    "format": "vsh lint --format",
+    "lint": "vsh lint",
+    "postinstall": "pnpm -r run stub --if-present",
+    "preinstall": "npx only-allow pnpm",
+    "preview": "turbo-run preview",
+    "publint": "vsh publint",
+    "reinstall": "pnpm clean --del-lock && pnpm install",
+    "test:unit": "vitest run --dom",
+    "test:e2e": "turbo run test:e2e",
+    "update:deps": "npx taze -r -w",
+    "version": "pnpm exec changeset version && pnpm install --no-frozen-lockfile",
+    "catalog": "pnpx codemod pnpm/catalog"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "catalog:",
+    "@changesets/cli": "catalog:",
+    "@playwright/test": "catalog:",
+    "@types/node": "catalog:",
+    "@vben/commitlint-config": "workspace:*",
+    "@vben/eslint-config": "workspace:*",
+    "@vben/prettier-config": "workspace:*",
+    "@vben/stylelint-config": "workspace:*",
+    "@vben/tailwind-config": "workspace:*",
+    "@vben/tsconfig": "workspace:*",
+    "@vben/turbo-run": "workspace:*",
+    "@vben/vite-config": "workspace:*",
+    "@vben/vsh": "workspace:*",
+    "@vitejs/plugin-vue": "catalog:",
+    "@vitejs/plugin-vue-jsx": "catalog:",
+    "@vue/test-utils": "catalog:",
+    "autoprefixer": "catalog:",
+    "cross-env": "catalog:",
+    "cspell": "catalog:",
+    "happy-dom": "catalog:",
+    "is-ci": "catalog:",
+    "lefthook": "catalog:",
+    "playwright": "catalog:",
+    "rimraf": "catalog:",
+    "tailwindcss": "catalog:",
+    "turbo": "catalog:",
+    "typescript": "catalog:",
+    "unbuild": "catalog:",
+    "vite": "catalog:",
+    "vitest": "catalog:",
+    "vue": "catalog:",
+    "vue-tsc": "catalog:"
+  },
+  "engines": {
+    "node": ">=20.12.0",
+    "pnpm": ">=10.0.0"
+  },
+  "packageManager": "pnpm@10.22.0",
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "eslint": "*"
+      }
+    },
+    "overrides": {
+      "@ast-grep/napi": "catalog:",
+      "@ctrl/tinycolor": "catalog:",
+      "clsx": "catalog:",
+      "esbuild": "0.25.3",
+      "jiti": "catalog:",
+      "pinia": "catalog:",
+      "vue": "catalog:"
+    },
+    "neverBuiltDependencies": [
+      "canvas",
+      "node-gyp"
+    ]
+  }
+}
diff --git a/admin-ui/vue/packages/@core/README.md b/admin-ui/vue/packages/@core/README.md
new file mode 100644
index 0000000..8eb201d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/README.md
@@ -0,0 +1,3 @@
+# @vben-core
+
+系统一些比较基础的SDK和UI组件库，该目录后续完善后，可能会迁移出去或者发布到npm，请勿将任何业务逻辑和业务包放在该目录。
diff --git a/admin-ui/vue/packages/@core/base/README.md b/admin-ui/vue/packages/@core/base/README.md
new file mode 100644
index 0000000..cc745b4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/README.md
@@ -0,0 +1,5 @@
+# base
+
+基础共享包，请勿引入 workspace 依赖
+
+-
diff --git a/admin-ui/vue/packages/@core/base/design/package.json b/admin-ui/vue/packages/@core/base/design/package.json
new file mode 100644
index 0000000..ed40f4b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@vben-core/design",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/base/design"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    "./bem": {
+      "development": "./src/scss-bem/bem.scss",
+      "default": "./dist/bem.scss"
+    },
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/design.css"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  }
+}
diff --git a/admin-ui/vue/packages/@core/base/design/src/css/global.css b/admin-ui/vue/packages/@core/base/design/src/css/global.css
new file mode 100644
index 0000000..dc154fc
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/src/css/global.css
@@ -0,0 +1,161 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  *,
+  ::after,
+  ::before {
+    @apply border-border;
+
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  html {
+    @apply text-foreground bg-background font-sans;
+
+    font-size: var(--font-size-base, 16px);
+    font-variation-settings: normal;
+    line-height: 1.15;
+    text-size-adjust: 100%;
+    font-synthesis-weight: none;
+    scroll-behavior: smooth;
+    text-rendering: optimizelegibility;
+    -webkit-tap-highlight-color: transparent;
+
+    /* -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; */
+  }
+
+  #app,
+  body,
+  html {
+    @apply size-full;
+
+    /* scrollbar-gutter: stable; */
+  }
+
+  body {
+    min-height: 100vh;
+
+    /* pointer-events: auto !important; */
+
+    /* overflow: overlay; */
+
+    /* -webkit-font-smoothing: antialiased; */
+
+    /* -moz-osx-font-smoothing: grayscale; */
+  }
+
+  a,
+  a:active,
+  a:hover,
+  a:link,
+  a:visited {
+    @apply no-underline;
+  }
+
+  ::view-transition-new(root),
+  ::view-transition-old(root) {
+    @apply animate-none mix-blend-normal;
+  }
+
+  ::view-transition-old(root) {
+    @apply z-[1];
+  }
+
+  ::view-transition-new(root) {
+    @apply z-[2147483646];
+  }
+
+  html.dark::view-transition-old(root) {
+    @apply z-[2147483646];
+  }
+
+  html.dark::view-transition-new(root) {
+    @apply z-[1];
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    @apply opacity-100;
+  }
+
+  /* input:-webkit-autofill {
+    @apply border-none;
+
+    box-shadow: 0 0 0 1000px transparent inset;
+  } */
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    @apply m-0 appearance-none;
+  }
+
+  /* 只有非mac下才进行调整，mac下使用默认滚动条 */
+  html:not([data-platform='macOs']) {
+    ::-webkit-scrollbar {
+      @apply h-[10px] w-[10px];
+    }
+
+    ::-webkit-scrollbar-thumb {
+      @apply bg-border rounded-sm border-none;
+    }
+
+    ::-webkit-scrollbar-track {
+      @apply rounded-sm border-none bg-transparent shadow-none;
+    }
+
+    ::-webkit-scrollbar-button {
+      @apply hidden;
+    }
+  }
+}
+
+@layer components {
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+
+  .flex-col-center {
+    @apply flex flex-col items-center justify-center;
+  }
+
+  .outline-box {
+    @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
+  }
+
+  .outline-box::after {
+    @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""];
+  }
+
+  .outline-box.outline-box-active {
+    @apply outline-primary outline outline-2;
+  }
+
+  .outline-box.outline-box-active::after {
+    display: none;
+  }
+
+  .outline-box:not(.outline-box-active):hover::after {
+    @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100;
+  }
+
+  .vben-link {
+    @apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer;
+  }
+
+  .card-box {
+    @apply bg-card text-card-foreground border-border rounded-xl border;
+  }
+}
+
+html.invert-mode {
+  @apply invert;
+}
+
+html.grayscale-mode {
+  @apply grayscale;
+}
diff --git a/admin-ui/vue/packages/@core/base/design/src/css/nprogress.css b/admin-ui/vue/packages/@core/base/design/src/css/nprogress.css
new file mode 100644
index 0000000..3503dab
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/src/css/nprogress.css
@@ -0,0 +1,59 @@
+/* Make clicks pass-through */
+#nprogress {
+  @apply pointer-events-none;
+}
+
+#nprogress .bar {
+  @apply bg-primary fixed left-0 top-0 z-[1031] h-[2px] w-full;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  @apply absolute right-0 block h-full w-[100px];
+
+  box-shadow:
+    0 0 10px hsl(var(--primary)),
+    0 0 5px hsl(var(--primary));
+  opacity: 1;
+  transform: rotate(3deg) translate(0, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  @apply fixed right-4 top-4 z-[1031] block;
+}
+
+#nprogress .spinner-icon {
+  @apply border-t-primary border-l-primary size-4 rounded-full border-[2px] border-solid border-transparent;
+
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  @apply relative overflow-hidden;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  @apply absolute;
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/admin-ui/vue/packages/@core/base/design/src/css/transition.css b/admin-ui/vue/packages/@core/base/design/src/css/transition.css
new file mode 100644
index 0000000..c1cb0e4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/src/css/transition.css
@@ -0,0 +1,236 @@
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-up-move {
+  transition: transform 0.3s;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-15px);
+}
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-down-move {
+  transition: transform 0.3s;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-left-move {
+  transition: transform 0.3s;
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translate(-15px);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-right-move {
+  transition: transform 0.3s;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(15px);
+}
+
+.fade-transition-enter-active,
+.fade-transition-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-transition-enter-from,
+.fade-transition-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translate(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translate(30px);
+}
+
+.fade-down-enter-active,
+.fade-down-leave-active {
+  transition:
+    opacity 0.25s,
+    transform 0.3s;
+}
+
+.fade-down-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-down-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.fade-up-enter-active,
+.fade-up-leave-active {
+  transition:
+    opacity 0.2s,
+    transform 0.25s;
+}
+
+.fade-up-enter-from {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+.fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+@keyframes fade-slide {
+  0% {
+    opacity: 0;
+    transform: translate(-30px);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(30px);
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-up {
+  0% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+}
+
+@keyframes fade-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+}
+
+.fade-slow {
+  animation: fade 3s infinite;
+}
+
+.fade-slide-slow {
+  animation: fade-slide 3s infinite;
+}
+
+.fade-up-slow {
+  animation: fade-up 3s infinite;
+}
+
+.fade-down-slow {
+  animation: fade-down 3s infinite;
+}
+
+.collapse-transition {
+  transition:
+    0.2s height ease-in-out,
+    0.2s padding-top ease-in-out,
+    0.2s padding-bottom ease-in-out;
+}
+
+.collapse-transition-leave-active,
+.collapse-transition-enter-active {
+  transition:
+    0.2s max-height ease-in-out,
+    0.2s padding-top ease-in-out,
+    0.2s margin-top ease-in-out;
+}
diff --git a/admin-ui/vue/packages/@core/base/design/src/css/ui.css b/admin-ui/vue/packages/@core/base/design/src/css/ui.css
new file mode 100644
index 0000000..a1bf024
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/src/css/ui.css
@@ -0,0 +1,101 @@
+.side-content {
+  animation-duration: 0.3s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.side-content[data-side='top'] {
+  animation-name: slide-up;
+}
+
+.side-content[data-side='bottom'] {
+  animation-name: slide-down;
+}
+
+.side-content[data-side='left'] {
+  animation-name: slide-left;
+}
+
+.side-content[data-side='right'] {
+  animation-name: slide-right;
+}
+
+.breadcrumb-transition-enter-active {
+  transition:
+    transform 0.4s cubic-bezier(0.76, 0, 0.24, 1),
+    opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1);
+}
+
+.breadcrumb-transition-leave-active {
+  display: none;
+}
+
+.breadcrumb-transition-enter-from {
+  opacity: 0;
+  transform: translateX(30px) skewX(-30deg);
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.z-popup {
+  z-index: var(--popup-z-index);
+}
+
+@keyframes shrink {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/admin-ui/vue/packages/@core/base/design/src/design-tokens/dark.css b/admin-ui/vue/packages/@core/base/design/src/design-tokens/dark.css
new file mode 100644
index 0000000..3881041
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/src/design-tokens/dark.css
@@ -0,0 +1,446 @@
+.dark,
+.dark[data-theme='custom'],
+.dark[data-theme='default'] {
+  /* Default background color of <body />...etc */
+  --background: 222.34deg 10.43% 12.27%;
+
+  /* 主体区域背景色 */
+  --background-deep: 220deg 13.06% 9%;
+  --foreground: 0 0% 95%;
+
+  /* Background color for <Card /> */
+  --card: 222.34deg 10.43% 12.27%;
+
+  /* --card: 222.2 84% 4.9%; */
+  --card-foreground: 210 40% 98%;
+
+  /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
+
+  /* --popover: 222.82deg 8.43% 12.27%; */
+
+  /* 弹出层的背景色与主题区域背景色太过接近  */
+  --popover: 0 0% 14.2%;
+  --popover-foreground: 210 40% 98%;
+
+  /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
+
+  /* --muted: 220deg 6.82% 17.25%; */
+
+  /* --muted-foreground: 215 20.2% 65.1%; */
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+
+  /* 主题颜色 */
+
+  /* --primary: 245 82% 67%; */
+  --primary-foreground: 0 0% 98%;
+
+  /* Used for destructive actions such as <Button variant="destructive"> */
+
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 0 0% 98%;
+
+  /* Used for success actions such as <message> */
+
+  --info: 180, 1.54%, 12.75%;
+  --info-foreground: 220, 4%, 58%;
+
+  /* Used for success actions such as <message> */
+
+  --success: 144 57% 58%;
+  --success-foreground: 0 0% 98%;
+
+  /* Used for warning actions such as <message> */
+
+  --warning: 42 84% 61%;
+  --warning-foreground: 0 0% 98%;
+
+  /* 颜色次要 */
+  --secondary: 240 5% 17%;
+  --secondary-foreground: 0 0% 98%;
+
+  /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
+  --accent: 216 5% 19%;
+  --accent-dark: 240 0% 22%;
+  --accent-darker: 240 0% 26%;
+  --accent-lighter: 216 5% 12%;
+  --accent-hover: 216 5% 24%;
+  --accent-foreground: 0 0% 98%;
+
+  /* Darker color */
+  --heavy: 216 5% 24%;
+  --heavy-foreground: var(--accent-foreground);
+
+  /* Default border color */
+  --border: 240 3.7% 22%;
+
+  /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
+  --input: 0deg 0% 100% / 10%;
+  --input-placeholder: 218deg 11% 65%;
+  --input-background: 0deg 0% 100% / 5%;
+
+  /* Used for focus ring */
+  --ring: 222.2 84% 4.9%;
+
+  /* 基本圆角大小 */
+  --radius: 0.5rem;
+
+  /* ============= Custom ============= */
+
+  /* 遮罩颜色 */
+  --overlay: 0deg 0% 0% / 40%;
+  --overlay-content: 0deg 0% 0% / 40%;
+
+  /* 基本文字大小 */
+  --font-size-base: 16px;
+
+  /* =============component & UI============= */
+
+  --sidebar: 222.34deg 10.43% 12.27%;
+  --sidebar-deep: 220deg 13.06% 9%;
+  --menu: var(--sidebar);
+
+  /* header */
+  --header: 222.34deg 10.43% 12.27%;
+
+  color-scheme: dark;
+}
+
+.dark[data-theme='violet'],
+[data-theme='violet'] .dark {
+  --background: 224 71.4% 4.1%;
+  --background-deep: var(--background);
+  --foreground: 210 20% 98%;
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+  --primary-foreground: 210 20% 98%;
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+  --ring: 263.4 70% 50.4%;
+  --sidebar: 224 71.4% 4.1%;
+  --sidebar-deep: 224 71.4% 4.1%;
+  --header: 224 71.4% 4.1%;
+}
+
+.dark[data-theme='pink'],
+[data-theme='pink'] .dark {
+  --background: 20 14.3% 4.1%;
+  --background-deep: var(--background);
+  --foreground: 0 0% 95%;
+  --card: 0 0% 9%;
+  --card-foreground: 0 0% 95%;
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 0 85.7% 97.3%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 346.8 77.2% 49.8%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
+}
+
+.dark[data-theme='rose'],
+[data-theme='rose'] .dark {
+  --background: 0 0% 3.9%;
+  --background-deep: var(--background);
+  --foreground: 0 0% 98%;
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary-foreground: 0 85.7% 97.3%;
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+  --ring: 0 72.2% 50.6%;
+  --sidebar: 0 0% 3.9%;
+  --sidebar-deep: 0 0% 3.9%;
+  --header: 0 0% 3.9%;
+}
+
+.dark[data-theme='sky-blue'],
+[data-theme='sky-blue'] .dark {
+  --background: 222.2 84% 4.9%;
+  --background-deep: var(--background);
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary-foreground: 210 20% 98%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 48%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
+}
+
+.dark[data-theme='deep-blue'],
+[data-theme='deep-blue'] .dark {
+  --background: 222.2 84% 4.9%;
+  --background-deep: var(--background);
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary-foreground: 210 20% 98%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 48%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
+}
+
+.dark[data-theme='green'],
+[data-theme='green'] .dark {
+  --background: 20 14.3% 4.1%;
+  --background-deep: var(--background);
+  --foreground: 0 0% 95%;
+  --card: 24 9.8% 6%;
+  --card-foreground: 0 0% 95%;
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+  --primary-foreground: 210 20% 98%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 0 85.7% 97.3%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 142.4 71.8% 29.2%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
+}
+
+.dark[data-theme='deep-green'],
+[data-theme='deep-green'] .dark {
+  --background: 20 14.3% 4.1%;
+  --background-deep: var(--background);
+  --foreground: 0 0% 95%;
+  --card: 24 9.8% 6%;
+  --card-foreground: 0 0% 95%;
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+  --primary-foreground: 210 20% 98%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 0 85.7% 97.3%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 142.4 71.8% 29.2%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
+}
+
+.dark[data-theme='orange'],
+[data-theme='orange'] .dark {
+  --background: 20 14.3% 4.1%;
+  --background-deep: var(--background);
+  --foreground: 60 9.1% 97.8%;
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+  --primary-foreground: 60 9.1% 97.8%;
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+  --destructive: 0 72.2% 50.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+  --ring: 20.5 90.2% 48.2%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
+}
+
+.dark[data-theme='yellow'],
+[data-theme='yellow'] .dark {
+  --background: 20 14.3% 4.1%;
+  --background-deep: var(--background);
+  --foreground: 60 9.1% 97.8%;
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+  --primary-foreground: 26 83.3% 14.1%;
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 60 9.1% 97.8%;
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+  --ring: 35.5 91.7% 32.9%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
+  --header: 20 14.3% 4.1%;
+}
+
+.dark[data-theme='zinc'],
+[data-theme='zinc'] .dark {
+  --background: 240 10% 3.9%;
+  --background-deep: var(--background);
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+  --sidebar: 240 10% 3.9%;
+  --sidebar-deep: 240 10% 3.9%;
+  --header: 240 10% 3.9%;
+}
+
+.dark[data-theme='neutral'],
+[data-theme='neutral'] .dark {
+  --background: 0 0% 3.9%;
+  --background-deep: var(--background);
+  --foreground: 0 0% 98%;
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+  --ring: 0 0% 83.1%;
+  --sidebar: 0 0% 3.9%;
+  --sidebar-deep: 0 0% 3.9%;
+  --header: 0 0% 3.9%;
+}
+
+.dark[data-theme='slate'],
+[data-theme='slate'] .dark {
+  --background: 222.2 84% 4.9%;
+  --background-deep: var(--background);
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-deep: 222.2 84% 4.9%;
+  --header: 222.2 84% 4.9%;
+}
+
+.dark[data-theme='gray'],
+[data-theme='gray'] .dark {
+  --background: 224 71.4% 4.1%;
+  --background-deep: var(--background);
+  --foreground: 210 20% 98%;
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+  --primary-foreground: 220.9 39.3% 11%;
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+  --destructive: 359.21 68.47% 56.47%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+  --ring: 216 12.2% 83.9%;
+  --sidebar: 224 71.4% 4.1%;
+  --sidebar-deep: 224 71.4% 4.1%;
+  --header: 224 71.4% 4.1%;
+}
diff --git a/admin-ui/vue/packages/@core/base/design/src/design-tokens/default.css b/admin-ui/vue/packages/@core/base/design/src/design-tokens/default.css
new file mode 100644
index 0000000..4ce7ff9
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/src/design-tokens/default.css
@@ -0,0 +1,383 @@
+:root {
+  /** 弹出层的基础层级 **/
+  --popup-z-index: 2000;
+  --font-family:
+    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue',
+    arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+
+  /* Default background color of <body />...etc */
+  --background: 0 0% 100%;
+
+  /* 主体区域背景色 */
+  --background-deep: 216 20.11% 95.47%;
+  --foreground: 210 6% 21%;
+
+  /* Background color for <Card /> */
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
+
+  /* --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%; */
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  /* 主题颜色 */
+
+  --primary: 212 100% 45%;
+  --primary-foreground: 0 0% 98%;
+
+  /* Used for destructive actions such as <Button variant="destructive"> */
+
+  --destructive: 359.33 100% 65.1%;
+  --destructive-foreground: 0 0% 98%;
+
+  /* Used for success actions such as <message> */
+
+  --info: 240, 5%, 96%;
+  --info-foreground: 220, 4%, 58%;
+
+  /* Used for success actions such as <message> */
+
+  --success: 144 57% 58%;
+  --success-foreground: 0 0% 98%;
+
+  /* Used for warning actions such as <message> */
+
+  --warning: 42 84% 61%;
+  --warning-foreground: 0 0% 98%;
+
+  /* Secondary colors for <Button /> */
+
+  --secondary: 240 5% 96%;
+  --secondary-foreground: 240 6% 10%;
+
+  /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
+  --accent: 240 5% 96%;
+  --accent-dark: 216 14% 93%;
+  --accent-darker: 216 11% 91%;
+  --accent-lighter: 240 0% 98%;
+  --accent-hover: 200deg 10% 90%;
+  --accent-foreground: 240 6% 10%;
+
+  /* Darker color */
+  --heavy: 192deg 9.43% 89.61%;
+  --heavy-foreground: var(--accent-foreground);
+
+  /* Default border color */
+  --border: 240 5.9% 90%;
+
+  /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
+  --input: 240deg 5.88% 90%;
+  --input-placeholder: 217 10.6% 65%;
+  --input-background: 0 0% 100%;
+
+  /* Used for focus ring */
+  --ring: 222.2 84% 4.9%;
+
+  /* Border radius for card, input and buttons */
+  --radius: 0.5rem;
+
+  /* ============= custom ============= */
+
+  /* 遮罩颜色 */
+  --overlay: 0 0% 0% / 45%;
+  --overlay-content: 0 0% 95% / 45%;
+
+  /* 基本文字大小 */
+  --font-size-base: 16px;
+  --menu-font-size: calc(var(--font-size-base) * 0.875);
+
+  /* =============component & UI============= */
+
+  /* menu */
+  --sidebar: 0 0% 100%;
+  --sidebar-deep: 0 0% 100%;
+  --menu: var(--sidebar);
+
+  /* header */
+  --header: 0 0% 100%;
+
+  accent-color: var(--primary);
+  color-scheme: light;
+}
+
+[data-theme='violet'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 224 71.4% 4.1%;
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+  --primary-foreground: 210 20% 98%;
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+  --ring: 262.1 83.3% 57.8%;
+}
+
+[data-theme='pink'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 346.8 77.2% 49.8%;
+}
+
+[data-theme='rose'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 346.8 77.2% 49.8%;
+}
+
+[data-theme='sky-blue'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+}
+
+[data-theme='deep-blue'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+}
+
+[data-theme='green'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 142.1 76.2% 36.3%;
+}
+
+[data-theme='deep-green'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary-foreground: 355.7 100% 97.3%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 142.1 76.2% 36.3%;
+}
+
+[data-theme='orange'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 20 14.3% 4.1%;
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+  --primary-foreground: 60 9.1% 97.8%;
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+  --ring: 24.6 95% 53.1%;
+}
+
+[data-theme='yellow'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 20 14.3% 4.1%;
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+  --primary-foreground: 26 83.3% 14.1%;
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+  --ring: 20 14.3% 4.1%;
+}
+
+[data-theme='zinc'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+}
+
+[data-theme='neutral'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 0 0% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --ring: 0 0% 3.9%;
+}
+
+[data-theme='slate'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+}
+
+[data-theme='gray'] {
+  /* --background: 0 0% 100%; */
+  --foreground: 224 71.4% 4.1%;
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+  --primary-foreground: 210 20% 98%;
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+  --ring: 224 71.4% 4.1%;
+}
diff --git a/admin-ui/vue/packages/@core/base/design/src/design-tokens/index.ts b/admin-ui/vue/packages/@core/base/design/src/design-tokens/index.ts
new file mode 100644
index 0000000..4bf1467
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/src/design-tokens/index.ts
@@ -0,0 +1,2 @@
+import './default.css';
+import './dark.css';
diff --git a/admin-ui/vue/packages/@core/base/design/src/index.ts b/admin-ui/vue/packages/@core/base/design/src/index.ts
new file mode 100644
index 0000000..952caef
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/src/index.ts
@@ -0,0 +1,6 @@
+import './design-tokens';
+
+import './css/global.css';
+import './css/transition.css';
+import './css/nprogress.css';
+import './css/ui.css';
diff --git a/admin-ui/vue/packages/@core/base/design/src/scss-bem/bem.scss b/admin-ui/vue/packages/@core/base/design/src/scss-bem/bem.scss
new file mode 100644
index 0000000..3910a30
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/src/scss-bem/bem.scss
@@ -0,0 +1,34 @@
+@forward './constants';
+
+@mixin b($block) {
+  $B: $namespace + '-' + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($name) {
+  @at-root {
+    &#{$element-separator}#{$name} {
+      @content;
+    }
+  }
+}
+
+@mixin m($name) {
+  @at-root {
+    &#{$modifier-separator}#{$name} {
+      @content;
+    }
+  }
+}
+
+// block__element.is-active {}
+@mixin is($state, $prefix: $state-prefix) {
+  @at-root {
+    &.#{$prefix}-#{$state} {
+      @content;
+    }
+  }
+}
diff --git a/admin-ui/vue/packages/@core/base/design/src/scss-bem/constants.scss b/admin-ui/vue/packages/@core/base/design/src/scss-bem/constants.scss
new file mode 100644
index 0000000..87c24ef
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/src/scss-bem/constants.scss
@@ -0,0 +1,5 @@
+$namespace: 'vben' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is' !default;
diff --git a/admin-ui/vue/packages/@core/base/design/tsconfig.json b/admin-ui/vue/packages/@core/base/design/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/@core/base/design/vite.config.mts b/admin-ui/vue/packages/@core/base/design/vite.config.mts
new file mode 100644
index 0000000..935929d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/design/vite.config.mts
@@ -0,0 +1,9 @@
+import { defineConfig } from '@vben/vite-config';
+
+export default defineConfig(async () => {
+  return {
+    vite: {
+      publicDir: 'src/scss-bem',
+    },
+  };
+});
diff --git a/admin-ui/vue/packages/@core/base/icons/build.config.ts b/admin-ui/vue/packages/@core/base/icons/build.config.ts
new file mode 100644
index 0000000..97e572c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/icons/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
diff --git a/admin-ui/vue/packages/@core/base/icons/package.json b/admin-ui/vue/packages/@core/base/icons/package.json
new file mode 100644
index 0000000..3c6775f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/icons/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@vben-core/icons",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/base/icons"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@iconify/vue": "catalog:",
+    "lucide-vue-next": "catalog:",
+    "vue": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/base/icons/src/create-icon.ts b/admin-ui/vue/packages/@core/base/icons/src/create-icon.ts
new file mode 100644
index 0000000..4b500e0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/icons/src/create-icon.ts
@@ -0,0 +1,24 @@
+import { defineComponent, h } from 'vue';
+
+import { addIcon, Icon, type IconifyIcon } from '@iconify/vue';
+
+function createIconifyIcon(icon: string) {
+  return defineComponent({
+    name: `Icon-${icon}`,
+    setup(props, { attrs }) {
+      return () => h(Icon, { icon, ...props, ...attrs });
+    },
+  });
+}
+
+function createIconifyOfflineIcon(icon: string, iconComponent: IconifyIcon) {
+  return defineComponent({
+    name: `Icon-${icon}`,
+    setup(props, { attrs }) {
+      addIcon(icon, iconComponent);
+      return () => h(Icon, { icon, ...props, ...attrs });
+    },
+  });
+}
+
+export { createIconifyIcon, createIconifyOfflineIcon };
diff --git a/admin-ui/vue/packages/@core/base/icons/src/index.ts b/admin-ui/vue/packages/@core/base/icons/src/index.ts
new file mode 100644
index 0000000..183c45d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/icons/src/index.ts
@@ -0,0 +1,11 @@
+export * from './create-icon';
+
+export * from './lucide';
+
+export type { IconifyIcon as IconifyIconStructure } from '@iconify/vue';
+export {
+  addCollection,
+  addIcon,
+  Icon as IconifyIcon,
+  listIcons,
+} from '@iconify/vue';
diff --git a/admin-ui/vue/packages/@core/base/icons/src/lucide.ts b/admin-ui/vue/packages/@core/base/icons/src/lucide.ts
new file mode 100644
index 0000000..a167aea
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/icons/src/lucide.ts
@@ -0,0 +1,69 @@
+export {
+  ArrowDown,
+  ArrowLeft,
+  ArrowLeftToLine,
+  ArrowRightLeft,
+  ArrowRightToLine,
+  ArrowUp,
+  ArrowUpToLine,
+  Bell,
+  BookOpenText,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Circle,
+  CircleAlert,
+  CircleCheckBig,
+  CircleHelp,
+  CircleX,
+  Copy,
+  CornerDownLeft,
+  Ellipsis,
+  Expand,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  FoldHorizontal,
+  Fullscreen,
+  Github,
+  Grip,
+  GripVertical,
+  Menu as IconDefault,
+  Inbox,
+  Info,
+  InspectionPanel,
+  Languages,
+  LoaderCircle,
+  LockKeyhole,
+  LogOut,
+  MailCheck,
+  Maximize,
+  ArrowRightFromLine as MdiMenuClose,
+  ArrowLeftFromLine as MdiMenuOpen,
+  Menu,
+  Minimize,
+  Minimize2,
+  MoonStar,
+  Palette,
+  PanelLeft,
+  PanelRight,
+  Pin,
+  PinOff,
+  Plus,
+  RotateCw,
+  Search,
+  SearchX,
+  Settings,
+  Shrink,
+  Square,
+  SquareCheckBig,
+  SquareMinus,
+  Sun,
+  SunMoon,
+  SwatchBook,
+  UserRoundPen,
+  X,
+} from 'lucide-vue-next';
diff --git a/admin-ui/vue/packages/@core/base/icons/tsconfig.json b/admin-ui/vue/packages/@core/base/icons/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/icons/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/@core/base/shared/build.config.ts b/admin-ui/vue/packages/@core/base/shared/build.config.ts
new file mode 100644
index 0000000..98e2209
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/build.config.ts
@@ -0,0 +1,14 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    'src/store',
+    'src/constants/index',
+    'src/utils/index',
+    'src/color/index',
+    'src/cache/index',
+    'src/global-state',
+  ],
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/package.json b/admin-ui/vue/packages/@core/base/shared/package.json
new file mode 100644
index 0000000..2e45340
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/package.json
@@ -0,0 +1,101 @@
+{
+  "name": "@vben-core/shared",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/base/shared"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild",
+    "stub": "pnpm unbuild --stub"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "exports": {
+    "./constants": {
+      "types": "./src/constants/index.ts",
+      "development": "./src/constants/index.ts",
+      "default": "./dist/constants/index.mjs"
+    },
+    "./utils": {
+      "types": "./src/utils/index.ts",
+      "development": "./src/utils/index.ts",
+      "default": "./dist/utils/index.mjs"
+    },
+    "./color": {
+      "types": "./src/color/index.ts",
+      "development": "./src/color/index.ts",
+      "default": "./dist/color/index.mjs"
+    },
+    "./cache": {
+      "types": "./src/cache/index.ts",
+      "development": "./src/cache/index.ts",
+      "default": "./dist/cache/index.mjs"
+    },
+    "./store": {
+      "types": "./src/store.ts",
+      "development": "./src/store.ts",
+      "default": "./dist/store.mjs"
+    },
+    "./global-state": {
+      "types": "./src/global-state.ts",
+      "development": "./src/global-state.ts",
+      "default": "./dist/global-state.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      "./constants": {
+        "types": "./dist/constants/index.d.ts",
+        "default": "./dist/constants/index.mjs"
+      },
+      "./utils": {
+        "types": "./dist/utils/index.d.ts",
+        "default": "./dist/utils/index.mjs"
+      },
+      "./color": {
+        "types": "./dist/color/index.d.ts",
+        "default": "./dist/color/index.mjs"
+      },
+      "./cache": {
+        "types": "./dist/cache/index.d.ts",
+        "default": "./dist/cache/index.mjs"
+      },
+      "./store": {
+        "types": "./dist/store.d.ts",
+        "default": "./dist/store.mjs"
+      },
+      "./global-state": {
+        "types": "./dist/global-state.d.ts",
+        "default": "./dist/global-state.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@ctrl/tinycolor": "catalog:",
+    "@tanstack/vue-store": "catalog:",
+    "@vue/shared": "catalog:",
+    "clsx": "catalog:",
+    "dayjs": "catalog:",
+    "defu": "catalog:",
+    "es-toolkit": "catalog:",
+    "lodash.clonedeep": "catalog:",
+    "nprogress": "catalog:",
+    "tailwind-merge": "catalog:",
+    "theme-colors": "catalog:"
+  },
+  "devDependencies": {
+    "@types/lodash.clonedeep": "catalog:",
+    "@types/lodash.get": "catalog:",
+    "@types/lodash.isequal": "catalog:",
+    "@types/lodash.set": "catalog:",
+    "@types/nprogress": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/base/shared/src/cache/__tests__/storage-manager.test.ts b/admin-ui/vue/packages/@core/base/shared/src/cache/__tests__/storage-manager.test.ts
new file mode 100644
index 0000000..a5abe5a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/cache/__tests__/storage-manager.test.ts
@@ -0,0 +1,130 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { StorageManager } from '../storage-manager';
+
+describe('storageManager', () => {
+  let storageManager: StorageManager;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    localStorage.clear();
+    storageManager = new StorageManager({
+      prefix: 'test_',
+    });
+  });
+
+  it('should set and get an item', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should return default value if item does not exist', () => {
+    const user = storageManager.getItem('nonexistent', {
+      age: 0,
+      name: 'Default User',
+    });
+    expect(user).toEqual({ age: 0, name: 'Default User' });
+  });
+
+  it('should remove an item', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    storageManager.removeItem('user');
+    const user = storageManager.getItem('user');
+    expect(user).toBeNull();
+  });
+
+  it('should clear all items with the prefix', () => {
+    storageManager.setItem('user1', { age: 30, name: 'John Doe' });
+    storageManager.setItem('user2', { age: 25, name: 'Jane Doe' });
+    storageManager.clear();
+    expect(storageManager.getItem('user1')).toBeNull();
+    expect(storageManager.getItem('user2')).toBeNull();
+  });
+
+  it('should clear expired items', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 1000); // 1秒过期
+    vi.advanceTimersByTime(1001); // 快进时间
+    storageManager.clearExpiredItems();
+    const user = storageManager.getItem('user');
+    expect(user).toBeNull();
+  });
+
+  it('should not clear non-expired items', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 10_000); // 10秒过期
+    vi.advanceTimersByTime(5000); // 快进时间
+    storageManager.clearExpiredItems();
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should handle JSON parse errors gracefully', () => {
+    localStorage.setItem('test_user', '{ invalid JSON }');
+    const user = storageManager.getItem('user', {
+      age: 0,
+      name: 'Default User',
+    });
+    expect(user).toEqual({ age: 0, name: 'Default User' });
+  });
+  it('should return null for non-existent items without default value', () => {
+    const user = storageManager.getItem('nonexistent');
+    expect(user).toBeNull();
+  });
+
+  it('should overwrite existing items', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    storageManager.setItem('user', { age: 25, name: 'Jane Doe' });
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 25, name: 'Jane Doe' });
+  });
+
+  it('should handle items without expiry correctly', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    vi.advanceTimersByTime(5000);
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should remove expired items when accessed', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 1000); // 1秒过期
+    vi.advanceTimersByTime(1001); // 快进时间
+    const user = storageManager.getItem('user');
+    expect(user).toBeNull();
+  });
+
+  it('should not remove non-expired items when accessed', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 10_000); // 10秒过期
+    vi.advanceTimersByTime(5000); // 快进时间
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should handle multiple items with different expiry times', () => {
+    storageManager.setItem('user1', { age: 30, name: 'John Doe' }, 1000); // 1秒过期
+    storageManager.setItem('user2', { age: 25, name: 'Jane Doe' }, 2000); // 2秒过期
+    vi.advanceTimersByTime(1500); // 快进时间
+    storageManager.clearExpiredItems();
+    const user1 = storageManager.getItem('user1');
+    const user2 = storageManager.getItem('user2');
+    expect(user1).toBeNull();
+    expect(user2).toEqual({ age: 25, name: 'Jane Doe' });
+  });
+
+  it('should handle items with no expiry', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    vi.advanceTimersByTime(10_000); // 快进时间
+    storageManager.clearExpiredItems();
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should clear all items correctly', () => {
+    storageManager.setItem('user1', { age: 30, name: 'John Doe' });
+    storageManager.setItem('user2', { age: 25, name: 'Jane Doe' });
+    storageManager.clear();
+    const user1 = storageManager.getItem('user1');
+    const user2 = storageManager.getItem('user2');
+    expect(user1).toBeNull();
+    expect(user2).toBeNull();
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/cache/index.ts b/admin-ui/vue/packages/@core/base/shared/src/cache/index.ts
new file mode 100644
index 0000000..8c44d7f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/cache/index.ts
@@ -0,0 +1 @@
+export * from './storage-manager';
diff --git a/admin-ui/vue/packages/@core/base/shared/src/cache/storage-manager.ts b/admin-ui/vue/packages/@core/base/shared/src/cache/storage-manager.ts
new file mode 100644
index 0000000..4360621
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/cache/storage-manager.ts
@@ -0,0 +1,118 @@
+type StorageType = 'localStorage' | 'sessionStorage';
+
+interface StorageManagerOptions {
+  prefix?: string;
+  storageType?: StorageType;
+}
+
+interface StorageItem<T> {
+  expiry?: number;
+  value: T;
+}
+
+class StorageManager {
+  private prefix: string;
+  private storage: Storage;
+
+  constructor({
+    prefix = '',
+    storageType = 'localStorage',
+  }: StorageManagerOptions = {}) {
+    this.prefix = prefix;
+    this.storage =
+      storageType === 'localStorage'
+        ? window.localStorage
+        : window.sessionStorage;
+  }
+
+  /**
+   * 清除所有带前缀的存储项
+   */
+  clear(): void {
+    const keysToRemove: string[] = [];
+    for (let i = 0; i < this.storage.length; i++) {
+      const key = this.storage.key(i);
+      if (key && key.startsWith(this.prefix)) {
+        keysToRemove.push(key);
+      }
+    }
+    keysToRemove.forEach((key) => this.storage.removeItem(key));
+  }
+
+  /**
+   * 清除所有过期的存储项
+   */
+  clearExpiredItems(): void {
+    for (let i = 0; i < this.storage.length; i++) {
+      const key = this.storage.key(i);
+      if (key && key.startsWith(this.prefix)) {
+        const shortKey = key.replace(this.prefix, '');
+        this.getItem(shortKey); // 调用 getItem 方法检查并移除过期项
+      }
+    }
+  }
+
+  /**
+   * 获取存储项
+   * @param key 键
+   * @param defaultValue 当项不存在或已过期时返回的默认值
+   * @returns 值，如果项已过期或解析错误则返回默认值
+   */
+  getItem<T>(key: string, defaultValue: null | T = null): null | T {
+    const fullKey = this.getFullKey(key);
+    const itemStr = this.storage.getItem(fullKey);
+    if (!itemStr) {
+      return defaultValue;
+    }
+
+    try {
+      const item: StorageItem<T> = JSON.parse(itemStr);
+      if (item.expiry && Date.now() > item.expiry) {
+        this.storage.removeItem(fullKey);
+        return defaultValue;
+      }
+      return item.value;
+    } catch (error) {
+      console.error(`Error parsing item with key "${fullKey}":`, error);
+      this.storage.removeItem(fullKey); // 如果解析失败，删除该项
+      return defaultValue;
+    }
+  }
+
+  /**
+   * 移除存储项
+   * @param key 键
+   */
+  removeItem(key: string): void {
+    const fullKey = this.getFullKey(key);
+    this.storage.removeItem(fullKey);
+  }
+
+  /**
+   * 设置存储项
+   * @param key 键
+   * @param value 值
+   * @param ttl 存活时间（毫秒）
+   */
+  setItem<T>(key: string, value: T, ttl?: number): void {
+    const fullKey = this.getFullKey(key);
+    const expiry = ttl ? Date.now() + ttl : undefined;
+    const item: StorageItem<T> = { expiry, value };
+    try {
+      this.storage.setItem(fullKey, JSON.stringify(item));
+    } catch (error) {
+      console.error(`Error setting item with key "${fullKey}":`, error);
+    }
+  }
+
+  /**
+   * 获取完整的存储键
+   * @param key 原始键
+   * @returns 带前缀的完整键
+   */
+  private getFullKey(key: string): string {
+    return `${this.prefix}-${key}`;
+  }
+}
+
+export { StorageManager };
diff --git a/admin-ui/vue/packages/@core/base/shared/src/cache/types.ts b/admin-ui/vue/packages/@core/base/shared/src/cache/types.ts
new file mode 100644
index 0000000..d893920
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/cache/types.ts
@@ -0,0 +1,17 @@
+type StorageType = 'localStorage' | 'sessionStorage';
+
+interface StorageValue<T> {
+  data: T;
+  expiry: null | number;
+}
+
+interface IStorageCache {
+  clear(): void;
+  getItem<T>(key: string): null | T;
+  key(index: number): null | string;
+  length(): number;
+  removeItem(key: string): void;
+  setItem<T>(key: string, value: T, expiryInMinutes?: number): void;
+}
+
+export type { IStorageCache, StorageType, StorageValue };
diff --git a/admin-ui/vue/packages/@core/base/shared/src/color/__tests__/convert.test.ts b/admin-ui/vue/packages/@core/base/shared/src/color/__tests__/convert.test.ts
new file mode 100644
index 0000000..fc4256c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/color/__tests__/convert.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  convertToHsl,
+  convertToHslCssVar,
+  convertToRgb,
+  isValidColor,
+} from '../convert';
+
+describe('color conversion functions', () => {
+  it('should correctly convert color to HSL format', () => {
+    const color = '#ff0000';
+    const expectedHsl = 'hsl(0 100% 50%)';
+    expect(convertToHsl(color)).toEqual(expectedHsl);
+  });
+
+  it('should correctly convert color with alpha to HSL format', () => {
+    const color = 'rgba(255, 0, 0, 0.5)';
+    const expectedHsl = 'hsl(0 100% 50%) 0.5';
+    expect(convertToHsl(color)).toEqual(expectedHsl);
+  });
+
+  it('should correctly convert color to HSL CSS variable format', () => {
+    const color = '#ff0000';
+    const expectedHsl = '0 100% 50%';
+    expect(convertToHslCssVar(color)).toEqual(expectedHsl);
+  });
+
+  it('should correctly convert color with alpha to HSL CSS variable format', () => {
+    const color = 'rgba(255, 0, 0, 0.5)';
+    const expectedHsl = '0 100% 50% / 0.5';
+    expect(convertToHslCssVar(color)).toEqual(expectedHsl);
+  });
+
+  it('should correctly convert color to RGB CSS variable format', () => {
+    const color = 'hsl(284, 100%, 50%)';
+    const expectedRgb = 'rgb(187, 0, 255)';
+    expect(convertToRgb(color)).toEqual(expectedRgb);
+  });
+
+  it('should correctly convert color with alpha to RGBA CSS variable format', () => {
+    const color = 'hsla(284, 100%, 50%, 0.92)';
+    const expectedRgba = 'rgba(187, 0, 255, 0.92)';
+    expect(convertToRgb(color)).toEqual(expectedRgba);
+  });
+});
+
+describe('isValidColor', () => {
+  it('isValidColor function', () => {
+    // 测试有效颜色
+    expect(isValidColor('blue')).toBe(true);
+    expect(isValidColor('#000000')).toBe(true);
+
+    // 测试无效颜色
+    expect(isValidColor('invalid color')).toBe(false);
+    expect(isValidColor()).toBe(false);
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/color/color.ts b/admin-ui/vue/packages/@core/base/shared/src/color/color.ts
new file mode 100644
index 0000000..e3cefdb
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/color/color.ts
@@ -0,0 +1,9 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+export function isDarkColor(color: string) {
+  return new TinyColor(color).isDark();
+}
+
+export function isLightColor(color: string) {
+  return new TinyColor(color).isLight();
+}
diff --git a/admin-ui/vue/packages/@core/base/shared/src/color/convert.ts b/admin-ui/vue/packages/@core/base/shared/src/color/convert.ts
new file mode 100644
index 0000000..dd7dff2
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/color/convert.ts
@@ -0,0 +1,62 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+/**
+ * 将颜色转换为HSL格式。
+ *
+ * HSL是一种颜色模型，包括色相(Hue)、饱和度(Saturation)和亮度(Lightness)三个部分。
+ *
+ * @param {string} color 输入的颜色。
+ * @returns {string} HSL格式的颜色字符串。
+ */
+function convertToHsl(color: string): string {
+  const { a, h, l, s } = new TinyColor(color).toHsl();
+  const hsl = `hsl(${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%)`;
+  return a < 1 ? `${hsl} ${a}` : hsl;
+}
+
+/**
+ * 将颜色转换为HSL CSS变量。
+ *
+ * 这个函数与convertToHsl函数类似，但是返回的字符串格式稍有不同，
+ * 以便可以作为CSS变量使用。
+ *
+ * @param {string} color 输入的颜色。
+ * @returns {string} 可以作为CSS变量使用的HSL格式的颜色字符串。
+ */
+function convertToHslCssVar(color: string): string {
+  const { a, h, l, s } = new TinyColor(color).toHsl();
+  const hsl = `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+  return a < 1 ? `${hsl} / ${a}` : hsl;
+}
+
+/**
+ * 将颜色转换为RGB颜色字符串
+ * TinyColor无法处理hsl内包含'deg'、'grad'、'rad'或'turn'的字符串
+ * 比如 hsl(231deg 98% 65%)将被解析为rgb(0, 0, 0)
+ * 这里在转换之前先将这些单位去掉
+ * @param str 表示HLS颜色值的字符串
+ * @returns 如果颜色值有效，则返回对应的RGB颜色字符串；如果无效，则返回rgb(0, 0, 0)
+ */
+function convertToRgb(str: string): string {
+  return new TinyColor(str.replaceAll(/deg|grad|rad|turn/g, '')).toRgbString();
+}
+
+/**
+ * 检查颜色是否有效
+ * @param {string} color - 待检查的颜色
+ * 如果颜色有效返回true，否则返回false
+ */
+function isValidColor(color?: string) {
+  if (!color) {
+    return false;
+  }
+  return new TinyColor(color).isValid;
+}
+
+export {
+  convertToHsl,
+  convertToHslCssVar,
+  convertToRgb,
+  isValidColor,
+  TinyColor,
+};
diff --git a/admin-ui/vue/packages/@core/base/shared/src/color/generator.ts b/admin-ui/vue/packages/@core/base/shared/src/color/generator.ts
new file mode 100644
index 0000000..ac7bd8a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/color/generator.ts
@@ -0,0 +1,45 @@
+import { getColors } from 'theme-colors';
+
+import { convertToHslCssVar, TinyColor } from './convert';
+
+interface ColorItem {
+  alias?: string;
+  color: string;
+  name: string;
+}
+
+function generatorColorVariables(colorItems: ColorItem[]) {
+  const colorVariables: Record<string, string> = {};
+
+  colorItems.forEach(({ alias, color, name }) => {
+    if (color) {
+      const colorsMap = getColors(new TinyColor(color).toHexString());
+
+      let mainColor = colorsMap['500'];
+
+      const colorKeys = Object.keys(colorsMap);
+
+      colorKeys.forEach((key) => {
+        const colorValue = colorsMap[key];
+
+        if (colorValue) {
+          const hslColor = convertToHslCssVar(colorValue);
+          colorVariables[`--${name}-${key}`] = hslColor;
+          if (alias) {
+            colorVariables[`--${alias}-${key}`] = hslColor;
+          }
+
+          if (key === '500') {
+            mainColor = hslColor;
+          }
+        }
+      });
+      if (alias && mainColor) {
+        colorVariables[`--${alias}`] = mainColor;
+      }
+    }
+  });
+  return colorVariables;
+}
+
+export { generatorColorVariables };
diff --git a/admin-ui/vue/packages/@core/base/shared/src/color/index.ts b/admin-ui/vue/packages/@core/base/shared/src/color/index.ts
new file mode 100644
index 0000000..9fade3d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/color/index.ts
@@ -0,0 +1,3 @@
+export * from './color';
+export * from './convert';
+export * from './generator';
diff --git a/admin-ui/vue/packages/@core/base/shared/src/constants/globals.ts b/admin-ui/vue/packages/@core/base/shared/src/constants/globals.ts
new file mode 100644
index 0000000..3c69957
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/constants/globals.ts
@@ -0,0 +1,16 @@
+/** layout content 组件的高度 */
+export const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `--vben-content-height`;
+/** layout content 组件的宽度 */
+export const CSS_VARIABLE_LAYOUT_CONTENT_WIDTH = `--vben-content-width`;
+/** layout header 组件的高度 */
+export const CSS_VARIABLE_LAYOUT_HEADER_HEIGHT = `--vben-header-height`;
+/** layout footer 组件的高度 */
+export const CSS_VARIABLE_LAYOUT_FOOTER_HEIGHT = `--vben-footer-height`;
+
+/** 内容区域的组件ID */
+export const ELEMENT_ID_MAIN_CONTENT = `__vben_main_content`;
+
+/**
+ * @zh_CN 默认命名空间
+ */
+export const DEFAULT_NAMESPACE = 'vben';
diff --git a/admin-ui/vue/packages/@core/base/shared/src/constants/index.ts b/admin-ui/vue/packages/@core/base/shared/src/constants/index.ts
new file mode 100644
index 0000000..09e55f5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/constants/index.ts
@@ -0,0 +1,2 @@
+export * from './globals';
+export * from './vben';
diff --git a/admin-ui/vue/packages/@core/base/shared/src/constants/vben.ts b/admin-ui/vue/packages/@core/base/shared/src/constants/vben.ts
new file mode 100644
index 0000000..5ba78f4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/constants/vben.ts
@@ -0,0 +1,28 @@
+/**
+ * @zh_CN GITHUB 仓库地址
+ */
+export const VBEN_GITHUB_URL = 'https://github.com/vbenjs/vue-vben-admin';
+
+/**
+ * @zh_CN 文档地址
+ */
+export const VBEN_DOC_URL = 'https://doc.vben.pro';
+
+/**
+ * @zh_CN Vben Logo
+ */
+export const VBEN_LOGO_URL =
+  'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp';
+
+/**
+ * @zh_CN Vben Admin 首页地址
+ */
+export const VBEN_PREVIEW_URL = 'https://www.vben.pro';
+
+export const VBEN_ELE_PREVIEW_URL = 'https://ele.vben.pro';
+
+export const VBEN_NAIVE_PREVIEW_URL = 'https://naive.vben.pro';
+
+export const VBEN_ANT_PREVIEW_URL = 'https://ant.vben.pro';
+
+export const VBEN_TD_PREVIEW_URL = 'https://tdesign.vben.pro';
diff --git a/admin-ui/vue/packages/@core/base/shared/src/global-state.ts b/admin-ui/vue/packages/@core/base/shared/src/global-state.ts
new file mode 100644
index 0000000..2d71356
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/global-state.ts
@@ -0,0 +1,45 @@
+/**
+ * 全局复用的变量、组件、配置，各个模块之间共享
+ * 通过单例模式实现,单例必须注意不受请求影响，例如用户信息这些需要根据请求获取的。后续如果有ssr需求，也不会影响
+ */
+
+interface ComponentsState {
+  [key: string]: any;
+}
+
+interface MessageState {
+  copyPreferencesSuccess?: (title: string, content?: string) => void;
+}
+
+export interface IGlobalSharedState {
+  components: ComponentsState;
+  message: MessageState;
+}
+
+class GlobalShareState {
+  #components: ComponentsState = {};
+  #message: MessageState = {};
+
+  /**
+   * 定义框架内部各个场景的消息提示
+   */
+  public defineMessage({ copyPreferencesSuccess }: MessageState) {
+    this.#message = {
+      copyPreferencesSuccess,
+    };
+  }
+
+  public getComponents(): ComponentsState {
+    return this.#components;
+  }
+
+  public getMessage(): MessageState {
+    return this.#message;
+  }
+
+  public setComponents(value: ComponentsState) {
+    this.#components = value;
+  }
+}
+
+export const globalShareState = new GlobalShareState();
diff --git a/admin-ui/vue/packages/@core/base/shared/src/store.ts b/admin-ui/vue/packages/@core/base/shared/src/store.ts
new file mode 100644
index 0000000..4b03afb
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/store.ts
@@ -0,0 +1 @@
+export * from '@tanstack/vue-store';
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/date.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/date.test.ts
new file mode 100644
index 0000000..46a27c5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/date.test.ts
@@ -0,0 +1,143 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  formatDate,
+  formatDateTime,
+  getCurrentTimezone,
+  getSystemTimezone,
+  isDate,
+  isDayjsObject,
+  setCurrentTimezone,
+} from '../date';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+describe('dateUtils', () => {
+  const sampleISO = '2024-10-30T12:34:56Z';
+  const sampleTimestamp = Date.parse(sampleISO);
+
+  beforeEach(() => {
+    // 重置时区
+    dayjs.tz.setDefault();
+    setCurrentTimezone(); // 重置为系统默认
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // ===============================
+  // formatDate
+  // ===============================
+  describe('formatDate', () => {
+    it('should format a valid ISO date string', () => {
+      const formatted = formatDate(sampleISO, 'YYYY/MM/DD');
+      expect(formatted).toMatch(/2024\/10\/30/);
+    });
+
+    it('should format a timestamp correctly', () => {
+      const formatted = formatDate(sampleTimestamp);
+      expect(formatted).toMatch(/2024-10-30/);
+    });
+
+    it('should format a Date object', () => {
+      const formatted = formatDate(new Date(sampleISO));
+      expect(formatted).toMatch(/2024-10-30/);
+    });
+
+    it('should format a dayjs object', () => {
+      const formatted = formatDate(dayjs(sampleISO));
+      expect(formatted).toMatch(/2024-10-30/);
+    });
+
+    it('should return original input if date is invalid', () => {
+      const invalid = 'not-a-date';
+      const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const formatted = formatDate(invalid);
+      expect(formatted).toBe(invalid);
+      expect(spy).toHaveBeenCalledOnce();
+    });
+
+    it('should apply given format', () => {
+      const formatted = formatDate(sampleISO, 'YYYY-MM-DD HH:mm');
+      expect(formatted).toMatch(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}/);
+    });
+  });
+
+  // ===============================
+  // formatDateTime
+  // ===============================
+  describe('formatDateTime', () => {
+    it('should format date into full datetime', () => {
+      const result = formatDateTime(sampleISO);
+      expect(result).toMatch(/2024-10-30 \d{2}:\d{2}:\d{2}/);
+    });
+  });
+
+  // ===============================
+  // isDate
+  // ===============================
+  describe('isDate', () => {
+    it('should return true for Date instances', () => {
+      expect(isDate(new Date())).toBe(true);
+    });
+
+    it('should return false for non-Date values', () => {
+      expect(isDate('2024-10-30')).toBe(false);
+      expect(isDate(null)).toBe(false);
+      expect(isDate(undefined)).toBe(false);
+    });
+  });
+
+  // ===============================
+  // isDayjsObject
+  // ===============================
+  describe('isDayjsObject', () => {
+    it('should return true for dayjs objects', () => {
+      expect(isDayjsObject(dayjs())).toBe(true);
+    });
+
+    it('should return false for other values', () => {
+      expect(isDayjsObject(new Date())).toBe(false);
+      expect(isDayjsObject('string')).toBe(false);
+    });
+  });
+
+  // ===============================
+  // getSystemTimezone
+  // ===============================
+  describe('getSystemTimezone', () => {
+    it('should return a valid IANA timezone string', () => {
+      const tz = getSystemTimezone();
+      expect(typeof tz).toBe('string');
+      expect(tz).toMatch(/^[A-Z]+\/[A-Z_]+/i);
+    });
+  });
+
+  // ===============================
+  // setCurrentTimezone / getCurrentTimezone
+  // ===============================
+  describe('setCurrentTimezone & getCurrentTimezone', () => {
+    it('should set and retrieve the current timezone', () => {
+      setCurrentTimezone('Asia/Shanghai');
+      expect(getCurrentTimezone()).toBe('Asia/Shanghai');
+    });
+
+    it('should reset to system timezone when called with no args', () => {
+      const guessed = getSystemTimezone();
+      setCurrentTimezone();
+      expect(getCurrentTimezone()).toBe(guessed);
+    });
+
+    it('should update dayjs default timezone', () => {
+      setCurrentTimezone('America/New_York');
+      const d = dayjs('2024-01-01T00:00:00Z');
+      // 校验时区转换生效（小时变化）
+      expect(d.tz().format('HH')).not.toBe('00');
+    });
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/diff.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/diff.test.ts
new file mode 100644
index 0000000..cb3227b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/diff.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+
+import { diff } from '../diff';
+
+describe('diff function', () => {
+  it('should return an empty object when comparing identical objects', () => {
+    const obj1 = { a: 1, b: { c: 2 } };
+    const obj2 = { a: 1, b: { c: 2 } };
+    expect(diff(obj1, obj2)).toEqual(undefined);
+  });
+
+  it('should detect simple changes in primitive values', () => {
+    const obj1 = { a: 1, b: 2 };
+    const obj2 = { a: 1, b: 3 };
+    expect(diff(obj1, obj2)).toEqual({ b: 3 });
+  });
+
+  it('should detect nested object changes', () => {
+    const obj1 = { a: 1, b: { c: 2, d: 4 } };
+    const obj2 = { a: 1, b: { c: 3, d: 4 } };
+    expect(diff(obj1, obj2)).toEqual({ b: { c: 3 } });
+  });
+
+  it('should handle array changes', () => {
+    const obj1 = { a: [1, 2, 3], b: 2 };
+    const obj2 = { a: [1, 2, 4], b: 2 };
+    expect(diff(obj1, obj2)).toEqual({ a: [1, 2, 4] });
+  });
+
+  it('should handle added keys', () => {
+    const obj1 = { a: 1 };
+    const obj2 = { a: 1, b: 2 };
+    expect(diff(obj1, obj2)).toEqual({ b: 2 });
+  });
+
+  it('should handle removed keys', () => {
+    const obj1 = { a: 1, b: 2 };
+    const obj2 = { a: 1 };
+    expect(diff(obj1, obj2)).toEqual(undefined);
+  });
+
+  it('should handle boolean value changes', () => {
+    const obj1 = { a: true, b: false };
+    const obj2 = { a: true, b: true };
+    expect(diff(obj1, obj2)).toEqual({ b: true });
+  });
+
+  it('should handle null and undefined values', () => {
+    const obj1 = { a: null, b: undefined };
+    const obj2: any = { a: 1, b: undefined };
+    expect(diff(obj1, obj2)).toEqual({ a: 1 });
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/dom.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/dom.test.ts
new file mode 100644
index 0000000..df51268
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/dom.test.ts
@@ -0,0 +1,127 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { getElementVisibleRect } from '../dom';
+
+describe('getElementVisibleRect', () => {
+  // 设置浏览器视口尺寸的 mock
+  beforeEach(() => {
+    vi.spyOn(document.documentElement, 'clientHeight', 'get').mockReturnValue(
+      800,
+    );
+    vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(800);
+    vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(
+      1000,
+    );
+    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1000);
+  });
+
+  it('should return default rect if element is undefined', () => {
+    expect(getElementVisibleRect()).toEqual({
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      width: 0,
+    });
+  });
+
+  it('should return default rect if element is null', () => {
+    expect(getElementVisibleRect(null)).toEqual({
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      width: 0,
+    });
+  });
+
+  it('should return correct visible rect when element is fully visible', () => {
+    const element = {
+      getBoundingClientRect: () => ({
+        bottom: 400,
+        height: 300,
+        left: 200,
+        right: 600,
+        top: 100,
+        width: 400,
+      }),
+    } as HTMLElement;
+
+    expect(getElementVisibleRect(element)).toEqual({
+      bottom: 400,
+      height: 300,
+      left: 200,
+      right: 600,
+      top: 100,
+      width: 400,
+    });
+  });
+
+  it('should return correct visible rect when element is partially off-screen at the top', () => {
+    const element = {
+      getBoundingClientRect: () => ({
+        bottom: 200,
+        height: 250,
+        left: 100,
+        right: 500,
+        top: -50,
+        width: 400,
+      }),
+    } as HTMLElement;
+
+    expect(getElementVisibleRect(element)).toEqual({
+      bottom: 200,
+      height: 200,
+      left: 100,
+      right: 500,
+      top: 0,
+      width: 400,
+    });
+  });
+
+  it('should return correct visible rect when element is partially off-screen at the right', () => {
+    const element = {
+      getBoundingClientRect: () => ({
+        bottom: 400,
+        height: 300,
+        left: 800,
+        right: 1200,
+        top: 100,
+        width: 400,
+      }),
+    } as HTMLElement;
+
+    expect(getElementVisibleRect(element)).toEqual({
+      bottom: 400,
+      height: 300,
+      left: 800,
+      right: 1000,
+      top: 100,
+      width: 200,
+    });
+  });
+
+  it('should return all zeros when element is completely off-screen', () => {
+    const element = {
+      getBoundingClientRect: () => ({
+        bottom: 1200,
+        height: 300,
+        left: 1100,
+        right: 1400,
+        top: 900,
+        width: 300,
+      }),
+    } as HTMLElement;
+
+    expect(getElementVisibleRect(element)).toEqual({
+      bottom: 800,
+      height: 0,
+      left: 1100,
+      right: 1000,
+      top: 900,
+      width: 0,
+    });
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/inference.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/inference.test.ts
new file mode 100644
index 0000000..7fda465
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/inference.test.ts
@@ -0,0 +1,183 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  getFirstNonNullOrUndefined,
+  isBoolean,
+  isEmpty,
+  isHttpUrl,
+  isObject,
+  isUndefined,
+  isWindow,
+} from '../inference';
+
+describe('isHttpUrl', () => {
+  it("should return true when given 'http://example.com'", () => {
+    expect(isHttpUrl('http://example.com')).toBe(true);
+  });
+
+  it("should return true when given 'https://example.com'", () => {
+    expect(isHttpUrl('https://example.com')).toBe(true);
+  });
+
+  it("should return false when given 'ftp://example.com'", () => {
+    expect(isHttpUrl('ftp://example.com')).toBe(false);
+  });
+
+  it("should return false when given 'example.com'", () => {
+    expect(isHttpUrl('example.com')).toBe(false);
+  });
+});
+
+describe('isUndefined', () => {
+  it('isUndefined should return true for undefined values', () => {
+    expect(isUndefined()).toBe(true);
+  });
+
+  it('isUndefined should return false for null values', () => {
+    expect(isUndefined(null)).toBe(false);
+  });
+
+  it('isUndefined should return false for defined values', () => {
+    expect(isUndefined(0)).toBe(false);
+    expect(isUndefined('')).toBe(false);
+    expect(isUndefined(false)).toBe(false);
+  });
+
+  it('isUndefined should return false for objects and arrays', () => {
+    expect(isUndefined({})).toBe(false);
+    expect(isUndefined([])).toBe(false);
+  });
+});
+
+describe('isEmpty', () => {
+  it('should return true for empty string', () => {
+    expect(isEmpty('')).toBe(true);
+  });
+
+  it('should return true for empty array', () => {
+    expect(isEmpty([])).toBe(true);
+  });
+
+  it('should return true for empty object', () => {
+    expect(isEmpty({})).toBe(true);
+  });
+
+  it('should return false for non-empty string', () => {
+    expect(isEmpty('hello')).toBe(false);
+  });
+
+  it('should return false for non-empty array', () => {
+    expect(isEmpty([1, 2, 3])).toBe(false);
+  });
+
+  it('should return false for non-empty object', () => {
+    expect(isEmpty({ a: 1 })).toBe(false);
+  });
+
+  it('should return true for null or undefined', () => {
+    expect(isEmpty(null)).toBe(true);
+    expect(isEmpty()).toBe(true);
+  });
+
+  it('should return false for number or boolean', () => {
+    expect(isEmpty(0)).toBe(false);
+    expect(isEmpty(true)).toBe(false);
+  });
+});
+
+describe('isWindow', () => {
+  it('should return true for the window object', () => {
+    expect(isWindow(window)).toBe(true);
+  });
+
+  it('should return false for other objects', () => {
+    expect(isWindow({})).toBe(false);
+    expect(isWindow([])).toBe(false);
+    expect(isWindow(null)).toBe(false);
+  });
+});
+
+describe('isBoolean', () => {
+  it('should return true for boolean values', () => {
+    expect(isBoolean(true)).toBe(true);
+    expect(isBoolean(false)).toBe(true);
+  });
+
+  it('should return false for non-boolean values', () => {
+    expect(isBoolean(null)).toBe(false);
+    expect(isBoolean(42)).toBe(false);
+    expect(isBoolean('string')).toBe(false);
+    expect(isBoolean({})).toBe(false);
+    expect(isBoolean([])).toBe(false);
+  });
+});
+
+describe('isObject', () => {
+  it('should return true for objects', () => {
+    expect(isObject({})).toBe(true);
+    expect(isObject({ a: 1 })).toBe(true);
+  });
+
+  it('should return false for non-objects', () => {
+    expect(isObject(null)).toBe(false);
+    expect(isObject(42)).toBe(false);
+    expect(isObject('string')).toBe(false);
+    expect(isObject(true)).toBe(false);
+    expect(isObject([1, 2, 3])).toBe(true);
+    expect(isObject(new Date())).toBe(true);
+    expect(isObject(/regex/)).toBe(true);
+  });
+});
+
+describe('getFirstNonNullOrUndefined', () => {
+  describe('getFirstNonNullOrUndefined', () => {
+    it('should return the first non-null and non-undefined value for a number array', () => {
+      expect(getFirstNonNullOrUndefined<number>(undefined, null, 0, 42)).toBe(
+        0,
+      );
+      expect(getFirstNonNullOrUndefined<number>(null, undefined, 42, 123)).toBe(
+        42,
+      );
+    });
+
+    it('should return the first non-null and non-undefined value for a string array', () => {
+      expect(
+        getFirstNonNullOrUndefined<string>(undefined, null, '', 'hello'),
+      ).toBe('');
+      expect(
+        getFirstNonNullOrUndefined<string>(null, undefined, 'test', 'world'),
+      ).toBe('test');
+    });
+
+    it('should return undefined if all values are null or undefined', () => {
+      expect(getFirstNonNullOrUndefined(undefined, null)).toBeUndefined();
+      expect(getFirstNonNullOrUndefined(null)).toBeUndefined();
+    });
+
+    it('should work with a single value', () => {
+      expect(getFirstNonNullOrUndefined(42)).toBe(42);
+      expect(getFirstNonNullOrUndefined()).toBeUndefined();
+      expect(getFirstNonNullOrUndefined(null)).toBeUndefined();
+    });
+
+    it('should handle mixed types correctly', () => {
+      expect(
+        getFirstNonNullOrUndefined<number | object | string>(
+          undefined,
+          null,
+          'test',
+          123,
+          { key: 'value' },
+        ),
+      ).toBe('test');
+      expect(
+        getFirstNonNullOrUndefined<number | object | string>(
+          null,
+          undefined,
+          [1, 2, 3],
+          'string',
+        ),
+      ).toEqual([1, 2, 3]);
+    });
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/letter.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/letter.test.ts
new file mode 100644
index 0000000..a4aebaf
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/letter.test.ts
@@ -0,0 +1,116 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  capitalizeFirstLetter,
+  kebabToCamelCase,
+  toCamelCase,
+  toLowerCaseFirstLetter,
+} from '../letter';
+
+describe('capitalizeFirstLetter', () => {
+  it('should capitalize the first letter of a string', () => {
+    expect(capitalizeFirstLetter('hello')).toBe('Hello');
+    expect(capitalizeFirstLetter('world')).toBe('World');
+  });
+
+  it('should handle empty strings', () => {
+    expect(capitalizeFirstLetter('')).toBe('');
+  });
+
+  it('should handle single character strings', () => {
+    expect(capitalizeFirstLetter('a')).toBe('A');
+    expect(capitalizeFirstLetter('b')).toBe('B');
+  });
+
+  it('should not change the case of other characters', () => {
+    expect(capitalizeFirstLetter('hElLo')).toBe('HElLo');
+  });
+});
+
+describe('toLowerCaseFirstLetter', () => {
+  it('should convert the first letter to lowercase', () => {
+    expect(toLowerCaseFirstLetter('CommonAppName')).toBe('commonAppName');
+    expect(toLowerCaseFirstLetter('AnotherKeyExample')).toBe(
+      'anotherKeyExample',
+    );
+  });
+
+  it('should return the same string if the first letter is already lowercase', () => {
+    expect(toLowerCaseFirstLetter('alreadyLowerCase')).toBe('alreadyLowerCase');
+  });
+
+  it('should handle empty strings', () => {
+    expect(toLowerCaseFirstLetter('')).toBe('');
+  });
+
+  it('should handle single character strings', () => {
+    expect(toLowerCaseFirstLetter('A')).toBe('a');
+    expect(toLowerCaseFirstLetter('a')).toBe('a');
+  });
+
+  it('should handle strings with only one uppercase letter', () => {
+    expect(toLowerCaseFirstLetter('A')).toBe('a');
+  });
+
+  it('should handle strings with special characters', () => {
+    expect(toLowerCaseFirstLetter('!Special')).toBe('!Special');
+    expect(toLowerCaseFirstLetter('123Number')).toBe('123Number');
+  });
+});
+
+describe('toCamelCase', () => {
+  it('should return the key if parentKey is empty', () => {
+    expect(toCamelCase('child', '')).toBe('child');
+  });
+
+  it('should combine parentKey and key in camel case', () => {
+    expect(toCamelCase('child', 'parent')).toBe('parentChild');
+  });
+
+  it('should handle empty key and parentKey', () => {
+    expect(toCamelCase('', '')).toBe('');
+  });
+
+  it('should handle key with capital letters', () => {
+    expect(toCamelCase('Child', 'parent')).toBe('parentChild');
+    expect(toCamelCase('Child', 'Parent')).toBe('ParentChild');
+  });
+});
+
+describe('kebabToCamelCase', () => {
+  it('should convert kebab-case to camelCase correctly', () => {
+    expect(kebabToCamelCase('my-component-name')).toBe('myComponentName');
+  });
+
+  it('should handle multiple consecutive hyphens', () => {
+    expect(kebabToCamelCase('my--component--name')).toBe('myComponentName');
+  });
+
+  it('should trim leading and trailing hyphens', () => {
+    expect(kebabToCamelCase('-my-component-name-')).toBe('myComponentName');
+  });
+
+  it('should preserve the case of the first word', () => {
+    expect(kebabToCamelCase('My-component-name')).toBe('MyComponentName');
+  });
+
+  it('should convert a single word correctly', () => {
+    expect(kebabToCamelCase('component')).toBe('component');
+  });
+
+  it('should return an empty string if input is empty', () => {
+    expect(kebabToCamelCase('')).toBe('');
+  });
+
+  it('should handle strings with no hyphens', () => {
+    expect(kebabToCamelCase('mycomponentname')).toBe('mycomponentname');
+  });
+
+  it('should handle strings with only hyphens', () => {
+    expect(kebabToCamelCase('---')).toBe('');
+  });
+
+  it('should handle mixed case inputs', () => {
+    expect(kebabToCamelCase('my-Component-Name')).toBe('myComponentName');
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/resources.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/resources.test.ts
new file mode 100644
index 0000000..f14ff89
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/resources.test.ts
@@ -0,0 +1,82 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { loadScript } from '../resources';
+
+const testJsPath =
+  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js';
+
+describe('loadScript', () => {
+  beforeEach(() => {
+    // 每个测试前清空 head，保证环境干净
+    document.head.innerHTML = '';
+  });
+
+  it('should resolve when the script loads successfully', async () => {
+    const promise = loadScript(testJsPath);
+
+    // 此时脚本元素已被创建并插入
+    const script = document.querySelector(
+      `script[src="${testJsPath}"]`,
+    ) as HTMLScriptElement;
+    expect(script).toBeTruthy();
+
+    // 模拟加载成功
+    script.dispatchEvent(new Event('load'));
+
+    // 等待 promise resolve
+    await expect(promise).resolves.toBeUndefined();
+  });
+
+  it('should not insert duplicate script and resolve immediately if already loaded', async () => {
+    // 先手动插入一个相同 src 的 script
+    const existing = document.createElement('script');
+    existing.src = 'bar.js';
+    document.head.append(existing);
+
+    // 再次调用
+    const promise = loadScript('bar.js');
+
+    // 立即 resolve
+    await expect(promise).resolves.toBeUndefined();
+
+    // head 中只保留一个
+    const scripts = document.head.querySelectorAll('script[src="bar.js"]');
+    expect(scripts).toHaveLength(1);
+  });
+
+  it('should reject when the script fails to load', async () => {
+    const promise = loadScript('error.js');
+
+    const script = document.querySelector(
+      'script[src="error.js"]',
+    ) as HTMLScriptElement;
+    expect(script).toBeTruthy();
+
+    // 模拟加载失败
+    script.dispatchEvent(new Event('error'));
+
+    await expect(promise).rejects.toThrow('Failed to load script: error.js');
+  });
+
+  it('should handle multiple concurrent calls and only insert one script tag', async () => {
+    const p1 = loadScript(testJsPath);
+    const p2 = loadScript(testJsPath);
+
+    const script = document.querySelector(
+      `script[src="${testJsPath}"]`,
+    ) as HTMLScriptElement;
+    expect(script).toBeTruthy();
+
+    // 触发一次 load，两个 promise 都应该 resolve
+    script.dispatchEvent(new Event('load'));
+
+    await expect(p1).resolves.toBeUndefined();
+    await expect(p2).resolves.toBeUndefined();
+
+    // 只插入一次
+    const scripts = document.head.querySelectorAll(
+      `script[src="${testJsPath}"]`,
+    );
+    expect(scripts).toHaveLength(1);
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/state-handler.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/state-handler.test.ts
new file mode 100644
index 0000000..d11be06
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/state-handler.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+
+import { StateHandler } from '../state-handler';
+
+describe('stateHandler', () => {
+  it('should resolve when condition is set to true', async () => {
+    const handler = new StateHandler();
+
+    // 模拟异步设置 condition 为 true
+    setTimeout(() => {
+      handler.setConditionTrue(); // 明确触发 condition 为 true
+    }, 10);
+
+    // 等待条件被设置为 true
+    await handler.waitForCondition();
+    expect(handler.isConditionTrue()).toBe(true);
+  });
+
+  it('should resolve immediately if condition is already true', async () => {
+    const handler = new StateHandler();
+    handler.setConditionTrue(); // 提前设置为 true
+
+    // 立即 resolve，因为 condition 已经是 true
+    await handler.waitForCondition();
+    expect(handler.isConditionTrue()).toBe(true);
+  });
+
+  it('should reject when condition is set to false after waiting', async () => {
+    const handler = new StateHandler();
+
+    // 模拟异步设置 condition 为 false
+    setTimeout(() => {
+      handler.setConditionFalse(); // 明确触发 condition 为 false
+    }, 10);
+
+    // 等待过程中，期望 Promise 被 reject
+    await expect(handler.waitForCondition()).rejects.toThrow();
+    expect(handler.isConditionTrue()).toBe(false);
+  });
+
+  it('should reset condition to false', () => {
+    const handler = new StateHandler();
+    handler.setConditionTrue(); // 设置为 true
+    handler.reset(); // 重置为 false
+
+    expect(handler.isConditionTrue()).toBe(false);
+  });
+
+  it('should resolve when condition is set to true after reset', async () => {
+    const handler = new StateHandler();
+    handler.reset(); // 确保初始为 false
+
+    setTimeout(() => {
+      handler.setConditionTrue(); // 重置后设置为 true
+    }, 10);
+
+    await handler.waitForCondition();
+    expect(handler.isConditionTrue()).toBe(true);
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/tree.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/tree.test.ts
new file mode 100644
index 0000000..afe43cc
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/tree.test.ts
@@ -0,0 +1,196 @@
+import { describe, expect, it } from 'vitest';
+
+import { filterTree, mapTree, traverseTreeValues } from '../tree';
+
+describe('traverseTreeValues', () => {
+  interface Node {
+    children?: Node[];
+    name: string;
+  }
+
+  type NodeValue = string;
+
+  const sampleTree: Node[] = [
+    {
+      name: 'A',
+      children: [
+        { name: 'B' },
+        {
+          name: 'C',
+          children: [{ name: 'D' }, { name: 'E' }],
+        },
+      ],
+    },
+    {
+      name: 'F',
+      children: [
+        { name: 'G' },
+        {
+          name: 'H',
+          children: [{ name: 'I' }],
+        },
+      ],
+    },
+  ];
+
+  it('traverses tree and returns all node values', () => {
+    const values = traverseTreeValues<Node, NodeValue>(
+      sampleTree,
+      (node) => node.name,
+      {
+        childProps: 'children',
+      },
+    );
+    expect(values).toEqual(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']);
+  });
+
+  it('handles empty tree', () => {
+    const values = traverseTreeValues<Node, NodeValue>([], (node) => node.name);
+    expect(values).toEqual([]);
+  });
+
+  it('handles tree with only root node', () => {
+    const rootNode = { name: 'A' };
+    const values = traverseTreeValues<Node, NodeValue>(
+      [rootNode],
+      (node) => node.name,
+    );
+    expect(values).toEqual(['A']);
+  });
+
+  it('handles tree with only leaf nodes', () => {
+    const leafNodes = [{ name: 'A' }, { name: 'B' }, { name: 'C' }];
+    const values = traverseTreeValues<Node, NodeValue>(
+      leafNodes,
+      (node) => node.name,
+    );
+    expect(values).toEqual(['A', 'B', 'C']);
+  });
+});
+
+describe('filterTree', () => {
+  const tree = [
+    {
+      id: 1,
+      children: [
+        { id: 2 },
+        { id: 3, children: [{ id: 4 }, { id: 5 }, { id: 6 }] },
+        { id: 7 },
+      ],
+    },
+    { id: 8, children: [{ id: 9 }, { id: 10 }] },
+    { id: 11 },
+  ];
+
+  it('should return all nodes when condition is always true', () => {
+    const result = filterTree(tree, () => true, { childProps: 'children' });
+    expect(result).toEqual(tree);
+  });
+
+  it('should return only root nodes when condition is always false', () => {
+    const result = filterTree(tree, () => false);
+    expect(result).toEqual([]);
+  });
+
+  it('should return nodes with even id values', () => {
+    const result = filterTree(tree, (node) => node.id % 2 === 0);
+    expect(result).toEqual([{ id: 8, children: [{ id: 10 }] }]);
+  });
+
+  it('should return nodes with odd id values and their ancestors', () => {
+    const result = filterTree(tree, (node) => node.id % 2 === 1);
+    expect(result).toEqual([
+      {
+        id: 1,
+        children: [{ id: 3, children: [{ id: 5 }] }, { id: 7 }],
+      },
+      { id: 11 },
+    ]);
+  });
+
+  it('should return nodes with "leaf" in their name', () => {
+    const tree = [
+      {
+        name: 'root',
+        children: [
+          { name: 'leaf 1' },
+          {
+            name: 'branch',
+            children: [{ name: 'leaf 2' }, { name: 'leaf 3' }],
+          },
+          { name: 'leaf 4' },
+        ],
+      },
+    ];
+    const result = filterTree(
+      tree,
+      (node) => node.name.includes('leaf') || node.name === 'root',
+    );
+    expect(result).toEqual([
+      {
+        name: 'root',
+        children: [{ name: 'leaf 1' }, { name: 'leaf 4' }],
+      },
+    ]);
+  });
+});
+
+describe('mapTree', () => {
+  it('map infinite depth tree using mapTree', () => {
+    const tree = [
+      {
+        id: 1,
+        name: 'node1',
+        children: [
+          { id: 2, name: 'node2' },
+          { id: 3, name: 'node3' },
+          {
+            id: 4,
+            name: 'node4',
+            children: [
+              {
+                id: 5,
+                name: 'node5',
+                children: [
+                  { id: 6, name: 'node6' },
+                  { id: 7, name: 'node7' },
+                ],
+              },
+              { id: 8, name: 'node8' },
+            ],
+          },
+        ],
+      },
+    ];
+    const newTree = mapTree(tree, (node) => ({
+      ...node,
+      name: `${node.name}-new`,
+    }));
+
+    expect(newTree).toEqual([
+      {
+        id: 1,
+        name: 'node1-new',
+        children: [
+          { id: 2, name: 'node2-new' },
+          { id: 3, name: 'node3-new' },
+          {
+            id: 4,
+            name: 'node4-new',
+            children: [
+              {
+                id: 5,
+                name: 'node5-new',
+                children: [
+                  { id: 6, name: 'node6-new' },
+                  { id: 7, name: 'node7-new' },
+                ],
+              },
+              { id: 8, name: 'node8-new' },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/unique.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/unique.test.ts
new file mode 100644
index 0000000..0aa9d61
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/unique.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+
+import { uniqueByField } from '../unique';
+
+describe('uniqueByField', () => {
+  it('should return an array with unique items based on id field', () => {
+    const items = [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+      { id: 1, name: 'Duplicate Item' },
+    ];
+
+    const uniqueItems = uniqueByField(items, 'id');
+
+    expect(uniqueItems).toHaveLength(3);
+    expect(uniqueItems).toEqual([
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ]);
+  });
+
+  it('should return an empty array when input array is empty', () => {
+    const items: any[] = []; // Empty array
+
+    const uniqueItems = uniqueByField(items, 'id');
+
+    // Assert expected results
+    expect(uniqueItems).toEqual([]);
+  });
+
+  it('should handle arrays with only one item correctly', () => {
+    const items = [{ id: 1, name: 'Item 1' }];
+
+    const uniqueItems = uniqueByField(items, 'id');
+
+    // Assert expected results
+    expect(uniqueItems).toHaveLength(1);
+    expect(uniqueItems).toEqual([{ id: 1, name: 'Item 1' }]);
+  });
+
+  it('should preserve the order of the first occurrence of each item', () => {
+    const items = [
+      { id: 2, name: 'Item 2' },
+      { id: 1, name: 'Item 1' },
+      { id: 3, name: 'Item 3' },
+      { id: 1, name: 'Duplicate Item' },
+    ];
+
+    const uniqueItems = uniqueByField(items, 'id');
+
+    // Assert expected results (order of first occurrences preserved)
+    expect(uniqueItems).toEqual([
+      { id: 2, name: 'Item 2' },
+      { id: 1, name: 'Item 1' },
+      { id: 3, name: 'Item 3' },
+    ]);
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/update-css-variables.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/update-css-variables.test.ts
new file mode 100644
index 0000000..4a9cdad
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/update-css-variables.test.ts
@@ -0,0 +1,30 @@
+import { expect, it } from 'vitest';
+
+import { updateCSSVariables } from '../update-css-variables';
+
+it('updateCSSVariables should update CSS variables in :root selector', () => {
+  // 模拟初始的内联样式表内容
+  const initialStyleContent = ':root { --primaryColor: red; }';
+  document.head.innerHTML = `<style id="custom-styles">${initialStyleContent}</style>`;
+
+  // 要更新的CSS变量和它们的新值
+  const updatedVariables = {
+    fontSize: '16px',
+    primaryColor: 'blue',
+    secondaryColor: 'green',
+  };
+
+  // 调用函数来更新CSS变量
+  updateCSSVariables(updatedVariables, 'custom-styles');
+
+  // 获取更新后的样式内容
+  const styleElement = document.querySelector('#custom-styles');
+  const updatedStyleContent = styleElement ? styleElement.textContent : '';
+
+  // 检查更新后的样式内容是否包含正确的更新值
+  expect(
+    updatedStyleContent?.includes('primaryColor: blue;') &&
+      updatedStyleContent?.includes('secondaryColor: green;') &&
+      updatedStyleContent?.includes('fontSize: 16px;'),
+  ).toBe(true);
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/util.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/util.test.ts
new file mode 100644
index 0000000..dd58465
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/util.test.ts
@@ -0,0 +1,156 @@
+import { describe, expect, it } from 'vitest';
+
+import { bindMethods, getNestedValue } from '../util';
+
+class TestClass {
+  public value: string;
+
+  constructor(value: string) {
+    this.value = value;
+    bindMethods(this); // 调用通用方法
+  }
+
+  getValue() {
+    return this.value;
+  }
+
+  setValue(newValue: string) {
+    this.value = newValue;
+  }
+}
+
+describe('bindMethods', () => {
+  it('should bind methods to the instance correctly', () => {
+    const instance = new TestClass('initial');
+
+    // 解构方法
+    const { getValue } = instance;
+
+    // 检查 getValue 是否能正确调用，并且 this 绑定了 instance
+    expect(getValue()).toBe('initial');
+  });
+
+  it('should bind multiple methods', () => {
+    const instance = new TestClass('initial');
+
+    const { getValue, setValue } = instance;
+
+    // 检查 getValue 和 setValue 方法是否正确绑定了 this
+    setValue('newValue');
+    expect(getValue()).toBe('newValue');
+  });
+
+  it('should not bind non-function properties', () => {
+    const instance = new TestClass('initial');
+
+    // 检查普通属性是否保持原样
+    expect(instance.value).toBe('initial');
+  });
+
+  it('should not bind constructor method', () => {
+    const instance = new TestClass('test');
+
+    // 检查 constructor 是否没有被绑定
+    expect(instance.constructor.name).toBe('TestClass');
+  });
+
+  it('should not bind getter/setter properties', () => {
+    class TestWithGetterSetter {
+      get value() {
+        return this._value;
+      }
+
+      set value(newValue: string) {
+        this._value = newValue;
+      }
+
+      private _value: string = 'test';
+
+      constructor() {
+        bindMethods(this);
+      }
+    }
+
+    const instance = new TestWithGetterSetter();
+    const { value } = instance;
+
+    // Getter 和 setter 不应被绑定
+    expect(value).toBe('test');
+  });
+});
+
+describe('getNestedValue', () => {
+  interface UserProfile {
+    age: number;
+    name: string;
+  }
+
+  interface UserSettings {
+    theme: string;
+  }
+
+  interface Data {
+    user: {
+      profile: UserProfile;
+      settings: UserSettings;
+    };
+  }
+
+  const data: Data = {
+    user: {
+      profile: {
+        age: 25,
+        name: 'Alice',
+      },
+      settings: {
+        theme: 'dark',
+      },
+    },
+  };
+
+  it('should get a nested value when the path is valid', () => {
+    const result = getNestedValue(data, 'user.profile.name');
+    expect(result).toBe('Alice');
+  });
+
+  it('should return undefined for non-existent property', () => {
+    const result = getNestedValue(data, 'user.profile.gender');
+    expect(result).toBeUndefined();
+  });
+
+  it('should return undefined when accessing a non-existent deep path', () => {
+    const result = getNestedValue(data, 'user.nonexistent.field');
+    expect(result).toBeUndefined();
+  });
+
+  it('should return undefined if a middle level is undefined', () => {
+    const result = getNestedValue({ user: undefined }, 'user.profile.name');
+    expect(result).toBeUndefined();
+  });
+
+  it('should return the correct value for a nested setting', () => {
+    const result = getNestedValue(data, 'user.settings.theme');
+    expect(result).toBe('dark');
+  });
+
+  it('should work for a single-level path', () => {
+    const result = getNestedValue({ a: 1, b: 2 }, 'b');
+    expect(result).toBe(2);
+  });
+
+  it('should return the entire object if path is empty', () => {
+    expect(() => getNestedValue(data, '')()).toThrow();
+  });
+
+  it('should handle paths with array indexes', () => {
+    const complexData = { list: [{ name: 'Item1' }, { name: 'Item2' }] };
+    const result = getNestedValue(complexData, 'list.1.name');
+    expect(result).toBe('Item2');
+  });
+
+  it('should return undefined when accessing an out-of-bounds array index', () => {
+    const complexData = { list: [{ name: 'Item1' }] };
+    const result = getNestedValue(complexData, 'list.2.name');
+    expect(result).toBeUndefined();
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/window.test.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/window.test.ts
new file mode 100644
index 0000000..ebb04bb
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/__tests__/window.test.ts
@@ -0,0 +1,33 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { openWindow } from '../window';
+
+describe('openWindow', () => {
+  // 保存原始的 window.open 函数
+  let originalOpen: typeof window.open;
+
+  beforeEach(() => {
+    originalOpen = window.open;
+  });
+
+  afterEach(() => {
+    window.open = originalOpen;
+  });
+
+  it('should call window.open with correct arguments', () => {
+    const url = 'https://example.com';
+    const options = { noopener: true, noreferrer: true, target: '_blank' };
+
+    window.open = vi.fn();
+
+    // 调用函数
+    openWindow(url, options);
+
+    // 验证 window.open 是否被正确地调用
+    expect(window.open).toHaveBeenCalledWith(
+      url,
+      options.target,
+      'noopener=yes,noreferrer=yes',
+    );
+  });
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/cn.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/cn.ts
new file mode 100644
index 0000000..3a2f977
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/cn.ts
@@ -0,0 +1,10 @@
+import type { ClassValue } from 'clsx';
+
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/date.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/date.ts
new file mode 100644
index 0000000..926050d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/date.ts
@@ -0,0 +1,75 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+type FormatDate = Date | dayjs.Dayjs | number | string;
+
+type Format =
+  | 'HH'
+  | 'HH:mm'
+  | 'HH:mm:ss'
+  | 'YYYY'
+  | 'YYYY-MM'
+  | 'YYYY-MM-DD'
+  | 'YYYY-MM-DD HH'
+  | 'YYYY-MM-DD HH:mm'
+  | 'YYYY-MM-DD HH:mm:ss'
+  | (string & {});
+
+export function formatDate(time?: FormatDate, format: Format = 'YYYY-MM-DD') {
+  try {
+    const date = dayjs.isDayjs(time) ? time : dayjs(time);
+    if (!date.isValid()) {
+      throw new Error('Invalid date');
+    }
+    return date.tz().format(format);
+  } catch (error) {
+    console.error(`Error formatting date: ${error}`);
+    return String(time ?? '');
+  }
+}
+
+export function formatDateTime(time?: FormatDate) {
+  return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
+}
+
+export function isDate(value: any): value is Date {
+  return value instanceof Date;
+}
+
+export function isDayjsObject(value: any): value is dayjs.Dayjs {
+  return dayjs.isDayjs(value);
+}
+
+/**
+ * 获取当前时区
+ * @returns 当前时区
+ */
+export const getSystemTimezone = () => {
+  return dayjs.tz.guess();
+};
+
+/**
+ * 自定义设置的时区
+ */
+let currentTimezone = getSystemTimezone();
+
+/**
+ * 设置默认时区
+ * @param timezone
+ */
+export const setCurrentTimezone = (timezone?: string) => {
+  currentTimezone = timezone || getSystemTimezone();
+  dayjs.tz.setDefault(currentTimezone);
+};
+
+/**
+ * 获取设置的时区
+ * @returns 设置的时区
+ */
+export const getCurrentTimezone = () => {
+  return currentTimezone;
+};
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/diff.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/diff.ts
new file mode 100644
index 0000000..449214d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/diff.ts
@@ -0,0 +1,96 @@
+// type Diff<T = any> = T;
+
+// 比较两个数组是否相等
+
+function arraysEqual<T>(a: T[], b: T[]): boolean {
+  if (a.length !== b.length) return false;
+  const counter = new Map<T, number>();
+  for (const value of a) {
+    counter.set(value, (counter.get(value) || 0) + 1);
+  }
+  for (const value of b) {
+    const count = counter.get(value);
+    if (count === undefined || count === 0) {
+      return false;
+    }
+    counter.set(value, count - 1);
+  }
+  return true;
+}
+
+// 深度对比两个值
+// function deepEqual<T>(oldVal: T, newVal: T): boolean {
+//   if (
+//     typeof oldVal === 'object' &&
+//     oldVal !== null &&
+//     typeof newVal === 'object' &&
+//     newVal !== null
+//   ) {
+//     return Array.isArray(oldVal) && Array.isArray(newVal)
+//       ? arraysEqual(oldVal, newVal)
+//       : diff(oldVal as any, newVal as any) === null;
+//   } else {
+//     return oldVal === newVal;
+//   }
+// }
+
+// // diff 函数
+// function diff<T extends object>(
+//   oldObj: T,
+//   newObj: T,
+//   ignoreFields: (keyof T)[] = [],
+// ): { [K in keyof T]?: Diff<T[K]> } | null {
+//   const difference: { [K in keyof T]?: Diff<T[K]> } = {};
+
+//   for (const key in oldObj) {
+//     if (ignoreFields.includes(key)) continue;
+//     const oldValue = oldObj[key];
+//     const newValue = newObj[key];
+
+//     if (!deepEqual(oldValue, newValue)) {
+//       difference[key] = newValue;
+//     }
+//   }
+
+//   return Object.keys(difference).length === 0 ? null : difference;
+// }
+
+type DiffResult<T> = Partial<{
+  [K in keyof T]: T[K] extends object ? DiffResult<T[K]> : T[K];
+}>;
+
+function diff<T extends Record<string, any>>(obj1: T, obj2: T): DiffResult<T> {
+  function findDifferences(o1: any, o2: any): any {
+    if (Array.isArray(o1) && Array.isArray(o2)) {
+      if (!arraysEqual(o1, o2)) {
+        return o2;
+      }
+      return undefined;
+    }
+
+    if (
+      typeof o1 === 'object' &&
+      typeof o2 === 'object' &&
+      o1 !== null &&
+      o2 !== null
+    ) {
+      const diffResult: any = {};
+
+      const keys = new Set([...Object.keys(o1), ...Object.keys(o2)]);
+      keys.forEach((key) => {
+        const valueDiff = findDifferences(o1[key], o2[key]);
+        if (valueDiff !== undefined) {
+          diffResult[key] = valueDiff;
+        }
+      });
+
+      return Object.keys(diffResult).length > 0 ? diffResult : undefined;
+    }
+
+    return o1 === o2 ? undefined : o2;
+  }
+
+  return findDifferences(obj1, obj2);
+}
+
+export { arraysEqual, diff };
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/dom.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/dom.ts
new file mode 100644
index 0000000..6961717
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/dom.ts
@@ -0,0 +1,95 @@
+export interface VisibleDomRect {
+  bottom: number;
+  height: number;
+  left: number;
+  right: number;
+  top: number;
+  width: number;
+}
+
+/**
+ * 获取元素可见信息
+ * @param element
+ */
+export function getElementVisibleRect(
+  element?: HTMLElement | null | undefined,
+): VisibleDomRect {
+  if (!element) {
+    return {
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      width: 0,
+    };
+  }
+  const rect = element.getBoundingClientRect();
+  const viewHeight = Math.max(
+    document.documentElement.clientHeight,
+    window.innerHeight,
+  );
+
+  const top = Math.max(rect.top, 0);
+  const bottom = Math.min(rect.bottom, viewHeight);
+
+  const viewWidth = Math.max(
+    document.documentElement.clientWidth,
+    window.innerWidth,
+  );
+
+  const left = Math.max(rect.left, 0);
+  const right = Math.min(rect.right, viewWidth);
+
+  return {
+    bottom,
+    height: Math.max(0, bottom - top),
+    left,
+    right,
+    top,
+    width: Math.max(0, right - left),
+  };
+}
+
+export function getScrollbarWidth() {
+  const scrollDiv = document.createElement('div');
+
+  scrollDiv.style.visibility = 'hidden';
+  scrollDiv.style.overflow = 'scroll';
+  scrollDiv.style.position = 'absolute';
+  scrollDiv.style.top = '-9999px';
+
+  document.body.append(scrollDiv);
+
+  const innerDiv = document.createElement('div');
+  scrollDiv.append(innerDiv);
+
+  const scrollbarWidth = scrollDiv.offsetWidth - innerDiv.offsetWidth;
+
+  scrollDiv.remove();
+  return scrollbarWidth;
+}
+
+export function needsScrollbar() {
+  const doc = document.documentElement;
+  const body = document.body;
+
+  // 检查 body 的 overflow-y 样式
+  const overflowY = window.getComputedStyle(body).overflowY;
+
+  // 如果明确设置了需要滚动条的样式
+  if (overflowY === 'scroll' || overflowY === 'auto') {
+    return doc.scrollHeight > window.innerHeight;
+  }
+
+  // 在其他情况下，根据 scrollHeight 和 innerHeight 比较判断
+  return doc.scrollHeight > window.innerHeight;
+}
+
+export function triggerWindowResize(): void {
+  // 创建一个新的 resize 事件
+  const resizeEvent = new Event('resize');
+
+  // 触发 window 的 resize 事件
+  window.dispatchEvent(resizeEvent);
+}
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/download.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/download.ts
new file mode 100644
index 0000000..6f38ee5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/download.ts
@@ -0,0 +1,157 @@
+import { openWindow } from './window';
+
+interface DownloadOptions<T = string> {
+  fileName?: string;
+  source: T;
+  target?: string;
+}
+
+const DEFAULT_FILENAME = 'downloaded_file';
+
+/**
+ * 通过 URL 下载文件，支持跨域
+ * @throws {Error} - 当下载失败时抛出错误
+ */
+export async function downloadFileFromUrl({
+  fileName,
+  source,
+  target = '_blank',
+}: DownloadOptions): Promise<void> {
+  if (!source || typeof source !== 'string') {
+    throw new Error('Invalid URL.');
+  }
+
+  const isChrome = window.navigator.userAgent.toLowerCase().includes('chrome');
+  const isSafari = window.navigator.userAgent.toLowerCase().includes('safari');
+
+  if (/iP/.test(window.navigator.userAgent)) {
+    console.error('Your browser does not support download!');
+    return;
+  }
+
+  if (isChrome || isSafari) {
+    triggerDownload(source, resolveFileName(source, fileName));
+    return;
+  }
+  if (!source.includes('?')) {
+    source += '?download';
+  }
+
+  openWindow(source, { target });
+}
+
+/**
+ * 通过 Base64 下载文件
+ */
+export function downloadFileFromBase64({ fileName, source }: DownloadOptions) {
+  if (!source || typeof source !== 'string') {
+    throw new Error('Invalid Base64 data.');
+  }
+
+  const resolvedFileName = fileName || DEFAULT_FILENAME;
+  triggerDownload(source, resolvedFileName);
+}
+
+/**
+ * 通过图片 URL 下载图片文件
+ */
+export async function downloadFileFromImageUrl({
+  fileName,
+  source,
+}: DownloadOptions) {
+  const base64 = await urlToBase64(source);
+  downloadFileFromBase64({ fileName, source: base64 });
+}
+
+/**
+ * 通过 Blob 下载文件
+ */
+export function downloadFileFromBlob({
+  fileName = DEFAULT_FILENAME,
+  source,
+}: DownloadOptions<Blob>): void {
+  if (!(source instanceof Blob)) {
+    throw new TypeError('Invalid Blob data.');
+  }
+
+  const url = URL.createObjectURL(source);
+  triggerDownload(url, fileName);
+}
+
+/**
+ * 下载文件，支持 Blob、字符串和其他 BlobPart 类型
+ */
+export function downloadFileFromBlobPart({
+  fileName = DEFAULT_FILENAME,
+  source,
+}: DownloadOptions<BlobPart>): void {
+  // 如果 data 不是 Blob，则转换为 Blob
+  const blob =
+    source instanceof Blob
+      ? source
+      : new Blob([source], { type: 'application/octet-stream' });
+
+  // 创建对象 URL 并触发下载
+  const url = URL.createObjectURL(blob);
+  triggerDownload(url, fileName);
+}
+
+/**
+ * img url to base64
+ * @param url
+ */
+export function urlToBase64(url: string, mineType?: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let canvas = document.createElement('CANVAS') as HTMLCanvasElement | null;
+    const ctx = canvas?.getContext('2d');
+    const img = new Image();
+    img.crossOrigin = '';
+    img.addEventListener('load', () => {
+      if (!canvas || !ctx) {
+        return reject(new Error('Failed to create canvas.'));
+      }
+      canvas.height = img.height;
+      canvas.width = img.width;
+      ctx.drawImage(img, 0, 0);
+      const dataURL = canvas.toDataURL(mineType || 'image/png');
+      canvas = null;
+      resolve(dataURL);
+    });
+    img.src = url;
+  });
+}
+
+/**
+ * 通用下载触发函数
+ * @param href - 文件下载的 URL
+ * @param fileName - 下载文件的名称，如果未提供则自动识别
+ * @param revokeDelay - 清理 URL 的延迟时间 (毫秒)
+ */
+export function triggerDownload(
+  href: string,
+  fileName: string | undefined,
+  revokeDelay: number = 100,
+): void {
+  const defaultFileName = 'downloaded_file';
+  const finalFileName = fileName || defaultFileName;
+
+  const link = document.createElement('a');
+  link.href = href;
+  link.download = finalFileName;
+  link.style.display = 'none';
+
+  if (link.download === undefined) {
+    link.setAttribute('target', '_blank');
+  }
+
+  document.body.append(link);
+  link.click();
+  link.remove();
+
+  // 清理临时 URL 以释放内存
+  setTimeout(() => URL.revokeObjectURL(href), revokeDelay);
+}
+
+function resolveFileName(url: string, fileName?: string): string {
+  return fileName || url.slice(url.lastIndexOf('/') + 1) || DEFAULT_FILENAME;
+}
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/index.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/index.ts
new file mode 100644
index 0000000..fe8cd28
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/index.ts
@@ -0,0 +1,20 @@
+export * from './cn';
+export * from './date';
+export * from './diff';
+export * from './dom';
+export * from './download';
+export * from './inference';
+export * from './letter';
+export * from './merge';
+export * from './nprogress';
+export * from './resources';
+export * from './state-handler';
+export * from './to';
+export * from './tree';
+export * from './unique';
+export * from './update-css-variables';
+export * from './util';
+export * from './window';
+export { get, isEqual, set } from 'es-toolkit/compat';
+// export { cloneDeep } from 'es-toolkit/object';
+export { default as cloneDeep } from 'lodash.clonedeep';
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/inference.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/inference.ts
new file mode 100644
index 0000000..195d071
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/inference.ts
@@ -0,0 +1,165 @@
+// eslint-disable-next-line vue/prefer-import-from-vue
+import { isFunction, isObject, isString } from '@vue/shared';
+
+/**
+ * 检查传入的值是否为undefined。
+ *
+ * @param {unknown} value 要检查的值。
+ * @returns {boolean} 如果值是undefined，返回true，否则返回false。
+ */
+function isUndefined(value?: unknown): value is undefined {
+  return value === undefined;
+}
+
+/**
+ * 检查传入的值是否为boolean
+ * @param value
+ * @returns 如果值是布尔值，返回true，否则返回false。
+ */
+function isBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean';
+}
+
+/**
+ * 检查传入的值是否为空。
+ *
+ * 以下情况将被认为是空：
+ * - 值为null。
+ * - 值为undefined。
+ * - 值为一个空字符串。
+ * - 值为一个长度为0的数组。
+ * - 值为一个没有元素的Map或Set。
+ * - 值为一个没有属性的对象。
+ *
+ * @param {T} value 要检查的值。
+ * @returns {boolean} 如果值为空，返回true，否则返回false。
+ */
+function isEmpty<T = unknown>(value?: T): value is T {
+  if (value === null || value === undefined) {
+    return true;
+  }
+
+  if (Array.isArray(value) || isString(value)) {
+    return value.length === 0;
+  }
+
+  if (value instanceof Map || value instanceof Set) {
+    return value.size === 0;
+  }
+
+  if (isObject(value)) {
+    return Object.keys(value).length === 0;
+  }
+
+  return false;
+}
+
+/**
+ * 检查传入的字符串是否为有效的HTTP或HTTPS URL。
+ *
+ * @param {string} url 要检查的字符串。
+ * @return {boolean} 如果字符串是有效的HTTP或HTTPS URL，返回true，否则返回false。
+ */
+function isHttpUrl(url?: string): boolean {
+  if (!url) {
+    return false;
+  }
+  // 使用正则表达式测试URL是否以http:// 或 https:// 开头
+  const httpRegex = /^https?:\/\/.*$/;
+  return httpRegex.test(url);
+}
+
+/**
+ * 检查传入的值是否为window对象。
+ *
+ * @param {any} value 要检查的值。
+ * @returns {boolean} 如果值是window对象，返回true，否则返回false。
+ */
+function isWindow(value: any): value is Window {
+  return (
+    typeof window !== 'undefined' && value !== null && value === value.window
+  );
+}
+
+/**
+ * 检查当前运行环境是否为Mac OS。
+ *
+ * 这个函数通过检查navigator.userAgent字符串来判断当前运行环境。
+ * 如果userAgent字符串中包含"macintosh"或"mac os x"（不区分大小写），则认为当前环境是Mac OS。
+ *
+ * @returns {boolean} 如果当前环境是Mac OS，返回true，否则返回false。
+ */
+function isMacOs(): boolean {
+  const macRegex = /macintosh|mac os x/i;
+  return macRegex.test(navigator.userAgent);
+}
+
+/**
+ * 检查当前运行环境是否为Windows OS。
+ *
+ * 这个函数通过检查navigator.userAgent字符串来判断当前运行环境。
+ * 如果userAgent字符串中包含"windows"或"win32"（不区分大小写），则认为当前环境是Windows OS。
+ *
+ * @returns {boolean} 如果当前环境是Windows OS，返回true，否则返回false。
+ */
+function isWindowsOs(): boolean {
+  const windowsRegex = /windows|win32/i;
+  return windowsRegex.test(navigator.userAgent);
+}
+
+/**
+ * 检查传入的值是否为数字
+ * @param value
+ */
+function isNumber(value: any): value is number {
+  return typeof value === 'number' && Number.isFinite(value);
+}
+
+/**
+ * Returns the first value in the provided list that is neither `null` nor `undefined`.
+ *
+ * This function iterates over the input values and returns the first one that is
+ * not strictly equal to `null` or `undefined`. If all values are either `null` or
+ * `undefined`, it returns `undefined`.
+ *
+ * @template T - The type of the input values.
+ * @param {...(T | null | undefined)[]} values - A list of values to evaluate.
+ * @returns {T | undefined} - The first value that is not `null` or `undefined`, or `undefined` if none are found.
+ *
+ * @example
+ * // Returns 42 because it is the first non-null, non-undefined value.
+ * getFirstNonNullOrUndefined(undefined, null, 42, 'hello'); // 42
+ *
+ * @example
+ * // Returns 'hello' because it is the first non-null, non-undefined value.
+ * getFirstNonNullOrUndefined(null, undefined, 'hello', 123); // 'hello'
+ *
+ * @example
+ * // Returns undefined because all values are either null or undefined.
+ * getFirstNonNullOrUndefined(undefined, null); // undefined
+ */
+function getFirstNonNullOrUndefined<T>(
+  ...values: (null | T | undefined)[]
+): T | undefined {
+  for (const value of values) {
+    if (value !== undefined && value !== null) {
+      return value;
+    }
+  }
+  return undefined;
+}
+
+export {
+  getFirstNonNullOrUndefined,
+  isBoolean,
+  isEmpty,
+  isFunction,
+  isHttpUrl,
+  isMacOs,
+  isNumber,
+  isObject,
+  isString,
+  isUndefined,
+  isWindow,
+  isWindowsOs,
+};
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/letter.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/letter.ts
new file mode 100644
index 0000000..65a1c22
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/letter.ts
@@ -0,0 +1,47 @@
+/**
+ * 将字符串的首字母大写
+ * @param string
+ */
+function capitalizeFirstLetter(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+/**
+ * 将字符串的首字母转换为小写。
+ *
+ * @param str 要转换的字符串
+ * @returns 首字母小写的字符串
+ */
+function toLowerCaseFirstLetter(str: string): string {
+  if (!str) return str; // 如果字符串为空，直接返回
+  return str.charAt(0).toLowerCase() + str.slice(1);
+}
+
+/**
+ *  生成驼峰命名法的键名
+ * @param key
+ * @param parentKey
+ */
+function toCamelCase(key: string, parentKey: string): string {
+  if (!parentKey) {
+    return key;
+  }
+  return parentKey + key.charAt(0).toUpperCase() + key.slice(1);
+}
+
+function kebabToCamelCase(str: string): string {
+  return str
+    .split('-')
+    .filter(Boolean)
+    .map((word, index) =>
+      index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1),
+    )
+    .join('');
+}
+
+export {
+  capitalizeFirstLetter,
+  kebabToCamelCase,
+  toCamelCase,
+  toLowerCaseFirstLetter,
+};
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/merge.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/merge.ts
new file mode 100644
index 0000000..4bf79eb
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/merge.ts
@@ -0,0 +1,10 @@
+import { createDefu } from 'defu';
+
+export { createDefu as createMerge, defu as merge } from 'defu';
+
+export const mergeWithArrayOverride = createDefu((originObj, key, updates) => {
+  if (Array.isArray(originObj[key]) && Array.isArray(updates)) {
+    originObj[key] = updates;
+    return true;
+  }
+});
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/nprogress.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/nprogress.ts
new file mode 100644
index 0000000..8e8fe2e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/nprogress.ts
@@ -0,0 +1,43 @@
+import type NProgress from 'nprogress';
+
+// 创建一个NProgress实例的变量，初始值为null
+let nProgressInstance: null | typeof NProgress = null;
+
+/**
+ * 动态加载NProgress库，并进行配置。
+ * 此函数首先检查是否已经加载过NProgress库，如果已经加载过，则直接返回NProgress实例。
+ * 否则，动态导入NProgress库，进行配置，然后返回NProgress实例。
+ *
+ * @returns  NProgress实例的Promise对象。
+ */
+async function loadNprogress() {
+  if (nProgressInstance) {
+    return nProgressInstance;
+  }
+  nProgressInstance = await import('nprogress');
+  nProgressInstance.configure({
+    showSpinner: true,
+    speed: 300,
+  });
+  return nProgressInstance;
+}
+
+/**
+ * 开始显示进度条。
+ * 此函数首先加载NProgress库，然后调用NProgress的start方法开始显示进度条。
+ */
+async function startProgress() {
+  const nprogress = await loadNprogress();
+  nprogress?.start();
+}
+
+/**
+ * 停止显示进度条，并隐藏进度条。
+ * 此函数首先加载NProgress库，然后调用NProgress的done方法停止并隐藏进度条。
+ */
+async function stopProgress() {
+  const nprogress = await loadNprogress();
+  nprogress?.done();
+}
+
+export { startProgress, stopProgress };
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/resources.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/resources.ts
new file mode 100644
index 0000000..c5afa7f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/resources.ts
@@ -0,0 +1,21 @@
+/**
+ * 加载js文件
+ * @param src js文件地址
+ */
+function loadScript(src: string) {
+  return new Promise<void>((resolve, reject) => {
+    if (document.querySelector(`script[src="${src}"]`)) {
+      // 如果已经加载过，直接 resolve
+      return resolve();
+    }
+    const script = document.createElement('script');
+    script.src = src;
+    script.addEventListener('load', () => resolve());
+    script.addEventListener('error', () =>
+      reject(new Error(`Failed to load script: ${src}`)),
+    );
+    document.head.append(script);
+  });
+}
+
+export { loadScript };
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/state-handler.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/state-handler.ts
new file mode 100644
index 0000000..438fcda
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/state-handler.ts
@@ -0,0 +1,50 @@
+export class StateHandler {
+  private condition: boolean = false;
+  private rejectCondition: (() => void) | null = null;
+  private resolveCondition: (() => void) | null = null;
+
+  isConditionTrue(): boolean {
+    return this.condition;
+  }
+
+  reset() {
+    this.condition = false;
+    this.clearPromises();
+  }
+
+  // 触发状态为 false 时，reject
+  setConditionFalse() {
+    this.condition = false;
+    if (this.rejectCondition) {
+      this.rejectCondition();
+      this.clearPromises();
+    }
+  }
+
+  // 触发状态为 true 时，resolve
+  setConditionTrue() {
+    this.condition = true;
+    if (this.resolveCondition) {
+      this.resolveCondition();
+      this.clearPromises();
+    }
+  }
+
+  // 返回一个 Promise，等待 condition 变为 true
+  waitForCondition(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (this.condition) {
+        resolve(); // 如果 condition 已经为 true，立即 resolve
+      } else {
+        this.resolveCondition = resolve;
+        this.rejectCondition = reject;
+      }
+    });
+  }
+
+  // 清理 resolve/reject 函数
+  private clearPromises() {
+    this.resolveCondition = null;
+    this.rejectCondition = null;
+  }
+}
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/to.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/to.ts
new file mode 100644
index 0000000..6f25405
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/to.ts
@@ -0,0 +1,21 @@
+/**
+ * @param { Readonly<Promise> } promise
+ * @param {object=} errorExt - Additional Information you can pass to the err object
+ * @return { Promise }
+ */
+export async function to<T, U = Error>(
+  promise: Readonly<Promise<T>>,
+  errorExt?: object,
+): Promise<[null, T] | [U, undefined]> {
+  try {
+    const data = await promise;
+    const result: [null, T] = [null, data];
+    return result;
+  } catch (error) {
+    if (errorExt) {
+      const parsedError = Object.assign({}, error, errorExt);
+      return [parsedError as U, undefined];
+    }
+    return [error as U, undefined];
+  }
+}
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/tree.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/tree.ts
new file mode 100644
index 0000000..f3056dc
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/tree.ts
@@ -0,0 +1,125 @@
+interface TreeConfigOptions {
+  // 子属性的名称，默认为'children'
+  childProps: string;
+}
+
+/**
+ * @zh_CN 遍历树形结构，并返回所有节点中指定的值。
+ * @param tree 树形结构数组
+ * @param getValue 获取节点值的函数
+ * @param options 作为子节点数组的可选属性名称。
+ * @returns 所有节点中指定的值的数组
+ */
+function traverseTreeValues<T, V>(
+  tree: T[],
+  getValue: (node: T) => V,
+  options?: TreeConfigOptions,
+): V[] {
+  const result: V[] = [];
+  const { childProps } = options || {
+    childProps: 'children',
+  };
+
+  const dfs = (treeNode: T) => {
+    const value = getValue(treeNode);
+    result.push(value);
+    const children = (treeNode as Record<string, any>)?.[childProps];
+    if (!children) {
+      return;
+    }
+    if (children.length > 0) {
+      for (const child of children) {
+        dfs(child);
+      }
+    }
+  };
+
+  for (const treeNode of tree) {
+    dfs(treeNode);
+  }
+  return result.filter(Boolean);
+}
+
+/**
+ * 根据条件过滤给定树结构的节点，并以原有顺序返回所有匹配节点的数组。
+ * @param tree 要过滤的树结构的根节点数组。
+ * @param filter 用于匹配每个节点的条件。
+ * @param options 作为子节点数组的可选属性名称。
+ * @returns 包含所有匹配节点的数组。
+ */
+function filterTree<T extends Record<string, any>>(
+  tree: T[],
+  filter: (node: T) => boolean,
+  options?: TreeConfigOptions,
+): T[] {
+  const { childProps } = options || {
+    childProps: 'children',
+  };
+
+  const _filterTree = (nodes: T[]): T[] => {
+    return nodes.filter((node: Record<string, any>) => {
+      if (filter(node as T)) {
+        if (node[childProps]) {
+          node[childProps] = _filterTree(node[childProps]);
+        }
+        return true;
+      }
+      return false;
+    });
+  };
+
+  return _filterTree(tree);
+}
+
+/**
+ * 根据条件重新映射给定树结构的节
+ * @param tree 要过滤的树结构的根节点数组。
+ * @param mapper 用于map每个节点的条件。
+ * @param options 作为子节点数组的可选属性名称。
+ */
+function mapTree<T, V extends Record<string, any>>(
+  tree: T[],
+  mapper: (node: T) => V,
+  options?: TreeConfigOptions,
+): V[] {
+  const { childProps } = options || {
+    childProps: 'children',
+  };
+  return tree.map((node) => {
+    const mapperNode: Record<string, any> = mapper(node);
+    if (mapperNode[childProps]) {
+      mapperNode[childProps] = mapTree(mapperNode[childProps], mapper, options);
+    }
+    return mapperNode as V;
+  });
+}
+
+/**
+ * 对树形结构数据进行递归排序
+ * @param treeData - 树形数据数组
+ * @param sortFunction - 排序函数，用于定义排序规则
+ * @param options - 配置选项，包括子节点属性名
+ * @returns 排序后的树形数据
+ */
+function sortTree<T extends Record<string, any>>(
+  treeData: T[],
+  sortFunction: (a: T, b: T) => number,
+  options?: TreeConfigOptions,
+): T[] {
+  const { childProps } = options || {
+    childProps: 'children',
+  };
+
+  return treeData.toSorted(sortFunction).map((item) => {
+    const children = item[childProps];
+    if (children && Array.isArray(children) && children.length > 0) {
+      return {
+        ...item,
+        [childProps]: sortTree(children, sortFunction, options),
+      };
+    }
+    return item;
+  });
+}
+
+export { filterTree, mapTree, sortTree, traverseTreeValues };
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/unique.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/unique.ts
new file mode 100644
index 0000000..e81f972
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/unique.ts
@@ -0,0 +1,15 @@
+/**
+ * 根据指定字段对对象数组进行去重
+ * @param arr 要去重的对象数组
+ * @param key 去重依据的字段名
+ * @returns 去重后的对象数组
+ */
+function uniqueByField<T>(arr: T[], key: keyof T): T[] {
+  const seen = new Map<any, T>();
+  return arr.filter((item) => {
+    const value = item[key];
+    return seen.has(value) ? false : (seen.set(value, item), true);
+  });
+}
+
+export { uniqueByField };
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/update-css-variables.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/update-css-variables.ts
new file mode 100644
index 0000000..657deaa
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/update-css-variables.ts
@@ -0,0 +1,35 @@
+/**
+ * 更新 CSS 变量的函数
+ * @param variables 要更新的 CSS 变量与其新值的映射
+ */
+function updateCSSVariables(
+  variables: { [key: string]: string },
+  id = '__vben-styles__',
+): void {
+  // 获取或创建内联样式表元素
+  const styleElement =
+    document.querySelector(`#${id}`) || document.createElement('style');
+
+  styleElement.id = id;
+
+  // 构建要更新的 CSS 变量的样式文本
+  let cssText = ':root {';
+  for (const key in variables) {
+    if (Object.prototype.hasOwnProperty.call(variables, key)) {
+      cssText += `${key}: ${variables[key]};`;
+    }
+  }
+  cssText += '}';
+
+  // 将样式文本赋值给内联样式表
+  styleElement.textContent = cssText;
+
+  // 将内联样式表添加到文档头部
+  if (!document.querySelector(`#${id}`)) {
+    setTimeout(() => {
+      document.head.append(styleElement);
+    });
+  }
+}
+
+export { updateCSSVariables };
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/util.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/util.ts
new file mode 100644
index 0000000..885eeaa
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/util.ts
@@ -0,0 +1,44 @@
+export function bindMethods<T extends object>(instance: T): void {
+  const prototype = Object.getPrototypeOf(instance);
+  const propertyNames = Object.getOwnPropertyNames(prototype);
+
+  propertyNames.forEach((propertyName) => {
+    const descriptor = Object.getOwnPropertyDescriptor(prototype, propertyName);
+    const propertyValue = instance[propertyName as keyof T];
+
+    if (
+      typeof propertyValue === 'function' &&
+      propertyName !== 'constructor' &&
+      descriptor &&
+      !descriptor.get &&
+      !descriptor.set
+    ) {
+      instance[propertyName as keyof T] = propertyValue.bind(instance);
+    }
+  });
+}
+
+/**
+ * 获取嵌套对象的字段值
+ * @param obj - 要查找的对象
+ * @param path - 用于查找字段的路径，使用小数点分隔
+ * @returns 字段值，或者未找到时返回 undefined
+ */
+export function getNestedValue<T>(obj: T, path: string): any {
+  if (typeof path !== 'string' || path.length === 0) {
+    throw new Error('Path must be a non-empty string');
+  }
+  // 把路径字符串按 "." 分割成数组
+  const keys = path.split('.') as (number | string)[];
+
+  let current: any = obj;
+
+  for (const key of keys) {
+    if (current === null || current === undefined) {
+      return undefined;
+    }
+    current = current[key as keyof typeof current];
+  }
+
+  return current;
+}
diff --git a/admin-ui/vue/packages/@core/base/shared/src/utils/window.ts b/admin-ui/vue/packages/@core/base/shared/src/utils/window.ts
new file mode 100644
index 0000000..2d8697d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/src/utils/window.ts
@@ -0,0 +1,37 @@
+interface OpenWindowOptions {
+  noopener?: boolean;
+  noreferrer?: boolean;
+  target?: '_blank' | '_parent' | '_self' | '_top' | string;
+}
+
+/**
+ * 新窗口打开URL。
+ *
+ * @param url - 需要打开的网址。
+ * @param options - 打开窗口的选项。
+ */
+function openWindow(url: string, options: OpenWindowOptions = {}): void {
+  // 解构并设置默认值
+  const { noopener = true, noreferrer = true, target = '_blank' } = options;
+
+  // 基于选项创建特性字符串
+  const features = [noopener && 'noopener=yes', noreferrer && 'noreferrer=yes']
+    .filter(Boolean)
+    .join(',');
+
+  // 打开窗口
+  window.open(url, target, features);
+}
+
+/**
+ * 在新窗口中打开路由。
+ * @param path
+ */
+function openRouteInNewWindow(path: string) {
+  const { hash, origin } = location;
+  const fullPath = path.startsWith('/') ? path : `/${path}`;
+  const url = `${origin}${hash && !fullPath.startsWith('/#') ? '/#' : ''}${fullPath}`;
+  openWindow(url, { target: '_blank' });
+}
+
+export { openRouteInNewWindow, openWindow };
diff --git a/admin-ui/vue/packages/@core/base/shared/tsconfig.json b/admin-ui/vue/packages/@core/base/shared/tsconfig.json
new file mode 100644
index 0000000..f6860a3
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/shared/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/library.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/@core/base/typings/build.config.ts b/admin-ui/vue/packages/@core/base/typings/build.config.ts
new file mode 100644
index 0000000..97e572c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/typings/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
diff --git a/admin-ui/vue/packages/@core/base/typings/package.json b/admin-ui/vue/packages/@core/base/typings/package.json
new file mode 100644
index 0000000..6464e69
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/typings/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "@vben-core/typings",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/base/typings"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./vue-router": {
+      "types": "./vue-router.d.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "vue": "catalog:",
+    "vue-router": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/base/typings/src/app.d.ts b/admin-ui/vue/packages/@core/base/typings/src/app.d.ts
new file mode 100644
index 0000000..f2b4433
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/typings/src/app.d.ts
@@ -0,0 +1,121 @@
+type LayoutType =
+  | 'full-content'
+  | 'header-mixed-nav'
+  | 'header-nav'
+  | 'header-sidebar-nav'
+  | 'mixed-nav'
+  | 'sidebar-mixed-nav'
+  | 'sidebar-nav';
+
+type ThemeModeType = 'auto' | 'dark' | 'light';
+
+/**
+ * 偏好设置按钮位置
+ * fixed 固定在右侧
+ * header 顶栏
+ * auto 自动
+ */
+type PreferencesButtonPositionType = 'auto' | 'fixed' | 'header';
+
+type BuiltinThemeType =
+  | 'custom'
+  | 'deep-blue'
+  | 'deep-green'
+  | 'default'
+  | 'gray'
+  | 'green'
+  | 'neutral'
+  | 'orange'
+  | 'pink'
+  | 'red'
+  | 'rose'
+  | 'sky-blue'
+  | 'slate'
+  | 'stone'
+  | 'violet'
+  | 'yellow'
+  | 'zinc'
+  | (Record<never, never> & string);
+
+type ContentCompactType = 'compact' | 'wide';
+
+type LayoutHeaderModeType = 'auto' | 'auto-scroll' | 'fixed' | 'static';
+type LayoutHeaderMenuAlignType = 'center' | 'end' | 'start';
+
+/**
+ * 登录过期模式
+ * modal 弹窗模式
+ * page 页面模式
+ */
+type LoginExpiredModeType = 'modal' | 'page';
+
+/**
+ * 面包屑样式
+ * background 背景
+ * normal 默认
+ */
+type BreadcrumbStyleType = 'background' | 'normal';
+
+/**
+ * 权限模式
+ * backend 后端权限模式
+ * frontend 前端权限模式
+ * mixed 混合权限模式
+ */
+type AccessModeType = 'backend' | 'frontend' | 'mixed';
+
+/**
+ * 导航风格
+ * plain 朴素
+ * rounded 圆润
+ */
+type NavigationStyleType = 'plain' | 'rounded';
+
+/**
+ * 标签栏风格
+ * brisk 轻快
+ * card 卡片
+ * chrome 谷歌
+ * plain 朴素
+ */
+type TabsStyleType = 'brisk' | 'card' | 'chrome' | 'plain';
+
+/**
+ * 页面切换动画
+ */
+type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
+
+/**
+ * 页面切换动画
+ * panel-center 居中布局
+ * panel-left 居左布局
+ * panel-right 居右布局
+ */
+type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
+
+/**
+ * 时区选项
+ */
+interface TimezoneOption {
+  label: string;
+  offset: number;
+  timezone: string;
+}
+
+export type {
+  AccessModeType,
+  AuthPageLayoutType,
+  BreadcrumbStyleType,
+  BuiltinThemeType,
+  ContentCompactType,
+  LayoutHeaderMenuAlignType,
+  LayoutHeaderModeType,
+  LayoutType,
+  LoginExpiredModeType,
+  NavigationStyleType,
+  PageTransitionType,
+  PreferencesButtonPositionType,
+  TabsStyleType,
+  ThemeModeType,
+  TimezoneOption,
+};
diff --git a/admin-ui/vue/packages/@core/base/typings/src/basic.d.ts b/admin-ui/vue/packages/@core/base/typings/src/basic.d.ts
new file mode 100644
index 0000000..2f209f0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/typings/src/basic.d.ts
@@ -0,0 +1,35 @@
+interface BasicOption {
+  label: string;
+  value: string;
+}
+
+type SelectOption = BasicOption;
+
+type TabOption = BasicOption;
+
+interface BasicUserInfo {
+  /**
+   * 头像
+   */
+  avatar: string;
+  /**
+   * 用户昵称
+   */
+  realName: string;
+  /**
+   * 用户角色
+   */
+  roles?: string[];
+  /**
+   * 用户id
+   */
+  userId: string;
+  /**
+   * 用户名
+   */
+  username: string;
+}
+
+type ClassType = Array<object | string> | object | string;
+
+export type { BasicOption, BasicUserInfo, ClassType, SelectOption, TabOption };
diff --git a/admin-ui/vue/packages/@core/base/typings/src/helper.d.ts b/admin-ui/vue/packages/@core/base/typings/src/helper.d.ts
new file mode 100644
index 0000000..96d4f37
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/typings/src/helper.d.ts
@@ -0,0 +1,132 @@
+import type { ComputedRef, MaybeRef } from 'vue';
+
+/**
+ * 深层递归所有属性为可选
+ */
+type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;
+
+/**
+ * 深层递归所有属性为只读
+ */
+type DeepReadonly<T> = {
+  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
+};
+
+/**
+ * 任意类型的异步函数
+ */
+
+type AnyPromiseFunction<T extends any[] = any[], R = void> = (
+  ...arg: T
+) => PromiseLike<R>;
+
+/**
+ * 任意类型的普通函数
+ */
+type AnyNormalFunction<T extends any[] = any[], R = void> = (...arg: T) => R;
+
+/**
+ * 任意类型的函数
+ */
+type AnyFunction<T extends any[] = any[], R = void> =
+  | AnyNormalFunction<T, R>
+  | AnyPromiseFunction<T, R>;
+
+/**
+ *  T | null 包装
+ */
+type Nullable<T> = null | T;
+
+/**
+ * T | Not null 包装
+ */
+type NonNullable<T> = T extends null | undefined ? never : T;
+
+/**
+ * 字符串类型对象
+ */
+type Recordable<T> = Record<string, T>;
+
+/**
+ * 字符串类型对象（只读）
+ */
+interface ReadonlyRecordable<T = any> {
+  readonly [key: string]: T;
+}
+
+/**
+ * setTimeout 返回值类型
+ */
+type TimeoutHandle = ReturnType<typeof setTimeout>;
+
+/**
+ * setInterval 返回值类型
+ */
+type IntervalHandle = ReturnType<typeof setInterval>;
+
+/**
+ * 也许它是一个计算的 ref，或者一个 getter 函数
+ *
+ */
+type MaybeReadonlyRef<T> = (() => T) | ComputedRef<T>;
+
+/**
+ * 也许它是一个 ref，或者一个普通值，或者一个 getter 函数
+ *
+ */
+type MaybeComputedRef<T> = MaybeReadonlyRef<T> | MaybeRef<T>;
+
+type Merge<O extends object, T extends object> = {
+  [K in keyof O | keyof T]: K extends keyof T
+    ? T[K]
+    : K extends keyof O
+      ? O[K]
+      : never;
+};
+
+/**
+ * T = [
+ *  { name: string; age: number; },
+ *  { sex: 'male' | 'female'; age: string }
+ * ]
+ * =>
+ * MergeAll<T> = {
+ *  name: string;
+ *  sex: 'male' | 'female';
+ *  age: string
+ * }
+ */
+type MergeAll<
+  T extends object[],
+  R extends object = Record<string, any>,
+> = T extends [infer F extends object, ...infer Rest extends object[]]
+  ? MergeAll<Rest, Merge<R, F>>
+  : R;
+
+type EmitType = (name: Name, ...args: any[]) => void;
+
+type MaybePromise<T> = Promise<T> | T;
+
+export type {
+  AnyFunction,
+  AnyNormalFunction,
+  AnyPromiseFunction,
+  DeepPartial,
+  DeepReadonly,
+  EmitType,
+  IntervalHandle,
+  MaybeComputedRef,
+  MaybePromise,
+  MaybeReadonlyRef,
+  Merge,
+  MergeAll,
+  NonNullable,
+  Nullable,
+  ReadonlyRecordable,
+  Recordable,
+  TimeoutHandle,
+};
diff --git a/admin-ui/vue/packages/@core/base/typings/src/index.ts b/admin-ui/vue/packages/@core/base/typings/src/index.ts
new file mode 100644
index 0000000..33c3566
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/typings/src/index.ts
@@ -0,0 +1,6 @@
+export type * from './app';
+export type * from './basic';
+export type * from './helper';
+export type * from './menu-record';
+export type * from './tabs';
+export type * from './vue-router';
diff --git a/admin-ui/vue/packages/@core/base/typings/src/menu-record.ts b/admin-ui/vue/packages/@core/base/typings/src/menu-record.ts
new file mode 100644
index 0000000..21f6ab5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/typings/src/menu-record.ts
@@ -0,0 +1,76 @@
+import type { Component } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
+
+/**
+ * 扩展路由原始对象
+ */
+type ExRouteRecordRaw = RouteRecordRaw & {
+  parent?: string;
+  parents?: string[];
+  path?: any;
+};
+
+interface MenuRecordBadgeRaw {
+  /**
+   * 徽标
+   */
+  badge?: string;
+  /**
+   * 徽标类型
+   */
+  badgeType?: 'dot' | 'normal';
+  /**
+   * 徽标颜色
+   */
+  badgeVariants?: 'destructive' | 'primary' | string;
+}
+
+/**
+ * 菜单原始对象
+ */
+interface MenuRecordRaw extends MenuRecordBadgeRaw {
+  /**
+   * 激活时的图标名
+   */
+  activeIcon?: string;
+  /**
+   * 子菜单
+   */
+  children?: MenuRecordRaw[];
+  /**
+   * 是否禁用菜单
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 图标名
+   */
+  icon?: Component | string;
+  /**
+   * 菜单名
+   */
+  name: string;
+  /**
+   * 排序号
+   */
+  order?: number;
+  /**
+   * 父级路径
+   */
+  parent?: string;
+  /**
+   * 所有父级路径
+   */
+  parents?: string[];
+  /**
+   * 菜单路径，唯一，可当作key
+   */
+  path: string;
+  /**
+   * 是否显示菜单
+   * @default true
+   */
+  show?: boolean;
+}
+
+export type { ExRouteRecordRaw, MenuRecordBadgeRaw, MenuRecordRaw };
diff --git a/admin-ui/vue/packages/@core/base/typings/src/tabs.ts b/admin-ui/vue/packages/@core/base/typings/src/tabs.ts
new file mode 100644
index 0000000..58f7d26
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/typings/src/tabs.ts
@@ -0,0 +1,8 @@
+import type { RouteLocationNormalized } from 'vue-router';
+
+export interface TabDefinition extends RouteLocationNormalized {
+  /**
+   * 标签页的key
+   */
+  key?: string;
+}
diff --git a/admin-ui/vue/packages/@core/base/typings/src/vue-router.d.ts b/admin-ui/vue/packages/@core/base/typings/src/vue-router.d.ts
new file mode 100644
index 0000000..1577520
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/typings/src/vue-router.d.ts
@@ -0,0 +1,153 @@
+import type { Component } from 'vue';
+import type { Router, RouteRecordRaw } from 'vue-router';
+
+interface RouteMeta {
+  /**
+   * 激活图标（菜单/tab）
+   */
+  activeIcon?: string;
+  /**
+   * 当前激活的菜单，有时候不想激活现有菜单，需要激活父级菜单时使用
+   */
+  activePath?: string;
+  /**
+   * 是否固定标签页
+   * @default false
+   */
+  affixTab?: boolean;
+  /**
+   * 固定标签页的顺序
+   * @default 0
+   */
+  affixTabOrder?: number;
+  /**
+   * 需要特定的角色标识才可以访问
+   * @default []
+   */
+  authority?: string[];
+  /**
+   * 徽标
+   */
+  badge?: string;
+  /**
+   * 徽标类型
+   */
+  badgeType?: 'dot' | 'normal';
+  /**
+   * 徽标颜色
+   */
+  badgeVariants?:
+    | 'default'
+    | 'destructive'
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | string;
+  /**
+   * 路由的完整路径作为key（默认true）
+   */
+  fullPathKey?: boolean;
+  /**
+   * 当前路由的子级在菜单中不展现
+   * @default false
+   */
+  hideChildrenInMenu?: boolean;
+  /**
+   * 当前路由在面包屑中不展现
+   * @default false
+   */
+  hideInBreadcrumb?: boolean;
+  /**
+   * 当前路由在菜单中不展现
+   * @default false
+   */
+  hideInMenu?: boolean;
+  /**
+   * 当前路由在标签页不展现
+   * @default false
+   */
+  hideInTab?: boolean;
+  /**
+   * 图标（菜单/tab）
+   */
+  icon?: Component | string;
+  /**
+   * iframe 地址
+   */
+  iframeSrc?: string;
+  /**
+   * 忽略权限，直接可以访问
+   * @default false
+   */
+  ignoreAccess?: boolean;
+  /**
+   * 开启KeepAlive缓存
+   */
+  keepAlive?: boolean;
+  /**
+   * 外链-跳转路径
+   */
+  link?: string;
+  /**
+   * 路由是否已经加载过
+   */
+  loaded?: boolean;
+  /**
+   * 标签页最大打开数量
+   * @default -1
+   */
+  maxNumOfOpenTab?: number;
+  /**
+   * 菜单可以看到，但是访问会被重定向到403
+   */
+  menuVisibleWithForbidden?: boolean;
+  /**
+   * 不使用基础布局（仅在顶级生效）
+   */
+  noBasicLayout?: boolean;
+  /**
+   * 在新窗口打开
+   */
+  openInNewWindow?: boolean;
+  /**
+   * 用于路由->菜单排序
+   */
+  order?: number;
+  /**
+   * 菜单所携带的参数
+   */
+  query?: Recordable;
+  /**
+   * 标题名称
+   */
+  title: string;
+}
+
+// 定义递归类型以将 RouteRecordRaw 的 component 属性更改为 string
+type RouteRecordStringComponent<T = string> = Omit<
+  RouteRecordRaw,
+  'children' | 'component'
+> & {
+  children?: RouteRecordStringComponent<T>[];
+  component: T;
+};
+
+type ComponentRecordType = Record<string, () => Promise<Component>>;
+
+interface GenerateMenuAndRoutesOptions {
+  fetchMenuListAsync?: () => Promise<RouteRecordStringComponent[]>;
+  forbiddenComponent?: RouteRecordRaw['component'];
+  layoutMap?: ComponentRecordType;
+  pageMap?: ComponentRecordType;
+  roles?: string[];
+  router: Router;
+  routes: RouteRecordRaw[];
+}
+
+export type {
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+  RouteMeta,
+  RouteRecordRaw,
+  RouteRecordStringComponent,
+};
diff --git a/admin-ui/vue/packages/@core/base/typings/tsconfig.json b/admin-ui/vue/packages/@core/base/typings/tsconfig.json
new file mode 100644
index 0000000..f6860a3
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/typings/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/library.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/@core/base/typings/vue-router.d.ts b/admin-ui/vue/packages/@core/base/typings/vue-router.d.ts
new file mode 100644
index 0000000..4874bcd
--- /dev/null
+++ b/admin-ui/vue/packages/@core/base/typings/vue-router.d.ts
@@ -0,0 +1,9 @@
+/* eslint-disable no-restricted-imports */
+import type { RouteMeta as IRouteMeta } from '@vben-core/typings';
+
+import 'vue-router';
+
+declare module 'vue-router' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface RouteMeta extends IRouteMeta {}
+}
diff --git a/admin-ui/vue/packages/@core/composables/build.config.ts b/admin-ui/vue/packages/@core/composables/build.config.ts
new file mode 100644
index 0000000..97e572c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
diff --git a/admin-ui/vue/packages/@core/composables/package.json b/admin-ui/vue/packages/@core/composables/package.json
new file mode 100644
index 0000000..8574f3b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@vben-core/composables",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@core/composables"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@vben-core/shared": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "reka-ui": "catalog:",
+    "sortablejs": "catalog:",
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@types/sortablejs": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/composables/src/__tests__/use-sortable.test.ts b/admin-ui/vue/packages/@core/composables/src/__tests__/use-sortable.test.ts
new file mode 100644
index 0000000..e7ba1f1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/src/__tests__/use-sortable.test.ts
@@ -0,0 +1,48 @@
+import type { SortableOptions } from 'sortablejs';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useSortable } from '../use-sortable';
+
+describe('useSortable', () => {
+  beforeEach(() => {
+    vi.mock('sortablejs/modular/sortable.complete.esm.js', () => ({
+      default: {
+        create: vi.fn(),
+      },
+    }));
+  });
+  it('should call Sortable.create with the correct options', async () => {
+    // Create a mock element
+    const mockElement = document.createElement('div') as HTMLDivElement;
+
+    // Define custom options
+    const customOptions: SortableOptions = {
+      group: 'test-group',
+      sort: false,
+    };
+
+    // Use the useSortable function
+    const { initializeSortable } = useSortable(mockElement, customOptions);
+
+    // Initialize sortable
+    await initializeSortable();
+
+    // Import sortablejs to access the mocked create function
+    const Sortable = await import(
+      'sortablejs/modular/sortable.complete.esm.js'
+    );
+
+    // Verify that Sortable.create was called with the correct parameters
+    expect(Sortable.default.create).toHaveBeenCalledTimes(1);
+    expect(Sortable.default.create).toHaveBeenCalledWith(
+      mockElement,
+      expect.objectContaining({
+        animation: 300,
+        delay: 400,
+        delayOnTouchOnly: true,
+        ...customOptions,
+      }),
+    );
+  });
+});
diff --git a/admin-ui/vue/packages/@core/composables/src/index.ts b/admin-ui/vue/packages/@core/composables/src/index.ts
new file mode 100644
index 0000000..2dbd4b8
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/src/index.ts
@@ -0,0 +1,13 @@
+export * from './use-is-mobile';
+export * from './use-layout-style';
+export * from './use-namespace';
+export * from './use-priority-value';
+export * from './use-scroll-lock';
+export * from './use-simple-locale';
+export * from './use-sortable';
+export {
+  useEmitAsProps,
+  useForwardExpose,
+  useForwardProps,
+  useForwardPropsEmits,
+} from 'reka-ui';
diff --git a/admin-ui/vue/packages/@core/composables/src/use-is-mobile.ts b/admin-ui/vue/packages/@core/composables/src/use-is-mobile.ts
new file mode 100644
index 0000000..e35909f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/src/use-is-mobile.ts
@@ -0,0 +1,7 @@
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
+
+export function useIsMobile() {
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const isMobile = breakpoints.smaller('md');
+  return { isMobile };
+}
diff --git a/admin-ui/vue/packages/@core/composables/src/use-layout-style.ts b/admin-ui/vue/packages/@core/composables/src/use-layout-style.ts
new file mode 100644
index 0000000..395e9e5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/src/use-layout-style.ts
@@ -0,0 +1,87 @@
+import type { CSSProperties } from 'vue';
+
+import type { VisibleDomRect } from '@vben-core/shared/utils';
+
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+import {
+  CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT,
+  CSS_VARIABLE_LAYOUT_CONTENT_WIDTH,
+  CSS_VARIABLE_LAYOUT_FOOTER_HEIGHT,
+  CSS_VARIABLE_LAYOUT_HEADER_HEIGHT,
+} from '@vben-core/shared/constants';
+import { getElementVisibleRect } from '@vben-core/shared/utils';
+
+import { useCssVar, useDebounceFn } from '@vueuse/core';
+
+/**
+ * @zh_CN content style
+ */
+export function useLayoutContentStyle() {
+  let resizeObserver: null | ResizeObserver = null;
+  const contentElement = ref<HTMLDivElement | null>(null);
+  const visibleDomRect = ref<null | VisibleDomRect>(null);
+  const contentHeight = useCssVar(CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT);
+  const contentWidth = useCssVar(CSS_VARIABLE_LAYOUT_CONTENT_WIDTH);
+
+  const overlayStyle = computed((): CSSProperties => {
+    const { height, left, top, width } = visibleDomRect.value ?? {};
+    return {
+      height: `${height}px`,
+      left: `${left}px`,
+      position: 'fixed',
+      top: `${top}px`,
+      width: `${width}px`,
+      zIndex: 150,
+    };
+  });
+
+  const debouncedCalcHeight = useDebounceFn(
+    (_entries: ResizeObserverEntry[]) => {
+      visibleDomRect.value = getElementVisibleRect(contentElement.value);
+      contentHeight.value = `${visibleDomRect.value.height}px`;
+      contentWidth.value = `${visibleDomRect.value.width}px`;
+    },
+    16,
+  );
+
+  onMounted(() => {
+    if (contentElement.value && !resizeObserver) {
+      resizeObserver = new ResizeObserver(debouncedCalcHeight);
+      resizeObserver.observe(contentElement.value);
+    }
+  });
+
+  onUnmounted(() => {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+  });
+
+  return { contentElement, overlayStyle, visibleDomRect };
+}
+
+export function useLayoutHeaderStyle() {
+  const headerHeight = useCssVar(CSS_VARIABLE_LAYOUT_HEADER_HEIGHT);
+
+  return {
+    getLayoutHeaderHeight: () => {
+      return Number.parseInt(`${headerHeight.value}`, 10);
+    },
+    setLayoutHeaderHeight: (height: number) => {
+      headerHeight.value = `${height}px`;
+    },
+  };
+}
+
+export function useLayoutFooterStyle() {
+  const footerHeight = useCssVar(CSS_VARIABLE_LAYOUT_FOOTER_HEIGHT);
+
+  return {
+    getLayoutFooterHeight: () => {
+      return Number.parseInt(`${footerHeight.value}`, 10);
+    },
+    setLayoutFooterHeight: (height: number) => {
+      footerHeight.value = `${height}px`;
+    },
+  };
+}
diff --git a/admin-ui/vue/packages/@core/composables/src/use-namespace.ts b/admin-ui/vue/packages/@core/composables/src/use-namespace.ts
new file mode 100644
index 0000000..b22cf03
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/src/use-namespace.ts
@@ -0,0 +1,106 @@
+import { DEFAULT_NAMESPACE } from '@vben-core/shared/constants';
+
+/**
+ * @see copy https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-namespace/index.ts
+ */
+
+const statePrefix = 'is-';
+
+const _bem = (
+  namespace: string,
+  block: string,
+  blockSuffix: string,
+  element: string,
+  modifier: string,
+) => {
+  let cls = `${namespace}-${block}`;
+  if (blockSuffix) {
+    cls += `-${blockSuffix}`;
+  }
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+};
+
+const is: {
+  (name: string): string;
+  // eslint-disable-next-line @typescript-eslint/unified-signatures
+  (name: string, state: boolean | undefined): string;
+} = (name: string, ...args: [] | [boolean | undefined]) => {
+  const state = args.length > 0 ? args[0] : true;
+  return name && state ? `${statePrefix}${name}` : '';
+};
+
+const useNamespace = (block: string) => {
+  const namespace = DEFAULT_NAMESPACE;
+  const b = (blockSuffix = '') => _bem(namespace, block, blockSuffix, '', '');
+  const e = (element?: string) =>
+    element ? _bem(namespace, block, '', element, '') : '';
+  const m = (modifier?: string) =>
+    modifier ? _bem(namespace, block, '', '', modifier) : '';
+  const be = (blockSuffix?: string, element?: string) =>
+    blockSuffix && element
+      ? _bem(namespace, block, blockSuffix, element, '')
+      : '';
+  const em = (element?: string, modifier?: string) =>
+    element && modifier ? _bem(namespace, block, '', element, modifier) : '';
+  const bm = (blockSuffix?: string, modifier?: string) =>
+    blockSuffix && modifier
+      ? _bem(namespace, block, blockSuffix, '', modifier)
+      : '';
+  const bem = (blockSuffix?: string, element?: string, modifier?: string) =>
+    blockSuffix && element && modifier
+      ? _bem(namespace, block, blockSuffix, element, modifier)
+      : '';
+
+  // for css var
+  // --el-xxx: value;
+  const cssVar = (object: Record<string, string>) => {
+    const styles: Record<string, string> = {};
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace}-${key}`] = object[key];
+      }
+    }
+    return styles;
+  };
+  // with block
+  const cssVarBlock = (object: Record<string, string>) => {
+    const styles: Record<string, string> = {};
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${namespace}-${block}-${key}`] = object[key];
+      }
+    }
+    return styles;
+  };
+
+  const cssVarName = (name: string) => `--${namespace}-${name}`;
+  const cssVarBlockName = (name: string) => `--${namespace}-${block}-${name}`;
+
+  return {
+    b,
+    be,
+    bem,
+    bm,
+    // css
+    cssVar,
+    cssVarBlock,
+    cssVarBlockName,
+    cssVarName,
+    e,
+    em,
+    is,
+    m,
+    namespace,
+  };
+};
+
+type UseNamespaceReturn = ReturnType<typeof useNamespace>;
+
+export type { UseNamespaceReturn };
+export { useNamespace };
diff --git a/admin-ui/vue/packages/@core/composables/src/use-priority-value.ts b/admin-ui/vue/packages/@core/composables/src/use-priority-value.ts
new file mode 100644
index 0000000..74b5b5b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/src/use-priority-value.ts
@@ -0,0 +1,94 @@
+import type { ComputedRef, Ref } from 'vue';
+
+import { computed, getCurrentInstance, unref, useAttrs, useSlots } from 'vue';
+
+import {
+  getFirstNonNullOrUndefined,
+  kebabToCamelCase,
+} from '@vben-core/shared/utils';
+
+/**
+ * 依次从插槽、attrs、props、state 中获取值
+ * @param key
+ * @param props
+ * @param state
+ */
+export function usePriorityValue<
+  T extends Record<string, any>,
+  S extends Record<string, any>,
+  K extends keyof T = keyof T,
+>(key: K, props: T, state: Readonly<Ref<NoInfer<S>>> | undefined) {
+  const instance = getCurrentInstance();
+  const slots = useSlots();
+  const attrs = useAttrs() as T;
+
+  const value = computed((): T[K] => {
+    // props不管有没有传，都会有默认值，会影响这里的顺序，
+    // 通过判断原始props是否有值来判断是否传入
+    const rawProps = (instance?.vnode?.props || {}) as T;
+
+    const standardRawProps = {} as T;
+
+    for (const [key, value] of Object.entries(rawProps)) {
+      standardRawProps[kebabToCamelCase(key) as K] = value;
+    }
+    const propsKey =
+      standardRawProps?.[key] === undefined ? undefined : props[key];
+
+    // slot可以关闭
+    return getFirstNonNullOrUndefined(
+      slots[key as string],
+      attrs[key],
+      propsKey,
+      state?.value?.[key as keyof S],
+    ) as T[K];
+  });
+
+  return value;
+}
+
+/**
+ * 批量获取state中的值（每个值都是ref）
+ * @param props
+ * @param state
+ */
+export function usePriorityValues<
+  T extends Record<string, any>,
+  S extends Ref<Record<string, any>> = Readonly<Ref<NoInfer<T>, NoInfer<T>>>,
+>(props: T, state: S | undefined) {
+  const result: { [K in keyof T]: ComputedRef<T[K]> } = {} as never;
+
+  (Object.keys(props) as (keyof T)[]).forEach((key) => {
+    result[key] = usePriorityValue(key as keyof typeof props, props, state);
+  });
+
+  return result;
+}
+
+/**
+ * 批量获取state中的值（集中在一个computed，用于透传）
+ * @param props
+ * @param state
+ */
+export function useForwardPriorityValues<
+  T extends Record<string, any>,
+  S extends Ref<Record<string, any>> = Readonly<Ref<NoInfer<T>, NoInfer<T>>>,
+>(props: T, state: S | undefined) {
+  const computedResult: { [K in keyof T]: ComputedRef<T[K]> } = {} as never;
+
+  (Object.keys(props) as (keyof T)[]).forEach((key) => {
+    computedResult[key] = usePriorityValue(
+      key as keyof typeof props,
+      props,
+      state,
+    );
+  });
+
+  return computed(() => {
+    const unwrapResult: Record<string, any> = {};
+    Object.keys(props).forEach((key) => {
+      unwrapResult[key] = unref(computedResult[key]);
+    });
+    return unwrapResult as { [K in keyof T]: T[K] };
+  });
+}
diff --git a/admin-ui/vue/packages/@core/composables/src/use-scroll-lock.ts b/admin-ui/vue/packages/@core/composables/src/use-scroll-lock.ts
new file mode 100644
index 0000000..d1c1497
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/src/use-scroll-lock.ts
@@ -0,0 +1,54 @@
+import { getScrollbarWidth, needsScrollbar } from '@vben-core/shared/utils';
+
+import {
+  useScrollLock as _useScrollLock,
+  tryOnBeforeUnmount,
+  tryOnMounted,
+} from '@vueuse/core';
+
+export const SCROLL_FIXED_CLASS = `_scroll__fixed_`;
+
+export function useScrollLock() {
+  const isLocked = _useScrollLock(document.body);
+  const scrollbarWidth = getScrollbarWidth();
+
+  tryOnMounted(() => {
+    if (!needsScrollbar()) {
+      return;
+    }
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+
+    const layoutFixedNodes = document.querySelectorAll<HTMLElement>(
+      `.${SCROLL_FIXED_CLASS}`,
+    );
+    const nodes = [...layoutFixedNodes];
+    if (nodes.length > 0) {
+      nodes.forEach((node) => {
+        node.dataset.transition = node.style.transition;
+        node.style.transition = 'none';
+        node.style.paddingRight = `${scrollbarWidth}px`;
+      });
+    }
+    isLocked.value = true;
+  });
+
+  tryOnBeforeUnmount(() => {
+    if (!needsScrollbar()) {
+      return;
+    }
+    isLocked.value = false;
+    const layoutFixedNodes = document.querySelectorAll<HTMLElement>(
+      `.${SCROLL_FIXED_CLASS}`,
+    );
+    const nodes = [...layoutFixedNodes];
+    if (nodes.length > 0) {
+      nodes.forEach((node) => {
+        node.style.paddingRight = '';
+        requestAnimationFrame(() => {
+          node.style.transition = node.dataset.transition || '';
+        });
+      });
+    }
+    document.body.style.paddingRight = '';
+  });
+}
diff --git a/admin-ui/vue/packages/@core/composables/src/use-simple-locale/README.md b/admin-ui/vue/packages/@core/composables/src/use-simple-locale/README.md
new file mode 100644
index 0000000..c0a676d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/src/use-simple-locale/README.md
@@ -0,0 +1,3 @@
+# Simple i18n
+
+Simple i18 implementation
diff --git a/admin-ui/vue/packages/@core/composables/src/use-simple-locale/index.ts b/admin-ui/vue/packages/@core/composables/src/use-simple-locale/index.ts
new file mode 100644
index 0000000..67b8173
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/src/use-simple-locale/index.ts
@@ -0,0 +1,27 @@
+import type { Locale } from './messages';
+
+import { computed, ref } from 'vue';
+
+import { createSharedComposable } from '@vueuse/core';
+
+import { getMessages } from './messages';
+
+export const useSimpleLocale = createSharedComposable(() => {
+  const currentLocale = ref<Locale>('zh-CN');
+
+  const setSimpleLocale = (locale: Locale) => {
+    currentLocale.value = locale;
+  };
+
+  const $t = computed(() => {
+    const localeMessages = getMessages(currentLocale.value);
+    return (key: string) => {
+      return localeMessages[key] || key;
+    };
+  });
+  return {
+    $t,
+    currentLocale,
+    setSimpleLocale,
+  };
+});
diff --git a/admin-ui/vue/packages/@core/composables/src/use-simple-locale/messages.ts b/admin-ui/vue/packages/@core/composables/src/use-simple-locale/messages.ts
new file mode 100644
index 0000000..efc5c3c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/src/use-simple-locale/messages.ts
@@ -0,0 +1,24 @@
+export type Locale = 'en-US' | 'zh-CN';
+
+export const messages: Record<Locale, Record<string, string>> = {
+  'en-US': {
+    cancel: 'Cancel',
+    collapse: 'Collapse',
+    confirm: 'Confirm',
+    expand: 'Expand',
+    prompt: 'Prompt',
+    reset: 'Reset',
+    submit: 'Submit',
+  },
+  'zh-CN': {
+    cancel: '取消',
+    collapse: '收起',
+    confirm: '确认',
+    expand: '展开',
+    prompt: '提示',
+    reset: '重置',
+    submit: '提交',
+  },
+};
+
+export const getMessages = (locale: Locale) => messages[locale];
diff --git a/admin-ui/vue/packages/@core/composables/src/use-sortable.ts b/admin-ui/vue/packages/@core/composables/src/use-sortable.ts
new file mode 100644
index 0000000..57f87a6
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/src/use-sortable.ts
@@ -0,0 +1,29 @@
+import type { SortableOptions } from 'sortablejs';
+import type Sortable from 'sortablejs';
+
+function useSortable<T extends HTMLElement>(
+  sortableContainer: T,
+  options: SortableOptions = {},
+) {
+  const initializeSortable = async () => {
+    const Sortable = await import(
+      // @ts-expect-error - This is a dynamic import
+      'sortablejs/modular/sortable.complete.esm.js'
+    );
+    const sortable = Sortable?.default?.create?.(sortableContainer, {
+      animation: 300,
+      delay: 400,
+      delayOnTouchOnly: true,
+      ...options,
+    });
+    return sortable as Sortable;
+  };
+
+  return {
+    initializeSortable,
+  };
+}
+
+export { useSortable };
+
+export type { Sortable };
diff --git a/admin-ui/vue/packages/@core/composables/tsconfig.json b/admin-ui/vue/packages/@core/composables/tsconfig.json
new file mode 100644
index 0000000..f6860a3
--- /dev/null
+++ b/admin-ui/vue/packages/@core/composables/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/library.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/admin-ui/vue/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
new file mode 100644
index 0000000..a3c0c31
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
@@ -0,0 +1,140 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`defaultPreferences immutability test > should not modify the config object 1`] = `
+{
+  "app": {
+    "accessMode": "frontend",
+    "authPageLayout": "panel-right",
+    "checkUpdatesInterval": 1,
+    "colorGrayMode": false,
+    "colorWeakMode": false,
+    "compact": false,
+    "contentCompact": "wide",
+    "contentCompactWidth": 1200,
+    "contentPadding": 0,
+    "contentPaddingBottom": 0,
+    "contentPaddingLeft": 0,
+    "contentPaddingRight": 0,
+    "contentPaddingTop": 0,
+    "defaultAvatar": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp",
+    "defaultHomePath": "/analytics",
+    "dynamicTitle": true,
+    "enableCheckUpdates": true,
+    "enablePreferences": true,
+    "enableRefreshToken": false,
+    "enableStickyPreferencesNavigationBar": true,
+    "isMobile": false,
+    "layout": "sidebar-nav",
+    "locale": "zh-CN",
+    "loginExpiredMode": "page",
+    "name": "Vben Admin",
+    "preferencesButtonPosition": "auto",
+    "watermark": false,
+    "watermarkContent": "",
+    "zIndex": 200,
+  },
+  "breadcrumb": {
+    "enable": true,
+    "hideOnlyOne": false,
+    "showHome": false,
+    "showIcon": true,
+    "styleType": "normal",
+  },
+  "copyright": {
+    "companyName": "Vben",
+    "companySiteLink": "https://www.vben.pro",
+    "date": "2024",
+    "enable": true,
+    "icp": "",
+    "icpLink": "",
+    "settingShow": true,
+  },
+  "footer": {
+    "enable": false,
+    "fixed": false,
+    "height": 32,
+  },
+  "header": {
+    "enable": true,
+    "height": 50,
+    "hidden": false,
+    "menuAlign": "start",
+    "mode": "fixed",
+  },
+  "logo": {
+    "enable": true,
+    "fit": "contain",
+    "source": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp",
+  },
+  "navigation": {
+    "accordion": true,
+    "split": true,
+    "styleType": "rounded",
+  },
+  "shortcutKeys": {
+    "enable": true,
+    "globalLockScreen": true,
+    "globalLogout": true,
+    "globalPreferences": true,
+    "globalSearch": true,
+  },
+  "sidebar": {
+    "autoActivateChild": false,
+    "collapseWidth": 60,
+    "collapsed": false,
+    "collapsedButton": true,
+    "collapsedShowTitle": false,
+    "enable": true,
+    "expandOnHover": true,
+    "extraCollapse": false,
+    "extraCollapsedWidth": 60,
+    "fixedButton": true,
+    "hidden": false,
+    "mixedWidth": 80,
+    "width": 224,
+  },
+  "tabbar": {
+    "draggable": true,
+    "enable": true,
+    "height": 38,
+    "keepAlive": true,
+    "maxCount": 0,
+    "middleClickToClose": false,
+    "persist": true,
+    "showIcon": true,
+    "showMaximize": true,
+    "showMore": true,
+    "styleType": "chrome",
+    "wheelable": true,
+  },
+  "theme": {
+    "builtinType": "default",
+    "colorDestructive": "hsl(348 100% 61%)",
+    "colorPrimary": "hsl(212 100% 45%)",
+    "colorSuccess": "hsl(144 57% 58%)",
+    "colorWarning": "hsl(42 84% 61%)",
+    "fontSize": 16,
+    "mode": "dark",
+    "radius": "0.5",
+    "semiDarkHeader": false,
+    "semiDarkSidebar": false,
+  },
+  "transition": {
+    "enable": true,
+    "loading": true,
+    "name": "fade-slide",
+    "progress": true,
+  },
+  "widget": {
+    "fullscreen": true,
+    "globalSearch": true,
+    "languageToggle": true,
+    "lockScreen": true,
+    "notification": true,
+    "refresh": true,
+    "sidebarToggle": true,
+    "themeToggle": true,
+    "timezone": true,
+  },
+}
+`;
diff --git a/admin-ui/vue/packages/@core/preferences/__tests__/config.test.ts b/admin-ui/vue/packages/@core/preferences/__tests__/config.test.ts
new file mode 100644
index 0000000..f7c9bb3
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/__tests__/config.test.ts
@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest';
+
+import { defaultPreferences } from '../src/config';
+
+describe('defaultPreferences immutability test', () => {
+  // 创建快照，确保默认配置对象不被修改
+  it('should not modify the config object', () => {
+    expect(defaultPreferences).toMatchSnapshot();
+  });
+});
diff --git a/admin-ui/vue/packages/@core/preferences/__tests__/preferences.test.ts b/admin-ui/vue/packages/@core/preferences/__tests__/preferences.test.ts
new file mode 100644
index 0000000..37657d8
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/__tests__/preferences.test.ts
@@ -0,0 +1,253 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { defaultPreferences } from '../src/config';
+import { PreferenceManager } from '../src/preferences';
+import { isDarkTheme } from '../src/update-css-variables';
+
+describe('preferences', () => {
+  let preferenceManager: PreferenceManager;
+
+  // 模拟 window.matchMedia 方法
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query) => ({
+      addEventListener: vi.fn(),
+      addListener: vi.fn(), // Deprecated
+      dispatchEvent: vi.fn(),
+      matches: query === '(prefers-color-scheme: dark)',
+      media: query,
+      onchange: null,
+      removeEventListener: vi.fn(),
+      removeListener: vi.fn(), // Deprecated
+    })),
+  );
+  beforeEach(() => {
+    preferenceManager = new PreferenceManager();
+  });
+
+  it('loads default preferences if no saved preferences found', () => {
+    const preferences = preferenceManager.getPreferences();
+    expect(preferences).toEqual(defaultPreferences);
+  });
+
+  it('initializes preferences with overrides', async () => {
+    const overrides: any = {
+      app: {
+        locale: 'en-US',
+      },
+    };
+    await preferenceManager.initPreferences({
+      namespace: 'testNamespace',
+      overrides,
+    });
+
+    // 等待防抖动操作完成
+    // await new Promise((resolve) => setTimeout(resolve, 300)); // 等待100毫秒
+
+    const expected = {
+      ...defaultPreferences,
+      app: {
+        ...defaultPreferences.app,
+        ...overrides.app,
+      },
+    };
+
+    expect(preferenceManager.getPreferences()).toEqual(expected);
+  });
+
+  it('updates theme mode correctly', () => {
+    preferenceManager.updatePreferences({
+      theme: {
+        mode: 'light',
+      },
+    });
+
+    expect(preferenceManager.getPreferences().theme.mode).toBe('light');
+  });
+
+  it('updates color modes correctly', () => {
+    preferenceManager.updatePreferences({
+      app: { colorGrayMode: true, colorWeakMode: true },
+    });
+
+    expect(preferenceManager.getPreferences().app.colorGrayMode).toBe(true);
+    expect(preferenceManager.getPreferences().app.colorWeakMode).toBe(true);
+  });
+
+  it('resets preferences to default', () => {
+    // 先更新一些偏好设置
+    preferenceManager.updatePreferences({
+      theme: {
+        mode: 'light',
+      },
+    });
+
+    // 然后重置偏好设置
+    preferenceManager.resetPreferences();
+
+    expect(preferenceManager.getPreferences()).toEqual(defaultPreferences);
+  });
+
+  it('updates isMobile correctly', () => {
+    // 模拟移动端状态
+    vi.stubGlobal(
+      'matchMedia',
+      vi.fn().mockImplementation((query) => ({
+        addEventListener: vi.fn(),
+        addListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+        matches: query === '(max-width: 768px)',
+        media: query,
+        onchange: null,
+        removeEventListener: vi.fn(),
+        removeListener: vi.fn(),
+      })),
+    );
+
+    preferenceManager.updatePreferences({
+      app: { isMobile: true },
+    });
+
+    expect(preferenceManager.getPreferences().app.isMobile).toBe(true);
+  });
+
+  it('updates the locale preference correctly', () => {
+    preferenceManager.updatePreferences({
+      app: { locale: 'en-US' },
+    });
+
+    expect(preferenceManager.getPreferences().app.locale).toBe('en-US');
+  });
+
+  it('updates the sidebar width correctly', () => {
+    preferenceManager.updatePreferences({
+      sidebar: { width: 200 },
+    });
+
+    expect(preferenceManager.getPreferences().sidebar.width).toBe(200);
+  });
+  it('updates the sidebar collapse state correctly', () => {
+    preferenceManager.updatePreferences({
+      sidebar: { collapsed: true },
+    });
+
+    expect(preferenceManager.getPreferences().sidebar.collapsed).toBe(true);
+  });
+  it('updates the navigation style type correctly', () => {
+    preferenceManager.updatePreferences({
+      navigation: { styleType: 'flat' },
+    } as any);
+
+    expect(preferenceManager.getPreferences().navigation.styleType).toBe(
+      'flat',
+    );
+  });
+
+  it('resets preferences to default correctly', () => {
+    // 先更新一些偏好设置
+    preferenceManager.updatePreferences({
+      app: { locale: 'en-US' },
+      sidebar: { collapsed: true, width: 200 },
+      theme: {
+        mode: 'light',
+      },
+    });
+
+    // 然后重置偏好设置
+    preferenceManager.resetPreferences();
+
+    expect(preferenceManager.getPreferences()).toEqual(defaultPreferences);
+  });
+
+  it('does not update undefined preferences', () => {
+    const originalPreferences = preferenceManager.getPreferences();
+
+    preferenceManager.updatePreferences({
+      app: { nonexistentField: 'value' },
+    } as any);
+
+    expect(preferenceManager.getPreferences()).toEqual(originalPreferences);
+  });
+
+  it('reverts to default when a preference field is deleted', () => {
+    preferenceManager.updatePreferences({
+      app: { locale: 'en-US' },
+    });
+
+    preferenceManager.updatePreferences({
+      app: { locale: undefined },
+    });
+
+    expect(preferenceManager.getPreferences().app.locale).toBe('en-US');
+  });
+
+  it('ignores updates with invalid preference value types', () => {
+    const originalPreferences = preferenceManager.getPreferences();
+
+    preferenceManager.updatePreferences({
+      app: { isMobile: 'true' as unknown as boolean }, // 错误类型
+    });
+
+    expect(preferenceManager.getPreferences()).toEqual(originalPreferences);
+  });
+
+  it('merges nested preference objects correctly', () => {
+    preferenceManager.updatePreferences({
+      app: { name: 'New App Name' },
+    });
+
+    const expected = {
+      ...defaultPreferences,
+      app: {
+        ...defaultPreferences.app,
+        name: 'New App Name',
+      },
+    };
+
+    expect(preferenceManager.getPreferences()).toEqual(expected);
+  });
+
+  it('applies updates immediately after initialization', async () => {
+    const overrides: any = {
+      app: {
+        locale: 'en-US',
+      },
+    };
+
+    await preferenceManager.initPreferences(overrides);
+
+    preferenceManager.updatePreferences({
+      theme: { mode: 'light' },
+    });
+
+    expect(preferenceManager.getPreferences().theme.mode).toBe('light');
+  });
+});
+
+describe('isDarkTheme', () => {
+  it('should return true for dark theme', () => {
+    expect(isDarkTheme('dark')).toBe(true);
+  });
+
+  it('should return false for light theme', () => {
+    expect(isDarkTheme('light')).toBe(false);
+  });
+
+  it('should return system preference for auto theme', () => {
+    vi.spyOn(window, 'matchMedia').mockImplementation((query) => ({
+      addEventListener: vi.fn(),
+      addListener: vi.fn(), // Deprecated
+      dispatchEvent: vi.fn(),
+      matches: query === '(prefers-color-scheme: dark)',
+      media: query,
+      onchange: null,
+      removeEventListener: vi.fn(),
+      removeListener: vi.fn(), // Deprecated
+    }));
+
+    expect(isDarkTheme('auto')).toBe(true);
+    expect(window.matchMedia).toHaveBeenCalledWith(
+      '(prefers-color-scheme: dark)',
+    );
+  });
+});
diff --git a/admin-ui/vue/packages/@core/preferences/build.config.ts b/admin-ui/vue/packages/@core/preferences/build.config.ts
new file mode 100644
index 0000000..97e572c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
diff --git a/admin-ui/vue/packages/@core/preferences/package.json b/admin-ui/vue/packages/@core/preferences/package.json
new file mode 100644
index 0000000..75a5a5a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@vben-core/preferences",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@core/preferences"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "#build": "pnpm unbuild"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./src/index.ts",
+      "#default": "./dist/index.mjs"
+    }
+  },
+  "dependencies": {
+    "@vben-core/shared": "workspace:*",
+    "@vben-core/typings": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "vue": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/preferences/src/config.ts b/admin-ui/vue/packages/@core/preferences/src/config.ts
new file mode 100644
index 0000000..d9977b1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/src/config.ts
@@ -0,0 +1,142 @@
+import type { Preferences } from './types';
+
+const defaultPreferences: Preferences = {
+  app: {
+    accessMode: 'frontend',
+    authPageLayout: 'panel-right',
+    checkUpdatesInterval: 1,
+    colorGrayMode: false,
+    colorWeakMode: false,
+    compact: false,
+    contentCompact: 'wide',
+    contentCompactWidth: 1200,
+    contentPadding: 0,
+    contentPaddingBottom: 0,
+    contentPaddingLeft: 0,
+    contentPaddingRight: 0,
+    contentPaddingTop: 0,
+    defaultAvatar:
+      'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
+    defaultHomePath: '/analytics',
+    dynamicTitle: true,
+    enableCheckUpdates: true,
+    enablePreferences: true,
+    enableRefreshToken: false,
+    enableStickyPreferencesNavigationBar: true,
+    isMobile: false,
+    layout: 'sidebar-nav',
+    locale: 'zh-CN',
+    loginExpiredMode: 'page',
+    name: 'Vben Admin',
+    preferencesButtonPosition: 'auto',
+    watermark: false,
+    watermarkContent: '',
+    zIndex: 200,
+  },
+  breadcrumb: {
+    enable: true,
+    hideOnlyOne: false,
+    showHome: false,
+    showIcon: true,
+    styleType: 'normal',
+  },
+  copyright: {
+    companyName: 'Vben',
+    companySiteLink: 'https://www.vben.pro',
+    date: '2024',
+    enable: true,
+    icp: '',
+    icpLink: '',
+    settingShow: true,
+  },
+  footer: {
+    enable: false,
+    fixed: false,
+    height: 32,
+  },
+  header: {
+    enable: true,
+    height: 50,
+    hidden: false,
+    menuAlign: 'start',
+    mode: 'fixed',
+  },
+
+  logo: {
+    enable: true,
+    fit: 'contain',
+    source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+  },
+  navigation: {
+    accordion: true,
+    split: true,
+    styleType: 'rounded',
+  },
+  shortcutKeys: {
+    enable: true,
+    globalLockScreen: true,
+    globalLogout: true,
+    globalPreferences: true,
+    globalSearch: true,
+  },
+  sidebar: {
+    autoActivateChild: false,
+    collapsed: false,
+    collapsedButton: true,
+    collapsedShowTitle: false,
+    collapseWidth: 60,
+    enable: true,
+    expandOnHover: true,
+    extraCollapse: false,
+    extraCollapsedWidth: 60,
+    fixedButton: true,
+    hidden: false,
+    mixedWidth: 80,
+    width: 224,
+  },
+  tabbar: {
+    draggable: true,
+    enable: true,
+    height: 38,
+    keepAlive: true,
+    maxCount: 0,
+    middleClickToClose: false,
+    persist: true,
+    showIcon: true,
+    showMaximize: true,
+    showMore: true,
+    styleType: 'chrome',
+    wheelable: true,
+  },
+  theme: {
+    builtinType: 'default',
+    colorDestructive: 'hsl(348 100% 61%)',
+    colorPrimary: 'hsl(212 100% 45%)',
+    colorSuccess: 'hsl(144 57% 58%)',
+    colorWarning: 'hsl(42 84% 61%)',
+    mode: 'dark',
+    radius: '0.5',
+    fontSize: 16,
+    semiDarkHeader: false,
+    semiDarkSidebar: false,
+  },
+  transition: {
+    enable: true,
+    loading: true,
+    name: 'fade-slide',
+    progress: true,
+  },
+  widget: {
+    fullscreen: true,
+    globalSearch: true,
+    languageToggle: true,
+    lockScreen: true,
+    notification: true,
+    refresh: true,
+    sidebarToggle: true,
+    themeToggle: true,
+    timezone: true,
+  },
+};
+
+export { defaultPreferences };
diff --git a/admin-ui/vue/packages/@core/preferences/src/constants.ts b/admin-ui/vue/packages/@core/preferences/src/constants.ts
new file mode 100644
index 0000000..7ec2007
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/src/constants.ts
@@ -0,0 +1,119 @@
+import type { BuiltinThemeType, TimezoneOption } from '@vben-core/typings';
+
+interface BuiltinThemePreset {
+  color: string;
+  darkPrimaryColor?: string;
+  primaryColor?: string;
+  type: BuiltinThemeType;
+}
+
+const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
+  {
+    color: 'hsl(212 100% 45%)',
+    type: 'default',
+  },
+  {
+    color: 'hsl(245 82% 67%)',
+    type: 'violet',
+  },
+  {
+    color: 'hsl(347 77% 60%)',
+    type: 'pink',
+  },
+  {
+    color: 'hsl(42 84% 61%)',
+    type: 'yellow',
+  },
+  {
+    color: 'hsl(231 98% 65%)',
+    type: 'sky-blue',
+  },
+  {
+    color: 'hsl(161 90% 43%)',
+    type: 'green',
+  },
+  {
+    color: 'hsl(240 5% 26%)',
+    darkPrimaryColor: 'hsl(0 0% 98%)',
+    primaryColor: 'hsl(240 5.9% 10%)',
+    type: 'zinc',
+  },
+
+  {
+    color: 'hsl(181 84% 32%)',
+    type: 'deep-green',
+  },
+
+  {
+    color: 'hsl(211 91% 39%)',
+    type: 'deep-blue',
+  },
+  {
+    color: 'hsl(18 89% 40%)',
+    type: 'orange',
+  },
+  {
+    color: 'hsl(0 75% 42%)',
+    type: 'rose',
+  },
+
+  {
+    color: 'hsl(0 0% 25%)',
+    darkPrimaryColor: 'hsl(0 0% 98%)',
+    primaryColor: 'hsl(240 5.9% 10%)',
+    type: 'neutral',
+  },
+  {
+    color: 'hsl(215 25% 27%)',
+    darkPrimaryColor: 'hsl(0 0% 98%)',
+    primaryColor: 'hsl(240 5.9% 10%)',
+    type: 'slate',
+  },
+  {
+    color: 'hsl(217 19% 27%)',
+    darkPrimaryColor: 'hsl(0 0% 98%)',
+    primaryColor: 'hsl(240 5.9% 10%)',
+    type: 'gray',
+  },
+  {
+    color: '',
+    type: 'custom',
+  },
+];
+
+/**
+ * 时区选项
+ */
+const DEFAULT_TIME_ZONE_OPTIONS: TimezoneOption[] = [
+  {
+    offset: -5,
+    timezone: 'America/New_York',
+    label: 'America/New_York(GMT-5)',
+  },
+  {
+    offset: 0,
+    timezone: 'Europe/London',
+    label: 'Europe/London(GMT0)',
+  },
+  {
+    offset: 8,
+    timezone: 'Asia/Shanghai',
+    label: 'Asia/Shanghai(GMT+8)',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Tokyo',
+    label: 'Asia/Tokyo(GMT+9)',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Seoul',
+    label: 'Asia/Seoul(GMT+9)',
+  },
+];
+
+export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 7);
+
+export { BUILT_IN_THEME_PRESETS, DEFAULT_TIME_ZONE_OPTIONS };
+
+export type { BuiltinThemePreset };
diff --git a/admin-ui/vue/packages/@core/preferences/src/index.ts b/admin-ui/vue/packages/@core/preferences/src/index.ts
new file mode 100644
index 0000000..33444e1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/src/index.ts
@@ -0,0 +1,35 @@
+import type { Preferences } from './types';
+
+import { preferencesManager } from './preferences';
+
+// 偏好设置（带有层级关系）
+const preferences: Preferences =
+  preferencesManager.getPreferences.apply(preferencesManager);
+
+// 更新偏好设置
+const updatePreferences =
+  preferencesManager.updatePreferences.bind(preferencesManager);
+
+// 重置偏好设置
+const resetPreferences =
+  preferencesManager.resetPreferences.bind(preferencesManager);
+
+const clearPreferencesCache =
+  preferencesManager.clearCache.bind(preferencesManager);
+
+// 初始化偏好设置
+const initPreferences =
+  preferencesManager.initPreferences.bind(preferencesManager);
+
+export {
+  clearPreferencesCache,
+  initPreferences,
+  preferences,
+  preferencesManager,
+  resetPreferences,
+  updatePreferences,
+};
+
+export * from './constants';
+export type * from './types';
+export * from './use-preferences';
diff --git a/admin-ui/vue/packages/@core/preferences/src/preferences.ts b/admin-ui/vue/packages/@core/preferences/src/preferences.ts
new file mode 100644
index 0000000..7fb245e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/src/preferences.ts
@@ -0,0 +1,234 @@
+import type { DeepPartial } from '@vben-core/typings';
+
+import type { InitialOptions, Preferences } from './types';
+
+import { markRaw, reactive, readonly, watch } from 'vue';
+
+import { StorageManager } from '@vben-core/shared/cache';
+import { isMacOs, merge } from '@vben-core/shared/utils';
+
+import {
+  breakpointsTailwind,
+  useBreakpoints,
+  useDebounceFn,
+} from '@vueuse/core';
+
+import { defaultPreferences } from './config';
+import { updateCSSVariables } from './update-css-variables';
+
+const STORAGE_KEY = 'preferences';
+const STORAGE_KEY_LOCALE = `${STORAGE_KEY}-locale`;
+const STORAGE_KEY_THEME = `${STORAGE_KEY}-theme`;
+
+class PreferenceManager {
+  private cache: null | StorageManager = null;
+  // private flattenedState: Flatten<Preferences>;
+  private initialPreferences: Preferences = defaultPreferences;
+  private isInitialized: boolean = false;
+  private savePreferences: (preference: Preferences) => void;
+  private state: Preferences = reactive<Preferences>({
+    ...this.loadPreferences(),
+  });
+  constructor() {
+    this.cache = new StorageManager();
+
+    // 避免频繁的操作缓存
+    this.savePreferences = useDebounceFn(
+      (preference: Preferences) => this._savePreferences(preference),
+      150,
+    );
+  }
+
+  clearCache() {
+    [STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach((key) => {
+      this.cache?.removeItem(key);
+    });
+  }
+
+  public getInitialPreferences() {
+    return this.initialPreferences;
+  }
+
+  public getPreferences() {
+    return readonly(this.state);
+  }
+
+  /**
+   * 覆盖偏好设置
+   * overrides  要覆盖的偏好设置
+   * namespace  命名空间
+   */
+  public async initPreferences({ namespace, overrides }: InitialOptions) {
+    // 是否初始化过
+    if (this.isInitialized) {
+      return;
+    }
+    // 初始化存储管理器
+    this.cache = new StorageManager({ prefix: namespace });
+    // 合并初始偏好设置
+    this.initialPreferences = merge({}, overrides, defaultPreferences);
+
+    // 加载并合并当前存储的偏好设置
+    const mergedPreference = merge(
+      {},
+      // overrides,
+      this.loadCachedPreferences() || {},
+      this.initialPreferences,
+    );
+
+    // 更新偏好设置
+    this.updatePreferences(mergedPreference);
+
+    this.setupWatcher();
+
+    this.initPlatform();
+    // 标记为已初始化
+    this.isInitialized = true;
+  }
+
+  /**
+   * 重置偏好设置
+   * 偏好设置将被重置为初始值，并从 localStorage 中移除。
+   *
+   * @example
+   * 假设 initialPreferences 为 { theme: 'light', language: 'en' }
+   * 当前 state 为 { theme: 'dark', language: 'fr' }
+   * this.resetPreferences();
+   * 调用后，state 将被重置为 { theme: 'light', language: 'en' }
+   * 并且 localStorage 中的对应项将被移除
+   */
+  resetPreferences() {
+    // 将状态重置为初始偏好设置
+    Object.assign(this.state, this.initialPreferences);
+    // 保存重置后的偏好设置
+    this.savePreferences(this.state);
+    // 从存储中移除偏好设置项
+    [STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach((key) => {
+      this.cache?.removeItem(key);
+    });
+    this.updatePreferences(this.state);
+  }
+
+  /**
+   * 更新偏好设置
+   * @param updates - 要更新的偏好设置
+   */
+  public updatePreferences(updates: DeepPartial<Preferences>) {
+    const mergedState = merge({}, updates, markRaw(this.state));
+
+    Object.assign(this.state, mergedState);
+
+    // 根据更新的键值执行相应的操作
+    this.handleUpdates(updates);
+    this.savePreferences(this.state);
+  }
+
+  /**
+   * 保存偏好设置
+   * @param {Preferences} preference - 需要保存的偏好设置
+   */
+  private _savePreferences(preference: Preferences) {
+    this.cache?.setItem(STORAGE_KEY, preference);
+    this.cache?.setItem(STORAGE_KEY_LOCALE, preference.app.locale);
+    this.cache?.setItem(STORAGE_KEY_THEME, preference.theme.mode);
+  }
+
+  /**
+   * 处理更新的键值
+   * 根据更新的键值执行相应的操作。
+   * @param {DeepPartial<Preferences>} updates - 部分更新的偏好设置
+   */
+  private handleUpdates(updates: DeepPartial<Preferences>) {
+    const themeUpdates = updates.theme || {};
+    const appUpdates = updates.app || {};
+    if (
+      (themeUpdates && Object.keys(themeUpdates).length > 0) ||
+      Reflect.has(themeUpdates, 'fontSize')
+    ) {
+      updateCSSVariables(this.state);
+    }
+
+    if (
+      Reflect.has(appUpdates, 'colorGrayMode') ||
+      Reflect.has(appUpdates, 'colorWeakMode')
+    ) {
+      this.updateColorMode(this.state);
+    }
+  }
+
+  private initPlatform() {
+    const dom = document.documentElement;
+    dom.dataset.platform = isMacOs() ? 'macOs' : 'window';
+  }
+
+  /**
+   *  从缓存中加载偏好设置。如果缓存中没有找到对应的偏好设置，则返回默认偏好设置。
+   */
+  private loadCachedPreferences() {
+    return this.cache?.getItem<Preferences>(STORAGE_KEY);
+  }
+
+  /**
+   * 加载偏好设置
+   * @returns {Preferences} 加载的偏好设置
+   */
+  private loadPreferences(): Preferences {
+    return this.loadCachedPreferences() || { ...defaultPreferences };
+  }
+
+  /**
+   * 监听状态和系统偏好设置的变化。
+   */
+  private setupWatcher() {
+    if (this.isInitialized) {
+      return;
+    }
+
+    // 监听断点，判断是否移动端
+    const breakpoints = useBreakpoints(breakpointsTailwind);
+    const isMobile = breakpoints.smaller('md');
+    watch(
+      () => isMobile.value,
+      (val) => {
+        this.updatePreferences({
+          app: { isMobile: val },
+        });
+      },
+      { immediate: true },
+    );
+
+    // 监听系统主题偏好设置变化
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', ({ matches: isDark }) => {
+        // 如果偏好设置中主题模式为auto，则跟随系统更新
+        if (this.state.theme.mode === 'auto') {
+          this.updatePreferences({
+            theme: { mode: isDark ? 'dark' : 'light' },
+          });
+          // 恢复为auto模式
+          this.updatePreferences({
+            theme: { mode: 'auto' },
+          });
+        }
+      });
+  }
+
+  /**
+   * 更新页面颜色模式（灰色、色弱）
+   * @param preference
+   */
+  private updateColorMode(preference: Preferences) {
+    if (preference.app) {
+      const { colorGrayMode, colorWeakMode } = preference.app;
+      const dom = document.documentElement;
+      const COLOR_WEAK = 'invert-mode';
+      const COLOR_GRAY = 'grayscale-mode';
+      dom.classList.toggle(COLOR_WEAK, colorWeakMode);
+      dom.classList.toggle(COLOR_GRAY, colorGrayMode);
+    }
+  }
+}
+
+const preferencesManager = new PreferenceManager();
+export { PreferenceManager, preferencesManager };
diff --git a/admin-ui/vue/packages/@core/preferences/src/types.ts b/admin-ui/vue/packages/@core/preferences/src/types.ts
new file mode 100644
index 0000000..17224b0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/src/types.ts
@@ -0,0 +1,338 @@
+import type {
+  AccessModeType,
+  AuthPageLayoutType,
+  BreadcrumbStyleType,
+  BuiltinThemeType,
+  ContentCompactType,
+  DeepPartial,
+  LayoutHeaderMenuAlignType,
+  LayoutHeaderModeType,
+  LayoutType,
+  LoginExpiredModeType,
+  NavigationStyleType,
+  PageTransitionType,
+  PreferencesButtonPositionType,
+  TabsStyleType,
+  ThemeModeType,
+} from '@vben-core/typings';
+
+type SupportedLanguagesType = 'en-US' | 'zh-CN';
+
+interface AppPreferences {
+  /** 权限模式 */
+  accessMode: AccessModeType;
+  /** 登录注册页面布局 */
+  authPageLayout: AuthPageLayoutType;
+  /** 检查更新轮询时间 */
+  checkUpdatesInterval: number;
+  /** 是否开启灰色模式 */
+  colorGrayMode: boolean;
+  /** 是否开启色弱模式 */
+  colorWeakMode: boolean;
+  /** 是否开启紧凑模式 */
+  compact: boolean;
+  /** 是否开启内容紧凑模式 */
+  contentCompact: ContentCompactType;
+  /** 内容紧凑宽度 */
+  contentCompactWidth: number;
+  /** 内容内边距 */
+  contentPadding: number;
+  /** 内容底部内边距 */
+  contentPaddingBottom: number;
+  /** 内容左侧内边距 */
+  contentPaddingLeft: number;
+  /** 内容右侧内边距 */
+  contentPaddingRight: number;
+  /** 内容顶部内边距 */
+  contentPaddingTop: number;
+  // /** 应用默认头像 */
+  defaultAvatar: string;
+  /** 默认首页地址 */
+  defaultHomePath: string;
+  // /** 开启动态标题 */
+  dynamicTitle: boolean;
+  /** 是否开启检查更新 */
+  enableCheckUpdates: boolean;
+  /** 是否显示偏好设置 */
+  enablePreferences: boolean;
+  /**
+   * @zh_CN 是否开启refreshToken
+   */
+  enableRefreshToken: boolean;
+  /**
+   * @zh_CN 是否开启首选项导航栏吸顶效果
+   */
+  enableStickyPreferencesNavigationBar: boolean;
+  /** 是否移动端 */
+  isMobile: boolean;
+  /** 布局方式 */
+  layout: LayoutType;
+  /** 支持的语言 */
+  locale: SupportedLanguagesType;
+  /** 登录过期模式 */
+  loginExpiredMode: LoginExpiredModeType;
+  /** 应用名 */
+  name: string;
+  /** 偏好设置按钮位置 */
+  preferencesButtonPosition: PreferencesButtonPositionType;
+  /**
+   * @zh_CN 是否开启水印
+   */
+  watermark: boolean;
+  /**
+   * @zh_CN 水印文案
+   */
+  watermarkContent: string;
+  /** z-index */
+  zIndex: number;
+}
+
+interface BreadcrumbPreferences {
+  /** 面包屑是否启用 */
+  enable: boolean;
+  /** 面包屑是否只有一个时隐藏 */
+  hideOnlyOne: boolean;
+  /** 面包屑首页图标是否可见 */
+  showHome: boolean;
+  /** 面包屑图标是否可见 */
+  showIcon: boolean;
+  /** 面包屑风格 */
+  styleType: BreadcrumbStyleType;
+}
+
+interface CopyrightPreferences {
+  /** 版权公司名 */
+  companyName: string;
+  /** 版权公司名链接 */
+  companySiteLink: string;
+  /** 版权日期 */
+  date: string;
+  /** 版权是否可见 */
+  enable: boolean;
+  /** 备案号 */
+  icp: string;
+  /** 备案号链接 */
+  icpLink: string;
+  /** 设置面板是否显示*/
+  settingShow?: boolean;
+}
+
+interface FooterPreferences {
+  /** 底栏是否可见 */
+  enable: boolean;
+  /** 底栏是否固定 */
+  fixed: boolean;
+  /** 底栏高度 */
+  height: number;
+}
+
+interface HeaderPreferences {
+  /** 顶栏是否启用 */
+  enable: boolean;
+  /** 顶栏高度 */
+  height: number;
+  /** 顶栏是否隐藏,css-隐藏 */
+  hidden: boolean;
+  /** 顶栏菜单位置 */
+  menuAlign: LayoutHeaderMenuAlignType;
+  /** header显示模式 */
+  mode: LayoutHeaderModeType;
+}
+
+interface LogoPreferences {
+  /** logo是否可见 */
+  enable: boolean;
+  /** logo图片适应方式 */
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+  /** logo地址 */
+  source: string;
+  /** 暗色主题logo地址 (可选，若不设置则使用 source) */
+  sourceDark?: string;
+}
+
+interface NavigationPreferences {
+  /** 导航菜单手风琴模式 */
+  accordion: boolean;
+  /** 导航菜单是否切割，只在 layout=mixed-nav 生效 */
+  split: boolean;
+  /** 导航菜单风格 */
+  styleType: NavigationStyleType;
+}
+
+interface SidebarPreferences {
+  /** 点击目录时自动激活子菜单   */
+  autoActivateChild: boolean;
+  /** 侧边栏是否折叠 */
+  collapsed: boolean;
+  /** 侧边栏折叠按钮是否可见 */
+  collapsedButton: boolean;
+  /** 侧边栏折叠时，是否显示title */
+  collapsedShowTitle: boolean;
+  /** 侧边栏折叠宽度 */
+  collapseWidth: number;
+  /** 侧边栏是否可见 */
+  enable: boolean;
+  /** 菜单自动展开状态 */
+  expandOnHover: boolean;
+  /** 侧边栏扩展区域是否折叠 */
+  extraCollapse: boolean;
+  /** 侧边栏扩展区域折叠宽度 */
+  extraCollapsedWidth: number;
+  /** 侧边栏固定按钮是否可见 */
+  fixedButton: boolean;
+  /** 侧边栏是否隐藏 - css */
+  hidden: boolean;
+  /** 混合侧边栏宽度 */
+  mixedWidth: number;
+  /** 侧边栏宽度 */
+  width: number;
+}
+
+interface ShortcutKeyPreferences {
+  /** 是否启用快捷键-全局 */
+  enable: boolean;
+  /** 是否启用全局锁屏快捷键 */
+  globalLockScreen: boolean;
+  /** 是否启用全局注销快捷键 */
+  globalLogout: boolean;
+  /** 是否启用全局偏好设置快捷键 */
+  globalPreferences: boolean;
+  /** 是否启用全局搜索快捷键 */
+  globalSearch: boolean;
+}
+
+interface TabbarPreferences {
+  /** 是否开启多标签页拖拽 */
+  draggable: boolean;
+  /** 是否开启多标签页 */
+  enable: boolean;
+  /** 标签页高度 */
+  height: number;
+  /** 开启标签页缓存功能 */
+  keepAlive: boolean;
+  /** 限制最大数量 */
+  maxCount: number;
+  /** 是否点击中键时关闭标签 */
+  middleClickToClose: boolean;
+  /** 是否持久化标签 */
+  persist: boolean;
+  /** 是否开启多标签页图标 */
+  showIcon: boolean;
+  /** 显示最大化按钮 */
+  showMaximize: boolean;
+  /** 显示更多按钮 */
+  showMore: boolean;
+  /** 标签页风格 */
+  styleType: TabsStyleType;
+  /** 是否开启鼠标滚轮响应 */
+  wheelable: boolean;
+}
+
+interface ThemePreferences {
+  /** 内置主题名 */
+  builtinType: BuiltinThemeType;
+  /** 错误色 */
+  colorDestructive: string;
+  /** 主题色 */
+  colorPrimary: string;
+  /** 成功色 */
+  colorSuccess: string;
+  /** 警告色 */
+  colorWarning: string;
+  /** 字体大小（单位：px） */
+  fontSize: number;
+  /** 当前主题 */
+  mode: ThemeModeType;
+  /** 圆角 */
+  radius: string;
+  /** 是否开启半深色header（只在theme='light'时生效） */
+  semiDarkHeader: boolean;
+  /** 是否开启半深色菜单（只在theme='light'时生效） */
+  semiDarkSidebar: boolean;
+}
+
+interface TransitionPreferences {
+  /** 页面切换动画是否启用 */
+  enable: boolean;
+  // /** 是否开启页面加载loading */
+  loading: boolean;
+  /** 页面切换动画 */
+  name: PageTransitionType | string;
+  /** 是否开启页面加载进度动画 */
+  progress: boolean;
+}
+
+interface WidgetPreferences {
+  /** 是否启用全屏部件 */
+  fullscreen: boolean;
+  /** 是否启用全局搜索部件 */
+  globalSearch: boolean;
+  /** 是否启用语言切换部件 */
+  languageToggle: boolean;
+  /** 是否开启锁屏功能 */
+  lockScreen: boolean;
+  /** 是否显示通知部件 */
+  notification: boolean;
+  /** 显示刷新按钮 */
+  refresh: boolean;
+  /** 是否显示侧边栏显示/隐藏部件 */
+  sidebarToggle: boolean;
+  /** 是否显示主题切换部件 */
+  themeToggle: boolean;
+  /** 是否显示时区部件 */
+  timezone: boolean;
+}
+
+interface Preferences {
+  /** 全局配置 */
+  app: AppPreferences;
+  /** 顶栏配置 */
+  breadcrumb: BreadcrumbPreferences;
+  /** 版权配置 */
+  copyright: CopyrightPreferences;
+  /** 底栏配置 */
+  footer: FooterPreferences;
+  /** 面包屑配置 */
+  header: HeaderPreferences;
+  /** logo配置 */
+  logo: LogoPreferences;
+  /** 导航配置 */
+  navigation: NavigationPreferences;
+  /** 快捷键配置 */
+  shortcutKeys: ShortcutKeyPreferences;
+  /** 侧边栏配置 */
+  sidebar: SidebarPreferences;
+  /** 标签页配置 */
+  tabbar: TabbarPreferences;
+  /** 主题配置 */
+  theme: ThemePreferences;
+  /** 动画配置 */
+  transition: TransitionPreferences;
+  /** 功能配置 */
+  widget: WidgetPreferences;
+}
+
+type PreferencesKeys = keyof Preferences;
+
+interface InitialOptions {
+  namespace: string;
+  overrides?: DeepPartial<Preferences>;
+}
+export type {
+  AppPreferences,
+  BreadcrumbPreferences,
+  FooterPreferences,
+  HeaderPreferences,
+  InitialOptions,
+  LogoPreferences,
+  NavigationPreferences,
+  Preferences,
+  PreferencesKeys,
+  ShortcutKeyPreferences,
+  SidebarPreferences,
+  SupportedLanguagesType,
+  TabbarPreferences,
+  ThemePreferences,
+  TransitionPreferences,
+  WidgetPreferences,
+};
diff --git a/admin-ui/vue/packages/@core/preferences/src/update-css-variables.ts b/admin-ui/vue/packages/@core/preferences/src/update-css-variables.ts
new file mode 100644
index 0000000..6ee5f74
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/src/update-css-variables.ts
@@ -0,0 +1,129 @@
+import type { Preferences } from './types';
+
+import { generatorColorVariables } from '@vben-core/shared/color';
+import { updateCSSVariables as executeUpdateCSSVariables } from '@vben-core/shared/utils';
+
+import { BUILT_IN_THEME_PRESETS } from './constants';
+
+/**
+ * 更新主题的 CSS 变量以及其他 CSS 变量
+ * @param preferences - 当前偏好设置对象，它的主题值将被用来设置文档的主题。
+ */
+function updateCSSVariables(preferences: Preferences) {
+  // 当修改到颜色变量时，更新 css 变量
+  const root = document.documentElement;
+  if (!root) {
+    return;
+  }
+
+  const theme = preferences?.theme ?? {};
+
+  const { builtinType, mode, radius } = theme;
+
+  // html 设置 dark 类
+  if (Reflect.has(theme, 'mode')) {
+    const dark = isDarkTheme(mode);
+    root.classList.toggle('dark', dark);
+  }
+
+  // html 设置 data-theme=[builtinType]
+  if (Reflect.has(theme, 'builtinType')) {
+    const rootTheme = root.dataset.theme;
+    if (rootTheme !== builtinType) {
+      root.dataset.theme = builtinType;
+    }
+  }
+
+  // 获取当前的内置主题
+  const currentBuiltType = [...BUILT_IN_THEME_PRESETS].find(
+    (item) => item.type === builtinType,
+  );
+
+  let builtinTypeColorPrimary: string | undefined = '';
+
+  if (currentBuiltType) {
+    const isDark = isDarkTheme(preferences.theme.mode);
+    // 设置不同主题的主要颜色
+    const color = isDark
+      ? currentBuiltType.darkPrimaryColor || currentBuiltType.primaryColor
+      : currentBuiltType.primaryColor;
+    builtinTypeColorPrimary = color || currentBuiltType.color;
+  }
+
+  // 如果内置主题颜色和自定义颜色都不存在，则不更新主题颜色
+  if (
+    builtinTypeColorPrimary ||
+    Reflect.has(theme, 'colorPrimary') ||
+    Reflect.has(theme, 'colorDestructive') ||
+    Reflect.has(theme, 'colorSuccess') ||
+    Reflect.has(theme, 'colorWarning')
+  ) {
+    // preferences.theme.colorPrimary = builtinTypeColorPrimary || colorPrimary;
+    updateMainColorVariables(preferences);
+  }
+
+  // 更新圆角
+  if (Reflect.has(theme, 'radius')) {
+    document.documentElement.style.setProperty('--radius', `${radius}rem`);
+  }
+
+  // 更新字体大小
+  if (Reflect.has(theme, 'fontSize')) {
+    const fontSize = theme.fontSize;
+    document.documentElement.style.setProperty(
+      '--font-size-base',
+      `${fontSize}px`,
+    );
+    document.documentElement.style.setProperty(
+      '--menu-font-size',
+      `calc(${fontSize}px * 0.875)`,
+    );
+  }
+}
+
+/**
+ * 更新主要的 CSS 变量
+ * @param  preference - 当前偏好设置对象，它的颜色值将被转换成 HSL 格式并设置为 CSS 变量。
+ */
+function updateMainColorVariables(preference: Preferences) {
+  if (!preference.theme) {
+    return;
+  }
+  const { colorDestructive, colorPrimary, colorSuccess, colorWarning } =
+    preference.theme;
+
+  const colorVariables = generatorColorVariables([
+    { color: colorPrimary, name: 'primary' },
+    { alias: 'warning', color: colorWarning, name: 'yellow' },
+    { alias: 'success', color: colorSuccess, name: 'green' },
+    { alias: 'destructive', color: colorDestructive, name: 'red' },
+  ]);
+
+  // 要设置的 CSS 变量映射
+  const colorMappings = {
+    '--green-500': '--success',
+    '--primary-500': '--primary',
+    '--red-500': '--destructive',
+    '--yellow-500': '--warning',
+  };
+
+  // 统一处理颜色变量的更新
+  Object.entries(colorMappings).forEach(([sourceVar, targetVar]) => {
+    const colorValue = colorVariables[sourceVar];
+    if (colorValue) {
+      document.documentElement.style.setProperty(targetVar, colorValue);
+    }
+  });
+
+  executeUpdateCSSVariables(colorVariables);
+}
+
+function isDarkTheme(theme: string) {
+  let dark = theme === 'dark';
+  if (theme === 'auto') {
+    dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+  return dark;
+}
+
+export { isDarkTheme, updateCSSVariables };
diff --git a/admin-ui/vue/packages/@core/preferences/src/use-preferences.ts b/admin-ui/vue/packages/@core/preferences/src/use-preferences.ts
new file mode 100644
index 0000000..d931f75
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/src/use-preferences.ts
@@ -0,0 +1,254 @@
+import { computed } from 'vue';
+
+import { diff } from '@vben-core/shared/utils';
+
+import { preferencesManager } from './preferences';
+import { isDarkTheme } from './update-css-variables';
+
+function usePreferences() {
+  const preferences = preferencesManager.getPreferences();
+  const initialPreferences = preferencesManager.getInitialPreferences();
+  /**
+   * @zh_CN 计算偏好设置的变化
+   */
+  const diffPreference = computed(() => {
+    return diff(initialPreferences, preferences);
+  });
+
+  const appPreferences = computed(() => preferences.app);
+
+  const shortcutKeysPreferences = computed(() => preferences.shortcutKeys);
+
+  /**
+   * @zh_CN 判断是否为暗黑模式
+   * @param  preferences - 当前偏好设置对象，它的主题值将被用来判断是否为暗黑模式。
+   * @returns 如果主题为暗黑模式，返回 true，否则返回 false。
+   */
+  const isDark = computed(() => {
+    return isDarkTheme(preferences.theme.mode);
+  });
+
+  const locale = computed(() => {
+    return preferences.app.locale;
+  });
+
+  const isMobile = computed(() => {
+    return appPreferences.value.isMobile;
+  });
+
+  const theme = computed(() => {
+    return isDark.value ? 'dark' : 'light';
+  });
+
+  /**
+   * @zh_CN 布局方式
+   */
+  const layout = computed(() =>
+    isMobile.value ? 'sidebar-nav' : appPreferences.value.layout,
+  );
+
+  /**
+   * @zh_CN 是否显示顶栏
+   */
+  const isShowHeaderNav = computed(() => {
+    return preferences.header.enable;
+  });
+
+  /**
+   * @zh_CN 是否全屏显示content，不需要侧边、底部、顶部、tab区域
+   */
+  const isFullContent = computed(
+    () => appPreferences.value.layout === 'full-content',
+  );
+
+  /**
+   * @zh_CN 是否侧边导航模式
+   */
+  const isSideNav = computed(
+    () => appPreferences.value.layout === 'sidebar-nav',
+  );
+
+  /**
+   * @zh_CN 是否侧边混合模式
+   */
+  const isSideMixedNav = computed(
+    () => appPreferences.value.layout === 'sidebar-mixed-nav',
+  );
+
+  /**
+   * @zh_CN 是否为头部导航模式
+   */
+  const isHeaderNav = computed(
+    () => appPreferences.value.layout === 'header-nav',
+  );
+
+  /**
+   * @zh_CN 是否为头部混合导航模式
+   */
+  const isHeaderMixedNav = computed(
+    () => appPreferences.value.layout === 'header-mixed-nav',
+  );
+
+  /**
+   * @zh_CN 是否为顶部通栏+侧边导航模式
+   */
+  const isHeaderSidebarNav = computed(
+    () => appPreferences.value.layout === 'header-sidebar-nav',
+  );
+
+  /**
+   * @zh_CN 是否为混合导航模式
+   */
+  const isMixedNav = computed(
+    () => appPreferences.value.layout === 'mixed-nav',
+  );
+
+  /**
+   * @zh_CN 是否包含侧边导航模式
+   */
+  const isSideMode = computed(() => {
+    return (
+      isMixedNav.value ||
+      isSideMixedNav.value ||
+      isSideNav.value ||
+      isHeaderMixedNav.value ||
+      isHeaderSidebarNav.value
+    );
+  });
+
+  const sidebarCollapsed = computed(() => {
+    return preferences.sidebar.collapsed;
+  });
+
+  /**
+   * @zh_CN 是否开启keep-alive
+   * 在tabs可见以及开启keep-alive的情况下才开启
+   */
+  const keepAlive = computed(
+    () => preferences.tabbar.enable && preferences.tabbar.keepAlive,
+  );
+
+  /**
+   * @zh_CN 登录注册页面布局是否为左侧
+   */
+  const authPanelLeft = computed(() => {
+    return appPreferences.value.authPageLayout === 'panel-left';
+  });
+
+  /**
+   * @zh_CN 登录注册页面布局是否为左侧
+   */
+  const authPanelRight = computed(() => {
+    return appPreferences.value.authPageLayout === 'panel-right';
+  });
+
+  /**
+   * @zh_CN 登录注册页面布局是否为中间
+   */
+  const authPanelCenter = computed(() => {
+    return appPreferences.value.authPageLayout === 'panel-center';
+  });
+
+  /**
+   * @zh_CN 内容是否已经最大化
+   * 排除 full-content模式
+   */
+  const contentIsMaximize = computed(() => {
+    const headerIsHidden = preferences.header.hidden;
+    const sidebarIsHidden = preferences.sidebar.hidden;
+    return headerIsHidden && sidebarIsHidden && !isFullContent.value;
+  });
+
+  /**
+   * @zh_CN 是否启用全局搜索快捷键
+   */
+  const globalSearchShortcutKey = computed(() => {
+    const { enable, globalSearch } = shortcutKeysPreferences.value;
+    return enable && globalSearch;
+  });
+
+  /**
+   * @zh_CN 是否启用全局注销快捷键
+   */
+  const globalLogoutShortcutKey = computed(() => {
+    const { enable, globalLogout } = shortcutKeysPreferences.value;
+    return enable && globalLogout;
+  });
+
+  const globalLockScreenShortcutKey = computed(() => {
+    const { enable, globalLockScreen } = shortcutKeysPreferences.value;
+    return enable && globalLockScreen;
+  });
+
+  /**
+   * @zh_CN 偏好设置按钮位置
+   */
+  const preferencesButtonPosition = computed(() => {
+    const { enablePreferences, preferencesButtonPosition } = preferences.app;
+
+    // 如果没有启用偏好设置按钮
+    if (!enablePreferences) {
+      return {
+        fixed: false,
+        header: false,
+      };
+    }
+
+    const { header, sidebar } = preferences;
+    const headerHidden = header.hidden;
+    const sidebarHidden = sidebar.hidden;
+
+    const contentIsMaximize = headerHidden && sidebarHidden;
+
+    const isHeaderPosition = preferencesButtonPosition === 'header';
+
+    // 如果设置了固定位置
+    if (preferencesButtonPosition !== 'auto') {
+      return {
+        fixed: preferencesButtonPosition === 'fixed',
+        header: isHeaderPosition,
+      };
+    }
+
+    // 如果是全屏模式或者没有固定在顶部，
+    const fixed =
+      contentIsMaximize ||
+      isFullContent.value ||
+      isMobile.value ||
+      !isShowHeaderNav.value;
+
+    return {
+      fixed,
+      header: !fixed,
+    };
+  });
+
+  return {
+    authPanelCenter,
+    authPanelLeft,
+    authPanelRight,
+    contentIsMaximize,
+    diffPreference,
+    globalLockScreenShortcutKey,
+    globalLogoutShortcutKey,
+    globalSearchShortcutKey,
+    isDark,
+    isFullContent,
+    isHeaderMixedNav,
+    isHeaderNav,
+    isHeaderSidebarNav,
+    isMixedNav,
+    isMobile,
+    isSideMixedNav,
+    isSideMode,
+    isSideNav,
+    keepAlive,
+    layout,
+    locale,
+    preferencesButtonPosition,
+    sidebarCollapsed,
+    theme,
+  };
+}
+
+export { usePreferences };
diff --git a/admin-ui/vue/packages/@core/preferences/tsconfig.json b/admin-ui/vue/packages/@core/preferences/tsconfig.json
new file mode 100644
index 0000000..bbb8050
--- /dev/null
+++ b/admin-ui/vue/packages/@core/preferences/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src", "__tests__"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/README.md b/admin-ui/vue/packages/@core/ui-kit/README.md
new file mode 100644
index 0000000..a1746f6
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/README.md
@@ -0,0 +1,3 @@
+# ui-kit
+
+用于管理公共组件、不同UI组件库封装的组件
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/__tests__/expandable.test.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/__tests__/expandable.test.ts
new file mode 100644
index 0000000..f5b0210
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/__tests__/expandable.test.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+
+import { getExpandableLayout } from '../src/form-render/expandable';
+
+describe('getExpandableLayout', () => {
+  it('does not mark a one-row form as expandable', () => {
+    const result = getExpandableLayout([
+      { fieldName: 'operator', top: 0 },
+      { fieldName: 'name', top: 0 },
+      { fieldName: 'createdAt', top: 0 },
+      { top: 0 },
+    ]);
+
+    expect(result.isExpandable).toBe(false);
+    expect(result.collapsedFieldNames).toEqual(new Set());
+  });
+
+  it('marks fields after the first row as collapsible', () => {
+    const result = getExpandableLayout([
+      { fieldName: 'operator', top: 0 },
+      { fieldName: 'name', top: 0 },
+      { fieldName: 'createdAt', top: 48 },
+      { top: 48 },
+    ]);
+
+    expect(result.isExpandable).toBe(true);
+    expect(result.collapsedFieldNames).toEqual(new Set(['createdAt']));
+  });
+
+  it('ignores an action-only row when no fields need to be hidden', () => {
+    const result = getExpandableLayout([
+      { fieldName: 'name', top: 0 },
+      { fieldName: 'createdAt', top: 0 },
+      { top: 48 },
+    ]);
+
+    expect(result.isExpandable).toBe(false);
+    expect(result.collapsedFieldNames).toEqual(new Set());
+  });
+
+  it('respects a form configured to keep multiple rows visible', () => {
+    const result = getExpandableLayout(
+      [
+        { fieldName: 'name', top: 0 },
+        { fieldName: 'operator', top: 0 },
+        { fieldName: 'createdAt', top: 48 },
+        { fieldName: 'status', top: 96 },
+        { top: 96 },
+      ],
+      2,
+    );
+
+    expect(result.isExpandable).toBe(true);
+    expect(result.collapsedFieldNames).toEqual(new Set(['status']));
+  });
+});
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/__tests__/form-api.test.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/__tests__/form-api.test.ts
new file mode 100644
index 0000000..31aa355
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/__tests__/form-api.test.ts
@@ -0,0 +1,189 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { FormApi } from '../src/form-api';
+
+describe('formApi', () => {
+  let formApi: FormApi;
+
+  beforeEach(() => {
+    formApi = new FormApi();
+  });
+
+  it('should initialize with default state', () => {
+    expect(formApi.state).toEqual(
+      expect.objectContaining({
+        actionWrapperClass: '',
+        collapsed: false,
+        collapsedRows: 1,
+        commonConfig: {},
+        handleReset: undefined,
+        handleSubmit: undefined,
+        layout: 'horizontal',
+        resetButtonOptions: {},
+        schema: [],
+        showCollapseButton: false,
+        showDefaultActions: true,
+        submitButtonOptions: {},
+        wrapperClass: 'grid-cols-1',
+      }),
+    );
+    expect(formApi.isMounted).toBe(false);
+  });
+
+  it('should mount form actions', async () => {
+    const formActions: any = {
+      meta: {},
+      resetForm: vi.fn(),
+      setFieldValue: vi.fn(),
+      setValues: vi.fn(),
+      submitForm: vi.fn(),
+      validate: vi.fn(),
+      values: { name: 'test' },
+    };
+
+    await formApi.mount(formActions);
+    expect(formApi.isMounted).toBe(true);
+    expect(formApi.form).toEqual(formActions);
+  });
+
+  it('should get values from form', async () => {
+    const formActions: any = {
+      meta: {},
+      values: { name: 'test' },
+    };
+
+    await formApi.mount(formActions);
+    const values = await formApi.getValues();
+    expect(values).toEqual({ name: 'test' });
+  });
+
+  it('should set field value', async () => {
+    const setFieldValueMock = vi.fn();
+    const formActions: any = {
+      meta: {},
+      setFieldValue: setFieldValueMock,
+      values: { name: 'test' },
+    };
+
+    await formApi.mount(formActions);
+    await formApi.setFieldValue('name', 'new value');
+    expect(setFieldValueMock).toHaveBeenCalledWith(
+      'name',
+      'new value',
+      undefined,
+    );
+  });
+
+  it('should reset form', async () => {
+    const resetFormMock = vi.fn();
+    const formActions: any = {
+      meta: {},
+      resetForm: resetFormMock,
+      values: { name: 'test' },
+    };
+
+    await formApi.mount(formActions);
+    await formApi.resetForm();
+    expect(resetFormMock).toHaveBeenCalled();
+  });
+
+  it('should call handleSubmit on submit', async () => {
+    const handleSubmitMock = vi.fn();
+    const formActions: any = {
+      meta: {},
+      submitForm: vi.fn().mockResolvedValue(true),
+      values: { name: 'test' },
+    };
+
+    const state = {
+      handleSubmit: handleSubmitMock,
+    };
+
+    formApi.setState(state);
+    await formApi.mount(formActions);
+
+    const result = await formApi.submitForm();
+    expect(formActions.submitForm).toHaveBeenCalled();
+    expect(handleSubmitMock).toHaveBeenCalledWith({ name: 'test' });
+    expect(result).toEqual({ name: 'test' });
+  });
+
+  it('should unmount form and reset state', () => {
+    formApi.unmount();
+    expect(formApi.isMounted).toBe(false);
+  });
+
+  it('should validate form', async () => {
+    const validateMock = vi.fn().mockResolvedValue(true);
+    const formActions: any = {
+      meta: {},
+      validate: validateMock,
+    };
+
+    await formApi.mount(formActions);
+    const isValid = await formApi.validate();
+    expect(validateMock).toHaveBeenCalled();
+    expect(isValid).toBe(true);
+  });
+});
+
+describe('updateSchema', () => {
+  let instance: FormApi;
+
+  beforeEach(() => {
+    instance = new FormApi();
+    instance.state = {
+      schema: [
+        { component: 'text', fieldName: 'name' },
+        { component: 'number', fieldName: 'age', label: 'Age' },
+      ],
+    };
+  });
+
+  it('should update the schema correctly when fieldName matches', () => {
+    const newSchema = [
+      { component: 'text', fieldName: 'name' },
+      { component: 'number', fieldName: 'age', label: 'Age' },
+    ];
+
+    instance.updateSchema(newSchema);
+
+    expect(instance.state?.schema?.[0]?.component).toBe('text');
+    expect(instance.state?.schema?.[1]?.label).toBe('Age');
+  });
+
+  it('should log an error if fieldName is missing in some items', () => {
+    const newSchema: any[] = [
+      { component: 'textarea', fieldName: 'name' },
+      { component: 'number' },
+    ];
+
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    instance.updateSchema(newSchema);
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      'All items in the schema array must have a valid `fieldName` property to be updated',
+    );
+  });
+
+  it('should not update schema if fieldName does not match', () => {
+    const newSchema = [{ component: 'textarea', fieldName: 'unknown' }];
+
+    instance.updateSchema(newSchema);
+
+    expect(instance.state?.schema?.[0]?.component).toBe('text');
+    expect(instance.state?.schema?.[1]?.component).toBe('number');
+  });
+
+  it('should not update schema if updatedMap is empty', () => {
+    const newSchema: any[] = [{ component: 'textarea' }];
+
+    instance.updateSchema(newSchema);
+
+    expect(instance.state?.schema?.[0]?.component).toBe('text');
+    expect(instance.state?.schema?.[1]?.component).toBe('number');
+  });
+});
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/build.config.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/build.config.ts
new file mode 100644
index 0000000..18eaa60
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/build.config.ts
@@ -0,0 +1,21 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    {
+      builder: 'mkdist',
+      input: './src',
+      loaders: ['vue'],
+      pattern: ['**/*.vue'],
+    },
+    {
+      builder: 'mkdist',
+      format: 'esm',
+      input: './src',
+      loaders: ['js'],
+      pattern: ['**/*.ts'],
+    },
+  ],
+});
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/package.json b/admin-ui/vue/packages/@core/ui-kit/form-ui/package.json
new file mode 100644
index 0000000..ce7466d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@vben-core/form-ui",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/uikit/form-ui"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@vben-core/composables": "workspace:*",
+    "@vben-core/icons": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
+    "@vben-core/typings": "workspace:*",
+    "@vee-validate/zod": "catalog:",
+    "@vueuse/core": "catalog:",
+    "vee-validate": "catalog:",
+    "vue": "catalog:",
+    "zod": "catalog:",
+    "zod-defaults": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/postcss.config.mjs b/admin-ui/vue/packages/@core/ui-kit/form-ui/postcss.config.mjs
new file mode 100644
index 0000000..3d80704
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
new file mode 100644
index 0000000..d8c45e7
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { computed, toRaw, unref, watch } from 'vue';
+
+import { useSimpleLocale } from '@vben-core/composables';
+import { VbenExpandableArrow } from '@vben-core/shadcn-ui';
+import { cn, isFunction, triggerWindowResize } from '@vben-core/shared/utils';
+
+import { COMPONENT_MAP } from '../config';
+import { injectFormProps } from '../use-form-context';
+
+const actionProps = withDefaults(
+  defineProps<{
+    isExpandable?: boolean;
+  }>(),
+  {
+    isExpandable: false,
+  },
+);
+
+const { $t } = useSimpleLocale();
+
+const [rootProps, form] = injectFormProps();
+
+const collapsed = defineModel({ default: false });
+
+const resetButtonOptions = computed(() => {
+  return {
+    content: `${$t.value('reset')}`,
+    show: true,
+    ...unref(rootProps).resetButtonOptions,
+  };
+});
+
+const submitButtonOptions = computed(() => {
+  return {
+    content: `${$t.value('submit')}`,
+    show: true,
+    ...unref(rootProps).submitButtonOptions,
+  };
+});
+
+// const isQueryForm = computed(() => {
+//   return !!unref(rootProps).showCollapseButton;
+// });
+
+async function handleSubmit(e: Event) {
+  e?.preventDefault();
+  e?.stopPropagation();
+  const props = unref(rootProps);
+  if (!props.formApi) {
+    return;
+  }
+
+  const { valid } = await props.formApi.validate();
+  if (!valid) {
+    return;
+  }
+
+  const values = toRaw(await props.formApi.getValues()) ?? {};
+  await props.handleSubmit?.(values);
+}
+
+async function handleReset(e: Event) {
+  e?.preventDefault();
+  e?.stopPropagation();
+  const props = unref(rootProps);
+
+  const values = toRaw(await props.formApi?.getValues()) ?? {};
+
+  if (isFunction(props.handleReset)) {
+    await props.handleReset?.(values);
+  } else {
+    form.resetForm();
+  }
+}
+
+watch(
+  () => collapsed.value,
+  () => {
+    const props = unref(rootProps);
+    if (props.collapseTriggerResize) {
+      triggerWindowResize();
+    }
+  },
+);
+
+const actionWrapperClass = computed(() => {
+  const props = unref(rootProps);
+  const actionLayout = props.actionLayout || 'rowEnd';
+  const actionPosition = props.actionPosition || 'right';
+
+  const cls = [
+    'flex',
+    'items-center',
+    'gap-3',
+    props.compact ? 'pb-2' : 'pb-4',
+    props.layout === 'vertical' ? 'self-end' : 'self-center',
+    props.layout === 'inline' ? '' : 'w-full',
+    props.actionWrapperClass,
+  ];
+
+  switch (actionLayout) {
+    case 'newLine': {
+      cls.push('col-span-full');
+      break;
+    }
+    case 'rowEnd': {
+      cls.push('col-[-2/-1]');
+      break;
+    }
+    // 'inline' 不需要额外类名，保持默认
+  }
+
+  switch (actionPosition) {
+    case 'center': {
+      cls.push('justify-center');
+      break;
+    }
+    case 'left': {
+      cls.push('justify-start');
+      break;
+    }
+    default: {
+      // case 'right': 默认右对齐
+      cls.push('justify-end');
+      break;
+    }
+  }
+
+  return cls.join(' ');
+});
+
+defineExpose({
+  handleReset,
+  handleSubmit,
+});
+</script>
+<template>
+  <div :class="cn(actionWrapperClass)" data-form-actions>
+    <template v-if="rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
+
+      <component
+        :is="COMPONENT_MAP.PrimaryButton"
+        v-if="submitButtonOptions.show"
+        type="button"
+        @click="handleSubmit"
+        v-bind="submitButtonOptions"
+      >
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
+
+    <!-- 重置按钮前 -->
+    <slot name="reset-before"></slot>
+
+    <component
+      :is="COMPONENT_MAP.DefaultButton"
+      v-if="resetButtonOptions.show"
+      type="button"
+      @click="handleReset"
+      v-bind="resetButtonOptions"
+    >
+      {{ resetButtonOptions.content }}
+    </component>
+
+    <template v-if="!rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
+
+      <component
+        :is="COMPONENT_MAP.PrimaryButton"
+        v-if="submitButtonOptions.show"
+        type="button"
+        @click="handleSubmit"
+        v-bind="submitButtonOptions"
+      >
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
+
+    <!-- 展开按钮前 -->
+    <slot name="expand-before"></slot>
+
+    <VbenExpandableArrow
+      class="ml-[-0.3em]"
+      v-if="rootProps.showCollapseButton && actionProps.isExpandable"
+      v-model:model-value="collapsed"
+    >
+      <span>{{ collapsed ? $t('expand') : $t('collapse') }}</span>
+    </VbenExpandableArrow>
+
+    <!-- 展开按钮后 -->
+    <slot name="expand-after"></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/config.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/config.ts
new file mode 100644
index 0000000..645f51f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/config.ts
@@ -0,0 +1,87 @@
+import type { Component } from 'vue';
+
+import type {
+  BaseFormComponentType,
+  FormCommonConfig,
+  VbenFormAdapterOptions,
+} from './types';
+
+import { h } from 'vue';
+
+import {
+  VbenButton,
+  VbenCheckbox,
+  Input as VbenInput,
+  VbenInputPassword,
+  VbenPinInput,
+  VbenSelect,
+} from '@vben-core/shadcn-ui';
+import { globalShareState } from '@vben-core/shared/global-state';
+
+import { defineRule } from 'vee-validate';
+
+const DEFAULT_MODEL_PROP_NAME = 'modelValue';
+
+export const DEFAULT_FORM_COMMON_CONFIG: FormCommonConfig = {};
+
+export const COMPONENT_MAP: Record<BaseFormComponentType, Component> = {
+  DefaultButton: h(VbenButton, { size: 'sm', variant: 'outline' }),
+  PrimaryButton: h(VbenButton, { size: 'sm', variant: 'default' }),
+  VbenCheckbox,
+  VbenInput,
+  VbenInputPassword,
+  VbenPinInput,
+  VbenSelect,
+};
+
+export const COMPONENT_BIND_EVENT_MAP: Partial<
+  Record<BaseFormComponentType, string>
+> = {
+  VbenCheckbox: 'checked',
+};
+
+export function setupVbenForm<
+  T extends BaseFormComponentType = BaseFormComponentType,
+>(options: VbenFormAdapterOptions<T>) {
+  const { config, defineRules } = options;
+
+  const {
+    disabledOnChangeListener = true,
+    disabledOnInputListener = true,
+    emptyStateValue = undefined,
+  } = (config || {}) as FormCommonConfig;
+
+  Object.assign(DEFAULT_FORM_COMMON_CONFIG, {
+    disabledOnChangeListener,
+    disabledOnInputListener,
+    emptyStateValue,
+  });
+
+  if (defineRules) {
+    for (const key of Object.keys(defineRules)) {
+      defineRule(key, defineRules[key as never]);
+    }
+  }
+
+  const baseModelPropName =
+    config?.baseModelPropName ?? DEFAULT_MODEL_PROP_NAME;
+  const modelPropNameMap = config?.modelPropNameMap as
+    | Record<BaseFormComponentType, string>
+    | undefined;
+
+  const components = globalShareState.getComponents();
+
+  for (const component of Object.keys(components)) {
+    const key = component as BaseFormComponentType;
+    COMPONENT_MAP[key] = components[component as never];
+
+    if (baseModelPropName !== DEFAULT_MODEL_PROP_NAME) {
+      COMPONENT_BIND_EVENT_MAP[key] = baseModelPropName;
+    }
+
+    // 覆盖特殊组件的modelPropName
+    if (modelPropNameMap && modelPropNameMap[key]) {
+      COMPONENT_BIND_EVENT_MAP[key] = modelPropNameMap[key];
+    }
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-api.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-api.ts
new file mode 100644
index 0000000..f5f353d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -0,0 +1,597 @@
+import type {
+  FormState,
+  GenericObject,
+  ResetFormOpts,
+  ValidationOptions,
+} from 'vee-validate';
+
+import type { ComponentPublicInstance } from 'vue';
+
+import type { Recordable } from '@vben-core/typings';
+
+import type { FormActions, FormSchema, VbenFormProps } from './types';
+
+import { isRef, toRaw } from 'vue';
+
+import { Store } from '@vben-core/shared/store';
+import {
+  bindMethods,
+  createMerge,
+  formatDate,
+  isDate,
+  isDayjsObject,
+  isFunction,
+  isObject,
+  mergeWithArrayOverride,
+  StateHandler,
+} from '@vben-core/shared/utils';
+
+function getDefaultState(): VbenFormProps {
+  return {
+    actionWrapperClass: '',
+    collapsed: false,
+    collapsedRows: 1,
+    collapseTriggerResize: false,
+    commonConfig: {},
+    handleReset: undefined,
+    handleSubmit: undefined,
+    handleValuesChange: undefined,
+    handleCollapsedChange: undefined,
+    layout: 'horizontal',
+    resetButtonOptions: {},
+    schema: [],
+    scrollToFirstError: false,
+    showCollapseButton: false,
+    showDefaultActions: true,
+    submitButtonOptions: {},
+    submitOnChange: false,
+    submitOnEnter: false,
+    wrapperClass: 'grid-cols-1',
+  };
+}
+
+export class FormApi {
+  // private api: Pick<VbenFormProps, 'handleReset' | 'handleSubmit'>;
+  public form = {} as FormActions;
+  isMounted = false;
+
+  public state: null | VbenFormProps = null;
+  stateHandler: StateHandler;
+
+  public store: Store<VbenFormProps>;
+
+  /**
+   * 组件实例映射
+   */
+  private componentRefMap: Map<string, unknown> = new Map();
+
+  // 最后一次点击提交时的表单值
+  private latestSubmissionValues: null | Recordable<any> = null;
+
+  private prevState: null | VbenFormProps = null;
+
+  constructor(options: VbenFormProps = {}) {
+    const { ...storeState } = options;
+
+    const defaultState = getDefaultState();
+
+    this.store = new Store<VbenFormProps>(
+      {
+        ...defaultState,
+        ...storeState,
+      },
+      {
+        onUpdate: () => {
+          this.prevState = this.state;
+          this.state = this.store.state;
+          this.updateState();
+        },
+      },
+    );
+
+    this.state = this.store.state;
+    this.stateHandler = new StateHandler();
+    bindMethods(this);
+  }
+
+  /**
+   * 获取字段组件实例
+   * @param fieldName 字段名
+   * @returns 组件实例
+   */
+  getFieldComponentRef<T = ComponentPublicInstance>(
+    fieldName: string,
+  ): T | undefined {
+    let target = this.componentRefMap.has(fieldName)
+      ? (this.componentRefMap.get(fieldName) as ComponentPublicInstance)
+      : undefined;
+    if (
+      target &&
+      target.$.type.name === 'AsyncComponentWrapper' &&
+      target.$.subTree.ref
+    ) {
+      if (Array.isArray(target.$.subTree.ref)) {
+        if (
+          target.$.subTree.ref.length > 0 &&
+          isRef(target.$.subTree.ref[0]?.r)
+        ) {
+          target = target.$.subTree.ref[0]?.r.value as ComponentPublicInstance;
+        }
+      } else if (isRef(target.$.subTree.ref.r)) {
+        target = target.$.subTree.ref.r.value as ComponentPublicInstance;
+      }
+    }
+    return target as T;
+  }
+
+  /**
+   * 获取当前聚焦的字段，如果没有聚焦的字段则返回undefined
+   */
+  getFocusedField() {
+    for (const fieldName of this.componentRefMap.keys()) {
+      const ref = this.getFieldComponentRef(fieldName);
+      if (ref) {
+        let el: HTMLElement | null = null;
+        if (ref instanceof HTMLElement) {
+          el = ref;
+        } else if (ref.$el instanceof HTMLElement) {
+          el = ref.$el;
+        }
+        if (!el) {
+          continue;
+        }
+        if (
+          el === document.activeElement ||
+          el.contains(document.activeElement)
+        ) {
+          return fieldName;
+        }
+      }
+    }
+    return undefined;
+  }
+
+  getLatestSubmissionValues() {
+    return this.latestSubmissionValues || {};
+  }
+
+  getState() {
+    return this.state;
+  }
+
+  async getValues<T = Recordable<any>>() {
+    const form = await this.getForm();
+    return (form.values ? this.handleRangeTimeValue(form.values) : {}) as T;
+  }
+
+  async isFieldValid(fieldName: string) {
+    const form = await this.getForm();
+    return form.isFieldValid(fieldName);
+  }
+
+  merge(formApi: FormApi) {
+    const chain = [this, formApi];
+    const proxy = new Proxy(formApi, {
+      get(target: any, prop: any) {
+        if (prop === 'merge') {
+          return (nextFormApi: FormApi) => {
+            chain.push(nextFormApi);
+            return proxy;
+          };
+        }
+        if (prop === 'submitAllForm') {
+          return async (needMerge: boolean = true) => {
+            try {
+              const results = await Promise.all(
+                chain.map(async (api) => {
+                  const validateResult = await api.validate();
+                  if (!validateResult.valid) {
+                    return;
+                  }
+                  const rawValues = toRaw((await api.getValues()) || {});
+                  return rawValues;
+                }),
+              );
+              if (needMerge) {
+                const mergedResults = Object.assign({}, ...results);
+                return mergedResults;
+              }
+              return results;
+            } catch (error) {
+              console.error('Validation error:', error);
+            }
+          };
+        }
+        return target[prop];
+      },
+    });
+
+    return proxy;
+  }
+
+  mount(formActions: FormActions, componentRefMap: Map<string, unknown>) {
+    if (!this.isMounted) {
+      Object.assign(this.form, formActions);
+      this.stateHandler.setConditionTrue();
+      this.setLatestSubmissionValues({
+        ...toRaw(this.handleRangeTimeValue(this.form.values)),
+      });
+      this.componentRefMap = componentRefMap;
+      this.isMounted = true;
+    }
+  }
+
+  /**
+   * 根据字段名移除表单项
+   * @param fields
+   */
+  async removeSchemaByFields(fields: string[]) {
+    const fieldSet = new Set(fields);
+    const schema = this.state?.schema ?? [];
+
+    const filterSchema = schema.filter((item) => !fieldSet.has(item.fieldName));
+
+    this.setState({
+      schema: filterSchema,
+    });
+  }
+
+  /**
+   * 重置表单
+   */
+  async resetForm(
+    state?: Partial<FormState<GenericObject>> | undefined,
+    opts?: Partial<ResetFormOpts>,
+  ) {
+    const form = await this.getForm();
+    return form.resetForm(state, opts);
+  }
+
+  async resetValidate() {
+    const form = await this.getForm();
+    const fields = Object.keys(form.errors.value);
+    fields.forEach((field) => {
+      form.setFieldError(field, undefined);
+    });
+  }
+
+  /**
+   * 滚动到第一个错误字段
+   * @param errors 验证错误对象
+   */
+  scrollToFirstError(errors: Record<string, any> | string) {
+    // https://github.com/logaretm/vee-validate/discussions/3835
+    const firstErrorFieldName =
+      typeof errors === 'string' ? errors : Object.keys(errors)[0];
+
+    if (!firstErrorFieldName) {
+      return;
+    }
+
+    let el = document.querySelector(
+      `[name="${firstErrorFieldName}"]`,
+    ) as HTMLElement;
+
+    // 如果通过 name 属性找不到，尝试通过组件引用查找, 正常情况下不会走到这，怕哪天 vee-validate 改了 name 属性有个兜底的
+    if (!el) {
+      const componentRef = this.getFieldComponentRef(firstErrorFieldName);
+      if (componentRef && componentRef.$el instanceof HTMLElement) {
+        el = componentRef.$el;
+      }
+    }
+
+    if (el) {
+      // 滚动到错误字段，添加一些偏移量以确保字段完全可见
+      el.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'nearest',
+      });
+    }
+  }
+
+  async setFieldValue(field: string, value: any, shouldValidate?: boolean) {
+    const form = await this.getForm();
+    form.setFieldValue(field, value, shouldValidate);
+  }
+
+  setLatestSubmissionValues(values: null | Recordable<any>) {
+    this.latestSubmissionValues = { ...toRaw(values) };
+  }
+
+  setState(
+    stateOrFn:
+      | ((prev: VbenFormProps) => Partial<VbenFormProps>)
+      | Partial<VbenFormProps>,
+  ) {
+    if (isFunction(stateOrFn)) {
+      this.store.setState((prev) => {
+        return mergeWithArrayOverride(stateOrFn(prev), prev);
+      });
+    } else {
+      this.store.setState((prev) => mergeWithArrayOverride(stateOrFn, prev));
+    }
+  }
+
+  /**
+   * 设置表单值
+   * @param fields record
+   * @param filterFields 过滤不在schema中定义的字段 默认为true
+   * @param shouldValidate
+   */
+  async setValues(
+    fields: Record<string, any>,
+    filterFields: boolean = true,
+    shouldValidate: boolean = false,
+  ) {
+    const form = await this.getForm();
+    if (!filterFields) {
+      form.setValues(fields, shouldValidate);
+      return;
+    }
+
+    /**
+     * 合并算法有待改进，目前的算法不支持object类型的值。
+     * antd的日期时间相关组件的值类型为dayjs对象
+     * element-plus的日期时间相关组件的值类型可能为Date对象
+     * 以上两种类型需要排除深度合并
+     */
+    const fieldMergeFn = createMerge((obj, key, value) => {
+      if (key in obj) {
+        obj[key] =
+          !Array.isArray(obj[key]) &&
+          isObject(obj[key]) &&
+          !isDayjsObject(obj[key]) &&
+          !isDate(obj[key])
+            ? fieldMergeFn(value, obj[key])
+            : value;
+      }
+      return true;
+    });
+    const filteredFields = fieldMergeFn(fields, form.values);
+    form.setValues(filteredFields, shouldValidate);
+  }
+
+  async submitForm(e?: Event) {
+    e?.preventDefault();
+    e?.stopPropagation();
+    const form = await this.getForm();
+    await form.submitForm();
+    const rawValues = toRaw(await this.getValues());
+    await this.state?.handleSubmit?.(rawValues);
+
+    return rawValues;
+  }
+
+  unmount() {
+    this.form?.resetForm?.();
+    // this.state = null;
+    this.latestSubmissionValues = null;
+    this.isMounted = false;
+    this.stateHandler.reset();
+  }
+
+  updateSchema(schema: Partial<FormSchema>[]) {
+    const updated: Partial<FormSchema>[] = [...schema];
+    const hasField = updated.every(
+      (item) => Reflect.has(item, 'fieldName') && item.fieldName,
+    );
+
+    if (!hasField) {
+      console.error(
+        'All items in the schema array must have a valid `fieldName` property to be updated',
+      );
+      return;
+    }
+    const currentSchema = [...(this.state?.schema ?? [])];
+
+    const updatedMap: Record<string, any> = {};
+
+    updated.forEach((item) => {
+      if (item.fieldName) {
+        updatedMap[item.fieldName] = item;
+      }
+    });
+
+    currentSchema.forEach((schema, index) => {
+      const updatedData = updatedMap[schema.fieldName];
+      if (updatedData) {
+        currentSchema[index] = mergeWithArrayOverride(
+          updatedData,
+          schema,
+        ) as FormSchema;
+      }
+    });
+    this.setState({ schema: currentSchema });
+  }
+
+  async validate(opts?: Partial<ValidationOptions>) {
+    const form = await this.getForm();
+
+    const validateResult = await form.validate(opts);
+
+    if (Object.keys(validateResult?.errors ?? {}).length > 0) {
+      console.error('validate error', validateResult?.errors);
+
+      if (this.state?.scrollToFirstError) {
+        this.scrollToFirstError(validateResult.errors);
+      }
+    }
+    return validateResult;
+  }
+
+  async validateAndSubmitForm() {
+    const form = await this.getForm();
+    const { valid, errors } = await form.validate();
+    if (!valid) {
+      if (this.state?.scrollToFirstError) {
+        this.scrollToFirstError(errors);
+      }
+      return;
+    }
+    return await this.submitForm();
+  }
+
+  async validateField(fieldName: string, opts?: Partial<ValidationOptions>) {
+    const form = await this.getForm();
+    const validateResult = await form.validateField(fieldName, opts);
+
+    if (Object.keys(validateResult?.errors ?? {}).length > 0) {
+      console.error('validate error', validateResult?.errors);
+
+      if (this.state?.scrollToFirstError) {
+        this.scrollToFirstError(fieldName);
+      }
+    }
+    return validateResult;
+  }
+
+  private async getForm() {
+    if (!this.isMounted) {
+      // 等待form挂载
+      await this.stateHandler.waitForCondition();
+    }
+    if (!this.form?.meta) {
+      throw new Error('<VbenForm /> is not mounted');
+    }
+    return this.form;
+  }
+
+  private handleMultiFields = (originValues: Record<string, any>) => {
+    const arrayToStringFields = this.state?.arrayToStringFields;
+    if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
+      return;
+    }
+
+    const processFields = (fields: string[], separator: string = ',') => {
+      this.processFields(fields, separator, originValues, (value, sep) => {
+        if (Array.isArray(value)) {
+          return value.join(sep);
+        } else if (typeof value === 'string') {
+          // 处理空字符串的情况
+          if (value === '') {
+            return [];
+          }
+          // 处理复杂分隔符的情况
+          const escapedSeparator = sep.replaceAll(
+            /[.*+?^${}()|[\]\\]/g,
+            String.raw`\$&`,
+          );
+          return value.split(new RegExp(escapedSeparator));
+        } else {
+          return value;
+        }
+      });
+    };
+
+    // 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2']
+    if (arrayToStringFields.every((item) => typeof item === 'string')) {
+      const lastItem =
+        arrayToStringFields[arrayToStringFields.length - 1] || '';
+      const fields =
+        lastItem.length === 1
+          ? arrayToStringFields.slice(0, -1)
+          : arrayToStringFields;
+      const separator = lastItem.length === 1 ? lastItem : ',';
+      processFields(fields, separator);
+      return;
+    }
+
+    // 处理嵌套数组格式 [['field1'], ';']
+    arrayToStringFields.forEach((fieldConfig) => {
+      if (Array.isArray(fieldConfig)) {
+        const [fields, separator = ','] = fieldConfig;
+        // 根据类型定义，fields 应该始终是字符串数组
+        if (!Array.isArray(fields)) {
+          console.warn(
+            `Invalid field configuration: fields should be an array of strings, got ${typeof fields}`,
+          );
+          return;
+        }
+        processFields(fields, separator);
+      }
+    });
+  };
+
+  private handleRangeTimeValue = (originValues: Record<string, any>) => {
+    const values = { ...originValues };
+    const fieldMappingTime = this.state?.fieldMappingTime;
+
+    this.handleMultiFields(values);
+    if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
+      return values;
+    }
+
+    fieldMappingTime.forEach(
+      ([field, [startTimeKey, endTimeKey], format = 'YYYY-MM-DD']) => {
+        if (startTimeKey && endTimeKey && values[field] === null) {
+          Reflect.deleteProperty(values, startTimeKey);
+          Reflect.deleteProperty(values, endTimeKey);
+          // delete values[startTimeKey];
+          // delete values[endTimeKey];
+        }
+
+        if (!values[field]) {
+          Reflect.deleteProperty(values, field);
+          // delete values[field];
+          return;
+        }
+
+        const [startTime, endTime] = values[field];
+        if (format === null) {
+          values[startTimeKey] = startTime;
+          values[endTimeKey] = endTime;
+        } else if (isFunction(format)) {
+          values[startTimeKey] = format(startTime, startTimeKey);
+          values[endTimeKey] = format(endTime, endTimeKey);
+        } else {
+          const [startTimeFormat, endTimeFormat] = Array.isArray(format)
+            ? format
+            : [format, format];
+
+          values[startTimeKey] = startTime
+            ? formatDate(startTime, startTimeFormat)
+            : undefined;
+          values[endTimeKey] = endTime
+            ? formatDate(endTime, endTimeFormat)
+            : undefined;
+        }
+        // delete values[field];
+        Reflect.deleteProperty(values, field);
+      },
+    );
+    return values;
+  };
+
+  private processFields = (
+    fields: string[],
+    separator: string,
+    originValues: Record<string, any>,
+    transformFn: (value: any, separator: string) => any,
+  ) => {
+    fields.forEach((field) => {
+      const value = originValues[field];
+      if (value === undefined || value === null) {
+        return;
+      }
+      originValues[field] = transformFn(value, separator);
+    });
+  };
+
+  private updateState() {
+    const currentSchema = this.state?.schema ?? [];
+    const prevSchema = this.prevState?.schema ?? [];
+    // 进行了删除schema操作
+    if (currentSchema.length < prevSchema.length) {
+      const currentFields = new Set(
+        currentSchema.map((item) => item.fieldName),
+      );
+      const deletedSchema = prevSchema.filter(
+        (item) => !currentFields.has(item.fieldName),
+      );
+      for (const schema of deletedSchema) {
+        this.form?.setFieldValue?.(schema.fieldName, undefined);
+      }
+    }
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/context.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/context.ts
new file mode 100644
index 0000000..af4b15c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/context.ts
@@ -0,0 +1,24 @@
+import type { FormRenderProps } from '../types';
+
+import { computed } from 'vue';
+
+import { createContext } from '@vben-core/shadcn-ui';
+
+export const [injectRenderFormProps, provideFormRenderProps] =
+  createContext<FormRenderProps>('FormRenderProps');
+
+export const useFormContext = () => {
+  const formRenderProps = injectRenderFormProps();
+
+  const isVertical = computed(() => formRenderProps.layout === 'vertical');
+
+  const componentMap = computed(() => formRenderProps.componentMap);
+  const componentBindEventMap = computed(
+    () => formRenderProps.componentBindEventMap,
+  );
+  return {
+    componentBindEventMap,
+    componentMap,
+    isVertical,
+  };
+};
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts
new file mode 100644
index 0000000..9881db1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts
@@ -0,0 +1,124 @@
+import type {
+  FormItemDependencies,
+  FormSchemaRuleType,
+  MaybeComponentProps,
+} from '../types';
+
+import { computed, ref, watch } from 'vue';
+
+import { isBoolean, isFunction } from '@vben-core/shared/utils';
+
+import { useFormValues } from 'vee-validate';
+
+import { injectRenderFormProps } from './context';
+
+export default function useDependencies(
+  getDependencies: () => FormItemDependencies | undefined,
+) {
+  const values = useFormValues();
+
+  const formRenderProps = injectRenderFormProps();
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const formApi = formRenderProps.form!;
+
+  if (!values) {
+    throw new Error('useDependencies should be used within <VbenForm>');
+  }
+
+  const isIf = ref(true);
+  const isDisabled = ref(false);
+  const isShow = ref(true);
+  const isRequired = ref(false);
+  const dynamicComponentProps = ref<MaybeComponentProps>({});
+  const dynamicRules = ref<FormSchemaRuleType>();
+
+  const triggerFieldValues = computed(() => {
+    // 该字段可能会被多个字段触发
+    const triggerFields = getDependencies()?.triggerFields ?? [];
+    return triggerFields.map((dep) => {
+      return values.value[dep];
+    });
+  });
+
+  const resetConditionState = () => {
+    isDisabled.value = false;
+    isIf.value = true;
+    isShow.value = true;
+    isRequired.value = false;
+    dynamicRules.value = undefined;
+    dynamicComponentProps.value = {};
+  };
+
+  watch(
+    [triggerFieldValues, getDependencies],
+    async ([_values, dependencies]) => {
+      if (!dependencies || !dependencies?.triggerFields?.length) {
+        return;
+      }
+      resetConditionState();
+      const {
+        componentProps,
+        disabled,
+        if: whenIf,
+        required,
+        rules,
+        show,
+        trigger,
+      } = dependencies;
+
+      // 1. 优先判断if，如果if为false，则不渲染dom，后续判断也不再执行
+      const formValues = values.value;
+
+      if (isFunction(whenIf)) {
+        isIf.value = !!(await whenIf(formValues, formApi));
+        // 不渲染
+        if (!isIf.value) return;
+      } else if (isBoolean(whenIf)) {
+        isIf.value = whenIf;
+        if (!isIf.value) return;
+      }
+
+      // 2. 判断show，如果show为false，则隐藏
+      if (isFunction(show)) {
+        isShow.value = !!(await show(formValues, formApi));
+        if (!isShow.value) return;
+      } else if (isBoolean(show)) {
+        isShow.value = show;
+        if (!isShow.value) return;
+      }
+
+      if (isFunction(componentProps)) {
+        dynamicComponentProps.value = await componentProps(formValues, formApi);
+      }
+
+      if (isFunction(rules)) {
+        dynamicRules.value = await rules(formValues, formApi);
+      }
+
+      if (isFunction(disabled)) {
+        isDisabled.value = !!(await disabled(formValues, formApi));
+      } else if (isBoolean(disabled)) {
+        isDisabled.value = disabled;
+      }
+
+      if (isFunction(required)) {
+        isRequired.value = !!(await required(formValues, formApi));
+      }
+
+      if (isFunction(trigger)) {
+        await trigger(formValues, formApi);
+      }
+    },
+    { deep: true, immediate: true },
+  );
+
+  return {
+    dynamicComponentProps,
+    dynamicRules,
+    isDisabled,
+    isIf,
+    isRequired,
+    isShow,
+  };
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts
new file mode 100644
index 0000000..f6a0e49
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts
@@ -0,0 +1,159 @@
+import type { FormRenderProps } from '../types';
+
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue';
+
+import {
+  breakpointsTailwind,
+  useBreakpoints,
+  useElementVisibility,
+  useResizeObserver,
+} from '@vueuse/core';
+
+interface FormLayoutItem {
+  fieldName?: string;
+  top: number;
+}
+
+interface ExpandableLayout {
+  collapsedFieldNames: Set<string>;
+  isExpandable: boolean;
+}
+
+export function getExpandableLayout(
+  items: FormLayoutItem[],
+  collapsedRows = 1,
+): ExpandableLayout {
+  const rowTops = [
+    ...new Set(items.map(({ top }) => Math.round(top))),
+  ].toSorted((a, b) => a - b);
+  const collapsedFieldNames = new Set<string>();
+
+  for (const item of items) {
+    if (!item.fieldName) {
+      continue;
+    }
+
+    const rowIndex = rowTops.indexOf(Math.round(item.top));
+    if (rowIndex >= collapsedRows) {
+      collapsedFieldNames.add(item.fieldName);
+    }
+  }
+
+  return {
+    collapsedFieldNames,
+    isExpandable: collapsedFieldNames.size > 0,
+  };
+}
+
+/**
+ * 动态计算行数
+ */
+export function useExpandable(
+  props: FormRenderProps,
+  wrapperRef = useTemplateRef<HTMLElement>('wrapperRef'),
+) {
+  const isVisible = useElementVisibility(wrapperRef);
+  const collapsedFieldNames = ref<Set<string>>(new Set());
+  // 是否已经计算过一次
+  const isCalculated = ref(false);
+  const isExpandable = ref(false);
+  let measuredWidth: number | undefined;
+
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+
+  const shouldCollapseField = computed(() => {
+    return (fieldName: string) => collapsedFieldNames.value.has(fieldName);
+  });
+
+  async function refreshExpandable() {
+    if (!props.showCollapseButton) {
+      collapsedFieldNames.value = new Set();
+      isCalculated.value = false;
+      isExpandable.value = false;
+      return;
+    }
+
+    // Reveal collapsed fields before measuring the complete responsive layout.
+    collapsedFieldNames.value = new Set();
+    isCalculated.value = false;
+    isExpandable.value = false;
+    await nextTick();
+    await calculateExpandable();
+  }
+
+  watch(
+    [
+      () => props.showCollapseButton,
+      () => breakpoints.active().value,
+      () => props.schema?.length,
+      () => props.collapsedRows,
+      () => isVisible.value,
+    ],
+    async () => {
+      await refreshExpandable();
+    },
+  );
+
+  async function calculateExpandable() {
+    if (!props.showCollapseButton) {
+      return;
+    }
+
+    await nextTick();
+    if (!wrapperRef.value) {
+      return;
+    }
+    const container = wrapperRef.value;
+    const containerRect = container.getBoundingClientRect();
+    measuredWidth = containerRect.width;
+    const layoutItems: FormLayoutItem[] = [];
+
+    for (const child of container.children) {
+      const el = child as HTMLElement;
+      const itemRect = el.getBoundingClientRect();
+      if (itemRect.width === 0 && itemRect.height === 0) {
+        continue;
+      }
+
+      const fieldName = el.dataset.formFieldName;
+      const isFormActions = 'formActions' in el.dataset;
+      if (!fieldName && !isFormActions) {
+        continue;
+      }
+
+      layoutItems.push({
+        fieldName,
+        top: itemRect.top - containerRect.top,
+      });
+    }
+
+    if (layoutItems.length === 0) {
+      return;
+    }
+
+    const layout = getExpandableLayout(layoutItems, props.collapsedRows ?? 1);
+    collapsedFieldNames.value = layout.collapsedFieldNames;
+    isExpandable.value = layout.isExpandable;
+    isCalculated.value = true;
+  }
+
+  useResizeObserver(wrapperRef, ([entry]) => {
+    if (!entry) {
+      return;
+    }
+    if (isCalculated.value && measuredWidth === entry.contentRect.width) {
+      return;
+    }
+    refreshExpandable();
+  });
+
+  onMounted(() => {
+    refreshExpandable();
+  });
+
+  return {
+    isCalculated,
+    isExpandable,
+    shouldCollapseField,
+  };
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
new file mode 100644
index 0000000..53c731e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -0,0 +1,395 @@
+<script setup lang="ts">
+import type { ZodType } from 'zod';
+
+import type { FormSchema, MaybeComponentProps } from '../types';
+
+import { computed, nextTick, onUnmounted, useTemplateRef, watch } from 'vue';
+
+import { CircleAlert } from '@vben-core/icons';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormMessage,
+  VbenRenderContent,
+  VbenTooltip,
+} from '@vben-core/shadcn-ui';
+import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils';
+
+import { toTypedSchema } from '@vee-validate/zod';
+import { useFieldError, useFormValues } from 'vee-validate';
+
+import { injectComponentRefMap } from '../use-form-context';
+import { injectRenderFormProps, useFormContext } from './context';
+import useDependencies from './dependencies';
+import FormLabel from './form-label.vue';
+import { isEventObjectLike } from './helper';
+
+interface Props extends FormSchema {}
+
+const {
+  colon,
+  commonComponentProps,
+  component,
+  componentProps,
+  dependencies,
+  description,
+  disabled,
+  disabledOnChangeListener,
+  disabledOnInputListener,
+  emptyStateValue,
+  fieldName,
+  formFieldProps,
+  hide,
+  label,
+  labelClass,
+  labelWidth,
+  modelPropName,
+  renderComponentContent,
+  rules,
+} = defineProps<
+  Props & {
+    commonComponentProps: MaybeComponentProps;
+  }
+>();
+
+const { componentBindEventMap, componentMap, isVertical } = useFormContext();
+const formRenderProps = injectRenderFormProps();
+const values = useFormValues();
+const errors = useFieldError(fieldName);
+const fieldComponentRef = useTemplateRef<HTMLInputElement>('fieldComponentRef');
+const formApi = formRenderProps.form;
+const compact = computed(() => formRenderProps.compact);
+const isInValid = computed(() => errors.value?.length > 0);
+
+const FieldComponent = computed(() => {
+  const finalComponent = isString(component)
+    ? componentMap.value[component]
+    : component;
+  if (!finalComponent) {
+    // 组件未注册
+    console.warn(`Component ${component} is not registered`);
+  }
+  return finalComponent;
+});
+
+const {
+  dynamicComponentProps,
+  dynamicRules,
+  isDisabled,
+  isIf,
+  isRequired,
+  isShow,
+} = useDependencies(() => dependencies);
+
+const labelStyle = computed(() => {
+  return labelClass?.includes('w-') || isVertical.value
+    ? {}
+    : {
+        width: `${labelWidth}px`,
+      };
+});
+
+const currentRules = computed(() => {
+  return dynamicRules.value || rules;
+});
+
+const visible = computed(() => {
+  return !hide && isIf.value && isShow.value;
+});
+
+const shouldRequired = computed(() => {
+  if (!visible.value) {
+    return false;
+  }
+
+  if (!currentRules.value) {
+    return isRequired.value;
+  }
+
+  if (isRequired.value) {
+    return true;
+  }
+
+  if (isString(currentRules.value)) {
+    return ['required', 'selectRequired'].includes(currentRules.value);
+  }
+
+  let isOptional = currentRules?.value?.isOptional?.();
+
+  // 如果有设置默认值，则不是必填，需要特殊处理
+  const typeName = currentRules?.value?._def?.typeName;
+  if (typeName === 'ZodDefault') {
+    const innerType = currentRules?.value?._def.innerType;
+    if (innerType) {
+      isOptional = innerType.isOptional?.();
+    }
+  }
+
+  return !isOptional;
+});
+
+const fieldRules = computed(() => {
+  if (!visible.value) {
+    return null;
+  }
+
+  let rules = currentRules.value;
+  if (!rules) {
+    return isRequired.value ? 'required' : null;
+  }
+
+  if (isString(rules)) {
+    return rules;
+  }
+
+  const isOptional = !shouldRequired.value;
+  if (!isOptional) {
+    const unwrappedRules = (rules as any)?.unwrap?.();
+    if (unwrappedRules) {
+      rules = unwrappedRules;
+    }
+  }
+  return toTypedSchema(rules as ZodType);
+});
+
+const computedProps = computed(() => {
+  const finalComponentProps = isFunction(componentProps)
+    ? componentProps(values.value, formApi!)
+    : componentProps;
+
+  return {
+    ...commonComponentProps,
+    ...finalComponentProps,
+    ...dynamicComponentProps.value,
+  };
+});
+
+watch(
+  () => computedProps.value?.autofocus,
+  (value) => {
+    if (value === true) {
+      nextTick(() => {
+        autofocus();
+      });
+    }
+  },
+  { immediate: true },
+);
+
+const shouldDisabled = computed(() => {
+  return isDisabled.value || disabled || computedProps.value?.disabled;
+});
+
+const customContentRender = computed(() => {
+  if (!isFunction(renderComponentContent)) {
+    return {};
+  }
+  return renderComponentContent(values.value, formApi!);
+});
+
+const renderContentKey = computed(() => {
+  return Object.keys(customContentRender.value);
+});
+
+const fieldProps = computed(() => {
+  const rules = fieldRules.value;
+  return {
+    keepValue: true,
+    label: isString(label) ? label : '',
+    ...(rules ? { rules } : {}),
+    ...(formFieldProps as Record<string, any>),
+  };
+});
+
+function fieldBindEvent(slotProps: Record<string, any>) {
+  const modelValue = slotProps.componentField.modelValue;
+  const handler = slotProps.componentField['onUpdate:modelValue'];
+
+  const bindEventField =
+    modelPropName ||
+    (isString(component) ? componentBindEventMap.value?.[component] : null);
+
+  let value = modelValue;
+  // antd design 的一些组件会传递一个 event 对象
+  if (modelValue && isObject(modelValue) && bindEventField) {
+    value = isEventObjectLike(modelValue)
+      ? modelValue?.target?.[bindEventField]
+      : (modelValue?.[bindEventField] ?? modelValue);
+  }
+
+  if (bindEventField) {
+    return {
+      [`onUpdate:${bindEventField}`]: handler,
+      [bindEventField]: value === undefined ? emptyStateValue : value,
+      onChange: disabledOnChangeListener
+        ? undefined
+        : (e: Record<string, any>) => {
+            const shouldUnwrap = isEventObjectLike(e);
+            const onChange = slotProps?.componentField?.onChange;
+            if (!shouldUnwrap) {
+              return onChange?.(e);
+            }
+
+            return onChange?.(e?.target?.[bindEventField] ?? e);
+          },
+      ...(disabledOnInputListener ? { onInput: undefined } : {}),
+    };
+  }
+  return {
+    ...(disabledOnInputListener ? { onInput: undefined } : {}),
+    ...(disabledOnChangeListener ? { onChange: undefined } : {}),
+  };
+}
+
+function createComponentProps(slotProps: Record<string, any>) {
+  const bindEvents = fieldBindEvent(slotProps);
+
+  const binds = {
+    ...slotProps.componentField,
+    ...computedProps.value,
+    ...bindEvents,
+    ...(Reflect.has(computedProps.value, 'onChange')
+      ? { onChange: computedProps.value.onChange }
+      : {}),
+    ...(Reflect.has(computedProps.value, 'onInput')
+      ? { onInput: computedProps.value.onInput }
+      : {}),
+  };
+
+  return binds;
+}
+
+function autofocus() {
+  if (
+    fieldComponentRef.value &&
+    isFunction(fieldComponentRef.value.focus) &&
+    // 检查当前是否有元素被聚焦
+    document.activeElement !== fieldComponentRef.value
+  ) {
+    fieldComponentRef.value?.focus?.();
+  }
+}
+const componentRefMap = injectComponentRefMap();
+watch(fieldComponentRef, (componentRef) => {
+  componentRefMap?.set(fieldName, componentRef);
+});
+onUnmounted(() => {
+  if (componentRefMap?.has(fieldName)) {
+    componentRefMap.delete(fieldName);
+  }
+});
+</script>
+
+<template>
+  <FormField
+    v-if="!hide && isIf"
+    v-bind="fieldProps"
+    v-slot="slotProps"
+    :name="fieldName"
+  >
+    <FormItem
+      v-show="isShow"
+      :class="{
+        'form-valid-error': isInValid,
+        'form-is-required': shouldRequired,
+        'flex-col': isVertical,
+        'flex-row items-center': !isVertical,
+        'pb-4': !compact,
+        'pb-2': compact,
+      }"
+      class="relative flex"
+      v-bind="$attrs"
+    >
+      <FormLabel
+        v-if="!hideLabel"
+        :class="
+          cn(
+            'flex leading-6',
+            {
+              'mr-2 flex-shrink-0 justify-end': !isVertical,
+              'mb-1 flex-row': isVertical,
+            },
+            labelClass,
+          )
+        "
+        :help="help"
+        :colon="colon"
+        :label="label"
+        :required="shouldRequired && !hideRequiredMark"
+        :style="labelStyle"
+      >
+        <template v-if="label">
+          <VbenRenderContent :content="label" />
+        </template>
+      </FormLabel>
+      <div class="flex-auto overflow-hidden p-[1px]">
+        <div :class="cn('relative flex w-full items-center', wrapperClass)">
+          <FormControl :class="cn(controlClass)">
+            <slot
+              v-bind="{
+                ...slotProps,
+                ...createComponentProps(slotProps),
+                disabled: shouldDisabled,
+                isInValid,
+              }"
+            >
+              <component
+                :is="FieldComponent"
+                ref="fieldComponentRef"
+                :class="{
+                  'border-destructive hover:border-destructive/80 focus:border-destructive focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
+                    isInValid,
+                }"
+                v-bind="createComponentProps(slotProps)"
+                :disabled="shouldDisabled"
+              >
+                <template
+                  v-for="name in renderContentKey"
+                  :key="name"
+                  #[name]="renderSlotProps"
+                >
+                  <VbenRenderContent
+                    :content="customContentRender[name]"
+                    v-bind="{ ...renderSlotProps, formContext: slotProps }"
+                  />
+                </template>
+                <!-- <slot></slot> -->
+              </component>
+              <VbenTooltip
+                v-if="compact && isInValid"
+                :delay-duration="300"
+                side="left"
+              >
+                <template #trigger>
+                  <slot name="trigger">
+                    <CircleAlert
+                      :class="
+                        cn(
+                          'inline-flex size-5 cursor-pointer text-foreground/80 hover:text-foreground',
+                        )
+                      "
+                    />
+                  </slot>
+                </template>
+                <FormMessage />
+              </VbenTooltip>
+            </slot>
+          </FormControl>
+          <!-- 自定义后缀 -->
+          <div v-if="suffix" class="ml-1">
+            <VbenRenderContent :content="suffix" />
+          </div>
+          <FormDescription v-if="description" class="ml-1">
+            <VbenRenderContent :content="description" />
+          </FormDescription>
+        </div>
+
+        <Transition name="slide-up" v-if="!compact">
+          <FormMessage class="absolute" />
+        </Transition>
+      </div>
+    </FormItem>
+  </FormField>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
new file mode 100644
index 0000000..44d002d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { CustomRenderType } from '../types';
+
+import {
+  FormLabel,
+  VbenHelpTooltip,
+  VbenRenderContent,
+} from '@vben-core/shadcn-ui';
+import { cn } from '@vben-core/shared/utils';
+
+interface Props {
+  class?: string;
+  colon?: boolean;
+  help?: CustomRenderType;
+  label?: CustomRenderType;
+  required?: boolean;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <FormLabel :class="cn('flex items-center', props.class)">
+    <span v-if="required" class="mr-[2px] text-destructive">*</span>
+    <slot></slot>
+    <VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
+      <VbenRenderContent :content="help" />
+    </VbenHelpTooltip>
+    <span v-if="colon && label" class="ml-[2px]">:</span>
+  </FormLabel>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/form.vue b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/form.vue
new file mode 100644
index 0000000..e01c315
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import type { GenericObject } from 'vee-validate';
+import type { ZodTypeAny } from 'zod';
+
+import type {
+  FormCommonConfig,
+  FormRenderProps,
+  FormSchema,
+  FormShape,
+} from '../types';
+
+import { computed, useTemplateRef } from 'vue';
+
+import { Form } from '@vben-core/shadcn-ui';
+import {
+  cn,
+  isFunction,
+  isString,
+  mergeWithArrayOverride,
+} from '@vben-core/shared/utils';
+
+import { provideFormRenderProps } from './context';
+import { useExpandable } from './expandable';
+import FormField from './form-field.vue';
+import { getBaseRules, getDefaultValueInZodStack } from './helper';
+
+interface Props extends FormRenderProps {}
+
+const props = withDefaults(
+  defineProps<Props & { globalCommonConfig?: FormCommonConfig }>(),
+  {
+    collapsedRows: 1,
+    commonConfig: () => ({}),
+    globalCommonConfig: () => ({}),
+    showCollapseButton: false,
+    wrapperClass: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+  },
+);
+
+const emits = defineEmits<{
+  submit: [event: any];
+}>();
+
+const wrapperClass = computed(() => {
+  const cls = ['flex'];
+  if (props.layout === 'inline') {
+    cls.push('flex-wrap gap-x-2');
+  } else {
+    cls.push(props.compact ? 'gap-x-2' : 'gap-x-4', 'flex-col grid');
+  }
+  return cn(...cls, props.wrapperClass);
+});
+
+provideFormRenderProps(props);
+
+const wrapperRef = useTemplateRef<HTMLElement>('wrapperRef');
+const { isCalculated, isExpandable, shouldCollapseField } = useExpandable(
+  props,
+  wrapperRef,
+);
+
+const shapes = computed(() => {
+  const resultShapes: FormShape[] = [];
+  props.schema?.forEach((schema) => {
+    const { fieldName } = schema;
+    const rules = schema.rules as ZodTypeAny;
+
+    let typeName = '';
+    if (rules && !isString(rules)) {
+      typeName = rules._def.typeName;
+    }
+
+    const baseRules = getBaseRules(rules) as ZodTypeAny;
+
+    resultShapes.push({
+      default: getDefaultValueInZodStack(rules),
+      fieldName,
+      required: !['ZodNullable', 'ZodOptional'].includes(typeName),
+      rules: baseRules,
+    });
+  });
+  return resultShapes;
+});
+
+const formComponent = computed(() => (props.form ? 'form' : Form));
+
+const formComponentProps = computed(() => {
+  return props.form
+    ? {
+        onSubmit: props.form.handleSubmit((val) => emits('submit', val)),
+      }
+    : {
+        onSubmit: (val: GenericObject) => emits('submit', val),
+      };
+});
+
+const formCollapsed = computed(() => {
+  return props.collapsed && isCalculated.value && isExpandable.value;
+});
+
+const computedSchema = computed(
+  (): (Omit<FormSchema, 'formFieldProps'> & {
+    commonComponentProps: Record<string, any>;
+    formFieldProps: Record<string, any>;
+  })[] => {
+    const {
+      colon = false,
+      componentProps = {},
+      controlClass = '',
+      disabled,
+      disabledOnChangeListener = true,
+      disabledOnInputListener = true,
+      emptyStateValue = undefined,
+      formFieldProps = {},
+      formItemClass = '',
+      hideLabel = false,
+      hideRequiredMark = false,
+      labelClass = '',
+      labelWidth = 100,
+      modelPropName = '',
+      wrapperClass = '',
+    } = mergeWithArrayOverride(props.commonConfig, props.globalCommonConfig);
+    return (props.schema || []).map((schema) => {
+      const hidden =
+        props.showCollapseButton && !!formCollapsed.value
+          ? shouldCollapseField.value(schema.fieldName)
+          : false;
+
+      // 处理函数形式的formItemClass
+      let resolvedSchemaFormItemClass = schema.formItemClass;
+      if (isFunction(schema.formItemClass)) {
+        try {
+          resolvedSchemaFormItemClass = schema.formItemClass();
+        } catch (error) {
+          console.error('Error calling formItemClass function:', error);
+          resolvedSchemaFormItemClass = '';
+        }
+      }
+
+      return {
+        colon,
+        disabled,
+        disabledOnChangeListener,
+        disabledOnInputListener,
+        emptyStateValue,
+        hideLabel,
+        hideRequiredMark,
+        labelWidth,
+        modelPropName,
+        wrapperClass,
+        ...schema,
+        commonComponentProps: componentProps,
+        componentProps: schema.componentProps,
+        controlClass: cn(controlClass, schema.controlClass),
+        formFieldProps: {
+          ...formFieldProps,
+          ...schema.formFieldProps,
+        },
+        formItemClass: cn(
+          'flex-shrink-0',
+          { hidden },
+          formItemClass,
+          resolvedSchemaFormItemClass,
+        ),
+        labelClass: cn(labelClass, schema.labelClass),
+      };
+    });
+  },
+);
+</script>
+
+<template>
+  <component :is="formComponent" v-bind="formComponentProps">
+    <div ref="wrapperRef" :class="wrapperClass">
+      <template v-for="cSchema in computedSchema" :key="cSchema.fieldName">
+        <!-- <div v-if="$slots[cSchema.fieldName]" :class="cSchema.formItemClass">
+          <slot :definition="cSchema" :name="cSchema.fieldName"> </slot>
+        </div> -->
+        <FormField
+          v-bind="cSchema"
+          :class="cSchema.formItemClass"
+          :data-form-field-name="cSchema.fieldName"
+          :rules="cSchema.rules"
+        >
+          <template #default="slotProps">
+            <slot v-bind="slotProps" :name="cSchema.fieldName"> </slot>
+          </template>
+        </FormField>
+      </template>
+      <slot :is-expandable="isExpandable" :shapes="shapes"></slot>
+    </div>
+  </component>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/helper.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/helper.ts
new file mode 100644
index 0000000..cdb3999
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/helper.ts
@@ -0,0 +1,60 @@
+import type {
+  AnyZodObject,
+  ZodDefault,
+  ZodEffects,
+  ZodNumber,
+  ZodString,
+  ZodTypeAny,
+} from 'zod';
+
+import { isObject, isString } from '@vben-core/shared/utils';
+
+/**
+ * Get the lowest level Zod type.
+ * This will unpack optionals, refinements, etc.
+ */
+export function getBaseRules<
+  ChildType extends AnyZodObject | ZodTypeAny = ZodTypeAny,
+>(schema: ChildType | ZodEffects<ChildType>): ChildType | null {
+  if (!schema || isString(schema)) return null;
+  if ('innerType' in schema._def)
+    return getBaseRules(schema._def.innerType as ChildType);
+
+  if ('schema' in schema._def)
+    return getBaseRules(schema._def.schema as ChildType);
+
+  return schema as ChildType;
+}
+
+/**
+ * Search for a "ZodDefault" in the Zod stack and return its value.
+ */
+export function getDefaultValueInZodStack(schema: ZodTypeAny): any {
+  if (!schema || isString(schema)) {
+    return;
+  }
+  const typedSchema = schema as unknown as ZodDefault<ZodNumber | ZodString>;
+
+  if (typedSchema._def.typeName === 'ZodDefault')
+    return typedSchema._def.defaultValue();
+
+  if ('innerType' in typedSchema._def) {
+    return getDefaultValueInZodStack(
+      typedSchema._def.innerType as unknown as ZodTypeAny,
+    );
+  }
+  if ('schema' in typedSchema._def) {
+    return getDefaultValueInZodStack(
+      (typedSchema._def as any).schema as ZodTypeAny,
+    );
+  }
+
+  return undefined;
+}
+
+export function isEventObjectLike(obj: any) {
+  if (!obj || !isObject(obj)) {
+    return false;
+  }
+  return Reflect.has(obj, 'target') && Reflect.has(obj, 'stopPropagation');
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/index.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/index.ts
new file mode 100644
index 0000000..f90e859
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/form-render/index.ts
@@ -0,0 +1,3 @@
+export { default as FormField } from './form-field.vue';
+export { default as FormLabel } from './form-label.vue';
+export { default as Form } from './form.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/index.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/index.ts
new file mode 100644
index 0000000..16b8b23
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/index.ts
@@ -0,0 +1,12 @@
+export { setupVbenForm } from './config';
+
+export type {
+  BaseFormComponentType,
+  ExtendedFormApi,
+  VbenFormProps,
+  FormSchema as VbenFormSchema,
+} from './types';
+
+export * from './use-vben-form';
+// export { default as VbenForm } from './vben-form.vue';
+export * as z from 'zod';
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/types.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/types.ts
new file mode 100644
index 0000000..6d70414
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/types.ts
@@ -0,0 +1,464 @@
+import type { FieldOptions, FormContext, GenericObject } from 'vee-validate';
+import type { ZodTypeAny } from 'zod';
+
+import type { Component, HtmlHTMLAttributes, Ref } from 'vue';
+
+import type { VbenButtonProps } from '@vben-core/shadcn-ui';
+import type { ClassType, MaybeComputedRef } from '@vben-core/typings';
+
+import type { FormApi } from './form-api';
+
+export type FormLayout = 'horizontal' | 'inline' | 'vertical';
+
+export type BaseFormComponentType =
+  | 'DefaultButton'
+  | 'PrimaryButton'
+  | 'VbenCheckbox'
+  | 'VbenInput'
+  | 'VbenInputPassword'
+  | 'VbenPinInput'
+  | 'VbenSelect'
+  | (Record<never, never> & string);
+
+type Breakpoints = '2xl:' | '3xl:' | '' | 'lg:' | 'md:' | 'sm:' | 'xl:';
+
+type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
+
+export type WrapperClassType =
+  | `${Breakpoints}grid-cols-${GridCols}`
+  | (Record<never, never> & string);
+
+export type FormItemClassType =
+  | `${Breakpoints}cols-end-${'auto' | GridCols}`
+  | `${Breakpoints}cols-span-${'auto' | 'full' | GridCols}`
+  | `${Breakpoints}cols-start-${'auto' | GridCols}`
+  | (Record<never, never> & string)
+  | WrapperClassType;
+
+export type FormFieldOptions = Partial<
+  FieldOptions & {
+    validateOnBlur?: boolean;
+    validateOnChange?: boolean;
+    validateOnInput?: boolean;
+    validateOnModelUpdate?: boolean;
+  }
+>;
+
+export interface FormShape {
+  /** 默认值 */
+  default?: any;
+  /** 字段名 */
+  fieldName: string;
+  /** 是否必填 */
+  required?: boolean;
+  rules?: ZodTypeAny;
+}
+
+export type MaybeComponentPropKey =
+  | 'options'
+  | 'placeholder'
+  | 'title'
+  | keyof HtmlHTMLAttributes
+  | (Record<never, never> & string);
+
+export type MaybeComponentProps = { [K in MaybeComponentPropKey]?: any };
+
+export type FormActions = FormContext<GenericObject>;
+
+export type CustomRenderType = (() => Component | string) | string;
+
+export type FormSchemaRuleType =
+  | 'required'
+  | 'selectRequired'
+  | null
+  | (Record<never, never> & string)
+  | ZodTypeAny;
+
+type FormItemDependenciesCondition<T = boolean | PromiseLike<boolean>> = (
+  value: Partial<Record<string, any>>,
+  actions: FormActions,
+) => T;
+
+type FormItemDependenciesConditionWithRules = (
+  value: Partial<Record<string, any>>,
+  actions: FormActions,
+) => FormSchemaRuleType | PromiseLike<FormSchemaRuleType>;
+
+type FormItemDependenciesConditionWithProps = (
+  value: Partial<Record<string, any>>,
+  actions: FormActions,
+) => MaybeComponentProps | PromiseLike<MaybeComponentProps>;
+
+export interface FormItemDependencies {
+  /**
+   * 组件参数
+   * @returns 组件参数
+   */
+  componentProps?: FormItemDependenciesConditionWithProps;
+  /**
+   * 是否禁用
+   * @returns 是否禁用
+   */
+  disabled?: boolean | FormItemDependenciesCondition;
+  /**
+   * 是否渲染（删除dom）
+   * @returns 是否渲染
+   */
+  if?: boolean | FormItemDependenciesCondition;
+  /**
+   * 是否必填
+   * @returns 是否必填
+   */
+  required?: FormItemDependenciesCondition;
+  /**
+   * 字段规则
+   */
+  rules?: FormItemDependenciesConditionWithRules;
+  /**
+   * 是否隐藏(Css)
+   * @returns 是否隐藏
+   */
+  show?: boolean | FormItemDependenciesCondition;
+  /**
+   * 任意触发都会执行
+   */
+  trigger?: FormItemDependenciesCondition<void>;
+  /**
+   * 触发字段
+   */
+  triggerFields: string[];
+}
+
+type ComponentProps =
+  | ((
+      value: Partial<Record<string, any>>,
+      actions: FormActions,
+    ) => MaybeComponentProps)
+  | MaybeComponentProps;
+
+export interface FormCommonConfig {
+  /**
+   * 在Label后显示一个冒号
+   */
+  colon?: boolean;
+  /**
+   * 所有表单项的props
+   */
+  componentProps?: ComponentProps;
+  /**
+   * 所有表单项的控件样式
+   */
+  controlClass?: string;
+  /**
+   * 所有表单项的禁用状态
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 是否禁用所有表单项的change事件监听
+   * @default true
+   */
+  disabledOnChangeListener?: boolean;
+  /**
+   * 是否禁用所有表单项的input事件监听
+   * @default true
+   */
+  disabledOnInputListener?: boolean;
+  /**
+   * 所有表单项的空状态值,默认都是undefined，naive-ui的空状态值是null
+   */
+  emptyStateValue?: null | undefined;
+  /**
+   * 所有表单项的控件样式
+   * @default {}
+   */
+  formFieldProps?: FormFieldOptions;
+  /**
+   * 所有表单项的栅格布局，支持函数形式
+   * @default ""
+   */
+  formItemClass?: (() => string) | string;
+  /**
+   * 隐藏所有表单项label
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * 是否隐藏必填标记
+   * @default false
+   */
+  hideRequiredMark?: boolean;
+  /**
+   * 所有表单项的label样式
+   * @default ""
+   */
+  labelClass?: string;
+  /**
+   * 所有表单项的label宽度
+   */
+  labelWidth?: number;
+  /**
+   * 所有表单项的model属性名
+   * @default "modelValue"
+   */
+  modelPropName?: string;
+  /**
+   * 所有表单项的wrapper样式
+   */
+  wrapperClass?: string;
+}
+
+type RenderComponentContentType = (
+  value: Partial<Record<string, any>>,
+  api: FormActions,
+) => Record<string, any>;
+
+export type HandleSubmitFn = (
+  values: Record<string, any>,
+) => Promise<void> | void;
+
+export type HandleResetFn = (
+  values: Record<string, any>,
+) => Promise<void> | void;
+
+export type FieldMappingTime = [
+  string,
+  [string, string],
+  (
+    | ((value: any, fieldName: string) => any)
+    | [string, string]
+    | null
+    | string
+  )?,
+][];
+
+export type ArrayToStringFields = Array<
+  | [string[], string?] // 嵌套数组格式，可选分隔符
+  | string // 单个字段，使用默认分隔符
+  | string[] // 简单数组格式，最后一个元素可以是分隔符
+>;
+
+export interface FormSchema<
+  T extends BaseFormComponentType = BaseFormComponentType,
+> extends FormCommonConfig {
+  /** 组件 */
+  component: Component | T;
+  /** 组件参数 */
+  componentProps?: ComponentProps;
+  /** 默认值 */
+  defaultValue?: any;
+  /** 依赖 */
+  dependencies?: FormItemDependencies;
+  /** 描述 */
+  description?: CustomRenderType;
+  /** 字段名 */
+  fieldName: string;
+  /** 帮助信息 */
+  help?: CustomRenderType;
+  /** 是否隐藏表单项 */
+  hide?: boolean;
+  /** 表单项 */
+  label?: CustomRenderType;
+  // 自定义组件内部渲染
+  renderComponentContent?: RenderComponentContentType;
+  /** 字段规则 */
+  rules?: FormSchemaRuleType;
+  /** 后缀 */
+  suffix?: CustomRenderType;
+}
+
+export interface FormFieldProps extends FormSchema {
+  required?: boolean;
+}
+
+export interface FormRenderProps<
+  T extends BaseFormComponentType = BaseFormComponentType,
+> {
+  /**
+   * 表单字段数组映射字符串配置 默认使用","
+   */
+  arrayToStringFields?: ArrayToStringFields;
+  /**
+   * 是否折叠，在showCollapseButton=true下生效
+   * true:折叠 false:展开
+   */
+  collapsed?: boolean;
+  /**
+   * 折叠时保持行数
+   * @default 1
+   */
+  collapsedRows?: number;
+  /**
+   * 是否触发resize事件
+   * @default false
+   */
+  collapseTriggerResize?: boolean;
+  /**
+   * 表单项通用后备配置，当子项目没配置时使用这里的配置，子项目配置优先级高于此配置
+   */
+  commonConfig?: FormCommonConfig;
+  /**
+   * 紧凑模式（移除表单每一项底部为校验信息预留的空间）
+   */
+  compact?: boolean;
+  /**
+   * 组件v-model事件绑定
+   */
+  componentBindEventMap?: Partial<Record<BaseFormComponentType, string>>;
+  /**
+   * 组件集合
+   */
+  componentMap: Record<BaseFormComponentType, Component>;
+  /**
+   * 表单字段映射到时间格式
+   */
+  fieldMappingTime?: FieldMappingTime;
+  /**
+   * 表单实例
+   */
+  form?: FormContext<GenericObject>;
+  /**
+   * 表单项布局
+   */
+  layout?: FormLayout;
+  /**
+   * 表单定义
+   */
+  schema?: FormSchema<T>[];
+
+  /**
+   * 是否显示展开/折叠
+   */
+  showCollapseButton?: boolean;
+  /**
+   * 格式化日期
+   */
+
+  /**
+   * 表单栅格布局
+   * @default "grid-cols-1"
+   */
+  wrapperClass?: WrapperClassType;
+}
+
+export interface ActionButtonOptions extends VbenButtonProps {
+  [key: string]: any;
+  content?: MaybeComputedRef<string>;
+  show?: boolean;
+}
+
+export interface VbenFormProps<
+  T extends BaseFormComponentType = BaseFormComponentType,
+> extends Omit<
+    FormRenderProps<T>,
+    'componentBindEventMap' | 'componentMap' | 'form'
+  > {
+  /**
+   * 操作按钮是否反转（提交按钮前置）
+   */
+  actionButtonsReverse?: boolean;
+  /**
+   * 操作按钮组的样式
+   * newLine: 在新行显示。rowEnd: 在行内显示，靠右对齐（默认）。inline: 使用grid默认样式
+   */
+  actionLayout?: 'inline' | 'newLine' | 'rowEnd';
+  /**
+   * 操作按钮组显示位置，默认靠右显示
+   */
+  actionPosition?: 'center' | 'left' | 'right';
+  /**
+   * 表单操作区域class
+   */
+  actionWrapperClass?: ClassType;
+  /**
+   * 表单字段数组映射字符串配置 默认使用","
+   */
+  arrayToStringFields?: ArrayToStringFields;
+
+  /**
+   * 表单字段映射
+   */
+  fieldMappingTime?: FieldMappingTime;
+  /**
+   * 表单收起展开状态变化回调
+   */
+  handleCollapsedChange?: (collapsed: boolean) => void;
+  /**
+   * 表单重置回调
+   */
+  handleReset?: HandleResetFn;
+  /**
+   * 表单提交回调
+   */
+  handleSubmit?: HandleSubmitFn;
+  /**
+   * 表单值变化回调
+   */
+  handleValuesChange?: (
+    values: Record<string, any>,
+    fieldsChanged: string[],
+  ) => void;
+  /**
+   * 重置按钮参数
+   */
+  resetButtonOptions?: ActionButtonOptions;
+
+  /**
+   * 验证失败时是否自动滚动到第一个错误字段
+   * @default false
+   */
+  scrollToFirstError?: boolean;
+
+  /**
+   * 是否显示默认操作按钮
+   * @default true
+   */
+  showDefaultActions?: boolean;
+
+  /**
+   * 提交按钮参数
+   */
+  submitButtonOptions?: ActionButtonOptions;
+
+  /**
+   * 是否在字段值改变时提交表单
+   * @default false
+   */
+  submitOnChange?: boolean;
+
+  /**
+   * 是否在回车时提交表单
+   * @default false
+   */
+  submitOnEnter?: boolean;
+}
+
+export type ExtendedFormApi = FormApi & {
+  useStore: <T = NoInfer<VbenFormProps>>(
+    selector?: (state: NoInfer<VbenFormProps>) => T,
+  ) => Readonly<Ref<T>>;
+};
+
+export interface VbenFormAdapterOptions<
+  T extends BaseFormComponentType = BaseFormComponentType,
+> {
+  config?: {
+    baseModelPropName?: string;
+    disabledOnChangeListener?: boolean;
+    disabledOnInputListener?: boolean;
+    emptyStateValue?: null | undefined;
+    modelPropNameMap?: Partial<Record<T, string>>;
+  };
+  defineRules?: {
+    required?: (
+      value: any,
+      params: any,
+      ctx: Record<string, any>,
+    ) => boolean | string;
+    selectRequired?: (
+      value: any,
+      params: any,
+      ctx: Record<string, any>,
+    ) => boolean | string;
+  };
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/use-form-context.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/use-form-context.ts
new file mode 100644
index 0000000..e95c87b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/use-form-context.ts
@@ -0,0 +1,109 @@
+import type { ZodRawShape } from 'zod';
+
+import type { ComputedRef } from 'vue';
+
+import type { ExtendedFormApi, FormActions, VbenFormProps } from './types';
+
+import { computed, unref, useSlots } from 'vue';
+
+import { createContext } from '@vben-core/shadcn-ui';
+import { isString, mergeWithArrayOverride, set } from '@vben-core/shared/utils';
+
+import { useForm } from 'vee-validate';
+import { object, ZodIntersection, ZodNumber, ZodObject, ZodString } from 'zod';
+import { getDefaultsForSchema } from 'zod-defaults';
+
+type ExtendFormProps = VbenFormProps & { formApi?: ExtendedFormApi };
+
+export const [injectFormProps, provideFormProps] =
+  createContext<[ComputedRef<ExtendFormProps> | ExtendFormProps, FormActions]>(
+    'VbenFormProps',
+  );
+
+export const [injectComponentRefMap, provideComponentRefMap] =
+  createContext<Map<string, unknown>>('ComponentRefMap');
+
+export function useFormInitial(
+  props: ComputedRef<VbenFormProps> | VbenFormProps,
+) {
+  const slots = useSlots();
+  const initialValues = generateInitialValues();
+
+  const form = useForm({
+    ...(Object.keys(initialValues)?.length ? { initialValues } : {}),
+  });
+
+  const delegatedSlots = computed(() => {
+    const resultSlots: string[] = [];
+
+    for (const key of Object.keys(slots)) {
+      if (key !== 'default') {
+        resultSlots.push(key);
+      }
+    }
+    return resultSlots;
+  });
+
+  function generateInitialValues() {
+    const initialValues: Record<string, any> = {};
+
+    const zodObject: ZodRawShape = {};
+    (unref(props).schema || []).forEach((item) => {
+      if (Reflect.has(item, 'defaultValue')) {
+        set(initialValues, item.fieldName, item.defaultValue);
+      } else if (item.rules && !isString(item.rules)) {
+        // 检查规则是否适合提取默认值
+        const customDefaultValue = getCustomDefaultValue(item.rules);
+        zodObject[item.fieldName] = item.rules;
+        if (customDefaultValue !== undefined) {
+          initialValues[item.fieldName] = customDefaultValue;
+        }
+      }
+    });
+
+    const schemaInitialValues = getDefaultsForSchema(object(zodObject));
+
+    const zodDefaults: Record<string, any> = {};
+    for (const key in schemaInitialValues) {
+      set(zodDefaults, key, schemaInitialValues[key]);
+    }
+    return mergeWithArrayOverride(initialValues, zodDefaults);
+  }
+  // 自定义默认值提取逻辑
+  function getCustomDefaultValue(rule: any): any {
+    if (rule instanceof ZodString) {
+      return ''; // 默认为空字符串
+    } else if (rule instanceof ZodNumber) {
+      return null; // 默认为 null（避免显示 0）
+    } else if (rule instanceof ZodObject) {
+      // 递归提取嵌套对象的默认值
+      const defaultValues: Record<string, any> = {};
+      for (const [key, valueSchema] of Object.entries(rule.shape)) {
+        defaultValues[key] = getCustomDefaultValue(valueSchema);
+      }
+      return defaultValues;
+    } else if (rule instanceof ZodIntersection) {
+      // 对于交集类型，从schema 提取默认值
+      const leftDefaultValue = getCustomDefaultValue(rule._def.left);
+      const rightDefaultValue = getCustomDefaultValue(rule._def.right);
+
+      // 如果左右两边都能提取默认值，合并它们
+      if (
+        typeof leftDefaultValue === 'object' &&
+        typeof rightDefaultValue === 'object'
+      ) {
+        return { ...leftDefaultValue, ...rightDefaultValue };
+      }
+
+      // 否则优先使用左边的默认值
+      return leftDefaultValue ?? rightDefaultValue;
+    } else {
+      return undefined; // 其他类型不提供默认值
+    }
+  }
+
+  return {
+    delegatedSlots,
+    form,
+  };
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/use-vben-form.ts b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/use-vben-form.ts
new file mode 100644
index 0000000..73f1eb0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/use-vben-form.ts
@@ -0,0 +1,50 @@
+import type {
+  BaseFormComponentType,
+  ExtendedFormApi,
+  VbenFormProps,
+} from './types';
+
+import { defineComponent, h, isReactive, onBeforeUnmount, watch } from 'vue';
+
+import { useStore } from '@vben-core/shared/store';
+
+import { FormApi } from './form-api';
+import VbenUseForm from './vben-use-form.vue';
+
+export function useVbenForm<
+  T extends BaseFormComponentType = BaseFormComponentType,
+>(options: VbenFormProps<T>) {
+  const IS_REACTIVE = isReactive(options);
+  const api = new FormApi(options);
+  const extendedApi: ExtendedFormApi = api as never;
+  extendedApi.useStore = (selector) => {
+    return useStore(api.store, selector);
+  };
+
+  const Form = defineComponent(
+    (props: VbenFormProps, { attrs, slots }) => {
+      onBeforeUnmount(() => {
+        api.unmount();
+      });
+      api.setState({ ...props, ...attrs });
+      return () =>
+        h(VbenUseForm, { ...props, ...attrs, formApi: extendedApi }, slots);
+    },
+    {
+      name: 'VbenUseForm',
+      inheritAttrs: false,
+    },
+  );
+  // Add reactivity support
+  if (IS_REACTIVE) {
+    watch(
+      () => options.schema,
+      () => {
+        api.setState({ schema: options.schema });
+      },
+      { immediate: true },
+    );
+  }
+
+  return [Form, extendedApi] as const;
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/vben-form.vue b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/vben-form.vue
new file mode 100644
index 0000000..1a237d7
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/vben-form.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { VbenFormProps } from './types';
+
+import { ref, watchEffect } from 'vue';
+
+import { useForwardPropsEmits } from '@vben-core/composables';
+
+import FormActions from './components/form-actions.vue';
+import {
+  COMPONENT_BIND_EVENT_MAP,
+  COMPONENT_MAP,
+  DEFAULT_FORM_COMMON_CONFIG,
+} from './config';
+import { Form } from './form-render';
+import { provideFormProps, useFormInitial } from './use-form-context';
+
+// 通过 extends 会导致热更新卡死
+interface Props extends VbenFormProps {}
+const props = withDefaults(defineProps<Props>(), {
+  actionWrapperClass: '',
+  collapsed: false,
+  collapsedRows: 1,
+  commonConfig: () => ({}),
+  handleReset: undefined,
+  handleSubmit: undefined,
+  layout: 'horizontal',
+  resetButtonOptions: () => ({}),
+  showCollapseButton: false,
+  showDefaultActions: true,
+  submitButtonOptions: () => ({}),
+  wrapperClass: 'grid-cols-1',
+});
+
+const forward = useForwardPropsEmits(props);
+
+const currentCollapsed = ref(false);
+
+const { delegatedSlots, form } = useFormInitial(props);
+
+provideFormProps([props, form]);
+
+const handleUpdateCollapsed = (value: boolean) => {
+  currentCollapsed.value = value;
+  // 触发收起展开状态变化回调
+  props.handleCollapsedChange?.(value);
+};
+
+watchEffect(() => {
+  currentCollapsed.value = props.collapsed;
+});
+</script>
+
+<template>
+  <Form
+    v-bind="forward"
+    :collapsed="currentCollapsed"
+    :component-bind-event-map="COMPONENT_BIND_EVENT_MAP"
+    :component-map="COMPONENT_MAP"
+    :form="form"
+    :global-common-config="DEFAULT_FORM_COMMON_CONFIG"
+  >
+    <template
+      v-for="slotName in delegatedSlots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps"></slot>
+    </template>
+    <template #default="slotProps">
+      <slot v-bind="slotProps">
+        <FormActions
+          v-if="showDefaultActions"
+          :is-expandable="slotProps.isExpandable"
+          :model-value="currentCollapsed"
+          @update:model-value="handleUpdateCollapsed"
+        />
+      </slot>
+    </template>
+  </Form>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
new file mode 100644
index 0000000..73199c6
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben-core/typings';
+
+import type { ExtendedFormApi, VbenFormProps } from './types';
+
+// import { toRaw, watch } from 'vue';
+import { nextTick, onMounted, watch } from 'vue';
+
+import { useForwardPriorityValues } from '@vben-core/composables';
+import { cloneDeep, get, isEqual, set } from '@vben-core/shared/utils';
+
+import { useDebounceFn } from '@vueuse/core';
+
+import FormActions from './components/form-actions.vue';
+import {
+  COMPONENT_BIND_EVENT_MAP,
+  COMPONENT_MAP,
+  DEFAULT_FORM_COMMON_CONFIG,
+} from './config';
+import { Form } from './form-render';
+import {
+  provideComponentRefMap,
+  provideFormProps,
+  useFormInitial,
+} from './use-form-context';
+// 通过 extends 会导致热更新卡死，所以重复写了一遍
+interface Props extends VbenFormProps {
+  formApi?: ExtendedFormApi;
+}
+
+const props = defineProps<Props>();
+
+const state = props.formApi?.useStore?.();
+
+const forward = useForwardPriorityValues(props, state);
+
+const componentRefMap = new Map<string, unknown>();
+
+const { delegatedSlots, form } = useFormInitial(forward);
+
+provideFormProps([forward, form]);
+provideComponentRefMap(componentRefMap);
+
+props.formApi?.mount?.(form, componentRefMap);
+
+const handleUpdateCollapsed = (value: boolean) => {
+  props.formApi?.setState({ collapsed: value });
+  // 触发收起展开状态变化回调
+  forward.value.handleCollapsedChange?.(value);
+};
+
+function handleKeyDownEnter(event: KeyboardEvent) {
+  if (!state?.value.submitOnEnter || !forward.value.formApi?.isMounted) {
+    return;
+  }
+  // 如果是 textarea 不阻止默认行为，否则会导致无法换行。
+  // 跳过 textarea 的回车提交处理
+  if (event.target instanceof HTMLTextAreaElement) {
+    return;
+  }
+  event.preventDefault();
+
+  forward.value.formApi?.validateAndSubmitForm();
+}
+
+const handleValuesChangeDebounced = useDebounceFn(async () => {
+  state?.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm();
+}, 300);
+
+const valuesCache: Recordable<any> = {};
+
+onMounted(async () => {
+  // 只在挂载后开始监听，form.values会有一个初始化的过程
+  await nextTick();
+  watch(
+    () => form.values,
+    async (newVal) => {
+      if (forward.value.handleValuesChange) {
+        const fields = state?.value.schema?.map((item) => {
+          return item.fieldName;
+        });
+
+        if (fields && fields.length > 0) {
+          const changedFields: string[] = [];
+          fields.forEach((field) => {
+            const newFieldValue = get(newVal, field);
+            const oldFieldValue = get(valuesCache, field);
+            if (!isEqual(newFieldValue, oldFieldValue)) {
+              changedFields.push(field);
+              set(valuesCache, field, newFieldValue);
+            }
+          });
+
+          if (changedFields.length > 0) {
+            // 调用handleValuesChange回调，传入所有表单值的深拷贝和变更的字段列表
+            const values = await forward.value.formApi?.getValues();
+            forward.value.handleValuesChange(
+              cloneDeep(values ?? {}) as Record<string, any>,
+              changedFields,
+            );
+          }
+        }
+      }
+      handleValuesChangeDebounced();
+    },
+    { deep: true },
+  );
+});
+</script>
+
+<template>
+  <Form
+    @keydown.enter="handleKeyDownEnter"
+    v-bind="forward"
+    :collapsed="state?.collapsed"
+    :component-bind-event-map="COMPONENT_BIND_EVENT_MAP"
+    :component-map="COMPONENT_MAP"
+    :form="form"
+    :global-common-config="DEFAULT_FORM_COMMON_CONFIG"
+  >
+    <template
+      v-for="slotName in delegatedSlots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps"></slot>
+    </template>
+    <template #default="slotProps">
+      <slot v-bind="slotProps">
+        <FormActions
+          v-if="forward.showDefaultActions"
+          :is-expandable="slotProps.isExpandable"
+          :model-value="state?.collapsed"
+          @update:model-value="handleUpdateCollapsed"
+        >
+          <template #reset-before="resetSlotProps">
+            <slot name="reset-before" v-bind="resetSlotProps"></slot>
+          </template>
+          <template #submit-before="submitSlotProps">
+            <slot name="submit-before" v-bind="submitSlotProps"></slot>
+          </template>
+          <template #expand-before="expandBeforeSlotProps">
+            <slot name="expand-before" v-bind="expandBeforeSlotProps"></slot>
+          </template>
+          <template #expand-after="expandAfterSlotProps">
+            <slot name="expand-after" v-bind="expandAfterSlotProps"></slot>
+          </template>
+        </FormActions>
+      </slot>
+    </template>
+  </Form>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/tailwind.config.mjs b/admin-ui/vue/packages/@core/ui-kit/form-ui/tailwind.config.mjs
new file mode 100644
index 0000000..f17f556
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/tailwind.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';
diff --git a/admin-ui/vue/packages/@core/ui-kit/form-ui/tsconfig.json b/admin-ui/vue/packages/@core/ui-kit/form-ui/tsconfig.json
new file mode 100644
index 0000000..bbb8050
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/form-ui/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src", "__tests__"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/build.config.ts b/admin-ui/vue/packages/@core/ui-kit/layout-ui/build.config.ts
new file mode 100644
index 0000000..18eaa60
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/build.config.ts
@@ -0,0 +1,21 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    {
+      builder: 'mkdist',
+      input: './src',
+      loaders: ['vue'],
+      pattern: ['**/*.vue'],
+    },
+    {
+      builder: 'mkdist',
+      format: 'esm',
+      input: './src',
+      loaders: ['js'],
+      pattern: ['**/*.ts'],
+    },
+  ],
+});
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/package.json b/admin-ui/vue/packages/@core/ui-kit/layout-ui/package.json
new file mode 100644
index 0000000..f715990
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@vben-core/layout-ui",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/uikit/layout-ui"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@vben-core/composables": "workspace:*",
+    "@vben-core/icons": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
+    "@vben-core/typings": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "vue": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/postcss.config.mjs b/admin-ui/vue/packages/@core/ui-kit/layout-ui/postcss.config.mjs
new file mode 100644
index 0000000..3d80704
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/index.ts b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/index.ts
new file mode 100644
index 0000000..f17826d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/index.ts
@@ -0,0 +1,5 @@
+export { default as LayoutContent } from './layout-content.vue';
+export { default as LayoutFooter } from './layout-footer.vue';
+export { default as LayoutHeader } from './layout-header.vue';
+export { default as LayoutSidebar } from './layout-sidebar.vue';
+export { default as LayoutTabbar } from './layout-tabbar.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
new file mode 100644
index 0000000..1be7780
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import type { ContentCompactType } from '@vben-core/typings';
+
+import { computed } from 'vue';
+
+import { useLayoutContentStyle } from '@vben-core/composables';
+import { Slot } from '@vben-core/shadcn-ui';
+
+interface Props {
+  /**
+   * 内容区域定宽
+   */
+  contentCompact: ContentCompactType;
+  /**
+   * 定宽布局宽度
+   */
+  contentCompactWidth: number;
+  padding: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  paddingRight: number;
+  paddingTop: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const { contentElement, overlayStyle } = useLayoutContentStyle();
+
+const style = computed((): CSSProperties => {
+  const {
+    contentCompact,
+    padding,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+  } = props;
+
+  const compactStyle: CSSProperties =
+    contentCompact === 'compact'
+      ? { margin: '0 auto', width: `${props.contentCompactWidth}px` }
+      : {};
+  return {
+    ...compactStyle,
+    flex: 1,
+    padding: `${padding}px`,
+    paddingBottom: `${paddingBottom}px`,
+    paddingLeft: `${paddingLeft}px`,
+    paddingRight: `${paddingRight}px`,
+    paddingTop: `${paddingTop}px`,
+  };
+});
+</script>
+
+<template>
+  <main ref="contentElement" :style="style" class="relative bg-background-deep">
+    <Slot :style="overlayStyle">
+      <slot name="overlay"></slot>
+    </Slot>
+    <slot></slot>
+  </main>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
new file mode 100644
index 0000000..3793f92
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed } from 'vue';
+
+interface Props {
+  /**
+   * 是否固定在底部
+   */
+  fixed?: boolean;
+  height: number;
+  /**
+   * 是否显示
+   * @default true
+   */
+  show?: boolean;
+  width: string;
+  zIndex: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  show: true,
+});
+
+const style = computed((): CSSProperties => {
+  const { fixed, height, show, width, zIndex } = props;
+  return {
+    height: `${height}px`,
+    marginBottom: show ? '0' : `-${height}px`,
+    position: fixed ? 'fixed' : 'static',
+    width,
+    zIndex,
+  };
+});
+</script>
+
+<template>
+  <footer
+    :style="style"
+    class="bottom-0 w-full bg-background-deep transition-all duration-200"
+  >
+    <slot></slot>
+  </footer>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
new file mode 100644
index 0000000..fba07d4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed, useSlots } from 'vue';
+
+interface Props {
+  /**
+   * 横屏
+   */
+  fullWidth: boolean;
+  /**
+   * 高度
+   */
+  height: number;
+  /**
+   * 是否移动端
+   */
+  isMobile: boolean;
+  /**
+   * 是否显示
+   */
+  show: boolean;
+  /**
+   * 侧边菜单宽度
+   */
+  sidebarWidth: number;
+  /**
+   * 主题
+   */
+  theme: string | undefined;
+  /**
+   * 宽度
+   */
+  width: string;
+  /**
+   * zIndex
+   */
+  zIndex: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const slots = useSlots();
+
+const style = computed((): CSSProperties => {
+  const { fullWidth, height, show } = props;
+  const right = !show || !fullWidth ? undefined : 0;
+
+  return {
+    height: `${height}px`,
+    marginTop: show ? 0 : `-${height}px`,
+    right,
+  };
+});
+
+const logoStyle = computed((): CSSProperties => {
+  return {
+    minWidth: `${props.isMobile ? 40 : props.sidebarWidth}px`,
+  };
+});
+</script>
+
+<template>
+  <header
+    :class="theme"
+    :style="style"
+    class="top-0 flex w-full flex-[0_0_auto] items-center border-b border-border bg-header pl-2 transition-[margin-top] duration-200"
+  >
+    <div v-if="slots.logo" :style="logoStyle">
+      <slot name="logo"></slot>
+    </div>
+
+    <slot name="toggle-button"> </slot>
+
+    <slot></slot>
+  </header>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
new file mode 100644
index 0000000..9a8a608
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -0,0 +1,322 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed, shallowRef, useSlots, watchEffect } from 'vue';
+
+import { VbenScrollbar } from '@vben-core/shadcn-ui';
+
+import { useScrollLock } from '@vueuse/core';
+
+import { SidebarCollapseButton, SidebarFixedButton } from './widgets';
+
+interface Props {
+  /**
+   * 折叠区域高度
+   * @default 42
+   */
+  collapseHeight?: number;
+  /**
+   * 折叠宽度
+   * @default 48
+   */
+  collapseWidth?: number;
+  /**
+   * 隐藏的dom是否可见
+   * @default true
+   */
+  domVisible?: boolean;
+  /**
+   * 扩展区域宽度
+   */
+  extraWidth: number;
+  /**
+   * 固定扩展区域
+   * @default false
+   */
+  fixedExtra?: boolean;
+  /**
+   * 头部高度
+   */
+  headerHeight: number;
+  /**
+   * 是否侧边混合模式
+   * @default false
+   */
+  isSidebarMixed?: boolean;
+  /**
+   * 顶部margin
+   * @default 60
+   */
+  marginTop?: number;
+  /**
+   * 混合菜单宽度
+   * @default 80
+   */
+  mixedWidth?: number;
+  /**
+   * 顶部padding
+   * @default 60
+   */
+  paddingTop?: number;
+  /**
+   * 是否显示
+   * @default true
+   */
+  show?: boolean;
+  /**
+   * 显示折叠按钮
+   * @default true
+   */
+  showCollapseButton?: boolean;
+  /**
+   * 显示固定按钮
+   * @default true
+   */
+  showFixedButton?: boolean;
+  /**
+   * 主题
+   */
+  theme: string;
+
+  /**
+   * 宽度
+   */
+  width: number;
+  /**
+   * zIndex
+   * @default 0
+   */
+  zIndex?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  collapseHeight: 42,
+  collapseWidth: 48,
+  domVisible: true,
+  fixedExtra: false,
+  isSidebarMixed: false,
+  marginTop: 0,
+  mixedWidth: 70,
+  paddingTop: 0,
+  show: true,
+  showCollapseButton: true,
+  showFixedButton: true,
+  zIndex: 0,
+});
+
+const emit = defineEmits<{ leave: [] }>();
+const collapse = defineModel<boolean>('collapse');
+const extraCollapse = defineModel<boolean>('extraCollapse');
+const expandOnHovering = defineModel<boolean>('expandOnHovering');
+const expandOnHover = defineModel<boolean>('expandOnHover');
+const extraVisible = defineModel<boolean>('extraVisible');
+
+const isLocked = useScrollLock(document.body);
+const slots = useSlots();
+
+const asideRef = shallowRef<HTMLDivElement | null>();
+
+const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true));
+
+const style = computed((): CSSProperties => {
+  const { isSidebarMixed, marginTop, paddingTop, zIndex } = props;
+
+  return {
+    '--scroll-shadow': 'var(--sidebar)',
+    ...calcMenuWidthStyle(false),
+    height: `calc(100% - ${marginTop}px)`,
+    marginTop: `${marginTop}px`,
+    paddingTop: `${paddingTop}px`,
+    zIndex,
+    ...(isSidebarMixed && extraVisible.value ? { transition: 'none' } : {}),
+  };
+});
+
+const extraStyle = computed((): CSSProperties => {
+  const { extraWidth, show, width, zIndex } = props;
+
+  return {
+    left: `${width}px`,
+    width: extraVisible.value && show ? `${extraWidth}px` : 0,
+    zIndex,
+  };
+});
+
+const extraTitleStyle = computed((): CSSProperties => {
+  const { headerHeight } = props;
+
+  return {
+    height: `${headerHeight - 1}px`,
+  };
+});
+
+const contentWidthStyle = computed((): CSSProperties => {
+  const { collapseWidth, fixedExtra, isSidebarMixed, mixedWidth } = props;
+  if (isSidebarMixed && fixedExtra) {
+    return { width: `${collapse.value ? collapseWidth : mixedWidth}px` };
+  }
+  return {};
+});
+
+const contentStyle = computed((): CSSProperties => {
+  const { collapseHeight, headerHeight } = props;
+
+  return {
+    height: `calc(100% - ${headerHeight + collapseHeight}px)`,
+    paddingTop: '8px',
+    ...contentWidthStyle.value,
+  };
+});
+
+const headerStyle = computed((): CSSProperties => {
+  const { headerHeight, isSidebarMixed } = props;
+
+  return {
+    ...(isSidebarMixed ? { display: 'flex', justifyContent: 'center' } : {}),
+    height: `${headerHeight - 1}px`,
+    ...contentWidthStyle.value,
+  };
+});
+
+const extraContentStyle = computed((): CSSProperties => {
+  const { collapseHeight, headerHeight } = props;
+  return {
+    height: `calc(100% - ${headerHeight + collapseHeight}px)`,
+  };
+});
+
+const collapseStyle = computed((): CSSProperties => {
+  return {
+    height: `${props.collapseHeight}px`,
+  };
+});
+
+watchEffect(() => {
+  extraVisible.value = props.fixedExtra ? true : extraVisible.value;
+});
+
+function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
+  const { extraWidth, fixedExtra, isSidebarMixed, show, width } = props;
+
+  let widthValue =
+    width === 0
+      ? '0px'
+      : `${width + (isSidebarMixed && fixedExtra && extraVisible.value ? extraWidth : 0)}px`;
+
+  const { collapseWidth } = props;
+
+  if (isHiddenDom && expandOnHovering.value && !expandOnHover.value) {
+    widthValue = `${collapseWidth}px`;
+  }
+
+  return {
+    ...(widthValue === '0px' ? { overflow: 'hidden' } : {}),
+    flex: `0 0 ${widthValue}`,
+    marginLeft: show ? 0 : `-${widthValue}`,
+    maxWidth: widthValue,
+    minWidth: widthValue,
+    width: widthValue,
+  };
+}
+
+function handleMouseenter(e: MouseEvent) {
+  if (e?.offsetX < 10) {
+    return;
+  }
+
+  // 未开启和未折叠状态不生效
+  if (expandOnHover.value) {
+    return;
+  }
+  if (!expandOnHovering.value) {
+    collapse.value = false;
+  }
+  if (props.isSidebarMixed) {
+    isLocked.value = true;
+  }
+  expandOnHovering.value = true;
+}
+
+function handleMouseleave() {
+  emit('leave');
+  if (props.isSidebarMixed) {
+    isLocked.value = false;
+  }
+  if (expandOnHover.value) {
+    return;
+  }
+
+  expandOnHovering.value = false;
+  collapse.value = true;
+  extraVisible.value = false;
+}
+</script>
+
+<template>
+  <div
+    v-if="domVisible"
+    :class="theme"
+    :style="hiddenSideStyle"
+    class="h-full transition-all duration-150"
+  ></div>
+  <aside
+    :class="[
+      theme,
+      {
+        'bg-sidebar-deep': isSidebarMixed,
+        'border-r border-border bg-sidebar': !isSidebarMixed,
+      },
+    ]"
+    :style="style"
+    class="fixed left-0 top-0 h-full transition-all duration-150"
+    @mouseenter="handleMouseenter"
+    @mouseleave="handleMouseleave"
+  >
+    <SidebarFixedButton
+      v-if="!collapse && !isSidebarMixed && showFixedButton"
+      v-model:expand-on-hover="expandOnHover"
+    />
+    <div v-if="slots.logo" :style="headerStyle">
+      <slot name="logo"></slot>
+    </div>
+    <VbenScrollbar :style="contentStyle" shadow shadow-border>
+      <slot></slot>
+    </VbenScrollbar>
+
+    <div :style="collapseStyle"></div>
+    <SidebarCollapseButton
+      v-if="showCollapseButton && !isSidebarMixed"
+      v-model:collapsed="collapse"
+    />
+    <div
+      v-if="isSidebarMixed"
+      ref="asideRef"
+      :class="{
+        'border-l': extraVisible,
+      }"
+      :style="extraStyle"
+      class="fixed top-0 h-full overflow-hidden border-r border-border bg-sidebar transition-all duration-200"
+    >
+      <SidebarCollapseButton
+        v-if="isSidebarMixed && expandOnHover"
+        v-model:collapsed="extraCollapse"
+      />
+
+      <SidebarFixedButton
+        v-if="!extraCollapse"
+        v-model:expand-on-hover="expandOnHover"
+      />
+      <div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
+        <slot name="extra-title"></slot>
+      </div>
+      <VbenScrollbar
+        :style="extraContentStyle"
+        class="border-border py-2"
+        shadow
+        shadow-border
+      >
+        <slot name="extra"></slot>
+      </VbenScrollbar>
+    </div>
+  </aside>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
new file mode 100644
index 0000000..148600e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed } from 'vue';
+
+interface Props {
+  /**
+   * 高度
+   */
+  height: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const style = computed((): CSSProperties => {
+  const { height } = props;
+  return {
+    height: `${height}px`,
+  };
+});
+</script>
+
+<template>
+  <section
+    :style="style"
+    class="flex w-full border-b border-border bg-background transition-all"
+  >
+    <slot></slot>
+  </section>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/widgets/index.ts b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/widgets/index.ts
new file mode 100644
index 0000000..8dfbe6c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/widgets/index.ts
@@ -0,0 +1,2 @@
+export { default as SidebarCollapseButton } from './sidebar-collapse-button.vue';
+export { default as SidebarFixedButton } from './sidebar-fixed-button.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
new file mode 100644
index 0000000..fa4abe9
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ChevronsLeft, ChevronsRight } from '@vben-core/icons';
+
+const collapsed = defineModel<boolean>('collapsed');
+
+function handleCollapsed() {
+  collapsed.value = !collapsed.value;
+}
+</script>
+
+<template>
+  <div
+    class="flex-center absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm bg-accent p-1 text-foreground/60 hover:bg-accent-hover hover:text-foreground"
+    @click.stop="handleCollapsed"
+  >
+    <ChevronsRight v-if="collapsed" class="size-4" />
+    <ChevronsLeft v-else class="size-4" />
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
new file mode 100644
index 0000000..5cfd89b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Pin, PinOff } from '@vben-core/icons';
+
+const expandOnHover = defineModel<boolean>('expandOnHover');
+
+function toggleFixed() {
+  expandOnHover.value = !expandOnHover.value;
+}
+</script>
+
+<template>
+  <div
+    class="flex-center absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm bg-accent p-[5px] text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground"
+    @click="toggleFixed"
+  >
+    <PinOff v-if="!expandOnHover" class="size-3.5" />
+    <Pin v-else class="size-3.5" />
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts
new file mode 100644
index 0000000..2f2b82b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts
@@ -0,0 +1,53 @@
+import type { LayoutType } from '@vben-core/typings';
+
+import type { VbenLayoutProps } from '../vben-layout';
+
+import { computed } from 'vue';
+
+export function useLayout(props: VbenLayoutProps) {
+  const currentLayout = computed(() =>
+    props.isMobile ? 'sidebar-nav' : (props.layout as LayoutType),
+  );
+
+  /**
+   * 是否全屏显示content，不需要侧边、底部、顶部、tab区域
+   */
+  const isFullContent = computed(() => currentLayout.value === 'full-content');
+
+  /**
+   * 是否侧边混合模式
+   */
+  const isSidebarMixedNav = computed(
+    () => currentLayout.value === 'sidebar-mixed-nav',
+  );
+
+  /**
+   * 是否为头部导航模式
+   */
+  const isHeaderNav = computed(() => currentLayout.value === 'header-nav');
+
+  /**
+   * 是否为混合导航模式
+   */
+  const isMixedNav = computed(
+    () =>
+      currentLayout.value === 'mixed-nav' ||
+      currentLayout.value === 'header-sidebar-nav',
+  );
+
+  /**
+   * 是否为头部混合模式
+   */
+  const isHeaderMixedNav = computed(
+    () => currentLayout.value === 'header-mixed-nav',
+  );
+
+  return {
+    currentLayout,
+    isFullContent,
+    isHeaderMixedNav,
+    isHeaderNav,
+    isMixedNav,
+    isSidebarMixedNav,
+  };
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/index.ts b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/index.ts
new file mode 100644
index 0000000..ca8c8a7
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/index.ts
@@ -0,0 +1,2 @@
+export type * from './vben-layout';
+export { default as VbenAdminLayout } from './vben-layout.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/vben-layout.ts b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
new file mode 100644
index 0000000..9b77ba9
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
@@ -0,0 +1,175 @@
+import type {
+  ContentCompactType,
+  LayoutHeaderModeType,
+  LayoutType,
+  ThemeModeType,
+} from '@vben-core/typings';
+
+interface VbenLayoutProps {
+  /**
+   * 内容区域定宽
+   * @default 'wide'
+   */
+  contentCompact?: ContentCompactType;
+  /**
+   * 定宽布局宽度
+   * @default 1200
+   */
+  contentCompactWidth?: number;
+  /**
+   * padding
+   * @default 16
+   */
+  contentPadding?: number;
+  /**
+   * paddingBottom
+   * @default 16
+   */
+  contentPaddingBottom?: number;
+  /**
+   * paddingLeft
+   * @default 16
+   */
+  contentPaddingLeft?: number;
+  /**
+   * paddingRight
+   * @default 16
+   */
+  contentPaddingRight?: number;
+  /**
+   * paddingTop
+   * @default 16
+   */
+  contentPaddingTop?: number;
+  /**
+   * footer 是否可见
+   * @default false
+   */
+  footerEnable?: boolean;
+  /**
+   * footer 是否固定
+   * @default true
+   */
+  footerFixed?: boolean;
+  /**
+   * footer 高度
+   * @default 32
+   */
+  footerHeight?: number;
+
+  /**
+   * header高度
+   * @default 48
+   */
+  headerHeight?: number;
+  /**
+   * 顶栏是否隐藏
+   * @default false
+   */
+  headerHidden?: boolean;
+  /**
+   * header 显示模式
+   * @default 'fixed'
+   */
+  headerMode?: LayoutHeaderModeType;
+  /**
+   * header 顶栏主题
+   */
+  headerTheme?: ThemeModeType;
+  /**
+   * 是否显示header切换侧边栏按钮
+   * @default
+   */
+  headerToggleSidebarButton?: boolean;
+  /**
+   * header是否显示
+   * @default true
+   */
+  headerVisible?: boolean;
+  /**
+   * 是否移动端显示
+   * @default false
+   */
+  isMobile?: boolean;
+  /**
+   * 布局方式
+   * sidebar-nav 侧边菜单布局
+   * header-nav 顶部菜单布局
+   * mixed-nav 侧边&顶部菜单布局
+   * sidebar-mixed-nav 侧边混合菜单布局
+   * full-content 全屏内容布局
+   * @default sidebar-nav
+   */
+  layout?: LayoutType;
+  /**
+   * 侧边菜单折叠状态
+   * @default false
+   */
+  sidebarCollapse?: boolean;
+  /**
+   * 侧边菜单折叠按钮
+   * @default true
+   */
+  sidebarCollapsedButton?: boolean;
+  /**
+   * 侧边菜单是否折叠时，是否显示title
+   * @default true
+   */
+  sidebarCollapseShowTitle?: boolean;
+  /**
+   * 侧边栏是否可见
+   * @default true
+   */
+  sidebarEnable?: boolean;
+  /**
+   * 侧边菜单折叠额外宽度
+   * @default 48
+   */
+  sidebarExtraCollapsedWidth?: number;
+  /**
+   * 侧边菜单折叠按钮是否固定
+   * @default true
+   */
+  sidebarFixedButton?: boolean;
+  /**
+   * 侧边栏是否隐藏
+   * @default false
+   */
+  sidebarHidden?: boolean;
+  /**
+   * 混合侧边栏宽度
+   * @default 80
+   */
+  sidebarMixedWidth?: number;
+  /**
+   * 侧边栏
+   * @default dark
+   */
+  sidebarTheme?: ThemeModeType;
+  /**
+   * 侧边栏宽度
+   * @default 210
+   */
+  sidebarWidth?: number;
+  /**
+   *  侧边菜单折叠宽度
+   * @default 48
+   */
+  sideCollapseWidth?: number;
+  /**
+   * tab是否可见
+   * @default true
+   */
+  tabbarEnable?: boolean;
+  /**
+   * tab高度
+   * @default 30
+   */
+  tabbarHeight?: number;
+  /**
+   * zIndex
+   * @default 100
+   */
+  zIndex?: number;
+}
+export type { VbenLayoutProps };
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
new file mode 100644
index 0000000..bf7d775
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -0,0 +1,617 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import type { VbenLayoutProps } from './vben-layout';
+
+import { computed, ref, watch } from 'vue';
+
+import {
+  SCROLL_FIXED_CLASS,
+  useLayoutFooterStyle,
+  useLayoutHeaderStyle,
+} from '@vben-core/composables';
+import { IconifyIcon } from '@vben-core/icons';
+import { VbenIconButton } from '@vben-core/shadcn-ui';
+import { ELEMENT_ID_MAIN_CONTENT } from '@vben-core/shared/constants';
+
+import { useMouse, useScroll, useThrottleFn } from '@vueuse/core';
+
+import {
+  LayoutContent,
+  LayoutFooter,
+  LayoutHeader,
+  LayoutSidebar,
+  LayoutTabbar,
+} from './components';
+import { useLayout } from './hooks/use-layout';
+
+interface Props extends VbenLayoutProps {}
+
+defineOptions({
+  name: 'VbenLayout',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  contentCompact: 'wide',
+  contentCompactWidth: 1200,
+  contentPadding: 0,
+  contentPaddingBottom: 0,
+  contentPaddingLeft: 0,
+  contentPaddingRight: 0,
+  contentPaddingTop: 0,
+  footerEnable: false,
+  footerFixed: true,
+  footerHeight: 32,
+  headerHeight: 50,
+  headerHidden: false,
+  headerMode: 'fixed',
+  headerToggleSidebarButton: true,
+  headerVisible: true,
+  isMobile: false,
+  layout: 'sidebar-nav',
+  sidebarCollapsedButton: true,
+  sidebarCollapseShowTitle: false,
+  sidebarExtraCollapsedWidth: 60,
+  sidebarFixedButton: true,
+  sidebarHidden: false,
+  sidebarMixedWidth: 80,
+  sidebarTheme: 'dark',
+  sidebarWidth: 180,
+  sideCollapseWidth: 60,
+  tabbarEnable: true,
+  tabbarHeight: 40,
+  zIndex: 200,
+});
+
+const emit = defineEmits<{ sideMouseLeave: []; toggleSidebar: [] }>();
+const sidebarCollapse = defineModel<boolean>('sidebarCollapse', {
+  default: false,
+});
+const sidebarExtraVisible = defineModel<boolean>('sidebarExtraVisible');
+const sidebarExtraCollapse = defineModel<boolean>('sidebarExtraCollapse', {
+  default: false,
+});
+const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover', {
+  default: false,
+});
+const sidebarEnable = defineModel<boolean>('sidebarEnable', { default: true });
+
+// side是否处于hover状态展开菜单中
+const sidebarExpandOnHovering = ref(false);
+const headerIsHidden = ref(false);
+const contentRef = ref();
+
+const {
+  arrivedState,
+  directions,
+  isScrolling,
+  y: scrollY,
+} = useScroll(document);
+
+const { setLayoutHeaderHeight } = useLayoutHeaderStyle();
+const { setLayoutFooterHeight } = useLayoutFooterStyle();
+
+const { y: mouseY } = useMouse({ target: contentRef, type: 'client' });
+
+const {
+  currentLayout,
+  isFullContent,
+  isHeaderMixedNav,
+  isHeaderNav,
+  isMixedNav,
+  isSidebarMixedNav,
+} = useLayout(props);
+
+/**
+ * 顶栏是否自动隐藏
+ */
+const isHeaderAutoMode = computed(() => props.headerMode === 'auto');
+
+const headerWrapperHeight = computed(() => {
+  let height = 0;
+  if (props.headerVisible && !props.headerHidden) {
+    height += props.headerHeight;
+  }
+  if (props.tabbarEnable) {
+    height += props.tabbarHeight;
+  }
+  return height;
+});
+
+const getSideCollapseWidth = computed(() => {
+  const { sidebarCollapseShowTitle, sidebarMixedWidth, sideCollapseWidth } =
+    props;
+
+  return sidebarCollapseShowTitle ||
+    isSidebarMixedNav.value ||
+    isHeaderMixedNav.value
+    ? sidebarMixedWidth
+    : sideCollapseWidth;
+});
+
+/**
+ * 动态获取侧边区域是否可见
+ */
+const sidebarEnableState = computed(() => {
+  return !isHeaderNav.value && sidebarEnable.value;
+});
+
+/**
+ * 侧边区域离顶部高度
+ */
+const sidebarMarginTop = computed(() => {
+  const { headerHeight, isMobile } = props;
+  return isMixedNav.value && !isMobile ? headerHeight : 0;
+});
+
+/**
+ * 动态获取侧边宽度
+ */
+const getSidebarWidth = computed(() => {
+  const { isMobile, sidebarHidden, sidebarMixedWidth, sidebarWidth } = props;
+  let width = 0;
+
+  if (sidebarHidden) {
+    return width;
+  }
+
+  if (
+    !sidebarEnableState.value ||
+    (sidebarHidden &&
+      !isSidebarMixedNav.value &&
+      !isMixedNav.value &&
+      !isHeaderMixedNav.value)
+  ) {
+    return width;
+  }
+
+  if ((isHeaderMixedNav.value || isSidebarMixedNav.value) && !isMobile) {
+    width = sidebarMixedWidth;
+  } else if (sidebarCollapse.value) {
+    width = isMobile ? 0 : getSideCollapseWidth.value;
+  } else {
+    width = sidebarWidth;
+  }
+  return width;
+});
+
+/**
+ * 获取扩展区域宽度
+ */
+const sidebarExtraWidth = computed(() => {
+  const { sidebarExtraCollapsedWidth, sidebarWidth } = props;
+
+  return sidebarExtraCollapse.value ? sidebarExtraCollapsedWidth : sidebarWidth;
+});
+
+/**
+ * 是否侧边栏模式，包含混合侧边
+ */
+const isSideMode = computed(
+  () =>
+    currentLayout.value === 'mixed-nav' ||
+    currentLayout.value === 'sidebar-mixed-nav' ||
+    currentLayout.value === 'sidebar-nav' ||
+    currentLayout.value === 'header-mixed-nav' ||
+    currentLayout.value === 'header-sidebar-nav',
+);
+
+/**
+ * header fixed值
+ */
+const headerFixed = computed(() => {
+  const { headerMode } = props;
+  return (
+    isMixedNav.value ||
+    headerMode === 'fixed' ||
+    headerMode === 'auto-scroll' ||
+    headerMode === 'auto'
+  );
+});
+
+const showSidebar = computed(() => {
+  return isSideMode.value && sidebarEnable.value && !props.sidebarHidden;
+});
+
+/**
+ * 遮罩可见性
+ */
+const maskVisible = computed(() => !sidebarCollapse.value && props.isMobile);
+
+const mainStyle = computed(() => {
+  let width = '100%';
+  let sidebarAndExtraWidth = 'unset';
+  if (
+    headerFixed.value &&
+    currentLayout.value !== 'header-nav' &&
+    currentLayout.value !== 'mixed-nav' &&
+    currentLayout.value !== 'header-sidebar-nav' &&
+    showSidebar.value &&
+    !props.isMobile
+  ) {
+    // fixed模式下生效
+    const isSideNavEffective =
+      (isSidebarMixedNav.value || isHeaderMixedNav.value) &&
+      sidebarExpandOnHover.value &&
+      sidebarExtraVisible.value;
+
+    if (isSideNavEffective) {
+      const sideCollapseWidth = sidebarCollapse.value
+        ? getSideCollapseWidth.value
+        : props.sidebarMixedWidth;
+      const sideWidth = sidebarExtraCollapse.value
+        ? props.sidebarExtraCollapsedWidth
+        : props.sidebarWidth;
+
+      // 100% - 侧边菜单混合宽度 - 菜单宽度
+      sidebarAndExtraWidth = `${sideCollapseWidth + sideWidth}px`;
+      width = `calc(100% - ${sidebarAndExtraWidth})`;
+    } else {
+      sidebarAndExtraWidth =
+        sidebarExpandOnHovering.value && !sidebarExpandOnHover.value
+          ? `${getSideCollapseWidth.value}px`
+          : `${getSidebarWidth.value}px`;
+      width = `calc(100% - ${sidebarAndExtraWidth})`;
+    }
+  }
+  return {
+    sidebarAndExtraWidth,
+    width,
+  };
+});
+
+// 计算 tabbar 的样式
+const tabbarStyle = computed((): CSSProperties => {
+  let width = '';
+  let marginLeft = 0;
+
+  // 如果不是混合导航，tabbar 的宽度为 100%
+  if (!isMixedNav.value || props.sidebarHidden) {
+    width = '100%';
+  } else if (sidebarEnable.value) {
+    // 鼠标在侧边栏上时，且侧边栏展开时的宽度
+    const onHoveringWidth = sidebarExpandOnHover.value
+      ? props.sidebarWidth
+      : getSideCollapseWidth.value;
+
+    // 设置 marginLeft，根据侧边栏是否折叠来决定
+    marginLeft = sidebarCollapse.value
+      ? getSideCollapseWidth.value
+      : onHoveringWidth;
+
+    // 设置 tabbar 的宽度，计算方式为 100% 减去侧边栏的宽度
+    width = `calc(100% - ${sidebarCollapse.value ? getSidebarWidth.value : onHoveringWidth}px)`;
+  } else {
+    // 默认情况下，tabbar 的宽度为 100%
+    width = '100%';
+  }
+
+  return {
+    marginLeft: `${marginLeft}px`,
+    width,
+  };
+});
+
+const contentStyle = computed((): CSSProperties => {
+  const fixed = headerFixed.value;
+
+  const { footerEnable, footerFixed, footerHeight } = props;
+  return {
+    marginTop:
+      fixed &&
+      !isFullContent.value &&
+      !headerIsHidden.value &&
+      (!isHeaderAutoMode.value || scrollY.value < headerWrapperHeight.value)
+        ? `${headerWrapperHeight.value}px`
+        : 0,
+    paddingBottom: `${footerEnable && footerFixed ? footerHeight : 0}px`,
+  };
+});
+
+const headerZIndex = computed(() => {
+  const { zIndex } = props;
+  const offset = isMixedNav.value ? 1 : 0;
+  return zIndex + offset;
+});
+
+const headerWrapperStyle = computed((): CSSProperties => {
+  const fixed = headerFixed.value;
+  return {
+    height: isFullContent.value ? '0' : `${headerWrapperHeight.value}px`,
+    left: isMixedNav.value ? 0 : mainStyle.value.sidebarAndExtraWidth,
+    position: fixed ? 'fixed' : 'static',
+    top:
+      headerIsHidden.value || isFullContent.value
+        ? `-${headerWrapperHeight.value}px`
+        : 0,
+    width: mainStyle.value.width,
+    'z-index': headerZIndex.value,
+  };
+});
+
+/**
+ * 侧边栏z-index
+ */
+const sidebarZIndex = computed(() => {
+  const { isMobile, zIndex } = props;
+  let offset = isMobile || isSideMode.value ? 1 : -1;
+
+  if (isMixedNav.value) {
+    offset += 1;
+  }
+
+  return zIndex + offset;
+});
+
+const footerWidth = computed(() => {
+  if (!props.footerFixed) {
+    return '100%';
+  }
+
+  return mainStyle.value.width;
+});
+
+const maskStyle = computed((): CSSProperties => {
+  return { zIndex: props.zIndex };
+});
+
+const showHeaderToggleButton = computed(() => {
+  return (
+    props.isMobile ||
+    (props.headerToggleSidebarButton &&
+      isSideMode.value &&
+      !isSidebarMixedNav.value &&
+      !isMixedNav.value &&
+      !props.isMobile)
+  );
+});
+
+const showHeaderLogo = computed(() => {
+  return !isSideMode.value || isMixedNav.value || props.isMobile;
+});
+
+watch(
+  () => props.isMobile,
+  (val) => {
+    if (val) {
+      sidebarCollapse.value = true;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(
+  [() => headerWrapperHeight.value, () => isFullContent.value],
+  ([height]) => {
+    setLayoutHeaderHeight(isFullContent.value ? 0 : height);
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(
+  () => props.footerHeight,
+  (height: number) => {
+    setLayoutFooterHeight(height);
+  },
+  {
+    immediate: true,
+  },
+);
+
+{
+  const mouseMove = () => {
+    mouseY.value > headerWrapperHeight.value
+      ? (headerIsHidden.value = true)
+      : (headerIsHidden.value = false);
+  };
+  watch(
+    [() => props.headerMode, () => mouseY.value],
+    () => {
+      if (!isHeaderAutoMode.value || isMixedNav.value || isFullContent.value) {
+        if (props.headerMode !== 'auto-scroll') {
+          headerIsHidden.value = false;
+        }
+        return;
+      }
+      headerIsHidden.value = true;
+      mouseMove();
+    },
+    {
+      immediate: true,
+    },
+  );
+}
+
+{
+  const checkHeaderIsHidden = useThrottleFn((top, bottom, topArrived) => {
+    if (scrollY.value < headerWrapperHeight.value) {
+      headerIsHidden.value = false;
+      return;
+    }
+    if (topArrived) {
+      headerIsHidden.value = false;
+      return;
+    }
+
+    if (top) {
+      headerIsHidden.value = false;
+    } else if (bottom) {
+      headerIsHidden.value = true;
+    }
+  }, 300);
+
+  watch(
+    () => scrollY.value,
+    () => {
+      if (
+        props.headerMode !== 'auto-scroll' ||
+        isMixedNav.value ||
+        isFullContent.value
+      ) {
+        return;
+      }
+      if (isScrolling.value) {
+        checkHeaderIsHidden(
+          directions.top,
+          directions.bottom,
+          arrivedState.top,
+        );
+      }
+    },
+  );
+}
+
+function handleClickMask() {
+  sidebarCollapse.value = true;
+}
+
+function handleHeaderToggle() {
+  if (props.isMobile) {
+    sidebarCollapse.value = false;
+  } else {
+    emit('toggleSidebar');
+  }
+}
+
+const idMainContent = ELEMENT_ID_MAIN_CONTENT;
+</script>
+
+<template>
+  <div class="relative flex min-h-full w-full">
+    <LayoutSidebar
+      v-if="sidebarEnableState"
+      v-model:collapse="sidebarCollapse"
+      v-model:expand-on-hover="sidebarExpandOnHover"
+      v-model:expand-on-hovering="sidebarExpandOnHovering"
+      v-model:extra-collapse="sidebarExtraCollapse"
+      v-model:extra-visible="sidebarExtraVisible"
+      :show-collapse-button="sidebarCollapsedButton"
+      :show-fixed-button="sidebarFixedButton"
+      :collapse-width="getSideCollapseWidth"
+      :dom-visible="!isMobile"
+      :extra-width="sidebarExtraWidth"
+      :fixed-extra="sidebarExpandOnHover"
+      :header-height="isMixedNav ? 0 : headerHeight"
+      :is-sidebar-mixed="isSidebarMixedNav || isHeaderMixedNav"
+      :margin-top="sidebarMarginTop"
+      :mixed-width="sidebarMixedWidth"
+      :show="showSidebar"
+      :theme="sidebarTheme"
+      :width="getSidebarWidth"
+      :z-index="sidebarZIndex"
+      @leave="() => emit('sideMouseLeave')"
+    >
+      <template v-if="isSideMode && !isMixedNav" #logo>
+        <slot name="logo"></slot>
+      </template>
+
+      <template v-if="isSidebarMixedNav || isHeaderMixedNav">
+        <slot name="mixed-menu"></slot>
+      </template>
+      <template v-else>
+        <slot name="menu"></slot>
+      </template>
+
+      <template #extra>
+        <slot name="side-extra"></slot>
+      </template>
+      <template #extra-title>
+        <slot name="side-extra-title"></slot>
+      </template>
+    </LayoutSidebar>
+
+    <div
+      ref="contentRef"
+      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
+    >
+      <div
+        :class="[
+          {
+            'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
+          },
+          SCROLL_FIXED_CLASS,
+        ]"
+        :style="headerWrapperStyle"
+        class="overflow-hidden transition-all duration-200"
+      >
+        <LayoutHeader
+          v-if="headerVisible"
+          :full-width="!isSideMode"
+          :height="headerHeight"
+          :is-mobile="isMobile"
+          :show="!isFullContent && !headerHidden"
+          :sidebar-width="sidebarWidth"
+          :theme="headerTheme"
+          :width="mainStyle.width"
+          :z-index="headerZIndex"
+        >
+          <template v-if="showHeaderLogo" #logo>
+            <slot name="logo"></slot>
+          </template>
+
+          <template #toggle-button>
+            <VbenIconButton
+              v-if="showHeaderToggleButton"
+              class="my-0 mr-1 rounded-md"
+              @click="handleHeaderToggle"
+            >
+              <IconifyIcon v-if="showSidebar" icon="ep:fold" />
+              <IconifyIcon v-else icon="ep:expand" />
+            </VbenIconButton>
+          </template>
+          <slot name="header"></slot>
+        </LayoutHeader>
+
+        <LayoutTabbar
+          v-if="tabbarEnable"
+          :height="tabbarHeight"
+          :style="tabbarStyle"
+        >
+          <slot name="tabbar"></slot>
+        </LayoutTabbar>
+      </div>
+
+      <!-- </div> -->
+      <LayoutContent
+        :id="idMainContent"
+        :content-compact="contentCompact"
+        :content-compact-width="contentCompactWidth"
+        :padding="contentPadding"
+        :padding-bottom="contentPaddingBottom"
+        :padding-left="contentPaddingLeft"
+        :padding-right="contentPaddingRight"
+        :padding-top="contentPaddingTop"
+        :style="contentStyle"
+        class="transition-[margin-top] duration-200"
+      >
+        <slot name="content"></slot>
+
+        <template #overlay>
+          <slot name="content-overlay"></slot>
+        </template>
+      </LayoutContent>
+
+      <LayoutFooter
+        v-if="footerEnable"
+        :fixed="footerFixed"
+        :height="footerHeight"
+        :show="!isFullContent"
+        :width="footerWidth"
+        :z-index="zIndex"
+      >
+        <slot name="footer"></slot>
+      </LayoutFooter>
+    </div>
+    <slot name="extra"></slot>
+    <div
+      v-if="maskVisible"
+      :style="maskStyle"
+      class="fixed left-0 top-0 h-full w-full bg-overlay transition-[background-color] duration-200"
+      @click="handleClickMask"
+    ></div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/tailwind.config.mjs b/admin-ui/vue/packages/@core/ui-kit/layout-ui/tailwind.config.mjs
new file mode 100644
index 0000000..f17f556
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/tailwind.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';
diff --git a/admin-ui/vue/packages/@core/ui-kit/layout-ui/tsconfig.json b/admin-ui/vue/packages/@core/ui-kit/layout-ui/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/layout-ui/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/README.md b/admin-ui/vue/packages/@core/ui-kit/menu-ui/README.md
new file mode 100644
index 0000000..dd77a95
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/README.md
@@ -0,0 +1 @@
+# 菜单组件
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/build.config.ts b/admin-ui/vue/packages/@core/ui-kit/menu-ui/build.config.ts
new file mode 100644
index 0000000..1ff78fa
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/build.config.ts
@@ -0,0 +1,26 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    {
+      builder: 'mkdist',
+      input: './src',
+      pattern: ['**/*'],
+    },
+    {
+      builder: 'mkdist',
+      input: './src',
+      loaders: ['vue'],
+      pattern: ['**/*.vue'],
+    },
+    {
+      builder: 'mkdist',
+      format: 'esm',
+      input: './src',
+      loaders: ['js'],
+      pattern: ['**/*.ts'],
+    },
+  ],
+});
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/package.json b/admin-ui/vue/packages/@core/ui-kit/menu-ui/package.json
new file mode 100644
index 0000000..87f646e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@vben-core/menu-ui",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/uikit/menu-ui"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@vben-core/composables": "workspace:*",
+    "@vben-core/icons": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
+    "@vben-core/typings": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "vue": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/postcss.config.mjs b/admin-ui/vue/packages/@core/ui-kit/menu-ui/postcss.config.mjs
new file mode 100644
index 0000000..3d80704
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/collapse-transition.vue b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/collapse-transition.vue
new file mode 100644
index 0000000..b89c406
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/collapse-transition.vue
@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import type { RendererElement } from 'vue';
+
+defineOptions({
+  name: 'CollapseTransition',
+});
+
+const reset = (el: RendererElement) => {
+  el.style.maxHeight = '';
+  el.style.overflow = el.dataset.oldOverflow;
+  el.style.paddingTop = el.dataset.oldPaddingTop;
+  el.style.paddingBottom = el.dataset.oldPaddingBottom;
+};
+
+const on = {
+  afterEnter(el: RendererElement) {
+    el.style.maxHeight = '';
+    el.style.overflow = el.dataset.oldOverflow;
+  },
+
+  afterLeave(el: RendererElement) {
+    reset(el);
+  },
+
+  beforeEnter(el: RendererElement) {
+    if (!el.dataset) el.dataset = {};
+
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldMarginTop = el.style.marginTop;
+
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    el.dataset.oldMarginBottom = el.style.marginBottom;
+    if (el.style.height) el.dataset.elExistsHeight = el.style.height;
+
+    el.style.maxHeight = 0;
+    el.style.paddingTop = 0;
+    el.style.marginTop = 0;
+    el.style.paddingBottom = 0;
+    el.style.marginBottom = 0;
+  },
+
+  beforeLeave(el: RendererElement) {
+    if (!el.dataset) el.dataset = {};
+    el.dataset.oldPaddingTop = el.style.paddingTop;
+    el.dataset.oldMarginTop = el.style.marginTop;
+    el.dataset.oldPaddingBottom = el.style.paddingBottom;
+    el.dataset.oldMarginBottom = el.style.marginBottom;
+    el.dataset.oldOverflow = el.style.overflow;
+    el.style.maxHeight = `${el.scrollHeight}px`;
+    el.style.overflow = 'hidden';
+  },
+
+  enter(el: RendererElement) {
+    requestAnimationFrame(() => {
+      el.dataset.oldOverflow = el.style.overflow;
+      if (el.dataset.elExistsHeight) {
+        el.style.maxHeight = el.dataset.elExistsHeight;
+      } else if (el.scrollHeight === 0) {
+        el.style.maxHeight = 0;
+      } else {
+        el.style.maxHeight = `${el.scrollHeight}px`;
+      }
+
+      el.style.paddingTop = el.dataset.oldPaddingTop;
+      el.style.paddingBottom = el.dataset.oldPaddingBottom;
+      el.style.marginTop = el.dataset.oldMarginTop;
+      el.style.marginBottom = el.dataset.oldMarginBottom;
+      el.style.overflow = 'hidden';
+    });
+  },
+
+  enterCancelled(el: RendererElement) {
+    reset(el);
+  },
+
+  leave(el: RendererElement) {
+    if (el.scrollHeight !== 0) {
+      el.style.maxHeight = 0;
+      el.style.paddingTop = 0;
+      el.style.paddingBottom = 0;
+      el.style.marginTop = 0;
+      el.style.marginBottom = 0;
+    }
+  },
+
+  leaveCancelled(el: RendererElement) {
+    reset(el);
+  },
+};
+</script>
+
+<template>
+  <transition name="collapse-transition" v-on="on">
+    <slot></slot>
+  </transition>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/index.ts b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/index.ts
new file mode 100644
index 0000000..ce06710
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/index.ts
@@ -0,0 +1,4 @@
+export { default as MenuBadge } from './menu-badge.vue';
+export { default as MenuItem } from './menu-item.vue';
+export { default as Menu } from './menu.vue';
+export { default as SubMenu } from './sub-menu.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu-badge-dot.vue b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu-badge-dot.vue
new file mode 100644
index 0000000..823cbd7
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu-badge-dot.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+interface Props {
+  dotClass?: string;
+  dotStyle?: CSSProperties;
+}
+
+withDefaults(defineProps<Props>(), {
+  dotClass: '',
+  dotStyle: () => ({}),
+});
+</script>
+<template>
+  <span class="relative mr-1 flex size-1.5">
+    <span
+      :class="dotClass"
+      :style="dotStyle"
+      class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
+    >
+    </span>
+    <span
+      :class="dotClass"
+      :style="dotStyle"
+      class="relative inline-flex size-1.5 rounded-full"
+    ></span>
+  </span>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
new file mode 100644
index 0000000..9a329c5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { MenuRecordBadgeRaw } from '@vben-core/typings';
+
+import { computed } from 'vue';
+
+import { isValidColor } from '@vben-core/shared/color';
+
+import BadgeDot from './menu-badge-dot.vue';
+
+interface Props extends MenuRecordBadgeRaw {
+  hasChildren?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const variantsMap: Record<string, string> = {
+  default: 'bg-green-500',
+  destructive: 'bg-destructive',
+  primary: 'bg-primary',
+  success: 'bg-green-500',
+  warning: 'bg-yellow-500',
+};
+
+const isDot = computed(() => props.badgeType === 'dot');
+
+const badgeClass = computed(() => {
+  const { badgeVariants } = props;
+
+  if (!badgeVariants) {
+    return variantsMap.default;
+  }
+
+  return variantsMap[badgeVariants] || badgeVariants;
+});
+
+const badgeStyle = computed(() => {
+  if (badgeClass.value && isValidColor(badgeClass.value)) {
+    return {
+      backgroundColor: badgeClass.value,
+    };
+  }
+  return {};
+});
+</script>
+<template>
+  <span v-if="isDot || badge" :class="$attrs.class" class="absolute">
+    <BadgeDot v-if="isDot" :dot-class="badgeClass" :dot-style="badgeStyle" />
+    <div
+      v-else
+      :class="badgeClass"
+      :style="badgeStyle"
+      class="flex-center rounded-xl px-1.5 py-0.5 text-[10px] text-primary-foreground"
+    >
+      {{ badge }}
+    </div>
+  </span>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
new file mode 100644
index 0000000..691c25c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import type { MenuItemProps, MenuItemRegistered } from '../types';
+
+import { computed, onBeforeUnmount, onMounted, reactive, useSlots } from 'vue';
+
+import { useNamespace } from '@vben-core/composables';
+import { VbenIcon, VbenTooltip } from '@vben-core/shadcn-ui';
+
+import { MenuBadge } from '../components';
+import { useMenu, useMenuContext, useSubMenuContext } from '../hooks';
+
+interface Props extends MenuItemProps {}
+
+defineOptions({ name: 'MenuItem' });
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+});
+
+const emit = defineEmits<{ click: [MenuItemRegistered] }>();
+
+const slots = useSlots();
+const { b, e, is } = useNamespace('menu-item');
+const nsMenu = useNamespace('menu');
+const rootMenu = useMenuContext();
+const subMenu = useSubMenuContext();
+const { parentMenu, parentPaths } = useMenu();
+
+const active = computed(() => props.path === rootMenu?.activePath);
+const menuIcon = computed(() =>
+  active.value ? props.activeIcon || props.icon : props.icon,
+);
+
+const isTopLevelMenuItem = computed(
+  () => parentMenu.value?.type.name === 'Menu',
+);
+
+const collapseShowTitle = computed(
+  () =>
+    rootMenu.props?.collapseShowTitle &&
+    isTopLevelMenuItem.value &&
+    rootMenu.props.collapse,
+);
+
+const showTooltip = computed(
+  () =>
+    rootMenu.props.mode === 'vertical' &&
+    isTopLevelMenuItem.value &&
+    rootMenu.props?.collapse &&
+    slots.title,
+);
+
+const item: MenuItemRegistered = reactive({
+  active,
+  parentPaths: parentPaths.value,
+  path: props.path || '',
+});
+
+/**
+ * 菜单项点击事件
+ */
+function handleClick() {
+  if (props.disabled) {
+    return;
+  }
+  rootMenu?.handleMenuItemClick?.({
+    parentPaths: parentPaths.value,
+    path: props.path,
+  });
+  emit('click', item);
+}
+
+onMounted(() => {
+  subMenu?.addSubMenu?.(item);
+  rootMenu?.addMenuItem?.(item);
+});
+
+onBeforeUnmount(() => {
+  subMenu?.removeSubMenu?.(item);
+  rootMenu?.removeMenuItem?.(item);
+});
+</script>
+<template>
+  <li
+    :class="[
+      rootMenu.theme,
+      b(),
+      is('active', active),
+      is('disabled', disabled),
+      is('collapse-show-title', collapseShowTitle),
+    ]"
+    role="menuitem"
+    @click.stop="handleClick"
+  >
+    <VbenTooltip
+      v-if="showTooltip"
+      :content-class="[rootMenu.theme]"
+      side="right"
+    >
+      <template #trigger>
+        <div :class="[nsMenu.be('tooltip', 'trigger')]">
+          <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" fallback />
+          <slot></slot>
+          <span v-if="collapseShowTitle" :class="nsMenu.e('name')">
+            <slot name="title"></slot>
+          </span>
+        </div>
+      </template>
+      <slot name="title"></slot>
+    </VbenTooltip>
+    <div v-show="!showTooltip" :class="[e('content')]">
+      <MenuBadge
+        v-if="rootMenu.props.mode !== 'horizontal'"
+        class="right-2"
+        v-bind="props"
+      />
+      <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" />
+      <slot></slot>
+      <slot name="title"></slot>
+    </div>
+  </li>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu.vue
new file mode 100644
index 0000000..237aff0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -0,0 +1,877 @@
+<script lang="ts" setup>
+import type { UseResizeObserverReturn } from '@vueuse/core';
+
+import type { SetupContext, VNodeArrayChildren } from 'vue';
+
+import type {
+  MenuItemClicked,
+  MenuItemRegistered,
+  MenuProps,
+  MenuProvider,
+} from '../types';
+
+import {
+  computed,
+  nextTick,
+  reactive,
+  ref,
+  toRef,
+  useSlots,
+  watch,
+  watchEffect,
+} from 'vue';
+
+import { useNamespace } from '@vben-core/composables';
+import { Ellipsis } from '@vben-core/icons';
+
+import { useResizeObserver } from '@vueuse/core';
+
+import {
+  createMenuContext,
+  createSubMenuContext,
+  useMenuStyle,
+} from '../hooks';
+import { useMenuScroll } from '../hooks/use-menu-scroll';
+import { flattedChildren } from '../utils';
+import SubMenu from './sub-menu.vue';
+
+interface Props extends MenuProps {}
+
+defineOptions({ name: 'Menu' });
+
+const props = withDefaults(defineProps<Props>(), {
+  accordion: true,
+  collapse: false,
+  mode: 'vertical',
+  rounded: true,
+  theme: 'dark',
+  scrollToActive: false,
+});
+
+const emit = defineEmits<{
+  close: [string, string[]];
+  open: [string, string[]];
+  select: [string, string[]];
+}>();
+
+const { b, is } = useNamespace('menu');
+const menuStyle = useMenuStyle();
+const slots: SetupContext['slots'] = useSlots();
+const menu = ref<HTMLUListElement>();
+const sliceIndex = ref(-1);
+const openedMenus = ref<MenuProvider['openedMenus']>(
+  props.defaultOpeneds && !props.collapse ? [...props.defaultOpeneds] : [],
+);
+const activePath = ref<MenuProvider['activePath']>(props.defaultActive);
+const items = ref<MenuProvider['items']>({});
+const subMenus = ref<MenuProvider['subMenus']>({});
+const mouseInChild = ref(false);
+
+const isMenuPopup = computed<MenuProvider['isMenuPopup']>(() => {
+  return (
+    props.mode === 'horizontal' || (props.mode === 'vertical' && props.collapse)
+  );
+});
+
+const getSlot = computed(() => {
+  // 更新插槽内容
+  const defaultSlots: VNodeArrayChildren = slots.default?.() ?? [];
+
+  const originalSlot = flattedChildren(defaultSlots) as VNodeArrayChildren;
+  const slotDefault =
+    sliceIndex.value === -1
+      ? originalSlot
+      : originalSlot.slice(0, sliceIndex.value);
+
+  const slotMore =
+    sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value);
+
+  return { showSlotMore: slotMore.length > 0, slotDefault, slotMore };
+});
+
+watch(
+  () => props.collapse,
+  (value) => {
+    if (value) openedMenus.value = [];
+  },
+);
+
+watch(items.value, initMenu);
+
+watch(
+  () => props.defaultActive,
+  (currentActive = '') => {
+    if (!items.value[currentActive]) {
+      activePath.value = '';
+    }
+    updateActiveName(currentActive);
+  },
+);
+
+let resizeStopper: UseResizeObserverReturn['stop'];
+watchEffect(() => {
+  if (props.mode === 'horizontal') {
+    resizeStopper = useResizeObserver(menu, handleResize).stop;
+  } else {
+    resizeStopper?.();
+  }
+});
+
+// 注入上下文
+createMenuContext(
+  reactive({
+    activePath,
+    addMenuItem,
+    addSubMenu,
+    closeMenu,
+    handleMenuItemClick,
+    handleSubMenuClick,
+    isMenuPopup,
+    openedMenus,
+    openMenu,
+    props,
+    removeMenuItem,
+    removeSubMenu,
+    subMenus,
+    theme: toRef(props, 'theme'),
+    items,
+  }),
+);
+
+createSubMenuContext({
+  addSubMenu,
+  level: 1,
+  mouseInChild,
+  removeSubMenu,
+});
+
+function calcMenuItemWidth(menuItem: HTMLElement) {
+  const computedStyle = getComputedStyle(menuItem);
+  const marginLeft = Number.parseInt(computedStyle.marginLeft, 10);
+  const marginRight = Number.parseInt(computedStyle.marginRight, 10);
+  return menuItem.offsetWidth + marginLeft + marginRight || 0;
+}
+
+function calcSliceIndex() {
+  if (!menu.value) {
+    return -1;
+  }
+  const items = [...(menu.value?.childNodes ?? [])].filter(
+    (item) =>
+      // remove comment type node #12634
+      item.nodeName !== '#comment' &&
+      (item.nodeName !== '#text' || item.nodeValue),
+  ) as HTMLElement[];
+
+  const moreItemWidth = 46;
+  const computedMenuStyle = getComputedStyle(menu?.value);
+
+  const paddingLeft = Number.parseInt(computedMenuStyle.paddingLeft, 10);
+  const paddingRight = Number.parseInt(computedMenuStyle.paddingRight, 10);
+  const menuWidth = menu.value?.clientWidth - paddingLeft - paddingRight;
+
+  let calcWidth = 0;
+  let sliceIndex = 0;
+  items.forEach((item, index) => {
+    calcWidth += calcMenuItemWidth(item);
+    if (calcWidth <= menuWidth - moreItemWidth) {
+      sliceIndex = index + 1;
+    }
+  });
+  return sliceIndex === items.length ? -1 : sliceIndex;
+}
+
+function debounce(fn: () => void, wait = 33.34) {
+  let timer: null | ReturnType<typeof setTimeout>;
+  return () => {
+    timer && clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn();
+    }, wait);
+  };
+}
+
+let isFirstTimeRender = true;
+function handleResize() {
+  if (sliceIndex.value === calcSliceIndex()) {
+    return;
+  }
+  const callback = () => {
+    sliceIndex.value = -1;
+    nextTick(() => {
+      sliceIndex.value = calcSliceIndex();
+    });
+  };
+  callback();
+  // // execute callback directly when first time resize to avoid shaking
+  isFirstTimeRender ? callback() : debounce(callback)();
+  isFirstTimeRender = false;
+}
+
+const enableScroll = computed(
+  () => props.scrollToActive && props.mode === 'vertical' && !props.collapse,
+);
+
+const { scrollToActiveItem } = useMenuScroll(activePath, {
+  enable: enableScroll,
+  delay: 320,
+});
+
+// 监听 activePath 变化，自动滚动到激活项
+watch(activePath, () => {
+  scrollToActiveItem();
+});
+
+// 默认展开菜单
+function initMenu() {
+  const parentPaths = getActivePaths();
+
+  // 展开该菜单项的路径上所有子菜单
+  // expand all subMenus of the menu item
+  parentPaths.forEach((path) => {
+    const subMenu = subMenus.value[path];
+    subMenu && openMenu(path, subMenu.parentPaths);
+  });
+}
+
+function updateActiveName(val: string) {
+  const itemsInData = items.value;
+  const item =
+    itemsInData[val] ||
+    (activePath.value && itemsInData[activePath.value]) ||
+    itemsInData[props.defaultActive || ''];
+
+  activePath.value = item ? item.path : val;
+}
+
+function handleMenuItemClick(data: MenuItemClicked) {
+  const { collapse, mode } = props;
+  if (mode === 'horizontal' || collapse) {
+    openedMenus.value = [];
+  }
+  const { parentPaths, path } = data;
+  if (!path || !parentPaths) {
+    return;
+  }
+
+  emit('select', path, parentPaths);
+}
+
+function handleSubMenuClick({ parentPaths, path }: MenuItemRegistered) {
+  const isOpened = openedMenus.value.includes(path);
+
+  if (isOpened) {
+    closeMenu(path, parentPaths);
+  } else {
+    openMenu(path, parentPaths);
+  }
+}
+
+function close(path: string) {
+  const i = openedMenus.value.indexOf(path);
+
+  if (i !== -1) {
+    openedMenus.value.splice(i, 1);
+  }
+}
+
+/**
+ * 关闭、折叠菜单
+ */
+function closeMenu(path: string, parentPaths: string[]) {
+  if (props.accordion) {
+    openedMenus.value = subMenus.value[path]?.parentPaths ?? [];
+  }
+
+  close(path);
+
+  emit('close', path, parentPaths);
+}
+
+/**
+ * 点击展开菜单
+ */
+function openMenu(path: string, parentPaths: string[]) {
+  if (openedMenus.value.includes(path)) {
+    return;
+  }
+  // 手风琴模式菜单
+  if (props.accordion) {
+    const activeParentPaths = getActivePaths();
+    if (activeParentPaths.includes(path)) {
+      parentPaths = activeParentPaths;
+    }
+    openedMenus.value = openedMenus.value.filter((path: string) =>
+      parentPaths.includes(path),
+    );
+  }
+  openedMenus.value.push(path);
+  emit('open', path, parentPaths);
+}
+
+function addMenuItem(item: MenuItemRegistered) {
+  items.value[item.path] = item;
+}
+
+function addSubMenu(subMenu: MenuItemRegistered) {
+  subMenus.value[subMenu.path] = subMenu;
+}
+
+function removeSubMenu(subMenu: MenuItemRegistered) {
+  Reflect.deleteProperty(subMenus.value, subMenu.path);
+}
+
+function removeMenuItem(item: MenuItemRegistered) {
+  Reflect.deleteProperty(items.value, item.path);
+}
+
+function getActivePaths() {
+  const activeItem = activePath.value && items.value[activePath.value];
+
+  if (!activeItem || props.mode === 'horizontal' || props.collapse) {
+    return [];
+  }
+
+  return activeItem.parentPaths;
+}
+</script>
+<template>
+  <ul
+    ref="menu"
+    :class="[
+      theme,
+      b(),
+      is(mode, true),
+      is(theme, true),
+      is('rounded', rounded),
+      is('collapse', collapse),
+      is('menu-align', mode === 'horizontal'),
+    ]"
+    :style="menuStyle"
+    role="menu"
+  >
+    <template v-if="mode === 'horizontal' && getSlot.showSlotMore">
+      <template v-for="item in getSlot.slotDefault" :key="item.key">
+        <component :is="item" />
+      </template>
+      <SubMenu is-sub-menu-more path="sub-menu-more">
+        <template #title>
+          <Ellipsis class="size-4" />
+        </template>
+        <template v-for="item in getSlot.slotMore" :key="item.key">
+          <component :is="item" />
+        </template>
+      </SubMenu>
+    </template>
+    <template v-else>
+      <slot></slot>
+    </template>
+  </ul>
+</template>
+
+<style lang="scss">
+$namespace: vben;
+
+@mixin menu-item-active {
+  color: var(--menu-item-active-color);
+  text-decoration: none;
+  cursor: pointer;
+  background: var(--menu-item-active-background-color);
+}
+
+@mixin menu-item {
+  position: relative;
+  display: flex;
+  // gap: 12px;
+  align-items: center;
+  height: var(--menu-item-height);
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  margin: 0 var(--menu-item-margin-x) var(--menu-item-margin-y)
+    var(--menu-item-margin-x);
+  font-size: var(--menu-font-size) !important;
+  color: var(--menu-item-color);
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  list-style: none;
+  background: var(--menu-item-background-color);
+  border: none;
+  border-radius: var(--menu-item-radius);
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    padding 0.15s ease,
+    border-color 0.15s ease;
+
+  &.is-disabled {
+    cursor: not-allowed;
+    background: none !important;
+    opacity: 0.25;
+  }
+
+  .#{$namespace}-menu__icon {
+    transition: transform 0.25s;
+  }
+
+  &:hover {
+    .#{$namespace}-menu__icon {
+      transform: scale(1.2);
+    }
+  }
+
+  &:hover,
+  &:focus {
+    outline: none;
+  }
+
+  * {
+    vertical-align: bottom;
+  }
+}
+
+@mixin menu-title {
+  max-width: var(--menu-title-width);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--menu-font-size) !important;
+  white-space: nowrap;
+  opacity: 1;
+}
+
+.is-menu-align {
+  justify-content: var(--menu-align, start);
+}
+
+.#{$namespace}-menu__popup-container,
+.#{$namespace}-menu {
+  --menu-title-width: 140px;
+  --menu-item-icon-size: var(--font-size-base, 16px);
+  --menu-item-height: 38px;
+  --menu-item-padding-y: 21px;
+  --menu-item-padding-x: 12px;
+  --menu-item-popup-padding-y: 20px;
+  --menu-item-popup-padding-x: 12px;
+  --menu-item-margin-y: 2px;
+  --menu-item-margin-x: 0px;
+  --menu-item-collapse-padding-y: 23.5px;
+  --menu-item-collapse-padding-x: 0px;
+  --menu-item-collapse-margin-y: 4px;
+  --menu-item-collapse-margin-x: 0px;
+  --menu-item-radius: 0px;
+  --menu-item-indent: 16px;
+
+  &.is-dark {
+    --menu-background-color: hsl(var(--menu));
+    // --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark));
+    --menu-item-background-color: var(--menu-background-color);
+    --menu-item-color: hsl(var(--foreground) / 80%);
+    --menu-item-hover-color: hsl(var(--accent-foreground));
+    --menu-item-hover-background-color: hsl(var(--accent));
+    --menu-item-active-color: hsl(var(--accent-foreground));
+    --menu-item-active-background-color: hsl(var(--accent));
+    --menu-submenu-hover-color: hsl(var(--foreground));
+    --menu-submenu-hover-background-color: hsl(var(--accent));
+    --menu-submenu-active-color: hsl(var(--foreground));
+    --menu-submenu-active-background-color: transparent;
+    --menu-submenu-background-color: var(--menu-background-color);
+  }
+
+  &.is-light {
+    --menu-background-color: hsl(var(--menu));
+    // --menu-submenu-opened-background-color: hsl(var(--menu-opened));
+    --menu-item-background-color: var(--menu-background-color);
+    --menu-item-color: hsl(var(--foreground));
+    --menu-item-hover-color: var(--menu-item-color);
+    --menu-item-hover-background-color: hsl(var(--accent));
+    --menu-item-active-color: hsl(var(--primary));
+    --menu-item-active-background-color: hsl(var(--primary) / 15%);
+    --menu-submenu-hover-color: hsl(var(--primary));
+    --menu-submenu-hover-background-color: hsl(var(--accent));
+    --menu-submenu-active-color: hsl(var(--primary));
+    --menu-submenu-active-background-color: transparent;
+    --menu-submenu-background-color: var(--menu-background-color);
+  }
+
+  &.is-rounded {
+    --menu-item-margin-x: 8px;
+    --menu-item-collapse-margin-x: 6px;
+    --menu-item-radius: 8px;
+  }
+
+  &.is-horizontal:not(.is-rounded) {
+    --menu-item-height: 40px;
+    --menu-item-radius: 6px;
+  }
+
+  &.is-horizontal.is-rounded {
+    --menu-item-height: 40px;
+    --menu-item-radius: 6px;
+    --menu-item-padding-x: 12px;
+  }
+
+  // .vben-menu__popup,
+  &.is-horizontal {
+    --menu-item-padding-y: 0px;
+    --menu-item-padding-x: 10px;
+    --menu-item-margin-y: 0px;
+    --menu-item-margin-x: 1px;
+    --menu-background-color: transparent;
+
+    &.is-dark {
+      --menu-item-hover-color: hsl(var(--accent-foreground));
+      --menu-item-hover-background-color: hsl(var(--accent));
+      --menu-item-active-color: hsl(var(--accent-foreground));
+      --menu-item-active-background-color: hsl(var(--accent));
+      --menu-submenu-active-color: hsl(var(--foreground));
+      --menu-submenu-active-background-color: hsl(var(--accent));
+      --menu-submenu-hover-color: hsl(var(--accent-foreground));
+      --menu-submenu-hover-background-color: hsl(var(--accent));
+    }
+
+    &.is-light {
+      --menu-item-active-color: hsl(var(--primary));
+      --menu-item-active-background-color: hsl(var(--primary) / 15%);
+      --menu-item-hover-background-color: hsl(var(--accent));
+      --menu-item-hover-color: hsl(var(--primary));
+      --menu-submenu-active-color: hsl(var(--primary));
+      --menu-submenu-active-background-color: hsl(var(--primary) / 15%);
+      --menu-submenu-hover-color: hsl(var(--primary));
+      --menu-submenu-hover-background-color: hsl(var(--accent));
+    }
+  }
+}
+
+.#{$namespace}-menu {
+  position: relative;
+  box-sizing: border-box;
+  padding-left: 0;
+  margin: 0;
+  list-style: none;
+  background: hsl(var(--menu-background-color));
+
+  // 垂直菜单
+  &.is-vertical {
+    &:not(.#{$namespace}-menu.is-collapse) {
+      & .#{$namespace}-menu-item,
+      & .#{$namespace}-sub-menu-content,
+      & .#{$namespace}-menu-item-group__title {
+        padding-left: calc(
+          var(--menu-item-indent) + var(--menu-level) * var(--menu-item-indent)
+        );
+        white-space: nowrap;
+      }
+
+      & > .#{$namespace}-sub-menu {
+        & > .#{$namespace}-menu {
+          & > .#{$namespace}-menu-item {
+            padding-left: calc(
+              0px + var(--menu-item-indent) + var(--menu-level) *
+                var(--menu-item-indent)
+            );
+          }
+        }
+
+        & > .#{$namespace}-sub-menu-content {
+          padding-left: calc(var(--menu-item-indent) - 8px);
+        }
+      }
+      & > .#{$namespace}-menu-item {
+        padding-left: calc(var(--menu-item-indent) - 8px);
+      }
+    }
+  }
+
+  &.is-horizontal {
+    display: flex;
+    flex-wrap: nowrap;
+    max-width: 100%;
+    height: var(--height-horizontal-height);
+    border-right: none;
+
+    .#{$namespace}-menu-item {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--menu-item-height);
+      padding-right: calc(var(--menu-item-padding-x) + 6px);
+      margin: 0;
+      margin-right: 2px;
+      // border-bottom: 2px solid transparent;
+      border-radius: var(--menu-item-radius);
+    }
+
+    & > .#{$namespace}-sub-menu {
+      height: var(--menu-item-height);
+      margin-right: 2px;
+
+      &:focus,
+      &:hover {
+        outline: none;
+      }
+
+      & .#{$namespace}-sub-menu-content {
+        height: 100%;
+        padding-right: 40px;
+        // border-bottom: 2px solid transparent;
+        border-radius: var(--menu-item-radius);
+      }
+    }
+
+    & .#{$namespace}-menu-item:not(.is-disabled):hover,
+    & .#{$namespace}-menu-item:not(.is-disabled):focus {
+      outline: none;
+    }
+
+    & > .#{$namespace}-menu-item.is-active {
+      color: var(--menu-item-active-color);
+    }
+
+    // &.is-light {
+    //   & > .#{$namespace}-sub-menu {
+    //     &.is-active {
+    //       border-bottom: 2px solid var(--menu-item-active-color);
+    //     }
+    //     &:not(.is-active) .#{$namespace}-sub-menu-content {
+    //       &:hover {
+    //         border-bottom: 2px solid var(--menu-item-active-color);
+    //       }
+    //     }
+    //   }
+    //   & > .#{$namespace}-menu-item.is-active {
+    //     border-bottom: 2px solid var(--menu-item-active-color);
+    //   }
+
+    //   & .#{$namespace}-menu-item:not(.is-disabled):hover,
+    //   & .#{$namespace}-menu-item:not(.is-disabled):focus {
+    //     border-bottom: 2px solid var(--menu-item-active-color);
+    //   }
+    // }
+  }
+  // 折叠菜单
+
+  &.is-collapse {
+    .#{$namespace}-menu__icon {
+      margin-right: 0;
+    }
+    .#{$namespace}-sub-menu__icon-arrow {
+      display: none;
+    }
+
+    .#{$namespace}-sub-menu-content,
+    .#{$namespace}-menu-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--menu-item-collapse-padding-y)
+        var(--menu-item-collapse-padding-x);
+      margin: var(--menu-item-collapse-margin-y)
+        var(--menu-item-collapse-margin-x);
+      transition: all 0.3s;
+
+      &.is-active {
+        background: var(--menu-item-active-background-color) !important;
+        border-radius: var(--menu-item-radius);
+      }
+    }
+
+    &.is-light {
+      .#{$namespace}-sub-menu-content,
+      .#{$namespace}-menu-item {
+        &.is-active {
+          // color: hsl(var(--primary-foreground)) !important;
+          background: var(--menu-item-active-background-color) !important;
+        }
+      }
+    }
+
+    &.is-rounded {
+      .#{$namespace}-sub-menu-content,
+      .#{$namespace}-menu-item {
+        &.is-collapse-show-title {
+          // padding: 32px 0 !important;
+          margin: 4px 8px !important;
+        }
+      }
+    }
+  }
+
+  &__popup-container {
+    max-width: 240px;
+    height: unset;
+    padding: 0;
+    background: var(--menu-background-color);
+  }
+
+  &__popup {
+    padding: 10px 0;
+    border-radius: var(--menu-item-radius);
+
+    .#{$namespace}-sub-menu-content,
+    .#{$namespace}-menu-item {
+      padding: var(--menu-item-popup-padding-y) var(--menu-item-popup-padding-x);
+    }
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    width: var(--menu-item-icon-size);
+    height: var(--menu-item-icon-size);
+    margin-right: 8px;
+    vertical-align: middle;
+    text-align: center;
+  }
+}
+
+.#{$namespace}-menu-item {
+  fill: var(--menu-item-color);
+
+  @include menu-item;
+
+  &.is-active {
+    fill: var(--menu-item-active-color);
+
+    @include menu-item-active;
+  }
+
+  &__content {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    height: var(--menu-item-height);
+
+    span {
+      @include menu-title;
+    }
+  }
+
+  &.is-collapse-show-title {
+    padding: 32px 0 !important;
+    // margin: 4px 8px !important;
+    .#{$namespace}-menu-tooltip__trigger {
+      flex-direction: column;
+    }
+    .#{$namespace}-menu__icon {
+      display: block;
+      font-size: calc(var(--font-size-base, 16px) * 1.25) !important;
+      transition: all 0.25s ease;
+    }
+
+    .#{$namespace}-menu__name {
+      display: inline-flex;
+      margin-top: 8px;
+      margin-bottom: 0;
+      font-size: calc(var(--font-size-base, 16px) * 0.75);
+      font-weight: 400;
+      line-height: normal;
+      transition: all 0.25s ease;
+    }
+  }
+
+  &:not(.is-active):hover {
+    color: var(--menu-item-hover-color);
+    text-decoration: none;
+    cursor: pointer;
+    background: var(--menu-item-hover-background-color) !important;
+  }
+
+  .#{$namespace}-menu-tooltip__trigger {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 var(--menu-item-padding-x);
+    font-size: var(--menu-font-size) !important;
+    line-height: var(--menu-item-height);
+  }
+}
+
+.#{$namespace}-sub-menu {
+  padding-left: 0;
+  margin: 0;
+  list-style: none;
+  background: var(--menu-submenu-background-color);
+  fill: var(--menu-item-color);
+
+  &.is-active {
+    div[data-state='open'] > .#{$namespace}-sub-menu-content,
+    > .#{$namespace}-sub-menu-content {
+      // font-weight: 500;
+      color: var(--menu-submenu-active-color);
+      text-decoration: none;
+      cursor: pointer;
+      background: var(--menu-submenu-active-background-color);
+      fill: var(--menu-submenu-active-color);
+    }
+  }
+}
+
+.#{$namespace}-sub-menu-content {
+  height: var(--menu-item-height);
+  font-size: var(--menu-font-size) !important;
+
+  @include menu-item;
+
+  * {
+    font-size: inherit !important;
+  }
+
+  &__icon-arrow {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    width: inherit;
+    margin-top: -8px;
+    margin-right: 0;
+    // font-size: 16px;
+    font-weight: normal;
+    opacity: 1;
+    transition: transform 0.25s ease;
+  }
+
+  &__title {
+    @include menu-title;
+  }
+
+  &.is-collapse-show-title {
+    flex-direction: column;
+    padding: 32px 0 !important;
+    // margin: 4px 8px !important;
+    .#{$namespace}-menu__icon {
+      display: block;
+      font-size: 20px !important;
+      transition: all 0.25s ease;
+    }
+    .#{$namespace}-sub-menu-content__title {
+      display: inline-flex;
+      flex-shrink: 0;
+      margin-top: 8px;
+      margin-bottom: 0;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: normal;
+      transition: all 0.25s ease;
+    }
+  }
+
+  &.is-more {
+    padding-right: 12px !important;
+  }
+
+  // &:not(.is-active):hover {
+  &:hover {
+    color: var(--menu-submenu-hover-color);
+    text-decoration: none;
+    cursor: pointer;
+    background: var(--menu-submenu-hover-background-color) !important;
+
+    // svg {
+    //   fill: var(--menu-submenu-hover-color);
+    // }
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/normal-menu/index.ts b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/normal-menu/index.ts
new file mode 100644
index 0000000..898ea16
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/normal-menu/index.ts
@@ -0,0 +1,2 @@
+export type * from './normal-menu';
+export { default as NormalMenu } from './normal-menu.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.ts b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.ts
new file mode 100644
index 0000000..82edb4f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.ts
@@ -0,0 +1,27 @@
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+interface NormalMenuProps {
+  /**
+   * 菜单数据
+   */
+  activePath?: string;
+  /**
+   * 是否折叠
+   */
+  collapse?: boolean;
+  /**
+   * 菜单项
+   */
+  menus?: MenuRecordRaw[];
+  /**
+   * @zh_CN 是否圆润风格
+   * @default true
+   */
+  rounded?: boolean;
+  /**
+   * 主题
+   */
+  theme?: 'dark' | 'light';
+}
+
+export type { NormalMenuProps };
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
new file mode 100644
index 0000000..86e86c9
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+import type { NormalMenuProps } from './normal-menu';
+
+import { useNamespace } from '@vben-core/composables';
+import { VbenIcon } from '@vben-core/shadcn-ui';
+
+interface Props extends NormalMenuProps {}
+
+defineOptions({
+  name: 'NormalMenu',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  activePath: '',
+  collapse: false,
+  menus: () => [],
+  theme: 'dark',
+});
+
+const emit = defineEmits<{
+  enter: [MenuRecordRaw];
+  select: [MenuRecordRaw];
+}>();
+
+const { b, e, is } = useNamespace('normal-menu');
+
+function menuIcon(menu: MenuRecordRaw) {
+  return props.activePath === menu.path
+    ? menu.activeIcon || menu.icon
+    : menu.icon;
+}
+</script>
+
+<template>
+  <ul
+    :class="[
+      theme,
+      b(),
+      is('collapse', collapse),
+      is(theme, true),
+      is('rounded', rounded),
+    ]"
+    class="relative"
+  >
+    <template v-for="menu in menus" :key="menu.path">
+      <li
+        :class="[e('item'), is('active', activePath === menu.path)]"
+        @click="() => emit('select', menu)"
+        @mouseenter="() => emit('enter', menu)"
+      >
+        <VbenIcon :class="e('icon')" :icon="menuIcon(menu)" fallback />
+
+        <span :class="e('name')" class="truncate"> {{ menu.name }}</span>
+      </li>
+    </template>
+  </ul>
+</template>
+<style lang="scss" scoped>
+$namespace: vben;
+
+.#{$namespace}-normal-menu {
+  --menu-item-margin-y: 4px;
+  --menu-item-margin-x: 0px;
+  --menu-item-padding-y: 9px;
+  --menu-item-padding-x: 0px;
+  --menu-item-radius: 0px;
+
+  height: calc(100% - 4px);
+
+  &.is-rounded {
+    --menu-item-radius: 6px;
+    --menu-item-margin-x: 8px;
+  }
+
+  &.is-dark {
+    .#{$namespace}-normal-menu__item {
+      @apply text-foreground/80;
+      // color: hsl(var(--foreground) / 80%);
+
+      &:not(.is-active):hover {
+        @apply text-foreground;
+      }
+
+      &.is-active {
+        .#{$namespace}-normal-menu__name,
+        .#{$namespace}-normal-menu__icon {
+          @apply text-foreground;
+        }
+      }
+    }
+  }
+
+  &.is-collapse {
+    .#{$namespace}-normal-menu__name {
+      width: 0;
+      height: 0;
+      margin-top: 0;
+      overflow: hidden;
+      opacity: 0;
+    }
+
+    .#{$namespace}-normal-menu__icon {
+      font-size: calc(var(--font-size-base, 16px) * 1.25);
+    }
+  }
+
+  &__item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    // max-width: 64px;
+    // max-height: 64px;
+    padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+    margin: var(--menu-item-margin-y) var(--menu-item-margin-x);
+    color: hsl(var(--foreground) / 90%);
+    cursor: pointer;
+    border-radius: var(--menu-item-radius);
+    transition:
+      background 0.15s ease,
+      padding 0.15s ease,
+      border-color 0.15s ease;
+
+    &.is-active {
+      @apply bg-primary text-primary dark:bg-accent;
+
+      .#{$namespace}-normal-menu__name,
+      .#{$namespace}-normal-menu__icon {
+        @apply font-semibold text-primary-foreground;
+      }
+    }
+
+    &:not(.is-active):hover {
+      @apply bg-heavy text-primary dark:bg-accent dark:text-foreground;
+    }
+
+    &:hover {
+      .#{$namespace}-normal-menu__icon {
+        transform: scale(1.2);
+      }
+    }
+  }
+
+  &__icon {
+    max-height: 20px;
+    font-size: calc(var(--font-size-base, 16px) * 1.25);
+    transition: all 0.25s ease;
+  }
+
+  &__name {
+    margin-top: 8px;
+    margin-bottom: 0;
+    font-size: calc(var(--font-size-base, 16px) * 0.75);
+    font-weight: 400;
+    transition: all 0.25s ease;
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue
new file mode 100644
index 0000000..5622d41
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { MenuItemProps } from '../types';
+
+import { computed } from 'vue';
+
+import { useNamespace } from '@vben-core/composables';
+import { ChevronDown, ChevronRight } from '@vben-core/icons';
+import { VbenIcon } from '@vben-core/shadcn-ui';
+
+import { useMenuContext } from '../hooks';
+
+interface Props extends MenuItemProps {
+  isMenuMore?: boolean;
+  isTopLevelMenuSubmenu: boolean;
+  level?: number;
+}
+
+defineOptions({ name: 'SubMenuContent' });
+
+const props = withDefaults(defineProps<Props>(), {
+  isMenuMore: false,
+  level: 0,
+});
+
+const rootMenu = useMenuContext();
+const { b, e, is } = useNamespace('sub-menu-content');
+const nsMenu = useNamespace('menu');
+
+const opened = computed(() => {
+  return rootMenu?.openedMenus.includes(props.path);
+});
+
+const collapse = computed(() => {
+  return rootMenu.props.collapse;
+});
+
+const isFirstLevel = computed(() => {
+  return props.level === 1;
+});
+
+const getCollapseShowTitle = computed(() => {
+  return (
+    rootMenu.props.collapseShowTitle && isFirstLevel.value && collapse.value
+  );
+});
+
+const mode = computed(() => {
+  return rootMenu?.props.mode;
+});
+
+const showArrowIcon = computed(() => {
+  return mode.value === 'horizontal' || !(isFirstLevel.value && collapse.value);
+});
+
+const hiddenTitle = computed(() => {
+  return (
+    mode.value === 'vertical' &&
+    isFirstLevel.value &&
+    collapse.value &&
+    !getCollapseShowTitle.value
+  );
+});
+
+const iconComp = computed(() => {
+  return (mode.value === 'horizontal' && !isFirstLevel.value) ||
+    (mode.value === 'vertical' && collapse.value)
+    ? ChevronRight
+    : ChevronDown;
+});
+
+const iconArrowStyle = computed(() => {
+  return opened.value ? { transform: `rotate(180deg)` } : {};
+});
+</script>
+<template>
+  <div
+    :class="[
+      b(),
+      is('collapse-show-title', getCollapseShowTitle),
+      is('more', isMenuMore),
+    ]"
+  >
+    <slot></slot>
+
+    <VbenIcon
+      v-if="!isMenuMore"
+      :class="nsMenu.e('icon')"
+      :icon="icon"
+      fallback
+    />
+
+    <div v-if="!hiddenTitle" :class="[e('title')]">
+      <slot name="title"></slot>
+    </div>
+
+    <component
+      :is="iconComp"
+      v-if="!isMenuMore"
+      v-show="showArrowIcon"
+      :class="[e('icon-arrow')]"
+      :style="iconArrowStyle"
+      class="size-4"
+    />
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
new file mode 100644
index 0000000..6dfeb77
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
@@ -0,0 +1,275 @@
+<script lang="ts" setup>
+import type { HoverCardContentProps } from '@vben-core/shadcn-ui';
+
+import type { MenuItemRegistered, MenuProvider, SubMenuProps } from '../types';
+
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+
+import { useNamespace } from '@vben-core/composables';
+import { VbenHoverCard } from '@vben-core/shadcn-ui';
+
+import {
+  createSubMenuContext,
+  useMenu,
+  useMenuContext,
+  useMenuStyle,
+  useSubMenuContext,
+} from '../hooks';
+import CollapseTransition from './collapse-transition.vue';
+import SubMenuContent from './sub-menu-content.vue';
+
+interface Props extends SubMenuProps {
+  isSubMenuMore?: boolean;
+}
+
+defineOptions({ name: 'SubMenu' });
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  isSubMenuMore: false,
+});
+
+const { parentMenu, parentPaths } = useMenu();
+const { b, is } = useNamespace('sub-menu');
+const nsMenu = useNamespace('menu');
+const rootMenu = useMenuContext();
+const subMenu = useSubMenuContext();
+const subMenuStyle = useMenuStyle(subMenu);
+
+const mouseInChild = ref(false);
+
+const items = ref<MenuProvider['items']>({});
+const subMenus = ref<MenuProvider['subMenus']>({});
+const timer = ref<null | ReturnType<typeof setTimeout>>(null);
+
+createSubMenuContext({
+  addSubMenu,
+  handleMouseleave,
+  level: (subMenu?.level ?? 0) + 1,
+  mouseInChild,
+  removeSubMenu,
+});
+
+const opened = computed(() => {
+  return rootMenu?.openedMenus.includes(props.path);
+});
+const isTopLevelMenuSubmenu = computed(
+  () => parentMenu.value?.type.name === 'Menu',
+);
+const mode = computed(() => rootMenu?.props.mode ?? 'vertical');
+const rounded = computed(() => rootMenu?.props.rounded);
+const currentLevel = computed(() => subMenu?.level ?? 0);
+const isFirstLevel = computed(() => {
+  return currentLevel.value === 1;
+});
+
+const contentProps = computed((): HoverCardContentProps => {
+  const isHorizontal = mode.value === 'horizontal';
+  const side = isHorizontal && isFirstLevel.value ? 'bottom' : 'right';
+  return {
+    collisionPadding: { top: 20 },
+    side,
+    sideOffset: isHorizontal ? 5 : 10,
+  };
+});
+
+const active = computed(() => {
+  let isActive = false;
+
+  Object.values(items.value).forEach((item) => {
+    if (item.active) {
+      isActive = true;
+    }
+  });
+
+  Object.values(subMenus.value).forEach((subItem) => {
+    if (subItem.active) {
+      isActive = true;
+    }
+  });
+  return isActive;
+});
+
+function addSubMenu(subMenu: MenuItemRegistered) {
+  subMenus.value[subMenu.path] = subMenu;
+}
+
+function removeSubMenu(subMenu: MenuItemRegistered) {
+  Reflect.deleteProperty(subMenus.value, subMenu.path);
+}
+
+/**
+ * 点击submenu展开/关闭
+ */
+function handleClick() {
+  const mode = rootMenu?.props.mode;
+  if (
+    // 当前菜单禁用时，不展开
+    props.disabled ||
+    (rootMenu?.props.collapse && mode === 'vertical') ||
+    // 水平模式下不展开
+    mode === 'horizontal'
+  ) {
+    return;
+  }
+
+  rootMenu?.handleSubMenuClick({
+    active: active.value,
+    parentPaths: parentPaths.value,
+    path: props.path,
+  });
+}
+
+function handleMouseenter(event: FocusEvent | MouseEvent, showTimeout = 300) {
+  if (event.type === 'focus') {
+    return;
+  }
+
+  if (
+    (!rootMenu?.props.collapse && rootMenu?.props.mode === 'vertical') ||
+    props.disabled
+  ) {
+    if (subMenu) {
+      subMenu.mouseInChild.value = true;
+    }
+    return;
+  }
+  if (subMenu) {
+    subMenu.mouseInChild.value = true;
+  }
+
+  timer.value && window.clearTimeout(timer.value);
+  timer.value = setTimeout(() => {
+    rootMenu?.openMenu(props.path, parentPaths.value);
+  }, showTimeout);
+  parentMenu.value?.vnode.el?.dispatchEvent(new MouseEvent('mouseenter'));
+}
+
+function handleMouseleave(deepDispatch = false) {
+  if (
+    !rootMenu?.props.collapse &&
+    rootMenu?.props.mode === 'vertical' &&
+    subMenu
+  ) {
+    subMenu.mouseInChild.value = false;
+    return;
+  }
+
+  timer.value && window.clearTimeout(timer.value);
+
+  if (subMenu) {
+    subMenu.mouseInChild.value = false;
+  }
+  timer.value = setTimeout(() => {
+    !mouseInChild.value && rootMenu?.closeMenu(props.path, parentPaths.value);
+  }, 300);
+
+  if (deepDispatch) {
+    subMenu?.handleMouseleave?.(true);
+  }
+}
+
+const menuIcon = computed(() =>
+  active.value ? props.activeIcon || props.icon : props.icon,
+);
+
+const item = reactive({
+  active,
+  parentPaths,
+  path: props.path,
+});
+
+onMounted(() => {
+  subMenu?.addSubMenu?.(item);
+  rootMenu?.addSubMenu?.(item);
+});
+
+onBeforeUnmount(() => {
+  subMenu?.removeSubMenu?.(item);
+  rootMenu?.removeSubMenu?.(item);
+});
+</script>
+<template>
+  <li
+    :class="[
+      b(),
+      is('opened', opened),
+      is('active', active),
+      is('disabled', disabled),
+    ]"
+    @focus="handleMouseenter"
+    @mouseenter="handleMouseenter"
+    @mouseleave="() => handleMouseleave()"
+  >
+    <template v-if="rootMenu.isMenuPopup">
+      <VbenHoverCard
+        :content-class="[
+          rootMenu.theme,
+          nsMenu.e('popup-container'),
+          is(rootMenu.theme, true),
+          opened ? '' : 'hidden',
+          'overflow-auto',
+          'max-h-[calc(var(--reka-hover-card-content-available-height)-20px)]',
+        ]"
+        :content-props="contentProps"
+        :open="true"
+        :open-delay="0"
+      >
+        <template #trigger>
+          <SubMenuContent
+            :class="is('active', active)"
+            :icon="menuIcon"
+            :is-menu-more="isSubMenuMore"
+            :is-top-level-menu-submenu="isTopLevelMenuSubmenu"
+            :level="currentLevel"
+            :path="path"
+            @click.stop="handleClick"
+          >
+            <template #title>
+              <slot name="title"></slot>
+            </template>
+          </SubMenuContent>
+        </template>
+        <div
+          :class="[nsMenu.is(mode, true), nsMenu.e('popup')]"
+          @focus="(e) => handleMouseenter(e, 100)"
+          @mouseenter="(e) => handleMouseenter(e, 100)"
+          @mouseleave="() => handleMouseleave(true)"
+        >
+          <ul
+            :class="[nsMenu.b(), is('rounded', rounded)]"
+            :style="subMenuStyle"
+          >
+            <slot></slot>
+          </ul>
+        </div>
+      </VbenHoverCard>
+    </template>
+
+    <template v-else>
+      <SubMenuContent
+        :class="is('active', active)"
+        :icon="menuIcon"
+        :is-menu-more="isSubMenuMore"
+        :is-top-level-menu-submenu="isTopLevelMenuSubmenu"
+        :level="currentLevel"
+        :path="path"
+        @click.stop="handleClick"
+      >
+        <slot name="content"></slot>
+        <template #title>
+          <slot name="title"></slot>
+        </template>
+      </SubMenuContent>
+      <CollapseTransition>
+        <ul
+          v-show="opened"
+          :class="[nsMenu.b(), is('rounded', rounded)]"
+          :style="subMenuStyle"
+        >
+          <slot></slot>
+        </ul>
+      </CollapseTransition>
+    </template>
+  </li>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/index.ts b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/index.ts
new file mode 100644
index 0000000..f9acf32
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './use-menu';
+export * from './use-menu-context';
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/use-menu-context.ts b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/use-menu-context.ts
new file mode 100644
index 0000000..357b296
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/use-menu-context.ts
@@ -0,0 +1,55 @@
+import type { MenuProvider, SubMenuProvider } from '../types';
+
+import { getCurrentInstance, inject, provide } from 'vue';
+
+import { findComponentUpward } from '../utils';
+
+const menuContextKey = Symbol('menuContext');
+
+/**
+ * @zh_CN Provide menu context
+ */
+function createMenuContext(injectMenuData: MenuProvider) {
+  provide(menuContextKey, injectMenuData);
+}
+
+/**
+ * @zh_CN Provide menu context
+ */
+function createSubMenuContext(injectSubMenuData: SubMenuProvider) {
+  const instance = getCurrentInstance();
+
+  provide(`subMenu:${instance?.uid}`, injectSubMenuData);
+}
+
+/**
+ * @zh_CN Inject menu context
+ */
+function useMenuContext() {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error('instance is required');
+  }
+  const rootMenu = inject(menuContextKey) as MenuProvider;
+  return rootMenu;
+}
+
+/**
+ * @zh_CN Inject menu context
+ */
+function useSubMenuContext() {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error('instance is required');
+  }
+  const parentMenu = findComponentUpward(instance, ['Menu', 'SubMenu']);
+  const subMenu = inject(`subMenu:${parentMenu?.uid}`) as SubMenuProvider;
+  return subMenu;
+}
+
+export {
+  createMenuContext,
+  createSubMenuContext,
+  useMenuContext,
+  useSubMenuContext,
+};
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/use-menu-scroll.ts b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/use-menu-scroll.ts
new file mode 100644
index 0000000..270a034
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/use-menu-scroll.ts
@@ -0,0 +1,46 @@
+import type { Ref } from 'vue';
+
+import { watch } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';
+
+interface UseMenuScrollOptions {
+  delay?: number;
+  enable?: boolean | Ref<boolean>;
+}
+
+export function useMenuScroll(
+  activePath: Ref<string | undefined>,
+  options: UseMenuScrollOptions = {},
+) {
+  const { enable = true, delay = 320 } = options;
+
+  function scrollToActiveItem() {
+    const isEnabled = typeof enable === 'boolean' ? enable : enable.value;
+    if (!isEnabled) return;
+
+    const activeElement = document.querySelector(
+      `aside li[role=menuitem].is-active`,
+    );
+    if (activeElement) {
+      activeElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center',
+      });
+    }
+  }
+
+  const debouncedScroll = useDebounceFn(scrollToActiveItem, delay);
+
+  watch(activePath, () => {
+    const isEnabled = typeof enable === 'boolean' ? enable : enable.value;
+    if (!isEnabled) return;
+
+    debouncedScroll();
+  });
+
+  return {
+    scrollToActiveItem,
+  };
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/use-menu.ts b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/use-menu.ts
new file mode 100644
index 0000000..9207445
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/hooks/use-menu.ts
@@ -0,0 +1,48 @@
+import type { SubMenuProvider } from '../types';
+
+import { computed, getCurrentInstance } from 'vue';
+
+import { findComponentUpward } from '../utils';
+
+function useMenu() {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error('instance is required');
+  }
+
+  /**
+   * @zh_CN 获取所有父级菜单链路
+   */
+  const parentPaths = computed(() => {
+    let parent = instance.parent;
+    const paths: string[] = [instance.props.path as string];
+    while (parent?.type.name !== 'Menu') {
+      if (parent?.props.path) {
+        paths.unshift(parent.props.path as string);
+      }
+      parent = parent?.parent ?? null;
+    }
+
+    return paths;
+  });
+
+  const parentMenu = computed(() => {
+    return findComponentUpward(instance, ['Menu', 'SubMenu']);
+  });
+
+  return {
+    parentMenu,
+    parentPaths,
+  };
+}
+
+function useMenuStyle(menu?: SubMenuProvider) {
+  const subMenuStyle = computed(() => {
+    return {
+      '--menu-level': menu ? (menu?.level ?? 0 + 1) : 0,
+    };
+  });
+  return subMenuStyle;
+}
+
+export { useMenu, useMenuStyle };
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/index.ts b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/index.ts
new file mode 100644
index 0000000..1e3bc14
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/index.ts
@@ -0,0 +1,4 @@
+export { default as MenuBadge } from './components/menu-badge.vue';
+export * from './components/normal-menu';
+export { default as Menu } from './menu.vue';
+export type * from './types';
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/menu.vue b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/menu.vue
new file mode 100644
index 0000000..e9ac6d9
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/menu.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+import type { MenuProps } from './types';
+
+import { useForwardProps } from '@vben-core/composables';
+
+import { Menu } from './components';
+import SubMenu from './sub-menu.vue';
+
+interface Props extends MenuProps {
+  menus: MenuRecordRaw[];
+}
+
+defineOptions({
+  name: 'MenuView',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  collapse: false,
+});
+
+const forward = useForwardProps(props);
+</script>
+
+<template>
+  <Menu v-bind="forward">
+    <template v-for="menu in menus" :key="menu.path">
+      <SubMenu :menu="menu" />
+    </template>
+  </Menu>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/sub-menu.vue b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/sub-menu.vue
new file mode 100644
index 0000000..e4d471f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/sub-menu.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+import { computed } from 'vue';
+
+import { MenuBadge, MenuItem, SubMenu as SubMenuComp } from './components';
+// eslint-disable-next-line import/no-self-import
+import SubMenu from './sub-menu.vue';
+
+interface Props {
+  /**
+   * 菜单项
+   */
+  menu: MenuRecordRaw;
+}
+
+defineOptions({
+  name: 'SubMenuUi',
+});
+
+const props = withDefaults(defineProps<Props>(), {});
+
+/**
+ * 判断是否有子节点，动态渲染 menu-item/sub-menu-item
+ */
+const hasChildren = computed(() => {
+  const { menu } = props;
+  return (
+    Reflect.has(menu, 'children') && !!menu.children && menu.children.length > 0
+  );
+});
+</script>
+
+<template>
+  <MenuItem
+    v-if="!hasChildren"
+    :key="menu.path"
+    :active-icon="menu.activeIcon"
+    :badge="menu.badge"
+    :badge-type="menu.badgeType"
+    :badge-variants="menu.badgeVariants"
+    :icon="menu.icon"
+    :path="menu.path"
+  >
+    <template #title>
+      <span>{{ menu.name }}</span>
+    </template>
+  </MenuItem>
+  <SubMenuComp
+    v-else
+    :key="`${menu.path}_sub`"
+    :active-icon="menu.activeIcon"
+    :icon="menu.icon"
+    :path="menu.path"
+  >
+    <template #content>
+      <MenuBadge
+        :badge="menu.badge"
+        :badge-type="menu.badgeType"
+        :badge-variants="menu.badgeVariants"
+        class="right-6"
+      />
+    </template>
+    <template #title>
+      <span>{{ menu.name }}</span>
+    </template>
+    <template v-for="childItem in menu.children || []" :key="childItem.path">
+      <SubMenu :menu="childItem" />
+    </template>
+  </SubMenuComp>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/types.ts b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/types.ts
new file mode 100644
index 0000000..f3b9c42
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/types.ts
@@ -0,0 +1,145 @@
+import type { Component, Ref } from 'vue';
+
+import type { MenuRecordBadgeRaw, ThemeModeType } from '@vben-core/typings';
+
+interface MenuProps {
+  /**
+   * @zh_CN 是否开启手风琴模式
+   * @default true
+   */
+  accordion?: boolean;
+  /**
+   * @zh_CN 菜单是否折叠
+   * @default false
+   */
+  collapse?: boolean;
+
+  /**
+   * @zh_CN 菜单折叠时是否显示菜单名称
+   * @default false
+   */
+  collapseShowTitle?: boolean;
+
+  /**
+   * @zh_CN 默认激活的菜单
+   */
+  defaultActive?: string;
+
+  /**
+   * @zh_CN 默认展开的菜单
+   */
+  defaultOpeneds?: string[];
+
+  /**
+   * @zh_CN 菜单模式
+   * @default vertical
+   */
+  mode?: 'horizontal' | 'vertical';
+
+  /**
+   * @zh_CN 是否圆润风格
+   * @default true
+   */
+  rounded?: boolean;
+
+  /**
+   * @zh_CN 是否自动滚动到激活的菜单项
+   * @default false
+   */
+  scrollToActive?: boolean;
+
+  /**
+   * @zh_CN 菜单主题
+   * @default dark
+   */
+  theme?: ThemeModeType;
+}
+
+interface SubMenuProps extends MenuRecordBadgeRaw {
+  /**
+   * @zh_CN 激活图标
+   */
+  activeIcon?: string;
+  /**
+   * @zh_CN 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * @zh_CN 图标
+   */
+  icon?: Component | string;
+  /**
+   * @zh_CN submenu 名称
+   */
+  path: string;
+}
+
+interface MenuItemProps extends MenuRecordBadgeRaw {
+  /**
+   * @zh_CN 图标
+   */
+  activeIcon?: string;
+  /**
+   * @zh_CN 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * @zh_CN 图标
+   */
+  icon?: Component | string;
+  /**
+   * @zh_CN menuitem 名称
+   */
+  path: string;
+}
+
+interface MenuItemRegistered {
+  active: boolean;
+  parentPaths: string[];
+  path: string;
+}
+
+interface MenuItemClicked {
+  parentPaths: string[];
+  path: string;
+}
+
+interface MenuProvider {
+  activePath?: string;
+  addMenuItem: (item: MenuItemRegistered) => void;
+
+  addSubMenu: (item: MenuItemRegistered) => void;
+  closeMenu: (path: string, parentLinks: string[]) => void;
+  handleMenuItemClick: (item: MenuItemClicked) => void;
+  handleSubMenuClick: (subMenu: MenuItemRegistered) => void;
+  isMenuPopup: boolean;
+  items: Record<string, MenuItemRegistered>;
+
+  openedMenus: string[];
+  openMenu: (path: string, parentLinks: string[]) => void;
+  props: MenuProps;
+  removeMenuItem: (item: MenuItemRegistered) => void;
+
+  removeSubMenu: (item: MenuItemRegistered) => void;
+
+  subMenus: Record<string, MenuItemRegistered>;
+  theme: string;
+}
+
+interface SubMenuProvider {
+  addSubMenu: (item: MenuItemRegistered) => void;
+  handleMouseleave?: (deepDispatch: boolean) => void;
+  level: number;
+  mouseInChild: Ref<boolean>;
+  removeSubMenu: (item: MenuItemRegistered) => void;
+}
+
+export type {
+  MenuItemClicked,
+  MenuItemProps,
+  MenuItemRegistered,
+  MenuProps,
+  MenuProvider,
+  SubMenuProps,
+  SubMenuProvider,
+};
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/utils/index.ts b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/utils/index.ts
new file mode 100644
index 0000000..23a1b15
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/src/utils/index.ts
@@ -0,0 +1,52 @@
+import type {
+  ComponentInternalInstance,
+  VNode,
+  VNodeChild,
+  VNodeNormalizedChildren,
+} from 'vue';
+
+import { isVNode } from 'vue';
+
+type VNodeChildAtom = Exclude<VNodeChild, Array<any>>;
+type RawSlots = Exclude<VNodeNormalizedChildren, Array<any> | null | string>;
+
+type FlattenVNodes = Array<RawSlots | VNodeChildAtom>;
+
+/**
+ * @zh_CN Find the parent component upward
+ * @param instance
+ * @param parentNames
+ */
+function findComponentUpward(
+  instance: ComponentInternalInstance,
+  parentNames: string[],
+) {
+  let parent = instance.parent;
+  while (parent && !parentNames.includes(parent?.type?.name ?? '')) {
+    parent = parent.parent;
+  }
+  return parent;
+}
+
+const flattedChildren = (
+  children: FlattenVNodes | VNode | VNodeNormalizedChildren,
+): FlattenVNodes => {
+  const vNodes = Array.isArray(children) ? children : [children];
+  const result: FlattenVNodes = [];
+
+  vNodes.forEach((child) => {
+    if (Array.isArray(child)) {
+      result.push(...flattedChildren(child));
+    } else if (isVNode(child) && Array.isArray(child.children)) {
+      result.push(...flattedChildren(child.children));
+    } else {
+      result.push(child);
+      if (isVNode(child) && child.component?.subTree) {
+        result.push(...flattedChildren(child.component.subTree));
+      }
+    }
+  });
+  return result;
+};
+
+export { findComponentUpward, flattedChildren };
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/tailwind.config.mjs b/admin-ui/vue/packages/@core/ui-kit/menu-ui/tailwind.config.mjs
new file mode 100644
index 0000000..f17f556
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/tailwind.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';
diff --git a/admin-ui/vue/packages/@core/ui-kit/menu-ui/tsconfig.json b/admin-ui/vue/packages/@core/ui-kit/menu-ui/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/menu-ui/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/build.config.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/build.config.ts
new file mode 100644
index 0000000..18eaa60
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/build.config.ts
@@ -0,0 +1,21 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    {
+      builder: 'mkdist',
+      input: './src',
+      loaders: ['vue'],
+      pattern: ['**/*.vue'],
+    },
+    {
+      builder: 'mkdist',
+      format: 'esm',
+      input: './src',
+      loaders: ['js'],
+      pattern: ['**/*.ts'],
+    },
+  ],
+});
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/package.json b/admin-ui/vue/packages/@core/ui-kit/popup-ui/package.json
new file mode 100644
index 0000000..3ef78c7
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "@vben-core/popup-ui",
+  "version": "5.2.1",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/uikit/popup-ui"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@vben-core/composables": "workspace:*",
+    "@vben-core/icons": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
+    "@vben-core/typings": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "vue": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/postcss.config.mjs b/admin-ui/vue/packages/@core/ui-kit/popup-ui/postcss.config.mjs
new file mode 100644
index 0000000..3d80704
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts
new file mode 100644
index 0000000..910a461
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts
@@ -0,0 +1,246 @@
+import type { Component, VNode } from 'vue';
+
+import type { Recordable } from '@vben-core/typings';
+
+import type { AlertProps, BeforeCloseScope, PromptProps } from './alert';
+
+import { h, nextTick, ref, render } from 'vue';
+
+import { useSimpleLocale } from '@vben-core/composables';
+import { Input, VbenRenderContent } from '@vben-core/shadcn-ui';
+import { isFunction, isString } from '@vben-core/shared/utils';
+
+import Alert from './alert.vue';
+
+const alerts = ref<Array<{ container: HTMLElement; instance: Component }>>([]);
+
+const { $t } = useSimpleLocale();
+
+export function vbenAlert(options: AlertProps): Promise<void>;
+export function vbenAlert(
+  message: string,
+  options?: Partial<AlertProps>,
+): Promise<void>;
+export function vbenAlert(
+  message: string,
+  title?: string,
+  options?: Partial<AlertProps>,
+): Promise<void>;
+
+export function vbenAlert(
+  arg0: AlertProps | string,
+  arg1?: Partial<AlertProps> | string,
+  arg2?: Partial<AlertProps>,
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const options: AlertProps = isString(arg0)
+      ? {
+          content: arg0,
+        }
+      : { ...arg0 };
+    if (arg1) {
+      if (isString(arg1)) {
+        options.title = arg1;
+      } else if (!isString(arg1)) {
+        // 如果第二个参数是对象，则合并到选项中
+        Object.assign(options, arg1);
+      }
+    }
+
+    if (arg2 && !isString(arg2)) {
+      Object.assign(options, arg2);
+    }
+    // 创建容器元素
+    const container = document.createElement('div');
+    document.body.append(container);
+
+    // 创建一个引用，用于在回调中访问实例
+    const alertRef = { container, instance: null as any };
+
+    const props: AlertProps & Recordable<any> = {
+      onClosed: (isConfirm: boolean) => {
+        // 移除组件实例以及创建的所有dom（恢复页面到打开前的状态）
+        // 从alerts数组中移除该实例
+        alerts.value = alerts.value.filter((item) => item !== alertRef);
+
+        // 从DOM中移除容器
+        render(null, container);
+        if (container.parentNode) {
+          container.remove();
+        }
+
+        // 解析 Promise，传递用户操作结果
+        if (isConfirm) {
+          resolve();
+        } else {
+          reject(new Error('dialog cancelled'));
+        }
+      },
+      ...options,
+      open: true,
+      title: options.title ?? $t.value('prompt'),
+    };
+
+    // 创建Alert组件的VNode
+    const vnode = h(Alert, props);
+
+    // 渲染组件到容器
+    render(vnode, container);
+
+    // 保存组件实例引用
+    alertRef.instance = vnode.component?.proxy as Component;
+
+    // 将实例和容器添加到alerts数组中
+    alerts.value.push(alertRef);
+  });
+}
+
+export function vbenConfirm(options: AlertProps): Promise<void>;
+export function vbenConfirm(
+  message: string,
+  options?: Partial<AlertProps>,
+): Promise<void>;
+export function vbenConfirm(
+  message: string,
+  title?: string,
+  options?: Partial<AlertProps>,
+): Promise<void>;
+
+export function vbenConfirm(
+  arg0: AlertProps | string,
+  arg1?: Partial<AlertProps> | string,
+  arg2?: Partial<AlertProps>,
+): Promise<void> {
+  const defaultProps: Partial<AlertProps> = {
+    showCancel: true,
+  };
+  if (!arg1) {
+    return isString(arg0)
+      ? vbenAlert(arg0, defaultProps)
+      : vbenAlert({ ...defaultProps, ...arg0 });
+  } else if (!arg2) {
+    return isString(arg1)
+      ? vbenAlert(arg0 as string, arg1, defaultProps)
+      : vbenAlert(arg0 as string, { ...defaultProps, ...arg1 });
+  }
+  return vbenAlert(arg0 as string, arg1 as string, {
+    ...defaultProps,
+    ...arg2,
+  });
+}
+
+export async function vbenPrompt<T = any>(
+  options: PromptProps<T>,
+): Promise<T | undefined> {
+  const {
+    component: _component,
+    componentProps: _componentProps,
+    componentSlots,
+    content,
+    defaultValue,
+    modelPropName: _modelPropName,
+    ...delegated
+  } = options;
+
+  const modelValue = ref<T | undefined>(defaultValue);
+  const inputComponentRef = ref<null | VNode>(null);
+  const staticContents: Component[] = [
+    h(VbenRenderContent, { content, renderBr: true }),
+  ];
+
+  const modelPropName = _modelPropName || 'modelValue';
+  const componentProps = { ..._componentProps };
+
+  // 每次渲染时都会重新计算的内容函数
+  const contentRenderer = () => {
+    const currentProps = {
+      ...componentProps,
+      [modelPropName]: modelValue.value,
+      [`onUpdate:${modelPropName}`]: (val: T) => {
+        modelValue.value = val;
+      },
+    };
+
+    // 设置当前值
+
+    // 设置更新处理函数
+
+    // 创建输入组件
+    inputComponentRef.value = h(
+      _component || Input,
+      currentProps,
+      componentSlots,
+    );
+
+    // 返回包含静态内容和输入组件的数组
+    return h(
+      'div',
+      { class: 'flex flex-col gap-2' },
+      { default: () => [...staticContents, inputComponentRef.value] },
+    );
+  };
+
+  const props: AlertProps & Recordable<any> = {
+    ...delegated,
+    async beforeClose(scope: BeforeCloseScope) {
+      if (delegated.beforeClose) {
+        return await delegated.beforeClose({
+          ...scope,
+          value: modelValue.value,
+        });
+      }
+    },
+    // 使用函数形式，每次渲染都会重新计算内容
+    content: contentRenderer,
+    contentMasking: true,
+    async onOpened() {
+      await nextTick();
+      const componentRef: null | VNode = inputComponentRef.value;
+      if (componentRef) {
+        if (
+          componentRef.component?.exposed &&
+          isFunction(componentRef.component.exposed.focus)
+        ) {
+          componentRef.component.exposed.focus();
+        } else {
+          if (componentRef.el) {
+            if (
+              isFunction(componentRef.el.focus) &&
+              ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(
+                componentRef.el.tagName,
+              )
+            ) {
+              componentRef.el.focus();
+            } else if (isFunction(componentRef.el.querySelector)) {
+              const focusableElement = componentRef.el.querySelector(
+                'input, select, textarea, button',
+              );
+              if (focusableElement && isFunction(focusableElement.focus)) {
+                focusableElement.focus();
+              }
+            } else if (
+              componentRef.el.nextElementSibling &&
+              isFunction(componentRef.el.nextElementSibling.focus)
+            ) {
+              componentRef.el.nextElementSibling.focus();
+            }
+          }
+        }
+      }
+    },
+  };
+
+  await vbenConfirm(props);
+  return modelValue.value;
+}
+
+export function clearAllAlerts() {
+  alerts.value.forEach((alert) => {
+    // 从DOM中移除容器
+    render(null, alert.container);
+    if (alert.container.parentNode) {
+      alert.container.remove();
+    }
+  });
+  alerts.value = [];
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/alert.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/alert.ts
new file mode 100644
index 0000000..5a214fa
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/alert.ts
@@ -0,0 +1,99 @@
+import type { Component, VNode, VNodeArrayChildren } from 'vue';
+
+import type { Recordable } from '@vben-core/typings';
+
+import { createContext } from '@vben-core/shadcn-ui';
+
+export type IconType = 'error' | 'info' | 'question' | 'success' | 'warning';
+
+export type BeforeCloseScope = {
+  isConfirm: boolean;
+};
+
+export type AlertProps = {
+  /** 关闭前的回调，如果返回false，则终止关闭 */
+  beforeClose?: (
+    scope: BeforeCloseScope,
+  ) => boolean | Promise<boolean | undefined> | undefined;
+  /** 边框 */
+  bordered?: boolean;
+  /**
+   * 按钮对齐方式
+   * @default 'end'
+   */
+  buttonAlign?: 'center' | 'end' | 'start';
+  /** 取消按钮的标题 */
+  cancelText?: string;
+  /** 是否居中显示 */
+  centered?: boolean;
+  /** 确认按钮的标题 */
+  confirmText?: string;
+  /** 弹窗容器的额外样式 */
+  containerClass?: string;
+  /** 弹窗提示内容 */
+  content: Component | string;
+  /** 弹窗内容的额外样式 */
+  contentClass?: string;
+  /** 执行beforeClose回调期间，在内容区域显示一个loading遮罩*/
+  contentMasking?: boolean;
+  /** 弹窗底部内容（与按钮在同一个容器中） */
+  footer?: Component | string;
+  /** 弹窗的图标（在标题的前面） */
+  icon?: Component | IconType;
+  /**
+   * 弹窗遮罩模糊效果
+   */
+  overlayBlur?: number;
+  /** 是否显示取消按钮 */
+  showCancel?: boolean;
+  /** 弹窗标题 */
+  title?: string;
+};
+
+/** Prompt属性 */
+export type PromptProps<T = any> = {
+  /** 关闭前的回调，如果返回false，则终止关闭 */
+  beforeClose?: (scope: {
+    isConfirm: boolean;
+    value: T | undefined;
+  }) => boolean | Promise<boolean | undefined> | undefined;
+  /** 用于接受用户输入的组件 */
+  component?: Component;
+  /** 输入组件的属性 */
+  componentProps?: Recordable<any>;
+  /** 输入组件的插槽 */
+  componentSlots?:
+    | (() => any)
+    | Recordable<unknown>
+    | VNode
+    | VNodeArrayChildren;
+  /** 默认值 */
+  defaultValue?: T;
+  /** 输入组件的值属性名 */
+  modelPropName?: string;
+} & Omit<AlertProps, 'beforeClose'>;
+
+/**
+ * Alert上下文
+ */
+export type AlertContext = {
+  /** 执行取消操作 */
+  doCancel: () => void;
+  /** 执行确认操作 */
+  doConfirm: () => void;
+};
+
+export const [injectAlertContext, provideAlertContext] =
+  createContext<AlertContext>('VbenAlertContext');
+
+/**
+ * 获取Alert上下文
+ * @returns AlertContext
+ */
+export function useAlertContext() {
+  const context = injectAlertContext();
+  if (!context) {
+    throw new Error('useAlertContext must be used within an AlertProvider');
+  }
+  return context;
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/alert.vue b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
new file mode 100644
index 0000000..6b52a11
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import type { Component } from 'vue';
+
+import type { AlertProps } from './alert';
+
+import { computed, h, nextTick, ref } from 'vue';
+
+import { useSimpleLocale } from '@vben-core/composables';
+import {
+  CircleAlert,
+  CircleCheckBig,
+  CircleHelp,
+  CircleX,
+  Info,
+  X,
+} from '@vben-core/icons';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  VbenButton,
+  VbenLoading,
+  VbenRenderContent,
+} from '@vben-core/shadcn-ui';
+import { globalShareState } from '@vben-core/shared/global-state';
+import { cn } from '@vben-core/shared/utils';
+
+import { provideAlertContext } from './alert';
+
+const props = withDefaults(defineProps<AlertProps>(), {
+  bordered: true,
+  buttonAlign: 'end',
+  centered: true,
+});
+const emits = defineEmits(['closed', 'confirm', 'opened']);
+const open = defineModel<boolean>('open', { default: false });
+const { $t } = useSimpleLocale();
+const components = globalShareState.getComponents();
+const isConfirm = ref(false);
+
+function onAlertClosed() {
+  emits('closed', isConfirm.value);
+  isConfirm.value = false;
+}
+
+function onEscapeKeyDown() {
+  isConfirm.value = false;
+}
+
+const getIconRender = computed(() => {
+  let iconRender: Component | null = null;
+  if (props.icon) {
+    if (typeof props.icon === 'string') {
+      switch (props.icon) {
+        case 'error': {
+          iconRender = h(CircleX, {
+            style: { color: 'hsl(var(--destructive))' },
+          });
+          break;
+        }
+        case 'info': {
+          iconRender = h(Info, { style: { color: 'hsl(var(--info))' } });
+          break;
+        }
+        case 'question': {
+          iconRender = CircleHelp;
+          break;
+        }
+        case 'success': {
+          iconRender = h(CircleCheckBig, {
+            style: { color: 'hsl(var(--success))' },
+          });
+          break;
+        }
+        case 'warning': {
+          iconRender = h(CircleAlert, {
+            style: { color: 'hsl(var(--warning))' },
+          });
+          break;
+        }
+        default: {
+          iconRender = null;
+          break;
+        }
+      }
+    }
+  } else {
+    iconRender = props.icon ?? null;
+  }
+  return iconRender;
+});
+
+function doCancel() {
+  handleCancel();
+  handleOpenChange(false);
+}
+
+function doConfirm() {
+  handleConfirm();
+  handleOpenChange(false);
+}
+
+provideAlertContext({
+  doCancel,
+  doConfirm,
+});
+
+function handleConfirm() {
+  isConfirm.value = true;
+  emits('confirm');
+}
+
+function handleCancel() {
+  isConfirm.value = false;
+}
+
+const loading = ref(false);
+async function handleOpenChange(val: boolean) {
+  await nextTick(); // 等待标记isConfirm状态
+  if (!val && props.beforeClose) {
+    loading.value = true;
+    try {
+      const res = await props.beforeClose({ isConfirm: isConfirm.value });
+      if (res !== false) {
+        open.value = false;
+      }
+    } finally {
+      loading.value = false;
+    }
+  } else {
+    open.value = val;
+  }
+}
+</script>
+<template>
+  <AlertDialog :open="open" @update:open="handleOpenChange">
+    <AlertDialogContent
+      :open="open"
+      :centered="centered"
+      :overlay-blur="overlayBlur"
+      @opened="emits('opened')"
+      @closed="onAlertClosed"
+      @escape-key-down="onEscapeKeyDown"
+      :class="
+        cn(
+          containerClass,
+          'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-[var(--radius)]',
+          {
+            'border border-border': bordered,
+            'shadow-3xl': !bordered,
+          },
+        )
+      "
+    >
+      <div :class="cn('relative flex-1 overflow-y-auto p-3', contentClass)">
+        <AlertDialogTitle v-if="title">
+          <div class="flex items-center">
+            <component :is="getIconRender" class="mr-2" />
+            <span class="flex-auto">{{ $t(title) }}</span>
+            <AlertDialogCancel v-if="showCancel" as-child>
+              <VbenButton
+                variant="ghost"
+                size="icon"
+                class="rounded-full"
+                :disabled="loading"
+                @click="handleCancel"
+              >
+                <X class="size-4 text-muted-foreground" />
+              </VbenButton>
+            </AlertDialogCancel>
+          </div>
+        </AlertDialogTitle>
+        <AlertDialogDescription>
+          <div class="m-4 min-h-[30px]">
+            <VbenRenderContent :content="content" render-br />
+          </div>
+          <VbenLoading v-if="loading && contentMasking" :spinning="loading" />
+        </AlertDialogDescription>
+        <div
+          class="flex items-center justify-end gap-x-2"
+          :class="`justify-${buttonAlign}`"
+        >
+          <VbenRenderContent :content="footer" />
+          <AlertDialogCancel v-if="showCancel" as-child>
+            <component
+              :is="components.DefaultButton || VbenButton"
+              :disabled="loading"
+              variant="ghost"
+              @click="handleCancel"
+            >
+              {{ cancelText || $t('cancel') }}
+            </component>
+          </AlertDialogCancel>
+          <AlertDialogAction as-child>
+            <component
+              :is="components.PrimaryButton || VbenButton"
+              :loading="loading"
+              @click="handleConfirm"
+            >
+              {{ confirmText || $t('confirm') }}
+            </component>
+          </AlertDialogAction>
+        </div>
+      </div>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/index.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/index.ts
new file mode 100644
index 0000000..8419b5b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/alert/index.ts
@@ -0,0 +1,14 @@
+export type {
+  AlertProps,
+  BeforeCloseScope,
+  IconType,
+  PromptProps,
+} from './alert';
+export { useAlertContext } from './alert';
+export { default as Alert } from './alert.vue';
+export {
+  vbenAlert as alert,
+  clearAllAlerts,
+  vbenConfirm as confirm,
+  vbenPrompt as prompt,
+} from './AlertBuilder';
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
new file mode 100644
index 0000000..365a2e4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
@@ -0,0 +1,116 @@
+import type { DrawerState } from '../drawer';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { DrawerApi } from '../drawer-api';
+
+// 模拟 Store 类
+vi.mock('@vben-core/shared/store', () => {
+  return {
+    isFunction: (fn: any) => typeof fn === 'function',
+    Store: class {
+      get state() {
+        return this._state;
+      }
+      private _state: DrawerState;
+
+      private options: any;
+
+      constructor(initialState: DrawerState, options: any) {
+        this._state = initialState;
+        this.options = options;
+      }
+
+      batch(cb: () => void) {
+        cb();
+      }
+
+      setState(fn: (prev: DrawerState) => DrawerState) {
+        this._state = fn(this._state);
+        this.options.onUpdate();
+      }
+    },
+  };
+});
+
+describe('drawerApi', () => {
+  let drawerApi: DrawerApi;
+  let drawerState: DrawerState;
+
+  beforeEach(() => {
+    drawerApi = new DrawerApi();
+    drawerState = drawerApi.store.state;
+  });
+
+  it('should initialize with default state', () => {
+    expect(drawerState.isOpen).toBe(false);
+    expect(drawerState.cancelText).toBe(undefined);
+    expect(drawerState.confirmText).toBe(undefined);
+  });
+
+  it('should open the drawer', () => {
+    drawerApi.open();
+    expect(drawerApi.store.state.isOpen).toBe(true);
+  });
+
+  it('should close the drawer if onBeforeClose allows it', () => {
+    drawerApi.close();
+    expect(drawerApi.store.state.isOpen).toBe(false);
+  });
+
+  it('should not close the drawer if onBeforeClose returns false', () => {
+    const onBeforeClose = vi.fn(() => false);
+    const drawerApiWithHook = new DrawerApi({ onBeforeClose });
+    drawerApiWithHook.open();
+    drawerApiWithHook.close();
+    expect(drawerApiWithHook.store.state.isOpen).toBe(true);
+    expect(onBeforeClose).toHaveBeenCalled();
+  });
+
+  it('should trigger onCancel and keep drawer open if onCancel is provided', () => {
+    const onCancel = vi.fn();
+    const drawerApiWithHook = new DrawerApi({ onCancel });
+    drawerApiWithHook.open();
+    drawerApiWithHook.onCancel();
+    expect(onCancel).toHaveBeenCalled();
+    expect(drawerApiWithHook.store.state.isOpen).toBe(true); // 关闭逻辑不在 onCancel 内
+  });
+
+  it('should update shared data correctly', () => {
+    const testData = { key: 'value' };
+    drawerApi.setData(testData);
+    expect(drawerApi.getData()).toEqual(testData);
+  });
+
+  it('should set state correctly using an object', () => {
+    drawerApi.setState({ title: 'New Title' });
+    expect(drawerApi.store.state.title).toBe('New Title');
+  });
+
+  it('should set state correctly using a function', () => {
+    drawerApi.setState((prev) => ({ ...prev, confirmText: 'Yes' }));
+    expect(drawerApi.store.state.confirmText).toBe('Yes');
+  });
+
+  it('should call onOpenChange when state changes', () => {
+    const onOpenChange = vi.fn();
+    const drawerApiWithHook = new DrawerApi({ onOpenChange });
+    drawerApiWithHook.open();
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it('should call onClosed callback when provided', () => {
+    const onClosed = vi.fn();
+    const drawerApiWithHook = new DrawerApi({ onClosed });
+    drawerApiWithHook.onClosed();
+    expect(onClosed).toHaveBeenCalled();
+  });
+
+  it('should call onOpened callback when provided', () => {
+    const onOpened = vi.fn();
+    const drawerApiWithHook = new DrawerApi({ onOpened });
+    drawerApiWithHook.open();
+    drawerApiWithHook.onOpened();
+    expect(onOpened).toHaveBeenCalled();
+  });
+});
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
new file mode 100644
index 0000000..a4a3ac4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
@@ -0,0 +1,183 @@
+import type { DrawerApiOptions, DrawerState } from './drawer';
+
+import { Store } from '@vben-core/shared/store';
+import { bindMethods, isFunction } from '@vben-core/shared/utils';
+
+export class DrawerApi {
+  // 共享数据
+  public sharedData: Record<'payload', any> = {
+    payload: {},
+  };
+  public store: Store<DrawerState>;
+
+  private api: Pick<
+    DrawerApiOptions,
+    | 'onBeforeClose'
+    | 'onCancel'
+    | 'onClosed'
+    | 'onConfirm'
+    | 'onOpenChange'
+    | 'onOpened'
+  >;
+
+  // private prevState!: DrawerState;
+  private state!: DrawerState;
+
+  constructor(options: DrawerApiOptions = {}) {
+    const {
+      connectedComponent: _,
+      onBeforeClose,
+      onCancel,
+      onClosed,
+      onConfirm,
+      onOpenChange,
+      onOpened,
+      ...storeState
+    } = options;
+
+    const defaultState: DrawerState = {
+      class: '',
+      closable: true,
+      closeIconPlacement: 'right',
+      closeOnClickModal: true,
+      closeOnPressEscape: true,
+      confirmLoading: false,
+      contentClass: '',
+      footer: true,
+      header: true,
+      isOpen: false,
+      loading: false,
+      modal: true,
+      openAutoFocus: false,
+      placement: 'right',
+      showCancelButton: true,
+      showConfirmButton: true,
+      submitting: false,
+      title: '',
+    };
+
+    this.store = new Store<DrawerState>(
+      {
+        ...defaultState,
+        ...storeState,
+      },
+      {
+        onUpdate: () => {
+          const state = this.store.state;
+          if (state?.isOpen === this.state?.isOpen) {
+            this.state = state;
+          } else {
+            this.state = state;
+            this.api.onOpenChange?.(!!state?.isOpen);
+          }
+        },
+      },
+    );
+    this.state = this.store.state;
+    this.api = {
+      onBeforeClose,
+      onCancel,
+      onClosed,
+      onConfirm,
+      onOpenChange,
+      onOpened,
+    };
+    bindMethods(this);
+  }
+
+  /**
+   * 关闭抽屉
+   * @description 关闭抽屉时会调用 onBeforeClose 钩子函数，如果 onBeforeClose 返回 false，则不关闭弹窗
+   */
+  async close() {
+    // 通过 onBeforeClose 钩子函数来判断是否允许关闭弹窗
+    // 如果 onBeforeClose 返回 false，则不关闭弹窗
+    const allowClose = (await this.api.onBeforeClose?.()) ?? true;
+    if (allowClose) {
+      this.store.setState((prev) => ({
+        ...prev,
+        isOpen: false,
+        submitting: false,
+      }));
+    }
+  }
+
+  getData<T extends object = Record<string, any>>() {
+    return (this.sharedData?.payload ?? {}) as T;
+  }
+
+  /**
+   * 锁定抽屉状态（用于提交过程中的等待状态）
+   * @description 锁定状态将禁用默认的取消按钮，使用spinner覆盖抽屉内容，隐藏关闭按钮，阻止手动关闭弹窗，将默认的提交按钮标记为loading状态
+   * @param isLocked 是否锁定
+   */
+  lock(isLocked: boolean = true) {
+    return this.setState({ submitting: isLocked });
+  }
+
+  /**
+   * 取消操作
+   */
+  onCancel() {
+    if (this.api.onCancel) {
+      this.api.onCancel?.();
+    } else {
+      this.close();
+    }
+  }
+
+  /**
+   * 弹窗关闭动画播放完毕后的回调
+   */
+  onClosed() {
+    if (!this.state.isOpen) {
+      this.api.onClosed?.();
+    }
+  }
+
+  /**
+   * 确认操作
+   */
+  onConfirm() {
+    this.api.onConfirm?.();
+  }
+
+  /**
+   * 弹窗打开动画播放完毕后的回调
+   */
+  onOpened() {
+    if (this.state.isOpen) {
+      this.api.onOpened?.();
+    }
+  }
+
+  open() {
+    this.store.setState((prev) => ({ ...prev, isOpen: true }));
+  }
+
+  setData<T>(payload: T) {
+    this.sharedData.payload = payload;
+    return this;
+  }
+
+  setState(
+    stateOrFn:
+      | ((prev: DrawerState) => Partial<DrawerState>)
+      | Partial<DrawerState>,
+  ) {
+    if (isFunction(stateOrFn)) {
+      this.store.setState(stateOrFn);
+    } else {
+      this.store.setState((prev) => ({ ...prev, ...stateOrFn }));
+    }
+    return this;
+  }
+
+  /**
+   * 解除抽屉的锁定状态
+   * @description 解除由lock方法设置的锁定状态，是lock(false)的别名
+   */
+  unlock() {
+    return this.lock(false);
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
new file mode 100644
index 0000000..89cd3b5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
@@ -0,0 +1,179 @@
+import type { Component, Ref } from 'vue';
+
+import type { ClassType, MaybePromise } from '@vben-core/typings';
+
+import type { DrawerApi } from './drawer-api';
+
+export type DrawerPlacement = 'bottom' | 'left' | 'right' | 'top';
+
+export type CloseIconPlacement = 'left' | 'right';
+
+export interface DrawerProps {
+  /**
+   * 是否挂载到内容区域
+   * @default false
+   */
+  appendToMain?: boolean;
+  /**
+   * 取消按钮文字
+   */
+  cancelText?: string;
+  class?: ClassType;
+  /**
+   * 是否显示关闭按钮
+   * @default true
+   */
+  closable?: boolean;
+  /**
+   * 关闭按钮的位置
+   */
+  closeIconPlacement?: CloseIconPlacement;
+  /**
+   * 点击弹窗遮罩是否关闭弹窗
+   * @default true
+   */
+  closeOnClickModal?: boolean;
+  /**
+   * 按下 ESC 键是否关闭弹窗
+   * @default true
+   */
+  closeOnPressEscape?: boolean;
+  /**
+   * 确定按钮 loading
+   * @default false
+   */
+  confirmLoading?: boolean;
+  /**
+   * 确定按钮文字
+   */
+  confirmText?: string;
+  contentClass?: string;
+  /**
+   * 弹窗描述
+   */
+  description?: string;
+  /**
+   * 在关闭时销毁抽屉
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 是否显示底部
+   * @default true
+   */
+  footer?: boolean;
+  /**
+   * 弹窗底部样式
+   */
+  footerClass?: ClassType;
+  /**
+   * 是否显示顶栏
+   * @default true
+   */
+  header?: boolean;
+  /**
+   * 弹窗头部样式
+   */
+  headerClass?: ClassType;
+  /**
+   * 弹窗是否显示
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 是否显示遮罩
+   * @default true
+   */
+  modal?: boolean;
+
+  /**
+   * 是否自动聚焦
+   */
+  openAutoFocus?: boolean;
+  /**
+   * 弹窗遮罩模糊效果
+   */
+  overlayBlur?: number;
+  /**
+   * 抽屉位置
+   * @default right
+   */
+  placement?: DrawerPlacement;
+
+  /**
+   * 是否显示取消按钮
+   * @default true
+   */
+  showCancelButton?: boolean;
+  /**
+   * 是否显示确认按钮
+   * @default true
+   */
+  showConfirmButton?: boolean;
+  /**
+   * 提交中（锁定抽屉状态）
+   */
+  submitting?: boolean;
+  /**
+   * 弹窗标题
+   */
+  title?: string;
+  /**
+   * 弹窗标题提示
+   */
+  titleTooltip?: string;
+  /**
+   * 抽屉层级
+   */
+  zIndex?: number;
+}
+
+export interface DrawerState extends DrawerProps {
+  /** 弹窗打开状态 */
+  isOpen?: boolean;
+  /**
+   * 共享数据
+   */
+  sharedData?: Record<string, any>;
+}
+
+export type ExtendedDrawerApi = DrawerApi & {
+  useStore: <T = NoInfer<DrawerState>>(
+    selector?: (state: NoInfer<DrawerState>) => T,
+  ) => Readonly<Ref<T>>;
+};
+
+export interface DrawerApiOptions extends DrawerState {
+  /**
+   * 独立的抽屉组件
+   */
+  connectedComponent?: Component;
+  /**
+   * 关闭前的回调，返回 false 可以阻止关闭
+   * @returns
+   */
+  onBeforeClose?: () => MaybePromise<boolean | undefined>;
+  /**
+   * 点击取消按钮的回调
+   */
+  onCancel?: () => void;
+  /**
+   * 弹窗关闭动画结束的回调
+   * @returns
+   */
+  onClosed?: () => void;
+  /**
+   * 点击确定按钮的回调
+   */
+  onConfirm?: () => void;
+  /**
+   * 弹窗状态变化回调
+   * @param isOpen
+   * @returns
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * 弹窗打开动画结束的回调
+   * @returns
+   */
+  onOpened?: () => void;
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
new file mode 100644
index 0000000..b064444
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -0,0 +1,332 @@
+<script lang="ts" setup>
+import type { DrawerProps, ExtendedDrawerApi } from './drawer';
+
+import {
+  computed,
+  onDeactivated,
+  provide,
+  ref,
+  unref,
+  useId,
+  watch,
+} from 'vue';
+
+import {
+  useIsMobile,
+  usePriorityValues,
+  useSimpleLocale,
+} from '@vben-core/composables';
+import { X } from '@vben-core/icons';
+import {
+  Separator,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  VbenButton,
+  VbenHelpTooltip,
+  VbenIconButton,
+  VbenLoading,
+  VisuallyHidden,
+} from '@vben-core/shadcn-ui';
+import { ELEMENT_ID_MAIN_CONTENT } from '@vben-core/shared/constants';
+import { globalShareState } from '@vben-core/shared/global-state';
+import { cn } from '@vben-core/shared/utils';
+
+interface Props extends DrawerProps {
+  drawerApi?: ExtendedDrawerApi;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  appendToMain: false,
+  closeIconPlacement: 'right',
+  destroyOnClose: false,
+  drawerApi: undefined,
+  submitting: false,
+  zIndex: 1000,
+});
+
+const components = globalShareState.getComponents();
+
+const id = useId();
+provide('DISMISSABLE_DRAWER_ID', id);
+
+const wrapperRef = ref<HTMLElement>();
+const { $t } = useSimpleLocale();
+const { isMobile } = useIsMobile();
+
+const state = props.drawerApi?.useStore?.();
+
+const {
+  appendToMain,
+  cancelText,
+  class: drawerClass,
+  closable,
+  closeIconPlacement,
+  closeOnClickModal,
+  closeOnPressEscape,
+  confirmLoading,
+  confirmText,
+  contentClass,
+  description,
+  destroyOnClose,
+  footer: showFooter,
+  footerClass,
+  header: showHeader,
+  headerClass,
+  loading: showLoading,
+  modal,
+  openAutoFocus,
+  overlayBlur,
+  placement,
+  showCancelButton,
+  showConfirmButton,
+  submitting,
+  title,
+  titleTooltip,
+  zIndex,
+} = usePriorityValues(props, state);
+
+// watch(
+//   () => showLoading.value,
+//   (v) => {
+//     if (v && wrapperRef.value) {
+//       wrapperRef.value.scrollTo({
+//         // behavior: 'smooth',
+//         top: 0,
+//       });
+//     }
+//   },
+// );
+
+/**
+ * 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
+ */
+onDeactivated(() => {
+  // 如果弹窗没有被挂载到内容区域，则关闭弹窗
+  if (!appendToMain.value) {
+    props.drawerApi?.close();
+  }
+});
+
+function interactOutside(e: Event) {
+  if (!closeOnClickModal.value || submitting.value) {
+    e.preventDefault();
+  }
+}
+function escapeKeyDown(e: KeyboardEvent) {
+  if (!closeOnPressEscape.value || submitting.value) {
+    e.preventDefault();
+  }
+}
+// pointer-down-outside
+function pointerDownOutside(e: Event) {
+  const target = e.target as HTMLElement;
+  const dismissableDrawer = target?.dataset.dismissableDrawer;
+  if (
+    submitting.value ||
+    !closeOnClickModal.value ||
+    dismissableDrawer !== id
+  ) {
+    e.preventDefault();
+  }
+}
+
+function handerOpenAutoFocus(e: Event) {
+  if (!openAutoFocus.value) {
+    e?.preventDefault();
+  }
+}
+
+function handleFocusOutside(e: Event) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+
+const getAppendTo = computed(() => {
+  return appendToMain.value
+    ? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
+    : undefined;
+});
+
+/**
+ * destroyOnClose功能完善
+ */
+// 是否打开过
+const hasOpened = ref(false);
+const isClosed = ref(true);
+watch(
+  () => state?.value?.isOpen,
+  (value) => {
+    isClosed.value = false;
+    if (value && !unref(hasOpened)) {
+      hasOpened.value = true;
+    }
+  },
+);
+function handleClosed() {
+  isClosed.value = true;
+  props.drawerApi?.onClosed();
+}
+const getForceMount = computed(() => {
+  return !unref(destroyOnClose) && unref(hasOpened);
+});
+</script>
+<template>
+  <Sheet
+    :modal="false"
+    :open="state?.isOpen"
+    @update:open="() => drawerApi?.close()"
+  >
+    <SheetContent
+      :append-to="getAppendTo"
+      :class="
+        cn('flex w-[520px] flex-col', drawerClass, {
+          '!w-full': isMobile || placement === 'bottom' || placement === 'top',
+          'max-h-[100vh]': placement === 'bottom' || placement === 'top',
+          hidden: isClosed,
+        })
+      "
+      :modal="modal"
+      :open="state?.isOpen"
+      :side="placement"
+      :z-index="zIndex"
+      :force-mount="getForceMount"
+      :overlay-blur="overlayBlur"
+      @close-auto-focus="handleFocusOutside"
+      @closed="handleClosed"
+      @escape-key-down="escapeKeyDown"
+      @focus-outside="handleFocusOutside"
+      @interact-outside="interactOutside"
+      @open-auto-focus="handerOpenAutoFocus"
+      @opened="() => drawerApi?.onOpened()"
+      @pointer-down-outside="pointerDownOutside"
+    >
+      <SheetHeader
+        v-if="showHeader"
+        :class="
+          cn(
+            '!flex flex-row items-center justify-between border-b px-6 py-5',
+            headerClass,
+            {
+              'px-4 py-3': closable,
+              'pl-2': closable && closeIconPlacement === 'left',
+            },
+          )
+        "
+      >
+        <div class="flex items-center">
+          <SheetClose
+            v-if="closable && closeIconPlacement === 'left'"
+            as-child
+            :disabled="submitting"
+            class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"
+          >
+            <slot name="close-icon">
+              <VbenIconButton>
+                <X class="size-4" />
+              </VbenIconButton>
+            </slot>
+          </SheetClose>
+          <Separator
+            v-if="closable && closeIconPlacement === 'left'"
+            class="ml-1 mr-2 h-8"
+            decorative
+            orientation="vertical"
+          />
+          <SheetTitle v-if="title" class="text-left">
+            <slot name="title">
+              {{ title }}
+
+              <VbenHelpTooltip v-if="titleTooltip" trigger-class="pb-1">
+                {{ titleTooltip }}
+              </VbenHelpTooltip>
+            </slot>
+          </SheetTitle>
+          <SheetDescription v-if="description" class="mt-1 text-xs">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </SheetDescription>
+        </div>
+
+        <VisuallyHidden v-if="!title || !description">
+          <SheetTitle v-if="!title" />
+          <SheetDescription v-if="!description" />
+        </VisuallyHidden>
+
+        <div class="flex-center">
+          <slot name="extra"></slot>
+          <SheetClose
+            v-if="closable && closeIconPlacement === 'right'"
+            as-child
+            :disabled="submitting"
+            class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"
+          >
+            <slot name="close-icon">
+              <VbenIconButton>
+                <X class="size-4" />
+              </VbenIconButton>
+            </slot>
+          </SheetClose>
+        </div>
+      </SheetHeader>
+      <template v-else>
+        <VisuallyHidden>
+          <SheetTitle />
+          <SheetDescription />
+        </VisuallyHidden>
+      </template>
+      <div
+        ref="wrapperRef"
+        :class="
+          cn('relative flex-1 overflow-y-auto p-3', contentClass, {
+            'pointer-events-none': showLoading || submitting,
+          })
+        "
+      >
+        <slot></slot>
+      </div>
+      <VbenLoading v-if="showLoading || submitting" spinning />
+      <SheetFooter
+        v-if="showFooter"
+        :class="
+          cn(
+            'w-full flex-row items-center justify-end border-t p-2 px-3',
+            footerClass,
+          )
+        "
+      >
+        <slot name="prepend-footer"></slot>
+        <slot name="footer">
+          <component
+            :is="components.DefaultButton || VbenButton"
+            v-if="showCancelButton"
+            variant="ghost"
+            :disabled="submitting"
+            @click="() => drawerApi?.onCancel()"
+          >
+            <slot name="cancelText">
+              {{ cancelText || $t('cancel') }}
+            </slot>
+          </component>
+          <slot name="center-footer"></slot>
+          <component
+            :is="components.PrimaryButton || VbenButton"
+            v-if="showConfirmButton"
+            :loading="confirmLoading || submitting"
+            @click="() => drawerApi?.onConfirm()"
+          >
+            <slot name="confirmText">
+              {{ confirmText || $t('confirm') }}
+            </slot>
+          </component>
+        </slot>
+        <slot name="append-footer"></slot>
+      </SheetFooter>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/index.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/index.ts
new file mode 100644
index 0000000..00f87b2
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/index.ts
@@ -0,0 +1,3 @@
+export type * from './drawer';
+export { default as VbenDrawer } from './drawer.vue';
+export { setDefaultDrawerProps, useVbenDrawer } from './use-drawer';
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
new file mode 100644
index 0000000..86555e3
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
@@ -0,0 +1,142 @@
+import type {
+  DrawerApiOptions,
+  DrawerProps,
+  ExtendedDrawerApi,
+} from './drawer';
+
+import {
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  provide,
+  reactive,
+  ref,
+} from 'vue';
+
+import { useStore } from '@vben-core/shared/store';
+
+import { DrawerApi } from './drawer-api';
+import VbenDrawer from './drawer.vue';
+
+const USER_DRAWER_INJECT_KEY = Symbol('VBEN_DRAWER_INJECT');
+
+const DEFAULT_DRAWER_PROPS: Partial<DrawerProps> = {};
+
+export function setDefaultDrawerProps(props: Partial<DrawerProps>) {
+  Object.assign(DEFAULT_DRAWER_PROPS, props);
+}
+
+export function useVbenDrawer<
+  TParentDrawerProps extends DrawerProps = DrawerProps,
+>(options: DrawerApiOptions = {}) {
+  // Drawer一般会抽离出来，所以如果有传入 connectedComponent，则表示为外部调用，与内部组件进行连接
+  // 外部的Drawer通过provide/inject传递api
+
+  const { connectedComponent } = options;
+  if (connectedComponent) {
+    const extendedApi = reactive({});
+    const isDrawerReady = ref(true);
+    const Drawer = defineComponent(
+      (props: TParentDrawerProps, { attrs, slots }) => {
+        provide(USER_DRAWER_INJECT_KEY, {
+          extendApi(api: ExtendedDrawerApi) {
+            // 不能直接给 reactive 赋值，会丢失响应
+            // 不能用 Object.assign,会丢失 api 的原型函数
+            Object.setPrototypeOf(extendedApi, api);
+          },
+          options,
+          async reCreateDrawer() {
+            isDrawerReady.value = false;
+            await nextTick();
+            isDrawerReady.value = true;
+          },
+        });
+        checkProps(extendedApi as ExtendedDrawerApi, {
+          ...props,
+          ...attrs,
+          ...slots,
+        });
+        return () =>
+          h(
+            isDrawerReady.value ? connectedComponent : 'div',
+            { ...props, ...attrs },
+            slots,
+          );
+      },
+      // eslint-disable-next-line vue/one-component-per-file
+      {
+        name: 'VbenParentDrawer',
+        inheritAttrs: false,
+      },
+    );
+
+    return [Drawer, extendedApi as ExtendedDrawerApi] as const;
+  }
+
+  const injectData = inject<any>(USER_DRAWER_INJECT_KEY, {});
+
+  const mergedOptions = {
+    ...DEFAULT_DRAWER_PROPS,
+    ...injectData.options,
+    ...options,
+  } as DrawerApiOptions;
+
+  mergedOptions.onOpenChange = (isOpen: boolean) => {
+    options.onOpenChange?.(isOpen);
+    injectData.options?.onOpenChange?.(isOpen);
+  };
+
+  const onClosed = mergedOptions.onClosed;
+  mergedOptions.onClosed = () => {
+    onClosed?.();
+    if (mergedOptions.destroyOnClose) {
+      injectData.reCreateDrawer?.();
+    }
+  };
+  const api = new DrawerApi(mergedOptions);
+
+  const extendedApi: ExtendedDrawerApi = api as never;
+
+  extendedApi.useStore = (selector) => {
+    return useStore(api.store, selector);
+  };
+
+  const Drawer = defineComponent(
+    (props: DrawerProps, { attrs, slots }) => {
+      return () =>
+        h(VbenDrawer, { ...props, ...attrs, drawerApi: extendedApi }, slots);
+    },
+    // eslint-disable-next-line vue/one-component-per-file
+    {
+      name: 'VbenDrawer',
+      inheritAttrs: false,
+    },
+  );
+  injectData.extendApi?.(extendedApi);
+  return [Drawer, extendedApi] as const;
+}
+
+async function checkProps(api: ExtendedDrawerApi, attrs: Record<string, any>) {
+  if (!attrs || Object.keys(attrs).length === 0) {
+    return;
+  }
+  await nextTick();
+
+  const state = api?.store?.state;
+
+  if (!state) {
+    return;
+  }
+
+  const stateKeys = new Set(Object.keys(state));
+
+  for (const attr of Object.keys(attrs)) {
+    if (stateKeys.has(attr) && !['class'].includes(attr)) {
+      // connectedComponent存在时，不要传入Drawer的props，会造成复杂度提升，如果你需要修改Drawer的props，请使用 useVbenDrawer 或者api
+      console.warn(
+        `[Vben Drawer]: When 'connectedComponent' exists, do not set props or slots '${attr}', which will increase complexity. If you need to modify the props of Drawer, please use useVbenDrawer or api.`,
+      );
+    }
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/index.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/index.ts
new file mode 100644
index 0000000..7b9c47f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/index.ts
@@ -0,0 +1,3 @@
+export * from './alert';
+export * from './drawer';
+export * from './modal';
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
new file mode 100644
index 0000000..1edd477
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
@@ -0,0 +1,117 @@
+import type { ModalState } from '../modal';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ModalApi } from '../modal-api';
+
+vi.mock('@vben-core/shared/store', () => {
+  return {
+    isFunction: (fn: any) => typeof fn === 'function',
+    Store: class {
+      get state() {
+        return this._state;
+      }
+      private _state: ModalState;
+
+      private options: any;
+
+      constructor(initialState: ModalState, options: any) {
+        this._state = initialState;
+        this.options = options;
+      }
+
+      batch(cb: () => void) {
+        cb();
+      }
+
+      setState(fn: (prev: ModalState) => ModalState) {
+        this._state = fn(this._state);
+        this.options.onUpdate();
+      }
+    },
+  };
+});
+
+describe('modalApi', () => {
+  let modalApi: ModalApi;
+  // 使用 modalState 而不是 state
+  let modalState: ModalState;
+
+  beforeEach(() => {
+    modalApi = new ModalApi();
+    // 获取 modalApi 内的 state
+    modalState = modalApi.store.state;
+  });
+
+  it('should initialize with default state', () => {
+    expect(modalState.isOpen).toBe(false);
+    expect(modalState.cancelText).toBe(undefined);
+    expect(modalState.confirmText).toBe(undefined);
+  });
+
+  it('should open the modal', () => {
+    modalApi.open();
+    expect(modalApi.store.state.isOpen).toBe(true);
+  });
+
+  it('should close the modal if onBeforeClose allows it', () => {
+    modalApi.close();
+    expect(modalApi.store.state.isOpen).toBe(false);
+  });
+
+  it('should not close the modal if onBeforeClose returns false', () => {
+    const onBeforeClose = vi.fn(() => false);
+    const modalApiWithHook = new ModalApi({ onBeforeClose });
+    modalApiWithHook.open();
+    modalApiWithHook.close();
+    expect(modalApiWithHook.store.state.isOpen).toBe(true);
+    expect(onBeforeClose).toHaveBeenCalled();
+  });
+
+  it('should trigger onCancel and close the modal if no onCancel hook is provided', () => {
+    const onCancel = vi.fn();
+    const modalApiWithHook = new ModalApi({ onCancel });
+    modalApiWithHook.open();
+    modalApiWithHook.onCancel();
+    expect(onCancel).toHaveBeenCalled();
+    expect(modalApiWithHook.store.state.isOpen).toBe(true);
+  });
+
+  it('should update shared data correctly', () => {
+    const testData = { key: 'value' };
+    modalApi.setData(testData);
+    expect(modalApi.getData()).toEqual(testData);
+  });
+
+  it('should set state correctly using an object', () => {
+    modalApi.setState({ title: 'New Title' });
+    expect(modalApi.store.state.title).toBe('New Title');
+  });
+
+  it('should set state correctly using a function', () => {
+    modalApi.setState((prev) => ({ ...prev, confirmText: 'Yes' }));
+    expect(modalApi.store.state.confirmText).toBe('Yes');
+  });
+
+  it('should call onOpenChange when state changes', () => {
+    const onOpenChange = vi.fn();
+    const modalApiWithHook = new ModalApi({ onOpenChange });
+    modalApiWithHook.open();
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+
+  it('should call onClosed callback when provided', () => {
+    const onClosed = vi.fn();
+    const modalApiWithHook = new ModalApi({ onClosed });
+    modalApiWithHook.onClosed();
+    expect(onClosed).toHaveBeenCalled();
+  });
+
+  it('should call onOpened callback when provided', () => {
+    const onOpened = vi.fn();
+    const modalApiWithHook = new ModalApi({ onOpened });
+    modalApiWithHook.open();
+    modalApiWithHook.onOpened();
+    expect(onOpened).toHaveBeenCalled();
+  });
+});
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/index.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/index.ts
new file mode 100644
index 0000000..0cdedf2
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/index.ts
@@ -0,0 +1,3 @@
+export type * from './modal';
+export { default as VbenModal } from './modal.vue';
+export { setDefaultModalProps, useVbenModal } from './use-modal';
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
new file mode 100644
index 0000000..f60870b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@@ -0,0 +1,196 @@
+import type { ModalApiOptions, ModalState } from './modal';
+
+import { Store } from '@vben-core/shared/store';
+import { bindMethods, isFunction } from '@vben-core/shared/utils';
+
+export class ModalApi {
+  // 共享数据
+  public sharedData: Record<'payload', any> = {
+    payload: {},
+  };
+  public store: Store<ModalState>;
+
+  private api: Pick<
+    ModalApiOptions,
+    | 'onBeforeClose'
+    | 'onCancel'
+    | 'onClosed'
+    | 'onConfirm'
+    | 'onOpenChange'
+    | 'onOpened'
+  >;
+
+  // private prevState!: ModalState;
+  private state!: ModalState;
+
+  constructor(options: ModalApiOptions = {}) {
+    const {
+      connectedComponent: _,
+      onBeforeClose,
+      onCancel,
+      onClosed,
+      onConfirm,
+      onOpenChange,
+      onOpened,
+      ...storeState
+    } = options;
+
+    const defaultState: ModalState = {
+      bordered: true,
+      centered: false,
+      class: '',
+      closeOnClickModal: true,
+      closeOnPressEscape: true,
+      confirmDisabled: false,
+      confirmLoading: false,
+      contentClass: '',
+      destroyOnClose: true,
+      draggable: false,
+      footer: true,
+      footerClass: '',
+      fullscreen: false,
+      fullscreenButton: true,
+      header: true,
+      headerClass: '',
+      isOpen: false,
+      loading: false,
+      modal: true,
+      openAutoFocus: false,
+      showCancelButton: true,
+      showConfirmButton: true,
+      title: '',
+      animationType: 'slide',
+    };
+
+    this.store = new Store<ModalState>(
+      {
+        ...defaultState,
+        ...storeState,
+      },
+      {
+        onUpdate: () => {
+          const state = this.store.state;
+
+          // 每次更新状态时，都会调用 onOpenChange 回调函数
+          if (state?.isOpen === this.state?.isOpen) {
+            this.state = state;
+          } else {
+            this.state = state;
+            this.api.onOpenChange?.(!!state?.isOpen);
+          }
+        },
+      },
+    );
+
+    this.state = this.store.state;
+
+    this.api = {
+      onBeforeClose,
+      onCancel,
+      onClosed,
+      onConfirm,
+      onOpenChange,
+      onOpened,
+    };
+    bindMethods(this);
+  }
+
+  /**
+   * 关闭弹窗
+   * @description 关闭弹窗时会调用 onBeforeClose 钩子函数，如果 onBeforeClose 返回 false，则不关闭弹窗
+   */
+  async close() {
+    // 通过 onBeforeClose 钩子函数来判断是否允许关闭弹窗
+    // 如果 onBeforeClose 返回 false，则不关闭弹窗
+    const allowClose = (await this.api.onBeforeClose?.()) ?? true;
+    if (allowClose) {
+      this.store.setState((prev) => ({
+        ...prev,
+        isOpen: false,
+      }));
+    }
+  }
+
+  getData<T extends object = Record<string, any>>() {
+    return (this.sharedData?.payload ?? {}) as T;
+  }
+
+  /**
+   * 锁定弹窗状态（用于提交过程中的等待状态）
+   * @description 锁定状态将禁用默认的取消按钮，使用spinner覆盖弹窗内容，隐藏关闭按钮，阻止手动关闭弹窗，将默认的提交按钮标记为loading状态
+   * @param isLocked 是否锁定
+   */
+  lock(isLocked = true) {
+    return this.setState({ submitting: isLocked });
+  }
+
+  /**
+   * 取消操作
+   */
+  onCancel() {
+    if (this.api.onCancel) {
+      this.api.onCancel?.();
+    } else {
+      this.close();
+    }
+  }
+
+  /**
+   * 弹窗关闭动画播放完毕后的回调
+   */
+  onClosed() {
+    if (!this.state.isOpen) {
+      this.api.onClosed?.();
+    }
+  }
+
+  /**
+   * 确认操作
+   */
+  onConfirm() {
+    this.api.onConfirm?.();
+  }
+
+  /**
+   * 弹窗打开动画播放完毕后的回调
+   */
+  onOpened() {
+    if (this.state.isOpen) {
+      this.api.onOpened?.();
+    }
+  }
+
+  open() {
+    this.store.setState((prev) => ({
+      ...prev,
+      isOpen: true,
+      submitting: false,
+    }));
+  }
+
+  setData<T>(payload: T) {
+    this.sharedData.payload = payload;
+    return this;
+  }
+
+  setState(
+    stateOrFn:
+      | ((prev: ModalState) => Partial<ModalState>)
+      | Partial<ModalState>,
+  ) {
+    if (isFunction(stateOrFn)) {
+      this.store.setState(stateOrFn);
+    } else {
+      this.store.setState((prev) => ({ ...prev, ...stateOrFn }));
+    }
+    return this;
+  }
+
+  /**
+   * 解除弹窗的锁定状态
+   * @description 解除由lock方法设置的锁定状态，是lock(false)的别名
+   */
+  unlock() {
+    return this.lock(false);
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/modal.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
new file mode 100644
index 0000000..fa41344
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
@@ -0,0 +1,194 @@
+import type { Component, Ref } from 'vue';
+
+import type { MaybePromise } from '@vben-core/typings';
+
+import type { ModalApi } from './modal-api';
+
+export interface ModalProps {
+  /**
+   * 动画类型
+   * @default 'slide'
+   */
+  animationType?: 'scale' | 'slide';
+  /**
+   * 是否要挂载到内容区域
+   * @default false
+   */
+  appendToMain?: boolean;
+  /**
+   * 是否显示边框
+   * @default false
+   */
+  bordered?: boolean;
+  /**
+   * 取消按钮文字
+   */
+  cancelText?: string;
+  /**
+   * 是否居中
+   * @default false
+   */
+  centered?: boolean;
+
+  class?: string;
+
+  /**
+   * 是否显示右上角的关闭按钮
+   * @default true
+   */
+  closable?: boolean;
+  /**
+   * 点击弹窗遮罩是否关闭弹窗
+   * @default true
+   */
+  closeOnClickModal?: boolean;
+  /**
+   * 按下 ESC 键是否关闭弹窗
+   * @default true
+   */
+  closeOnPressEscape?: boolean;
+  /**
+   * 禁用确认按钮
+   */
+  confirmDisabled?: boolean;
+  /**
+   * 确定按钮 loading
+   * @default false
+   */
+  confirmLoading?: boolean;
+  /**
+   * 确定按钮文字
+   */
+  confirmText?: string;
+  contentClass?: string;
+  /**
+   * 弹窗描述
+   */
+  description?: string;
+  /**
+   * 在关闭时销毁弹窗
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 是否可拖拽
+   * @default false
+   */
+  draggable?: boolean;
+  /**
+   * 是否显示底部
+   * @default true
+   */
+  footer?: boolean;
+  footerClass?: string;
+  /**
+   * 是否全屏
+   * @default false
+   */
+  fullscreen?: boolean;
+  /**
+   * 是否显示全屏按钮
+   * @default true
+   */
+  fullscreenButton?: boolean;
+  /**
+   * 是否显示顶栏
+   * @default true
+   */
+  header?: boolean;
+  headerClass?: string;
+  /**
+   * 弹窗是否显示
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 是否显示遮罩
+   * @default true
+   */
+  modal?: boolean;
+  /**
+   * 是否自动聚焦
+   */
+  openAutoFocus?: boolean;
+  /**
+   * 弹窗遮罩模糊效果
+   */
+  overlayBlur?: number;
+  /**
+   * 是否显示取消按钮
+   * @default true
+   */
+  showCancelButton?: boolean;
+  /**
+   * 是否显示确认按钮
+   * @default true
+   */
+  showConfirmButton?: boolean;
+  /**
+   * 提交中（锁定弹窗状态）
+   */
+  submitting?: boolean;
+  /**
+   * 弹窗标题
+   */
+  title?: string;
+  /**
+   * 弹窗标题提示
+   */
+  titleTooltip?: string;
+  /**
+   * 弹窗层级
+   */
+  zIndex?: number;
+}
+
+export interface ModalState extends ModalProps {
+  /** 弹窗打开状态 */
+  isOpen?: boolean;
+  /**
+   * 共享数据
+   */
+  sharedData?: Record<string, any>;
+}
+
+export type ExtendedModalApi = ModalApi & {
+  useStore: <T = NoInfer<ModalState>>(
+    selector?: (state: NoInfer<ModalState>) => T,
+  ) => Readonly<Ref<T>>;
+};
+
+export interface ModalApiOptions extends ModalState {
+  /**
+   * 独立的弹窗组件
+   */
+  connectedComponent?: Component;
+  /**
+   * 关闭前的回调，返回 false 可以阻止关闭
+   * @returns
+   */
+  onBeforeClose?: () => MaybePromise<boolean | undefined>;
+  /**
+   * 点击取消按钮的回调
+   */
+  onCancel?: () => void;
+  /**
+   * 弹窗关闭动画结束的回调
+   * @returns
+   */
+  onClosed?: () => void;
+  /**
+   * 点击确定按钮的回调
+   */
+  onConfirm?: () => void;
+  /**
+   * 弹窗状态变化回调
+   * @param isOpen
+   * @returns
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * 弹窗打开动画结束的回调
+   * @returns
+   */
+  onOpened?: () => void;
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
new file mode 100644
index 0000000..60ba512
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -0,0 +1,371 @@
+<script lang="ts" setup>
+import type { ExtendedModalApi, ModalProps } from './modal';
+
+import {
+  computed,
+  nextTick,
+  onDeactivated,
+  provide,
+  ref,
+  unref,
+  useId,
+  watch,
+} from 'vue';
+
+import {
+  useIsMobile,
+  usePriorityValues,
+  useSimpleLocale,
+} from '@vben-core/composables';
+import { Expand, Shrink } from '@vben-core/icons';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  VbenButton,
+  VbenHelpTooltip,
+  VbenIconButton,
+  VbenLoading,
+  VisuallyHidden,
+} from '@vben-core/shadcn-ui';
+import { ELEMENT_ID_MAIN_CONTENT } from '@vben-core/shared/constants';
+import { globalShareState } from '@vben-core/shared/global-state';
+import { cn } from '@vben-core/shared/utils';
+
+import { useModalDraggable } from './use-modal-draggable';
+
+interface Props extends ModalProps {
+  modalApi?: ExtendedModalApi;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  appendToMain: false,
+  destroyOnClose: false,
+  modalApi: undefined,
+});
+
+const components = globalShareState.getComponents();
+
+const contentRef = ref();
+const wrapperRef = ref<HTMLElement>();
+const dialogRef = ref();
+const headerRef = ref();
+const footerRef = ref();
+
+const id = useId();
+
+provide('DISMISSABLE_MODAL_ID', id);
+
+const { $t } = useSimpleLocale();
+const { isMobile } = useIsMobile();
+const state = props.modalApi?.useStore?.();
+
+const {
+  appendToMain,
+  bordered,
+  cancelText,
+  centered,
+  class: modalClass,
+  closable,
+  closeOnClickModal,
+  closeOnPressEscape,
+  confirmDisabled,
+  confirmLoading,
+  confirmText,
+  contentClass,
+  description,
+  destroyOnClose,
+  draggable,
+  footer: showFooter,
+  footerClass,
+  fullscreen,
+  fullscreenButton,
+  header,
+  headerClass,
+  loading: showLoading,
+  modal,
+  openAutoFocus,
+  overlayBlur,
+  showCancelButton,
+  showConfirmButton,
+  submitting,
+  title,
+  titleTooltip,
+  animationType,
+  zIndex,
+} = usePriorityValues(props, state);
+
+const shouldFullscreen = computed(() => fullscreen.value || isMobile.value);
+
+const shouldDraggable = computed(
+  () => draggable.value && !shouldFullscreen.value && header.value,
+);
+
+const shouldCentered = computed(
+  () => centered.value && !shouldFullscreen.value,
+);
+
+const getAppendTo = computed(() => {
+  return appendToMain.value
+    ? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
+    : undefined;
+});
+
+const { dragging, transform } = useModalDraggable(
+  dialogRef,
+  headerRef,
+  shouldDraggable,
+  getAppendTo,
+  shouldCentered,
+);
+
+const firstOpened = ref(false);
+const isClosed = ref(true);
+
+watch(
+  () => state?.value?.isOpen,
+  async (v) => {
+    if (v) {
+      isClosed.value = false;
+      if (!firstOpened.value) firstOpened.value = true;
+      await nextTick();
+      if (!contentRef.value) return;
+      const innerContentRef = contentRef.value.getContentRef();
+      dialogRef.value = innerContentRef.$el;
+      // reopen modal reassign value
+      const { offsetX, offsetY } = transform;
+      dialogRef.value.style.transform = shouldCentered.value
+        ? `translate(${offsetX}px, calc(-50% + ${offsetY}px))`
+        : `translate(${offsetX}px, ${offsetY}px)`;
+    }
+  },
+  { immediate: true },
+);
+
+// watch(
+//   () => [showLoading.value, submitting.value],
+//   ([l, s]) => {
+//     if ((s || l) && wrapperRef.value) {
+//       wrapperRef.value.scrollTo({
+//         // behavior: 'smooth',
+//         top: 0,
+//       });
+//     }
+//   },
+// );
+
+/**
+ * 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
+ */
+onDeactivated(() => {
+  // 如果弹窗没有被挂载到内容区域，则关闭弹窗
+  if (!appendToMain.value) {
+    props.modalApi?.close();
+  }
+});
+
+function handleFullscreen() {
+  props.modalApi?.setState((prev) => {
+    // if (prev.fullscreen) {
+    //   resetPosition();
+    // }
+    return { ...prev, fullscreen: !fullscreen.value };
+  });
+}
+function interactOutside(e: Event) {
+  if (!closeOnClickModal.value || submitting.value) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+function escapeKeyDown(e: KeyboardEvent) {
+  if (!closeOnPressEscape.value || submitting.value) {
+    e.preventDefault();
+  }
+}
+
+function handleOpenAutoFocus(e: Event) {
+  if (!openAutoFocus.value) {
+    e?.preventDefault();
+  }
+}
+
+// pointer-down-outside
+function pointerDownOutside(e: Event) {
+  const target = e.target as HTMLElement;
+  const isDismissableModal = target?.dataset.dismissableModal;
+  if (
+    !closeOnClickModal.value ||
+    isDismissableModal !== id ||
+    submitting.value
+  ) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+
+function handleFocusOutside(e: Event) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+
+const getForceMount = computed(() => {
+  return !unref(destroyOnClose) && unref(firstOpened);
+});
+
+const handleOpened = () => {
+  requestAnimationFrame(() => {
+    props.modalApi?.onOpened();
+  });
+};
+
+function handleClosed() {
+  isClosed.value = true;
+  props.modalApi?.onClosed();
+}
+</script>
+<template>
+  <Dialog
+    :modal="false"
+    :open="state?.isOpen"
+    @update:open="() => (!submitting ? modalApi?.close() : undefined)"
+  >
+    <DialogContent
+      ref="contentRef"
+      :append-to="getAppendTo"
+      :class="
+        cn(
+          'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0',
+          shouldFullscreen ? 'sm:rounded-none' : 'sm:rounded-[var(--radius)]',
+          modalClass,
+          {
+            'border border-border': bordered,
+            'shadow-3xl': !bordered,
+            'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
+              shouldFullscreen,
+            'top-1/2': centered && !shouldFullscreen,
+            'duration-300': !dragging,
+            hidden: isClosed,
+          },
+        )
+      "
+      :force-mount="getForceMount"
+      :modal="modal"
+      :open="state?.isOpen"
+      :show-close="closable"
+      :animation-type="animationType"
+      :z-index="zIndex"
+      :overlay-blur="overlayBlur"
+      close-class="top-3"
+      @close-auto-focus="handleFocusOutside"
+      @closed="handleClosed"
+      :close-disabled="submitting"
+      @escape-key-down="escapeKeyDown"
+      @focus-outside="handleFocusOutside"
+      @interact-outside="interactOutside"
+      @open-auto-focus="handleOpenAutoFocus"
+      @opened="handleOpened"
+      @pointer-down-outside="pointerDownOutside"
+    >
+      <DialogHeader
+        ref="headerRef"
+        :class="
+          cn(
+            'px-5 py-4',
+            {
+              'border-b': bordered,
+              hidden: !header,
+              'cursor-move select-none': shouldDraggable,
+            },
+            headerClass,
+          )
+        "
+      >
+        <DialogTitle v-if="title" class="text-left">
+          <slot name="title">
+            {{ title }}
+
+            <slot v-if="titleTooltip" name="titleTooltip">
+              <VbenHelpTooltip trigger-class="pb-1">
+                {{ titleTooltip }}
+              </VbenHelpTooltip>
+            </slot>
+          </slot>
+        </DialogTitle>
+        <DialogDescription v-if="description">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </DialogDescription>
+        <VisuallyHidden v-if="!title || !description">
+          <DialogTitle v-if="!title" />
+          <DialogDescription v-if="!description" />
+        </VisuallyHidden>
+      </DialogHeader>
+      <div
+        ref="wrapperRef"
+        :class="
+          cn('relative min-h-40 flex-1 overflow-y-auto p-3', contentClass, {
+            'pointer-events-none': showLoading || submitting,
+          })
+        "
+      >
+        <slot></slot>
+      </div>
+      <VbenLoading v-if="showLoading || submitting" spinning />
+      <VbenIconButton
+        v-if="fullscreenButton"
+        class="flex-center absolute right-10 top-3 hidden size-6 rounded-full px-1 text-lg text-foreground/80 opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none disabled:pointer-events-none sm:block"
+        @click="handleFullscreen"
+      >
+        <Shrink v-if="fullscreen" class="size-3.5" />
+        <Expand v-else class="size-3.5" />
+      </VbenIconButton>
+
+      <DialogFooter
+        v-if="showFooter"
+        ref="footerRef"
+        :class="
+          cn(
+            'flex-row items-center justify-end p-2',
+            {
+              'border-t': bordered,
+            },
+            footerClass,
+          )
+        "
+      >
+        <slot name="prepend-footer"></slot>
+        <slot name="footer">
+          <component
+            :is="components.DefaultButton || VbenButton"
+            v-if="showCancelButton"
+            variant="ghost"
+            :disabled="submitting"
+            @click="() => modalApi?.onCancel()"
+          >
+            <slot name="cancelText">
+              {{ cancelText || $t('cancel') }}
+            </slot>
+          </component>
+          <slot name="center-footer"></slot>
+          <component
+            :is="components.PrimaryButton || VbenButton"
+            v-if="showConfirmButton"
+            :disabled="confirmDisabled"
+            :loading="confirmLoading || submitting"
+            @click="() => modalApi?.onConfirm()"
+          >
+            <slot name="confirmText">
+              {{ confirmText || $t('confirm') }}
+            </slot>
+          </component>
+        </slot>
+        <slot name="append-footer"></slot>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts
new file mode 100644
index 0000000..84910b7
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts
@@ -0,0 +1,138 @@
+/**
+ * @copy https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-draggable/index.ts
+ * 调整部分细节
+ */
+
+import type { ComputedRef, Ref } from 'vue';
+
+import { onBeforeUnmount, onMounted, reactive, ref, watchEffect } from 'vue';
+
+import { unrefElement } from '@vueuse/core';
+
+export function useModalDraggable(
+  targetRef: Ref<HTMLElement | undefined>,
+  dragRef: Ref<HTMLElement | undefined>,
+  draggable: ComputedRef<boolean>,
+  containerSelector?: ComputedRef<string | undefined>,
+  centered?: ComputedRef<boolean>,
+) {
+  const transform = reactive({
+    offsetX: 0,
+    offsetY: 0,
+  });
+
+  const dragging = ref(false);
+
+  const onMousedown = (e: MouseEvent) => {
+    const downX = e.clientX;
+    const downY = e.clientY;
+
+    if (!targetRef.value) {
+      return;
+    }
+
+    const targetRect = targetRef.value.getBoundingClientRect();
+    const { offsetX, offsetY } = transform;
+    const targetLeft = targetRect.left;
+    const targetTop = targetRect.top;
+    const targetWidth = targetRect.width;
+    const targetHeight = targetRect.height;
+
+    let containerRect: DOMRect | null = null;
+
+    if (containerSelector?.value) {
+      const container = document.querySelector(containerSelector.value);
+      if (container) {
+        containerRect = container.getBoundingClientRect();
+      }
+    }
+
+    let maxLeft, maxTop, minLeft, minTop;
+    if (containerRect) {
+      minLeft = containerRect.left - targetLeft + offsetX;
+      maxLeft = containerRect.right - targetLeft - targetWidth + offsetX;
+      minTop = containerRect.top - targetTop + offsetY;
+      maxTop = containerRect.bottom - targetTop - targetHeight + offsetY;
+    } else {
+      const docElement = document.documentElement;
+      const clientWidth = docElement.clientWidth;
+      const clientHeight = docElement.clientHeight;
+      minLeft = -targetLeft + offsetX;
+      minTop = -targetTop + offsetY;
+      maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
+      maxTop = clientHeight - targetTop - targetHeight + offsetY;
+    }
+
+    const onMousemove = (e: MouseEvent) => {
+      let moveX = offsetX + e.clientX - downX;
+      let moveY = offsetY + e.clientY - downY;
+
+      moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
+      moveY = Math.min(Math.max(moveY, minTop), maxTop);
+
+      transform.offsetX = moveX;
+      transform.offsetY = moveY;
+
+      if (targetRef.value) {
+        const isCentered = centered?.value;
+        targetRef.value.style.transform = isCentered
+          ? `translate(${moveX}px, calc(-50% + ${moveY}px))`
+          : `translate(${moveX}px, ${moveY}px)`;
+        dragging.value = true;
+      }
+    };
+
+    const onMouseup = () => {
+      dragging.value = false;
+      document.removeEventListener('mousemove', onMousemove);
+      document.removeEventListener('mouseup', onMouseup);
+    };
+
+    document.addEventListener('mousemove', onMousemove);
+    document.addEventListener('mouseup', onMouseup);
+  };
+
+  const onDraggable = () => {
+    const dragDom = unrefElement(dragRef);
+    if (dragDom && targetRef.value) {
+      dragDom.addEventListener('mousedown', onMousedown);
+    }
+  };
+
+  const offDraggable = () => {
+    const dragDom = unrefElement(dragRef);
+    if (dragDom && targetRef.value) {
+      dragDom.removeEventListener('mousedown', onMousedown);
+    }
+  };
+
+  const resetPosition = () => {
+    transform.offsetX = 0;
+    transform.offsetY = 0;
+
+    const target = unrefElement(targetRef);
+    if (target) {
+      target.style.transform = '';
+    }
+  };
+
+  onMounted(() => {
+    watchEffect(() => {
+      if (draggable.value) {
+        onDraggable();
+      } else {
+        offDraggable();
+      }
+    });
+  });
+
+  onBeforeUnmount(() => {
+    offDraggable();
+  });
+
+  return {
+    dragging,
+    resetPosition,
+    transform,
+  };
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
new file mode 100644
index 0000000..0af4847
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -0,0 +1,151 @@
+import type { ExtendedModalApi, ModalApiOptions, ModalProps } from './modal';
+
+import {
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  provide,
+  reactive,
+  ref,
+} from 'vue';
+
+import { useStore } from '@vben-core/shared/store';
+
+import { ModalApi } from './modal-api';
+import VbenModal from './modal.vue';
+
+const USER_MODAL_INJECT_KEY = Symbol('VBEN_MODAL_INJECT');
+
+const DEFAULT_MODAL_PROPS: Partial<ModalProps> = {};
+
+export function setDefaultModalProps(props: Partial<ModalProps>) {
+  Object.assign(DEFAULT_MODAL_PROPS, props);
+}
+
+export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
+  options: ModalApiOptions = {},
+) {
+  // Modal一般会抽离出来，所以如果有传入 connectedComponent，则表示为外部调用，与内部组件进行连接
+  // 外部的Modal通过provide/inject传递api
+
+  const { connectedComponent } = options;
+  if (connectedComponent) {
+    const extendedApi = reactive({});
+    const isModalReady = ref(true);
+    const Modal = defineComponent(
+      (props: TParentModalProps, { attrs, slots }) => {
+        provide(USER_MODAL_INJECT_KEY, {
+          extendApi(api: ExtendedModalApi) {
+            // 不能直接给 reactive 赋值，会丢失响应
+            // 不能用 Object.assign,会丢失 api 的原型函数
+            Object.setPrototypeOf(extendedApi, api);
+          },
+          options,
+          async reCreateModal() {
+            isModalReady.value = false;
+            await nextTick();
+            isModalReady.value = true;
+          },
+        });
+        checkProps(extendedApi as ExtendedModalApi, {
+          ...props,
+          ...attrs,
+          ...slots,
+        });
+        return () =>
+          h(
+            isModalReady.value ? connectedComponent : 'div',
+            {
+              ...props,
+              ...attrs,
+            },
+            slots,
+          );
+      },
+      // eslint-disable-next-line vue/one-component-per-file
+      {
+        name: 'VbenParentModal',
+        inheritAttrs: false,
+      },
+    );
+
+    return [Modal, extendedApi as ExtendedModalApi] as const;
+  }
+
+  const injectData = inject<any>(USER_MODAL_INJECT_KEY, {});
+
+  const mergedOptions = {
+    ...DEFAULT_MODAL_PROPS,
+    ...injectData.options,
+    ...options,
+  } as ModalApiOptions;
+
+  mergedOptions.onOpenChange = (isOpen: boolean) => {
+    options.onOpenChange?.(isOpen);
+    injectData.options?.onOpenChange?.(isOpen);
+  };
+
+  const onClosed = mergedOptions.onClosed;
+  mergedOptions.onClosed = () => {
+    onClosed?.();
+    if (mergedOptions.destroyOnClose) {
+      injectData.reCreateModal?.();
+    }
+  };
+
+  const api = new ModalApi(mergedOptions);
+
+  const extendedApi: ExtendedModalApi = api as never;
+
+  extendedApi.useStore = (selector) => {
+    return useStore(api.store, selector);
+  };
+
+  const Modal = defineComponent(
+    (props: ModalProps, { attrs, slots }) => {
+      return () =>
+        h(
+          VbenModal,
+          {
+            ...props,
+            ...attrs,
+            modalApi: extendedApi,
+          },
+          slots,
+        );
+    },
+    // eslint-disable-next-line vue/one-component-per-file
+    {
+      name: 'VbenModal',
+      inheritAttrs: false,
+    },
+  );
+  injectData.extendApi?.(extendedApi);
+
+  return [Modal, extendedApi] as const;
+}
+
+async function checkProps(api: ExtendedModalApi, attrs: Record<string, any>) {
+  if (!attrs || Object.keys(attrs).length === 0) {
+    return;
+  }
+  await nextTick();
+
+  const state = api?.store?.state;
+
+  if (!state) {
+    return;
+  }
+
+  const stateKeys = new Set(Object.keys(state));
+
+  for (const attr of Object.keys(attrs)) {
+    if (stateKeys.has(attr) && !['class'].includes(attr)) {
+      // connectedComponent存在时，不要传入Modal的props，会造成复杂度提升，如果你需要修改Modal的props，请使用 useModal 或者api
+      console.warn(
+        `[Vben Modal]: When 'connectedComponent' exists, do not set props or slots '${attr}', which will increase complexity. If you need to modify the props of Modal, please use useVbenModal or api.`,
+      );
+    }
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/tailwind.config.mjs b/admin-ui/vue/packages/@core/ui-kit/popup-ui/tailwind.config.mjs
new file mode 100644
index 0000000..f17f556
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/tailwind.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';
diff --git a/admin-ui/vue/packages/@core/ui-kit/popup-ui/tsconfig.json b/admin-ui/vue/packages/@core/ui-kit/popup-ui/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/popup-ui/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/build.config.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/build.config.ts
new file mode 100644
index 0000000..aec9340
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/build.config.ts
@@ -0,0 +1,27 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    {
+      builder: 'mkdist',
+      input: './src',
+
+      pattern: ['**/*'],
+    },
+    {
+      builder: 'mkdist',
+      input: './src',
+      loaders: ['vue'],
+      pattern: ['**/*.vue'],
+    },
+    {
+      builder: 'mkdist',
+      format: 'esm',
+      input: './src',
+      loaders: ['js'],
+      pattern: ['**/*.ts'],
+    },
+  ],
+});
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/components.json b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/components.json
new file mode 100644
index 0000000..b497f43
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.mjs",
+    "css": "src/assets/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "framework": "vite",
+  "aliases": {
+    "components": "@vben-core/shadcn-ui/components",
+    "utils": "@vben-core/shared/utils"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/package.json b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/package.json
new file mode 100644
index 0000000..6c2c4a7
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@vben-core/shadcn-ui",
+  "version": "5.5.9",
+  "#main": "./dist/index.mjs",
+  "#module": "./dist/index.mjs",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/uikit/shadcn-ui"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "#build": "pnpm unbuild",
+    "#prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./src/index.ts",
+      "//default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./src/index.ts"
+      }
+    }
+  },
+  "dependencies": {
+    "@vben-core/composables": "workspace:*",
+    "@vben-core/icons": "workspace:*",
+    "@vben-core/shared": "workspace:*",
+    "@vben-core/typings": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "class-variance-authority": "catalog:",
+    "lucide-vue-next": "catalog:",
+    "reka-ui": "catalog:",
+    "vee-validate": "catalog:",
+    "vue": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/postcss.config.mjs b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/postcss.config.mjs
new file mode 100644
index 0000000..3d80704
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
new file mode 100644
index 0000000..2b2ed2f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type {
+  AvatarFallbackProps,
+  AvatarImageProps,
+  AvatarRootProps,
+} from 'reka-ui';
+
+import type { CSSProperties } from 'vue';
+
+import type { ClassType } from '@vben-core/typings';
+
+import { computed } from 'vue';
+
+import { Avatar, AvatarFallback, AvatarImage } from '../../ui';
+
+interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
+  alt?: string;
+  class?: ClassType;
+  dot?: boolean;
+  dotClass?: ClassType;
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+  size?: number;
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: 'avatar',
+  as: 'button',
+  dot: false,
+  dotClass: 'bg-green-500',
+  fit: 'cover',
+});
+
+const imageStyle = computed<CSSProperties>(() => {
+  const { fit } = props;
+  if (fit) {
+    return { objectFit: fit };
+  }
+  return {};
+});
+
+const text = computed(() => {
+  return props.alt.slice(-2).toUpperCase();
+});
+
+const rootStyle = computed(() => {
+  return props.size !== undefined && props.size > 0
+    ? {
+        height: `${props.size}px`,
+        width: `${props.size}px`,
+      }
+    : {};
+});
+</script>
+
+<template>
+  <div
+    :class="props.class"
+    :style="rootStyle"
+    class="relative flex flex-shrink-0 items-center"
+  >
+    <Avatar :class="props.class" class="size-full">
+      <AvatarImage :alt="alt" :src="src" :style="imageStyle" />
+      <AvatarFallback>{{ text }}</AvatarFallback>
+    </Avatar>
+    <span
+      v-if="dot"
+      :class="dotClass"
+      class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-background"
+    >
+    </span>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/avatar/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/avatar/index.ts
new file mode 100644
index 0000000..8a2169c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/avatar/index.ts
@@ -0,0 +1 @@
+export { default as VbenAvatar } from './avatar.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
new file mode 100644
index 0000000..8da6cde
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import type { BacktopProps } from './backtop';
+
+import { computed } from 'vue';
+
+import { ArrowUpToLine } from '@vben-core/icons';
+
+import { VbenButton } from '../button';
+import { useBackTop } from './use-backtop';
+
+interface Props extends BacktopProps {}
+
+defineOptions({ name: 'BackTop' });
+
+const props = withDefaults(defineProps<Props>(), {
+  bottom: 20,
+  isGroup: false,
+  right: 24,
+  target: '',
+  visibilityHeight: 200,
+});
+
+const backTopStyle = computed(() => ({
+  bottom: `${props.bottom}px`,
+  right: `${props.right}px`,
+}));
+
+const { handleClick, visible } = useBackTop(props);
+</script>
+<template>
+  <transition name="fade-down">
+    <VbenButton
+      v-if="visible"
+      :style="backTopStyle"
+      class="data z-popup fixed bottom-10 size-10 rounded-full bg-background shadow-float duration-500 hover:bg-heavy dark:bg-accent dark:hover:bg-heavy"
+      size="icon"
+      variant="icon"
+      @click="handleClick"
+    >
+      <ArrowUpToLine class="size-4" />
+    </VbenButton>
+  </transition>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/backtop.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/backtop.ts
new file mode 100644
index 0000000..de422c0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/backtop.ts
@@ -0,0 +1,38 @@
+export const backtopProps = {
+  /**
+   * @zh_CN bottom distance.
+   */
+  bottom: {
+    default: 40,
+    type: Number,
+  },
+  /**
+   * @zh_CN right distance.
+   */
+  right: {
+    default: 40,
+    type: Number,
+  },
+  /**
+   * @zh_CN the target to trigger scroll.
+   */
+  target: {
+    default: '',
+    type: String,
+  },
+  /**
+   * @zh_CN the button will not show until the scroll height reaches this value.
+   */
+  visibilityHeight: {
+    default: 200,
+    type: Number,
+  },
+} as const;
+
+export interface BacktopProps {
+  bottom?: number;
+  isGroup?: boolean;
+  right?: number;
+  target?: string;
+  visibilityHeight?: number;
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/index.ts
new file mode 100644
index 0000000..7a6e543
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/index.ts
@@ -0,0 +1 @@
+export { default as VbenBackTop } from './back-top.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/use-backtop.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/use-backtop.ts
new file mode 100644
index 0000000..6a51a95
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/back-top/use-backtop.ts
@@ -0,0 +1,45 @@
+import type { BacktopProps } from './backtop';
+
+import { onMounted, ref, shallowRef } from 'vue';
+
+import { useEventListener, useThrottleFn } from '@vueuse/core';
+
+export const useBackTop = (props: BacktopProps) => {
+  const el = shallowRef<HTMLElement>();
+  const container = shallowRef<Document | HTMLElement>();
+  const visible = ref(false);
+
+  const handleScroll = () => {
+    if (el.value) {
+      visible.value = el.value.scrollTop >= (props?.visibilityHeight ?? 0);
+    }
+  };
+
+  const handleClick = () => {
+    el.value?.scrollTo({ behavior: 'smooth', top: 0 });
+  };
+
+  const handleScrollThrottled = useThrottleFn(handleScroll, 300, true);
+
+  useEventListener(container, 'scroll', handleScrollThrottled);
+  onMounted(() => {
+    container.value = document;
+    el.value = document.documentElement;
+
+    if (props.target) {
+      el.value = document.querySelector<HTMLElement>(props.target) ?? undefined;
+
+      if (!el.value) {
+        throw new Error(`target does not exist: ${props.target}`);
+      }
+      container.value = el.value;
+    }
+    // Give visible an initial value, fix #13066
+    handleScroll();
+  });
+
+  return {
+    handleClick,
+    visible,
+  };
+};
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
new file mode 100644
index 0000000..5659ec8
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type { BreadcrumbProps } from './types';
+
+import { VbenIcon } from '../icon';
+
+interface Props extends BreadcrumbProps {}
+
+defineOptions({ name: 'Breadcrumb' });
+const { breadcrumbs, showIcon } = defineProps<Props>();
+
+const emit = defineEmits<{ select: [string] }>();
+
+function handleClick(index: number, path?: string) {
+  if (!path || index === breadcrumbs.length - 1) {
+    return;
+  }
+  emit('select', path);
+}
+</script>
+<template>
+  <ul class="flex">
+    <TransitionGroup name="breadcrumb-transition">
+      <template
+        v-for="(item, index) in breadcrumbs"
+        :key="`${item.path}-${item.title}-${index}`"
+      >
+        <li>
+          <a
+            href="javascript:void 0"
+            @click.stop="handleClick(index, item.path)"
+          >
+            <span class="flex-center z-10 h-full">
+              <VbenIcon
+                v-if="showIcon"
+                :icon="item.icon"
+                class="mr-1 size-4 flex-shrink-0"
+              />
+              <span
+                :class="{
+                  'font-normal text-foreground':
+                    index === breadcrumbs.length - 1,
+                }"
+                >{{ item.title }}
+              </span>
+            </span>
+          </a>
+        </li>
+      </template>
+    </TransitionGroup>
+  </ul>
+</template>
+<style scoped>
+li {
+  @apply h-7;
+}
+
+li a {
+  @apply relative mr-9 flex h-7 items-center bg-accent py-0 pl-[5px] pr-2 text-[13px] text-muted-foreground;
+}
+
+li a > span {
+  @apply -ml-3;
+}
+
+li:first-child a > span {
+  @apply -ml-1;
+}
+
+li:first-child a {
+  @apply rounded-[4px_0_0_4px] pl-[15px];
+}
+
+li:first-child a::before {
+  @apply border-none;
+}
+
+li:last-child a {
+  @apply rounded-[0_4px_4px_0] pr-[15px];
+}
+
+li:last-child a::after {
+  @apply border-none;
+}
+
+li a::before,
+li a::after {
+  @apply absolute top-0 h-0 w-0 border-[.875rem] border-solid border-accent content-[''];
+}
+
+li a::before {
+  @apply -left-7 z-10 border-l-transparent;
+}
+
+li a::after {
+  @apply left-full border-transparent border-l-accent;
+}
+
+li:not(:last-child) a:hover {
+  @apply bg-accent-hover;
+}
+
+li:not(:last-child) a:hover::before {
+  @apply border-accent-hover border-l-transparent;
+}
+
+li:not(:last-child) a:hover::after {
+  @apply border-l-accent-hover;
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue
new file mode 100644
index 0000000..3e73343
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { BreadcrumbProps } from './types';
+
+import { useForwardPropsEmits } from 'reka-ui';
+
+import BreadcrumbBackground from './breadcrumb-background.vue';
+import Breadcrumb from './breadcrumb.vue';
+
+interface Props extends BreadcrumbProps {
+  class?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits<{ select: [string] }>();
+
+const forward = useForwardPropsEmits(props, emit);
+</script>
+<template>
+  <Breadcrumb
+    v-if="styleType === 'normal'"
+    v-bind="forward"
+    class="vben-breadcrumb"
+  />
+  <BreadcrumbBackground
+    v-if="styleType === 'background'"
+    v-bind="forward"
+    class="vben-breadcrumb"
+  />
+</template>
+<style lang="scss" scoped>
+/** 修复全局引入Antd时，ol和ul的默认样式会被修改的问题 */
+.vben-breadcrumb {
+  :deep(ol),
+  :deep(ul) {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
new file mode 100644
index 0000000..db2ce65
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { BreadcrumbProps } from './types';
+
+import { ChevronDown } from '@vben-core/icons';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../ui';
+import { VbenIcon } from '../icon';
+
+interface Props extends BreadcrumbProps {}
+
+defineOptions({ name: 'Breadcrumb' });
+withDefaults(defineProps<Props>(), {
+  showIcon: false,
+});
+
+const emit = defineEmits<{ select: [string] }>();
+
+function handleClick(path?: string) {
+  if (!path) {
+    return;
+  }
+  emit('select', path);
+}
+</script>
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <TransitionGroup name="breadcrumb-transition">
+        <template
+          v-for="(item, index) in breadcrumbs"
+          :key="`${item.path}-${item.title}-${index}`"
+        >
+          <BreadcrumbItem>
+            <div v-if="item.items?.length ?? 0 > 0">
+              <DropdownMenu>
+                <DropdownMenuTrigger class="flex items-center gap-1">
+                  <VbenIcon v-if="showIcon" :icon="item.icon" class="size-5" />
+                  {{ item.title }}
+                  <ChevronDown class="size-4" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <template
+                    v-for="menuItem in item.items"
+                    :key="`sub-${menuItem.path}`"
+                  >
+                    <DropdownMenuItem @click.stop="handleClick(menuItem.path)">
+                      {{ menuItem.title }}
+                    </DropdownMenuItem>
+                  </template>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <BreadcrumbLink
+              v-else-if="index !== breadcrumbs.length - 1"
+              href="javascript:void 0"
+              @click.stop="handleClick(item.path)"
+            >
+              <div class="flex-center">
+                <VbenIcon
+                  v-if="showIcon"
+                  :class="{ 'size-5': item.isHome }"
+                  :icon="item.icon"
+                  class="mr-1 size-4"
+                />
+                {{ item.title }}
+              </div>
+            </BreadcrumbLink>
+            <BreadcrumbPage v-else>
+              <div class="flex-center">
+                <VbenIcon
+                  v-if="showIcon"
+                  :class="{ 'size-5': item.isHome }"
+                  :icon="item.icon"
+                  class="mr-1 size-4"
+                />
+                {{ item.title }}
+              </div>
+            </BreadcrumbPage>
+            <BreadcrumbSeparator
+              v-if="index < breadcrumbs.length - 1 && !item.isHome"
+            />
+          </BreadcrumbItem>
+        </template>
+      </TransitionGroup>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts
new file mode 100644
index 0000000..9e31cb1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts
@@ -0,0 +1,3 @@
+export { default as VbenBreadcrumbView } from './breadcrumb-view.vue';
+
+export type * from './types';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
new file mode 100644
index 0000000..0080f23
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
@@ -0,0 +1,17 @@
+import type { Component } from 'vue';
+
+import type { BreadcrumbStyleType } from '@vben-core/typings';
+
+export interface IBreadcrumb {
+  icon?: Component | string;
+  isHome?: boolean;
+  items?: IBreadcrumb[];
+  path?: string;
+  title?: string;
+}
+
+export interface BreadcrumbProps {
+  breadcrumbs: IBreadcrumb[];
+  showIcon?: boolean;
+  styleType?: BreadcrumbStyleType;
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/button-group.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/button-group.vue
new file mode 100644
index 0000000..035e88c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/button-group.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { cn } from '@vben-core/shared/utils';
+
+defineOptions({ name: 'VbenButtonGroup' });
+
+withDefaults(
+  defineProps<{
+    border?: boolean;
+    gap?: number;
+    size?: 'large' | 'middle' | 'small';
+  }>(),
+  { border: false, gap: 0, size: 'middle' },
+);
+</script>
+<template>
+  <div
+    :class="
+      cn(
+        'vben-button-group rounded-md',
+        `size-${size}`,
+        gap ? 'with-gap' : 'no-gap',
+        $attrs.class as string,
+      )
+    "
+    :style="{ gap: gap ? `${gap}px` : '0px' }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.vben-button-group {
+  display: inline-flex;
+
+  &.size-large :deep(button) {
+    height: 2.25rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    .icon-wrapper {
+      margin-right: 0.4rem;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  &.size-middle :deep(button) {
+    height: 2rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+
+    .icon-wrapper {
+      margin-right: 0.2rem;
+
+      svg {
+        width: 0.75rem;
+        height: 0.75rem;
+      }
+    }
+  }
+
+  &.size-small :deep(button) {
+    height: 1.75rem;
+    padding: 0.2rem 0.4rem;
+    font-size: 0.65rem;
+    line-height: 0.75rem;
+
+    .icon-wrapper {
+      margin-right: 0.1rem;
+
+      svg {
+        width: 0.65rem;
+        height: 0.65rem;
+      }
+    }
+  }
+
+  &.no-gap > :deep(button):nth-of-type(1) {
+    border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px);
+  }
+
+  &.no-gap > :deep(button):last-of-type {
+    border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
+  }
+
+  &.no-gap {
+    :deep(button + button) {
+      border-left-width: 0;
+      border-radius: 0;
+    }
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
new file mode 100644
index 0000000..e12729a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -0,0 +1,53 @@
+import type { AsTag } from 'reka-ui';
+
+import type { Component } from 'vue';
+
+import type { ButtonVariants, ButtonVariantSize } from '../../ui';
+
+export interface VbenButtonProps {
+  /**
+   * The element or component this component should render as. Can be overwrite by `asChild`
+   * @defaultValue "div"
+   */
+  as?: AsTag | Component;
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
+   */
+  asChild?: boolean;
+  class?: any;
+  disabled?: boolean;
+  loading?: boolean;
+  size?: ButtonVariantSize;
+  variant?: ButtonVariants;
+}
+
+export type CustomRenderType = (() => Component | string) | string;
+
+export type ValueType = boolean | number | string;
+
+export interface VbenButtonGroupProps
+  extends Pick<VbenButtonProps, 'disabled'> {
+  /** 单选模式下允许清除选中 */
+  allowClear?: boolean;
+  /** 值改变前的回调 */
+  beforeChange?: (
+    value: ValueType,
+    isChecked: boolean,
+  ) => boolean | PromiseLike<boolean | undefined> | undefined;
+  /** 按钮样式 */
+  btnClass?: any;
+  /** 按钮间隔距离 */
+  gap?: number;
+  /** 多选模式下限制最多选择的数量。0表示不限制 */
+  maxCount?: number;
+  /** 是否允许多选 */
+  multiple?: boolean;
+  /** 选项 */
+  options?: { [key: string]: any; label: CustomRenderType; value: ValueType }[];
+  /** 显示图标 */
+  showIcon?: boolean;
+  /** 尺寸 */
+  size?: 'large' | 'middle' | 'small';
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
new file mode 100644
index 0000000..8d53a1e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { VbenButtonProps } from './button';
+
+import { computed } from 'vue';
+
+import { LoaderCircle } from '@vben-core/icons';
+import { cn } from '@vben-core/shared/utils';
+
+import { Primitive } from 'reka-ui';
+
+import { buttonVariants } from '../../ui';
+
+interface Props extends VbenButtonProps {}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+  class: '',
+  disabled: false,
+  loading: false,
+  size: 'default',
+  variant: 'default',
+});
+
+const isDisabled = computed(() => {
+  return props.disabled || props.loading;
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+    :disabled="isDisabled"
+  >
+    <LoaderCircle
+      v-if="loading"
+      class="text-md mr-2 size-4 flex-shrink-0 animate-spin"
+    />
+    <slot></slot>
+  </Primitive>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
new file mode 100644
index 0000000..4172d82
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
@@ -0,0 +1,196 @@
+<script lang="ts" setup>
+import type { Arrayable } from '@vueuse/core';
+
+import type { ValueType, VbenButtonGroupProps } from './button';
+
+import { computed, ref, watch } from 'vue';
+
+import { Circle, CircleCheckBig, LoaderCircle } from '@vben-core/icons';
+import { cn, isFunction } from '@vben-core/shared/utils';
+
+import { objectOmit } from '@vueuse/core';
+
+import { VbenRenderContent } from '../render-content';
+import VbenButtonGroup from './button-group.vue';
+import Button from './button.vue';
+
+const props = withDefaults(defineProps<VbenButtonGroupProps>(), {
+  gap: 0,
+  multiple: false,
+  showIcon: true,
+  size: 'middle',
+  allowClear: false,
+  maxCount: 0,
+});
+const emit = defineEmits(['btnClick']);
+const btnDefaultProps = computed(() => {
+  return {
+    ...objectOmit(props, ['options', 'btnClass', 'size', 'disabled']),
+    class: cn(props.btnClass),
+  };
+});
+const modelValue = defineModel<Arrayable<ValueType> | undefined>();
+
+const innerValue = ref<Array<ValueType>>([]);
+const loadingValues = ref<Array<ValueType>>([]);
+watch(
+  () => props.multiple,
+  (val) => {
+    if (val) {
+      modelValue.value = innerValue.value;
+    } else {
+      modelValue.value =
+        innerValue.value.length > 0 ? innerValue.value[0] : undefined;
+    }
+  },
+);
+
+watch(
+  () => modelValue.value,
+  (val) => {
+    if (Array.isArray(val)) {
+      const arrVal = val.filter((v) => v !== undefined);
+      if (arrVal.length > 0) {
+        innerValue.value = props.multiple
+          ? [...arrVal]
+          : [arrVal[0] as ValueType];
+      } else {
+        innerValue.value = [];
+      }
+    } else {
+      innerValue.value = val === undefined ? [] : [val as ValueType];
+    }
+  },
+  { deep: true, immediate: true },
+);
+
+async function onBtnClick(value: ValueType) {
+  if (props.beforeChange && isFunction(props.beforeChange)) {
+    try {
+      loadingValues.value.push(value);
+      const canChange = await props.beforeChange(
+        value,
+        !innerValue.value.includes(value),
+      );
+      if (canChange === false) {
+        return;
+      }
+    } finally {
+      loadingValues.value.splice(loadingValues.value.indexOf(value), 1);
+    }
+  }
+
+  if (props.multiple) {
+    if (innerValue.value.includes(value)) {
+      innerValue.value = innerValue.value.filter((item) => item !== value);
+    } else {
+      if (props.maxCount > 0 && innerValue.value.length >= props.maxCount) {
+        innerValue.value = innerValue.value.slice(0, props.maxCount - 1);
+      }
+      innerValue.value.push(value);
+    }
+    modelValue.value = innerValue.value;
+  } else {
+    if (props.allowClear && innerValue.value.includes(value)) {
+      innerValue.value = [];
+      modelValue.value = undefined;
+      emit('btnClick', undefined);
+      return;
+    } else {
+      innerValue.value = [value];
+      modelValue.value = value;
+    }
+  }
+  emit('btnClick', value);
+}
+</script>
+<template>
+  <VbenButtonGroup
+    :size="props.size"
+    :gap="props.gap"
+    class="vben-check-button-group"
+  >
+    <Button
+      v-for="(btn, index) in props.options"
+      :key="index"
+      :class="cn('border', props.btnClass)"
+      :disabled="
+        props.disabled ||
+        loadingValues.includes(btn.value) ||
+        (!props.multiple && loadingValues.length > 0)
+      "
+      v-bind="btnDefaultProps"
+      :variant="innerValue.includes(btn.value) ? 'default' : 'outline'"
+      @click="onBtnClick(btn.value)"
+      type="button"
+    >
+      <div class="icon-wrapper" v-if="props.showIcon">
+        <slot
+          name="icon"
+          :loading="loadingValues.includes(btn.value)"
+          :checked="innerValue.includes(btn.value)"
+        >
+          <LoaderCircle
+            class="animate-spin"
+            v-if="loadingValues.includes(btn.value)"
+          />
+          <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
+          <Circle v-else />
+        </slot>
+      </div>
+      <slot name="option" :label="btn.label" :value="btn.value" :data="btn">
+        <VbenRenderContent :content="btn.label" />
+      </slot>
+    </Button>
+  </VbenButtonGroup>
+</template>
+<style lang="scss" scoped>
+.vben-check-button-group {
+  display: flex;
+  flex-wrap: wrap;
+
+  &:deep(.size-large) button {
+    .icon-wrapper {
+      margin-right: 0.3rem;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  &:deep(.size-middle) button {
+    .icon-wrapper {
+      margin-right: 0.2rem;
+
+      svg {
+        width: 0.75rem;
+        height: 0.75rem;
+      }
+    }
+  }
+
+  &:deep(.size-small) button {
+    .icon-wrapper {
+      margin-right: 0.1rem;
+
+      svg {
+        width: 0.65rem;
+        height: 0.65rem;
+      }
+    }
+  }
+
+  &.no-gap > :deep(button):nth-of-type(1) {
+    border-right-width: 0;
+  }
+
+  &.no-gap {
+    :deep(button + button) {
+      margin-right: -1px;
+      border-left-width: 1px;
+    }
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
new file mode 100644
index 0000000..ac626c1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { ButtonVariants } from '../../ui';
+import type { VbenButtonProps } from './button';
+
+import { computed, useSlots } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { VbenTooltip } from '../tooltip';
+import VbenButton from './button.vue';
+
+interface Props extends VbenButtonProps {
+  class?: any;
+  disabled?: boolean;
+  onClick?: () => void;
+  tooltip?: string;
+  tooltipDelayDuration?: number;
+  tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
+  variant?: ButtonVariants;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  onClick: () => {},
+  tooltipDelayDuration: 200,
+  tooltipSide: 'bottom',
+  variant: 'icon',
+});
+
+const slots = useSlots();
+
+const showTooltip = computed(() => !!slots.tooltip || !!props.tooltip);
+</script>
+
+<template>
+  <VbenButton
+    v-if="!showTooltip"
+    :class="cn('rounded-full', props.class)"
+    :disabled="disabled"
+    :variant="variant"
+    size="icon"
+    @click="onClick"
+  >
+    <slot></slot>
+  </VbenButton>
+
+  <VbenTooltip
+    v-else
+    :delay-duration="tooltipDelayDuration"
+    :side="tooltipSide"
+  >
+    <template #trigger>
+      <VbenButton
+        :class="cn('rounded-full', props.class)"
+        :disabled="disabled"
+        :variant="variant"
+        size="icon"
+        @click="onClick"
+      >
+        <slot></slot>
+      </VbenButton>
+    </template>
+    <slot v-if="slots.tooltip" name="tooltip"> </slot>
+    <template v-else>
+      {{ tooltip }}
+    </template>
+  </VbenTooltip>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/index.ts
new file mode 100644
index 0000000..aa3d9ef
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/button/index.ts
@@ -0,0 +1,5 @@
+export type * from './button';
+export { default as VbenButtonGroup } from './button-group.vue';
+export { default as VbenButton } from './button.vue';
+export { default as VbenCheckButtonGroup } from './check-button-group.vue';
+export { default as VbenIconButton } from './icon-button.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
new file mode 100644
index 0000000..bceaa20
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
+
+import { useId } from 'vue';
+
+import { useForwardPropsEmits } from 'reka-ui';
+
+import { Checkbox } from '../../ui/checkbox';
+
+const props = defineProps<CheckboxRootProps & { indeterminate?: boolean }>();
+
+const emits = defineEmits<CheckboxRootEmits>();
+
+const checked = defineModel<boolean>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+
+const id = useId();
+</script>
+
+<template>
+  <div class="flex items-center">
+    <Checkbox v-bind="forwarded" :id="id" v-model="checked" />
+    <label :for="id" class="ml-2 cursor-pointer text-sm"> <slot></slot> </label>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/index.ts
new file mode 100644
index 0000000..3df9ded
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as VbenCheckbox } from './checkbox.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
new file mode 100644
index 0000000..009f267
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type {
+  ContextMenuContentProps,
+  ContextMenuRootEmits,
+  ContextMenuRootProps,
+} from 'reka-ui';
+
+import type { ClassType } from '@vben-core/typings';
+
+import type { IContextMenuItem } from './interface';
+
+import { computed } from 'vue';
+
+import { useForwardPropsEmits } from 'reka-ui';
+
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from '../../ui/context-menu';
+
+const props = defineProps<
+  ContextMenuRootProps & {
+    class?: ClassType;
+    contentClass?: ClassType;
+    contentProps?: ContextMenuContentProps;
+    handlerData?: Record<string, any>;
+    itemClass?: ClassType;
+    menus: (data: any) => IContextMenuItem[];
+  }
+>();
+
+const emits = defineEmits<ContextMenuRootEmits>();
+
+const delegatedProps = computed(() => {
+  const {
+    class: _cls,
+    contentClass: _,
+    contentProps: _cProps,
+    itemClass: _iCls,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const menusView = computed(() => {
+  return props.menus?.(props.handlerData);
+});
+
+function handleClick(menu: IContextMenuItem) {
+  if (menu.disabled) {
+    return;
+  }
+  menu?.handler?.(props.handlerData);
+}
+</script>
+
+<template>
+  <ContextMenu v-bind="forwarded">
+    <ContextMenuTrigger as-child>
+      <slot></slot>
+    </ContextMenuTrigger>
+    <ContextMenuContent
+      :class="contentClass"
+      v-bind="contentProps"
+      class="side-content z-popup"
+    >
+      <template v-for="menu in menusView" :key="menu.key">
+        <ContextMenuItem
+          v-if="!menu.hidden"
+          :class="itemClass"
+          :disabled="menu.disabled"
+          :inset="menu.inset || !menu.icon"
+          class="cursor-pointer"
+          @click="handleClick(menu)"
+        >
+          <component
+            :is="menu.icon"
+            v-if="menu.icon"
+            class="mr-2 size-4 text-lg"
+          />
+
+          {{ menu.text }}
+          <ContextMenuShortcut v-if="menu.shortcut">
+            {{ menu.shortcut }}
+          </ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuSeparator v-if="menu.separator" />
+      </template>
+    </ContextMenuContent>
+  </ContextMenu>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/index.ts
new file mode 100644
index 0000000..53a3abe
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/index.ts
@@ -0,0 +1,3 @@
+export { default as VbenContextMenu } from './context-menu.vue';
+
+export type * from './interface';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/interface.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/interface.ts
new file mode 100644
index 0000000..4aa4110
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/interface.ts
@@ -0,0 +1,42 @@
+import type { Component } from 'vue';
+
+interface IContextMenuItem {
+  /**
+   * @zh_CN 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * @zh_CN 点击事件处理
+   * @param data
+   */
+  handler?: (data: any) => void;
+  /**
+   * @zh_CN 是否隐藏
+   */
+  hidden?: boolean;
+  /**
+   * @zh_CN 图标
+   */
+  icon?: Component;
+  /**
+   * @zh_CN 是否显示图标
+   */
+  inset?: boolean;
+  /**
+   * @zh_CN 唯一标识
+   */
+  key: string;
+  /**
+   * @zh_CN 是否是分割线
+   */
+  separator?: boolean;
+  /**
+   * @zh_CN 快捷键
+   */
+  shortcut?: string;
+  /**
+   * @zh_CN 标题
+   */
+  text: string;
+}
+export type { IContextMenuItem };
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/count-to-animator.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/count-to-animator.vue
new file mode 100644
index 0000000..50fece6
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/count-to-animator.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, unref, watch, watchEffect } from 'vue';
+
+import { isNumber } from '@vben-core/shared/utils';
+
+import { TransitionPresets, useTransition } from '@vueuse/core';
+
+interface Props {
+  autoplay?: boolean;
+  color?: string;
+  decimal?: string;
+  decimals?: number;
+  duration?: number;
+  endVal?: number;
+  prefix?: string;
+  separator?: string;
+  startVal?: number;
+  suffix?: string;
+  transition?: keyof typeof TransitionPresets;
+  useEasing?: boolean;
+}
+
+defineOptions({ name: 'CountToAnimator' });
+
+const props = withDefaults(defineProps<Props>(), {
+  autoplay: true,
+  color: '',
+  decimal: '.',
+  decimals: 0,
+  duration: 1500,
+  endVal: 2021,
+  prefix: '',
+  separator: ',',
+  startVal: 0,
+  suffix: '',
+  transition: 'linear',
+  useEasing: true,
+});
+
+const emit = defineEmits<{
+  finished: [];
+  /**
+   * @deprecated 请使用{@link finished}事件
+   */
+  onFinished: [];
+  /**
+   * @deprecated 请使用{@link started}事件
+   */
+  onStarted: [];
+  started: [];
+}>();
+
+const source = ref(props.startVal);
+const disabled = ref(false);
+let outputValue = useTransition(source);
+
+const value = computed(() => formatNumber(unref(outputValue)));
+
+watchEffect(() => {
+  source.value = props.startVal;
+});
+
+watch([() => props.startVal, () => props.endVal], () => {
+  if (props.autoplay) {
+    start();
+  }
+});
+
+onMounted(() => {
+  props.autoplay && start();
+});
+
+function start() {
+  run();
+  source.value = props.endVal;
+}
+
+function reset() {
+  source.value = props.startVal;
+  run();
+}
+
+function run() {
+  outputValue = useTransition(source, {
+    disabled,
+    duration: props.duration,
+    onFinished: () => {
+      emit('finished');
+      emit('onFinished');
+    },
+    onStarted: () => {
+      emit('started');
+      emit('onStarted');
+    },
+    ...(props.useEasing
+      ? { transition: TransitionPresets[props.transition] }
+      : {}),
+  });
+}
+
+function formatNumber(num: number | string) {
+  if (!num && num !== 0) {
+    return '';
+  }
+  const { decimal, decimals, prefix, separator, suffix } = props;
+  num = Number(num).toFixed(decimals);
+  num += '';
+
+  const x = num.split('.');
+  let x1 = x[0];
+  const x2 = x.length > 1 ? decimal + x[1] : '';
+
+  const rgx = /(\d+)(\d{3})/;
+  if (separator && !isNumber(separator) && x1) {
+    while (rgx.test(x1)) {
+      x1 = x1.replace(rgx, `$1${separator}$2`);
+    }
+  }
+  return prefix + x1 + x2 + suffix;
+}
+
+defineExpose({ reset });
+</script>
+<template>
+  <span :style="{ color }">
+    {{ value }}
+  </span>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/index.ts
new file mode 100644
index 0000000..a97bafb
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/count-to-animator/index.ts
@@ -0,0 +1 @@
+export { default as VbenCountToAnimator } from './count-to-animator.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
new file mode 100644
index 0000000..b59c817
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type {
+  DropdownMenuProps,
+  VbenDropdownMenuItem as IDropdownMenuItem,
+} from './interface';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../ui';
+
+interface Props extends DropdownMenuProps {}
+
+defineOptions({ name: 'DropdownMenu' });
+const props = withDefaults(defineProps<Props>(), {});
+
+function handleItemClick(menu: IDropdownMenuItem) {
+  if (menu.disabled) {
+    return;
+  }
+  menu?.handler?.(props);
+}
+</script>
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger class="flex h-full items-center gap-1">
+      <slot></slot>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start">
+      <DropdownMenuGroup>
+        <template v-for="menu in menus" :key="menu.value">
+          <DropdownMenuItem
+            :disabled="menu.disabled"
+            class="mb-1 cursor-pointer text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
+            @click="handleItemClick(menu)"
+          >
+            <component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />
+            {{ menu.label }}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator v-if="menu.separator" class="bg-border" />
+        </template>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
new file mode 100644
index 0000000..6382426
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { DropdownMenuProps } from './interface';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../ui';
+
+interface Props extends DropdownMenuProps {}
+
+defineOptions({ name: 'DropdownRadioMenu' });
+withDefaults(defineProps<Props>(), {});
+
+const modelValue = defineModel<string>();
+
+function handleItemClick(value: string) {
+  modelValue.value = value;
+}
+</script>
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child class="flex items-center gap-1">
+      <slot></slot>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start">
+      <DropdownMenuGroup>
+        <template v-for="menu in menus" :key="menu.value">
+          <DropdownMenuItem
+            :class="
+              menu.value === modelValue
+                ? 'bg-accent text-accent-foreground'
+                : ''
+            "
+            class="mb-1 cursor-pointer text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
+            @click="handleItemClick(menu.value)"
+          >
+            <component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />
+            <span
+              v-if="!menu.icon"
+              :class="menu.value === modelValue ? 'bg-foreground' : ''"
+              class="mr-2 size-1.5 rounded-full"
+            ></span>
+            {{ menu.label }}
+          </DropdownMenuItem>
+        </template>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/index.ts
new file mode 100644
index 0000000..bff1700
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/index.ts
@@ -0,0 +1,4 @@
+export { default as VbenDropdownMenu } from './dropdown-menu.vue';
+export { default as VbenDropdownRadioMenu } from './dropdown-radio-menu.vue';
+
+export type * from './interface';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/interface.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/interface.ts
new file mode 100644
index 0000000..01a31a1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/interface.ts
@@ -0,0 +1,32 @@
+import type { Component } from 'vue';
+
+interface VbenDropdownMenuItem {
+  disabled?: boolean;
+  /**
+   * @zh_CN 点击事件处理
+   * @param data
+   */
+  handler?: (data: any) => void;
+  /**
+   * @zh_CN 图标
+   */
+  icon?: Component;
+  /**
+   * @zh_CN 标题
+   */
+  label: string;
+  /**
+   * @zh_CN 是否是分割线
+   */
+  separator?: boolean;
+  /**
+   * @zh_CN 唯一标识
+   */
+  value: string;
+}
+
+interface DropdownMenuProps {
+  menus: VbenDropdownMenuItem[];
+}
+
+export type { DropdownMenuProps, VbenDropdownMenuItem };
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/expandable-arrow.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/expandable-arrow.vue
new file mode 100644
index 0000000..5cdf619
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/expandable-arrow.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { ChevronDown } from '@vben-core/icons';
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: string;
+}>();
+
+// 控制箭头展开/收起状态
+const collapsed = defineModel({ default: false });
+</script>
+
+<template>
+  <div
+    :class="cn('vben-link inline-flex items-center', props.class)"
+    @click="collapsed = !collapsed"
+  >
+    <slot :is-expanded="collapsed">
+      {{ collapsed }}
+      <!-- <span>{{ isExpanded ? '收起' : '展开' }}</span> -->
+    </slot>
+    <div
+      :class="{ 'rotate-180': !collapsed }"
+      class="transition-transform duration-300"
+    >
+      <slot name="icon">
+        <ChevronDown class="size-4" />
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/index.ts
new file mode 100644
index 0000000..a35bd9a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/index.ts
@@ -0,0 +1 @@
+export { default as VbenExpandableArrow } from './expandable-arrow.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
new file mode 100644
index 0000000..524b557
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { Maximize, Minimize } from '@vben-core/icons';
+
+import { useFullscreen } from '@vueuse/core';
+
+import { VbenIconButton } from '../button';
+
+defineOptions({ name: 'FullScreen' });
+
+const { isFullscreen, toggle } = useFullscreen();
+
+// 重新检查全屏状态
+isFullscreen.value = !!(
+  document.fullscreenElement ||
+  // @ts-ignore
+  document.webkitFullscreenElement ||
+  // @ts-ignore
+  document.mozFullScreenElement ||
+  // @ts-ignore
+  document.msFullscreenElement
+);
+</script>
+<template>
+  <VbenIconButton
+    class="hover:animate-[shrink_0.3s_ease-in-out]"
+    @click="toggle"
+  >
+    <Minimize v-if="isFullscreen" class="size-4 text-foreground" />
+    <Maximize v-else class="size-4 text-foreground" />
+  </VbenIconButton>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/index.ts
new file mode 100644
index 0000000..3997ee0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/index.ts
@@ -0,0 +1 @@
+export { default as VbenFullScreen } from './full-screen.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
new file mode 100644
index 0000000..47ddad8
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type {
+  HoverCardContentProps,
+  HoverCardRootEmits,
+  HoverCardRootProps,
+} from 'reka-ui';
+
+import type { ClassType } from '@vben-core/typings';
+
+import { computed } from 'vue';
+
+import { useForwardPropsEmits } from 'reka-ui';
+
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../ui';
+
+interface Props extends HoverCardRootProps {
+  class?: ClassType;
+  contentClass?: ClassType;
+  contentProps?: HoverCardContentProps;
+}
+
+const props = defineProps<Props>();
+
+const emits = defineEmits<HoverCardRootEmits>();
+
+const delegatedProps = computed(() => {
+  const {
+    class: _cls,
+    contentClass: _,
+    contentProps: _cProps,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <HoverCard v-bind="forwarded">
+    <HoverCardTrigger as-child class="h-full">
+      <div class="h-full cursor-pointer">
+        <slot name="trigger"></slot>
+      </div>
+    </HoverCardTrigger>
+    <HoverCardContent
+      :class="contentClass"
+      v-bind="contentProps"
+      class="side-content z-popup"
+    >
+      <slot></slot>
+    </HoverCardContent>
+  </HoverCard>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/index.ts
new file mode 100644
index 0000000..3582521
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/index.ts
@@ -0,0 +1,2 @@
+export { default as VbenHoverCard } from './hover-card.vue';
+export type { HoverCardContentProps } from 'reka-ui';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue
new file mode 100644
index 0000000..80de0d7
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+import { computed } from 'vue';
+
+import { IconDefault, IconifyIcon } from '@vben-core/icons';
+import {
+  isFunction,
+  isHttpUrl,
+  isObject,
+  isString,
+} from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  // 没有是否显示默认图标
+  fallback?: boolean;
+  icon?: Component | Function | string;
+}>();
+
+const isRemoteIcon = computed(() => {
+  return isString(props.icon) && isHttpUrl(props.icon);
+});
+
+const isComponent = computed(() => {
+  const { icon } = props;
+  return !isString(icon) && (isObject(icon) || isFunction(icon));
+});
+</script>
+
+<template>
+  <component :is="icon as Component" v-if="isComponent" v-bind="$attrs" />
+  <img v-else-if="isRemoteIcon" :src="icon as string" v-bind="$attrs" />
+  <IconifyIcon v-else-if="icon" v-bind="$attrs" :icon="icon as string" />
+  <IconDefault v-else-if="fallback" v-bind="$attrs" />
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/icon/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/icon/index.ts
new file mode 100644
index 0000000..8f3f204
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/icon/index.ts
@@ -0,0 +1 @@
+export { default as VbenIcon } from './icon.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
new file mode 100644
index 0000000..6b2c7fc
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
@@ -0,0 +1,23 @@
+export * from './avatar';
+export * from './back-top';
+export * from './breadcrumb';
+export * from './button';
+export * from './checkbox';
+export * from './context-menu';
+export * from './count-to-animator';
+export * from './dropdown-menu';
+export * from './expandable-arrow';
+export * from './full-screen';
+export * from './hover-card';
+export * from './icon';
+export * from './input-password';
+export * from './logo';
+export * from './pin-input';
+export * from './popover';
+export * from './render-content';
+export * from './scrollbar';
+export * from './segmented';
+export * from './select';
+export * from './spine-text';
+export * from './spinner';
+export * from './tooltip';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/input-password/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/input-password/index.ts
new file mode 100644
index 0000000..eeca558
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/input-password/index.ts
@@ -0,0 +1 @@
+export { default as VbenInputPassword } from './input-password.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
new file mode 100644
index 0000000..e9ff3fb
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref, useSlots } from 'vue';
+
+import { Eye, EyeOff } from '@vben-core/icons';
+import { cn } from '@vben-core/shared/utils';
+
+import { Input } from '../../ui';
+import PasswordStrength from './password-strength.vue';
+
+interface Props {
+  class?: any;
+  /**
+   * 是否显示密码强度
+   */
+  passwordStrength?: boolean;
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<Props>();
+
+const modelValue = defineModel<string>();
+
+const slots = useSlots();
+
+const show = ref(false);
+</script>
+
+<template>
+  <div class="relative w-full">
+    <Input
+      v-bind="$attrs"
+      v-model="modelValue"
+      :class="cn(props.class)"
+      :type="show ? 'text' : 'password'"
+    />
+    <template v-if="passwordStrength">
+      <PasswordStrength :password="modelValue" />
+      <p v-if="slots.strengthText" class="mt-1.5 text-xs text-muted-foreground">
+        <slot name="strengthText"> </slot>
+      </p>
+    </template>
+    <div
+      :class="{
+        'top-3': !!passwordStrength,
+        'top-1/2 -translate-y-1/2 items-center': !passwordStrength,
+      }"
+      class="absolute inset-y-0 right-0 flex cursor-pointer pr-3 text-lg leading-5 text-foreground/60 hover:text-foreground"
+      @click="show = !show"
+    >
+      <Eye v-if="show" class="size-4" />
+      <EyeOff v-else class="size-4" />
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue
new file mode 100644
index 0000000..4b0be20
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{ password?: string }>(), {
+  password: '',
+});
+
+const strengthList: string[] = [
+  '',
+  '#e74242',
+  '#ED6F6F',
+  '#EFBD47',
+  '#55D18780',
+  '#55D187',
+];
+
+const currentStrength = computed(() => {
+  return checkPasswordStrength(props.password);
+});
+
+const currentColor = computed(() => {
+  return strengthList[currentStrength.value];
+});
+
+/**
+ * Check the strength of a password
+ */
+function checkPasswordStrength(password: string) {
+  let strength = 0;
+
+  // Check length
+  if (password.length >= 8) strength++;
+
+  // Check for lowercase letters
+  if (/[a-z]/.test(password)) strength++;
+
+  // Check for uppercase letters
+  if (/[A-Z]/.test(password)) strength++;
+
+  // Check for numbers
+  if (/\d/.test(password)) strength++;
+
+  // Check for special characters
+  if (/[^\da-z]/i.test(password)) strength++;
+
+  return strength;
+}
+</script>
+
+<template>
+  <div class="relative mt-2 flex items-center justify-between">
+    <template v-for="index in 5" :key="index">
+      <div
+        class="relative mr-1 h-1.5 w-1/5 rounded-sm bg-heavy last:mr-0 dark:bg-input-background"
+      >
+        <span
+          :style="{
+            backgroundColor: currentColor,
+            width: currentStrength >= index ? '100%' : '',
+          }"
+          class="absolute left-0 h-full w-0 rounded-sm transition-all duration-500"
+        ></span>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/logo/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/logo/index.ts
new file mode 100644
index 0000000..d2a2f99
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/logo/index.ts
@@ -0,0 +1 @@
+export { default as VbenLogo } from './logo.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
new file mode 100644
index 0000000..0bca091
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { VbenAvatar } from '../avatar';
+
+interface Props {
+  /**
+   * @zh_CN 是否收起文本
+   */
+  collapsed?: boolean;
+  /**
+   * @zh_CN Logo 图片适应方式
+   */
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+  /**
+   * @zh_CN Logo 跳转地址
+   */
+  href?: string;
+  /**
+   * @zh_CN Logo 图片大小
+   */
+  logoSize?: number;
+  /**
+   * @zh_CN Logo 图标
+   */
+  src?: string;
+  /**
+   * @zh_CN 暗色主题 Logo 图标 (可选，若不设置则使用 src)
+   */
+  srcDark?: string;
+  /**
+   * @zh_CN Logo 文本
+   */
+  text: string;
+  /**
+   * @zh_CN Logo 主题
+   */
+  theme?: string;
+}
+
+defineOptions({
+  name: 'VbenLogo',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  collapsed: false,
+  href: 'javascript:void 0',
+  logoSize: 32,
+  src: '',
+  srcDark: '',
+  theme: 'light',
+  fit: 'cover',
+});
+
+/**
+ * @zh_CN 根据主题选择合适的 logo 图标
+ */
+const logoSrc = computed(() => {
+  // 如果是暗色主题且提供了 srcDark，则使用暗色主题的 logo
+  if (props.theme === 'dark' && props.srcDark) {
+    return props.srcDark;
+  }
+  // 否则使用默认的 src
+  return props.src;
+});
+</script>
+
+<template>
+  <div :class="theme" class="flex h-full items-center text-lg">
+    <a
+      :class="$attrs.class"
+      :href="href"
+      class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500"
+    >
+      <VbenAvatar
+        v-if="logoSrc"
+        :alt="text"
+        :src="logoSrc"
+        :size="logoSize"
+        :fit="fit"
+        class="relative rounded-none bg-transparent"
+      />
+      <template v-if="!collapsed">
+        <slot name="text">
+          <span class="truncate text-nowrap font-semibold text-foreground">
+            {{ text }}
+          </span>
+        </slot>
+      </template>
+    </a>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/index.ts
new file mode 100644
index 0000000..9d6a61a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/index.ts
@@ -0,0 +1,3 @@
+export { default as VbenPinInput } from './input.vue';
+
+export type * from './types';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
new file mode 100644
index 0000000..a855778
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { PinInputProps } from './types';
+
+import { computed, onBeforeUnmount, ref, useId, watch } from 'vue';
+
+import { PinInput, PinInputGroup, PinInputInput } from '../../ui';
+import { VbenButton } from '../button';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const {
+  codeLength = 6,
+  createText = async () => {},
+  disabled = false,
+  handleSendCode = async () => {},
+  loading = false,
+  maxTime = 60,
+} = defineProps<PinInputProps>();
+
+const emit = defineEmits<{
+  complete: [];
+  sendError: [error: any];
+}>();
+
+const timer = ref<ReturnType<typeof setTimeout>>();
+
+const modelValue = defineModel<string>();
+
+const inputValue = ref<string[]>([]);
+const countdown = ref(0);
+
+const btnText = computed(() => {
+  const countdownValue = countdown.value;
+  return createText?.(countdownValue);
+});
+
+const btnLoading = computed(() => {
+  return loading || countdown.value > 0;
+});
+
+watch(
+  () => modelValue.value,
+  () => {
+    inputValue.value = modelValue.value?.split('') ?? [];
+  },
+);
+
+watch(inputValue, (val) => {
+  modelValue.value = val.join('');
+});
+
+function handleComplete(e: string[]) {
+  modelValue.value = e.join('');
+  emit('complete');
+}
+
+async function handleSend(e: Event) {
+  try {
+    e?.preventDefault();
+    countdown.value = maxTime;
+    startCountdown();
+    await handleSendCode();
+  } catch (error) {
+    console.error('Failed to send code:', error);
+    // Consider emitting an error event or showing a notification
+    emit('sendError', error);
+  }
+}
+
+function startCountdown() {
+  if (countdown.value > 0) {
+    timer.value = setTimeout(() => {
+      countdown.value--;
+      startCountdown();
+    }, 1000);
+  }
+}
+
+onBeforeUnmount(() => {
+  countdown.value = 0;
+  clearTimeout(timer.value);
+});
+
+const id = useId();
+
+const pinType = 'text' as const;
+</script>
+
+<template>
+  <PinInput
+    :id="id"
+    v-model="inputValue"
+    :disabled="disabled"
+    class="flex w-full justify-between"
+    otp
+    placeholder="○"
+    :type="pinType"
+    @complete="handleComplete"
+  >
+    <div class="relative flex w-full">
+      <PinInputGroup class="mr-2">
+        <PinInputInput
+          v-for="(item, index) in codeLength"
+          :key="item"
+          :index="index"
+        />
+      </PinInputGroup>
+      <VbenButton
+        :disabled="disabled"
+        :loading="btnLoading"
+        class="flex-grow"
+        size="lg"
+        variant="outline"
+        @click="handleSend"
+      >
+        {{ btnText }}
+      </VbenButton>
+    </div>
+  </PinInput>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
new file mode 100644
index 0000000..182d884
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
@@ -0,0 +1,30 @@
+interface PinInputProps {
+  class?: any;
+  /**
+   * 验证码长度
+   */
+  codeLength?: number;
+  /**
+   * 发送验证码按钮文本
+   */
+  createText?: (countdown: number) => string;
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+  /**
+   * 自定义验证码发送逻辑
+   * @returns
+   */
+  handleSendCode?: () => Promise<void>;
+  /**
+   * 发送验证码按钮loading
+   */
+  loading?: boolean;
+  /**
+   * 最大重试时间
+   */
+  maxTime?: number;
+}
+
+export type { PinInputProps };
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/popover/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/popover/index.ts
new file mode 100644
index 0000000..bc0b64a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/popover/index.ts
@@ -0,0 +1 @@
+export { default as VbenPopover } from './popover.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
new file mode 100644
index 0000000..2350d17
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type {
+  PopoverContentProps,
+  PopoverRootEmits,
+  PopoverRootProps,
+} from 'reka-ui';
+
+import type { ClassType } from '@vben-core/typings';
+
+import { computed } from 'vue';
+
+import { useForwardPropsEmits } from 'reka-ui';
+
+import {
+  PopoverContent,
+  Popover as PopoverRoot,
+  PopoverTrigger,
+} from '../../ui';
+
+interface Props extends PopoverRootProps {
+  class?: ClassType;
+  contentClass?: ClassType;
+  contentProps?: PopoverContentProps;
+  triggerClass?: ClassType;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const emits = defineEmits<PopoverRootEmits>();
+
+const delegatedProps = computed(() => {
+  const {
+    class: _cls,
+    contentClass: _,
+    contentProps: _cProps,
+    triggerClass: _tClass,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <PopoverTrigger :class="triggerClass">
+      <slot name="trigger"></slot>
+
+      <PopoverContent
+        :class="contentClass"
+        class="side-content z-popup"
+        v-bind="contentProps"
+      >
+        <slot></slot>
+      </PopoverContent>
+    </PopoverTrigger>
+  </PopoverRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/render-content/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/render-content/index.ts
new file mode 100644
index 0000000..788c8af
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/render-content/index.ts
@@ -0,0 +1 @@
+export { default as VbenRenderContent } from './render-content.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
new file mode 100644
index 0000000..1816051
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
@@ -0,0 +1,56 @@
+<script lang="ts">
+import type { Component, PropType } from 'vue';
+
+import { defineComponent, h } from 'vue';
+
+import { isFunction, isObject, isString } from '@vben-core/shared/utils';
+
+export default defineComponent({
+  name: 'RenderContent',
+  props: {
+    content: {
+      default: undefined as
+        | PropType<(() => any) | Component | string>
+        | undefined,
+      type: [Object, String, Function],
+    },
+    renderBr: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      if (!props.content) {
+        return null;
+      }
+      const isComponent =
+        (isObject(props.content) || isFunction(props.content)) &&
+        props.content !== null;
+      if (!isComponent) {
+        if (props.renderBr && isString(props.content)) {
+          const lines = props.content.split('\n');
+          const result = [];
+          for (const [i, line] of lines.entries()) {
+            result.push(h('p', { key: i }, line));
+            // if (i < lines.length - 1) {
+            //   result.push(h('br'));
+            // }
+          }
+          return result;
+        } else {
+          return props.content;
+        }
+      }
+      return h(props.content as never, {
+        ...attrs,
+        props: {
+          ...props,
+          ...attrs,
+        },
+        slots,
+      });
+    };
+  },
+});
+</script>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/index.ts
new file mode 100644
index 0000000..57f6f1b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/index.ts
@@ -0,0 +1 @@
+export { default as VbenScrollbar } from './scrollbar.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
new file mode 100644
index 0000000..792ad21
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import type { ClassType } from '@vben-core/typings';
+
+import { computed, ref } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ScrollArea, ScrollBar } from '../../ui';
+
+interface Props {
+  class?: ClassType;
+  horizontal?: boolean;
+  scrollBarClass?: ClassType;
+  shadow?: boolean;
+  shadowBorder?: boolean;
+  shadowBottom?: boolean;
+  shadowLeft?: boolean;
+  shadowRight?: boolean;
+  shadowTop?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+  horizontal: false,
+  shadow: false,
+  shadowBorder: false,
+  shadowBottom: true,
+  shadowLeft: false,
+  shadowRight: false,
+  shadowTop: true,
+});
+
+const emit = defineEmits<{
+  scrollAt: [{ bottom: boolean; left: boolean; right: boolean; top: boolean }];
+}>();
+
+const isAtTop = ref(true);
+const isAtRight = ref(false);
+const isAtBottom = ref(false);
+const isAtLeft = ref(true);
+
+/**
+ * We have to check if the scroll amount is close enough to some threshold in order to
+ * more accurately calculate arrivedState. This is because scrollTop/scrollLeft are non-rounded
+ * numbers, while scrollHeight/scrollWidth and clientHeight/clientWidth are rounded.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
+ */
+const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
+
+const showShadowTop = computed(() => props.shadow && props.shadowTop);
+const showShadowBottom = computed(() => props.shadow && props.shadowBottom);
+const showShadowLeft = computed(() => props.shadow && props.shadowLeft);
+const showShadowRight = computed(() => props.shadow && props.shadowRight);
+
+const computedShadowClasses = computed(() => {
+  return {
+    'both-shadow':
+      !isAtLeft.value &&
+      !isAtRight.value &&
+      showShadowLeft.value &&
+      showShadowRight.value,
+    'left-shadow': !isAtLeft.value && showShadowLeft.value,
+    'right-shadow': !isAtRight.value && showShadowRight.value,
+  };
+});
+
+function handleScroll(event: Event) {
+  const target = event.target as HTMLElement;
+  const scrollTop = target?.scrollTop ?? 0;
+  const scrollLeft = target?.scrollLeft ?? 0;
+  const clientHeight = target?.clientHeight ?? 0;
+  const clientWidth = target?.clientWidth ?? 0;
+  const scrollHeight = target?.scrollHeight ?? 0;
+  const scrollWidth = target?.scrollWidth ?? 0;
+  isAtTop.value = scrollTop <= 0;
+  isAtLeft.value = scrollLeft <= 0;
+  isAtBottom.value =
+    Math.abs(scrollTop) + clientHeight >=
+    scrollHeight - ARRIVED_STATE_THRESHOLD_PIXELS;
+  isAtRight.value =
+    Math.abs(scrollLeft) + clientWidth >=
+    scrollWidth - ARRIVED_STATE_THRESHOLD_PIXELS;
+
+  emit('scrollAt', {
+    bottom: isAtBottom.value,
+    left: isAtLeft.value,
+    right: isAtRight.value,
+    top: isAtTop.value,
+  });
+}
+</script>
+
+<template>
+  <ScrollArea
+    :class="[cn(props.class), computedShadowClasses]"
+    :on-scroll="handleScroll"
+    class="vben-scrollbar relative"
+  >
+    <div
+      v-if="showShadowTop"
+      :class="{
+        'opacity-100': !isAtTop,
+        'border-t border-border': shadowBorder && !isAtTop,
+      }"
+      class="scrollbar-top-shadow pointer-events-none absolute top-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
+    ></div>
+    <slot></slot>
+    <div
+      v-if="showShadowBottom"
+      :class="{
+        'opacity-100': !isAtTop && !isAtBottom,
+        'border-b border-border': shadowBorder && !isAtTop && !isAtBottom,
+      }"
+      class="scrollbar-bottom-shadow pointer-events-none absolute bottom-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
+    ></div>
+    <ScrollBar
+      v-if="horizontal"
+      :class="scrollBarClass"
+      orientation="horizontal"
+    />
+  </ScrollArea>
+</template>
+
+<style scoped>
+.vben-scrollbar {
+  &:not(.both-shadow).left-shadow {
+    mask-image: linear-gradient(90deg, transparent, #000 16px);
+  }
+
+  &:not(.both-shadow).right-shadow {
+    mask-image: linear-gradient(
+      90deg,
+      #000 0%,
+      #000 calc(100% - 16px),
+      transparent
+    );
+  }
+
+  &.both-shadow {
+    mask-image: linear-gradient(
+      90deg,
+      transparent,
+      #000 16px,
+      #000 calc(100% - 16px),
+      transparent 100%
+    );
+  }
+}
+
+.scrollbar-top-shadow {
+  background: linear-gradient(
+    to bottom,
+    hsl(var(--scroll-shadow, var(--background))),
+    transparent
+  );
+}
+
+.scrollbar-bottom-shadow {
+  background: linear-gradient(
+    to top,
+    hsl(var(--scroll-shadow, var(--background))),
+    transparent
+  );
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/index.ts
new file mode 100644
index 0000000..1ec820d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/index.ts
@@ -0,0 +1,3 @@
+export { default as VbenSegmented } from './segmented.vue';
+
+export type * from './types';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
new file mode 100644
index 0000000..a515474
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { SegmentedItem } from './types';
+
+import { computed } from 'vue';
+
+import { TabsTrigger } from 'reka-ui';
+
+import { Tabs, TabsContent, TabsList } from '../../ui';
+import TabsIndicator from './tabs-indicator.vue';
+
+interface Props {
+  defaultValue?: string;
+  tabs?: SegmentedItem[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultValue: '',
+  tabs: () => [],
+});
+
+const activeTab = defineModel<string>();
+
+const getDefaultValue = computed(() => {
+  return props.defaultValue || props.tabs[0]?.value;
+});
+
+const tabsStyle = computed(() => {
+  return {
+    'grid-template-columns': `repeat(${props.tabs.length}, minmax(0, 1fr))`,
+  };
+});
+
+const tabsIndicatorStyle = computed(() => {
+  return {
+    width: `${(100 / props.tabs.length).toFixed(0)}%`,
+  };
+});
+
+function activeClass(tab: string): string[] {
+  return tab === activeTab.value ? ['!font-bold', 'text-primary'] : [];
+}
+</script>
+
+<template>
+  <Tabs v-model="activeTab" :default-value="getDefaultValue">
+    <TabsList
+      :style="tabsStyle"
+      class="relative grid w-full bg-accent !outline !outline-2 !outline-heavy"
+    >
+      <TabsIndicator :style="tabsIndicatorStyle" />
+      <template v-for="tab in tabs" :key="tab.value">
+        <TabsTrigger
+          :value="tab.value"
+          :class="activeClass(tab.value)"
+          class="z-20 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium hover:text-primary disabled:pointer-events-none disabled:opacity-50"
+        >
+          {{ tab.label }}
+        </TabsTrigger>
+      </template>
+    </TabsList>
+    <template v-for="tab in tabs" :key="tab.value">
+      <TabsContent :value="tab.value">
+        <slot :name="tab.value"></slot>
+      </TabsContent>
+    </template>
+  </Tabs>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
new file mode 100644
index 0000000..80e4c9d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { TabsIndicatorProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { TabsIndicator, useForwardProps } from 'reka-ui';
+
+const props = defineProps<TabsIndicatorProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TabsIndicator
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--reka-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
+        props.class,
+      )
+    "
+  >
+    <div
+      class="inline-flex h-full w-full items-center justify-center whitespace-nowrap rounded-md bg-background px-3 py-1 text-sm font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+    >
+      <slot></slot>
+    </div>
+  </TabsIndicator>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/types.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/types.ts
new file mode 100644
index 0000000..b24f983
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/segmented/types.ts
@@ -0,0 +1,6 @@
+interface SegmentedItem {
+  label: string;
+  value: string;
+}
+
+export type { SegmentedItem };
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/select/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/select/index.ts
new file mode 100644
index 0000000..1aa5d98
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/select/index.ts
@@ -0,0 +1 @@
+export { default as VbenSelect } from './select.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
new file mode 100644
index 0000000..24b8ea2
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { CircleX } from '@vben-core/icons';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../ui';
+
+interface Props {
+  allowClear?: boolean;
+  class?: any;
+  options?: Array<{ label: string; value: string }>;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  allowClear: false,
+});
+
+const modelValue = defineModel<string>();
+
+function handleClear() {
+  modelValue.value = undefined;
+}
+</script>
+<template>
+  <Select v-model="modelValue">
+    <SelectTrigger :class="props.class" class="flex w-full items-center">
+      <SelectValue class="flex-auto text-left" :placeholder="placeholder" />
+      <CircleX
+        @pointerdown.stop
+        @click.stop.prevent="handleClear"
+        v-if="allowClear && modelValue"
+        data-clear-button
+        class="mr-1 size-4 cursor-pointer opacity-50 hover:opacity-100"
+      />
+    </SelectTrigger>
+    <SelectContent>
+      <template v-for="item in options" :key="item.value">
+        <SelectItem :value="item.value"> {{ item.label }} </SelectItem>
+      </template>
+    </SelectContent>
+  </Select>
+</template>
+
+<style lang="scss" scoped>
+button[role='combobox'][data-placeholder] {
+  color: hsl(var(--muted-foreground));
+}
+
+button {
+  --ring: var(--primary);
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/index.ts
new file mode 100644
index 0000000..a529826
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/index.ts
@@ -0,0 +1 @@
+export { default as VbenSpineText } from './spine-text.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
new file mode 100644
index 0000000..238a9f4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const { animationDuration = 2, animationIterationCount = 'infinite' } =
+  defineProps<{
+    // 动画持续时间，单位秒
+    animationDuration?: number;
+    // 动画是否只执行一次
+    animationIterationCount?: 'infinite' | number;
+  }>();
+
+const style = computed(() => {
+  return {
+    animation: `shine ${animationDuration}s linear ${animationIterationCount}`,
+  };
+});
+</script>
+<template>
+  <div :style="style" class="vben-spine-text !bg-clip-text text-transparent">
+    <slot></slot>
+  </div>
+</template>
+<style>
+.vben-spine-text {
+  background:
+    radial-gradient(circle at center, rgb(255 255 255 / 80%), #f000) -200% 50% /
+      200% 100% no-repeat,
+    #000;
+
+  /* animation: shine 3s linear infinite; */
+}
+
+.dark .vben-spine-text {
+  background:
+    radial-gradient(circle at center, rgb(24 24 26 / 80%), transparent) -200%
+      50% / 200% 100% no-repeat,
+    #f4f4f4;
+}
+
+@keyframes shine {
+  0% {
+    background-position: 200% 0%;
+  }
+
+  100% {
+    background-position: -200% 0%;
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spinner/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spinner/index.ts
new file mode 100644
index 0000000..4bba740
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spinner/index.ts
@@ -0,0 +1,2 @@
+export { default as VbenLoading } from './loading.vue';
+export { default as VbenSpinner } from './spinner.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
new file mode 100644
index 0000000..268da93
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+interface Props {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+  /**
+   * @zh_CN 文字
+   */
+  text?: string;
+}
+
+defineOptions({
+  name: 'VbenLoading',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  minLoadingTime: 50,
+  text: '',
+});
+// const startTime = ref(0);
+const showSpinner = ref(false);
+const renderSpinner = ref(false);
+const timer = ref<ReturnType<typeof setTimeout>>();
+
+watch(
+  () => props.spinning,
+  (show) => {
+    if (!show) {
+      showSpinner.value = false;
+      clearTimeout(timer.value);
+      return;
+    }
+
+    // startTime.value = performance.now();
+    timer.value = setTimeout(() => {
+      // const loadingTime = performance.now() - startTime.value;
+
+      showSpinner.value = true;
+      if (showSpinner.value) {
+        renderSpinner.value = true;
+      }
+    }, props.minLoadingTime);
+  },
+  {
+    immediate: true,
+  },
+);
+
+function onTransitionEnd() {
+  if (!showSpinner.value) {
+    renderSpinner.value = false;
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'absolute left-0 top-0 z-100 flex size-full flex-col items-center justify-center bg-overlay-content transition-all duration-500 dark:bg-overlay',
+        {
+          'invisible opacity-0': !showSpinner,
+        },
+        props.class,
+      )
+    "
+    @transitionend="onTransitionEnd"
+  >
+    <slot name="icon" v-if="renderSpinner">
+      <span class="dot relative inline-block size-9 text-3xl">
+        <i
+          v-for="index in 4"
+          :key="index"
+          class="absolute block size-4 origin-[50%_50%] scale-75 rounded-full bg-primary opacity-30"
+        ></i>
+      </span>
+    </slot>
+
+    <div v-if="text" class="mt-4 text-xs text-primary">{{ text }}</div>
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.dot {
+  transform: rotate(45deg);
+  animation: rotate-ani 1.2s infinite linear;
+}
+
+.dot i {
+  animation: spin-move-ani 1s infinite linear alternate;
+}
+
+.dot i:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+
+.dot i:nth-child(2) {
+  top: 0;
+  right: 0;
+  animation-delay: 0.4s;
+}
+
+.dot i:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  animation-delay: 0.8s;
+}
+
+.dot i:nth-child(4) {
+  bottom: 0;
+  left: 0;
+  animation-delay: 1.2s;
+}
+
+@keyframes rotate-ani {
+  to {
+    transform: rotate(405deg);
+  }
+}
+
+@keyframes spin-move-ani {
+  to {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
new file mode 100644
index 0000000..7e5ce3b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+interface Props {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+}
+
+defineOptions({
+  name: 'VbenSpinner',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  minLoadingTime: 50,
+});
+// const startTime = ref(0);
+const showSpinner = ref(false);
+const renderSpinner = ref(false);
+const timer = ref<ReturnType<typeof setTimeout>>();
+
+watch(
+  () => props.spinning,
+  (show) => {
+    if (!show) {
+      showSpinner.value = false;
+      clearTimeout(timer.value);
+      return;
+    }
+
+    // startTime.value = performance.now();
+    timer.value = setTimeout(() => {
+      // const loadingTime = performance.now() - startTime.value;
+
+      showSpinner.value = true;
+      if (showSpinner.value) {
+        renderSpinner.value = true;
+      }
+    }, props.minLoadingTime);
+  },
+  {
+    immediate: true,
+  },
+);
+
+function onTransitionEnd() {
+  if (!showSpinner.value) {
+    renderSpinner.value = false;
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex-center absolute left-0 top-0 z-100 size-full bg-overlay-content backdrop-blur-sm transition-all duration-500',
+        {
+          'invisible opacity-0': !showSpinner,
+        },
+        props.class,
+      )
+    "
+    @transitionend="onTransitionEnd"
+  >
+    <div
+      :class="{ paused: !renderSpinner }"
+      v-if="renderSpinner"
+      class="loader relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:bg-primary/50 before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:bg-primary after:content-['']"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.paused {
+  &::before {
+    animation-play-state: paused !important;
+  }
+
+  &::after {
+    animation-play-state: paused !important;
+  }
+}
+
+.loader {
+  &::before {
+    animation: loader-shadow-ani 0.5s linear infinite;
+  }
+
+  &::after {
+    animation: loader-jump-ani 0.5s linear infinite;
+  }
+}
+
+@keyframes loader-jump-ani {
+  15% {
+    border-bottom-right-radius: 3px;
+  }
+
+  25% {
+    transform: translateY(9px) rotate(22.5deg);
+  }
+
+  50% {
+    border-bottom-right-radius: 40px;
+    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
+  }
+
+  75% {
+    transform: translateY(9px) rotate(67.5deg);
+  }
+
+  100% {
+    transform: translateY(0) rotate(90deg);
+  }
+}
+
+@keyframes loader-shadow-ani {
+  0%,
+  100% {
+    transform: scale(1, 1);
+  }
+
+  50% {
+    transform: scale(1.2, 1);
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
new file mode 100644
index 0000000..d410a6e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+import { CircleHelp } from 'lucide-vue-next';
+
+import Tooltip from './tooltip.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps<{ triggerClass?: string }>();
+</script>
+
+<template>
+  <Tooltip :delay-duration="300" side="right">
+    <template #trigger>
+      <slot name="trigger">
+        <CircleHelp
+          :class="
+            cn(
+              'inline-flex size-5 cursor-pointer text-foreground/80 hover:text-foreground',
+              triggerClass,
+            )
+          "
+        />
+      </slot>
+    </template>
+    <slot></slot>
+  </Tooltip>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/index.ts
new file mode 100644
index 0000000..65bf053
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/index.ts
@@ -0,0 +1,2 @@
+export { default as VbenHelpTooltip } from './help-tooltip.vue';
+export { default as VbenTooltip } from './tooltip.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
new file mode 100644
index 0000000..455af06
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { TooltipContentProps } from 'reka-ui';
+
+import type { StyleValue } from 'vue';
+
+import type { ClassType } from '@vben-core/typings';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../../ui';
+
+interface Props {
+  contentClass?: ClassType;
+  contentStyle?: StyleValue;
+  delayDuration?: number;
+  side?: TooltipContentProps['side'];
+}
+
+withDefaults(defineProps<Props>(), {
+  delayDuration: 0,
+  side: 'right',
+});
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="delayDuration">
+    <Tooltip>
+      <TooltipTrigger as-child tabindex="-1">
+        <slot name="trigger"></slot>
+      </TooltipTrigger>
+      <TooltipContent
+        :class="contentClass"
+        :side="side"
+        :style="contentStyle"
+        class="side-content rounded-md bg-accent text-popover-foreground"
+      >
+        <slot></slot>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/index.ts
new file mode 100644
index 0000000..a7c9ee4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/index.ts
@@ -0,0 +1,3 @@
+export * from './components';
+export * from './ui';
+export { createContext, Slot, VisuallyHidden } from 'reka-ui';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue
new file mode 100644
index 0000000..dc441ad
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui';
+
+import { AccordionRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<AccordionRootProps>();
+const emits = defineEmits<AccordionRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot></slot>
+  </AccordionRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
new file mode 100644
index 0000000..537b75f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { AccordionContent } from 'reka-ui';
+
+const props = defineProps<AccordionContentProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot></slot>
+    </div>
+  </AccordionContent>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue
new file mode 100644
index 0000000..fe2e466
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { AccordionItem, useForwardProps } from 'reka-ui';
+
+const props = defineProps<AccordionItemProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <AccordionItem v-bind="forwardedProps" :class="cn('border-b', props.class)">
+    <slot></slot>
+  </AccordionItem>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
new file mode 100644
index 0000000..4752bac
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronDown } from 'lucide-vue-next';
+import { AccordionHeader, AccordionTrigger } from 'reka-ui';
+
+const props = defineProps<AccordionTriggerProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+      <slot name="icon">
+        <ChevronDown
+          class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/index.ts
new file mode 100644
index 0000000..821d3a1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/index.ts
@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue';
+export { default as AccordionContent } from './AccordionContent.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { default as AccordionTrigger } from './AccordionTrigger.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 0000000..f8033f5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from 'reka-ui';
+
+import { AlertDialogRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<AlertDialogProps>();
+const emits = defineEmits<AlertDialogEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot></slot>
+  </AlertDialogRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000..d5da3f0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from 'reka-ui';
+
+import { AlertDialogAction } from 'reka-ui';
+
+const props = defineProps<AlertDialogActionProps>();
+</script>
+
+<template>
+  <AlertDialogAction v-bind="props">
+    <slot></slot>
+  </AlertDialogAction>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000..2b6f62a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from 'reka-ui';
+
+import { AlertDialogCancel } from 'reka-ui';
+
+const props = defineProps<AlertDialogCancelProps>();
+</script>
+
+<template>
+  <AlertDialogCancel v-bind="props">
+    <slot></slot>
+  </AlertDialogCancel>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000..42fb028
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
+
+import type { ClassType } from '@vben-core/typings';
+
+import { computed, ref } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import {
+  AlertDialogContent,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+import AlertDialogOverlay from './AlertDialogOverlay.vue';
+
+const props = withDefaults(
+  defineProps<
+    AlertDialogContentProps & {
+      centered?: boolean;
+      class?: ClassType;
+      modal?: boolean;
+      open?: boolean;
+      overlayBlur?: number;
+      zIndex?: number;
+    }
+  >(),
+  { modal: true },
+);
+const emits = defineEmits<
+  AlertDialogContentEmits & { close: []; closed: []; opened: [] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, modal: _modal, open: _open, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const contentRef = ref<InstanceType<typeof AlertDialogContent> | null>(null);
+function onAnimationEnd(event: AnimationEvent) {
+  // 只有在 contentRef 的动画结束时才触发 opened/closed 事件
+  if (event.target === contentRef.value?.$el) {
+    if (props.open) {
+      emits('opened');
+    } else {
+      emits('closed');
+    }
+  }
+}
+defineExpose({
+  getContentRef: () => contentRef.value,
+});
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <Transition name="fade" appear>
+      <AlertDialogOverlay
+        v-if="open && modal"
+        :style="{
+          ...(zIndex ? { zIndex } : {}),
+          position: 'fixed',
+          backdropFilter:
+            overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+        }"
+        @click="() => emits('close')"
+      />
+    </Transition>
+    <AlertDialogContent
+      ref="contentRef"
+      :style="{ ...(zIndex ? { zIndex } : {}), position: 'fixed' }"
+      @animationend="onAnimationEnd"
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-popup bg-background p-6 shadow-lg outline-none sm:rounded-xl',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          {
+            'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
+              !centered,
+            'data-[state=closed]:slide-out-to-top-[148%] data-[state=open]:slide-in-from-top-[98%]':
+              centered,
+            'top-[10vh]': !centered,
+            'top-1/2 -translate-y-1/2': centered,
+          },
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 0000000..1aed443
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { AlertDialogDescriptionProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { AlertDialogDescription, useForwardProps } from 'reka-ui';
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot></slot>
+  </AlertDialogDescription>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
new file mode 100644
index 0000000..6abf86c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { useScrollLock } from '@vben-core/composables';
+
+useScrollLock();
+</script>
+<template>
+  <div class="z-popup inset-0 bg-overlay"></div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 0000000..fff8a21
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { AlertDialogTitle, useForwardProps } from 'reka-ui';
+
+const props = defineProps<AlertDialogTitleProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn('text-lg font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot></slot>
+  </AlertDialogTitle>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/index.ts
new file mode 100644
index 0000000..ef14f2d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/index.ts
@@ -0,0 +1,6 @@
+export { default as AlertDialog } from './AlertDialog.vue';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
new file mode 100644
index 0000000..0ea0ac0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { AvatarVariants } from './avatar';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { AvatarRoot } from 'reka-ui';
+
+import { avatarVariant } from './avatar';
+
+const props = withDefaults(
+  defineProps<{
+    class?: any;
+    shape?: AvatarVariants['shape'];
+    size?: AvatarVariants['size'];
+  }>(),
+  {
+    shape: 'circle',
+    size: 'sm',
+  },
+);
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot></slot>
+  </AvatarRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
new file mode 100644
index 0000000..9aac931
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'reka-ui';
+
+import { AvatarFallback } from 'reka-ui';
+
+const props = defineProps<AvatarFallbackProps>();
+</script>
+
+<template>
+  <AvatarFallback v-bind="props">
+    <slot></slot>
+  </AvatarFallback>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
new file mode 100644
index 0000000..bdf2df5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'reka-ui';
+
+import { AvatarImage } from 'reka-ui';
+
+const props = defineProps<AvatarImageProps>();
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts
new file mode 100644
index 0000000..8aae81f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts
@@ -0,0 +1,22 @@
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
+
+export const avatarVariant = cva(
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+      size: {
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+        sm: 'h-10 w-10 text-xs',
+      },
+    },
+  },
+);
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>;
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/index.ts
new file mode 100644
index 0000000..fef6b01
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/index.ts
@@ -0,0 +1,4 @@
+export * from './avatar';
+export { default as Avatar } from './Avatar.vue';
+export { default as AvatarFallback } from './AvatarFallback.vue';
+export { default as AvatarImage } from './AvatarImage.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue
new file mode 100644
index 0000000..818d404
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { BadgeVariants } from './badge';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { badgeVariants } from './badge';
+
+const props = defineProps<{
+  class?: any;
+  variant?: BadgeVariants['variant'];
+}>();
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts
new file mode 100644
index 0000000..cf6bff8
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts
@@ -0,0 +1,25 @@
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-md border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    defaultVariants: {
+      variant: 'default',
+    },
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-accent hover:bg-accent text-primary-foreground shadow',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive-hover',
+        outline: 'text-foreground',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      },
+    },
+  },
+);
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/badge/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/badge/index.ts
new file mode 100644
index 0000000..b37175b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/badge/index.ts
@@ -0,0 +1,3 @@
+export * from './badge';
+
+export { default as Badge } from './Badge.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/Breadcrumb.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/Breadcrumb.vue
new file mode 100644
index 0000000..eb065de
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <nav :class="props.class" aria-label="breadcrumb" role="navigation">
+    <slot></slot>
+  </nav>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbEllipsis.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 0000000..b98f99e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { cn } from '@vben-core/shared/utils';
+
+import { MoreHorizontal } from 'lucide-vue-next';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <span
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+    aria-hidden="true"
+    role="presentation"
+  >
+    <slot>
+      <MoreHorizontal class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 0000000..dff3204
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <li
+    :class="
+      cn('inline-flex items-center gap-1.5 hover:text-foreground', props.class)
+    "
+  >
+    <slot></slot>
+  </li>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 0000000..30e68a8
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from 'reka-ui';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Primitive } from 'reka-ui';
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: any }>(), {
+  as: 'a',
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot></slot>
+  </Primitive>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 0000000..06a6edd
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <ol
+    :class="
+      cn(
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </ol>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbPage.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 0000000..0d76417
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <span
+    :class="cn('font-normal text-foreground', props.class)"
+    aria-current="page"
+    aria-disabled="true"
+    role="link"
+  >
+    <slot></slot>
+  </span>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbSeparator.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 0000000..bf05851
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronRight } from 'lucide-vue-next';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <li
+    :class="cn('[&>svg]:size-3.5', props.class)"
+    aria-hidden="true"
+    role="presentation"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/index.ts
new file mode 100644
index 0000000..d650f7e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
+export { default as BreadcrumbList } from './BreadcrumbList.vue';
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue
new file mode 100644
index 0000000..0af6272
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+
+import type { ButtonVariants, ButtonVariantSize } from './types';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Primitive } from 'reka-ui';
+
+import { buttonVariants } from './button';
+
+interface Props extends PrimitiveProps {
+  class?: any;
+  size?: ButtonVariantSize;
+  variant?: ButtonVariants;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+  class: '',
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot></slot>
+  </Primitive>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts
new file mode 100644
index 0000000..d028775
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts
@@ -0,0 +1,34 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed  disabled:opacity-50',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-9 px-4 py-2',
+        icon: 'h-8 w-8 rounded-sm px-1 text-lg',
+        lg: 'h-10 rounded-md px-4',
+        sm: 'h-8 rounded-md px-2 text-xs',
+        xs: 'h-8 w-8 rounded-sm px-1 text-xs',
+      },
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        heavy: 'hover:bg-heavy hover:text-heavy-foreground',
+        icon: 'hover:bg-accent hover:text-accent-foreground text-foreground/80',
+        link: 'text-primary underline-offset-4 hover:underline',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+      },
+    },
+  },
+);
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/index.ts
new file mode 100644
index 0000000..4a575f9
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/index.ts
@@ -0,0 +1,5 @@
+export * from './button';
+
+export { default as Button } from './Button.vue';
+
+export type * from './types';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/types.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/types.ts
new file mode 100644
index 0000000..cc5e174
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/button/types.ts
@@ -0,0 +1,20 @@
+export type ButtonVariantSize =
+  | 'default'
+  | 'icon'
+  | 'lg'
+  | 'sm'
+  | 'xs'
+  | null
+  | undefined;
+
+export type ButtonVariants =
+  | 'default'
+  | 'destructive'
+  | 'ghost'
+  | 'heavy'
+  | 'icon'
+  | 'link'
+  | 'outline'
+  | 'secondary'
+  | null
+  | undefined;
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue
new file mode 100644
index 0000000..a5b6c61
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-xl border border-border bg-card text-card-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardContent.vue
new file mode 100644
index 0000000..8e8fe50
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardContent.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardDescription.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardDescription.vue
new file mode 100644
index 0000000..4219356
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardDescription.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot></slot>
+  </p>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardFooter.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardFooter.vue
new file mode 100644
index 0000000..01af357
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardFooter.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardHeader.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardHeader.vue
new file mode 100644
index 0000000..ced1e8b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardHeader.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-5', props.class)">
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardTitle.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardTitle.vue
new file mode 100644
index 0000000..e357cdc
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/CardTitle.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <h3 :class="cn('font-semibold leading-none tracking-tight', props.class)">
+    <slot></slot>
+  </h3>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/index.ts
new file mode 100644
index 0000000..d652969
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue';
+export { default as CardContent } from './CardContent.vue';
+export { default as CardDescription } from './CardDescription.vue';
+export { default as CardFooter } from './CardFooter.vue';
+export { default as CardHeader } from './CardHeader.vue';
+export { default as CardTitle } from './CardTitle.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
new file mode 100644
index 0000000..212d3bd
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Check, Minus } from 'lucide-vue-next';
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  CheckboxRootProps & { class?: any; indeterminate?: boolean }
+>();
+const emits = defineEmits<CheckboxRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer h-4 w-4 shrink-0 rounded-sm border border-border transition hover:border-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        props.class,
+      )
+    "
+  >
+    <CheckboxIndicator
+      class="flex h-full w-full items-center justify-center text-current"
+    >
+      <slot>
+        <component :is="indeterminate ? Minus : Check" class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/index.ts
new file mode 100644
index 0000000..7f906aa
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenu.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenu.vue
new file mode 100644
index 0000000..1281954
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenu.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui';
+
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = withDefaults(defineProps<ContextMenuRootProps>(), {
+  modal: false,
+});
+const emits = defineEmits<ContextMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ContextMenuRoot v-bind="forwarded">
+    <slot></slot>
+  </ContextMenuRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
new file mode 100644
index 0000000..7a34143
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type {
+  ContextMenuCheckboxItemEmits,
+  ContextMenuCheckboxItemProps,
+} from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Check } from 'lucide-vue-next';
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: any }>();
+const emits = defineEmits<ContextMenuCheckboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Check class="h-4 w-4" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot></slot>
+  </ContextMenuCheckboxItem>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
new file mode 100644
index 0000000..890ed84
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import {
+  ContextMenuContent,
+  ContextMenuPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = defineProps<ContextMenuContentProps & { class?: any }>();
+const emits = defineEmits<ContextMenuContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-popup min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue
new file mode 100644
index 0000000..55accfe
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ContextMenuGroupProps } from 'reka-ui';
+
+import { ContextMenuGroup } from 'reka-ui';
+
+const props = defineProps<ContextMenuGroupProps>();
+</script>
+
+<template>
+  <ContextMenuGroup v-bind="props">
+    <slot></slot>
+  </ContextMenuGroup>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
new file mode 100644
index 0000000..051e5d7
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ContextMenuItem, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  ContextMenuItemProps & { class?: any; inset?: boolean }
+>();
+const emits = defineEmits<ContextMenuItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </ContextMenuItem>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
new file mode 100644
index 0000000..57100c7
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ContextMenuLabelProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ContextMenuLabel } from 'reka-ui';
+
+const props = defineProps<
+  ContextMenuLabelProps & { class?: any; inset?: boolean }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ContextMenuLabel
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'px-2 py-1.5 text-sm font-semibold text-foreground',
+        inset && 'pl-8',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </ContextMenuLabel>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue
new file mode 100644
index 0000000..5328f77
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { ContextMenuPortalProps } from 'reka-ui';
+
+import { ContextMenuPortal } from 'reka-ui';
+
+const props = defineProps<ContextMenuPortalProps>();
+</script>
+
+<template>
+  <ContextMenuPortal v-bind="props">
+    <slot></slot>
+  </ContextMenuPortal>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue
new file mode 100644
index 0000000..1d28157
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type {
+  ContextMenuRadioGroupEmits,
+  ContextMenuRadioGroupProps,
+} from 'reka-ui';
+
+import { ContextMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<ContextMenuRadioGroupProps>();
+const emits = defineEmits<ContextMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ContextMenuRadioGroup v-bind="forwarded">
+    <slot></slot>
+  </ContextMenuRadioGroup>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
new file mode 100644
index 0000000..d152638
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type {
+  ContextMenuRadioItemEmits,
+  ContextMenuRadioItemProps,
+} from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Circle } from 'lucide-vue-next';
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = defineProps<ContextMenuRadioItemProps & { class?: any }>();
+const emits = defineEmits<ContextMenuRadioItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot></slot>
+  </ContextMenuRadioItem>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
new file mode 100644
index 0000000..14a94c3
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ContextMenuSeparatorProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ContextMenuSeparator } from 'reka-ui';
+
+const props = defineProps<ContextMenuSeparatorProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ContextMenuSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 my-1 h-px bg-border', props.class)"
+  />
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuShortcut.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuShortcut.vue
new file mode 100644
index 0000000..2c37a82
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <span
+    :class="
+      cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)
+    "
+  >
+    <slot></slot>
+  </span>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue
new file mode 100644
index 0000000..c151972
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'reka-ui';
+
+import { ContextMenuSub, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<ContextMenuSubProps>();
+const emits = defineEmits<ContextMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ContextMenuSub v-bind="forwarded">
+    <slot></slot>
+  </ContextMenuSub>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
new file mode 100644
index 0000000..85e63c0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuSubContentEmits,
+  DropdownMenuSubContentProps,
+} from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ContextMenuSubContent, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: any }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ContextMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-32 overflow-hidden rounded-md',
+        'border border-border',
+        'bg-popover p-1 text-popover-foreground shadow-lg',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </ContextMenuSubContent>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
new file mode 100644
index 0000000..6a6cb4f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ContextMenuSubTriggerProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronRight } from 'lucide-vue-next';
+import { ContextMenuSubTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  ContextMenuSubTriggerProps & {
+    class?: any;
+    inset?: boolean;
+  }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        inset && 'pl-8',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </ContextMenuSubTrigger>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue
new file mode 100644
index 0000000..143206a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuTriggerProps } from 'reka-ui';
+
+import { ContextMenuTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<ContextMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <ContextMenuTrigger v-bind="forwardedProps">
+    <slot></slot>
+  </ContextMenuTrigger>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/index.ts
new file mode 100644
index 0000000..c9f7d0d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/index.ts
@@ -0,0 +1,14 @@
+export { default as ContextMenu } from './ContextMenu.vue';
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue';
+export { default as ContextMenuContent } from './ContextMenuContent.vue';
+export { default as ContextMenuGroup } from './ContextMenuGroup.vue';
+export { default as ContextMenuItem } from './ContextMenuItem.vue';
+export { default as ContextMenuLabel } from './ContextMenuLabel.vue';
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue';
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue';
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue';
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue';
+export { default as ContextMenuSub } from './ContextMenuSub.vue';
+export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue';
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue';
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue
new file mode 100644
index 0000000..55ae642
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot></slot>
+  </DialogRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue
new file mode 100644
index 0000000..6415a3e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui';
+
+import { DialogClose } from 'reka-ui';
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot></slot>
+  </DialogClose>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
new file mode 100644
index 0000000..69c8fa5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+
+import type { ClassType } from '@vben-core/typings';
+
+import { computed, ref } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { X } from 'lucide-vue-next';
+import { DialogClose, DialogContent, useForwardPropsEmits } from 'reka-ui';
+
+import DialogOverlay from './DialogOverlay.vue';
+
+const props = withDefaults(
+  defineProps<
+    DialogContentProps & {
+      animationType?: 'scale' | 'slide';
+      appendTo?: HTMLElement | string;
+      class?: ClassType;
+      closeClass?: ClassType;
+      closeDisabled?: boolean;
+      modal?: boolean;
+      open?: boolean;
+      overlayBlur?: number;
+      showClose?: boolean;
+      zIndex?: number;
+    }
+  >(),
+  {
+    appendTo: 'body',
+    animationType: 'slide',
+    closeDisabled: false,
+    showClose: true,
+  },
+);
+const emits = defineEmits<
+  DialogContentEmits & { close: []; closed: []; opened: [] }
+>();
+
+const delegatedProps = computed(() => {
+  const {
+    class: _,
+    modal: _modal,
+    open: _open,
+    showClose: __,
+    animationType: ___,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+function isAppendToBody() {
+  return (
+    props.appendTo === 'body' ||
+    props.appendTo === document.body ||
+    !props.appendTo
+  );
+}
+
+const position = computed(() => {
+  return isAppendToBody() ? 'fixed' : 'absolute';
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const contentRef = ref<InstanceType<typeof DialogContent> | null>(null);
+function onAnimationEnd(event: AnimationEvent) {
+  // 只有在 contentRef 的动画结束时才触发 opened/closed 事件
+  if (event.target === contentRef.value?.$el) {
+    if (props.open) {
+      emits('opened');
+    } else {
+      emits('closed');
+    }
+  }
+}
+defineExpose({
+  getContentRef: () => contentRef.value,
+});
+</script>
+
+<template>
+  <Teleport defer :to="appendTo">
+    <Transition name="fade">
+      <DialogOverlay
+        v-if="open && modal"
+        :style="{
+          ...(zIndex ? { zIndex } : {}),
+          position,
+          backdropFilter:
+            overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+        }"
+        @click="() => emits('close')"
+      />
+    </Transition>
+    <DialogContent
+      ref="contentRef"
+      :style="{ ...(zIndex ? { zIndex } : {}), position }"
+      @animationend="onAnimationEnd"
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-popup w-full bg-background p-6 shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-xl',
+          {
+            'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
+              animationType === 'slide',
+          },
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+
+      <DialogClose
+        v-if="showClose"
+        :disabled="closeDisabled"
+        :class="
+          cn(
+            'flex-center absolute right-3 top-3 h-6 w-6 rounded-full px-1 text-lg text-foreground/80 opacity-70 transition-opacity hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+            props.closeClass,
+          )
+        "
+        @click="() => emits('close')"
+      >
+        <X class="h-4 w-4" />
+      </DialogClose>
+    </DialogContent>
+  </Teleport>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
new file mode 100644
index 0000000..b7f3819
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { DialogDescription, useForwardProps } from 'reka-ui';
+
+const props = defineProps<DialogDescriptionProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot></slot>
+  </DialogDescription>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogFooter.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogFooter.vue
new file mode 100644
index 0000000..09460b9
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogFooter.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{ class?: any }>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-row flex-col-reverse justify-end gap-x-2', props.class)
+    "
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogHeader.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogHeader.vue
new file mode 100644
index 0000000..3632b2a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogHeader.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
new file mode 100644
index 0000000..6d6e804
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+
+import { useScrollLock } from '@vben-core/composables';
+
+useScrollLock();
+const id = inject('DISMISSABLE_MODAL_ID');
+</script>
+<template>
+  <div :data-dismissable-modal="id" class="z-popup inset-0 bg-overlay"></div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 0000000..4c59fcb
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { X } from 'lucide-vue-next';
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = withDefaults(
+  defineProps<DialogContentProps & { class?: any; zIndex?: number }>(),
+  { zIndex: 1000 },
+);
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      :style="{ zIndex }"
+      class="absolute inset-0 grid place-items-center overflow-y-auto border border-border bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 my-8 grid w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        :style="{ zIndex }"
+        v-bind="forwarded"
+        @pointer-down-outside="
+          (event) => {
+            const originalEvent = event.detail.originalEvent;
+            const target = originalEvent.target as HTMLElement;
+            if (
+              originalEvent.offsetX > target.clientWidth ||
+              originalEvent.offsetY > target.clientHeight
+            ) {
+              event.preventDefault();
+            }
+          }
+        "
+      >
+        <slot></slot>
+
+        <DialogClose
+          class="absolute right-4 top-4 rounded-md p-0.5 transition-colors hover:bg-secondary"
+        >
+          <X class="h-4 w-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue
new file mode 100644
index 0000000..396e4b7
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { DialogTitle, useForwardProps } from 'reka-ui';
+
+const props = defineProps<DialogTitleProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn('text-lg font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot></slot>
+  </DialogTitle>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue
new file mode 100644
index 0000000..121f387
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui';
+
+import { DialogTrigger } from 'reka-ui';
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot></slot>
+  </DialogTrigger>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/index.ts
new file mode 100644
index 0000000..e924dd4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogScrollContent } from './DialogScrollContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 0000000..d9408a0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui';
+
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
+  modal: false,
+});
+const emits = defineEmits<DropdownMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot></slot>
+  </DropdownMenuRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 0000000..5ee661c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuCheckboxItemEmits,
+  DropdownMenuCheckboxItemProps,
+} from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Check } from 'lucide-vue-next';
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: any }>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="h-4 w-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot></slot>
+  </DropdownMenuCheckboxItem>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 0000000..625a8cd
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuContentEmits,
+  DropdownMenuContentProps,
+} from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: any }>(),
+  {
+    sideOffset: 4,
+  },
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-popup min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 0000000..c0e4263
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from 'reka-ui';
+
+import { DropdownMenuGroup } from 'reka-ui';
+
+const props = defineProps<DropdownMenuGroupProps>();
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot></slot>
+  </DropdownMenuGroup>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 0000000..1017467
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { DropdownMenuItem, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  DropdownMenuItemProps & { class?: any; inset?: boolean }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </DropdownMenuItem>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 0000000..80c219f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  DropdownMenuLabelProps & { class?: any; inset?: boolean }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="
+      cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)
+    "
+  >
+    <slot></slot>
+  </DropdownMenuLabel>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 0000000..6ec3851
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuRadioGroupEmits,
+  DropdownMenuRadioGroupProps,
+} from 'reka-ui';
+
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot></slot>
+  </DropdownMenuRadioGroup>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 0000000..938d43b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuRadioItemEmits,
+  DropdownMenuRadioItemProps,
+} from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Circle } from 'lucide-vue-next';
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: any }>();
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot></slot>
+  </DropdownMenuRadioItem>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 0000000..745e5c3
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { DropdownMenuSeparator } from 'reka-ui';
+
+const props = defineProps<
+  DropdownMenuSeparatorProps & {
+    class?: any;
+  }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 my-1 h-px bg-border', props.class)"
+  />
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuShortcut.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 0000000..39f5963
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot></slot>
+  </span>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 0000000..1bb9edc
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui';
+
+import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot></slot>
+  </DropdownMenuSub>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 0000000..38756ca
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuSubContentEmits,
+  DropdownMenuSubContentProps,
+} from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: any }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-32 overflow-hidden rounded-md',
+        'border border-border',
+        'bg-popover p-1 text-popover-foreground shadow-lg',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </DropdownMenuSubContent>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 0000000..86e3acb
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronRight } from 'lucide-vue-next';
+import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue
new file mode 100644
index 0000000..028d74a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from 'reka-ui';
+
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<DropdownMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+    <slot></slot>
+  </DropdownMenuTrigger>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..bde907b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/index.ts
@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from './DropdownMenu.vue';
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
+export { DropdownMenuPortal } from 'reka-ui';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormControl.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormControl.vue
new file mode 100644
index 0000000..9fb69e2
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormControl.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { Slot } from 'reka-ui';
+
+import { useFormField } from './useFormField';
+
+const { error, formDescriptionId, formItemId, formMessageId } = useFormField();
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :aria-describedby="
+      !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
+    "
+    :aria-invalid="!!error"
+  >
+    <slot></slot>
+  </Slot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormDescription.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormDescription.vue
new file mode 100644
index 0000000..0f8a576
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormDescription.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { cn } from '@vben-core/shared/utils';
+
+import { useFormField } from './useFormField';
+
+const props = defineProps<{
+  class?: any;
+}>();
+
+const { formDescriptionId } = useFormField();
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot></slot>
+  </p>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormItem.vue
new file mode 100644
index 0000000..165c992
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormItem.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { provide, useId } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+
+const props = defineProps<{
+  class?: any;
+}>();
+
+const id = useId() as string;
+provide(FORM_ITEM_INJECTION_KEY, id);
+</script>
+
+<template>
+  <div :class="cn(props.class)">
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue
new file mode 100644
index 0000000..b387c1f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { LabelProps } from 'reka-ui';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Label } from '../label';
+import { useFormField } from './useFormField';
+
+const props = defineProps<LabelProps & { class?: any }>();
+
+const { formItemId } = useFormField();
+</script>
+
+<template>
+  <Label :class="cn(props.class)" :for="formItemId">
+    <slot></slot>
+  </Label>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
new file mode 100644
index 0000000..e2ccb1e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { toValue } from 'vue';
+
+import { ErrorMessage } from 'vee-validate';
+
+import { useFormField } from './useFormField';
+
+const { formMessageId, name } = useFormField();
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    :name="toValue(name)"
+    as="p"
+    class="text-[0.8rem] text-destructive"
+  />
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts
new file mode 100644
index 0000000..1d45b2b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts
@@ -0,0 +1,11 @@
+export { default as FormControl } from './FormControl.vue';
+export { default as FormDescription } from './FormDescription.vue';
+export { default as FormItem } from './FormItem.vue';
+export { default as FormLabel } from './FormLabel.vue';
+export { default as FormMessage } from './FormMessage.vue';
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+export {
+  Form,
+  Field as FormField,
+  FieldArray as FormFieldArray,
+} from 'vee-validate';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/injectionKeys.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/injectionKeys.ts
new file mode 100644
index 0000000..3c86caa
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/injectionKeys.ts
@@ -0,0 +1,4 @@
+import type { InjectionKey } from 'vue';
+
+// eslint-disable-next-line symbol-description
+export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/useFormField.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/useFormField.ts
new file mode 100644
index 0000000..dfb8d4c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/form/useFormField.ts
@@ -0,0 +1,38 @@
+import { inject } from 'vue';
+
+import {
+  FieldContextKey,
+  useFieldError,
+  useIsFieldDirty,
+  useIsFieldTouched,
+  useIsFieldValid,
+} from 'vee-validate';
+
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey);
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
+
+  if (!fieldContext)
+    throw new Error('useFormField should be used within <FormField>');
+
+  const { name } = fieldContext;
+  const id = fieldItemContext;
+
+  const fieldState = {
+    error: useFieldError(name),
+    isDirty: useIsFieldDirty(name),
+    isTouched: useIsFieldTouched(name),
+    valid: useIsFieldValid(name),
+  };
+
+  return {
+    formDescriptionId: `${id}-form-item-description`,
+    formItemId: `${id}-form-item`,
+    formMessageId: `${id}-form-item-message`,
+    id,
+    name,
+    ...fieldState,
+  };
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
new file mode 100644
index 0000000..ac2cc73
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from 'reka-ui';
+
+import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<HoverCardRootProps>();
+const emits = defineEmits<HoverCardRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot></slot>
+  </HoverCardRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
new file mode 100644
index 0000000..1b827bb
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { HoverCardContent, HoverCardPortal, useForwardProps } from 'reka-ui';
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: any }>(),
+  {
+    sideOffset: 4,
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-popup w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue
new file mode 100644
index 0000000..481d87c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HoverCardTriggerProps } from 'reka-ui';
+
+import { HoverCardTrigger } from 'reka-ui';
+
+const props = defineProps<HoverCardTriggerProps>();
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot></slot>
+  </HoverCardTrigger>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/index.ts
new file mode 100644
index 0000000..dd4a1ef
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/index.ts
@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue';
+export { default as HoverCardContent } from './HoverCardContent.vue';
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts
new file mode 100644
index 0000000..1be71f8
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts
@@ -0,0 +1,31 @@
+export * from './accordion';
+export * from './alert-dialog';
+export * from './avatar';
+export * from './badge';
+export * from './breadcrumb';
+export * from './button';
+export * from './card';
+export * from './checkbox';
+export * from './dialog';
+export * from './dropdown-menu';
+export * from './form';
+export * from './hover-card';
+export * from './input';
+export * from './label';
+export * from './number-field';
+export * from './pagination';
+export * from './pin-input';
+export * from './popover';
+export * from './radio-group';
+export * from './resizable';
+export * from './scroll-area';
+export * from './select';
+export * from './separator';
+export * from './sheet';
+export * from './switch';
+export * from './tabs';
+export * from './textarea';
+export * from './toggle';
+export * from './toggle-group';
+export * from './tooltip';
+export * from './tree';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
new file mode 100644
index 0000000..c968a61
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+import { useVModel } from '@vueuse/core';
+
+const props = defineProps<{
+  class?: any;
+  defaultValue?: number | string;
+  modelValue?: number | string;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: number | string): void;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: true,
+});
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    :class="
+      cn(
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  />
+</template>
+<style lang="scss" scoped>
+input {
+  --ring: var(--primary);
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/input/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/input/index.ts
new file mode 100644
index 0000000..c5248c5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './Input.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue
new file mode 100644
index 0000000..5c29e2e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { LabelProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Label } from 'reka-ui';
+
+const props = defineProps<LabelProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </Label>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/label/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/label/index.ts
new file mode 100644
index 0000000..c98e59f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue
new file mode 100644
index 0000000..c7c87af
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<NumberFieldRootProps & { class?: any }>();
+const emits = defineEmits<NumberFieldRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
+    <slot></slot>
+  </NumberFieldRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldContent.vue
new file mode 100644
index 0000000..f6d1b92
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldContent.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{
+  class?: any;
+}>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'relative [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5 [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue
new file mode 100644
index 0000000..aaf08b2
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { NumberFieldDecrementProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Minus } from 'lucide-vue-next';
+import { NumberFieldDecrement, useForwardProps } from 'reka-ui';
+
+const props = defineProps<NumberFieldDecrementProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <NumberFieldDecrement
+    data-slot="decrement"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'absolute left-0 top-1/2 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20',
+        props.class,
+      )
+    "
+  >
+    <slot>
+      <Minus class="h-4 w-4" />
+    </slot>
+  </NumberFieldDecrement>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
new file mode 100644
index 0000000..6a2b8ba
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { NumberFieldIncrementProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Plus } from 'lucide-vue-next';
+import { NumberFieldIncrement, useForwardProps } from 'reka-ui';
+
+const props = defineProps<NumberFieldIncrementProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <NumberFieldIncrement
+    data-slot="increment"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'absolute right-0 top-1/2 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20',
+        props.class,
+      )
+    "
+  >
+    <slot>
+      <Plus class="h-4 w-4" />
+    </slot>
+  </NumberFieldIncrement>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
new file mode 100644
index 0000000..803b097
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+import { NumberFieldInput } from 'reka-ui';
+</script>
+
+<template>
+  <NumberFieldInput
+    :class="
+      cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-center text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+      )
+    "
+    data-slot="input"
+  />
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/index.ts
new file mode 100644
index 0000000..bcdde78
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/index.ts
@@ -0,0 +1,5 @@
+export { default as NumberField } from './NumberField.vue';
+export { default as NumberFieldContent } from './NumberFieldContent.vue';
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue';
+export { default as NumberFieldInput } from './NumberFieldInput.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
new file mode 100644
index 0000000..0090b1a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PaginationEllipsisProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { MoreHorizontal } from 'lucide-vue-next';
+import { PaginationEllipsis } from 'reka-ui';
+
+const props = defineProps<PaginationEllipsisProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationEllipsis
+    v-bind="delegatedProps"
+    :class="cn('flex size-8 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+  </PaginationEllipsis>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
new file mode 100644
index 0000000..27284d3
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PaginationFirstProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronsLeft } from 'lucide-vue-next';
+import { PaginationFirst } from 'reka-ui';
+
+import { Button } from '../button';
+
+const props = withDefaults(
+  defineProps<PaginationFirstProps & { class?: any }>(),
+  {
+    asChild: true,
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationFirst v-bind="delegatedProps">
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronsLeft class="size-4" />
+      </slot>
+    </Button>
+  </PaginationFirst>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue
new file mode 100644
index 0000000..29c00c1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PaginationLastProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronsRight } from 'lucide-vue-next';
+import { PaginationLast } from 'reka-ui';
+
+import { Button } from '../button';
+
+const props = withDefaults(
+  defineProps<PaginationLastProps & { class?: any }>(),
+  {
+    asChild: true,
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationLast v-bind="delegatedProps">
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronsRight class="size-4" />
+      </slot>
+    </Button>
+  </PaginationLast>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue
new file mode 100644
index 0000000..57ef411
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PaginationNextProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronRight } from 'lucide-vue-next';
+import { PaginationNext } from 'reka-ui';
+
+import { Button } from '../button';
+
+const props = withDefaults(
+  defineProps<PaginationNextProps & { class?: any }>(),
+  {
+    asChild: true,
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationNext v-bind="delegatedProps">
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronRight class="size-4" />
+      </slot>
+    </Button>
+  </PaginationNext>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue
new file mode 100644
index 0000000..e95317d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PaginationPrevProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronLeft } from 'lucide-vue-next';
+import { PaginationPrev } from 'reka-ui';
+
+import { Button } from '../button';
+
+const props = withDefaults(
+  defineProps<PaginationPrevProps & { class?: any }>(),
+  {
+    asChild: true,
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationPrev v-bind="delegatedProps">
+    <Button :class="cn('size-8 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronLeft class="size-4" />
+      </slot>
+    </Button>
+  </PaginationPrev>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts
new file mode 100644
index 0000000..f060fd0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts
@@ -0,0 +1,10 @@
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue';
+export { default as PaginationFirst } from './PaginationFirst.vue';
+export { default as PaginationLast } from './PaginationLast.vue';
+export { default as PaginationNext } from './PaginationNext.vue';
+export { default as PaginationPrev } from './PaginationPrev.vue';
+export {
+  PaginationRoot as Pagination,
+  PaginationList,
+  PaginationListItem,
+} from 'reka-ui';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue
new file mode 100644
index 0000000..95d59ae
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { PinInputRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<PinInputRootProps & { class?: any }>();
+const emits = defineEmits<PinInputRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="forwarded"
+    :class="cn('flex items-center gap-2', props.class)"
+  >
+    <slot></slot>
+  </PinInputRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue
new file mode 100644
index 0000000..02cf9aa
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Primitive, useForwardProps } from 'reka-ui';
+
+const props = defineProps<PrimitiveProps & { class?: any }>();
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <Primitive
+    v-bind="forwardedProps"
+    :class="cn('flex items-center', props.class)"
+  >
+    <slot></slot>
+  </Primitive>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
new file mode 100644
index 0000000..ddeee12
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { PinInputInputProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { PinInputInput, useForwardProps } from 'reka-ui';
+
+const props = defineProps<PinInputInputProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <PinInputInput
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex h-10 w-8 items-center justify-center border-y border-r border-input bg-background text-center text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md focus:relative focus:z-10 focus:outline-none focus:ring-2 md:w-10',
+        props.class,
+      )
+    "
+  />
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue
new file mode 100644
index 0000000..d8a346a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+
+import { Dot } from 'lucide-vue-next';
+import { Primitive, useForwardProps } from 'reka-ui';
+
+const props = defineProps<PrimitiveProps>();
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps">
+    <slot>
+      <Dot />
+    </slot>
+  </Primitive>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/index.ts
new file mode 100644
index 0000000..585c0d6
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/index.ts
@@ -0,0 +1,4 @@
+export { default as PinInput } from './PinInput.vue';
+export { default as PinInputGroup } from './PinInputGroup.vue';
+export { default as PinInputInput } from './PinInputInput.vue';
+export { default as PinInputSeparator } from './PinInputSeparator.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/Popover.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/Popover.vue
new file mode 100644
index 0000000..aec63fb
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/Popover.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot></slot>
+  </PopoverRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000..98211a3
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: any }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+);
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..44dbfb0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui';
+
+import { PopoverTrigger } from 'reka-ui';
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot></slot>
+  </PopoverTrigger>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/index.ts
new file mode 100644
index 0000000..7589c68
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/popover/index.ts
@@ -0,0 +1,4 @@
+export { default as Popover } from './Popover.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';
+export { PopoverAnchor } from 'reka-ui';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue
new file mode 100644
index 0000000..77f323a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<RadioGroupRootProps & { class?: any }>();
+const emits = defineEmits<RadioGroupRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="forwarded">
+    <slot></slot>
+  </RadioGroupRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 0000000..86256cc
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Circle } from 'lucide-vue-next';
+import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from 'reka-ui';
+
+const props = defineProps<RadioGroupItemProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator class="flex items-center justify-center">
+      <Circle class="h-2.5 w-2.5 fill-current text-current" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/index.ts
new file mode 100644
index 0000000..7e2c65f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue';
+export { default as RadioGroupItem } from './RadioGroupItem.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
new file mode 100644
index 0000000..4b467f8
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type {
+  SplitterResizeHandleEmits,
+  SplitterResizeHandleProps,
+} from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { computed } from 'vue';
+
+import { GripVertical } from '@vben-core/icons';
+import { cn } from '@vben-core/shared/utils';
+
+import { SplitterResizeHandle, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  SplitterResizeHandleProps & {
+    class?: HTMLAttributes['class'];
+    withHandle?: boolean;
+  }
+>();
+const emits = defineEmits<SplitterResizeHandleEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SplitterResizeHandle
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]>div]:rotate-90 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0',
+        props.class,
+      )
+    "
+  >
+    <template v-if="props.withHandle">
+      <div
+        class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"
+      >
+        <GripVertical class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue
new file mode 100644
index 0000000..2e353e2
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { SplitterGroup, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  SplitterGroupProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<SplitterGroupEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SplitterGroup
+    v-bind="forwarded"
+    :class="
+      cn(
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </SplitterGroup>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts
new file mode 100644
index 0000000..c8ba3d4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts
@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from './ResizableHandle.vue';
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue';
+export { SplitterPanel as ResizablePanel } from 'reka-ui';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 0000000..cdb9532
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui';
+
+import ScrollBar from './ScrollBar.vue';
+
+const props = withDefaults(
+  defineProps<
+    ScrollAreaRootProps & {
+      class?: any;
+      onScroll?: (event: Event) => void;
+      viewportProps?: { onScroll: (event: Event) => void };
+    }
+  >(),
+  {
+    onScroll: () => {},
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+</script>
+
+<template>
+  <ScrollAreaRoot
+    v-bind="delegatedProps"
+    :class="cn('relative overflow-hidden', props.class)"
+  >
+    <ScrollAreaViewport
+      as-child
+      class="h-full w-full rounded-[inherit] focus:outline-none"
+      @scroll="onScroll"
+    >
+      <slot></slot>
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
new file mode 100644
index 0000000..a93dce1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui';
+
+const props = withDefaults(
+  defineProps<ScrollAreaScrollbarProps & { class?: any }>(),
+  {
+    orientation: 'vertical',
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex touch-none select-none transition-colors',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent p-px',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent p-px',
+        props.class,
+      )
+    "
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/index.ts
new file mode 100644
index 0000000..d6541f3
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue';
+export { default as ScrollBar } from './ScrollBar.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/Select.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/Select.vue
new file mode 100644
index 0000000..553fd2a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/Select.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui';
+
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<SelectRootProps>();
+const emits = defineEmits<SelectRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot></slot>
+  </SelectRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
new file mode 100644
index 0000000..4655e91
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import {
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+import SelectScrollDownButton from './SelectScrollDownButton.vue';
+import SelectScrollUpButton from './SelectScrollUpButton.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: any }>(),
+  {
+    position: 'popper',
+  },
+);
+const emits = defineEmits<SelectContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-popup relative max-h-96 min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          props.class,
+        )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport
+        :class="
+          cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]',
+          )
+        "
+      >
+        <slot></slot>
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue
new file mode 100644
index 0000000..5b84b0d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { SelectGroup } from 'reka-ui';
+
+const props = defineProps<SelectGroupProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <SelectGroup :class="cn('w-full p-1', props.class)" v-bind="delegatedProps">
+    <slot></slot>
+  </SelectGroup>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
new file mode 100644
index 0000000..a8f66a1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { SelectItemProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Check } from 'lucide-vue-next';
+import {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  useForwardProps,
+} from 'reka-ui';
+
+const props = defineProps<SelectItemProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot></slot>
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue
new file mode 100644
index 0000000..ee80d9c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { SelectItemTextProps } from 'reka-ui';
+
+import { SelectItemText } from 'reka-ui';
+
+const props = defineProps<SelectItemTextProps>();
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot></slot>
+  </SelectItemText>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue
new file mode 100644
index 0000000..031ef7c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'reka-ui';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { SelectLabel } from 'reka-ui';
+
+const props = defineProps<SelectLabelProps & { class?: any }>();
+</script>
+
+<template>
+  <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+    <slot></slot>
+  </SelectLabel>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..8fa7a84
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronDown } from 'lucide-vue-next';
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui';
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectScrollDownButton
+    v-bind="forwardedProps"
+    :class="
+      cn('flex cursor-default items-center justify-center py-1', props.class)
+    "
+  >
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..88346df
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronUp } from 'lucide-vue-next';
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui';
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectScrollUpButton
+    v-bind="forwardedProps"
+    :class="
+      cn('flex cursor-default items-center justify-center py-1', props.class)
+    "
+  >
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
new file mode 100644
index 0000000..e6154ce
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { SelectSeparator } from 'reka-ui';
+
+const props = defineProps<SelectSeparatorProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <SelectSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
+  />
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
new file mode 100644
index 0000000..b74b2d6
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ChevronDown } from 'lucide-vue-next';
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<SelectTriggerProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+    <SelectIcon as-child>
+      <ChevronDown class="h-4 w-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue
new file mode 100644
index 0000000..2fdf41e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'reka-ui';
+
+import { SelectValue } from 'reka-ui';
+
+const props = defineProps<SelectValueProps>();
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot></slot>
+  </SelectValue>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/index.ts
new file mode 100644
index 0000000..d7fdf0d
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue';
+export { default as SelectContent } from './SelectContent.vue';
+export { default as SelectGroup } from './SelectGroup.vue';
+export { default as SelectItem } from './SelectItem.vue';
+export { default as SelectItemText } from './SelectItemText.vue';
+export { default as SelectLabel } from './SelectLabel.vue';
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';
+export { default as SelectSeparator } from './SelectSeparator.vue';
+export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as SelectValue } from './SelectValue.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
new file mode 100644
index 0000000..782caa5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Separator } from 'reka-ui';
+
+const props = defineProps<SeparatorProps & { class?: any; label?: string }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative shrink-0 bg-border',
+        props.orientation === 'vertical' ? 'h-full w-px' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="
+        cn(
+          'absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center bg-background text-xs text-muted-foreground',
+          props.orientation === 'vertical'
+            ? 'w-[1px] px-1 py-2'
+            : 'h-[1px] px-2 py-1',
+        )
+      "
+    >
+      {{ props.label }}
+    </span>
+  </Separator>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/separator/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/separator/index.ts
new file mode 100644
index 0000000..3cb07b0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue
new file mode 100644
index 0000000..55ae642
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot></slot>
+  </DialogRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetClose.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetClose.vue
new file mode 100644
index 0000000..6415a3e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetClose.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui';
+
+import { DialogClose } from 'reka-ui';
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot></slot>
+  </DialogClose>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue
new file mode 100644
index 0000000..d09cde8
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+
+import type { SheetVariants } from './sheet';
+
+import { computed, ref } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { DialogContent, useForwardPropsEmits } from 'reka-ui';
+
+import { sheetVariants } from './sheet';
+import SheetOverlay from './SheetOverlay.vue';
+
+interface SheetContentProps extends DialogContentProps {
+  appendTo?: HTMLElement | string;
+  class?: any;
+  modal?: boolean;
+  open?: boolean;
+  overlayBlur?: number;
+  side?: SheetVariants['side'];
+  zIndex?: number;
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  appendTo: 'body',
+});
+
+const emits = defineEmits<
+  DialogContentEmits & { close: []; closed: []; opened: [] }
+>();
+
+const delegatedProps = computed(() => {
+  const {
+    class: _,
+    modal: _modal,
+    open: _open,
+    side: _side,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+function isAppendToBody() {
+  return (
+    props.appendTo === 'body' ||
+    props.appendTo === document.body ||
+    !props.appendTo
+  );
+}
+
+const position = computed(() => {
+  return isAppendToBody() ? 'fixed' : 'absolute';
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const contentRef = ref<InstanceType<typeof DialogContent> | null>(null);
+function onAnimationEnd(event: AnimationEvent) {
+  // 只有在 contentRef 的动画结束时才触发 opened/closed 事件
+  if (event.target === contentRef.value?.$el) {
+    if (props.open) {
+      emits('opened');
+    } else {
+      emits('closed');
+    }
+  }
+}
+</script>
+
+<template>
+  <Teleport defer :to="appendTo">
+    <Transition name="fade">
+      <SheetOverlay
+        v-if="open && modal"
+        :style="{
+          ...(zIndex ? { zIndex } : {}),
+          position,
+          backdropFilter:
+            overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+        }"
+      />
+    </Transition>
+    <DialogContent
+      ref="contentRef"
+      :class="cn('z-popup', sheetVariants({ side }), props.class)"
+      :style="{
+        ...(zIndex ? { zIndex } : {}),
+        position,
+      }"
+      @animationend="onAnimationEnd"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot></slot>
+
+      <!-- <DialogClose
+        class="data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+      >
+        <Cross2Icon class="h-5 w-" />
+      </DialogClose> -->
+    </DialogContent>
+  </Teleport>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
new file mode 100644
index 0000000..9472aec
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { DialogDescription } from 'reka-ui';
+
+const props = defineProps<DialogDescriptionProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot></slot>
+  </DialogDescription>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue
new file mode 100644
index 0000000..09460b9
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetFooter.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{ class?: any }>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-row flex-col-reverse justify-end gap-x-2', props.class)
+    "
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetHeader.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetHeader.vue
new file mode 100644
index 0000000..c6cc25c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetHeader.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+const props = defineProps<{ class?: any }>();
+</script>
+
+<template>
+  <div :class="cn('flex flex-col text-center sm:text-left', props.class)">
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
new file mode 100644
index 0000000..bffa2ac
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetOverlay.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+
+import { useScrollLock } from '@vben-core/composables';
+
+useScrollLock();
+const id = inject('DISMISSABLE_DRAWER_ID');
+</script>
+<template>
+  <div :data-dismissable-drawer="id" class="z-popup inset-0 bg-overlay"></div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
new file mode 100644
index 0000000..2f629c6
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { DialogTitle } from 'reka-ui';
+
+const props = defineProps<DialogTitleProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('font-medium text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot></slot>
+  </DialogTitle>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTrigger.vue
new file mode 100644
index 0000000..121f387
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui';
+
+import { DialogTrigger } from 'reka-ui';
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot></slot>
+  </DialogTrigger>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/index.ts
new file mode 100644
index 0000000..fd3095a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/index.ts
@@ -0,0 +1,10 @@
+export * from './sheet';
+export { default as Sheet } from './Sheet.vue';
+export { default as SheetClose } from './SheetClose.vue';
+export { default as SheetContent } from './SheetContent.vue';
+export { default as SheetDescription } from './SheetDescription.vue';
+export { default as SheetFooter } from './SheetFooter.vue';
+export { default as SheetHeader } from './SheetHeader.vue';
+export { default as SheetTitle } from './SheetTitle.vue';
+
+export { default as SheetTrigger } from './SheetTrigger.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/sheet.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/sheet.ts
new file mode 100644
index 0000000..badf311
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/sheet.ts
@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
+
+export const sheetVariants = cva(
+  'bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border',
+  {
+    defaultVariants: {
+      side: 'right',
+    },
+    variants: {
+      side: {
+        bottom:
+          'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left ',
+        right:
+          'inset-y-0 right-0 w-3/4 border-l  data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+      },
+    },
+  },
+);
+
+export type SheetVariants = VariantProps<typeof sheetVariants>;
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
new file mode 100644
index 0000000..6de86c4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<SwitchRootProps & { class?: any }>();
+
+const emits = defineEmits<SwitchRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        props.class,
+      )
+    "
+  >
+    <SwitchThumb
+      :class="
+        cn(
+          'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+        )
+      "
+    />
+  </SwitchRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/switch/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/switch/index.ts
new file mode 100644
index 0000000..924a2d1
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/Tabs.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/Tabs.vue
new file mode 100644
index 0000000..f9e68ac
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/Tabs.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<TabsRootProps>();
+const emits = defineEmits<TabsRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot></slot>
+  </TabsRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
new file mode 100644
index 0000000..470fb5c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { TabsContent } from 'reka-ui';
+
+const props = defineProps<TabsContentProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <TabsContent
+    :class="
+      cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        props.class,
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot></slot>
+  </TabsContent>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
new file mode 100644
index 0000000..cdabc2c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { TabsList } from 'reka-ui';
+
+const props = defineProps<TabsListProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'inline-flex h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </TabsList>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
new file mode 100644
index 0000000..4f17672
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { TabsTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<TabsTriggerProps & { class?: any }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </TabsTrigger>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/index.ts
new file mode 100644
index 0000000..7e98cfb
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/index.ts
@@ -0,0 +1,5 @@
+export { default as Tabs } from './Tabs.vue';
+export { default as TabsContent } from './TabsContent.vue';
+export { default as TabsList } from './TabsList.vue';
+export { default as TabsTrigger } from './TabsTrigger.vue';
+export { TabsIndicator } from 'reka-ui';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/Textarea.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/Textarea.vue
new file mode 100644
index 0000000..410dd4e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/Textarea.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { cn } from '@vben-core/shared/utils';
+
+import { useVModel } from '@vueuse/core';
+
+const props = defineProps<{
+  class?: any;
+  defaultValue?: number | string;
+  modelValue?: number | string;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: number | string): void;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: true,
+});
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    :class="
+      cn(
+        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  ></textarea>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/index.ts
new file mode 100644
index 0000000..e2d4773
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroup.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroup.vue
new file mode 100644
index 0000000..299b669
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroup.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority';
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'reka-ui';
+
+import type { toggleVariants } from '../toggle';
+
+import { computed, provide } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui';
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
+
+const props = defineProps<
+  ToggleGroupRootProps & {
+    class?: any;
+    size?: ToggleGroupVariants['size'];
+    variant?: ToggleGroupVariants['variant'];
+  }
+>();
+const emits = defineEmits<ToggleGroupRootEmits>();
+
+provide('toggleGroup', {
+  size: props.size,
+  variant: props.variant,
+});
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-bind="forwarded"
+    :class="cn('flex items-center justify-center gap-1', props.class)"
+  >
+    <slot></slot>
+  </ToggleGroupRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroupItem.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 0000000..615562f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority';
+import type { ToggleGroupItemProps } from 'reka-ui';
+
+import { computed, inject } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { ToggleGroupItem, useForwardProps } from 'reka-ui';
+
+import { toggleVariants } from '../toggle';
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
+
+const props = defineProps<
+  ToggleGroupItemProps & {
+    class?: any;
+    size?: ToggleGroupVariants['size'];
+    variant?: ToggleGroupVariants['variant'];
+  }
+>();
+
+const context = inject<ToggleGroupVariants>('toggleGroup');
+
+const delegatedProps = computed(() => {
+  const { class: _, size: _size, variant: _variant, ...delegated } = props;
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        toggleVariants({
+          variant: context?.variant || variant,
+          size: context?.size || size,
+        }),
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </ToggleGroupItem>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/index.ts
new file mode 100644
index 0000000..ac3e34b
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/index.ts
@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue';
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/Toggle.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/Toggle.vue
new file mode 100644
index 0000000..779a60c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/Toggle.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from 'reka-ui';
+
+import type { ToggleVariants } from './toggle';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { Toggle, useForwardPropsEmits } from 'reka-ui';
+
+import { toggleVariants } from './toggle';
+
+const props = withDefaults(
+  defineProps<
+    ToggleProps & {
+      class?: any;
+      size?: ToggleVariants['size'];
+      variant?: ToggleVariants['variant'];
+    }
+  >(),
+  {
+    disabled: false,
+    size: 'default',
+    variant: 'default',
+  },
+);
+
+const emits = defineEmits<ToggleEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, size: _size, variant: _variant, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <Toggle
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot></slot>
+  </Toggle>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/index.ts
new file mode 100644
index 0000000..ecc1e3f
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/index.ts
@@ -0,0 +1,2 @@
+export * from './toggle';
+export { default as Toggle } from './Toggle.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/toggle.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/toggle.ts
new file mode 100644
index 0000000..d251328
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/toggle.ts
@@ -0,0 +1,27 @@
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-9 px-3',
+        lg: 'h-10 px-3',
+        sm: 'h-8 px-2',
+      },
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+      },
+    },
+  },
+);
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/Tooltip.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/Tooltip.vue
new file mode 100644
index 0000000..95aef73
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/Tooltip.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui';
+
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot></slot>
+  </TooltipRoot>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
new file mode 100644
index 0000000..0a6be32
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui';
+
+import { computed } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: any }>(),
+  {
+    class: '',
+    side: 'right',
+    sideOffset: 5,
+  },
+);
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-popup overflow-hidden rounded-sm border border-border bg-accent px-4 py-2 text-xs text-accent-foreground shadow-float animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </TooltipContent>
+  </TooltipPortal>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipProvider.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 0000000..6ad95a0
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'reka-ui';
+
+import { TooltipProvider } from 'reka-ui';
+
+const props = defineProps<TooltipProviderProps>();
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot></slot>
+  </TooltipProvider>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipTrigger.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 0000000..52d1e64
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui';
+
+import { TooltipTrigger } from 'reka-ui';
+
+const props = defineProps<TooltipTriggerProps>();
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot></slot>
+  </TooltipTrigger>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/index.ts
new file mode 100644
index 0000000..94e681c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue';
+export { default as TooltipContent } from './TooltipContent.vue';
+export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipTrigger } from './TooltipTrigger.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tree/index.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tree/index.ts
new file mode 100644
index 0000000..d390f63
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tree/index.ts
@@ -0,0 +1,4 @@
+export { default as VbenTree } from './tree.vue';
+export type { TreeProps } from './types';
+export { treePropsDefaults } from './types';
+export type { FlattenedItem } from 'reka-ui';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
new file mode 100644
index 0000000..c2c7607
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
@@ -0,0 +1,467 @@
+<script lang="ts" setup>
+import type { Arrayable } from '@vueuse/core';
+import type { FlattenedItem } from 'reka-ui';
+
+import type { ClassType, Recordable } from '@vben-core/typings';
+
+import type { TreeProps } from './types';
+
+import { onMounted, ref, watchEffect } from 'vue';
+
+import { ChevronRight, IconifyIcon } from '@vben-core/icons';
+import { cn, get } from '@vben-core/shared/utils';
+
+import { TreeItem, TreeRoot } from 'reka-ui';
+
+import { Checkbox } from '../checkbox';
+import { treePropsDefaults } from './types';
+
+const props = withDefaults(defineProps<TreeProps>(), treePropsDefaults());
+
+const emits = defineEmits<{
+  expand: [value: FlattenedItem<Recordable<any>>];
+  select: [value: FlattenedItem<Recordable<any>>];
+}>();
+
+interface InnerFlattenItem<T = Recordable<any>, P = number | string> {
+  hasChildren: boolean;
+  id: P;
+  level: number;
+  parentId: null | P;
+  parents: P[];
+  value: T;
+}
+
+function flatten<T = Recordable<any>, P = number | string>(
+  items: T[],
+  childrenField: string = 'children',
+  level = 0,
+  parentId: null | P = null,
+  parents: P[] = [],
+): InnerFlattenItem<T, P>[] {
+  const result: InnerFlattenItem<T, P>[] = [];
+  items.forEach((item) => {
+    const children = get(item, childrenField) as Array<T>;
+    const id = get(item, props.valueField) as P;
+    const val: InnerFlattenItem<T, P> = {
+      hasChildren: Array.isArray(children) && children.length > 0,
+      id,
+      level,
+      parentId,
+      parents: [...parents],
+      value: item,
+    };
+    result.push(val);
+    if (val.hasChildren)
+      result.push(
+        ...flatten(children, childrenField, level + 1, id, [...parents, id]),
+      );
+  });
+  return result;
+}
+
+const flattenData = ref<Array<InnerFlattenItem>>([]);
+const modelValue = defineModel<Arrayable<number | string>>();
+const expanded = ref<Array<number | string>>(props.defaultExpandedKeys ?? []);
+
+const treeValue = ref();
+
+onMounted(() => {
+  watchEffect(() => {
+    flattenData.value = flatten(props.treeData, props.childrenField);
+    updateTreeValue();
+    if (
+      props.defaultExpandedLevel !== undefined &&
+      props.defaultExpandedLevel > 0
+    )
+      expandToLevel(props.defaultExpandedLevel);
+  });
+});
+
+function getItemByValue(value: number | string) {
+  return flattenData.value.find(
+    (item) => get(item.value, props.valueField) === value,
+  )?.value;
+}
+
+function updateTreeValue() {
+  const val = modelValue.value;
+  if (val === undefined) {
+    treeValue.value = undefined;
+  } else {
+    if (Array.isArray(val)) {
+      const filteredValues = val.filter((v) => {
+        const item = getItemByValue(v);
+        return item && !get(item, props.disabledField);
+      });
+      treeValue.value = filteredValues.map((v) => getItemByValue(v));
+
+      if (filteredValues.length !== val.length) {
+        modelValue.value = filteredValues;
+      }
+    } else {
+      const item = getItemByValue(val);
+      if (item && !get(item, props.disabledField)) {
+        treeValue.value = item;
+      } else {
+        treeValue.value = undefined;
+        modelValue.value = undefined;
+      }
+    }
+  }
+}
+
+function updateModelValue(val: Arrayable<Recordable<any>>) {
+  if (Array.isArray(val)) {
+    const filteredVal = val.filter((v) => !get(v, props.disabledField));
+    modelValue.value = filteredVal.map((v) => get(v, props.valueField));
+  } else {
+    if (val && !get(val, props.disabledField)) {
+      modelValue.value = get(val, props.valueField);
+    }
+  }
+}
+
+function expandToLevel(level: number) {
+  const keys: string[] = [];
+  flattenData.value.forEach((item) => {
+    if (item.level <= level - 1) {
+      keys.push(get(item.value, props.valueField));
+    }
+  });
+  expanded.value = keys;
+}
+
+function collapseNodes(value: Arrayable<number | string>) {
+  const keys = new Set(Array.isArray(value) ? value : [value]);
+  expanded.value = expanded.value.filter((key) => !keys.has(key));
+}
+
+function expandNodes(value: Arrayable<number | string>) {
+  const keys = [...(Array.isArray(value) ? value : [value])];
+  keys.forEach((key) => {
+    if (expanded.value.includes(key)) return;
+    const item = getItemByValue(key);
+    if (item) {
+      expanded.value.push(key);
+    }
+  });
+}
+
+function expandAll() {
+  expanded.value = flattenData.value
+    .filter((item) => item.hasChildren)
+    .map((item) => get(item.value, props.valueField));
+}
+
+function collapseAll() {
+  expanded.value = [];
+}
+
+function checkAll() {
+  if (!props.multiple) return;
+  modelValue.value = [
+    ...new Set(
+      flattenData.value
+        .filter((item) => !get(item.value, props.disabledField))
+        .map((item) => get(item.value, props.valueField)),
+    ),
+  ];
+  updateTreeValue();
+}
+
+function unCheckAll() {
+  if (!props.multiple) return;
+  modelValue.value = [];
+  updateTreeValue();
+}
+
+function isNodeDisabled(item: FlattenedItem<Recordable<any>>) {
+  return props.disabled || get(item.value, props.disabledField);
+}
+
+function onToggle(item: FlattenedItem<Recordable<any>>) {
+  emits('expand', item);
+}
+function onSelect(item: FlattenedItem<Recordable<any>>, isSelected: boolean) {
+  if (isNodeDisabled(item)) {
+    return;
+  }
+
+  if (
+    !props.checkStrictly &&
+    props.multiple &&
+    props.autoCheckParent &&
+    isSelected
+  ) {
+    flattenData.value
+      .find((i) => {
+        return (
+          get(i.value, props.valueField) === get(item.value, props.valueField)
+        );
+      })
+      ?.parents?.filter((item) => !get(item, props.disabledField))
+      ?.forEach((p) => {
+        if (Array.isArray(modelValue.value) && !modelValue.value.includes(p)) {
+          modelValue.value.push(p);
+        }
+      });
+  }
+  if (
+    !props.checkStrictly &&
+    props.multiple &&
+    props.autoCheckParent &&
+    !isSelected
+  ) {
+    flattenData.value
+      .find((i) => {
+        return (
+          get(i.value, props.valueField) === get(item.value, props.valueField)
+        );
+      })
+      ?.parents?.filter((item) => !get(item, props.disabledField))
+      ?.toReversed()
+      .forEach((p) => {
+        const children = flattenData.value.filter((i) => {
+          return (
+            i.parents.length > 0 &&
+            i.parents.includes(p) &&
+            i.id !== item._id &&
+            i.parentId === p
+          );
+        });
+        if (Array.isArray(modelValue.value)) {
+          const hasSelectedChild = children.some((child) =>
+            (modelValue.value as unknown[]).includes(
+              get(child.value, props.valueField),
+            ),
+          );
+          if (!hasSelectedChild) {
+            const index = modelValue.value.indexOf(p);
+            if (index !== -1) {
+              modelValue.value.splice(index, 1);
+            }
+          }
+        }
+      });
+  }
+  updateTreeValue();
+  emits('select', item);
+}
+
+defineExpose({
+  collapseAll,
+  collapseNodes,
+  expandAll,
+  expandNodes,
+  checkAll,
+  unCheckAll,
+  expandToLevel,
+  getItemByValue,
+});
+</script>
+<template>
+  <TreeRoot
+    :get-key="(item) => get(item, valueField)"
+    :get-children="(item) => get(item, childrenField)"
+    :items="treeData"
+    :model-value="treeValue"
+    v-model:expanded="expanded as string[]"
+    :default-expanded="defaultExpandedKeys as string[]"
+    :propagate-select="!checkStrictly"
+    :multiple="multiple"
+    :disabled="disabled"
+    :selection-behavior="allowClear || multiple ? 'toggle' : 'replace'"
+    @update:model-value="updateModelValue"
+    v-slot="{ flattenItems }"
+    :class="
+      cn(
+        'text-blackA11 container select-none list-none rounded-lg text-sm font-medium',
+        $attrs.class as unknown as ClassType,
+        bordered ? 'border' : '',
+      )
+    "
+  >
+    <div
+      :class="
+        cn('my-0.5 flex w-full items-center p-1', bordered ? 'border-b' : '')
+      "
+      v-if="$slots.header"
+    >
+      <slot name="header"> </slot>
+    </div>
+    <div
+      :class="
+        cn('my-0.5 flex w-full items-center p-1', bordered ? 'border-b' : '')
+      "
+      v-if="treeData.length > 0"
+    >
+      <div
+        class="flex size-5 flex-1 cursor-pointer items-center"
+        @click="() => (expanded?.length > 0 ? collapseAll() : expandAll())"
+      >
+        <ChevronRight
+          :class="{ 'rotate-90': expanded?.length > 0 }"
+          class="size-4 cursor-pointer text-foreground/80 transition hover:text-foreground"
+        />
+        <Checkbox
+          v-if="multiple"
+          @click.stop
+          @update:model-value="
+            (checked: boolean | 'indeterminate') =>
+              checked === true ? checkAll() : unCheckAll()
+          "
+        />
+      </div>
+    </div>
+    <TransitionGroup :name="transition ? 'fade' : ''">
+      <TreeItem
+        v-for="item in flattenItems"
+        v-slot="{
+          isExpanded,
+          isSelected,
+          isIndeterminate,
+          handleSelect,
+          handleToggle,
+        }"
+        :key="item._id"
+        :style="{ 'margin-left': `${item.level - 1}rem` }"
+        :class="
+          cn('cursor-pointer', getNodeClass?.(item), {
+            'data-[selected]:bg-accent': !multiple,
+            'cursor-not-allowed text-foreground/50': isNodeDisabled(item),
+          })
+        "
+        v-bind="
+          Object.assign(item.bind, {
+            onfocus: isNodeDisabled(item) ? 'this.blur()' : undefined,
+            disabled: isNodeDisabled(item),
+          })
+        "
+        @select="
+          (event: any) => {
+            if (isNodeDisabled(item)) {
+              event.preventDefault();
+              event.stopPropagation();
+              return;
+            }
+            if (event.detail.originalEvent.type === 'click') {
+              event.preventDefault();
+            }
+            onSelect(item, event.detail.isSelected);
+          }
+        "
+        @toggle="
+          (event: any) => {
+            if (event.detail.originalEvent.type === 'click') {
+              event.preventDefault();
+            }
+            !isNodeDisabled(item) && onToggle(item);
+          }
+        "
+        class="tree-node focus:ring-grass8 my-0.5 flex items-center rounded p-1 outline-none focus:ring-2"
+      >
+        <ChevronRight
+          v-if="
+            item.hasChildren &&
+            Array.isArray(item.value[childrenField]) &&
+            item.value[childrenField].length > 0
+          "
+          class="size-4 cursor-pointer text-foreground/80 transition hover:text-foreground"
+          :class="{ 'rotate-90': isExpanded }"
+          @click.stop="
+            () => {
+              handleToggle();
+              onToggle(item);
+            }
+          "
+        />
+        <div v-else class="h-4 w-4"></div>
+        <div class="flex items-center gap-1">
+          <Checkbox
+            v-if="multiple"
+            :model-value="isSelected && !isNodeDisabled(item)"
+            :disabled="isNodeDisabled(item)"
+            :indeterminate="isIndeterminate && !isNodeDisabled(item)"
+            @click="
+              (event: MouseEvent) => {
+                if (isNodeDisabled(item)) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  return;
+                }
+                handleSelect();
+              }
+            "
+          />
+          <div
+            class="flex items-center gap-1"
+            @click="
+              (event: MouseEvent) => {
+                if (isNodeDisabled(item)) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  return;
+                }
+                handleSelect();
+              }
+            "
+          >
+            <slot name="node" v-bind="item">
+              <IconifyIcon
+                class="size-4"
+                v-if="showIcon && get(item.value, iconField)"
+                :icon="get(item.value, iconField)"
+              />
+              {{ get(item.value, labelField) }}
+            </slot>
+          </div>
+        </div>
+        <div class="h-4 w-4"></div>
+      </TreeItem>
+    </TransitionGroup>
+    <div
+      :class="
+        cn('my-0.5 flex w-full items-center p-1', bordered ? 'border-t' : '')
+      "
+      v-if="$slots.footer"
+    >
+      <slot name="footer"> </slot>
+    </div>
+  </TreeRoot>
+</template>
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  padding: 0;
+  list-style-type: none;
+}
+
+.item {
+  box-sizing: border-box;
+  width: 100%;
+  height: 30px;
+  background-color: #f3f3f3;
+  border: 1px solid #666;
+}
+
+/* 1. 声明过渡效果 */
+.fade-move,
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+/* 2. 声明进入和离开的状态 */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: scaleY(0.01) translate(30px, 0);
+}
+
+/* 3. 确保离开的项目被移除出了布局流
+      以便正确地计算移动时的动画效果。 */
+.fade-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts
new file mode 100644
index 0000000..53118ba
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts
@@ -0,0 +1,62 @@
+import type { Arrayable } from '@vueuse/core';
+import type { FlattenedItem } from 'reka-ui';
+
+import type { Recordable } from '@vben-core/typings';
+
+export interface TreeProps {
+  /** 单选时允许取消已有选项 */
+  allowClear?: boolean;
+  /** 非关联选择时，自动选中上级节点 */
+  autoCheckParent?: boolean;
+  /** 显示边框 */
+  bordered?: boolean;
+  /** 取消父子关联选择 */
+  checkStrictly?: boolean;
+  /** 子级字段名 */
+  childrenField?: string;
+  /** 默认展开的键 */
+  defaultExpandedKeys?: Array<number | string>;
+  /** 默认展开的级别（优先级高于defaultExpandedKeys） */
+  defaultExpandedLevel?: number;
+  /** 默认值 */
+  defaultValue?: Arrayable<number | string>;
+  /** 禁用 */
+  disabled?: boolean;
+  /** 禁用字段名 */
+  disabledField?: string;
+  /** 自定义节点类名 */
+  getNodeClass?: (item: FlattenedItem<Recordable<any>>) => string;
+  iconField?: string;
+  /** label字段 */
+  labelField?: string;
+  /** 是否多选 */
+  multiple?: boolean;
+  /** 显示由iconField指定的图标 */
+  showIcon?: boolean;
+  /** 启用展开收缩动画 */
+  transition?: boolean;
+  /** 树数据 */
+  treeData: Recordable<any>[];
+  /** 值字段 */
+  valueField?: string;
+}
+
+export function treePropsDefaults() {
+  return {
+    allowClear: false,
+    autoCheckParent: true,
+    bordered: false,
+    checkStrictly: false,
+    defaultExpandedKeys: () => [],
+    defaultExpandedLevel: 0,
+    disabled: false,
+    disabledField: 'disabled',
+    iconField: 'icon',
+    labelField: 'label',
+    multiple: false,
+    showIcon: true,
+    transition: true,
+    valueField: 'value',
+    childrenField: 'children',
+  };
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/tailwind.config.mjs b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/tailwind.config.mjs
new file mode 100644
index 0000000..f17f556
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/tailwind.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';
diff --git a/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/tsconfig.json b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/tsconfig.json
new file mode 100644
index 0000000..0a46bc5
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/shadcn-ui/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@vben-core/shadcn-ui/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/build.config.ts b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/build.config.ts
new file mode 100644
index 0000000..18eaa60
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/build.config.ts
@@ -0,0 +1,21 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    {
+      builder: 'mkdist',
+      input: './src',
+      loaders: ['vue'],
+      pattern: ['**/*.vue'],
+    },
+    {
+      builder: 'mkdist',
+      format: 'esm',
+      input: './src',
+      loaders: ['js'],
+      pattern: ['**/*.ts'],
+    },
+  ],
+});
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/package.json b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/package.json
new file mode 100644
index 0000000..0bb4dc4
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@vben-core/tabs-ui",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/uikit/tabs-ui"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@vben-core/composables": "workspace:*",
+    "@vben-core/icons": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/typings": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "vue": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/postcss.config.mjs b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/postcss.config.mjs
new file mode 100644
index 0000000..3d80704
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/index.ts b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/index.ts
new file mode 100644
index 0000000..eafeaa6
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/index.ts
@@ -0,0 +1,2 @@
+export { default as TabsChrome } from './tabs-chrome/tabs.vue';
+export { default as Tabs } from './tabs/tabs.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
new file mode 100644
index 0000000..faa1b94
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import type { TabDefinition } from '@vben-core/typings';
+
+import type { TabConfig, TabsProps } from '../../types';
+
+import { computed, ref } from 'vue';
+
+import { Pin, X } from '@vben-core/icons';
+import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
+
+interface Props extends TabsProps {}
+
+defineOptions({
+  name: 'VbenTabsChrome',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  contentClass: 'vben-tabs-content',
+  contextMenus: () => [],
+  gap: 7,
+  tabs: () => [],
+});
+
+const emit = defineEmits<{
+  close: [string];
+  unpin: [TabDefinition];
+}>();
+const active = defineModel<string>('active');
+
+const contentRef = ref();
+const tabRef = ref();
+
+const style = computed(() => {
+  const { gap } = props;
+  return {
+    '--gap': `${gap}px`,
+  };
+});
+
+const tabsView = computed(() => {
+  return props.tabs.map((tab) => {
+    const { fullPath, meta, name, path, key } = tab || {};
+    const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
+    return {
+      affixTab: !!affixTab,
+      closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
+      fullPath,
+      icon: icon as string,
+      key,
+      meta,
+      name,
+      path,
+      title: (newTabTitle || title || name) as string,
+    } as TabConfig;
+  });
+});
+
+function onMouseDown(e: MouseEvent, tab: TabConfig) {
+  if (
+    e.button === 1 &&
+    tab.closable &&
+    !tab.affixTab &&
+    tabsView.value.length > 1 &&
+    props.middleClickToClose
+  ) {
+    e.preventDefault();
+    e.stopPropagation();
+    emit('close', tab.key);
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="contentRef"
+    :class="contentClass"
+    :style="style"
+    class="tabs-chrome !flex h-full w-max overflow-y-hidden pr-6"
+  >
+    <TransitionGroup name="slide-left">
+      <div
+        v-for="(tab, i) in tabsView"
+        :key="tab.key"
+        ref="tabRef"
+        :class="[
+          {
+            'is-active': tab.key === active,
+            draggable: !tab.affixTab,
+            'affix-tab': tab.affixTab,
+          },
+        ]"
+        :data-active-tab="active"
+        :data-index="i"
+        class="tabs-chrome__item draggable translate-all group relative -mr-3 flex h-full select-none items-center"
+        data-tab-item="true"
+        @click="active = tab.key"
+        @mousedown="onMouseDown($event, tab)"
+      >
+        <VbenContextMenu
+          :handler-data="tab"
+          :menus="contextMenus"
+          :modal="false"
+          item-class="pr-6"
+        >
+          <div class="relative size-full px-1">
+            <!-- divider -->
+            <div
+              v-if="i !== 0 && tab.key !== active"
+              class="tabs-chrome__divider absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] bg-border transition-all"
+            ></div>
+            <!-- background -->
+            <div
+              class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
+            >
+              <div
+                class="tabs-chrome__background-content h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150 group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent"
+              ></div>
+              <svg
+                class="tabs-chrome__background-before absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
+                height="7"
+                width="7"
+              >
+                <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
+              </svg>
+              <svg
+                class="tabs-chrome__background-after absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
+                height="7"
+                width="7"
+              >
+                <path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" />
+              </svg>
+            </div>
+
+            <!-- extra -->
+            <div
+              class="tabs-chrome__extra absolute right-[var(--gap)] top-1/2 z-[3] size-4 translate-y-[-50%]"
+            >
+              <!-- close-icon -->
+              <X
+                v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
+                class="mt-[2px] size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-accent-foreground"
+                @click.stop="() => emit('close', tab.key)"
+              />
+              <Pin
+                v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
+                class="mt-[1px] size-3.5 cursor-pointer rounded-full text-accent-foreground/80 transition-all hover:text-accent-foreground group-[.is-active]:text-accent-foreground"
+                @click.stop="() => emit('unpin', tab)"
+              />
+            </div>
+
+            <!-- tab-item-main -->
+            <div
+              class="tabs-chrome__item-main z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pl-2 pr-4 text-accent-foreground duration-150 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
+            >
+              <VbenIcon
+                v-if="showIcon"
+                :icon="tab.icon"
+                class="mr-1 flex size-4 items-center overflow-hidden"
+              />
+
+              <span class="flex-1 overflow-hidden whitespace-nowrap text-sm">
+                {{ tab.title }}
+              </span>
+            </div>
+          </div>
+        </VbenContextMenu>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style scoped>
+.tabs-chrome {
+  &__item:not(.dragging) {
+    @apply cursor-pointer;
+
+    &:hover:not(.is-active) {
+      & + .tabs-chrome__item {
+        .tabs-chrome__divider {
+          @apply opacity-0;
+        }
+      }
+
+      .tabs-chrome__divider {
+        @apply opacity-0;
+      }
+
+      .tabs-chrome__background {
+        @apply pb-[2px];
+
+        &-content {
+          @apply mx-[2px] rounded-md bg-accent;
+        }
+      }
+    }
+
+    &.is-active {
+      @apply z-[2];
+
+      & + .tabs-chrome__item {
+        .tabs-chrome__divider {
+          @apply opacity-0 !important;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
new file mode 100644
index 0000000..effa93c
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import type { TabDefinition } from '@vben-core/typings';
+
+import type { TabConfig, TabsProps } from '../../types';
+
+import { computed } from 'vue';
+
+import { Pin, X } from '@vben-core/icons';
+import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
+
+interface Props extends TabsProps {}
+
+defineOptions({
+  name: 'VbenTabs',
+
+  inheritAttrs: false,
+});
+const props = withDefaults(defineProps<Props>(), {
+  contentClass: 'vben-tabs-content',
+  contextMenus: () => [],
+  tabs: () => [],
+});
+
+const emit = defineEmits<{
+  close: [string];
+  unpin: [TabDefinition];
+}>();
+const active = defineModel<string>('active');
+
+const typeWithClass = computed(() => {
+  const typeClasses: Record<string, { content: string }> = {
+    brisk: {
+      content: `h-full after:content-['']  after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100 [&:not(:first-child)]:border-l last:border-r last:border-r border-border`,
+    },
+    card: {
+      content:
+        'h-[calc(100%-6px)] rounded-md ml-2 border border-border  transition-all',
+    },
+    plain: {
+      content:
+        'h-full [&:not(:first-child)]:border-l last:border-r border-border',
+    },
+  };
+
+  return typeClasses[props.styleType || 'plain'] || { content: '' };
+});
+
+const tabsView = computed(() => {
+  return props.tabs.map((tab) => {
+    const { fullPath, meta, name, path, key } = tab || {};
+    const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
+    return {
+      affixTab: !!affixTab,
+      closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
+      fullPath,
+      icon: icon as string,
+      key,
+      meta,
+      name,
+      path,
+      title: (newTabTitle || title || name) as string,
+    } as TabConfig;
+  });
+});
+
+function onMouseDown(e: MouseEvent, tab: TabConfig) {
+  if (
+    e.button === 1 &&
+    tab.closable &&
+    !tab.affixTab &&
+    tabsView.value.length > 1 &&
+    props.middleClickToClose
+  ) {
+    e.preventDefault();
+    e.stopPropagation();
+    emit('close', tab.key);
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="contentClass"
+    class="relative !flex h-full w-max items-center overflow-hidden pr-6"
+  >
+    <TransitionGroup name="slide-left">
+      <div
+        v-for="(tab, i) in tabsView"
+        :key="tab.key"
+        :class="[
+          {
+            'is-active bg-primary/15 dark:bg-accent': tab.key === active,
+            draggable: !tab.affixTab,
+            'affix-tab': tab.affixTab,
+          },
+          typeWithClass.content,
+        ]"
+        :data-index="i"
+        class="tab-item translate-all group relative flex cursor-pointer select-none [&:not(.is-active)]:hover:bg-accent"
+        data-tab-item="true"
+        @click="active = tab.key"
+        @mousedown="onMouseDown($event, tab)"
+      >
+        <VbenContextMenu
+          :handler-data="tab"
+          :menus="contextMenus"
+          :modal="false"
+          item-class="pr-6"
+        >
+          <div class="relative flex size-full items-center">
+            <!-- extra -->
+            <div
+              class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden"
+            >
+              <!-- close-icon -->
+              <X
+                v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
+                class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
+                @click.stop="() => emit('close', tab.key)"
+              />
+              <Pin
+                v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
+                class="mt-[1px] size-3.5 cursor-pointer rounded-full transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
+                @click.stop="() => emit('unpin', tab)"
+              />
+            </div>
+
+            <!-- tab-item-main -->
+            <div
+              class="mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 text-accent-foreground transition-all duration-300 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
+            >
+              <VbenIcon
+                v-if="showIcon"
+                :icon="tab.icon"
+                class="mr-2 flex size-4 items-center overflow-hidden"
+                fallback
+              />
+
+              <span class="flex-1 overflow-hidden whitespace-nowrap text-sm">
+                {{ tab.title }}
+              </span>
+            </div>
+          </div>
+        </VbenContextMenu>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/widgets/index.ts b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/widgets/index.ts
new file mode 100644
index 0000000..a26899e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/widgets/index.ts
@@ -0,0 +1,2 @@
+export { default as TabsToolMore } from './tool-more.vue';
+export { default as TabsToolScreen } from './tool-screen.vue';
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
new file mode 100644
index 0000000..24f43a9
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { DropdownMenuProps } from '@vben-core/shadcn-ui';
+
+import { ChevronDown } from '@vben-core/icons';
+import { VbenDropdownMenu } from '@vben-core/shadcn-ui';
+
+defineProps<DropdownMenuProps>();
+</script>
+
+<template>
+  <VbenDropdownMenu :menus="menus" :modal="false">
+    <div
+      class="flex-center h-full cursor-pointer border-l border-border px-2 text-lg font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
+    >
+      <ChevronDown class="size-4" />
+    </div>
+  </VbenDropdownMenu>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
new file mode 100644
index 0000000..acbf14e
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-screen.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { Fullscreen, Minimize2 } from '@vben-core/icons';
+
+const screen = defineModel<boolean>('screen');
+
+function toggleScreen() {
+  screen.value = !screen.value;
+}
+</script>
+
+<template>
+  <div
+    class="flex-center h-full cursor-pointer border-l border-border px-2 text-lg font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
+    @click="toggleScreen"
+  >
+    <Minimize2 v-if="screen" class="size-4" />
+    <Fullscreen v-else class="size-4" />
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/index.ts b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/index.ts
new file mode 100644
index 0000000..6d562db
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/index.ts
@@ -0,0 +1,3 @@
+export * from './components/widgets';
+export { default as TabsView } from './tabs-view.vue';
+export type { IContextMenuItem } from '@vben-core/shadcn-ui';
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
new file mode 100644
index 0000000..7549419
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { TabsEmits, TabsProps } from './types';
+
+import { useForwardPropsEmits } from '@vben-core/composables';
+import { ChevronLeft, ChevronRight } from '@vben-core/icons';
+import { VbenScrollbar } from '@vben-core/shadcn-ui';
+
+import { Tabs, TabsChrome } from './components';
+import { useTabsDrag } from './use-tabs-drag';
+import { useTabsViewScroll } from './use-tabs-view-scroll';
+
+interface Props extends TabsProps {}
+
+defineOptions({
+  name: 'TabsView',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  contentClass: 'vben-tabs-content',
+  draggable: true,
+  styleType: 'chrome',
+  wheelable: true,
+});
+
+const emit = defineEmits<TabsEmits>();
+
+const forward = useForwardPropsEmits(props, emit);
+
+const {
+  handleScrollAt,
+  handleWheel,
+  scrollbarRef,
+  scrollDirection,
+  scrollIsAtLeft,
+  scrollIsAtRight,
+  showScrollButton,
+} = useTabsViewScroll(props);
+
+function onWheel(e: WheelEvent) {
+  if (props.wheelable) {
+    handleWheel(e);
+    e.stopPropagation();
+    e.preventDefault();
+  }
+}
+
+useTabsDrag(props, emit);
+</script>
+
+<template>
+  <div class="flex h-full flex-1 overflow-hidden">
+    <!-- 左侧滚动按钮 -->
+    <span
+      v-show="showScrollButton"
+      :class="{
+        'cursor-pointer text-muted-foreground hover:bg-muted': !scrollIsAtLeft,
+        'pointer-events-none opacity-30': scrollIsAtLeft,
+      }"
+      class="border-r px-2"
+      @click="scrollDirection('left')"
+    >
+      <ChevronLeft class="size-4 h-full" />
+    </span>
+
+    <div
+      :class="{
+        'pt-[3px]': styleType === 'chrome',
+      }"
+      class="size-full flex-1 overflow-hidden"
+    >
+      <VbenScrollbar
+        ref="scrollbarRef"
+        :shadow-bottom="false"
+        :shadow-top="false"
+        class="h-full"
+        horizontal
+        scroll-bar-class="z-10 hidden "
+        shadow
+        shadow-left
+        shadow-right
+        @scroll-at="handleScrollAt"
+        @wheel="onWheel"
+      >
+        <TabsChrome
+          v-if="styleType === 'chrome'"
+          v-bind="{ ...forward, ...$attrs, ...$props }"
+        />
+
+        <Tabs v-else v-bind="{ ...forward, ...$attrs, ...$props }" />
+      </VbenScrollbar>
+    </div>
+
+    <!-- 右侧滚动按钮 -->
+    <span
+      v-show="showScrollButton"
+      :class="{
+        'cursor-pointer text-muted-foreground hover:bg-muted': !scrollIsAtRight,
+        'pointer-events-none opacity-30': scrollIsAtRight,
+      }"
+      class="cursor-pointer border-l px-2 text-muted-foreground hover:bg-muted"
+      @click="scrollDirection('right')"
+    >
+      <ChevronRight class="size-4 h-full" />
+    </span>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/types.ts b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/types.ts
new file mode 100644
index 0000000..19ecf03
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/types.ts
@@ -0,0 +1,73 @@
+import type { IContextMenuItem } from '@vben-core/shadcn-ui';
+import type { TabDefinition, TabsStyleType } from '@vben-core/typings';
+
+export type TabsEmits = {
+  close: [string];
+  sortTabs: [number, number];
+  unpin: [TabDefinition];
+};
+
+export interface TabsProps {
+  active?: string;
+  /**
+   * @zh_CN content class
+   * @default tabs-chrome
+   */
+  contentClass?: string;
+  /**
+   * @zh_CN 右键菜单
+   */
+  contextMenus?: (data: any) => IContextMenuItem[];
+  /**
+   * @zh_CN 是否可以拖拽
+   */
+  draggable?: boolean;
+  /**
+   * @zh_CN 间隙
+   * @default 7
+   * 仅限 tabs-chrome
+   */
+  gap?: number;
+  /**
+   * @zh_CN tab 最大宽度
+   * 仅限 tabs-chrome
+   */
+  maxWidth?: number;
+  /**
+   * @zh_CN 点击中键时关闭Tab
+   */
+  middleClickToClose?: boolean;
+
+  /**
+   * @zh_CN tab最小宽度
+   * 仅限 tabs-chrome
+   */
+  minWidth?: number;
+
+  /**
+   * @zh_CN 是否显示图标
+   */
+  showIcon?: boolean;
+  /**
+   * @zh_CN 标签页风格
+   */
+  styleType?: TabsStyleType;
+
+  /**
+   * @zh_CN 选项卡数据
+   */
+  tabs?: TabDefinition[];
+
+  /**
+   * @zh_CN 是否响应滚轮事件
+   */
+  wheelable?: boolean;
+}
+
+export interface TabConfig extends TabDefinition {
+  affixTab: boolean;
+  closable: boolean;
+  icon: string;
+  key: string;
+  title: string;
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
new file mode 100644
index 0000000..b9c2e8a
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
@@ -0,0 +1,124 @@
+import type { Sortable } from '@vben-core/composables';
+import type { EmitType } from '@vben-core/typings';
+
+import type { TabsProps } from './types';
+
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { useIsMobile, useSortable } from '@vben-core/composables';
+
+// 可能会找到拖拽的子元素，这里需要确保拖拽的dom时tab元素
+function findParentElement(element: HTMLElement) {
+  const parentCls = 'group';
+  return element.classList.contains(parentCls)
+    ? element
+    : element.closest(`.${parentCls}`);
+}
+
+export function useTabsDrag(props: TabsProps, emit: EmitType) {
+  const sortableInstance = ref<null | Sortable>(null);
+
+  async function initTabsSortable() {
+    await nextTick();
+
+    const el = document.querySelectorAll(
+      `.${props.contentClass}`,
+    )?.[0] as HTMLElement;
+
+    if (!el) {
+      console.warn('Element not found for sortable initialization');
+      return;
+    }
+
+    const resetElState = async () => {
+      el.style.cursor = 'default';
+      // el.classList.remove('dragging');
+      el.querySelector('.draggable')?.classList.remove('dragging');
+    };
+
+    const { initializeSortable } = useSortable(el, {
+      filter: (_evt, target: HTMLElement) => {
+        const parent = findParentElement(target);
+        const draggable = parent?.classList.contains('draggable');
+        return !draggable || !props.draggable;
+      },
+      onEnd(evt) {
+        const { newIndex, oldIndex } = evt;
+        // const fromElement = evt.item;
+        const { srcElement } = (evt as any).originalEvent;
+
+        if (!srcElement) {
+          resetElState();
+          return;
+        }
+
+        const srcParent = findParentElement(srcElement);
+
+        if (!srcParent) {
+          resetElState();
+          return;
+        }
+
+        if (!srcParent.classList.contains('draggable')) {
+          resetElState();
+
+          return;
+        }
+
+        if (
+          oldIndex !== undefined &&
+          newIndex !== undefined &&
+          !Number.isNaN(oldIndex) &&
+          !Number.isNaN(newIndex) &&
+          oldIndex !== newIndex
+        ) {
+          emit('sortTabs', oldIndex, newIndex);
+        }
+        resetElState();
+      },
+      onMove(evt) {
+        const parent = findParentElement(evt.related);
+        if (parent?.classList.contains('draggable') && props.draggable) {
+          const isCurrentAffix = evt.dragged.classList.contains('affix-tab');
+          const isRelatedAffix = evt.related.classList.contains('affix-tab');
+          // 不允许在固定的tab和非固定的tab之间互相拖拽
+          return isCurrentAffix === isRelatedAffix;
+        } else {
+          return false;
+        }
+      },
+      onStart: () => {
+        el.style.cursor = 'grabbing';
+        el.querySelector('.draggable')?.classList.add('dragging');
+        // el.classList.add('dragging');
+      },
+    });
+
+    sortableInstance.value = await initializeSortable();
+  }
+
+  async function init() {
+    const { isMobile } = useIsMobile();
+
+    // 移动端下tab不需要拖拽
+    if (isMobile.value) {
+      return;
+    }
+    await nextTick();
+    initTabsSortable();
+  }
+
+  onMounted(init);
+
+  watch(
+    () => props.styleType,
+    () => {
+      sortableInstance.value?.destroy();
+      init();
+    },
+  );
+
+  onUnmounted(() => {
+    sortableInstance.value?.destroy();
+  });
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
new file mode 100644
index 0000000..aef32df
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
@@ -0,0 +1,202 @@
+import type { TabsProps } from './types';
+
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { VbenScrollbar } from '@vben-core/shadcn-ui';
+
+import { useDebounceFn } from '@vueuse/core';
+
+type DomElement = Element | null | undefined;
+
+export function useTabsViewScroll(props: TabsProps) {
+  let resizeObserver: null | ResizeObserver = null;
+  let mutationObserver: MutationObserver | null = null;
+  let tabItemCount = 0;
+  const scrollbarRef = ref<InstanceType<typeof VbenScrollbar> | null>(null);
+  const scrollViewportEl = ref<DomElement>(null);
+  const showScrollButton = ref(false);
+  const scrollIsAtLeft = ref(true);
+  const scrollIsAtRight = ref(false);
+
+  function getScrollClientWidth() {
+    const scrollbarEl = scrollbarRef.value?.$el;
+    if (!scrollbarEl || !scrollViewportEl.value) return {};
+
+    const scrollbarWidth = scrollbarEl.clientWidth;
+    const scrollViewWidth = scrollViewportEl.value.clientWidth;
+
+    return {
+      scrollbarWidth,
+      scrollViewWidth,
+    };
+  }
+
+  function scrollDirection(
+    direction: 'left' | 'right',
+    distance: number = 150,
+  ) {
+    const { scrollbarWidth, scrollViewWidth } = getScrollClientWidth();
+
+    if (!scrollbarWidth || !scrollViewWidth) return;
+
+    if (scrollbarWidth > scrollViewWidth) return;
+
+    scrollViewportEl.value?.scrollBy({
+      behavior: 'smooth',
+      left:
+        direction === 'left'
+          ? -(scrollbarWidth - distance)
+          : +(scrollbarWidth - distance),
+    });
+  }
+
+  async function initScrollbar() {
+    await nextTick();
+
+    const scrollbarEl = scrollbarRef.value?.$el;
+    if (!scrollbarEl) {
+      return;
+    }
+
+    const viewportEl = scrollbarEl?.querySelector(
+      'div[data-reka-scroll-area-viewport]',
+    );
+
+    scrollViewportEl.value = viewportEl;
+    calcShowScrollbarButton();
+
+    await nextTick();
+    scrollToActiveIntoView();
+
+    // 监听大小变化
+    resizeObserver?.disconnect();
+    resizeObserver = new ResizeObserver(
+      useDebounceFn((_entries: ResizeObserverEntry[]) => {
+        calcShowScrollbarButton();
+        scrollToActiveIntoView();
+      }, 100),
+    );
+    resizeObserver.observe(viewportEl);
+
+    tabItemCount = props.tabs?.length || 0;
+    mutationObserver?.disconnect();
+    // 使用 MutationObserver 仅监听子节点数量变化
+    mutationObserver = new MutationObserver(() => {
+      const count = viewportEl.querySelectorAll(
+        `div[data-tab-item="true"]`,
+      ).length;
+
+      if (count > tabItemCount) {
+        scrollToActiveIntoView();
+      }
+
+      if (count !== tabItemCount) {
+        calcShowScrollbarButton();
+        tabItemCount = count;
+      }
+    });
+
+    // 配置为仅监听子节点的添加和移除
+    mutationObserver.observe(viewportEl, {
+      attributes: false,
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  async function scrollToActiveIntoView() {
+    if (!scrollViewportEl.value) {
+      return;
+    }
+    await nextTick();
+    const viewportEl = scrollViewportEl.value;
+    const { scrollbarWidth } = getScrollClientWidth();
+    const { scrollWidth } = viewportEl;
+
+    if (scrollbarWidth >= scrollWidth) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      const activeItem = viewportEl?.querySelector('.is-active');
+      activeItem?.scrollIntoView({ behavior: 'smooth', inline: 'start' });
+    });
+  }
+
+  /**
+   * 计算tabs 宽度，用于判断是否显示左右滚动按钮
+   */
+  async function calcShowScrollbarButton() {
+    if (!scrollViewportEl.value) {
+      return;
+    }
+
+    const { scrollbarWidth } = getScrollClientWidth();
+
+    showScrollButton.value =
+      scrollViewportEl.value.scrollWidth > scrollbarWidth;
+  }
+
+  const handleScrollAt = useDebounceFn(({ left, right }) => {
+    scrollIsAtLeft.value = left;
+    scrollIsAtRight.value = right;
+  }, 100);
+
+  function handleWheel({ deltaY }: WheelEvent) {
+    scrollViewportEl.value?.scrollBy({
+      // behavior: 'smooth',
+      left: deltaY * 3,
+    });
+  }
+
+  watch(
+    () => props.active,
+    async () => {
+      // 200为了等待 tab 切换动画完成
+      // setTimeout(() => {
+      scrollToActiveIntoView();
+      // }, 300);
+    },
+    {
+      flush: 'post',
+    },
+  );
+
+  // watch(
+  //   () => props.tabs?.length,
+  //   async () => {
+  //     await nextTick();
+  //     calcShowScrollbarButton();
+  //   },
+  //   {
+  //     flush: 'post',
+  //   },
+  // );
+
+  watch(
+    () => props.styleType,
+    () => {
+      initScrollbar();
+    },
+  );
+
+  onMounted(initScrollbar);
+
+  onUnmounted(() => {
+    resizeObserver?.disconnect();
+    mutationObserver?.disconnect();
+    resizeObserver = null;
+    mutationObserver = null;
+  });
+
+  return {
+    handleScrollAt,
+    handleWheel,
+    initScrollbar,
+    scrollbarRef,
+    scrollDirection,
+    scrollIsAtLeft,
+    scrollIsAtRight,
+    showScrollButton,
+  };
+}
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/tailwind.config.mjs b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/tailwind.config.mjs
new file mode 100644
index 0000000..f17f556
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/tailwind.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';
diff --git a/admin-ui/vue/packages/@core/ui-kit/tabs-ui/tsconfig.json b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/@core/ui-kit/tabs-ui/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/constants/README.md b/admin-ui/vue/packages/constants/README.md
new file mode 100644
index 0000000..67936a6
--- /dev/null
+++ b/admin-ui/vue/packages/constants/README.md
@@ -0,0 +1,19 @@
+# @vben/constants
+
+用于多个 `app` 公用的常量，继承了 `@vben-core/shared/constants` 的所有能力。业务上有通用常量可以放在这里。
+
+## 用法
+
+### 添加依赖
+
+```bash
+# 进入目标应用目录，例如 apps/xxxx-app
+# cd apps/xxxx-app
+pnpm add @vben/constants
+```
+
+### 使用
+
+```ts
+import { LOGIN_PATH } from '@vben/constants';
+```
diff --git a/admin-ui/vue/packages/constants/package.json b/admin-ui/vue/packages/constants/package.json
new file mode 100644
index 0000000..249418f
--- /dev/null
+++ b/admin-ui/vue/packages/constants/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@vben/constants",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/constants"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@vben-core/shared": "workspace:*"
+  }
+}
diff --git a/admin-ui/vue/packages/constants/src/core.ts b/admin-ui/vue/packages/constants/src/core.ts
new file mode 100644
index 0000000..7d56375
--- /dev/null
+++ b/admin-ui/vue/packages/constants/src/core.ts
@@ -0,0 +1,29 @@
+/**
+ * @zh_CN 登录页面 url 地址
+ */
+export const LOGIN_PATH = '/auth/login';
+
+/**
+ * @zh_CN 默认首页地址
+ */
+export const DEFAULT_HOME_PATH = '/analytics';
+
+
+export interface LanguageOption {
+  label: string;
+  value: 'en-US' | 'zh-CN';
+}
+
+/**
+ * Supported languages
+ */
+export const SUPPORT_LANGUAGES: LanguageOption[] = [
+  {
+    label: '简体中文',
+    value: 'zh-CN',
+  },
+  {
+    label: 'English',
+    value: 'en-US',
+  },
+];
diff --git a/admin-ui/vue/packages/constants/src/dict-enum.ts b/admin-ui/vue/packages/constants/src/dict-enum.ts
new file mode 100644
index 0000000..8a3d3e7
--- /dev/null
+++ b/admin-ui/vue/packages/constants/src/dict-enum.ts
@@ -0,0 +1,23 @@
+export enum DictEnum {
+  SYS_COMMON_STATUS = 'sys_common_status',
+  SYS_DEVICE_TYPE = 'sys_device_type', // 设备类型
+  SYS_GRANT_TYPE = 'sys_grant_type', // 授权类型
+  SYS_NORMAL_DISABLE = 'sys_normal_disable', // 字符状态0正常1启用
+  SYS_DEPT_TYPE = 'sys_dept_type', // 组织类型0部门1公司
+  SYS_NOTICE_STATUS = 'sys_notice_status', // 通知状态
+  SYS_NOTICE_TYPE = 'sys_notice_type', // 通知类型
+  SYS_OPER_TYPE = 'sys_oper_type', // 操作类型
+  SYS_OSS_ACCESS_POLICY = 'oss_access_policy', // oss权限桶类型
+  SYS_SHOW_HIDE = 'sys_show_hide', // 显示状态
+  SYS_USER_SEX = 'sys_user_sex', // 性别
+  SYS_YES_NO = 'sys_yes_no', // 是否
+  SYS_YES_NO_NUM = 'sys_yes_no_num', // 是否数字
+  SYS_GEN_STATUS = 'sys_gen_status', // 生成状态
+  WF_BUSINESS_STATUS = 'wf_business_status', // 业务状态
+  WF_FORM_TYPE = 'wf_form_type', // 表单类型
+  WF_TASK_STATUS = 'wf_task_status', // 任务状态
+  SYS_JOB_GROUP = 'sys_job_group', // 任务分组
+  SYS_MISSFIRE_POLICY = 'sys_missfire_policy', // 任务计划执行策略\
+  SYS_JOB_CONCURRENT = 'sys_job_concurrent', // 任务是否并发 
+  AGENT_SCOPE_TYPE = 'agent_scope_type', // 渠道适用类型：0-所有客户 1-指定客户
+}
diff --git a/admin-ui/vue/packages/constants/src/index.ts b/admin-ui/vue/packages/constants/src/index.ts
new file mode 100644
index 0000000..8870dbb
--- /dev/null
+++ b/admin-ui/vue/packages/constants/src/index.ts
@@ -0,0 +1,3 @@
+export * from './core';
+export * from '@vben-core/shared/constants';
+export * from './dict-enum';
\ No newline at end of file
diff --git a/admin-ui/vue/packages/constants/tsconfig.json b/admin-ui/vue/packages/constants/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/constants/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/effects/README.md b/admin-ui/vue/packages/effects/README.md
new file mode 100644
index 0000000..4965b51
--- /dev/null
+++ b/admin-ui/vue/packages/effects/README.md
@@ -0,0 +1,10 @@
+## Effects 目录
+
+`effects` 目录专门用于存放与轻微耦合相关的代码和逻辑。如果你的包具有以下特点，建议将其放置在 `effects` 目录下：
+
+- **状态管理**：使用状态管理框架 `pinia`，并包含处理副作用（如异步操作、API 调用）的部分。
+- **用户偏好设置**：使用 `@vben-core/preferences` 处理用户偏好设置，涉及本地存储或浏览器缓存逻辑（如使用 `localStorage`）。
+- **导航和路由**：处理导航、页面跳转等场景，需要管理路由变化的逻辑。
+- **组件库依赖**：包含与特定组件库紧密耦合或依赖大型仓库的部分。
+
+通过将相关代码归类到 `effects` 目录，可以使项目结构更加清晰，便于维护和扩展。
diff --git a/admin-ui/vue/packages/effects/access/package.json b/admin-ui/vue/packages/effects/access/package.json
new file mode 100644
index 0000000..c23018a
--- /dev/null
+++ b/admin-ui/vue/packages/effects/access/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@vben/access",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/effects/permissions"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@vben/preferences": "workspace:*",
+    "@vben/stores": "workspace:*",
+    "@vben/types": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "vue": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/effects/access/src/access-control.vue b/admin-ui/vue/packages/effects/access/src/access-control.vue
new file mode 100644
index 0000000..370e995
--- /dev/null
+++ b/admin-ui/vue/packages/effects/access/src/access-control.vue
@@ -0,0 +1,47 @@
+<!--
+ Access control component for fine-grained access control.
+ TODO: 可以扩展更完善的功能：
+ 1. 支持多个权限码，只要有一个权限码满足即可 或者 多个权限码全部满足
+ 2. 支持多个角色，只要有一个角色满足即可 或者 多个角色全部满足
+ 3. 支持自定义权限码和角色的判断逻辑
+-->
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useAccess } from './use-access';
+
+interface Props {
+  /**
+   * Specified codes is visible
+   * @default []
+   */
+  codes?: string[];
+
+  /**
+   * 通过什么方式来控制组件，如果是 role，则传入角色，如果是 code，则传入权限码
+   * @default 'role'
+   */
+  type?: 'code' | 'role';
+}
+
+defineOptions({
+  name: 'AccessControl',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  codes: () => [],
+  type: 'role',
+});
+
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+const hasAuth = computed(() => {
+  const { codes, type } = props;
+  return type === 'role' ? hasAccessByRoles(codes) : hasAccessByCodes(codes);
+});
+</script>
+
+<template>
+  <slot v-if="!codes" :hasPermission="true"></slot>
+  <slot v-else-if="hasAuth" :hasPermission="hasAuth"></slot>
+</template>
diff --git a/admin-ui/vue/packages/effects/access/src/accessible.ts b/admin-ui/vue/packages/effects/access/src/accessible.ts
new file mode 100644
index 0000000..73e253a
--- /dev/null
+++ b/admin-ui/vue/packages/effects/access/src/accessible.ts
@@ -0,0 +1,184 @@
+import type { Component, DefineComponent } from 'vue';
+
+import type {
+  AccessModeType,
+  GenerateMenuAndRoutesOptions,
+  RouteRecordRaw,
+} from '@vben/types';
+
+import { defineComponent, h } from 'vue';
+
+import {
+  cloneDeep,
+  generateMenus,
+  generateRoutesByBackend,
+  generateRoutesByFrontend,
+  isFunction,
+  isString,
+  mapTree,
+} from '@vben/utils';
+
+async function generateAccessible(
+  mode: AccessModeType,
+  options: GenerateMenuAndRoutesOptions,
+) {
+  const { router } = options;
+
+  options.routes = cloneDeep(options.routes);
+  // 生成路由
+  const accessibleRoutes = await generateRoutes(mode, options);
+
+  const root = findRootRoute(router);
+
+  // 获取已有的路由名称列表
+  const names = root?.children?.map((item) => item.name) ?? [];
+
+  // 动态添加到router实例内
+  accessibleRoutes.forEach((route) => {
+    if (root && !route.meta?.noBasicLayout) {
+      // 为了兼容之前的版本用法，如果包含子路由，则将component移除，以免出现多层BasicLayout
+      // 如果你的项目已经跟进了本次修改，移除了所有自定义菜单首级的BasicLayout，可以将这段if代码删除
+      if (route.children && route.children.length > 0) {
+        delete route.component;
+      }
+      // 根据router name判断，如果路由已经存在，则不再添加
+      if (names?.includes(route.name)) {
+        // 找到已存在的路由索引并更新，不更新会造成切换用户时，一级目录未更新，homePath 在二级目录导致的404问题
+        const index = root.children?.findIndex(
+          (item) => item.name === route.name,
+        );
+        if (index !== undefined && index !== -1 && root.children) {
+          root.children[index] = route;
+        }
+      } else {
+        root.children?.push(route);
+      }
+    } else {
+      router.addRoute(route);
+    }
+  });
+
+  if (root) {
+    if (root.name) {
+      router.removeRoute(root.name);
+    }
+    router.addRoute(root);
+  }
+
+  // 生成菜单
+  const accessibleMenus = generateMenus(accessibleRoutes, options.router);
+
+  return { accessibleMenus, accessibleRoutes };
+}
+
+function findRootRoute(router: GenerateMenuAndRoutesOptions['router']) {
+  const routes = router.getRoutes();
+
+  // Route paths are not unique: an empty-path backend child can normalize to '/'.
+  const namedRoot = routes.find((item) => item.name === 'Root');
+  if (namedRoot) {
+    return namedRoot;
+  }
+
+  // Keep a path-independent fallback for applications that rename the core route.
+  const titledRoot = routes.find((item) => item.meta.title === 'Root');
+  if (titledRoot) {
+    return titledRoot;
+  }
+
+  const childNames = new Set(
+    routes.flatMap((item) => item.children?.map((child) => child.name) ?? []),
+  );
+  const topLevelLayouts = routes.filter(
+    (item) =>
+      item.children?.length &&
+      !item.aliasOf &&
+      (item.name === undefined || !childNames.has(item.name)),
+  );
+
+  return topLevelLayouts.length === 1 ? topLevelLayouts[0] : undefined;
+}
+
+/**
+ * Generate routes
+ * @param mode
+ * @param options
+ */
+async function generateRoutes(
+  mode: AccessModeType,
+  options: GenerateMenuAndRoutesOptions,
+) {
+  const { forbiddenComponent, roles, routes } = options;
+
+  let resultRoutes: RouteRecordRaw[] = routes;
+  switch (mode) {
+    case 'backend': {
+      resultRoutes = await generateRoutesByBackend(options);
+      break;
+    }
+    case 'frontend': {
+      resultRoutes = await generateRoutesByFrontend(
+        routes,
+        roles || [],
+        forbiddenComponent,
+      );
+      break;
+    }
+    case 'mixed': {
+      const [frontend_resultRoutes, backend_resultRoutes] = await Promise.all([
+        generateRoutesByFrontend(routes, roles || [], forbiddenComponent),
+        generateRoutesByBackend(options),
+      ]);
+
+      resultRoutes = [...frontend_resultRoutes, ...backend_resultRoutes];
+      break;
+    }
+  }
+
+  /**
+   * 调整路由树，做以下处理：
+   * 1. 对未添加redirect的路由添加redirect
+   * 2. 将懒加载的组件名称修改为当前路由的名称（如果启用了keep-alive的话）
+   */
+  resultRoutes = mapTree(resultRoutes, (route) => {
+    // 重新包装component，使用与路由名称相同的name以支持keep-alive的条件缓存。
+    if (
+      route.meta?.keepAlive &&
+      isFunction(route.component) &&
+      route.name &&
+      isString(route.name)
+    ) {
+      const originalComponent = route.component as () => Promise<{
+        default: Component | DefineComponent;
+      }>;
+      route.component = async () => {
+        const component = await originalComponent();
+        if (!component.default) return component;
+        return defineComponent({
+          name: route.name as string,
+          setup(props, { attrs, slots }) {
+            return () => h(component.default, { ...props, ...attrs }, slots);
+          },
+        });
+      };
+    }
+
+    // 如果有redirect或者没有子路由，则直接返回
+    if (route.redirect || !route.children || route.children.length === 0) {
+      return route;
+    }
+    const firstChild = route.children[0];
+
+    // 如果子路由不是以/开头，则直接返回,这种情况需要计算全部父级的path才能得出正确的path，这里不做处理
+    if (!firstChild?.path || !firstChild.path.startsWith('/')) {
+      return route;
+    }
+
+    route.redirect = firstChild.path;
+    return route;
+  });
+
+  return resultRoutes;
+}
+
+export { generateAccessible };
diff --git a/admin-ui/vue/packages/effects/access/src/directive.ts b/admin-ui/vue/packages/effects/access/src/directive.ts
new file mode 100644
index 0000000..35d9d51
--- /dev/null
+++ b/admin-ui/vue/packages/effects/access/src/directive.ts
@@ -0,0 +1,42 @@
+/**
+ * Global authority directive
+ * Used for fine-grained control of component permissions
+ * @Example v-access:role="[ROLE_NAME]" or v-access:role="ROLE_NAME"
+ * @Example v-access:code="[ROLE_CODE]" or v-access:code="ROLE_CODE"
+ */
+import type { App, Directive, DirectiveBinding } from 'vue';
+
+import { useAccess } from './use-access';
+
+function isAccessible(
+  el: Element,
+  binding: DirectiveBinding<string | string[]>,
+) {
+  const { accessMode, hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+  const value = binding.value;
+
+  if (!value) return;
+  const authMethod =
+    accessMode.value === 'frontend' && binding.arg === 'role'
+      ? hasAccessByRoles
+      : hasAccessByCodes;
+
+  const values = Array.isArray(value) ? value : [value];
+
+  if (!authMethod(values)) {
+    el?.remove();
+  }
+}
+
+const mounted = (el: Element, binding: DirectiveBinding<string | string[]>) => {
+  isAccessible(el, binding);
+};
+
+const authDirective: Directive = {
+  mounted,
+};
+
+export function registerAccessDirective(app: App) {
+  app.directive('access', authDirective);
+}
diff --git a/admin-ui/vue/packages/effects/access/src/index.ts b/admin-ui/vue/packages/effects/access/src/index.ts
new file mode 100644
index 0000000..392aa53
--- /dev/null
+++ b/admin-ui/vue/packages/effects/access/src/index.ts
@@ -0,0 +1,4 @@
+export { default as AccessControl } from './access-control.vue';
+export * from './accessible';
+export * from './directive';
+export * from './use-access';
diff --git a/admin-ui/vue/packages/effects/access/src/use-access.ts b/admin-ui/vue/packages/effects/access/src/use-access.ts
new file mode 100644
index 0000000..939cdbe
--- /dev/null
+++ b/admin-ui/vue/packages/effects/access/src/use-access.ts
@@ -0,0 +1,53 @@
+import { computed } from 'vue';
+
+import { preferences, updatePreferences } from '@vben/preferences';
+import { useAccessStore, useUserStore } from '@vben/stores';
+
+function useAccess() {
+  const accessStore = useAccessStore();
+  const userStore = useUserStore();
+  const accessMode = computed(() => {
+    return preferences.app.accessMode;
+  });
+
+  /**
+   * 基于角色判断是否有权限
+   * @description: Determine whether there is permission，The role is judged by the user's role
+   * @param roles
+   */
+  function hasAccessByRoles(roles: string[]) {
+    const userRoleSet = new Set(userStore.userRoles);
+    const intersection = roles.filter((item) => userRoleSet.has(item));
+    return intersection.length > 0;
+  }
+
+  /**
+   * 基于权限码判断是否有权限
+   * @description: Determine whether there is permission，The permission code is judged by the user's permission code
+   * @param codes
+   */
+  function hasAccessByCodes(codes: string[]) {
+    const userCodesSet = new Set(accessStore.accessCodes);
+
+    const intersection = codes.filter((item) => userCodesSet.has(item));
+    return intersection.length > 0;
+  }
+
+  async function toggleAccessMode() {
+    updatePreferences({
+      app: {
+        accessMode:
+          preferences.app.accessMode === 'frontend' ? 'backend' : 'frontend',
+      },
+    });
+  }
+
+  return {
+    accessMode,
+    hasAccessByCodes,
+    hasAccessByRoles,
+    toggleAccessMode,
+  };
+}
+
+export { useAccess };
diff --git a/admin-ui/vue/packages/effects/access/tsconfig.json b/admin-ui/vue/packages/effects/access/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/effects/access/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/package.json b/admin-ui/vue/packages/effects/common-ui/package.json
new file mode 100644
index 0000000..5a34a26
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@vben/common-ui",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/effects/common-ui"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./es/tippy": {
+      "types": "./src/components/tippy/index.ts",
+      "default": "./src/components/tippy/index.ts"
+    },
+    "./es/loading": {
+      "types": "./src/components/loading/index.ts",
+      "default": "./src/components/loading/index.ts"
+    }
+  },
+  "dependencies": {
+    "@vben-core/form-ui": "workspace:*",
+    "@vben-core/popup-ui": "workspace:*",
+    "@vben-core/preferences": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
+    "@vben/constants": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/icons": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "@vben/types": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "@vueuse/integrations": "catalog:",
+    "json-bigint": "catalog:",
+    "qrcode": "catalog:",
+    "tippy.js": "catalog:",
+    "vue": "catalog:",
+    "vue-json-viewer": "catalog:",
+    "vue-router": "catalog:",
+    "vue-tippy": "catalog:"
+  },
+  "devDependencies": {
+    "@types/qrcode": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/api-component/api-component.vue b/admin-ui/vue/packages/effects/common-ui/src/components/api-component/api-component.vue
new file mode 100644
index 0000000..38419a7
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/api-component/api-component.vue
@@ -0,0 +1,299 @@
+<script lang="ts" setup>
+import type { Component } from 'vue';
+
+import type { AnyPromiseFunction } from '@vben/types';
+
+import { computed, nextTick, ref, unref, useAttrs, watch } from 'vue';
+
+import { LoaderCircle } from '@vben/icons';
+
+import { cloneDeep, get, isEqual, isFunction } from '@vben-core/shared/utils';
+
+import { objectOmit } from '@vueuse/core';
+
+type OptionsItem = {
+  [name: string]: any;
+  children?: OptionsItem[];
+  disabled?: boolean;
+  label?: string;
+  value?: string;
+};
+
+interface Props {
+  /** 组件 */
+  component: Component;
+  /** 是否将value从数字转为string */
+  numberToString?: boolean;
+  /** 获取options数据的函数 */
+  api?: (arg?: any) => Promise<OptionsItem[] | Record<string, any>>;
+  /** 传递给api的参数 */
+  params?: Record<string, any>;
+  /** 从api返回的结果中提取options数组的字段名 */
+  resultField?: string;
+  /** label字段名 */
+  labelField?: string;
+  /** children字段名，需要层级数据的组件可用 */
+  childrenField?: string;
+  /** value字段名 */
+  valueField?: string;
+  /** disabled字段名 */
+  disabledField?: string;
+  /** 组件接收options数据的属性名 */
+  optionsPropName?: string;
+  /** 是否立即调用api */
+  immediate?: boolean;
+  /** 每次`visibleEvent`事件发生时都重新请求数据 */
+  alwaysLoad?: boolean;
+  /** 在api请求之前的回调函数 */
+  beforeFetch?: AnyPromiseFunction<any, any>;
+  /** 在api请求之后的回调函数 */
+  afterFetch?: AnyPromiseFunction<any, any>;
+  /** 直接传入选项数据，也作为api返回空数据时的后备数据 */
+  options?: OptionsItem[];
+  /** 组件的插槽名称，用来显示一个"加载中"的图标 */
+  loadingSlot?: string;
+  /** 触发api请求的事件名 */
+  visibleEvent?: string;
+  /** 组件的v-model属性名，默认为modelValue。部分组件可能为value */
+  modelPropName?: string;
+  /**
+   * 自动选择
+   * - `first`：自动选择第一个选项
+   * - `last`：自动选择最后一个选项
+   * - `one`: 当请求的结果只有一个选项时，自动选择该选项
+   * - 函数：自定义选择逻辑，函数的参数为请求的结果数组，返回值为选择的选项
+   * - false：不自动选择(默认)
+   */
+  autoSelect?:
+    | 'first'
+    | 'last'
+    | 'one'
+    | ((item: OptionsItem[]) => OptionsItem)
+    | false;
+}
+
+defineOptions({ name: 'ApiComponent', inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  labelField: 'label',
+  valueField: 'value',
+  disabledField: 'disabled',
+  childrenField: '',
+  optionsPropName: 'options',
+  resultField: '',
+  visibleEvent: '',
+  numberToString: false,
+  params: () => ({}),
+  immediate: true,
+  alwaysLoad: false,
+  loadingSlot: '',
+  beforeFetch: undefined,
+  afterFetch: undefined,
+  modelPropName: 'modelValue',
+  api: undefined,
+  autoSelect: false,
+  options: () => [],
+});
+
+const emit = defineEmits<{
+  optionsChange: [OptionsItem[]];
+}>();
+
+const modelValue = defineModel<any>({ default: undefined });
+
+const attrs = useAttrs();
+const innerParams = ref({});
+const refOptions = ref<OptionsItem[]>([]);
+const loading = ref(false);
+// 首次是否加载过了
+const isFirstLoaded = ref(false);
+// 标记是否有待处理的请求
+const hasPendingRequest = ref(false);
+
+const getOptions = computed(() => {
+  const {
+    labelField,
+    valueField,
+    disabledField,
+    childrenField,
+    numberToString,
+  } = props;
+
+  const refOptionsData = unref(refOptions);
+
+  function transformData(data: OptionsItem[]): OptionsItem[] {
+    return data.map((item) => {
+      const value = get(item, valueField);
+      const disabled = get(item, disabledField);
+      return {
+        ...objectOmit(item, [labelField, valueField, disabled, childrenField]),
+        label: get(item, labelField),
+        value: numberToString ? `${value}` : value,
+        disabled: get(item, disabledField),
+        ...(childrenField && item[childrenField]
+          ? { children: transformData(item[childrenField]) }
+          : {}),
+      };
+    });
+  }
+
+  const data: OptionsItem[] = transformData(refOptionsData);
+
+  return data.length > 0 ? data : props.options;
+});
+
+const bindProps = computed(() => {
+  return {
+    [props.modelPropName]: unref(modelValue),
+    [props.optionsPropName]: unref(getOptions),
+    [`onUpdate:${props.modelPropName}`]: (val: string) => {
+      modelValue.value = val;
+    },
+    ...objectOmit(attrs, [`onUpdate:${props.modelPropName}`]),
+    ...(props.visibleEvent
+      ? {
+          [props.visibleEvent]: handleFetchForVisible,
+        }
+      : {}),
+  };
+});
+
+async function fetchApi() {
+  const { api, beforeFetch, afterFetch, resultField } = props;
+
+  if (!api || !isFunction(api)) {
+    return;
+  }
+
+  // 如果正在加载，标记有待处理的请求并返回
+  if (loading.value) {
+    hasPendingRequest.value = true;
+    return;
+  }
+
+  refOptions.value = [];
+  try {
+    loading.value = true;
+    let finalParams = unref(mergedParams);
+    if (beforeFetch && isFunction(beforeFetch)) {
+      finalParams = (await beforeFetch(cloneDeep(finalParams))) || finalParams;
+    }
+    let res = await api(finalParams);
+    if (afterFetch && isFunction(afterFetch)) {
+      res = (await afterFetch(res)) || res;
+    }
+    isFirstLoaded.value = true;
+    if (Array.isArray(res)) {
+      refOptions.value = res;
+      emitChange();
+      return;
+    }
+    if (resultField) {
+      refOptions.value = get(res, resultField) || [];
+    }
+    emitChange();
+  } catch (error) {
+    console.warn(error);
+    // reset status
+    isFirstLoaded.value = false;
+  } finally {
+    loading.value = false;
+    // 如果有待处理的请求，立即触发新的请求
+    if (hasPendingRequest.value) {
+      hasPendingRequest.value = false;
+      // 使用 nextTick 确保状态更新完成后再触发新请求
+      await nextTick();
+      fetchApi();
+    }
+  }
+}
+
+async function handleFetchForVisible(visible: boolean) {
+  if (visible) {
+    if (props.alwaysLoad) {
+      await fetchApi();
+    } else if (!props.immediate && !unref(isFirstLoaded)) {
+      await fetchApi();
+    }
+  }
+}
+
+const mergedParams = computed(() => {
+  return {
+    ...props.params,
+    ...unref(innerParams),
+  };
+});
+
+watch(
+  mergedParams,
+  (value, oldValue) => {
+    if (isEqual(value, oldValue)) {
+      return;
+    }
+    fetchApi();
+  },
+  { deep: true, immediate: props.immediate },
+);
+
+function emitChange() {
+  if (
+    modelValue.value === undefined &&
+    props.autoSelect &&
+    unref(getOptions).length > 0
+  ) {
+    let firstOption;
+    if (isFunction(props.autoSelect)) {
+      firstOption = props.autoSelect(unref(getOptions));
+    } else {
+      switch (props.autoSelect) {
+        case 'first': {
+          firstOption = unref(getOptions)[0];
+          break;
+        }
+        case 'last': {
+          firstOption = unref(getOptions)[unref(getOptions).length - 1];
+          break;
+        }
+        case 'one': {
+          if (unref(getOptions).length === 1) {
+            firstOption = unref(getOptions)[0];
+          }
+          break;
+        }
+      }
+    }
+
+    if (firstOption) modelValue.value = firstOption.value;
+  }
+  emit('optionsChange', unref(getOptions));
+}
+const componentRef = ref();
+defineExpose({
+  /** 获取options数据 */
+  getOptions: () => unref(getOptions),
+  /** 获取当前值 */
+  getValue: () => unref(modelValue),
+  /** 获取被包装的组件实例 */
+  getComponentRef: <T = any,>() => componentRef.value as T,
+  /** 更新Api参数 */
+  updateParam(newParams: Record<string, any>) {
+    innerParams.value = newParams;
+  },
+});
+</script>
+<template>
+  <component
+    :is="component"
+    v-bind="bindProps"
+    :placeholder="$attrs.placeholder"
+    ref="componentRef"
+  >
+    <template v-for="item in Object.keys($slots)" #[item]="data">
+      <slot :name="item" v-bind="data || {}"></slot>
+    </template>
+    <template v-if="loadingSlot && loading" #[loadingSlot]>
+      <LoaderCircle class="animate-spin" />
+    </template>
+  </component>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/api-component/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/api-component/index.ts
new file mode 100644
index 0000000..9815763
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/api-component/index.ts
@@ -0,0 +1 @@
+export { default as ApiComponent } from './api-component.vue';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts
new file mode 100644
index 0000000..a3f61fd
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts
@@ -0,0 +1,19 @@
+import type { CaptchaPoint } from '../types';
+
+import { reactive } from 'vue';
+
+export function useCaptchaPoints() {
+  const points = reactive<CaptchaPoint[]>([]);
+  function addPoint(point: CaptchaPoint) {
+    points.push(point);
+  }
+
+  function clearPoints() {
+    points.splice(0);
+  }
+  return {
+    addPoint,
+    clearPoints,
+    points,
+  };
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/image-captcha/index.vue b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/image-captcha/index.vue
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/image-captcha/index.vue
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/index.ts
new file mode 100644
index 0000000..13634cd
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/index.ts
@@ -0,0 +1,7 @@
+export { default as PointSelectionCaptcha } from './point-selection-captcha/index.vue';
+export { default as PointSelectionCaptchaCard } from './point-selection-captcha/index.vue';
+
+export { default as SliderCaptcha } from './slider-captcha/index.vue';
+export { default as SliderRotateCaptcha } from './slider-rotate-captcha/index.vue';
+export { default as SliderTranslateCaptcha } from './slider-translate-captcha/index.vue';
+export type * from './types';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue
new file mode 100644
index 0000000..ece28d0
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { CaptchaPoint, PointSelectionCaptchaProps } from '../types';
+
+import { RotateCw } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { VbenButton, VbenIconButton } from '@vben-core/shadcn-ui';
+
+import { useCaptchaPoints } from '../hooks/useCaptchaPoints';
+import CaptchaCard from './point-selection-captcha-card.vue';
+
+const props = withDefaults(defineProps<PointSelectionCaptchaProps>(), {
+  height: '220px',
+  hintImage: '',
+  hintText: '',
+  paddingX: '12px',
+  paddingY: '16px',
+  showConfirm: false,
+  title: '',
+  width: '300px',
+});
+const emit = defineEmits<{
+  click: [CaptchaPoint];
+  confirm: [Array<CaptchaPoint>, clear: () => void];
+  refresh: [];
+}>();
+const { addPoint, clearPoints, points } = useCaptchaPoints();
+
+if (!props.hintImage && !props.hintText) {
+  console.warn('At least one of hint image or hint text must be provided');
+}
+
+const POINT_OFFSET = 11;
+
+function getElementPosition(element: HTMLElement) {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: rect.left + window.scrollX,
+    y: rect.top + window.scrollY,
+  };
+}
+
+function handleClick(e: MouseEvent) {
+  try {
+    const dom = e.currentTarget as HTMLElement;
+    if (!dom) throw new Error('Element not found');
+
+    const { x: domX, y: domY } = getElementPosition(dom);
+
+    const mouseX = e.clientX + window.scrollX;
+    const mouseY = e.clientY + window.scrollY;
+
+    if (typeof mouseX !== 'number' || typeof mouseY !== 'number') {
+      throw new TypeError('Mouse coordinates not found');
+    }
+
+    const xPos = mouseX - domX;
+    const yPos = mouseY - domY;
+
+    const rect = dom.getBoundingClientRect();
+
+    // 点击位置边界校验
+    if (xPos < 0 || yPos < 0 || xPos > rect.width || yPos > rect.height) {
+      console.warn('Click position is out of the valid range');
+      return;
+    }
+
+    const x = Math.ceil(xPos);
+    const y = Math.ceil(yPos);
+
+    const point = {
+      i: points.length,
+      t: Date.now(),
+      x,
+      y,
+    };
+
+    addPoint(point);
+
+    emit('click', point);
+    e.stopPropagation();
+    e.preventDefault();
+  } catch (error) {
+    console.error('Error in handleClick:', error);
+  }
+}
+
+function clear() {
+  try {
+    clearPoints();
+  } catch (error) {
+    console.error('Error in clear:', error);
+  }
+}
+
+function handleRefresh() {
+  try {
+    clear();
+    emit('refresh');
+  } catch (error) {
+    console.error('Error in handleRefresh:', error);
+  }
+}
+
+function handleConfirm() {
+  if (!props.showConfirm) return;
+  try {
+    emit('confirm', points, clear);
+  } catch (error) {
+    console.error('Error in handleConfirm:', error);
+  }
+}
+</script>
+<template>
+  <CaptchaCard
+    :captcha-image="captchaImage"
+    :height="height"
+    :padding-x="paddingX"
+    :padding-y="paddingY"
+    :title="title"
+    :width="width"
+    @click="handleClick"
+  >
+    <template #title>
+      <slot name="title">{{ $t('ui.captcha.title') }}</slot>
+    </template>
+
+    <template #extra>
+      <VbenIconButton
+        :aria-label="$t('ui.captcha.refreshAriaLabel')"
+        class="ml-1"
+        @click="handleRefresh"
+      >
+        <RotateCw class="size-5" />
+      </VbenIconButton>
+      <VbenButton
+        v-if="showConfirm"
+        :aria-label="$t('ui.captcha.confirmAriaLabel')"
+        class="ml-2"
+        size="sm"
+        @click="handleConfirm"
+      >
+        {{ $t('ui.captcha.confirm') }}
+      </VbenButton>
+    </template>
+
+    <div
+      v-for="(point, index) in points"
+      :key="index"
+      :aria-label="$t('ui.captcha.pointAriaLabel') + (index + 1)"
+      :style="{
+        top: `${point.y - POINT_OFFSET}px`,
+        left: `${point.x - POINT_OFFSET}px`,
+      }"
+      class="bg-primary text-primary-50 border-primary-50 absolute z-20 flex h-5 w-5 cursor-default items-center justify-center rounded-full border-2"
+      role="button"
+      tabindex="0"
+    >
+      {{ index + 1 }}
+    </div>
+    <template #footer>
+      <img
+        v-if="hintImage"
+        :alt="$t('ui.captcha.alt')"
+        :src="hintImage"
+        class="border-border h-10 w-full rounded border"
+      />
+      <div
+        v-else-if="hintText"
+        class="border-border flex-center h-10 w-full rounded border"
+      >
+        {{ `${$t('ui.captcha.clickInOrder')}` + `【${hintText}】` }}
+      </div>
+    </template>
+  </CaptchaCard>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue
new file mode 100644
index 0000000..dcb8039
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { PointSelectionCaptchaCardProps } from '../types';
+
+import { computed } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@vben-core/shadcn-ui';
+
+const props = withDefaults(defineProps<PointSelectionCaptchaCardProps>(), {
+  height: '220px',
+  paddingX: '12px',
+  paddingY: '16px',
+  title: '',
+  width: '300px',
+});
+
+const emit = defineEmits<{
+  click: [MouseEvent];
+}>();
+
+const parseValue = (value: number | string) => {
+  if (typeof value === 'number') {
+    return value;
+  }
+  const parsed = Number.parseFloat(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+
+const rootStyles = computed(() => ({
+  padding: `${parseValue(props.paddingY)}px ${parseValue(props.paddingX)}px`,
+  width: `${parseValue(props.width) + parseValue(props.paddingX) * 2}px`,
+}));
+
+const captchaStyles = computed(() => {
+  return {
+    height: `${parseValue(props.height)}px`,
+    width: `${parseValue(props.width)}px`,
+  };
+});
+
+function handleClick(e: MouseEvent) {
+  emit('click', e);
+}
+</script>
+<template>
+  <Card :style="rootStyles" aria-labelledby="captcha-title" role="region">
+    <CardHeader class="p-0">
+      <CardTitle id="captcha-title" class="flex items-center justify-between">
+        <template v-if="$slots.title">
+          <slot name="title">{{ $t('ui.captcha.title') }}</slot>
+        </template>
+        <template v-else>
+          <span>{{ title }}</span>
+        </template>
+        <div class="flex items-center justify-end">
+          <slot name="extra"></slot>
+        </div>
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="relative mt-2 flex w-full overflow-hidden rounded p-0">
+      <img
+        v-show="captchaImage"
+        :alt="$t('ui.captcha.alt')"
+        :src="captchaImage"
+        :style="captchaStyles"
+        class="relative z-10"
+        @click="handleClick"
+      />
+      <div class="absolute inset-0">
+        <slot></slot>
+      </div>
+    </CardContent>
+    <CardFooter class="mt-2 flex justify-between p-0">
+      <slot name="footer"></slot>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue
new file mode 100644
index 0000000..cad3cdd
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue
@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import type {
+  CaptchaVerifyPassingData,
+  SliderCaptchaProps,
+  SliderRotateVerifyPassingData,
+} from '../types';
+
+import { reactive, unref, useTemplateRef, watch, watchEffect } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { cn } from '@vben-core/shared/utils';
+
+import { useTimeoutFn } from '@vueuse/core';
+
+import SliderCaptchaAction from './slider-captcha-action.vue';
+import SliderCaptchaBar from './slider-captcha-bar.vue';
+import SliderCaptchaContent from './slider-captcha-content.vue';
+
+const props = withDefaults(defineProps<SliderCaptchaProps>(), {
+  actionStyle: () => ({}),
+  barStyle: () => ({}),
+  contentStyle: () => ({}),
+  isSlot: false,
+  successText: '',
+  text: '',
+  wrapperStyle: () => ({}),
+});
+
+const emit = defineEmits<{
+  end: [MouseEvent | TouchEvent];
+  move: [SliderRotateVerifyPassingData];
+  start: [MouseEvent | TouchEvent];
+  success: [CaptchaVerifyPassingData];
+}>();
+
+const modelValue = defineModel<boolean>({ default: false });
+
+const state = reactive({
+  endTime: 0,
+  isMoving: false,
+  isPassing: false,
+  moveDistance: 0,
+  startTime: 0,
+  toLeft: false,
+});
+
+defineExpose({
+  resume,
+});
+
+const wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');
+const barRef = useTemplateRef<typeof SliderCaptchaBar>('barRef');
+const contentRef = useTemplateRef<typeof SliderCaptchaContent>('contentRef');
+const actionRef = useTemplateRef<typeof SliderCaptchaAction>('actionRef');
+
+watch(
+  () => state.isPassing,
+  (isPassing) => {
+    if (isPassing) {
+      const { endTime, startTime } = state;
+      const time = (endTime - startTime) / 1000;
+      emit('success', { isPassing, time: time.toFixed(1) });
+      modelValue.value = isPassing;
+    }
+  },
+);
+
+watchEffect(() => {
+  state.isPassing = !!modelValue.value;
+});
+
+function getEventPageX(e: MouseEvent | TouchEvent): number {
+  if ('pageX' in e) {
+    return e.pageX;
+  } else if ('touches' in e && e.touches[0]) {
+    return e.touches[0].pageX;
+  }
+  return 0;
+}
+
+function handleDragStart(e: MouseEvent | TouchEvent) {
+  if (state.isPassing) {
+    return;
+  }
+  if (!actionRef.value) return;
+  emit('start', e);
+
+  state.moveDistance =
+    getEventPageX(e) -
+    Number.parseInt(
+      actionRef.value.getStyle().left.replace('px', '') || '0',
+      10,
+    );
+  state.startTime = Date.now();
+  state.isMoving = true;
+}
+
+function getOffset(actionEl: HTMLDivElement) {
+  const wrapperWidth = wrapperRef.value?.offsetWidth ?? 220;
+  const actionWidth = actionEl?.offsetWidth ?? 40;
+  const offset = wrapperWidth - actionWidth - 6;
+  return { actionWidth, offset, wrapperWidth };
+}
+
+function handleDragMoving(e: MouseEvent | TouchEvent) {
+  const { isMoving, moveDistance } = state;
+  if (isMoving) {
+    const actionEl = unref(actionRef);
+    const barEl = unref(barRef);
+    if (!actionEl || !barEl) return;
+    const { actionWidth, offset, wrapperWidth } = getOffset(actionEl.getEl());
+    const moveX = getEventPageX(e) - moveDistance;
+
+    emit('move', {
+      event: e,
+      moveDistance,
+      moveX,
+    });
+    if (moveX > 0 && moveX <= offset) {
+      actionEl.setLeft(`${moveX}px`);
+      barEl.setWidth(`${moveX + actionWidth / 2}px`);
+    } else if (moveX > offset) {
+      actionEl.setLeft(`${wrapperWidth - actionWidth}px`);
+      barEl.setWidth(`${wrapperWidth - actionWidth / 2}px`);
+      if (!props.isSlot) {
+        checkPass();
+      }
+    }
+  }
+}
+
+function handleDragOver(e: MouseEvent | TouchEvent) {
+  const { isMoving, isPassing, moveDistance } = state;
+  if (isMoving && !isPassing) {
+    emit('end', e);
+    const actionEl = actionRef.value;
+    const barEl = unref(barRef);
+    if (!actionEl || !barEl) return;
+    const moveX = getEventPageX(e) - moveDistance;
+    const { actionWidth, offset, wrapperWidth } = getOffset(actionEl.getEl());
+    if (moveX < offset) {
+      if (props.isSlot) {
+        setTimeout(() => {
+          if (modelValue.value) {
+            const contentEl = unref(contentRef);
+            if (contentEl) {
+              contentEl.getEl().style.width = `${Number.parseInt(barEl.getEl().style.width)}px`;
+            }
+          } else {
+            resume();
+          }
+        }, 0);
+      } else {
+        resume();
+      }
+    } else {
+      actionEl.setLeft(`${wrapperWidth - actionWidth}px`);
+      barEl.setWidth(`${wrapperWidth - actionWidth / 2}px`);
+      checkPass();
+    }
+    state.isMoving = false;
+  }
+}
+
+function checkPass() {
+  if (props.isSlot) {
+    resume();
+    return;
+  }
+  state.endTime = Date.now();
+  state.isPassing = true;
+  state.isMoving = false;
+}
+
+function resume() {
+  state.isMoving = false;
+  state.isPassing = false;
+  state.moveDistance = 0;
+  state.toLeft = false;
+  state.startTime = 0;
+  state.endTime = 0;
+  const actionEl = unref(actionRef);
+  const barEl = unref(barRef);
+  const contentEl = unref(contentRef);
+  if (!actionEl || !barEl || !contentEl) return;
+
+  contentEl.getEl().style.width = '100%';
+  state.toLeft = true;
+  useTimeoutFn(() => {
+    state.toLeft = false;
+    actionEl.setLeft('0');
+    barEl.setWidth('0');
+  }, 300);
+}
+</script>
+
+<template>
+  <div
+    ref="wrapperRef"
+    :class="
+      cn(
+        'border-border bg-background-deep relative flex h-10 w-full items-center overflow-hidden rounded-md border text-center',
+        props.class,
+      )
+    "
+    :style="wrapperStyle"
+    @mouseleave="handleDragOver"
+    @mousemove="handleDragMoving"
+    @mouseup="handleDragOver"
+    @touchend="handleDragOver"
+    @touchmove="handleDragMoving"
+  >
+    <SliderCaptchaBar
+      ref="barRef"
+      :bar-style="barStyle"
+      :to-left="state.toLeft"
+    />
+    <SliderCaptchaContent
+      ref="contentRef"
+      :content-style="contentStyle"
+      :is-passing="state.isPassing"
+      :success-text="successText || $t('ui.captcha.sliderSuccessText')"
+      :text="text || $t('ui.captcha.sliderDefaultText')"
+    >
+      <template v-if="$slots.text" #text>
+        <slot :is-passing="state.isPassing" name="text"></slot>
+      </template>
+    </SliderCaptchaContent>
+
+    <SliderCaptchaAction
+      ref="actionRef"
+      :action-style="actionStyle"
+      :is-passing="state.isPassing"
+      :to-left="state.toLeft"
+      @mousedown="handleDragStart"
+      @touchstart="handleDragStart"
+    >
+      <template v-if="$slots.actionIcon" #icon>
+        <slot :is-passing="state.isPassing" name="actionIcon"></slot>
+      </template>
+    </SliderCaptchaAction>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue
new file mode 100644
index 0000000..7f97bdc
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed, ref, useTemplateRef } from 'vue';
+
+import { Check, ChevronsRight } from '@vben/icons';
+
+import { Slot } from '@vben-core/shadcn-ui';
+
+const props = defineProps<{
+  actionStyle: CSSProperties;
+  isPassing: boolean;
+  toLeft: boolean;
+}>();
+
+const actionRef = useTemplateRef<HTMLDivElement>('actionRef');
+
+const left = ref('0');
+
+const style = computed(() => {
+  const { actionStyle } = props;
+  return {
+    ...actionStyle,
+    left: left.value,
+  };
+});
+
+const isDragging = computed(() => {
+  const currentLeft = Number.parseInt(left.value as string);
+
+  return currentLeft > 10 && !props.isPassing;
+});
+
+defineExpose({
+  getEl: () => {
+    return actionRef.value;
+  },
+  getStyle: () => {
+    return actionRef?.value?.style;
+  },
+  setLeft: (val: string) => {
+    left.value = val;
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="actionRef"
+    :class="{
+      'transition-width !left-0 duration-300': toLeft,
+      'rounded-md': isDragging,
+    }"
+    :style="style"
+    class="bg-background dark:bg-accent absolute left-0 top-0 flex h-full cursor-move items-center justify-center px-3.5 shadow-md"
+    name="captcha-action"
+  >
+    <Slot :is-passing="isPassing" class="text-foreground/60 size-4">
+      <slot name="icon">
+        <ChevronsRight v-if="!isPassing" />
+        <Check v-else />
+      </slot>
+    </Slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue
new file mode 100644
index 0000000..0884ccb
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed, ref, useTemplateRef } from 'vue';
+
+const props = defineProps<{
+  barStyle: CSSProperties;
+  toLeft: boolean;
+}>();
+
+const barRef = useTemplateRef<HTMLDivElement>('barRef');
+
+const width = ref('0');
+
+const style = computed(() => {
+  const { barStyle } = props;
+  return {
+    ...barStyle,
+    width: width.value,
+  };
+});
+
+defineExpose({
+  getEl: () => {
+    return barRef.value;
+  },
+  setWidth: (val: string) => {
+    width.value = val;
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="barRef"
+    :class="toLeft && 'transition-width !w-0 duration-300'"
+    :style="style"
+    class="bg-success absolute h-full"
+  ></div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue
new file mode 100644
index 0000000..0e79f7b
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import { computed, useTemplateRef } from 'vue';
+
+import { VbenSpineText } from '@vben-core/shadcn-ui';
+
+const props = defineProps<{
+  contentStyle: CSSProperties;
+  isPassing: boolean;
+  successText: string;
+  text: string;
+}>();
+
+const contentRef = useTemplateRef<HTMLDivElement>('contentRef');
+
+const style = computed(() => {
+  const { contentStyle } = props;
+
+  return {
+    ...contentStyle,
+  };
+});
+
+defineExpose({
+  getEl: () => {
+    return contentRef.value;
+  },
+});
+</script>
+
+<template>
+  <div
+    ref="contentRef"
+    :class="{
+      [$style.success]: isPassing,
+    }"
+    :style="style"
+    class="absolute top-0 flex size-full select-none items-center justify-center text-xs"
+  >
+    <slot name="text">
+      <VbenSpineText class="flex h-full items-center">
+        {{ isPassing ? successText : text }}
+      </VbenSpineText>
+    </slot>
+  </div>
+</template>
+
+<style module>
+.success {
+  -webkit-text-fill-color: hsl(0deg 0% 98%);
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue
new file mode 100644
index 0000000..8894589
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import type {
+  CaptchaVerifyPassingData,
+  SliderCaptchaActionType,
+  SliderRotateCaptchaProps,
+  SliderRotateVerifyPassingData,
+} from '../types';
+
+import { computed, reactive, unref, useTemplateRef, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { useTimeoutFn } from '@vueuse/core';
+
+import SliderCaptcha from '../slider-captcha/index.vue';
+
+const props = withDefaults(defineProps<SliderRotateCaptchaProps>(), {
+  defaultTip: '',
+  diffDegree: 20,
+  imageSize: 260,
+  maxDegree: 300,
+  minDegree: 120,
+  src: '',
+});
+
+const emit = defineEmits<{
+  success: [CaptchaVerifyPassingData];
+}>();
+
+const slideBarRef = useTemplateRef<SliderCaptchaActionType>('slideBarRef');
+
+const state = reactive({
+  currentRotate: 0,
+  dragging: false,
+  endTime: 0,
+  imgStyle: {},
+  isPassing: false,
+  randomRotate: 0,
+  showTip: false,
+  startTime: 0,
+  toOrigin: false,
+});
+
+const modalValue = defineModel<boolean>({ default: false });
+
+watch(
+  () => state.isPassing,
+  (isPassing) => {
+    if (isPassing) {
+      const { endTime, startTime } = state;
+      const time = (endTime - startTime) / 1000;
+      emit('success', { isPassing, time: time.toFixed(1) });
+    }
+    modalValue.value = isPassing;
+  },
+);
+
+const getImgWrapStyleRef = computed(() => {
+  const { imageSize, imageWrapperStyle } = props;
+  return {
+    height: `${imageSize}px`,
+    width: `${imageSize}px`,
+    ...imageWrapperStyle,
+  };
+});
+
+const getFactorRef = computed(() => {
+  const { maxDegree, minDegree } = props;
+  if (minDegree > maxDegree) {
+    console.warn('minDegree should not be greater than maxDegree');
+  }
+
+  if (minDegree === maxDegree) {
+    return Math.floor(1 + Math.random() * 1) / 10 + 1;
+  }
+  return 1;
+});
+
+function handleStart() {
+  state.startTime = Date.now();
+}
+
+function handleDragBarMove(data: SliderRotateVerifyPassingData) {
+  state.dragging = true;
+  const { imageSize, maxDegree } = props;
+  const { moveX } = data;
+  const denominator = imageSize!;
+  if (denominator === 0) {
+    return;
+  }
+  const currentRotate = Math.ceil(
+    (moveX / denominator) * 1.5 * maxDegree! * unref(getFactorRef),
+  );
+  state.currentRotate = currentRotate;
+  setImgRotate(state.randomRotate - currentRotate);
+}
+
+function handleImgOnLoad() {
+  const { maxDegree, minDegree } = props;
+  const ranRotate = Math.floor(
+    minDegree! + Math.random() * (maxDegree! - minDegree!),
+  ); // 生成随机角度
+  state.randomRotate = ranRotate;
+  setImgRotate(ranRotate);
+}
+
+function handleDragEnd() {
+  const { currentRotate, randomRotate } = state;
+  const { diffDegree } = props;
+
+  if (Math.abs(randomRotate - currentRotate) >= (diffDegree || 20)) {
+    setImgRotate(randomRotate);
+    state.toOrigin = true;
+    useTimeoutFn(() => {
+      state.toOrigin = false;
+      state.showTip = true;
+      //  时间与动画时间保持一致
+    }, 300);
+  } else {
+    checkPass();
+  }
+  state.showTip = true;
+  state.dragging = false;
+}
+
+function setImgRotate(deg: number) {
+  state.imgStyle = {
+    transform: `rotateZ(${deg}deg)`,
+  };
+}
+
+function checkPass() {
+  state.isPassing = true;
+  state.endTime = Date.now();
+}
+
+function resume() {
+  state.showTip = false;
+  const basicEl = unref(slideBarRef);
+  if (!basicEl) {
+    return;
+  }
+  state.isPassing = false;
+
+  basicEl.resume();
+  handleImgOnLoad();
+}
+
+const imgCls = computed(() => {
+  return state.toOrigin ? ['transition-transform duration-300'] : [];
+});
+
+const verifyTip = computed(() => {
+  return state.isPassing
+    ? $t('ui.captcha.sliderRotateSuccessTip', [
+        ((state.endTime - state.startTime) / 1000).toFixed(1),
+      ])
+    : $t('ui.captcha.sliderRotateFailTip');
+});
+
+defineExpose({
+  resume,
+});
+</script>
+
+<template>
+  <div class="relative flex flex-col items-center">
+    <div
+      :style="getImgWrapStyleRef"
+      class="border-border relative cursor-pointer overflow-hidden rounded-full border shadow-md"
+    >
+      <img
+        :class="imgCls"
+        :src="src"
+        :style="state.imgStyle"
+        alt="verify"
+        class="w-full rounded-full"
+        @click="resume"
+        @load="handleImgOnLoad"
+      />
+      <div
+        class="absolute bottom-3 left-0 z-10 block h-7 w-full text-center text-xs leading-[30px] text-white"
+      >
+        <div
+          v-if="state.showTip"
+          :class="{
+            'bg-success/80': state.isPassing,
+            'bg-destructive/80': !state.isPassing,
+          }"
+        >
+          {{ verifyTip }}
+        </div>
+        <div v-if="!state.dragging" class="bg-black/30">
+          {{ defaultTip || $t('ui.captcha.sliderRotateDefaultTip') }}
+        </div>
+      </div>
+    </div>
+
+    <SliderCaptcha
+      ref="slideBarRef"
+      v-model="modalValue"
+      class="mt-5"
+      is-slot
+      @end="handleDragEnd"
+      @move="handleDragBarMove"
+      @start="handleStart"
+    >
+      <template v-for="(_, key) in $slots" :key="key" #[key]="slotProps">
+        <slot :name="key" v-bind="slotProps"></slot>
+      </template>
+    </SliderCaptcha>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue
new file mode 100644
index 0000000..81b7342
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue
@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import type {
+  CaptchaVerifyPassingData,
+  SliderCaptchaActionType,
+  SliderRotateVerifyPassingData,
+  SliderTranslateCaptchaProps,
+} from '../types';
+
+import {
+  computed,
+  onMounted,
+  reactive,
+  ref,
+  unref,
+  useTemplateRef,
+  watch,
+} from 'vue';
+
+import { $t } from '@vben/locales';
+
+import SliderCaptcha from '../slider-captcha/index.vue';
+
+const props = withDefaults(defineProps<SliderTranslateCaptchaProps>(), {
+  defaultTip: '',
+  canvasWidth: 420,
+  canvasHeight: 280,
+  squareLength: 42,
+  circleRadius: 10,
+  src: '',
+  diffDistance: 3,
+});
+
+const emit = defineEmits<{
+  success: [CaptchaVerifyPassingData];
+}>();
+
+const PI: number = Math.PI;
+enum CanvasOpr {
+  // eslint-disable-next-line no-unused-vars
+  Clip = 'clip',
+  // eslint-disable-next-line no-unused-vars
+  Fill = 'fill',
+}
+
+const modalValue = defineModel<boolean>({ default: false });
+
+const slideBarRef = useTemplateRef<SliderCaptchaActionType>('slideBarRef');
+const puzzleCanvasRef = useTemplateRef<HTMLCanvasElement>('puzzleCanvasRef');
+const pieceCanvasRef = useTemplateRef<HTMLCanvasElement>('pieceCanvasRef');
+
+const state = reactive({
+  dragging: false,
+  startTime: 0,
+  endTime: 0,
+  pieceX: 0,
+  pieceY: 0,
+  moveDistance: 0,
+  isPassing: false,
+  showTip: false,
+});
+
+const left = ref('0');
+
+const pieceStyle = computed(() => {
+  return {
+    left: left.value,
+  };
+});
+
+function setLeft(val: string) {
+  left.value = val;
+}
+
+const verifyTip = computed(() => {
+  return state.isPassing
+    ? $t('ui.captcha.sliderTranslateSuccessTip', [
+        ((state.endTime - state.startTime) / 1000).toFixed(1),
+      ])
+    : $t('ui.captcha.sliderTranslateFailTip');
+});
+function handleStart() {
+  state.startTime = Date.now();
+}
+
+function handleDragBarMove(data: SliderRotateVerifyPassingData) {
+  state.dragging = true;
+  const { moveX } = data;
+  state.moveDistance = moveX;
+  setLeft(`${moveX}px`);
+}
+
+function handleDragEnd() {
+  const { pieceX } = state;
+  const { diffDistance } = props;
+
+  if (Math.abs(pieceX - state.moveDistance) >= (diffDistance || 3)) {
+    setLeft('0');
+    state.moveDistance = 0;
+  } else {
+    checkPass();
+  }
+  state.showTip = true;
+  state.dragging = false;
+}
+
+function checkPass() {
+  state.isPassing = true;
+  state.endTime = Date.now();
+}
+
+watch(
+  () => state.isPassing,
+  (isPassing) => {
+    if (isPassing) {
+      const { endTime, startTime } = state;
+      const time = (endTime - startTime) / 1000;
+      emit('success', { isPassing, time: time.toFixed(1) });
+    }
+    modalValue.value = isPassing;
+  },
+);
+
+function resetCanvas() {
+  const { canvasWidth, canvasHeight } = props;
+  const puzzleCanvas = unref(puzzleCanvasRef);
+  const pieceCanvas = unref(pieceCanvasRef);
+  if (!puzzleCanvas || !pieceCanvas) return;
+  pieceCanvas.width = canvasWidth;
+  const puzzleCanvasCtx = puzzleCanvas.getContext('2d');
+  // Canvas2D: Multiple readback operations using getImageData
+  // are faster with the willReadFrequently attribute set to true.
+  // See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently (anonymous)
+  const pieceCanvasCtx = pieceCanvas.getContext('2d', {
+    willReadFrequently: true,
+  });
+  if (!puzzleCanvasCtx || !pieceCanvasCtx) return;
+  puzzleCanvasCtx.clearRect(0, 0, canvasWidth, canvasHeight);
+  pieceCanvasCtx.clearRect(0, 0, canvasWidth, canvasHeight);
+}
+
+function initCanvas() {
+  const { canvasWidth, canvasHeight, squareLength, circleRadius, src } = props;
+  const puzzleCanvas = unref(puzzleCanvasRef);
+  const pieceCanvas = unref(pieceCanvasRef);
+  if (!puzzleCanvas || !pieceCanvas) return;
+  const puzzleCanvasCtx = puzzleCanvas.getContext('2d');
+  // Canvas2D: Multiple readback operations using getImageData
+  // are faster with the willReadFrequently attribute set to true.
+  // See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently (anonymous)
+  const pieceCanvasCtx = pieceCanvas.getContext('2d', {
+    willReadFrequently: true,
+  });
+  if (!puzzleCanvasCtx || !pieceCanvasCtx) return;
+  const img = new Image();
+  // 解决跨域
+  img.crossOrigin = 'Anonymous';
+  img.src = src;
+  img.addEventListener('load', () => {
+    draw(puzzleCanvasCtx, pieceCanvasCtx);
+    puzzleCanvasCtx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
+    pieceCanvasCtx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
+    const pieceLength = squareLength + 2 * circleRadius + 3;
+    const sx = state.pieceX;
+    const sy = state.pieceY - 2 * circleRadius - 1;
+    const imageData = pieceCanvasCtx.getImageData(
+      sx,
+      sy,
+      pieceLength,
+      pieceLength,
+    );
+    pieceCanvas.width = pieceLength;
+    pieceCanvasCtx.putImageData(imageData, 0, sy);
+    setLeft('0');
+  });
+}
+
+function getRandomNumberByRange(start: number, end: number) {
+  return Math.round(Math.random() * (end - start) + start);
+}
+
+// 绘制拼图
+function draw(ctx1: CanvasRenderingContext2D, ctx2: CanvasRenderingContext2D) {
+  const { canvasWidth, canvasHeight, squareLength, circleRadius } = props;
+  state.pieceX = getRandomNumberByRange(
+    squareLength + 2 * circleRadius,
+    canvasWidth - (squareLength + 2 * circleRadius),
+  );
+  state.pieceY = getRandomNumberByRange(
+    3 * circleRadius,
+    canvasHeight - (squareLength + 2 * circleRadius),
+  );
+  drawPiece(ctx1, state.pieceX, state.pieceY, CanvasOpr.Fill);
+  drawPiece(ctx2, state.pieceX, state.pieceY, CanvasOpr.Clip);
+}
+
+// 绘制拼图切块
+function drawPiece(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  opr: CanvasOpr,
+) {
+  const { squareLength, circleRadius } = props;
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.arc(
+    x + squareLength / 2,
+    y - circleRadius + 2,
+    circleRadius,
+    0.72 * PI,
+    2.26 * PI,
+  );
+  ctx.lineTo(x + squareLength, y);
+  ctx.arc(
+    x + squareLength + circleRadius - 2,
+    y + squareLength / 2,
+    circleRadius,
+    1.21 * PI,
+    2.78 * PI,
+  );
+  ctx.lineTo(x + squareLength, y + squareLength);
+  ctx.lineTo(x, y + squareLength);
+  ctx.arc(
+    x + circleRadius - 2,
+    y + squareLength / 2,
+    circleRadius + 0.4,
+    2.76 * PI,
+    1.24 * PI,
+    true,
+  );
+  ctx.lineTo(x, y);
+  ctx.lineWidth = 2;
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
+  ctx.stroke();
+  opr === CanvasOpr.Clip ? ctx.clip() : ctx.fill();
+  ctx.globalCompositeOperation = 'destination-over';
+}
+
+function resume() {
+  state.showTip = false;
+  const basicEl = unref(slideBarRef);
+  if (!basicEl) {
+    return;
+  }
+  state.dragging = false;
+  state.isPassing = false;
+  state.pieceX = 0;
+  state.pieceY = 0;
+
+  basicEl.resume();
+  resetCanvas();
+  initCanvas();
+}
+
+onMounted(() => {
+  initCanvas();
+});
+</script>
+
+<template>
+  <div class="relative flex flex-col items-center">
+    <div
+      class="border-border relative flex cursor-pointer overflow-hidden border shadow-md"
+    >
+      <canvas
+        ref="puzzleCanvasRef"
+        :width="canvasWidth"
+        :height="canvasHeight"
+        @click="resume"
+      ></canvas>
+      <canvas
+        ref="pieceCanvasRef"
+        :width="canvasWidth"
+        :height="canvasHeight"
+        :style="pieceStyle"
+        class="absolute"
+        @click="resume"
+      ></canvas>
+      <div
+        class="h-15 absolute bottom-3 left-0 z-10 block w-full text-center text-xs leading-[30px] text-white"
+      >
+        <div
+          v-if="state.showTip"
+          :class="{
+            'bg-success/80': state.isPassing,
+            'bg-destructive/80': !state.isPassing,
+          }"
+        >
+          {{ verifyTip }}
+        </div>
+        <div v-if="!state.dragging" class="bg-black/30">
+          {{ defaultTip || $t('ui.captcha.sliderTranslateDefaultTip') }}
+        </div>
+      </div>
+    </div>
+    <SliderCaptcha
+      ref="slideBarRef"
+      v-model="modalValue"
+      class="mt-5"
+      is-slot
+      @end="handleDragEnd"
+      @move="handleDragBarMove"
+      @start="handleStart"
+    >
+      <template v-for="(_, key) in $slots" :key="key" #[key]="slotProps">
+        <slot :name="key" v-bind="slotProps"></slot>
+      </template>
+    </SliderCaptcha>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/captcha/types.ts b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/types.ts
new file mode 100644
index 0000000..cd1efdf
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/captcha/types.ts
@@ -0,0 +1,211 @@
+import type { CSSProperties } from 'vue';
+
+import type { ClassType } from '@vben/types';
+
+export interface CaptchaData {
+  /**
+   * x
+   */
+  x: number;
+  /**
+   * y
+   */
+  y: number;
+  /**
+   * 时间戳
+   */
+  t: number;
+}
+export interface CaptchaPoint extends CaptchaData {
+  /**
+   * 数据索引
+   */
+  i: number;
+}
+export interface PointSelectionCaptchaCardProps {
+  /**
+   * 验证码图片
+   */
+  captchaImage: string;
+  /**
+   * 验证码图片高度
+   * @default '220px'
+   */
+  height?: number | string;
+  /**
+   * 水平内边距
+   * @default '12px'
+   */
+  paddingX?: number | string;
+  /**
+   * 垂直内边距
+   * @default '16px'
+   */
+  paddingY?: number | string;
+  /**
+   * 标题
+   * @default '请按图依次点击'
+   */
+  title?: string;
+  /**
+   * 验证码图片宽度
+   * @default '300px'
+   */
+  width?: number | string;
+}
+
+export interface PointSelectionCaptchaProps
+  extends PointSelectionCaptchaCardProps {
+  /**
+   * 是否展示确定按钮
+   * @default false
+   */
+  showConfirm?: boolean;
+  /**
+   * 提示图片
+   * @default ''
+   */
+  hintImage?: string;
+  /**
+   * 提示文本
+   * @default ''
+   */
+  hintText?: string;
+}
+
+export interface SliderCaptchaProps {
+  class?: ClassType;
+  /**
+   * @description 滑块的样式
+   * @default {}
+   */
+  actionStyle?: CSSProperties;
+
+  /**
+   * @description 滑块条的样式
+   * @default {}
+   */
+  barStyle?: CSSProperties;
+
+  /**
+   * @description 内容的样式
+   * @default {}
+   */
+  contentStyle?: CSSProperties;
+
+  /**
+   * @description 组件的样式
+   * @default {}
+   */
+  wrapperStyle?: CSSProperties;
+
+  /**
+   * @description 是否作为插槽使用，用于联动组件，可参考旋转校验组件
+   * @default false
+   */
+  isSlot?: boolean;
+
+  /**
+   * @description 验证成功的提示
+   * @default '验证通过'
+   */
+  successText?: string;
+
+  /**
+   * @description 提示文字
+   * @default '请按住滑块拖动'
+   */
+  text?: string;
+}
+
+export interface SliderRotateCaptchaProps {
+  /**
+   * @description 旋转的角度
+   * @default 20
+   */
+  diffDegree?: number;
+
+  /**
+   * @description 图片的宽度
+   * @default 260
+   */
+  imageSize?: number;
+
+  /**
+   * @description 图片的样式
+   * @default {}
+   */
+  imageWrapperStyle?: CSSProperties;
+
+  /**
+   * @description 最大旋转角度
+   * @default 270
+   */
+  maxDegree?: number;
+
+  /**
+   * @description 最小旋转角度
+   * @default 90
+   */
+  minDegree?: number;
+
+  /**
+   * @description 图片的地址
+   */
+  src?: string;
+  /**
+   * @description 默认提示文本
+   */
+  defaultTip?: string;
+}
+
+export interface SliderTranslateCaptchaProps {
+  /**
+   * @description 拼图的宽度
+   * @default 420
+   */
+  canvasWidth?: number;
+  /**
+   * @description 拼图的高度
+   * @default 280
+   */
+  canvasHeight?: number;
+  /**
+   * @description 切块上正方形的长度
+   * @default 42
+   */
+  squareLength?: number;
+  /**
+   * @description 切块上圆形的半径
+   * @default 10
+   */
+  circleRadius?: number;
+  /**
+   * @description 图片的地址
+   */
+  src?: string;
+  /**
+   * @description 允许的最大差距
+   * @default 3
+   */
+  diffDistance?: number;
+  /**
+   * @description 默认提示文本
+   */
+  defaultTip?: string;
+}
+
+export interface CaptchaVerifyPassingData {
+  isPassing: boolean;
+  time: number | string;
+}
+
+export interface SliderCaptchaActionType {
+  resume: () => void;
+}
+
+export interface SliderRotateVerifyPassingData {
+  event: MouseEvent | TouchEvent;
+  moveDistance: number;
+  moveX: number;
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/col-page/col-page.vue b/admin-ui/vue/packages/effects/common-ui/src/components/col-page/col-page.vue
new file mode 100644
index 0000000..c3f9d68
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/col-page/col-page.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { ColPageProps } from './types';
+
+import { computed, ref, useSlots } from 'vue';
+
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@vben-core/shadcn-ui';
+
+import Page from '../page/page.vue';
+
+defineOptions({
+  name: 'ColPage',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<ColPageProps>(), {
+  leftWidth: 30,
+  rightWidth: 70,
+  resizable: true,
+});
+
+const delegatedProps = computed(() => {
+  const { leftWidth: _, ...delegated } = props;
+  return delegated;
+});
+
+const slots = useSlots();
+
+const delegatedSlots = computed(() => {
+  const resultSlots: string[] = [];
+
+  for (const key of Object.keys(slots)) {
+    if (!['default', 'left'].includes(key)) {
+      resultSlots.push(key);
+    }
+  }
+  return resultSlots;
+});
+
+const leftPanelRef = ref<InstanceType<typeof ResizablePanel>>();
+
+function expandLeft() {
+  leftPanelRef.value?.expand();
+}
+
+function collapseLeft() {
+  leftPanelRef.value?.collapse();
+}
+
+defineExpose({
+  expandLeft,
+  collapseLeft,
+});
+</script>
+<template>
+  <Page v-bind="delegatedProps">
+    <!-- 继承默认的slot -->
+    <template
+      v-for="slotName in delegatedSlots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps"></slot>
+    </template>
+
+    <ResizablePanelGroup class="w-full" direction="horizontal">
+      <ResizablePanel
+        ref="leftPanelRef"
+        :collapsed-size="leftCollapsedWidth"
+        :collapsible="leftCollapsible"
+        :default-size="leftWidth"
+        :max-size="leftMaxWidth"
+        :min-size="leftMinWidth"
+      >
+        <template #default="slotProps">
+          <slot
+            name="left"
+            v-bind="{
+              ...slotProps,
+              expand: expandLeft,
+              collapse: collapseLeft,
+            }"
+          ></slot>
+        </template>
+      </ResizablePanel>
+      <ResizableHandle
+        v-if="resizable"
+        :style="{ backgroundColor: splitLine ? undefined : 'transparent' }"
+        :with-handle="splitHandle"
+      />
+      <ResizablePanel
+        :collapsed-size="rightCollapsedWidth"
+        :collapsible="rightCollapsible"
+        :default-size="rightWidth"
+        :max-size="rightMaxWidth"
+        :min-size="rightMinWidth"
+      >
+        <template #default>
+          <slot></slot>
+        </template>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </Page>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/col-page/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/col-page/index.ts
new file mode 100644
index 0000000..11b3305
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/col-page/index.ts
@@ -0,0 +1,2 @@
+export { default as ColPage } from './col-page.vue';
+export * from './types';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/col-page/types.ts b/admin-ui/vue/packages/effects/common-ui/src/components/col-page/types.ts
new file mode 100644
index 0000000..491d1e6
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/col-page/types.ts
@@ -0,0 +1,26 @@
+import type { PageProps } from '../page/types';
+
+export interface ColPageProps extends PageProps {
+  /**
+   * 左侧宽度
+   * @default 30
+   */
+  leftWidth?: number;
+  leftMinWidth?: number;
+  leftMaxWidth?: number;
+  leftCollapsedWidth?: number;
+  leftCollapsible?: boolean;
+  /**
+   * 右侧宽度
+   * @default 70
+   */
+  rightWidth?: number;
+  rightMinWidth?: number;
+  rightCollapsedWidth?: number;
+  rightMaxWidth?: number;
+  rightCollapsible?: boolean;
+
+  resizable?: boolean;
+  splitLine?: boolean;
+  splitHandle?: boolean;
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/count-to/count-to.vue b/admin-ui/vue/packages/effects/common-ui/src/components/count-to/count-to.vue
new file mode 100644
index 0000000..d6b0943
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/count-to/count-to.vue
@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import type { CountToProps } from './types';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { isString } from '@vben-core/shared/utils';
+
+import { TransitionPresets, useTransition } from '@vueuse/core';
+
+const props = withDefaults(defineProps<CountToProps>(), {
+  startVal: 0,
+  duration: 2000,
+  separator: ',',
+  decimal: '.',
+  decimals: 0,
+  delay: 0,
+  transition: () => TransitionPresets.easeOutExpo,
+});
+
+const emit = defineEmits(['started', 'finished']);
+
+const lastValue = ref(props.startVal);
+
+onMounted(() => {
+  lastValue.value = props.endVal;
+});
+
+watch(
+  () => props.endVal,
+  (val) => {
+    lastValue.value = val;
+  },
+);
+
+const currentValue = useTransition(lastValue, {
+  delay: computed(() => props.delay),
+  duration: computed(() => props.duration),
+  disabled: computed(() => props.disabled),
+  transition: computed(() => {
+    return isString(props.transition)
+      ? TransitionPresets[props.transition]
+      : props.transition;
+  }),
+  onStarted() {
+    emit('started');
+  },
+  onFinished() {
+    emit('finished');
+  },
+});
+
+const numMain = computed(() => {
+  const result = currentValue.value
+    .toFixed(props.decimals)
+    .split('.')[0]
+    ?.replaceAll(/\B(?=(\d{3})+(?!\d))/g, props.separator);
+  return result;
+});
+
+const numDec = computed(() => {
+  return (
+    props.decimal + currentValue.value.toFixed(props.decimals).split('.')[1]
+  );
+});
+</script>
+<template>
+  <div class="count-to" v-bind="$attrs">
+    <slot name="prefix">
+      <div
+        class="count-to-prefix"
+        :style="prefixStyle"
+        :class="prefixClass"
+        v-if="prefix"
+      >
+        {{ prefix }}
+      </div>
+    </slot>
+    <div class="count-to-main" :class="mainClass" :style="mainStyle">
+      <span>{{ numMain }}</span>
+      <span
+        class="count-to-main-decimal"
+        v-if="decimals > 0"
+        :class="decimalClass"
+        :style="decimalStyle"
+      >
+        {{ numDec }}
+      </span>
+    </div>
+    <slot name="suffix">
+      <div
+        class="count-to-suffix"
+        :style="suffixStyle"
+        :class="suffixClass"
+        v-if="suffix"
+      >
+        {{ suffix }}
+      </div>
+    </slot>
+  </div>
+</template>
+<style lang="scss" scoped>
+.count-to {
+  display: flex;
+  align-items: baseline;
+
+  &-prefix {
+    // font-size: 1rem;
+  }
+
+  &-suffix {
+    // font-size: 1rem;
+  }
+
+  &-main {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    // font-size: 1.5rem;
+
+    &-decimal {
+      // font-size: 0.8rem;
+    }
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/count-to/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/count-to/index.ts
new file mode 100644
index 0000000..d942796
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/count-to/index.ts
@@ -0,0 +1,2 @@
+export { default as CountTo } from './count-to.vue';
+export * from './types';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/count-to/types.ts b/admin-ui/vue/packages/effects/common-ui/src/components/count-to/types.ts
new file mode 100644
index 0000000..0b3bd82
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/count-to/types.ts
@@ -0,0 +1,53 @@
+import type { CubicBezierPoints, EasingFunction } from '@vueuse/core';
+
+import type { StyleValue } from 'vue';
+
+import { TransitionPresets as TransitionPresetsData } from '@vueuse/core';
+
+export type TransitionPresets = keyof typeof TransitionPresetsData;
+
+export const TransitionPresetsKeys = Object.keys(
+  TransitionPresetsData,
+) as TransitionPresets[];
+
+export interface CountToProps {
+  /** 初始值 */
+  startVal?: number;
+  /** 当前值 */
+  endVal: number;
+  /** 是否禁用动画 */
+  disabled?: boolean;
+  /** 延迟动画开始的时间 */
+  delay?: number;
+  /** 持续时间  */
+  duration?: number;
+  /** 小数位数  */
+  decimals?: number;
+  /** 小数点  */
+  decimal?: string;
+  /** 分隔符  */
+  separator?: string;
+  /** 前缀  */
+  prefix?: string;
+  /** 后缀  */
+  suffix?: string;
+  /** 过渡效果  */
+  transition?: CubicBezierPoints | EasingFunction | TransitionPresets;
+  /** 整数部分的类名 */
+  mainClass?: string;
+  /** 小数部分的类名 */
+  decimalClass?: string;
+  /** 前缀部分的类名 */
+  prefixClass?: string;
+  /** 后缀部分的类名 */
+  suffixClass?: string;
+
+  /** 整数部分的样式 */
+  mainStyle?: StyleValue;
+  /** 小数部分的样式 */
+  decimalStyle?: StyleValue;
+  /** 前缀部分的样式 */
+  prefixStyle?: StyleValue;
+  /** 后缀部分的样式 */
+  suffixStyle?: StyleValue;
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue b/admin-ui/vue/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
new file mode 100644
index 0000000..12f44bd
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onUpdated,
+  ref,
+  watchEffect,
+} from 'vue';
+
+import { VbenTooltip } from '@vben-core/shadcn-ui';
+
+import { useElementSize } from '@vueuse/core';
+
+interface Props {
+  /**
+   * 是否启用点击文本展开全部
+   * @default false
+   */
+  expand?: boolean;
+  /**
+   * 文本最大行数
+   * @default 1
+   */
+  line?: number;
+  /**
+   * 文本最大宽度
+   * @default '100%'
+   */
+  maxWidth?: number | string;
+  /**
+   * 提示框位置
+   * @default 'top'
+   */
+  placement?: 'bottom' | 'left' | 'right' | 'top';
+  /**
+   * 是否启用文本提示框
+   * @default true
+   */
+  tooltip?: boolean;
+  /**
+   * 是否只在文本被截断时显示提示框
+   * @default false
+   */
+  tooltipWhenEllipsis?: boolean;
+  /**
+   * 文本截断检测的像素差异阈值，越大则判断越严格
+   * @default 3
+   */
+  ellipsisThreshold?: number;
+  /**
+   * 提示框背景颜色，优先级高于 overlayStyle
+   */
+  tooltipBackgroundColor?: string;
+  /**
+   * 提示文本字体颜色，优先级高于 overlayStyle
+   */
+  tooltipColor?: string;
+  /**
+   * 提示文本字体大小，单位px，优先级高于 overlayStyle
+   */
+  tooltipFontSize?: number;
+  /**
+   * 提示框内容最大宽度，单位px，默认不设置时，提示文本内容自动与展示文本宽度保持一致
+   */
+  tooltipMaxWidth?: number;
+  /**
+   * 提示框内容区域样式
+   * @default { textAlign: 'justify' }
+   */
+  tooltipOverlayStyle?: CSSProperties;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  expand: false,
+  line: 1,
+  maxWidth: '100%',
+  placement: 'top',
+  tooltip: true,
+  tooltipWhenEllipsis: false,
+  ellipsisThreshold: 3,
+  tooltipBackgroundColor: '',
+  tooltipColor: '',
+  tooltipFontSize: 14,
+  tooltipMaxWidth: undefined,
+  tooltipOverlayStyle: () => ({ textAlign: 'justify' }),
+});
+
+const emit = defineEmits<{ expandChange: [boolean] }>();
+
+const textMaxWidth = computed(() => {
+  if (typeof props.maxWidth === 'number') {
+    return `${props.maxWidth}px`;
+  }
+  return props.maxWidth;
+});
+const ellipsis = ref();
+const isExpand = ref(false);
+const defaultTooltipMaxWidth = ref();
+const isEllipsis = ref(false);
+
+const { width: eleWidth } = useElementSize(ellipsis);
+
+// 检测文本是否被截断
+const checkEllipsis = () => {
+  if (!ellipsis.value || !props.tooltipWhenEllipsis) return;
+
+  const element = ellipsis.value;
+
+  const originalText = element.textContent || '';
+  const originalTrimmed = originalText.trim();
+
+  // 对于空文本直接返回 false
+  if (!originalTrimmed) {
+    isEllipsis.value = false;
+    return;
+  }
+
+  const widthDiff = element.scrollWidth - element.clientWidth;
+  const heightDiff = element.scrollHeight - element.clientHeight;
+
+  // 使用足够大的差异阈值确保只有真正被截断的文本才会显示 tooltip
+  isEllipsis.value =
+    props.line === 1
+      ? widthDiff > props.ellipsisThreshold
+      : heightDiff > props.ellipsisThreshold;
+};
+
+// 使用 ResizeObserver 监听尺寸变化
+let resizeObserver: null | ResizeObserver = null;
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined' && props.tooltipWhenEllipsis) {
+    resizeObserver = new ResizeObserver(() => {
+      checkEllipsis();
+    });
+
+    if (ellipsis.value) {
+      resizeObserver.observe(ellipsis.value);
+    }
+  }
+
+  // 初始检测
+  checkEllipsis();
+});
+
+// 使用onUpdated钩子检测内容变化
+onUpdated(() => {
+  if (props.tooltipWhenEllipsis) {
+    checkEllipsis();
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+});
+
+watchEffect(
+  () => {
+    if (props.tooltip && eleWidth.value) {
+      defaultTooltipMaxWidth.value =
+        props.tooltipMaxWidth ?? eleWidth.value + 24;
+    }
+  },
+  { flush: 'post' },
+);
+
+function onExpand() {
+  isExpand.value = !isExpand.value;
+  emit('expandChange', isExpand.value);
+  if (props.tooltipWhenEllipsis) {
+    checkEllipsis();
+  }
+}
+
+function handleExpand() {
+  props.expand && onExpand();
+}
+</script>
+<template>
+  <div>
+    <VbenTooltip
+      :content-style="{
+        ...tooltipOverlayStyle,
+        maxWidth: `${defaultTooltipMaxWidth}px`,
+        fontSize: `${tooltipFontSize}px`,
+        color: tooltipColor,
+        backgroundColor: tooltipBackgroundColor,
+      }"
+      :disabled="
+        !props.tooltip || isExpand || (props.tooltipWhenEllipsis && !isEllipsis)
+      "
+      :side="placement"
+    >
+      <slot name="tooltip">
+        <slot></slot>
+      </slot>
+
+      <template #trigger>
+        <div
+          ref="ellipsis"
+          :class="{
+            '!cursor-pointer': expand,
+            ['block truncate']: line === 1,
+            [$style.ellipsisMultiLine]: line > 1,
+          }"
+          :style="{
+            '-webkit-line-clamp': isExpand ? '' : line,
+            'max-width': textMaxWidth,
+          }"
+          class="cursor-text overflow-hidden"
+          @click="handleExpand"
+          v-bind="$attrs"
+        >
+          <slot></slot>
+        </div>
+      </template>
+    </VbenTooltip>
+  </div>
+</template>
+
+<style module>
+.ellipsisMultiLine {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/ellipsis-text/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/ellipsis-text/index.ts
new file mode 100644
index 0000000..67a236c
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/ellipsis-text/index.ts
@@ -0,0 +1 @@
+export { default as EllipsisText } from './ellipsis-text.vue';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue b/admin-ui/vue/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
new file mode 100644
index 0000000..c602274
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import type { VNode } from 'vue';
+
+import { computed, ref, useAttrs, watch, watchEffect } from 'vue';
+
+import { usePagination } from '@vben/hooks';
+import { EmptyIcon, Grip, listIcons } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import {
+  Button,
+  Input,
+  Pagination,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+  VbenIcon,
+  VbenIconButton,
+  VbenPopover,
+} from '@vben-core/shadcn-ui';
+import { isFunction } from '@vben-core/shared/utils';
+
+import { objectOmit, refDebounced, watchDebounced } from '@vueuse/core';
+
+import { fetchIconsData } from './icons';
+
+interface Props {
+  pageSize?: number;
+  /** 图标集的名字 */
+  prefix?: string;
+  /** 是否自动请求API以获得图标集的数据.提供prefix时有效 */
+  autoFetchApi?: boolean;
+  /**
+   * 图标列表
+   */
+  icons?: string[];
+  /** Input组件 */
+  inputComponent?: VNode;
+  /** 图标插槽名，预览图标将被渲染到此插槽中 */
+  iconSlot?: string;
+  /** input组件的值属性名称 */
+  modelValueProp?: string;
+  /** 图标样式 */
+  iconClass?: string;
+  type?: 'icon' | 'input';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  prefix: 'ant-design',
+  pageSize: 36,
+  icons: () => [],
+  iconSlot: 'default',
+  iconClass: 'size-4',
+  autoFetchApi: true,
+  modelValueProp: 'modelValue',
+  inputComponent: undefined,
+  type: 'input',
+});
+
+const emit = defineEmits<{
+  change: [string];
+}>();
+
+const attrs = useAttrs();
+
+const modelValue = defineModel({ default: '', type: String });
+
+const visible = ref(false);
+const currentSelect = ref('');
+const keyword = ref('');
+const keywordDebounce = refDebounced(keyword, 300);
+const innerIcons = ref<string[]>([]);
+
+watchDebounced(
+  () => props.prefix,
+  async (prefix) => {
+    if (prefix && prefix !== 'svg' && props.autoFetchApi) {
+      innerIcons.value = await fetchIconsData(prefix);
+    }
+  },
+  { immediate: true, debounce: 500, maxWait: 1000 },
+);
+
+const currentList = computed(() => {
+  try {
+    if (props.prefix) {
+      if (
+        props.prefix !== 'svg' &&
+        props.autoFetchApi &&
+        props.icons.length === 0
+      ) {
+        return innerIcons.value;
+      }
+      const icons = listIcons('', props.prefix);
+      if (icons.length === 0) {
+        console.warn(`No icons found for prefix: ${props.prefix}`);
+      }
+      return icons;
+    } else {
+      return props.icons;
+    }
+  } catch (error) {
+    console.error('Failed to load icons:', error);
+    return [];
+  }
+});
+
+const showList = computed(() => {
+  return currentList.value.filter((item) =>
+    item.includes(keywordDebounce.value),
+  );
+});
+
+const { paginationList, total, setCurrentPage, currentPage } = usePagination(
+  showList,
+  props.pageSize,
+);
+
+watchEffect(() => {
+  currentSelect.value = modelValue.value;
+});
+
+watch(
+  () => currentSelect.value,
+  (v) => {
+    emit('change', v);
+  },
+);
+
+const handleClick = (icon: string) => {
+  currentSelect.value = icon;
+  modelValue.value = icon;
+  close();
+};
+
+const handlePageChange = (page: number) => {
+  setCurrentPage(page);
+};
+
+function toggleOpenState() {
+  visible.value = !visible.value;
+}
+
+function open() {
+  visible.value = true;
+}
+
+function close() {
+  visible.value = false;
+}
+
+function onKeywordChange(v: string) {
+  keyword.value = v;
+}
+
+const searchInputProps = computed(() => {
+  return {
+    placeholder: $t('ui.iconPicker.search'),
+    [props.modelValueProp]: keyword.value,
+    [`onUpdate:${props.modelValueProp}`]: onKeywordChange,
+    class: 'mx-2',
+  };
+});
+
+function updateCurrentSelect(v: string) {
+  currentSelect.value = v;
+  const eventKey = `onUpdate:${props.modelValueProp}`;
+  if (attrs[eventKey] && isFunction(attrs[eventKey])) {
+    attrs[eventKey](v);
+  }
+}
+const getBindAttrs = computed(() => {
+  return objectOmit(attrs, [`onUpdate:${props.modelValueProp}`]);
+});
+
+defineExpose({ toggleOpenState, open, close });
+</script>
+<template>
+  <VbenPopover
+    v-model:open="visible"
+    :content-props="{ align: 'end', alignOffset: -11, sideOffset: 8 }"
+    content-class="p-0 pt-3 w-full"
+    trigger-class="w-full"
+  >
+    <template #trigger>
+      <template v-if="props.type === 'input'">
+        <component
+          v-if="props.inputComponent"
+          :is="inputComponent"
+          :[modelValueProp]="currentSelect"
+          :placeholder="$t('ui.iconPicker.placeholder')"
+          role="combobox"
+          :aria-label="$t('ui.iconPicker.placeholder')"
+          aria-expanded="visible"
+          :[`onUpdate:${modelValueProp}`]="updateCurrentSelect"
+          v-bind="getBindAttrs"
+        >
+          <template #[iconSlot]>
+            <VbenIcon
+              :icon="currentSelect || Grip"
+              class="size-4"
+              aria-hidden="true"
+            />
+          </template>
+        </component>
+        <div class="relative w-full" v-else>
+          <Input
+            v-bind="$attrs"
+            v-model="currentSelect"
+            :placeholder="$t('ui.iconPicker.placeholder')"
+            class="h-8 w-full pr-8"
+            role="combobox"
+            :aria-label="$t('ui.iconPicker.placeholder')"
+            aria-expanded="visible"
+          />
+          <VbenIcon
+            :icon="currentSelect || Grip"
+            class="absolute right-1 top-1 size-6"
+            aria-hidden="true"
+          />
+        </div>
+      </template>
+      <VbenIcon
+        :icon="currentSelect || Grip"
+        v-else
+        class="size-4"
+        v-bind="$attrs"
+      />
+    </template>
+    <div class="mb-2 flex w-full">
+      <component
+        v-if="inputComponent"
+        :is="inputComponent"
+        v-bind="searchInputProps"
+      />
+      <Input
+        v-else
+        class="mx-2 h-8 w-full"
+        :placeholder="$t('ui.iconPicker.search')"
+        v-model="keyword"
+      />
+    </div>
+
+    <template v-if="paginationList.length > 0">
+      <div class="grid max-h-[360px] w-full grid-cols-6 justify-items-center">
+        <VbenIconButton
+          v-for="(item, index) in paginationList"
+          :key="index"
+          :tooltip="item"
+          tooltip-side="top"
+          @click="handleClick(item)"
+        >
+          <VbenIcon
+            :class="{
+              'text-primary transition-all': currentSelect === item,
+            }"
+            :icon="item"
+          />
+        </VbenIconButton>
+      </div>
+      <div
+        v-if="total >= pageSize"
+        class="flex-center flex justify-end overflow-hidden border-t py-2 pr-3"
+      >
+        <Pagination
+          :items-per-page="36"
+          :sibling-count="1"
+          :total="total"
+          show-edges
+          size="small"
+          @update:page="handlePageChange"
+        >
+          <PaginationList
+            v-slot="{ items }"
+            class="flex w-full items-center gap-1"
+          >
+            <PaginationFirst class="size-5" />
+            <PaginationPrev class="size-5" />
+            <template v-for="(item, index) in items">
+              <PaginationListItem
+                v-if="item.type === 'page'"
+                :key="index"
+                :value="item.value"
+                as-child
+              >
+                <Button
+                  :variant="item.value === currentPage ? 'default' : 'outline'"
+                  class="size-5 p-0 text-sm"
+                >
+                  {{ item.value }}
+                </Button>
+              </PaginationListItem>
+              <PaginationEllipsis
+                v-else
+                :key="item.type"
+                :index="index"
+                class="size-5"
+              />
+            </template>
+            <PaginationNext class="size-5" />
+            <PaginationLast class="size-5" />
+          </PaginationList>
+        </Pagination>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="flex-col-center text-muted-foreground min-h-[150px] w-full">
+        <EmptyIcon class="size-10" />
+        <div class="mt-1 text-sm">{{ $t('common.noData') }}</div>
+      </div>
+    </template>
+  </VbenPopover>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/icon-picker/icons.ts b/admin-ui/vue/packages/effects/common-ui/src/components/icon-picker/icons.ts
new file mode 100644
index 0000000..694e904
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/icon-picker/icons.ts
@@ -0,0 +1,56 @@
+import type { Recordable } from '@vben/types';
+
+/**
+ * 一个缓存对象，在不刷新页面时，无需重复请求远程接口
+ */
+export const ICONS_MAP: Recordable<string[]> = {};
+
+interface IconifyResponse {
+  prefix: string;
+  total: number;
+  title: string;
+  uncategorized?: string[];
+  categories?: Recordable<string[]>;
+  aliases?: Recordable<string>;
+}
+
+const PENDING_REQUESTS: Recordable<Promise<string[]>> = {};
+
+/**
+ * 通过Iconify接口获取图标集数据。
+ * 同一时间多个图标选择器同时请求同一个图标集时，实际上只会发起一次请求（所有请求共享同一份结果）。
+ * 请求结果会被缓存，刷新页面前同一个图标集不会再次请求
+ * @param prefix 图标集名称
+ * @returns 图标集中包含的所有图标名称
+ */
+export async function fetchIconsData(prefix: string): Promise<string[]> {
+  if (Reflect.has(ICONS_MAP, prefix) && ICONS_MAP[prefix]) {
+    return ICONS_MAP[prefix];
+  }
+  if (Reflect.has(PENDING_REQUESTS, prefix) && PENDING_REQUESTS[prefix]) {
+    return PENDING_REQUESTS[prefix];
+  }
+  PENDING_REQUESTS[prefix] = (async () => {
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 1000 * 10);
+      const response: IconifyResponse = await fetch(
+        `https://api.iconify.design/collection?prefix=${prefix}`,
+        { signal: controller.signal },
+      ).then((res) => res.json());
+      clearTimeout(timeoutId);
+      const list = response.uncategorized || [];
+      if (response.categories) {
+        for (const category in response.categories) {
+          list.push(...(response.categories[category] || []));
+        }
+      }
+      ICONS_MAP[prefix] = list.map((v) => `${prefix}:${v}`);
+    } catch (error) {
+      console.error(`Failed to fetch icons for prefix ${prefix}:`, error);
+      return [] as string[];
+    }
+    return ICONS_MAP[prefix];
+  })();
+  return PENDING_REQUESTS[prefix];
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/icon-picker/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/icon-picker/index.ts
new file mode 100644
index 0000000..3dabc86
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/icon-picker/index.ts
@@ -0,0 +1 @@
+export { default as IconPicker } from './icon-picker.vue';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/index.ts
new file mode 100644
index 0000000..9ff0d5e
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/index.ts
@@ -0,0 +1,35 @@
+export * from './api-component';
+export * from './captcha';
+export * from './col-page';
+export * from './count-to';
+export * from './ellipsis-text';
+export * from './icon-picker';
+export * from './json-viewer';
+export * from './loading';
+export * from './page';
+export * from './resize';
+export * from './tippy';
+export * from './tree';
+export * from '@vben-core/form-ui';
+export * from '@vben-core/popup-ui';
+
+// 给文档用
+export {
+  VbenAvatar,
+  VbenButton,
+  VbenButtonGroup,
+  VbenCheckbox,
+  VbenCheckButtonGroup,
+  VbenContextMenu,
+  VbenCountToAnimator,
+  VbenFullScreen,
+  VbenInputPassword,
+  VbenLoading,
+  VbenLogo,
+  VbenPinInput,
+  VbenSelect,
+  VbenSpinner,
+} from '@vben-core/shadcn-ui';
+
+export type { FlattenedItem } from '@vben-core/shadcn-ui';
+export { globalShareState } from '@vben-core/shared/global-state';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/json-preview/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/json-preview/index.ts
new file mode 100644
index 0000000..332d22c
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/json-preview/index.ts
@@ -0,0 +1 @@
+export { default as JsonPreview } from './json-preview.vue';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/json-preview/json-preview.vue b/admin-ui/vue/packages/effects/common-ui/src/components/json-preview/json-preview.vue
new file mode 100644
index 0000000..58c7aaa
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/json-preview/json-preview.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import VueJsonPretty from 'vue-json-pretty';
+
+import 'vue-json-pretty/lib/styles.css';
+
+defineProps<{ data: any }>();
+</script>
+
+<template>
+  <VueJsonPretty :data="data" :deep="3" :show-length="true" path="res" />
+</template>
+
+<style lang="less">
+html[class='dark'] {
+  .vjs-tree-node:hover {
+    background-color: #333;
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/index.ts
new file mode 100644
index 0000000..1aec78b
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/index.ts
@@ -0,0 +1,3 @@
+export { default as JsonViewer } from './index.vue';
+
+export * from './types';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/index.vue b/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/index.vue
new file mode 100644
index 0000000..f66c318
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/index.vue
@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import type { SetupContext } from 'vue';
+
+import type { Recordable } from '@vben/types';
+
+import type {
+  JsonViewerAction,
+  JsonViewerProps,
+  JsonViewerToggle,
+  JsonViewerValue,
+} from './types';
+
+import { computed, useAttrs } from 'vue';
+// @ts-ignore
+import VueJsonViewer from 'vue-json-viewer';
+
+import { $t } from '@vben/locales';
+
+import { isBoolean } from '@vben-core/shared/utils';
+
+// @ts-ignore
+import JsonBigint from 'json-bigint';
+
+defineOptions({ name: 'JsonViewer' });
+
+const props = withDefaults(defineProps<JsonViewerProps>(), {
+  expandDepth: 1,
+  copyable: false,
+  sort: false,
+  boxed: false,
+  theme: 'default-json-theme',
+  expanded: false,
+  previewMode: false,
+  showArrayIndex: true,
+  showDoubleQuotes: false,
+});
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+  copied: [event: JsonViewerAction];
+  keyClick: [key: string];
+  toggle: [param: JsonViewerToggle];
+  valueClick: [value: JsonViewerValue];
+}>();
+
+const attrs: SetupContext['attrs'] = useAttrs();
+
+function handleClick(event: MouseEvent) {
+  if (
+    event.target instanceof HTMLElement &&
+    event.target.classList.contains('jv-item')
+  ) {
+    const pathNode = event.target.closest('.jv-push');
+    if (!pathNode || !pathNode.hasAttribute('path')) {
+      return;
+    }
+    const param: JsonViewerValue = {
+      el: event.target,
+      path: pathNode.getAttribute('path') || '',
+      depth: Number(pathNode.getAttribute('depth')) || 0,
+      value: event.target.textContent || undefined,
+    };
+
+    param.value = JSON.parse(param.value);
+    emit('valueClick', param);
+  }
+  emit('click', event);
+}
+
+// 支持显示 bigint 数据，如较长的订单号
+const jsonData = computed<Record<string, any>>(() => {
+  if (typeof props.value !== 'string') {
+    return props.value || {};
+  }
+
+  try {
+    return JsonBigint({ storeAsString: true }).parse(props.value);
+  } catch (error) {
+    console.error('JSON parse error:', error);
+    return {};
+  }
+});
+
+const bindProps = computed<Recordable<any>>(() => {
+  const copyable = {
+    copyText: $t('ui.jsonViewer.copy'),
+    copiedText: $t('ui.jsonViewer.copied'),
+    timeout: 2000,
+    ...(isBoolean(props.copyable) ? {} : props.copyable),
+  };
+
+  return {
+    ...props,
+    ...attrs,
+    value: jsonData.value,
+    onCopied: (event: JsonViewerAction) => emit('copied', event),
+    onKeyclick: (key: string) => emit('keyClick', key),
+    onClick: (event: MouseEvent) => handleClick(event),
+    copyable: props.copyable ? copyable : false,
+  };
+});
+</script>
+<template>
+  <VueJsonViewer v-bind="bindProps">
+    <template #copy="slotProps">
+      <slot name="copy" v-bind="slotProps"></slot>
+    </template>
+  </VueJsonViewer>
+</template>
+<style lang="scss">
+@use './style.scss';
+</style>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/style.scss b/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/style.scss
new file mode 100644
index 0000000..47acb89
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/style.scss
@@ -0,0 +1,98 @@
+.default-json-theme {
+  font-family: Consolas, Menlo, Courier, monospace;
+  font-size: 14px;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+  background: hsl(var(--background));
+
+  &.jv-container.boxed {
+    border: 1px solid hsl(var(--border));
+  }
+
+  .jv-ellipsis {
+    display: inline-block;
+    padding: 0 4px 2px;
+    font-size: 0.9em;
+    line-height: 0.9;
+    vertical-align: 2px;
+    color: hsl(var(--secondary-foreground));
+    cursor: pointer;
+    user-select: none;
+    background-color: hsl(var(--secondary));
+    border-radius: 3px;
+  }
+
+  .jv-button {
+    color: hsl(var(--primary));
+  }
+
+  .jv-key {
+    color: hsl(var(--heavy-foreground));
+  }
+
+  .jv-item {
+    &.jv-array {
+      color: hsl(var(--heavy-foreground));
+    }
+
+    &.jv-boolean {
+      color: hsl(var(--red-400));
+    }
+
+    &.jv-function {
+      color: hsl(var(--destructive-foreground));
+    }
+
+    &.jv-number {
+      color: hsl(var(--info-foreground));
+    }
+
+    &.jv-number-float {
+      color: hsl(var(--info-foreground));
+    }
+
+    &.jv-number-integer {
+      color: hsl(var(--info-foreground));
+    }
+
+    &.jv-object {
+      color: hsl(var(--accent-darker));
+    }
+
+    &.jv-undefined {
+      color: hsl(var(--secondary-foreground));
+    }
+
+    &.jv-string {
+      color: hsl(var(--primary));
+      overflow-wrap: break-word;
+      white-space: normal;
+    }
+  }
+
+  &.jv-container .jv-code {
+    padding: 10px;
+
+    &.boxed:not(.open) {
+      padding-bottom: 20px;
+      margin-bottom: 10px;
+    }
+
+    &.open {
+      padding-bottom: 10px;
+    }
+
+    .jv-toggle {
+      &::before {
+        padding: 0 2px;
+        border-radius: 2px;
+      }
+
+      &:hover {
+        &::before {
+          background: hsl(var(--accent-foreground));
+        }
+      }
+    }
+  }
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/types.ts b/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/types.ts
new file mode 100644
index 0000000..8f3a206
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/json-viewer/types.ts
@@ -0,0 +1,44 @@
+export interface JsonViewerProps {
+  /** 要展示的结构数据 */
+  value: any;
+  /** 展开深度 */
+  expandDepth?: number;
+  /** 是否可复制 */
+  copyable?: boolean;
+  /** 是否排序 */
+  sort?: boolean;
+  /** 显示边框 */
+  boxed?: boolean;
+  /** 主题 */
+  theme?: string;
+  /** 是否展开 */
+  expanded?: boolean;
+  /** 时间格式化函数 */
+  timeformat?: (time: Date | number | string) => string;
+  /** 预览模式 */
+  previewMode?: boolean;
+  /** 显示数组索引 */
+  showArrayIndex?: boolean;
+  /** 显示双引号 */
+  showDoubleQuotes?: boolean;
+}
+
+export interface JsonViewerAction {
+  action: string;
+  text: string;
+  trigger: HTMLElement;
+}
+
+export interface JsonViewerValue {
+  value: any;
+  path: string;
+  depth: number;
+  el: HTMLElement;
+}
+
+export interface JsonViewerToggle {
+  /** 鼠标事件 */
+  event: MouseEvent;
+  /** 当前展开状态 */
+  open: boolean;
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/loading/directive.ts b/admin-ui/vue/packages/effects/common-ui/src/components/loading/directive.ts
new file mode 100644
index 0000000..973a605
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/loading/directive.ts
@@ -0,0 +1,132 @@
+import type { App, Directive, DirectiveBinding } from 'vue';
+
+import { h, render } from 'vue';
+
+import { VbenLoading, VbenSpinner } from '@vben-core/shadcn-ui';
+import { isString } from '@vben-core/shared/utils';
+
+const LOADING_INSTANCE_KEY = Symbol('loading');
+const SPINNER_INSTANCE_KEY = Symbol('spinner');
+
+const CLASS_NAME_RELATIVE = 'spinner-parent--relative';
+
+const loadingDirective: Directive = {
+  mounted(el, binding) {
+    const instance = h(VbenLoading, getOptions(binding));
+    render(instance, el);
+
+    el.classList.add(CLASS_NAME_RELATIVE);
+    el[LOADING_INSTANCE_KEY] = instance;
+  },
+  unmounted(el) {
+    const instance = el[LOADING_INSTANCE_KEY];
+    el.classList.remove(CLASS_NAME_RELATIVE);
+    render(null, el);
+    instance.el.remove();
+
+    el[LOADING_INSTANCE_KEY] = null;
+  },
+
+  updated(el, binding) {
+    const instance = el[LOADING_INSTANCE_KEY];
+    const options = getOptions(binding);
+    if (options && instance?.component) {
+      try {
+        Object.keys(options).forEach((key) => {
+          instance.component.props[key] = options[key];
+        });
+        instance.component.update();
+      } catch (error) {
+        console.error(
+          'Failed to update loading component in directive:',
+          error,
+        );
+      }
+    }
+  },
+};
+
+function getOptions(binding: DirectiveBinding) {
+  if (binding.value === undefined) {
+    return { spinning: true };
+  } else if (typeof binding.value === 'boolean') {
+    return { spinning: binding.value };
+  } else {
+    return { ...binding.value };
+  }
+}
+
+const spinningDirective: Directive = {
+  mounted(el, binding) {
+    const instance = h(VbenSpinner, getOptions(binding));
+    render(instance, el);
+
+    el.classList.add(CLASS_NAME_RELATIVE);
+    el[SPINNER_INSTANCE_KEY] = instance;
+  },
+  unmounted(el) {
+    const instance = el[SPINNER_INSTANCE_KEY];
+    el.classList.remove(CLASS_NAME_RELATIVE);
+    render(null, el);
+    instance.el.remove();
+
+    el[SPINNER_INSTANCE_KEY] = null;
+  },
+
+  updated(el, binding) {
+    const instance = el[SPINNER_INSTANCE_KEY];
+    const options = getOptions(binding);
+    if (options && instance?.component) {
+      try {
+        Object.keys(options).forEach((key) => {
+          instance.component.props[key] = options[key];
+        });
+        instance.component.update();
+      } catch (error) {
+        console.error(
+          'Failed to update spinner component in directive:',
+          error,
+        );
+      }
+    }
+  },
+};
+
+type loadingDirectiveParams = {
+  /** 是否注册loading指令。如果提供一个string，则将指令注册为指定的名称 */
+  loading?: boolean | string;
+  /** 是否注册spinning指令。如果提供一个string，则将指令注册为指定的名称 */
+  spinning?: boolean | string;
+};
+
+/**
+ * 注册loading指令
+ * @param app
+ * @param params
+ */
+export function registerLoadingDirective(
+  app: App,
+  params?: loadingDirectiveParams,
+) {
+  // 注入一个样式供指令使用，确保容器是相对定位
+  const style = document.createElement('style');
+  style.id = CLASS_NAME_RELATIVE;
+  style.innerHTML = `
+    .${CLASS_NAME_RELATIVE} {
+      position: relative !important;
+    }
+  `;
+  document.head.append(style);
+  if (params?.loading !== false) {
+    app.directive(
+      isString(params?.loading) ? params.loading : 'loading',
+      loadingDirective,
+    );
+  }
+  if (params?.spinning !== false) {
+    app.directive(
+      isString(params?.spinning) ? params.spinning : 'spinning',
+      spinningDirective,
+    );
+  }
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/loading/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/loading/index.ts
new file mode 100644
index 0000000..2fbfb04
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/loading/index.ts
@@ -0,0 +1,3 @@
+export * from './directive';
+export { default as Loading } from './loading.vue';
+export { default as Spinner } from './spinner.vue';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/loading/loading.vue b/admin-ui/vue/packages/effects/common-ui/src/components/loading/loading.vue
new file mode 100644
index 0000000..faf49e6
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/loading/loading.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { VbenLoading } from '@vben-core/shadcn-ui';
+import { cn } from '@vben-core/shared/utils';
+
+interface LoadingProps {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+  /**
+   * @zh_CN 文字
+   */
+  text?: string;
+}
+
+defineOptions({ name: 'Loading' });
+const props = defineProps<LoadingProps>();
+</script>
+<template>
+  <div :class="cn('relative min-h-20', props.class)">
+    <slot></slot>
+    <VbenLoading
+      :min-loading-time="props.minLoadingTime"
+      :spinning="props.spinning"
+      :text="props.text"
+    >
+      <template v-if="$slots.icon" #icon>
+        <slot name="icon"></slot>
+      </template>
+    </VbenLoading>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/loading/spinner.vue b/admin-ui/vue/packages/effects/common-ui/src/components/loading/spinner.vue
new file mode 100644
index 0000000..caee2bb
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/loading/spinner.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { VbenSpinner } from '@vben-core/shadcn-ui';
+import { cn } from '@vben-core/shared/utils';
+
+interface SpinnerProps {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+}
+defineOptions({ name: 'Spinner' });
+const props = defineProps<SpinnerProps>();
+</script>
+<template>
+  <div :class="cn('relative min-h-20', props.class)">
+    <slot></slot>
+    <VbenSpinner
+      :min-loading-time="props.minLoadingTime"
+      :spinning="props.spinning"
+    />
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/page/__tests__/page.test.ts b/admin-ui/vue/packages/effects/common-ui/src/components/page/__tests__/page.test.ts
new file mode 100644
index 0000000..a89061f
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/page/__tests__/page.test.ts
@@ -0,0 +1,89 @@
+import { mount } from '@vue/test-utils';
+
+import { describe, expect, it } from 'vitest';
+
+import { Page } from '..';
+
+describe('page.vue', () => {
+  it('renders title when passed', () => {
+    const wrapper = mount(Page, {
+      props: {
+        title: 'Test Title',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Test Title');
+  });
+
+  it('renders description when passed', () => {
+    const wrapper = mount(Page, {
+      props: {
+        description: 'Test Description',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Test Description');
+  });
+
+  it('renders default slot content', () => {
+    const wrapper = mount(Page, {
+      slots: {
+        default: '<p>Default Slot Content</p>',
+      },
+    });
+
+    expect(wrapper.html()).toContain('<p>Default Slot Content</p>');
+  });
+
+  it('renders footer slot when showFooter is true', () => {
+    const wrapper = mount(Page, {
+      props: {
+        showFooter: true,
+      },
+      slots: {
+        footer: '<p>Footer Slot Content</p>',
+      },
+    });
+
+    expect(wrapper.html()).toContain('<p>Footer Slot Content</p>');
+  });
+
+  it('applies the custom contentClass', () => {
+    const wrapper = mount(Page, {
+      props: {
+        contentClass: 'custom-class',
+      },
+    });
+
+    const contentDiv = wrapper.find('.p-4');
+    expect(contentDiv.classes()).toContain('custom-class');
+  });
+
+  it('does not render title slot if title prop is provided', () => {
+    const wrapper = mount(Page, {
+      props: {
+        title: 'Test Title',
+      },
+      slots: {
+        title: '<p>Title Slot Content</p>',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Title Slot Content');
+    expect(wrapper.html()).not.toContain('Test Title');
+  });
+
+  it('does not render description slot if description prop is provided', () => {
+    const wrapper = mount(Page, {
+      props: {
+        description: 'Test Description',
+      },
+      slots: {
+        description: '<p>Description Slot Content</p>',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Description Slot Content');
+    expect(wrapper.html()).not.toContain('Test Description');
+  });
+});
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/page/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/page/index.ts
new file mode 100644
index 0000000..fd9e02f
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/page/index.ts
@@ -0,0 +1,2 @@
+export { default as Page } from './page.vue';
+export * from './types';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/page/page.vue b/admin-ui/vue/packages/effects/common-ui/src/components/page/page.vue
new file mode 100644
index 0000000..4a0ea54
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/page/page.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { StyleValue } from 'vue';
+
+import type { PageProps } from './types';
+
+import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
+
+import { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT } from '@vben-core/shared/constants';
+import { cn } from '@vben-core/shared/utils';
+
+defineOptions({
+  name: 'Page',
+});
+
+const { autoContentHeight = false, heightOffset = 0 } =
+  defineProps<PageProps>();
+
+const headerHeight = ref(0);
+const footerHeight = ref(0);
+const shouldAutoHeight = ref(false);
+
+const headerRef = useTemplateRef<HTMLDivElement>('headerRef');
+const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
+
+const contentStyle = computed<StyleValue>(() => {
+  if (autoContentHeight) {
+    return {
+      height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px - ${footerHeight.value}px - ${typeof heightOffset === 'number' ? `${heightOffset}px` : heightOffset})`,
+      overflowY: shouldAutoHeight.value ? 'auto' : 'unset',
+    };
+  }
+  return {};
+});
+
+async function calcContentHeight() {
+  if (!autoContentHeight) {
+    return;
+  }
+  await nextTick();
+  headerHeight.value = headerRef.value?.offsetHeight || 0;
+  footerHeight.value = footerRef.value?.offsetHeight || 0;
+  setTimeout(() => {
+    shouldAutoHeight.value = true;
+  }, 30);
+}
+
+onMounted(() => {
+  calcContentHeight();
+});
+</script>
+
+<template>
+  <div class="relative flex min-h-full flex-col">
+    <div
+      v-if="
+        description ||
+        $slots.description ||
+        title ||
+        $slots.title ||
+        $slots.extra
+      "
+      ref="headerRef"
+      :class="
+        cn(
+          'bg-card border-border relative flex items-end border-b px-6 py-4',
+          headerClass,
+        )
+      "
+    >
+      <div class="flex-auto">
+        <slot name="title">
+          <div v-if="title" class="mb-2 flex text-lg font-semibold">
+            {{ title }}
+          </div>
+        </slot>
+
+        <slot name="description">
+          <p v-if="description" class="text-muted-foreground">
+            {{ description }}
+          </p>
+        </slot>
+      </div>
+
+      <div v-if="$slots.extra">
+        <slot name="extra"></slot>
+      </div>
+    </div>
+
+    <div :class="cn('h-full p-4', contentClass)" :style="contentStyle">
+      <slot></slot>
+    </div>
+    <div
+      v-if="$slots.footer"
+      ref="footerRef"
+      :class="cn('bg-card align-center flex px-6 py-4', footerClass)"
+    >
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/page/types.ts b/admin-ui/vue/packages/effects/common-ui/src/components/page/types.ts
new file mode 100644
index 0000000..c7331ae
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/page/types.ts
@@ -0,0 +1,17 @@
+export interface PageProps {
+  title?: string;
+  description?: string;
+  contentClass?: string;
+  /**
+   * 根据content可见高度自适应
+   */
+  autoContentHeight?: boolean;
+  headerClass?: string;
+  footerClass?: string;
+  /**
+   * Custom height offset value (in pixels) to adjust content area sizing
+   * when used with autoContentHeight
+   * @default 0
+   */
+  heightOffset?: number;
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/resize/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/resize/index.ts
new file mode 100644
index 0000000..f937522
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/resize/index.ts
@@ -0,0 +1 @@
+export { default as VResize } from './resize.vue';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/resize/resize.vue b/admin-ui/vue/packages/effects/common-ui/src/components/resize/resize.vue
new file mode 100644
index 0000000..68be4d9
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/resize/resize.vue
@@ -0,0 +1,1120 @@
+<script lang="ts" setup>
+/**
+ * This components is refactored from vue-drag-resize: https://github.com/kirillmurashov/vue-drag-resize
+ */
+
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toRefs,
+  watch,
+} from 'vue';
+
+const props = defineProps({
+  stickSize: {
+    type: Number,
+    default: 8,
+  },
+  parentScaleX: {
+    type: Number,
+    default: 1,
+  },
+  parentScaleY: {
+    type: Number,
+    default: 1,
+  },
+  isActive: {
+    type: Boolean,
+    default: false,
+  },
+  preventActiveBehavior: {
+    type: Boolean,
+    default: false,
+  },
+  isDraggable: {
+    type: Boolean,
+    default: true,
+  },
+  isResizable: {
+    type: Boolean,
+    default: true,
+  },
+  aspectRatio: {
+    type: Boolean,
+    default: false,
+  },
+  parentLimitation: {
+    type: Boolean,
+    default: false,
+  },
+  snapToGrid: {
+    type: Boolean,
+    default: false,
+  },
+  gridX: {
+    type: Number,
+    default: 50,
+    validator(val: number) {
+      return val >= 0;
+    },
+  },
+  gridY: {
+    type: Number,
+    default: 50,
+    validator(val: number) {
+      return val >= 0;
+    },
+  },
+  parentW: {
+    type: Number,
+    default: 0,
+    validator(val: number) {
+      return val >= 0;
+    },
+  },
+  parentH: {
+    type: Number,
+    default: 0,
+    validator(val: number) {
+      return val >= 0;
+    },
+  },
+  w: {
+    type: [String, Number],
+    default: 200,
+    validator(val: number) {
+      return typeof val === 'string' ? val === 'auto' : val >= 0;
+    },
+  },
+  h: {
+    type: [String, Number],
+    default: 200,
+    validator(val: number) {
+      return typeof val === 'string' ? val === 'auto' : val >= 0;
+    },
+  },
+  minw: {
+    type: Number,
+    default: 50,
+    validator(val: number) {
+      return val >= 0;
+    },
+  },
+  minh: {
+    type: Number,
+    default: 50,
+    validator(val: number) {
+      return val >= 0;
+    },
+  },
+  x: {
+    type: Number,
+    default: 0,
+    validator(val: number) {
+      return typeof val === 'number';
+    },
+  },
+  y: {
+    type: Number,
+    default: 0,
+    validator(val: number) {
+      return typeof val === 'number';
+    },
+  },
+  z: {
+    type: [String, Number],
+    default: 'auto',
+    validator(val: number) {
+      return typeof val === 'string' ? val === 'auto' : val >= 0;
+    },
+  },
+  dragHandle: {
+    type: String,
+    default: null,
+  },
+  dragCancel: {
+    type: String,
+    default: null,
+  },
+  sticks: {
+    type: Array<'bl' | 'bm' | 'br' | 'ml' | 'mr' | 'tl' | 'tm' | 'tr'>,
+    default() {
+      return ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'];
+    },
+  },
+  axis: {
+    type: String,
+    default: 'both',
+    validator(val: string) {
+      return ['both', 'none', 'x', 'y'].includes(val);
+    },
+  },
+  contentClass: {
+    type: String,
+    required: false,
+    default: '',
+  },
+});
+
+const emit = defineEmits([
+  'clicked',
+  'dragging',
+  'dragstop',
+  'resizing',
+  'resizestop',
+  'activated',
+  'deactivated',
+]);
+
+const styleMapping = {
+  y: {
+    t: 'top',
+    m: 'marginTop',
+    b: 'bottom',
+  },
+  x: {
+    l: 'left',
+    m: 'marginLeft',
+    r: 'right',
+  },
+};
+
+function addEvents(events: Map<string, (...args: any[]) => void>) {
+  events.forEach((cb, eventName) => {
+    document.documentElement.addEventListener(eventName, cb);
+  });
+}
+
+function removeEvents(events: Map<string, (...args: any[]) => void>) {
+  events.forEach((cb, eventName) => {
+    document.documentElement.removeEventListener(eventName, cb);
+  });
+}
+
+const {
+  stickSize,
+  parentScaleX,
+  parentScaleY,
+  isActive,
+  preventActiveBehavior,
+  isDraggable,
+  isResizable,
+  aspectRatio,
+  parentLimitation,
+  snapToGrid,
+  gridX,
+  gridY,
+  parentW,
+  parentH,
+  w,
+  h,
+  minw,
+  minh,
+  x,
+  y,
+  z,
+  dragHandle,
+  dragCancel,
+  sticks,
+  axis,
+  contentClass,
+} = toRefs(props);
+
+// states
+const active = ref(false);
+const zIndex = ref<null | number>(null);
+const parentWidth = ref<null | number>(null);
+const parentHeight = ref<null | number>(null);
+const left = ref<null | number>(null);
+const top = ref<null | number>(null);
+const right = ref<null | number>(null);
+const bottom = ref<null | number>(null);
+
+const aspectFactor = ref<null | number>(null);
+
+// state end
+
+const stickDrag = ref(false);
+const bodyDrag = ref(false);
+const dimensionsBeforeMove = ref({
+  pointerX: 0,
+  pointerY: 0,
+  x: 0,
+  y: 0,
+  w: 0,
+  h: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+});
+const limits = ref({
+  left: { min: null as null | number, max: null as null | number },
+  right: { min: null as null | number, max: null as null | number },
+  top: { min: null as null | number, max: null as null | number },
+  bottom: { min: null as null | number, max: null as null | number },
+});
+const currentStick = ref<null | string>(null);
+
+const parentElement = ref<HTMLElement | null>(null);
+
+const width = computed(() => parentWidth.value! - left.value! - right.value!);
+
+const height = computed(() => parentHeight.value! - top.value! - bottom.value!);
+
+const rect = computed(() => ({
+  left: Math.round(left.value!),
+  top: Math.round(top.value!),
+  width: Math.round(width.value),
+  height: Math.round(height.value),
+}));
+
+const saveDimensionsBeforeMove = ({
+  pointerX,
+  pointerY,
+}: {
+  pointerX: number;
+  pointerY: number;
+}) => {
+  dimensionsBeforeMove.value.pointerX = pointerX;
+  dimensionsBeforeMove.value.pointerY = pointerY;
+
+  dimensionsBeforeMove.value.left = left.value as number;
+  dimensionsBeforeMove.value.right = right.value as number;
+  dimensionsBeforeMove.value.top = top.value as number;
+  dimensionsBeforeMove.value.bottom = bottom.value as number;
+
+  dimensionsBeforeMove.value.width = width.value as number;
+  dimensionsBeforeMove.value.height = height.value as number;
+
+  aspectFactor.value = width.value / height.value;
+};
+
+const sideCorrectionByLimit = (
+  limit: { max: number; min: number },
+  current: number,
+) => {
+  let value = current;
+
+  if (limit.min !== null && current < limit.min) {
+    value = limit.min;
+  } else if (limit.max !== null && limit.max < current) {
+    value = limit.max;
+  }
+
+  return value;
+};
+
+const rectCorrectionByLimit = (rect: {
+  newBottom: number;
+  newLeft: number;
+  newRight: number;
+  newTop: number;
+}) => {
+  // const { limits } = this;
+  let { newRight, newLeft, newBottom, newTop } = rect;
+
+  type RectRange = {
+    max: number;
+    min: number;
+  };
+
+  newLeft = sideCorrectionByLimit(limits.value.left as RectRange, newLeft);
+  newRight = sideCorrectionByLimit(limits.value.right as RectRange, newRight);
+  newTop = sideCorrectionByLimit(limits.value.top as RectRange, newTop);
+  newBottom = sideCorrectionByLimit(
+    limits.value.bottom as RectRange,
+    newBottom,
+  );
+
+  return {
+    newLeft,
+    newRight,
+    newTop,
+    newBottom,
+  };
+};
+
+const rectCorrectionByAspectRatio = (rect: {
+  newBottom: number;
+  newLeft: number;
+  newRight: number;
+  newTop: number;
+}) => {
+  let { newLeft, newRight, newTop, newBottom } = rect;
+  // const { parentWidth, parentHeight, currentStick, aspectFactor, dimensionsBeforeMove } = this;
+
+  let newWidth = parentWidth.value! - newLeft - newRight;
+  let newHeight = parentHeight.value! - newTop - newBottom;
+
+  if (currentStick.value![1] === 'm') {
+    const deltaHeight = newHeight - dimensionsBeforeMove.value.height;
+
+    newLeft -= (deltaHeight * aspectFactor.value!) / 2;
+    newRight -= (deltaHeight * aspectFactor.value!) / 2;
+  } else if (currentStick.value![0] === 'm') {
+    const deltaWidth = newWidth - dimensionsBeforeMove.value.width;
+
+    newTop -= deltaWidth / aspectFactor.value! / 2;
+    newBottom -= deltaWidth / aspectFactor.value! / 2;
+  } else if (newWidth / newHeight > aspectFactor.value!) {
+    newWidth = aspectFactor.value! * newHeight;
+
+    if (currentStick.value![1] === 'l') {
+      newLeft = parentWidth.value! - newRight - newWidth;
+    } else {
+      newRight = parentWidth.value! - newLeft - newWidth;
+    }
+  } else {
+    newHeight = newWidth / aspectFactor.value!;
+
+    if (currentStick.value![0] === 't') {
+      newTop = parentHeight.value! - newBottom - newHeight;
+    } else {
+      newBottom = parentHeight.value! - newTop - newHeight;
+    }
+  }
+
+  return { newLeft, newRight, newTop, newBottom };
+};
+
+const stickMove = (delta: { x: number; y: number }) => {
+  let newTop = dimensionsBeforeMove.value.top;
+  let newBottom = dimensionsBeforeMove.value.bottom;
+  let newLeft = dimensionsBeforeMove.value.left;
+  let newRight = dimensionsBeforeMove.value.right;
+  switch (currentStick.value![0]) {
+    case 'b': {
+      newBottom = dimensionsBeforeMove.value.bottom + delta.y;
+
+      if (snapToGrid.value) {
+        newBottom =
+          (parentHeight.value as number) -
+          Math.round(
+            ((parentHeight.value as number) - newBottom) / gridY.value,
+          ) *
+            gridY.value;
+      }
+
+      break;
+    }
+
+    case 't': {
+      newTop = dimensionsBeforeMove.value.top - delta.y;
+
+      if (snapToGrid.value) {
+        newTop = Math.round(newTop / gridY.value) * gridY.value;
+      }
+
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+
+  switch (currentStick.value![1]) {
+    case 'l': {
+      newLeft = dimensionsBeforeMove.value.left - delta.x;
+
+      if (snapToGrid.value) {
+        newLeft = Math.round(newLeft / gridX.value) * gridX.value;
+      }
+
+      break;
+    }
+
+    case 'r': {
+      newRight = dimensionsBeforeMove.value.right + delta.x;
+
+      if (snapToGrid.value) {
+        newRight =
+          (parentWidth.value as number) -
+          Math.round(((parentWidth.value as number) - newRight) / gridX.value) *
+            gridX.value;
+      }
+
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+
+  ({ newLeft, newRight, newTop, newBottom } = rectCorrectionByLimit({
+    newLeft,
+    newRight,
+    newTop,
+    newBottom,
+  }));
+
+  if (aspectRatio.value) {
+    ({ newLeft, newRight, newTop, newBottom } = rectCorrectionByAspectRatio({
+      newLeft,
+      newRight,
+      newTop,
+      newBottom,
+    }));
+  }
+
+  left.value = newLeft;
+  right.value = newRight;
+  top.value = newTop;
+  bottom.value = newBottom;
+
+  emit('resizing', rect.value);
+};
+
+const stickUp = () => {
+  stickDrag.value = false;
+  // dimensionsBeforeMove.value = {
+  //   pointerX: 0,
+  //   pointerY: 0,
+  //   x: 0,
+  //   y: 0,
+  //   w: 0,
+  //   h: 0,
+  // };
+
+  Object.assign(dimensionsBeforeMove.value, {
+    pointerX: 0,
+    pointerY: 0,
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+  });
+
+  limits.value = {
+    left: { min: null, max: null },
+    right: { min: null, max: null },
+    top: { min: null, max: null },
+    bottom: { min: null, max: null },
+  };
+
+  emit('resizing', rect.value);
+  emit('resizestop', rect.value);
+};
+
+const calcDragLimitation = () => {
+  return {
+    left: { min: 0, max: (parentWidth.value as number) - width.value },
+    right: { min: 0, max: (parentWidth.value as number) - width.value },
+    top: { min: 0, max: (parentHeight.value as number) - height.value },
+    bottom: { min: 0, max: (parentHeight.value as number) - height.value },
+  };
+};
+
+const calcResizeLimits = () => {
+  // const { aspectFactor, width, height, bottom, top, left, right } = this;
+
+  const parentLim = parentLimitation.value ? 0 : null;
+
+  if (aspectRatio.value) {
+    if (minw.value / minh.value > (aspectFactor.value as number)) {
+      minh.value = minw.value / (aspectFactor.value as number);
+    } else {
+      minw.value = ((aspectFactor.value as number) * minh.value) as number;
+    }
+  }
+
+  const limits = {
+    left: {
+      min: parentLim,
+      max: (left.value as number) + (width.value - minw.value),
+    },
+    right: {
+      min: parentLim,
+      max: (right.value as number) + (width.value - minw.value),
+    },
+    top: {
+      min: parentLim,
+      max: (top.value as number) + (height.value - minh.value),
+    },
+    bottom: {
+      min: parentLim,
+      max: (bottom.value as number) + (height.value - minh.value),
+    },
+  };
+
+  if (aspectRatio.value) {
+    const aspectLimits = {
+      left: {
+        min:
+          left.value! -
+          Math.min(top.value!, bottom.value!) * aspectFactor.value! * 2,
+        max:
+          left.value! +
+          ((height.value - minh.value!) / 2) * aspectFactor.value! * 2,
+      },
+      right: {
+        min:
+          right.value! -
+          Math.min(top.value!, bottom.value!) * aspectFactor.value! * 2,
+        max:
+          right.value! +
+          ((height.value - minh.value!) / 2) * aspectFactor.value! * 2,
+      },
+      top: {
+        min:
+          top.value! -
+          (Math.min(left.value!, right.value!) / aspectFactor.value!) * 2,
+        max:
+          top.value! +
+          ((width.value - minw.value) / 2 / aspectFactor.value!) * 2,
+      },
+      bottom: {
+        min:
+          bottom.value! -
+          (Math.min(left.value!, right.value!) / aspectFactor.value!) * 2,
+        max:
+          bottom.value! +
+          ((width.value - minw.value) / 2 / aspectFactor.value!) * 2,
+      },
+    };
+
+    if (currentStick.value![0] === 'm') {
+      limits.left = {
+        min: Math.max(limits.left.min!, aspectLimits.left.min),
+        max: Math.min(limits.left.max, aspectLimits.left.max),
+      };
+      limits.right = {
+        min: Math.max(limits.right.min!, aspectLimits.right.min),
+        max: Math.min(limits.right.max, aspectLimits.right.max),
+      };
+    } else if (currentStick.value![1] === 'm') {
+      limits.top = {
+        min: Math.max(limits.top.min!, aspectLimits.top.min),
+        max: Math.min(limits.top.max, aspectLimits.top.max),
+      };
+      limits.bottom = {
+        min: Math.max(limits.bottom.min!, aspectLimits.bottom.min),
+        max: Math.min(limits.bottom.max, aspectLimits.bottom.max),
+      };
+    }
+  }
+
+  return limits;
+};
+
+const positionStyle = computed(() => ({
+  top: `${top.value}px`,
+  left: `${left.value}px`,
+  zIndex: zIndex.value!,
+}));
+
+const sizeStyle = computed(() => ({
+  width: w.value === 'auto' ? 'auto' : `${width.value}px`,
+  height: h.value === 'auto' ? 'auto' : `${height.value}px`,
+}));
+
+const stickStyles = computed(() => (stick: string) => {
+  const stickStyle = {
+    width: `${stickSize.value / parentScaleX.value}px`,
+    height: `${stickSize.value / parentScaleY.value}px`,
+    [styleMapping.y[stick[0] as 'b' | 'm' | 't'] as 'height' | 'width']:
+      `${stickSize.value / parentScaleX.value / -2}px`,
+    [styleMapping.x[stick[1] as 'l' | 'm' | 'r'] as 'height' | 'width']:
+      `${stickSize.value / parentScaleX.value / -2}px`,
+  };
+  return stickStyle;
+});
+
+const bodyMove = (delta: { x: number; y: number }) => {
+  let newTop = dimensionsBeforeMove.value.top - delta.y;
+  let newBottom = dimensionsBeforeMove.value.bottom + delta.y;
+  let newLeft = dimensionsBeforeMove.value.left - delta.x;
+  let newRight = dimensionsBeforeMove.value.right + delta.x;
+
+  if (snapToGrid.value) {
+    let alignTop = true;
+    let alignLeft = true;
+
+    let diffT = newTop - Math.floor(newTop / gridY.value) * gridY.value;
+    let diffB =
+      (parentHeight.value as number) -
+      newBottom -
+      Math.floor(((parentHeight.value as number) - newBottom) / gridY.value) *
+        gridY.value;
+    let diffL = newLeft - Math.floor(newLeft / gridX.value) * gridX.value;
+    let diffR =
+      (parentWidth.value as number) -
+      newRight -
+      Math.floor(((parentWidth.value as number) - newRight) / gridX.value) *
+        gridX.value;
+
+    if (diffT > gridY.value / 2) {
+      diffT -= gridY.value;
+    }
+    if (diffB > gridY.value / 2) {
+      diffB -= gridY.value;
+    }
+    if (diffL > gridX.value / 2) {
+      diffL -= gridX.value;
+    }
+    if (diffR > gridX.value / 2) {
+      diffR -= gridX.value;
+    }
+
+    if (Math.abs(diffB) < Math.abs(diffT)) {
+      alignTop = false;
+    }
+    if (Math.abs(diffR) < Math.abs(diffL)) {
+      alignLeft = false;
+    }
+
+    newTop -= alignTop ? diffT : diffB;
+    newBottom = (parentHeight.value as number) - height.value - newTop;
+    newLeft -= alignLeft ? diffL : diffR;
+    newRight = (parentWidth.value as number) - width.value - newLeft;
+  }
+
+  ({
+    newLeft: left.value,
+    newRight: right.value,
+    newTop: top.value,
+    newBottom: bottom.value,
+  } = rectCorrectionByLimit({ newLeft, newRight, newTop, newBottom }));
+
+  emit('dragging', rect.value);
+};
+
+const bodyUp = () => {
+  bodyDrag.value = false;
+  emit('dragging', rect.value);
+  emit('dragstop', rect.value);
+
+  // dimensionsBeforeMove.value = { pointerX: 0, pointerY: 0, x: 0, y: 0, w: 0, h: 0 };
+  Object.assign(dimensionsBeforeMove.value, {
+    pointerX: 0,
+    pointerY: 0,
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+  });
+
+  limits.value = {
+    left: { min: null, max: null },
+    right: { min: null, max: null },
+    top: { min: null, max: null },
+    bottom: { min: null, max: null },
+  };
+};
+
+const stickDown = (
+  stick: string,
+  ev: { pageX: any; pageY: any; touches?: any },
+  force = false,
+) => {
+  if ((!isResizable.value || !active.value) && !force) {
+    return;
+  }
+
+  stickDrag.value = true;
+
+  const pointerX = ev.pageX === undefined ? ev.touches[0].pageX : ev.pageX;
+  const pointerY = ev.pageY === undefined ? ev.touches[0].pageY : ev.pageY;
+
+  saveDimensionsBeforeMove({ pointerX, pointerY });
+
+  currentStick.value = stick;
+
+  limits.value = calcResizeLimits();
+};
+
+const move = (ev: MouseEvent & TouchEvent) => {
+  if (!stickDrag.value && !bodyDrag.value) {
+    return;
+  }
+
+  ev.stopPropagation();
+
+  // touches 兼容性代码
+  const pageX = ev.pageX === undefined ? ev.touches![0]!.pageX : ev.pageX;
+  const pageY = ev.pageY === undefined ? ev.touches![0]!.pageY : ev.pageY;
+
+  const delta = {
+    x: (dimensionsBeforeMove.value.pointerX - pageX) / parentScaleX.value,
+    y: (dimensionsBeforeMove.value.pointerY - pageY) / parentScaleY.value,
+  };
+
+  if (stickDrag.value) {
+    stickMove(delta);
+  }
+
+  if (bodyDrag.value) {
+    switch (axis.value) {
+      case 'none': {
+        return;
+      }
+      case 'x': {
+        delta.y = 0;
+
+        break;
+      }
+      case 'y': {
+        delta.x = 0;
+
+        break;
+      }
+      // No default
+    }
+    bodyMove(delta);
+  }
+};
+
+const up = () => {
+  if (stickDrag.value) {
+    stickUp();
+  } else if (bodyDrag.value) {
+    bodyUp();
+  }
+};
+
+const deselect = () => {
+  if (preventActiveBehavior.value) {
+    return;
+  }
+  active.value = false;
+};
+
+const domEvents = ref(
+  new Map([
+    ['mousedown', deselect],
+    ['mouseleave', up],
+    ['mousemove', move],
+    ['mouseup', up],
+    ['touchcancel', up],
+    ['touchend', up],
+    ['touchmove', move],
+    ['touchstart', up],
+  ]),
+);
+
+const container = ref<HTMLDivElement>();
+
+onMounted(() => {
+  const currentInstance = getCurrentInstance();
+  const $el = currentInstance?.vnode.el as HTMLElement;
+
+  parentElement.value = $el?.parentNode as HTMLElement;
+  parentWidth.value = parentW.value ?? parentElement.value?.clientWidth;
+  parentHeight.value = parentH.value ?? parentElement.value?.clientHeight;
+
+  left.value = x.value;
+  top.value = y.value;
+  right.value = (parentWidth.value -
+    (w.value === 'auto' ? container.value!.scrollWidth : (w.value as number)) -
+    left.value) as number;
+  bottom.value = (parentHeight.value -
+    (h.value === 'auto' ? container.value!.scrollHeight : (h.value as number)) -
+    top.value) as number;
+
+  addEvents(domEvents.value);
+
+  if (dragHandle.value) {
+    [...($el?.querySelectorAll(dragHandle.value) || [])].forEach(
+      (dragHandle) => {
+        (dragHandle as HTMLElement).dataset.dragHandle = String(
+          currentInstance?.uid,
+        );
+      },
+    );
+  }
+
+  if (dragCancel.value) {
+    [...($el?.querySelectorAll(dragCancel.value) || [])].forEach(
+      (cancelHandle) => {
+        (cancelHandle as HTMLElement).dataset.dragCancel = String(
+          currentInstance?.uid,
+        );
+      },
+    );
+  }
+});
+
+onBeforeUnmount(() => {
+  removeEvents(domEvents.value);
+});
+
+const bodyDown = (ev: MouseEvent & TouchEvent) => {
+  const { target, button } = ev;
+
+  if (!preventActiveBehavior.value) {
+    active.value = true;
+  }
+
+  if (button && button !== 0) {
+    return;
+  }
+
+  emit('clicked', ev);
+
+  if (!active.value) {
+    return;
+  }
+
+  if (
+    dragHandle.value &&
+    (target! as HTMLElement).dataset.dragHandle !==
+      getCurrentInstance()?.uid.toString()
+  ) {
+    return;
+  }
+
+  if (
+    dragCancel.value &&
+    (target! as HTMLElement).dataset.dragCancel ===
+      getCurrentInstance()?.uid.toString()
+  ) {
+    return;
+  }
+
+  if (ev.stopPropagation !== undefined) {
+    ev.stopPropagation();
+  }
+
+  if (ev.preventDefault !== undefined) {
+    ev.preventDefault();
+  }
+
+  if (isDraggable.value) {
+    bodyDrag.value = true;
+  }
+
+  const pointerX = ev.pageX === undefined ? ev.touches[0]!.pageX : ev.pageX;
+  const pointerY = ev.pageY === undefined ? ev.touches[0]!.pageY : ev.pageY;
+
+  saveDimensionsBeforeMove({ pointerX, pointerY });
+
+  if (parentLimitation.value) {
+    limits.value = calcDragLimitation();
+  }
+};
+
+watch(
+  () => active.value,
+  (isActive) => {
+    if (isActive) {
+      emit('activated');
+    } else {
+      emit('deactivated');
+    }
+  },
+);
+
+watch(
+  () => isActive.value,
+  (val) => {
+    active.value = val;
+  },
+  { immediate: true },
+);
+
+watch(
+  () => z.value,
+  (val) => {
+    if ((val as number) >= 0 || val === 'auto') {
+      zIndex.value = val as number;
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => x.value,
+  (newVal, oldVal) => {
+    if (stickDrag.value || bodyDrag.value || newVal === left.value) {
+      return;
+    }
+
+    const delta = oldVal - newVal;
+
+    bodyDown({ pageX: left.value!, pageY: top.value! } as MouseEvent &
+      TouchEvent);
+    bodyMove({ x: delta, y: 0 });
+
+    nextTick(() => {
+      bodyUp();
+    });
+  },
+);
+
+watch(
+  () => y.value,
+  (newVal, oldVal) => {
+    if (stickDrag.value || bodyDrag.value || newVal === top.value) {
+      return;
+    }
+
+    const delta = oldVal - newVal;
+
+    bodyDown({ pageX: left.value, pageY: top.value } as MouseEvent &
+      TouchEvent);
+    bodyMove({ x: 0, y: delta });
+
+    nextTick(() => {
+      bodyUp();
+    });
+  },
+);
+
+watch(
+  () => w.value,
+  (newVal, oldVal) => {
+    if (stickDrag.value || bodyDrag.value || newVal === width.value) {
+      return;
+    }
+
+    const stick = 'mr';
+    const delta = (oldVal as number) - (newVal as number);
+
+    stickDown(
+      stick,
+      { pageX: right.value, pageY: top.value! + height.value / 2 },
+      true,
+    );
+    stickMove({ x: delta, y: 0 });
+
+    nextTick(() => {
+      stickUp();
+    });
+  },
+);
+
+watch(
+  () => h.value,
+  (newVal, oldVal) => {
+    if (stickDrag.value || bodyDrag.value || newVal === height.value) {
+      return;
+    }
+
+    const stick = 'bm';
+    const delta = (oldVal as number) - (newVal as number);
+
+    stickDown(
+      stick,
+      { pageX: left.value! + width.value / 2, pageY: bottom.value },
+      true,
+    );
+    stickMove({ x: 0, y: delta });
+
+    nextTick(() => {
+      stickUp();
+    });
+  },
+);
+
+watch(
+  () => parentW.value,
+  (val) => {
+    right.value = val - width.value - left.value!;
+    parentWidth.value = val;
+  },
+);
+
+watch(
+  () => parentH.value,
+  (val) => {
+    bottom.value = val - height.value - top.value!;
+    parentHeight.value = val;
+  },
+);
+</script>
+
+<template>
+  <div
+    :class="`${active || isActive ? 'active' : 'inactive'} ${contentClass ? contentClass : ''}`"
+    :style="positionStyle"
+    class="resize"
+    @mousedown="bodyDown($event as TouchEvent & MouseEvent)"
+    @touchend="up"
+    @touchstart="bodyDown($event as TouchEvent & MouseEvent)"
+  >
+    <div ref="container" :style="sizeStyle" class="content-container">
+      <slot></slot>
+    </div>
+    <div
+      v-for="(stick, index) of sticks"
+      :key="index"
+      :class="[`resize-stick-${stick}`, isResizable ? '' : 'not-resizable']"
+      :style="stickStyles(stick)"
+      class="resize-stick"
+      @mousedown.stop.prevent="
+        stickDown(stick, $event as TouchEvent & MouseEvent)
+      "
+      @touchstart.stop.prevent="
+        stickDown(stick, $event as TouchEvent & MouseEvent)
+      "
+    ></div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.resize {
+  position: absolute;
+  box-sizing: border-box;
+}
+
+.resize.active::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  outline: 1px dashed #d6d6d6;
+  content: '';
+}
+
+.resize-stick {
+  position: absolute;
+  box-sizing: border-box;
+  font-size: 1px;
+  background: #fff;
+  border: 1px solid #6c6c6c;
+  box-shadow: 0 0 2px #bbb;
+}
+
+.inactive .resize-stick {
+  display: none;
+}
+
+.resize-stick-tl,
+.resize-stick-br {
+  cursor: nwse-resize;
+}
+
+.resize-stick-tm,
+.resize-stick-bm {
+  left: 50%;
+  cursor: ns-resize;
+}
+
+.resize-stick-tr,
+.resize-stick-bl {
+  cursor: nesw-resize;
+}
+
+.resize-stick-ml,
+.resize-stick-mr {
+  top: 50%;
+  cursor: ew-resize;
+}
+
+.resize-stick.not-resizable {
+  display: none;
+}
+
+.content-container {
+  position: relative;
+  display: block;
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/tippy/directive.ts b/admin-ui/vue/packages/effects/common-ui/src/components/tippy/directive.ts
new file mode 100644
index 0000000..ed277d6
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/tippy/directive.ts
@@ -0,0 +1,100 @@
+import type { ComputedRef, Directive } from 'vue';
+
+import { useTippy } from 'vue-tippy';
+
+export default function useTippyDirective(isDark: ComputedRef<boolean>) {
+  const directive: Directive = {
+    mounted(el, binding, vnode) {
+      const opts =
+        typeof binding.value === 'string'
+          ? { content: binding.value }
+          : binding.value || {};
+
+      const modifiers = Object.keys(binding.modifiers || {});
+      const placement = modifiers.find((modifier) => modifier !== 'arrow');
+      const withArrow = modifiers.includes('arrow');
+
+      if (placement) {
+        opts.placement = opts.placement || placement;
+      }
+
+      if (withArrow) {
+        opts.arrow = opts.arrow === undefined ? true : opts.arrow;
+      }
+
+      if (vnode.props && vnode.props.onTippyShow) {
+        opts.onShow = function (...args: any[]) {
+          return vnode.props?.onTippyShow(...args);
+        };
+      }
+
+      if (vnode.props && vnode.props.onTippyShown) {
+        opts.onShown = function (...args: any[]) {
+          return vnode.props?.onTippyShown(...args);
+        };
+      }
+
+      if (vnode.props && vnode.props.onTippyHidden) {
+        opts.onHidden = function (...args: any[]) {
+          return vnode.props?.onTippyHidden(...args);
+        };
+      }
+
+      if (vnode.props && vnode.props.onTippyHide) {
+        opts.onHide = function (...args: any[]) {
+          return vnode.props?.onTippyHide(...args);
+        };
+      }
+
+      if (vnode.props && vnode.props.onTippyMount) {
+        opts.onMount = function (...args: any[]) {
+          return vnode.props?.onTippyMount(...args);
+        };
+      }
+
+      if (el.getAttribute('title') && !opts.content) {
+        opts.content = el.getAttribute('title');
+        el.removeAttribute('title');
+      }
+
+      if (el.getAttribute('content') && !opts.content) {
+        opts.content = el.getAttribute('content');
+      }
+
+      useTippy(el, opts);
+    },
+    unmounted(el) {
+      if (el.$tippy) {
+        el.$tippy.destroy();
+      } else if (el._tippy) {
+        el._tippy.destroy();
+      }
+    },
+
+    updated(el, binding) {
+      const opts =
+        typeof binding.value === 'string'
+          ? { content: binding.value, theme: isDark.value ? '' : 'light' }
+          : Object.assign(
+              { theme: isDark.value ? '' : 'light' },
+              binding.value,
+            );
+
+      if (el.getAttribute('title') && !opts.content) {
+        opts.content = el.getAttribute('title');
+        el.removeAttribute('title');
+      }
+
+      if (el.getAttribute('content') && !opts.content) {
+        opts.content = el.getAttribute('content');
+      }
+
+      if (el.$tippy) {
+        el.$tippy.setProps(opts || {});
+      } else if (el._tippy) {
+        el._tippy.setProps(opts || {});
+      }
+    },
+  };
+  return directive;
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/tippy/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/tippy/index.ts
new file mode 100644
index 0000000..6080e58
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/tippy/index.ts
@@ -0,0 +1,67 @@
+import type { DefaultProps, Props } from 'tippy.js';
+
+import type { App, SetupContext } from 'vue';
+
+import { h, watchEffect } from 'vue';
+import { setDefaultProps, Tippy as TippyComponent } from 'vue-tippy';
+
+import { usePreferences } from '@vben-core/preferences';
+
+import useTippyDirective from './directive';
+
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/dist/backdrop.css';
+import 'tippy.js/themes/light.css';
+import 'tippy.js/animations/scale.css';
+import 'tippy.js/animations/shift-toward.css';
+import 'tippy.js/animations/shift-away.css';
+import 'tippy.js/animations/perspective.css';
+
+const { isDark } = usePreferences();
+export type TippyProps = Partial<
+  Props & {
+    animation?:
+      | 'fade'
+      | 'perspective'
+      | 'scale'
+      | 'shift-away'
+      | 'shift-toward'
+      | boolean;
+    theme?: 'auto' | 'dark' | 'light';
+  }
+>;
+
+export function initTippy(app: App<Element>, options?: DefaultProps) {
+  setDefaultProps({
+    allowHTML: true,
+    delay: [500, 200],
+    theme: isDark.value ? '' : 'light',
+    ...options,
+  });
+  if (!options || !Reflect.has(options, 'theme') || options.theme === 'auto') {
+    watchEffect(() => {
+      setDefaultProps({ theme: isDark.value ? '' : 'light' });
+    });
+  }
+
+  app.directive('tippy', useTippyDirective(isDark));
+}
+
+export const Tippy = (props: any, { attrs, slots }: SetupContext) => {
+  let theme: string = (attrs.theme as string) ?? 'auto';
+  if (theme === 'auto') {
+    theme = isDark.value ? '' : 'light';
+  }
+  if (theme === 'dark') {
+    theme = '';
+  }
+  return h(
+    TippyComponent,
+    {
+      ...props,
+      ...attrs,
+      theme,
+    },
+    slots,
+  );
+};
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/tree/index.ts b/admin-ui/vue/packages/effects/common-ui/src/components/tree/index.ts
new file mode 100644
index 0000000..ce3bc5c
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/tree/index.ts
@@ -0,0 +1 @@
+export { default as Tree } from './tree.vue';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/components/tree/tree.vue b/admin-ui/vue/packages/effects/common-ui/src/components/tree/tree.vue
new file mode 100644
index 0000000..1f2fcc1
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/components/tree/tree.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { TreeProps } from '@vben-core/shadcn-ui';
+
+import { Inbox } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { treePropsDefaults, VbenTree } from '@vben-core/shadcn-ui';
+
+const props = withDefaults(defineProps<TreeProps>(), treePropsDefaults());
+</script>
+
+<template>
+  <VbenTree v-if="props.treeData?.length > 0" v-bind="props">
+    <template v-for="(_, key) in $slots" :key="key" #[key]="slotProps">
+      <slot :name="key" v-bind="slotProps"> </slot>
+    </template>
+  </VbenTree>
+  <div
+    v-else
+    class="flex-col-center text-muted-foreground cursor-pointer rounded-lg border p-10 text-sm font-medium"
+  >
+    <Inbox class="size-10" />
+    <div class="mt-1">{{ $t('common.noData') }}</div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/index.ts b/admin-ui/vue/packages/effects/common-ui/src/index.ts
new file mode 100644
index 0000000..27bd718
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/index.ts
@@ -0,0 +1,2 @@
+export * from './components';
+export * from './ui';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/about/about.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/about/about.ts
new file mode 100644
index 0000000..c4cf957
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/about/about.ts
@@ -0,0 +1,14 @@
+import type { Component } from 'vue';
+
+interface AboutProps {
+  description?: string;
+  name?: string;
+  title?: string;
+}
+
+interface DescriptionItem {
+  content: Component | string;
+  title: string;
+}
+
+export type { AboutProps, DescriptionItem };
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/about/about.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/about/about.vue
new file mode 100644
index 0000000..bee8b34
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/about/about.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import type { AboutProps, DescriptionItem } from './about';
+
+import { h } from 'vue';
+
+import {
+  VBEN_DOC_URL,
+  VBEN_GITHUB_URL,
+  VBEN_PREVIEW_URL,
+} from '@vben/constants';
+
+import { VbenRenderContent } from '@vben-core/shadcn-ui';
+
+import { Page } from '../../components';
+
+interface Props extends AboutProps {}
+
+defineOptions({
+  name: 'AboutUI',
+});
+
+withDefaults(defineProps<Props>(), {
+  description:
+    '是一个现代化开箱即用的中后台解决方案，采用最新的技术栈，包括 Vue 3.0、Vite、TailwindCSS 和 TypeScript 等前沿技术，代码规范严谨，提供丰富的配置选项，旨在为中大型项目的开发提供现成的开箱即用解决方案及丰富的示例，同时，它也是学习和深入前端技术的一个极佳示例。',
+  name: 'Vben Admin',
+  title: '关于项目',
+});
+
+declare global {
+  const __VBEN_ADMIN_METADATA__: {
+    authorEmail: string;
+    authorName: string;
+    authorUrl: string;
+    buildTime: string;
+    dependencies: Record<string, string>;
+    description: string;
+    devDependencies: Record<string, string>;
+    homepage: string;
+    license: string;
+    repositoryUrl: string;
+    version: string;
+  };
+}
+
+const renderLink = (href: string, text: string) =>
+  h(
+    'a',
+    { href, target: '_blank', class: 'vben-link' },
+    { default: () => text },
+  );
+
+const {
+  authorEmail,
+  authorName,
+  authorUrl,
+  buildTime,
+  dependencies = {},
+  devDependencies = {},
+  homepage,
+  license,
+  version,
+  // vite inject-metadata 插件注入的全局变量
+} = __VBEN_ADMIN_METADATA__ || {};
+
+const vbenDescriptionItems: DescriptionItem[] = [
+  {
+    content: version,
+    title: '版本号',
+  },
+  {
+    content: license,
+    title: '开源许可协议',
+  },
+  {
+    content: buildTime,
+    title: '最后构建时间',
+  },
+  {
+    content: renderLink(homepage, '点击查看'),
+    title: '主页',
+  },
+  {
+    content: renderLink(VBEN_DOC_URL, '点击查看'),
+    title: '文档地址',
+  },
+  {
+    content: renderLink(VBEN_PREVIEW_URL, '点击查看'),
+    title: '预览地址',
+  },
+  {
+    content: renderLink(VBEN_GITHUB_URL, '点击查看'),
+    title: 'Github',
+  },
+  {
+    content: h('div', [
+      renderLink(authorUrl, `${authorName}  `),
+      renderLink(`mailto:${authorEmail}`, authorEmail),
+    ]),
+    title: '作者',
+  },
+];
+
+const dependenciesItems = Object.keys(dependencies).map((key) => ({
+  content: dependencies[key],
+  title: key,
+}));
+
+const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
+  content: devDependencies[key],
+  title: key,
+}));
+</script>
+
+<template>
+  <Page :title="title">
+    <template #description>
+      <p class="text-foreground mt-3 text-sm leading-6">
+        <a :href="VBEN_GITHUB_URL" class="vben-link" target="_blank">
+          {{ name }}
+        </a>
+        {{ description }}
+      </p>
+    </template>
+    <div class="card-box p-5">
+      <div>
+        <h5 class="text-foreground text-lg">基本信息</h5>
+      </div>
+      <div class="mt-4">
+        <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <template v-for="item in vbenDescriptionItems" :key="item.title">
+            <div class="border-border border-t px-4 py-6 sm:col-span-1 sm:px-0">
+              <dt class="text-foreground text-sm font-medium leading-6">
+                {{ item.title }}
+              </dt>
+              <dd class="text-foreground mt-1 text-sm leading-6 sm:mt-2">
+                <VbenRenderContent :content="item.content" />
+              </dd>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+
+    <div class="card-box mt-6 p-5">
+      <div>
+        <h5 class="text-foreground text-lg">生产环境依赖</h5>
+      </div>
+      <div class="mt-4">
+        <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <template v-for="item in dependenciesItems" :key="item.title">
+            <div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
+              <dt class="text-foreground text-sm">
+                {{ item.title }}
+              </dt>
+              <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
+                <VbenRenderContent :content="item.content" />
+              </dd>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+    <div class="card-box mt-6 p-5">
+      <div>
+        <h5 class="text-foreground text-lg">开发环境依赖</h5>
+      </div>
+      <div class="mt-4">
+        <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <template v-for="item in devDependenciesItems" :key="item.title">
+            <div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
+              <dt class="text-foreground text-sm">
+                {{ item.title }}
+              </dt>
+              <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
+                <VbenRenderContent :content="item.content" />
+              </dd>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/about/index.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/about/index.ts
new file mode 100644
index 0000000..5860f5b
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/about/index.ts
@@ -0,0 +1 @@
+export { default as About } from './about.vue';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/auth-title.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/auth-title.vue
new file mode 100644
index 0000000..3ed9a6b
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/auth-title.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="mb-7 sm:mx-auto sm:w-full sm:max-w-md">
+    <h2
+      class="text-foreground mb-3 text-3xl font-bold leading-9 tracking-tight lg:text-4xl"
+    >
+      <slot></slot>
+    </h2>
+
+    <p class="text-muted-foreground lg:text-md text-sm">
+      <slot name="desc"></slot>
+    </p>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/code-login.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/code-login.vue
new file mode 100644
index 0000000..d7563d8
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/code-login.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  formSchema: VbenFormSchema[];
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登录路径
+   */
+  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
+  /**
+   * @zh_CN 是否显示返回按钮
+   */
+  showBack?: boolean;
+}
+
+defineOptions({
+  name: 'AuthenticationCodeLogin',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  showBack: true,
+  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const router = useRouter();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values);
+  }
+}
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+
+<template>
+  <div>
+    <Title>
+      <slot name="title">
+        {{ title || $t('authentication.welcomeBack') }} 📲
+      </slot>
+      <template #desc>
+        <span class="text-muted-foreground">
+          <slot name="subTitle">
+            {{ subTitle || $t('authentication.codeSubtitle') }}
+          </slot>
+        </span>
+      </template>
+    </Title>
+    <Form />
+    <VbenButton
+      :class="{
+        'cursor-wait': loading,
+      }"
+      :loading="loading"
+      class="w-full"
+      @click="handleSubmit"
+    >
+      <slot name="submitButtonText">
+        {{ submitButtonText || $t('common.login') }}
+      </slot>
+    </VbenButton>
+    <VbenButton
+      v-if="showBack"
+      class="mt-4 w-full"
+      variant="outline"
+      @click="goToLogin()"
+    >
+      {{ $t('common.back') }}
+    </VbenButton>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/dingding-login.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/dingding-login.vue
new file mode 100644
index 0000000..80b123c
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/dingding-login.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+
+import { SvgDingDingIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { alert, useVbenModal } from '@vben-core/popup-ui';
+import { VbenIconButton } from '@vben-core/shadcn-ui';
+import { loadScript } from '@vben-core/shared/utils';
+
+interface Props {
+  clientId: string;
+  corpId: string;
+  // 登录回调地址
+  redirectUri?: string;
+  // 是否内嵌二维码登录
+  isQrCode?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const route = useRoute();
+
+const [Modal, modalApi] = useVbenModal({
+  header: false,
+  footer: false,
+  fullscreenButton: false,
+  class: 'w-[302px] h-[302px] dingding-qrcode-login-modal',
+  onOpened() {
+    handleQrCodeLogin();
+  },
+});
+
+const getRedirectUri = () => {
+  const { redirectUri } = props;
+  if (redirectUri) {
+    return redirectUri;
+  }
+  return window.location.origin + route.fullPath;
+};
+
+/**
+ * 内嵌二维码登录
+ */
+const handleQrCodeLogin = async () => {
+  const { clientId, corpId } = props;
+  if (!(window as any).DTFrameLogin) {
+    // 二维码登录 加载资源
+    await loadScript(
+      'https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js',
+    );
+  }
+  (window as any).DTFrameLogin(
+    {
+      id: 'dingding_qrcode_login_element',
+      width: 300,
+      height: 300,
+    },
+    {
+      // 注意：redirect_uri 需为完整URL，扫码后钉钉会带code跳转到这里
+      redirect_uri: encodeURIComponent(getRedirectUri()),
+      client_id: clientId,
+      scope: 'openid corpid',
+      response_type: 'code',
+      state: '1',
+      prompt: 'consent',
+      corpId,
+    },
+    (loginResult: any) => {
+      const { redirectUrl } = loginResult;
+      // 这里可以直接进行重定向
+      window.location.href = redirectUrl;
+    },
+    (errorMsg: string) => {
+      // 这里一般需要展示登录失败的具体原因
+      alert(`Login Error: ${errorMsg}`);
+    },
+  );
+};
+
+const handleLogin = () => {
+  const { clientId, corpId, isQrCode } = props;
+  if (isQrCode) {
+    // 内嵌二维码登录
+    modalApi.open();
+  } else {
+    window.location.href = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${encodeURIComponent(getRedirectUri())}&response_type=code&client_id=${clientId}&scope=openid&corpid=${corpId}&prompt=consent`;
+  }
+};
+</script>
+
+<template>
+  <div>
+    <VbenIconButton
+      @click="handleLogin"
+      :tooltip="$t('authentication.dingdingLogin')"
+      tooltip-side="top"
+    >
+      <SvgDingDingIcon />
+    </VbenIconButton>
+    <Modal>
+      <div id="dingding_qrcode_login_element"></div>
+    </Modal>
+  </div>
+</template>
+
+<style>
+.dingding-qrcode-login-modal {
+  .relative {
+    padding: 0 !important;
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/forget-password.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/forget-password.vue
new file mode 100644
index 0000000..9c82df4
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/forget-password.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  formSchema: VbenFormSchema[];
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登录路径
+   */
+  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
+}
+
+defineOptions({
+  name: 'ForgetPassword',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
+});
+
+const emit = defineEmits<{
+  submit: [Record<string, any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+const router = useRouter();
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values);
+  }
+}
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+
+<template>
+  <div>
+    <Title>
+      <slot name="title">
+        {{ title || $t('authentication.forgetPassword') }} 🤦🏻‍♂️
+      </slot>
+      <template #desc>
+        <slot name="subTitle">
+          {{ subTitle || $t('authentication.forgetPasswordSubtitle') }}
+        </slot>
+      </template>
+    </Title>
+    <Form />
+
+    <div>
+      <VbenButton
+        :class="{
+          'cursor-wait': loading,
+        }"
+        aria-label="submit"
+        class="mt-2 w-full"
+        @click="handleSubmit"
+      >
+        <slot name="submitButtonText">
+          {{ submitButtonText || $t('authentication.sendResetLink') }}
+        </slot>
+      </VbenButton>
+      <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
+        {{ $t('common.back') }}
+      </VbenButton>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/index.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/index.ts
new file mode 100644
index 0000000..ac5e1e0
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/index.ts
@@ -0,0 +1,7 @@
+export { default as AuthenticationCodeLogin } from './code-login.vue';
+export { default as AuthenticationForgetPassword } from './forget-password.vue';
+export { default as AuthenticationLoginExpiredModal } from './login-expired-modal.vue';
+export { default as AuthenticationLogin } from './login.vue';
+export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
+export { default as AuthenticationRegister } from './register.vue';
+export type { AuthenticationProps } from './types';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
new file mode 100644
index 0000000..ef5e6a0
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { AuthenticationProps } from './types';
+
+import { computed, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { useVbenModal } from '@vben-core/popup-ui';
+import { Slot, VbenAvatar } from '@vben-core/shadcn-ui';
+
+interface Props extends AuthenticationProps {
+  avatar?: string;
+  zIndex?: number;
+}
+
+defineOptions({
+  name: 'LoginExpiredModal',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  avatar: '',
+  zIndex: 0,
+});
+
+const open = defineModel<boolean>('open');
+
+const [Modal, modalApi] = useVbenModal();
+
+watch(
+  () => open.value,
+  (val) => {
+    modalApi.setState({ isOpen: val });
+  },
+);
+
+const getZIndex = computed(() => {
+  return props.zIndex || calcZIndex();
+});
+
+/**
+ * 排除ant-message和loading:9999的z-index
+ */
+const zIndexExcludeClass = ['ant-message', 'loading'];
+function isZIndexExcludeClass(element: Element) {
+  return zIndexExcludeClass.some((className) =>
+    element.classList.contains(className),
+  );
+}
+
+/**
+ * 获取最大的zIndex值
+ */
+function calcZIndex() {
+  let maxZ = 0;
+  const elements = document.querySelectorAll('*');
+  [...elements].forEach((element) => {
+    const style = window.getComputedStyle(element);
+    const zIndex = style.getPropertyValue('z-index');
+    if (
+      zIndex &&
+      !Number.isNaN(Number.parseInt(zIndex)) &&
+      !isZIndexExcludeClass(element)
+    ) {
+      maxZ = Math.max(maxZ, Number.parseInt(zIndex));
+    }
+  });
+  return maxZ + 1;
+}
+</script>
+
+<template>
+  <div>
+    <Modal
+      :closable="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :footer="false"
+      :fullscreen-button="false"
+      :header="false"
+      :z-index="getZIndex"
+      class="border-none px-10 py-6 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset]"
+    >
+      <VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />
+      <Slot
+        :show-forget-password="false"
+        :show-register="false"
+        :show-remember-me="false"
+        :sub-title="$t('authentication.loginAgainSubTitle')"
+        :title="$t('authentication.loginAgainTitle')"
+      >
+        <slot> </slot>
+      </Slot>
+    </Modal>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/login.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/login.vue
new file mode 100644
index 0000000..bcb8f21
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
+import type { AuthenticationProps } from './types';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton, VbenCheckbox } from '@vben-core/shadcn-ui';
+
+import Title from './auth-title.vue';
+import ThirdPartyLogin from './third-party-login.vue';
+
+interface Props extends AuthenticationProps {
+  formSchema?: VbenFormSchema[];
+}
+
+defineOptions({
+  name: 'AuthenticationLogin',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  codeLoginPath: '/auth/code-login',
+  forgetPasswordPath: '/auth/forget-password',
+  formSchema: () => [],
+  loading: false,
+  qrCodeLoginPath: '/auth/qrcode-login',
+  registerPath: '/auth/register',
+  showCodeLogin: true,
+  showForgetPassword: true,
+  showQrcodeLogin: true,
+  showRegister: true,
+  showRememberMe: true,
+  showThirdPartyLogin: true,
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+const router = useRouter();
+
+const REMEMBER_ME_KEY = `REMEMBER_ME_USERNAME_${location.hostname}`;
+
+const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';
+
+const rememberMe = ref(!!localUsername);
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    localStorage.setItem(
+      REMEMBER_ME_KEY,
+      rememberMe.value ? values?.username : '',
+    );
+    emit('submit', values);
+  }
+}
+
+function handleGo(path: string) {
+  router.push(path);
+}
+
+onMounted(() => {
+  if (localUsername) {
+    formApi.setFieldValue('username', localUsername);
+  }
+});
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+
+<template>
+  <div @keydown.enter.prevent="handleSubmit">
+    <slot name="title">
+      <Title>
+        <slot name="title">
+          {{ title || `${$t('authentication.welcomeBack')} 👋🏻` }}
+        </slot>
+        <template #desc>
+          <span class="text-muted-foreground">
+            <slot name="subTitle">
+              {{ subTitle || $t('authentication.loginSubtitle') }}
+            </slot>
+          </span>
+        </template>
+      </Title>
+    </slot>
+
+    <Form />
+
+    <div
+      v-if="showRememberMe || showForgetPassword"
+      class="mb-6 flex justify-between"
+    >
+      <div class="flex-center">
+        <VbenCheckbox
+          v-if="showRememberMe"
+          v-model="rememberMe"
+          name="rememberMe"
+        >
+          {{ $t('authentication.rememberMe') }}
+        </VbenCheckbox>
+      </div>
+
+      <span
+        v-if="showForgetPassword"
+        class="vben-link text-sm font-normal"
+        @click="handleGo(forgetPasswordPath)"
+      >
+        {{ $t('authentication.forgetPassword') }}
+      </span>
+    </div>
+    <VbenButton
+      :class="{
+        'cursor-wait': loading,
+      }"
+      :loading="loading"
+      aria-label="login"
+      class="w-full"
+      @click="handleSubmit"
+    >
+      {{ submitButtonText || $t('common.login') }}
+    </VbenButton>
+
+    <div
+      v-if="showCodeLogin || showQrcodeLogin"
+      class="mb-2 mt-4 flex items-center justify-between"
+    >
+      <VbenButton
+        v-if="showCodeLogin"
+        class="w-1/2"
+        variant="outline"
+        @click="handleGo(codeLoginPath)"
+      >
+        {{ $t('authentication.mobileLogin') }}
+      </VbenButton>
+      <VbenButton
+        v-if="showQrcodeLogin"
+        class="ml-4 w-1/2"
+        variant="outline"
+        @click="handleGo(qrCodeLoginPath)"
+      >
+        {{ $t('authentication.qrcodeLogin') }}
+      </VbenButton>
+    </div>
+
+    <!-- 第三方登录 -->
+    <slot name="third-party-login">
+      <ThirdPartyLogin v-if="showThirdPartyLogin" />
+    </slot>
+
+    <slot name="to-register">
+      <div v-if="showRegister" class="mt-3 text-center text-sm">
+        {{ $t('authentication.accountTip') }}
+        <span
+          class="vben-link text-sm font-normal"
+          @click="handleGo(registerPath)"
+        >
+          {{ $t('authentication.createAccount') }}
+        </span>
+      </div>
+    </slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
new file mode 100644
index 0000000..c8f235c
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+import { useQRCode } from '@vueuse/integrations/useQRCode';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登录路径
+   */
+  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
+  /**
+   * @zh_CN 描述
+   */
+  description?: string;
+  /**
+   * @zh_CN 是否显示返回按钮
+   */
+  showBack?: boolean;
+}
+
+defineOptions({
+  name: 'AuthenticationQrCodeLogin',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  description: '',
+  loading: false,
+  showBack: true,
+  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
+});
+
+const router = useRouter();
+
+const text = ref('https://vben.vvbin.cn');
+
+const qrcode = useQRCode(text, {
+  errorCorrectionLevel: 'H',
+  margin: 4,
+});
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+</script>
+
+<template>
+  <div>
+    <Title>
+      <slot name="title">
+        {{ title || $t('authentication.welcomeBack') }} 📱
+      </slot>
+      <template #desc>
+        <span class="text-muted-foreground">
+          <slot name="subTitle">
+            {{ subTitle || $t('authentication.qrcodeSubtitle') }}
+          </slot>
+        </span>
+      </template>
+    </Title>
+
+    <div class="flex-col-center mt-6">
+      <img :src="qrcode" alt="qrcode" class="w-1/2" />
+      <p class="text-muted-foreground mt-4 text-sm">
+        <slot name="description">
+          {{ description || $t('authentication.qrcodePrompt') }}
+        </slot>
+      </p>
+    </div>
+
+    <VbenButton
+      v-if="showBack"
+      class="mt-4 w-full"
+      variant="outline"
+      @click="goToLogin()"
+    >
+      {{ $t('common.back') }}
+    </VbenButton>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/register.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/register.vue
new file mode 100644
index 0000000..69a69d4
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/register.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  formSchema?: VbenFormSchema[];
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登录路径
+   */
+  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
+}
+
+defineOptions({
+  name: 'RegisterForm',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
+  loading: false,
+  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+const router = useRouter();
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values as { password: string; username: string });
+  }
+}
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+
+<template>
+  <div>
+    <Title>
+      <slot name="title">
+        {{ title || $t('authentication.createAnAccount') }} 🚀
+      </slot>
+      <template #desc>
+        <slot name="subTitle">
+          {{ subTitle || $t('authentication.signUpSubtitle') }}
+        </slot>
+      </template>
+    </Title>
+    <Form />
+
+    <VbenButton
+      :class="{
+        'cursor-wait': loading,
+      }"
+      :loading="loading"
+      aria-label="register"
+      class="mt-2 w-full"
+      @click="handleSubmit"
+    >
+      <slot name="submitButtonText">
+        {{ submitButtonText || $t('authentication.signUp') }}
+      </slot>
+    </VbenButton>
+    <div class="mt-4 text-center text-sm">
+      {{ $t('authentication.alreadyHaveAccount') }}
+      <span class="vben-link text-sm font-normal" @click="goToLogin()">
+        {{ $t('authentication.goToLogin') }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/third-party-login.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
new file mode 100644
index 0000000..8c39ebf
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useAppConfig } from '@vben/hooks';
+// import {
+//   SvgGithubIcon,
+//   SvgGoogleIcon,
+//   SvgQQChatIcon,
+//   SvgWeChatIcon,
+// } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { VbenIconButton } from '@vben-core/shadcn-ui';
+
+// import DingdingLogin from './dingding-login.vue';
+
+defineOptions({
+  name: 'ThirdPartyLogin',
+});
+
+const {
+  auth: { dingding: dingdingAuthConfig },
+} = useAppConfig(import.meta.env, import.meta.env.PROD);
+</script>
+
+<template>
+  <div class="w-full sm:mx-auto md:max-w-md">
+    <div class="mt-4 flex items-center justify-between">
+      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
+      <span class="text-muted-foreground text-center text-xs uppercase">
+        {{ $t('authentication.thirdPartyLogin') }}
+      </span>
+      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
+    </div>
+
+    <div class="mt-4 flex flex-wrap justify-center">
+      <VbenIconButton
+        :tooltip="$t('authentication.wechatLogin')"
+        tooltip-side="top"
+        class="mb-3"
+      >
+        <!-- <SvgWeChatIcon /> -->
+      </VbenIconButton>
+      <VbenIconButton
+        :tooltip="$t('authentication.qqLogin')"
+        tooltip-side="top"
+        class="mb-3"
+      >
+        <!-- <SvgQQChatIcon /> -->
+      </VbenIconButton>
+      <VbenIconButton
+        :tooltip="$t('authentication.githubLogin')"
+        tooltip-side="top"
+        class="mb-3"
+      >
+        <!-- <SvgGithubIcon /> -->
+      </VbenIconButton>
+      <VbenIconButton
+        :tooltip="$t('authentication.googleLogin')"
+        tooltip-side="top"
+        class="mb-3"
+      >
+        <!-- <SvgGoogleIcon /> -->
+      </VbenIconButton>
+      <!-- <DingdingLogin
+        v-if="dingdingAuthConfig"
+        :corp-id="dingdingAuthConfig.corpId"
+        :client-id="dingdingAuthConfig.clientId"
+        class="mb-3"
+      /> -->
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/types.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/types.ts
new file mode 100644
index 0000000..cb297e2
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/authentication/types.ts
@@ -0,0 +1,70 @@
+interface AuthenticationProps {
+  /**
+   * @zh_CN 验证码登录路径
+   */
+  codeLoginPath?: string;
+  /**
+   * @zh_CN 忘记密码路径
+   */
+  forgetPasswordPath?: string;
+
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+
+  /**
+   * @zh_CN 二维码登录路径
+   */
+  qrCodeLoginPath?: string;
+
+  /**
+   * @zh_CN 注册路径
+   */
+  registerPath?: string;
+
+  /**
+   * @zh_CN 是否显示验证码登录
+   */
+  showCodeLogin?: boolean;
+  /**
+   * @zh_CN 是否显示忘记密码
+   */
+  showForgetPassword?: boolean;
+
+  /**
+   * @zh_CN 是否显示二维码登录
+   */
+  showQrcodeLogin?: boolean;
+
+  /**
+   * @zh_CN 是否显示注册按钮
+   */
+  showRegister?: boolean;
+
+  /**
+   * @zh_CN 是否显示记住账号
+   */
+  showRememberMe?: boolean;
+
+  /**
+   * @zh_CN 是否显示第三方登录
+   */
+  showThirdPartyLogin?: boolean;
+
+  /**
+   * @zh_CN 登录框子标题
+   */
+  subTitle?: string;
+
+  /**
+   * @zh_CN 登录框标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 提交按钮文本
+   */
+  submitButtonText?: string;
+}
+
+export type { AuthenticationProps };
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
new file mode 100644
index 0000000..294d517
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';
+
+interface Props {
+  title: string;
+}
+
+defineOptions({
+  name: 'AnalysisChartCard',
+});
+
+withDefaults(defineProps<Props>(), {});
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle class="text-xl">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent>
+      <slot></slot>
+    </CardContent>
+  </Card>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
new file mode 100644
index 0000000..453ee5c
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { TabOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@vben-core/shadcn-ui';
+
+interface Props {
+  tabs?: TabOption[];
+}
+
+defineOptions({
+  name: 'AnalysisChartsTabs',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  tabs: () => [],
+});
+
+const defaultValue = computed(() => {
+  return props.tabs?.[0]?.value;
+});
+</script>
+
+<template>
+  <div class="card-box w-full px-4 pb-5 pt-3">
+    <Tabs :default-value="defaultValue">
+      <TabsList>
+        <template v-for="tab in tabs" :key="tab.label">
+          <TabsTrigger :value="tab.value"> {{ tab.label }} </TabsTrigger>
+        </template>
+      </TabsList>
+      <template v-for="tab in tabs" :key="tab.label">
+        <TabsContent :value="tab.value" class="pt-4">
+          <slot :name="tab.value"></slot>
+        </TabsContent>
+      </template>
+    </Tabs>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
new file mode 100644
index 0000000..18c4929
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { AnalysisOverviewItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  VbenCountToAnimator,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: AnalysisOverviewItem[];
+}
+
+defineOptions({
+  name: 'AnalysisOverview',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+    <template v-for="item in items" :key="item.title">
+      <Card :title="item.title" class="w-full">
+        <CardHeader>
+          <CardTitle class="text-xl">{{ item.title }}</CardTitle>
+        </CardHeader>
+
+        <CardContent class="flex items-center justify-between">
+          <VbenCountToAnimator
+            :end-val="item.value"
+            :start-val="1"
+            class="text-xl"
+            prefix=""
+          />
+          <VbenIcon :icon="item.icon" class="size-8 flex-shrink-0" />
+        </CardContent>
+        <CardFooter class="justify-between">
+          <span>{{ item.totalTitle }}</span>
+          <VbenCountToAnimator
+            :end-val="item.totalValue"
+            :start-val="1"
+            prefix=""
+          />
+        </CardFooter>
+      </Card>
+    </template>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/index.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/index.ts
new file mode 100644
index 0000000..7c67b87
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/analysis/index.ts
@@ -0,0 +1,3 @@
+export { default as AnalysisChartCard } from './analysis-chart-card.vue';
+export { default as AnalysisChartsTabs } from './analysis-charts-tabs.vue';
+export { default as AnalysisOverview } from './analysis-overview.vue';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/index.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/index.ts
new file mode 100644
index 0000000..bc74424
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/index.ts
@@ -0,0 +1,3 @@
+export * from './analysis';
+export type * from './typing';
+export * from './workbench';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/typing.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/typing.ts
new file mode 100644
index 0000000..48fc9c7
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/typing.ts
@@ -0,0 +1,48 @@
+import type { Component } from 'vue';
+
+interface AnalysisOverviewItem {
+  icon: Component | string;
+  title: string;
+  totalTitle: string;
+  totalValue: number;
+  value: number;
+}
+
+interface WorkbenchProjectItem {
+  color?: string;
+  content: string;
+  date: string;
+  group: string;
+  icon: Component | string;
+  title: string;
+  url?: string;
+}
+
+interface WorkbenchTrendItem {
+  avatar: string;
+  content: string;
+  date: string;
+  title: string;
+}
+
+interface WorkbenchTodoItem {
+  completed: boolean;
+  content: string;
+  date: string;
+  title: string;
+}
+
+interface WorkbenchQuickNavItem {
+  color?: string;
+  icon: Component | string;
+  title: string;
+  url?: string;
+}
+
+export type {
+  AnalysisOverviewItem,
+  WorkbenchProjectItem,
+  WorkbenchQuickNavItem,
+  WorkbenchTodoItem,
+  WorkbenchTrendItem,
+};
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/index.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/index.ts
new file mode 100644
index 0000000..76b7af1
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/index.ts
@@ -0,0 +1,5 @@
+export { default as WorkbenchHeader } from './workbench-header.vue';
+export { default as WorkbenchProject } from './workbench-project.vue';
+export { default as WorkbenchQuickNav } from './workbench-quick-nav.vue';
+export { default as WorkbenchTodo } from './workbench-todo.vue';
+export { default as WorkbenchTrends } from './workbench-trends.vue';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
new file mode 100644
index 0000000..a3ea3eb
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { VbenAvatar } from '@vben-core/shadcn-ui';
+
+interface Props {
+  avatar?: string;
+}
+
+defineOptions({
+  name: 'WorkbenchHeader',
+});
+
+withDefaults(defineProps<Props>(), {
+  avatar: '',
+});
+</script>
+<template>
+  <div class="card-box p-4 py-6 lg:flex">
+    <VbenAvatar :src="avatar" class="size-20" />
+    <div
+      v-if="$slots.title || $slots.description"
+      class="flex flex-col justify-center md:ml-6 md:mt-0"
+    >
+      <h1 v-if="$slots.title" class="text-md font-semibold md:text-xl">
+        <slot name="title"></slot>
+      </h1>
+      <span v-if="$slots.description" class="text-foreground/80 mt-1">
+        <slot name="description"></slot>
+      </span>
+    </div>
+    <div class="mt-4 flex flex-1 justify-end md:mt-0">
+      <div class="flex flex-col justify-center text-right">
+        <span class="text-foreground/80"> 待办 </span>
+        <span class="text-2xl">2/10</span>
+      </div>
+
+      <div class="mx-12 flex flex-col justify-center text-right md:mx-16">
+        <span class="text-foreground/80"> 项目 </span>
+        <span class="text-2xl">8</span>
+      </div>
+      <div class="mr-4 flex flex-col justify-center text-right md:mr-10">
+        <span class="text-foreground/80"> 团队 </span>
+        <span class="text-2xl">300</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
new file mode 100644
index 0000000..590c334
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { WorkbenchProjectItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: WorkbenchProjectItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchProject',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+
+defineEmits(['click']);
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="flex flex-wrap p-0">
+      <template v-for="(item, index) in items" :key="item.title">
+        <div
+          :class="{
+            'border-r-0': index % 3 === 2,
+            'border-b-0': index < 3,
+            'pb-4': index > 2,
+            'rounded-bl-xl': index === items.length - 3,
+            'rounded-br-xl': index === items.length - 1,
+          }"
+          class="border-border group w-full cursor-pointer border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
+        >
+          <div class="flex items-center">
+            <VbenIcon
+              :color="item.color"
+              :icon="item.icon"
+              class="size-8 transition-all duration-300 group-hover:scale-110"
+              @click="$emit('click', item)"
+            />
+            <span class="ml-4 text-lg font-medium">{{ item.title }}</span>
+          </div>
+          <div class="text-foreground/80 mt-4 flex h-10">
+            {{ item.content }}
+          </div>
+          <div class="text-foreground/80 flex justify-between">
+            <span>{{ item.group }}</span>
+            <span>{{ item.date }}</span>
+          </div>
+        </div>
+      </template>
+    </CardContent>
+  </Card>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
new file mode 100644
index 0000000..86dc5c6
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { WorkbenchQuickNavItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: WorkbenchQuickNavItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchQuickNav',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+
+defineEmits(['click']);
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="flex flex-wrap p-0">
+      <template v-for="(item, index) in items" :key="item.title">
+        <div
+          :class="{
+            'border-r-0': index % 3 === 2,
+            'border-b-0': index < 3,
+            'pb-4': index > 2,
+            'rounded-bl-xl': index === items.length - 3,
+            'rounded-br-xl': index === items.length - 1,
+          }"
+          class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
+          @click="$emit('click', item)"
+        >
+          <VbenIcon
+            :color="item.color"
+            :icon="item.icon"
+            class="size-7 transition-all duration-300 group-hover:scale-125"
+          />
+          <span class="text-md mt-2 truncate">{{ item.title }}</span>
+        </div>
+      </template>
+    </CardContent>
+  </Card>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
new file mode 100644
index 0000000..ef34cd0
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { WorkbenchTodoItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenCheckbox,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: WorkbenchTodoItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchTodo',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="flex flex-wrap p-5 pt-0">
+      <ul class="divide-border w-full divide-y" role="list">
+        <li
+          v-for="item in items"
+          :key="item.title"
+          :class="{
+            'select-none line-through opacity-60': item.completed,
+          }"
+          class="flex cursor-pointer justify-between gap-x-6 py-5"
+        >
+          <div class="flex min-w-0 items-center gap-x-4">
+            <VbenCheckbox v-model="item.completed" name="completed" />
+            <div class="min-w-0 flex-auto">
+              <p class="text-foreground text-sm font-semibold leading-6">
+                {{ item.title }}
+              </p>
+              <!-- eslint-disable vue/no-v-html -->
+              <p
+                class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
+                v-html="item.content"
+              ></p>
+            </div>
+          </div>
+          <div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
+            <span class="text-foreground/80 mt-6 text-xs leading-6">
+              {{ item.date }}
+            </span>
+          </div>
+        </li>
+      </ul>
+    </CardContent>
+  </Card>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
new file mode 100644
index 0000000..06f2a5e
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { WorkbenchTrendItem } from '../typing';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  items?: WorkbenchTrendItem[];
+  title: string;
+}
+
+defineOptions({
+  name: 'WorkbenchTrends',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="py-4">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+    <CardContent class="flex flex-wrap p-5 pt-0">
+      <ul class="divide-border w-full divide-y" role="list">
+        <li
+          v-for="item in items"
+          :key="item.title"
+          class="flex justify-between gap-x-6 py-5"
+        >
+          <div class="flex min-w-0 items-center gap-x-4">
+            <VbenIcon
+              :icon="item.avatar"
+              alt=""
+              class="size-10 flex-none rounded-full"
+            />
+            <div class="min-w-0 flex-auto">
+              <p class="text-foreground text-sm font-semibold leading-6">
+                {{ item.title }}
+              </p>
+              <!-- eslint-disable vue/no-v-html -->
+              <p
+                class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
+                v-html="item.content"
+              ></p>
+            </div>
+          </div>
+          <div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
+            <span class="text-foreground/80 mt-6 text-xs leading-6">
+              {{ item.date }}
+            </span>
+          </div>
+        </li>
+      </ul>
+    </CardContent>
+  </Card>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/fallback.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/fallback.ts
new file mode 100644
index 0000000..5f8e193
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/fallback.ts
@@ -0,0 +1,25 @@
+interface FallbackProps {
+  /**
+   * 描述
+   */
+  description?: string;
+  /**
+   *  @zh_CN 首页路由地址
+   *  @default /
+   */
+  homePath?: string;
+  /**
+   * @zh_CN 默认显示的图片
+   * @default pageNotFoundSvg
+   */
+  image?: string;
+  /**
+   *  @zh_CN 内置类型
+   */
+  status?: '403' | '404' | '500' | 'coming-soon' | 'offline';
+  /**
+   *  @zh_CN 页面提示语
+   */
+  title?: string;
+}
+export type { FallbackProps };
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/fallback.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/fallback.vue
new file mode 100644
index 0000000..76eafca
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/fallback.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { FallbackProps } from './fallback';
+
+import { computed, defineAsyncComponent } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { ArrowLeft, RotateCw } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+interface Props extends FallbackProps {}
+
+defineOptions({
+  name: 'Fallback',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  description: '',
+  homePath: '/',
+  image: '',
+  showBack: true,
+  status: 'coming-soon',
+  title: '',
+});
+
+const Icon403 = defineAsyncComponent(() => import('./icons/icon-403.vue'));
+const Icon404 = defineAsyncComponent(() => import('./icons/icon-404.vue'));
+const Icon500 = defineAsyncComponent(() => import('./icons/icon-500.vue'));
+const IconHello = defineAsyncComponent(
+  () => import('./icons/icon-coming-soon.vue'),
+);
+const IconOffline = defineAsyncComponent(
+  () => import('./icons/icon-offline.vue'),
+);
+
+const titleText = computed(() => {
+  if (props.title) {
+    return props.title;
+  }
+
+  switch (props.status) {
+    case '403': {
+      return $t('ui.fallback.forbidden');
+    }
+    case '404': {
+      return $t('ui.fallback.pageNotFound');
+    }
+    case '500': {
+      return $t('ui.fallback.internalError');
+    }
+    case 'coming-soon': {
+      return $t('ui.fallback.comingSoon');
+    }
+    case 'offline': {
+      return $t('ui.fallback.offlineError');
+    }
+    default: {
+      return '';
+    }
+  }
+});
+
+const descText = computed(() => {
+  if (props.description) {
+    return props.description;
+  }
+  switch (props.status) {
+    case '403': {
+      return $t('ui.fallback.forbiddenDesc');
+    }
+    case '404': {
+      return $t('ui.fallback.pageNotFoundDesc');
+    }
+    case '500': {
+      return $t('ui.fallback.internalErrorDesc');
+    }
+    case 'offline': {
+      return $t('ui.fallback.offlineErrorDesc');
+    }
+    default: {
+      return '';
+    }
+  }
+});
+
+const fallbackIcon = computed(() => {
+  switch (props.status) {
+    case '403': {
+      return Icon403;
+    }
+    case '404': {
+      return Icon404;
+    }
+    case '500': {
+      return Icon500;
+    }
+    case 'coming-soon': {
+      return IconHello;
+    }
+    case 'offline': {
+      return IconOffline;
+    }
+    default: {
+      return null;
+    }
+  }
+});
+
+const showBack = computed(() => {
+  return props.status === '403' || props.status === '404';
+});
+
+const showRefresh = computed(() => {
+  return props.status === '500' || props.status === 'offline';
+});
+
+const { push } = useRouter();
+
+// 返回首页
+function back() {
+  push(props.homePath);
+}
+
+function refresh() {
+  location.reload();
+}
+</script>
+
+<template>
+  <div class="flex size-full flex-col items-center justify-center duration-300">
+    <img v-if="image" :src="image" class="md:1/3 w-1/2 lg:w-1/4" />
+    <component
+      :is="fallbackIcon"
+      v-else-if="fallbackIcon"
+      class="md:1/3 h-1/3 w-1/2 lg:w-1/4"
+    />
+    <div class="flex-col-center">
+      <slot v-if="$slots.title" name="title"></slot>
+      <p
+        v-else-if="titleText"
+        class="text-foreground mt-8 text-2xl md:text-3xl lg:text-4xl"
+      >
+        {{ titleText }}
+      </p>
+      <slot v-if="$slots.describe" name="describe"></slot>
+      <p
+        v-else-if="descText"
+        class="text-muted-foreground md:text-md my-4 lg:text-lg"
+      >
+        {{ descText }}
+      </p>
+      <slot v-if="$slots.action" name="action"></slot>
+      <VbenButton v-else-if="showBack" size="lg" @click="back">
+        <ArrowLeft class="mr-2 size-4" />
+        {{ $t('common.backToHome') }}
+      </VbenButton>
+      <VbenButton v-else-if="showRefresh" size="lg" @click="refresh">
+        <RotateCw class="mr-2 size-4" />
+        {{ $t('common.refresh') }}
+      </VbenButton>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-403.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-403.vue
new file mode 100644
index 0000000..e390867
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-403.vue
@@ -0,0 +1,151 @@
+<template>
+  <svg
+    height="659.29778"
+    viewBox="0 0 586 659.29778"
+    width="586"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <circle cx="332.47856" cy="254" fill="#f2f2f2" r="254.00001" />
+    <path
+      d="M498.46363,113.58835H33.17063c-.99774-.02133-1.78931-.84746-1.76797-1.84521,.02069-.96771,.80026-1.74727,1.76797-1.76796H498.46363c.99774,.02133,1.78931,.84746,1.76794,1.84521-.02069,.96771-.80023,1.74727-1.76794,1.76796Z"
+      fill="#cacaca"
+    />
+    <rect
+      fill="#fff"
+      height="34.98639"
+      rx="17.49318"
+      ry="17.49318"
+      width="163.61147"
+      x="193.77441"
+      y="174.47256"
+    />
+    <path
+      d="M128.17493,244.44534H422.98542c9.66122,0,17.49316,7.83197,17.49316,17.49319h0c0,9.66122-7.83194,17.49319-17.49316,17.49319H128.17493c-9.66122,0-17.49318-7.83197-17.49318-17.49319h0c0-9.66122,7.83196-17.49319,17.49318-17.49319Z"
+      fill="#fff"
+    />
+    <path
+      d="M128.17493,314.41812H422.98542c9.66122,0,17.49316,7.83197,17.49316,17.49319h0c0,9.66122-7.83194,17.49319-17.49316,17.49319H128.17493c-9.66122,0-17.49318-7.83197-17.49318-17.49319h0c0-9.66122,7.83196-17.49319,17.49318-17.49319Z"
+      fill="#fff"
+    />
+    <path
+      d="M91.64085,657.75932l-.69385-.06793c-23.54068-2.42871-44.82135-15.08929-58.18845-34.61835-3.66138-5.44159-6.62299-11.32251-8.815-17.50409l-.21069-.58966,.62375-.05048c7.44699-.59924,15.09732-1.86292,18.49585-2.46417l-21.91473-7.42511-.1355-.65033c-1.29926-6.10406,1.24612-12.38458,6.4285-15.86176,5.19641-3.64447,12.08731-3.76111,17.40405-.29449,2.38599,1.52399,4.88162,3.03339,7.29489,4.49359,8.29321,5.01636,16.8688,10.20337,23.29828,17.30121,9.74951,10.97778,14.02298,25.76984,11.63,40.25562l4.7829,17.47595Z"
+      fill="#f2f2f2"
+    />
+    <polygon
+      fill="#a0616a"
+      points="171.30016 646.86102 182.10017 646.85999 187.23916 605.198 171.29716 605.19897 171.30016 646.86102"
+    />
+    <path
+      d="M170.9192,658.12816l33.21436-.00122v-.41998c-.00049-7.13965-5.78833-12.92737-12.92798-12.92773h-.00079l-6.06702-4.60278-11.3197,4.60345-2.89941,.00012,.00055,13.34814Z"
+      fill="#2f2e41"
+    />
+    <polygon
+      fill="#a0616a"
+      points="84.74116 616.94501 93.38016 623.42603 122.49316 593.185 109.74116 583.61902 84.74116 616.94501"
+    />
+    <path
+      d="M77.67448,625.72966l26.569,19.93188,.25208-.336c4.2843-5.71136,3.12799-13.81433-2.58279-18.09937l-.00064-.00049-2.09079-7.32275-11.81735-3.11102-2.31931-1.73993-8.01019,10.67767Z"
+      fill="#2f2e41"
+    />
+    <path
+      d="M120.64463,451.35271s.59625,16.26422,1.3483,29.30737c.12335,2.13916-4.88821,4.46301-4.75842,6.7901,.08609,1.54395,1.02808,3.04486,1.1156,4.65472,.09235,1.69897-1.20822,3.20282-1.1156,4.95984,.09052,1.71667,1.57422,3.6853,1.66373,5.44244,.96317,18.9093,4.45459,41.54633,.9584,47.87439-1.72299,3.11871-23.68533,46.32446-23.68533,46.32446,0,0,12.23666,18.35498,15.73285,12.23663,4.61771-8.08099,40.20615-45.88745,40.20615-53.10712,0-7.21088,8.23346-61.25323,8.23346-61.25323l5.74103,31.98169,2.63239,6.33655-.82715,3.71997,1.70117,5.02045,.09192,4.96838,1.65619,9.22614s-4.98199,71.88159-2.17633,73.88312c2.81439,2.01038,16.44086,5.62018,18.04901,2.01038,1.59955-3.6098,12.0108-75.01947,12.0108-75.01947,0,0,1.6781-32.72424,3.49622-63.14111,.1048-1.76556,1.34607-3.89825,1.4422-5.63763,.11365-2.01898-.67297-4.64111-.56818-6.599,.11365-2.24628,1.11005-3.82831,1.20618-5.97852,.74292-16.6156-3.42761-36.84912-4.7561-38.84192-4.01202-6.01343-7.62177-10.82074-7.62177-10.82074,0,0-54.03558-17.75403-68.47485,.28625l-3.30185,25.37585Z"
+      fill="#2f2e41"
+    />
+    <path
+      d="M174.53779,284.10378l-21.4209-4.28418-9.9964,13.56656h0c-18.65262,18.34058-18.93359,34.52753-15.60379,60.47382v36.41553l-2.41,24.41187s-8.53156,17.84521,.26788,22.00006,66.59857,3.80066,72.117,2.14209,.73517-3.69482-.71399-11.4245c-2.72211-14.51929-.90131-7.51562-.71399-12.13849,2.68585-66.31363-3.57013-93.5379-4.20544-100.69376l-10.89398-19.75858-6.42639-10.71042Z"
+      fill="#3f3d56"
+    />
+    <path
+      d="M287.43909,337.57097c-2.23248,4.23007-7.47144,5.84943-11.70148,3.61694-.45099-.23804-.88013-.51541-1.28229-.82895l-46.26044,29.37308,.13336-15.9924,44.93842-26.07846c3.20093-3.58887,8.70514-3.90332,12.29401-.70239,3.00305,2.67844,3.7796,7.0657,1.87842,10.61218Z"
+      fill="#a0616a"
+    />
+    <path
+      d="M157.62488,302.62425l-5.26666-.55807c-4.86633-.50473-9.64093,1.57941-12.57947,5.491-1.12549,1.48346-1.9339,3.18253-2.37491,4.99164l-.00317,.01447c-1.32108,5.44534,.75095,11.15201,5.25803,14.48117l18.19031,13.41101c12.76544,17.24899,36.75653,28.69272,64.89832,37.98978l43.74274-27.16666-15.47186-18.73843-30.00336,16.0798-44.59833-34.52374-.0257-.02075-16.97424-10.936-4.79169-.5152Z"
+      fill="#3f3d56"
+    />
+    <circle cx="167.29993" cy="248.60526" fill="#a0616a" r="24.9798" />
+    <path
+      d="M167.8769,273.59047c-.20135,.00662-.4032,.01108-.6048,.01657-.0863,.22388-.17938,.44583-.2868,.66357l.8916-.68015Z"
+      fill="#2f2e41"
+    />
+    <path
+      d="M174.73243,249.29823c.03918,.24612,.09912,.48846,.17914,.72449-.03302-.24731-.09308-.49026-.17914-.72449Z"
+      fill="#2f2e41"
+    />
+    <path
+      d="M192.59852,224.6942c-1.0282,3.19272-1.94586-.85715-5.32825-.12869-4.06885,.87625-8.80377,.57532-12.13586-1.91879-4.96478-3.64273-11.39874-4.62335-17.22333-2.62509-5.70154,2.01706-15.25348,3.43933-16.73907,9.30179-.51642,2.03781-.7215,4.24933-1.97321,5.9382-1.09436,1.47662-2.82166,2.31854-4.26608,3.45499-4.87726,3.83743-1.14954,14.73981,1.15881,20.50046,2.30838,5.76065,7.60355,9.95721,13.42526,12.10678,5.63281,2.07977,11.7464,2.44662,17.75531,2.28317,1.04517-2.7106,.59363-5.84137-.26874-8.65134-.93359-3.04199-2.31592-5.97791-2.70593-9.13599s.46643-6.74527,3.11444-8.50986c2.4339-1.62192,6.39465-.63388,7.32062,1.98843-.54028-3.27841,2.7807-6.4509,6.20508-7.00882,3.67651-.599,7.35291,.72833,11.01886,1.38901s2.36475-14.77301,.64209-18.98425Z"
+      fill="#2f2e41"
+    />
+    <circle
+      cx="281.3585"
+      cy="285.71051"
+      fill="hsl(var(--primary))"
+      r="51.12006"
+      transform="translate(-26.58509 542.54478) rotate(-85.26884)"
+    />
+    <path
+      d="M294.78675,264.41051l-13.42828,13.42828-13.42828-13.42828c-2.17371-2.17374-5.69806-2.17374-7.87177,0s-2.17371,5.69803,0,7.87177l13.42828,13.42828-13.42828,13.42828c-2.17169,2.17575-2.1684,5.70007,.00739,7.87177,2.17285,2.16879,5.69153,2.16879,7.86438-.00003l13.42828-13.42828,13.42828,13.42828c2.17578,2.17169,5.70007,2.1684,7.87177-.00735,2.16882-2.17288,2.16882-5.6915,0-7.86438l-13.42828-13.42828,13.42828-13.42828c2.17371-2.17374,2.17371-5.69803,0-7.87177s-5.69806-2.17374-7.87177,0h0Z"
+      fill="#fff"
+    />
+    <path
+      d="M261.21387,242.74385c1.5069,4.53946-.95154,9.44101-5.49097,10.94791-.48401,.16064-.9812,.27823-1.4859,.35141l-10.83051,53.71692-11.44788-11.16785,12.29266-50.48209c-.37366-4.7944,3.21008-8.98395,8.00452-9.3576,4.01166-.31265,7.71509,2.16425,8.95807,5.9913Z"
+      fill="#a0616a"
+    />
+    <path
+      d="M146.12519,312.22478l-4.04883,3.41412c-3.73322,3.16214-5.53476,8.05035-4.74649,12.87888,.29129,1.83917,.95773,3.59879,1.95786,5.16949l.00824,.0123c3.01477,4.72311,8.5672,7.17865,14.08978,6.23117l22.27075-3.84171c21.28461,2.72995,46.15155-6.65967,72.34302-20.53055l10.67969-50.37274-24.23297-1.80811-9.16821,32.78271-55.78815,8.28149-.03278,.00415-19.64294,4.67767-3.68896,3.1011Z"
+      fill="#3f3d56"
+    />
+    <path
+      d="M272.93684,658.99046l-271.75,.30731c-.65759-.00214-1.18896-.53693-1.18683-1.19452,.00211-.6546,.53223-1.18469,1.18683-1.18683l271.75-.30731c.65759,.00214,1.18896,.53693,1.18683,1.19452-.00208,.6546-.53223,1.18469-1.18683,1.18683Z"
+      fill="#cacaca"
+    />
+    <g>
+      <ellipse
+        cx="56.77685"
+        cy="82.05834"
+        fill="#3f3d56"
+        rx="8.45661"
+        ry="8.64507"
+      />
+      <ellipse
+        cx="85.9906"
+        cy="82.05834"
+        fill="#3f3d56"
+        rx="8.45661"
+        ry="8.64507"
+      />
+      <ellipse
+        cx="115.20435"
+        cy="82.05834"
+        fill="#3f3d56"
+        rx="8.45661"
+        ry="8.64507"
+      />
+      <path
+        d="M148.51577,88.89113c-.25977,0-.51904-.10059-.71484-.30078l-5.70605-5.83301c-.38037-.38867-.38037-1.00977,0-1.39844l5.70605-5.83252c.38721-.39453,1.021-.40088,1.41406-.01562,.39502,.38623,.40186,1.01953,.01562,1.41406l-5.02197,5.1333,5.02197,5.13379c.38623,.39453,.37939,1.02783-.01562,1.41406-.19434,.19043-.44678,.28516-.69922,.28516Z"
+        fill="#3f3d56"
+      />
+      <path
+        d="M158.10415,88.89113c-.25244,0-.50488-.09473-.69922-.28516-.39502-.38623-.40186-1.01904-.01562-1.41406l5.02148-5.13379-5.02148-5.1333c-.38623-.39453-.37939-1.02783,.01562-1.41406,.39404-.38672,1.02783-.37939,1.41406,.01562l5.70557,5.83252c.38037,.38867,.38037,1.00977,0,1.39844l-5.70557,5.83301c-.1958,.2002-.45508,.30078-.71484,.30078Z"
+        fill="#3f3d56"
+      />
+      <path
+        d="M456.61398,74.41416h-10.60999c-1.21002,0-2.19,.97998-2.19,2.19v10.62c0,1.21002,.97998,2.19,2.19,2.19h10.60999c1.21002,0,2.20001-.97998,2.20001-2.19v-10.62c0-1.21002-.98999-2.19-2.20001-2.19Z"
+        fill="#3f3d56"
+      />
+      <path
+        d="M430.61398,74.41416h-10.60999c-1.21002,0-2.19,.97998-2.19,2.19v10.62c0,1.21002,.97998,2.19,2.19,2.19h10.60999c1.21002,0,2.20001-.97998,2.20001-2.19v-10.62c0-1.21002-.98999-2.19-2.20001-2.19Z"
+        fill="#3f3d56"
+      />
+      <path
+        d="M481.11398,74.91416h-10.60999c-1.21002,0-2.19,.97998-2.19,2.19v10.62c0,1.21002,.97998,2.19,2.19,2.19h10.60999c1.21002,0,2.20001-.97998,2.20001-2.19v-10.62c0-1.21002-.98999-2.19-2.20001-2.19Z"
+        fill="#3f3d56"
+      />
+      <path
+        d="M321.19229,78.95414h-84.81c-1.48004,0-2.67004,1.20001-2.67004,2.67004s1.19,2.66998,2.67004,2.66998h84.81c1.46997,0,2.66998-1.20001,2.66998-2.66998s-1.20001-2.67004-2.66998-2.67004Z"
+        fill="#3f3d56"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-404.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-404.vue
new file mode 100644
index 0000000..385cf6a
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-404.vue
@@ -0,0 +1,154 @@
+<template>
+  <svg
+    height="571"
+    viewBox="0 0 860 571"
+    width="860"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <path
+      d="M605.66974,324.95306c-7.66934-12.68446-16.7572-26.22768-30.98954-30.36953-16.482-4.7965-33.4132,4.73193-47.77473,14.13453a1392.15692,1392.15692,0,0,0-123.89338,91.28311l.04331.49238q46.22556-3.1878,92.451-6.37554c22.26532-1.53546,45.29557-3.2827,64.97195-13.8156,7.46652-3.99683,14.74475-9.33579,23.20555-9.70782,10.51175-.46217,19.67733,6.87923,26.8802,14.54931,42.60731,45.371,54.937,114.75409,102.73817,154.61591A1516.99453,1516.99453,0,0,0,605.66974,324.95306Z"
+      fill="#f2f2f2"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M867.57068,709.78146c-4.71167-5.94958-6.6369-7.343-11.28457-13.34761q-56.7644-73.41638-106.70791-151.79237-33.92354-53.23-64.48275-108.50439-14.54864-26.2781-28.29961-52.96872-10.67044-20.6952-20.8646-41.63793c-1.94358-3.98782-3.8321-7.99393-5.71122-12.00922-4.42788-9.44232-8.77341-18.93047-13.43943-28.24449-5.31686-10.61572-11.789-21.74485-21.55259-28.877a29.40493,29.40493,0,0,0-15.31855-5.89458c-7.948-.51336-15.28184,2.76855-22.17568,6.35295-50.43859,26.301-97.65922,59.27589-140.3696,96.79771A730.77816,730.77816,0,0,0,303.32241,496.24719c-1.008,1.43927-3.39164.06417-2.37419-1.38422q6.00933-8.49818,12.25681-16.81288A734.817,734.817,0,0,1,500.80465,303.06436q18.24824-11.82581,37.18269-22.54245c6.36206-3.60275,12.75188-7.15967,19.25136-10.49653,6.37146-3.27274,13.13683-6.21547,20.41563-6.32547,24.7701-.385,37.59539,27.66695,46.40506,46.54248q4.15283,8.9106,8.40636,17.76626,16.0748,33.62106,33.38729,66.628,10.68453,20.379,21.83683,40.51955,34.7071,62.71816,73.77854,122.897c34.5059,53.1429,68.73651,100.08874,108.04585,149.78472C870.59617,709.21309,868.662,711.17491,867.57068,709.78146Z"
+      fill="#e4e4e4"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M414.91613,355.804c-1.43911-1.60428-2.86927-3.20856-4.31777-4.81284-11.42244-12.63259-23.6788-25.11847-39.3644-32.36067a57.11025,57.11025,0,0,0-23.92679-5.54622c-8.56213.02753-16.93178,2.27348-24.84306,5.41792-3.74034,1.49427-7.39831,3.1902-11.00078,4.99614-4.11634,2.07182-8.15927,4.28118-12.1834,6.50883q-11.33112,6.27044-22.36816,13.09089-21.9606,13.57221-42.54566,29.21623-10.67111,8.11311-20.90174,16.75788-9.51557,8.03054-18.64618,16.492c-1.30169,1.20091-3.24527-.74255-1.94358-1.94347,1.60428-1.49428,3.22691-2.97938,4.84955-4.44613q6.87547-6.21546,13.9712-12.19257,12.93921-10.91827,26.54851-20.99312,21.16293-15.67614,43.78288-29.22541,11.30361-6.76545,22.91829-12.96259c2.33794-1.24675,4.70318-2.466,7.09572-3.6211a113.11578,113.11578,0,0,1,16.86777-6.86632,60.0063,60.0063,0,0,1,25.476-2.50265,66.32706,66.32706,0,0,1,23.50512,8.1314c15.40091,8.60812,27.34573,21.919,38.97,34.90915C418.03337,355.17141,416.09875,357.12405,414.91613,355.804Z"
+      fill="#e4e4e4"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M730.47659,486.71092l36.90462-13.498,18.32327-6.70183c5.96758-2.18267,11.92082-4.66747,18.08988-6.23036a28.53871,28.53871,0,0,1,16.37356.20862,37.73753,37.73753,0,0,1,12.771,7.91666,103.63965,103.63965,0,0,1,10.47487,11.18643c3.98932,4.79426,7.91971,9.63877,11.86772,14.46706q24.44136,29.89094,48.56307,60.04134,24.12117,30.14991,47.91981,60.556,23.85681,30.48041,47.38548,61.21573,2.88229,3.76518,5.75966,7.53415c1.0598,1.38809,3.44949.01962,2.37472-1.38808Q983.582,650.9742,959.54931,620.184q-24.09177-30.86383-48.51647-61.46586-24.42421-30.60141-49.17853-60.93743-6.16706-7.55761-12.35445-15.09858c-3.47953-4.24073-6.91983-8.52718-10.73628-12.47427-7.00539-7.24516-15.75772-13.64794-26.23437-13.82166-6.15972-.10214-12.121,1.85248-17.844,3.92287-6.16968,2.232-12.32455,4.50571-18.48633,6.75941l-37.16269,13.59243-9.29067,3.3981c-1.64875.603-.93651,3.2619.73111,2.652Z"
+      fill="#e4e4e4"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M366.37741,334.52609c-18.75411-9.63866-42.77137-7.75087-60.00508,4.29119a855.84708,855.84708,0,0,1,97.37056,22.72581C390.4603,353.75916,380.07013,341.5635,366.37741,334.52609Z"
+      fill="#f2f2f2"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M306.18775,338.7841l-3.61042,2.93462c1.22123-1.02713,2.4908-1.99013,3.795-2.90144C306.31073,338.80665,306.24935,338.79473,306.18775,338.7841Z"
+      fill="#f2f2f2"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M831.54929,486.84576c-3.6328-4.42207-7.56046-9.05222-12.99421-10.84836l-5.07308.20008A575.436,575.436,0,0,0,966.74929,651.418Q899.14929,569.13192,831.54929,486.84576Z"
+      fill="#f2f2f2"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M516.08388,450.36652A37.4811,37.4811,0,0,0,531.015,471.32518c2.82017,1.92011,6.15681,3.76209,7.12158,7.03463a8.37858,8.37858,0,0,1-.87362,6.1499,24.88351,24.88351,0,0,1-3.86126,5.04137l-.13667.512c-6.99843-4.14731-13.65641-9.3934-17.52227-16.55115s-4.40553-16.53895.34116-23.14544"
+      fill="#f2f2f2"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M749.08388,653.36652A37.4811,37.4811,0,0,0,764.015,674.32518c2.82017,1.92011,6.15681,3.76209,7.12158,7.03463a8.37858,8.37858,0,0,1-.87362,6.1499,24.88351,24.88351,0,0,1-3.86126,5.04137l-.13667.512c-6.99843-4.14731-13.65641-9.3934-17.52227-16.55115s-4.40553-16.53895.34116-23.14544"
+      fill="#f2f2f2"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M284.08388,639.36652A37.4811,37.4811,0,0,0,299.015,660.32518c2.82017,1.92011,6.15681,3.76209,7.12158,7.03463a8.37858,8.37858,0,0,1-.87362,6.1499,24.88351,24.88351,0,0,1-3.86126,5.04137l-.13667.512c-6.99843-4.14731-13.65641-9.3934-17.52227-16.55115s-4.40553-16.53895.34116-23.14544"
+      fill="#f2f2f2"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <circle cx="649.24878" cy="51" fill="hsl(var(--primary))" r="51" />
+    <path
+      d="M911.21851,176.29639c-24.7168-3.34094-52.93512,10.01868-59.34131,34.12353a21.59653,21.59653,0,0,0-41.09351,2.10871l2.82972,2.02667a372.27461,372.27461,0,0,0,160.65881-.72638C957.07935,195.76,935.93537,179.63727,911.21851,176.29639Z"
+      fill="#f0f0f0"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M805.21851,244.29639c-24.7168-3.34094-52.93512,10.01868-59.34131,34.12353a21.59653,21.59653,0,0,0-41.09351,2.10871l2.82972,2.02667a372.27461,372.27461,0,0,0,160.65881-.72638C851.07935,263.76,829.93537,247.63727,805.21851,244.29639Z"
+      fill="#f0f0f0"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M1020.94552,257.15423a.98189.98189,0,0,1-.30176-.04688C756.237,173.48919,523.19942,184.42376,374.26388,208.32122c-20.26856,3.251-40.59131,7.00586-60.40381,11.16113-5.05811,1.05957-10.30567,2.19532-15.59668,3.37793-6.31885,1.40723-12.55371,2.85645-18.53223,4.30567q-3.873.917-7.59472,1.84863c-3.75831.92773-7.57178,1.89453-11.65967,2.957-4.56787,1.17774-9.209,2.41309-13.79737,3.67188a.44239.44239,0,0,1-.05127.01465l.00049.001c-5.18261,1.415-10.33789,2.8711-15.32324,4.3252-2.69824.77929-5.30371,1.54785-7.79932,2.30664-.2788.07715-.52587.15136-.77636.22754l-.53614.16308c-.31054.09473-.61718.1875-.92382.27539l-.01953.00586.00048.001-.81152.252c-.96777.293-1.91211.5791-2.84082.86426-24.54492,7.56641-38.03809,12.94922-38.17139,13.00195a1,1,0,1,1-.74414-1.85644c.13428-.05274,13.69336-5.46289,38.32764-13.05762.93213-.28613,1.87891-.57226,2.84961-.86621l.7539-.23438c.02588-.00976.05176-.01757.07813-.02539.30518-.08691.60986-.17968.91943-.27343l.53711-.16309c.26758-.08105.53125-.16113.80127-.23535,2.47852-.75391,5.09278-1.52441,7.79785-2.30664,4.98731-1.45508,10.14746-2.91113,15.334-4.32813.01611-.00586.03271-.00976.04883-.01464v-.001c4.60449-1.2627,9.26269-2.50293,13.84521-3.68457,4.09424-1.06348,7.915-2.03223,11.67969-2.96192q3.73755-.93017,7.60937-1.85253c5.98536-1.45118,12.23291-2.90235,18.563-4.3125,5.29932-1.1836,10.55567-2.32227,15.62207-3.38282,19.84326-4.16211,40.19776-7.92285,60.49707-11.17871C523.09591,182.415,756.46749,171.46282,1021.2463,255.2011a.99974.99974,0,0,1-.30078,1.95313Z"
+      fill="#ccc"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M432.92309,584.266a6.72948,6.72948,0,0,0-1.7-2.67,6.42983,6.42983,0,0,0-.92-.71c-2.61-1.74-6.51-2.13-8.99,0a5.81012,5.81012,0,0,0-.69.71q-1.11,1.365-2.28,2.67c-1.28,1.46-2.59,2.87-3.96,4.24-.39.38-.78.77-1.18,1.15-.23.23-.46.45-.69.67-.88.84-1.78,1.65-2.69,2.45-.48.43-.96.85-1.45,1.26-.73.61-1.46,1.22-2.2,1.81-.07.05-.14.1-.21.16-.02.01-.03.03-.05.04-.01,0-.02,0-.03.02a.17861.17861,0,0,0-.07.05c-.22.15-.37.25-.48.34.04-.01995.08-.05.12-.07-.18.14-.37.28-.55.42-1.75,1.29-3.54,2.53-5.37,3.69a99.21022,99.21022,0,0,1-14.22,7.55c-.33.13-.67.27-1.01.4a85.96993,85.96993,0,0,1-40.85,6.02q-2.13008-.165-4.26-.45c-1.64-.24-3.27-.53-4.89-.86a97.93186,97.93186,0,0,1-18.02-5.44,118.65185,118.65185,0,0,1-20.66-12.12c-1-.71-2.01-1.42-3.02-2.11,1.15-2.82,2.28-5.64,3.38-8.48.55-1.37,1.08-2.74,1.6-4.12,4.09-10.63,7.93-21.36,11.61-32.13q5.58-16.365,10.53-32.92.51-1.68.99-3.36,2.595-8.745,4.98-17.53c.15-.56994.31-1.12994.45-1.7q.68994-2.52,1.35-5.04c1-3.79-1.26-8.32-5.24-9.23a7.63441,7.63441,0,0,0-9.22,5.24c-.43,1.62-.86,3.23-1.3,4.85q-3.165,11.74494-6.66,23.41-.51,1.68-1.02,3.36-7.71,25.41-16.93,50.31-1.11,3.015-2.25,6.01c-.37.98-.74,1.96-1.12,2.94-.73,1.93-1.48,3.86-2.23,5.79-.43006,1.13-.87006,2.26-1.31,3.38-.29.71-.57,1.42-.85,2.12a41.80941,41.80941,0,0,0-8.81-2.12l-.48-.06a27.397,27.397,0,0,0-7.01.06,23.91419,23.91419,0,0,0-17.24,10.66c-4.77,7.51-4.71,18.25,1.98,24.63,6.89,6.57,17.32,6.52,25.43,2.41a28.35124,28.35124,0,0,0,10.52-9.86,50.56939,50.56939,0,0,0,2.74-4.65c.21.14.42.28.63.43.8.56,1.6,1.13,2.39,1.69a111.73777,111.73777,0,0,0,14.51,8.91,108.35887,108.35887,0,0,0,34.62,10.47c.27.03.53.07.8.1,1.33.17,2.67.3,4.01.41a103.78229,103.78229,0,0,0,55.58-11.36q2.175-1.125,4.31-2.36,3.315-1.92,6.48-4.08c1.15-.78,2.27-1.57,3.38-2.4a101.04244,101.04244,0,0,0,13.51-11.95q2.35491-2.475,4.51-5.11005a8.0612,8.0612,0,0,0,2.2-5.3A7.5644,7.5644,0,0,0,432.92309,584.266Zm-165.59,23.82c.21-.15.42-.31.62-.47C267.89312,607.766,267.60308,607.936,267.33312,608.086Zm3.21-3.23c-.23.26-.44.52-.67.78a23.36609,23.36609,0,0,1-2.25,2.2c-.11.1-.23.2-.35.29a.00976.00976,0,0,0-.01.01,3.80417,3.80417,0,0,0-.42005.22q-.645.39-1.31994.72a17.00459,17.00459,0,0,1-2.71.75,16.79925,16.79925,0,0,1-2.13.02h-.02a14.82252,14.82252,0,0,1-1.45-.4c-.24-.12-.47-.25994-.7-.4-.09-.08-.17005-.16-.22-.21a2.44015,2.44015,0,0,1-.26995-.29.0098.0098,0,0,0-.01-.01c-.11005-.2-.23005-.4-.34-.6a.031.031,0,0,1-.01-.02c-.08-.25-.15-.51-.21-.77a12.51066,12.51066,0,0,1,.01-1.37,13.4675,13.4675,0,0,1,.54-1.88,11.06776,11.06776,0,0,1,.69-1.26c.02-.04.12-.2.23-.38.01-.01.01-.01.01-.02.15-.17.3-.35.46-.51.27-.3.56-.56.85-.83a18.02212,18.02212,0,0,1,1.75-1.01,19.48061,19.48061,0,0,1,2.93-.79,24.98945,24.98945,0,0,1,4.41.04,30.30134,30.30134,0,0,1,4.1,1.01,36.94452,36.94452,0,0,1-2.77,4.54C270.6231,604.746,270.58312,604.806,270.54308,604.856Zm-11.12-3.29a2.18029,2.18029,0,0,1-.31.38995A1.40868,1.40868,0,0,1,259.42309,601.566Z"
+      fill="hsl(var(--foreground))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M402.86309,482.136q-.13494,4.71-.27,9.42-.285,10.455-.59,20.92-.315,11.775-.66,23.54-.165,6.07507-.34,12.15-.465,16.365-.92,32.72c-.03,1.13-.07,2.25-.1,3.38q-.225,8.11506-.45,16.23-.255,8.805-.5,17.61-.18,6.59994-.37,13.21-1.34994,47.895-2.7,95.79a7.64844,7.64844,0,0,1-7.5,7.5,7.56114,7.56114,0,0,1-7.5-7.5q.75-26.94,1.52-53.88.675-24.36,1.37-48.72.225-8.025.45-16.06.345-12.09.68-24.18c.03-1.13.07-2.25.1-3.38.02-.99.05-1.97.08-2.96q.66-23.475,1.32-46.96.27-9.24.52-18.49.3-10.545.6-21.08c.09-3.09.17005-6.17.26-9.26a7.64844,7.64844,0,0,1,7.5-7.5A7.56116,7.56116,0,0,1,402.86309,482.136Z"
+      fill="hsl(var(--foreground))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M814.29118,484.2172a893.23753,893.23753,0,0,1-28.16112,87.94127c-3.007,7.94641-6.08319,15.877-9.3715,23.71185l.75606-1.7916a54.58274,54.58274,0,0,1-5.58953,10.61184q-.22935.32119-.46685.63642,1.16559-1.49043.4428-.589c-.25405.30065-.5049.60219-.7676.89546a23.66436,23.66436,0,0,1-2.2489,2.20318q-.30139.25767-.61188.5043l.93783-.729c-.10884.25668-.87275.59747-1.11067.74287a18.25362,18.25362,0,0,1-2.40479,1.21853l1.7916-.75606a19.0859,19.0859,0,0,1-4.23122,1.16069l1.9938-.26791a17.02055,17.02055,0,0,1-4.29785.046l1.99379.2679a14.0022,14.0022,0,0,1-3.40493-.917l1.79159.75606a12.01175,12.01175,0,0,1-1.67882-.89614c-.27135-.17688-1.10526-.80852-.01487.02461,1.13336.86595.14562.07434-.08763-.15584-.19427-.19171-.36962-.4-.55974-.595-.88208-.90454.99637,1.55662.39689.49858a18.18179,18.18179,0,0,1-.87827-1.63672l.75606,1.7916a11.92493,11.92493,0,0,1-.728-2.65143l.26791,1.9938a13.65147,13.65147,0,0,1-.00316-3.40491l-.2679,1.9938a15.96371,15.96371,0,0,1,.99486-3.68011l-.75606,1.7916a16.72914,16.72914,0,0,1,1.17794-2.29848,6.72934,6.72934,0,0,1,.72851-1.0714c.04915.01594-1.26865,1.51278-.56937.757.1829-.19767.354-.40592.539-.602.29617-.31382.61354-.60082.92561-.89791,1.04458-.99442-1.46188.966-.25652.17907a19.0489,19.0489,0,0,1,2.74925-1.49923l-1.79159.75606a20.31136,20.31136,0,0,1,4.99523-1.33984l-1.9938.2679a25.62828,25.62828,0,0,1,6.46062.07647l-1.9938-.2679a33.21056,33.21056,0,0,1,7.89178,2.2199l-1.7916-.75606c5.38965,2.31383,10.16308,5.74926,14.928,9.118a111.94962,111.94962,0,0,0,14.50615,8.9065,108.38849,108.38849,0,0,0,34.62226,10.47371,103.93268,103.93268,0,0,0,92.58557-36.75192,8.07773,8.07773,0,0,0,2.1967-5.3033,7.63232,7.63232,0,0,0-2.1967-5.3033c-2.75154-2.52586-7.94926-3.239-10.6066,0a95.63575,95.63575,0,0,1-8.10664,8.72692q-2.01736,1.914-4.14232,3.70983-1.21364,1.02588-2.46086,2.01121c-.3934.31081-1.61863,1.13807.26309-.19744-.43135.30614-.845.64036-1.27058.95478a99.26881,99.26881,0,0,1-20.33215,11.56478l1.79159-.75606a96.8364,96.8364,0,0,1-24.17119,6.62249l1.99379-.2679a97.64308,97.64308,0,0,1-25.75362-.03807l1.99379.2679a99.79982,99.79982,0,0,1-24.857-6.77027l1.7916.75607a116.02515,116.02515,0,0,1-21.7364-12.59112,86.87725,86.87725,0,0,0-11.113-6.99417,42.8238,42.8238,0,0,0-14.43784-4.38851c-9.43884-1.11076-19.0571,2.56562-24.24624,10.72035-4.77557,7.50482-4.71394,18.24362,1.97369,24.62519,6.8877,6.5725,17.31846,6.51693,25.43556,2.40567,7.81741-3.95946,12.51288-12.18539,15.815-19.94186,7.43109-17.45514,14.01023-35.31364,20.1399-53.263q9.09651-26.63712,16.49855-53.81332.91661-3.36581,1.80683-6.73869c1.001-3.78869-1.26094-8.32-5.23829-9.22589a7.63317,7.63317,0,0,0-9.22589,5.23829Z"
+      fill="hsl(var(--foreground))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M889.12382,482.13557l-2.69954,95.79311-2.68548,95.29418-1.5185,53.88362a7.56465,7.56465,0,0,0,7.5,7.5,7.64923,7.64923,0,0,0,7.5-7.5l2.69955-95.79311,2.68548-95.29418,1.51849-53.88362a7.56465,7.56465,0,0,0-7.5-7.5,7.64923,7.64923,0,0,0-7.5,7.5Z"
+      fill="hsl(var(--foreground))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M629.52566,700.36106h2.32885V594.31942h54.32863v-2.32291H631.85451V547.25214H673.8102q-.92256-1.17339-1.89893-2.31694H631.85451V515.38231c-.7703-.32846-1.54659-.64493-2.32885-.9435V544.9352h-45.652V507.07c-.78227.03583-1.55258.08959-2.3289.15527v37.71h-36.4201V516.68409c-.78227.34636-1.55258.71061-2.31694,1.0928V544.9352h-30.6158v2.31694h30.6158v44.74437h-30.6158v2.32291h30.6158V700.36106h2.31694V594.31942a36.41283,36.41283,0,0,1,36.4201,36.42007v69.62157h2.3289V594.31942h45.652Zm-84.401-108.36455V547.25214h36.4201v44.74437Zm38.749,0V547.25214h.91362a44.74135,44.74135,0,0,1,44.73842,44.74437Z"
+      opacity="0.2"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M615.30309,668.566a63.05854,63.05854,0,0,1-20.05,33.7c-.74.64-1.48,1.26-2.25,1.87q-2.805.25506-5.57.52c-1.53.14-3.04.29-4.54.43l-.27.03-.19-1.64-.76-6.64a37.623,37.623,0,0,1-3.3-32.44c2.64-7.12,7.42-13.41,12.12-19.65,6.49-8.62,12.8-17.14,13.03-27.65a60.54415,60.54415,0,0,1,7.9,13.33,16.432,16.432,0,0,0-5.12,3.76995c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39,1,.11,2,.21,3,.32a63.99025,63.99025,0,0,1,2.45,12.18A61.18851,61.18851,0,0,1,615.30309,668.566Z"
+      fill="hsl(var(--foreground))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M648.50311,642.356c-5.9,4.29-9.35,10.46-12.03,17.26a16.62776,16.62776,0,0,0-7.17,4.58c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39-2.68,8.04-5.14,16.36-9.88,23.15a36.98942,36.98942,0,0,1-12.03,10.91,38.49166,38.49166,0,0,1-4.02,1.99q-7.62.585-14.95,1.25-2.805.25506-5.57.52c-1.53.14-3.04.29-4.54.43q-.015-.825,0-1.65a63.30382,63.30382,0,0,1,15.25-39.86c.45-.52.91-1.03,1.38-1.54a61.7925,61.7925,0,0,1,16.81-12.7A62.65425,62.65425,0,0,1,648.50311,642.356Z"
+      fill="hsl(var(--primary))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M589.16308,699.526l-1.15,3.4-.58,1.73c-1.53.14-3.04.29-4.54.43l-.27.03c-1.66.17-3.31.34-4.96.51-.43-.5-.86-1.01-1.28-1.53a62.03045,62.03045,0,0,1,8.07-87.11c-1.32,6.91.22,13.53,2.75,20.1-.27.11-.53.22-.78.34a16.432,16.432,0,0,0-5.12,3.76995c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39,1,.11,2,.21,3,.32q.705.075,1.41.15c.07.15.13.29.2.44,2.85,6.18,5.92,12.39,7.65,18.83a43.66591,43.66591,0,0,1,1.02,4.91A37.604,37.604,0,0,1,589.16308,699.526Z"
+      fill="hsl(var(--primary))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M689.82123,554.48655c-8.60876-16.79219-21.94605-30.92088-37.63219-41.30357a114.2374,114.2374,0,0,0-52.5626-18.37992q-3.69043-.33535-7.399-.39281c-2.92141-.04371-46.866,12.63176-61.58712,22.98214a114.29462,114.29462,0,0,0-35.333,39.527,102.49972,102.49972,0,0,0-12.12557,51.6334,113.56387,113.56387,0,0,0,14.70268,51.47577,110.47507,110.47507,0,0,0,36.44425,38.74592C549.66655,708.561,565.07375,734.51,583.1831,735.426c18.24576.923,39.05418-23.55495,55.6951-30.98707a104.42533,104.42533,0,0,0,41.72554-34.005,110.24964,110.24964,0,0,0,19.599-48.94777c2.57368-18.08313,1.37415-36.73271-4.80123-54.01627a111.85969,111.85969,0,0,0-5.58024-12.9833c-1.77961-3.50519-6.996-4.7959-10.26142-2.69063a7.67979,7.67979,0,0,0-2.69064,10.26142q1.56766,3.08773,2.91536,6.27758l-.75606-1.7916a101.15088,101.15088,0,0,1,6.87641,25.53816l-.26791-1.99379a109.2286,109.2286,0,0,1-.06613,28.68252l.26791-1.9938a109.73379,109.73379,0,0,1-7.55462,27.67419l.75606-1.79159a104.212,104.212,0,0,1-6.67151,13.09835q-1.92308,3.18563-4.08062,6.22159c-.63172.8881-1.28287,1.761-1.939,2.63114-.85625,1.13555,1.16691-1.48321.28228-.36941-.15068.18972-.30049.3801-.45182.5693q-.68121.85165-1.3818,1.68765a93.61337,93.61337,0,0,1-10.17647,10.38359q-1.36615,1.19232-2.77786,2.33115c-.46871.37832-.932.77269-1.42079,1.12472.01861-.0134,1.57956-1.19945.65556-.511-.2905.21644-.57851.43619-.86961.65184q-2.90994,2.1558-5.97433,4.092a103.48509,103.48509,0,0,1-14.75565,7.7131l1.7916-.75606a109.21493,109.21493,0,0,1-27.59663,7.55154l1.9938-.26791a108.15361,108.15361,0,0,1-28.58907.0506l1.99379.2679a99.835,99.835,0,0,1-25.09531-6.78448l1.79159.75607a93.64314,93.64314,0,0,1-13.41605-6.99094q-3.17437-2-6.18358-4.24743c-.2862-.21359-.56992-.43038-.855-.64549-.9155-.69088.65765.50965.67021.51787a19.16864,19.16864,0,0,1-1.535-1.22469q-1.45353-1.18358-2.86136-2.4218a101.98931,101.98931,0,0,1-10.49319-10.70945q-1.21308-1.43379-2.37407-2.91054c-.33524-.4263-.9465-1.29026.40424.5289-.17775-.23939-.36206-.47414-.54159-.71223q-.64657-.85751-1.27568-1.72793-2.203-3.048-4.18787-6.24586a109.29037,109.29037,0,0,1-7.8054-15.10831l.75606,1.7916a106.58753,106.58753,0,0,1-7.34039-26.837l.26791,1.9938a97.86589,97.86589,0,0,1-.04843-25.63587l-.2679,1.9938A94.673,94.673,0,0,1,505.27587,570.55l-.75606,1.7916a101.55725,101.55725,0,0,1,7.19519-13.85624q2.0655-3.32328,4.37767-6.4847.52528-.71832,1.06244-1.42786c.324-.4279,1.215-1.49333-.30537.38842.14906-.18449.29252-.37428.43942-.56041q1.26882-1.60756,2.59959-3.1649A107.40164,107.40164,0,0,1,530.772,536.21508q1.47408-1.29171,2.99464-2.52906.6909-.56218,1.39108-1.11284c.18664-.14673.37574-.29073.56152-.43858-1.99743,1.58953-.555.43261-.10157.09288q3.13393-2.34833,6.43534-4.46134a103.64393,103.64393,0,0,1,15.38655-8.10791l-1.7916.75606c7.76008-3.25839,42.14086-10.9492,48.394-10.10973l-1.99379-.26791A106.22471,106.22471,0,0,1,628.768,517.419l-1.7916-.75606a110.31334,110.31334,0,0,1,12.6002,6.32922q3.04344,1.78405,5.96742,3.76252,1.38351.93658,2.73809,1.915.677.48917,1.34626.98885c.24789.185.49386.37253.74135.558,1.03924.779-1.43148-1.1281-.34209-.26655a110.84261,110.84261,0,0,1,10.36783,9.2532q2.401,2.445,4.63686,5.04515,1.14659,1.33419,2.24643,2.70757c.36436.45495,1.60506,2.101.08448.08457.37165.49285.74744.98239,1.11436,1.47884a97.97718,97.97718,0,0,1,8.39161,13.53807c1.79317,3.49775,6.98675,4.80186,10.26142,2.69064A7.67666,7.67666,0,0,0,689.82123,554.48655Z"
+      fill="hsl(var(--foreground))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M602.43116,676.88167a3.77983,3.77983,0,0,1-2.73939-6.55137c.09531-.37882.16368-.65085.259-1.02968q-.05115-.12366-.1029-.24717c-3.47987-8.29769-25.685,14.83336-26.645,22.63179a30.029,30.029,0,0,0,.52714,10.32752A120.39223,120.39223,0,0,1,562.77838,652.01a116.20247,116.20247,0,0,1,.72078-12.96332q.59712-5.293,1.65679-10.51055a121.78667,121.78667,0,0,1,24.1515-51.61646c6.87378.38364,12.898-.66348,13.47967-13.98532.10346-2.36972,1.86113-4.42156,2.24841-6.756-.65621.08607-1.32321.13985-1.97941.18285-.20444.0107-.41958.02149-.624.03228l-.07709.00346a3.745,3.745,0,0,1-3.07566-6.10115q.425-.52305.85054-1.04557c.43036-.53793.87143-1.06507,1.30171-1.60292a1.865,1.865,0,0,0,.13986-.16144c.49494-.61322.98971-1.21564,1.48465-1.82885a10.82911,10.82911,0,0,0-3.55014-3.43169c-4.95941-2.90463-11.80146-.89293-15.38389,3.59313-3.59313,4.486-4.27083,10.77947-3.023,16.3843a43.39764,43.39764,0,0,0,6.003,13.3828c-.269.34429-.54872.67779-.81765,1.02209a122.57366,122.57366,0,0,0-12.79359,20.2681c1.0163-7.93863-11.41159-36.60795-16.21776-42.68052-5.773-7.29409-17.61108-4.11077-18.62815,5.13562q-.01476.13428-.02884.26849,1.07082.60411,2.0964,1.28237a5.12707,5.12707,0,0,1-2.06713,9.33031l-.10452.01613c-9.55573,13.64367,21.07745,49.1547,28.74518,41.18139a125.11045,125.11045,0,0,0-6.73449,31.69282,118.66429,118.66429,0,0,0,.08607,19.15986l-.03231-.22593C558.90163,648.154,529.674,627.51374,521.139,629.233c-4.91675.99041-9.75952.76525-9.01293,5.72484q.01788.11874.03635.2375a34.4418,34.4418,0,0,1,3.862,1.86105q1.07082.60423,2.09639,1.28237a5.12712,5.12712,0,0,1-2.06712,9.33039l-.10464.01606c-.07528.01079-.13987.02157-.21507.03237-4.34967,14.96631,27.90735,39.12,47.5177,31.43461h.01081a125.07484,125.07484,0,0,0,8.402,24.52806H601.679c.10765-.3335.20443-.67779.3013-1.01129a34.102,34.102,0,0,1-8.30521-.49477c2.22693-2.73257,4.45377-5.48664,6.6807-8.21913a1.86122,1.86122,0,0,0,.13986-.16135c1.12956-1.39849,2.26992-2.78627,3.39948-4.18476l.00061-.00173a49.95232,49.95232,0,0,0-1.46367-12.72495Zm-34.37066-67.613.0158-.02133-.0158.04282Zm-6.64832,59.93237-.25822-.58084c.01079-.41957.01079-.83914,0-1.26942,0-.11845-.0215-.23672-.0215-.35508.09678.74228.18285,1.48464.29042,2.22692Z"
+      fill="hsl(var(--foreground))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <circle cx="95.24878" cy="439" fill="hsl(var(--foreground))" r="11" />
+    <circle cx="227.24878" cy="559" fill="hsl(var(--foreground))" r="11" />
+    <circle cx="728.24878" cy="559" fill="hsl(var(--foreground))" r="11" />
+    <circle cx="755.24878" cy="419" fill="hsl(var(--foreground))" r="11" />
+    <circle cx="723.24878" cy="317" fill="hsl(var(--foreground))" r="11" />
+    <path
+      d="M434.1831,583.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,434.1831,583.426Z"
+      fill="hsl(var(--foreground))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <circle cx="484.24878" cy="349" fill="hsl(var(--foreground))" r="11" />
+    <path
+      d="M545.1831,513.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,545.1831,513.426Z"
+      fill="hsl(var(--foreground))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <path
+      d="M403.1831,481.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,403.1831,481.426Z"
+      fill="hsl(var(--foreground))"
+      transform="translate(-169.93432 -164.42601)"
+    />
+    <circle cx="599.24878" cy="443" fill="hsl(var(--foreground))" r="11" />
+    <circle cx="426.24878" cy="338" fill="hsl(var(--foreground))" r="16" />
+    <path
+      d="M1028.875,735.26666l-857.75.30733a1.19068,1.19068,0,1,1,0-2.38136l857.75-.30734a1.19069,1.19069,0,0,1,0,2.38137Z"
+      fill="#cacaca"
+      transform="translate(-169.93432 -164.42601)"
+    />
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-500.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-500.vue
new file mode 100644
index 0000000..97326b7
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-500.vue
@@ -0,0 +1,215 @@
+<template>
+  <svg
+    height="699"
+    viewBox="0 0 1119 699"
+    width="1119"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>server down</title>
+    <circle cx="292.60911" cy="213" fill="#f2f2f2" r="213" />
+    <path
+      d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819"
+      fill="#2f2e41"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <path
+      d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356"
+      fill="hsl(var(--primary))"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <path
+      d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288"
+      fill="hsl(var(--primary))"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <path
+      d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788"
+      fill="#2f2e41"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <path
+      d="M117.22379,292.83905s15.41555-.47479,20.06141-3.783,23.713-7.2585,24.86553-1.95278,23.16671,26.38821,5.76263,26.5286-40.43935-2.711-45.07627-5.53549S117.22379,292.83905,117.22379,292.83905Z"
+      fill="#a8a8a8"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <path
+      d="M168.224,311.78489c-17.40408.14042-40.43933-2.71094-45.07626-5.53548-3.53126-2.151-4.93843-9.86945-5.40926-13.43043-.32607.014-.51463.02-.51463.02s.97638,12.43276,5.61331,15.2573,27.67217,5.67589,45.07626,5.53547c5.02386-.04052,6.7592-1.82793,6.66391-4.47526C173.87935,310.756,171.96329,311.75474,168.224,311.78489Z"
+      opacity="0.2"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <ellipse cx="198.60911" cy="424.5" fill="#3f3d56" rx="187" ry="25.43993" />
+    <ellipse cx="198.60911" cy="424.5" opacity="0.1" rx="157" ry="21.35866" />
+    <ellipse cx="836.60911" cy="660.5" fill="#3f3d56" rx="283" ry="38.5" />
+    <ellipse cx="310.60911" cy="645.5" fill="#3f3d56" rx="170" ry="23.12721" />
+    <path
+      d="M494,726.5c90,23,263-30,282-90"
+      fill="none"
+      stroke="#2f2e41"
+      stroke-miterlimit="10"
+      stroke-width="2"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <path
+      d="M341,359.5s130-36,138,80-107,149-17,172"
+      fill="none"
+      stroke="#2f2e41"
+      stroke-miterlimit="10"
+      stroke-width="2"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <path
+      d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566"
+      fill="none"
+      stroke="#2f2e41"
+      stroke-miterlimit="10"
+      stroke-width="2"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <path
+      d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z"
+      fill="#2f2e41"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <path
+      d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z"
+      opacity="0.1"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <rect
+      fill="#2f2e41"
+      height="357.51989"
+      rx="18.04568"
+      width="513.25314"
+      x="578.43291"
+      y="212.68859"
+    />
+    <rect
+      fill="#3f3d56"
+      height="267.83694"
+      width="478.71308"
+      x="595.70294"
+      y="231.77652"
+    />
+    <circle cx="835.05948" cy="223.29299" fill="#f2f2f2" r="3.02983" />
+    <path
+      d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z"
+      fill="#2f2e41"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <polygon
+      fill="#2f2e41"
+      points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466"
+    />
+    <path
+      d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
+      fill="#2f2e41"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <path
+      d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
+      opacity="0.1"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <ellipse
+      cx="1066.53846"
+      cy="654.13477"
+      fill="#f2f2f2"
+      rx="7.87756"
+      ry="2.42386"
+    />
+    <circle cx="835.05948" cy="545.66686" fill="#f2f2f2" r="11.51335" />
+    <polygon
+      opacity="0.1"
+      points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466"
+    />
+    <rect fill="#2f2e41" height="242" width="208" x="108.60911" y="159" />
+    <rect fill="#3f3d56" height="86" width="250" x="87.60911" y="135" />
+    <rect fill="#3f3d56" height="86" width="250" x="87.60911" y="237" />
+    <rect fill="#3f3d56" height="86" width="250" x="87.60911" y="339" />
+    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.4"
+      width="16"
+      x="271.60911"
+      y="150"
+    />
+    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.8"
+      width="16"
+      x="294.60911"
+      y="150"
+    />
+    <rect fill="#6c63ff" height="16" width="16" x="317.60911" y="150" />
+    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.4"
+      width="16"
+      x="271.60911"
+      y="251"
+    />
+    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.8"
+      width="16"
+      x="294.60911"
+      y="251"
+    />
+    <rect fill="#6c63ff" height="16" width="16" x="317.60911" y="251" />
+    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.4"
+      width="16"
+      x="271.60911"
+      y="352"
+    />
+    <rect
+      fill="#6c63ff"
+      height="16"
+      opacity="0.8"
+      width="16"
+      x="294.60911"
+      y="352"
+    />
+    <rect fill="#6c63ff" height="16" width="16" x="317.60911" y="352" />
+    <circle cx="316.60911" cy="538" fill="#2f2e41" r="79" />
+    <rect fill="#2f2e41" height="43" width="24" x="280.60911" y="600" />
+    <rect fill="#2f2e41" height="43" width="24" x="328.60911" y="600" />
+    <ellipse cx="300.60911" cy="643.5" fill="#2f2e41" rx="20" ry="7.5" />
+    <ellipse cx="348.60911" cy="642.5" fill="#2f2e41" rx="20" ry="7.5" />
+    <circle cx="318.60911" cy="518" fill="#fff" r="27" />
+    <circle cx="318.60911" cy="518" fill="#3f3d56" r="9" />
+    <path
+      d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z"
+      fill="#6c63ff"
+      transform="translate(-31.39089 -100.5)"
+    />
+    <ellipse
+      cx="417.21511"
+      cy="611.34365"
+      fill="#2f2e41"
+      rx="39.5"
+      ry="12.40027"
+      transform="translate(-238.28665 112.98044) rotate(-23.17116)"
+    />
+    <ellipse
+      cx="269.21511"
+      cy="664.34365"
+      fill="#2f2e41"
+      rx="39.5"
+      ry="12.40027"
+      transform="translate(-271.07969 59.02084) rotate(-23.17116)"
+    />
+    <path
+      d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z"
+      fill="#fff"
+      transform="translate(-31.39089 -100.5)"
+    />
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-coming-soon.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-coming-soon.vue
new file mode 100644
index 0000000..e511c43
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-coming-soon.vue
@@ -0,0 +1,262 @@
+<template>
+  <svg
+    data-name="Layer 1"
+    height="424.8366"
+    viewBox="0 0 979.32677 424.8366"
+    width="979.32677"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <path
+      d="M993.71816,412.83936H419.142a9.19888,9.19888,0,0,0,0,18.39776H435.417V651.3026a9.19888,9.19888,0,0,0,18.39776,0l.1398-220.06548h461.1557l42.52,220.06548a9.19887,9.19887,0,1,0,18.39775,0l2.67633-220.06548h15.01383a9.19888,9.19888,0,0,0,0-18.39776Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M518.73716,371.85047v38.9547H421.141a19.48915,19.48915,0,1,1-1.35523-38.95474q.67739-.02358,1.35523,0Z"
+      fill="#f2f2f2"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M521.13449,410.50552a1.49881,1.49881,0,0,1-1.49822,1.49822H419.40273a20.52615,20.52615,0,0,1,0-41.05229H519.63627a1.49827,1.49827,0,1,1,0,2.99653H419.40273a17.52964,17.52964,0,0,0,0,35.05924H519.63627A1.49883,1.49883,0,0,1,521.13449,410.50552Z"
+      fill="hsl(var(--primary))"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M518.73716,380.84H413.85905a.29966.29966,0,0,1-.00552-.59929H518.73716a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M518.73716,388.03169H413.85905a.29966.29966,0,0,1-.00552-.59929H518.73716a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M518.73716,395.22332H413.85905a.29966.29966,0,0,1-.00552-.59929H518.73716a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M518.73716,402.41487H413.85905a.29966.29966,0,0,1-.00552-.59929H518.73716a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M500.33941,330.80932v38.95474H402.74324a19.48915,19.48915,0,0,1-1.35522-38.95474q.67737-.02358,1.35522,0Z"
+      fill="#f2f2f2"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M502.73673,369.46442a1.49885,1.49885,0,0,1-1.49822,1.49826H401.005a20.52614,20.52614,0,0,1,0-41.05229H501.23851a1.49826,1.49826,0,1,1,0,2.99652H401.005a17.52964,17.52964,0,0,0,0,35.05928H501.23851A1.49884,1.49884,0,0,1,502.73673,369.46442Z"
+      fill="#3f3d56"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M500.33941,339.79886H395.4613a.29966.29966,0,0,1-.00553-.59929H500.33941a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M500.33941,346.99054H395.4613a.29966.29966,0,0,1-.00553-.59929H500.33941a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M500.33941,354.18217H395.4613a.29966.29966,0,0,1-.00553-.59929H500.33941a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M500.33941,361.37376H395.4613a.29966.29966,0,0,1-.00553-.59929H500.33941a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M613.87355,550.68347V516.71838a5.661,5.661,0,0,0-5.66085-5.66085H479.4284a5.661,5.661,0,0,0-5.66084,5.66085v33.96509Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <rect
+      fill="#ccc"
+      height="43.87158"
+      width="140.10602"
+      x="363.43092"
+      y="325.83868"
+    />
+    <path
+      d="M473.76756,620.02887V653.994a5.661,5.661,0,0,0,5.66084,5.66084H608.2127a5.661,5.661,0,0,0,5.66085-5.66084V620.02887Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <circle cx="432.77633" cy="294.70402" fill="#fff" r="4.24564" />
+    <circle cx="432.77633" cy="351.3125" fill="#fff" r="4.24564" />
+    <circle cx="433.00385" cy="406.72228" fill="#fff" r="4.24564" />
+    <path
+      d="M597.989,472.33053v38.9547H500.39287a19.48916,19.48916,0,0,1-1.35647-38.9547q.678-.02358,1.35647,0Z"
+      fill="#f2f2f2"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M600.38637,510.98558a1.49881,1.49881,0,0,1-1.49822,1.49822H498.65461a20.52615,20.52615,0,0,1-.0247-41.05229H598.88815a1.49827,1.49827,0,1,1,0,2.99653H498.65461a17.52963,17.52963,0,0,0,0,35.05923H598.88815A1.49885,1.49885,0,0,1,600.38637,510.98558Z"
+      fill="#3f3d56"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M597.989,481.32H493.111a.29966.29966,0,0,1-.00553-.59929H597.98913a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M597.989,488.51175H493.111a.29966.29966,0,0,1-.00553-.59929H597.98913a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M597.989,495.70338H493.111a.29966.29966,0,0,1-.00553-.59929H597.98913a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M597.989,502.89493H493.111a.29966.29966,0,0,1-.00553-.59929H597.98913a.29966.29966,0,0,1,0,.59929Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M483.36747,317.81415H438.90162a2.74745,2.74745,0,0,0-1.21689.28306l-11.22288,5.61835a2.0452,2.0452,0,0,0,0,3.76443l11.22288,5.61835a2.74718,2.74718,0,0,0,1.21689.28306h44.46585a2.33381,2.33381,0,0,0,2.4628-2.16532v-11.2367A2.3338,2.3338,0,0,0,483.36747,317.81415Z"
+      fill="#3f3d56"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M485.83027,319.97947v11.2367a2.33383,2.33383,0,0,1-2.4628,2.16532h-8.8589V317.81415h8.8589A2.33383,2.33383,0,0,1,485.83027,319.97947Z"
+      fill="hsl(var(--primary))"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M216.78083,537.99332a35.33951,35.33951,0,0,0,34.12552-6.01134c11.95262-10.03214,15.70013-26.56,18.74934-41.864q4.50949-22.63308,9.019-45.26617l-18.88217,13.00153c-13.57891,9.34993-27.46375,18.99939-36.86572,32.54233S209.42082,522.42587,216.975,537.08"
+      fill="#e6e6e6"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M218.39489,592.79741c-1.91113-13.92071-3.87625-28.0202-2.53572-42.09016,1.19057-12.4956,5.00277-24.70032,12.764-34.70734a57.73582,57.73582,0,0,1,14.81307-13.42309c1.48131-.935,2.84468,1.41257,1.36983,2.34348a54.88844,54.88844,0,0,0-21.71125,26.19626c-4.72684,12.02273-5.48591,25.12848-4.67135,37.90006.4926,7.72345,1.53656,15.39627,2.58859,23.05926a1.40615,1.40615,0,0,1-.94781,1.66928,1.3653,1.3653,0,0,1-1.6693-.94781Z"
+      fill="#f2f2f2"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M236.80246,568.16434a26.01425,26.01425,0,0,0,22.6665,11.69871c11.47417-.54466,21.04-8.55293,29.651-16.15584l25.46969-22.48783-16.85671-.80672c-12.12234-.58011-24.55745-1.12124-36.10356,2.617s-22.19457,12.73508-24.30583,24.68624"
+      fill="#e6e6e6"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M212.99392,600.79976c9.19853-16.27621,19.86805-34.36538,38.93262-40.14695A43.445,43.445,0,0,1,268.3022,558.962c1.73863.14991,1.30448,2.82994-.431,2.6803a40.36111,40.36111,0,0,0-26.133,6.91386c-7.36852,5.01554-13.10573,11.98848-17.96161,19.383-2.97439,4.52936-5.63867,9.25082-8.30346,13.966-.85161,1.50687-3.34078.41915-2.47922-1.10534Z"
+      fill="#f2f2f2"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M198.25523,617.93168a19.69836,19.69836,0,0,1,12.0709-16.49847v-9.40956h15.782v9.70608a19.68812,19.68812,0,0,1,11.41362,16.202l3.711,43.13835H194.54417Z"
+      fill="#f2f2f2"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M734.973,411.955l-4.69488-1.97685-3.22067-23.53551h-42.889l-3.491,23.43936-4.20031,2.10013a.99744.99744,0,0,0,.44611,1.88955h57.66283A.99739.99739,0,0,0,734.973,411.955Z"
+      fill="#e6e6e6"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M811.1898,389.574H600.50692a4.174,4.174,0,0,1-4.16467-4.174V355.69092H815.35446V385.4A4.17408,4.17408,0,0,1,811.1898,389.574Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M815.57469,369.73213H596.15V242.61337a5.0375,5.0375,0,0,1,5.03186-5.03167h209.361a5.03755,5.03755,0,0,1,5.03191,5.03167Z"
+      fill="#3f3d56"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M802.46932,360.50584h-193.214a3.88344,3.88344,0,0,1-3.87919-3.87908V250.68707a3.88365,3.88365,0,0,1,3.87919-3.87932h193.214a3.88366,3.88366,0,0,1,3.8792,3.87932V356.62676A3.88345,3.88345,0,0,1,802.46932,360.50584Z"
+      fill="#fff"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M751.57964,397.88662a11.6159,11.6159,0,0,1,17.666,2.27241l26.13446-4.64642,6.69716,15.19317-36.99908,6.04328a11.67883,11.67883,0,0,1-13.49855-18.86244Z"
+      fill="#ffb6b6"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M775.77611,417.286l27.24571-.33963,3.44882-.04668,55.43253-.69843s15.05312-14.3609,28.16068-29.1465l-1.83719-13.28833A54.29159,54.29159,0,0,0,870.023,340.1519C851.24988,352.696,840.363,377.52559,840.363,377.52559l-34.37018,8.22071-3.43848.82227-21.35608,5.10326Z"
+      fill="hsl(var(--primary))"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M915.25011,498.96167H864.39249c0,2.17915-55.59414,3.94772-55.59414,3.94772a20.30858,20.30858,0,0,0-3.33166,3.15818,19.59694,19.59694,0,0,0-4.58,12.63271v3.15818a19.74588,19.74588,0,0,0,19.73861,19.73861h94.62478a19.75579,19.75579,0,0,0,19.73862-19.73861v-3.15818A19.76607,19.76607,0,0,0,915.25011,498.96167Z"
+      fill="#e4e4e4"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <rect
+      fill="#e4e4e4"
+      height="118.48951"
+      width="20.52816"
+      x="747.4019"
+      y="303.23122"
+    />
+    <path
+      d="M799.31222,658.58132c0,2.218,31.10721.858,69.47992.858s69.47991,1.36012,69.47991-.858-31.1072-19.807-69.47991-19.807S799.31222,656.36323,799.31222,658.58132Z"
+      fill="#e4e4e4"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <polygon
+      fill="#ffb6b6"
+      points="675.186 407.461 659.908 407.46 652.64 348.531 675.188 348.532 675.186 407.461"
+    />
+    <path
+      d="M789.41863,659.852l-49.2623-.00183v-.62309a19.17528,19.17528,0,0,1,19.17426-19.17395h.00122l30.08773.00122Z"
+      fill="#2f2e41"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <polygon
+      fill="#ffb6b6"
+      points="630.031 407.461 614.753 407.46 607.485 348.531 630.033 348.532 630.031 407.461"
+    />
+    <path
+      d="M744.2636,659.852l-49.2623-.00183v-.62309a19.1753,19.1753,0,0,1,19.17426-19.17395h.00122l30.08773.00122Z"
+      fill="#2f2e41"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <circle cx="766.88656" cy="41.63615" fill="#ffb6b6" r="26.56401" />
+    <path
+      d="M920.21655,461.22417s8.91308,47.1307-24.99958,53.13247-82.86639,10.21993-82.86639,10.21993L790.36706,627.14324l-29.53443-2.63675s3.928-123.46737,13.5876-133.127,70.71212-38.58282,70.71212-38.58282Z"
+      fill="#2f2e41"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M853.98286,441.47135,839.151,456.35062s-107.0941,17.25-111.22553,41.9852c-6.23747,37.34427-13.60493,118.552-13.60493,118.552l32.1988-2.41491,12.62647-92.31123,51.5182-11.71874L869.27729,478.5Z"
+      fill="#2f2e41"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M902.78526,263.36115c-2.6223-4.94751-5.95413-14.80785-11.24679-16.63657a42.07731,42.07731,0,0,0-9.05841-1.92972l-8.99618,3.46009,4.89616-3.808q-1.42988-.08519-2.85817-.13928l-6.0699,2.33453,3.10542-2.41532c-5.65883-.05808-11.5.53031-15.88468,3.9752-3.73817,2.93677-7.44169,14.06185-8.04057,18.77753a35.9171,35.9171,0,0,0,.6603,13.53055l1.53716,1.46166a18.85936,18.85936,0,0,0,1.206-3.83883,18.18056,18.18056,0,0,1,8.70263-11.80641l.08368-.0472c2.5782-1.451,5.7065-1.3841,8.66308-1.27769l14.04158.50527c3.37829.12158,7.01608.33533,9.64978,2.45443a15.888,15.888,0,0,1,3.85826,5.58929c1.30868,2.6414,3.8661,12.60418,3.8661,12.60418s1.44689-1.88062,2.1404-.48092a48.39766,48.39766,0,0,0,2.01437-11.23347A22.00877,22.00877,0,0,0,902.78526,263.36115Z"
+      fill="#2f2e41"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M995.69426,290.88349A11.61582,11.61582,0,0,0,985.181,305.26136l-21.3614,15.75722,6.40951,15.31674,29.8539-22.67594a11.67883,11.67883,0,0,0-4.38876-22.77589Z"
+      fill="#ffb6b6"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M992.25627,323.052l-53.551,59.4744s-25.60913-8.19816-45.41466-17.08624l-8.8977-27.32787a54.34329,54.34329,0,0,1-2.60112-19.66442c27.45606-7.306,59.391,19.87863,59.391,19.87863l40.08517-31.39877Z"
+      fill="hsl(var(--primary))"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M867.301,465.6169c-9.554-3.30029-19.43312-6.71277-30.08912-7.99385l-.45773-.05533.12632-.443c11.03073-38.7308,8.27761-63.50657,2.87195-100.72306a37.59072,37.59072,0,0,1,21.5483-39.50121l.06542-.02958,30.43436-1.93391.06935-.00423,22.13437,6.50989a15.18313,15.18313,0,0,1,10.86724,14.83111c-.23987,12.23937.26868,25.9043.80711,40.37114,1.20787,32.45569,2.45686,66.01647-4.63045,87.79166l-.03718.11412-.09462.07416a36.09883,36.09883,0,0,1-23.08086,8.10758C887.90057,472.73235,877.76186,469.23034,867.301,465.6169Z"
+      fill="hsl(var(--primary))"
+      transform="translate(-110.33661 -237.5817)"
+    />
+    <path
+      d="M1088.24817,662.4183H111.75183a1.41521,1.41521,0,1,1,0-2.83042h976.49634a1.41521,1.41521,0,1,1,0,2.83042Z"
+      fill="#ccc"
+      transform="translate(-110.33661 -237.5817)"
+    />
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-offline.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-offline.vue
new file mode 100644
index 0000000..9e50b19
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/icon-offline.vue
@@ -0,0 +1,112 @@
+<template>
+  <svg
+    height="458.68642"
+    viewBox="0 0 656 458.68642"
+    width="656"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <rect fill="#3f3d56" height="2" width="656" y="434.34322" />
+    <g>
+      <path
+        d="M471.97092,210.81397c-6.0733-36.41747-37.72842-64.16942-75.86423-64.16942H240.14931c-38.12099,0-69.76869,27.72972-75.86421,64.12497-.70358,4.16241-1.06653,8.44331-1.06653,12.80573v135.88599c0,4.36237,.36295,8.63589,1.06653,12.79831,4.85126,28.99625,25.92996,52.49686,53.58563,60.84393,7.05095,2.13306,14.53143,3.28104,22.27859,3.28104h155.9574c7.74716,0,15.22763-1.14798,22.27859-3.28104,27.66309-8.35449,48.74921-31.86993,53.58563-60.88837,.6962-4.14758,1.05911-8.40628,1.05911-12.75388V223.57525c0-4.34758-.36292-8.61369-1.05911-12.76128h-.00003Zm-62.66592,222.28954c-4.2883,.76285-8.69516,1.16281-13.19827,1.16281H240.14931c-4.50313,0-8.90997-.39999-13.19829-1.16281-35.01768-6.22885-61.60677-36.83228-61.60677-73.64224v-45.10526c0-127.45004,103.31242-165.58582,230.76244-165.58582,41.31314,0,74.80505,33.49194,74.80505,74.80505v135.88599c-100.29059,13.42047-26.58911,67.41339-61.60678,73.64224l.00003,.00003Z"
+        fill="#3f3d56"
+      />
+      <polygon
+        fill="hsl(var(--primary))"
+        points="349.16196 249.18644 355.16196 288.18642 443.16196 276.18642 434.66196 230.6195 349.16196 249.18644"
+      />
+      <rect
+        fill="#2f2e41"
+        height="37.66125"
+        width="36.38461"
+        x="381.84177"
+        y="30.34218"
+      />
+      <polygon
+        fill="#ffb6b6"
+        points="385.16196 70.18643 394.16196 43.18643 411.70447 43.18643 412.62653 70.18643 385.16196 70.18643"
+      />
+      <polygon
+        isolation="isolate"
+        opacity=".1"
+        points="385.16196 70.18643 394.16196 43.18643 411.70447 43.18643 412.62653 70.18643 385.16196 70.18643"
+      />
+      <path
+        d="M394.66196,310.68642l-1,104-1,8v11.48425l15,1.51575,1-23s16-45,12-80-2-25-2-25l-24,3Z"
+        fill="#ffb6b6"
+      />
+      <path
+        d="M404.18408,318.85363l-36.90134,97.23831-1.97873,7.81567-4.1777,10.69742-14.52368-4.04477,7.43539-21.78796s1.46619-47.7373,17.92432-78.88422,10.9574-22.5596,10.9574-22.5596l21.26434,11.52512v.00003Z"
+        fill="#ffb6b6"
+      />
+      <path
+        d="M385.16196,67.18643l-27,12,17.23959,89.01208-2.72385,127.75565-18,38s-3.01575,21.73227,27.98425,7.73227,66-18,66-18l-8.5-58.5-7.5-153.5,1-34-22-14s-26.5,3.5-26.5,3.50001Z"
+        fill="#2f2e41"
+      />
+      <path
+        d="M370.1243,335.34322l-29.96231-50.15677,34.23959-116.98792-16.23959-89.01208,28.49045-12.19685s14.74915,14.36248,14.74915,26.20894-31.27728,242.1447-31.27728,242.1447v-.00003Z"
+        fill="#e6e6e6"
+      />
+      <path
+        d="M435.1243,325.34322l-27.19693-233.62811c-.34341-2.94999,.16013-5.93678,1.45178-8.6111l7.78284-16.11441,30.5,8.69685-12.26041,95.51208,32.76041,93.98792-33.03769,60.15677Z"
+        fill="#e6e6e6"
+      />
+      <path
+        d="M410.66196,433.68642s-19-11-21-5-3,11-3,11c0,0-5,19,10,19s14-8.64172,14-8.64172v-16.35828Z"
+        fill="#2f2e41"
+      />
+      <path
+        d="M344.53574,427.60598s21.69977-3.33459,21.3801,2.9819c-.3197,6.31647-1.20709,11.33768-1.20709,11.33768,0,0-2.25433,19.51712-16.22662,14.06046s-9.89713-13.14252-9.89713-13.14252l5.95078-15.23749-.00003-.00003Z"
+        fill="#2f2e41"
+      />
+      <circle cx="404.10297" cy="33.02146" fill="#ffb6b6" r="24.85993" />
+      <path
+        d="M423.96469,10.86766c-1.15707-6.12936-7.44913-10.27514-13.66504-10.79501s-12.30453,1.82726-17.90228,4.57921c-3.79456,1.86548-7.53061,3.96811-10.60425,6.87182s-5.46063,6.69692-6.01202,10.88913c-.19507,1.48324-.1698,3.03289-.77692,4.40016-.75845,1.708-2.38654,2.86795-3.36917,4.4576-1.76227,2.85096-.95267,6.99858,1.75238,8.97753-3.40024,1.44912-6.89398,2.96069-9.48602,5.59563s-4.08878,6.70308-2.66644,10.11462c.50323,1.20699,1.33481,2.26349,1.76489,3.49843,.81668,2.34499,.03943,5.00909-1.40924,7.02585s-3.49316,3.51228-5.50174,4.97226c5.16196,1.01177,10.43097,1.80015,15.66992,1.32811s10.49707-2.30805,14.29086-5.95176c3.79379-3.64371,5.88083-9.26437,4.51974-14.34539-1.04269-3.89231-3.95898-7.30301-3.95712-11.33256,.00143-3.09747,1.7431-5.89158,3.4249-8.49271,3.67291-5.68066,7.34579-11.36132,11.01868-17.04197,.66068-1.02183,1.35739-2.07924,2.4014-2.70425,1.77606-1.06326,4.0798-.59568,5.95227,.28683,1.87244,.88252,3.58304,2.14867,5.57941,2.69585,4.07452,1.11677,8.80106-1.44789,10.08575-5.47261"
+        fill="#2f2e41"
+      />
+      <path
+        d="M409.27951,61.42523c-2.07159,2.0061-5.05701,2.65225-7.82379,3.46516s-5.70978,2.09141-6.95499,4.69243c-1.22101,2.55043-.33459,5.78793,1.68692,7.76505s4.95816,2.80999,7.78555,2.77077c2.82736-.03922,5.58282-.86796,8.24176-1.8301,7.27054-2.63087,14.15665-6.32148,20.37314-10.919-4.02679-1.11411-6.66107-5.81614-5.50836-9.83205,.93768-3.26677,3.80499-5.54528,5.75616-8.32809,3.35959-4.79151,3.91925-11.10753,2.80676-16.85277-1.11246-5.74524-3.73163-11.07097-6.32358-16.3176-.81934-1.65853-1.65805-3.34513-2.93619-4.68245-1.27814-1.33731-3.08783-2.29539-4.92776-2.10379-3.05334,.31795-5.00302,3.66989-5.02377,6.7397s1.32593,5.95491,2.34732,8.84988c1.05231,2.98259,1.78381,6.14409,1.50146,9.29425-.2366,2.63989-1.19669,5.21132-2.74811,7.36029-1.19809,1.65954-2.72479,3.05223-4.0275,4.63097-1.00714,1.22055-1.90009,2.60309-2.16486,4.16321-.48181,2.83914,1.18356,5.71186,.72714,8.55519-.48248,3.0056-3.6452,5.3067-6.65341,4.84085"
+        fill="#2f2e41"
+      />
+      <g>
+        <circle
+          cx="333.2486"
+          cy="323.64455"
+          fill="hsl(var(--primary))"
+          r="85"
+        />
+        <g>
+          <path
+            d="M384.17838,316.82296h-10.56668c-1.64377-9.68713-6.7168-18.46011-14.2923-24.71729-17.43427-14.39993-43.24109-11.94022-57.64099,5.49411-.04913,.05563-.09644,.11282-.14169,.17151-1.15063,1.49146-.87427,3.63333,.61716,4.784,1.49118,1.1507,3.63306,.87448,4.78394-.61697,6.25537-7.5788,15.72369-12.40167,26.31064-12.40167,16.20853,.00195,30.17899,11.40631,33.42572,27.28629h-9.31805c-.3988,.00012-.78458,.13992-1.09082,.39502-.72375,.60281-.82175,1.6781-.21915,2.40186l13.41125,16.09894c.06577,.07889,.13855,.1517,.21759,.21747,.72324,.60327,1.79871,.50583,2.40186-.21747l13.41125-16.09894c.25504-.30624,.3949-.69223,.39514-1.09082,.00027-.94186-.763-1.70566-1.70486-1.70605v.00003Z"
+            fill="#fff"
+          />
+          <path
+            d="M364.34329,344.7337c-1.49146-1.15063-3.63333-.87433-4.78394,.6171-4.96201,6.00781-11.83066,10.13629-19.46436,11.69922-18.46167,3.77988-36.49231-8.12213-40.27225-26.58392h9.3183c.94186-.0004,1.70514-.76419,1.70486-1.70605-.00027-.39853-.14011-.78452-.39514-1.09082l-13.41125-16.09888c-.60312-.72336-1.67862-.8208-2.40186-.21753-.07904,.06577-.15182,.13855-.21759,.21753l-13.41125,16.09888c-.6026,.72375-.50461,1.7991,.21915,2.40186,.30624,.25516,.69205,.3949,1.09082,.39502h10.56641c1.64404,9.68723,6.7168,18.46011,14.29254,24.71729,17.43427,14.39999,43.24109,11.94022,57.64099-5.49405,.04913-.05569,.09619-.11295,.14142-.17163,1.15088-1.49146,.87454-3.63327-.61691-4.784h.00006Z"
+            fill="#fff"
+          />
+        </g>
+      </g>
+      <path
+        id="uuid-da16df1e-5659-4232-96f6-61e8c639a9ec-574"
+        d="M356.98148,237.19363c-1.02939,7.36621-5.66458,12.80598-10.35239,12.15012-4.68781-.65588-7.65225-7.15837-6.62149-14.52707,.37137-2.94914,1.4436-5.76646,3.12701-8.21626l4.75577-31.15587,14.57297,2.54338-6.23553,30.44414c.94736,2.81844,1.20581,5.82278,.75369,8.76157h-.00003Z"
+        fill="#ffb6b6"
+      />
+      <path
+        d="M369.66196,77.68643s-15-5-17,13-4,39.99999-4,39.99999c0,0-9,21-5,32s11,3.3307,4,12.66534-6.02478,40.04724-6.02478,40.04724l22.52478-1.13387s12.5-82.57875,12.5-84.57875-7-52-7-52v.00004Z"
+        fill="#e6e6e6"
+      />
+      <g>
+        <path
+          id="uuid-6bf35aa9-e432-4b51-af77-8f4eb19e6e42-575"
+          d="M467.16132,233.84998c.27881,7.43257-3.33017,13.60114-8.06033,13.7778s-8.78937-5.70491-9.06732-13.14017c-.15176-2.96857,.40961-5.93028,1.63712-8.63741l-.78369-31.507,14.79315-.05261-.798,31.0659c1.42709,2.60854,2.20859,5.52095,2.27905,8.49347l.00003,.00002Z"
+          fill="#ffb6b6"
+        />
+        <path
+          d="M444.06961,77.34876s15.08694-4.73121,16.76505,13.30165,3.28473,51.06508,3.28473,51.06508c0,0,8.62338,21.15744,4.42749,32.08421s-11.05774,3.13365-4.22565,12.59187c6.83212,9.45822,4.37997,36.13126,4.37997,36.13126l-22.50095-1.53612s-10.09427-78.77167-10.05853-80.77133,7.92792-62.86664,7.92792-62.86664l-.00003,.00002Z"
+          fill="#e6e6e6"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/warning.svg b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/warning.svg
new file mode 100644
index 0000000..951a905
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/icons/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="524.67001" height="418.27099" viewBox="0 0 524.67001 418.27099" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M442.17403,400.47713c2.06599,.12871,3.20692-2.43846,1.64338-3.93389l-.1557-.61814c.0204-.04935,.04089-.09868,.06153-.14794,1.23211-2.94003,4.62545-4.33201,7.57137-3.11404,9.3142,3.85087-.51966,12.69986,.21957,18.68773,.25911,2.06671,8.35473,2.18034,7.89681,4.2086,4.30482-9.41207,6.56835-19.68889,6.56478-30.02306-.0009-2.59653-.14392-5.19297-.43543-7.78281-.23975-2.11845-.56985-4.22389-.9969-6.30999-2.30966-11.27639-7.30614-22.01572-14.51084-30.98461-3.46263-1.89129-1.35074-4.85018-3.09586-8.39544-.62694-1.27868-6.21792-1.30745-6.45092-2.70892,.25019,.03272,3.86434-3.721,2.6705-5.5767-.78555-1.22107-.54106-2.7763,.4681-3.82017,.09887-.1023,.19234-.2103,.27796-.32648,2.98093-4.04443,7.09003-3.33985,9.23695,2.15406,4.58304,2.31107,4.62871,6.14647,1.81834,9.83619-1.78798,2.34745-2.03264,5.52304-3.60129,8.03604,.16157,.20664,.32958,.40684,.49112,.61348,2.96237,3.79686,5.52482,7.87809,7.68524,12.16592-.61182-4.76599,.28705-10.50831,1.8215-14.21023,1.75933-4.24835,5.06953-7.8221,7.96883-11.49665,3.46275-4.38865,10.5104-2.39707,11.12286,3.15951,.00588,.05337,.0116,.10665,.01724,.16003-.42884,.24212-.84895,.49935-1.25929,.77094-2.33882,1.54808-1.52824,5.17442,1.24391,5.60071l.06278,.00965c-.1545,1.54372-5.63258,6.40679-6.01957,7.91187,3.70514,14.30838,.93282,16.19755-10.46624,16.43703l-.59825,.8522c1.08024,3.1058,1.94956,6.2861,2.60235,9.50743,.61462,2.99021,1.042,6.01282,1.28197,9.04845,.29847,3.82994,.27396,7.6795-.04769,11.50325l.01933-.13563c.81879-4.21143,3.1039-8.1457,6.42284-10.87249,4.94421-4.06436,11.93091-5.56281,17.2652-8.83022,2.56778-1.57285,5.85959,.45742,5.41241,3.4352l-.02177,.14262c-.79432,.32315-1.56922,.69808-2.31831,1.11814-.42921,.24237-.84965,.49978-1.26032,.77165-2.33916,1.54848-1.52796,5.1753,1.24498,5.60009l.06281,.00962c.0452,.00645,.08399,.01291,.12913,.0194-1.3617,3.23628-14.33553,7.80147-16.71149,10.39229-2.31031,12.49793-1.17531,12.12596-11.81075,8.49032h-.00647c-1.16085,5.06419-2.8578,10.01225-5.03931,14.72794l-18.0202,.00623c-.06471-.2002-.12288-.40688-.18109-.60712,1.66645,.10285,3.34571,.00534,4.98619-.29875-1.33757-1.64013-2.67509-3.29317-4.01266-4.93324-.0323-.03228-.05819-.06459-.08402-.09686l-.02036-.02517-1.85532-6.10724c.14644-1.35476,.38536-2.69828,.70958-4.02051l.00049-.00037v.00006Z" fill="#f2f2f2"/><path d="M251.74443,416.41995l-159.45702,.05516c-8.01074,.00277-15.18649-4.13684-19.19426-11.07295-2.00413-3.46855-3.00642-7.27337-3.00774-11.07904-.00132-3.80518,.99882-7.61119,3.00007-11.08063l79.67786-145.04905c4.00346-6.93937,11.17634-11.08346,19.18708-11.08623s15.18649,4.13635,19.19475,11.07295l79.78843,145.01196c1.99876,3.45927,2.99861,7.25971,2.99894,11.06293-.00015,3.80322-.99981,7.60874-3.00154,11.07868-4.00297,6.93889-11.17585,11.08346-19.1866,11.08623h.00002Zm-179.65463-22.09948c-.00026,3.46387,17.5953-4.00023,19.41817-.8451,3.64623,6.31026-6.50934,21.00225,.77874,20.99973,0,0,173.27016-3.828,176.91202-10.14078,1.82069-3.15639,2.73062-6.61911,2.72942-10.08102s-.91353-6.92351-2.73688-10.07864l-79.78845-145.01196c-3.63597-6.2922-10.16364-10.05801-17.45172-10.05549-7.28467,.00252-99.86105,161.74891-99.86132,165.21326h.00002Z" fill="#3f3d56"/><path d="M253.51521,414.41934c-1.99862,4.00069,91.61376,2.7712,92.72051,2.77082,0,0,26.3119-.58131,26.86492-1.53993,.27648-.47931,.41466-1.00515,.41448-1.53084s-.13873-1.05137-.4156-1.5305l-12.11626-22.02074c-.55215-.9555-1.54341-1.52736-2.65013-1.52698-.04608,.00002-.11394,.04093-.20168,.11933-16.16328,14.44385-36.0828,23.99237-57.75707,24.31469-23.047,.34272-46.73217,.6899-46.85919,.94416h.00002Z" fill="#3f3d56"/><path d="M0,417.0814c.00023,.66003,.53044,1.18982,1.19047,1.18959l522.28995-.18066c.65997-.00023,1.18982-.53038,1.18959-1.19041-.00023-.65997-.53044-1.18982-1.19041-1.18959l-522.28995,.18066c-.66003,.00023-1.18988,.53044-1.18965,1.19041Z" fill="#ccc"/><g><polygon points="403.87773 411.30541 394.83299 411.30765 390.51828 376.42194 403.86746 376.41823 403.87773 411.30541" fill="#a0616a"/><path d="M372.88925,411.11096h0c-.28145,.4744-.42951,2.00528-.42932,2.55685h0c.00059,1.6954,1.37542,3.06935,3.07089,3.06876l28.01047-.00969c1.15659-.0004,2.09391-.93832,2.09351-2.09496l-.0004-1.16617s1.38444-3.50542-1.46987-7.82444c0,0-3.54448,3.38386-8.84444-1.91244l-1.56336-2.82981-11.30656,8.27506-6.26838,.77377c-1.3714,.16927-2.58738-.02532-3.29241,1.16307h-.00012Z" fill="#2f2e41"/></g><g><polygon points="369.19708 381.46752 360.62951 384.36642 345.36911 352.70019 358.01396 348.42131 369.19708 381.46752" fill="#a0616a"/><path d="M339.77867,391.20807h0c-.11468,.53956,.23535,2.03724,.41217,2.5597h0c.54355,1.60589,2.28601,2.46714,3.89196,1.92358l26.53193-8.98019c1.09554-.3708,1.68312-1.55951,1.31228-2.65512l-.37389-1.10461s.18882-3.76416-3.8984-6.94155c0,0-2.27401,4.34084-8.99107,1.02096l-2.38732-2.18005-8.0607,11.46034-5.69037,2.74062c-1.24494,.59958-2.45919,.80471-2.74651,2.15628l-.00009,.00003Z" fill="#2f2e41"/></g><polygon points="355.22599 179.09003 337.68255 237.19081 316.97199 289.45207 349.76053 364.08569 361.91802 358.67731 347.37062 290.11706 377.87822 243.59436 392.11437 388.82623 404.27349 388.14652 420.76309 212.84336 423.11421 174.67566 355.22599 179.09003" fill="#2f2e41"/><path d="M408.20979,50.38513l-25.66813,4.73752-2.02258,11.48454-15.53439,7.43609-8.07702,84.4428s-13.50433,17.56819-2.69414,22.96862l68.9007-6.77904s3.37327-12.4903-.00473-13.67529-3.38832-31.01955-3.38832-31.01955l15.51573-61.36599-22.97048-8.09829-4.05664-10.13141Z" fill="#e6e6e6"/><circle cx="393.06995" cy="29.43589" r="20.7276" fill="#a0616a"/><path d="M406.79605,32.51227c-1.65401,.9055-.08471,5.22869-1.11848,5.60245-1.19492,.43202-5.55162-4.52715-5.60554-10.08176-.01633-1.68115,.37051-2.48839-.00155-4.48164-.48668-2.6073-1.98045-5.68253-3.36317-5.60089-.81965,.04839-1.62013,1.20723-1.67986,2.2414-.0837,1.44941,1.32419,2.01989,1.12139,2.80064-.38627,1.4871-6.29829,2.5138-8.40308,.00291-1.65013-1.9685-.38463-5.4247-1.12236-5.60167-.54378-.13045-1.12759,1.77241-3.35988,3.9226-.84103,.8101-2.09186,2.0149-2.80044,1.68159-1.02397-.48167-.28003-3.87624-.56157-3.92125-.23314-.03727-.37947,2.3487-1.67908,4.48223-1.66968,2.74103-5.11398,4.85374-6.72112,3.92377-.98466-.56978-1.06245-2.15606-1.12158-3.36084-.1245-2.53816-3.81308-8.37644-2.85882-11.09166,1.94221-5.5263,5.2701-1.63078,6.7752-3.47504,2.03756-2.49669,3.86572-1.15434,7.28133-3.92396,3.33668-2.70564,3.36577-5.42504,5.60011-5.604,2.01221-.16116,2.7278,1.98528,5.04242,1.67887,1.96079-.25957,2.38749-1.92436,3.92087-1.68198,1.40389,.2219,1.49646,1.68849,3.36201,2.23966,1.19101,.35188,1.45267-.15743,2.80103-.00097,2.80559,.32556,4.69002,2.88083,5.043,3.35949,1.36081,1.84526,.83282,2.62341,2.24236,4.48086,1.21555,1.6018,3.90913,.9216,4.92189,1.72162,3.30928,2.61409,4.73124,7.43497,4.75994,12.92962,.0201,3.8431-.48103,5.78482-1.59913,10.63564-.84901,3.6834-4.78175,8.44334-6.94987,10.5659-.58199,.56975-2.21351,2.167-3.36066,1.68178-1.08704-.45979-1.11995-2.52764-1.12139-2.80064-.0049-.93901,.24521-2.1009,2.23907-5.04263,2.09442-3.09006,2.92645-3.44271,2.79948-4.48262-.22445-1.83818-3.16424-3.52123-4.48263-2.79948h.00012Z" fill="#2f2e41"/><g><path d="M334.49457,225.75979c-.64513,5.40264,1.61895,10.11513,5.05699,10.52567s6.7481-3.63632,7.39324-9.03898c.28242-2.36492,.00723-4.59754-.6797-6.39504l2.44642-22.92684-10.7834-.91891-1.26717,22.69891c-1.09088,1.58522-1.88401,3.69026-2.16639,6.05519h.00003Z" fill="#a0616a"/><path d="M365.49095,73.49769s-5.58664,.07946-9.28568,7.30383c-1.96565,3.83897-12.48211,75.62767-12.48211,75.62767l-9.68742,58.80847,16.50214,.08313,12.859-55.69302,10.81723-32.30088-8.72315-53.82921Z" fill="#e6e6e6"/></g><path d="M411.92961,217.13028c-1.58023,5.20651-.17535,10.24237,3.13786,11.24797s7.28015-2.39987,8.86035-7.60638c.69172-2.27906,.81133-4.5254,.44941-6.41533l6.4191-22.14543-10.45641-2.79098-5.21815,22.12729c-1.35133,1.36996-2.50044,3.30383-3.19216,5.58289v-.00003Z" fill="#a0616a"/><path d="M423.41564,69.63219s8.10413-6.08248,14.86262,3.37246c6.75846,9.45495,9.48742,87.1388,9.48742,87.1388l-18.89796,47.96845-14.18755-4.72373,13.49008-58.7749-23.65861-44.57614,18.90403-30.40494h-.00003Z" fill="#e6e6e6"/><g><circle cx="218.47958" cy="311.43145" r="73" fill="#6c63ff"/><g><circle cx="218.49274" cy="349.47878" r="6.70264" fill="#fff"/><path d="M218.4641,266.68145c-.6157,4.0912,.48747,4.94727,.49357,22.58508,.0061,17.63782,3.66579,41.28574-.47148,41.28717s-5.65047-48.80276-20.01681-53.12218c-16.89088-5.07846,21.98785-23.99409,19.99471-10.75007Z" fill="#fff"/></g></g><path d="M120.50313,348.70219l-6.59532,13.93527c7.97328-5.71745,20.42715-10.64598,30.3376-13.28567-9.23403-4.46037-20.53313-11.65189-27.2835-18.77194l3.7934,14.72434c-44.47393-9.0585-76.41138-43.17661-76.4249-82.25924l-1.60648-.5527c.01412,40.82281,31.50971,76.96121,77.7792,86.20995Z" fill="#3f3d56"/></svg>
\ No newline at end of file
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/index.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/index.ts
new file mode 100644
index 0000000..f56f665
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/fallback/index.ts
@@ -0,0 +1,2 @@
+export type * from './fallback';
+export { default as Fallback } from './fallback.vue';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/index.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/index.ts
new file mode 100644
index 0000000..8b1db55
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/index.ts
@@ -0,0 +1,5 @@
+export * from './about';
+export * from './authentication';
+export * from './dashboard';
+export * from './fallback';
+export * from './profile';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/profile/base-setting.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/base-setting.vue
new file mode 100644
index 0000000..1ef1c1a
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/base-setting.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
+import { computed, reactive } from 'vue';
+
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+interface Props {
+  formSchema?: VbenFormSchema[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      // 所有表单项
+      componentProps: {
+        class: 'w-full',
+      },
+    },
+    layout: 'horizontal',
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values);
+  }
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+<template>
+  <div @keydown.enter.prevent="handleSubmit">
+    <Form />
+    <VbenButton type="submit" class="mt-4" @click="handleSubmit">
+      更新基本信息
+    </VbenButton>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/profile/index.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/index.ts
new file mode 100644
index 0000000..209a2e8
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/index.ts
@@ -0,0 +1,6 @@
+export { default as ProfileBaseSetting } from './base-setting.vue';
+export { default as ProfileNotificationSetting } from './notification-setting.vue';
+export { default as ProfilePasswordSetting } from './password-setting.vue';
+export { default as Profile } from './profile.vue';
+export { default as ProfileSecuritySetting } from './security-setting.vue';
+export type * from './types';
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/profile/notification-setting.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/notification-setting.vue
new file mode 100644
index 0000000..9a3e488
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/notification-setting.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { SettingProps } from './types';
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  Switch,
+} from '@vben-core/shadcn-ui';
+
+withDefaults(defineProps<SettingProps>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  change: [Recordable<any>];
+}>();
+
+function handleChange(fieldName: string, value: boolean) {
+  emit('change', { fieldName, value });
+}
+</script>
+<template>
+  <Form class="space-y-8">
+    <div class="space-y-4">
+      <template v-for="item in formSchema" :key="item.fieldName">
+        <FormField type="checkbox" :name="item.fieldName">
+          <FormItem
+            class="flex flex-row items-center justify-between rounded-lg border p-4"
+          >
+            <div class="space-y-0.5">
+              <FormLabel class="text-base"> {{ item.label }} </FormLabel>
+              <FormDescription>
+                {{ item.description }}
+              </FormDescription>
+            </div>
+            <FormControl>
+              <Switch
+                :model-value="item.value"
+                @update:model-value="handleChange(item.fieldName, $event)"
+              />
+            </FormControl>
+          </FormItem>
+        </FormField>
+      </template>
+    </div>
+  </Form>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/profile/password-setting.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/password-setting.vue
new file mode 100644
index 0000000..1d90e08
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/password-setting.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
+import { computed, reactive } from 'vue';
+
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+interface Props {
+  formSchema?: VbenFormSchema[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      // 所有表单项
+      componentProps: {
+        class: 'w-full',
+      },
+    },
+    layout: 'horizontal',
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values);
+  }
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+<template>
+  <div>
+    <Form />
+    <VbenButton type="submit" class="mt-4" @click="handleSubmit">
+      更新密码
+    </VbenButton>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/profile/profile.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/profile.vue
new file mode 100644
index 0000000..5ab39e6
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/profile.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { Props } from './types';
+
+import { preferences } from '@vben-core/preferences';
+import {
+  Card,
+  Separator,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  VbenAvatar,
+} from '@vben-core/shadcn-ui';
+
+import { Page } from '../../components';
+
+defineOptions({
+  name: 'ProfileUI',
+});
+
+withDefaults(defineProps<Props>(), {
+  title: '关于项目',
+  tabs: () => [],
+});
+
+const tabsValue = defineModel<string>('modelValue');
+</script>
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full w-full">
+      <Card class="w-1/6 flex-none">
+        <div class="mt-4 flex h-40 flex-col items-center justify-center gap-4">
+          <VbenAvatar
+            :src="userInfo?.avatar ?? preferences.app.defaultAvatar"
+            class="size-20"
+          />
+          <span class="text-lg font-semibold">
+            {{ userInfo?.realName ?? '' }}
+          </span>
+          <span class="text-foreground/80 text-sm">
+            {{ userInfo?.username ?? '' }}
+          </span>
+        </div>
+        <Separator class="my-4" />
+        <Tabs v-model="tabsValue" orientation="vertical" class="m-4">
+          <TabsList class="bg-card grid w-full grid-cols-1">
+            <TabsTrigger
+              v-for="tab in tabs"
+              :key="tab.value"
+              :value="tab.value"
+              class="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground h-12 justify-start"
+            >
+              {{ tab.label }}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </Card>
+      <Card class="ml-4 w-5/6 flex-auto p-8">
+        <slot name="content"></slot>
+      </Card>
+    </div>
+  </Page>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/profile/security-setting.vue b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/security-setting.vue
new file mode 100644
index 0000000..9a3e488
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/security-setting.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { SettingProps } from './types';
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  Switch,
+} from '@vben-core/shadcn-ui';
+
+withDefaults(defineProps<SettingProps>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  change: [Recordable<any>];
+}>();
+
+function handleChange(fieldName: string, value: boolean) {
+  emit('change', { fieldName, value });
+}
+</script>
+<template>
+  <Form class="space-y-8">
+    <div class="space-y-4">
+      <template v-for="item in formSchema" :key="item.fieldName">
+        <FormField type="checkbox" :name="item.fieldName">
+          <FormItem
+            class="flex flex-row items-center justify-between rounded-lg border p-4"
+          >
+            <div class="space-y-0.5">
+              <FormLabel class="text-base"> {{ item.label }} </FormLabel>
+              <FormDescription>
+                {{ item.description }}
+              </FormDescription>
+            </div>
+            <FormControl>
+              <Switch
+                :model-value="item.value"
+                @update:model-value="handleChange(item.fieldName, $event)"
+              />
+            </FormControl>
+          </FormItem>
+        </FormField>
+      </template>
+    </div>
+  </Form>
+</template>
diff --git a/admin-ui/vue/packages/effects/common-ui/src/ui/profile/types.ts b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/types.ts
new file mode 100644
index 0000000..e600bde
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/src/ui/profile/types.ts
@@ -0,0 +1,21 @@
+import type { BasicUserInfo } from '@vben/types';
+
+export interface Props {
+  title?: string;
+  userInfo: BasicUserInfo | null;
+  tabs: {
+    label: string;
+    value: string;
+  }[];
+}
+
+export interface FormSchemaItem {
+  description: string;
+  fieldName: string;
+  label: string;
+  value: boolean;
+}
+
+export interface SettingProps {
+  formSchema: FormSchemaItem[];
+}
diff --git a/admin-ui/vue/packages/effects/common-ui/tsconfig.json b/admin-ui/vue/packages/effects/common-ui/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/effects/common-ui/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/effects/hooks/README.md b/admin-ui/vue/packages/effects/hooks/README.md
new file mode 100644
index 0000000..54d9ff7
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/README.md
@@ -0,0 +1,19 @@
+# @vben/hooks
+
+用于多个 `app` 公用的 hook，继承了 `@vben/hooks` 的所有能力。业务上有通用 hooks 可以放在这里。
+
+## 用法
+
+### 添加依赖
+
+```bash
+# 进入目标应用目录，例如 apps/xxxx-app
+# cd apps/xxxx-app
+pnpm add @vben/hooks
+```
+
+### 使用
+
+```ts
+import { useNamespace } from '@vben/hooks';
+```
diff --git a/admin-ui/vue/packages/effects/hooks/package.json b/admin-ui/vue/packages/effects/hooks/package.json
new file mode 100644
index 0000000..76d83a5
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@vben/hooks",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/effects/hooks"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@vben-core/composables": "workspace:*",
+    "@vben/preferences": "workspace:*",
+    "@vben/stores": "workspace:*",
+    "@vben/types": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:",
+    "watermark-js-plus": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/effects/hooks/src/index.ts b/admin-ui/vue/packages/effects/hooks/src/index.ts
new file mode 100644
index 0000000..c189fd7
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/src/index.ts
@@ -0,0 +1,9 @@
+export * from './use-app-config';
+export * from './use-content-maximize';
+export * from './use-design-tokens';
+export * from './use-hover-toggle';
+export * from './use-pagination';
+export * from './use-refresh';
+export * from './use-tabs';
+export * from './use-watermark';
+export * from '@vben-core/composables';
diff --git a/admin-ui/vue/packages/effects/hooks/src/use-app-config.ts b/admin-ui/vue/packages/effects/hooks/src/use-app-config.ts
new file mode 100644
index 0000000..41f383c
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/src/use-app-config.ts
@@ -0,0 +1,36 @@
+import type {
+  ApplicationConfig,
+  VbenAdminProAppConfigRaw,
+} from '@vben/types/global';
+
+/**
+ * 由 vite-inject-app-config 注入的全局配置
+ */
+export function useAppConfig(
+  env: Record<string, any>,
+  isProduction: boolean,
+): ApplicationConfig {
+  // 生产环境下，直接使用 window._VBEN_ADMIN_PRO_APP_CONF_ 全局变量
+  const config = isProduction
+    ? window._VBEN_ADMIN_PRO_APP_CONF_
+    : (env as VbenAdminProAppConfigRaw);
+
+  const {
+    VITE_GLOB_API_URL,
+    VITE_GLOB_AUTH_DINGDING_CORP_ID,
+    VITE_GLOB_AUTH_DINGDING_CLIENT_ID,
+  } = config;
+
+  const applicationConfig: ApplicationConfig = {
+    apiURL: VITE_GLOB_API_URL,
+    auth: {},
+  };
+  if (VITE_GLOB_AUTH_DINGDING_CORP_ID && VITE_GLOB_AUTH_DINGDING_CLIENT_ID) {
+    applicationConfig.auth.dingding = {
+      clientId: VITE_GLOB_AUTH_DINGDING_CLIENT_ID,
+      corpId: VITE_GLOB_AUTH_DINGDING_CORP_ID,
+    };
+  }
+
+  return applicationConfig;
+}
diff --git a/admin-ui/vue/packages/effects/hooks/src/use-content-maximize.ts b/admin-ui/vue/packages/effects/hooks/src/use-content-maximize.ts
new file mode 100644
index 0000000..77d1fab
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/src/use-content-maximize.ts
@@ -0,0 +1,24 @@
+import { updatePreferences, usePreferences } from '@vben/preferences';
+/**
+ * 主体区域最大化
+ */
+export function useContentMaximize() {
+  const { contentIsMaximize } = usePreferences();
+
+  function toggleMaximize() {
+    const isMaximize = contentIsMaximize.value;
+
+    updatePreferences({
+      header: {
+        hidden: !isMaximize,
+      },
+      sidebar: {
+        hidden: !isMaximize,
+      },
+    });
+  }
+  return {
+    contentIsMaximize,
+    toggleMaximize,
+  };
+}
diff --git a/admin-ui/vue/packages/effects/hooks/src/use-design-tokens.ts b/admin-ui/vue/packages/effects/hooks/src/use-design-tokens.ts
new file mode 100644
index 0000000..6a076f3
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/src/use-design-tokens.ts
@@ -0,0 +1,321 @@
+import { reactive, watch } from 'vue';
+
+import { preferences, usePreferences } from '@vben/preferences';
+import { convertToRgb, updateCSSVariables } from '@vben/utils';
+
+/**
+ * 用于适配各个框架的设计系统
+ */
+
+export function useAntdDesignTokens() {
+  const rootStyles = getComputedStyle(document.documentElement);
+
+  const tokens = reactive({
+    borderRadius: '' as any,
+    colorBgBase: '',
+    colorBgContainer: '',
+    colorBgElevated: '',
+    colorBgLayout: '',
+    colorBgMask: '',
+    colorBorder: '',
+    colorBorderSecondary: '',
+    colorError: '',
+    colorInfo: '',
+    colorPrimary: '',
+    colorSuccess: '',
+    colorTextBase: '',
+    colorWarning: '',
+    zIndexPopupBase: 2000, // 调整基础弹层层级，避免下拉等组件被弹窗或者最大化状态下的表格遮挡
+  });
+
+  const getCssVariableValue = (variable: string, isColor: boolean = true) => {
+    const value = rootStyles.getPropertyValue(variable);
+    return isColor ? `hsl(${value})` : value;
+  };
+
+  watch(
+    () => preferences.theme,
+    () => {
+      tokens.colorPrimary = getCssVariableValue('--primary');
+
+      tokens.colorInfo = getCssVariableValue('--primary');
+
+      tokens.colorError = getCssVariableValue('--destructive');
+
+      tokens.colorWarning = getCssVariableValue('--warning');
+
+      tokens.colorSuccess = getCssVariableValue('--success');
+
+      tokens.colorTextBase = getCssVariableValue('--foreground');
+
+      getCssVariableValue('--primary-foreground');
+
+      tokens.colorBorderSecondary = tokens.colorBorder =
+        getCssVariableValue('--border');
+
+      tokens.colorBgElevated = getCssVariableValue('--popover');
+
+      tokens.colorBgContainer = getCssVariableValue('--card');
+
+      tokens.colorBgBase = getCssVariableValue('--background');
+
+      const radius = Number.parseFloat(getCssVariableValue('--radius', false));
+      // 1rem = 16px
+      tokens.borderRadius = radius * 16;
+
+      tokens.colorBgLayout = getCssVariableValue('--background-deep');
+      tokens.colorBgMask = getCssVariableValue('--overlay');
+    },
+    { immediate: true },
+  );
+
+  return {
+    tokens,
+  };
+}
+
+export function useNaiveDesignTokens() {
+  const rootStyles = getComputedStyle(document.documentElement);
+
+  const commonTokens = reactive({
+    baseColor: '',
+    bodyColor: '',
+    borderColor: '',
+    borderRadius: '',
+    cardColor: '',
+    dividerColor: '',
+    errorColor: '',
+    errorColorHover: '',
+    errorColorPressed: '',
+    errorColorSuppl: '',
+    invertedColor: '',
+    modalColor: '',
+    popoverColor: '',
+    primaryColor: '',
+    primaryColorHover: '',
+    primaryColorPressed: '',
+    primaryColorSuppl: '',
+    successColor: '',
+    successColorHover: '',
+    successColorPressed: '',
+    successColorSuppl: '',
+    tableColor: '',
+    textColorBase: '',
+    warningColor: '',
+    warningColorHover: '',
+    warningColorPressed: '',
+    warningColorSuppl: '',
+  });
+
+  const getCssVariableValue = (variable: string, isColor: boolean = true) => {
+    const value = rootStyles.getPropertyValue(variable);
+    return isColor ? convertToRgb(`hsl(${value})`) : value;
+  };
+
+  watch(
+    () => preferences.theme,
+    () => {
+      commonTokens.primaryColor = getCssVariableValue('--primary');
+      commonTokens.primaryColorHover = getCssVariableValue('--primary-600');
+      commonTokens.primaryColorPressed = getCssVariableValue('--primary-700');
+      commonTokens.primaryColorSuppl = getCssVariableValue('--primary-800');
+
+      commonTokens.errorColor = getCssVariableValue('--destructive');
+      commonTokens.errorColorHover = getCssVariableValue('--destructive-600');
+      commonTokens.errorColorPressed = getCssVariableValue('--destructive-700');
+      commonTokens.errorColorSuppl = getCssVariableValue('--destructive-800');
+
+      commonTokens.warningColor = getCssVariableValue('--warning');
+      commonTokens.warningColorHover = getCssVariableValue('--warning-600');
+      commonTokens.warningColorPressed = getCssVariableValue('--warning-700');
+      commonTokens.warningColorSuppl = getCssVariableValue('--warning-800');
+
+      commonTokens.successColor = getCssVariableValue('--success');
+      commonTokens.successColorHover = getCssVariableValue('--success-600');
+      commonTokens.successColorPressed = getCssVariableValue('--success-700');
+      commonTokens.successColorSuppl = getCssVariableValue('--success-800');
+
+      commonTokens.textColorBase = getCssVariableValue('--foreground');
+
+      commonTokens.baseColor = getCssVariableValue('--primary-foreground');
+
+      commonTokens.dividerColor = commonTokens.borderColor =
+        getCssVariableValue('--border');
+
+      commonTokens.modalColor = commonTokens.popoverColor =
+        getCssVariableValue('--popover');
+
+      commonTokens.tableColor = commonTokens.cardColor =
+        getCssVariableValue('--card');
+
+      commonTokens.bodyColor = getCssVariableValue('--background');
+      commonTokens.invertedColor = getCssVariableValue('--background-deep');
+
+      commonTokens.borderRadius = getCssVariableValue('--radius', false);
+    },
+    { immediate: true },
+  );
+  return {
+    commonTokens,
+  };
+}
+
+export function useElementPlusDesignTokens() {
+  const { isDark } = usePreferences();
+  const rootStyles = getComputedStyle(document.documentElement);
+
+  const getCssVariableValueRaw = (variable: string) => {
+    return rootStyles.getPropertyValue(variable);
+  };
+
+  const getCssVariableValue = (variable: string, isColor: boolean = true) => {
+    const value = getCssVariableValueRaw(variable);
+    return isColor ? convertToRgb(`hsl(${value})`) : value;
+  };
+
+  watch(
+    () => preferences.theme,
+    () => {
+      const background = getCssVariableValue('--background');
+      const border = getCssVariableValue('--border');
+      const accent = getCssVariableValue('--accent');
+
+      const variables: Record<string, string> = {
+        '--el-bg-color': background,
+        '--el-bg-color-overlay': getCssVariableValue('--popover'),
+        '--el-bg-color-page': getCssVariableValue('--background-deep'),
+        '--el-border-color': border,
+        '--el-border-color-dark': border,
+        '--el-border-color-extra-light': border,
+        '--el-border-color-hover': accent,
+        '--el-border-color-light': border,
+        '--el-border-color-lighter': border,
+
+        '--el-border-radius-base': getCssVariableValue('--radius', false),
+        '--el-color-danger': getCssVariableValue('--destructive-500'),
+        '--el-color-danger-dark-2': isDark.value
+          ? getCssVariableValue('--destructive-400')
+          : getCssVariableValue('--destructive-600'),
+        '--el-color-danger-light-3': isDark.value
+          ? getCssVariableValue('--destructive-600')
+          : getCssVariableValue('--destructive-400'),
+        '--el-color-danger-light-5': isDark.value
+          ? getCssVariableValue('--destructive-700')
+          : getCssVariableValue('--destructive-300'),
+        '--el-color-danger-light-7': isDark.value
+          ? getCssVariableValue('--destructive-800')
+          : getCssVariableValue('--destructive-200'),
+        '--el-color-danger-light-8': isDark.value
+          ? getCssVariableValue('--destructive-900')
+          : getCssVariableValue('--destructive-100'),
+        '--el-color-danger-light-9': isDark.value
+          ? getCssVariableValue('--destructive-950')
+          : getCssVariableValue('--destructive-50'),
+
+        '--el-color-error': getCssVariableValue('--destructive-500'),
+        '--el-color-error-dark-2': isDark.value
+          ? getCssVariableValue('--destructive-400')
+          : getCssVariableValue('--destructive-600'),
+        '--el-color-error-light-3': isDark.value
+          ? getCssVariableValue('--destructive-600')
+          : getCssVariableValue('--destructive-400'),
+        '--el-color-error-light-5': isDark.value
+          ? getCssVariableValue('--destructive-700')
+          : getCssVariableValue('--destructive-300'),
+        '--el-color-error-light-7': isDark.value
+          ? getCssVariableValue('--destructive-800')
+          : getCssVariableValue('--destructive-200'),
+        '--el-color-error-light-8': isDark.value
+          ? getCssVariableValue('--destructive-900')
+          : getCssVariableValue('--destructive-100'),
+        '--el-color-error-light-9': isDark.value
+          ? getCssVariableValue('--destructive-950')
+          : getCssVariableValue('--destructive-50'),
+
+        '--el-color-info-light-5': border,
+        '--el-color-info-light-8': border,
+        '--el-color-info-light-9': getCssVariableValue('--info'), // getCssVariableValue('--secondary'),
+
+        '--el-color-primary': getCssVariableValue('--primary-500'),
+        '--el-color-primary-dark-2': isDark.value
+          ? getCssVariableValue('--primary-400')
+          : getCssVariableValue('--primary-600'),
+        '--el-color-primary-light-3': isDark.value
+          ? getCssVariableValue('--primary-600')
+          : getCssVariableValue('--primary-400'),
+        '--el-color-primary-light-5': isDark.value
+          ? getCssVariableValue('--primary-700')
+          : getCssVariableValue('--primary-300'),
+        '--el-color-primary-light-7': isDark.value
+          ? getCssVariableValue('--primary-800')
+          : getCssVariableValue('--primary-200'),
+        '--el-color-primary-light-8': isDark.value
+          ? getCssVariableValue('--primary-900')
+          : getCssVariableValue('--primary-100'),
+        '--el-color-primary-light-9': isDark.value
+          ? getCssVariableValue('--primary-950')
+          : getCssVariableValue('--primary-50'),
+
+        '--el-color-success': getCssVariableValue('--success-500'),
+        '--el-color-success-dark-2': isDark.value
+          ? getCssVariableValue('--success-400')
+          : getCssVariableValue('--success-600'),
+        '--el-color-success-light-3': isDark.value
+          ? getCssVariableValue('--success-600')
+          : getCssVariableValue('--success-400'),
+        '--el-color-success-light-5': isDark.value
+          ? getCssVariableValue('--success-700')
+          : getCssVariableValue('--success-300'),
+        '--el-color-success-light-7': isDark.value
+          ? getCssVariableValue('--success-800')
+          : getCssVariableValue('--success-200'),
+        '--el-color-success-light-8': isDark.value
+          ? getCssVariableValue('--success-900')
+          : getCssVariableValue('--success-100'),
+        '--el-color-success-light-9': isDark.value
+          ? getCssVariableValue('--success-950')
+          : getCssVariableValue('--success-50'),
+
+        '--el-color-warning': getCssVariableValue('--warning-500'),
+        '--el-color-warning-dark-2': isDark.value
+          ? getCssVariableValue('--warning-400')
+          : getCssVariableValue('--warning-600'),
+        '--el-color-warning-light-3': isDark.value
+          ? getCssVariableValue('--warning-600')
+          : getCssVariableValue('--warning-400'),
+        '--el-color-warning-light-5': isDark.value
+          ? getCssVariableValue('--warning-700')
+          : getCssVariableValue('--warning-300'),
+        '--el-color-warning-light-7': isDark.value
+          ? getCssVariableValue('--warning-800')
+          : getCssVariableValue('--warning-200'),
+        '--el-color-warning-light-8': isDark.value
+          ? getCssVariableValue('--warning-900')
+          : getCssVariableValue('--warning-100'),
+        '--el-color-warning-light-9': isDark.value
+          ? getCssVariableValue('--warning-950')
+          : getCssVariableValue('--warning-50'),
+
+        '--el-fill-color': getCssVariableValue('--accent'),
+        '--el-fill-color-blank': background,
+        '--el-fill-color-light': getCssVariableValue('--accent'),
+        '--el-fill-color-lighter': getCssVariableValue('--accent-lighter'),
+
+        '--el-fill-color-dark': getCssVariableValue('--accent-dark'),
+        '--el-fill-color-darker': getCssVariableValue('--accent-darker'),
+
+        // 解决ElLoading背景色问题
+        '--el-mask-color': isDark.value
+          ? 'rgba(0,0,0,.8)'
+          : 'rgba(255,255,255,.9)',
+
+        '--el-text-color-primary': getCssVariableValue('--foreground'),
+
+        '--el-text-color-regular': getCssVariableValue('--foreground'),
+      };
+
+      updateCSSVariables(variables, `__vben_design_styles__`);
+    },
+    { immediate: true },
+  );
+}
diff --git a/admin-ui/vue/packages/effects/hooks/src/use-hover-toggle.ts b/admin-ui/vue/packages/effects/hooks/src/use-hover-toggle.ts
new file mode 100644
index 0000000..0bed41d
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/src/use-hover-toggle.ts
@@ -0,0 +1,163 @@
+import type { Arrayable, MaybeElementRef } from '@vueuse/core';
+
+import type { Ref } from 'vue';
+
+import { computed, effectScope, onUnmounted, ref, unref, watch } from 'vue';
+
+import { isFunction } from '@vben/utils';
+
+import { useElementHover } from '@vueuse/core';
+
+interface HoverDelayOptions {
+  /** 鼠标进入延迟时间 */
+  enterDelay?: (() => number) | number;
+  /** 鼠标离开延迟时间 */
+  leaveDelay?: (() => number) | number;
+}
+
+const DEFAULT_LEAVE_DELAY = 500; // 鼠标离开延迟时间，默认为 500ms
+const DEFAULT_ENTER_DELAY = 0; // 鼠标进入延迟时间，默认为 0（立即响应）
+
+/**
+ * 监测鼠标是否在元素内部，如果在元素内部则返回 true，否则返回 false
+ * @param refElement 所有需要检测的元素。支持单个元素、元素数组或响应式引用的元素数组。如果鼠标在任何一个元素内部都会返回 true
+ * @param delay 延迟更新状态的时间，可以是数字或包含进入/离开延迟的配置对象
+ * @returns 返回一个数组，第一个元素是一个 ref，表示鼠标是否在元素内部，第二个元素是一个控制器，可以通过 enable 和 disable 方法来控制监听器的启用和禁用
+ */
+export function useHoverToggle(
+  refElement: Arrayable<MaybeElementRef> | Ref<HTMLElement[] | null>,
+  delay: (() => number) | HoverDelayOptions | number = DEFAULT_LEAVE_DELAY,
+) {
+  // 兼容旧版本API
+  const normalizedOptions: HoverDelayOptions =
+    typeof delay === 'number' || isFunction(delay)
+      ? { enterDelay: DEFAULT_ENTER_DELAY, leaveDelay: delay }
+      : {
+          enterDelay: DEFAULT_ENTER_DELAY,
+          leaveDelay: DEFAULT_LEAVE_DELAY,
+          ...delay,
+        };
+
+  const value = ref(false);
+  const enterTimer = ref<ReturnType<typeof setTimeout> | undefined>();
+  const leaveTimer = ref<ReturnType<typeof setTimeout> | undefined>();
+  const hoverScopes = ref<ReturnType<typeof effectScope>[]>([]);
+
+  // 使用计算属性包装 refElement，使其响应式变化
+  const refs = computed(() => {
+    const raw = unref(refElement);
+    if (raw === null) return [];
+    return Array.isArray(raw) ? raw : [raw];
+  });
+  // 存储所有 hover 状态
+  const isHovers = ref<Array<Ref<boolean>>>([]);
+
+  // 更新 hover 监听的函数
+  function updateHovers() {
+    // 停止并清理之前的作用域
+    hoverScopes.value.forEach((scope) => scope.stop());
+    hoverScopes.value = [];
+
+    isHovers.value = refs.value.map((refEle) => {
+      if (!refEle) {
+        return ref(false);
+      }
+      const eleRef = computed(() => {
+        const ele = unref(refEle);
+        return ele instanceof Element ? ele : (ele?.$el as Element);
+      });
+
+      // 为每个元素创建独立的作用域
+      const scope = effectScope();
+      const hoverRef = scope.run(() => useElementHover(eleRef)) || ref(false);
+      hoverScopes.value.push(scope);
+
+      return hoverRef;
+    });
+  }
+
+  // 监听元素数量变化，避免过度执行
+  const elementsCount = computed(() => {
+    const raw = unref(refElement);
+    if (raw === null) return 0;
+    return Array.isArray(raw) ? raw.length : 1;
+  });
+
+  // 初始设置
+  updateHovers();
+
+  // 只在元素数量变化时重新设置监听器
+  const stopWatcher = watch(elementsCount, updateHovers, { deep: false });
+
+  const isOutsideAll = computed(() => isHovers.value.every((v) => !v.value));
+
+  function clearTimers() {
+    if (enterTimer.value) {
+      clearTimeout(enterTimer.value);
+      enterTimer.value = undefined;
+    }
+    if (leaveTimer.value) {
+      clearTimeout(leaveTimer.value);
+      leaveTimer.value = undefined;
+    }
+  }
+
+  function setValueDelay(val: boolean) {
+    clearTimers();
+
+    if (val) {
+      // 鼠标进入
+      const enterDelay = normalizedOptions.enterDelay ?? DEFAULT_ENTER_DELAY;
+      const delayTime = isFunction(enterDelay) ? enterDelay() : enterDelay;
+
+      if (delayTime <= 0) {
+        value.value = true;
+      } else {
+        enterTimer.value = setTimeout(() => {
+          value.value = true;
+          enterTimer.value = undefined;
+        }, delayTime);
+      }
+    } else {
+      // 鼠标离开
+      const leaveDelay = normalizedOptions.leaveDelay ?? DEFAULT_LEAVE_DELAY;
+      const delayTime = isFunction(leaveDelay) ? leaveDelay() : leaveDelay;
+
+      if (delayTime <= 0) {
+        value.value = false;
+      } else {
+        leaveTimer.value = setTimeout(() => {
+          value.value = false;
+          leaveTimer.value = undefined;
+        }, delayTime);
+      }
+    }
+  }
+
+  const hoverWatcher = watch(
+    isOutsideAll,
+    (val) => {
+      setValueDelay(!val);
+    },
+    { immediate: true },
+  );
+
+  const controller = {
+    enable() {
+      hoverWatcher.resume();
+    },
+    disable() {
+      hoverWatcher.pause();
+    },
+  };
+
+  onUnmounted(() => {
+    clearTimers();
+    // 停止监听器
+    stopWatcher();
+    // 停止所有剩余的作用域
+    hoverScopes.value.forEach((scope) => scope.stop());
+  });
+
+  return [value, controller] as [typeof value, typeof controller];
+}
diff --git a/admin-ui/vue/packages/effects/hooks/src/use-pagination.ts b/admin-ui/vue/packages/effects/hooks/src/use-pagination.ts
new file mode 100644
index 0000000..0115606
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/src/use-pagination.ts
@@ -0,0 +1,72 @@
+import type { Ref } from 'vue';
+
+import { computed, ref, unref, watch } from 'vue';
+
+/**
+ * Paginates an array of items
+ * @param list The array to paginate
+ * @param pageNo The current page number (1-based)
+ * @param pageSize Number of items per page
+ * @returns Paginated array slice
+ * @throws {Error} If pageNo or pageSize are invalid
+ */
+function pagination<T = any>(list: T[], pageNo: number, pageSize: number): T[] {
+  if (pageNo < 1) throw new Error('Page number must be positive');
+  if (pageSize < 1) throw new Error('Page size must be positive');
+
+  const offset = (pageNo - 1) * Number(pageSize);
+  const ret =
+    offset + pageSize >= list.length
+      ? list.slice(offset)
+      : list.slice(offset, offset + pageSize);
+  return ret;
+}
+
+export function usePagination<T = any>(
+  list: Ref<T[]>,
+  pageSize: number,
+  totalChangeToFirstPage = true,
+) {
+  const currentPage = ref(1);
+  const pageSizeRef = ref(pageSize);
+
+  const totalPages = computed(() =>
+    Math.ceil(unref(list).length / unref(pageSizeRef)),
+  );
+
+  const paginationList = computed(() => {
+    return pagination(unref(list), unref(currentPage), unref(pageSizeRef));
+  });
+
+  const total = computed(() => {
+    return unref(list).length;
+  });
+
+  if (totalChangeToFirstPage) {
+    watch(total, () => {
+      setCurrentPage(1);
+    });
+  }
+
+  function setCurrentPage(page: number) {
+    if (page === 1 && unref(totalPages) === 0) {
+      currentPage.value = 1;
+    } else {
+      if (page < 1 || page > unref(totalPages)) {
+        throw new Error('Invalid page number');
+      }
+      currentPage.value = page;
+    }
+  }
+
+  function setPageSize(pageSize: number) {
+    if (pageSize < 1) {
+      throw new Error('Page size must be positive');
+    }
+    pageSizeRef.value = pageSize;
+    // Reset to first page to prevent invalid state
+    currentPage.value = 1;
+  }
+
+  return { setCurrentPage, total, setPageSize, paginationList, currentPage };
+}
diff --git a/admin-ui/vue/packages/effects/hooks/src/use-refresh.ts b/admin-ui/vue/packages/effects/hooks/src/use-refresh.ts
new file mode 100644
index 0000000..b3a5cae
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/src/use-refresh.ts
@@ -0,0 +1,16 @@
+import { useRouter } from 'vue-router';
+
+import { useTabbarStore } from '@vben/stores';
+
+export function useRefresh() {
+  const router = useRouter();
+  const tabbarStore = useTabbarStore();
+
+  async function refresh() {
+    await tabbarStore.refresh(router);
+  }
+
+  return {
+    refresh,
+  };
+}
diff --git a/admin-ui/vue/packages/effects/hooks/src/use-tabs.ts b/admin-ui/vue/packages/effects/hooks/src/use-tabs.ts
new file mode 100644
index 0000000..5267211
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/src/use-tabs.ts
@@ -0,0 +1,133 @@
+import type { ComputedRef } from 'vue';
+import type { RouteLocationNormalized } from 'vue-router';
+
+import { useRoute, useRouter } from 'vue-router';
+
+import { useTabbarStore } from '@vben/stores';
+
+export function useTabs() {
+  const router = useRouter();
+  const route = useRoute();
+  const tabbarStore = useTabbarStore();
+
+  async function closeLeftTabs(tab?: RouteLocationNormalized) {
+    await tabbarStore.closeLeftTabs(tab || route);
+  }
+
+  async function closeAllTabs() {
+    await tabbarStore.closeAllTabs(router);
+  }
+
+  async function closeRightTabs(tab?: RouteLocationNormalized) {
+    await tabbarStore.closeRightTabs(tab || route);
+  }
+
+  async function closeOtherTabs(tab?: RouteLocationNormalized) {
+    await tabbarStore.closeOtherTabs(tab || route);
+  }
+
+  async function closeCurrentTab(tab?: RouteLocationNormalized) {
+    await tabbarStore.closeTab(tab || route, router);
+  }
+
+  async function pinTab(tab?: RouteLocationNormalized) {
+    await tabbarStore.pinTab(tab || route);
+  }
+
+  async function unpinTab(tab?: RouteLocationNormalized) {
+    await tabbarStore.unpinTab(tab || route);
+  }
+
+  async function toggleTabPin(tab?: RouteLocationNormalized) {
+    await tabbarStore.toggleTabPin(tab || route);
+  }
+
+  async function refreshTab(name?: string) {
+    await tabbarStore.refresh(name || router);
+  }
+
+  async function openTabInNewWindow(tab?: RouteLocationNormalized) {
+    await tabbarStore.openTabInNewWindow(tab || route);
+  }
+
+  async function closeTabByKey(key: string) {
+    await tabbarStore.closeTabByKey(key, router);
+  }
+
+  /**
+   * 设置当前标签页的标题
+   *
+   * @description 支持设置静态标题字符串或动态计算标题
+   * @description 动态标题会在每次渲染时重新计算,适用于多语言或状态相关的标题
+   *
+   * @param title - 标题内容
+   *   - 静态标题: 直接传入字符串
+   *   - 动态标题: 传入 ComputedRef
+   *
+   * @example
+   * // 静态标题
+   * setTabTitle('标签页')
+   *
+   * // 动态标题(多语言)
+   * setTabTitle(computed(() => t('page.title')))
+   */
+  async function setTabTitle(title: ComputedRef<string> | string) {
+    tabbarStore.setUpdateTime();
+    await tabbarStore.setTabTitle(route, title);
+  }
+
+  async function resetTabTitle() {
+    tabbarStore.setUpdateTime();
+    await tabbarStore.resetTabTitle(route);
+  }
+
+  /**
+   * 获取操作是否禁用
+   * @param tab
+   */
+  function getTabDisableState(tab: RouteLocationNormalized = route) {
+    const tabs = tabbarStore.getTabs;
+    const affixTabs = tabbarStore.affixTabs;
+    const index = tabs.findIndex((item) => item.path === tab.path);
+
+    const disabled = tabs.length <= 1;
+
+    const { meta } = tab;
+    const affixTab = meta?.affixTab ?? false;
+    const isCurrentTab = route.path === tab.path;
+
+    // 当前处于最左侧或者减去固定标签页的数量等于0
+    const disabledCloseLeft =
+      index === 0 || index - affixTabs.length <= 0 || !isCurrentTab;
+
+    const disabledCloseRight = !isCurrentTab || index === tabs.length - 1;
+
+    const disabledCloseOther =
+      disabled || !isCurrentTab || tabs.length - affixTabs.length <= 1;
+    return {
+      disabledCloseAll: disabled,
+      disabledCloseCurrent: !!affixTab || disabled,
+      disabledCloseLeft,
+      disabledCloseOther,
+      disabledCloseRight,
+      disabledRefresh: !isCurrentTab,
+    };
+  }
+
+  return {
+    closeAllTabs,
+    closeCurrentTab,
+    closeLeftTabs,
+    closeOtherTabs,
+    closeRightTabs,
+    closeTabByKey,
+    getTabDisableState,
+    openTabInNewWindow,
+    pinTab,
+    refreshTab,
+    resetTabTitle,
+    setTabTitle,
+    toggleTabPin,
+    unpinTab,
+  };
+}
diff --git a/admin-ui/vue/packages/effects/hooks/src/use-watermark.ts b/admin-ui/vue/packages/effects/hooks/src/use-watermark.ts
new file mode 100644
index 0000000..8484a08
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/src/use-watermark.ts
@@ -0,0 +1,84 @@
+import type { Watermark, WatermarkOptions } from 'watermark-js-plus';
+
+import { nextTick, onUnmounted, readonly, ref } from 'vue';
+
+const watermark = ref<Watermark>();
+const unmountedHooked = ref<boolean>(false);
+const cachedOptions = ref<Partial<WatermarkOptions>>({
+  advancedStyle: {
+    colorStops: [
+      {
+        color: 'gray',
+        offset: 0,
+      },
+      {
+        color: 'gray',
+        offset: 1,
+      },
+    ],
+    type: 'linear',
+  },
+  // fontSize: '20px',
+  content: '',
+  contentType: 'multi-line-text',
+  globalAlpha: 0.25,
+  gridLayoutOptions: {
+    cols: 2,
+    gap: [20, 20],
+    matrix: [
+      [1, 0],
+      [0, 1],
+    ],
+    rows: 2,
+  },
+  height: 200,
+  layout: 'grid',
+  rotate: 30,
+  width: 160,
+});
+
+export function useWatermark() {
+  async function initWatermark(options: Partial<WatermarkOptions>) {
+    const { Watermark } = await import('watermark-js-plus');
+
+    cachedOptions.value = {
+      ...cachedOptions.value,
+      ...options,
+    };
+    watermark.value = new Watermark(cachedOptions.value);
+    await watermark.value?.create();
+  }
+
+  async function updateWatermark(options: Partial<WatermarkOptions>) {
+    if (watermark.value) {
+      await nextTick();
+      await watermark.value?.changeOptions({
+        ...cachedOptions.value,
+        ...options,
+      });
+    } else {
+      await initWatermark(options);
+    }
+  }
+
+  function destroyWatermark() {
+    if (watermark.value) {
+      watermark.value.destroy();
+      watermark.value = undefined;
+    }
+  }
+
+  // 只在第一次调用时注册卸载钩子，防止重复注册以致于在路由切换时销毁了水印
+  if (!unmountedHooked.value) {
+    unmountedHooked.value = true;
+    onUnmounted(() => {
+      destroyWatermark();
+    });
+  }
+
+  return {
+    destroyWatermark,
+    updateWatermark,
+    watermark: readonly(watermark),
+  };
+}
diff --git a/admin-ui/vue/packages/effects/hooks/tsconfig.json b/admin-ui/vue/packages/effects/hooks/tsconfig.json
new file mode 100644
index 0000000..b13aa7a
--- /dev/null
+++ b/admin-ui/vue/packages/effects/hooks/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "compilerOptions": {
+    "types": ["vite/client", "@vben/types/global"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/effects/layouts/package.json b/admin-ui/vue/packages/effects/layouts/package.json
new file mode 100644
index 0000000..3c195d3
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@vben/layouts",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/effects/layouts"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@vben-core/composables": "workspace:*",
+    "@vben-core/form-ui": "workspace:*",
+    "@vben-core/layout-ui": "workspace:*",
+    "@vben-core/menu-ui": "workspace:*",
+    "@vben-core/popup-ui": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
+    "@vben-core/tabs-ui": "workspace:*",
+    "@vben/constants": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/icons": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "@vben/preferences": "workspace:*",
+    "@vben/stores": "workspace:*",
+    "@vben/types": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/effects/layouts/src/authentication/authentication.vue b/admin-ui/vue/packages/effects/layouts/src/authentication/authentication.vue
new file mode 100644
index 0000000..6d3bf8c
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/authentication/authentication.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import type { ToolbarType } from './types';
+
+import { computed } from 'vue';
+
+import { preferences, usePreferences } from '@vben/preferences';
+
+import { Copyright } from '../basic/copyright';
+import AuthenticationFormView from './form.vue';
+import SloganIcon from './icons/slogan.vue';
+import Toolbar from './toolbar.vue';
+
+interface Props {
+  appName?: string;
+  logo?: string;
+  logoDark?: string;
+  pageTitle?: string;
+  pageDescription?: string;
+  sloganImage?: string;
+  toolbar?: boolean;
+  copyright?: boolean;
+  toolbarList?: ToolbarType[];
+  clickLogo?: () => void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  appName: '',
+  copyright: true,
+  logo: '',
+  logoDark: '',
+  pageDescription: '',
+  pageTitle: '',
+  sloganImage: '',
+  toolbar: true,
+  toolbarList: () => ['color', 'language', 'layout', 'theme'],
+  clickLogo: () => {},
+});
+
+const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
+  usePreferences();
+
+/**
+ * @zh_CN 根据主题选择合适的 logo 图标
+ */
+const logoSrc = computed(() => {
+  // 如果是暗色主题且提供了 logoDark，则使用暗色主题的 logo
+  if (isDark.value && props.logoDark) {
+    return props.logoDark;
+  }
+  // 否则使用默认的 logo
+  return props.logo;
+});
+</script>
+
+<template>
+  <div
+    :class="[isDark ? 'dark' : '']"
+    class="flex min-h-full flex-1 select-none overflow-x-hidden"
+  >
+    <template v-if="toolbar">
+      <slot name="toolbar">
+        <Toolbar :toolbar-list="toolbarList" />
+      </slot>
+    </template>
+    <!-- 左侧认证面板 -->
+    <AuthenticationFormView
+      v-if="authPanelLeft"
+      class="min-h-full w-2/5 flex-1"
+      data-side="left"
+    >
+      <template v-if="copyright" #copyright>
+        <slot name="copyright">
+          <Copyright
+            v-if="preferences.copyright.enable"
+            v-bind="preferences.copyright"
+          />
+        </slot>
+      </template>
+    </AuthenticationFormView>
+
+    <slot name="logo">
+      <!-- 头部 Logo 和应用名称 -->
+      <div
+        v-if="logoSrc || appName"
+        class="absolute left-0 top-0 z-10 flex flex-1"
+        @click="clickLogo"
+      >
+        <div
+          class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
+        >
+          <img
+            v-if="logoSrc"
+            :key="logoSrc"
+            :alt="appName"
+            :src="logoSrc"
+            class="mr-2"
+            width="42"
+          />
+          <p v-if="appName" class="m-0 text-xl font-medium">
+            {{ appName }}
+          </p>
+        </div>
+      </div>
+    </slot>
+
+    <!-- 系统介绍 -->
+    <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
+      <div
+        class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]"
+      >
+        <div class="login-background absolute left-0 top-0 size-full"></div>
+        <div
+          :key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
+          class="flex-col-center mr-20 h-full"
+          :class="{
+            'enter-x': authPanelLeft,
+            '-enter-x': authPanelRight,
+          }"
+        >
+          <template v-if="sloganImage">
+            <img
+              :alt="appName"
+              :src="sloganImage"
+              class="animate-float h-64 w-2/5"
+            />
+          </template>
+          <SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" />
+          <div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">
+            {{ pageTitle }}
+          </div>
+          <div class="dark:text-muted-foreground mt-2">
+            {{ pageDescription }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 中心认证面板 -->
+    <div v-if="authPanelCenter" class="flex-center relative w-full">
+      <div class="login-background absolute left-0 top-0 size-full"></div>
+      <AuthenticationFormView
+        class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
+        data-side="bottom"
+      >
+        <template v-if="copyright" #copyright>
+          <slot name="copyright">
+            <Copyright
+              v-if="preferences.copyright.enable"
+              v-bind="preferences.copyright"
+            />
+          </slot>
+        </template>
+      </AuthenticationFormView>
+    </div>
+
+    <!-- 右侧认证面板 -->
+    <AuthenticationFormView
+      v-if="authPanelRight"
+      class="min-h-full w-2/5 flex-1"
+      data-side="right"
+    >
+      <template v-if="copyright" #copyright>
+        <slot name="copyright">
+          <Copyright
+            v-if="preferences.copyright.enable"
+            v-bind="preferences.copyright"
+          />
+        </slot>
+      </template>
+    </AuthenticationFormView>
+  </div>
+</template>
+
+<style scoped>
+.login-background {
+  background: linear-gradient(
+    154deg,
+    #07070915 30%,
+    hsl(var(--primary) / 30%) 48%,
+    #07070915 64%
+  );
+  filter: blur(100px);
+}
+
+.dark {
+  .login-background {
+    background: linear-gradient(
+      154deg,
+      #07070915 30%,
+      hsl(var(--primary) / 20%) 48%,
+      #07070915 64%
+    );
+    filter: blur(100px);
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/layouts/src/authentication/form.vue b/admin-ui/vue/packages/effects/layouts/src/authentication/form.vue
new file mode 100644
index 0000000..fa73e12
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/authentication/form.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'AuthenticationFormView',
+});
+
+defineProps<{
+  dataSide?: 'bottom' | 'left' | 'right' | 'top';
+}>();
+</script>
+
+<template>
+  <div
+    class="flex-col-center dark:bg-background-deep bg-background relative px-6 py-10 lg:flex-initial lg:px-8"
+  >
+    <slot></slot>
+    <!-- Router View with Transition and KeepAlive -->
+    <RouterView v-slot="{ Component, route }">
+      <Transition appear mode="out-in" name="slide-right">
+        <KeepAlive :include="['Login']">
+          <component
+            :is="Component"
+            :key="route.fullPath"
+            class="side-content mt-6 w-full sm:mx-auto md:max-w-md"
+            :data-side="dataSide"
+          />
+        </KeepAlive>
+      </Transition>
+    </RouterView>
+
+    <!-- Footer Copyright -->
+
+    <div
+      class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
+    >
+      <slot name="copyright"> </slot>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/authentication/icons/slogan.vue b/admin-ui/vue/packages/effects/layouts/src/authentication/icons/slogan.vue
new file mode 100644
index 0000000..82cc119
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/authentication/icons/slogan.vue
@@ -0,0 +1,4568 @@
+<template>
+  <svg
+    enable-background="new 0 0 800 800"
+    version="1.1"
+    viewBox="0 0 800 800"
+    x="0px"
+    xml:space="preserve"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    y="0px"
+  >
+    <filter
+      id="filter-95"
+      filterUnits="objectBoundingBox"
+      height="124.9%"
+      width="114.5%"
+      x="-7.3%"
+      y="-12.5%"
+    >
+      <feGaussianBlur in="SourceGraphic" stdDeviation="4.21434086" />
+    </filter>
+    <filter
+      id="filter-79"
+      filterUnits="objectBoundingBox"
+      height="101.4%"
+      width="100.8%"
+      x="-0.4%"
+      y="-0.7%"
+    >
+      <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetInner1" />
+      <feComposite
+        in="shadowOffsetInner1"
+        in2="SourceAlpha"
+        k2="-1"
+        k3="1"
+        operator="arithmetic"
+        result="shadowInnerInner1"
+      />
+      <feColorMatrix
+        in="shadowInnerInner1"
+        type="matrix"
+        values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.498880026 0"
+      />
+    </filter>
+    <filter
+      id="filter-71"
+      filterUnits="objectBoundingBox"
+      height="142.5%"
+      width="120.1%"
+      x="-10.1%"
+      y="-21.3%"
+    >
+      <feGaussianBlur in="SourceGraphic" stdDeviation="4.21434086" />
+    </filter>
+    <filter
+      id="filter-59"
+      filterUnits="objectBoundingBox"
+      height="181.0%"
+      width="133.4%"
+      x="-16.7%"
+      y="-40.5%"
+    >
+      <feGaussianBlur in="SourceGraphic" stdDeviation="4.85695311" />
+    </filter>
+    <filter
+      id="filter-56"
+      filterUnits="objectBoundingBox"
+      height="181.0%"
+      width="133.4%"
+      x="-16.7%"
+      y="-40.5%"
+    >
+      <feGaussianBlur in="SourceGraphic" stdDeviation="2.91417187" />
+    </filter>
+    <filter
+      id="filter-53"
+      filterUnits="objectBoundingBox"
+      height="100.9%"
+      width="100.5%"
+      x="-0.2%"
+      y="-0.4%"
+    >
+      <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetInner1" />
+      <feComposite
+        in="shadowOffsetInner1"
+        in2="SourceAlpha"
+        k2="-1"
+        k3="1"
+        operator="arithmetic"
+        result="shadowInnerInner1"
+      />
+      <feColorMatrix
+        in="shadowInnerInner1"
+        type="matrix"
+        values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.498880026 0"
+      />
+    </filter>
+    <filter
+      id="filter-50"
+      filterUnits="objectBoundingBox"
+      height="241.5%"
+      width="643.8%"
+      x="-271.9%"
+      y="-70.7%"
+    >
+      <feGaussianBlur in="SourceGraphic" stdDeviation="16.2954513" />
+    </filter>
+    <filter
+      id="filter-5"
+      filterUnits="objectBoundingBox"
+      height="100.8%"
+      width="100.4%"
+      x="-0.2%"
+      y="-0.4%"
+    >
+      <feOffset dx="0" dy="-3" in="SourceAlpha" result="shadowOffsetInner1" />
+      <feComposite
+        in="shadowOffsetInner1"
+        in2="SourceAlpha"
+        k2="-1"
+        k3="1"
+        operator="arithmetic"
+        result="shadowInnerInner1"
+      />
+      <feColorMatrix
+        in="shadowInnerInner1"
+        type="matrix"
+        values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.498880026 0"
+      />
+    </filter>
+    <filter
+      id="filter-46"
+      filterUnits="objectBoundingBox"
+      height="100.7%"
+      width="100.4%"
+      x="-0.2%"
+      y="-0.3%"
+    >
+      <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetInner1" />
+      <feComposite
+        in="shadowOffsetInner1"
+        in2="SourceAlpha"
+        k2="-1"
+        k3="1"
+        operator="arithmetic"
+        result="shadowInnerInner1"
+      />
+      <feColorMatrix
+        in="shadowInnerInner1"
+        type="matrix"
+        values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.498880026 0"
+      />
+    </filter>
+    <filter
+      id="filter-43"
+      filterUnits="objectBoundingBox"
+      height="241.5%"
+      width="643.8%"
+      x="-271.9%"
+      y="-70.7%"
+    >
+      <feGaussianBlur in="SourceGraphic" stdDeviation="20.3693141" />
+    </filter>
+    <filter
+      id="filter-39"
+      filterUnits="objectBoundingBox"
+      height="113.3%"
+      width="107.0%"
+      x="-3.5%"
+      y="-6.7%"
+    >
+      <feGaussianBlur in="SourceGraphic" stdDeviation="3.51195071" />
+    </filter>
+    <filter
+      id="filter-34"
+      filterUnits="objectBoundingBox"
+      height="103.6%"
+      width="102.1%"
+      x="-1.1%"
+      y="-1.8%"
+    >
+      <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetInner1" />
+      <feComposite
+        in="shadowOffsetInner1"
+        in2="SourceAlpha"
+        k2="-1"
+        k3="1"
+        operator="arithmetic"
+        result="shadowInnerInner1"
+      />
+      <feColorMatrix
+        in="shadowInnerInner1"
+        type="matrix"
+        values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.833806818 0"
+      />
+    </filter>
+    <filter
+      id="filter-29"
+      filterUnits="objectBoundingBox"
+      height="103.6%"
+      width="102.1%"
+      x="-1.1%"
+      y="-1.8%"
+    >
+      <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetInner1" />
+      <feComposite
+        in="shadowOffsetInner1"
+        in2="SourceAlpha"
+        k2="-1"
+        k3="1"
+        operator="arithmetic"
+        result="shadowInnerInner1"
+      />
+      <feColorMatrix
+        in="shadowInnerInner1"
+        type="matrix"
+        values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.833806818 0"
+      />
+    </filter>
+    <filter
+      id="filter-24"
+      filterUnits="objectBoundingBox"
+      height="103.6%"
+      width="102.1%"
+      x="-1.1%"
+      y="-1.8%"
+    >
+      <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetInner1" />
+      <feComposite
+        in="shadowOffsetInner1"
+        in2="SourceAlpha"
+        k2="-1"
+        k3="1"
+        operator="arithmetic"
+        result="shadowInnerInner1"
+      />
+      <feColorMatrix
+        in="shadowInnerInner1"
+        type="matrix"
+        values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.833806818 0"
+      />
+    </filter>
+    <filter
+      id="filter-20"
+      filterUnits="objectBoundingBox"
+      height="102.3%"
+      width="101.3%"
+      x="-0.7%"
+      y="-1.1%"
+    >
+      <feOffset dx="0" dy="-3" in="SourceAlpha" result="shadowOffsetInner1" />
+      <feComposite
+        in="shadowOffsetInner1"
+        in2="SourceAlpha"
+        k2="-1"
+        k3="1"
+        operator="arithmetic"
+        result="shadowInnerInner1"
+      />
+      <feColorMatrix
+        in="shadowInnerInner1"
+        type="matrix"
+        values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.498880026 0"
+      />
+    </filter>
+    <filter
+      id="filter-14"
+      filterUnits="objectBoundingBox"
+      height="103.6%"
+      width="102.1%"
+      x="-1.0%"
+      y="-1.8%"
+    >
+      <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetInner1" />
+      <feComposite
+        in="shadowOffsetInner1"
+        in2="SourceAlpha"
+        k2="-1"
+        k3="1"
+        operator="arithmetic"
+        result="shadowInnerInner1"
+      />
+      <feColorMatrix
+        in="shadowInnerInner1"
+        type="matrix"
+        values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.833806818 0"
+      />
+    </filter>
+    <filter
+      id="filter-109"
+      filterUnits="objectBoundingBox"
+      height="102.5%"
+      width="101.4%"
+      x="-0.7%"
+      y="-1.2%"
+    >
+      <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetInner1" />
+      <feComposite
+        in="shadowOffsetInner1"
+        in2="SourceAlpha"
+        k2="-1"
+        k3="1"
+        operator="arithmetic"
+        result="shadowInnerInner1"
+      />
+      <feColorMatrix
+        in="shadowInnerInner1"
+        type="matrix"
+        values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.833806818 0"
+      />
+    </filter>
+    <filter
+      id="filter-106"
+      filterUnits="objectBoundingBox"
+      height="149.1%"
+      width="128.6%"
+      x="-14.3%"
+      y="-24.5%"
+    >
+      <feGaussianBlur in="SourceGraphic" stdDeviation="4.71559623" />
+    </filter>
+    <filter
+      id="filter-100"
+      filterUnits="objectBoundingBox"
+      height="133.5%"
+      width="119.4%"
+      x="-9.7%"
+      y="-16.8%"
+    >
+      <feGaussianBlur in="SourceGraphic" stdDeviation="4.21434086" />
+    </filter>
+    <filter
+      id="filter-10"
+      filterUnits="objectBoundingBox"
+      height="100.7%"
+      width="100.4%"
+      x="-0.2%"
+      y="-0.3%"
+    >
+      <feOffset dx="0" dy="-3" in="SourceAlpha" result="shadowOffsetInner1" />
+      <feComposite
+        in="shadowOffsetInner1"
+        in2="SourceAlpha"
+        k2="-1"
+        k3="1"
+        operator="arithmetic"
+        result="shadowInnerInner1"
+      />
+      <feColorMatrix
+        in="shadowInnerInner1"
+        type="matrix"
+        values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.498880026 0"
+      />
+    </filter>
+    <title>87667-SVG8</title>
+    <g>
+      <g id="Group备份" transform="translate(40.000000, 350.000000)">
+        <linearGradient
+          id="Shape_1_"
+          gradientTransform="matrix(352.3498 0 0 -229.3688 -21376.5684 335815.1875)"
+          gradientUnits="userSpaceOnUse"
+          x1="62.7934"
+          x2="61.7099"
+          y1="1462.9332"
+          y2="1462.535"
+        >
+          <stop offset="0" style="stop-color: #0043fb" />
+          <stop offset="1" style="stop-color: #3684ff" />
+        </linearGradient>
+        <path
+          id="Shape"
+          d="M368,428.9c1.4,0.8,3.2,0.8,4.6,0l344.4-198.3c2.8-1.6,3.4-5.4,1.2-7.8l-16.3-22.7
+			L370.3,395.7v31.6l-3.2,1L368,428.9z"
+          fill="url(#Shape_1_)"
+        />
+
+        <linearGradient
+          id="SVGID_1_"
+          gradientTransform="matrix(369.5781 0 0 -241.7468 -22811.1367 353968.8438)"
+          gradientUnits="userSpaceOnUse"
+          x1="63.31"
+          x2="61.5984"
+          y1="1462.5217"
+          y2="1463.1935"
+        >
+          <stop offset="5.400000e-03" style="stop-color: #00c6fb" />
+          <stop offset="1" style="stop-color: #005bea" />
+        </linearGradient>
+        <path
+          d="M370.3,427.3c0,1.3-1.4,2.1-2.5,1.4L3.2,217.3c-2.8-1.6-3.4-5.4-1.2-7.8l17.8-22.3l350.5,208.4
+			V427.3L370.3,427.3z"
+          fill="url(#SVGID_1_)"
+        />
+        <g>
+          <g>
+            <linearGradient
+              id="path-4_1_"
+              gradientTransform="matrix(689.8593 0 0 -397.2563 -42654.3008 582014.8125)"
+              gradientUnits="userSpaceOnUse"
+              x1="62.5423"
+              x2="62.1013"
+              y1="1464.4305"
+              y2="1464.7888"
+            >
+              <stop offset="0" style="stop-color: #4587ef" />
+              <stop offset="1" style="stop-color: #00209e" />
+            </linearGradient>
+            <path
+              id="path-4"
+              clip-rule="evenodd"
+              d="M355.7,393.8L18,198.7
+					c-4-2.3-4-8.1,0-10.4L337.8,3.6c7.4-4.3,16.5-4.3,24,0l340.1,196.5c4,2.3,4,8.1,0,10.4L384.4,393.8
+					C375.5,398.9,364.6,398.9,355.7,393.8z"
+              fill="url(#path-4_1_)"
+              fill-rule="evenodd"
+            />
+          </g>
+          <g filter="url(#filter-5)">
+            <path
+              clip-rule="evenodd"
+              d="M355.7,393.8L18,198.7c-4-2.3-4-8.1,0-10.4L337.8,3.6c7.4-4.3,16.5-4.3,24,0
+					l340.1,196.5c4,2.3,4,8.1,0,10.4L384.4,393.8C375.5,398.9,364.6,398.9,355.7,393.8z"
+              fill-rule="evenodd"
+            />
+          </g>
+        </g>
+        <path
+          id="Shape备份"
+          d="M356.1,376L49.6,199c-3.6-2.1-3.6-7.4,0-9.5
+			L339.8,21.9c6.7-3.9,15-3.9,21.7,0l308.6,178.3c3.6,2.1,3.6,7.4,0,9.5L382.1,376C374.1,380.7,364.1,380.7,356.1,376z"
+          fill="none"
+          stroke="#FFFFFF"
+          stroke-width="0.9511"
+        />
+      </g>
+      <g id="Group" transform="translate(0.000000, 259.000000)">
+        <linearGradient
+          id="SVGID_2_"
+          gradientTransform="matrix(391.4998 0 0 -254.8542 -39423.0664 396432.7188)"
+          gradientUnits="userSpaceOnUse"
+          x1="102.8224"
+          x2="101.7388"
+          y1="1554.3767"
+          y2="1553.9784"
+        >
+          <stop offset="0" style="stop-color: #0043fb" />
+          <stop offset="1" style="stop-color: #3684ff" />
+        </linearGradient>
+        <path
+          d="M408.9,476.5c1.6,0.9,3.5,0.9,5.1,0l382.6-220.3c3.1-1.8,3.8-6,1.3-8.7l-18.1-25.2L411.4,439.6
+			v35.2l-3.5,1.1L408.9,476.5z"
+          fill="url(#SVGID_2_)"
+        />
+
+        <linearGradient
+          id="SVGID_3_"
+          gradientTransform="matrix(410.6423 0 0 -268.6075 -41782.7344 417855)"
+          gradientUnits="userSpaceOnUse"
+          x1="103.3376"
+          x2="101.626"
+          y1="1553.9424"
+          y2="1554.6141"
+        >
+          <stop offset="5.400000e-03" style="stop-color: #00c6fb" />
+          <stop offset="1" style="stop-color: #005bea" />
+        </linearGradient>
+        <path
+          d="M411.4,474.8c0,1.4-1.5,2.3-2.8,1.6L3.6,241.5c-3.1-1.8-3.8-6-1.3-8.7L22,208l389.4,231.6V474.8
+			L411.4,474.8z"
+          fill="url(#SVGID_3_)"
+        />
+        <g>
+          <g>
+            <linearGradient
+              id="path-9_1_"
+              gradientTransform="matrix(766.5103 0 0 -441.3958 -78065.4141 686963.125)"
+              gradientUnits="userSpaceOnUse"
+              x1="102.5571"
+              x2="102.1161"
+              y1="1555.6865"
+              y2="1556.0448"
+            >
+              <stop offset="0" style="stop-color: #4587ef" />
+              <stop offset="1" style="stop-color: #00209e" />
+            </linearGradient>
+            <path
+              id="path-9"
+              clip-rule="evenodd"
+              d="M395.2,437.6L20,220.8
+					c-4.5-2.6-4.5-9,0-11.6L375.3,4c8.2-4.8,18.4-4.8,26.6,0l377.9,218.3c4.5,2.6,4.5,9,0,11.6L427.1,437.6
+					C417.2,443.3,405.1,443.3,395.2,437.6z"
+              fill="url(#path-9_1_)"
+              fill-rule="evenodd"
+            />
+          </g>
+          <g filter="url(#filter-10)">
+            <path
+              clip-rule="evenodd"
+              d="M395.2,437.6L20,220.8c-4.5-2.6-4.5-9,0-11.6L375.3,4c8.2-4.8,18.4-4.8,26.6,0
+					l377.9,218.3c4.5,2.6,4.5,9,0,11.6L427.1,437.6C417.2,443.3,405.1,443.3,395.2,437.6z"
+              fill-rule="evenodd"
+            />
+          </g>
+        </g>
+        <path
+          d="M395.6,417.8L55.2,221.1c-4.1-2.3-4.1-8.2,0-10.5L377.6,24.4
+			c7.5-4.3,16.7-4.3,24.2,0l342.9,198.1c4.1,2.3,4.1,8.2,0,10.5L424.6,417.8C415.6,423,404.6,423,395.6,417.8z"
+          fill="none"
+          stroke="#FFFFFF"
+          stroke-width="1.0568"
+        />
+      </g>
+      <g id="编组备份-4" transform="translate(386.000000, 561.000000)">
+        <g id="编组备份-3" transform="translate(0.000000, 69.529529)">
+          <g id="Stroke-1">
+            <g>
+              <linearGradient
+                id="path-13_1_"
+                gradientTransform="matrix(47.9924 0 0 -27.7074 13731.9688 31874.9453)"
+                gradientUnits="userSpaceOnUse"
+                x1="-285.6253"
+                x2="-285.6253"
+                y1="1149.4111"
+                y2="1150.4111"
+              >
+                <stop offset="0" style="stop-color: #3a3aff" />
+                <stop offset="1" style="stop-color: #0707d6" />
+              </linearGradient>
+              <polygon
+                id="path-13"
+                clip-rule="evenodd"
+                fill="url(#path-13_1_)"
+                fill-rule="evenodd"
+                points="0.1,13.9 24.1,27.8 48.1,13.9
+						24.1,0.1 					"
+              />
+            </g>
+            <g>
+              <linearGradient
+                id="SVGID_4_"
+                gradientTransform="matrix(47.9924 0 0 -27.7074 13731.9688 31874.9453)"
+                gradientUnits="userSpaceOnUse"
+                x1="-285.6253"
+                x2="-285.6253"
+                y1="1149.4111"
+                y2="1150.4294"
+              >
+                <stop
+                  offset="0"
+                  style="stop-color: #8fa0ff; stop-opacity: 0.467"
+                />
+                <stop
+                  offset="1"
+                  style="stop-color: #0f0f0f; stop-opacity: 0.06"
+                />
+                <stop offset="1" style="stop-color: #2f59e1; stop-opacity: 0" />
+              </linearGradient>
+              <polygon
+                clip-rule="evenodd"
+                fill="url(#SVGID_4_)"
+                fill-rule="evenodd"
+                points="0.1,13.9 24.1,27.8 48.1,13.9 24.1,0.1
+						"
+              />
+            </g>
+            <g filter="url(#filter-14)">
+              <polygon
+                clip-rule="evenodd"
+                fill-rule="evenodd"
+                points="0.1,13.9 24.1,27.8 48.1,13.9 24.1,0.1 					"
+              />
+            </g>
+          </g>
+
+          <linearGradient
+            id="Stroke-3_1_"
+            gradientTransform="matrix(23.9962 0 0 -41.5628 6916.9932 48336.7578)"
+            gradientUnits="userSpaceOnUse"
+            x1="-287.7007"
+            x2="-287.815"
+            y1="1162.8857"
+            y2="1161.1971"
+          >
+            <stop offset="0" style="stop-color: #4f3eff" />
+            <stop offset="1" style="stop-color: #060071" />
+          </linearGradient>
+          <polygon
+            id="Stroke-3"
+            clip-rule="evenodd"
+            fill="url(#Stroke-3_1_)"
+            fill-rule="evenodd"
+            points="24.1,55.5 24.1,27.8 0.1,13.9
+				0.1,41.6 			"
+          />
+
+          <linearGradient
+            id="Stroke-5_1_"
+            gradientTransform="matrix(23.9962 0 0 -41.5628 6941.0435 48336.7578)"
+            gradientUnits="userSpaceOnUse"
+            x1="-287.7007"
+            x2="-287.815"
+            y1="1162.8857"
+            y2="1161.1971"
+          >
+            <stop offset="0" style="stop-color: #1200ca" />
+            <stop offset="1" style="stop-color: #060071" />
+          </linearGradient>
+          <polygon
+            id="Stroke-5"
+            clip-rule="evenodd"
+            fill="url(#Stroke-5_1_)"
+            fill-rule="evenodd"
+            points="24.1,55.5 24.1,27.8
+				48.1,13.9 48.1,41.6 			"
+          />
+        </g>
+
+        <linearGradient
+          id="矩形_1_"
+          gradientTransform="matrix(48.245 0 0 -97.3101 13803.5742 121267.3516)"
+          gradientUnits="userSpaceOnUse"
+          x1="-285.6142"
+          x2="-285.6142"
+          y1="1246.0574"
+          y2="1244.9515"
+        >
+          <stop offset="0" style="stop-color: #fff; stop-opacity: 0" />
+          <stop offset="1" style="stop-color: #fff" />
+        </linearGradient>
+
+        <polygon
+          id="矩形"
+          clip-rule="evenodd"
+          enable-background="new    "
+          fill="url(#矩形_1_)"
+          fill-rule="evenodd"
+          opacity="0.1977"
+          points="
+			0,0 48.2,0 48.2,83.7 24.1,97.3 0,83.7 		"
+        />
+      </g>
+      <g id="编组-4" transform="translate(71.000000, 199.000000)">
+        <g id="Shape备份-2">
+          <g>
+            <linearGradient
+              id="path-19_1_"
+              gradientTransform="matrix(228.3947 0 0 -131.5657 -6978.2363 212124.2031)"
+              gradientUnits="userSpaceOnUse"
+              x1="31.2434"
+              x2="30.8024"
+              y1="1610.2603"
+              y2="1610.6188"
+            >
+              <stop offset="0" style="stop-color: #4587ef" />
+              <stop offset="1" style="stop-color: #00209e" />
+            </linearGradient>
+            <path
+              id="path-19"
+              clip-rule="evenodd"
+              d="M63.4,312.7l-62-35.9
+					c-1.9-1.1-1.9-3.8,0-4.9l151.1-87.4c3.5-2,7.8-2,11.3,0l63.1,36.6c1.9,1.1,1.9,3.8,0,4.9L77,312.7
+					C72.8,315.2,67.6,315.2,63.4,312.7z"
+              fill="url(#path-19_1_)"
+              fill-rule="evenodd"
+            />
+          </g>
+          <g filter="url(#filter-20)">
+            <path
+              clip-rule="evenodd"
+              d="M63.4,312.7l-62-35.9c-1.9-1.1-1.9-3.8,0-4.9l151.1-87.4c3.5-2,7.8-2,11.3,0
+					l63.1,36.6c1.9,1.1,1.9,3.8,0,4.9L77,312.7C72.8,315.2,67.6,315.2,63.4,312.7z"
+              fill-rule="evenodd"
+            />
+          </g>
+        </g>
+        <g id="编组-13" transform="translate(45.000000, 0.000000)">
+          <g id="编组备份-17" transform="translate(90.066225, 54.000000)">
+            <g>
+              <g>
+                <linearGradient
+                  id="path-23_1_"
+                  gradientTransform="matrix(47.5983 0 0 -27.4798 5055.4995 41979.2891)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-105.7092"
+                  x2="-105.7092"
+                  y1="1526.6367"
+                  y2="1527.6367"
+                >
+                  <stop offset="0" style="stop-color: #3a3aff" />
+                  <stop offset="1" style="stop-color: #0707d6" />
+                </linearGradient>
+                <polygon
+                  id="path-23"
+                  clip-rule="evenodd"
+                  fill="url(#path-23_1_)"
+                  fill-rule="evenodd"
+                  points="0.1,13.8 23.9,27.6
+							47.7,13.8 23.9,0.1 						"
+                />
+              </g>
+              <g>
+                <linearGradient
+                  id="SVGID_5_"
+                  gradientTransform="matrix(47.5983 0 0 -27.4798 5055.4995 41979.2891)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-105.7092"
+                  x2="-105.7092"
+                  y1="1526.6367"
+                  y2="1527.655"
+                >
+                  <stop
+                    offset="0"
+                    style="stop-color: #8fa0ff; stop-opacity: 0.467"
+                  />
+                  <stop
+                    offset="1"
+                    style="stop-color: #0f0f0f; stop-opacity: 0.06"
+                  />
+                  <stop
+                    offset="1"
+                    style="stop-color: #2f59e1; stop-opacity: 0"
+                  />
+                </linearGradient>
+                <polygon
+                  clip-rule="evenodd"
+                  fill="url(#SVGID_5_)"
+                  fill-rule="evenodd"
+                  points="0.1,13.8 23.9,27.6 47.7,13.8 23.9,0.1
+													"
+                />
+              </g>
+              <g filter="url(#filter-24)">
+                <polygon
+                  clip-rule="evenodd"
+                  fill-rule="evenodd"
+                  points="0.1,13.8 23.9,27.6 47.7,13.8 23.9,0.1 						"
+                />
+              </g>
+            </g>
+
+            <linearGradient
+              id="SVGID_6_"
+              gradientTransform="matrix(23.7991 0 0 -168.4388 2578.7588 262543.8125)"
+              gradientUnits="userSpaceOnUse"
+              x1="-107.8491"
+              x2="-107.8559"
+              y1="1558.8499"
+              y2="1557.1613"
+            >
+              <stop offset="0" style="stop-color: #4f3eff" />
+              <stop offset="1" style="stop-color: #060071" />
+            </linearGradient>
+            <polygon
+              clip-rule="evenodd"
+              fill="url(#SVGID_6_)"
+              fill-rule="evenodd"
+              points="23.9,182.3 23.9,27.6 0.1,13.8 0.1,168.5
+					"
+            />
+
+            <linearGradient
+              id="SVGID_7_"
+              gradientTransform="matrix(23.7991 0 0 -168.4388 2602.6116 262543.8125)"
+              gradientUnits="userSpaceOnUse"
+              x1="-107.8491"
+              x2="-107.8559"
+              y1="1558.8499"
+              y2="1557.1613"
+            >
+              <stop offset="0" style="stop-color: #1200ca" />
+              <stop offset="1" style="stop-color: #060071" />
+            </linearGradient>
+            <polygon
+              clip-rule="evenodd"
+              fill="url(#SVGID_7_)"
+              fill-rule="evenodd"
+              points="23.9,182.3 23.9,27.6 47.7,13.8 47.7,168.5
+									"
+            />
+          </g>
+          <g id="编组备份-16" transform="translate(45.562914, 134.529801)">
+            <g>
+              <g>
+                <linearGradient
+                  id="path-28_1_"
+                  gradientTransform="matrix(47.5983 0 0 -27.4798 2937.218 39766.3438)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-61.7058"
+                  x2="-60.7058"
+                  y1="1446.6069"
+                  y2="1446.6069"
+                >
+                  <stop offset="0" style="stop-color: #bda0e5" />
+                  <stop offset="1" style="stop-color: #5f3abd" />
+                </linearGradient>
+                <polygon
+                  id="path-28"
+                  clip-rule="evenodd"
+                  fill="url(#path-28_1_)"
+                  fill-rule="evenodd"
+                  points="0.1,13.8 23.9,27.6
+							47.7,13.8 23.9,0.1 						"
+                />
+              </g>
+              <g>
+                <linearGradient
+                  id="SVGID_8_"
+                  gradientTransform="matrix(47.5983 0 0 -27.4798 2937.218 39766.3438)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-61.2058"
+                  x2="-61.2058"
+                  y1="1446.1069"
+                  y2="1447.1252"
+                >
+                  <stop
+                    offset="0"
+                    style="stop-color: #8fa0ff; stop-opacity: 0.467"
+                  />
+                  <stop
+                    offset="1"
+                    style="stop-color: #0f0f0f; stop-opacity: 0.06"
+                  />
+                  <stop
+                    offset="1"
+                    style="stop-color: #2f59e1; stop-opacity: 0"
+                  />
+                </linearGradient>
+                <polygon
+                  clip-rule="evenodd"
+                  fill="url(#SVGID_8_)"
+                  fill-rule="evenodd"
+                  points="0.1,13.8 23.9,27.6 47.7,13.8 23.9,0.1
+													"
+                />
+              </g>
+              <g filter="url(#filter-29)">
+                <polygon
+                  clip-rule="evenodd"
+                  fill-rule="evenodd"
+                  points="0.1,13.8 23.9,27.6 47.7,13.8 23.9,0.1 						"
+                />
+              </g>
+            </g>
+
+            <linearGradient
+              id="SVGID_9_"
+              gradientTransform="matrix(23.7991 0 0 -114.399 1519.618 168778.2344)"
+              gradientUnits="userSpaceOnUse"
+              x1="-63.3488"
+              x2="-63.3488"
+              y1="1475.4679"
+              y2="1474.0222"
+            >
+              <stop offset="0" style="stop-color: #4f3eff" />
+              <stop offset="1" style="stop-color: #f77" />
+            </linearGradient>
+            <polygon
+              clip-rule="evenodd"
+              fill="url(#SVGID_9_)"
+              fill-rule="evenodd"
+              points="23.9,128.2 23.9,27.6 0.1,13.8 0.1,114.5
+					"
+            />
+
+            <linearGradient
+              id="SVGID_10_"
+              gradientTransform="matrix(23.7991 0 0 -114.399 1543.4708 168778.2344)"
+              gradientUnits="userSpaceOnUse"
+              x1="-63.3488"
+              x2="-63.3488"
+              y1="1475.4679"
+              y2="1474.0222"
+            >
+              <stop offset="0" style="stop-color: #4f3eff" />
+              <stop offset="1" style="stop-color: #d73838" />
+            </linearGradient>
+            <polygon
+              clip-rule="evenodd"
+              fill="url(#SVGID_10_)"
+              fill-rule="evenodd"
+              points="23.9,128.2 23.9,27.6 47.7,13.8 47.7,114.5
+									"
+            />
+          </g>
+          <g id="编组备份-18" transform="translate(0.000000, 0.271523)">
+            <g>
+              <g>
+                <linearGradient
+                  id="path-33_1_"
+                  gradientTransform="matrix(47.5983 0 0 -27.4798 768.5011 43638.7383)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-16.1429"
+                  x2="-15.1429"
+                  y1="1580.8652"
+                  y2="1580.8652"
+                >
+                  <stop offset="0" style="stop-color: #8afffc" />
+                  <stop offset="1" style="stop-color: #003dde" />
+                </linearGradient>
+                <polygon
+                  id="path-33"
+                  clip-rule="evenodd"
+                  fill="url(#path-33_1_)"
+                  fill-rule="evenodd"
+                  points="0.1,196.8 23.9,210.6
+							47.7,196.8 23.9,183.1 						"
+                />
+              </g>
+              <g>
+                <linearGradient
+                  id="SVGID_11_"
+                  gradientTransform="matrix(47.5983 0 0 -27.4798 768.5011 43638.7383)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-15.6429"
+                  x2="-15.6429"
+                  y1="1580.3652"
+                  y2="1581.3835"
+                >
+                  <stop
+                    offset="0"
+                    style="stop-color: #8fa0ff; stop-opacity: 0.467"
+                  />
+                  <stop
+                    offset="1"
+                    style="stop-color: #0f0f0f; stop-opacity: 0.06"
+                  />
+                  <stop
+                    offset="1"
+                    style="stop-color: #2f59e1; stop-opacity: 0"
+                  />
+                </linearGradient>
+                <polygon
+                  clip-rule="evenodd"
+                  fill="url(#SVGID_11_)"
+                  fill-rule="evenodd"
+                  points="0.1,196.8 23.9,210.6 47.7,196.8
+							23.9,183.1 						"
+                />
+              </g>
+              <g filter="url(#filter-34)">
+                <polygon
+                  clip-rule="evenodd"
+                  fill-rule="evenodd"
+                  points="0.1,196.8 23.9,210.6 47.7,196.8 23.9,183.1 						"
+                />
+              </g>
+            </g>
+
+            <linearGradient
+              id="SVGID_12_"
+              gradientTransform="matrix(48 0 0 -80.5525 774 129477.0156)"
+              gradientUnits="userSpaceOnUse"
+              x1="-15.625"
+              x2="-15.625"
+              y1="1604.7488"
+              y2="1605.7488"
+            >
+              <stop offset="0" style="stop-color: #45efed" />
+              <stop offset="1" style="stop-color: #d0ffed; stop-opacity: 0" />
+            </linearGradient>
+            <polygon
+              clip-rule="evenodd"
+              enable-background="new    "
+              fill="url(#SVGID_12_)"
+              fill-rule="evenodd"
+              opacity="0.3"
+              points="
+					0,130 48,130 48,196.7 24,210.6 0,196.7 				"
+            />
+
+            <linearGradient
+              id="矩形备份_1_"
+              gradientTransform="matrix(48 0 0 -80.5525 820 129428.7578)"
+              gradientUnits="userSpaceOnUse"
+              x1="-15.625"
+              x2="-15.625"
+              y1="1604.7488"
+              y2="1605.7488"
+            >
+              <stop offset="0" style="stop-color: #45efed" />
+              <stop offset="1" style="stop-color: #d0ffed; stop-opacity: 0" />
+            </linearGradient>
+
+            <polygon
+              id="矩形备份"
+              clip-rule="evenodd"
+              enable-background="new    "
+              fill="url(#矩形备份_1_)"
+              fill-rule="evenodd"
+              opacity="0.3"
+              points="
+					46,81.7 94,81.7 94,148.5 70,162.3 46,148.5 				"
+            />
+
+            <linearGradient
+              id="矩形备份-4_1_"
+              gradientTransform="matrix(48 0 0 -80.5525 863 129347.75)"
+              gradientUnits="userSpaceOnUse"
+              x1="-15.625"
+              x2="-15.625"
+              y1="1604.7488"
+              y2="1605.7488"
+            >
+              <stop offset="0" style="stop-color: #45efed" />
+              <stop offset="1" style="stop-color: #d0ffed; stop-opacity: 0" />
+            </linearGradient>
+
+            <polygon
+              id="矩形备份-4"
+              clip-rule="evenodd"
+              enable-background="new    "
+              fill="url(#矩形备份-4_1_)"
+              fill-rule="evenodd"
+              opacity="0.3"
+              points="
+					89,0.7 137,0.7 137,67.5 113,81.3 89,67.5 				"
+            />
+
+            <linearGradient
+              id="SVGID_13_"
+              gradientTransform="matrix(23.7991 0 0 -93.207 435.2595 150023.5938)"
+              gradientUnits="userSpaceOnUse"
+              x1="-17.8122"
+              x2="-17.7572"
+              y1="1607.5193"
+              y2="1606.3573"
+            >
+              <stop offset="0" style="stop-color: #68dfff" />
+              <stop offset="1" style="stop-color: #004a8b" />
+            </linearGradient>
+            <polygon
+              clip-rule="evenodd"
+              fill="url(#SVGID_13_)"
+              fill-rule="evenodd"
+              points="23.9,290 23.9,210.6 0.1,196.8 0.1,276.3
+					"
+            />
+
+            <linearGradient
+              id="SVGID_14_"
+              gradientTransform="matrix(23.7991 0 0 -93.207 459.1122 150023.5938)"
+              gradientUnits="userSpaceOnUse"
+              x1="-17.8038"
+              x2="-17.7678"
+              y1="1607.3881"
+              y2="1606.5361"
+            >
+              <stop offset="0" style="stop-color: #0567de" />
+              <stop offset="1" style="stop-color: #00048b" />
+            </linearGradient>
+            <polygon
+              clip-rule="evenodd"
+              fill="url(#SVGID_14_)"
+              fill-rule="evenodd"
+              points="23.9,290 23.9,210.6 47.7,196.8 47.7,276.3
+									"
+            />
+          </g>
+        </g>
+      </g>
+      <g id="编组-9" transform="translate(286.000000, 26.000000)">
+        <g id="编组-3" transform="translate(0.000000, 326.797996)">
+          <g id="椭圆形" filter="url(#filter-39)">
+            <linearGradient
+              id="SVGID_15_"
+              gradientTransform="matrix(298.9761 -31.4237 -16.5194 -157.172 79324.2969 223473.4688)"
+              gradientUnits="userSpaceOnUse"
+              x1="-183.6863"
+              x2="-184.3618"
+              y1="1458.1069"
+              y2="1457.9841"
+            >
+              <stop offset="0" style="stop-color: #1b0f9c; stop-opacity: 0" />
+              <stop offset="1" style="stop-color: #060071" />
+            </linearGradient>
+            <path
+              clip-rule="evenodd"
+              d="M161.7,23.6c82.6-8.7,153.2,19.5,157.7,62.9
+					c4.6,43.4-58.7,85.6-141.2,94.3C95.7,189.5,25,161.3,20.5,117.9S79.1,32.3,161.7,23.6z"
+              fill="url(#SVGID_15_)"
+              fill-rule="evenodd"
+            />
+          </g>
+          <g transform="translate(0.000000, 32.309947)">
+            <g id="形状结合">
+              <linearGradient
+                id="SVGID_16_"
+                gradientTransform="matrix(252.8605 0 0 -153.121 46628.3242 218334.6719)"
+                gradientUnits="userSpaceOnUse"
+                x1="-184.3435"
+                x2="-183.4387"
+                y1="1425.4349"
+                y2="1425.3547"
+              >
+                <stop offset="0" style="stop-color: #3b76df" />
+                <stop offset="1" style="stop-color: #0c2ea7" />
+              </linearGradient>
+              <path
+                clip-rule="evenodd"
+                d="M36.9,21.3c49.2-28.4,129.8-28.4,179,0
+						c9.7,5.6,17.5,12.2,23.4,19.4l13.5,0v39.3l-0.1,0c-1.3,19.3-13.6,38.3-36.8,51.7c-49.2,28.4-129.8,28.4-179,0
+						C13.7,118.4,1.4,99.4,0.1,80.1l-0.1,0V40.7l13.5,0C19.4,33.5,27.2,26.9,36.9,21.3z"
+                fill="url(#SVGID_16_)"
+                fill-rule="evenodd"
+              />
+            </g>
+            <defs>
+              <filter
+                id="Adobe_OpacityMaskFilter"
+                filterUnits="userSpaceOnUse"
+                height="86.4"
+                width="22.5"
+                x="18.3"
+                y="59.7"
+              >
+                <feColorMatrix
+                  type="matrix"
+                  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                />
+              </filter>
+            </defs>
+            <mask
+              id="mask-42_1_"
+              height="86.4"
+              maskUnits="userSpaceOnUse"
+              width="22.5"
+              x="18.3"
+              y="59.7"
+            >
+              <g filter="url(#Adobe_OpacityMaskFilter)">
+                <path
+                  id="path-41_1_"
+                  clip-rule="evenodd"
+                  d="M36.9,21.3c49.2-28.4,129.8-28.4,179,0
+							c9.7,5.6,17.5,12.2,23.4,19.4l13.5,0v39.3l-0.1,0c-1.3,19.3-13.6,38.3-36.8,51.7c-49.2,28.4-129.8,28.4-179,0
+							C13.7,118.4,1.4,99.4,0.1,80.1l-0.1,0V40.7l13.5,0C19.4,33.5,27.2,26.9,36.9,21.3z"
+                  fill="#FFFFFF"
+                  fill-rule="evenodd"
+                />
+              </g>
+            </mask>
+            <g filter="url(#filter-43)" mask="url(#mask-42_1_)">
+              <rect
+                clip-rule="evenodd"
+                fill="#FFFFFF"
+                fill-rule="evenodd"
+                height="86.4"
+                width="22.5"
+                x="18.3"
+                y="59.7"
+              />
+            </g>
+          </g>
+          <g id="Stroke-1备份">
+            <g>
+              <linearGradient
+                id="path-45_1_"
+                gradientTransform="matrix(252.8604 0 0 -146.0971 46628.3203 212993.0469)"
+                gradientUnits="userSpaceOnUse"
+                x1="-183.7127"
+                x2="-184.1537"
+                y1="1457.2306"
+                y2="1457.5913"
+              >
+                <stop offset="0" style="stop-color: #4587ef" />
+                <stop offset="1" style="stop-color: #00209e" />
+              </linearGradient>
+              <path
+                id="path-45"
+                clip-rule="evenodd"
+                d="M36.9,21.3c-49.2,28.4-49.2,75,0,103.4
+						c49.2,28.4,129.8,28.4,179,0c49.2-28.4,49.2-75,0-103.4C166.7-7.1,86.2-7.1,36.9,21.3z"
+                fill="url(#path-45_1_)"
+                fill-rule="evenodd"
+              />
+            </g>
+            <g filter="url(#filter-46)">
+              <path
+                clip-rule="evenodd"
+                d="M36.9,21.3c-49.2,28.4-49.2,75,0,103.4c49.2,28.4,129.8,28.4,179,0
+						c49.2-28.4,49.2-75,0-103.4C166.7-7.1,86.2-7.1,36.9,21.3z"
+                fill-rule="evenodd"
+              />
+            </g>
+          </g>
+        </g>
+        <g id="编组-3备份" transform="translate(24.286045, 0.000000)">
+          <g transform="translate(1.000000, 323.847957)">
+            <g>
+              <linearGradient
+                id="SVGID_17_"
+                gradientTransform="matrix(202.2884 0 0 -122.4968 42438.1328 178783.5781)"
+                gradientUnits="userSpaceOnUse"
+                x1="-209.8152"
+                x2="-208.7883"
+                y1="1459.0104"
+                y2="1458.9812"
+              >
+                <stop offset="0" style="stop-color: #8dcbff" />
+                <stop offset="0.1196" style="stop-color: #cafbff" />
+                <stop offset="0.768" style="stop-color: #7feeff" />
+                <stop offset="1" style="stop-color: #adcbff" />
+              </linearGradient>
+              <path
+                clip-rule="evenodd"
+                d="M29.5,17.1c39.4-22.8,103.8-22.8,143.2,0
+						c7.8,4.5,14,9.8,18.7,15.5l10.8,0v31.5l-0.1,0c-1.1,15.5-10.9,30.6-29.4,41.4c-39.4,22.8-103.8,22.8-143.2,0
+						C11,94.7,1.2,79.5,0.1,64.1l-0.1,0V32.6l10.8,0C15.5,26.8,21.8,21.6,29.5,17.1z"
+                fill="url(#SVGID_17_)"
+                fill-rule="evenodd"
+              />
+            </g>
+            <defs>
+              <filter
+                id="Adobe_OpacityMaskFilter_1_"
+                filterUnits="userSpaceOnUse"
+                height="69.1"
+                width="18"
+                x="14.6"
+                y="47.8"
+              >
+                <feColorMatrix
+                  type="matrix"
+                  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                />
+              </filter>
+            </defs>
+            <mask
+              id="mask-49_1_"
+              height="69.1"
+              maskUnits="userSpaceOnUse"
+              width="18"
+              x="14.6"
+              y="47.8"
+            >
+              <g filter="url(#Adobe_OpacityMaskFilter_1_)">
+                <path
+                  id="path-48_1_"
+                  clip-rule="evenodd"
+                  d="M29.5,17.1c39.4-22.8,103.8-22.8,143.2,0
+							c7.8,4.5,14,9.8,18.7,15.5l10.8,0v31.5l-0.1,0c-1.1,15.5-10.9,30.6-29.4,41.4c-39.4,22.8-103.8,22.8-143.2,0
+							C11,94.7,1.2,79.5,0.1,64.1l-0.1,0V32.6l10.8,0C15.5,26.8,21.8,21.6,29.5,17.1z"
+                  fill="#FFFFFF"
+                  fill-rule="evenodd"
+                />
+              </g>
+            </mask>
+            <g filter="url(#filter-50)" mask="url(#mask-49_1_)">
+              <rect
+                clip-rule="evenodd"
+                fill="#FFFFFF"
+                fill-rule="evenodd"
+                height="69.1"
+                width="18"
+                x="14.6"
+                y="47.8"
+              />
+            </g>
+          </g>
+          <g>
+            <g>
+              <linearGradient
+                id="path-52_1_"
+                gradientTransform="matrix(202.2884 0 0 -116.8777 42236.8438 208684.4531)"
+                gradientUnits="userSpaceOnUse"
+                x1="-208.0996"
+                x2="-208.5406"
+                y1="1782.2883"
+                y2="1782.6489"
+              >
+                <stop offset="0" style="stop-color: #4587ef" />
+                <stop offset="1" style="stop-color: #00209e" />
+              </linearGradient>
+              <path
+                id="path-52"
+                clip-rule="evenodd"
+                d="M30.5,315.1c-39.4,22.8-39.4,60,0,82.7
+						c39.4,22.8,103.8,22.8,143.2,0c39.4-22.8,39.4-60,0-82.7C134.4,292.3,69.9,292.3,30.5,315.1z"
+                fill="url(#path-52_1_)"
+                fill-rule="evenodd"
+              />
+            </g>
+            <g filter="url(#filter-53)">
+              <path
+                clip-rule="evenodd"
+                d="M30.5,315.1c-39.4,22.8-39.4,60,0,82.7c39.4,22.8,103.8,22.8,143.2,0
+						c39.4-22.8,39.4-60,0-82.7C134.4,292.3,69.9,292.3,30.5,315.1z"
+                fill-rule="evenodd"
+              />
+            </g>
+          </g>
+
+          <linearGradient
+            id="SVGID_18_"
+            gradientTransform="matrix(202.5744 0 0 -414.8777 42296.1367 742296.8125)"
+            gradientUnits="userSpaceOnUse"
+            x1="-208.2896"
+            x2="-208.2896"
+            y1="1788.1943"
+            y2="1789.1943"
+          >
+            <stop offset="0" style="stop-color: #45efed" />
+            <stop offset="1" style="stop-color: #d0ffed; stop-opacity: 0" />
+          </linearGradient>
+          <path
+            clip-rule="evenodd"
+            d="M202.7,0
+				l0,350.2c3.1,17-6.5,34.7-29,47.6c-39.4,22.8-103.8,22.8-143.2,0C12,387.1,2.2,373.1,1.1,359l-0.4,0V0H202.7z"
+            enable-background="new    "
+            fill="url(#SVGID_18_)"
+            fill-rule="evenodd"
+            opacity="0.3"
+          />
+        </g>
+      </g>
+      <g id="编组-11备份" transform="translate(329.000000, 539.000000)">
+        <g id="编组-6备份" transform="translate(0.000000, 4.148936)">
+          <g filter="url(#filter-56)">
+            <linearGradient
+              id="SVGID_19_"
+              gradientTransform="matrix(52.2766 0 0 -21.5745 11984.5537 26508.6328)"
+              gradientUnits="userSpaceOnUse"
+              x1="-227.9383"
+              x2="-228.6138"
+              y1="1226.9152"
+              y2="1226.8395"
+            >
+              <stop offset="0" style="stop-color: #1b0f9c; stop-opacity: 0" />
+              <stop offset="1" style="stop-color: #060071" />
+            </linearGradient>
+            <ellipse
+              clip-rule="evenodd"
+              cx="41.9"
+              cy="39.8"
+              fill="url(#SVGID_19_)"
+              fill-rule="evenodd"
+              rx="26.1"
+              ry="10.8"
+            />
+          </g>
+
+          <radialGradient
+            id="SVGID_20_"
+            cx="-228.8779"
+            cy="1253.5115"
+            gradientTransform="matrix(48.9574 0 0 -48.9574 11215.3408 61379.1055)"
+            gradientUnits="userSpaceOnUse"
+            r="0.9018"
+          >
+            <stop offset="0" style="stop-color: #dedbff" />
+            <stop offset="0.3987" style="stop-color: #4165fc" />
+            <stop offset="1" style="stop-color: #0a00c2" />
+          </radialGradient>
+          <circle
+            clip-rule="evenodd"
+            cx="24.5"
+            cy="24.5"
+            fill="url(#SVGID_20_)"
+            fill-rule="evenodd"
+            r="24.5"
+          />
+        </g>
+        <g id="编组-6" transform="translate(23.510638, 0.000000)">
+          <g filter="url(#filter-59)">
+            <linearGradient
+              id="SVGID_21_"
+              gradientTransform="matrix(87.1277 0 0 -35.9574 21954.6836 45008.2383)"
+              gradientUnits="userSpaceOnUse"
+              x1="-250.6685"
+              x2="-251.344"
+              y1="1249.9197"
+              y2="1249.844"
+            >
+              <stop offset="0" style="stop-color: #1b0f9c; stop-opacity: 0" />
+              <stop offset="1" style="stop-color: #060071" />
+            </linearGradient>
+            <ellipse
+              clip-rule="evenodd"
+              cx="69.8"
+              cy="66.4"
+              fill="url(#SVGID_21_)"
+              fill-rule="evenodd"
+              rx="43.6"
+              ry="18"
+            />
+          </g>
+
+          <radialGradient
+            id="SVGID_22_"
+            cx="-251.5552"
+            cy="1265.9697"
+            gradientTransform="matrix(81.5957 0 0 -81.5957 20542.6016 103315.0391)"
+            gradientUnits="userSpaceOnUse"
+            r="0.9018"
+          >
+            <stop offset="0" style="stop-color: #dedbff" />
+            <stop offset="0.3987" style="stop-color: #4165fc" />
+            <stop offset="1" style="stop-color: #0a00c2" />
+          </radialGradient>
+          <circle
+            clip-rule="evenodd"
+            cx="40.8"
+            cy="40.8"
+            fill="url(#SVGID_22_)"
+            fill-rule="evenodd"
+            r="40.8"
+          />
+        </g>
+      </g>
+
+      <g
+        id="编组备份-9"
+        opacity="0.5"
+        transform="translate(488.000000, 172.000000) scale(-1, 1) translate(-488.000000, -172.000000) translate(449.000000, 122.000000)"
+      >
+        <linearGradient
+          id="SVGID_23_"
+          gradientTransform="matrix(-75.8604 0 0 -99.5101 32139.0957 167716.875)"
+          gradientUnits="userSpaceOnUse"
+          x1="423.6246"
+          x2="424.2521"
+          y1="1683.8809"
+          y2="1685.3489"
+        >
+          <stop offset="0" style="stop-color: #fff" />
+          <stop offset="1" style="stop-color: #00c6fb" />
+        </linearGradient>
+        <path
+          d="M72.5,0l3.8,2.1L75.1,4l-1.6,0.6l-0.7,49.2c0,1.6-0.9,3.4-2.1,4.2l-0.2,0.1L5.7,95.5l0,0l-0.7,4
+			l-3.7-2.1c-0.1,0-0.1-0.1-0.2-0.1l0,0c-0.4-0.3-0.7-0.9-0.7-1.8l0,0l0.8-51.8c0-1.7,1-3.6,2.3-4.3l0,0L71.2,0.3
+			C71.7,0,72.1-0.1,72.5,0L72.5,0z"
+          fill="url(#SVGID_23_)"
+        />
+
+        <linearGradient
+          id="SVGID_24_"
+          gradientTransform="matrix(-73.087 0 0 -97.5101 30963.9746 164327.5781)"
+          gradientUnits="userSpaceOnUse"
+          x1="423.5395"
+          x2="424.1461"
+          y1="1683.6631"
+          y2="1685.1311"
+        >
+          <stop offset="0" style="stop-color: #005bea" />
+          <stop offset="1" style="stop-color: #00c6fb" />
+        </linearGradient>
+        <path
+          d="M6.3,99.2l67.8-39.1c1.2-0.7,2.3-2.7,2.3-4.3L77.1,4c0-1.7-1-2.4-2.3-1.7L7,41.4
+			c-1.2,0.7-2.3,2.7-2.3,4.3L4,97.5C4,99.2,5,100,6.3,99.2z"
+          fill="url(#SVGID_24_)"
+        />
+        <g
+          id="XMLID_902_"
+          opacity="0.3"
+          transform="translate(51.463000, 21.500000)"
+        >
+          <path
+            id="XMLID_905_"
+            d="M17.9,4.7L1.7,14.1c-0.5,0.3-1.2,0.1-1.5-0.4C0.1,13.5,0,13.3,0,13.1
+				c0-1.2,0.6-2.2,1.6-2.8l16.3-9.4c0.5-0.3,1.2-0.1,1.5,0.4c0.1,0.2,0.1,0.4,0.1,0.5C19.5,3,18.9,4.1,17.9,4.7z"
+            fill="#FFFFFF"
+          />
+          <path
+            id="XMLID_905_备份"
+            d="M18.2,14.6L5.5,21.9c-0.4,0.2-0.9,0.1-1.1-0.3c-0.1-0.1-0.1-0.3-0.1-0.4
+				c0-0.9,0.5-1.7,1.3-2.2l12.6-7.3c0.4-0.2,0.9-0.1,1.1,0.3c0.1,0.1,0.1,0.3,0.1,0.4C19.4,13.3,18.9,14.2,18.2,14.6z"
+            fill="#FFFFFF"
+          />
+          <path
+            id="XMLID_905_备份-2"
+            d="M18.2,22.3L5.5,29.6c-0.4,0.2-0.9,0.1-1.1-0.3c-0.1-0.1-0.1-0.3-0.1-0.4
+				c0-0.9,0.5-1.7,1.3-2.2l12.6-7.3c0.4-0.2,0.9-0.1,1.1,0.3c0.1,0.1,0.1,0.3,0.1,0.4C19.4,21,18.9,21.8,18.2,22.3z"
+            fill="#FFFFFF"
+          />
+          <path
+            id="XMLID_905_备份-3"
+            d="M18.2,29.9L5.5,37.2c-0.4,0.2-0.9,0.1-1.1-0.3c-0.1-0.1-0.1-0.3-0.1-0.4
+				c0-0.9,0.5-1.7,1.3-2.2L18.2,27c0.4-0.2,0.9-0.1,1.1,0.3c0.1,0.1,0.1,0.3,0.1,0.4C19.4,28.7,18.9,29.5,18.2,29.9z"
+            fill="#FFFFFF"
+          />
+        </g>
+
+        <linearGradient
+          id="SVGID_25_"
+          gradientTransform="matrix(-43.8881 0 0 -83.0886 18579.1777 139875)"
+          gradientUnits="userSpaceOnUse"
+          x1="422.0028"
+          x2="421.7111"
+          y1="1683.5527"
+          y2="1682.4626"
+        >
+          <stop offset="0" style="stop-color: #fff" />
+          <stop offset="1" style="stop-color: #fff; stop-opacity: 0" />
+        </linearGradient>
+        <polygon
+          enable-background="new    "
+          fill="url(#SVGID_25_)"
+          opacity="0.4"
+          points="50,16.6 28.7,86.3 51,73.4 72.6,3.2 		"
+        />
+
+        <linearGradient
+          id="XMLID_22_"
+          gradientTransform="matrix(-6.6055 0 0 -25.864 2720.3372 42898.332)"
+          gradientUnits="userSpaceOnUse"
+          x1="408.911"
+          x2="408.7796"
+          y1="1654.5455"
+          y2="1655.6864"
+        >
+          <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+          <stop offset="0.2823" style="stop-color: #285ecb" />
+          <stop offset="0.538" style="stop-color: #3aa3dd" />
+          <stop offset="0.75" style="stop-color: #47d5eb" />
+          <stop offset="0.9102" style="stop-color: #4ff4f3" />
+          <stop offset="1" style="stop-color: #52fff6" />
+        </linearGradient>
+
+        <linearGradient
+          id="XMLID_23_"
+          gradientTransform="matrix(-6.6055 0 0 -25.864 2720.3372 42898.332)"
+          gradientUnits="userSpaceOnUse"
+          x1="409.0583"
+          x2="409.0583"
+          y1="1656.3246"
+          y2="1655.3246"
+        >
+          <stop offset="0" style="stop-color: #fff" />
+          <stop offset="1" style="stop-color: #fff; stop-opacity: 0" />
+        </linearGradient>
+        <polygon
+          id="XMLID_875_"
+          fill="url(#XMLID_22_)"
+          points="21.6,81.2 15,85 15,63
+			21.6,59.2 		"
+          stroke="url(#XMLID_23_)"
+          stroke-width="0.5"
+        />
+
+        <linearGradient
+          id="XMLID_24_"
+          gradientTransform="matrix(-6.6055 0 0 -32.7555 2732.1479 54570.1641)"
+          gradientUnits="userSpaceOnUse"
+          x1="409.0159"
+          x2="408.9963"
+          y1="1663.0452"
+          y2="1663.531"
+        >
+          <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+          <stop offset="0.2823" style="stop-color: #285ecb" />
+          <stop offset="0.538" style="stop-color: #3aa3dd" />
+          <stop offset="0.75" style="stop-color: #47d5eb" />
+          <stop offset="0.9102" style="stop-color: #4ff4f3" />
+          <stop offset="1" style="stop-color: #52fff6" />
+        </linearGradient>
+
+        <linearGradient
+          id="XMLID_25_"
+          gradientTransform="matrix(-6.6055 0 0 -32.7555 2732.1479 54570.1641)"
+          gradientUnits="userSpaceOnUse"
+          x1="409.0583"
+          x2="409.0583"
+          y1="1664.5974"
+          y2="1663.5974"
+        >
+          <stop offset="0" style="stop-color: #fff" />
+          <stop offset="1" style="stop-color: #fff; stop-opacity: 0" />
+        </linearGradient>
+        <polygon
+          id="XMLID_874_"
+          fill="url(#XMLID_24_)"
+          points="33.4,74.4 26.8,78.2
+			26.8,49.3 33.4,45.4 		"
+          stroke="url(#XMLID_25_)"
+          stroke-width="0.5"
+        />
+
+        <linearGradient
+          id="XMLID_26_"
+          gradientTransform="matrix(-6.6055 0 0 -39.6465 2744.3577 66240.9141)"
+          gradientUnits="userSpaceOnUse"
+          x1="408.98"
+          x2="408.9241"
+          y1="1668.4514"
+          y2="1669.1958"
+        >
+          <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+          <stop offset="0.2823" style="stop-color: #285ecb" />
+          <stop offset="0.538" style="stop-color: #3aa3dd" />
+          <stop offset="0.75" style="stop-color: #47d5eb" />
+          <stop offset="0.9102" style="stop-color: #4ff4f3" />
+          <stop offset="1" style="stop-color: #52fff6" />
+        </linearGradient>
+
+        <linearGradient
+          id="XMLID_27_"
+          gradientTransform="matrix(-6.6055 0 0 -39.6465 2744.3577 66240.9141)"
+          gradientUnits="userSpaceOnUse"
+          x1="409.0583"
+          x2="409.0583"
+          y1="1669.994"
+          y2="1668.994"
+        >
+          <stop offset="0" style="stop-color: #fff" />
+          <stop offset="1" style="stop-color: #fff; stop-opacity: 0" />
+        </linearGradient>
+        <polygon
+          id="XMLID_873_"
+          fill="url(#XMLID_26_)"
+          points="45.6,67.3 39,71.1 39,35.3
+			45.6,31.5 		"
+          stroke="url(#XMLID_27_)"
+          stroke-width="0.5"
+        />
+      </g>
+      <g id="人备份" transform="translate(364.000000, 134.000000)">
+        <path
+          id="Path"
+          clip-rule="evenodd"
+          d="M78,41.6c0,0,6.5-5.1,7.6-5.4c7.2-2.4,8-1,9.4,0.7
+			c1.4,1.6-4,4.2-5.4,5.7c-0.7,0.8,4.5-1,3.9,1c-0.5,1.5-4.9,2.2-5.6,2.9s-5.3,3.8-5.3,3.8L78,41.6z"
+          fill="#F7C19C"
+          fill-rule="evenodd"
+        />
+
+        <linearGradient
+          id="SVGID_26_"
+          gradientTransform="matrix(66.553 0 0 -42.1921 17559.9336 70059.375)"
+          gradientUnits="userSpaceOnUse"
+          x1="-263.0341"
+          x2="-263.2938"
+          y1="1659.3563"
+          y2="1659.0363"
+        >
+          <stop offset="0" style="stop-color: #3158d3" />
+          <stop offset="1" style="stop-color: #306ef3" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M53,81.7c5.3-2,34.6-33.6,34.6-33.6
+			c-3.3-7.5-9.4-7.6-9.4-7.6L50.5,61.6c0,0-24.3-19.7-28.7-21.7s12.7,33,12.7,33S47.8,83.7,53,81.7z"
+          fill="url(#SVGID_26_)"
+          fill-rule="evenodd"
+        />
+        <g
+          id="Oval"
+          enable-background="new    "
+          filter="url(#filter-71)"
+          opacity="0.5267"
+        >
+          <linearGradient
+            id="SVGID_27_"
+            gradientTransform="matrix(125.5104 0 0 -59.4816 33000.125 99355.7422)"
+            gradientUnits="userSpaceOnUse"
+            x1="-261.8036"
+            x2="-262.479"
+            y1="1666.1232"
+            y2="1666.0233"
+          >
+            <stop offset="0" style="stop-color: #1b0f9c; stop-opacity: 0" />
+            <stop offset="1" style="stop-color: #060071" />
+          </linearGradient>
+          <ellipse
+            clip-rule="evenodd"
+            cx="77.2"
+            cy="256.5"
+            fill="url(#SVGID_27_)"
+            fill-rule="evenodd"
+            rx="62.8"
+            ry="29.7"
+          />
+        </g>
+
+        <linearGradient
+          id="SVGID_28_"
+          gradientTransform="matrix(37.5807 0 0 -16.9728 9948.6885 27801.6328)"
+          gradientUnits="userSpaceOnUse"
+          x1="-264.5023"
+          x2="-262.5973"
+          y1="1623.2751"
+          y2="1622.7434"
+        >
+          <stop offset="0" style="stop-color: #434343" />
+          <stop offset="1" style="stop-color: #122142" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M6.3,242.5c-1.9,1.4-7.6,6.1-5.2,12.6
+			c2.4,6.5,8.7,4.1,12.8,2.9c4.1-1.2,9.3-4.2,15.3-5.1c6-0.9,12.9-5.5,5.8-8.6C30.3,242.2,6.3,242.5,6.3,242.5z"
+          fill="url(#SVGID_28_)"
+          fill-rule="evenodd"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M51.7,252.1l-2.2,9.5c0,0-5.1,0.3-8.5-1.4
+			c-1.1-0.5-2-1.3-2.5-2.3l2.8-13.2l10.3-65.3l-9.3-33.8L16.9,246.6c0,0-3.1,1.6-6.5,0.4c-0.7-0.3-3.6-2-4.1-2.9l29.2-106.8l20,4.8
+			l8.5,45L51.7,252.1z"
+          fill="#EFAD81"
+          fill-rule="evenodd"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M34.8,39.4l1.4-8.4c0,0-2-21.1,3.8-23.2s18.3-0.3,18.4,10
+			c0.1,10.4-0.1,19.3-4.6,19.1c-4.5-0.2-5.3-1-5.3-1l0.1,8.1L34.8,39.4z"
+          fill="#F7C19C"
+          fill-rule="evenodd"
+        />
+
+        <linearGradient
+          id="SVGID_29_"
+          gradientTransform="matrix(65.856 0 0 -139.1891 17361.0918 233445.5938)"
+          gradientUnits="userSpaceOnUse"
+          x1="-263.1151"
+          x2="-263.0032"
+          y1="1676.3293"
+          y2="1675.5613"
+        >
+          <stop offset="0" style="stop-color: #021814" />
+          <stop offset="1" style="stop-color: #424fec" />
+        </linearGradient>
+        <path
+          d="M17.5,117.5l1.9,57.1L4.8,238c0,0,3.3,5.5,18.1,4.1c0,0,16.4-56.8,18-59.2
+			c1.6-2.4,4.4-21.7,4.4-21.7s2.5,29.8,1.7,32.9c-0.8,3.2-8.4,56.9-8.4,56.9s3.1,7.4,17,5.2c0,0,15-62,15-67.8v-62.1L17.5,117.5z"
+          fill="url(#SVGID_29_)"
+        />
+
+        <linearGradient
+          id="SVGID_30_"
+          gradientTransform="matrix(38.3908 0 0 -17.2271 10193.9805 28243.3203)"
+          gradientUnits="userSpaceOnUse"
+          x1="-264.4597"
+          x2="-262.5546"
+          y1="1624.1052"
+          y2="1623.5803"
+        >
+          <stop offset="0" style="stop-color: #434343" />
+          <stop offset="1" style="stop-color: #122142" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M50.9,258.4c0,0-2.9,1.7-6.7,0.7c-3.8-1-4.4-3-5.6-3.1
+			c-1.2-0.1-5,6.2-5,11.4c0,3.4,4.2,6.7,13.4,5.6c10.7-1.3,9.7,1,19-1c9.3-1.9,6.1-7.6,0.7-8.2c-5.4-0.6-10.7-1.5-12.7-3
+			C52.1,259.4,50.9,258.4,50.9,258.4z"
+          fill="url(#SVGID_30_)"
+          fill-rule="evenodd"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M129.6,67.3c-0.6,0.2-1.7,0.5-2.9,0.8c-0.6-0.4-1.4-2.4-2-2.7
+			c-1.2-0.5-3.1,3.8-3.9,4.9l-4.9,2.6l-0.9,9.2c2.5,0.1,5-1.1,7.5-1.4c1.4-0.3,13.7-6.6,15.5-10.8C139,67.4,133.6,65.7,129.6,67.3z"
+          fill="#F7C19C"
+          fill-rule="evenodd"
+        />
+
+        <linearGradient
+          id="SVGID_31_"
+          gradientTransform="matrix(107.5405 0 0 -93.2162 28291.4941 155960.2031)"
+          gradientUnits="userSpaceOnUse"
+          x1="-261.9086"
+          x2="-262.8504"
+          y1="1672.3391"
+          y2="1672.2106"
+        >
+          <stop offset="0" style="stop-color: #77f7e1" />
+          <stop offset="1" style="stop-color: #424fec" />
+        </linearGradient>
+        <path
+          d="M76.5,100.3c5.7,0.2,44.9-17.6,44.9-17.6c-0.2-8.2-5.8-10.7-5.8-10.7l-33.7,8.6
+			c0,0-14.7-27.5-18-31.1C60.7,46,49.1,40,49.1,40S39,43.3,34.6,35c0,0-3.2-0.8-8.7-0.8S12.3,46,14.1,69.2s2,53,2,53
+			s16.7,7.8,54.5,4.2l-7.9-41.5C62.8,84.9,70.9,100.2,76.5,100.3z"
+          fill="url(#SVGID_31_)"
+        />
+
+        <linearGradient
+          id="SVGID_32_"
+          gradientTransform="matrix(33.4128 0 0 -34.3382 8885.7266 56796.8203)"
+          gradientUnits="userSpaceOnUse"
+          x1="-264.4242"
+          x2="-265.0254"
+          y1="1653.8715"
+          y2="1653.0199"
+        >
+          <stop offset="0" style="stop-color: #253c6f" />
+          <stop offset="1" style="stop-color: #3068e8" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M53,18.9c0,0,10.3,1.5,10-5.4c-0.2-6.9-4.7-3.6-5.9-9.4
+			c-1.4-7-11-2.3-22.3,0c-14.1,2.8,4.7,43.2,4.6,26.7s1.7-4.4,7.1-5.3c0.8-0.6-1.1-2.6,0-3.9C48.3,19.9,53,18.9,53,18.9z"
+          fill="url(#SVGID_32_)"
+          fill-rule="evenodd"
+        />
+      </g>
+      <g id="Stroke-1备份-3" opacity="0.2645">
+        <g filter="url(#filter-79)">
+          <path
+            id="path-78_1_"
+            clip-rule="evenodd"
+            d="M322.9,141.3c-49.2,28.4-49.2,75,0,103.4
+				c49.2,28.4,129.8,28.4,179,0c49.2-28.4,49.2-75,0-103.4C452.7,112.9,372.2,112.9,322.9,141.3z"
+            fill-rule="evenodd"
+          />
+        </g>
+        <g>
+          <linearGradient
+            id="SVGID_33_"
+            gradientTransform="matrix(252.8604 0 0 -146.0971 -25403.7617 264655.8438)"
+            gradientUnits="userSpaceOnUse"
+            x1="102.0966"
+            x2="102.0966"
+            y1="1810.3647"
+            y2="1809.6846"
+          >
+            <stop offset="0" style="stop-color: #fff; stop-opacity: 0" />
+            <stop offset="1" style="stop-color: #fff" />
+          </linearGradient>
+          <path
+            d="M322.9,141.3c-49.2,28.4-49.2,75,0,103.4c49.2,28.4,129.8,28.4,179,0
+				c49.2-28.4,49.2-75,0-103.4C452.7,112.9,372.2,112.9,322.9,141.3z"
+            fill="none"
+            stroke="url(#SVGID_33_)"
+          />
+        </g>
+      </g>
+
+      <linearGradient
+        id="Stroke-1备份-4_1_"
+        gradientTransform="matrix(224 0 0 -130 -22445.5664 235373.9844)"
+        gradientUnits="userSpaceOnUse"
+        x1="102.0446"
+        x2="102.0446"
+        y1="1809.8226"
+        y2="1809.215"
+      >
+        <stop offset="0" style="stop-color: #fff" />
+        <stop offset="1" style="stop-color: #fff; stop-opacity: 0" />
+      </linearGradient>
+      <path
+        id="Stroke-1备份-4"
+        d="
+		M333.1,116c-43.6,25.3-43.6,66.7,0,92c43.6,25.3,115,25.3,158.6,0c43.6-25.3,43.6-66.7,0-92C448.1,90.7,376.8,90.7,333.1,116z"
+        enable-background="new    "
+        fill="none"
+        opacity="0.2645"
+        stroke="url(#Stroke-1备份-4_1_)"
+      />
+
+      <linearGradient
+        id="Stroke-1备份-5_1_"
+        gradientTransform="matrix(224 0 0 -130 -22445.5664 235434.9375)"
+        gradientUnits="userSpaceOnUse"
+        x1="102.0446"
+        x2="102.0446"
+        y1="1809.8226"
+        y2="1809.215"
+      >
+        <stop offset="0" style="stop-color: #fff" />
+        <stop offset="1" style="stop-color: #fff; stop-opacity: 0" />
+      </linearGradient>
+
+      <path
+        id="Stroke-1备份-5"
+        d="
+		M333.1,177c-43.6,25.3-43.6,66.7,0,92c43.6,25.3,115,25.3,158.6,0c43.6-25.3,43.6-66.7,0-92C448.1,151.7,376.8,151.7,333.1,177z"
+        enable-background="new    "
+        fill="none"
+        opacity="7.956659e-02"
+        stroke="url(#Stroke-1备份-5_1_)"
+      />
+      <g id="编组-15" transform="translate(286.000000, 69.000000)">
+        <linearGradient
+          id="SVGID_34_"
+          gradientTransform="matrix(84.647 0 0 -130.0737 15677.0488 226435.8125)"
+          gradientUnits="userSpaceOnUse"
+          x1="-184.6048"
+          x2="-184.7916"
+          y1="1739.7522"
+          y2="1740.8326"
+        >
+          <stop offset="0" style="stop-color: #4587ef" />
+          <stop offset="1" style="stop-color: #00209e" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M84.6,54
+			v71.1c0,3.8-2.9,5.8-6.4,4.6c-14-5-27.2-11.1-39.4-18.1C25.4,103.8,14,95.3,4.7,86.3C2.1,83.6,0,78.4,0,74.6V3.5
+			c0-3.8,2.1-4.6,4.7-1.9c9.3,9,20.6,17.6,34.1,25.3C51,33.9,64.2,39.9,78.2,45C81.8,46.2,84.6,50.2,84.6,54z"
+          enable-background="new    "
+          fill="url(#SVGID_34_)"
+          fill-rule="evenodd"
+          opacity="0.5"
+        />
+
+        <linearGradient
+          id="SVGID_35_"
+          gradientTransform="matrix(42.8864 0 0 -55.1569 8005.1216 95474.0859)"
+          gradientUnits="userSpaceOnUse"
+          x1="-186.8636"
+          x2="-185.8636"
+          y1="1729.7074"
+          y2="1729.7074"
+        >
+          <stop offset="0" style="stop-color: #4c83ff" />
+          <stop offset="1" style="stop-color: #2afadf" />
+        </linearGradient>
+        <path
+          d="M33.5,44.1c11.8,6.8,21.4,23.4,21.4,37
+			c0,13.6-9.7,19.1-21.5,12.3C21.6,86.6,12,70,12,56.4C12.1,42.8,21.7,37.3,33.5,44.1z M33.4,85.5c8,4.6,14.6,0.9,14.6-8.3
+			c0-9.2-6.5-20.5-14.5-25.1c-8-4.6-14.6-0.9-14.6,8.3C18.9,69.6,25.4,80.9,33.4,85.5L33.4,85.5z"
+          enable-background="new    "
+          fill="url(#SVGID_35_)"
+          opacity="0.4"
+        />
+
+        <linearGradient
+          id="SVGID_36_"
+          gradientTransform="matrix(21.3932 0 0 -37.017 4071.8147 63756.6836)"
+          gradientUnits="userSpaceOnUse"
+          x1="-189.5823"
+          x2="-188.5823"
+          y1="1720.6718"
+          y2="1720.6718"
+        >
+          <stop offset="0" style="stop-color: #4c83ff" />
+          <stop offset="1" style="stop-color: #2afadf" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M33.5,44.1c11.8,6.8,21.4,23.4,21.4,37l-6.9-4
+			c0-9.2-6.5-20.5-14.5-25.1L33.5,44.1z"
+          fill="url(#SVGID_36_)"
+          fill-rule="evenodd"
+        />
+      </g>
+
+      <g
+        id="编组-15备份"
+        transform="translate(524.500000, 179.500000) scale(-1, 1) translate(-524.500000, -179.500000) translate(482.000000, 114.000000)"
+      >
+        <linearGradient
+          id="SVGID_37_"
+          gradientTransform="matrix(-84.647 0 0 -130.0737 39258.8555 220582.5)"
+          gradientUnits="userSpaceOnUse"
+          x1="463.1948"
+          x2="463.008"
+          y1="1694.7522"
+          y2="1695.8326"
+        >
+          <stop offset="0" style="stop-color: #4587ef" />
+          <stop offset="1" style="stop-color: #00209e" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M84.6,54
+			v71.1c0,3.8-2.9,5.8-6.4,4.6c-14-5-27.2-11.1-39.4-18.1C25.4,103.8,14,95.3,4.7,86.3C2.1,83.6,0,78.4,0,74.6V3.5
+			c0-3.8,2.1-4.6,4.7-1.9c9.3,9,20.6,17.6,34.1,25.3C51,33.9,64.2,39.9,78.2,45C81.8,46.2,84.6,50.2,84.6,54z"
+          enable-background="new    "
+          fill="url(#SVGID_37_)"
+          fill-rule="evenodd"
+          opacity="0.5"
+        />
+
+        <linearGradient
+          id="SVGID_38_"
+          gradientTransform="matrix(-42.8864 0 0 -55.1569 19852.209 92992.0234)"
+          gradientUnits="userSpaceOnUse"
+          x1="462.6216"
+          x2="463.1363"
+          y1="1684.7074"
+          y2="1684.7074"
+        >
+          <stop offset="0" style="stop-color: #ccff70" />
+          <stop offset="1" style="stop-color: #2afadf" />
+        </linearGradient>
+        <path
+          d="M33.5,44.1c11.8,6.8,21.4,23.4,21.4,37
+			c0,13.6-9.7,19.1-21.5,12.3C21.6,86.6,12,70,12,56.4C12.1,42.8,21.7,37.3,33.5,44.1z M33.4,85.5c8,4.6,14.6,0.9,14.6-8.3
+			c0-9.2-6.5-20.5-14.5-25.1c-8-4.6-14.6-0.9-14.6,8.3C18.9,69.6,25.4,80.9,33.4,85.5L33.4,85.5z"
+          enable-background="new    "
+          fill="url(#SVGID_38_)"
+          opacity="0.4"
+        />
+
+        <linearGradient
+          id="SVGID_39_"
+          gradientTransform="matrix(-21.3932 0 0 -37.017 9879.3115 62090.918)"
+          gradientUnits="userSpaceOnUse"
+          x1="461.0466"
+          x2="462.0466"
+          y1="1675.6718"
+          y2="1675.6718"
+        >
+          <stop offset="0" style="stop-color: #4c83ff" />
+          <stop offset="1" style="stop-color: #2afa91" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M33.5,44.1c11.8,6.8,21.4,23.4,21.4,37l-6.9-4
+			c0-9.2-6.5-20.5-14.5-25.1L33.5,44.1z"
+          fill="url(#SVGID_39_)"
+          fill-rule="evenodd"
+        />
+      </g>
+      <g id="编组" transform="translate(457.000000, 235.000000)">
+        <linearGradient
+          id="SVGID_40_"
+          gradientTransform="matrix(94.2244 0 0 -135.8154 33551.6523 213971.6875)"
+          gradientUnits="userSpaceOnUse"
+          x1="-355.4666"
+          x2="-355.6789"
+          y1="1574.0848"
+          y2="1575.1653"
+        >
+          <stop offset="0" style="stop-color: #4587ef" />
+          <stop offset="1" style="stop-color: #00209e" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M36.3,166.1
+			c-9.3,4.2-19.3,7.7-29.7,10.5c-3.6,1-6.6-1.4-6.6-5.1v-44.7c0-3.8,3-7.5,6.6-8.4C17,115.5,27,112,36.3,107.8
+			c4.8-2.2,9.5-4.6,13.9-7.2c28.4-16.5,43.1-38,44-59.6v54.4c0.8,23-13.8,46-44,63.6C45.8,161.5,41.1,163.9,36.3,166.1z"
+          enable-background="new    "
+          fill="url(#SVGID_40_)"
+          fill-rule="evenodd"
+          opacity="0.5"
+        />
+
+        <linearGradient
+          id="SVGID_41_"
+          gradientTransform="matrix(19.3679 0 0 -68.3208 7052.4458 107110.6953)"
+          gradientUnits="userSpaceOnUse"
+          x1="-359.7519"
+          x2="-359.7874"
+          y1="1566.6797"
+          y2="1567.7601"
+        >
+          <stop offset="0" style="stop-color: #4587ef" />
+          <stop offset="1" style="stop-color: #00209e" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M79.4,59.9
+			c-2.4-2.9-4.6-8.1-4.6-11.8V3.5c0-3.8,2.2-4.6,4.6-1.8c17.4,20.9,19.5,45,6.1,66.6C83.7,65.5,81.7,62.7,79.4,59.9z"
+          enable-background="new    "
+          fill="url(#SVGID_41_)"
+          fill-rule="evenodd"
+          opacity="0.5"
+        />
+
+        <linearGradient
+          id="SVGID_42_"
+          gradientTransform="matrix(5.707 0 0 -15.38 2179.3494 23459.5469)"
+          gradientUnits="userSpaceOnUse"
+          x1="-372.3728"
+          x2="-372.3728"
+          y1="1517.4354"
+          y2="1516.2238"
+        >
+          <stop offset="0" style="stop-color: #4c83ff" />
+          <stop offset="1" style="stop-color: #2afadf" />
+        </linearGradient>
+        <polygon
+          clip-rule="evenodd"
+          fill="url(#SVGID_42_)"
+          fill-rule="evenodd"
+          points="57.1,146.8 57,135.5 51.4,138.7 51.4,150.9
+			"
+        />
+
+        <linearGradient
+          id="Path备份_1_"
+          gradientTransform="matrix(5.707 0 0 -15.38 2199.9822 23445.7344)"
+          gradientUnits="userSpaceOnUse"
+          x1="-372.3728"
+          x2="-372.3728"
+          y1="1517.4354"
+          y2="1516.2238"
+        >
+          <stop offset="0" style="stop-color: #4c83ff" />
+          <stop offset="1" style="stop-color: #2afadf" />
+        </linearGradient>
+        <polygon
+          id="Path备份"
+          clip-rule="evenodd"
+          fill="url(#Path备份_1_)"
+          fill-rule="evenodd"
+          points="77.7,133 77.7,121.7
+			72,124.9 72,137 		"
+        />
+
+        <linearGradient
+          id="SVGID_43_"
+          gradientTransform="matrix(5.791 0 0 -44.69 2175.166 69834.2344)"
+          gradientUnits="userSpaceOnUse"
+          x1="-372.1319"
+          x2="-372.1109"
+          y1="1562.8905"
+          y2="1558.8889"
+        >
+          <stop offset="0" style="stop-color: #4c83ff" />
+          <stop offset="1" style="stop-color: #2afadf" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M23.2,165.4c-1.9,0.7-3.8,1.4-5.7,2.1l-0.1-42.8
+			c1.9-0.6,3.8-1.3,5.7-1.9L23.2,165.4z"
+          fill="url(#SVGID_43_)"
+          fill-rule="evenodd"
+        />
+
+        <linearGradient
+          id="SVGID_44_"
+          gradientTransform="matrix(5.754 0 0 -21.635 2173.4099 33364.9844)"
+          gradientUnits="userSpaceOnUse"
+          x1="-372.2268"
+          x2="-372.2268"
+          y1="1536.7212"
+          y2="1535.3361"
+        >
+          <stop offset="0" style="stop-color: #4c83ff" />
+          <stop offset="1" style="stop-color: #2afadf" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M34.5,160.5c-1,0.5-2,1-3.1,1.4
+			c-0.8,0.4-1.7,0.8-2.6,1.1L28.7,144c0,0,0.1,0,0.1,0c0.9-0.4,1.7-0.8,2.6-1.1c1-0.5,2-0.9,3-1.4L34.5,160.5z"
+          fill="url(#SVGID_44_)"
+          fill-rule="evenodd"
+        />
+
+        <linearGradient
+          id="SVGID_45_"
+          gradientTransform="matrix(5.78 0 0 -42.615 2194.2666 66542.2656)"
+          gradientUnits="userSpaceOnUse"
+          x1="-372.1471"
+          x2="-372.1471"
+          y1="1559.7903"
+          y2="1558.4763"
+        >
+          <stop offset="0" style="stop-color: #4c83ff" />
+          <stop offset="1" style="stop-color: #2afadf" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M46.1,154.2c-0.6,0.4-1.2,0.7-1.9,1.1
+			c-1.2,0.7-2.5,1.4-3.8,2.1l-0.1-39.3l5.7-3.3L46.1,154.2z"
+          fill="url(#SVGID_45_)"
+          fill-rule="evenodd"
+        />
+
+        <linearGradient
+          id="Path备份-2_1_"
+          gradientTransform="matrix(5.78 0 0 -28.2102 2214.8997 43745.1641)"
+          gradientUnits="userSpaceOnUse"
+          x1="-372.1471"
+          x2="-372.1471"
+          y1="1547.6044"
+          y2="1546.2904"
+        >
+          <stop offset="0" style="stop-color: #4c83ff" />
+          <stop offset="1" style="stop-color: #2afadf" />
+        </linearGradient>
+        <path
+          id="Path备份-2"
+          clip-rule="evenodd"
+          d="M66.8,140.4
+			c-0.6,0.4-1.2,0.7-1.9,1.1c-1.2,0.7-2.5,1.4-3.8,2.1L61,118.7l5.7-3.3L66.8,140.4z"
+          fill="url(#Path备份-2_1_)"
+          fill-rule="evenodd"
+        />
+      </g>
+
+      <g
+        id="编组备份"
+        transform="translate(316.500000, 268.500000) scale(-1, 1) translate(-316.500000, -268.500000) translate(269.000000, 180.000000)"
+      >
+        <linearGradient
+          id="SVGID_46_"
+          gradientTransform="matrix(-94.2244 0 0 -135.8154 24584.7852 221441.5469)"
+          gradientUnits="userSpaceOnUse"
+          x1="260.3016"
+          x2="260.0893"
+          y1="1629.0848"
+          y2="1630.1653"
+        >
+          <stop offset="0" style="stop-color: #4587ef" />
+          <stop offset="1" style="stop-color: #00209e" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M36.3,166.1
+			c-9.3,4.2-19.3,7.7-29.7,10.5c-3.6,1-6.6-1.4-6.6-5.1v-44.7c0-3.8,3-7.5,6.6-8.4C17,115.5,27,112,36.3,107.8
+			c4.8-2.2,9.5-4.6,13.9-7.2c28.4-16.5,43.1-38,44-59.6v54.4c0.8,23-13.8,46-44,63.6C45.8,161.5,41.1,163.9,36.3,166.1z"
+          enable-background="new    "
+          fill="url(#SVGID_46_)"
+          fill-rule="evenodd"
+          opacity="0.5"
+        />
+
+        <linearGradient
+          id="SVGID_47_"
+          gradientTransform="matrix(-19.3679 0 0 -68.3208 5047.2349 110868.3359)"
+          gradientUnits="userSpaceOnUse"
+          x1="256.219"
+          x2="256.1836"
+          y1="1621.6797"
+          y2="1622.7601"
+        >
+          <stop offset="0" style="stop-color: #4587ef" />
+          <stop offset="1" style="stop-color: #00209e" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M79.4,59.9
+			c-2.4-2.9-4.6-8.1-4.6-11.8V3.5c0-3.8,2.2-4.6,4.6-1.8c17.4,20.9,19.5,45,6.1,66.6C83.7,65.5,81.7,62.7,79.4,59.9z"
+          enable-background="new    "
+          fill="url(#SVGID_47_)"
+          fill-rule="evenodd"
+          opacity="0.5"
+        />
+
+        <linearGradient
+          id="路径_1_"
+          gradientTransform="matrix(-65.0245 0 0 -44.112 16953.9395 71322.6641)"
+          gradientUnits="userSpaceOnUse"
+          x1="259.3418"
+          x2="258.6121"
+          y1="1614.2808"
+          y2="1614.0671"
+        >
+          <stop offset="0" style="stop-color: #f8ff24" />
+          <stop offset="1" style="stop-color: #fff" />
+        </linearGradient>
+
+        <path
+          id="路径"
+          d="
+			M84.5,110.9c-11.6-15.5-17.4-14.7-17.4,2.4c0,25.7-11.4,29.9-19.6,17.1c-8.2-12.9-23.3-14.6-28,13.6"
+          enable-background="new    "
+          fill="none"
+          opacity="0.6"
+          stroke="url(#路径_1_)"
+          stroke-linecap="round"
+          stroke-width="3.5247"
+        />
+      </g>
+      <g id="编组-11" transform="translate(558.000000, 306.000000)">
+        <g id="product3" transform="translate(11.447727, 0.000000)">
+          <g filter="url(#filter-95)">
+            <linearGradient
+              id="SVGID_48_"
+              gradientTransform="matrix(174.1648 0 0 -101.4708 81515.7969 152491.3594)"
+              gradientUnits="userSpaceOnUse"
+              x1="-467.0351"
+              x2="-467.7105"
+              y1="1501.2344"
+              y2="1501.0835"
+            >
+              <stop offset="0" style="stop-color: #1b0f9c; stop-opacity: 0" />
+              <stop offset="1" style="stop-color: #060071" />
+            </linearGradient>
+            <path
+              clip-rule="evenodd"
+              d="M171.8,157.9c4.3,2.5,4.3,6.5,0,8.9L81.2,220
+					c-4.8,2.5-10.6,2.5-15.4,0L4.1,184.4c-4.3-2.5-4.3-6.5,0-8.9l90.5-53.2c4.8-2.5,10.6-2.5,15.4,0L171.8,157.9z"
+              fill="url(#SVGID_48_)"
+              fill-rule="evenodd"
+            />
+          </g>
+          <g id="编组-2" transform="translate(0.862170, 124.812382)">
+            <linearGradient
+              id="SVGID_49_"
+              gradientTransform="matrix(145.0025 0 0 -83.8574 68008.0859 115279.1875)"
+              gradientUnits="userSpaceOnUse"
+              x1="-469.0133"
+              x2="-468.0133"
+              y1="1374.2056"
+              y2="1374.2056"
+            >
+              <stop offset="0" style="stop-color: #6ecaf9" />
+              <stop offset="0.35" style="stop-color: #a1ddfb" />
+              <stop offset="1" style="stop-color: #fff" />
+            </linearGradient>
+            <path
+              clip-rule="evenodd"
+              d="M141.8,37.5c4.3,2.5,4.3,6.5,0,8.9L80.4,82
+					c-4.8,2.5-10.6,2.5-15.4,0L3.2,46.4c-4.3-2.5-4.3-6.5,0-8.9L64.6,1.8c4.8-2.5,10.6-2.5,15.4,0L141.8,37.5z"
+              fill="url(#SVGID_49_)"
+              fill-rule="evenodd"
+            />
+
+            <linearGradient
+              id="SVGID_50_"
+              gradientTransform="matrix(132.2205 0 0 -73.006 62028.5859 100235.5703)"
+              gradientUnits="userSpaceOnUse"
+              x1="-469.0813"
+              x2="-468.0813"
+              y1="1372.403"
+              y2="1372.403"
+            >
+              <stop offset="0.12" style="stop-color: #5c90fe" />
+              <stop offset="0.56" style="stop-color: #466cf5" />
+              <stop offset="0.69" style="stop-color: #4265f3" />
+              <stop offset="0.87" style="stop-color: #3853ef" />
+              <stop offset="1" style="stop-color: #2e42eb" />
+            </linearGradient>
+            <path
+              clip-rule="evenodd"
+              d="M72.8,78.5c-1.7,0.1-3.4-0.3-5-1.1L6.4,42L67.3,6.5
+					c1.5-0.8,3.2-1.1,5-1.1c1.7-0.1,3.4,0.3,5,1.1L138.6,42L77.7,77.3C76.2,78.1,74.5,78.5,72.8,78.5z"
+              fill="url(#SVGID_50_)"
+              fill-rule="evenodd"
+            />
+
+            <linearGradient
+              id="SVGID_51_"
+              gradientTransform="matrix(144.9687 0 0 -54.9245 67992.2734 75196.0781)"
+              gradientUnits="userSpaceOnUse"
+              x1="-469.0135"
+              x2="-468.0135"
+              y1="1367.8169"
+              y2="1367.8169"
+            >
+              <stop offset="0.12" style="stop-color: #5c90fe" />
+              <stop offset="0.56" style="stop-color: #466cf5" />
+              <stop offset="0.69" style="stop-color: #4265f3" />
+              <stop offset="0.87" style="stop-color: #3853ef" />
+              <stop offset="1" style="stop-color: #2e42eb" />
+            </linearGradient>
+            <path
+              clip-rule="evenodd"
+              d="M145,42c0,0.1,0,0.2,0,0.3s0,0.2,0,0.3s0,0.2-0.1,0.3
+					c-0.1,0.1-0.1,0.2-0.1,0.3s-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.2,0.3l-0.2,0.2c-0.1,0.1-0.2,0.3-0.3,0.4l-0.2,0.2
+					c-0.1,0.2-0.3,0.3-0.5,0.5l-0.2,0.2l-0.3,0.3l-0.3,0.2l-0.4,0.3l-0.4,0.3L80.5,82c-0.4,0.2-0.7,0.4-1.1,0.5l-0.3,0.1
+					c-0.3,0.1-0.6,0.2-0.9,0.3l-0.3,0.1l-0.6,0.2l-0.4,0.1l-0.6,0.1l-0.4,0.1c-0.4,0.1-0.8,0.1-1.2,0.2h-0.4h-0.7H72h-0.6h-0.5
+					l-0.6,0l-0.5-0.1l-0.6-0.1l-0.5-0.1l-0.7-0.2l-0.4-0.1c-0.4-0.1-0.8-0.2-1.2-0.4l-0.2-0.1c-0.5-0.2-1-0.4-1.5-0.7L3.2,46.5
+					C1.1,45.2,0,43.6,0,42v13.3c0,1.6,1.1,3.2,3.2,4.5L65,95.4c0.5,0.3,1,0.5,1.5,0.7h0.1h0.1c0.4,0.2,0.8,0.3,1.2,0.4h0.1l0.3,0.1
+					l0.7,0.2h0.2h0.3l0.6,0.1h0.2h0.3l0.5,0.1h0.3h0.3H72h1.6h0.7h0.3h0.1c0.4,0,0.8-0.1,1.2-0.2H76l0.4-0.1l0.5,0.1l0.4-0.1
+					l0.6-0.2H78l0.2-0.1c0.3-0.1,0.6-0.2,0.9-0.3l0.3-0.1c0.4-0.2,0.7-0.3,1.1-0.5l61.4-35.6l0.1-0.1l0.3-0.2l0.4-0.3l0.3-0.2
+					l0.3-0.3l0.1-0.1l0.1-0.1c0.2-0.2,0.3-0.3,0.5-0.5L144,58l0.1-0.1c0.1-0.1,0.2-0.2,0.3-0.4l0.1-0.2v-0.1
+					c0.1-0.1,0.1-0.2,0.2-0.3s0.1-0.1,0.1-0.2v-0.1c0-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2,0.1-0.2c0.1-0.1,0,0,0-0.1s0-0.2,0-0.3
+					s0-0.2,0-0.2c0-0.1,0-0.1,0-0.1l0,0L145,42z"
+              fill="url(#SVGID_51_)"
+              fill-rule="evenodd"
+            />
+          </g>
+          <g id="编组-2备份" transform="translate(8.400000, 103.200000)">
+            <g
+              id="Path备份-3"
+              enable-background="new    "
+              filter="url(#filter-100)"
+              opacity="0.6817"
+            >
+              <linearGradient
+                id="SVGID_52_"
+                gradientTransform="matrix(130.5022 0 0 -75.4716 62201.1797 105298.6953)"
+                gradientUnits="userSpaceOnUse"
+                x1="-475.6305"
+                x2="-476.3059"
+                y1="1394.5802"
+                y2="1394.4315"
+              >
+                <stop offset="0" style="stop-color: #1b0f9c; stop-opacity: 0" />
+                <stop offset="1" style="stop-color: #060071" />
+              </linearGradient>
+              <path
+                clip-rule="evenodd"
+                d="M127.6,51.7c3.9,2.2,3.9,5.8,0,8L72.3,91.8
+						c-4.4,2.2-9.5,2.2-13.9,0L2.9,59.7c-3.8-2.2-3.9-5.8,0-8l55.2-32.1c4.4-2.2,9.5-2.2,13.9,0L127.6,51.7z"
+                fill="url(#SVGID_52_)"
+                fill-rule="evenodd"
+              />
+            </g>
+
+            <linearGradient
+              id="SVGID_53_"
+              gradientTransform="matrix(130.5022 0 0 -75.4716 62201.1797 105280.6953)"
+              gradientUnits="userSpaceOnUse"
+              x1="-476.6293"
+              x2="-475.6293"
+              y1="1394.4705"
+              y2="1394.4705"
+            >
+              <stop offset="0" style="stop-color: #6ecaf9" />
+              <stop offset="0.35" style="stop-color: #a1ddfb" />
+              <stop offset="1" style="stop-color: #fff" />
+            </linearGradient>
+            <path
+              clip-rule="evenodd"
+              d="M127.6,33.7c3.9,2.2,3.9,5.8,0,8L72.3,73.8
+					c-4.4,2.2-9.5,2.2-13.9,0L2.9,41.7c-3.8-2.2-3.9-5.8,0-8L58.1,1.7c4.4-2.2,9.5-2.2,13.9,0L127.6,33.7z"
+              fill="url(#SVGID_53_)"
+              fill-rule="evenodd"
+            />
+
+            <linearGradient
+              id="SVGID_54_"
+              gradientTransform="matrix(118.9985 0 0 -65.7054 56732.918 91530.375)"
+              gradientUnits="userSpaceOnUse"
+              x1="-476.7049"
+              x2="-475.7049"
+              y1="1392.4675"
+              y2="1392.4675"
+            >
+              <stop offset="0.12" style="stop-color: #5c90fe" />
+              <stop offset="0.56" style="stop-color: #466cf5" />
+              <stop offset="0.69" style="stop-color: #4265f3" />
+              <stop offset="0.87" style="stop-color: #3853ef" />
+              <stop offset="1" style="stop-color: #2e42eb" />
+            </linearGradient>
+            <path
+              clip-rule="evenodd"
+              d="M65.5,70.6c-1.6,0.1-3.1-0.3-4.5-1L5.8,37.8L60.6,5.9
+					c1.4-0.7,2.9-1,4.5-1c1.6,0,3.1,0.3,4.5,1l55.2,31.9L69.9,69.6C68.6,70.3,67,70.6,65.5,70.6z"
+              fill="url(#SVGID_54_)"
+              fill-rule="evenodd"
+            />
+
+            <linearGradient
+              id="SVGID_55_"
+              gradientTransform="matrix(130.4718 0 0 -49.432 62186.7266 68643.1094)"
+              gradientUnits="userSpaceOnUse"
+              x1="-476.6295"
+              x2="-475.6295"
+              y1="1387.3719"
+              y2="1387.3719"
+            >
+              <stop offset="0.12" style="stop-color: #5c90fe" />
+              <stop offset="0.56" style="stop-color: #466cf5" />
+              <stop offset="0.69" style="stop-color: #4265f3" />
+              <stop offset="0.87" style="stop-color: #3853ef" />
+              <stop offset="1" style="stop-color: #2e42eb" />
+            </linearGradient>
+            <path
+              clip-rule="evenodd"
+              d="M130.5,37.8c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3
+					s0,0.2-0.1,0.3c-0.1,0.1,0,0.2-0.1,0.3s-0.1,0.2-0.1,0.2c0,0.1-0.1,0.2-0.1,0.3l-0.1,0.2c-0.1,0.1-0.1,0.2-0.2,0.3l-0.2,0.2
+					c-0.1,0.2-0.3,0.3-0.4,0.4l-0.2,0.2l-0.3,0.3l-0.3,0.2l-0.3,0.2l-0.4,0.2L72.4,73.8c-0.3,0.2-0.6,0.3-1,0.5l-0.3,0.1
+					c-0.3,0.1-0.5,0.2-0.8,0.3l-0.3,0.1l-0.5,0.1L69.2,75l-0.5,0.1l-0.4,0.1c-0.4,0.1-0.7,0.1-1.1,0.2h-0.3h-0.7h-1.4h-0.5h-0.5
+					l-0.5,0l-0.4-0.1l-0.5-0.1L62,75.2L61.4,75L61,74.9c-0.4-0.1-0.7-0.2-1-0.4l-0.1-0.1c-0.5-0.2-0.9-0.4-1.3-0.6L2.9,41.8
+					C1,40.7,0,39.3,0,37.8v12c0,1.5,1,2.9,2.9,4l55.6,32.1c0.4,0.2,0.9,0.5,1.3,0.6h0.1H60c0.3,0.1,0.7,0.3,1,0.3h0.1l0.3,0.1
+					l0.6,0.1h0.2h0.2l0.5,0.1h0.2h0.2l0.5,0.1h0.2h0.3h0.5h1.4h0.7h0.3h0.1c0.4,0,0.7-0.1,1.1-0.2h0.1l0.3-0.1l0.4,0.1l0.4-0.1
+					l0.5-0.1h0.1l0.2-0.1c0.3-0.1,0.5-0.2,0.8-0.3l0.3-0.1c0.3-0.1,0.7-0.3,1-0.5l55.2-32.1l0.1-0.1l0.3-0.2l0.3-0.2l0.3-0.2
+					l0.3-0.3l0.1,0l0.1-0.1c0.1-0.1,0.3-0.3,0.4-0.4l0.1-0.1l0.1-0.1c0.1-0.1,0.2-0.2,0.2-0.3l0.1-0.1v-0.1c0.1-0.1,0.1-0.2,0.1-0.3
+					c0-0.1,0.1-0.1,0.1-0.2V51c0-0.1,0.1-0.2,0.1-0.3s0-0.1,0.1-0.2c0.1-0.1,0,0,0,0s0-0.2,0-0.3c0-0.1,0-0.1,0-0.2s0-0.1,0-0.1l0,0
+					L130.5,37.8z"
+              fill="url(#SVGID_55_)"
+              fill-rule="evenodd"
+            />
+          </g>
+          <path
+            clip-rule="evenodd"
+            d="M63.9,130.7l0.1,0.4
+				L63.9,130.7z"
+            fill="#666666"
+            fill-rule="evenodd"
+            stroke="#000000"
+            stroke-width="0.6"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M63.8,130l0.1,0.4
+				L63.8,130z"
+            fill="#666666"
+            fill-rule="evenodd"
+            stroke="#000000"
+            stroke-width="0.6"
+          />
+
+          <linearGradient
+            id="SVGID_56_"
+            gradientTransform="matrix(132.2205 0 0 -178.9849 61915.457 269544.7812)"
+            gradientUnits="userSpaceOnUse"
+            x1="-467.7177"
+            x2="-467.7209"
+            y1="1504.9636"
+            y2="1506.2531"
+          >
+            <stop offset="0" style="stop-color: #00dcf3" />
+            <stop
+              offset="1.000000e-02"
+              style="stop-color: #00dbf3; stop-opacity: 0.97"
+            />
+            <stop
+              offset="8.000000e-02"
+              style="stop-color: #00d0ef; stop-opacity: 0.77"
+            />
+            <stop
+              offset="0.16"
+              style="stop-color: #00c7ec; stop-opacity: 0.59"
+            />
+            <stop
+              offset="0.24"
+              style="stop-color: #00beea; stop-opacity: 0.43"
+            />
+            <stop
+              offset="0.32"
+              style="stop-color: #00b7e8; stop-opacity: 0.3"
+            />
+            <stop
+              offset="0.42"
+              style="stop-color: #00b2e6; stop-opacity: 0.19"
+            />
+            <stop
+              offset="0.52"
+              style="stop-color: #00ade5; stop-opacity: 0.1"
+            />
+            <stop
+              offset="0.63"
+              style="stop-color: #00aae4; stop-opacity: 4e-2"
+            />
+            <stop
+              offset="0.77"
+              style="stop-color: #00a9e3; stop-opacity: 1e-2"
+            />
+            <stop offset="1" style="stop-color: #00a8e3; stop-opacity: 0" />
+          </linearGradient>
+          <path
+            clip-rule="evenodd"
+            d="M7.3,0.1v142.4l61.4,35.4c1.5,0.8,3.3,1.1,5,1.1
+				c1.7,0.1,3.4-0.3,5-1.1l60.9-35.4V0L7.3,0.1z"
+            fill="url(#SVGID_56_)"
+            fill-rule="evenodd"
+          />
+        </g>
+        <g id="编组备份-8" transform="translate(47.447727, 63.600000)">
+          <g
+            enable-background="new    "
+            filter="url(#filter-106)"
+            opacity="0.3003"
+          >
+            <linearGradient
+              id="SVGID_57_"
+              gradientTransform="matrix(99.0186 0 0 -57.6674 49956.1875 82510.0469)"
+              gradientUnits="userSpaceOnUse"
+              x1="-503.4795"
+              x2="-504.155"
+              y1="1430.0212"
+              y2="1429.8705"
+            >
+              <stop offset="0" style="stop-color: #1b0f9c; stop-opacity: 0" />
+              <stop offset="1" style="stop-color: #060071" />
+            </linearGradient>
+            <polygon
+              clip-rule="evenodd"
+              fill="url(#SVGID_57_)"
+              fill-rule="evenodd"
+              points="3.5,59.5 38.6,79.7 102.5,42.3 67.4,22.1
+					"
+            />
+          </g>
+          <g>
+            <g>
+              <linearGradient
+                id="path-108_1_"
+                gradientTransform="matrix(70.176 0 0 -40.5146 35432.1289 57650.0859)"
+                gradientUnits="userSpaceOnUse"
+                x1="-504.9012"
+                x2="-503.9012"
+                y1="1422.4436"
+                y2="1422.4436"
+              >
+                <stop offset="0" style="stop-color: #fff" />
+                <stop offset="1" style="stop-color: #00a2ff" />
+              </linearGradient>
+              <polygon
+                id="path-108"
+                clip-rule="evenodd"
+                fill="url(#path-108_1_)"
+                fill-rule="evenodd"
+                points="0.2,20.4 35.3,40.6
+						70.4,20.4 35.3,0.1 					"
+              />
+            </g>
+            <g filter="url(#filter-109)">
+              <polygon
+                clip-rule="evenodd"
+                fill-rule="evenodd"
+                points="0.2,20.4 35.3,40.6 70.4,20.4 35.3,0.1 					"
+              />
+            </g>
+          </g>
+
+          <linearGradient
+            id="SVGID_58_"
+            gradientTransform="matrix(35.088 0 0 -60.7744 17767.0781 87007.4453)"
+            gradientUnits="userSpaceOnUse"
+            x1="-505.8155"
+            x2="-505.9297"
+            y1="1431.3086"
+            y2="1429.8619"
+          >
+            <stop offset="0" style="stop-color: #7bedff" />
+            <stop offset="1" style="stop-color: #060071" />
+          </linearGradient>
+          <polygon
+            clip-rule="evenodd"
+            fill="url(#SVGID_58_)"
+            fill-rule="evenodd"
+            points="35.2,81.1 35.2,40.6 0.1,20.4 0.1,60.9 			"
+          />
+          <g id="编组-10" transform="translate(4.431004, 28.063025)">
+            <g id="编组-8">
+              <g id="Shape备份-3" transform="translate(0.000000, -0.000000)">
+                <g id="蒙版">
+                  <linearGradient
+                    id="SVGID_59_"
+                    gradientTransform="matrix(6.3405 0 0 -10.9369 3322.1904 14513.207)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="-523.204"
+                    x2="-524.0609"
+                    y1="1326.9464"
+                    y2="1325.4684"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #fb6583" />
+                    <stop offset="0.1302" style="stop-color: #fc7688" />
+                    <stop offset="0.5277" style="stop-color: #fda797" />
+                    <stop offset="0.8302" style="stop-color: #ffc6a0" />
+                    <stop offset="1" style="stop-color: #ffd1a3" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_59_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_2_"
+                    filterUnits="userSpaceOnUse"
+                    height="10.9"
+                    width="6.3"
+                    x="0"
+                    y="3.6"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask
+                  id="mask-113_1_"
+                  height="10.9"
+                  maskUnits="userSpaceOnUse"
+                  width="6.3"
+                  x="0"
+                  y="3.6"
+                >
+                  <g filter="url(#Adobe_OpacityMaskFilter_2_)">
+                    <polygon
+                      id="path-112_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_60_"
+                  gradientTransform="matrix(-6.3405 0 0 -10.9369 -3111.8501 14516.8223)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-491.1827"
+                  x2="-491.4043"
+                  y1="1326.7101"
+                  y2="1326.2715"
+                >
+                  <stop offset="0" style="stop-color: #fb6583" />
+                  <stop offset="1" style="stop-color: #ffd1a3" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_60_)"
+                  mask="url(#mask-113_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g id="Shape备份-4" transform="translate(9.630049, 5.468450)">
+                <g>
+                  <linearGradient
+                    id="SVGID_61_"
+                    gradientTransform="matrix(6.3405 0 0 -10.9369 3383.2495 14453.3994)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="-532.7115"
+                    x2="-533.1328"
+                    y1="1319.3007"
+                    y2="1321.1917"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_61_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_3_"
+                    filterUnits="userSpaceOnUse"
+                    height="10.9"
+                    width="6.3"
+                    x="0"
+                    y="3.6"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask
+                  id="mask-117_1_"
+                  height="10.9"
+                  maskUnits="userSpaceOnUse"
+                  width="6.3"
+                  x="0"
+                  y="3.6"
+                >
+                  <g filter="url(#Adobe_OpacityMaskFilter_3_)">
+                    <polygon
+                      id="path-116_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_62_"
+                  gradientTransform="matrix(-6.3405 0 0 -10.9369 -3172.9092 14457.0146)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-500.7126"
+                  x2="-501.1153"
+                  y1="1321.2085"
+                  y2="1320.8575"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_62_)"
+                  mask="url(#mask-117_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g id="Shape备份-5" transform="translate(19.201017, 11.077510)">
+                <g>
+                  <linearGradient
+                    id="SVGID_63_"
+                    gradientTransform="matrix(6.3405 0 0 -10.9369 3443.9341 14392.0537)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="-542.2824"
+                    x2="-542.7037"
+                    y1="1313.6917"
+                    y2="1315.5826"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_63_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_4_"
+                    filterUnits="userSpaceOnUse"
+                    height="10.9"
+                    width="6.3"
+                    x="0"
+                    y="3.6"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask
+                  id="mask-120_1_"
+                  height="10.9"
+                  maskUnits="userSpaceOnUse"
+                  width="6.3"
+                  x="0"
+                  y="3.6"
+                >
+                  <g filter="url(#Adobe_OpacityMaskFilter_4_)">
+                    <polygon
+                      id="path-119_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_64_"
+                  gradientTransform="matrix(-6.3405 0 0 -10.9369 -3233.5935 14395.6689)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-510.2835"
+                  x2="-510.6862"
+                  y1="1315.5994"
+                  y2="1315.2484"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_64_)"
+                  mask="url(#mask-120_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+            </g>
+            <g id="编组-8备份" transform="translate(0.000000, 11.077510)">
+              <g transform="translate(0.000000, -0.000000)">
+                <g>
+                  <linearGradient
+                    id="SVGID_65_"
+                    gradientTransform="matrix(6.3405 0 0 -10.9369 3322.1904 14392.0537)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="-523.204"
+                    x2="-524.0609"
+                    y1="1315.8689"
+                    y2="1314.3909"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #fb6583" />
+                    <stop offset="0.1302" style="stop-color: #fc7688" />
+                    <stop offset="0.5277" style="stop-color: #fda797" />
+                    <stop offset="0.8302" style="stop-color: #ffc6a0" />
+                    <stop offset="1" style="stop-color: #ffd1a3" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_65_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_5_"
+                    filterUnits="userSpaceOnUse"
+                    height="10.9"
+                    width="6.3"
+                    x="0"
+                    y="3.6"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask
+                  id="mask-122_1_"
+                  height="10.9"
+                  maskUnits="userSpaceOnUse"
+                  width="6.3"
+                  x="0"
+                  y="3.6"
+                >
+                  <g filter="url(#Adobe_OpacityMaskFilter_5_)">
+                    <polygon
+                      id="path-121_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_66_"
+                  gradientTransform="matrix(-6.3405 0 0 -10.9369 -3111.8501 14395.6689)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-491.1827"
+                  x2="-491.4043"
+                  y1="1315.6326"
+                  y2="1315.194"
+                >
+                  <stop offset="0" style="stop-color: #fb6583" />
+                  <stop offset="1" style="stop-color: #ffd1a3" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_66_)"
+                  mask="url(#mask-122_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g transform="translate(9.630049, 5.468450)">
+                <g>
+                  <linearGradient
+                    id="SVGID_67_"
+                    gradientTransform="matrix(6.3405 0 0 -10.9369 3383.2495 14332.2451)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="-532.7115"
+                    x2="-533.1328"
+                    y1="1308.2231"
+                    y2="1310.1143"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_67_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_6_"
+                    filterUnits="userSpaceOnUse"
+                    height="10.9"
+                    width="6.3"
+                    x="0"
+                    y="3.6"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask
+                  id="mask-124_1_"
+                  height="10.9"
+                  maskUnits="userSpaceOnUse"
+                  width="6.3"
+                  x="0"
+                  y="3.6"
+                >
+                  <g filter="url(#Adobe_OpacityMaskFilter_6_)">
+                    <polygon
+                      id="path-123_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_68_"
+                  gradientTransform="matrix(-6.3405 0 0 -10.9369 -3172.9092 14335.8613)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-500.7126"
+                  x2="-501.1153"
+                  y1="1310.131"
+                  y2="1309.78"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_68_)"
+                  mask="url(#mask-124_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g transform="translate(19.201017, 11.077510)">
+                <g>
+                  <linearGradient
+                    id="SVGID_69_"
+                    gradientTransform="matrix(6.3405 0 0 -10.9369 3443.9341 14270.8994)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="-542.2824"
+                    x2="-542.7037"
+                    y1="1302.6141"
+                    y2="1304.5051"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_69_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_7_"
+                    filterUnits="userSpaceOnUse"
+                    height="10.9"
+                    width="6.3"
+                    x="0"
+                    y="3.6"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask
+                  id="mask-126_1_"
+                  height="10.9"
+                  maskUnits="userSpaceOnUse"
+                  width="6.3"
+                  x="0"
+                  y="3.6"
+                >
+                  <g filter="url(#Adobe_OpacityMaskFilter_7_)">
+                    <polygon
+                      id="path-125_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_70_"
+                  gradientTransform="matrix(-6.3405 0 0 -10.9369 -3233.5935 14274.5156)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-510.2835"
+                  x2="-510.6862"
+                  y1="1304.5219"
+                  y2="1304.1709"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_70_)"
+                  mask="url(#mask-126_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+            </g>
+            <g id="编组-8备份-2" transform="translate(0.000000, 22.155020)">
+              <g transform="translate(0.000000, -0.000000)">
+                <g>
+                  <linearGradient
+                    id="SVGID_71_"
+                    gradientTransform="matrix(6.3405 0 0 -10.9369 3322.1904 14270.8994)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="-523.204"
+                    x2="-524.0609"
+                    y1="1304.7914"
+                    y2="1303.3134"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #fb6583" />
+                    <stop offset="0.1302" style="stop-color: #fc7688" />
+                    <stop offset="0.5277" style="stop-color: #fda797" />
+                    <stop offset="0.8302" style="stop-color: #ffc6a0" />
+                    <stop offset="1" style="stop-color: #ffd1a3" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_71_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_8_"
+                    filterUnits="userSpaceOnUse"
+                    height="10.9"
+                    width="6.3"
+                    x="0"
+                    y="3.6"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask
+                  id="mask-128_1_"
+                  height="10.9"
+                  maskUnits="userSpaceOnUse"
+                  width="6.3"
+                  x="0"
+                  y="3.6"
+                >
+                  <g filter="url(#Adobe_OpacityMaskFilter_8_)">
+                    <polygon
+                      id="path-127_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_72_"
+                  gradientTransform="matrix(-6.3405 0 0 -10.9369 -3111.8501 14274.5156)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-491.1827"
+                  x2="-491.4043"
+                  y1="1304.5552"
+                  y2="1304.1165"
+                >
+                  <stop offset="0" style="stop-color: #fb6583" />
+                  <stop offset="1" style="stop-color: #ffd1a3" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_72_)"
+                  mask="url(#mask-128_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g transform="translate(9.630049, 5.468450)">
+                <g>
+                  <linearGradient
+                    id="SVGID_73_"
+                    gradientTransform="matrix(6.3405 0 0 -10.9369 3383.2495 14211.0918)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="-532.7115"
+                    x2="-533.1328"
+                    y1="1297.1456"
+                    y2="1299.0367"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_73_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_9_"
+                    filterUnits="userSpaceOnUse"
+                    height="10.9"
+                    width="6.3"
+                    x="0"
+                    y="3.6"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask
+                  id="mask-130_1_"
+                  height="10.9"
+                  maskUnits="userSpaceOnUse"
+                  width="6.3"
+                  x="0"
+                  y="3.6"
+                >
+                  <g filter="url(#Adobe_OpacityMaskFilter_9_)">
+                    <polygon
+                      id="path-129_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_74_"
+                  gradientTransform="matrix(-6.3405 0 0 -10.9369 -3172.9092 14214.708)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-500.7126"
+                  x2="-501.1153"
+                  y1="1299.0535"
+                  y2="1298.7025"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_74_)"
+                  mask="url(#mask-130_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g transform="translate(19.201017, 11.077510)">
+                <g>
+                  <linearGradient
+                    id="SVGID_75_"
+                    gradientTransform="matrix(6.3405 0 0 -10.9369 3443.9341 14149.7461)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="-542.2824"
+                    x2="-542.7037"
+                    y1="1291.5366"
+                    y2="1293.4276"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_75_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_10_"
+                    filterUnits="userSpaceOnUse"
+                    height="10.9"
+                    width="6.3"
+                    x="0"
+                    y="3.6"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask
+                  id="mask-132_1_"
+                  height="10.9"
+                  maskUnits="userSpaceOnUse"
+                  width="6.3"
+                  x="0"
+                  y="3.6"
+                >
+                  <g filter="url(#Adobe_OpacityMaskFilter_10_)">
+                    <polygon
+                      id="path-131_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_76_"
+                  gradientTransform="matrix(-6.3405 0 0 -10.9369 -3233.5935 14153.3623)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="-510.2835"
+                  x2="-510.6862"
+                  y1="1293.4443"
+                  y2="1293.0934"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_76_)"
+                  mask="url(#mask-132_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+            </g>
+          </g>
+
+          <linearGradient
+            id="SVGID_77_"
+            gradientTransform="matrix(35.088 0 0 -60.7744 17802.2441 87007.4453)"
+            gradientUnits="userSpaceOnUse"
+            x1="-505.8547"
+            x2="-505.8547"
+            y1="1431.6647"
+            y2="1430.4622"
+          >
+            <stop offset="0" style="stop-color: #7bedff" />
+            <stop offset="1" style="stop-color: #060071" />
+          </linearGradient>
+          <polygon
+            clip-rule="evenodd"
+            fill="url(#SVGID_77_)"
+            fill-rule="evenodd"
+            points="35.3,81.1 35.3,40.6 70.4,20.4 70.4,60.9
+				"
+          />
+
+          <g
+            id="编组-10备份-4"
+            transform="translate(53.703560, 51.063025) scale(-1, 1) translate(-53.703560, -51.063025) translate(40.203560, 28.063025)"
+          >
+            <g>
+              <g transform="translate(0.000000, -0.000000)">
+                <g>
+                  <linearGradient
+                    id="SVGID_78_"
+                    gradientTransform="matrix(-6.3405 0 0 -10.9369 3516.198 14513.207)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="553.8022"
+                    x2="552.9454"
+                    y1="1326.9464"
+                    y2="1325.4684"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #fb6583" />
+                    <stop offset="0.1302" style="stop-color: #fc7688" />
+                    <stop offset="0.5277" style="stop-color: #fda797" />
+                    <stop offset="0.8302" style="stop-color: #ffc6a0" />
+                    <stop offset="1" style="stop-color: #ffd1a3" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_78_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_11_"
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask id="mask-135_1_" maskUnits="userSpaceOnUse">
+                  <g filter="url(#Adobe_OpacityMaskFilter_11_)">
+                    <polygon
+                      id="path-134_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_79_"
+                  gradientTransform="matrix(6.3405 0 0 -10.9369 -3713.8577 14516.8223)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="586.1296"
+                  x2="585.908"
+                  y1="1326.7101"
+                  y2="1326.2715"
+                >
+                  <stop offset="0" style="stop-color: #fb6583" />
+                  <stop offset="1" style="stop-color: #ffd1a3" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_79_)"
+                  mask="url(#mask-135_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g transform="translate(9.630049, 5.468450)">
+                <g>
+                  <linearGradient
+                    id="SVGID_80_"
+                    gradientTransform="matrix(-6.3405 0 0 -10.9369 3455.1392 14453.3994)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="544.0497"
+                    x2="543.6284"
+                    y1="1319.3007"
+                    y2="1321.1917"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_80_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_12_"
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask id="mask-137_1_" maskUnits="userSpaceOnUse">
+                  <g filter="url(#Adobe_OpacityMaskFilter_12_)">
+                    <polygon
+                      id="path-136_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_81_"
+                  gradientTransform="matrix(6.3405 0 0 -10.9369 -3652.7986 14457.0146)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="576.3993"
+                  x2="575.9966"
+                  y1="1321.2085"
+                  y2="1320.8575"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_81_)"
+                  mask="url(#mask-137_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g transform="translate(19.201017, 11.077510)">
+                <g>
+                  <linearGradient
+                    id="SVGID_82_"
+                    gradientTransform="matrix(-6.3405 0 0 -10.9369 3394.4546 14392.0537)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="534.4787"
+                    x2="534.0574"
+                    y1="1313.6917"
+                    y2="1315.5826"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_82_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_13_"
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask id="mask-139_1_" maskUnits="userSpaceOnUse">
+                  <g filter="url(#Adobe_OpacityMaskFilter_13_)">
+                    <polygon
+                      id="path-138_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_83_"
+                  gradientTransform="matrix(6.3405 0 0 -10.9369 -3592.114 14395.6689)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="566.8283"
+                  x2="566.4257"
+                  y1="1315.5994"
+                  y2="1315.2484"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_83_)"
+                  mask="url(#mask-139_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+            </g>
+            <g transform="translate(0.000000, 11.077510)">
+              <g transform="translate(0.000000, -0.000000)">
+                <g>
+                  <linearGradient
+                    id="SVGID_84_"
+                    gradientTransform="matrix(-6.3405 0 0 -10.9369 3516.198 14392.0537)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="553.8022"
+                    x2="552.9454"
+                    y1="1315.8689"
+                    y2="1314.3909"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #fb6583" />
+                    <stop offset="0.1302" style="stop-color: #fc7688" />
+                    <stop offset="0.5277" style="stop-color: #fda797" />
+                    <stop offset="0.8302" style="stop-color: #ffc6a0" />
+                    <stop offset="1" style="stop-color: #ffd1a3" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_84_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_14_"
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask id="mask-141_1_" maskUnits="userSpaceOnUse">
+                  <g filter="url(#Adobe_OpacityMaskFilter_14_)">
+                    <polygon
+                      id="path-140_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_85_"
+                  gradientTransform="matrix(6.3405 0 0 -10.9369 -3713.8577 14395.6689)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="586.1296"
+                  x2="585.908"
+                  y1="1315.6326"
+                  y2="1315.194"
+                >
+                  <stop offset="0" style="stop-color: #fb6583" />
+                  <stop offset="1" style="stop-color: #ffd1a3" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_85_)"
+                  mask="url(#mask-141_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g transform="translate(9.630049, 5.468450)">
+                <g>
+                  <linearGradient
+                    id="SVGID_86_"
+                    gradientTransform="matrix(-6.3405 0 0 -10.9369 3455.1392 14332.2451)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="544.0497"
+                    x2="543.6284"
+                    y1="1308.2231"
+                    y2="1310.1143"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_86_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_15_"
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask id="mask-143_1_" maskUnits="userSpaceOnUse">
+                  <g filter="url(#Adobe_OpacityMaskFilter_15_)">
+                    <polygon
+                      id="path-142_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_87_"
+                  gradientTransform="matrix(6.3405 0 0 -10.9369 -3652.7986 14335.8613)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="576.3993"
+                  x2="575.9966"
+                  y1="1310.131"
+                  y2="1309.78"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_87_)"
+                  mask="url(#mask-143_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g transform="translate(19.201017, 11.077510)">
+                <g>
+                  <linearGradient
+                    id="SVGID_88_"
+                    gradientTransform="matrix(-6.3405 0 0 -10.9369 3394.4546 14270.8994)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="534.4787"
+                    x2="534.0574"
+                    y1="1302.6141"
+                    y2="1304.5051"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_88_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_16_"
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask id="mask-145_1_" maskUnits="userSpaceOnUse">
+                  <g filter="url(#Adobe_OpacityMaskFilter_16_)">
+                    <polygon
+                      id="path-144_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_89_"
+                  gradientTransform="matrix(6.3405 0 0 -10.9369 -3592.114 14274.5156)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="566.8283"
+                  x2="566.4257"
+                  y1="1304.5219"
+                  y2="1304.1709"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_89_)"
+                  mask="url(#mask-145_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+            </g>
+            <g transform="translate(0.000000, 22.155020)">
+              <g transform="translate(0.000000, -0.000000)">
+                <g>
+                  <linearGradient
+                    id="SVGID_90_"
+                    gradientTransform="matrix(-6.3405 0 0 -10.9369 3516.198 14270.8994)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="553.8022"
+                    x2="552.9454"
+                    y1="1304.7914"
+                    y2="1303.3134"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #fb6583" />
+                    <stop offset="0.1302" style="stop-color: #fc7688" />
+                    <stop offset="0.5277" style="stop-color: #fda797" />
+                    <stop offset="0.8302" style="stop-color: #ffc6a0" />
+                    <stop offset="1" style="stop-color: #ffd1a3" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_90_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_17_"
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask id="mask-147_1_" maskUnits="userSpaceOnUse">
+                  <g filter="url(#Adobe_OpacityMaskFilter_17_)">
+                    <polygon
+                      id="path-146_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_91_"
+                  gradientTransform="matrix(6.3405 0 0 -10.9369 -3713.8577 14274.5156)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="586.1296"
+                  x2="585.908"
+                  y1="1304.5552"
+                  y2="1304.1165"
+                >
+                  <stop offset="0" style="stop-color: #fb6583" />
+                  <stop offset="1" style="stop-color: #ffd1a3" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_91_)"
+                  mask="url(#mask-147_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g transform="translate(9.630049, 5.468450)">
+                <g>
+                  <linearGradient
+                    id="SVGID_92_"
+                    gradientTransform="matrix(-6.3405 0 0 -10.9369 3455.1392 14211.0918)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="544.0497"
+                    x2="543.6284"
+                    y1="1297.1456"
+                    y2="1299.0367"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_92_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_18_"
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask id="mask-149_1_" maskUnits="userSpaceOnUse">
+                  <g filter="url(#Adobe_OpacityMaskFilter_18_)">
+                    <polygon
+                      id="path-148_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_93_"
+                  gradientTransform="matrix(6.3405 0 0 -10.9369 -3652.7986 14214.708)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="576.3993"
+                  x2="575.9966"
+                  y1="1299.0535"
+                  y2="1298.7025"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_93_)"
+                  mask="url(#mask-149_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+              <g transform="translate(19.201017, 11.077510)">
+                <g>
+                  <linearGradient
+                    id="SVGID_94_"
+                    gradientTransform="matrix(-6.3405 0 0 -10.9369 3394.4546 14149.7461)"
+                    gradientUnits="userSpaceOnUse"
+                    x1="534.4787"
+                    x2="534.0574"
+                    y1="1291.5366"
+                    y2="1293.4276"
+                  >
+                    <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+                    <stop offset="0.2823" style="stop-color: #285ecb" />
+                    <stop offset="0.538" style="stop-color: #3aa3dd" />
+                    <stop offset="0.75" style="stop-color: #47d5eb" />
+                    <stop offset="0.9102" style="stop-color: #4ff4f3" />
+                    <stop offset="1" style="stop-color: #52fff6" />
+                  </linearGradient>
+                  <polygon
+                    fill="url(#SVGID_94_)"
+                    points="0,7.3 6.3,10.9 6.3,3.7 0,0 							"
+                  />
+                </g>
+                <defs>
+                  <filter
+                    id="Adobe_OpacityMaskFilter_19_"
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feColorMatrix
+                      type="matrix"
+                      values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                    />
+                  </filter>
+                </defs>
+                <mask id="mask-151_1_" maskUnits="userSpaceOnUse">
+                  <g filter="url(#Adobe_OpacityMaskFilter_19_)">
+                    <polygon
+                      id="path-150_1_"
+                      clip-rule="evenodd"
+                      fill="#FFFFFF"
+                      fill-rule="evenodd"
+                      points="0,7.3 6.3,10.9 6.3,3.7 0,0
+																	"
+                    />
+                  </g>
+                </mask>
+
+                <linearGradient
+                  id="SVGID_95_"
+                  gradientTransform="matrix(6.3405 0 0 -10.9369 -3592.114 14153.3623)"
+                  gradientUnits="userSpaceOnUse"
+                  x1="566.8283"
+                  x2="566.4257"
+                  y1="1293.4443"
+                  y2="1293.0934"
+                >
+                  <stop offset="0" style="stop-color: #00c4ba" />
+                  <stop offset="1" style="stop-color: #52fff6" />
+                </linearGradient>
+                <polygon
+                  fill="url(#SVGID_95_)"
+                  mask="url(#mask-151_1_)"
+                  points="6.3,10.9 0,14.6 0,7.3 6.3,3.6 						"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+
+        <g
+          id="椭圆"
+          transform="translate(83.218192, 86.783330) rotate(5.000000) translate(-83.218192, -86.783330) translate(7.218192, 10.783330)"
+        >
+          <g id="编组-5" transform="translate(8.161827, 36.521835)">
+            <linearGradient
+              id="SVGID_96_"
+              gradientTransform="matrix(124.0018 47.351 0.1479 -31.3606 42600.2344 62547.3867)"
+              gradientUnits="userSpaceOnUse"
+              x1="-344.7103"
+              x2="-344.7103"
+              y1="1473.182"
+              y2="1472.182"
+            >
+              <stop
+                offset="0"
+                style="stop-color: #5cd7e8; stop-opacity: 0.1893"
+              />
+              <stop offset="1" style="stop-color: #fff" />
+            </linearGradient>
+
+            <ellipse
+              cx="68"
+              cy="38.7"
+              fill="none"
+              rx="14.6"
+              ry="66.6"
+              stroke="url(#SVGID_96_)"
+              stroke-width="0.6"
+              transform="matrix(-0.3746 0.9272 -0.9272 -0.3746 129.3914 -9.7912)"
+            />
+
+            <ellipse
+              clip-rule="evenodd"
+              cx="60.3"
+              cy="51.5"
+              fill="#FFFFFF"
+              fill-rule="evenodd"
+              rx="1.7"
+              ry="1.7"
+              transform="matrix(2.765398e-06 1 -1 2.765398e-06 111.8035 -8.8797)"
+            />
+
+            <ellipse
+              id="椭圆形备份"
+              clip-rule="evenodd"
+              cx="86"
+              cy="30.8"
+              enable-background="new    "
+              fill="#FFFFFF"
+              fill-rule="evenodd"
+              opacity="0.2662"
+              rx="1.1"
+              ry="1"
+              transform="matrix(2.765396e-06 1 -1 2.765396e-06 116.7571 -55.2401)"
+            />
+          </g>
+
+          <g
+            transform="translate(76.180160, 76.074544) rotate(-45.000000) translate(-76.180160, -76.074544) translate(8.680160, 37.074544)"
+          >
+            <linearGradient
+              id="SVGID_97_"
+              gradientTransform="matrix(87.4224 55.5937 87.656 11.2551 42330.7227 60598.5664)"
+              gradientUnits="userSpaceOnUse"
+              x1="-1242.9404"
+              x2="-1242.9404"
+              y1="757.5463"
+              y2="756.5463"
+            >
+              <stop
+                offset="0"
+                style="stop-color: #5cd7e8; stop-opacity: 0.1893"
+              />
+              <stop offset="1" style="stop-color: #fff" />
+            </linearGradient>
+
+            <ellipse
+              cx="67.9"
+              cy="38.7"
+              fill="none"
+              rx="66.5"
+              ry="14.6"
+              stroke="url(#SVGID_97_)"
+              stroke-width="0.6"
+              transform="matrix(-0.9272 -0.3746 0.3746 -0.9272 116.2823 100.0875)"
+            />
+
+            <ellipse
+              clip-rule="evenodd"
+              cx="31.9"
+              cy="37"
+              fill="#FFFFFF"
+              fill-rule="evenodd"
+              rx="1.7"
+              ry="1.7"
+              transform="matrix(-1 -5.213811e-07 5.213811e-07 -1 63.8725 74.0324)"
+            />
+
+            <ellipse
+              clip-rule="evenodd"
+              cx="85.8"
+              cy="30.8"
+              enable-background="new    "
+              fill="#FFFFFF"
+              fill-rule="evenodd"
+              opacity="0.2662"
+              rx="1"
+              ry="1.1"
+              transform="matrix(-1 2.765399e-06 -2.765399e-06 -1 171.6696 61.5172)"
+            />
+          </g>
+        </g>
+      </g>
+
+      <g
+        id="编组备份-11"
+        transform="translate(694.000000, 158.500000) scale(-1, 1) translate(-694.000000, -158.500000) translate(622.000000, 65.000000)"
+      >
+        <linearGradient
+          id="SVGID_98_"
+          gradientTransform="matrix(-142.0107 0 0 -186.2829 94193.1797 325470.9375)"
+          gradientUnits="userSpaceOnUse"
+          x1="663.2509"
+          x2="663.8784"
+          y1="1745.6415"
+          y2="1747.1095"
+        >
+          <stop offset="0" style="stop-color: #fff" />
+          <stop offset="1" style="stop-color: #00c6fb" />
+        </linearGradient>
+        <path
+          d="M134.9,0l7.1,4l-2.2,3.6l-3,1.2l-1.4,92c0,3-1.8,6.5-4,8l-0.2,0.1L10,178.8l0,0l-1.2,7.5l-7-3.9
+			c-0.1-0.1-0.3-0.1-0.4-0.2l0,0c-0.8-0.6-1.3-1.7-1.3-3.3l0,0l1.4-97.1c0-3.1,1.9-6.7,4.2-8.1l0,0L132.6,0.5
+			C133.5,0,134.3-0.1,134.9,0L134.9,0z"
+          fill="url(#SVGID_98_)"
+        />
+
+        <linearGradient
+          id="SVGID_99_"
+          gradientTransform="matrix(-136.8189 0 0 -182.5389 90752.4922 318912.7812)"
+          gradientUnits="userSpaceOnUse"
+          x1="662.8271"
+          x2="662.9656"
+          y1="1746.7982"
+          y2="1746.3707"
+        >
+          <stop offset="0" style="stop-color: #276cfc" />
+          <stop offset="1" style="stop-color: #84ffd1" />
+        </linearGradient>
+        <path
+          clip-rule="evenodd"
+          d="M11,185.8l126.9-73.2c2.3-1.4,4.2-5,4.2-8.1l1.4-97.1
+			c0-3.1-1.9-4.6-4.2-3.2L12.4,77.4c-2.3,1.4-4.2,5-4.2,8.1l-1.4,97.1C6.8,185.7,8.7,187.1,11,185.8z"
+          fill="url(#SVGID_99_)"
+          fill-rule="evenodd"
+        />
+        <g opacity="0.3" transform="translate(95.618736, 40.248000)">
+          <path
+            d="M33.5,8.7L3.1,26.3c-1,0.6-2.2,0.2-2.8-0.7
+				c-0.2-0.3-0.3-0.7-0.3-1c0-2.2,1.2-4.2,3-5.2L33.5,1.7c1-0.6,2.2-0.2,2.8,0.7c0.2,0.3,0.3,0.7,0.3,1C36.6,5.7,35.4,7.7,33.5,8.7z
+				"
+            enable-background="new    "
+            fill="#FFFFFF"
+            opacity="0.3007"
+          />
+          <path
+            d="M34,27.4L10.3,41c-0.8,0.4-1.7,0.2-2.1-0.6
+				C8,40.2,8,40,8,39.7c0-1.7,0.9-3.2,2.4-4.1L34,22c0.8-0.4,1.7-0.2,2.1,0.6c0.1,0.2,0.2,0.5,0.2,0.8C36.3,25,35.4,26.5,34,27.4z"
+            enable-background="new    "
+            fill="#FFFFFF"
+            opacity="0.3007"
+          />
+          <path
+            d="M34,41.7L10.3,55.4c-0.8,0.4-1.7,0.2-2.1-0.6
+				C8,54.6,8,54.3,8,54c0-1.7,0.9-3.2,2.4-4.1L34,36.3c0.8-0.4,1.7-0.2,2.1,0.6c0.1,0.2,0.2,0.5,0.2,0.8
+				C36.3,39.3,35.4,40.9,34,41.7z"
+            enable-background="new    "
+            fill="#FFFFFF"
+            opacity="0.3007"
+          />
+          <path
+            d="M34,56L10.3,69.7c-0.8,0.4-1.7,0.2-2.1-0.6
+				C8,68.9,8,68.6,8,68.3c0-1.7,0.9-3.2,2.4-4.1L34,50.6c0.8-0.4,1.7-0.2,2.1,0.6c0.1,0.2,0.2,0.5,0.2,0.8
+				C36.3,53.6,35.4,55.2,34,56z"
+            enable-background="new    "
+            fill="#FFFFFF"
+            opacity="0.3007"
+          />
+        </g>
+
+        <linearGradient
+          id="SVGID_100_"
+          gradientTransform="matrix(-82.1586 0 0 -155.5418 54504.3555 271598.7188)"
+          gradientUnits="userSpaceOnUse"
+          x1="662.0853"
+          x2="661.7936"
+          y1="1746.2543"
+          y2="1745.1642"
+        >
+          <stop offset="0" style="stop-color: #fff" />
+          <stop offset="1" style="stop-color: #fff; stop-opacity: 0" />
+        </linearGradient>
+        <polygon
+          enable-background="new    "
+          fill="url(#SVGID_100_)"
+          opacity="0.4"
+          points="93,31 53,161.5 94.8,137.4 135.2,6 		"
+        />
+
+        <linearGradient
+          id="SVGID_101_"
+          gradientTransform="matrix(-12.3655 0 0 -48.4174 8136.0479 83952.2812)"
+          gradientUnits="userSpaceOnUse"
+          x1="655.1039"
+          x2="654.9725"
+          y1="1729.8617"
+          y2="1731.0027"
+        >
+          <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+          <stop offset="0.2823" style="stop-color: #285ecb" />
+          <stop offset="0.538" style="stop-color: #3aa3dd" />
+          <stop offset="0.75" style="stop-color: #47d5eb" />
+          <stop offset="0.9102" style="stop-color: #4ff4f3" />
+          <stop offset="1" style="stop-color: #52fff6" />
+        </linearGradient>
+
+        <linearGradient
+          id="SVGID_102_"
+          gradientTransform="matrix(-12.3655 0 0 -48.4174 8136.0479 83952.2812)"
+          gradientUnits="userSpaceOnUse"
+          x1="655.2512"
+          x2="655.2512"
+          y1="1731.6409"
+          y2="1730.6409"
+        >
+          <stop offset="0" style="stop-color: #fff" />
+          <stop offset="1" style="stop-color: #fff; stop-opacity: 0" />
+        </linearGradient>
+
+        <polygon
+          enable-background="new    "
+          fill="url(#SVGID_101_)"
+          opacity="0.3007"
+          points="
+			39.7,152 27.4,159.1 27.4,117.9 39.7,110.7 		"
+          stroke="url(#SVGID_102_)"
+          stroke-width="0.5"
+        />
+
+        <g
+          transform="translate(72.980000, 101.800000) scale(-1, 1) translate(-72.980000, -101.800000) translate(13.480000, 28.800000)"
+        >
+          <linearGradient
+            id="SVGID_103_"
+            gradientTransform="matrix(116.289 0 0 -102.7515 61913.2812 176111.3281)"
+            gradientUnits="userSpaceOnUse"
+            x1="-531.9647"
+            x2="-531.5446"
+            y1="1713.5308"
+            y2="1713.0157"
+          >
+            <stop offset="0" style="stop-color: #fff" />
+            <stop offset="1" style="stop-color: #fff" />
+          </linearGradient>
+
+          <linearGradient
+            id="SVGID_104_"
+            gradientTransform="matrix(116.289 0 0 -102.7515 61913.2812 176111.3281)"
+            gradientUnits="userSpaceOnUse"
+            x1="-531.3857"
+            x2="-532.1153"
+            y1="1713.6992"
+            y2="1713.3367"
+          >
+            <stop offset="0" style="stop-color: #f8ff24" />
+            <stop offset="1" style="stop-color: #fff" />
+          </linearGradient>
+          <path
+            clip-rule="evenodd"
+            d="
+				M117.6,103.3c-6-3.4-9-14.2-11.9-24.6c-2.9-10.2-5.7-20.7-11.4-24c-5.7-3.3-8.6,3.9-11.4,10.8c-2.9,7.1-5.9,14.4-11.9,10.9
+				c-6-3.5-9-14.2-11.8-24.6c-2.9-10.2-5.8-20.7-11.4-24s-8.6,3.9-11.4,10.8c-2.9,7.1-5.9,14.4-11.9,10.9c-6-3.4-9-14.2-11.8-24.6
+				C9.9,14.9,7,4.3,1.3,1.1V0.5c6,3.4,9,14.2,11.9,24.6c2.8,10.2,5.7,20.7,11.4,24c5.7,3.3,8.6-3.9,11.4-10.8
+				c2.9-7.1,5.9-14.4,11.8-10.9s9,14.2,11.9,24.6c2.9,10.2,5.7,20.7,11.4,24c5.7,3.2,8.6-3.9,11.4-10.8c2.9-7.1,5.9-14.4,11.8-10.9
+				c6,3.5,9,14.2,11.9,24.6c2.9,10.2,5.8,20.7,11.4,24V103.3z"
+            fill="url(#SVGID_103_)"
+            fill-rule="evenodd"
+            stroke="url(#SVGID_104_)"
+            stroke-width="1.4256"
+          />
+
+          <linearGradient
+            id="路径-2_1_"
+            gradientTransform="matrix(117.4617 0 0 -144.8008 62535.8438 248597.6562)"
+            gradientUnits="userSpaceOnUse"
+            x1="-531.8884"
+            x2="-531.8884"
+            y1="1716.8223"
+            y2="1715.8223"
+          >
+            <stop offset="0" style="stop-color: #fff" />
+            <stop offset="1" style="stop-color: #fff; stop-opacity: 0" />
+          </linearGradient>
+          <path
+            id="路径-2"
+            clip-rule="evenodd"
+            d="M0.6,0.5v77.2l117,67.6l0.5-42
+				c-3.3-3.2-5.5-5.6-6.5-7.3c-4.4-7.6-5.6-14.4-6.1-18.2c-1.1-7.7-9.1-26.4-15.2-23.3c-6.1,3.1-10.8,27.4-17.9,23.3
+				c-7-4-15.5-32-17.3-39.4S46,22.8,41.4,29.7c-1,1.5-4.9,9.1-6,11.5c-7.7,15.9-13.7,7.5-19.1-5C14.1,31.1,9.8,15.4,6.2,6.8
+				C5,3.9,3.2,1.8,0.6,0.5z"
+            fill="url(#路径-2_1_)"
+            fill-rule="evenodd"
+          />
+          <g id="编组-7" transform="translate(41.723113, 19.522022)">
+            <path
+              id="Fill-11"
+              clip-rule="evenodd"
+              d="
+					M5.4,0.8c3,1.9,5.4,6.4,5.4,10.1c0,3.7-2.4,5.2-5.4,3.4C2.4,12.4,0,7.9,0,4.2C0,0.4,2.4-1.1,5.4,0.8"
+              enable-background="new    "
+              fill="#AA69FF"
+              fill-rule="evenodd"
+              opacity="0.6"
+            />
+            <path
+              clip-rule="evenodd"
+              d="M9.7,10.7
+					c0,3.2-2,4.5-4.3,2.9C3,12,1.1,8.1,1.1,4.9c0-3.2,2-4.5,4.3-2.9S9.7,7.5,9.7,10.7z"
+              enable-background="new    "
+              fill="#7005FF"
+              fill-rule="evenodd"
+              opacity="0.6"
+            />
+            <path
+              clip-rule="evenodd"
+              d="M7.4,9c0,1.6-1,2.2-2.2,1.4C4.1,9.6,3.1,7.6,3.1,6
+					c0-1.6,1-2.2,2.2-1.4S7.4,7.4,7.4,9z"
+              fill="#E7C769"
+              fill-rule="evenodd"
+            />
+          </g>
+        </g>
+
+        <linearGradient
+          id="SVGID_105_"
+          gradientTransform="matrix(-12.3655 0 0 -61.3183 8158.1587 106537.3281)"
+          gradientUnits="userSpaceOnUse"
+          x1="655.2088"
+          x2="655.1892"
+          y1="1734.5078"
+          y2="1734.9935"
+        >
+          <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+          <stop offset="0.2823" style="stop-color: #285ecb" />
+          <stop offset="0.538" style="stop-color: #3aa3dd" />
+          <stop offset="0.75" style="stop-color: #47d5eb" />
+          <stop offset="0.9102" style="stop-color: #4ff4f3" />
+          <stop offset="1" style="stop-color: #52fff6" />
+        </linearGradient>
+
+        <linearGradient
+          id="SVGID_106_"
+          gradientTransform="matrix(-12.3655 0 0 -61.3183 8158.1587 106537.3281)"
+          gradientUnits="userSpaceOnUse"
+          x1="655.2512"
+          x2="655.2512"
+          y1="1736.0601"
+          y2="1735.0601"
+        >
+          <stop offset="0" style="stop-color: #fff" />
+          <stop offset="1" style="stop-color: #fff; stop-opacity: 0" />
+        </linearGradient>
+
+        <polygon
+          enable-background="new    "
+          fill="url(#SVGID_105_)"
+          opacity="0.3007"
+          points="
+			61.8,139.2 49.5,146.4 49.5,92.2 61.8,85.1 		"
+          stroke="url(#SVGID_106_)"
+          stroke-width="0.5"
+        />
+
+        <linearGradient
+          id="SVGID_107_"
+          gradientTransform="matrix(-12.3655 0 0 -74.2182 8181.0142 129120.2578)"
+          gradientUnits="userSpaceOnUse"
+          x1="655.1729"
+          x2="655.117"
+          y1="1737.4004"
+          y2="1738.1447"
+        >
+          <stop offset="5.400000e-03" style="stop-color: #130cb5" />
+          <stop offset="0.2823" style="stop-color: #285ecb" />
+          <stop offset="0.538" style="stop-color: #3aa3dd" />
+          <stop offset="0.75" style="stop-color: #47d5eb" />
+          <stop offset="0.9102" style="stop-color: #4ff4f3" />
+          <stop offset="1" style="stop-color: #52fff6" />
+        </linearGradient>
+
+        <linearGradient
+          id="SVGID_108_"
+          gradientTransform="matrix(-12.3655 0 0 -74.2182 8181.0142 129120.2578)"
+          gradientUnits="userSpaceOnUse"
+          x1="655.2512"
+          x2="655.2512"
+          y1="1738.9429"
+          y2="1737.9429"
+        >
+          <stop offset="0" style="stop-color: #fff" />
+          <stop offset="1" style="stop-color: #fff; stop-opacity: 0" />
+        </linearGradient>
+
+        <polygon
+          enable-background="new    "
+          fill="url(#SVGID_107_)"
+          opacity="0.3007"
+          points="
+			84.7,126 72.3,133.2 72.3,66.1 84.7,59 		"
+          stroke="url(#SVGID_108_)"
+          stroke-width="0.5"
+        />
+      </g>
+      <g id="编组-16" transform="translate(51.000000, 152.000000)">
+        <g id="云">
+          <g transform="translate(0.000000, 0.000000)">
+            <g>
+              <linearGradient
+                id="SVGID_109_"
+                gradientTransform="matrix(100.2748 0 0 -95.0757 -5012.0137 157345.375)"
+                gradientUnits="userSpaceOnUse"
+                x1="49.8504"
+                x2="50.8986"
+                y1="1654.3923"
+                y2="1654.5082"
+              >
+                <stop offset="0" style="stop-color: #544cde" />
+                <stop offset="0.5868" style="stop-color: #a7a0ff" />
+                <stop offset="1" style="stop-color: #7b74ff" />
+              </linearGradient>
+              <path
+                clip-rule="evenodd"
+                d="M70.3,14.7c0,0.3,0,0.5,0,0.7
+						c1.5-1.4,3.2-2.6,4.8-3.5c5.6-3.2,10.6-3.3,14-0.8l11.1,6.6l-7.1,11c-2.1,10-8.9,20.5-17.2,25.7L23.9,84.6L18,95.1L6.2,88l0,0
+						C2.4,85.8,0,81.2,0,74.5c0-13.1,9.2-29.2,20.6-35.8c3-1.7,5.9-2.7,8.4-2.8c1.1-12.6,9.9-26.9,20.5-33
+						C61-3.8,70.3,1.6,70.3,14.7z"
+                fill="url(#SVGID_109_)"
+                fill-rule="evenodd"
+              />
+            </g>
+            <defs>
+              <filter
+                id="Adobe_OpacityMaskFilter_20_"
+                filterUnits="userSpaceOnUse"
+                height="67.1"
+                width="76.3"
+                x="58.3"
+                y="-13.8"
+              >
+                <feColorMatrix
+                  type="matrix"
+                  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                />
+              </filter>
+            </defs>
+            <mask
+              id="mask-168_1_"
+              height="67.1"
+              maskUnits="userSpaceOnUse"
+              width="76.3"
+              x="58.3"
+              y="-13.8"
+            >
+              <g filter="url(#Adobe_OpacityMaskFilter_20_)">
+                <path
+                  id="path-167_1_"
+                  clip-rule="evenodd"
+                  d="M70.3,14.7c0,0.3,0,0.5,0,0.7
+							c1.5-1.4,3.2-2.6,4.8-3.5c5.6-3.2,10.6-3.3,14-0.8l11.1,6.6l-7.1,11c-2.1,10-8.9,20.5-17.2,25.7L23.9,84.6L18,95.1L6.2,88l0,0
+							C2.4,85.8,0,81.2,0,74.5c0-13.1,9.2-29.2,20.6-35.8c3-1.7,5.9-2.7,8.4-2.8c1.1-12.6,9.9-26.9,20.5-33
+							C61-3.8,70.3,1.6,70.3,14.7z"
+                  fill="#FFFFFF"
+                  fill-rule="evenodd"
+                />
+              </g>
+            </mask>
+
+            <linearGradient
+              id="矩形备份-3_1_"
+              gradientTransform="matrix(76.2914 0 0 -67.1042 -3730.5828 110741.1094)"
+              gradientUnits="userSpaceOnUse"
+              x1="49.8816"
+              x2="50.4973"
+              y1="1649.8344"
+              y2="1650.4406"
+            >
+              <stop offset="0" style="stop-color: #4f3eff" />
+              <stop offset="0.4096" style="stop-color: #9c92ff" />
+              <stop offset="0.7979" style="stop-color: #2519da" />
+              <stop offset="1" style="stop-color: #0d04ab" />
+            </linearGradient>
+
+            <path
+              id="矩形备份-3"
+              clip-rule="evenodd"
+              d="
+					M100.1-13.4l29.3,15.6l5.2,15.3C112,43,96.4,54.9,87.8,53.2S69.3,34.5,58.3,2.2c10.3-7,18.4-11.6,24.2-13.7
+					S94.1-14.3,100.1-13.4z"
+              fill="url(#矩形备份-3_1_)"
+              fill-rule="evenodd"
+              mask="url(#mask-168_1_)"
+            />
+            <defs>
+              <filter
+                id="Adobe_OpacityMaskFilter_21_"
+                filterUnits="userSpaceOnUse"
+                height="67.1"
+                width="76.3"
+                x="0"
+                y="-13.8"
+              >
+                <feColorMatrix
+                  type="matrix"
+                  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                />
+              </filter>
+            </defs>
+            <mask
+              id="mask-168_2_"
+              height="67.1"
+              maskUnits="userSpaceOnUse"
+              width="76.3"
+              x="0"
+              y="-13.8"
+            >
+              <g filter="url(#Adobe_OpacityMaskFilter_21_)">
+                <path
+                  id="path-167_2_"
+                  clip-rule="evenodd"
+                  d="M70.3,14.7c0,0.3,0,0.5,0,0.7
+							c1.5-1.4,3.2-2.6,4.8-3.5c5.6-3.2,10.6-3.3,14-0.8l11.1,6.6l-7.1,11c-2.1,10-8.9,20.5-17.2,25.7L23.9,84.6L18,95.1L6.2,88l0,0
+							C2.4,85.8,0,81.2,0,74.5c0-13.1,9.2-29.2,20.6-35.8c3-1.7,5.9-2.7,8.4-2.8c1.1-12.6,9.9-26.9,20.5-33
+							C61-3.8,70.3,1.6,70.3,14.7z"
+                  fill="#FFFFFF"
+                  fill-rule="evenodd"
+                />
+              </g>
+            </mask>
+
+            <linearGradient
+              id="矩形备份-2_1_"
+              gradientTransform="matrix(76.2914 0 0 -67.1042 -3788.8608 110741.1094)"
+              gradientUnits="userSpaceOnUse"
+              x1="49.8816"
+              x2="50.4973"
+              y1="1649.8344"
+              y2="1650.4406"
+            >
+              <stop offset="0" style="stop-color: #4f3eff" />
+              <stop offset="0.4096" style="stop-color: #9c92ff" />
+              <stop offset="0.7979" style="stop-color: #2519da" />
+              <stop offset="1" style="stop-color: #0d04ab" />
+            </linearGradient>
+
+            <path
+              id="矩形备份-2"
+              clip-rule="evenodd"
+              d="
+					M41.8-13.4L71.1,2.2l5.2,15.3C53.7,43,38.1,54.9,29.5,53.2S11,34.5,0,2.2c10.3-7,18.4-11.6,24.2-13.7S35.8-14.3,41.8-13.4z"
+              fill="url(#矩形备份-2_1_)"
+              fill-rule="evenodd"
+              mask="url(#mask-168_2_)"
+            />
+            <defs>
+              <filter
+                id="Adobe_OpacityMaskFilter_22_"
+                filterUnits="userSpaceOnUse"
+                height="67.1"
+                width="76.3"
+                x="-12.7"
+                y="35.5"
+              >
+                <feColorMatrix
+                  type="matrix"
+                  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"
+                />
+              </filter>
+            </defs>
+            <mask
+              id="mask-168_3_"
+              height="67.1"
+              maskUnits="userSpaceOnUse"
+              width="76.3"
+              x="-12.7"
+              y="35.5"
+            >
+              <g filter="url(#Adobe_OpacityMaskFilter_22_)">
+                <path
+                  id="path-167_3_"
+                  clip-rule="evenodd"
+                  d="M70.3,14.7c0,0.3,0,0.5,0,0.7
+							c1.5-1.4,3.2-2.6,4.8-3.5c5.6-3.2,10.6-3.3,14-0.8l11.1,6.6l-7.1,11c-2.1,10-8.9,20.5-17.2,25.7L23.9,84.6L18,95.1L6.2,88l0,0
+							C2.4,85.8,0,81.2,0,74.5c0-13.1,9.2-29.2,20.6-35.8c3-1.7,5.9-2.7,8.4-2.8c1.1-12.6,9.9-26.9,20.5-33
+							C61-3.8,70.3,1.6,70.3,14.7z"
+                  fill="#FFFFFF"
+                  fill-rule="evenodd"
+                />
+              </g>
+            </mask>
+
+            <linearGradient
+              id="SVGID_110_"
+              gradientTransform="matrix(76.2914 0 0 -67.1042 -3801.5762 110790.3594)"
+              gradientUnits="userSpaceOnUse"
+              x1="49.8816"
+              x2="50.4973"
+              y1="1649.8344"
+              y2="1650.4406"
+            >
+              <stop offset="0" style="stop-color: #4f3eff" />
+              <stop offset="0.4096" style="stop-color: #9c92ff" />
+              <stop offset="0.7979" style="stop-color: #2519da" />
+              <stop offset="1" style="stop-color: #0d04ab" />
+            </linearGradient>
+            <path
+              clip-rule="evenodd"
+              d="M29.1,35.9l29.3,15.6
+					l5.2,15.3C41,92.3,25.4,104.1,16.8,102.4c-8.7-1.7-18.5-18.7-29.5-50.9c10.3-7,18.4-11.6,24.2-13.7S23.1,35,29.1,35.9z"
+              fill="url(#SVGID_110_)"
+              fill-rule="evenodd"
+              mask="url(#mask-168_3_)"
+            />
+          </g>
+
+          <linearGradient
+            id="Fill-1备份_1_"
+            gradientTransform="matrix(93.8386 0 0 -89.2609 -4672.3262 147666.9375)"
+            gradientUnits="userSpaceOnUse"
+            x1="50.6106"
+            x2="50.1002"
+            y1="1654.2188"
+            y2="1652.9083"
+          >
+            <stop offset="0" style="stop-color: #5e51e4" />
+            <stop offset="1" style="stop-color: #060071" />
+          </linearGradient>
+          <path
+            id="Fill-1备份"
+            clip-rule="evenodd"
+            d="M86.6,18.8
+				c10.3-6,18.6-1.1,18.7,10.7c0,11.6-7.9,25.6-17.9,31.8l-55.2,32l-0.4,0.2c-11.3,6.3-20.3,0.9-20.4-12.1
+				c0-13.1,9.2-29.2,20.6-35.8c3-1.7,5.9-2.7,8.4-2.8c1.1-12.6,9.9-26.9,20.5-33c11.4-6.6,20.7-1.3,20.8,11.9c0,0.3,0,0.5,0,0.7
+				C83.3,21,84.9,19.7,86.6,18.8"
+            fill="url(#Fill-1备份_1_)"
+            fill-rule="evenodd"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/authentication/index.ts b/admin-ui/vue/packages/effects/layouts/src/authentication/index.ts
new file mode 100644
index 0000000..d7c1c29
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/authentication/index.ts
@@ -0,0 +1,2 @@
+export { default as AuthPageLayout } from './authentication.vue';
+export * from './types';
diff --git a/admin-ui/vue/packages/effects/layouts/src/authentication/toolbar.vue b/admin-ui/vue/packages/effects/layouts/src/authentication/toolbar.vue
new file mode 100644
index 0000000..94d321a
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/authentication/toolbar.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { ToolbarType } from './types';
+
+import { computed } from 'vue';
+
+import { preferences } from '@vben/preferences';
+
+import {
+  AuthenticationColorToggle,
+  AuthenticationLayoutToggle,
+  LanguageToggle,
+  ThemeToggle,
+} from '../widgets';
+
+interface Props {
+  toolbarList?: ToolbarType[];
+}
+
+defineOptions({
+  name: 'AuthenticationToolbar',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  toolbarList: () => ['color', 'language', 'layout', 'theme'],
+});
+
+const showColor = computed(() => props.toolbarList.includes('color'));
+const showLayout = computed(() => props.toolbarList.includes('layout'));
+const showLanguage = computed(() => props.toolbarList.includes('language'));
+const showTheme = computed(() => props.toolbarList.includes('theme'));
+</script>
+
+<template>
+  <div
+    :class="{
+      'bg-accent rounded-3xl px-3 py-1': toolbarList.length > 1,
+    }"
+    class="flex-center absolute right-2 top-4 z-10"
+  >
+    <!-- Only show on medium and larger screens -->
+    <div class="hidden md:flex">
+      <AuthenticationColorToggle v-if="showColor" />
+      <AuthenticationLayoutToggle v-if="showLayout" />
+    </div>
+    <!-- Always show Language and Theme toggles -->
+    <LanguageToggle v-if="showLanguage && preferences.widget.languageToggle" />
+    <ThemeToggle v-if="showTheme && preferences.widget.themeToggle" />
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/authentication/types.ts b/admin-ui/vue/packages/effects/layouts/src/authentication/types.ts
new file mode 100644
index 0000000..c4c1c7f
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/authentication/types.ts
@@ -0,0 +1 @@
+export type ToolbarType = 'color' | 'language' | 'layout' | 'theme';
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/README.md b/admin-ui/vue/packages/effects/layouts/src/basic/README.md
new file mode 100644
index 0000000..b1266ea
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/README.md
@@ -0,0 +1,7 @@
+## layout
+
+### header
+
+- 支持N个自定义插槽，命名方式：header-right-n，header-left-n
+- header-left-n ，排序方式：0-19 ,breadcrumb 21-x
+- header-right-n ，排序方式：0-49，global-search，51-59，theme-toggle，61-69，language-toggle，71-79，fullscreen，81-89，notification，91-149，user-dropdown，151-x
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/content/content-spinner.vue b/admin-ui/vue/packages/effects/layouts/src/basic/content/content-spinner.vue
new file mode 100644
index 0000000..e97e4b6
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/content/content-spinner.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { VbenSpinner } from '@vben-core/shadcn-ui';
+
+import { useContentSpinner } from './use-content-spinner';
+
+defineOptions({ name: 'LayoutContentSpinner' });
+
+const { spinning } = useContentSpinner();
+</script>
+<template>
+  <VbenSpinner :spinning="spinning" />
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/content/content.vue b/admin-ui/vue/packages/effects/layouts/src/basic/content/content.vue
new file mode 100644
index 0000000..8b8a639
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/content/content.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import type { VNode } from 'vue';
+import type {
+  RouteLocationNormalizedLoaded,
+  RouteLocationNormalizedLoadedGeneric,
+} from 'vue-router';
+
+import { computed } from 'vue';
+import { RouterView } from 'vue-router';
+
+import { preferences, usePreferences } from '@vben/preferences';
+import { getTabKey, storeToRefs, useTabbarStore } from '@vben/stores';
+
+import { IFrameRouterView } from '../../iframe';
+
+defineOptions({ name: 'LayoutContent' });
+
+const tabbarStore = useTabbarStore();
+const { keepAlive } = usePreferences();
+
+const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
+  storeToRefs(tabbarStore);
+
+/**
+ * 是否使用动画
+ */
+const getEnabledTransition = computed(() => {
+  const { transition } = preferences;
+  const transitionName = transition.name;
+  return transitionName && transition.enable;
+});
+
+// 页面切换动画
+function getTransitionName(_route: RouteLocationNormalizedLoaded) {
+  // 如果偏好设置未设置，则不使用动画
+  const { tabbar, transition } = preferences;
+  const transitionName = transition.name;
+  if (!transitionName || !transition.enable) {
+    return;
+  }
+
+  // 标签页未启用或者未开启缓存，则使用全局配置动画
+  if (!tabbar.enable || !keepAlive) {
+    return transitionName;
+  }
+
+  // 如果页面已经加载过，则不使用动画
+  // if (route.meta.loaded) {
+  //   return;
+  // }
+  // 已经打开且已经加载过的页面不使用动画
+  // const inTabs = getCachedTabs.value.includes(route.name as string);
+
+  // return inTabs && route.meta.loaded ? undefined : transitionName;
+  return transitionName;
+}
+
+/**
+ * 转换组件，自动添加 name
+ * @param component
+ */
+function transformComponent(
+  component: VNode,
+  route: RouteLocationNormalizedLoadedGeneric,
+) {
+  // 组件视图未找到，如果有设置后备视图，则返回后备视图，如果没有，则抛出错误
+  if (!component) {
+    console.error(
+      'Component view not found，please check the route configuration',
+    );
+    return undefined;
+  }
+
+  const routeName = route.name as string;
+  // 如果组件没有 name，则直接返回
+  if (!routeName) {
+    return component;
+  }
+  const componentName = (component?.type as any)?.name;
+
+  // 已经设置过 name，则直接返回
+  if (componentName) {
+    return component;
+  }
+
+  // componentName 与 routeName 一致，则直接返回
+  if (componentName === routeName) {
+    return component;
+  }
+
+  // 设置 name
+  component.type ||= {};
+  (component.type as any).name = routeName;
+
+  return component;
+}
+</script>
+
+<template>
+  <div class="relative h-full">
+    <IFrameRouterView />
+    <RouterView v-slot="{ Component, route }">
+      <Transition
+        v-if="getEnabledTransition"
+        :name="getTransitionName(route)"
+        appear
+        mode="out-in"
+      >
+        <KeepAlive
+          v-if="keepAlive"
+          :exclude="getExcludeCachedTabs"
+          :include="getCachedTabs"
+        >
+          <component
+            :is="transformComponent(Component, route)"
+            v-if="renderRouteView"
+            v-show="!route.meta.iframeSrc"
+            :key="getTabKey(route)"
+          />
+        </KeepAlive>
+        <component
+          :is="Component"
+          v-else-if="renderRouteView"
+          :key="getTabKey(route)"
+        />
+      </Transition>
+      <template v-else>
+        <KeepAlive
+          v-if="keepAlive"
+          :exclude="getExcludeCachedTabs"
+          :include="getCachedTabs"
+        >
+          <component
+            :is="transformComponent(Component, route)"
+            v-if="renderRouteView"
+            v-show="!route.meta.iframeSrc"
+            :key="getTabKey(route)"
+          />
+        </KeepAlive>
+        <component
+          :is="Component"
+          v-else-if="renderRouteView"
+          :key="getTabKey(route)"
+        />
+      </template>
+    </RouterView>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/content/index.ts b/admin-ui/vue/packages/effects/layouts/src/basic/content/index.ts
new file mode 100644
index 0000000..8372b20
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/content/index.ts
@@ -0,0 +1,2 @@
+export { default as LayoutContentSpinner } from './content-spinner.vue';
+export { default as LayoutContent } from './content.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/content/use-content-spinner.ts b/admin-ui/vue/packages/effects/layouts/src/basic/content/use-content-spinner.ts
new file mode 100644
index 0000000..dfe3c53
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/content/use-content-spinner.ts
@@ -0,0 +1,50 @@
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { preferences } from '@vben/preferences';
+
+function useContentSpinner() {
+  const spinning = ref(false);
+  const startTime = ref(0);
+  const router = useRouter();
+  const minShowTime = 500; // 最小显示时间
+  const enableLoading = computed(() => preferences.transition.loading);
+
+  // 结束加载动画
+  const onEnd = () => {
+    if (!enableLoading.value) {
+      return;
+    }
+    const processTime = performance.now() - startTime.value;
+    if (processTime < minShowTime) {
+      setTimeout(() => {
+        spinning.value = false;
+      }, minShowTime - processTime);
+    } else {
+      spinning.value = false;
+    }
+  };
+
+  // 路由前置守卫
+  router.beforeEach((to) => {
+    if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
+      return true;
+    }
+    startTime.value = performance.now();
+    spinning.value = true;
+    return true;
+  });
+
+  // 路由后置守卫
+  router.afterEach((to) => {
+    if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
+      return true;
+    }
+    onEnd();
+    return true;
+  });
+
+  return { spinning };
+}
+
+export { useContentSpinner };
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/copyright/copyright.vue b/admin-ui/vue/packages/effects/layouts/src/basic/copyright/copyright.vue
new file mode 100644
index 0000000..de49c7c
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/copyright/copyright.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+interface Props {
+  companyName?: string;
+  companySiteLink?: string;
+  date?: string;
+  icp?: string;
+  icpLink?: string;
+}
+
+defineOptions({
+  name: 'Copyright',
+});
+
+withDefaults(defineProps<Props>(), {
+  companyName: 'Vben Admin',
+  companySiteLink: '',
+  date: '2024',
+  icp: '',
+  icpLink: '',
+});
+</script>
+
+<template>
+  <div class="text-md flex-center">
+    <!-- ICP Link -->
+    <a
+      v-if="icp"
+      :href="icpLink || 'javascript:void(0)'"
+      class="hover:text-primary-hover mx-1"
+      target="_blank"
+    >
+      {{ icp }}
+    </a>
+
+    <!-- Copyright Text -->
+    Copyright © {{ date }}
+
+    <!-- Company Link -->
+    <a
+      v-if="companyName"
+      :href="companySiteLink || 'javascript:void(0)'"
+      class="hover:text-primary-hover mx-1"
+      target="_blank"
+    >
+      {{ companyName }}
+    </a>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/copyright/index.ts b/admin-ui/vue/packages/effects/layouts/src/basic/copyright/index.ts
new file mode 100644
index 0000000..e0620da
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/copyright/index.ts
@@ -0,0 +1 @@
+export { default as Copyright } from './copyright.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/footer/footer.vue b/admin-ui/vue/packages/effects/layouts/src/basic/footer/footer.vue
new file mode 100644
index 0000000..6fc256d
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/footer/footer.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'LayoutFooter',
+});
+</script>
+
+<template>
+  <div class="flex-center text-muted-foreground relative h-full w-full text-xs">
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/footer/index.ts b/admin-ui/vue/packages/effects/layouts/src/basic/footer/index.ts
new file mode 100644
index 0000000..7e149a2
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/footer/index.ts
@@ -0,0 +1 @@
+export { default as LayoutFooter } from './footer.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/header/header.vue b/admin-ui/vue/packages/effects/layouts/src/basic/header/header.vue
new file mode 100644
index 0000000..44ec671
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/header/header.vue
@@ -0,0 +1,195 @@
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue';
+
+import { useRefresh } from '@vben/hooks';
+import { RotateCw } from '@vben/icons';
+import { preferences, usePreferences } from '@vben/preferences';
+import { useAccessStore } from '@vben/stores';
+
+import { VbenFullScreen, VbenIconButton } from '@vben-core/shadcn-ui';
+
+import {
+  GlobalSearch,
+  LanguageToggle,
+  PreferencesButton,
+  ThemeToggle,
+  TimezoneButton,
+} from '../../widgets';
+
+interface Props {
+  /**
+   * Logo 主题
+   */
+  theme?: string;
+}
+
+defineOptions({
+  name: 'LayoutHeader',
+});
+
+withDefaults(defineProps<Props>(), {
+  theme: 'light',
+});
+
+const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
+
+const REFERENCE_VALUE = 50;
+
+const accessStore = useAccessStore();
+const { globalSearchShortcutKey, preferencesButtonPosition } = usePreferences();
+const slots = useSlots();
+const { refresh } = useRefresh();
+
+const rightSlots = computed(() => {
+  const list = [{ index: REFERENCE_VALUE + 100, name: 'user-dropdown' }];
+  if (preferences.widget.globalSearch) {
+    list.push({
+      index: REFERENCE_VALUE,
+      name: 'global-search',
+    });
+  }
+
+  if (preferencesButtonPosition.value.header) {
+    list.push({
+      index: REFERENCE_VALUE + 10,
+      name: 'preferences',
+    });
+  }
+  if (preferences.widget.themeToggle) {
+    list.push({
+      index: REFERENCE_VALUE + 20,
+      name: 'theme-toggle',
+    });
+  }
+  if (preferences.widget.languageToggle) {
+    list.push({
+      index: REFERENCE_VALUE + 30,
+      name: 'language-toggle',
+    });
+  }
+  if (preferences.widget.timezone) {
+    list.push({
+      index: REFERENCE_VALUE + 40,
+      name: 'timezone',
+    });
+  }
+  if (preferences.widget.fullscreen) {
+    list.push({
+      index: REFERENCE_VALUE + 50,
+      name: 'fullscreen',
+    });
+  }
+  if (preferences.widget.notification) {
+    list.push({
+      index: REFERENCE_VALUE + 60,
+      name: 'notification',
+    });
+  }
+
+  Object.keys(slots).forEach((key) => {
+    const name = key.split('-');
+    if (key.startsWith('header-right')) {
+      list.push({ index: Number(name[2]), name: key });
+    }
+  });
+  return list.toSorted((a, b) => a.index - b.index);
+});
+
+const leftSlots = computed(() => {
+  const list: Array<{ index: number; name: string }> = [];
+
+  if (preferences.widget.refresh) {
+    list.push({
+      index: 0,
+      name: 'refresh',
+    });
+  }
+
+  Object.keys(slots).forEach((key) => {
+    const name = key.split('-');
+    if (key.startsWith('header-left')) {
+      list.push({ index: Number(name[2]), name: key });
+    }
+  });
+  return list.toSorted((a, b) => a.index - b.index);
+});
+
+function clearPreferencesAndLogout() {
+  emit('clearPreferencesAndLogout');
+}
+</script>
+
+<template>
+  <template
+    v-for="slot in leftSlots.filter((item) => item.index < REFERENCE_VALUE)"
+    :key="slot.name"
+  >
+    <slot :name="slot.name">
+      <template v-if="slot.name === 'refresh'">
+        <VbenIconButton class="my-0 mr-1 rounded-md" @click="refresh">
+          <RotateCw class="size-4" />
+        </VbenIconButton>
+      </template>
+    </slot>
+  </template>
+  <div class="flex-center hidden lg:block">
+    <slot name="breadcrumb"></slot>
+  </div>
+  <template
+    v-for="slot in leftSlots.filter((item) => item.index > REFERENCE_VALUE)"
+    :key="slot.name"
+  >
+    <slot :name="slot.name"></slot>
+  </template>
+  <div
+    :class="`menu-align-${preferences.header.menuAlign}`"
+    class="flex h-full min-w-0 flex-1 items-center"
+  >
+    <slot name="menu"></slot>
+  </div>
+  <div class="flex h-full min-w-0 flex-shrink-0 items-center">
+    <template v-for="slot in rightSlots" :key="slot.name">
+      <slot :name="slot.name">
+        <template v-if="slot.name === 'global-search'">
+          <GlobalSearch
+            :enable-shortcut-key="globalSearchShortcutKey"
+            :menus="accessStore.accessMenus"
+            class="mr-1 sm:mr-4"
+          />
+        </template>
+
+        <template v-else-if="slot.name === 'preferences'">
+          <PreferencesButton
+            class="mr-1"
+            @clear-preferences-and-logout="clearPreferencesAndLogout"
+          />
+        </template>
+        <template v-else-if="slot.name === 'theme-toggle'">
+          <ThemeToggle class="mr-1 mt-[2px]" />
+        </template>
+        <template v-else-if="slot.name === 'language-toggle'">
+          <LanguageToggle class="mr-1" />
+        </template>
+        <template v-else-if="slot.name === 'fullscreen'">
+          <VbenFullScreen class="mr-1" />
+        </template>
+        <template v-else-if="slot.name === 'timezone'">
+          <TimezoneButton class="mr-1 mt-[2px]" />
+        </template>
+      </slot>
+    </template>
+  </div>
+</template>
+<style lang="scss" scoped>
+.menu-align-start {
+  --menu-align: start;
+}
+
+.menu-align-center {
+  --menu-align: center;
+}
+
+.menu-align-end {
+  --menu-align: end;
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/header/index.ts b/admin-ui/vue/packages/effects/layouts/src/basic/header/index.ts
new file mode 100644
index 0000000..44f0729
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/header/index.ts
@@ -0,0 +1 @@
+export { default as LayoutHeader } from './header.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/index.ts b/admin-ui/vue/packages/effects/layouts/src/basic/index.ts
new file mode 100644
index 0000000..b3a01cd
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/index.ts
@@ -0,0 +1 @@
+export { default as BasicLayout } from './layout.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/layout.vue b/admin-ui/vue/packages/effects/layouts/src/basic/layout.vue
new file mode 100644
index 0000000..605f3cf
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/layout.vue
@@ -0,0 +1,412 @@
+<script lang="ts" setup>
+import type { SetupContext } from 'vue';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+
+import type { MenuRecordRaw } from '@vben/types';
+
+import { computed, onMounted, useSlots, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { useRefresh } from '@vben/hooks';
+import { $t, i18n } from '@vben/locales';
+import {
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@vben/preferences';
+import { useAccessStore } from '@vben/stores';
+import { cloneDeep, mapTree } from '@vben/utils';
+
+import { VbenAdminLayout } from '@vben-core/layout-ui';
+import { VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
+
+import { Breadcrumb, CheckUpdates, Preferences } from '../widgets';
+import { LayoutContent, LayoutContentSpinner } from './content';
+import { Copyright } from './copyright';
+import { LayoutFooter } from './footer';
+import { LayoutHeader } from './header';
+import {
+  LayoutExtraMenu,
+  LayoutMenu,
+  LayoutMixedMenu,
+  useExtraMenu,
+  useMixedMenu,
+} from './menu';
+import { LayoutTabbar } from './tabbar';
+
+defineOptions({ name: 'BasicLayout' });
+
+const emit = defineEmits<{ clearPreferencesAndLogout: []; clickLogo: [] }>();
+
+const {
+  isDark,
+  isHeaderNav,
+  isMixedNav,
+  isMobile,
+  isSideMixedNav,
+  isHeaderMixedNav,
+  isHeaderSidebarNav,
+  layout,
+  preferencesButtonPosition,
+  sidebarCollapsed,
+  theme,
+} = usePreferences();
+const accessStore = useAccessStore();
+const { refresh } = useRefresh();
+
+const sidebarTheme = computed(() => {
+  const dark = isDark.value || preferences.theme.semiDarkSidebar;
+  return dark ? 'dark' : 'light';
+});
+
+const headerTheme = computed(() => {
+  const dark = isDark.value || preferences.theme.semiDarkHeader;
+  return dark ? 'dark' : 'light';
+});
+
+const logoClass = computed(() => {
+  const { collapsedShowTitle } = preferences.sidebar;
+  const classes: string[] = [];
+
+  if (collapsedShowTitle && sidebarCollapsed.value && !isMixedNav.value) {
+    classes.push('mx-auto');
+  }
+
+  if (isSideMixedNav.value) {
+    classes.push('flex-center');
+  }
+
+  return classes.join(' ');
+});
+
+const isMenuRounded = computed(() => {
+  return preferences.navigation.styleType === 'rounded';
+});
+
+const logoCollapsed = computed(() => {
+  if (isMobile.value && sidebarCollapsed.value) {
+    return true;
+  }
+  if (isHeaderNav.value || isMixedNav.value || isHeaderSidebarNav.value) {
+    return false;
+  }
+  return (
+    sidebarCollapsed.value || isSideMixedNav.value || isHeaderMixedNav.value
+  );
+});
+
+const showHeaderNav = computed(() => {
+  return (
+    !isMobile.value &&
+    (isHeaderNav.value || isMixedNav.value || isHeaderMixedNav.value)
+  );
+});
+
+const {
+  handleMenuSelect,
+  handleMenuOpen,
+  headerActive,
+  headerMenus,
+  sidebarActive,
+  sidebarMenus,
+  mixHeaderMenus,
+  sidebarVisible,
+} = useMixedMenu();
+
+// 侧边多列菜单
+const {
+  extraActiveMenu,
+  extraMenus,
+  handleDefaultSelect,
+  handleMenuMouseEnter,
+  handleMixedMenuSelect,
+  handleSideMouseLeave,
+  sidebarExtraVisible,
+} = useExtraMenu(mixHeaderMenus);
+
+/**
+ * 包装菜单，翻译菜单名称
+ * @param menus 原始菜单数据
+ * @param deep 是否深度包装。对于双列布局，只需要包装第一层，因为更深层的数据会在扩展菜单中重新包装
+ */
+function wrapperMenus(menus: MenuRecordRaw[], deep: boolean = true) {
+  return deep
+    ? mapTree(menus, (item) => {
+        return { ...cloneDeep(item), name: $t(item.name) };
+      })
+    : menus.map((item) => {
+        return { ...cloneDeep(item), name: $t(item.name) };
+      });
+}
+
+function toggleSidebar() {
+  updatePreferences({
+    sidebar: {
+      hidden: !preferences.sidebar.hidden,
+    },
+  });
+}
+
+function clearPreferencesAndLogout() {
+  emit('clearPreferencesAndLogout');
+}
+
+function clickLogo() {
+  emit('clickLogo');
+}
+
+function autoCollapseMenuByRouteMeta(route: RouteLocationNormalizedLoaded) {
+  // 只在双列模式下生效
+  if (
+    ['header-mixed-nav', 'sidebar-mixed-nav'].includes(
+      preferences.app.layout,
+    ) &&
+    route.meta &&
+    route.meta.hideInMenu
+  ) {
+    sidebarExtraVisible.value = false;
+  }
+}
+
+const route = useRoute();
+
+onMounted(() => {
+  autoCollapseMenuByRouteMeta(route);
+});
+
+watch(
+  () => preferences.app.layout,
+  async (val) => {
+    if (val === 'sidebar-mixed-nav' && preferences.sidebar.hidden) {
+      updatePreferences({
+        sidebar: {
+          hidden: false,
+        },
+      });
+    }
+  },
+);
+
+// 语言更新后，刷新页面
+// i18n.global.locale会在preference.app.locale变更之后才会更新，因此watchpreference.app.locale是不合适的，刷新页面时可能语言配置尚未完全加载完成
+watch(i18n.global.locale, refresh, { flush: 'post' });
+
+const slots: SetupContext['slots'] = useSlots();
+const headerSlots = computed(() => {
+  return Object.keys(slots).filter((key) => key.startsWith('header-'));
+});
+</script>
+
+<template>
+  <VbenAdminLayout
+    v-model:sidebar-extra-visible="sidebarExtraVisible"
+    :content-compact="preferences.app.contentCompact"
+    :content-compact-width="preferences.app.contentCompactWidth"
+    :content-padding="preferences.app.contentPadding"
+    :content-padding-bottom="preferences.app.contentPaddingBottom"
+    :content-padding-left="preferences.app.contentPaddingLeft"
+    :content-padding-right="preferences.app.contentPaddingRight"
+    :content-padding-top="preferences.app.contentPaddingTop"
+    :footer-enable="preferences.footer.enable"
+    :footer-fixed="preferences.footer.fixed"
+    :footer-height="preferences.footer.height"
+    :header-height="preferences.header.height"
+    :header-hidden="preferences.header.hidden"
+    :header-mode="preferences.header.mode"
+    :header-theme="headerTheme"
+    :header-toggle-sidebar-button="preferences.widget.sidebarToggle"
+    :header-visible="preferences.header.enable"
+    :is-mobile="preferences.app.isMobile"
+    :layout="layout"
+    :sidebar-collapse="preferences.sidebar.collapsed"
+    :sidebar-collapse-show-title="preferences.sidebar.collapsedShowTitle"
+    :sidebar-enable="sidebarVisible"
+    :sidebar-collapsed-button="preferences.sidebar.collapsedButton"
+    :sidebar-fixed-button="preferences.sidebar.fixedButton"
+    :sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
+    :sidebar-extra-collapse="preferences.sidebar.extraCollapse"
+    :sidebar-extra-collapsed-width="preferences.sidebar.extraCollapsedWidth"
+    :sidebar-hidden="preferences.sidebar.hidden"
+    :sidebar-mixed-width="preferences.sidebar.mixedWidth"
+    :sidebar-theme="sidebarTheme"
+    :sidebar-width="preferences.sidebar.width"
+    :side-collapse-width="preferences.sidebar.collapseWidth"
+    :tabbar-enable="preferences.tabbar.enable"
+    :tabbar-height="preferences.tabbar.height"
+    :z-index="preferences.app.zIndex"
+    @side-mouse-leave="handleSideMouseLeave"
+    @toggle-sidebar="toggleSidebar"
+    @update:sidebar-collapse="
+      (value: boolean) => updatePreferences({ sidebar: { collapsed: value } })
+    "
+    @update:sidebar-enable="
+      (value: boolean) => updatePreferences({ sidebar: { enable: value } })
+    "
+    @update:sidebar-expand-on-hover="
+      (value: boolean) =>
+        updatePreferences({ sidebar: { expandOnHover: value } })
+    "
+    @update:sidebar-extra-collapse="
+      (value: boolean) =>
+        updatePreferences({ sidebar: { extraCollapse: value } })
+    "
+  >
+    <!-- logo -->
+    <template #logo>
+      <VbenLogo
+        v-if="preferences.logo.enable"
+        :fit="preferences.logo.fit"
+        :class="logoClass"
+        :collapsed="logoCollapsed"
+        :src="preferences.logo.source"
+        :src-dark="preferences.logo.sourceDark"
+        :text="preferences.app.name"
+        :theme="showHeaderNav ? headerTheme : theme"
+        @click="clickLogo"
+      >
+        <template v-if="$slots['logo-text']" #text>
+          <slot name="logo-text"></slot>
+        </template>
+      </VbenLogo>
+    </template>
+    <!-- 头部区域 -->
+    <template #header>
+      <LayoutHeader
+        :theme="theme"
+        @clear-preferences-and-logout="clearPreferencesAndLogout"
+      >
+        <template
+          v-if="!showHeaderNav && preferences.breadcrumb.enable"
+          #breadcrumb
+        >
+          <Breadcrumb
+            :hide-when-only-one="preferences.breadcrumb.hideOnlyOne"
+            :show-home="preferences.breadcrumb.showHome"
+            :show-icon="preferences.breadcrumb.showIcon"
+            :type="preferences.breadcrumb.styleType"
+          />
+        </template>
+        <template v-if="showHeaderNav" #menu>
+          <LayoutMenu
+            :default-active="headerActive"
+            :menus="wrapperMenus(headerMenus)"
+            :rounded="isMenuRounded"
+            :theme="headerTheme"
+            class="w-full"
+            mode="horizontal"
+            @select="handleMenuSelect"
+          />
+        </template>
+        <template #user-dropdown>
+          <slot name="user-dropdown"></slot>
+        </template>
+        <template #notification>
+          <slot name="notification"></slot>
+        </template>
+        <template #timezone>
+          <slot name="timezone"></slot>
+        </template>
+        <template v-for="item in headerSlots" #[item]>
+          <slot :name="item"></slot>
+        </template>
+      </LayoutHeader>
+    </template>
+    <!-- 侧边菜单区域 -->
+    <template #menu>
+      <LayoutMenu
+        :accordion="preferences.navigation.accordion"
+        :collapse="preferences.sidebar.collapsed"
+        :collapse-show-title="preferences.sidebar.collapsedShowTitle"
+        :default-active="sidebarActive"
+        :menus="wrapperMenus(sidebarMenus)"
+        :rounded="isMenuRounded"
+        :theme="sidebarTheme"
+        mode="vertical"
+        @open="handleMenuOpen"
+        @select="handleMenuSelect"
+      />
+    </template>
+    <template #mixed-menu>
+      <LayoutMixedMenu
+        :active-path="extraActiveMenu"
+        :menus="wrapperMenus(mixHeaderMenus, false)"
+        :rounded="isMenuRounded"
+        :theme="sidebarTheme"
+        @default-select="handleDefaultSelect"
+        @enter="handleMenuMouseEnter"
+        @select="handleMixedMenuSelect"
+      />
+    </template>
+    <!-- 侧边额外区域 -->
+    <template #side-extra>
+      <LayoutExtraMenu
+        :accordion="preferences.navigation.accordion"
+        :collapse="preferences.sidebar.extraCollapse"
+        :menus="wrapperMenus(extraMenus)"
+        :rounded="isMenuRounded"
+        :theme="sidebarTheme"
+      />
+    </template>
+    <template #side-extra-title>
+      <VbenLogo
+        v-if="preferences.logo.enable"
+        :fit="preferences.logo.fit"
+        :src="preferences.logo.source"
+        :src-dark="preferences.logo.sourceDark"
+        :text="preferences.app.name"
+        :theme="theme"
+      >
+        <template v-if="$slots['logo-text']" #text>
+          <slot name="logo-text"></slot>
+        </template>
+      </VbenLogo>
+    </template>
+
+    <template #tabbar>
+      <LayoutTabbar
+        v-if="preferences.tabbar.enable"
+        :show-icon="preferences.tabbar.showIcon"
+        :theme="theme"
+      />
+    </template>
+
+    <!-- 主体内容 -->
+    <template #content>
+      <LayoutContent />
+    </template>
+
+    <template v-if="preferences.transition.loading" #content-overlay>
+      <LayoutContentSpinner />
+    </template>
+
+    <!-- 页脚 -->
+    <template v-if="preferences.footer.enable" #footer>
+      <LayoutFooter>
+        <Copyright
+          v-if="preferences.copyright.enable"
+          v-bind="preferences.copyright"
+        />
+      </LayoutFooter>
+    </template>
+
+    <template #extra>
+      <slot name="extra"></slot>
+      <CheckUpdates
+        v-if="preferences.app.enableCheckUpdates"
+        :check-updates-interval="preferences.app.checkUpdatesInterval"
+      />
+
+      <Transition v-if="preferences.widget.lockScreen" name="slide-up">
+        <slot v-if="accessStore.isLockScreen" name="lock-screen"></slot>
+      </Transition>
+
+      <template v-if="preferencesButtonPosition.fixed">
+        <Preferences
+          class="z-100 fixed bottom-20 right-0"
+          @clear-preferences-and-logout="clearPreferencesAndLogout"
+        />
+      </template>
+      <VbenBackTop />
+    </template>
+  </VbenAdminLayout>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/menu/extra-menu.vue b/admin-ui/vue/packages/effects/layouts/src/basic/menu/extra-menu.vue
new file mode 100644
index 0000000..5f194a7
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/menu/extra-menu.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@vben/types';
+
+import type { MenuProps } from '@vben-core/menu-ui';
+
+import { useRoute } from 'vue-router';
+
+import { Menu } from '@vben-core/menu-ui';
+
+import { useNavigation } from './use-navigation';
+
+interface Props extends MenuProps {
+  collapse?: boolean;
+  menus?: MenuRecordRaw[];
+}
+
+withDefaults(defineProps<Props>(), {
+  accordion: true,
+  menus: () => [],
+});
+
+const route = useRoute();
+const { navigation } = useNavigation();
+
+async function handleSelect(key: string) {
+  await navigation(key);
+}
+</script>
+
+<template>
+  <Menu
+    :accordion="accordion"
+    :collapse="collapse"
+    :default-active="route.meta?.activePath || route.path"
+    :menus="menus"
+    :rounded="rounded"
+    :theme="theme"
+    mode="vertical"
+    @select="handleSelect"
+  />
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/menu/index.ts b/admin-ui/vue/packages/effects/layouts/src/basic/menu/index.ts
new file mode 100644
index 0000000..72b87ad
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/menu/index.ts
@@ -0,0 +1,5 @@
+export { default as LayoutExtraMenu } from './extra-menu.vue';
+export { default as LayoutMenu } from './menu.vue';
+export { default as LayoutMixedMenu } from './mixed-menu.vue';
+export * from './use-extra-menu';
+export * from './use-mixed-menu';
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/menu/menu.vue b/admin-ui/vue/packages/effects/layouts/src/basic/menu/menu.vue
new file mode 100644
index 0000000..cbb5cfb
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/menu/menu.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@vben/types';
+
+import type { MenuProps } from '@vben-core/menu-ui';
+
+import { Menu } from '@vben-core/menu-ui';
+
+interface Props extends MenuProps {
+  menus?: MenuRecordRaw[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  accordion: true,
+  menus: () => [],
+});
+
+const emit = defineEmits<{
+  open: [string, string[]];
+  select: [string, string?];
+}>();
+
+function handleMenuSelect(key: string) {
+  emit('select', key, props.mode);
+}
+
+function handleMenuOpen(key: string, path: string[]) {
+  emit('open', key, path);
+}
+</script>
+
+<template>
+  <Menu
+    :accordion="accordion"
+    :collapse="collapse"
+    :collapse-show-title="collapseShowTitle"
+    :default-active="defaultActive"
+    :menus="menus"
+    :mode="mode"
+    :rounded="rounded"
+    scroll-to-active
+    :theme="theme"
+    @open="handleMenuOpen"
+    @select="handleMenuSelect"
+  />
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/menu/mixed-menu.vue b/admin-ui/vue/packages/effects/layouts/src/basic/menu/mixed-menu.vue
new file mode 100644
index 0000000..ae12cc9
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/menu/mixed-menu.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import type { MenuRecordRaw } from '@vben/types';
+
+import type { NormalMenuProps } from '@vben-core/menu-ui';
+
+import { onBeforeMount } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { findMenuByPath } from '@vben/utils';
+
+import { NormalMenu } from '@vben-core/menu-ui';
+
+interface Props extends NormalMenuProps {}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  defaultSelect: [MenuRecordRaw, MenuRecordRaw?];
+  enter: [MenuRecordRaw];
+  select: [MenuRecordRaw];
+}>();
+
+const route = useRoute();
+
+onBeforeMount(() => {
+  const menu = findMenuByPath(props.menus || [], route.path);
+  if (menu) {
+    const rootMenu = (props.menus || []).find(
+      (item) => item.path === menu.parents?.[0],
+    );
+    emit('defaultSelect', menu, rootMenu);
+  }
+});
+</script>
+
+<template>
+  <NormalMenu
+    :active-path="activePath"
+    :collapse="collapse"
+    :menus="menus"
+    :rounded="rounded"
+    :theme="theme"
+    @enter="(menu) => emit('enter', menu)"
+    @select="(menu) => emit('select', menu)"
+  />
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/menu/use-extra-menu.ts b/admin-ui/vue/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
new file mode 100644
index 0000000..e2afb74
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
@@ -0,0 +1,133 @@
+import type { ComputedRef } from 'vue';
+
+import type { MenuRecordRaw } from '@vben/types';
+
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { preferences } from '@vben/preferences';
+import { useAccessStore } from '@vben/stores';
+import { findRootMenuByPath } from '@vben/utils';
+
+import { useNavigation } from './use-navigation';
+
+function useExtraMenu(useRootMenus?: ComputedRef<MenuRecordRaw[]>) {
+  const accessStore = useAccessStore();
+  const { navigation, willOpenedByWindow } = useNavigation();
+
+  const menus = computed(() => useRootMenus?.value ?? accessStore.accessMenus);
+
+  /** 记录当前顶级菜单下哪个子菜单最后激活 */
+  const defaultSubMap = new Map<string, string>();
+  const extraRootMenus = ref<MenuRecordRaw[]>([]);
+  const route = useRoute();
+  const extraMenus = ref<MenuRecordRaw[]>([]);
+  const sidebarExtraVisible = ref<boolean>(false);
+  const extraActiveMenu = ref('');
+  const parentLevel = computed(() =>
+    preferences.app.layout === 'header-mixed-nav' ? 1 : 0,
+  );
+
+  /**
+   * 选择混合菜单事件
+   * @param menu
+   */
+  const handleMixedMenuSelect = async (menu: MenuRecordRaw) => {
+    const _extraMenus = menu?.children ?? [];
+    const hasChildren = _extraMenus.length > 0;
+
+    if (!willOpenedByWindow(menu.path)) {
+      extraMenus.value = _extraMenus ?? [];
+      extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
+      sidebarExtraVisible.value = hasChildren;
+    }
+
+    if (!hasChildren) {
+      await navigation(menu.path);
+    } else if (preferences.sidebar.autoActivateChild) {
+      await navigation(
+        defaultSubMap.has(menu.path)
+          ? (defaultSubMap.get(menu.path) as string)
+          : menu.path,
+      );
+    }
+  };
+
+  /**
+   * 选择默认菜单事件
+   * @param menu
+   * @param rootMenu
+   */
+  const handleDefaultSelect = async (
+    menu: MenuRecordRaw,
+    rootMenu?: MenuRecordRaw,
+  ) => {
+    extraMenus.value = rootMenu?.children ?? extraRootMenus.value ?? [];
+    extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
+
+    if (preferences.sidebar.expandOnHover) {
+      sidebarExtraVisible.value = extraMenus.value.length > 0;
+    }
+  };
+
+  /**
+   * 侧边菜单鼠标移出事件
+   */
+  const handleSideMouseLeave = () => {
+    if (preferences.sidebar.expandOnHover) {
+      return;
+    }
+
+    const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
+      menus.value,
+      route.path,
+    );
+    extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
+    extraMenus.value = rootMenu?.children ?? [];
+  };
+
+  const handleMenuMouseEnter = (menu: MenuRecordRaw) => {
+    if (!preferences.sidebar.expandOnHover) {
+      const { findMenu } = findRootMenuByPath(menus.value, menu.path);
+      extraMenus.value = findMenu?.children ?? [];
+      extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
+      sidebarExtraVisible.value = extraMenus.value.length > 0;
+    }
+  };
+
+  function calcExtraMenus(path: string) {
+    const currentPath = route.meta?.activePath || path;
+    const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
+      menus.value,
+      currentPath,
+      parentLevel.value,
+    );
+    extraRootMenus.value = rootMenu?.children ?? [];
+    if (rootMenuPath) defaultSubMap.set(rootMenuPath, currentPath);
+    extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
+    extraMenus.value = rootMenu?.children ?? [];
+    if (preferences.sidebar.expandOnHover) {
+      sidebarExtraVisible.value = extraMenus.value.length > 0;
+    }
+  }
+
+  watch(
+    () => [route.path, preferences.app.layout],
+    ([path]) => {
+      calcExtraMenus(path || '');
+    },
+    { immediate: true },
+  );
+
+  return {
+    extraActiveMenu,
+    extraMenus,
+    handleDefaultSelect,
+    handleMenuMouseEnter,
+    handleMixedMenuSelect,
+    handleSideMouseLeave,
+    sidebarExtraVisible,
+  };
+}
+
+export { useExtraMenu };
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts b/admin-ui/vue/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
new file mode 100644
index 0000000..8424c38
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
@@ -0,0 +1,172 @@
+import type { MenuRecordRaw } from '@vben/types';
+
+import { computed, onBeforeMount, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { preferences, usePreferences } from '@vben/preferences';
+import { useAccessStore } from '@vben/stores';
+import { findRootMenuByPath } from '@vben/utils';
+
+import { useNavigation } from './use-navigation';
+
+function useMixedMenu() {
+  const { navigation, willOpenedByWindow } = useNavigation();
+  const accessStore = useAccessStore();
+  const route = useRoute();
+  const splitSideMenus = ref<MenuRecordRaw[]>([]);
+  const rootMenuPath = ref<string>('');
+  const mixedRootMenuPath = ref<string>('');
+  const mixExtraMenus = ref<MenuRecordRaw[]>([]);
+  /** 记录当前顶级菜单下哪个子菜单最后激活 */
+  const defaultSubMap = new Map<string, string>();
+  const { isMixedNav, isHeaderMixedNav } = usePreferences();
+
+  const needSplit = computed(
+    () =>
+      (preferences.navigation.split && isMixedNav.value) ||
+      isHeaderMixedNav.value,
+  );
+
+  const sidebarVisible = computed(() => {
+    const enableSidebar = preferences.sidebar.enable;
+    if (needSplit.value) {
+      return enableSidebar && splitSideMenus.value.length > 0;
+    }
+    return enableSidebar;
+  });
+  const menus = computed(() => accessStore.accessMenus);
+
+  /**
+   * 头部菜单
+   */
+  const headerMenus = computed(() => {
+    if (!needSplit.value) {
+      return menus.value;
+    }
+    return menus.value.map((item) => {
+      return {
+        ...item,
+        children: [],
+      };
+    });
+  });
+
+  /**
+   * 侧边菜单
+   */
+  const sidebarMenus = computed(() => {
+    return needSplit.value ? splitSideMenus.value : menus.value;
+  });
+
+  const mixHeaderMenus = computed(() => {
+    return isHeaderMixedNav.value ? sidebarMenus.value : headerMenus.value;
+  });
+
+  /**
+   * 侧边菜单激活路径
+   */
+  const sidebarActive = computed(() => {
+    return (route?.meta?.activePath as string) ?? route.path;
+  });
+
+  /**
+   * 头部菜单激活路径
+   */
+  const headerActive = computed(() => {
+    if (!needSplit.value) {
+      return route.meta?.activePath ?? route.path;
+    }
+    return rootMenuPath.value;
+  });
+
+  /**
+   * 菜单点击事件处理
+   * @param key 菜单路径
+   * @param mode 菜单模式
+   */
+  const handleMenuSelect = (key: string, mode?: string) => {
+    if (!needSplit.value || mode === 'vertical') {
+      navigation(key);
+      return;
+    }
+    const rootMenu = menus.value.find((item) => item.path === key);
+    const _splitSideMenus = rootMenu?.children ?? [];
+
+    if (!willOpenedByWindow(key)) {
+      rootMenuPath.value = rootMenu?.path ?? '';
+      splitSideMenus.value = _splitSideMenus;
+    }
+
+    if (_splitSideMenus.length === 0) {
+      navigation(key);
+    } else if (rootMenu && preferences.sidebar.autoActivateChild) {
+      navigation(
+        defaultSubMap.has(rootMenu.path)
+          ? (defaultSubMap.get(rootMenu.path) as string)
+          : rootMenu.path,
+      );
+    }
+  };
+
+  /**
+   * 侧边菜单展开事件
+   * @param key 路由路径
+   * @param parentsPath 父级路径
+   */
+  const handleMenuOpen = (key: string, parentsPath: string[]) => {
+    if (parentsPath.length <= 1 && preferences.sidebar.autoActivateChild) {
+      navigation(
+        defaultSubMap.has(key) ? (defaultSubMap.get(key) as string) : key,
+      );
+    }
+  };
+
+  /**
+   * 计算侧边菜单
+   * @param path 路由路径
+   */
+  function calcSideMenus(path: string = route.path) {
+    let { rootMenu } = findRootMenuByPath(menus.value, path);
+    if (!rootMenu) {
+      rootMenu = menus.value.find((item) => item.path === path);
+    }
+    const result = findRootMenuByPath(rootMenu?.children || [], path, 1);
+    mixedRootMenuPath.value = result.rootMenuPath ?? '';
+    mixExtraMenus.value = result.rootMenu?.children ?? [];
+    rootMenuPath.value = rootMenu?.path ?? '';
+    splitSideMenus.value = rootMenu?.children ?? [];
+  }
+
+  watch(
+    () => route.path,
+    (path) => {
+      const currentPath = route?.meta?.activePath ?? route?.meta?.link ?? path;
+      if (willOpenedByWindow(currentPath)) {
+        return;
+      }
+      calcSideMenus(currentPath);
+      if (rootMenuPath.value)
+        defaultSubMap.set(rootMenuPath.value, currentPath);
+    },
+    { immediate: true },
+  );
+
+  // 初始化计算侧边菜单
+  onBeforeMount(() => {
+    calcSideMenus(route.meta?.activePath || route.path);
+  });
+
+  return {
+    handleMenuSelect,
+    handleMenuOpen,
+    headerActive,
+    headerMenus,
+    sidebarActive,
+    sidebarMenus,
+    mixHeaderMenus,
+    mixExtraMenus,
+    sidebarVisible,
+  };
+}
+
+export { useMixedMenu };
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/menu/use-navigation.ts b/admin-ui/vue/packages/effects/layouts/src/basic/menu/use-navigation.ts
new file mode 100644
index 0000000..daa6dc7
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/menu/use-navigation.ts
@@ -0,0 +1,74 @@
+import type { RouteRecordNormalized } from 'vue-router';
+
+import { useRouter } from 'vue-router';
+
+import { isHttpUrl, openRouteInNewWindow, openWindow } from '@vben/utils';
+
+function useNavigation() {
+  const router = useRouter();
+  const routeMetaMap = new Map<string, RouteRecordNormalized>();
+
+  // 初始化路由映射
+  const initRouteMetaMap = () => {
+    const routes = router.getRoutes();
+    routes.forEach((route) => {
+      routeMetaMap.set(route.path, route);
+    });
+  };
+
+  initRouteMetaMap();
+
+  // 监听路由变化
+  router.afterEach(() => {
+    initRouteMetaMap();
+  });
+
+  // 检查是否应该在新窗口打开
+  const shouldOpenInNewWindow = (path: string): boolean => {
+    if (isHttpUrl(path)) {
+      return true;
+    }
+    const route = routeMetaMap.get(path);
+    // 如果有外链或者设置了在新窗口打开，返回 true
+    return !!(route?.meta?.link || route?.meta?.openInNewWindow);
+  };
+
+  const resolveHref = (path: string): string => {
+    return router.resolve(path).href;
+  };
+
+  const navigation = async (path: string) => {
+    try {
+      const route = routeMetaMap.get(path);
+      const { openInNewWindow = false, query = {}, link } = route?.meta ?? {};
+
+      // 检查是否有外链
+      if (link && typeof link === 'string') {
+        openWindow(link, { target: '_blank' });
+        return;
+      }
+
+      if (isHttpUrl(path)) {
+        openWindow(path, { target: '_blank' });
+      } else if (openInNewWindow) {
+        openRouteInNewWindow(resolveHref(path));
+      } else {
+        await router.push({
+          path,
+          query,
+        });
+      }
+    } catch (error) {
+      console.error('Navigation failed:', error);
+      throw error;
+    }
+  };
+
+  const willOpenedByWindow = (path: string) => {
+    return shouldOpenInNewWindow(path);
+  };
+
+  return { navigation, willOpenedByWindow };
+}
+
+export { useNavigation };
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/tabbar/index.ts b/admin-ui/vue/packages/effects/layouts/src/basic/tabbar/index.ts
new file mode 100644
index 0000000..5cc2479
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/tabbar/index.ts
@@ -0,0 +1,2 @@
+export { default as LayoutTabbar } from './tabbar.vue';
+export * from './use-tabbar';
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/tabbar/tabbar.vue b/admin-ui/vue/packages/effects/layouts/src/basic/tabbar/tabbar.vue
new file mode 100644
index 0000000..8e4f33b
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/tabbar/tabbar.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { useContentMaximize, useTabs } from '@vben/hooks';
+import { preferences } from '@vben/preferences';
+import { useTabbarStore } from '@vben/stores';
+
+import { TabsToolMore, TabsToolScreen, TabsView } from '@vben-core/tabs-ui';
+
+import { useTabbar } from './use-tabbar';
+
+defineOptions({
+  name: 'LayoutTabbar',
+});
+
+defineProps<{ showIcon?: boolean; theme?: string }>();
+
+const route = useRoute();
+const tabbarStore = useTabbarStore();
+const { contentIsMaximize, toggleMaximize } = useContentMaximize();
+const { unpinTab } = useTabs();
+
+const {
+  createContextMenus,
+  currentActive,
+  currentTabs,
+  handleClick,
+  handleClose,
+} = useTabbar();
+
+const menus = computed(() => {
+  const tab = tabbarStore.getTabByKey(currentActive.value);
+  const menus = createContextMenus(tab);
+  return menus.map((item) => {
+    return {
+      ...item,
+      label: item.text,
+      value: item.key,
+    };
+  });
+});
+
+// 刷新后如果不保持tab状态，关闭其他tab
+if (!preferences.tabbar.persist) {
+  tabbarStore.closeOtherTabs(route);
+}
+</script>
+
+<template>
+  <TabsView
+    :active="currentActive"
+    :class="theme"
+    :context-menus="createContextMenus"
+    :draggable="preferences.tabbar.draggable"
+    :show-icon="showIcon"
+    :style-type="preferences.tabbar.styleType"
+    :tabs="currentTabs"
+    :wheelable="preferences.tabbar.wheelable"
+    :middle-click-to-close="preferences.tabbar.middleClickToClose"
+    @close="handleClose"
+    @sort-tabs="tabbarStore.sortTabs"
+    @unpin="unpinTab"
+    @update:active="handleClick"
+  />
+  <div class="flex-center h-full">
+    <TabsToolMore v-if="preferences.tabbar.showMore" :menus="menus" />
+    <TabsToolScreen
+      v-if="preferences.tabbar.showMaximize"
+      :screen="contentIsMaximize"
+      @change="toggleMaximize"
+      @update:screen="toggleMaximize"
+    />
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts b/admin-ui/vue/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
new file mode 100644
index 0000000..0f0ef34
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
@@ -0,0 +1,227 @@
+import type { RouteLocationNormalizedGeneric } from 'vue-router';
+
+import type { TabDefinition } from '@vben/types';
+
+import type { IContextMenuItem } from '@vben-core/tabs-ui';
+
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useContentMaximize, useTabs } from '@vben/hooks';
+import {
+  ArrowLeftToLine,
+  ArrowRightLeft,
+  ArrowRightToLine,
+  ExternalLink,
+  FoldHorizontal,
+  Fullscreen,
+  Minimize2,
+  Pin,
+  PinOff,
+  RotateCw,
+  X,
+} from '@vben/icons';
+import { $t, useI18n } from '@vben/locales';
+import { getTabKey, useAccessStore, useTabbarStore } from '@vben/stores';
+import { filterTree } from '@vben/utils';
+
+export function useTabbar() {
+  const router = useRouter();
+  const route = useRoute();
+  const accessStore = useAccessStore();
+  const tabbarStore = useTabbarStore();
+  const { contentIsMaximize, toggleMaximize } = useContentMaximize();
+  const {
+    closeAllTabs,
+    closeCurrentTab,
+    closeLeftTabs,
+    closeOtherTabs,
+    closeRightTabs,
+    closeTabByKey,
+    getTabDisableState,
+    openTabInNewWindow,
+    refreshTab,
+    toggleTabPin,
+  } = useTabs();
+
+  /**
+   * 当前路径对应的tab的key
+   */
+  const currentActive = computed(() => {
+    return getTabKey(route);
+  });
+
+  const { locale } = useI18n();
+  const currentTabs = ref<RouteLocationNormalizedGeneric[]>();
+  watch(
+    [
+      () => tabbarStore.getTabs,
+      () => tabbarStore.updateTime,
+      () => locale.value,
+    ],
+    ([tabs]) => {
+      currentTabs.value = tabs.map((item) => wrapperTabLocale(item));
+    },
+  );
+
+  /**
+   * 初始化固定标签页
+   */
+  const initAffixTabs = () => {
+    const affixTabs = filterTree(router.getRoutes(), (route) => {
+      return !!route.meta?.affixTab;
+    });
+    tabbarStore.setAffixTabs(affixTabs);
+  };
+
+  // 点击tab,跳转路由
+  const handleClick = (key: string) => {
+    const { fullPath, path } = tabbarStore.getTabByKey(key);
+    router.push(fullPath || path);
+  };
+
+  // 关闭tab
+  const handleClose = async (key: string) => {
+    await closeTabByKey(key);
+  };
+
+  function wrapperTabLocale(tab: RouteLocationNormalizedGeneric) {
+    return {
+      ...tab,
+      meta: {
+        ...tab?.meta,
+        title: $t(tab?.meta?.title as string),
+      },
+    };
+  }
+
+  watch(
+    () => accessStore.accessMenus,
+    () => {
+      initAffixTabs();
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => route.fullPath,
+    () => {
+      const meta = route.matched?.[route.matched.length - 1]?.meta;
+      tabbarStore.addTab({
+        ...route,
+        meta: meta || route.meta,
+      });
+    },
+    { immediate: true },
+  );
+
+  const createContextMenus = (tab: TabDefinition) => {
+    const {
+      disabledCloseAll,
+      disabledCloseCurrent,
+      disabledCloseLeft,
+      disabledCloseOther,
+      disabledCloseRight,
+      disabledRefresh,
+    } = getTabDisableState(tab);
+
+    const affixTab = tab?.meta?.affixTab ?? false;
+
+    const menus: IContextMenuItem[] = [
+      {
+        disabled: disabledCloseCurrent,
+        handler: async () => {
+          await closeCurrentTab(tab);
+        },
+        icon: X,
+        key: 'close',
+        text: $t('preferences.tabbar.contextMenu.close'),
+      },
+      {
+        handler: async () => {
+          await toggleTabPin(tab);
+        },
+        icon: affixTab ? PinOff : Pin,
+        key: 'affix',
+        text: affixTab
+          ? $t('preferences.tabbar.contextMenu.unpin')
+          : $t('preferences.tabbar.contextMenu.pin'),
+      },
+      {
+        handler: async () => {
+          if (!contentIsMaximize.value) {
+            await router.push(tab.fullPath);
+          }
+          toggleMaximize();
+        },
+        icon: contentIsMaximize.value ? Minimize2 : Fullscreen,
+        key: contentIsMaximize.value ? 'restore-maximize' : 'maximize',
+        text: contentIsMaximize.value
+          ? $t('preferences.tabbar.contextMenu.restoreMaximize')
+          : $t('preferences.tabbar.contextMenu.maximize'),
+      },
+      {
+        disabled: disabledRefresh,
+        handler: () => refreshTab(),
+        icon: RotateCw,
+        key: 'reload',
+        text: $t('preferences.tabbar.contextMenu.reload'),
+      },
+      {
+        handler: async () => {
+          await openTabInNewWindow(tab);
+        },
+        icon: ExternalLink,
+        key: 'open-in-new-window',
+        separator: true,
+        text: $t('preferences.tabbar.contextMenu.openInNewWindow'),
+      },
+
+      {
+        disabled: disabledCloseLeft,
+        handler: async () => {
+          await closeLeftTabs(tab);
+        },
+        icon: ArrowLeftToLine,
+        key: 'close-left',
+        text: $t('preferences.tabbar.contextMenu.closeLeft'),
+      },
+      {
+        disabled: disabledCloseRight,
+        handler: async () => {
+          await closeRightTabs(tab);
+        },
+        icon: ArrowRightToLine,
+        key: 'close-right',
+        separator: true,
+        text: $t('preferences.tabbar.contextMenu.closeRight'),
+      },
+      {
+        disabled: disabledCloseOther,
+        handler: async () => {
+          await closeOtherTabs(tab);
+        },
+        icon: FoldHorizontal,
+        key: 'close-other',
+        text: $t('preferences.tabbar.contextMenu.closeOther'),
+      },
+      {
+        disabled: disabledCloseAll,
+        handler: closeAllTabs,
+        icon: ArrowRightLeft,
+        key: 'close-all',
+        text: $t('preferences.tabbar.contextMenu.closeAll'),
+      },
+    ];
+
+    return menus.filter((item) => tabbarStore.getMenuList.includes(item.key));
+  };
+
+  return {
+    createContextMenus,
+    currentActive,
+    currentTabs,
+    handleClick,
+    handleClose,
+  };
+}
diff --git a/admin-ui/vue/packages/effects/layouts/src/iframe/iframe-router-view.vue b/admin-ui/vue/packages/effects/layouts/src/iframe/iframe-router-view.vue
new file mode 100644
index 0000000..3f1f952
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/iframe/iframe-router-view.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { RouteLocationNormalized } from 'vue-router';
+
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { preferences } from '@vben/preferences';
+import { useTabbarStore } from '@vben/stores';
+
+import { VbenSpinner } from '@vben-core/shadcn-ui';
+
+defineOptions({ name: 'IFrameRouterView' });
+
+const spinningList = ref<boolean[]>([]);
+const tabbarStore = useTabbarStore();
+const route = useRoute();
+
+const enableTabbar = computed(() => preferences.tabbar.enable);
+
+const iframeRoutes = computed(() => {
+  if (!enableTabbar.value) {
+    return route.meta.iframeSrc ? [route] : [];
+  }
+  return tabbarStore.getTabs.filter((tab) => !!tab.meta?.iframeSrc);
+});
+
+const tabNames = computed(
+  () => new Set(iframeRoutes.value.map((item) => item.name as string)),
+);
+
+const showIframe = computed(() => iframeRoutes.value.length > 0);
+
+function routeShow(tabItem: RouteLocationNormalized) {
+  return tabItem.name === route.name;
+}
+
+function canRender(tabItem: RouteLocationNormalized) {
+  const { meta, name } = tabItem;
+
+  if (!name || !tabbarStore.renderRouteView) {
+    return false;
+  }
+
+  if (!enableTabbar.value) {
+    return routeShow(tabItem);
+  }
+
+  // 跟随 keepAlive 状态,与其他tab页保持一致
+  if (
+    !meta?.keepAlive &&
+    tabNames.value.has(name as string) &&
+    name !== route.name
+  ) {
+    return false;
+  }
+  return tabbarStore.getTabs.some((tab) => tab.name === name);
+}
+
+function hideLoading(index: number) {
+  spinningList.value[index] = false;
+}
+
+function showSpinning(index: number) {
+  const curSpinning = spinningList.value[index];
+  // 首次加载时显示loading
+  return curSpinning === undefined ? true : curSpinning;
+}
+</script>
+<template>
+  <template v-if="showIframe">
+    <template v-for="(item, index) in iframeRoutes" :key="item.fullPath">
+      <div
+        v-if="canRender(item)"
+        v-show="routeShow(item)"
+        class="relative size-full"
+      >
+        <VbenSpinner :spinning="showSpinning(index)" />
+        <iframe
+          :src="item.meta.iframeSrc as string"
+          class="size-full"
+          @load="hideLoading(index)"
+        ></iframe>
+      </div>
+    </template>
+  </template>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/iframe/iframe-view.vue b/admin-ui/vue/packages/effects/layouts/src/iframe/iframe-view.vue
new file mode 100644
index 0000000..7b8b46c
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/iframe/iframe-view.vue
@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/iframe/index.ts b/admin-ui/vue/packages/effects/layouts/src/iframe/index.ts
new file mode 100644
index 0000000..1b8c131
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/iframe/index.ts
@@ -0,0 +1,2 @@
+export { default as IFrameRouterView } from './iframe-router-view.vue';
+export { default as IFrameView } from './iframe-view.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/index.ts b/admin-ui/vue/packages/effects/layouts/src/index.ts
new file mode 100644
index 0000000..124a44a
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/index.ts
@@ -0,0 +1,4 @@
+export * from './authentication';
+export * from './basic';
+export * from './iframe';
+export * from './widgets';
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/breadcrumb.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/breadcrumb.vue
new file mode 100644
index 0000000..c041960
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/breadcrumb.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import type { BreadcrumbStyleType } from '@vben/types';
+
+import type { IBreadcrumb } from '@vben-core/shadcn-ui';
+
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+
+import { VbenBreadcrumbView } from '@vben-core/shadcn-ui';
+
+interface Props {
+  hideWhenOnlyOne?: boolean;
+  showHome?: boolean;
+  showIcon?: boolean;
+  type?: BreadcrumbStyleType;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showHome: false,
+  showIcon: false,
+  type: 'normal',
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const breadcrumbs = computed((): IBreadcrumb[] => {
+  const matched = route.matched;
+
+  const resultBreadcrumb: IBreadcrumb[] = [];
+
+  for (const match of matched) {
+    const { meta, path } = match;
+    const { hideChildrenInMenu, hideInBreadcrumb, icon, name, title } =
+      meta || {};
+    if (hideInBreadcrumb || hideChildrenInMenu || !path) {
+      continue;
+    }
+
+    resultBreadcrumb.push({
+      icon,
+      path: path || route.path,
+      title: title ? $t((title || name) as string) : '',
+    });
+  }
+  if (props.showHome) {
+    resultBreadcrumb.unshift({
+      icon: 'mdi:home-outline',
+      isHome: true,
+      path: '/',
+    });
+  }
+  if (props.hideWhenOnlyOne && resultBreadcrumb.length === 1) {
+    return [];
+  }
+
+  return resultBreadcrumb;
+});
+
+function handleSelect(path: string) {
+  router.push(path);
+}
+</script>
+<template>
+  <VbenBreadcrumbView
+    :breadcrumbs="breadcrumbs"
+    :show-icon="showIcon"
+    :style-type="type"
+    class="ml-2"
+    @select="handleSelect"
+  />
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/check-updates/check-updates.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
new file mode 100644
index 0000000..4f3082f
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { useVbenModal } from '@vben-core/popup-ui';
+
+interface Props {
+  // 轮询时间，分钟
+  checkUpdatesInterval?: number;
+  // 检查更新的地址
+  checkUpdateUrl?: string;
+}
+
+defineOptions({ name: 'CheckUpdates' });
+
+const props = withDefaults(defineProps<Props>(), {
+  checkUpdatesInterval: 1,
+  checkUpdateUrl: import.meta.env.BASE_URL || '/',
+});
+
+let isCheckingUpdates = false;
+const currentVersionTag = ref('');
+const lastVersionTag = ref('');
+const timer = ref<ReturnType<typeof setInterval>>();
+
+const [UpdateNoticeModal, modalApi] = useVbenModal({
+  closable: false,
+  closeOnPressEscape: false,
+  closeOnClickModal: false,
+  onConfirm() {
+    lastVersionTag.value = currentVersionTag.value;
+    window.location.reload();
+    // handleSubmitLogout();
+  },
+});
+
+async function getVersionTag() {
+  try {
+    if (
+      location.hostname === 'localhost' ||
+      location.hostname === '127.0.0.1'
+    ) {
+      return null;
+    }
+    const response = await fetch(props.checkUpdateUrl, {
+      cache: 'no-cache',
+      method: 'HEAD',
+      redirect: 'manual',
+    });
+
+    return (
+      response.headers.get('etag') || response.headers.get('last-modified')
+    );
+  } catch {
+    console.error('Failed to fetch version tag');
+    return null;
+  }
+}
+
+async function checkForUpdates() {
+  const versionTag = await getVersionTag();
+  if (!versionTag) {
+    return;
+  }
+
+  // 首次运行时不提示更新
+  if (!lastVersionTag.value) {
+    lastVersionTag.value = versionTag;
+    return;
+  }
+
+  if (lastVersionTag.value !== versionTag && versionTag) {
+    clearInterval(timer.value);
+    handleNotice(versionTag);
+  }
+}
+function handleNotice(versionTag: string) {
+  currentVersionTag.value = versionTag;
+  modalApi.open();
+}
+
+function start() {
+  if (props.checkUpdatesInterval <= 0) {
+    return;
+  }
+
+  // 每 checkUpdatesInterval(默认值为1) 分钟检查一次
+  timer.value = setInterval(
+    checkForUpdates,
+    props.checkUpdatesInterval * 60 * 1000,
+  );
+}
+
+function handleVisibilitychange() {
+  if (document.hidden) {
+    stop();
+  } else {
+    if (!isCheckingUpdates) {
+      isCheckingUpdates = true;
+      checkForUpdates().finally(() => {
+        isCheckingUpdates = false;
+        start();
+      });
+    }
+  }
+}
+
+function stop() {
+  clearInterval(timer.value);
+}
+
+onMounted(() => {
+  start();
+  document.addEventListener('visibilitychange', handleVisibilitychange);
+});
+
+onUnmounted(() => {
+  stop();
+  document.removeEventListener('visibilitychange', handleVisibilitychange);
+});
+</script>
+<template>
+  <UpdateNoticeModal
+    :cancel-text="$t('common.cancel')"
+    :confirm-text="$t('common.refresh')"
+    :fullscreen-button="false"
+    :title="$t('ui.widgets.checkUpdatesTitle')"
+    centered
+    content-class="px-8 min-h-10"
+    footer-class="border-none mb-3 mr-3"
+    header-class="border-none"
+  >
+    {{ $t('ui.widgets.checkUpdatesDescription') }}
+  </UpdateNoticeModal>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/check-updates/index.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/check-updates/index.ts
new file mode 100644
index 0000000..fc20c66
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/check-updates/index.ts
@@ -0,0 +1 @@
+export { default as CheckUpdates } from './check-updates.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/color-toggle.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/color-toggle.vue
new file mode 100644
index 0000000..ae15cb8
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/color-toggle.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { BuiltinThemeType } from '@vben/types';
+
+import { Palette } from '@vben/icons';
+import {
+  COLOR_PRESETS,
+  preferences,
+  updatePreferences,
+} from '@vben/preferences';
+
+import { VbenIconButton } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'AuthenticationColorToggle',
+});
+
+function handleUpdate(colorPrimary: string, type: BuiltinThemeType) {
+  updatePreferences({
+    theme: {
+      colorPrimary,
+      builtinType: type,
+    },
+  });
+}
+</script>
+
+<template>
+  <div class="group relative flex items-center overflow-hidden">
+    <div
+      class="flex w-0 overflow-hidden transition-all duration-500 ease-out group-hover:w-60"
+    >
+      <template v-for="preset in COLOR_PRESETS" :key="preset.color">
+        <VbenIconButton
+          class="flex-center flex-shrink-0"
+          @click="handleUpdate(preset.color, preset.type)"
+        >
+          <div
+            :style="{ backgroundColor: preset.color }"
+            class="flex-center relative size-5 rounded-full hover:scale-110"
+          >
+            <svg
+              v-if="preferences.theme.builtinType === preset.type"
+              class="h-3.5 w-3.5 text-white"
+              height="1em"
+              viewBox="0 0 15 15"
+              width="1em"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M11.467 3.727c.289.189.37.576.181.865l-4.25 6.5a.625.625 0 0 1-.944.12l-2.75-2.5a.625.625 0 0 1 .841-.925l2.208 2.007l3.849-5.886a.625.625 0 0 1 .865-.181"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </VbenIconButton>
+      </template>
+    </div>
+
+    <VbenIconButton>
+      <Palette class="text-primary size-4" />
+    </VbenIconButton>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/global-search/global-search.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/global-search/global-search.vue
new file mode 100644
index 0000000..bd8b334
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/global-search/global-search.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@vben/types';
+
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import {
+  ArrowDown,
+  ArrowUp,
+  CornerDownLeft,
+  MdiKeyboardEsc,
+  Search,
+} from '@vben/icons';
+import { $t } from '@vben/locales';
+import { isWindowsOs } from '@vben/utils';
+
+import { useVbenModal } from '@vben-core/popup-ui';
+
+import { useMagicKeys, whenever } from '@vueuse/core';
+
+import SearchPanel from './search-panel.vue';
+
+defineOptions({
+  name: 'GlobalSearch',
+});
+
+const props = withDefaults(
+  defineProps<{ enableShortcutKey?: boolean; menus?: MenuRecordRaw[] }>(),
+  {
+    enableShortcutKey: true,
+    menus: () => [],
+  },
+);
+
+const keyword = ref('');
+const searchInputRef = ref<HTMLInputElement>();
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      keyword.value = '';
+    }
+  },
+});
+const open = modalApi.useStore((state) => state.isOpen);
+
+function handleClose() {
+  modalApi.close();
+  keyword.value = '';
+}
+
+const keys = useMagicKeys();
+const cmd = isWindowsOs() ? keys['ctrl+k'] : keys['cmd+k'];
+whenever(cmd!, () => {
+  if (props.enableShortcutKey) {
+    modalApi.open();
+  }
+});
+
+whenever(open, () => {
+  nextTick(() => {
+    searchInputRef.value?.focus();
+  });
+});
+
+const preventDefaultBrowserSearchHotKey = (event: KeyboardEvent) => {
+  if (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault();
+  }
+};
+
+const toggleKeydownListener = () => {
+  if (props.enableShortcutKey) {
+    window.addEventListener('keydown', preventDefaultBrowserSearchHotKey);
+  } else {
+    window.removeEventListener('keydown', preventDefaultBrowserSearchHotKey);
+  }
+};
+
+const toggleOpen = () => {
+  open.value ? modalApi.close() : modalApi.open();
+};
+
+watch(() => props.enableShortcutKey, toggleKeydownListener);
+
+onMounted(() => {
+  toggleKeydownListener();
+
+  onUnmounted(() => {
+    window.removeEventListener('keydown', preventDefaultBrowserSearchHotKey);
+  });
+});
+</script>
+
+<template>
+  <div>
+    <Modal
+      :fullscreen-button="false"
+      class="w-[600px]"
+      header-class="py-2 border-b"
+    >
+      <template #title>
+        <div class="flex items-center">
+          <Search class="text-muted-foreground mr-2 size-4" />
+          <input
+            ref="searchInputRef"
+            v-model="keyword"
+            :placeholder="$t('ui.widgets.search.searchNavigate')"
+            class="ring-none placeholder:text-muted-foreground w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal outline-none ring-0 ring-offset-transparent focus-visible:ring-transparent"
+          />
+        </div>
+      </template>
+
+      <SearchPanel :keyword="keyword" :menus="menus" @close="handleClose" />
+      <template #footer>
+        <div class="flex w-full justify-start text-xs">
+          <div class="mr-2 flex items-center">
+            <CornerDownLeft class="mr-1 size-3" />
+            {{ $t('ui.widgets.search.select') }}
+          </div>
+          <div class="mr-2 flex items-center">
+            <ArrowUp class="mr-1 size-3" />
+            <ArrowDown class="mr-1 size-3" />
+            {{ $t('ui.widgets.search.navigate') }}
+          </div>
+          <div class="flex items-center">
+            <MdiKeyboardEsc class="mr-1 size-3" />
+            {{ $t('ui.widgets.search.close') }}
+          </div>
+        </div>
+      </template>
+    </Modal>
+    <div
+      class="md:bg-accent group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-none"
+      @click="toggleOpen()"
+    >
+      <Search
+        class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
+      />
+      <span
+        class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block"
+      >
+        {{ $t('ui.widgets.search.title') }}
+      </span>
+      <span
+        v-if="enableShortcutKey"
+        class="bg-background border-foreground/60 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block"
+      >
+        {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
+        <kbd>K</kbd>
+      </span>
+      <span v-else></span>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/global-search/index.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/global-search/index.ts
new file mode 100644
index 0000000..cd490ae
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/global-search/index.ts
@@ -0,0 +1 @@
+export { default as GlobalSearch } from './global-search.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/global-search/search-panel.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/global-search/search-panel.vue
new file mode 100644
index 0000000..6e94049
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/global-search/search-panel.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@vben/types';
+
+import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { SearchX, X } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { mapTree, traverseTreeValues, uniqueByField } from '@vben/utils';
+
+import { VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
+import { isHttpUrl } from '@vben-core/shared/utils';
+
+import { onKeyStroke, useLocalStorage, useThrottleFn } from '@vueuse/core';
+
+defineOptions({
+  name: 'SearchPanel',
+});
+
+const props = withDefaults(
+  defineProps<{ keyword?: string; menus?: MenuRecordRaw[] }>(),
+  {
+    keyword: '',
+    menus: () => [],
+  },
+);
+const emit = defineEmits<{ close: [] }>();
+
+const router = useRouter();
+const searchHistory = useLocalStorage<MenuRecordRaw[]>(
+  `__search-history-${location.hostname}__`,
+  [],
+);
+const activeIndex = ref(-1);
+const searchItems = shallowRef<MenuRecordRaw[]>([]);
+const searchResults = ref<MenuRecordRaw[]>([]);
+
+const handleSearch = useThrottleFn(search, 200);
+
+// 搜索函数，用于根据搜索关键词查找匹配的菜单项
+function search(searchKey: string) {
+  // 去除搜索关键词的前后空格
+  searchKey = searchKey.trim();
+
+  // 如果搜索关键词为空，清空搜索结果并返回
+  if (!searchKey) {
+    searchResults.value = [];
+    return;
+  }
+
+  // 使用搜索关键词创建正则表达式
+  const reg = createSearchReg(searchKey);
+
+  // 初始化结果数组
+  const results: MenuRecordRaw[] = [];
+
+  // 遍历搜索项
+  traverseTreeValues(searchItems.value, (item) => {
+    // 如果菜单项的名称匹配正则表达式，将其添加到结果数组中
+    if (reg.test(item.name?.toLowerCase())) {
+      results.push(item);
+    }
+  });
+
+  // 更新搜索结果
+  searchResults.value = results;
+
+  // 如果有搜索结果，设置索引为 0
+  if (results.length > 0) {
+    activeIndex.value = 0;
+  }
+
+  // 赋值索引为 0
+  activeIndex.value = 0;
+}
+
+// When the keyboard up and down keys move to an invisible place
+// the scroll bar needs to scroll automatically
+function scrollIntoView() {
+  const element = document.querySelector(
+    `[data-search-item="${activeIndex.value}"]`,
+  );
+
+  if (element) {
+    element.scrollIntoView({ block: 'nearest' });
+  }
+}
+
+// enter keyboard event
+async function handleEnter() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  const result = searchResults.value;
+  const index = activeIndex.value;
+  if (result.length === 0 || index < 0) {
+    return;
+  }
+  const to = result[index];
+  if (to) {
+    searchHistory.value = uniqueByField([...searchHistory.value, to], 'path');
+    handleClose();
+    await nextTick();
+    if (isHttpUrl(to.path)) {
+      window.open(to.path, '_blank');
+    } else {
+      router.push({ path: to.path, replace: true });
+    }
+  }
+}
+
+// Arrow key up
+function handleUp() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  activeIndex.value--;
+  if (activeIndex.value < 0) {
+    activeIndex.value = searchResults.value.length - 1;
+  }
+  scrollIntoView();
+}
+
+// Arrow key down
+function handleDown() {
+  if (searchResults.value.length === 0) {
+    return;
+  }
+  activeIndex.value++;
+  if (activeIndex.value > searchResults.value.length - 1) {
+    activeIndex.value = 0;
+  }
+  scrollIntoView();
+}
+
+// close search modal
+function handleClose() {
+  searchResults.value = [];
+  emit('close');
+}
+
+// Activate when the mouse moves to a certain line
+function handleMouseenter(e: MouseEvent) {
+  const index = (e.target as HTMLElement)?.dataset.index;
+  activeIndex.value = Number(index);
+}
+
+function removeItem(index: number) {
+  if (props.keyword) {
+    searchResults.value.splice(index, 1);
+  } else {
+    searchHistory.value.splice(index, 1);
+  }
+  activeIndex.value = Math.max(activeIndex.value - 1, 0);
+  scrollIntoView();
+}
+
+// 存储所有需要转义的特殊字符
+const code = new Set([
+  '$',
+  '(',
+  ')',
+  '*',
+  '+',
+  '.',
+  '?',
+  '[',
+  '\\',
+  ']',
+  '^',
+  '{',
+  '|',
+  '}',
+]);
+
+// 转换函数，用于转义特殊字符
+function transform(c: string) {
+  // 如果字符在特殊字符列表中，返回转义后的字符
+  // 如果不在，返回字符本身
+  return code.has(c) ? `\\${c}` : c;
+}
+
+// 创建搜索正则表达式
+function createSearchReg(key: string) {
+  // 将输入的字符串拆分为单个字符
+  // 对每个字符进行转义
+  // 然后用'.*'连接所有字符，创建正则表达式
+  const keys = [...key].map((item) => transform(item)).join('.*');
+  // 返回创建的正则表达式
+  return new RegExp(`.*${keys}.*`);
+}
+
+watch(
+  () => props.keyword,
+  (val) => {
+    if (val) {
+      handleSearch(val);
+    } else {
+      searchResults.value = [...searchHistory.value];
+    }
+  },
+);
+
+onMounted(() => {
+  searchItems.value = mapTree(props.menus, (item) => {
+    return {
+      ...item,
+      name: $t(item?.name),
+    };
+  });
+  if (searchHistory.value.length > 0) {
+    searchResults.value = searchHistory.value;
+  }
+  // enter search
+  onKeyStroke('Enter', handleEnter);
+  // Monitor keyboard arrow keys
+  onKeyStroke('ArrowUp', handleUp);
+  onKeyStroke('ArrowDown', handleDown);
+  // esc close
+  onKeyStroke('Escape', handleClose);
+});
+</script>
+
+<template>
+  <VbenScrollbar>
+    <div class="!flex h-full justify-center px-2 sm:max-h-[450px]">
+      <!-- 无搜索结果 -->
+      <div
+        v-if="keyword && searchResults.length === 0"
+        class="text-muted-foreground text-center"
+      >
+        <SearchX class="mx-auto mt-4 size-12" />
+        <p class="mb-10 mt-6 text-xs">
+          {{ $t('ui.widgets.search.noResults') }}
+          <span class="text-foreground text-sm font-medium">
+            "{{ keyword }}"
+          </span>
+        </p>
+      </div>
+      <!-- 历史搜索记录 & 没有搜索结果 -->
+      <div
+        v-if="!keyword && searchResults.length === 0"
+        class="text-muted-foreground text-center"
+      >
+        <p class="my-10 text-xs">
+          {{ $t('ui.widgets.search.noRecent') }}
+        </p>
+      </div>
+
+      <ul v-show="searchResults.length > 0" class="w-full">
+        <li
+          v-if="searchHistory.length > 0 && !keyword"
+          class="text-muted-foreground mb-2 text-xs"
+        >
+          {{ $t('ui.widgets.search.recent') }}
+        </li>
+        <li
+          v-for="(item, index) in uniqueByField(searchResults, 'path')"
+          :key="item.path"
+          :class="
+            activeIndex === index
+              ? 'active bg-primary text-primary-foreground'
+              : ''
+          "
+          :data-index="index"
+          :data-search-item="index"
+          class="bg-accent flex-center group mb-3 w-full cursor-pointer rounded-lg px-4 py-4"
+          @click="handleEnter"
+          @mouseenter="handleMouseenter"
+        >
+          <VbenIcon
+            :icon="item.icon"
+            class="mr-2 size-5 flex-shrink-0"
+            fallback
+          />
+
+          <span class="flex-1">{{ item.name }}</span>
+          <div
+            class="flex-center dark:hover:bg-accent hover:text-primary-foreground rounded-full p-1 hover:scale-110"
+            @click.stop="removeItem(index)"
+          >
+            <X class="size-4" />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </VbenScrollbar>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/index.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/index.ts
new file mode 100644
index 0000000..0f9e11a
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/index.ts
@@ -0,0 +1,12 @@
+export { default as Breadcrumb } from './breadcrumb.vue';
+export * from './check-updates';
+export { default as AuthenticationColorToggle } from './color-toggle.vue';
+export * from './global-search';
+export { default as LanguageToggle } from './language-toggle.vue';
+export { default as AuthenticationLayoutToggle } from './layout-toggle.vue';
+export * from './lock-screen';
+export * from './notification';
+export * from './preferences';
+export * from './theme-toggle';
+export * from './timezone';
+export * from './user-dropdown';
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/language-toggle.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/language-toggle.vue
new file mode 100644
index 0000000..f92432f
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/language-toggle.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { SupportedLanguagesType } from '@vben/locales';
+
+import { SUPPORT_LANGUAGES } from '@vben/constants';
+import { Languages } from '@vben/icons';
+import { loadLocaleMessages } from '@vben/locales';
+import { preferences, updatePreferences } from '@vben/preferences';
+
+import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'LanguageToggle',
+});
+
+async function handleUpdate(value: string | undefined) {
+  if (!value) return;
+  const locale = value as SupportedLanguagesType;
+  updatePreferences({
+    app: {
+      locale,
+    },
+  });
+  await loadLocaleMessages(locale);
+}
+</script>
+
+<template>
+  <div>
+    <VbenDropdownRadioMenu
+      :menus="SUPPORT_LANGUAGES"
+      :model-value="preferences.app.locale"
+      @update:model-value="handleUpdate"
+    >
+      <VbenIconButton class="hover:animate-[shrink_0.3s_ease-in-out]">
+        <Languages class="text-foreground size-4" />
+      </VbenIconButton>
+    </VbenDropdownRadioMenu>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/layout-toggle.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/layout-toggle.vue
new file mode 100644
index 0000000..ae4eecb
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/layout-toggle.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { AuthPageLayoutType } from '@vben/types';
+
+import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';
+
+import { computed } from 'vue';
+
+import { InspectionPanel, PanelLeft, PanelRight } from '@vben/icons';
+import { $t } from '@vben/locales';
+import {
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@vben/preferences';
+
+import { VbenDropdownRadioMenu, VbenIconButton } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'AuthenticationLayoutToggle',
+});
+
+const menus = computed((): VbenDropdownMenuItem[] => [
+  {
+    icon: PanelLeft,
+    label: $t('authentication.layout.alignLeft'),
+    value: 'panel-left',
+  },
+  {
+    icon: InspectionPanel,
+    label: $t('authentication.layout.center'),
+    value: 'panel-center',
+  },
+  {
+    icon: PanelRight,
+    label: $t('authentication.layout.alignRight'),
+    value: 'panel-right',
+  },
+]);
+
+const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
+
+function handleUpdate(value: string | undefined) {
+  if (!value) return;
+  updatePreferences({
+    app: {
+      authPageLayout: value as AuthPageLayoutType,
+    },
+  });
+}
+</script>
+
+<template>
+  <VbenDropdownRadioMenu
+    :menus="menus"
+    :model-value="preferences.app.authPageLayout"
+    @update:model-value="handleUpdate"
+  >
+    <VbenIconButton>
+      <PanelRight v-if="authPanelRight" class="size-4" />
+      <PanelLeft v-if="authPanelLeft" class="size-4" />
+      <InspectionPanel v-if="authPanelCenter" class="size-4" />
+    </VbenIconButton>
+  </VbenDropdownRadioMenu>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/lock-screen/index.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/lock-screen/index.ts
new file mode 100644
index 0000000..8ba1f16
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/lock-screen/index.ts
@@ -0,0 +1,2 @@
+export { default as LockScreenModal } from './lock-screen-modal.vue';
+export { default as LockScreen } from './lock-screen.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
new file mode 100644
index 0000000..908e670
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { computed, reactive } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { useVbenForm, z } from '@vben-core/form-ui';
+import { useVbenModal } from '@vben-core/popup-ui';
+import { VbenAvatar, VbenButton } from '@vben-core/shadcn-ui';
+
+interface Props {
+  avatar?: string;
+  text?: string;
+}
+
+defineOptions({
+  name: 'LockScreenModal',
+});
+
+withDefaults(defineProps<Props>(), {
+  avatar: '',
+  text: '',
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, { resetForm, validate, getValues, getFieldComponentRef }] =
+  useVbenForm(
+    reactive({
+      commonConfig: {
+        hideLabel: true,
+        hideRequiredMark: true,
+      },
+      schema: computed(() => [
+        {
+          component: 'VbenInputPassword' as const,
+          componentProps: {
+            placeholder: $t('ui.widgets.lockScreen.placeholder'),
+          },
+          fieldName: 'lockScreenPassword',
+          formFieldProps: { validateOnBlur: false },
+          label: $t('authentication.password'),
+          rules: z
+            .string()
+            .min(1, { message: $t('ui.widgets.lockScreen.placeholder') }),
+        },
+      ]),
+      showDefaultActions: false,
+    }),
+  );
+
+const [Modal] = useVbenModal({
+  onConfirm() {
+    handleSubmit();
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      resetForm();
+    }
+  },
+  onOpened() {
+    requestAnimationFrame(() => {
+      getFieldComponentRef('lockScreenPassword')
+        ?.$el?.querySelector('[name="lockScreenPassword"]')
+        ?.focus();
+    });
+  },
+});
+
+async function handleSubmit() {
+  const { valid } = await validate();
+  const values = await getValues();
+  if (valid) {
+    emit('submit', values?.lockScreenPassword);
+  }
+}
+</script>
+
+<template>
+  <Modal
+    :footer="false"
+    :fullscreen-button="false"
+    :title="$t('ui.widgets.lockScreen.title')"
+  >
+    <div
+      class="mb-10 flex w-full flex-col items-center px-10"
+      @keydown.enter.prevent="handleSubmit"
+    >
+      <div class="w-full">
+        <div class="ml-2 flex w-full flex-col items-center">
+          <VbenAvatar
+            :src="avatar"
+            class="size-20"
+            dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"
+          />
+          <div class="text-foreground my-6 flex items-center font-medium">
+            {{ text }}
+          </div>
+        </div>
+        <Form />
+        <VbenButton class="mt-1 w-full" @click="handleSubmit">
+          {{ $t('ui.widgets.lockScreen.screenButton') }}
+        </VbenButton>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
new file mode 100644
index 0000000..3f70033
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+
+import { LockKeyhole } from '@vben/icons';
+import { $t, useI18n } from '@vben/locales';
+import { storeToRefs, useAccessStore } from '@vben/stores';
+
+import { useScrollLock } from '@vben-core/composables';
+import { useVbenForm, z } from '@vben-core/form-ui';
+import { VbenAvatar, VbenButton } from '@vben-core/shadcn-ui';
+
+import { useDateFormat, useNow } from '@vueuse/core';
+
+interface Props {
+  avatar?: string;
+}
+
+defineOptions({
+  name: 'LockScreen',
+});
+
+withDefaults(defineProps<Props>(), {
+  avatar: '',
+});
+
+defineEmits<{ toLogin: [] }>();
+
+const { locale } = useI18n();
+const accessStore = useAccessStore();
+
+const now = useNow();
+const meridiem = useDateFormat(now, 'A');
+const hour = useDateFormat(now, 'HH');
+const minute = useDateFormat(now, 'mm');
+const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value });
+
+const showUnlockForm = ref(false);
+const { lockScreenPassword } = storeToRefs(accessStore);
+
+const [Form, { form, validate, getFieldComponentRef }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => [
+      {
+        component: 'VbenInputPassword' as const,
+        componentProps: {
+          placeholder: $t('ui.widgets.lockScreen.placeholder'),
+        },
+        fieldName: 'password',
+        label: $t('authentication.password'),
+        rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+      },
+    ]),
+    showDefaultActions: false,
+  }),
+);
+
+const validPass = computed(
+  () => lockScreenPassword?.value === form?.values?.password,
+);
+
+async function handleSubmit() {
+  const { valid } = await validate();
+  if (valid) {
+    if (validPass.value) {
+      accessStore.unlockScreen();
+    } else {
+      form.setFieldError('password', $t('authentication.passwordErrorTip'));
+    }
+  }
+}
+
+function toggleUnlockForm() {
+  showUnlockForm.value = !showUnlockForm.value;
+  if (showUnlockForm.value) {
+    requestAnimationFrame(() => {
+      getFieldComponentRef('password')
+        ?.$el?.querySelector('[name="password"]')
+        ?.focus();
+    });
+  }
+}
+
+useScrollLock();
+</script>
+
+<template>
+  <div class="bg-background fixed z-[2000] size-full">
+    <transition name="slide-left">
+      <div v-show="!showUnlockForm" class="size-full">
+        <div
+          class="flex-col-center text-foreground/80 hover:text-foreground group fixed left-1/2 top-6 z-[2001] -translate-x-1/2 cursor-pointer text-xl font-semibold"
+          @click="toggleUnlockForm"
+        >
+          <LockKeyhole
+            class="size-5 transition-all duration-300 group-hover:scale-125"
+          />
+          <span>{{ $t('ui.widgets.lockScreen.unlock') }}</span>
+        </div>
+        <div class="flex h-full w-full items-center justify-center">
+          <div class="flex w-full justify-center gap-4 px-4 sm:gap-6 md:gap-8">
+            <div
+              class="bg-accent relative flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
+            >
+              <span
+                class="absolute left-3 top-3 text-xs font-semibold sm:text-sm md:text-xl"
+              >
+                {{ meridiem }}
+              </span>
+              {{ hour }}
+            </div>
+            <div
+              class="bg-accent flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
+            >
+              {{ minute }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+
+    <transition name="slide-right">
+      <div
+        v-if="showUnlockForm"
+        class="flex-center size-full"
+        @keydown.enter.prevent="handleSubmit"
+      >
+        <div class="flex-col-center mb-10 w-[90%] max-w-[300px] px-4">
+          <VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
+          <div class="enter-x mb-2 w-full items-center">
+            <Form />
+          </div>
+          <VbenButton class="enter-x w-full" @click="handleSubmit">
+            {{ $t('ui.widgets.lockScreen.entry') }}
+          </VbenButton>
+          <VbenButton
+            class="enter-x my-2 w-full"
+            variant="ghost"
+            @click="$emit('toLogin')"
+          >
+            {{ $t('ui.widgets.lockScreen.backToLogin') }}
+          </VbenButton>
+          <VbenButton
+            class="enter-x mr-2 w-full"
+            variant="ghost"
+            @click="toggleUnlockForm"
+          >
+            {{ $t('common.back') }}
+          </VbenButton>
+        </div>
+      </div>
+    </transition>
+
+    <div
+      class="enter-y absolute bottom-5 w-full text-center text-xl md:text-2xl xl:text-xl 2xl:text-3xl"
+    >
+      <div v-if="showUnlockForm" class="enter-x mb-2 text-2xl md:text-3xl">
+        {{ hour }}:{{ minute }}
+        <span class="text-base md:text-lg">{{ meridiem }}</span>
+      </div>
+      <div class="text-xl md:text-3xl">{{ date }}</div>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/notification/index.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/notification/index.ts
new file mode 100644
index 0000000..e219b71
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/notification/index.ts
@@ -0,0 +1,3 @@
+export { default as Notification } from './notification.vue';
+
+export type * from './types';
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/notification/notification.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/notification/notification.vue
new file mode 100644
index 0000000..8089dd7
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/notification/notification.vue
@@ -0,0 +1,235 @@
+<script lang="ts" setup>
+import type { NotificationItem } from './types';
+
+import { useRouter } from 'vue-router';
+
+import { Bell, CircleCheckBig, CircleX, MailCheck } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import {
+  VbenButton,
+  VbenIconButton,
+  VbenPopover,
+  VbenScrollbar,
+} from '@vben-core/shadcn-ui';
+
+import { useToggle } from '@vueuse/core';
+
+interface Props {
+  /**
+   * 显示圆点
+   */
+  dot?: boolean;
+  /**
+   * 消息列表
+   */
+  notifications?: NotificationItem[];
+}
+
+defineOptions({ name: 'NotificationPopup' });
+
+withDefaults(defineProps<Props>(), {
+  dot: false,
+  notifications: () => [],
+});
+
+const emit = defineEmits<{
+  clear: [];
+  makeAll: [];
+  read: [NotificationItem];
+  remove: [NotificationItem];
+  viewAll: [];
+}>();
+
+const router = useRouter();
+const [open, toggle] = useToggle();
+
+function close() {
+  open.value = false;
+}
+
+function handleViewAll() {
+  emit('viewAll');
+  close();
+}
+
+function handleMakeAll() {
+  emit('makeAll');
+}
+
+function handleClear() {
+  emit('clear');
+}
+
+function handleClick(item: NotificationItem) {
+  // 如果通知项有链接，点击时跳转
+  if (item.link) {
+    navigateTo(item.link, item.query, item.state);
+  }
+}
+
+function navigateTo(
+  link: string,
+  query?: Record<string, any>,
+  state?: Record<string, any>,
+) {
+  if (link.startsWith('http://') || link.startsWith('https://')) {
+    // 外部链接，在新标签页打开
+    window.open(link, '_blank');
+  } else {
+    // 内部路由链接，支持 query 参数和 state
+    router.push({
+      path: link,
+      query: query || {},
+      state,
+    });
+  }
+}
+</script>
+<template>
+  <VbenPopover
+    v-model:open="open"
+    content-class="relative right-2 w-[360px] p-0"
+  >
+    <template #trigger>
+      <div class="flex-center mr-2 h-full" @click.stop="toggle()">
+        <VbenIconButton class="bell-button text-foreground relative">
+          <span
+            v-if="dot"
+            class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
+          ></span>
+          <Bell class="size-4" />
+        </VbenIconButton>
+      </div>
+    </template>
+
+    <div class="relative">
+      <div class="flex items-center justify-between p-4 py-3">
+        <div class="text-foreground">{{ $t('ui.widgets.notifications') }}</div>
+        <VbenIconButton
+          :disabled="notifications.length <= 0"
+          :tooltip="$t('ui.widgets.markAllAsRead')"
+          @click="handleMakeAll"
+        >
+          <MailCheck class="size-4" />
+        </VbenIconButton>
+      </div>
+      <VbenScrollbar v-if="notifications.length > 0">
+        <ul class="!flex max-h-[360px] w-full flex-col">
+          <template v-for="item in notifications" :key="item.id ?? item.title">
+            <li
+              class="hover:bg-accent border-border relative flex w-full cursor-pointer items-start gap-5 border-t px-3 py-3"
+              @click="handleClick(item)"
+            >
+              <span
+                v-if="!item.isRead"
+                class="bg-primary absolute right-2 top-2 h-2 w-2 rounded"
+              ></span>
+
+              <span
+                class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
+              >
+                <img
+                  :src="item.avatar"
+                  class="aspect-square h-full w-full object-cover"
+                />
+              </span>
+              <div class="flex flex-col gap-1 leading-none">
+                <p class="font-semibold">{{ item.title }}</p>
+                <p class="text-muted-foreground my-1 line-clamp-2 text-xs">
+                  {{ item.message }}
+                </p>
+                <p class="text-muted-foreground line-clamp-2 text-xs">
+                  {{ item.date }}
+                </p>
+              </div>
+              <div
+                class="absolute right-3 top-1/2 flex -translate-y-1/2 flex-col gap-2"
+              >
+                <VbenIconButton
+                  v-if="!item.isRead"
+                  size="xs"
+                  variant="ghost"
+                  class="h-6 px-2"
+                  :tooltip="$t('common.confirm')"
+                  @click.stop="emit('read', item)"
+                >
+                  <CircleCheckBig class="size-4" />
+                </VbenIconButton>
+                <VbenIconButton
+                  v-if="item.isRead"
+                  size="xs"
+                  variant="ghost"
+                  class="text-destructive h-6 px-2"
+                  :tooltip="$t('common.delete')"
+                  @click.stop="emit('remove', item)"
+                >
+                  <CircleX class="size-4" />
+                </VbenIconButton>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </VbenScrollbar>
+
+      <template v-else>
+        <div class="flex-center text-muted-foreground min-h-[150px] w-full">
+          {{ $t('common.noData') }}
+        </div>
+      </template>
+
+      <div
+        class="border-border flex items-center justify-between border-t px-4 py-3"
+      >
+        <VbenButton
+          :disabled="notifications.length <= 0"
+          size="sm"
+          variant="ghost"
+          @click="handleClear"
+        >
+          {{ $t('ui.widgets.clearNotifications') }}
+        </VbenButton>
+        <VbenButton size="sm" @click="handleViewAll">
+          {{ $t('ui.widgets.viewAll') }}
+        </VbenButton>
+      </div>
+    </div>
+  </VbenPopover>
+</template>
+
+<style scoped>
+:deep(.bell-button) {
+  &:hover {
+    svg {
+      animation: bell-ring 1s both;
+    }
+  }
+}
+
+@keyframes bell-ring {
+  0%,
+  100% {
+    transform-origin: top;
+  }
+
+  15% {
+    transform: rotateZ(10deg);
+  }
+
+  30% {
+    transform: rotateZ(-10deg);
+  }
+
+  45% {
+    transform: rotateZ(5deg);
+  }
+
+  60% {
+    transform: rotateZ(-5deg);
+  }
+
+  75% {
+    transform: rotateZ(2deg);
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/notification/types.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/notification/types.ts
new file mode 100644
index 0000000..4b684f2
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/notification/types.ts
@@ -0,0 +1,17 @@
+interface NotificationItem {
+  id: number | string;
+  avatar: string;
+  date: string;
+  isRead?: boolean;
+  message: string;
+  title: string;
+  /**
+   * 跳转链接，可以是路由路径或完整 URL
+   * @example '/dashboard' 或 'https://example.com'
+   */
+  link?: string;
+  query?: Record<string, any>;
+  state?: Record<string, any>;
+}
+
+export type { NotificationItem };
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/block.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/block.vue
new file mode 100644
index 0000000..c8cc9e6
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/block.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface Props {
+  title?: string;
+}
+
+defineOptions({
+  name: 'PreferenceBlock',
+});
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+});
+</script>
+
+<template>
+  <div class="flex flex-col py-4">
+    <h3 class="mb-3 font-semibold leading-none tracking-tight">
+      {{ title }}
+    </h3>
+    <slot></slot>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/checkbox-item.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/checkbox-item.vue
new file mode 100644
index 0000000..99940c6
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/checkbox-item.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { SelectOption } from '@vben/types';
+
+import { useSlots } from 'vue';
+
+import { CircleHelp } from '@vben/icons';
+
+import { VbenCheckButtonGroup, VbenTooltip } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceCheckboxItem',
+});
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    items?: SelectOption[];
+    multiple?: boolean;
+    onBtnClick?: (value: string) => void;
+    placeholder?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    items: () => [],
+    onBtnClick: () => {},
+    multiple: false,
+  },
+);
+
+const inputValue = defineModel<string[]>();
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="{
+      'hover:bg-accent': !slots.tip,
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip" side="bottom">
+        <template #trigger>
+          <CircleHelp class="ml-1 size-3 cursor-help" />
+        </template>
+        <slot name="tip"></slot>
+      </VbenTooltip>
+    </span>
+    <VbenCheckButtonGroup
+      v-model="inputValue"
+      class="h-8 w-[165px]"
+      :options="items"
+      :disabled="disabled"
+      :multiple="multiple"
+      @btn-click="onBtnClick"
+    />
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/general/animation.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/general/animation.vue
new file mode 100644
index 0000000..b27d074
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/general/animation.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceAnimation',
+});
+
+const transitionProgress = defineModel<boolean>('transitionProgress', {
+  // 默认值
+  default: false,
+});
+const transitionName = defineModel<string>('transitionName');
+const transitionEnable = defineModel<boolean>('transitionEnable');
+const transitionLoading = defineModel<boolean>('transitionLoading');
+
+const transitionPreset = ['fade', 'fade-slide', 'fade-up', 'fade-down'];
+
+function handleClick(value: string) {
+  transitionName.value = value;
+}
+</script>
+
+<template>
+  <SwitchItem v-model="transitionProgress">
+    {{ $t('preferences.animation.progress') }}
+  </SwitchItem>
+  <SwitchItem v-model="transitionLoading">
+    {{ $t('preferences.animation.loading') }}
+  </SwitchItem>
+  <SwitchItem v-model="transitionEnable">
+    {{ $t('preferences.animation.transition') }}
+  </SwitchItem>
+  <div
+    v-if="transitionEnable"
+    class="mb-2 mt-3 flex justify-between gap-3 px-2"
+  >
+    <div
+      v-for="item in transitionPreset"
+      :key="item"
+      :class="{
+        'outline-box-active': transitionName === item,
+      }"
+      class="outline-box p-2"
+      @click="handleClick(item)"
+    >
+      <div :class="`${item}-slow`" class="bg-accent h-10 w-12 rounded-md"></div>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/general/general.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/general/general.vue
new file mode 100644
index 0000000..c69cd3a
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/general/general.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { SUPPORT_LANGUAGES } from '@vben/constants';
+import { $t } from '@vben/locales';
+
+import InputItem from '../input-item.vue';
+import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceGeneralConfig',
+});
+
+const appLocale = defineModel<string>('appLocale');
+const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
+const appWatermark = defineModel<boolean>('appWatermark');
+const appWatermarkContent = defineModel<string>('appWatermarkContent');
+const appEnableCheckUpdates = defineModel<boolean>('appEnableCheckUpdates');
+</script>
+
+<template>
+  <SelectItem v-model="appLocale" :items="SUPPORT_LANGUAGES">
+    {{ $t('preferences.language') }}
+  </SelectItem>
+  <SwitchItem v-model="appDynamicTitle">
+    {{ $t('preferences.dynamicTitle') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="appWatermark"
+    @update:model-value="
+      (val) => {
+        if (!val) appWatermarkContent = '';
+      }
+    "
+  >
+    {{ $t('preferences.watermark') }}
+  </SwitchItem>
+  <InputItem
+    v-if="appWatermark"
+    v-model="appWatermarkContent"
+    :placeholder="$t('preferences.watermarkContent')"
+  >
+    {{ $t('preferences.watermarkContent') }}
+  </InputItem>
+  <SwitchItem v-model="appEnableCheckUpdates">
+    {{ $t('preferences.checkUpdates') }}
+  </SwitchItem>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/index.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/index.ts
new file mode 100644
index 0000000..cdd6bb1
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/index.ts
@@ -0,0 +1,20 @@
+export { default as Block } from './block.vue';
+export { default as Animation } from './general/animation.vue';
+export { default as General } from './general/general.vue';
+export { default as Breadcrumb } from './layout/breadcrumb.vue';
+export { default as Content } from './layout/content.vue';
+export { default as Copyright } from './layout/copyright.vue';
+export { default as Footer } from './layout/footer.vue';
+export { default as Header } from './layout/header.vue';
+export { default as Layout } from './layout/layout.vue';
+export { default as Navigation } from './layout/navigation.vue';
+export { default as Sidebar } from './layout/sidebar.vue';
+export { default as Tabbar } from './layout/tabbar.vue';
+export { default as Widget } from './layout/widget.vue';
+export { default as GlobalShortcutKeys } from './shortcut-keys/global.vue';
+export { default as SwitchItem } from './switch-item.vue';
+export { default as BuiltinTheme } from './theme/builtin.vue';
+export { default as ColorMode } from './theme/color-mode.vue';
+export { default as FontSize } from './theme/font-size.vue';
+export { default as Radius } from './theme/radius.vue';
+export { default as Theme } from './theme/theme.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
new file mode 100644
index 0000000..8e9f09e
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { SelectOption } from '@vben/types';
+
+import { useSlots } from 'vue';
+
+import { CircleHelp, CircleX } from '@vben/icons';
+
+import { Input, VbenTooltip } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceSelectItem',
+});
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    items?: SelectOption[];
+    placeholder?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    items: () => [],
+  },
+);
+
+const inputValue = defineModel<string>();
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="{
+      'hover:bg-accent': !slots.tip,
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip" side="bottom">
+        <template #trigger>
+          <CircleHelp class="ml-1 size-3 cursor-help" />
+        </template>
+        <slot name="tip"></slot>
+      </VbenTooltip>
+    </span>
+    <div class="relative">
+      <Input
+        v-model="inputValue"
+        class="h-8 w-[165px]"
+        :placeholder="placeholder"
+      />
+      <CircleX
+        v-if="inputValue"
+        class="hover:text-foreground text-foreground/60 absolute right-2 top-1/2 size-3 -translate-y-1/2 transform cursor-pointer"
+        @click="() => (inputValue = '')"
+      />
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/breadcrumb.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/breadcrumb.vue
new file mode 100644
index 0000000..51f1a40
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/breadcrumb.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { SelectOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+const props = defineProps<{ disabled?: boolean }>();
+
+const breadcrumbEnable = defineModel<boolean>('breadcrumbEnable');
+const breadcrumbShowIcon = defineModel<boolean>('breadcrumbShowIcon');
+const breadcrumbStyleType = defineModel<string>('breadcrumbStyleType');
+const breadcrumbShowHome = defineModel<boolean>('breadcrumbShowHome');
+const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
+
+const typeItems: SelectOption[] = [
+  { label: $t('preferences.normal'), value: 'normal' },
+  { label: $t('preferences.breadcrumb.background'), value: 'background' },
+];
+
+const disableItem = computed(() => {
+  return !breadcrumbEnable.value || props.disabled;
+});
+</script>
+
+<template>
+  <SwitchItem v-model="breadcrumbEnable" :disabled="disabled">
+    {{ $t('preferences.breadcrumb.enable') }}
+  </SwitchItem>
+  <SwitchItem v-model="breadcrumbHideOnlyOne" :disabled="disableItem">
+    {{ $t('preferences.breadcrumb.hideOnlyOne') }}
+  </SwitchItem>
+  <SwitchItem v-model="breadcrumbShowIcon" :disabled="disableItem">
+    {{ $t('preferences.breadcrumb.icon') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="breadcrumbShowHome"
+    :disabled="disableItem || !breadcrumbShowIcon"
+  >
+    {{ $t('preferences.breadcrumb.home') }}
+  </SwitchItem>
+  <ToggleItem
+    v-model="breadcrumbStyleType"
+    :disabled="disableItem"
+    :items="typeItems"
+  >
+    {{ $t('preferences.breadcrumb.style') }}
+  </ToggleItem>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/content.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/content.vue
new file mode 100644
index 0000000..75af1c3
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/content.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+import { computed } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { ContentCompact, ContentWide } from '../../icons';
+
+defineOptions({
+  name: 'PreferenceLayoutContent',
+});
+
+const modelValue = defineModel<string>({ default: 'wide' });
+
+const components: Record<string, Component> = {
+  compact: ContentCompact,
+  wide: ContentWide,
+};
+
+const PRESET = computed(() => [
+  {
+    name: $t('preferences.wide'),
+    type: 'wide',
+  },
+  {
+    name: $t('preferences.compact'),
+    type: 'compact',
+  },
+]);
+
+function activeClass(theme: string): string[] {
+  return theme === modelValue.value ? ['outline-box-active'] : [];
+}
+</script>
+
+<template>
+  <div class="flex w-full gap-5">
+    <template v-for="theme in PRESET" :key="theme.name">
+      <div
+        class="flex w-[100px] cursor-pointer flex-col"
+        @click="modelValue = theme.type"
+      >
+        <div :class="activeClass(theme.type)" class="outline-box flex-center">
+          <component :is="components[theme.type]" />
+        </div>
+        <div class="text-muted-foreground mt-2 text-center text-xs">
+          {{ theme.name }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/copyright.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/copyright.vue
new file mode 100644
index 0000000..9389029
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/copyright.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import InputItem from '../input-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+const props = defineProps<{ disabled: boolean }>();
+
+const copyrightEnable = defineModel<boolean>('copyrightEnable');
+const copyrightDate = defineModel<string>('copyrightDate');
+const copyrightIcp = defineModel<string>('copyrightIcp');
+const copyrightIcpLink = defineModel<string>('copyrightIcpLink');
+const copyrightCompanyName = defineModel<string>('copyrightCompanyName');
+const copyrightCompanySiteLink = defineModel<string>(
+  'copyrightCompanySiteLink',
+);
+
+const itemDisabled = computed(() => props.disabled || !copyrightEnable.value);
+</script>
+
+<template>
+  <SwitchItem v-model="copyrightEnable" :disabled="disabled">
+    {{ $t('preferences.copyright.enable') }}
+  </SwitchItem>
+
+  <InputItem v-model="copyrightCompanyName" :disabled="itemDisabled">
+    {{ $t('preferences.copyright.companyName') }}
+  </InputItem>
+  <InputItem v-model="copyrightCompanySiteLink" :disabled="itemDisabled">
+    {{ $t('preferences.copyright.companySiteLink') }}
+  </InputItem>
+  <InputItem v-model="copyrightDate" :disabled="itemDisabled">
+    {{ $t('preferences.copyright.date') }}
+  </InputItem>
+
+  <InputItem v-model="copyrightIcp" :disabled="itemDisabled">
+    {{ $t('preferences.copyright.icp') }}
+  </InputItem>
+  <InputItem v-model="copyrightIcpLink" :disabled="itemDisabled">
+    {{ $t('preferences.copyright.icpLink') }}
+  </InputItem>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/footer.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/footer.vue
new file mode 100644
index 0000000..8a77920
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/footer.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+const footerEnable = defineModel<boolean>('footerEnable');
+const footerFixed = defineModel<boolean>('footerFixed');
+</script>
+
+<template>
+  <SwitchItem v-model="footerEnable">
+    {{ $t('preferences.footer.visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="footerFixed" :disabled="!footerEnable">
+    {{ $t('preferences.footer.fixed') }}
+  </SwitchItem>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue
new file mode 100644
index 0000000..ee04ee2
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type {
+  LayoutHeaderMenuAlignType,
+  LayoutHeaderModeType,
+  SelectOption,
+} from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
+
+defineProps<{ disabled: boolean }>();
+
+const headerEnable = defineModel<boolean>('headerEnable');
+const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
+const headerMenuAlign =
+  defineModel<LayoutHeaderMenuAlignType>('headerMenuAlign');
+
+const localeItems: SelectOption[] = [
+  {
+    label: $t('preferences.header.modeStatic'),
+    value: 'static',
+  },
+  {
+    label: $t('preferences.header.modeFixed'),
+    value: 'fixed',
+  },
+  {
+    label: $t('preferences.header.modeAuto'),
+    value: 'auto',
+  },
+  {
+    label: $t('preferences.header.modeAutoScroll'),
+    value: 'auto-scroll',
+  },
+];
+
+const headerMenuAlignItems: SelectOption[] = [
+  {
+    label: $t('preferences.header.menuAlignStart'),
+    value: 'start',
+  },
+  {
+    label: $t('preferences.header.menuAlignCenter'),
+    value: 'center',
+  },
+  {
+    label: $t('preferences.header.menuAlignEnd'),
+    value: 'end',
+  },
+];
+</script>
+
+<template>
+  <SwitchItem v-model="headerEnable" :disabled="disabled">
+    {{ $t('preferences.header.visible') }}
+  </SwitchItem>
+  <SelectItem
+    v-model="headerMode"
+    :disabled="!headerEnable"
+    :items="localeItems"
+  >
+    {{ $t('preferences.mode') }}
+  </SelectItem>
+  <ToggleItem
+    v-model="headerMenuAlign"
+    :disabled="!headerEnable"
+    :items="headerMenuAlignItems"
+  >
+    {{ $t('preferences.header.menuAlign') }}
+  </ToggleItem>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
new file mode 100644
index 0000000..a46650b
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+import type { LayoutType } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { CircleHelp } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { VbenTooltip } from '@vben-core/shadcn-ui';
+
+import {
+  FullContent,
+  HeaderMixedNav,
+  HeaderNav,
+  HeaderSidebarNav,
+  MixedNav,
+  SidebarMixedNav,
+  SidebarNav,
+} from '../../icons';
+
+interface PresetItem {
+  name: string;
+  tip: string;
+  type: LayoutType;
+}
+
+defineOptions({
+  name: 'PreferenceLayout',
+});
+
+const modelValue = defineModel<LayoutType>({ default: 'sidebar-nav' });
+
+const components: Record<LayoutType, Component> = {
+  'full-content': FullContent,
+  'header-nav': HeaderNav,
+  'mixed-nav': MixedNav,
+  'sidebar-mixed-nav': SidebarMixedNav,
+  'sidebar-nav': SidebarNav,
+  'header-mixed-nav': HeaderMixedNav,
+  'header-sidebar-nav': HeaderSidebarNav,
+};
+
+const PRESET = computed((): PresetItem[] => [
+  {
+    name: $t('preferences.vertical'),
+    tip: $t('preferences.verticalTip'),
+    type: 'sidebar-nav',
+  },
+  {
+    name: $t('preferences.twoColumn'),
+    tip: $t('preferences.twoColumnTip'),
+    type: 'sidebar-mixed-nav',
+  },
+  {
+    name: $t('preferences.horizontal'),
+    tip: $t('preferences.horizontalTip'),
+    type: 'header-nav',
+  },
+  {
+    name: $t('preferences.headerSidebarNav'),
+    tip: $t('preferences.headerSidebarNavTip'),
+    type: 'header-sidebar-nav',
+  },
+  {
+    name: $t('preferences.mixedMenu'),
+    tip: $t('preferences.mixedMenuTip'),
+    type: 'mixed-nav',
+  },
+  {
+    name: $t('preferences.headerTwoColumn'),
+    tip: $t('preferences.headerTwoColumnTip'),
+    type: 'header-mixed-nav',
+  },
+  {
+    name: $t('preferences.fullContent'),
+    tip: $t('preferences.fullContentTip'),
+    type: 'full-content',
+  },
+]);
+
+function activeClass(theme: string): string[] {
+  return theme === modelValue.value ? ['outline-box-active'] : [];
+}
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap gap-5">
+    <template v-for="theme in PRESET" :key="theme.name">
+      <div
+        class="flex w-[100px] cursor-pointer flex-col"
+        @click="modelValue = theme.type"
+      >
+        <div :class="activeClass(theme.type)" class="outline-box flex-center">
+          <component :is="components[theme.type]" />
+        </div>
+        <div
+          class="text-muted-foreground flex-center hover:text-foreground mt-2 text-center text-xs"
+        >
+          {{ theme.name }}
+          <VbenTooltip v-if="theme.tip" side="bottom">
+            <template #trigger>
+              <CircleHelp class="ml-1 size-3 cursor-help" />
+            </template>
+            {{ theme.tip }}
+          </VbenTooltip>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/navigation.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/navigation.vue
new file mode 100644
index 0000000..23acb1f
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/navigation.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SelectOption } from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
+
+defineOptions({
+  name: 'PreferenceNavigationConfig',
+});
+
+defineProps<{ disabled?: boolean; disabledNavigationSplit?: boolean }>();
+
+const navigationStyleType = defineModel<string>('navigationStyleType');
+const navigationSplit = defineModel<boolean>('navigationSplit');
+const navigationAccordion = defineModel<boolean>('navigationAccordion');
+
+const stylesItems: SelectOption[] = [
+  { label: $t('preferences.rounded'), value: 'rounded' },
+  { label: $t('preferences.plain'), value: 'plain' },
+];
+</script>
+
+<template>
+  <ToggleItem
+    v-model="navigationStyleType"
+    :disabled="disabled"
+    :items="stylesItems"
+  >
+    {{ $t('preferences.navigationMenu.style') }}
+  </ToggleItem>
+  <SwitchItem
+    v-model="navigationSplit"
+    :disabled="disabledNavigationSplit || disabled"
+  >
+    {{ $t('preferences.navigationMenu.split') }}
+    <template #tip>
+      {{ $t('preferences.navigationMenu.splitTip') }}
+    </template>
+  </SwitchItem>
+  <SwitchItem v-model="navigationAccordion" :disabled="disabled">
+    {{ $t('preferences.navigationMenu.accordion') }}
+  </SwitchItem>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
new file mode 100644
index 0000000..e8d84af
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { LayoutType } from '@vben/types';
+
+import { onMounted } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import CheckboxItem from '../checkbox-item.vue';
+import NumberFieldItem from '../number-field-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineProps<{ currentLayout?: LayoutType; disabled: boolean }>();
+
+const sidebarEnable = defineModel<boolean>('sidebarEnable');
+const sidebarWidth = defineModel<number>('sidebarWidth');
+const sidebarCollapsedShowTitle = defineModel<boolean>(
+  'sidebarCollapsedShowTitle',
+);
+const sidebarAutoActivateChild = defineModel<boolean>(
+  'sidebarAutoActivateChild',
+);
+const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
+const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
+
+const sidebarButtons = defineModel<string[]>('sidebarButtons', { default: [] });
+const sidebarCollapsedButton = defineModel<boolean>('sidebarCollapsedButton');
+const sidebarFixedButton = defineModel<boolean>('sidebarFixedButton');
+
+onMounted(() => {
+  if (
+    sidebarCollapsedButton.value &&
+    !sidebarButtons.value.includes('collapsed')
+  ) {
+    sidebarButtons.value.push('collapsed');
+  }
+  if (sidebarFixedButton.value && !sidebarButtons.value.includes('fixed')) {
+    sidebarButtons.value.push('fixed');
+  }
+});
+
+const handleCheckboxChange = () => {
+  sidebarCollapsedButton.value = !!sidebarButtons.value.includes('collapsed');
+  sidebarFixedButton.value = !!sidebarButtons.value.includes('fixed');
+};
+</script>
+
+<template>
+  <SwitchItem v-model="sidebarEnable" :disabled="disabled">
+    {{ $t('preferences.sidebar.visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="sidebarCollapsed" :disabled="!sidebarEnable || disabled">
+    {{ $t('preferences.sidebar.collapsed') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="sidebarExpandOnHover"
+    :disabled="!sidebarEnable || disabled || !sidebarCollapsed"
+    :tip="$t('preferences.sidebar.expandOnHoverTip')"
+  >
+    {{ $t('preferences.sidebar.expandOnHover') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="sidebarCollapsedShowTitle"
+    :disabled="!sidebarEnable || disabled || !sidebarCollapsed"
+  >
+    {{ $t('preferences.sidebar.collapsedShowTitle') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="sidebarAutoActivateChild"
+    :disabled="
+      !sidebarEnable ||
+      !['sidebar-mixed-nav', 'mixed-nav', 'header-mixed-nav'].includes(
+        currentLayout as string,
+      ) ||
+      disabled
+    "
+    :tip="$t('preferences.sidebar.autoActivateChildTip')"
+  >
+    {{ $t('preferences.sidebar.autoActivateChild') }}
+  </SwitchItem>
+  <CheckboxItem
+    :items="[
+      { label: $t('preferences.sidebar.buttonCollapsed'), value: 'collapsed' },
+      { label: $t('preferences.sidebar.buttonFixed'), value: 'fixed' },
+    ]"
+    multiple
+    v-model="sidebarButtons"
+    :on-btn-click="handleCheckboxChange"
+  >
+    {{ $t('preferences.sidebar.buttons') }}
+  </CheckboxItem>
+  <NumberFieldItem
+    v-model="sidebarWidth"
+    :disabled="!sidebarEnable || disabled"
+    :max="320"
+    :min="160"
+    :step="10"
+  >
+    {{ $t('preferences.sidebar.width') }}
+  </NumberFieldItem>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue
new file mode 100644
index 0000000..ea533da
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { SelectOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import NumberFieldItem from '../number-field-item.vue';
+import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceTabsConfig',
+});
+
+defineProps<{ disabled?: boolean }>();
+
+const tabbarEnable = defineModel<boolean>('tabbarEnable');
+const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
+const tabbarPersist = defineModel<boolean>('tabbarPersist');
+const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
+const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
+const tabbarStyleType = defineModel<string>('tabbarStyleType');
+const tabbarShowMore = defineModel<boolean>('tabbarShowMore');
+const tabbarShowMaximize = defineModel<boolean>('tabbarShowMaximize');
+const tabbarMaxCount = defineModel<number>('tabbarMaxCount');
+const tabbarMiddleClickToClose = defineModel<boolean>(
+  'tabbarMiddleClickToClose',
+);
+
+const styleItems = computed((): SelectOption[] => [
+  {
+    label: $t('preferences.tabbar.styleType.chrome'),
+    value: 'chrome',
+  },
+  {
+    label: $t('preferences.tabbar.styleType.plain'),
+    value: 'plain',
+  },
+  {
+    label: $t('preferences.tabbar.styleType.card'),
+    value: 'card',
+  },
+
+  {
+    label: $t('preferences.tabbar.styleType.brisk'),
+    value: 'brisk',
+  },
+]);
+</script>
+
+<template>
+  <SwitchItem v-model="tabbarEnable" :disabled="disabled">
+    {{ $t('preferences.tabbar.enable') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarPersist" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.persist') }}
+  </SwitchItem>
+  <NumberFieldItem
+    v-model="tabbarMaxCount"
+    :disabled="!tabbarEnable"
+    :max="30"
+    :min="0"
+    :step="5"
+    :tip="$t('preferences.tabbar.maxCountTip')"
+  >
+    {{ $t('preferences.tabbar.maxCount') }}
+  </NumberFieldItem>
+  <SwitchItem v-model="tabbarDraggable" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.draggable') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="tabbarWheelable"
+    :disabled="!tabbarEnable"
+    :tip="$t('preferences.tabbar.wheelableTip')"
+  >
+    {{ $t('preferences.tabbar.wheelable') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarMiddleClickToClose" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.middleClickClose') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.icon') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarShowMore" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.showMore') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarShowMaximize" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.showMaximize') }}
+  </SwitchItem>
+  <SelectItem v-model="tabbarStyleType" :items="styleItems">
+    {{ $t('preferences.tabbar.styleType.title') }}
+  </SelectItem>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/widget.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/widget.vue
new file mode 100644
index 0000000..82addb3
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/layout/widget.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { SelectOption } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceInterfaceControl',
+});
+
+const widgetGlobalSearch = defineModel<boolean>('widgetGlobalSearch');
+const widgetFullscreen = defineModel<boolean>('widgetFullscreen');
+const widgetLanguageToggle = defineModel<boolean>('widgetLanguageToggle');
+const widgetNotification = defineModel<boolean>('widgetNotification');
+const widgetThemeToggle = defineModel<boolean>('widgetThemeToggle');
+const widgetSidebarToggle = defineModel<boolean>('widgetSidebarToggle');
+const widgetLockScreen = defineModel<boolean>('widgetLockScreen');
+const appPreferencesButtonPosition = defineModel<string>(
+  'appPreferencesButtonPosition',
+);
+const widgetRefresh = defineModel<boolean>('widgetRefresh');
+
+const positionItems = computed((): SelectOption[] => [
+  {
+    label: $t('preferences.position.auto'),
+    value: 'auto',
+  },
+  {
+    label: $t('preferences.position.header'),
+    value: 'header',
+  },
+  {
+    label: $t('preferences.position.fixed'),
+    value: 'fixed',
+  },
+]);
+</script>
+
+<template>
+  <SwitchItem v-model="widgetGlobalSearch">
+    {{ $t('preferences.widget.globalSearch') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetThemeToggle">
+    {{ $t('preferences.widget.themeToggle') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetLanguageToggle">
+    {{ $t('preferences.widget.languageToggle') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetFullscreen">
+    {{ $t('preferences.widget.fullscreen') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetNotification">
+    {{ $t('preferences.widget.notification') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetLockScreen">
+    {{ $t('preferences.widget.lockScreen') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetSidebarToggle">
+    {{ $t('preferences.widget.sidebarToggle') }}
+  </SwitchItem>
+  <SwitchItem v-model="widgetRefresh">
+    {{ $t('preferences.widget.refresh') }}
+  </SwitchItem>
+  <SelectItem v-model="appPreferencesButtonPosition" :items="positionItems">
+    {{ $t('preferences.position.title') }}
+  </SelectItem>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
new file mode 100644
index 0000000..3878f81
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { SelectOption } from '@vben/types';
+
+import { useSlots } from 'vue';
+
+import { CircleHelp } from '@vben/icons';
+
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  VbenTooltip,
+} from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceSelectItem',
+});
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    items?: SelectOption[];
+    placeholder?: string;
+    tip?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    tip: '',
+    items: () => [],
+  },
+);
+
+const inputValue = defineModel<number>();
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="{
+      'hover:bg-accent': !slots.tip,
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip || tip" side="bottom">
+        <template #trigger>
+          <CircleHelp class="ml-1 size-3 cursor-help" />
+        </template>
+        <slot name="tip">
+          <template v-if="tip">
+            <p v-for="(line, index) in tip.split('\n')" :key="index">
+              {{ line }}
+            </p>
+          </template>
+        </slot>
+      </VbenTooltip>
+    </span>
+
+    <NumberField v-model="inputValue" v-bind="$attrs" class="w-[165px]">
+      <NumberFieldContent>
+        <NumberFieldDecrement />
+        <NumberFieldInput />
+        <NumberFieldIncrement />
+      </NumberFieldContent>
+    </NumberField>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
new file mode 100644
index 0000000..fabc371
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/select-item.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { SelectOption } from '@vben/types';
+
+import { useSlots } from 'vue';
+
+import { CircleHelp } from '@vben/icons';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  VbenTooltip,
+} from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceSelectItem',
+});
+
+withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    items?: SelectOption[];
+    placeholder?: string;
+  }>(),
+  {
+    disabled: false,
+    placeholder: '',
+    items: () => [],
+  },
+);
+
+const selectValue = defineModel<string>();
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="{
+      'hover:bg-accent': !slots.tip,
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip" side="bottom">
+        <template #trigger>
+          <CircleHelp class="ml-1 size-3 cursor-help" />
+        </template>
+        <slot name="tip"></slot>
+      </VbenTooltip>
+    </span>
+    <Select v-model="selectValue">
+      <SelectTrigger class="h-8 w-[165px]">
+        <SelectValue :placeholder="placeholder" />
+      </SelectTrigger>
+      <SelectContent>
+        <template v-for="item in items" :key="item.value">
+          <SelectItem :value="item.value"> {{ item.label }} </SelectItem>
+        </template>
+      </SelectContent>
+    </Select>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/shortcut-keys/global.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/shortcut-keys/global.vue
new file mode 100644
index 0000000..f71a1f6
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/shortcut-keys/global.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { $t } from '@vben/locales';
+import { isWindowsOs } from '@vben/utils';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceGeneralConfig',
+});
+
+const shortcutKeysEnable = defineModel<boolean>('shortcutKeysEnable');
+const shortcutKeysGlobalSearch = defineModel<boolean>(
+  'shortcutKeysGlobalSearch',
+);
+const shortcutKeysLogout = defineModel<boolean>('shortcutKeysLogout');
+// const shortcutKeysPreferences = defineModel<boolean>('shortcutKeysPreferences');
+const shortcutKeysLockScreen = defineModel<boolean>('shortcutKeysLockScreen');
+
+const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
+</script>
+
+<template>
+  <SwitchItem v-model="shortcutKeysEnable">
+    {{ $t('preferences.shortcutKeys.title') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="shortcutKeysGlobalSearch"
+    :disabled="!shortcutKeysEnable"
+  >
+    {{ $t('preferences.shortcutKeys.search') }}
+    <template #shortcut>
+      {{ isWindowsOs() ? 'Ctrl' : '⌘' }}
+      <kbd> K </kbd>
+    </template>
+  </SwitchItem>
+  <SwitchItem v-model="shortcutKeysLogout" :disabled="!shortcutKeysEnable">
+    {{ $t('preferences.shortcutKeys.logout') }}
+    <template #shortcut> {{ altView }} Q </template>
+  </SwitchItem>
+  <!-- <SwitchItem v-model="shortcutKeysPreferences" :disabled="!shortcutKeysEnable">
+    {{ $t('preferences.shortcutKeys.preferences') }}
+    <template #shortcut> {{ altView }} , </template>
+  </SwitchItem> -->
+  <SwitchItem v-model="shortcutKeysLockScreen" :disabled="!shortcutKeysEnable">
+    {{ $t('ui.widgets.lockScreen.title') }}
+    <template #shortcut> {{ altView }} L </template>
+  </SwitchItem>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
new file mode 100644
index 0000000..33d99e9
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useSlots } from 'vue';
+
+import { CircleHelp } from '@vben/icons';
+
+import { Switch, VbenTooltip } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceSwitchItem',
+});
+
+withDefaults(defineProps<{ disabled?: boolean; tip?: string }>(), {
+  disabled: false,
+  tip: '',
+});
+
+const checked = defineModel<boolean>();
+
+const slots = useSlots();
+
+function handleClick() {
+  checked.value = !checked.value;
+}
+</script>
+
+<template>
+  <div
+    :class="{
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="hover:bg-accent my-1 flex w-full items-center justify-between rounded-md px-2 py-2.5"
+    @click="handleClick"
+  >
+    <span class="flex items-center text-sm">
+      <slot></slot>
+
+      <VbenTooltip v-if="slots.tip || tip" side="bottom">
+        <template #trigger>
+          <CircleHelp class="ml-1 size-3 cursor-help" />
+        </template>
+        <slot name="tip">
+          <template v-if="tip">
+            <p v-for="(line, index) in tip.split('\n')" :key="index">
+              {{ line }}
+            </p>
+          </template>
+        </slot>
+      </VbenTooltip>
+    </span>
+    <span v-if="$slots.shortcut" class="ml-auto mr-2 text-xs opacity-60">
+      <slot name="shortcut"></slot>
+    </span>
+    <Switch v-model="checked" @click.stop />
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
new file mode 100644
index 0000000..d0dba8e
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import type { BuiltinThemePreset } from '@vben/preferences';
+import type { BuiltinThemeType } from '@vben/types';
+
+import { computed, ref, watch } from 'vue';
+
+import { UserRoundPen } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { BUILT_IN_THEME_PRESETS } from '@vben/preferences';
+import { convertToHsl, TinyColor } from '@vben/utils';
+
+import { useThrottleFn } from '@vueuse/core';
+
+defineOptions({
+  name: 'PreferenceBuiltinTheme',
+});
+
+const props = defineProps<{ isDark: boolean }>();
+
+const colorInput = ref();
+const modelValue = defineModel<BuiltinThemeType>({ default: 'default' });
+const themeColorPrimary = defineModel<string>('themeColorPrimary');
+
+const updateThemeColorPrimary = useThrottleFn(
+  (value: string) => {
+    themeColorPrimary.value = value;
+  },
+  300,
+  true,
+  true,
+);
+
+const inputValue = computed(() => {
+  return new TinyColor(themeColorPrimary.value || '').toHexString();
+});
+
+const builtinThemePresets = computed(() => {
+  return [...BUILT_IN_THEME_PRESETS];
+});
+
+function typeView(name: BuiltinThemeType) {
+  switch (name) {
+    case 'custom': {
+      return $t('preferences.theme.builtin.custom');
+    }
+    case 'deep-blue': {
+      return $t('preferences.theme.builtin.deepBlue');
+    }
+    case 'deep-green': {
+      return $t('preferences.theme.builtin.deepGreen');
+    }
+    case 'default': {
+      return $t('preferences.theme.builtin.default');
+    }
+    case 'gray': {
+      return $t('preferences.theme.builtin.gray');
+    }
+    case 'green': {
+      return $t('preferences.theme.builtin.green');
+    }
+
+    case 'neutral': {
+      return $t('preferences.theme.builtin.neutral');
+    }
+    case 'orange': {
+      return $t('preferences.theme.builtin.orange');
+    }
+    case 'pink': {
+      return $t('preferences.theme.builtin.pink');
+    }
+    case 'rose': {
+      return $t('preferences.theme.builtin.rose');
+    }
+    case 'sky-blue': {
+      return $t('preferences.theme.builtin.skyBlue');
+    }
+    case 'slate': {
+      return $t('preferences.theme.builtin.slate');
+    }
+    case 'violet': {
+      return $t('preferences.theme.builtin.violet');
+    }
+    case 'yellow': {
+      return $t('preferences.theme.builtin.yellow');
+    }
+    case 'zinc': {
+      return $t('preferences.theme.builtin.zinc');
+    }
+  }
+}
+
+function handleSelect(theme: BuiltinThemePreset) {
+  modelValue.value = theme.type;
+}
+
+function handleInputChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  updateThemeColorPrimary(convertToHsl(target.value));
+}
+
+function selectColor() {
+  colorInput.value?.[0]?.click?.();
+}
+
+watch(
+  () => [modelValue.value, props.isDark] as [BuiltinThemeType, boolean],
+  ([themeType, isDark], [_, isDarkPrev]) => {
+    const theme = builtinThemePresets.value.find(
+      (item) => item.type === themeType,
+    );
+    if (theme) {
+      const primaryColor = isDark
+        ? theme.darkPrimaryColor || theme.primaryColor
+        : theme.primaryColor;
+
+      if (!(theme.type === 'custom' && isDark !== isDarkPrev)) {
+        themeColorPrimary.value = primaryColor || theme.color;
+      }
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap justify-between">
+    <template v-for="theme in builtinThemePresets" :key="theme.type">
+      <div class="flex cursor-pointer flex-col" @click="handleSelect(theme)">
+        <div
+          :class="{
+            'outline-box-active': theme.type === modelValue,
+          }"
+          class="outline-box flex-center group cursor-pointer"
+        >
+          <template v-if="theme.type !== 'custom'">
+            <div
+              :style="{ backgroundColor: theme.color }"
+              class="mx-9 my-2 size-5 rounded-md"
+            ></div>
+          </template>
+          <template v-else>
+            <div class="size-full px-9 py-2" @click.stop="selectColor">
+              <div class="flex-center relative size-5 rounded-sm">
+                <UserRoundPen
+                  class="z-1 absolute size-5 opacity-60 group-hover:opacity-100"
+                />
+                <input
+                  ref="colorInput"
+                  :value="inputValue"
+                  class="absolute inset-0 opacity-0"
+                  type="color"
+                  @input="handleInputChange"
+                />
+              </div>
+            </div>
+          </template>
+        </div>
+        <div class="text-muted-foreground my-2 text-center text-xs">
+          {{ typeView(theme.type) }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/color-mode.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/color-mode.vue
new file mode 100644
index 0000000..9a41d4e
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/color-mode.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceColorMode',
+});
+
+const appColorWeakMode = defineModel<boolean>('appColorWeakMode', {
+  default: false,
+});
+
+const appColorGrayMode = defineModel<boolean>('appColorGrayMode', {
+  default: false,
+});
+</script>
+
+<template>
+  <SwitchItem v-model="appColorWeakMode">
+    {{ $t('preferences.theme.weakMode') }}
+  </SwitchItem>
+  <SwitchItem v-model="appColorGrayMode">
+    {{ $t('preferences.theme.grayMode') }}
+  </SwitchItem>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
new file mode 100644
index 0000000..b1aaa2d
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceFontSize',
+});
+
+const modelValue = defineModel<number>({
+  default: 16,
+});
+
+const min = 15;
+const max = 22;
+const step = 1;
+
+// 限制输入值在 min 和 max 之间
+watch(
+  modelValue,
+  (newValue) => {
+    if (newValue < min) {
+      modelValue.value = min;
+    } else if (newValue > max) {
+      modelValue.value = max;
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <NumberField
+        v-model="modelValue"
+        :max="max"
+        :min="min"
+        :step="step"
+        class="w-full"
+      >
+        <NumberFieldContent>
+          <NumberFieldDecrement />
+          <NumberFieldInput />
+          <NumberFieldIncrement />
+        </NumberFieldContent>
+      </NumberField>
+      <span class="text-muted-foreground whitespace-nowrap text-xs">px</span>
+    </div>
+    <div class="text-muted-foreground text-xs">
+      {{ $t('preferences.theme.fontSizeTip') }}
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/radius.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/radius.vue
new file mode 100644
index 0000000..4201ed6
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/radius.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceColorMode',
+});
+
+const modelValue = defineModel<string | undefined>('themeRadius', {
+  default: '0.5',
+});
+
+const items = [
+  { label: '0', value: '0' },
+  { label: '0.25', value: '0.25' },
+  { label: '0.5', value: '0.5' },
+  { label: '0.75', value: '0.75' },
+  { label: '1', value: '1' },
+];
+</script>
+
+<template>
+  <ToggleGroup
+    v-model="modelValue"
+    class="gap-2"
+    size="sm"
+    type="single"
+    variant="outline"
+  >
+    <template v-for="item in items" :key="item.value">
+      <ToggleGroupItem
+        :value="item.value"
+        class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 w-16 rounded-sm"
+      >
+        {{ item.label }}
+      </ToggleGroupItem>
+    </template>
+  </ToggleGroup>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue
new file mode 100644
index 0000000..1a5ca4b
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+import type { ThemeModeType } from '@vben/types';
+
+import { MoonStar, Sun, SunMoon } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceTheme',
+});
+
+const modelValue = defineModel<string>({ default: 'auto' });
+const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
+const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
+
+const THEME_PRESET: Array<{ icon: Component; name: ThemeModeType }> = [
+  {
+    icon: Sun,
+    name: 'light',
+  },
+  {
+    icon: MoonStar,
+    name: 'dark',
+  },
+  {
+    icon: SunMoon,
+    name: 'auto',
+  },
+];
+
+function activeClass(theme: string): string[] {
+  return theme === modelValue.value ? ['outline-box-active'] : [];
+}
+
+function nameView(name: string) {
+  switch (name) {
+    case 'auto': {
+      return $t('preferences.followSystem');
+    }
+    case 'dark': {
+      return $t('preferences.theme.dark');
+    }
+    case 'light': {
+      return $t('preferences.theme.light');
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap justify-between">
+    <template v-for="theme in THEME_PRESET" :key="theme.name">
+      <div
+        class="flex cursor-pointer flex-col"
+        @click="modelValue = theme.name"
+      >
+        <div
+          :class="activeClass(theme.name)"
+          class="outline-box flex-center py-4"
+        >
+          <component :is="theme.icon" class="mx-9 size-5" />
+        </div>
+        <div class="text-muted-foreground mt-2 text-center text-xs">
+          {{ nameView(theme.name) }}
+        </div>
+      </div>
+    </template>
+
+    <SwitchItem
+      v-model="themeSemiDarkSidebar"
+      :disabled="modelValue === 'dark'"
+      class="mt-6"
+    >
+      {{ $t('preferences.theme.darkSidebar') }}
+    </SwitchItem>
+    <SwitchItem v-model="themeSemiDarkHeader" :disabled="modelValue === 'dark'">
+      {{ $t('preferences.theme.darkHeader') }}
+    </SwitchItem>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue
new file mode 100644
index 0000000..3f2a4a2
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { SelectOption } from '@vben/types';
+
+import { ToggleGroup, ToggleGroupItem } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceToggleItem',
+});
+
+withDefaults(defineProps<{ disabled?: boolean; items?: SelectOption[] }>(), {
+  disabled: false,
+  items: () => [],
+});
+
+const modelValue = defineModel<string>();
+</script>
+
+<template>
+  <div
+    :class="{
+      'pointer-events-none opacity-50': disabled,
+    }"
+    class="hover:bg-accent flex w-full items-center justify-between rounded-md px-2 py-2"
+    disabled
+  >
+    <span class="text-sm">
+      <slot></slot>
+    </span>
+    <ToggleGroup
+      v-model="modelValue"
+      class="gap-2"
+      size="sm"
+      type="single"
+      variant="outline"
+    >
+      <template v-for="item in items" :key="item.value">
+        <ToggleGroupItem
+          :value="item.value"
+          class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 rounded-sm"
+        >
+          {{ item.label }}
+        </ToggleGroupItem>
+      </template>
+    </ToggleGroup>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/content-compact.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/content-compact.vue
new file mode 100644
index 0000000..a1bcefd
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/content-compact.vue
@@ -0,0 +1,119 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <rect
+        id="svg_8"
+        fill="hsl(var(--primary))"
+        height="9.07027"
+        stroke="null"
+        width="104.07934"
+        x="-0.07419"
+        y="-0.05773"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="15.58168"
+        y="3.20832"
+      />
+      <path
+        id="svg_12"
+        d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
+        fill="#ffffff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="41.98275"
+        x="45.37589"
+        y="13.53192"
+      />
+      <path
+        id="svg_14"
+        d="m16.4123,15.53192c0,-1.08676 0.74096,-2 1.62271,-2l21.74653,0c0.88175,0 1.62271,0.91324 1.62271,2l0,17.24865c0,1.08676 -0.74096,2 -1.62271,2l-21.74653,0c-0.88175,0 -1.62271,-0.91324 -1.62271,-2l0,-17.24865z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="71.10636"
+        x="16.54743"
+        y="39.34689"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="28.14924"
+        y="3.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="41.25735"
+        y="3.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="54.23033"
+        y="3.07319"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.13843"
+        rx="2"
+        stroke="null"
+        width="7.78397"
+        x="1.5327"
+        y="0.881"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/full-content.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/full-content.vue
new file mode 100644
index 0000000..5cbcaca
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/full-content.vue
@@ -0,0 +1,50 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        id="svg_1"
+        d="m0.13514,4.13514c0,-2.17352 1.82648,-4 4,-4l96,0c2.17352,0 4,1.82648 4,4l0,58c0,2.17352 -1.82648,4 -4,4l-96,0c-2.17352,0 -4,-1.82648 -4,-4l0,-58z"
+        fill="currentColor"
+        fill-opacity="0.02"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="26.57155"
+        rx="2"
+        stroke="null"
+        width="53.18333"
+        x="45.79979"
+        y="3.77232"
+      />
+      <path
+        id="svg_14"
+        d="m4.28142,5.96169c0,-1.37748 1.06465,-2.53502 2.33158,-2.53502l31.2463,0c1.26693,0 2.33158,1.15754 2.33158,2.53502l0,21.86282c0,1.37748 -1.06465,2.53502 -2.33158,2.53502l-31.2463,0c-1.26693,0 -2.33158,-1.15754 -2.33158,-2.53502l0,-21.86282z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="25.02247"
+        rx="2"
+        stroke="null"
+        width="94.39371"
+        x="4.56735"
+        y="34.92584"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/header-mixed-nav.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/header-mixed-nav.vue
new file mode 100644
index 0000000..d5c9367
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/header-mixed-nav.vue
@@ -0,0 +1,202 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <path
+        id="svg_2"
+        d="m-3.37838,3.7543a1.93401,4.02457 0 0 1 1.93401,-4.02457l11.3488,0l0,66.40541l-11.3488,0a1.93401,4.02457 0 0 1 -1.93401,-4.02457l0,-58.35627z"
+        fill="hsl(var(--primary))"
+        stroke="null"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="15.46086"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.67897"
+        rx="2"
+        stroke="null"
+        width="8.18938"
+        x="0.58676"
+        y="1.42154"
+      />
+      <rect
+        id="svg_8"
+        fill="hsl(var(--primary))"
+        height="9.07027"
+        rx="2"
+        stroke="null"
+        width="75.91967"
+        x="25.38277"
+        y="1.42876"
+      />
+      <rect
+        id="svg_9"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="27.91529"
+        y="3.69284"
+      />
+      <rect
+        id="svg_10"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="80.75054"
+        y="3.62876"
+      />
+      <rect
+        id="svg_11"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="87.78868"
+        y="3.69981"
+      />
+      <rect
+        id="svg_12"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="94.6847"
+        y="3.62876"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="42.9287"
+        x="58.75427"
+        y="14.613"
+      />
+      <rect
+        id="svg_14"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="20.97838"
+        rx="2"
+        stroke="null"
+        width="28.36894"
+        x="26.14342"
+        y="14.613"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="75.09493"
+        x="26.34264"
+        y="39.68822"
+      />
+      <rect
+        id="svg_5"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.79832"
+        y="28.39462"
+      />
+      <rect
+        id="svg_6"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="41.80156"
+      />
+      <rect
+        id="svg_7"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="55.36623"
+      />
+      <rect
+        id="svg_16"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="65.72065"
+        stroke="null"
+        width="12.49265"
+        x="9.85477"
+        y="-0.02618"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="35.14924"
+        y="4.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="47.25735"
+        y="4.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="59.23033"
+        y="4.07319"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/header-nav.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/header-nav.vue
new file mode 100644
index 0000000..18158b3
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/header-nav.vue
@@ -0,0 +1,119 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <rect
+        id="svg_8"
+        fill="hsl(var(--primary))"
+        height="9.07027"
+        stroke="null"
+        width="104.07934"
+        x="-0.07419"
+        y="-0.05773"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="15.58168"
+        y="3.20832"
+      />
+      <path
+        id="svg_12"
+        d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
+        fill="#ffffff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="53.60438"
+        x="43.484"
+        y="13.66705"
+      />
+      <path
+        id="svg_14"
+        d="m3.43932,15.53192c0,-1.08676 1.03344,-2 2.26323,-2l30.33036,0c1.22979,0 2.26323,0.91324 2.26323,2l0,17.24865c0,1.08676 -1.03344,2 -2.26323,2l-30.33036,0c-1.22979,0 -2.26323,-0.91324 -2.26323,-2l0,-17.24865z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="95.02528"
+        x="3.30419"
+        y="39.34689"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="28.14924"
+        y="3.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="41.25735"
+        y="3.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="54.23033"
+        y="3.07319"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.13843"
+        rx="2"
+        stroke="null"
+        width="7.78397"
+        x="1.5327"
+        y="0.881"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue
new file mode 100644
index 0000000..b44e249
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/header-sidebar-nav.vue
@@ -0,0 +1,177 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <rect
+        id="svg_8"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="9.07027"
+        stroke="null"
+        width="104.07934"
+        x="-0.07419"
+        y="-0.05773"
+      />
+      <rect
+        id="svg_3"
+        fill="#b2b2b2"
+        height="1.689"
+        rx="1.395"
+        stroke="null"
+        width="6.52486"
+        x="10.08168"
+        y="3.50832"
+      />
+      <rect
+        id="svg_10"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="80.75054"
+        y="2.89362"
+      />
+      <rect
+        id="svg_11"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="87.58249"
+        y="2.89362"
+      />
+      <path
+        id="svg_12"
+        d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
+        fill="#ffffff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="44.13071"
+        x="53.37873"
+        y="13.45652"
+      />
+      <path
+        id="svg_14"
+        d="m19.4393,15.74245c0,-1.08676 0.79001,-2 1.73013,-2l23.18605,0c0.94011,0 1.73013,0.91324 1.73013,2l0,17.24865c0,1.08676 -0.79001,2 -1.73013,2l-23.18605,0c-0.94011,0 -1.73013,-0.91324 -1.73013,-2l0,-17.24865z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="78.39372"
+        x="19.93575"
+        y="39.34689"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="28.14924"
+        y="3.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="41.25735"
+        y="3.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="54.23033"
+        y="3.07319"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="5.13843"
+        rx="2"
+        stroke="null"
+        width="5.78397"
+        x="1.5327"
+        y="1.081"
+      />
+      <rect
+        id="svg_5"
+        fill="hsl(var(--primary))"
+        height="56.81191"
+        stroke="null"
+        width="15.44642"
+        x="-0.06423"
+        y="9.03113"
+      />
+      <path
+        id="svg_2"
+        d="m2.38669,15.38074c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="#fff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_6"
+        d="m2.38669,28.43336c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="#fff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_7"
+        d="m2.17616,41.27545c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="#fff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_9"
+        d="m2.17616,54.32806c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="#fff"
+        opacity="undefined"
+        stroke="null"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/index.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/index.ts
new file mode 100644
index 0000000..7eec1b4
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/index.ts
@@ -0,0 +1,12 @@
+import HeaderNav from './header-nav.vue';
+
+export { default as ContentCompact } from './content-compact.vue';
+export { default as FullContent } from './full-content.vue';
+export { default as HeaderMixedNav } from './header-mixed-nav.vue';
+export { default as HeaderSidebarNav } from './header-sidebar-nav.vue';
+export { default as MixedNav } from './mixed-nav.vue';
+export { default as SidebarMixedNav } from './sidebar-mixed-nav.vue';
+export { default as SidebarNav } from './sidebar-nav.vue';
+
+const ContentWide = HeaderNav;
+export { ContentWide, HeaderNav };
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/mixed-nav.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/mixed-nav.vue
new file mode 100644
index 0000000..d194383
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/mixed-nav.vue
@@ -0,0 +1,161 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <rect
+        id="svg_8"
+        fill="hsl(var(--primary))"
+        height="9.07027"
+        stroke="null"
+        width="104.07934"
+        x="-0.07419"
+        y="-0.05773"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="15.58168"
+        y="3.20832"
+      />
+      <path
+        id="svg_12"
+        d="m98.19822,2.872c0,-0.54338 0.45662,-1 1,-1l1.925,0c0.54338,0 1,0.45662 1,1l0,2.4c0,0.54338 -0.45662,1 -1,1l-1.925,0c-0.54338,0 -1,-0.45662 -1,-1l0,-2.4z"
+        fill="#ffffff"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="44.13071"
+        x="53.37873"
+        y="13.45652"
+      />
+      <path
+        id="svg_14"
+        d="m19.4393,15.74245c0,-1.08676 0.79001,-2 1.73013,-2l23.18605,0c0.94011,0 1.73013,0.91324 1.73013,2l0,17.24865c0,1.08676 -0.79001,2 -1.73013,2l-23.18605,0c-0.94011,0 -1.73013,-0.91324 -1.73013,-2l0,-17.24865z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="78.39372"
+        x="19.93575"
+        y="39.34689"
+      />
+      <rect
+        id="svg_21"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="28.14924"
+        y="3.07319"
+      />
+      <rect
+        id="svg_22"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="41.25735"
+        y="3.20832"
+      />
+      <rect
+        id="svg_23"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="7.52486"
+        x="54.23033"
+        y="3.07319"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.13843"
+        rx="2"
+        stroke="null"
+        width="7.78397"
+        x="1.5327"
+        y="0.881"
+      />
+      <rect
+        id="svg_5"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="56.81191"
+        stroke="null"
+        width="15.44642"
+        x="-0.06423"
+        y="9.03113"
+      />
+      <path
+        id="svg_2"
+        d="m2.38669,15.38074c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_6"
+        d="m2.38669,28.43336c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_7"
+        d="m2.17616,41.27545c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+      <path
+        id="svg_9"
+        d="m2.17616,54.32806c0,-0.20384 0.27195,-0.37513 0.59557,-0.37513l7.98149,0c0.32362,0 0.59557,0.17129 0.59557,0.37513l0,3.23525c0,0.20384 -0.27195,0.37513 -0.59557,0.37513l-7.98149,0c-0.32362,0 -0.59557,-0.17129 -0.59557,-0.37513l0,-3.23525z"
+        fill="currentColor"
+        fill-opacity="0.08"
+        opacity="undefined"
+        stroke="null"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/setting.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/setting.vue
new file mode 100644
index 0000000..d824e11
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/setting.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.9 12.66a1 1 0 0 1 0-1.32l1.28-1.44a1 1 0 0 0 .12-1.17l-2-3.46a1 1 0 0 0-1.07-.48l-1.88.38a1 1 0 0 1-1.15-.66l-.61-1.83a1 1 0 0 0-.95-.68h-4a1 1 0 0 0-1 .68l-.56 1.83a1 1 0 0 1-1.15.66L5 4.79a1 1 0 0 0-1 .48L2 8.73a1 1 0 0 0 .1 1.17l1.27 1.44a1 1 0 0 1 0 1.32L2.1 14.1a1 1 0 0 0-.1 1.17l2 3.46a1 1 0 0 0 1.07.48l1.88-.38a1 1 0 0 1 1.15.66l.61 1.83a1 1 0 0 0 1 .68h4a1 1 0 0 0 .95-.68l.61-1.83a1 1 0 0 1 1.15-.66l1.88.38a1 1 0 0 0 1.07-.48l2-3.46a1 1 0 0 0-.12-1.17ZM18.41 14l.8.9l-1.28 2.22l-1.18-.24a3 3 0 0 0-3.45 2L12.92 20h-2.56L10 18.86a3 3 0 0 0-3.45-2l-1.18.24l-1.3-2.21l.8-.9a3 3 0 0 0 0-4l-.8-.9l1.28-2.2l1.18.24a3 3 0 0 0 3.45-2L10.36 4h2.56l.38 1.14a3 3 0 0 0 3.45 2l1.18-.24l1.28 2.22l-.8.9a3 3 0 0 0 0 3.98m-6.77-6a4 4 0 1 0 4 4a4 4 0 0 0-4-4m0 6a2 2 0 1 1 2-2a2 2 0 0 1-2 2"
+    />
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/sidebar-mixed-nav.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/sidebar-mixed-nav.vue
new file mode 100644
index 0000000..8fc0ba4
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/sidebar-mixed-nav.vue
@@ -0,0 +1,173 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+        x="0.13514"
+        y="0.13514"
+      />
+      <path
+        id="svg_2"
+        d="m-3.37838,3.7543a1.93401,4.02457 0 0 1 1.93401,-4.02457l11.3488,0l0,66.40541l-11.3488,0a1.93401,4.02457 0 0 1 -1.93401,-4.02457l0,-58.35627z"
+        fill="hsl(var(--primary))"
+        stroke="null"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="15.46086"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="7.67897"
+        rx="2"
+        stroke="null"
+        width="8.18938"
+        x="0.58676"
+        y="1.42154"
+      />
+      <rect
+        id="svg_8"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="9.07027"
+        rx="2"
+        stroke="null"
+        width="75.91967"
+        x="25.38277"
+        y="1.42876"
+      />
+      <rect
+        id="svg_9"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="27.91529"
+        y="3.69284"
+      />
+      <rect
+        id="svg_10"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="80.75054"
+        y="3.62876"
+      />
+      <rect
+        id="svg_11"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="87.78868"
+        y="3.69981"
+      />
+      <rect
+        id="svg_12"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="94.6847"
+        y="3.62876"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="42.9287"
+        x="58.75427"
+        y="14.613"
+      />
+      <rect
+        id="svg_14"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="20.97838"
+        rx="2"
+        stroke="null"
+        width="28.36894"
+        x="26.14342"
+        y="14.613"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="75.09493"
+        x="26.34264"
+        y="39.68822"
+      />
+      <rect
+        id="svg_5"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.79832"
+        y="28.39462"
+      />
+      <rect
+        id="svg_6"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="41.80156"
+      />
+      <rect
+        id="svg_7"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        stroke="null"
+        width="5.47439"
+        x="1.64059"
+        y="55.36623"
+      />
+      <rect
+        id="svg_16"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="65.72065"
+        stroke="null"
+        width="12.49265"
+        x="9.85477"
+        y="-0.02618"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/sidebar-nav.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/sidebar-nav.vue
new file mode 100644
index 0000000..83ff399
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/icons/sidebar-nav.vue
@@ -0,0 +1,153 @@
+<template>
+  <svg
+    class="custom-radio-image"
+    fill="none"
+    height="66"
+    width="104"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <rect
+        id="svg_1"
+        fill="currentColor"
+        fill-opacity="0.02"
+        height="66"
+        rx="4"
+        stroke="null"
+        width="104"
+      />
+      <path
+        id="svg_2"
+        d="m-3.37838,3.61916a4.4919,4.02457 0 0 1 4.4919,-4.02457l26.35848,0l0,66.40541l-26.35848,0a4.4919,4.02457 0 0 1 -4.4919,-4.02457l0,-58.35627z"
+        fill="hsl(var(--primary))"
+        stroke="null"
+      />
+      <rect
+        id="svg_3"
+        fill="#e5e5e5"
+        height="2.789"
+        rx="1.395"
+        width="17.66"
+        x="4.906"
+        y="23.884"
+      />
+      <rect
+        id="svg_4"
+        fill="#ffffff"
+        height="9.706"
+        rx="2"
+        width="9.811"
+        x="8.83"
+        y="5.881"
+      />
+      <path
+        id="svg_5"
+        d="m4.906,35.833c0,-0.75801 0.63699,-1.395 1.395,-1.395l14.87,0c0.75801,0 1.395,0.63699 1.395,1.395l0,-0.001c0,0.75801 -0.63699,1.395 -1.395,1.395l-14.87,0c-0.75801,0 -1.395,-0.63699 -1.395,-1.395l0,0.001z"
+        fill="#ffffff"
+        opacity="undefined"
+      />
+      <rect
+        id="svg_6"
+        fill="#ffffff"
+        height="2.789"
+        rx="1.395"
+        width="17.66"
+        x="4.906"
+        y="44.992"
+      />
+      <rect
+        id="svg_7"
+        fill="#ffffff"
+        height="2.789"
+        rx="1.395"
+        width="17.66"
+        x="4.906"
+        y="55.546"
+      />
+      <rect
+        id="svg_8"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="9.07027"
+        rx="2"
+        stroke="null"
+        width="73.53879"
+        x="28.97986"
+        y="1.42876"
+      />
+      <rect
+        id="svg_9"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="32.039"
+        y="3.89903"
+      />
+      <rect
+        id="svg_10"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="80.75054"
+        y="3.62876"
+      />
+      <rect
+        id="svg_11"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="87.58249"
+        y="3.49362"
+      />
+      <rect
+        id="svg_12"
+        fill="#b2b2b2"
+        height="4.4"
+        rx="1"
+        stroke="null"
+        width="3.925"
+        x="94.6847"
+        y="3.62876"
+      />
+      <rect
+        id="svg_13"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.51892"
+        rx="2"
+        stroke="null"
+        width="45.63141"
+        x="56.05157"
+        y="14.613"
+      />
+      <rect
+        id="svg_14"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="20.97838"
+        rx="2"
+        stroke="null"
+        width="22.82978"
+        x="29.38527"
+        y="14.613"
+      />
+      <rect
+        id="svg_15"
+        fill="currentColor"
+        fill-opacity="0.08"
+        height="21.65405"
+        rx="2"
+        stroke="null"
+        width="72.45771"
+        x="28.97986"
+        y="39.48203"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/index.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/index.ts
new file mode 100644
index 0000000..2c737d5
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/index.ts
@@ -0,0 +1,3 @@
+export { default as PreferencesButton } from './preferences-button.vue';
+export { default as Preferences } from './preferences.vue';
+export * from './use-open-preferences';
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/preferences-button.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
new file mode 100644
index 0000000..8598bb2
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { Settings } from '@vben/icons';
+
+import { VbenIconButton } from '@vben-core/shadcn-ui';
+
+import Preferences from './preferences.vue';
+
+const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
+
+function clearPreferencesAndLogout() {
+  emit('clearPreferencesAndLogout');
+}
+</script>
+<template>
+  <Preferences @clear-preferences-and-logout="clearPreferencesAndLogout">
+    <VbenIconButton class="hover:animate-[shrink_0.3s_ease-in-out]">
+      <Settings class="text-foreground size-4" />
+    </VbenIconButton>
+  </Preferences>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
new file mode 100644
index 0000000..c88a9bc
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -0,0 +1,493 @@
+<script setup lang="ts">
+import type { SupportedLanguagesType } from '@vben/locales';
+import type {
+  BreadcrumbStyleType,
+  BuiltinThemeType,
+  ContentCompactType,
+  LayoutHeaderMenuAlignType,
+  LayoutHeaderModeType,
+  LayoutType,
+  NavigationStyleType,
+  PreferencesButtonPositionType,
+  ThemeModeType,
+} from '@vben/types';
+
+import type { SegmentedItem } from '@vben-core/shadcn-ui';
+
+import { computed, ref } from 'vue';
+
+import { Copy, Pin, PinOff, RotateCw } from '@vben/icons';
+import { $t, loadLocaleMessages } from '@vben/locales';
+import {
+  clearPreferencesCache,
+  preferences,
+  resetPreferences,
+  usePreferences,
+} from '@vben/preferences';
+
+import { useVbenDrawer } from '@vben-core/popup-ui';
+import {
+  VbenButton,
+  VbenIconButton,
+  VbenSegmented,
+} from '@vben-core/shadcn-ui';
+import { globalShareState } from '@vben-core/shared/global-state';
+
+import { useClipboard } from '@vueuse/core';
+
+import {
+  Animation,
+  Block,
+  Breadcrumb,
+  BuiltinTheme,
+  ColorMode,
+  Content,
+  Copyright,
+  FontSize,
+  Footer,
+  General,
+  GlobalShortcutKeys,
+  Header,
+  Layout,
+  Navigation,
+  Radius,
+  Sidebar,
+  Tabbar,
+  Theme,
+  Widget,
+} from './blocks';
+
+const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
+
+const message = globalShareState.getMessage();
+
+const appLocale = defineModel<SupportedLanguagesType>('appLocale');
+const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
+const appLayout = defineModel<LayoutType>('appLayout');
+const appColorGrayMode = defineModel<boolean>('appColorGrayMode');
+const appColorWeakMode = defineModel<boolean>('appColorWeakMode');
+const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
+const appWatermark = defineModel<boolean>('appWatermark');
+const appWatermarkContent = defineModel<string>('appWatermarkContent');
+const appEnableCheckUpdates = defineModel<boolean>('appEnableCheckUpdates');
+const appEnableStickyPreferencesNavigationBar = defineModel<boolean>(
+  'appEnableStickyPreferencesNavigationBar',
+);
+const appPreferencesButtonPosition = defineModel<PreferencesButtonPositionType>(
+  'appPreferencesButtonPosition',
+);
+
+const transitionProgress = defineModel<boolean>('transitionProgress');
+const transitionName = defineModel<string>('transitionName');
+const transitionLoading = defineModel<boolean>('transitionLoading');
+const transitionEnable = defineModel<boolean>('transitionEnable');
+
+const themeColorPrimary = defineModel<string>('themeColorPrimary');
+const themeBuiltinType = defineModel<BuiltinThemeType>('themeBuiltinType');
+const themeMode = defineModel<ThemeModeType>('themeMode');
+const themeRadius = defineModel<string>('themeRadius');
+const themeFontSize = defineModel<number>('themeFontSize');
+const themeSemiDarkSidebar = defineModel<boolean>('themeSemiDarkSidebar');
+const themeSemiDarkHeader = defineModel<boolean>('themeSemiDarkHeader');
+
+const sidebarEnable = defineModel<boolean>('sidebarEnable');
+const sidebarWidth = defineModel<number>('sidebarWidth');
+const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
+const sidebarCollapsedShowTitle = defineModel<boolean>(
+  'sidebarCollapsedShowTitle',
+);
+const sidebarAutoActivateChild = defineModel<boolean>(
+  'sidebarAutoActivateChild',
+);
+const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
+const sidebarCollapsedButton = defineModel<boolean>('sidebarCollapsedButton');
+const sidebarFixedButton = defineModel<boolean>('sidebarFixedButton');
+const headerEnable = defineModel<boolean>('headerEnable');
+const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
+const headerMenuAlign =
+  defineModel<LayoutHeaderMenuAlignType>('headerMenuAlign');
+
+const breadcrumbEnable = defineModel<boolean>('breadcrumbEnable');
+const breadcrumbShowIcon = defineModel<boolean>('breadcrumbShowIcon');
+const breadcrumbShowHome = defineModel<boolean>('breadcrumbShowHome');
+const breadcrumbStyleType = defineModel<BreadcrumbStyleType>(
+  'breadcrumbStyleType',
+);
+const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
+
+const tabbarEnable = defineModel<boolean>('tabbarEnable');
+const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
+const tabbarShowMore = defineModel<boolean>('tabbarShowMore');
+const tabbarShowMaximize = defineModel<boolean>('tabbarShowMaximize');
+const tabbarPersist = defineModel<boolean>('tabbarPersist');
+const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
+const tabbarWheelable = defineModel<boolean>('tabbarWheelable');
+const tabbarStyleType = defineModel<string>('tabbarStyleType');
+const tabbarMaxCount = defineModel<number>('tabbarMaxCount');
+const tabbarMiddleClickToClose = defineModel<boolean>(
+  'tabbarMiddleClickToClose',
+);
+
+const navigationStyleType = defineModel<NavigationStyleType>(
+  'navigationStyleType',
+);
+const navigationSplit = defineModel<boolean>('navigationSplit');
+const navigationAccordion = defineModel<boolean>('navigationAccordion');
+
+// const logoVisible = defineModel<boolean>('logoVisible');
+
+const footerEnable = defineModel<boolean>('footerEnable');
+const footerFixed = defineModel<boolean>('footerFixed');
+
+const copyrightSettingShow = defineModel<boolean>('copyrightSettingShow');
+const copyrightEnable = defineModel<boolean>('copyrightEnable');
+const copyrightCompanyName = defineModel<string>('copyrightCompanyName');
+const copyrightCompanySiteLink = defineModel<string>(
+  'copyrightCompanySiteLink',
+);
+const copyrightDate = defineModel<string>('copyrightDate');
+const copyrightIcp = defineModel<string>('copyrightIcp');
+const copyrightIcpLink = defineModel<string>('copyrightIcpLink');
+
+const shortcutKeysEnable = defineModel<boolean>('shortcutKeysEnable');
+const shortcutKeysGlobalSearch = defineModel<boolean>(
+  'shortcutKeysGlobalSearch',
+);
+const shortcutKeysGlobalLogout = defineModel<boolean>(
+  'shortcutKeysGlobalLogout',
+);
+
+const shortcutKeysGlobalLockScreen = defineModel<boolean>(
+  'shortcutKeysGlobalLockScreen',
+);
+
+const widgetGlobalSearch = defineModel<boolean>('widgetGlobalSearch');
+const widgetFullscreen = defineModel<boolean>('widgetFullscreen');
+const widgetLanguageToggle = defineModel<boolean>('widgetLanguageToggle');
+const widgetNotification = defineModel<boolean>('widgetNotification');
+const widgetThemeToggle = defineModel<boolean>('widgetThemeToggle');
+const widgetSidebarToggle = defineModel<boolean>('widgetSidebarToggle');
+const widgetLockScreen = defineModel<boolean>('widgetLockScreen');
+const widgetRefresh = defineModel<boolean>('widgetRefresh');
+
+const {
+  diffPreference,
+  isDark,
+  isFullContent,
+  isHeaderNav,
+  isHeaderSidebarNav,
+  isMixedNav,
+  isSideMixedNav,
+  isSideMode,
+  isSideNav,
+} = usePreferences();
+const { copy } = useClipboard({ legacy: true });
+
+const [Drawer] = useVbenDrawer();
+
+const activeTab = ref('appearance');
+
+const tabs = computed((): SegmentedItem[] => {
+  return [
+    {
+      label: $t('preferences.appearance'),
+      value: 'appearance',
+    },
+    {
+      label: $t('preferences.layout'),
+      value: 'layout',
+    },
+    {
+      label: $t('preferences.shortcutKeys.title'),
+      value: 'shortcutKey',
+    },
+    {
+      label: $t('preferences.general'),
+      value: 'general',
+    },
+  ];
+});
+
+const showBreadcrumbConfig = computed(() => {
+  return (
+    !isFullContent.value &&
+    !isMixedNav.value &&
+    !isHeaderNav.value &&
+    preferences.header.enable
+  );
+});
+
+async function handleCopy() {
+  await copy(JSON.stringify(diffPreference.value, null, 2));
+
+  message.copyPreferencesSuccess?.(
+    $t('preferences.copyPreferencesSuccessTitle'),
+    $t('preferences.copyPreferencesSuccess'),
+  );
+}
+
+async function handleClearCache() {
+  resetPreferences();
+  clearPreferencesCache();
+  emit('clearPreferencesAndLogout');
+}
+
+async function handleReset() {
+  if (!diffPreference.value) {
+    return;
+  }
+  resetPreferences();
+  await loadLocaleMessages(preferences.app.locale);
+}
+</script>
+
+<template>
+  <div>
+    <Drawer
+      :description="$t('preferences.subtitle')"
+      :title="$t('preferences.title')"
+      class="!border-0 sm:max-w-sm"
+    >
+      <template #extra>
+        <div class="flex items-center">
+          <VbenIconButton
+            :disabled="!diffPreference"
+            :tooltip="$t('preferences.resetTip')"
+            class="relative"
+            @click="handleReset"
+          >
+            <span
+              v-if="diffPreference"
+              class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
+            ></span>
+            <RotateCw class="size-4" />
+          </VbenIconButton>
+          <VbenIconButton
+            :tooltip="
+              appEnableStickyPreferencesNavigationBar
+                ? $t('preferences.disableStickyPreferencesNavigationBar')
+                : $t('preferences.enableStickyPreferencesNavigationBar')
+            "
+            class="relative"
+            @click="
+              () =>
+                (appEnableStickyPreferencesNavigationBar =
+                  !appEnableStickyPreferencesNavigationBar)
+            "
+          >
+            <PinOff
+              v-if="appEnableStickyPreferencesNavigationBar"
+              class="size-4"
+            />
+            <Pin v-else class="size-4" />
+          </VbenIconButton>
+        </div>
+      </template>
+
+      <div>
+        <VbenSegmented
+          v-model="activeTab"
+          :tabs="tabs"
+          :class="{
+            'sticky-tabs-header': appEnableStickyPreferencesNavigationBar,
+          }"
+        >
+          <template #general>
+            <Block :title="$t('preferences.general')">
+              <General
+                v-model:app-dynamic-title="appDynamicTitle"
+                v-model:app-enable-check-updates="appEnableCheckUpdates"
+                v-model:app-locale="appLocale"
+                v-model:app-watermark="appWatermark"
+                v-model:app-watermark-content="appWatermarkContent"
+              />
+            </Block>
+
+            <Block :title="$t('preferences.animation.title')">
+              <Animation
+                v-model:transition-enable="transitionEnable"
+                v-model:transition-loading="transitionLoading"
+                v-model:transition-name="transitionName"
+                v-model:transition-progress="transitionProgress"
+              />
+            </Block>
+          </template>
+          <template #appearance>
+            <Block :title="$t('preferences.theme.title')">
+              <Theme
+                v-model="themeMode"
+                v-model:theme-semi-dark-header="themeSemiDarkHeader"
+                v-model:theme-semi-dark-sidebar="themeSemiDarkSidebar"
+              />
+            </Block>
+            <Block :title="$t('preferences.theme.builtin.title')">
+              <BuiltinTheme
+                v-model="themeBuiltinType"
+                v-model:theme-color-primary="themeColorPrimary"
+                :is-dark="isDark"
+              />
+            </Block>
+            <Block :title="$t('preferences.theme.radius')">
+              <Radius v-model="themeRadius" />
+            </Block>
+            <Block :title="$t('preferences.theme.fontSize')">
+              <FontSize v-model="themeFontSize" />
+            </Block>
+            <Block :title="$t('preferences.other')">
+              <ColorMode
+                v-model:app-color-gray-mode="appColorGrayMode"
+                v-model:app-color-weak-mode="appColorWeakMode"
+              />
+            </Block>
+          </template>
+          <template #layout>
+            <Block :title="$t('preferences.layout')">
+              <Layout v-model="appLayout" />
+            </Block>
+            <Block :title="$t('preferences.content')">
+              <Content v-model="appContentCompact" />
+            </Block>
+
+            <Block :title="$t('preferences.sidebar.title')">
+              <Sidebar
+                v-model:sidebar-auto-activate-child="sidebarAutoActivateChild"
+                v-model:sidebar-collapsed="sidebarCollapsed"
+                v-model:sidebar-collapsed-show-title="sidebarCollapsedShowTitle"
+                v-model:sidebar-enable="sidebarEnable"
+                v-model:sidebar-expand-on-hover="sidebarExpandOnHover"
+                v-model:sidebar-width="sidebarWidth"
+                v-model:sidebar-collapsed-button="sidebarCollapsedButton"
+                v-model:sidebar-fixed-button="sidebarFixedButton"
+                :current-layout="appLayout"
+                :disabled="!isSideMode"
+              />
+            </Block>
+
+            <Block :title="$t('preferences.header.title')">
+              <Header
+                v-model:header-enable="headerEnable"
+                v-model:header-menu-align="headerMenuAlign"
+                v-model:header-mode="headerMode"
+                :disabled="isFullContent"
+              />
+            </Block>
+
+            <Block :title="$t('preferences.navigationMenu.title')">
+              <Navigation
+                v-model:navigation-accordion="navigationAccordion"
+                v-model:navigation-split="navigationSplit"
+                v-model:navigation-style-type="navigationStyleType"
+                :disabled="isFullContent"
+                :disabled-navigation-split="!isMixedNav"
+              />
+            </Block>
+
+            <Block :title="$t('preferences.breadcrumb.title')">
+              <Breadcrumb
+                v-model:breadcrumb-enable="breadcrumbEnable"
+                v-model:breadcrumb-hide-only-one="breadcrumbHideOnlyOne"
+                v-model:breadcrumb-show-home="breadcrumbShowHome"
+                v-model:breadcrumb-show-icon="breadcrumbShowIcon"
+                v-model:breadcrumb-style-type="breadcrumbStyleType"
+                :disabled="
+                  !showBreadcrumbConfig ||
+                  !(isSideNav || isSideMixedNav || isHeaderSidebarNav)
+                "
+              />
+            </Block>
+            <Block :title="$t('preferences.tabbar.title')">
+              <Tabbar
+                v-model:tabbar-draggable="tabbarDraggable"
+                v-model:tabbar-enable="tabbarEnable"
+                v-model:tabbar-persist="tabbarPersist"
+                v-model:tabbar-show-icon="tabbarShowIcon"
+                v-model:tabbar-show-maximize="tabbarShowMaximize"
+                v-model:tabbar-show-more="tabbarShowMore"
+                v-model:tabbar-style-type="tabbarStyleType"
+                v-model:tabbar-wheelable="tabbarWheelable"
+                v-model:tabbar-max-count="tabbarMaxCount"
+                v-model:tabbar-middle-click-to-close="tabbarMiddleClickToClose"
+              />
+            </Block>
+            <Block :title="$t('preferences.widget.title')">
+              <Widget
+                v-model:app-preferences-button-position="
+                  appPreferencesButtonPosition
+                "
+                v-model:widget-fullscreen="widgetFullscreen"
+                v-model:widget-global-search="widgetGlobalSearch"
+                v-model:widget-language-toggle="widgetLanguageToggle"
+                v-model:widget-lock-screen="widgetLockScreen"
+                v-model:widget-notification="widgetNotification"
+                v-model:widget-refresh="widgetRefresh"
+                v-model:widget-sidebar-toggle="widgetSidebarToggle"
+                v-model:widget-theme-toggle="widgetThemeToggle"
+              />
+            </Block>
+            <Block :title="$t('preferences.footer.title')">
+              <Footer
+                v-model:footer-enable="footerEnable"
+                v-model:footer-fixed="footerFixed"
+              />
+            </Block>
+            <Block
+              v-if="copyrightSettingShow"
+              :title="$t('preferences.copyright.title')"
+            >
+              <Copyright
+                v-model:copyright-company-name="copyrightCompanyName"
+                v-model:copyright-company-site-link="copyrightCompanySiteLink"
+                v-model:copyright-date="copyrightDate"
+                v-model:copyright-enable="copyrightEnable"
+                v-model:copyright-icp="copyrightIcp"
+                v-model:copyright-icp-link="copyrightIcpLink"
+                :disabled="!footerEnable"
+              />
+            </Block>
+          </template>
+
+          <template #shortcutKey>
+            <Block :title="$t('preferences.shortcutKeys.global')">
+              <GlobalShortcutKeys
+                v-model:shortcut-keys-enable="shortcutKeysEnable"
+                v-model:shortcut-keys-global-search="shortcutKeysGlobalSearch"
+                v-model:shortcut-keys-lock-screen="shortcutKeysGlobalLockScreen"
+                v-model:shortcut-keys-logout="shortcutKeysGlobalLogout"
+              />
+            </Block>
+          </template>
+        </VbenSegmented>
+      </div>
+
+      <template #footer>
+        <VbenButton
+          :disabled="!diffPreference"
+          class="mx-4 w-full"
+          size="sm"
+          variant="default"
+          @click="handleCopy"
+        >
+          <Copy class="mr-2 size-3" />
+          {{ $t('preferences.copyPreferences') }}
+        </VbenButton>
+        <VbenButton
+          :disabled="!diffPreference"
+          class="mr-4 w-full"
+          size="sm"
+          variant="ghost"
+          @click="handleClearCache"
+        >
+          {{ $t('preferences.clearAndLogout') }}
+        </VbenButton>
+      </template>
+    </Drawer>
+  </div>
+</template>
+
+<style scoped>
+:deep(.sticky-tabs-header [role='tablist']) {
+  position: sticky;
+  top: -12px;
+  z-index: 10;
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/preferences.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/preferences.vue
new file mode 100644
index 0000000..8bf91eb
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/preferences.vue
@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { Settings } from '@vben/icons';
+import { $t, loadLocaleMessages } from '@vben/locales';
+import { preferences, updatePreferences } from '@vben/preferences';
+import { capitalizeFirstLetter } from '@vben/utils';
+
+import { useVbenDrawer } from '@vben-core/popup-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+import PreferencesDrawer from './preferences-drawer.vue';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  connectedComponent: PreferencesDrawer,
+});
+
+/**
+ * preferences 转成 vue props
+ * preferences.widget.fullscreen=>widgetFullscreen
+ */
+const attrs = computed(() => {
+  const result: Record<string, any> = {};
+  for (const [key, value] of Object.entries(preferences)) {
+    for (const [subKey, subValue] of Object.entries(value)) {
+      result[`${key}${capitalizeFirstLetter(subKey)}`] = subValue;
+    }
+  }
+  return result;
+});
+
+/**
+ * preferences 转成 vue listener
+ * preferences.widget.fullscreen=>@update:widgetFullscreen
+ */
+const listen = computed(() => {
+  const result: Record<string, any> = {};
+  for (const [key, value] of Object.entries(preferences)) {
+    if (typeof value === 'object') {
+      for (const subKey of Object.keys(value)) {
+        result[`update:${key}${capitalizeFirstLetter(subKey)}`] = (
+          val: any,
+        ) => {
+          updatePreferences({ [key]: { [subKey]: val } });
+          if (key === 'app' && subKey === 'locale') {
+            loadLocaleMessages(val);
+          }
+        };
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+});
+</script>
+<template>
+  <div>
+    <Drawer v-bind="{ ...$attrs, ...attrs }" v-on="listen" />
+
+    <div @click="() => drawerApi.open()">
+      <slot>
+        <VbenButton
+          :title="$t('preferences.title')"
+          class="bg-primary flex-col-center size-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
+        >
+          <Settings class="size-5" />
+        </VbenButton>
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/use-open-preferences.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/use-open-preferences.ts
new file mode 100644
index 0000000..eb9d847
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/preferences/use-open-preferences.ts
@@ -0,0 +1,16 @@
+import { ref } from 'vue';
+
+const openPreferences = ref(false);
+
+function useOpenPreferences() {
+  function handleOpenPreference() {
+    openPreferences.value = true;
+  }
+
+  return {
+    handleOpenPreference,
+    openPreferences,
+  };
+}
+
+export { useOpenPreferences };
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/theme-toggle/index.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/theme-toggle/index.ts
new file mode 100644
index 0000000..0673d21
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/theme-toggle/index.ts
@@ -0,0 +1 @@
+export { default as ThemeToggle } from './theme-toggle.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
new file mode 100644
index 0000000..8d24b53
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import { computed, nextTick } from 'vue';
+
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+interface Props {
+  /**
+   * 类型
+   */
+  type?: 'icon' | 'normal';
+}
+
+defineOptions({
+  name: 'ThemeToggleButton',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'normal',
+});
+
+const isDark = defineModel<boolean>();
+
+const theme = computed(() => {
+  return isDark.value ? 'light' : 'dark';
+});
+
+const bindProps = computed(() => {
+  const type = props.type;
+
+  return type === 'normal'
+    ? {
+        variant: 'heavy' as const,
+      }
+    : {
+        class: 'rounded-full',
+        size: 'icon' as const,
+        style: { padding: '7px' },
+        variant: 'icon' as const,
+      };
+});
+
+function toggleTheme(event: MouseEvent) {
+  const isAppearanceTransition =
+    // @ts-expect-error
+    document.startViewTransition &&
+    !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (!isAppearanceTransition || !event) {
+    isDark.value = !isDark.value;
+    return;
+  }
+  const x = event.clientX;
+  const y = event.clientY;
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  );
+  // @ts-ignore startViewTransition
+  const transition = document.startViewTransition(async () => {
+    isDark.value = !isDark.value;
+    await nextTick();
+  });
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ];
+    const animate = document.documentElement.animate(
+      {
+        clipPath: isDark.value ? [...clipPath].toReversed() : clipPath,
+      },
+      {
+        duration: 450,
+        easing: 'ease-in',
+        pseudoElement: isDark.value
+          ? '::view-transition-old(root)'
+          : '::view-transition-new(root)',
+      },
+    );
+    animate.onfinish = () => {
+      transition.skipTransition();
+    };
+  });
+}
+</script>
+
+<template>
+  <VbenButton
+    :aria-label="theme"
+    :class="[`is-${theme}`]"
+    aria-live="polite"
+    class="theme-toggle cursor-pointer border-none bg-none hover:animate-[shrink_0.3s_ease-in-out]"
+    v-bind="bindProps"
+    @click.stop="toggleTheme"
+  >
+    <svg aria-hidden="true" height="24" viewBox="0 0 24 24" width="24">
+      <mask
+        id="theme-toggle-moon"
+        class="theme-toggle__moon"
+        fill="hsl(var(--foreground)/80%)"
+        stroke="none"
+      >
+        <rect fill="white" height="100%" width="100%" x="0" y="0" />
+        <circle cx="40" cy="8" fill="black" r="11" />
+      </mask>
+      <circle
+        id="sun"
+        class="theme-toggle__sun"
+        cx="12"
+        cy="12"
+        mask="url(#theme-toggle-moon)"
+        r="11"
+      />
+      <g class="theme-toggle__sun-beams">
+        <line x1="12" x2="12" y1="1" y2="3" />
+        <line x1="12" x2="12" y1="21" y2="23" />
+        <line x1="4.22" x2="5.64" y1="4.22" y2="5.64" />
+        <line x1="18.36" x2="19.78" y1="18.36" y2="19.78" />
+        <line x1="1" x2="3" y1="12" y2="12" />
+        <line x1="21" x2="23" y1="12" y2="12" />
+        <line x1="4.22" x2="5.64" y1="19.78" y2="18.36" />
+        <line x1="18.36" x2="19.78" y1="5.64" y2="4.22" />
+      </g>
+    </svg>
+  </VbenButton>
+</template>
+
+<style scoped>
+.theme-toggle {
+  &__moon {
+    & > circle {
+      transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
+    }
+  }
+
+  &__sun {
+    @apply fill-foreground/90 stroke-none;
+
+    transform-origin: center center;
+    transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
+
+    &:hover > svg > & {
+      @apply fill-foreground/90;
+    }
+  }
+
+  &__sun-beams {
+    @apply stroke-foreground/90 stroke-[2px];
+
+    transform-origin: center center;
+    transition:
+      transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
+      opacity 0.6s cubic-bezier(0.25, 0, 0.3, 1);
+
+    &:hover > svg > & {
+      @apply stroke-foreground;
+    }
+  }
+
+  &.is-light {
+    .theme-toggle__sun {
+      @apply scale-50;
+    }
+
+    .theme-toggle__sun-beams {
+      transform: rotateZ(0.25turn);
+    }
+  }
+
+  &.is-dark {
+    .theme-toggle__moon {
+      & > circle {
+        transform: translateX(-20px);
+      }
+    }
+
+    .theme-toggle__sun-beams {
+      @apply opacity-0;
+    }
+  }
+
+  &:hover > svg {
+    .theme-toggle__sun,
+    .theme-toggle__moon {
+      @apply fill-foreground;
+    }
+  }
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue
new file mode 100644
index 0000000..19c132e
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/theme-toggle/theme-toggle.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { ThemeModeType } from '@vben/types';
+
+import { MoonStar, Sun, SunMoon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import {
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@vben/preferences';
+
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+  VbenTooltip,
+} from '@vben-core/shadcn-ui';
+
+import ThemeButton from './theme-button.vue';
+
+defineOptions({
+  name: 'ThemeToggle',
+});
+
+withDefaults(defineProps<{ shouldOnHover?: boolean }>(), {
+  shouldOnHover: false,
+});
+
+function handleChange(isDark: boolean | undefined) {
+  updatePreferences({
+    theme: { mode: isDark ? 'dark' : 'light' },
+  });
+}
+
+const { isDark } = usePreferences();
+
+const PRESETS = [
+  {
+    icon: Sun,
+    name: 'light',
+    title: $t('preferences.theme.light'),
+  },
+  {
+    icon: MoonStar,
+    name: 'dark',
+    title: $t('preferences.theme.dark'),
+  },
+  {
+    icon: SunMoon,
+    name: 'auto',
+    title: $t('preferences.followSystem'),
+  },
+];
+</script>
+<template>
+  <div>
+    <VbenTooltip :disabled="!shouldOnHover" side="bottom">
+      <template #trigger>
+        <ThemeButton
+          :model-value="isDark"
+          type="icon"
+          @update:model-value="handleChange"
+        />
+      </template>
+      <ToggleGroup
+        :model-value="preferences.theme.mode"
+        class="gap-2"
+        type="single"
+        variant="outline"
+        @update:model-value="
+          (val) => updatePreferences({ theme: { mode: val as ThemeModeType } })
+        "
+      >
+        <ToggleGroupItem
+          v-for="item in PRESETS"
+          :key="item.name"
+          :value="item.name"
+        >
+          <component :is="item.icon" class="size-5" />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </VbenTooltip>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/timezone/index.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/timezone/index.ts
new file mode 100644
index 0000000..eef486d
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/timezone/index.ts
@@ -0,0 +1 @@
+export { default as TimezoneButton } from './timezone-button.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/timezone/timezone-button.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
new file mode 100644
index 0000000..f426b94
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, unref } from 'vue';
+
+import { createIconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { useTimezoneStore } from '@vben/stores';
+
+import { useVbenModal } from '@vben-core/popup-ui';
+import {
+  RadioGroup,
+  RadioGroupItem,
+  VbenIconButton,
+} from '@vben-core/shadcn-ui';
+
+const TimezoneIcon = createIconifyIcon('fluent-mdl2:world-clock');
+
+const timezoneStore = useTimezoneStore();
+
+const timezoneRef = ref<string | undefined>();
+
+const timezoneOptionsRef = ref<
+  {
+    label: string;
+    value: string;
+  }[]
+>([]);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onConfirm: async () => {
+    try {
+      modalApi.setState({ confirmLoading: true });
+      const timezone = unref(timezoneRef);
+      if (timezone) {
+        await timezoneStore.setTimezone(timezone);
+      }
+      modalApi.close();
+    } finally {
+      modalApi.setState({ confirmLoading: false });
+    }
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      timezoneRef.value = unref(timezoneStore.timezone);
+      timezoneOptionsRef.value = await timezoneStore.getTimezoneOptions();
+    }
+  },
+});
+
+const handleClick = () => {
+  modalApi.open();
+};
+</script>
+
+<template>
+  <div>
+    <VbenIconButton
+      :tooltip="$t('ui.widgets.timezone.setTimezone')"
+      class="hover:animate-[shrink_0.3s_ease-in-out]"
+      @click="handleClick"
+    >
+      <TimezoneIcon class="text-foreground size-4" />
+    </VbenIconButton>
+    <Modal :title="$t('ui.widgets.timezone.setTimezone')">
+      <div class="timezone-container">
+        <RadioGroup v-model="timezoneRef" class="flex flex-col gap-2">
+          <div
+            class="flex cursor-pointer items-center gap-2"
+            v-for="item in timezoneOptionsRef"
+            :key="`container${item.value}`"
+          >
+            <RadioGroupItem :id="item.value" :value="item.value" />
+            <label :for="item.value" class="cursor-pointer">{{
+              item.label
+            }}</label>
+          </div>
+        </RadioGroup>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<style scoped>
+.timezone-container {
+  padding-left: 20px;
+}
+</style>
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/user-dropdown/index.ts b/admin-ui/vue/packages/effects/layouts/src/widgets/user-dropdown/index.ts
new file mode 100644
index 0000000..86429e9
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/user-dropdown/index.ts
@@ -0,0 +1 @@
+export { default as UserDropdown } from './user-dropdown.vue';
diff --git a/admin-ui/vue/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue b/admin-ui/vue/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
new file mode 100644
index 0000000..8156324
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+import type { AnyFunction } from '@vben/types';
+
+import { computed, useTemplateRef, watch } from 'vue';
+
+import { useHoverToggle } from '@vben/hooks';
+import { LockKeyhole, LogOut } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { preferences, usePreferences } from '@vben/preferences';
+import { useAccessStore } from '@vben/stores';
+import { isWindowsOs } from '@vben/utils';
+
+import { useVbenModal } from '@vben-core/popup-ui';
+import {
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+  VbenAvatar,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+import { useMagicKeys, whenever } from '@vueuse/core';
+
+import { LockScreenModal } from '../lock-screen';
+
+interface Props {
+  /**
+   * 头像
+   */
+  avatar?: string;
+  /**
+   * @zh_CN 描述
+   */
+  description?: string;
+  /**
+   * 是否启用快捷键
+   */
+  enableShortcutKey?: boolean;
+  /**
+   * 菜单数组
+   */
+  menus?: Array<{
+    handler: AnyFunction;
+    icon?: Component | Function | string;
+    text: string;
+  }>;
+
+  /**
+   * 标签文本
+   */
+  tagText?: string;
+  /**
+   * 文本
+   */
+  text?: string;
+  /** 触发方式 */
+  trigger?: 'both' | 'click' | 'hover';
+  /** hover触发时，延迟响应的时间 */
+  hoverDelay?: number;
+}
+
+defineOptions({
+  name: 'UserDropdown',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  avatar: '',
+  description: '',
+  enableShortcutKey: true,
+  menus: () => [],
+  showShortcutKey: true,
+  tagText: '',
+  text: '',
+  trigger: 'click',
+  hoverDelay: 500,
+});
+
+const emit = defineEmits<{ logout: [] }>();
+
+const { globalLockScreenShortcutKey, globalLogoutShortcutKey } =
+  usePreferences();
+const accessStore = useAccessStore();
+const [LockModal, lockModalApi] = useVbenModal({
+  connectedComponent: LockScreenModal,
+});
+const [LogoutModal, logoutModalApi] = useVbenModal({
+  onConfirm() {
+    handleSubmitLogout();
+  },
+});
+
+const refTrigger = useTemplateRef('refTrigger');
+const refContent = useTemplateRef('refContent');
+const [openPopover, hoverWatcher] = useHoverToggle(
+  [refTrigger, refContent],
+  () => props.hoverDelay,
+);
+
+watch(
+  () => props.trigger === 'hover' || props.trigger === 'both',
+  (val) => {
+    if (val) {
+      hoverWatcher.enable();
+    } else {
+      hoverWatcher.disable();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
+
+const enableLogoutShortcutKey = computed(() => {
+  return props.enableShortcutKey && globalLogoutShortcutKey.value;
+});
+
+const enableLockScreenShortcutKey = computed(() => {
+  return props.enableShortcutKey && globalLockScreenShortcutKey.value;
+});
+
+const enableShortcutKey = computed(() => {
+  return props.enableShortcutKey && preferences.shortcutKeys.enable;
+});
+
+function handleOpenLock() {
+  lockModalApi.open();
+}
+
+function handleSubmitLock(lockScreenPassword: string) {
+  lockModalApi.close();
+  accessStore.lockScreen(lockScreenPassword);
+}
+
+function handleLogout() {
+  // emit
+  logoutModalApi.open();
+  openPopover.value = false;
+}
+
+function handleSubmitLogout() {
+  emit('logout');
+  logoutModalApi.close();
+}
+
+if (enableShortcutKey.value) {
+  const keys = useMagicKeys();
+  whenever(keys['Alt+KeyQ']!, () => {
+    if (enableLogoutShortcutKey.value) {
+      handleLogout();
+    }
+  });
+
+  whenever(keys['Alt+KeyL']!, () => {
+    if (enableLockScreenShortcutKey.value) {
+      handleOpenLock();
+    }
+  });
+}
+</script>
+
+<template>
+  <LockModal
+    v-if="preferences.widget.lockScreen"
+    :avatar="avatar"
+    :text="text"
+    @submit="handleSubmitLock"
+  />
+
+  <LogoutModal
+    :cancel-text="$t('common.cancel')"
+    :confirm-text="$t('common.confirm')"
+    :fullscreen-button="false"
+    :title="$t('common.prompt')"
+    centered
+    content-class="px-8 min-h-10"
+    footer-class="border-none mb-3 mr-3"
+    header-class="border-none"
+  >
+    {{ $t('ui.widgets.logoutTip') }}
+  </LogoutModal>
+
+  <DropdownMenu v-model:open="openPopover">
+    <DropdownMenuTrigger ref="refTrigger" :disabled="props.trigger === 'hover'">
+      <div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full p-1.5">
+        <div class="hover:text-accent-foreground flex-center">
+          <VbenAvatar :alt="text" :src="avatar" class="size-8" dot />
+        </div>
+      </div>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent class="mr-2 min-w-[240px] p-0 pb-1">
+      <div ref="refContent">
+        <DropdownMenuLabel class="flex items-center p-3">
+          <VbenAvatar
+            :alt="text"
+            :src="avatar"
+            class="size-12"
+            dot
+            dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"
+          />
+          <div class="ml-2 w-full">
+            <div
+              v-if="tagText || text || $slots.tagText"
+              class="text-foreground mb-1 flex items-center text-sm font-medium"
+            >
+              {{ text }}
+              <slot name="tagText">
+                <Badge v-if="tagText" class="ml-2 text-green-400">
+                  {{ tagText }}
+                </Badge>
+              </slot>
+            </div>
+            <div class="text-muted-foreground text-xs font-normal">
+              {{ description }}
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator v-if="menus?.length" />
+        <DropdownMenuItem
+          v-for="menu in menus"
+          :key="menu.text"
+          class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
+          @click="menu.handler"
+        >
+          <VbenIcon :icon="menu.icon" class="mr-2 size-4" />
+          {{ menu.text }}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          v-if="preferences.widget.lockScreen"
+          class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
+          @click="handleOpenLock"
+        >
+          <LockKeyhole class="mr-2 size-4" />
+          {{ $t('ui.widgets.lockScreen.title') }}
+          <DropdownMenuShortcut v-if="enableLockScreenShortcutKey">
+            {{ altView }} L
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator v-if="preferences.widget.lockScreen" />
+        <DropdownMenuItem
+          class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
+          @click="handleLogout"
+        >
+          <LogOut class="mr-2 size-4" />
+          {{ $t('common.logout') }}
+          <DropdownMenuShortcut v-if="enableLogoutShortcutKey">
+            {{ altView }} Q
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </div>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/admin-ui/vue/packages/effects/layouts/tsconfig.json b/admin-ui/vue/packages/effects/layouts/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/effects/layouts/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/effects/plugins/README.md b/admin-ui/vue/packages/effects/plugins/README.md
new file mode 100644
index 0000000..c394c9c
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/README.md
@@ -0,0 +1,28 @@
+# @vben/plugins
+
+该目录用于存放项目中集成的第三方库及其相关插件。每个插件都包含了可重用的逻辑、配置和组件，方便在项目中进行统一管理和调用。
+
+## 注意
+
+所有的第三方插件都必须以 `subpath` 形式引入，例：
+
+以 `echarts` 为例，引入方式如下：
+
+**packages.json**
+
+```json
+"exports": {
+    "./echarts": {
+      "types": "./src/echarts/index.ts",
+      "default": "./src/echarts/index.ts"
+    }
+  }
+```
+
+**使用方式**
+
+```ts
+import { useEcharts } from '@vben/plugins/echarts';
+```
+
+这样做的好处是，应用可以自行选择是否使用插件，而不会因为插件的引入及副作用而导致打包体积增大，只引入需要的插件即可。
diff --git a/admin-ui/vue/packages/effects/plugins/package.json b/admin-ui/vue/packages/effects/plugins/package.json
new file mode 100644
index 0000000..add6e78
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@vben/plugins",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/effects/plugins"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    "./echarts": {
+      "types": "./src/echarts/index.ts",
+      "default": "./src/echarts/index.ts"
+    },
+    "./vxe-table": {
+      "types": "./src/vxe-table/index.ts",
+      "default": "./src/vxe-table/index.ts"
+    },
+    "./motion": {
+      "types": "./src/motion/index.ts",
+      "default": "./src/motion/index.ts"
+    }
+  },
+  "dependencies": {
+    "@vben-core/form-ui": "workspace:*",
+    "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/icons": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "@vben/preferences": "workspace:*",
+    "@vben/types": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "@vueuse/core": "catalog:",
+    "@vueuse/motion": "catalog:",
+    "echarts": "catalog:",
+    "vue": "catalog:",
+    "vxe-pc-ui": "catalog:",
+    "vxe-table": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/effects/plugins/src/echarts/echarts-ui.vue b/admin-ui/vue/packages/effects/plugins/src/echarts/echarts-ui.vue
new file mode 100644
index 0000000..70d1f20
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/echarts/echarts-ui.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  height?: string;
+  width?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  height: '300px',
+  width: '100%',
+});
+</script>
+
+<template>
+  <div v-bind="$attrs" :style="{ height, width }"></div>
+</template>
diff --git a/admin-ui/vue/packages/effects/plugins/src/echarts/echarts.ts b/admin-ui/vue/packages/effects/plugins/src/echarts/echarts.ts
new file mode 100644
index 0000000..8e1b249
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/echarts/echarts.ts
@@ -0,0 +1,61 @@
+import type {
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineSeriesOption,
+} from 'echarts/charts';
+import type {
+  DatasetComponentOption,
+  GridComponentOption,
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  TooltipComponentOption,
+} from 'echarts/components';
+import type { ComposeOption } from 'echarts/core';
+
+import { BarChart, LineChart, PieChart, RadarChart, MapChart, GaugeChart } from 'echarts/charts';
+import {
+  // 数据集组件
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+export type ECOption = ComposeOption<
+  | BarSeriesOption
+  | DatasetComponentOption
+  | GridComponentOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+>;
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  PieChart,
+  RadarChart,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  LegendComponent,
+  ToolboxComponent,
+  MapChart,
+  GaugeChart,
+]);
+
+export default echarts;
diff --git a/admin-ui/vue/packages/effects/plugins/src/echarts/index.ts b/admin-ui/vue/packages/effects/plugins/src/echarts/index.ts
new file mode 100644
index 0000000..80f36a1
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/echarts/index.ts
@@ -0,0 +1,3 @@
+export * from './echarts';
+export { default as EchartsUI } from './echarts-ui.vue';
+export * from './use-echarts';
diff --git a/admin-ui/vue/packages/effects/plugins/src/echarts/use-echarts.ts b/admin-ui/vue/packages/effects/plugins/src/echarts/use-echarts.ts
new file mode 100644
index 0000000..e7ceed3
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/echarts/use-echarts.ts
@@ -0,0 +1,148 @@
+import type { EChartsOption } from 'echarts';
+
+import type { Ref } from 'vue';
+
+import type { Nullable } from '@vben/types';
+
+import type EchartsUI from './echarts-ui.vue';
+
+import { computed, nextTick, watch } from 'vue';
+
+import { usePreferences } from '@vben/preferences';
+
+import {
+  tryOnUnmounted,
+  useDebounceFn,
+  useResizeObserver,
+  useTimeoutFn,
+  useWindowSize,
+} from '@vueuse/core';
+
+import echarts from './echarts';
+
+type EchartsUIType = typeof EchartsUI | undefined;
+
+type EchartsThemeType = 'dark' | 'light' | null;
+
+function useEcharts(chartRef: Ref<EchartsUIType>) {
+  let chartInstance: echarts.ECharts | null = null;
+  let cacheOptions: EChartsOption = {};
+
+  const { isDark } = usePreferences();
+  const { height, width } = useWindowSize();
+  const resizeHandler: () => void = useDebounceFn(resize, 200);
+
+  const getChartEl = (): HTMLElement | null => {
+    const refValue = chartRef?.value as unknown;
+    if (!refValue) return null;
+    if (refValue instanceof HTMLElement) {
+      return refValue;
+    }
+    const maybeComponent = refValue as { $el?: HTMLElement };
+    return maybeComponent.$el ?? null;
+  };
+
+  const isElHidden = (el: HTMLElement | null): boolean => {
+    if (!el) return true;
+    return el.offsetHeight === 0 || el.offsetWidth === 0;
+  };
+
+  const getOptions = computed((): EChartsOption => {
+    if (!isDark.value) {
+      return {};
+    }
+
+    return {
+      backgroundColor: 'transparent',
+    };
+  });
+
+  const initCharts = (t?: EchartsThemeType) => {
+    const el = chartRef?.value?.$el;
+    if (!el) {
+      return;
+    }
+    chartInstance = echarts.init(el, t || isDark.value ? 'dark' : null);
+
+    return chartInstance;
+  };
+
+  const renderEcharts = (
+    options: EChartsOption,
+    clear = true,
+  ): Promise<Nullable<echarts.ECharts>> => {
+    cacheOptions = options;
+    const currentOptions = {
+      ...options,
+      ...getOptions.value,
+    };
+    return new Promise((resolve) => {
+      if (chartRef.value?.offsetHeight === 0) {
+        useTimeoutFn(async () => {
+          resolve(await renderEcharts(currentOptions));
+        }, 30);
+        return;
+      }
+      nextTick(() => {
+        const el = getChartEl();
+        if (isElHidden(el)) {
+          useTimeoutFn(async () => {
+            resolve(await renderEcharts(currentOptions));
+          }, 30);
+          return;
+        }
+        useTimeoutFn(() => {
+          if (!chartInstance) {
+            const instance = initCharts();
+            if (!instance) return;
+          }
+          clear && chartInstance?.clear();
+          chartInstance?.setOption(currentOptions);
+          resolve(chartInstance);
+        }, 30);
+      });
+    });
+  };
+
+  function resize() {
+    const el = getChartEl();
+    if (isElHidden(el)) {
+      return;
+    }
+    chartInstance?.resize({
+      animation: {
+        duration: 300,
+        easing: 'quadraticIn',
+      },
+    });
+  }
+
+  watch([width, height], () => {
+    resizeHandler?.();
+  });
+
+  useResizeObserver(chartRef as never, resizeHandler);
+
+  watch(isDark, () => {
+    if (chartInstance) {
+      chartInstance.dispose();
+      initCharts();
+      renderEcharts(cacheOptions);
+      resize();
+    }
+  });
+
+  tryOnUnmounted(() => {
+    // 销毁实例，释放资源
+    chartInstance?.dispose();
+  });
+  return {
+    renderEcharts,
+    resize,
+    getChartInstance: () => chartInstance,
+  };
+}
+
+export { useEcharts, echarts };
+
+export type { EchartsUIType };
diff --git a/admin-ui/vue/packages/effects/plugins/src/motion/index.ts b/admin-ui/vue/packages/effects/plugins/src/motion/index.ts
new file mode 100644
index 0000000..021465a
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/motion/index.ts
@@ -0,0 +1,8 @@
+export * from './types';
+
+export {
+  MotionComponent as Motion,
+  MotionDirective,
+  MotionGroupComponent as MotionGroup,
+  MotionPlugin,
+} from '@vueuse/motion';
diff --git a/admin-ui/vue/packages/effects/plugins/src/motion/types.ts b/admin-ui/vue/packages/effects/plugins/src/motion/types.ts
new file mode 100644
index 0000000..f08bf21
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/motion/types.ts
@@ -0,0 +1,26 @@
+export const MotionPresets = [
+  'fade',
+  'fadeVisible',
+  'fadeVisibleOnce',
+  'rollBottom',
+  'rollLeft',
+  'rollRight',
+  'rollTop',
+  'rollVisibleBottom',
+  'rollVisibleLeft',
+  'rollVisibleRight',
+  'rollVisibleTop',
+  'pop',
+  'popVisible',
+  'popVisibleOnce',
+  'slideBottom',
+  'slideLeft',
+  'slideRight',
+  'slideTop',
+  'slideVisibleBottom',
+  'slideVisibleLeft',
+  'slideVisibleRight',
+  'slideVisibleTop',
+] as const;
+
+export type MotionPreset = (typeof MotionPresets)[number];
diff --git a/admin-ui/vue/packages/effects/plugins/src/vxe-table/api.ts b/admin-ui/vue/packages/effects/plugins/src/vxe-table/api.ts
new file mode 100644
index 0000000..2b60d60
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/vxe-table/api.ts
@@ -0,0 +1,128 @@
+import type { VxeGridInstance } from 'vxe-table';
+
+import type { ExtendedFormApi } from '@vben-core/form-ui';
+
+import type { VxeGridProps } from './types';
+
+import { toRaw } from 'vue';
+
+import { Store } from '@vben-core/shared/store';
+import {
+  bindMethods,
+  isBoolean,
+  isFunction,
+  mergeWithArrayOverride,
+  StateHandler,
+} from '@vben-core/shared/utils';
+
+function getDefaultState(): VxeGridProps {
+  return {
+    class: '',
+    gridClass: '',
+    gridOptions: {},
+    gridEvents: {},
+    formOptions: undefined,
+    showSearchForm: true,
+  };
+}
+
+export class VxeGridApi<T extends Record<string, any> = any> {
+  public formApi = {} as ExtendedFormApi;
+
+  // private prevState: null | VxeGridProps = null;
+  public grid = {} as VxeGridInstance<T>;
+  public state: null | VxeGridProps<T> = null;
+
+  public store: Store<VxeGridProps<T>>;
+
+  private isMounted = false;
+
+  private stateHandler: StateHandler;
+
+  constructor(options: VxeGridProps = {}) {
+    const storeState = { ...options };
+
+    const defaultState = getDefaultState();
+    this.store = new Store<VxeGridProps>(
+      mergeWithArrayOverride(storeState, defaultState),
+      {
+        onUpdate: () => {
+          // this.prevState = this.state;
+          this.state = this.store.state;
+        },
+      },
+    );
+
+    this.state = this.store.state;
+    this.stateHandler = new StateHandler();
+    bindMethods(this);
+  }
+
+  mount(instance: null | VxeGridInstance, formApi: ExtendedFormApi) {
+    if (!this.isMounted && instance) {
+      this.grid = instance;
+      this.formApi = formApi;
+      this.stateHandler.setConditionTrue();
+      this.isMounted = true;
+    }
+  }
+
+  async query(params: Record<string, any> = {}) {
+    try {
+      await this.grid.commitProxy('query', toRaw(params));
+    } catch (error) {
+      console.error('Error occurred while querying:', error);
+    }
+  }
+
+  async reload(params: Record<string, any> = {}) {
+    try {
+      await this.grid.commitProxy('reload', toRaw(params));
+    } catch (error) {
+      console.error('Error occurred while reloading:', error);
+    }
+  }
+
+  setGridOptions(options: Partial<VxeGridProps['gridOptions']>) {
+    this.setState({
+      gridOptions: options,
+    });
+  }
+
+  setLoading(isLoading: boolean) {
+    this.setState({
+      gridOptions: {
+        loading: isLoading,
+      },
+    });
+  }
+
+  setState(
+    stateOrFn:
+      | ((prev: VxeGridProps<T>) => Partial<VxeGridProps<T>>)
+      | Partial<VxeGridProps<T>>,
+  ) {
+    if (isFunction(stateOrFn)) {
+      this.store.setState((prev) => {
+        return mergeWithArrayOverride(stateOrFn(prev), prev);
+      });
+    } else {
+      this.store.setState((prev) => mergeWithArrayOverride(stateOrFn, prev));
+    }
+  }
+
+  toggleSearchForm(show?: boolean) {
+    this.setState({
+      showSearchForm: isBoolean(show) ? show : !this.state?.showSearchForm,
+    });
+    // nextTick(() => {
+    //   this.grid.recalculate();
+    // });
+    return this.state?.showSearchForm;
+  }
+
+  unmount() {
+    this.isMounted = false;
+    this.stateHandler.reset();
+  }
+}
diff --git a/admin-ui/vue/packages/effects/plugins/src/vxe-table/extends.ts b/admin-ui/vue/packages/effects/plugins/src/vxe-table/extends.ts
new file mode 100644
index 0000000..a6cf4ca
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/vxe-table/extends.ts
@@ -0,0 +1,81 @@
+import type { VxeGridProps, VxeUIExport } from 'vxe-table';
+
+import type { Recordable } from '@vben/types';
+
+import type { VxeGridApi } from './api';
+
+import { formatDate, formatDateTime, isFunction } from '@vben/utils';
+
+export function extendProxyOptions(
+  api: VxeGridApi,
+  options: VxeGridProps,
+  getFormValues: () => Recordable<any>,
+) {
+  [
+    'query',
+    'querySuccess',
+    'queryError',
+    'queryAll',
+    'queryAllSuccess',
+    'queryAllError',
+  ].forEach((key) => {
+    extendProxyOption(key, api, options, getFormValues);
+  });
+}
+
+function extendProxyOption(
+  key: string,
+  api: VxeGridApi,
+  options: VxeGridProps,
+  getFormValues: () => Recordable<any>,
+) {
+  const { proxyConfig } = options;
+  const configFn = (proxyConfig?.ajax as Recordable<any>)?.[key];
+  if (!isFunction(configFn)) {
+    return options;
+  }
+
+  const wrapperFn = async (
+    params: Recordable<any>,
+    customValues: Recordable<any>,
+    ...args: Recordable<any>[]
+  ) => {
+    const formValues = getFormValues();
+    const data = await configFn(
+      params,
+      {
+        /**
+         * 开启toolbarConfig.refresh功能
+         * 点击刷新按钮 这里的值为PointerEvent 会携带错误参数
+         */
+        ...(customValues instanceof PointerEvent ? {} : customValues),
+        ...formValues,
+      },
+      ...args,
+    );
+    return data;
+  };
+  api.setState({
+    gridOptions: {
+      proxyConfig: {
+        ajax: {
+          [key]: wrapperFn,
+        },
+      },
+    },
+  });
+}
+
+export function extendsDefaultFormatter(vxeUI: VxeUIExport) {
+  vxeUI.formats.add('formatDate', {
+    tableCellFormatMethod({ cellValue }) {
+      return formatDate(cellValue);
+    },
+  });
+
+  vxeUI.formats.add('formatDateTime', {
+    tableCellFormatMethod({ cellValue }) {
+      return formatDateTime(cellValue);
+    },
+  });
+}
diff --git a/admin-ui/vue/packages/effects/plugins/src/vxe-table/index.ts b/admin-ui/vue/packages/effects/plugins/src/vxe-table/index.ts
new file mode 100644
index 0000000..a19f2b8
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/vxe-table/index.ts
@@ -0,0 +1,10 @@
+export { setupVbenVxeTable } from './init';
+export type { VxeTableGridOptions } from './types';
+export * from './use-vxe-grid';
+
+export { default as VbenVxeGrid } from './use-vxe-grid.vue';
+export type {
+  VxeGridListeners,
+  VxeGridProps,
+  VxeGridPropTypes,
+} from 'vxe-table';
diff --git a/admin-ui/vue/packages/effects/plugins/src/vxe-table/init.ts b/admin-ui/vue/packages/effects/plugins/src/vxe-table/init.ts
new file mode 100644
index 0000000..00e9d8a
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/vxe-table/init.ts
@@ -0,0 +1,131 @@
+import type { SetupVxeTable } from './types';
+
+import { defineComponent, watch } from 'vue';
+
+import { usePreferences } from '@vben/preferences';
+
+import { useVbenForm } from '@vben-core/form-ui';
+
+import {
+  VxeButton,
+  VxeCheckbox,
+
+  // VxeFormGather,
+  // VxeForm,
+  // VxeFormItem,
+  VxeIcon,
+  VxeInput,
+  VxeLoading,
+  VxeModal,
+  VxeNumberInput,
+  VxePager,
+  // VxeList,
+  // VxeModal,
+  // VxeOptgroup,
+  // VxeOption,
+  // VxePulldown,
+  // VxeRadio,
+  // VxeRadioButton,
+  VxeRadioGroup,
+  VxeSelect,
+  VxeTooltip,
+  VxeUI,
+  VxeUpload,
+  // VxeSwitch,
+  // VxeTextarea,
+} from 'vxe-pc-ui';
+import enUS from 'vxe-pc-ui/lib/language/en-US';
+// 导入默认的语言
+import zhCN from 'vxe-pc-ui/lib/language/zh-CN';
+import {
+  VxeColgroup,
+  VxeColumn,
+  VxeGrid,
+  VxeTable,
+  VxeToolbar,
+} from 'vxe-table';
+
+import { extendsDefaultFormatter } from './extends';
+
+// 是否加载过
+let isInit = false;
+
+// eslint-disable-next-line import/no-mutable-exports
+export let useTableForm: typeof useVbenForm;
+
+// 部分组件，如果没注册，vxe-table 会报错，这里实际没用组件，只是为了不报错，同时可以减少打包体积
+const createVirtualComponent = (name = '') => {
+  return defineComponent({
+    name,
+  });
+};
+
+export function initVxeTable() {
+  if (isInit) {
+    return;
+  }
+
+  VxeUI.component(VxeTable);
+  VxeUI.component(VxeColumn);
+  VxeUI.component(VxeColgroup);
+  VxeUI.component(VxeGrid);
+  VxeUI.component(VxeToolbar);
+
+  VxeUI.component(VxeButton);
+  // VxeUI.component(VxeButtonGroup);
+  VxeUI.component(VxeCheckbox);
+  // VxeUI.component(VxeCheckboxGroup);
+  VxeUI.component(createVirtualComponent('VxeForm'));
+  // VxeUI.component(VxeFormGather);
+  // VxeUI.component(VxeFormItem);
+  VxeUI.component(VxeIcon);
+  VxeUI.component(VxeInput);
+  // VxeUI.component(VxeList);
+  VxeUI.component(VxeLoading);
+  VxeUI.component(VxeModal);
+  VxeUI.component(VxeNumberInput);
+  // VxeUI.component(VxeOptgroup);
+  // VxeUI.component(VxeOption);
+  VxeUI.component(VxePager);
+  // VxeUI.component(VxePulldown);
+  // VxeUI.component(VxeRadio);
+  // VxeUI.component(VxeRadioButton);
+  VxeUI.component(VxeRadioGroup);
+  VxeUI.component(VxeSelect);
+  // VxeUI.component(VxeSwitch);
+  // VxeUI.component(VxeTextarea);
+  VxeUI.component(VxeTooltip);
+  VxeUI.component(VxeUpload);
+
+  isInit = true;
+}
+
+export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
+  const { configVxeTable, useVbenForm } = setupOptions;
+
+  initVxeTable();
+  useTableForm = useVbenForm;
+
+  const { isDark, locale } = usePreferences();
+
+  const localMap = {
+    'zh-CN': zhCN,
+    'en-US': enUS,
+  };
+
+  watch(
+    [() => isDark.value, () => locale.value],
+    ([isDarkValue, localeValue]) => {
+      VxeUI.setTheme(isDarkValue ? 'dark' : 'light');
+      VxeUI.setI18n(localeValue, localMap[localeValue]);
+      VxeUI.setLanguage(localeValue);
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  extendsDefaultFormatter(VxeUI);
+
+  configVxeTable(VxeUI);
+}
diff --git a/admin-ui/vue/packages/effects/plugins/src/vxe-table/style.css b/admin-ui/vue/packages/effects/plugins/src/vxe-table/style.css
new file mode 100644
index 0000000..5b47fa2
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/vxe-table/style.css
@@ -0,0 +1,117 @@
+:root .vxe-grid {
+  --vxe-ui-font-color: hsl(var(--foreground));
+  --vxe-ui-font-primary-color: hsl(var(--primary));
+
+  /* --vxe-ui-font-lighten-color: #babdc0;
+  --vxe-ui-font-darken-color: #86898e; */
+  --vxe-ui-font-disabled-color: hsl(var(--foreground) / 50%);
+
+  /* base */
+  --vxe-ui-base-popup-border-color: hsl(var(--border));
+  --vxe-ui-input-disabled-color: hsl(var(--border) / 60%);
+
+  /* --vxe-ui-base-popup-box-shadow: 0px 12px 30px 8px rgb(0 0 0 / 50%); */
+
+  /* layout */
+  --vxe-ui-layout-background-color: hsl(var(--background));
+  --vxe-ui-table-resizable-line-color: hsl(var(--heavy));
+
+  /* --vxe-ui-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px hsl(var(--accent));
+  --vxe-ui-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px hsl(var(--accent)); */
+
+  /* input */
+  --vxe-ui-input-border-color: hsl(var(--border));
+
+  /* --vxe-ui-input-placeholder-color: #8d9095; */
+
+  /* --vxe-ui-input-disabled-background-color: #262727; */
+
+  /* loading */
+  --vxe-ui-loading-background-color: hsl(var(--overlay-content));
+
+  /* table */
+  --vxe-ui-table-header-background-color: hsl(var(--accent));
+  --vxe-ui-table-border-color: hsl(var(--border));
+  --vxe-ui-table-row-hover-background-color: hsl(var(--accent-hover));
+  --vxe-ui-table-row-striped-background-color: hsl(var(--accent) / 60%);
+  --vxe-ui-table-row-hover-striped-background-color: hsl(var(--accent));
+  --vxe-ui-table-row-radio-checked-background-color: hsl(var(--accent));
+  --vxe-ui-table-row-hover-radio-checked-background-color: hsl(
+    var(--accent-hover)
+  );
+  --vxe-ui-table-row-checkbox-checked-background-color: hsl(var(--accent));
+  --vxe-ui-table-row-hover-checkbox-checked-background-color: hsl(
+    var(--accent-hover)
+  );
+  --vxe-ui-table-row-current-background-color: hsl(var(--accent));
+  --vxe-ui-table-row-hover-current-background-color: hsl(var(--accent-hover));
+  --vxe-ui-font-primary-tinge-color: hsl(var(--primary));
+  --vxe-ui-font-primary-lighten-color: hsl(var(--primary) / 60%);
+  --vxe-ui-font-primary-darken-color: hsl(var(--primary));
+
+  height: auto !important;
+
+  /* --vxe-ui-table-fixed-scrolling-box-shadow-color: rgb(0 0 0 / 80%); */
+}
+
+.vxe-pager {
+  .vxe-pager--prev-btn:not(.is--disabled):active,
+  .vxe-pager--next-btn:not(.is--disabled):active,
+  .vxe-pager--num-btn:not(.is--disabled):active,
+  .vxe-pager--jump-prev:not(.is--disabled):active,
+  .vxe-pager--jump-next:not(.is--disabled):active,
+  .vxe-pager--prev-btn:not(.is--disabled):focus,
+  .vxe-pager--next-btn:not(.is--disabled):focus,
+  .vxe-pager--num-btn:not(.is--disabled):focus,
+  .vxe-pager--jump-prev:not(.is--disabled):focus,
+  .vxe-pager--jump-next:not(.is--disabled):focus {
+    color: hsl(var(--accent-foreground));
+    background-color: hsl(var(--accent));
+    border: 1px solid hsl(var(--border));
+    box-shadow: 0 0 0 1px hsl(var(--border));
+  }
+
+  .vxe-pager--wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  .vxe-pager--sizes {
+    margin-right: auto;
+  }
+}
+
+.vxe-pager--wrapper {
+  @apply justify-center md:justify-end;
+}
+
+.vxe-tools--operate {
+  margin-right: 0.25rem;
+  margin-left: 0.75rem;
+}
+
+.vxe-table-custom--checkbox-option:hover {
+  background: none !important;
+}
+
+.vxe-toolbar {
+  padding: 0;
+}
+
+.vxe-buttons--wrapper:not(:empty),
+.vxe-tools--operate:not(:empty),
+.vxe-tools--wrapper:not(:empty) {
+  padding: 0.6em 0;
+}
+
+.vxe-tools--operate:not(:has(button)) {
+  margin-left: 0;
+}
+
+.vxe-grid--layout-header-wrapper {
+  overflow: visible;
+}
+
+.vxe-grid--layout-body-content-wrapper {
+  overflow: hidden;
+}
diff --git a/admin-ui/vue/packages/effects/plugins/src/vxe-table/types.ts b/admin-ui/vue/packages/effects/plugins/src/vxe-table/types.ts
new file mode 100644
index 0000000..8b9aea4
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/vxe-table/types.ts
@@ -0,0 +1,93 @@
+import type {
+  VxeGridListeners,
+  VxeGridPropTypes,
+  VxeGridProps as VxeTableGridProps,
+  VxeUIExport,
+} from 'vxe-table';
+
+import type { Ref } from 'vue';
+
+import type { ClassType, DeepPartial } from '@vben/types';
+
+import type { BaseFormComponentType, VbenFormProps } from '@vben-core/form-ui';
+
+import type { VxeGridApi } from './api';
+
+import { useVbenForm } from '@vben-core/form-ui';
+
+export interface VxePaginationInfo {
+  currentPage: number;
+  pageSize: number;
+  total: number;
+}
+
+interface ToolbarConfigOptions extends VxeGridPropTypes.ToolbarConfig {
+  /** 是否显示切换搜索表单的按钮 */
+  search?: boolean;
+}
+
+export interface VxeTableGridOptions<T = any> extends VxeTableGridProps<T> {
+  /** 工具栏配置 */
+  toolbarConfig?: ToolbarConfigOptions;
+}
+
+export interface SeparatorOptions {
+  show?: boolean;
+  backgroundColor?: string;
+}
+
+export interface VxeGridProps<
+  T extends Record<string, any> = any,
+  D extends BaseFormComponentType = BaseFormComponentType,
+> {
+  /**
+   * 标题
+   */
+  tableTitle?: string;
+  /**
+   * 标题帮助
+   */
+  tableTitleHelp?: string;
+  /**
+   * 组件class
+   */
+  class?: ClassType;
+  /**
+   * vxe-grid class
+   */
+  gridClass?: ClassType;
+  /**
+   * vxe-grid 配置
+   */
+  gridOptions?: DeepPartial<VxeTableGridOptions<T>>;
+  /**
+   * vxe-grid 事件
+   */
+  gridEvents?: DeepPartial<VxeGridListeners<T>>;
+  /**
+   * 表单配置
+   */
+  formOptions?: VbenFormProps<D>;
+  /**
+   * 显示搜索表单
+   */
+  showSearchForm?: boolean;
+  /**
+   * 搜索表单与表格主体之间的分隔条
+   */
+  separator?: boolean | SeparatorOptions;
+}
+
+export type ExtendedVxeGridApi<
+  D extends Record<string, any> = any,
+  F extends BaseFormComponentType = BaseFormComponentType,
+> = VxeGridApi<D> & {
+  useStore: <T = NoInfer<VxeGridProps<D, F>>>(
+    selector?: (state: NoInfer<VxeGridProps<any, any>>) => T,
+  ) => Readonly<Ref<T>>;
+};
+
+export interface SetupVxeTable {
+  configVxeTable: (ui: VxeUIExport) => void;
+  useVbenForm: typeof useVbenForm;
+}
diff --git a/admin-ui/vue/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts b/admin-ui/vue/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts
new file mode 100644
index 0000000..6ab8769
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts
@@ -0,0 +1,70 @@
+import type { VxeGridSlots, VxeGridSlotTypes } from 'vxe-table';
+
+import type { SlotsType } from 'vue';
+
+import type { BaseFormComponentType } from '@vben-core/form-ui';
+
+import type { ExtendedVxeGridApi, VxeGridProps } from './types';
+
+import { defineComponent, h, onBeforeUnmount } from 'vue';
+
+import { useStore } from '@vben-core/shared/store';
+
+import { VxeGridApi } from './api';
+import VxeGrid from './use-vxe-grid.vue';
+
+type FilteredSlots<T> = {
+  [K in keyof VxeGridSlots<T> as K extends 'form'
+    ? never
+    : K]: VxeGridSlots<T>[K];
+};
+
+export function useVbenVxeGrid<
+  T extends Record<string, any> = any,
+  D extends BaseFormComponentType = BaseFormComponentType,
+>(options: VxeGridProps<T, D>) {
+  // const IS_REACTIVE = isReactive(options);
+  const api = new VxeGridApi(options);
+  const extendedApi: ExtendedVxeGridApi<T, D> = api as ExtendedVxeGridApi<T, D>;
+  extendedApi.useStore = (selector) => {
+    return useStore(api.store, selector);
+  };
+
+  const Grid = defineComponent(
+    (props: VxeGridProps<T>, { attrs, slots }) => {
+      onBeforeUnmount(() => {
+        api.unmount();
+      });
+      api.setState({ ...props, ...attrs });
+      return () => h(VxeGrid, { ...props, ...attrs, api: extendedApi }, slots);
+    },
+    {
+      name: 'VbenVxeGrid',
+      inheritAttrs: false,
+      slots: Object as SlotsType<
+        {
+          // 表格标题
+          'table-title': undefined;
+          // 工具栏左侧部分
+          'toolbar-actions': VxeGridSlotTypes.DefaultSlotParams<T>;
+          // 工具栏右侧部分
+          'toolbar-tools': VxeGridSlotTypes.DefaultSlotParams<T>;
+        } & FilteredSlots<T>
+      >,
+    },
+  );
+  // Add reactivity support
+  // if (IS_REACTIVE) {
+  //   watch(
+  //     () => options,
+  //     () => {
+  //       api.setState(options);
+  //     },
+  //     { immediate: true },
+  //   );
+  // }
+
+  return [Grid, extendedApi] as const;
+}
+
+export type UseVbenVxeGrid = typeof useVbenVxeGrid;
diff --git a/admin-ui/vue/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/admin-ui/vue/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
new file mode 100644
index 0000000..7b002a2
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -0,0 +1,479 @@
+<script lang="ts" setup>
+import type {
+  VxeGridDefines,
+  VxeGridInstance,
+  VxeGridListeners,
+  VxeGridPropTypes,
+  VxeGridProps as VxeTableGridProps,
+  VxeToolbarPropTypes,
+} from 'vxe-table';
+
+import type { SetupContext } from 'vue';
+
+import type { VbenFormProps } from '@vben-core/form-ui';
+
+import type { ExtendedVxeGridApi, VxeGridProps } from './types';
+
+import {
+  computed,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  toRaw,
+  useSlots,
+  useTemplateRef,
+  watch,
+} from 'vue';
+
+import { usePriorityValues } from '@vben/hooks';
+import { EmptyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { usePreferences } from '@vben/preferences';
+import {
+  cloneDeep,
+  cn,
+  isBoolean,
+  isEqual,
+  mergeWithArrayOverride,
+} from '@vben/utils';
+
+import { VbenHelpTooltip, VbenLoading } from '@vben-core/shadcn-ui';
+
+import { VxeButton } from 'vxe-pc-ui';
+import { VxeGrid, VxeUI } from 'vxe-table';
+
+import { extendProxyOptions } from './extends';
+import { useTableForm } from './init';
+
+import 'vxe-table/styles/cssvar.scss';
+import 'vxe-pc-ui/styles/cssvar.scss';
+import './style.css';
+
+interface Props extends VxeGridProps {
+  api: ExtendedVxeGridApi;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const FORM_SLOT_PREFIX = 'form-';
+
+const TOOLBAR_ACTIONS = 'toolbar-actions';
+const TOOLBAR_TOOLS = 'toolbar-tools';
+const TABLE_TITLE = 'table-title';
+
+const gridRef = useTemplateRef<VxeGridInstance>('gridRef');
+
+const state = props.api?.useStore?.();
+
+const {
+  gridOptions,
+  class: className,
+  gridClass,
+  gridEvents,
+  formOptions,
+  tableTitle,
+  tableTitleHelp,
+  showSearchForm,
+  separator,
+} = usePriorityValues(props, state);
+
+const { isMobile } = usePreferences();
+const isSeparator = computed(() => {
+  if (
+    !formOptions.value ||
+    showSearchForm.value === false ||
+    separator.value === false
+  ) {
+    return false;
+  }
+  if (separator.value === true || separator.value === undefined) {
+    return true;
+  }
+  return separator.value.show !== false;
+});
+const separatorBg = computed(() => {
+  return !separator.value ||
+    isBoolean(separator.value) ||
+    !separator.value.backgroundColor
+    ? undefined
+    : separator.value.backgroundColor;
+});
+const slots: SetupContext['slots'] = useSlots();
+
+const [Form, formApi] = useTableForm({
+  compact: true,
+  handleSubmit: async () => {
+    const formValues = await formApi.getValues();
+    formApi.setLatestSubmissionValues(toRaw(formValues));
+    props.api.reload(formValues);
+  },
+  handleReset: async () => {
+    const prevValues = await formApi.getValues();
+    await formApi.resetForm();
+    const formValues = await formApi.getValues();
+    formApi.setLatestSubmissionValues(formValues);
+    // 如果值发生了变化，submitOnChange会触发刷新。所以只在submitOnChange为false或者值没有发生变化时，手动刷新
+    if (isEqual(prevValues, formValues) || !formOptions.value?.submitOnChange) {
+      props.api.reload(formValues);
+    }
+  },
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: computed(() => $t('common.search')),
+  },
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+});
+
+const showTableTitle = computed(() => {
+  return !!slots[TABLE_TITLE]?.() || tableTitle.value;
+});
+
+const showToolbar = computed(() => {
+  return (
+    !!slots[TOOLBAR_ACTIONS]?.() ||
+    !!slots[TOOLBAR_TOOLS]?.() ||
+    showTableTitle.value
+  );
+});
+
+const toolbarOptions = computed(() => {
+  const slotActions = slots[TOOLBAR_ACTIONS]?.();
+  const slotTools = slots[TOOLBAR_TOOLS]?.();
+  const searchBtn: VxeToolbarPropTypes.ToolConfig = {
+    code: 'search',
+    icon: 'vxe-icon-search',
+    circle: true,
+    status: showSearchForm.value ? 'primary' : undefined,
+    title: showSearchForm.value
+      ? $t('common.hideSearchPanel')
+      : $t('common.showSearchPanel'),
+  };
+  // 将搜索按钮合并到用户配置的toolbarConfig.tools中
+  const toolbarConfig: VxeGridPropTypes.ToolbarConfig = {
+    tools: (gridOptions.value?.toolbarConfig?.tools ??
+      []) as VxeToolbarPropTypes.ToolConfig[],
+  };
+  if (gridOptions.value?.toolbarConfig?.search && !!formOptions.value) {
+    toolbarConfig.tools = Array.isArray(toolbarConfig.tools)
+      ? [...toolbarConfig.tools, searchBtn]
+      : [searchBtn];
+  }
+
+  if (!showToolbar.value) {
+    return { toolbarConfig };
+  }
+
+  // 强制使用固定的toolbar配置，不允许用户自定义
+  // 减少配置的复杂度，以及后续维护的成本
+  toolbarConfig.slots = {
+    ...(slotActions || showTableTitle.value
+      ? { buttons: TOOLBAR_ACTIONS }
+      : {}),
+    ...(slotTools ? { tools: TOOLBAR_TOOLS } : {}),
+  };
+  return { toolbarConfig };
+});
+
+const options = computed(() => {
+  const globalGridConfig = VxeUI?.getConfig()?.grid ?? {};
+
+  const mergedOptions: VxeTableGridProps = cloneDeep(
+    mergeWithArrayOverride(
+      {},
+      toRaw(toolbarOptions.value),
+      toRaw(gridOptions.value),
+      globalGridConfig,
+    ),
+  );
+
+  if (mergedOptions.proxyConfig) {
+    const { ajax } = mergedOptions.proxyConfig;
+    mergedOptions.proxyConfig.enabled = !!ajax;
+    // 不自动加载数据, 由组件控制
+    mergedOptions.proxyConfig.autoLoad = false;
+  }
+
+  if (mergedOptions.pagerConfig) {
+    const mobileLayouts = [
+      'PrevJump',
+      'PrevPage',
+      'Number',
+      'NextPage',
+      'NextJump',
+    ] as any;
+    const layouts = [
+      'Total',
+      'Sizes',
+      'Home',
+      ...mobileLayouts,
+      'End',
+    ] as readonly string[];
+    mergedOptions.pagerConfig = mergeWithArrayOverride(
+      {},
+      mergedOptions.pagerConfig,
+      {
+        pageSize: 20,
+        background: true,
+        pageSizes: [10, 20, 30, 50, 100, 200],
+        className: 'mt-2 w-full',
+        layouts: isMobile.value ? mobileLayouts : layouts,
+        size: 'mini' as const,
+      },
+    );
+  }
+  if (mergedOptions.formConfig) {
+    mergedOptions.formConfig.enabled = false;
+  }
+  return mergedOptions;
+});
+
+function onToolbarToolClick(event: VxeGridDefines.ToolbarToolClickEventParams) {
+  if (event.code === 'search') {
+    onSearchBtnClick();
+  }
+  (
+    gridEvents.value?.toolbarToolClick as VxeGridListeners['toolbarToolClick']
+  )?.(event);
+}
+
+function onSearchBtnClick() {
+  props.api?.toggleSearchForm?.();
+}
+
+const events = computed(() => {
+  return {
+    ...gridEvents.value,
+    toolbarToolClick: onToolbarToolClick,
+  };
+});
+
+const delegatedSlots = computed(() => {
+  const resultSlots: string[] = [];
+
+  for (const key of Object.keys(slots)) {
+    if (
+      !['empty', 'form', 'loading', TOOLBAR_ACTIONS, TOOLBAR_TOOLS].includes(
+        key,
+      )
+    ) {
+      resultSlots.push(key);
+    }
+  }
+  return resultSlots;
+});
+
+const delegatedFormSlots = computed(() => {
+  const resultSlots: string[] = [];
+
+  for (const key of Object.keys(slots)) {
+    if (key.startsWith(FORM_SLOT_PREFIX)) {
+      resultSlots.push(key);
+    }
+  }
+  return resultSlots.map((key) => key.replace(FORM_SLOT_PREFIX, ''));
+});
+
+const showDefaultEmpty = computed(() => {
+  // 检查是否有原生的 VXE Table 空状态配置
+  const hasEmptyText = options.value.emptyText !== undefined;
+  const hasEmptyRender = options.value.emptyRender !== undefined;
+
+  // 如果有原生配置，就不显示默认的空状态
+  return !hasEmptyText && !hasEmptyRender;
+});
+
+async function init() {
+  await nextTick();
+  const globalGridConfig = VxeUI?.getConfig()?.grid ?? {};
+  const defaultGridOptions: VxeTableGridProps = mergeWithArrayOverride(
+    {},
+    toRaw(gridOptions.value),
+    toRaw(globalGridConfig),
+  );
+  // 内部主动加载数据，防止form的默认值影响
+  const autoLoad = defaultGridOptions.proxyConfig?.autoLoad;
+  const enableProxyConfig = options.value.proxyConfig?.enabled;
+  if (enableProxyConfig && autoLoad) {
+    props.api.grid.commitProxy?.(
+      'query',
+      formOptions.value ? ((await formApi.getValues()) ?? {}) : {},
+    );
+    // props.api.reload(formApi.form?.values ?? {});
+  }
+
+  // form 由 vben-form代替，所以不适配formConfig，这里给出警告
+  const formConfig = gridOptions.value?.formConfig;
+  // 处理某个页面加载多个Table时，第2个之后的Table初始化报出警告
+  // 因为第一次初始化之后会把defaultGridOptions和gridOptions合并后缓存进State
+  if (formConfig && formConfig.enabled) {
+    console.warn(
+      '[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
+    );
+  }
+  props.api?.setState?.({ gridOptions: defaultGridOptions });
+  // form 由 vben-form 代替，所以需要保证query相关事件可以拿到参数
+  extendProxyOptions(props.api, defaultGridOptions, () =>
+    formApi.getLatestSubmissionValues(),
+  );
+}
+
+// formOptions支持响应式
+watch(
+  formOptions,
+  () => {
+    formApi.setState((prev) => {
+      const finalFormOptions: VbenFormProps = mergeWithArrayOverride(
+        {},
+        formOptions.value,
+        prev,
+      );
+      return {
+        ...finalFormOptions,
+        collapseTriggerResize: !!finalFormOptions.showCollapseButton,
+      };
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+
+const isCompactForm = computed(() => {
+  return formApi.getState()?.compact;
+});
+
+onMounted(() => {
+  props.api?.mount?.(gridRef.value, formApi);
+  init();
+});
+
+onUnmounted(() => {
+  formApi?.unmount?.();
+  props.api?.unmount?.();
+});
+</script>
+
+<template>
+  <div :class="cn('bg-card h-full rounded-md', className)">
+    <VxeGrid
+      ref="gridRef"
+      :class="
+        cn(
+          'p-2',
+          {
+            'pt-0': showToolbar && !formOptions,
+          },
+          gridClass,
+        )
+      "
+      v-bind="options"
+      v-on="events"
+    >
+      <!-- 左侧操作区域或者title -->
+      <template v-if="showToolbar" #toolbar-actions="slotProps">
+        <slot v-if="showTableTitle" name="table-title">
+          <div class="mr-1 pl-1 text-[1rem]">
+            {{ tableTitle }}
+            <VbenHelpTooltip v-if="tableTitleHelp" trigger-class="pb-1">
+              {{ tableTitleHelp }}
+            </VbenHelpTooltip>
+          </div>
+        </slot>
+        <slot name="toolbar-actions" v-bind="slotProps"> </slot>
+      </template>
+
+      <!-- 继承默认的slot -->
+      <template
+        v-for="slotName in delegatedSlots"
+        :key="slotName"
+        #[slotName]="slotProps"
+      >
+        <slot :name="slotName" v-bind="slotProps"></slot>
+      </template>
+      <template #toolbar-tools="slotProps">
+        <slot name="toolbar-tools" v-bind="slotProps"></slot>
+        <VxeButton
+          icon="vxe-icon-search"
+          circle
+          class="ml-2"
+          v-if="gridOptions?.toolbarConfig?.search && !!formOptions"
+          :status="showSearchForm ? 'primary' : undefined"
+          :title="$t('common.search')"
+          @click="onSearchBtnClick"
+        />
+      </template>
+
+      <!-- form表单 -->
+      <template #form>
+        <div
+          v-if="formOptions"
+          v-show="showSearchForm !== false"
+          :class="
+            cn(
+              'relative rounded py-3',
+              isCompactForm
+                ? isSeparator
+                  ? 'pb-8'
+                  : 'pb-4'
+                : isSeparator
+                  ? 'pb-4'
+                  : 'pb-0',
+            )
+          "
+        >
+          <slot name="form">
+            <Form>
+              <template
+                v-for="slotName in delegatedFormSlots"
+                :key="slotName"
+                #[slotName]="slotProps"
+              >
+                <slot
+                  :name="`${FORM_SLOT_PREFIX}${slotName}`"
+                  v-bind="slotProps"
+                ></slot>
+              </template>
+              <template #reset-before="slotProps">
+                <slot name="reset-before" v-bind="slotProps"></slot>
+              </template>
+              <template #submit-before="slotProps">
+                <slot name="submit-before" v-bind="slotProps"></slot>
+              </template>
+              <template #expand-before="slotProps">
+                <slot name="expand-before" v-bind="slotProps"></slot>
+              </template>
+              <template #expand-after="slotProps">
+                <slot name="expand-after" v-bind="slotProps"></slot>
+              </template>
+            </Form>
+          </slot>
+          <div
+            v-if="isSeparator"
+            :style="{
+              ...(separatorBg ? { backgroundColor: separatorBg } : undefined),
+            }"
+            class="bg-background-deep z-100 absolute -left-2 bottom-1 h-2 w-[calc(100%+1rem)] overflow-hidden md:bottom-2 md:h-3"
+          ></div>
+        </div>
+      </template>
+      <!-- loading -->
+      <template #loading>
+        <slot name="loading">
+          <VbenLoading :spinning="true" />
+        </slot>
+      </template>
+      <!-- 统一控状态 -->
+      <template v-if="showDefaultEmpty" #empty>
+        <slot name="empty">
+          <EmptyIcon class="mx-auto" />
+          <div class="mt-2">{{ $t('common.noData') }}</div>
+        </slot>
+      </template>
+    </VxeGrid>
+  </div>
+</template>
diff --git a/admin-ui/vue/packages/effects/plugins/tsconfig.json b/admin-ui/vue/packages/effects/plugins/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/effects/plugins/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/effects/request/package.json b/admin-ui/vue/packages/effects/request/package.json
new file mode 100644
index 0000000..0b557d3
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@vben/request",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/effects/request"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@vben/locales": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "axios": "catalog:",
+    "qs": "catalog:"
+  },
+  "devDependencies": {
+    "@types/qs": "catalog:",
+    "axios-mock-adapter": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/effects/request/src/index.ts b/admin-ui/vue/packages/effects/request/src/index.ts
new file mode 100644
index 0000000..fae1b05
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/index.ts
@@ -0,0 +1,2 @@
+export * from './request-client';
+export * from 'axios';
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/index.ts b/admin-ui/vue/packages/effects/request/src/request-client/index.ts
new file mode 100644
index 0000000..a44cd15
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/index.ts
@@ -0,0 +1,3 @@
+export * from './preset-interceptors';
+export * from './request-client';
+export type * from './types';
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/modules/downloader.test.ts b/admin-ui/vue/packages/effects/request/src/request-client/modules/downloader.test.ts
new file mode 100644
index 0000000..27e8a30
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/modules/downloader.test.ts
@@ -0,0 +1,157 @@
+import type { AxiosRequestConfig } from 'axios';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { FileDownloader } from './downloader';
+
+describe('fileDownloader', () => {
+  let fileDownloader: FileDownloader;
+  const mockAxiosInstance = {
+    get: vi.fn(),
+  } as any;
+
+  beforeEach(() => {
+    fileDownloader = new FileDownloader(mockAxiosInstance);
+  });
+
+  it('should create an instance of FileDownloader', () => {
+    expect(fileDownloader).toBeInstanceOf(FileDownloader);
+  });
+
+  it('should download a file and return a Blob', async () => {
+    const url = 'https://example.com/file';
+    const mockBlob = new Blob(['file content'], { type: 'text/plain' });
+    const mockResponse: Blob = mockBlob;
+
+    mockAxiosInstance.get.mockResolvedValueOnce(mockResponse);
+
+    const result = await fileDownloader.download(url);
+
+    expect(result).toBeInstanceOf(Blob);
+    expect(result).toEqual(mockBlob);
+    expect(mockAxiosInstance.get).toHaveBeenCalledWith(url, {
+      method: 'GET',
+      responseType: 'blob',
+      responseReturn: 'body',
+    });
+  });
+
+  it('should merge provided config with default config', async () => {
+    const url = 'https://example.com/file';
+    const mockBlob = new Blob(['file content'], { type: 'text/plain' });
+    const mockResponse: Blob = mockBlob;
+
+    mockAxiosInstance.get.mockResolvedValueOnce(mockResponse);
+
+    const customConfig: AxiosRequestConfig = {
+      headers: { 'Custom-Header': 'value' },
+    };
+
+    const result = await fileDownloader.download(url, customConfig);
+    expect(result).toBeInstanceOf(Blob);
+    expect(result).toEqual(mockBlob);
+    expect(mockAxiosInstance.get).toHaveBeenCalledWith(url, {
+      ...customConfig,
+      method: 'GET',
+      responseType: 'blob',
+      responseReturn: 'body',
+    });
+  });
+
+  it('should handle errors gracefully', async () => {
+    const url = 'https://example.com/file';
+    mockAxiosInstance.get.mockRejectedValueOnce(new Error('Network Error'));
+    await expect(fileDownloader.download(url)).rejects.toThrow('Network Error');
+  });
+
+  it('should handle empty URL gracefully', async () => {
+    const url = '';
+    mockAxiosInstance.get.mockRejectedValueOnce(
+      new Error('Request failed with status code 404'),
+    );
+
+    await expect(fileDownloader.download(url)).rejects.toThrow(
+      'Request failed with status code 404',
+    );
+  });
+
+  it('should handle null URL gracefully', async () => {
+    const url = null as unknown as string;
+    mockAxiosInstance.get.mockRejectedValueOnce(
+      new Error('Request failed with status code 404'),
+    );
+
+    await expect(fileDownloader.download(url)).rejects.toThrow(
+      'Request failed with status code 404',
+    );
+  });
+});
+
+describe('fileDownloader use other method', () => {
+  let fileDownloader: FileDownloader;
+
+  it('should call request using get', async () => {
+    const url = 'https://example.com/file';
+    const mockBlob = new Blob(['file content'], { type: 'text/plain' });
+    const mockResponse: Blob = mockBlob;
+
+    const mockAxiosInstance = {
+      request: vi.fn(),
+    } as any;
+
+    fileDownloader = new FileDownloader(mockAxiosInstance);
+
+    mockAxiosInstance.request.mockResolvedValueOnce(mockResponse);
+
+    const result = await fileDownloader.download(url);
+
+    expect(result).toBeInstanceOf(Blob);
+    expect(result).toEqual(mockBlob);
+    expect(mockAxiosInstance.request).toHaveBeenCalledWith(url, {
+      method: 'GET',
+      responseType: 'blob',
+      responseReturn: 'body',
+    });
+  });
+
+  it('should call post', async () => {
+    const url = 'https://example.com/file';
+
+    const mockAxiosInstance = {
+      post: vi.fn(),
+    } as any;
+
+    fileDownloader = new FileDownloader(mockAxiosInstance);
+
+    const customConfig: AxiosRequestConfig = {
+      method: 'POST',
+      data: { name: 'aa' },
+    };
+
+    await fileDownloader.download(url, customConfig);
+
+    expect(mockAxiosInstance.post).toHaveBeenCalledWith(
+      url,
+      { name: 'aa' },
+      {
+        method: 'POST',
+        responseType: 'blob',
+        responseReturn: 'body',
+      },
+    );
+  });
+
+  it('should handle errors gracefully', async () => {
+    const url = 'https://example.com/file';
+    const mockAxiosInstance = {
+      post: vi.fn(),
+    } as any;
+
+    fileDownloader = new FileDownloader(mockAxiosInstance);
+    await expect(() =>
+      fileDownloader.download(url, { method: 'postt' }),
+    ).rejects.toThrow(
+      'RequestClient does not support method "POSTT". Please ensure the method is properly implemented in your RequestClient instance.',
+    );
+  });
+});
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/modules/downloader.ts b/admin-ui/vue/packages/effects/request/src/request-client/modules/downloader.ts
new file mode 100644
index 0000000..6c30005
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/modules/downloader.ts
@@ -0,0 +1,60 @@
+import type { RequestClient } from '../request-client';
+import type { RequestClientConfig } from '../types';
+
+type DownloadRequestConfig = {
+  /**
+   * 定义期望获得的数据类型。
+   * raw: 原始的AxiosResponse，包括headers、status等。
+   * body: 只返回响应数据的BODY部分(Blob)
+   */
+  responseReturn?: 'body' | 'raw';
+} & Omit<RequestClientConfig, 'responseReturn'>;
+
+class FileDownloader {
+  private client: RequestClient;
+
+  constructor(client: RequestClient) {
+    this.client = client;
+  }
+  /**
+   * 下载文件
+   * @param url 文件的完整链接
+   * @param config 配置信息，可选。
+   * @returns 如果config.responseReturn为'body'，则返回Blob(默认)，否则返回RequestResponse<Blob>
+   */
+  public async download<T = Blob>(
+    url: string,
+    config?: DownloadRequestConfig,
+  ): Promise<T> {
+    const finalConfig: DownloadRequestConfig = {
+      responseReturn: 'body',
+      method: 'GET',
+      ...config,
+      responseType: 'blob',
+    };
+
+    // Prefer a generic request if available; otherwise, dispatch to method-specific calls.
+    const method = (finalConfig.method || 'GET').toUpperCase();
+    const clientAny = this.client as any;
+
+    if (typeof clientAny.request === 'function') {
+      return await clientAny.request(url, finalConfig);
+    }
+    const lower = method.toLowerCase();
+
+    if (typeof clientAny[lower] === 'function') {
+      if (['POST', 'PUT'].includes(method)) {
+        const { data, ...rest } = finalConfig as Record<string, any>;
+        return await clientAny[lower](url, data, rest);
+      }
+
+      return await clientAny[lower](url, finalConfig);
+    }
+
+    throw new Error(
+      `RequestClient does not support method "${method}". Please ensure the method is properly implemented in your RequestClient instance.`,
+    );
+  }
+}
+
+export { FileDownloader };
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/modules/interceptor.ts b/admin-ui/vue/packages/effects/request/src/request-client/modules/interceptor.ts
new file mode 100644
index 0000000..f6d2ad8
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/modules/interceptor.ts
@@ -0,0 +1,40 @@
+import type { AxiosInstance, AxiosResponse } from 'axios';
+
+import type {
+  RequestInterceptorConfig,
+  ResponseInterceptorConfig,
+} from '../types';
+
+const defaultRequestInterceptorConfig: RequestInterceptorConfig = {
+  fulfilled: (response) => response,
+  rejected: (error) => Promise.reject(error),
+};
+
+const defaultResponseInterceptorConfig: ResponseInterceptorConfig = {
+  fulfilled: (response: AxiosResponse) => response,
+  rejected: (error) => Promise.reject(error),
+};
+
+class InterceptorManager {
+  private axiosInstance: AxiosInstance;
+
+  constructor(instance: AxiosInstance) {
+    this.axiosInstance = instance;
+  }
+
+  addRequestInterceptor({
+    fulfilled,
+    rejected,
+  }: RequestInterceptorConfig = defaultRequestInterceptorConfig) {
+    this.axiosInstance.interceptors.request.use(fulfilled, rejected);
+  }
+
+  addResponseInterceptor<T = any>({
+    fulfilled,
+    rejected,
+  }: ResponseInterceptorConfig<T> = defaultResponseInterceptorConfig) {
+    this.axiosInstance.interceptors.response.use(fulfilled, rejected);
+  }
+}
+
+export { InterceptorManager };
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/modules/sse.test.ts b/admin-ui/vue/packages/effects/request/src/request-client/modules/sse.test.ts
new file mode 100644
index 0000000..4e8c6a9
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/modules/sse.test.ts
@@ -0,0 +1,142 @@
+import type { RequestClient } from '../request-client';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { SSE } from './sse';
+
+// 模拟 TextDecoder
+const OriginalTextDecoder = globalThis.TextDecoder;
+
+beforeEach(() => {
+  vi.stubGlobal(
+    'TextDecoder',
+    class {
+      private decoder = new OriginalTextDecoder();
+      decode(value: Uint8Array, opts?: any) {
+        return this.decoder.decode(value, opts);
+      }
+    },
+  );
+});
+
+// 创建 fetch mock
+const createFetchMock = (chunks: string[], ok = true) => {
+  const encoder = new TextEncoder();
+  let index = 0;
+  return vi.fn().mockResolvedValue({
+    ok,
+    status: ok ? 200 : 500,
+    body: {
+      getReader: () => ({
+        read: async () => {
+          if (index < chunks.length) {
+            return { done: false, value: encoder.encode(chunks[index++]) };
+          }
+          return { done: true, value: undefined };
+        },
+      }),
+    },
+  });
+};
+
+describe('sSE', () => {
+  let client: RequestClient;
+  let sse: SSE;
+
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    client = {
+      getBaseUrl: () => 'http://localhost',
+      instance: {
+        interceptors: {
+          request: {
+            handlers: [],
+          },
+        },
+      },
+    } as unknown as RequestClient;
+    sse = new SSE(client);
+  });
+
+  it('should call requestSSE when postSSE is used', async () => {
+    const spy = vi.spyOn(sse, 'requestSSE').mockResolvedValue(undefined);
+    await sse.postSSE('/test', { foo: 'bar' }, { headers: { a: '1' } });
+    expect(spy).toHaveBeenCalledWith(
+      '/test',
+      { foo: 'bar' },
+      {
+        headers: { a: '1' },
+        method: 'POST',
+      },
+    );
+  });
+
+  it('should throw error if fetch response not ok', async () => {
+    vi.stubGlobal('fetch', createFetchMock([], false));
+    await expect(sse.requestSSE('/bad')).rejects.toThrow(
+      'HTTP error! status: 500',
+    );
+  });
+
+  it('should trigger onMessage and onEnd callbacks', async () => {
+    const messages: string[] = [];
+    const onMessage = vi.fn((msg: string) => messages.push(msg));
+    const onEnd = vi.fn();
+
+    vi.stubGlobal('fetch', createFetchMock(['hello', ' world']));
+
+    await sse.requestSSE('/sse', undefined, { onMessage, onEnd });
+
+    expect(onMessage).toHaveBeenCalledTimes(2);
+    expect(messages.join('')).toBe('hello world');
+    // onEnd 不再带参数
+    expect(onEnd).toHaveBeenCalled();
+  });
+
+  it('should apply request interceptors', async () => {
+    const interceptor = vi.fn(async (config) => {
+      config.headers['x-test'] = 'intercepted';
+      return config;
+    });
+    (client.instance.interceptors.request as any).handlers.push({
+      fulfilled: interceptor,
+    });
+
+    // 创建 fetch mock，并挂到全局
+    const fetchMock = createFetchMock(['data']);
+    vi.stubGlobal('fetch', fetchMock);
+
+    await sse.requestSSE('/sse', undefined, {});
+
+    expect(interceptor).toHaveBeenCalled();
+    expect(fetchMock).toHaveBeenCalledWith(
+      'http://localhost/sse',
+      expect.objectContaining({
+        headers: expect.any(Headers),
+      }),
+    );
+
+    const calls = fetchMock.mock?.calls;
+    expect(calls).toBeDefined();
+    expect(calls?.length).toBeGreaterThan(0);
+
+    const init = calls?.[0]?.[1] as RequestInit;
+    expect(init).toBeDefined();
+
+    const headers = init?.headers as Headers;
+    expect(headers?.get('x-test')).toBe('intercepted');
+    expect(headers?.get('accept')).toBe('text/event-stream');
+  });
+
+  it('should throw error when no reader', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue({
+        ok: true,
+        status: 200,
+        body: null,
+      }),
+    );
+    await expect(sse.requestSSE('/sse')).rejects.toThrow('No reader');
+  });
+});
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/modules/sse.ts b/admin-ui/vue/packages/effects/request/src/request-client/modules/sse.ts
new file mode 100644
index 0000000..09d1301
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/modules/sse.ts
@@ -0,0 +1,136 @@
+import type { AxiosRequestHeaders, InternalAxiosRequestConfig } from 'axios';
+
+import type { RequestClient } from '../request-client';
+import type { SseRequestOptions } from '../types';
+
+/**
+ * SSE模块
+ */
+class SSE {
+  private client: RequestClient;
+
+  constructor(client: RequestClient) {
+    this.client = client;
+  }
+
+  public async postSSE(
+    url: string,
+    data?: any,
+    requestOptions?: SseRequestOptions,
+  ) {
+    return this.requestSSE(url, data, {
+      ...requestOptions,
+      method: 'POST',
+    });
+  }
+
+  /**
+   * SSE请求方法
+   * @param url - 请求URL
+   * @param data - 请求数据
+   * @param requestOptions - SSE请求选项
+   */
+  public async requestSSE(
+    url: string,
+    data?: any,
+    requestOptions?: SseRequestOptions,
+  ) {
+    const baseUrl = this.client.getBaseUrl() || '';
+
+    let axiosConfig: InternalAxiosRequestConfig<any> = {
+      url,
+      method: (requestOptions?.method as any) ?? 'GET',
+      headers: {} as AxiosRequestHeaders,
+    };
+    const requestInterceptors = this.client.instance.interceptors
+      .request as any;
+    if (
+      requestInterceptors.handlers &&
+      requestInterceptors.handlers.length > 0
+    ) {
+      for (const handler of requestInterceptors.handlers) {
+        if (typeof handler?.fulfilled === 'function') {
+          const next = await handler.fulfilled(axiosConfig as any);
+          if (next) axiosConfig = next as InternalAxiosRequestConfig<any>;
+        }
+      }
+    }
+
+    const merged = new Headers();
+    Object.entries(
+      (axiosConfig.headers ?? {}) as Record<string, string>,
+    ).forEach(([k, v]) => merged.set(k, String(v)));
+    if (requestOptions?.headers) {
+      new Headers(requestOptions.headers).forEach((v, k) => merged.set(k, v));
+    }
+    if (!merged.has('accept')) {
+      merged.set('accept', 'text/event-stream');
+    }
+
+    let bodyInit = requestOptions?.body ?? data;
+    const ct = (merged.get('content-type') || '').toLowerCase();
+    if (
+      bodyInit &&
+      typeof bodyInit === 'object' &&
+      !ArrayBuffer.isView(bodyInit as any) &&
+      !(bodyInit instanceof ArrayBuffer) &&
+      !(bodyInit instanceof Blob) &&
+      !(bodyInit instanceof FormData) &&
+      ct.includes('application/json')
+    ) {
+      bodyInit = JSON.stringify(bodyInit);
+    }
+    const requestInit: RequestInit = {
+      ...requestOptions,
+      method: axiosConfig.method,
+      headers: merged,
+      body: bodyInit,
+    };
+
+    const response = await fetch(safeJoinUrl(baseUrl, url), requestInit);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const reader = response.body?.getReader();
+    const decoder = new TextDecoder();
+
+    if (!reader) {
+      throw new Error('No reader');
+    }
+    let isEnd = false;
+    while (!isEnd) {
+      const { done, value } = await reader.read();
+      if (done) {
+        isEnd = true;
+        decoder.decode(new Uint8Array(0), { stream: false });
+        requestOptions?.onEnd?.();
+        reader.releaseLock?.();
+        break;
+      }
+      const content = decoder.decode(value, { stream: true });
+      requestOptions?.onMessage?.(content);
+    }
+  }
+}
+
+function safeJoinUrl(baseUrl: string | undefined, url: string): string {
+  if (!baseUrl) {
+    return url; // 没有 baseUrl，直接返回 url
+  }
+
+  // 如果 url 本身就是绝对地址，直接返回
+  if (/^https?:\/\//i.test(url)) {
+    return url;
+  }
+
+  // 如果 baseUrl 是完整 URL，就用 new URL
+  if (/^https?:\/\//i.test(baseUrl)) {
+    return new URL(url, baseUrl).toString();
+  }
+
+  // 否则，当作路径拼接
+  return `${baseUrl.replace(/\/+$/, '')}/${url.replace(/^\/+/, '')}`;
+}
+
+export { SSE };
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/modules/uploader.test.ts b/admin-ui/vue/packages/effects/request/src/request-client/modules/uploader.test.ts
new file mode 100644
index 0000000..8306656
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/modules/uploader.test.ts
@@ -0,0 +1,118 @@
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { FileUploader } from './uploader';
+
+describe('fileUploader', () => {
+  let fileUploader: FileUploader;
+  // Mock the AxiosInstance
+  const mockAxiosInstance = {
+    post: vi.fn(),
+  } as any;
+
+  beforeEach(() => {
+    fileUploader = new FileUploader(mockAxiosInstance);
+  });
+
+  it('should create an instance of FileUploader', () => {
+    expect(fileUploader).toBeInstanceOf(FileUploader);
+  });
+
+  it('should upload a file and return the response', async () => {
+    const url = 'https://example.com/upload';
+    const file = new File(['file content'], 'test.txt', { type: 'text/plain' });
+    const mockResponse: AxiosResponse = {
+      config: {} as any,
+      data: { success: true },
+      headers: {},
+      status: 200,
+      statusText: 'OK',
+    };
+
+    (
+      mockAxiosInstance.post as unknown as ReturnType<typeof vi.fn>
+    ).mockResolvedValueOnce(mockResponse);
+
+    const result = await fileUploader.upload(url, { file });
+    expect(result).toEqual(mockResponse);
+    expect(mockAxiosInstance.post).toHaveBeenCalledWith(
+      url,
+      expect.any(FormData),
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      },
+    );
+  });
+
+  it('should merge provided config with default config', async () => {
+    const url = 'https://example.com/upload';
+    const file = new File(['file content'], 'test.txt', { type: 'text/plain' });
+    const mockResponse: AxiosResponse = {
+      config: {} as any,
+      data: { success: true },
+      headers: {},
+      status: 200,
+      statusText: 'OK',
+    };
+
+    (
+      mockAxiosInstance.post as unknown as ReturnType<typeof vi.fn>
+    ).mockResolvedValueOnce(mockResponse);
+
+    const customConfig: AxiosRequestConfig = {
+      headers: { 'Custom-Header': 'value' },
+    };
+
+    const result = await fileUploader.upload(url, { file }, customConfig);
+    expect(result).toEqual(mockResponse);
+    expect(mockAxiosInstance.post).toHaveBeenCalledWith(
+      url,
+      expect.any(FormData),
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          'Custom-Header': 'value',
+        },
+      },
+    );
+  });
+
+  it('should handle errors gracefully', async () => {
+    const url = 'https://example.com/upload';
+    const file = new File(['file content'], 'test.txt', { type: 'text/plain' });
+    (
+      mockAxiosInstance.post as unknown as ReturnType<typeof vi.fn>
+    ).mockRejectedValueOnce(new Error('Network Error'));
+
+    await expect(fileUploader.upload(url, { file })).rejects.toThrow(
+      'Network Error',
+    );
+  });
+
+  it('should handle empty URL gracefully', async () => {
+    const url = '';
+    const file = new File(['file content'], 'test.txt', { type: 'text/plain' });
+    (
+      mockAxiosInstance.post as unknown as ReturnType<typeof vi.fn>
+    ).mockRejectedValueOnce(new Error('Request failed with status code 404'));
+
+    await expect(fileUploader.upload(url, { file })).rejects.toThrow(
+      'Request failed with status code 404',
+    );
+  });
+
+  it('should handle null URL gracefully', async () => {
+    const url = null as unknown as string;
+    const file = new File(['file content'], 'test.txt', { type: 'text/plain' });
+    (
+      mockAxiosInstance.post as unknown as ReturnType<typeof vi.fn>
+    ).mockRejectedValueOnce(new Error('Request failed with status code 404'));
+
+    await expect(fileUploader.upload(url, { file })).rejects.toThrow(
+      'Request failed with status code 404',
+    );
+  });
+});
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/modules/uploader.ts b/admin-ui/vue/packages/effects/request/src/request-client/modules/uploader.ts
new file mode 100644
index 0000000..1353222
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/modules/uploader.ts
@@ -0,0 +1,42 @@
+import type { RequestClient } from '../request-client';
+import type { RequestClientConfig } from '../types';
+
+import { isUndefined } from '@vben/utils';
+
+class FileUploader {
+  private client: RequestClient;
+
+  constructor(client: RequestClient) {
+    this.client = client;
+  }
+
+  public async upload<T = any>(
+    url: string,
+    data: Record<string, any> & { file: Blob | File },
+    config?: RequestClientConfig,
+  ): Promise<T> {
+    const formData = new FormData();
+
+    Object.entries(data).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach((item, index) => {
+          !isUndefined(item) && formData.append(`${key}[${index}]`, item);
+        });
+      } else {
+        !isUndefined(value) && formData.append(key, value);
+      }
+    });
+
+    const finalConfig: RequestClientConfig = {
+      ...config,
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        ...config?.headers,
+      },
+    };
+
+    return this.client.post(url, formData, finalConfig);
+  }
+}
+
+export { FileUploader };
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/preset-interceptors.ts b/admin-ui/vue/packages/effects/request/src/request-client/preset-interceptors.ts
new file mode 100644
index 0000000..f8bfd43
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/preset-interceptors.ts
@@ -0,0 +1,169 @@
+import type { RequestClient } from './request-client';
+import type { MakeErrorMessageFn, ResponseInterceptorConfig } from './types';
+
+import { $t } from '@vben/locales';
+import { isFunction } from '@vben/utils';
+
+import axios from 'axios';
+
+export const defaultResponseInterceptor = ({
+  codeField = 'code',
+  dataField = 'data',
+  successCode = 0,
+}: {
+  /** 响应数据中代表访问结果的字段名 */
+  codeField: string;
+  /** 响应数据中装载实际数据的字段名，或者提供一个函数从响应数据中解析需要返回的数据 */
+  dataField: ((response: any) => any) | string;
+  /** 当codeField所指定的字段值与successCode相同时，代表接口访问成功。如果提供一个函数，则返回true代表接口访问成功 */
+  successCode: ((code: any) => boolean) | number | string;
+}): ResponseInterceptorConfig => {
+  return {
+    fulfilled: (response) => {
+      const { config, data: responseData, status } = response;
+
+      if (config.responseReturn === 'raw') {
+        return response;
+      }
+
+      if (status >= 200 && status < 400) {
+        if (config.responseReturn === 'body') {
+          return responseData;
+        } else if (
+          isFunction(successCode)
+            ? successCode(responseData[codeField])
+            : responseData[codeField] === successCode
+        ) {
+          return isFunction(dataField)
+            ? dataField(responseData)
+            : responseData[dataField];
+        }
+      }
+      throw Object.assign({}, response, { response });
+    },
+  };
+};
+
+export const authenticateResponseInterceptor = ({
+  client,
+  doReAuthenticate,
+  doRefreshToken,
+  enableRefreshToken,
+  formatToken,
+}: {
+  client: RequestClient;
+  doReAuthenticate: () => Promise<void>;
+  doRefreshToken: () => Promise<string>;
+  enableRefreshToken: boolean;
+  formatToken: (token: string) => null | string;
+}): ResponseInterceptorConfig => {
+  return {
+    rejected: async (error) => {
+      const { config, response } = error;
+      // 如果不是 401 错误，直接抛出异常
+      if (response?.status !== 401) {
+        throw error;
+      }
+      // 判断是否启用了 refreshToken 功能
+      // 如果没有启用或者已经是重试请求了，直接跳转到重新登录
+      if (!enableRefreshToken || config.__isRetryRequest) {
+        await doReAuthenticate();
+        throw error;
+      }
+      // 如果正在刷新 token，则将请求加入队列，等待刷新完成
+      if (client.isRefreshing) {
+        return new Promise((resolve) => {
+          client.refreshTokenQueue.push((newToken: string) => {
+            config.headers.Authorization = formatToken(newToken);
+            resolve(client.request(config.url, { ...config }));
+          });
+        });
+      }
+
+      // 标记开始刷新 token
+      client.isRefreshing = true;
+      // 标记当前请求为重试请求，避免无限循环
+      config.__isRetryRequest = true;
+
+      try {
+        const newToken = await doRefreshToken();
+
+        // 处理队列中的请求
+        client.refreshTokenQueue.forEach((callback) => callback(newToken));
+        // 清空队列
+        client.refreshTokenQueue = [];
+
+        return client.request(error.config.url, { ...error.config });
+      } catch (refreshError) {
+        // 如果刷新 token 失败，处理错误（如强制登出或跳转登录页面）
+        client.refreshTokenQueue.forEach((callback) => callback(''));
+        client.refreshTokenQueue = [];
+        console.error('Refresh token failed, please login again.');
+        await doReAuthenticate();
+
+        throw refreshError;
+      } finally {
+        client.isRefreshing = false;
+      }
+    },
+  };
+};
+
+export const errorMessageResponseInterceptor = (
+  makeErrorMessage?: MakeErrorMessageFn,
+): ResponseInterceptorConfig => {
+  return {
+    rejected: (error: any) => {
+      if (axios.isCancel(error)) {
+        return Promise.reject(error);
+      }
+
+      const err: string = error?.toString?.() ?? '';
+      let errMsg = '';
+      if (err?.includes('Network Error')) {
+        errMsg = $t('ui.fallback.http.networkError');
+      } else if (error?.message?.includes?.('timeout')) {
+        errMsg = $t('ui.fallback.http.requestTimeout');
+      }
+      if (errMsg) {
+        makeErrorMessage?.(errMsg, error);
+        return Promise.reject(error);
+      }
+
+      let errorMessage = '';
+      const status = error?.response?.status;
+
+      switch (status) {
+        case 400: {
+          errorMessage = $t('ui.fallback.http.badRequest');
+          break;
+        }
+        case 401: {
+          errorMessage = $t('ui.fallback.http.unauthorized');
+          break;
+        }
+        case 403: {
+          errorMessage = $t('ui.fallback.http.forbidden');
+          break;
+        }
+        case 404: {
+          errorMessage = $t('ui.fallback.http.notFound');
+          break;
+        }
+        case 408: {
+          errorMessage = $t('ui.fallback.http.requestTimeout');
+          break;
+        }
+        case 413: {
+          errorMessage = $t('ui.fallback.http.payloadTooLarge');
+          break;
+        }
+        default: {
+          errorMessage = $t('ui.fallback.http.internalServerError');
+        }
+      }
+      makeErrorMessage?.(errorMessage, error);
+      return Promise.reject(error);
+    },
+  };
+};
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/request-client.test.ts b/admin-ui/vue/packages/effects/request/src/request-client/request-client.test.ts
new file mode 100644
index 0000000..2d94525
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/request-client.test.ts
@@ -0,0 +1,99 @@
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { RequestClient } from './request-client';
+
+describe('requestClient', () => {
+  let mock: MockAdapter;
+  let requestClient: RequestClient;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    requestClient = new RequestClient();
+  });
+
+  afterEach(() => {
+    mock.reset();
+  });
+
+  it('should successfully make a GET request', async () => {
+    mock.onGet('test/url').reply(200, { data: 'response' });
+
+    const response = await requestClient.get('test/url');
+
+    expect(response.data).toEqual({ data: 'response' });
+  });
+
+  it('should successfully make a POST request', async () => {
+    const postData = { key: 'value' };
+    const mockData = { data: 'response' };
+    mock.onPost('/test/post', postData).reply(200, mockData);
+    const response = await requestClient.post('/test/post', postData);
+    expect(response.data).toEqual(mockData);
+  });
+
+  it('should successfully make a PUT request', async () => {
+    const putData = { key: 'updatedValue' };
+    const mockData = { data: 'updated response' };
+    mock.onPut('/test/put', putData).reply(200, mockData);
+    const response = await requestClient.put('/test/put', putData);
+    expect(response.data).toEqual(mockData);
+  });
+
+  it('should successfully make a DELETE request', async () => {
+    const mockData = { data: 'delete response' };
+    mock.onDelete('/test/delete').reply(200, mockData);
+    const response = await requestClient.delete('/test/delete');
+    expect(response.data).toEqual(mockData);
+  });
+
+  it('should handle network errors', async () => {
+    mock.onGet('/test/error').networkError();
+    try {
+      await requestClient.get('/test/error');
+      expect(true).toBe(false);
+    } catch (error: any) {
+      expect(error.isAxiosError).toBe(true);
+      expect(error.message).toBe('Network Error');
+    }
+  });
+
+  it('should handle timeout', async () => {
+    mock.onGet('/test/timeout').timeout();
+    try {
+      await requestClient.get('/test/timeout');
+      expect(true).toBe(false);
+    } catch (error: any) {
+      expect(error.isAxiosError).toBe(true);
+      expect(error.code).toBe('ECONNABORTED');
+    }
+  });
+
+  it('should successfully upload a file', async () => {
+    const fileData = new Blob(['file contents'], { type: 'text/plain' });
+
+    mock.onPost('/test/upload').reply((config) => {
+      return config.data instanceof FormData && config.data.has('file')
+        ? [200, { data: 'file uploaded' }]
+        : [400, { error: 'Bad Request' }];
+    });
+
+    const response = await requestClient.upload('/test/upload', {
+      file: fileData,
+    });
+    expect(response.data).toEqual({ data: 'file uploaded' });
+  });
+
+  it('should successfully download a file as a blob', async () => {
+    const mockFileContent = new Blob(['mock file content'], {
+      type: 'text/plain',
+    });
+
+    mock.onGet('/test/download').reply(200, mockFileContent);
+
+    const res = await requestClient.download('/test/download');
+
+    expect(res.data).toBeInstanceOf(Blob);
+  });
+});
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/request-client.ts b/admin-ui/vue/packages/effects/request/src/request-client/request-client.ts
new file mode 100644
index 0000000..453913b
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/request-client.ts
@@ -0,0 +1,164 @@
+import type { AxiosInstance, AxiosResponse } from 'axios';
+
+import type { RequestClientConfig, RequestClientOptions } from './types';
+
+import { bindMethods, isString, merge } from '@vben/utils';
+
+import axios from 'axios';
+import qs from 'qs';
+
+import { FileDownloader } from './modules/downloader';
+import { InterceptorManager } from './modules/interceptor';
+import { SSE } from './modules/sse';
+import { FileUploader } from './modules/uploader';
+
+function getParamsSerializer(
+  paramsSerializer: RequestClientOptions['paramsSerializer'],
+) {
+  if (isString(paramsSerializer)) {
+    switch (paramsSerializer) {
+      case 'brackets': {
+        return (params: any) =>
+          qs.stringify(params, { arrayFormat: 'brackets' });
+      }
+      case 'comma': {
+        return (params: any) => qs.stringify(params, { arrayFormat: 'comma' });
+      }
+      case 'indices': {
+        return (params: any) =>
+          qs.stringify(params, { arrayFormat: 'indices' });
+      }
+      case 'repeat': {
+        return (params: any) => qs.stringify(params, { arrayFormat: 'repeat' });
+      }
+    }
+  }
+  return paramsSerializer;
+}
+
+class RequestClient {
+  public addRequestInterceptor: InterceptorManager['addRequestInterceptor'];
+
+  public addResponseInterceptor: InterceptorManager['addResponseInterceptor'];
+  public download: FileDownloader['download'];
+
+  public readonly instance: AxiosInstance;
+  // 是否正在刷新token
+  public isRefreshing = false;
+  public postSSE: SSE['postSSE'];
+  // 刷新token队列
+  public refreshTokenQueue: ((token: string) => void)[] = [];
+  public requestSSE: SSE['requestSSE'];
+  public upload: FileUploader['upload'];
+
+  /**
+   * 构造函数，用于创建Axios实例
+   * @param options - Axios请求配置，可选
+   */
+  constructor(options: RequestClientOptions = {}) {
+    // 合并默认配置和传入的配置
+    const defaultConfig: RequestClientOptions = {
+      headers: {
+        'Content-Type': 'application/json;charset=utf-8',
+      },
+      responseReturn: 'raw',
+      // 默认超时时间
+      timeout: 10_000,
+    };
+    const { ...axiosConfig } = options;
+    const requestConfig = merge(axiosConfig, defaultConfig);
+    requestConfig.paramsSerializer = getParamsSerializer(
+      requestConfig.paramsSerializer,
+    );
+    this.instance = axios.create(requestConfig);
+
+    bindMethods(this);
+
+    // 实例化拦截器管理器
+    const interceptorManager = new InterceptorManager(this.instance);
+    this.addRequestInterceptor =
+      interceptorManager.addRequestInterceptor.bind(interceptorManager);
+    this.addResponseInterceptor =
+      interceptorManager.addResponseInterceptor.bind(interceptorManager);
+
+    // 实例化文件上传器
+    const fileUploader = new FileUploader(this);
+    this.upload = fileUploader.upload.bind(fileUploader);
+    // 实例化文件下载器
+    const fileDownloader = new FileDownloader(this);
+    this.download = fileDownloader.download.bind(fileDownloader);
+    // 实例化SSE模块
+    const sse = new SSE(this);
+    this.postSSE = sse.postSSE.bind(sse);
+    this.requestSSE = sse.requestSSE.bind(sse);
+  }
+
+  /**
+   * DELETE请求方法
+   */
+  public delete<T = any>(
+    url: string,
+    config?: RequestClientConfig,
+  ): Promise<T> {
+    return this.request<T>(url, { ...config, method: 'DELETE' });
+  }
+
+  /**
+   * GET请求方法
+   */
+  public get<T = any>(url: string, config?: RequestClientConfig): Promise<T> {
+    return this.request<T>(url, { ...config, method: 'GET' });
+  }
+
+  /**
+   * 获取基础URL
+   */
+  public getBaseUrl() {
+    return this.instance.defaults.baseURL;
+  }
+
+  /**
+   * POST请求方法
+   */
+  public post<T = any>(
+    url: string,
+    data?: any,
+    config?: RequestClientConfig,
+  ): Promise<T> {
+    return this.request<T>(url, { ...config, data, method: 'POST' });
+  }
+
+  /**
+   * PUT请求方法
+   */
+  public put<T = any>(
+    url: string,
+    data?: any,
+    config?: RequestClientConfig,
+  ): Promise<T> {
+    return this.request<T>(url, { ...config, data, method: 'PUT' });
+  }
+
+  /**
+   * 通用的请求方法
+   */
+  public async request<T>(
+    url: string,
+    config: RequestClientConfig,
+  ): Promise<T> {
+    try {
+      const response: AxiosResponse<T> = await this.instance({
+        url,
+        ...config,
+        ...(config.paramsSerializer
+          ? { paramsSerializer: getParamsSerializer(config.paramsSerializer) }
+          : {}),
+      });
+      return response as T;
+    } catch (error: any) {
+      throw error.response ? error.response.data : error;
+    }
+  }
+}
+
+export { RequestClient };
diff --git a/admin-ui/vue/packages/effects/request/src/request-client/types.ts b/admin-ui/vue/packages/effects/request/src/request-client/types.ts
new file mode 100644
index 0000000..080468b
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/src/request-client/types.ts
@@ -0,0 +1,106 @@
+import type {
+  AxiosRequestConfig,
+  AxiosResponse,
+  CreateAxiosDefaults,
+  InternalAxiosRequestConfig,
+} from 'axios';
+
+type ExtendOptions<T = any> = {
+  /**
+   * 错误提示方式。none 表示只抛出错误，由调用方自行处理。
+   */
+  errorMessageMode?: 'message' | 'none';
+  /**
+   * 成功提示方式。none 表示不展示成功提示。
+   */
+  successMessageMode?: 'message' | 'modal' | 'none';
+  /**
+   * 是否返回原始响应。
+   */
+  isReturnNativeResponse?: boolean;
+  /**
+   * 是否转换响应数据。
+   */
+  isTransformResponse?: boolean;
+  /**
+   * 参数序列化方式。预置的有
+   * - brackets: ids[]=1&ids[]=2&ids[]=3
+   * - comma: ids=1,2,3
+   * - indices: ids[0]=1&ids[1]=2&ids[2]=3
+   * - repeat: ids=1&ids=2&ids=3
+   */
+  paramsSerializer?:
+    | 'brackets'
+    | 'comma'
+    | 'indices'
+    | 'repeat'
+    | AxiosRequestConfig<T>['paramsSerializer'];
+  /**
+   * 响应数据的返回方式。
+   * - raw: 原始的AxiosResponse，包括headers、status等，不做是否成功请求的检查。
+   * - body: 返回响应数据的BODY部分（只会根据status检查请求是否成功，忽略对code的判断，这种情况下应由调用方检查请求是否成功）。
+   * - data: 解构响应的BODY数据，只返回其中的data节点数据（会检查status和code是否为成功状态）。
+   */
+  responseReturn?: 'body' | 'data' | 'raw';
+};
+type RequestClientConfig<T = any> = AxiosRequestConfig<T> & ExtendOptions<T>;
+
+type RequestResponse<T = any> = AxiosResponse<T> & {
+  config: RequestClientConfig<T>;
+};
+
+type RequestContentType =
+  | 'application/json;charset=utf-8'
+  | 'application/octet-stream;charset=utf-8'
+  | 'application/x-www-form-urlencoded;charset=utf-8'
+  | 'multipart/form-data;charset=utf-8';
+
+type RequestClientOptions = CreateAxiosDefaults & ExtendOptions;
+
+/**
+ * SSE 请求选项
+ */
+interface SseRequestOptions extends RequestInit {
+  onMessage?: (message: string) => void;
+  onEnd?: () => void;
+}
+
+interface RequestInterceptorConfig {
+  fulfilled?: (
+    config: ExtendOptions & InternalAxiosRequestConfig,
+  ) =>
+    | (ExtendOptions & InternalAxiosRequestConfig<any>)
+    | Promise<ExtendOptions & InternalAxiosRequestConfig<any>>;
+  rejected?: (error: any) => any;
+}
+
+interface ResponseInterceptorConfig<T = any> {
+  fulfilled?: (
+    response: RequestResponse<T>,
+  ) => Promise<RequestResponse> | RequestResponse;
+  rejected?: (error: any) => any;
+}
+
+type MakeErrorMessageFn = (message: string, error: any) => void;
+
+interface HttpResponse<T = any> {
+  /**
+   * 0 表示成功 其他表示失败
+   * 0 means success, others means fail
+   */
+  code: number;
+  data: T;
+  message: string;
+}
+
+export type {
+  HttpResponse,
+  MakeErrorMessageFn,
+  RequestClientConfig,
+  RequestClientOptions,
+  RequestContentType,
+  RequestInterceptorConfig,
+  RequestResponse,
+  ResponseInterceptorConfig,
+  SseRequestOptions,
+};
diff --git a/admin-ui/vue/packages/effects/request/tsconfig.json b/admin-ui/vue/packages/effects/request/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/effects/request/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/icons/README.md b/admin-ui/vue/packages/icons/README.md
new file mode 100644
index 0000000..bc50d25
--- /dev/null
+++ b/admin-ui/vue/packages/icons/README.md
@@ -0,0 +1,19 @@
+# @vben/icons
+
+用于多个 `app` 公用的图标文件，继承了 `@vben-core/icons` 的所有能力。业务上有通用图标可以放在这里。
+
+## 用法
+
+### 添加依赖
+
+```bash
+# 进入目标应用目录，例如 apps/xxxx-app
+# cd apps/xxxx-app
+pnpm add @vben/icons
+```
+
+### 使用
+
+```ts
+import { X } from '@vben/icons';
+```
diff --git a/admin-ui/vue/packages/icons/package.json b/admin-ui/vue/packages/icons/package.json
new file mode 100644
index 0000000..24680ea
--- /dev/null
+++ b/admin-ui/vue/packages/icons/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@vben/icons",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/icons"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@vben-core/icons": "workspace:*"
+  },
+  "devDependencies": {
+    "@iconify/icons-ant-design": "^1.2.7",
+    "@iconify/icons-flat-color-icons": "^1.2.5",
+    "@iconify/icons-la": "^1.2.3",
+    "@iconify/icons-ri": "^1.2.10",
+    "@iconify/icons-simple-icons": "^1.2.74",
+    "@iconify/icons-fa-brands": "^1.2.4",
+    "@iconify/icons-uiw": "^1.2.6",
+    "@iconify/icons-logos": "^1.2.36",
+    "@iconify/icons-arcticons": "^1.2.1"
+  }
+}
diff --git a/admin-ui/vue/packages/icons/src/iconify-offline/index.ts b/admin-ui/vue/packages/icons/src/iconify-offline/index.ts
new file mode 100644
index 0000000..8c331ae
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/iconify-offline/index.ts
@@ -0,0 +1,151 @@
+import { createIconifyOfflineIcon } from '@vben-core/icons';
+import userOutlined from '@iconify/icons-ant-design/user-outlined';
+import androidOutlined from '@iconify/icons-ant-design/android-outlined';
+import baiduOutlined from '@iconify/icons-ant-design/ie-outlined';
+import ieOutlined from '@iconify/icons-ant-design/ie-outlined';
+import windowsOutlined from '@iconify/icons-ant-design/windows-outlined';
+import chromeOutlined from '@iconify/icons-ant-design/chrome-outlined';
+import dingtalkOutlined from '@iconify/icons-ant-design/dingtalk-outlined';
+import uploadOutlined from '@iconify/icons-ant-design/upload-outlined';
+import plusOutlined from '@iconify/icons-ant-design/plus-outlined';
+import deleteOutlined from '@iconify/icons-ant-design/delete-outlined';
+import downloadOutlined from '@iconify/icons-ant-design/download-outlined';
+import comandLine from '@iconify/icons-flat-color-icons/command-line';
+import redisIcon from '@iconify/icons-logos/redis';
+import memoryIcon from '@iconify/icons-la/memory';
+import taobaoIconFill from '@iconify/icons-ri/taobao-fill';
+import alipayIcon from '@iconify/icons-fa-brands/alipay';
+import dingdingFill from '@iconify/icons-ri/dingding-fill';
+import giteeIcon from '@iconify/icons-simple-icons/gitee';
+import macosIcon from '@iconify/icons-simple-icons/macos';
+import githubOAuthIcon from '@iconify/icons-uiw/github';
+import appleIcon from '@iconify/icons-uiw/apple';
+import linuxIcon from '@iconify/icons-uiw/linux';
+import wechatIcon from '@iconify/icons-uiw/linux';
+import firefoxbrowserIcon from '@iconify/icons-simple-icons/firefoxbrowser';
+import operaIcon from '@iconify/icons-uiw/opera';
+import qqIcon from '@iconify/icons-uiw/qq';
+import safariIcon from '@iconify/icons-uiw/safari';
+import ucIcon from '@iconify/icons-arcticons/uc-browser';
+import windowsIcon from '@iconify/icons-uiw/windows';
+
+// 顶部菜单
+export const UserOutlined = createIconifyOfflineIcon(
+  'ant-design:user-outlined',
+  userOutlined,
+);
+// 缓存监控使用
+export const RedisIcon = createIconifyOfflineIcon('logos:redis', redisIcon);
+export const CommandLineIcon = createIconifyOfflineIcon(
+  'flat-color-icons:command-line',
+  comandLine,
+);
+export const MemoryIcon = createIconifyOfflineIcon('la:memory', memoryIcon);
+
+// 第三方登录相关图标
+export const TaobaoIcon = createIconifyOfflineIcon(
+  'ri:taobao-fill',
+  taobaoIconFill,
+);
+export const AlipayIcon = createIconifyOfflineIcon(
+  'fa-brands:alipay',
+  alipayIcon,
+);
+export const DingdingIcon = createIconifyOfflineIcon(
+  'ri:dingding-fill',
+  dingdingFill,
+);
+export const GiteeIcon = createIconifyOfflineIcon(
+  'simple-icons:gitee',
+  giteeIcon,
+);
+export const GithubOAuthIcon = createIconifyOfflineIcon(
+  'uiw:github',
+  githubOAuthIcon,
+);
+// 系统相关
+export const AndroidIcon = createIconifyOfflineIcon(
+  'ant-design:android-outlined',
+  androidOutlined,
+);
+export const BaiduIcon = createIconifyOfflineIcon(
+  'ant-design:baidu-outlined',
+  baiduOutlined,
+);
+export const ChromeIcon = createIconifyOfflineIcon(
+  'ant-design:chrome-outlined',
+  chromeOutlined,
+);
+export const DefaultBrowserIcon = createIconifyOfflineIcon(
+  'ant-design:ie-outlined',
+    ieOutlined,
+  );
+export const DefaultOsIcon = createIconifyOfflineIcon(
+  'ant-design:windows-outlined',
+  windowsOutlined,
+);
+export const DingtalkIcon = createIconifyOfflineIcon(
+  'ant-design:dingtalk-outlined',
+  dingtalkOutlined,
+);
+export const EdgeIcon = createIconifyOfflineIcon(
+  'ant-design:ie-outlined',
+  ieOutlined,
+);
+export const FirefoxIcon = createIconifyOfflineIcon(
+  'simple-icons:firefoxbrowser',
+  firefoxbrowserIcon,
+);
+export const IPhoneIcon = createIconifyOfflineIcon(
+  'uiw:apple',
+  appleIcon,
+);
+export const LinuxIcon = createIconifyOfflineIcon(
+  'uiw:linux',
+  linuxIcon,
+);
+export const MicromessengerIcon = createIconifyOfflineIcon(
+    'uiw:weixin',
+    wechatIcon,
+  );
+export const OperaIcon = createIconifyOfflineIcon(
+  'uiw:opera',
+  operaIcon,
+);
+export const OSXIcon = createIconifyOfflineIcon(
+  'simple-icons:macos',
+  macosIcon,
+);
+export const QQIcon = createIconifyOfflineIcon(
+  'uiw:qq',
+  qqIcon,
+);
+
+export const SafariIcon = createIconifyOfflineIcon(
+  'uiw:safari',
+  safariIcon,
+);
+export const UcIcon = createIconifyOfflineIcon(
+  'arcticons:uc-browser',
+  ucIcon,
+);
+export const WindowsIcon = createIconifyOfflineIcon(
+  'uiw:windows',
+  windowsIcon,
+);
+export const UploadOutlined = createIconifyOfflineIcon(
+  'ant-design:upload-outlined',
+  uploadOutlined,
+);
+export const PlusOutlined = createIconifyOfflineIcon(
+  'ant-design:plus-outlined',
+  plusOutlined,
+);
+export const DeleteOutlined = createIconifyOfflineIcon(
+  'ant-design:delete-outlined',
+  deleteOutlined,
+);
+export const DownloadOutlined = createIconifyOfflineIcon(
+  'ant-design:download-outlined',
+  downloadOutlined,
+);
diff --git a/admin-ui/vue/packages/icons/src/iconify/index.ts b/admin-ui/vue/packages/icons/src/iconify/index.ts
new file mode 100644
index 0000000..e5aa9b0
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/iconify/index.ts
@@ -0,0 +1,26 @@
+import { createIconifyIcon } from '@vben-core/icons';
+
+export * from '@vben-core/icons';
+
+export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
+
+export const MdiWechat = createIconifyIcon('mdi:wechat');
+
+export const MdiGithub = createIconifyIcon('mdi:github');
+
+export const MdiGoogle = createIconifyIcon('mdi:google');
+
+export const MdiQqchat = createIconifyIcon('mdi:qqchat');
+
+// 系统管理使用
+export const MdiPlus = createIconifyIcon('mdi:plus');
+
+export const MdiEdit = createIconifyIcon('mdi:pencil');
+
+export const MdiExport = createIconifyIcon('mdi:export');
+
+export const MdiImport = createIconifyIcon('mdi:import');
+
+export const MdiDelete = createIconifyIcon('mdi:delete');
+
+export const SyncOutlined = createIconifyIcon('ant-design:sync-outlined');
diff --git a/admin-ui/vue/packages/icons/src/icons/empty-icon.vue b/admin-ui/vue/packages/icons/src/icons/empty-icon.vue
new file mode 100644
index 0000000..444a765
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/icons/empty-icon.vue
@@ -0,0 +1,27 @@
+<template>
+  <svg
+    height="41"
+    viewBox="0 0 64 41"
+    width="64"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fill="none" fill-rule="evenodd" transform="translate(0 1)">
+      <ellipse
+        cx="32"
+        cy="33"
+        fill="hsl(var(--background-deep))"
+        rx="32"
+        ry="7"
+      />
+      <g fill-rule="nonzero" stroke="hsl(var(--heavy))">
+        <path
+          d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+        />
+        <path
+          d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+          fill="hsl(var(--accent))"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/admin-ui/vue/packages/icons/src/index.ts b/admin-ui/vue/packages/icons/src/index.ts
new file mode 100644
index 0000000..b224144
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/index.ts
@@ -0,0 +1,4 @@
+export * from './iconify';
+export { default as EmptyIcon } from './icons/empty-icon.vue';
+export * from './svg';
+export * from './iconify-offline/index.js';
\ No newline at end of file
diff --git a/admin-ui/vue/packages/icons/src/svg/icons/antdv-logo.svg b/admin-ui/vue/packages/icons/src/svg/icons/antdv-logo.svg
new file mode 100644
index 0000000..dbfcee7
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/icons/antdv-logo.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
+    <title>Vue</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="69.644116%" y1="0%" x2="69.644116%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#29CDFF" offset="0%"></stop>
+            <stop stop-color="#148EFF" offset="37.8600687%"></stop>
+            <stop stop-color="#0A60FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-19.8191553%" y1="-36.7931464%" x2="138.57919%" y2="157.637507%" id="linearGradient-2">
+            <stop stop-color="#29CDFF" offset="0%"></stop>
+            <stop stop-color="#0F78FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-3">
+            <stop stop-color="#FA8E7D" offset="0%"></stop>
+            <stop stop-color="#F74A5C" offset="51.2635191%"></stop>
+            <stop stop-color="#F51D2C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(19.000000, 9.000000)">
+            <path d="M89.96,90.48 C78.58,93.48 68.33,83.36 67.62,82.48 L46.6604487,62.2292258 C45.5023849,61.1103236 44.8426845,59.5728835 44.8296987,57.9626396 L44.5035564,17.5209948 C44.4948861,16.4458744 44.0537714,15.4195095 43.2796864,14.6733517 L29.6459999,1.53153737 C28.055475,-0.00160504005 25.5232423,0.0449126588 23.9900999,1.63543756 C23.2715121,2.38092066 22.87,3.37600834 22.87,4.41143746 L22.87,64.3864751 C22.87,67.0807891 23.9572233,69.6611067 25.885409,71.5429748 L63.6004615,108.352061 C65.9466323,110.641873 69.6963584,110.624605 72.0213403,108.313281" id="Path-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(56.415000, 54.831157) scale(-1, 1) translate(-56.415000, -54.831157) "></path>
+            <path d="M68,90.1163122 C56.62,93.1163122 45.46,83.36 44.75,82.48 L23.7904487,62.2292258 C22.6323849,61.1103236 21.9726845,59.5728835 21.9596987,57.9626396 L21.6335564,17.5209948 C21.6248861,16.4458744 21.1837714,15.4195095 20.4096864,14.6733517 L6.7759999,1.53153737 C5.185475,-0.00160504005 2.65324232,0.0449126588 1.12009991,1.63543756 C0.401512125,2.38092066 3.90211878e-13,3.37600834 3.90798505e-13,4.41143746 L3.94351218e-13,64.3864751 C3.94681177e-13,67.0807891 1.08722326,69.6611067 3.01540903,71.5429748 L40.7807092,108.401101 C43.1069304,110.671444 46.8180151,110.676525 49.1504445,108.412561" id="Path" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+            <path d="M43.2983488,19.0991931 L27.5566079,3.88246244 C26.7624281,3.11476967 26.7409561,1.84862177 27.5086488,1.05444194 C27.8854826,0.664606611 28.4044438,0.444472651 28.9466386,0.444472651 L60.3925021,0.444472651 C61.4970716,0.444472651 62.3925021,1.33990315 62.3925021,2.44447265 C62.3925021,2.9858375 62.1730396,3.50407742 61.7842512,3.88079942 L46.0801285,19.0975301 C45.3051579,19.8484488 44.0742167,19.8491847 43.2983488,19.0991931 Z" id="Path" fill="url(#linearGradient-3)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/admin-ui/vue/packages/icons/src/svg/icons/arcticons--quark-browser.svg b/admin-ui/vue/packages/icons/src/svg/icons/arcticons--quark-browser.svg
new file mode 100644
index 0000000..80fd6d3
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/icons/arcticons--quark-browser.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="21.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M36 24c0 .878-.284 4.274-1.127 4.283c-7.274.07-7.959-.899-8.983 6.588C25.751 35.885 25.072 36 24 36c-6.627 0-12-5.373-12-12s5.373-12 12-12s12 5.373 12 12" stroke-width="1"/></svg>
\ No newline at end of file
diff --git a/admin-ui/vue/packages/icons/src/svg/icons/avatar-1.svg b/admin-ui/vue/packages/icons/src/svg/icons/avatar-1.svg
new file mode 100644
index 0000000..b05970d
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/icons/avatar-1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 391.31 560.11"><defs><style>.avatar-1-cls-1{fill:#f9cdb7;}.avatar-1-cls-2{fill:#e2a78d;}.avatar-1-cls-3{fill:#213346;}.avatar-1-cls-4{fill:#bfe1ee;}.avatar-1-cls-5{fill:#dfe7ea;}.avatar-1-cls-6{fill:#b46078;}.avatar-1-cls-7{fill:#96426e;}.avatar-1-cls-8{fill:#fff;}.avatar-1-cls-9{fill:#fefdf5;}.avatar-1-avatar-1-cls-10{fill:#f4eae1;}.avatar-1-avatar-1-cls-11{fill:#f9637c;}.avatar-1-avatar-1-cls-12{fill:#ba4264;}.avatar-1-avatar-1-cls-13{fill:#b13a59;}</style></defs><title>Asset 15</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="avatar-1-cls-1" cx="45.9" cy="303.35" r="41.4"/><path class="avatar-1-cls-2" d="M78.13,278.08a41.39,41.39,0,0,0-57.27,57.27,41.4,41.4,0,1,1,57.27-57.27Z"/><path class="avatar-1-cls-3" d="M45.9,347.82a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,45.9,347.82Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,45.9,265Z"/><circle class="avatar-1-cls-1" cx="345.41" cy="303.35" r="41.4"/><path class="avatar-1-cls-3" d="M345.42,347.82a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,345.42,347.82Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,345.42,265Z"/><path class="avatar-1-cls-1" d="M191.57,88.78h2.79a146.1,146.1,0,0,1,146.1,146.1v95A147.5,147.5,0,0,1,193,477.43h0a147.5,147.5,0,0,1-147.5-147.5v-95a146.1,146.1,0,0,1,146.1-146.1Z"/><path class="avatar-1-cls-2" d="M211.7,474.46a147.74,147.74,0,0,1-20.29,1.41c-81.14,0-147.5-66.37-147.5-147.5v-97c0-79.3,64.87-144.18,144.17-144.18h6.65a142.14,142.14,0,0,1,17,1C147.26,95.87,91.42,154.6,81.17,220.06a509,509,0,0,1-13.33,61.86L54.49,328.37C54.49,402.62,140.07,464.5,211.7,474.46Z"/><path class="avatar-1-cls-3" d="M191.41,481.93a152.43,152.43,0,0,1-152-152V234.88A151,151,0,0,1,190,84.28h2.79a151,151,0,0,1,150.61,150.6v95.05a152.45,152.45,0,0,1-152,152ZM190,93.28a142,142,0,0,0-141.6,141.6v95.05a142.82,142.82,0,0,0,244,101,142,142,0,0,0,42-101V234.88A142,142,0,0,0,192.8,93.28Z"/><path class="avatar-1-cls-4" d="M325.44,305.26v.19C324.89,305.48,325.11,305.35,325.44,305.26Z"/><path class="avatar-1-cls-3" d="M368.43,305.61a3,3,0,0,1-2.94-2.41c-4.06-20.3-24.53-16.89-25.4-16.73a3,3,0,1,1-1-5.91c9.36-1.67,28.17.66,32.33,21.46a3,3,0,0,1-2.35,3.53A3,3,0,0,1,368.43,305.61Z"/><path class="avatar-1-cls-3" d="M21.27,308.26a2.36,2.36,0,0,1-.37,0,3,3,0,0,1-2.61-3.34c1.75-14.23,7.79-21.26,12.55-24.65a20.94,20.94,0,0,1,10.61-4.05,3,3,0,0,1,.24,6c-.65,0-14.7,1.08-17.45,23.43A3,3,0,0,1,21.27,308.26Z"/><ellipse class="avatar-1-cls-5" cx="184.64" cy="499.11" rx="179.73" ry="52.86"/><path class="avatar-1-cls-6" d="M335.74,353.31c21.15,38.6,14.42,76.22,15.16,112.12l-11.45-12.67a123.72,123.72,0,0,1-30.05,60,44.13,44.13,0,0,0-13.92-15.33,92.89,92.89,0,0,1-28.69,48.92,37.34,37.34,0,0,0-1.06-30.87A58.87,58.87,0,0,1,233.6,551.2a24.22,24.22,0,0,0,2.63-23.34c-11.66,19.79-45.18,20.39-57.53,1-.86,3.91-.23,9.05,3.76,9.38-16.8,2.59-32.18-4.49-43.74-16.95a28.25,28.25,0,0,0,9.37,18.32A51.33,51.33,0,0,1,105.4,511.3c-21.68,1.35-43.33-13.51-49.87-34.21a10.36,10.36,0,0,1-2.7,9.92C15.38,468,17.38,382.75,41.91,354.63c0,0,51.63,8.28,83,32.06,8.53,6.48,8.78-2.64,21-7.72,16.48-6.83,45.87-11.63,62.57-11.7,24.41-.11,37.46,30.85,53.1,16.16C303,344.58,335.38,352.66,335.74,353.31Z"/><path class="avatar-1-cls-7" d="M352.35,461,340.9,448.3a123.83,123.83,0,0,1-30,60,44.26,44.26,0,0,0-13.92-15.34,92.89,92.89,0,0,1-28.69,48.92A37.38,37.38,0,0,0,267.18,511a58.84,58.84,0,0,1-32.13,35.77,24.22,24.22,0,0,0,2.63-23.33c-11.66,19.79-45.18,20.39-57.53,1-.87,3.91.11,18.31,4.11,18.65-16.8,2.58-32.53-13.76-44.09-26.22.67,7,2.41,19.59,7.68,24.23-17.9-.91-33.22-18.12-41-34.26-21.68,1.35-43.33-13.5-49.87-34.21a10.38,10.38,0,0,1-2.7,9.93C41.34,476,32.8,461.71,28.19,444.67,44.75,456.74,64.24,465,83.51,472.46c13.08,5,26.33,9.83,40.12,12.34,13.38,2.43,27.05,2.67,40.65,2.91,37.73.65,77,1,111.14-15.22,9.78-4.65,20.09-12.6,19.75-23.43-.39-12.38-13.93-19.44-25.48-23.87,24.6-3.65,44.78-22.73,56-44.92a136.88,136.88,0,0,0,9.89-26.39l3.31,2.58C349,391.91,351.61,425.08,352.35,461Z"/><path class="avatar-1-cls-3" d="M256.37,560.11l7.72-18.34a32.54,32.54,0,0,0,2.3-16.08,63.44,63.44,0,0,1-29.54,26.86l-15.22,6.65,9.78-13.42A19.55,19.55,0,0,0,235,535.31c-6.64,5.87-15.71,9.29-25.74,9.47a40.71,40.71,0,0,1-22-5.69c1.08,5.49,1.15,10.37-3.11,12.33l-1.88.87-1.88-.87c-13.79-6.36-24.61-12.92-33.69-20.51,1.54,6.3,3.28,8.56,4.17,9.34l9.71,8.53-12.91-.66c-19.13-1-35-18.9-43.5-35h-.05c-18.58,0-36.49-10.43-46.18-26.13l-.46.48-2.31,2.25-2.88-1.46C38,481,27.7,464.56,23.31,441.92c-6.43-33.13.88-73.25,16.66-91.33a4.5,4.5,0,0,1,6.78,5.91c-14.15,16.23-20.57,53-14.61,83.71,3.45,17.74,10.68,31,20.55,37.85a5.39,5.39,0,0,0-.06-2.56L61.27,473c5.89,18.64,25.78,32.29,45.3,31.07l3-.19,1.31,2.73c7.82,16.21,18.57,26.05,28.08,30.23A85.81,85.81,0,0,1,135.69,519l-1.27-13.24,9.05,9.75c9,9.69,19.89,17.53,34.83,25-.35-1.64-.78-3.38-1.09-4.62-1.3-5.17-2-8.22-1.46-10.69l2.33-10.64,5.86,9.18c4.85,7.6,14,12.09,24.49,12.09h.66c10.8-.2,20-5,24.71-13l4.51-7.66,3.5,8.16a28.32,28.32,0,0,1,2,14.83,54.25,54.25,0,0,0,19.1-26.84l3.33-10.56,5,9.89a41.62,41.62,0,0,1,4.38,18.57,88.24,88.24,0,0,0,16.95-35.57l1.43-6.48,5.49,3.73a48.58,48.58,0,0,1,11.95,11.55,120.21,120.21,0,0,0,25.08-53.29l1.69-8.89,10.47,11.59c2.16-37.59-3.37-68.28-17.17-95.91a4.5,4.5,0,1,1,8-4c15.83,31.7,21.33,67,17.31,111.15l-.93,10.24-12.53-13.87A127.42,127.42,0,0,1,314.17,513l-4.26,4.66-3-5.54a39.46,39.46,0,0,0-7.37-9.62,97.41,97.41,0,0,1-28.29,44.41Z"/><path class="avatar-1-cls-1" d="M158.08,455.14A10.16,10.16,0,0,1,147.94,445V406.25a10.17,10.17,0,0,1,10.14-10.14H229a10.17,10.17,0,0,1,10.13,10.14V445A10.16,10.16,0,0,1,229,455.14"/><path class="avatar-1-cls-2" d="M240.85,410.47v12a10.15,10.15,0,0,0-9.29-6.1H160.61a10.16,10.16,0,0,0-10.14,10.13v26.74a10.1,10.1,0,0,1-.84-4V410.47a10.16,10.16,0,0,1,10.13-10.13h71A10.16,10.16,0,0,1,240.85,410.47Z"/><path class="avatar-1-cls-3" d="M193.13,394.93c7.32,0,14.47,0,21.37.11l10.16.12,2.48,0,1.23,0h.34l.45,0,.89.06a14.83,14.83,0,0,1,6.56,2.4,14.65,14.65,0,0,1,6.5,11.19l0,.81v.68l0,1.11-.06,2.21c0,1.45-.08,2.89-.13,4.3-.18,5.64-.38,10.9-.61,15.69s-.48,9.14-.75,12.95c0,.48-.06,1-.1,1.41,0,.23,0,.45,0,.68s-.05.55-.08.81a12.38,12.38,0,0,1-.77,3.09,12,12,0,0,1-3.1,4.43,10.12,10.12,0,0,1-6.49,2.68,5.06,5.06,0,0,1-1.78-.27c-.39-.15-.58-.31-.58-.49s.19-.35.52-.54l1.41-.68a10.84,10.84,0,0,0,4.06-3.37,8.74,8.74,0,0,0,1.39-3.21,8.13,8.13,0,0,0,.13-1.92l0-.53c0-.23,0-.45-.05-.68,0-.46-.07-.93-.1-1.41-.27-3.81-.52-8.15-.74-12.95s-.44-10.05-.62-15.69c0-1.41-.09-2.85-.13-4.3l-.06-2.21,0-1.11v-.28l0-.16,0-.32a5.68,5.68,0,0,0-2.72-4.14,5.59,5.59,0,0,0-2.44-.77h-.76l-1.23,0-2.48,0-10.16.12c-6.9.07-14.05.1-21.37.1s-14.47,0-21.37-.1l-10.17-.12-2.47,0-1.23,0h-.76a5.59,5.59,0,0,0-2.44.77,5.68,5.68,0,0,0-2.72,4.14l0,.32,0,.16v.28l0,1.11-.06,2.21c0,1.45-.09,2.89-.13,4.3-.18,5.64-.39,10.9-.62,15.69s-.47,9.14-.74,12.95c0,.48-.07,1-.1,1.41,0,.23,0,.45,0,.68l0,.53a8.13,8.13,0,0,0,.13,1.92,8.58,8.58,0,0,0,1.39,3.21,10.69,10.69,0,0,0,4.06,3.37l1.4.68c.34.19.52.37.52.54s-.18.34-.57.49a5.06,5.06,0,0,1-1.78.27,10.14,10.14,0,0,1-6.5-2.68,12,12,0,0,1-3.09-4.43,12.38,12.38,0,0,1-.77-3.09c0-.26-.07-.59-.08-.81l-.06-.68c0-.46-.06-.93-.1-1.41-.26-3.81-.51-8.15-.74-12.95s-.43-10.05-.61-15.69c0-1.41-.09-2.85-.13-4.3,0-.73-.05-1.47-.07-2.21l0-1.11v-.68l0-.81a14.74,14.74,0,0,1,13.06-13.59l.89-.06.45,0h.34l1.23,0,2.47,0,10.17-.12C178.66,395,185.81,394.93,193.13,394.93Z"/><path class="avatar-1-cls-3" d="M54.48,374.11a37.83,37.83,0,0,0,.49,9.41,39.45,39.45,0,0,0,3,9.29,40.75,40.75,0,0,1-5.73-8.37,42.54,42.54,0,0,1-3.46-9.9,46.05,46.05,0,0,1-1-10.71,50.72,50.72,0,0,1,.42-5.48,35.47,35.47,0,0,1,1.17-5.68l10.41,4.56a24.21,24.21,0,0,0-2,3.68,43.89,43.89,0,0,0-1.6,4.2A39.74,39.74,0,0,0,54.48,374.11Z"/><path class="avatar-1-cls-3" d="M70,382.66c.81,7.4,4.1,14.79,8.86,21.21A47.32,47.32,0,0,1,64.51,384a38.71,38.71,0,0,1-2.31-12.94,35.09,35.09,0,0,1,2.63-13.62l10,5.38C71,367.93,69.21,375.33,70,382.66Z"/><path class="avatar-1-cls-3" d="M98.32,388.23a51,51,0,0,0,6.84,20.32,54,54,0,0,1-12.35-18.93A56.65,56.65,0,0,1,89,366.14l11.2,1.92A47.79,47.79,0,0,0,98.32,388.23Z"/><path class="avatar-1-cls-3" d="M282.66,384.17a26.93,26.93,0,0,1-.31,8.78c-.5,2.23-1.26,3.53-2,3.48-1.43-.15-2-5.39-2.82-11.65s-1.36-11.51,0-12c.66-.21,1.71.88,2.72,2.92A27,27,0,0,1,282.66,384.17Z"/><path class="avatar-1-cls-3" d="M305.19,378.25a35.36,35.36,0,0,1-2.39,12.16c-1.21,3-2.49,4.54-3.14,4.31-1.37-.52.25-7.73.42-16.61s-.95-16.16.45-16.6c.65-.19,1.85,1.45,2.91,4.47A35.62,35.62,0,0,1,305.19,378.25Z"/><path class="avatar-1-cls-3" d="M328.91,374.58a53,53,0,0,1,.5,9.22,44.45,44.45,0,0,1-.88,7.48c-.89,4.19-2.12,6.59-2.77,6.45-1.47-.31-.09-10.37-1.91-22.42s-5.7-21.42-4.36-22.11c.6-.31,2.41,1.68,4.41,5.46a46.7,46.7,0,0,1,2.91,6.93A56.29,56.29,0,0,1,328.91,374.58Z"/><path class="avatar-1-cls-3" d="M63.25,476.89a41,41,0,0,1-.26-8.64,36.07,36.07,0,0,1,.52-3.73,28.41,28.41,0,0,1,.79-3.18c1.19-3.83,2.68-5.88,3.3-5.66s.47,2.63.25,6.31c0,.93-.12,1.93-.13,3s0,2.22,0,3.41a68.87,68.87,0,0,0,.61,7.76,75.5,75.5,0,0,0,1.58,7.62c.34,1.15.63,2.26,1,3.27s.66,2,1,2.85c1.24,3.47,2.14,5.7,1.53,6.13s-2.54-1.16-4.76-4.51A27.16,27.16,0,0,1,67,488.7a35.74,35.74,0,0,1-1.55-3.44A41.24,41.24,0,0,1,63.25,476.89Z"/><path class="avatar-1-cls-3" d="M95.32,490.74a52.94,52.94,0,0,1-.06-13.92c.47-3.51,1.17-5.64,1.87-5.63s1.28,2.19,1.74,5.63.8,8.16,1.51,13.2c.37,2.51.82,4.86,1.3,7,.29,1,.5,2.06.8,3q.19.7.39,1.35l.41,1.23c1,3.14,1.89,5.16,1.29,5.61s-2.46-.92-4.52-4l-.78-1.23c-.25-.43-.48-.9-.73-1.39a31.63,31.63,0,0,1-1.37-3.18A41.46,41.46,0,0,1,95.32,490.74Z"/><path class="avatar-1-cls-3" d="M133.57,497.43c-4.22-15-4.79-27.65-3.43-27.82s4.23,11.85,8.35,26.45,7.93,26.36,6.6,26.93S137.74,512.42,133.57,497.43Z"/><path class="avatar-1-cls-3" d="M246.46,509.58c1.89-6.31,3.22-12.24,4.4-16.52s2.17-6.94,2.88-6.83.94,2.91.68,7.41a78.07,78.07,0,0,1-3.07,17.43,59.78,59.78,0,0,1-3.67,9.2,42.39,42.39,0,0,1-2.2,3.76c-.37.57-.73,1.13-1.1,1.64l-1.13,1.43c-3,3.61-5.46,5.14-5.93,4.69s.94-2.87,2.92-6.68c.25-.47.5-1,.77-1.49l.78-1.65c.56-1.12,1-2.39,1.62-3.67C244.45,515.67,245.5,512.73,246.46,509.58Z"/><path class="avatar-1-cls-3" d="M276.25,498.2c1.34-7.68,2-14.9,3-20.1s1.81-8.37,2.51-8.31,1.07,3.35,1.08,8.62a122.32,122.32,0,0,1-1.55,20.69,60.77,60.77,0,0,1-3.08,11.26,42.45,42.45,0,0,1-4.42,8.53c-3.14,4.54-6,6.46-6.51,6s1.27-3.2,3.37-7.8a68.85,68.85,0,0,0,3.11-8.29A89.28,89.28,0,0,0,276.25,498.2Z"/><path class="avatar-1-cls-3" d="M306.39,479c1.49-6.22,2.52-12,3.48-16.23s1.83-6.81,2.54-6.73,1.08,2.78,1,7.15a78.88,78.88,0,0,1-2.11,17,58.26,58.26,0,0,1-3,9.11c-.63,1.35-1.19,2.63-1.87,3.77-.33.58-.63,1.14-1,1.66l-1,1.47c-2.59,3.69-4.87,5.39-5.38,5s.61-2.87,2.22-6.72L302,493c.2-.53.41-1.08.62-1.66.47-1.12.85-2.38,1.32-3.67C304.79,485,305.63,482.1,306.39,479Z"/><path class="avatar-1-cls-3" d="M316.6,469.6c1.61-4,2.93-7.79,4-11.33.5-1.78,1-3.46,1.41-5.07s.78-3.1,1.1-4.47c1.26-5.5,1.93-9,2.68-9s1.27,3.64.89,9.52c-.1,1.46-.24,3.07-.52,4.78s-.61,3.53-1,5.44a76.28,76.28,0,0,1-9.69,23.34c-1.07,1.63-2.07,3.19-3.13,4.56s-2.05,2.64-3,3.74c-3.89,4.42-6.89,6.55-7.37,6.09s1.47-3.46,4.47-8.24c.75-1.2,1.57-2.5,2.39-3.94s1.69-3,2.6-4.58C313.16,477.18,315,473.53,316.6,469.6Z"/><path class="avatar-1-cls-8" d="M36.38,392.54c.75-3.65,2.73-6.2,4.07-5.78s1.62,3.43.93,6.81-2.14,6-3.55,5.89S35.63,396.18,36.38,392.54Z"/><path class="avatar-1-cls-8" d="M37.64,432a53,53,0,0,1-1.88-14.87c.13-3.85.79-6.2,1.47-6.2,1.47,0,2.42,9.08,5.35,19.74s6.63,19,5.37,19.72c-.59.34-2.36-1.34-4.42-4.6A51.58,51.58,0,0,1,37.64,432Z"/><path class="avatar-1-cls-3" d="M125.55,391.49h-.49c-5.14-.18-9.18-3.25-12.42-5.71l-.2-.15a157,157,0,0,0-68.06-29.49,4.5,4.5,0,0,1,1.51-8.87,166.07,166.07,0,0,1,72,31.19l.19.15c2.47,1.87,5,3.8,7.31,3.89s4.86-1.61,7.58-3.4l.77-.5C149.09,368.55,169,363,189.86,363h0c20.83,0,40.77,5.52,56.13,15.56l.77.5c2.71,1.79,5.3,3.48,7.58,3.4s4.84-2,7.3-3.89l.2-.15a166.07,166.07,0,0,1,72-31.19,4.5,4.5,0,1,1,1.51,8.87,157,157,0,0,0-68.06,29.49l-.2.15c-3.24,2.46-7.28,5.53-12.42,5.71s-9.43-2.62-12.85-4.87l-.74-.49c-28.72-18.76-73.71-18.76-102.43,0l-.74.49C134.6,388.79,130.5,391.49,125.55,391.49Z"/><path class="avatar-1-cls-3" d="M190.39,345.16a4.49,4.49,0,0,1-4.5-4.5V294.07a4.5,4.5,0,0,1,9,0v46.59A4.5,4.5,0,0,1,190.39,345.16Z"/><path class="avatar-1-cls-2" d="M178.07,222.19c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.65,5.56-23.92,5.21a103.64,103.64,0,0,0-30,3.07c-8,2.05-15.14,7-23.27,8.36-8.9,1.55-11-3.2-5.06-9.72,7-7.66,17-15.82,26.45-20.25,17.56-8.26,39.91-12.29,59.6-10.32"/><path class="avatar-1-cls-2" d="M204.25,225.47c-1.68,7.42-1.08,17.32,4.13,23.31,6.07,7,15.65,5.56,23.92,5.21a103.61,103.61,0,0,1,30,3.07c8,2.05,15.14,6.95,23.27,8.36,8.91,1.55,11-3.19,5.06-9.72-6.94-7.66-17-15.81-26.44-20.25-17.57-8.26-39.91-12.29-59.61-10.31"/><path class="avatar-1-cls-6" d="M205.19,214.55c-1.68,7.41-1.09,17.31,4.12,23.3,6.07,7,15.65,5.57,23.92,5.22a103.23,103.23,0,0,1,30,3.07c8,2.05,15.15,6.94,23.27,8.36,8.91,1.55,11-3.2,5.07-9.73-6.95-7.66-17-15.81-26.45-20.25-17.57-8.26-39.91-12.28-59.6-10.31"/><path class="avatar-1-cls-3" d="M289.6,259.29a22.42,22.42,0,0,1-3.85-.36c-5-.87-9.51-2.84-13.86-4.75a64.83,64.83,0,0,0-9.76-3.68,98.35,98.35,0,0,0-28.71-2.93c-.88,0-1.78.08-2.68.13-8,.44-18,1-24.83-6.89-6.61-7.6-6.88-19.43-5.11-27.26a5.34,5.34,0,0,1,4.29-3.82,123.23,123.23,0,0,1,62,10.72c9.2,4.33,19.88,12.49,27.87,21.3,5.87,6.47,4.76,11.05,3.58,13.2C297.53,256.7,295.17,259.29,289.6,259.29Zm-51.81-20.82a106.54,106.54,0,0,1,26.58,3.31,73,73,0,0,1,11.13,4.16c4,1.77,7.86,3.44,11.79,4.12a12.72,12.72,0,0,0,2.79.22,12.53,12.53,0,0,0-1.83-2.48c-7.24-8-16.83-15.35-25-19.2a114.19,114.19,0,0,0-54.15-10.17c-.7,5.74.13,12.44,3.63,16.47,4,4.56,10.57,4.2,17.55,3.82l2.79-.15C234.63,238.51,236.21,238.47,237.79,238.47Z"/><path class="avatar-1-cls-6" d="M173.31,210.57c1.68,7.42,1.09,17.32-4.12,23.3-6.08,7-15.66,5.57-23.93,5.22a103.27,103.27,0,0,0-30,3.07c-8,2.05-15.14,7-23.27,8.36-8.91,1.55-11-3.2-5.06-9.72,6.94-7.66,17-15.82,26.45-20.25,17.56-8.26,39.9-12.29,59.6-10.32"/><path class="avatar-1-cls-3" d="M88.89,255.31c-5.56,0-7.93-2.59-8.89-4.34-1.19-2.15-2.3-6.72,3.58-13.2,8-8.81,18.66-17,27.86-21.29a123,123,0,0,1,62-10.72,5.3,5.3,0,0,1,4.29,3.82c1.77,7.82,1.49,19.65-5.12,27.25-6.86,7.88-16.82,7.33-24.83,6.89l-2.68-.13a98.35,98.35,0,0,0-28.71,2.93,66.24,66.24,0,0,0-9.75,3.68c-4.36,1.91-8.86,3.88-13.87,4.75A22.42,22.42,0,0,1,88.89,255.31Zm-.47-9a12.45,12.45,0,0,0,2.78-.21c3.93-.69,7.75-2.36,11.8-4.13a73.52,73.52,0,0,1,11.12-4.16,107.61,107.61,0,0,1,31.33-3.2c.92,0,1.85.09,2.8.14,7,.38,13.57.75,17.54-3.82,3.51-4,4.33-10.72,3.63-16.47a114.34,114.34,0,0,0-54.15,10.17c-8.19,3.85-17.78,11.21-25,19.2A12.55,12.55,0,0,0,88.42,246.3Z"/><path class="avatar-1-cls-3" d="M183.32,443.66a115.94,115.94,0,0,1-19.23-1.61,3.5,3.5,0,1,1,1.27-6.88c.3.05,30.64,5.45,44.81-4.67a15.44,15.44,0,0,0,6.65-10.76,3.5,3.5,0,1,1,6.92,1.05,22.47,22.47,0,0,1-9.51,15.42C205.9,442.15,193.63,443.66,183.32,443.66Z"/><path class="avatar-1-cls-3" d="M353.48,315.47a3,3,0,0,1-2.91-2.3,38.7,38.7,0,0,1-1.16-13.9A21,21,0,0,1,355.94,286a3,3,0,0,1,4,4.48,15.11,15.11,0,0,0-4.57,9.53,33.19,33.19,0,0,0,1,11.77,3,3,0,0,1-2.22,3.61A2.79,2.79,0,0,1,353.48,315.47Z"/><path class="avatar-1-cls-3" d="M33.65,315.47a2.79,2.79,0,0,1-.7-.08,3,3,0,0,1-2.23-3.61,33.19,33.19,0,0,0,1-11.77,15.1,15.1,0,0,0-4.56-9.53,3,3,0,1,1,4-4.48,21,21,0,0,1,6.53,13.27,38.93,38.93,0,0,1-1.16,13.9A3,3,0,0,1,33.65,315.47Z"/><path class="avatar-1-cls-8" d="M257.31,169.69a45.27,45.27,0,0,1,7.68,4,35.23,35.23,0,0,1,5.5,4.42c2.85,2.87,4,5.23,3.3,6s-3.05,0-6.42-1.57l-5.81-2.68c-2.18-1-4.56-2-7.09-3s-5-1.88-7.24-2.68l-6.07-2c-3.49-1.2-5.77-2.2-5.73-3.28s2.48-2,6.52-2.08a34.71,34.71,0,0,1,7,.58A45.21,45.21,0,0,1,257.31,169.69Z"/><path class="avatar-1-cls-8" d="M37.56,196.45a14.27,14.27,0,0,1,4.18-5.72c1.52-1.16,2.92-1.47,3.78-.87s1.07,2,.85,3.68a23.93,23.93,0,0,1-1.76,5.89,23.77,23.77,0,0,1-3,5.37c-1.06,1.34-2.18,2.15-3.23,1.95s-1.79-1.42-2-3.31A14.32,14.32,0,0,1,37.56,196.45Z"/><path class="avatar-1-cls-8" d="M59.41,173.58c3.26-1.52,6.63-1.21,7.53.71s-1,4.71-4.29,6.23-6.63,1.2-7.53-.71S56.15,175.1,59.41,173.58Z"/><path class="avatar-1-cls-8" d="M74.62,157.15c2.37-5.05,5.43-8.82,7.45-8.15s2.07,5.88-.51,11.39-6.65,8.81-8.43,7.7S72.26,162.2,74.62,157.15Z"/><path class="avatar-1-cls-9" d="M57.89,159.15V82c0-15.57,6.93-29.64,17.59-35.75l38.7-22.17c46.33-26.53,98.7-26.53,145,0l38.71,22.17C308.57,52.33,315.49,66.4,315.49,82v77.18"/><path class="avatar-1-avatar-1-cls-10" d="M312.46,80.79v19.39c-49.22-48.34-115.1-74.62-177.69-59.93-17.18,4-34.87,11.84-45.35,28.33-13.07,20.57-10.54,52.57,5.53,70C106.58,151.12,122,155,137.89,158h-83V80.79c0-15.58,6.92-29.65,17.59-35.76l38.7-22.17c46.32-26.52,98.7-26.52,145,0L294.88,45C305.55,51.14,312.46,65.21,312.46,80.79Z"/><path class="avatar-1-cls-3" d="M315.3,163.91a4.5,4.5,0,0,1-4.5-4.5V82.23c0-14-6-26.52-15.32-31.85L256.77,28.22c-22.36-12.81-46-19.31-70.27-19.31s-47.91,6.5-70.27,19.31L77.52,50.38C68.22,55.71,62.2,68.22,62.2,82.23v77.18a4.5,4.5,0,0,1-9,0V82.23c0-17.18,7.79-32.75,19.85-39.66l38.7-22.16c47.51-27.21,102-27.21,149.5,0L300,42.57C312,49.48,319.8,65.05,319.8,82.23v77.18A4.49,4.49,0,0,1,315.3,163.91Z"/><path class="avatar-1-avatar-1-cls-11" d="M358.91,168a188.7,188.7,0,0,1-7.86,25.11c-1.65,4.39-15.77,41.8-14.06,43.41-34-31.93-86.3-52.37-145-52.37S81.13,204.56,47.14,236.44c-12.27-38.2-42.51-96.29-6.57-129,10.27-9.35,23.35-13.28,36.1-16.5,72.69-18.36,148.62-20.81,221.57-3.88,12,2.79,24,6.15,34.87,12.74s20.46,16.78,25,30C362.43,142.3,361.73,155.35,358.91,168Z"/><path class="avatar-1-avatar-1-cls-12" d="M61.88,102.48C69,96,77.49,92.12,86.27,89.28q-4.09,1-8.18,2c-12.75,3.22-25.83,7.15-36.1,16.5-35.94,32.71-5.7,90.8,6.57,129a163.52,163.52,0,0,1,17-13.88C52.14,185,28.54,132.83,61.88,102.48Z"/><path class="avatar-1-avatar-1-cls-13" d="M104.58,105a1,1,0,0,1-.19-2c6.25-1.26,12.88-2.39,19.71-3.36a1,1,0,0,1,.28,2c-6.79,1-13.39,2.09-19.6,3.34A.68.68,0,0,1,104.58,105Z"/><path class="avatar-1-avatar-1-cls-13" d="M57.19,120.46a1,1,0,0,1-.84-.46,1,1,0,0,1,.3-1.38c.42-.27,10.63-6.73,35.7-12.92a1,1,0,1,1,.48,1.94c-24.75,6.11-35,12.6-35.1,12.66A1,1,0,0,1,57.19,120.46Z"/><path class="avatar-1-avatar-1-cls-13" d="M220.93,96.32h-.09c-6.83-.61-13.48-1-19.79-1.22a1,1,0,0,1,0-2h0c6.34.2,13,.62,19.9,1.23a1,1,0,0,1-.09,2Z"/><path class="avatar-1-avatar-1-cls-13" d="M152,99.31a1,1,0,0,1-.16-2l5.35-.91c10.3-1.78,21-3.62,31.71-3.45a1,1,0,1,1,0,2c-10.58-.16-21.13,1.66-31.34,3.42l-5.37.91Z"/><path class="avatar-1-avatar-1-cls-13" d="M326.33,116.8a1,1,0,0,1-.33-.06c-6.55-2.35-13-4.47-19.07-6.29a1,1,0,0,1-.67-1.25,1,1,0,0,1,1.25-.67c6.13,1.83,12.58,4,19.16,6.33a1,1,0,0,1-.34,1.94Z"/><path class="avatar-1-avatar-1-cls-13" d="M295.34,107.21a1,1,0,0,1-.24,0C270.44,101,258.75,102,258.64,102a1,1,0,1,1-.19-2c.48,0,12.09-1.07,37.13,5.24a1,1,0,0,1-.24,2Z"/><path class="avatar-1-avatar-1-cls-13" d="M105.15,117.87a1,1,0,0,1-.19-2c6.24-1.26,12.88-2.39,19.71-3.36a1,1,0,1,1,.28,2c-6.79,1-13.39,2.09-19.6,3.34A.68.68,0,0,1,105.15,117.87Z"/><path class="avatar-1-avatar-1-cls-13" d="M57.76,133.34a1,1,0,0,1-.54-1.84c.42-.27,10.63-6.73,35.7-12.92a1,1,0,0,1,.48,1.94c-24.69,6.1-35,12.6-35.1,12.66A1,1,0,0,1,57.76,133.34Z"/><path class="avatar-1-avatar-1-cls-13" d="M221.5,109.2h-.09c-6.83-.61-13.49-1-19.79-1.22a1,1,0,0,1-1-1,1,1,0,0,1,1-1c6.33.2,13,.62,19.89,1.23a1,1,0,0,1-.08,2Z"/><path class="avatar-1-avatar-1-cls-13" d="M152.57,112.24a1,1,0,0,1-.35-1.94c.46-.17,11.58-4.16,37.21-4.46a1,1,0,0,1,1,1,1,1,0,0,1-1,1c-25.23.3-36.44,4.3-36.55,4.34A1,1,0,0,1,152.57,112.24Z"/><path class="avatar-1-avatar-1-cls-13" d="M326.9,129.68a1,1,0,0,1-.34-.06c-6.54-2.35-12.95-4.47-19.06-6.29a1,1,0,0,1,.58-1.92c6.13,1.83,12.58,4,19.16,6.33a1,1,0,0,1-.34,1.94Z"/><path class="avatar-1-avatar-1-cls-13" d="M295.91,120.09a1,1,0,0,1-.24,0c-24.72-6.23-36.35-5.2-36.46-5.19a1,1,0,0,1-.2-2c.49,0,12.09-1.07,37.14,5.24a1,1,0,0,1-.24,2Z"/><path class="avatar-1-avatar-1-cls-13" d="M104,132.4a1,1,0,0,1-1-.8,1,1,0,0,1,.78-1.18c6.25-1.25,12.88-2.39,19.71-3.36a1,1,0,0,1,1.14.85,1,1,0,0,1-.85,1.13c-6.8,1-13.4,2.09-19.61,3.34A.65.65,0,0,1,104,132.4Z"/><path class="avatar-1-avatar-1-cls-13" d="M56.62,147.87a1,1,0,0,1-.84-.46,1,1,0,0,1,.3-1.38c.42-.27,10.64-6.73,35.71-12.92a1,1,0,0,1,1.21.73,1,1,0,0,1-.74,1.21c-24.74,6.11-35,12.6-35.1,12.66A1,1,0,0,1,56.62,147.87Z"/><path class="avatar-1-avatar-1-cls-13" d="M220.36,123.73h-.09c-6.83-.62-13.48-1-19.78-1.23a1,1,0,0,1-1-1,1,1,0,0,1,1-1c6.34.2,13,.62,19.9,1.23a1,1,0,0,1-.09,2Z"/><path class="avatar-1-avatar-1-cls-13" d="M151.43,126.77a1,1,0,0,1-.35-1.94c.47-.17,11.58-4.16,37.22-4.46h0a1,1,0,0,1,0,2c-25.29.3-36.43,4.3-36.54,4.34A1.07,1.07,0,0,1,151.43,126.77Z"/><path class="avatar-1-avatar-1-cls-13" d="M325.77,144.22a1,1,0,0,1-.34-.06c-6.54-2.36-12.95-4.48-19.06-6.3a1,1,0,0,1-.67-1.25,1,1,0,0,1,1.24-.67c6.14,1.84,12.59,4,19.16,6.33a1,1,0,0,1-.33,1.95Z"/><path class="avatar-1-avatar-1-cls-13" d="M294.77,134.62l-.24,0c-24.65-6.21-36.35-5.2-36.46-5.19a1,1,0,0,1-.19-2c.48,0,12.08-1.07,37.14,5.24a1,1,0,0,1-.25,2Z"/><path class="avatar-1-cls-8" d="M134.28,55.94a21.68,21.68,0,0,1,9.13,1c2.27.86,3.52,2,3.38,3s-1.6,1.81-3.74,2.36a52.83,52.83,0,0,1-8.1,1.2,52.47,52.47,0,0,1-8.19.23c-2.2-.16-3.76-.65-4.09-1.66s.7-2.36,2.79-3.59A21.52,21.52,0,0,1,134.28,55.94Z"/><path class="avatar-1-cls-8" d="M189.16,54c14.08.87,25.23,3.94,25,6s-11.61,2.48-25.44,1.63S163.63,59,163.64,56.91,175.09,53.15,189.16,54Z"/><path class="avatar-1-cls-3" d="M45,244.59l-2.18-6.77c-1.91-6-4.28-12.43-6.78-19.29-13.82-37.8-31-84.85,1.47-114.42C48.67,94,62.43,89.89,75.57,86.57c75.35-19,152.7-20.37,223.69-3.89C311.33,85.48,324.07,89,335.45,96c12.88,7.83,22.44,19.32,26.92,32.35,4.08,11.86,4.39,25.17.93,40.67h0a191.33,191.33,0,0,1-8,25.71l-.14.4c-10,26.58-13.67,38.62-13.77,40.85a3.89,3.89,0,0,0-1.28-2.7l-6.16,6.56C299.3,207.29,247.58,188.65,192,188.65S84.83,207.26,50.21,239.73ZM197.37,80.24A489.6,489.6,0,0,0,77.77,95.3c-12,3-24.58,6.73-34.17,15.47-28,25.5-12,69.4.92,104.68,1.65,4.52,3.25,8.88,4.7,13.07,36.12-31.14,87.71-48.87,142.8-48.87,54.72,0,106,17.49,142,48.22,1-3.25,2.37-7.53,4.18-12.73,2.27-6.56,5.11-14.37,8.44-23.22l.15-.39A184.81,184.81,0,0,0,354.52,167c3.08-13.83,2.87-25.54-.66-35.78-3.8-11.05-12-20.85-23.09-27.6-9.72-5.91-20.44-9.15-33.54-12.19A441.79,441.79,0,0,0,197.37,80.24ZM358.91,168h0Z"/><path class="avatar-1-cls-8" d="M316.3,283a85,85,0,0,1-.17-10.5c.2-2.77.72-4.63,1.76-4.88s2.37,1.22,3.57,3.91a35.67,35.67,0,0,1,1.44,22.17c-.84,2.82-2,4.45-3,4.34s-1.82-1.89-2.38-4.61A83.3,83.3,0,0,1,316.3,283Z"/><path class="avatar-1-cls-8" d="M310.41,253a8.45,8.45,0,0,1-.74-3.45,4,4,0,0,1,1-2.95,2.9,2.9,0,0,1,3.26-.34,7.5,7.5,0,0,1,3.8,8.75,2.92,2.92,0,0,1-2.48,2.15,4.08,4.08,0,0,1-2.87-1.26A8.5,8.5,0,0,1,310.41,253Z"/><path class="avatar-1-cls-8" d="M300.23,237.15c-1-1.27-.45-3.35,1.22-4.65s3.82-1.33,4.82-.06.44,3.36-1.23,4.66S301.22,238.42,300.23,237.15Z"/><path class="avatar-1-cls-8" d="M258.7,168A36.44,36.44,0,0,1,271.61,173c3,2,4.41,3.89,3.92,4.8s-2.75.81-6,.2-7.55-1.61-12.31-2.55-9.11-1.61-12.36-2.27-5.37-1.37-5.47-2.44,1.91-2.24,5.43-3A36.43,36.43,0,0,1,258.7,168Z"/><path class="avatar-1-cls-8" d="M296.63,182.34a5.05,5.05,0,0,1,2.82,2.8,3,3,0,0,1-.45,3,4.48,4.48,0,0,1-2.58,1.46,4.48,4.48,0,0,1-4.87-2,4.37,4.37,0,0,1-.75-2.87,3,3,0,0,1,1.85-2.44A5.05,5.05,0,0,1,296.63,182.34Z"/><path class="avatar-1-cls-8" d="M320.06,194.45a16.53,16.53,0,0,1,5.18,5.14c1,1.69,1.19,3.15.49,3.94s-2.13.8-3.88.28a28.09,28.09,0,0,1-11.07-7.19c-1.19-1.39-1.77-2.7-1.32-3.67s1.85-1.37,3.8-1.15A16.57,16.57,0,0,1,320.06,194.45Z"/><circle class="avatar-1-cls-3" cx="133.38" cy="300.14" r="22.91"/><circle class="avatar-1-cls-1" cx="143.6" cy="283.11" r="12.7"/><circle class="avatar-1-cls-8" cx="124.18" cy="308.69" r="5.28"/><circle class="avatar-1-cls-3" cx="239.38" cy="305.14" r="22.91"/><circle class="avatar-1-cls-1" cx="249.6" cy="288.11" r="12.7"/><circle class="avatar-1-cls-8" cx="230.18" cy="313.69" r="5.28"/></g></g></svg>
diff --git a/admin-ui/vue/packages/icons/src/svg/icons/avatar-2.svg b/admin-ui/vue/packages/icons/src/svg/icons/avatar-2.svg
new file mode 100644
index 0000000..8e17b0b
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/icons/avatar-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.47 510.81"><defs><style>.avatar-2-cls-1{fill:#dfe7ea;}.avatar-2-cls-2{fill:#ceea57;}.avatar-2-cls-3{fill:#213346;}.avatar-2-cls-4{fill:#95bc4a;}.avatar-2-cls-5{fill:#bfe1ee;}.avatar-2-avatar-2-cls-11,.avatar-2-cls-6{fill:#fff;}.avatar-2-cls-7{fill:#f5a2c6;}.avatar-2-cls-8{fill:#d676a3;}.avatar-2-cls-9{fill:#f9637c;}.avatar-2-avatar-2-cls-10{fill:#cc3656;}.avatar-2-avatar-2-cls-11{opacity:0.5;}.avatar-2-avatar-2-cls-12{fill:#f6aecd;}.avatar-2-avatar-2-cls-13{fill:#86b9f8;}.avatar-2-avatar-2-cls-14{fill:#7662fa;}</style></defs><title>Asset 16</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="avatar-2-cls-1" cx="191.74" cy="457.95" rx="179.73" ry="52.86"/><circle class="avatar-2-cls-2" cx="334.64" cy="271.05" r="40.33"/><path class="avatar-2-cls-3" d="M334.64,314.49a44.83,44.83,0,1,1,44.83-44.83A44.88,44.88,0,0,1,334.64,314.49Zm0-80.66a35.83,35.83,0,1,0,35.83,35.83A35.87,35.87,0,0,0,334.64,233.83Z"/><path class="avatar-2-cls-3" d="M356.42,273.33a3,3,0,0,1-2.93-2.41c-3.92-19.6-23.82-16.39-24.67-16.24a3,3,0,0,1-1.05-5.91c9.15-1.63,27.53.65,31.6,21a3,3,0,0,1-2.35,3.53A3.05,3.05,0,0,1,356.42,273.33Z"/><circle class="avatar-2-cls-2" cx="44.83" cy="269.05" r="40.33"/><path class="avatar-2-cls-4" d="M76.23,244.43a40.32,40.32,0,0,0-55.79,55.79,40.33,40.33,0,1,1,55.79-55.79Z"/><path class="avatar-2-cls-3" d="M44.83,312.49a44.83,44.83,0,1,1,44.83-44.83A44.88,44.88,0,0,1,44.83,312.49Zm0-80.66a35.83,35.83,0,1,0,35.83,35.83A35.87,35.87,0,0,0,44.83,231.83Z"/><path class="avatar-2-cls-2" d="M188.76,62h2.72A142.34,142.34,0,0,1,333.82,204.34v92.6a143.7,143.7,0,0,1-143.7,143.7h0a143.7,143.7,0,0,1-143.7-143.7v-92.6A142.34,142.34,0,0,1,188.76,62Z"/><path class="avatar-2-cls-4" d="M208.37,437.76a143.43,143.43,0,0,1-19.77,1.37c-79,0-143.71-64.66-143.71-143.71V200.94c0-77.25,63.22-140.46,140.47-140.46h6.48a136.88,136.88,0,0,1,16.53,1C138.82,69.71,84.43,129.29,84.43,200.94v94.48C84.43,367.76,138.58,428.06,208.37,437.76Z"/><path class="avatar-2-cls-3" d="M188.6,445.15A148.62,148.62,0,0,1,40.39,296.94v-92.6A147.26,147.26,0,0,1,187.24,57.5H190A147.26,147.26,0,0,1,336.8,204.34v92.6A148.62,148.62,0,0,1,188.6,445.15ZM187.24,66.5A138.26,138.26,0,0,0,49.39,204.34v92.6a139,139,0,0,0,237.52,98.31,138.2,138.2,0,0,0,40.89-98.31v-92.6A138.24,138.24,0,0,0,190,66.5Z"/><path class="avatar-2-cls-5" d="M319.19,272.92v.18C318.65,273.12,318.86,273,319.19,272.92Z"/><path class="avatar-2-cls-3" d="M20.84,273.92a2.31,2.31,0,0,1-.37,0,3,3,0,0,1-2.61-3.34c1.7-13.89,7.61-20.76,12.26-24.07a20.44,20.44,0,0,1,10.38-4,3,3,0,0,1,.23,6c-.63,0-14.25,1.06-16.92,22.76A3,3,0,0,1,20.84,273.92Z"/><path class="avatar-2-cls-3" d="M190.57,306.5a3,3,0,0,1-3-3V256.91a3,3,0,1,1,6,0V303.5A3,3,0,0,1,190.57,306.5Z"/><path class="avatar-2-cls-6" d="M40.94,365.6c.72-3.5,2.66-5.94,4-5.52s1.67,3.31,1,6.55-2.1,5.77-3.51,5.62S40.22,369.1,40.94,365.6Z"/><path class="avatar-2-cls-6" d="M42.16,403.44a49.43,49.43,0,0,1-1.78-14.27c.14-3.7.8-5.95,1.48-6,1.47,0,2.43,8.7,5.23,18.9s6.3,18.17,5,18.93c-.59.34-2.31-1.26-4.31-4.37A48.78,48.78,0,0,1,42.16,403.44Z"/><path class="avatar-2-cls-7" d="M137.75,2.51a33.77,33.77,0,0,0-24.37,10.94,34,34,0,0,0-41.26,46,34,34,0,1,0,38.79,54.36,34,34,0,0,0,54.73-27.46c0-.39,0-.78-.06-1.17a34,34,0,1,0,7.68-66.91,34.46,34.46,0,0,0-5.87.62A33.92,33.92,0,0,0,137.75,2.51Z"/><path class="avatar-2-cls-8" d="M89.32,49.48a33.74,33.74,0,0,0,2.8,12.94,34,34,0,0,0,6.82,64,34.92,34.92,0,0,1-6.91.82A34,34,0,0,1,77.12,62.42a34,34,0,0,1,30.57-47.49,34.27,34.27,0,0,1,8.1.82A34,34,0,0,0,89.32,49.48Z"/><path class="avatar-2-cls-3" d="M86.42,130.69A38.47,38.47,0,0,1,66.54,59.3,38.47,38.47,0,0,1,102.61,9.43a38.62,38.62,0,0,1,9.42,1A38,38,0,0,1,137.67,0h0a38.68,38.68,0,0,1,31.88,16c1.2-.14,2.42-.22,3.63-.24a38.47,38.47,0,0,1,28.34,65.18,38.17,38.17,0,0,1-27,11.75,40.18,40.18,0,0,1-4.53-.19,38.46,38.46,0,0,1-58.66,29.07,38.09,38.09,0,0,1-24.22,9.13ZM103.29,18.42h-.53a29.45,29.45,0,0,0-28.94,30,29,29,0,0,0,2.43,11.22l1.75,4L74,65.5a29.47,29.47,0,1,0,33.65,47.16l2.8-2.92,3.2,2.48A29.45,29.45,0,0,0,161.14,88.4c0-.29,0-.58,0-.87l-.53-6.29,6.12,1.55a29.47,29.47,0,1,0,6.65-58.05,28.71,28.71,0,0,0-5.08.54l-3.08.6-1.63-2.68A29.59,29.59,0,0,0,137.83,9h0a29.21,29.21,0,0,0-21.14,9.5l-1.93,2.09L112,19.75A29.32,29.32,0,0,0,103.29,18.42ZM137.75,4.51h0Z"/><polygon class="avatar-2-cls-3" points="225.1 107.59 226.73 112.26 221.44 110.12 233.38 107.94 235.94 107.48 236.58 109.21 243.09 126.94 231.9 111.73 235.06 112.98 224.2 118.39 221.46 119.76 218.98 116.27 215.87 111.89 194.8 82.23 205.66 66.03 225.1 107.59"/><polygon class="avatar-2-cls-3" points="81.49 154.74 81.53 157.94 84.27 155.47 76.54 156.78 74.89 157.06 74.88 158.25 74.82 170.43 78.27 158.75 76.63 160.2 84.41 161.1 86.37 161.33 87.11 158.67 88.04 155.33 95.65 128.68 84.16 125.25 81.49 154.74"/><polygon class="avatar-2-cls-3" points="197.95 122.51 197.9 126.47 194.51 123.42 204.09 125.03 206.15 125.38 206.16 126.86 206.23 141.99 201.95 127.48 203.99 129.29 194.33 130.4 191.89 130.68 190.97 127.38 189.82 123.23 180.37 90.14 194.63 85.89 197.95 122.51"/><polygon class="avatar-2-cls-3" points="149.78 144.16 144.65 143.61 144.93 142.63 148.61 118.63 135.56 121.73 137.8 143.28 138.05 145.98 138.25 148.13 140.4 147.9 147.64 147.1 148.59 155.26 151.23 145.32 151.49 144.35 149.78 144.16"/><circle class="avatar-2-cls-3" cx="241.03" cy="227.35" r="41.06"/><rect class="avatar-2-cls-9" x="238.09" y="225.78" width="15.99" height="86.04" rx="6.5"/><path class="avatar-2-avatar-2-cls-10" d="M249.78,310.38a5.81,5.81,0,0,1-3.69,1.43c-4.42,0-8-5.69-8-12.71V238.48c0-7,3.58-12.7,8-12.7a5.8,5.8,0,0,1,3.69,1.42c-2.56,2.13-4.31,6.38-4.31,11.28V299.1C245.47,304,247.22,308.25,249.78,310.38Z"/><path class="avatar-2-cls-3" d="M246.09,314.81a11,11,0,0,1-11-11v-70a11,11,0,0,1,22,0v70A11,11,0,0,1,246.09,314.81Zm0-86a5,5,0,0,0-5,5v70a5,5,0,1,0,10,0v-70A5,5,0,0,0,246.09,228.78Z"/><path class="avatar-2-cls-6" d="M296.05,131.36a75.23,75.23,0,0,1,6,11c.74,1.78,1.43,3.47,1.95,5.11s1,3.16,1.31,4.57c1.35,5.68,1.2,9.35.22,9.6-2.16.52-6.69-12.4-15.84-26.1-9-13.81-19.06-23.07-17.73-24.84.61-.81,4.05.51,8.73,4,1.17.87,2.42,1.86,3.69,3s2.58,2.43,3.93,3.81A76.62,76.62,0,0,1,296.05,131.36Z"/><path class="avatar-2-cls-6" d="M313.3,178.31c.48,2.42-.82,4.71-2.89,5.12s-4.15-1.22-4.62-3.64.82-4.72,2.9-5.13S312.83,175.89,313.3,178.31Z"/><path class="avatar-2-cls-6" d="M317,202.62c.54,4.11-.73,7.66-2.82,7.94s-4.24-2.84-4.77-6.94.73-7.66,2.83-7.94S316.48,198.52,317,202.62Z"/><circle class="avatar-2-avatar-2-cls-11" cx="229.78" cy="343.53" r="5.28"/><path class="avatar-2-avatar-2-cls-12" d="M138,52.68a29,29,0,0,0-19.37-.87c-4.89,1.53-7.35,3.77-7.61,3.46-.11-.12.35-.84,1.49-1.84A19.53,19.53,0,0,1,118,50.11a27.32,27.32,0,0,1,9.38-1.92,29,29,0,0,1,11.56,2.13,27.34,27.34,0,0,1,9.7,6.66,27.9,27.9,0,0,1,5.25,8,23.39,23.39,0,0,1,1.74,6.16c.19,1.49.1,2.34-.06,2.36-.42.07-.9-3.21-3.31-7.74a30.26,30.26,0,0,0-5.31-7.14A27.38,27.38,0,0,0,138,52.68Z"/><path class="avatar-2-avatar-2-cls-12" d="M108.26,80.3a20.07,20.07,0,0,1,5.12-6.47,17.38,17.38,0,0,1,5.9-3.25,12.35,12.35,0,0,1,4.47-.59c1.06.08,1.62.29,1.61.45,0,.42-2.29.4-5.44,1.83a19,19,0,0,0-5,3.33,20.41,20.41,0,0,0-4.38,5.83,30,30,0,0,0-2.72,13.22c0,3.56.27,5.81-.11,5.89s-1.22-2.07-1.69-5.78a27.59,27.59,0,0,1,0-6.59A24.21,24.21,0,0,1,108.26,80.3Z"/><path class="avatar-2-avatar-2-cls-12" d="M140.43,20.33a25.58,25.58,0,0,1,7.06,2.46,15.34,15.34,0,0,1,4.81,3.92,8.61,8.61,0,0,1,1.76,3.83c.16,1,0,1.54-.14,1.56-.41.07-.75-2-3-4.19a16.3,16.3,0,0,0-4.52-3,28.82,28.82,0,0,0-6.48-2.05,20.5,20.5,0,0,0-6.69-.31,13.86,13.86,0,0,0-5.09,1.69c-2.71,1.55-3.75,3.39-4.09,3.2-.15-.07-.09-.63.35-1.52a9.55,9.55,0,0,1,2.73-3.17,13.55,13.55,0,0,1,5.72-2.52A19.9,19.9,0,0,1,140.43,20.33Z"/><path class="avatar-2-avatar-2-cls-12" d="M186.89,58.43a31.33,31.33,0,0,0,1.87-9.7,11.92,11.92,0,0,0-2.48-7.23,38.35,38.35,0,0,0-3.72-4.12c-.95-1-1.44-1.54-1.33-1.68s.8.18,2,.91a22.1,22.1,0,0,1,4.49,3.76,12.88,12.88,0,0,1,3.43,8.27,30.14,30.14,0,0,1-1.79,10.58,20.67,20.67,0,0,1-2.38,5.16,14,14,0,0,1-3.87,3.81,16.85,16.85,0,0,1-8.49,2.65,18,18,0,0,1-5.85-.68c-1.33-.39-2-.81-1.95-1,.1-.41,3,.43,7.63-.16a16.46,16.46,0,0,0,7.33-2.79A12.18,12.18,0,0,0,184.85,63,19.79,19.79,0,0,0,186.89,58.43Z"/><path class="avatar-2-avatar-2-cls-12" d="M85.1,87.16A13.11,13.11,0,0,1,81,78.56c-.12-2.47.54-3.89.85-3.83s.39,1.48.94,3.56A14,14,0,0,0,94.08,88.92c2.11.43,3.54.36,3.61.74s-1.3,1-3.78,1.06A13.1,13.1,0,0,1,85.1,87.16Z"/><path class="avatar-2-avatar-2-cls-12" d="M133,92.83a24.28,24.28,0,0,0,4.74-.43,20,20,0,0,0,2-.52,16.5,16.5,0,0,0,1.73-.6c2.1-.83,3.36-1.6,3.61-1.3s-.66,1.54-2.78,2.91a13.24,13.24,0,0,1-1.81,1,16.71,16.71,0,0,1-2.21.82,18.08,18.08,0,0,1-10.7-.22,16.23,16.23,0,0,1-2.18-.92,11.2,11.2,0,0,1-1.76-1c-2.06-1.46-2.88-2.81-2.66-3s1.49.54,3.55,1.46c.52.22,1.08.47,1.71.67s1.3.4,2,.6A24.26,24.26,0,0,0,133,92.83Z"/><path class="avatar-2-avatar-2-cls-12" d="M104.17,42.92a20.9,20.9,0,0,1,4-4,17.67,17.67,0,0,1,2.09-1.33,12.45,12.45,0,0,1,2-.9c2.48-.93,4.14-.86,4.19-.55s-1.36.94-3.41,2.17a17.51,17.51,0,0,0-1.62,1.08c-.58.38-1.13.88-1.74,1.37a23.08,23.08,0,0,0-6,8.07c-.29.72-.6,1.4-.8,2.06s-.4,1.29-.55,1.87c-.59,2.31-.7,3.86-1.09,3.89s-.86-1.53-.7-4.17a13.28,13.28,0,0,1,.3-2.13,16.39,16.39,0,0,1,.66-2.4A20.41,20.41,0,0,1,104.17,42.92Z"/><path class="avatar-2-avatar-2-cls-12" d="M163.78,45.73a23.94,23.94,0,0,0,1.71-3.89,22.19,22.19,0,0,0,.81-3.4c.32-2,.34-3.32.72-3.38s.95,1.21,1.09,3.46a14.52,14.52,0,0,1-.35,3.94A16.69,16.69,0,0,1,163,50.82a14.36,14.36,0,0,1-3.2,2.32c-2,1-3.43,1.14-3.54.85s1-1.06,2.54-2.35a22.65,22.65,0,0,0,2.5-2.45A23.79,23.79,0,0,0,163.78,45.73Z"/><path class="avatar-2-cls-6" d="M173.73,70.51a21.63,21.63,0,0,0,8.47-4.27c1.93-1.57,3-3,3.68-2.73.32.11.49.65.41,1.55a8.73,8.73,0,0,1-1.32,3.5,16.46,16.46,0,0,1-10,6.9,22.68,22.68,0,0,1-11.76-.33c-2.83-.87-4.37-1.93-4.22-2.6s2-.89,4.71-1A47.09,47.09,0,0,0,173.73,70.51Z"/><path class="avatar-2-cls-6" d="M186.07,51.39c.2-1.77,1.49-3.08,2.89-2.93s2.38,1.72,2.19,3.49-1.49,3.08-2.89,2.92S185.88,53.16,186.07,51.39Z"/><path class="avatar-2-cls-6" d="M183.86,41.8a2.6,2.6,0,0,1,4.14-3,2.61,2.61,0,0,1-4.14,3Z"/><path class="avatar-2-avatar-2-cls-13" d="M330,302c20.28,37,13.83,73.05,14.54,107.47l-11-12.15a118.62,118.62,0,0,1-28.8,57.47,42.38,42.38,0,0,0-13.34-14.7A89.09,89.09,0,0,1,263.9,487a35.8,35.8,0,0,0-1-29.59,56.4,56.4,0,0,1-30.8,34.29,23.17,23.17,0,0,0,2.52-22.37c-11.17,19-43.3,19.54-55.14,1-.82,3.75-.22,8.67,3.61,9-16.11,2.48-30.85-4.3-41.93-16.25a27.05,27.05,0,0,0,9,17.56,49.18,49.18,0,0,1-40.92-27.17c-20.77,1.29-41.53-12.94-47.8-32.79a9.91,9.91,0,0,1-2.59,9.51c-35.89-18.22-34-99.94-10.46-126.89,0,0,49.48,7.94,79.51,30.74,6.43,4.88,14.43-4.6,23.27-7.4,17.51-5.53,38.32-11.15,56.88-11.22,23.39-.1,35.9,29.56,50.89,15.49C298.57,293.65,329.64,301.39,330,302Z"/><path class="avatar-2-avatar-2-cls-14" d="M345.91,405.22l-11-12.16a118.76,118.76,0,0,1-28.81,57.48,42.3,42.3,0,0,0-13.34-14.7,89,89,0,0,1-27.51,46.89,35.83,35.83,0,0,0-1-29.59,56.4,56.4,0,0,1-30.8,34.29A23.2,23.2,0,0,0,236,465.06c-11.17,19-43.3,19.54-55.14,1-.83,3.75.11,17.55,3.94,17.87-16.1,2.48-31.18-13.18-42.26-25.13.64,6.7,2.31,18.78,7.36,23.23-17.16-.88-31.84-17.37-39.3-32.84-20.78,1.29-41.53-12.95-47.8-32.79a9.91,9.91,0,0,1-2.58,9.51c-12.41-6.3-20.59-20-25-36.31,15.87,11.57,34.55,19.51,53,26.63,12.54,4.82,25.24,9.42,38.46,11.83,12.82,2.33,25.92,2.56,39,2.79,36.17.62,73.84.94,106.53-14.59,9.37-4.45,19.26-12.08,18.93-22.46-.37-11.86-13.35-18.63-24.42-22.88,23.58-3.5,42.91-21.78,53.67-43.05a131.59,131.59,0,0,0,9.48-25.3L333,305C342.73,339,345.19,370.81,345.91,405.22Z"/><path class="avatar-2-cls-3" d="M253.41,500.93l7.73-18.34a31,31,0,0,0,2.25-14.75,61,61,0,0,1-28.12,25.32l-15.22,6.65,9.79-13.42a18.51,18.51,0,0,0,3.37-9.49,38.29,38.29,0,0,1-24.46,8.83,39.29,39.29,0,0,1-20.87-5.26c1,5.16.93,9.73-3.16,11.61l-1.89.86-1.88-.86c-13-6-23.27-12.19-31.89-19.33,1.42,5.57,3,7.6,3.8,8.31l9.71,8.53-12.91-.66c-18.37-.93-33.64-18.1-41.8-33.56-17.77,0-34.88-10-44.23-24.92l-.28.28L61,433l-2.87-1.46c-13.73-7-23.61-22.79-27.84-44.54-6.17-31.81.86-70.33,16-87.71a4.5,4.5,0,1,1,6.78,5.92c-13.31,15.26-19.57,51.18-14,80.07,3.26,16.82,10.08,29.4,19.38,36a5.07,5.07,0,0,0-.1-2.09l8.63-2.54c5.62,17.79,24.6,30.81,43.23,29.66l3-.19,1.31,2.72c7.38,15.29,17.47,24.65,26.45,28.73a83.68,83.68,0,0,1-3-16.73l-1.27-13.24,9.05,9.75c8.53,9.2,18.86,16.65,33,23.73-.31-1.46-.69-2.95-1-4-1.25-5-1.93-7.92-1.4-10.33l2.33-10.64,5.86,9.18c4.71,7.38,13.68,11.69,24,11.5s19.08-4.81,23.52-12.35l4.51-7.66,3.51,8.17a27.18,27.18,0,0,1,2,13.86A51.87,51.87,0,0,0,260,453.4l3.32-10.56,5,9.88a40,40,0,0,1,4.21,17.36,84.32,84.32,0,0,0,15.89-33.6l1.43-6.48,5.49,3.72a47,47,0,0,1,11.36,10.93,115.09,115.09,0,0,0,23.84-50.82l1.7-8.88,10,11.05c2-35.79-3.31-65-16.46-91.39a4.5,4.5,0,1,1,8-4C349,331,354.25,364.9,350.39,407.23l-.93,10.24-12.07-13.36a122.34,122.34,0,0,1-27.94,51.07l-4.26,4.65-3-5.53a37.69,37.69,0,0,0-6.81-9,93.54,93.54,0,0,1-27.08,42.37Z"/><path class="avatar-2-cls-2" d="M159.69,399.62a9.74,9.74,0,0,1-9.71-9.71V352.76a9.74,9.74,0,0,1,9.71-9.71h68a9.75,9.75,0,0,1,9.72,9.71v37.15a9.75,9.75,0,0,1-9.72,9.71"/><path class="avatar-2-cls-4" d="M239,356.81v11.52a9.75,9.75,0,0,0-8.91-5.85h-68a9.74,9.74,0,0,0-9.71,9.71v25.63a9.65,9.65,0,0,1-.81-3.87V356.81a9.75,9.75,0,0,1,9.71-9.72h68A9.76,9.76,0,0,1,239,356.81Z"/><path class="avatar-2-cls-3" d="M193.29,341.91c7,0,13.87,0,20.49.1l9.74.12,2.37,0,1.18,0h.33l.43,0,.85.06a14.26,14.26,0,0,1,6.29,2.29,14.06,14.06,0,0,1,6.23,10.73l0,.78v.65l0,1.07c0,.7,0,1.41-.05,2.11,0,1.39-.09,2.77-.13,4.12-.17,5.41-.37,10.45-.59,15s-.45,8.76-.71,12.42c0,.45-.07.9-.1,1.34,0,.22,0,.44-.05.66s-.05.52-.08.78a11.57,11.57,0,0,1-.74,3,11.41,11.41,0,0,1-3,4.24,9.64,9.64,0,0,1-6.23,2.57,4.68,4.68,0,0,1-1.7-.26c-.38-.14-.55-.3-.55-.46s.17-.34.49-.52l1.35-.66a10.23,10.23,0,0,0,3.89-3.22,8.51,8.51,0,0,0,1.34-3.09,8,8,0,0,0,.12-1.84l0-.5c0-.22,0-.44-.05-.66l-.09-1.34c-.26-3.66-.5-7.82-.72-12.42s-.41-9.63-.59-15c0-1.35-.08-2.73-.12-4.12l-.06-2.11,0-1.07v-.43l0-.3a5.41,5.41,0,0,0-4.95-4.71h-.73l-1.18,0-2.37,0-9.74.12c-6.62.06-13.47.1-20.49.1s-13.87,0-20.48-.1l-9.74-.12-2.38,0-1.18,0h-.73a5.42,5.42,0,0,0-4.94,4.71l0,.3,0,.16v.27l0,1.07c0,.7,0,1.41-.05,2.11,0,1.39-.09,2.77-.13,4.12-.17,5.41-.37,10.45-.59,15s-.46,8.76-.71,12.42c0,.45-.07.9-.1,1.34,0,.22,0,.44,0,.66l0,.5a7.43,7.43,0,0,0,.13,1.84,8.18,8.18,0,0,0,1.34,3.09,10.21,10.21,0,0,0,3.88,3.22l1.35.66c.32.18.5.35.5.52s-.18.32-.55.46A4.74,4.74,0,0,1,157,404a9.6,9.6,0,0,1-6.22-2.57,11.32,11.32,0,0,1-3-4.24,12,12,0,0,1-.74-3c0-.26-.06-.57-.08-.78s0-.44-.05-.66l-.09-1.34c-.26-3.66-.5-7.82-.72-12.42s-.41-9.63-.59-15c0-1.35-.08-2.73-.12-4.12l-.06-2.11,0-1.07v-.65l0-.78a14.08,14.08,0,0,1,6.22-10.73,14.31,14.31,0,0,1,6.29-2.29l.86-.06.43,0h.32l1.18,0,2.38,0,9.74-.12C179.42,342,186.28,341.91,193.29,341.91Z"/><path class="avatar-2-cls-3" d="M60.39,322a37.09,37.09,0,0,0,.47,9,37.78,37.78,0,0,0,2.92,8.91,39.35,39.35,0,0,1-5.49-8A40.74,40.74,0,0,1,55,322.37a44.5,44.5,0,0,1-1-10.27,49.21,49.21,0,0,1,.4-5.25,33.42,33.42,0,0,1,1.13-5.44l10,4.36a23.19,23.19,0,0,0-1.89,3.53,41.21,41.21,0,0,0-1.54,4A38.35,38.35,0,0,0,60.39,322Z"/><path class="avatar-2-cls-3" d="M75.3,330.15c.78,7.09,3.93,14.18,8.49,20.33A45.39,45.39,0,0,1,70,331.43,37.16,37.16,0,0,1,67.79,319,33.53,33.53,0,0,1,70.32,306l9.59,5.16C76.2,316,74.51,323.12,75.3,330.15Z"/><path class="avatar-2-cls-3" d="M102.41,335.48A49,49,0,0,0,109,355a51.46,51.46,0,0,1-11.83-18.14,54.08,54.08,0,0,1-3.61-22.51l10.73,1.85A45.78,45.78,0,0,0,102.41,335.48Z"/><path class="avatar-2-cls-3" d="M279.1,331.6a25.9,25.9,0,0,1-.28,8.41c-.49,2.14-1.22,3.39-1.88,3.33-1.37-.13-2-5.16-2.7-11.16s-1.3-11,0-11.49c.63-.2,1.64.84,2.61,2.8A25.74,25.74,0,0,1,279.1,331.6Z"/><path class="avatar-2-cls-3" d="M300.7,325.92a34.06,34.06,0,0,1-2.28,11.66c-1.17,2.83-2.4,4.35-3,4.13-1.32-.5.23-7.41.4-15.92s-.91-15.49.43-15.91c.62-.19,1.77,1.39,2.79,4.28A34.18,34.18,0,0,1,300.7,325.92Z"/><path class="avatar-2-cls-3" d="M323.44,322.4a51.55,51.55,0,0,1,.48,8.84,42.08,42.08,0,0,1-.84,7.17c-.86,4-2,6.32-2.66,6.19-1.41-.31-.09-10-1.83-21.5s-5.47-20.53-4.18-21.19c.58-.3,2.31,1.61,4.22,5.24a44.14,44.14,0,0,1,2.79,6.64A53.12,53.12,0,0,1,323.44,322.4Z"/><path class="avatar-2-cls-3" d="M68.8,420.47a39.61,39.61,0,0,1-.25-8.28,35.94,35.94,0,0,1,.5-3.58,25.93,25.93,0,0,1,.76-3c1.14-3.68,2.57-5.64,3.16-5.43s.45,2.52.24,6.05c0,.89-.12,1.85-.12,2.88s0,2.13,0,3.28a59.18,59.18,0,0,0,2.11,14.73c.33,1.1.6,2.17.94,3.14s.63,1.89.92,2.73c1.2,3.32,2,5.46,1.47,5.87s-2.43-1.11-4.56-4.32a23.37,23.37,0,0,1-1.57-2.71,33.94,33.94,0,0,1-1.49-3.3A40.12,40.12,0,0,1,68.8,420.47Z"/><path class="avatar-2-cls-3" d="M99.55,433.75a50.42,50.42,0,0,1-.07-13.35c.45-3.36,1.12-5.4,1.79-5.39s1.24,2.09,1.67,5.4.77,7.81,1.45,12.64c.35,2.41.78,4.67,1.25,6.7.27,1,.47,2,.76,2.85l.38,1.3c.14.41.27.8.39,1.18,1,3,1.81,4.94,1.24,5.37s-2.36-.88-4.34-3.84c-.24-.37-.49-.77-.74-1.18s-.46-.87-.7-1.33a28,28,0,0,1-1.31-3.05A39.4,39.4,0,0,1,99.55,433.75Z"/><path class="avatar-2-cls-3" d="M136.2,440.16c-4-14.35-4.59-26.51-3.28-26.67s4.05,11.36,8,25.35,7.6,25.27,6.32,25.82S140.2,454.53,136.2,440.16Z"/><path class="avatar-2-cls-3" d="M244.41,451.81c1.82-6.05,3.09-11.74,4.22-15.84s2.08-6.65,2.75-6.55.91,2.79.66,7.11a75.23,75.23,0,0,1-2.94,16.7,56.28,56.28,0,0,1-3.52,8.82c-.71,1.29-1.35,2.52-2.1,3.61-.37.54-.71,1.07-1.06,1.56l-1.08,1.38c-2.84,3.46-5.24,4.92-5.69,4.49s.9-2.74,2.8-6.4c.24-.45.48-.93.74-1.43l.74-1.58c.54-1.08,1-2.29,1.55-3.52C242.49,457.64,243.49,454.83,244.41,451.81Z"/><path class="avatar-2-cls-3" d="M273,440.9c1.29-7.37,2-14.28,2.87-19.27s1.74-8,2.41-8,1,3.21,1,8.27a116.76,116.76,0,0,1-1.5,19.83,57.15,57.15,0,0,1-2.95,10.79,40,40,0,0,1-4.24,8.17c-3,4.36-5.79,6.2-6.23,5.76s1.21-3.06,3.23-7.47a65,65,0,0,0,3-7.94A85.72,85.72,0,0,0,273,440.9Z"/><path class="avatar-2-cls-3" d="M301.86,422.49c1.43-6,2.41-11.53,3.33-15.56s1.76-6.53,2.43-6.46,1,2.67,1,6.86a74.69,74.69,0,0,1-2,16.31,56.91,56.91,0,0,1-2.88,8.73c-.61,1.29-1.15,2.53-1.8,3.62-.31.55-.6,1.09-.91,1.59l-.95,1.41c-2.48,3.54-4.67,5.16-5.16,4.77s.59-2.76,2.14-6.45l.6-1.45q.3-.76.6-1.59c.45-1.08.82-2.28,1.26-3.51C300.32,428.25,301.13,425.46,301.86,422.49Z"/><path class="avatar-2-cls-3" d="M311.64,413.48c1.55-3.78,2.81-7.46,3.86-10.85.48-1.71,1-3.33,1.35-4.87s.75-3,1.06-4.28c1.21-5.28,1.85-8.64,2.57-8.62s1.22,3.49.85,9.12c-.1,1.41-.23,2.95-.5,4.59s-.58,3.38-1,5.21a72.61,72.61,0,0,1-9.28,22.38c-1,1.56-2,3-3,4.36s-2,2.53-2.89,3.59c-3.73,4.24-6.6,6.27-7.06,5.84s1.41-3.32,4.28-7.9c.72-1.15,1.51-2.4,2.29-3.78s1.62-2.84,2.49-4.39C308.34,420.75,310.06,417.25,311.64,413.48Z"/><path class="avatar-2-cls-6" d="M42.94,339.6c.72-3.5,2.66-5.94,4-5.52s1.67,3.31,1,6.55-2.1,5.77-3.51,5.62S42.22,343.1,42.94,339.6Z"/><path class="avatar-2-cls-6" d="M44.16,377.44a49.43,49.43,0,0,1-1.78-14.27c.14-3.7.8-5.95,1.48-6,1.47,0,2.43,8.7,5.23,18.9s6.3,18.17,5,18.93c-.59.34-2.31-1.26-4.31-4.37A48.78,48.78,0,0,1,44.16,377.44Z"/><path class="avatar-2-cls-3" d="M128.52,338.8H128c-5-.18-8.88-3.13-12-5.51l-.19-.14a150.17,150.17,0,0,0-65.16-28.23A4.5,4.5,0,0,1,52.19,296,159.48,159.48,0,0,1,121.27,326l.19.15c2.35,1.77,4.77,3.61,6.9,3.69s4.58-1.53,7.15-3.22l.75-.49c14.75-9.64,33.89-14.95,53.9-14.95h0c20,0,39.15,5.31,53.9,14.95l.74.48c2.58,1.7,5,3.3,7.15,3.23s4.56-1.92,6.9-3.69l.19-.15A159.59,159.59,0,0,1,328.13,296a4.5,4.5,0,0,1,1.52,8.88,150.17,150.17,0,0,0-65.16,28.23l-.19.14c-3.13,2.38-7,5.33-12,5.51s-9.12-2.53-12.42-4.7l-.71-.47c-27.47-17.94-70.5-17.94-98,0l-.72.47C137.27,336.2,133.32,338.8,128.52,338.8Z"/><path class="avatar-2-cls-3" d="M210.09,385.31h-36a3.5,3.5,0,1,1,0-7h36a3.5,3.5,0,0,1,0,7Z"/><circle class="avatar-2-avatar-2-cls-14" cx="256.32" cy="340.31" r="34.5"/><circle class="avatar-2-cls-6" cx="246.03" cy="330.35" r="40.04"/><circle class="avatar-2-avatar-2-cls-11" cx="250.78" cy="312.53" r="5.28"/><polygon class="avatar-2-cls-3" points="141.26 29.28 141.29 32.05 143.66 29.92 136.97 31.05 135.54 31.29 135.53 32.32 135.48 42.88 138.47 32.75 137.05 34.01 143.79 34.79 145.49 34.99 146.13 32.68 146.93 29.79 152.37 10.18 143.58 3.72 141.26 29.28"/><polygon class="avatar-2-cls-3" points="131.05 92.41 129.84 89.02 133.69 90.55 125.03 92.19 123.17 92.54 122.7 91.28 117.89 78.43 126.08 89.43 123.78 88.53 131.65 84.56 133.64 83.55 135.46 86.07 137.73 89.24 153.18 110.69 145.37 122.52 131.05 92.41"/><circle class="avatar-2-cls-3" cx="123.96" cy="232.98" r="22.91"/><circle class="avatar-2-cls-2" cx="134.18" cy="215.95" r="12.7"/><circle class="avatar-2-cls-6" cx="114.77" cy="241.53" r="5.28"/><circle class="avatar-2-cls-3" cx="242.84" cy="330.2" r="15.77"/><circle class="avatar-2-cls-6" cx="255.89" cy="340.77" r="10.18"/></g></g></svg>
diff --git a/admin-ui/vue/packages/icons/src/svg/icons/avatar-3.svg b/admin-ui/vue/packages/icons/src/svg/icons/avatar-3.svg
new file mode 100644
index 0000000..ca79178
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/icons/avatar-3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 391.79 532.35"><defs><style>.avatar-3-cls-1{fill:#f9cdb7;}.avatar-3-cls-2{fill:#e2a78d;}.avatar-3-cls-3{fill:#213346;}.avatar-3-cls-4{fill:#bfe1ee;}.avatar-3-cls-5{fill:#dfe7ea;}.avatar-3-cls-6{fill:#e99a4f;}.avatar-3-cls-7{fill:#ce7149;}.avatar-3-cls-8,.avatar-3-cls-9{fill:#fff;}.avatar-3-cls-9{opacity:0.5;}</style></defs><title>Asset 17</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="avatar-3-cls-1" cx="345.9" cy="275.59" r="41.4"/><path class="avatar-3-cls-2" d="M333.5,312.37a41.4,41.4,0,1,0,0-79.56,41.41,41.41,0,0,1,0,79.56Z"/><circle class="avatar-3-cls-1" cx="45.9" cy="275.59" r="41.4"/><path class="avatar-3-cls-2" d="M55.4,314.37a41.4,41.4,0,1,1,0-79.56,41.41,41.41,0,0,0,0,79.56Z"/><path class="avatar-3-cls-3" d="M45.9,320.06a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,45.9,320.06Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,45.9,237.27Z"/><path class="avatar-3-cls-3" d="M21.27,281a3.1,3.1,0,0,1-.43,0,3.51,3.51,0,0,1-3.05-3.9c1.77-14.41,7.92-21.55,12.76-25a21.46,21.46,0,0,1,10.88-4.14,3.5,3.5,0,0,1,.28,7c-.65,0-14.28,1.11-17,23A3.5,3.5,0,0,1,21.27,281Z"/><path class="avatar-3-cls-3" d="M33.65,288.21a3.88,3.88,0,0,1-.82-.09,3.5,3.5,0,0,1-2.59-4.22,32.88,32.88,0,0,0,1-11.59,14.61,14.61,0,0,0-4.4-9.21,3.5,3.5,0,1,1,4.65-5.23,21.52,21.52,0,0,1,6.69,13.58,39.36,39.36,0,0,1-1.16,14.07A3.5,3.5,0,0,1,33.65,288.21Z"/><path class="avatar-3-cls-3" d="M345.9,320.06a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,345.9,320.06Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,345.9,237.27Z"/><path class="avatar-3-cls-3" d="M370.52,281a3.5,3.5,0,0,1-3.47-3.07c-2.69-21.94-16.39-23-17-23a3.52,3.52,0,0,1-3.32-3.66,3.47,3.47,0,0,1,3.6-3.34,21.46,21.46,0,0,1,10.88,4.14c4.85,3.45,11,10.59,12.76,25A3.5,3.5,0,0,1,371,281,3,3,0,0,1,370.52,281Z"/><path class="avatar-3-cls-3" d="M358.15,288.21a3.49,3.49,0,0,1-3.4-2.69,39.2,39.2,0,0,1-1.17-14.08,21.56,21.56,0,0,1,6.69-13.57,3.5,3.5,0,1,1,4.66,5.23,14.56,14.56,0,0,0-4.4,9.21,32.42,32.42,0,0,0,1,11.59,3.52,3.52,0,0,1-2.6,4.22A3.72,3.72,0,0,1,358.15,288.21Z"/><path class="avatar-3-cls-1" d="M196.57,61h2.79a146.1,146.1,0,0,1,146.1,146.1v95A147.5,147.5,0,0,1,198,449.67h0a147.5,147.5,0,0,1-147.5-147.5v-95A146.1,146.1,0,0,1,196.57,61Z"/><path class="avatar-3-cls-2" d="M216.7,446.7a147.74,147.74,0,0,1-20.29,1.41c-81.14,0-147.5-66.37-147.5-147.5v-97c0-79.3,64.87-144.18,144.17-144.18h6.65a142.14,142.14,0,0,1,17,1C152.26,68.11,96.42,126.84,86.17,192.3a509.6,509.6,0,0,1-13.33,61.87L59.49,300.61C59.49,374.86,145.07,436.74,216.7,446.7Z"/><path class="avatar-3-cls-3" d="M196.41,454.17a152.43,152.43,0,0,1-152-152V207.12A151,151,0,0,1,195,56.52h2.79a151,151,0,0,1,150.61,150.6v95.05a152.45,152.45,0,0,1-152,152ZM195,65.52a142,142,0,0,0-141.6,141.6v95.05a143.43,143.43,0,0,0,143,143h0a143.43,143.43,0,0,0,143-143V207.12A142,142,0,0,0,197.8,65.52Z"/><path class="avatar-3-cls-4" d="M330.44,277.5v.2C329.89,277.72,330.11,277.59,330.44,277.5Z"/><ellipse class="avatar-3-cls-5" cx="189.64" cy="471.35" rx="179.73" ry="52.86"/><path class="avatar-3-cls-6" d="M340.74,325.56c21.15,38.59,14.42,76.21,15.16,112.11L344.45,425A123.67,123.67,0,0,1,314.4,485a44.13,44.13,0,0,0-13.92-15.33,92.89,92.89,0,0,1-28.69,48.92,37.34,37.34,0,0,0-1.06-30.87,58.87,58.87,0,0,1-32.13,35.77,24.22,24.22,0,0,0,2.63-23.34c-11.66,19.79-45.18,20.39-57.53,1-.86,3.91-.23,9.05,3.76,9.38-16.8,2.59-32.18-4.49-43.74-16.95a28.25,28.25,0,0,0,9.37,18.32,51.33,51.33,0,0,1-42.69-28.35c-21.68,1.35-43.33-13.5-49.87-34.21a10.36,10.36,0,0,1-2.7,9.92C20.38,440.24,22.38,355,46.91,326.87c0,0,51.63,8.28,83,32.07,20,15.18,54.48-19.31,83.62-19.43,24.41-.11,37.46,30.85,53.1,16.16C308,316.82,340.38,324.9,340.74,325.56Z"/><path class="avatar-3-cls-7" d="M357.35,433.22,345.9,420.54a123.83,123.83,0,0,1-30,60,44.26,44.26,0,0,0-13.92-15.34,92.85,92.85,0,0,1-28.69,48.92,37.38,37.38,0,0,0-1.06-30.87A58.84,58.84,0,0,1,240.05,519a24.22,24.22,0,0,0,2.63-23.33c-11.66,19.79-45.18,20.39-57.53,1-.87,3.92.11,18.31,4.11,18.65-16.8,2.58-32.53-13.75-44.09-26.22.67,7,2.41,19.59,7.68,24.23-17.9-.91-33.22-18.12-41-34.26-21.68,1.35-43.33-13.5-49.87-34.21a10.38,10.38,0,0,1-2.7,9.93C46.34,448.23,37.8,434,33.19,416.91,49.75,429,69.24,437.27,88.51,444.7c13.08,5,26.33,9.83,40.12,12.34,13.38,2.43,27.05,2.67,40.65,2.91,37.73.65,77,1,111.14-15.22,9.78-4.65,20.09-12.6,19.75-23.43-.39-12.38-13.93-19.44-25.48-23.87,24.6-3.65,44.78-22.73,56-44.92a136.88,136.88,0,0,0,9.89-26.39l3.31,2.58C354,364.15,356.61,397.32,357.35,433.22Z"/><path class="avatar-3-cls-6" d="M180.3,341l-49.84,18.58-82-37.21a62.33,62.33,0,0,0-12.09,21.43A237,237,0,0,1,86,361.31a244.47,244.47,0,0,1,22.74,12.33c4,2.46,12.45,10.51,17.42,9.89a10.29,10.29,0,0,0,4.12-1.85c45.61-29.33,79.08-30.62,132.55-21.06L237.74,346Z"/><path class="avatar-3-cls-3" d="M261.36,532.35,269.09,514a32.54,32.54,0,0,0,2.3-16.08,63.44,63.44,0,0,1-29.54,26.86l-15.22,6.65L236.41,518A19.55,19.55,0,0,0,240,507.55c-6.64,5.87-15.71,9.29-25.74,9.47a40.79,40.79,0,0,1-22.06-5.69c1.1,5.49,1.16,10.38-3.1,12.33l-1.88.87-1.88-.87c-13.79-6.36-24.61-12.91-33.69-20.51,1.53,6.3,3.28,8.56,4.17,9.34l9.71,8.53-12.91-.66c-19.13-1-35-18.9-43.5-35h-.06c-18.58,0-36.48-10.43-46.17-26.13l-.47.48L60.12,462l-2.88-1.46C43,453.25,32.7,436.8,28.31,414.16,21.88,381,29.19,340.91,45,322.83a4.5,4.5,0,1,1,6.78,5.92c-14.15,16.22-20.57,53-14.61,83.7,3.45,17.74,10.68,31,20.55,37.85a5.39,5.39,0,0,0-.06-2.56l8.64-2.54c5.89,18.64,25.8,32.28,45.3,31.07l3-.19,1.32,2.73C123.72,495,134.47,504.86,144,509a85.81,85.81,0,0,1-3.29-17.82L139.42,478l9.05,9.75c9,9.69,19.89,17.53,34.83,25-.35-1.64-.78-3.38-1.09-4.62-1.3-5.17-2-8.22-1.46-10.69l2.33-10.64,5.86,9.18c4.95,7.76,14.36,12.28,25.15,12.09s20-5,24.71-13l4.51-7.66,3.5,8.17a28.27,28.27,0,0,1,2,14.82,54.35,54.35,0,0,0,19.11-26.83L271.21,473l5,9.89a41.62,41.62,0,0,1,4.38,18.57,88.11,88.11,0,0,0,16.95-35.57l1.43-6.48,5.49,3.73a48.76,48.76,0,0,1,11.95,11.55,120.21,120.21,0,0,0,25.08-53.29l1.69-8.89,10.47,11.59c2.16-37.59-3.37-68.28-17.17-95.91a4.5,4.5,0,1,1,8-4c15.83,31.7,21.33,67,17.31,111.15l-.93,10.24-12.53-13.87a127.51,127.51,0,0,1-29.2,53.55l-4.26,4.65-3-5.54a39.94,39.94,0,0,0-7.38-9.62,97.41,97.41,0,0,1-28.29,44.41Z"/><path class="avatar-3-cls-1" d="M163.08,427.38a10.16,10.16,0,0,1-10.14-10.13V378.49a10.17,10.17,0,0,1,10.14-10.14H234a10.17,10.17,0,0,1,10.13,10.14v38.76A10.16,10.16,0,0,1,234,427.38"/><path class="avatar-3-cls-2" d="M245.85,382.71v12a10.15,10.15,0,0,0-9.29-6.1H165.61a10.16,10.16,0,0,0-10.14,10.13V425.5a10.1,10.1,0,0,1-.84-4V382.71a10.16,10.16,0,0,1,10.13-10.13h71A10.16,10.16,0,0,1,245.85,382.71Z"/><path class="avatar-3-cls-3" d="M198.13,367.18c7.32,0,14.47,0,21.37.1l10.16.12,2.48,0,1.23,0h.34l.45,0,.89.06a14.83,14.83,0,0,1,6.56,2.4,14.65,14.65,0,0,1,6.5,11.19l0,.81v.68l0,1.11L248,386c0,1.45-.08,2.89-.13,4.3-.18,5.64-.38,10.9-.61,15.69s-.48,9.14-.75,12.95c0,.48-.06.95-.1,1.41,0,.23,0,.46,0,.68s-.05.55-.08.81a12.57,12.57,0,0,1-.77,3.1,12,12,0,0,1-3.1,4.42A10.12,10.12,0,0,1,236,432a4.84,4.84,0,0,1-1.78-.27c-.39-.15-.58-.31-.58-.49s.19-.35.52-.54l1.41-.68a10.84,10.84,0,0,0,4.06-3.37,8.74,8.74,0,0,0,1.39-3.21,8.13,8.13,0,0,0,.13-1.92l0-.53c0-.22,0-.45-.05-.68,0-.46-.07-.93-.1-1.41-.27-3.81-.52-8.15-.74-12.95s-.44-10.05-.62-15.69c0-1.41-.09-2.85-.13-4.3l-.06-2.21,0-1.11v-.28l0-.16,0-.32a5.7,5.7,0,0,0-2.72-4.14,5.59,5.59,0,0,0-2.44-.77h-.76l-1.23,0-2.48,0-10.16.12c-6.9.07-14.05.11-21.37.11s-14.47,0-21.37-.11L166.59,377l-2.47,0-1.23,0h-.76a5.59,5.59,0,0,0-2.44.77,5.7,5.7,0,0,0-2.72,4.14l0,.32,0,.16v.28l0,1.11-.06,2.21c0,1.45-.09,2.89-.13,4.3-.18,5.64-.39,10.9-.62,15.69s-.47,9.14-.74,12.95c0,.48-.07.95-.1,1.41,0,.23,0,.46,0,.68l0,.53a8.13,8.13,0,0,0,.13,1.92,8.58,8.58,0,0,0,1.39,3.21,10.69,10.69,0,0,0,4.06,3.37l1.4.68c.34.19.52.37.52.54s-.18.34-.57.49a4.84,4.84,0,0,1-1.78.27,10.14,10.14,0,0,1-6.5-2.68,12,12,0,0,1-3.09-4.42,12.57,12.57,0,0,1-.77-3.1c0-.26-.07-.59-.08-.81l-.06-.68c0-.46-.06-.93-.1-1.41-.26-3.81-.51-8.15-.74-12.95s-.43-10.05-.61-15.69c0-1.41-.09-2.85-.13-4.3,0-.73-.05-1.47-.07-2.21l0-1.11V382l0-.81a14.74,14.74,0,0,1,13.06-13.59l.89-.06.45,0h.34l1.23,0,2.47,0,10.17-.12C183.66,367.21,190.81,367.18,198.13,367.18Z"/><path class="avatar-3-cls-3" d="M59.48,346.35a37.83,37.83,0,0,0,.49,9.41,39.45,39.45,0,0,0,3,9.29,40.75,40.75,0,0,1-5.73-8.37,42.54,42.54,0,0,1-3.46-9.9,46.05,46.05,0,0,1-1-10.71,50.92,50.92,0,0,1,.42-5.48,35.69,35.69,0,0,1,1.17-5.68l10.41,4.56a24.7,24.7,0,0,0-2,3.68,43.89,43.89,0,0,0-1.6,4.2A39.74,39.74,0,0,0,59.48,346.35Z"/><path class="avatar-3-cls-3" d="M75,354.9c.81,7.4,4.1,14.8,8.86,21.21a47.35,47.35,0,0,1-14.38-19.87,38.82,38.82,0,0,1-2.31-12.95,35.09,35.09,0,0,1,2.63-13.62l10,5.38C76,340.17,74.21,347.57,75,354.9Z"/><path class="avatar-3-cls-3" d="M103.32,360.47a51,51,0,0,0,6.84,20.32,54,54,0,0,1-12.35-18.93A56.65,56.65,0,0,1,94,338.38l11.2,1.92A47.79,47.79,0,0,0,103.32,360.47Z"/><path class="avatar-3-cls-3" d="M287.66,356.41a26.93,26.93,0,0,1-.31,8.78c-.5,2.23-1.26,3.53-2,3.48-1.43-.15-2-5.39-2.82-11.65s-1.36-11.51,0-12c.66-.22,1.71.87,2.72,2.91A27,27,0,0,1,287.66,356.41Z"/><path class="avatar-3-cls-3" d="M310.19,350.49a35.36,35.36,0,0,1-2.39,12.16c-1.21,3-2.49,4.54-3.14,4.31-1.37-.52.25-7.73.42-16.61s-.95-16.16.45-16.6c.65-.19,1.85,1.45,2.91,4.47A35.62,35.62,0,0,1,310.19,350.49Z"/><path class="avatar-3-cls-3" d="M333.91,346.82a53,53,0,0,1,.5,9.22,44.45,44.45,0,0,1-.88,7.48c-.89,4.19-2.12,6.59-2.77,6.45-1.47-.31-.09-10.37-1.91-22.42s-5.7-21.42-4.36-22.11c.6-.31,2.41,1.68,4.41,5.46a46.7,46.7,0,0,1,2.91,6.93A56.29,56.29,0,0,1,333.91,346.82Z"/><path class="avatar-3-cls-3" d="M68.25,449.13a41,41,0,0,1-.26-8.64,36.07,36.07,0,0,1,.52-3.73,28.41,28.41,0,0,1,.79-3.18c1.19-3.83,2.68-5.88,3.3-5.66s.47,2.63.25,6.32c0,.92-.12,1.92-.13,3s0,2.22,0,3.41a68.87,68.87,0,0,0,.61,7.76A75.5,75.5,0,0,0,74.89,456c.34,1.15.63,2.26,1,3.27s.66,2,1,2.85c1.24,3.47,2.14,5.7,1.53,6.13s-2.54-1.16-4.76-4.51A26.15,26.15,0,0,1,72,460.94a35.74,35.74,0,0,1-1.55-3.44A41.24,41.24,0,0,1,68.25,449.13Z"/><path class="avatar-3-cls-3" d="M100.32,463a52.94,52.94,0,0,1-.06-13.92c.47-3.51,1.17-5.64,1.87-5.63s1.28,2.19,1.74,5.63.8,8.16,1.51,13.2c.37,2.51.82,4.86,1.3,7,.29,1,.5,2.06.8,3q.19.7.39,1.35l.41,1.23c1,3.14,1.89,5.16,1.29,5.61s-2.46-.92-4.52-4l-.78-1.23c-.25-.43-.48-.9-.73-1.39a31.63,31.63,0,0,1-1.37-3.18A41.46,41.46,0,0,1,100.32,463Z"/><path class="avatar-3-cls-3" d="M138.57,469.67c-4.22-15-4.79-27.65-3.43-27.82s4.23,11.85,8.35,26.45,7.93,26.36,6.6,26.93S142.74,484.66,138.57,469.67Z"/><path class="avatar-3-cls-3" d="M251.46,481.82c1.89-6.31,3.22-12.24,4.4-16.52s2.17-6.94,2.88-6.83.94,2.91.68,7.41a78.07,78.07,0,0,1-3.07,17.43,59.38,59.38,0,0,1-3.67,9.2,42.39,42.39,0,0,1-2.2,3.76c-.37.57-.73,1.13-1.1,1.64l-1.13,1.43c-3,3.61-5.46,5.14-5.93,4.69s.94-2.87,2.92-6.68c.25-.47.5-1,.77-1.49l.78-1.65c.56-1.12,1-2.39,1.62-3.67C249.45,487.91,250.5,485,251.46,481.82Z"/><path class="avatar-3-cls-3" d="M281.25,470.44c1.34-7.68,2-14.9,3-20.1s1.81-8.37,2.51-8.31,1.07,3.35,1.08,8.62a122.32,122.32,0,0,1-1.55,20.69,60.77,60.77,0,0,1-3.08,11.26,42.45,42.45,0,0,1-4.42,8.53c-3.14,4.54-6,6.46-6.51,6s1.27-3.2,3.37-7.8a68.21,68.21,0,0,0,3.11-8.29A89.28,89.28,0,0,0,281.25,470.44Z"/><path class="avatar-3-cls-3" d="M311.39,451.23c1.49-6.22,2.52-12,3.48-16.23s1.83-6.81,2.54-6.73,1.08,2.78,1,7.15a78.88,78.88,0,0,1-2.11,17,58.26,58.26,0,0,1-3,9.11c-.63,1.35-1.19,2.63-1.87,3.78-.33.57-.63,1.13-1,1.65l-1,1.47c-2.59,3.69-4.87,5.39-5.38,5s.61-2.87,2.22-6.72c.2-.48.42-1,.64-1.51s.41-1.08.62-1.66c.47-1.12.85-2.38,1.32-3.67C309.79,457.25,310.63,454.34,311.39,451.23Z"/><path class="avatar-3-cls-3" d="M321.6,441.84c1.61-3.95,2.93-7.79,4-11.33.5-1.78,1-3.46,1.41-5.07s.78-3.1,1.1-4.47c1.26-5.5,1.93-9,2.68-9s1.27,3.64.89,9.52c-.1,1.46-.24,3.07-.52,4.78s-.61,3.53-1,5.44a76,76,0,0,1-9.69,23.34c-1.07,1.63-2.07,3.19-3.13,4.56s-2.05,2.64-3,3.74c-3.89,4.43-6.89,6.55-7.37,6.09s1.47-3.46,4.47-8.24c.75-1.2,1.57-2.5,2.39-3.94s1.69-3,2.6-4.58C318.16,449.42,320,445.77,321.6,441.84Z"/><path class="avatar-3-cls-8" d="M41.38,364.78c.75-3.65,2.73-6.2,4.07-5.78s1.62,3.43.93,6.81-2.14,6-3.55,5.89S40.63,368.42,41.38,364.78Z"/><path class="avatar-3-cls-8" d="M42.64,404.21a53,53,0,0,1-1.88-14.87c.13-3.85.79-6.2,1.47-6.2,1.47,0,2.42,9.08,5.35,19.74s6.63,19,5.37,19.72c-.59.34-2.36-1.34-4.42-4.6A51.58,51.58,0,0,1,42.64,404.21Z"/><path class="avatar-3-cls-3" d="M130.55,363.73h-.49c-5.14-.18-9.18-3.24-12.42-5.71l-.2-.15a157,157,0,0,0-68.07-29.49,4.5,4.5,0,0,1,1.52-8.87,166.07,166.07,0,0,1,72,31.19l.2.15c2.46,1.87,5,3.8,7.3,3.89s4.87-1.61,7.58-3.4l.77-.5c15.36-10,35.29-15.56,56.13-15.56h0c20.83,0,40.77,5.52,56.13,15.56l.77.5c2.71,1.79,5.25,3.48,7.58,3.4s4.84-2,7.3-3.89l.2-.15a166.07,166.07,0,0,1,72-31.19,4.5,4.5,0,0,1,1.52,8.87,157,157,0,0,0-68.07,29.49l-.2.15c-3.24,2.46-7.28,5.53-12.42,5.71s-9.43-2.62-12.85-4.87l-.74-.49c-28.72-18.76-73.71-18.76-102.43,0l-.74.49C139.6,361,135.5,363.73,130.55,363.73Z"/><path class="avatar-3-cls-3" d="M195.39,318.4a3.5,3.5,0,0,1-3.5-3.5V268.31a3.5,3.5,0,0,1,7,0V314.9A3.5,3.5,0,0,1,195.39,318.4Z"/><path class="avatar-3-cls-2" d="M209.25,194.71c-1.68,7.42-1.08,17.32,4.13,23.31,6.07,7,15.65,5.56,23.92,5.22a103.26,103.26,0,0,1,30,3.06c8,2,15.14,6.95,23.27,8.36,8.91,1.55,11-3.19,5.06-9.72-6.94-7.66-17-15.81-26.44-20.25a118.77,118.77,0,0,0-59.61-10.31"/><path class="avatar-3-cls-6" d="M210.19,183.79c-1.68,7.41-1.09,17.31,4.12,23.3,6.07,7,15.65,5.57,23.92,5.22a103.23,103.23,0,0,1,30,3.07c8,2.05,15.15,6.94,23.27,8.36,8.91,1.55,11-3.2,5.07-9.73-6.95-7.65-17-15.81-26.45-20.24a118.64,118.64,0,0,0-59.6-10.32"/><path class="avatar-3-cls-3" d="M294.6,227.53a21.4,21.4,0,0,1-3.68-.35c-4.88-.84-9.33-2.79-13.63-4.67a65.63,65.63,0,0,0-9.91-3.74,99.68,99.68,0,0,0-29-3c-.89,0-1.79.08-2.69.13-7.79.43-17.48,1-24-6.55-6.37-7.32-6.62-18.78-4.9-26.37a3.52,3.52,0,0,1,1.16-1.91,3.48,3.48,0,0,1,2.26-1.14,122,122,0,0,1,61.44,10.63c9.08,4.27,19.64,12.34,27.55,21.06,5.45,6,4.5,10.13,3.44,12.05C301.77,225.25,299.66,227.53,294.6,227.53Zm-51.81-18.82A105.61,105.61,0,0,1,269.13,212a72.87,72.87,0,0,1,11,4.1c4.1,1.8,8,3.49,12,4.2a8.67,8.67,0,0,0,4.3,0c-.08-.54-.6-1.9-2.43-3.91-7.32-8.08-17-15.53-25.34-19.44a115.35,115.35,0,0,0-55.46-10.2c-.91,6.15-.12,13.61,3.76,18.07,4.29,4.93,11.12,4.55,18.35,4.15l2.78-.14C239.66,208.75,241.23,208.71,242.79,208.71Z"/><path class="avatar-3-cls-2" d="M183.07,186.43c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.65,5.56-23.92,5.21A103.64,103.64,0,0,0,125,218c-8,2-15.14,6.95-23.27,8.36-8.9,1.55-11-3.2-5.06-9.72,7-7.66,17-15.82,26.45-20.25,17.56-8.26,39.91-12.29,59.6-10.31"/><path class="avatar-3-cls-6" d="M178.31,175.81c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.66,5.56-23.93,5.21a103.27,103.27,0,0,0-30,3.07c-8,2-15.14,6.95-23.27,8.36-8.91,1.55-11-3.2-5.06-9.72,6.94-7.66,17-15.82,26.45-20.25,17.56-8.26,39.9-12.29,59.6-10.32"/><path class="avatar-3-cls-3" d="M93.9,219.55c-5.06,0-7.17-2.27-8-3.82-1.05-1.92-2-6,3.44-12,7.91-8.72,18.47-16.8,27.56-21.07A122.07,122.07,0,0,1,178.31,172a3.5,3.5,0,0,1,2.25,1.14,3.44,3.44,0,0,1,1.16,1.91c1.72,7.59,1.47,19.05-4.89,26.37-6.54,7.52-16.23,7-24,6.56l-2.69-.14a99.71,99.71,0,0,0-29,3,66,66,0,0,0-9.91,3.74c-4.3,1.88-8.75,3.83-13.63,4.68A21.29,21.29,0,0,1,93.9,219.55Zm-1.83-7.24a8.88,8.88,0,0,0,4.3,0c4-.7,7.93-2.4,12-4.19a72.1,72.1,0,0,1,11-4.11,106.66,106.66,0,0,1,31-3.17c.91,0,1.84.09,2.78.14,7.23.4,14.06.77,18.36-4.16,3.87-4.46,4.66-11.92,3.75-18.07A115.18,115.18,0,0,0,119.85,189c-8.31,3.9-18,11.35-25.35,19.43C92.67,210.41,92.15,211.77,92.07,212.31Z"/><path class="avatar-3-cls-7" d="M340.46,243.84c-6-46.08-35.17-92.93-58.18-123.34l-7-5.27,60-2.06C346.81,155.27,349.82,201.11,340.46,243.84Z"/><path class="avatar-3-cls-8" d="M249.46,120.86a38.06,38.06,0,0,1,6.86,3.6,29.12,29.12,0,0,1,4.87,4c2.51,2.63,3.45,4.8,2.77,5.58s-2.86.14-5.88-1.15c-1.51-.65-3.27-1.42-5.19-2.28s-4-1.75-6.26-2.65-4.4-1.67-6.37-2.4-3.8-1.34-5.34-1.9c-3.08-1.15-5.09-2.14-5-3.22s2.22-2,5.84-2.14a29.39,29.39,0,0,1,6.3.43A38.48,38.48,0,0,1,249.46,120.86Z"/><path class="avatar-3-cls-6" d="M92.19,132.81c29.19-4.84,58.37,3.32,87,9,29,5.73,57,5.91,86-.74,38.4-8.81,88.08-27.83,106.7-71.12A76.9,76.9,0,0,0,375,61.34c-20.42,14.6-47.12,12.59-69.71,3s-42.46-25.77-63.5-39.17S197.13.91,173.16,3.63c-23.29,2.64-47.76,17.86-65.39,35A78.55,78.55,0,0,0,91.53,60.7C88,68.12,87.33,78.9,81.26,84.4c-2.86,2.59-6.59,3.46-10,5.08-15.49,7.47-21.13,29-23.64,48-5.17,39-3.54,79,1.88,118"/><path class="avatar-3-cls-3" d="M344,247a4.31,4.31,0,0,1-1.12-.15,4.5,4.5,0,0,1-3.24-5.48c11.44-44.36,5.43-83.13-7.1-127.69a4.5,4.5,0,1,1,8.66-2.44c12.93,46,19.09,86.07,7.16,132.38A4.51,4.51,0,0,1,344,247Z"/><path class="avatar-3-cls-7" d="M84.69,146.36c0,1.6,0,3.18-.09,4.75L75.34,178.6l-3.12,9.24c-3.13,5.88-6.5,11.7-9.62,17.59S59.57,217,57.35,223a130.31,130.31,0,0,0-6.44,22.57c-2-10.35-6-20.67-7.22-31.15,4.9-4.13,7.94-10.22,9.47-16.49,1.66-6.79,1.69-13.86,1.72-20.85a34.9,34.9,0,0,1,7.45,16.14c.05-.22.1-.46.15-.69q4.08-19.68,6.46-39.66c.72,1.35,1.38,2.72,2,4.13a71.28,71.28,0,0,1,2.81,9.87c0-.33.09-.64.12-1Q76,150.39,76.69,134.7A48.12,48.12,0,0,1,84.69,146.36Z"/><path class="avatar-3-cls-7" d="M338,110.71a155.88,155.88,0,0,1-30.76,16c-2.21.87-4.44,1.72-6.67,2.52-4.79,1.72-9.61,3.25-14.4,4.64-8.59,2.5-17.07,4.5-25.07,6.1-29,5.82-57,5.66-86,.65-15.34-2.66-30.82-5.94-46.39-7.76h0l-37.41.79c0,.4.09.81.12,1.21l-1.06.14-1.67,4.22h0l-1.12,2.81c.18-1.56.3-3.14.34-4.74a56.14,56.14,0,0,0-.35-8.13l35.56-.75a95,95,0,0,1-13.84,2l1.47,0a70.84,70.84,0,0,0,14.31-2h0c10-2.44,23.3-8.24,32.64-12.89-1.21,3.52-4,10.23-7.47,11.6,13.7.77,23.75-2.55,37.16-5.45a30.37,30.37,0,0,1-12.68,10.25l-.52.22c.56,0,1.12,0,1.69,0,.17-.09.33-.19.49-.29a49.15,49.15,0,0,0,6.42-4.7s-3.72,6-3.72,6h0a103,103,0,0,0,44.29-4.43l5.39-1.77,5.76-.8c-1.71,1.75-6.58,3.31-8.61,4.67a34.78,34.78,0,0,1-9.85,4.61c1.37,0,3.49,2.12,4.85,2,10.13-.7,19.39-4.89,29.33-7.14,3.41-.77,7.56-2.33,11-3.14,3-.73,12.1-3.72,15-4.82L275,125.25l3.61-.08-2.11-.59-3,3c.11,0-.86,1.54-.75,1.5,16.8-4.79,47.23-14.23,63.65-20.18h1.07C337.63,109.47,337.82,110.08,338,110.71Z"/><path class="avatar-3-cls-3" d="M49.07,260.3a4.4,4.4,0,0,1-1.42-.23,4.51,4.51,0,0,1-2.85-5.69c3-8.87,40.51-120.88,40.89-122a4.5,4.5,0,0,1,8.54,2.86c-.38,1.13-37.94,113.13-40.89,122A4.5,4.5,0,0,1,49.07,260.3Z"/><path class="avatar-3-cls-8" d="M53.66,144.87a12,12,0,0,1,3.85-5.08c1.42-1,2.76-1.21,3.62-.61s1.14,1.88,1,3.42A20.34,20.34,0,0,1,58,152.52c-1,1.17-2.11,1.87-3.16,1.67s-1.81-1.31-2.09-3A12,12,0,0,1,53.66,144.87Z"/><path class="avatar-3-cls-8" d="M73.29,124.32c2.9-1.35,6-.89,6.87,1s-.73,4.57-3.63,5.93-6,.89-6.87-1S70.39,125.68,73.29,124.32Z"/><path class="avatar-3-cls-8" d="M86.6,109.93c2.1-4.46,5-7.73,7-7.06s2.24,5.38-.07,10.31-6.09,7.77-7.88,6.65S84.52,114.4,86.6,109.93Z"/><path class="avatar-3-cls-3" d="M70.57,69.83a55.25,55.25,0,0,0-9.49-9.16c-2.74-2-4.72-2.87-5.16-2.37-.89,1.07,4.59,7,10.86,14.67l2.69,3.26a17.67,17.67,0,0,0-6.57-.85c-2,.18-3.16.77-3.19,1.43s1,1.34,2.69,2,3.87,1.45,6.3,2.34,4.61,1.76,6.3,2.31l.77.23c1.72,1.88,2.94,2.92,3.46,2.62s.07-2.44-1.41-5.5A56.54,56.54,0,0,0,70.57,69.83Z"/><path class="avatar-3-cls-3" d="M189.84,121.17c-.54.28-1.18.64-1.9,1.06s-1.52.9-2.37,1.43l-1.32.83-1.38.88-2.93,1.88-1.53,1c-.26.16-.51.32-.78.47l-.78.48q-1.57.94-3.18,1.83c-1.07.57-2.15,1.12-3.22,1.63l-.82.36c-.26.13-.53.24-.81.36l-1.6.65c-1.07.4-2.11.8-3.13,1.09-.51.18-1,.29-1.49.44s-1,.24-1.43.37l-1.35.3-1.25.23c-.79.12-1.5.23-2.1.29s-1.08.11-1.41.15l-.52.07.41.31a10.67,10.67,0,0,0,1.24.79,16.92,16.92,0,0,0,2.09,1l1.36.43c.48.12,1,.24,1.54.35s1.12.18,1.71.23,1.22.09,1.85.09a22.9,22.9,0,0,0,4-.34,18.43,18.43,0,0,0,2.06-.44l1-.28,1-.34a27.94,27.94,0,0,0,4-1.77,34.42,34.42,0,0,0,3.63-2.31l.84-.64c.27-.21.53-.44.79-.66.53-.44,1-.89,1.51-1.36a33.1,33.1,0,0,0,2.6-2.77c.39-.46.75-.92,1.1-1.37l.95-1.32c.59-.87,1.1-1.68,1.52-2.42s.77-1.4,1-2,.46-1,.59-1.32l.19-.49-.47.22C190.82,120.66,190.38,120.88,189.84,121.17Z"/><path class="avatar-3-cls-3" d="M232.08,127.34l-2.08.93c-.79.37-1.67.79-2.64,1.22-.47.23-1,.48-1.47.71l-1.57.75L221,132.56c-.58.26-1.16.55-1.75.84-.3.15-.59.29-.9.42l-.9.43c-1.2.59-2.44,1.13-3.65,1.73s-2.46,1.15-3.68,1.68l-.91.41c-.3.15-.6.28-.9.41-.61.26-1.2.52-1.78.81-1.18.49-2.31,1.05-3.4,1.51-.55.24-1.08.47-1.59.72s-1,.44-1.5.66c-1,.46-1.86.86-2.65,1.22l-2.08,1c-.58.28-1,.52-1.35.69l-.48.27.53.12c.35.07.86.16,1.5.25a21.78,21.78,0,0,0,2.34.23,30.35,30.35,0,0,0,3,0c.55,0,1.13-.05,1.73-.1s1.2-.13,1.84-.21c1.26-.15,2.57-.42,3.93-.72.67-.16,1.35-.35,2-.55.34-.09.69-.19,1-.3l1-.36c1.39-.45,2.74-1,4.1-1.63s2.66-1.31,3.9-2.07l.94-.55c.31-.19.6-.39.9-.59.59-.4,1.18-.79,1.74-1.2,1.1-.85,2.16-1.66,3.09-2.53l1.35-1.27c.42-.42.81-.86,1.19-1.26a26,26,0,0,0,1.94-2.33,21.05,21.05,0,0,0,1.34-1.93c.35-.55.6-1,.77-1.31l.26-.49-.52.19C233.14,126.89,232.67,127.08,232.08,127.34Z"/><path class="avatar-3-cls-3" d="M285.59,114.78c-.58.47-1.29,1-2.1,1.64-.4.31-.82.65-1.26,1l-1.41,1.09c-.48.38-1,.79-1.49,1.19L277.72,121c-1.08.88-2.28,1.73-3.45,2.67-.62.44-1.22.91-1.84,1.38-.3.23-.61.47-.93.69l-.95.69c-1.25,1-2.58,1.85-3.86,2.79s-2.62,1.84-3.94,2.7l-1,.65c-.31.23-.64.44-1,.65-.65.42-1.29.83-1.92,1.26-1.28.78-2.49,1.63-3.69,2.34l-1.73,1.1c-.55.36-1.12.66-1.64,1l-1.51,1-1.38.84c-.87.54-1.63,1-2.27,1.42s-1.13.72-1.47,1l-.52.36h.63c.41,0,1,0,1.76-.05a26.4,26.4,0,0,0,2.72-.26l1.67-.25c.58-.11,1.18-.24,1.81-.39s1.3-.29,2-.48,1.36-.41,2.07-.63c1.42-.44,2.87-1,4.37-1.67.74-.33,1.48-.69,2.23-1.06.38-.18.76-.36,1.13-.57l1.11-.62c1.5-.81,2.94-1.78,4.39-2.74s2.79-2.05,4.07-3.18l1-.84c.32-.27.62-.57.92-.86.6-.59,1.2-1.16,1.76-1.74,1.1-1.2,2.15-2.35,3.05-3.54l1.3-1.73c.41-.57.76-1.15,1.12-1.68s.68-1.07,1-1.58l.8-1.48a24.8,24.8,0,0,0,1.17-2.47c.29-.7.5-1.26.64-1.64l.2-.59-.52.36C286.65,114,286.17,114.32,285.59,114.78Z"/><path class="avatar-3-cls-3" d="M75.07,168.26c0-.33,0-.66-.07-1-.07-.66-.14-1.3-.21-1.94s-.22-1.25-.33-1.86a16,16,0,0,0-.4-1.75c-.16-.57-.32-1.11-.47-1.64s-.38-1-.56-1.5-.38-.92-.55-1.35-.42-.8-.61-1.17a13.83,13.83,0,0,0-1.09-1.82c-.34-.49-.61-.86-.79-1.11l-.29-.39.11.47.35,1.3c.17.55.33,1.23.49,2,.09.38.18.79.28,1.22s.14.89.22,1.37.2,1,.24,1.47.12,1,.18,1.59.1,1.1.14,1.67.11,1.15.1,1.75,0,1.2,0,1.81c0,.31,0,.62,0,.93l0,.93q0,.94-.06,1.89c0,.64-.06,1.27-.11,1.91-.11,1.27-.2,2.55-.36,3.8l-.1.94-.12.94c-.08.61-.15,1.22-.23,1.83-.19,1.19-.32,2.37-.51,3.47-.08.56-.16,1.1-.23,1.62s-.16,1-.24,1.52c-.14,1-.27,1.87-.39,2.67s-.2,1.5-.27,2.07-.13,1-.16,1.35,0,.48,0,.48l.23-.42.61-1.21c.26-.53.55-1.17.88-1.92s.67-1.59,1-2.53l.54-1.47q.24-.76.51-1.59c.36-1.09.65-2.27,1-3.49.15-.61.28-1.24.41-1.87l.2-1,.15-1c.23-1.3.37-2.65.48-4,.06-.67.06-1.36.09-2a19.44,19.44,0,0,0,0-2Z"/><path class="avatar-3-cls-3" d="M62.89,191.23l-.23-.94c-.08-.31-.17-.62-.27-.92-.19-.61-.36-1.21-.59-1.78a24.73,24.73,0,0,0-1.44-3.24c-.26-.5-.52-1-.8-1.43s-.56-.88-.84-1.28a22.14,22.14,0,0,0-1.65-2.09c-.53-.59-1-1.07-1.44-1.45s-.77-.66-1-.84l-.37-.27.22.4c.14.26.36.64.62,1.13s.57,1.07.89,1.75.68,1.46,1,2.31c.18.42.35.86.52,1.33s.34.94.5,1.43c.34,1,.64,2,.92,3.14.15.54.26,1.11.39,1.67.07.29.13.57.18.86l.16.87c.21,1.16.37,2.35.5,3.55s.19,2.39.21,3.58v.89a8.42,8.42,0,0,1,0,.87c0,.59,0,1.16,0,1.73s-.05,1.13-.1,1.67-.09,1.09-.16,1.61-.11,1-.18,1.52-.13,1-.22,1.43c-.14.91-.31,1.75-.46,2.5s-.31,1.4-.43,1.94l-.3,1.26c-.07.3-.1.45-.1.45l.27-.37c.18-.24.44-.6.75-1.07s.66-1.07,1-1.77a24.08,24.08,0,0,0,1.12-2.41c.2-.45.35-.93.53-1.43s.33-1,.48-1.56.29-1.1.41-1.68.24-1.17.33-1.78.17-1.23.23-1.86c0-.32.06-.64.08-.95l0-1a32.15,32.15,0,0,0-.12-3.92A35.27,35.27,0,0,0,62.89,191.23Z"/><path class="avatar-3-cls-3" d="M340.52,135.12c-.56-.33-2.35,1.41-4.39,4.82a31.05,31.05,0,0,0-1.53,2.85c-.53,1-1,2.19-1.5,3.41a54.73,54.73,0,0,0-2.4,8.19,53.3,53.3,0,0,0-1,8.48c0,1.31,0,2.55,0,3.72s.16,2.24.29,3.22c.54,3.94,1.5,6.24,2.14,6.16,1.42-.19,1-9.55,3.37-20.59S341.75,135.85,340.52,135.12Z"/><path class="avatar-3-cls-3" d="M332.65,76.3q.6-.6,1.08-1.11c1.28-1.36,1.88-2.21,1.67-2.46s-1.68.43-4.06,1.79q.2-.28.12-.42c-.32-.6-3.28.45-8,1.89-1.18.36-2.47.76-3.87,1.11s-2.89.74-4.46,1.13c-3.16.7-6.64,1.35-10.34,1.81s-7.24.61-10.48.67c-1.61,0-3.15,0-4.59,0s-2.79-.11-4-.17c-4.93-.3-8-.62-8.21,0s2.72,2,7.75,3.17a39.25,39.25,0,0,0,4.15.75c1.5.25,3.12.36,4.83.49a68.2,68.2,0,0,0,11.11-.34,68,68,0,0,0,10.48-2.16A105.26,105.26,0,0,1,303,86.69a105.34,105.34,0,0,1-13.4,2.42c-2.09.18-4.08.41-5.94.45-.94,0-1.84.12-2.71.12l-2.51,0c-6.38,0-10.4-.39-10.54.3-.06.31.87.77,2.65,1.35l1.48.45c.55.14,1.15.26,1.79.4a42.19,42.19,0,0,0,4.43.73l2.6.29c.9.08,1.85.09,2.83.14,2,.12,4.05,0,6.26,0a78.72,78.72,0,0,0,14.2-2.19,78.61,78.61,0,0,0,13.5-4.9c2-1,3.85-1.92,5.51-3,.84-.51,1.66-1,2.42-1.48l2.14-1.5a44.2,44.2,0,0,0,3.53-2.77C331.77,77.08,332.24,76.69,332.65,76.3Z"/><path class="avatar-3-cls-3" d="M258.59,56.35c.84-.51,1.67-1,2.42-1.49l2.14-1.49a42.47,42.47,0,0,0,3.53-2.77c.5-.43,1-.82,1.38-1.21s.77-.77,1.09-1.11c1.27-1.36,1.87-2.22,1.67-2.46s-1.69.43-4.07,1.79c.13-.19.17-.33.12-.43-.32-.59-3.27.46-8,1.9-1.18.35-2.47.75-3.87,1.11s-2.89.74-4.46,1.13c-3.15.7-6.64,1.35-10.34,1.8s-7.24.61-10.47.68c-1.62,0-3.16,0-4.6,0s-2.79-.11-4-.18c-4.92-.29-8-.61-8.21,0s2.72,2,7.75,3.17c1.26.28,2.65.56,4.15.75s3.12.36,4.83.49a67.15,67.15,0,0,0,11.11-.35,66.79,66.79,0,0,0,10.48-2.16,104.66,104.66,0,0,1-12.79,4.27A105.34,105.34,0,0,1,225,62.2c-2.09.18-4.07.41-5.94.45-.94,0-1.84.12-2.71.12l-2.5,0c-6.39,0-10.41-.39-10.55.29-.06.31.87.78,2.65,1.36l1.48.45c.55.14,1.15.26,1.79.4a42.64,42.64,0,0,0,4.43.73l2.6.28c.9.09,1.85.1,2.83.15,2,.12,4,0,6.26,0a79.62,79.62,0,0,0,14.2-2.19,78.61,78.61,0,0,0,13.5-4.9C255.05,58.32,256.93,57.4,258.59,56.35Z"/><path class="avatar-3-cls-3" d="M195.19,30.86c.37-.2.73-.43,1.11-.66.73-.47,1.54-.92,2.32-1.45.41-.24.8-.5,1.2-.76.21-.13.41-.27.62-.39l.61-.4c.81-.54,1.66-1.05,2.48-1.62s1.64-1.1,2.47-1.63l.6-.41c.2-.15.4-.28.6-.41.41-.27.81-.53,1.19-.81.79-.52,1.53-1.08,2.26-1.57l1-.76c.34-.26.67-.49,1-.72l1.76-1.33c.52-.43,1-.8,1.37-1.1s.68-.59.88-.77l.15-.14.21-.06,1.73-.51.62-.2-.62-.19c-.41-.12-1-.29-1.77-.45s-1.69-.35-2.77-.5-2.3-.26-3.64-.33c-.67,0-1.37,0-2.1,0s-1.47,0-2.23.07a47,47,0,0,0-4.82.5c-.83.13-1.67.29-2.52.47l-1.28.28-1.28.32A43.6,43.6,0,0,0,191.24,17a39.83,39.83,0,0,0-4.92,2.38c-.39.22-.78.45-1.16.69l-1.13.73c-.73.51-1.46,1-2.13,1.56a28.65,28.65,0,0,0-3.65,3.44l-.78.89-.7.92a17.84,17.84,0,0,0-1.22,1.8,15.91,15.91,0,0,0-1,1.75c-.14.28-.27.55-.41.82s-.21.55-.31.81a18.1,18.1,0,0,0-.83,2.76,13.93,13.93,0,0,0-.26,1.82c0,.41,0,.63,0,.63l.41-.49c.28-.32.61-.81,1.11-1.37s1.07-1.25,1.8-2l.54-.55.61-.56c.41-.38.83-.78,1.31-1.15s.93-.8,1.47-1.18l.78-.59.83-.58c1.11-.79,2.36-1.53,3.64-2.28l2-1.09,1-.52q.51-.27,1.05-.51c1.42-.69,2.91-1.31,4.4-1.92,1.16-.46,2.32-.9,3.5-1.32l0,0-.63.53c-.21.18-.4.37-.6.56-.39.37-.77.74-1.13,1.12a27.05,27.05,0,0,0-2,2.33c-.28.39-.56.76-.81,1.14s-.48.76-.69,1.13a18.31,18.31,0,0,0-1,2.06,12.12,12.12,0,0,0-.65,1.69c-.16.48-.26.87-.33,1.13l-.09.42.39-.17c.25-.11.61-.28,1.05-.5l1.53-.82,1.9-1.07Z"/><path class="avatar-3-cls-3" d="M107.52,78.93q-.13-.72-.33-1.71l-.46-2.13c-.1-.38-.19-.78-.29-1.19s-.2-.82-.31-1.25c-.23-.84-.42-1.75-.7-2.65-.1-.46-.23-.91-.37-1.38-.07-.23-.13-.46-.19-.7l-.2-.7c-.28-.94-.51-1.9-.81-2.84s-.57-1.9-.83-2.85l-.21-.7c-.09-.23-.15-.46-.22-.69-.14-.46-.27-.92-.43-1.37-.25-.91-.57-1.78-.83-2.62l-.41-1.23c-.15-.4-.27-.79-.4-1.17l-.75-2.06-.65-1.64c-.18-.46-.35-.82-.47-1.07l-.09-.18v-.22c0-.77,0-1.39,0-1.8s0-.65,0-.65l-.36.53c-.24.35-.57.87-1,1.55s-.83,1.52-1.29,2.51-.93,2.12-1.4,3.38c-.21.63-.44,1.29-.66,2s-.4,1.42-.6,2.16c-.37,1.49-.7,3.09-.94,4.75q-.18,1.24-.3,2.55L92,66.84q0,.66-.06,1.32A42.83,42.83,0,0,0,92,73.58a39.33,39.33,0,0,0,.82,5.4c.09.44.19.88.31,1.31l.37,1.3c.27.85.54,1.69.86,2.49a29.54,29.54,0,0,0,2.21,4.51l.62,1,.67.93a19.84,19.84,0,0,0,1.36,1.7,15.78,15.78,0,0,0,1.39,1.43l.67.63.68.54a17.42,17.42,0,0,0,2.39,1.6,12.55,12.55,0,0,0,1.66.79l.59.24-.35-.54c-.22-.36-.59-.82-1-1.47s-.88-1.39-1.34-2.3l-.37-.67-.35-.75c-.24-.5-.5-1-.72-1.59s-.49-1.13-.69-1.75c-.11-.3-.22-.61-.34-.92l-.3-1c-.43-1.3-.76-2.71-1.11-4.15-.14-.74-.29-1.48-.44-2.23L99.44,79a11.19,11.19,0,0,1-.18-1.16c-.24-1.55-.39-3.16-.54-4.76-.1-1.25-.17-2.49-.22-3.74v0l.32.75c.11.25.23.5.35.74.25.48.48,1,.74,1.41a28.05,28.05,0,0,0,1.65,2.55c.29.38.57.76.86,1.11s.58.69.87,1A18.9,18.9,0,0,0,105,78.52a12.68,12.68,0,0,0,1.42,1.12c.41.3.75.51,1,.65l.37.21s0-.15,0-.42S107.6,79.41,107.52,78.93Z"/><path class="avatar-3-cls-3" d="M157.63,30.1c.21-.26.41-.52.63-.76l.62-.77c.82-1,1.69-2.06,2.5-3.13s1.66-2.11,2.5-3.13l.6-.79c.19-.27.4-.52.6-.78.41-.51.81-1,1.18-1.54.8-1,1.52-2,2.25-3,.36-.48.7-1,1-1.41s.66-.92,1-1.35l1.7-2.45c.5-.77.93-1.44,1.3-2s.63-1,.81-1.36l.13-.24.25-.17,2-1.38.71-.52h-.87c-.58,0-1.41.06-2.46.17s-2.34.26-3.79.52-3.07.63-4.82,1.1c-.87.26-1.78.52-2.71.83s-1.88.66-2.85,1c-1.94.76-4,1.64-6,2.67-1,.52-2,1.07-3,1.66l-1.53.9-1.51.95a65.41,65.41,0,0,0-5.9,4.36,52.74,52.74,0,0,0-5.32,5.14c-.42.44-.82.9-1.21,1.37l-1.14,1.41c-.73,1-1.45,1.92-2.09,2.91a39.74,39.74,0,0,0-3.25,6q-.31.75-.63,1.47t-.51,1.47a25.35,25.35,0,0,0-.81,2.83,22.86,22.86,0,0,0-.5,2.66c0,.42-.11.83-.17,1.23s0,.79-.06,1.17a22.82,22.82,0,0,0,.1,3.9,18.82,18.82,0,0,0,.42,2.44l.2.85.32-.81c.23-.53.45-1.3.86-2.23s.85-2.06,1.49-3.28l.46-.94.55-1a23.46,23.46,0,0,1,1.2-2c.44-.69.86-1.42,1.39-2.12l.76-1.1.83-1.09c1.09-1.49,2.39-3,3.72-4.47l2.11-2.23L141.81,32c.36-.38.74-.75,1.13-1.11,1.54-1.47,3.19-2.89,4.85-4.31,1.3-1.08,2.61-2.13,4-3.17l0,0-.59.95c-.19.31-.36.64-.53,1-.34.65-.68,1.28-1,1.93a38.56,38.56,0,0,0-1.52,3.8c-.2.63-.4,1.23-.57,1.82s-.29,1.18-.41,1.74a27.31,27.31,0,0,0-.49,3.1,18.32,18.32,0,0,0-.12,2.44c0,.68,0,1.23,0,1.6l.06.57L147,42c.28-.25.67-.62,1.14-1.09l1.63-1.69,2-2.18c.35-.4.71-.82,1.09-1.24s.75-.87,1.14-1.32c.75-.92,1.6-1.84,2.38-2.84C156.83,31.11,157.23,30.61,157.63,30.1Z"/><path class="avatar-3-cls-3" d="M188.32,415.9a115.94,115.94,0,0,1-19.23-1.61,3.5,3.5,0,1,1,1.26-6.88c.31,0,30.65,5.45,44.82-4.67A15.44,15.44,0,0,0,221.82,392a3.5,3.5,0,1,1,6.92,1,22.47,22.47,0,0,1-9.51,15.42C210.9,414.39,198.63,415.9,188.32,415.9Z"/><circle class="avatar-3-cls-9" cx="260.6" cy="260.93" r="5.28"/><circle class="avatar-3-cls-3" cx="245.8" cy="264.38" r="22.91"/><circle class="avatar-3-cls-1" cx="256.02" cy="247.35" r="12.7"/><path class="avatar-3-cls-8" d="M300.59,168.74c1.29,2.37,1.34,4.85.1,5.52s-3.29-.7-4.58-3.08-1.34-4.85-.1-5.52S299.3,166.36,300.59,168.74Z"/><path class="avatar-3-cls-8" d="M310.25,189.88c1.94,3.62,2.51,7.1,1.27,7.77s-3.83-1.73-5.77-5.36-2.52-7.1-1.27-7.77S308.3,186.25,310.25,189.88Z"/><path class="avatar-3-cls-2" d="M299.47,144.54a262.36,262.36,0,0,1-35.32,10.62c-29,6.65-57,6.47-86,.74-25.17-5-50.77-11.88-76.43-10.17q2.81-6.3,6.16-12.27l18.41-.39c10.64,1.22,21.21,3.34,31.78,5.55.36.16.75.32,1.18.49l1.36.43c.48.12,1,.24,1.54.35s1.12.18,1.71.23,1.22.09,1.85.09h.06c7.43,1.54,14.86,3,22.32,4.12,2.23.33,4.49.63,6.8.88l-.46.26.53.12c.35.07.86.16,1.5.25a21.78,21.78,0,0,0,2.34.23,30.35,30.35,0,0,0,3,0c.53,0,1.1-.05,1.68-.1,27.91,1.92,60.1-1.45,89.18-11.39C295,137.79,297.22,141.11,299.47,144.54Z"/><path class="avatar-3-cls-3" d="M48.53,260.48a4.48,4.48,0,0,1-4.45-3.88c-6.29-45.25-7.1-84.24-2.47-119.22C45.3,109.48,53.85,92.67,67.76,86c1.14-.55,2.28-1,3.38-1.45a18.15,18.15,0,0,0,5.5-2.92c3.46-3.14,5-8.42,6.69-14a62.23,62.23,0,0,1,4-10.82C101,30.15,129.81,8.13,159,2c40.31-8.54,71.8,12.57,102.27,33,14.23,9.53,28.94,19.39,44.16,25.83,24.66,10.44,48.47,9.52,65.33-2.54l10.62-7.6-3.69,12.53a80.3,80.3,0,0,1-3.28,9.09C365.33,93.3,343.91,122,293.34,139c-32.79,11-72.38,14.65-105.89,9.64-9.25-1.38-18.56-3.32-27.56-5.2-23.42-4.88-45.55-9.49-68.56-5.67a4.5,4.5,0,0,1-1.47-8.88c24.66-4.09,48.66.91,71.87,5.74,8.87,1.85,18.05,3.77,27.05,5.11,32.17,4.81,70.18,1.35,101.69-9.27,25.37-8.54,58.45-25.6,74.21-58.63-18,7.64-40.17,6.76-62.78-2.81-16-6.78-31.08-16.88-45.66-26.65C226,22.14,197.43,3,160.84,10.75c-26.25,5.56-53.21,26.18-65.55,50.13A54.71,54.71,0,0,0,92,70.14c-1.85,6.24-3.95,13.3-9.28,18.13a25.88,25.88,0,0,1-8.19,4.6c-1,.4-1.95.79-2.83,1.21-10.95,5.28-17.87,19.83-21.13,44.48C46,172.72,46.82,210.93,53,255.37a4.5,4.5,0,0,1-3.84,5.07A4.4,4.4,0,0,1,48.53,260.48Z"/><path class="avatar-3-cls-3" d="M343.6,255.94a4.49,4.49,0,0,1-4.5-4.47c-.3-40.92-49.59-113.6-50.09-114.33a4.5,4.5,0,1,1,7.44-5.08c2.09,3.07,51.33,75.71,51.65,119.35a4.51,4.51,0,0,1-4.47,4.53Z"/><path class="avatar-3-cls-8" d="M327.53,239.22a114.3,114.3,0,0,1,1,14c0,2.15,0,4.2-.15,6.11s-.26,3.69-.45,5.31c-.76,6.47-2,10.34-2.64,10.25-1.5-.19-.14-15.93-2.82-35-2.51-19.06-8.05-33.86-6.65-34.44.61-.26,2.82,3.14,5.29,9.17.62,1.51,1.26,3.17,1.86,5s1.19,3.78,1.78,5.85A114.05,114.05,0,0,1,327.53,239.22Z"/><circle class="avatar-3-cls-3" cx="145.8" cy="264.38" r="22.91"/><circle class="avatar-3-cls-1" cx="156.02" cy="247.35" r="12.7"/><circle class="avatar-3-cls-8" cx="136.6" cy="272.93" r="5.28"/><circle class="avatar-3-cls-8" cx="239.6" cy="272.93" r="5.28"/></g></g></svg>
diff --git a/admin-ui/vue/packages/icons/src/svg/icons/avatar-4.svg b/admin-ui/vue/packages/icons/src/svg/icons/avatar-4.svg
new file mode 100644
index 0000000..d9138df
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/icons/avatar-4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 464.12 605.75"><defs><style>.avatar-4-cls-1{fill:#dfe7ea;}.avatar-4-cls-2{fill:#f0d7c2;}.avatar-4-cls-3{fill:#d7ad8c;}.avatar-4-cls-4{fill:#c4987a;}.avatar-4-cls-5{fill:#8376a5;}.avatar-4-cls-6{fill:#655a8e;}.avatar-4-cls-7{fill:#ebcbac;}.avatar-4-avatar-4-cls-16,.avatar-4-cls-8,.avatar-4-cls-9{fill:none;stroke:#42565e;stroke-miterlimit:10;}.avatar-4-cls-8{stroke-linecap:round;}.avatar-4-cls-8,.avatar-4-cls-9{stroke-width:10px;}.avatar-4-cls-9{stroke-linecap:square;}.avatar-4-avatar-4-cls-10{fill:#dcb79b;}.avatar-4-avatar-4-cls-11{fill:#fff;}.avatar-4-avatar-4-cls-12{fill:#40565a;}.avatar-4-avatar-4-cls-13{fill:#a699d6;}.avatar-4-avatar-4-cls-14{fill:#485d63;}.avatar-4-avatar-4-cls-15{fill:#796f9c;}.avatar-4-avatar-4-cls-16{stroke-width:11px;}.avatar-4-avatar-4-cls-17{fill:#325560;}</style></defs><title>Asset 120</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="avatar-4-cls-1" cx="236.82" cy="551.53" rx="184.33" ry="54.22"/><path class="avatar-4-cls-2" d="M30.24,275.91A69.67,69.67,0,0,0,21.69,369c4.48,6,10.06,11.3,16.89,14.32s15,3.46,21.65,0"/><path class="avatar-4-cls-3" d="M18,366.5c3.62,6.7,8.36,12.95,14.66,17.24,2.69,1.84,7,1.57,11.13,1.27-5.9-4.26-10.4-10.26-13.86-16.68-15.65-29-9.35-68.14,14.59-90.75H68.76v-1.84H32.58C8.64,298.37,2.34,337.52,18,366.5Z"/><path class="avatar-4-cls-3" d="M419,275a69.67,69.67,0,0,1,29.75,88.61c-3,6.84-7.19,13.32-13.14,17.82s-13.82,6.82-21.06,5"/><path class="avatar-4-cls-4" d="M411.42,386.76a29.59,29.59,0,0,0,19.15-4.19c6.72-4,11.79-10.17,15.61-16.77A67.58,67.58,0,0,0,453.47,316c-4.12-16.58-18.64-31.49-33.49-41l-1,13.49c7.89,8.45,16.35,18.74,19.1,29.76a67.58,67.58,0,0,1-7.29,49.78c-3.82,6.6-8.9,12.74-15.61,16.77A30.36,30.36,0,0,1,411.42,386.76Z"/><path class="avatar-4-cls-5" d="M452.36,118.46c-8.78-30.07-32.4-57-62.92-63.67a46.85,46.85,0,0,0-9.71-17.86c-5.41-6.13-12.35-10.72-19.61-14.48-36.17-18.7-79.26-17-119.65-11.85-16.15,2.07-32.27,4.63-48,8.91C128.34,37,73,84.38,45.91,145.09s-22.25,133.54,7.56,193L262.36,185.91V334.35H414.7c-8.85-26.74-4.64-73.12,7.76-98.72,9.21-19,22.61-32.09,28.47-53.07C457,160.94,458.72,140.29,452.36,118.46Z"/><path class="avatar-4-cls-6" d="M454.65,186.37C452,196,447.72,203.88,443,211.49c-.82-48.6-11-97.83-36.11-139.38A92.48,92.48,0,0,0,398.41,60c28,8.43,49.4,34,57.66,62.31C462.44,144.1,460.69,164.75,454.65,186.37Z"/><path class="avatar-4-cls-7" d="M53.69,331.22c15.1-11.09,21.39-30.36,26.05-48.51A691.24,691.24,0,0,0,99.16,167.36l91,27.16c10,3,20.12,6,30.54,6.38,26.17,1,49.73-14.31,74.25-23.5A165.16,165.16,0,0,1,370,167.87s7.5,121.7,48.83,164.47c.81,73-43.54,137.46-92.3,191.78-11.27,12.55-23,25.08-37.55,33.62l-.21.12a72.52,72.52,0,0,1-36.5,10.2l-29.86.15a71.65,71.65,0,0,1-36.73-9.91l-1-.56c-14.55-8.54-26.28-21.06-37.55-33.62C98.47,469.8,52,405.33,52.78,332.34"/><path class="avatar-4-cls-2" d="M146.18,528.31c-48.31-54-94-118-93.24-190.45l.91-1.13c15.09-11.09,21.39-30.36,26-48.51A690.78,690.78,0,0,0,99.31,172.88l28.18,8.41C118.46,222.82,83,409.19,146.18,528.31Z"/><path class="avatar-4-cls-3" d="M323.51,525.35a270.7,270.7,0,0,1-19.2,19.85c22.46-40.14,35.38-85.8,40-131.73,6.33-63.1-2.24-126.93-17.2-188.56-.55-2.26-1.17-4.63-2.75-6.34-2.47-2.67-6.5-3-10.13-3.13-20.76-.84-41.76-1.81-61.63-7.87a105.08,105.08,0,0,1-17.44-7c19.43-4.07,37.77-14.78,56.7-21.88A165.11,165.11,0,0,1,367,169.1s7.49,121.69,48.83,164.46C416.61,406.56,372.26,471,323.51,525.35Z"/><path class="avatar-4-cls-8" d="M390.57,54.45c31.3,6,55.6,33.41,64.53,64,6.37,21.82,4.61,42.47-1.43,64.1-5.86,21-19.26,34.06-28.47,53.07-12.4,25.6-14.78,71.07-5.93,97.81"/><path class="avatar-4-cls-8" d="M27.49,275.91A69.67,69.67,0,0,0,18.93,369c4.48,6,10.06,11.3,16.89,14.32s15,3.46,21.65,0"/><path class="avatar-4-cls-8" d="M422.38,274.38A69.67,69.67,0,0,1,452.13,363c-3,6.84-7.19,13.32-13.14,17.82s-13.82,6.82-21.06,5"/><polygon class="avatar-4-cls-3" points="237.17 353.31 237.17 432.24 264.71 432.24 237.17 353.31"/><polyline class="avatar-4-cls-9" points="237.32 357.44 236.19 423.51 236.11 428.1"/><path class="avatar-4-avatar-4-cls-10" d="M344.27,308.58c.57,5-.41,9-1.09,8.93s-.9-4-1.45-8.65-1.2-8.52-.51-8.75S343.71,303.58,344.27,308.58Z"/><path class="avatar-4-avatar-4-cls-11" d="M160.6,204.75a109.34,109.34,0,0,1,22.25,7.54c5.49,2.71,8.48,5.28,8,6.57s-4.34,1.18-10.15.31-13.7-2.41-22.45-4.49A144,144,0,0,1,136,207.81c-5.57-2.38-8.76-4.67-8.36-6s4.24-1.55,10.15-1A175.83,175.83,0,0,1,160.6,204.75Z"/><path class="avatar-4-avatar-4-cls-12" d="M397.3,128.18a75.72,75.72,0,0,1,1.9,14c0,2.17.07,4.23-.09,6.16-.07,1-.1,1.89-.21,2.78l-.35,2.55c-1,6.48-2.82,10.19-3.8,10s-1.24-4.15-1.61-10.27L393,151c0-.83-.16-1.7-.23-2.59-.11-1.78-.38-3.68-.6-5.67-.54-4-1.27-8.29-2.32-12.78s-2.39-8.66-3.69-12.45c-.71-1.87-1.32-3.68-2-5.33-.34-.83-.63-1.65-1-2.41l-.95-2.21c-2.43-5.63-4.08-9.23-3.19-9.9s4.05,1.91,7.9,7.22l1.46,2.11c.5.74.95,1.55,1.44,2.38,1,1.65,1.9,3.5,2.85,5.46A75.74,75.74,0,0,1,397.3,128.18Z"/><path class="avatar-4-avatar-4-cls-12" d="M435.13,118.25a108.47,108.47,0,0,1-2.34,18.33c-.67,2.76-1.29,5.39-2.1,7.78-.39,1.2-.73,2.37-1.14,3.46L428.33,151a55.23,55.23,0,0,1-2.41,5.25c-.39.76-.74,1.46-1.11,2.09s-.74,1.19-1.08,1.69c-1.34,2-2.3,3-2.79,2.77-1-.47.38-5.47,2.21-13.44l.71-3.13c.25-1.08.43-2.23.67-3.4.51-2.34.86-4.87,1.31-7.51A173.57,173.57,0,0,0,427.48,118a173.79,173.79,0,0,0-.37-17.39c-.26-2.66-.43-5.21-.77-7.58-.16-1.18-.25-2.34-.42-3.44l-.48-3.17c-1.25-8.08-2.3-13.17-1.24-13.56.5-.18,1.38.87,2.58,3q.45.79,1,1.76c.32.66.62,1.38,1,2.17a55.19,55.19,0,0,1,2,5.41l1,3.21c.33,1.12.59,2.31.89,3.54.64,2.45,1.06,5.11,1.53,7.91A108.47,108.47,0,0,1,435.13,118.25Z"/><path class="avatar-4-avatar-4-cls-12" d="M407,237.87a61.19,61.19,0,0,1,3-13.43,51.88,51.88,0,0,1,2.35-5.53c.43-.84.8-1.66,1.25-2.41l1.31-2.14a30.51,30.51,0,0,1,2.52-3.48c.4-.49.77-.95,1.14-1.34s.75-.73,1.09-1c1.35-1.2,2.28-1.69,2.71-1.38.91.66-.62,4.15-2.6,9.64l-.77,2.16c-.27.75-.48,1.55-.74,2.36-.56,1.61-1,3.38-1.49,5.21A83.83,83.83,0,0,0,414.29,251c.13,1.9.18,3.72.4,5.4.1.85.14,1.68.25,2.46l.32,2.27c.83,5.79,1.62,9.51.59,10-.48.21-1.3-.46-2.37-1.9q-.4-.54-.85-1.23c-.29-.46-.55-1-.84-1.54A30.49,30.49,0,0,1,410,262.5l-.85-2.36c-.28-.83-.48-1.71-.73-2.61a51.91,51.91,0,0,1-1.18-5.89A61.23,61.23,0,0,1,407,237.87Z"/><path class="avatar-4-avatar-4-cls-13" d="M338.06,11a505.1,505.1,0,0,0-65.52,7.53c-9.44,1.72-18.9,3.72-27.78,7.32C237.13,29,230,33.22,222.27,36.08l-1,.35c-15.13,5.37-33.2,6.48-43.21,19L179.81,52q1.31-2.53,2.6-5.07a64.64,64.64,0,0,0-39.5,17c-.84.79-1.73,1.54-2.63,2.27-9,7.24-20.27,11.3-28.87,19.81q-.45-4.32-.89-8.65-2,1.23-3.94,2.52c-9.37,6.19-18,13.53-24.81,22.49-7.31,9.7-12.31,21.4-12.89,33.52a2.76,2.76,0,0,0-1.28-1.65c-.22.33-.44.67-.65,1a164.8,164.8,0,0,0-25.72,75.23q-1.39-4.56-2.77-9.1c-.08,1.17-.16,2.37-.21,3.63a304,304,0,0,0,3.3,57.5,58,58,0,0,1-13.19-23.61,221.08,221.08,0,0,1,5.31-59.68A200.24,200.24,0,0,1,46,142.48a217.66,217.66,0,0,1,18.72-33.54A52.26,52.26,0,0,1,66.84,100a231.53,231.53,0,0,1,78.78-67.78,147.77,147.77,0,0,0-11.25,10A223.1,223.1,0,0,1,179,21.07q6.69-2.31,13.52-4.18a312,312,0,0,1,36.29-7.31c3.89-.58,7.79-1.1,11.68-1.61,10.4-1.34,21-2.43,31.56-3C294.53,3.75,317,4.85,338.06,11Z"/><path class="avatar-4-cls-8" d="M50.86,335.92C21,276.49,16.19,203.66,43.3,142.95S125.73,34.84,189.89,17.37c15.71-4.28,31.83-6.84,48-8.91,40.39-5.18,83.48-6.85,119.65,11.85,7.26,3.75,14.2,8.35,19.61,14.48C388.79,48,392,67.82,386,84.4s-20.53,29.56-37.4,34.67"/><path class="avatar-4-avatar-4-cls-12" d="M119.45,55.71a122.27,122.27,0,0,1,11.37-12.29c1.91-1.73,3.71-3.37,5.52-4.79s3.48-2.72,5.07-3.83c6.39-4.44,10.89-6.3,11.46-5.47,1.28,1.85-13.39,13.4-27.43,31.16C111.22,78.11,103.19,95,101.1,94.13c-.93-.38-.12-5.17,2.8-12.39.74-1.8,1.58-3.75,2.62-5.79s2.18-4.19,3.45-6.44A122.24,122.24,0,0,1,119.45,55.71Z"/><path class="avatar-4-avatar-4-cls-12" d="M152.92,44.74a155.46,155.46,0,0,1,12.6-13.37c2.09-1.91,4.07-3.71,6-5.29s3.78-3,5.5-4.29c6.91-5,11.74-7.28,12.34-6.46,1.32,1.81-14.6,14.92-30.58,34.31C142.68,68.9,132.71,87,130.69,86c-.91-.44.42-5.6,4.09-13.32.92-1.92,2-4,3.21-6.2s2.61-4.49,4.1-6.89A155.46,155.46,0,0,1,152.92,44.74Z"/><path class="avatar-4-avatar-4-cls-12" d="M193,32.11a87.62,87.62,0,0,1,14.89-12.4,79.37,79.37,0,0,1,14-7.35c8.37-3.31,14-3.82,14.24-2.87s-4.55,3.39-11.85,7.73a121.7,121.7,0,0,0-25.76,20.23c-8.94,9.23-15.89,18.86-21.16,25.73s-8.78,11.07-9.7,10.51,1-5.67,5.14-13.44A127.77,127.77,0,0,1,193,32.11Z"/><path class="avatar-4-avatar-4-cls-12" d="M246.25,15.32A101.07,101.07,0,0,1,263,7.14a76.92,76.92,0,0,1,14.74-4c8.63-1.37,14-.51,14.08.47s-5,2.2-12.8,4.79a141.76,141.76,0,0,0-28.82,13.45c-10.67,6.49-19.73,13.51-26.43,18.52s-11.06,8-11.8,7.22,2.32-5.1,8.21-11.27A131.37,131.37,0,0,1,246.25,15.32Z"/><path class="avatar-4-avatar-4-cls-12" d="M38.39,192.46a120.8,120.8,0,0,0,3.08,13.79c.66,2.07,1.22,4.08,1.91,5.9.33.91.6,1.82.94,2.67l.95,2.43c2.44,6.21,4.26,10.1,3.34,10.76-.43.31-1.43-.29-2.9-1.67q-.55-.52-1.19-1.18c-.41-.45-.81-1-1.26-1.52a38.32,38.32,0,0,1-2.81-3.91L39,217.34c-.5-.84-.94-1.75-1.43-2.68a65,65,0,0,1-2.76-6.13,71.66,71.66,0,0,1-4.66-30.3,64.9,64.9,0,0,1,.79-6.68c.19-1,.33-2,.56-3l.69-2.72a38.34,38.34,0,0,1,1.5-4.57c.26-.66.49-1.27.74-1.83s.53-1,.78-1.48c1-1.76,1.76-2.63,2.26-2.47,1.07.35.52,4.61.05,11.26l-.17,2.61c-.06.9,0,1.85-.09,2.82-.11,1.94,0,4,0,6.2A120.86,120.86,0,0,0,38.39,192.46Z"/><path class="avatar-4-avatar-4-cls-12" d="M36.06,250.75a94.42,94.42,0,0,0,5.12,8.54c.9,1.25,1.71,2.48,2.56,3.55.42.55.8,1.1,1.2,1.6l1.16,1.45c3,3.71,5,6.11,4.35,7s-3.77,0-8.06-3.08l-1.65-1.24c-.57-.44-1.1-1-1.68-1.47a42.43,42.43,0,0,1-3.46-3.52,47.69,47.69,0,0,1-10.33-19.94,42.32,42.32,0,0,1-.88-4.85c-.09-.77-.19-1.5-.23-2.22s0-1.4-.06-2.06c0-5.26,1.13-8.39,2.13-8.36s1.91,3.05,3.23,7.61l.52,1.78c.18.62.41,1.25.62,1.91.38,1.32.92,2.69,1.42,4.14A94.39,94.39,0,0,0,36.06,250.75Z"/><path class="avatar-4-avatar-4-cls-12" d="M67.93,123.65A94.35,94.35,0,0,0,69.15,133c.31,1.43.54,2.81.87,4.07.16.64.27,1.27.43,1.86l.44,1.71c1.13,4.37,1.93,7.26,1,7.85s-3.35-1.43-6-5.72l-1-1.71c-.33-.6-.61-1.25-.92-1.92a40.14,40.14,0,0,1-1.7-4.39,45.45,45.45,0,0,1-1.49-21.39,40.27,40.27,0,0,1,1.08-4.58c.22-.71.4-1.39.64-2l.73-1.83c2-4.61,4.21-6.91,5.12-6.49s.62,3.42.11,7.91l-.2,1.76c-.07.61-.1,1.25-.17,1.9-.15,1.3-.19,2.7-.3,4.16A94.26,94.26,0,0,0,67.93,123.65Z"/><path class="avatar-4-cls-6" d="M355.66,174.31a165.11,165.11,0,0,0-59.78,10.43c-10.63,4-21.07,9.1-31.63,13.56v-4.12L252.17,203a106,106,0,0,1-14.22,3.9c-1.55.3-3.11.56-4.69.78a69.08,69.08,0,0,1-11.64.58c-10.43-.39-20.55-3.4-30.53-6.38l-56.29-16.8-14.54-4.34-20.14-6q-2.75,33.38-8.73,66.39Q87.06,265.14,81,288.82c-.1.41-.21.82-.31,1.23-4.66,18.14-10.95,37.42-26,48.5l-.92,1.13c0,1.12,0,2.25,0,3.36Q50.69,336.71,48,330.2c11.22-9.15,18.92-22.41,22.74-36.44,4.32-15.88,4-32.73,1.4-49a1.49,1.49,0,0,0,1.43.57c1.44-.21,3-2.36,3.4-4.18a188.87,188.87,0,0,0,4.36-49.24c0-.66-.06-1.31-.09-2l3.23,3.4c6-11.47,4.25-31.47,6.3-44.25,13.89,12.88,48.77,13.2,66.08,5.51-4.33,3.77-5,12.86-10.1,15.6,1.53,0-8.28,5-6.75,4.94a129.75,129.75,0,0,0,65.78-21.6c-5.24,11-14.41,26.68-26,30.42,1.69.36,2.65-6.32,4.34-6q12.47,2.51,25.09,4.17c12.06,1.61,24.59,2.62,36.17-1.11,14.49-4.66,25.64-16.08,36.16-27.09q0,2.9-.35,5.8a65.84,65.84,0,0,1-5,19.31l32.61-13.88c.05.5.09,1,.12,1.51a27,27,0,0,1-3.55,14.74q25.15-11.8,49.59-25A27.75,27.75,0,0,1,355.66,174.31Z"/><path class="avatar-4-cls-6" d="M411.74,319.21c-8.3-10.85-15.05-25-20.53-40.32-.08-.22-.16-.44-.23-.65-11.25-33.09-16.84-70.92-19.39-93.54,10.71,26.93,25,59.59,39.5,85.45h0C408.88,287.05,408.92,304.81,411.74,319.21Z"/><path class="avatar-4-avatar-4-cls-14" d="M269.63,176.7c24.26-13.66,43.82-25.11,45.05-23.33s-16.68,16.14-41.28,30-46.18,21.74-47,19.86S245.4,190.42,269.63,176.7Z"/><path class="avatar-4-avatar-4-cls-14" d="M257.18,173.65c4.41-4.6,8.39-9.18,11.9-13.46,1.71-2.18,3.38-4.21,4.84-6.2.74-1,1.49-1.92,2.16-2.85l1.94-2.68c4.93-6.84,8-11.24,9-10.75s-.41,5.73-4.33,13.56l-1.59,3c-.56,1.05-1.22,2.11-1.87,3.22-1.28,2.24-2.84,4.51-4.47,6.91a121.8,121.8,0,0,1-26.14,27c-2.34,1.71-4.56,3.34-6.75,4.7-1.09.69-2.12,1.38-3.15,2l-3,1.69c-7.7,4.18-13,5.67-13.41,4.78s3.78-4.16,10.45-9.32l2.61-2c.91-.7,1.81-1.48,2.78-2.25,1.94-1.52,3.92-3.26,6-5C248.28,182.34,252.73,178.22,257.18,173.65Z"/><path class="avatar-4-avatar-4-cls-12" d="M167.43,170.51a127.73,127.73,0,0,0,20.86-7.38c3-1.53,6-2.88,8.6-4.48,1.31-.77,2.63-1.44,3.82-2.21l3.41-2.23c2.24-1.34,4.06-2.84,5.78-4,.84-.61,1.67-1.15,2.38-1.68s1.35-1.06,1.94-1.5c2.38-1.77,3.91-2.61,4.3-2.26s-.39,1.87-2.19,4.37q-.68.93-1.54,2c-.6.72-1.3,1.44-2,2.23a55.67,55.67,0,0,1-5.34,5.13l-3.32,2.77c-1.17.95-2.49,1.79-3.81,2.73a89.12,89.12,0,0,1-8.83,5.42,103.88,103.88,0,0,1-22.17,8.5,103.87,103.87,0,0,1-23.57,2.85,89.14,89.14,0,0,1-10.34-.66c-1.61-.22-3.17-.34-4.64-.63l-4.23-.9a55.7,55.7,0,0,1-7.12-2c-1-.36-2-.66-2.85-1s-1.63-.75-2.32-1.09c-2.76-1.36-4.16-2.34-4-2.84s1.92-.47,4.86,0c.73.11,1.54.26,2.42.42s1.86.23,2.89.37c2.07.25,4.38.72,7,.86l4.06.38c1.41.13,2.89.1,4.41.17,3,.2,6.29,0,9.69-.06A127.74,127.74,0,0,0,167.43,170.51Z"/><path class="avatar-4-avatar-4-cls-12" d="M132.77,165a101.23,101.23,0,0,0,11.59-5.33c1.7-1,3.36-1.87,4.83-2.84.74-.47,1.49-.89,2.17-1.36l2-1.33c5-3.41,8.07-5.83,8.93-5.11.4.34.13,1.39-.74,3q-.33.61-.76,1.34c-.3.47-.67.95-1.06,1.47a32.16,32.16,0,0,1-2.84,3.38L155,160c-.64.63-1.36,1.21-2.09,1.85a54.7,54.7,0,0,1-4.91,3.75,60.59,60.59,0,0,1-26.34,9.87,54.62,54.62,0,0,1-6.16.4c-1,0-1.9,0-2.79,0l-2.57-.2a32.13,32.13,0,0,1-4.36-.68c-.64-.14-1.23-.26-1.76-.41s-1-.34-1.45-.5c-1.73-.66-2.62-1.27-2.54-1.8.17-1.11,4.09-1.32,10.09-2l2.35-.29c.81-.1,1.65-.27,2.52-.4,1.74-.23,3.58-.66,5.51-1A101.21,101.21,0,0,0,132.77,165Z"/><path class="avatar-4-avatar-4-cls-12" d="M72.26,253c-3.94-18.19-10.05-32.28-8.1-33.34.9-.48,3.66,2.5,6.83,8.12.79,1.41,1.62,3,2.4,4.69S75,236,75.75,238a99.8,99.8,0,0,1,4,13.3,99.82,99.82,0,0,1,2,13.73c.12,2.13.24,4.15.2,6.05s-.07,3.66-.19,5.27c-.5,6.44-1.74,10.3-2.76,10.25C76.78,286.49,76.37,271.13,72.26,253Z"/><path class="avatar-4-avatar-4-cls-12" d="M82.64,210.52c-.93-5.11-1.91-9.93-2.87-14.31-.52-2.17-1-4.26-1.47-6.19l-.69-2.81-.68-2.58c-1.72-6.58-2.86-10.76-1.87-11.26s3.8,3,6.94,9.37l1.19,2.53c.4.89.76,1.83,1.15,2.8.8,1.94,1.5,4.06,2.24,6.29a126.38,126.38,0,0,1,3.6,14.79,156.62,156.62,0,0,1,2.4,27.28c0,7-.65,11.34-1.7,11.43s-2.36-4.11-3.69-10.92S84.46,220.74,82.64,210.52Z"/><path class="avatar-4-avatar-4-cls-12" d="M344.09,154.54c1.54-2,2.91-4,4.14-5.82.58-.94,1.18-1.81,1.68-2.67s1-1.65,1.46-2.38c1.79-2.95,3.1-4.91,4.17-4.69s1.56,2.67.92,6.54a22.28,22.28,0,0,1-.74,3.1,30,30,0,0,1-1.27,3.44A34.57,34.57,0,0,1,344.2,165.2a30,30,0,0,1-3,2.07,22.28,22.28,0,0,1-2.83,1.48c-3.59,1.57-6.13,1.62-6.56.71s1.11-2.74,3.53-5.19c.6-.62,1.27-1.27,2-2s1.41-1.49,2.18-2.28C340.94,158.34,342.52,156.53,344.09,154.54Z"/><path class="avatar-4-cls-8" d="M53.84,333.37C68.95,322.28,75.23,303,79.9,284.86A691.24,691.24,0,0,0,99.31,169.51l91,27.16c10,3,20.12,6,30.54,6.38,26.17,1,49.73-14.31,74.25-23.5A165.16,165.16,0,0,1,370.19,170s7.5,121.7,48.83,164.47c.81,73-43.54,137.46-92.3,191.78-11.27,12.55-23,25.08-37.55,33.62L289,560a72.52,72.52,0,0,1-36.5,10.2l-29.86.15a71.65,71.65,0,0,1-36.73-9.91l-1-.56c-14.55-8.54-26.28-21.06-37.55-33.62C98.62,472,52.12,407.48,52.93,334.49"/><path class="avatar-4-avatar-4-cls-15" d="M366.79,83c3.56-9.19,4.7-18.51,5.61-25.39s1.67-11.38,3.11-11.5,3.15,4.16,4.11,11.49a63.11,63.11,0,0,1,.29,13.08,57.22,57.22,0,0,1-3.61,16A46.21,46.21,0,0,1,367.44,101a36.74,36.74,0,0,1-11,8.3,22.84,22.84,0,0,1-8.9,2.45c-2.21.06-3.45-.39-3.59-1.06-.32-1.48,3.72-3.27,8.61-7.49A48.83,48.83,0,0,0,360.21,95,53.81,53.81,0,0,0,366.79,83Z"/><path class="avatar-4-avatar-4-cls-15" d="M393.72,82.48c.87-4.87,1.17-9.75,1.81-13.49s1.62-6.21,3-6.35,2.93,2,4.17,5.79a32.63,32.63,0,0,1,1.39,6.9,33.45,33.45,0,0,1-.35,9,27.19,27.19,0,0,1-3.21,8.81,20.26,20.26,0,0,1-5.08,5.9,11.07,11.07,0,0,1-4.8,2.28c-1.31.2-2.17-.08-2.53-.67-.73-1.26.54-3.35,1.86-6.32A49.1,49.1,0,0,0,393.72,82.48Z"/><path class="avatar-4-avatar-4-cls-15" d="M363.5,116.33c3.72-2.45,7.13-4.62,9.92-6.06s5-2.06,6-1.12.74,3.29-1,6.3a32.08,32.08,0,0,1-21.71,14.25c-3.46.41-5.77-.25-6.18-1.58s1-3.12,3.44-5.1S359.77,118.77,363.5,116.33Z"/><path class="avatar-4-avatar-4-cls-15" d="M405.25,202a22.88,22.88,0,0,1,7.56-8.1c2.52-1.51,4.63-1.74,5.6-.75s.76,3-.12,5.45a57,57,0,0,1-4.2,8.5,57,57,0,0,1-5.26,7.89c-1.67,2-3.28,3.19-4.65,2.83s-2.2-2.28-2.16-5.22A22.88,22.88,0,0,1,405.25,202Z"/><path class="avatar-4-avatar-4-cls-11" d="M46.05,163.48a38.77,38.77,0,0,1,3.68-7.13,28.5,28.5,0,0,1,4.21-5c2.78-2.58,5.19-3.49,6.27-2.63s.8,3.3-.21,6.55-2.66,7.39-4.44,12-3.35,8.72-4.8,11.81-2.84,5.08-4.27,5-2.54-2.4-2.85-6.18a28.52,28.52,0,0,1,.3-6.56A38.81,38.81,0,0,1,46.05,163.48Z"/><path class="avatar-4-avatar-4-cls-11" d="M77.47,109.21a11.49,11.49,0,0,1,6.45-3c2-.16,3.51.49,4.17,1.73a4.9,4.9,0,0,1-.29,4.37,16,16,0,0,1-8.4,7.53,4.9,4.9,0,0,1-4.37-.18c-1.16-.79-1.64-2.38-1.27-4.33A11.49,11.49,0,0,1,77.47,109.21Z"/><ellipse class="avatar-4-avatar-4-cls-11" cx="210.56" cy="221.64" rx="5.11" ry="8.76" transform="translate(-22.94 418.97) rotate(-86.67)"/><path class="avatar-4-cls-9" d="M224.78,442.79h22.94"/><path class="avatar-4-cls-9" d="M20.87,340A35.55,35.55,0,0,1,42,316.79"/><path class="avatar-4-cls-9" d="M442.19,340A35.55,35.55,0,0,0,421,316.79"/><path class="avatar-4-avatar-4-cls-11" d="M36.71,359.23a58.7,58.7,0,0,1,4.48,7.36c1.06,2.29,1.34,4.25.37,5.29s-2.92,1-5.37-.08a19.33,19.33,0,0,1-8-6.91c-2.49-3.68-3.38-8-2.81-11.09a7,7,0,0,1,1.47-3.46,2.37,2.37,0,0,1,2.07-.95c1.42.21,2.44,1.71,3.61,3.43S35.05,356.75,36.71,359.23Z"/><path class="avatar-4-cls-3" d="M306.74,281.15a53.41,53.41,0,0,0-19.38,5.9c-4.86,2.45-8,4.52-9.27,3.52-.59-.47-.59-1.67.1-3.41a20.9,20.9,0,0,1,4.39-6.38,33.08,33.08,0,0,1,4-3.56,37.32,37.32,0,0,1,5.31-3.26,38.1,38.1,0,0,1,28.15-2.45,37.32,37.32,0,0,1,5.79,2.29,33.07,33.07,0,0,1,4.6,2.8,20.9,20.9,0,0,1,5.43,5.52c1,1.6,1.18,2.78.69,3.34-1.07,1.2-4.53-.29-9.74-1.86A53.41,53.41,0,0,0,306.74,281.15Z"/><path class="avatar-4-cls-9" d="M342.4,280.36a49.37,49.37,0,0,0-70.8,6.17"/><path class="avatar-4-avatar-4-cls-16" d="M264.12,323.48c12.85-5.69,25.89-11.31,39.71-13.84s28.68-1.72,41.06,4.94"/><path class="avatar-3-avatar-4-cls-17" d="M326.2,321.18a17.9,17.9,0,0,1-35.79,0c0-9.88,8-13.77,17.9-13.77S326.2,311.3,326.2,321.18Z"/><path class="avatar-4-cls-3" d="M167.36,281.15a53.41,53.41,0,0,1,19.38,5.9c4.86,2.45,8,4.52,9.27,3.52.59-.47.59-1.67-.1-3.41a20.9,20.9,0,0,0-4.39-6.38,33.08,33.08,0,0,0-4-3.56,37.32,37.32,0,0,0-5.31-3.26A38.1,38.1,0,0,0,154,271.51a37.32,37.32,0,0,0-5.79,2.29,33.07,33.07,0,0,0-4.6,2.8,20.9,20.9,0,0,0-5.43,5.52c-1,1.6-1.18,2.78-.69,3.34,1.07,1.2,4.53-.29,9.74-1.86A53.41,53.41,0,0,1,167.36,281.15Z"/><path class="avatar-4-cls-9" d="M131.69,280.36a49.37,49.37,0,0,1,70.8,6.17"/><path class="avatar-4-avatar-4-cls-16" d="M210,323.48c-12.85-5.69-25.89-11.31-39.71-13.84s-28.68-1.72-41.06,4.94"/><path class="avatar-3-avatar-4-cls-17" d="M147.9,321.18a17.9,17.9,0,0,0,35.79,0c0-9.88-8-13.77-17.9-13.77S147.9,311.3,147.9,321.18Z"/><path class="avatar-4-cls-9" d="M206,498.28A59.24,59.24,0,0,0,236,503c14.26-1.51,29.15-10,32.35-24"/><circle class="avatar-4-cls-2" cx="237.17" cy="528.6" r="10.55" transform="translate(-329.15 406.34) rotate(-53.65)"/></g></g></svg>
diff --git a/admin-ui/vue/packages/icons/src/svg/icons/bell.svg b/admin-ui/vue/packages/icons/src/svg/icons/bell.svg
new file mode 100644
index 0000000..90c34e1
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/icons/bell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.23 419.23"><defs><style>.svg-bell-cls-1{fill:#fbc907;}.svg-bell-cls-2{fill:#f3a70f;}.svg-bell-cls-3{fill:#426572;}.svg-bell-cls-4,.svg-bell-cls-9{fill:#fff;}.svg-bell-cls-5{fill:#e8e8e8;}.svg-bell-cls-6{fill:#dadada;}.svg-bell-cls-7{opacity:0.1;}.svg-bell-cls-8{fill:#55e0ff;}.svg-bell-cls-9{opacity:0.4;}</style></defs><title>Asset 510</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="svg-bell-cls-1" cx="210.66" cy="209.62" r="203.61"/><path class="svg-bell-cls-2" d="M27.21,209.62A203.61,203.61,0,0,1,220.72,6.26q-5-.25-10.08-.25C98.19,4.86,6.11,95.09,5,207.54S94.05,412.07,206.5,413.21q2.07,0,4.13,0,5.06,0,10.08-.25A203.61,203.61,0,0,1,27.21,209.62Z"/><path class="svg-bell-cls-3" d="M209.61,419.23C94,419.23,0,325.19,0,209.61S94,0,209.61,0,419.23,94,419.23,209.61,325.19,419.23,209.61,419.23Zm0-407.23C100.65,12,12,100.65,12,209.61s88.65,197.61,197.61,197.61,197.61-88.65,197.61-197.61S318.58,12,209.61,12Z"/><path class="svg-bell-cls-4" d="M111.69,60.1a195,195,0,0,1,41.08-21.2c3.59-1.34,2-7.14-1.6-5.79a201.47,201.47,0,0,0-42.51,21.8c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="svg-bell-cls-4" d="M35.09,160.61c3.09-10.2,8-20,13.05-29.32A212.37,212.37,0,0,1,95.87,72.18c2.93-2.52-1.33-6.75-4.24-4.24A217.08,217.08,0,0,0,43,128.26C37.63,138,32.54,148.34,29.31,159c-1.12,3.7,4.67,5.29,5.79,1.6Z"/><circle class="svg-bell-cls-5" cx="211.45" cy="212.12" r="156.89"/><path class="svg-bell-cls-6" d="M67.05,232.07a156.89,156.89,0,0,1,283.33-92.82A156.91,156.91,0,1,0,85,304.92,156.19,156.19,0,0,1,67.05,232.07Z"/><path class="svg-bell-cls-5" d="M211.32,152.25h0a9.16,9.16,0,0,1,9.16,9.16V210.5a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V161.41A9.16,9.16,0,0,1,211.32,152.25Z"/><circle class="svg-bell-cls-5" cx="211.14" cy="221.32" r="15.94"/><path class="svg-bell-cls-3" d="M210.48,92.62c6.29,0,6.29-9.77,0-9.77S204.19,92.62,210.48,92.62Z"/><path class="svg-bell-cls-3" d="M210.48,343.89c6.29,0,6.29-9.77,0-9.77S204.19,343.89,210.48,343.89Z"/><path class="svg-bell-cls-3" d="M339.84,218.25c6.29,0,6.29-9.77,0-9.77S333.55,218.25,339.84,218.25Z"/><path class="svg-bell-cls-3" d="M81.13,218.25c6.29,0,6.29-9.77,0-9.77S74.84,218.25,81.13,218.25Z"/><path class="svg-bell-cls-3" d="M205.56,153.32h0a9.16,9.16,0,0,1,9.16,9.16v49.09a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V162.49A9.16,9.16,0,0,1,205.56,153.32Z"/><circle class="cls-3" cx="205.38" cy="221.15" r="15.94"/><path class="cls-3" d="M135.78,272.58l135.16-89.89L290.11,170c5.22-3.46.33-11.94-4.92-8.44L150,251.4l-19.17,12.74C125.64,267.6,130.52,276.08,135.78,272.58Z"/><g class="svg-bell-cls-7"><ellipse class="svg-bell-cls-8" cx="210.2" cy="211.21" rx="156.89" ry="154.23"/></g><path class="svg-bell-cls-9" d="M243.13,60.17,84.37,301.88a162.18,162.18,0,0,1-18.58-47.29L193.5,60.21a153.88,153.88,0,0,1,49.67,0Z"/><path class="svg-bell-cls-9" d="M289.69,72.6,115.93,325.78a155.09,155.09,0,0,1-14.77-15L270,64.76A155.38,155.38,0,0,1,289.69,72.6Z"/><path class="svg-bell-cls-9" d="M362.16,171.75h0L232.51,360.68h0a160.93,160.93,0,0,1-42.54.43L346.63,132.84A151.63,151.63,0,0,1,362.16,171.75Z"/><path class="cls-3" d="M210.12,369.75c-89.82,0-162.89-71.88-162.89-160.23S120.31,49.29,210.12,49.29,373,121.17,373,209.52,299.94,369.75,210.12,369.75Zm0-308.46c-83.2,0-150.89,66.5-150.89,148.23s67.69,148.23,150.89,148.23S361,291.25,361,209.52,293.32,61.29,210.12,61.29Z"/></g></g></svg>
diff --git a/admin-ui/vue/packages/icons/src/svg/icons/cake.svg b/admin-ui/vue/packages/icons/src/svg/icons/cake.svg
new file mode 100644
index 0000000..43901fb
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/icons/cake.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.49 390.69"><defs><style>.svg-cake-cls-1{fill:#fff;}.svg-cake-cls-2{fill:#f3aa9f;}.svg-cake-cls-3{fill:#e1978f;}.svg-cake-cls-4,.svg-cake-cls-6{fill:#426572;}.svg-cake-cls-5{fill:#e1d2d5;}.svg-cake-cls-6{font-size:100.43px;font-family:Dosis-ExtraBold, Dosis;font-weight:700;}</style></defs><title>Asset 480</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="svg-cake-cls-1" d="M383.9,162H199.69V2.19q4-.19,8.16-.19A176.87,176.87,0,0,1,383.9,162Z"/><path class="svg-cake-cls-2" d="M355.38,210a176.83,176.83,0,0,1-95.72,157.18l-.15.07A176.88,176.88,0,1,1,101.72,50.67l.15-.07a175.93,175.93,0,0,1,72.82-17.4V191H354.37A177.9,177.9,0,0,1,355.38,210Z"/><path class="svg-cake-cls-3" d="M357.53,212.16a176,176,0,0,1-17.44,76.66,1,1,0,0,1-.07.15A176.89,176.89,0,0,1,73.47,352.79l1.23.38q6,1.86,12.26,3.29A177,177,0,0,0,303.49,191h52.78A178.15,178.15,0,0,1,357.53,212.16Z"/><path class="svg-cake-cls-4" d="M182.85,390.69a182.87,182.87,0,0,1-84-345.31l.41-.2a180.59,180.59,0,0,1,75.13-20l6.27-.28V185H364.36l.51,5.44c.54,5.77.82,11.62.82,17.4a180.72,180.72,0,0,1-20.18,83.56c-.06.12-.12.26-.2.41a184.39,184.39,0,0,1-83,80.77l-.18.08,0,0A181.06,181.06,0,0,1,182.85,390.69ZM104.33,56.08A170.88,170.88,0,0,0,256.9,361.85l.17-.08,0,0a172.34,172.34,0,0,0,77.5-75.38l.15-.29a168.84,168.84,0,0,0,18.93-78.23c0-3.6-.11-7.23-.34-10.84H168.69V37.58a168.41,168.41,0,0,0-64.07,18.35Z"/><path class="svg-cake-cls-5" d="M382.9,158H309.11c-2.89-46.4-18.43-98.49-36.89-144.29l1.33.51a177.49,177.49,0,0,1,92.51,83.56A175.63,175.63,0,0,1,382.9,158Z"/><path class="svg-cake-cls-4" d="M392.49,172H195.69V.47L201.4.2C204.11.07,207,0,209.85,0a182.87,182.87,0,0,1,182,165.44Zm-184.8-12H379.18A170.89,170.89,0,0,0,209.85,12h-2.16Z"/><text class="svg-cake-cls-6" transform="translate(232.67 133.93)">%</text><path class="svg-cake-cls-1" d="M101.22,81.14a166.34,166.34,0,0,1,34.83-18c3.58-1.34,2-7.14-1.6-5.79A172.89,172.89,0,0,0,98.19,76c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="svg-cake-cls-1" d="M36.28,166.34c2.62-8.63,6.74-16.94,11.05-24.83A180.58,180.58,0,0,1,87.86,91.34c2.93-2.52-1.33-6.75-4.24-4.24-23.3,20.06-44.07,47.84-53.12,77.65-1.12,3.7,4.67,5.29,5.79,1.6Z"/></g></g></svg>
diff --git a/admin-ui/vue/packages/icons/src/svg/icons/card.svg b/admin-ui/vue/packages/icons/src/svg/icons/card.svg
new file mode 100644
index 0000000..40ff3e3
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/icons/card.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 445 271.8"><defs><style>.svg-card-cls-1{fill:#32caf8;}.svg-card-cls-2{fill:#00aaf8;opacity:0.5;}.svg-card-cls-3{fill:#fff;}.svg-card-cls-4{fill:#426572;}</style></defs><g><g><rect class="svg-card-cls-1" x="6" y="8.17" width="433" height="259.8" rx="12" ry="12"/><path class="svg-card-cls-2" d="M439,21.16V255a13,13,0,0,1-13,13H28.72l381-259.8H426A13,13,0,0,1,439,21.16Z"/><path class="svg-card-cls-3" d="M328,33.24h88.92c3.86,0,3.87-6,0-6H328c-3.86,0-3.87,6,0,6Z"/><path class="svg-card-cls-3" d="M283.49,33.24H312.6c3.86,0,3.87-6,0-6H283.49c-3.86,0-3.87,6,0,6Z"/><path class="svg-card-cls-4" d="M427,271.8H18a18,18,0,0,1-18-18V18A18,18,0,0,1,18,0H427a18,18,0,0,1,18,18V253.8A18,18,0,0,1,427,271.8ZM18,12a6,6,0,0,0-6,6V253.8a6,6,0,0,0,6,6H427a6,6,0,0,0,6-6V18a6,6,0,0,0-6-6Z"/><rect class="svg-card-cls-4" x="37.89" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="55.93" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="73.97" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="92.01" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="118.71" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="136.76" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="154.8" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="172.84" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="199.54" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="217.58" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="235.63" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="253.67" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="280.37" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="298.41" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="316.45" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="334.49" y="125.08" width="12" height="20.57"/><rect class="svg-card-cls-4" x="43.89" y="177.53" width="161.29" height="12"/><rect class="svg-card-cls-4" x="43.89" y="204.59" width="68.2" height="12"/><circle class="svg-card-cls-3" cx="379.46" cy="207.35" r="23.82"/><rect class="svg-card-cls-3" x="43.89" y="36.31" width="72.53" height="47.63" rx="12" ry="12"/><path class="svg-card-cls-4" d="M104.42,88.86H55.89a18,18,0,0,1-18-18V47.23a18,18,0,0,1,18-18h48.53a18,18,0,0,1,18,18V70.86A18,18,0,0,1,104.42,88.86ZM55.89,41.23a6,6,0,0,0-6,6V70.86a6,6,0,0,0,6,6h48.53a6,6,0,0,0,6-6V47.23a6,6,0,0,0-6-6Z"/><path class="svg-card-cls-4" d="M379.46,241.49a29.81,29.81,0,1,1,29.82-29.82A29.85,29.85,0,0,1,379.46,241.49Zm0-47.63a17.81,17.81,0,1,0,17.82,17.81A17.84,17.84,0,0,0,379.46,193.86Z"/></g></g></svg>
diff --git a/admin-ui/vue/packages/icons/src/svg/icons/download.svg b/admin-ui/vue/packages/icons/src/svg/icons/download.svg
new file mode 100644
index 0000000..af9ff15
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/icons/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356.99 419.8"><defs><style>.svg-download-cls-1{fill:#ffa546;}.svg-download-cls-2{fill:#ff6059;opacity:0.4;}.svg-download-cls-3{fill:#426572;}.cls-4{fill:#ffd947;}</style></defs><g><g><path class="svg-download-cls-1" d="M351,380.73v17.59a15.52,15.52,0,0,1-15.47,15.48H21.46A15.52,15.52,0,0,1,6,398.32V380.73a15.51,15.51,0,0,1,15.47-15.47H335.52A15.51,15.51,0,0,1,351,380.73Z"/><path class="svg-download-cls-2" d="M351,406.85c0,3.95-7,7.19-15.47,7.19H21.46C13,414,6,410.8,6,406.85V380.73a15.51,15.51,0,0,1,15.47-15.47H37.66l3.44,25.27c0,4,7,7.2,15.47,7.2l283.72,12.44,7.38-2.28Z"/><path class="svg-download-cls-3" d="M335.52,419.8H21.46A21.5,21.5,0,0,1,0,398.32V380.73a21.49,21.49,0,0,1,21.46-21.47H335.52A21.49,21.49,0,0,1,357,380.73v17.59a21.52,21.52,0,0,1-21.46,21.48ZM21.46,371.26A9.48,9.48,0,0,0,12,380.73v17.59a9.48,9.48,0,0,0,9.46,9.48H335.52a9.52,9.52,0,0,0,9.46-9.48V380.73a9.48,9.48,0,0,0-9.46-9.47Z"/><path class="svg-download-cls-1" d="M247.93,138H233.23V41.7A35.7,35.7,0,0,0,197.53,6H159.45a35.7,35.7,0,0,0-35.7,35.7V138H109.06C80,138,61.84,169.48,76.37,194.64l34.72,60.13,30,52c16.6,28.76,58.12,28.76,74.72,0l30-52,34.72-60.13C295.14,169.48,277,138,247.93,138Z"/><path class="svg-download-cls-2" d="M280.62,188l-34.73,60.13-30,52c-11.24,19.46-66.68,32.78-52.52,18.88,60.22-59.12,104.3-182.16,104.3-182.16A37.74,37.74,0,0,1,280.62,188Z"/><path class="cls-4" d="M192.3,6c-.22.23-.42.47-.63.72-38.92,45-18.36,116.49-42.85,170.71-10.14,22.45-29.18,41.51-52.15,49.48L78,194.64C63.52,169.48,81.67,138,110.72,138h14.7V41.7A35.7,35.7,0,0,1,161.12,6Z"/><path class="svg-download-cls-3" d="M178.49,334.39h0a48.64,48.64,0,0,1-42.56-24.57L71.17,197.64A43.75,43.75,0,0,1,109.06,132h8.69V41.7A41.74,41.74,0,0,1,159.45,0h38.09a41.75,41.75,0,0,1,41.7,41.7V132h8.69a43.75,43.75,0,0,1,37.89,65.62L221,309.82A48.64,48.64,0,0,1,178.49,334.39ZM109.06,144a31.75,31.75,0,0,0-27.49,47.62l64.76,112.17a37.14,37.14,0,0,0,64.33,0l64.76-112.17A31.75,31.75,0,0,0,247.92,144H227.23V41.7A29.73,29.73,0,0,0,197.53,12H159.45a29.73,29.73,0,0,0-29.7,29.7V144Z"/></g></g></svg>
diff --git a/admin-ui/vue/packages/icons/src/svg/index.ts b/admin-ui/vue/packages/icons/src/svg/index.ts
new file mode 100644
index 0000000..9573ef7
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/index.ts
@@ -0,0 +1,27 @@
+import { createIconifyIcon } from '@vben-core/icons';
+
+import './load.js';
+
+const SvgAvatar1Icon = createIconifyIcon('svg:avatar-1');
+const SvgAvatar2Icon = createIconifyIcon('svg:avatar-2');
+const SvgAvatar3Icon = createIconifyIcon('svg:avatar-3');
+const SvgAvatar4Icon = createIconifyIcon('svg:avatar-4');
+const SvgDownloadIcon = createIconifyIcon('svg:download');
+const SvgCardIcon = createIconifyIcon('svg:card');
+const SvgBellIcon = createIconifyIcon('svg:bell');
+const SvgCakeIcon = createIconifyIcon('svg:cake');
+const SvgAntdvLogoIcon = createIconifyIcon('svg:antdv-logo');
+const SvgQuarkBrowserIcon = createIconifyIcon('svg:arcticons--quark-browser');
+
+export {
+  SvgAntdvLogoIcon,
+  SvgAvatar1Icon,
+  SvgAvatar2Icon,
+  SvgAvatar3Icon,
+  SvgAvatar4Icon,
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+  SvgQuarkBrowserIcon,
+};
diff --git a/admin-ui/vue/packages/icons/src/svg/load.ts b/admin-ui/vue/packages/icons/src/svg/load.ts
new file mode 100644
index 0000000..59098bd
--- /dev/null
+++ b/admin-ui/vue/packages/icons/src/svg/load.ts
@@ -0,0 +1,79 @@
+import type { IconifyIconStructure } from '@vben-core/icons';
+
+import { addIcon } from '@vben-core/icons';
+
+let loaded = false;
+if (!loaded) {
+  loadSvgIcons();
+  loaded = true;
+}
+
+function parseSvg(svgData: string): IconifyIconStructure {
+  const parser = new DOMParser();
+  const xmlDoc = parser.parseFromString(svgData, 'image/svg+xml');
+  const svgElement = xmlDoc.documentElement;
+
+  // 提取 SVG 根元素的关键样式属性
+  const getAttrs = (el: Element, attrs: string[]) =>
+    attrs
+      .map((attr) =>
+        el.hasAttribute(attr) ? `${attr}="${el.getAttribute(attr)}"` : '',
+      )
+      .filter(Boolean)
+      .join(' ');
+
+  const rootAttrs = getAttrs(svgElement, [
+    'fill',
+    'stroke',
+    'fill-rule',
+    'stroke-width',
+  ]);
+
+  const svgContent = [...svgElement.childNodes]
+    .filter((node) => node.nodeType === Node.ELEMENT_NODE)
+    .map((node) => new XMLSerializer().serializeToString(node))
+    .join('');
+  // 若根有属性，用一个 g 标签包裹内容并继承属性
+  const body = rootAttrs ? `<g ${rootAttrs}>${svgContent}</g>` : svgContent;
+
+  const viewBoxValue = svgElement.getAttribute('viewBox') || '';
+  const [left, top, width, height] = viewBoxValue.split(' ').map((val) => {
+    const num = Number(val);
+    return Number.isNaN(num) ? undefined : num;
+  });
+
+  return {
+    body,
+    height,
+    left,
+    top,
+    width,
+  };
+}
+
+/**
+ * 自定义的svg图片转化为组件
+ * @example ./svg/avatar.svg
+ * <Icon icon="svg:avatar"></Icon>
+ */
+async function loadSvgIcons() {
+  const svgEagers = import.meta.glob('./icons/**', {
+    eager: true,
+    query: '?raw',
+  });
+
+  await Promise.all(
+    Object.entries(svgEagers).map((svg) => {
+      const [key, body] = svg as [string, string | { default: string }];
+
+      // ./icons/xxxx.svg => xxxxxx
+      const start = key.lastIndexOf('/') + 1;
+      const end = key.lastIndexOf('.');
+      const iconName = key.slice(start, end);
+
+      return addIcon(`svg:${iconName}`, {
+        ...parseSvg(typeof body === 'object' ? body.default : body),
+      });
+    }),
+  );
+}
diff --git a/admin-ui/vue/packages/icons/tsconfig.json b/admin-ui/vue/packages/icons/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/icons/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/locales/package.json b/admin-ui/vue/packages/locales/package.json
new file mode 100644
index 0000000..7d47915
--- /dev/null
+++ b/admin-ui/vue/packages/locales/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@vben/locales",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/locales"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@intlify/core-base": "catalog:",
+    "@vben-core/composables": "workspace:*",
+    "vue": "catalog:",
+    "vue-i18n": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/locales/src/i18n.ts b/admin-ui/vue/packages/locales/src/i18n.ts
new file mode 100644
index 0000000..e3c75bd
--- /dev/null
+++ b/admin-ui/vue/packages/locales/src/i18n.ts
@@ -0,0 +1,147 @@
+import type { App } from 'vue';
+import type { Locale } from 'vue-i18n';
+
+import type {
+  ImportLocaleFn,
+  LoadMessageFn,
+  LocaleSetupOptions,
+  SupportedLanguagesType,
+} from './typing';
+
+import { unref } from 'vue';
+import { createI18n } from 'vue-i18n';
+
+import { useSimpleLocale } from '@vben-core/composables';
+
+const i18n = createI18n({
+  globalInjection: true,
+  legacy: false,
+  locale: '',
+  messages: {},
+});
+
+const modules = import.meta.glob('./langs/**/*.json');
+
+const { setSimpleLocale } = useSimpleLocale();
+
+const localesMap = loadLocalesMapFromDir(
+  /\.\/langs\/([^/]+)\/(.*)\.json$/,
+  modules,
+);
+let loadMessages: LoadMessageFn;
+
+/**
+ * Load locale modules
+ * @param modules
+ */
+function loadLocalesMap(modules: Record<string, () => Promise<unknown>>) {
+  const localesMap: Record<Locale, ImportLocaleFn> = {};
+
+  for (const [path, loadLocale] of Object.entries(modules)) {
+    const key = path.match(/([\w-]*)\.(json)/)?.[1];
+    if (key) {
+      localesMap[key] = loadLocale as ImportLocaleFn;
+    }
+  }
+  return localesMap;
+}
+
+/**
+ * Load locale modules with directory structure
+ * @param regexp - Regular expression to match language and file names
+ * @param modules - The modules object containing paths and import functions
+ * @returns A map of locales to their corresponding import functions
+ */
+function loadLocalesMapFromDir(
+  regexp: RegExp,
+  modules: Record<string, () => Promise<unknown>>,
+): Record<Locale, ImportLocaleFn> {
+  const localesRaw: Record<Locale, Record<string, () => Promise<unknown>>> = {};
+  const localesMap: Record<Locale, ImportLocaleFn> = {};
+
+  // Iterate over the modules to extract language and file names
+  for (const path in modules) {
+    const match = path.match(regexp);
+    if (match) {
+      const [_, locale, fileName] = match;
+      if (locale && fileName) {
+        if (!localesRaw[locale]) {
+          localesRaw[locale] = {};
+        }
+        if (modules[path]) {
+          localesRaw[locale][fileName] = modules[path];
+        }
+      }
+    }
+  }
+
+  // Convert raw locale data into async import functions
+  for (const [locale, files] of Object.entries(localesRaw)) {
+    localesMap[locale] = async () => {
+      const messages: Record<string, any> = {};
+      for (const [fileName, importFn] of Object.entries(files)) {
+        messages[fileName] = ((await importFn()) as any)?.default;
+      }
+      return { default: messages };
+    };
+  }
+
+  return localesMap;
+}
+
+/**
+ * Set i18n language
+ * @param locale
+ */
+function setI18nLanguage(locale: Locale) {
+  i18n.global.locale.value = locale;
+
+  document?.querySelector('html')?.setAttribute('lang', locale);
+}
+
+async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
+  const { defaultLocale = 'zh-CN' } = options;
+  // app可以自行扩展一些第三方库和组件库的国际化
+  loadMessages = options.loadMessages || (async () => ({}));
+  app.use(i18n);
+  await loadLocaleMessages(defaultLocale);
+
+  // 在控制台打印警告
+  i18n.global.setMissingHandler((locale, key) => {
+    if (options.missingWarn && key.includes('.')) {
+      console.warn(
+        `[intlify] Not found '${key}' key in '${locale}' locale messages.`,
+      );
+    }
+  });
+}
+
+/**
+ * Load locale messages
+ * @param lang
+ */
+async function loadLocaleMessages(lang: SupportedLanguagesType) {
+  if (unref(i18n.global.locale) === lang) {
+    return setI18nLanguage(lang);
+  }
+  setSimpleLocale(lang);
+
+  const message = await localesMap[lang]?.();
+
+  if (message?.default) {
+    i18n.global.setLocaleMessage(lang, message.default);
+  }
+
+  const mergeMessage = await loadMessages(lang);
+  i18n.global.mergeLocaleMessage(lang, mergeMessage);
+
+  return setI18nLanguage(lang);
+}
+
+export {
+  i18n,
+  loadLocaleMessages,
+  loadLocalesMap,
+  loadLocalesMapFromDir,
+  setupI18n,
+};
diff --git a/admin-ui/vue/packages/locales/src/index.ts b/admin-ui/vue/packages/locales/src/index.ts
new file mode 100644
index 0000000..d4bfd81
--- /dev/null
+++ b/admin-ui/vue/packages/locales/src/index.ts
@@ -0,0 +1,30 @@
+import {
+  i18n,
+  loadLocaleMessages,
+  loadLocalesMap,
+  loadLocalesMapFromDir,
+  setupI18n,
+} from './i18n';
+
+const $t = i18n.global.t;
+const $te = i18n.global.te;
+
+export {
+  $t,
+  $te,
+  i18n,
+  loadLocaleMessages,
+  loadLocalesMap,
+  loadLocalesMapFromDir,
+  setupI18n,
+};
+export {
+  type ImportLocaleFn,
+  type LocaleSetupOptions,
+  type SupportedLanguagesType,
+} from './typing';
+export type { CompileError } from '@intlify/core-base';
+
+export { useI18n } from 'vue-i18n';
+
+export type { Locale } from 'vue-i18n';
diff --git a/admin-ui/vue/packages/locales/src/langs/en-US/authentication.json b/admin-ui/vue/packages/locales/src/langs/en-US/authentication.json
new file mode 100644
index 0000000..7dd3462
--- /dev/null
+++ b/admin-ui/vue/packages/locales/src/langs/en-US/authentication.json
@@ -0,0 +1,65 @@
+{
+  "welcomeBack": "Welcome Back",
+  "pageTitle": "Plug-and-play Admin system",
+  "pageDesc": "Efficient, versatile frontend template",
+  "loginSuccess": "Login Successful",
+  "loginSuccessDesc": "Welcome Back",
+  "loginSubtitle": "Enter your account details to manage your projects",
+  "selectAccount": "Quick Select Account",
+  "username": "Username",
+  "password": "Password",
+  "usernameTip": "Please enter username",
+  "passwordErrorTip": "Password is incorrect",
+  "passwordTip": "Please enter password",
+  "verifyRequiredTip": "Please complete the verification first",
+  "rememberMe": "Remember Me",
+  "createAnAccount": "Create an Account",
+  "createAccount": "Create Account",
+  "alreadyHaveAccount": "Already have an account?",
+  "accountTip": "Don't have an account?",
+  "signUp": "Sign Up",
+  "signUpSubtitle": "Make managing your applications simple and fun",
+  "confirmPassword": "Confirm Password",
+  "confirmPasswordTip": "The passwords do not match",
+  "agree": "I agree to",
+  "privacyPolicy": "Privacy-policy",
+  "terms": "Terms",
+  "agreeTip": "Please agree to the Privacy Policy and Terms",
+  "goToLogin": "Login instead",
+  "passwordStrength": "Use 8 or more characters with a mix of letters, numbers & symbols",
+  "forgetPassword": "Forget Password?",
+  "forgetPasswordSubtitle": "Enter your email and we'll send you instructions to reset your password",
+  "emailTip": "Please enter email",
+  "emailValidErrorTip": "The email format you entered is incorrect",
+  "sendResetLink": "Send Reset Link",
+  "email": "Email",
+  "qrcodeSubtitle": "Scan the QR code with your phone to login",
+  "qrcodePrompt": "Click 'Confirm' after scanning to complete login",
+  "qrcodeLogin": "QR Code Login",
+  "wechatLogin": "Wechat Login",
+  "qqLogin": "QQ Login",
+  "githubLogin": "Github Login",
+  "googleLogin": "Google Login",
+  "dingdingLogin": "Dingding Login",
+  "codeSubtitle": "Enter your phone number to start managing your project",
+  "code": "Security code",
+  "codeTip": "Security code required {0} characters",
+  "mobile": "Mobile",
+  "mobileLogin": "Mobile Login",
+  "mobileTip": "Please enter mobile number",
+  "mobileErrortip": "The phone number format is incorrect",
+  "sendCode": "Get Security code",
+  "sendText": "Resend in {0}s",
+  "thirdPartyLogin": "Or continue with",
+  "weChat": "WeChat",
+  "qq": "QQ",
+  "gitHub": "GitHub",
+  "google": "Google",
+  "loginAgainTitle": "Please Log In Again",
+  "loginAgainSubTitle": "Your login session has expired. Please log in again to continue.",
+  "layout": {
+    "center": "Align Center",
+    "alignLeft": "Align Left",
+    "alignRight": "Align Right"
+  }
+}
diff --git a/admin-ui/vue/packages/locales/src/langs/en-US/common.json b/admin-ui/vue/packages/locales/src/langs/en-US/common.json
new file mode 100644
index 0000000..08c20f7
--- /dev/null
+++ b/admin-ui/vue/packages/locales/src/langs/en-US/common.json
@@ -0,0 +1,24 @@
+{
+  "back": "Back",
+  "backToHome": "Back To Home",
+  "login": "Login",
+  "logout": "Logout",
+  "prompt": "Prompt",
+  "cancel": "Cancel",
+  "confirm": "Confirm",
+  "reset": "Reset",
+  "noData": "No Data",
+  "refresh": "Refresh",
+  "loadingMenu": "Loading Menu",
+  "query": "Search",
+  "search": "Search",
+  "enabled": "Enabled",
+  "disabled": "Disabled",
+  "edit": "Edit",
+  "delete": "Delete",
+  "create": "Create",
+  "yes": "Yes",
+  "no": "No",
+  "showSearchPanel": "Show search panel",
+  "hideSearchPanel": "Hide search panel"
+}
diff --git a/admin-ui/vue/packages/locales/src/langs/en-US/preferences.json b/admin-ui/vue/packages/locales/src/langs/en-US/preferences.json
new file mode 100644
index 0000000..977632a
--- /dev/null
+++ b/admin-ui/vue/packages/locales/src/langs/en-US/preferences.json
@@ -0,0 +1,194 @@
+{
+  "title": "Preferences",
+  "subtitle": "Customize Preferences & Preview in Real Time",
+  "enableStickyPreferencesNavigationBar": "Enable sticky preferences navigation bar",
+  "disableStickyPreferencesNavigationBar": "Disable sticky preferences navigation bar",
+  "resetTip": "Data has changed, click to reset",
+  "resetTitle": "Reset Preferences",
+  "resetSuccess": "Preferences reset successfully",
+  "appearance": "Appearance",
+  "layout": "Layout",
+  "content": "Content",
+  "other": "Other",
+  "wide": "Wide",
+  "compact": "Fixed",
+  "followSystem": "Follow System",
+  "vertical": "Vertical",
+  "verticalTip": "Side vertical menu mode",
+  "horizontal": "Horizontal",
+  "horizontalTip": "Horizontal menu mode, all menus displayed at the top",
+  "twoColumn": "Two Column",
+  "twoColumnTip": "Vertical Two Column Menu Mode",
+  "headerSidebarNav": "Header Vertical",
+  "headerSidebarNavTip": "Header Full Width, Sidebar Navigation Mode",
+  "headerTwoColumn": "Header Two Column",
+  "headerTwoColumnTip": "Header Navigation & Sidebar Two Column co-exists",
+  "mixedMenu": "Mixed Menu",
+  "mixedMenuTip": "Vertical & Horizontal Menu Co-exists",
+  "fullContent": "Full Content",
+  "fullContentTip": "Only display content body, hide all menus",
+  "normal": "Normal",
+  "plain": "Plain",
+  "rounded": "Rounded",
+  "copyPreferences": "Copy Preferences",
+  "copyPreferencesSuccessTitle": "Copy successful",
+  "copyPreferencesSuccess": "Copy successful, please override in `src/preferences.ts` under app",
+  "clearAndLogout": "Clear Cache & Logout",
+  "mode": "Mode",
+  "general": "General",
+  "language": "Language",
+  "dynamicTitle": "Dynamic Title",
+  "watermark": "Watermark",
+  "watermarkContent": "Please input Watermark content",
+  "checkUpdates": "Periodic update check",
+  "position": {
+    "title": "Preferences Postion",
+    "header": "Header",
+    "auto": "Auto",
+    "fixed": "Fixed"
+  },
+  "sidebar": {
+    "buttons": "Show Buttons",
+    "buttonFixed": "Fixed",
+    "buttonCollapsed": "Collapsed",
+    "title": "Sidebar",
+    "width": "Width",
+    "visible": "Show Sidebar",
+    "collapsed": "Collpase Menu",
+    "collapsedShowTitle": "Show Menu Title",
+    "autoActivateChild": "Auto Activate SubMenu",
+    "autoActivateChildTip": "`Enabled` to automatically activate the submenu while click menu.",
+    "expandOnHover": "Expand On Hover",
+    "expandOnHoverTip": "When the mouse hovers over menu, \n `Enabled` to expand children menus \n `Disabled` to expand whole sidebar."
+  },
+  "tabbar": {
+    "title": "Tabbar",
+    "enable": "Enable Tab Bar",
+    "icon": "Show Tabbar Icon",
+    "showMore": "Show More Button",
+    "showMaximize": "Show Maximize Button",
+    "persist": "Persist Tabs",
+    "maxCount": "Max Count of Tabs",
+    "maxCountTip": "When the number of tabs exceeds the maximum,\nthe oldest tab will be closed.\n Set to 0 to disable count checking.",
+    "draggable": "Enable Draggable Sort",
+    "wheelable": "Support Mouse Wheel",
+    "middleClickClose": "Close Tab when Mouse Middle Button Click",
+    "wheelableTip": "When enabled, the Tabbar area responds to vertical scrolling events of the scroll wheel.",
+    "styleType": {
+      "title": "Tabs Style",
+      "chrome": "Chrome",
+      "card": "Card",
+      "plain": "Plain",
+      "brisk": "Brisk"
+    },
+    "contextMenu": {
+      "reload": "Reload",
+      "close": "Close",
+      "pin": "Pin",
+      "unpin": "Unpin",
+      "closeLeft": "Close Left Tabs",
+      "closeRight": "Close Right Tabs",
+      "closeOther": "Close Other Tabs",
+      "closeAll": "Close All Tabs",
+      "openInNewWindow": "Open in New Window",
+      "maximize": "Maximize",
+      "restoreMaximize": "Restore"
+    }
+  },
+  "navigationMenu": {
+    "title": "Navigation Menu",
+    "style": "Navigation Menu Style",
+    "accordion": "Sidebar Accordion Menu",
+    "split": "Navigation Menu Separation",
+    "splitTip": "When enabled, the sidebar displays the top bar's submenu"
+  },
+  "breadcrumb": {
+    "title": "Breadcrumb",
+    "home": "Show Home Button",
+    "enable": "Enable Breadcrumb",
+    "icon": "Show Breadcrumb Icon",
+    "background": "background",
+    "style": "Breadcrumb Style",
+    "hideOnlyOne": "Hidden when only one"
+  },
+  "animation": {
+    "title": "Animation",
+    "loading": "Page Loading",
+    "transition": "Page Transition",
+    "progress": "Page Progress"
+  },
+  "theme": {
+    "title": "Theme",
+    "radius": "Radius",
+    "fontSize": "Font Size",
+    "fontSizeTip": "Adjust global font size with real-time preview",
+    "light": "Light",
+    "dark": "Dark",
+    "darkSidebar": "Semi Dark Sidebar",
+    "darkHeader": "Semi Dark Header",
+    "weakMode": "Weak Mode",
+    "grayMode": "Gray Mode",
+    "builtin": {
+      "title": "Built-in",
+      "default": "Default",
+      "violet": "Violet",
+      "pink": "Pink",
+      "rose": "Rose",
+      "skyBlue": "Sky Blue",
+      "deepBlue": "Deep Blue",
+      "green": "Green",
+      "deepGreen": "Deep Green",
+      "orange": "Orange",
+      "yellow": "Yellow",
+      "zinc": "Zinc",
+      "neutral": "Neutral",
+      "slate": "Slate",
+      "gray": "Gray",
+      "custom": "Custom"
+    }
+  },
+  "header": {
+    "title": "Header",
+    "visible": "Show Header",
+    "modeStatic": "Static",
+    "modeFixed": "Fixed",
+    "modeAuto": "Auto hide & Show",
+    "modeAutoScroll": "Scroll to Hide & Show",
+    "menuAlign": "Menu Align",
+    "menuAlignStart": "Start",
+    "menuAlignEnd": "End",
+    "menuAlignCenter": "Center"
+  },
+  "footer": {
+    "title": "Footer",
+    "visible": "Show Footer",
+    "fixed": "Fixed at Bottom"
+  },
+  "copyright": {
+    "title": "Copyright",
+    "enable": "Enable Copyright",
+    "companyName": "Company Name",
+    "companySiteLink": "Company Site Link",
+    "date": "Date",
+    "icp": "ICP License Number",
+    "icpLink": "ICP Site Link"
+  },
+  "shortcutKeys": {
+    "title": "Shortcut Keys",
+    "global": "Global",
+    "search": "Global Search",
+    "logout": "Logout",
+    "preferences": "Preferences"
+  },
+  "widget": {
+    "title": "Widget",
+    "globalSearch": "Enable Global Search",
+    "fullscreen": "Enable Fullscreen",
+    "themeToggle": "Enable Theme Toggle",
+    "languageToggle": "Enable Language Toggle",
+    "notification": "Enable Notification",
+    "sidebarToggle": "Enable Sidebar Toggle",
+    "lockScreen": "Enable Lock Screen",
+    "refresh": "Enable Refresh"
+  }
+}
diff --git a/admin-ui/vue/packages/locales/src/langs/en-US/ui.json b/admin-ui/vue/packages/locales/src/langs/en-US/ui.json
new file mode 100644
index 0000000..d6a6337
--- /dev/null
+++ b/admin-ui/vue/packages/locales/src/langs/en-US/ui.json
@@ -0,0 +1,112 @@
+{
+  "formRules": {
+    "required": "Please enter {0}",
+    "selectRequired": "Please select {0}",
+    "minLength": "{0} must be at least {1} characters",
+    "maxLength": "{0} can be at most {1} characters",
+    "length": "{0} must be {1} characters long",
+    "alreadyExists": "{0} `{1}` already exists",
+    "startWith": "{0} must start with `{1}`",
+    "invalidURL": "Please input a valid URL"
+  },
+  "actionTitle": {
+    "edit": "Modify {0}",
+    "create": "Create {0}",
+    "delete": "Delete {0}",
+    "view": "View {0}"
+  },
+  "actionMessage": {
+    "deleteConfirm": "Are you sure to delete {0}?",
+    "deleting": "Deleting {0} ...",
+    "deleteSuccess": "{0} deleted successfully",
+    "operationSuccess": "Operation succeeded",
+    "operationFailed": "Operation failed"
+  },
+  "placeholder": {
+    "input": "Please enter",
+    "select": "Please select"
+  },
+  "captcha": {
+    "title": "Please complete the security verification",
+    "sliderSuccessText": "Passed",
+    "sliderDefaultText": "Slider and drag",
+    "alt": "Supports img tag src attribute value",
+    "sliderRotateDefaultTip": "Click picture to refresh",
+    "sliderTranslateDefaultTip": "Click picture to refresh",
+    "sliderRotateFailTip": "Validation failed",
+    "sliderRotateSuccessTip": "Validation successful, time {0} seconds",
+    "sliderTranslateFailTip": "Validation failed",
+    "sliderTranslateSuccessTip": "Validation successful, time {0} seconds",
+    "refreshAriaLabel": "Refresh captcha",
+    "confirmAriaLabel": "Confirm selection",
+    "confirm": "Confirm",
+    "pointAriaLabel": "Click point",
+    "clickInOrder": "Please click in order"
+  },
+  "iconPicker": {
+    "placeholder": "Select an icon",
+    "search": "Search icon..."
+  },
+  "jsonViewer": {
+    "copy": "Copy",
+    "copied": "Copied"
+  },
+  "fallback": {
+    "pageNotFound": "Oops! Page Not Found",
+    "pageNotFoundDesc": "Sorry, we couldn't find the page you were looking for.",
+    "forbidden": "Oops! Access Denied",
+    "forbiddenDesc": "Sorry, but you don't have permission to access this page.",
+    "internalError": "Oops! Something Went Wrong",
+    "internalErrorDesc": "Sorry, but the server encountered an error.",
+    "offline": "Offline Page",
+    "offlineError": "Oops! Network Error",
+    "offlineErrorDesc": "Sorry, can't connect to the internet. Check your connection.",
+    "comingSoon": "Coming Soon",
+    "http": {
+      "requestTimeout": "The request timed out. Please try again later.",
+      "networkError": "A network error occurred. Please check your internet connection and try again.",
+      "badRequest": "Bad Request. Please check your input and try again.",
+      "unauthorized": "Unauthorized. Please log in to continue.",
+      "forbidden": "Forbidden. You do not have permission to access this resource.",
+      "notFound": "Not Found. The requested resource could not be found.",
+      "payloadTooLarge": "The uploaded file is too large. Please reduce the file size or adjust the upload limit.",
+      "internalServerError": "Internal Server Error. Something went wrong on our end. Please try again later."
+    }
+  },
+  "widgets": {
+    "document": "Document",
+    "qa": "Q&A",
+    "setting": "Settings",
+    "logoutTip": "Do you want to logout?",
+    "viewAll": "View All Messages",
+    "notifications": "Notifications",
+    "markAllAsRead": "Make All as Read",
+    "clearNotifications": "Clear",
+    "checkUpdatesTitle": "New Version Available",
+    "checkUpdatesDescription": "Click to refresh and get the latest version",
+    "search": {
+      "title": "Search",
+      "searchNavigate": "Search Navigation",
+      "select": "Select",
+      "navigate": "Navigate",
+      "close": "Close",
+      "noResults": "No Search Results Found",
+      "noRecent": "No Search History",
+      "recent": "Search History"
+    },
+    "lockScreen": {
+      "title": "Lock Screen",
+      "screenButton": "Locking",
+      "password": "Password",
+      "placeholder": "Please enter password",
+      "unlock": "Click to unlock",
+      "errorPasswordTip": "Password error, please re-enter",
+      "backToLogin": "Back to login",
+      "entry": "Enter the system"
+    },
+    "timezone": {
+      "setTimezone": "Set Timezone",
+      "setSuccess": "Timezone set successfully"
+    }
+  }
+}
diff --git a/admin-ui/vue/packages/locales/src/langs/zh-CN/authentication.json b/admin-ui/vue/packages/locales/src/langs/zh-CN/authentication.json
new file mode 100644
index 0000000..ade52ac
--- /dev/null
+++ b/admin-ui/vue/packages/locales/src/langs/zh-CN/authentication.json
@@ -0,0 +1,65 @@
+{
+  "welcomeBack": "欢迎回来",
+  "pageTitle": "开箱即用的大型中后台管理系统",
+  "pageDesc": "工程化、高性能、跨组件库的前端模版",
+  "loginSuccess": "登录成功",
+  "loginSuccessDesc": "欢迎回来",
+  "loginSubtitle": "请输入您的帐户信息以开始管理您的项目",
+  "selectAccount": "快速选择账号",
+  "username": "账号",
+  "password": "密码",
+  "usernameTip": "请输入用户名",
+  "passwordTip": "请输入密码",
+  "verifyRequiredTip": "请先完成验证",
+  "passwordErrorTip": "密码错误",
+  "rememberMe": "记住账号",
+  "createAnAccount": "创建一个账号",
+  "createAccount": "创建账号",
+  "alreadyHaveAccount": "已经有账号了?",
+  "accountTip": "还没有账号?",
+  "signUp": "注册",
+  "signUpSubtitle": "让您的应用程序管理变得简单而有趣",
+  "confirmPassword": "确认密码",
+  "confirmPasswordTip": "两次输入的密码不一致",
+  "agree": "我同意",
+  "privacyPolicy": "隐私政策",
+  "terms": "条款",
+  "agreeTip": "请同意隐私政策和条款",
+  "goToLogin": "去登录",
+  "passwordStrength": "使用 8 个或更多字符，混合字母、数字和符号",
+  "forgetPassword": "忘记密码?",
+  "forgetPasswordSubtitle": "输入您的电子邮件，我们将向您发送重置密码的连接",
+  "emailTip": "请输入邮箱",
+  "emailValidErrorTip": "你输入的邮箱格式不正确",
+  "sendResetLink": "发送重置链接",
+  "email": "邮箱",
+  "qrcodeSubtitle": "请用手机扫描二维码登录",
+  "qrcodePrompt": "扫码后点击 '确认'，即可完成登录",
+  "qrcodeLogin": "扫码登录",
+  "wechatLogin": "微信登录",
+  "qqLogin": "QQ登录",
+  "githubLogin": "Github登录",
+  "googleLogin": "Google登录",
+  "dingdingLogin": "钉钉登录",
+  "codeSubtitle": "请输入您的手机号码以开始管理您的项目",
+  "code": "验证码",
+  "codeTip": "请输入{0}位验证码",
+  "mobile": "手机号码",
+  "mobileTip": "请输入手机号",
+  "mobileErrortip": "手机号码格式错误",
+  "mobileLogin": "手机号登录",
+  "sendCode": "获取验证码",
+  "sendText": "{0}秒后重新获取",
+  "thirdPartyLogin": "其他登录方式",
+  "weChat": "微信",
+  "qq": "QQ",
+  "gitHub": "GitHub",
+  "google": "Google",
+  "loginAgainTitle": "重新登录",
+  "loginAgainSubTitle": "您的登录状态已过期，请重新登录以继续。",
+  "layout": {
+    "center": "居中",
+    "alignLeft": "居左",
+    "alignRight": "居右"
+  }
+}
diff --git a/admin-ui/vue/packages/locales/src/langs/zh-CN/common.json b/admin-ui/vue/packages/locales/src/langs/zh-CN/common.json
new file mode 100644
index 0000000..6b3cad5
--- /dev/null
+++ b/admin-ui/vue/packages/locales/src/langs/zh-CN/common.json
@@ -0,0 +1,24 @@
+{
+  "back": "返回",
+  "backToHome": "返回首页",
+  "login": "登录",
+  "logout": "退出登录",
+  "prompt": "提示",
+  "cancel": "取消",
+  "confirm": "确认",
+  "reset": "重置",
+  "noData": "暂无数据",
+  "refresh": "刷新",
+  "loadingMenu": "加载菜单中",
+  "query": "查询",
+  "search": "搜索",
+  "enabled": "已启用",
+  "disabled": "已禁用",
+  "edit": "修改",
+  "delete": "删除",
+  "create": "新增",
+  "yes": "是",
+  "no": "否",
+  "showSearchPanel": "显示搜索面板",
+  "hideSearchPanel": "隐藏搜索面板"
+}
diff --git a/admin-ui/vue/packages/locales/src/langs/zh-CN/preferences.json b/admin-ui/vue/packages/locales/src/langs/zh-CN/preferences.json
new file mode 100644
index 0000000..f8e390f
--- /dev/null
+++ b/admin-ui/vue/packages/locales/src/langs/zh-CN/preferences.json
@@ -0,0 +1,194 @@
+{
+  "title": "偏好设置",
+  "subtitle": "自定义偏好设置 & 实时预览",
+  "enableStickyPreferencesNavigationBar": "开启首选项导航栏吸顶效果",
+  "disableStickyPreferencesNavigationBar": "关闭首选项导航栏吸顶效果",
+  "resetTitle": "重置偏好设置",
+  "resetTip": "数据有变化，点击可进行重置",
+  "resetSuccess": "重置偏好设置成功",
+  "appearance": "外观",
+  "layout": "布局",
+  "content": "内容",
+  "other": "其它",
+  "wide": "流式",
+  "compact": "定宽",
+  "followSystem": "跟随系统",
+  "vertical": "垂直",
+  "verticalTip": "侧边垂直菜单模式",
+  "horizontal": "水平",
+  "horizontalTip": "水平菜单模式，菜单全部显示在顶部",
+  "twoColumn": "双列菜单",
+  "twoColumnTip": "垂直双列菜单模式",
+  "headerSidebarNav": "侧边导航",
+  "headerSidebarNavTip": "顶部通栏，侧边导航模式",
+  "headerTwoColumn": "混合双列",
+  "headerTwoColumnTip": "双列、水平菜单共存模式",
+  "mixedMenu": "混合垂直",
+  "mixedMenuTip": "垂直水平菜单共存",
+  "fullContent": "内容全屏",
+  "fullContentTip": "不显示任何菜单，只显示内容主体",
+  "normal": "常规",
+  "plain": "朴素",
+  "rounded": "圆润",
+  "copyPreferences": "复制偏好设置",
+  "copyPreferencesSuccessTitle": "复制成功",
+  "copyPreferencesSuccess": "复制成功，请在 app 下的 `src/preferences.ts`内进行覆盖",
+  "clearAndLogout": "清空缓存 & 退出登录",
+  "mode": "模式",
+  "general": "通用",
+  "language": "语言",
+  "dynamicTitle": "动态标题",
+  "watermark": "水印",
+  "watermarkContent": "请输入水印文案",
+  "checkUpdates": "定时检查更新",
+  "position": {
+    "title": "偏好设置位置",
+    "header": "顶栏",
+    "auto": "自动",
+    "fixed": "固定"
+  },
+  "sidebar": {
+    "buttons": "显示按钮",
+    "buttonFixed": "固定按钮",
+    "buttonCollapsed": "折叠按钮",
+    "title": "侧边栏",
+    "width": "宽度",
+    "visible": "显示侧边栏",
+    "collapsed": "折叠菜单",
+    "collapsedShowTitle": "折叠显示菜单名",
+    "autoActivateChild": "自动激活子菜单",
+    "autoActivateChildTip": "点击顶层菜单时,自动激活第一个子菜单或者上一次激活的子菜单",
+    "expandOnHover": "鼠标悬停展开",
+    "expandOnHoverTip": "鼠标在折叠区域悬浮时，`启用`则展开当前子菜单，`禁用`则展开整个侧边栏"
+  },
+  "tabbar": {
+    "title": "标签栏",
+    "enable": "启用标签栏",
+    "icon": "显示标签栏图标",
+    "showMore": "显示更多按钮",
+    "showMaximize": "显示最大化按钮",
+    "persist": "持久化标签页",
+    "maxCount": "最大标签数",
+    "maxCountTip": "每次打开新的标签时如果超过最大标签数，\n会自动关闭一个最先打开的标签\n设置为 0 则不限制",
+    "draggable": "启动拖拽排序",
+    "wheelable": "启用纵向滚轮响应",
+    "middleClickClose": "点击鼠标中键关闭标签页",
+    "wheelableTip": "开启后，标签栏区域可以响应滚轮的纵向滚动事件。\n关闭时，只能响应系统的横向滚动事件（需要按下Shift再滚动滚轮）",
+    "styleType": {
+      "title": "标签页风格",
+      "chrome": "谷歌",
+      "card": "卡片",
+      "plain": "朴素",
+      "brisk": "轻快"
+    },
+    "contextMenu": {
+      "reload": "重新加载",
+      "close": "关闭",
+      "pin": "固定",
+      "unpin": "取消固定",
+      "closeLeft": "关闭左侧标签页",
+      "closeRight": "关闭右侧标签页",
+      "closeOther": "关闭其它标签页",
+      "closeAll": "关闭全部标签页",
+      "openInNewWindow": "在新窗口打开",
+      "maximize": "最大化",
+      "restoreMaximize": "还原"
+    }
+  },
+  "navigationMenu": {
+    "title": "导航菜单",
+    "style": "导航菜单风格",
+    "accordion": "侧边导航菜单手风琴模式",
+    "split": "导航菜单分离",
+    "splitTip": "开启时，侧边栏显示顶栏对应菜单的子菜单"
+  },
+  "breadcrumb": {
+    "title": "面包屑导航",
+    "enable": "开启面包屑导航",
+    "icon": "显示面包屑图标",
+    "home": "显示首页按钮",
+    "style": "面包屑风格",
+    "hideOnlyOne": "仅有一个时隐藏",
+    "background": "背景"
+  },
+  "animation": {
+    "title": "动画",
+    "loading": "页面切换 Loading",
+    "transition": "页面切换动画",
+    "progress": "页面切换进度条"
+  },
+  "theme": {
+    "title": "主题",
+    "radius": "圆角",
+    "fontSize": "字体大小",
+    "fontSizeTip": "调整全局字体大小，实时预览效果",
+    "light": "浅色",
+    "dark": "深色",
+    "darkSidebar": "深色侧边栏",
+    "darkHeader": "深色顶栏",
+    "weakMode": "色弱模式",
+    "grayMode": "灰色模式",
+    "builtin": {
+      "title": "内置主题",
+      "default": "默认",
+      "violet": "紫罗兰",
+      "pink": "樱花粉",
+      "rose": "玫瑰红",
+      "skyBlue": "天蓝色",
+      "deepBlue": "深蓝色",
+      "green": "浅绿色",
+      "deepGreen": "深绿色",
+      "orange": "橙黄色",
+      "yellow": "柠檬黄",
+      "zinc": "锌色灰",
+      "neutral": "中性色",
+      "slate": "石板灰",
+      "gray": "中灰色",
+      "custom": "自定义"
+    }
+  },
+  "header": {
+    "title": "顶栏",
+    "modeStatic": "静止",
+    "modeFixed": "固定",
+    "modeAuto": "自动隐藏和显示",
+    "modeAutoScroll": "滚动隐藏和显示",
+    "visible": "显示顶栏",
+    "menuAlign": "菜单位置",
+    "menuAlignStart": "左侧",
+    "menuAlignEnd": "右侧",
+    "menuAlignCenter": "居中"
+  },
+  "footer": {
+    "title": "底栏",
+    "visible": "显示底栏",
+    "fixed": "固定在底部"
+  },
+  "copyright": {
+    "title": "版权",
+    "enable": "启用版权",
+    "companyName": "公司名",
+    "companySiteLink": "公司主页",
+    "date": "日期",
+    "icp": "ICP 备案号",
+    "icpLink": "ICP 网站链接"
+  },
+  "shortcutKeys": {
+    "title": "快捷键",
+    "global": "全局",
+    "search": "全局搜索",
+    "logout": "退出登录",
+    "preferences": "偏好设置"
+  },
+  "widget": {
+    "title": "小部件",
+    "globalSearch": "启用全局搜索",
+    "fullscreen": "启用全屏",
+    "themeToggle": "启用主题切换",
+    "languageToggle": "启用语言切换",
+    "notification": "启用通知",
+    "sidebarToggle": "启用侧边栏切换",
+    "lockScreen": "启用锁屏",
+    "refresh": "启用刷新"
+  }
+}
diff --git a/admin-ui/vue/packages/locales/src/langs/zh-CN/ui.json b/admin-ui/vue/packages/locales/src/langs/zh-CN/ui.json
new file mode 100644
index 0000000..ef9d101
--- /dev/null
+++ b/admin-ui/vue/packages/locales/src/langs/zh-CN/ui.json
@@ -0,0 +1,112 @@
+{
+  "formRules": {
+    "required": "请输入{0}",
+    "selectRequired": "请选择{0}",
+    "minLength": "{0}至少{1}个字符",
+    "maxLength": "{0}最多{1}个字符",
+    "length": "{0}长度必须为{1}个字符",
+    "alreadyExists": "{0} `{1}` 已存在",
+    "startWith": "{0}必须以 {1} 开头",
+    "invalidURL": "请输入有效的链接"
+  },
+  "actionTitle": {
+    "edit": "修改{0}",
+    "create": "新增{0}",
+    "delete": "删除{0}",
+    "view": "查看{0}"
+  },
+  "actionMessage": {
+    "deleteConfirm": "确定删除 {0} 吗？",
+    "deleting": "正在删除 {0} ...",
+    "deleteSuccess": "{0} 删除成功",
+    "operationSuccess": "操作成功",
+    "operationFailed": "操作失败"
+  },
+  "placeholder": {
+    "input": "请输入",
+    "select": "请选择"
+  },
+  "captcha": {
+    "title": "请完成安全验证",
+    "sliderSuccessText": "验证通过",
+    "sliderDefaultText": "请按住滑块拖动",
+    "sliderRotateDefaultTip": "点击图片可刷新",
+    "sliderTranslateDefaultTip": "点击图片可刷新",
+    "sliderRotateFailTip": "验证失败",
+    "sliderRotateSuccessTip": "验证成功，耗时{0}秒",
+    "sliderTranslateFailTip": "验证失败",
+    "sliderTranslateSuccessTip": "验证成功，耗时{0}秒",
+    "alt": "支持img标签src属性值",
+    "refreshAriaLabel": "刷新验证码",
+    "confirmAriaLabel": "确认选择",
+    "confirm": "确认",
+    "pointAriaLabel": "点击点",
+    "clickInOrder": "请依次点击"
+  },
+  "iconPicker": {
+    "placeholder": "选择一个图标",
+    "search": "搜索图标..."
+  },
+  "jsonViewer": {
+    "copy": "复制",
+    "copied": "已复制"
+  },
+  "fallback": {
+    "pageNotFound": "哎呀！未找到页面",
+    "pageNotFoundDesc": "抱歉，我们无法找到您要找的页面。",
+    "forbidden": "哎呀！访问被拒绝",
+    "forbiddenDesc": "抱歉，您没有权限访问此页面。",
+    "internalError": "哎呀！出错了",
+    "internalErrorDesc": "抱歉，服务器遇到错误。",
+    "offline": "离线页面",
+    "offlineError": "哎呀！网络错误",
+    "offlineErrorDesc": "抱歉，无法连接到互联网，请检查您的网络连接并重试。",
+    "comingSoon": "即将推出",
+    "http": {
+      "requestTimeout": "请求超时，请稍后再试。",
+      "networkError": "网络异常，请检查您的网络连接后重试。",
+      "badRequest": "请求错误。请检查您的输入并重试。",
+      "unauthorized": "登录认证过期，请重新登录后继续。",
+      "forbidden": "禁止访问, 您没有权限访问此资源。",
+      "notFound": "未找到, 请求的资源不存在。",
+      "payloadTooLarge": "上传文件过大，请减小文件或调整上传限制。",
+      "internalServerError": "内部服务器错误，请稍后再试。"
+    }
+  },
+  "widgets": {
+    "document": "文档",
+    "qa": "问题 & 帮助",
+    "setting": "设置",
+    "logoutTip": "是否退出登录？",
+    "viewAll": "查看所有消息",
+    "notifications": "通知",
+    "markAllAsRead": "全部标记为已读",
+    "clearNotifications": "清空",
+    "checkUpdatesTitle": "新版本可用",
+    "checkUpdatesDescription": "点击刷新以获取最新版本",
+    "search": {
+      "title": "搜索",
+      "searchNavigate": "搜索导航菜单",
+      "select": "选择",
+      "navigate": "导航",
+      "close": "关闭",
+      "noResults": "未找到搜索结果",
+      "noRecent": "没有搜索历史",
+      "recent": "搜索历史"
+    },
+    "lockScreen": {
+      "title": "锁定屏幕",
+      "screenButton": "锁定",
+      "password": "密码",
+      "placeholder": "请输入锁屏密码",
+      "unlock": "点击解锁",
+      "errorPasswordTip": "密码错误，请重新输入",
+      "backToLogin": "返回登录",
+      "entry": "进入系统"
+    },
+    "timezone": {
+      "setTimezone": "设置时区",
+      "setSuccess": "时区设置成功"
+    }
+  }
+}
diff --git a/admin-ui/vue/packages/locales/src/typing.ts b/admin-ui/vue/packages/locales/src/typing.ts
new file mode 100644
index 0000000..fdebac2
--- /dev/null
+++ b/admin-ui/vue/packages/locales/src/typing.ts
@@ -0,0 +1,25 @@
+export type SupportedLanguagesType = 'en-US' | 'zh-CN';
+
+export type ImportLocaleFn = () => Promise<{ default: Record<string, string> }>;
+
+export type LoadMessageFn = (
+  lang: SupportedLanguagesType,
+) => Promise<Record<string, string> | undefined>;
+
+export interface LocaleSetupOptions {
+  /**
+   * Default language
+   * @default zh-CN
+   */
+  defaultLocale?: SupportedLanguagesType;
+  /**
+   * Load message function
+   * @param lang
+   * @returns
+   */
+  loadMessages?: LoadMessageFn;
+  /**
+   * Whether to warn when the key is not found
+   */
+  missingWarn?: boolean;
+}
diff --git a/admin-ui/vue/packages/locales/tsconfig.json b/admin-ui/vue/packages/locales/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/locales/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/preferences/package.json b/admin-ui/vue/packages/preferences/package.json
new file mode 100644
index 0000000..e6e52e2
--- /dev/null
+++ b/admin-ui/vue/packages/preferences/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@vben/preferences",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/preferences"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@vben-core/preferences": "workspace:*",
+    "@vben-core/typings": "workspace:*"
+  }
+}
diff --git a/admin-ui/vue/packages/preferences/src/index.ts b/admin-ui/vue/packages/preferences/src/index.ts
new file mode 100644
index 0000000..75fab43
--- /dev/null
+++ b/admin-ui/vue/packages/preferences/src/index.ts
@@ -0,0 +1,17 @@
+import type { Preferences } from '@vben-core/preferences';
+import type { DeepPartial } from '@vben-core/typings';
+
+/**
+ * 如果你想所有的app都使用相同的默认偏好设置，你可以在这里定义
+ * 而不是去修改 @vben-core/preferences 中的默认偏好设置
+ * @param preferences
+ * @returns
+ */
+
+function defineOverridesPreferences(preferences: DeepPartial<Preferences>) {
+  return preferences;
+}
+
+export { defineOverridesPreferences };
+
+export * from '@vben-core/preferences';
diff --git a/admin-ui/vue/packages/preferences/tsconfig.json b/admin-ui/vue/packages/preferences/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/preferences/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/stores/package.json b/admin-ui/vue/packages/stores/package.json
new file mode 100644
index 0000000..72bcf49
--- /dev/null
+++ b/admin-ui/vue/packages/stores/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@vben/stores",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/stores"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@vben-core/preferences": "workspace:*",
+    "@vben-core/shared": "workspace:*",
+    "@vben-core/typings": "workspace:*",
+    "pinia": "catalog:",
+    "pinia-plugin-persistedstate": "catalog:",
+    "secure-ls": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/stores/shim-pinia.d.ts b/admin-ui/vue/packages/stores/shim-pinia.d.ts
new file mode 100644
index 0000000..558d0ba
--- /dev/null
+++ b/admin-ui/vue/packages/stores/shim-pinia.d.ts
@@ -0,0 +1,9 @@
+// https://github.com/vuejs/pinia/issues/2098
+declare module 'pinia' {
+  export function acceptHMRUpdate(
+    initialUseStore: any | StoreDefinition,
+    hot: any,
+  ): (newModule: any) => any;
+}
+
+export { acceptHMRUpdate };
diff --git a/admin-ui/vue/packages/stores/src/index.ts b/admin-ui/vue/packages/stores/src/index.ts
new file mode 100644
index 0000000..41b3662
--- /dev/null
+++ b/admin-ui/vue/packages/stores/src/index.ts
@@ -0,0 +1,3 @@
+export * from './modules';
+export * from './setup';
+export { defineStore, storeToRefs } from 'pinia';
diff --git a/admin-ui/vue/packages/stores/src/modules/access.test.ts b/admin-ui/vue/packages/stores/src/modules/access.test.ts
new file mode 100644
index 0000000..211e256
--- /dev/null
+++ b/admin-ui/vue/packages/stores/src/modules/access.test.ts
@@ -0,0 +1,46 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { useAccessStore } from './access';
+
+describe('useAccessStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('updates accessMenus state', () => {
+    const store = useAccessStore();
+    expect(store.accessMenus).toEqual([]);
+    store.setAccessMenus([{ name: 'Dashboard', path: '/dashboard' }]);
+    expect(store.accessMenus).toEqual([
+      { name: 'Dashboard', path: '/dashboard' },
+    ]);
+  });
+
+  it('updates accessToken state correctly', () => {
+    const store = useAccessStore();
+    expect(store.accessToken).toBeNull(); // 初始状态
+    store.setAccessToken('abc123');
+    expect(store.accessToken).toBe('abc123');
+  });
+
+  it('returns the correct accessToken', () => {
+    const store = useAccessStore();
+    store.setAccessToken('xyz789');
+    expect(store.accessToken).toBe('xyz789');
+  });
+
+  // 测试设置空的访问菜单列表
+  it('handles empty accessMenus correctly', () => {
+    const store = useAccessStore();
+    store.setAccessMenus([]);
+    expect(store.accessMenus).toEqual([]);
+  });
+
+  // 测试设置空的访问路由列表
+  it('handles empty accessRoutes correctly', () => {
+    const store = useAccessStore();
+    store.setAccessRoutes([]);
+    expect(store.accessRoutes).toEqual([]);
+  });
+});
diff --git a/admin-ui/vue/packages/stores/src/modules/access.ts b/admin-ui/vue/packages/stores/src/modules/access.ts
new file mode 100644
index 0000000..b88242e
--- /dev/null
+++ b/admin-ui/vue/packages/stores/src/modules/access.ts
@@ -0,0 +1,129 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+import { acceptHMRUpdate, defineStore } from 'pinia';
+
+type AccessToken = null | string;
+
+interface AccessState {
+  /**
+   * 权限码
+   */
+  accessCodes: string[];
+  /**
+   * 可访问的菜单列表
+   */
+  accessMenus: MenuRecordRaw[];
+  /**
+   * 可访问的路由列表
+   */
+  accessRoutes: RouteRecordRaw[];
+  /**
+   * 登录 accessToken
+   */
+  accessToken: AccessToken;
+  /**
+   * 是否已经检查过权限
+   */
+  isAccessChecked: boolean;
+  /**
+   * 是否锁屏状态
+   */
+  isLockScreen: boolean;
+  /**
+   * 锁屏密码
+   */
+  lockScreenPassword?: string;
+  /**
+   * 登录是否过期
+   */
+  loginExpired: boolean;
+  /**
+   * 登录 accessToken
+   */
+  refreshToken: AccessToken;
+}
+
+/**
+ * @zh_CN 访问权限相关
+ */
+export const useAccessStore = defineStore('core-access', {
+  actions: {
+    getMenuByPath(path: string) {
+      function findMenu(
+        menus: MenuRecordRaw[],
+        path: string,
+      ): MenuRecordRaw | undefined {
+        for (const menu of menus) {
+          if (menu.path === path) {
+            return menu;
+          }
+          if (menu.children) {
+            const matched = findMenu(menu.children, path);
+            if (matched) {
+              return matched;
+            }
+          }
+        }
+      }
+      return findMenu(this.accessMenus, path);
+    },
+    lockScreen(password: string) {
+      this.isLockScreen = true;
+      this.lockScreenPassword = password;
+    },
+    setAccessCodes(codes: string[]) {
+      this.accessCodes = codes;
+    },
+    setAccessMenus(menus: MenuRecordRaw[]) {
+      this.accessMenus = menus;
+    },
+    setAccessRoutes(routes: RouteRecordRaw[]) {
+      this.accessRoutes = routes;
+    },
+    setAccessToken(token: AccessToken) {
+      this.accessToken = token;
+    },
+    setIsAccessChecked(isAccessChecked: boolean) {
+      this.isAccessChecked = isAccessChecked;
+    },
+    setLoginExpired(loginExpired: boolean) {
+      this.loginExpired = loginExpired;
+    },
+    setRefreshToken(token: AccessToken) {
+      this.refreshToken = token;
+    },
+    unlockScreen() {
+      this.isLockScreen = false;
+      this.lockScreenPassword = undefined;
+    },
+  },
+  persist: {
+    // 持久化
+    pick: [
+      'accessToken',
+      'refreshToken',
+      'accessCodes',
+      'isLockScreen',
+      'lockScreenPassword',
+    ],
+  },
+  state: (): AccessState => ({
+    accessCodes: [],
+    accessMenus: [],
+    accessRoutes: [],
+    accessToken: null,
+    isAccessChecked: false,
+    isLockScreen: false,
+    lockScreenPassword: undefined,
+    loginExpired: false,
+    refreshToken: null,
+  }),
+});
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useAccessStore, hot));
+}
diff --git a/admin-ui/vue/packages/stores/src/modules/index.ts b/admin-ui/vue/packages/stores/src/modules/index.ts
new file mode 100644
index 0000000..bb9a66f
--- /dev/null
+++ b/admin-ui/vue/packages/stores/src/modules/index.ts
@@ -0,0 +1,4 @@
+export * from './access';
+export * from './tabbar';
+export * from './timezone';
+export * from './user';
diff --git a/admin-ui/vue/packages/stores/src/modules/tabbar.test.ts b/admin-ui/vue/packages/stores/src/modules/tabbar.test.ts
new file mode 100644
index 0000000..2dd6a6f
--- /dev/null
+++ b/admin-ui/vue/packages/stores/src/modules/tabbar.test.ts
@@ -0,0 +1,335 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+import { startProgress, stopProgress } from '@vben-core/shared/utils';
+
+import { createPinia, setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('@vben-core/shared/utils', async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import('@vben-core/shared/utils')>();
+  return { ...actual, startProgress: vi.fn(), stopProgress: vi.fn() };
+});
+
+import { useTabbarStore } from './tabbar';
+
+describe('useAccessStore', () => {
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [],
+  });
+  router.push = vi.fn();
+  router.replace = vi.fn();
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    vi.clearAllMocks();
+  });
+
+  it('adds a new tab', () => {
+    const store = useTabbarStore();
+    const tab: any = {
+      fullPath: '/home',
+      meta: {},
+      key: '/home',
+      name: 'Home',
+      path: '/home',
+    };
+    const addNewTab = store.addTab(tab);
+    expect(store.tabs.length).toBe(1);
+    expect(store.tabs[0]).toEqual(addNewTab);
+  });
+
+  it('adds a new tab if it does not exist', () => {
+    const store = useTabbarStore();
+    const newTab: any = {
+      fullPath: '/new',
+      meta: {},
+      name: 'New',
+      path: '/new',
+    };
+    const addNewTab = store.addTab(newTab);
+    expect(store.tabs).toContainEqual(addNewTab);
+  });
+
+  it('updates an existing tab instead of adding a new one', () => {
+    const store = useTabbarStore();
+    const initialTab: any = {
+      fullPath: '/existing',
+      meta: {
+        fullPathKey: false,
+      },
+      name: 'Existing',
+      path: '/existing',
+      query: {},
+    };
+    store.addTab(initialTab);
+    const updatedTab = { ...initialTab, query: { id: '1' } };
+    store.addTab(updatedTab);
+    expect(store.tabs.length).toBe(1);
+    expect(store.tabs[0]?.query).toEqual({ id: '1' });
+  });
+
+  it('reuses a tab when pageKey is stable and other query values change', () => {
+    const store = useTabbarStore();
+    const firstTab: any = {
+      fullPath: '/diagnosis?pageKey=/diagnosis&queryCode=card-1',
+      meta: {},
+      name: 'Diagnosis',
+      path: '/diagnosis',
+      query: { pageKey: '/diagnosis', queryCode: 'card-1' },
+    };
+    const secondTab: any = {
+      ...firstTab,
+      fullPath: '/diagnosis?pageKey=/diagnosis&queryCode=card-2',
+      query: { pageKey: '/diagnosis', queryCode: 'card-2' },
+    };
+
+    store.addTab(firstTab);
+    store.addTab(secondTab);
+
+    expect(store.tabs).toHaveLength(1);
+    expect(store.tabs[0]?.query).toEqual({
+      pageKey: '/diagnosis',
+      queryCode: 'card-2',
+    });
+  });
+
+  it('closes all tabs', async () => {
+    const store = useTabbarStore();
+    store.addTab({
+      fullPath: '/home',
+      meta: {},
+      name: 'Home',
+      path: '/home',
+    } as any);
+    router.replace = vi.fn();
+
+    await store.closeAllTabs(router);
+
+    expect(store.tabs.length).toBe(1);
+  });
+
+  it('closes a non-affix tab', () => {
+    const store = useTabbarStore();
+    const tab: any = {
+      fullPath: '/closable',
+      meta: {},
+      name: 'Closable',
+      path: '/closable',
+    };
+    store.tabs.push(tab);
+    store._close(tab);
+    expect(store.tabs.length).toBe(0);
+  });
+
+  it('does not close an affix tab', () => {
+    const store = useTabbarStore();
+    const affixTab: any = {
+      fullPath: '/affix',
+      meta: { affixTab: true },
+      name: 'Affix',
+      path: '/affix',
+    };
+    store.tabs.push(affixTab);
+    store._close(affixTab);
+    expect(store.tabs.length).toBe(1); // Affix tab should not be closed
+  });
+
+  it('returns all cache tabs', () => {
+    const store = useTabbarStore();
+    store.cachedTabs.add('Home');
+    store.cachedTabs.add('About');
+    expect(store.getCachedTabs).toEqual(['Home', 'About']);
+  });
+
+  it('returns all tabs, including affix tabs', () => {
+    const store = useTabbarStore();
+    const normalTab: any = {
+      fullPath: '/normal',
+      meta: {},
+      name: 'Normal',
+      path: '/normal',
+    };
+    const affixTab: any = {
+      fullPath: '/affix',
+      meta: { affixTab: true },
+      name: 'Affix',
+      path: '/affix',
+    };
+    store.tabs.push(normalTab);
+    store.affixTabs.push(affixTab);
+    expect(store.getTabs).toContainEqual(normalTab);
+    expect(store.affixTabs).toContainEqual(affixTab);
+  });
+
+  it('navigates to a specific tab', async () => {
+    const store = useTabbarStore();
+    const tab: any = { meta: {}, name: 'Dashboard', path: '/dashboard' };
+
+    await store._goToTab(tab, router);
+
+    expect(router.replace).toHaveBeenCalledWith({
+      params: {},
+      path: '/dashboard',
+      query: {},
+    });
+  });
+
+  it('closes multiple tabs by paths', async () => {
+    const store = useTabbarStore();
+    store.addTab({
+      fullPath: '/home',
+      meta: {},
+      name: 'Home',
+      path: '/home',
+    } as any);
+    store.addTab({
+      fullPath: '/about',
+      meta: {},
+      name: 'About',
+      path: '/about',
+    } as any);
+    store.addTab({
+      fullPath: '/contact',
+      meta: {},
+      name: 'Contact',
+      path: '/contact',
+    } as any);
+
+    await store._bulkCloseByKeys(['/home', '/contact']);
+
+    expect(store.tabs).toHaveLength(1);
+    expect(store.tabs[0]?.name).toBe('About');
+  });
+
+  it('closes all tabs to the left of the specified tab', async () => {
+    const store = useTabbarStore();
+    store.addTab({
+      fullPath: '/home',
+      meta: {},
+      name: 'Home',
+      path: '/home',
+    } as any);
+    store.addTab({
+      fullPath: '/about',
+      meta: {},
+      name: 'About',
+      path: '/about',
+    } as any);
+    const targetTab: any = {
+      fullPath: '/contact',
+      meta: {},
+      name: 'Contact',
+      path: '/contact',
+    };
+    const addTargetTab = store.addTab(targetTab);
+    await store.closeLeftTabs(addTargetTab);
+
+    expect(store.tabs).toHaveLength(1);
+    expect(store.tabs[0]?.name).toBe('Contact');
+  });
+
+  it('closes all tabs except the specified tab', async () => {
+    const store = useTabbarStore();
+    store.addTab({
+      fullPath: '/home',
+      meta: {},
+      name: 'Home',
+      path: '/home',
+    } as any);
+    const targetTab: any = {
+      fullPath: '/about',
+      meta: {},
+      name: 'About',
+      path: '/about',
+    };
+    const addTargetTab = store.addTab(targetTab);
+    store.addTab({
+      fullPath: '/contact',
+      meta: {},
+      name: 'Contact',
+      path: '/contact',
+    } as any);
+
+    await store.closeOtherTabs(addTargetTab);
+
+    expect(store.tabs).toHaveLength(1);
+    expect(store.tabs[0]?.name).toBe('About');
+  });
+
+  it('closes all tabs to the right of the specified tab', async () => {
+    const store = useTabbarStore();
+    const targetTab: any = {
+      fullPath: '/home',
+      meta: {},
+      name: 'Home',
+      path: '/home',
+    };
+    const addTargetTab = store.addTab(targetTab);
+    store.addTab({
+      fullPath: '/about',
+      meta: {},
+      name: 'About',
+      path: '/about',
+    } as any);
+    store.addTab({
+      fullPath: '/contact',
+      meta: {},
+      name: 'Contact',
+      path: '/contact',
+    } as any);
+
+    await store.closeRightTabs(addTargetTab);
+
+    expect(store.tabs).toHaveLength(1);
+    expect(store.tabs[0]?.name).toBe('Home');
+  });
+
+  it('closes the tab with the specified key', async () => {
+    const store = useTabbarStore();
+    const keyToClose = '/about';
+    store.addTab({
+      fullPath: '/home',
+      meta: {},
+      name: 'Home',
+      path: '/home',
+    } as any);
+    store.addTab({
+      fullPath: keyToClose,
+      meta: {},
+      name: 'About',
+      path: '/about',
+    } as any);
+    store.addTab({
+      fullPath: '/contact',
+      meta: {},
+      name: 'Contact',
+      path: '/contact',
+    } as any);
+
+    await store.closeTabByKey(keyToClose, router);
+
+    expect(store.tabs).toHaveLength(2);
+    expect(
+      store.tabs.find((tab) => tab.fullPath === keyToClose),
+    ).toBeUndefined();
+  });
+
+  it('refreshes the current tab', async () => {
+    const store = useTabbarStore();
+    const currentTab: any = {
+      fullPath: '/dashboard',
+      meta: { name: 'Dashboard' },
+      name: 'Dashboard',
+      path: '/dashboard',
+    };
+    router.currentRoute.value = currentTab;
+
+    await store.refresh(router);
+
+    expect(store.excludeCachedTabs.has('Dashboard')).toBe(false);
+    expect(store.renderRouteView).toBe(true);
+    expect(startProgress).toHaveBeenCalledTimes(1);
+    expect(stopProgress).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/admin-ui/vue/packages/stores/src/modules/tabbar.ts b/admin-ui/vue/packages/stores/src/modules/tabbar.ts
new file mode 100644
index 0000000..b1b4060
--- /dev/null
+++ b/admin-ui/vue/packages/stores/src/modules/tabbar.ts
@@ -0,0 +1,658 @@
+import type { ComputedRef } from 'vue';
+import type {
+  RouteLocationNormalized,
+  Router,
+  RouteRecordNormalized,
+} from 'vue-router';
+
+import type { TabDefinition } from '@vben-core/typings';
+
+import { toRaw } from 'vue';
+
+import { preferences } from '@vben-core/preferences';
+import {
+  openRouteInNewWindow,
+  startProgress,
+  stopProgress,
+} from '@vben-core/shared/utils';
+
+import { acceptHMRUpdate, defineStore } from 'pinia';
+
+interface TabbarState {
+  /**
+   * @zh_CN 当前打开的标签页列表缓存
+   */
+  cachedTabs: Set<string>;
+  /**
+   * @zh_CN 拖拽结束的索引
+   */
+  dragEndIndex: number;
+  /**
+   * @zh_CN 需要排除缓存的标签页
+   */
+  excludeCachedTabs: Set<string>;
+  /**
+   * @zh_CN 标签右键菜单列表
+   */
+  menuList: string[];
+  /**
+   * @zh_CN 是否刷新
+   */
+  renderRouteView?: boolean;
+  /**
+   * @zh_CN 当前打开的标签页列表
+   */
+  tabs: TabDefinition[];
+  /**
+   * @zh_CN 更新时间，用于一些更新场景，使用watch深度监听的话，会损耗性能
+   */
+  updateTime?: number;
+}
+
+/**
+ * @zh_CN 访问权限相关
+ */
+export const useTabbarStore = defineStore('core-tabbar', {
+  actions: {
+    /**
+     * Close tabs in bulk
+     */
+    async _bulkCloseByKeys(keys: string[]) {
+      const keySet = new Set(keys);
+      this.tabs = this.tabs.filter(
+        (item) => !keySet.has(getTabKeyFromTab(item)),
+      );
+
+      await this.updateCacheTabs();
+    },
+    /**
+     * @zh_CN 关闭标签页
+     * @param tab
+     */
+    _close(tab: TabDefinition) {
+      if (isAffixTab(tab)) {
+        return;
+      }
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
+      index !== -1 && this.tabs.splice(index, 1);
+    },
+    /**
+     * @zh_CN 跳转到默认标签页
+     */
+    async _goToDefaultTab(router: Router) {
+      if (this.getTabs.length <= 0) {
+        return;
+      }
+      const firstTab = this.getTabs[0];
+      if (firstTab) {
+        await this._goToTab(firstTab, router);
+      }
+    },
+    /**
+     * @zh_CN 跳转到标签页
+     * @param tab
+     * @param router
+     */
+    async _goToTab(tab: TabDefinition, router: Router) {
+      const { params, path, query } = tab;
+      const toParams = {
+        params: params || {},
+        path,
+        query: query || {},
+      };
+      await router.replace(toParams);
+    },
+    /**
+     * @zh_CN 添加标签页
+     * @param routeTab
+     */
+    addTab(routeTab: TabDefinition): TabDefinition {
+      let tab = cloneTab(routeTab);
+      if (!tab.key) {
+        tab.key = getTabKey(routeTab);
+      }
+      if (!isTabShown(tab)) {
+        return tab;
+      }
+
+      const tabIndex = this.tabs.findIndex((item) => {
+        return equalTab(item, tab);
+      });
+
+      if (tabIndex === -1) {
+        const maxCount = preferences.tabbar.maxCount;
+        // 获取动态路由打开数，超过 0 即代表需要控制打开数
+        const maxNumOfOpenTab = (routeTab?.meta?.maxNumOfOpenTab ??
+          -1) as number;
+        // 如果动态路由层级大于 0 了，那么就要限制该路由的打开数限制了
+        // 获取到已经打开的动态路由数, 判断是否大于某一个值
+        if (
+          maxNumOfOpenTab > 0 &&
+          this.tabs.filter((tab) => tab.name === routeTab.name).length >=
+            maxNumOfOpenTab
+        ) {
+          // 关闭第一个
+          const index = this.tabs.findIndex(
+            (item) => item.name === routeTab.name,
+          );
+          index !== -1 && this.tabs.splice(index, 1);
+        } else if (maxCount > 0 && this.tabs.length >= maxCount) {
+          // 关闭第一个
+          const index = this.tabs.findIndex(
+            (item) =>
+              !Reflect.has(item.meta, 'affixTab') || !item.meta.affixTab,
+          );
+          index !== -1 && this.tabs.splice(index, 1);
+        }
+        this.tabs.push(tab);
+      } else {
+        // 页面已经存在，不重复添加选项卡，只更新选项卡参数
+        const currentTab = toRaw(this.tabs)[tabIndex];
+        const mergedTab = {
+          ...currentTab,
+          ...tab,
+          meta: { ...currentTab?.meta, ...tab.meta },
+        };
+        if (currentTab) {
+          const curMeta = currentTab.meta;
+          if (Reflect.has(curMeta, 'affixTab')) {
+            mergedTab.meta.affixTab = curMeta.affixTab;
+          }
+          if (Reflect.has(curMeta, 'newTabTitle')) {
+            mergedTab.meta.newTabTitle = curMeta.newTabTitle;
+          }
+        }
+        tab = mergedTab;
+        this.tabs.splice(tabIndex, 1, mergedTab);
+      }
+      this.updateCacheTabs();
+      return tab;
+    },
+    /**
+     * @zh_CN 关闭所有标签页
+     */
+    async closeAllTabs(router: Router) {
+      const newTabs = this.tabs.filter((tab) => isAffixTab(tab));
+      this.tabs = newTabs.length > 0 ? newTabs : [...this.tabs].splice(0, 1);
+      await this._goToDefaultTab(router);
+      this.updateCacheTabs();
+    },
+    /**
+     * @zh_CN 关闭左侧标签页
+     * @param tab
+     */
+    async closeLeftTabs(tab: TabDefinition) {
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
+
+      if (index < 1) {
+        return;
+      }
+
+      const leftTabs = this.tabs.slice(0, index);
+      const keys: string[] = [];
+
+      for (const item of leftTabs) {
+        if (!isAffixTab(item)) {
+          keys.push(item.key as string);
+        }
+      }
+      await this._bulkCloseByKeys(keys);
+    },
+    /**
+     * @zh_CN 关闭其他标签页
+     * @param tab
+     */
+    async closeOtherTabs(tab: TabDefinition) {
+      const closeKeys = this.tabs.map((item) => getTabKeyFromTab(item));
+
+      const keys: string[] = [];
+
+      for (const key of closeKeys) {
+        if (key !== getTabKeyFromTab(tab)) {
+          const closeTab = this.tabs.find(
+            (item) => getTabKeyFromTab(item) === key,
+          );
+          if (!closeTab) {
+            continue;
+          }
+          if (!isAffixTab(closeTab)) {
+            keys.push(closeTab.key as string);
+          }
+        }
+      }
+      await this._bulkCloseByKeys(keys);
+    },
+    /**
+     * @zh_CN 关闭右侧标签页
+     * @param tab
+     */
+    async closeRightTabs(tab: TabDefinition) {
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
+
+      if (index !== -1 && index < this.tabs.length - 1) {
+        const rightTabs = this.tabs.slice(index + 1);
+
+        const keys: string[] = [];
+        for (const item of rightTabs) {
+          if (!isAffixTab(item)) {
+            keys.push(item.key as string);
+          }
+        }
+        await this._bulkCloseByKeys(keys);
+      }
+    },
+
+    /**
+     * @zh_CN 关闭标签页
+     * @param tab
+     * @param router
+     */
+    async closeTab(tab: TabDefinition, router: Router) {
+      const { currentRoute } = router;
+      // 关闭不是激活选项卡
+      if (getTabKey(currentRoute.value) !== getTabKeyFromTab(tab)) {
+        this._close(tab);
+        this.updateCacheTabs();
+        return;
+      }
+      const index = this.getTabs.findIndex(
+        (item) => getTabKeyFromTab(item) === getTabKey(currentRoute.value),
+      );
+
+      const before = this.getTabs[index - 1];
+      const after = this.getTabs[index + 1];
+
+      // 下一个tab存在，跳转到下一个
+      if (after) {
+        this._close(tab);
+        await this._goToTab(after, router);
+        // 上一个tab存在，跳转到上一个
+      } else if (before) {
+        this._close(tab);
+        await this._goToTab(before, router);
+      } else {
+        console.error('Failed to close the tab; only one tab remains open.');
+      }
+    },
+
+    /**
+     * @zh_CN 通过key关闭标签页
+     * @param key
+     * @param router
+     */
+    async closeTabByKey(key: string, router: Router) {
+      const originKey = decodeURIComponent(key);
+      const index = this.tabs.findIndex(
+        (item) => getTabKeyFromTab(item) === originKey,
+      );
+      if (index === -1) {
+        return;
+      }
+
+      const tab = this.tabs[index];
+      if (tab) {
+        await this.closeTab(tab, router);
+      }
+    },
+
+    /**
+     * 根据tab的key获取tab
+     * @param key
+     */
+    getTabByKey(key: string) {
+      return this.getTabs.find(
+        (item) => getTabKeyFromTab(item) === key,
+      ) as TabDefinition;
+    },
+    /**
+     * @zh_CN 新窗口打开标签页
+     * @param tab
+     */
+    async openTabInNewWindow(tab: TabDefinition) {
+      openRouteInNewWindow(tab.fullPath || tab.path);
+    },
+
+    /**
+     * @zh_CN 固定标签页
+     * @param tab
+     */
+    async pinTab(tab: TabDefinition) {
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
+      if (index === -1) {
+        return;
+      }
+      const oldTab = this.tabs[index];
+      tab.meta.affixTab = true;
+      tab.meta.title = oldTab?.meta?.title as string;
+      // this.addTab(tab);
+      this.tabs.splice(index, 1, tab);
+      // 过滤固定tabs，后面更改affixTabOrder的值的话可能会有问题，目前行464排序affixTabs没有设置值
+      const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
+      // 获得固定tabs的index
+      const newIndex = affixTabs.findIndex((item) => equalTab(item, tab));
+      // 交换位置重新排序
+      await this.sortTabs(index, newIndex);
+    },
+
+    /**
+     * 刷新标签页
+     */
+    async refresh(router: Router | string) {
+      // 如果是Router路由，那么就根据当前路由刷新
+      // 如果是string字符串，为路由名称，则定向刷新指定标签页，不能是当前路由名称，否则不会刷新
+      if (typeof router === 'string') {
+        return await this.refreshByName(router);
+      }
+
+      const { currentRoute } = router;
+      const { name } = currentRoute.value;
+
+      this.excludeCachedTabs.add(name as string);
+      this.renderRouteView = false;
+      startProgress();
+
+      await new Promise((resolve) => setTimeout(resolve, 200));
+
+      this.excludeCachedTabs.delete(name as string);
+      this.renderRouteView = true;
+      stopProgress();
+    },
+
+    /**
+     * 根据路由名称刷新指定标签页
+     */
+    async refreshByName(name: string) {
+      this.excludeCachedTabs.add(name);
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      this.excludeCachedTabs.delete(name);
+    },
+
+    /**
+     * @zh_CN 重置标签页标题
+     */
+    async resetTabTitle(tab: TabDefinition) {
+      if (tab?.meta?.newTabTitle) {
+        return;
+      }
+      const findTab = this.tabs.find((item) => equalTab(item, tab));
+      if (findTab) {
+        findTab.meta.newTabTitle = undefined;
+        await this.updateCacheTabs();
+      }
+    },
+
+    /**
+     * 设置固定标签页
+     * @param tabs
+     */
+    setAffixTabs(tabs: RouteRecordNormalized[]) {
+      for (const tab of tabs) {
+        tab.meta.affixTab = true;
+        this.addTab(routeToTab(tab));
+      }
+    },
+
+    /**
+     * @zh_CN 更新菜单列表
+     * @param list
+     */
+    setMenuList(list: string[]) {
+      this.menuList = list;
+    },
+
+    /**
+     * @zh_CN 设置标签页标题
+     *
+     * @zh_CN 支持设置静态标题字符串或计算属性作为动态标题
+     * @zh_CN 当标题为计算属性时,标题会随计算属性值变化而自动更新
+     * @zh_CN 适用于需要根据状态或多语言动态更新标题的场景
+     *
+     * @param {TabDefinition} tab - 标签页对象
+     * @param {ComputedRef<string> | string} title - 标题内容,支持静态字符串或计算属性
+     *
+     * @example
+     * // 设置静态标题
+     * setTabTitle(tab, '新标签页');
+     *
+     * @example
+     * // 设置动态标题
+     * setTabTitle(tab, computed(() => t('common.dashboard')));
+     */
+    async setTabTitle(tab: TabDefinition, title: ComputedRef<string> | string) {
+      const findTab = this.tabs.find((item) => equalTab(item, tab));
+
+      if (findTab) {
+        findTab.meta.newTabTitle = title;
+
+        await this.updateCacheTabs();
+      }
+    },
+    setUpdateTime() {
+      this.updateTime = Date.now();
+    },
+    /**
+     * @zh_CN 设置标签页顺序
+     * @param oldIndex
+     * @param newIndex
+     */
+    async sortTabs(oldIndex: number, newIndex: number) {
+      const currentTab = this.tabs[oldIndex];
+      if (!currentTab) {
+        return;
+      }
+      this.tabs.splice(oldIndex, 1);
+      this.tabs.splice(newIndex, 0, currentTab);
+      this.dragEndIndex = this.dragEndIndex + 1;
+    },
+
+    /**
+     * @zh_CN 切换固定标签页
+     * @param tab
+     */
+    async toggleTabPin(tab: TabDefinition) {
+      const affixTab = tab?.meta?.affixTab ?? false;
+
+      await (affixTab ? this.unpinTab(tab) : this.pinTab(tab));
+    },
+
+    /**
+     * @zh_CN 取消固定标签页
+     * @param tab
+     */
+    async unpinTab(tab: TabDefinition) {
+      const index = this.tabs.findIndex((item) => equalTab(item, tab));
+      if (index === -1) {
+        return;
+      }
+      const oldTab = this.tabs[index];
+      tab.meta.affixTab = false;
+      tab.meta.title = oldTab?.meta?.title as string;
+      // this.addTab(tab);
+      this.tabs.splice(index, 1, tab);
+      // 过滤固定tabs，后面更改affixTabOrder的值的话可能会有问题，目前行464排序affixTabs没有设置值
+      const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
+      // 获得固定tabs的index,使用固定tabs的下一个位置也就是活动tabs的第一个位置
+      const newIndex = affixTabs.length;
+      // 交换位置重新排序
+      await this.sortTabs(index, newIndex);
+    },
+    /**
+     * 根据当前打开的选项卡更新缓存
+     */
+    async updateCacheTabs() {
+      const cacheMap = new Set<string>();
+
+      for (const tab of this.tabs) {
+        // 跳过不需要持久化的标签页
+        const keepAlive = tab.meta?.keepAlive;
+        if (!keepAlive) {
+          continue;
+        }
+        (tab.matched || []).forEach((t, i) => {
+          if (i > 0) {
+            cacheMap.add(t.name as string);
+          }
+        });
+
+        const name = tab.name as string;
+        cacheMap.add(name);
+      }
+      this.cachedTabs = cacheMap;
+    },
+  },
+  getters: {
+    affixTabs(): TabDefinition[] {
+      const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
+
+      return affixTabs.toSorted((a, b) => {
+        const orderA = (a.meta?.affixTabOrder ?? 0) as number;
+        const orderB = (b.meta?.affixTabOrder ?? 0) as number;
+        return orderA - orderB;
+      });
+    },
+    getCachedTabs(): string[] {
+      return [...this.cachedTabs];
+    },
+    getExcludeCachedTabs(): string[] {
+      return [...this.excludeCachedTabs];
+    },
+    getMenuList(): string[] {
+      return this.menuList;
+    },
+    getTabs(): TabDefinition[] {
+      const normalTabs = this.tabs.filter((tab) => !isAffixTab(tab));
+      return [...this.affixTabs, ...normalTabs].filter(Boolean);
+    },
+  },
+  persist: [
+    // tabs不需要保存在localStorage
+    {
+      pick: ['tabs'],
+      storage: sessionStorage,
+    },
+  ],
+  state: (): TabbarState => ({
+    cachedTabs: new Set(),
+    dragEndIndex: 0,
+    excludeCachedTabs: new Set(),
+    menuList: [
+      'close',
+      'affix',
+      'maximize',
+      'reload',
+      'open-in-new-window',
+      'close-left',
+      'close-right',
+      'close-other',
+      'close-all',
+    ],
+    renderRouteView: true,
+    tabs: [],
+    updateTime: Date.now(),
+  }),
+});
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useTabbarStore, hot));
+}
+
+/**
+ * @zh_CN 克隆路由,防止路由被修改
+ * @param route
+ */
+function cloneTab(route: TabDefinition): TabDefinition {
+  if (!route) {
+    return route;
+  }
+  const { matched, meta, ...opt } = route;
+  return {
+    ...opt,
+    matched: (matched
+      ? matched.map((item) => ({
+          meta: item.meta,
+          name: item.name,
+          path: item.path,
+        }))
+      : undefined) as RouteRecordNormalized[],
+    meta: {
+      ...meta,
+      newTabTitle: meta.newTabTitle,
+    },
+  };
+}
+
+/**
+ * @zh_CN 是否是固定标签页
+ * @param tab
+ */
+function isAffixTab(tab: TabDefinition) {
+  return tab?.meta?.affixTab ?? false;
+}
+
+/**
+ * @zh_CN 是否显示标签
+ * @param tab
+ */
+function isTabShown(tab: TabDefinition) {
+  const matched = tab?.matched ?? [];
+  return !tab.meta.hideInTab && matched.every((item) => !item.meta.hideInTab);
+}
+
+/**
+ * 从route获取tab页的key
+ * @param tab
+ */
+function getTabKey(tab: RouteLocationNormalized | RouteRecordNormalized) {
+  const {
+    fullPath,
+    path,
+    meta: { fullPathKey } = {},
+    query = {},
+  } = tab as RouteLocationNormalized;
+  // pageKey可能是数组（查询参数重复时可能出现）
+  const pageKey = Array.isArray(query.pageKey)
+    ? query.pageKey[0]
+    : query.pageKey;
+  let rawKey;
+  if (pageKey) {
+    rawKey = pageKey;
+  } else {
+    rawKey = fullPathKey === false ? path : (fullPath ?? path);
+  }
+  try {
+    return decodeURIComponent(rawKey);
+  } catch {
+    return rawKey;
+  }
+}
+
+/**
+ * 从tab获取tab页的key
+ * 如果tab没有key,那么就从route获取key
+ * @param tab
+ */
+function getTabKeyFromTab(tab: TabDefinition): string {
+  return tab.key ?? getTabKey(tab);
+}
+
+/**
+ * 比较两个tab是否相等
+ * @param a
+ * @param b
+ */
+function equalTab(a: TabDefinition, b: TabDefinition) {
+  return getTabKeyFromTab(a) === getTabKeyFromTab(b);
+}
+
+function routeToTab(route: RouteRecordNormalized) {
+  return {
+    meta: route.meta,
+    name: route.name,
+    path: route.path,
+    key: getTabKey(route),
+  } as TabDefinition;
+}
+
+export { getTabKey };
diff --git a/admin-ui/vue/packages/stores/src/modules/timezone.ts b/admin-ui/vue/packages/stores/src/modules/timezone.ts
new file mode 100644
index 0000000..24180c6
--- /dev/null
+++ b/admin-ui/vue/packages/stores/src/modules/timezone.ts
@@ -0,0 +1,132 @@
+import { ref, unref } from 'vue';
+
+import { DEFAULT_TIME_ZONE_OPTIONS } from '@vben-core/preferences';
+import {
+  getCurrentTimezone,
+  setCurrentTimezone,
+} from '@vben-core/shared/utils';
+
+import { acceptHMRUpdate, defineStore } from 'pinia';
+
+interface TimezoneHandler {
+  getTimezone?: () => Promise<null | string | undefined>;
+  getTimezoneOptions?: () => Promise<
+    {
+      label: string;
+      value: string;
+    }[]
+  >;
+  setTimezone?: (timezone: string) => Promise<void>;
+}
+
+/**
+ * 默认时区处理模块
+ * 时区存储基于pinia存储插件
+ */
+const getDefaultTimezoneHandler = (): TimezoneHandler => {
+  return {
+    getTimezoneOptions: () => {
+      return Promise.resolve(
+        DEFAULT_TIME_ZONE_OPTIONS.map((item) => {
+          return {
+            label: item.label,
+            value: item.timezone,
+          };
+        }),
+      );
+    },
+  };
+};
+
+/**
+ * 自定义时区处理模块
+ */
+let customTimezoneHandler: null | Partial<TimezoneHandler> = null;
+const setTimezoneHandler = (handler: Partial<TimezoneHandler>) => {
+  customTimezoneHandler = handler;
+};
+
+/**
+ * 获取时区处理模块
+ */
+const getTimezoneHandler = () => {
+  return {
+    ...getDefaultTimezoneHandler(),
+    ...customTimezoneHandler,
+  };
+};
+
+/**
+ * timezone支持模块
+ */
+const useTimezoneStore = defineStore(
+  'core-timezone',
+  () => {
+    const timezoneRef = ref(getCurrentTimezone());
+
+    /**
+     * 初始化时区
+     * Initialize the timezone
+     */
+    async function initTimezone() {
+      const timezoneHandler = getTimezoneHandler();
+      const timezone = await timezoneHandler.getTimezone?.();
+      if (timezone) {
+        timezoneRef.value = timezone;
+      }
+      // 设置dayjs默认时区
+      setCurrentTimezone(unref(timezoneRef));
+    }
+
+    /**
+     * 设置时区
+     * Set the timezone
+     * @param timezone 时区字符串
+     */
+    async function setTimezone(timezone: string) {
+      const timezoneHandler = getTimezoneHandler();
+      await timezoneHandler.setTimezone?.(timezone);
+      timezoneRef.value = timezone;
+      // 设置dayjs默认时区
+      setCurrentTimezone(timezone);
+    }
+
+    /**
+     * 获取时区选项
+     * Get the timezone options
+     */
+    async function getTimezoneOptions() {
+      const timezoneHandler = getTimezoneHandler();
+      return (await timezoneHandler.getTimezoneOptions?.()) || [];
+    }
+
+    initTimezone().catch((error) => {
+      console.error('Failed to initialize timezone during store setup:', error);
+    });
+
+    function $reset() {
+      timezoneRef.value = getCurrentTimezone();
+    }
+
+    return {
+      timezone: timezoneRef,
+      setTimezone,
+      getTimezoneOptions,
+      $reset,
+    };
+  },
+  {
+    persist: {
+      // 持久化
+      pick: ['timezone'],
+    },
+  },
+);
+
+export { setTimezoneHandler, useTimezoneStore };
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useTimezoneStore, hot));
+}
diff --git a/admin-ui/vue/packages/stores/src/modules/user.test.ts b/admin-ui/vue/packages/stores/src/modules/user.test.ts
new file mode 100644
index 0000000..3d8a22c
--- /dev/null
+++ b/admin-ui/vue/packages/stores/src/modules/user.test.ts
@@ -0,0 +1,37 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { useUserStore } from './user';
+
+describe('useUserStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('returns correct userInfo', () => {
+    const store = useUserStore();
+    const userInfo: any = { name: 'Jane Doe', roles: [{ value: 'user' }] };
+    store.setUserInfo(userInfo);
+    expect(store.userInfo).toEqual(userInfo);
+  });
+
+  // 测试重置用户信息时的行为
+  it('clears userInfo and userRoles when setting null userInfo', () => {
+    const store = useUserStore();
+    store.setUserInfo({
+      roles: [{ roleName: 'User', value: 'user' }],
+    } as any);
+    expect(store.userInfo).not.toBeNull();
+    expect(store.userRoles.length).toBeGreaterThan(0);
+
+    store.setUserInfo(null as any);
+    expect(store.userInfo).toBeNull();
+    expect(store.userRoles).toEqual([]);
+  });
+
+  // 测试在没有用户角色时返回空数组
+  it('returns an empty array for userRoles if not set', () => {
+    const store = useUserStore();
+    expect(store.userRoles).toEqual([]);
+  });
+});
diff --git a/admin-ui/vue/packages/stores/src/modules/user.ts b/admin-ui/vue/packages/stores/src/modules/user.ts
new file mode 100644
index 0000000..9d37433
--- /dev/null
+++ b/admin-ui/vue/packages/stores/src/modules/user.ts
@@ -0,0 +1,64 @@
+import { acceptHMRUpdate, defineStore } from 'pinia';
+
+interface BasicUserInfo {
+  [key: string]: any;
+  /**
+   * 头像
+   */
+  avatar: string;
+  /**
+   * 用户昵称
+   */
+  realName: string;
+  /**
+   * 用户角色
+   */
+  roles?: string[];
+  /**
+   * 用户id
+   */
+  userId: string;
+  /**
+   * 用户名
+   */
+  username: string;
+}
+
+interface AccessState {
+  /**
+   * 用户信息
+   */
+  userInfo: BasicUserInfo | null;
+  /**
+   * 用户角色
+   */
+  userRoles: string[];
+}
+
+/**
+ * @zh_CN 用户信息相关
+ */
+export const useUserStore = defineStore('core-user', {
+  actions: {
+    setUserInfo(userInfo: BasicUserInfo | null) {
+      // 设置用户信息
+      this.userInfo = userInfo;
+      // 设置角色信息
+      const roles = userInfo?.roles ?? [];
+      this.setUserRoles(roles);
+    },
+    setUserRoles(roles: string[]) {
+      this.userRoles = roles;
+    },
+  },
+  state: (): AccessState => ({
+    userInfo: null,
+    userRoles: [],
+  }),
+});
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useUserStore, hot));
+}
diff --git a/admin-ui/vue/packages/stores/src/setup.ts b/admin-ui/vue/packages/stores/src/setup.ts
new file mode 100644
index 0000000..b18c27e
--- /dev/null
+++ b/admin-ui/vue/packages/stores/src/setup.ts
@@ -0,0 +1,60 @@
+import type { Pinia } from 'pinia';
+
+import type { App } from 'vue';
+
+import { createPinia } from 'pinia';
+import SecureLS from 'secure-ls';
+
+let pinia: Pinia;
+
+export interface InitStoreOptions {
+  /**
+   * @zh_CN 应用名,由于 @vben/stores 是公用的，后续可能有多个app，为了防止多个app缓存冲突，可在这里配置应用名,应用名将被用于持久化的前缀
+   */
+  namespace: string;
+}
+
+/**
+ * @zh_CN 初始化pinia
+ */
+export async function initStores(app: App, options: InitStoreOptions) {
+  const { createPersistedState } = await import('pinia-plugin-persistedstate');
+  pinia = createPinia();
+  const { namespace } = options;
+  const ls = new SecureLS({
+    encodingType: 'aes',
+    encryptionSecret: import.meta.env.VITE_APP_STORE_SECURE_KEY,
+    isCompression: true,
+    // @ts-ignore secure-ls does not have a type definition for this
+    metaKey: `${namespace}-secure-meta`,
+  });
+  pinia.use(
+    createPersistedState({
+      // key $appName-$store.id
+      key: (storeKey) => `${namespace}-${storeKey}`,
+      storage: import.meta.env.DEV
+        ? localStorage
+        : {
+            getItem(key) {
+              return ls.get(key);
+            },
+            setItem(key, value) {
+              ls.set(key, value);
+            },
+          },
+    }),
+  );
+  app.use(pinia);
+  return pinia;
+}
+
+export function resetAllStores() {
+  if (!pinia) {
+    console.error('Pinia is not installed');
+    return;
+  }
+  const allStores = (pinia as any)._s;
+  for (const [_key, store] of allStores) {
+    store.$reset();
+  }
+}
diff --git a/admin-ui/vue/packages/stores/tsconfig.json b/admin-ui/vue/packages/stores/tsconfig.json
new file mode 100644
index 0000000..3057820
--- /dev/null
+++ b/admin-ui/vue/packages/stores/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src", "shim-pinia.d.ts"]
+}
diff --git a/admin-ui/vue/packages/styles/README.md b/admin-ui/vue/packages/styles/README.md
new file mode 100644
index 0000000..4826446
--- /dev/null
+++ b/admin-ui/vue/packages/styles/README.md
@@ -0,0 +1,19 @@
+# @vben/styles
+
+用于多个 `app` 公用的样式文件，继承了 `@vben-core/design` 的所有能力。业务上有通用的样式文件可以放在这里。
+
+## 用法
+
+### 添加依赖
+
+```bash
+# 进入目标应用目录，例如 apps/xxxx-app
+# cd apps/xxxx-app
+pnpm add @vben/styles
+```
+
+### 使用
+
+```ts
+import '@vben/styles';
+```
diff --git a/admin-ui/vue/packages/styles/package.json b/admin-ui/vue/packages/styles/package.json
new file mode 100644
index 0000000..0716a5e
--- /dev/null
+++ b/admin-ui/vue/packages/styles/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@vben/styles",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/styles"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./antd": {
+      "default": "./src/antd/index.css"
+    },
+    "./ele": {
+      "default": "./src/ele/index.css"
+    },
+    "./naive": {
+      "default": "./src/naive/index.css"
+    },
+    "./global": {
+      "default": "./src/global/index.scss"
+    }
+  },
+  "dependencies": {
+    "@vben-core/design": "workspace:*"
+  }
+}
diff --git a/admin-ui/vue/packages/styles/src/antd/index.css b/admin-ui/vue/packages/styles/src/antd/index.css
new file mode 100644
index 0000000..4dec637
--- /dev/null
+++ b/admin-ui/vue/packages/styles/src/antd/index.css
@@ -0,0 +1,75 @@
+/* ant-design-vue 组件库的一些样式重置 */
+
+.ant-app {
+  width: 100%;
+  height: 100%;
+  overscroll-behavior: none;
+  color: inherit;
+}
+
+.ant-btn {
+  .anticon {
+    display: inline-flex;
+  }
+
+  /* * 修复按钮添加图标时的位置问题 */
+  > svg {
+    display: inline-block;
+  }
+
+  > svg + span {
+    margin-inline-start: 6px;
+  }
+}
+
+.ant-tag {
+  > svg {
+    display: inline-block;
+  }
+
+  > svg + span {
+    margin-inline-start: 4px;
+  }
+}
+
+.ant-message-notice-content,
+.ant-notification-notice {
+  @apply dark:border-border/60 dark:border;
+}
+
+.form-valid-error {
+  /** select 选择器的样式 */
+
+  .ant-select:not(.valid-success) .ant-select-selector:not(.valid-success) {
+    border-color: hsl(var(--destructive)) !important;
+  }
+
+  .ant-select-focused .ant-select-selector {
+    box-shadow: 0 0 0 2px rgb(255 38 5 / 6%) !important;
+  }
+
+  /** 数字输入框样式 */
+  .ant-input-number-focused {
+    box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+  }
+
+  /** 密码输入框样式 */
+  .ant-input-affix-wrapper:hover {
+    border-color: hsl(var(--destructive));
+    box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+  }
+
+  .ant-input:not(.valid-success) {
+    border-color: hsl(var(--destructive)) !important;
+  }
+}
+
+/** 区间选择器下面来回切换时的样式 */
+.ant-app .form-valid-error .ant-picker-active-bar {
+  background-color: hsl(var(--destructive));
+}
+
+/** 时间选择器的样式 */
+.ant-app .form-valid-error .ant-picker-focused {
+  box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
+}
diff --git a/admin-ui/vue/packages/styles/src/ele/index.css b/admin-ui/vue/packages/styles/src/ele/index.css
new file mode 100644
index 0000000..4ee8f7b
--- /dev/null
+++ b/admin-ui/vue/packages/styles/src/ele/index.css
@@ -0,0 +1,44 @@
+.el-card {
+  --el-card-border-radius: var(--radius) !important;
+}
+
+.form-valid-error {
+  /** select 选择器的样式 */
+  .el-select .el-select__wrapper {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  /** input 选择器的样式 */
+  .el-input .el-input__wrapper {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+
+  /** radio和checkbox 选择器的样式 */
+  .el-radio .el-radio__inner,
+  .el-checkbox .el-checkbox__inner {
+    border: 1px solid var(--el-color-danger);
+  }
+
+  .el-checkbox-button .el-checkbox-button__inner,
+  .el-radio-button .el-radio-button__inner {
+    border: 1px solid var(--el-color-danger);
+  }
+
+  .el-checkbox-button:first-child .el-checkbox-button__inner,
+  .el-radio-button:first-child .el-radio-button__inner {
+    border-left: 1px solid var(--el-color-danger);
+  }
+
+  .el-checkbox-button:not(:first-child) .el-checkbox-button__inner,
+  .el-radio-button:not(:first-child) .el-radio-button__inner {
+    border-left: none;
+  }
+
+  .el-textarea .el-textarea__inner {
+    border: 1px solid var(--el-color-danger);
+  }
+}
+
+html .el-loading-mask {
+  z-index: 1000;
+}
diff --git a/admin-ui/vue/packages/styles/src/global/index.scss b/admin-ui/vue/packages/styles/src/global/index.scss
new file mode 100644
index 0000000..c7af9bb
--- /dev/null
+++ b/admin-ui/vue/packages/styles/src/global/index.scss
@@ -0,0 +1 @@
+@use '@vben-core/design/bem' as *;
diff --git a/admin-ui/vue/packages/styles/src/index.ts b/admin-ui/vue/packages/styles/src/index.ts
new file mode 100644
index 0000000..b375456
--- /dev/null
+++ b/admin-ui/vue/packages/styles/src/index.ts
@@ -0,0 +1 @@
+import '@vben-core/design';
diff --git a/admin-ui/vue/packages/styles/src/naive/index.css b/admin-ui/vue/packages/styles/src/naive/index.css
new file mode 100644
index 0000000..a775116
--- /dev/null
+++ b/admin-ui/vue/packages/styles/src/naive/index.css
@@ -0,0 +1,20 @@
+.form-valid-error {
+  .n-base-selection__state-border,
+  .n-input__state-border,
+  .n-radio-group__splitor {
+    border: var(--n-border-error);
+  }
+
+  .n-radio-group .n-radio-button,
+  .n-radio-group .n-radio-group__splitor {
+    --n-button-border-color: rgb(255 56 96);
+  }
+
+  .n-radio__dot {
+    --n-box-shadow: inset 0 0 0 1px rgb(255 56 96);
+  }
+
+  .n-checkbox-box__border {
+    --n-border: 1px solid rgb(255 56 96);
+  }
+}
diff --git a/admin-ui/vue/packages/styles/tsconfig.json b/admin-ui/vue/packages/styles/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/styles/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/types/README.md b/admin-ui/vue/packages/types/README.md
new file mode 100644
index 0000000..f796f31
--- /dev/null
+++ b/admin-ui/vue/packages/types/README.md
@@ -0,0 +1,20 @@
+# @vben/types
+
+用于多个 `app` 公用的工具类型，继承了 `@vben-core/typings` 的所有能力。业务上有通用的类型定义可以放在这里。
+
+## 用法
+
+### 添加依赖
+
+```bash
+# 进入目标应用目录，例如 apps/xxxx-app
+# cd apps/xxxx-app
+pnpm add @vben/types
+```
+
+### 使用
+
+```ts
+// 推荐加上 type
+import type { SelectOption } from '@vben/types';
+```
diff --git a/admin-ui/vue/packages/types/global.d.ts b/admin-ui/vue/packages/types/global.d.ts
new file mode 100644
index 0000000..d615b4c
--- /dev/null
+++ b/admin-ui/vue/packages/types/global.d.ts
@@ -0,0 +1,32 @@
+import type { RouteMeta as IRouteMeta } from '@vben-core/typings';
+
+import 'vue-router';
+
+declare module 'vue-router' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface RouteMeta extends IRouteMeta {}
+}
+
+export interface VbenAdminProAppConfigRaw {
+  VITE_GLOB_API_URL: string;
+  VITE_GLOB_CLIENT_ID: string; // 客户端ID
+}
+
+interface AuthConfig {
+  dingding?: {
+    clientId: string;
+    corpId: string;
+  };
+}
+
+export interface ApplicationConfig {
+  apiURL: string;
+  auth: AuthConfig;
+  clientId: string; // 客户端ID
+}
+
+declare global {
+  interface Window {
+    _VBEN_ADMIN_PRO_APP_CONF_: VbenAdminProAppConfigRaw;
+  }
+}
diff --git a/admin-ui/vue/packages/types/package.json b/admin-ui/vue/packages/types/package.json
new file mode 100644
index 0000000..07dbca0
--- /dev/null
+++ b/admin-ui/vue/packages/types/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@vben/types",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/types"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./global": {
+      "types": "./global.d.ts"
+    }
+  },
+  "dependencies": {
+    "@vben-core/typings": "workspace:*",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/types/src/index.ts b/admin-ui/vue/packages/types/src/index.ts
new file mode 100644
index 0000000..1e266c4
--- /dev/null
+++ b/admin-ui/vue/packages/types/src/index.ts
@@ -0,0 +1,2 @@
+export type * from './user';
+export type * from '@vben-core/typings';
diff --git a/admin-ui/vue/packages/types/src/user.ts b/admin-ui/vue/packages/types/src/user.ts
new file mode 100644
index 0000000..c5167c0
--- /dev/null
+++ b/admin-ui/vue/packages/types/src/user.ts
@@ -0,0 +1,30 @@
+import type { BasicUserInfo } from '@vben-core/typings';
+
+/** 用户信息 */
+interface UserInfo extends BasicUserInfo {
+  /**
+   * 用户描述
+   */
+  desc: string;
+  /**
+   * 首页地址
+   */
+  homePath: string;
+
+  /**
+   * accessToken
+   */
+  token: string;
+
+  /**
+   * 手机号（为空表示未绑定，登录后引导绑定）
+   */
+  phonenumber?: string;
+
+  /**
+   * 当前密码是否仍为系统初始密码（true 时引导首次登录修改密码）
+   */
+  isInitPassword?: boolean;
+}
+
+export type { UserInfo };
diff --git a/admin-ui/vue/packages/types/tsconfig.json b/admin-ui/vue/packages/types/tsconfig.json
new file mode 100644
index 0000000..ce1a891
--- /dev/null
+++ b/admin-ui/vue/packages/types/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/packages/utils/README.md b/admin-ui/vue/packages/utils/README.md
new file mode 100644
index 0000000..f06068a
--- /dev/null
+++ b/admin-ui/vue/packages/utils/README.md
@@ -0,0 +1,19 @@
+# @vben/utils
+
+用于多个 `app` 公用的工具包，继承了 `@vben-core/shared/utils` 的所有能力。业务上有通用的工具函数可以放在这里。
+
+## 用法
+
+### 添加依赖
+
+```bash
+# 进入目标应用目录，例如 apps/xxxx-app
+# cd apps/xxxx-app
+pnpm add @vben/utils
+```
+
+### 使用
+
+```ts
+import { isString } from '@vben/utils';
+```
diff --git a/admin-ui/vue/packages/utils/package.json b/admin-ui/vue/packages/utils/package.json
new file mode 100644
index 0000000..811f64c
--- /dev/null
+++ b/admin-ui/vue/packages/utils/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@vben/utils",
+  "version": "5.5.9",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/utils"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@vben-core/shared": "workspace:*",
+    "@vben-core/typings": "workspace:*",
+    "file-type": "^19.5.0",
+    "vue-router": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/packages/utils/src/helpers/__tests__/find-menu-by-path.test.ts b/admin-ui/vue/packages/utils/src/helpers/__tests__/find-menu-by-path.test.ts
new file mode 100644
index 0000000..fc0d76b
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/__tests__/find-menu-by-path.test.ts
@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest';
+
+import { findMenuByPath, findRootMenuByPath } from '../find-menu-by-path';
+
+// 示例菜单数据
+const menus: any[] = [
+  { path: '/', children: [] },
+  { path: '/about', children: [] },
+  {
+    path: '/contact',
+    children: [
+      { path: '/contact/email', children: [] },
+      { path: '/contact/phone', children: [] },
+    ],
+  },
+  {
+    path: '/services',
+    children: [
+      { path: '/services/design', children: [] },
+      {
+        path: '/services/development',
+        children: [{ path: '/services/development/web', children: [] }],
+      },
+    ],
+  },
+];
+
+describe('menu Finder Tests', () => {
+  it('finds a top-level menu', () => {
+    const menu = findMenuByPath(menus, '/about');
+    expect(menu).toBeDefined();
+    expect(menu?.path).toBe('/about');
+  });
+
+  it('finds a nested menu', () => {
+    const menu = findMenuByPath(menus, '/services/development/web');
+    expect(menu).toBeDefined();
+    expect(menu?.path).toBe('/services/development/web');
+  });
+
+  it('returns null for a non-existent path', () => {
+    const menu = findMenuByPath(menus, '/non-existent');
+    expect(menu).toBeNull();
+  });
+
+  it('handles empty menus list', () => {
+    const menu = findMenuByPath([], '/about');
+    expect(menu).toBeNull();
+  });
+
+  it('handles menu items without children', () => {
+    const menu = findMenuByPath(
+      [{ path: '/only', children: undefined }] as any[],
+      '/only',
+    );
+    expect(menu).toBeDefined();
+    expect(menu?.path).toBe('/only');
+  });
+
+  it('finds root menu by path', () => {
+    const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
+      menus,
+      '/services/development/web',
+    );
+
+    expect(findMenu).toBeDefined();
+    expect(rootMenu).toBeUndefined();
+    expect(rootMenuPath).toBeUndefined();
+    expect(findMenu?.path).toBe('/services/development/web');
+  });
+
+  it('returns null for undefined or empty path', () => {
+    const menuUndefinedPath = findMenuByPath(menus);
+    const menuEmptyPath = findMenuByPath(menus, '');
+    expect(menuUndefinedPath).toBeNull();
+    expect(menuEmptyPath).toBeNull();
+  });
+
+  it('checks for root menu when path does not exist', () => {
+    const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
+      menus,
+      '/non-existent',
+    );
+    expect(findMenu).toBeNull();
+    expect(rootMenu).toBeUndefined();
+    expect(rootMenuPath).toBeUndefined();
+  });
+});
diff --git a/admin-ui/vue/packages/utils/src/helpers/__tests__/generate-menus.test.ts b/admin-ui/vue/packages/utils/src/helpers/__tests__/generate-menus.test.ts
new file mode 100644
index 0000000..9d98b5a
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/__tests__/generate-menus.test.ts
@@ -0,0 +1,236 @@
+import type { Router, RouteRecordRaw } from 'vue-router';
+
+import { createRouter, createWebHistory } from 'vue-router';
+
+import { describe, expect, it, vi } from 'vitest';
+
+import { generateMenus } from '../generate-menus';
+
+// Nested route setup to test child inclusion and hideChildrenInMenu functionality
+
+describe('generateMenus', () => {
+  // 模拟路由数据
+  const mockRoutes = [
+    {
+      meta: { icon: 'home-icon', title: '首页' },
+      name: 'home',
+      path: '/home',
+    },
+    {
+      meta: { hideChildrenInMenu: true, icon: 'about-icon', title: '关于' },
+      name: 'about',
+      path: '/about',
+      children: [
+        {
+          path: 'team',
+          name: 'team',
+          meta: { icon: 'team-icon', title: '团队' },
+        },
+      ],
+    },
+  ] as RouteRecordRaw[];
+
+  // 模拟 Vue 路由器实例
+  const mockRouter = {
+    getRoutes: vi.fn(() => [
+      { name: 'home', path: '/home' },
+      { name: 'about', path: '/about' },
+      { name: 'team', path: '/about/team' },
+    ]),
+  };
+
+  it('the correct menu list should be generated according to the route', async () => {
+    const expectedMenus = [
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: 'home-icon',
+        name: '首页',
+        order: undefined,
+        parent: undefined,
+        parents: undefined,
+        path: '/home',
+        show: true,
+        children: [],
+      },
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: 'about-icon',
+        name: '关于',
+        order: undefined,
+        parent: undefined,
+        parents: undefined,
+        path: '/about',
+        show: true,
+        children: [],
+      },
+    ];
+
+    const menus = await generateMenus(mockRoutes, mockRouter as any);
+    expect(menus).toEqual(expectedMenus);
+  });
+
+  it('includes additional meta properties in menu items', async () => {
+    const mockRoutesWithMeta = [
+      {
+        meta: { icon: 'user-icon', order: 1, title: 'Profile' },
+        name: 'profile',
+        path: '/profile',
+      },
+    ] as RouteRecordRaw[];
+
+    const menus = await generateMenus(mockRoutesWithMeta, mockRouter as any);
+    expect(menus).toEqual([
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: 'user-icon',
+        name: 'Profile',
+        order: 1,
+        parent: undefined,
+        parents: undefined,
+        path: '/profile',
+        show: true,
+        children: [],
+      },
+    ]);
+  });
+
+  it('handles dynamic route parameters correctly', async () => {
+    const mockRoutesWithParams = [
+      {
+        meta: { icon: 'details-icon', title: 'User Details' },
+        name: 'userDetails',
+        path: '/users/:userId',
+      },
+    ] as RouteRecordRaw[];
+
+    const menus = await generateMenus(mockRoutesWithParams, mockRouter as any);
+    expect(menus).toEqual([
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: 'details-icon',
+        name: 'User Details',
+        order: undefined,
+        parent: undefined,
+        parents: undefined,
+        path: '/users/:userId',
+        show: true,
+        children: [],
+      },
+    ]);
+  });
+
+  it('processes routes with redirects correctly', async () => {
+    const mockRoutesWithRedirect = [
+      {
+        name: 'redirectedRoute',
+        path: '/old-path',
+        redirect: '/new-path',
+      },
+      {
+        meta: { icon: 'path-icon', title: 'New Path' },
+        name: 'newPath',
+        path: '/new-path',
+      },
+    ] as RouteRecordRaw[];
+
+    const menus = await generateMenus(
+      mockRoutesWithRedirect,
+      mockRouter as any,
+    );
+    expect(menus).toEqual([
+      // Assuming your generateMenus function excludes redirect routes from the menu
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: undefined,
+        name: 'redirectedRoute',
+        order: undefined,
+        parent: undefined,
+        parents: undefined,
+        path: '/old-path',
+        show: true,
+        children: [],
+      },
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: 'path-icon',
+        name: 'New Path',
+        order: undefined,
+        parent: undefined,
+        parents: undefined,
+        path: '/new-path',
+        show: true,
+        children: [],
+      },
+    ]);
+  });
+
+  const routes: any = [
+    {
+      meta: { order: 2, title: 'Home' },
+      name: 'home',
+      path: '/',
+    },
+    {
+      meta: { order: 1, title: 'About' },
+      name: 'about',
+      path: '/about',
+    },
+  ];
+
+  const router: Router = createRouter({
+    history: createWebHistory(),
+    routes,
+  });
+
+  it('should generate menu list with correct order', async () => {
+    const menus = await generateMenus(routes, router);
+    const expectedMenus = [
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: undefined,
+        name: 'About',
+        order: 1,
+        parent: undefined,
+        parents: undefined,
+        path: '/about',
+        show: true,
+        children: [],
+      },
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: undefined,
+        name: 'Home',
+        order: 2,
+        parent: undefined,
+        parents: undefined,
+        path: '/',
+        show: true,
+        children: [],
+      },
+    ];
+
+    expect(menus).toEqual(expectedMenus);
+  });
+
+  it('should handle empty routes', async () => {
+    const emptyRoutes: any[] = [];
+    const menus = await generateMenus(emptyRoutes, router);
+    expect(menus).toEqual([]);
+  });
+});
diff --git a/admin-ui/vue/packages/utils/src/helpers/__tests__/generate-routes-backend.test.ts b/admin-ui/vue/packages/utils/src/helpers/__tests__/generate-routes-backend.test.ts
new file mode 100644
index 0000000..45a79dc
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/__tests__/generate-routes-backend.test.ts
@@ -0,0 +1,125 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { generateRoutesByBackend } from '../generate-routes-backend';
+
+// 布局组件与页面组件必须是不同对象：实现里用「引用是否相同」判断是不是布局
+const NullComponent = { render: () => null };
+const NullLayout = { render: () => null };
+const NullPage = { render: () => null };
+
+const layoutMap = {
+  BasicLayout: NullLayout,
+  IFrameView: NullLayout,
+  LAYOUT: NullLayout,
+};
+const pageMap = { '/iotlcm/tDashboard/index.vue': NullPage };
+
+/**
+ * 后端菜单里可能存在指向已下线页面的菜单（前端无对应视图）。
+ * 这类路由不应注册、也不应出现在菜单里，否则点进去就是一整页 404。
+ */
+describe('generateRoutesByBackend 丢弃无对应视图的路由', () => {
+  it('丢弃解析不到视图的路由，并保留同级正常路由', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      const routes = await generateRoutesByBackend({
+        fetchMenuListAsync: async () => [
+          {
+            children: [
+              {
+                component: 'common/tDivisionCode/index',
+                name: 'menu_137',
+                path: 'index',
+              },
+              {
+                component: 'iotlcm/tDashboard/index',
+                name: 'menu_ok',
+                path: 'dashboard',
+              },
+            ],
+            component: 'LAYOUT',
+            name: 'Root',
+            path: '/',
+          },
+        ],
+        layoutMap,
+        pageMap,
+      } as never);
+
+      expect(routes).toHaveLength(1);
+      const children = routes[0]?.children ?? [];
+      expect(children.map((c) => c.name)).toEqual(['menu_ok']);
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining('route component is invalid, route skipped'),
+        expect.objectContaining({ name: 'menu_137' }),
+      );
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it('子路由被丢弃后，父目录若变空也一并去掉', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      const routes = await generateRoutesByBackend({
+        fetchMenuListAsync: async () => [
+          {
+            children: [
+              {
+                component: 'common/tDivisionCode/index',
+                name: 'menu_137',
+                path: 'index',
+              },
+            ],
+            component: 'LAYOUT',
+            name: 'EmptyDir',
+            path: '/empty',
+          },
+          {
+            component: 'iotlcm/tDashboard/index',
+            name: 'menu_ok',
+            path: '/ok',
+          },
+        ],
+        layoutMap,
+        pageMap,
+      } as never);
+
+      expect(routes.map((r) => r.name)).toEqual(['menu_ok']);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it('外链菜单（无组件但有 link）不会被丢弃', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      const routes = await generateRoutesByBackend({
+        fetchMenuListAsync: async () => [
+          {
+            children: [
+              {
+                meta: {
+                  link: 'https://example.com/docs',
+                  openInNewWindow: true,
+                },
+                name: 'menu_link',
+                path: 'https://example.com/docs',
+              },
+            ],
+            component: 'LAYOUT',
+            name: 'LinkDir',
+            path: '/links',
+          },
+        ],
+        layoutMap,
+        pageMap,
+      } as never);
+
+      expect(routes).toHaveLength(1);
+      expect(routes[0]?.children?.[0]?.name).toBe('menu_link');
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});
diff --git a/admin-ui/vue/packages/utils/src/helpers/__tests__/generate-routes-frontend.test.ts b/admin-ui/vue/packages/utils/src/helpers/__tests__/generate-routes-frontend.test.ts
new file mode 100644
index 0000000..8e01853
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/__tests__/generate-routes-frontend.test.ts
@@ -0,0 +1,105 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { describe, expect, it } from 'vitest';
+
+import {
+  generateRoutesByFrontend,
+  hasAuthority,
+} from '../generate-routes-frontend';
+
+// Mock 路由数据
+const mockRoutes = [
+  {
+    meta: {
+      authority: ['admin', 'user'],
+      hideInMenu: false,
+    },
+    path: '/dashboard',
+    children: [
+      {
+        path: '/dashboard/overview',
+        meta: { authority: ['admin'], hideInMenu: false },
+      },
+      {
+        path: '/dashboard/stats',
+        meta: { authority: ['user'], hideInMenu: true },
+      },
+    ],
+  },
+  {
+    meta: { authority: ['admin'], hideInMenu: false },
+    path: '/settings',
+  },
+  {
+    meta: { hideInMenu: false },
+    path: '/profile',
+  },
+] as RouteRecordRaw[];
+
+describe('hasAuthority', () => {
+  it('should return true if there is no authority defined', () => {
+    expect(hasAuthority(mockRoutes[2], ['admin'])).toBe(true);
+  });
+
+  it('should return true if the user has the required authority', () => {
+    expect(hasAuthority(mockRoutes[0], ['admin'])).toBe(true);
+  });
+
+  it('should return false if the user does not have the required authority', () => {
+    expect(hasAuthority(mockRoutes[1], ['user'])).toBe(false);
+  });
+});
+
+describe('generateRoutesByFrontend', () => {
+  it('should handle routes without children', async () => {
+    const generatedRoutes = await generateRoutesByFrontend(mockRoutes, [
+      'user',
+    ]);
+    expect(generatedRoutes).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          path: '/profile', // This route has no children and should be included
+        }),
+      ]),
+    );
+  });
+
+  it('should handle empty roles array', async () => {
+    const generatedRoutes = await generateRoutesByFrontend(mockRoutes, []);
+    expect(generatedRoutes).toEqual(
+      expect.arrayContaining([
+        // Only routes without authority should be included
+        expect.objectContaining({
+          path: '/profile',
+        }),
+      ]),
+    );
+    expect(generatedRoutes).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          path: '/dashboard',
+        }),
+        expect.objectContaining({
+          path: '/settings',
+        }),
+      ]),
+    );
+  });
+
+  it('should handle missing meta fields', async () => {
+    const routesWithMissingMeta = [
+      { path: '/path1' }, // No meta
+      { meta: {}, path: '/path2' }, // Empty meta
+      { meta: { authority: ['admin'] }, path: '/path3' }, // Only authority
+    ];
+    const generatedRoutes = await generateRoutesByFrontend(
+      routesWithMissingMeta as RouteRecordRaw[],
+      ['admin'],
+    );
+    expect(generatedRoutes).toEqual([
+      { path: '/path1' },
+      { meta: {}, path: '/path2' },
+      { meta: { authority: ['admin'] }, path: '/path3' },
+    ]);
+  });
+});
diff --git a/admin-ui/vue/packages/utils/src/helpers/__tests__/merge-route-modules.test.ts b/admin-ui/vue/packages/utils/src/helpers/__tests__/merge-route-modules.test.ts
new file mode 100644
index 0000000..3615556
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/__tests__/merge-route-modules.test.ts
@@ -0,0 +1,68 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import type { RouteModuleType } from '../merge-route-modules';
+
+import { describe, expect, it } from 'vitest';
+
+import { mergeRouteModules } from '../merge-route-modules';
+
+describe('mergeRouteModules', () => {
+  it('should merge route modules correctly', () => {
+    const routeModules: Record<string, RouteModuleType> = {
+      './dynamic-routes/about.ts': {
+        default: [
+          {
+            component: () => Promise.resolve({ template: '<div>About</div>' }),
+            name: 'About',
+            path: '/about',
+          },
+        ],
+      },
+      './dynamic-routes/home.ts': {
+        default: [
+          {
+            component: () => Promise.resolve({ template: '<div>Home</div>' }),
+            name: 'Home',
+            path: '/',
+          },
+        ],
+      },
+    };
+
+    const expectedRoutes: RouteRecordRaw[] = [
+      {
+        component: expect.any(Function),
+        name: 'About',
+        path: '/about',
+      },
+      {
+        component: expect.any(Function),
+        name: 'Home',
+        path: '/',
+      },
+    ];
+
+    const mergedRoutes = mergeRouteModules(routeModules);
+    expect(mergedRoutes).toEqual(expectedRoutes);
+  });
+
+  it('should handle empty modules', () => {
+    const routeModules: Record<string, RouteModuleType> = {};
+    const expectedRoutes: RouteRecordRaw[] = [];
+
+    const mergedRoutes = mergeRouteModules(routeModules);
+    expect(mergedRoutes).toEqual(expectedRoutes);
+  });
+
+  it('should handle modules with no default export', () => {
+    const routeModules: Record<string, RouteModuleType> = {
+      './dynamic-routes/empty.ts': {
+        default: [],
+      },
+    };
+    const expectedRoutes: RouteRecordRaw[] = [];
+
+    const mergedRoutes = mergeRouteModules(routeModules);
+    expect(mergedRoutes).toEqual(expectedRoutes);
+  });
+});
diff --git a/admin-ui/vue/packages/utils/src/helpers/file.ts b/admin-ui/vue/packages/utils/src/helpers/file.ts
new file mode 100644
index 0000000..62bb7e5
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/file.ts
@@ -0,0 +1,40 @@
+// 将base64转换为blob
+export function dataURLtoBlob(base64Buf: string): Blob {
+    const arr = base64Buf.split(',');
+    const typeItem = arr[0];
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const mime = typeItem!.match(/:(.*?);/)![1];
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const bstr = window.atob(arr[1]!);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        u8arr[n] = bstr.codePointAt(n)!;
+    }
+    return new Blob([u8arr], { type: mime });
+}
+// // 将url转换为base64
+// export function urlToBase64(url: string, mineType?: string): Promise<string> {
+//     return new Promise((resolve, reject) => {
+//         let canvas = document.createElement('CANVAS') as HTMLCanvasElement | null;
+//         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+//         const ctx = canvas!.getContext('2d');
+
+//         const img = new Image();
+//         img.crossOrigin = '';
+//         img.addEventListener('load', () => {
+//         if (!canvas || !ctx) {
+//             // eslint-disable-next-line prefer-promise-reject-errors
+//             return reject();
+//         }
+//         canvas.height = img.height;
+//         canvas.width = img.width;
+//         ctx.drawImage(img, 0, 0);
+//         const dataURL = canvas.toDataURL(mineType || 'image/png');
+//         canvas = null;
+//         resolve(dataURL);
+//         });
+//         img.src = url;
+//     });
+// }
\ No newline at end of file
diff --git a/admin-ui/vue/packages/utils/src/helpers/find-menu-by-path.ts b/admin-ui/vue/packages/utils/src/helpers/find-menu-by-path.ts
new file mode 100644
index 0000000..747cc7f
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/find-menu-by-path.ts
@@ -0,0 +1,37 @@
+import type { MenuRecordRaw } from '@vben-core/typings';
+
+function findMenuByPath(
+  list: MenuRecordRaw[],
+  path?: string,
+): MenuRecordRaw | null {
+  for (const menu of list) {
+    if (menu.path === path) {
+      return menu;
+    }
+    const findMenu = menu.children && findMenuByPath(menu.children, path);
+    if (findMenu) {
+      return findMenu;
+    }
+  }
+  return null;
+}
+
+/**
+ * 查找根菜单
+ * @param menus
+ * @param path
+ */
+function findRootMenuByPath(menus: MenuRecordRaw[], path?: string, level = 0) {
+  const findMenu = findMenuByPath(menus, path);
+  const rootMenuPath = findMenu?.parents?.[level];
+  const rootMenu = rootMenuPath
+    ? menus.find((item) => item.path === rootMenuPath)
+    : undefined;
+  return {
+    findMenu,
+    rootMenu,
+    rootMenuPath,
+  };
+}
+
+export { findMenuByPath, findRootMenuByPath };
diff --git a/admin-ui/vue/packages/utils/src/helpers/generate-menus.ts b/admin-ui/vue/packages/utils/src/helpers/generate-menus.ts
new file mode 100644
index 0000000..f13d599
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/generate-menus.ts
@@ -0,0 +1,90 @@
+import type { Router, RouteRecordRaw } from 'vue-router';
+
+import type {
+  ExRouteRecordRaw,
+  MenuRecordRaw,
+  RouteMeta,
+} from '@vben-core/typings';
+
+import { filterTree, mapTree, sortTree } from '@vben-core/shared/utils';
+
+/**
+ * 根据 routes 生成菜单列表
+ * @param routes - 路由配置列表
+ * @param router - Vue Router 实例
+ * @returns 生成的菜单列表
+ */
+function generateMenus(
+  routes: RouteRecordRaw[],
+  router: Router,
+): MenuRecordRaw[] {
+  // 将路由列表转换为一个以 name 为键的对象映射
+  const finalRoutesMap: { [key: string]: string } = Object.fromEntries(
+    router.getRoutes().map(({ name, path }) => [name, path]),
+  );
+
+  let menus = mapTree<ExRouteRecordRaw, MenuRecordRaw>(routes, (route) => {
+    // 获取最终的路由路径
+    const path = finalRoutesMap[route.name as string] ?? route.path ?? '';
+
+    const {
+      meta = {} as RouteMeta,
+      name: routeName,
+      redirect,
+      children = [],
+    } = route;
+    const {
+      activeIcon,
+      badge,
+      badgeType,
+      badgeVariants,
+      hideChildrenInMenu = false,
+      icon,
+      link,
+      order,
+      title = '',
+    } = meta;
+
+    // 确保菜单名称不为空
+    const name = (title || routeName || '') as string;
+
+    // 处理子菜单
+    const resultChildren = hideChildrenInMenu
+      ? []
+      : ((children as MenuRecordRaw[]) ?? []);
+
+    // 设置子菜单的父子关系
+    if (resultChildren.length > 0) {
+      resultChildren.forEach((child) => {
+        child.parents = [...(route.parents ?? []), path];
+        child.parent = path;
+      });
+    }
+
+    // 确定最终路径
+    const resultPath = hideChildrenInMenu ? redirect || path : link || path;
+
+    return {
+      activeIcon,
+      badge,
+      badgeType,
+      badgeVariants,
+      icon,
+      name,
+      order,
+      parent: route.parent,
+      parents: route.parents,
+      path: resultPath,
+      show: !meta.hideInMenu,
+      children: resultChildren,
+    };
+  });
+
+  // 对菜单进行排序，避免order=0时被替换成999的问题
+  menus = sortTree(menus, (a, b) => (a?.order ?? 999) - (b?.order ?? 999));
+
+  // 过滤掉隐藏的菜单项
+  return filterTree(menus, (menu) => !!menu.show);
+}
+
+export { generateMenus };
diff --git a/admin-ui/vue/packages/utils/src/helpers/generate-routes-backend.ts b/admin-ui/vue/packages/utils/src/helpers/generate-routes-backend.ts
new file mode 100644
index 0000000..b1d35f6
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/generate-routes-backend.ts
@@ -0,0 +1,157 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import type {
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+  RouteRecordStringComponent,
+} from '@vben-core/typings';
+
+import { mapTree } from '@vben-core/shared/utils';
+
+/**
+ * 动态生成路由 - 后端方式
+ */
+async function generateRoutesByBackend(
+  options: GenerateMenuAndRoutesOptions,
+): Promise<RouteRecordRaw[]> {
+  const { fetchMenuListAsync, layoutMap = {}, pageMap = {} } = options;
+
+  try {
+    const menuRoutes = await fetchMenuListAsync?.();
+    if (!menuRoutes) {
+      return [];
+    }
+
+    const normalizePageMap: ComponentRecordType = {};
+
+    for (const [key, value] of Object.entries(pageMap)) {
+      normalizePageMap[normalizeViewPath(key)] = value;
+    }
+
+    const routes = convertRoutes(
+      removePathlessRoutes(menuRoutes),
+      layoutMap,
+      normalizePageMap,
+    );
+
+    return routes;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+function removePathlessRoutes(
+  routes: RouteRecordStringComponent[],
+): RouteRecordStringComponent[] {
+  return routes.flatMap((route) => {
+    const children = removePathlessRoutes(route.children ?? []);
+    if (!route.path?.trim()) {
+      console.warn('Skipping backend menu route with an empty path', {
+        name: route.name,
+      });
+      return children;
+    }
+
+    return [{ ...route, children }];
+  });
+}
+
+function convertRoutes(
+  routes: RouteRecordStringComponent[],
+  layoutMap: ComponentRecordType,
+  pageMap: ComponentRecordType,
+): RouteRecordRaw[] {
+  // 前端无对应视图、需丢弃的路由
+  const invalidRoutes = new WeakSet<object>();
+
+  const converted = mapTree(routes, (node) => {
+    const route = node as unknown as RouteRecordRaw;
+    const { component, name } = node;
+
+    if (!name) {
+      console.error('route name is required', route);
+    }
+
+    // layout转换
+    if (component && layoutMap[component]) {
+      route.component = layoutMap[component];
+      // 页面组件转换
+    } else if (component) {
+      const normalizePath = normalizeViewPath(component);
+      const pageKey = normalizePath.endsWith('.vue')
+        ? normalizePath
+        : `${normalizePath}.vue`;
+      if (pageMap[pageKey]) {
+        route.component = pageMap[pageKey];
+      } else {
+        // 前端没有对应视图（后端菜单指向了已不存在的页面）。
+        // 这里不再替换成 not-found 组件——那样菜单还在、点进去却是 404 页面。
+        // 直接标记丢弃：路由不注册、菜单里也不出现这个死链。
+        console.warn(`route component is invalid, route skipped: ${pageKey}`, {
+          name,
+          path: node.path,
+        });
+        invalidRoutes.add(route);
+      }
+    }
+
+    return route;
+  });
+
+  return pruneInvalidRoutes(converted, layoutMap, invalidRoutes);
+}
+
+/**
+ * 丢弃解析不到视图的路由；并去掉因此变空的目录。
+ */
+function pruneInvalidRoutes(
+  routes: RouteRecordRaw[],
+  layoutMap: ComponentRecordType,
+  invalidRoutes: WeakSet<object>,
+): RouteRecordRaw[] {
+  return routes
+    .filter((route) => !invalidRoutes.has(route))
+    .map((route) => {
+      if (!route.children) {
+        return route;
+      }
+      return {
+        ...route,
+        children: pruneInvalidRoutes(route.children, layoutMap, invalidRoutes),
+      };
+    })
+    .filter((route) => {
+      const children = route.children ?? [];
+      if (children.length > 0 || route.redirect) {
+        return true;
+      }
+      const meta = route.meta as Record<string, unknown> | undefined;
+      // 外链菜单（新窗口打开）没有组件是正常的，不能丢
+      if (meta?.openInNewWindow || meta?.link) {
+        return true;
+      }
+      // 只剩布局组件 = 变成了空目录，丢掉
+      const isLayout = Object.values(layoutMap).includes(
+        route.component as never,
+      );
+      if (isLayout) {
+        return false;
+      }
+      return Boolean(route.component);
+    });
+}
+
+function normalizeViewPath(path: string): string {
+  // 去除相对路径前缀
+  const normalizedPath = path.replace(/^(\.\/|\.\.\/)+/, '');
+
+  // 确保路径以 '/' 开头
+  const viewPath = normalizedPath.startsWith('/')
+    ? normalizedPath
+    : `/${normalizedPath}`;
+
+  // 这里耦合了vben-admin的目录结构
+  return viewPath.replace(/^\/views/, '');
+}
+export { generateRoutesByBackend };
diff --git a/admin-ui/vue/packages/utils/src/helpers/generate-routes-frontend.ts b/admin-ui/vue/packages/utils/src/helpers/generate-routes-frontend.ts
new file mode 100644
index 0000000..dafc8a7
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/generate-routes-frontend.ts
@@ -0,0 +1,58 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { filterTree, mapTree } from '@vben-core/shared/utils';
+
+/**
+ * 动态生成路由 - 前端方式
+ */
+async function generateRoutesByFrontend(
+  routes: RouteRecordRaw[],
+  roles: string[],
+  forbiddenComponent?: RouteRecordRaw['component'],
+): Promise<RouteRecordRaw[]> {
+  // 根据角色标识过滤路由表,判断当前用户是否拥有指定权限
+  const finalRoutes = filterTree(routes, (route) => {
+    return hasAuthority(route, roles);
+  });
+
+  if (!forbiddenComponent) {
+    return finalRoutes;
+  }
+
+  // 如果有禁止访问的页面，将禁止访问的页面替换为403页面
+  return mapTree(finalRoutes, (route) => {
+    if (menuHasVisibleWithForbidden(route)) {
+      route.component = forbiddenComponent;
+    }
+    return route;
+  });
+}
+
+/**
+ * 判断路由是否有权限访问
+ * @param route
+ * @param access
+ */
+function hasAuthority(route: RouteRecordRaw, access: string[]) {
+  const authority = route.meta?.authority;
+  if (!authority) {
+    return true;
+  }
+  const canAccess = access.some((value) => authority.includes(value));
+
+  return canAccess || (!canAccess && menuHasVisibleWithForbidden(route));
+}
+
+/**
+ * 判断路由是否在菜单中显示，但是访问会被重定向到403
+ * @param route
+ */
+function menuHasVisibleWithForbidden(route: RouteRecordRaw) {
+  return (
+    !!route.meta?.authority &&
+    Reflect.has(route.meta || {}, 'menuVisibleWithForbidden') &&
+    !!route.meta?.menuVisibleWithForbidden
+  );
+}
+
+export { generateRoutesByFrontend, hasAuthority };
diff --git a/admin-ui/vue/packages/utils/src/helpers/get-popup-container.ts b/admin-ui/vue/packages/utils/src/helpers/get-popup-container.ts
new file mode 100644
index 0000000..0640423
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/get-popup-container.ts
@@ -0,0 +1,28 @@
+/**
+ * If the node is holding inside a form, return the form element,
+ * otherwise return the parent node of the given element or
+ * the document body if the element is not provided.
+ */
+export function getPopupContainer(node?: HTMLElement): HTMLElement {
+  return (
+    node?.closest('form') ?? (node?.parentNode as HTMLElement) ?? document.body
+  );
+}
+
+
+export function getVxePopupContainer(
+  _node?: HTMLElement,
+  id?: string,
+): HTMLElement {
+  let selector = 'div.vxe-table--body-wrapper.body--wrapper';
+  if (id) {
+    selector = `div#${id} ${selector}`;
+  }
+  // 挂载到vxe-table的滚动区域
+  const vxeTableContainerNode = document.querySelector(selector);
+  if (!vxeTableContainerNode) {
+    console.warn('无法找到vxe-table元素, 将会挂载到body.');
+    return document.body;
+  }
+  return vxeTableContainerNode as HTMLElement;
+}
diff --git a/admin-ui/vue/packages/utils/src/helpers/index.ts b/admin-ui/vue/packages/utils/src/helpers/index.ts
new file mode 100644
index 0000000..e6292b8
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/index.ts
@@ -0,0 +1,12 @@
+export * from './find-menu-by-path';
+export * from './generate-menus';
+export * from './generate-routes-backend';
+export * from './generate-routes-frontend';
+export * from './get-popup-container';
+export * from './merge-route-modules';
+export * from './reset-routes';
+export * from './unmount-global-loading';
+export * from './file';
+export * from './mitt';
+export * from './tree';
+export * from './uuid';
\ No newline at end of file
diff --git a/admin-ui/vue/packages/utils/src/helpers/merge-route-modules.ts b/admin-ui/vue/packages/utils/src/helpers/merge-route-modules.ts
new file mode 100644
index 0000000..53e21f3
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/merge-route-modules.ts
@@ -0,0 +1,28 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+// 定义模块类型
+interface RouteModuleType {
+  default: RouteRecordRaw[];
+}
+
+/**
+ * 合并动态路由模块的默认导出
+ * @param routeModules 动态导入的路由模块对象
+ * @returns 合并后的路由配置数组
+ */
+function mergeRouteModules(
+  routeModules: Record<string, unknown>,
+): RouteRecordRaw[] {
+  const mergedRoutes: RouteRecordRaw[] = [];
+
+  for (const routeModule of Object.values(routeModules)) {
+    const moduleRoutes = (routeModule as RouteModuleType)?.default ?? [];
+    mergedRoutes.push(...moduleRoutes);
+  }
+
+  return mergedRoutes;
+}
+
+export { mergeRouteModules };
+
+export type { RouteModuleType };
diff --git a/admin-ui/vue/packages/utils/src/helpers/mitt.ts b/admin-ui/vue/packages/utils/src/helpers/mitt.ts
new file mode 100644
index 0000000..52be313
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/mitt.ts
@@ -0,0 +1,135 @@
+/**
+ * copy to https://github.com/developit/mitt
+ * Expand clear method
+ */
+export type EventType = string | symbol;
+
+// An event handler can take an optional event argument
+// and should not return a value
+export type Handler<T = unknown> = (event: T) => void;
+export type WildcardHandler<T = Record<string, unknown>> = (
+  type: keyof T,
+  event: T[keyof T],
+) => void;
+
+// An array of all currently registered event handlers for a type
+export type EventHandlerList<T = unknown> = Array<Handler<T>>;
+export type WildCardEventHandlerList<T = Record<string, unknown>> = Array<
+  WildcardHandler<T>
+>;
+
+// A map of event types and their corresponding event handlers.
+export type EventHandlerMap<Events extends Record<EventType, unknown>> = Map<
+  '*' | keyof Events,
+  EventHandlerList<Events[keyof Events]> | WildCardEventHandlerList<Events>
+>;
+
+export interface Emitter<Events extends Record<EventType, unknown>> {
+  all: EventHandlerMap<Events>;
+
+  clear(): void;
+  emit<Key extends keyof Events>(
+    type: undefined extends Events[Key] ? Key : never,
+  ): void;
+
+  emit<Key extends keyof Events>(type: Key, event: Events[Key]): void;
+  off(type: '*', handler: WildcardHandler<Events>): void;
+
+  off<Key extends keyof Events>(
+    type: Key,
+    handler?: Handler<Events[Key]>,
+  ): void;
+  on(type: '*', handler: WildcardHandler<Events>): void;
+  on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>): void;
+}
+
+/**
+ * Mitt: Tiny (~200b) functional event emitter / pubsub.
+ * @name mitt
+ * @returns {Mitt} any
+ */
+export function mitt<Events extends Record<EventType, unknown>>(
+  all?: EventHandlerMap<Events>,
+): Emitter<Events> {
+  type GenericEventHandler =
+    | Handler<Events[keyof Events]>
+    | WildcardHandler<Events>;
+  all = all || new Map();
+
+  return {
+    /**
+     * A Map of event names to registered handler functions.
+     */
+    all,
+
+    /**
+     * Clear all
+     */
+    clear() {
+      this.all.clear();
+    },
+
+    /**
+     * Invoke all handlers for the given type.
+     * If present, `'*'` handlers are invoked after type-matched handlers.
+     *
+     * Note: Manually firing '*' handlers is not supported.
+     *
+     * @param {string|symbol} type The event type to invoke
+     * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
+     * @memberOf mitt
+     */
+    emit<Key extends keyof Events>(type: Key, evt?: Events[Key]) {
+      let handlers = all?.get(type);
+      if (handlers) {
+        [...(handlers as EventHandlerList<Events[keyof Events]>)].forEach(
+          (handler) => {
+            handler(evt as Events[Key]);
+          },
+        );
+      }
+
+      handlers = all?.get('*');
+      if (handlers) {
+        [...(handlers as WildCardEventHandlerList<Events>)].forEach(
+          (handler) => {
+            handler(type, evt as Events[Key]);
+          },
+        );
+      }
+    },
+
+    /**
+     * Remove an event handler for the given type.
+     * If `handler` is omitted, all handlers of the given type are removed.
+     * @param {string|symbol} type Type of event to unregister `handler` from (`'*'` to remove a wildcard handler)
+     * @param {Function} [handler] Handler function to remove
+     * @memberOf mitt
+     */
+    off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {
+      const handlers: Array<GenericEventHandler> | undefined = all?.get(type);
+      if (handlers) {
+        if (handler) {
+          handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+        } else {
+          all?.set(type, []);
+        }
+      }
+    },
+
+    /**
+     * Register an event handler for the given type.
+     * @param {string|symbol} type Type of event to listen for, or `'*'` for all events
+     * @param {Function} handler Function to call in response to given event
+     * @memberOf mitt
+     */
+    on<Key extends keyof Events>(type: Key, handler: GenericEventHandler) {
+      const handlers: Array<GenericEventHandler> | undefined = all?.get(type);
+      if (handlers) {
+        handlers.push(handler);
+      } else {
+        all?.set(type, [handler] as EventHandlerList<Events[keyof Events]>);
+      }
+    },
+  };
+}
diff --git a/admin-ui/vue/packages/utils/src/helpers/reset-routes.ts b/admin-ui/vue/packages/utils/src/helpers/reset-routes.ts
new file mode 100644
index 0000000..0d53a00
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/reset-routes.ts
@@ -0,0 +1,31 @@
+import type { Router, RouteRecordName, RouteRecordRaw } from 'vue-router';
+
+import { traverseTreeValues } from '@vben-core/shared/utils';
+
+/**
+ * @zh_CN 重置所有路由，如有指定白名单除外
+ */
+export function resetStaticRoutes(router: Router, routes: RouteRecordRaw[]) {
+  // 获取静态路由所有节点包含子节点的 name，并排除不存在 name 字段的路由
+  const staticRouteNames = traverseTreeValues<
+    RouteRecordRaw,
+    RouteRecordName | undefined
+  >(routes, (route) => {
+    // 这些路由需要指定 name，防止在路由重置时，不能删除没有指定 name 的路由
+    if (!route.name) {
+      console.warn(
+        `The route with the path ${route.path} needs to have the field name specified.`,
+      );
+    }
+    return route.name;
+  });
+
+  const { getRoutes, hasRoute, removeRoute } = router;
+  const allRoutes = getRoutes();
+  allRoutes.forEach(({ name }) => {
+    // 存在于路由表且非白名单才需要删除
+    if (name && !staticRouteNames.includes(name) && hasRoute(name)) {
+      removeRoute(name);
+    }
+  });
+}
diff --git a/admin-ui/vue/packages/utils/src/helpers/tree.ts b/admin-ui/vue/packages/utils/src/helpers/tree.ts
new file mode 100644
index 0000000..9b0f4b7
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/tree.ts
@@ -0,0 +1,400 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+interface TreeHelperConfig {
+  children: string;
+  id: string;
+  pid: string;
+}
+
+type Fn = (node: any, parentNode?: any) => any;
+
+// 默认配置
+const DEFAULT_CONFIG: TreeHelperConfig = {
+  id: 'id',
+  pid: 'parentId',
+  children: 'children',
+};
+
+// 获取配置。  Object.assign 从一个或多个源对象复制到目标对象
+const getConfig = (config: Partial<TreeHelperConfig>) =>
+  Object.assign({}, DEFAULT_CONFIG, config);
+
+// tree from list
+// 列表中的树
+export function listToTree<T = any>(
+  list: any[],
+  config: Partial<TreeHelperConfig> = {},
+): T[] {
+  const conf = getConfig(config) as TreeHelperConfig;
+  const nodeMap = new Map();
+  const result: T[] = [];
+  const { id, pid, children } = conf;
+
+  for (const node of list) {
+    node[children] = node[children] || [];
+    nodeMap.set(node[id], node);
+  }
+  for (const node of list) {
+    const parent = nodeMap.get(node[pid]);
+    (parent ? parent[children] : result).push(node);
+  }
+  return result;
+}
+
+export function treeToList<T = any>(
+  tree: any,
+  config: Partial<TreeHelperConfig> = {},
+): T {
+  config = getConfig(config);
+  const { children } = config;
+  const result: any = [...tree];
+  for (let i = 0; i < result.length; i++) {
+    if (!result[i][children!]) continue;
+    result.splice(i + 1, 0, ...result[i][children!]);
+  }
+  return result;
+}
+
+export function findNode<T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+): null | T {
+  config = getConfig(config);
+  const { children } = config;
+  const list = [...tree];
+  for (const node of list) {
+    if (func(node)) return node;
+    node[children!] && list.push(...node[children!]);
+  }
+  return null;
+}
+
+export function findNodeAll<T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+): T[] {
+  config = getConfig(config);
+  const { children } = config;
+  const list = [...tree];
+  const result: T[] = [];
+  for (const node of list) {
+    func(node) && result.push(node);
+    node[children!] && list.push(...node[children!]);
+  }
+  return result;
+}
+
+export function findPath<T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+): null | T | T[] {
+  config = getConfig(config);
+  const path: T[] = [];
+  const list = [...tree];
+  const visitedSet = new Set();
+  const { children } = config;
+  while (list.length > 0) {
+    const node = list[0];
+    if (visitedSet.has(node)) {
+      path.pop();
+      list.shift();
+    } else {
+      visitedSet.add(node);
+      node[children!] && list.unshift(...node[children!]);
+      path.push(node);
+      if (func(node)) {
+        return path;
+      }
+    }
+  }
+  return null;
+}
+
+export function findPathAll(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+) {
+  config = getConfig(config);
+  const path: any[] = [];
+  const list = [...tree];
+  const result: any[] = [];
+  const { children } = config;
+  const visitedSet = new Set();
+  while (list.length > 0) {
+    const node = list[0];
+    if (visitedSet.has(node)) {
+      path.pop();
+      list.shift();
+    } else {
+      visitedSet.add(node);
+      node[children!] && list.unshift(...node[children!]);
+      path.push(node);
+      func(node) && result.push([...path]);
+    }
+  }
+  return result;
+}
+
+export function filter<T = any>(
+  tree: T[],
+  func: (n: T) => boolean,
+  // Partial 将 T 中的所有属性设为可选
+  config: Partial<TreeHelperConfig> = {},
+): T[] {
+  // 获取配置
+  config = getConfig(config);
+  const children = config.children as string;
+
+  function listFilter(list: T[]) {
+    return list
+      .map((node: any) => ({ ...node }))
+      .filter((node) => {
+        // 递归调用 对含有children项  进行再次调用自身函数 listFilter
+        node[children] = node[children] && listFilter(node[children]);
+        // 执行传入的回调 func 进行过滤
+        return func(node) || (node[children] && node[children].length > 0);
+      });
+  }
+
+  return listFilter(tree);
+}
+
+export function forEach<T = any>(
+  tree: T[],
+  func: (n: T) => any,
+  config: Partial<TreeHelperConfig> = {},
+): void {
+  config = getConfig(config);
+  const list: any[] = [...tree];
+  const { children } = config;
+  for (let i = 0; i < list.length; i++) {
+    // func 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
+    if (func(list[i])) {
+      return;
+    }
+    children &&
+      list[i][children] &&
+      list.splice(i + 1, 0, ...list[i][children]);
+  }
+}
+
+/**
+ * @description: Extract tree specified structure
+ * @description: 提取树指定结构
+ */
+export function treeMap<T = any>(
+  treeData: T[],
+  opt: { children?: string; conversion: Fn },
+): T[] {
+  return treeData.map((item) => treeMapEach(item, opt));
+}
+
+/**
+ * @description: Extract tree specified structure
+ * @description: 提取树指定结构
+ */
+export function treeMapEach(
+  data: any,
+  { conversion, children = 'children' }: { children?: string; conversion: Fn },
+) {
+  const haveChildren =
+    Array.isArray(data[children]) && data[children].length > 0;
+  const conversionData = conversion(data) || {};
+  return haveChildren
+    ? {
+        ...conversionData,
+        [children]: data[children].map((i: number) =>
+          treeMapEach(i, {
+            children,
+            conversion,
+          }),
+        ),
+      }
+    : {
+        ...conversionData,
+      };
+}
+
+/**
+ * 递归遍历树结构
+ * @param treeDatas 树
+ * @param callBack 回调
+ * @param parentNode 父节点
+ */
+export function eachTree(treeDatas: any[], callBack: Fn, parentNode = {}) {
+  treeDatas.forEach((element) => {
+    const newNode = callBack(element, parentNode) || element;
+    if (element.children) {
+      eachTree(element.children, callBack, newNode);
+    }
+  });
+}
+
+// 如果节点的children为空, 则删除children属性
+export function removeEmptyChildren(data: any[], childrenField = 'children') {
+  data.forEach((item) => {
+    if (!item[childrenField]) {
+      return;
+    }
+    if (item[childrenField].length > 0) {
+      removeEmptyChildren(item[childrenField]);
+    } else {
+      Reflect.deleteProperty(item, childrenField);
+    }
+  });
+}
+
+// eslint-disable-next-line jsdoc/require-returns-check
+/**
+ *
+ * 添加全名 如 祖先节点-父节点-子节点
+ * @param treeData 已经是tree数据
+ * @param labelName 标签的字段名称
+ * @param splitStr 分隔符
+ * @returns void 无返回值 会修改原始数据
+ */
+export function addFullName(
+  treeData: any[],
+  labelName = 'label',
+  splitStr = '-',
+) {
+  function addFullNameProperty(node: any, parentNames: any[] = []) {
+    const fullNameParts = [...parentNames, node[labelName]];
+    node.fullName = fullNameParts.join(splitStr);
+    if (node.children && node.children.length > 0) {
+      node.children.forEach((childNode: any) => {
+        addFullNameProperty(childNode, fullNameParts);
+      });
+    }
+  }
+
+  treeData.forEach((item: any) => {
+    addFullNameProperty(item);
+  });
+}
+
+/**
+ * https://blog.csdn.net/Web_J/article/details/129281329
+ * 给出节点nodeId 找到所有父节点ID
+ * @param treeList 树形结构list
+ * @param nodeId 要寻找的节点ID
+ * @param config config
+ * @returns 父节点ID数组
+ */
+export function findParentsIds(
+  treeList: any[],
+  nodeId: number,
+  config: Partial<TreeHelperConfig> = {},
+) {
+  const conf = getConfig(config) as TreeHelperConfig;
+  const { id, children } = conf;
+
+  // 用于存储所有父节点ID的数组
+  const parentIds: number[] = [];
+
+  function traverse(node: any, nodeId: number) {
+    if (node[id] === nodeId) {
+      return true;
+    }
+    if (node[children]) {
+      // 如果当前节点有子节点，则继续遍历子节点
+      for (const childNode of node[children]) {
+        if (traverse(childNode, nodeId)) {
+          // 如果在子节点中找到了子节点的父节点，则将当前节点的ID添加到父节点ID数组中，并返回true表示已经找到了子节点
+          parentIds.push(node[id]);
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  for (const node of treeList) {
+    if (traverse(node, nodeId)) {
+      // 如果在当前节点的子树中找到了子节点的父节点，则直接退出循环
+      break;
+    }
+  }
+
+  return parentIds.sort();
+}
+
+/**
+ * 给出节点数组 找到所有父节点ID
+ * @param treeList 树形结构list
+ * @param nodeIds 要寻找的节点ID list
+ * @param config config
+ * @returns 父节点ID数组
+ */
+export function findGroupParentIds(
+  treeList: any[],
+  nodeIds: number[],
+  config: Partial<TreeHelperConfig> = {},
+) {
+  // 用于存储所有父节点ID的Set 主要为了去重
+  const parentIds = new Set<number>();
+
+  nodeIds.forEach((nodeId) => {
+    findParentsIds(treeList, nodeId, config).forEach((parentId) => {
+      parentIds.add(parentId);
+    });
+  });
+
+  return [...parentIds].sort();
+}
+
+/**
+ * 找到所有ID 返回数组
+ * @param treeList list
+ * @param config
+ * @returns ID数组
+ */
+export function findAllIds(
+  treeList: any[],
+  config: Partial<TreeHelperConfig> = DEFAULT_CONFIG,
+) {
+  const conf = getConfig(config) as TreeHelperConfig;
+  const { id, children } = conf;
+  const ids: number[] = [];
+
+  treeList.forEach((item) => {
+    if (item[children]) {
+      const tempIds = findAllIds(item[children], config);
+      ids.push(...tempIds);
+    }
+    ids.push(item[id]);
+  });
+
+  return [...ids].sort();
+}
+
+/**
+ * @description 这里抄的filterByLevel函数
+ * @description 主要用于获取指定层级的节点数组
+ */
+export function findIdsByLevel(
+  level = 1,
+  list?: any[],
+  config: Partial<TreeHelperConfig> = DEFAULT_CONFIG,
+  currentLevel = 1,
+) {
+  if (!level) {
+    return [];
+  }
+  const res: (number | string)[] = [];
+  const data = list || [];
+  for (const item of data) {
+    const { id: keyField, children: childrenField } = config;
+    const key = keyField ? item[keyField] : '';
+    const children = childrenField ? item[childrenField] : [];
+    res.push(key);
+    if (children && children.length > 0 && currentLevel < level) {
+      currentLevel += 1;
+      res.push(...findIdsByLevel(level, children, config, currentLevel));
+    }
+  }
+  return res as number[] | string[];
+}
diff --git a/admin-ui/vue/packages/utils/src/helpers/unmount-global-loading.ts b/admin-ui/vue/packages/utils/src/helpers/unmount-global-loading.ts
new file mode 100644
index 0000000..10b88ea
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/unmount-global-loading.ts
@@ -0,0 +1,31 @@
+/**
+ * 移除并销毁loading
+ * 放在这里是而不是放在 index.html 的app标签内，是因为这样比较不会生硬，渲染过快可能会有闪烁
+ * 通过先添加css动画隐藏，在动画结束后在移除loading节点来改善体验
+ * 不好的地方是会增加一些代码量
+ * 自定义loading可以见：https://doc.vben.pro/guide/in-depth/loading.html
+ */
+export function unmountGlobalLoading() {
+  // 查找全局 loading 元素
+  const loadingElement = document.querySelector('#__app-loading__');
+
+  if (loadingElement) {
+    // 添加隐藏类，触发过渡动画
+    loadingElement.classList.add('hidden');
+
+    // 查找所有需要移除的注入 loading 元素
+    const injectLoadingElements = document.querySelectorAll(
+      '[data-app-loading^="inject"]',
+    );
+
+    // 当过渡动画结束时，移除 loading 元素和所有注入的 loading 元素
+    loadingElement.addEventListener(
+      'transitionend',
+      () => {
+        loadingElement.remove(); // 移除 loading 元素
+        injectLoadingElements.forEach((el) => el.remove()); // 移除所有注入的 loading 元素
+      },
+      { once: true },
+    ); // 确保事件只触发一次
+  }
+}
diff --git a/admin-ui/vue/packages/utils/src/helpers/uuid.ts b/admin-ui/vue/packages/utils/src/helpers/uuid.ts
new file mode 100644
index 0000000..81c49a0
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/helpers/uuid.ts
@@ -0,0 +1,42 @@
+const hexList: string[] = [];
+for (let i = 0; i <= 15; i++) {
+  hexList[i] = i.toString(16);
+}
+
+export function buildUUID(): string {
+  let uuid = '';
+  for (let i = 1; i <= 36; i++) {
+    switch (i) {
+      case 9:
+      case 14:
+      case 19:
+      case 24: {
+        uuid += '-';
+
+        break;
+      }
+      case 15: {
+        uuid += 4;
+
+        break;
+      }
+      case 20: {
+        uuid += hexList[(Math.random() * 4) | 8];
+
+        break;
+      }
+      default: {
+        uuid += hexList[Math.trunc(Math.random() * 16)];
+      }
+    }
+  }
+  return uuid.replaceAll('-', '');
+}
+
+let unique = 0;
+export function buildShortUUID(prefix = ''): string {
+  const time = Date.now();
+  const random = Math.floor(Math.random() * 1_000_000_000);
+  unique++;
+  return `${prefix}_${random}${unique}${String(time)}`;
+}
diff --git a/admin-ui/vue/packages/utils/src/index.ts b/admin-ui/vue/packages/utils/src/index.ts
new file mode 100644
index 0000000..dd84fa7
--- /dev/null
+++ b/admin-ui/vue/packages/utils/src/index.ts
@@ -0,0 +1,5 @@
+export * from './helpers';
+export * from '@vben-core/shared/cache';
+export * from '@vben-core/shared/color';
+export * from '@vben-core/shared/utils';
+export { fileTypeFromBlob } from 'file-type';
diff --git a/admin-ui/vue/packages/utils/tsconfig.json b/admin-ui/vue/packages/utils/tsconfig.json
new file mode 100644
index 0000000..255148a
--- /dev/null
+++ b/admin-ui/vue/packages/utils/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/library.json",
+  "compilerOptions": {
+    "types": ["@vben-core/typings/vue-router"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/pnpm-lock.yaml b/admin-ui/vue/pnpm-lock.yaml
new file mode 100644
index 0000000..1673764
--- /dev/null
+++ b/admin-ui/vue/pnpm-lock.yaml
@@ -0,0 +1,19158 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+catalogs:
+  default:
+    '@changesets/changelog-github':
+      specifier: ^0.5.1
+      version: 0.5.2
+    '@changesets/cli':
+      specifier: ^2.29.7
+      version: 2.29.8
+    '@changesets/git':
+      specifier: ^3.0.4
+      version: 3.0.4
+    '@clack/prompts':
+      specifier: ^0.11.0
+      version: 0.11.0
+    '@commitlint/cli':
+      specifier: ^19.8.1
+      version: 19.8.1
+    '@commitlint/config-conventional':
+      specifier: ^19.8.1
+      version: 19.8.1
+    '@eslint/js':
+      specifier: ^9.39.1
+      version: 9.39.2
+    '@iconify/json':
+      specifier: ^2.2.406
+      version: 2.2.417
+    '@iconify/tailwind':
+      specifier: ^1.2.0
+      version: 1.2.0
+    '@iconify/vue':
+      specifier: ^5.0.0
+      version: 5.0.0
+    '@intlify/core-base':
+      specifier: ^11.1.7
+      version: 11.2.7
+    '@intlify/unplugin-vue-i18n':
+      specifier: ^6.0.8
+      version: 6.0.8
+    '@jspm/generator':
+      specifier: ^2.6.2
+      version: 2.8.0
+    '@manypkg/get-packages':
+      specifier: ^3.0.0
+      version: 3.1.0
+    '@playwright/test':
+      specifier: ^1.56.1
+      version: 1.57.0
+    '@pnpm/workspace.read-manifest':
+      specifier: ^1000.2.6
+      version: 1000.2.9
+    '@stylistic/stylelint-plugin':
+      specifier: ^3.1.3
+      version: 3.1.3
+    '@tailwindcss/nesting':
+      specifier: 0.0.0-insiders.565cd3e
+      version: 0.0.0-insiders.565cd3e
+    '@tailwindcss/typography':
+      specifier: ^0.5.16
+      version: 0.5.19
+    '@tanstack/vue-store':
+      specifier: ^0.8.0
+      version: 0.8.0
+    '@types/archiver':
+      specifier: ^6.0.3
+      version: 6.0.4
+    '@types/eslint':
+      specifier: ^9.6.1
+      version: 9.6.1
+    '@types/html-minifier-terser':
+      specifier: ^7.0.2
+      version: 7.0.2
+    '@types/lodash.clonedeep':
+      specifier: ^4.5.9
+      version: 4.5.9
+    '@types/lodash.get':
+      specifier: ^4.4.9
+      version: 4.4.9
+    '@types/lodash.isequal':
+      specifier: ^4.5.8
+      version: 4.5.8
+    '@types/lodash.set':
+      specifier: ^4.3.9
+      version: 4.3.9
+    '@types/node':
+      specifier: ^24.10.1
+      version: 24.10.4
+    '@types/nprogress':
+      specifier: ^0.2.3
+      version: 0.2.3
+    '@types/postcss-import':
+      specifier: ^14.0.3
+      version: 14.0.3
+    '@types/qrcode':
+      specifier: ^1.5.5
+      version: 1.5.6
+    '@types/qs':
+      specifier: ^6.14.0
+      version: 6.14.0
+    '@types/sortablejs':
+      specifier: ^1.15.8
+      version: 1.15.9
+    '@typescript-eslint/eslint-plugin':
+      specifier: ^8.46.4
+      version: 8.50.1
+    '@typescript-eslint/parser':
+      specifier: ^8.46.4
+      version: 8.50.1
+    '@vee-validate/zod':
+      specifier: ^4.15.1
+      version: 4.15.1
+    '@vitejs/plugin-vue':
+      specifier: ^6.0.1
+      version: 6.0.3
+    '@vitejs/plugin-vue-jsx':
+      specifier: ^5.1.1
+      version: 5.1.3
+    '@vue/shared':
+      specifier: ^3.5.24
+      version: 3.5.26
+    '@vue/test-utils':
+      specifier: ^2.4.6
+      version: 2.4.6
+    '@vueuse/core':
+      specifier: ^13.4.0
+      version: 13.9.0
+    '@vueuse/integrations':
+      specifier: ^14.0.0
+      version: 14.1.0
+    '@vueuse/motion':
+      specifier: ^3.0.3
+      version: 3.0.3
+    ant-design-vue:
+      specifier: ^4.2.6
+      version: 4.2.6
+    archiver:
+      specifier: ^7.0.1
+      version: 7.0.1
+    autoprefixer:
+      specifier: ^10.4.22
+      version: 10.4.23
+    axios:
+      specifier: ^1.10.0
+      version: 1.13.2
+    axios-mock-adapter:
+      specifier: ^2.1.0
+      version: 2.1.0
+    cac:
+      specifier: ^6.7.14
+      version: 6.7.14
+    chalk:
+      specifier: ^5.4.1
+      version: 5.6.2
+    cheerio:
+      specifier: ^1.1.0
+      version: 1.1.2
+    circular-dependency-scanner:
+      specifier: ^2.3.0
+      version: 2.3.0
+    class-variance-authority:
+      specifier: ^0.7.1
+      version: 0.7.1
+    commitlint-plugin-function-rules:
+      specifier: ^4.1.1
+      version: 4.2.0
+    consola:
+      specifier: ^3.4.2
+      version: 3.4.2
+    cross-env:
+      specifier: ^7.0.3
+      version: 7.0.3
+    cspell:
+      specifier: ^8.19.4
+      version: 8.19.4
+    cssnano:
+      specifier: ^7.0.7
+      version: 7.1.2
+    cz-git:
+      specifier: ^1.11.2
+      version: 1.12.0
+    czg:
+      specifier: ^1.11.1
+      version: 1.12.0
+    dayjs:
+      specifier: ^1.11.13
+      version: 1.11.19
+    defu:
+      specifier: ^6.1.4
+      version: 6.1.4
+    depcheck:
+      specifier: ^1.4.7
+      version: 1.4.7
+    dotenv:
+      specifier: ^16.6.1
+      version: 16.6.1
+    echarts:
+      specifier: ^6.0.0
+      version: 6.0.0
+    es-toolkit:
+      specifier: ^1.41.0
+      version: 1.43.0
+    eslint:
+      specifier: ^9.39.1
+      version: 9.39.2
+    eslint-config-turbo:
+      specifier: ^2.6.1
+      version: 2.7.2
+    eslint-plugin-command:
+      specifier: ^3.3.1
+      version: 3.4.0
+    eslint-plugin-eslint-comments:
+      specifier: ^3.2.0
+      version: 3.2.0
+    eslint-plugin-import-x:
+      specifier: ^4.16.1
+      version: 4.16.1
+    eslint-plugin-jsdoc:
+      specifier: ^61.2.1
+      version: 61.5.0
+    eslint-plugin-jsonc:
+      specifier: ^2.21.0
+      version: 2.21.0
+    eslint-plugin-n:
+      specifier: ^17.23.1
+      version: 17.23.1
+    eslint-plugin-no-only-tests:
+      specifier: ^3.3.0
+      version: 3.3.0
+    eslint-plugin-perfectionist:
+      specifier: ^4.15.1
+      version: 4.15.1
+    eslint-plugin-prettier:
+      specifier: ^5.5.4
+      version: 5.5.4
+    eslint-plugin-regexp:
+      specifier: ^2.10.0
+      version: 2.10.0
+    eslint-plugin-unicorn:
+      specifier: ^62.0.0
+      version: 62.0.0
+    eslint-plugin-unused-imports:
+      specifier: ^4.3.0
+      version: 4.3.0
+    eslint-plugin-vitest:
+      specifier: ^0.5.4
+      version: 0.5.4
+    eslint-plugin-vue:
+      specifier: ^10.5.1
+      version: 10.6.2
+    execa:
+      specifier: ^9.6.0
+      version: 9.6.1
+    find-up:
+      specifier: ^7.0.0
+      version: 7.0.0
+    get-port:
+      specifier: ^7.1.0
+      version: 7.1.0
+    globals:
+      specifier: ^16.3.0
+      version: 16.5.0
+    happy-dom:
+      specifier: ^17.6.3
+      version: 17.6.3
+    html-minifier-terser:
+      specifier: ^7.2.0
+      version: 7.2.0
+    is-ci:
+      specifier: ^4.1.0
+      version: 4.1.0
+    json-bigint:
+      specifier: ^1.0.0
+      version: 1.0.0
+    jsonc-eslint-parser:
+      specifier: ^2.4.1
+      version: 2.4.2
+    lefthook:
+      specifier: ^1.13.6
+      version: 1.13.6
+    lodash.clonedeep:
+      specifier: ^4.5.0
+      version: 4.5.0
+    lucide-vue-next:
+      specifier: ^0.553.0
+      version: 0.553.0
+    nitropack:
+      specifier: ^2.11.13
+      version: 2.12.9
+    nprogress:
+      specifier: ^0.2.0
+      version: 0.2.0
+    ora:
+      specifier: ^8.2.0
+      version: 8.2.0
+    pinia-plugin-persistedstate:
+      specifier: ^4.4.1
+      version: 4.7.1
+    pkg-types:
+      specifier: ^2.2.0
+      version: 2.3.0
+    playwright:
+      specifier: ^1.56.1
+      version: 1.57.0
+    postcss:
+      specifier: ^8.5.6
+      version: 8.5.6
+    postcss-antd-fixes:
+      specifier: ^0.2.0
+      version: 0.2.0
+    postcss-html:
+      specifier: ^1.8.0
+      version: 1.8.0
+    postcss-import:
+      specifier: ^16.1.1
+      version: 16.1.1
+    postcss-preset-env:
+      specifier: ^10.2.4
+      version: 10.5.0
+    postcss-scss:
+      specifier: ^4.0.9
+      version: 4.0.9
+    prettier:
+      specifier: ^3.6.2
+      version: 3.7.4
+    prettier-plugin-tailwindcss:
+      specifier: ^0.7.1
+      version: 0.7.2
+    publint:
+      specifier: ^0.3.12
+      version: 0.3.16
+    qrcode:
+      specifier: ^1.5.4
+      version: 1.5.4
+    qs:
+      specifier: ^6.14.0
+      version: 6.14.0
+    reka-ui:
+      specifier: ^2.6.0
+      version: 2.7.0
+    resolve.exports:
+      specifier: ^2.0.3
+      version: 2.0.3
+    rimraf:
+      specifier: ^6.1.0
+      version: 6.1.2
+    rollup:
+      specifier: ^4.44.1
+      version: 4.54.0
+    rollup-plugin-visualizer:
+      specifier: ^5.14.0
+      version: 5.14.0
+    sass:
+      specifier: ^1.94.0
+      version: 1.97.1
+    secure-ls:
+      specifier: ^2.0.0
+      version: 2.0.0
+    sortablejs:
+      specifier: ^1.15.6
+      version: 1.15.6
+    stylelint:
+      specifier: ^16.21.0
+      version: 16.26.1
+    stylelint-config-recess-order:
+      specifier: ^6.1.0
+      version: 6.1.0
+    stylelint-config-recommended:
+      specifier: ^17.0.0
+      version: 17.0.0
+    stylelint-config-recommended-scss:
+      specifier: ^14.1.0
+      version: 14.1.0
+    stylelint-config-recommended-vue:
+      specifier: ^1.6.1
+      version: 1.6.1
+    stylelint-config-standard:
+      specifier: ^38.0.0
+      version: 38.0.0
+    stylelint-order:
+      specifier: ^7.0.0
+      version: 7.0.0
+    stylelint-prettier:
+      specifier: ^5.0.3
+      version: 5.0.3
+    stylelint-scss:
+      specifier: ^6.12.1
+      version: 6.13.0
+    tailwind-merge:
+      specifier: ^2.6.0
+      version: 2.6.0
+    tailwindcss:
+      specifier: ^3.4.18
+      version: 3.4.19
+    tailwindcss-animate:
+      specifier: ^1.0.7
+      version: 1.0.7
+    theme-colors:
+      specifier: ^0.1.0
+      version: 0.1.0
+    tippy.js:
+      specifier: ^6.3.7
+      version: 6.3.7
+    turbo:
+      specifier: ^2.6.1
+      version: 2.7.2
+    typescript:
+      specifier: ^5.9.3
+      version: 5.9.3
+    unbuild:
+      specifier: ^3.6.1
+      version: 3.6.1
+    vee-validate:
+      specifier: ^4.15.1
+      version: 4.15.1
+    vite:
+      specifier: ^7.2.2
+      version: 7.3.0
+    vite-plugin-compression:
+      specifier: ^0.5.1
+      version: 0.5.1
+    vite-plugin-dts:
+      specifier: ^4.5.4
+      version: 4.5.4
+    vite-plugin-html:
+      specifier: ^3.2.2
+      version: 3.2.2
+    vite-plugin-lazy-import:
+      specifier: ^1.0.7
+      version: 1.0.7
+    vite-plugin-pwa:
+      specifier: ^1.0.1
+      version: 1.2.0
+    vite-plugin-vue-devtools:
+      specifier: ^8.0.3
+      version: 8.0.5
+    vitest:
+      specifier: ^3.2.4
+      version: 3.2.4
+    vue-eslint-parser:
+      specifier: ^10.2.0
+      version: 10.2.0
+    vue-i18n:
+      specifier: ^11.1.7
+      version: 11.2.7
+    vue-json-viewer:
+      specifier: ^3.0.4
+      version: 3.0.4
+    vue-router:
+      specifier: ^4.5.1
+      version: 4.6.4
+    vue-tippy:
+      specifier: ^6.7.1
+      version: 6.7.1
+    vue-tsc:
+      specifier: ^3.1.4
+      version: 3.2.1
+    vxe-pc-ui:
+      specifier: ^4.10.22
+      version: 4.11.17
+    vxe-table:
+      specifier: ^4.17.14
+      version: 4.17.33
+    watermark-js-plus:
+      specifier: ^1.6.2
+      version: 1.6.3
+    zod:
+      specifier: ^3.25.67
+      version: 3.25.76
+    zod-defaults:
+      specifier: 0.1.3
+      version: 0.1.3
+
+overrides:
+  '@ast-grep/napi': ^0.39.9
+  '@ctrl/tinycolor': ^4.1.0
+  clsx: ^2.1.1
+  esbuild: 0.25.3
+  jiti: ^2.6.1
+  pinia: ^3.0.3
+  vue: ^3.5.24
+
+importers:
+
+  .:
+    devDependencies:
+      '@changesets/changelog-github':
+        specifier: 'catalog:'
+        version: 0.5.2
+      '@changesets/cli':
+        specifier: 'catalog:'
+        version: 2.29.8(@types/node@24.10.4)
+      '@playwright/test':
+        specifier: 'catalog:'
+        version: 1.57.0
+      '@types/node':
+        specifier: 'catalog:'
+        version: 24.10.4
+      '@vben/commitlint-config':
+        specifier: workspace:*
+        version: link:internal/lint-configs/commitlint-config
+      '@vben/eslint-config':
+        specifier: workspace:*
+        version: link:internal/lint-configs/eslint-config
+      '@vben/prettier-config':
+        specifier: workspace:*
+        version: link:internal/lint-configs/prettier-config
+      '@vben/stylelint-config':
+        specifier: workspace:*
+        version: link:internal/lint-configs/stylelint-config
+      '@vben/tailwind-config':
+        specifier: workspace:*
+        version: link:internal/tailwind-config
+      '@vben/tsconfig':
+        specifier: workspace:*
+        version: link:internal/tsconfig
+      '@vben/turbo-run':
+        specifier: workspace:*
+        version: link:scripts/turbo-run
+      '@vben/vite-config':
+        specifier: workspace:*
+        version: link:internal/vite-config
+      '@vben/vsh':
+        specifier: workspace:*
+        version: link:scripts/vsh
+      '@vitejs/plugin-vue':
+        specifier: 'catalog:'
+        version: 6.0.3(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+      '@vitejs/plugin-vue-jsx':
+        specifier: 'catalog:'
+        version: 5.1.3(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+      '@vue/test-utils':
+        specifier: 'catalog:'
+        version: 2.4.6
+      autoprefixer:
+        specifier: 'catalog:'
+        version: 10.4.23(postcss@8.5.6)
+      cross-env:
+        specifier: 'catalog:'
+        version: 7.0.3
+      cspell:
+        specifier: 'catalog:'
+        version: 8.19.4
+      happy-dom:
+        specifier: 'catalog:'
+        version: 17.6.3
+      is-ci:
+        specifier: 'catalog:'
+        version: 4.1.0
+      lefthook:
+        specifier: 'catalog:'
+        version: 1.13.6
+      playwright:
+        specifier: 'catalog:'
+        version: 1.57.0
+      rimraf:
+        specifier: 'catalog:'
+        version: 6.1.2
+      tailwindcss:
+        specifier: 'catalog:'
+        version: 3.4.19(yaml@2.8.2)
+      turbo:
+        specifier: 'catalog:'
+        version: 2.7.2
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
+      unbuild:
+        specifier: 'catalog:'
+        version: 3.6.1(sass@1.97.1)(typescript@5.9.3)(vue-tsc@3.2.1(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))
+      vite:
+        specifier: 'catalog:'
+        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vitest:
+        specifier: 'catalog:'
+        version: 3.2.4(@types/node@24.10.4)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+      vue-tsc:
+        specifier: 'catalog:'
+        version: 3.2.1(typescript@5.9.3)
+
+  apps/web-antd:
+    dependencies:
+      '@highlightjs/vue-plugin':
+        specifier: ^2.1.0
+        version: 2.1.0(highlight.js@11.11.1)(vue@3.5.26(typescript@5.9.3))
+      '@tinymce/tinymce-vue':
+        specifier: ^6.1.0
+        version: 6.3.0(tinymce@7.9.1)(vue@3.5.26(typescript@5.9.3))
+      '@vben/access':
+        specifier: workspace:*
+        version: link:../../packages/effects/access
+      '@vben/common-ui':
+        specifier: workspace:*
+        version: link:../../packages/effects/common-ui
+      '@vben/constants':
+        specifier: workspace:*
+        version: link:../../packages/constants
+      '@vben/hooks':
+        specifier: workspace:*
+        version: link:../../packages/effects/hooks
+      '@vben/icons':
+        specifier: workspace:*
+        version: link:../../packages/icons
+      '@vben/layouts':
+        specifier: workspace:*
+        version: link:../../packages/effects/layouts
+      '@vben/locales':
+        specifier: workspace:*
+        version: link:../../packages/locales
+      '@vben/plugins':
+        specifier: workspace:*
+        version: link:../../packages/effects/plugins
+      '@vben/preferences':
+        specifier: workspace:*
+        version: link:../../packages/preferences
+      '@vben/request':
+        specifier: workspace:*
+        version: link:../../packages/effects/request
+      '@vben/stores':
+        specifier: workspace:*
+        version: link:../../packages/stores
+      '@vben/styles':
+        specifier: workspace:*
+        version: link:../../packages/styles
+      '@vben/types':
+        specifier: workspace:*
+        version: link:../../packages/types
+      '@vben/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      ant-design-vue:
+        specifier: 'catalog:'
+        version: 4.2.6(vue@3.5.26(typescript@5.9.3))
+      cropperjs:
+        specifier: ^1.6.2
+        version: 1.6.2
+      dayjs:
+        specifier: 'catalog:'
+        version: 1.11.19
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
+      js-md5:
+        specifier: ^0.8.3
+        version: 0.8.3
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.22
+      pinia:
+        specifier: ^3.0.3
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
+      tinymce:
+        specifier: ^7.3.0
+        version: 7.9.1
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.4(vue@3.5.26(typescript@5.9.3))
+    devDependencies:
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
+
+  internal/lint-configs/commitlint-config:
+    dependencies:
+      '@commitlint/cli':
+        specifier: 'catalog:'
+        version: 19.8.1(@types/node@25.0.3)(typescript@5.9.3)
+      '@commitlint/config-conventional':
+        specifier: 'catalog:'
+        version: 19.8.1
+      '@vben/node-utils':
+        specifier: workspace:*
+        version: link:../../node-utils
+      commitlint-plugin-function-rules:
+        specifier: 'catalog:'
+        version: 4.2.0(@commitlint/lint@19.8.1)
+      cz-git:
+        specifier: 'catalog:'
+        version: 1.12.0
+      czg:
+        specifier: 'catalog:'
+        version: 1.12.0
+
+  internal/lint-configs/eslint-config:
+    dependencies:
+      eslint-config-turbo:
+        specifier: 'catalog:'
+        version: 2.7.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.7.2)
+      eslint-plugin-command:
+        specifier: 'catalog:'
+        version: 3.4.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-import-x:
+        specifier: 'catalog:'
+        version: 4.16.1(@typescript-eslint/utils@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))
+    devDependencies:
+      '@eslint/js':
+        specifier: 'catalog:'
+        version: 9.39.2
+      '@types/eslint':
+        specifier: 'catalog:'
+        version: 9.6.1
+      '@typescript-eslint/eslint-plugin':
+        specifier: 'catalog:'
+        version: 8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser':
+        specifier: 'catalog:'
+        version: 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint:
+        specifier: 'catalog:'
+        version: 9.39.2(jiti@2.6.1)
+      eslint-plugin-eslint-comments:
+        specifier: 'catalog:'
+        version: 3.2.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-jsdoc:
+        specifier: 'catalog:'
+        version: 61.5.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-jsonc:
+        specifier: 'catalog:'
+        version: 2.21.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-n:
+        specifier: 'catalog:'
+        version: 17.23.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint-plugin-no-only-tests:
+        specifier: 'catalog:'
+        version: 3.3.0
+      eslint-plugin-perfectionist:
+        specifier: 'catalog:'
+        version: 4.15.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint-plugin-prettier:
+        specifier: 'catalog:'
+        version: 5.5.4(@types/eslint@9.6.1)(eslint@9.39.2(jiti@2.6.1))(prettier@3.7.4)
+      eslint-plugin-regexp:
+        specifier: 'catalog:'
+        version: 2.10.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-unicorn:
+        specifier: 'catalog:'
+        version: 62.0.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-unused-imports:
+        specifier: 'catalog:'
+        version: 4.3.0(@typescript-eslint/eslint-plugin@8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-vitest:
+        specifier: 'catalog:'
+        version: 0.5.4(@typescript-eslint/eslint-plugin@8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@25.0.3)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
+      eslint-plugin-vue:
+        specifier: 'catalog:'
+        version: 10.6.2(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.39.2(jiti@2.6.1)))
+      globals:
+        specifier: 'catalog:'
+        version: 16.5.0
+      jsonc-eslint-parser:
+        specifier: 'catalog:'
+        version: 2.4.2
+      vue-eslint-parser:
+        specifier: 'catalog:'
+        version: 10.2.0(eslint@9.39.2(jiti@2.6.1))
+
+  internal/lint-configs/prettier-config:
+    dependencies:
+      prettier:
+        specifier: 'catalog:'
+        version: 3.7.4
+      prettier-plugin-tailwindcss:
+        specifier: 'catalog:'
+        version: 0.7.2(prettier@3.7.4)
+
+  internal/lint-configs/stylelint-config:
+    dependencies:
+      '@stylistic/stylelint-plugin':
+        specifier: 'catalog:'
+        version: 3.1.3(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-config-recess-order:
+        specifier: 'catalog:'
+        version: 6.1.0(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-scss:
+        specifier: 'catalog:'
+        version: 6.13.0(stylelint@16.26.1(typescript@5.9.3))
+    devDependencies:
+      postcss:
+        specifier: 'catalog:'
+        version: 8.5.6
+      postcss-html:
+        specifier: 'catalog:'
+        version: 1.8.0
+      postcss-scss:
+        specifier: 'catalog:'
+        version: 4.0.9(postcss@8.5.6)
+      prettier:
+        specifier: 'catalog:'
+        version: 3.7.4
+      stylelint:
+        specifier: 'catalog:'
+        version: 16.26.1(typescript@5.9.3)
+      stylelint-config-recommended:
+        specifier: 'catalog:'
+        version: 17.0.0(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-config-recommended-scss:
+        specifier: 'catalog:'
+        version: 14.1.0(postcss@8.5.6)(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-config-recommended-vue:
+        specifier: 'catalog:'
+        version: 1.6.1(postcss-html@1.8.0)(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-config-standard:
+        specifier: 'catalog:'
+        version: 38.0.0(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-order:
+        specifier: 'catalog:'
+        version: 7.0.0(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-prettier:
+        specifier: 'catalog:'
+        version: 5.0.3(prettier@3.7.4)(stylelint@16.26.1(typescript@5.9.3))
+
+  internal/node-utils:
+    dependencies:
+      '@changesets/git':
+        specifier: 'catalog:'
+        version: 3.0.4
+      '@manypkg/get-packages':
+        specifier: 'catalog:'
+        version: 3.1.0
+      chalk:
+        specifier: 'catalog:'
+        version: 5.6.2
+      consola:
+        specifier: 'catalog:'
+        version: 3.4.2
+      dayjs:
+        specifier: 'catalog:'
+        version: 1.11.19
+      execa:
+        specifier: 'catalog:'
+        version: 9.6.1
+      find-up:
+        specifier: 'catalog:'
+        version: 7.0.0
+      ora:
+        specifier: 'catalog:'
+        version: 8.2.0
+      pkg-types:
+        specifier: 'catalog:'
+        version: 2.3.0
+      prettier:
+        specifier: 'catalog:'
+        version: 3.7.4
+      rimraf:
+        specifier: 'catalog:'
+        version: 6.1.2
+
+  internal/tailwind-config:
+    dependencies:
+      '@iconify/json':
+        specifier: 'catalog:'
+        version: 2.2.417
+      '@iconify/tailwind':
+        specifier: 'catalog:'
+        version: 1.2.0
+      '@manypkg/get-packages':
+        specifier: 'catalog:'
+        version: 3.1.0
+      '@tailwindcss/nesting':
+        specifier: 'catalog:'
+        version: 0.0.0-insiders.565cd3e(postcss@8.5.6)
+      '@tailwindcss/typography':
+        specifier: 'catalog:'
+        version: 0.5.19(tailwindcss@3.4.19(yaml@2.8.2))
+      autoprefixer:
+        specifier: 'catalog:'
+        version: 10.4.23(postcss@8.5.6)
+      cssnano:
+        specifier: 'catalog:'
+        version: 7.1.2(postcss@8.5.6)
+      jiti:
+        specifier: ^2.6.1
+        version: 2.6.1
+      postcss:
+        specifier: 'catalog:'
+        version: 8.5.6
+      postcss-antd-fixes:
+        specifier: 'catalog:'
+        version: 0.2.0(postcss@8.5.6)
+      postcss-import:
+        specifier: 'catalog:'
+        version: 16.1.1(postcss@8.5.6)
+      postcss-preset-env:
+        specifier: 'catalog:'
+        version: 10.5.0(postcss@8.5.6)
+      tailwindcss:
+        specifier: 'catalog:'
+        version: 3.4.19(yaml@2.8.2)
+      tailwindcss-animate:
+        specifier: 'catalog:'
+        version: 1.0.7(tailwindcss@3.4.19(yaml@2.8.2))
+    devDependencies:
+      '@types/postcss-import':
+        specifier: 'catalog:'
+        version: 14.0.3
+
+  internal/tsconfig:
+    dependencies:
+      '@vben/types':
+        specifier: workspace:*
+        version: link:../../packages/types
+      vite:
+        specifier: 'catalog:'
+        version: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+
+  internal/vite-config:
+    dependencies:
+      '@intlify/unplugin-vue-i18n':
+        specifier: 'catalog:'
+        version: 6.0.8(@vue/compiler-dom@3.5.26)(eslint@9.39.2(jiti@2.6.1))(rollup@4.54.0)(typescript@5.9.3)(vue-i18n@11.2.7(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))
+      '@jspm/generator':
+        specifier: 'catalog:'
+        version: 2.8.0
+      archiver:
+        specifier: 'catalog:'
+        version: 7.0.1
+      cheerio:
+        specifier: 'catalog:'
+        version: 1.1.2
+      get-port:
+        specifier: 'catalog:'
+        version: 7.1.0
+      html-minifier-terser:
+        specifier: 'catalog:'
+        version: 7.2.0
+      nitropack:
+        specifier: 'catalog:'
+        version: 2.12.9
+      resolve.exports:
+        specifier: 'catalog:'
+        version: 2.0.3
+      vite-plugin-pwa:
+        specifier: 'catalog:'
+        version: 1.2.0(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0)
+      vite-plugin-vue-devtools:
+        specifier: 'catalog:'
+        version: 8.0.5(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+    devDependencies:
+      '@pnpm/workspace.read-manifest':
+        specifier: 'catalog:'
+        version: 1000.2.9
+      '@types/archiver':
+        specifier: 'catalog:'
+        version: 6.0.4
+      '@types/html-minifier-terser':
+        specifier: 'catalog:'
+        version: 7.0.2
+      '@vben/node-utils':
+        specifier: workspace:*
+        version: link:../node-utils
+      '@vitejs/plugin-vue':
+        specifier: 'catalog:'
+        version: 6.0.3(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+      '@vitejs/plugin-vue-jsx':
+        specifier: 'catalog:'
+        version: 5.1.3(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+      dayjs:
+        specifier: 'catalog:'
+        version: 1.11.19
+      dotenv:
+        specifier: 'catalog:'
+        version: 16.6.1
+      rollup:
+        specifier: 'catalog:'
+        version: 4.54.0
+      rollup-plugin-visualizer:
+        specifier: 'catalog:'
+        version: 5.14.0(rollup@4.54.0)
+      sass:
+        specifier: 'catalog:'
+        version: 1.97.1
+      vite:
+        specifier: 'catalog:'
+        version: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite-plugin-compression:
+        specifier: 'catalog:'
+        version: 0.5.1(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
+      vite-plugin-dts:
+        specifier: 'catalog:'
+        version: 4.5.4(@types/node@25.0.3)(rollup@4.54.0)(typescript@5.9.3)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
+      vite-plugin-html:
+        specifier: 'catalog:'
+        version: 3.2.2(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
+      vite-plugin-lazy-import:
+        specifier: 'catalog:'
+        version: 1.0.7
+
+  packages/@core/base/design: {}
+
+  packages/@core/base/icons:
+    dependencies:
+      '@iconify/vue':
+        specifier: 'catalog:'
+        version: 5.0.0(vue@3.5.26(typescript@5.9.3))
+      lucide-vue-next:
+        specifier: 'catalog:'
+        version: 0.553.0(vue@3.5.26(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+
+  packages/@core/base/shared:
+    dependencies:
+      '@ctrl/tinycolor':
+        specifier: ^4.1.0
+        version: 4.2.0
+      '@tanstack/vue-store':
+        specifier: 'catalog:'
+        version: 0.8.0(vue@3.5.26(typescript@5.9.3))
+      '@vue/shared':
+        specifier: 'catalog:'
+        version: 3.5.26
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      dayjs:
+        specifier: 'catalog:'
+        version: 1.11.19
+      defu:
+        specifier: 'catalog:'
+        version: 6.1.4
+      es-toolkit:
+        specifier: 'catalog:'
+        version: 1.43.0
+      lodash.clonedeep:
+        specifier: 'catalog:'
+        version: 4.5.0
+      nprogress:
+        specifier: 'catalog:'
+        version: 0.2.0
+      tailwind-merge:
+        specifier: 'catalog:'
+        version: 2.6.0
+      theme-colors:
+        specifier: 'catalog:'
+        version: 0.1.0
+    devDependencies:
+      '@types/lodash.clonedeep':
+        specifier: 'catalog:'
+        version: 4.5.9
+      '@types/lodash.get':
+        specifier: 'catalog:'
+        version: 4.4.9
+      '@types/lodash.isequal':
+        specifier: 'catalog:'
+        version: 4.5.8
+      '@types/lodash.set':
+        specifier: 'catalog:'
+        version: 4.3.9
+      '@types/nprogress':
+        specifier: 'catalog:'
+        version: 0.2.3
+
+  packages/@core/base/typings:
+    dependencies:
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.4(vue@3.5.26(typescript@5.9.3))
+
+  packages/@core/composables:
+    dependencies:
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../base/shared
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      reka-ui:
+        specifier: 'catalog:'
+        version: 2.7.0(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
+      sortablejs:
+        specifier: 'catalog:'
+        version: 1.15.6
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+    devDependencies:
+      '@types/sortablejs':
+        specifier: 'catalog:'
+        version: 1.15.9
+
+  packages/@core/preferences:
+    dependencies:
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../base/shared
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../base/typings
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+
+  packages/@core/ui-kit/form-ui:
+    dependencies:
+      '@vben-core/composables':
+        specifier: workspace:*
+        version: link:../../composables
+      '@vben-core/icons':
+        specifier: workspace:*
+        version: link:../../base/icons
+      '@vben-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../shadcn-ui
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../../base/shared
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../../base/typings
+      '@vee-validate/zod':
+        specifier: 'catalog:'
+        version: 4.15.1(vue@3.5.26(typescript@5.9.3))(zod@3.25.76)
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      vee-validate:
+        specifier: 'catalog:'
+        version: 4.15.1(vue@3.5.26(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+      zod:
+        specifier: 'catalog:'
+        version: 3.25.76
+      zod-defaults:
+        specifier: 'catalog:'
+        version: 0.1.3(zod@3.25.76)
+
+  packages/@core/ui-kit/layout-ui:
+    dependencies:
+      '@vben-core/composables':
+        specifier: workspace:*
+        version: link:../../composables
+      '@vben-core/icons':
+        specifier: workspace:*
+        version: link:../../base/icons
+      '@vben-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../shadcn-ui
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../../base/shared
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../../base/typings
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+
+  packages/@core/ui-kit/menu-ui:
+    dependencies:
+      '@vben-core/composables':
+        specifier: workspace:*
+        version: link:../../composables
+      '@vben-core/icons':
+        specifier: workspace:*
+        version: link:../../base/icons
+      '@vben-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../shadcn-ui
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../../base/shared
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../../base/typings
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+
+  packages/@core/ui-kit/popup-ui:
+    dependencies:
+      '@vben-core/composables':
+        specifier: workspace:*
+        version: link:../../composables
+      '@vben-core/icons':
+        specifier: workspace:*
+        version: link:../../base/icons
+      '@vben-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../shadcn-ui
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../../base/shared
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../../base/typings
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+
+  packages/@core/ui-kit/shadcn-ui:
+    dependencies:
+      '@vben-core/composables':
+        specifier: workspace:*
+        version: link:../../composables
+      '@vben-core/icons':
+        specifier: workspace:*
+        version: link:../../base/icons
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../../base/shared
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../../base/typings
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      class-variance-authority:
+        specifier: 'catalog:'
+        version: 0.7.1
+      lucide-vue-next:
+        specifier: 'catalog:'
+        version: 0.553.0(vue@3.5.26(typescript@5.9.3))
+      reka-ui:
+        specifier: 'catalog:'
+        version: 2.7.0(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
+      vee-validate:
+        specifier: 'catalog:'
+        version: 4.15.1(vue@3.5.26(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+
+  packages/@core/ui-kit/tabs-ui:
+    dependencies:
+      '@vben-core/composables':
+        specifier: workspace:*
+        version: link:../../composables
+      '@vben-core/icons':
+        specifier: workspace:*
+        version: link:../../base/icons
+      '@vben-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../shadcn-ui
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../../base/typings
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+
+  packages/constants:
+    dependencies:
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../@core/base/shared
+
+  packages/effects/access:
+    dependencies:
+      '@vben/preferences':
+        specifier: workspace:*
+        version: link:../../preferences
+      '@vben/stores':
+        specifier: workspace:*
+        version: link:../../stores
+      '@vben/types':
+        specifier: workspace:*
+        version: link:../../types
+      '@vben/utils':
+        specifier: workspace:*
+        version: link:../../utils
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+
+  packages/effects/common-ui:
+    dependencies:
+      '@vben-core/form-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/form-ui
+      '@vben-core/popup-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/popup-ui
+      '@vben-core/preferences':
+        specifier: workspace:*
+        version: link:../../@core/preferences
+      '@vben-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/shadcn-ui
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../../@core/base/shared
+      '@vben/constants':
+        specifier: workspace:*
+        version: link:../../constants
+      '@vben/hooks':
+        specifier: workspace:*
+        version: link:../hooks
+      '@vben/icons':
+        specifier: workspace:*
+        version: link:../../icons
+      '@vben/locales':
+        specifier: workspace:*
+        version: link:../../locales
+      '@vben/types':
+        specifier: workspace:*
+        version: link:../../types
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      '@vueuse/integrations':
+        specifier: 'catalog:'
+        version: 14.1.0(async-validator@4.2.5)(axios@1.13.2)(change-case@5.4.4)(focus-trap@7.7.0)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.26(typescript@5.9.3))
+      json-bigint:
+        specifier: 'catalog:'
+        version: 1.0.0
+      qrcode:
+        specifier: 'catalog:'
+        version: 1.5.4
+      tippy.js:
+        specifier: 'catalog:'
+        version: 6.3.7
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+      vue-json-viewer:
+        specifier: 'catalog:'
+        version: 3.0.4(vue@3.5.26(typescript@5.9.3))
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.4(vue@3.5.26(typescript@5.9.3))
+      vue-tippy:
+        specifier: 'catalog:'
+        version: 6.7.1(vue@3.5.26(typescript@5.9.3))
+    devDependencies:
+      '@types/qrcode':
+        specifier: 'catalog:'
+        version: 1.5.6
+
+  packages/effects/hooks:
+    dependencies:
+      '@vben-core/composables':
+        specifier: workspace:*
+        version: link:../../@core/composables
+      '@vben/preferences':
+        specifier: workspace:*
+        version: link:../../preferences
+      '@vben/stores':
+        specifier: workspace:*
+        version: link:../../stores
+      '@vben/types':
+        specifier: workspace:*
+        version: link:../../types
+      '@vben/utils':
+        specifier: workspace:*
+        version: link:../../utils
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.4(vue@3.5.26(typescript@5.9.3))
+      watermark-js-plus:
+        specifier: 'catalog:'
+        version: 1.6.3
+
+  packages/effects/layouts:
+    dependencies:
+      '@vben-core/composables':
+        specifier: workspace:*
+        version: link:../../@core/composables
+      '@vben-core/form-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/form-ui
+      '@vben-core/layout-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/layout-ui
+      '@vben-core/menu-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/menu-ui
+      '@vben-core/popup-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/popup-ui
+      '@vben-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/shadcn-ui
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../../@core/base/shared
+      '@vben-core/tabs-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/tabs-ui
+      '@vben/constants':
+        specifier: workspace:*
+        version: link:../../constants
+      '@vben/hooks':
+        specifier: workspace:*
+        version: link:../hooks
+      '@vben/icons':
+        specifier: workspace:*
+        version: link:../../icons
+      '@vben/locales':
+        specifier: workspace:*
+        version: link:../../locales
+      '@vben/preferences':
+        specifier: workspace:*
+        version: link:../../preferences
+      '@vben/stores':
+        specifier: workspace:*
+        version: link:../../stores
+      '@vben/types':
+        specifier: workspace:*
+        version: link:../../types
+      '@vben/utils':
+        specifier: workspace:*
+        version: link:../../utils
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.4(vue@3.5.26(typescript@5.9.3))
+
+  packages/effects/plugins:
+    dependencies:
+      '@vben-core/form-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/form-ui
+      '@vben-core/shadcn-ui':
+        specifier: workspace:*
+        version: link:../../@core/ui-kit/shadcn-ui
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../../@core/base/shared
+      '@vben/hooks':
+        specifier: workspace:*
+        version: link:../hooks
+      '@vben/icons':
+        specifier: workspace:*
+        version: link:../../icons
+      '@vben/locales':
+        specifier: workspace:*
+        version: link:../../locales
+      '@vben/preferences':
+        specifier: workspace:*
+        version: link:../../preferences
+      '@vben/types':
+        specifier: workspace:*
+        version: link:../../types
+      '@vben/utils':
+        specifier: workspace:*
+        version: link:../../utils
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.26(typescript@5.9.3))
+      '@vueuse/motion':
+        specifier: 'catalog:'
+        version: 3.0.3(magicast@0.5.1)(vue@3.5.26(typescript@5.9.3))
+      echarts:
+        specifier: 'catalog:'
+        version: 6.0.0
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+      vxe-pc-ui:
+        specifier: 'catalog:'
+        version: 4.11.17(vue@3.5.26(typescript@5.9.3))
+      vxe-table:
+        specifier: 'catalog:'
+        version: 4.17.33(vue@3.5.26(typescript@5.9.3))
+
+  packages/effects/request:
+    dependencies:
+      '@vben/locales':
+        specifier: workspace:*
+        version: link:../../locales
+      '@vben/utils':
+        specifier: workspace:*
+        version: link:../../utils
+      axios:
+        specifier: 'catalog:'
+        version: 1.13.2
+      qs:
+        specifier: 'catalog:'
+        version: 6.14.0
+    devDependencies:
+      '@types/qs':
+        specifier: 'catalog:'
+        version: 6.14.0
+      axios-mock-adapter:
+        specifier: 'catalog:'
+        version: 2.1.0(axios@1.13.2)
+
+  packages/icons:
+    dependencies:
+      '@vben-core/icons':
+        specifier: workspace:*
+        version: link:../@core/base/icons
+    devDependencies:
+      '@iconify/icons-ant-design':
+        specifier: ^1.2.7
+        version: 1.2.7
+      '@iconify/icons-arcticons':
+        specifier: ^1.2.1
+        version: 1.2.77
+      '@iconify/icons-fa-brands':
+        specifier: ^1.2.4
+        version: 1.2.4
+      '@iconify/icons-flat-color-icons':
+        specifier: ^1.2.5
+        version: 1.2.5
+      '@iconify/icons-la':
+        specifier: ^1.2.3
+        version: 1.2.3
+      '@iconify/icons-logos':
+        specifier: ^1.2.36
+        version: 1.2.36
+      '@iconify/icons-ri':
+        specifier: ^1.2.10
+        version: 1.2.10
+      '@iconify/icons-simple-icons':
+        specifier: ^1.2.74
+        version: 1.2.74
+      '@iconify/icons-uiw':
+        specifier: ^1.2.6
+        version: 1.2.6
+
+  packages/locales:
+    dependencies:
+      '@intlify/core-base':
+        specifier: 'catalog:'
+        version: 11.2.7
+      '@vben-core/composables':
+        specifier: workspace:*
+        version: link:../@core/composables
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+      vue-i18n:
+        specifier: 'catalog:'
+        version: 11.2.7(vue@3.5.26(typescript@5.9.3))
+
+  packages/preferences:
+    dependencies:
+      '@vben-core/preferences':
+        specifier: workspace:*
+        version: link:../@core/preferences
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../@core/base/typings
+
+  packages/stores:
+    dependencies:
+      '@vben-core/preferences':
+        specifier: workspace:*
+        version: link:../@core/preferences
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../@core/base/shared
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../@core/base/typings
+      pinia:
+        specifier: ^3.0.3
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
+      pinia-plugin-persistedstate:
+        specifier: 'catalog:'
+        version: 4.7.1(@nuxt/kit@4.2.2(magicast@0.5.1))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3)))
+      secure-ls:
+        specifier: 'catalog:'
+        version: 2.0.0
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.4(vue@3.5.26(typescript@5.9.3))
+
+  packages/styles:
+    dependencies:
+      '@vben-core/design':
+        specifier: workspace:*
+        version: link:../@core/base/design
+
+  packages/types:
+    dependencies:
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../@core/base/typings
+      vue:
+        specifier: ^3.5.24
+        version: 3.5.26(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.4(vue@3.5.26(typescript@5.9.3))
+
+  packages/utils:
+    dependencies:
+      '@vben-core/shared':
+        specifier: workspace:*
+        version: link:../@core/base/shared
+      '@vben-core/typings':
+        specifier: workspace:*
+        version: link:../@core/base/typings
+      file-type:
+        specifier: ^19.5.0
+        version: 19.6.0
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.4(vue@3.5.26(typescript@5.9.3))
+
+  scripts/turbo-run:
+    dependencies:
+      '@clack/prompts':
+        specifier: 'catalog:'
+        version: 0.11.0
+      '@vben/node-utils':
+        specifier: workspace:*
+        version: link:../../internal/node-utils
+      cac:
+        specifier: 'catalog:'
+        version: 6.7.14
+
+  scripts/vsh:
+    dependencies:
+      '@vben/node-utils':
+        specifier: workspace:*
+        version: link:../../internal/node-utils
+      cac:
+        specifier: 'catalog:'
+        version: 6.7.14
+      circular-dependency-scanner:
+        specifier: 'catalog:'
+        version: 2.3.0
+      depcheck:
+        specifier: 'catalog:'
+        version: 1.4.7
+      publint:
+        specifier: 'catalog:'
+        version: 0.3.16
+
+packages:
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@ant-design/colors@6.0.0':
+    resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==}
+
+  '@ant-design/icons-svg@4.4.2':
+    resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==}
+
+  '@ant-design/icons-vue@7.0.1':
+    resolution: {integrity: sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  '@apideck/better-ajv-errors@0.3.6':
+    resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      ajv: '>=8'
+
+  '@ast-grep/napi-darwin-arm64@0.39.9':
+    resolution: {integrity: sha512-0gdBC2oPBkIBsh89yUXxJeK37QYRbp1qNZVuRGizT666ljgCw+2NIxHeQGNjwWuI0+g3exrd8FyqD3gMixRx3w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@ast-grep/napi-darwin-x64@0.39.9':
+    resolution: {integrity: sha512-7QuQNFwcVj71hDAMBErF+mVq2h92vUdHLKa/vq58HdRpix5G3DZqcTKoFjwhCNzc2wsNRAjV+BiIR01znQSxLA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@ast-grep/napi-linux-arm64-gnu@0.39.9':
+    resolution: {integrity: sha512-qXTjhagRYkPyHNACEzGi5q26OMRdSvLRRqi799oZaSDf96Xj+8tcB5+tFlH0NpqaP84GsZoQ15SfDXeoP4qdmQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@ast-grep/napi-linux-arm64-musl@0.39.9':
+    resolution: {integrity: sha512-U9KVohyburVGEWiiREFq+iTxdMdSbRyXL+yzCVvGPmLPW4Ca4zpX9Cret4jCJBp8dljSIK0C7txXAc7fM+6rag==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@ast-grep/napi-linux-x64-gnu@0.39.9':
+    resolution: {integrity: sha512-C5WwiNr/eE7lS0vl9bNdSXrsGIUAga2SaqV3G+ogVl9HeRU2jtGhv+3AgzGvYWj+PtnbtuZ2Nxkm10gEVPhv1A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@ast-grep/napi-linux-x64-musl@0.39.9':
+    resolution: {integrity: sha512-KutzZSMhHP3P43nQ+kNSbuiDaqkCcdqOcXLnq28MRvS+qwvW+01dJ8eWRlpMJC9vCJmaJAZfI7xkNSp74WkdxA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@ast-grep/napi-win32-arm64-msvc@0.39.9':
+    resolution: {integrity: sha512-S2kC6K9I7e70oMVn2FDICzVlz7SPZVWNCRKCBD+Dgy1OTn0byzmMLaGpjth3pqN93UCssEC03ooP3tuclS0JSA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@ast-grep/napi-win32-ia32-msvc@0.39.9':
+    resolution: {integrity: sha512-n18Dqtc7O5q8ZM9gBNkvLd+ajdjLNraw4ZoIcHelI7TnTvh1m6zR3tUuHNxPhL+IJfdKx3ne7ATKlEeiSlMn4g==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@ast-grep/napi-win32-x64-msvc@0.39.9':
+    resolution: {integrity: sha512-YOF7mO+6nvyRtMC179u82Vr1qIGOmoE1yjwr4cmAf7DVNd+vs42y9tbQGYwLmVY8M3Hg1PviB8XX7FQKewuOGQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@ast-grep/napi@0.39.9':
+    resolution: {integrity: sha512-qtLLQq1a3isK0iaq0Drl7Qt4PqeyjTrpFxNdA/20O/jYkGiA/oJA8DLMn1bzczsfjlUohe4dg39bpeAqG02uvA==}
+    engines: {node: '>= 10'}
+
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.28.5':
+    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.28.5':
+    resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.28.5':
+    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.27.2':
+    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.28.5':
+    resolution: {integrity: sha512-q3WC4JfdODypvxArsJQROfupPBq9+lMwjKq7C33GhbFYJsufD0yd/ziwD+hJucLeWsnFPWZjsU2DNFqBPE7jwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-create-regexp-features-plugin@7.28.5':
+    resolution: {integrity: sha512-N1EhvLtHzOvj7QQOUCCS3NrPJP8c5W6ZXCHDn7Yialuy1iu4r5EmIYkXlKNqT99Ciw+W0mDqWoR6HWMZlFP3hw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-define-polyfill-provider@0.6.5':
+    resolution: {integrity: sha512-uJnGFcPsWQK8fvjgGP5LZUZZsYGIoPeRjSF5PGwrelYgq7Q15/Ft9NGFp1zglwgIv//W0uG4BevRuSJRyylZPg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.27.1':
+    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.3':
+    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.27.1':
+    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-remap-async-to-generator@7.27.1':
+    resolution: {integrity: sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-replace-supers@7.27.1':
+    resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-wrap-function@7.28.3':
+    resolution: {integrity: sha512-zdf983tNfLZFletc0RRXYrHrucBEg95NIFMkn6K9dbeMYnsgHaSBGcQqdsCSStG2PYwRre0Qc2NNSCXbG+xc6g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.4':
+    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.28.5':
+    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5':
+    resolution: {integrity: sha512-87GDMS3tsmMSi/3bWOte1UblL+YUTFMV8SZPZ2eSEL17s74Cw/l63rR6NmGVKMYW2GYi85nE+/d6Hw5N0bEk2Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1':
+    resolution: {integrity: sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1':
+    resolution: {integrity: sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1':
+    resolution: {integrity: sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.13.0
+
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.3':
+    resolution: {integrity: sha512-b6YTX108evsvE4YgWyQ921ZAFFQm3Bn+CA3+ZXlNVnPhx+UfsVURoPjfGAPCjBgrqo30yX/C2nZGX96DxvR9Iw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-proposal-decorators@7.28.0':
+    resolution: {integrity: sha512-zOiZqvANjWDUaUS9xMxbMcK/Zccztbe/6ikvUXaG9nsPH3w6qh5UaPGAnirI/WhIbZ8m3OHU0ReyPrknG+ZKeg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2':
+    resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-decorators@7.27.1':
+    resolution: {integrity: sha512-YMq8Z87Lhl8EGkmb0MwYkt36QnxC+fzCgrl66ereamPlYToRpIk5nUjKUY3QKLWq8mwUB1BgbeXcTJhZOCDg5A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-assertions@7.27.1':
+    resolution: {integrity: sha512-UT/Jrhw57xg4ILHLFnzFpPDlMbcdEicaAtjPQpbj9wa8T4r5KVWCimHcL/460g8Ht0DMxDyjsLgiWSkVjnwPFg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-attributes@7.27.1':
+    resolution: {integrity: sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-import-meta@7.10.4':
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-jsx@7.27.1':
+    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.27.1':
+    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6':
+    resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-arrow-functions@7.27.1':
+    resolution: {integrity: sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-async-generator-functions@7.28.0':
+    resolution: {integrity: sha512-BEOdvX4+M765icNPZeidyADIvQ1m1gmunXufXxvRESy/jNNyfovIqUyE7MVgGBjWktCoJlzvFA1To2O4ymIO3Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-async-to-generator@7.27.1':
+    resolution: {integrity: sha512-NREkZsZVJS4xmTr8qzE5y8AfIPqsdQfRuUiLRTEzb7Qii8iFWCyDKaUV2c0rCuh4ljDZ98ALHP/PetiBV2nddA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-block-scoped-functions@7.27.1':
+    resolution: {integrity: sha512-cnqkuOtZLapWYZUYM5rVIdv1nXYuFVIltZ6ZJ7nIj585QsjKM5dhL2Fu/lICXZ1OyIAFc7Qy+bvDAtTXqGrlhg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-block-scoping@7.28.5':
+    resolution: {integrity: sha512-45DmULpySVvmq9Pj3X9B+62Xe+DJGov27QravQJU1LLcapR6/10i+gYVAucGGJpHBp5mYxIMK4nDAT/QDLr47g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-class-properties@7.27.1':
+    resolution: {integrity: sha512-D0VcalChDMtuRvJIu3U/fwWjf8ZMykz5iZsg77Nuj821vCKI3zCyRLwRdWbsuJ/uRwZhZ002QtCqIkwC/ZkvbA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-class-static-block@7.28.3':
+    resolution: {integrity: sha512-LtPXlBbRoc4Njl/oh1CeD/3jC+atytbnf/UqLoqTDcEYGUPj022+rvfkbDYieUrSj3CaV4yHDByPE+T2HwfsJg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.12.0
+
+  '@babel/plugin-transform-classes@7.28.4':
+    resolution: {integrity: sha512-cFOlhIYPBv/iBoc+KS3M6et2XPtbT2HiCRfBXWtfpc9OAyostldxIf9YAYB6ypURBBbx+Qv6nyrLzASfJe+hBA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-computed-properties@7.27.1':
+    resolution: {integrity: sha512-lj9PGWvMTVksbWiDT2tW68zGS/cyo4AkZ/QTp0sQT0mjPopCmrSkzxeXkznjqBxzDI6TclZhOJbBmbBLjuOZUw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-destructuring@7.28.5':
+    resolution: {integrity: sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-dotall-regex@7.27.1':
+    resolution: {integrity: sha512-gEbkDVGRvjj7+T1ivxrfgygpT7GUd4vmODtYpbs0gZATdkX8/iSnOtZSxiZnsgm1YjTgjI6VKBGSJJevkrclzw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-duplicate-keys@7.27.1':
+    resolution: {integrity: sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.27.1':
+    resolution: {integrity: sha512-hkGcueTEzuhB30B3eJCbCYeCaaEQOmQR0AdvzpD4LoN0GXMWzzGSuRrxR2xTnCrvNbVwK9N6/jQ92GSLfiZWoQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-dynamic-import@7.27.1':
+    resolution: {integrity: sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-explicit-resource-management@7.28.0':
+    resolution: {integrity: sha512-K8nhUcn3f6iB+P3gwCv/no7OdzOZQcKchW6N389V6PD8NUWKZHzndOd9sPDVbMoBsbmjMqlB4L9fm+fEFNVlwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-exponentiation-operator@7.28.5':
+    resolution: {integrity: sha512-D4WIMaFtwa2NizOp+dnoFjRez/ClKiC2BqqImwKd1X28nqBtZEyCYJ2ozQrrzlxAFrcrjxo39S6khe9RNDlGzw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-export-namespace-from@7.27.1':
+    resolution: {integrity: sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-for-of@7.27.1':
+    resolution: {integrity: sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-function-name@7.27.1':
+    resolution: {integrity: sha512-1bQeydJF9Nr1eBCMMbC+hdwmRlsv5XYOMu03YSWFwNs0HsAmtSxxF1fyuYPqemVldVyFmlCU7w8UE14LupUSZQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-json-strings@7.27.1':
+    resolution: {integrity: sha512-6WVLVJiTjqcQauBhn1LkICsR2H+zm62I3h9faTDKt1qP4jn2o72tSvqMwtGFKGTpojce0gJs+76eZ2uCHRZh0Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-literals@7.27.1':
+    resolution: {integrity: sha512-0HCFSepIpLTkLcsi86GG3mTUzxV5jpmbv97hTETW3yzrAij8aqlD36toB1D0daVFJM8NK6GvKO0gslVQmm+zZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-logical-assignment-operators@7.28.5':
+    resolution: {integrity: sha512-axUuqnUTBuXyHGcJEVVh9pORaN6wC5bYfE7FGzPiaWa3syib9m7g+/IT/4VgCOe2Upef43PHzeAvcrVek6QuuA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-member-expression-literals@7.27.1':
+    resolution: {integrity: sha512-hqoBX4dcZ1I33jCSWcXrP+1Ku7kdqXf1oeah7ooKOIiAdKQ+uqftgCFNOSzA5AMS2XIHEYeGFg4cKRCdpxzVOQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-amd@7.27.1':
+    resolution: {integrity: sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-commonjs@7.27.1':
+    resolution: {integrity: sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-systemjs@7.28.5':
+    resolution: {integrity: sha512-vn5Jma98LCOeBy/KpeQhXcV2WZgaRUtjwQmjoBuLNlOmkg0fB5pdvYVeWRYI69wWKwK2cD1QbMiUQnoujWvrew==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-umd@7.27.1':
+    resolution: {integrity: sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1':
+    resolution: {integrity: sha512-SstR5JYy8ddZvD6MhV0tM/j16Qds4mIpJTOd1Yu9J9pJjH93bxHECF7pgtc28XvkzTD6Pxcm/0Z73Hvk7kb3Ng==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-new-target@7.27.1':
+    resolution: {integrity: sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1':
+    resolution: {integrity: sha512-aGZh6xMo6q9vq1JGcw58lZ1Z0+i0xB2x0XaauNIUXd6O1xXc3RwoWEBlsTQrY4KQ9Jf0s5rgD6SiNkaUdJegTA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-numeric-separator@7.27.1':
+    resolution: {integrity: sha512-fdPKAcujuvEChxDBJ5c+0BTaS6revLV7CJL08e4m3de8qJfNIuCc2nc7XJYOjBoTMJeqSmwXJ0ypE14RCjLwaw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-object-rest-spread@7.28.4':
+    resolution: {integrity: sha512-373KA2HQzKhQCYiRVIRr+3MjpCObqzDlyrM6u4I201wL8Mp2wHf7uB8GhDwis03k2ti8Zr65Zyyqs1xOxUF/Ew==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-object-super@7.27.1':
+    resolution: {integrity: sha512-SFy8S9plRPbIcxlJ8A6mT/CxFdJx/c04JEctz4jf8YZaVS2px34j7NXRrlGlHkN/M2gnpL37ZpGRGVFLd3l8Ng==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-optional-catch-binding@7.27.1':
+    resolution: {integrity: sha512-txEAEKzYrHEX4xSZN4kJ+OfKXFVSWKB2ZxM9dpcE3wT7smwkNmXo5ORRlVzMVdJbD+Q8ILTgSD7959uj+3Dm3Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-optional-chaining@7.28.5':
+    resolution: {integrity: sha512-N6fut9IZlPnjPwgiQkXNhb+cT8wQKFlJNqcZkWlcTqkcqx6/kU4ynGmLFoa4LViBSirn05YAwk+sQBbPfxtYzQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-parameters@7.27.7':
+    resolution: {integrity: sha512-qBkYTYCb76RRxUM6CcZA5KRu8K4SM8ajzVeUgVdMVO9NN9uI/GaVmBg/WKJJGnNokV9SY8FxNOVWGXzqzUidBg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-private-methods@7.27.1':
+    resolution: {integrity: sha512-10FVt+X55AjRAYI9BrdISN9/AQWHqldOeZDUoLyif1Kn05a56xVBXb8ZouL8pZ9jem8QpXaOt8TS7RHUIS+GPA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-private-property-in-object@7.27.1':
+    resolution: {integrity: sha512-5J+IhqTi1XPa0DXF83jYOaARrX+41gOewWbkPyjMNRDqgOCqdffGh8L3f/Ek5utaEBZExjSAzcyjmV9SSAWObQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-property-literals@7.27.1':
+    resolution: {integrity: sha512-oThy3BCuCha8kDZ8ZkgOg2exvPYUlprMukKQXI1r1pJ47NCvxfkEy8vK+r/hT9nF0Aa4H1WUPZZjHTFtAhGfmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-regenerator@7.28.4':
+    resolution: {integrity: sha512-+ZEdQlBoRg9m2NnzvEeLgtvBMO4tkFBw5SQIUgLICgTrumLoU7lr+Oghi6km2PFj+dbUt2u1oby2w3BDO9YQnA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-regexp-modifiers@7.27.1':
+    resolution: {integrity: sha512-TtEciroaiODtXvLZv4rmfMhkCv8jx3wgKpL68PuiPh2M4fvz5jhsA7697N1gMvkvr/JTF13DrFYyEbY9U7cVPA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-reserved-words@7.27.1':
+    resolution: {integrity: sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-shorthand-properties@7.27.1':
+    resolution: {integrity: sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-spread@7.27.1':
+    resolution: {integrity: sha512-kpb3HUqaILBJcRFVhFUs6Trdd4mkrzcGXss+6/mxUd273PfbWqSDHRzMT2234gIg2QYfAjvXLSquP1xECSg09Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-sticky-regex@7.27.1':
+    resolution: {integrity: sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-template-literals@7.27.1':
+    resolution: {integrity: sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typeof-symbol@7.27.1':
+    resolution: {integrity: sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.28.5':
+    resolution: {integrity: sha512-x2Qa+v/CuEoX7Dr31iAfr0IhInrVOWZU/2vJMJ00FOR/2nM0BcBEclpaf9sWCDc+v5e9dMrhSH8/atq/kX7+bA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-escapes@7.27.1':
+    resolution: {integrity: sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-property-regex@7.27.1':
+    resolution: {integrity: sha512-uW20S39PnaTImxp39O5qFlHLS9LJEmANjMG7SxIhap8rCHqu0Ik+tLEPX5DKmHn6CsWQ7j3lix2tFOa5YtL12Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-regex@7.27.1':
+    resolution: {integrity: sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-unicode-sets-regex@7.27.1':
+    resolution: {integrity: sha512-EtkOujbc4cgvb0mlpQefi4NTPBzhSIevblFevACNLUspmrALgmEBdL/XfnyyITfd8fKBZrZys92zOWcik7j9Tw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/preset-env@7.28.5':
+    resolution: {integrity: sha512-S36mOoi1Sb6Fz98fBfE+UZSpYw5mJm0NUHtIKrOuNcqeFauy1J6dIvXm2KRVKobOSaGq4t/hBXdN4HGU3wL9Wg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/preset-modules@0.1.6-no-external-plugins':
+    resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
+
+  '@babel/preset-typescript@7.28.5':
+    resolution: {integrity: sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.27.2':
+    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.28.5':
+    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.28.5':
+    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
+    engines: {node: '>=6.9.0'}
+
+  '@borewit/text-codec@0.2.1':
+    resolution: {integrity: sha512-k7vvKPbf7J2fZ5klGRD9AeKfUvojuZIQ3BT5u7Jfv+puwXkUBUT5PVyMDfJZpy30CBDXGMgw7fguK/lpOMBvgw==}
+
+  '@cacheable/memory@2.0.6':
+    resolution: {integrity: sha512-7e8SScMocHxcAb8YhtkbMhGG+EKLRIficb1F5sjvhSYsWTZGxvg4KIDp8kgxnV2PUJ3ddPe6J9QESjKvBWRDkg==}
+
+  '@cacheable/utils@2.3.2':
+    resolution: {integrity: sha512-8kGE2P+HjfY8FglaOiW+y8qxcaQAfAhVML+i66XJR3YX5FtyDqn6Txctr3K2FrbxLKixRRYYBWMbuGciOhYNDg==}
+
+  '@changesets/apply-release-plan@7.0.14':
+    resolution: {integrity: sha512-ddBvf9PHdy2YY0OUiEl3TV78mH9sckndJR14QAt87KLEbIov81XO0q0QAmvooBxXlqRRP8I9B7XOzZwQG7JkWA==}
+
+  '@changesets/assemble-release-plan@6.0.9':
+    resolution: {integrity: sha512-tPgeeqCHIwNo8sypKlS3gOPmsS3wP0zHt67JDuL20P4QcXiw/O4Hl7oXiuLnP9yg+rXLQ2sScdV1Kkzde61iSQ==}
+
+  '@changesets/changelog-git@0.2.1':
+    resolution: {integrity: sha512-x/xEleCFLH28c3bQeQIyeZf8lFXyDFVn1SgcBiR2Tw/r4IAWlk1fzxCEZ6NxQAjF2Nwtczoen3OA2qR+UawQ8Q==}
+
+  '@changesets/changelog-github@0.5.2':
+    resolution: {integrity: sha512-HeGeDl8HaIGj9fQHo/tv5XKQ2SNEi9+9yl1Bss1jttPqeiASRXhfi0A2wv8yFKCp07kR1gpOI5ge6+CWNm1jPw==}
+
+  '@changesets/cli@2.29.8':
+    resolution: {integrity: sha512-1weuGZpP63YWUYjay/E84qqwcnt5yJMM0tep10Up7Q5cS/DGe2IZ0Uj3HNMxGhCINZuR7aO9WBMdKnPit5ZDPA==}
+    hasBin: true
+
+  '@changesets/config@3.1.2':
+    resolution: {integrity: sha512-CYiRhA4bWKemdYi/uwImjPxqWNpqGPNbEBdX1BdONALFIDK7MCUj6FPkzD+z9gJcvDFUQJn9aDVf4UG7OT6Kog==}
+
+  '@changesets/errors@0.2.0':
+    resolution: {integrity: sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==}
+
+  '@changesets/get-dependents-graph@2.1.3':
+    resolution: {integrity: sha512-gphr+v0mv2I3Oxt19VdWRRUxq3sseyUpX9DaHpTUmLj92Y10AGy+XOtV+kbM6L/fDcpx7/ISDFK6T8A/P3lOdQ==}
+
+  '@changesets/get-github-info@0.7.0':
+    resolution: {integrity: sha512-+i67Bmhfj9V4KfDeS1+Tz3iF32btKZB2AAx+cYMqDSRFP7r3/ZdGbjCo+c6qkyViN9ygDuBjzageuPGJtKGe5A==}
+
+  '@changesets/get-release-plan@4.0.14':
+    resolution: {integrity: sha512-yjZMHpUHgl4Xl5gRlolVuxDkm4HgSJqT93Ri1Uz8kGrQb+5iJ8dkXJ20M2j/Y4iV5QzS2c5SeTxVSKX+2eMI0g==}
+
+  '@changesets/get-version-range-type@0.4.0':
+    resolution: {integrity: sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==}
+
+  '@changesets/git@3.0.4':
+    resolution: {integrity: sha512-BXANzRFkX+XcC1q/d27NKvlJ1yf7PSAgi8JG6dt8EfbHFHi4neau7mufcSca5zRhwOL8j9s6EqsxmT+s+/E6Sw==}
+
+  '@changesets/logger@0.1.1':
+    resolution: {integrity: sha512-OQtR36ZlnuTxKqoW4Sv6x5YIhOmClRd5pWsjZsddYxpWs517R0HkyiefQPIytCVh4ZcC5x9XaG8KTdd5iRQUfg==}
+
+  '@changesets/parse@0.4.2':
+    resolution: {integrity: sha512-Uo5MC5mfg4OM0jU3up66fmSn6/NE9INK+8/Vn/7sMVcdWg46zfbvvUSjD9EMonVqPi9fbrJH9SXHn48Tr1f2yA==}
+
+  '@changesets/pre@2.0.2':
+    resolution: {integrity: sha512-HaL/gEyFVvkf9KFg6484wR9s0qjAXlZ8qWPDkTyKF6+zqjBe/I2mygg3MbpZ++hdi0ToqNUF8cjj7fBy0dg8Ug==}
+
+  '@changesets/read@0.6.6':
+    resolution: {integrity: sha512-P5QaN9hJSQQKJShzzpBT13FzOSPyHbqdoIBUd2DJdgvnECCyO6LmAOWSV+O8se2TaZJVwSXjL+v9yhb+a9JeJg==}
+
+  '@changesets/should-skip-package@0.1.2':
+    resolution: {integrity: sha512-qAK/WrqWLNCP22UDdBTMPH5f41elVDlsNyat180A33dWxuUDyNpg6fPi/FyTZwRriVjg0L8gnjJn2F9XAoF0qw==}
+
+  '@changesets/types@4.1.0':
+    resolution: {integrity: sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==}
+
+  '@changesets/types@6.1.0':
+    resolution: {integrity: sha512-rKQcJ+o1nKNgeoYRHKOS07tAMNd3YSN0uHaJOZYjBAgxfV7TUE7JE+z4BzZdQwb5hKaYbayKN5KrYV7ODb2rAA==}
+
+  '@changesets/write@0.4.0':
+    resolution: {integrity: sha512-CdTLvIOPiCNuH71pyDu3rA+Q0n65cmAbXnwWH84rKGiFumFzkmHNT8KHTMEchcxN+Kl8I54xGUhJ7l3E7X396Q==}
+
+  '@clack/core@0.5.0':
+    resolution: {integrity: sha512-p3y0FIOwaYRUPRcMO7+dlmLh8PSRcrjuTndsiA0WAFbWES0mLZlrjVoBRZ9DzkPFJZG6KGkJmoEAY0ZcVWTkow==}
+
+  '@clack/prompts@0.11.0':
+    resolution: {integrity: sha512-pMN5FcrEw9hUkZA4f+zLlzivQSeQf5dRGJjSUbvVYDLvpKCdQx5OaknvKzgbtXOizhP+SJJJjqEbOe55uKKfAw==}
+
+  '@cloudflare/kv-asset-handler@0.4.1':
+    resolution: {integrity: sha512-Nu8ahitGFFJztxUml9oD/DLb7Z28C8cd8F46IVQ7y5Btz575pvMY8AqZsXkX7Gds29eCKdMgIHjIvzskHgPSFg==}
+    engines: {node: '>=18.0.0'}
+
+  '@commitlint/cli@19.8.1':
+    resolution: {integrity: sha512-LXUdNIkspyxrlV6VDHWBmCZRtkEVRpBKxi2Gtw3J54cGWhLCTouVD/Q6ZSaSvd2YaDObWK8mDjrz3TIKtaQMAA==}
+    engines: {node: '>=v18'}
+    hasBin: true
+
+  '@commitlint/config-conventional@19.8.1':
+    resolution: {integrity: sha512-/AZHJL6F6B/G959CsMAzrPKKZjeEiAVifRyEwXxcT6qtqbPwGw+iQxmNS+Bu+i09OCtdNRW6pNpBvgPrtMr9EQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/config-validator@19.8.1':
+    resolution: {integrity: sha512-0jvJ4u+eqGPBIzzSdqKNX1rvdbSU1lPNYlfQQRIFnBgLy26BtC0cFnr7c/AyuzExMxWsMOte6MkTi9I3SQ3iGQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/ensure@19.8.1':
+    resolution: {integrity: sha512-mXDnlJdvDzSObafjYrOSvZBwkD01cqB4gbnnFuVyNpGUM5ijwU/r/6uqUmBXAAOKRfyEjpkGVZxaDsCVnHAgyw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/execute-rule@19.8.1':
+    resolution: {integrity: sha512-YfJyIqIKWI64Mgvn/sE7FXvVMQER/Cd+s3hZke6cI1xgNT/f6ZAz5heND0QtffH+KbcqAwXDEE1/5niYayYaQA==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/format@19.8.1':
+    resolution: {integrity: sha512-kSJj34Rp10ItP+Eh9oCItiuN/HwGQMXBnIRk69jdOwEW9llW9FlyqcWYbHPSGofmjsqeoxa38UaEA5tsbm2JWw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/is-ignored@19.8.1':
+    resolution: {integrity: sha512-AceOhEhekBUQ5dzrVhDDsbMaY5LqtN8s1mqSnT2Kz1ERvVZkNihrs3Sfk1Je/rxRNbXYFzKZSHaPsEJJDJV8dg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/lint@19.8.1':
+    resolution: {integrity: sha512-52PFbsl+1EvMuokZXLRlOsdcLHf10isTPlWwoY1FQIidTsTvjKXVXYb7AvtpWkDzRO2ZsqIgPK7bI98x8LRUEw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/load@19.8.1':
+    resolution: {integrity: sha512-9V99EKG3u7z+FEoe4ikgq7YGRCSukAcvmKQuTtUyiYPnOd9a2/H9Ak1J9nJA1HChRQp9OA/sIKPugGS+FK/k1A==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/message@19.8.1':
+    resolution: {integrity: sha512-+PMLQvjRXiU+Ae0Wc+p99EoGEutzSXFVwQfa3jRNUZLNW5odZAyseb92OSBTKCu+9gGZiJASt76Cj3dLTtcTdg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/parse@19.8.1':
+    resolution: {integrity: sha512-mmAHYcMBmAgJDKWdkjIGq50X4yB0pSGpxyOODwYmoexxxiUCy5JJT99t1+PEMK7KtsCtzuWYIAXYAiKR+k+/Jw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/read@19.8.1':
+    resolution: {integrity: sha512-03Jbjb1MqluaVXKHKRuGhcKWtSgh3Jizqy2lJCRbRrnWpcM06MYm8th59Xcns8EqBYvo0Xqb+2DoZFlga97uXQ==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/resolve-extends@19.8.1':
+    resolution: {integrity: sha512-GM0mAhFk49I+T/5UCYns5ayGStkTt4XFFrjjf0L4S26xoMTSkdCf9ZRO8en1kuopC4isDFuEm7ZOm/WRVeElVg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/rules@19.8.1':
+    resolution: {integrity: sha512-Hnlhd9DyvGiGwjfjfToMi1dsnw1EXKGJNLTcsuGORHz6SS9swRgkBsou33MQ2n51/boIDrbsg4tIBbRpEWK2kw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/to-lines@19.8.1':
+    resolution: {integrity: sha512-98Mm5inzbWTKuZQr2aW4SReY6WUukdWXuZhrqf1QdKPZBCCsXuG87c+iP0bwtD6DBnmVVQjgp4whoHRVixyPBg==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/top-level@19.8.1':
+    resolution: {integrity: sha512-Ph8IN1IOHPSDhURCSXBz44+CIu+60duFwRsg6HqaISFHQHbmBtxVw4ZrFNIYUzEP7WwrNPxa2/5qJ//NK1FGcw==}
+    engines: {node: '>=v18'}
+
+  '@commitlint/types@19.8.1':
+    resolution: {integrity: sha512-/yCrWGCoA1SVKOks25EGadP9Pnj0oAIHGpl2wH2M2Y46dPM2ueb8wyCVOD7O3WCTkaJ0IkKvzhl1JY7+uCT2Dw==}
+    engines: {node: '>=v18'}
+
+  '@cspell/cspell-bundled-dicts@8.19.4':
+    resolution: {integrity: sha512-2ZRcZP/ncJ5q953o8i+R0fb8+14PDt5UefUNMrFZZHvfTI0jukAASOQeLY+WT6ASZv6CgbPrApAdbppy9FaXYQ==}
+    engines: {node: '>=18'}
+
+  '@cspell/cspell-json-reporter@8.19.4':
+    resolution: {integrity: sha512-pOlUtLUmuDdTIOhDTvWxxta0Wm8RCD/p1V0qUqeP6/Ups1ajBI4FWEpRFd7yMBTUHeGeSNicJX5XeX7wNbAbLQ==}
+    engines: {node: '>=18'}
+
+  '@cspell/cspell-pipe@8.19.4':
+    resolution: {integrity: sha512-GNAyk+7ZLEcL2fCMT5KKZprcdsq3L1eYy3e38/tIeXfbZS7Sd1R5FXUe6CHXphVWTItV39TvtLiDwN/2jBts9A==}
+    engines: {node: '>=18'}
+
+  '@cspell/cspell-resolver@8.19.4':
+    resolution: {integrity: sha512-S8vJMYlsx0S1D60glX8H2Jbj4mD8519VjyY8lu3fnhjxfsl2bDFZvF3ZHKsLEhBE+Wh87uLqJDUJQiYmevHjDg==}
+    engines: {node: '>=18'}
+
+  '@cspell/cspell-service-bus@8.19.4':
+    resolution: {integrity: sha512-uhY+v8z5JiUogizXW2Ft/gQf3eWrh5P9036jN2Dm0UiwEopG/PLshHcDjRDUiPdlihvA0RovrF0wDh4ptcrjuQ==}
+    engines: {node: '>=18'}
+
+  '@cspell/cspell-types@8.19.4':
+    resolution: {integrity: sha512-ekMWuNlFiVGfsKhfj4nmc8JCA+1ZltwJgxiKgDuwYtR09ie340RfXFF6YRd2VTW5zN7l4F1PfaAaPklVz6utSg==}
+    engines: {node: '>=18'}
+
+  '@cspell/dict-ada@4.1.1':
+    resolution: {integrity: sha512-E+0YW9RhZod/9Qy2gxfNZiHJjCYFlCdI69br1eviQQWB8yOTJX0JHXLs79kOYhSW0kINPVUdvddEBe6Lu6CjGQ==}
+
+  '@cspell/dict-al@1.1.1':
+    resolution: {integrity: sha512-sD8GCaZetgQL4+MaJLXqbzWcRjfKVp8x+px3HuCaaiATAAtvjwUQ5/Iubiqwfd1boIh2Y1/3EgM3TLQ7Q8e0wQ==}
+
+  '@cspell/dict-aws@4.0.17':
+    resolution: {integrity: sha512-ORcblTWcdlGjIbWrgKF+8CNEBQiLVKdUOFoTn0KPNkAYnFcdPP0muT4892h7H4Xafh3j72wqB4/loQ6Nti9E/w==}
+
+  '@cspell/dict-bash@4.2.2':
+    resolution: {integrity: sha512-kyWbwtX3TsCf5l49gGQIZkRLaB/P8g73GDRm41Zu8Mv51kjl2H7Au0TsEvHv7jzcsRLS6aUYaZv6Zsvk1fOz+Q==}
+
+  '@cspell/dict-companies@3.2.9':
+    resolution: {integrity: sha512-y5GdU+LnuMhUE/WYwOYt7GcJdrpmV4KXE1oFb5toEsnGa2KzffUbS6lwPpeRBocQoqZj8jJYFtxoQ+2KVg++/A==}
+
+  '@cspell/dict-cpp@6.0.15':
+    resolution: {integrity: sha512-N7MKK3llRNoBncygvrnLaGvmjo4xzVr5FbtAc9+MFGHK6/LeSySBupr1FM72XDaVSIsmBEe7sDYCHHwlI9Jb2w==}
+
+  '@cspell/dict-cryptocurrencies@5.0.5':
+    resolution: {integrity: sha512-R68hYYF/rtlE6T/dsObStzN5QZw+0aQBinAXuWCVqwdS7YZo0X33vGMfChkHaiCo3Z2+bkegqHlqxZF4TD3rUA==}
+
+  '@cspell/dict-csharp@4.0.8':
+    resolution: {integrity: sha512-qmk45pKFHSxckl5mSlbHxmDitSsGMlk/XzFgt7emeTJWLNSTUK//MbYAkBNRtfzB4uD7pAFiKgpKgtJrTMRnrQ==}
+
+  '@cspell/dict-css@4.0.19':
+    resolution: {integrity: sha512-VYHtPnZt/Zd/ATbW3rtexWpBnHUohUrQOHff/2JBhsVgxOrksAxJnLAO43Q1ayLJBJUUwNVo+RU0sx0aaysZfg==}
+
+  '@cspell/dict-dart@2.3.2':
+    resolution: {integrity: sha512-sUiLW56t9gfZcu8iR/5EUg+KYyRD83Cjl3yjDEA2ApVuJvK1HhX+vn4e4k4YfjpUQMag8XO2AaRhARE09+/rqw==}
+
+  '@cspell/dict-data-science@2.0.13':
+    resolution: {integrity: sha512-l1HMEhBJkPmw4I2YGVu2eBSKM89K9pVF+N6qIr5Uo5H3O979jVodtuwP8I7LyPrJnC6nz28oxeGRCLh9xC5CVA==}
+
+  '@cspell/dict-django@4.1.6':
+    resolution: {integrity: sha512-SdbSFDGy9ulETqNz15oWv2+kpWLlk8DJYd573xhIkeRdcXOjskRuxjSZPKfW7O3NxN/KEf3gm3IevVOiNuFS+w==}
+
+  '@cspell/dict-docker@1.1.17':
+    resolution: {integrity: sha512-OcnVTIpHIYYKhztNTyK8ShAnXTfnqs43hVH6p0py0wlcwRIXe5uj4f12n7zPf2CeBI7JAlPjEsV0Rlf4hbz/xQ==}
+
+  '@cspell/dict-dotnet@5.0.10':
+    resolution: {integrity: sha512-ooar8BP/RBNP1gzYfJPStKEmpWy4uv/7JCq6FOnJLeD1yyfG3d/LFMVMwiJo+XWz025cxtkM3wuaikBWzCqkmg==}
+
+  '@cspell/dict-elixir@4.0.8':
+    resolution: {integrity: sha512-CyfphrbMyl4Ms55Vzuj+mNmd693HjBFr9hvU+B2YbFEZprE5AG+EXLYTMRWrXbpds4AuZcvN3deM2XVB80BN/Q==}
+
+  '@cspell/dict-en-common-misspellings@2.1.10':
+    resolution: {integrity: sha512-+S10oo15G3Axz1W4FGmYNq9u0xxS6OhNl9dXY3qjYBOqhzfF3l1oM/TpkfH/1NH31r3GneuPVXKXT7y16qwJYA==}
+
+  '@cspell/dict-en-gb@1.1.33':
+    resolution: {integrity: sha512-tKSSUf9BJEV+GJQAYGw5e+ouhEe2ZXE620S7BLKe3ZmpnjlNG9JqlnaBhkIMxKnNFkLY2BP/EARzw31AZnOv4g==}
+
+  '@cspell/dict-en_us@4.4.26':
+    resolution: {integrity: sha512-rpjM87n2e3PN3mx9SbzQOIniEWUKewZj0xFA796Pzeu3gJlYsHsSkZZC6Jxdea2992EfrzJZYwJb+mjxa3gWGg==}
+
+  '@cspell/dict-filetypes@3.0.15':
+    resolution: {integrity: sha512-uDMeqYlLlK476w/muEFQGBy9BdQWS0mQ7BJiy/iQv5XUWZxE2O54ZQd9nW8GyQMzAgoyg5SG4hf9l039Qt66oA==}
+
+  '@cspell/dict-flutter@1.1.1':
+    resolution: {integrity: sha512-UlOzRcH2tNbFhZmHJN48Za/2/MEdRHl2BMkCWZBYs+30b91mWvBfzaN4IJQU7dUZtowKayVIF9FzvLZtZokc5A==}
+
+  '@cspell/dict-fonts@4.0.5':
+    resolution: {integrity: sha512-BbpkX10DUX/xzHs6lb7yzDf/LPjwYIBJHJlUXSBXDtK/1HaeS+Wqol4Mlm2+NAgZ7ikIE5DQMViTgBUY3ezNoQ==}
+
+  '@cspell/dict-fsharp@1.1.1':
+    resolution: {integrity: sha512-imhs0u87wEA4/cYjgzS0tAyaJpwG7vwtC8UyMFbwpmtw+/bgss+osNfyqhYRyS/ehVCWL17Ewx2UPkexjKyaBA==}
+
+  '@cspell/dict-fullstack@3.2.7':
+    resolution: {integrity: sha512-IxEk2YAwAJKYCUEgEeOg3QvTL4XLlyArJElFuMQevU1dPgHgzWElFevN5lsTFnvMFA1riYsVinqJJX0BanCFEg==}
+
+  '@cspell/dict-gaming-terms@1.1.2':
+    resolution: {integrity: sha512-9XnOvaoTBscq0xuD6KTEIkk9hhdfBkkvJAIsvw3JMcnp1214OCGW8+kako5RqQ2vTZR3Tnf3pc57o7VgkM0q1Q==}
+
+  '@cspell/dict-git@3.0.7':
+    resolution: {integrity: sha512-odOwVKgfxCQfiSb+nblQZc4ErXmnWEnv8XwkaI4sNJ7cNmojnvogYVeMqkXPjvfrgEcizEEA4URRD2Ms5PDk1w==}
+
+  '@cspell/dict-golang@6.0.25':
+    resolution: {integrity: sha512-Q0mkUj1mFN1P5LZoKBeTLOQehlHMYv62K0Px9FS7qykSvZjBz44bhCezJuepTPCiCFqmwQgT2fc3Ixw+fhO6pQ==}
+
+  '@cspell/dict-google@1.0.9':
+    resolution: {integrity: sha512-biL65POqialY0i4g6crj7pR6JnBkbsPovB2WDYkj3H4TuC/QXv7Pu5pdPxeUJA6TSCHI7T5twsO4VSVyRxD9CA==}
+
+  '@cspell/dict-haskell@4.0.6':
+    resolution: {integrity: sha512-ib8SA5qgftExpYNjWhpYIgvDsZ/0wvKKxSP+kuSkkak520iPvTJumEpIE+qPcmJQo4NzdKMN8nEfaeci4OcFAQ==}
+
+  '@cspell/dict-html-symbol-entities@4.0.5':
+    resolution: {integrity: sha512-429alTD4cE0FIwpMucvSN35Ld87HCyuM8mF731KU5Rm4Je2SG6hmVx7nkBsLyrmH3sQukTcr1GaiZsiEg8svPA==}
+
+  '@cspell/dict-html@4.0.14':
+    resolution: {integrity: sha512-2bf7n+kS92g+cMKV0wr9o/Oq9n8JzU7CcrB96gIh2GHgnF+0xDOqO2W/1KeFAqOfqosoOVE48t+4dnEMkkoJ2Q==}
+
+  '@cspell/dict-java@5.0.12':
+    resolution: {integrity: sha512-qPSNhTcl7LGJ5Qp6VN71H8zqvRQK04S08T67knMq9hTA8U7G1sTKzLmBaDOFhq17vNX/+rT+rbRYp+B5Nwza1A==}
+
+  '@cspell/dict-julia@1.1.1':
+    resolution: {integrity: sha512-WylJR9TQ2cgwd5BWEOfdO3zvDB+L7kYFm0I9u0s9jKHWQ6yKmfKeMjU9oXxTBxIufhCXm92SKwwVNAC7gjv+yA==}
+
+  '@cspell/dict-k8s@1.0.12':
+    resolution: {integrity: sha512-2LcllTWgaTfYC7DmkMPOn9GsBWsA4DZdlun4po8s2ysTP7CPEnZc1ZfK6pZ2eI4TsZemlUQQ+NZxMe9/QutQxg==}
+
+  '@cspell/dict-kotlin@1.1.1':
+    resolution: {integrity: sha512-J3NzzfgmxRvEeOe3qUXnSJQCd38i/dpF9/t3quuWh6gXM+krsAXP75dY1CzDmS8mrJAlBdVBeAW5eAZTD8g86Q==}
+
+  '@cspell/dict-latex@4.0.4':
+    resolution: {integrity: sha512-YdTQhnTINEEm/LZgTzr9Voz4mzdOXH7YX+bSFs3hnkUHCUUtX/mhKgf1CFvZ0YNM2afjhQcmLaR9bDQVyYBvpA==}
+
+  '@cspell/dict-lorem-ipsum@4.0.5':
+    resolution: {integrity: sha512-9a4TJYRcPWPBKkQAJ/whCu4uCAEgv/O2xAaZEI0n4y1/l18Yyx8pBKoIX5QuVXjjmKEkK7hi5SxyIsH7pFEK9Q==}
+
+  '@cspell/dict-lua@4.0.8':
+    resolution: {integrity: sha512-N4PkgNDMu9JVsRu7JBS/3E/dvfItRgk9w5ga2dKq+JupP2Y3lojNaAVFhXISh4Y0a6qXDn2clA6nvnavQ/jjLA==}
+
+  '@cspell/dict-makefile@1.0.5':
+    resolution: {integrity: sha512-4vrVt7bGiK8Rx98tfRbYo42Xo2IstJkAF4tLLDMNQLkQ86msDlYSKG1ZCk8Abg+EdNcFAjNhXIiNO+w4KflGAQ==}
+
+  '@cspell/dict-markdown@2.0.14':
+    resolution: {integrity: sha512-uLKPNJsUcumMQTsZZgAK9RgDLyQhUz/uvbQTEkvF/Q4XfC1i/BnA8XrOrd0+Vp6+tPOKyA+omI5LRWfMu5K/Lw==}
+    peerDependencies:
+      '@cspell/dict-css': ^4.0.19
+      '@cspell/dict-html': ^4.0.14
+      '@cspell/dict-html-symbol-entities': ^4.0.5
+      '@cspell/dict-typescript': ^3.2.3
+
+  '@cspell/dict-monkeyc@1.0.12':
+    resolution: {integrity: sha512-MN7Vs11TdP5mbdNFQP5x2Ac8zOBm97ARg6zM5Sb53YQt/eMvXOMvrep7+/+8NJXs0jkp70bBzjqU4APcqBFNAw==}
+
+  '@cspell/dict-node@5.0.8':
+    resolution: {integrity: sha512-AirZcN2i84ynev3p2/1NCPEhnNsHKMz9zciTngGoqpdItUb2bDt1nJBjwlsrFI78GZRph/VaqTVFwYikmncpXg==}
+
+  '@cspell/dict-npm@5.2.27':
+    resolution: {integrity: sha512-REy2vRQ9BJkjoW8cEr8ewoJAZ0DsTh+TimJ58KgIG1d81caanNgdvKLSgDkPd8OlGxPfLKHe7o2TJuk/l7VqhA==}
+
+  '@cspell/dict-php@4.1.0':
+    resolution: {integrity: sha512-dTDeabyOj7eFvn2Q4Za3uVXM2+SzeFMqX8ly2P0XTo4AzbCmI2hulFD/QIADwWmwiRrInbbf8cxwFHNIYrXl4w==}
+
+  '@cspell/dict-powershell@5.0.15':
+    resolution: {integrity: sha512-l4S5PAcvCFcVDMJShrYD0X6Huv9dcsQPlsVsBGbH38wvuN7gS7+GxZFAjTNxDmTY1wrNi1cCatSg6Pu2BW4rgg==}
+
+  '@cspell/dict-public-licenses@2.0.15':
+    resolution: {integrity: sha512-cJEOs901H13Pfy0fl4dCD1U+xpWIMaEPq8MeYU83FfDZvellAuSo4GqWCripfIqlhns/L6+UZEIJSOZnjgy7Wg==}
+
+  '@cspell/dict-python@4.2.24':
+    resolution: {integrity: sha512-B1oXYTa0+3sKOvx/svwxFaT3MrkHJ7ZLWpA1N7ZyHoET7IJhLCwcfAu7DCTq1f24Wnd4t+ARJvPEmFbMx65VBw==}
+
+  '@cspell/dict-r@2.1.1':
+    resolution: {integrity: sha512-71Ka+yKfG4ZHEMEmDxc6+blFkeTTvgKbKAbwiwQAuKl3zpqs1Y0vUtwW2N4b3LgmSPhV3ODVY0y4m5ofqDuKMw==}
+
+  '@cspell/dict-ruby@5.0.9':
+    resolution: {integrity: sha512-H2vMcERMcANvQshAdrVx0XoWaNX8zmmiQN11dZZTQAZaNJ0xatdJoSqY8C8uhEMW89bfgpN+NQgGuDXW2vmXEw==}
+
+  '@cspell/dict-rust@4.1.0':
+    resolution: {integrity: sha512-ysFxxKc3QjPWtPacbwxzz8sDOACHNShlhQpnBsDXAHN3LogmuBsQtfyuU30APqFjCOg9KwGciKYC/hcGxJCbiA==}
+
+  '@cspell/dict-scala@5.0.8':
+    resolution: {integrity: sha512-YdftVmumv8IZq9zu1gn2U7A4bfM2yj9Vaupydotyjuc+EEZZSqAafTpvW/jKLWji2TgybM1L2IhmV0s/Iv9BTw==}
+
+  '@cspell/dict-shell@1.1.2':
+    resolution: {integrity: sha512-WqOUvnwcHK1X61wAfwyXq04cn7KYyskg90j4lLg3sGGKMW9Sq13hs91pqrjC44Q+lQLgCobrTkMDw9Wyl9nRFA==}
+
+  '@cspell/dict-software-terms@5.1.18':
+    resolution: {integrity: sha512-+RUM+DnRnGzDjnJrAEiEQnopPGBXQ5kUY9t38WdTVYVgkpIE0/dcMX+s5uAp7vvKezhU6gW+CGW5K5xdF2KKiw==}
+
+  '@cspell/dict-sql@2.2.1':
+    resolution: {integrity: sha512-qDHF8MpAYCf4pWU8NKbnVGzkoxMNrFqBHyG/dgrlic5EQiKANCLELYtGlX5auIMDLmTf1inA0eNtv74tyRJ/vg==}
+
+  '@cspell/dict-svelte@1.0.7':
+    resolution: {integrity: sha512-hGZsGqP0WdzKkdpeVLBivRuSNzOTvN036EBmpOwxH+FTY2DuUH7ecW+cSaMwOgmq5JFSdTcbTNFlNC8HN8lhaQ==}
+
+  '@cspell/dict-swift@2.0.6':
+    resolution: {integrity: sha512-PnpNbrIbex2aqU1kMgwEKvCzgbkHtj3dlFLPMqW1vSniop7YxaDTtvTUO4zA++ugYAEL+UK8vYrBwDPTjjvSnA==}
+
+  '@cspell/dict-terraform@1.1.3':
+    resolution: {integrity: sha512-gr6wxCydwSFyyBKhBA2xkENXtVFToheqYYGFvlMZXWjviynXmh+NK/JTvTCk/VHk3+lzbO9EEQKee6VjrAUSbA==}
+
+  '@cspell/dict-typescript@3.2.3':
+    resolution: {integrity: sha512-zXh1wYsNljQZfWWdSPYwQhpwiuW0KPW1dSd8idjMRvSD0aSvWWHoWlrMsmZeRl4qM4QCEAjua8+cjflm41cQBg==}
+
+  '@cspell/dict-vue@3.0.5':
+    resolution: {integrity: sha512-Mqutb8jbM+kIcywuPQCCaK5qQHTdaByoEO2J9LKFy3sqAdiBogNkrplqUK0HyyRFgCfbJUgjz3N85iCMcWH0JA==}
+
+  '@cspell/dynamic-import@8.19.4':
+    resolution: {integrity: sha512-0LLghC64+SiwQS20Sa0VfFUBPVia1rNyo0bYeIDoB34AA3qwguDBVJJkthkpmaP1R2JeR/VmxmJowuARc4ZUxA==}
+    engines: {node: '>=18.0'}
+
+  '@cspell/filetypes@8.19.4':
+    resolution: {integrity: sha512-D9hOCMyfKtKjjqQJB8F80PWsjCZhVGCGUMiDoQpcta0e+Zl8vHgzwaC0Ai4QUGBhwYEawHGiWUd7Y05u/WXiNQ==}
+    engines: {node: '>=18'}
+
+  '@cspell/strong-weak-map@8.19.4':
+    resolution: {integrity: sha512-MUfFaYD8YqVe32SQaYLI24/bNzaoyhdBIFY5pVrvMo1ZCvMl8AlfI2OcBXvcGb5aS5z7sCNCJm11UuoYbLI1zw==}
+    engines: {node: '>=18'}
+
+  '@cspell/url@8.19.4':
+    resolution: {integrity: sha512-Pa474iBxS+lxsAL4XkETPGIq3EgMLCEb9agj3hAd2VGMTCApaiUvamR4b+uGXIPybN70piFxvzrfoxsG2uIP6A==}
+    engines: {node: '>=18.0'}
+
+  '@csstools/cascade-layer-name-parser@2.0.5':
+    resolution: {integrity: sha512-p1ko5eHgV+MgXFVa4STPKpvPxr6ReS8oS2jzTukjR74i5zJNyWO1ZM1m8YKBXnzDKWfBN1ztLYlHxbVemDD88A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-syntax-patches-for-csstree@1.0.22':
+    resolution: {integrity: sha512-qBcx6zYlhleiFfdtzkRgwNC7VVoAwfK76Vmsw5t+PbvtdknO9StgRk7ROvq9so1iqbdW4uLIDAsXRsTfUrIoOw==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
+  '@csstools/media-query-list-parser@3.0.1':
+    resolution: {integrity: sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.1
+      '@csstools/css-tokenizer': ^3.0.1
+
+  '@csstools/media-query-list-parser@4.0.3':
+    resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/postcss-alpha-function@1.0.1':
+    resolution: {integrity: sha512-isfLLwksH3yHkFXfCI2Gcaqg7wGGHZZwunoJzEZk0yKYIokgre6hYVFibKL3SYAoR1kBXova8LB+JoO5vZzi9w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-cascade-layers@5.0.2':
+    resolution: {integrity: sha512-nWBE08nhO8uWl6kSAeCx4im7QfVko3zLrtgWZY4/bP87zrSPpSyN/3W3TDqz1jJuH+kbKOHXg5rJnK+ZVYcFFg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-color-function-display-p3-linear@1.0.1':
+    resolution: {integrity: sha512-E5qusdzhlmO1TztYzDIi8XPdPoYOjoTY6HBYBCYSj+Gn4gQRBlvjgPQXzfzuPQqt8EhkC/SzPKObg4Mbn8/xMg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-color-function@4.0.12':
+    resolution: {integrity: sha512-yx3cljQKRaSBc2hfh8rMZFZzChaFgwmO2JfFgFr1vMcF3C/uyy5I4RFIBOIWGq1D+XbKCG789CGkG6zzkLpagA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-color-mix-function@3.0.12':
+    resolution: {integrity: sha512-4STERZfCP5Jcs13P1U5pTvI9SkgLgfMUMhdXW8IlJWkzOOOqhZIjcNhWtNJZes2nkBDsIKJ0CJtFtuaZ00moag==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-color-mix-variadic-function-arguments@1.0.2':
+    resolution: {integrity: sha512-rM67Gp9lRAkTo+X31DUqMEq+iK+EFqsidfecmhrteErxJZb6tUoJBVQca1Vn1GpDql1s1rD1pKcuYzMsg7Z1KQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-content-alt-text@2.0.8':
+    resolution: {integrity: sha512-9SfEW9QCxEpTlNMnpSqFaHyzsiRpZ5J5+KqCu1u5/eEJAWsMhzT40qf0FIbeeglEvrGRMdDzAxMIz3wqoGSb+Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-contrast-color-function@2.0.12':
+    resolution: {integrity: sha512-YbwWckjK3qwKjeYz/CijgcS7WDUCtKTd8ShLztm3/i5dhh4NaqzsbYnhm4bjrpFpnLZ31jVcbK8YL77z3GBPzA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-exponential-functions@2.0.9':
+    resolution: {integrity: sha512-abg2W/PI3HXwS/CZshSa79kNWNZHdJPMBXeZNyPQFbbj8sKO3jXxOt/wF7juJVjyDTc6JrvaUZYFcSBZBhaxjw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-font-format-keywords@4.0.0':
+    resolution: {integrity: sha512-usBzw9aCRDvchpok6C+4TXC57btc4bJtmKQWOHQxOVKen1ZfVqBUuCZ/wuqdX5GHsD0NRSr9XTP+5ID1ZZQBXw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-gamut-mapping@2.0.11':
+    resolution: {integrity: sha512-fCpCUgZNE2piVJKC76zFsgVW1apF6dpYsqGyH8SIeCcM4pTEsRTWTLCaJIMKFEundsCKwY1rwfhtrio04RJ4Dw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-gradients-interpolation-method@5.0.12':
+    resolution: {integrity: sha512-jugzjwkUY0wtNrZlFeyXzimUL3hN4xMvoPnIXxoZqxDvjZRiSh+itgHcVUWzJ2VwD/VAMEgCLvtaJHX+4Vj3Ow==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-hwb-function@4.0.12':
+    resolution: {integrity: sha512-mL/+88Z53KrE4JdePYFJAQWFrcADEqsLprExCM04GDNgHIztwFzj0Mbhd/yxMBngq0NIlz58VVxjt5abNs1VhA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-ic-unit@4.0.4':
+    resolution: {integrity: sha512-yQ4VmossuOAql65sCPppVO1yfb7hDscf4GseF0VCA/DTDaBc0Wtf8MTqVPfjGYlT5+2buokG0Gp7y0atYZpwjg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-initial@2.0.1':
+    resolution: {integrity: sha512-L1wLVMSAZ4wovznquK0xmC7QSctzO4D0Is590bxpGqhqjboLXYA16dWZpfwImkdOgACdQ9PqXsuRroW6qPlEsg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-is-pseudo-class@5.0.3':
+    resolution: {integrity: sha512-jS/TY4SpG4gszAtIg7Qnf3AS2pjcUM5SzxpApOrlndMeGhIbaTzWBzzP/IApXoNWEW7OhcjkRT48jnAUIFXhAQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-light-dark-function@2.0.11':
+    resolution: {integrity: sha512-fNJcKXJdPM3Lyrbmgw2OBbaioU7yuKZtiXClf4sGdQttitijYlZMD5K7HrC/eF83VRWRrYq6OZ0Lx92leV2LFA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-logical-float-and-clear@3.0.0':
+    resolution: {integrity: sha512-SEmaHMszwakI2rqKRJgE+8rpotFfne1ZS6bZqBoQIicFyV+xT1UF42eORPxJkVJVrH9C0ctUgwMSn3BLOIZldQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-logical-overflow@2.0.0':
+    resolution: {integrity: sha512-spzR1MInxPuXKEX2csMamshR4LRaSZ3UXVaRGjeQxl70ySxOhMpP2252RAFsg8QyyBXBzuVOOdx1+bVO5bPIzA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-logical-overscroll-behavior@2.0.0':
+    resolution: {integrity: sha512-e/webMjoGOSYfqLunyzByZj5KKe5oyVg/YSbie99VEaSDE2kimFm0q1f6t/6Jo+VVCQ/jbe2Xy+uX+C4xzWs4w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-logical-resize@3.0.0':
+    resolution: {integrity: sha512-DFbHQOFW/+I+MY4Ycd/QN6Dg4Hcbb50elIJCfnwkRTCX05G11SwViI5BbBlg9iHRl4ytB7pmY5ieAFk3ws7yyg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-logical-viewport-units@3.0.4':
+    resolution: {integrity: sha512-q+eHV1haXA4w9xBwZLKjVKAWn3W2CMqmpNpZUk5kRprvSiBEGMgrNH3/sJZ8UA3JgyHaOt3jwT9uFa4wLX4EqQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-media-minmax@2.0.9':
+    resolution: {integrity: sha512-af9Qw3uS3JhYLnCbqtZ9crTvvkR+0Se+bBqSr7ykAnl9yKhk6895z9rf+2F4dClIDJWxgn0iZZ1PSdkhrbs2ig==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-media-queries-aspect-ratio-number-values@3.0.5':
+    resolution: {integrity: sha512-zhAe31xaaXOY2Px8IYfoVTB3wglbJUVigGphFLj6exb7cjZRH9A6adyE22XfFK3P2PzwRk0VDeTJmaxpluyrDg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-nested-calc@4.0.0':
+    resolution: {integrity: sha512-jMYDdqrQQxE7k9+KjstC3NbsmC063n1FTPLCgCRS2/qHUbHM0mNy9pIn4QIiQGs9I/Bg98vMqw7mJXBxa0N88A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-normalize-display-values@4.0.0':
+    resolution: {integrity: sha512-HlEoG0IDRoHXzXnkV4in47dzsxdsjdz6+j7MLjaACABX2NfvjFS6XVAnpaDyGesz9gK2SC7MbNwdCHusObKJ9Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-oklab-function@4.0.12':
+    resolution: {integrity: sha512-HhlSmnE1NKBhXsTnNGjxvhryKtO7tJd1w42DKOGFD6jSHtYOrsJTQDKPMwvOfrzUAk8t7GcpIfRyM7ssqHpFjg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-position-area-property@1.0.0':
+    resolution: {integrity: sha512-fUP6KR8qV2NuUZV3Cw8itx0Ep90aRjAZxAEzC3vrl6yjFv+pFsQbR18UuQctEKmA72K9O27CoYiKEgXxkqjg8Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-progressive-custom-properties@4.2.1':
+    resolution: {integrity: sha512-uPiiXf7IEKtUQXsxu6uWtOlRMXd2QWWy5fhxHDnPdXKCQckPP3E34ZgDoZ62r2iT+UOgWsSbM4NvHE5m3mAEdw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-random-function@2.0.1':
+    resolution: {integrity: sha512-q+FQaNiRBhnoSNo+GzqGOIBKoHQ43lYz0ICrV+UudfWnEF6ksS6DsBIJSISKQT2Bvu3g4k6r7t0zYrk5pDlo8w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-relative-color-syntax@3.0.12':
+    resolution: {integrity: sha512-0RLIeONxu/mtxRtf3o41Lq2ghLimw0w9ByLWnnEVuy89exmEEq8bynveBxNW3nyHqLAFEeNtVEmC1QK9MZ8Huw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-scope-pseudo-class@4.0.1':
+    resolution: {integrity: sha512-IMi9FwtH6LMNuLea1bjVMQAsUhFxJnyLSgOp/cpv5hrzWmrUYU5fm0EguNDIIOHUqzXode8F/1qkC/tEo/qN8Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-sign-functions@1.1.4':
+    resolution: {integrity: sha512-P97h1XqRPcfcJndFdG95Gv/6ZzxUBBISem0IDqPZ7WMvc/wlO+yU0c5D/OCpZ5TJoTt63Ok3knGk64N+o6L2Pg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-stepped-value-functions@4.0.9':
+    resolution: {integrity: sha512-h9btycWrsex4dNLeQfyU3y3w40LMQooJWFMm/SK9lrKguHDcFl4VMkncKKoXi2z5rM9YGWbUQABI8BT2UydIcA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-system-ui-font-family@1.0.0':
+    resolution: {integrity: sha512-s3xdBvfWYfoPSBsikDXbuorcMG1nN1M6GdU0qBsGfcmNR0A/qhloQZpTxjA3Xsyrk1VJvwb2pOfiOT3at/DuIQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-text-decoration-shorthand@4.0.3':
+    resolution: {integrity: sha512-KSkGgZfx0kQjRIYnpsD7X2Om9BUXX/Kii77VBifQW9Ih929hK0KNjVngHDH0bFB9GmfWcR9vJYJJRvw/NQjkrA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-trigonometric-functions@4.0.9':
+    resolution: {integrity: sha512-Hnh5zJUdpNrJqK9v1/E3BbrQhaDTj5YiX7P61TOvUhoDHnUmsNNxcDAgkQ32RrcWx9GVUvfUNPcUkn8R3vIX6A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-unset-value@4.0.0':
+    resolution: {integrity: sha512-cBz3tOCI5Fw6NIFEwU3RiwK6mn3nKegjpJuzCndoGq3BZPkUjnsq7uQmIeMNeMbMk7YD2MfKcgCpZwX5jyXqCA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/selector-resolve-nested@3.1.0':
+    resolution: {integrity: sha512-mf1LEW0tJLKfWyvn5KdDrhpxHyuxpbNwTIwOYLIvsTffeyOf85j5oIzfG0yosxDgx/sswlqBnESYUcQH0vgZ0g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+
+  '@csstools/selector-specificity@5.0.0':
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+
+  '@csstools/utilities@2.0.0':
+    resolution: {integrity: sha512-5VdOr0Z71u+Yp3ozOx8T11N703wIFGVRgOWbOZMKgglPJsWA54MRIoMNVMa7shUToIhx5J8vX4sOZgD2XiihiQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@ctrl/tinycolor@4.2.0':
+    resolution: {integrity: sha512-kzyuwOAQnXJNLS9PSyrk0CWk35nWJW/zl/6KvnTBMFK65gm7U1/Z5BqjxeapjZCIhQcM/DsrEmcbRwDyXyXK4A==}
+    engines: {node: '>=14'}
+
+  '@dual-bundle/import-meta-resolve@4.2.1':
+    resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}
+
+  '@emnapi/core@1.7.1':
+    resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
+
+  '@emnapi/runtime@1.7.1':
+    resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
+
+  '@emnapi/wasi-threads@1.1.0':
+    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
+
+  '@emotion/hash@0.9.2':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
+
+  '@emotion/unitless@0.8.1':
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+
+  '@es-joy/jsdoccomment@0.76.0':
+    resolution: {integrity: sha512-g+RihtzFgGTx2WYCuTHbdOXJeAlGnROws0TeALx9ow/ZmOROOZkVg5wp/B44n0WJgI4SQFP1eWM2iRPlU2Y14w==}
+    engines: {node: '>=20.11.0'}
+
+  '@es-joy/jsdoccomment@0.78.0':
+    resolution: {integrity: sha512-rQkU5u8hNAq2NVRzHnIUUvR6arbO0b6AOlvpTNS48CkiKSn/xtNfOzBK23JE4SiW89DgvU7GtxLVgV4Vn2HBAw==}
+    engines: {node: '>=20.11.0'}
+
+  '@es-joy/resolve.exports@1.2.0':
+    resolution: {integrity: sha512-Q9hjxWI5xBM+qW2enxfe8wDKdFWMfd0Z29k5ZJnuBqD/CasY5Zryj09aCA6owbGATWz+39p5uIdaHXpopOcG8g==}
+    engines: {node: '>=10'}
+
+  '@esbuild/aix-ppc64@0.25.3':
+    resolution: {integrity: sha512-W8bFfPA8DowP8l//sxjJLSLkD8iEjMc7cBVyP+u4cEv9sM7mdUCkgsj+t0n/BWPFtv7WWCN5Yzj0N6FJNUUqBQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.25.3':
+    resolution: {integrity: sha512-XelR6MzjlZuBM4f5z2IQHK6LkK34Cvv6Rj2EntER3lwCBFdg6h2lKbtRjpTTsdEjD/WSe1q8UyPBXP1x3i/wYQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.25.3':
+    resolution: {integrity: sha512-PuwVXbnP87Tcff5I9ngV0lmiSu40xw1At6i3GsU77U7cjDDB4s0X2cyFuBiDa1SBk9DnvWwnGvVaGBqoFWPb7A==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.25.3':
+    resolution: {integrity: sha512-ogtTpYHT/g1GWS/zKM0cc/tIebFjm1F9Aw1boQ2Y0eUQ+J89d0jFY//s9ei9jVIlkYi8AfOjiixcLJSGNSOAdQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.25.3':
+    resolution: {integrity: sha512-eESK5yfPNTqpAmDfFWNsOhmIOaQA59tAcF/EfYvo5/QWQCzXn5iUSOnqt3ra3UdzBv073ykTtmeLJZGt3HhA+w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.25.3':
+    resolution: {integrity: sha512-Kd8glo7sIZtwOLcPbW0yLpKmBNWMANZhrC1r6K++uDR2zyzb6AeOYtI6udbtabmQpFaxJ8uduXMAo1gs5ozz8A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.25.3':
+    resolution: {integrity: sha512-EJiyS70BYybOBpJth3M0KLOus0n+RRMKTYzhYhFeMwp7e/RaajXvP+BWlmEXNk6uk+KAu46j/kaQzr6au+JcIw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.25.3':
+    resolution: {integrity: sha512-Q+wSjaLpGxYf7zC0kL0nDlhsfuFkoN+EXrx2KSB33RhinWzejOd6AvgmP5JbkgXKmjhmpfgKZq24pneodYqE8Q==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.25.3':
+    resolution: {integrity: sha512-xCUgnNYhRD5bb1C1nqrDV1PfkwgbswTTBRbAd8aH5PhYzikdf/ddtsYyMXFfGSsb/6t6QaPSzxtbfAZr9uox4A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.25.3':
+    resolution: {integrity: sha512-dUOVmAUzuHy2ZOKIHIKHCm58HKzFqd+puLaS424h6I85GlSDRZIA5ycBixb3mFgM0Jdh+ZOSB6KptX30DD8YOQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.25.3':
+    resolution: {integrity: sha512-yplPOpczHOO4jTYKmuYuANI3WhvIPSVANGcNUeMlxH4twz/TeXuzEP41tGKNGWJjuMhotpGabeFYGAOU2ummBw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.25.3':
+    resolution: {integrity: sha512-P4BLP5/fjyihmXCELRGrLd793q/lBtKMQl8ARGpDxgzgIKJDRJ/u4r1A/HgpBpKpKZelGct2PGI4T+axcedf6g==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.25.3':
+    resolution: {integrity: sha512-eRAOV2ODpu6P5divMEMa26RRqb2yUoYsuQQOuFUexUoQndm4MdpXXDBbUoKIc0iPa4aCO7gIhtnYomkn2x+bag==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.25.3':
+    resolution: {integrity: sha512-ZC4jV2p7VbzTlnl8nZKLcBkfzIf4Yad1SJM4ZMKYnJqZFD4rTI+pBG65u8ev4jk3/MPwY9DvGn50wi3uhdaghg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.25.3':
+    resolution: {integrity: sha512-LDDODcFzNtECTrUUbVCs6j9/bDVqy7DDRsuIXJg6so+mFksgwG7ZVnTruYi5V+z3eE5y+BJZw7VvUadkbfg7QA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.25.3':
+    resolution: {integrity: sha512-s+w/NOY2k0yC2p9SLen+ymflgcpRkvwwa02fqmAwhBRI3SC12uiS10edHHXlVWwfAagYSY5UpmT/zISXPMW3tQ==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.25.3':
+    resolution: {integrity: sha512-nQHDz4pXjSDC6UfOE1Fw9Q8d6GCAd9KdvMZpfVGWSJztYCarRgSDfOVBY5xwhQXseiyxapkiSJi/5/ja8mRFFA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.3':
+    resolution: {integrity: sha512-1QaLtOWq0mzK6tzzp0jRN3eccmN3hezey7mhLnzC6oNlJoUJz4nym5ZD7mDnS/LZQgkrhEbEiTn515lPeLpgWA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.3':
+    resolution: {integrity: sha512-i5Hm68HXHdgv8wkrt+10Bc50zM0/eonPb/a/OFVfB6Qvpiirco5gBA5bz7S2SHuU+Y4LWn/zehzNX14Sp4r27g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.3':
+    resolution: {integrity: sha512-zGAVApJEYTbOC6H/3QBr2mq3upG/LBEXr85/pTtKiv2IXcgKV0RT0QA/hSXZqSvLEpXeIxah7LczB4lkiYhTAQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.3':
+    resolution: {integrity: sha512-fpqctI45NnCIDKBH5AXQBsD0NDPbEFczK98hk/aa6HJxbl+UtLkJV2+Bvy5hLSLk3LHmqt0NTkKNso1A9y1a4w==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/sunos-x64@0.25.3':
+    resolution: {integrity: sha512-ROJhm7d8bk9dMCUZjkS8fgzsPAZEjtRJqCAmVgB0gMrvG7hfmPmz9k1rwO4jSiblFjYmNvbECL9uhaPzONMfgA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.25.3':
+    resolution: {integrity: sha512-YWcow8peiHpNBiIXHwaswPnAXLsLVygFwCB3A7Bh5jRkIBFWHGmNQ48AlX4xDvQNoMZlPYzjVOQDYEzWCqufMQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.25.3':
+    resolution: {integrity: sha512-qspTZOIGoXVS4DpNqUYUs9UxVb04khS1Degaw/MnfMe7goQ3lTfQ13Vw4qY/Nj0979BGvMRpAYbs/BAxEvU8ew==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.25.3':
+    resolution: {integrity: sha512-ICgUR+kPimx0vvRzf+N/7L7tVSQeE3BYY+NhHRHXS1kBuPO7z2+7ea2HbhDyZdTephgvNvKrlDDKUexuCVBVvg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.0':
+    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.21.1':
+    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.4.2':
+    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.17.0':
+    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.3':
+    resolution: {integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.39.2':
+    resolution: {integrity: sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.4.1':
+    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@floating-ui/vue@1.1.9':
+    resolution: {integrity: sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==}
+
+  '@highlightjs/vue-plugin@2.1.0':
+    resolution: {integrity: sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==}
+    peerDependencies:
+      highlight.js: ^11.0.1
+      vue: ^3.5.24
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@iconify/icons-ant-design@1.2.7':
+    resolution: {integrity: sha512-X5OaFEhBroyUZru7aYi30q1EkLcAtqQqTdsq4g8oJUJOuVL8CxS43naaJVlFFgHj+F9QnuCT65yTpTIW3mdQEg==}
+
+  '@iconify/icons-arcticons@1.2.77':
+    resolution: {integrity: sha512-N7RoFR/YmOgKj96kkU+DFxghkrxvaJo5huKW/CsBk1Di94CLRQSwVy8AXa6hKh04q3ThfpO89zgeeWhp1VlC9g==}
+
+  '@iconify/icons-fa-brands@1.2.4':
+    resolution: {integrity: sha512-MnUUfPhKJ6ECvVNxipBCmyuvJPDgRJcJ1f9nfgv0obikp6D9d6dGtMrR+bw4Gku6Gr/WCnS1e/Qd5gdmXlE84w==}
+
+  '@iconify/icons-flat-color-icons@1.2.5':
+    resolution: {integrity: sha512-tlvRMTNVE006O1FFEb59TbseADRSeiDIg7tvZdPpCo7aRIzGyaeoI3A4SUl7ufdmKR8W36Sm4J3v0LccLVOfGA==}
+
+  '@iconify/icons-la@1.2.3':
+    resolution: {integrity: sha512-CD/7X9NXRPV0Ow7OKlBWBLvfQQPoBmJx/v4UWWX0LVMbwu1Mfftfg2hb4EeIjxbWaE5dBMkWGoc88YhV3K1vrA==}
+
+  '@iconify/icons-logos@1.2.36':
+    resolution: {integrity: sha512-RVdZE9figuWmd8HeVmM8oQvOdv/4YzXV6lZ+G9QJgzCB/VBLV0inPltZxOt939oj4GbKbr7PF6J4bADMua/GPw==}
+
+  '@iconify/icons-ri@1.2.10':
+    resolution: {integrity: sha512-w/Xu177artcK7P1LPUMq85WcRbqFE8sKYQEuNfEkuex/47DOaCgW6oBFdjlFBAmBczKlsJPdcy2pAGBGZvXdYw==}
+
+  '@iconify/icons-simple-icons@1.2.74':
+    resolution: {integrity: sha512-bsmbvwO8hauz49z740CYg70IDevOgshUoq4q1IKt6NnElnn+N2F6AseO3Uti82yUU4OHyQqkWjjUwoPTazlNnA==}
+
+  '@iconify/icons-uiw@1.2.6':
+    resolution: {integrity: sha512-y6LCoHQ3o1/C5cYipQ5/kt6I4h15JOS5YzBvv2INpj4kSEdUuZ4u9SF4gsLxKqLMxDlTE+mF9skF+Qaypputpw==}
+
+  '@iconify/json@2.2.417':
+    resolution: {integrity: sha512-/MzthgckJ4vEwdHmAbAn6Bph5WnR4tzVcHMs/nZl3v5hOVRw80SK28UPnG7jjsCB41WWjWPnWdMEdOZfUMZS5w==}
+
+  '@iconify/tailwind@1.2.0':
+    resolution: {integrity: sha512-KgpIHWOTcRYw1XcoUqyNSrmYyfLLqZYu3AmP8zdfLk0F5TqRO8YerhlvlQmGfn7rJXgPeZN569xPAJnJ53zZxA==}
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/vue@5.0.0':
+    resolution: {integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  '@inquirer/external-editor@1.0.3':
+    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@internationalized/date@3.10.1':
+    resolution: {integrity: sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA==}
+
+  '@internationalized/number@3.6.5':
+    resolution: {integrity: sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==}
+
+  '@intlify/bundle-utils@10.0.1':
+    resolution: {integrity: sha512-WkaXfSevtpgtUR4t8K2M6lbR7g03mtOxFeh+vXp5KExvPqS12ppaRj1QxzwRuRI5VUto54A22BjKoBMLyHILWQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@intlify/core-base@11.2.7':
+    resolution: {integrity: sha512-+Ra9I/LAzXDnmv/IrTO03WMCiLya7pHRmGJvNl9fKwx/W4REJ0xaMk2PxCRqnxcBsX443amEMdebQ3R1geiuIw==}
+    engines: {node: '>= 16'}
+
+  '@intlify/message-compiler@11.2.7':
+    resolution: {integrity: sha512-TFamC+GzJAotAFwUNvbtRVBgvuSn2nCwKNresmPUHv3IIVMmXJt7QQJj/DORI1h8hs46ZF6L0Fs2xBohSOE4iQ==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@11.2.7':
+    resolution: {integrity: sha512-uvlkvc/0uQ4FDlHQZccpUnmcOwNcaI3i+69ck2YJ+GqM35AoVbuS63b+YfirV4G0SZh64Ij2UMcFRMmB4nr95w==}
+    engines: {node: '>= 16'}
+
+  '@intlify/unplugin-vue-i18n@6.0.8':
+    resolution: {integrity: sha512-Vvm3KhjE6TIBVUQAk37rBiaYy2M5OcWH0ZcI1XKEsOTeN1o0bErk+zeuXmcrcMc/73YggfI8RoxOUz9EB/69JQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue: ^3.5.24
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@intlify/vue-i18n-extensions@8.0.0':
+    resolution: {integrity: sha512-w0+70CvTmuqbskWfzeYhn0IXxllr6mU+IeM2MU0M+j9OW64jkrvqY+pYFWrUnIIC9bEdij3NICruicwd5EgUuQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      '@intlify/shared': ^9.0.0 || ^10.0.0 || ^11.0.0
+      '@vue/compiler-dom': ^3.0.0
+      vue: ^3.5.24
+      vue-i18n: ^9.0.0 || ^10.0.0 || ^11.0.0
+    peerDependenciesMeta:
+      '@intlify/shared':
+        optional: true
+      '@vue/compiler-dom':
+        optional: true
+      vue:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@ioredis/commands@1.4.0':
+    resolution: {integrity: sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ==}
+
+  '@isaacs/balanced-match@4.0.1':
+    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/brace-expansion@5.0.0':
+    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
+    engines: {node: 20 || >=22}
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/source-map@0.3.11':
+    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@jspm/generator@2.8.0':
+    resolution: {integrity: sha512-7HfZs8m6gEg9JSsio/3uoYWMEHU7kaOZPuHQCDeR3Us86Kd5aaBPn3Dv3UogVAJZsBu+SjIjGb/nIf8G4hWyog==}
+
+  '@jspm/import-map@1.2.2':
+    resolution: {integrity: sha512-QrM7+lkgVE8t9NZSm9fDSzheguEOVCOxueKxSwgoOt7yUWesWKDFmmL9bQFURl4IqMcpPz7VV2Tvw9s9emaJzQ==}
+
+  '@keyv/bigmap@1.3.0':
+    resolution: {integrity: sha512-KT01GjzV6AQD5+IYrcpoYLkCu1Jod3nau1Z7EsEuViO3TZGRacSbO9MfHmbJ1WaOXFtWLxPVj169cn2WNKPkIg==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      keyv: ^5.5.4
+
+  '@keyv/serialize@1.1.1':
+    resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
+
+  '@manypkg/find-root@1.1.0':
+    resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
+
+  '@manypkg/find-root@3.1.0':
+    resolution: {integrity: sha512-BcSqCyKhBVZ5YkSzOiheMCV41kqAFptW6xGqYSTjkVTl9XQpr+pqHhwgGCOHQtjDCv7Is6EFyA14Sm5GVbVABA==}
+    engines: {node: '>=20.0.0'}
+
+  '@manypkg/get-packages@1.1.3':
+    resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
+
+  '@manypkg/get-packages@3.1.0':
+    resolution: {integrity: sha512-0TbBVyvPrP7xGYBI/cP8UP+yl/z+HtbTttAD7FMAJgn/kXOTwh5/60TsqP9ZYY710forNfyV0N8P/IE/ujGZJg==}
+    engines: {node: '>=20.0.0'}
+
+  '@manypkg/tools@2.1.0':
+    resolution: {integrity: sha512-0FOIepYR4ugPYaHwK7hDeHDkfPOBVvayt9QpvRbi2LT/h2b0GaE/gM9Gag7fsnyYyNaTZ2IGyOuVg07IYepvYQ==}
+    engines: {node: '>=20.0.0'}
+
+  '@mapbox/node-pre-gyp@2.0.3':
+    resolution: {integrity: sha512-uwPAhccfFJlsfCxMYTwOdVfOz3xqyj8xYL3zJj8f0pb30tLohnnFPhLuqp4/qoEz8sNxe4SESZedcBojRefIzg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@microsoft/api-extractor-model@7.32.2':
+    resolution: {integrity: sha512-Ussc25rAalc+4JJs9HNQE7TuO9y6jpYQX9nWD1DhqUzYPBr3Lr7O9intf+ZY8kD5HnIqeIRJX7ccCT0QyBy2Ww==}
+
+  '@microsoft/api-extractor@7.55.2':
+    resolution: {integrity: sha512-1jlWO4qmgqYoVUcyh+oXYRztZde/pAi7cSVzBz/rc+S7CoVzDasy8QE13dx6sLG4VRo8SfkkLbFORR6tBw4uGQ==}
+    hasBin: true
+
+  '@microsoft/tsdoc-config@0.18.0':
+    resolution: {integrity: sha512-8N/vClYyfOH+l4fLkkr9+myAoR6M7akc8ntBJ4DJdWH2b09uVfr71+LTMpNyG19fNqWDg8KEDZhx5wxuqHyGjw==}
+
+  '@microsoft/tsdoc@0.16.0':
+    resolution: {integrity: sha512-xgAyonlVVS+q7Vc7qLW0UrJU7rSFcETRWsqdXZtjzRU8dF+6CkozTK4V4y1LwOX7j8r/vHphjDeMeGI4tNGeGA==}
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@npmcli/fs@5.0.0':
+    resolution: {integrity: sha512-7OsC1gNORBEawOa5+j2pXN9vsicaIOH5cPXxoR6fJOmH6/EXpJB2CajXOu1fPRFun2m1lktEFX11+P89hqO/og==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  '@nuxt/kit@3.20.2':
+    resolution: {integrity: sha512-laqfmMcWWNV1FsVmm1+RQUoGY8NIJvCRl0z0K8ikqPukoEry0LXMqlQ+xaf8xJRvoH2/78OhZmsEEsUBTXipcw==}
+    engines: {node: '>=18.12.0'}
+
+  '@nuxt/kit@4.2.2':
+    resolution: {integrity: sha512-ZAgYBrPz/yhVgDznBNdQj2vhmOp31haJbO0I0iah/P9atw+OHH7NJLUZ3PK+LOz/0fblKTN1XJVSi8YQ1TQ0KA==}
+    engines: {node: '>=18.12.0'}
+
+  '@one-ini/wasm@0.1.1':
+    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
+
+  '@parcel/watcher-android-arm64@2.5.1':
+    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.1':
+    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-wasm@2.5.1':
+    resolution: {integrity: sha512-RJxlQQLkaMMIuWRozy+z2vEqbaQlCuaCgVZIUCzQLYggY22LZbP5Y1+ia+FD724Ids9e+XIyOLXLrLgQSHIthw==}
+    engines: {node: '>= 10.0.0'}
+    bundledDependencies:
+      - napi-wasm
+
+  '@parcel/watcher-win32-arm64@2.5.1':
+    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.1':
+    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.1':
+    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.1':
+    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
+    engines: {node: '>= 10.0.0'}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
+  '@pkgr/core@0.2.9':
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
+  '@playwright/test@1.57.0':
+    resolution: {integrity: sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@pnpm/config.env-replace@1.1.0':
+    resolution: {integrity: sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==}
+    engines: {node: '>=12.22.0'}
+
+  '@pnpm/constants@1001.3.1':
+    resolution: {integrity: sha512-2hf0s4pVrVEH8RvdJJ7YRKjQdiG8m0iAT26TTqXnCbK30kKwJW69VLmP5tED5zstmDRXcOeH5eRcrpkdwczQ9g==}
+    engines: {node: '>=18.12'}
+
+  '@pnpm/error@1000.0.5':
+    resolution: {integrity: sha512-GjH0TPjbVNrPnl/BAGoFuBLJ2sFfXNKbS33lll/Ehe9yw0fyc8Kdw7kO9if37yQqn6vaa4dAHKkPllum7f/IPQ==}
+    engines: {node: '>=18.12'}
+
+  '@pnpm/network.ca-file@1.0.2':
+    resolution: {integrity: sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==}
+    engines: {node: '>=12.22.0'}
+
+  '@pnpm/npm-conf@2.3.1':
+    resolution: {integrity: sha512-c83qWb22rNRuB0UaVCI0uRPNRr8Z0FWnEIvT47jiHAmOIUHbBOg5XvV7pM5x+rKn9HRpjxquDbXYSXr3fAKFcw==}
+    engines: {node: '>=12'}
+
+  '@pnpm/types@1001.2.0':
+    resolution: {integrity: sha512-UIju+OadUVS0q5q/MbRAzMS5M9HZcZyT6evyrgPUH0DV9przkcW7/LH1Sj33Q2MpJO9Nzqw4b4w72x8mvtUAew==}
+    engines: {node: '>=18.12'}
+
+  '@pnpm/workspace.read-manifest@1000.2.9':
+    resolution: {integrity: sha512-zyJf9UQrC6dyEyKm9aUkBChAFEC6wk5Lhn5c/UtRGOlncKC68gxmNJXIQa9seRidLA0ExvJkIack7ThHe4Efow==}
+    engines: {node: '>=18.12'}
+
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
+
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
+  '@poppinss/colors@4.1.6':
+    resolution: {integrity: sha512-H9xkIdFswbS8n1d6vmRd8+c10t2Qe+rZITbbDHHkQixH5+2x1FDGmi/0K+WgWiqQFKPSlIYB7jlH6Kpfn6Fleg==}
+
+  '@poppinss/dumper@0.6.5':
+    resolution: {integrity: sha512-NBdYIb90J7LfOI32dOewKI1r7wnkiH6m920puQ3qHUeZkxNkQiFnXVWoE6YtFSv6QOiPPf7ys6i+HWWecDz7sw==}
+
+  '@poppinss/exception@1.2.3':
+    resolution: {integrity: sha512-dCED+QRChTVatE9ibtoaxc+WkdzOSjYTKi/+uacHWIsfodVfpsueo3+DKpgU5Px8qXjgmXkSvhXvSCz3fnP9lw==}
+
+  '@publint/pack@0.1.2':
+    resolution: {integrity: sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw==}
+    engines: {node: '>=18'}
+
+  '@rolldown/pluginutils@1.0.0-beta.53':
+    resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
+
+  '@rolldown/pluginutils@1.0.0-beta.57':
+    resolution: {integrity: sha512-aQNelgx14tGA+n2tNSa9x6/jeoCL9fkDeCei7nOKnHx0fEFRRMu5ReiITo+zZD5TzWDGGRjbSYCs93IfRIyTuQ==}
+
+  '@rollup/plugin-alias@5.1.1':
+    resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-babel@5.3.1':
+    resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      '@types/babel__core': ^7.1.9
+      rollup: ^1.20.0||^2.0.0
+    peerDependenciesMeta:
+      '@types/babel__core':
+        optional: true
+
+  '@rollup/plugin-commonjs@28.0.9':
+    resolution: {integrity: sha512-PIR4/OHZ79romx0BVVll/PkwWpJ7e5lsqFa3gFfcrFPWwLXLV39JVUzQV9RKjWerE7B845Hqjj9VYlQeieZ2dA==}
+    engines: {node: '>=16.0.0 || 14 >= 14.17'}
+    peerDependencies:
+      rollup: ^2.68.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-inject@5.0.5':
+    resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-json@6.1.0':
+    resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-node-resolve@15.3.1':
+    resolution: {integrity: sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-node-resolve@16.0.3':
+    resolution: {integrity: sha512-lUYM3UBGuM93CnMPG1YocWu7X802BrNF3jW2zny5gQyLQgRFJhV1Sq0Zi74+dh/6NBx1DxFC4b4GXg9wUCG5Qg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-replace@2.4.2':
+    resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==}
+    peerDependencies:
+      rollup: ^1.20.0 || ^2.0.0
+
+  '@rollup/plugin-replace@6.0.3':
+    resolution: {integrity: sha512-J4RZarRvQAm5IF0/LwUUg+obsm+xZhYnbMXmXROyoSE1ATJe3oXSb9L5MMppdxP2ylNSjv6zFBwKYjcKMucVfA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-terser@0.4.4':
+    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/pluginutils@3.1.0':
+    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+
+  '@rollup/pluginutils@4.2.1':
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.54.0':
+    resolution: {integrity: sha512-OywsdRHrFvCdvsewAInDKCNyR3laPA2mc9bRYJ6LBp5IyvF3fvXbbNR0bSzHlZVFtn6E0xw2oZlyjg4rKCVcng==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.54.0':
+    resolution: {integrity: sha512-Skx39Uv+u7H224Af+bDgNinitlmHyQX1K/atIA32JP3JQw6hVODX5tkbi2zof/E69M1qH2UoN3Xdxgs90mmNYw==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.54.0':
+    resolution: {integrity: sha512-k43D4qta/+6Fq+nCDhhv9yP2HdeKeP56QrUUTW7E6PhZP1US6NDqpJj4MY0jBHlJivVJD5P8NxrjuobZBJTCRw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.54.0':
+    resolution: {integrity: sha512-cOo7biqwkpawslEfox5Vs8/qj83M/aZCSSNIWpVzfU2CYHa2G3P1UN5WF01RdTHSgCkri7XOlTdtk17BezlV3A==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.54.0':
+    resolution: {integrity: sha512-miSvuFkmvFbgJ1BevMa4CPCFt5MPGw094knM64W9I0giUIMMmRYcGW/JWZDriaw/k1kOBtsWh1z6nIFV1vPNtA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.54.0':
+    resolution: {integrity: sha512-KGXIs55+b/ZfZsq9aR026tmr/+7tq6VG6MsnrvF4H8VhwflTIuYh+LFUlIsRdQSgrgmtM3fVATzEAj4hBQlaqQ==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.54.0':
+    resolution: {integrity: sha512-EHMUcDwhtdRGlXZsGSIuXSYwD5kOT9NVnx9sqzYiwAc91wfYOE1g1djOEDseZJKKqtHAHGwnGPQu3kytmfaXLQ==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.54.0':
+    resolution: {integrity: sha512-+pBrqEjaakN2ySv5RVrj/qLytYhPKEUwk+e3SFU5jTLHIcAtqh2rLrd/OkbNuHJpsBgxsD8ccJt5ga/SeG0JmA==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-arm64-gnu@4.54.0':
+    resolution: {integrity: sha512-NSqc7rE9wuUaRBsBp5ckQ5CVz5aIRKCwsoa6WMF7G01sX3/qHUw/z4pv+D+ahL1EIKy6Enpcnz1RY8pf7bjwng==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-arm64-musl@4.54.0':
+    resolution: {integrity: sha512-gr5vDbg3Bakga5kbdpqx81m2n9IX8M6gIMlQQIXiLTNeQW6CucvuInJ91EuCJ/JYvc+rcLLsDFcfAD1K7fMofg==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-loong64-gnu@4.54.0':
+    resolution: {integrity: sha512-gsrtB1NA3ZYj2vq0Rzkylo9ylCtW/PhpLEivlgWe0bpgtX5+9j9EZa0wtZiCjgu6zmSeZWyI/e2YRX1URozpIw==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.54.0':
+    resolution: {integrity: sha512-y3qNOfTBStmFNq+t4s7Tmc9hW2ENtPg8FeUD/VShI7rKxNW7O4fFeaYbMsd3tpFlIg1Q8IapFgy7Q9i2BqeBvA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.54.0':
+    resolution: {integrity: sha512-89sepv7h2lIVPsFma8iwmccN7Yjjtgz0Rj/Ou6fEqg3HDhpCa+Et+YSufy27i6b0Wav69Qv4WBNl3Rs6pwhebQ==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-riscv64-musl@4.54.0':
+    resolution: {integrity: sha512-ZcU77ieh0M2Q8Ur7D5X7KvK+UxbXeDHwiOt/CPSBTI1fBmeDMivW0dPkdqkT4rOgDjrDDBUed9x4EgraIKoR2A==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-linux-s390x-gnu@4.54.0':
+    resolution: {integrity: sha512-2AdWy5RdDF5+4YfG/YesGDDtbyJlC9LHmL6rZw6FurBJ5n4vFGupsOBGfwMRjBYH7qRQowT8D/U4LoSvVwOhSQ==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-gnu@4.54.0':
+    resolution: {integrity: sha512-WGt5J8Ij/rvyqpFexxk3ffKqqbLf9AqrTBbWDk7ApGUzaIs6V+s2s84kAxklFwmMF/vBNGrVdYgbblCOFFezMQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rollup/rollup-linux-x64-musl@4.54.0':
+    resolution: {integrity: sha512-JzQmb38ATzHjxlPHuTH6tE7ojnMKM2kYNzt44LO/jJi8BpceEC8QuXYA908n8r3CNuG/B3BV8VR3Hi1rYtmPiw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rollup/rollup-openharmony-arm64@4.54.0':
+    resolution: {integrity: sha512-huT3fd0iC7jigGh7n3q/+lfPcXxBi+om/Rs3yiFxjvSxbSB6aohDFXbWvlspaqjeOh+hx7DDHS+5Es5qRkWkZg==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.54.0':
+    resolution: {integrity: sha512-c2V0W1bsKIKfbLMBu/WGBz6Yci8nJ/ZJdheE0EwB73N3MvHYKiKGs3mVilX4Gs70eGeDaMqEob25Tw2Gb9Nqyw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.54.0':
+    resolution: {integrity: sha512-woEHgqQqDCkAzrDhvDipnSirm5vxUXtSKDYTVpZG3nUdW/VVB5VdCYA2iReSj/u3yCZzXID4kuKG7OynPnB3WQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.54.0':
+    resolution: {integrity: sha512-dzAc53LOuFvHwbCEOS0rPbXp6SIhAf2txMP5p6mGyOXXw5mWY8NGGbPMPrs4P1WItkfApDathBj/NzMLUZ9rtQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.54.0':
+    resolution: {integrity: sha512-hYT5d3YNdSh3mbCU1gwQyPgQd3T2ne0A3KG8KSBdav5TiBg6eInVmV+TeR5uHufiIgSFg0XsOWGW5/RhNcSvPg==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rushstack/node-core-library@5.19.1':
+    resolution: {integrity: sha512-ESpb2Tajlatgbmzzukg6zyAhH+sICqJR2CNXNhXcEbz6UGCQfrKCtkxOpJTftWc8RGouroHG0Nud1SJAszvpmA==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/problem-matcher@0.1.1':
+    resolution: {integrity: sha512-Fm5XtS7+G8HLcJHCWpES5VmeMyjAKaWeyZU5qPzZC+22mPlJzAsOxymHiWIfuirtPckX3aptWws+K2d0BzniJA==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/rig-package@0.6.0':
+    resolution: {integrity: sha512-ZQmfzsLE2+Y91GF15c65L/slMRVhF6Hycq04D4TwtdGaUAbIXXg9c5pKA5KFU7M4QMaihoobp9JJYpYcaY3zOw==}
+
+  '@rushstack/terminal@0.19.5':
+    resolution: {integrity: sha512-6k5tpdB88G0K7QrH/3yfKO84HK9ggftfUZ51p7fePyCE7+RLLHkWZbID9OFWbXuna+eeCFE7AkKnRMHMxNbz7Q==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@rushstack/ts-command-line@5.1.5':
+    resolution: {integrity: sha512-YmrFTFUdHXblYSa+Xc9OO9FsL/XFcckZy0ycQ6q7VSBsVs5P0uD9vcges5Q9vctGlVdu27w+Ct6IuJ458V0cTQ==}
+
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
+
+  '@simonwep/pickr@1.8.2':
+    resolution: {integrity: sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==}
+
+  '@sindresorhus/base62@1.0.0':
+    resolution: {integrity: sha512-TeheYy0ILzBEI/CO55CP6zJCSdSWeRtGnHy8U8dWSUH4I68iqTsy7HkMktR4xakThc9jotkPQUXT4ITdbV7cHA==}
+    engines: {node: '>=18'}
+
+  '@sindresorhus/is@7.1.1':
+    resolution: {integrity: sha512-rO92VvpgMc3kfiTjGT52LEtJ8Yc5kCWhZjLQ3LwlA4pSgPpQO7bVpYXParOD8Jwf+cVQECJo3yP/4I8aZtUQTQ==}
+    engines: {node: '>=18'}
+
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
+  '@speed-highlight/core@1.2.12':
+    resolution: {integrity: sha512-uilwrK0Ygyri5dToHYdZSjcvpS2ZwX0w5aSt3GCEN9hrjxWCoeV4Z2DTXuxjwbntaLQIEEAlCeNQss5SoHvAEA==}
+
+  '@stylistic/stylelint-plugin@3.1.3':
+    resolution: {integrity: sha512-85fsmzgsIVmyG3/GFrjuYj6Cz8rAM7IZiPiXCMiSMfoDOC1lOrzrXPDk24WqviAghnPqGpx8b0caK2PuewWGFg==}
+    engines: {node: ^18.12 || >=20.9}
+    peerDependencies:
+      stylelint: ^16.8.0
+
+  '@surma/rollup-plugin-off-main-thread@2.2.3':
+    resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
+
+  '@swc/helpers@0.5.17':
+    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
+
+  '@tailwindcss/nesting@0.0.0-insiders.565cd3e':
+    resolution: {integrity: sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==}
+    peerDependencies:
+      postcss: ^8.2.15
+
+  '@tailwindcss/typography@0.5.19':
+    resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
+  '@tanstack/store@0.8.0':
+    resolution: {integrity: sha512-Om+BO0YfMZe//X2z0uLF2j+75nQga6TpTJgLJQBiq85aOyZNIhkCgleNcud2KQg4k4v9Y9l+Uhru3qWMPGTOzQ==}
+
+  '@tanstack/virtual-core@3.13.13':
+    resolution: {integrity: sha512-uQFoSdKKf5S8k51W5t7b2qpfkyIbdHMzAn+AMQvHPxKUPeo1SsGaA4JRISQT87jm28b7z8OEqPcg1IOZagQHcA==}
+
+  '@tanstack/vue-store@0.8.0':
+    resolution: {integrity: sha512-YLsinYboBLIjNkxDpAn1ydaMS35dKq3M3a788JRCJi4/stWcN7Swp0pxxJ+p0IwKSY4tBXx7vMz22OYWQ1QsUQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.2.1
+      vue: ^3.5.24
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  '@tanstack/vue-virtual@3.13.13':
+    resolution: {integrity: sha512-Cf2xIEE8nWAfsX0N5nihkPYMeQRT+pHt4NEkuP8rNCn6lVnLDiV8rC8IeIxbKmQC0yPnj4SIBLwXYVf86xxKTQ==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  '@tinymce/tinymce-vue@6.3.0':
+    resolution: {integrity: sha512-DSP8Jhd3XqCCliTnusfbmz3D8GqQ4iRzkc4aadYHDcJPVjkaqopJ61McOdH82CSy599vGLkPjGzqJYWJkRMiUA==}
+    peerDependencies:
+      tinymce: ^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.1
+      vue: ^3.5.24
+    peerDependenciesMeta:
+      tinymce:
+        optional: true
+
+  '@tokenizer/token@0.3.0':
+    resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
+
+  '@tybys/wasm-util@0.10.1':
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+
+  '@types/archiver@6.0.4':
+    resolution: {integrity: sha512-ULdQpARQ3sz9WH4nb98mJDYA0ft2A8C4f4fovvUcFwINa1cgGjY36JCAYuP5YypRq4mco1lJp1/7jEMS2oR0Hg==}
+
+  '@types/argparse@1.0.38':
+    resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
+
+  '@types/bintrees@1.0.6':
+    resolution: {integrity: sha512-pZWT4Bz+tWwxlDspSjdoIza4PE5lbGI4Xvs3FZV/2v5m5SDA8LwNpU8AXxlndmARO7OaQ1Vf3zFenOsNMzaRkQ==}
+
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
+  '@types/conventional-commits-parser@5.0.2':
+    resolution: {integrity: sha512-BgT2szDXnVypgpNxOK8aL5SGjUdaQbC++WZNjF1Qge3Og2+zhHj+RWhmehLhYyvQwqAmvezruVfOf8+3m74W+g==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
+  '@types/eslint@9.6.1':
+    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
+
+  '@types/estree@0.0.39':
+    resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/html-minifier-terser@7.0.2':
+    resolution: {integrity: sha512-mm2HqV22l8lFQh4r2oSsOEVea+m0qqxEmwpc9kC1p/XzmjLWrReR9D/GRs8Pex2NX/imyEH9c5IU/7tMBQCHOA==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash.clonedeep@4.5.9':
+    resolution: {integrity: sha512-19429mWC+FyaAhOLzsS8kZUsI+/GmBAQ0HFiCPsKGU+7pBXOQWhyrY6xNNDwUSX8SMZMJvuFVMF9O5dQOlQK9Q==}
+
+  '@types/lodash.get@4.4.9':
+    resolution: {integrity: sha512-J5dvW98sxmGnamqf+/aLP87PYXyrha9xIgc2ZlHl6OHMFR2Ejdxep50QfU0abO1+CH6+ugx+8wEUN1toImAinA==}
+
+  '@types/lodash.isequal@4.5.8':
+    resolution: {integrity: sha512-uput6pg4E/tj2LGxCZo9+y27JNyB2OZuuI/T5F+ylVDYuqICLG2/ktjxx0v6GvVntAf8TvEzeQLcV0ffRirXuA==}
+
+  '@types/lodash.set@4.3.9':
+    resolution: {integrity: sha512-KOxyNkZpbaggVmqbpr82N2tDVTx05/3/j0f50Es1prxrWB0XYf9p3QNxqcbWb7P1Q9wlvsUSlCFnwlPCIJ46PQ==}
+
+  '@types/lodash@4.17.21':
+    resolution: {integrity: sha512-FOvQ0YPD5NOfPgMzJihoT+Za5pdkDJWcbpuj1DjaKZIr/gxodQjY/uWEFlTNqW2ugXHUiL8lRQgw63dzKHZdeQ==}
+
+  '@types/minimatch@3.0.5':
+    resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
+
+  '@types/node@12.20.55':
+    resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
+
+  '@types/node@24.10.4':
+    resolution: {integrity: sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==}
+
+  '@types/node@25.0.3':
+    resolution: {integrity: sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==}
+
+  '@types/nprogress@0.2.3':
+    resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
+
+  '@types/parse-json@4.0.2':
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+
+  '@types/postcss-import@14.0.3':
+    resolution: {integrity: sha512-raZhRVTf6Vw5+QbmQ7LOHSDML71A5rj4+EqDzAbrZPfxfoGzFxMHRCq16VlddGIZpHELw0BG4G0YE2ANkdZiIQ==}
+
+  '@types/qrcode@1.5.6':
+    resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
+
+  '@types/qs@6.14.0':
+    resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
+
+  '@types/readdir-glob@1.1.5':
+    resolution: {integrity: sha512-raiuEPUYqXu+nvtY2Pe8s8FEmZ3x5yAH4VkLdihcPdalvsHltomrRC9BzuStrJ9yk06470hS0Crw0f1pXqD+Hg==}
+
+  '@types/resolve@1.20.2':
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+
+  '@types/sortablejs@1.15.9':
+    resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
+
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
+  '@typescript-eslint/eslint-plugin@8.50.1':
+    resolution: {integrity: sha512-PKhLGDq3JAg0Jk/aK890knnqduuI/Qj+udH7wCf0217IGi4gt+acgCyPVe79qoT+qKUvHMDQkwJeKW9fwl8Cyw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.50.1
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/parser@8.50.1':
+    resolution: {integrity: sha512-hM5faZwg7aVNa819m/5r7D0h0c9yC4DUlWAOvHAtISdFTc8xB86VmX5Xqabrama3wIPJ/q9RbGS1worb6JfnMg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.50.1':
+    resolution: {integrity: sha512-E1ur1MCVf+YiP89+o4Les/oBAVzmSbeRB0MQLfSlYtbWU17HPxZ6Bhs5iYmKZRALvEuBoXIZMOIRRc/P++Ortg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@7.18.0':
+    resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
+  '@typescript-eslint/scope-manager@8.50.1':
+    resolution: {integrity: sha512-mfRx06Myt3T4vuoHaKi8ZWNTPdzKPNBhiblze5N50//TSHOAQQevl/aolqA/BcqqbJ88GUnLqjjcBc8EWdBcVw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.50.1':
+    resolution: {integrity: sha512-ooHmotT/lCWLXi55G4mvaUF60aJa012QzvLK0Y+Mp4WdSt17QhMhWOaBWeGTFVkb2gDgBe19Cxy1elPXylslDw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/type-utils@8.50.1':
+    resolution: {integrity: sha512-7J3bf022QZE42tYMO6SL+6lTPKFk/WphhRPe9Tw/el+cEwzLz1Jjz2PX3GtGQVxooLDKeMVmMt7fWpYRdG5Etg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@7.18.0':
+    resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
+  '@typescript-eslint/types@8.50.1':
+    resolution: {integrity: sha512-v5lFIS2feTkNyMhd7AucE/9j/4V9v5iIbpVRncjk/K0sQ6Sb+Np9fgYS/63n6nwqahHQvbmujeBL7mp07Q9mlA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@7.18.0':
+    resolution: {integrity: sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/typescript-estree@8.50.1':
+    resolution: {integrity: sha512-woHPdW+0gj53aM+cxchymJCrh0cyS7BTIdcDxWUNsclr9VDkOSbqC13juHzxOmQ22dDkMZEpZB+3X1WpUvzgVQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/utils@7.18.0':
+    resolution: {integrity: sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+
+  '@typescript-eslint/utils@8.50.1':
+    resolution: {integrity: sha512-lCLp8H1T9T7gPbEuJSnHwnSuO9mDf8mfK/Nion5mZmiEaQD9sWf9W4dfeFqRyqRjF06/kBuTmAqcs9sewM2NbQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/visitor-keys@7.18.0':
+    resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+
+  '@typescript-eslint/visitor-keys@8.50.1':
+    resolution: {integrity: sha512-IrDKrw7pCRUR94zeuCSUWQ+w8JEf5ZX5jl/e6AHGSLi1/zIr0lgutfn/7JpfCey+urpgQEdrZVYzCaVVKiTwhQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
+    cpu: [arm]
+    os: [android]
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
+    cpu: [arm64]
+    os: [android]
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+    cpu: [x64]
+    os: [win32]
+
+  '@vee-validate/zod@4.15.1':
+    resolution: {integrity: sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA==}
+    peerDependencies:
+      zod: ^3.24.0
+
+  '@vercel/nft@0.30.4':
+    resolution: {integrity: sha512-wE6eAGSXScra60N2l6jWvNtVK0m+sh873CpfZW4KI2v8EHuUQp+mSEi4T+IcdPCSEDgCdAS/7bizbhQlkjzrSA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@vitejs/plugin-vue-jsx@5.1.3':
+    resolution: {integrity: sha512-I6Zr8cYVr5WHMW5gNOP09DNqW9rgO8RX73Wa6Czgq/0ndpTfJM4vfDChfOT1+3KtdrNqilNBtNlFwVeB02ZzGw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+      vue: ^3.5.24
+
+  '@vitejs/plugin-vue@6.0.3':
+    resolution: {integrity: sha512-TlGPkLFLVOY3T7fZrwdvKpjprR3s4fxRln0ORDo1VQ7HHyxJwTlrjKU3kpVWTlaAjIEuCTokmjkZnr8Tpc925w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+      vue: ^3.5.24
+
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
+
+  '@vitest/mocker@3.2.4':
+    resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
+
+  '@vitest/runner@3.2.4':
+    resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==}
+
+  '@vitest/snapshot@3.2.4':
+    resolution: {integrity: sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==}
+
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
+
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+
+  '@volar/language-core@2.4.27':
+    resolution: {integrity: sha512-DjmjBWZ4tJKxfNC1F6HyYERNHPYS7L7OPFyCrestykNdUZMFYzI9WTyvwPcaNaHlrEUwESHYsfEw3isInncZxQ==}
+
+  '@volar/source-map@2.4.27':
+    resolution: {integrity: sha512-ynlcBReMgOZj2i6po+qVswtDUeeBRCTgDurjMGShbm8WYZgJ0PA4RmtebBJ0BCYol1qPv3GQF6jK7C9qoVc7lg==}
+
+  '@volar/typescript@2.4.27':
+    resolution: {integrity: sha512-eWaYCcl/uAPInSK2Lze6IqVWaBu/itVqR5InXcHXFyles4zO++Mglt3oxdgj75BDcv1Knr9Y93nowS8U3wqhxg==}
+
+  '@vue/babel-helper-vue-transform-on@1.5.0':
+    resolution: {integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==}
+
+  '@vue/babel-helper-vue-transform-on@2.0.1':
+    resolution: {integrity: sha512-uZ66EaFbnnZSYqYEyplWvn46GhZ1KuYSThdT68p+am7MgBNbQ3hphTL9L+xSIsWkdktwhPYLwPgVWqo96jDdRA==}
+
+  '@vue/babel-plugin-jsx@1.5.0':
+    resolution: {integrity: sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
+  '@vue/babel-plugin-jsx@2.0.1':
+    resolution: {integrity: sha512-a8CaLQjD/s4PVdhrLD/zT574ZNPnZBOY+IhdtKWRB4HRZ0I2tXBi5ne7d9eCfaYwp5gU5+4KIyFTV1W1YL9xZA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+
+  '@vue/babel-plugin-resolve-type@1.5.0':
+    resolution: {integrity: sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@vue/babel-plugin-resolve-type@2.0.1':
+    resolution: {integrity: sha512-ybwgIuRGRRBhOU37GImDoWQoz+TlSqap65qVI6iwg/J7FfLTLmMf97TS7xQH9I7Qtr/gp161kYVdhr1ZMraSYQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@vue/compiler-core@3.5.26':
+    resolution: {integrity: sha512-vXyI5GMfuoBCnv5ucIT7jhHKl55Y477yxP6fc4eUswjP8FG3FFVFd41eNDArR+Uk3QKn2Z85NavjaxLxOC19/w==}
+
+  '@vue/compiler-dom@3.5.26':
+    resolution: {integrity: sha512-y1Tcd3eXs834QjswshSilCBnKGeQjQXB6PqFn/1nxcQw4pmG42G8lwz+FZPAZAby6gZeHSt/8LMPfZ4Rb+Bd/A==}
+
+  '@vue/compiler-sfc@3.5.26':
+    resolution: {integrity: sha512-egp69qDTSEZcf4bGOSsprUr4xI73wfrY5oRs6GSgXFTiHrWj4Y3X5Ydtip9QMqiCMCPVwLglB9GBxXtTadJ3mA==}
+
+  '@vue/compiler-ssr@3.5.26':
+    resolution: {integrity: sha512-lZT9/Y0nSIRUPVvapFJEVDbEXruZh2IYHMk2zTtEgJSlP5gVOqeWXH54xDKAaFS4rTnDeDBQUYDtxKyoW9FwDw==}
+
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
+  '@vue/devtools-api@7.7.9':
+    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
+
+  '@vue/devtools-core@8.0.5':
+    resolution: {integrity: sha512-dpCw8nl0GDBuiL9SaY0mtDxoGIEmU38w+TQiYEPOLhW03VDC0lfNMYXS/qhl4I0YlysGp04NLY4UNn6xgD0VIQ==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  '@vue/devtools-kit@7.7.9':
+    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
+
+  '@vue/devtools-kit@8.0.5':
+    resolution: {integrity: sha512-q2VV6x1U3KJMTQPUlRMyWEKVbcHuxhqJdSr6Jtjz5uAThAIrfJ6WVZdGZm5cuO63ZnSUz0RCsVwiUUb0mDV0Yg==}
+
+  '@vue/devtools-shared@7.7.9':
+    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
+
+  '@vue/devtools-shared@8.0.5':
+    resolution: {integrity: sha512-bRLn6/spxpmgLk+iwOrR29KrYnJjG9DGpHGkDFG82UM21ZpJ39ztUT9OXX3g+usW7/b2z+h46I9ZiYyB07XMXg==}
+
+  '@vue/language-core@2.2.0':
+    resolution: {integrity: sha512-O1ZZFaaBGkKbsRfnVH1ifOK1/1BUkyK+3SQsfnh6PmMmD4qJcTU8godCeA96jjDRTL6zgnK7YzCHfaUlH2r0Mw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@vue/language-core@3.2.1':
+    resolution: {integrity: sha512-g6oSenpnGMtpxHGAwKuu7HJJkNZpemK/zg3vZzZbJ6cnnXq1ssxuNrXSsAHYM3NvH8p4IkTw+NLmuxyeYz4r8A==}
+
+  '@vue/reactivity@3.5.26':
+    resolution: {integrity: sha512-9EnYB1/DIiUYYnzlnUBgwU32NNvLp/nhxLXeWRhHUEeWNTn1ECxX8aGO7RTXeX6PPcxe3LLuNBFoJbV4QZ+CFQ==}
+
+  '@vue/runtime-core@3.5.26':
+    resolution: {integrity: sha512-xJWM9KH1kd201w5DvMDOwDHYhrdPTrAatn56oB/LRG4plEQeZRQLw0Bpwih9KYoqmzaxF0OKSn6swzYi84e1/Q==}
+
+  '@vue/runtime-dom@3.5.26':
+    resolution: {integrity: sha512-XLLd/+4sPC2ZkN/6+V4O4gjJu6kSDbHAChvsyWgm1oGbdSO3efvGYnm25yCjtFm/K7rrSDvSfPDgN1pHgS4VNQ==}
+
+  '@vue/server-renderer@3.5.26':
+    resolution: {integrity: sha512-TYKLXmrwWKSodyVuO1WAubucd+1XlLg4set0YoV+Hu8Lo79mp/YMwWV5mC5FgtsDxX3qo1ONrxFaTP1OQgy1uA==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  '@vue/shared@3.5.26':
+    resolution: {integrity: sha512-7Z6/y3uFI5PRoKeorTOSXKcDj0MSasfNNltcslbFrPpcw6aXRUALq4IfJlaTRspiWIUOEZbrpM+iQGmCOiWe4A==}
+
+  '@vue/test-utils@2.4.6':
+    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
+
+  '@vueuse/core@12.8.2':
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
+
+  '@vueuse/core@13.9.0':
+    resolution: {integrity: sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  '@vueuse/core@14.1.0':
+    resolution: {integrity: sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  '@vueuse/integrations@14.1.0':
+    resolution: {integrity: sha512-eNQPdisnO9SvdydTIXnTE7c29yOsJBD/xkwEyQLdhDC/LKbqrFpXHb3uS//7NcIrQO3fWVuvMGp8dbK6mNEMCA==}
+    peerDependencies:
+      async-validator: ^4
+      axios: ^1
+      change-case: ^5
+      drauu: ^0.4
+      focus-trap: ^7
+      fuse.js: ^7
+      idb-keyval: ^6
+      jwt-decode: ^4
+      nprogress: ^0.2
+      qrcode: ^1.5
+      sortablejs: ^1
+      universal-cookie: ^7 || ^8
+      vue: ^3.5.24
+    peerDependenciesMeta:
+      async-validator:
+        optional: true
+      axios:
+        optional: true
+      change-case:
+        optional: true
+      drauu:
+        optional: true
+      focus-trap:
+        optional: true
+      fuse.js:
+        optional: true
+      idb-keyval:
+        optional: true
+      jwt-decode:
+        optional: true
+      nprogress:
+        optional: true
+      qrcode:
+        optional: true
+      sortablejs:
+        optional: true
+      universal-cookie:
+        optional: true
+
+  '@vueuse/metadata@12.8.2':
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
+
+  '@vueuse/metadata@13.9.0':
+    resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
+
+  '@vueuse/metadata@14.1.0':
+    resolution: {integrity: sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA==}
+
+  '@vueuse/motion@3.0.3':
+    resolution: {integrity: sha512-4B+ITsxCI9cojikvrpaJcLXyq0spj3sdlzXjzesWdMRd99hhtFI6OJ/1JsqwtF73YooLe0hUn/xDR6qCtmn5GQ==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  '@vueuse/shared@12.8.2':
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
+
+  '@vueuse/shared@13.9.0':
+    resolution: {integrity: sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  '@vueuse/shared@14.1.0':
+    resolution: {integrity: sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  '@vxe-ui/core@4.2.16':
+    resolution: {integrity: sha512-clfS0UcW15I+vWDVv7+D7ifYb1UgG1As3lUPPyROSN01bDiAzbDEoyOg4bLlvjhySN+m4qbSb+SEV6gosbo9yA==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  JSONStream@1.3.5:
+    resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
+    hasBin: true
+
+  abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  abbrev@3.0.1:
+    resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
+  abort-controller@3.0.0:
+    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
+    engines: {node: '>=6.5'}
+
+  acorn-import-attributes@1.9.5:
+    resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
+    peerDependencies:
+      acorn: ^8
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ajv-draft-04@1.0.0:
+    resolution: {integrity: sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==}
+    peerDependencies:
+      ajv: ^8.5.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ajv@8.12.0:
+    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
+
+  ajv@8.13.0:
+    resolution: {integrity: sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==}
+
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+
+  alien-signals@0.4.14:
+    resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
+
+  alien-signals@3.1.1:
+    resolution: {integrity: sha512-ogkIWbVrLwKtHY6oOAXaYkAxP+cTH7V5FZ5+Tm4NZFd8VDZ6uNMDrfzqctTZ42eTMCSR3ne3otpcxmqSnFfPYA==}
+
+  ansi-align@3.0.1:
+    resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
+
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
+  ansi-escapes@7.2.0:
+    resolution: {integrity: sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==}
+    engines: {node: '>=18'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
+  ansis@4.2.0:
+    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
+    engines: {node: '>=14'}
+
+  ant-design-vue@4.2.6:
+    resolution: {integrity: sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      vue: ^3.5.24
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  archiver-utils@5.0.2:
+    resolution: {integrity: sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==}
+    engines: {node: '>= 14'}
+
+  archiver@7.0.1:
+    resolution: {integrity: sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==}
+    engines: {node: '>= 14'}
+
+  are-docs-informative@0.0.2:
+    resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
+    engines: {node: '>=14'}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
+
+  array-differ@3.0.0:
+    resolution: {integrity: sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==}
+    engines: {node: '>=8'}
+
+  array-ify@1.0.0:
+    resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
+
+  array-timsort@1.0.3:
+    resolution: {integrity: sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==}
+
+  array-tree-filter@2.1.0:
+    resolution: {integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+
+  arrify@2.0.1:
+    resolution: {integrity: sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==}
+    engines: {node: '>=8'}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  astral-regex@2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+
+  async-sema@3.1.1:
+    resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
+
+  async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  at-least-node@1.0.0:
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
+
+  atomically@2.1.0:
+    resolution: {integrity: sha512-+gDffFXRW6sl/HCwbta7zK4uNqbPjv4YJEAdz7Vu+FLQHe77eZ4bvbJGi4hE0QPeJlMYMA3piXEr1UL3dAwx7Q==}
+
+  autoprefixer@10.4.23:
+    resolution: {integrity: sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
+  axios-mock-adapter@2.1.0:
+    resolution: {integrity: sha512-AZUe4OjECGCNNssH8SOdtneiQELsqTsat3SQQCWLPjN436/H+L9AjWfV7bF+Zg/YL9cgbhrz5671hoh+Tbn98w==}
+    peerDependencies:
+      axios: '>= 0.17.0'
+
+  axios@1.13.2:
+    resolution: {integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==}
+
+  b4a@1.7.3:
+    resolution: {integrity: sha512-5Q2mfq2WfGuFp3uS//0s6baOJLMoVduPYVeNmDYxu5OUA1/cBfvr2RIS7vi62LdNj/urk1hfmj867I3qt6uZ7Q==}
+    peerDependencies:
+      react-native-b4a: '*'
+    peerDependenciesMeta:
+      react-native-b4a:
+        optional: true
+
+  babel-plugin-polyfill-corejs2@0.4.14:
+    resolution: {integrity: sha512-Co2Y9wX854ts6U8gAAPXfn0GmAyctHuK8n0Yhfjd6t30g7yvKjspvvOo9yG+z52PZRgFErt7Ka2pYnXCjLKEpg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  babel-plugin-polyfill-corejs3@0.13.0:
+    resolution: {integrity: sha512-U+GNwMdSFgzVmfhNm8GJUX88AadB3uo9KpJqS3FaqNIPKgySuvMb+bHPsOmmuWyIcuqZj/pzt1RUIUZns4y2+A==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  babel-plugin-polyfill-regenerator@0.6.5:
+    resolution: {integrity: sha512-ISqQ2frbiNU9vIJkzg7dlPpznPZ4jOiUQ1uSmB0fEHeowtN3COYRsXr/xexn64NpU13P06jc/L5TgiJXOgrbEg==}
+    peerDependencies:
+      '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  balanced-match@2.0.0:
+    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
+
+  bare-events@2.8.2:
+    resolution: {integrity: sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==}
+    peerDependencies:
+      bare-abort-controller: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  baseline-browser-mapping@2.9.11:
+    resolution: {integrity: sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==}
+    hasBin: true
+
+  better-path-resolve@1.0.0:
+    resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
+    engines: {node: '>=4'}
+
+  bignumber.js@9.3.1:
+    resolution: {integrity: sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  bindings@1.5.0:
+    resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
+
+  bintrees@1.0.2:
+    resolution: {integrity: sha512-VOMgTMwjAaUG580SXn3LacVgjurrbMme7ZZNYGSSV7mmtY6QQRh0Eg3pwIcntQ77DErK1L0NxkbetjcoXzVwKw==}
+
+  birpc@2.9.0:
+    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
+
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
+  boxen@8.0.1:
+    resolution: {integrity: sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==}
+    engines: {node: '>=18'}
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  buffer-crc32@1.0.0:
+    resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
+    engines: {node: '>=8.0.0'}
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+
+  builtin-modules@5.0.0:
+    resolution: {integrity: sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==}
+    engines: {node: '>=18.20'}
+
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
+  c12@3.3.3:
+    resolution: {integrity: sha512-750hTRvgBy5kcMNPdh95Qo+XUBeGo8C7nsKSmedDmaQI+E0r82DwHeM6vBewDe4rGFbnxoa4V9pw+sPh5+Iz8Q==}
+    peerDependencies:
+      magicast: '*'
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  cacache@20.0.3:
+    resolution: {integrity: sha512-3pUp4e8hv07k1QlijZu6Kn7c9+ZpWWk4j3F8N3xPuCExULobqJydKYOTj1FTq58srkJsXvO7LbGAH4C0ZU3WGw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  cacheable@2.3.1:
+    resolution: {integrity: sha512-yr+FSHWn1ZUou5LkULX/S+jhfgfnLbuKQjE40tyEd4fxGZVMbBL5ifno0J0OauykS8UiCSgHi+DV/YD+rjFxFg==}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsite@1.0.0:
+    resolution: {integrity: sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camel-case@4.1.2:
+    resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
+  camelcase@6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+
+  camelcase@8.0.0:
+    resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
+    engines: {node: '>=16'}
+
+  caniuse-api@3.0.0:
+    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
+
+  caniuse-lite@1.0.30001761:
+    resolution: {integrity: sha512-JF9ptu1vP2coz98+5051jZ4PwQgd2ni8A+gYSN7EA7dPKIMf0pDlSUxhdmVOaV3/fYK5uWBkgSXJaRLr4+3A6g==}
+
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
+  chalk-template@1.1.2:
+    resolution: {integrity: sha512-2bxTP2yUH7AJj/VAXfcA+4IcWGdQ87HwBANLt5XxGTeomo8yG0y95N1um9i5StvhT/Bl0/2cARA5v1PpPXUxUA==}
+    engines: {node: '>=14.16'}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
+
+  chardet@2.1.1:
+    resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
+
+  check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
+
+  cheerio-select@2.1.0:
+    resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
+
+  cheerio@1.1.2:
+    resolution: {integrity: sha512-IkxPpb5rS/d1IiLbHMgfPuS0FgiWTtFIm/Nj+2woXDLTZ7fOT2eqzgYbdMlLweqlHbsZjxEChoVK+7iph7jyQg==}
+    engines: {node: '>=20.18.1'}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
+
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
+  ci-info@3.9.0:
+    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
+    engines: {node: '>=8'}
+
+  ci-info@4.3.1:
+    resolution: {integrity: sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==}
+    engines: {node: '>=8'}
+
+  circular-dependency-scanner@2.3.0:
+    resolution: {integrity: sha512-J1a6SeOL1pfaVdCVECg4h1cLxZipjnibha2uutY7gG7Ax8lre03sWdK1raJew0P+8AGv9/zRF5DCWHkceOYPBQ==}
+    hasBin: true
+
+  citty@0.1.6:
+    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  clean-css@5.3.3:
+    resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
+    engines: {node: '>= 10.0'}
+
+  clean-regexp@1.0.0:
+    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
+    engines: {node: '>=4'}
+
+  clear-module@4.1.2:
+    resolution: {integrity: sha512-LWAxzHqdHsAZlPlEyJ2Poz6AIs384mPeqLVCru2p0BrP9G/kVGuhNyZYClLO6cXlnuJjzC8xtsJIuMjKqLXoAw==}
+    engines: {node: '>=8'}
+
+  cli-boxes@3.0.0:
+    resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
+    engines: {node: '>=10'}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
+  cli-truncate@4.0.0:
+    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
+    engines: {node: '>=18'}
+
+  clipboard@2.0.11:
+    resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==}
+
+  clipboardy@4.0.0:
+    resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
+    engines: {node: '>=18'}
+
+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+
+  cliui@7.0.4:
+    resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  cluster-key-slot@1.1.2:
+    resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
+    engines: {node: '>=0.10.0'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
+  commander@12.1.0:
+    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
+    engines: {node: '>=18'}
+
+  commander@13.1.0:
+    resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
+    engines: {node: '>=18'}
+
+  commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
+  comment-json@4.5.0:
+    resolution: {integrity: sha512-aKl8CwoMKxVTfAK4dFN4v54AEvuUh9pzmgVIBeK6gBomLwMgceQUKKWHzJdW1u1VQXQuwnJ7nJGWYYMTl5U4yg==}
+    engines: {node: '>= 6'}
+
+  comment-parser@1.4.1:
+    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
+    engines: {node: '>= 12.0.0'}
+
+  commitlint-plugin-function-rules@4.2.0:
+    resolution: {integrity: sha512-v0FKexDFIOgb1ca5fMIpPrYf2VCSyx2dkw5ayCXW7nHF/u4TzAJu1ATFhWj1XfKjq2Gr1/3FVAoLEx/Xm9Lisw==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@commitlint/lint': '>=19 <21'
+
+  common-tags@1.8.2:
+    resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
+    engines: {node: '>=4.0.0'}
+
+  commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+
+  compare-func@2.0.0:
+    resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
+
+  compare-versions@6.1.1:
+    resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
+
+  compatx@0.2.0:
+    resolution: {integrity: sha512-6gLRNt4ygsi5NyMVhceOCFv14CIdDFN7fQjX1U4+47qVE/+kjPoXMK65KWK+dWxmFzMTuKazoQ9sch6pM0p5oA==}
+
+  compress-commons@6.0.2:
+    resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
+    engines: {node: '>= 14'}
+
+  compute-scroll-into-view@1.0.20:
+    resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+
+  config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+
+  configstore@7.1.0:
+    resolution: {integrity: sha512-N4oog6YJWbR9kGyXvS7jEykLDXIE2C0ILYqNBZBp9iwiJpoCBWYsuAdW6PPFn6w06jjnC+3JstVvWHO4cZqvRg==}
+    engines: {node: '>=18'}
+
+  connect-history-api-fallback@1.6.0:
+    resolution: {integrity: sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==}
+    engines: {node: '>=0.8'}
+
+  consola@2.15.3:
+    resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
+
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  conventional-changelog-angular@7.0.0:
+    resolution: {integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==}
+    engines: {node: '>=16'}
+
+  conventional-changelog-conventionalcommits@7.0.2:
+    resolution: {integrity: sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==}
+    engines: {node: '>=16'}
+
+  conventional-commits-parser@5.0.0:
+    resolution: {integrity: sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cookie-es@1.2.2:
+    resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
+
+  cookie-es@2.0.0:
+    resolution: {integrity: sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==}
+
+  copy-anything@2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+
+  copy-anything@4.0.5:
+    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
+    engines: {node: '>=18'}
+
+  core-js-compat@3.47.0:
+    resolution: {integrity: sha512-IGfuznZ/n7Kp9+nypamBhvwdwLsW6KC8IOaURw2doAK5e98AG3acVLdh0woOnEqCfUtS+Vu882JE4k/DAm3ItQ==}
+
+  core-js@3.47.0:
+    resolution: {integrity: sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==}
+
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+
+  cosmiconfig-typescript-loader@6.2.0:
+    resolution: {integrity: sha512-GEN39v7TgdxgIoNcdkRE3uiAzQt3UXLyHbRHD6YoL048XAeOomyxaP+Hh/+2C6C2wYjxJ2onhJcsQp+L4YEkVQ==}
+    engines: {node: '>=v18'}
+    peerDependencies:
+      '@types/node': '*'
+      cosmiconfig: '>=9'
+      typescript: '>=5'
+
+  cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+
+  crc32-stream@6.0.0:
+    resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
+    engines: {node: '>= 14'}
+
+  croner@9.1.0:
+    resolution: {integrity: sha512-p9nwwR4qyT5W996vBZhdvBCnMhicY5ytZkR4D1Xj0wuTDEiMnjwR57Q3RXYY/s0EpX6Ay3vgIcfaR+ewGHsi+g==}
+    engines: {node: '>=18.0'}
+
+  cropperjs@1.6.2:
+    resolution: {integrity: sha512-nhymn9GdnV3CqiEHJVai54TULFAE3VshJTXSqSJKa8yXAKyBKDWdhHarnlIPrshJ0WMFTGuFvG02YjLXfPiuOA==}
+
+  cross-env@7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  crossws@0.3.5:
+    resolution: {integrity: sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==}
+
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
+  crypto-random-string@2.0.0:
+    resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
+    engines: {node: '>=8'}
+
+  cspell-config-lib@8.19.4:
+    resolution: {integrity: sha512-LtFNZEWVrnpjiTNgEDsVN05UqhhJ1iA0HnTv4jsascPehlaUYVoyucgNbFeRs6UMaClJnqR0qT9lnPX+KO1OLg==}
+    engines: {node: '>=18'}
+
+  cspell-dictionary@8.19.4:
+    resolution: {integrity: sha512-lr8uIm7Wub8ToRXO9f6f7in429P1Egm3I+Ps3ZGfWpwLTCUBnHvJdNF/kQqF7PL0Lw6acXcjVWFYT7l2Wdst2g==}
+    engines: {node: '>=18'}
+
+  cspell-gitignore@8.19.4:
+    resolution: {integrity: sha512-KrViypPilNUHWZkMV0SM8P9EQVIyH8HvUqFscI7+cyzWnlglvzqDdV4N5f+Ax5mK+IqR6rTEX8JZbCwIWWV7og==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  cspell-glob@8.19.4:
+    resolution: {integrity: sha512-042uDU+RjAz882w+DXKuYxI2rrgVPfRQDYvIQvUrY1hexH4sHbne78+OMlFjjzOCEAgyjnm1ktWUCCmh08pQUw==}
+    engines: {node: '>=18'}
+
+  cspell-grammar@8.19.4:
+    resolution: {integrity: sha512-lzWgZYTu/L7DNOHjxuKf8H7DCXvraHMKxtFObf8bAzgT+aBmey5fW2LviXUkZ2Lb2R0qQY+TJ5VIGoEjNf55ow==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  cspell-io@8.19.4:
+    resolution: {integrity: sha512-W48egJqZ2saEhPWf5ftyighvm4mztxEOi45ILsKgFikXcWFs0H0/hLwqVFeDurgELSzprr12b6dXsr67dV8amg==}
+    engines: {node: '>=18'}
+
+  cspell-lib@8.19.4:
+    resolution: {integrity: sha512-NwfdCCYtIBNQuZcoMlMmL3HSv2olXNErMi/aOTI9BBAjvCHjhgX5hbHySMZ0NFNynnN+Mlbu5kooJ5asZeB3KA==}
+    engines: {node: '>=18'}
+
+  cspell-trie-lib@8.19.4:
+    resolution: {integrity: sha512-yIPlmGSP3tT3j8Nmu+7CNpkPh/gBO2ovdnqNmZV+LNtQmVxqFd2fH7XvR1TKjQyctSH1ip0P5uIdJmzY1uhaYg==}
+    engines: {node: '>=18'}
+
+  cspell@8.19.4:
+    resolution: {integrity: sha512-toaLrLj3usWY0Bvdi661zMmpKW2DVLAG3tcwkAv4JBTisdIRn15kN/qZDrhSieUEhVgJgZJDH4UKRiq29mIFxA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  css-blank-pseudo@7.0.1:
+    resolution: {integrity: sha512-jf+twWGDf6LDoXDUode+nc7ZlrqfaNphrBIBrcmeP3D8yw1uPaix1gCC8LUQUGQ6CycuK2opkbFFWFuq/a94ag==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  css-declaration-sorter@7.3.0:
+    resolution: {integrity: sha512-LQF6N/3vkAMYF4xoHLJfG718HRJh34Z8BnNhd6bosOMIVjMlhuZK5++oZa3uYAgrI5+7x2o27gUqTR2U/KjUOQ==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss: ^8.0.9
+
+  css-functions-list@3.2.3:
+    resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
+    engines: {node: '>=12 || >=16'}
+
+  css-has-pseudo@7.0.3:
+    resolution: {integrity: sha512-oG+vKuGyqe/xvEMoxAQrhi7uY16deJR3i7wwhBerVrGQKSqUC5GiOVxTpM9F9B9hw0J+eKeOWLH7E9gZ1Dr5rA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  css-prefers-color-scheme@10.0.0:
+    resolution: {integrity: sha512-VCtXZAWivRglTZditUfB4StnsWr6YVZ2PRtuxQLKTNRdtAf8tpzaVPE9zXIF3VaSc7O70iK/j1+NXxyQCqdPjQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  css-select@4.3.0:
+    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
+
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
+  css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
+  cssdb@8.5.2:
+    resolution: {integrity: sha512-Pmoj9RmD8RIoIzA2EQWO4D4RMeDts0tgAH0VXdlNdxjuBGI3a9wMOIcUwaPNmD4r2qtIa06gqkIf7sECl+cBCg==}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  cssnano-preset-default@7.0.10:
+    resolution: {integrity: sha512-6ZBjW0Lf1K1Z+0OKUAUpEN62tSXmYChXWi2NAA0afxEVsj9a+MbcB1l5qel6BHJHmULai2fCGRthCeKSFbScpA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  cssnano-utils@5.0.1:
+    resolution: {integrity: sha512-ZIP71eQgG9JwjVZsTPSqhc6GHgEr53uJ7tK5///VfyWj6Xp2DBmixWHqJgPno+PqATzn48pL42ww9x5SSGmhZg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  cssnano@7.1.2:
+    resolution: {integrity: sha512-HYOPBsNvoiFeR1eghKD5C3ASm64v9YVyJB4Ivnl2gqKoQYvjjN/G0rztvKQq8OxocUtC6sjqY8jwYngIB4AByA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  cz-git@1.12.0:
+    resolution: {integrity: sha512-LaZ+8whPPUOo6Y0Zy4nIbf6JOleV3ejp41sT6N4RPKiKKA+ICWf4ueeIlxIO8b6JtdlDxRzHH/EcRji07nDxcg==}
+    engines: {node: '>=v12.20.0'}
+
+  czg@1.12.0:
+    resolution: {integrity: sha512-LGltcoZ5m7vhe3WNw16QXqd5WurnHegx9V15MwZJtFAU2AVCYLCqDbwxPUgZOnAcdzzooq33ONcU148HOQsjdA==}
+    engines: {node: '>=v12.20.0'}
+    hasBin: true
+
+  dargs@8.1.0:
+    resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
+    engines: {node: '>=12'}
+
+  data-uri-to-buffer@4.0.1:
+    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
+    engines: {node: '>= 12'}
+
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+
+  dataloader@1.4.0:
+    resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
+
+  dayjs@1.11.19:
+    resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
+
+  db0@0.3.4:
+    resolution: {integrity: sha512-RiXXi4WaNzPTHEOu8UPQKMooIbqOEyqA1t7Z6MsdxSCeb8iUC9ko3LcmsLmeUt2SM5bctfArZKkRQggKZz7JNw==}
+    peerDependencies:
+      '@electric-sql/pglite': '*'
+      '@libsql/client': '*'
+      better-sqlite3: '*'
+      drizzle-orm: '*'
+      mysql2: '*'
+      sqlite3: '*'
+    peerDependenciesMeta:
+      '@electric-sql/pglite':
+        optional: true
+      '@libsql/client':
+        optional: true
+      better-sqlite3:
+        optional: true
+      drizzle-orm:
+        optional: true
+      mysql2:
+        optional: true
+      sqlite3:
+        optional: true
+
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
+  deep-extend@0.6.0:
+    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
+    engines: {node: '>=4.0.0'}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.4.0:
+    resolution: {integrity: sha512-XDuvSq38Hr1MdN47EDvYtx3U0MTqpCEn+F6ft8z2vYDzMrvQhVp0ui9oQdqW3MvK3vqUETglt1tVGgjLuJ5izg==}
+    engines: {node: '>=18'}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  delegate@3.2.0:
+    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
+
+  denque@2.1.0:
+    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
+    engines: {node: '>=0.10'}
+
+  depcheck@1.4.7:
+    resolution: {integrity: sha512-1lklS/bV5chOxwNKA/2XUUk/hPORp8zihZsXflr8x0kLwmcZ9Y9BsS6Hs3ssvA+2wUVbG0U2Ciqvm1SokNjPkA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
+  deps-regex@0.2.0:
+    resolution: {integrity: sha512-PwuBojGMQAYbWkMXOY9Pd/NWCDNHVH12pnS7WHqZkTSeMESe4hwnKKRp0yR87g37113x4JPbo/oIvXY+s/f56Q==}
+
+  destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
+
+  detect-file@1.0.0:
+    resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==}
+    engines: {node: '>=0.10.0'}
+
+  detect-indent@6.1.0:
+    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
+    engines: {node: '>=8'}
+
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  diff-sequences@27.5.1:
+    resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  diff@8.0.2:
+    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
+    engines: {node: '>=0.3.1'}
+
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  dom-align@1.12.4:
+    resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==}
+
+  dom-scroll-into-view@2.0.1:
+    resolution: {integrity: sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==}
+
+  dom-serializer@1.4.1:
+    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
+
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  dom-zindex@1.0.6:
+    resolution: {integrity: sha512-FKWIhiU96bi3xpP9ewRMgANsoVmMUBnMnmpCT6dPMZOunVYJQmJhSRruoI0XSPoHeIif3kyEuiHbFrOJwEJaEA==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@4.3.1:
+    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
+    engines: {node: '>= 4'}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@2.8.0:
+    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
+  dot-case@3.0.4:
+    resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
+
+  dot-prop@10.1.0:
+    resolution: {integrity: sha512-MVUtAugQMOff5RnBy2d9N31iG0lNwg1qAoAOn7pOK5wf94WIaE3My2p3uwTQuvS2AcqchkcR3bHByjaM0mmi7Q==}
+    engines: {node: '>=20'}
+
+  dot-prop@5.3.0:
+    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
+    engines: {node: '>=8'}
+
+  dot-prop@9.0.0:
+    resolution: {integrity: sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==}
+    engines: {node: '>=18'}
+
+  dotenv-expand@8.0.3:
+    resolution: {integrity: sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==}
+    engines: {node: '>=12'}
+
+  dotenv@16.0.3:
+    resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
+    engines: {node: '>=12'}
+
+  dotenv@16.6.1:
+    resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
+    engines: {node: '>=12'}
+
+  dotenv@17.2.3:
+    resolution: {integrity: sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==}
+    engines: {node: '>=12'}
+
+  dotenv@8.6.0:
+    resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==}
+    engines: {node: '>=10'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  echarts@6.0.0:
+    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
+
+  editorconfig@1.0.4:
+    resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  ejs@3.1.10:
+    resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
+  electron-to-chromium@1.5.267:
+    resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}
+
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
+  encoding-sniffer@0.2.1:
+    resolution: {integrity: sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==}
+
+  enhanced-resolve@5.18.4:
+    resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
+    engines: {node: '>=10.13.0'}
+
+  enquirer@2.4.1:
+    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
+    engines: {node: '>=8.6'}
+
+  entities@2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  entities@7.0.0:
+    resolution: {integrity: sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==}
+    engines: {node: '>=0.12'}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  env-paths@3.0.0:
+    resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
+  errno@0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
+  error-stack-parser-es@1.0.5:
+    resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
+
+  errx@0.1.0:
+    resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
+
+  es-abstract@1.24.1:
+    resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
+    engines: {node: '>= 0.4'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
+  es-toolkit@1.43.0:
+    resolution: {integrity: sha512-SKCT8AsWvYzBBuUqMk4NPwFlSdqLpJwmy6AP322ERn8W2YLIB6JBXnwMI2Qsh2gfphT3q7EKAxKb23cvFHFwKA==}
+
+  esbuild@0.25.3:
+    resolution: {integrity: sha512-qKA6Pvai73+M2FtftpNKRxJ78GIjmFXFxd/1DVBqGo/qNhLSfv+G12n9pNoWdytJC8U00TrViOwpjT0zgqQS8Q==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-goat@4.0.0:
+    resolution: {integrity: sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==}
+    engines: {node: '>=12'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
+  eslint-compat-utils@0.5.1:
+    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  eslint-compat-utils@0.6.5:
+    resolution: {integrity: sha512-vAUHYzue4YAa2hNACjB8HvUQj5yehAZgiClyFVVom9cP8z5NSFq3PwB/TtJslN2zAMgRX6FCFCjYBbQh71g5RQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  eslint-config-turbo@2.7.2:
+    resolution: {integrity: sha512-Tj8P1kJFVNFZxH+BaQO9sowg11N5PkpD34aWZ87PImqkWo7Qk8yRGRpshCeqGwdO5YKX631ZyTQfcDvs4bqBMQ==}
+    peerDependencies:
+      eslint: '>6.6.0'
+      turbo: '>2.0.0'
+
+  eslint-import-context@0.1.9:
+    resolution: {integrity: sha512-K9Hb+yRaGAGUbwjhFNHvSmmkZs9+zbuoe3kFQ4V1wYjrepUFYM2dZAfNtjbbj3qsPfUfsA68Bx/ICWQMi+C8Eg==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      unrs-resolver: ^1.0.0
+    peerDependenciesMeta:
+      unrs-resolver:
+        optional: true
+
+  eslint-json-compat-utils@0.2.1:
+    resolution: {integrity: sha512-YzEodbDyW8DX8bImKhAcCeu/L31Dd/70Bidx2Qex9OFUtgzXLqtfWL4Hr5fM/aCCB8QUZLuJur0S9k6UfgFkfg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      '@eslint/json': '*'
+      eslint: '*'
+      jsonc-eslint-parser: ^2.4.0
+    peerDependenciesMeta:
+      '@eslint/json':
+        optional: true
+
+  eslint-plugin-command@3.4.0:
+    resolution: {integrity: sha512-EW4eg/a7TKEhG0s5IEti72kh3YOTlnhfFNuctq5WnB1fst37/IHTd5OkD+vnlRf3opTvUcSRihAateP6bT5ZcA==}
+    peerDependencies:
+      eslint: '*'
+
+  eslint-plugin-es-x@7.8.0:
+    resolution: {integrity: sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=8'
+
+  eslint-plugin-eslint-comments@3.2.0:
+    resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==}
+    engines: {node: '>=6.5.0'}
+    peerDependencies:
+      eslint: '>=4.19.1'
+
+  eslint-plugin-import-x@4.16.1:
+    resolution: {integrity: sha512-vPZZsiOKaBAIATpFE2uMI4w5IRwdv/FpQ+qZZMR4E+PeOcM4OeoEbqxRMnywdxP19TyB/3h6QBB0EWon7letSQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/utils': ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      eslint-import-resolver-node: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/utils':
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+
+  eslint-plugin-jsdoc@61.5.0:
+    resolution: {integrity: sha512-PR81eOGq4S7diVnV9xzFSBE4CDENRQGP0Lckkek8AdHtbj+6Bm0cItwlFnxsLFriJHspiE3mpu8U20eODyToIg==}
+    engines: {node: '>=20.11.0'}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
+
+  eslint-plugin-jsonc@2.21.0:
+    resolution: {integrity: sha512-HttlxdNG5ly3YjP1cFMP62R4qKLxJURfBZo2gnMY+yQojZxkLyOpY1H1KRTKBmvQeSG9pIpSGEhDjE17vvYosg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  eslint-plugin-n@17.23.1:
+    resolution: {integrity: sha512-68PealUpYoHOBh332JLLD9Sj7OQUDkFpmcfqt8R9sySfFSeuGJjMTJQvCRRB96zO3A/PELRLkPrzsHmzEFQQ5A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=8.23.0'
+
+  eslint-plugin-no-only-tests@3.3.0:
+    resolution: {integrity: sha512-brcKcxGnISN2CcVhXJ/kEQlNa0MEfGRtwKtWA16SkqXHKitaKIMrfemJKLKX1YqDU5C/5JY3PvZXd5jEW04e0Q==}
+    engines: {node: '>=5.0.0'}
+
+  eslint-plugin-perfectionist@4.15.1:
+    resolution: {integrity: sha512-MHF0cBoOG0XyBf7G0EAFCuJJu4I18wy0zAoT1OHfx2o6EOx1EFTIzr2HGeuZa1kDcusoX0xJ9V7oZmaeFd773Q==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      eslint: '>=8.45.0'
+
+  eslint-plugin-prettier@5.5.4:
+    resolution: {integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+
+  eslint-plugin-regexp@2.10.0:
+    resolution: {integrity: sha512-ovzQT8ESVn5oOe5a7gIDPD5v9bCSjIFJu57sVPDqgPRXicQzOnYfFN21WoQBQF18vrhT5o7UMKFwJQVVjyJ0ng==}
+    engines: {node: ^18 || >=20}
+    peerDependencies:
+      eslint: '>=8.44.0'
+
+  eslint-plugin-turbo@2.7.2:
+    resolution: {integrity: sha512-rZs+l0vQcFo/37OiCWDcTIcksrVfvSBwS6/CI41wc3hA/hWxGOAbT1Diy9/+PBrh2VJts0SzBXb80SqGgVFFPQ==}
+    peerDependencies:
+      eslint: '>6.6.0'
+      turbo: '>2.0.0'
+
+  eslint-plugin-unicorn@62.0.0:
+    resolution: {integrity: sha512-HIlIkGLkvf29YEiS/ImuDZQbP12gWyx5i3C6XrRxMvVdqMroCI9qoVYCoIl17ChN+U89pn9sVwLxhIWj5nEc7g==}
+    engines: {node: ^20.10.0 || >=21.0.0}
+    peerDependencies:
+      eslint: '>=9.38.0'
+
+  eslint-plugin-unused-imports@4.3.0:
+    resolution: {integrity: sha512-ZFBmXMGBYfHttdRtOG9nFFpmUvMtbHSjsKrS20vdWdbfiVYsO3yA2SGYy9i9XmZJDfMGBflZGBCm70SEnFQtOA==}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0
+      eslint: ^9.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+
+  eslint-plugin-vitest@0.5.4:
+    resolution: {integrity: sha512-um+odCkccAHU53WdKAw39MY61+1x990uXjSPguUCq3VcEHdqJrOb8OTMrbYlY6f9jAKx7x98kLVlIe3RJeJqoQ==}
+    engines: {node: ^18.0.0 || >= 20.0.0}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': '*'
+      eslint: ^8.57.0 || ^9.0.0
+      vitest: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+      vitest:
+        optional: true
+
+  eslint-plugin-vue@10.6.2:
+    resolution: {integrity: sha512-nA5yUs/B1KmKzvC42fyD0+l9Yd+LtEpVhWRbXuDj0e+ZURcTtyRbMDWUeJmTAh2wC6jC83raS63anNM2YT3NPw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@stylistic/eslint-plugin': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      vue-eslint-parser: ^10.0.0
+    peerDependenciesMeta:
+      '@stylistic/eslint-plugin':
+        optional: true
+      '@typescript-eslint/parser':
+        optional: true
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint@9.39.2:
+    resolution: {integrity: sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: ^2.6.1
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-walker@1.0.1:
+    resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  event-target-shim@5.0.1:
+    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
+    engines: {node: '>=6'}
+
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
+  events-universal@1.0.1:
+    resolution: {integrity: sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==}
+
+  events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+
+  execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+
+  execa@9.6.1:
+    resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
+  expand-tilde@2.0.2:
+    resolution: {integrity: sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==}
+    engines: {node: '>=0.10.0'}
+
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
+  extendable-error@0.1.7:
+    resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+
+  fast-equals@5.4.0:
+    resolution: {integrity: sha512-jt2DW/aNFNwke7AUd+Z+e6pz39KO5rzdbbFCg2sGafS4mk13MI7Z8O5z9cADNn5lhGODIgLwug6TZO2ctf7kcw==}
+    engines: {node: '>=6.0.0'}
+
+  fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-string-compare@3.0.0:
+    resolution: {integrity: sha512-PY66/8HelapGo5nqMN17ZTKqJj1nppuS1OoC9Y0aI2jsUDlZDEYhMODTpb68wVCq+xMbaEbPGXRd7qutHzkRXA==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
+  fastest-levenshtein@1.0.16:
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fetch-blob@3.2.0:
+    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
+    engines: {node: ^12.20 || >= 14.13}
+
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
+  file-entry-cache@11.1.1:
+    resolution: {integrity: sha512-TPVFSDE7q91Dlk1xpFLvFllf8r0HyOMOlnWy7Z2HBku5H3KhIeOGInexrIeg2D64DosVB/JXkrrk6N/7Wriq4A==}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  file-entry-cache@9.1.0:
+    resolution: {integrity: sha512-/pqPFG+FdxWQj+/WSuzXSDaNzxgTLr/OrR1QuqfEZzDakpdYE70PwUxL7BPUa8hpjbvY1+qvCl8k+8Tq34xJgg==}
+    engines: {node: '>=18'}
+
+  file-type@19.6.0:
+    resolution: {integrity: sha512-VZR5I7k5wkD0HgFnMsq5hOsSc710MJMu5Nc5QYsbe38NN5iPV/XTObYLc/cpttRTf6lX538+5uO1ZQRhYibiZQ==}
+    engines: {node: '>=18'}
+
+  file-uri-to-path@1.0.0:
+    resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
+
+  filelist@1.0.4:
+    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up-simple@1.0.1:
+    resolution: {integrity: sha512-afd4O7zpqHeRyg4PfDQsXmlDe2PfdHtJt6Akt8jOWaApLOZk5JXs6VMR29lz03pRe9mpykrRCYIYxaJYcfpncQ==}
+    engines: {node: '>=18'}
+
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  find-up@7.0.0:
+    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
+    engines: {node: '>=18'}
+
+  findup-sync@5.0.0:
+    resolution: {integrity: sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==}
+    engines: {node: '>= 10.13.0'}
+
+  fix-dts-default-cjs-exports@1.0.1:
+    resolution: {integrity: sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg==}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flat-cache@5.0.0:
+    resolution: {integrity: sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==}
+    engines: {node: '>=18'}
+
+  flat-cache@6.1.19:
+    resolution: {integrity: sha512-l/K33newPTZMTGAnnzaiqSl6NnH7Namh8jBNjrgjprWxGmZUuxx/sJNIRaijOh3n7q7ESbhNZC+pvVZMFdeU4A==}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  focus-trap@7.7.0:
+    resolution: {integrity: sha512-DJJDHpEgoSbP8ZE1MNeU2IzCpfFyFdNZZRilqmfH2XiQsPK6PtD8AfJqWzEBudUQB2yHwZc5iq54rjTaGQ+ljw==}
+
+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
+  formdata-node@6.0.3:
+    resolution: {integrity: sha512-8e1++BCiTzUno9v5IZ2J6bv4RU+3UKDmqWUQD0MIMVCd9AdhWkO1gw57oo1mNEX1dMq2EGI+FbWz4B92pscSQg==}
+    engines: {node: '>= 18'}
+
+  formdata-polyfill@4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  framesync@6.1.2:
+    resolution: {integrity: sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==}
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+
+  fs-extra@11.3.3:
+    resolution: {integrity: sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==}
+    engines: {node: '>=14.14'}
+
+  fs-extra@7.0.1:
+    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
+    engines: {node: '>=6 <7 || >=8'}
+
+  fs-extra@8.1.0:
+    resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
+    engines: {node: '>=6 <7 || >=8'}
+
+  fs-extra@9.1.0:
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
+
+  fs-minipass@3.0.3:
+    resolution: {integrity: sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
+  generator-function@2.0.1:
+    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
+    engines: {node: '>= 0.4'}
+
+  gensequence@7.0.0:
+    resolution: {integrity: sha512-47Frx13aZh01afHJTB3zTtKIlFI6vWY+MYCN9Qpew6i52rfKjnhCF/l1YlC8UmEMvvntZZ6z4PiCcmyuedR2aQ==}
+    engines: {node: '>=18'}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.4.0:
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-own-enumerable-property-symbols@3.0.2:
+    resolution: {integrity: sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==}
+
+  get-port-please@3.2.0:
+    resolution: {integrity: sha512-I9QVvBw5U/hw3RmWpYKRumUeaDgxTPd401x364rLmWBJcOQ753eov1eTgzDqRG9bqFIfDc7gfzcQEWrUri3o1A==}
+
+  get-port@7.1.0:
+    resolution: {integrity: sha512-QB9NKEeDg3xxVwCCwJQ9+xycaz6pBB6iQ76wiWMl1927n0Kir6alPiP+yuiICLLU4jpMe08dXfpebuQppFA2zw==}
+    engines: {node: '>=16'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
+  get-tsconfig@4.13.0:
+    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
+
+  giget@2.0.0:
+    resolution: {integrity: sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==}
+    hasBin: true
+
+  git-raw-commits@4.0.0:
+    resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.5.0:
+    resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
+    hasBin: true
+
+  glob@11.1.0:
+    resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
+  glob@13.0.0:
+    resolution: {integrity: sha512-tvZgpqk6fz4BaNZ66ZsRaZnbHvP/jG3uKJvAZOwEVUL4RTA5nJeeLYfyN9/VA8NX/V3IBG+hkeuGpKjvELkVhA==}
+    engines: {node: 20 || >=22}
+
+  global-directory@4.0.1:
+    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
+    engines: {node: '>=18'}
+
+  global-modules@1.0.0:
+    resolution: {integrity: sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==}
+    engines: {node: '>=0.10.0'}
+
+  global-modules@2.0.0:
+    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
+    engines: {node: '>=6'}
+
+  global-prefix@1.0.2:
+    resolution: {integrity: sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==}
+    engines: {node: '>=0.10.0'}
+
+  global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
+  globals@16.5.0:
+    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
+    engines: {node: '>=18'}
+
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
+  globby@15.0.0:
+    resolution: {integrity: sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==}
+    engines: {node: '>=20'}
+
+  globjoin@0.1.4:
+    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
+
+  globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+
+  good-listener@1.2.2:
+    resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.10:
+    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  graph-cycles@3.0.0:
+    resolution: {integrity: sha512-9qxd8BQK0tZJ3cRUW0Yn2q6P/9h+bgz/4UYuscpdxPz6851NNBA1IwoYDRHDpKzCqmr1UHlGHcp5+0WzpY9F7A==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+
+  graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  gzip-size@7.0.0:
+    resolution: {integrity: sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  h3@1.15.4:
+    resolution: {integrity: sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==}
+
+  happy-dom@17.6.3:
+    resolution: {integrity: sha512-UVIHeVhxmxedbWPCfgS55Jg2rDfwf2BCKeylcPSqazLz5w3Kri7Q4xdBJubsr/+VUzFLh0VjIvh13RaDA2/Xug==}
+    engines: {node: '>=20.0.0'}
+
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hashery@1.3.0:
+    resolution: {integrity: sha512-fWltioiy5zsSAs9ouEnvhsVJeAXRybGCNNv0lvzpzNOSDbULXRy7ivFWwCCv4I5Am6kSo75hmbsCduOoc2/K4w==}
+    engines: {node: '>=20'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
+  hey-listen@1.0.8:
+    resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
+
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
+  homedir-polyfill@1.0.3:
+    resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
+    engines: {node: '>=0.10.0'}
+
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
+  hookified@1.14.0:
+    resolution: {integrity: sha512-pi1ynXIMFx/uIIwpWJ/5CEtOHLGtnUB0WhGeeYT+fKcQ+WCQbm3/rrkAXnpfph++PgepNqPdTC2WTj8A6k6zoQ==}
+
+  html-entities@2.6.0:
+    resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==}
+
+  html-minifier-terser@6.1.0:
+    resolution: {integrity: sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  html-minifier-terser@7.2.0:
+    resolution: {integrity: sha512-tXgn3QfqPIpGl9o+K5tpcj3/MN4SfLtsx2GWwBC3SSd0tXQGyF3gsSqad8loJgKZGM3ZxbYDd5yhiBIdWpmvLA==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  html-tags@3.3.1:
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
+
+  htmlparser2@10.0.0:
+    resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
+
+  htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  http-shutdown@1.2.2:
+    resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
+    engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  httpxy@0.1.7:
+    resolution: {integrity: sha512-pXNx8gnANKAndgga5ahefxc++tJvNL87CXoRwxn1cJE2ZkWEojF3tNfQIEhZX/vfpt+wzeAzpUI4qkediX1MLQ==}
+
+  human-id@4.1.3:
+    resolution: {integrity: sha512-tsYlhAYpjCKa//8rXZ9DqKEawhPoSytweBC2eNvcaDK+57RZLHGqNs3PZTQO6yekLFSuvA6AlnAfrw1uBvtb+Q==}
+    hasBin: true
+
+  human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.7.1:
+    resolution: {integrity: sha512-2Tth85cXwGFHfvRgZWszZSvdo+0Xsqmw8k8ZwxScfcBneNUraK+dxRxRm24nszx80Y0TVio8kKLt5sLE7ZCLlw==}
+    engines: {node: '>=0.10.0'}
+
+  idb@7.1.1:
+    resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  image-size@0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
+  immutable@5.1.4:
+    resolution: {integrity: sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  import-lazy@4.0.0:
+    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
+    engines: {node: '>=8'}
+
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@5.0.0:
+    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
+    engines: {node: '>=12'}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  ini@4.1.1:
+    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  ioredis@5.8.2:
+    resolution: {integrity: sha512-C6uC+kleiIMmjViJINWk80sOQw5lEzse1ZmvD+S/s8p8CWapftSaC+kocGTx6xrbrJ4WmYQGC08ffHLr6ToR6Q==}
+    engines: {node: '>=12.22.0'}
+
+  iron-webcrypto@1.2.1:
+    resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
+
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
+  is-buffer@2.0.5:
+    resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
+    engines: {node: '>=4'}
+
+  is-builtin-module@5.0.0:
+    resolution: {integrity: sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA==}
+    engines: {node: '>=18.20'}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-ci@4.1.0:
+    resolution: {integrity: sha512-Ab9bQDQ11lWootZUI5qxgN2ZXwxNI5hTwnsvOc1wyxQ7zQ8OkEDw79mI0+9jI3x432NfwbVRru+3noJfXF6lSQ==}
+    hasBin: true
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-fullwidth-code-point@4.0.0:
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
+
+  is-fullwidth-code-point@5.1.0:
+    resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
+    engines: {node: '>=18'}
+
+  is-generator-function@1.1.2:
+    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
+    engines: {node: '>= 0.4'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-in-ci@1.0.0:
+    resolution: {integrity: sha512-eUuAjybVTHMYWm/U+vBO1sY/JOCgoPCXRxzdju0K+K0BiGW0SChEL1MLC0PoCIR1OlPo5YAp8HuQoUlsWEICwg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-installed-globally@1.0.0:
+    resolution: {integrity: sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==}
+    engines: {node: '>=18'}
+
+  is-interactive@2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
+  is-npm@6.1.0:
+    resolution: {integrity: sha512-O2z4/kNgyjhQwVR1Wpkbfc19JIhggF97NZNCpWTnjH7kVcZMUrnut9XSN7txI7VdyIYk5ZatOq3zvSuWpU8hoA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-obj@1.0.1:
+    resolution: {integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==}
+    engines: {node: '>=0.10.0'}
+
+  is-obj@2.0.0:
+    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
+    engines: {node: '>=8'}
+
+  is-path-inside@4.0.0:
+    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
+    engines: {node: '>=12'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-plain-object@3.0.1:
+    resolution: {integrity: sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==}
+    engines: {node: '>=0.10.0'}
+
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
+  is-reference@1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-regexp@1.0.0:
+    resolution: {integrity: sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==}
+    engines: {node: '>=0.10.0'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
+  is-subdir@1.2.0:
+    resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
+    engines: {node: '>=4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-text-path@2.0.0:
+    resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
+    engines: {node: '>=8'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-unicode-supported@1.3.0:
+    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
+    engines: {node: '>=12'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+
+  is-what@3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+
+  is-what@5.5.0:
+    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
+    engines: {node: '>=18'}
+
+  is-windows@1.0.2:
+    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
+    engines: {node: '>=0.10.0'}
+
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
+  is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+
+  is64bit@2.0.0:
+    resolution: {integrity: sha512-jv+8jaWCl0g2lSBkNSVXdzfBA0npK1HGC2KtWM9FumFRoGS94g3NbCCLVnCYHLjp4GrW2KZeeSTMo5ddtznmGw==}
+    engines: {node: '>=18'}
+
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jackspeak@4.1.1:
+    resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==}
+    engines: {node: 20 || >=22}
+
+  jake@10.9.4:
+    resolution: {integrity: sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  jju@1.4.0:
+    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
+
+  js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
+  js-md5@0.8.3:
+    resolution: {integrity: sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
+  js-yaml@3.14.2:
+    resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
+    hasBin: true
+
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  jsdoc-type-pratt-parser@4.8.0:
+    resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
+    engines: {node: '>=12.0.0'}
+
+  jsdoc-type-pratt-parser@6.10.0:
+    resolution: {integrity: sha512-+LexoTRyYui5iOhJGn13N9ZazL23nAHGkXsa1p/C8yeq79WRfLBag6ZZ0FQG2aRoc9yfo59JT9EYCQonOkHKkQ==}
+    engines: {node: '>=20.0.0'}
+
+  jsdoc-type-pratt-parser@7.0.0:
+    resolution: {integrity: sha512-c7YbokssPOSHmqTbSAmTtnVgAVa/7lumWNYqomgd5KOMyPrRve2anx6lonfOsXEQacqF9FKVUj7bLg4vRSvdYA==}
+    engines: {node: '>=20.0.0'}
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-bigint@1.0.0:
+    resolution: {integrity: sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==}
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema@0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonc-eslint-parser@2.4.2:
+    resolution: {integrity: sha512-1e4qoRgnn448pRuMvKGsFFymUCquZV0mpGgOyIKNgD3JVDTsVJyRBGH/Fm0tBb8WsWGgmB1mDe6/yJMQM37DUA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  jsonfile@4.0.0:
+    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
+
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
+  jsonparse@1.3.1:
+    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
+    engines: {'0': node >= 0.2.0}
+
+  jsonpointer@5.0.1:
+    resolution: {integrity: sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==}
+    engines: {node: '>=0.10.0'}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  keyv@5.5.5:
+    resolution: {integrity: sha512-FA5LmZVF1VziNc0bIdCSA1IoSVnDCqE8HJIZZv2/W8YmoAM50+tnUgJR/gQZwEeIMleuIOnRnHA/UaZRNeV4iQ==}
+
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
+  klona@2.0.6:
+    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
+    engines: {node: '>= 8'}
+
+  knitwork@1.3.0:
+    resolution: {integrity: sha512-4LqMNoONzR43B1W0ek0fhXMsDNW/zxa1NdFAVMY+k28pgZLovR4G3PB5MrpTxCy1QaZCqNoiaKPr5w5qZHfSNw==}
+
+  known-css-properties@0.37.0:
+    resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
+
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
+  ky@1.14.1:
+    resolution: {integrity: sha512-hYje4L9JCmpEQBtudo+v52X5X8tgWXUYyPcxKSuxQNboqufecl9VMWjGiucAFH060AwPXHZuH+WB2rrqfkmafw==}
+    engines: {node: '>=18'}
+
+  latest-version@9.0.0:
+    resolution: {integrity: sha512-7W0vV3rqv5tokqkBAFV1LbR7HPOWzXQDpDgEuib/aJ1jsZZx6x3c2mBI+TJhJzOhkGeaLbCKEHXEXLfirtG2JA==}
+    engines: {node: '>=18'}
+
+  lazystream@1.0.1:
+    resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
+    engines: {node: '>= 0.6.3'}
+
+  lefthook-darwin-arm64@1.13.6:
+    resolution: {integrity: sha512-m6Lb77VGc84/Qo21Lhq576pEvcgFCnvloEiP02HbAHcIXD0RTLy9u2yAInrixqZeaz13HYtdDaI7OBYAAdVt8A==}
+    cpu: [arm64]
+    os: [darwin]
+
+  lefthook-darwin-x64@1.13.6:
+    resolution: {integrity: sha512-CoRpdzanu9RK3oXR1vbEJA5LN7iB+c7hP+sONeQJzoOXuq4PNKVtEaN84Gl1BrVtCNLHWFAvCQaZPPiiXSy8qg==}
+    cpu: [x64]
+    os: [darwin]
+
+  lefthook-freebsd-arm64@1.13.6:
+    resolution: {integrity: sha512-X4A7yfvAJ68CoHTqP+XvQzdKbyd935sYy0bQT6Ajz7FL1g7hFiro8dqHSdPdkwei9hs8hXeV7feyTXbYmfjKQQ==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  lefthook-freebsd-x64@1.13.6:
+    resolution: {integrity: sha512-ai2m+Sj2kGdY46USfBrCqLKe9GYhzeq01nuyDYCrdGISePeZ6udOlD1k3lQKJGQCHb0bRz4St0r5nKDSh1x/2A==}
+    cpu: [x64]
+    os: [freebsd]
+
+  lefthook-linux-arm64@1.13.6:
+    resolution: {integrity: sha512-cbo4Wtdq81GTABvikLORJsAWPKAJXE8Q5RXsICFUVznh5PHigS9dFW/4NXywo0+jfFPCT6SYds2zz4tCx6DA0Q==}
+    cpu: [arm64]
+    os: [linux]
+
+  lefthook-linux-x64@1.13.6:
+    resolution: {integrity: sha512-uJl9vjCIIBTBvMZkemxCE+3zrZHlRO7Oc+nZJ+o9Oea3fu+W82jwX7a7clw8jqNfaeBS+8+ZEQgiMHWCloTsGw==}
+    cpu: [x64]
+    os: [linux]
+
+  lefthook-openbsd-arm64@1.13.6:
+    resolution: {integrity: sha512-7r153dxrNRQ9ytRs2PmGKKkYdvZYFPre7My7XToSTiRu5jNCq++++eAKVkoyWPduk97dGIA+YWiEr5Noe0TK2A==}
+    cpu: [arm64]
+    os: [openbsd]
+
+  lefthook-openbsd-x64@1.13.6:
+    resolution: {integrity: sha512-Z+UhLlcg1xrXOidK3aLLpgH7KrwNyWYE3yb7ITYnzJSEV8qXnePtVu8lvMBHs/myzemjBzeIr/U/+ipjclR06g==}
+    cpu: [x64]
+    os: [openbsd]
+
+  lefthook-windows-arm64@1.13.6:
+    resolution: {integrity: sha512-Uxef6qoDxCmUNQwk8eBvddYJKSBFglfwAY9Y9+NnnmiHpWTjjYiObE9gT2mvGVpEgZRJVAatBXc+Ha5oDD/OgQ==}
+    cpu: [arm64]
+    os: [win32]
+
+  lefthook-windows-x64@1.13.6:
+    resolution: {integrity: sha512-mOZoM3FQh3o08M8PQ/b3IYuL5oo36D9ehczIw1dAgp1Ly+Tr4fJ96A+4SEJrQuYeRD4mex9bR7Ps56I73sBSZA==}
+    cpu: [x64]
+    os: [win32]
+
+  lefthook@1.13.6:
+    resolution: {integrity: sha512-ojj4/4IJ29Xn4drd5emqVgilegAPN3Kf0FQM2p/9+lwSTpU+SZ1v4Ig++NF+9MOa99UKY8bElmVrLhnUUNFh5g==}
+    hasBin: true
+
+  less@4.5.1:
+    resolution: {integrity: sha512-UKgI3/KON4u6ngSsnDADsUERqhZknsVZbnuzlRZXLQCmfC/MDld42fTydUE9B+Mla1AL6SJ/Pp6SlEFi/AVGfw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  leven@3.1.0:
+    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
+    engines: {node: '>=6'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  listhen@1.9.0:
+    resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
+    hasBin: true
+
+  listr2@8.3.3:
+    resolution: {integrity: sha512-LWzX2KsqcB1wqQ4AHgYb4RsDXauQiqhjLk+6hjbaeHG4zpjjVAB6wC/gz6X0l+Du1cN3pUB5ZlrvTbhGSNnUQQ==}
+    engines: {node: '>=18.0.0'}
+
+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  locate-path@7.2.0:
+    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  locko@1.1.0:
+    resolution: {integrity: sha512-pYB2dzRY93fJkg2RIl41AMNgTQftEjyTK9vlPrGOJvuGQsOjb267VJBw15BjiN3RBd1oBoKkOu9E2dRdFKIfAA==}
+
+  lodash-es@4.17.22:
+    resolution: {integrity: sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==}
+
+  lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+
+  lodash.clonedeep@4.5.0:
+    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
+
+  lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+
+  lodash.defaults@4.2.0:
+    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+
+  lodash.isarguments@3.1.0:
+    resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.kebabcase@4.1.1:
+    resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==}
+
+  lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash.mergewith@4.6.2:
+    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
+
+  lodash.snakecase@4.1.1:
+    resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
+
+  lodash.sortby@4.7.0:
+    resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
+
+  lodash.startcase@4.4.0:
+    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
+
+  lodash.truncate@4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+
+  lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+
+  lodash.upperfirst@4.3.1:
+    resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  log-symbols@6.0.0:
+    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+    engines: {node: '>=18'}
+
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
+  lower-case@2.0.2:
+    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lru-cache@11.2.4:
+    resolution: {integrity: sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==}
+    engines: {node: 20 || >=22}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+
+  lucide-vue-next@0.553.0:
+    resolution: {integrity: sha512-0tg9XT+VCElTT+7EXXbBRhWe1nU7Doa32Xv/dHP5/LCleFVgV6cAqziM3C7AetqmsYIsfAtNwRYdtvs4Ds7aUg==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
+  magic-string@0.25.9:
+    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  magicast@0.5.1:
+    resolution: {integrity: sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==}
+
+  make-dir@2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mathml-tag-names@2.1.3:
+    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
+
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
+  mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+
+  mdn-data@2.25.0:
+    resolution: {integrity: sha512-T2LPsjgUE/tgMmRXREVmwsux89DwWfNjiynOeXuLd2mX6jphGQ2YE3Ukz7LQ2VOFKiVZU/Ee1GqzHiipZCjymw==}
+
+  meow@12.1.1:
+    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
+    engines: {node: '>=16.10'}
+
+  meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
+  mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  mime@3.0.0:
+    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
+  mime@4.1.0:
+    resolution: {integrity: sha512-X5ju04+cAzsojXKes0B/S4tcYtFAJ6tTMuSPBEn9CPGlrWr8Fiw7qYeLT0XyH80HSoAoqWCaz+MWKh22P7G1cw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  minimatch@10.0.3:
+    resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
+    engines: {node: 20 || >=22}
+
+  minimatch@10.1.1:
+    resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
+    engines: {node: 20 || >=22}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+
+  minimatch@7.4.6:
+    resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==}
+    engines: {node: '>=10'}
+
+  minimatch@9.0.1:
+    resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass-collect@2.0.1:
+    resolution: {integrity: sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minipass-flush@1.0.5:
+    resolution: {integrity: sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==}
+    engines: {node: '>= 8'}
+
+  minipass-pipeline@1.2.4:
+    resolution: {integrity: sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==}
+    engines: {node: '>=8'}
+
+  minipass@3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
+    engines: {node: '>=8'}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minizlib@3.1.0:
+    resolution: {integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==}
+    engines: {node: '>= 18'}
+
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  mkdist@2.4.1:
+    resolution: {integrity: sha512-Ezk0gi04GJBkqMfsksICU5Rjoemc4biIekwgrONWVPor2EO/N9nBgN6MZXAf7Yw4mDDhrNyKbdETaHNevfumKg==}
+    hasBin: true
+    peerDependencies:
+      sass: ^1.92.1
+      typescript: '>=5.9.2'
+      vue: ^3.5.24
+      vue-sfc-transformer: ^0.1.1
+      vue-tsc: ^1.8.27 || ^2.0.21 || ^3.0.0
+    peerDependenciesMeta:
+      sass:
+        optional: true
+      typescript:
+        optional: true
+      vue:
+        optional: true
+      vue-sfc-transformer:
+        optional: true
+      vue-tsc:
+        optional: true
+
+  mlly@1.8.0:
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
+
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
+  multimatch@5.0.0:
+    resolution: {integrity: sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==}
+    engines: {node: '>=10'}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanoid@5.1.6:
+    resolution: {integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
+  nanopop@2.4.2:
+    resolution: {integrity: sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw==}
+
+  napi-postinstall@0.3.4:
+    resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  natural-orderby@5.0.0:
+    resolution: {integrity: sha512-kKHJhxwpR/Okycz4HhQKKlhWe4ASEfPgkSWNmKFHd7+ezuQlxkA5cM3+XkBPvm1gmHen3w53qsYAv+8GwRrBlg==}
+    engines: {node: '>=18'}
+
+  needle@3.3.1:
+    resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+
+  nitropack@2.12.9:
+    resolution: {integrity: sha512-t6qqNBn2UDGMWogQuORjbL2UPevB8PvIPsPHmqvWpeGOlPr4P8Oc5oA8t3wFwGmaolM2M/s2SwT23nx9yARmOg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      xml2js: ^0.6.2
+    peerDependenciesMeta:
+      xml2js:
+        optional: true
+
+  no-case@3.0.4:
+    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
+
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
+  node-cleanup@2.1.2:
+    resolution: {integrity: sha512-qN8v/s2PAJwGUtr1/hYTpNKlD6Y9rc4p8KSmJXyGdYGZsDGKXrGThikLFP9OCHFeLeEpQzPwiAtdIvBLqm//Hw==}
+
+  node-domexception@1.0.0:
+    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
+    engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
+
+  node-fetch-cache@5.1.0:
+    resolution: {integrity: sha512-4j3rRHNGIKGX7VzXSrBT0bh7+wFuyJv1DxCfCLDHsnDahJWoD9lXe3BzL3BJg/GEIJiM7KIvqVs3byW1GFtRsQ==}
+    engines: {node: '>=18.19.0'}
+
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
+  node-fetch@2.7.0:
+    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+
+  node-fetch@3.3.2:
+    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  node-forge@1.3.3:
+    resolution: {integrity: sha512-rLvcdSyRCyouf6jcOIPe/BgwG/d7hKjzMKOas33/pHEr6gbq18IK9zV7DiPvzsz0oBJPme6qr6H6kGZuI9/DZg==}
+    engines: {node: '>= 6.13.0'}
+
+  node-gyp-build@4.8.4:
+    resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
+    hasBin: true
+
+  node-html-parser@5.4.2:
+    resolution: {integrity: sha512-RaBPP3+51hPne/OolXxcz89iYvQvKOydaqoePpOgXcrOKZhjVIzmpKZz+Hd/RBO2/zN2q6CNJhQzucVz+u3Jyw==}
+
+  node-mock-http@1.0.4:
+    resolution: {integrity: sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==}
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+
+  nopt@8.1.0:
+    resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+    hasBin: true
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
+  nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
+  nypm@0.6.2:
+    resolution: {integrity: sha512-7eM+hpOtrKrBDCh7Ypu2lJ9Z7PNZBdi/8AT3AX8xoCj43BBVHD0hPSTEvMtkMpfs8FCqBGhxB+uToIQimA111g==}
+    engines: {node: ^14.16.0 || >=16.10.0}
+    hasBin: true
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-deep-merge@2.0.0:
+    resolution: {integrity: sha512-3DC3UMpeffLTHiuXSy/UG4NOIYTLlY9u3V82+djSCLYClWobZiS4ivYzpIUWrRY/nfsJ8cWsKyG3QfyLePmhvg==}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  ofetch@1.5.1:
+    resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
+
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  open@10.2.0:
+    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
+    engines: {node: '>=18'}
+
+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  ora@8.2.0:
+    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
+    engines: {node: '>=18'}
+
+  outdent@0.5.0:
+    resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
+
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
+  p-filter@2.1.0:
+    resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
+    engines: {node: '>=8'}
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-limit@4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-locate@6.0.0:
+    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-map@2.1.0:
+    resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
+    engines: {node: '>=6'}
+
+  p-map@7.0.4:
+    resolution: {integrity: sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==}
+    engines: {node: '>=18'}
+
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  package-json@10.0.1:
+    resolution: {integrity: sha512-ua1L4OgXSBdsu1FPb7F3tYH0F48a6kxvod4pLUlGY9COeJAJQNX/sNH2IiEmsxw7lqYiAwrdHMjz1FctOsyDQg==}
+    engines: {node: '>=18'}
+
+  package-manager-detector@0.2.11:
+    resolution: {integrity: sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==}
+
+  package-manager-detector@1.6.0:
+    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
+
+  pako@2.1.0:
+    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+
+  param-case@3.0.4:
+    resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parent-module@2.0.0:
+    resolution: {integrity: sha512-uo0Z9JJeWzv8BG+tRcapBKNJ0dro9cLyczGzulS6EfeyAdeC9sbojtW6XwvYxJkEne9En+J2XEl4zyglVeIwFg==}
+    engines: {node: '>=8'}
+
+  parse-imports-exports@0.2.4:
+    resolution: {integrity: sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
+  parse-node-version@1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+
+  parse-passwd@1.0.0:
+    resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
+    engines: {node: '>=0.10.0'}
+
+  parse-statements@1.0.11:
+    resolution: {integrity: sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==}
+
+  parse5-htmlparser2-tree-adapter@7.1.0:
+    resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==}
+
+  parse5-parser-stream@7.1.2:
+    resolution: {integrity: sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  pascal-case@3.1.2:
+    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-exists@5.0.0:
+    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  path-scurry@2.0.1:
+    resolution: {integrity: sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==}
+    engines: {node: 20 || >=22}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  path-type@6.0.0:
+    resolution: {integrity: sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==}
+    engines: {node: '>=18'}
+
+  pathe@0.2.0:
+    resolution: {integrity: sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==}
+
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
+  peek-readable@5.4.2:
+    resolution: {integrity: sha512-peBp3qZyuS6cNIJ2akRNG1uo1WJ1d0wTxg/fxMdZ0BqCVhx242bSFHM9eNqflfJVS9SsgkzgT/1UgnsurBOTMg==}
+    engines: {node: '>=14.16'}
+
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
+  perfect-debounce@2.0.0:
+    resolution: {integrity: sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+
+  pinia-plugin-persistedstate@4.7.1:
+    resolution: {integrity: sha512-WHOqh2esDlR3eAaknPbqXrkkj0D24h8shrDPqysgCFR6ghqP/fpFfJmMPJp0gETHsvrh9YNNg6dQfo2OEtDnIQ==}
+    peerDependencies:
+      '@nuxt/kit': '>=3.0.0'
+      '@pinia/nuxt': '>=0.10.0'
+      pinia: ^3.0.3
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@pinia/nuxt':
+        optional: true
+      pinia:
+        optional: true
+
+  pinia@3.0.4:
+    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
+    peerDependencies:
+      typescript: '>=4.5.0'
+      vue: ^3.5.24
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
+  playwright-core@1.57.0:
+    resolution: {integrity: sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.57.0:
+    resolution: {integrity: sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  please-upgrade-node@3.2.0:
+    resolution: {integrity: sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==}
+
+  pluralize@8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
+  popmotion@11.0.5:
+    resolution: {integrity: sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
+  postcss-antd-fixes@0.2.0:
+    resolution: {integrity: sha512-WuV4Ip5DnLg8q+wmNXUq13wZZcA5Lrj+em3Jznl4cxItZDgFp4wEh+5ba59TvFeHfwNuTEZ6YNDsYP9DG6NurQ==}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-attribute-case-insensitive@7.0.1:
+    resolution: {integrity: sha512-Uai+SupNSqzlschRyNx3kbCTWgY/2hcwtHEI/ej2LJWc9JJ77qKgGptd8DHwY1mXtZ7Aoh4z4yxfwMBue9eNgw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-calc@10.1.1:
+    resolution: {integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==}
+    engines: {node: ^18.12 || ^20.9 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.38
+
+  postcss-clamp@4.1.0:
+    resolution: {integrity: sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==}
+    engines: {node: '>=7.6.0'}
+    peerDependencies:
+      postcss: ^8.4.6
+
+  postcss-color-functional-notation@7.0.12:
+    resolution: {integrity: sha512-TLCW9fN5kvO/u38/uesdpbx3e8AkTYhMvDZYa9JpmImWuTE99bDQ7GU7hdOADIZsiI9/zuxfAJxny/khknp1Zw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-color-hex-alpha@10.0.0:
+    resolution: {integrity: sha512-1kervM2cnlgPs2a8Vt/Qbe5cQ++N7rkYo/2rz2BkqJZIHQwaVuJgQH38REHrAi4uM0b1fqxMkWYmese94iMp3w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-color-rebeccapurple@10.0.0:
+    resolution: {integrity: sha512-JFta737jSP+hdAIEhk1Vs0q0YF5P8fFcj+09pweS8ktuGuZ8pPlykHsk6mPxZ8awDl4TrcxUqJo9l1IhVr/OjQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-colormin@7.0.5:
+    resolution: {integrity: sha512-ekIBP/nwzRWhEMmIxHHbXHcMdzd1HIUzBECaj5KEdLz9DVP2HzT065sEhvOx1dkLjYW7jyD0CngThx6bpFi2fA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-convert-values@7.0.8:
+    resolution: {integrity: sha512-+XNKuPfkHTCEo499VzLMYn94TiL3r9YqRE3Ty+jP7UX4qjewUONey1t7CG21lrlTLN07GtGM8MqFVp86D4uKJg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-custom-media@11.0.6:
+    resolution: {integrity: sha512-C4lD4b7mUIw+RZhtY7qUbf4eADmb7Ey8BFA2px9jUbwg7pjTZDl4KY4bvlUV+/vXQvzQRfiGEVJyAbtOsCMInw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-custom-properties@14.0.6:
+    resolution: {integrity: sha512-fTYSp3xuk4BUeVhxCSJdIPhDLpJfNakZKoiTDx7yRGCdlZrSJR7mWKVOBS4sBF+5poPQFMj2YdXx1VHItBGihQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-custom-selectors@8.0.5:
+    resolution: {integrity: sha512-9PGmckHQswiB2usSO6XMSswO2yFWVoCAuih1yl9FVcwkscLjRKjwsjM3t+NIWpSU2Jx3eOiK2+t4vVTQaoCHHg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-dir-pseudo-class@9.0.1:
+    resolution: {integrity: sha512-tRBEK0MHYvcMUrAuYMEOa0zg9APqirBcgzi6P21OhxtJyJADo/SWBwY1CAwEohQ/6HDaa9jCjLRG7K3PVQYHEA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-discard-comments@7.0.5:
+    resolution: {integrity: sha512-IR2Eja8WfYgN5n32vEGSctVQ1+JARfu4UH8M7bgGh1bC+xI/obsPJXaBpQF7MAByvgwZinhpHpdrmXtvVVlKcQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-discard-duplicates@7.0.2:
+    resolution: {integrity: sha512-eTonaQvPZ/3i1ASDHOKkYwAybiM45zFIc7KXils4mQmHLqIswXD9XNOKEVxtTFnsmwYzF66u4LMgSr0abDlh5w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-discard-empty@7.0.1:
+    resolution: {integrity: sha512-cFrJKZvcg/uxB6Ijr4l6qmn3pXQBna9zyrPC+sK0zjbkDUZew+6xDltSF7OeB7rAtzaaMVYSdbod+sZOCWnMOg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-discard-overridden@7.0.1:
+    resolution: {integrity: sha512-7c3MMjjSZ/qYrx3uc1940GSOzN1Iqjtlqe8uoSg+qdVPYyRb0TILSqqmtlSFuE4mTDECwsm397Ya7iXGzfF7lg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-double-position-gradients@6.0.4:
+    resolution: {integrity: sha512-m6IKmxo7FxSP5nF2l63QbCC3r+bWpFUWmZXZf096WxG0m7Vl1Q1+ruFOhpdDRmKrRS+S3Jtk+TVk/7z0+BVK6g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-focus-visible@10.0.1:
+    resolution: {integrity: sha512-U58wyjS/I1GZgjRok33aE8juW9qQgQUNwTSdxQGuShHzwuYdcklnvK/+qOWX1Q9kr7ysbraQ6ht6r+udansalA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-focus-within@9.0.1:
+    resolution: {integrity: sha512-fzNUyS1yOYa7mOjpci/bR+u+ESvdar6hk8XNK/TRR0fiGTp2QT5N+ducP0n3rfH/m9I7H/EQU6lsa2BrgxkEjw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-font-variant@5.0.0:
+    resolution: {integrity: sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==}
+    peerDependencies:
+      postcss: ^8.1.0
+
+  postcss-gap-properties@6.0.0:
+    resolution: {integrity: sha512-Om0WPjEwiM9Ru+VhfEDPZJAKWUd0mV1HmNXqp2C29z80aQ2uP9UVhLc7e3aYMIor/S5cVhoPgYQ7RtfeZpYTRw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-html@1.8.0:
+    resolution: {integrity: sha512-5mMeb1TgLWoRKxZ0Xh9RZDfwUUIqRrcxO2uXO+Ezl1N5lqpCiSU5Gk6+1kZediBfBHFtPCdopr2UZ2SgUsKcgQ==}
+    engines: {node: ^12 || >=14}
+
+  postcss-image-set-function@7.0.0:
+    resolution: {integrity: sha512-QL7W7QNlZuzOwBTeXEmbVckNt1FSmhQtbMRvGGqqU4Nf4xk6KUEQhAoWuMzwbSv5jxiRiSZ5Tv7eiDB9U87znA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-import@16.1.1:
+    resolution: {integrity: sha512-2xVS1NCZAfjtVdvXiyegxzJ447GyqCeEI5V7ApgQVOWnros1p5lGNovJNapwPpMombyFBfqDwt7AD3n2l0KOfQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.1.0:
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-lab-function@7.0.12:
+    resolution: {integrity: sha512-tUcyRk1ZTPec3OuKFsqtRzW2Go5lehW29XA21lZ65XmzQkz43VY2tyWEC202F7W3mILOjw0voOiuxRGTsN+J9w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: ^2.6.1
+      postcss: '>=8.0.9'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  postcss-logical@8.1.0:
+    resolution: {integrity: sha512-pL1hXFQ2fEXNKiNiAgtfA005T9FBxky5zkX6s4GZM2D8RkVgRqz3f4g1JUoq925zXv495qk8UNldDwh8uGEDoA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-media-query-parser@0.2.3:
+    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
+
+  postcss-merge-longhand@7.0.5:
+    resolution: {integrity: sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-merge-rules@7.0.7:
+    resolution: {integrity: sha512-njWJrd/Ms6XViwowaaCc+/vqhPG3SmXn725AGrnl+BgTuRPEacjiLEaGq16J6XirMJbtKkTwnt67SS+e2WGoew==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-minify-font-values@7.0.1:
+    resolution: {integrity: sha512-2m1uiuJeTplll+tq4ENOQSzB8LRnSUChBv7oSyFLsJRtUgAAJGP6LLz0/8lkinTgxrmJSPOEhgY1bMXOQ4ZXhQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-minify-gradients@7.0.1:
+    resolution: {integrity: sha512-X9JjaysZJwlqNkJbUDgOclyG3jZEpAMOfof6PUZjPnPrePnPG62pS17CjdM32uT1Uq1jFvNSff9l7kNbmMSL2A==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-minify-params@7.0.5:
+    resolution: {integrity: sha512-FGK9ky02h6Ighn3UihsyeAH5XmLEE2MSGH5Tc4tXMFtEDx7B+zTG6hD/+/cT+fbF7PbYojsmmWjyTwFwW1JKQQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-minify-selectors@7.0.5:
+    resolution: {integrity: sha512-x2/IvofHcdIrAm9Q+p06ZD1h6FPcQ32WtCRVodJLDR+WMn8EVHI1kvLxZuGKz/9EY5nAmI6lIQIrpo4tBy5+ug==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-nested@5.0.6:
+    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-nested@7.0.2:
+    resolution: {integrity: sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-nesting@13.0.2:
+    resolution: {integrity: sha512-1YCI290TX+VP0U/K/aFxzHzQWHWURL+CtHMSbex1lCdpXD1SoR2sYuxDu5aNI9lPoXpKTCggFZiDJbwylU0LEQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-normalize-charset@7.0.1:
+    resolution: {integrity: sha512-sn413ofhSQHlZFae//m9FTOfkmiZ+YQXsbosqOWRiVQncU2BA3daX3n0VF3cG6rGLSFVc5Di/yns0dFfh8NFgQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-display-values@7.0.1:
+    resolution: {integrity: sha512-E5nnB26XjSYz/mGITm6JgiDpAbVuAkzXwLzRZtts19jHDUBFxZ0BkXAehy0uimrOjYJbocby4FVswA/5noOxrQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-positions@7.0.1:
+    resolution: {integrity: sha512-pB/SzrIP2l50ZIYu+yQZyMNmnAcwyYb9R1fVWPRxm4zcUFCY2ign7rcntGFuMXDdd9L2pPNUgoODDk91PzRZuQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-repeat-style@7.0.1:
+    resolution: {integrity: sha512-NsSQJ8zj8TIDiF0ig44Byo3Jk9e4gNt9x2VIlJudnQQ5DhWAHJPF4Tr1ITwyHio2BUi/I6Iv0HRO7beHYOloYQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-string@7.0.1:
+    resolution: {integrity: sha512-QByrI7hAhsoze992kpbMlJSbZ8FuCEc1OT9EFbZ6HldXNpsdpZr+YXC5di3UEv0+jeZlHbZcoCADgb7a+lPmmQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-timing-functions@7.0.1:
+    resolution: {integrity: sha512-bHifyuuSNdKKsnNJ0s8fmfLMlvsQwYVxIoUBnowIVl2ZAdrkYQNGVB4RxjfpvkMjipqvbz0u7feBZybkl/6NJg==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-unicode@7.0.5:
+    resolution: {integrity: sha512-X6BBwiRxVaFHrb2WyBMddIeB5HBjJcAaUHyhLrM2FsxSq5TFqcHSsK7Zu1otag+o0ZphQGJewGH1tAyrD0zX1Q==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-url@7.0.1:
+    resolution: {integrity: sha512-sUcD2cWtyK1AOL/82Fwy1aIVm/wwj5SdZkgZ3QiUzSzQQofrbq15jWJ3BA7Z+yVRwamCjJgZJN0I9IS7c6tgeQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-normalize-whitespace@7.0.1:
+    resolution: {integrity: sha512-vsbgFHMFQrJBJKrUFJNZ2pgBeBkC2IvvoHjz1to0/0Xk7sII24T0qFOiJzG6Fu3zJoq/0yI4rKWi7WhApW+EFA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-opacity-percentage@3.0.0:
+    resolution: {integrity: sha512-K6HGVzyxUxd/VgZdX04DCtdwWJ4NGLG212US4/LA1TLAbHgmAsTWVR86o+gGIbFtnTkfOpb9sCRBx8K7HO66qQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-ordered-values@7.0.2:
+    resolution: {integrity: sha512-AMJjt1ECBffF7CEON/Y0rekRLS6KsePU6PRP08UqYW4UGFRnTXNrByUzYK1h8AC7UWTZdQ9O3Oq9kFIhm0SFEw==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-overflow-shorthand@6.0.0:
+    resolution: {integrity: sha512-BdDl/AbVkDjoTofzDQnwDdm/Ym6oS9KgmO7Gr+LHYjNWJ6ExORe4+3pcLQsLA9gIROMkiGVjjwZNoL/mpXHd5Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-page-break@3.0.4:
+    resolution: {integrity: sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==}
+    peerDependencies:
+      postcss: ^8
+
+  postcss-place@10.0.0:
+    resolution: {integrity: sha512-5EBrMzat2pPAxQNWYavwAfoKfYcTADJ8AXGVPcUZ2UkNloUTWzJQExgrzrDkh3EKzmAx1evfTAzF9I8NGcc+qw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-preset-env@10.5.0:
+    resolution: {integrity: sha512-xgxFQPAPxeWmsgy8cR7GM1PGAL/smA5E9qU7K//D4vucS01es3M0fDujhDJn3kY8Ip7/vVYcecbe1yY+vBo3qQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-pseudo-class-any-link@10.0.1:
+    resolution: {integrity: sha512-3el9rXlBOqTFaMFkWDOkHUTQekFIYnaQY55Rsp8As8QQkpiSgIYEcF/6Ond93oHiDsGb4kad8zjt+NPlOC1H0Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-reduce-initial@7.0.5:
+    resolution: {integrity: sha512-RHagHLidG8hTZcnr4FpyMB2jtgd/OcyAazjMhoy5qmWJOx1uxKh4ntk0Pb46ajKM0rkf32lRH4C8c9qQiPR6IA==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-reduce-transforms@7.0.1:
+    resolution: {integrity: sha512-MhyEbfrm+Mlp/36hvZ9mT9DaO7dbncU0CvWI8V93LRkY6IYlu38OPg3FObnuKTUxJ4qA8HpurdQOo5CyqqO76g==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-replace-overflow-wrap@4.0.0:
+    resolution: {integrity: sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==}
+    peerDependencies:
+      postcss: ^8.0.3
+
+  postcss-resolve-nested-selector@0.1.6:
+    resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
+
+  postcss-safe-parser@6.0.0:
+    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-scss@4.0.9:
+    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.4.29
+
+  postcss-selector-not@8.0.1:
+    resolution: {integrity: sha512-kmVy/5PYVb2UOhy0+LqUYAhKj7DUGDpSWa5LZqlkWJaaAV+dxxsOG3+St0yNLu6vsKD7Dmqx+nWQt0iil89+WA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
+
+  postcss-sorting@8.0.2:
+    resolution: {integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==}
+    peerDependencies:
+      postcss: ^8.4.20
+
+  postcss-sorting@9.1.0:
+    resolution: {integrity: sha512-Mn8KJ45HNNG6JBpBizXcyf6LqY/qyqetGcou/nprDnFwBFBLGj0j/sNKV2lj2KMOVOwdXu14aEzqJv8CIV6e8g==}
+    peerDependencies:
+      postcss: ^8.4.20
+
+  postcss-svgo@7.1.0:
+    resolution: {integrity: sha512-KnAlfmhtoLz6IuU3Sij2ycusNs4jPW+QoFE5kuuUOK8awR6tMxZQrs5Ey3BUz7nFCzT3eqyFgqkyrHiaU2xx3w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >= 18}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-unique-selectors@7.0.4:
+    resolution: {integrity: sha512-pmlZjsmEAG7cHd7uK3ZiNSW6otSZ13RHuZ/4cDN/bVglS5EpF2r2oxY99SuOHa8m7AWoBCelTS3JPpzsIs8skQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+
+  prettier-plugin-tailwindcss@0.7.2:
+    resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
+  prettier@2.8.8:
+    resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  prettier@3.7.4:
+    resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  pretty-bytes@5.6.0:
+    resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
+    engines: {node: '>=6'}
+
+  pretty-bytes@6.1.1:
+    resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+
+  pretty-bytes@7.1.0:
+    resolution: {integrity: sha512-nODzvTiYVRGRqAOvE84Vk5JDPyyxsVk0/fbA/bq7RqlnhksGpset09XTxbpvLTIjoaF7K8Z8DG8yHtKGTPSYRw==}
+    engines: {node: '>=20'}
+
+  pretty-ms@9.3.0:
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
+
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
+  process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+
+  proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  prr@1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+
+  publint@0.3.16:
+    resolution: {integrity: sha512-MFqyfRLAExPVZdTQFwkAQELzA8idyXzROVOytg6nEJ/GEypXBUmMGrVaID8cTuzRS1U5L8yTOdOJtMXgFUJAeA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  pupa@3.3.0:
+    resolution: {integrity: sha512-LjgDO2zPtoXP2wJpDjZrGdojii1uqO0cnwKoIoUzkfS98HDmbeiGmYiXo3lXeFlq2xvne1QFQhwYXSUCLKtEuA==}
+    engines: {node: '>=12.20'}
+
+  qified@0.5.3:
+    resolution: {integrity: sha512-kXuQdQTB6oN3KhI6V4acnBSZx8D2I4xzZvn9+wFLLFCoBNQY/sFnCW6c43OL7pOQ2HvGV4lnWIXNmgfp7cTWhQ==}
+    engines: {node: '>=20'}
+
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
+  qs@6.14.0:
+    resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
+    engines: {node: '>=0.6'}
+
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  radix3@1.1.2:
+    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
+
+  randombytes@2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  rc9@2.1.2:
+    resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
+
+  rc@1.2.8:
+    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
+    hasBin: true
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  read-yaml-file@1.1.0:
+    resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
+    engines: {node: '>=6'}
+
+  read-yaml-file@2.1.0:
+    resolution: {integrity: sha512-UkRNRIwnhG+y7hpqnycCL/xbTk7+ia9VuVTC0S+zVbwd65DI9eUpRMfsWIGrCWxTU/mi+JW8cHQCrv+zfCbEPQ==}
+    engines: {node: '>=10.13'}
+
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
+  readable-stream@4.7.0:
+    resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  readdir-glob@1.1.3:
+    resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+
+  redis-errors@1.2.0:
+    resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
+    engines: {node: '>=4'}
+
+  redis-parser@3.0.0:
+    resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
+    engines: {node: '>=4'}
+
+  refa@0.12.1:
+    resolution: {integrity: sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
+  regenerate-unicode-properties@10.2.2:
+    resolution: {integrity: sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==}
+    engines: {node: '>=4'}
+
+  regenerate@1.4.2:
+    resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
+
+  regexp-ast-analysis@0.7.1:
+    resolution: {integrity: sha512-sZuz1dYW/ZsfG17WSAG7eS85r5a0dDsvg+7BiiYR5o6lKCAtUrEwdmRmaGF6rwVj3LcmAeYkOWKEPlbPzN3Y3A==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  regexp-tree@0.1.27:
+    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
+    hasBin: true
+
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
+  regexpu-core@6.4.0:
+    resolution: {integrity: sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==}
+    engines: {node: '>=4'}
+
+  registry-auth-token@5.1.0:
+    resolution: {integrity: sha512-GdekYuwLXLxMuFTwAPg5UKGLW/UXzQrZvH/Zj791BQif5T05T0RsaLfHc9q3ZOKi7n+BoprPD9mJ0O0k4xzUlw==}
+    engines: {node: '>=14'}
+
+  registry-url@6.0.1:
+    resolution: {integrity: sha512-+crtS5QjFRqFCoQmvGduwYWEBng99ZvmFvF+cUJkGYF1L1BfU8C6Zp9T7f5vPAwyLkUExpvK+ANVZmGU49qi4Q==}
+    engines: {node: '>=12'}
+
+  regjsgen@0.8.0:
+    resolution: {integrity: sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==}
+
+  regjsparser@0.13.0:
+    resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
+    hasBin: true
+
+  reka-ui@2.7.0:
+    resolution: {integrity: sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  relateurl@0.2.7:
+    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
+    engines: {node: '>= 0.10'}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
+  require-package-name@2.0.1:
+    resolution: {integrity: sha512-uuoJ1hU/k6M0779t3VMVIYpb2VMJk05cehCaABFhXaibcbvfgR8wKiozLjVFSzJPmQMRqIcO0HMyTFqfV09V6Q==}
+
+  reserved-identifiers@1.2.0:
+    resolution: {integrity: sha512-yE7KUfFvaBFzGPs5H3Ops1RevfUEsDc5Iz65rOwWg4lE8HJSYtle77uul3+573457oHvBKuHYDl/xqUkKpEEdw==}
+    engines: {node: '>=18'}
+
+  resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+
+  resolve-dir@1.0.1:
+    resolution: {integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==}
+    engines: {node: '>=0.10.0'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve.exports@2.0.3:
+    resolution: {integrity: sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==}
+    engines: {node: '>=10'}
+
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rimraf@6.1.2:
+    resolution: {integrity: sha512-cFCkPslJv7BAXJsYlK1dZsbP8/ZNLkCAQ0bi1hf5EKX2QHegmDFEFA6QhuYJlk7UDdc+02JjO80YSOrWPpw06g==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
+  rollup-plugin-dts@6.3.0:
+    resolution: {integrity: sha512-d0UrqxYd8KyZ6i3M2Nx7WOMy708qsV/7fTHMHxCMCBOAe3V/U7OMPu5GkX8hC+cmkHhzGnfeYongl1IgiooddA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      rollup: ^3.29.4 || ^4
+      typescript: ^4.5 || ^5.0
+
+  rollup-plugin-visualizer@5.14.0:
+    resolution: {integrity: sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      rolldown: 1.x
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+
+  rollup-plugin-visualizer@6.0.5:
+    resolution: {integrity: sha512-9+HlNgKCVbJDs8tVtjQ43US12eqaiHyyiLMdBwQ7vSZPiHMysGNo2E88TAp1si5wx8NAoYriI2A5kuKfIakmJg==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      rolldown: 1.x || ^1.0.0-beta
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+
+  rollup@2.79.2:
+    resolution: {integrity: sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
+  rollup@4.54.0:
+    resolution: {integrity: sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  rotated-array-set@3.0.0:
+    resolution: {integrity: sha512-G7689wvCM0szMFXUAhi3GfNGcSPlndg077cdRWoq7UegOAwfU2MJ0jD7s7jB+2ppKA75Kr/O0HwAP9+rRdBctg==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  sade@1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sass@1.97.1:
+    resolution: {integrity: sha512-uf6HoO8fy6ClsrShvMgaKUn14f2EHQLQRtpsZZLeU/Mv0Q1K5P0+x2uvH6Cub39TVVbWNSrraUhDAoFph6vh0A==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  sax@1.4.3:
+    resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==}
+
+  scroll-into-view-if-needed@2.2.31:
+    resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
+
+  scslre@0.3.0:
+    resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
+    engines: {node: ^14.0.0 || >=16.0.0}
+
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
+  secure-ls@2.0.0:
+    resolution: {integrity: sha512-Wgtnw0QSm0v7gVKv11nOoeyGS65EThGXnBB7jfd4IhZd2eq3B4AMPcXAL5qJ1h55+Qolun7TONTwX7H5m6e2pQ==}
+    engines: {node: '>=8.0'}
+
+  select@1.1.2:
+    resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==}
+
+  semver-compare@1.0.0:
+    resolution: {integrity: sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==}
+
+  semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.5.4:
+    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  send@1.2.1:
+    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
+    engines: {node: '>= 18'}
+
+  serialize-javascript@6.0.2:
+    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
+
+  serve-placeholder@2.0.2:
+    resolution: {integrity: sha512-/TMG8SboeiQbZJWRlfTCqMs2DD3SZgWp0kDQePz9yUuCnDfDh/92gf7/PxGhzXTKBIPASIHxFcZndoNbp6QOLQ==}
+
+  serve-static@2.2.1:
+    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
+    engines: {node: '>= 18'}
+
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  shallow-equal@1.2.1:
+    resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  short-tree@3.0.0:
+    resolution: {integrity: sha512-Yd9NFs/o9QSoH4/wTjxk4Xe0+CIzitDRN1Qg7iBeTSejKjlCg/3PbgiRwDUVuaIxD0RRdv7Iz9jKr7e0HljtUg==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
+  slice-ansi@4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+
+  slice-ansi@5.0.0:
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
+
+  slice-ansi@7.1.2:
+    resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
+    engines: {node: '>=18'}
+
+  smob@1.5.0:
+    resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
+
+  sortablejs@1.15.6:
+    resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
+  source-map@0.8.0-beta.0:
+    resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
+    engines: {node: '>= 8'}
+    deprecated: The work that was done in this beta branch won't be included in future versions
+
+  sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+
+  spawndamnit@3.0.1:
+    resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
+
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+
+  spdx-expression-parse@4.0.0:
+    resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
+
+  spdx-license-ids@3.0.22:
+    resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
+
+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
+  split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+
+  sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+
+  ssri@13.0.0:
+    resolution: {integrity: sha512-yizwGBpbCn4YomB2lzhZqrHLJoqFGXihNbib3ozhqF/cIp5ue+xSmOQrjNasEE62hFxsCcg/V/z23t4n8jMEng==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  stable-hash-x@0.2.0:
+    resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
+    engines: {node: '>=12.0.0'}
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  standard-as-callback@2.1.0:
+    resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
+  stdin-discarder@0.2.2:
+    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+    engines: {node: '>=18'}
+
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
+  streamx@2.23.0:
+    resolution: {integrity: sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==}
+
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  stringify-object@3.3.0:
+    resolution: {integrity: sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==}
+    engines: {node: '>=4'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-bom@4.0.0:
+    resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
+    engines: {node: '>=8'}
+
+  strip-comments@2.0.1:
+    resolution: {integrity: sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==}
+    engines: {node: '>=10'}
+
+  strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
+  strip-indent@4.1.1:
+    resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
+    engines: {node: '>=12'}
+
+  strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  strip-literal@3.1.0:
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
+
+  strtok3@9.1.1:
+    resolution: {integrity: sha512-FhwotcEqjr241ZbjFzjlIYg6c5/L/s4yBGWSMvJ9UoExiSqL+FnFA/CaeZx17WGaZMS/4SOZp8wH18jSS4R4lw==}
+    engines: {node: '>=16'}
+
+  stubborn-fs@2.0.0:
+    resolution: {integrity: sha512-Y0AvSwDw8y+nlSNFXMm2g6L51rBGdAQT20J3YSOqxC53Lo3bjWRtr2BKcfYoAf352WYpsZSTURrA0tqhfgudPA==}
+
+  stubborn-utils@1.0.2:
+    resolution: {integrity: sha512-zOh9jPYI+xrNOyisSelgym4tolKTJCQd5GBhK0+0xJvcYDcwlOoxF/rnFKQ2KRZknXSG9jWAp66fwP6AxN9STg==}
+
+  style-search@0.1.0:
+    resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
+
+  style-value-types@5.1.2:
+    resolution: {integrity: sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==}
+
+  stylehacks@7.0.7:
+    resolution: {integrity: sha512-bJkD0JkEtbRrMFtwgpJyBbFIwfDDONQ1Ov3sDLZQP8HuJ73kBOyx66H4bOcAbVWmnfLdvQ0AJwXxOMkpujcO6g==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+    peerDependencies:
+      postcss: ^8.4.32
+
+  stylelint-config-html@1.1.0:
+    resolution: {integrity: sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==}
+    engines: {node: ^12 || >=14}
+    peerDependencies:
+      postcss-html: ^1.0.0
+      stylelint: '>=14.0.0'
+
+  stylelint-config-recess-order@6.1.0:
+    resolution: {integrity: sha512-0rGZgJQjUKqv1PXZnRJxr13f3hb3i2snx2nIL6luDWUf4nD3BAweB8noS7jdfBQ56HQG3RKSF0a+MAHfBGFxgw==}
+    peerDependencies:
+      stylelint: '>=16'
+
+  stylelint-config-recommended-scss@14.1.0:
+    resolution: {integrity: sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^16.6.1
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+
+  stylelint-config-recommended-vue@1.6.1:
+    resolution: {integrity: sha512-lLW7hTIMBiTfjenGuDq2kyHA6fBWd/+Df7MO4/AWOxiFeXP9clbpKgg27kHfwA3H7UNMGC7aeP3mNlZB5LMmEQ==}
+    engines: {node: ^12 || >=14}
+    peerDependencies:
+      postcss-html: ^1.0.0
+      stylelint: '>=14.0.0'
+
+  stylelint-config-recommended@14.0.1:
+    resolution: {integrity: sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.1.0
+
+  stylelint-config-recommended@16.0.0:
+    resolution: {integrity: sha512-4RSmPjQegF34wNcK1e1O3Uz91HN8P1aFdFzio90wNK9mjgAI19u5vsU868cVZboKzCaa5XbpvtTzAAGQAxpcXA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.16.0
+
+  stylelint-config-recommended@17.0.0:
+    resolution: {integrity: sha512-WaMSdEiPfZTSFVoYmJbxorJfA610O0tlYuU2aEwY33UQhSPgFbClrVJYWvy3jGJx+XW37O+LyNLiZOEXhKhJmA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.23.0
+
+  stylelint-config-standard@38.0.0:
+    resolution: {integrity: sha512-uj3JIX+dpFseqd/DJx8Gy3PcRAJhlEZ2IrlFOc4LUxBX/PNMEQ198x7LCOE2Q5oT9Vw8nyc4CIL78xSqPr6iag==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.18.0
+
+  stylelint-order@6.0.4:
+    resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==}
+    peerDependencies:
+      stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1
+
+  stylelint-order@7.0.0:
+    resolution: {integrity: sha512-rSWxx0KscYfxU02wEskKXES9lkRzuuONMMNkZ7SUc6uiF3tDKm7e+sE0Ax/SBlG4TUf1sp1R6f3/SlsPGmzthg==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      stylelint: ^16.18.0
+
+  stylelint-prettier@5.0.3:
+    resolution: {integrity: sha512-B6V0oa35ekRrKZlf+6+jA+i50C4GXJ7X1PPmoCqSUoXN6BrNF6NhqqhanvkLjqw2qgvrS0wjdpeC+Tn06KN3jw==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      prettier: '>=3.0.0'
+      stylelint: '>=16.0.0'
+
+  stylelint-scss@6.13.0:
+    resolution: {integrity: sha512-kZPwFUJkfup2gP1enlrS2h9U5+T5wFoqzJ1n/56AlpwSj28kmFe7ww/QFydvPsg5gLjWchAwWWBLtterynZrOw==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.8.2
+
+  stylelint@16.26.1:
+    resolution: {integrity: sha512-v20V59/crfc8sVTAtge0mdafI3AdnzQ2KsWe6v523L4OA1bJO02S7MO2oyXDCS6iWb9ckIPnqAFVItqSBQr7jw==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+
+  stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
+
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  superjson@2.2.6:
+    resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
+    engines: {node: '>=16'}
+
+  supports-color@10.2.2:
+    resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
+    engines: {node: '>=18'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
+  supports-hyperlinks@3.2.0:
+    resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
+    engines: {node: '>=14.18'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  sver@1.8.4:
+    resolution: {integrity: sha512-71o1zfzyawLfIWBOmw8brleKyvnbn73oVHNCsu51uPMz/HWiKkkXsI31JjHW5zqXEqnPYkIiHd8ZmL7FCimLEA==}
+
+  svg-tags@1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+
+  svgo@4.0.0:
+    resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  synckit@0.11.11:
+    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+
+  system-architecture@0.1.0:
+    resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
+    engines: {node: '>=18'}
+
+  tabbable@6.3.0:
+    resolution: {integrity: sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==}
+
+  table@6.9.0:
+    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
+    engines: {node: '>=10.0.0'}
+
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
+  tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
+  tailwindcss@3.4.19:
+    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  tar-stream@3.1.7:
+    resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
+
+  tar@7.5.2:
+    resolution: {integrity: sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==}
+    engines: {node: '>=18'}
+
+  temp-dir@2.0.0:
+    resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
+    engines: {node: '>=8'}
+
+  tempy@0.6.0:
+    resolution: {integrity: sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==}
+    engines: {node: '>=10'}
+
+  term-size@2.2.1:
+    resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
+    engines: {node: '>=8'}
+
+  terser@5.44.1:
+    resolution: {integrity: sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  text-decoder@1.2.3:
+    resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
+
+  text-extensions@2.4.0:
+    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
+    engines: {node: '>=8'}
+
+  theme-colors@0.1.0:
+    resolution: {integrity: sha512-6gTEHQqWlQNiOEGHCSSQmU//E5SnXHJ4H7oHQOD8x77CvNYNQAmt73dqR71mzw5ULV87zaHLxK5pIBnsToFuZw==}
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
+    engines: {node: '>=12.22'}
+
+  through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+
+  tiny-emitter@2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinyexec@1.0.2:
+    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  tinymce@7.9.1:
+    resolution: {integrity: sha512-zaOHwmiP1EqTeLRXAvVriDb00JYnfEjWGPdKEuac7MiZJ5aiDMZ4Unc98Gmajn+PBljOmO1GKV6G0KwWn3+k8A==}
+
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+    engines: {node: '>=14.0.0'}
+
+  tippy.js@6.3.7:
+    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  to-valid-identifier@1.0.0:
+    resolution: {integrity: sha512-41wJyvKep3yT2tyPqX/4blcfybknGB4D+oETKLs7Q76UiPqRpUJK3hr1nxelyYO0PHKVzJwlu0aCeEAsGI6rpw==}
+    engines: {node: '>=20'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  token-types@6.1.2:
+    resolution: {integrity: sha512-dRXchy+C0IgK8WPC6xvCHFRIWYUbqqdEIKPaKo/AcTUNzwLTK6AH7RjdLWsEZcAN/TBdtfUw3PYEgPr5VPr6ww==}
+    engines: {node: '>=14.16'}
+
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
+  tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
+  tr46@1.0.1:
+    resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
+
+  ts-api-utils@1.4.3:
+    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+
+  ts-api-utils@2.1.0:
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-declaration-location@1.0.7:
+    resolution: {integrity: sha512-EDyGAwH1gO0Ausm9gV6T2nUvBgXT5kGoCMJPllOaooZ+4VvJiKBdZE7wK18N1deEowhcUptS+5GXZK8U/fvpwA==}
+    peerDependencies:
+      typescript: '>=4.0.0'
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
+  tslib@2.4.0:
+    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  turbo-darwin-64@2.7.2:
+    resolution: {integrity: sha512-dxY3X6ezcT5vm3coK6VGixbrhplbQMwgNsCsvZamS/+/6JiebqW9DKt4NwpgYXhDY2HdH00I7FWs3wkVuan4rA==}
+    cpu: [x64]
+    os: [darwin]
+
+  turbo-darwin-arm64@2.7.2:
+    resolution: {integrity: sha512-1bXmuwPLqNFt3mzrtYcVx1sdJ8UYb124Bf48nIgcpMCGZy3kDhgxNv1503kmuK/37OGOZbsWSQFU4I08feIuSg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  turbo-linux-64@2.7.2:
+    resolution: {integrity: sha512-kP+TiiMaiPugbRlv57VGLfcjFNsFbo8H64wMBCPV2270Or2TpDCBULMzZrvEsvWFjT3pBFvToYbdp8/Kw0jAQg==}
+    cpu: [x64]
+    os: [linux]
+
+  turbo-linux-arm64@2.7.2:
+    resolution: {integrity: sha512-VDJwQ0+8zjAfbyY6boNaWfP6RIez4ypKHxwkuB6SrWbOSk+vxTyW5/hEjytTwK8w/TsbKVcMDyvpora8tEsRFw==}
+    cpu: [arm64]
+    os: [linux]
+
+  turbo-windows-64@2.7.2:
+    resolution: {integrity: sha512-rPjqQXVnI6A6oxgzNEE8DNb6Vdj2Wwyhfv3oDc+YM3U9P7CAcBIlKv/868mKl4vsBtz4ouWpTQNXG8vljgJO+w==}
+    cpu: [x64]
+    os: [win32]
+
+  turbo-windows-arm64@2.7.2:
+    resolution: {integrity: sha512-tcnHvBhO515OheIFWdxA+qUvZzNqqcHbLVFc1+n+TJ1rrp8prYicQtbtmsiKgMvr/54jb9jOabU62URAobnB7g==}
+    cpu: [arm64]
+    os: [win32]
+
+  turbo@2.7.2:
+    resolution: {integrity: sha512-5JIA5aYBAJSAhrhbyag1ZuMSgUZnHtI+Sq3H8D3an4fL8PeF+L1yYvbEJg47akP1PFfATMf5ehkqFnxfkmuwZQ==}
+    hasBin: true
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@0.16.0:
+    resolution: {integrity: sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==}
+    engines: {node: '>=10'}
+
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
+  type-fest@5.3.1:
+    resolution: {integrity: sha512-VCn+LMHbd4t6sF3wfU/+HKT63C9OoyrSIf4b+vtWHpt2U7/4InZG467YDNMFMR70DdHjAdpPWmw2lzRdg0Xqqg==}
+    engines: {node: '>=20'}
+
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
+  typescript@5.8.2:
+    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+
+  uint8array-extras@1.5.0:
+    resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
+    engines: {node: '>=18'}
+
+  ultrahtml@1.6.0:
+    resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
+
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
+  unbuild@3.6.1:
+    resolution: {integrity: sha512-+U5CdtrdjfWkZhuO4N9l5UhyiccoeMEXIc2Lbs30Haxb+tRwB3VwB8AoZRxlAzORXunenSo+j6lh45jx+xkKgg==}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.9.2
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  uncrypto@0.1.3:
+    resolution: {integrity: sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==}
+
+  unctx@2.5.0:
+    resolution: {integrity: sha512-p+Rz9x0R7X+CYDkT+Xg8/GhpcShTlU8n+cf9OtOEf7zEQsNcCZO1dPKNRDqvUTaq+P32PMMkxWHwfrxkqfqAYg==}
+
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
+
+  undici@7.16.0:
+    resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==}
+    engines: {node: '>=20.18.1'}
+
+  unenv@2.0.0-rc.24:
+    resolution: {integrity: sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==}
+
+  unicode-canonical-property-names-ecmascript@2.0.1:
+    resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
+    engines: {node: '>=4'}
+
+  unicode-match-property-ecmascript@2.0.0:
+    resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==}
+    engines: {node: '>=4'}
+
+  unicode-match-property-value-ecmascript@2.2.1:
+    resolution: {integrity: sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==}
+    engines: {node: '>=4'}
+
+  unicode-property-aliases-ecmascript@2.2.0:
+    resolution: {integrity: sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==}
+    engines: {node: '>=4'}
+
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+
+  unimport@5.6.0:
+    resolution: {integrity: sha512-8rqAmtJV8o60x46kBAJKtHpJDJWkA2xcBqWKPI14MgUb05o1pnpnCnXSxedUXyeq7p8fR5g3pTo2BaswZ9lD9A==}
+    engines: {node: '>=18.12.0'}
+
+  unique-filename@5.0.0:
+    resolution: {integrity: sha512-2RaJTAvAb4owyjllTfXzFClJ7WsGxlykkPvCr9pA//LD9goVq+m4PPAeBgNodGZ7nSrntT/auWpJ6Y5IFXcfjg==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  unique-slug@6.0.0:
+    resolution: {integrity: sha512-4Lup7Ezn8W3d52/xBhZBVdx323ckxa7DEvd9kPQHppTkLoJXw6ltrBCyj5pnrxj0qKDxYMJ56CoxNuFCscdTiw==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  unique-string@2.0.0:
+    resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
+    engines: {node: '>=8'}
+
+  universalify@0.1.2:
+    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
+    engines: {node: '>= 4.0.0'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unplugin-utils@0.3.1:
+    resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
+    engines: {node: '>=20.19.0'}
+
+  unplugin@1.16.1:
+    resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
+    engines: {node: '>=14.0.0'}
+
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
+  unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+
+  unstorage@1.17.3:
+    resolution: {integrity: sha512-i+JYyy0DoKmQ3FximTHbGadmIYb8JEpq7lxUjnjeB702bCPum0vzo6oy5Mfu0lpqISw7hCyMW2yj4nWC8bqJ3Q==}
+    peerDependencies:
+      '@azure/app-configuration': ^1.8.0
+      '@azure/cosmos': ^4.2.0
+      '@azure/data-tables': ^13.3.0
+      '@azure/identity': ^4.6.0
+      '@azure/keyvault-secrets': ^4.9.0
+      '@azure/storage-blob': ^12.26.0
+      '@capacitor/preferences': ^6.0.3 || ^7.0.0
+      '@deno/kv': '>=0.9.0'
+      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0
+      '@planetscale/database': ^1.19.0
+      '@upstash/redis': ^1.34.3
+      '@vercel/blob': '>=0.27.1'
+      '@vercel/functions': ^2.2.12 || ^3.0.0
+      '@vercel/kv': ^1.0.1
+      aws4fetch: ^1.0.20
+      db0: '>=0.2.1'
+      idb-keyval: ^6.2.1
+      ioredis: ^5.4.2
+      uploadthing: ^7.4.4
+    peerDependenciesMeta:
+      '@azure/app-configuration':
+        optional: true
+      '@azure/cosmos':
+        optional: true
+      '@azure/data-tables':
+        optional: true
+      '@azure/identity':
+        optional: true
+      '@azure/keyvault-secrets':
+        optional: true
+      '@azure/storage-blob':
+        optional: true
+      '@capacitor/preferences':
+        optional: true
+      '@deno/kv':
+        optional: true
+      '@netlify/blobs':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@upstash/redis':
+        optional: true
+      '@vercel/blob':
+        optional: true
+      '@vercel/functions':
+        optional: true
+      '@vercel/kv':
+        optional: true
+      aws4fetch:
+        optional: true
+      db0:
+        optional: true
+      idb-keyval:
+        optional: true
+      ioredis:
+        optional: true
+      uploadthing:
+        optional: true
+
+  untun@0.1.3:
+    resolution: {integrity: sha512-4luGP9LMYszMRZwsvyUd9MrxgEGZdZuZgpVQHEEX0lCYFESasVRvZd0EYpCkOIbJKHMuv0LskpXc/8Un+MJzEQ==}
+    hasBin: true
+
+  untyped@2.0.0:
+    resolution: {integrity: sha512-nwNCjxJTjNuLCgFr42fEak5OcLuB3ecca+9ksPFNvtfYSLpjf+iJqSIaSnIile6ZPbKYxI5k2AfXqeopGudK/g==}
+    hasBin: true
+
+  unwasm@0.3.11:
+    resolution: {integrity: sha512-Vhp5gb1tusSQw5of/g3Q697srYgMXvwMgXMjcG4ZNga02fDX9coxJ9fAb0Ci38hM2Hv/U1FXRPGgjP2BYqhNoQ==}
+
+  upath@1.2.0:
+    resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
+    engines: {node: '>=4'}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  update-notifier@7.3.1:
+    resolution: {integrity: sha512-+dwUY4L35XFYEzE+OAL3sarJdUioVovq+8f7lcIJ7wnmnYQV5UD1Y/lcwaMSyaQ6Bj3JMj1XSTjZbNLHn/19yA==}
+    engines: {node: '>=18'}
+
+  uqr@0.1.2:
+    resolution: {integrity: sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==}
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  vee-validate@4.15.1:
+    resolution: {integrity: sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  vite-dev-rpc@1.1.0:
+    resolution: {integrity: sha512-pKXZlgoXGoE8sEKiKJSng4hI1sQ4wi5YT24FCrwrLt6opmkjlqPPVmiPWWJn8M8byMxRGzp1CrFuqQs4M/Z39A==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.1 || ^7.0.0-0
+
+  vite-hot-client@2.1.0:
+    resolution: {integrity: sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
+
+  vite-node@3.2.4:
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+
+  vite-plugin-compression@0.5.1:
+    resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
+    peerDependencies:
+      vite: '>=2.0.0'
+
+  vite-plugin-dts@4.5.4:
+    resolution: {integrity: sha512-d4sOM8M/8z7vRXHHq/ebbblfaxENjogAAekcfcDCCwAyvGqnPrc7f4NZbvItS+g4WTgerW0xDwSz5qz11JT3vg==}
+    peerDependencies:
+      typescript: '*'
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  vite-plugin-html@3.2.2:
+    resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==}
+    peerDependencies:
+      vite: '>=2.0.0'
+
+  vite-plugin-inspect@11.3.3:
+    resolution: {integrity: sha512-u2eV5La99oHoYPHE6UvbwgEqKKOQGz86wMg40CCosP6q8BkB6e5xPneZfYagK4ojPJSj5anHCrnvC20DpwVdRA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': '*'
+      vite: ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+
+  vite-plugin-lazy-import@1.0.7:
+    resolution: {integrity: sha512-mE6oAObOb4wqso4AoUGi9cLjdR+4vay1RCaKJvziBuFPlziZl7J0aw2hsqRTokLVRx3bli0a0VyjMOwsNDv58A==}
+
+  vite-plugin-pwa@1.2.0:
+    resolution: {integrity: sha512-a2xld+SJshT9Lgcv8Ji4+srFJL4k/1bVbd1x06JIkvecpQkwkvCncD1+gSzcdm3s+owWLpMJerG3aN5jupJEVw==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      '@vite-pwa/assets-generator': ^1.0.0
+      vite: ^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      workbox-build: ^7.4.0
+      workbox-window: ^7.4.0
+    peerDependenciesMeta:
+      '@vite-pwa/assets-generator':
+        optional: true
+
+  vite-plugin-vue-devtools@8.0.5:
+    resolution: {integrity: sha512-p619BlKFOqQXJ6uDWS1vUPQzuJOD6xJTfftj57JXBGoBD/yeQCowR7pnWcr/FEX4/HVkFbreI6w2uuGBmQOh6A==}
+    engines: {node: '>=v14.21.3'}
+    peerDependencies:
+      vite: ^6.0.0 || ^7.0.0-0
+
+  vite-plugin-vue-inspector@5.3.2:
+    resolution: {integrity: sha512-YvEKooQcSiBTAs0DoYLfefNja9bLgkFM7NI2b07bE2SruuvX0MEa9cMaxjKVMkeCp5Nz9FRIdcN1rOdFVBeL6Q==}
+    peerDependencies:
+      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
+
+  vite@7.3.0:
+    resolution: {integrity: sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: ^2.6.1
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitest@3.2.4:
+    resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.2.4
+      '@vitest/ui': 3.2.4
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  vscode-languageserver-textdocument@1.0.12:
+    resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
+
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  vue-component-type-helpers@2.2.12:
+    resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
+
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.5.24
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
+  vue-eslint-parser@10.2.0:
+    resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+
+  vue-i18n@11.2.7:
+    resolution: {integrity: sha512-LPv8bAY5OA0UvFEXl4vBQOBqJzRrlExy92tWgRuwW7tbykHf7CH71G2Y4TM2OwGcIS4+hyqKHS2EVBqaYwPY9Q==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      vue: ^3.5.24
+
+  vue-json-viewer@3.0.4:
+    resolution: {integrity: sha512-pnC080rTub6YjccthVSNQod2z9Sl5IUUq46srXtn6rxwhW8QM4rlYn+CTSLFKXWfw+N3xv77Cioxw7B4XUKIbQ==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  vue-router@4.6.4:
+    resolution: {integrity: sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  vue-tippy@6.7.1:
+    resolution: {integrity: sha512-gdHbBV5/Vc8gH87hQHLA7TN1K4BlLco3MAPrTb70ZYGXxx+55rAU4a4mt0fIoP+gB3etu1khUZ6c29Br1n0CiA==}
+    peerDependencies:
+      vue: ^3.5.24
+
+  vue-tsc@3.2.1:
+    resolution: {integrity: sha512-I23Rk8dkQfmcSbxDO0dmg9ioMLjKA1pjlU3Lz6Jfk2pMGu3Uryu9810XkcZH24IzPbhzPCnkKo2rEMRX0skSrw==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue-types@3.0.2:
+    resolution: {integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==}
+    engines: {node: '>=10.15.0'}
+    peerDependencies:
+      vue: ^3.5.24
+
+  vue@3.5.26:
+    resolution: {integrity: sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  vxe-pc-ui@4.11.17:
+    resolution: {integrity: sha512-ZPU434l0/rf+KqIEMJcKpCGqFkIzKu2n1aFa479f4kx9VgKABlbZHGhIG/mCQindjiAvhpcMGQgFGP0zFWILmg==}
+
+  vxe-table@4.17.33:
+    resolution: {integrity: sha512-xdDHhHv+Uk8f79NJGwvyJZAEO/FJnb+87NhpyYpcyNSlB7SIMmVDuCzT3g8ac+8KvsScbKRFjxYfbUdNQNL8ZQ==}
+
+  warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+
+  watermark-js-plus@1.6.3:
+    resolution: {integrity: sha512-iCLOGf70KacIwjGF9MDViYxQcRiVwOH7l42qDHLeE2HeUsQD1EQuUC9cKRG/4SErTUmdqV3yf5WnKk2dRARHPQ==}
+
+  web-streams-polyfill@3.3.3:
+    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
+    engines: {node: '>= 8'}
+
+  webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
+  webidl-conversions@4.0.2:
+    resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
+
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+
+  whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
+  whatwg-url@7.1.0:
+    resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
+
+  when-exit@2.1.5:
+    resolution: {integrity: sha512-VGkKJ564kzt6Ms1dbgPP/yuIoQCrsFAnRbptpC5wOEsDaNsbCB2bnfnaA8i/vRs5tjUSEOtIuvl9/MyVsvQZCg==}
+
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
+  which@1.3.1:
+    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
+    hasBin: true
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  widest-line@5.0.0:
+    resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==}
+    engines: {node: '>=18'}
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  workbox-background-sync@7.4.0:
+    resolution: {integrity: sha512-8CB9OxKAgKZKyNMwfGZ1XESx89GryWTfI+V5yEj8sHjFH8MFelUwYXEyldEK6M6oKMmn807GoJFUEA1sC4XS9w==}
+
+  workbox-broadcast-update@7.4.0:
+    resolution: {integrity: sha512-+eZQwoktlvo62cI0b+QBr40v5XjighxPq3Fzo9AWMiAosmpG5gxRHgTbGGhaJv/q/MFVxwFNGh/UwHZ/8K88lA==}
+
+  workbox-build@7.4.0:
+    resolution: {integrity: sha512-Ntk1pWb0caOFIvwz/hfgrov/OJ45wPEhI5PbTywQcYjyZiVhT3UrwwUPl6TRYbTm4moaFYithYnl1lvZ8UjxcA==}
+    engines: {node: '>=20.0.0'}
+
+  workbox-cacheable-response@7.4.0:
+    resolution: {integrity: sha512-0Fb8795zg/x23ISFkAc7lbWes6vbw34DGFIMw31cwuHPgDEC/5EYm6m/ZkylLX0EnEbbOyOCLjKgFS/Z5g0HeQ==}
+
+  workbox-core@7.4.0:
+    resolution: {integrity: sha512-6BMfd8tYEnN4baG4emG9U0hdXM4gGuDU3ectXuVHnj71vwxTFI7WOpQJC4siTOlVtGqCUtj0ZQNsrvi6kZZTAQ==}
+
+  workbox-expiration@7.4.0:
+    resolution: {integrity: sha512-V50p4BxYhtA80eOvulu8xVfPBgZbkxJ1Jr8UUn0rvqjGhLDqKNtfrDfjJKnLz2U8fO2xGQJTx/SKXNTzHOjnHw==}
+
+  workbox-google-analytics@7.4.0:
+    resolution: {integrity: sha512-MVPXQslRF6YHkzGoFw1A4GIB8GrKym/A5+jYDUSL+AeJw4ytQGrozYdiZqUW1TPQHW8isBCBtyFJergUXyNoWQ==}
+
+  workbox-navigation-preload@7.4.0:
+    resolution: {integrity: sha512-etzftSgdQfjMcfPgbfaZCfM2QuR1P+4o8uCA2s4rf3chtKTq/Om7g/qvEOcZkG6v7JZOSOxVYQiOu6PbAZgU6w==}
+
+  workbox-precaching@7.4.0:
+    resolution: {integrity: sha512-VQs37T6jDqf1rTxUJZXRl3yjZMf5JX/vDPhmx2CPgDDKXATzEoqyRqhYnRoxl6Kr0rqaQlp32i9rtG5zTzIlNg==}
+
+  workbox-range-requests@7.4.0:
+    resolution: {integrity: sha512-3Vq854ZNuP6Y0KZOQWLaLC9FfM7ZaE+iuQl4VhADXybwzr4z/sMmnLgTeUZLq5PaDlcJBxYXQ3U91V7dwAIfvw==}
+
+  workbox-recipes@7.4.0:
+    resolution: {integrity: sha512-kOkWvsAn4H8GvAkwfJTbwINdv4voFoiE9hbezgB1sb/0NLyTG4rE7l6LvS8lLk5QIRIto+DjXLuAuG3Vmt3cxQ==}
+
+  workbox-routing@7.4.0:
+    resolution: {integrity: sha512-C/ooj5uBWYAhAqwmU8HYQJdOjjDKBp9MzTQ+otpMmd+q0eF59K+NuXUek34wbL0RFrIXe/KKT+tUWcZcBqxbHQ==}
+
+  workbox-strategies@7.4.0:
+    resolution: {integrity: sha512-T4hVqIi5A4mHi92+5EppMX3cLaVywDp8nsyUgJhOZxcfSV/eQofcOA6/EMo5rnTNmNTpw0rUgjAI6LaVullPpg==}
+
+  workbox-streams@7.4.0:
+    resolution: {integrity: sha512-QHPBQrey7hQbnTs5GrEVoWz7RhHJXnPT+12qqWM378orDMo5VMJLCkCM1cnCk+8Eq92lccx/VgRZ7WAzZWbSLg==}
+
+  workbox-sw@7.4.0:
+    resolution: {integrity: sha512-ltU+Kr3qWR6BtbdlMnCjobZKzeV1hN+S6UvDywBrwM19TTyqA03X66dzw1tEIdJvQ4lYKkBFox6IAEhoSEZ8Xw==}
+
+  workbox-window@7.4.0:
+    resolution: {integrity: sha512-/bIYdBLAVsNR3v7gYGaV4pQW3M3kEPx5E8vDxGvxo6khTrGtSSCS7QiFKv9ogzBgZiy0OXLP9zO28U/1nF1mfw==}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrap-ansi@9.0.2:
+    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
+    engines: {node: '>=18'}
+
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  wsl-utils@0.1.0:
+    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
+    engines: {node: '>=18'}
+
+  xdg-basedir@5.1.0:
+    resolution: {integrity: sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==}
+    engines: {node: '>=12'}
+
+  xe-utils@3.8.0:
+    resolution: {integrity: sha512-eziNd3IyxzUBAZByQhNuxcd9UUKN2yqR0w2zjPMtXWzzM3GFg6ztjRH76aSfxIZCco1o53TX3uJ7EY3jNpVo/A==}
+
+  xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
+  yaml-eslint-parser@1.3.2:
+    resolution: {integrity: sha512-odxVsHAkZYYglR30aPYRY4nUGJnoJ2y1ww2HDvZALo0BDETv9kWbi16J52eHs+PWRNmF4ub6nZqfVOeesOvntg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+
+  yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+
+  yaml@2.8.2:
+    resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
+  yargs-parser@20.2.9:
+    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
+    engines: {node: '>=10'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
+  yargs@16.2.0:
+    resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
+    engines: {node: '>=10'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yocto-queue@1.2.2:
+    resolution: {integrity: sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==}
+    engines: {node: '>=12.20'}
+
+  yoctocolors@2.1.2:
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
+  youch-core@0.3.3:
+    resolution: {integrity: sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA==}
+
+  youch@4.1.0-beta.13:
+    resolution: {integrity: sha512-3+AG1Xvt+R7M7PSDudhbfbwiyveW6B8PLBIwTyEC598biEYIjHhC89i6DBEvR0EZUjGY3uGSnC429HpIa2Z09g==}
+
+  zip-stream@6.0.1:
+    resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
+    engines: {node: '>= 14'}
+
+  zod-defaults@0.1.3:
+    resolution: {integrity: sha512-Cp4UjuVfXqwaOx8A5LlM0IRBZs8B7AXgF+XOZWF8CjMDhsY/Jki+y7VS4adVtQj9NNSsAPwylUlJp9INuxPEnA==}
+    peerDependencies:
+      zod: ^3.23.8
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+  zrender@6.0.0:
+    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
+
+  zx@8.8.5:
+    resolution: {integrity: sha512-SNgDF5L0gfN7FwVOdEFguY3orU5AkfFZm9B5YSHog/UDHv+lvmd82ZAsOenOkQixigwH2+yyH198AwNdKhj+RA==}
+    engines: {node: '>= 12.17.0'}
+    hasBin: true
+
+snapshots:
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@ant-design/colors@6.0.0':
+    dependencies:
+      '@ctrl/tinycolor': 4.2.0
+
+  '@ant-design/icons-svg@4.4.2': {}
+
+  '@ant-design/icons-vue@7.0.1(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-svg': 4.4.2
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@apideck/better-ajv-errors@0.3.6(ajv@8.17.1)':
+    dependencies:
+      ajv: 8.17.1
+      json-schema: 0.4.0
+      jsonpointer: 5.0.1
+      leven: 3.1.0
+
+  '@ast-grep/napi-darwin-arm64@0.39.9':
+    optional: true
+
+  '@ast-grep/napi-darwin-x64@0.39.9':
+    optional: true
+
+  '@ast-grep/napi-linux-arm64-gnu@0.39.9':
+    optional: true
+
+  '@ast-grep/napi-linux-arm64-musl@0.39.9':
+    optional: true
+
+  '@ast-grep/napi-linux-x64-gnu@0.39.9':
+    optional: true
+
+  '@ast-grep/napi-linux-x64-musl@0.39.9':
+    optional: true
+
+  '@ast-grep/napi-win32-arm64-msvc@0.39.9':
+    optional: true
+
+  '@ast-grep/napi-win32-ia32-msvc@0.39.9':
+    optional: true
+
+  '@ast-grep/napi-win32-x64-msvc@0.39.9':
+    optional: true
+
+  '@ast-grep/napi@0.39.9':
+    optionalDependencies:
+      '@ast-grep/napi-darwin-arm64': 0.39.9
+      '@ast-grep/napi-darwin-x64': 0.39.9
+      '@ast-grep/napi-linux-arm64-gnu': 0.39.9
+      '@ast-grep/napi-linux-arm64-musl': 0.39.9
+      '@ast-grep/napi-linux-x64-gnu': 0.39.9
+      '@ast-grep/napi-linux-x64-musl': 0.39.9
+      '@ast-grep/napi-win32-arm64-msvc': 0.39.9
+      '@ast-grep/napi-win32-ia32-msvc': 0.39.9
+      '@ast-grep/napi-win32-x64-msvc': 0.39.9
+
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.28.5': {}
+
+  '@babel/core@7.28.5':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helpers': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.28.5':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    dependencies:
+      '@babel/types': 7.28.5
+
+  '@babel/helper-compilation-targets@7.27.2':
+    dependencies:
+      '@babel/compat-data': 7.28.5
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.28.5
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-create-regexp-features-plugin@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      regexpu-core: 6.4.0
+      semver: 6.3.1
+
+  '@babel/helper-define-polyfill-provider@0.6.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-plugin-utils': 7.27.1
+      debug: 4.4.3
+      lodash.debounce: 4.0.8
+      resolve: 1.22.11
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    dependencies:
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    dependencies:
+      '@babel/types': 7.28.5
+
+  '@babel/helper-plugin-utils@7.27.1': {}
+
+  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-wrap-function': 7.28.3
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helper-wrap-function@7.28.3':
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helpers@7.28.4':
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.5
+
+  '@babel/parser@7.28.5':
+    dependencies:
+      '@babel/types': 7.28.5
+
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-proposal-decorators@7.28.0(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-syntax-decorators': 7.27.1(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+
+  '@babel/plugin-syntax-decorators@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-import-assertions@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-import-attributes@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-async-generator-functions@7.28.0(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-async-to-generator@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-block-scoped-functions@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-block-scoping@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-class-static-block@7.28.3(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-classes@7.28.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-globals': 7.28.0
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-computed-properties@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/template': 7.27.2
+
+  '@babel/plugin-transform-destructuring@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-dotall-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-duplicate-keys@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-dynamic-import@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-explicit-resource-management@7.28.0(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-exponentiation-operator@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-export-namespace-from@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-json-strings@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-literals@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-logical-assignment-operators@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-member-expression-literals@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-modules-amd@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-systemjs@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-new-target@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-numeric-separator@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-object-rest-spread@7.28.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-optional-catch-binding@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-private-property-in-object@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-property-literals@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-regexp-modifiers@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-reserved-words@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-spread@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-template-literals@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-typeof-symbol@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-typescript@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-unicode-escapes@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-unicode-property-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-unicode-sets-regex@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/preset-env@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/compat-data': 7.28.5
+      '@babel/core': 7.28.5
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-validator-option': 7.27.1
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.28.3(@babel/core@7.28.5)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-assertions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.28.5)
+      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.28.5)
+      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-class-static-block': 7.28.3(@babel/core@7.28.5)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-dotall-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-duplicate-keys': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-explicit-resource-management': 7.28.0(@babel/core@7.28.5)
+      '@babel/plugin-transform-exponentiation-operator': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-json-strings': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-logical-assignment-operators': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-systemjs': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-umd': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-new-target': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-object-rest-spread': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.5)
+      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-property-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-regexp-modifiers': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-reserved-words': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typeof-symbol': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-escapes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-property-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-sets-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.28.5)
+      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.28.5)
+      core-js-compat: 3.47.0
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/types': 7.28.5
+      esutils: 2.0.3
+
+  '@babel/preset-typescript@7.28.5(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-validator-option': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/runtime@7.28.4': {}
+
+  '@babel/template@7.27.2':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+
+  '@babel/traverse@7.28.5':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.5
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.28.5
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.5
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.28.5':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@borewit/text-codec@0.2.1': {}
+
+  '@cacheable/memory@2.0.6':
+    dependencies:
+      '@cacheable/utils': 2.3.2
+      '@keyv/bigmap': 1.3.0(keyv@5.5.5)
+      hookified: 1.14.0
+      keyv: 5.5.5
+
+  '@cacheable/utils@2.3.2':
+    dependencies:
+      hashery: 1.3.0
+      keyv: 5.5.5
+
+  '@changesets/apply-release-plan@7.0.14':
+    dependencies:
+      '@changesets/config': 3.1.2
+      '@changesets/get-version-range-type': 0.4.0
+      '@changesets/git': 3.0.4
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      detect-indent: 6.1.0
+      fs-extra: 7.0.1
+      lodash.startcase: 4.4.0
+      outdent: 0.5.0
+      prettier: 2.8.8
+      resolve-from: 5.0.0
+      semver: 7.7.3
+
+  '@changesets/assemble-release-plan@6.0.9':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      semver: 7.7.3
+
+  '@changesets/changelog-git@0.2.1':
+    dependencies:
+      '@changesets/types': 6.1.0
+
+  '@changesets/changelog-github@0.5.2':
+    dependencies:
+      '@changesets/get-github-info': 0.7.0
+      '@changesets/types': 6.1.0
+      dotenv: 8.6.0
+    transitivePeerDependencies:
+      - encoding
+
+  '@changesets/cli@2.29.8(@types/node@24.10.4)':
+    dependencies:
+      '@changesets/apply-release-plan': 7.0.14
+      '@changesets/assemble-release-plan': 6.0.9
+      '@changesets/changelog-git': 0.2.1
+      '@changesets/config': 3.1.2
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/get-release-plan': 4.0.14
+      '@changesets/git': 3.0.4
+      '@changesets/logger': 0.1.1
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.6
+      '@changesets/should-skip-package': 0.1.2
+      '@changesets/types': 6.1.0
+      '@changesets/write': 0.4.0
+      '@inquirer/external-editor': 1.0.3(@types/node@24.10.4)
+      '@manypkg/get-packages': 1.1.3
+      ansi-colors: 4.1.3
+      ci-info: 3.9.0
+      enquirer: 2.4.1
+      fs-extra: 7.0.1
+      mri: 1.2.0
+      p-limit: 2.3.0
+      package-manager-detector: 0.2.11
+      picocolors: 1.1.1
+      resolve-from: 5.0.0
+      semver: 7.7.3
+      spawndamnit: 3.0.1
+      term-size: 2.2.1
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@changesets/config@3.1.2':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.3
+      '@changesets/logger': 0.1.1
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      fs-extra: 7.0.1
+      micromatch: 4.0.8
+
+  '@changesets/errors@0.2.0':
+    dependencies:
+      extendable-error: 0.1.7
+
+  '@changesets/get-dependents-graph@2.1.3':
+    dependencies:
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      picocolors: 1.1.1
+      semver: 7.7.3
+
+  '@changesets/get-github-info@0.7.0':
+    dependencies:
+      dataloader: 1.4.0
+      node-fetch: 2.7.0
+    transitivePeerDependencies:
+      - encoding
+
+  '@changesets/get-release-plan@4.0.14':
+    dependencies:
+      '@changesets/assemble-release-plan': 6.0.9
+      '@changesets/config': 3.1.2
+      '@changesets/pre': 2.0.2
+      '@changesets/read': 0.6.6
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+
+  '@changesets/get-version-range-type@0.4.0': {}
+
+  '@changesets/git@3.0.4':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@manypkg/get-packages': 1.1.3
+      is-subdir: 1.2.0
+      micromatch: 4.0.8
+      spawndamnit: 3.0.1
+
+  '@changesets/logger@0.1.1':
+    dependencies:
+      picocolors: 1.1.1
+
+  '@changesets/parse@0.4.2':
+    dependencies:
+      '@changesets/types': 6.1.0
+      js-yaml: 4.1.1
+
+  '@changesets/pre@2.0.2':
+    dependencies:
+      '@changesets/errors': 0.2.0
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+      fs-extra: 7.0.1
+
+  '@changesets/read@0.6.6':
+    dependencies:
+      '@changesets/git': 3.0.4
+      '@changesets/logger': 0.1.1
+      '@changesets/parse': 0.4.2
+      '@changesets/types': 6.1.0
+      fs-extra: 7.0.1
+      p-filter: 2.1.0
+      picocolors: 1.1.1
+
+  '@changesets/should-skip-package@0.1.2':
+    dependencies:
+      '@changesets/types': 6.1.0
+      '@manypkg/get-packages': 1.1.3
+
+  '@changesets/types@4.1.0': {}
+
+  '@changesets/types@6.1.0': {}
+
+  '@changesets/write@0.4.0':
+    dependencies:
+      '@changesets/types': 6.1.0
+      fs-extra: 7.0.1
+      human-id: 4.1.3
+      prettier: 2.8.8
+
+  '@clack/core@0.5.0':
+    dependencies:
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+
+  '@clack/prompts@0.11.0':
+    dependencies:
+      '@clack/core': 0.5.0
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+
+  '@cloudflare/kv-asset-handler@0.4.1':
+    dependencies:
+      mime: 3.0.0
+
+  '@commitlint/cli@19.8.1(@types/node@25.0.3)(typescript@5.9.3)':
+    dependencies:
+      '@commitlint/format': 19.8.1
+      '@commitlint/lint': 19.8.1
+      '@commitlint/load': 19.8.1(@types/node@25.0.3)(typescript@5.9.3)
+      '@commitlint/read': 19.8.1
+      '@commitlint/types': 19.8.1
+      tinyexec: 1.0.2
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  '@commitlint/config-conventional@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      conventional-changelog-conventionalcommits: 7.0.2
+
+  '@commitlint/config-validator@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      ajv: 8.17.1
+
+  '@commitlint/ensure@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      lodash.camelcase: 4.3.0
+      lodash.kebabcase: 4.1.1
+      lodash.snakecase: 4.1.1
+      lodash.startcase: 4.4.0
+      lodash.upperfirst: 4.3.1
+
+  '@commitlint/execute-rule@19.8.1': {}
+
+  '@commitlint/format@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      chalk: 5.6.2
+
+  '@commitlint/is-ignored@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      semver: 7.7.3
+
+  '@commitlint/lint@19.8.1':
+    dependencies:
+      '@commitlint/is-ignored': 19.8.1
+      '@commitlint/parse': 19.8.1
+      '@commitlint/rules': 19.8.1
+      '@commitlint/types': 19.8.1
+
+  '@commitlint/load@19.8.1(@types/node@25.0.3)(typescript@5.9.3)':
+    dependencies:
+      '@commitlint/config-validator': 19.8.1
+      '@commitlint/execute-rule': 19.8.1
+      '@commitlint/resolve-extends': 19.8.1
+      '@commitlint/types': 19.8.1
+      chalk: 5.6.2
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      cosmiconfig-typescript-loader: 6.2.0(@types/node@25.0.3)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3)
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      lodash.uniq: 4.5.0
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  '@commitlint/message@19.8.1': {}
+
+  '@commitlint/parse@19.8.1':
+    dependencies:
+      '@commitlint/types': 19.8.1
+      conventional-changelog-angular: 7.0.0
+      conventional-commits-parser: 5.0.0
+
+  '@commitlint/read@19.8.1':
+    dependencies:
+      '@commitlint/top-level': 19.8.1
+      '@commitlint/types': 19.8.1
+      git-raw-commits: 4.0.0
+      minimist: 1.2.8
+      tinyexec: 1.0.2
+
+  '@commitlint/resolve-extends@19.8.1':
+    dependencies:
+      '@commitlint/config-validator': 19.8.1
+      '@commitlint/types': 19.8.1
+      global-directory: 4.0.1
+      import-meta-resolve: 4.2.0
+      lodash.mergewith: 4.6.2
+      resolve-from: 5.0.0
+
+  '@commitlint/rules@19.8.1':
+    dependencies:
+      '@commitlint/ensure': 19.8.1
+      '@commitlint/message': 19.8.1
+      '@commitlint/to-lines': 19.8.1
+      '@commitlint/types': 19.8.1
+
+  '@commitlint/to-lines@19.8.1': {}
+
+  '@commitlint/top-level@19.8.1':
+    dependencies:
+      find-up: 7.0.0
+
+  '@commitlint/types@19.8.1':
+    dependencies:
+      '@types/conventional-commits-parser': 5.0.2
+      chalk: 5.6.2
+
+  '@cspell/cspell-bundled-dicts@8.19.4':
+    dependencies:
+      '@cspell/dict-ada': 4.1.1
+      '@cspell/dict-al': 1.1.1
+      '@cspell/dict-aws': 4.0.17
+      '@cspell/dict-bash': 4.2.2
+      '@cspell/dict-companies': 3.2.9
+      '@cspell/dict-cpp': 6.0.15
+      '@cspell/dict-cryptocurrencies': 5.0.5
+      '@cspell/dict-csharp': 4.0.8
+      '@cspell/dict-css': 4.0.19
+      '@cspell/dict-dart': 2.3.2
+      '@cspell/dict-data-science': 2.0.13
+      '@cspell/dict-django': 4.1.6
+      '@cspell/dict-docker': 1.1.17
+      '@cspell/dict-dotnet': 5.0.10
+      '@cspell/dict-elixir': 4.0.8
+      '@cspell/dict-en-common-misspellings': 2.1.10
+      '@cspell/dict-en-gb': 1.1.33
+      '@cspell/dict-en_us': 4.4.26
+      '@cspell/dict-filetypes': 3.0.15
+      '@cspell/dict-flutter': 1.1.1
+      '@cspell/dict-fonts': 4.0.5
+      '@cspell/dict-fsharp': 1.1.1
+      '@cspell/dict-fullstack': 3.2.7
+      '@cspell/dict-gaming-terms': 1.1.2
+      '@cspell/dict-git': 3.0.7
+      '@cspell/dict-golang': 6.0.25
+      '@cspell/dict-google': 1.0.9
+      '@cspell/dict-haskell': 4.0.6
+      '@cspell/dict-html': 4.0.14
+      '@cspell/dict-html-symbol-entities': 4.0.5
+      '@cspell/dict-java': 5.0.12
+      '@cspell/dict-julia': 1.1.1
+      '@cspell/dict-k8s': 1.0.12
+      '@cspell/dict-kotlin': 1.1.1
+      '@cspell/dict-latex': 4.0.4
+      '@cspell/dict-lorem-ipsum': 4.0.5
+      '@cspell/dict-lua': 4.0.8
+      '@cspell/dict-makefile': 1.0.5
+      '@cspell/dict-markdown': 2.0.14(@cspell/dict-css@4.0.19)(@cspell/dict-html-symbol-entities@4.0.5)(@cspell/dict-html@4.0.14)(@cspell/dict-typescript@3.2.3)
+      '@cspell/dict-monkeyc': 1.0.12
+      '@cspell/dict-node': 5.0.8
+      '@cspell/dict-npm': 5.2.27
+      '@cspell/dict-php': 4.1.0
+      '@cspell/dict-powershell': 5.0.15
+      '@cspell/dict-public-licenses': 2.0.15
+      '@cspell/dict-python': 4.2.24
+      '@cspell/dict-r': 2.1.1
+      '@cspell/dict-ruby': 5.0.9
+      '@cspell/dict-rust': 4.1.0
+      '@cspell/dict-scala': 5.0.8
+      '@cspell/dict-shell': 1.1.2
+      '@cspell/dict-software-terms': 5.1.18
+      '@cspell/dict-sql': 2.2.1
+      '@cspell/dict-svelte': 1.0.7
+      '@cspell/dict-swift': 2.0.6
+      '@cspell/dict-terraform': 1.1.3
+      '@cspell/dict-typescript': 3.2.3
+      '@cspell/dict-vue': 3.0.5
+
+  '@cspell/cspell-json-reporter@8.19.4':
+    dependencies:
+      '@cspell/cspell-types': 8.19.4
+
+  '@cspell/cspell-pipe@8.19.4': {}
+
+  '@cspell/cspell-resolver@8.19.4':
+    dependencies:
+      global-directory: 4.0.1
+
+  '@cspell/cspell-service-bus@8.19.4': {}
+
+  '@cspell/cspell-types@8.19.4': {}
+
+  '@cspell/dict-ada@4.1.1': {}
+
+  '@cspell/dict-al@1.1.1': {}
+
+  '@cspell/dict-aws@4.0.17': {}
+
+  '@cspell/dict-bash@4.2.2':
+    dependencies:
+      '@cspell/dict-shell': 1.1.2
+
+  '@cspell/dict-companies@3.2.9': {}
+
+  '@cspell/dict-cpp@6.0.15': {}
+
+  '@cspell/dict-cryptocurrencies@5.0.5': {}
+
+  '@cspell/dict-csharp@4.0.8': {}
+
+  '@cspell/dict-css@4.0.19': {}
+
+  '@cspell/dict-dart@2.3.2': {}
+
+  '@cspell/dict-data-science@2.0.13': {}
+
+  '@cspell/dict-django@4.1.6': {}
+
+  '@cspell/dict-docker@1.1.17': {}
+
+  '@cspell/dict-dotnet@5.0.10': {}
+
+  '@cspell/dict-elixir@4.0.8': {}
+
+  '@cspell/dict-en-common-misspellings@2.1.10': {}
+
+  '@cspell/dict-en-gb@1.1.33': {}
+
+  '@cspell/dict-en_us@4.4.26': {}
+
+  '@cspell/dict-filetypes@3.0.15': {}
+
+  '@cspell/dict-flutter@1.1.1': {}
+
+  '@cspell/dict-fonts@4.0.5': {}
+
+  '@cspell/dict-fsharp@1.1.1': {}
+
+  '@cspell/dict-fullstack@3.2.7': {}
+
+  '@cspell/dict-gaming-terms@1.1.2': {}
+
+  '@cspell/dict-git@3.0.7': {}
+
+  '@cspell/dict-golang@6.0.25': {}
+
+  '@cspell/dict-google@1.0.9': {}
+
+  '@cspell/dict-haskell@4.0.6': {}
+
+  '@cspell/dict-html-symbol-entities@4.0.5': {}
+
+  '@cspell/dict-html@4.0.14': {}
+
+  '@cspell/dict-java@5.0.12': {}
+
+  '@cspell/dict-julia@1.1.1': {}
+
+  '@cspell/dict-k8s@1.0.12': {}
+
+  '@cspell/dict-kotlin@1.1.1': {}
+
+  '@cspell/dict-latex@4.0.4': {}
+
+  '@cspell/dict-lorem-ipsum@4.0.5': {}
+
+  '@cspell/dict-lua@4.0.8': {}
+
+  '@cspell/dict-makefile@1.0.5': {}
+
+  '@cspell/dict-markdown@2.0.14(@cspell/dict-css@4.0.19)(@cspell/dict-html-symbol-entities@4.0.5)(@cspell/dict-html@4.0.14)(@cspell/dict-typescript@3.2.3)':
+    dependencies:
+      '@cspell/dict-css': 4.0.19
+      '@cspell/dict-html': 4.0.14
+      '@cspell/dict-html-symbol-entities': 4.0.5
+      '@cspell/dict-typescript': 3.2.3
+
+  '@cspell/dict-monkeyc@1.0.12': {}
+
+  '@cspell/dict-node@5.0.8': {}
+
+  '@cspell/dict-npm@5.2.27': {}
+
+  '@cspell/dict-php@4.1.0': {}
+
+  '@cspell/dict-powershell@5.0.15': {}
+
+  '@cspell/dict-public-licenses@2.0.15': {}
+
+  '@cspell/dict-python@4.2.24':
+    dependencies:
+      '@cspell/dict-data-science': 2.0.13
+
+  '@cspell/dict-r@2.1.1': {}
+
+  '@cspell/dict-ruby@5.0.9': {}
+
+  '@cspell/dict-rust@4.1.0': {}
+
+  '@cspell/dict-scala@5.0.8': {}
+
+  '@cspell/dict-shell@1.1.2': {}
+
+  '@cspell/dict-software-terms@5.1.18': {}
+
+  '@cspell/dict-sql@2.2.1': {}
+
+  '@cspell/dict-svelte@1.0.7': {}
+
+  '@cspell/dict-swift@2.0.6': {}
+
+  '@cspell/dict-terraform@1.1.3': {}
+
+  '@cspell/dict-typescript@3.2.3': {}
+
+  '@cspell/dict-vue@3.0.5': {}
+
+  '@cspell/dynamic-import@8.19.4':
+    dependencies:
+      '@cspell/url': 8.19.4
+      import-meta-resolve: 4.2.0
+
+  '@cspell/filetypes@8.19.4': {}
+
+  '@cspell/strong-weak-map@8.19.4': {}
+
+  '@cspell/url@8.19.4': {}
+
+  '@csstools/cascade-layer-name-parser@2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/color-helpers@5.1.0': {}
+
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-syntax-patches-for-csstree@1.0.22': {}
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
+  '@csstools/media-query-list-parser@3.0.1(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/postcss-alpha-function@1.0.1(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-cascade-layers@5.0.2(postcss@8.5.6)':
+    dependencies:
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  '@csstools/postcss-color-function-display-p3-linear@1.0.1(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-color-function@4.0.12(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-color-mix-function@3.0.12(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-color-mix-variadic-function-arguments@1.0.2(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-content-alt-text@2.0.8(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-contrast-color-function@2.0.12(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-exponential-functions@2.0.9(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      postcss: 8.5.6
+
+  '@csstools/postcss-font-format-keywords@4.0.0(postcss@8.5.6)':
+    dependencies:
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  '@csstools/postcss-gamut-mapping@2.0.11(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      postcss: 8.5.6
+
+  '@csstools/postcss-gradients-interpolation-method@5.0.12(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-hwb-function@4.0.12(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-ic-unit@4.0.4(postcss@8.5.6)':
+    dependencies:
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  '@csstools/postcss-initial@2.0.1(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+
+  '@csstools/postcss-is-pseudo-class@5.0.3(postcss@8.5.6)':
+    dependencies:
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  '@csstools/postcss-light-dark-function@2.0.11(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-logical-float-and-clear@3.0.0(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+
+  '@csstools/postcss-logical-overflow@2.0.0(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+
+  '@csstools/postcss-logical-overscroll-behavior@2.0.0(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+
+  '@csstools/postcss-logical-resize@3.0.0(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  '@csstools/postcss-logical-viewport-units@3.0.4(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-media-minmax@2.0.9(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      postcss: 8.5.6
+
+  '@csstools/postcss-media-queries-aspect-ratio-number-values@3.0.5(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      postcss: 8.5.6
+
+  '@csstools/postcss-nested-calc@4.0.0(postcss@8.5.6)':
+    dependencies:
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  '@csstools/postcss-normalize-display-values@4.0.0(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  '@csstools/postcss-oklab-function@4.0.12(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-position-area-property@1.0.0(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+
+  '@csstools/postcss-progressive-custom-properties@4.2.1(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  '@csstools/postcss-random-function@2.0.1(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      postcss: 8.5.6
+
+  '@csstools/postcss-relative-color-syntax@3.0.12(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  '@csstools/postcss-sign-functions@1.1.4(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      postcss: 8.5.6
+
+  '@csstools/postcss-stepped-value-functions@4.0.9(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      postcss: 8.5.6
+
+  '@csstools/postcss-system-ui-font-family@1.0.0(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      postcss: 8.5.6
+
+  '@csstools/postcss-text-decoration-shorthand@4.0.3(postcss@8.5.6)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  '@csstools/postcss-trigonometric-functions@4.0.9(postcss@8.5.6)':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      postcss: 8.5.6
+
+  '@csstools/postcss-unset-value@4.0.0(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+
+  '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.1)':
+    dependencies:
+      postcss-selector-parser: 7.1.1
+
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.1)':
+    dependencies:
+      postcss-selector-parser: 7.1.1
+
+  '@csstools/utilities@2.0.0(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+
+  '@ctrl/tinycolor@4.2.0': {}
+
+  '@dual-bundle/import-meta-resolve@4.2.1': {}
+
+  '@emnapi/core@1.7.1':
+    dependencies:
+      '@emnapi/wasi-threads': 1.1.0
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.7.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.1.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emotion/hash@0.9.2': {}
+
+  '@emotion/unitless@0.8.1': {}
+
+  '@es-joy/jsdoccomment@0.76.0':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@typescript-eslint/types': 8.50.1
+      comment-parser: 1.4.1
+      esquery: 1.6.0
+      jsdoc-type-pratt-parser: 6.10.0
+
+  '@es-joy/jsdoccomment@0.78.0':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@typescript-eslint/types': 8.50.1
+      comment-parser: 1.4.1
+      esquery: 1.6.0
+      jsdoc-type-pratt-parser: 7.0.0
+
+  '@es-joy/resolve.exports@1.2.0': {}
+
+  '@esbuild/aix-ppc64@0.25.3':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.3':
+    optional: true
+
+  '@esbuild/android-arm@0.25.3':
+    optional: true
+
+  '@esbuild/android-x64@0.25.3':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.3':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.3':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.3':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.3':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.3':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.3':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.3':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.3':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.3':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.3':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.3':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.3':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.3':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.3':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.3':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.3':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.3':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.3':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.3':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.3':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.3':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.2(jiti@2.6.1))':
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.21.1':
+    dependencies:
+      '@eslint/object-schema': 2.1.7
+      debug: 4.4.3
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.4.2':
+    dependencies:
+      '@eslint/core': 0.17.0
+
+  '@eslint/core@0.17.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.3':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.3
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.39.2': {}
+
+  '@eslint/object-schema@2.1.7': {}
+
+  '@eslint/plugin-kit@0.4.1':
+    dependencies:
+      '@eslint/core': 0.17.0
+      levn: 0.4.1
+
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@floating-ui/vue@1.1.9(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@floating-ui/utils': 0.2.10
+      vue-demi: 0.14.10(vue@3.5.26(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@highlightjs/vue-plugin@2.1.0(highlight.js@11.11.1)(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      highlight.js: 11.11.1
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@iconify/icons-ant-design@1.2.7':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/icons-arcticons@1.2.77':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/icons-fa-brands@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/icons-flat-color-icons@1.2.5':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/icons-la@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/icons-logos@1.2.36':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/icons-ri@1.2.10':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/icons-simple-icons@1.2.74':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/icons-uiw@1.2.6':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/json@2.2.417':
+    dependencies:
+      '@iconify/types': 2.0.0
+      pathe: 2.0.3
+
+  '@iconify/tailwind@1.2.0':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/vue@5.0.0(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@inquirer/external-editor@1.0.3(@types/node@24.10.4)':
+    dependencies:
+      chardet: 2.1.1
+      iconv-lite: 0.7.1
+    optionalDependencies:
+      '@types/node': 24.10.4
+
+  '@internationalized/date@3.10.1':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@internationalized/number@3.6.5':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@intlify/bundle-utils@10.0.1(vue-i18n@11.2.7(vue@3.5.26(typescript@5.9.3)))':
+    dependencies:
+      '@intlify/message-compiler': 11.2.7
+      '@intlify/shared': 11.2.7
+      acorn: 8.15.0
+      escodegen: 2.1.0
+      estree-walker: 2.0.2
+      jsonc-eslint-parser: 2.4.2
+      mlly: 1.8.0
+      source-map-js: 1.2.1
+      yaml-eslint-parser: 1.3.2
+    optionalDependencies:
+      vue-i18n: 11.2.7(vue@3.5.26(typescript@5.9.3))
+
+  '@intlify/core-base@11.2.7':
+    dependencies:
+      '@intlify/message-compiler': 11.2.7
+      '@intlify/shared': 11.2.7
+
+  '@intlify/message-compiler@11.2.7':
+    dependencies:
+      '@intlify/shared': 11.2.7
+      source-map-js: 1.2.1
+
+  '@intlify/shared@11.2.7': {}
+
+  '@intlify/unplugin-vue-i18n@6.0.8(@vue/compiler-dom@3.5.26)(eslint@9.39.2(jiti@2.6.1))(rollup@4.54.0)(typescript@5.9.3)(vue-i18n@11.2.7(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      '@intlify/bundle-utils': 10.0.1(vue-i18n@11.2.7(vue@3.5.26(typescript@5.9.3)))
+      '@intlify/shared': 11.2.7
+      '@intlify/vue-i18n-extensions': 8.0.0(@intlify/shared@11.2.7)(@vue/compiler-dom@3.5.26)(vue-i18n@11.2.7(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+      '@typescript-eslint/scope-manager': 8.50.1
+      '@typescript-eslint/typescript-estree': 8.50.1(typescript@5.9.3)
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      js-yaml: 4.1.1
+      json5: 2.2.3
+      pathe: 1.1.2
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+      unplugin: 1.16.1
+      vue: 3.5.26(typescript@5.9.3)
+    optionalDependencies:
+      vue-i18n: 11.2.7(vue@3.5.26(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/compiler-dom'
+      - eslint
+      - rollup
+      - supports-color
+      - typescript
+
+  '@intlify/vue-i18n-extensions@8.0.0(@intlify/shared@11.2.7)(@vue/compiler-dom@3.5.26)(vue-i18n@11.2.7(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@babel/parser': 7.28.5
+    optionalDependencies:
+      '@intlify/shared': 11.2.7
+      '@vue/compiler-dom': 3.5.26
+      vue: 3.5.26(typescript@5.9.3)
+      vue-i18n: 11.2.7(vue@3.5.26(typescript@5.9.3))
+
+  '@ioredis/commands@1.4.0': {}
+
+  '@isaacs/balanced-match@4.0.1': {}
+
+  '@isaacs/brace-expansion@5.0.0':
+    dependencies:
+      '@isaacs/balanced-match': 4.0.1
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.2
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/source-map@0.3.11':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@jspm/generator@2.8.0':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-typescript': 7.28.5(@babel/core@7.28.5)
+      '@jspm/import-map': 1.2.2
+      es-module-lexer: 1.7.0
+      minimatch: 10.1.1
+      node-fetch-cache: 5.1.0
+      pako: 2.1.0
+      sver: 1.8.4
+      tar-stream: 3.1.7
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+      - supports-color
+
+  '@jspm/import-map@1.2.2': {}
+
+  '@keyv/bigmap@1.3.0(keyv@5.5.5)':
+    dependencies:
+      hashery: 1.3.0
+      hookified: 1.14.0
+      keyv: 5.5.5
+
+  '@keyv/serialize@1.1.1': {}
+
+  '@manypkg/find-root@1.1.0':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@types/node': 12.20.55
+      find-up: 4.1.0
+      fs-extra: 8.1.0
+
+  '@manypkg/find-root@3.1.0':
+    dependencies:
+      '@manypkg/tools': 2.1.0
+
+  '@manypkg/get-packages@1.1.3':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@changesets/types': 4.1.0
+      '@manypkg/find-root': 1.1.0
+      fs-extra: 8.1.0
+      globby: 11.1.0
+      read-yaml-file: 1.1.0
+
+  '@manypkg/get-packages@3.1.0':
+    dependencies:
+      '@manypkg/find-root': 3.1.0
+      '@manypkg/tools': 2.1.0
+
+  '@manypkg/tools@2.1.0':
+    dependencies:
+      jju: 1.4.0
+      js-yaml: 4.1.1
+      tinyglobby: 0.2.15
+
+  '@mapbox/node-pre-gyp@2.0.3':
+    dependencies:
+      consola: 3.4.2
+      detect-libc: 2.1.2
+      https-proxy-agent: 7.0.6
+      node-fetch: 2.7.0
+      nopt: 8.1.0
+      semver: 7.7.3
+      tar: 7.5.2
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
+  '@microsoft/api-extractor-model@7.32.2(@types/node@25.0.3)':
+    dependencies:
+      '@microsoft/tsdoc': 0.16.0
+      '@microsoft/tsdoc-config': 0.18.0
+      '@rushstack/node-core-library': 5.19.1(@types/node@25.0.3)
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@microsoft/api-extractor@7.55.2(@types/node@25.0.3)':
+    dependencies:
+      '@microsoft/api-extractor-model': 7.32.2(@types/node@25.0.3)
+      '@microsoft/tsdoc': 0.16.0
+      '@microsoft/tsdoc-config': 0.18.0
+      '@rushstack/node-core-library': 5.19.1(@types/node@25.0.3)
+      '@rushstack/rig-package': 0.6.0
+      '@rushstack/terminal': 0.19.5(@types/node@25.0.3)
+      '@rushstack/ts-command-line': 5.1.5(@types/node@25.0.3)
+      diff: 8.0.2
+      lodash: 4.17.21
+      minimatch: 10.0.3
+      resolve: 1.22.11
+      semver: 7.5.4
+      source-map: 0.6.1
+      typescript: 5.8.2
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@microsoft/tsdoc-config@0.18.0':
+    dependencies:
+      '@microsoft/tsdoc': 0.16.0
+      ajv: 8.12.0
+      jju: 1.4.0
+      resolve: 1.22.11
+
+  '@microsoft/tsdoc@0.16.0': {}
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    dependencies:
+      '@emnapi/core': 1.7.1
+      '@emnapi/runtime': 1.7.1
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@npmcli/fs@5.0.0':
+    dependencies:
+      semver: 7.7.3
+
+  '@nuxt/kit@3.20.2(magicast@0.5.1)':
+    dependencies:
+      c12: 3.3.3(magicast@0.5.1)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.8
+      ignore: 7.0.5
+      jiti: 2.6.1
+      klona: 2.0.6
+      knitwork: 1.3.0
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+      scule: 1.3.0
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ufo: 1.6.1
+      unctx: 2.5.0
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+    optional: true
+
+  '@nuxt/kit@4.2.2(magicast@0.5.1)':
+    dependencies:
+      c12: 3.3.3(magicast@0.5.1)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.8
+      ignore: 7.0.5
+      jiti: 2.6.1
+      klona: 2.0.6
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+      scule: 1.3.0
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ufo: 1.6.1
+      unctx: 2.5.0
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+    optional: true
+
+  '@one-ini/wasm@0.1.1': {}
+
+  '@parcel/watcher-android-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.1':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.1':
+    optional: true
+
+  '@parcel/watcher-wasm@2.5.1':
+    dependencies:
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+
+  '@parcel/watcher-win32-arm64@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.1':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.1':
+    optional: true
+
+  '@parcel/watcher@2.5.1':
+    dependencies:
+      detect-libc: 1.0.3
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      node-addon-api: 7.1.1
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.1
+      '@parcel/watcher-darwin-arm64': 2.5.1
+      '@parcel/watcher-darwin-x64': 2.5.1
+      '@parcel/watcher-freebsd-x64': 2.5.1
+      '@parcel/watcher-linux-arm-glibc': 2.5.1
+      '@parcel/watcher-linux-arm-musl': 2.5.1
+      '@parcel/watcher-linux-arm64-glibc': 2.5.1
+      '@parcel/watcher-linux-arm64-musl': 2.5.1
+      '@parcel/watcher-linux-x64-glibc': 2.5.1
+      '@parcel/watcher-linux-x64-musl': 2.5.1
+      '@parcel/watcher-win32-arm64': 2.5.1
+      '@parcel/watcher-win32-ia32': 2.5.1
+      '@parcel/watcher-win32-x64': 2.5.1
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@pkgr/core@0.2.9': {}
+
+  '@playwright/test@1.57.0':
+    dependencies:
+      playwright: 1.57.0
+
+  '@pnpm/config.env-replace@1.1.0': {}
+
+  '@pnpm/constants@1001.3.1': {}
+
+  '@pnpm/error@1000.0.5':
+    dependencies:
+      '@pnpm/constants': 1001.3.1
+
+  '@pnpm/network.ca-file@1.0.2':
+    dependencies:
+      graceful-fs: 4.2.10
+
+  '@pnpm/npm-conf@2.3.1':
+    dependencies:
+      '@pnpm/config.env-replace': 1.1.0
+      '@pnpm/network.ca-file': 1.0.2
+      config-chain: 1.1.13
+
+  '@pnpm/types@1001.2.0': {}
+
+  '@pnpm/workspace.read-manifest@1000.2.9':
+    dependencies:
+      '@pnpm/constants': 1001.3.1
+      '@pnpm/error': 1000.0.5
+      '@pnpm/types': 1001.2.0
+      read-yaml-file: 2.1.0
+
+  '@polka/url@1.0.0-next.29': {}
+
+  '@popperjs/core@2.11.8': {}
+
+  '@poppinss/colors@4.1.6':
+    dependencies:
+      kleur: 4.1.5
+
+  '@poppinss/dumper@0.6.5':
+    dependencies:
+      '@poppinss/colors': 4.1.6
+      '@sindresorhus/is': 7.1.1
+      supports-color: 10.2.2
+
+  '@poppinss/exception@1.2.3': {}
+
+  '@publint/pack@0.1.2': {}
+
+  '@rolldown/pluginutils@1.0.0-beta.53': {}
+
+  '@rolldown/pluginutils@1.0.0-beta.57': {}
+
+  '@rollup/plugin-alias@5.1.1(rollup@4.54.0)':
+    optionalDependencies:
+      rollup: 4.54.0
+
+  '@rollup/plugin-babel@5.3.1(@babel/core@7.28.5)(rollup@2.79.2)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@rollup/pluginutils': 3.1.0(rollup@2.79.2)
+      rollup: 2.79.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@rollup/plugin-commonjs@28.0.9(rollup@4.54.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      fdir: 6.5.0(picomatch@4.0.3)
+      is-reference: 1.2.1
+      magic-string: 0.30.21
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.54.0
+
+  '@rollup/plugin-inject@5.0.5(rollup@4.54.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+    optionalDependencies:
+      rollup: 4.54.0
+
+  '@rollup/plugin-json@6.1.0(rollup@4.54.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+    optionalDependencies:
+      rollup: 4.54.0
+
+  '@rollup/plugin-node-resolve@15.3.1(rollup@2.79.2)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@2.79.2)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-module: 1.0.0
+      resolve: 1.22.11
+    optionalDependencies:
+      rollup: 2.79.2
+
+  '@rollup/plugin-node-resolve@16.0.3(rollup@4.54.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-module: 1.0.0
+      resolve: 1.22.11
+    optionalDependencies:
+      rollup: 4.54.0
+
+  '@rollup/plugin-replace@2.4.2(rollup@2.79.2)':
+    dependencies:
+      '@rollup/pluginutils': 3.1.0(rollup@2.79.2)
+      magic-string: 0.25.9
+      rollup: 2.79.2
+
+  '@rollup/plugin-replace@6.0.3(rollup@4.54.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+      magic-string: 0.30.21
+    optionalDependencies:
+      rollup: 4.54.0
+
+  '@rollup/plugin-terser@0.4.4(rollup@2.79.2)':
+    dependencies:
+      serialize-javascript: 6.0.2
+      smob: 1.5.0
+      terser: 5.44.1
+    optionalDependencies:
+      rollup: 2.79.2
+
+  '@rollup/plugin-terser@0.4.4(rollup@4.54.0)':
+    dependencies:
+      serialize-javascript: 6.0.2
+      smob: 1.5.0
+      terser: 5.44.1
+    optionalDependencies:
+      rollup: 4.54.0
+
+  '@rollup/pluginutils@3.1.0(rollup@2.79.2)':
+    dependencies:
+      '@types/estree': 0.0.39
+      estree-walker: 1.0.1
+      picomatch: 2.3.1
+      rollup: 2.79.2
+
+  '@rollup/pluginutils@4.2.1':
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+
+  '@rollup/pluginutils@5.3.0(rollup@2.79.2)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 2.79.2
+
+  '@rollup/pluginutils@5.3.0(rollup@4.54.0)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.54.0
+
+  '@rollup/rollup-android-arm-eabi@4.54.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.54.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.54.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.54.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.54.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.54.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.54.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.54.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.54.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.54.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.54.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.54.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.54.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.54.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.54.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.54.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.54.0':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.54.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.54.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.54.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.54.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.54.0':
+    optional: true
+
+  '@rushstack/node-core-library@5.19.1(@types/node@25.0.3)':
+    dependencies:
+      ajv: 8.13.0
+      ajv-draft-04: 1.0.0(ajv@8.13.0)
+      ajv-formats: 3.0.1(ajv@8.13.0)
+      fs-extra: 11.3.3
+      import-lazy: 4.0.0
+      jju: 1.4.0
+      resolve: 1.22.11
+      semver: 7.5.4
+    optionalDependencies:
+      '@types/node': 25.0.3
+
+  '@rushstack/problem-matcher@0.1.1(@types/node@25.0.3)':
+    optionalDependencies:
+      '@types/node': 25.0.3
+
+  '@rushstack/rig-package@0.6.0':
+    dependencies:
+      resolve: 1.22.11
+      strip-json-comments: 3.1.1
+
+  '@rushstack/terminal@0.19.5(@types/node@25.0.3)':
+    dependencies:
+      '@rushstack/node-core-library': 5.19.1(@types/node@25.0.3)
+      '@rushstack/problem-matcher': 0.1.1(@types/node@25.0.3)
+      supports-color: 8.1.1
+    optionalDependencies:
+      '@types/node': 25.0.3
+
+  '@rushstack/ts-command-line@5.1.5(@types/node@25.0.3)':
+    dependencies:
+      '@rushstack/terminal': 0.19.5(@types/node@25.0.3)
+      '@types/argparse': 1.0.38
+      argparse: 1.0.10
+      string-argv: 0.3.2
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@sec-ant/readable-stream@0.4.1': {}
+
+  '@simonwep/pickr@1.8.2':
+    dependencies:
+      core-js: 3.47.0
+      nanopop: 2.4.2
+
+  '@sindresorhus/base62@1.0.0': {}
+
+  '@sindresorhus/is@7.1.1': {}
+
+  '@sindresorhus/merge-streams@4.0.0': {}
+
+  '@speed-highlight/core@1.2.12': {}
+
+  '@stylistic/stylelint-plugin@3.1.3(stylelint@16.26.1(typescript@5.9.3))':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/media-query-list-parser': 3.0.1(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      is-plain-object: 5.0.0
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+      postcss-value-parser: 4.2.0
+      style-search: 0.1.0
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  '@surma/rollup-plugin-off-main-thread@2.2.3':
+    dependencies:
+      ejs: 3.1.10
+      json5: 2.2.3
+      magic-string: 0.25.9
+      string.prototype.matchall: 4.0.12
+
+  '@swc/helpers@0.5.17':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tailwindcss/nesting@0.0.0-insiders.565cd3e(postcss@8.5.6)':
+    dependencies:
+      postcss: 8.5.6
+      postcss-nested: 5.0.6(postcss@8.5.6)
+
+  '@tailwindcss/typography@0.5.19(tailwindcss@3.4.19(yaml@2.8.2))':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.19(yaml@2.8.2)
+
+  '@tanstack/store@0.8.0': {}
+
+  '@tanstack/virtual-core@3.13.13': {}
+
+  '@tanstack/vue-store@0.8.0(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@tanstack/store': 0.8.0
+      vue: 3.5.26(typescript@5.9.3)
+      vue-demi: 0.14.10(vue@3.5.26(typescript@5.9.3))
+
+  '@tanstack/vue-virtual@3.13.13(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.13
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@tinymce/tinymce-vue@6.3.0(tinymce@7.9.1)(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.26(typescript@5.9.3)
+    optionalDependencies:
+      tinymce: 7.9.1
+
+  '@tokenizer/token@0.3.0': {}
+
+  '@tybys/wasm-util@0.10.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/archiver@6.0.4':
+    dependencies:
+      '@types/readdir-glob': 1.1.5
+
+  '@types/argparse@1.0.38': {}
+
+  '@types/bintrees@1.0.6': {}
+
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
+  '@types/conventional-commits-parser@5.0.2':
+    dependencies:
+      '@types/node': 25.0.3
+
+  '@types/deep-eql@4.0.2': {}
+
+  '@types/eslint@9.6.1':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+
+  '@types/estree@0.0.39': {}
+
+  '@types/estree@1.0.8': {}
+
+  '@types/html-minifier-terser@7.0.2': {}
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.21
+
+  '@types/lodash.clonedeep@4.5.9':
+    dependencies:
+      '@types/lodash': 4.17.21
+
+  '@types/lodash.get@4.4.9':
+    dependencies:
+      '@types/lodash': 4.17.21
+
+  '@types/lodash.isequal@4.5.8':
+    dependencies:
+      '@types/lodash': 4.17.21
+
+  '@types/lodash.set@4.3.9':
+    dependencies:
+      '@types/lodash': 4.17.21
+
+  '@types/lodash@4.17.21': {}
+
+  '@types/minimatch@3.0.5': {}
+
+  '@types/node@12.20.55': {}
+
+  '@types/node@24.10.4':
+    dependencies:
+      undici-types: 7.16.0
+
+  '@types/node@25.0.3':
+    dependencies:
+      undici-types: 7.16.0
+
+  '@types/nprogress@0.2.3': {}
+
+  '@types/parse-json@4.0.2': {}
+
+  '@types/postcss-import@14.0.3':
+    dependencies:
+      postcss: 8.5.6
+
+  '@types/qrcode@1.5.6':
+    dependencies:
+      '@types/node': 25.0.3
+
+  '@types/qs@6.14.0': {}
+
+  '@types/readdir-glob@1.1.5':
+    dependencies:
+      '@types/node': 25.0.3
+
+  '@types/resolve@1.20.2': {}
+
+  '@types/sortablejs@1.15.9': {}
+
+  '@types/trusted-types@2.0.7': {}
+
+  '@types/web-bluetooth@0.0.21': {}
+
+  '@typescript-eslint/eslint-plugin@8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.50.1
+      '@typescript-eslint/type-utils': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.50.1
+      eslint: 9.39.2(jiti@2.6.1)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.50.1
+      '@typescript-eslint/types': 8.50.1
+      '@typescript-eslint/typescript-estree': 8.50.1(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.50.1
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.50.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.50.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.50.1
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@7.18.0':
+    dependencies:
+      '@typescript-eslint/types': 7.18.0
+      '@typescript-eslint/visitor-keys': 7.18.0
+
+  '@typescript-eslint/scope-manager@8.50.1':
+    dependencies:
+      '@typescript-eslint/types': 8.50.1
+      '@typescript-eslint/visitor-keys': 8.50.1
+
+  '@typescript-eslint/tsconfig-utils@8.50.1(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@typescript-eslint/type-utils@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.50.1
+      '@typescript-eslint/typescript-estree': 8.50.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@2.6.1)
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@7.18.0': {}
+
+  '@typescript-eslint/types@8.50.1': {}
+
+  '@typescript-eslint/typescript-estree@7.18.0(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 7.18.0
+      '@typescript-eslint/visitor-keys': 7.18.0
+      debug: 4.4.3
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      ts-api-utils: 1.4.3(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/typescript-estree@8.50.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.50.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.50.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.50.1
+      '@typescript-eslint/visitor-keys': 8.50.1
+      debug: 4.4.3
+      minimatch: 9.0.5
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@7.18.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 7.18.0
+      '@typescript-eslint/types': 7.18.0
+      '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@typescript-eslint/utils@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.50.1
+      '@typescript-eslint/types': 8.50.1
+      '@typescript-eslint/typescript-estree': 8.50.1(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@7.18.0':
+    dependencies:
+      '@typescript-eslint/types': 7.18.0
+      eslint-visitor-keys: 3.4.3
+
+  '@typescript-eslint/visitor-keys@8.50.1':
+    dependencies:
+      '@typescript-eslint/types': 8.50.1
+      eslint-visitor-keys: 4.2.1
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    optional: true
+
+  '@vee-validate/zod@4.15.1(vue@3.5.26(typescript@5.9.3))(zod@3.25.76)':
+    dependencies:
+      type-fest: 4.41.0
+      vee-validate: 4.15.1(vue@3.5.26(typescript@5.9.3))
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - vue
+
+  '@vercel/nft@0.30.4(rollup@4.54.0)':
+    dependencies:
+      '@mapbox/node-pre-gyp': 2.0.3
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+      acorn: 8.15.0
+      acorn-import-attributes: 1.9.5(acorn@8.15.0)
+      async-sema: 3.1.1
+      bindings: 1.5.0
+      estree-walker: 2.0.2
+      glob: 10.5.0
+      graceful-fs: 4.2.11
+      node-gyp-build: 4.8.4
+      picomatch: 4.0.3
+      resolve-from: 5.0.0
+    transitivePeerDependencies:
+      - encoding
+      - rollup
+      - supports-color
+
+  '@vitejs/plugin-vue-jsx@5.1.3(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+      '@rolldown/pluginutils': 1.0.0-beta.57
+      '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.28.5)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vue: 3.5.26(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitejs/plugin-vue-jsx@5.1.3(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+      '@rolldown/pluginutils': 1.0.0-beta.57
+      '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.28.5)
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vue: 3.5.26(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitejs/plugin-vue@6.0.3(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.0-beta.53
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@vitejs/plugin-vue@6.0.3(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.0-beta.53
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@vitest/expect@3.2.4':
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
+
+  '@vitest/mocker@3.2.4(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))':
+    dependencies:
+      '@vitest/spy': 3.2.4
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+
+  '@vitest/pretty-format@3.2.4':
+    dependencies:
+      tinyrainbow: 2.0.0
+
+  '@vitest/runner@3.2.4':
+    dependencies:
+      '@vitest/utils': 3.2.4
+      pathe: 2.0.3
+      strip-literal: 3.1.0
+
+  '@vitest/snapshot@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@3.2.4':
+    dependencies:
+      tinyspy: 4.0.4
+
+  '@vitest/utils@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+
+  '@volar/language-core@2.4.27':
+    dependencies:
+      '@volar/source-map': 2.4.27
+
+  '@volar/source-map@2.4.27': {}
+
+  '@volar/typescript@2.4.27':
+    dependencies:
+      '@volar/language-core': 2.4.27
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
+  '@vue/babel-helper-vue-transform-on@1.5.0': {}
+
+  '@vue/babel-helper-vue-transform-on@2.0.1': {}
+
+  '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      '@vue/babel-helper-vue-transform-on': 1.5.0
+      '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.28.5)
+      '@vue/shared': 3.5.26
+    optionalDependencies:
+      '@babel/core': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-jsx@2.0.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      '@vue/babel-helper-vue-transform-on': 2.0.1
+      '@vue/babel-plugin-resolve-type': 2.0.1(@babel/core@7.28.5)
+      '@vue/shared': 3.5.26
+    optionalDependencies:
+      '@babel/core': 7.28.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@1.5.0(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/parser': 7.28.5
+      '@vue/compiler-sfc': 3.5.26
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/babel-plugin-resolve-type@2.0.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/core': 7.28.5
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/parser': 7.28.5
+      '@vue/compiler-sfc': 3.5.26
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/compiler-core@3.5.26':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@vue/shared': 3.5.26
+      entities: 7.0.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.26':
+    dependencies:
+      '@vue/compiler-core': 3.5.26
+      '@vue/shared': 3.5.26
+
+  '@vue/compiler-sfc@3.5.26':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@vue/compiler-core': 3.5.26
+      '@vue/compiler-dom': 3.5.26
+      '@vue/compiler-ssr': 3.5.26
+      '@vue/shared': 3.5.26
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.6
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.5.26':
+    dependencies:
+      '@vue/compiler-dom': 3.5.26
+      '@vue/shared': 3.5.26
+
+  '@vue/compiler-vue2@2.7.16':
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+
+  '@vue/devtools-api@6.6.4': {}
+
+  '@vue/devtools-api@7.7.9':
+    dependencies:
+      '@vue/devtools-kit': 7.7.9
+
+  '@vue/devtools-core@8.0.5(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@vue/devtools-kit': 8.0.5
+      '@vue/devtools-shared': 8.0.5
+      mitt: 3.0.1
+      nanoid: 5.1.6
+      pathe: 2.0.3
+      vite-hot-client: 2.1.0(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
+      vue: 3.5.26(typescript@5.9.3)
+    transitivePeerDependencies:
+      - vite
+
+  '@vue/devtools-kit@7.7.9':
+    dependencies:
+      '@vue/devtools-shared': 7.7.9
+      birpc: 2.9.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.6
+
+  '@vue/devtools-kit@8.0.5':
+    dependencies:
+      '@vue/devtools-shared': 8.0.5
+      birpc: 2.9.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 2.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.6
+
+  '@vue/devtools-shared@7.7.9':
+    dependencies:
+      rfdc: 1.4.1
+
+  '@vue/devtools-shared@8.0.5':
+    dependencies:
+      rfdc: 1.4.1
+
+  '@vue/language-core@2.2.0(typescript@5.9.3)':
+    dependencies:
+      '@volar/language-core': 2.4.27
+      '@vue/compiler-dom': 3.5.26
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.26
+      alien-signals: 0.4.14
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@vue/language-core@3.2.1':
+    dependencies:
+      '@volar/language-core': 2.4.27
+      '@vue/compiler-dom': 3.5.26
+      '@vue/shared': 3.5.26
+      alien-signals: 3.1.1
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.3
+
+  '@vue/reactivity@3.5.26':
+    dependencies:
+      '@vue/shared': 3.5.26
+
+  '@vue/runtime-core@3.5.26':
+    dependencies:
+      '@vue/reactivity': 3.5.26
+      '@vue/shared': 3.5.26
+
+  '@vue/runtime-dom@3.5.26':
+    dependencies:
+      '@vue/reactivity': 3.5.26
+      '@vue/runtime-core': 3.5.26
+      '@vue/shared': 3.5.26
+      csstype: 3.2.3
+
+  '@vue/server-renderer@3.5.26(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.26
+      '@vue/shared': 3.5.26
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@vue/shared@3.5.26': {}
+
+  '@vue/test-utils@2.4.6':
+    dependencies:
+      js-beautify: 1.15.4
+      vue-component-type-helpers: 2.2.12
+
+  '@vueuse/core@12.8.2(typescript@5.9.3)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 12.8.2
+      '@vueuse/shared': 12.8.2(typescript@5.9.3)
+      vue: 3.5.26(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@vueuse/core@13.9.0(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 13.9.0
+      '@vueuse/shared': 13.9.0(vue@3.5.26(typescript@5.9.3))
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@vueuse/core@14.1.0(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.1.0
+      '@vueuse/shared': 14.1.0(vue@3.5.26(typescript@5.9.3))
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@vueuse/integrations@14.1.0(async-validator@4.2.5)(axios@1.13.2)(change-case@5.4.4)(focus-trap@7.7.0)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@vueuse/core': 14.1.0(vue@3.5.26(typescript@5.9.3))
+      '@vueuse/shared': 14.1.0(vue@3.5.26(typescript@5.9.3))
+      vue: 3.5.26(typescript@5.9.3)
+    optionalDependencies:
+      async-validator: 4.2.5
+      axios: 1.13.2
+      change-case: 5.4.4
+      focus-trap: 7.7.0
+      nprogress: 0.2.0
+      qrcode: 1.5.4
+      sortablejs: 1.15.6
+
+  '@vueuse/metadata@12.8.2': {}
+
+  '@vueuse/metadata@13.9.0': {}
+
+  '@vueuse/metadata@14.1.0': {}
+
+  '@vueuse/motion@3.0.3(magicast@0.5.1)(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@vueuse/core': 13.9.0(vue@3.5.26(typescript@5.9.3))
+      '@vueuse/shared': 13.9.0(vue@3.5.26(typescript@5.9.3))
+      defu: 6.1.4
+      framesync: 6.1.2
+      popmotion: 11.0.5
+      style-value-types: 5.1.2
+      vue: 3.5.26(typescript@5.9.3)
+    optionalDependencies:
+      '@nuxt/kit': 3.20.2(magicast@0.5.1)
+    transitivePeerDependencies:
+      - magicast
+
+  '@vueuse/shared@12.8.2(typescript@5.9.3)':
+    dependencies:
+      vue: 3.5.26(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@vueuse/shared@13.9.0(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@vueuse/shared@14.1.0(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@vxe-ui/core@4.2.16(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      dom-zindex: 1.0.6
+      vue: 3.5.26(typescript@5.9.3)
+      xe-utils: 3.8.0
+
+  JSONStream@1.3.5:
+    dependencies:
+      jsonparse: 1.3.1
+      through: 2.3.8
+
+  abbrev@2.0.0: {}
+
+  abbrev@3.0.1: {}
+
+  abort-controller@3.0.0:
+    dependencies:
+      event-target-shim: 5.0.1
+
+  acorn-import-attributes@1.9.5(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  agent-base@7.1.4: {}
+
+  ajv-draft-04@1.0.0(ajv@8.13.0):
+    optionalDependencies:
+      ajv: 8.13.0
+
+  ajv-formats@3.0.1(ajv@8.13.0):
+    optionalDependencies:
+      ajv: 8.13.0
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.12.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+
+  ajv@8.13.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+
+  ajv@8.17.1:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  alien-signals@0.4.14: {}
+
+  alien-signals@3.1.1: {}
+
+  ansi-align@3.0.1:
+    dependencies:
+      string-width: 4.2.3
+
+  ansi-colors@4.1.3: {}
+
+  ansi-escapes@7.2.0:
+    dependencies:
+      environment: 1.1.0
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.3: {}
+
+  ansis@4.2.0: {}
+
+  ant-design-vue@4.2.6(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-vue': 7.0.1(vue@3.5.26(typescript@5.9.3))
+      '@babel/runtime': 7.28.4
+      '@ctrl/tinycolor': 4.2.0
+      '@emotion/hash': 0.9.2
+      '@emotion/unitless': 0.8.1
+      '@simonwep/pickr': 1.8.2
+      array-tree-filter: 2.1.0
+      async-validator: 4.2.5
+      csstype: 3.2.3
+      dayjs: 1.11.19
+      dom-align: 1.12.4
+      dom-scroll-into-view: 2.0.1
+      lodash: 4.17.21
+      lodash-es: 4.17.22
+      resize-observer-polyfill: 1.5.1
+      scroll-into-view-if-needed: 2.2.31
+      shallow-equal: 1.2.1
+      stylis: 4.3.6
+      throttle-debounce: 5.0.2
+      vue: 3.5.26(typescript@5.9.3)
+      vue-types: 3.0.2(vue@3.5.26(typescript@5.9.3))
+      warning: 4.0.3
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  archiver-utils@5.0.2:
+    dependencies:
+      glob: 10.5.0
+      graceful-fs: 4.2.11
+      is-stream: 2.0.1
+      lazystream: 1.0.1
+      lodash: 4.17.21
+      normalize-path: 3.0.0
+      readable-stream: 4.7.0
+
+  archiver@7.0.1:
+    dependencies:
+      archiver-utils: 5.0.2
+      async: 3.2.6
+      buffer-crc32: 1.0.0
+      readable-stream: 4.7.0
+      readdir-glob: 1.1.3
+      tar-stream: 3.1.7
+      zip-stream: 6.0.1
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  are-docs-informative@0.0.2: {}
+
+  arg@5.0.2: {}
+
+  argparse@1.0.10:
+    dependencies:
+      sprintf-js: 1.0.3
+
+  argparse@2.0.1: {}
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  array-buffer-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
+
+  array-differ@3.0.0: {}
+
+  array-ify@1.0.0: {}
+
+  array-timsort@1.0.3: {}
+
+  array-tree-filter@2.1.0: {}
+
+  array-union@2.1.0: {}
+
+  arraybuffer.prototype.slice@1.0.4:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
+  arrify@2.0.1: {}
+
+  assertion-error@2.0.1: {}
+
+  astral-regex@2.0.0: {}
+
+  async-function@1.0.0: {}
+
+  async-sema@3.1.1: {}
+
+  async-validator@4.2.5: {}
+
+  async@3.2.6: {}
+
+  asynckit@0.4.0: {}
+
+  at-least-node@1.0.0: {}
+
+  atomically@2.1.0:
+    dependencies:
+      stubborn-fs: 2.0.0
+      when-exit: 2.1.5
+
+  autoprefixer@10.4.23(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001761
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  axios-mock-adapter@2.1.0(axios@1.13.2):
+    dependencies:
+      axios: 1.13.2
+      fast-deep-equal: 3.1.3
+      is-buffer: 2.0.5
+
+  axios@1.13.2:
+    dependencies:
+      follow-redirects: 1.15.11
+      form-data: 4.0.5
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
+  b4a@1.7.3: {}
+
+  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.5):
+    dependencies:
+      '@babel/compat-data': 7.28.5
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+      core-js-compat: 3.47.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
+  balanced-match@1.0.2: {}
+
+  balanced-match@2.0.0: {}
+
+  bare-events@2.8.2: {}
+
+  base64-js@1.5.1: {}
+
+  baseline-browser-mapping@2.9.11: {}
+
+  better-path-resolve@1.0.0:
+    dependencies:
+      is-windows: 1.0.2
+
+  bignumber.js@9.3.1: {}
+
+  binary-extensions@2.3.0: {}
+
+  bindings@1.5.0:
+    dependencies:
+      file-uri-to-path: 1.0.0
+
+  bintrees@1.0.2: {}
+
+  birpc@2.9.0: {}
+
+  boolbase@1.0.0: {}
+
+  boxen@8.0.1:
+    dependencies:
+      ansi-align: 3.0.1
+      camelcase: 8.0.0
+      chalk: 5.6.2
+      cli-boxes: 3.0.0
+      string-width: 7.2.0
+      type-fest: 4.41.0
+      widest-line: 5.0.0
+      wrap-ansi: 9.0.2
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.2:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.9.11
+      caniuse-lite: 1.0.30001761
+      electron-to-chromium: 1.5.267
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  buffer-crc32@1.0.0: {}
+
+  buffer-from@1.1.2: {}
+
+  buffer@6.0.3:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  builtin-modules@5.0.0: {}
+
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
+
+  c12@3.3.3(magicast@0.5.1):
+    dependencies:
+      chokidar: 5.0.0
+      confbox: 0.2.2
+      defu: 6.1.4
+      dotenv: 17.2.3
+      exsolve: 1.0.8
+      giget: 2.0.0
+      jiti: 2.6.1
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      pkg-types: 2.3.0
+      rc9: 2.1.2
+    optionalDependencies:
+      magicast: 0.5.1
+
+  cac@6.7.14: {}
+
+  cacache@20.0.3:
+    dependencies:
+      '@npmcli/fs': 5.0.0
+      fs-minipass: 3.0.3
+      glob: 13.0.0
+      lru-cache: 11.2.4
+      minipass: 7.1.2
+      minipass-collect: 2.0.1
+      minipass-flush: 1.0.5
+      minipass-pipeline: 1.2.4
+      p-map: 7.0.4
+      ssri: 13.0.0
+      unique-filename: 5.0.0
+
+  cacheable@2.3.1:
+    dependencies:
+      '@cacheable/memory': 2.0.6
+      '@cacheable/utils': 2.3.2
+      hookified: 1.14.0
+      keyv: 5.5.5
+      qified: 0.5.3
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsite@1.0.0: {}
+
+  callsites@3.1.0: {}
+
+  camel-case@4.1.2:
+    dependencies:
+      pascal-case: 3.1.2
+      tslib: 2.8.1
+
+  camelcase-css@2.0.1: {}
+
+  camelcase@5.3.1: {}
+
+  camelcase@6.3.0: {}
+
+  camelcase@8.0.0: {}
+
+  caniuse-api@3.0.0:
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001761
+      lodash.memoize: 4.1.2
+      lodash.uniq: 4.5.0
+
+  caniuse-lite@1.0.30001761: {}
+
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
+  chalk-template@1.1.2:
+    dependencies:
+      chalk: 5.6.2
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@5.6.2: {}
+
+  change-case@5.4.4: {}
+
+  chardet@2.1.1: {}
+
+  check-error@2.1.1: {}
+
+  cheerio-select@2.1.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-select: 5.2.2
+      css-what: 6.2.2
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+
+  cheerio@1.1.2:
+    dependencies:
+      cheerio-select: 2.1.0
+      dom-serializer: 2.0.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      encoding-sniffer: 0.2.1
+      htmlparser2: 10.0.0
+      parse5: 7.3.0
+      parse5-htmlparser2-tree-adapter: 7.1.0
+      parse5-parser-stream: 7.1.2
+      undici: 7.16.0
+      whatwg-mimetype: 4.0.0
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.0.0
+
+  chownr@3.0.0: {}
+
+  ci-info@3.9.0: {}
+
+  ci-info@4.3.1: {}
+
+  circular-dependency-scanner@2.3.0:
+    dependencies:
+      '@ast-grep/napi': 0.39.9
+      '@vue/compiler-sfc': 3.5.26
+      commander: 12.1.0
+      get-tsconfig: 4.13.0
+      graph-cycles: 3.0.0
+      listr2: 8.3.3
+      minimatch: 9.0.5
+      node-cleanup: 2.1.2
+      typescript: 5.9.3
+      update-notifier: 7.3.1
+      zx: 8.8.5
+
+  citty@0.1.6:
+    dependencies:
+      consola: 3.4.2
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  clean-css@5.3.3:
+    dependencies:
+      source-map: 0.6.1
+
+  clean-regexp@1.0.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  clear-module@4.1.2:
+    dependencies:
+      parent-module: 2.0.0
+      resolve-from: 5.0.0
+
+  cli-boxes@3.0.0: {}
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-spinners@2.9.2: {}
+
+  cli-truncate@4.0.0:
+    dependencies:
+      slice-ansi: 5.0.0
+      string-width: 7.2.0
+
+  clipboard@2.0.11:
+    dependencies:
+      good-listener: 1.2.2
+      select: 1.1.2
+      tiny-emitter: 2.1.0
+
+  clipboardy@4.0.0:
+    dependencies:
+      execa: 8.0.1
+      is-wsl: 3.1.0
+      is64bit: 2.0.0
+
+  cliui@6.0.0:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+
+  cliui@7.0.4:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  clsx@2.1.1: {}
+
+  cluster-key-slot@1.1.2: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  colord@2.9.3: {}
+
+  colorette@2.0.20: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  commander@10.0.1: {}
+
+  commander@11.1.0: {}
+
+  commander@12.1.0: {}
+
+  commander@13.1.0: {}
+
+  commander@2.20.3: {}
+
+  commander@4.1.1: {}
+
+  commander@8.3.0: {}
+
+  comment-json@4.5.0:
+    dependencies:
+      array-timsort: 1.0.3
+      core-util-is: 1.0.3
+      esprima: 4.0.1
+
+  comment-parser@1.4.1: {}
+
+  commitlint-plugin-function-rules@4.2.0(@commitlint/lint@19.8.1):
+    dependencies:
+      '@commitlint/lint': 19.8.1
+
+  common-tags@1.8.2: {}
+
+  commondir@1.0.1: {}
+
+  compare-func@2.0.0:
+    dependencies:
+      array-ify: 1.0.0
+      dot-prop: 5.3.0
+
+  compare-versions@6.1.1: {}
+
+  compatx@0.2.0: {}
+
+  compress-commons@6.0.2:
+    dependencies:
+      crc-32: 1.2.2
+      crc32-stream: 6.0.0
+      is-stream: 2.0.1
+      normalize-path: 3.0.0
+      readable-stream: 4.7.0
+
+  compute-scroll-into-view@1.0.20: {}
+
+  concat-map@0.0.1: {}
+
+  confbox@0.1.8: {}
+
+  confbox@0.2.2: {}
+
+  config-chain@1.1.13:
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+
+  configstore@7.1.0:
+    dependencies:
+      atomically: 2.1.0
+      dot-prop: 9.0.0
+      graceful-fs: 4.2.11
+      xdg-basedir: 5.1.0
+
+  connect-history-api-fallback@1.6.0: {}
+
+  consola@2.15.3: {}
+
+  consola@3.4.2: {}
+
+  conventional-changelog-angular@7.0.0:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-changelog-conventionalcommits@7.0.2:
+    dependencies:
+      compare-func: 2.0.0
+
+  conventional-commits-parser@5.0.0:
+    dependencies:
+      JSONStream: 1.3.5
+      is-text-path: 2.0.0
+      meow: 12.1.1
+      split2: 4.2.0
+
+  convert-source-map@2.0.0: {}
+
+  cookie-es@1.2.2: {}
+
+  cookie-es@2.0.0: {}
+
+  copy-anything@2.0.6:
+    dependencies:
+      is-what: 3.14.1
+    optional: true
+
+  copy-anything@4.0.5:
+    dependencies:
+      is-what: 5.5.0
+
+  core-js-compat@3.47.0:
+    dependencies:
+      browserslist: 4.28.1
+
+  core-js@3.47.0: {}
+
+  core-util-is@1.0.3: {}
+
+  cosmiconfig-typescript-loader@6.2.0(@types/node@25.0.3)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3):
+    dependencies:
+      '@types/node': 25.0.3
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      jiti: 2.6.1
+      typescript: 5.9.3
+
+  cosmiconfig@7.1.0:
+    dependencies:
+      '@types/parse-json': 4.0.2
+      import-fresh: 3.3.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+
+  cosmiconfig@9.0.0(typescript@5.9.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.9.3
+
+  crc-32@1.2.2: {}
+
+  crc32-stream@6.0.0:
+    dependencies:
+      crc-32: 1.2.2
+      readable-stream: 4.7.0
+
+  croner@9.1.0: {}
+
+  cropperjs@1.6.2: {}
+
+  cross-env@7.0.3:
+    dependencies:
+      cross-spawn: 7.0.6
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  crossws@0.3.5:
+    dependencies:
+      uncrypto: 0.1.3
+
+  crypto-js@4.2.0: {}
+
+  crypto-random-string@2.0.0: {}
+
+  cspell-config-lib@8.19.4:
+    dependencies:
+      '@cspell/cspell-types': 8.19.4
+      comment-json: 4.5.0
+      yaml: 2.8.2
+
+  cspell-dictionary@8.19.4:
+    dependencies:
+      '@cspell/cspell-pipe': 8.19.4
+      '@cspell/cspell-types': 8.19.4
+      cspell-trie-lib: 8.19.4
+      fast-equals: 5.4.0
+
+  cspell-gitignore@8.19.4:
+    dependencies:
+      '@cspell/url': 8.19.4
+      cspell-glob: 8.19.4
+      cspell-io: 8.19.4
+
+  cspell-glob@8.19.4:
+    dependencies:
+      '@cspell/url': 8.19.4
+      picomatch: 4.0.3
+
+  cspell-grammar@8.19.4:
+    dependencies:
+      '@cspell/cspell-pipe': 8.19.4
+      '@cspell/cspell-types': 8.19.4
+
+  cspell-io@8.19.4:
+    dependencies:
+      '@cspell/cspell-service-bus': 8.19.4
+      '@cspell/url': 8.19.4
+
+  cspell-lib@8.19.4:
+    dependencies:
+      '@cspell/cspell-bundled-dicts': 8.19.4
+      '@cspell/cspell-pipe': 8.19.4
+      '@cspell/cspell-resolver': 8.19.4
+      '@cspell/cspell-types': 8.19.4
+      '@cspell/dynamic-import': 8.19.4
+      '@cspell/filetypes': 8.19.4
+      '@cspell/strong-weak-map': 8.19.4
+      '@cspell/url': 8.19.4
+      clear-module: 4.1.2
+      comment-json: 4.5.0
+      cspell-config-lib: 8.19.4
+      cspell-dictionary: 8.19.4
+      cspell-glob: 8.19.4
+      cspell-grammar: 8.19.4
+      cspell-io: 8.19.4
+      cspell-trie-lib: 8.19.4
+      env-paths: 3.0.0
+      fast-equals: 5.4.0
+      gensequence: 7.0.0
+      import-fresh: 3.3.1
+      resolve-from: 5.0.0
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.1.0
+      xdg-basedir: 5.1.0
+
+  cspell-trie-lib@8.19.4:
+    dependencies:
+      '@cspell/cspell-pipe': 8.19.4
+      '@cspell/cspell-types': 8.19.4
+      gensequence: 7.0.0
+
+  cspell@8.19.4:
+    dependencies:
+      '@cspell/cspell-json-reporter': 8.19.4
+      '@cspell/cspell-pipe': 8.19.4
+      '@cspell/cspell-types': 8.19.4
+      '@cspell/dynamic-import': 8.19.4
+      '@cspell/url': 8.19.4
+      chalk: 5.6.2
+      chalk-template: 1.1.2
+      commander: 13.1.0
+      cspell-dictionary: 8.19.4
+      cspell-gitignore: 8.19.4
+      cspell-glob: 8.19.4
+      cspell-io: 8.19.4
+      cspell-lib: 8.19.4
+      fast-json-stable-stringify: 2.1.0
+      file-entry-cache: 9.1.0
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+
+  css-blank-pseudo@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  css-declaration-sorter@7.3.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  css-functions-list@3.2.3: {}
+
+  css-has-pseudo@7.0.3(postcss@8.5.6):
+    dependencies:
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+      postcss-value-parser: 4.2.0
+
+  css-prefers-color-scheme@10.0.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  css-select@4.3.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 4.3.1
+      domutils: 2.8.0
+      nth-check: 2.1.1
+
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+
+  css-tree@3.1.0:
+    dependencies:
+      mdn-data: 2.12.2
+      source-map-js: 1.2.1
+
+  css-what@6.2.2: {}
+
+  cssdb@8.5.2: {}
+
+  cssesc@3.0.0: {}
+
+  cssnano-preset-default@7.0.10(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      css-declaration-sorter: 7.3.0(postcss@8.5.6)
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-calc: 10.1.1(postcss@8.5.6)
+      postcss-colormin: 7.0.5(postcss@8.5.6)
+      postcss-convert-values: 7.0.8(postcss@8.5.6)
+      postcss-discard-comments: 7.0.5(postcss@8.5.6)
+      postcss-discard-duplicates: 7.0.2(postcss@8.5.6)
+      postcss-discard-empty: 7.0.1(postcss@8.5.6)
+      postcss-discard-overridden: 7.0.1(postcss@8.5.6)
+      postcss-merge-longhand: 7.0.5(postcss@8.5.6)
+      postcss-merge-rules: 7.0.7(postcss@8.5.6)
+      postcss-minify-font-values: 7.0.1(postcss@8.5.6)
+      postcss-minify-gradients: 7.0.1(postcss@8.5.6)
+      postcss-minify-params: 7.0.5(postcss@8.5.6)
+      postcss-minify-selectors: 7.0.5(postcss@8.5.6)
+      postcss-normalize-charset: 7.0.1(postcss@8.5.6)
+      postcss-normalize-display-values: 7.0.1(postcss@8.5.6)
+      postcss-normalize-positions: 7.0.1(postcss@8.5.6)
+      postcss-normalize-repeat-style: 7.0.1(postcss@8.5.6)
+      postcss-normalize-string: 7.0.1(postcss@8.5.6)
+      postcss-normalize-timing-functions: 7.0.1(postcss@8.5.6)
+      postcss-normalize-unicode: 7.0.5(postcss@8.5.6)
+      postcss-normalize-url: 7.0.1(postcss@8.5.6)
+      postcss-normalize-whitespace: 7.0.1(postcss@8.5.6)
+      postcss-ordered-values: 7.0.2(postcss@8.5.6)
+      postcss-reduce-initial: 7.0.5(postcss@8.5.6)
+      postcss-reduce-transforms: 7.0.1(postcss@8.5.6)
+      postcss-svgo: 7.1.0(postcss@8.5.6)
+      postcss-unique-selectors: 7.0.4(postcss@8.5.6)
+
+  cssnano-utils@5.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  cssnano@7.1.2(postcss@8.5.6):
+    dependencies:
+      cssnano-preset-default: 7.0.10(postcss@8.5.6)
+      lilconfig: 3.1.3
+      postcss: 8.5.6
+
+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
+  csstype@3.2.3: {}
+
+  cz-git@1.12.0: {}
+
+  czg@1.12.0: {}
+
+  dargs@8.1.0: {}
+
+  data-uri-to-buffer@4.0.1: {}
+
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  dataloader@1.4.0: {}
+
+  dayjs@1.11.19: {}
+
+  db0@0.3.4: {}
+
+  de-indent@1.0.2: {}
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decamelize@1.2.0: {}
+
+  deep-eql@5.0.2: {}
+
+  deep-extend@0.6.0: {}
+
+  deep-is@0.1.4: {}
+
+  deepmerge@4.3.1: {}
+
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.4.0:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-lazy-prop@2.0.0: {}
+
+  define-lazy-prop@3.0.0: {}
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
+  defu@6.1.4: {}
+
+  delayed-stream@1.0.0: {}
+
+  delegate@3.2.0: {}
+
+  denque@2.1.0: {}
+
+  depcheck@1.4.7:
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@babel/traverse': 7.28.5
+      '@vue/compiler-sfc': 3.5.26
+      callsite: 1.0.0
+      camelcase: 6.3.0
+      cosmiconfig: 7.1.0
+      debug: 4.4.3
+      deps-regex: 0.2.0
+      findup-sync: 5.0.0
+      ignore: 5.3.2
+      is-core-module: 2.16.1
+      js-yaml: 3.14.2
+      json5: 2.2.3
+      lodash: 4.17.21
+      minimatch: 7.4.6
+      multimatch: 5.0.0
+      please-upgrade-node: 3.2.0
+      readdirp: 3.6.0
+      require-package-name: 2.0.1
+      resolve: 1.22.11
+      resolve-from: 5.0.0
+      semver: 7.7.3
+      yargs: 16.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  depd@2.0.0: {}
+
+  deps-regex@0.2.0: {}
+
+  destr@2.0.5: {}
+
+  detect-file@1.0.0: {}
+
+  detect-indent@6.1.0: {}
+
+  detect-libc@1.0.3: {}
+
+  detect-libc@2.1.2: {}
+
+  didyoumean@1.2.2: {}
+
+  diff-sequences@27.5.1: {}
+
+  diff@8.0.2: {}
+
+  dijkstrajs@1.0.3: {}
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  dlv@1.1.3: {}
+
+  dom-align@1.12.4: {}
+
+  dom-scroll-into-view@2.0.1: {}
+
+  dom-serializer@1.4.1:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+      entities: 2.2.0
+
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  dom-zindex@1.0.6: {}
+
+  domelementtype@2.3.0: {}
+
+  domhandler@4.3.1:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@2.8.0:
+    dependencies:
+      dom-serializer: 1.4.1
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
+  dot-case@3.0.4:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.8.1
+
+  dot-prop@10.1.0:
+    dependencies:
+      type-fest: 5.3.1
+
+  dot-prop@5.3.0:
+    dependencies:
+      is-obj: 2.0.0
+
+  dot-prop@9.0.0:
+    dependencies:
+      type-fest: 4.41.0
+
+  dotenv-expand@8.0.3: {}
+
+  dotenv@16.0.3: {}
+
+  dotenv@16.6.1: {}
+
+  dotenv@17.2.3: {}
+
+  dotenv@8.6.0: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  duplexer@0.1.2: {}
+
+  eastasianwidth@0.2.0: {}
+
+  echarts@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.0.0
+
+  editorconfig@1.0.4:
+    dependencies:
+      '@one-ini/wasm': 0.1.1
+      commander: 10.0.1
+      minimatch: 9.0.1
+      semver: 7.7.3
+
+  ee-first@1.1.1: {}
+
+  ejs@3.1.10:
+    dependencies:
+      jake: 10.9.4
+
+  electron-to-chromium@1.5.267: {}
+
+  emoji-regex@10.6.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  encodeurl@2.0.0: {}
+
+  encoding-sniffer@0.2.1:
+    dependencies:
+      iconv-lite: 0.6.3
+      whatwg-encoding: 3.1.1
+
+  enhanced-resolve@5.18.4:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  enquirer@2.4.1:
+    dependencies:
+      ansi-colors: 4.1.3
+      strip-ansi: 6.0.1
+
+  entities@2.2.0: {}
+
+  entities@4.5.0: {}
+
+  entities@6.0.1: {}
+
+  entities@7.0.0: {}
+
+  env-paths@2.2.1: {}
+
+  env-paths@3.0.0: {}
+
+  environment@1.1.0: {}
+
+  errno@0.1.8:
+    dependencies:
+      prr: 1.0.1
+    optional: true
+
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  error-stack-parser-es@1.0.5: {}
+
+  errx@0.1.0:
+    optional: true
+
+  es-abstract@1.24.1:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.19
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@1.7.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  es-to-primitive@1.3.0:
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
+  es-toolkit@1.43.0: {}
+
+  esbuild@0.25.3:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.3
+      '@esbuild/android-arm': 0.25.3
+      '@esbuild/android-arm64': 0.25.3
+      '@esbuild/android-x64': 0.25.3
+      '@esbuild/darwin-arm64': 0.25.3
+      '@esbuild/darwin-x64': 0.25.3
+      '@esbuild/freebsd-arm64': 0.25.3
+      '@esbuild/freebsd-x64': 0.25.3
+      '@esbuild/linux-arm': 0.25.3
+      '@esbuild/linux-arm64': 0.25.3
+      '@esbuild/linux-ia32': 0.25.3
+      '@esbuild/linux-loong64': 0.25.3
+      '@esbuild/linux-mips64el': 0.25.3
+      '@esbuild/linux-ppc64': 0.25.3
+      '@esbuild/linux-riscv64': 0.25.3
+      '@esbuild/linux-s390x': 0.25.3
+      '@esbuild/linux-x64': 0.25.3
+      '@esbuild/netbsd-arm64': 0.25.3
+      '@esbuild/netbsd-x64': 0.25.3
+      '@esbuild/openbsd-arm64': 0.25.3
+      '@esbuild/openbsd-x64': 0.25.3
+      '@esbuild/sunos-x64': 0.25.3
+      '@esbuild/win32-arm64': 0.25.3
+      '@esbuild/win32-ia32': 0.25.3
+      '@esbuild/win32-x64': 0.25.3
+
+  escalade@3.2.0: {}
+
+  escape-goat@4.0.0: {}
+
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
+  eslint-compat-utils@0.5.1(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+      semver: 7.7.3
+
+  eslint-compat-utils@0.6.5(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+      semver: 7.7.3
+
+  eslint-config-turbo@2.7.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.7.2):
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+      eslint-plugin-turbo: 2.7.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.7.2)
+      turbo: 2.7.2
+
+  eslint-import-context@0.1.9(unrs-resolver@1.11.1):
+    dependencies:
+      get-tsconfig: 4.13.0
+      stable-hash-x: 0.2.0
+    optionalDependencies:
+      unrs-resolver: 1.11.1
+
+  eslint-json-compat-utils@0.2.1(eslint@9.39.2(jiti@2.6.1))(jsonc-eslint-parser@2.4.2):
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+      esquery: 1.6.0
+      jsonc-eslint-parser: 2.4.2
+
+  eslint-plugin-command@3.4.0(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      '@es-joy/jsdoccomment': 0.78.0
+      eslint: 9.39.2(jiti@2.6.1)
+
+  eslint-plugin-es-x@7.8.0(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
+      eslint: 9.39.2(jiti@2.6.1)
+      eslint-compat-utils: 0.5.1(eslint@9.39.2(jiti@2.6.1))
+
+  eslint-plugin-eslint-comments@3.2.0(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      escape-string-regexp: 1.0.5
+      eslint: 9.39.2(jiti@2.6.1)
+      ignore: 5.3.2
+
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      '@typescript-eslint/types': 8.50.1
+      comment-parser: 1.4.1
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@2.6.1)
+      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
+      is-glob: 4.0.3
+      minimatch: 10.1.1
+      semver: 7.7.3
+      stable-hash-x: 0.2.0
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      '@typescript-eslint/utils': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-jsdoc@61.5.0(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      '@es-joy/jsdoccomment': 0.76.0
+      '@es-joy/resolve.exports': 1.2.0
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.1
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint: 9.39.2(jiti@2.6.1)
+      espree: 10.4.0
+      esquery: 1.6.0
+      html-entities: 2.6.0
+      object-deep-merge: 2.0.0
+      parse-imports-exports: 0.2.4
+      semver: 7.7.3
+      spdx-expression-parse: 4.0.0
+      to-valid-identifier: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-jsonc@2.21.0(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      diff-sequences: 27.5.1
+      eslint: 9.39.2(jiti@2.6.1)
+      eslint-compat-utils: 0.6.5(eslint@9.39.2(jiti@2.6.1))
+      eslint-json-compat-utils: 0.2.1(eslint@9.39.2(jiti@2.6.1))(jsonc-eslint-parser@2.4.2)
+      espree: 10.4.0
+      graphemer: 1.4.0
+      jsonc-eslint-parser: 2.4.2
+      natural-compare: 1.4.0
+      synckit: 0.11.11
+    transitivePeerDependencies:
+      - '@eslint/json'
+
+  eslint-plugin-n@17.23.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      enhanced-resolve: 5.18.4
+      eslint: 9.39.2(jiti@2.6.1)
+      eslint-plugin-es-x: 7.8.0(eslint@9.39.2(jiti@2.6.1))
+      get-tsconfig: 4.13.0
+      globals: 15.15.0
+      globrex: 0.1.2
+      ignore: 5.3.2
+      semver: 7.7.3
+      ts-declaration-location: 1.0.7(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  eslint-plugin-no-only-tests@3.3.0: {}
+
+  eslint-plugin-perfectionist@4.15.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/types': 8.50.1
+      '@typescript-eslint/utils': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
+      natural-orderby: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  eslint-plugin-prettier@5.5.4(@types/eslint@9.6.1)(eslint@9.39.2(jiti@2.6.1))(prettier@3.7.4):
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+      prettier: 3.7.4
+      prettier-linter-helpers: 1.0.0
+      synckit: 0.11.11
+    optionalDependencies:
+      '@types/eslint': 9.6.1
+
+  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
+      comment-parser: 1.4.1
+      eslint: 9.39.2(jiti@2.6.1)
+      jsdoc-type-pratt-parser: 4.8.0
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+      scslre: 0.3.0
+
+  eslint-plugin-turbo@2.7.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.7.2):
+    dependencies:
+      dotenv: 16.0.3
+      eslint: 9.39.2(jiti@2.6.1)
+      turbo: 2.7.2
+
+  eslint-plugin-unicorn@62.0.0(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      '@eslint/plugin-kit': 0.4.1
+      change-case: 5.4.4
+      ci-info: 4.3.1
+      clean-regexp: 1.0.0
+      core-js-compat: 3.47.0
+      eslint: 9.39.2(jiti@2.6.1)
+      esquery: 1.6.0
+      find-up-simple: 1.0.1
+      globals: 16.5.0
+      indent-string: 5.0.0
+      is-builtin-module: 5.0.0
+      jsesc: 3.1.0
+      pluralize: 8.0.0
+      regexp-tree: 0.1.27
+      regjsparser: 0.13.0
+      semver: 7.7.3
+      strip-indent: 4.1.1
+
+  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.2(jiti@2.6.1)
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+
+  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@25.0.3)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
+    dependencies:
+      '@typescript-eslint/utils': 7.18.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      vitest: 3.2.4(@types/node@25.0.3)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  eslint-plugin-vue@10.6.2(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.39.2(jiti@2.6.1))):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      eslint: 9.39.2(jiti@2.6.1)
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 7.1.1
+      semver: 7.7.3
+      vue-eslint-parser: 10.2.0(eslint@9.39.2(jiti@2.6.1))
+      xml-name-validator: 4.0.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint@9.39.2(jiti@2.6.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
+      '@eslint/eslintrc': 3.3.3
+      '@eslint/js': 9.39.2
+      '@eslint/plugin-kit': 0.4.1
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.6.1
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 4.2.1
+
+  espree@9.6.1:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 3.4.3
+
+  esprima@4.0.1: {}
+
+  esquery@1.6.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  estree-walker@1.0.1: {}
+
+  estree-walker@2.0.2: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  esutils@2.0.3: {}
+
+  etag@1.8.1: {}
+
+  event-target-shim@5.0.1: {}
+
+  eventemitter3@5.0.1: {}
+
+  events-universal@1.0.1:
+    dependencies:
+      bare-events: 2.8.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+
+  events@3.3.0: {}
+
+  execa@8.0.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
+  execa@9.6.1:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.2
+
+  expand-tilde@2.0.2:
+    dependencies:
+      homedir-polyfill: 1.0.3
+
+  expect-type@1.3.0: {}
+
+  exsolve@1.0.8: {}
+
+  extendable-error@0.1.7: {}
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-diff@1.3.0: {}
+
+  fast-equals@5.4.0: {}
+
+  fast-fifo@1.3.2: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-string-compare@3.0.0: {}
+
+  fast-uri@3.1.0: {}
+
+  fastest-levenshtein@1.0.16: {}
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  fetch-blob@3.2.0:
+    dependencies:
+      node-domexception: 1.0.0
+      web-streams-polyfill: 3.3.3
+
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
+  file-entry-cache@11.1.1:
+    dependencies:
+      flat-cache: 6.1.19
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  file-entry-cache@9.1.0:
+    dependencies:
+      flat-cache: 5.0.0
+
+  file-type@19.6.0:
+    dependencies:
+      get-stream: 9.0.1
+      strtok3: 9.1.1
+      token-types: 6.1.2
+      uint8array-extras: 1.5.0
+
+  file-uri-to-path@1.0.0: {}
+
+  filelist@1.0.4:
+    dependencies:
+      minimatch: 5.1.6
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up-simple@1.0.1: {}
+
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  find-up@7.0.0:
+    dependencies:
+      locate-path: 7.2.0
+      path-exists: 5.0.0
+      unicorn-magic: 0.1.0
+
+  findup-sync@5.0.0:
+    dependencies:
+      detect-file: 1.0.0
+      is-glob: 4.0.3
+      micromatch: 4.0.8
+      resolve-dir: 1.0.1
+
+  fix-dts-default-cjs-exports@1.0.1:
+    dependencies:
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      rollup: 4.54.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+
+  flat-cache@5.0.0:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+
+  flat-cache@6.1.19:
+    dependencies:
+      cacheable: 2.3.1
+      flatted: 3.3.3
+      hookified: 1.14.0
+
+  flatted@3.3.3: {}
+
+  focus-trap@7.7.0:
+    dependencies:
+      tabbable: 6.3.0
+    optional: true
+
+  follow-redirects@1.15.11: {}
+
+  for-each@0.3.5:
+    dependencies:
+      is-callable: 1.2.7
+
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  form-data@4.0.5:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
+  formdata-node@6.0.3: {}
+
+  formdata-polyfill@4.0.10:
+    dependencies:
+      fetch-blob: 3.2.0
+
+  fraction.js@5.3.4: {}
+
+  framesync@6.1.2:
+    dependencies:
+      tslib: 2.4.0
+
+  fresh@2.0.0: {}
+
+  fs-extra@10.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-extra@11.3.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-extra@7.0.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+
+  fs-extra@8.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+
+  fs-extra@9.1.0:
+    dependencies:
+      at-least-node: 1.0.0
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-minipass@3.0.3:
+    dependencies:
+      minipass: 7.1.2
+
+  fsevents@2.3.2:
+    optional: true
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  function.prototype.name@1.1.8:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
+
+  functions-have-names@1.2.3: {}
+
+  generator-function@2.0.1: {}
+
+  gensequence@7.0.0: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.4.0: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-own-enumerable-property-symbols@3.0.2: {}
+
+  get-port-please@3.2.0: {}
+
+  get-port@7.1.0: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-stream@8.0.1: {}
+
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
+  get-symbol-description@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+
+  get-tsconfig@4.13.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  giget@2.0.0:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      defu: 6.1.4
+      node-fetch-native: 1.6.7
+      nypm: 0.6.2
+      pathe: 2.0.3
+
+  git-raw-commits@4.0.0:
+    dependencies:
+      dargs: 8.1.0
+      meow: 12.1.1
+      split2: 4.2.0
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@10.5.0:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
+  glob@11.1.0:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 4.1.1
+      minimatch: 10.1.1
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 2.0.1
+
+  glob@13.0.0:
+    dependencies:
+      minimatch: 10.1.1
+      minipass: 7.1.2
+      path-scurry: 2.0.1
+
+  global-directory@4.0.1:
+    dependencies:
+      ini: 4.1.1
+
+  global-modules@1.0.0:
+    dependencies:
+      global-prefix: 1.0.2
+      is-windows: 1.0.2
+      resolve-dir: 1.0.1
+
+  global-modules@2.0.0:
+    dependencies:
+      global-prefix: 3.0.0
+
+  global-prefix@1.0.2:
+    dependencies:
+      expand-tilde: 2.0.2
+      homedir-polyfill: 1.0.3
+      ini: 1.3.8
+      is-windows: 1.0.2
+      which: 1.3.1
+
+  global-prefix@3.0.0:
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+
+  globals@14.0.0: {}
+
+  globals@15.15.0: {}
+
+  globals@16.5.0: {}
+
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+
+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  globby@15.0.0:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      fast-glob: 3.3.3
+      ignore: 7.0.5
+      path-type: 6.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.3.0
+
+  globjoin@0.1.4: {}
+
+  globrex@0.1.2: {}
+
+  good-listener@1.2.2:
+    dependencies:
+      delegate: 3.2.0
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.10: {}
+
+  graceful-fs@4.2.11: {}
+
+  graph-cycles@3.0.0:
+    dependencies:
+      fast-string-compare: 3.0.0
+      rotated-array-set: 3.0.0
+      short-tree: 3.0.0
+
+  graphemer@1.4.0: {}
+
+  gzip-size@7.0.0:
+    dependencies:
+      duplexer: 0.1.2
+
+  h3@1.15.4:
+    dependencies:
+      cookie-es: 1.2.2
+      crossws: 0.3.5
+      defu: 6.1.4
+      destr: 2.0.5
+      iron-webcrypto: 1.2.1
+      node-mock-http: 1.0.4
+      radix3: 1.1.2
+      ufo: 1.6.1
+      uncrypto: 0.1.3
+
+  happy-dom@17.6.3:
+    dependencies:
+      webidl-conversions: 7.0.0
+      whatwg-mimetype: 3.0.0
+
+  has-bigints@1.1.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hashery@1.3.0:
+    dependencies:
+      hookified: 1.14.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  he@1.2.0: {}
+
+  hey-listen@1.0.8: {}
+
+  highlight.js@11.11.1: {}
+
+  homedir-polyfill@1.0.3:
+    dependencies:
+      parse-passwd: 1.0.0
+
+  hookable@5.5.3: {}
+
+  hookified@1.14.0: {}
+
+  html-entities@2.6.0: {}
+
+  html-minifier-terser@6.1.0:
+    dependencies:
+      camel-case: 4.1.2
+      clean-css: 5.3.3
+      commander: 8.3.0
+      he: 1.2.0
+      param-case: 3.0.4
+      relateurl: 0.2.7
+      terser: 5.44.1
+
+  html-minifier-terser@7.2.0:
+    dependencies:
+      camel-case: 4.1.2
+      clean-css: 5.3.3
+      commander: 10.0.1
+      entities: 4.5.0
+      param-case: 3.0.4
+      relateurl: 0.2.7
+      terser: 5.44.1
+
+  html-tags@3.3.1: {}
+
+  htmlparser2@10.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 6.0.1
+
+  htmlparser2@8.0.2:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 4.5.0
+
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  http-shutdown@1.2.2: {}
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  httpxy@0.1.7: {}
+
+  human-id@4.1.3: {}
+
+  human-signals@5.0.0: {}
+
+  human-signals@8.0.1: {}
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.7.1:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  idb@7.1.1: {}
+
+  ieee754@1.2.1: {}
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  image-size@0.5.5:
+    optional: true
+
+  immutable@5.1.4: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  import-lazy@4.0.0: {}
+
+  import-meta-resolve@4.2.0: {}
+
+  imurmurhash@0.1.4: {}
+
+  indent-string@5.0.0: {}
+
+  inherits@2.0.4: {}
+
+  ini@1.3.8: {}
+
+  ini@4.1.1: {}
+
+  internal-slot@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+
+  ioredis@5.8.2:
+    dependencies:
+      '@ioredis/commands': 1.4.0
+      cluster-key-slot: 1.1.2
+      debug: 4.4.3
+      denque: 2.1.0
+      lodash.defaults: 4.2.0
+      lodash.isarguments: 3.1.0
+      redis-errors: 1.2.0
+      redis-parser: 3.0.0
+      standard-as-callback: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  iron-webcrypto@1.2.1: {}
+
+  is-array-buffer@3.0.5:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-arrayish@0.2.1: {}
+
+  is-async-function@2.1.1:
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-bigint@1.1.0:
+    dependencies:
+      has-bigints: 1.1.0
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-boolean-object@1.2.2:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-buffer@2.0.5: {}
+
+  is-builtin-module@5.0.0:
+    dependencies:
+      builtin-modules: 5.0.0
+
+  is-callable@1.2.7: {}
+
+  is-ci@4.1.0:
+    dependencies:
+      ci-info: 4.3.1
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+
+  is-date-object@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-docker@2.2.1: {}
+
+  is-docker@3.0.0: {}
+
+  is-extglob@2.1.1: {}
+
+  is-finalizationregistry@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-fullwidth-code-point@4.0.0: {}
+
+  is-fullwidth-code-point@5.1.0:
+    dependencies:
+      get-east-asian-width: 1.4.0
+
+  is-generator-function@1.1.2:
+    dependencies:
+      call-bound: 1.0.4
+      generator-function: 2.0.1
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-in-ci@1.0.0: {}
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-installed-globally@1.0.0:
+    dependencies:
+      global-directory: 4.0.1
+      is-path-inside: 4.0.0
+
+  is-interactive@2.0.0: {}
+
+  is-map@2.0.3: {}
+
+  is-module@1.0.0: {}
+
+  is-negative-zero@2.0.3: {}
+
+  is-npm@6.1.0: {}
+
+  is-number-object@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-number@7.0.0: {}
+
+  is-obj@1.0.1: {}
+
+  is-obj@2.0.0: {}
+
+  is-path-inside@4.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-plain-object@3.0.1: {}
+
+  is-plain-object@5.0.0: {}
+
+  is-reference@1.2.1:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-regexp@1.0.0: {}
+
+  is-set@2.0.3: {}
+
+  is-shared-array-buffer@1.0.4:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-stream@2.0.1: {}
+
+  is-stream@3.0.0: {}
+
+  is-stream@4.0.1: {}
+
+  is-string@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-subdir@1.2.0:
+    dependencies:
+      better-path-resolve: 1.0.0
+
+  is-symbol@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+
+  is-text-path@2.0.0:
+    dependencies:
+      text-extensions: 2.4.0
+
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.19
+
+  is-unicode-supported@1.3.0: {}
+
+  is-unicode-supported@2.1.0: {}
+
+  is-weakmap@2.0.2: {}
+
+  is-weakref@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-weakset@2.0.4:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-what@3.14.1:
+    optional: true
+
+  is-what@5.5.0: {}
+
+  is-windows@1.0.2: {}
+
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
+  is-wsl@3.1.0:
+    dependencies:
+      is-inside-container: 1.0.0
+
+  is64bit@2.0.0:
+    dependencies:
+      system-architecture: 0.1.0
+
+  isarray@1.0.0: {}
+
+  isarray@2.0.5: {}
+
+  isexe@2.0.0: {}
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jackspeak@4.1.1:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+
+  jake@10.9.4:
+    dependencies:
+      async: 3.2.6
+      filelist: 1.0.4
+      picocolors: 1.1.1
+
+  jiti@2.6.1: {}
+
+  jju@1.4.0: {}
+
+  js-beautify@1.15.4:
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 1.0.4
+      glob: 10.5.0
+      js-cookie: 3.0.5
+      nopt: 7.2.1
+
+  js-cookie@3.0.5: {}
+
+  js-md5@0.8.3: {}
+
+  js-tokens@4.0.0: {}
+
+  js-tokens@9.0.1: {}
+
+  js-yaml@3.14.2:
+    dependencies:
+      argparse: 1.0.10
+      esprima: 4.0.1
+
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
+  jsdoc-type-pratt-parser@4.8.0: {}
+
+  jsdoc-type-pratt-parser@6.10.0: {}
+
+  jsdoc-type-pratt-parser@7.0.0: {}
+
+  jsesc@3.1.0: {}
+
+  json-bigint@1.0.0:
+    dependencies:
+      bignumber.js: 9.3.1
+
+  json-buffer@3.0.1: {}
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-schema@0.4.0: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json5@2.2.3: {}
+
+  jsonc-eslint-parser@2.4.2:
+    dependencies:
+      acorn: 8.15.0
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      semver: 7.7.3
+
+  jsonfile@4.0.0:
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsonfile@6.2.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsonparse@1.3.1: {}
+
+  jsonpointer@5.0.1: {}
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  keyv@5.5.5:
+    dependencies:
+      '@keyv/serialize': 1.1.1
+
+  kind-of@6.0.3: {}
+
+  kleur@4.1.5: {}
+
+  klona@2.0.6: {}
+
+  knitwork@1.3.0: {}
+
+  known-css-properties@0.37.0: {}
+
+  kolorist@1.8.0: {}
+
+  ky@1.14.1: {}
+
+  latest-version@9.0.0:
+    dependencies:
+      package-json: 10.0.1
+
+  lazystream@1.0.1:
+    dependencies:
+      readable-stream: 2.3.8
+
+  lefthook-darwin-arm64@1.13.6:
+    optional: true
+
+  lefthook-darwin-x64@1.13.6:
+    optional: true
+
+  lefthook-freebsd-arm64@1.13.6:
+    optional: true
+
+  lefthook-freebsd-x64@1.13.6:
+    optional: true
+
+  lefthook-linux-arm64@1.13.6:
+    optional: true
+
+  lefthook-linux-x64@1.13.6:
+    optional: true
+
+  lefthook-openbsd-arm64@1.13.6:
+    optional: true
+
+  lefthook-openbsd-x64@1.13.6:
+    optional: true
+
+  lefthook-windows-arm64@1.13.6:
+    optional: true
+
+  lefthook-windows-x64@1.13.6:
+    optional: true
+
+  lefthook@1.13.6:
+    optionalDependencies:
+      lefthook-darwin-arm64: 1.13.6
+      lefthook-darwin-x64: 1.13.6
+      lefthook-freebsd-arm64: 1.13.6
+      lefthook-freebsd-x64: 1.13.6
+      lefthook-linux-arm64: 1.13.6
+      lefthook-linux-x64: 1.13.6
+      lefthook-openbsd-arm64: 1.13.6
+      lefthook-openbsd-x64: 1.13.6
+      lefthook-windows-arm64: 1.13.6
+      lefthook-windows-x64: 1.13.6
+
+  less@4.5.1:
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.8.1
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.11
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.3.1
+      source-map: 0.6.1
+    optional: true
+
+  leven@3.1.0: {}
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  listhen@1.9.0:
+    dependencies:
+      '@parcel/watcher': 2.5.1
+      '@parcel/watcher-wasm': 2.5.1
+      citty: 0.1.6
+      clipboardy: 4.0.0
+      consola: 3.4.2
+      crossws: 0.3.5
+      defu: 6.1.4
+      get-port-please: 3.2.0
+      h3: 1.15.4
+      http-shutdown: 1.2.2
+      jiti: 2.6.1
+      mlly: 1.8.0
+      node-forge: 1.3.3
+      pathe: 1.1.2
+      std-env: 3.10.0
+      ufo: 1.6.1
+      untun: 0.1.3
+      uqr: 0.1.2
+
+  listr2@8.3.3:
+    dependencies:
+      cli-truncate: 4.0.0
+      colorette: 2.0.20
+      eventemitter3: 5.0.1
+      log-update: 6.1.0
+      rfdc: 1.4.1
+      wrap-ansi: 9.0.2
+
+  local-pkg@1.1.2:
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 2.3.0
+      quansync: 0.2.11
+
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  locate-path@7.2.0:
+    dependencies:
+      p-locate: 6.0.0
+
+  locko@1.1.0: {}
+
+  lodash-es@4.17.22: {}
+
+  lodash.camelcase@4.3.0: {}
+
+  lodash.clonedeep@4.5.0: {}
+
+  lodash.debounce@4.0.8: {}
+
+  lodash.defaults@4.2.0: {}
+
+  lodash.isarguments@3.1.0: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.kebabcase@4.1.1: {}
+
+  lodash.memoize@4.1.2: {}
+
+  lodash.merge@4.6.2: {}
+
+  lodash.mergewith@4.6.2: {}
+
+  lodash.snakecase@4.1.1: {}
+
+  lodash.sortby@4.7.0: {}
+
+  lodash.startcase@4.4.0: {}
+
+  lodash.truncate@4.4.2: {}
+
+  lodash.uniq@4.5.0: {}
+
+  lodash.upperfirst@4.3.1: {}
+
+  lodash@4.17.21: {}
+
+  log-symbols@6.0.0:
+    dependencies:
+      chalk: 5.6.2
+      is-unicode-supported: 1.3.0
+
+  log-update@6.1.0:
+    dependencies:
+      ansi-escapes: 7.2.0
+      cli-cursor: 5.0.0
+      slice-ansi: 7.1.2
+      strip-ansi: 7.1.2
+      wrap-ansi: 9.0.2
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  loupe@3.2.1: {}
+
+  lower-case@2.0.2:
+    dependencies:
+      tslib: 2.8.1
+
+  lru-cache@10.4.3: {}
+
+  lru-cache@11.2.4: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lru-cache@6.0.0:
+    dependencies:
+      yallist: 4.0.0
+
+  lucide-vue-next@0.553.0(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.26(typescript@5.9.3)
+
+  lz-string@1.5.0: {}
+
+  magic-string@0.25.9:
+    dependencies:
+      sourcemap-codec: 1.4.8
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  magicast@0.5.1:
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+      source-map-js: 1.2.1
+
+  make-dir@2.1.0:
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.2
+    optional: true
+
+  math-intrinsics@1.1.0: {}
+
+  mathml-tag-names@2.1.3: {}
+
+  mdn-data@2.0.28: {}
+
+  mdn-data@2.12.2: {}
+
+  mdn-data@2.25.0: {}
+
+  meow@12.1.1: {}
+
+  meow@13.2.0: {}
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mime-db@1.52.0: {}
+
+  mime-db@1.54.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  mime@1.6.0:
+    optional: true
+
+  mime@3.0.0: {}
+
+  mime@4.1.0: {}
+
+  mimic-fn@4.0.0: {}
+
+  mimic-function@5.0.1: {}
+
+  minimatch@10.0.3:
+    dependencies:
+      '@isaacs/brace-expansion': 5.0.0
+
+  minimatch@10.1.1:
+    dependencies:
+      '@isaacs/brace-expansion': 5.0.0
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimatch@5.1.6:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimatch@7.4.6:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimatch@9.0.1:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimist@1.2.8: {}
+
+  minipass-collect@2.0.1:
+    dependencies:
+      minipass: 7.1.2
+
+  minipass-flush@1.0.5:
+    dependencies:
+      minipass: 3.3.6
+
+  minipass-pipeline@1.2.4:
+    dependencies:
+      minipass: 3.3.6
+
+  minipass@3.3.6:
+    dependencies:
+      yallist: 4.0.0
+
+  minipass@7.1.2: {}
+
+  minizlib@3.1.0:
+    dependencies:
+      minipass: 7.1.2
+
+  mitt@3.0.1: {}
+
+  mkdist@2.4.1(sass@1.97.1)(typescript@5.9.3)(vue-tsc@3.2.1(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      autoprefixer: 10.4.23(postcss@8.5.6)
+      citty: 0.1.6
+      cssnano: 7.1.2(postcss@8.5.6)
+      defu: 6.1.4
+      esbuild: 0.25.3
+      jiti: 2.6.1
+      mlly: 1.8.0
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      postcss: 8.5.6
+      postcss-nested: 7.0.2(postcss@8.5.6)
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      sass: 1.97.1
+      typescript: 5.9.3
+      vue: 3.5.26(typescript@5.9.3)
+      vue-tsc: 3.2.1(typescript@5.9.3)
+
+  mlly@1.8.0:
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.1
+
+  mri@1.2.0: {}
+
+  mrmime@2.0.1: {}
+
+  ms@2.1.3: {}
+
+  muggle-string@0.4.1: {}
+
+  multimatch@5.0.0:
+    dependencies:
+      '@types/minimatch': 3.0.5
+      array-differ: 3.0.0
+      array-union: 2.1.0
+      arrify: 2.0.1
+      minimatch: 3.1.2
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.11: {}
+
+  nanoid@5.1.6: {}
+
+  nanopop@2.4.2: {}
+
+  napi-postinstall@0.3.4: {}
+
+  natural-compare@1.4.0: {}
+
+  natural-orderby@5.0.0: {}
+
+  needle@3.3.1:
+    dependencies:
+      iconv-lite: 0.6.3
+      sax: 1.4.3
+    optional: true
+
+  nitropack@2.12.9:
+    dependencies:
+      '@cloudflare/kv-asset-handler': 0.4.1
+      '@rollup/plugin-alias': 5.1.1(rollup@4.54.0)
+      '@rollup/plugin-commonjs': 28.0.9(rollup@4.54.0)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.54.0)
+      '@rollup/plugin-json': 6.1.0(rollup@4.54.0)
+      '@rollup/plugin-node-resolve': 16.0.3(rollup@4.54.0)
+      '@rollup/plugin-replace': 6.0.3(rollup@4.54.0)
+      '@rollup/plugin-terser': 0.4.4(rollup@4.54.0)
+      '@vercel/nft': 0.30.4(rollup@4.54.0)
+      archiver: 7.0.1
+      c12: 3.3.3(magicast@0.5.1)
+      chokidar: 4.0.3
+      citty: 0.1.6
+      compatx: 0.2.0
+      confbox: 0.2.2
+      consola: 3.4.2
+      cookie-es: 2.0.0
+      croner: 9.1.0
+      crossws: 0.3.5
+      db0: 0.3.4
+      defu: 6.1.4
+      destr: 2.0.5
+      dot-prop: 10.1.0
+      esbuild: 0.25.3
+      escape-string-regexp: 5.0.0
+      etag: 1.8.1
+      exsolve: 1.0.8
+      globby: 15.0.0
+      gzip-size: 7.0.0
+      h3: 1.15.4
+      hookable: 5.5.3
+      httpxy: 0.1.7
+      ioredis: 5.8.2
+      jiti: 2.6.1
+      klona: 2.0.6
+      knitwork: 1.3.0
+      listhen: 1.9.0
+      magic-string: 0.30.21
+      magicast: 0.5.1
+      mime: 4.1.0
+      mlly: 1.8.0
+      node-fetch-native: 1.6.7
+      node-mock-http: 1.0.4
+      ofetch: 1.5.1
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      pkg-types: 2.3.0
+      pretty-bytes: 7.1.0
+      radix3: 1.1.2
+      rollup: 4.54.0
+      rollup-plugin-visualizer: 6.0.5(rollup@4.54.0)
+      scule: 1.3.0
+      semver: 7.7.3
+      serve-placeholder: 2.0.2
+      serve-static: 2.2.1
+      source-map: 0.7.6
+      std-env: 3.10.0
+      ufo: 1.6.1
+      ultrahtml: 1.6.0
+      uncrypto: 0.1.3
+      unctx: 2.5.0
+      unenv: 2.0.0-rc.24
+      unimport: 5.6.0
+      unplugin-utils: 0.3.1
+      unstorage: 1.17.3(db0@0.3.4)(ioredis@5.8.2)
+      untyped: 2.0.0
+      unwasm: 0.3.11
+      youch: 4.1.0-beta.13
+      youch-core: 0.3.3
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - bare-abort-controller
+      - better-sqlite3
+      - drizzle-orm
+      - encoding
+      - idb-keyval
+      - mysql2
+      - react-native-b4a
+      - rolldown
+      - sqlite3
+      - supports-color
+      - uploadthing
+
+  no-case@3.0.4:
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.8.1
+
+  node-addon-api@7.1.1: {}
+
+  node-cleanup@2.1.2: {}
+
+  node-domexception@1.0.0: {}
+
+  node-fetch-cache@5.1.0:
+    dependencies:
+      cacache: 20.0.3
+      formdata-node: 6.0.3
+      locko: 1.1.0
+      node-fetch: 3.3.2
+
+  node-fetch-native@1.6.7: {}
+
+  node-fetch@2.7.0:
+    dependencies:
+      whatwg-url: 5.0.0
+
+  node-fetch@3.3.2:
+    dependencies:
+      data-uri-to-buffer: 4.0.1
+      fetch-blob: 3.2.0
+      formdata-polyfill: 4.0.10
+
+  node-forge@1.3.3: {}
+
+  node-gyp-build@4.8.4: {}
+
+  node-html-parser@5.4.2:
+    dependencies:
+      css-select: 4.3.0
+      he: 1.2.0
+
+  node-mock-http@1.0.4: {}
+
+  node-releases@2.0.27: {}
+
+  nopt@7.2.1:
+    dependencies:
+      abbrev: 2.0.0
+
+  nopt@8.1.0:
+    dependencies:
+      abbrev: 3.0.1
+
+  normalize-path@3.0.0: {}
+
+  npm-run-path@5.3.0:
+    dependencies:
+      path-key: 4.0.0
+
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
+  nprogress@0.2.0: {}
+
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
+  nypm@0.6.2:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      tinyexec: 1.0.2
+
+  object-assign@4.1.1: {}
+
+  object-deep-merge@2.0.0: {}
+
+  object-hash@3.0.0: {}
+
+  object-inspect@1.13.4: {}
+
+  object-keys@1.1.1: {}
+
+  object.assign@4.1.7:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+
+  ofetch@1.5.1:
+    dependencies:
+      destr: 2.0.5
+      node-fetch-native: 1.6.7
+      ufo: 1.6.1
+
+  ohash@2.0.11: {}
+
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  open@10.2.0:
+    dependencies:
+      default-browser: 5.4.0
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      wsl-utils: 0.1.0
+
+  open@8.4.2:
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  ora@8.2.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 2.9.2
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 6.0.0
+      stdin-discarder: 0.2.2
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+
+  outdent@0.5.0: {}
+
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
+  p-filter@2.1.0:
+    dependencies:
+      p-map: 2.1.0
+
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-limit@4.0.0:
+    dependencies:
+      yocto-queue: 1.2.2
+
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  p-locate@6.0.0:
+    dependencies:
+      p-limit: 4.0.0
+
+  p-map@2.1.0: {}
+
+  p-map@7.0.4: {}
+
+  p-try@2.2.0: {}
+
+  package-json-from-dist@1.0.1: {}
+
+  package-json@10.0.1:
+    dependencies:
+      ky: 1.14.1
+      registry-auth-token: 5.1.0
+      registry-url: 6.0.1
+      semver: 7.7.3
+
+  package-manager-detector@0.2.11:
+    dependencies:
+      quansync: 0.2.11
+
+  package-manager-detector@1.6.0: {}
+
+  pako@2.1.0: {}
+
+  param-case@3.0.4:
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.8.1
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parent-module@2.0.0:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-imports-exports@0.2.4:
+    dependencies:
+      parse-statements: 1.0.11
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse-ms@4.0.0: {}
+
+  parse-node-version@1.0.1:
+    optional: true
+
+  parse-passwd@1.0.0: {}
+
+  parse-statements@1.0.11: {}
+
+  parse5-htmlparser2-tree-adapter@7.1.0:
+    dependencies:
+      domhandler: 5.0.3
+      parse5: 7.3.0
+
+  parse5-parser-stream@7.1.2:
+    dependencies:
+      parse5: 7.3.0
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  parseurl@1.3.3: {}
+
+  pascal-case@3.1.2:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.8.1
+
+  path-browserify@1.0.1: {}
+
+  path-exists@4.0.0: {}
+
+  path-exists@5.0.0: {}
+
+  path-key@3.1.1: {}
+
+  path-key@4.0.0: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  path-scurry@2.0.1:
+    dependencies:
+      lru-cache: 11.2.4
+      minipass: 7.1.2
+
+  path-type@4.0.0: {}
+
+  path-type@6.0.0: {}
+
+  pathe@0.2.0: {}
+
+  pathe@1.1.2: {}
+
+  pathe@2.0.3: {}
+
+  pathval@2.0.1: {}
+
+  peek-readable@5.4.2: {}
+
+  perfect-debounce@1.0.0: {}
+
+  perfect-debounce@2.0.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  picomatch@4.0.3: {}
+
+  pify@2.3.0: {}
+
+  pify@4.0.1: {}
+
+  pinia-plugin-persistedstate@4.7.1(@nuxt/kit@4.2.2(magicast@0.5.1))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))):
+    dependencies:
+      defu: 6.1.4
+    optionalDependencies:
+      '@nuxt/kit': 4.2.2(magicast@0.5.1)
+      pinia: 3.0.4(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
+
+  pinia@3.0.4(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.9
+      vue: 3.5.26(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+
+  pirates@4.0.7: {}
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.0
+      pathe: 2.0.3
+
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
+  playwright-core@1.57.0: {}
+
+  playwright@1.57.0:
+    dependencies:
+      playwright-core: 1.57.0
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  please-upgrade-node@3.2.0:
+    dependencies:
+      semver-compare: 1.0.0
+
+  pluralize@8.0.0: {}
+
+  pngjs@5.0.0: {}
+
+  popmotion@11.0.5:
+    dependencies:
+      framesync: 6.1.2
+      hey-listen: 1.0.8
+      style-value-types: 5.1.2
+      tslib: 2.4.0
+
+  possible-typed-array-names@1.1.0: {}
+
+  postcss-antd-fixes@0.2.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-attribute-case-insensitive@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-calc@10.1.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+      postcss-value-parser: 4.2.0
+
+  postcss-clamp@4.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-color-functional-notation@7.0.12(postcss@8.5.6):
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  postcss-color-hex-alpha@10.0.0(postcss@8.5.6):
+    dependencies:
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-color-rebeccapurple@10.0.0(postcss@8.5.6):
+    dependencies:
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-colormin@7.0.5(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-api: 3.0.0
+      colord: 2.9.3
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-convert-values@7.0.8(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-custom-media@11.0.6(postcss@8.5.6):
+    dependencies:
+      '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      postcss: 8.5.6
+
+  postcss-custom-properties@14.0.6(postcss@8.5.6):
+    dependencies:
+      '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-custom-selectors@8.0.5(postcss@8.5.6):
+    dependencies:
+      '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-dir-pseudo-class@9.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-discard-comments@7.0.5(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-discard-duplicates@7.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-discard-empty@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-discard-overridden@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-double-position-gradients@6.0.4(postcss@8.5.6):
+    dependencies:
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-focus-visible@10.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-focus-within@9.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-font-variant@5.0.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-gap-properties@6.0.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-html@1.8.0:
+    dependencies:
+      htmlparser2: 8.0.2
+      js-tokens: 9.0.1
+      postcss: 8.5.6
+      postcss-safe-parser: 6.0.0(postcss@8.5.6)
+
+  postcss-image-set-function@7.0.0(postcss@8.5.6):
+    dependencies:
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-import@15.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.11
+
+  postcss-import@16.1.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.11
+
+  postcss-js@4.1.0(postcss@8.5.6):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.6
+
+  postcss-lab-function@7.0.12(postcss@8.5.6):
+    dependencies:
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/utilities': 2.0.0(postcss@8.5.6)
+      postcss: 8.5.6
+
+  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.6)(yaml@2.8.2):
+    dependencies:
+      lilconfig: 3.1.3
+    optionalDependencies:
+      jiti: 2.6.1
+      postcss: 8.5.6
+      yaml: 2.8.2
+
+  postcss-logical@8.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-media-query-parser@0.2.3: {}
+
+  postcss-merge-longhand@7.0.5(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      stylehacks: 7.0.7(postcss@8.5.6)
+
+  postcss-merge-rules@7.0.7(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-api: 3.0.0
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-minify-font-values@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-gradients@7.0.1(postcss@8.5.6):
+    dependencies:
+      colord: 2.9.3
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-params@7.0.5(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-minify-selectors@7.0.5(postcss@8.5.6):
+    dependencies:
+      cssesc: 3.0.0
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-nested@5.0.6(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+
+  postcss-nested@6.2.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 6.1.2
+
+  postcss-nested@7.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-nesting@13.0.2(postcss@8.5.6):
+    dependencies:
+      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.1)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-normalize-charset@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-normalize-display-values@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-positions@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-repeat-style@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-string@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-timing-functions@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-unicode@7.0.5(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-url@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-normalize-whitespace@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-opacity-percentage@3.0.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-ordered-values@7.0.2(postcss@8.5.6):
+    dependencies:
+      cssnano-utils: 5.0.1(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-overflow-shorthand@6.0.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-page-break@3.0.4(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-place@10.0.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-preset-env@10.5.0(postcss@8.5.6):
+    dependencies:
+      '@csstools/postcss-alpha-function': 1.0.1(postcss@8.5.6)
+      '@csstools/postcss-cascade-layers': 5.0.2(postcss@8.5.6)
+      '@csstools/postcss-color-function': 4.0.12(postcss@8.5.6)
+      '@csstools/postcss-color-function-display-p3-linear': 1.0.1(postcss@8.5.6)
+      '@csstools/postcss-color-mix-function': 3.0.12(postcss@8.5.6)
+      '@csstools/postcss-color-mix-variadic-function-arguments': 1.0.2(postcss@8.5.6)
+      '@csstools/postcss-content-alt-text': 2.0.8(postcss@8.5.6)
+      '@csstools/postcss-contrast-color-function': 2.0.12(postcss@8.5.6)
+      '@csstools/postcss-exponential-functions': 2.0.9(postcss@8.5.6)
+      '@csstools/postcss-font-format-keywords': 4.0.0(postcss@8.5.6)
+      '@csstools/postcss-gamut-mapping': 2.0.11(postcss@8.5.6)
+      '@csstools/postcss-gradients-interpolation-method': 5.0.12(postcss@8.5.6)
+      '@csstools/postcss-hwb-function': 4.0.12(postcss@8.5.6)
+      '@csstools/postcss-ic-unit': 4.0.4(postcss@8.5.6)
+      '@csstools/postcss-initial': 2.0.1(postcss@8.5.6)
+      '@csstools/postcss-is-pseudo-class': 5.0.3(postcss@8.5.6)
+      '@csstools/postcss-light-dark-function': 2.0.11(postcss@8.5.6)
+      '@csstools/postcss-logical-float-and-clear': 3.0.0(postcss@8.5.6)
+      '@csstools/postcss-logical-overflow': 2.0.0(postcss@8.5.6)
+      '@csstools/postcss-logical-overscroll-behavior': 2.0.0(postcss@8.5.6)
+      '@csstools/postcss-logical-resize': 3.0.0(postcss@8.5.6)
+      '@csstools/postcss-logical-viewport-units': 3.0.4(postcss@8.5.6)
+      '@csstools/postcss-media-minmax': 2.0.9(postcss@8.5.6)
+      '@csstools/postcss-media-queries-aspect-ratio-number-values': 3.0.5(postcss@8.5.6)
+      '@csstools/postcss-nested-calc': 4.0.0(postcss@8.5.6)
+      '@csstools/postcss-normalize-display-values': 4.0.0(postcss@8.5.6)
+      '@csstools/postcss-oklab-function': 4.0.12(postcss@8.5.6)
+      '@csstools/postcss-position-area-property': 1.0.0(postcss@8.5.6)
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.6)
+      '@csstools/postcss-random-function': 2.0.1(postcss@8.5.6)
+      '@csstools/postcss-relative-color-syntax': 3.0.12(postcss@8.5.6)
+      '@csstools/postcss-scope-pseudo-class': 4.0.1(postcss@8.5.6)
+      '@csstools/postcss-sign-functions': 1.1.4(postcss@8.5.6)
+      '@csstools/postcss-stepped-value-functions': 4.0.9(postcss@8.5.6)
+      '@csstools/postcss-system-ui-font-family': 1.0.0(postcss@8.5.6)
+      '@csstools/postcss-text-decoration-shorthand': 4.0.3(postcss@8.5.6)
+      '@csstools/postcss-trigonometric-functions': 4.0.9(postcss@8.5.6)
+      '@csstools/postcss-unset-value': 4.0.0(postcss@8.5.6)
+      autoprefixer: 10.4.23(postcss@8.5.6)
+      browserslist: 4.28.1
+      css-blank-pseudo: 7.0.1(postcss@8.5.6)
+      css-has-pseudo: 7.0.3(postcss@8.5.6)
+      css-prefers-color-scheme: 10.0.0(postcss@8.5.6)
+      cssdb: 8.5.2
+      postcss: 8.5.6
+      postcss-attribute-case-insensitive: 7.0.1(postcss@8.5.6)
+      postcss-clamp: 4.1.0(postcss@8.5.6)
+      postcss-color-functional-notation: 7.0.12(postcss@8.5.6)
+      postcss-color-hex-alpha: 10.0.0(postcss@8.5.6)
+      postcss-color-rebeccapurple: 10.0.0(postcss@8.5.6)
+      postcss-custom-media: 11.0.6(postcss@8.5.6)
+      postcss-custom-properties: 14.0.6(postcss@8.5.6)
+      postcss-custom-selectors: 8.0.5(postcss@8.5.6)
+      postcss-dir-pseudo-class: 9.0.1(postcss@8.5.6)
+      postcss-double-position-gradients: 6.0.4(postcss@8.5.6)
+      postcss-focus-visible: 10.0.1(postcss@8.5.6)
+      postcss-focus-within: 9.0.1(postcss@8.5.6)
+      postcss-font-variant: 5.0.0(postcss@8.5.6)
+      postcss-gap-properties: 6.0.0(postcss@8.5.6)
+      postcss-image-set-function: 7.0.0(postcss@8.5.6)
+      postcss-lab-function: 7.0.12(postcss@8.5.6)
+      postcss-logical: 8.1.0(postcss@8.5.6)
+      postcss-nesting: 13.0.2(postcss@8.5.6)
+      postcss-opacity-percentage: 3.0.0(postcss@8.5.6)
+      postcss-overflow-shorthand: 6.0.0(postcss@8.5.6)
+      postcss-page-break: 3.0.4(postcss@8.5.6)
+      postcss-place: 10.0.0(postcss@8.5.6)
+      postcss-pseudo-class-any-link: 10.0.1(postcss@8.5.6)
+      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.6)
+      postcss-selector-not: 8.0.1(postcss@8.5.6)
+
+  postcss-pseudo-class-any-link@10.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-reduce-initial@7.0.5(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-api: 3.0.0
+      postcss: 8.5.6
+
+  postcss-reduce-transforms@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
+  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-resolve-nested-selector@0.1.6: {}
+
+  postcss-safe-parser@6.0.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-safe-parser@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-scss@4.0.9(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-selector-not@8.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-selector-parser@7.1.1:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-sorting@8.0.2(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-sorting@9.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-svgo@7.1.0(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+      svgo: 4.0.0
+
+  postcss-unique-selectors@7.0.4(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  prettier-linter-helpers@1.0.0:
+    dependencies:
+      fast-diff: 1.3.0
+
+  prettier-plugin-tailwindcss@0.7.2(prettier@3.7.4):
+    dependencies:
+      prettier: 3.7.4
+
+  prettier@2.8.8: {}
+
+  prettier@3.7.4: {}
+
+  pretty-bytes@5.6.0: {}
+
+  pretty-bytes@6.1.1: {}
+
+  pretty-bytes@7.1.0: {}
+
+  pretty-ms@9.3.0:
+    dependencies:
+      parse-ms: 4.0.0
+
+  process-nextick-args@2.0.1: {}
+
+  process@0.11.10: {}
+
+  proto-list@1.2.4: {}
+
+  proxy-from-env@1.1.0: {}
+
+  prr@1.0.1:
+    optional: true
+
+  publint@0.3.16:
+    dependencies:
+      '@publint/pack': 0.1.2
+      package-manager-detector: 1.6.0
+      picocolors: 1.1.1
+      sade: 1.8.1
+
+  punycode@2.3.1: {}
+
+  pupa@3.3.0:
+    dependencies:
+      escape-goat: 4.0.0
+
+  qified@0.5.3:
+    dependencies:
+      hookified: 1.14.0
+
+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+
+  qs@6.14.0:
+    dependencies:
+      side-channel: 1.1.0
+
+  quansync@0.2.11: {}
+
+  queue-microtask@1.2.3: {}
+
+  radix3@1.1.2: {}
+
+  randombytes@2.1.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  range-parser@1.2.1: {}
+
+  rc9@2.1.2:
+    dependencies:
+      defu: 6.1.4
+      destr: 2.0.5
+
+  rc@1.2.8:
+    dependencies:
+      deep-extend: 0.6.0
+      ini: 1.3.8
+      minimist: 1.2.8
+      strip-json-comments: 2.0.1
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  read-yaml-file@1.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      js-yaml: 3.14.2
+      pify: 4.0.1
+      strip-bom: 3.0.0
+
+  read-yaml-file@2.1.0:
+    dependencies:
+      js-yaml: 4.1.1
+      strip-bom: 4.0.0
+
+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
+  readable-stream@4.7.0:
+    dependencies:
+      abort-controller: 3.0.0
+      buffer: 6.0.3
+      events: 3.3.0
+      process: 0.11.10
+      string_decoder: 1.3.0
+
+  readdir-glob@1.1.3:
+    dependencies:
+      minimatch: 5.1.6
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
+  readdirp@4.1.2: {}
+
+  readdirp@5.0.0: {}
+
+  redis-errors@1.2.0: {}
+
+  redis-parser@3.0.0:
+    dependencies:
+      redis-errors: 1.2.0
+
+  refa@0.12.1:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+
+  reflect.getprototypeof@1.0.10:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+
+  regenerate-unicode-properties@10.2.2:
+    dependencies:
+      regenerate: 1.4.2
+
+  regenerate@1.4.2: {}
+
+  regexp-ast-analysis@0.7.1:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      refa: 0.12.1
+
+  regexp-tree@0.1.27: {}
+
+  regexp.prototype.flags@1.5.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      set-function-name: 2.0.2
+
+  regexpu-core@6.4.0:
+    dependencies:
+      regenerate: 1.4.2
+      regenerate-unicode-properties: 10.2.2
+      regjsgen: 0.8.0
+      regjsparser: 0.13.0
+      unicode-match-property-ecmascript: 2.0.0
+      unicode-match-property-value-ecmascript: 2.2.1
+
+  registry-auth-token@5.1.0:
+    dependencies:
+      '@pnpm/npm-conf': 2.3.1
+
+  registry-url@6.0.1:
+    dependencies:
+      rc: 1.2.8
+
+  regjsgen@0.8.0: {}
+
+  regjsparser@0.13.0:
+    dependencies:
+      jsesc: 3.1.0
+
+  reka-ui@2.7.0(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@floating-ui/vue': 1.1.9(vue@3.5.26(typescript@5.9.3))
+      '@internationalized/date': 3.10.1
+      '@internationalized/number': 3.6.5
+      '@tanstack/vue-virtual': 3.13.13(vue@3.5.26(typescript@5.9.3))
+      '@vueuse/core': 12.8.2(typescript@5.9.3)
+      '@vueuse/shared': 12.8.2(typescript@5.9.3)
+      aria-hidden: 1.2.6
+      defu: 6.1.4
+      ohash: 2.0.11
+      vue: 3.5.26(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+
+  relateurl@0.2.7: {}
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  require-main-filename@2.0.0: {}
+
+  require-package-name@2.0.1: {}
+
+  reserved-identifiers@1.2.0: {}
+
+  resize-observer-polyfill@1.5.1: {}
+
+  resolve-dir@1.0.1:
+    dependencies:
+      expand-tilde: 2.0.2
+      global-modules: 1.0.0
+
+  resolve-from@4.0.0: {}
+
+  resolve-from@5.0.0: {}
+
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve.exports@2.0.3: {}
+
+  resolve@1.22.11:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  reusify@1.1.0: {}
+
+  rfdc@1.4.1: {}
+
+  rimraf@6.1.2:
+    dependencies:
+      glob: 13.0.0
+      package-json-from-dist: 1.0.1
+
+  rollup-plugin-dts@6.3.0(rollup@4.54.0)(typescript@5.9.3):
+    dependencies:
+      magic-string: 0.30.21
+      rollup: 4.54.0
+      typescript: 5.9.3
+    optionalDependencies:
+      '@babel/code-frame': 7.27.1
+
+  rollup-plugin-visualizer@5.14.0(rollup@4.54.0):
+    dependencies:
+      open: 8.4.2
+      picomatch: 4.0.3
+      source-map: 0.7.6
+      yargs: 17.7.2
+    optionalDependencies:
+      rollup: 4.54.0
+
+  rollup-plugin-visualizer@6.0.5(rollup@4.54.0):
+    dependencies:
+      open: 8.4.2
+      picomatch: 4.0.3
+      source-map: 0.7.6
+      yargs: 17.7.2
+    optionalDependencies:
+      rollup: 4.54.0
+
+  rollup@2.79.2:
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  rollup@4.54.0:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.54.0
+      '@rollup/rollup-android-arm64': 4.54.0
+      '@rollup/rollup-darwin-arm64': 4.54.0
+      '@rollup/rollup-darwin-x64': 4.54.0
+      '@rollup/rollup-freebsd-arm64': 4.54.0
+      '@rollup/rollup-freebsd-x64': 4.54.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.54.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.54.0
+      '@rollup/rollup-linux-arm64-gnu': 4.54.0
+      '@rollup/rollup-linux-arm64-musl': 4.54.0
+      '@rollup/rollup-linux-loong64-gnu': 4.54.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.54.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.54.0
+      '@rollup/rollup-linux-riscv64-musl': 4.54.0
+      '@rollup/rollup-linux-s390x-gnu': 4.54.0
+      '@rollup/rollup-linux-x64-gnu': 4.54.0
+      '@rollup/rollup-linux-x64-musl': 4.54.0
+      '@rollup/rollup-openharmony-arm64': 4.54.0
+      '@rollup/rollup-win32-arm64-msvc': 4.54.0
+      '@rollup/rollup-win32-ia32-msvc': 4.54.0
+      '@rollup/rollup-win32-x64-gnu': 4.54.0
+      '@rollup/rollup-win32-x64-msvc': 4.54.0
+      fsevents: 2.3.3
+
+  rotated-array-set@3.0.0: {}
+
+  run-applescript@7.1.0: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  sade@1.8.1:
+    dependencies:
+      mri: 1.2.0
+
+  safe-array-concat@1.1.3:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-buffer@5.1.2: {}
+
+  safe-buffer@5.2.1: {}
+
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
+  safer-buffer@2.1.2: {}
+
+  sass@1.97.1:
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.4
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+
+  sax@1.4.3: {}
+
+  scroll-into-view-if-needed@2.2.31:
+    dependencies:
+      compute-scroll-into-view: 1.0.20
+
+  scslre@0.3.0:
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+
+  scule@1.3.0: {}
+
+  secure-ls@2.0.0:
+    dependencies:
+      crypto-js: 4.2.0
+      lz-string: 1.5.0
+
+  select@1.1.2: {}
+
+  semver-compare@1.0.0: {}
+
+  semver@5.7.2:
+    optional: true
+
+  semver@6.3.1: {}
+
+  semver@7.5.4:
+    dependencies:
+      lru-cache: 6.0.0
+
+  semver@7.7.3: {}
+
+  send@1.2.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      mime-types: 3.0.2
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serialize-javascript@6.0.2:
+    dependencies:
+      randombytes: 2.1.0
+
+  serve-placeholder@2.0.2:
+    dependencies:
+      defu: 6.1.4
+
+  serve-static@2.2.1:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.1
+    transitivePeerDependencies:
+      - supports-color
+
+  set-blocking@2.0.0: {}
+
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
+  set-function-name@2.0.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+
+  setprototypeof@1.2.0: {}
+
+  shallow-equal@1.2.1: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  short-tree@3.0.0:
+    dependencies:
+      '@types/bintrees': 1.0.6
+      bintrees: 1.0.2
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  siginfo@2.0.0: {}
+
+  signal-exit@4.1.0: {}
+
+  sirv@3.0.2:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
+  sisteransi@1.0.5: {}
+
+  slash@3.0.0: {}
+
+  slash@5.1.0: {}
+
+  slice-ansi@4.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+
+  slice-ansi@5.0.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 4.0.0
+
+  slice-ansi@7.1.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 5.1.0
+
+  smob@1.5.0: {}
+
+  sortablejs@1.15.6: {}
+
+  source-map-js@1.2.1: {}
+
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  source-map@0.7.6: {}
+
+  source-map@0.8.0-beta.0:
+    dependencies:
+      whatwg-url: 7.1.0
+
+  sourcemap-codec@1.4.8: {}
+
+  spawndamnit@3.0.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  spdx-exceptions@2.5.0: {}
+
+  spdx-expression-parse@4.0.0:
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.22
+
+  spdx-license-ids@3.0.22: {}
+
+  speakingurl@14.0.1: {}
+
+  split2@4.2.0: {}
+
+  sprintf-js@1.0.3: {}
+
+  ssri@13.0.0:
+    dependencies:
+      minipass: 7.1.2
+
+  stable-hash-x@0.2.0: {}
+
+  stackback@0.0.2: {}
+
+  standard-as-callback@2.1.0: {}
+
+  statuses@2.0.2: {}
+
+  std-env@3.10.0: {}
+
+  stdin-discarder@0.2.2: {}
+
+  stop-iteration-iterator@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
+
+  streamx@2.23.0:
+    dependencies:
+      events-universal: 1.0.1
+      fast-fifo: 1.3.2
+      text-decoder: 1.2.3
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  string-argv@0.3.2: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.2
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
+  string.prototype.matchall@4.0.12:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      regexp.prototype.flags: 1.5.4
+      set-function-name: 2.0.2
+      side-channel: 1.1.0
+
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.1
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
+
+  string.prototype.trimend@1.0.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  stringify-object@3.3.0:
+    dependencies:
+      get-own-enumerable-property-symbols: 3.0.2
+      is-obj: 1.0.1
+      is-regexp: 1.0.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.2:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  strip-bom@3.0.0: {}
+
+  strip-bom@4.0.0: {}
+
+  strip-comments@2.0.1: {}
+
+  strip-final-newline@3.0.0: {}
+
+  strip-final-newline@4.0.0: {}
+
+  strip-indent@4.1.1: {}
+
+  strip-json-comments@2.0.1: {}
+
+  strip-json-comments@3.1.1: {}
+
+  strip-literal@3.1.0:
+    dependencies:
+      js-tokens: 9.0.1
+
+  strtok3@9.1.1:
+    dependencies:
+      '@tokenizer/token': 0.3.0
+      peek-readable: 5.4.2
+
+  stubborn-fs@2.0.0:
+    dependencies:
+      stubborn-utils: 1.0.2
+
+  stubborn-utils@1.0.2: {}
+
+  style-search@0.1.0: {}
+
+  style-value-types@5.1.2:
+    dependencies:
+      hey-listen: 1.0.8
+      tslib: 2.4.0
+
+  stylehacks@7.0.7(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+
+  stylelint-config-html@1.1.0(postcss-html@1.8.0)(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      postcss-html: 1.8.0
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint-config-recess-order@6.1.0(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      stylelint: 16.26.1(typescript@5.9.3)
+      stylelint-order: 6.0.4(stylelint@16.26.1(typescript@5.9.3))
+
+  stylelint-config-recommended-scss@14.1.0(postcss@8.5.6)(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      postcss-scss: 4.0.9(postcss@8.5.6)
+      stylelint: 16.26.1(typescript@5.9.3)
+      stylelint-config-recommended: 14.0.1(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-scss: 6.13.0(stylelint@16.26.1(typescript@5.9.3))
+    optionalDependencies:
+      postcss: 8.5.6
+
+  stylelint-config-recommended-vue@1.6.1(postcss-html@1.8.0)(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      postcss-html: 1.8.0
+      semver: 7.7.3
+      stylelint: 16.26.1(typescript@5.9.3)
+      stylelint-config-html: 1.1.0(postcss-html@1.8.0)(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-config-recommended: 17.0.0(stylelint@16.26.1(typescript@5.9.3))
+
+  stylelint-config-recommended@14.0.1(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint-config-recommended@16.0.0(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint-config-recommended@17.0.0(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint-config-standard@38.0.0(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      stylelint: 16.26.1(typescript@5.9.3)
+      stylelint-config-recommended: 16.0.0(stylelint@16.26.1(typescript@5.9.3))
+
+  stylelint-order@6.0.4(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      postcss: 8.5.6
+      postcss-sorting: 8.0.2(postcss@8.5.6)
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint-order@7.0.0(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      postcss: 8.5.6
+      postcss-sorting: 9.1.0(postcss@8.5.6)
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint-prettier@5.0.3(prettier@3.7.4)(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      prettier: 3.7.4
+      prettier-linter-helpers: 1.0.0
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint-scss@6.13.0(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      css-tree: 3.1.0
+      is-plain-object: 5.0.0
+      known-css-properties: 0.37.0
+      mdn-data: 2.25.0
+      postcss-media-query-parser: 0.2.3
+      postcss-resolve-nested-selector: 0.1.6
+      postcss-selector-parser: 7.1.1
+      postcss-value-parser: 4.2.0
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint@16.26.1(typescript@5.9.3):
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-syntax-patches-for-csstree': 1.0.22
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
+      '@dual-bundle/import-meta-resolve': 4.2.1
+      balanced-match: 2.0.0
+      colord: 2.9.3
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      css-functions-list: 3.2.3
+      css-tree: 3.1.0
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      fastest-levenshtein: 1.0.16
+      file-entry-cache: 11.1.1
+      global-modules: 2.0.0
+      globby: 11.1.0
+      globjoin: 0.1.4
+      html-tags: 3.3.1
+      ignore: 7.0.5
+      imurmurhash: 0.1.4
+      is-plain-object: 5.0.0
+      known-css-properties: 0.37.0
+      mathml-tag-names: 2.1.3
+      meow: 13.2.0
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-resolve-nested-selector: 0.1.6
+      postcss-safe-parser: 7.0.1(postcss@8.5.6)
+      postcss-selector-parser: 7.1.1
+      postcss-value-parser: 4.2.0
+      resolve-from: 5.0.0
+      string-width: 4.2.3
+      supports-hyperlinks: 3.2.0
+      svg-tags: 1.0.0
+      table: 6.9.0
+      write-file-atomic: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  stylis@4.3.6: {}
+
+  sucrase@3.35.1:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      tinyglobby: 0.2.15
+      ts-interface-checker: 0.1.13
+
+  superjson@2.2.6:
+    dependencies:
+      copy-anything: 4.0.5
+
+  supports-color@10.2.2: {}
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-hyperlinks@3.2.0:
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  sver@1.8.4:
+    optionalDependencies:
+      semver: 6.3.1
+
+  svg-tags@1.0.0: {}
+
+  svgo@4.0.0:
+    dependencies:
+      commander: 11.1.0
+      css-select: 5.2.2
+      css-tree: 3.1.0
+      css-what: 6.2.2
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.4.3
+
+  synckit@0.11.11:
+    dependencies:
+      '@pkgr/core': 0.2.9
+
+  system-architecture@0.1.0: {}
+
+  tabbable@6.3.0:
+    optional: true
+
+  table@6.9.0:
+    dependencies:
+      ajv: 8.17.1
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  tagged-tag@1.0.0: {}
+
+  tailwind-merge@2.6.0: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.19(yaml@2.8.2)):
+    dependencies:
+      tailwindcss: 3.4.19(yaml@2.8.2)
+
+  tailwindcss@3.4.19(yaml@2.8.2):
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 2.6.1
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-import: 15.1.0(postcss@8.5.6)
+      postcss-js: 4.1.0(postcss@8.5.6)
+      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.6)(yaml@2.8.2)
+      postcss-nested: 6.2.0(postcss@8.5.6)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.11
+      sucrase: 3.35.1
+    transitivePeerDependencies:
+      - tsx
+      - yaml
+
+  tapable@2.3.0: {}
+
+  tar-stream@3.1.7:
+    dependencies:
+      b4a: 1.7.3
+      fast-fifo: 1.3.2
+      streamx: 2.23.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  tar@7.5.2:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.2
+      minizlib: 3.1.0
+      yallist: 5.0.0
+
+  temp-dir@2.0.0: {}
+
+  tempy@0.6.0:
+    dependencies:
+      is-stream: 2.0.1
+      temp-dir: 2.0.0
+      type-fest: 0.16.0
+      unique-string: 2.0.0
+
+  term-size@2.2.1: {}
+
+  terser@5.44.1:
+    dependencies:
+      '@jridgewell/source-map': 0.3.11
+      acorn: 8.15.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+
+  text-decoder@1.2.3:
+    dependencies:
+      b4a: 1.7.3
+    transitivePeerDependencies:
+      - react-native-b4a
+
+  text-extensions@2.4.0: {}
+
+  theme-colors@0.1.0: {}
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  throttle-debounce@5.0.2: {}
+
+  through@2.3.8: {}
+
+  tiny-emitter@2.1.0: {}
+
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.2: {}
+
+  tinyexec@1.0.2: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  tinymce@7.9.1: {}
+
+  tinypool@1.1.1: {}
+
+  tinyrainbow@2.0.0: {}
+
+  tinyspy@4.0.4: {}
+
+  tippy.js@6.3.7:
+    dependencies:
+      '@popperjs/core': 2.11.8
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  to-valid-identifier@1.0.0:
+    dependencies:
+      '@sindresorhus/base62': 1.0.0
+      reserved-identifiers: 1.2.0
+
+  toidentifier@1.0.1: {}
+
+  token-types@6.1.2:
+    dependencies:
+      '@borewit/text-codec': 0.2.1
+      '@tokenizer/token': 0.3.0
+      ieee754: 1.2.1
+
+  totalist@3.0.1: {}
+
+  tr46@0.0.3: {}
+
+  tr46@1.0.1:
+    dependencies:
+      punycode: 2.3.1
+
+  ts-api-utils@1.4.3(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  ts-api-utils@2.1.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  ts-declaration-location@1.0.7(typescript@5.9.3):
+    dependencies:
+      picomatch: 4.0.3
+      typescript: 5.9.3
+
+  ts-interface-checker@0.1.13: {}
+
+  tslib@2.3.0: {}
+
+  tslib@2.4.0: {}
+
+  tslib@2.8.1: {}
+
+  turbo-darwin-64@2.7.2:
+    optional: true
+
+  turbo-darwin-arm64@2.7.2:
+    optional: true
+
+  turbo-linux-64@2.7.2:
+    optional: true
+
+  turbo-linux-arm64@2.7.2:
+    optional: true
+
+  turbo-windows-64@2.7.2:
+    optional: true
+
+  turbo-windows-arm64@2.7.2:
+    optional: true
+
+  turbo@2.7.2:
+    optionalDependencies:
+      turbo-darwin-64: 2.7.2
+      turbo-darwin-arm64: 2.7.2
+      turbo-linux-64: 2.7.2
+      turbo-linux-arm64: 2.7.2
+      turbo-windows-64: 2.7.2
+      turbo-windows-arm64: 2.7.2
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@0.16.0: {}
+
+  type-fest@4.41.0: {}
+
+  type-fest@5.3.1:
+    dependencies:
+      tagged-tag: 1.0.0
+
+  typed-array-buffer@1.0.3:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-length@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-offset@1.0.4:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+
+  typed-array-length@1.0.7:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
+  typescript@5.8.2: {}
+
+  typescript@5.9.3: {}
+
+  ufo@1.6.1: {}
+
+  uint8array-extras@1.5.0: {}
+
+  ultrahtml@1.6.0: {}
+
+  unbox-primitive@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
+  unbuild@3.6.1(sass@1.97.1)(typescript@5.9.3)(vue-tsc@3.2.1(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      '@rollup/plugin-alias': 5.1.1(rollup@4.54.0)
+      '@rollup/plugin-commonjs': 28.0.9(rollup@4.54.0)
+      '@rollup/plugin-json': 6.1.0(rollup@4.54.0)
+      '@rollup/plugin-node-resolve': 16.0.3(rollup@4.54.0)
+      '@rollup/plugin-replace': 6.0.3(rollup@4.54.0)
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+      citty: 0.1.6
+      consola: 3.4.2
+      defu: 6.1.4
+      esbuild: 0.25.3
+      fix-dts-default-cjs-exports: 1.0.1
+      hookable: 5.5.3
+      jiti: 2.6.1
+      magic-string: 0.30.21
+      mkdist: 2.4.1(sass@1.97.1)(typescript@5.9.3)(vue-tsc@3.2.1(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))
+      mlly: 1.8.0
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      pretty-bytes: 7.1.0
+      rollup: 4.54.0
+      rollup-plugin-dts: 6.3.0(rollup@4.54.0)(typescript@5.9.3)
+      scule: 1.3.0
+      tinyglobby: 0.2.15
+      untyped: 2.0.0
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - sass
+      - vue
+      - vue-sfc-transformer
+      - vue-tsc
+
+  uncrypto@0.1.3: {}
+
+  unctx@2.5.0:
+    dependencies:
+      acorn: 8.15.0
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+      unplugin: 2.3.11
+
+  undici-types@7.16.0: {}
+
+  undici@7.16.0: {}
+
+  unenv@2.0.0-rc.24:
+    dependencies:
+      pathe: 2.0.3
+
+  unicode-canonical-property-names-ecmascript@2.0.1: {}
+
+  unicode-match-property-ecmascript@2.0.0:
+    dependencies:
+      unicode-canonical-property-names-ecmascript: 2.0.1
+      unicode-property-aliases-ecmascript: 2.2.0
+
+  unicode-match-property-value-ecmascript@2.2.1: {}
+
+  unicode-property-aliases-ecmascript@2.2.0: {}
+
+  unicorn-magic@0.1.0: {}
+
+  unicorn-magic@0.3.0: {}
+
+  unimport@5.6.0:
+    dependencies:
+      acorn: 8.15.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      pkg-types: 2.3.0
+      scule: 1.3.0
+      strip-literal: 3.1.0
+      tinyglobby: 0.2.15
+      unplugin: 2.3.11
+      unplugin-utils: 0.3.1
+
+  unique-filename@5.0.0:
+    dependencies:
+      unique-slug: 6.0.0
+
+  unique-slug@6.0.0:
+    dependencies:
+      imurmurhash: 0.1.4
+
+  unique-string@2.0.0:
+    dependencies:
+      crypto-random-string: 2.0.0
+
+  universalify@0.1.2: {}
+
+  universalify@2.0.1: {}
+
+  unplugin-utils@0.3.1:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.3
+
+  unplugin@1.16.1:
+    dependencies:
+      acorn: 8.15.0
+      webpack-virtual-modules: 0.6.2
+
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.15.0
+      picomatch: 4.0.3
+      webpack-virtual-modules: 0.6.2
+
+  unrs-resolver@1.11.1:
+    dependencies:
+      napi-postinstall: 0.3.4
+    optionalDependencies:
+      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
+      '@unrs/resolver-binding-android-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-x64': 1.11.1
+      '@unrs/resolver-binding-freebsd-x64': 1.11.1
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
+      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+
+  unstorage@1.17.3(db0@0.3.4)(ioredis@5.8.2):
+    dependencies:
+      anymatch: 3.1.3
+      chokidar: 4.0.3
+      destr: 2.0.5
+      h3: 1.15.4
+      lru-cache: 10.4.3
+      node-fetch-native: 1.6.7
+      ofetch: 1.5.1
+      ufo: 1.6.1
+    optionalDependencies:
+      db0: 0.3.4
+      ioredis: 5.8.2
+
+  untun@0.1.3:
+    dependencies:
+      citty: 0.1.6
+      consola: 3.4.2
+      pathe: 1.1.2
+
+  untyped@2.0.0:
+    dependencies:
+      citty: 0.1.6
+      defu: 6.1.4
+      jiti: 2.6.1
+      knitwork: 1.3.0
+      scule: 1.3.0
+
+  unwasm@0.3.11:
+    dependencies:
+      knitwork: 1.3.0
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      unplugin: 2.3.11
+
+  upath@1.2.0: {}
+
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  update-notifier@7.3.1:
+    dependencies:
+      boxen: 8.0.1
+      chalk: 5.6.2
+      configstore: 7.1.0
+      is-in-ci: 1.0.0
+      is-installed-globally: 1.0.0
+      is-npm: 6.1.0
+      latest-version: 9.0.0
+      pupa: 3.3.0
+      semver: 7.7.3
+      xdg-basedir: 5.1.0
+
+  uqr@0.1.2: {}
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  util-deprecate@1.0.2: {}
+
+  vee-validate@4.15.1(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.9
+      type-fest: 4.41.0
+      vue: 3.5.26(typescript@5.9.3)
+
+  vite-dev-rpc@1.1.0(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
+    dependencies:
+      birpc: 2.9.0
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite-hot-client: 2.1.0(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
+
+  vite-hot-client@2.1.0(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
+    dependencies:
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+
+  vite-node@3.2.4(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vite-node@3.2.4(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+    optional: true
+
+  vite-plugin-compression@0.5.1(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
+    dependencies:
+      chalk: 4.1.2
+      debug: 4.4.3
+      fs-extra: 10.1.0
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-dts@4.5.4(@types/node@25.0.3)(rollup@4.54.0)(typescript@5.9.3)(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
+    dependencies:
+      '@microsoft/api-extractor': 7.55.2(@types/node@25.0.3)
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+      '@volar/typescript': 2.4.27
+      '@vue/language-core': 2.2.0(typescript@5.9.3)
+      compare-versions: 6.1.1
+      debug: 4.4.3
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      typescript: 5.9.3
+    optionalDependencies:
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - '@types/node'
+      - rollup
+      - supports-color
+
+  vite-plugin-html@3.2.2(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      colorette: 2.0.20
+      connect-history-api-fallback: 1.6.0
+      consola: 2.15.3
+      dotenv: 16.6.1
+      dotenv-expand: 8.0.3
+      ejs: 3.1.10
+      fast-glob: 3.3.3
+      fs-extra: 10.1.0
+      html-minifier-terser: 6.1.0
+      node-html-parser: 5.4.2
+      pathe: 0.2.0
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+
+  vite-plugin-inspect@11.3.3(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
+    dependencies:
+      ansis: 4.2.0
+      debug: 4.4.3
+      error-stack-parser-es: 1.0.5
+      ohash: 2.0.11
+      open: 10.2.0
+      perfect-debounce: 2.0.0
+      sirv: 3.0.2
+      unplugin-utils: 0.3.1
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite-dev-rpc: 1.1.0(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-lazy-import@1.0.7:
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+      es-module-lexer: 1.7.0
+      rollup: 4.54.0
+      xe-utils: 3.8.0
+
+  vite-plugin-pwa@1.2.0(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0):
+    dependencies:
+      debug: 4.4.3
+      pretty-bytes: 6.1.1
+      tinyglobby: 0.2.15
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      workbox-build: 7.4.0
+      workbox-window: 7.4.0
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-vue-devtools@8.0.5(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-core': 8.0.5(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+      '@vue/devtools-kit': 8.0.5
+      '@vue/devtools-shared': 8.0.5
+      sirv: 3.0.2
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite-plugin-inspect: 11.3.3(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
+      vite-plugin-vue-inspector: 5.3.2(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
+    transitivePeerDependencies:
+      - '@nuxt/kit'
+      - supports-color
+      - vue
+
+  vite-plugin-vue-inspector@5.3.2(vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.5)
+      '@vue/compiler-dom': 3.5.26
+      kolorist: 1.8.0
+      magic-string: 0.30.21
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
+    dependencies:
+      esbuild: 0.25.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.54.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.10.4
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      less: 4.5.1
+      sass: 1.97.1
+      terser: 5.44.1
+      yaml: 2.8.2
+
+  vite@7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
+    dependencies:
+      esbuild: 0.25.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.54.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 25.0.3
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      less: 4.5.1
+      sass: 1.97.1
+      terser: 5.44.1
+      yaml: 2.8.2
+
+  vitest@3.2.4(@types/node@24.10.4)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.2.4
+      '@vitest/snapshot': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.15
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite-node: 3.2.4(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 24.10.4
+      happy-dom: 17.6.3
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vitest@3.2.4(@types/node@25.0.3)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.2.4
+      '@vitest/snapshot': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.15
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 7.3.0(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite-node: 3.2.4(@types/node@25.0.3)(jiti@2.6.1)(less@4.5.1)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 25.0.3
+      happy-dom: 17.6.3
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+    optional: true
+
+  vscode-languageserver-textdocument@1.0.12: {}
+
+  vscode-uri@3.1.0: {}
+
+  vue-component-type-helpers@2.2.12: {}
+
+  vue-demi@0.14.10(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.26(typescript@5.9.3)
+
+  vue-eslint-parser@10.2.0(eslint@9.39.2(jiti@2.6.1)):
+    dependencies:
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@2.6.1)
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.6.0
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  vue-i18n@11.2.7(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      '@intlify/core-base': 11.2.7
+      '@intlify/shared': 11.2.7
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.26(typescript@5.9.3)
+
+  vue-json-viewer@3.0.4(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      clipboard: 2.0.11
+      vue: 3.5.26(typescript@5.9.3)
+
+  vue-router@4.6.4(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.26(typescript@5.9.3)
+
+  vue-tippy@6.7.1(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      tippy.js: 6.3.7
+      vue: 3.5.26(typescript@5.9.3)
+
+  vue-tsc@3.2.1(typescript@5.9.3):
+    dependencies:
+      '@volar/typescript': 2.4.27
+      '@vue/language-core': 3.2.1
+      typescript: 5.9.3
+
+  vue-types@3.0.2(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      is-plain-object: 3.0.1
+      vue: 3.5.26(typescript@5.9.3)
+
+  vue@3.5.26(typescript@5.9.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.26
+      '@vue/compiler-sfc': 3.5.26
+      '@vue/runtime-dom': 3.5.26
+      '@vue/server-renderer': 3.5.26(vue@3.5.26(typescript@5.9.3))
+      '@vue/shared': 3.5.26
+    optionalDependencies:
+      typescript: 5.9.3
+
+  vxe-pc-ui@4.11.17(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      '@vxe-ui/core': 4.2.16(vue@3.5.26(typescript@5.9.3))
+    transitivePeerDependencies:
+      - vue
+
+  vxe-table@4.17.33(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      vxe-pc-ui: 4.11.17(vue@3.5.26(typescript@5.9.3))
+    transitivePeerDependencies:
+      - vue
+
+  warning@4.0.3:
+    dependencies:
+      loose-envify: 1.4.0
+
+  watermark-js-plus@1.6.3: {}
+
+  web-streams-polyfill@3.3.3: {}
+
+  webidl-conversions@3.0.1: {}
+
+  webidl-conversions@4.0.2: {}
+
+  webidl-conversions@7.0.0: {}
+
+  webpack-virtual-modules@0.6.2: {}
+
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@3.0.0: {}
+
+  whatwg-mimetype@4.0.0: {}
+
+  whatwg-url@5.0.0:
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+
+  whatwg-url@7.1.0:
+    dependencies:
+      lodash.sortby: 4.7.0
+      tr46: 1.0.1
+      webidl-conversions: 4.0.2
+
+  when-exit@2.1.5: {}
+
+  which-boxed-primitive@1.1.1:
+    dependencies:
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
+
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
+      has-tostringtag: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.2
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.19
+
+  which-collection@1.0.2:
+    dependencies:
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.4
+
+  which-module@2.0.1: {}
+
+  which-typed-array@1.1.19:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
+  which@1.3.1:
+    dependencies:
+      isexe: 2.0.0
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  widest-line@5.0.0:
+    dependencies:
+      string-width: 7.2.0
+
+  word-wrap@1.2.5: {}
+
+  workbox-background-sync@7.4.0:
+    dependencies:
+      idb: 7.1.1
+      workbox-core: 7.4.0
+
+  workbox-broadcast-update@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-build@7.4.0:
+    dependencies:
+      '@apideck/better-ajv-errors': 0.3.6(ajv@8.17.1)
+      '@babel/core': 7.28.5
+      '@babel/preset-env': 7.28.5(@babel/core@7.28.5)
+      '@babel/runtime': 7.28.4
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.28.5)(rollup@2.79.2)
+      '@rollup/plugin-node-resolve': 15.3.1(rollup@2.79.2)
+      '@rollup/plugin-replace': 2.4.2(rollup@2.79.2)
+      '@rollup/plugin-terser': 0.4.4(rollup@2.79.2)
+      '@surma/rollup-plugin-off-main-thread': 2.2.3
+      ajv: 8.17.1
+      common-tags: 1.8.2
+      fast-json-stable-stringify: 2.1.0
+      fs-extra: 9.1.0
+      glob: 11.1.0
+      lodash: 4.17.21
+      pretty-bytes: 5.6.0
+      rollup: 2.79.2
+      source-map: 0.8.0-beta.0
+      stringify-object: 3.3.0
+      strip-comments: 2.0.1
+      tempy: 0.6.0
+      upath: 1.2.0
+      workbox-background-sync: 7.4.0
+      workbox-broadcast-update: 7.4.0
+      workbox-cacheable-response: 7.4.0
+      workbox-core: 7.4.0
+      workbox-expiration: 7.4.0
+      workbox-google-analytics: 7.4.0
+      workbox-navigation-preload: 7.4.0
+      workbox-precaching: 7.4.0
+      workbox-range-requests: 7.4.0
+      workbox-recipes: 7.4.0
+      workbox-routing: 7.4.0
+      workbox-strategies: 7.4.0
+      workbox-streams: 7.4.0
+      workbox-sw: 7.4.0
+      workbox-window: 7.4.0
+    transitivePeerDependencies:
+      - '@types/babel__core'
+      - supports-color
+
+  workbox-cacheable-response@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-core@7.4.0: {}
+
+  workbox-expiration@7.4.0:
+    dependencies:
+      idb: 7.1.1
+      workbox-core: 7.4.0
+
+  workbox-google-analytics@7.4.0:
+    dependencies:
+      workbox-background-sync: 7.4.0
+      workbox-core: 7.4.0
+      workbox-routing: 7.4.0
+      workbox-strategies: 7.4.0
+
+  workbox-navigation-preload@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-precaching@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+      workbox-routing: 7.4.0
+      workbox-strategies: 7.4.0
+
+  workbox-range-requests@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-recipes@7.4.0:
+    dependencies:
+      workbox-cacheable-response: 7.4.0
+      workbox-core: 7.4.0
+      workbox-expiration: 7.4.0
+      workbox-precaching: 7.4.0
+      workbox-routing: 7.4.0
+      workbox-strategies: 7.4.0
+
+  workbox-routing@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-strategies@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+
+  workbox-streams@7.4.0:
+    dependencies:
+      workbox-core: 7.4.0
+      workbox-routing: 7.4.0
+
+  workbox-sw@7.4.0: {}
+
+  workbox-window@7.4.0:
+    dependencies:
+      '@types/trusted-types': 2.0.7
+      workbox-core: 7.4.0
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.1.2
+
+  wrap-ansi@9.0.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+
+  write-file-atomic@5.0.1:
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.1.0
+
+  wsl-utils@0.1.0:
+    dependencies:
+      is-wsl: 3.1.0
+
+  xdg-basedir@5.1.0: {}
+
+  xe-utils@3.8.0: {}
+
+  xml-name-validator@4.0.0: {}
+
+  y18n@4.0.3: {}
+
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
+  yallist@4.0.0: {}
+
+  yallist@5.0.0: {}
+
+  yaml-eslint-parser@1.3.2:
+    dependencies:
+      eslint-visitor-keys: 3.4.3
+      yaml: 2.8.2
+
+  yaml@1.10.2: {}
+
+  yaml@2.8.2: {}
+
+  yargs-parser@18.1.3:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
+  yargs-parser@20.2.9: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@15.4.1:
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+
+  yargs@16.2.0:
+    dependencies:
+      cliui: 7.0.4
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 20.2.9
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yocto-queue@0.1.0: {}
+
+  yocto-queue@1.2.2: {}
+
+  yoctocolors@2.1.2: {}
+
+  youch-core@0.3.3:
+    dependencies:
+      '@poppinss/exception': 1.2.3
+      error-stack-parser-es: 1.0.5
+
+  youch@4.1.0-beta.13:
+    dependencies:
+      '@poppinss/colors': 4.1.6
+      '@poppinss/dumper': 0.6.5
+      '@speed-highlight/core': 1.2.12
+      cookie-es: 2.0.0
+      youch-core: 0.3.3
+
+  zip-stream@6.0.1:
+    dependencies:
+      archiver-utils: 5.0.2
+      compress-commons: 6.0.2
+      readable-stream: 4.7.0
+
+  zod-defaults@0.1.3(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
+  zod@3.25.76: {}
+
+  zrender@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+
+  zx@8.8.5: {}
diff --git a/admin-ui/vue/pnpm-workspace.yaml b/admin-ui/vue/pnpm-workspace.yaml
new file mode 100644
index 0000000..0e5d00e
--- /dev/null
+++ b/admin-ui/vue/pnpm-workspace.yaml
@@ -0,0 +1,197 @@
+packages:
+  - internal/*
+  - internal/lint-configs/*
+  - packages/*
+  - packages/@core/base/*
+  - packages/@core/ui-kit/*
+  - packages/@core/forward/*
+  - packages/@core/*
+  - packages/effects/*
+  - packages/business/*
+  - apps/*
+  - scripts/*
+  - docs
+  - playground
+
+catalog:
+  '@ast-grep/napi': ^0.39.9
+  '@changesets/changelog-github': ^0.5.1
+  '@changesets/cli': ^2.29.7
+  '@changesets/git': ^3.0.4
+  '@clack/prompts': ^0.11.0
+  '@commitlint/cli': ^19.8.1
+  '@commitlint/config-conventional': ^19.8.1
+  '@ctrl/tinycolor': ^4.1.0
+  '@eslint/js': ^9.39.1
+  '@faker-js/faker': ^9.9.0
+  '@iconify/json': ^2.2.406
+  '@iconify/tailwind': ^1.2.0
+  '@iconify/vue': ^5.0.0
+  '@intlify/core-base': ^11.1.7
+  '@intlify/unplugin-vue-i18n': ^6.0.8
+  '@jspm/generator': ^2.6.2
+  '@manypkg/get-packages': ^3.0.0
+  '@nolebase/vitepress-plugin-git-changelog': ^2.18.0
+  '@playwright/test': ^1.56.1
+  '@pnpm/workspace.read-manifest': ^1000.2.6
+  '@stylistic/stylelint-plugin': ^3.1.3
+  '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
+  '@tailwindcss/typography': ^0.5.16
+  '@tanstack/vue-query': ^5.91.0
+  '@tanstack/vue-store': ^0.8.0
+  '@types/archiver': ^6.0.3
+  '@types/eslint': ^9.6.1
+  '@types/html-minifier-terser': ^7.0.2
+  '@types/json-bigint': ^1.0.4
+  '@types/jsonwebtoken': ^9.0.10
+  '@types/lodash.clonedeep': ^4.5.9
+  '@types/lodash.get': ^4.4.9
+  '@types/lodash.isequal': ^4.5.8
+  '@types/lodash.set': ^4.3.9
+  '@types/node': ^24.10.1
+  '@types/nprogress': ^0.2.3
+  '@types/postcss-import': ^14.0.3
+  '@types/qrcode': ^1.5.5
+  '@types/qs': ^6.14.0
+  '@types/sortablejs': ^1.15.8
+  '@typescript-eslint/eslint-plugin': ^8.46.4
+  '@typescript-eslint/parser': ^8.46.4
+  '@vee-validate/zod': ^4.15.1
+  '@vite-pwa/vitepress': ^1.0.0
+  '@vitejs/plugin-vue': ^6.0.1
+  '@vitejs/plugin-vue-jsx': ^5.1.1
+  '@vue/reactivity': ^3.5.17
+  '@vue/shared': ^3.5.24
+  '@vue/test-utils': ^2.4.6
+  '@vueuse/core': ^13.4.0
+  '@vueuse/integrations': ^14.0.0
+  '@vueuse/motion': ^3.0.3
+  ant-design-vue: ^4.2.6
+  archiver: ^7.0.1
+  autoprefixer: ^10.4.22
+  axios: ^1.10.0
+  axios-mock-adapter: ^2.1.0
+  cac: ^6.7.14
+  chalk: ^5.4.1
+  cheerio: ^1.1.0
+  circular-dependency-scanner: ^2.3.0
+  class-variance-authority: ^0.7.1
+  clsx: ^2.1.1
+  commitlint-plugin-function-rules: ^4.1.1
+  consola: ^3.4.2
+  cross-env: ^7.0.3
+  cspell: ^8.19.4
+  cssnano: ^7.0.7
+  cz-git: ^1.11.2
+  czg: ^1.11.1
+  dayjs: ^1.11.13
+  defu: ^6.1.4
+  depcheck: ^1.4.7
+  dotenv: ^16.6.1
+  echarts: ^6.0.0
+  element-plus: ^2.10.2
+  eslint: ^9.39.1
+  eslint-config-turbo: ^2.6.1
+  eslint-plugin-command: ^3.3.1
+  eslint-plugin-eslint-comments: ^3.2.0
+  eslint-plugin-import-x: ^4.16.1
+  eslint-plugin-jsdoc: ^61.2.1
+  eslint-plugin-jsonc: ^2.21.0
+  eslint-plugin-n: ^17.23.1
+  eslint-plugin-no-only-tests: ^3.3.0
+  eslint-plugin-perfectionist: ^4.15.1
+  eslint-plugin-prettier: ^5.5.4
+  eslint-plugin-regexp: ^2.10.0
+  eslint-plugin-unicorn: ^62.0.0
+  eslint-plugin-unused-imports: ^4.3.0
+  eslint-plugin-vitest: ^0.5.4
+  eslint-plugin-vue: ^10.5.1
+  execa: ^9.6.0
+  find-up: ^7.0.0
+  get-port: ^7.1.0
+  globals: ^16.3.0
+  h3: ^1.15.3
+  happy-dom: ^17.6.3
+  html-minifier-terser: ^7.2.0
+  is-ci: ^4.1.0
+  jiti: ^2.6.1
+  json-bigint: ^1.0.0
+  jsonc-eslint-parser: ^2.4.1
+  jsonwebtoken: ^9.0.2
+  lefthook: ^1.13.6
+  lodash.clonedeep: ^4.5.0
+  lodash.get: ^4.4.2
+  lodash.isequal: ^4.5.0
+  lodash.set: ^4.3.2
+  lucide-vue-next: ^0.553.0
+  medium-zoom: ^1.1.0
+  naive-ui: ^2.42.0
+  nitropack: ^2.11.13
+  nprogress: ^0.2.0
+  ora: ^8.2.0
+  pinia: ^3.0.3
+  pinia-plugin-persistedstate: ^4.4.1
+  pkg-types: ^2.2.0
+  playwright: ^1.56.1
+  postcss: ^8.5.6
+  postcss-antd-fixes: ^0.2.0
+  postcss-html: ^1.8.0
+  postcss-import: ^16.1.1
+  postcss-preset-env: ^10.2.4
+  postcss-scss: ^4.0.9
+  prettier: ^3.6.2
+  prettier-plugin-tailwindcss: ^0.7.1
+  publint: ^0.3.12
+  qrcode: ^1.5.4
+  qs: ^6.14.0
+  reka-ui: ^2.6.0
+  resolve.exports: ^2.0.3
+  rimraf: ^6.1.0
+  rollup: ^4.44.1
+  rollup-plugin-visualizer: ^5.14.0
+  sass: ^1.94.0
+  secure-ls: ^2.0.0
+  sortablejs: ^1.15.6
+  stylelint: ^16.21.0
+  stylelint-config-recess-order: ^6.1.0
+  stylelint-config-recommended: ^17.0.0
+  stylelint-config-recommended-scss: ^14.1.0
+  stylelint-config-recommended-vue: ^1.6.1
+  stylelint-config-standard: ^38.0.0
+  stylelint-order: ^7.0.0
+  stylelint-prettier: ^5.0.3
+  stylelint-scss: ^6.12.1
+  tailwind-merge: ^2.6.0
+  tailwindcss: ^3.4.18
+  tailwindcss-animate: ^1.0.7
+  tdesign-vue-next: ^1.17.1
+  theme-colors: ^0.1.0
+  tippy.js: ^6.3.7
+  turbo: ^2.6.1
+  typescript: ^5.9.3
+  unbuild: ^3.6.1
+  unplugin-element-plus: ^0.11.1
+  vee-validate: ^4.15.1
+  vite: ^7.2.2
+  vite-plugin-compression: ^0.5.1
+  vite-plugin-dts: ^4.5.4
+  vite-plugin-html: ^3.2.2
+  vite-plugin-lazy-import: ^1.0.7
+  vite-plugin-pwa: ^1.0.1
+  vite-plugin-vue-devtools: ^8.0.3
+  vitepress: ^1.6.3
+  vitepress-plugin-group-icons: ^1.6.1
+  vitest: ^3.2.4
+  vue: ^3.5.24
+  vue-eslint-parser: ^10.2.0
+  vue-i18n: ^11.1.7
+  vue-json-viewer: ^3.0.4
+  vue-router: ^4.5.1
+  vue-tippy: ^6.7.1
+  vue-tsc: ^3.1.4
+  vxe-pc-ui: ^4.10.22
+  vxe-table: ^4.17.14
+  watermark-js-plus: ^1.6.2
+  zod: ^3.25.67
+  zod-defaults: 0.1.3
+  es-toolkit: ^1.41.0
diff --git a/admin-ui/vue/private-folder-alias.json b/admin-ui/vue/private-folder-alias.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/admin-ui/vue/private-folder-alias.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/admin-ui/vue/scripts/clean.mjs b/admin-ui/vue/scripts/clean.mjs
new file mode 100644
index 0000000..2049e45
--- /dev/null
+++ b/admin-ui/vue/scripts/clean.mjs
@@ -0,0 +1,141 @@
+import { promises as fs } from 'node:fs';
+import { join, normalize } from 'node:path';
+
+const rootDir = process.cwd();
+
+// 控制并发数量，避免创建过多的并发任务
+const CONCURRENCY_LIMIT = 10;
+
+// 需要跳过的目录，避免进入这些目录进行清理
+const SKIP_DIRS = new Set(['.DS_Store', '.git', '.idea', '.vscode']);
+
+/**
+ * 处理单个文件/目录项
+ * @param {string} currentDir - 当前目录路径
+ * @param {string} item - 文件/目录名
+ * @param {string[]} targets - 要删除的目标列表
+ * @param {number} _depth - 当前递归深度
+ * @returns {Promise<boolean>} - 是否需要进一步递归处理
+ */
+async function processItem(currentDir, item, targets, _depth) {
+  // 跳过特殊目录
+  if (SKIP_DIRS.has(item)) {
+    return false;
+  }
+
+  try {
+    const itemPath = normalize(join(currentDir, item));
+
+    if (targets.includes(item)) {
+      // 匹配到目标目录或文件时直接删除
+      await fs.rm(itemPath, { force: true, recursive: true });
+      console.log(`✅ Deleted: ${itemPath}`);
+      return false; // 已删除，无需递归
+    }
+
+    // 使用 readdir 的 withFileTypes 选项，避免额外的 lstat 调用
+    return true; // 可能需要递归，由调用方决定
+  } catch (error) {
+    // 更详细的错误信息
+    if (error.code === 'ENOENT') {
+      // 文件不存在，可能已被删除，这是正常情况
+      return false;
+    } else if (error.code === 'EPERM' || error.code === 'EACCES') {
+      console.error(`❌ Permission denied: ${item} in ${currentDir}`);
+    } else {
+      console.error(
+        `❌ Error handling item ${item} in ${currentDir}: ${error.message}`,
+      );
+    }
+    return false;
+  }
+}
+
+/**
+ * 递归查找并删除目标目录（并发优化版本）
+ * @param {string} currentDir - 当前遍历的目录路径
+ * @param {string[]} targets - 要删除的目标列表
+ * @param {number} depth - 当前递归深度，避免过深递归
+ */
+async function cleanTargetsRecursively(currentDir, targets, depth = 0) {
+  // 限制递归深度，避免无限递归
+  if (depth > 10) {
+    console.warn(`Max recursion depth reached at: ${currentDir}`);
+    return;
+  }
+
+  let dirents;
+  try {
+    // 使用 withFileTypes 选项，一次性获取文件类型信息，避免后续 lstat 调用
+    dirents = await fs.readdir(currentDir, { withFileTypes: true });
+  } catch (error) {
+    // 如果无法读取目录，可能已被删除或权限不足
+    console.warn(`Cannot read directory ${currentDir}: ${error.message}`);
+    return;
+  }
+
+  // 分批处理，控制并发数量
+  for (let i = 0; i < dirents.length; i += CONCURRENCY_LIMIT) {
+    const batch = dirents.slice(i, i + CONCURRENCY_LIMIT);
+
+    const tasks = batch.map(async (dirent) => {
+      const item = dirent.name;
+      const shouldRecurse = await processItem(currentDir, item, targets, depth);
+
+      // 如果是目录且没有被删除，则递归处理
+      if (shouldRecurse && dirent.isDirectory()) {
+        const itemPath = normalize(join(currentDir, item));
+        return cleanTargetsRecursively(itemPath, targets, depth + 1);
+      }
+
+      return null;
+    });
+
+    // 并发执行当前批次的任务
+    const results = await Promise.allSettled(tasks);
+
+    // 检查是否有失败的任务（可选：用于调试）
+    const failedTasks = results.filter(
+      (result) => result.status === 'rejected',
+    );
+    if (failedTasks.length > 0) {
+      console.warn(
+        `${failedTasks.length} tasks failed in batch starting at index ${i} in directory: ${currentDir}`,
+      );
+    }
+  }
+}
+
+(async function startCleanup() {
+  // 要删除的目录及文件名称
+  const targets = ['node_modules', 'dist', '.turbo', 'dist.zip'];
+  const deleteLockFile = process.argv.includes('--del-lock');
+  const cleanupTargets = [...targets];
+
+  if (deleteLockFile) {
+    cleanupTargets.push('pnpm-lock.yaml');
+  }
+
+  console.log(
+    `🚀 Starting cleanup of targets: ${cleanupTargets.join(', ')} from root: ${rootDir}`,
+  );
+
+  const startTime = Date.now();
+
+  try {
+    // 先统计要删除的目标数量
+    console.log('📊 Scanning for cleanup targets...');
+
+    await cleanTargetsRecursively(rootDir, cleanupTargets);
+
+    const endTime = Date.now();
+    const duration = (endTime - startTime) / 1000;
+
+    console.log(
+      `✨ Cleanup process completed successfully in ${duration.toFixed(2)}s`,
+    );
+  } catch (error) {
+    console.error(`💥 Unexpected error during cleanup: ${error.message}`);
+    process.exit(1);
+  }
+})();
diff --git a/admin-ui/vue/scripts/deploy/Dockerfile b/admin-ui/vue/scripts/deploy/Dockerfile
new file mode 100644
index 0000000..86f439f
--- /dev/null
+++ b/admin-ui/vue/scripts/deploy/Dockerfile
@@ -0,0 +1,37 @@
+FROM node:22-slim AS builder
+
+# --max-old-space-size
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+ENV NODE_OPTIONS=--max-old-space-size=8192
+ENV TZ=Asia/Shanghai
+
+RUN npm i -g corepack
+
+WORKDIR /app
+
+# copy package.json and pnpm-lock.yaml to workspace
+COPY . /app
+
+# 安装依赖
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN pnpm run build --filter=\!./docs
+
+RUN echo "Builder Success 🎉"
+
+FROM nginx:stable-alpine AS production
+
+# 配置 nginx
+RUN echo "types { application/javascript js mjs; }" > /etc/nginx/conf.d/mjs.conf \
+    && rm -rf /etc/nginx/conf.d/default.conf
+
+# 复制构建产物
+COPY --from=builder /app/playground/dist /usr/share/nginx/html
+
+# 复制 nginx 配置
+COPY --from=builder /app/scripts/deploy/nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE 8080
+
+# 启动 nginx
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/admin-ui/vue/scripts/deploy/build-local-docker-image.sh b/admin-ui/vue/scripts/deploy/build-local-docker-image.sh
new file mode 100755
index 0000000..4881487
--- /dev/null
+++ b/admin-ui/vue/scripts/deploy/build-local-docker-image.sh
@@ -0,0 +1,55 @@
+#!/bin/bash
+
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+LOG_FILE=${SCRIPT_DIR}/build-local-docker-image.log
+ERROR=""
+IMAGE_NAME="vben-admin-local"
+
+function stop_and_remove_container() {
+    # Stop and remove the existing container
+    docker stop ${IMAGE_NAME} >/dev/null 2>&1
+    docker rm ${IMAGE_NAME} >/dev/null 2>&1
+}
+
+function remove_image() {
+    # Remove the existing image
+    docker rmi vben-admin-pro >/dev/null 2>&1
+}
+
+function install_dependencies() {
+    # Install all dependencies
+    cd ${SCRIPT_DIR}
+    pnpm install || ERROR="install_dependencies failed"
+}
+
+function build_image() {
+    # build docker
+    docker build ../../ -f Dockerfile -t ${IMAGE_NAME} || ERROR="build_image failed"
+}
+
+function log_message() {
+    if [[ ${ERROR} != "" ]];
+    then
+        >&2 echo "build failed, Please check build-local-docker-image.log for more details"
+        >&2 echo "ERROR: ${ERROR}"
+        exit 1
+    else
+        echo "docker image with tag '${IMAGE_NAME}' built sussessfully. Use below sample command to run the container"
+        echo ""
+        echo "docker run -d -p 8010:8080 --name ${IMAGE_NAME} ${IMAGE_NAME}"
+    fi
+}
+
+echo "Info: Stopping and removing existing container and image" | tee ${LOG_FILE}
+stop_and_remove_container
+remove_image
+
+echo "Info: Installing dependencies" | tee -a ${LOG_FILE}
+install_dependencies 1>> ${LOG_FILE} 2>> ${LOG_FILE}
+
+if [[ ${ERROR} == "" ]]; then
+    echo "Info: Building docker image" | tee -a ${LOG_FILE}
+    build_image 1>> ${LOG_FILE} 2>> ${LOG_FILE}
+fi
+
+log_message | tee -a ${LOG_FILE}
diff --git a/admin-ui/vue/scripts/deploy/nginx.conf b/admin-ui/vue/scripts/deploy/nginx.conf
new file mode 100644
index 0000000..8e6ab10
--- /dev/null
+++ b/admin-ui/vue/scripts/deploy/nginx.conf
@@ -0,0 +1,75 @@
+
+#user  nobody;
+worker_processes 1;
+
+#error_log  logs/error.log;
+#error_log  logs/error.log  notice;
+#error_log  logs/error.log  info;
+
+#pid        logs/nginx.pid;
+
+
+events {
+  worker_connections 1024;
+}
+
+
+http {
+  include mime.types;
+  default_type application/octet-stream;
+
+  types {
+    application/javascript  js mjs;
+    text/css                css;
+    text/html               html;
+  }
+
+  sendfile on;
+  # tcp_nopush     on;
+
+  #keepalive_timeout  0;
+  # keepalive_timeout 65;
+
+  # gzip on;
+  # gzip_buffers 32 16k;
+  # gzip_comp_level 6;
+  # gzip_min_length 1k;
+  # gzip_static on;
+  # gzip_types text/plain
+  #   text/css
+  #   application/javascript
+  #   application/json
+  #   application/x-javascript
+  #   text/xml
+  #   application/xml
+  #   application/xml+rss
+  #   text/javascript; #设置压缩的文件类型
+  # gzip_vary on;
+
+  server {
+    listen 8080;
+    server_name localhost;
+
+    location / {
+      root /usr/share/nginx/html;
+      try_files $uri $uri/ /index.html;
+      index index.html;
+      # Enable CORS
+      add_header 'Access-Control-Allow-Origin' '*';
+      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
+      add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
+      if ($request_method = 'OPTIONS') {
+        add_header 'Access-Control-Max-Age' 1728000;
+        add_header 'Content-Type' 'text/plain charset=UTF-8';
+        add_header 'Content-Length' 0;
+        return 204;
+      }
+    }
+
+    error_page 500 502 503 504 /50x.html;
+
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+  }
+}
diff --git a/admin-ui/vue/scripts/turbo-run/README.md b/admin-ui/vue/scripts/turbo-run/README.md
new file mode 100644
index 0000000..4f90a59
--- /dev/null
+++ b/admin-ui/vue/scripts/turbo-run/README.md
@@ -0,0 +1,59 @@
+# @vben/turbo-run
+
+`turbo-run` 是一个命令行工具，允许你在多个包中并行运行命令。它提供了一个交互式的界面，让你可以选择要运行命令的包。
+
+## 特性
+
+- 🚀 交互式选择要运行的包
+- 📦 支持 monorepo 项目结构
+- 🔍 自动检测可用的命令
+- 🎯 精确过滤目标包
+
+## 安装
+
+```bash
+pnpm add -D @vben/turbo-run
+```
+
+## 使用方法
+
+基本语法：
+
+```bash
+turbo-run [script]
+```
+
+例如，如果你想运行 `dev` 命令：
+
+```bash
+turbo-run dev
+```
+
+工具会自动检测哪些包有 `dev` 命令，并提供一个交互式界面让你选择要运行的包。
+
+## 示例
+
+假设你的项目中有以下包：
+
+- `@vben/app`
+- `@vben/admin`
+- `@vben/website`
+
+当你运行：
+
+```bash
+turbo-run dev
+```
+
+工具会：
+
+1. 检测哪些包有 `dev` 命令
+2. 显示一个交互式选择界面
+3. 让你选择要运行命令的包
+4. 使用 `pnpm --filter` 在选定的包中运行命令
+
+## 注意事项
+
+- 确保你的项目使用 pnpm 作为包管理器
+- 确保目标包在 `package.json` 中定义了相应的脚本命令
+- 该工具需要在 monorepo 项目的根目录下运行
diff --git a/admin-ui/vue/scripts/turbo-run/bin/turbo-run.mjs b/admin-ui/vue/scripts/turbo-run/bin/turbo-run.mjs
new file mode 100755
index 0000000..407754d
--- /dev/null
+++ b/admin-ui/vue/scripts/turbo-run/bin/turbo-run.mjs
@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+import('../dist/index.mjs');
diff --git a/admin-ui/vue/scripts/turbo-run/build.config.ts b/admin-ui/vue/scripts/turbo-run/build.config.ts
new file mode 100644
index 0000000..97e572c
--- /dev/null
+++ b/admin-ui/vue/scripts/turbo-run/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
diff --git a/admin-ui/vue/scripts/turbo-run/package.json b/admin-ui/vue/scripts/turbo-run/package.json
new file mode 100644
index 0000000..4db2313
--- /dev/null
+++ b/admin-ui/vue/scripts/turbo-run/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@vben/turbo-run",
+  "version": "5.5.9",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "stub": "pnpm unbuild --stub"
+  },
+  "files": [
+    "dist"
+  ],
+  "bin": {
+    "turbo-run": "./bin/turbo-run.mjs"
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "default": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@clack/prompts": "catalog:",
+    "@vben/node-utils": "workspace:*",
+    "cac": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/scripts/turbo-run/src/index.ts b/admin-ui/vue/scripts/turbo-run/src/index.ts
new file mode 100644
index 0000000..2f8dad0
--- /dev/null
+++ b/admin-ui/vue/scripts/turbo-run/src/index.ts
@@ -0,0 +1,29 @@
+import { colors, consola } from '@vben/node-utils';
+
+import { cac } from 'cac';
+
+import { run } from './run';
+
+try {
+  const turboRun = cac('turbo-run');
+
+  turboRun
+    .command('[script]')
+    .usage(`Run turbo interactively.`)
+    .action(async (command: string) => {
+      run({ command });
+    });
+
+  // Invalid command
+  turboRun.on('command:*', () => {
+    consola.error(colors.red('Invalid command!'));
+    process.exit(1);
+  });
+
+  turboRun.usage('turbo-run');
+  turboRun.help();
+  turboRun.parse();
+} catch (error) {
+  consola.error(error);
+  process.exit(1);
+}
diff --git a/admin-ui/vue/scripts/turbo-run/src/run.ts b/admin-ui/vue/scripts/turbo-run/src/run.ts
new file mode 100644
index 0000000..31f9f52
--- /dev/null
+++ b/admin-ui/vue/scripts/turbo-run/src/run.ts
@@ -0,0 +1,67 @@
+import { execaCommand, getPackages } from '@vben/node-utils';
+
+import { cancel, isCancel, select } from '@clack/prompts';
+
+interface RunOptions {
+  command?: string;
+}
+
+export async function run(options: RunOptions) {
+  const { command } = options;
+  if (!command) {
+    console.error('Please enter the command to run');
+    process.exit(1);
+  }
+  const { packages } = await getPackages();
+  // const appPkgs = await findApps(process.cwd(), packages);
+  // const websitePkg = packages.find(
+  //   (item) => item.packageJson.name === '@vben/website',
+  // );
+
+  // 只显示有对应命令的包
+  const selectPkgs = packages.filter((pkg) => {
+    return (pkg?.packageJson as Record<string, any>)?.scripts?.[command];
+  });
+
+  let selectPkg: string | symbol;
+  if (selectPkgs.length > 1) {
+    selectPkg = await select<string>({
+      message: `Select the app you need to run [${command}]:`,
+      options: selectPkgs.map((item) => ({
+        label: item?.packageJson.name,
+        value: item?.packageJson.name,
+      })),
+    });
+
+    if (isCancel(selectPkg) || !selectPkg) {
+      cancel('👋 Has cancelled');
+      process.exit(0);
+    }
+  } else {
+    selectPkg = selectPkgs[0]?.packageJson?.name ?? '';
+  }
+
+  if (!selectPkg) {
+    console.error('No app found');
+    process.exit(1);
+  }
+
+  execaCommand(`pnpm --filter=${selectPkg} run ${command}`, {
+    stdio: 'inherit',
+  });
+}
+
+/**
+ * 过滤app包
+ * @param root
+ * @param packages
+ */
+// async function findApps(root: string, packages: Package[]) {
+//   // apps内的
+//   const appPackages = packages.filter((pkg) => {
+//     const viteConfigExists = fs.existsSync(join(pkg.dir, 'vite.config.mts'));
+//     return pkg.dir.startsWith(join(root, 'apps')) && viteConfigExists;
+//   });
+
+//   return appPackages;
+// }
diff --git a/admin-ui/vue/scripts/turbo-run/tsconfig.json b/admin-ui/vue/scripts/turbo-run/tsconfig.json
new file mode 100644
index 0000000..b2ec3b6
--- /dev/null
+++ b/admin-ui/vue/scripts/turbo-run/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/node.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/scripts/vsh/README.md b/admin-ui/vue/scripts/vsh/README.md
new file mode 100644
index 0000000..61140d6
--- /dev/null
+++ b/admin-ui/vue/scripts/vsh/README.md
@@ -0,0 +1,56 @@
+# @vben/vsh
+
+一个 Shell 脚本工具集合，用于 Vue Vben Admin 项目的开发和管理。
+
+## 功能特性
+
+- 🚀 基于 Node.js 的现代化 Shell 工具
+- 📦 支持模块化开发和按需加载
+- 🔍 提供依赖检查和分析功能
+- 🔄 支持循环依赖扫描
+- 📝 提供包发布检查功能
+
+## 安装
+
+```bash
+# 使用 pnpm 安装
+pnpm add -D @vben/vsh
+
+# 或者使用 npm
+npm install -D @vben/vsh
+
+# 或者使用 yarn
+yarn add -D @vben/vsh
+```
+
+## 使用方法
+
+### 全局安装
+
+```bash
+# 全局安装
+pnpm add -g @vben/vsh
+
+# 使用 vsh 命令
+vsh [command]
+```
+
+### 本地使用
+
+```bash
+# 在 package.json 中添加脚本
+{
+  "scripts": {
+    "vsh": "vsh"
+  }
+}
+
+# 运行命令
+pnpm vsh [command]
+```
+
+## 命令列表
+
+- `vsh check-deps`: 检查项目依赖
+- `vsh scan-circular`: 扫描循环依赖
+- `vsh publish-check`: 检查包发布配置
diff --git a/admin-ui/vue/scripts/vsh/bin/vsh.mjs b/admin-ui/vue/scripts/vsh/bin/vsh.mjs
new file mode 100755
index 0000000..407754d
--- /dev/null
+++ b/admin-ui/vue/scripts/vsh/bin/vsh.mjs
@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+import('../dist/index.mjs');
diff --git a/admin-ui/vue/scripts/vsh/build.config.ts b/admin-ui/vue/scripts/vsh/build.config.ts
new file mode 100644
index 0000000..97e572c
--- /dev/null
+++ b/admin-ui/vue/scripts/vsh/build.config.ts
@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: ['src/index'],
+});
diff --git a/admin-ui/vue/scripts/vsh/package.json b/admin-ui/vue/scripts/vsh/package.json
new file mode 100644
index 0000000..89f47ea
--- /dev/null
+++ b/admin-ui/vue/scripts/vsh/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@vben/vsh",
+  "version": "5.5.9",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "stub": "pnpm unbuild --stub"
+  },
+  "files": [
+    "dist"
+  ],
+  "bin": {
+    "vsh": "./bin/vsh.mjs"
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "default": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@vben/node-utils": "workspace:*",
+    "cac": "catalog:",
+    "circular-dependency-scanner": "catalog:",
+    "depcheck": "catalog:",
+    "publint": "catalog:"
+  }
+}
diff --git a/admin-ui/vue/scripts/vsh/src/check-circular/index.ts b/admin-ui/vue/scripts/vsh/src/check-circular/index.ts
new file mode 100644
index 0000000..0642506
--- /dev/null
+++ b/admin-ui/vue/scripts/vsh/src/check-circular/index.ts
@@ -0,0 +1,170 @@
+import type { CAC } from 'cac';
+
+import { extname } from 'node:path';
+
+import { getStagedFiles } from '@vben/node-utils';
+
+import { circularDepsDetect } from 'circular-dependency-scanner';
+
+// 默认配置
+const DEFAULT_CONFIG = {
+  allowedExtensions: ['.cjs', '.js', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
+  ignoreDirs: [
+    'dist',
+    '.turbo',
+    'output',
+    '.cache',
+    'scripts',
+    'internal',
+    'packages/effects/request/src/',
+    'packages/@core/ui-kit/menu-ui/src/',
+    'packages/@core/ui-kit/popup-ui/src/',
+  ],
+  threshold: 0, // 循环依赖的阈值
+} as const;
+
+// 类型定义
+type CircularDependencyResult = string[];
+
+interface CheckCircularConfig {
+  allowedExtensions?: string[];
+  ignoreDirs?: string[];
+  threshold?: number;
+}
+
+interface CommandOptions {
+  config?: CheckCircularConfig;
+  staged: boolean;
+  verbose: boolean;
+}
+
+// 缓存机制
+const cache = new Map<string, CircularDependencyResult[]>();
+
+/**
+ * 格式化循环依赖的输出
+ * @param circles - 循环依赖结果
+ */
+function formatCircles(circles: CircularDependencyResult[]): void {
+  if (circles.length === 0) {
+    console.log('✅ No circular dependencies found');
+    return;
+  }
+
+  console.log('⚠️ Circular dependencies found:');
+  circles.forEach((circle, index) => {
+    console.log(`\nCircular dependency #${index + 1}:`);
+    circle.forEach((file) => console.log(`  → ${file}`));
+  });
+}
+
+/**
+ * 检查项目中的循环依赖
+ * @param options - 检查选项
+ * @param options.staged - 是否只检查暂存区文件
+ * @param options.verbose - 是否显示详细信息
+ * @param options.config - 自定义配置
+ * @returns Promise<void>
+ */
+async function checkCircular({
+  config = {},
+  staged,
+  verbose,
+}: CommandOptions): Promise<void> {
+  try {
+    // 合并配置
+    const finalConfig = {
+      ...DEFAULT_CONFIG,
+      ...config,
+    };
+
+    // 生成忽略模式
+    const ignorePattern = `**/{${finalConfig.ignoreDirs.join(',')}}/**`;
+
+    // 检查缓存
+    const cacheKey = `${staged}-${process.cwd()}-${ignorePattern}`;
+    if (cache.has(cacheKey)) {
+      const cachedResults = cache.get(cacheKey);
+      if (cachedResults) {
+        verbose && formatCircles(cachedResults);
+      }
+      return;
+    }
+
+    // 检测循环依赖
+    const results = await circularDepsDetect({
+      absolute: staged,
+      cwd: process.cwd(),
+      ignore: [ignorePattern],
+    });
+
+    if (staged) {
+      let files = await getStagedFiles();
+      const allowedExtensions = new Set(finalConfig.allowedExtensions);
+
+      // 过滤文件列表
+      files = files.filter((file) => allowedExtensions.has(extname(file)));
+
+      const circularFiles: CircularDependencyResult[] = [];
+
+      for (const file of files) {
+        for (const result of results) {
+          const resultFiles = result.flat();
+          if (resultFiles.includes(file)) {
+            circularFiles.push(result);
+          }
+        }
+      }
+
+      // 更新缓存
+      cache.set(cacheKey, circularFiles);
+      verbose && formatCircles(circularFiles);
+    } else {
+      // 更新缓存
+      cache.set(cacheKey, results);
+      verbose && formatCircles(results);
+    }
+
+    // 如果发现循环依赖，只输出警告信息
+    if (results.length > 0) {
+      console.log(
+        '\n⚠️ Warning: Circular dependencies found, please check and fix',
+      );
+    }
+  } catch (error) {
+    console.error(
+      '❌ Error checking circular dependencies:',
+      error instanceof Error ? error.message : error,
+    );
+  }
+}
+
+/**
+ * 定义检查循环依赖的命令
+ * @param cac - CAC实例
+ */
+function defineCheckCircularCommand(cac: CAC): void {
+  cac
+    .command('check-circular')
+    .option('--staged', 'Only check staged files')
+    .option('--verbose', 'Show detailed information')
+    .option('--threshold <number>', 'Threshold for circular dependencies', {
+      default: 0,
+    })
+    .option('--ignore-dirs <dirs>', 'Directories to ignore, comma separated')
+    .usage('Analyze project circular dependencies')
+    .action(async ({ ignoreDirs, staged, threshold, verbose }) => {
+      const config: CheckCircularConfig = {
+        threshold: Number(threshold),
+        ...(ignoreDirs && { ignoreDirs: ignoreDirs.split(',') }),
+      };
+
+      await checkCircular({
+        config,
+        staged,
+        verbose: verbose ?? true,
+      });
+    });
+}
+
+export { type CheckCircularConfig, defineCheckCircularCommand };
diff --git a/admin-ui/vue/scripts/vsh/src/check-dep/index.ts b/admin-ui/vue/scripts/vsh/src/check-dep/index.ts
new file mode 100644
index 0000000..e600e1b
--- /dev/null
+++ b/admin-ui/vue/scripts/vsh/src/check-dep/index.ts
@@ -0,0 +1,194 @@
+import type { CAC } from 'cac';
+
+import { getPackages } from '@vben/node-utils';
+
+import depcheck from 'depcheck';
+
+// 默认配置
+const DEFAULT_CONFIG = {
+  // 需要忽略的依赖匹配
+  ignoreMatches: [
+    'vite',
+    'vitest',
+    'unbuild',
+    '@vben/tsconfig',
+    '@vben/vite-config',
+    '@vben/tailwind-config',
+    '@types/*',
+    '@vben-core/design',
+  ],
+  // 需要忽略的包
+  ignorePackages: [
+    '@vben/backend-mock',
+    '@vben/commitlint-config',
+    '@vben/eslint-config',
+    '@vben/node-utils',
+    '@vben/prettier-config',
+    '@vben/stylelint-config',
+    '@vben/tailwind-config',
+    '@vben/tsconfig',
+    '@vben/vite-config',
+    '@vben/vsh',
+  ],
+  // 需要忽略的文件模式
+  ignorePatterns: ['dist', 'node_modules', 'public'],
+};
+
+interface DepcheckResult {
+  dependencies: string[];
+  devDependencies: string[];
+  missing: Record<string, string[]>;
+}
+
+interface DepcheckConfig {
+  ignoreMatches?: string[];
+  ignorePackages?: string[];
+  ignorePatterns?: string[];
+}
+
+interface PackageInfo {
+  dir: string;
+  packageJson: {
+    name: string;
+  };
+}
+
+/**
+ * 清理依赖检查结果
+ * @param unused - 依赖检查结果
+ */
+function cleanDepcheckResult(unused: DepcheckResult): void {
+  // 删除file:前缀的依赖提示，该依赖是本地依赖
+  Reflect.deleteProperty(unused.missing, 'file:');
+
+  // 清理路径依赖
+  Object.keys(unused.missing).forEach((key) => {
+    unused.missing[key] = (unused.missing[key] || []).filter(
+      (item: string) => !item.startsWith('/'),
+    );
+    if (unused.missing[key].length === 0) {
+      Reflect.deleteProperty(unused.missing, key);
+    }
+  });
+}
+
+/**
+ * 格式化依赖检查结果
+ * @param pkgName - 包名
+ * @param unused - 依赖检查结果
+ */
+function formatDepcheckResult(pkgName: string, unused: DepcheckResult): void {
+  const hasIssues =
+    Object.keys(unused.missing).length > 0 ||
+    unused.dependencies.length > 0 ||
+    unused.devDependencies.length > 0;
+
+  if (!hasIssues) {
+    return;
+  }
+
+  console.log('\n📦 Package:', pkgName);
+
+  if (Object.keys(unused.missing).length > 0) {
+    console.log('❌ Missing dependencies:');
+    Object.entries(unused.missing).forEach(([dep, files]) => {
+      console.log(`  - ${dep}:`);
+      files.forEach((file) => console.log(`    → ${file}`));
+    });
+  }
+
+  if (unused.dependencies.length > 0) {
+    console.log('⚠️ Unused dependencies:');
+    unused.dependencies.forEach((dep) => console.log(`  - ${dep}`));
+  }
+
+  if (unused.devDependencies.length > 0) {
+    console.log('⚠️ Unused devDependencies:');
+    unused.devDependencies.forEach((dep) => console.log(`  - ${dep}`));
+  }
+}
+
+/**
+ * 运行依赖检查
+ * @param config - 配置选项
+ */
+async function runDepcheck(config: DepcheckConfig = {}): Promise<void> {
+  try {
+    const finalConfig = {
+      ...DEFAULT_CONFIG,
+      ...config,
+    };
+
+    const { packages } = await getPackages();
+
+    let hasIssues = false;
+
+    await Promise.all(
+      packages.map(async (pkg: PackageInfo) => {
+        // 跳过需要忽略的包
+        if (finalConfig.ignorePackages.includes(pkg.packageJson.name)) {
+          return;
+        }
+
+        const unused = await depcheck(pkg.dir, {
+          ignoreMatches: finalConfig.ignoreMatches,
+          ignorePatterns: finalConfig.ignorePatterns,
+        });
+
+        cleanDepcheckResult(unused);
+
+        const pkgHasIssues =
+          Object.keys(unused.missing).length > 0 ||
+          unused.dependencies.length > 0 ||
+          unused.devDependencies.length > 0;
+
+        if (pkgHasIssues) {
+          hasIssues = true;
+          formatDepcheckResult(pkg.packageJson.name, unused);
+        }
+      }),
+    );
+
+    if (!hasIssues) {
+      console.log('\n✅ Dependency check completed, no issues found');
+    }
+  } catch (error) {
+    console.error(
+      '❌ Dependency check failed:',
+      error instanceof Error ? error.message : error,
+    );
+  }
+}
+
+/**
+ * 定义依赖检查命令
+ * @param cac - CAC实例
+ */
+function defineDepcheckCommand(cac: CAC): void {
+  cac
+    .command('check-dep')
+    .option(
+      '--ignore-packages <packages>',
+      'Packages to ignore, comma separated',
+    )
+    .option(
+      '--ignore-matches <matches>',
+      'Dependency patterns to ignore, comma separated',
+    )
+    .option(
+      '--ignore-patterns <patterns>',
+      'File patterns to ignore, comma separated',
+    )
+    .usage('Analyze project dependencies')
+    .action(async ({ ignoreMatches, ignorePackages, ignorePatterns }) => {
+      const config: DepcheckConfig = {
+        ...(ignorePackages && { ignorePackages: ignorePackages.split(',') }),
+        ...(ignoreMatches && { ignoreMatches: ignoreMatches.split(',') }),
+        ...(ignorePatterns && { ignorePatterns: ignorePatterns.split(',') }),
+      };
+
+      await runDepcheck(config);
+    });
+}
+
+export { defineDepcheckCommand, type DepcheckConfig };
diff --git a/admin-ui/vue/scripts/vsh/src/code-workspace/index.ts b/admin-ui/vue/scripts/vsh/src/code-workspace/index.ts
new file mode 100644
index 0000000..d5ec4ee
--- /dev/null
+++ b/admin-ui/vue/scripts/vsh/src/code-workspace/index.ts
@@ -0,0 +1,78 @@
+import type { CAC } from 'cac';
+
+import { join, relative } from 'node:path';
+
+import {
+  colors,
+  consola,
+  findMonorepoRoot,
+  getPackages,
+  gitAdd,
+  outputJSON,
+  prettierFormat,
+  toPosixPath,
+} from '@vben/node-utils';
+
+const CODE_WORKSPACE_FILE = join('vben-admin.code-workspace');
+
+interface CodeWorkspaceCommandOptions {
+  autoCommit?: boolean;
+  spaces?: number;
+}
+
+async function createCodeWorkspace({
+  autoCommit = false,
+  spaces = 2,
+}: CodeWorkspaceCommandOptions) {
+  const { packages, rootDir } = await getPackages();
+
+  let folders = packages.map((pkg) => {
+    const { dir, packageJson } = pkg;
+    return {
+      name: packageJson.name,
+      path: toPosixPath(relative(rootDir, dir)),
+    };
+  });
+
+  folders = folders.filter(Boolean);
+
+  const monorepoRoot = findMonorepoRoot();
+  const outputPath = join(monorepoRoot, CODE_WORKSPACE_FILE);
+  await outputJSON(outputPath, { folders }, spaces);
+
+  await prettierFormat(outputPath);
+  if (autoCommit) {
+    await gitAdd(CODE_WORKSPACE_FILE, monorepoRoot);
+  }
+}
+
+async function runCodeWorkspace({
+  autoCommit,
+  spaces,
+}: CodeWorkspaceCommandOptions) {
+  await createCodeWorkspace({
+    autoCommit,
+    spaces,
+  });
+  if (autoCommit) {
+    return;
+  }
+  consola.log('');
+  consola.success(colors.green(`${CODE_WORKSPACE_FILE} is updated!`));
+  consola.log('');
+}
+
+function defineCodeWorkspaceCommand(cac: CAC) {
+  cac
+    .command('code-workspace')
+    .usage('Update the `.code-workspace` file')
+    .option('--spaces [number]', '.code-workspace JSON file spaces.', {
+      default: 2,
+    })
+    .option('--auto-commit', 'auto commit .code-workspace JSON file.', {
+      default: false,
+    })
+    .action(runCodeWorkspace);
+}
+
+export { defineCodeWorkspaceCommand };
diff --git a/admin-ui/vue/scripts/vsh/src/index.ts b/admin-ui/vue/scripts/vsh/src/index.ts
new file mode 100644
index 0000000..4943425
--- /dev/null
+++ b/admin-ui/vue/scripts/vsh/src/index.ts
@@ -0,0 +1,74 @@
+import { colors, consola } from '@vben/node-utils';
+
+import { cac } from 'cac';
+
+import { version } from '../package.json';
+import { defineCheckCircularCommand } from './check-circular';
+import { defineDepcheckCommand } from './check-dep';
+import { defineCodeWorkspaceCommand } from './code-workspace';
+import { defineLintCommand } from './lint';
+import { definePubLintCommand } from './publint';
+
+// 命令描述
+const COMMAND_DESCRIPTIONS = {
+  'check-circular': 'Check for circular dependencies',
+  'check-dep': 'Check for unused dependencies',
+  'code-workspace': 'Manage VS Code workspace settings',
+  lint: 'Run linting on the project',
+  publint: 'Check package.json files for publishing standards',
+} as const;
+
+/**
+ * Initialize and run the CLI
+ */
+async function main(): Promise<void> {
+  try {
+    const vsh = cac('vsh');
+
+    // Register commands
+    defineLintCommand(vsh);
+    definePubLintCommand(vsh);
+    defineCodeWorkspaceCommand(vsh);
+    defineCheckCircularCommand(vsh);
+    defineDepcheckCommand(vsh);
+
+    // Handle invalid commands
+    vsh.on('command:*', ([cmd]) => {
+      consola.error(
+        colors.red(`Invalid command: ${cmd}`),
+        '\n',
+        colors.yellow('Available commands:'),
+        '\n',
+        Object.entries(COMMAND_DESCRIPTIONS)
+          .map(([cmd, desc]) => `  ${colors.cyan(cmd)} - ${desc}`)
+          .join('\n'),
+      );
+      process.exit(1);
+    });
+
+    // Set up CLI
+    vsh.usage('vsh <command> [options]');
+    vsh.help();
+    vsh.version(version);
+
+    // Parse arguments
+    vsh.parse();
+  } catch (error) {
+    consola.error(
+      colors.red('An unexpected error occurred:'),
+      '\n',
+      error instanceof Error ? error.message : error,
+    );
+    process.exit(1);
+  }
+}
+
+// Run the CLI
+main().catch((error) => {
+  consola.error(
+    colors.red('Failed to start CLI:'),
+    '\n',
+    error instanceof Error ? error.message : error,
+  );
+  process.exit(1);
+});
diff --git a/admin-ui/vue/scripts/vsh/src/lint/index.ts b/admin-ui/vue/scripts/vsh/src/lint/index.ts
new file mode 100644
index 0000000..b95ead6
--- /dev/null
+++ b/admin-ui/vue/scripts/vsh/src/lint/index.ts
@@ -0,0 +1,48 @@
+import type { CAC } from 'cac';
+
+import { execaCommand } from '@vben/node-utils';
+
+interface LintCommandOptions {
+  /**
+   * Format lint problem.
+   */
+  format?: boolean;
+}
+
+async function runLint({ format }: LintCommandOptions) {
+  // process.env.FORCE_COLOR = '3';
+
+  if (format) {
+    await execaCommand(`stylelint "**/*.{vue,css,less,scss}" --cache --fix`, {
+      stdio: 'inherit',
+    });
+    await execaCommand(`eslint . --cache --fix`, {
+      stdio: 'inherit',
+    });
+    await execaCommand(`prettier . --write --cache --log-level warn`, {
+      stdio: 'inherit',
+    });
+    return;
+  }
+  await Promise.all([
+    execaCommand(`eslint . --cache`, {
+      stdio: 'inherit',
+    }),
+    execaCommand(`prettier . --ignore-unknown --check --cache`, {
+      stdio: 'inherit',
+    }),
+    execaCommand(`stylelint "**/*.{vue,css,less,scss}" --cache`, {
+      stdio: 'inherit',
+    }),
+  ]);
+}
+
+function defineLintCommand(cac: CAC) {
+  cac
+    .command('lint')
+    .usage('Batch execute project lint check.')
+    .option('--format', 'Format lint problem.')
+    .action(runLint);
+}
+
+export { defineLintCommand };
diff --git a/admin-ui/vue/scripts/vsh/src/publint/index.ts b/admin-ui/vue/scripts/vsh/src/publint/index.ts
new file mode 100644
index 0000000..d078673
--- /dev/null
+++ b/admin-ui/vue/scripts/vsh/src/publint/index.ts
@@ -0,0 +1,185 @@
+import type { CAC } from 'cac';
+import type { Result } from 'publint';
+
+import { basename, dirname, join } from 'node:path';
+
+import {
+  colors,
+  consola,
+  ensureFile,
+  findMonorepoRoot,
+  generatorContentHash,
+  getPackages,
+  outputJSON,
+  readJSON,
+  UNICODE,
+} from '@vben/node-utils';
+
+import { publint } from 'publint';
+import { formatMessage } from 'publint/utils';
+
+const CACHE_FILE = join(
+  'node_modules',
+  '.cache',
+  'publint',
+  '.pkglintcache.json',
+);
+
+interface PubLintCommandOptions {
+  /**
+   * Only errors are checked, no program exit is performed
+   */
+  check?: boolean;
+}
+
+/**
+ * Get files that require lint
+ * @param files
+ */
+async function getLintFiles(files: string[] = []) {
+  const lintFiles: string[] = [];
+
+  if (files?.length > 0) {
+    return files.filter((file) => basename(file) === 'package.json');
+  }
+
+  const { packages } = await getPackages();
+
+  for (const { dir } of packages) {
+    lintFiles.push(join(dir, 'package.json'));
+  }
+  return lintFiles;
+}
+
+function getCacheFile() {
+  const root = findMonorepoRoot();
+  return join(root, CACHE_FILE);
+}
+
+async function readCache(cacheFile: string) {
+  try {
+    await ensureFile(cacheFile);
+    return await readJSON(cacheFile);
+  } catch {
+    return {};
+  }
+}
+
+async function runPublint(files: string[], { check }: PubLintCommandOptions) {
+  const lintFiles = await getLintFiles(files);
+  const cacheFile = getCacheFile();
+
+  const cacheData = await readCache(cacheFile);
+  const cache: Record<string, { hash: string; result: Result }> = cacheData;
+
+  const results = await Promise.all(
+    lintFiles.map(async (file) => {
+      try {
+        const pkgJson = await readJSON(file);
+
+        if (pkgJson.private) {
+          return null;
+        }
+
+        Reflect.deleteProperty(pkgJson, 'dependencies');
+        Reflect.deleteProperty(pkgJson, 'devDependencies');
+        Reflect.deleteProperty(pkgJson, 'peerDependencies');
+        const content = JSON.stringify(pkgJson);
+        const hash = generatorContentHash(content);
+
+        const publintResult: Result =
+          cache?.[file]?.hash === hash
+            ? (cache?.[file]?.result ?? [])
+            : await publint({
+                level: 'suggestion',
+                pkgDir: dirname(file),
+                strict: true,
+              });
+
+        cache[file] = {
+          hash,
+          result: publintResult,
+        };
+
+        return { pkgJson, pkgPath: file, publintResult };
+      } catch {
+        return null;
+      }
+    }),
+  );
+
+  await outputJSON(cacheFile, cache);
+  printResult(results, check);
+}
+
+function printResult(
+  results: Array<null | {
+    pkgJson: Record<string, number | string>;
+    pkgPath: string;
+    publintResult: Result;
+  }>,
+  check?: boolean,
+) {
+  let errorCount = 0;
+  let warningCount = 0;
+  let suggestionsCount = 0;
+
+  for (const result of results) {
+    if (!result) {
+      continue;
+    }
+    const { pkgJson, pkgPath, publintResult } = result;
+    const messages = publintResult?.messages ?? [];
+    if (messages?.length < 1) {
+      continue;
+    }
+
+    consola.log('');
+    consola.log(pkgPath);
+    for (const message of messages) {
+      switch (message.type) {
+        case 'error': {
+          errorCount++;
+
+          break;
+        }
+        case 'suggestion': {
+          suggestionsCount++;
+          break;
+        }
+        case 'warning': {
+          warningCount++;
+
+          break;
+        }
+        // No default
+      }
+      const ruleUrl = `https://publint.dev/rules#${message.code.toLocaleLowerCase()}`;
+      consola.log(
+        `  ${formatMessage(message, pkgJson)}${colors.dim(` ${ruleUrl}`)}`,
+      );
+    }
+  }
+
+  const totalCount = warningCount + errorCount + suggestionsCount;
+  if (totalCount > 0) {
+    consola.error(
+      colors.red(
+        `${UNICODE.FAILURE} ${totalCount} problem (${errorCount} errors, ${warningCount} warnings, ${suggestionsCount} suggestions)`,
+      ),
+    );
+    !check && process.exit(1);
+  } else {
+    consola.log(colors.green(`${UNICODE.SUCCESS} No problem`));
+  }
+}
+
+function definePubLintCommand(cac: CAC) {
+  cac
+    .command('publint [...files]')
+    .usage('Check if the monorepo package conforms to the publint standard.')
+    .option('--check', 'Only errors are checked, no program exit is performed.')
+    .action(runPublint);
+}
+
+export { definePubLintCommand };
diff --git a/admin-ui/vue/scripts/vsh/tsconfig.json b/admin-ui/vue/scripts/vsh/tsconfig.json
new file mode 100644
index 0000000..b2ec3b6
--- /dev/null
+++ b/admin-ui/vue/scripts/vsh/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/node.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/admin-ui/vue/stylelint.config.mjs b/admin-ui/vue/stylelint.config.mjs
new file mode 100644
index 0000000..e380674
--- /dev/null
+++ b/admin-ui/vue/stylelint.config.mjs
@@ -0,0 +1,4 @@
+export default {
+  extends: ['@vben/stylelint-config'],
+  root: true,
+};
diff --git a/admin-ui/vue/tea.yaml b/admin-ui/vue/tea.yaml
new file mode 100644
index 0000000..6e56d6f
--- /dev/null
+++ b/admin-ui/vue/tea.yaml
@@ -0,0 +1,6 @@
+# https://tea.xyz/what-is-this-file
+---
+version: 1.0.0
+codeOwners:
+  - '0xB33cc732DFc15Cd39eF50Fb165c876E24417E48f'
+quorum: 1
diff --git a/admin-ui/vue/turbo.json b/admin-ui/vue/turbo.json
new file mode 100644
index 0000000..3443e27
--- /dev/null
+++ b/admin-ui/vue/turbo.json
@@ -0,0 +1,49 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "globalDependencies": [
+    "pnpm-lock.yaml",
+    "**/.env.*local",
+    "**/tsconfig*.json",
+    "internal/node-utils/*.json",
+    "internal/node-utils/src/**/*.ts",
+    "internal/tailwind-config/src/**/*.ts",
+    "internal/vite-config/*.json",
+    "internal/vite-config/src/**/*.ts",
+    "scripts/*/src/**/*.ts",
+    "scripts/*/src/**/*.json"
+  ],
+  "globalEnv": ["NODE_ENV"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": [
+        "dist/**",
+        "dist.zip",
+        ".vitepress/dist.zip",
+        ".vitepress/dist/**"
+      ]
+    },
+    "preview": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist/**"]
+    },
+    "build:analyze": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist/**"]
+    },
+    "@vben/backend-mock#build": {
+      "dependsOn": ["^build"],
+      "outputs": [".nitro/**", ".output/**"]
+    },
+    "test:e2e": {},
+    "dev": {
+      "dependsOn": [],
+      "outputs": [],
+      "cache": false,
+      "persistent": true
+    },
+    "typecheck": {
+      "outputs": []
+    }
+  }
+}
diff --git a/admin-ui/vue/vben-admin.code-workspace b/admin-ui/vue/vben-admin.code-workspace
new file mode 100644
index 0000000..aa8205b
--- /dev/null
+++ b/admin-ui/vue/vben-admin.code-workspace
@@ -0,0 +1,172 @@
+{
+  "folders": [
+    {
+      "name": "@vben/backend-mock",
+      "path": "apps/backend-mock",
+    },
+    {
+      "name": "@vben/web-antd",
+      "path": "apps/web-antd",
+    },
+    {
+      "name": "@vben/web-ele",
+      "path": "apps/web-ele",
+    },
+    {
+      "name": "@vben/web-naive",
+      "path": "apps/web-naive",
+    },
+    {
+      "name": "@vben/docs",
+      "path": "docs",
+    },
+    {
+      "name": "@vben/commitlint-config",
+      "path": "internal/lint-configs/commitlint-config",
+    },
+    {
+      "name": "@vben/eslint-config",
+      "path": "internal/lint-configs/eslint-config",
+    },
+    {
+      "name": "@vben/prettier-config",
+      "path": "internal/lint-configs/prettier-config",
+    },
+    {
+      "name": "@vben/stylelint-config",
+      "path": "internal/lint-configs/stylelint-config",
+    },
+    {
+      "name": "@vben/node-utils",
+      "path": "internal/node-utils",
+    },
+    {
+      "name": "@vben/tailwind-config",
+      "path": "internal/tailwind-config",
+    },
+    {
+      "name": "@vben/tsconfig",
+      "path": "internal/tsconfig",
+    },
+    {
+      "name": "@vben/vite-config",
+      "path": "internal/vite-config",
+    },
+    {
+      "name": "@vben-core/design",
+      "path": "packages/@core/base/design",
+    },
+    {
+      "name": "@vben-core/icons",
+      "path": "packages/@core/base/icons",
+    },
+    {
+      "name": "@vben-core/shared",
+      "path": "packages/@core/base/shared",
+    },
+    {
+      "name": "@vben-core/typings",
+      "path": "packages/@core/base/typings",
+    },
+    {
+      "name": "@vben-core/composables",
+      "path": "packages/@core/composables",
+    },
+    {
+      "name": "@vben-core/preferences",
+      "path": "packages/@core/preferences",
+    },
+    {
+      "name": "@vben-core/form-ui",
+      "path": "packages/@core/ui-kit/form-ui",
+    },
+    {
+      "name": "@vben-core/layout-ui",
+      "path": "packages/@core/ui-kit/layout-ui",
+    },
+    {
+      "name": "@vben-core/menu-ui",
+      "path": "packages/@core/ui-kit/menu-ui",
+    },
+    {
+      "name": "@vben-core/popup-ui",
+      "path": "packages/@core/ui-kit/popup-ui",
+    },
+    {
+      "name": "@vben-core/shadcn-ui",
+      "path": "packages/@core/ui-kit/shadcn-ui",
+    },
+    {
+      "name": "@vben-core/tabs-ui",
+      "path": "packages/@core/ui-kit/tabs-ui",
+    },
+    {
+      "name": "@vben/constants",
+      "path": "packages/constants",
+    },
+    {
+      "name": "@vben/access",
+      "path": "packages/effects/access",
+    },
+    {
+      "name": "@vben/common-ui",
+      "path": "packages/effects/common-ui",
+    },
+    {
+      "name": "@vben/hooks",
+      "path": "packages/effects/hooks",
+    },
+    {
+      "name": "@vben/layouts",
+      "path": "packages/effects/layouts",
+    },
+    {
+      "name": "@vben/plugins",
+      "path": "packages/effects/plugins",
+    },
+    {
+      "name": "@vben/request",
+      "path": "packages/effects/request",
+    },
+    {
+      "name": "@vben/icons",
+      "path": "packages/icons",
+    },
+    {
+      "name": "@vben/locales",
+      "path": "packages/locales",
+    },
+    {
+      "name": "@vben/preferences",
+      "path": "packages/preferences",
+    },
+    {
+      "name": "@vben/stores",
+      "path": "packages/stores",
+    },
+    {
+      "name": "@vben/styles",
+      "path": "packages/styles",
+    },
+    {
+      "name": "@vben/types",
+      "path": "packages/types",
+    },
+    {
+      "name": "@vben/utils",
+      "path": "packages/utils",
+    },
+    {
+      "name": "@vben/playground",
+      "path": "playground",
+    },
+    {
+      "name": "@vben/turbo-run",
+      "path": "scripts/turbo-run",
+    },
+    {
+      "name": "@vben/vsh",
+      "path": "scripts/vsh",
+    },
+  ],
+}
diff --git a/admin-ui/vue/vitest.config.ts b/admin-ui/vue/vitest.config.ts
new file mode 100644
index 0000000..a10b5fa
--- /dev/null
+++ b/admin-ui/vue/vitest.config.ts
@@ -0,0 +1,11 @@
+import Vue from '@vitejs/plugin-vue';
+import VueJsx from '@vitejs/plugin-vue-jsx';
+import { configDefaults, defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [Vue(), VueJsx()],
+  test: {
+    environment: 'happy-dom',
+    exclude: [...configDefaults.exclude, '**/e2e/**'],
+  },
+});
diff --git a/admin-ui/vue/vitest.workspace.ts b/admin-ui/vue/vitest.workspace.ts
new file mode 100644
index 0000000..f00d6f6
--- /dev/null
+++ b/admin-ui/vue/vitest.workspace.ts
@@ -0,0 +1,3 @@
+import { defineWorkspace } from 'vitest/config';
+
+export default defineWorkspace(['vitest.config.ts']);