commit 368e80f6bf72e4c744ca3c21017e575b7b65727b
Author: Zy <1448159279@qq.com>
Date:   Sun Sep 27 10:15:49 2026 +0800

    init

diff --git a/.claude/agents/frontend-api-types.md b/.claude/agents/frontend-api-types.md
new file mode 100644
index 0000000..d9e20d6
--- /dev/null
+++ b/.claude/agents/frontend-api-types.md
@@ -0,0 +1,32 @@
+---
+name: frontend-api-types
+description: 前端 API 与类型定义专家。用于 plus-ui 前端项目中的 src/api 层、types.ts、返回结构、Query/Form/VO/InfoVO 定义，以及前后端接口映射任务；默认基线为 Gitee 仓库 JavaLionLi/plus-ui 的 6.X-Vue 分支。
+---
+
+你负责 plus-ui 前端项目中的 API 层和类型定义。
+
+基线仓库：`https://gitee.com/JavaLionLi/plus-ui`
+默认分支：`6.X-Vue`
+远端引用必须同时标记仓库、分支和文件路径；不要写本机绝对路径。
+
+## 核心原则
+
+1. 先看当前模块已有 `src/api/<module>/<business>`。
+2. API 路径、返回类型、命名风格与当前模块保持一致。
+3. 能明确写出类型时，不要偷懒用 `any`。
+4. 如果当前模块已有 `export default { ... }`，继续保持一致。
+
+## 重点关注
+
+- `Query`
+- `VO`
+- `Form`
+- `InfoVO`
+- `AxiosPromise<PageResult<T>>`
+- 详情接口与列表接口返回结构
+
+## 自检
+
+- API 路径是否与后端一致
+- 类型是否覆盖接口真实结构
+- 是否不必要地把类型写宽了
diff --git a/.claude/agents/frontend-crud-coding.md b/.claude/agents/frontend-crud-coding.md
new file mode 100644
index 0000000..cacdc31
--- /dev/null
+++ b/.claude/agents/frontend-crud-coding.md
@@ -0,0 +1,22 @@
+---
+name: frontend-crud-coding
+description: 前端总入口。用于 plus-ui 前端项目中的标准 CRUD 页面、新增 API/types、复杂列表页增强、树筛选、导入导出、权限按钮与弹窗表单等任务，并根据任务类型选择合适的前端子 agent；默认基线为 Gitee 仓库 JavaLionLi/plus-ui 的 6.X-Vue 分支。
+---
+
+你是 plus-ui 前端项目的总入口 agent。
+
+基线仓库：`https://gitee.com/JavaLionLi/plus-ui`
+默认分支：`6.X-Vue`
+远端引用必须同时标记仓库、分支和文件路径；不要在 agent 文档中写本机绝对路径。
+
+先判断任务类型，再按下面规则处理：
+
+1. 如果是新增标准 CRUD 页面、补 `src/api`、`types.ts`、`index.vue`，优先使用 `frontend-crud-page.md`。
+2. 如果是修改已有列表页、增强导入导出、树筛选、更多菜单、状态切换，优先使用 `frontend-page-enhancement.md`。
+3. 如果只改接口层和类型定义，优先使用 `frontend-api-types.md`。
+
+通用要求：
+
+- 先读当前目录下最近似页面和 API，再动代码。
+- 冲突时优先相信当前项目真实页面，其次是公共组件和工具，再其次才是 plus-ui Gitee 仓库 `6.X-Vue` 分支的 `gen` 模板。
+- 默认直接产出可落地代码，而不是只给抽象建议。
diff --git a/.claude/agents/frontend-crud-page.md b/.claude/agents/frontend-crud-page.md
new file mode 100644
index 0000000..88ea7bc
--- /dev/null
+++ b/.claude/agents/frontend-crud-page.md
@@ -0,0 +1,41 @@
+---
+name: frontend-crud-page
+description: 前端标准 CRUD 页面专家。用于 plus-ui 前端项目中的新建列表页、弹窗表单页、标准 API/types/index.vue 骨架，以及 gen 模板到项目风格的落地任务；默认参考 Gitee 仓库 JavaLionLi/plus-ui 的 6.X-Vue 分支。
+---
+
+你负责 plus-ui 前端项目中的标准 CRUD 页面实现。
+
+基线仓库：`https://gitee.com/JavaLionLi/plus-ui`
+默认分支：`6.X-Vue`
+远端模板引用必须同时标记仓库、分支和路径，例如 `branch=6.X-Vue, path=gen/index.vue.ftl`；不要写本机绝对路径。
+
+## 核心原则
+
+1. 先看当前模块最近似页面。
+2. 再参考 plus-ui Gitee 仓库 `6.X-Vue` 分支中的 `gen` 模板。
+3. 默认同时维护：
+   `src/api/<module>/<business>/index.ts`
+   `src/api/<module>/<business>/types.ts`
+   `src/views/<module>/<business>/index.vue`
+
+## 页面规则
+
+- 页面优先使用 `<script setup name="Xxx" lang="ts">`
+- 标准结构通常包含：
+  搜索区、表格区、工具栏、分页、编辑弹窗
+- 常见状态：
+  `loading`、`showSearch`、`ids`、`single`、`multiple`、`total`
+- 查询与表单优先使用 `reactive<PageData<Form, Query>>({...})`
+
+## API / types 规则
+
+- 请求统一通过 `@/utils/request`
+- 同目录维护 `index.ts` 与 `types.ts`
+- 标准 CRUD 通常包含：列表、详情、新增、修改、删除
+- 列表接口通常返回 `AxiosPromise<PageResult<XxxVO>>`
+
+## 自检
+
+- API 路径是否与后端一致
+- `index.ts` 与 `types.ts` 是否同步补齐
+- 页面是否只是模板裸输出，如果是要继续补强到当前项目风格
diff --git a/.claude/agents/frontend-page-enhancement.md b/.claude/agents/frontend-page-enhancement.md
new file mode 100644
index 0000000..28351a8
--- /dev/null
+++ b/.claude/agents/frontend-page-enhancement.md
@@ -0,0 +1,31 @@
+---
+name: frontend-page-enhancement
+description: 复杂前端页面增强专家。用于修改 plus-ui 前端项目中已经存在的列表页、树筛选页、带导入导出和更多菜单的页面，强调增量修改和保留现有交互能力；默认基线为 Gitee 仓库 JavaLionLi/plus-ui 的 6.X-Vue 分支。
+---
+
+你负责 plus-ui 前端项目中已有页面的增强，不是重写页面。
+
+基线仓库：`https://gitee.com/JavaLionLi/plus-ui`
+默认分支：`6.X-Vue`
+远端引用必须同时标记仓库、分支和文件路径；不要写本机绝对路径。
+
+## 核心原则
+
+1. 优先阅读当前页面完整实现。
+2. 增量修改，不重写整页。
+3. 保留已有树筛选、导入导出、列显隐、更多菜单、状态切换、路由跳转、SCSS 页面壳。
+4. 不要把复杂页面退化成 generator 式基础列表页。
+
+## 常见任务
+
+- 调整工具栏和更多菜单
+- 增加筛选条件和日期范围
+- 增加导入导出能力
+- 增加状态切换、快捷操作、确认弹窗
+- 补复杂页面的小型子功能
+
+## 自检
+
+- 是否破坏了原页面结构和样式
+- 是否误删了已有权限控制或交互能力
+- 是否应该拆成子组件而不是继续堆主页面
diff --git a/.codex/skills/frontend-crud-coding/SKILL.md b/.codex/skills/frontend-crud-coding/SKILL.md
new file mode 100644
index 0000000..aab7790
--- /dev/null
+++ b/.codex/skills/frontend-crud-coding/SKILL.md
@@ -0,0 +1,151 @@
+---
+name: frontend-crud-coding
+description: 在 plus-ui 前端项目中按真实 Vue 3 + TypeScript + Element Plus + oxlint/oxfmt 代码风格生成或修改页面、API、types、hooks 接入和样式壳。用于新增或修改标准 CRUD 列表页、树表页、系统管理页、监控页、workflow 页面、demo 页面，补齐与后端接口对应的 src/api、types 和 src/views 代码；默认参考 Gitee 仓库 JavaLionLi/plus-ui 的 6.X-Vue 分支，触发后应先读取适用 references，再阅读目标模块真实代码和项目内 gen 代码生成模板。
+---
+
+# 前端编码规范
+
+先对齐当前前端项目里的真实实现，再参考项目内 `gen` 目录下的代码生成模板。不要只套通用 Vue 模板，也不要把 generator 模板原样复制进来而忽略当前项目已经演进出的 hooks、页面壳、类型入口和下载方式。
+
+## 项目基线
+
+- 基线仓库：`https://gitee.com/JavaLionLi/plus-ui`
+- 默认分支：`6.X-Vue`
+- 远端引用必须同时标记仓库、分支和文件路径，例如 `https://gitee.com/JavaLionLi/plus-ui/blob/6.X-Vue/gen/index.vue.ftl` 或 `branch=6.X-Vue, path=gen/index.vue.ftl`。
+- 不要在 skill、reference 或 agent 文档中写本机绝对路径；本地文件读取以运行时工作目录为准。
+- 如果用户指定其他分支，先按用户分支读取同一仓库的对应文件，并在结果中说明使用的分支。
+
+## 执行流程
+
+1. 判断任务类型：新增标准 CRUD、树表、已有页面增强、复杂业务页、只补 API/types。
+2. 按“文档读取规则”读取必要 reference，不一次性展开所有资料。
+3. 阅读目标目录下最近似的真实代码：
+   - 标准单表优先看 `src/views/demo/demo/index.vue`、`src/api/demo/demo/*`。
+   - 树表优先看 `src/views/demo/tree/index.vue`、`src/views/workflow/category/index.vue`。
+   - 系统复杂页优先看 `src/views/system/user/index.vue`、`system/role`、`system/post`、`system/config`。
+   - workflow 业务页优先看 `src/views/workflow/*` 同类页面。
+4. 新增标准页面前，对照项目内模板确认基础骨架：
+   - API 模板：`gen/api.ts.ftl`
+   - types 模板：`gen/types.ts.ftl`
+   - 标准单表页模板：`gen/index.vue.ftl`
+   - 树表页模板：`gen/index-tree.vue.ftl`
+5. 新增代码时通常同步维护 `src/api/<module>/<business>/index.ts`、`types.ts`、`src/views/<module>/<business>/index.vue`。
+6. 增强已有页面时只做增量修改，保留原页面的树筛选、导入导出、列显隐、权限、字典、弹窗和路由跳转能力。
+7. 修改完成后按影响范围运行验证：优先 `pnpm exec vue-tsc --noEmit`，改动页面或导入时再跑 `pnpm lint`，大范围变更再跑 `pnpm build`。
+
+## 文档读取规则
+
+- 前端 API、types、页面、hooks、样式和验证规则，先读 [references/frontend.md](references/frontend.md)。
+- 不确定任务边界、需要标准用例或提问方式时，再读 [references/examples.md](references/examples.md)。
+- reference 只约束实现方式和自检范围；发生冲突时，以当前模块真实代码和实际调用点为准。
+
+## 优先级规则
+
+发生冲突时按下面顺序决策：
+
+1. 目标目录下最近似页面、API、types 的真实实现。
+2. 当前项目公共 hooks、组件、工具和样式约定。
+3. 项目内 `gen` 代码生成模板。
+4. 通用 Vue 3 / Element Plus 习惯。
+
+也就是说：
+
+- 同模块已有页面怎么写，优先怎么写。
+- 没有现成页面时，使用项目内 `gen` 模板作为骨架，再改成当前项目风格。
+- 复杂模块不能为了“标准 CRUD”退化成裸模板页。
+
+## 仓库通用规则
+
+- 遵循 [`.editorconfig`](../../../.editorconfig)：UTF-8、LF、2 空格缩进；Markdown 例外。
+- 当前仓库没有 `.prettierrc`，格式脚本是 `pnpm run fmt` 调用 `oxfmt .`，lint 脚本是 `pnpm lint` 调用 `oxlint src`。
+- 页面优先使用 `<script setup name="Xxx" lang="ts">`。
+- API 返回类型优先从 `@/utils/api-types` 引入 `AxiosPromise`，分页结果从 `@/api/types` 引入 `PageResult`。
+- 请求统一通过 `@/utils/request`，导出下载使用 `import { download as requestDownload } from '@/utils/request';`。
+- 标准列表页优先复用 `useLoading`、`useSearchToggle`、`useSearchReset`、`useTableSelection`、`useFormDialog`、`useDateRangeQuery`。
+- 页面壳优先使用 `p-2 app-container <module>-<business>-page`、`search-panel`、`toolbar-shell`、`data-table`、`right-toolbar`、`pagination`。
+- 新页面不要无故引入另一套状态管理、请求封装、样式体系或权限写法。
+
+## 目录映射规则
+
+通常按下面关系组织代码：
+
+- 后端 `/system/user/*` 对应 `src/api/system/user/*` 与 `src/views/system/user/*`
+- 后端 `/monitor/xxx/*` 对应 `src/api/monitor/xxx/*` 与 `src/views/monitor/xxx/*`
+- 后端 `/workflow/xxx/*` 对应 `src/api/workflow/xxx/*` 与 `src/views/workflow/xxx/*`
+- 后端 `/demo/xxx/*` 对应 `src/api/demo/xxx/*` 与 `src/views/demo/xxx/*`
+
+标准新增通常至少包含：
+
+- `src/api/<module>/<business>/index.ts`
+- `src/api/<module>/<business>/types.ts`
+- `src/views/<module>/<business>/index.vue`
+
+按业务复杂度，可能继续补：
+
+- 导入弹窗
+- 详情抽屉或详情页
+- 树筛选面板
+- 列显隐配置
+- 分配/授权子页面
+- 自定义 SCSS 样式
+
+## 任务分型
+
+### 1. 标准单表 CRUD
+
+以 `gen/index.vue.ftl`、`gen/api.ts.ftl`、`gen/types.ts.ftl` 和 `src/views/demo/demo/index.vue` 为主要起点，补齐列表、搜索、分页、新增、编辑、删除、导出、权限、类型和验证。
+
+### 2. 树表 CRUD
+
+以 `src/views/demo/tree/index.vue`、`src/views/workflow/category/index.vue` 为主要起点。列表接口通常返回数组而不是 `PageResult`，页面使用 `handleTree`、`useTreeTableExpand`，`Query` 通常不继承 `PageQuery`。
+
+### 3. 强业务页面
+
+如果页面包含树筛选、导入导出、更多菜单、状态切换、角色分配、详情抽屉、复杂校验、联动选择或独立路由，优先增量修改现有页面。不要重写成简单 CRUD。
+
+### 4. 工作流页面
+
+workflow 目录优先参考 `src/views/workflow/*`。流程定义、流程实例、任务列表、请假申请等页面通常有业务按钮、弹窗和路由跳转，不要硬套 system 模块。
+
+### 5. 只补 API 和 types
+
+只维护 `src/api/<module>/<business>/index.ts` 与 `types.ts`，但仍要与后端路由、返回结构、当前模块导入方式和类型入口一致。
+
+## 输出要求
+
+使用本 skill 时，默认期望产出应满足：
+
+- 类型完整，不把页面逻辑大量写成 `any`。
+- API 路径、函数名、权限标识与后端接口保持一致。
+- 标准页查询、重置、分页、弹窗、提交、删除、导出流程闭环完整。
+- 复杂页面保留原有交互能力和业务约束。
+- 代码体现当前项目 hooks、页面壳和下载方式，而不是 `gen` 模板裸输出。
+- 交付前说明运行过的验证命令；如果无法验证，说明原因。
+
+## 快速检查清单
+
+- `AxiosPromise` 是否来自 `@/utils/api-types`。
+- `PageResult` 是否来自 `@/api/types`。
+- API `params` 和 `data` 是否与后端方法一致。
+- 日期范围是否通过 `useDateRangeQuery` 或附近页面现有方式处理。
+- 列表 loading 是否通过 `useLoading` 或原页面方式维护。
+- 弹窗是否通过 `useFormDialog` 或原页面方式维护。
+- 多选状态是否通过 `useTableSelection` 或原页面方式维护。
+- 权限指令是否保持同文件一致，默认使用当前项目主流 `v-hasPermi`。
+- 导出是否使用 `requestDownload('<module>/<business>/export', { ...queryParams.value }, '<name>_<time>.xlsx')`。
+- 页面壳是否保留 `search-panel`、`table-panel`、`toolbar-shell`、`data-table`、`right-toolbar`、`pagination`。
+
+## 推荐提问方式
+
+推荐把请求描述到下面粒度：
+
+- 目标模块和业务名
+- 后端接口前缀
+- 是新增页面、修改页面，还是只补 API/types
+- 是否需要导入、导出、树筛选、树表、状态切换、字典、权限按钮
+- 希望参考哪个现有页面
+
+例如：
+
+- 使用 `$frontend-crud-coding` 为 `/system/client` 补一套标准 CRUD 页面，参考 `gen` 模板、`demo/demo` 和 `system/client`。
+- 使用 `$frontend-crud-coding` 修改 `workflow/category` 列表页，增加导出按钮和状态筛选，保持当前 workflow 风格。
diff --git a/.codex/skills/frontend-crud-coding/agents/openai.yaml b/.codex/skills/frontend-crud-coding/agents/openai.yaml
new file mode 100644
index 0000000..ead6602
--- /dev/null
+++ b/.codex/skills/frontend-crud-coding/agents/openai.yaml
@@ -0,0 +1,7 @@
+interface:
+  display_name: "前端编码"
+  short_description: "按 plus-ui 6.X-Vue 真实代码和 gen 模板编写前端 CRUD"
+  default_prompt: "使用 $frontend-crud-coding 先读取适用 reference，再按 plus-ui Gitee 仓库 6.X-Vue 分支的真实页面、hooks、API/types 约定和项目内 gen 模板实现前端修改。"
+
+policy:
+  allow_implicit_invocation: true
diff --git a/.codex/skills/frontend-crud-coding/references/examples.md b/.codex/skills/frontend-crud-coding/references/examples.md
new file mode 100644
index 0000000..c4cd40b
--- /dev/null
+++ b/.codex/skills/frontend-crud-coding/references/examples.md
@@ -0,0 +1,126 @@
+# 使用案例
+
+## 案例 1：新增标准 CRUD 页面
+
+### 用户提问示例
+
+```text
+使用 $frontend-crud-coding 为 system/client 补一套前端 CRUD 页面。
+后端接口已经有 /system/client/list、/system/client/{id}、POST /system/client、PUT /system/client、DELETE /system/client/{ids}。
+请参考 plus-ui Gitee 仓库 6.X-Vue 分支的项目内 gen 模板、src/views/demo/demo/index.vue 和现有 system/client 风格实现。
+```
+
+### 期望执行方式
+
+- 先看 `src/api/system/client/*` 和 `src/views/system/client/index.vue` 是否已存在。
+- 再看 `src/views/demo/demo/index.vue` 的标准 hooks 版 CRUD 骨架。
+- 对照项目内 `gen/api.ts.ftl`、`gen/types.ts.ftl`、`gen/index.vue.ftl`。
+- 生成或修改 `api/index.ts`、`types.ts`、`views/.../index.vue`。
+- 使用 `AxiosPromise` from `@/utils/api-types`、`PageResult` from `@/api/types`、`useLoading`、`useFormDialog`、`useSearchReset`、`useTableSelection`。
+
+## 案例 2：新增树表页面
+
+### 用户提问示例
+
+```text
+使用 $frontend-crud-coding 为 demo/tree2 新增树表 CRUD，接口返回数组，字段包含 id、parentId、name、orderNum。
+参考 src/views/demo/tree/index.vue 和 workflow/category。
+```
+
+### 期望执行方式
+
+- 优先判断这是树表，不生成分页 `PageResult` 页面。
+- API 列表返回 `AxiosPromise<Tree2VO[]>`。
+- `Query` 不继承 `PageQuery`。
+- 页面使用 `handleTree`、`row-key`、`tree-props`、`useTreeTableExpand`、`el-tree-select`。
+- 新增子节点时从当前行带入 `parentId`。
+
+## 案例 3：修改已有复杂列表页
+
+### 用户提问示例
+
+```text
+使用 $frontend-crud-coding 修改 system/user 页面：
+1. 新增一个创建时间快捷筛选
+2. 导出按钮保留在更多菜单中
+3. 保持现有树筛选、导入、列显隐、详情抽屉和角色分配不变
+```
+
+### 期望执行方式
+
+- 判断这是“已有复杂页面增强”，不是重新生成 CRUD。
+- 优先阅读 `src/views/system/user/index.vue`。
+- 保留 `TreePanel`、导入弹窗、`right-toolbar` 列显隐、`UserViewDrawer`、角色分配路由、权限控制。
+- 只增量修改搜索和查询参数处理。
+
+## 案例 4：修改 workflow 页面
+
+### 用户提问示例
+
+```text
+使用 $frontend-crud-coding 为 workflow/category 增加状态筛选和导出按钮，保持 workflow 模块自己的树表风格。
+```
+
+### 期望执行方式
+
+- 优先看 `src/views/workflow/category/index.vue` 和 `src/api/workflow/category/*`。
+- 判断是否需要后端新增导出接口；前端导出路径保持 `workflow/category/export`。
+- 不迁移 system/user 的用户专属逻辑。
+- 保留树表、`useTreeTableExpand`、`handleTree` 和分类弹窗逻辑。
+
+## 案例 5：只补 API 和 types
+
+### 用户提问示例
+
+```text
+使用 $frontend-crud-coding 为 monitor/cache 补全前端 API 和 types，页面先不改。
+```
+
+### 期望执行方式
+
+- 只维护 `src/api/monitor/cache/index.ts` 和 `src/api/monitor/cache/types.ts`。
+- 仍然检查同目录 monitor API 的 `export function` / `export const` 风格。
+- 返回类型使用 `AxiosPromise` from `@/utils/api-types`。
+- 不创建页面，不改路由。
+
+## 案例 6：接入后端新增状态切换接口
+
+### 用户提问示例
+
+```text
+使用 $frontend-crud-coding 给 system/client 页面接入 PUT /system/client/changeStatus，状态字段 status，参考 gen 模板。
+```
+
+### 期望执行方式
+
+- API 增加 `changeClientStatus(id, status)`。
+- types 确认 `status` 类型是 string、number 还是 boolean。
+- 表格列用 `el-switch`，active/inactive 值跟后端字段类型一致。
+- 切换失败时回滚原状态。
+- 权限使用 `system:client:edit` 或后端实际权限。
+
+## 推荐的高质量任务描述
+
+```text
+使用 $frontend-crud-coding 在当前前端项目中新增 `/system/notice` 列表页增强：
+1. 保留现有页面
+2. 新增状态筛选和导出
+3. API 路径沿用后端接口
+4. 参考 system/config 的工具栏与导出交互
+5. 参考 plus-ui Gitee 仓库 6.X-Vue 分支的 gen 模板补齐缺失 types
+```
+
+## 不推荐的任务描述
+
+```text
+帮我写个后台页面
+```
+
+更好的写法至少补充：
+
+- 模块名
+- 业务名
+- 后端接口前缀
+- 是新增还是修改
+- 是否需要分页、导出、树表、字典、权限
+- 想参考哪个现有页面
diff --git a/.codex/skills/frontend-crud-coding/references/frontend.md b/.codex/skills/frontend-crud-coding/references/frontend.md
new file mode 100644
index 0000000..1fae93b
--- /dev/null
+++ b/.codex/skills/frontend-crud-coding/references/frontend.md
@@ -0,0 +1,156 @@
+# 前端约定
+
+## 优先参考的代码来源
+
+- 默认远端基线：`https://gitee.com/JavaLionLi/plus-ui`，分支 `6.X-Vue`。引用远端文件时必须同时写明 `branch=6.X-Vue` 和仓库内路径。
+- 当前目标目录下最近似页面、API、types。
+- 标准单表：`src/views/demo/demo/index.vue`、`src/api/demo/demo/index.ts`、`src/api/demo/demo/types.ts`。
+- 树表：`src/views/demo/tree/index.vue`、`src/views/workflow/category/index.vue`。
+- 复杂系统页：`src/views/system/user/index.vue`、`src/views/system/role/index.vue`、`src/views/system/post/index.vue`、`src/views/system/config/index.vue`。
+- workflow 页：`src/views/workflow/*`、`src/api/workflow/*`。
+- 监控页：`src/views/monitor/*`、`src/api/monitor/*`。
+- 公共 hooks：`src/hooks/async/useLoading.ts`、`src/hooks/dialog/*`、`src/hooks/form/*`、`src/hooks/table/*`、`src/hooks/tree/*`。
+- 项目内 generator 模板：
+  `gen/api.ts.ftl`
+  `gen/types.ts.ftl`
+  `gen/index.vue.ftl`
+  `gen/index-tree.vue.ftl`
+
+## 基础栈与格式
+
+- 技术栈是 Vue 3 + TypeScript + Element Plus + Vite + Pinia。
+- 包管理按仓库现状使用 pnpm。
+- `.editorconfig` 要求 UTF-8、LF、2 空格缩进。
+- 当前仓库没有 `.prettierrc`；格式化使用 `pnpm run fmt`，lint 使用 `pnpm lint`。
+- 不要在一个页面里混入与仓库不一致的格式和写法。
+- 不要把本机绝对路径写进 skill 输出或参考文档；跨环境参考统一使用 Gitee 仓库 URL、分支和仓库内相对路径。
+
+## API 文件规则
+
+- 标准 API 文件放在 `src/api/<module>/<business>/index.ts`，同目录维护 `types.ts`。
+- import 顺序优先跟随附近文件，标准生成页常见形式：
+  `import type { XxxForm, XxxQuery, XxxVO } from '@/api/<module>/<business>/types';`
+  `import type { PageResult } from '@/api/types';`
+  `import type { AxiosPromise } from '@/utils/api-types';`
+  `import request from '@/utils/request';`
+- 不要从 `axios` 引入 `AxiosPromise`。
+- 列表分页接口通常返回 `AxiosPromise<PageResult<XxxVO>>`。
+- 树表列表接口通常返回 `AxiosPromise<XxxVO[]>`。
+- 详情接口返回 `AxiosPromise<XxxVO>`；复杂详情返回单独的 `InfoVO`。
+- 标准函数命名：
+  `listXxx` -> `GET /<module>/<business>/list`
+  `getXxx` -> `GET /<module>/<business>/{id}`
+  `addXxx` -> `POST /<module>/<business>`
+  `updateXxx` -> `PUT /<module>/<business>`
+  `delXxx` -> `DELETE /<module>/<business>/{id or ids}`
+  `changeXxxStatus` -> `PUT /<module>/<business>/changeStatus`
+- query string 用 `params`，请求体用 `data`。
+- 加密、防重复提交等 headers 直接写在请求配置里，例如用户重置密码中的 `isEncrypt`、`repeatSubmit`。
+- 当前仓库有些 API 使用 `export const`，有些使用 `export function`；新增标准 CRUD 优先跟随 `gen/api.ts.ftl` 和相邻模块。
+- 只有相邻模块已有 `export default { ... }` 聚合时才新增默认导出。
+
+## 类型文件规则
+
+- 标准类型定义 `VO`、`Form`、`Query`，必要时补 `InfoVO`、`TreeVO`、`ResetPwdForm` 等扩展类型。
+- `Form` 通常继承 `BaseEntity`。
+- 非树表 `Query` 通常继承 `PageQuery`。
+- 树表 `Query` 通常不继承 `PageQuery`。
+- ID 字段通常使用 `string | number`，批量删除参数使用 `string | number | Array<string | number>`。
+- Java 数值类型映射为 `number`，Boolean 映射为 `boolean`，日期/文本默认 `string`。
+- 日期范围查询保留 `params?: any`，不要因为它看起来宽松就删掉。
+- 列表对象、表单对象、查询对象职责分开；字段不一致时不要强行复用一个接口。
+- 能明确写出类型时不要用 `any`；组件库、字典或历史接口确实无法收窄时再保留。
+
+## Vue 页面结构规则
+
+- 页面优先使用 `<script setup name="Xxx" lang="ts">`。
+- 标准根节点使用 `class="p-2 app-container <module>-<business>-page"`；已有页面是特殊布局时保持原样。
+- 标准列表页结构：
+  搜索卡片 `search-panel`
+  表格卡片 `table-panel`
+  工具栏 `toolbar-shell`
+  表格 `data-table`
+  `right-toolbar`
+  `pagination`
+  新增/编辑 `el-dialog`
+- 搜索区通过 `useSearchToggle` 控制 `showSearch`，头部点击切换。
+- 列表 loading 通过 `useLoading(true)` 和 `withLoading`。
+- 选择状态通过 `useTableSelection<XxxVO>(item => item.id)` 返回 `ids`、`single`、`multiple`、`handleSelectionChange`。
+- 表单弹窗优先使用 `useFormDialog({ form, formRef, initialFormData })`，返回 `dialog`、`resetForm`、`openDialog`、`showDialog`、`closeDialog`。
+- 仅需要简单弹窗状态或一个页面多个弹窗时使用 `useDialogState`。
+- 日期范围查询优先使用 `useDateRangeQuery()`；带后端参数名时使用 `useDateRangeQuery('CreateTime')` 等相邻页面模式。
+- 查询和表单状态通常放在 `reactive<PageData<Form, Query>>({ form, queryParams, rules })`，再 `toRefs(data)`。
+
+## 页面行为规则
+
+- `getList` 负责设置 loading、调用列表接口、回填列表和 `total`。
+- `handleQuery` 先把 `queryParams.value.pageNum = 1`，再调用 `getList()`；树表无分页时只调用 `getList()`。
+- `resetQuery` 使用 `useSearchReset`，分页页传 `pageNumKey: 'pageNum'`，需要时传 `pageSizeKey` 和 `resetExtras`。
+- `handleAdd` 使用 `openDialog('添加xxx')`；如果有树/联动选项，打开前后按现有页面加载选项。
+- `handleUpdate` 先 `reset()`，再按行或 `ids.value[0]` 查详情，`Object.assign(form.value, res.data)`，最后 `showDialog('修改xxx')`。
+- `submitForm` 表单校验通过后设置 `buttonLoading`，根据主键判断新增或修改，成功后 `modal.msgSuccess('操作成功')`、关闭弹窗、刷新列表。
+- `handleDelete` 使用 `modal.confirm(...)` 二次确认，再调用删除接口，成功提示并刷新。
+- `handleExport` 使用 `requestDownload('<module>/<business>/export', { ...queryParams.value }, '<business>_<timestamp>.xlsx')`。
+- 状态切换失败时要把 switch 值回滚，参考 generator 模板和现有 `system/user`、`system/role`。
+- 导入上传使用 `globalHeaders()`、`import.meta.env.VITE_APP_BASE_API`、`ElUpload`，优先参考 `system/user` 或流程定义页面。
+
+## 字典、权限与公共工具
+
+- 字典使用 `useDict`：
+  `const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));`
+- 新增代码默认使用当前项目主流 `v-hasPermi`。
+- 如果正在修改的文件已经混用或使用 `v-has-permi`，保持同文件现状，不为统一写法而重排无关代码。
+- `el-dropdown-item` 延迟加载导致权限指令不可靠时，使用 `v-if="checkPermi([...])"`，参考 `system/user`。
+- 常用工具：
+  `modal` from `@/plugins/modal`
+  `download as requestDownload` from `@/utils/request`
+  `useDict` from `@/utils/dict`
+  `checkPermi` from `@/utils/permission`
+  `handleTree`、`parseStrEmpty` from `@/utils/ruoyi`
+
+## 组件与样式规则
+
+- 优先复用公共组件：`right-toolbar`、`pagination`、`DictTag` / `dict-tag`、`ImageUpload` / `image-upload`、`ImagePreview` / `image-preview`、`FileUpload` / `file-upload`、`Editor` / `editor`、`TreePanel`。
+- 标准页面尽量使用已有页面壳类，不堆大量内联样式。
+- 复杂页面需要 scoped SCSS 时优先复用：
+  `@use '@/assets/styles/components/page-shell' as pageShell;`
+  再按现有 mixin 使用。
+- 不要为了单页需求修改全局组件样式。
+- 类名保持模块语义：`system-client-page`、`workflow-category-page`、`demo-demo-page`。
+
+## 树表规则
+
+- 树表列表接口通常返回数组，页面通过 `handleTree<T>(res.data, 'id', 'parentId')` 组树。
+- 使用 `row-key`、`:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"`。
+- 展开/折叠使用 `useTreeTableExpand`。
+- 表单中上级节点使用 `el-tree-select`。
+- 新增子节点时从当前行回填 `parentId`。
+- 删除确认文案优先使用业务名称，而不是批量 ID 文案。
+
+## 与 gen 模板的关系
+
+- `gen` 是 plus-ui 前端项目内的生成模板；默认远端位置是 `https://gitee.com/JavaLionLi/plus-ui/tree/6.X-Vue/gen`，分支必须标记为 `6.X-Vue`。
+- 本地仓库存在对应文件时优先读本地 `gen`，但不要把本地绝对路径写入 skill 或交付内容。
+- 新增标准单表页面时读取 `gen/index.vue.ftl`、`gen/api.ts.ftl`、`gen/types.ts.ftl`。
+- 新增树表页面时读取 `gen/index-tree.vue.ftl`、`gen/api.ts.ftl`、`gen/types.ts.ftl`。
+- `gen` 模板是标准骨架，不是最终答案；落地时仍要对照目标模块真实页面和公共 hooks。
+- 当前前端项目已经把生成页升级为 hooks 版：`useLoading`、`useFormDialog`、`useSearchReset`、`useTableSelection`、`useDateRangeQuery`。
+- 新增标准 CRUD 时，先从 `gen` 确认字段、权限、导出、状态切换、排序、日期范围等，再落成当前项目的实际页面壳。
+- 修改已有页面时，不要把现有强业务逻辑替换回 `gen` 的简化逻辑。
+
+## 验证规则
+
+- 只改文档或 skill：运行 skill 基础校验即可。
+- 改前端 TS/Vue/API/types：优先运行 `pnpm exec vue-tsc --noEmit`。
+- 改页面模板、import、权限或较多文件：再运行 `pnpm lint`。
+- 改公共 hooks、组件、构建相关或大范围页面：再运行 `pnpm build`。
+- 如果验证因为环境、依赖或权限失败，交付时说明失败命令和原因。
+
+## 避免事项
+
+- 不要从 `axios` 引入 `AxiosPromise`。
+- 不要绕开 `request` 或 `requestDownload` 自造请求/下载封装。
+- 不要跳过 `types.ts`，把类型全写在页面里。
+- 不要删除日期范围 `params`、权限指令、导出、导入、树筛选、列显隐等现有能力。
+- 不要为了“更整洁”重写复杂页面的大块业务逻辑。
+- 不要在新增标准页里使用与仓库不一致的 UI 壳或状态管理方式。
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..5b1a804
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,21 @@
+# 告诉EditorConfig插件，这是根文件，不用继续往上查找
+root = true
+
+# 匹配全部文件
+[*]
+# 缩进风格，可选space、tab
+indent_style = space
+# 缩进的空格数
+indent_size = 2
+# 设置字符集
+charset = utf-8
+# 结尾换行符，可选lf、cr、crlf
+end_of_line = lf
+# 在文件结尾插入新行
+trim_trailing_whitespace = true
+# 删除一行中的前后空格
+insert_final_newline = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..67eef74
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,42 @@
+# 页面标题
+VITE_APP_TITLE = 智净云 · 智能家居管理后台
+VITE_APP_LOGO_TITLE = RuoYi-Vue-Plus
+
+# 开发环境配置
+VITE_APP_ENV = 'development'
+
+# 开发环境
+VITE_APP_BASE_API = '/dev-api'
+
+# 应用访问路径 例如使用前缀 /admin/
+VITE_APP_CONTEXT_PATH = '/'
+
+# 监控地址
+VITE_APP_MONITOR_ADMIN = 'http://localhost:9090/admin/applications'
+
+# SnailJob 控制台地址
+VITE_APP_SNAILJOB_ADMIN = 'http://localhost:8800/snail-job'
+
+# SnailAI 控制台地址
+VITE_APP_SNAILAI_ADMIN = 'http://localhost:8900/snail-ai'
+
+VITE_APP_PORT = 54123
+
+# 接口加密功能开关(如需关闭 后端也必须对应关闭)
+VITE_APP_ENCRYPT = true
+# 接口加密传输 RSA 公钥与后端解密私钥对应 如更换需前后端一同更换
+VITE_APP_RSA_PUBLIC_KEY = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDvEDuRIOM3oZPWj9Ukoc5pQklR4PFH6/clnjeFqjDLIgDyQvjxhgqAZQA+E9eD6qu6FsXPmK8djcL+nh3cFHz4pX473jDvO3Sve+8yL3VRQ0n2pRgQ2a01MJsy+WwTZCBYWf0VnLRIvANUoWQgy9vz94q7Va44dg7A1/3ICf+xAwIDAQAB'
+# 接口响应解密 RSA 私钥与后端加密公钥对应 如更换需前后端一同更换
+VITE_APP_RSA_PRIVATE_KEY = 'MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAObq7yrxfvyieZtTjAYyrdvi59tYTXxjO5ajmPCRSXBY9M9wQ1tli297JN6mnY53UJMNyOFNSZVi8WSFoIXjpR87FmvChJlzeN/dZdd3SEs48Ee66XKeSePYqxa8oO5GKDsnajgpsOHKXSeeVSIysiIPS2/WsEqk0In9P4w3RsRFAgMBAAECgYBiMEWwce24SPICnRzuScBpvmsudrbEDIH7BOd0a6LZlcnLJwZNJ7mJlshPsHNQb+WgEf135+BBGEhioPtn0yuTdEuKP4kB9UdYUKiayWCoWhJpesv7sAD4RDClV7dhuV+gcd1AXD+YzyRIPbGm0VC2U+4q8/+UPRpVjqskbLVTgQJBAPRpou7g3S8n4XB527kq0D8I3+ZYwMxZhszwhrCDpJU319+ucmpLVwYIzDmZVeID2QQdUaDfIEViFHu95xDrGiUCQQDx3YOKn3yaEctk/ERVn7hDAyAXUbd8/pv2b24/M/l1ZevlsFem8U4Jk5Mu64t3z3YGJoymEjQmbucwT01iKhehAkEAxlnccsRmfFh/KkqauKE4M4++NTAd9zlInpUsmZ+cN8UEGnF2RTEzRKBrLOt1uWCqBB7PGiE6DVTVjr7FAQPrSQJAT5yeY87DcONSk9cFlzmPqV8p/QME5rvYEnHzVBKDlkUKNPyqnWToTvaoh9U4fyNmsfeWbEOprszqhFhWHG3GgQJAK8+ynmyFhaw63+Hx2KU5zR4hVuQso2IzrEurGxCxybV6mR7VBerb4502+EPx3PmOgxQL+niUFhcMWxcvBFP9+A=='
+
+# 客户端id
+VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
+
+# 统一消息推送开关
+VITE_APP_MESSAGE_ENABLED = true
+
+# sse / websocket
+VITE_APP_MESSAGE_TRANSPORT = 'sse'
+
+# 统一消息推送路径
+VITE_APP_MESSAGE_PATH = '/resource/message'
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..45011d8
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,45 @@
+# 页面标题
+VITE_APP_TITLE = RuoYi-Vue-Plus后台管理系统
+VITE_APP_LOGO_TITLE = RuoYi-Vue-Plus
+
+# 生产环境配置
+VITE_APP_ENV = 'production'
+
+# 应用访问路径 例如使用前缀 /admin/
+VITE_APP_CONTEXT_PATH = '/'
+
+# 监控地址
+VITE_APP_MONITOR_ADMIN = '/admin/applications'
+
+# SnailJob 控制台地址
+VITE_APP_SNAILJOB_ADMIN = '/snail-job'
+
+# SnailAI 控制台地址
+VITE_APP_SNAILAI_ADMIN = '/snail-ai'
+
+# 生产环境
+VITE_APP_BASE_API = '/prod-api'
+
+# 是否在打包时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS = gzip
+
+VITE_APP_PORT = 80
+
+# 接口加密功能开关(如需关闭 后端也必须对应关闭)
+VITE_APP_ENCRYPT = true
+# 接口加密传输 RSA 公钥与后端解密私钥对应 如更换需前后端一同更换
+VITE_APP_RSA_PUBLIC_KEY = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDvEDuRIOM3oZPWj9Ukoc5pQklR4PFH6/clnjeFqjDLIgDyQvjxhgqAZQA+E9eD6qu6FsXPmK8djcL+nh3cFHz4pX473jDvO3Sve+8yL3VRQ0n2pRgQ2a01MJsy+WwTZCBYWf0VnLRIvANUoWQgy9vz94q7Va44dg7A1/3ICf+xAwIDAQAB'
+# 接口响应解密 RSA 私钥与后端加密公钥对应 如更换需前后端一同更换
+VITE_APP_RSA_PRIVATE_KEY = 'MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAObq7yrxfvyieZtTjAYyrdvi59tYTXxjO5ajmPCRSXBY9M9wQ1tli297JN6mnY53UJMNyOFNSZVi8WSFoIXjpR87FmvChJlzeN/dZdd3SEs48Ee66XKeSePYqxa8oO5GKDsnajgpsOHKXSeeVSIysiIPS2/WsEqk0In9P4w3RsRFAgMBAAECgYBiMEWwce24SPICnRzuScBpvmsudrbEDIH7BOd0a6LZlcnLJwZNJ7mJlshPsHNQb+WgEf135+BBGEhioPtn0yuTdEuKP4kB9UdYUKiayWCoWhJpesv7sAD4RDClV7dhuV+gcd1AXD+YzyRIPbGm0VC2U+4q8/+UPRpVjqskbLVTgQJBAPRpou7g3S8n4XB527kq0D8I3+ZYwMxZhszwhrCDpJU319+ucmpLVwYIzDmZVeID2QQdUaDfIEViFHu95xDrGiUCQQDx3YOKn3yaEctk/ERVn7hDAyAXUbd8/pv2b24/M/l1ZevlsFem8U4Jk5Mu64t3z3YGJoymEjQmbucwT01iKhehAkEAxlnccsRmfFh/KkqauKE4M4++NTAd9zlInpUsmZ+cN8UEGnF2RTEzRKBrLOt1uWCqBB7PGiE6DVTVjr7FAQPrSQJAT5yeY87DcONSk9cFlzmPqV8p/QME5rvYEnHzVBKDlkUKNPyqnWToTvaoh9U4fyNmsfeWbEOprszqhFhWHG3GgQJAK8+ynmyFhaw63+Hx2KU5zR4hVuQso2IzrEurGxCxybV6mR7VBerb4502+EPx3PmOgxQL+niUFhcMWxcvBFP9+A=='
+
+# 客户端id
+VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
+
+# 统一消息推送开关
+VITE_APP_MESSAGE_ENABLED = true
+
+# sse / websocket
+VITE_APP_MESSAGE_TRANSPORT = 'sse'
+
+# 统一消息推送路径
+VITE_APP_MESSAGE_PATH = '/resource/message'
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ce028dd
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,29 @@
+.DS_Store
+.history
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+tests/**/coverage/
+tests/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.iml
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+
+package-lock.json
+yarn.lock
+
+# 编译生成的文件
+auto-imports.d.ts
+components.d.ts
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
new file mode 100644
index 0000000..bb8b876
--- /dev/null
+++ b/.oxfmtrc.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "ignorePatterns": [
+    "src/types/components.d.ts",
+    "src/types/auto-imports.d.ts",
+    ".ai_state",
+    ".claude",
+    ".codex",
+    "doc"
+  ],
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "htmlWhitespaceSensitivity": "ignore",
+  "experimentalSortPackageJson": {
+    "sortScripts": true
+  },
+  "sortImports": {
+    "newlinesBetween": false,
+    "groups": [
+      "type-import",
+      ["value-builtin", "value-external"],
+      "type-internal",
+      "value-internal",
+      ["type-parent", "type-sibling", "type-index"],
+      ["value-parent", "value-sibling", "value-index"],
+      "unknown"
+    ]
+  }
+}
diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 0000000..487ff02
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://raw.githubusercontent.com/oxc-project/oxc/main/npm/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "typescript", "unicorn", "oxc", "import", "vue"],
+  "rules": {
+    "typescript/no-empty-function": "off",
+    "typescript/no-explicit-any": "off",
+    "typescript/no-unused-vars": "off",
+    "typescript/no-this-alias": "off",
+    "typescript/no-empty-object-type": "off",
+    "typescript/no-unused-expressions": "off",
+    "prefer-rest-params": "off",
+    "import/no-unassigned-import": "off",
+    "import/no-named-as-default-member": "off",
+    "import/no-named-as-default": "off",
+    "no-shadow": "off",
+    "unicorn/prefer-add-event-listener": "off",
+    "unicorn/consistent-function-scoping": "off",
+    "unicorn/no-instanceof-builtins": "off"
+  },
+  "categories": {
+    "correctness": "error",
+    "suspicious": "error"
+  },
+  "ignorePatterns": [".ai_state", ".claude", ".codex", "doc", "dist/**", "dist-ssr/**", "coverage/**"]
+}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..32b3071
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 RuoYi-Vue-Plus
+
+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/README.md b/README.md
new file mode 100644
index 0000000..6c0598d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,76 @@
+## 平台简介
+
+- 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [TS](https://www.typescriptlang.org/) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
+- 官方项目: 基于 React + Ant Design 版本前端项目 [plus-ui-react](https://gitee.com/JavaLionLi/plus-ui/tree/6.X-React/)
+- 成员项目: 基于 vben5(ant-design-vue) 的前端项目 [ruoyi-plus-vben5](https://gitee.com/dapppp/ruoyi-plus-vben5)
+- 成员项目: 基于soybean 的前端项目 [ruoyi-plus-soybean](https://gitee.com/xlsea/ruoyi-plus-soybean)
+
+## 配套后端代码仓库地址
+
+| 介绍              | 项目名           | 项目地址                                                                                                                                                                       |
+| ----------------- | :--------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| 🔥 分布式集群框架 | RuoYi-Vue-Plus   | - [Gitee](https://gitee.com/dromara/RuoYi-Vue-Plus)<br> - [GitHub](https://github.com/dromara/RuoYi-Vue-Plus)<br> - [GitCode](https://gitcode.com/dromara/RuoYi-Vue-Plus)      |
+| 🔥 微服务框架     | RuoYi-Cloud-Plus | - [Gitee](https://gitee.com/dromara/RuoYi-Cloud-Plus)<br>- [GitHub](https://github.com/dromara/RuoYi-Cloud-Plus)<br> - [GitCode](https://gitcode.com/dromara/RuoYi-Cloud-Plus) |
+
+## 分支说明
+
+- 6.X分支(稳定发布主分支 生产可用)
+- dev分支(开发分支 开发过程中使用)
+
+## 前端运行
+
+```bash
+# 安装依赖
+pnpm install --registry=https://registry.npmmirror.com
+
+# 启动服务
+pnpm dev
+
+# 构建生产环境
+pnpm build:prod
+
+# 前端访问地址 http://localhost:80
+```
+
+## 本框架与RuoYi的业务差异
+
+| 业务         | 功能说明                                                      | 本框架 | RuoYi                         |
+| ------------ | ------------------------------------------------------------- | ------ | ----------------------------- |
+| 用户管理     | 用户的管理配置 如:新增用户、分配用户所属部门、角色、岗位等    | 支持   | 支持                          |
+| 部门管理     | 配置系统组织机构（公司、部门、小组） 树结构展现支持数据权限   | 支持   | 支持                          |
+| 岗位管理     | 配置系统用户所属担任职务                                      | 支持   | 支持                          |
+| 菜单管理     | 配置系统菜单、操作权限、按钮权限标识等                        | 支持   | 支持                          |
+| 角色管理     | 角色菜单权限分配、设置角色按机构进行数据范围权限划分          | 支持   | 支持                          |
+| 字典管理     | 对系统中经常使用的一些较为固定的数据进行维护                  | 支持   | 支持                          |
+| 参数管理     | 对系统动态配置常用参数                                        | 支持   | 支持                          |
+| 通知公告     | 系统通知公告信息发布维护                                      | 支持   | 支持                          |
+| 操作日志     | 系统正常操作日志记录和查询 系统异常信息日志记录和查询         | 支持   | 支持                          |
+| 登录日志     | 系统登录日志记录查询包含登录异常                              | 支持   | 支持                          |
+| 文件管理     | 系统文件展示、上传、下载、删除等管理                          | 支持   | 无                            |
+| 文件配置管理 | 系统文件上传、下载所需要的配置信息动态添加、修改、删除等管理  | 支持   | 无                            |
+| 在线用户管理 | 已登录系统的在线用户信息监控与强制踢出操作                    | 支持   | 支持                          |
+| 定时任务     | 运行报表、任务管理(添加、修改、删除)、日志管理、执行器管理等  | 支持   | 仅支持任务与日志管理          |
+| 代码生成     | 多数据源前后端代码的生成（java、html、xml、sql）支持CRUD下载  | 支持   | 仅支持单数据源                |
+| 系统接口     | 根据业务代码自动生成相关的api接口文档                         | 支持   | 支持                          |
+| 服务监控     | 监视集群系统CPU、内存、磁盘、堆栈、在线日志、Spring相关配置等 | 支持   | 仅支持单机CPU、内存、磁盘监控 |
+| 缓存监控     | 对系统的缓存信息查询，命令统计等。                            | 支持   | 支持                          |
+| 在线构建器   | 拖动表单元素生成相应的HTML代码。                              | 支持   | 支持                          |
+| 使用案例     | 系统的一些功能案例                                            | 支持   | 不支持                        |
+
+## 演示图例
+
+|                                                                                            |                                                                                            |
+|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
+| ![输入图片说明](https://foruda.gitee.com/images/1780299033689126697/868ef1ea_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299052163404649/8d94165d_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299074949590692/27f5bfb5_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299108816841231/619a7c57_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299089818500856/862ba805_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299173744267947/95cb0cd3_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299193694706123/28257dc1_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299147525013883/ebcd9dfe_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299220007761523/dc7e27c9_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299235966983519/35b047e1_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299250884681522/e5731314_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299267028602229/230d5428_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299293149732467/19abcf6c_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299311267192779/e665c668_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299327888096947/283a177f_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299348897579356/caac864e_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299376680669014/452585fb_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299843158459866/ceebbb63_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299432356918392/07abdf6a_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299465584172180/a2b2be12_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299491233431530/d88bfa35_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299513358913413/f2f90032_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299527419238776/549cb852_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299553918371792/43bd3bff_1766278.png "屏幕截图") |
+| ![输入图片说明](https://foruda.gitee.com/images/1780299586662735625/1107a3ee_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1780299613342135530/526d7859_1766278.png "屏幕截图") |
diff --git a/gen/api.ts.ftl b/gen/api.ts.ftl
new file mode 100644
index 0000000..89e61be
--- /dev/null
+++ b/gen/api.ts.ftl
@@ -0,0 +1,104 @@
+import type { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types';
+<#if !table.tree>
+import type { PageResult } from '@/api/types';
+</#if>
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+/**
+ * 查询${functionName}列表
+ * @param query
+ * @returns {*}
+ */
+
+export const list${BusinessName} = (query?: ${BusinessName}Query): AxiosPromise<<#if table.tree>${BusinessName}VO[]<#else>PageResult<${BusinessName}VO></#if>> => {
+  return request({
+    url: '/${moduleName}/${businessName}/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询${functionName}详细
+ * @param ${pkColumn.javaField}
+ */
+export const get${BusinessName} = (${pkColumn.javaField}: string | number): AxiosPromise<${BusinessName}VO> => {
+  return request({
+    url: '/${moduleName}/${businessName}/' + ${pkColumn.javaField},
+    method: 'get'
+  });
+};
+
+/**
+ * 新增${functionName}
+ * @param data
+ */
+export const add${BusinessName} = (data: ${BusinessName}Form) => {
+  return request({
+    url: '/${moduleName}/${businessName}',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改${functionName}
+ * @param data
+ */
+export const update${BusinessName} = (data: ${BusinessName}Form) => {
+  return request({
+    url: '/${moduleName}/${businessName}',
+    method: 'put',
+    data: data
+  });
+};
+
+<#if enableStatus>
+/**
+ * 修改${functionName}状态
+ * @param ${pkColumn.javaField}
+ * @param status
+ */
+export const change${BusinessName}Status = (${pkColumn.javaField}: string | number, status: <#if statusColumn.javaType == 'Boolean'>boolean<#elseif statusColumn.javaType == 'String'>string<#else> number</#if>) => {
+  return request({
+    url: '/${moduleName}/${businessName}/changeStatus',
+    method: 'put',
+    data: {
+      ${pkColumn.javaField},
+      ${statusField}: status
+    }
+  });
+};
+</#if>
+
+<#if enableSort>
+/**
+ * 调整${functionName}排序
+ * @param ${pkColumn.javaField}
+ * @param sortValue
+ */
+export const update${BusinessName}Sort = (${pkColumn.javaField}: string | number, sortValue: <#if sortColumn.javaType == 'String' || sortColumn.javaType == 'LocalDateTime'>string<#else> number</#if>) => {
+  return request({
+    url: '/${moduleName}/${businessName}/updateSort',
+    method: 'put',
+    data: {
+      ${pkColumn.javaField},
+      ${sortField}: sortValue
+    }
+  });
+};
+</#if>
+
+/**
+ * 删除${functionName}
+ * @param ${pkColumn.javaField}
+ */
+export const del${BusinessName} = (${pkColumn.javaField}: string | number | Array<string | number>) => {
+  return request({
+    url: '/${moduleName}/${businessName}/' + ${pkColumn.javaField},
+    method: 'delete'
+  });
+};
+
+
diff --git a/gen/index-tree.vue.ftl b/gen/index-tree.vue.ftl
new file mode 100644
index 0000000..3f7e095
--- /dev/null
+++ b/gen/index-tree.vue.ftl
@@ -0,0 +1,691 @@
+<template>
+  <div class="p-2 page-shell ${moduleName}-${businessName}-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+<#list columns as column>
+<#if column.query>
+<#if column.htmlType == "input" || column.htmlType == "textarea">
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-input v-model="queryParams.${column.javaField}" placeholder="请输入${column.columnLabel}" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+<#elseif column.htmlType == "inputNumber">
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-input-number v-model="queryParams.${column.javaField}" controls-position="right" />
+            </el-form-item>
+<#elseif (column.htmlType == "select" || column.htmlType == "radio") && column.dictType?has_content>
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${column.columnLabel}" clearable>
+                <el-option v-for="dict in ${column.dictType}" :key="dict.value" :label="dict.label" :value="dict.value"/>
+              </el-select>
+            </el-form-item>
+<#elseif column.htmlType == "switch" && column.dictType?has_content>
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${column.columnLabel}" clearable>
+                <el-option v-for="dict in ${column.dictType}" :key="dict.value" :label="dict.label" :value="dict.value"/>
+              </el-select>
+            </el-form-item>
+<#elseif column.htmlType == "switch">
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${column.columnLabel}" clearable>
+<#if column.javaType == "Boolean">
+                <el-option label="是" :value="true" />
+                <el-option label="否" :value="false" />
+<#elseif column.javaType == "Integer" || column.javaType == "Long">
+                <el-option label="开启" :value="0" />
+                <el-option label="关闭" :value="1" />
+<#else>
+                <el-option label="开启" value="0" />
+                <el-option label="关闭" value="1" />
+</#if>
+              </el-select>
+            </el-form-item>
+<#elseif (column.htmlType == "select" || column.htmlType == "radio") && !(column.dictType?has_content)>
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${column.columnLabel}" clearable>
+                <el-option label="请选择字典生成" value="" />
+              </el-select>
+            </el-form-item>
+<#elseif column.htmlType == "datetime" && column.queryType != "BETWEEN">
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-date-picker clearable
+                v-model="queryParams.${column.javaField}"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择${column.columnLabel}"
+              />
+            </el-form-item>
+<#elseif column.htmlType == "datetime" && column.queryType == "BETWEEN">
+            <el-form-item label="${column.columnLabel}" style="width: 308px">
+              <el-date-picker
+                v-model="dateRange${column.capJavaField}"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+              />
+            </el-form-item>
+</#if>
+</#if>
+</#list>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>${functionName}列表</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['${moduleName}:${businessName}:add']">新增</el-button>
+            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
+<#if enableExport>
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['${moduleName}:${businessName}:export']">导出</el-button>
+</#if>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+      <el-table
+        ref="${businessName}TableRef"
+        v-loading="loading"
+        class="data-table"
+        :data="${businessName}List"
+        row-key="${treeCode}"
+        border
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+<#assign firstTreeListField = "">
+<#list columns as tempColumn>
+<#if !tempColumn.pk && tempColumn.list && "" != tempColumn.javaField && firstTreeListField == "">
+<#assign firstTreeListField = tempColumn.javaField>
+</#if>
+</#list>
+<#list columns as column>
+<#if column.pk>
+<#elseif enableStatus && statusField == column.javaField>
+<#if column.javaField == firstTreeListField>
+        <el-table-column label="${column.columnLabel}" prop="${column.javaField}">
+<#else>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}">
+</#if>
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${column.javaField}"
+              :active-value="${statusField}ActiveValue"
+              :inactive-value="${statusField}InactiveValue"
+              @change="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+<#elseif enableSort && sortField == column.javaField>
+<#if column.javaField == firstTreeListField>
+        <el-table-column label="${column.columnLabel}" prop="${column.javaField}" width="160">
+<#else>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}" width="160">
+</#if>
+          <template #default="scope">
+<#if column.javaType == "LocalDateTime">
+            <el-date-picker
+              v-model="scope.row.${column.javaField}"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择${column.columnLabel}"
+              @change="handleSortChange(scope.row)"
+            />
+<#else>
+            <el-input-number v-model="scope.row.${column.javaField}" controls-position="right" :min="0" @change="handleSortChange(scope.row)" />
+</#if>
+          </template>
+        </el-table-column>
+<#elseif column.list && column.htmlType == "switch">
+<#if column.javaField == firstTreeListField>
+        <el-table-column label="${column.columnLabel}" prop="${column.javaField}" width="120">
+<#else>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}" width="120">
+</#if>
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${column.javaField}"
+<#if column.javaType == "Boolean">
+              :active-value="true"
+              :inactive-value="false"
+<#elseif column.javaType == "Integer" || column.javaType == "Long">
+              :active-value="0"
+              :inactive-value="1"
+<#else>
+              active-value="0"
+              inactive-value="1"
+</#if>
+              disabled
+            />
+          </template>
+        </el-table-column>
+<#elseif column.list && column.htmlType == "datetime">
+<#if column.javaField == firstTreeListField>
+        <el-table-column label="${column.columnLabel}" prop="${column.javaField}" width="180">
+<#else>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}" width="180">
+</#if>
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.${column.javaField}, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+<#elseif column.list && column.htmlType == "imageUpload">
+<#if column.javaField == firstTreeListField>
+        <el-table-column label="${column.columnLabel}" prop="${column.javaField}Url" width="100">
+<#else>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}Url" width="100">
+</#if>
+          <template #default="scope">
+            <image-preview :src="scope.row.${column.javaField}Url" :width="50" :height="50"/>
+          </template>
+        </el-table-column>
+<#elseif column.list && column.dictColumn>
+<#if column.javaField == firstTreeListField>
+        <el-table-column label="${column.columnLabel}" prop="${column.javaField}">
+<#else>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}">
+</#if>
+          <template #default="scope">
+<#if column.htmlType == "checkbox">
+            <dict-tag :options="${column.dictType}" :value="scope.row.${column.javaField} ? scope.row.${column.javaField}.split(',') : []"/>
+<#else>
+            <dict-tag :options="${column.dictType}" :value="scope.row.${column.javaField}"/>
+</#if>
+          </template>
+        </el-table-column>
+<#elseif column.list && "" != column.javaField>
+<#if column.javaField == firstTreeListField>
+        <el-table-column label="${column.columnLabel}" prop="${column.javaField}" />
+<#else>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}" />
+</#if>
+</#if>
+</#list>
+<#if enableStatus && !statusColumn.list>
+        <el-table-column label="${statusColumn.columnComment}" align="center" prop="${statusField}">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${statusField}"
+              :active-value="${statusField}ActiveValue"
+              :inactive-value="${statusField}InactiveValue"
+              @change="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+</#if>
+<#if enableSort && !sortColumn.list>
+        <el-table-column label="${sortColumn.columnComment}" align="center" prop="${sortField}" width="160">
+          <template #default="scope">
+<#if sortColumn.javaType == "LocalDateTime">
+            <el-date-picker
+              v-model="scope.row.${sortField}"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择${sortColumn.columnComment}"
+              @change="handleSortChange(scope.row)"
+            />
+<#else>
+            <el-input-number v-model="scope.row.${sortField}" controls-position="right" :min="0" @change="handleSortChange(scope.row)" />
+</#if>
+          </template>
+        </el-table-column>
+</#if>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${moduleName}:${businessName}:edit']" />
+            </el-tooltip>
+            <el-tooltip content="新增" placement="top">
+              <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['${moduleName}:${businessName}:add']" />
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']" />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <!-- 添加或修改${functionName}对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="${businessName}FormRef" :model="form" :rules="rules" label-width="80px">
+<#list columns as column>
+<#if (column.insert || column.edit) && !column.pk>
+<#if "" != treeParentCode && column.javaField == treeParentCode>
+        <el-form-item label="${column.columnLabel}" prop="${treeParentCode}">
+          <el-tree-select
+            v-model="form.${treeParentCode}"
+            :data="${businessName}Options"
+            :props="{ value: '${treeCode}', label: '${treeName}', children: 'children' } as any"
+            value-key="${treeCode}"
+            placeholder="请选择${column.columnLabel}"
+            check-strictly
+          />
+        </el-form-item>
+<#elseif column.htmlType == "input">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-input v-model="form.${column.javaField}" placeholder="请输入${column.columnLabel}" />
+        </el-form-item>
+<#elseif column.htmlType == "inputNumber">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-input-number v-model="form.${column.javaField}" controls-position="right" />
+        </el-form-item>
+<#elseif column.htmlType == "imageUpload">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <image-upload v-model="form.${column.javaField}"/>
+        </el-form-item>
+<#elseif column.htmlType == "fileUpload">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <file-upload v-model="form.${column.javaField}"/>
+        </el-form-item>
+<#elseif column.htmlType == "editor">
+        <el-form-item label="${column.columnLabel}">
+          <editor v-model="form.${column.javaField}" :min-height="192"/>
+        </el-form-item>
+<#elseif column.htmlType == "select" && column.dictType?has_content>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-select v-model="form.${column.javaField}" placeholder="请选择${column.columnLabel}">
+            <el-option
+              v-for="dict in ${column.dictType}"
+              :key="dict.value"
+              :label="dict.label"
+<#if column.javaType == "Integer" || column.javaType == "Long">
+              :value="parseInt(dict.value)"
+<#else>
+              :value="dict.value"
+</#if>
+            ></el-option>
+          </el-select>
+        </el-form-item>
+<#elseif column.htmlType == "select" && !(column.dictType?has_content)>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-select v-model="form.${column.javaField}" placeholder="请选择${column.columnLabel}">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
+        </el-form-item>
+<#elseif column.htmlType == "checkbox" && column.dictType?has_content>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-checkbox-group v-model="form.${column.javaField}">
+            <el-checkbox
+              v-for="dict in ${column.dictType}"
+              :key="dict.value"
+              :label="dict.value">
+              {{dict.label}}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+<#elseif column.htmlType == "checkbox" && !(column.dictType?has_content)>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-checkbox-group v-model="form.${column.javaField}">
+            <el-checkbox>请选择字典生成</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+<#elseif column.htmlType == "radio" && column.dictType?has_content>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-radio-group v-model="form.${column.javaField}">
+            <el-radio
+              v-for="dict in ${column.dictType}"
+              :key="dict.value"
+<#if column.javaType == "Integer" || column.javaType == "Long">
+              :value="parseInt(dict.value)"
+<#else>
+              :value="dict.value"
+</#if>
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+<#elseif column.htmlType == "radio" && !(column.dictType?has_content)>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-radio-group v-model="form.${column.javaField}">
+            <el-radio value="1">请选择字典生成</el-radio>
+          </el-radio-group>
+        </el-form-item>
+<#elseif column.htmlType == "switch">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-switch
+            v-model="form.${column.javaField}"
+<#if column.javaType == "Boolean">
+            :active-value="true"
+            :inactive-value="false"
+<#elseif column.javaType == "Integer" || column.javaType == "Long">
+            :active-value="0"
+            :inactive-value="1"
+<#else>
+            active-value="0"
+            inactive-value="1"
+</#if>
+          />
+        </el-form-item>
+<#elseif column.htmlType == "datetime">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-date-picker clearable
+            v-model="form.${column.javaField}"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="选择${column.columnLabel}"
+          />
+        </el-form-item>
+<#elseif column.htmlType == "textarea">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-input v-model="form.${column.javaField}" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+</#if>
+</#if>
+</#list>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="${BusinessName}" lang="ts">
+import {
+  add${BusinessName},
+<#if enableStatus>
+  change${BusinessName}Status,
+</#if>
+  del${BusinessName},
+  get${BusinessName},
+  list${BusinessName},
+<#if enableSort>
+  update${BusinessName}Sort,
+</#if>
+  update${BusinessName}
+} from '@/api/${moduleName}/${businessName}';
+import { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+<#if needAddDateRange>
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+</#if>
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTreeTableExpand } from '@/hooks/tree/useTreeTableExpand';
+<#if needDict>
+import { useDict } from '@/utils/dict';
+</#if>
+import modal from '@/plugins/modal';
+import { handleTree } from '@/utils/ruoyi';
+<#if enableExport>
+import { download as requestDownload } from '@/utils/request';
+</#if>
+
+<#if needDict>
+const { ${dictsNoSymbol} } = toRefs<any>(useDict(${dicts}));
+</#if>
+
+<#if enableStatus>
+const ${statusField}ActiveValue = <#if statusColumn.javaType == "Boolean">true<#elseif statusColumn.javaType == "Integer" || statusColumn.javaType == "Long">0<#else>'0'</#if>;
+const ${statusField}InactiveValue = <#if statusColumn.javaType == "Boolean">false<#elseif statusColumn.javaType == "Integer" || statusColumn.javaType == "Long">1<#else>'1'</#if>;
+</#if>
+
+type ${BusinessName}Option = {
+  ${treeCode}: <#if treeParentColumn.javaType == 'String'>string<#else> number</#if>;
+  ${treeName}: string;
+  children?: ${BusinessName}Option[];
+};
+
+const ${businessName}List = ref<${BusinessName}VO[]>([]);
+const ${businessName}Options = ref<${BusinessName}Option[]>([]);
+const all${BusinessName}Options = ref<${BusinessName}Option[]>([]);
+const buttonLoading = ref(false);
+const { showSearch } = useSearchToggle();
+const { loading, setLoading, withLoading } = useLoading();
+
+const queryFormRef = ref<ElFormInstance>();
+const ${businessName}FormRef = ref<ElFormInstance>();
+const ${businessName}TableRef = ref<ElTableInstance>();
+const { isExpandAll, handleToggleExpandAll } = useTreeTableExpand<${BusinessName}VO>({
+  tableRef: ${businessName}TableRef,
+  data: ${businessName}List
+});
+
+<#list columns as column>
+<#if column.htmlType == "datetime" && column.queryType == "BETWEEN">
+const {
+  dateRange: dateRange${column.capJavaField},
+  applyDateRange: apply${column.capJavaField}DateRange,
+  resetDateRange: reset${column.capJavaField}DateRange
+} = useDateRangeQuery('${column.capJavaField}');
+</#if>
+</#list>
+
+const initFormData: ${BusinessName}Form = {
+<#list columns as column>
+<#if column.insert || column.edit>
+<#if column.htmlType == "checkbox">
+    ${column.javaField}: [],
+<#else>
+    ${column.javaField}: undefined,
+</#if>
+</#if>
+</#list>
+}
+
+const data = reactive<PageData<${BusinessName}Form, ${BusinessName}Query>>({
+  form: {...initFormData},
+  queryParams: {
+<#list columns as column>
+<#if column.query>
+<#if column.htmlType != "datetime" || column.queryType != "BETWEEN">
+    ${column.javaField}: undefined,
+</#if>
+</#if>
+</#list>
+    params: {
+<#list columns as column>
+<#if column.query>
+<#if column.htmlType == "datetime" && column.queryType == "BETWEEN">
+      ${column.javaField}: undefined,
+</#if>
+</#if>
+</#list>
+    }
+  },
+  rules: {
+<#list columns as column>
+<#if column.insert || column.edit>
+<#if column.required>
+${column.javaField}: [
+      { required: true, message: "${column.columnLabel}不能为空", trigger: <#if column.htmlType == "select" || column.htmlType == "radio" || column.htmlType == "switch" || column.htmlType == "inputNumber">"change"<#else>"blur"</#if> }
+    ],
+</#if>
+</#if>
+</#list>
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: ${businessName}FormRef,
+  initialFormData: initFormData
+});
+
+/** 查询${functionName}列表 */
+const getList = async () => {
+  await withLoading(async () => {
+<#if needAddDateRange>
+    let params = queryParams.value;
+<#list columns as column>
+<#if column.htmlType == "datetime" && column.queryType == "BETWEEN">
+params = apply${column.capJavaField}DateRange(params);
+</#if>
+</#list>
+    const res = await list${BusinessName}(params);
+<#else>
+    const res = await list${BusinessName}(queryParams.value);
+</#if>
+    const data = handleTree<${BusinessName}VO>(res.data, '${treeCode}', '${treeParentCode}');
+    if (data) {
+      ${businessName}List.value = data;
+    }
+  });
+};
+
+/** 查询${functionName}下拉树结构 */
+const getTreeselect = async (excludeId?: string | number) => {
+  const res = await list${BusinessName}();
+  const data: ${BusinessName}Option = { ${treeCode}: ${treeRootValueTsLiteral}, ${treeName}: '顶级节点', children: [] };
+  data.children = handleTree<${BusinessName}Option>(res.data, '${treeCode}', '${treeParentCode}');
+  all${BusinessName}Options.value = [data];
+  ${businessName}Options.value = excludeId != null ? filterTreeOptions(all${BusinessName}Options.value, excludeId) : all${BusinessName}Options.value;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  closeDialog();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  resetExtras: () => {
+<#list columns as column>
+<#if column.htmlType == "datetime" && column.queryType == "BETWEEN">
+reset${column.capJavaField}DateRange();
+</#if>
+</#list>
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 新增按钮操作 */
+const handleAdd = (row?: Partial<${BusinessName}VO>) => {
+  openDialog('添加${functionName}');
+  getTreeselect();
+  if (row != null && row.${treeCode}) {
+    form.value.${treeParentCode} = row.${treeCode};
+  } else {
+    form.value.${treeParentCode} = ${treeRootValueTsLiteral};
+  }
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row: Partial<${BusinessName}VO>) => {
+  reset();
+  await getTreeselect(row.${treeCode});
+  if (row != null) {
+    form.value.${treeParentCode} = row.${treeParentCode};
+  }
+  const res = await get${BusinessName}(row.${pkColumn.javaField});
+  Object.assign(form.value, res.data);
+<#list columns as column>
+  <#if column.htmlType == "checkbox">
+  form.value.${column.javaField} = form.value.${column.javaField}.split(",");
+  </#if>
+</#list>
+  showDialog('修改${functionName}');
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  ${businessName}FormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+<#list columns as column>
+<#if column.htmlType == "checkbox">
+      form.value.${column.javaField} = form.value.${column.javaField}.join(",");
+</#if>
+</#list>
+      if (form.value.${pkColumn.javaField}) {
+        await update${BusinessName}(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await add${BusinessName}(form.value).finally(() => (buttonLoading.value = false));
+      }
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row: Partial<${BusinessName}VO>) => {
+  await modal.confirm('是否确认删除${functionName}编号为"' + row.${pkColumn.javaField} + '"的数据项？');
+  setLoading(true);
+  await del${BusinessName}(row.${pkColumn.javaField}).finally(() => setLoading(false));
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+const filterTreeOptions = (options: ${BusinessName}Option[], excludeId: string | number): ${BusinessName}Option[] => {
+  return options
+    .filter(item => item.${treeCode} !== excludeId)
+    .map(item => ({
+      ...item,
+      children: item.children ? filterTreeOptions(item.children, excludeId) : []
+    }));
+};
+
+<#if enableStatus>
+/** 状态修改 */
+const handleStatusChange = async (row: Partial<${BusinessName}VO>) => {
+  const text = row.${statusField} === ${statusField}ActiveValue ? '启用' : '停用';
+  try {
+    await modal.confirm('确认要"' + text + '"吗?');
+    await change${BusinessName}Status(row.${pkColumn.javaField}, row.${statusField});
+    modal.msgSuccess(text + '成功');
+  } catch (err) {
+    row.${statusField} = row.${statusField} === ${statusField}ActiveValue ? ${statusField}InactiveValue : ${statusField}ActiveValue;
+  }
+};
+</#if>
+
+<#if enableSort>
+/** 排序调整 */
+const handleSortChange = async (row: Partial<${BusinessName}VO>) => {
+  try {
+    await update${BusinessName}Sort(row.${pkColumn.javaField}, row.${sortField});
+    modal.msgSuccess('排序更新成功');
+  } catch (err) {
+    await getList();
+  }
+};
+</#if>
+
+<#if enableExport>
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    '${moduleName}/${businessName}/export',
+    {
+      ...queryParams.value
+    },
+    `${businessName}_${r'${new Date().getTime()}'}.xlsx`
+  );
+};
+</#if>
+
+onMounted(() => {
+  getList();
+});
+</script>
diff --git a/gen/index.vue.ftl b/gen/index.vue.ftl
new file mode 100644
index 0000000..59df6cc
--- /dev/null
+++ b/gen/index.vue.ftl
@@ -0,0 +1,615 @@
+<template>
+  <div class="p-2 page-shell ${moduleName}-${businessName}-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+<#list columns as column>
+<#if column.query>
+<#if column.htmlType == "input" || column.htmlType == "textarea">
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-input v-model="queryParams.${column.javaField}" placeholder="请输入${column.columnLabel}" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+<#elseif column.htmlType == "inputNumber">
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-input-number v-model="queryParams.${column.javaField}" controls-position="right" />
+            </el-form-item>
+<#elseif (column.htmlType == "select" || column.htmlType == "radio") && column.dictType?has_content>
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${column.columnLabel}" clearable >
+                <el-option v-for="dict in ${column.dictType}" :key="dict.value" :label="dict.label" :value="dict.value"/>
+              </el-select>
+            </el-form-item>
+<#elseif column.htmlType == "switch" && column.dictType?has_content>
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${column.columnLabel}" clearable >
+                <el-option v-for="dict in ${column.dictType}" :key="dict.value" :label="dict.label" :value="dict.value"/>
+              </el-select>
+            </el-form-item>
+<#elseif column.htmlType == "switch">
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${column.columnLabel}" clearable >
+<#if column.javaType == "Boolean">
+                <el-option label="是" :value="true" />
+                <el-option label="否" :value="false" />
+<#elseif column.javaType == "Integer" || column.javaType == "Long">
+                <el-option label="开启" :value="0" />
+                <el-option label="关闭" :value="1" />
+<#else>
+                <el-option label="开启" value="0" />
+                <el-option label="关闭" value="1" />
+</#if>
+              </el-select>
+            </el-form-item>
+<#elseif (column.htmlType == "select" || column.htmlType == "radio") && !(column.dictType?has_content)>
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-select v-model="queryParams.${column.javaField}" placeholder="请选择${column.columnLabel}" clearable >
+                <el-option label="请选择字典生成" value="" />
+              </el-select>
+            </el-form-item>
+<#elseif column.htmlType == "datetime" && column.queryType != "BETWEEN">
+            <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+              <el-date-picker clearable
+                v-model="queryParams.${column.javaField}"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="请选择${column.columnLabel}"
+              />
+            </el-form-item>
+<#elseif column.htmlType == "datetime" && column.queryType == "BETWEEN" && column.query>
+            <el-form-item label="${column.columnLabel}" style="width: 308px">
+              <el-date-picker
+                v-model="dateRange${column.capJavaField}"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+              />
+            </el-form-item>
+</#if>
+</#if>
+</#list>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>${functionName}列表</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['${moduleName}:${businessName}:add']">新增</el-button>
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['${moduleName}:${businessName}:edit']">修改</el-button>
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['${moduleName}:${businessName}:remove']">删除</el-button>
+<#if enableExport>
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['${moduleName}:${businessName}:export']">导出</el-button>
+</#if>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table v-loading="loading" border class="data-table" :data="${businessName}List" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+<#list columns as column>
+<#if column.pk && column.list>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}" />
+<#elseif enableStatus && statusField == column.javaField>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${column.javaField}"
+              :active-value="${statusField}ActiveValue"
+              :inactive-value="${statusField}InactiveValue"
+              @change="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+<#elseif enableSort && sortField == column.javaField>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}" width="160">
+          <template #default="scope">
+<#if column.javaType == "LocalDateTime">
+            <el-date-picker
+              v-model="scope.row.${column.javaField}"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择${column.columnLabel}"
+              @change="handleSortChange(scope.row)"
+            />
+<#else>
+            <el-input-number v-model="scope.row.${column.javaField}" controls-position="right" :min="0" @change="handleSortChange(scope.row)" />
+</#if>
+          </template>
+        </el-table-column>
+<#elseif column.list && column.htmlType == "switch">
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}" width="120">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${column.javaField}"
+<#if column.javaType == "Boolean">
+              :active-value="true"
+              :inactive-value="false"
+<#elseif column.javaType == "Integer" || column.javaType == "Long">
+              :active-value="0"
+              :inactive-value="1"
+<#else>
+              active-value="0"
+              inactive-value="1"
+</#if>
+              disabled
+            />
+          </template>
+        </el-table-column>
+<#elseif column.list && column.htmlType == "datetime">
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}" width="180">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.${column.javaField}, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+<#elseif column.list && column.htmlType == "imageUpload">
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}Url" width="100">
+          <template #default="scope">
+            <image-preview :src="scope.row.${column.javaField}Url" :width="50" :height="50"/>
+          </template>
+        </el-table-column>
+<#elseif column.list && column.dictColumn>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}">
+          <template #default="scope">
+<#if column.htmlType == "checkbox">
+            <dict-tag :options="${column.dictType}" :value="scope.row.${column.javaField} ? scope.row.${column.javaField}.split(',') : []"/>
+<#else>
+            <dict-tag :options="${column.dictType}" :value="scope.row.${column.javaField}"/>
+</#if>
+          </template>
+        </el-table-column>
+<#elseif column.list && "" != column.javaField>
+        <el-table-column label="${column.columnLabel}" align="center" prop="${column.javaField}" />
+</#if>
+</#list>
+<#if enableStatus && !statusColumn.list>
+        <el-table-column label="${statusColumn.columnComment}" align="center" prop="${statusField}">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.${statusField}"
+<#if statusColumn.javaType == "Boolean">
+              :active-value="true"
+              :inactive-value="false"
+<#elseif statusColumn.javaType == "Integer" || statusColumn.javaType == "Long">
+              :active-value="0"
+              :inactive-value="1"
+<#else>
+              active-value="0"
+              inactive-value="1"
+</#if>
+              @change="handleStatusChange(scope.row)"
+            />
+          </template>
+        </el-table-column>
+</#if>
+<#if enableSort && !sortColumn.list>
+        <el-table-column label="${sortColumn.columnComment}" align="center" prop="${sortField}" width="160">
+          <template #default="scope">
+<#if sortColumn.javaType == "LocalDateTime">
+            <el-date-picker
+              v-model="scope.row.${sortField}"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择${sortColumn.columnComment}"
+              @change="handleSortChange(scope.row)"
+            />
+<#else>
+            <el-input-number v-model="scope.row.${sortField}" controls-position="right" :min="0" @change="handleSortChange(scope.row)" />
+</#if>
+          </template>
+        </el-table-column>
+</#if>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['${moduleName}:${businessName}:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['${moduleName}:${businessName}:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改${functionName}对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="${businessName}FormRef" :model="form" :rules="rules" label-width="80px">
+<#list columns as column>
+<#if (column.insert || column.edit) && !column.pk>
+<#if column.htmlType == "input">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-input v-model="form.${column.javaField}" placeholder="请输入${column.columnLabel}" />
+        </el-form-item>
+<#elseif column.htmlType == "inputNumber">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-input-number v-model="form.${column.javaField}" controls-position="right" />
+        </el-form-item>
+<#elseif column.htmlType == "imageUpload">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <image-upload v-model="form.${column.javaField}"/>
+        </el-form-item>
+<#elseif column.htmlType == "fileUpload">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <file-upload v-model="form.${column.javaField}"/>
+        </el-form-item>
+<#elseif column.htmlType == "editor">
+        <el-form-item label="${column.columnLabel}">
+          <editor v-model="form.${column.javaField}" :min-height="192"/>
+        </el-form-item>
+<#elseif column.htmlType == "select" && column.dictType?has_content>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-select v-model="form.${column.javaField}" placeholder="请选择${column.columnLabel}">
+            <el-option
+                v-for="dict in ${column.dictType}"
+                :key="dict.value"
+                :label="dict.label"
+<#if column.javaType == "Integer" || column.javaType == "Long">
+                :value="parseInt(dict.value)"
+<#else>
+                :value="dict.value"
+</#if>
+            ></el-option>
+          </el-select>
+        </el-form-item>
+<#elseif column.htmlType == "select" && !(column.dictType?has_content)>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-select v-model="form.${column.javaField}" placeholder="请选择${column.columnLabel}">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
+        </el-form-item>
+<#elseif column.htmlType == "checkbox" && column.dictType?has_content>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-checkbox-group v-model="form.${column.javaField}">
+            <el-checkbox
+                v-for="dict in ${column.dictType}"
+                :key="dict.value"
+                :label="dict.value">
+                {{dict.label}}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+<#elseif column.htmlType == "checkbox" && !(column.dictType?has_content)>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-checkbox-group v-model="form.${column.javaField}">
+            <el-checkbox>请选择字典生成</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+<#elseif column.htmlType == "radio" && column.dictType?has_content>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-radio-group v-model="form.${column.javaField}">
+            <el-radio
+              v-for="dict in ${column.dictType}"
+              :key="dict.value"
+<#if column.javaType == "Integer" || column.javaType == "Long">
+              :value="parseInt(dict.value)"
+<#else>
+              :value="dict.value"
+</#if>
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+<#elseif column.htmlType == "radio" && !(column.dictType?has_content)>
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-radio-group v-model="form.${column.javaField}">
+            <el-radio value="1">请选择字典生成</el-radio>
+          </el-radio-group>
+        </el-form-item>
+<#elseif column.htmlType == "switch">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-switch
+            v-model="form.${column.javaField}"
+<#if column.javaType == "Boolean">
+            :active-value="true"
+            :inactive-value="false"
+<#elseif column.javaType == "Integer" || column.javaType == "Long">
+            :active-value="0"
+            :inactive-value="1"
+<#else>
+            active-value="0"
+            inactive-value="1"
+</#if>
+          />
+        </el-form-item>
+<#elseif column.htmlType == "datetime">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+          <el-date-picker clearable
+            v-model="form.${column.javaField}"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择${column.columnLabel}">
+          </el-date-picker>
+        </el-form-item>
+<#elseif column.htmlType == "textarea">
+        <el-form-item label="${column.columnLabel}" prop="${column.javaField}">
+            <el-input v-model="form.${column.javaField}" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+</#if>
+</#if>
+</#list>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="${BusinessName}" lang="ts">
+import {
+  add${BusinessName},
+<#if enableStatus>
+  change${BusinessName}Status,
+</#if>
+  del${BusinessName},
+  get${BusinessName},
+  list${BusinessName},
+<#if enableSort>
+  update${BusinessName}Sort,
+</#if>
+  update${BusinessName}
+} from '@/api/${moduleName}/${businessName}';
+import { ${BusinessName}Form, ${BusinessName}Query, ${BusinessName}VO } from '@/api/${moduleName}/${businessName}/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+<#if needAddDateRange>
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+</#if>
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+<#if needDict>
+import { useDict } from '@/utils/dict';
+</#if>
+<#if needParseTime>
+import { parseTime } from '@/utils/ruoyi';
+</#if>
+import modal from '@/plugins/modal';
+<#if enableExport>
+import { download as requestDownload } from '@/utils/request';
+</#if>
+
+<#if needDict>
+const { ${dictsNoSymbol} } = toRefs<any>(useDict(${dicts}));
+</#if>
+
+<#if enableStatus>
+const ${statusField}ActiveValue = <#if statusColumn.javaType == "Boolean">true<#elseif statusColumn.javaType == "Integer" || statusColumn.javaType == "Long">0<#else>'0'</#if>;
+const ${statusField}InactiveValue = <#if statusColumn.javaType == "Boolean">false<#elseif statusColumn.javaType == "Integer" || statusColumn.javaType == "Long">1<#else>'1'</#if>;
+</#if>
+
+const ${businessName}List = ref<${BusinessName}VO[]>([]);
+const buttonLoading = ref(false);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+<#list columns as column>
+<#if column.htmlType == "datetime" && column.queryType == "BETWEEN" && column.query>
+const {
+  dateRange: dateRange${column.capJavaField},
+  applyDateRange: apply${column.capJavaField}DateRange,
+  resetDateRange: reset${column.capJavaField}DateRange
+} = useDateRangeQuery('${column.capJavaField}');
+</#if>
+</#list>
+
+const queryFormRef = ref<ElFormInstance>();
+const ${businessName}FormRef = ref<ElFormInstance>();
+
+const initFormData: ${BusinessName}Form = {
+<#list columns as column>
+<#if column.insert || column.edit>
+<#if column.htmlType == "checkbox">
+  ${column.javaField}: [],
+<#else>
+  ${column.javaField}: undefined,
+</#if>
+</#if>
+</#list>
+}
+const data = reactive<PageData<${BusinessName}Form, ${BusinessName}Query>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+<#list columns as column>
+<#if column.query>
+<#if column.htmlType != "datetime" || column.queryType != "BETWEEN">
+    ${column.javaField}: undefined,
+</#if>
+</#if>
+</#list>
+    params: {
+<#list columns as column>
+<#if column.query>
+<#if column.htmlType == "datetime" && column.queryType == "BETWEEN">
+      ${column.javaField}: undefined,
+</#if>
+</#if>
+</#list>
+    }
+  },
+  rules: {
+<#list columns as column>
+<#if column.insert || column.edit>
+<#if column.required>
+${column.javaField}: [
+      { required: true, message: "${column.columnLabel}不能为空", trigger: <#if column.htmlType == "select" || column.htmlType == "radio" || column.htmlType == "switch" || column.htmlType == "inputNumber">"change"<#else>"blur"</#if> }
+    ],
+</#if>
+</#if>
+</#list>
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<${BusinessName}VO>(item => item.${pkColumn.javaField});
+const { dialog, resetForm: reset, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: ${businessName}FormRef,
+  initialFormData: initFormData
+});
+
+/** 查询${functionName}列表 */
+const getList = async () => {
+  await withLoading(async () => {
+<#if needAddDateRange>
+    let params = queryParams.value;
+<#list columns as column>
+<#if column.htmlType == "datetime" && column.queryType == "BETWEEN" && column.query>
+params = apply${column.capJavaField}DateRange(params);
+</#if>
+</#list>
+    const res = await list${BusinessName}(params);
+<#else>
+    const res = await list${BusinessName}(queryParams.value);
+</#if>
+    ${businessName}List.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  closeDialog();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+<#list columns as column>
+<#if column.htmlType == "datetime" && column.queryType == "BETWEEN" && column.query>
+reset${column.capJavaField}DateRange();
+</#if>
+</#list>
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  openDialog('添加${functionName}');
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: Partial<${BusinessName}VO>) => {
+  reset();
+  const _${pkColumn.javaField} = row?.${pkColumn.javaField} || ids.value[0];
+  const res = await get${BusinessName}(_${pkColumn.javaField});
+  Object.assign(form.value, res.data);
+<#list columns as column>
+  <#if column.htmlType == "checkbox">
+  form.value.${column.javaField} = form.value.${column.javaField}.split(",");
+  </#if>
+</#list>
+  showDialog('修改${functionName}');
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  ${businessName}FormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      <#list columns as column>
+        <#if column.htmlType == "checkbox">
+        form.value.${column.javaField} = form.value.${column.javaField}.join(",");
+        </#if>
+      </#list>
+      if (form.value.${pkColumn.javaField}) {
+        await update${BusinessName}(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await add${BusinessName}(form.value).finally(() => (buttonLoading.value = false));
+      }
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<${BusinessName}VO>) => {
+  const _${pkColumn.javaField}s = row?.${pkColumn.javaField} || ids.value;
+  await modal.confirm('是否确认删除${functionName}编号为"' + _${pkColumn.javaField}s + '"的数据项？');
+  await del${BusinessName}(_${pkColumn.javaField}s);
+  modal.msgSuccess('删除成功');
+  await getList();
+};
+
+<#if enableExport>
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    '${moduleName}/${businessName}/export',
+    {
+      ...queryParams.value
+    },
+    `${businessName}_${r'${new Date().getTime()}'}.xlsx`
+  );
+};
+</#if>
+
+<#if enableStatus>
+/** 状态修改 */
+const handleStatusChange = async (row: Partial<${BusinessName}VO>) => {
+  const text = row.${statusField} === ${statusField}ActiveValue ? '启用' : '停用';
+  try {
+    await modal.confirm('确认要"' + text + '"吗?');
+    await change${BusinessName}Status(row.${pkColumn.javaField}, row.${statusField});
+    modal.msgSuccess(text + '成功');
+  } catch (err) {
+    row.${statusField} = row.${statusField} === ${statusField}ActiveValue ? ${statusField}InactiveValue : ${statusField}ActiveValue;
+  }
+};
+</#if>
+
+<#if enableSort>
+/** 排序调整 */
+const handleSortChange = async (row: Partial<${BusinessName}VO>) => {
+  try {
+    await update${BusinessName}Sort(row.${pkColumn.javaField}, row.${sortField});
+    modal.msgSuccess('排序更新成功');
+  } catch (err) {
+    await getList();
+  }
+};
+</#if>
+
+onMounted(() => {
+  getList();
+});
+</script>
+
diff --git a/gen/types.ts.ftl b/gen/types.ts.ftl
new file mode 100644
index 0000000..de4d9c9
--- /dev/null
+++ b/gen/types.ts.ftl
@@ -0,0 +1,48 @@
+export interface ${BusinessName}VO {
+<#list columns as column>
+<#if column.list>
+  /**
+   * ${column.columnComment}
+   */
+  ${column.javaField}: ${column.tsType};
+<#if column.htmlType == "imageUpload">
+  /**
+   * ${column.columnComment}Url
+   */
+  ${column.javaField}Url: string;
+</#if>
+</#if>
+</#list>
+<#if table.tree>
+  /**
+   * 子对象
+   */
+  children: ${BusinessName}VO[];
+</#if>
+}
+
+export interface ${BusinessName}Form extends BaseEntity {
+<#list columns as column>
+<#if column.insert || column.edit>
+  /**
+   * ${column.columnComment}
+   */
+  ${column.javaField}?: ${column.tsType};
+</#if>
+</#list>
+}
+
+export interface ${BusinessName}Query<#if !table.tree> extends PageQuery</#if> {
+<#list columns as column>
+<#if column.query>
+  /**
+   * ${column.columnComment}
+   */
+  ${column.javaField}?: ${column.tsType};
+</#if>
+</#list>
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..db1c6ca
--- /dev/null
+++ b/index.html
@@ -0,0 +1,214 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <link rel="icon" href="/favicon.ico" />
+    <title>%VITE_APP_TITLE%</title>
+    <!--[if lt IE 11]>
+      <script>
+        window.location.href = '/ie.html';
+      </script>
+    <![endif]-->
+    <style>
+      html,
+      body,
+      #app {
+        height: 100%;
+        margin: 0px;
+        padding: 0px;
+      }
+
+      .chromeframe {
+        margin: 0.2em 0;
+        background: #ccc;
+        color: #000;
+        padding: 0.2em 0;
+      }
+
+      #loader-wrapper {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 999999;
+      }
+
+      #loader {
+        display: block;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        width: 150px;
+        height: 150px;
+        margin: -75px 0 0 -75px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: #fff;
+        -webkit-animation: spin 2s linear infinite;
+        -ms-animation: spin 2s linear infinite;
+        -moz-animation: spin 2s linear infinite;
+        -o-animation: spin 2s linear infinite;
+        animation: spin 2s linear infinite;
+        z-index: 1001;
+      }
+
+      #loader:before {
+        content: '';
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: #fff;
+        -webkit-animation: spin 3s linear infinite;
+        -moz-animation: spin 3s linear infinite;
+        -o-animation: spin 3s linear infinite;
+        -ms-animation: spin 3s linear infinite;
+        animation: spin 3s linear infinite;
+      }
+
+      #loader:after {
+        content: '';
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        right: 15px;
+        bottom: 15px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: #fff;
+        -moz-animation: spin 1.5s linear infinite;
+        -o-animation: spin 1.5s linear infinite;
+        -ms-animation: spin 1.5s linear infinite;
+        -webkit-animation: spin 1.5s linear infinite;
+        animation: spin 1.5s linear infinite;
+      }
+
+      @-webkit-keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        100% {
+          -webkit-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      #loader-wrapper .loader-section {
+        position: fixed;
+        top: 0;
+        width: 51%;
+        height: 100%;
+        background: #7171c6;
+        z-index: 1000;
+        -webkit-transform: translateX(0);
+        -ms-transform: translateX(0);
+        transform: translateX(0);
+      }
+
+      #loader-wrapper .loader-section.section-left {
+        left: 0;
+      }
+
+      #loader-wrapper .loader-section.section-right {
+        right: 0;
+      }
+
+      .loaded #loader-wrapper .loader-section.section-left {
+        -webkit-transform: translateX(-100%);
+        -ms-transform: translateX(-100%);
+        transform: translateX(-100%);
+        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+
+      .loaded #loader-wrapper .loader-section.section-right {
+        -webkit-transform: translateX(100%);
+        -ms-transform: translateX(100%);
+        transform: translateX(100%);
+        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
+
+      .loaded #loader {
+        opacity: 0;
+        -webkit-transition: all 0.3s ease-out;
+        transition: all 0.3s ease-out;
+      }
+
+      .loaded #loader-wrapper {
+        visibility: hidden;
+        -webkit-transform: translateY(-100%);
+        -ms-transform: translateY(-100%);
+        transform: translateY(-100%);
+        -webkit-transition: all 0.3s 1s ease-out;
+        transition: all 0.3s 1s ease-out;
+      }
+
+      .no-js #loader-wrapper {
+        display: none;
+      }
+
+      .no-js h1 {
+        color: #222222;
+      }
+
+      #loader-wrapper .load_title {
+        font-family: 'Open Sans';
+        color: #fff;
+        font-size: 19px;
+        width: 100%;
+        text-align: center;
+        z-index: 9999999999999;
+        position: absolute;
+        top: 60%;
+        opacity: 1;
+        line-height: 30px;
+      }
+
+      #loader-wrapper .load_title span {
+        font-weight: normal;
+        font-style: italic;
+        font-size: 13px;
+        color: #fff;
+        opacity: 0.5;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="app">
+      <div id="loader-wrapper">
+        <div id="loader"></div>
+        <div class="loader-section section-left"></div>
+        <div class="loader-section section-right"></div>
+        <div class="load_title">正在加载系统资源，请耐心等待</div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..fda8452
--- /dev/null
+++ b/package.json
@@ -0,0 +1,82 @@
+{
+  "$schema": "https://json.schemastore.org/package",
+  "name": "ruoyi-vue-plus",
+  "version": "6.0.0",
+  "description": "RuoYi-Vue-Plus后台管理系统",
+  "license": "MIT",
+  "author": "LionLi",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/JavaLionLi/plus-ui.git"
+  },
+  "packageManager": "pnpm@10.34.5",
+  "type": "module",
+  "scripts": {
+    "build": "vite build --mode production",
+    "build:dev": "vite build --mode development",
+    "build:prod": "vite build --mode production",
+    "dev": "vite serve --mode development",
+    "fmt": "oxfmt .",
+    "lint": "oxlint src",
+    "lint:fix": "oxlint --fix src",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "2.3.2",
+    "@highlightjs/vue-plugin": "2.1.2",
+    "@iconify/vue": "^5.0.1",
+    "@noble/ciphers": "^2.4.0",
+    "@vueuse/core": "14.4.0",
+    "@wangeditor-next/editor": "6.4.1",
+    "@wangeditor-next/editor-for-vue": "6.4.1",
+    "animate.css": "4.1.1",
+    "await-to-js": "3.0.0",
+    "axios": "1.20.0",
+    "echarts": "6.1.0",
+    "element-plus": "2.14.5",
+    "highlight.js": "11.12.0",
+    "image-conversion": "2.1.1",
+    "jsencrypt": "3.5.4",
+    "nprogress": "0.2.0",
+    "pinia": "4.0.3",
+    "vue": "3.5.42",
+    "vue-cropper": "1.1.4",
+    "vue-i18n": "11.4.10",
+    "vue-json-pretty": "2.6.0",
+    "vue-router": "5.3.1",
+    "vue-types": "7.0.0",
+    "vxe-pc-ui": "4.18.9",
+    "vxe-table": "4.21.9"
+  },
+  "devDependencies": {
+    "@types/node": "^26.1.1",
+    "@types/nprogress": "0.2.3",
+    "@unocss/preset-attributify": "66.10.1",
+    "@unocss/preset-wind3": "66.10.1",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/compiler-sfc": "3.5.42",
+    "autoprefixer": "10.5.5",
+    "oxfmt": "^0.67.0",
+    "oxlint": "^1.82.0",
+    "sass": "1.104.0",
+    "typescript": "^6.0.3",
+    "unocss": "66.10.1",
+    "unplugin-auto-import": "21.1.0",
+    "unplugin-vue-components": "32.1.0",
+    "unplugin-vue-setup-extend-plus": "1.0.1",
+    "vite": "^8.2.2",
+    "vite-plugin-svg-icons-ng": "^1.9.3",
+    "vitest": "4.1.11",
+    "vue-tsc": "^3.3.11"
+  },
+  "browserslist": [
+    "Chrome >= 87",
+    "Edge >= 88",
+    "Safari >= 14",
+    "Firefox >= 78"
+  ],
+  "engines": {
+    "node": ">=20.19.0",
+    "pnpm": ">=10.0.0"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..ad926f7
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,4898 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+overrides:
+  esbuild: 0.28.1
+
+importers:
+
+  .:
+    dependencies:
+      '@element-plus/icons-vue':
+        specifier: 2.3.2
+        version: 2.3.2(vue@3.5.42(typescript@6.0.3))
+      '@highlightjs/vue-plugin':
+        specifier: 2.1.2
+        version: 2.1.2(highlight.js@11.12.0)(vue@3.5.42(typescript@6.0.3))
+      '@iconify/vue':
+        specifier: ^5.0.1
+        version: 5.0.1(vue@3.5.42(typescript@6.0.3))
+      '@noble/ciphers':
+        specifier: ^2.4.0
+        version: 2.4.0
+      '@vueuse/core':
+        specifier: 14.4.0
+        version: 14.4.0(vue@3.5.42(typescript@6.0.3))
+      '@wangeditor-next/editor':
+        specifier: 6.4.1
+        version: 6.4.1
+      '@wangeditor-next/editor-for-vue':
+        specifier: 6.4.1
+        version: 6.4.1(@wangeditor-next/editor@6.4.1)(vue@3.5.42(typescript@6.0.3))
+      animate.css:
+        specifier: 4.1.1
+        version: 4.1.1
+      await-to-js:
+        specifier: 3.0.0
+        version: 3.0.0
+      axios:
+        specifier: 1.20.0
+        version: 1.20.0
+      echarts:
+        specifier: 6.1.0
+        version: 6.1.0
+      element-plus:
+        specifier: 2.14.5
+        version: 2.14.5(vue@3.5.42(typescript@6.0.3))
+      highlight.js:
+        specifier: 11.12.0
+        version: 11.12.0
+      image-conversion:
+        specifier: 2.1.1
+        version: 2.1.1
+      jsencrypt:
+        specifier: 3.5.4
+        version: 3.5.4
+      nprogress:
+        specifier: 0.2.0
+        version: 0.2.0
+      pinia:
+        specifier: 4.0.3
+        version: 4.0.3(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.42(typescript@6.0.3))
+      vue:
+        specifier: 3.5.42
+        version: 3.5.42(typescript@6.0.3)
+      vue-cropper:
+        specifier: 1.1.4
+        version: 1.1.4
+      vue-i18n:
+        specifier: 11.4.10
+        version: 11.4.10(vue@3.5.42(typescript@6.0.3))
+      vue-json-pretty:
+        specifier: 2.6.0
+        version: 2.6.0(vue@3.5.42(typescript@6.0.3))
+      vue-router:
+        specifier: 5.3.1
+        version: 5.3.1(@vue/compiler-sfc@3.5.42)(pinia@4.0.3(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.42(typescript@6.0.3)))(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))(vue@3.5.42(typescript@6.0.3))
+      vue-types:
+        specifier: 7.0.0
+        version: 7.0.0(vue@3.5.42(typescript@6.0.3))
+      vxe-pc-ui:
+        specifier: 4.18.9
+        version: 4.18.9(vue@3.5.42(typescript@6.0.3))
+      vxe-table:
+        specifier: 4.21.9
+        version: 4.21.9
+    devDependencies:
+      '@types/node':
+        specifier: ^26.1.1
+        version: 26.1.1
+      '@types/nprogress':
+        specifier: 0.2.3
+        version: 0.2.3
+      '@unocss/preset-attributify':
+        specifier: 66.10.1
+        version: 66.10.1
+      '@unocss/preset-wind3':
+        specifier: 66.10.1
+        version: 66.10.1
+      '@vitejs/plugin-vue':
+        specifier: ^6.0.8
+        version: 6.0.8(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))(vue@3.5.42(typescript@6.0.3))
+      '@vue/compiler-sfc':
+        specifier: 3.5.42
+        version: 3.5.42
+      autoprefixer:
+        specifier: 10.5.5
+        version: 10.5.5(postcss@8.5.28)
+      oxfmt:
+        specifier: ^0.67.0
+        version: 0.67.0
+      oxlint:
+        specifier: ^1.82.0
+        version: 1.82.0
+      sass:
+        specifier: 1.104.0
+        version: 1.104.0
+      typescript:
+        specifier: ^6.0.3
+        version: 6.0.3
+      unocss:
+        specifier: 66.10.1
+        version: 66.10.1(@devframes/hub@0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4)))(cac@7.0.0)(crossws@0.4.12(srvx@1.0.4))(rolldown@1.2.8)(srvx@1.0.4)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      unplugin-auto-import:
+        specifier: 21.1.0
+        version: 21.1.0(@vueuse/core@14.4.0(vue@3.5.42(typescript@6.0.3)))(oxc-parser@0.131.0)(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      unplugin-vue-components:
+        specifier: 32.1.0
+        version: 32.1.0(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))(vue@3.5.42(typescript@6.0.3))
+      unplugin-vue-setup-extend-plus:
+        specifier: 1.0.1
+        version: 1.0.1
+      vite:
+        specifier: ^8.2.2
+        version: 8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)
+      vite-plugin-svg-icons-ng:
+        specifier: ^1.9.3
+        version: 1.9.3(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      vitest:
+        specifier: 4.1.11
+        version: 4.1.11(@types/node@26.1.1)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      vue-tsc:
+        specifier: ^3.3.11
+        version: 3.3.11(typescript@6.0.3)
+
+packages:
+
+  '@antfu/install-pkg@2.0.1':
+    resolution: {integrity: sha512-iCKVQcIC0e3oDxEfs3SHQGW+ovhBMZmS1TE+bTk50rVyMCBmCfClv7Qi3HQKlumYwvjb/iIMeWCW2i67q6kFfQ==}
+
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.8':
+    resolution: {integrity: sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.8':
+    resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@ctrl/tinycolor@4.2.1':
+    resolution: {integrity: sha512-Vh5uy9Y1JBMId6J1f68TMXnZrTCvNdo9Fu2k0d1YnJngR+sM5kWTKl441c/3TFs+cG0NWOjRWgQ/iaWhbYx+7A==}
+    engines: {node: '>=14'}
+
+  '@devframes/hub@0.9.18':
+    resolution: {integrity: sha512-sYsJEYiNBPMXRIcte+YNY0wBCV7J4rsh5TUuRC7jnulP/1cFDiHsT4mFxxKbm1VUX38KMAHtGVKBqk+/LYus+g==}
+    peerDependencies:
+      devframe: 0.9.18
+
+  '@devframes/json-render@0.9.18':
+    resolution: {integrity: sha512-KMfcUxK3t6kbcoojDEXTy+mHZpt00IVXK6Yu9SJiqtLPTKmMsVU2MDkt+reafiX4ZczOycHHZUt5sMhl8tTDyQ==}
+    peerDependencies:
+      '@devframes/hub': 0.9.18
+      devframe: 0.9.18
+    peerDependenciesMeta:
+      '@devframes/hub':
+        optional: true
+
+  '@devframes/service-shiki@0.9.18':
+    resolution: {integrity: sha512-xox/QfYreuGFS2eJfHbEOzliVdNjwHnrOV7UdA0dXn9YRob3vO0n1OR5iZTylXqkSCkN2v4iMV4OQfWl94sg+A==}
+    peerDependencies:
+      devframe: 0.9.18
+
+  '@devframes/vite@0.9.18':
+    resolution: {integrity: sha512-rWV4gwrRlihOgCBsqRomuP9b9urm9F1M3pxUSvpWFhJiA/Afa+7z+3ORs4ntZItZhMeLsOupT/0Fe6EsAui2Hg==}
+    peerDependencies:
+      '@devframes/hub': 0.9.18
+      '@devframes/hub-ui': 0.9.18
+      devframe: 0.9.18
+      vite: ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@devframes/hub':
+        optional: true
+      '@devframes/hub-ui':
+        optional: true
+      vite:
+        optional: true
+
+  '@element-plus/icons-vue@2.3.2':
+    resolution: {integrity: sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
+
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
+
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
+
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
+  '@highlightjs/vue-plugin@2.1.2':
+    resolution: {integrity: sha512-P7s9DLBGpBsbltk3ZKuYUu9lwDCEfpttjJ5ErI6Wco6GQWIsjcSCJzCoMHgXhRUNkFDtZo7ZgeF8M10POPbDLw==}
+    peerDependencies:
+      highlight.js: ^11.0.1
+      vue: ^3
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@3.1.7':
+    resolution: {integrity: sha512-JZHlwdID+dy+lTgbYC8NEC4zeugqeYsc6jewvzb4c58kHauJn+X7rNwQjxz5p2qSjqaEeQoLkCIQ9v/H4PK0/w==}
+
+  '@iconify/vue@5.0.1':
+    resolution: {integrity: sha512-aumwwooJlFJ5H5qYWB6ZTAyM0C8hpfcSVLB9/a3qnH1GGvIJ+FEbpEs4s/HfErYe/M5qZeLjwmESR5fFm3lXEw==}
+    peerDependencies:
+      vue: '>=3.0.0'
+
+  '@intlify/core-base@11.4.10':
+    resolution: {integrity: sha512-+yJ74JRWVJokdgG9zYNMyTSzeNV3O9T4vVxk8PvLFHmI+R/BYA//cITh7vhRK37hWLZ4/kTcKcUz1dlWOpypIg==}
+    engines: {node: '>= 22'}
+
+  '@intlify/devtools-types@11.4.10':
+    resolution: {integrity: sha512-xZxzZsAuu6/0zoLRVQWdpXWe5Kjl0LnWpjlQA3r9u9FbLYMhapqt7IwkgQyn0Tm2GUNAqhj9eZiUmYOrB024BQ==}
+    engines: {node: '>= 22'}
+
+  '@intlify/message-compiler@11.4.10':
+    resolution: {integrity: sha512-oUB/scz2EJENXDiUJ7JjZffOrH8UIZ1BuZeHvonbi5fWLavLt04aivuk2OIByOZA0tsci1bkeeQRmwhb5M8Imw==}
+    engines: {node: '>= 22'}
+
+  '@intlify/shared@11.4.10':
+    resolution: {integrity: sha512-FeImVdPeoSHTm3NBFFZHv0eRP9gQ3F4lj2puDBX5Kw7iiM1uJW6JTf39ian0K/17pbXCI3ef5i9RVsRrALqI6Q==}
+    engines: {node: '>= 22'}
+
+  '@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/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/sourcemap-codec@1.6.0':
+    resolution: {integrity: sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@json-render/core@0.20.0':
+    resolution: {integrity: sha512-cXAXn7h3QaylefQgh85AEGPuVq4C8SJ3k9JqigWLJhaBSozF1Fmsrm43DP16RmkqNiVgj5pBRdmB48lEO5qlow==}
+    peerDependencies:
+      zod: ^4.0.0
+
+  '@modelcontextprotocol/core@2.0.0':
+    resolution: {integrity: sha512-pJCEwGG7Lfr/+PQp9ZTwKXNeO5wzbfKL7H3MYpCorM4oFBoQrdjnBgEoqG+RjhsvS1FKrDbKux+M1HhlnGWqcA==}
+    engines: {node: '>=20'}
+
+  '@modelcontextprotocol/server@2.0.0':
+    resolution: {integrity: sha512-YhHWdHfpFMQfd0prsEnxKeS3Qz3ytIGmsS0sth4KDjnacIT7hxk6hXHkJ9KysxlkvTM+WZAtQbbcUhdoP4Hvtw==}
+    engines: {node: '>=20'}
+
+  '@napi-rs/wasm-runtime@1.2.3':
+    resolution: {integrity: sha512-UMduMbqO5s5zF2NkNacMT/yK5Y5QiKvWr2+50bzIIxFDwVJ2h49b+oyjaCGPhJxd2/gC2x39EHv/gHVuu36x2Q==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1 || ^2.0.0-alpha.4
+      '@emnapi/runtime': ^1.7.1 || ^2.0.0-alpha.4
+
+  '@noble/ciphers@2.4.0':
+    resolution: {integrity: sha512-AnjFn0Jv92laAkvMrghlFZq4qQCIN/4DxFV/eooqtC2YTjB7kBeLMS2T9KJX4Dn+ZVXLOwK0lSgqDtx9gvxtiw==}
+    engines: {node: '>= 20.19.0'}
+
+  '@nodable/entities@3.0.0':
+    resolution: {integrity: sha512-8L9xFeTYKhm49xfIypoe2W5wV1m/3Z58kT+7kR9A8OyFxcPduI4VmxaUMQyKYrRjUoLLSXv6EKKID5Tvj9cUVw==}
+
+  '@oxc-parser/binding-android-arm-eabi@0.131.0':
+    resolution: {integrity: sha512-t2xicr9pfzkSRYx5aPqZqlLaayIwJTqgQ81Jor31Xep2nGyL2Aq3d0K5wOfeR7VevaSdxaS9dzSQP9xDwn8fDg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm64@0.131.0':
+    resolution: {integrity: sha512-nlGIod6gw75x1aEDgLS+srj+JRGY0HHm9MI9YgzE/B64l6d6+H3MSP9NOgp0+HTg8tp4vV9rVfgQGgd+TfVZcA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-darwin-arm64@0.131.0':
+    resolution: {integrity: sha512-jukuV6xe5RbQKFo7QD34NDCLDZp4PSOm8rmckhNdH/60ymG5zXbDzGBEyc+nTkuLQNama2aSGCt+CPfpjNTqyw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.131.0':
+    resolution: {integrity: sha512-g3JOo4khe9rslHm5WYaVDWb0HS/M1MLR3I9S8560MkKIcC96VQY00QjOlsuRyfSj/JDXj8i9T7ryPO2RidiXVg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.131.0':
+    resolution: {integrity: sha512-1hziITDTxjMePnX+dR9ocVT+EuZkQ8wm4FPAbmbEiKG+Phbo73J1ZnPAA6Y/aGsWF3McOFnQuZIktAFwalkfJQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.131.0':
+    resolution: {integrity: sha512-9uRxfXwyKG9+MwmGQBo2ncPNwZH5HTmCETFM2WiuDBNDCW4NC5ttSQkwCAMrTAWgwMzVBH1CP8pM0v7nebCWXQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.131.0':
+    resolution: {integrity: sha512-mgbLvzRShXOLBdWGInf08Af4q+pfj1xD8hSgLClDZ9of/BXkB6+LIhTH7fihiDUipqB3yoSkKBWaZ3Ejlf5Yag==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.131.0':
+    resolution: {integrity: sha512-OPT8++4aN6j2GJ8+3IZHS/byXoZP4aSBn+FoG6rgBJ2fKwPKXWF3MqrFMNW7NKHM28FLY579xYLxJSfgobEqPA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.131.0':
+    resolution: {integrity: sha512-vtPiwmfVTAXzaxDKsOXG+LwgRAA7WEnaeHzhS5z0GE89gAK18KSXnly7Z6saXXq6L3dVMyK44uoTI03zKxrpmw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.131.0':
+    resolution: {integrity: sha512-8AW8L7w5cGHSdZPcyZX2yR0+GUODsT15rbRjfdD54rv6DMbtuEB19ysLOpKJlRGfH6UNYNpCHaU1uJWgTWf1/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.131.0':
+    resolution: {integrity: sha512-vvpjkjEOUsPcsYf8evE4MO3aGx9+3wodXEBOicGNnOwTuAik8eBONNkgSdhkGsAblQmfVHJyanRnpxglddTXIA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.131.0':
+    resolution: {integrity: sha512-AqmcNC3fClXX+fxQ6VGEN1667xVFiRBkY0CZmDMSiaeFUsv1+UkBPYYi48IUKcA9/ivvoKNRzQl2I4//kT9F/w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.131.0':
+    resolution: {integrity: sha512-7d3jOMKy7RSQCcDLIci+ySll2FgsOMl/GiRux4q2JNv0zg4EdhFISa9idvrdN/HEUIQQJNg6dmveUeJl2YErGA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.131.0':
+    resolution: {integrity: sha512-JHK/h95qVqVQ+ITER837kcTdwBDFpFaNnOTYGCP0zdUSX/mLKC7tXOoyrTb6vG7iRPwGlcgBil3v2IjYw1FqJA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-musl@0.131.0':
+    resolution: {integrity: sha512-b2BO82O8azXAyf7EUgOPKu145nWypbNyk07HbU09fkzhm9lEA5oPvaN/M8Nlo7tOErVTa2WOgS4QbOnxAPXdDQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-openharmony-arm64@0.131.0':
+    resolution: {integrity: sha512-GHO9glZaX7LkX/OGfluEPf1yjg+ehiFbUdowbX6uNWOQhmwKWU4m4+nZ9FJkrHNKuxyI1KKertMdGjVKCApKWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-parser/binding-wasm32-wasi@0.131.0':
+    resolution: {integrity: sha512-3SkikPaEFoih1N83qLVEDLRLeY4nYsf6JT9SnWiMCQ5lGQdKup6bEuKCqkRiG9dD1IIaFeYz9RjlciPmYoFIWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.131.0':
+    resolution: {integrity: sha512-Os5bEhryeA2jkH+ZrnZyAC1EP5gs+X4YB1Fjqml7UPD5kU7ecsK1MPEVMfCrdt/GDNpDbavYXiOXOdyJ5b3OPw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.131.0':
+    resolution: {integrity: sha512-m+jNz9EuF0NXoiptc6B9h5yompZQVW/a5MJeOu5zojfH5yWk82tvF2ccrHkfhgtrS9h9DD5l1Qv8dWlfY7Nz8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.131.0':
+    resolution: {integrity: sha512-o14Hk8dAyiEUMFEWEgmAwFZvBt1RzAYLM3xeQ+5315JXgVYhoemivgYcbYVRbsFkS71ShMGlAFE0kPnr460rww==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-project/types@0.131.0':
+    resolution: {integrity: sha512-PgnWDfV0h+b16XNKbXU7Daib/BFSt/J2mEzfYIBu6JB/wNdlU+kVYXCkGA1A9fWkTbOgbjh4e6NhPeQOYvFhEA==}
+
+  '@oxc-project/types@0.149.0':
+    resolution: {integrity: sha512-Efcc+iF0j3Bf67YjEqIqWXbX5XddXoK/Mw4K1/JuXwRCZ8N16VR7iT23nlCc9XrveFVh/E5Rqs2StT0V8v9LdA==}
+
+  '@oxfmt/binding-android-arm-eabi@0.67.0':
+    resolution: {integrity: sha512-2olh3ioEmc4gRzQm7jxyB1b/PFBoFvTq8KdgYySeNpysDtA6DEg2Mvya4/I6flhL7G0eOrE8RD7JCNCIMhE16Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxfmt/binding-android-arm64@0.67.0':
+    resolution: {integrity: sha512-ulfw8EHN1MBq/MFFDXw2/M1VAFu5mRUcnuZ8Hqbv9viAnFzO9t1jKSAsDqKYYDGMlytF/uj6Z5z5n/tHupnKhw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxfmt/binding-darwin-arm64@0.67.0':
+    resolution: {integrity: sha512-MfONZx/O2o9M5v2jDFol556G9+A+P9xCuJ4DZ+qhE+RnaCdoscy6Eu5nq1dbuNxhwdJyZ6kLI7fnG9mwEeOeGg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxfmt/binding-darwin-x64@0.67.0':
+    resolution: {integrity: sha512-CYnIx5LvFVJnyJcCqwH2jxMKjFjqo5678MPjdmNFoSGMhlOvZ/xRZqvhDcolKrXc8fezW3AKh+C4wyoFuWOSSg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxfmt/binding-freebsd-x64@0.67.0':
+    resolution: {integrity: sha512-7/iF1orvIS9mxhKUqnmtMgm+OrSQ5acPwuvdQrm6ECgqbwPmC+Pw9cdke3sNfVN6pT2hbJ58+jP8BCThl5HXOg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxfmt/binding-linux-arm-gnueabihf@0.67.0':
+    resolution: {integrity: sha512-yy+OGys07IZOpOmYPZoObKyUQLkfxeQqeCypk+1jaZd8HGo77hzvU1Jg8X3+W75o+9lszOjBfg0nkGtlwYywXw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxfmt/binding-linux-arm-musleabihf@0.67.0':
+    resolution: {integrity: sha512-wPIeeigXgJpwNw3wydYRt3U9iN9Y/ejpOZuYL9IA7igxWs7LIQMOkhKxTumRvy6dIv0iXKk3RTw3Vmjg0i+2sg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxfmt/binding-linux-arm64-gnu@0.67.0':
+    resolution: {integrity: sha512-0+XNxcdbkTfxdcD4qW6Ci9n+mBNJ8xTBumnxKvKBmRFOdx0Wf8/KiHjCJayooXmYkqRpRVd98Q5egvzx5BLSgQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-arm64-musl@0.67.0':
+    resolution: {integrity: sha512-I75LKPJyNOYUzkqAiAMIE31+Ye7xtQXZdoty1IXn4B+bw5Zpmez5wfG19ejGpNnS/BzQ7LFS+7jxuTPb+vHiZw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-linux-ppc64-gnu@0.67.0':
+    resolution: {integrity: sha512-c2M5iRpe1QMZSRE/UvZoPdXBWb5Ic/ycvOyNiKCqPwQ/OyOKIMiJs02ynlNnjb7ZZJnRXYLmGcohoINOcwDK3w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.67.0':
+    resolution: {integrity: sha512-dQzzYlV24Udhfm5ECuSdgqRvFJU/CGHzcYYEO3dLM6W6+CHiBFrq9OjIllkdCcPhsoSQ8o223Dja84MOSzed9A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-riscv64-musl@0.67.0':
+    resolution: {integrity: sha512-rFNq1CgX4qMJANOq42LkAs90JE80GpiaEohAV2qn/gT2hGjQTW1zBO5zQBxArI4926pM1OSzo3CN0tBszGBIaA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-linux-s390x-gnu@0.67.0':
+    resolution: {integrity: sha512-Sky6rEdz2o5IGq01lPhS12yEvDdChVEcaYrcLHkveh4Fx0qPjljE/Iul6SX/bRMl6lNc8J7J/mDQdzgBdA++Pg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-x64-gnu@0.67.0':
+    resolution: {integrity: sha512-vPXmlNORV8AZq2Ocxh07pxwMjfENUWCV/eZArnao0qC3NO/hDeTVkQvee7SJJUbIiF5PZbBa4kYmaXnu7Rk58w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-x64-musl@0.67.0':
+    resolution: {integrity: sha512-x/WAtFqYtVr3vZ9ni8nr4kn9whSitg8fOljq/pZzBpxopRdY1BMLZCZkrbIbaBcYkm46qGbqVea2FCWmtQ2P9w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-openharmony-arm64@0.67.0':
+    resolution: {integrity: sha512-eRw9Neh4/aA6i+q/R3WU1gGQINhVM0J4fXIm6t27caOamkr/37uAkp1IdBx4zlJH97hmXR63z/q9n5c5dN7MzA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxfmt/binding-win32-arm64-msvc@0.67.0':
+    resolution: {integrity: sha512-YIMvb+sGNYN2uc6+QK2HLPeEKM2vl7QZ5onQzpAJRb6pnf0DwUFP5R8tdS9R0l8hdUil2gu4Uxd0Yxrop0iT4w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxfmt/binding-win32-ia32-msvc@0.67.0':
+    resolution: {integrity: sha512-LzmU9MyACPzwNDIK0ItMedHPz735Ug7ELWguxo4/kuy6zWuDoeglOAEFCY8jLg0PzRpFO3hDyLFe2Gu2eFDeGA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxfmt/binding-win32-x64-msvc@0.67.0':
+    resolution: {integrity: sha512-sbQOIDNLUEeVZcAJcSL5VURn7kfjvilPviody4Yl5n8lQCDtUm+C9oHTTwZS/m4d/Z6Vv3jNEiAofH932NPPCg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxlint/binding-android-arm-eabi@1.82.0':
+    resolution: {integrity: sha512-a3LB+C5Dsj5b/qtmG/mv5WrzuiXEpg1KF5nXWcEvaoN5TYAqkIvxPOwTPp3Jy/FoGpRo8zsTFhMElMXfeoOEzA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxlint/binding-android-arm64@1.82.0':
+    resolution: {integrity: sha512-OBlhRgNqFblGpGenno/aqOfJLOkQ2B8Ig3iDAalfn0H8hJGZKXPeexCRTDm6uwv6YUjSA9Xnwt1y/Bgj5ZH8uw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxlint/binding-darwin-arm64@1.82.0':
+    resolution: {integrity: sha512-dsopxqtY5ZdyT9uLHyGt1SyiLop6hi7hWI3PKpePodkRQOkLaCm+OE4fR9CAz9qdfjiFO8531tX/QDyP/psjFg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxlint/binding-darwin-x64@1.82.0':
+    resolution: {integrity: sha512-94Lu0SgTClKColU66g1VDuigV3HkcbkJBnTtZjGYfE8UPugaWDgKrm2icjC6HJVUYler2OXaHP/X0TBy8+CowQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxlint/binding-freebsd-x64@1.82.0':
+    resolution: {integrity: sha512-hne/V06ewhh1i0w8+l7GDNROAGCGPmyFuOwiP7YTRu0JycyStJ4785dmF8xU5p0uUwt2emvIF9vc7Xjis+cJ0g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.82.0':
+    resolution: {integrity: sha512-aWY2xtbZf1LneW9Qsv/n2Sp8gOu74JrlQzEtj4coHX2SHFrCfhmAumaU+sI/A5nr+yoTRTSmI/pL2s6ADlNSkw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm-musleabihf@1.82.0':
+    resolution: {integrity: sha512-Fe+TtXCXMh/5f7kWlZ2VAwsMumZWtraFlKVk1NJlL52/beGwfDE7ov+/8gVirHzWokzGu7X65hSPq0ucPDskWQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm64-gnu@1.82.0':
+    resolution: {integrity: sha512-6azCZ6OJudlvipNttXCCQcyeFfcJ/NvUZdSN1z8elo73kCHtyQC7WTiUcSjWYvJ1jaq9KDUyMAoAS/vNzhBomA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-arm64-musl@1.82.0':
+    resolution: {integrity: sha512-PLEaSD8IAIIlwW4dwOd9YaxuxeOpwiXL4J24rcnE4iNtyM5j9Q9/3+gti08oXpx0u2ygNjRDx9xjWWpQonuJEw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-ppc64-gnu@1.82.0':
+    resolution: {integrity: sha512-D94em/BwknNTn4vqxjHh5wb2oL566eFhArabqKIr0cNZMHOJuiraFp1A8tXpH05bbE5tqwEfLXTI0MWEGtn3Dw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-gnu@1.82.0':
+    resolution: {integrity: sha512-MOprxBaoYU2D4VgxXCl3ghydThWtx7Um1lL51kGYNeQ5Al7WzsH7/tqGdNtbLrIWnjq3bsm13+nz/gRIxjrOXw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-musl@1.82.0':
+    resolution: {integrity: sha512-5h55QsfJ/luDXZzC20k6SNOY1Az+dCP9WvntKtcUWh2JhckAdwApY2ZusaBTwLENnReXU+A2fJtSrYvZJNKNPg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-s390x-gnu@1.82.0':
+    resolution: {integrity: sha512-IE8NJNLlHr0CaXyGJPGVn0eTkUyoj1I2UfA8x7I4PSOYKsQ/6btVC7Pywrj5onk0cMH25r6Z38SoN3AvE5Zuog==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-gnu@1.82.0':
+    resolution: {integrity: sha512-XUUUxaBo9XKl+J1B9EmP1cTGQPddzeURvoGkfwh/94PGnbW+hBprDljneoI2M1jzC1bzrIV3ihc7iM9UXl8+tg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-musl@1.82.0':
+    resolution: {integrity: sha512-SWLSFulX9TDuH6yvbPYp4+VNn6jkkIvvI+KiujDM5rWBRHEfkesCC/pCneIIUr6ovkxZ5fRtpi2v5Cz5FrMJZg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-openharmony-arm64@1.82.0':
+    resolution: {integrity: sha512-BQy35f6ZUdNr9a6c7B7orxQTcLjByGT2z3WAgmRovpRwmPYAaJ+NTplmMzhdjdJ4qSchfMNZy/Ukg+qRg6zseQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxlint/binding-win32-arm64-msvc@1.82.0':
+    resolution: {integrity: sha512-V4QhSTg5gctZue8RJjsGi7NpQPThr/p1/HfmiMC5kfe1KFEup9SQRVub4A6kijQjdHfxj7bLL1KO3QO7/5bwMQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxlint/binding-win32-ia32-msvc@1.82.0':
+    resolution: {integrity: sha512-TUSCLaKB2yktpFAJ/r3HAUYsaV/3DT7JS4iNKyoh3a9YNwD0UG7Ezh4D8m23654vQcU6P/RQrCAjRPKe4peP/A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxlint/binding-win32-x64-msvc@1.82.0':
+    resolution: {integrity: sha512-VTVoRIWJTb+wvUX8EYoPArfFH02whuR10goFXE/LHRRX33ajRrFgqbcONXZMiF4C5rnattfkm87HqYn8jb8hmQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher-android-arm64@2.6.0':
+    resolution: {integrity: sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.6.0':
+    resolution: {integrity: sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.6.0':
+    resolution: {integrity: sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.6.0':
+    resolution: {integrity: sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.6.0':
+    resolution: {integrity: sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm-musl@2.6.0':
+    resolution: {integrity: sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-arm64-glibc@2.6.0':
+    resolution: {integrity: sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm64-musl@2.6.0':
+    resolution: {integrity: sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-x64-glibc@2.6.0':
+    resolution: {integrity: sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-x64-musl@2.6.0':
+    resolution: {integrity: sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-win32-arm64@2.6.0':
+    resolution: {integrity: sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.6.0':
+    resolution: {integrity: sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.6.0':
+    resolution: {integrity: sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==}
+    engines: {node: '>= 10.0.0'}
+
+  '@quansync/fs@1.0.0':
+    resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
+
+  '@rolldown/binding-android-arm-eabi@1.2.8':
+    resolution: {integrity: sha512-tN5aztYkKCte4i5SIrrz5yK/HMjEuCqCSCJa418jOV8tZ1cBY3YF2otxB1ktPxzsLA1BeTqwapK0bfjxNvHJVw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@rolldown/binding-android-arm64@1.2.8':
+    resolution: {integrity: sha512-dIYTWl9XprMUiQFoc55KUyk/oS8SKYH3zFl0LTR7RT0Xj4hgSVyuJcroH8JUu8RcpF8fTB6E0aOwCkZoYPcDSQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.2.8':
+    resolution: {integrity: sha512-PCSDQGXD2IyTEFrcgPyBM8jJuGmrbCMuoIOXdbEGVemruKACXoLQJrb+A45Z0L5t1RQkdfJprAYPkikbh7dzdA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.2.8':
+    resolution: {integrity: sha512-Uk7lRsGhPFHVX/sAUC6D5H9Ol30dFHd6iquokll2th3LpdJ3F5CzQB+7DHn0Ri2mG+U7k2zXiPHDrwZenXhwSA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.2.8':
+    resolution: {integrity: sha512-DjszaTEVogPqA5bYzsEeqDCQxbcp2fexQwKcRspYji2yzR68fCf+e4fx6kBSRDwX5/brZaHw/hWS9+A/+/w9sQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.8':
+    resolution: {integrity: sha512-zmwa7FTmdzB6aaEEuuls18H6Ap5JmJPSoPTuXixeJZV6tG40SyLkApQtz1g8ptZtiEKqj9OM0oNLPh1AgvE31Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.8':
+    resolution: {integrity: sha512-KdYQDPHwJVnbFwdTGMgxsI9SqblBlz6STGM+w1We/d5B8OWWidYH0MwkU/uA1wM5fIpO2MkOVxXrNzzuZhw9ew==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.2.8':
+    resolution: {integrity: sha512-jFJTifHnNPY+yzOoNZQfSIysrVyXzEQPhPnOUjmD1bcQGHH6s7c8cViKWar8YplQImE5N9JRqMCLrM2CdxOrZA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.8':
+    resolution: {integrity: sha512-FhiOziBDWPBjbcmRzfLyIJnaP7AVMFXT7YCXPjXxj7wKU3vx24RjrCNN/zjvVa+N2vVoHJwCoUBvsrN/DG3zIA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.8':
+    resolution: {integrity: sha512-WnHfADMzOV2Y55wlx1hzzQnar/wDt/VdvWSD99r18Mz9ylNieIGOkRx3UV21h7m/eJvjySYJkO26VvGNFkwsIQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.2.8':
+    resolution: {integrity: sha512-H9tRr5ibfXFVLxbPOseVewewFpl28zcEdjRDt2FTUZU7odxP0gEv1ki4/kGmcGOh78oRwZuuQllGLZ9zTJp84g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.2.8':
+    resolution: {integrity: sha512-UefiqfM3D6IVNlZ8tSGs9+Ejjud2T+oxO0IHADU45Y+lyEjD2dVFyZHbkfX0LUb5Zugo/oIv1eCO/KVYhgYJYA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.2.8':
+    resolution: {integrity: sha512-637Ke4kWSy6rp9cxQ9gMOXlxPgIw/c1beASV4M//3+9I4uwBVOOl74G+e3zyU3u19U7RkRl/HuewixZ/Z6+Rjg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.8':
+    resolution: {integrity: sha512-xWBkPOF1Q9k/Gv1nQXnVdLxKu74jXppuOM4Z3mnypVUJJJwLsMl7hNJGRAUJoG8A5MgOI1ACKM+wBFxSJzKy4A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.2.8':
+    resolution: {integrity: sha512-uz2ZvfgXbxqNwijjjbxrnvALwpyODDcgc1T1N8N3rf/DXKQmaFwmB4LX4yyjggpwN2obdQLb2rgirX5ffCWYng==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@shikijs/core@4.4.3':
+    resolution: {integrity: sha512-QCR4q2ZO/ILJEuwiBMel4wdcTDb1JGwfjKTxPDF6x8ixOaluPrVqIn06C99AcRPhmYlBR56d/Fb+GN58GzExpg==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-javascript@4.4.3':
+    resolution: {integrity: sha512-FbOjFJp9VLdo1Wevs10BBtVxiTWwNLqZh5Gkhjgda/ioL15YOgeSl9n+6XMa3qRlPQzfhFNe641SrynFHYG0nQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/engine-oniguruma@4.4.3':
+    resolution: {integrity: sha512-EcOQkxdxGQrc1Row/cC2c96/v1dbZqGnEVu1qTuT/MJmp6+cXCvQussowVmCv5Tqr3KuY3c7IbM6HTW3LJ1k9w==}
+    engines: {node: '>=20'}
+
+  '@shikijs/langs@4.4.3':
+    resolution: {integrity: sha512-ePic0yfAJGOF83D5wBHK/00EjK65oahBYxFk5epgq33WRv7X9UuxLEV8PtR0szC0z8dl7INIpIodB99JRFlR+A==}
+    engines: {node: '>=20'}
+
+  '@shikijs/primitive@4.4.3':
+    resolution: {integrity: sha512-m0wBeLDQDeIxRdUmrCPdQqfuUamDwRL5isCfYbguKD6NiaKpVbsv+3J81DyIKgNW5h4WAIIr8T4EkgQrBBxvaQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/themes@4.4.3':
+    resolution: {integrity: sha512-w8UHjeUnIR965KMWJHUPXOc2mNJUnK3vpVLYLvw5IYU2mnTTJ89E24OrJDBNiJDQ0qzb0tc4l7mrIXx5cFeIyw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/types@4.4.3':
+    resolution: {integrity: sha512-UEJxmRR++MAGR6hugn0vgVS2W/6lWAts84FFSrnlH9sP0LNol7E5+NQ792pH8liWUhyMyjhTgSUH3k7iD7tc5g==}
+    engines: {node: '>=20'}
+
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@sxzz/popperjs-es@2.11.8':
+    resolution: {integrity: sha512-wOwESXvvED3S8xBmcPWHs2dUuzrE4XiZeFu7e1hROIJkm02a49N120pmOXxY33sBb6hArItm5W5tcg1cBtV+HQ==}
+
+  '@transloadit/prettier-bytes@0.3.5':
+    resolution: {integrity: sha512-xF4A3d/ZyX2LJWeQZREZQw+qFX4TGQ8bGVP97OLRt6sPO6T0TNHBFTuRHOJh7RNmYOBmQ9MHxpolD9bXihpuVA==}
+
+  '@tybys/wasm-util@0.10.3':
+    resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
+
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
+  '@types/estree@1.0.9':
+    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
+
+  '@types/event-emitter@0.3.5':
+    resolution: {integrity: sha512-zx2/Gg0Eg7gwEiOIIh5w9TrhKKTeQh7CPCOPNc0el4pLSwzebA8SmnHwZs2dWlLONvyulykSwGSQxQHLhjGLvQ==}
+
+  '@types/hast@3.0.5':
+    resolution: {integrity: sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==}
+
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.25':
+    resolution: {integrity: sha512-+K1NIO8I+F9/wNulfVvu23QYd0Pe9/OCqRrim4NoYIf1VoEDL90Ve4ClzpyqBLc7NpGGWRvYNCKZ1BE/Jpf8dQ==}
+
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/node@26.1.1':
+    resolution: {integrity: sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw==}
+
+  '@types/nprogress@0.2.3':
+    resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
+
+  '@types/retry@0.12.2':
+    resolution: {integrity: sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
+  '@ungap/structured-clone@1.4.0':
+    resolution: {integrity: sha512-1mEZtMKPM09vDmQt5y7YvmN2+DFTP7Tg0EWXdic8/C6VRnpb33e4ghisCIE3WZjsE2N8mf+QV1Zqh7ZFYLWInQ==}
+
+  '@unocss/cli@66.10.1':
+    resolution: {integrity: sha512-rWsCIr0xKtaaIoOlmdeUcTnFf6bksAb7qgL1j+N3TGQ+HlT6U9E0FZ2nV7Rnr1CwcxKvbwQOsxJUXIGDo/r7BA==}
+    hasBin: true
+
+  '@unocss/config@66.10.1':
+    resolution: {integrity: sha512-dLiJnQHbocFyTXkVhOl8IxpAApOWAeoWAmTgx0JUEyXKr93N0aoHESq2V626NfPNTps9aYE8lvyhcG/P2vkf7w==}
+
+  '@unocss/core@66.10.1':
+    resolution: {integrity: sha512-kPDmL/g26gBhh4jnu99n0lg+f42+24s8ssXNvwEYEX8indWCPs5gD9HS5L08BHcOsiawmntYWtR3c4D6ql0e9w==}
+
+  '@unocss/extractor-arbitrary-variants@66.10.1':
+    resolution: {integrity: sha512-hrfEaF22mN1M/aExZtlg/va0gFuu9Qo20MyErzn6yONJzNtWGptzNhXHFsXp6Fb5eI14C/XfEcD4eMp6MSo9+g==}
+
+  '@unocss/inspector@66.10.1':
+    resolution: {integrity: sha512-EMWaUaN0TwP3I0f5ykDOUw0WB1jhW+aB5wc48UFpF7aJyIBnt+Hl8/lMg2BfEgrCnjTTBbzzsJA+TX0qKUO6rg==}
+
+  '@unocss/preset-attributify@66.10.1':
+    resolution: {integrity: sha512-BiJQ3mX/EAnFMTcFdUEbMvPiDERl/FTGLjtZrlhyG8ut8jYfYKmkZGjq9MPz9bIpE0xdfgD92jcbxcsKFsL1Zw==}
+
+  '@unocss/preset-icons@66.10.1':
+    resolution: {integrity: sha512-I+fpu2WKODytHHOlwYMBb616Y0n0V1lLoFnBRNqoM6l9B8DDPg1D8Rsi0YlDK2g07TBQis8yRhC0P+zPZt3d1Q==}
+
+  '@unocss/preset-mini@66.10.1':
+    resolution: {integrity: sha512-1X52DckWsbkdjX68w+rWGCJBWrQECDGfgpfkJEUS8lmBDJent7peFfOsy9/54sTmwgLLsXpS2ZViVl+RK5TwaQ==}
+
+  '@unocss/preset-tagify@66.10.1':
+    resolution: {integrity: sha512-VXEVLy0BR9TjCKwrv+TM9FzWIodkcSFeNyVA/ISDVZGjq/Fi+HyC47mkaInI5fiNlSWRzQtKR1wvkYQxS2F1Sg==}
+
+  '@unocss/preset-typography@66.10.1':
+    resolution: {integrity: sha512-HNsKl8P11VenFPgHZPrzJTyHpeBJe/xloD61n0sBRdsoDxBO8L+JbsM5RfYigWmlNDDmlq5biIx4lzehoKIRrQ==}
+
+  '@unocss/preset-uno@66.10.1':
+    resolution: {integrity: sha512-8UO/xdysBNz9XZpB2W1x5AK7KYHFFpD9rdoYr10FjscZ4DIlxp6DPhdsu7QITwajfeCNF2VXafXReYNyrdEEFg==}
+
+  '@unocss/preset-web-fonts@66.10.1':
+    resolution: {integrity: sha512-rl80dnjL1i7O6+nkTuEcx4AzlJ+p93FCU6tvP7b55v1N7IESxONw6lJhQiafPEwM60Typ7o0rCwnU7B8Yvi3yA==}
+
+  '@unocss/preset-wind3@66.10.1':
+    resolution: {integrity: sha512-LV5b+xZoONFfzCkoEiA8TrsPRHZUkRU8egCDXm57kgVE2PacynwFzK7mIFuYPzyAxJ3nGw4mExjRSLg9n5LK1Q==}
+
+  '@unocss/preset-wind4@66.10.1':
+    resolution: {integrity: sha512-c9unFTgfctd2TuuwIRbDHdIFLigbWp1GcEHKV7uTic/jq1t051Uil6byu5d4d6Qg2K88AD1NbK1m0+FWdVebcg==}
+
+  '@unocss/preset-wind@66.10.1':
+    resolution: {integrity: sha512-C3AZN5tZCdGISs8De0JSLQeNych9JZ8QL1LEdubjZ1PxDkynGCAY5fid5QpUxU5FeUwnFftsO9Sp3Hoj7rL1VA==}
+
+  '@unocss/rollup@66.10.1':
+    resolution: {integrity: sha512-fA97Hdm91zp3RRYhs33ubWi/hxEiYiSibRpk1k7h9fbmJXnOwRpJQggwX118VEUjWQjooE+q+6gp9oSWxdbqeQ==}
+    peerDependencies:
+      rolldown: ^1.0.0
+      rollup: ^4.0.0
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+
+  '@unocss/rule-utils@66.10.1':
+    resolution: {integrity: sha512-1VcGBOP4Y5Qaog81tHU0zj22B9df9yQKQRMN8ks1KTBOcfUdlNAW27SYx6mp6n3Do7FJFLi5eBs1/U8HCA/2/A==}
+
+  '@unocss/transformer-attributify-jsx@66.10.1':
+    resolution: {integrity: sha512-7sbS/OK1nLYfYqGbsCoXKELjPBulYDh7nZFbdvAiyNDTtJKiAJ1RNUmPF0mCw68255AMncxFEVtMWfXquHt0GQ==}
+
+  '@unocss/transformer-compile-class@66.10.1':
+    resolution: {integrity: sha512-cc4Rndvo3/UbaXbrYc3Fq6XjeGsdBRit6XnkxQnJ/UmP6JcC4tS93N2JiMmiz/reOcc/UwCENHB8VHTwqy4EUA==}
+
+  '@unocss/transformer-directives@66.10.1':
+    resolution: {integrity: sha512-3w7bLb1G5CnNMEGuwuR889aoLBm4/aOXzqBFC4s6A9yRb3jfmdq1qs804tjq4npbNTfMuKztPzenqC1UMtg6iA==}
+
+  '@unocss/transformer-variant-group@66.10.1':
+    resolution: {integrity: sha512-5b/Y2wZvF2A+xfyO1DJisVnzwlmYIjlYU70PrVZzDSrvQx5nuiM+OIm9Pp8+RI5BrbAcPsTYxkZe2YgeTdN9Pg==}
+
+  '@unocss/vite@66.10.1':
+    resolution: {integrity: sha512-r9xzRwbEGbez1uUmConCfKpEWKsvjF1xUePz8twk0mS4TH2zlhnwhDy/XCV6Ia4lPy+n7oRvei5AXhtHx35rXg==}
+    peerDependencies:
+      vite: ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0 || ^8.0.0-0
+
+  '@uppy/companion-client@5.1.1':
+    resolution: {integrity: sha512-DzrOWTbIZHvtgAFXBMYHk2wD27NjpBSVhY2tEiEIUhPd2CxbFRZjHM/N3HOt3VwZEAP471QWFLlJRWPcIY3A2Q==}
+    peerDependencies:
+      '@uppy/core': ^5.1.1
+
+  '@uppy/core@5.2.0':
+    resolution: {integrity: sha512-uvfNyz4cnaplt7LYJmEZHuqOuav0tKp4a9WKJIaH6iIj7XiqYvS2J5SEByexAlUFlzefOAyjzj4Ja2dd/8aMrw==}
+
+  '@uppy/store-default@5.0.0':
+    resolution: {integrity: sha512-hQtCSQ1yGiaval/wVYUWquYGDJ+bpQ7e4FhUUAsRQz1x1K+o7NBtjfp63O9I4Ks1WRoKunpkarZ+as09l02cPw==}
+
+  '@uppy/utils@7.2.0':
+    resolution: {integrity: sha512-6lC246qszMv6bTyl/+QyHwrudgeguWkA94ME1wHn+a6uRAvmtAEaUManIfGqTJfoKvWAiCJqdJPl5xRJjhAloQ==}
+
+  '@uppy/xhr-upload@5.2.0':
+    resolution: {integrity: sha512-3LV/X5Of6BINnKplP+CwUJ0a4/7cRFfzxwGyXnW+uCrNQHoo09dttcz3begWHejGvzenQHuUnMO3Fxyc71Pryg==}
+    peerDependencies:
+      '@uppy/core': ^5.2.0
+
+  '@vitejs/devtools-kit@0.7.3':
+    resolution: {integrity: sha512-MsYO9EJ3fzanvS4FJ6C9Dh2iiR4ynhcp5C3lJEKHRZBr8wOyTBSbCP1ic81KHnm3Q5GbGt4lKBHTq7PZfpdmbg==}
+    peerDependencies:
+      vite: '*'
+
+  '@vitejs/plugin-vue@6.0.8':
+    resolution: {integrity: sha512-0ZjgOg7oO6farnNGup7yvoM/YXZV84OZxHAwtflItNa/6zzQyVb5LNxyea3FEKEX2XlagIKzrlH7wwxkKgtiew==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+      vue: ^3.2.25
+
+  '@vitest/expect@4.1.11':
+    resolution: {integrity: sha512-VX2x5vNJXET47KAFzwERI+KRMtTTCSWTfSMKsW7JsUsXV4psq++e3DvZpuTDOpHcxytiDs6p2nhVb2tVDiiUYw==}
+
+  '@vitest/mocker@4.1.11':
+    resolution: {integrity: sha512-2XJVD55d1o5AZous5CCGKS74g/riOj9odEt2bQpCVZeblHyHdnMeFl4jl0XjU21stf4mbjUkew2eXQZt65g5CQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@4.1.11':
+    resolution: {integrity: sha512-yiZzPbGTS9Sr/JpFl8zHrcIkAofNbFV6k21vIgQN/cY/oxZeXhJv5sc/MBJ5jFKWmWs+oJHw0UXLZjmf931+Vw==}
+
+  '@vitest/runner@4.1.11':
+    resolution: {integrity: sha512-LztvUgdwMNJMIkj3hQnnxiC2Xy1zNxq928W/xhjCLaNCzqTZOudjwbQf6v9IntZGPw132i2Lq2rgTRZHD3JHNw==}
+
+  '@vitest/snapshot@4.1.11':
+    resolution: {integrity: sha512-pN7ikn1ON7h8ee4gIAp4AzyK+zBtJPzVbqOgu5LCEh4VaJVbPQcgYQYJIMGQPXVeJJq1fnfazis7a5pFNPahog==}
+
+  '@vitest/spy@4.1.11':
+    resolution: {integrity: sha512-apNa/prQy2qCeywhnixOHPRCgGNhvg7T4Dapfl1GahLp/R+uhBm5cPyFoNVyqsNd2h1nJxL6BqqdIjiABL60YA==}
+
+  '@vitest/utils@4.1.11':
+    resolution: {integrity: sha512-zTCVGpyFsGWBhllOyKlTw/vnr6D9qxsfSDyfbyZmTyjHw5N/VuvzHpHoQjm2ZJzn4RJgx5w4r7V0er69CmLgPQ==}
+
+  '@volar/language-core@2.4.28':
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
+
+  '@volar/source-map@2.4.28':
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
+
+  '@volar/typescript@2.4.28':
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
+
+  '@vue-macros/common@3.1.4':
+    resolution: {integrity: sha512-/5Fv+6DgIcM9ajY05ZmKBv+LMX1M9A0X+IUwDRVdt67ciw8OV9bvG2r34p3RiEadlsQybjhKPRKNXDC8Bp23cw==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.2.25
+    peerDependenciesMeta:
+      vue:
+        optional: true
+
+  '@vue/compiler-core@3.5.42':
+    resolution: {integrity: sha512-2Ye1ilMtKXxl8qZUrQ5j0CdgenFp/HFQmta6rfRyfEsTG69L6Wk+tWuNoHYHMx9E8tF2Slvdg1FuwDvAXdy1LQ==}
+
+  '@vue/compiler-dom@3.5.42':
+    resolution: {integrity: sha512-qbhQZEFmycr+ni/qyuccS4sucNN7VAbDfbkvNxWOX2VfgFm90MNs3/UhRNKoPMEIVn0F8gdlYjLPvqxHwHeQOA==}
+
+  '@vue/compiler-sfc@3.5.42':
+    resolution: {integrity: sha512-fkCAFB4okcAANGMThboWnScp/gzWjU0ZSkVnjTIiplmMDq2uq0tIB3j+xVu4rhv5rvOgBySCysudmbMd6xRRqw==}
+
+  '@vue/compiler-ssr@3.5.42':
+    resolution: {integrity: sha512-xmLk3wLkbizPAiLyomjgFFosf2ys9b5Ghb+oh/k2tnvipNz8OFrQOiTcWCzyK7MpBp9KkyGtfvgfLUivbmuGYA==}
+
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
+  '@vue/devtools-api@8.2.1':
+    resolution: {integrity: sha512-6u4vXBlIBAC1wMplIZgpyPn7uh/s4Bf6F5bMzvLv+EdJ0aHs/+4B7Ygv864EStQSjRbsRzTko/kUG1A1IejQ3A==}
+
+  '@vue/devtools-kit@8.2.1':
+    resolution: {integrity: sha512-FIGIuq3AWReEpbAHY/cRGeHDfI0qOb8OCQ3YjbEAX04uaxIDbGc9rhkbVcG7rnfHPXE3RsU5KrWOu9V/okd8AQ==}
+
+  '@vue/devtools-shared@8.2.1':
+    resolution: {integrity: sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==}
+
+  '@vue/language-core@3.3.11':
+    resolution: {integrity: sha512-QJmpliwAVpC/OxubIByPAhNzsQPRc8/gxlN2qnVzVfIMjMDz/9RnXRFoetjz5yEgXVXyp4LqhXq3V53PjmNzFw==}
+
+  '@vue/reactivity@3.5.42':
+    resolution: {integrity: sha512-TzNNfKpb7hDxbQltwAut8VDQA5YP+BuRlxntHUuRjyKwlMvmAPbs3unhCvieijifY6vFfVBwsS7wG/C7uq+bEQ==}
+
+  '@vue/runtime-core@3.5.42':
+    resolution: {integrity: sha512-9uACtuHs7vJGkm5Bp3xu4xRDLFTIYy5DgxpToVjqGIAhAEKwQfsaLvKINhM6nFVp6bZPRFGdDqd1g52MqKsotA==}
+
+  '@vue/runtime-dom@3.5.42':
+    resolution: {integrity: sha512-rsCmhiWLaRxGltLwhlCWyYkFn7WAbKRh0q17eZ1A6Dq6eqc2ACQ61IIryxz0LrsvCzHSilLA9JHovVwM8CNE2g==}
+
+  '@vue/server-renderer@3.5.42':
+    resolution: {integrity: sha512-2++5dUyYS4gvo7xQXSECUDhB7TS0aOl5SeVfC5qSq1Jgfhjvegw1zqhwTIR3imZ+QYPJQw9gfcFvXGAjGZ7ajQ==}
+
+  '@vue/shared@3.5.42':
+    resolution: {integrity: sha512-2rPxex1jQf4jvl9MOHl6YaXCPcrNqz/FstMOEh3QWY+/OME9nQTvl9WYeCwhW7AFjaR0SnngZGlp/wkR6rkI6g==}
+
+  '@vueuse/core@14.4.0':
+    resolution: {integrity: sha512-X4WHz1HlCzCBoYXesUkifzzWBAcZgXG8Fi5iNPQg/epdzOB3gu8Fawj3hvuwYR1nGcXGnvxwYYcUC/71++svtQ==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vueuse/metadata@14.4.0':
+    resolution: {integrity: sha512-swx/255R6JyHZFJhx845iz5CRWDZdCfvkZOpACWc5+c5WHcG24mv8gUT1WIdFQaHt6dq79rvILd9QnCWiyVm9g==}
+
+  '@vueuse/shared@14.4.0':
+    resolution: {integrity: sha512-JRgY90Sz8DDtPMsaDflvPMp9xYk69JZAmbuDvAquUVXKr2gEjqtzGNTTthLfckH0BzBqvnu31gb4a8TGLRe79g==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vxe-ui/core@4.4.21':
+    resolution: {integrity: sha512-xaKGhQxrSU3G7+cQbxMBSzNXiWliRDgtR5GmD/FD9f5tl8e9SuZLe2SfODjItp6oBvBkKI2TXBZiCx502WftyA==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  '@wangeditor-next/basic-modules@6.4.1':
+    resolution: {integrity: sha512-a7/0/Qw+2W5Mk+V24WFr9KtgxH6VA43eCcVuZCmLNw3YRiVMmVBncm8OahHPLeyq+IuDmJqwNptwcRJAjE/n2Q==}
+    peerDependencies:
+      '@wangeditor-next/core': ^6.4.1
+      dom7: ^3.0.0 || ^4.0.0
+      lodash.throttle: ^4.1.1
+      nanoid: ^5.0.0
+      slate: ^0.124.0
+      snabbdom: ^3.6.0
+
+  '@wangeditor-next/code-highlight@6.4.1':
+    resolution: {integrity: sha512-02hEl1j/8pqKjQ6fbMnAfyLLKdIgDhZkYWMTERgWRGMRJqTj6sbv+OYUDWfLVaMrKwqom6/OSYqZKWLxdA8XzQ==}
+    peerDependencies:
+      '@wangeditor-next/core': ^6.4.1
+      dom7: ^3.0.0 || ^4.0.0
+      slate: ^0.124.0
+      snabbdom: ^3.6.0
+
+  '@wangeditor-next/core@6.4.1':
+    resolution: {integrity: sha512-V61N0j7M8PL3vfpV4PUvZrS9faJDy7AQgXJYaawabjEF+o0eHhniIkOfUQnUxSYWD4aKW+7FzKBvEN6vrri6QQ==}
+    peerDependencies:
+      '@uppy/core': ^2.1.1 || ^5.0.0
+      '@uppy/xhr-upload': ^2.0.3 || ^5.0.0
+      dom7: ^3.0.0 || ^4.0.0
+      is-hotkey: ^0.2.0
+      lodash.camelcase: ^4.3.0
+      lodash.clonedeep: ^4.5.0
+      lodash.debounce: ^4.0.8
+      lodash.foreach: ^4.5.0
+      lodash.throttle: ^4.1.1
+      lodash.toarray: ^4.4.0
+      nanoid: ^5.0.0
+      slate: ^0.124.0
+      snabbdom: ^3.6.0
+
+  '@wangeditor-next/editor-for-vue@6.4.1':
+    resolution: {integrity: sha512-PD89sxsmsEQ/lVizFXO+KOjldpZVF9Spf67nryt0J3fModwCfG4vT6Med1OW4fPFJCIe8FJ9Sn0dHcYjXyAH0w==}
+    peerDependencies:
+      '@wangeditor-next/editor': ^6.4.1
+      vue: ^3.0.5
+
+  '@wangeditor-next/editor@6.4.1':
+    resolution: {integrity: sha512-kgurPViqVAmawzexdBBVq0otdlIJNblxOCk0451Qgk+syB0DFcD2c+TVMU7NQFTCjoLYr6nX8j6fTfx88VXoUA==}
+
+  '@wangeditor-next/list-module@6.4.1':
+    resolution: {integrity: sha512-8m2GCW1Id6NGSdsMTHcyaoUd18Wyq4G9cuoMG0paRErXSwsEjpT6zOoJqWlVEMAjaQvLqFlNGWzGTjK2Cmrk3w==}
+    peerDependencies:
+      '@wangeditor-next/core': ^6.4.1
+      dom7: ^3.0.0 || ^4.0.0
+      slate: ^0.124.0
+      snabbdom: ^3.6.0
+
+  '@wangeditor-next/table-module@6.4.1':
+    resolution: {integrity: sha512-pWLm+BI/LJzj5JZslu6IRq5RYIj4L3Wakxuw/IdT3DSh4gVCgQs0EvLPbfYeDCQ7oT6zSzGzl5R3WLSBtsenLQ==}
+    peerDependencies:
+      '@wangeditor-next/core': ^6.4.1
+      dom7: ^3.0.0 || ^4.0.0
+      lodash.debounce: ^4.0.8
+      lodash.throttle: ^4.1.1
+      nanoid: ^5.0.0
+      slate: ^0.124.0
+      snabbdom: ^3.6.0
+
+  '@wangeditor-next/upload-image-module@6.4.1':
+    resolution: {integrity: sha512-2ny//hrTyHR/BodzzZOplJXIyz9fYrSDelgIaQyhdImeNNu9mguvIIZVRIt2gEJs2yG0vSHKVCNUEJI7sqVDbw==}
+    peerDependencies:
+      '@uppy/core': ^2.0.3 || ^5.0.0
+      '@uppy/xhr-upload': ^2.0.3 || ^5.0.0
+      '@wangeditor-next/basic-modules': ^6.4.1
+      '@wangeditor-next/core': ^6.4.1
+      dom7: ^3.0.0 || ^4.0.0
+      lodash.foreach: ^4.5.0
+      slate: ^0.124.0
+      snabbdom: ^3.6.0
+
+  '@wangeditor-next/video-module@6.4.1':
+    resolution: {integrity: sha512-XjPAZbdO7wInZO1ZXXOw+L5SqY5yInI4H2gvb8+7rgNU5Ar2YXL3IE2A3+aW3c8aaSXwvIJfKKSuLZZKeZN22A==}
+    peerDependencies:
+      '@uppy/core': ^2.1.4 || ^5.0.0
+      '@uppy/xhr-upload': ^2.0.7 || ^5.0.0
+      '@wangeditor-next/core': ^6.4.1
+      dom7: ^3.0.0 || ^4.0.0
+      nanoid: ^5.0.0
+      slate: ^0.124.0
+      snabbdom: ^3.6.0
+
+  acorn@8.17.0:
+    resolution: {integrity: sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  acorn@8.18.0:
+    resolution: {integrity: sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
+  alien-signals@3.2.1:
+    resolution: {integrity: sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==}
+
+  animate.css@4.1.1:
+    resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==}
+
+  anynum@1.0.1:
+    resolution: {integrity: sha512-N6//FLET/tXYNM/F6ABca1oH6fWB+KlTt909Le28WMDBk8oaT4vY17DCrwg2MvmuqUKt3Ni4N5dGJ/EoBgcO6A==}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  ast-kit@2.2.0:
+    resolution: {integrity: sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==}
+    engines: {node: '>=20.19.0'}
+
+  ast-walker-scope@0.9.0:
+    resolution: {integrity: sha512-IJdzo2vLiElBxKzwS36VsCue/62d6IdWjnPB2v3nuPKeWGynp6FF/CYoLa5i/3jXH/z97ZDdsXz6abpgM6w07A==}
+    engines: {node: '>=20.19.0'}
+
+  async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  autoprefixer@10.5.5:
+    resolution: {integrity: sha512-uiRYvQYe/nNSzBJ7OUnd2/TZVsAdob3blml44teEpee9Cc1f4rGZFewO+JT3Wo8mgFOSzNqes4FHZn/Qz8WOuw==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  await-to-js@3.0.0:
+    resolution: {integrity: sha512-zJAaP9zxTcvTHRlejau3ZOY4V7SRpiByf3/dxx2uyKxxor19tpmpV2QRsTKikckwhaPmr2dVpxxMr7jOCYVp5g==}
+    engines: {node: '>=6.0.0'}
+
+  axios@1.20.0:
+    resolution: {integrity: sha512-r8aOh8j9cGKpgQAqpzrUHnSIc6a59Y3Xf/cv8sy1DrHCkZHzQGEuoq1tARk6qSyDdtQGSDgpb9kFlruzPvrgwg==}
+
+  baseline-browser-mapping@2.11.21:
+    resolution: {integrity: sha512-uh8vpY/1/YyFkunIDFH/12p7/7VdPKA1hejMVEbdkEaWnUz0Hesvx5EbiU6XxjyHZIOju+ZMbQJkRh+es3/spQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  birpc@2.9.0:
+    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
+
+  birpc@4.2.0:
+    resolution: {integrity: sha512-KxgKcZPfrtzJDDALHPguGpGJUrzdgpymyiQQgzFjWreHMOpWrnFNVREr5J48x2DBh8ZVioscrV1SBkDipGiX+Q==}
+
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
+  browserslist@4.28.9:
+    resolution: {integrity: sha512-EWazOblFYUvlGZcfGhPUPmYh3nikUxBVb+y9MJun5f3hBi812X+8MSQTujLBtgK3cf51fJWbWfOjyeO954d+Eg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  cac@7.0.0:
+    resolution: {integrity: sha512-tixWYgm5ZoOD+3g6UTea91eow5z6AAHaho3g0V9CNSNb45gM8SmflpAc+GRd1InC4AqN/07Unrgp56Y94N9hJQ==}
+    engines: {node: '>=20.19.0'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  caniuse-lite@1.0.30001810:
+    resolution: {integrity: sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==}
+
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  chokidar@5.0.0:
+    resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
+    engines: {node: '>= 20.19.0'}
+
+  citty@0.2.2:
+    resolution: {integrity: sha512-+6vJA3L98yv+IdfKGZHBNiGW5KHn22e/JwID0Strsz8h4S/csAu/OuICwxrg44k5MRiZHWIo8XXuJgQTriRP4w==}
+
+  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'}
+
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
+  compute-scroll-into-view@3.1.1:
+    resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
+
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
+
+  confbox@0.3.1:
+    resolution: {integrity: sha512-cKUSoKa8YxFZZSmraVi7onONx3amu77ngK3kGpsYHDH7drPwCRkQE1RYMPlLRrMtnciRj274XNRxcHxnKmDSnA==}
+
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  crossws@0.4.12:
+    resolution: {integrity: sha512-aypfsr6t0uNvkqaZc6zvBfXzC6pLI0/sIulpkV6RwCVtZqG5ebBzv4weImKK0VNCj91Wl9F5j7p5WU4MNrybng==}
+    peerDependencies:
+      srvx: '>=0.11.5'
+    peerDependenciesMeta:
+      srvx:
+        optional: true
+
+  css-select@6.0.0:
+    resolution: {integrity: sha512-rZZVSLle8v0+EY8QAkDWrKhpgt6SA5OtHsgBnsj6ZaLb5dmDVOWUDtQitd9ydxxvEjhewNudS6eTVU7uOyzvXw==}
+
+  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.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css-what@7.0.0:
+    resolution: {integrity: sha512-wD5oz5xibMOPHzy13CyGmogB3phdvcDaB5t0W/Nr5Z2O/agcB8YwOz6e2Lsp10pNDzBoDO9nVa3RGs/2BttpHQ==}
+    engines: {node: '>= 6'}
+
+  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==}
+
+  d@1.0.2:
+    resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
+    engines: {node: '>=0.12'}
+
+  dayjs@1.11.23:
+    resolution: {integrity: sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  defu@6.1.7:
+    resolution: {integrity: sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  devframe@0.9.18:
+    resolution: {integrity: sha512-SjvL9/MiqaG3m2bpfAb8fMsX6ALcyqFNIZ3VYjhZ/BZxSqkTknt3U6YcQTEAZOpFvGv+MVk6OeWkRW0IhzVxAg==}
+    hasBin: true
+    peerDependencies:
+      '@modelcontextprotocol/client': ^2.0.0
+      cac: ^7.0.0
+    peerDependenciesMeta:
+      '@modelcontextprotocol/client':
+        optional: true
+      cac:
+        optional: true
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  dom-zindex@1.0.7:
+    resolution: {integrity: sha512-cKU/h8v8IPBgdZOTPbPmq3Ib+Ac5C+kKoh9I4LbGR9BM3GwbmB16KYWKJcj5M2BavnA66EbgYzxYDLd1IytnlQ==}
+
+  dom7@4.0.6:
+    resolution: {integrity: sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  echarts@6.1.0:
+    resolution: {integrity: sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==}
+
+  electron-to-chromium@1.5.425:
+    resolution: {integrity: sha512-QvPtl41EUOnuT1HBvMKgxXRIaHNcagBPs50u7VULzhZXaGfqTbZyE16LQsctZ/RQHlGu+FOWeDTR4mY6YbeF1g==}
+
+  element-plus@2.14.5:
+    resolution: {integrity: sha512-bghYy/S+qg87enHPXELirhEdDqsVAUGcGpbGIeG8dz0kwpIkGz7gYsifulBshXX74iRtHib85XWQj0uSH2A1Yg==}
+    peerDependencies:
+      vue: ^3.3.7
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
+
+  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@2.3.2:
+    resolution: {integrity: sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==}
+
+  es-object-atoms@1.1.2:
+    resolution: {integrity: sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es5-ext@0.10.64:
+    resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
+    engines: {node: '>=0.10'}
+
+  es6-iterator@2.0.3:
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
+
+  es6-symbol@3.1.4:
+    resolution: {integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==}
+    engines: {node: '>=0.12'}
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  esniff@2.0.1:
+    resolution: {integrity: sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==}
+    engines: {node: '>=0.10'}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  event-emitter@0.3.5:
+    resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
+
+  expect-type@1.4.0:
+    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
+    engines: {node: '>=12.0.0'}
+
+  exsolve@1.1.0:
+    resolution: {integrity: sha512-D+42+T12DdIlJM3uepa55qGiL3sYdLBOxIl2ifQCzCHz4c7eiolaHsi3BIqEr7JxBzxv2pYZQX9kw16ziMcEmw==}
+
+  exsolve@1.1.1:
+    resolution: {integrity: sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==}
+
+  ext@1.7.0:
+    resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
+
+  fast-xml-builder@1.3.1:
+    resolution: {integrity: sha512-pIM/1n3ntFXKYrUZwW7QCK0gAW7XY+wzj1YMIV3tLDvPj/V+zTGJK5e3/4WJfwj0qWw2ElNXiTixda/R+3YSug==}
+
+  fast-xml-parser@5.11.1:
+    resolution: {integrity: sha512-TBw6K/fxoQGGjCmZDw9w/ZwP3uDcnTM4YH/g+PFRWr8sbe5idXtxNN6vITh4+1ruCZaho6uBFurElsA7F0zzgw==}
+    hasBin: true
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  follow-redirects@1.16.0:
+    resolution: {integrity: sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  form-data@4.0.6:
+    resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
+    engines: {node: '>= 6'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  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==}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  h3@2.0.1-rc.31:
+    resolution: {integrity: sha512-AG7qZzF99a0BSYoXT3evJgIhwSIUKow7R+hwkLRZS06WJ9nbSb7QXUDgs1ByBjp6svTvl++N/GKA7I9YPz9cQQ==}
+    engines: {node: '>=20.11.1'}
+    hasBin: true
+    peerDependencies:
+      crossws: ^0.4.12
+      ocache: '>=0.3.0'
+    peerDependenciesMeta:
+      crossws:
+        optional: true
+      ocache:
+        optional: true
+
+  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'}
+
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
+    engines: {node: '>= 0.4'}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  highlight.js@11.12.0:
+    resolution: {integrity: sha512-nbfWpyRMcMrPMmDwJB+dhX/eiaPKtc2RB+0QZskqJ3WjRA/FDS0e9hZrx8EC/lbEv8gXy98FcDbNa/dspAaJMg==}
+    engines: {node: '>=12.0.0'}
+
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
+  i18next@23.16.8:
+    resolution: {integrity: sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==}
+
+  image-conversion@2.1.1:
+    resolution: {integrity: sha512-hnMOmP7q2jxA+52FZ+wHNhg3fdFRlgfngsQH2JQHEQkafY7tj/8F15e6Rv/RxDegc872jvyaRHwMbkTZK1Cjbg==}
+
+  immutable@5.1.9:
+    resolution: {integrity: sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==}
+
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-hotkey@0.2.0:
+    resolution: {integrity: sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==}
+
+  is-network-error@1.3.2:
+    resolution: {integrity: sha512-PhBY86zaxNZUuWP6h13Vu5oFe0XY6/UlKzQnYFELzGVHygP3MxmvTfYSG7GN3aIab/iWudSMgjSnG9Dq+nHrgA==}
+    engines: {node: '>=16'}
+
+  is-unsafe@2.0.2:
+    resolution: {integrity: sha512-HgbIHPBH0KHHCcjLfGsCvhtPTVxjaAZlXjwdz7/GQC40SjSe4sfQsar8J5VFo8JOSbarkpV0OLG95bbaNd9aAQ==}
+
+  is-url@1.2.4:
+    resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
+
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+
+  js-tokens@10.0.0:
+    resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
+
+  jsencrypt@3.5.4:
+    resolution: {integrity: sha512-kNjfYEMNASxrDGsmcSQh/rUTmcoRfSUkxnAz+MMywM8jtGu+fFEZ3nJjHM58zscVnwR0fYmG9sGkTDjqUdpiwA==}
+
+  lightningcss-android-arm64@1.33.0:
+    resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.33.0:
+    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.33.0:
+    resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.33.0:
+    resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.33.0:
+    resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.33.0:
+    resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.33.0:
+    resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.33.0:
+    resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.33.0:
+    resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.33.0:
+    resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.33.0:
+    resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
+    engines: {node: '>= 12.0.0'}
+
+  local-pkg@1.2.1:
+    resolution: {integrity: sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==}
+    engines: {node: '>=14'}
+
+  lodash-es@4.18.1:
+    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
+
+  lodash-unified@1.0.3:
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
+    peerDependencies:
+      '@types/lodash-es': '*'
+      lodash: '*'
+      lodash-es: '*'
+
+  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.foreach@4.5.0:
+    resolution: {integrity: sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==}
+
+  lodash.throttle@4.1.1:
+    resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
+
+  lodash.toarray@4.4.0:
+    resolution: {integrity: sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==}
+
+  lodash@4.18.1:
+    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
+
+  magic-regexp@0.10.0:
+    resolution: {integrity: sha512-Uly1Bu4lO1hwHUW0CQeSWuRtzCMNO00CmXtS8N6fyvB3B979GOEEeAkiTUDsmbYLAbvpUS/Kt5c4ibosAzVyVg==}
+
+  magic-string-ast@1.0.3:
+    resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
+    engines: {node: '>=20.19.0'}
+
+  magic-string@0.26.7:
+    resolution: {integrity: sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==}
+    engines: {node: '>=12'}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  magic-string@1.3.1:
+    resolution: {integrity: sha512-rm91zr2Ou+XueDTohjQQjdQEcYM6zVi8KVUCG8Ec3vHwUEKrhSdCNyfuIywkA6hcCAteIn0ZOtAHA6eGpiX+Pg==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
+  memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-match@1.0.2:
+    resolution: {integrity: sha512-VXp/ugGDVh3eCLOBCiHZMYWQaTNUHv2IJrut+yXA6+JbLPXHglHwfS/5A5L0ll+jkCY7fIzRJcH6OIunF+c6Cg==}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mlly@1.8.2:
+    resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
+
+  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==}
+
+  namespace-emitter@2.0.1:
+    resolution: {integrity: sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g==}
+
+  nanoid@3.3.18:
+    resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanoid@5.1.16:
+    resolution: {integrity: sha512-kVrnsrJqMR8+oLJnGEmSWw9BivK5mt7H3FZatVRjrc5wGqFYuBxX1yG7+A7Gi5AefkX6t/oCkizcQgpu0cY1dQ==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
+  next-tick@1.1.0:
+    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
+
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
+  node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+
+  node-releases@2.0.55:
+    resolution: {integrity: sha512-mIrE/Cw9y+9Au6dS5vDKDhQza9YvG6w+ZrS6X+ZzA7yFW/soAeaups4Qzn1bL6g5FVy8WtP79+0j82oPIbqRjQ==}
+    engines: {node: '>=18'}
+
+  normalize-wheel-es@1.2.0:
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
+
+  nostics@1.2.0:
+    resolution: {integrity: sha512-FGqEfhQjrvo1lL8KFifdTQiNwwQHJxC1jtYE1Rc54qF/jxONUNL+kC9gS1krX8Q65PgrQ5fCqH/I4NhWBvdSqg==}
+
+  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.10:
+    resolution: {integrity: sha512-W72Hrj1petq+b3Hk2aAC+9zswetlIFTnDW4s5djseZh2nYqBbyQLOtj472HwcbcWykPBUW1WpWpjOd4nK6gMRw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  obug@2.1.4:
+    resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==}
+    engines: {node: '>=12.20.0'}
+
+  obug@2.2.1:
+    resolution: {integrity: sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==}
+    engines: {node: '>=12.20.0'}
+
+  ofetch@1.5.1:
+    resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
+
+  oniguruma-parser@0.12.2:
+    resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==}
+
+  oniguruma-to-es@4.3.6:
+    resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==}
+
+  oxc-parser@0.131.0:
+    resolution: {integrity: sha512-SJ3/7ZPbgie8dr5Z9BI/M51zZbpXba+hRSG0MDzVwMW5CRQg2fjYE0jHGlLX4eeiibGgC/mzoDFKSDHwVZEHRQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-walker@0.7.0:
+    resolution: {integrity: sha512-54B4KUhrzbzc4sKvKwVYm7E2PgeROpGba0/2nlNZMqfDyca+yOor5IMb4WLGBatGDT0nkzYdYuzylg7n3YfB7A==}
+    peerDependencies:
+      oxc-parser: '>=0.98.0'
+
+  oxfmt@0.67.0:
+    resolution: {integrity: sha512-vV7sSiPsaO0mSxdoUdayipVDFPzW/UQ+hrezEHa20+Tx1dnMdZLSRHMT0PdS67FFbhd74M1n08asW21aLGeCrA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      svelte: ^5.0.0
+      vite-plus: '*'
+    peerDependenciesMeta:
+      svelte:
+        optional: true
+      vite-plus:
+        optional: true
+
+  oxlint@1.82.0:
+    resolution: {integrity: sha512-+iFM1BGw1ntYJt3QngbJmjbrGxPaKMUADOXOijpWGnYcBPq8YZnQftSS1C+pVcDYy9YxqDVJKQqQkTazTQMboQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      oxlint-tsgolint: '>=7.0.2001'
+      vite-plus: '*'
+    peerDependenciesMeta:
+      oxlint-tsgolint:
+        optional: true
+      vite-plus:
+        optional: true
+
+  p-retry@6.2.1:
+    resolution: {integrity: sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==}
+    engines: {node: '>=16.17'}
+
+  package-manager-detector@1.8.0:
+    resolution: {integrity: sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A==}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-expression-matcher@1.6.2:
+    resolution: {integrity: sha512-enSlaiat05iasnzmgNxRj8reFdj3puY2QpNgP1aPIaVfT6nn9ICuPoFlKHk8EN22HcwewshO+mN2DGbkCEOtqQ==}
+    engines: {node: '>=14.0.0'}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  perfect-debounce@2.1.0:
+    resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
+    engines: {node: '>=12'}
+
+  picomatch@4.0.7:
+    resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
+    engines: {node: '>=12'}
+
+  pinia@4.0.3:
+    resolution: {integrity: sha512-XMQqpvjgG7LMqVhhFUzKLT4KEbsYbfZZ0CZU9PgdFm1O2VKBmIkykL8+SfNhOaT7sR0wT6BEgKT0YNDYWgmVRA==}
+    peerDependencies:
+      '@vue/devtools-api': ^8.1.5
+      typescript: '>=5.6.0'
+      vue: ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.3.1:
+    resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
+
+  pkg-types@2.3.3:
+    resolution: {integrity: sha512-j/lCFdcppV0JxWpCEITdbDltBxPP6cHT+yNJ6Go2OgoSA9518X847X9z0p6LtA4Nc16+eQzCZjRrWanTGvHJ5w==}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.5.28:
+    resolution: {integrity: sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  preact@10.29.8:
+    resolution: {integrity: sha512-ej2aVZ+vZ8WO7tvlQWRM9N63A0KzF9q4mWJfDUHgYaIofWY9hu74QdnQrjoPMmZi2/nZ5gN0bJCQF49xQqx09Q==}
+    peerDependencies:
+      preact-render-to-string: '>=5'
+    peerDependenciesMeta:
+      preact-render-to-string:
+        optional: true
+
+  prismjs@1.30.0:
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
+    engines: {node: '>=6'}
+
+  property-information@7.2.0:
+    resolution: {integrity: sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==}
+
+  proxy-from-env@2.1.0:
+    resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
+    engines: {node: '>=10'}
+
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
+  quansync@1.0.0:
+    resolution: {integrity: sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==}
+
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
+  regexp-tree@0.1.27:
+    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
+    hasBin: true
+
+  retry@0.13.1:
+    resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==}
+    engines: {node: '>= 4'}
+
+  rolldown@1.2.8:
+    resolution: {integrity: sha512-Z67nTmhZe7anqnM/EjI392w5i/ANUinjip7QYsOyN37oayduxt3ksdX0hf5OOamkAd53BiIHfbfSzfUmzKFQqQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  rou3@0.9.2:
+    resolution: {integrity: sha512-3SOzvaAg8rkHrXtRjpCvCvbyO5to9oOO27Z/XqHEYXfMRVSw/qMIVdmaOk9W2lcRLtR6dlqTjo9hDeJk70QBYQ==}
+
+  sass@1.104.0:
+    resolution: {integrity: sha512-btHMApW2bgolvClhRW8AlQJzgI9lUB3pPSofBQQT+E46GWvf9o0TVQ13SYv5riWZVFyPN+JNz3TKW9XhBlc10w==}
+    engines: {node: '>=20.19.0'}
+    hasBin: true
+
+  sax@1.6.1:
+    resolution: {integrity: sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==}
+    engines: {node: '>=11.0.0'}
+
+  scroll-into-view-if-needed@3.1.0:
+    resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
+
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
+  shiki@4.4.3:
+    resolution: {integrity: sha512-Mb/GvXPHBAXdgGIcnfU5L3ldpn1XcxrGkPHwqgRx17/I2XRfqlFKk2vGkHWINn1kdXvzJZeuO3is6I9KLPFm0g==}
+    engines: {node: '>=20'}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  slate-history@0.115.0:
+    resolution: {integrity: sha512-QdUm9aVyQFz6JG4a84Z6Um+tJpZJmsh9bjXwTVTvYiN4rdKbqL6+/4HT94on1WYxe10Q4vY6mA6BCpoYxgF3tQ==}
+    peerDependencies:
+      slate: '>=0.114.3'
+
+  slate@0.124.1:
+    resolution: {integrity: sha512-ii7DwezgvbLAyKtHBIunjTR1kzbNfYLCUKLMzJELlbTZkvHzX4DzN7HKIwcakf6dPxO6AoeT/P7kHOcyTym/hA==}
+
+  snabbdom@3.6.4:
+    resolution: {integrity: sha512-VmxEfuw1/Y/eFj5VtMhYnukExpYiPkNzoo3+N3qwAOUDMl8wXgbli5ebR+j0knE3lZ/0eYskLxNcX64uy10N9w==}
+    engines: {node: '>=12.17.0'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  srvx@1.0.4:
+    resolution: {integrity: sha512-eZmYaxUfZSo7/8m8UdsHRJNmTLSCTPPom9d7a60vMmuVeZvwhbvflRR+00/CxTCjMOFa5+H8tgBeNDVZ+w7AAQ==}
+    engines: {node: '>=20.16.0'}
+    hasBin: true
+
+  ssr-window@4.0.2:
+    resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@4.2.0:
+    resolution: {integrity: sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==}
+
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  strip-literal@4.0.0:
+    resolution: {integrity: sha512-PaqAvfUZKBwc/SLmNZtHmzK+v19Z4O4eS3cKPeGvbIv/U3pnyEq4Tuw3/4v/FwfM8VQaEawsyCcOQ0P+kpwWWw==}
+
+  strnum@2.4.2:
+    resolution: {integrity: sha512-rDG3Ah4TV0k1hWvLSzkZtMmLN9+eS+h3knq4MP6A42Y3Yh5qGNnOUs1jJkoSr8FG5dsL28c7KgkIBzSEykqtuw==}
+
+  svg-icon-baker@2.1.1:
+    resolution: {integrity: sha512-3siRpbrViTQGZKshmyPZPVNplChXTusZqGNYlkm7al2nJBedB/ySLaC06y5oODBNMF4XDk3d2ZZVg7x390sDdA==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+
+  svgo@4.1.0:
+    resolution: {integrity: sha512-bkxnTg1kSU0guhIBmibA6UUhrQmPVA1XsQLN+ylCd+UWzbnLkySOcXpyk1mrl05f+pcaCx2eHb+sp6BgMZWX+Q==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@1.3.1:
+    resolution: {integrity: sha512-GCvB3aoys96IuDFBMcTB46JOR6mdMtAToqwiW8JlWhsoh1mhHi/xn9ss/Dg7N555GiJyEt2qzoG/NHCwM6h1EA==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@2.1.2:
+    resolution: {integrity: sha512-9YodfrxS9g9IbFr/KOjE5bAeJ0p61n3bW6mqvy0jtoeKd1kTW1Cxm0oulm6KX2lyM9Gl6WIe8nEbY7LWv5ZJww==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+
+  tinyrainbow@3.1.1:
+    resolution: {integrity: sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==}
+    engines: {node: '>=14.0.0'}
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  type-level-regexp@0.1.17:
+    resolution: {integrity: sha512-wTk4DH3cxwk196uGLK/E9pE45aLfeKJacKmcEgEOA/q5dnPGNxXt0cfYdFxb57L+sEpf1oJH4Dnx/pnRcku9jg==}
+
+  type@2.7.3:
+    resolution: {integrity: sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==}
+
+  typescript@6.0.3:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.4:
+    resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
+
+  unconfig-core@7.5.0:
+    resolution: {integrity: sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w==}
+
+  unconfig@7.5.0:
+    resolution: {integrity: sha512-oi8Qy2JV4D3UQ0PsopR28CzdQ3S/5A1zwsUwp/rosSbfhJ5z7b90bIyTwi/F7hCLD4SGcZVjDzd4XoUQcEanvA==}
+
+  undici-types@8.3.0:
+    resolution: {integrity: sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==}
+
+  unimport@6.5.0:
+    resolution: {integrity: sha512-t0KLJLRbebz3f7NrQe+vy2ObeugVeM1XqI2oeYnauddmHSglYj3U6bxOJ65IbXmOFkcAGFJK2OyGH7aqHPM6Ug==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      oxc-parser: '*'
+      rolldown: ^1.0.0
+    peerDependenciesMeta:
+      oxc-parser:
+        optional: true
+      rolldown:
+        optional: true
+
+  unist-util-is@6.0.1:
+    resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.2:
+    resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
+
+  unist-util-visit@5.1.0:
+    resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
+
+  unocss@66.10.1:
+    resolution: {integrity: sha512-9PvMhWGzVDAySUzRNnevP5W+rTjL+mbHfKYjozTKwZ+z2P2ytsZ1+0ZoBuAGmBKCLHzpiEu68EsoIsH8bUSxLA==}
+    peerDependencies:
+      '@unocss/astro': 66.10.1
+      '@unocss/postcss': 66.10.1
+      '@unocss/webpack': 66.10.1
+    peerDependenciesMeta:
+      '@unocss/astro':
+        optional: true
+      '@unocss/postcss':
+        optional: true
+      '@unocss/webpack':
+        optional: true
+
+  unplugin-auto-import@21.1.0:
+    resolution: {integrity: sha512-EzrSqWIBulEqCuP7idADXH+tVKYrbwKlR5+r/lOWik0o+Ksny1kitmtryHGNSv7puzzORlcIwT/x2JStiszlHA==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@nuxt/kit': ^4.0.0
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@vueuse/core':
+        optional: true
+
+  unplugin-utils@0.3.2:
+    resolution: {integrity: sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==}
+    engines: {node: '>=20.19.0'}
+
+  unplugin-vue-components@32.1.0:
+    resolution: {integrity: sha512-YiUkSxuRjab18XFOrX5VsIxXzccrfmHVGsGeJgSgklb829DQmCy9E4vvDUE4tuvZZdxyFJZX0Oc4TPnnxiiMyg==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@nuxt/kit': ^3.2.2 || ^4.0.0
+      vue: ^3.0.0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+
+  unplugin-vue-setup-extend-plus@1.0.1:
+    resolution: {integrity: sha512-mW2IzkyJITyspAV/LEdnEyE1CJip9jB5fCeaVv7Q6X0oJyDrOxXoB+jyet0q5pRJNjErbjQx950/8NPTvbqLTQ==}
+
+  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'}
+
+  unplugin@3.3.0:
+    resolution: {integrity: sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      '@farmfe/core': '*'
+      '@rspack/core': '*'
+      bun-types-no-globals: '*'
+      esbuild: 0.28.1
+      rolldown: '*'
+      rollup: '*'
+      unloader: '*'
+      vite: '*'
+      webpack: '*'
+    peerDependenciesMeta:
+      '@farmfe/core':
+        optional: true
+      '@rspack/core':
+        optional: true
+      bun-types-no-globals:
+        optional: true
+      esbuild:
+        optional: true
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+      unloader:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
+  update-browserslist-db@1.3.2:
+    resolution: {integrity: sha512-UQ+MSxlhRm1bzjhU+DcuXfjFO1FzNtqhK5+9Yvlp90ItDLk5vT932A0rFu619nf7RVS+Y/VeaUW1jaRDqZ8VJw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  vite-plugin-svg-icons-ng@1.9.3:
+    resolution: {integrity: sha512-hrMOB7jx/xjtKgC2oZbz/HCOD0gjFEpowZmzeOn10W3Jt6XQfk3YEHZteuNEWFhvwYF7y1GPjQCQrCuqXC7MnQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    peerDependencies:
+      vite: '>=5.0.0'
+
+  vite@8.2.2:
+    resolution: {integrity: sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.4.0 || ^0.5.0
+      esbuild: 0.28.1
+      jiti: '>=1.21.0'
+      less: ^4.0.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
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        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@4.1.11:
+    resolution: {integrity: sha512-fhACrNXUidIbGSBr5FlbuBkO7VWC1ZyLl0DO4CU2DrQoAPxX84Ysxs+HeGQpii5lZWV1Q4gBZTTu49mF+A6Edw==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.1.11
+      '@vitest/browser-preview': 4.1.11
+      '@vitest/browser-webdriverio': 4.1.11
+      '@vitest/coverage-istanbul': 4.1.11
+      '@vitest/coverage-v8': 4.1.11
+      '@vitest/ui': 4.1.11
+      happy-dom: '*'
+      jsdom: '*'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  vscode-uri@3.2.0:
+    resolution: {integrity: sha512-m2gXo3bn0G1kT9InzMf07fTbqMbGtyckj3bH5ktLO+1Ssv+yiATZ4dhwaQv9UZWxJh6E9IFGnQyjgWVDWVBDrg==}
+
+  vue-component-type-helpers@3.3.11:
+    resolution: {integrity: sha512-LwcxzeliO9fkQcpJG0PoX8X5kmAhKmH9wkpDLxNabwzkQ9Zeib2YVHwFV4pcWmMLfXVfjr/dSV+DaJ3cIPgSNA==}
+
+  vue-cropper@1.1.4:
+    resolution: {integrity: sha512-5m98vBsCEI9rbS4JxELxXidtAui3qNyTHLHg67Qbn7g8cg+E6LcnC+hh3SM/p94x6mFh6KRxT1ttnta+wCYqWA==}
+
+  vue-i18n@11.4.10:
+    resolution: {integrity: sha512-Lp+BjOxqzOY87DS6Z8KrQrpiTr9IN/Lt4kZEilwyXG2Wrx+AcU6IVsAW92HNXtVcn1HFFPV6ty41p9e/qDpyvg==}
+    engines: {node: '>= 22'}
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue-json-pretty@2.6.0:
+    resolution: {integrity: sha512-glz1aBVS35EO8+S9agIl3WOQaW2cJZW192UVKTuGmryx01ZvOVWc4pR3t+5UcyY4jdOfBUgVHjcpRpcnjRhCAg==}
+    engines: {node: '>= 10.0.0', npm: '>= 5.0.0'}
+    peerDependencies:
+      vue: '>=3.0.0'
+
+  vue-router@5.3.1:
+    resolution: {integrity: sha512-GDBZzgmILxA/kFnkFbJjQZdZ2QQbngnIMMuoUcjhZIfH1RGMaPjPwX5ASnV38qamuA9uhO0RDjSBHTDNG2uXyQ==}
+    peerDependencies:
+      '@pinia/colada': '>=0.21.2'
+      '@vue/compiler-sfc': ^3.5.34 || ^4.0.0
+      pinia: ^3.0.4 || ^4.0.2
+      vite: ^7.3.0 || ^8.0.0
+      vue: ^3.5.34 || ^4.0.0
+    peerDependenciesMeta:
+      '@pinia/colada':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      pinia:
+        optional: true
+      vite:
+        optional: true
+
+  vue-tsc@3.3.11:
+    resolution: {integrity: sha512-gOb0B9rtU2+f1dszwPqSH5kAieIF9ReeLhD3kSRNHv5WZZUQz/JdVXW0RTdqhNTMlQkqKzrTTviqKr/4FYZraQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue-types@7.0.0:
+    resolution: {integrity: sha512-4IeYqlOH6Vhw6+gbJxXV4ysxE70nUO0gwbl0xLJFzzTqyR00qLVhHY+w7f44gmT/enRXm9IlB0nEMq8xTjm7rw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      vue: ^3.0.0
+    peerDependenciesMeta:
+      vue:
+        optional: true
+
+  vue@3.5.42:
+    resolution: {integrity: sha512-4RyHQTbQvOPs3MfvUO1Sg0YRrKNnA0mAVtvpd12Tg1fKDN7OHBUl1IqSn8zGJjK9nI3NkNp8cgTpVrSZC5TTcA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  vxe-pc-ui@4.18.9:
+    resolution: {integrity: sha512-TJk788bY4Ok2LIBWB3JakNNuq3lirigVhyRgvNw9c8CdkWn98fSgqkncijMtx9qgDZssgsvPF61YMEq9jCJ+zQ==}
+
+  vxe-table@4.21.9:
+    resolution: {integrity: sha512-6CdA+GzjHzNOXQeVG2xbL7xiiBFW7nVCgmWfsSI9cpxTrBG7bp7uRWJtI7CbFeBh/bUNGahcHHCuVLyfLY6r/g==}
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  wildcard@1.1.2:
+    resolution: {integrity: sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==}
+
+  xe-utils@4.0.13:
+    resolution: {integrity: sha512-hIxQ3LQv/WF0DyeNsZ7VclX5+n5CKoUJ3DG76GFtuAnVQ/NaSv3MKmyZ6MD73wfSdzZBcziV8wcas8GRNSYMwg==}
+
+  xml-naming@0.3.0:
+    resolution: {integrity: sha512-ghig2TBE/H11aOVgmahA3MhimvkBr6JIYknH/Dhdk10nXwdbIqBJsbfMxpvFPG8bAw77gN29aQWvKpmVoPlvPQ==}
+    engines: {node: '>=16.0.0'}
+
+  yaml@2.9.0:
+    resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  zigpty@0.2.1:
+    resolution: {integrity: sha512-MR9JqJx2wf5f4wz8zpx050AlqrmWeIW+1h0SO5iEyhG3HFRjY5luC3szS2ux2EGuPjE5OU9ZAuiCBeMWBTrqZw==}
+
+  zod@4.6.1:
+    resolution: {integrity: sha512-341aRWQsve0rvronKNTqZpjmzdbUDlFuzHaI/XLg/Ej82qffDJRRfBTCuv7+9q/rMjB6LSLyEBnW4InJeMtt/Q==}
+
+  zrender@6.1.0:
+    resolution: {integrity: sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==}
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  '@antfu/install-pkg@2.0.1':
+    dependencies:
+      package-manager-detector: 1.8.0
+      tinyexec: 1.3.1
+
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/parser@7.29.8':
+    dependencies:
+      '@babel/types': 7.29.8
+
+  '@babel/runtime@7.29.7': {}
+
+  '@babel/types@7.29.8':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@ctrl/tinycolor@4.2.1': {}
+
+  '@devframes/hub@0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4))':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      destr: 2.0.5
+      devframe: 0.9.18(cac@7.0.0)(srvx@1.0.4)
+      h3: 2.0.1-rc.31(crossws@0.4.12(srvx@1.0.4))
+      pathe: 2.0.3
+      perfect-debounce: 2.1.0
+      tinyexec: 1.3.1
+      ufo: 1.6.4
+      zigpty: 0.2.1
+    transitivePeerDependencies:
+      - crossws
+      - ocache
+
+  '@devframes/json-render@0.9.18(@devframes/hub@0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4)))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4))':
+    dependencies:
+      '@json-render/core': 0.20.0(zod@4.6.1)
+      '@standard-schema/spec': 1.1.0
+      devframe: 0.9.18(cac@7.0.0)(srvx@1.0.4)
+      zod: 4.6.1
+    optionalDependencies:
+      '@devframes/hub': 0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4))
+
+  '@devframes/service-shiki@0.9.18(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4))':
+    dependencies:
+      devframe: 0.9.18(cac@7.0.0)(srvx@1.0.4)
+      shiki: 4.4.3
+
+  '@devframes/vite@0.9.18(@devframes/hub@0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4)))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4))(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))':
+    dependencies:
+      devframe: 0.9.18(cac@7.0.0)(srvx@1.0.4)
+      pathe: 2.0.3
+    optionalDependencies:
+      '@devframes/hub': 0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4))
+      vite: 8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)
+
+  '@element-plus/icons-vue@2.3.2(vue@3.5.42(typescript@6.0.3))':
+    dependencies:
+      vue: 3.5.42(typescript@6.0.3)
+
+  '@emnapi/core@1.10.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/utils@0.2.12': {}
+
+  '@highlightjs/vue-plugin@2.1.2(highlight.js@11.12.0)(vue@3.5.42(typescript@6.0.3))':
+    dependencies:
+      highlight.js: 11.12.0
+      vue: 3.5.42(typescript@6.0.3)
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@3.1.7':
+    dependencies:
+      '@antfu/install-pkg': 2.0.1
+      '@iconify/types': 2.0.0
+      import-meta-resolve: 4.2.0
+
+  '@iconify/vue@5.0.1(vue@3.5.42(typescript@6.0.3))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.42(typescript@6.0.3)
+
+  '@intlify/core-base@11.4.10':
+    dependencies:
+      '@intlify/devtools-types': 11.4.10
+      '@intlify/message-compiler': 11.4.10
+      '@intlify/shared': 11.4.10
+
+  '@intlify/devtools-types@11.4.10':
+    dependencies:
+      '@intlify/core-base': 11.4.10
+      '@intlify/shared': 11.4.10
+
+  '@intlify/message-compiler@11.4.10':
+    dependencies:
+      '@intlify/shared': 11.4.10
+      source-map-js: 1.2.1
+
+  '@intlify/shared@11.4.10': {}
+
+  '@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/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/sourcemap-codec@1.6.0': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@json-render/core@0.20.0(zod@4.6.1)':
+    dependencies:
+      zod: 4.6.1
+
+  '@modelcontextprotocol/core@2.0.0':
+    dependencies:
+      zod: 4.6.1
+
+  '@modelcontextprotocol/server@2.0.0':
+    dependencies:
+      '@modelcontextprotocol/core': 2.0.0
+      zod: 4.6.1
+
+  '@napi-rs/wasm-runtime@1.2.3(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
+  '@noble/ciphers@2.4.0': {}
+
+  '@nodable/entities@3.0.0': {}
+
+  '@oxc-parser/binding-android-arm-eabi@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm64@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-arm64@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-openharmony-arm64@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-wasm32-wasi@0.131.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.2.3(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.131.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.131.0':
+    optional: true
+
+  '@oxc-project/types@0.131.0': {}
+
+  '@oxc-project/types@0.149.0': {}
+
+  '@oxfmt/binding-android-arm-eabi@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-android-arm64@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-arm64@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-x64@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-freebsd-x64@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-gnueabihf@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-musleabihf@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-gnu@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-musl@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-linux-ppc64-gnu@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-musl@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-linux-s390x-gnu@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-gnu@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-musl@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-openharmony-arm64@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-win32-arm64-msvc@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-win32-ia32-msvc@0.67.0':
+    optional: true
+
+  '@oxfmt/binding-win32-x64-msvc@0.67.0':
+    optional: true
+
+  '@oxlint/binding-android-arm-eabi@1.82.0':
+    optional: true
+
+  '@oxlint/binding-android-arm64@1.82.0':
+    optional: true
+
+  '@oxlint/binding-darwin-arm64@1.82.0':
+    optional: true
+
+  '@oxlint/binding-darwin-x64@1.82.0':
+    optional: true
+
+  '@oxlint/binding-freebsd-x64@1.82.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.82.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-musleabihf@1.82.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-gnu@1.82.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-musl@1.82.0':
+    optional: true
+
+  '@oxlint/binding-linux-ppc64-gnu@1.82.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-gnu@1.82.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-musl@1.82.0':
+    optional: true
+
+  '@oxlint/binding-linux-s390x-gnu@1.82.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-gnu@1.82.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-musl@1.82.0':
+    optional: true
+
+  '@oxlint/binding-openharmony-arm64@1.82.0':
+    optional: true
+
+  '@oxlint/binding-win32-arm64-msvc@1.82.0':
+    optional: true
+
+  '@oxlint/binding-win32-ia32-msvc@1.82.0':
+    optional: true
+
+  '@oxlint/binding-win32-x64-msvc@1.82.0':
+    optional: true
+
+  '@parcel/watcher-android-arm64@2.6.0':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.6.0':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.6.0':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.6.0':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.6.0':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.6.0':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.6.0':
+    optional: true
+
+  '@parcel/watcher@2.6.0':
+    dependencies:
+      detect-libc: 2.1.2
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 4.0.7
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.6.0
+      '@parcel/watcher-darwin-arm64': 2.6.0
+      '@parcel/watcher-darwin-x64': 2.6.0
+      '@parcel/watcher-freebsd-x64': 2.6.0
+      '@parcel/watcher-linux-arm-glibc': 2.6.0
+      '@parcel/watcher-linux-arm-musl': 2.6.0
+      '@parcel/watcher-linux-arm64-glibc': 2.6.0
+      '@parcel/watcher-linux-arm64-musl': 2.6.0
+      '@parcel/watcher-linux-x64-glibc': 2.6.0
+      '@parcel/watcher-linux-x64-musl': 2.6.0
+      '@parcel/watcher-win32-arm64': 2.6.0
+      '@parcel/watcher-win32-x64': 2.6.0
+    optional: true
+
+  '@quansync/fs@1.0.0':
+    dependencies:
+      quansync: 1.0.0
+
+  '@rolldown/binding-android-arm-eabi@1.2.8':
+    optional: true
+
+  '@rolldown/binding-android-arm64@1.2.8':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.2.8':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.2.8':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.2.8':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.8':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.8':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.2.8':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.8':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.8':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.2.8':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.2.8':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.2.8':
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.8':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.2.8':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@shikijs/core@4.4.3':
+    dependencies:
+      '@shikijs/primitive': 4.4.3
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.5
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@4.4.3':
+    dependencies:
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.6
+
+  '@shikijs/engine-oniguruma@4.4.3':
+    dependencies:
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@4.4.3':
+    dependencies:
+      '@shikijs/types': 4.4.3
+
+  '@shikijs/primitive@4.4.3':
+    dependencies:
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.5
+
+  '@shikijs/themes@4.4.3':
+    dependencies:
+      '@shikijs/types': 4.4.3
+
+  '@shikijs/types@4.4.3':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.5
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
+  '@standard-schema/spec@1.1.0': {}
+
+  '@sxzz/popperjs-es@2.11.8': {}
+
+  '@transloadit/prettier-bytes@0.3.5': {}
+
+  '@tybys/wasm-util@0.10.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
+  '@types/deep-eql@4.0.2': {}
+
+  '@types/estree@1.0.9': {}
+
+  '@types/event-emitter@0.3.5': {}
+
+  '@types/hast@3.0.5':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.25
+
+  '@types/lodash@4.17.25': {}
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/node@26.1.1':
+    dependencies:
+      undici-types: 8.3.0
+
+  '@types/nprogress@0.2.3': {}
+
+  '@types/retry@0.12.2': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@types/web-bluetooth@0.0.21': {}
+
+  '@ungap/structured-clone@1.4.0': {}
+
+  '@unocss/cli@66.10.1':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@unocss/config': 66.10.1
+      '@unocss/core': 66.10.1
+      '@unocss/preset-wind3': 66.10.1
+      '@unocss/preset-wind4': 66.10.1
+      '@unocss/transformer-directives': 66.10.1
+      cac: 7.0.0
+      chokidar: 5.0.0
+      colorette: 2.0.20
+      consola: 3.4.2
+      magic-string: 1.3.1
+      pathe: 2.0.3
+      perfect-debounce: 2.1.0
+      tinyglobby: 0.2.17
+      unplugin-utils: 0.3.2
+
+  '@unocss/config@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+      colorette: 2.0.20
+      consola: 3.4.2
+      unconfig: 7.5.0
+
+  '@unocss/core@66.10.1': {}
+
+  '@unocss/extractor-arbitrary-variants@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+
+  '@unocss/inspector@66.10.1(@devframes/hub@0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4)))(cac@7.0.0)(crossws@0.4.12(srvx@1.0.4))(srvx@1.0.4)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))':
+    dependencies:
+      '@devframes/service-shiki': 0.9.18(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4))
+      '@devframes/vite': 0.9.18(@devframes/hub@0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4)))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4))(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      '@unocss/config': 66.10.1
+      '@unocss/core': 66.10.1
+      '@unocss/rule-utils': 66.10.1
+      '@vitejs/devtools-kit': 0.7.3(cac@7.0.0)(crossws@0.4.12(srvx@1.0.4))(srvx@1.0.4)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      colorette: 2.0.20
+      devframe: 0.9.18(cac@7.0.0)(srvx@1.0.4)
+      tinyglobby: 0.2.17
+      unplugin-utils: 0.3.2
+    transitivePeerDependencies:
+      - '@devframes/hub'
+      - '@devframes/hub-ui'
+      - '@modelcontextprotocol/client'
+      - cac
+      - crossws
+      - ocache
+      - srvx
+      - vite
+
+  '@unocss/preset-attributify@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+
+  '@unocss/preset-icons@66.10.1':
+    dependencies:
+      '@iconify/utils': 3.1.7
+      '@unocss/core': 66.10.1
+      ofetch: 1.5.1
+
+  '@unocss/preset-mini@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+      '@unocss/extractor-arbitrary-variants': 66.10.1
+      '@unocss/rule-utils': 66.10.1
+
+  '@unocss/preset-tagify@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+
+  '@unocss/preset-typography@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+      '@unocss/rule-utils': 66.10.1
+
+  '@unocss/preset-uno@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+      '@unocss/preset-wind3': 66.10.1
+
+  '@unocss/preset-web-fonts@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+      ofetch: 1.5.1
+
+  '@unocss/preset-wind3@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+      '@unocss/preset-mini': 66.10.1
+      '@unocss/rule-utils': 66.10.1
+
+  '@unocss/preset-wind4@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+      '@unocss/extractor-arbitrary-variants': 66.10.1
+      '@unocss/rule-utils': 66.10.1
+
+  '@unocss/preset-wind@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+      '@unocss/preset-wind3': 66.10.1
+
+  '@unocss/rollup@66.10.1(rolldown@1.2.8)':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@unocss/config': 66.10.1
+      '@unocss/core': 66.10.1
+      chokidar: 5.0.0
+      magic-string: 1.3.1
+      pathe: 2.0.3
+      tinyglobby: 0.2.17
+      unplugin-utils: 0.3.2
+    optionalDependencies:
+      rolldown: 1.2.8
+
+  '@unocss/rule-utils@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+      magic-string: 1.3.1
+
+  '@unocss/transformer-attributify-jsx@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+      oxc-parser: 0.131.0
+      oxc-walker: 0.7.0(oxc-parser@0.131.0)
+
+  '@unocss/transformer-compile-class@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+
+  '@unocss/transformer-directives@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+      '@unocss/rule-utils': 66.10.1
+      css-tree: 3.2.1
+
+  '@unocss/transformer-variant-group@66.10.1':
+    dependencies:
+      '@unocss/core': 66.10.1
+
+  '@unocss/vite@66.10.1(@devframes/hub@0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4)))(cac@7.0.0)(crossws@0.4.12(srvx@1.0.4))(srvx@1.0.4)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@unocss/config': 66.10.1
+      '@unocss/core': 66.10.1
+      '@unocss/inspector': 66.10.1(@devframes/hub@0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4)))(cac@7.0.0)(crossws@0.4.12(srvx@1.0.4))(srvx@1.0.4)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      chokidar: 5.0.0
+      magic-string: 1.3.1
+      pathe: 2.0.3
+      tinyglobby: 0.2.17
+      unplugin-utils: 0.3.2
+      vite: 8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - '@devframes/hub'
+      - '@devframes/hub-ui'
+      - '@modelcontextprotocol/client'
+      - cac
+      - crossws
+      - ocache
+      - srvx
+
+  '@uppy/companion-client@5.1.1(@uppy/core@5.2.0)':
+    dependencies:
+      '@uppy/core': 5.2.0
+      '@uppy/utils': 7.2.0
+      namespace-emitter: 2.0.1
+      p-retry: 6.2.1
+    transitivePeerDependencies:
+      - preact-render-to-string
+
+  '@uppy/core@5.2.0':
+    dependencies:
+      '@transloadit/prettier-bytes': 0.3.5
+      '@uppy/store-default': 5.0.0
+      '@uppy/utils': 7.2.0
+      lodash: 4.18.1
+      mime-match: 1.0.2
+      namespace-emitter: 2.0.1
+      nanoid: 5.1.16
+      preact: 10.29.8
+    transitivePeerDependencies:
+      - preact-render-to-string
+
+  '@uppy/store-default@5.0.0': {}
+
+  '@uppy/utils@7.2.0':
+    dependencies:
+      lodash: 4.18.1
+      preact: 10.29.8
+    transitivePeerDependencies:
+      - preact-render-to-string
+
+  '@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0)':
+    dependencies:
+      '@uppy/companion-client': 5.1.1(@uppy/core@5.2.0)
+      '@uppy/core': 5.2.0
+      '@uppy/utils': 7.2.0
+    transitivePeerDependencies:
+      - preact-render-to-string
+
+  '@vitejs/devtools-kit@0.7.3(cac@7.0.0)(crossws@0.4.12(srvx@1.0.4))(srvx@1.0.4)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))':
+    dependencies:
+      '@devframes/hub': 0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4))
+      '@devframes/json-render': 0.9.18(@devframes/hub@0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4)))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4))
+      devframe: 0.9.18(cac@7.0.0)(srvx@1.0.4)
+      local-pkg: 1.2.1
+      mlly: 1.8.2
+      nostics: 1.2.0
+      nypm: 0.6.10
+      vite: 8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - '@modelcontextprotocol/client'
+      - cac
+      - crossws
+      - ocache
+      - srvx
+
+  '@vitejs/plugin-vue@6.0.8(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))(vue@3.5.42(typescript@6.0.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)
+      vue: 3.5.42(typescript@6.0.3)
+
+  '@vitest/expect@4.1.11':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.1.11
+      '@vitest/utils': 4.1.11
+      chai: 6.2.2
+      tinyrainbow: 3.1.1
+
+  '@vitest/mocker@4.1.11(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))':
+    dependencies:
+      '@vitest/spy': 4.1.11
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)
+
+  '@vitest/pretty-format@4.1.11':
+    dependencies:
+      tinyrainbow: 3.1.1
+
+  '@vitest/runner@4.1.11':
+    dependencies:
+      '@vitest/utils': 4.1.11
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.1.11':
+    dependencies:
+      '@vitest/pretty-format': 4.1.11
+      '@vitest/utils': 4.1.11
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.1.11': {}
+
+  '@vitest/utils@4.1.11':
+    dependencies:
+      '@vitest/pretty-format': 4.1.11
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.1
+
+  '@volar/language-core@2.4.28':
+    dependencies:
+      '@volar/source-map': 2.4.28
+
+  '@volar/source-map@2.4.28': {}
+
+  '@volar/typescript@2.4.28':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.2.0
+
+  '@vue-macros/common@3.1.4(vue@3.5.42(typescript@6.0.3))':
+    dependencies:
+      '@vue/compiler-sfc': 3.5.42
+      ast-kit: 2.2.0
+      local-pkg: 1.2.1
+      magic-string-ast: 1.0.3
+      unplugin-utils: 0.3.2
+    optionalDependencies:
+      vue: 3.5.42(typescript@6.0.3)
+
+  '@vue/compiler-core@3.5.42':
+    dependencies:
+      '@babel/parser': 7.29.8
+      '@vue/shared': 3.5.42
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.42':
+    dependencies:
+      '@vue/compiler-core': 3.5.42
+      '@vue/shared': 3.5.42
+
+  '@vue/compiler-sfc@3.5.42':
+    dependencies:
+      '@babel/parser': 7.29.8
+      '@vue/compiler-core': 3.5.42
+      '@vue/compiler-dom': 3.5.42
+      '@vue/compiler-ssr': 3.5.42
+      '@vue/shared': 3.5.42
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.28
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.5.42':
+    dependencies:
+      '@vue/compiler-dom': 3.5.42
+      '@vue/shared': 3.5.42
+
+  '@vue/devtools-api@6.6.4': {}
+
+  '@vue/devtools-api@8.2.1':
+    dependencies:
+      '@vue/devtools-kit': 8.2.1
+
+  '@vue/devtools-kit@8.2.1':
+    dependencies:
+      '@vue/devtools-shared': 8.2.1
+      birpc: 2.9.0
+      hookable: 5.5.3
+      perfect-debounce: 2.1.0
+
+  '@vue/devtools-shared@8.2.1': {}
+
+  '@vue/language-core@3.3.11':
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@vue/compiler-dom': 3.5.42
+      '@vue/shared': 3.5.42
+      alien-signals: 3.2.1
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.7
+
+  '@vue/reactivity@3.5.42':
+    dependencies:
+      '@vue/shared': 3.5.42
+
+  '@vue/runtime-core@3.5.42':
+    dependencies:
+      '@vue/reactivity': 3.5.42
+      '@vue/shared': 3.5.42
+
+  '@vue/runtime-dom@3.5.42':
+    dependencies:
+      '@vue/reactivity': 3.5.42
+      '@vue/runtime-core': 3.5.42
+      '@vue/shared': 3.5.42
+      csstype: 3.2.3
+
+  '@vue/server-renderer@3.5.42':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.42
+      '@vue/runtime-dom': 3.5.42
+      '@vue/shared': 3.5.42
+
+  '@vue/shared@3.5.42': {}
+
+  '@vueuse/core@14.4.0(vue@3.5.42(typescript@6.0.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.4.0
+      '@vueuse/shared': 14.4.0(vue@3.5.42(typescript@6.0.3))
+      vue: 3.5.42(typescript@6.0.3)
+
+  '@vueuse/metadata@14.4.0': {}
+
+  '@vueuse/shared@14.4.0(vue@3.5.42(typescript@6.0.3))':
+    dependencies:
+      vue: 3.5.42(typescript@6.0.3)
+
+  '@vxe-ui/core@4.4.21(vue@3.5.42(typescript@6.0.3))':
+    dependencies:
+      dom-zindex: 1.0.7
+      vue: 3.5.42(typescript@6.0.3)
+      xe-utils: 4.0.13
+
+  '@wangeditor-next/basic-modules@6.4.1(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)':
+    dependencies:
+      '@wangeditor-next/core': 6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)
+      dom7: 4.0.6
+      is-url: 1.2.4
+      lodash.throttle: 4.1.1
+      nanoid: 5.1.16
+      slate: 0.124.1
+      snabbdom: 3.6.4
+
+  '@wangeditor-next/code-highlight@6.4.1(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(slate@0.124.1)(snabbdom@3.6.4)':
+    dependencies:
+      '@wangeditor-next/core': 6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)
+      dom7: 4.0.6
+      prismjs: 1.30.0
+      slate: 0.124.1
+      snabbdom: 3.6.4
+
+  '@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)':
+    dependencies:
+      '@types/event-emitter': 0.3.5
+      '@uppy/core': 5.2.0
+      '@uppy/xhr-upload': 5.2.0(@uppy/core@5.2.0)
+      dom7: 4.0.6
+      event-emitter: 0.3.5
+      html-void-elements: 3.0.0
+      i18next: 23.16.8
+      is-hotkey: 0.2.0
+      lodash.camelcase: 4.3.0
+      lodash.clonedeep: 4.5.0
+      lodash.debounce: 4.0.8
+      lodash.foreach: 4.5.0
+      lodash.throttle: 4.1.1
+      lodash.toarray: 4.4.0
+      nanoid: 5.1.16
+      scroll-into-view-if-needed: 3.1.0
+      slate: 0.124.1
+      slate-history: 0.115.0(slate@0.124.1)
+      snabbdom: 3.6.4
+
+  '@wangeditor-next/editor-for-vue@6.4.1(@wangeditor-next/editor@6.4.1)(vue@3.5.42(typescript@6.0.3))':
+    dependencies:
+      '@wangeditor-next/editor': 6.4.1
+      vue: 3.5.42(typescript@6.0.3)
+
+  '@wangeditor-next/editor@6.4.1':
+    dependencies:
+      '@uppy/core': 5.2.0
+      '@uppy/xhr-upload': 5.2.0(@uppy/core@5.2.0)
+      '@wangeditor-next/basic-modules': 6.4.1(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)
+      '@wangeditor-next/code-highlight': 6.4.1(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(slate@0.124.1)(snabbdom@3.6.4)
+      '@wangeditor-next/core': 6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)
+      '@wangeditor-next/list-module': 6.4.1(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(slate@0.124.1)(snabbdom@3.6.4)
+      '@wangeditor-next/table-module': 6.4.1(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(lodash.debounce@4.0.8)(lodash.throttle@4.1.1)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)
+      '@wangeditor-next/upload-image-module': 6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(@wangeditor-next/basic-modules@6.4.1(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(lodash.foreach@4.5.0)(slate@0.124.1)(snabbdom@3.6.4)
+      '@wangeditor-next/video-module': 6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)
+      dom7: 4.0.6
+      is-hotkey: 0.2.0
+      lodash.camelcase: 4.3.0
+      lodash.clonedeep: 4.5.0
+      lodash.debounce: 4.0.8
+      lodash.foreach: 4.5.0
+      lodash.throttle: 4.1.1
+      lodash.toarray: 4.4.0
+      nanoid: 5.1.16
+      slate: 0.124.1
+      snabbdom: 3.6.4
+    transitivePeerDependencies:
+      - preact-render-to-string
+
+  '@wangeditor-next/list-module@6.4.1(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(slate@0.124.1)(snabbdom@3.6.4)':
+    dependencies:
+      '@wangeditor-next/core': 6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)
+      dom7: 4.0.6
+      slate: 0.124.1
+      snabbdom: 3.6.4
+
+  '@wangeditor-next/table-module@6.4.1(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(lodash.debounce@4.0.8)(lodash.throttle@4.1.1)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)':
+    dependencies:
+      '@wangeditor-next/core': 6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)
+      dom7: 4.0.6
+      lodash.debounce: 4.0.8
+      lodash.throttle: 4.1.1
+      nanoid: 5.1.16
+      slate: 0.124.1
+      snabbdom: 3.6.4
+
+  '@wangeditor-next/upload-image-module@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(@wangeditor-next/basic-modules@6.4.1(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(lodash.foreach@4.5.0)(slate@0.124.1)(snabbdom@3.6.4)':
+    dependencies:
+      '@uppy/core': 5.2.0
+      '@uppy/xhr-upload': 5.2.0(@uppy/core@5.2.0)
+      '@wangeditor-next/basic-modules': 6.4.1(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)
+      '@wangeditor-next/core': 6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)
+      dom7: 4.0.6
+      lodash.foreach: 4.5.0
+      slate: 0.124.1
+      snabbdom: 3.6.4
+
+  '@wangeditor-next/video-module@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(@wangeditor-next/core@6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4))(dom7@4.0.6)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)':
+    dependencies:
+      '@uppy/core': 5.2.0
+      '@uppy/xhr-upload': 5.2.0(@uppy/core@5.2.0)
+      '@wangeditor-next/core': 6.4.1(@uppy/core@5.2.0)(@uppy/xhr-upload@5.2.0(@uppy/core@5.2.0))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.16)(slate@0.124.1)(snabbdom@3.6.4)
+      dom7: 4.0.6
+      nanoid: 5.1.16
+      slate: 0.124.1
+      snabbdom: 3.6.4
+
+  acorn@8.17.0: {}
+
+  acorn@8.18.0: {}
+
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  alien-signals@3.2.1: {}
+
+  animate.css@4.1.1: {}
+
+  anynum@1.0.1: {}
+
+  assertion-error@2.0.1: {}
+
+  ast-kit@2.2.0:
+    dependencies:
+      '@babel/parser': 7.29.8
+      pathe: 2.0.3
+
+  ast-walker-scope@0.9.0:
+    dependencies:
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
+      ast-kit: 2.2.0
+
+  async-validator@4.2.5: {}
+
+  asynckit@0.4.0: {}
+
+  autoprefixer@10.5.5(postcss@8.5.28):
+    dependencies:
+      browserslist: 4.28.9
+      caniuse-lite: 1.0.30001810
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.28
+      postcss-value-parser: 4.2.0
+
+  await-to-js@3.0.0: {}
+
+  axios@1.20.0:
+    dependencies:
+      follow-redirects: 1.16.0
+      form-data: 4.0.6
+      https-proxy-agent: 5.0.1
+      proxy-from-env: 2.1.0
+    transitivePeerDependencies:
+      - debug
+      - supports-color
+
+  baseline-browser-mapping@2.11.21: {}
+
+  birpc@2.9.0: {}
+
+  birpc@4.2.0: {}
+
+  boolbase@1.0.0: {}
+
+  browserslist@4.28.9:
+    dependencies:
+      baseline-browser-mapping: 2.11.21
+      caniuse-lite: 1.0.30001810
+      electron-to-chromium: 1.5.425
+      node-releases: 2.0.55
+      update-browserslist-db: 1.3.2(browserslist@4.28.9)
+
+  cac@7.0.0: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  caniuse-lite@1.0.30001810: {}
+
+  ccount@2.0.1: {}
+
+  chai@6.2.2: {}
+
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.0.0
+
+  citty@0.2.2: {}
+
+  colorette@2.0.20: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  comma-separated-tokens@2.0.3: {}
+
+  commander@11.1.0: {}
+
+  compute-scroll-into-view@3.1.1: {}
+
+  confbox@0.1.8: {}
+
+  confbox@0.2.4: {}
+
+  confbox@0.3.1: {}
+
+  consola@3.4.2: {}
+
+  convert-source-map@2.0.0: {}
+
+  crossws@0.4.12(srvx@1.0.4):
+    optionalDependencies:
+      srvx: 1.0.4
+
+  css-select@6.0.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 7.0.0
+      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.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
+  css-what@7.0.0: {}
+
+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
+  csstype@3.2.3: {}
+
+  d@1.0.2:
+    dependencies:
+      es5-ext: 0.10.64
+      type: 2.7.3
+
+  dayjs@1.11.23: {}
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  defu@6.1.7: {}
+
+  delayed-stream@1.0.0: {}
+
+  dequal@2.0.3: {}
+
+  destr@2.0.5: {}
+
+  detect-libc@2.1.2: {}
+
+  devframe@0.9.18(cac@7.0.0)(srvx@1.0.4):
+    dependencies:
+      '@modelcontextprotocol/server': 2.0.0
+      '@standard-schema/spec': 1.1.0
+      birpc: 4.2.0
+      crossws: 0.4.12(srvx@1.0.4)
+      h3: 2.0.1-rc.31(crossws@0.4.12(srvx@1.0.4))
+      mrmime: 2.0.1
+      nostics: 1.2.0
+      pathe: 2.0.3
+      ufo: 1.6.4
+    optionalDependencies:
+      cac: 7.0.0
+    transitivePeerDependencies:
+      - ocache
+      - srvx
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  dom-zindex@1.0.7: {}
+
+  dom7@4.0.6:
+    dependencies:
+      ssr-window: 4.0.2
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  echarts@6.1.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.1.0
+
+  electron-to-chromium@1.5.425: {}
+
+  element-plus@2.14.5(vue@3.5.42(typescript@6.0.3)):
+    dependencies:
+      '@ctrl/tinycolor': 4.2.1
+      '@element-plus/icons-vue': 2.3.2(vue@3.5.42(typescript@6.0.3))
+      '@floating-ui/dom': 1.8.0
+      '@popperjs/core': '@sxzz/popperjs-es@2.11.8'
+      '@types/lodash': 4.17.25
+      '@types/lodash-es': 4.17.12
+      '@vueuse/core': 14.4.0(vue@3.5.42(typescript@6.0.3))
+      async-validator: 4.2.5
+      dayjs: 1.11.23
+      lodash: 4.18.1
+      lodash-es: 4.18.1
+      lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.18.1)(lodash@4.18.1)
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+      vue: 3.5.42(typescript@6.0.3)
+      vue-component-type-helpers: 3.3.11
+
+  entities@4.5.0: {}
+
+  entities@7.0.1: {}
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@2.3.2: {}
+
+  es-object-atoms@1.1.2:
+    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.4
+
+  es5-ext@0.10.64:
+    dependencies:
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.4
+      esniff: 2.0.1
+      next-tick: 1.1.0
+
+  es6-iterator@2.0.3:
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+      es6-symbol: 3.1.4
+
+  es6-symbol@3.1.4:
+    dependencies:
+      d: 1.0.2
+      ext: 1.7.0
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  esniff@2.0.1:
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+      event-emitter: 0.3.5
+      type: 2.7.3
+
+  estree-walker@2.0.2: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
+  event-emitter@0.3.5:
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+
+  expect-type@1.4.0: {}
+
+  exsolve@1.1.0: {}
+
+  exsolve@1.1.1: {}
+
+  ext@1.7.0:
+    dependencies:
+      type: 2.7.3
+
+  fast-xml-builder@1.3.1:
+    dependencies:
+      path-expression-matcher: 1.6.2
+      xml-naming: 0.3.0
+
+  fast-xml-parser@5.11.1:
+    dependencies:
+      '@nodable/entities': 3.0.0
+      fast-xml-builder: 1.3.1
+      is-unsafe: 2.0.2
+      path-expression-matcher: 1.6.2
+      strnum: 2.4.2
+      xml-naming: 0.3.0
+
+  fdir@6.5.0(picomatch@4.0.5):
+    optionalDependencies:
+      picomatch: 4.0.5
+
+  follow-redirects@1.16.0: {}
+
+  form-data@4.0.6:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.4
+      mime-types: 2.1.35
+
+  fraction.js@5.3.4: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  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.2
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.4
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.2
+
+  gopd@1.2.0: {}
+
+  h3@2.0.1-rc.31(crossws@0.4.12(srvx@1.0.4)):
+    dependencies:
+      rou3: 0.9.2
+      srvx: 1.0.4
+    optionalDependencies:
+      crossws: 0.4.12(srvx@1.0.4)
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.4:
+    dependencies:
+      function-bind: 1.1.2
+
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.2.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.5
+
+  highlight.js@11.12.0: {}
+
+  hookable@5.5.3: {}
+
+  html-void-elements@3.0.0: {}
+
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  i18next@23.16.8:
+    dependencies:
+      '@babel/runtime': 7.29.7
+
+  image-conversion@2.1.1: {}
+
+  immutable@5.1.9: {}
+
+  import-meta-resolve@4.2.0: {}
+
+  is-extglob@2.1.1:
+    optional: true
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+    optional: true
+
+  is-hotkey@0.2.0: {}
+
+  is-network-error@1.3.2: {}
+
+  is-unsafe@2.0.2: {}
+
+  is-url@1.2.4: {}
+
+  jiti@2.7.0: {}
+
+  js-tokens@10.0.0: {}
+
+  jsencrypt@3.5.4: {}
+
+  lightningcss-android-arm64@1.33.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.33.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.33.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.33.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.33.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.33.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.33.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.33.0:
+    optional: true
+
+  lightningcss@1.33.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.33.0
+      lightningcss-darwin-arm64: 1.33.0
+      lightningcss-darwin-x64: 1.33.0
+      lightningcss-freebsd-x64: 1.33.0
+      lightningcss-linux-arm-gnueabihf: 1.33.0
+      lightningcss-linux-arm64-gnu: 1.33.0
+      lightningcss-linux-arm64-musl: 1.33.0
+      lightningcss-linux-x64-gnu: 1.33.0
+      lightningcss-linux-x64-musl: 1.33.0
+      lightningcss-win32-arm64-msvc: 1.33.0
+      lightningcss-win32-x64-msvc: 1.33.0
+
+  local-pkg@1.2.1:
+    dependencies:
+      mlly: 1.8.2
+      pkg-types: 2.3.1
+      quansync: 0.2.11
+
+  lodash-es@4.18.1: {}
+
+  lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.18.1)(lodash@4.18.1):
+    dependencies:
+      '@types/lodash-es': 4.17.12
+      lodash: 4.18.1
+      lodash-es: 4.18.1
+
+  lodash.camelcase@4.3.0: {}
+
+  lodash.clonedeep@4.5.0: {}
+
+  lodash.debounce@4.0.8: {}
+
+  lodash.foreach@4.5.0: {}
+
+  lodash.throttle@4.1.1: {}
+
+  lodash.toarray@4.4.0: {}
+
+  lodash@4.18.1: {}
+
+  magic-regexp@0.10.0:
+    dependencies:
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      regexp-tree: 0.1.27
+      type-level-regexp: 0.1.17
+      ufo: 1.6.4
+      unplugin: 2.3.11
+
+  magic-string-ast@1.0.3:
+    dependencies:
+      magic-string: 0.30.21
+
+  magic-string@0.26.7:
+    dependencies:
+      sourcemap-codec: 1.4.8
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  magic-string@1.3.1:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.6.0
+
+  math-intrinsics@1.1.0: {}
+
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.5
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.4.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+
+  mdn-data@2.0.28: {}
+
+  mdn-data@2.27.1: {}
+
+  memoize-one@6.0.0: {}
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  mime-db@1.52.0: {}
+
+  mime-match@1.0.2:
+    dependencies:
+      wildcard: 1.1.2
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mlly@1.8.2:
+    dependencies:
+      acorn: 8.17.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.4
+
+  mrmime@2.0.1: {}
+
+  ms@2.1.3: {}
+
+  muggle-string@0.4.1: {}
+
+  namespace-emitter@2.0.1: {}
+
+  nanoid@3.3.18: {}
+
+  nanoid@5.1.16: {}
+
+  next-tick@1.1.0: {}
+
+  node-addon-api@7.1.1:
+    optional: true
+
+  node-fetch-native@1.6.7: {}
+
+  node-releases@2.0.55: {}
+
+  normalize-wheel-es@1.2.0: {}
+
+  nostics@1.2.0: {}
+
+  nprogress@0.2.0: {}
+
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
+  nypm@0.6.10:
+    dependencies:
+      citty: 0.2.2
+      pathe: 2.0.3
+      tinyexec: 1.3.1
+
+  obug@2.1.4: {}
+
+  obug@2.2.1: {}
+
+  ofetch@1.5.1:
+    dependencies:
+      destr: 2.0.5
+      node-fetch-native: 1.6.7
+      ufo: 1.6.4
+
+  oniguruma-parser@0.12.2: {}
+
+  oniguruma-to-es@4.3.6:
+    dependencies:
+      oniguruma-parser: 0.12.2
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
+  oxc-parser@0.131.0:
+    dependencies:
+      '@oxc-project/types': 0.131.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.131.0
+      '@oxc-parser/binding-android-arm64': 0.131.0
+      '@oxc-parser/binding-darwin-arm64': 0.131.0
+      '@oxc-parser/binding-darwin-x64': 0.131.0
+      '@oxc-parser/binding-freebsd-x64': 0.131.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.131.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.131.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.131.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.131.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.131.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.131.0
+      '@oxc-parser/binding-linux-x64-musl': 0.131.0
+      '@oxc-parser/binding-openharmony-arm64': 0.131.0
+      '@oxc-parser/binding-wasm32-wasi': 0.131.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.131.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.131.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.131.0
+
+  oxc-walker@0.7.0(oxc-parser@0.131.0):
+    dependencies:
+      magic-regexp: 0.10.0
+      oxc-parser: 0.131.0
+
+  oxfmt@0.67.0:
+    dependencies:
+      tinypool: 2.1.2
+    optionalDependencies:
+      '@oxfmt/binding-android-arm-eabi': 0.67.0
+      '@oxfmt/binding-android-arm64': 0.67.0
+      '@oxfmt/binding-darwin-arm64': 0.67.0
+      '@oxfmt/binding-darwin-x64': 0.67.0
+      '@oxfmt/binding-freebsd-x64': 0.67.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.67.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.67.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.67.0
+      '@oxfmt/binding-linux-arm64-musl': 0.67.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.67.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.67.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.67.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.67.0
+      '@oxfmt/binding-linux-x64-gnu': 0.67.0
+      '@oxfmt/binding-linux-x64-musl': 0.67.0
+      '@oxfmt/binding-openharmony-arm64': 0.67.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.67.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.67.0
+      '@oxfmt/binding-win32-x64-msvc': 0.67.0
+
+  oxlint@1.82.0:
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.82.0
+      '@oxlint/binding-android-arm64': 1.82.0
+      '@oxlint/binding-darwin-arm64': 1.82.0
+      '@oxlint/binding-darwin-x64': 1.82.0
+      '@oxlint/binding-freebsd-x64': 1.82.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.82.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.82.0
+      '@oxlint/binding-linux-arm64-gnu': 1.82.0
+      '@oxlint/binding-linux-arm64-musl': 1.82.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.82.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.82.0
+      '@oxlint/binding-linux-riscv64-musl': 1.82.0
+      '@oxlint/binding-linux-s390x-gnu': 1.82.0
+      '@oxlint/binding-linux-x64-gnu': 1.82.0
+      '@oxlint/binding-linux-x64-musl': 1.82.0
+      '@oxlint/binding-openharmony-arm64': 1.82.0
+      '@oxlint/binding-win32-arm64-msvc': 1.82.0
+      '@oxlint/binding-win32-ia32-msvc': 1.82.0
+      '@oxlint/binding-win32-x64-msvc': 1.82.0
+
+  p-retry@6.2.1:
+    dependencies:
+      '@types/retry': 0.12.2
+      is-network-error: 1.3.2
+      retry: 0.13.1
+
+  package-manager-detector@1.8.0: {}
+
+  path-browserify@1.0.1: {}
+
+  path-expression-matcher@1.6.2: {}
+
+  pathe@2.0.3: {}
+
+  perfect-debounce@2.1.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@4.0.5: {}
+
+  picomatch@4.0.7: {}
+
+  pinia@4.0.3(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.42(typescript@6.0.3)):
+    dependencies:
+      '@vue/devtools-api': 8.2.1
+      nostics: 1.2.0
+      vue: 3.5.42(typescript@6.0.3)
+    optionalDependencies:
+      typescript: 6.0.3
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.2
+      pathe: 2.0.3
+
+  pkg-types@2.3.1:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.1.0
+      pathe: 2.0.3
+
+  pkg-types@2.3.3:
+    dependencies:
+      confbox: 0.3.1
+      exsolve: 1.1.1
+      pathe: 2.0.3
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.5.28:
+    dependencies:
+      nanoid: 3.3.18
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  preact@10.29.8: {}
+
+  prismjs@1.30.0: {}
+
+  property-information@7.2.0: {}
+
+  proxy-from-env@2.1.0: {}
+
+  quansync@0.2.11: {}
+
+  quansync@1.0.0: {}
+
+  readdirp@5.0.0: {}
+
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regexp-tree@0.1.27: {}
+
+  retry@0.13.1: {}
+
+  rolldown@1.2.8:
+    dependencies:
+      '@oxc-project/types': 0.149.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm-eabi': 1.2.8
+      '@rolldown/binding-android-arm64': 1.2.8
+      '@rolldown/binding-darwin-arm64': 1.2.8
+      '@rolldown/binding-darwin-x64': 1.2.8
+      '@rolldown/binding-freebsd-x64': 1.2.8
+      '@rolldown/binding-linux-arm-gnueabihf': 1.2.8
+      '@rolldown/binding-linux-arm64-gnu': 1.2.8
+      '@rolldown/binding-linux-arm64-musl': 1.2.8
+      '@rolldown/binding-linux-ppc64-gnu': 1.2.8
+      '@rolldown/binding-linux-s390x-gnu': 1.2.8
+      '@rolldown/binding-linux-x64-gnu': 1.2.8
+      '@rolldown/binding-linux-x64-musl': 1.2.8
+      '@rolldown/binding-openharmony-arm64': 1.2.8
+      '@rolldown/binding-win32-arm64-msvc': 1.2.8
+      '@rolldown/binding-win32-x64-msvc': 1.2.8
+
+  rou3@0.9.2: {}
+
+  sass@1.104.0:
+    dependencies:
+      chokidar: 5.0.0
+      immutable: 5.1.9
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.6.0
+
+  sax@1.6.1: {}
+
+  scroll-into-view-if-needed@3.1.0:
+    dependencies:
+      compute-scroll-into-view: 3.1.1
+
+  scule@1.3.0: {}
+
+  shiki@4.4.3:
+    dependencies:
+      '@shikijs/core': 4.4.3
+      '@shikijs/engine-javascript': 4.4.3
+      '@shikijs/engine-oniguruma': 4.4.3
+      '@shikijs/langs': 4.4.3
+      '@shikijs/themes': 4.4.3
+      '@shikijs/types': 4.4.3
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.5
+
+  siginfo@2.0.0: {}
+
+  slate-history@0.115.0(slate@0.124.1):
+    dependencies:
+      slate: 0.124.1
+
+  slate@0.124.1: {}
+
+  snabbdom@3.6.4: {}
+
+  source-map-js@1.2.1: {}
+
+  sourcemap-codec@1.4.8: {}
+
+  space-separated-tokens@2.0.2: {}
+
+  srvx@1.0.4: {}
+
+  ssr-window@4.0.2: {}
+
+  stackback@0.0.2: {}
+
+  std-env@4.2.0: {}
+
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
+  strip-literal@4.0.0:
+    dependencies:
+      js-tokens: 10.0.0
+
+  strnum@2.4.2:
+    dependencies:
+      anynum: 1.0.1
+
+  svg-icon-baker@2.1.1:
+    dependencies:
+      css-tree: 3.2.1
+      fast-xml-builder: 1.3.1
+      fast-xml-parser: 5.11.1
+      svgo: 4.1.0
+
+  svgo@4.1.0:
+    dependencies:
+      commander: 11.1.0
+      css-select: 6.0.0
+      css-tree: 3.2.1
+      css-what: 7.0.0
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.6.1
+
+  tinybench@2.9.0: {}
+
+  tinyexec@1.3.1: {}
+
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+
+  tinypool@2.1.2: {}
+
+  tinyrainbow@3.1.1: {}
+
+  trim-lines@3.0.1: {}
+
+  tslib@2.3.0: {}
+
+  tslib@2.8.1:
+    optional: true
+
+  type-level-regexp@0.1.17: {}
+
+  type@2.7.3: {}
+
+  typescript@6.0.3: {}
+
+  ufo@1.6.4: {}
+
+  unconfig-core@7.5.0:
+    dependencies:
+      '@quansync/fs': 1.0.0
+      quansync: 1.0.0
+
+  unconfig@7.5.0:
+    dependencies:
+      '@quansync/fs': 1.0.0
+      defu: 6.1.7
+      jiti: 2.7.0
+      quansync: 1.0.0
+      unconfig-core: 7.5.0
+
+  undici-types@8.3.0: {}
+
+  unimport@6.5.0(oxc-parser@0.131.0)(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)):
+    dependencies:
+      acorn: 8.18.0
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      local-pkg: 1.2.1
+      magic-string: 1.3.1
+      mlly: 1.8.2
+      pathe: 2.0.3
+      picomatch: 4.0.7
+      pkg-types: 2.3.3
+      scule: 1.3.0
+      strip-literal: 4.0.0
+      tinyglobby: 0.2.17
+      unplugin: 3.3.0(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      unplugin-utils: 0.3.2
+    optionalDependencies:
+      oxc-parser: 0.131.0
+      rolldown: 1.2.8
+    transitivePeerDependencies:
+      - '@farmfe/core'
+      - '@rspack/core'
+      - bun-types-no-globals
+      - esbuild
+      - rollup
+      - unloader
+      - vite
+      - webpack
+
+  unist-util-is@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.2:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
+  unist-util-visit@5.1.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
+  unocss@66.10.1(@devframes/hub@0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4)))(cac@7.0.0)(crossws@0.4.12(srvx@1.0.4))(rolldown@1.2.8)(srvx@1.0.4)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)):
+    dependencies:
+      '@unocss/cli': 66.10.1
+      '@unocss/core': 66.10.1
+      '@unocss/preset-attributify': 66.10.1
+      '@unocss/preset-icons': 66.10.1
+      '@unocss/preset-mini': 66.10.1
+      '@unocss/preset-tagify': 66.10.1
+      '@unocss/preset-typography': 66.10.1
+      '@unocss/preset-uno': 66.10.1
+      '@unocss/preset-web-fonts': 66.10.1
+      '@unocss/preset-wind': 66.10.1
+      '@unocss/preset-wind3': 66.10.1
+      '@unocss/preset-wind4': 66.10.1
+      '@unocss/rollup': 66.10.1(rolldown@1.2.8)
+      '@unocss/transformer-attributify-jsx': 66.10.1
+      '@unocss/transformer-compile-class': 66.10.1
+      '@unocss/transformer-directives': 66.10.1
+      '@unocss/transformer-variant-group': 66.10.1
+      '@unocss/vite': 66.10.1(@devframes/hub@0.9.18(crossws@0.4.12(srvx@1.0.4))(devframe@0.9.18(cac@7.0.0)(srvx@1.0.4)))(cac@7.0.0)(crossws@0.4.12(srvx@1.0.4))(srvx@1.0.4)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+    transitivePeerDependencies:
+      - '@devframes/hub'
+      - '@devframes/hub-ui'
+      - '@modelcontextprotocol/client'
+      - cac
+      - crossws
+      - ocache
+      - rolldown
+      - rollup
+      - srvx
+      - vite
+
+  unplugin-auto-import@21.1.0(@vueuse/core@14.4.0(vue@3.5.42(typescript@6.0.3)))(oxc-parser@0.131.0)(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)):
+    dependencies:
+      local-pkg: 1.2.1
+      magic-string: 1.3.1
+      picomatch: 4.0.7
+      unimport: 6.5.0(oxc-parser@0.131.0)(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      unplugin: 3.3.0(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      unplugin-utils: 0.3.2
+    optionalDependencies:
+      '@vueuse/core': 14.4.0(vue@3.5.42(typescript@6.0.3))
+    transitivePeerDependencies:
+      - '@farmfe/core'
+      - '@rspack/core'
+      - bun-types-no-globals
+      - esbuild
+      - oxc-parser
+      - rolldown
+      - rollup
+      - unloader
+      - vite
+      - webpack
+
+  unplugin-utils@0.3.2:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.5
+
+  unplugin-vue-components@32.1.0(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))(vue@3.5.42(typescript@6.0.3)):
+    dependencies:
+      chokidar: 5.0.0
+      local-pkg: 1.2.1
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      obug: 2.1.4
+      picomatch: 4.0.5
+      tinyglobby: 0.2.17
+      unplugin: 3.3.0(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      unplugin-utils: 0.3.2
+      vue: 3.5.42(typescript@6.0.3)
+    transitivePeerDependencies:
+      - '@farmfe/core'
+      - '@rspack/core'
+      - bun-types-no-globals
+      - esbuild
+      - rolldown
+      - rollup
+      - unloader
+      - vite
+      - webpack
+
+  unplugin-vue-setup-extend-plus@1.0.1:
+    dependencies:
+      '@vue/compiler-sfc': 3.5.42
+      magic-string: 0.26.7
+      unplugin: 1.16.1
+
+  unplugin@1.16.1:
+    dependencies:
+      acorn: 8.17.0
+      webpack-virtual-modules: 0.6.2
+
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.18.0
+      picomatch: 4.0.7
+      webpack-virtual-modules: 0.6.2
+
+  unplugin@3.3.0(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)):
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      picomatch: 4.0.5
+      webpack-virtual-modules: 0.6.2
+    optionalDependencies:
+      rolldown: 1.2.8
+      vite: 8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)
+
+  update-browserslist-db@1.3.2(browserslist@4.28.9):
+    dependencies:
+      browserslist: 4.28.9
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
+  vite-plugin-svg-icons-ng@1.9.3(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)):
+    dependencies:
+      svg-icon-baker: 2.1.1
+      tinyglobby: 0.2.17
+      vite: 8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)
+
+  vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0):
+    dependencies:
+      lightningcss: 1.33.0
+      picomatch: 4.0.7
+      postcss: 8.5.28
+      rolldown: 1.2.8
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 26.1.1
+      fsevents: 2.3.3
+      jiti: 2.7.0
+      sass: 1.104.0
+      yaml: 2.9.0
+
+  vitest@4.1.11(@types/node@26.1.1)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)):
+    dependencies:
+      '@vitest/expect': 4.1.11
+      '@vitest/mocker': 4.1.11(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      '@vitest/pretty-format': 4.1.11
+      '@vitest/runner': 4.1.11
+      '@vitest/snapshot': 4.1.11
+      '@vitest/spy': 4.1.11
+      '@vitest/utils': 4.1.11
+      es-module-lexer: 2.3.2
+      expect-type: 1.4.0
+      magic-string: 0.30.21
+      obug: 2.2.1
+      pathe: 2.0.3
+      picomatch: 4.0.7
+      std-env: 4.2.0
+      tinybench: 2.9.0
+      tinyexec: 1.3.1
+      tinyglobby: 0.2.17
+      tinyrainbow: 3.1.1
+      vite: 8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 26.1.1
+    transitivePeerDependencies:
+      - msw
+
+  vscode-uri@3.2.0: {}
+
+  vue-component-type-helpers@3.3.11: {}
+
+  vue-cropper@1.1.4: {}
+
+  vue-i18n@11.4.10(vue@3.5.42(typescript@6.0.3)):
+    dependencies:
+      '@intlify/core-base': 11.4.10
+      '@intlify/devtools-types': 11.4.10
+      '@intlify/shared': 11.4.10
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.42(typescript@6.0.3)
+
+  vue-json-pretty@2.6.0(vue@3.5.42(typescript@6.0.3)):
+    dependencies:
+      vue: 3.5.42(typescript@6.0.3)
+
+  vue-router@5.3.1(@vue/compiler-sfc@3.5.42)(pinia@4.0.3(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.42(typescript@6.0.3)))(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))(vue@3.5.42(typescript@6.0.3)):
+    dependencies:
+      '@vue-macros/common': 3.1.4(vue@3.5.42(typescript@6.0.3))
+      '@vue/devtools-api': 8.2.1
+      ast-walker-scope: 0.9.0
+      chokidar: 5.0.0
+      confbox: 0.2.4
+      local-pkg: 1.2.1
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      muggle-string: 0.4.1
+      nostics: 1.2.0
+      pathe: 2.0.3
+      picomatch: 4.0.7
+      scule: 1.3.0
+      tinyglobby: 0.2.17
+      unplugin: 3.3.0(rolldown@1.2.8)(vite@8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0))
+      unplugin-utils: 0.3.2
+      vue: 3.5.42(typescript@6.0.3)
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.42
+      pinia: 4.0.3(@vue/devtools-api@8.2.1)(typescript@6.0.3)(vue@3.5.42(typescript@6.0.3))
+      vite: 8.2.2(@types/node@26.1.1)(jiti@2.7.0)(sass@1.104.0)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - '@farmfe/core'
+      - '@rspack/core'
+      - bun-types-no-globals
+      - esbuild
+      - rolldown
+      - rollup
+      - unloader
+      - webpack
+
+  vue-tsc@3.3.11(typescript@6.0.3):
+    dependencies:
+      '@volar/typescript': 2.4.28
+      '@vue/language-core': 3.3.11
+      typescript: 6.0.3
+
+  vue-types@7.0.0(vue@3.5.42(typescript@6.0.3)):
+    optionalDependencies:
+      vue: 3.5.42(typescript@6.0.3)
+
+  vue@3.5.42(typescript@6.0.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.42
+      '@vue/compiler-sfc': 3.5.42
+      '@vue/runtime-dom': 3.5.42
+      '@vue/server-renderer': 3.5.42
+      '@vue/shared': 3.5.42
+    optionalDependencies:
+      typescript: 6.0.3
+
+  vxe-pc-ui@4.18.9(vue@3.5.42(typescript@6.0.3)):
+    dependencies:
+      '@vxe-ui/core': 4.4.21(vue@3.5.42(typescript@6.0.3))
+    transitivePeerDependencies:
+      - vue
+
+  vxe-table@4.21.9: {}
+
+  webpack-virtual-modules@0.6.2: {}
+
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  wildcard@1.1.2: {}
+
+  xe-utils@4.0.13: {}
+
+  xml-naming@0.3.0: {}
+
+  yaml@2.9.0:
+    optional: true
+
+  zigpty@0.2.1: {}
+
+  zod@4.6.1: {}
+
+  zrender@6.1.0:
+    dependencies:
+      tslib: 2.3.0
+
+  zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..41db3e3
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,10 @@
+packages:
+  - '.'
+
+allowBuilds:
+  '@parcel/watcher': true
+  es5-ext: true
+  esbuild: true
+
+overrides:
+  esbuild: 0.28.1
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..3f919d8
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/ie.html b/public/ie.html
new file mode 100644
index 0000000..2bd1c9e
--- /dev/null
+++ b/public/ie.html
@@ -0,0 +1,258 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>请升级您的浏览器</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <base target="_blank" />
+    <style type="text/css">
+      html,
+      body,
+      div,
+      span,
+      applet,
+      object,
+      iframe,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p,
+      blockquote,
+      pre,
+      a,
+      abbr,
+      acronym,
+      address,
+      big,
+      cite,
+      code,
+      del,
+      dfn,
+      em,
+      img,
+      ins,
+      kbd,
+      q,
+      s,
+      samp,
+      small,
+      strike,
+      strong,
+      sub,
+      sup,
+      tt,
+      var,
+      b,
+      u,
+      i,
+      center,
+      dl,
+      dt,
+      dd,
+      ol,
+      ul,
+      li,
+      fieldset,
+      form,
+      label,
+      legend,
+      table,
+      caption,
+      tbody,
+      tfoot,
+      thead,
+      tr,
+      th,
+      td,
+      article,
+      aside,
+      canvas,
+      details,
+      embed,
+      figure,
+      figcaption,
+      footer,
+      header,
+      hgroup,
+      menu,
+      nav,
+      output,
+      ruby,
+      section,
+      summary,
+      time,
+      mark,
+      audio,
+      video {
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+        margin: 0;
+        padding: 0;
+      }
+      article,
+      aside,
+      details,
+      figcaption,
+      figure,
+      footer,
+      header,
+      hgroup,
+      menu,
+      nav,
+      section {
+        display: block;
+      }
+      body {
+        line-height: 1;
+      }
+      ol,
+      ul {
+        list-style: none;
+      }
+      blockquote,
+      q {
+        quotes: none;
+      }
+      blockquote:before,
+      blockquote:after,
+      q:before,
+      q:after {
+        content: none;
+      }
+      table {
+        border-collapse: collapse;
+        border-spacing: 0;
+      }
+      a {
+        text-decoration: none;
+        color: #0072c6;
+      }
+      a:hover {
+        text-decoration: none;
+        color: #004d8c;
+      }
+      body {
+        width: 960px;
+        margin: 0 auto;
+        padding: 10px;
+        font-size: 14px;
+        line-height: 24px;
+        color: #454545;
+        font-family:
+          'Microsoft YaHei UI', 'Microsoft YaHei', DengXian, SimSun, 'Segoe UI', Tahoma, Helvetica, sans-serif;
+        overflow-y: scroll;
+      }
+      h1 {
+        font-size: 40px;
+        line-height: 80px;
+        font-weight: 100;
+        margin-bottom: 10px;
+      }
+      h2 {
+        font-size: 20px;
+        line-height: 25px;
+        font-weight: 100;
+        margin: 10px 0;
+      }
+      em {
+        color: red;
+      }
+      p {
+        margin-bottom: 10px;
+      }
+      hr {
+        margin: 20px 0;
+        border: 0;
+        border-top: 1px solid #dadada;
+      }
+      span {
+        display: block;
+        font-size: 12px;
+        line-height: 12px;
+      }
+      .clean {
+        clear: both;
+      }
+      .browser {
+        padding: 10px 10px;
+      }
+      .browser li {
+        width: auto;
+        padding: 0 80px;
+        margin-top: 30px;
+        height: 34px;
+        line-height: 22px;
+        float: left;
+        list-style: none;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAADMCAYAAAAWCXEwAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaOWJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHiwmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryMAgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0lYqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHiNLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYAQH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6cwR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBiewhi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1cQPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqOY4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hMWEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgohJZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSUEko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/pdLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Yb1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7OUndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsbdi97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxrPGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H08PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+Hvqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsGLww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjgR2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWYEpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1IreZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/PbFWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYji1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVkVe9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0IbwDa0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vzDoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+yCW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawto22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtdUV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3rO9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0/rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv9563Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+UPPR+mPHp9BP9z7nfP78L/eE8/sl0p8zAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAC7ESURBVHja5Lx5dFRV1rBfgHwYRQQVtB26ZWhtabtfeUGxGxFbUGZF8RMHGkVbRkekVYiKisicVhE0gEwBokgDAhEMMSSQkAECwcxkrlRSqVTqJqnxzs/vj5t7qUyAvr9e37fWV2vtleSm6p6n9t5nn733OVU2RaUaEP5PiqJSbeMXPBTA5/Xhzk9Vnd9vo3HFx21E2LYJX9IRgh6npvyCe9uaqS4K4C3IpXHFx9S99CTuJ8Z0KLVjRlA7ZgTuJ8ZgXxmJL+kIlwAkXBQk6HFq9pWRVA8fSvXwodYgdS892a6EA1UNvouqwXdR99KTeAtyfz2IL+kI1cOHYh9wqwVwKWJqpXbMCOv19gG3Imzb1JF2OgZxfr/NukH4jcNVfyEAE8IU+4BbKet1PfaVke3BtA/i/H6b8aIBt7a4mWmaC0nr55vmqRp8F5V33Mm5LhHtwbQF8SUdsSDCb1I1+K42g1xIWgOYYh9wK+e6RCBs29QxSIWus37aJM51iWjx4so77mwD1d5AHQ1eecedlN9yuyVlva6nrNf14Q7cEmRn4W7u3T2E9ME3UX7L7W1uZg5Weced1s3sA2613ql5LXzQjuRclwjcT4wxTXQeRHC7GLdnHPeensiCVwa3e0PznZk3EbZtwluQa0kofz8NcVNxr++Ce30XnNuv61Bcu7viXt8Fvyu7JYipjfGHxzD+8Bh2j+7fAiZcC+Y0zPDIbCyD6DyV6DyVeDcIQR2C39J4oieNJ3oSOnkVcnZ35Ozu6MVdDHF0N6S4C43OqJYg/0ydzb27hzDx0FjuPT2R+asfa6OVsl7X40s6QoWus/CQk6fWZPHChhxe3lbMCxtyrN9TyxSQSwidvMoC0XK6tRGybPjSRmOuNUKVo4Zxe8YxIu4+Jh4ay/jDY7j39MQWWjnXJYLGFR9Toes8tSaLiavTrIHDxfxfapkCwW8hy9YuhCmhk1fR1FRnaCS1NM4yy8RDYy2tjIkZRXq/HtYsCnqc2sJDTkYsTrU00J6YkEJQR7M/eEGY0MmrcOenqjZA2JmyzTJLuJiOe65LBHUvPUmGR2bE4lQmrk7jqTVZHcrE1WkMWpRIdJ4KnpUXBCHLRl3e16EWIOEaMU00/vAY9na/gsYVH/NdgYe+8w9bMBeSQYsSWXjICcFvL2ga+dhlFwcJ10rjio/ZklprgbSWiavTWvzdd/5hXt5W/OtATC201sq9u4eQ+PVijmSW0nf+YQYtSmTQosR2gUYsTmXQokT6zj9saeRCpmkJ0hxD2gOZeGgsI+Lu45+ps7FXlFmDmDDtSd/5h+k7/zCpZQpa9cwOQciyIR+77LyzFhXlMyZmFOP2jLP8orVWRsTdR2ppHFtSa+k6ZZM1WHvSdcomwyxySceayO4OWTY88TdirygzUkWf18eL2//RQiutYcwYE/Q4tagDOUQ8uo6uUzbRZ3qMJV2nbCLi0XU8tSbrolNXzu6OfOyylgEN4NOkaO5acw/j9ozr0ET37h5imehIZimPL91rAfSZHsOQBfuISS7E7vaTETeX0MmrOoQInbwK+dhlNKWsahni0zPSuGvNPW1M1BrI1NrOwt0WkCn2ijJSS+MYt2ccuQk3oxd36RCi8URPY+HLT1VbgGiSzPsx71laCddMe2Yygf6ZOtuScXvG0XfJn/n8YL+LQnjibyQ34WZ8Xl/bfKSoKL+FVi4EYwKZcu/uIQzaPoExMaPQcrq1ADFX33AI1+6u1OV9HVI6ShU/TYqm75I/dwjTHtDEQ2MZt2ccg7ZPaGGScIDWEBlxc42UoSMQ00StYdoDCgcbtH0Cbx+8p40ZTIBwiFM7RmB3+y+exZvT2YRpDdR6ZoVrw1xRWwN44m/Euf06A6Ki7NLrmnDNmH7TEdSg7RP4/GA/yLK1GdwEKNzSk1M7RlDlqPl1JefOlG2MXTGmXaAxMaMsB/XE34h4tH+7ANlrB7T2iV8OAlDlqOH9mPcsIBPKlF3R16Ad7GwlxoVberYAKCrKv1ghfmkg5sPldLIzZVsLqLErxpC9doAlp3aMICNurlGyVpRdSAu/HqS1Q58rd1JUlI87P1UtKsrHXlGG3e1HCOoov+x2wiX3RxT+o49L1IgutXxVUCfDIxNfLraQDI+M3e3/NdCXbhohqBNfLrIsVzZqmoT6dmXG0SBLTrmJLxd/CVRLECXcDGFaSC1TmHE0yKg4B0P2uxiy38WoOAePHaptAfHYoVqG7HcxcGc5o+IcfFfgsbQUPoYoSa213BbE78oGucTSwpJTbobFFjNgbQHdvi6g8/Z6Om+vZ8h+VxsQE7T/97UMWFvA+Og0UvIryfDIZBQ4CeXvt8a5IAhAY/RImlJWUaHrPHaolhuXFXHN+8e58qNcbomq5P6t3xG973WePLzPgnnsUG0LiP7f1zJwZzk3LisyctfSOFxOJ4lfLzYToQubxu/KpmpWBFWzInguOokrP8ql7/zDRMxLpFfUabasHwlZNnITbmbgznI6b6+3Bu7/fa2lrW5fF9Ar6jQD1hYwLLaYx5fupdi+EiGok748koa4qa010xKkKWUV2UM7kd6vB7tH9yfpnUFkLzQiZOGWnmgHO9N4oie9ok5bA4YPbkqvqNNc8/5xIuYl8tSaLOLLRXambENXF+PxNJD0ziAanVHhYaEliH1lJD/1iqD0qSsIzu2M/N550TZ3QjvYmS3rR1qDtwdhgpgwnabGMj46zRjQsxJdXYw7P1X1pY0GuaRjkMKxPah5qxuV8y6nct7l1LzVDfdyo6miHexM+ou9mblwKfdv/Y77t37HNe8fbwMQDhIxL5FOU2PZklqLJjUYdU7wWxBuN+ricBAF0KQG6pcNovZpw0fCQao/MEBcu7tSOLYHjnu7EZzbmeDczqyfNokrP8ptMXi4XDnzAJ0n72TIgn1oUoMB4VlpgIjj24I0payi9KkrqHj+Ssth2wM5c38f8p68D2nbHKRtc3h86d42A/eZHsOVMw9Y0nXKJmxDvyS1NA70z8Gz0qh5hNvbzpr6ZYMofzyiBUwLkOVdjfR/eVcao0dSl/d1aHx0GhHzEi0TXDnzAJ2mxtJpaixdp2yypM/0GLrcs5D3Y94ztNDsK7qjuxmzDBBz2rYGqZoVQc1b3dr4yfppk+g8eWeLd91aAxGPrqPbyKV0G7mUiEfXMWdz+nmQ0Jsgn1AbT/SkMXrkeZC6vK9DpU9d0S5I5bzLqf6gq6UV7WBn5q9+zDJBuEQ8us4SE6LLPQvpcs9CjmSW4ndlo1XPNBxWLiE34WbSX+wNapEBEsrfT/njERSO7WGBmDA1b3Wj9KkrSO/Xg1WjBjJl/CT+8sQ8a0BT/eGDhwN0uWchXe94ia07YkE+oSLc3gxyQt2yfiSrRg0E+YRqgRSO7UHh2B4UT7ragqmcdznFk67mp14ROO7txpTxk7AN/bLFgN1GLsU29EvrejiACdG59xQjKgu3GzVP9UwIvcmCVwYb102NmBHVBDFNVDUrgjP39yF98E0E5xox5Dcj5lsDhwOYQObg4dK59xR2RV8D4njEo/0NIEd3dkVfgy9t9HkfMTWSO6pXG63kjupF8aSrqXj+SoJzO1M573KmjJ/Eb0bM5y9PzGPBK4Mp3GKUEFvWj+Q3I+a3AOjcewp/eWKesUQ0T1mz2att7oSU9+F5EE2SqXvpSbKHdrIGNmHCoapmRVgh33LezZ3QNncyloGDnVnwyuA2IFvWj0Q+dplREzu6Wy0r9/KubVvg9pWRpPfrwZn7+1haMSHCxdSM/J4RWWufjiC9Xw/m9PgtN9w0uo1JbrhpNI0njAXTrAIbT/TEvb4LjdEj2641vqQjpPfrQfrgm1qYKHxKlz51BbmjerFj4G2WtAYwtWDKglcGG2ZoXrldu43AWDUrAmnbnLaRVZMayHvyPn7qZThoa38pfeoKap+OIDi3M6tGDeSGm0a3GTT82g03jeaGm0bj3H4d8rHLrN0I93LDpDsG3kb68si2a425hfZTrwjSB9/UBiZcM+YM6ghoyvhJpL/Ym+yFhknc67tYQVF+z3gjc3r8Fuf32zpOFTMeHXpRGDNfMYF2j+7PqlEDWTVqIOkv9rZ8SNvcCff6LlTOu9yK1Okv9mZOj9+S8ehQNKmBDhs17vxU9adeES1gwoHKH49oFyhcwhfKynmXWzOu4vkryR7aieyhnQjl7+84QzNNJGzbxN7uV1gw7WmntYZaLw2mmNdrn44ge2gnztzfx9od7zBnDa9t0pdHtgsTDhRustaaCndwEyLj0aG481PVS9r3FSUJj6eBrConMZHvnodpntrh2gkHCgcLl/TBN7G3+xXGLMlIo0LXjU7ixeoaUZIQ3C7OlTtJya8kJvJddgy8DctvWgGFaylcHPd2Y2/3K5jT47esGjWQrTtiyapy4nI6jUrvUmpfUytFRfmkZ6SxdUcs66dNYsfA2ywNtQBrJeb/dgy8jZjId/kx4YgF4fP6Ln1L3uyhhWvnSGYpOw6lEBP5LuunTWLDAw+x4YGHrAi74YGHWD9tEuunTSIm8l227ohtAyBK0i8/pNDagTVJxuf1YXf7OVfuJKvKMF16RhrpGWkcySwlJb+SrCqn1awRgjqaJP9nO0b/Zxo1v+ahS0ZqKJ9QCX5rJMyhN42aRj6h/udB5BKjiAp+i64uNrJ2M0Vs3rUiy4aU92G42X49iCYZDZjUMoX4ctFIcILfGgVU6E0LwEyCxKP98aWNxpc2GvFof+RjlyHlfdjxWnOxh93tJya5kIWHnDx2qJbnopP4NCmaYvtKC0LL6WYkQps70RA3laaUVbjzU1V7RRn2ijK8BbkWUJsM7VIAog7k8MyuPKtD1AJA/9zQQpYN9/oubFk/kpkLl7J4a0KbtrdZa/vSRrfMWS8GcSSzlGd25TH5VIjptTpR9T5SS+OMsrHZD3RHd7SDnTm1YwSzY2KsTtL46DSei07iSGZpm/tKeR8a5gnf0+vI8zfE5zAstpjptTrvifBJeeZ5LTQDkGXDtbsr0fte59mjDmaWaUyv1ZlZpvH3XJlRcQ6Grj5OTHJhy/t7VhrpwMVAog7kMCrOwcs+nZWaccak2L7S0oLpC6d2jGDJiUyWN8E6FVZqsLwJ5ruwYO5O9jFoUSIb4nPOT+/gtxf3kZjkQobFFreAaHRGGZoQbm+hhWd25fHsUQevHilgbo7bAmoNM2S/i6Grj3Mks9Tolcgn1Hb39MzHuXInw9edZrJd4z3xPISuLrYgCrf0ZOuOWKLzVFLLFDIKmlfr5EJmHMxhfoWvDczkUyELxl5RduFUUZNkIvdm8+BpkZd9eocQPyYc6XDnocpRQ+TebObmuFmptdTK5FMhBqwt4K1vMi4cWTMKnIyKczDZrvFJeWaHEBdrbVc5aphxMIflTR1rJaPA2TFI1IEc7k72tZwdYRCLtyZc6h4MMcmF7WrlwRSRAWsLiNyb3T6Iz+vjmV15jIpztIHwxN/I7JgY4svFS47CHk9DG62Y5hm4s5zx0Wntb0CnlikMiy3m06ToFpFSO9iZnSnbeGZXHkcyS8kocF6SHMksZc7m9AuaJyW/si3IltRaZsfEGNM09KZVs2bEzWV5EyzLlXn1SEG7MuNgTruy5JS73dlzd7IvPMi1BIlJLmRnyjbLJFawar7ZHi5NdrSS9jRyd7KPXlGnzQDXyjSlcYY2mk1SuKUnS05kslI7f9M9/HKgdaoh74nn/cR02NV7M9t2A9A/t/qf2uZOvB/zHvNdxk3Mm0bV+36VzK8wxHTWVutPmEbkE6q1hjQ3/yefCvGeeB7k1SPGlLsUeeubDOtnezJnczpvfZPBuXJnGEjzAqSri9FyulG4pSf3b/3OCvErNQNmxsEczpU70ST5kuWXJc9yiZXemQ3du5N9TK/VedmnW1qZm+M+v3r+gpTS42nA42nA5XRa4vE0hFd8zSDBb63cInvtAAYtSuTuZB+T7ZoFYy7tz+zK6+igQZtHRoGTyL3ZLab4M7vyGB+dxpAF+1i8NaEliLmWyNndsa+MZPi60/T/vpaJhTKT7ZqllZWaoZW3vsnA42m4IMS5cifPRScxN8fNeyK87NOZXqszsdDITa55/3i4dgVb0OPUTG2IR/vjzk9Vt6Qau5R3J/uYWCi3MJEJM2dzOkcyS80Q3WKrPia50IIIX2cmnwrxYIpIr6jTPBed1Mo0apFgpv0NcVMR3C5ESWLO5nS6fV3Ag6fFdmHmV/iYcTCHyL3ZRB3IsSRybzbP7MpjfoWvXYj+39cyZME+c7aEgTQ36smy0RA31dostrv9DF193IIJ9xcTxgSam+O2xAQwg9fMMo2JhTIPnjYgBi1KbC+RPq8REyR8iT9X7rRgWptpvssYLBwqHGB6rc7fc2ULYsh+F4MWJbLjUErH09c8ytcaxNTMCxtyGLC2oIUDT6/VO5TJdkMLJsTAneUMWpTYNotvE0eaj3rKxy6zun2t69mdKdt4fOley4lN35ls11pIOIC51D8XnWQu9xcGUQCteibyscuM5n31TKNqD5fm1H9DfA7PRScxdPVxhsUWMyy22Dq4MGS/i2GxxQxfd9oC2HEopb1WVcdtCU2Sqcv7OmTWpGbRLOV9SCh/P0GPUwvPvDIKnMQkFxK5N5s5m9N5LjqJ56KTeOubDFbvzSQlv7LN1P5FxzZ8Xp918v8SWk5WsWStLbr0a5oLHRdY/+GjPP8vtq7+0yCiJOHz+hDcLlxOJ2bzxeV0Irhdlk/9x0B8Xh9VjhoEt6s5rZTaFU1qQHC7qHLU/PpZ05EGqhw1uJxO0CVESSIlv5KoAznM2ZxufTJgzuZ0og7kkJJfaR1mcjmdVDlqflkc6ahSs1eUWdMzJrmQQYsSrYMJNy4raiHmYQWzD2IC2SvKLpa/dAzi8/qsc6cZBU6GLNjHlTMPcEtUJVMSdd45qRGdp7KxDOvDPu+c1JhxNMgtUZVcOfMAQxbss0K7vaLsQqbq+GCtCbEhPodOU2O58qNcZhwNsrMK4t0Xlp1VMONokCs/yqXT1FgrE7sATPvbJK0hblxWxDsnNWugvc7zcqFry3JlbomqbANzSdskpk9kFDjpOmWTpQnzne6sMgbbWWWYY8kpN0tOuYnOU1v8z9TcOyc1blxWRNcpmwwz6dLFjxr7vD5rY+eO13YSMS+Rh/co1iAby4wBluXKLDnl5rsCD1lVxk7FdwUelpxysyxXbvHcjWUwYb9CxLxE7nhtp7X10spELUHMMiHqQA6dJ+9k8KYaJh1u6ZRLTrnZklrb+hS3lURtSa1lySm39fyNZTAlUWfwpho6T95p1rqtS5LzICapJsmWNkbEBpiSqLMs1/gY3DsntfAuT4tDlkrYtci92bxzUmNjmaG9KYk6I2IDbbTStsBqjhma1EBKfiVdp2xiwNoCHt6jMOmwxjsnNev46KWUkaIksfCQk2W5Mu+c1Jh0WGPCfoUBawvoOmWT1d4Miy3nQczIuXpvJp2mxjJ4Uw0T9hsg09KM6fhcdBIxyYWXJM9FJzHjaJBpaTDpsAEzeFMNnabGGhVec+RtA1LlqAFd4vGley0Q8wZTEnWmpWGdWX3sUC3PHnW0K+b/n0qoZ1oaTEszfCQc5PGle0GXwv0k7PxI87S9EMjMMo35rvMdILPDbErrzlA4iOmw4SBh0/iXgUxLg8mnQvw9V2Zmmdau/D1XtpoxpiYe3qPw8B6FW6IqreOCvwpkWhqMinMwaFEi46PTfrFMXG38HLr6OHe8ttPykXZNYzrr4q0JdJoay4C1BS2cdfCmGuZsTrd6Hv/T5ozZJ7no9L1xWZE1fU0bD193unXx3GESFZNcyIb4nDazaUN8Dh6PkTy1O307CmgT9itM2K9YWnkuOumi26wTV6dZR43NXOXKj3LpPHknEY+us0DaDWiWnwCr92bSdcomBm+q4eE9ShsThTXh2jRn5mxOZ/CmmjYzZkRsgE5TY40Q33bhu/iiF66VcJjh604TuTfbUnnk3myGrzttQZgzZtJhzQrvfabHWGNccNELnz2tfSUcJjxADVhbwIC1BdYsMyOp+fyH9yhWGnAks/TS0gDTV4qK8q2NxU5TY7klqrIFTDhQ6+gZ/hwzdoSbpKgo/9LPj5hnR8yUwEwVw810MRkRG7BSRXPpLyrKv/RUsT2YI5mlLZLnEbEBK1q2lhGxASt5vuO1nZY5ioryL5TJX7icENwuioryjV1rr4+oAzkMWbDvouXEkAX7iDqQg8/rQ5MaLgZxaQWWJslWSWkWWBkFzl9UYP2PvgjFPNrj8/osM/2YcIQfE46QnpFmfL7K7SLocWpBj1Mz6+D0jLQWzzPb3b/6aI8SVnCbvXTTVOZxno6kqCjfKlPNUH4pIP9XPGz/N319UFnrf2iKLGi6LmggqCBoIOi6JuiqIqCrgqIrgqyrgoYu6JpiiK4LKgigCpquCCEdQdVVAU0VdP2iMGW29tplmtbcQNQ1QEXXNDQdQGsWHZBbvdQsKkTQfaiaBJrc/PyLPpQ2zqqbL9U10GV0TUbTZUCyQAoaJPaVinx5RmbVKZnVWRpf56r8WKlQFww2Q4bf8VdMXwsEtfkdGb97xSAb8yRG7df4zYYQ3deEsK2WsK1UsK1U6LIqxJWfKQzcEODVw0GS7KbG1F8Pout6C7WuL5Dpv1PBtlLEFgWXfyHTY61Ery91rvkiwLWfB7h6jcxV/5LoskLF9gl0+tjLI7FesuuxzKnrHeqneQdL143Bjacj6wqg4ZFUph8JYvusCdsXIldvhGvXi/T+SuS6dQrXrZO4fp3Ib76UuH5NiD6fi1z/mcgNnwa5epWMbbHG1StEvsoSjbeoq2i60h6MYNN1XTAhNF1vdlBoVFSG7/Nh+1Ti2o1Brl8v03uDyDVfN3DDVz5u+FKh15cKvdbp9FoHvT5X6PW5wjVr4LrPda6NkugTJdL1EwXbIpkVx5sdGaXZ8S9gGgNIJ6ipPHgghO3TED23h+ixTafXZpmb1ofos0ml+9dw1VcaV3wapMvKIF1WSVz+qULPzxV6faZw9Wc613yq0Xt1iN9Ehei+WMG2QObz03JHDtxsGk07P2XRmZ/hx7ZG5rqtMjdubqTHFonrNov8doPMZRvA9pmPqz8X+MNWhb/tkrg/VuGWaJXLPmmk85Imen6m0+sz6BMlcsNqP9etVujysU63jwIcrwy1N6UFm6Zrgma4KKBxrE7lyq999PnaT58dcMNWjV5bFa7d6sP2lcj/+szP6/FNHK2SqQtpSKqIKItUN2psyJH52yYXtkV+uq9UuP5fMj1XqVy9WuWGFSE6LQgxbHMQv6kVXW92B12wKZouSEjGNNMVJvwgYdugcGOsym+2q/TZqnD9dh3bVz5u3h4guVJtnpJa808zkJlBMMS7SQG6vB/gimUKvVdK9Fmu0nu5zLXLZGzvaWzLDhggmoysqwYIKoKqG+rKqVO5douP62JUfvutxg2xCn1iZTpv0rgpRuF0XQAIgRJElSUURUWWZWRZRpFlgrIKeIEg7yaC7X2FXkslei+XDVkmY1sQ4pFNDaA3hwcdNF0XbGjNZwNQWXZaxrZV5XexMjftFLnpW4ne34rYNvjZUywBQUJqEEkMoEk6oqIgySqipCCKEt6Qis8fRNEaAB+TtijYInV6Lwtx7VKRPstkIj5S6PGBRGFtwFCgApquCDYFTQANXZeZkiARsVPnlu9kfhcr0/cbiYivA4w94DM0oet4VQVJUQiJGiFRIiTKBEMSAX+QhoBIvU/C1SQCfpIKGrl8kZerFitcu0Tkuk9ErlsiYXtDYuMpYyobE0gVbIouC6DiDsgMiwtx406Z/rs0+u6WGPCNSI8tIZbnSoCCEvITkBRkWSMUkAgEJbz+EE2+IA3eAPUNjTR6fNTWSni9PuoFN/d8KtBpkcg1n3jp82GQ3h/6sc33seAHb/P6pYOmCTY0VQCNEkHhrgMhfrdL5k/fafT/XqT/boU+sRI/2r0AhESFYFDCF1TwBSWa/CE8TQHcjQFcDX6cdQGq63w43PWU1AoEmup4emMjtvl+enzop/d7Aa57N4Btvo/Z37jCHBzBpuqaAHDOHWDo/iD99in8+XuZO/er/H6fxsB/h0irDgGqoYGAhOAL0eALUd/oo87TRK2nCUddI3anQKXTTUl1DUVVNXga6nh2mwvb6066L3Bz3btOekU2YXtd5MVNDmuVVtEFm6brAmiUu4OMPODnjv0idx+UGHpQ4q6DEnf928+h0iCg0egN0OgXqW8MUCd4cXm81LgbqHIJlDs9lFd5KK90U1hWQ3GlgLOqlrs/rsQ2q45rFjq57q0yukc6sL3iYc62akBDR0fRNcGmq5oAQYSAyuQEibsPhnjgkMYD8T4ePOTnv/ZrfJrtBTWE4A3ibvRTJ3hx1jdRXddApbOeMoebEruL3Ao3p8vqOVVSR1JuDZkFtbywvgDb0zl0eqmanm+Wct2bFdhmlvP2Po/hH6qIrmiCTdNUAVVElTVeyfTz10My435UGHNE5JGfJIYf1ZiV4kFo8uILBKirD+LwBHC43Dhq6ymurqfAUU9ORS05RSU0NHmQVRW/JCMqOho6354U6DEri04z8+nxWim2fxSx8ZgLEAlJCqoiCzZZUwVZVECDjUVNDD8s8sRRlSmJOs8mwbPHZJ466iO2yI8aDNJU56a8tpGqaicOZx2FVfWcLa8lq7CMBn8IHfAGZQKSik/SQAoBOjEZtdiezqTTS/l0fzmPrFIBNB9CUCcoSYJN0TTBKymgS5TXBXn8pwCTj8lMT1WZmarx+nGR2Rk680+GOFleh9/bgMtZR3V1HYWVLvJKajiTV0pVjRsV8IVEgrLaLApeERSCAAx5/xS2+48zZvlZAmKIQFMTHq+PppAi2DRdFQIyyKIfRImoMz6ePO7lpUyJl08r/PN0iMjTEh9kS6zNEUgp92GvaaDAXstZh4DLG0JoChAMyviDMn5Jxi/K+EISIVnFr0h4JWPZ33a8mNteSCI6vhpZbMDhaqChyYfHHxRsmhYURBECoRDoMvkukVfTFN7IlHk7W+aDXIlVOSHW5ob4qhi2F4v8WNLIiSov5wLgkVVERSUYMqa2LyTjF1UCkkpQ1vGLImJAxCsai2SdKFJQ6aG0ooqK+gBuVxOCTxBsuq4IkqQSFCVCkgyqzg8lXt5J9/H+WViVJ7G+KMSOEoVdJSp77DJxdRrH3Rq5goLDJyMERRqCIt6QbPiHqBAQFSRJJSCrhGSZJklDUs/nIefsNRRXe3DWefE0NjUf21BURFEiGDRWVH9I5Nu8Rt7Pk/lXocbWIpFvKzT2VSr8YJdIcEqk1Svke2TsPhV3SMYTEmkISngDCr6QTFBSCUkqQUnFL2kEJUNLflFF1aGuyUepow6HuxG34DdyVkVRkCQFUVLxBWR0ScEfFPmuuIG1hTIxpSr/rpA46FBIqJHJdGmcqVPJa1Co9MrUBiTcQQlPQKYhoNAUUvCJCn5JJSApBCTZEr8oEVJU/IpKiaOOmnov9Q1+QyOqqiErGqKiIYk6/mAATQ4QalRItPvZU+EnvkrmxxqJRJdIVp1KTr1GQaNChVei2idTE9BwBRTqAzKeoEyjKNMkKvglhaCkNAMZogAeX4DS6npcDQE8jYHmM0aajqLqyLJOSNbwSTJev0woEKCxyU9OdZCEkgAJ1UGSBYWsBo3cRihq0qj0KVT5ZBwBjdqQRn1IRhBVGiWVRlklqOiIikZQ1hAV4ytjJE2n0ummqt6LU/AjNAYEm64jaBqoqo6iaEiKhiirBESVhkAQr9eH0ChSUu3nVGkdGY4mUmt8ZLoC5DWoFDUplHpVKnw6VT6ZWn+IuqCEJ6TQEFINzUgSflXFJ8nUe304XALVdQ3UNwaob/TT5A0ZILoO4TCyrBKSZHxBGcEfxNPgpdETwO32U+ZoIKesnrPlHrLtbn6urCfPXk+B3U2R3cO5qgbOVTVQUilwrkKgtEqguLKe4sp6yhwNlNg9VLkEhKYgjd4QTX6RYFA+X2Dpuo6maaiqiqqqKIqGKKn4QwrekERjIIC70YenMUBjk0S9EKK23our3ovb48Xj8SI0BfD4ROq9IdyNQeoa/Lg8AZxuPzV1PuobRASfguAN0egP4Q1KBEMykqwKNkAxMnpDNM1oSxhQGrKiI6oqTapIkyTiDYUIiDLBkEwoICOGjHghKxqKqqCoEooqEVJFgkqIkBIiKIsEpBB+MYA/FMAXkgiICiHRmK2KoilWo6bZRIKu61bjRdd1QdEQVBVBkzRBlVRBFhVBVTRBUXRBknVB1hAUECQQNF0XUHVB13RB0XRBVDRBUjRBUTVBUlRBlBRBlGQhJGuCJOuCouiCpuqCqqpl/7Eemqor5HnS2Ja/hPezpvCP1PuYlfo3vvo5EnfA0baH9qs+CKZpBIIh7DUuyuw1lNprqHDU4mnwoqoamq5xyn2YVTkv8cKJO3n+TH+eTB7Ao/H9eSr+TnbmrfyfgdiddZzKKaK0yklhuYN6oWVfvabay+6Tu3gzaSJPpPZm9E9XMmnvH1n60wKSanZypuEg35WuZlrCMLb9vPSXgzicdWTkFLX7vya5Dq/spk62s8v1AW+cu53ns29kSd6z/Fi9mZ/L8tpqVFfZeHYxBe7MSwdJy85v8Xd1oJwDFRtZlTeTD88+wcKsMSzMGsv8rL8wNbMnc7LuJN6xg6AcsF6TW1xBkzfQct9P8pDrSkfT1QuDKKrKz8UV1t+V3kKi89/m1YyhvHlyMPOz/ouFZ4fwYe59fJAzjLfO3s66wuep8p7jbF0iUTkzOe76/rzZ6jxUVteGtch06gL2C4PIikJFtcv6e3/ZeuamDOHNU//NivwxfFY8jnXlE/iyYiKflz/Eh4WD2Gv/CL/YQIJjI2+dvJvXTt7FtJS+LPt5OvVBY383KEoUlFaGzSz5wqb5ubC0WSsyG3PfZUbKnXzw8wOsKX6EdWUT+NI+nq8cY1nrGMnikjuJd0Xhld1sr3iTt37+IyuLHmZN0WMszxnPzLSBvJnxMMWNPxv7vUITLrdw8VlzMswnNud+xD+O3cGy3LF8ce5R1pZN4IuKsXzlGM0X1SP4uPJ2jgpraJAcfFb+CJHnbuOz8pF8UT6OL0om8nnRJFblPcrLaXfxxolROHzGd2idq7xIHBEavTQFQwAcLNvMP5Lu5JOcsawpmsRnJROIKnuYtVWjWVP9Vz6q7McRz0pUTSa2Zh6LSgeytOJPfGa/j3UVY1lTMoFPz01kdcEjLM95hNmp/8UHmU+j6MYnlrJyz3UMknHW0IbDW8rLyfexIGs4nxU8zqqi8Xx07gGiKkfyheN+ltnvJEFYGdYOFWlUqjniWcGK8iFElQ1jTek4Pi2awOqCR1iZ9wgfnx3Hs4l9+aHc+BqH2voGRFFqC+JpaEKSjOR2Y84iZqX8majcx1ieN57Xc+/hvXPD+aziAZaX30VGY0yH0/1s00E+KR7KquL7+ezceFbnT2BFzkSW5Uzg7VP38UbKQ3hCdc1aKWoLktHsG06/nbnJ9/H+6VGsyJnIC9l38kreMNaUPsKSkkHsdy26aABMcK3lw4L/5l9FY1mdP56lOeP55Ox4Psh+mOeT7+BAyUZj17O8qiWIKMkUlNoBOFQaw4zkQSw+M5bZp+7in7mPsKnkFVade4DPSsfTJNVeFCSk+lhbPIVl+Q+wMnccS8+OY/GZsXxwZjTTj9/OkqwXACi3O/H5A+dBKhy1lFQac33t2bf5R/KdvJnxFxadnkSyYzuf5j3BssIR/Kt4DBvLp/NF2dOsqXiSNRVPsKbyCeNnxZN8XjaFz4ufJrr4Bf5V8Agr8h5iWc5YPs4ey4enR/P+6YeYnfZn3kh9CAUfqgz2Gtd5kLOFpZTYjUMHH516jmlJA3jjxHCO2XexteBtFpwZyqqC0awo+huLCv7Eu4W38V7x73mvtD/vl/Xl/bJ+vFfye94tuo2F+X/g3dw/szT/b6zIHcMnZ0fz0ZmHWXT6ISKzRvJq5mBeSh5MSeNZyzyyrBggWTlFlNsNssiMKYz9oQe7i/9FmmM/r6bezZKfx7Is5yGW5f+NFYUjWHXuflaXDmN12V+JKhtGVNkwVpX9lZXFw1lRNILl+Q/ySc6DfHRmFIuyRhF5ciRvZ/6NNzPvZ3baIJ5N+AM/1xsfXcg9V47XH2wLMidpFE/9eAcVQg7Lsp7j9fShfHTmIT4+M4rIrKG8ljGAeSf78eaZfszP7sc/z/bln9n9mH+mH29m9eO1jP7MPfF7ZibfxvSE3zP1UD+eiruVxw/cxIT9fRj+764Mje3M6bqjAOQVl+MPhgyQvHPllFQapnkhfgRf5y7haNV3PJvwe945+QDvnnyAf2bcQ0zR22S7fySzbj+Z7n2cdO/jZP1eTtbvI9O9j8y6fWS49pHm3Edq9T6OV+0luXIPRyt2k1C+i/jybzhYupUfSrfjV40wX1zhQNN0A8RR66bEbjjr5p+Xc9IRz9snJvJ88h94O/N+3s64j1dS7mJLXuT/v0e/vT6qa93nnVXXdXLOlRtJi6qSWLmL8Yd682rGvcxLG8qbJ4byRuoQXj56L+UNuRcdoDHk5kDJNvaXbuZA2Rb2l21hX9nX7C3byNaCKJKr4pqnbw3+QLBlQDttxn4dPsh4hseP3sjcjP/m5dRBvJYymNdTBjMtvh8rT865KMja0wsZvqsr4/f3ZNyBnjx88CpGxV3BiAM2bt5iY8PPKwz/KKlsG1lDooTgCRJAYPKR/jyb2pcZaQOZdfyPzDn+J145/l/MSfojU364lW05yzuE2F30FU/80JcZSQN5+fifmH38Tmam3MGM1Dt4LOE6pv90DyHFCGLZ+SXtL3pn88rJCR5hbPy1TEq6jqnJv2XGsduZdfwPzD52By8n/5FZSX9g8sGbeDflGU7VHMUTqKMhVM/Z2hMsSZ/JY3G38I/E25l77I/MOv4HZhy/nRkptzE1+Rbu+beNhMrvjLEKSi+cj0T+8AaPZfTi2eQ/8Gj89fz96C3MSB7AjOTfMzPpNmYn3c7MowN4/IdrmXKoPy8l3MtLP/2Fpw7fxiMHr+HFxH7MTrqNmUm/56XkAbyY3I/pyb/jr/tsRJ542hqnOGydaRdkxv6J/DXBxvflX/Fd0Rru2W3jmYTrmZnUnxlJ/ZhxtB+zjg5g1tH+vJBwM1Pjr+fZ+Ot5PuFmZiX2Y9ZR43kvJfXlpeR+PJ90M3/da2Nm4gME5MZ2c5F2QV5OeYA/7rZxrOYgANE/f8S933ViTFxXZiX1ZfbRvsxK7MusxFuZnXgrs8JkZuKtzEi8lZlHf8espL48Gd+Lu3fbeDVpLA1BY+kvc7T7ZTktQUQlyLQjg/nzv20cyo+zrsdX7OKR/bcybLeNp368hpd+uok5ib9lbuKtzfI75ib+jtmJv2PGT7fwfMJveOj7zty/O4JPs+YjKsYUdTc04Wloav/YRusLz/04lAeTIsgsPENewfnc0is1EH32Qx47MICH913F+O//F+O/t/H4wW7877gIHtnfhXHfd2Hs91cyZl9v3k19lgLPaev15TV1NDR6Oz4/0vrC26ceYVhcL45X/GB4d2Eljf7Q+cJI9pHqiGPVqVeZd+wRZicOZ0bCvbyS9DAfpD3PnnNfUuO3ny9NVI2T+eVI8oVPGrUB2ZsfzX1HehJTtMK6FgyJZOYW0+gXf1EIz8wro9LhvKTn2lrugkMoFOS5n/7C0APXYK8tb3GepMrh5HB8Cmknz5JbXEpBSQVlFbVU2N0UlVWRW1RK1s95/JCQzMkzPyPLMpqm4ff7CQQChEIhJElCURQ0TcPsVOm6fn6tCT+oUOkq4bGE27n/qzv4KeMIwVCQQCBAbV0ttXW1VFRWkJ19lrS0DJKSj5F4NInk5OOcPHmK/Px8amtrcbvd1NTU4HQ6cbvdNDU1WTCyLKOqaguYDmvfgNzE4bIYdpWv4UT5EezuMkQl9B877PT/DQC7cLwx8LR3hQAAAABJRU5ErkJggg==)
+          no-repeat;
+        padding-left: 40px;
+      }
+      .browser .browser-firefox {
+        background-position: 0 -34px;
+      }
+      .browser .browser-ie {
+        background-position: 0 -68px;
+        margin-left: 0px;
+      }
+      .browser .browser-360 {
+        background-position: 0 -170px;
+        margin-left: -27px;
+      }
+    </style>
+  </head>
+  <body style="margin-top: 50px">
+    <h1>请升级您的浏览器，以便我们更好的为您提供服务！</h1>
+    <p>
+      您正在使用 Internet Explorer
+      的早期版本（IE11以下版本或使用该内核的浏览器）。这意味着在升级浏览器前，您将无法访问此网站。
+    </p>
+    <hr />
+    <h2>请注意：微软公司对Windows XP 及 Internet Explorer 早期版本的支持已经结束</h2>
+    <p>
+      自 2016 年 1 月 12 日起，Microsoft 不再为 IE 11
+      以下版本提供相应支持和更新。没有关键的浏览器安全更新，您的电脑可能易受有害病毒、间谍软件和其他恶意软件的攻击，它们可以窃取或损害您的业务数据和信息。请参阅
+      <a href="https://www.microsoft.com/zh-cn/WindowsForBusiness/End-of-IE-support">
+        微软对 Internet Explorer 早期版本的支持将于 2016 年 1 月 12 日结束的说明
+      </a>
+      。
+    </p>
+    <hr />
+    <h2>您可以选择更先进的浏览器</h2>
+    <p>推荐使用以下浏览器的最新版本。如果您的电脑已有以下浏览器的最新版本则直接使用该浏览器访问即可。</p>
+    <ul class="browser">
+      <li class="browser-chrome">
+        <a href="https://www.google.cn/chrome/browser/desktop/index.html?hl=zh-CN&standalone=1">
+          谷歌浏览器
+          <span>Google Chrome</span>
+        </a>
+      </li>
+      <li class="browser-firefox">
+        <a href="https://www.mozilla.org/zh-CN/firefox/new/">
+          火狐浏览器
+          <span>Mozilla Firefox</span>
+        </a>
+      </li>
+      <li class="browser-ie">
+        <a href="https://windows.microsoft.com/zh-cn/internet-explorer/download-ie">
+          IE 11 浏览器
+          <span>Internet Explorer</span>
+        </a>
+      </li>
+      <li class="browser-360">
+        <a href="http://se.360.cn/">
+          360安全浏览器
+          <span>360 Chrome</span>
+        </a>
+      </li>
+      <div class="clean"></div>
+    </ul>
+    <hr />
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..e6f7081
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-config-provider :locale="appStore.locale" :size="appStore.size">
+    <router-view />
+  </el-config-provider>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/store/modules/app';
+import { useSettingsStore } from '@/store/modules/settings';
+import { handleThemeStyle } from '@/utils/theme';
+
+const appStore = useAppStore();
+
+onMounted(() => {
+  nextTick(() => {
+    // 初始化主题样式
+    handleThemeStyle(useSettingsStore().theme);
+  });
+});
+</script>
diff --git a/src/animate.ts b/src/animate.ts
new file mode 100644
index 0000000..7a23df8
--- /dev/null
+++ b/src/animate.ts
@@ -0,0 +1,48 @@
+// 前缀
+const animatePrefix = 'animate__animated ';
+// 开启随机动画 随机动画值
+const animateList: string[] = [
+  animatePrefix + 'animate__pulse',
+  animatePrefix + 'animate__rubberBand',
+  animatePrefix + 'animate__bounceIn',
+  animatePrefix + 'animate__bounceInLeft',
+  animatePrefix + 'animate__fadeIn',
+  animatePrefix + 'animate__fadeInLeft',
+  animatePrefix + 'animate__fadeInDown',
+  animatePrefix + 'animate__fadeInUp',
+  animatePrefix + 'animate__flipInX',
+  animatePrefix + 'animate__lightSpeedInLeft',
+  animatePrefix + 'animate__rotateInDownLeft',
+  animatePrefix + 'animate__rollIn',
+  animatePrefix + 'animate__rotateInDownLeft',
+  animatePrefix + 'animate__zoomIn',
+  animatePrefix + 'animate__zoomInDown',
+  animatePrefix + 'animate__slideInLeft',
+  animatePrefix + 'animate__lightSpeedIn'
+];
+// 关闭随机动画后的默认效果
+const defaultAnimate = animatePrefix + 'animate__fadeIn';
+// 搜索隐藏显示动画
+const searchAnimate = {
+  enter: '',
+  leave: ''
+};
+
+// 菜单搜索动画
+const menuSearchAnimate = {
+  enter: animatePrefix + 'animate__fadeIn',
+  leave: animatePrefix + 'animate__fadeOut'
+};
+// logo动画
+const logoAnimate = {
+  enter: animatePrefix + 'animate__fadeIn',
+  leave: animatePrefix + 'animate__fadeOut'
+};
+
+export default {
+  animateList,
+  defaultAnimate,
+  searchAnimate,
+  menuSearchAnimate,
+  logoAnimate
+};
diff --git a/src/api/ai/agent/index.ts b/src/api/ai/agent/index.ts
new file mode 100644
index 0000000..3e4d324
--- /dev/null
+++ b/src/api/ai/agent/index.ts
@@ -0,0 +1,10 @@
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { SnailOpenApiUser } from './types';
+
+export const registerCurrentSnailUser = (): AxiosPromise<SnailOpenApiUser> => {
+  return request({
+    url: '/snail-ai/user/register',
+    method: 'post'
+  });
+};
diff --git a/src/api/ai/agent/types.ts b/src/api/ai/agent/types.ts
new file mode 100644
index 0000000..5999b1c
--- /dev/null
+++ b/src/api/ai/agent/types.ts
@@ -0,0 +1,6 @@
+export interface SnailOpenApiUser {
+  openId: string;
+  nickname?: string;
+  externalId?: string;
+  created?: boolean;
+}
diff --git a/src/api/ai/index.ts b/src/api/ai/index.ts
new file mode 100644
index 0000000..81bac90
--- /dev/null
+++ b/src/api/ai/index.ts
@@ -0,0 +1,2 @@
+export * from './agent';
+export * from './agent/types';
diff --git a/src/api/demo/demo/index.ts b/src/api/demo/demo/index.ts
new file mode 100644
index 0000000..23fcbd2
--- /dev/null
+++ b/src/api/demo/demo/index.ts
@@ -0,0 +1,63 @@
+import type { DemoForm, DemoQuery, DemoVO } from '@/api/demo/demo/types';
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+/**
+ * 查询测试单列表
+ * @param query
+ * @returns {*}
+ */
+export const listDemo = (query?: DemoQuery): AxiosPromise<PageResult<DemoVO>> => {
+  return request({
+    url: '/demo/demo/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询测试单详细
+ * @param id
+ */
+export const getDemo = (id: string | number): AxiosPromise<DemoVO> => {
+  return request({
+    url: '/demo/demo/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增测试单
+ * @param data
+ */
+export const addDemo = (data: DemoForm) => {
+  return request({
+    url: '/demo/demo',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改测试单
+ * @param data
+ */
+export const updateDemo = (data: DemoForm) => {
+  return request({
+    url: '/demo/demo',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除测试单
+ * @param id
+ */
+export const delDemo = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/demo/demo/' + id,
+    method: 'delete'
+  });
+};
diff --git a/src/api/demo/demo/types.ts b/src/api/demo/demo/types.ts
new file mode 100644
index 0000000..ea51d32
--- /dev/null
+++ b/src/api/demo/demo/types.ts
@@ -0,0 +1,90 @@
+export interface DemoVO {
+  /**
+   * 主键
+   */
+  id: string | number;
+
+  /**
+   * 部门id
+   */
+  deptId: string | number;
+
+  /**
+   * 用户id
+   */
+  userId: string | number;
+
+  /**
+   * 排序号
+   */
+  orderNum: number;
+
+  /**
+   * key键
+   */
+  testKey: string;
+
+  /**
+   * 值
+   */
+  value: string;
+}
+
+export interface DemoForm extends BaseEntity {
+  /**
+   * 主键
+   */
+  id?: string | number;
+
+  /**
+   * 部门id
+   */
+  deptId?: string | number;
+
+  /**
+   * 用户id
+   */
+  userId?: string | number;
+
+  /**
+   * 排序号
+   */
+  orderNum?: number;
+
+  /**
+   * key键
+   */
+  testKey?: string;
+
+  /**
+   * 值
+   */
+  value?: string;
+}
+
+export interface DemoQuery extends PageQuery {
+  /**
+   * 部门id
+   */
+  deptId?: string | number;
+
+  /**
+   * 用户id
+   */
+  userId?: string | number;
+
+  /**
+   * 排序号
+   */
+  orderNum?: number;
+
+  /**
+   * key键
+   */
+  testKey?: string;
+
+  /**
+   * 值
+   */
+  value?: string;
+}
diff --git a/src/api/demo/tree/index.ts b/src/api/demo/tree/index.ts
new file mode 100644
index 0000000..69ebcba
--- /dev/null
+++ b/src/api/demo/tree/index.ts
@@ -0,0 +1,62 @@
+import type { TreeForm, TreeQuery, TreeVO } from '@/api/demo/tree/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+/**
+ * 查询测试树列表
+ * @param query
+ * @returns {*}
+ */
+export const listTree = (query?: TreeQuery): AxiosPromise<TreeVO[]> => {
+  return request({
+    url: '/demo/tree/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询测试树详细
+ * @param id
+ */
+export const getTree = (id: string | number): AxiosPromise<TreeVO> => {
+  return request({
+    url: '/demo/tree/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增测试树
+ * @param data
+ */
+export const addTree = (data: TreeForm) => {
+  return request({
+    url: '/demo/tree',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改测试树
+ * @param data
+ */
+export const updateTree = (data: TreeForm) => {
+  return request({
+    url: '/demo/tree',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除测试树
+ * @param id
+ */
+export const delTree = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/demo/tree/' + id,
+    method: 'delete'
+  });
+};
diff --git a/src/api/demo/tree/types.ts b/src/api/demo/tree/types.ts
new file mode 100644
index 0000000..e164d8b
--- /dev/null
+++ b/src/api/demo/tree/types.ts
@@ -0,0 +1,80 @@
+export interface TreeVO {
+  /**
+   * 主键
+   */
+  id: string | number;
+
+  /**
+   * 父id
+   */
+  parentId: string | number;
+
+  /**
+   * 部门id
+   */
+  deptId: string | number;
+
+  /**
+   * 用户id
+   */
+  userId: string | number;
+
+  /**
+   * 值
+   */
+  treeName: string;
+
+  /**
+   * 子对象
+   */
+  children: TreeVO[];
+}
+
+export interface TreeForm extends BaseEntity {
+  /**
+   * 主键
+   */
+  id?: string | number;
+
+  /**
+   * 父id
+   */
+  parentId?: string | number;
+
+  /**
+   * 部门id
+   */
+  deptId?: string | number;
+
+  /**
+   * 用户id
+   */
+  userId?: string | number;
+
+  /**
+   * 值
+   */
+  treeName?: string;
+}
+
+export interface TreeQuery {
+  /**
+   * 父id
+   */
+  parentId?: string | number;
+
+  /**
+   * 部门id
+   */
+  deptId?: string | number;
+
+  /**
+   * 用户id
+   */
+  userId?: string | number;
+
+  /**
+   * 值
+   */
+  treeName?: string;
+}
diff --git a/src/api/login.ts b/src/api/login.ts
new file mode 100644
index 0000000..646677a
--- /dev/null
+++ b/src/api/login.ts
@@ -0,0 +1,107 @@
+import type { UserInfo } from '@/api/system/user/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import { closePush } from '@/utils/push';
+import request from '@/utils/request';
+import type { LoginData, LoginResult, VerifyCodeResult } from './types';
+
+// pc端固定客户端授权id
+const clientId = import.meta.env.VITE_APP_CLIENT_ID;
+
+/**
+ * @param data {LoginData}
+ * @returns
+ */
+export function login(data: LoginData): AxiosPromise<LoginResult> {
+  const params = {
+    ...data,
+    clientId: data.clientId || clientId,
+    grantType: data.grantType || 'password'
+  };
+  return request({
+    url: '/auth/login',
+    headers: {
+      isToken: false,
+      isEncrypt: true,
+      repeatSubmit: false
+    },
+    method: 'post',
+    data: params
+  });
+}
+
+// 注册方法
+export function register(data: any) {
+  const params = {
+    ...data,
+    clientId: clientId,
+    grantType: 'password'
+  };
+  return request({
+    url: '/auth/register',
+    headers: {
+      isToken: false,
+      isEncrypt: true,
+      repeatSubmit: false
+    },
+    method: 'post',
+    data: params
+  });
+}
+
+/**
+ * 注销
+ */
+export function logout() {
+  closePush();
+  if (
+    import.meta.env.VITE_APP_MESSAGE_ENABLED === 'true' &&
+    import.meta.env.VITE_APP_MESSAGE_TRANSPORT.toLowerCase() === 'sse'
+  ) {
+    request({
+      url: import.meta.env.VITE_APP_MESSAGE_PATH + '/close',
+      method: 'get'
+    });
+  }
+  return request({
+    url: '/auth/logout',
+    method: 'post'
+  });
+}
+
+/**
+ * 获取验证码
+ */
+export function getCodeImg(): AxiosPromise<VerifyCodeResult> {
+  return request({
+    url: '/auth/code',
+    headers: {
+      isToken: false
+    },
+    method: 'get',
+    timeout: 20000
+  });
+}
+
+/**
+ * 第三方登录
+ */
+export function callback(data: LoginData): AxiosPromise<any> {
+  const LoginData = {
+    ...data,
+    clientId: clientId,
+    grantType: 'social'
+  };
+  return request({
+    url: '/auth/social/callback',
+    method: 'post',
+    data: LoginData
+  });
+}
+
+// 获取用户详细信息
+export function getInfo(): AxiosPromise<UserInfo> {
+  return request({
+    url: '/system/user/getInfo',
+    method: 'get'
+  });
+}
diff --git a/src/api/menu.ts b/src/api/menu.ts
new file mode 100644
index 0000000..3be30a0
--- /dev/null
+++ b/src/api/menu.ts
@@ -0,0 +1,11 @@
+import type { RouteRecordRaw } from 'vue-router';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+// 获取路由
+export function getRouters(): AxiosPromise<RouteRecordRaw[]> {
+  return request({
+    url: '/system/menu/getRouters',
+    method: 'get'
+  });
+}
diff --git a/src/api/monitor/cache/index.ts b/src/api/monitor/cache/index.ts
new file mode 100644
index 0000000..4f2efb2
--- /dev/null
+++ b/src/api/monitor/cache/index.ts
@@ -0,0 +1,12 @@
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { CacheVO } from './types';
+
+// 查询缓存详细
+export function getCache(): AxiosPromise<CacheVO> {
+  return request({
+    url: '/monitor/cache',
+    method: 'get'
+  });
+}
+
diff --git a/src/api/monitor/cache/types.ts b/src/api/monitor/cache/types.ts
new file mode 100644
index 0000000..4017b65
--- /dev/null
+++ b/src/api/monitor/cache/types.ts
@@ -0,0 +1,7 @@
+export interface CacheVO {
+  commandStats: Array<{ name: string; value: string }>;
+
+  dbSize: number;
+
+  info: { [key: string]: string };
+}
diff --git a/src/api/monitor/logininfo/index.ts b/src/api/monitor/logininfo/index.ts
new file mode 100644
index 0000000..23e30a0
--- /dev/null
+++ b/src/api/monitor/logininfo/index.ts
@@ -0,0 +1,37 @@
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { LoginInfoQuery, LoginInfoVO } from './types';
+
+// 查询登录日志列表
+export function list(query: LoginInfoQuery): AxiosPromise<PageResult<LoginInfoVO>> {
+  return request({
+    url: '/monitor/loginInfo/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 删除登录日志
+export function delLoginInfo(infoId: string | number | Array<string | number>) {
+  return request({
+    url: '/monitor/loginInfo/' + infoId,
+    method: 'delete'
+  });
+}
+
+// 解锁用户登录状态
+export function unlockLoginInfo(userName: string | Array<string>) {
+  return request({
+    url: '/monitor/loginInfo/unlock/' + userName,
+    method: 'get'
+  });
+}
+
+// 清空登录日志
+export function cleanLoginInfo() {
+  return request({
+    url: '/monitor/loginInfo/clean',
+    method: 'delete'
+  });
+}
diff --git a/src/api/monitor/logininfo/types.ts b/src/api/monitor/logininfo/types.ts
new file mode 100644
index 0000000..202c779
--- /dev/null
+++ b/src/api/monitor/logininfo/types.ts
@@ -0,0 +1,20 @@
+export interface LoginInfoVO {
+  infoId: string | number;
+  tenantId: string | number;
+  userName: string;
+  status: string;
+  ipaddr: string;
+  loginLocation: string;
+  browser: string;
+  os: string;
+  msg: string;
+  loginTime: string;
+}
+
+export interface LoginInfoQuery extends PageQuery {
+  ipaddr: string;
+  userName: string;
+  status: string;
+  orderByColumn: string;
+  isAsc: string;
+}
diff --git a/src/api/monitor/online/index.ts b/src/api/monitor/online/index.ts
new file mode 100644
index 0000000..6fbb841
--- /dev/null
+++ b/src/api/monitor/online/index.ts
@@ -0,0 +1,37 @@
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { OnlineQuery, OnlineVO } from './types';
+
+// 查询在线用户列表
+export function list(query: OnlineQuery): AxiosPromise<PageResult<OnlineVO>> {
+  return request({
+    url: '/monitor/online/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 强退用户
+export function forceLogout(tokenId: string) {
+  return request({
+    url: '/monitor/online/' + tokenId,
+    method: 'delete'
+  });
+}
+
+// 获取当前用户登录在线设备
+export function getOnline() {
+  return request({
+    url: '/monitor/online',
+    method: 'get'
+  });
+}
+
+// 删除当前在线设备
+export function delOnline(tokenId: string) {
+  return request({
+    url: '/monitor/online/myself/' + tokenId,
+    method: 'delete'
+  });
+}
diff --git a/src/api/monitor/online/types.ts b/src/api/monitor/online/types.ts
new file mode 100644
index 0000000..8c0ec27
--- /dev/null
+++ b/src/api/monitor/online/types.ts
@@ -0,0 +1,15 @@
+export interface OnlineQuery extends PageQuery {
+  ipaddr: string;
+  userName: string;
+}
+
+export interface OnlineVO extends BaseEntity {
+  tokenId: string;
+  deptName: string;
+  userName: string;
+  ipaddr: string;
+  loginLocation: string;
+  browser: string;
+  os: string;
+  loginTime: number;
+}
diff --git a/src/api/monitor/operlog/index.ts b/src/api/monitor/operlog/index.ts
new file mode 100644
index 0000000..006011b
--- /dev/null
+++ b/src/api/monitor/operlog/index.ts
@@ -0,0 +1,29 @@
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { OperLogQuery, OperLogVO } from './types';
+
+// 查询操作日志列表
+export function list(query: OperLogQuery): AxiosPromise<PageResult<OperLogVO>> {
+  return request({
+    url: '/monitor/operlog/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 删除操作日志
+export function delOperlog(operId: string | number | Array<string | number>) {
+  return request({
+    url: '/monitor/operlog/' + operId,
+    method: 'delete'
+  });
+}
+
+// 清空操作日志
+export function cleanOperlog() {
+  return request({
+    url: '/monitor/operlog/clean',
+    method: 'delete'
+  });
+}
diff --git a/src/api/monitor/operlog/types.ts b/src/api/monitor/operlog/types.ts
new file mode 100644
index 0000000..ad889a2
--- /dev/null
+++ b/src/api/monitor/operlog/types.ts
@@ -0,0 +1,71 @@
+export interface OperLogQuery extends PageQuery {
+  operIp: string;
+  title: string;
+  operName: string;
+  userId: string;
+  deptId: string;
+  clientKey: string;
+  deviceType: string;
+  browser: string;
+  os: string;
+  businessType: string;
+  status: string;
+  orderByColumn: string;
+  isAsc: string;
+}
+
+export interface OperLogVO extends BaseEntity {
+  operId: string | number;
+  tenantId: string;
+  title: string;
+  businessType: number;
+  businessTypes: number[] | undefined;
+  method: string;
+  requestMethod: string;
+  operatorType: number;
+  operName: string;
+  userId: string | number;
+  deptId: string | number;
+  deptName: string;
+  clientKey: string;
+  deviceType: string;
+  browser: string;
+  os: string;
+  operUrl: string;
+  operIp: string;
+  operLocation: string;
+  operParam: string;
+  jsonResult: string;
+  status: number;
+  errorMsg: string;
+  operTime: string;
+  costTime: number;
+}
+
+export interface OperLogForm {
+  operId: number | string | undefined;
+  tenantId: string | number | undefined;
+  title: string;
+  businessType: number;
+  businessTypes: number[] | undefined;
+  method: string;
+  requestMethod: string;
+  operatorType: number;
+  operName: string;
+  userId: string | number | undefined;
+  deptId: string | number | undefined;
+  deptName: string;
+  clientKey: string;
+  deviceType: string;
+  browser: string;
+  os: string;
+  operUrl: string;
+  operIp: string;
+  operLocation: string;
+  operParam: string;
+  jsonResult: string;
+  status: number;
+  errorMsg: string;
+  operTime: string;
+  costTime: number;
+}
diff --git a/src/api/system/client/index.ts b/src/api/system/client/index.ts
new file mode 100644
index 0000000..cff3916
--- /dev/null
+++ b/src/api/system/client/index.ts
@@ -0,0 +1,81 @@
+import type { ClientForm, ClientQuery, ClientVO } from '@/api/system/client/types';
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+/**
+ * 查询客户端管理列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listClient = (query?: ClientQuery): AxiosPromise<PageResult<ClientVO>> => {
+  return request({
+    url: '/system/client/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询客户端管理详细
+ * @param id
+ */
+export const getClient = (id: string | number): AxiosPromise<ClientVO> => {
+  return request({
+    url: '/system/client/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增客户端管理
+ * @param data
+ */
+export const addClient = (data: ClientForm) => {
+  return request({
+    url: '/system/client',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改客户端管理
+ * @param data
+ */
+export const updateClient = (data: ClientForm) => {
+  return request({
+    url: '/system/client',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除客户端管理
+ * @param id
+ */
+export const delClient = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/system/client/' + id,
+    method: 'delete'
+  });
+};
+
+/**
+ * 状态修改
+ * @param clientId 客户端id
+ * @param status 状态
+ */
+export function changeStatus(clientId: string, status: string) {
+  const data = {
+    clientId,
+    status
+  };
+  return request({
+    url: '/system/client/changeStatus',
+    method: 'put',
+    data: data
+  });
+}
diff --git a/src/api/system/client/types.ts b/src/api/system/client/types.ts
new file mode 100644
index 0000000..c1d02d4
--- /dev/null
+++ b/src/api/system/client/types.ts
@@ -0,0 +1,185 @@
+export interface ClientVO {
+  /**
+   * id
+   */
+  id: string | number;
+
+  /**
+   * 客户端id
+   */
+  clientId: string;
+
+  /**
+   * 客户端key
+   */
+  clientKey: string;
+
+  /**
+   * 客户端秘钥
+   */
+  clientSecret: string;
+
+  /**
+   * 授权类型
+   */
+  grantTypeList: string[];
+
+  /**
+   * 设备类型
+   */
+  deviceType: string;
+
+  /**
+   * 允许访问路径
+   */
+  accessPath?: string;
+
+  /**
+   * 允许访问路径列表
+   */
+  accessPathList?: string[];
+
+  /**
+   * IP白名单
+   */
+  ipWhitelist?: string;
+
+  /**
+   * IP白名单列表
+   */
+  ipWhitelistList?: string[];
+
+  /**
+   * token活跃超时时间
+   */
+  activeTimeout: number;
+
+  /**
+   * token固定超时
+   */
+  timeout: number;
+
+  /**
+   * 状态（0正常 1停用）
+   */
+  status: string;
+}
+
+export interface ClientForm extends BaseEntity {
+  /**
+   * id
+   */
+  id?: string | number;
+
+  /**
+   * 客户端id
+   */
+  clientId?: string | number;
+
+  /**
+   * 客户端key
+   */
+  clientKey?: string;
+
+  /**
+   * 客户端秘钥
+   */
+  clientSecret?: string;
+
+  /**
+   * 授权类型
+   */
+  grantTypeList?: string[];
+
+  /**
+   * 设备类型
+   */
+  deviceType?: string;
+
+  /**
+   * 允许访问路径
+   */
+  accessPath?: string;
+
+  /**
+   * 允许访问路径列表
+   */
+  accessPathList?: string[];
+
+  /**
+   * IP白名单
+   */
+  ipWhitelist?: string;
+
+  /**
+   * IP白名单列表
+   */
+  ipWhitelistList?: string[];
+
+  /**
+   * token活跃超时时间
+   */
+  activeTimeout?: number;
+
+  /**
+   * token固定超时
+   */
+  timeout?: number;
+
+  /**
+   * 状态（0正常 1停用）
+   */
+  status?: string;
+}
+
+export interface ClientQuery extends PageQuery {
+  /**
+   * 客户端id
+   */
+  clientId?: string | number;
+
+  /**
+   * 客户端key
+   */
+  clientKey?: string;
+
+  /**
+   * 客户端秘钥
+   */
+  clientSecret?: string;
+
+  /**
+   * 授权类型
+   */
+  grantType?: string;
+
+  /**
+   * 设备类型
+   */
+  deviceType?: string;
+
+  /**
+   * 允许访问路径
+   */
+  accessPath?: string;
+
+  /**
+   * IP白名单
+   */
+  ipWhitelist?: string;
+
+  /**
+   * token活跃超时时间
+   */
+  activeTimeout?: number;
+
+  /**
+   * token固定超时
+   */
+  timeout?: number;
+
+  /**
+   * 状态（0正常 1停用）
+   */
+  status?: string;
+}
diff --git a/src/api/system/config/index.ts b/src/api/system/config/index.ts
new file mode 100644
index 0000000..11778a4
--- /dev/null
+++ b/src/api/system/config/index.ts
@@ -0,0 +1,75 @@
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { ConfigForm, ConfigQuery, ConfigVO } from './types';
+
+// 查询参数列表
+export function listConfig(query: ConfigQuery): AxiosPromise<PageResult<ConfigVO>> {
+  return request({
+    url: '/system/config/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询参数详细
+export function getConfig(configId: string | number): AxiosPromise<ConfigVO> {
+  return request({
+    url: '/system/config/' + configId,
+    method: 'get'
+  });
+}
+
+// 根据参数键名查询参数值
+export function getConfigKey(configKey: string): AxiosPromise<string> {
+  return request({
+    url: '/system/config/configKey/' + configKey,
+    method: 'get'
+  });
+}
+
+// 新增参数配置
+export function addConfig(data: ConfigForm) {
+  return request({
+    url: '/system/config',
+    method: 'post',
+    data: data
+  });
+}
+
+// 修改参数配置
+export function updateConfig(data: ConfigForm) {
+  return request({
+    url: '/system/config',
+    method: 'put',
+    data: data
+  });
+}
+
+// 修改参数配置
+export function updateConfigByKey(key: string, value: any) {
+  return request({
+    url: '/system/config/updateByKey',
+    method: 'put',
+    data: {
+      configKey: key,
+      configValue: value
+    }
+  });
+}
+
+// 删除参数配置
+export function delConfig(configId: string | number | Array<string | number>) {
+  return request({
+    url: '/system/config/' + configId,
+    method: 'delete'
+  });
+}
+
+// 刷新参数缓存
+export function refreshCache() {
+  return request({
+    url: '/system/config/refreshCache',
+    method: 'delete'
+  });
+}
diff --git a/src/api/system/config/types.ts b/src/api/system/config/types.ts
new file mode 100644
index 0000000..b68f073
--- /dev/null
+++ b/src/api/system/config/types.ts
@@ -0,0 +1,23 @@
+export interface ConfigVO extends BaseEntity {
+  configId: number | string;
+  configName: string;
+  configKey: string;
+  configValue: string;
+  configType: string;
+  remark: string;
+}
+
+export interface ConfigForm {
+  configId: number | string | undefined;
+  configName: string;
+  configKey: string;
+  configValue: string;
+  configType: string;
+  remark: string;
+}
+
+export interface ConfigQuery extends PageQuery {
+  configName: string;
+  configKey: string;
+  configType: string;
+}
diff --git a/src/api/system/dept/index.ts b/src/api/system/dept/index.ts
new file mode 100644
index 0000000..5c2ed78
--- /dev/null
+++ b/src/api/system/dept/index.ts
@@ -0,0 +1,65 @@
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import { type DeptForm, type DeptQuery, type DeptVO } from './types';
+
+// 查询部门列表
+export const listDept = (query?: DeptQuery) => {
+  return request({
+    url: '/system/dept/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 通过deptIds查询部门
+ * @param deptIds
+ */
+export const optionSelect = (deptIds: (number | string)[]): AxiosPromise<DeptVO[]> => {
+  return request({
+    url: '/system/dept/optionselect?deptIds=' + deptIds,
+    method: 'get'
+  });
+};
+
+// 查询部门列表（排除节点）
+export const listDeptExcludeChild = (deptId: string | number): AxiosPromise<DeptVO[]> => {
+  return request({
+    url: '/system/dept/list/exclude/' + deptId,
+    method: 'get'
+  });
+};
+
+// 查询部门详细
+export const getDept = (deptId: string | number): AxiosPromise<DeptVO> => {
+  return request({
+    url: '/system/dept/' + deptId,
+    method: 'get'
+  });
+};
+
+// 新增部门
+export const addDept = (data: DeptForm) => {
+  return request({
+    url: '/system/dept',
+    method: 'post',
+    data: data
+  });
+};
+
+// 修改部门
+export const updateDept = (data: DeptForm) => {
+  return request({
+    url: '/system/dept',
+    method: 'put',
+    data: data
+  });
+};
+
+// 删除部门
+export const delDept = (deptId: number | string) => {
+  return request({
+    url: '/system/dept/' + deptId,
+    method: 'delete'
+  });
+};
diff --git a/src/api/system/dept/types.ts b/src/api/system/dept/types.ts
new file mode 100644
index 0000000..adaefd2
--- /dev/null
+++ b/src/api/system/dept/types.ts
@@ -0,0 +1,60 @@
+/**
+ * 部门查询参数
+ */
+export interface DeptQuery extends PageQuery {
+  deptName?: string;
+  deptCategory?: string;
+  status?: number;
+}
+
+/**
+ * 部门类型
+ */
+export interface DeptVO extends BaseEntity {
+  id: number | string;
+  parentName: string;
+  parentId: number | string;
+  children: DeptVO[];
+  deptId: number | string;
+  deptName: string;
+  deptCategory: string;
+  orderNum: number;
+  leader: string;
+  phone: string;
+  email: string;
+  status: string;
+  delFlag: string;
+  ancestors: string;
+  menuId: string | number;
+}
+
+/**
+ * 部门类型
+ */
+export interface DeptTreeVO extends BaseEntity {
+  id: number | string;
+  label: string;
+  parentId: number | string;
+  weight: number;
+  children: DeptTreeVO[];
+  disabled: boolean;
+}
+
+/**
+ * 部门表单类型
+ */
+export interface DeptForm {
+  parentName?: string;
+  parentId?: number | string;
+  children?: DeptForm[];
+  deptId?: number | string;
+  deptName?: string;
+  deptCategory?: string;
+  orderNum?: number;
+  leader?: string;
+  phone?: string;
+  email?: string;
+  status?: string;
+  delFlag?: string;
+  ancestors?: string;
+}
diff --git a/src/api/system/dict/data/index.ts b/src/api/system/dict/data/index.ts
new file mode 100644
index 0000000..ad6f088
--- /dev/null
+++ b/src/api/system/dict/data/index.ts
@@ -0,0 +1,54 @@
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { DictDataForm, DictDataQuery, DictDataVO } from './types';
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType: string): AxiosPromise<DictDataVO[]> {
+  return request({
+    url: '/system/dict/data/type/' + dictType,
+    method: 'get'
+  });
+}
+
+// 查询字典数据列表
+export function listData(query: DictDataQuery): AxiosPromise<PageResult<DictDataVO>> {
+  return request({
+    url: '/system/dict/data/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询字典数据详细
+export function getData(dictCode: string | number): AxiosPromise<DictDataVO> {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'get'
+  });
+}
+
+// 新增字典数据
+export function addData(data: DictDataForm) {
+  return request({
+    url: '/system/dict/data',
+    method: 'post',
+    data: data
+  });
+}
+
+// 修改字典数据
+export function updateData(data: DictDataForm) {
+  return request({
+    url: '/system/dict/data',
+    method: 'put',
+    data: data
+  });
+}
+
+// 删除字典数据
+export function delData(dictCode: string | number | Array<string | number>) {
+  return request({
+    url: '/system/dict/data/' + dictCode,
+    method: 'delete'
+  });
+}
diff --git a/src/api/system/dict/data/types.ts b/src/api/system/dict/data/types.ts
new file mode 100644
index 0000000..e4abb9b
--- /dev/null
+++ b/src/api/system/dict/data/types.ts
@@ -0,0 +1,26 @@
+export interface DictDataQuery extends PageQuery {
+  dictName: string;
+  dictType: string;
+  dictLabel: string;
+}
+
+export interface DictDataVO extends BaseEntity {
+  dictCode: string;
+  dictLabel: string;
+  dictValue: string;
+  cssClass: string;
+  listClass: ElTagType;
+  dictSort: number;
+  remark: string;
+}
+
+export interface DictDataForm {
+  dictType?: string;
+  dictCode: string | undefined;
+  dictLabel: string;
+  dictValue: string;
+  cssClass: string;
+  listClass: ElTagType;
+  dictSort: number;
+  remark: string;
+}
diff --git a/src/api/system/dict/type/index.ts b/src/api/system/dict/type/index.ts
new file mode 100644
index 0000000..ca69c59
--- /dev/null
+++ b/src/api/system/dict/type/index.ts
@@ -0,0 +1,63 @@
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { DictTypeForm, DictTypeQuery, DictTypeVO } from './types';
+
+// 查询字典类型列表
+export function listType(query: DictTypeQuery): AxiosPromise<PageResult<DictTypeVO>> {
+  return request({
+    url: '/system/dict/type/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询字典类型详细
+export function getType(dictId: number | string): AxiosPromise<DictTypeVO> {
+  return request({
+    url: '/system/dict/type/' + dictId,
+    method: 'get'
+  });
+}
+
+// 新增字典类型
+export function addType(data: DictTypeForm) {
+  return request({
+    url: '/system/dict/type',
+    method: 'post',
+    data: data
+  });
+}
+
+// 修改字典类型
+export function updateType(data: DictTypeForm) {
+  return request({
+    url: '/system/dict/type',
+    method: 'put',
+    data: data
+  });
+}
+
+// 删除字典类型
+export function delType(dictId: string | number | Array<string | number>) {
+  return request({
+    url: '/system/dict/type/' + dictId,
+    method: 'delete'
+  });
+}
+
+// 刷新字典缓存
+export function refreshCache() {
+  return request({
+    url: '/system/dict/type/refreshCache',
+    method: 'delete'
+  });
+}
+
+// 获取字典选择框列表
+export function optionselect(): AxiosPromise<DictTypeVO[]> {
+  return request({
+    url: '/system/dict/type/optionselect',
+    method: 'get'
+  });
+}
diff --git a/src/api/system/dict/type/types.ts b/src/api/system/dict/type/types.ts
new file mode 100644
index 0000000..4987dbf
--- /dev/null
+++ b/src/api/system/dict/type/types.ts
@@ -0,0 +1,18 @@
+export interface DictTypeVO extends BaseEntity {
+  dictId: number | string;
+  dictName: string;
+  dictType: string;
+  remark: string;
+}
+
+export interface DictTypeForm {
+  dictId: number | string | undefined;
+  dictName: string;
+  dictType: string;
+  remark: string;
+}
+
+export interface DictTypeQuery extends PageQuery {
+  dictName: string;
+  dictType: string;
+}
diff --git a/src/api/system/menu/index.ts b/src/api/system/menu/index.ts
new file mode 100644
index 0000000..39caa15
--- /dev/null
+++ b/src/api/system/menu/index.ts
@@ -0,0 +1,70 @@
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { MenuForm, MenuQuery, MenuTreeOption, MenuVO, RoleMenuTree } from './types';
+
+// 查询菜单列表
+export const listMenu = (query?: MenuQuery): AxiosPromise<MenuVO[]> => {
+  return request({
+    url: '/system/menu/list',
+    method: 'get',
+    params: query
+  });
+};
+
+// 查询菜单详细
+export const getMenu = (menuId: string | number): AxiosPromise<MenuVO> => {
+  return request({
+    url: '/system/menu/' + menuId,
+    method: 'get'
+  });
+};
+
+// 查询菜单下拉树结构
+export const treeselect = (): AxiosPromise<MenuTreeOption[]> => {
+  return request({
+    url: '/system/menu/treeselect',
+    method: 'get'
+  });
+};
+
+// 根据角色ID查询菜单下拉树结构
+export const roleMenuTreeselect = (roleId: string | number): AxiosPromise<RoleMenuTree> => {
+  return request({
+    url: '/system/menu/roleMenuTreeselect/' + roleId,
+    method: 'get'
+  });
+};
+
+// 新增菜单
+export const addMenu = (data: MenuForm) => {
+  return request({
+    url: '/system/menu',
+    method: 'post',
+    data: data
+  });
+};
+
+// 修改菜单
+export const updateMenu = (data: MenuForm) => {
+  return request({
+    url: '/system/menu',
+    method: 'put',
+    data: data
+  });
+};
+
+// 删除菜单
+export const delMenu = (menuId: string | number) => {
+  return request({
+    url: '/system/menu/' + menuId,
+    method: 'delete'
+  });
+};
+
+// 级联删除菜单
+export const cascadeDelMenu = (menuIds: Array<string | number>) => {
+  return request({
+    url: '/system/menu/cascade/' + menuIds,
+    method: 'delete'
+  });
+};
diff --git a/src/api/system/menu/types.ts b/src/api/system/menu/types.ts
new file mode 100644
index 0000000..f106bc5
--- /dev/null
+++ b/src/api/system/menu/types.ts
@@ -0,0 +1,89 @@
+import type { MenuTypeEnum } from '@/enums/MenuTypeEnum';
+
+/**
+ * 菜单树形结构类型
+ */
+export interface MenuTreeOption {
+  id: string | number;
+  label: string;
+  parentId: string | number;
+  weight: number;
+  menuType?: MenuTypeEnum | string;
+  visible?: string;
+  status?: string;
+  disabled?: boolean;
+  children?: MenuTreeOption[];
+}
+
+export interface RoleMenuTree {
+  menus: MenuTreeOption[];
+  checkedKeys: Array<string | number>;
+}
+
+/**
+ * 角色菜单分配中的按钮节点类型
+ */
+export interface RoleMenuButtonOption {
+  menuId: string | number;
+  menuName: string;
+  parentId: string | number;
+  perms?: string;
+  status?: string;
+  disabled?: boolean;
+}
+
+/**
+ * 菜单查询参数类型
+ */
+export interface MenuQuery {
+  keywords?: string;
+  menuName?: string;
+  status?: string;
+}
+
+/**
+ * 菜单视图对象类型
+ */
+export interface MenuVO extends BaseEntity {
+  parentName: string;
+  parentId: string | number;
+  children: MenuVO[];
+  menuId: string | number;
+  menuName: string;
+  orderNum: number;
+  path: string;
+  component: string;
+  queryParam: string;
+  isFrame: string;
+  isCache: string;
+  menuType: MenuTypeEnum;
+  visible: string;
+  status: string;
+  icon: string;
+  activeMenu: string;
+  ext: string;
+  remark: string;
+}
+
+export interface MenuForm {
+  parentName?: string;
+  parentId?: string | number;
+  children?: MenuForm[];
+  menuId?: string | number;
+  menuName: string;
+  orderNum: number;
+  path: string;
+  component?: string;
+  queryParam?: string;
+  isFrame?: string;
+  isCache?: string;
+  menuType?: MenuTypeEnum;
+  visible?: string;
+  status?: string;
+  icon?: string;
+  activeMenu?: string;
+  ext?: string;
+  remark?: string;
+  query?: string;
+  perms?: string;
+}
diff --git a/src/api/system/message/index.ts b/src/api/system/message/index.ts
new file mode 100644
index 0000000..eb5c0b1
--- /dev/null
+++ b/src/api/system/message/index.ts
@@ -0,0 +1,10 @@
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { MessageBoxVO } from './types';
+
+export function getMessageBox(): AxiosPromise<MessageBoxVO> {
+  return request({
+    url: '/resource/message/box',
+    method: 'get'
+  });
+}
diff --git a/src/api/system/message/types.ts b/src/api/system/message/types.ts
new file mode 100644
index 0000000..18a6591
--- /dev/null
+++ b/src/api/system/message/types.ts
@@ -0,0 +1,17 @@
+export interface MessageVO extends BaseEntity {
+  messageId: number | string;
+  category: string;
+  type: string;
+  source: string;
+  title: string;
+  message: string;
+  content?: string;
+  data?: Record<string, any> | null;
+  path?: string;
+}
+
+export interface MessageBoxVO {
+  systemList: MessageVO[];
+  noticeList: MessageVO[];
+  workflowList: MessageVO[];
+}
diff --git a/src/api/system/notice/index.ts b/src/api/system/notice/index.ts
new file mode 100644
index 0000000..e729ded
--- /dev/null
+++ b/src/api/system/notice/index.ts
@@ -0,0 +1,46 @@
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { NoticeForm, NoticeQuery, NoticeVO } from './types';
+// 查询公告列表
+export function listNotice(query: NoticeQuery): AxiosPromise<PageResult<NoticeVO>> {
+  return request({
+    url: '/system/notice/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询公告详细
+export function getNotice(noticeId: string | number): AxiosPromise<NoticeVO> {
+  return request({
+    url: '/system/notice/' + noticeId,
+    method: 'get'
+  });
+}
+
+// 新增公告
+export function addNotice(data: NoticeForm) {
+  return request({
+    url: '/system/notice',
+    method: 'post',
+    data: data
+  });
+}
+
+// 修改公告
+export function updateNotice(data: NoticeForm) {
+  return request({
+    url: '/system/notice',
+    method: 'put',
+    data: data
+  });
+}
+
+// 删除公告
+export function delNotice(noticeId: string | number | Array<string | number>) {
+  return request({
+    url: '/system/notice/' + noticeId,
+    method: 'delete'
+  });
+}
diff --git a/src/api/system/notice/types.ts b/src/api/system/notice/types.ts
new file mode 100644
index 0000000..abfd5b2
--- /dev/null
+++ b/src/api/system/notice/types.ts
@@ -0,0 +1,26 @@
+export interface NoticeVO extends BaseEntity {
+  noticeId: number;
+  noticeTitle: string;
+  noticeType: string;
+  noticeContent: string;
+  status: string;
+  remark: string;
+  createByName: string;
+}
+
+export interface NoticeQuery extends PageQuery {
+  noticeTitle: string;
+  createByName: string;
+  status: string;
+  noticeType: string;
+}
+
+export interface NoticeForm {
+  noticeId: number | string | undefined;
+  noticeTitle: string;
+  noticeType: string;
+  noticeContent: string;
+  status: string;
+  remark: string;
+  createByName: string;
+}
diff --git a/src/api/system/oss/index.ts b/src/api/system/oss/index.ts
new file mode 100644
index 0000000..f7192ab
--- /dev/null
+++ b/src/api/system/oss/index.ts
@@ -0,0 +1,38 @@
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { OssQuery, OssUploadVO, OssVO } from './types';
+
+// 查询OSS对象存储列表
+export function listOss(query: OssQuery): AxiosPromise<PageResult<OssVO>> {
+  return request({
+    url: '/resource/oss/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询OSS对象基于id串
+export function listByIds(ossId: string | number): AxiosPromise<OssVO[]> {
+  return request({
+    url: '/resource/oss/listByIds/' + ossId,
+    method: 'get'
+  });
+}
+
+// 上传OSS对象存储
+export function uploadOss(data: FormData): AxiosPromise<OssUploadVO> {
+  return request({
+    url: '/resource/oss/upload',
+    method: 'post',
+    data
+  });
+}
+
+// 删除OSS对象存储
+export function delOss(ossId: string | number | Array<string | number>) {
+  return request({
+    url: '/resource/oss/' + ossId,
+    method: 'delete'
+  });
+}
diff --git a/src/api/system/oss/types.ts b/src/api/system/oss/types.ts
new file mode 100644
index 0000000..befb3ab
--- /dev/null
+++ b/src/api/system/oss/types.ts
@@ -0,0 +1,42 @@
+export interface OssVO extends BaseEntity {
+  ossId: string | number;
+  fileName: string;
+  originalName: string;
+  fileSuffix: string;
+  url: string;
+  createByName: string;
+  service: string;
+}
+
+export interface OssUploadVO {
+  url: string;
+  fileName: string;
+  ossId: string;
+}
+
+export interface OssQuery extends PageQuery {
+  fileName: string;
+  originalName: string;
+  fileSuffix: string;
+  createTime: string;
+  service: string;
+  orderByColumn: string;
+  isAsc: string;
+}
+export interface OssForm {
+  file: undefined | string;
+}
+
+export interface SysOssExt {
+  bizType?: string;
+  fileSize?: number;
+  contentType?: string;
+  source?: string;
+  uploadIp?: string;
+  remark?: string;
+  tags?: string[];
+  refId?: string;
+  refType?: string;
+  isTemp?: boolean;
+  md5?: string;
+}
diff --git a/src/api/system/ossConfig/index.ts b/src/api/system/ossConfig/index.ts
new file mode 100644
index 0000000..1c999e1
--- /dev/null
+++ b/src/api/system/ossConfig/index.ts
@@ -0,0 +1,61 @@
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { OssConfigForm, OssConfigQuery, OssConfigVO } from './types';
+
+// 查询对象存储配置列表
+export function listOssConfig(query: OssConfigQuery): AxiosPromise<PageResult<OssConfigVO>> {
+  return request({
+    url: '/resource/oss/config/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询对象存储配置详细
+export function getOssConfig(ossConfigId: string | number): AxiosPromise<OssConfigVO> {
+  return request({
+    url: '/resource/oss/config/' + ossConfigId,
+    method: 'get'
+  });
+}
+
+// 新增对象存储配置
+export function addOssConfig(data: OssConfigForm) {
+  return request({
+    url: '/resource/oss/config',
+    method: 'post',
+    data: data
+  });
+}
+
+// 修改对象存储配置
+export function updateOssConfig(data: OssConfigForm) {
+  return request({
+    url: '/resource/oss/config',
+    method: 'put',
+    data: data
+  });
+}
+
+// 删除对象存储配置
+export function delOssConfig(ossConfigId: string | number | Array<string | number>) {
+  return request({
+    url: '/resource/oss/config/' + ossConfigId,
+    method: 'delete'
+  });
+}
+
+// 对象存储状态修改
+export function changeOssConfigStatus(ossConfigId: string | number, status: string, configKey: string) {
+  const data = {
+    ossConfigId,
+    status,
+    configKey
+  };
+  return request({
+    url: '/resource/oss/config/changeStatus',
+    method: 'put',
+    data: data
+  });
+}
diff --git a/src/api/system/ossConfig/types.ts b/src/api/system/ossConfig/types.ts
new file mode 100644
index 0000000..870b2ee
--- /dev/null
+++ b/src/api/system/ossConfig/types.ts
@@ -0,0 +1,38 @@
+export interface OssConfigVO extends BaseEntity {
+  ossConfigId: number | string;
+  configKey: string;
+  accessKey: string;
+  secretKey: string;
+  bucketName: string;
+  prefix: string;
+  endpoint: string;
+  domainUrl: string;
+  isHttps: string;
+  region: string;
+  status: string;
+  ext1: string;
+  remark: string;
+  accessPolicy: string;
+}
+
+export interface OssConfigQuery extends PageQuery {
+  configKey: string;
+  bucketName: string;
+  status: string;
+}
+
+export interface OssConfigForm {
+  ossConfigId: string | number | undefined;
+  configKey: string;
+  accessKey: string;
+  secretKey: string;
+  bucketName: string;
+  prefix: string;
+  endpoint: string;
+  domainUrl: string;
+  isHttps: string;
+  accessPolicy: string;
+  region: string;
+  status: string;
+  remark: string;
+}
diff --git a/src/api/system/post/index.ts b/src/api/system/post/index.ts
new file mode 100644
index 0000000..2b52f06
--- /dev/null
+++ b/src/api/system/post/index.ts
@@ -0,0 +1,70 @@
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { DeptTreeVO } from '../dept/types';
+import type { PostForm, PostQuery, PostVO } from './types';
+
+// 查询岗位列表
+export function listPost(query: PostQuery): AxiosPromise<PageResult<PostVO>> {
+  return request({
+    url: '/system/post/list',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询岗位详细
+export function getPost(postId: string | number): AxiosPromise<PostVO> {
+  return request({
+    url: '/system/post/' + postId,
+    method: 'get'
+  });
+}
+
+// 获取岗位选择框列表
+export function optionselect(deptId?: number | string, postIds?: (number | string)[]): AxiosPromise<PostVO[]> {
+  return request({
+    url: '/system/post/optionselect',
+    method: 'get',
+    params: {
+      postIds: postIds,
+      deptId: deptId
+    }
+  });
+}
+
+// 新增岗位
+export function addPost(data: PostForm) {
+  return request({
+    url: '/system/post',
+    method: 'post',
+    data: data
+  });
+}
+
+// 修改岗位
+export function updatePost(data: PostForm) {
+  return request({
+    url: '/system/post',
+    method: 'put',
+    data: data
+  });
+}
+
+// 删除岗位
+export function delPost(postId: string | number | (string | number)[]) {
+  return request({
+    url: '/system/post/' + postId,
+    method: 'delete'
+  });
+}
+
+/**
+ * 查询部门下拉树结构
+ */
+export const deptTreeSelect = (): AxiosPromise<DeptTreeVO[]> => {
+  return request({
+    url: '/system/post/deptTree',
+    method: 'get'
+  });
+};
diff --git a/src/api/system/post/types.ts b/src/api/system/post/types.ts
new file mode 100644
index 0000000..45a0540
--- /dev/null
+++ b/src/api/system/post/types.ts
@@ -0,0 +1,31 @@
+export interface PostVO extends BaseEntity {
+  postId: number | string;
+  deptId: number | string;
+  postCode: string;
+  postName: string;
+  postCategory: string;
+  deptName: string;
+  postSort: number;
+  status: string;
+  remark: string;
+}
+
+export interface PostForm {
+  postId: number | string | undefined;
+  deptId: number | string | undefined;
+  postCode: string;
+  postName: string;
+  postCategory: string;
+  postSort: number;
+  status: string;
+  remark: string;
+}
+
+export interface PostQuery extends PageQuery {
+  deptId: number | string;
+  belongDeptId: number | string;
+  postCode: string;
+  postName: string;
+  postCategory: string;
+  status: string;
+}
diff --git a/src/api/system/role/index.ts b/src/api/system/role/index.ts
new file mode 100644
index 0000000..1e4a937
--- /dev/null
+++ b/src/api/system/role/index.ts
@@ -0,0 +1,160 @@
+import type { UserQuery, UserVO } from '@/api/system/user/types';
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { RoleDeptTree, RoleQuery, RoleVO } from './types';
+
+export const listRole = (query: RoleQuery): AxiosPromise<PageResult<RoleVO>> => {
+  return request({
+    url: '/system/role/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 通过roleIds查询角色
+ * @param roleIds
+ */
+export const optionSelect = (roleIds: (number | string)[]): AxiosPromise<RoleVO[]> => {
+  return request({
+    url: '/system/role/optionselect?roleIds=' + roleIds,
+    method: 'get'
+  });
+};
+
+/**
+ * 查询角色详细
+ */
+export const getRole = (roleId: string | number): AxiosPromise<RoleVO> => {
+  return request({
+    url: '/system/role/' + roleId,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增角色
+ */
+export const addRole = (data: any) => {
+  return request({
+    url: '/system/role',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改角色基础信息
+ * @param data
+ */
+export const updateRole = (data: any) => {
+  return request({
+    url: '/system/role',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 修改角色权限（菜单权限 + 数据权限）
+ */
+export const updateRolePermission = (data: any) => {
+  return request({
+    url: '/system/role/permission',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 角色状态修改
+ */
+export const changeRoleStatus = (roleId: string | number, status: string) => {
+  const data = {
+    roleId,
+    status
+  };
+  return request({
+    url: '/system/role/changeStatus',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除角色
+ */
+export const delRole = (roleId: Array<string | number> | string | number) => {
+  return request({
+    url: '/system/role/' + roleId,
+    method: 'delete'
+  });
+};
+
+/**
+ * 查询角色已授权用户列表
+ */
+export const allocatedUserList = (query: UserQuery): AxiosPromise<PageResult<UserVO>> => {
+  return request({
+    url: '/system/role/authUser/allocatedList',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询角色未授权用户列表
+ */
+export const unallocatedUserList = (query: UserQuery): AxiosPromise<PageResult<UserVO>> => {
+  return request({
+    url: '/system/role/authUser/unallocatedList',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 取消用户授权角色
+ */
+export const authUserCancel = (data: any) => {
+  return request({
+    url: '/system/role/authUser/cancel',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 批量取消用户授权角色
+ */
+export const authUserCancelAll = (data: any) => {
+  return request({
+    url: '/system/role/authUser/cancelAll',
+    method: 'put',
+    params: data
+  });
+};
+
+/**
+ * 授权用户选择
+ */
+export const authUserSelectAll = (data: any) => {
+  return request({
+    url: '/system/role/authUser/selectAll',
+    method: 'put',
+    params: data
+  });
+};
+// 根据角色ID查询部门树结构
+export const deptTreeSelect = (roleId: string | number): AxiosPromise<RoleDeptTree> => {
+  return request({
+    url: '/system/role/deptTree/' + roleId,
+    method: 'get'
+  });
+};
+
+export default {
+  optionSelect,
+  listRole
+};
diff --git a/src/api/system/role/types.ts b/src/api/system/role/types.ts
new file mode 100644
index 0000000..7dbb6ff
--- /dev/null
+++ b/src/api/system/role/types.ts
@@ -0,0 +1,52 @@
+/**
+ * 菜单树形结构类型
+ */
+export interface DeptTreeOption {
+  id: string;
+  label: string;
+  parentId: string;
+  weight: number;
+  children?: DeptTreeOption[];
+}
+
+export interface RoleDeptTree {
+  checkedKeys: string[];
+  depts: DeptTreeOption[];
+}
+
+export interface RoleVO extends BaseEntity {
+  roleId: string | number;
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  dataScope: string;
+  menuCheckStrictly: boolean;
+  deptCheckStrictly: boolean;
+  status: string;
+  delFlag: string;
+  remark?: any;
+  flag: boolean;
+  menuIds?: Array<string | number>;
+  deptIds?: Array<string | number>;
+  admin: boolean;
+}
+
+export interface RoleQuery extends PageQuery {
+  roleName: string;
+  roleKey: string;
+  status: string;
+}
+
+export interface RoleForm {
+  roleName: string;
+  roleKey: string;
+  roleSort: number;
+  status: string;
+  menuCheckStrictly: boolean;
+  deptCheckStrictly: boolean;
+  remark: string;
+  dataScope?: string;
+  roleId: string | undefined;
+  menuIds: Array<string | number>;
+  deptIds: Array<string | number>;
+}
diff --git a/src/api/system/social/auth.ts b/src/api/system/social/auth.ts
new file mode 100644
index 0000000..7ca2433
--- /dev/null
+++ b/src/api/system/social/auth.ts
@@ -0,0 +1,24 @@
+import request from '@/utils/request';
+
+// 获取跳转URL
+export function authRouterUrl(source: string) {
+  return request({
+    url: '/auth/binding/' + source,
+    method: 'get'
+  });
+}
+
+// 解绑账号
+export function authUnlock(authId: string) {
+  return request({
+    url: '/auth/unlock/' + authId,
+    method: 'delete'
+  });
+}
+//获取授权列表
+export function getAuthList() {
+  return request({
+    url: '/system/social/list',
+    method: 'get'
+  });
+}
diff --git a/src/api/system/user/index.ts b/src/api/system/user/index.ts
new file mode 100644
index 0000000..d02e6e5
--- /dev/null
+++ b/src/api/system/user/index.ts
@@ -0,0 +1,229 @@
+import type { RoleVO } from '@/api/system/role/types';
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import { parseStrEmpty } from '@/utils/ruoyi';
+import type { DeptTreeVO } from './../dept/types';
+import type { UserForm, UserInfoVO, UserProfileForm, UserQuery, UserVO } from './types';
+
+/**
+ * 查询用户列表
+ * @param query
+ */
+export const listUser = (query: UserQuery): AxiosPromise<PageResult<UserVO>> => {
+  return request({
+    url: '/system/user/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 通过用户ids查询用户
+ * @param userIds
+ */
+export const optionSelect = (userIds: (number | string)[]): AxiosPromise<UserVO[]> => {
+  return request({
+    url: '/system/user/optionselect?userIds=' + userIds,
+    method: 'get'
+  });
+};
+
+/**
+ * 获取用户详情
+ * @param userId
+ */
+export const getUser = (userId?: string | number): AxiosPromise<UserInfoVO> => {
+  return request({
+    url: '/system/user/' + parseStrEmpty(userId),
+    method: 'get'
+  });
+};
+
+/**
+ * 新增用户
+ */
+export const addUser = (data: UserForm) => {
+  return request({
+    url: '/system/user',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改用户
+ */
+export const updateUser = (data: UserForm) => {
+  return request({
+    url: '/system/user',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除用户
+ * @param userId 用户ID
+ */
+export const delUser = (userId: Array<string | number> | string | number) => {
+  return request({
+    url: '/system/user/' + userId,
+    method: 'delete'
+  });
+};
+
+/**
+ * 用户密码重置
+ * @param userId 用户ID
+ * @param password 密码
+ */
+export const resetUserPwd = (userId: string | number, password: string) => {
+  const data = {
+    userId,
+    password
+  };
+  return request({
+    url: '/system/user/resetPwd',
+    method: 'put',
+    headers: {
+      isEncrypt: true,
+      repeatSubmit: false
+    },
+    data: data
+  });
+};
+
+/**
+ * 用户状态修改
+ * @param userId 用户ID
+ * @param status 用户状态
+ */
+export const changeUserStatus = (userId: number | string, status: string) => {
+  const data = {
+    userId,
+    status
+  };
+  return request({
+    url: '/system/user/changeStatus',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 解锁用户
+ * @param userId 用户ID
+ */
+export const unlockUser = (userId: number | string) => {
+  return request({
+    url: '/system/user/unlock/' + userId,
+    method: 'get'
+  });
+};
+
+/**
+ * 查询用户个人信息
+ */
+export const getUserProfile = (): AxiosPromise<UserInfoVO> => {
+  return request({
+    url: '/system/user/profile',
+    method: 'get'
+  });
+};
+
+/**
+ * 修改用户个人信息
+ * @param data 用户信息
+ */
+export const updateUserProfile = (data: UserProfileForm) => {
+  return request({
+    url: '/system/user/profile',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 用户密码重置
+ * @param oldPassword 旧密码
+ * @param newPassword 新密码
+ */
+export const updateUserPwd = (oldPassword: string, newPassword: string) => {
+  const data = {
+    oldPassword,
+    newPassword
+  };
+  return request({
+    url: '/system/user/profile/updatePwd',
+    method: 'put',
+    headers: {
+      isEncrypt: true,
+      repeatSubmit: false
+    },
+    data: data
+  });
+};
+
+/**
+ * 查询授权角色
+ * @param userId 用户ID
+ */
+export const getAuthRole = (userId: string | number): AxiosPromise<{ user: UserVO; roles: RoleVO[] }> => {
+  return request({
+    url: '/system/user/authRole/' + userId,
+    method: 'get'
+  });
+};
+
+/**
+ * 保存授权角色
+ * @param data 用户ID
+ */
+export const updateAuthRole = (data: { userId: string; roleIds: string }) => {
+  return request({
+    url: '/system/user/authRole',
+    method: 'put',
+    params: data
+  });
+};
+
+/**
+ * 查询当前部门的所有用户信息
+ * @param deptId
+ */
+export const listUserByDeptId = (deptId: string | number): AxiosPromise<UserVO[]> => {
+  return request({
+    url: '/system/user/list/dept/' + deptId,
+    method: 'get'
+  });
+};
+
+/**
+ * 查询部门下拉树结构
+ */
+export const deptTreeSelect = (): AxiosPromise<DeptTreeVO[]> => {
+  return request({
+    url: '/system/user/deptTree',
+    method: 'get'
+  });
+};
+
+export default {
+  listUser,
+  getUser,
+  optionSelect,
+  addUser,
+  updateUser,
+  delUser,
+  resetUserPwd,
+  changeUserStatus,
+  unlockUser,
+  getUserProfile,
+  updateUserProfile,
+  updateUserPwd,
+  getAuthRole,
+  updateAuthRole,
+  deptTreeSelect,
+  listUserByDeptId
+};
diff --git a/src/api/system/user/types.ts b/src/api/system/user/types.ts
new file mode 100644
index 0000000..c060d87
--- /dev/null
+++ b/src/api/system/user/types.ts
@@ -0,0 +1,101 @@
+import type { PostVO } from '@/api/system/post/types';
+import type { RoleVO } from '@/api/system/role/types';
+
+/**
+ * 用户信息
+ */
+export interface UserInfo {
+  user: UserVO;
+  roles: string[];
+  permissions: string[];
+}
+
+/**
+ * 用户查询对象类型
+ */
+export interface UserQuery extends PageQuery {
+  userName?: string;
+  nickName?: string;
+  phoneNumber?: string;
+  status?: string;
+  deptId?: string | number;
+  roleId?: string | number;
+  userIds?: string | number | (string | number)[] | undefined;
+}
+
+/**
+ * 用户返回对象
+ */
+export interface UserVO extends BaseEntity {
+  userId: string | number;
+  tenantId: string;
+  deptId: number;
+  userName: string;
+  nickName: string;
+  userType: string;
+  email: string;
+  phoneNumber: string;
+  gender: string;
+  avatar?: string | number;
+  avatarUrl?: string;
+  status: string;
+  delFlag: string;
+  loginIp: string;
+  loginDate: string;
+  remark: string;
+  deptName: string;
+  /** 详情接口可能返回嵌套部门 */
+  dept?: { deptName?: string };
+  roles: RoleVO[];
+  roleIds: any;
+  postIds: any;
+  roleId: any;
+  admin: boolean;
+}
+
+/**
+ * 用户表单类型
+ */
+export interface UserForm {
+  id?: string;
+  userId?: string;
+  deptId?: number;
+  userName: string;
+  nickName?: string;
+  password: string;
+  phoneNumber?: string;
+  email?: string;
+  gender?: string;
+  status: string;
+  remark?: string;
+  avatar?: string | number;
+  postIds: string[];
+  roleIds: string[];
+}
+
+/**
+ * 个人资料表单类型
+ */
+export interface UserProfileForm {
+  nickName?: string;
+  phoneNumber?: string;
+  email?: string;
+  gender?: string;
+  avatar?: string | number;
+}
+
+export interface UserInfoVO {
+  user: UserVO;
+  roles: RoleVO[];
+  roleIds: string[];
+  posts: PostVO[];
+  postIds: string[];
+  roleGroup: string;
+  postGroup: string;
+}
+
+export interface ResetPwdForm {
+  oldPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
diff --git a/src/api/tool/gen/index.ts b/src/api/tool/gen/index.ts
new file mode 100644
index 0000000..193ee94
--- /dev/null
+++ b/src/api/tool/gen/index.ts
@@ -0,0 +1,81 @@
+import type { PageResult } from '@/api/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+import type { DbTableForm, DbTableQuery, DbTableVO, GenTableDetailPayload, TableQuery, TableVO } from './types';
+
+export type { GenTableDetailPayload } from './types';
+
+// 查询生成表数据
+export const listTable = (query: TableQuery): AxiosPromise<PageResult<TableVO>> => {
+  return request({
+    url: '/tool/gen/list',
+    method: 'get',
+    params: query
+  });
+};
+// 查询db数据库列表
+export const listDbTable = (query: DbTableQuery): AxiosPromise<PageResult<DbTableVO>> => {
+  return request({
+    url: '/tool/gen/db/list',
+    method: 'get',
+    params: query
+  });
+};
+
+// 查询表详细信息
+export const getGenTable = (tableId: string | number): AxiosPromise<GenTableDetailPayload> => {
+  return request({
+    url: '/tool/gen/' + tableId,
+    method: 'get'
+  });
+};
+
+// 修改代码生成信息
+export const updateGenTable = (data: DbTableForm): AxiosPromise<unknown> => {
+  return request({
+    url: '/tool/gen',
+    method: 'put',
+    data: data
+  });
+};
+
+// 导入表
+export const importTable = (data: { tables: string; dataName: string }): AxiosPromise<unknown> => {
+  return request({
+    url: '/tool/gen/importTable',
+    method: 'post',
+    params: data
+  });
+};
+
+// 预览生成代码
+export const previewTable = (tableId: string | number) => {
+  return request({
+    url: '/tool/gen/preview/' + tableId,
+    method: 'get'
+  });
+};
+
+// 删除表数据
+export const delTable = (tableId: string | number | Array<string | number>) => {
+  return request({
+    url: '/tool/gen/' + tableId,
+    method: 'delete'
+  });
+};
+
+// 同步数据库
+export const synchDb = (tableId: string | number) => {
+  return request({
+    url: '/tool/gen/synchDb/' + tableId,
+    method: 'get'
+  });
+};
+
+// 获取数据源名称
+export const getDataNames = () => {
+  return request({
+    url: '/tool/gen/getDataNames',
+    method: 'get'
+  });
+};
diff --git a/src/api/tool/gen/types.ts b/src/api/tool/gen/types.ts
new file mode 100644
index 0000000..fcfb224
--- /dev/null
+++ b/src/api/tool/gen/types.ts
@@ -0,0 +1,215 @@
+export interface TableVO extends BaseEntity {
+  createDept: number | string;
+  tableId: string | number;
+  dataName: string;
+  tableName: string;
+  tableComment: string;
+  className: string;
+  tplCategory: string;
+  frontendType: string;
+  packageName: string;
+  moduleName: string;
+  businessName: string;
+  functionName: string;
+  functionAuthor: string;
+  pkColumn?: any;
+  columns?: any;
+  options?: any;
+  remark?: any;
+  treeCode?: any;
+  treeParentCode?: any;
+  treeName?: any;
+  menuIds?: any;
+  parentMenuId?: any;
+  parentMenuName?: any;
+  enableExport?: boolean;
+  enableStatus?: boolean;
+  statusField?: string;
+  enableUnique?: boolean;
+  uniqueFields?: string[];
+  enableSort?: boolean;
+  sortField?: string;
+  treeRootValue?: string;
+  treeAncestorsField?: string;
+  treeOrderField?: string;
+  tree: boolean;
+  crud: boolean;
+}
+
+export interface TableQuery extends PageQuery {
+  tableName: string;
+  tableComment: string;
+  dataName: string;
+}
+
+export interface DbColumnVO extends BaseEntity {
+  createDept?: any;
+  columnId?: any;
+  tableId?: any;
+  columnName?: any;
+  columnComment?: any;
+  columnType?: any;
+  javaType?: any;
+  javaField?: any;
+  isPk?: any;
+  isIncrement?: any;
+  isRequired?: any;
+  isInsert?: any;
+  isEdit?: any;
+  isList?: any;
+  isQuery?: any;
+  queryType?: any;
+  htmlType?: any;
+  dictType?: any;
+  sort?: any;
+  increment: boolean;
+  capJavaField?: any;
+  usableColumn: boolean;
+  superColumn: boolean;
+  list: boolean;
+  pk: boolean;
+  insert: boolean;
+  edit: boolean;
+  query: boolean;
+  required: boolean;
+}
+
+export interface DbTableVO {
+  createDept?: any;
+  tableId?: any;
+  tableName: string;
+  tableComment: string;
+  className?: any;
+  tplCategory?: any;
+  frontendType?: string;
+  packageName?: any;
+  moduleName?: any;
+  businessName?: any;
+  functionName?: any;
+  functionAuthor?: any;
+  pkColumn?: any;
+  columns: DbColumnVO[];
+  options?: any;
+  remark?: any;
+  treeCode?: any;
+  treeParentCode?: any;
+  treeName?: any;
+  menuIds?: any;
+  parentMenuId?: any;
+  parentMenuName?: any;
+  enableExport?: boolean;
+  enableStatus?: boolean;
+  statusField?: string;
+  enableUnique?: boolean;
+  uniqueFields?: string[];
+  enableSort?: boolean;
+  sortField?: string;
+  treeRootValue?: string;
+  treeAncestorsField?: string;
+  treeOrderField?: string;
+  tree: boolean;
+  crud: boolean;
+}
+
+export interface DbTableQuery extends PageQuery {
+  dataName: string;
+  tableName: string;
+  tableComment: string;
+}
+
+/**
+ * 代码生成表详情接口 data 结构
+ * - info：当前表 GenTable
+ * - rows：字段列表 GenTableColumn[]
+ */
+export interface GenTableDetailPayload {
+  info: DbTableVO;
+  rows: DbColumnVO[];
+}
+
+export interface DbColumnForm extends BaseEntity {
+  createDept: number;
+  columnId: string;
+  tableId: string;
+  columnName: string;
+  columnComment: string;
+  columnType: string;
+  javaType: string;
+  javaField: string;
+  isPk: string;
+  isIncrement: string;
+  isRequired: string;
+  isInsert?: any;
+  isEdit: string;
+  isList: string;
+  isQuery?: any;
+  queryType: string;
+  htmlType: string;
+  dictType: string;
+  sort: number;
+  increment: boolean;
+  capJavaField: string;
+  usableColumn: boolean;
+  superColumn: boolean;
+  list: boolean;
+  pk: boolean;
+  insert: boolean;
+  edit: boolean;
+  query: boolean;
+  required: boolean;
+}
+
+export interface DbParamForm {
+  treeCode?: any;
+  treeName?: any;
+  treeParentCode?: any;
+  parentMenuId: string;
+  enableExport?: boolean;
+  enableStatus?: boolean;
+  statusField?: string;
+  enableUnique?: boolean;
+  uniqueFields?: string[];
+  enableSort?: boolean;
+  sortField?: string;
+  treeRootValue?: string;
+  treeAncestorsField?: string;
+  treeOrderField?: string;
+}
+
+export interface DbTableForm extends BaseEntity {
+  createDept?: any;
+  tableId: string | string;
+  tableName: string;
+  tableComment: string;
+  className: string;
+  tplCategory: string;
+  frontendType: string;
+  packageName: string;
+  moduleName: string;
+  businessName: string;
+  functionName: string;
+  functionAuthor: string;
+  pkColumn?: any;
+  columns: DbColumnForm[];
+  options: string;
+  remark?: any;
+  treeCode?: any;
+  treeParentCode?: any;
+  treeName?: any;
+  menuIds?: any;
+  parentMenuId: string;
+  parentMenuName?: any;
+  enableExport?: boolean;
+  enableStatus?: boolean;
+  statusField?: string;
+  enableUnique?: boolean;
+  uniqueFields?: string[];
+  enableSort?: boolean;
+  sortField?: string;
+  treeRootValue?: string;
+  treeAncestorsField?: string;
+  treeOrderField?: string;
+  tree: boolean;
+  crud: boolean;
+  params: DbParamForm;
+}
diff --git a/src/api/types.ts b/src/api/types.ts
new file mode 100644
index 0000000..b578f5c
--- /dev/null
+++ b/src/api/types.ts
@@ -0,0 +1,51 @@
+/**
+ * 注册
+ */
+export type RegisterForm = {
+  username: string;
+  password: string;
+  confirmPassword?: string;
+  code?: string;
+  uuid?: string;
+  userType?: string;
+};
+
+/**
+ * 登录请求
+ */
+export interface LoginData {
+  username?: string;
+  password?: string;
+  rememberMe?: boolean;
+  socialCode?: string;
+  socialState?: string;
+  source?: string;
+  code?: string;
+  uuid?: string;
+  clientId: string;
+  grantType: string;
+}
+
+/**
+ * 登录响应
+ */
+export interface LoginResult {
+  access_token: string;
+}
+
+/**
+ * 验证码返回
+ */
+export interface VerifyCodeResult {
+  captchaEnabled: boolean;
+  uuid?: string;
+  img?: string;
+}
+
+/**
+ * 分页返回结果
+ */
+export interface PageResult<T = any> {
+  total: number;
+  rows: T[];
+}
diff --git a/src/api/workflow/category/index.ts b/src/api/workflow/category/index.ts
new file mode 100644
index 0000000..68795e3
--- /dev/null
+++ b/src/api/workflow/category/index.ts
@@ -0,0 +1,76 @@
+import type { CategoryForm, CategoryQuery, CategoryTreeVO, CategoryVO } from '@/api/workflow/category/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+/**
+ * 查询流程分类列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listCategory = (query?: CategoryQuery): AxiosPromise<CategoryVO[]> => {
+  return request({
+    url: '/workflow/category/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询流程分类详细
+ * @param categoryId
+ */
+export const getCategory = (categoryId: string | number): AxiosPromise<CategoryVO> => {
+  return request({
+    url: '/workflow/category/' + categoryId,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增流程分类
+ * @param data
+ */
+export const addCategory = (data: CategoryForm) => {
+  return request({
+    url: '/workflow/category',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改流程分类
+ * @param data
+ */
+export const updateCategory = (data: CategoryForm) => {
+  return request({
+    url: '/workflow/category',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除流程分类
+ * @param categoryId
+ */
+export const delCategory = (categoryId: string | number | Array<string | number>) => {
+  return request({
+    url: '/workflow/category/' + categoryId,
+    method: 'delete'
+  });
+};
+
+/**
+ * 获取流程分类树列表
+ * @param query 流程实例id
+ * @returns
+ */
+export const categoryTree = (query?: CategoryForm): AxiosPromise<CategoryTreeVO[]> => {
+  return request({
+    url: `/workflow/category/categoryTree`,
+    method: 'get',
+    params: query
+  });
+};
diff --git a/src/api/workflow/category/types.ts b/src/api/workflow/category/types.ts
new file mode 100644
index 0000000..99a53a6
--- /dev/null
+++ b/src/api/workflow/category/types.ts
@@ -0,0 +1,67 @@
+export interface CategoryTreeVO {
+  id: number | string;
+  label: string;
+  parentId: number | string;
+  weight: number;
+  children: CategoryTreeVO[];
+}
+export interface CategoryVO {
+  /**
+   * 流程分类ID
+   */
+  categoryId: string | number;
+
+  /**
+   * 父级id
+   */
+  parentId: string | number;
+
+  /**
+   * 流程分类名称
+   */
+  categoryName: string;
+
+  /**
+   * 显示顺序
+   */
+  orderNum: number;
+
+  /**
+   * 创建时间
+   */
+  createTime: string;
+
+  /**
+   * 子对象
+   */
+  children: CategoryVO[];
+}
+
+export interface CategoryForm extends BaseEntity {
+  /**
+   * 流程分类ID
+   */
+  categoryId?: string | number;
+
+  /**
+   * 流程分类名称
+   */
+  categoryName?: string;
+
+  /**
+   * 父流程分类id
+   */
+  parentId?: string | number;
+
+  /**
+   * 显示顺序
+   */
+  orderNum?: number;
+}
+
+export interface CategoryQuery {
+  /**
+   * 流程分类名称
+   */
+  categoryName?: string;
+}
diff --git a/src/api/workflow/definition/index.ts b/src/api/workflow/definition/index.ts
new file mode 100644
index 0000000..7419fca
--- /dev/null
+++ b/src/api/workflow/definition/index.ts
@@ -0,0 +1,176 @@
+import type { PageResult } from '@/api/types';
+import type {
+  definitionXmlVO,
+  FlowDefinitionForm,
+  FlowDefinitionQuery,
+  FlowDefinitionVo
+} from '@/api/workflow/definition/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+/**
+ * 获取流程定义列表
+ * @param query 流程实例id
+ * @returns
+ */
+export const listDefinition = (query: FlowDefinitionQuery): AxiosPromise<PageResult<FlowDefinitionVo>> => {
+  return request({
+    url: `/workflow/definition/list`,
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询未发布的流程定义列表
+ * @param query 流程实例id
+ * @returns
+ */
+export const unPublishList = (query: FlowDefinitionQuery): AxiosPromise<PageResult<FlowDefinitionVo>> => {
+  return request({
+    url: `/workflow/definition/unPublishList`,
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 通过流程定义id获取xml
+ * @param definitionId 流程定义id
+ * @returns
+ */
+export const definitionXml = (definitionId: string): AxiosPromise<definitionXmlVO> => {
+  return request({
+    url: `/workflow/definition/definitionXml/${definitionId}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 删除流程定义
+ * @param id 流程定义id
+ * @returns
+ */
+export const deleteDefinition = (id: string | string[]) => {
+  return request({
+    url: `/workflow/definition/${id}`,
+    method: 'delete'
+  });
+};
+
+/**
+ * 挂起/激活
+ * @param definitionId 流程定义id
+ * @param activityStatus 状态
+ * @returns
+ */
+export const active = (definitionId: string, activityStatus: boolean) => {
+  return request({
+    url: `/workflow/definition/active/${definitionId}`,
+    method: 'put',
+    params: {
+      active: activityStatus
+    }
+  });
+};
+
+/**
+ * 通过zip或xml部署流程定义
+ * @returns
+ */
+export function importDef(data: any) {
+  return request({
+    url: '/workflow/definition/importDef',
+    method: 'post',
+    data: data,
+    headers: {
+      repeatSubmit: false
+    }
+  });
+}
+
+/**
+ * 发布流程定义
+ * @param id 流程定义id
+ * @returns
+ */
+export const publish = (id: string) => {
+  return request({
+    url: `/workflow/definition/publish/${id}`,
+    method: 'put'
+  });
+};
+
+/**
+ * 取消发布流程定义
+ * @param id 流程定义id
+ * @returns
+ */
+export const unPublish = (id: string) => {
+  return request({
+    url: `/workflow/definition/unPublish/${id}`,
+    method: 'put'
+  });
+};
+
+/**
+ * 获取流程定义xml字符串
+ * @param id 流程定义id
+ * @returns
+ */
+export const xmlString = (id: string) => {
+  return request({
+    url: `/workflow/definition/xmlString/${id}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增
+ * @param data 参数
+ * @returns
+ */
+export const add = (data: FlowDefinitionForm) => {
+  return request({
+    url: `/workflow/definition`,
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改
+ * @param data 参数
+ * @returns
+ */
+export const edit = (data: FlowDefinitionForm) => {
+  return request({
+    url: `/workflow/definition`,
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 查询详情
+ * @param id 参数
+ * @returns
+ */
+export const getInfo = (id: number | string) => {
+  return request({
+    url: `/workflow/definition/${id}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 复制流程定义
+ * @param id 流程定义id
+ * @returns
+ */
+export const copy = (id: string) => {
+  return request({
+    url: `/workflow/definition/copy/${id}`,
+    method: 'post'
+  });
+};
diff --git a/src/api/workflow/definition/types.ts b/src/api/workflow/definition/types.ts
new file mode 100644
index 0000000..93d081e
--- /dev/null
+++ b/src/api/workflow/definition/types.ts
@@ -0,0 +1,34 @@
+export interface FlowDefinitionQuery extends PageQuery {
+  flowCode?: string;
+  flowName?: string;
+  category: string | number;
+  isPublish?: number;
+}
+
+export interface FlowDefinitionVo {
+  id: string;
+  flowName: string;
+  flowCode: string;
+  formPath: string;
+  version: string;
+  isPublish: number;
+  activityStatus: number;
+  createTime: Date;
+  updateTime: Date;
+}
+
+export interface FlowDefinitionForm {
+  id: string;
+  flowName: string;
+  flowCode: string;
+  category: string;
+  ext: string;
+  formPath: string;
+  formCustom: string;
+  modelValue: string;
+}
+
+export interface definitionXmlVO {
+  xml: string[];
+  xmlStr: string;
+}
diff --git a/src/api/workflow/instance/index.ts b/src/api/workflow/instance/index.ts
new file mode 100644
index 0000000..4f53a9a
--- /dev/null
+++ b/src/api/workflow/instance/index.ts
@@ -0,0 +1,126 @@
+import type { PageResult } from '@/api/types';
+import type { FlowInstanceQuery, FlowInstanceVO } from '@/api/workflow/instance/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+/**
+ * 查询运行中实例列表
+ * @param query
+ * @returns {*}
+ */
+export const pageByRunning = (query: FlowInstanceQuery): AxiosPromise<PageResult<FlowInstanceVO>> => {
+  return request({
+    url: '/workflow/instance/pageByRunning',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询已完成实例列表
+ * @param query
+ * @returns {*}
+ */
+export const pageByFinish = (query: FlowInstanceQuery): AxiosPromise<PageResult<FlowInstanceVO>> => {
+  return request({
+    url: '/workflow/instance/pageByFinish',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 通过业务id获取历史流程图
+ */
+export const flowHisTaskList = (businessId: string | number) => {
+  return request({
+    url: `/workflow/instance/flowHisTaskList/${businessId}?t=${Math.random()}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 分页查询当前登录人单据
+ * @param query
+ * @returns {*}
+ */
+export const pageByCurrent = (query: FlowInstanceQuery): AxiosPromise<PageResult<FlowInstanceVO>> => {
+  return request({
+    url: '/workflow/instance/pageByCurrent',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 撤销流程
+ * @param data 参数
+ * @returns
+ */
+export const cancelProcessApply = (data: any) => {
+  return request({
+    url: `/workflow/instance/cancelProcessApply`,
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 获取流程变量
+ * @param instanceId 实例id
+ * @returns
+ */
+export const instanceVariable = (instanceId: string | number) => {
+  return request({
+    url: `/workflow/instance/instanceVariable/${instanceId}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 删除
+ * @param instanceIds 流程实例id
+ * @returns
+ */
+export const deleteByInstanceIds = (instanceIds: Array<string | number> | string | number) => {
+  return request({
+    url: `/workflow/instance/deleteByInstanceIds/${instanceIds}`,
+    method: 'delete'
+  });
+};
+
+/**
+ * 删除历史流程实例
+ * @param instanceIds
+ */
+export const deleteHisByInstanceIds = (instanceIds: Array<string | number> | string | number) => {
+  return request({
+    url: `/workflow/instance/deleteHisByInstanceIds/${instanceIds}`,
+    method: 'delete'
+  });
+};
+
+/**
+ * 作废流程
+ * @param data 参数
+ * @returns
+ */
+export const invalid = (data: any) => {
+  return request({
+    url: `/workflow/instance/invalid`,
+    method: 'post',
+    data: data
+  });
+};
+/**
+ * 修改流程变量
+ * @param data 参数
+ * @returns
+ */
+export const updateVariable = (data: any) => {
+  return request({
+    url: `/workflow/instance/updateVariable`,
+    method: 'put',
+    data: data
+  });
+};
diff --git a/src/api/workflow/instance/types.ts b/src/api/workflow/instance/types.ts
new file mode 100644
index 0000000..a40a508
--- /dev/null
+++ b/src/api/workflow/instance/types.ts
@@ -0,0 +1,28 @@
+import type { FlowTaskVO } from '@/api/workflow/task/types';
+
+export interface FlowInstanceQuery extends PageQuery {
+  category?: string | number;
+  nodeName?: string;
+  flowCode?: string;
+  flowName?: string;
+  createByIds?: Array<string | number>;
+  businessId?: string;
+}
+
+export interface FlowInstanceVO extends BaseEntity {
+  id: string | number;
+  definitionId: string;
+  flowName: string;
+  flowCode: string;
+  version: string;
+  businessId: string;
+  activityStatus: number;
+  tenantId: string;
+  createTime: string;
+  createBy: string;
+  flowStatus: string;
+  flowStatusName: string;
+  flowTaskList: FlowTaskVO[];
+  businessCode: string;
+  businessTitle: string;
+}
diff --git a/src/api/workflow/leave/index.ts b/src/api/workflow/leave/index.ts
new file mode 100644
index 0000000..749ea1b
--- /dev/null
+++ b/src/api/workflow/leave/index.ts
@@ -0,0 +1,76 @@
+import type { PageResult } from '@/api/types';
+import type { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+/**
+ * 查询请假列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listLeave = (query?: LeaveQuery): AxiosPromise<PageResult<LeaveVO>> => {
+  return request({
+    url: '/workflow/leave/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询请假详细
+ * @param id
+ */
+export const getLeave = (id: string | number): AxiosPromise<LeaveVO> => {
+  return request({
+    url: '/workflow/leave/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增请假
+ * @param data
+ */
+export const addLeave = (data: LeaveForm): AxiosPromise<LeaveVO> => {
+  return request({
+    url: '/workflow/leave',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 提交请假并发起流程
+ * @param data
+ */
+export const submitAndFlowStart = (data: LeaveForm): AxiosPromise<LeaveVO> => {
+  return request({
+    url: '/workflow/leave/submitAndFlowStart',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改请假
+ * @param data
+ */
+export const updateLeave = (data: LeaveForm): AxiosPromise<LeaveVO> => {
+  return request({
+    url: '/workflow/leave',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除请假
+ * @param id
+ */
+export const delLeave = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/workflow/leave/' + id,
+    method: 'delete'
+  });
+};
diff --git a/src/api/workflow/leave/types.ts b/src/api/workflow/leave/types.ts
new file mode 100644
index 0000000..c8e58a7
--- /dev/null
+++ b/src/api/workflow/leave/types.ts
@@ -0,0 +1,26 @@
+export interface LeaveVO {
+  id: string | number;
+  applyCode?: string;
+  leaveType: string;
+  startDate: string;
+  endDate: string;
+  leaveDays: number;
+  remark: string;
+  status?: string;
+}
+
+export interface LeaveForm extends BaseEntity {
+  id?: string | number;
+  applyCode?: string;
+  leaveType?: string;
+  startDate?: string;
+  endDate?: string;
+  leaveDays?: number;
+  remark?: string;
+  status?: string;
+}
+
+export interface LeaveQuery extends PageQuery {
+  startLeaveDays?: number;
+  endLeaveDays?: number;
+}
diff --git a/src/api/workflow/spel/index.ts b/src/api/workflow/spel/index.ts
new file mode 100644
index 0000000..2a8efd5
--- /dev/null
+++ b/src/api/workflow/spel/index.ts
@@ -0,0 +1,64 @@
+import type { PageResult } from '@/api/types';
+import type { SpelForm, SpelQuery, SpelVO } from '@/api/workflow/spel/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+/**
+ * 查询流程spel表达式定义列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listSpel = (query?: SpelQuery): AxiosPromise<PageResult<SpelVO>> => {
+  return request({
+    url: '/workflow/spel/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询流程spel表达式定义详细
+ * @param id
+ */
+export const getSpel = (id: string | number): AxiosPromise<SpelVO> => {
+  return request({
+    url: '/workflow/spel/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增流程spel表达式定义
+ * @param data
+ */
+export const addSpel = (data: SpelForm) => {
+  return request({
+    url: '/workflow/spel',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改流程spel表达式定义
+ * @param data
+ */
+export const updateSpel = (data: SpelForm) => {
+  return request({
+    url: '/workflow/spel',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除流程spel表达式定义
+ * @param id
+ */
+export const delSpel = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/workflow/spel/' + id,
+    method: 'delete'
+  });
+};
diff --git a/src/api/workflow/spel/types.ts b/src/api/workflow/spel/types.ts
new file mode 100644
index 0000000..53b6c41
--- /dev/null
+++ b/src/api/workflow/spel/types.ts
@@ -0,0 +1,105 @@
+export interface SpelVO {
+  /**
+   * 主键id
+   */
+  id: string | number;
+
+  /**
+   * 组件名称
+   */
+  componentName: string;
+
+  /**
+   * 方法名
+   */
+  methodName: string;
+
+  /**
+   * 参数
+   */
+  methodParams: string;
+
+  /**
+   * 预览spel值
+   */
+  viewSpel: string;
+
+  /**
+   * 状态（0正常 1停用）
+   */
+  status: string;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+}
+
+export interface SpelForm extends BaseEntity {
+  /**
+   * 主键id
+   */
+  id?: string | number;
+
+  /**
+   * 组件名称
+   */
+  componentName?: string;
+
+  /**
+   * 方法名
+   */
+  methodName?: string;
+
+  /**
+   * 参数
+   */
+  methodParams?: string;
+
+  /**
+   * 预览spel值
+   */
+  viewSpel?: string;
+
+  /**
+   * 状态（0正常 1停用）
+   */
+  status?: string;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+}
+
+export interface SpelQuery extends PageQuery {
+  /**
+   * 组件名称
+   */
+  componentName?: string;
+
+  /**
+   * 方法名
+   */
+  methodName?: string;
+
+  /**
+   * 参数
+   */
+  methodParams?: string;
+
+  /**
+   * 预览spel值
+   */
+  viewSpel?: string;
+
+  /**
+   * 状态（0正常 1停用）
+   */
+  status?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}
diff --git a/src/api/workflow/task/index.ts b/src/api/workflow/task/index.ts
new file mode 100644
index 0000000..f4f47b4
--- /dev/null
+++ b/src/api/workflow/task/index.ts
@@ -0,0 +1,207 @@
+import type { PageResult } from '@/api/types';
+import type { FlowTaskVO, TaskOperationBo, TaskQuery } from '@/api/workflow/task/types';
+import type { AxiosPromise } from '@/utils/api-types';
+import request from '@/utils/request';
+
+/**
+ * 查询待办列表
+ * @param query
+ * @returns {*}
+ */
+export const pageByTaskWait = (query: TaskQuery): AxiosPromise<PageResult<FlowTaskVO>> => {
+  return request({
+    url: '/workflow/task/pageByTaskWait',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询已办列表
+ * @param query
+ * @returns {*}
+ */
+export const pageByTaskFinish = (query: TaskQuery): AxiosPromise<PageResult<FlowTaskVO>> => {
+  return request({
+    url: '/workflow/task/pageByTaskFinish',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询当前用户的抄送列表
+ * @param query
+ * @returns {*}
+ */
+export const pageByTaskCopy = (query: TaskQuery): AxiosPromise<PageResult<FlowTaskVO>> => {
+  return request({
+    url: '/workflow/task/pageByTaskCopy',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询全部待办任务
+ * @param query
+ * @returns {*}
+ */
+export const pageByAllTaskWait = (query: TaskQuery): AxiosPromise<PageResult<FlowTaskVO>> => {
+  return request({
+    url: '/workflow/task/pageByAllTaskWait',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询全部已办任务
+ * @param query
+ * @returns {*}
+ */
+export const pageByAllTaskFinish = (query: TaskQuery): AxiosPromise<PageResult<FlowTaskVO>> => {
+  return request({
+    url: '/workflow/task/pageByAllTaskFinish',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 启动流程
+ * @param data
+ * @returns {*}
+ */
+export const startWorkFlow = (data: object): any => {
+  return request({
+    url: '/workflow/task/startWorkFlow',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 办理流程
+ * @param data
+ * @returns {*}
+ */
+export const completeTask = (data: object) => {
+  return request({
+    url: '/workflow/task/completeTask',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 任务驳回
+ * @param data
+ * @returns {*}
+ */
+export const backProcess = (data: any): any => {
+  return request({
+    url: '/workflow/task/backProcess',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 获取当前任务
+ * @param taskId
+ * @returns
+ */
+export const getTask = (taskId: string) => {
+  return request({
+    url: '/workflow/task/getTask/' + taskId,
+    method: 'get'
+  });
+};
+
+/**
+ * 修改任务办理人
+ * @param taskIdList
+ * @param userId
+ * @returns
+ */
+export const updateAssignee = (taskIdList: Array<string>, userId: string) => {
+  return request({
+    url: `/workflow/task/updateAssignee/${userId}`,
+    method: 'put',
+    data: taskIdList
+  });
+};
+
+/**
+ * 终止任务
+ * @returns
+ */
+export const terminationTask = (data: any) => {
+  return request({
+    url: `/workflow/task/terminationTask`,
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 获取可驳回得任务节点
+ * @returns
+ */
+export const getBackTaskNode = (taskId: string | number, nodeCode: string) => {
+  return request({
+    url: `/workflow/task/getBackTaskNode/${taskId}/${nodeCode}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 任务操作 操作类型，委派 delegateTask、转办 transferTask、加签 addSignature、减签 reductionSignature
+ * @returns
+ */
+export const taskOperation = (data: TaskOperationBo, operation: string) => {
+  return request({
+    url: `/workflow/task/taskOperation/${operation}`,
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 获取当前任务办理人
+ * @param taskId 任务id
+ * @returns
+ */
+export const currentTaskAllUser = (taskId: string | number) => {
+  return request({
+    url: `/workflow/task/currentTaskAllUser/${taskId}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 获取下一节点写
+ * @param data参数
+ * @returns
+ */
+export const getNextNodeList = (data: any): any => {
+  return request({
+    url: '/workflow/task/getNextNodeList',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 催办任务
+ * @param data参数
+ * @returns
+ */
+export const urgeTask = (data: any): any => {
+  return request({
+    url: '/workflow/task/urgeTask',
+    method: 'post',
+    data: data
+  });
+};
diff --git a/src/api/workflow/task/types.ts b/src/api/workflow/task/types.ts
new file mode 100644
index 0000000..1d550ec
--- /dev/null
+++ b/src/api/workflow/task/types.ts
@@ -0,0 +1,60 @@
+export interface TaskQuery extends PageQuery {
+  nodeName?: string;
+  flowCode?: string;
+  flowName?: string;
+  createByIds?: Array<string | number>;
+}
+
+export interface ParticipantVo {
+  groupIds?: string[] | number[];
+  candidate: string[] | number[];
+  candidateName: string[];
+  claim: boolean;
+}
+export interface FlowTaskVO {
+  id: string | number;
+  createTime?: Date;
+  updateTime?: Date;
+  tenantId?: string;
+  definitionId?: string;
+  instanceId: string;
+  flowName: string;
+  businessId: string;
+  nodeCode: string;
+  nodeName: string;
+  flowCode: string;
+  flowStatus: string;
+  formCustom: string;
+  formPath: string;
+  nodeType: number;
+  nodeRatio: string | number;
+  version?: string;
+  applyNode?: boolean;
+  buttonList?: ButtonList[];
+  copyList?: FlowCopyVo[];
+  varList?: Map<string, string>;
+  businessCode: string;
+  businessTitle: string;
+}
+
+export interface ButtonList {
+  code: string;
+  show: boolean;
+}
+export interface FlowCopyVo {
+  userId: string | number;
+  nickName: string;
+}
+
+export interface TaskOperationBo {
+  //委派/转办人的用户ID（必填，准对委派/转办人操作）
+  userId?: string;
+  //加签/减签人的用户ID列表（必填，针对加签/减签操作）
+  userIds?: string[];
+  //任务ID（必填）
+  taskId: string | number;
+  //消息类型
+  messageType?: string[];
+  //意见或备注信息（可选）
+  message?: string;
+}
diff --git a/src/api/workflow/workflowCommon/index.ts b/src/api/workflow/workflowCommon/index.ts
new file mode 100644
index 0000000..3aad766
--- /dev/null
+++ b/src/api/workflow/workflowCommon/index.ts
@@ -0,0 +1,17 @@
+import type { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import tab from '@/plugins/tab';
+import router from '@/router';
+
+export default {
+  routerJump(routerJumpVo: RouterJumpVo) {
+    tab.closePage(router.currentRoute.value);
+    router.push({
+      path: routerJumpVo.formPath,
+      query: {
+        id: routerJumpVo.businessId,
+        type: routerJumpVo.type,
+        taskId: routerJumpVo.taskId
+      }
+    });
+  }
+};
diff --git a/src/api/workflow/workflowCommon/types.ts b/src/api/workflow/workflowCommon/types.ts
new file mode 100644
index 0000000..4815554
--- /dev/null
+++ b/src/api/workflow/workflowCommon/types.ts
@@ -0,0 +1,14 @@
+export interface RouterJumpVo {
+  businessId: string;
+  taskId: string | number;
+  type: string;
+  formCustom: string;
+  formPath: string;
+}
+
+export interface StartProcessBo {
+  businessId: string | number;
+  flowCode: string;
+  variables: any;
+  bizExt: any;
+}
diff --git a/src/assets/401_images/401.gif b/src/assets/401_images/401.gif
new file mode 100644
index 0000000..cd6e0d9
Binary files /dev/null and b/src/assets/401_images/401.gif differ
diff --git a/src/assets/404_images/404.png b/src/assets/404_images/404.png
new file mode 100644
index 0000000..3d8e230
Binary files /dev/null and b/src/assets/404_images/404.png differ
diff --git a/src/assets/404_images/404_cloud.png b/src/assets/404_images/404_cloud.png
new file mode 100644
index 0000000..c6281d0
Binary files /dev/null and b/src/assets/404_images/404_cloud.png differ
diff --git a/src/assets/icons/svg/404.svg b/src/assets/icons/svg/404.svg
new file mode 100644
index 0000000..6df5019
--- /dev/null
+++ b/src/assets/icons/svg/404.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/bug.svg b/src/assets/icons/svg/bug.svg
new file mode 100644
index 0000000..05a150d
--- /dev/null
+++ b/src/assets/icons/svg/bug.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M127.88 73.143c0 1.412-.506 2.635-1.518 3.669-1.011 1.033-2.209 1.55-3.592 1.55h-17.887c0 9.296-1.783 17.178-5.35 23.645l16.609 17.044c1.011 1.034 1.517 2.257 1.517 3.67 0 1.412-.506 2.635-1.517 3.668-.958 1.033-2.155 1.55-3.593 1.55-1.438 0-2.635-.517-3.593-1.55l-15.811-16.063a15.49 15.49 0 0 1-1.196 1.06c-.532.434-1.65 1.208-3.353 2.322a50.104 50.104 0 0 1-5.192 2.974c-1.758.87-3.94 1.658-6.546 2.364-2.607.706-5.189 1.06-7.748 1.06V47.044H58.89v73.062c-2.716 0-5.417-.367-8.106-1.102-2.688-.734-5.003-1.631-6.945-2.692a66.769 66.769 0 0 1-5.268-3.179c-1.571-1.057-2.73-1.94-3.476-2.65L33.9 109.34l-14.611 16.877c-1.066 1.14-2.344 1.711-3.833 1.711-1.277 0-2.422-.434-3.434-1.304-1.012-.978-1.557-2.187-1.635-3.627-.079-1.44.333-2.705 1.236-3.794l16.129-18.51c-3.087-6.197-4.63-13.644-4.63-22.342H5.235c-1.383 0-2.58-.517-3.592-1.55S.125 74.545.125 73.132c0-1.412.506-2.635 1.518-3.668 1.012-1.034 2.21-1.55 3.592-1.55h17.887V43.939L9.308 29.833c-1.012-1.033-1.517-2.256-1.517-3.669 0-1.412.505-2.635 1.517-3.668 1.012-1.034 2.21-1.55 3.593-1.55s2.58.516 3.593 1.55l13.813 14.106h67.396l13.814-14.106c1.012-1.034 2.21-1.55 3.592-1.55 1.384 0 2.581.516 3.593 1.55 1.012 1.033 1.518 2.256 1.518 3.668 0 1.413-.506 2.636-1.518 3.67l-13.814 14.105v23.975h17.887c1.383 0 2.58.516 3.593 1.55 1.011 1.033 1.517 2.256 1.517 3.668l-.005.01zM89.552 26.175H38.448c0-7.23 2.489-13.386 7.466-18.469C50.892 2.623 56.92.082 64 .082c7.08 0 13.108 2.541 18.086 7.624 4.977 5.083 7.466 11.24 7.466 18.469z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/build.svg b/src/assets/icons/svg/build.svg
new file mode 100644
index 0000000..97c4688
--- /dev/null
+++ b/src/assets/icons/svg/build.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1568899741379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2054" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M960 591.424V368.96c0-0.288 0.16-0.512 0.16-0.768S960 367.68 960 367.424V192a32 32 0 0 0-32-32H96a32 32 0 0 0-32 32v175.424c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768v222.464c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768V864a32 32 0 0 0 32 32h832a32 32 0 0 0 32-32v-271.04c0-0.288 0.16-0.512 0.16-0.768S960 591.68 960 591.424z m-560-31.232v-160H608v160h-208z m208 64V832h-208v-207.808H608z m-480-224h208v160H128v-160z m544 0h224v160h-224v-160zM896 224v112.192H128V224h768zM128 624.192h208V832H128v-207.808zM672 832v-207.808h224V832h-224z" p-id="2055"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/button.svg b/src/assets/icons/svg/button.svg
new file mode 100644
index 0000000..d14d580
--- /dev/null
+++ b/src/assets/icons/svg/button.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1588670460195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1314" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M230.4 307.712c13.824 0 25.088-11.264 25.088-25.088 0-100.352 81.92-182.272 182.272-182.272s182.272 81.408 182.272 182.272c0 13.824 11.264 25.088 25.088 25.088s25.088-11.264 24.576-25.088c0-127.488-103.936-231.936-231.936-231.936S205.824 154.624 205.824 282.624c-0.512 14.336 10.752 25.088 24.576 25.088z m564.736 234.496c-11.264 0-21.504 2.048-31.232 6.144 0-44.544-40.448-81.92-88.064-81.92-14.848 0-28.16 3.584-39.936 10.24-13.824-28.16-44.544-48.128-78.848-48.128-12.288 0-24.576 2.56-35.328 7.68V284.16c0-45.568-37.888-81.92-84.48-81.92s-84.48 36.864-84.48 81.92v348.672l-69.12-112.64c-18.432-28.16-58.368-36.864-91.136-19.968-26.624 14.336-46.592 47.104-30.208 88.064 3.072 8.192 76.8 205.312 171.52 311.296 0 0 28.16 24.576 43.008 58.88 4.096 9.728 13.312 15.36 22.528 15.36 3.072 0 6.656-0.512 9.728-2.048 12.288-5.12 18.432-19.968 12.8-32.256-19.456-44.544-53.76-74.752-53.76-74.752C281.6 768 209.408 573.44 208.384 570.88c-5.12-12.8-2.56-20.992 7.168-26.112 9.216-4.608 21.504-4.608 26.112 2.56l113.152 184.32c4.096 8.704 12.8 14.336 22.528 14.336 13.824 0 25.088-10.752 25.088-25.088V284.16c0-17.92 15.36-32.256 34.816-32.256s34.816 14.336 34.816 32.256v284.16c0 13.824 10.24 25.088 24.576 25.088 13.824 0 25.088-11.264 25.088-25.088v-57.344c0-17.92 15.36-32.768 34.816-32.768 19.968 0 37.376 15.36 37.376 32.768v95.232c0 7.168 3.072 13.312 7.68 17.92 4.608 4.608 10.752 7.168 17.92 7.168 13.824 0 24.576-11.264 24.576-25.088V547.84c0-18.432 13.824-32.256 32.256-32.256 20.48 0 38.912 15.36 38.912 32.256v95.232c0 13.824 11.264 25.088 25.088 25.088s24.576-11.264 25.088-25.088v-18.944c0-18.944 12.8-32.256 30.72-32.256 18.432 0 22.528 18.944 22.528 31.744 0 1.024-11.776 99.84-50.688 173.056-30.72 58.368-45.056 112.128-51.2 146.944-2.56 13.312 6.656 26.112 19.968 28.672 1.536 0 3.072 0.512 4.608 0.512 11.776 0 22.016-8.192 24.064-20.48 5.632-31.232 18.432-79.36 46.08-132.608 43.52-81.92 55.808-186.88 56.32-193.536-0.512-50.688-29.696-83.968-72.704-83.968z"></path></svg>
diff --git a/src/assets/icons/svg/caret-back.svg b/src/assets/icons/svg/caret-back.svg
new file mode 100644
index 0000000..9bae722
--- /dev/null
+++ b/src/assets/icons/svg/caret-back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M321.94 98L158.82 237.78a24 24 0 000 36.44L321.94 414c15.57 13.34 39.62 2.28 39.62-18.22v-279.6c0-20.5-24.05-31.56-39.62-18.18z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/caret-forward.svg b/src/assets/icons/svg/caret-forward.svg
new file mode 100644
index 0000000..1ec3f7d
--- /dev/null
+++ b/src/assets/icons/svg/caret-forward.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M190.06 414l163.12-139.78a24 24 0 000-36.44L190.06 98c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/cascader.svg b/src/assets/icons/svg/cascader.svg
new file mode 100644
index 0000000..e256024
--- /dev/null
+++ b/src/assets/icons/svg/cascader.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1576153230908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="971" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M772.87036133 734.06115723c-43.34106445 0-80.00793458 27.93273926-93.76831055 66.57714843H475.90991211c-56.60705567 0-102.66723633-46.06018067-102.66723633-102.66723633V600.82446289h305.859375c13.76037598 38.64440918 50.42724609 66.57714844 93.76831055 66.57714844 55.12390137 0 99.94812012-44.82421875 99.94812012-99.94812012S827.9942627 467.50537109 772.87036133 467.50537109c-43.34106445 0-80.00793458 27.93273926-93.76831055 66.57714844H373.24267578V401.01062011h321.92687989c55.12390137 0 99.94812012-44.82421875 99.94812011-99.94812011V190.07312011C795.11767578 134.94921875 750.29345703 90.125 695.16955567 90.125H251.12963867C196.0057373 90.125 151.18151855 134.94921875 151.18151855 190.07312011V301.0625c0 55.12390137 44.82421875 99.94812012 99.94812012 99.94812012h55.53588867v296.96044921c0 93.35632325 75.97045898 169.32678223 169.32678224 169.32678223h203.19213866c13.76037598 38.64440918 50.42724609 66.57714844 93.76831055 66.57714844 55.12390137 0 99.94812012-44.82421875 99.94812012-99.94812012s-44.90661622-99.86572266-100.03051758-99.86572265z m0-199.89624024c18.37463379 0 33.28857422 14.91394043 33.28857422 33.28857423s-14.91394043 33.28857422-33.28857422 33.28857421-33.28857422-14.91394043-33.28857422-33.28857421 14.91394043-33.28857422 33.28857422-33.28857422zM217.75866699 301.0625V190.07312011c0-18.37463379 14.91394043-33.28857422 33.28857423-33.28857421h444.03991698c18.37463379 0 33.28857422 14.91394043 33.28857422 33.28857422V301.0625c0 18.37463379-14.91394043 33.28857422-33.28857422 33.28857422H251.12963867c-18.37463379 0-33.37097168-14.91394043-33.37097168-33.28857422z m555.11169434 566.23535156c-18.37463379 0-33.28857422-14.91394043-33.28857422-33.28857422 0-18.37463379 14.91394043-33.28857422 33.28857422-33.28857422s33.28857422 14.91394043 33.28857422 33.28857422c0.08239747 18.29223633-14.91394043 33.28857422-33.28857422 33.28857422z" p-id="972"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/category.svg b/src/assets/icons/svg/category.svg
new file mode 100644
index 0000000..df92526
--- /dev/null
+++ b/src/assets/icons/svg/category.svg
@@ -0,0 +1 @@
+<svg t="1715954426124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3305" width="200" height="200"><path d="M664.081597 1023.943114a78.246037 78.246037 0 0 1-78.985549-76.795456v-284.996471a78.27448 78.27448 0 0 1 78.985549-76.93767h280.843828A78.189152 78.189152 0 0 1 1023.939417 662.151187v284.996471a78.246037 78.246037 0 0 1-79.013992 76.795456z m-585.067605 0a78.246037 78.246037 0 0 1-78.985549-76.795456v-284.996471a78.160709 78.160709 0 0 1 78.985549-76.93767h280.786942a78.302923 78.302923 0 0 1 79.042434 76.93767v284.996471h-0.170656a78.246037 78.246037 0 0 1-78.985549 76.795456z m0-585.096048a78.217594 78.217594 0 0 1-78.985549-76.93767V76.912925a78.189152 78.189152 0 0 1 78.957106-76.795456h280.786942a78.27448 78.27448 0 0 1 79.042435 76.93767v284.996471a78.27448 78.27448 0 0 1-79.013992 76.795456z m589.675333-5.688552a77.193655 77.193655 0 0 1-77.990052-75.885288V75.888985a77.25054 77.25054 0 0 1 77.990052-75.942173h277.26004a77.25054 77.25054 0 0 1 77.961609 75.942173v281.384241a77.421197 77.421197 0 0 1-78.132266 75.885288z" p-id="3306" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/chart.svg b/src/assets/icons/svg/chart.svg
new file mode 100644
index 0000000..27728fb
--- /dev/null
+++ b/src/assets/icons/svg/chart.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 54.857h36.571V128H0V54.857zM91.429 27.43H128V128H91.429V27.429zM45.714 0h36.572v128H45.714V0z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/checkbox.svg b/src/assets/icons/svg/checkbox.svg
new file mode 100644
index 0000000..013fd3a
--- /dev/null
+++ b/src/assets/icons/svg/checkbox.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575982282951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="902" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M828.40625 90.125H195.59375C137.375 90.125 90.125 137.375 90.125 195.59375v632.8125c0 58.21875 47.25 105.46875 105.46875 105.46875h632.8125c58.21875 0 105.46875-47.25 105.46875-105.46875V195.59375c0-58.21875-47.25-105.46875-105.46875-105.46875z m52.734375 738.28125c0 29.16-23.57015625 52.734375-52.734375 52.734375H195.59375c-29.109375 0-52.734375-23.574375-52.734375-52.734375V195.59375c0-29.109375 23.625-52.734375 52.734375-52.734375h632.8125c29.16 0 52.734375 23.625 52.734375 52.734375v632.8125z" p-id="903"></path><path d="M421.52890625 709.55984375a36.28125 36.28125 0 0 1-27.55265625-12.66890625L205.17453125 476.613125a36.28546875 36.28546875 0 0 1 55.10109375-47.22890625l164.986875 192.4846875 342.16171875-298.48078125a36.2896875 36.2896875 0 0 1 47.70984375 54.68765625L445.3859375 700.6203125a36.3234375 36.3234375 0 0 1-23.85703125 8.93953125z" p-id="904"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/clipboard.svg b/src/assets/icons/svg/clipboard.svg
new file mode 100644
index 0000000..90923ff
--- /dev/null
+++ b/src/assets/icons/svg/clipboard.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.857 118.857h64V73.143H89.143c-1.902 0-3.52-.668-4.855-2.002-1.335-1.335-2.002-2.954-2.002-4.855V36.57H54.857v82.286zM73.143 16v-4.571a2.2 2.2 0 0 0-.677-1.61 2.198 2.198 0 0 0-1.609-.676H20.571c-.621 0-1.158.225-1.609.676a2.198 2.198 0 0 0-.676 1.61V16a2.2 2.2 0 0 0 .676 1.61c.451.45.988.676 1.61.676h50.285c.622 0 1.158-.226 1.61-.677.45-.45.676-.987.676-1.609zm18.286 48h21.357L91.43 42.642V64zM128 73.143v48c0 1.902-.667 3.52-2.002 4.855-1.335 1.335-2.953 2.002-4.855 2.002H52.57c-1.901 0-3.52-.667-4.854-2.002-1.335-1.335-2.003-2.953-2.003-4.855v-11.429H6.857c-1.902 0-3.52-.667-4.855-2.002C.667 106.377 0 104.759 0 102.857v-96c0-1.902.667-3.52 2.002-4.855C3.337.667 4.955 0 6.857 0h77.714c1.902 0 3.52.667 4.855 2.002 1.335 1.335 2.003 2.953 2.003 4.855V30.29c1 .622 1.856 1.29 2.569 2.003l29.147 29.147c1.335 1.335 2.478 3.145 3.429 5.43.95 2.287 1.426 4.383 1.426 6.291v-.018z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/code.svg b/src/assets/icons/svg/code.svg
new file mode 100644
index 0000000..5f9c5ab
--- /dev/null
+++ b/src/assets/icons/svg/code.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546567861908" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2422" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M318.577778 819.2L17.066667 512l301.511111-307.2 45.511111 45.511111L96.711111 512l267.377778 261.688889zM705.422222 819.2l-45.511111-45.511111L927.288889 512l-267.377778-261.688889 45.511111-45.511111L1006.933333 512zM540.785778 221.866667l55.751111 11.150222L483.157333 802.133333l-55.751111-11.093333z" p-id="2423"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/color.svg b/src/assets/icons/svg/color.svg
new file mode 100644
index 0000000..44a81aa
--- /dev/null
+++ b/src/assets/icons/svg/color.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577252187056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2508" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M747.59340925 691.12859384c11.51396329 0.25305413 22.43746719-0.21087818 40.74171707-1.51832482 29.35428085-2.10878421 35.84933734-2.36183835 46.47761114-0.8856895 24.71495444 3.37405491 41.12129828 21.76265671 32.47528161 47.95376084-85.57447632 258.19957947-442.00123984 249.76444099-628.67084683 50.73735554-153.47733892-159.33976008-153.09775772-414.41833795 0.92786545-573.42069196 159.71934128-162.67163983 424.03439521-166.59397897 565.78689185 0.63263534 80.38686649 94.81095318 108.34934958 169.16669549 89.11723508 230.57450162-15.01454608 47.99593598-50.61082928 77.68762207-119.77896259 114.63352789-4.89237973 2.65706845-29.35428085 15.52065436-35.84933652 19.02123633-46.94154346 25.30541465-63.51659033 41.20565021-62.20914449 58.45550757 2.95229856 39.13904114 24.16667102 52.7196135 70.98168823 53.81618115z m44.41100207 50.10472101c-19.82257471 1.43397372-32.05352527 1.940082-45.63409763 1.6448519-70.34905207-1.60267593-115.98314969-30.91478165-121.38163769-101.64341492-3.45840683-46.05585397 24.7571304-73.13264758 89.24376132-107.96976837 6.7902866-3.66928501 31.37871396-16.57504688 36.06021551-19.06341229 57.69634516-30.83042972 85.15271997-53.73183005 94.76877722-84.47790866 12.77923398-40.78389304-9.10994898-98.94417051-79.24812286-181.6507002-121.17075953-142.97559219-350.14258521-139.60153647-489.2380134 2.06660824-134.49827774 138.84237405-134.79350784 362.12048163-0.42175717 501.637667 158.53842169 168.99799328 451.9968783 181.18676788 534.57688175-11.80919339-4.68150156 0.2952301-10.71262573 0.67481131-18.72600705 1.26527069z" p-id="2509"></path><path d="M346.03865637 637.18588562a78.82636652 78.82636652 0 0 0 78.32025825-79.29029883c0-43.69401562-35.005823-79.29029883-78.32025825-79.29029882a78.82636652 78.82636652 0 0 0-78.36243338 79.29029882c0 43.69401562 35.005823 79.29029883 78.36243338 79.29029883z m0-51.7495729a27.07679361 27.07679361 0 0 1-26.5706845-27.54072593c0-15.30977536 11.97789643-27.54072593 26.5706845-27.54072592 14.55061295 0 26.57068533 12.23095057 26.57068533 27.54072592a27.07679361 27.07679361 0 0 1-26.57068533 27.54072593zM475.7289063 807.11174353a78.82636652 78.82636652 0 0 0 78.3624334-79.29029882c0-43.69401562-34.96364785-79.29029883-78.32025825-79.29029883a78.82636652 78.82636652 0 0 0-78.32025742 79.29029883c0 43.69401562 34.96364785 79.29029883 78.32025742 79.29029882z m0-51.74957208a27.07679361 27.07679361 0 0 1-26.57068532-27.54072674c0-15.30977536 12.06224753-27.54072593 26.57068532-27.54072593 14.59278892 0 26.57068533 12.23095057 26.57068453 27.54072593a27.07679361 27.07679361 0 0 1-26.57068453 27.54072674zM601.24376214 377.21492718a78.82636652 78.82636652 0 0 0 78.32025742-79.29029883c0-43.69401562-34.96364785-79.29029883-78.32025742-79.29029882a78.82636652 78.82636652 0 0 0-78.32025823 79.29029883c0 43.69401562 34.96364785 79.29029883 78.32025824 79.29029883z m1e-8-51.74957208a27.07679361 27.07679361 0 0 1-26.57068534-27.54072675c0-15.30977536 11.97789643-27.54072593 26.57068534-27.54072591 14.55061295 0 26.57068533 12.23095057 26.57068451 27.54072592a27.07679361 27.07679361 0 0 1-26.57068451 27.54072674zM378.80916809 433.85687983a78.82636652 78.82636652 0 0 0 78.32025824-79.29029883c0-43.69401562-34.96364785-79.29029883-78.32025824-79.29029802a78.82636652 78.82636652 0 0 0-78.32025742 79.29029802c0 43.69401562 34.96364785 79.29029883 78.32025742 79.29029883z m0-51.74957209a27.07679361 27.07679361 0 0 1-26.57068451-27.54072674c0-15.30977536 11.97789643-27.54072593 26.57068451-27.54072593 14.55061295 0 26.57068533 12.23095057 26.57068533 27.54072593a27.07679361 27.07679361 0 0 1-26.57068533 27.54072674z" p-id="2510"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/company.svg b/src/assets/icons/svg/company.svg
new file mode 100644
index 0000000..fcf1394
--- /dev/null
+++ b/src/assets/icons/svg/company.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1675914273096" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2417" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1001.7 969.6H890.4V399.4c0-27.7-17.4-52.8-43.3-62.5L580 236.7c-14.9-5.6-31.1-5.5-45.7-0.4V76.6c0-21.9-10.7-42.4-28.7-54.9s-41-15.3-61.5-7.6L176.9 114.3c-25.9 9.7-43.3 34.9-43.3 62.5v792.8H22.3C10 969.6 0 979.6 0 991.9s10 22.3 22.3 22.3H1001.8c12.3 0 22.3-10 22.3-22.3s-10.1-22.3-22.4-22.3zM178.1 176.8c0-9.2 5.8-17.6 14.4-20.8L459.7 55.8c7-2.6 14.4-1.7 20.5 2.5s9.6 10.9 9.6 18.3v893H178.1V176.8z m356.2 792.8V299.3c0-7.4 3.5-14.1 9.6-18.3 6.1-4.2 13.6-5.2 20.5-2.5l267.1 100.2c8.6 3.2 14.4 11.6 14.4 20.8v570.2H534.3z" p-id="2418"></path><path d="M391.8 346.3H258.2c-12.3 0-22.3 10-22.3 22.3s10 22.3 22.3 22.3h133.6c12.3 0 22.3-10 22.3-22.3s-10-22.3-22.3-22.3zM748 479.9H614.4c-12.3 0-22.3 10-22.3 22.3s10 22.3 22.3 22.3H748c12.3 0 22.3-10 22.3-22.3s-10-22.3-22.3-22.3zM748 613.4H614.4c-12.3 0-22.3 10-22.3 22.3s10 22.3 22.3 22.3H748c12.3 0 22.3-10 22.3-22.3s-10-22.3-22.3-22.3zM391.8 613.4H258.2c-12.3 0-22.3 10-22.3 22.3s10 22.3 22.3 22.3h133.6c12.3 0 22.3-10 22.3-22.3s-10-22.3-22.3-22.3z" p-id="2419"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/component.svg b/src/assets/icons/svg/component.svg
new file mode 100644
index 0000000..29c3458
--- /dev/null
+++ b/src/assets/icons/svg/component.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575804206892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3145" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M826.56 470.016c-32.896 0-64.384 12.288-89.984 35.52l0-104.96c0-62.208-50.496-112.832-112.64-113.088L623.936 287.04 519.552 287.104C541.824 262.72 554.56 230.72 554.56 197.12c0-73.536-59.904-133.44-133.504-133.44-73.472 0-133.376 59.904-133.376 133.44 0 32.896 12.224 64.256 35.52 89.984L175.232 287.104l0 0.576C113.728 288.704 64 338.88 64 400.576l0.32 0 0.32 116.48C60.864 544.896 70.592 577.728 100.8 588.48c12.736 4.608 37.632 7.488 60.864-25.28 12.992-18.368 34.24-29.248 56.64-29.248 38.336 0 69.504 31.104 69.504 69.312 0 38.4-31.168 69.504-69.504 69.504-22.656 0-44.032-11.264-57.344-30.4C138.688 610.112 112.576 615.36 102.464 619.136c-29.824 10.752-39.104 43.776-38.144 67.392l0 160.384L64 846.912C64 909.248 114.752 960 177.216 960l446.272 0c62.4 0 113.152-50.752 113.152-113.152l0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.536 0 133.44-59.904 133.44-133.504C960 529.92 900.096 470.016 826.56 470.016zM826.56 672.896c-22.72 0-44.032-11.264-57.344-30.4-22.272-32.384-48.448-27.136-58.56-23.36-29.824 10.752-39.04 43.776-38.08 67.392l0 160.384c0 27.136-22.016 49.152-49.152 49.152L177.216 896.064C150.08 896 128 873.984 128 846.848l0.32 0 0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.6 0 133.504-59.904 133.504-133.504 0-73.472-59.904-133.376-133.504-133.376-32.896 0-64.32 12.288-89.984 35.52l0-104.96L128 400.512c0-27.072 22.08-49.152 49.216-49.152L177.216 351.04 334.656 350.72c3.776 0.512 7.616 0.832 11.52 0.832 24.896 0 50.752-10.816 60.032-37.056 4.544-12.736 7.424-37.568-25.344-60.736C362.624 240.768 351.68 219.52 351.68 197.12c0-38.272 31.104-69.44 69.376-69.44 38.336 0 69.504 31.168 69.504 69.44 0 22.72-11.264 44.032-30.528 57.472C427.968 276.736 433.088 302.784 436.8 313.024c10.752 29.888 43.072 39.232 67.392 38.08l119.232 0 0 0.384c27.136 0 49.152 22.08 49.152 49.152l0.256 116.48c-3.776 27.84 6.016 60.736 36.224 71.488 12.736 4.608 37.632 7.488 60.8-25.28 13.056-18.368 34.24-29.248 56.704-29.248C864.832 534.016 896 565.12 896 603.392 896 641.728 864.832 672.896 826.56 672.896z" p-id="3146"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/dashboard.svg b/src/assets/icons/svg/dashboard.svg
new file mode 100644
index 0000000..5317d37
--- /dev/null
+++ b/src/assets/icons/svg/dashboard.svg
@@ -0,0 +1 @@
+<svg width="128" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/date-range.svg b/src/assets/icons/svg/date-range.svg
new file mode 100644
index 0000000..fda571e
--- /dev/null
+++ b/src/assets/icons/svg/date-range.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1579774833889" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1376" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M887.466667 192.853333h-100.693334V119.466667c0-10.24-6.826667-17.066667-17.066666-17.066667s-17.066667 6.826667-17.066667 17.066667v73.386666H303.786667V119.466667c0-10.24-6.826667-17.066667-17.066667-17.066667s-17.066667 6.826667-17.066667 17.066667v73.386666H168.96c-46.08 0-85.333333 37.546667-85.333333 85.333334V836.266667c0 46.08 37.546667 85.333333 85.333333 85.333333H887.466667c46.08 0 85.333333-37.546667 85.333333-85.333333V278.186667c0-47.786667-37.546667-85.333333-85.333333-85.333334z m-718.506667 34.133334h100.693333v66.56c0 10.24 6.826667 17.066667 17.066667 17.066666s17.066667-6.826667 17.066667-17.066666v-66.56h450.56v66.56c0 10.24 6.826667 17.066667 17.066666 17.066666s17.066667-6.826667 17.066667-17.066666v-66.56H887.466667c27.306667 0 51.2 22.186667 51.2 51.2v88.746666H117.76v-88.746666c0-29.013333 22.186667-51.2 51.2-51.2zM887.466667 887.466667H168.96c-27.306667 0-51.2-22.186667-51.2-51.2V401.066667H938.666667V836.266667c0 27.306667-22.186667 51.2-51.2 51.2z" p-id="1377"></path><path d="M858.453333 493.226667H327.68c-10.24 0-17.066667 6.826667-17.066667 17.066666v114.346667h-116.053333c-10.24 0-17.066667 6.826667-17.066667 17.066667v133.12c0 10.24 6.826667 17.066667 17.066667 17.066666H460.8c10.24 0 17.066667-6.826667 17.066667-17.066666v-114.346667h380.586666c10.24 0 17.066667-6.826667 17.066667-17.066667v-133.12c0-10.24-6.826667-17.066667-17.066667-17.066666z m-413.013333 34.133333v97.28h-98.986667v-97.28h98.986667z m-230.4 131.413333h98.986667v98.986667h-98.986667v-98.986667z m131.413333 97.28v-97.28h98.986667v97.28h-98.986667z m133.12-228.693333h97.28v98.986667h-97.28v-98.986667z m131.413334 0h98.986666v98.986667h-98.986666v-98.986667z m230.4 97.28h-98.986667v-98.986667h98.986667v98.986667z" p-id="1378"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/date.svg b/src/assets/icons/svg/date.svg
new file mode 100644
index 0000000..52dc73e
--- /dev/null
+++ b/src/assets/icons/svg/date.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577186573535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1068" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M479.85714249 608.42857168h64.28571502c19.28571417 0 32.14285751-12.85714249 32.14285664-32.14285751s-12.85714249-32.14285751-32.14285664-32.14285664h-64.28571504c-19.28571417 0-32.14285751 12.85714249-32.14285664 32.14285662s12.85714249 32.14285751 32.14285664 32.14285753z m-2e-8 122.14285665h64.28571504c19.28571417 0 32.14285751-12.85714249 32.14285664-32.14285665s-12.85714249-32.14285751-32.14285664-32.14285751h-64.28571504c-19.28571417 0-32.14285751 12.85714249-32.14285664 32.14285751s12.85714249 32.14285751 32.14285664 32.14285664z m353.57142921-559.28571416h-128.57142921v-32.14285664c0-19.28571417-12.85714249-32.14285751-32.14285664-32.14285753s-32.14285751 12.85714249-32.14285751 32.14285753v32.14285664h-257.14285665v-32.14285664c0-19.28571417-12.85714249-32.14285751-32.14285752-32.14285753s-32.14285751 12.85714249-32.14285664 32.14285753v32.14285664h-128.57142919c-70.71428585 0-128.57142832 57.85714249-128.57142832 122.14285751v501.42857081c0 70.71428585 57.85714249 128.57142832 128.57142832 122.14285751h642.85714335c70.71428585 0 128.57142832-57.85714249 128.57142833-122.14285751v-501.42857081c0-70.71428585-57.85714249-122.14285753-128.57142833-122.14285751z m64.28571415 623.57142832c0 32.14285751-32.14285751 64.28571415-64.28571416 64.28571504h-642.85714335c-32.14285751 0-64.28571415-25.71428583-64.28571417-64.28571504v-372.85714249h771.42857168v372.85714249z m0-437.14285664h-771.42857168v-64.28571417c0-32.14285751 32.14285751-64.28571415 64.28571417-64.28571415h128.57142919v32.14285664c0 19.28571417 12.85714249 32.14285751 32.14285664 32.14285751s32.14285751-12.85714249 32.14285753-32.14285751v-32.14285664h257.14285665v32.14285664c0 19.28571417 12.85714249 32.14285751 32.1428575 32.14285751s32.14285751-12.85714249 32.14285664-32.14285751v-32.14285664h128.57142921c32.14285751 0 64.28571415 25.71428583 64.28571415 64.28571415v64.28571417z m-610.71428583 372.85714247h64.28571415c19.28571417 0 32.14285751-12.85714249 32.14285753-32.14285664s-12.85714249-32.14285751-32.14285753-32.14285751h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285751 32.14285751s12.85714249 32.14285751 32.14285751 32.14285665z m385.71428583-122.14285664h64.28571417c19.28571417 0 32.14285751-12.85714249 32.14285751-32.14285751s-12.85714249-32.14285751-32.14285751-32.14285664h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285753 32.14285664s12.85714249 32.14285751 32.14285753 32.14285751z m-385.71428583 0h64.28571415c19.28571417 0 32.14285751-12.85714249 32.14285753-32.14285751s-12.85714249-32.14285751-32.14285753-32.14285664h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285751 32.14285664s12.85714249 32.14285751 32.14285751 32.14285751z m385.71428583 122.14285665h64.28571417c19.28571417 0 32.14285751-12.85714249 32.14285751-32.14285665s-12.85714249-32.14285751-32.14285751-32.14285751h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285753 32.14285751s12.85714249 32.14285751 32.14285753 32.14285665z" p-id="1069"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/dict.svg b/src/assets/icons/svg/dict.svg
new file mode 100644
index 0000000..4849377
--- /dev/null
+++ b/src/assets/icons/svg/dict.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566035680909" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3601" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1002.0848 744.672l-33.568 10.368c0.96 7.264 2.144 14.304 2.144 21.76 0 7.328-1.184 14.432-2.368 21.568l33.792 10.56c7.936 2.24 14.496 7.616 18.336 14.752 3.84 7.328 4.672 15.808 1.952 23.552-5.376 16-23.168 24.672-39.936 19.68l-34.176-10.624c-7.136 12.8-15.776 24.672-26.208 35.2l20.8 27.488a28.96 28.96 0 0 1 5.824 22.816 29.696 29.696 0 0 1-12.704 19.616 32.544 32.544 0 0 1-44.416-6.752l-20.8-27.552c-13.696 6.56-28.192 11.2-43.008 13.888v33.632c0 16.736-14.112 30.432-31.648 30.432-17.6 0-31.872-13.696-31.872-30.432v-33.632a167.616 167.616 0 0 1-42.88-13.888l-20.928 27.552c-10.72 13.76-30.08 16.64-44.288 6.752a29.632 29.632 0 0 1-12.704-19.616 29.28 29.28 0 0 1 5.696-22.816l20.896-27.808a166.72 166.72 0 0 1-27.008-34.688l-33.376 10.432c-16.8 5.184-34.56-3.552-39.936-19.616a29.824 29.824 0 0 1 20.224-38.24l33.472-10.432c-0.8-7.264-2.016-14.304-2.016-21.824 0-7.36 1.184-14.496 2.304-21.632l-33.792-10.368c-16.672-5.376-25.632-22.496-20.224-38.432 5.376-16 23.136-24.672 39.936-19.68l34.016 10.752c7.328-12.672 15.84-24.8 26.336-35.328l-20.8-27.552a29.44 29.44 0 0 1 6.944-42.432 32.704 32.704 0 0 1 44.384 6.752l20.832 27.616c13.696-6.432 28.224-11.2 43.104-13.952v-33.568c0-16.736 14.048-30.432 31.648-30.432 17.536 0 31.808 13.568 31.808 30.432v33.504c15.072 2.688 29.344 7.808 42.848 14.016l20.992-27.616a32.48 32.48 0 0 1 44.224-6.752 29.568 29.568 0 0 1 7.136 42.432l-21.024 27.808c10.432 10.432 19.872 21.888 27.04 34.752l33.376-10.432c16.768-5.12 34.56 3.68 39.936 19.68 5.536 15.936-3.712 33.056-20.32 38.304z m-206.016-74.432c-61.344 0-111.136 47.808-111.136 106.56 0 58.88 49.792 106.496 111.136 106.496 61.312 0 111.104-47.616 111.104-106.496 0-58.752-49.792-106.56-111.104-106.56z" p-id="3602"></path><path d="M802.7888 57.152h-76.448c0-22.08-21.024-38.24-42.848-38.24H39.3968a39.68 39.68 0 0 0-39.36 40.032v795.616s41.888 120.192 110.752 120.192H673.2848a227.488 227.488 0 0 1-107.04-97.44H117.6368s-40.608-13.696-40.608-41.248l470.304-0.256 1.664 3.36a227.68 227.68 0 0 1-12.64-73.632c0-60.576 24-118.624 66.88-161.44a228.352 228.352 0 0 1 123.552-63.392l-3.2 0.288 2.144-424.672h38.208l0.576 421.024c27.04 0 52.672 4.8 76.64 13.344V101.536c0.032 0-6.304-44.384-38.368-44.384zM149.7648 514.336H72.3888v-77.408H149.7648v77.408z m0-144.32H72.3888v-77.44H149.7648v77.44z m0-137.248H72.3888v-77.44H149.7648v77.44z m501.856 281.568H206.0848v-77.408h445.536v77.408z m0-144.32H206.0848v-77.44h445.536v77.44z m0-137.248H206.0848v-77.44h445.536v77.44z" p-id="3603"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/documentation.svg b/src/assets/icons/svg/documentation.svg
new file mode 100644
index 0000000..7043122
--- /dev/null
+++ b/src/assets/icons/svg/documentation.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M71.984 44.815H115.9L71.984 9.642v35.173zM16.094.05h63.875l47.906 38.37v76.74c0 3.392-1.682 6.645-4.677 9.044-2.995 2.399-7.056 3.746-11.292 3.746H16.094c-4.236 0-8.297-1.347-11.292-3.746-2.995-2.399-4.677-5.652-4.677-9.044V12.84C.125 5.742 7.23.05 16.094.05zm71.86 102.32V89.58h-71.86v12.79h71.86zm23.952-25.58V64H16.094v12.79h95.812z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/download.svg b/src/assets/icons/svg/download.svg
new file mode 100644
index 0000000..c896951
--- /dev/null
+++ b/src/assets/icons/svg/download.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569915748289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3062" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M768.35456 416a256 256 0 1 0-512 0 192 192 0 1 0 0 384v64a256 256 0 0 1-58.88-505.216 320.128 320.128 0 0 1 629.76 0A256.128 256.128 0 0 1 768.35456 864v-64a192 192 0 0 0 0-384z m-512 384h64v64H256.35456v-64z m448 0h64v64h-64v-64z" fill="#333333" p-id="3063"></path><path d="M539.04256 845.248V512.192a32.448 32.448 0 0 0-32-32.192c-17.664 0-32 14.912-32 32.192v333.056l-36.096-36.096a32.192 32.192 0 0 0-45.056 0.192 31.616 31.616 0 0 0-0.192 45.056l90.88 90.944a31.36 31.36 0 0 0 22.528 9.088 30.08 30.08 0 0 0 22.4-9.088l90.88-90.88a32.192 32.192 0 0 0-0.192-45.12 31.616 31.616 0 0 0-45.056-0.192l-36.096 36.096z" fill="#333333" p-id="3064"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/drag.svg b/src/assets/icons/svg/drag.svg
new file mode 100644
index 0000000..4185d3c
--- /dev/null
+++ b/src/assets/icons/svg/drag.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M73.137 29.08h-9.209 29.7L63.886.093 34.373 29.08h20.49v27.035H27.238v17.948h27.625v27.133h18.274V74.063h27.41V56.115h-27.41V29.08zm-9.245 98.827l27.518-26.711H36.59l27.302 26.71zM.042 64.982l27.196 27.029V38.167L.042 64.982zm100.505-26.815V92.01l27.41-27.029-27.41-26.815z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/druid.svg b/src/assets/icons/svg/druid.svg
new file mode 100644
index 0000000..a2b4b4e
--- /dev/null
+++ b/src/assets/icons/svg/druid.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566036347051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M832 128H192a64.19 64.19 0 0 0-64 64v640a64.19 64.19 0 0 0 64 64h640a64.19 64.19 0 0 0 64-64V192a64.19 64.19 0 0 0-64-64z m0 703.89l-0.11 0.11H192.11l-0.11-0.11V768h640zM832 544H720L605.6 696.54 442.18 435.07 333.25 544H192v-64h114.75l147.07-147.07L610.4 583.46 688 480h144z m0-288H192v-63.89l0.11-0.11h639.78l0.11 0.11z" p-id="5854"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/edit.svg b/src/assets/icons/svg/edit.svg
new file mode 100644
index 0000000..d26101f
--- /dev/null
+++ b/src/assets/icons/svg/edit.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M106.133 67.2a4.797 4.797 0 0 0-4.8 4.8c0 .187.014.36.027.533h-.027V118.4H9.6V26.667h50.133c2.654 0 4.8-2.147 4.8-4.8 0-2.654-2.146-4.8-4.8-4.8H9.6a9.594 9.594 0 0 0-9.6 9.6V118.4c0 5.307 4.293 9.6 9.6 9.6h91.733c5.307 0 9.6-4.293 9.6-9.6V72.533h-.026c.013-.173.026-.346.026-.533 0-2.653-2.146-4.8-4.8-4.8z"/><path d="M125.16 13.373L114.587 2.8c-3.747-3.747-9.854-3.72-13.6.027l-52.96 52.96a4.264 4.264 0 0 0-.907 1.36L33.813 88.533c-.746 1.76-.226 3.534.907 4.68 1.133 1.147 2.92 1.667 4.693.92l31.4-13.293c.507-.213.96-.52 1.36-.907l52.96-52.96c3.747-3.746 3.774-9.853.027-13.6zM66.107 72.4l-18.32 7.76 7.76-18.32L92.72 24.667l10.56 10.56L66.107 72.4zm52.226-52.227l-8.266 8.267-10.56-10.56 8.266-8.267.027-.026 10.56 10.56-.027.026z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/education.svg b/src/assets/icons/svg/education.svg
new file mode 100644
index 0000000..7bfb01d
--- /dev/null
+++ b/src/assets/icons/svg/education.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M88.883 119.565c-7.284 0-19.434 2.495-21.333 8.25v.127c-4.232.13-5.222 0-7.108 0-1.895-5.76-14.045-8.256-21.333-8.256H0V0h42.523c9.179 0 17.109 5.47 21.47 13.551C68.352 5.475 76.295 0 85.478 0H128v119.57l-39.113-.005h-.004zM60.442 24.763c0-9.651-8.978-16.507-17.777-16.507H7.108V111.43H39.11c7.054-.14 18.177.082 21.333 6.12v-4.628c-.134-5.722-.004-13.522 0-13.832V27.413l.004-2.655-.004.005zm60.442-16.517h-35.55c-8.802 0-17.78 6.856-17.78 16.493v74.259c.004.32.138 8.115 0 13.813v4.627c3.155-6.022 14.279-6.26 21.333-6.114h32V8.25l-.003-.005z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/email.svg b/src/assets/icons/svg/email.svg
new file mode 100644
index 0000000..74d25e2
--- /dev/null
+++ b/src/assets/icons/svg/email.svg
@@ -0,0 +1 @@
+<svg width="128" height="96" xmlns="http://www.w3.org/2000/svg"><path d="M64.125 56.975L120.188.912A12.476 12.476 0 0 0 115.5 0h-103c-1.588 0-3.113.3-4.513.838l56.138 56.137z"/><path d="M64.125 68.287l-62.3-62.3A12.42 12.42 0 0 0 0 12.5v71C0 90.4 5.6 96 12.5 96h103c6.9 0 12.5-5.6 12.5-12.5v-71a12.47 12.47 0 0 0-1.737-6.35L64.125 68.287z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/example.svg b/src/assets/icons/svg/example.svg
new file mode 100644
index 0000000..46f42b5
--- /dev/null
+++ b/src/assets/icons/svg/example.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/excel.svg b/src/assets/icons/svg/excel.svg
new file mode 100644
index 0000000..74d97b8
--- /dev/null
+++ b/src/assets/icons/svg/excel.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M78.208 16.576v8.384h38.72v5.376h-38.72v8.704h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.512h38.72v5.376h-38.72v11.136H128v-94.72H78.208zM0 114.368L72.128 128V0L0 13.632v100.736z"/><path d="M28.672 82.56h-11.2l14.784-23.488-14.08-22.592h11.52l8.192 14.976 8.448-14.976h11.136l-14.08 22.208L58.368 82.56H46.656l-8.768-15.68z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/exit-fullscreen.svg b/src/assets/icons/svg/exit-fullscreen.svg
new file mode 100644
index 0000000..485c128
--- /dev/null
+++ b/src/assets/icons/svg/exit-fullscreen.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/eye-open.svg b/src/assets/icons/svg/eye-open.svg
new file mode 100644
index 0000000..88dcc98
--- /dev/null
+++ b/src/assets/icons/svg/eye-open.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/eye.svg b/src/assets/icons/svg/eye.svg
new file mode 100644
index 0000000..16ed2d8
--- /dev/null
+++ b/src/assets/icons/svg/eye.svg
@@ -0,0 +1 @@
+<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/finish.svg b/src/assets/icons/svg/finish.svg
new file mode 100644
index 0000000..4685c23
--- /dev/null
+++ b/src/assets/icons/svg/finish.svg
@@ -0,0 +1 @@
+<svg t="1716006237008" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12400" width="200" height="200"><path d="M738.826039 1005.166431c-150.226824 0-272.00251-121.916235-272.00251-272.303686 0-150.407529 121.775686-272.323765 272.00251-272.323765 150.206745 0 271.982431 121.916235 271.982432 272.323765 0 150.387451-121.775686 272.303686-271.982432 272.303686z m-0.040157-508.225255c-128.582275 0-232.789333 104.347608-232.789333 233.09051s104.207059 233.110588 232.789333 233.110589c128.562196 0 232.769255-104.367686 232.769255-233.110589 0-128.742902-104.207059-233.09051-232.769255-233.09051z m10.561255 318.243138s-3.694431 3.674353-7.408941 3.674353a18.010353 18.010353 0 0 1-25.941333 0l-74.10949-80.916079a17.66902 17.66902 0 0 1 0-25.740549c7.408941-7.368784 22.246902-7.368784 25.941333 0l63.006118 69.872941 129.686588-117.699764a18.010353 18.010353 0 0 1 25.941333 0 17.709176 17.709176 0 0 1 0 25.760627L749.347137 815.184314zM391.529412 682.666667H190.745098a20.078431 20.078431 0 0 1 0-40.156863h200.784314a20.078431 20.078431 0 1 1 0 40.156863zM170.666667 261.019608a20.078431 20.078431 0 0 1 20.078431-20.078432h481.882353a20.078431 20.078431 0 0 1 0 40.156863H190.745098a20.078431 20.078431 0 0 1-20.078431-20.078431z m341.333333 200.784314H190.745098a20.078431 20.078431 0 0 1 0-40.156863h321.254902a20.078431 20.078431 0 0 1 0 40.156863zM813.176471 120.470588a80.313725 80.313725 0 0 0-80.313726-80.313725H130.509804a80.313725 80.313725 0 0 0-80.313726 80.313725v762.980392a80.313725 80.313725 0 0 0 80.313726 80.313726h366.832941a346.112 346.112 0 0 0 40.417882 40.779294H130.509804a120.470588 120.470588 0 0 1-120.470588-120.470588V120.470588a120.470588 120.470588 0 0 1 120.470588-120.470588h602.352941a120.470588 120.470588 0 0 1 120.470588 120.470588v293.667137a340.188863 340.188863 0 0 0-40.156862-8.533333V120.470588z" fill="currentColor" p-id="12401"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/form.svg b/src/assets/icons/svg/form.svg
new file mode 100644
index 0000000..dcbaa18
--- /dev/null
+++ b/src/assets/icons/svg/form.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/fullscreen.svg b/src/assets/icons/svg/fullscreen.svg
new file mode 100644
index 0000000..0e86b6f
--- /dev/null
+++ b/src/assets/icons/svg/fullscreen.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/gitee.svg b/src/assets/icons/svg/gitee.svg
new file mode 100644
index 0000000..6324608
--- /dev/null
+++ b/src/assets/icons/svg/gitee.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686919908144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2521" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512 992C246.895625 992 32 777.104375 32 512S246.895625 32 512 32s480 214.895625 480 480-214.895625 480-480 480z m242.9521875-533.3278125h-272.56875a23.7121875 23.7121875 0 0 0-23.71125 23.7121875l-0.024375 59.255625c0 13.08 10.6078125 23.7121875 23.6878125 23.7121875h165.96c13.104375 0 23.7121875 10.6078125 23.7121875 23.6878125v11.855625a71.1121875 71.1121875 0 0 1-71.1121875 71.1121875h-225.215625a23.7121875 23.7121875 0 0 1-23.6878125-23.7121875V423.1278125a71.1121875 71.1121875 0 0 1 71.0878125-71.1121875h331.824375a23.7121875 23.7121875 0 0 0 23.6878125-23.71125l0.0721875-59.2565625a23.7121875 23.7121875 0 0 0-23.68875-23.7121875H423.08a177.76875 177.76875 0 0 0-177.76875 177.7921875V754.953125c0 13.1034375 10.60875 23.7121875 23.713125 23.7121875h349.63125a159.984375 159.984375 0 0 0 159.984375-159.984375V482.36a23.7121875 23.7121875 0 0 0-23.7121875-23.6878125z" fill="#515151" p-id="2522"></path></svg>
diff --git a/src/assets/icons/svg/github.svg b/src/assets/icons/svg/github.svg
new file mode 100644
index 0000000..db0a0d4
--- /dev/null
+++ b/src/assets/icons/svg/github.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1581238998885" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4187" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.542857 14.057143C228.914286 13.942857 0 242.742857 0 525.142857 0 748.457143 143.2 938.285714 342.628571 1008c26.857143 6.742857 22.742857-12.342857 22.742858-25.371429v-88.571428c-155.085714 18.171429-161.371429-84.457143-171.771429-101.6C172.571429 756.571429 122.857143 747.428571 137.714286 730.285714c35.314286-18.171429 71.314286 4.571429 113.028571 66.171429 30.171429 44.685714 89.028571 37.142857 118.857143 29.714286 6.514286-26.857143 20.457143-50.857143 39.657143-69.485715-160.685714-28.8-227.657143-126.857143-227.657143-243.428571 0-56.571429 18.628571-108.571429 55.2-150.514286-23.314286-69.142857 2.171429-128.342857 5.6-137.142857 66.4-5.942857 135.428571 47.542857 140.8 51.771429 37.714286-10.171429 80.8-15.542857 129.028571-15.542858 48.457143 0 91.657143 5.6 129.714286 15.885715 12.914286-9.828571 76.914286-55.771429 138.628572-50.171429 3.314286 8.8 28.228571 66.628571 6.285714 134.857143 37.028571 42.057143 55.885714 94.514286 55.885714 151.2 0 116.8-67.428571 214.971429-228.571428 243.314286a145.714286 145.714286 0 0 1 43.542857 104v128.571428c0.914286 10.285714 0 20.457143 17.142857 20.457143 202.4-68.228571 348.114286-259.428571 348.114286-484.685714 0-282.514286-229.028571-511.2-511.428572-511.2z" p-id="4188"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/guide.svg b/src/assets/icons/svg/guide.svg
new file mode 100644
index 0000000..b271001
--- /dev/null
+++ b/src/assets/icons/svg/guide.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M1.482 70.131l36.204 16.18 69.932-65.485-61.38 70.594 46.435 18.735c1.119.425 2.397-.17 2.797-1.363v-.085L127.998.047 1.322 65.874c-1.12.597-1.519 1.959-1.04 3.151.32.511.72.937 1.2 1.107zm44.676 57.821L64.22 107.26l-18.062-7.834v28.527z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/icon.svg b/src/assets/icons/svg/icon.svg
new file mode 100644
index 0000000..82be8ee
--- /dev/null
+++ b/src/assets/icons/svg/icon.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.147.062a13 13 0 0 1 4.94.945c1.55.63 2.907 1.526 4.069 2.688a13.148 13.148 0 0 1 2.761 4.069c.678 1.55 1.017 3.245 1.017 5.086v102.3c0 3.681-1.187 6.733-3.56 9.155-2.373 2.422-5.352 3.633-8.937 3.633H12.992c-3.875 0-7-1.26-9.373-3.779-2.373-2.518-3.56-5.667-3.56-9.445V12.704c0-3.39 1.163-6.345 3.488-8.863C5.872 1.32 8.972.062 12.847.062h102.3zM81.434 109.047c1.744 0 3.003-.412 3.778-1.235.775-.824 1.163-1.914 1.163-3.27 0-1.26-.388-2.325-1.163-3.197-.775-.872-2.034-1.307-3.778-1.307H72.57c.097-.194.145-.485.145-.872V27.09h9.01c1.743 0 2.954-.436 3.633-1.308.678-.872 1.017-1.938 1.017-3.197 0-1.26-.34-2.325-1.017-3.197-.679-.872-1.89-1.308-3.633-1.308H46.268c-1.743 0-2.954.436-3.632 1.308-.678.872-1.018 1.938-1.018 3.197 0 1.26.34 2.325 1.018 3.197.678.872 1.889 1.308 3.632 1.308h8.138v72.075c0 .193.024.339.073.436.048.096.072.242.072.436H46.56c-1.744 0-3.003.435-3.778 1.307-.775.872-1.163 1.938-1.163 3.197 0 1.356.388 2.446 1.163 3.27.775.823 2.034 1.235 3.778 1.235h34.875z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/input.svg b/src/assets/icons/svg/input.svg
new file mode 100644
index 0000000..ab91381
--- /dev/null
+++ b/src/assets/icons/svg/input.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575802859706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3102" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 224H128c-35.2 0-64 28.8-64 64v448c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64z m0 480c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V320c0-19.2 12.8-32 32-32h704c19.2 0 32 12.8 32 32v384z" p-id="3103"></path><path d="M224 352c-19.2 0-32 12.8-32 32v256c0 16 12.8 32 32 32s32-12.8 32-32V384c0-16-12.8-32-32-32z" p-id="3104"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/international.svg b/src/assets/icons/svg/international.svg
new file mode 100644
index 0000000..e9b56ee
--- /dev/null
+++ b/src/assets/icons/svg/international.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M83.287 103.01c-1.57-3.84-6.778-10.414-15.447-19.548-2.327-2.444-2.182-4.306-1.338-9.862v-.64c.553-3.81 1.513-6.05 14.313-8.087 6.516-1.018 8.203 1.57 10.589 5.178l.785 1.193a12.625 12.625 0 0 0 6.43 5.207c1.134.524 2.53 1.164 4.421 2.24 4.596 2.53 4.596 5.41 4.596 11.753v.727a26.91 26.91 0 0 1-5.178 17.454 59.055 59.055 0 0 1-19.025 11.026c3.49-6.546.814-14.313 0-16.553l-.146-.087zM64 5.12a58.502 58.502 0 0 1 25.484 5.818 54.313 54.313 0 0 0-12.859 10.327c-.93 1.28-1.716 2.473-2.472 3.579-2.444 3.694-3.637 5.352-5.818 5.614a25.105 25.105 0 0 1-4.219 0c-4.276-.29-10.094-.64-11.956 4.422-1.193 3.23-1.396 11.956 2.444 16.495.66 1.077.778 2.4.32 3.578a7.01 7.01 0 0 1-2.066 3.229 18.938 18.938 0 0 1-2.909-2.91 18.91 18.91 0 0 0-8.32-6.603c-1.25-.349-2.647-.64-3.985-.93-3.782-.786-8.03-1.688-9.019-3.812a14.895 14.895 0 0 1-.727-5.818 21.935 21.935 0 0 0-1.396-9.25 8.873 8.873 0 0 0-5.557-4.946A58.705 58.705 0 0 1 64 5.12zM0 64c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-35.346-28.654-64-64-64C28.654 0 0 28.654 0 64z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/job.svg b/src/assets/icons/svg/job.svg
new file mode 100644
index 0000000..2a93a25
--- /dev/null
+++ b/src/assets/icons/svg/job.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566036191400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5472" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M934.912 1016.832H192c-14.336 0-25.6-11.264-25.6-25.6v-189.44c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v163.84h691.712V64H217.6v148.48c0 14.336-11.264 25.6-25.6 25.6s-25.6-11.264-25.6-25.6v-174.08c0-14.336 11.264-25.6 25.6-25.6h742.912c14.336 0 25.6 11.264 25.6 25.6v952.832c0 14.336-11.264 25.6-25.6 25.6z" p-id="5473"></path><path d="M232.96 371.2h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM232.96 540.16h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM232.96 698.88h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM574.464 762.88c-134.144 0-243.2-109.056-243.2-243.2S440.32 276.48 574.464 276.48s243.2 109.056 243.2 243.2-109.056 243.2-243.2 243.2z m0-435.2c-105.984 0-192 86.016-192 192S468.48 711.68 574.464 711.68s192-86.016 192-192S680.448 327.68 574.464 327.68z" p-id="5474"></path><path d="M663.04 545.28h-87.04c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h87.04c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6z" p-id="5475"></path><path d="M576 545.28c-14.336 0-25.6-11.264-25.6-25.6v-87.04c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v87.04c0 14.336-11.264 25.6-25.6 25.6z" p-id="5476"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/language.svg b/src/assets/icons/svg/language.svg
new file mode 100644
index 0000000..0082b57
--- /dev/null
+++ b/src/assets/icons/svg/language.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.742 36.8c2.398 7.2 5.595 12.8 11.19 18.4 4.795-4.8 7.992-11.2 10.39-18.4h-21.58zm-52.748 40h20.78l-10.39-28-10.39 28z"/><path d="M111.916 0H16.009C7.218 0 .025 7.2.025 16v96c0 8.8 7.193 16 15.984 16h95.907c8.791 0 15.984-7.2 15.984-16V16c0-8.8-6.394-16-15.984-16zM72.754 103.2c-1.598 1.6-3.197 1.6-4.795 1.6-.8 0-2.398 0-3.197-.8-.8-.8-1.599 0-1.599-.8s-.799-1.6-1.598-3.2c-.8-1.6-.8-2.4-1.599-4l-3.196-8.8H28.797L25.6 96c-1.598 3.2-2.398 5.6-3.197 7.2-.8 1.6-2.398 1.6-4.795 1.6-1.599 0-3.197-.8-4.796-1.6-1.598-1.6-2.397-2.4-2.397-4 0-.8 0-1.6.799-3.2.8-1.6.8-2.4 1.598-4l17.583-44.8c.8-1.6.8-3.2 1.599-4.8.799-1.6 1.598-3.2 2.397-4 .8-.8 1.599-2.4 3.197-3.2 1.599-.8 3.197-.8 4.796-.8 1.598 0 3.196 0 4.795.8 1.598.8 2.398 1.6 3.197 3.2.799.8 1.598 2.4 2.397 4 .8 1.6 1.599 3.2 2.398 5.6l17.583 44c1.598 3.2 2.398 5.6 2.398 7.2-.8.8-1.599 2.4-2.398 4zM116.711 72c-8.791-3.2-15.185-7.2-20.78-12-5.594 5.6-12.787 9.6-21.579 12l-2.397-4c8.791-2.4 15.984-5.6 21.579-11.2C87.939 51.2 83.144 44 81.545 36h-7.992v-3.2h21.58c-1.6-2.4-3.198-5.6-4.796-8l2.397-.8c1.599 2.4 3.997 5.6 5.595 8.8h19.98v4h-7.992c-2.397 8-6.393 15.2-11.189 20 5.595 4.8 11.988 8.8 20.78 11.2l-3.197 4z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/link.svg b/src/assets/icons/svg/link.svg
new file mode 100644
index 0000000..48197ba
--- /dev/null
+++ b/src/assets/icons/svg/link.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/list.svg b/src/assets/icons/svg/list.svg
new file mode 100644
index 0000000..20259ed
--- /dev/null
+++ b/src/assets/icons/svg/list.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M1.585 12.087c0 6.616 3.974 11.98 8.877 11.98 4.902 0 8.877-5.364 8.877-11.98 0-6.616-3.975-11.98-8.877-11.98-4.903 0-8.877 5.364-8.877 11.98zM125.86.107H35.613c-1.268 0-2.114 1.426-2.114 2.852v18.255c0 1.712 1.057 2.853 2.114 2.853h90.247c1.268 0 2.114-1.426 2.114-2.853V2.96c0-1.711-1.057-2.852-2.114-2.852zM.106 62.86c0 6.615 3.974 11.979 8.876 11.979 4.903 0 8.877-5.364 8.877-11.98 0-6.616-3.974-11.98-8.877-11.98-4.902 0-8.876 5.364-8.876 11.98zM124.17 50.88H33.921c-1.268 0-2.114 1.425-2.114 2.851v18.256c0 1.711 1.057 2.852 2.114 2.852h90.247c1.268 0 2.114-1.426 2.114-2.852V53.73c0-1.426-.846-2.852-2.114-2.852zM.106 115.913c0 6.616 3.974 11.98 8.876 11.98 4.903 0 8.877-5.364 8.877-11.98 0-6.616-3.974-11.98-8.877-11.98-4.902 0-8.876 5.364-8.876 11.98zm124.064-11.98H33.921c-1.268 0-2.114 1.426-2.114 2.853v18.255c0 1.711 1.057 2.852 2.114 2.852h90.247c1.268 0 2.114-1.426 2.114-2.852v-18.255c0-1.427-.846-2.853-2.114-2.853z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/lock.svg b/src/assets/icons/svg/lock.svg
new file mode 100644
index 0000000..74fee54
--- /dev/null
+++ b/src/assets/icons/svg/lock.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M119.88 49.674h-7.987V39.52C111.893 17.738 90.45.08 63.996.08 37.543.08 16.1 17.738 16.1 39.52v10.154H8.113c-4.408 0-7.987 2.94-7.987 6.577v65.13c0 3.637 3.57 6.577 7.987 6.577H119.88c4.407 0 7.987-2.94 7.987-6.577v-65.13c-.008-3.636-3.58-6.577-7.987-6.577zm-23.953 0H32.065V39.52c0-14.524 14.301-26.295 31.931-26.295 17.63 0 31.932 11.777 31.932 26.295v10.153z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/log.svg b/src/assets/icons/svg/log.svg
new file mode 100644
index 0000000..d879d33
--- /dev/null
+++ b/src/assets/icons/svg/log.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566035943711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4805" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M208.736 566.336H64.384v59.328h144.352v-59.328z m0-336.096H165.44V74.592c0-7.968 4.896-14.848 10.464-14.848h502.016V0.448H175.936c-38.72 1.248-69.248 34.368-68.192 74.144v155.648H64.384V289.6h144.352V230.24z m0 168.096H64.384v59.328h144.352v-59.328z m714.656 76.576h-57.76v474.496c0 7.936-4.896 14.848-10.464 14.848H175.936c-5.568 0-10.464-6.912-10.464-14.848v-155.68h43.296v-59.296H64.384v59.296h43.328v155.68c-1.024 39.776 29.472 72.896 68.192 74.144h679.232c38.72-1.184 69.248-34.368 68.256-74.144V474.912z m14.944-290.336l-83.072-85.312a71.264 71.264 0 0 0-52.544-21.728 71.52 71.52 0 0 0-51.616 23.872L386.528 507.264a30.496 30.496 0 0 0-6.176 10.72L308.16 740.512a30.016 30.016 0 0 0 6.976 30.24c7.712 7.968 19.2 10.752 29.568 7.2l216.544-74.112a28.736 28.736 0 0 0 12.128-7.936L940.448 287.456a75.552 75.552 0 0 0-2.112-102.88z m-557.12 518.272l39.104-120.64 78.336 80.416-117.44 40.224z m170.048-70.016l-103.552-106.016 200.16-222.4 103.52 106.304-200.128 222.112zM897.952 247.072l-0.256 0.224-107.136 119.168-103.52-106.528 106.432-118.624a14.144 14.144 0 0 1 10.304-4.736 13.44 13.44 0 0 1 10.464 4.288l83.264 85.696c5.472 5.6 5.664 14.72 0.448 20.512z" p-id="4806"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/logininfo.svg b/src/assets/icons/svg/logininfo.svg
new file mode 100644
index 0000000..267f844
--- /dev/null
+++ b/src/assets/icons/svg/logininfo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566036016814" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5261" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 128h-85.333333a42.666667 42.666667 0 0 0 0 85.333333h42.666666v640H170.666667V213.333333h42.666666a42.666667 42.666667 0 0 0 0-85.333333H128a42.666667 42.666667 0 0 0-42.666667 42.666667v725.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z" p-id="5262"></path><path d="M341.333333 298.666667a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-85.333333 0v128a42.666667 42.666667 0 0 0 42.666666 42.666667zM512 298.666667a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-85.333334 0v128a42.666667 42.666667 0 0 0 42.666667 42.666667zM682.666667 298.666667a42.666667 42.666667 0 0 0 42.666666-42.666667V128a42.666667 42.666667 0 0 0-85.333333 0v128a42.666667 42.666667 0 0 0 42.666667 42.666667zM341.333333 768a42.666667 42.666667 0 0 0 42.666667-42.666667 128 128 0 0 1 256 0 42.666667 42.666667 0 0 0 85.333333 0 213.333333 213.333333 0 0 0-107.52-184.32A128 128 0 0 0 640 469.333333a128 128 0 0 0-256 0 128 128 0 0 0 22.186667 71.68A213.333333 213.333333 0 0 0 298.666667 725.333333a42.666667 42.666667 0 0 0 42.666666 42.666667z m128-298.666667a42.666667 42.666667 0 1 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667z" p-id="5263"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/maxkey.svg b/src/assets/icons/svg/maxkey.svg
new file mode 100644
index 0000000..f8f8a7d
--- /dev/null
+++ b/src/assets/icons/svg/maxkey.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 256 256">
+  <image id="图层_1" data-name="图层 1" x="32" y="25" width="192" height="206" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADOCAYAAABo1g13AAAazklEQVR4nO2dS1NcR5bH/3kLYZl22OXdbCRdVtOoF4Zd9zxCsJudYNc7wScQRFvYO8Fmoo16AvgEwK53QquZHXjh3lJaWHinBH8AlxQdtiyZmxN5MqsooB6Z95V5b+UvQmGZKMGt4pw8jzwPhoA3xPFqPOxZON/h4beVL0EBCoaE+mJyFhBNMBYD4h4Ya0JACnuz548NbfrDhFIIAQ6wMwjB0ZBf+63F+U67np9ovgQFyImuoLMkBtgXAJuXX3b4SFJBWgBrQyTfIkIrKMZNggKkJI6/nEeCWbDoAQRmHQu7DS0wcCTiBRpocf6sVZHnLoSgAIbQCZ9MLGqBn4e92+Ir0n06JivR+HA8bnFGUIAhqFOeLQLsYYVO+GwwcQwhXiD67XAclCEowDV6hP5RjU75tLSA5KDOyhAUQLk3TSSTj8GwqP35wHWkZUhwgMaHwzoF0mOtAHTaC/YUgjI2ATPaADtE9OtmHazC2CmAOu0nlsGiR+G0z4i2CvzHZ/uVfQsePEMpdN0cYDX49rnDIcRmFRWh9goQBL9UKqcItVWAIPhOqYwi1FIB4vjJYyRsIwi+c7xXhFopgMrhR3tjc2lVFWSwzD6s+Jg1qoUCUJmCuLUX0pm+w/Z9S582PHiGTMR3159CNPYB9vsKv41xYRaisdj89N/etN/+w4sivMpagDh+MosLtg+GLzx4nIA1fliDSloAdeqzv4PhXzx4nEA6vLAGlbIAuunkMJz6dcOdNaiMBVCpzQl56ocMT/1Q1uDzP71st/9RqhJ4bwH0hdZTfaEVqD8b/Hxrs6x36bUCqC6syaOQ1x8zGA7B3q+V4RJ5qwDxnfVFMOyF29yxhSN6v1C0EkQ+frqU5WF4HoR/rJHW/4QOwgLxLgiO765vA/jag0cJuOc2GP7c/Ozf0X7z3bdFPI03CiCD3eZn//m/APuzB48T8Iv5opTACwXQ+f3/A9gfPXicgJ/MNz/7j7j95rsXeT6d8yA4ZHoClrTwdmqBtzdyacx3qgBB+AMpyU0JnClAEP5ARnJRAicKEIS/CwejSc+yc6rzi3xDA22vIGQ6+DOaKk1/vzJdepzJrASlK8AYCn+bhtEK8S0iObpc/rlo5XXBQ2XhSkFmIaIH9LmO17iXTEpQqgKMifC3AXGISLyUQ2ddTV+m9tCOUtRrmG8/UitBaQqgi9pOain8NFCWyRP+0Ndx492Zp4w9qKeFYPv8/JsV639VzMPcJL6z3qpVHT81eosXwCf7nOeTkiuLOP46RpIsg+GRjiVqAtvh59+sWf0ay3jjuryhDuXMUtB3fT7pbdGTNJYBPKrWkw/Eqpy6cAWgwjZgo+ifUygVPu1NIauACz0suOJWIcIy51sHJi8tVAF0SfPzIn9GoSjB3+T8b8eVfQ8piOMnyxVXhDai93MmmbbCFEBnfE4qmX0YU8G/TsUVgePt1NyozFAhClDZjI/M17NkZdwF/zqVVQTGjvnZNwtDX1LEz43vru9XLKii4JafbzmLVcRpV7gGCRmZczYDJ3N0dOZoo4LB8tCgOHcF0INpd/L+voVB7k5jhfO/FipY4jWa+BkxInk5hVlEuEf/FWiCWbqJgm6XW1RGIfASAi25LJv9AYVnpkgRRHJUKWsQJQuDrHquCqD9/td5fs8CaSPCCudbh0X8CBL4X+gGdh4Ryrl86iiGVAqGQzaDwly5+O66tAZPi/r+OTMwHshXAe6uv66E31/QqU9ujIDMfD0kwfcBOWFBQDaRHOftPlXKGjAc8rOtpZtfzokK5fvX+PlWbi6aPumXvRL6wUiLcMBmkOu8/gpZgxu/+1wUoBKuD2V4xFJeN7jiFPMQkDeoD619ePdwrQybeVkFyhQlbNvztPeN+4F8xqKoCk9/IZcnWshD+KXgi1PI93tEtTTVE35oN1Uq72txir2eDFRqOH+2jyiao4PGX5oQH+31Pl1mC+C/6yN2+fmzzHVIdOIrM1/PJRwqVljLahF0XPDc64pTgSX+o0p+ZFKACrg+m1lz+7UX/Jvs5+EaxXef7ADscUHPmJVuViibCyQmt314NwNYyyL8MrgVP2CbXJ3xEX70uEaZglptdUsbcmtJjE9/ofeX2gLEd54sg7E9g5eWTyRWyCdNifgBj5Fgo6L+fZ5IK7CS5T7B6wxRJObSWwDGfH1TqYVfBoMU4ArsBOEnZHB8JC0hpXtToK2wb5agTe4xf9ZKpQA68PXv8iOb8Mu05smYuTtmCKziHU7SZov8UgKxi2hquuMeW7tAHje2p77gIl9fhAUcRshM0X2k+pydukMDStztFcDPSs9U2R4y6++oYSec+jYw7LDfw6r3tkPp8kMXoFgbVPNlpQCepj3TCb8y52E4V1pU0d1SmnRpfG/9pIR7At2/PbUzrI11wupbJpN+XXgxcczPntkL//f04T8Pwp8BJcBH4hQL1krA3i8AkyfFFdHJrZNs06TY0dgCeHf6k2mT5Q12FZ0k/IzKGEKWJx/k52+tBLrBJt+W2RStrOZZIO9O/xTCf0q1O0H48yXWlsDqNKffXSRSxRF9aFMG8OzZwMaXQRhZAA99f+uMD538EaU5A8WQzhJkK5kw8vOHYRYDXNya92efJI3Asxd+Br8rVqtPnComiD5sQEw+tI4HcmpqMnOBfLn1lX5/xKwuVMg0R3ge3J5SUEpgcWvM+U5b9mkYPxzDS+rxJXcne0ffSAWgmh9fsiUU4Ji/6ZDqdEKs71aM0X0aow62Nrm+Z1uzeY6tGW0BIl8uvdh+ijKHwyD8TpjXlbTG0F0OGzTVolu+kPu0kaExgAp+mftbUkp5Wrs+0m2rzzTqqiGwKl7hzKpsgiVrENFlrEZ+vrzFLW4Q8dDQ1puyB8siN3FKNe1+lmqPE2pu0ZxNUExZIcYeljWhb5QL9KDoBxgJA7cU/rhC82rqjaBg2CoopqwQm5orazzlQBdIzY33wH9mie3Wj73g93tFjF/pQDK69KKsUIkMtgBqaYJjZOBrfhJQJ1eo7PQPGQ+c+vl7GeYCPSzxOfpjkfMn1yep+CKOerOXtqusSPoqQHznL4vuBxzJ09/iokOEHl7PkfcD3jUd9Y8BWGOx9Ce5TtTYNX2peEXzOKu844pTDjzBWXdxdofL6dH3ujuAq6roEb0HrxgUBLvN/sg6f/7f5rlfZnfp4gGcBtbKYVS30WLTsAr89BBeqQiL+nfle9CvxjD+a3HTqtNyQwG8yP4wGC04w2XO3/+sjyAhP8hjbLnOq3N9090Z3uXfpkf1njfT9hCXwY2LMOcTvWTe/2xr2vTl4hR+j2RXM/t3cRs7tie99Y9SdyC+bHHZLOM9Z+VmEOx6mTUTNpkf30//TXyMaTaDjTIEQVoGNkOfyTRZGzdI61bae87KFQugl9v95PSJomjaNPvj8en/EsCiq31eHXRyYLukzyjzFDkXXLUAFw3HlxXihbHwv6IA0D/hF9hlM5h1LfwSdp9ihIVCrYGgeh85VXq6asKPGwrAIrcKEMF8XxeDX5OHVcC3wu77levucYvyn8wmsEsunsdB7iiuKYBj/7/9OyMF0MGeT1frMq25kPfqoTyRPrlU0Jy+5TH1/97HahX8/GFcTYMKl7X/4sWord6XL8WqPz3Kuhn8D15vRiGkgopT+mvaUvFK+vnD6CqAzv+7w879cV+nhK7/u5SX8FMDEiZiXLCe2Ia10UjawG+tPColUylBiancsum1AI5X2jSMThV96eNL8LuSZTk1Zd0ubslMzQOALSLRJQ7XrVsiPdVJ2aDEAXYMIV50VvykQSuBWd9EhH0k+S3T841LBUiYO6FiaBkXvqk9vD6wqbMs1qhW01urSJjtkr0YEHIl67JSBuwjen/Qu/XQ+COfwYb4AV/Q59kfb8sX8uQyCHYZAAvxrfFr/XB/jnVQaYU88Wm3QjJ5om/bsxS1qVvfZPIovrueLvP0CwXFV5Wnk82aoaC+1sKPKwogmDsXKGKm7k/siftjnU2J4yezSvBJcfKs5pSfx7bc0q9iCHPYnBJ2+ge6bkffXHubzcobUgDyRV3W/7enTE8aH1Kf1v5wHD95jISdFKy8tLiEFM0CfcpvglHzeiXKF/JEW4AJd6e/9P/N05+u+xS4reujXB5W1kWRHGNzEsfrVsVwJPg1DXJHoRTgwmEALMSZ8WtdX9RZ3qbSye9iiXiCHVtLMK4oBWAOFQDMKI3ogf/PbXxj5fOXdvJfp4mEHdnGBONIJwh290FFhnl096v3jQvK9EQ9q/mYBdCE+CgMBxuBtgDCYa/mhJnvyZwrgHlmRC0TcX/6CjGfOkU6JigFEMxZBsi499etBTg2DRK12+FTa+LTuLkRpmUMwLULZLFIweFEAdnAbopvq6SkK/Tpz8EKDKCjAG5OCCbMFcBlo74wuxH18PTv4FfvhEdE+hLMDQJvTH6uOOnOxikfhrZxwZtcJeUnTar2DdwgAm479A8js/7jSaenv3m1pzfLRPqQMPfDzjxkAnjXlBLmBsNLsMhhmYagBveRqIECHiwTGQh7GMdfpi6hLvC52kUuwBjFBDARMgTDMYxTHJaTmBEjibzclEml3ZFYcqEI5ouyi0AYB8EuexXM6pRclpNUn1jdXJdfvuFWAaqB4UVdUICMNCGi0me8BgUI+IMQwQIExprS49GgAAF/kGtRSyYowGjMfHvzgD4wCIvByHnhVgFMA0fhsE1PGJrlxgdnuewa0EaEpbJWo/YyocqRXU7EMsA0FVkMptkdvy2A3LaflH/CjqQhLecnLc4N22JzZuCe4HJgphWe7oTLsA1TTm2L730lh1b5eRss2DH/cWtspj2YEgHv/J8C8M6hBbBpxLGZb1Q2kTAv6R4jorI3c1+BJUbuBc2vcRUHCDR1P/Joovd+jgmXa6d4+lGKdaYTBDsSLovbU5dxgOE4FjpMmNmQr1IRLAj/ANwqgF2Njzv3wmYcI7vwK9CUwW/EjHcujxudpnhnQWYcf+1/KhSYN13zT6k8lm5obiEIHFht3B8zOk3x5sOpcicxCzJZ+jHkuWCz5p+9X3FoVXueA5yfb/nWo+wVHRfI3Qlh3uvr1re22ElGsUB0kdc6orS0waIFx8/gPdoCuLzGZ0Z5dhpL4vhGWO8lNoLz/zksZDGdKRFWguszGm0BEofm2uriyHWeffRGlR60+1G+EkRiJaQ9zVAK0Ljl0r+OLQY3uU4xxuKV3RrUkpWgrYT/mdWNr7RsxncdNYMUQJtKd1ag+U/TQNj9qRbhqa2wkBJEF0uUkiwKSneKhRTCH+uFeUe2yl0HeqtBHQbCZiM79HhCt36tqg61HjpLMYEKSvPe2q42u7CpOdumcp3a7TTKx2DYFqd4bRPrVJ1eBTAa/1EILDKf+28zprA45tOcltLS8vOtZUTRdA6K0AbELqJoTlqYVNWUv1JMc92akUUQp/Sn9m5Rd99iHH+5iqT8puQub6c+N9kUo9ek+jLeI9MiOXUJeDEPgUeGS8rbYKIFJgvbPtnPUkIsfsBjCIyuXWLYgcBuXTfI9CrAvNO5MUKs8B/N/FfxCj85G5XYC6Mivbm8hEONLxRNgMkZPur9yRQ1Lcq+aKVZh9oP8YpWzdrsL+B6N1rtyql7FEBONps0G1VYzKPs8/NvjC6PxCmtHbJKSRYI15agEiek+B6zYDhKeYBwJLQZvzbdb90YQJdFO3xjYtE4HZp4VGujfOajKvjL5D6mF37Qe41wUqf44FpPsNOGjqZpOlSfQD6VHSsl+N75FpuBkM+PTMLfi8wSyWyRL1Y4NVcVQCRuhUo0bD5Q3/pbO6ejV0IhU53iB2wbBbz2bFQ9bcp6/8d9HIA23k5Nm+4Nlh++J5vjryIv7ATWXMcFZJEiClyLXy8rq3UFlqqWLbpiAdzHAbTOx+Y0yftSKR8EZVlOXN2sdk/9CCelCD+6O9xeVy0+6DMXyHljt/mSiXeUo/azqV/QVptSb1ZJ8KUL9gteQzgra1jWSYFKxAfs+hec3wdIomTBdEgSnbIM7i7wzOF61epB3m4CZXdU3/IjL+5HLvH+/uCGAkAtLPjJ2eI80MS4Y372jXEzh7exwGCOqaRD4DhNTp1qeN6Ry/EADIseLBEfjicxUT8GKcC+822HNlbAr/IIO6QLp9o9pXCc9RT7ce1GdQ4iqeD3aE6R7wI/mH02A9edclfoPxlOiGMw5lYBksYj01y/rMcRp/Ta6m1CVALe/7n7HU+i8CcqEoe95/3pPxy38eHQfVO3WNZ7d01Z8TYgDoAs2u1C7iIy0VcB9IAn9/Ue4iPjunvyLxnC/Bt/2WTT/h1Qg8ej+zDgSYh5mwXPbAYbzsenBG4Ske/vZSZoyH6A31pezLaxK4+QPvJScIW8gmMSa6YPRNUIJTJQAdStsHB/0yqtwJ0nxhdJOtXm3xz88WXByvVJJh/Hd9dfW8Z/qRm+ISYSfpQdM7ZtMTkC7L7qYir2oQIGbNrk/rXQb6i9wZOv47tf7RWtCEMVQM259GLacROf/mLnCv0a4gGnqDZKu7GMYvJal5pYVoqwXlhZxegdYezCk8UKYtUqIFY7BZa8X11UTzg+thP+OH7yeMgF3wa5RRausCl9b4KvPhiVSL92WhpxCcfbqTnTcmlkbwEM2GPdIkpuTjJ5YiRjcpUq+7CSV3/0SAugS6R98adjW1eIam0YWYJA8aTrj04mj4wPWDk9I8f4wGxNqlr940lqUbpC61ZlGnp0iVc1KLVDpZ6thV/79ykEmeKDo/jueqay75EuUIf47pMdgBmPCC+YNqL3c7ZmUNflW091C4z6YCneWrCtbI3vrNuOZxkEhxCbpmN1ejFXADnEKUle5/CweWEdDyAoQRGkGpWi/f6jfMvY2T6iXzdtDkbjTfF6gK5PLYgyHrBuhKEr+XBbnBfK57cX/mb+wo+etOlX26bxgbECqFdHnq3bEctpcsTsPg7BMBdSpJl4mXogmJjcK7aBSaxSfGCQNjV2gTp40SxzkzV+vmVdaqubtws4iWrPAW5jNU11pz6wyjxIOaJkZVBzlb0C+HUvcEmEZc63Urlo4hV2bHaAjTmb1je8GgfC30P/+MBaAaDeiE+zOTu09YKIVOUPeoTJ03BhNhApOCtpp2G7Ff4rbODt1G4neZJOAXy1AlmVILhE/ZFN7R9hJW1Di0fC36GbNk2lAPBhn8BgMikB/Js+7Q6VKVuhpEFKPBT+S6Jo2i4L1APnf9vxpFL0Ok0k7MT2trgX7ePmscWlushy8o8xXVvhl+P4+V95agVQ38ODtslBJNjPUkYr03tshi7NVsYsXXpM6c376bI8HbwWflooyDaRNgboxbMSiX5s8POtzIqqb5BT1q1UgmOd4clk1VV8+NE2XUr5Ss8q2ewKIN+wmDyB8FgwZBD3ZmrFtmyiHzVUhFwEH53yhotJeclYzkDeNDBxzM+edacOZnOBuiNUEr8rLeXczE9/PsmjfFaWUrAZTOtmGx9joNGoaXTSt5c3uZkW/XVQM2Unj7wWfloy2Lgiq5ktQIcKuEKgD0CItTRVg4Og1KmgAb0PK2AV1EzSj7Gf54wev4PdK9yoGMhPAargCnVh+3j78VoeLlEv3SnNfimDPN2/1XM5cw3myaKKW3uGK17dwnDIz7ZuNEblpgDwZbS6OUNrRLKiL9XmSRlUr2tZCsHplJcDAW7jsKhpbNTDm7ANDy9DbyKzPixa0BXNV8hVAeD3BdkA7GvI09Az0nye/GQ5+VlQv3JaAeJ6T7FcTfRSC3yr6PGDlTr1O0RY4nyr731G7gogie99dSQHWhXxvQsidUdRHmhr0WshrloLFbS2kchbbrRdzNnX5S8yxlutxKl/ySY/3xoYnxSjAJWKB65QqFtUVXTr4nblUr8ML/nZ1tBdCoUoAJSPOIuEmXf7e0U5bpHvUEwn2NNKuTsdhvj9V19WINWLB64znopQacHvEIk5k4LIQhUA1bkfGI4cxpSwXf5j/0CqDpDbenFrEREeVVrwFcYdgoUrACgoXn+utxhWHQqW0fhwXBeroF3VhxUMbgcxNOi9TjkKoILiowovd7uJLCVIxAu5TkpPz6sMKqMzsQzGHtbgtO9B7PLzZ1aDskpRAHTmConkqIKZodFcKoO3lkHN4ZlYrJ/QawwyPv3/WYnUWgkuadG2fcGO0XjfcqUQqjLz1jytVQWrQp1Sepi8CJya59y+tKVUBcD4KEEvnG5p5W2tvLVtCA584Hm5TWql0K0YF3SrPAvG7kHQ2tXxaO43THcO/ucOqPYdQW60lXIIWc4gf3lvAHapFEKoXyhjPQeFuKe+JitQ6evNsf4MMwo/XCkAghIEspKD8COPhpi00CVFFM3RGwkEbMhJ+OFSAdAZuMuihaAEAWMo4M1H+OHSBeplDAPjQBoyZHsG4YUC4FIJntfqsiyQJwf8fCv3SRNOXaBelDv0fkE3awcCvWwWIfzwyQL04unw3YAbUo2+N6Xh4y+1/ea74+bnf3oDwf7Lg8cJuICmtyVL/OzZ34v86V5agA4hOB5TVKZnMa9MzzC8VgBcKsF2TcqpAyOxr+jMgvcK0CHEBbVHNvyvDJreUBSVUQAEl6i+yI471lgpw+W5TqUUAN1mjlsblW+zDEAXBG4WmeUZReUUoINq3I72gjWoKA5P/V4qqwC4HNa0GmKDSuH81O+l0grQIcQGFUHe8rNozfWp30stFKBDHD9ZVvNsgiJ4BeX1k1UfJ+7VSgEQ3CLf8Mrd6UftFKADuUVJIu8OUm+LDKRGCv4uoqmdPEuXi6C2CtAhKEKpVEbwO9ReAToERSiUygl+h7FRgA6kCPhtESJ6HILlzLQQJQfAJ/tVE/wOY6cAvaisUS2GwZYLXWKJzTrsURhrBejQdY8YHgSrMBCZuz+oopszjKAA19CL/mT73cMws0j69uIAkTis69acoABDiOO/LCJpLI6ZZeCAeFFnoe8lKIAh2jLMg4kHNYsZ2mCiBSZeAL8djts2nKAAKYjjjSbwTznacVGtPGWzFXKXegReTrL+pFUnn96WoAA5QbNOgVkkNKXZF6XQk6nFmZpMXZ/NNnkRFKBAupYCoomkof4rlUOipjtniSva6jSXy7JFi6ZLR4LjgrXRkCf77/g4n+ymBAXwAFpm0WWij1LIsekftDA320GwcwLA/wMQTIdh+nm6rAAAAABJRU5ErkJggg=="/>
+</svg>
diff --git a/src/assets/icons/svg/message.svg b/src/assets/icons/svg/message.svg
new file mode 100644
index 0000000..14ca817
--- /dev/null
+++ b/src/assets/icons/svg/message.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 20.967v59.59c0 11.59 8.537 20.966 19.075 20.966h28.613l1 26.477L76.8 101.523h32.125c10.538 0 19.075-9.377 19.075-20.966v-59.59C128 9.377 119.463 0 108.925 0h-89.85C8.538 0 0 9.377 0 20.967zm82.325 33.1c0-5.524 4.013-9.935 9.037-9.935 5.026 0 9.038 4.41 9.038 9.934 0 5.524-4.025 9.934-9.038 9.934-5.024 0-9.037-4.41-9.037-9.934zm-27.613 0c0-5.524 4.013-9.935 9.038-9.935s9.037 4.41 9.037 9.934c0 5.524-4.025 9.934-9.037 9.934-5.025 0-9.038-4.41-9.038-9.934zm-27.1 0c0-5.524 4.013-9.935 9.038-9.935s9.038 4.41 9.038 9.934c0 5.524-4.026 9.934-9.05 9.934-5.013 0-9.025-4.41-9.025-9.934z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/model.svg b/src/assets/icons/svg/model.svg
new file mode 100644
index 0000000..0c57d70
--- /dev/null
+++ b/src/assets/icons/svg/model.svg
@@ -0,0 +1 @@
+<svg t="1715953291934" class="icon" viewBox="0 0 1061 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1715" id="mx_n_1715953291935" width="200" height="200"><path d="M447.122465 467.332105L49.240301 268.161564A33.501036 33.501036 0 0 0 0.136043 300.744763v441.020484a33.042117 33.042117 0 0 0 16.06214 27.994016L413.162511 1018.034062a33.959954 33.959954 0 0 0 17.438895 5.50702 33.042117 33.042117 0 0 0 33.042117-33.042118V497.161795a33.042117 33.042117 0 0 0-17.438895-29.82969zM398.018207 931.298504l-331.339011-208.348907v-367.134638l331.339011 162.915996zM1046.010843 263.572381a33.042117 33.042117 0 0 0-31.665363 0L550.838 467.332105a33.042117 33.042117 0 0 0-19.733487 30.288608v493.33717a33.042117 33.042117 0 0 0 49.563176 28.452934l463.048562-265.254776a33.042117 33.042117 0 0 0 16.521059-28.452934V291.566398a33.042117 33.042117 0 0 0-14.685386-27.994017z m-50.939931 441.020484L596.72983 931.298504v-413.026468l397.882163-176.224626zM991.399565 178.672496a33.042117 33.042117 0 0 0-22.486996-29.829689L550.838 1.530034a32.583199 32.583199 0 0 0-19.733487 0L83.659173 158.021173a33.042117 33.042117 0 0 0-4.130264 61.036134l397.882163 199.170541a33.042117 33.042117 0 0 0 14.685386 3.212428 33.959954 33.959954 0 0 0 13.30863 0l463.966399-205.595398a33.042117 33.042117 0 0 0 22.028078-37.172382zM494.391049 349.849021L180.490934 195.193555l358.874108-125.743613 328.126583 112.434982z m0 0" fill="currentColor" p-id="1716"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/money.svg b/src/assets/icons/svg/money.svg
new file mode 100644
index 0000000..c1580de
--- /dev/null
+++ b/src/assets/icons/svg/money.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.122 127.892v-28.68H7.513V87.274h46.609v-12.4H7.513v-12.86h38.003L.099 0h22.6l32.556 45.07c3.617 5.144 6.44 9.611 8.487 13.385 1.788-3.05 4.89-7.779 9.301-14.186L103.93 0h24.01L82.385 62.013h38.34v12.862h-46.41v12.4h46.41v11.937h-46.41v28.68H54.123z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/monitor.svg b/src/assets/icons/svg/monitor.svg
new file mode 100644
index 0000000..bc308cb
--- /dev/null
+++ b/src/assets/icons/svg/monitor.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543827393750" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4695" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; }
+</style></defs><path d="M64 64V640H896V64H64zM0 0h960v704H0V0z" p-id="4696"></path><path d="M192 896H768v64H192zM448 640H512v256h-64z" p-id="4697"></path><path d="M479.232 561.604267l309.9904-348.330667-47.803733-42.5472-259.566934 291.669333L303.957333 240.008533 163.208533 438.6048l52.224 37.009067 91.6224-129.28z" p-id="4698"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/my-copy.svg b/src/assets/icons/svg/my-copy.svg
new file mode 100644
index 0000000..49f69fa
--- /dev/null
+++ b/src/assets/icons/svg/my-copy.svg
@@ -0,0 +1 @@
+<svg t="1716006583362" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38505" width="200" height="200"><path d="M733.696 666.624l56.32-65.536-15.36-12.8c-41.472-34.816-87.552-61.44-136.192-79.36 75.264-49.152 124.928-134.144 124.928-230.912 0-152.576-123.904-276.48-276.48-276.48-74.24 0-143.872 28.672-195.584 80.384-52.224 51.712-80.896 121.344-80.896 195.584 0 92.16 45.568 174.08 115.2 224.256-81.408 26.624-156.672 74.752-215.552 144.896C34.304 736.768-4.096 850.944 0.512 968.192l1.024 20.48 86.528-4.608-1.024-19.968c-4.096-96.256 27.136-188.928 88.576-261.12 136.704-162.816 380.416-184.32 543.232-48.64l14.848 12.288zM296.96 278.016c0-106.496 83.456-189.952 189.952-189.952 104.96 0 189.952 84.992 189.952 189.952 0 106.496-83.456 189.952-189.952 189.952S296.96 384.512 296.96 278.016z m690.688 522.24H802.304c13.824-16.896 32.256-38.4 55.808-67.072 7.68-8.192 11.776-19.456 10.752-31.744-1.024-11.776-6.144-22.528-15.36-29.696-8.192-7.68-19.456-11.264-31.232-10.752-12.288 1.024-23.04 6.656-30.208 15.872-38.4 45.568-96.256 114.176-101.376 119.808-7.68 7.68-10.752 15.36-13.312 22.528-4.096 8.704-4.096 16.384-4.096 24.064 0 5.632 0 12.8 3.584 23.04 2.56 7.68 6.144 15.872 13.824 23.552l104.96 124.416 4.096 2.048c9.216 4.096 18.432 6.144 26.624 6.144 8.704 0 21.504-4.096 28.672-11.776 8.704-8.704 13.824-19.968 14.336-31.744 0-10.752-3.584-20.48-11.264-28.16l-54.272-63.488h183.296c19.456 0 35.84-18.944 36.352-43.008v-0.512c0.512-25.088-14.848-43.52-35.84-43.52z" fill="currentColor" p-id="38506"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/my-task.svg b/src/assets/icons/svg/my-task.svg
new file mode 100644
index 0000000..1f1ea44
--- /dev/null
+++ b/src/assets/icons/svg/my-task.svg
@@ -0,0 +1 @@
+<svg t="1715953932254" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11266" width="200" height="200"><path d="M955.59576334 565.84816928C921.71190561 470.40769794 828.48968821 401.08719229 717.79871055 401.08719229c-111.30100029 0-204.91141024 70.09689085-238.29616047 166.36920831h-253.43576475c-26.23088067 0-47.5261393 24.84446618-47.5261329 55.45640711s21.2952586 55.4564006 47.5261329 55.45640054h242.73267482c6.54385326 41.3150179 23.95716606 79.02537397 49.30074631 110.91280755h-292.03342113c-26.23088067 0-47.5261393 24.84446618-47.5261329 55.45640061s21.2952586 55.4564006 47.5261329 55.45640059h214.0617167a376.93717152 376.93717152 0 0 0-33.44021086 110.91280754h-292.47706801a46.36155474 46.36155474 0 0 1-45.91790151-46.8052016V169.1685161c0-25.06629616 21.23980441-45.36333956 47.35977009-45.3633331h63.38666838v55.45640059c0 50.07713168 67.6013528 55.4564006 110.91280122 55.45640061 43.31144833 0 88.50841878 5.76746809 88.5084187-55.45640061v-55.45640059h44.53149358v55.45640059c0 61.22386864 38.15400297 55.4564006 88.84115713 55.45640061 50.74260854 0 88.56387296 5.76746809 88.56387308-55.45640061v-55.45640059h44.19875511v55.45640059c0 61.22386864 38.43128719 55.4564006 89.11844137 55.45640061s110.91280771-2.82827659 110.91280118-55.45640061v-55.45640059h63.44212904a47.69250853 47.69250853 0 0 1 47.74796275 47.63704778l-0.22182994 394.4059385zM407.96379074 345.63079175h-181.95245955c-26.23088067 0-47.5261393 24.84446618-47.52613946 55.45640054s21.2952586 55.4564006 47.52613946 55.45640711h181.95245955c26.23088067 0 47.5261393-24.84446618 47.52613268-55.45640711s-21.2952586-55.4564006-47.52613268-55.45640054z m325.75090957-166.36920816c-30.61193437 0-55.4564006-18.63335139-55.45640712-41.59230208v-83.18460405c0-22.95895071 24.84446618-41.59230206 55.45640712-41.592302s55.4564006 18.63335139 55.4564006 41.592302v83.18460405c0 22.95895071-24.84446618 41.59230206-55.4564006 41.59230208z m-222.71291552 0c-30.61193437 0-55.4009463-18.63335139-55.4009464-41.59230208v-83.18460405c0-22.95895071 24.84446618-41.59230206 55.4009464-41.592302 30.61193437 0 55.4564006 18.63335139 55.45640054 41.592302v83.18460405c-0.0554542 22.95895071-24.84446618 41.59230206-55.45640054 41.59230208z m-220.6610244 0c-30.61193437 0-55.4009463-18.63335139-55.40094634-41.59230208v-83.18460405c0-22.95895071 24.84446618-41.59230206 55.40094634-41.592302 30.61193437 0 55.4564006 18.63335139 55.45640063 41.592302v83.18460405c0 22.95895071-24.84446618 41.59230206-55.45640063 41.59230208z m443.31847922 665.92048622c-91.28124099 0-165.53736215-74.69977454-165.53736218-166.59103817 0-91.83580289 74.2561211-166.59103164 165.53736218-166.59103164s165.53736215 74.75522879 165.53736218 166.59103164-74.2561211 166.59103164-165.53736218 166.59103817z m-115.73750824-29.33644132c32.1647114 24.45627358 71.98241282 39.59587158 115.68205395 39.59587144 44.14329437 0 84.34918863-15.47233629 116.68026924-40.3722568a235.13514545 235.13514545 0 0 1 105.14533952 195.98292729h-443.6512175c0-80.35632762 41.92504052-153.94697186 106.14355479-195.20654193z" fill="currentColor" p-id="11267"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/nested.svg b/src/assets/icons/svg/nested.svg
new file mode 100644
index 0000000..06713a8
--- /dev/null
+++ b/src/assets/icons/svg/nested.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.002 9.2c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-5.043-3.58-9.132-7.997-9.132S.002 4.157.002 9.2zM31.997.066h95.981V18.33H31.997V.066zm0 45.669c0 5.044 3.58 9.132 7.998 9.132 4.417 0 7.997-4.088 7.997-9.132 0-3.263-1.524-6.278-3.998-7.91-2.475-1.63-5.524-1.63-7.998 0-2.475 1.632-4 4.647-4 7.91zM63.992 36.6h63.986v18.265H63.992V36.6zm-31.995 82.2c0 5.043 3.58 9.132 7.998 9.132 4.417 0 7.997-4.089 7.997-9.132 0-5.044-3.58-9.133-7.997-9.133s-7.998 4.089-7.998 9.133zm31.995-9.131h63.986v18.265H63.992V109.67zm0-27.404c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-3.263-1.524-6.277-3.998-7.909-2.475-1.631-5.524-1.631-7.998 0-2.475 1.632-4 4.646-4 7.91zm31.995-9.13h31.991V91.4H95.987V73.135z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/number.svg b/src/assets/icons/svg/number.svg
new file mode 100644
index 0000000..ad5ce9a
--- /dev/null
+++ b/src/assets/icons/svg/number.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575802851180" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2867" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M279.272727 791.272727h512a46.545455 46.545455 0 0 1 0 93.090909H279.272727a46.545455 46.545455 0 0 1 0-93.090909z m33.838546-617.984V651.636364H193.722182V395.170909c0-37.003636-0.884364-59.298909-2.653091-66.746182a24.948364 24.948364 0 0 0-14.615273-16.989091c-8.005818-3.863273-25.786182-5.771636-53.341091-5.771636h-11.822545v-55.854545c57.716364-12.381091 101.562182-37.888 131.490909-76.520728h70.283636z m303.709091 396.8V651.636364H354.164364v-68.235637c77.777455-127.255273 124.043636-206.010182 138.705454-236.218182 14.661818-30.254545 22.016-53.853091 22.016-70.74909 0-13.032727-2.234182-22.714182-6.656-29.137455-4.421818-6.376727-11.170909-9.588364-20.247273-9.588364a22.248727 22.248727 0 0 0-20.200727 10.612364c-4.468364 7.121455-6.656 21.178182-6.656 42.263273v45.521454H354.164364v-17.454545c0-26.763636 1.396364-47.941818 4.142545-63.348364 2.746182-15.499636 9.541818-30.72 20.386909-45.661091 10.798545-14.987636 24.901818-26.298182 42.216727-33.978182 17.361455-7.68 38.167273-11.543273 62.37091-11.543272 47.476364 0 83.316364 11.776 107.706181 35.328 24.296727 23.552 36.445091 53.341091 36.445091 89.367272 0 27.368727-6.842182 56.32-20.48 86.853819-13.730909 30.533818-54.039273 95.325091-121.018182 194.420363h130.885819z m270.615272-189.393454c18.152727 6.097455 31.650909 16.104727 40.494546 29.975272 8.843636 13.917091 13.312 46.452364 13.312 97.652364 0 38.027636-4.328727 67.490909-13.032727 88.529455-8.657455 20.945455-23.598545 36.910545-44.869819 47.848727-21.271273 10.938182-48.593455 16.384-81.873454 16.384-37.794909 0-67.490909-6.330182-89.088-19.083636-21.550545-12.660364-35.746909-28.253091-42.542546-46.638546-6.795636-18.432-10.193455-50.362182-10.193454-95.883636v-37.841455h119.389091v77.730909c0 20.666182 1.210182 33.838545 3.723636 39.424 2.420364 5.585455 7.912727 8.424727 16.337455 8.424728 9.309091 0 15.36-3.537455 18.338909-10.612364 2.932364-7.121455 4.421818-25.6 4.421818-55.575273v-33.047273c0-18.338909-2.048-31.744-6.190546-40.215272a30.72 30.72 0 0 0-18.338909-16.709818c-8.052364-2.653091-23.738182-4.189091-46.964363-4.561455V357.050182c28.392727 0 45.893818-1.070545 52.596363-3.258182a22.946909 22.946909 0 0 0 14.475637-14.149818c2.932364-7.307636 4.421818-18.711273 4.421818-34.257455v-26.624c0-16.756364-1.722182-27.741091-5.12-33.047272-3.490909-5.352727-8.843636-8.005818-16.151273-8.005819-8.285091 0-13.963636 2.792727-16.989091 8.378182-3.025455 5.632-4.561455 17.640727-4.561454 35.933091v39.284364h-119.389091v-40.773818c0-45.661091 10.472727-76.567273 31.325091-92.625455 20.898909-16.058182 54.085818-24.064 99.607272-24.064 56.878545 0 95.511273 11.170909 115.805091 33.373091 20.293818 22.248727 30.394182 53.201455 30.394182 92.765091 0 26.810182-3.630545 46.173091-10.891636 58.088727-7.307636 11.915636-20.107636 22.807273-38.446546 32.628364z" p-id="2868"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/online.svg b/src/assets/icons/svg/online.svg
new file mode 100644
index 0000000..330a202
--- /dev/null
+++ b/src/assets/icons/svg/online.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1568899557259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="535" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M356.246145 681.56286c-68.156286-41.949414-107.246583-103.84102-107.246583-169.805384 0-65.966411 39.090297-127.860063 107.246583-169.809477 12.046361-7.414877 15.800871-23.190165 8.385994-35.236526-7.413853-12.046361-23.191188-15.801894-35.236526-8.387018-39.640836 24.399713-72.539106 56.044434-95.137801 91.515297-23.86657 37.461193-36.481889 79.620385-36.481889 121.917724 0 42.297338 12.615319 84.454484 36.481889 121.914654 22.598694 35.469839 55.496965 67.11456 95.137801 91.51325 4.185322 2.576685 8.821923 3.804652 13.400195 3.804652 8.598842 0 16.998139-4.329609 21.836331-12.190647C372.047016 704.752002 368.291482 688.976714 356.246145 681.56286zM263.943926 754.580874c-92.603071-61.111846-145.713686-149.623739-145.713686-242.840794 0-93.195565 53.094242-181.682899 145.667637-242.774279 11.805884-7.79043 15.061021-23.677259 7.269567-35.483142-7.79043-11.805884-23.677259-15.062044-35.483142-7.269567C128.487861 296.954249 67.006602 401.024489 67.006602 511.74008c0 110.73708 61.496609 214.830857 168.721703 285.593504 4.343935 2.867304 9.240455 4.238534 14.08274 4.238534 8.317433 0 16.476253-4.046153 21.400403-11.507078C279.003923 778.258133 275.748786 762.372328 263.943926 754.580874zM788.660552 226.213092c-11.80486-7.791453-27.692712-4.536316-35.483142 7.269567-7.79043 11.805884-4.536316 27.692712 7.269567 35.483142 92.575442 61.092403 145.670707 149.579737 145.670707 242.774279 0 93.216032-53.111638 181.727924-145.715733 242.840794-11.805884 7.79043-15.059997 23.678282-7.269567 35.484166 4.925173 7.461949 13.081946 11.507078 21.400403 11.507078 4.841262 0 9.739828-1.37123 14.083763-4.238534 107.22714-70.761624 168.724773-174.857447 168.724773-285.593504C957.341323 401.025513 895.860063 296.955272 788.660552 226.213092zM790.090111 633.67213c23.865547-37.459147 36.480866-79.617315 36.480866-121.914654 0-42.298362-12.615319-84.45653-36.480866-121.917724-22.598694-35.470863-55.496965-67.115584-95.139847-91.515297-12.047384-7.413853-27.821649-3.659343-35.236526 8.387018-7.414877 12.045337-3.659343 27.821649 8.385994 35.236526 68.156286 41.949414 107.247606 103.842043 107.247606 169.809477 0 65.964364-39.090297 127.85597-107.247606 169.804361-12.045337 7.414877-15.800871 23.190165-8.385994 35.237549 4.838192 7.861038 13.236466 12.190647 21.835308 12.190647 4.579295 0 9.215896-1.227967 13.400195-3.804652C734.591099 700.786691 767.490394 669.142993 790.090111 633.67213zM567.129086 518.274914c24.12342-17.150612 39.887452-45.305859 39.887452-77.07133 0-52.128241-42.452881-94.538143-94.634334-94.538143-52.18043 0-94.633311 42.408879-94.633311 94.538143 0 31.695886 15.696494 59.797921 39.730886 76.958766-49.875944 21.128203-84.917018 70.234621-84.917018 127.301338 0 2.366907 0.061398 4.762467 0.182149 7.119141l1.249457 24.296359 276.373515 0 1.238201-24.308639c0.119727-2.358721 0.181125-4.750187 0.181125-7.106862C651.786185 588.497255 616.865861 539.465538 567.129086 518.274914zM512.381182 397.889079c23.937179 0 43.411719 19.430538 43.411719 43.314505 0 23.882943-19.47454 43.313481-43.411719 43.313481-23.936155 0-43.409672-19.430538-43.409672-43.313481C468.971509 417.320641 488.445026 397.889079 512.381182 397.889079zM426.08884 625.656573c9.119705-38.542828 44.254923-67.337641 86.085634-67.337641s76.966952 28.794813 86.085634 67.337641L426.08884 625.656573z" p-id="536"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/password.svg b/src/assets/icons/svg/password.svg
new file mode 100644
index 0000000..6c64def
--- /dev/null
+++ b/src/assets/icons/svg/password.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575802846045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2750" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M868.593046 403.832442c-30.081109-28.844955-70.037123-44.753273-112.624057-44.753273L265.949606 359.079168c-42.554188 0-82.510202 15.908318-112.469538 44.690852-30.236652 28.782533-46.857191 67.222007-46.857191 108.198258l0 294.079782c0 40.977273 16.619516 79.414701 46.702672 108.136859 29.959336 28.844955 70.069869 44.814672 112.624057 44.814672l490.019383 0c42.585911 0 82.696444-15.969717 112.624057-44.814672 30.082132-28.844955 46.579875-67.222007 46.579875-108.136859L915.172921 511.968278C915.171897 471.053426 898.675178 432.677397 868.593046 403.832442zM841.821309 806.049083c0 22.098297-8.882298 42.772152-25.099654 58.306964-16.154935 15.661701-37.81935 24.203238-60.752666 24.203238L265.949606 888.559285c-22.934339 0-44.567032-8.54256-60.877509-24.264637-16.186657-15.474436-25.067932-36.148291-25.067932-58.246589L180.004165 511.968278c0-22.035876 8.881274-42.772152 25.192775-58.307987 16.186657-15.536858 37.81935-24.139793 60.753689-24.139793l490.019383 0c22.933315 0 44.597731 8.602935 60.752666 24.139793 16.21838 15.535835 25.099654 36.272112 25.099654 58.307987L841.822332 806.049083zM510.974136 135.440715c114.914216 0 208.318536 89.75214 208.318536 200.055338l73.350588 0c0-149.113109-126.366036-270.496667-281.669124-270.496667-155.333788 0-281.699824 121.383558-281.699824 270.496667l73.350588 0C302.623877 225.193879 396.059919 135.440715 510.974136 135.440715zM474.299865 747.244792l73.350588 0L547.650453 629.576859l-73.350588 0L474.299865 747.244792z" p-id="2751"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/pdf.svg b/src/assets/icons/svg/pdf.svg
new file mode 100644
index 0000000..957aa0c
--- /dev/null
+++ b/src/assets/icons/svg/pdf.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M869.073 277.307H657.111V65.344l211.962 211.963zm-238.232 26.27V65.344l-476.498-.054v416.957h714.73v-178.67H630.841zm-335.836 360.57c-5.07-3.064-10.944-5.133-17.61-6.201-6.67-1.064-13.603-1.6-20.81-1.6h-48.821v85.641h48.822c7.206 0 14.14-.532 20.81-1.6 6.665-1.065 12.54-3.133 17.609-6.202 5.064-3.063 9.134-7.406 12.208-13.007 3.065-5.602 4.6-12.937 4.6-22.011 0-9.07-1.535-16.408-4.6-22.01-3.074-5.603-7.144-9.94-12.208-13.01zM35.82 541.805v416.904h952.358V541.805H35.821zm331.421 191.179c-3.6 11.071-9.343 20.879-17.209 29.413-7.874 8.542-18.078 15.408-30.617 20.61-12.544 5.206-27.747 7.807-45.621 7.807h-66.036v102.45h-62.831V607.517h128.867c17.874 0 33.077 2.6 45.62 7.802 12.541 5.207 22.745 12.076 30.618 20.615 7.866 8.538 13.604 18.277 17.21 29.212 3.6 10.943 5.401 22.278 5.401 34.018 0 11.477-1.8 22.752-5.402 33.819zM644.9 806.417c-5.343 17.61-13.408 32.818-24.212 45.627-10.807 12.803-24.283 22.879-40.423 30.213-16.146 7.343-35.155 11.007-57.03 11.007h-123.26V607.518h123.26c18.41 0 35.552 2.941 51.428 8.808 15.873 5.869 29.618 14.671 41.22 26.412 11.608 11.744 20.674 26.411 27.217 44.02 6.535 17.61 9.803 38.288 9.803 62.035 0 20.81-2.67 40.02-8.003 57.624zm245.362-146.07h-138.07v66.03h119.66v48.829h-119.66v118.058h-62.83V607.518h200.9v52.829h-.001zm-318.2 25.611c-6.402-8.266-14.877-14.604-25.412-19.01-10.544-4.402-23.551-6.602-39.019-6.602h-44.825v180.088h56.029c9.07 0 17.872-1.463 26.415-4.401 8.535-2.932 16.14-7.802 22.812-14.609 6.665-6.8 12.007-15.667 16.007-26.61 4.003-10.94 6.003-24.275 6.003-40.021 0-14.408-1.4-27.416-4.202-39.019-2.8-11.607-7.406-21.542-13.808-29.816zm0 0"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/people.svg b/src/assets/icons/svg/people.svg
new file mode 100644
index 0000000..2bd54ae
--- /dev/null
+++ b/src/assets/icons/svg/people.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M104.185 95.254c8.161 7.574 13.145 17.441 13.145 28.28 0 1.508-.098 2.998-.285 4.466h-10.784c.238-1.465.403-2.948.403-4.465 0-8.983-4.36-17.115-11.419-23.216C86 104.66 75.355 107.162 64 107.162c-11.344 0-21.98-2.495-31.22-6.83-7.064 6.099-11.444 14.218-11.444 23.203 0 1.517.165 3 .403 4.465H10.955a35.444 35.444 0 0 1-.285-4.465c0-10.838 4.974-20.713 13.127-28.291C9.294 85.42.003 70.417.003 53.58.003 23.99 28.656.001 64 .001s63.997 23.988 63.997 53.58c0 16.842-9.299 31.85-23.812 41.673zM64 36.867c-29.454 0-53.33-10.077-53.33 15.342 0 25.418 23.876 46.023 53.33 46.023 29.454 0 53.33-20.605 53.33-46.023 0-25.419-23.876-15.342-53.33-15.342zm24.888 25.644c-3.927 0-7.111-2.665-7.111-5.953 0-3.288 3.184-5.954 7.11-5.954 3.928 0 7.111 2.666 7.111 5.954s-3.183 5.953-7.11 5.953zm-3.556 16.372c0 4.11-9.55 7.442-21.332 7.442-11.781 0-21.332-3.332-21.332-7.442 0-1.06.656-2.064 1.8-2.976 3.295 2.626 10.79 4.465 19.532 4.465 8.743 0 16.237-1.84 19.531-4.465 1.145.912 1.801 1.916 1.801 2.976zm-46.22-16.372c-3.927 0-7.11-2.665-7.11-5.953 0-3.288 3.183-5.954 7.11-5.954 3.927 0 7.111 2.666 7.111 5.954s-3.184 5.953-7.11 5.953z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/peoples.svg b/src/assets/icons/svg/peoples.svg
new file mode 100644
index 0000000..aab852e
--- /dev/null
+++ b/src/assets/icons/svg/peoples.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M95.648 118.762c0 5.035-3.563 9.121-7.979 9.121H7.98c-4.416 0-7.979-4.086-7.979-9.121C0 100.519 15.408 83.47 31.152 76.75c-9.099-6.43-15.216-17.863-15.216-30.987v-9.128c0-20.16 14.293-36.518 31.893-36.518s31.894 16.358 31.894 36.518v9.122c0 13.137-6.123 24.556-15.216 30.993 15.738 6.726 31.141 23.769 31.141 42.012z"/><path d="M106.032 118.252h15.867c3.376 0 6.101-3.125 6.101-6.972 0-13.957-11.787-26.984-23.819-32.123 6.955-4.919 11.638-13.66 11.638-23.704v-6.985c0-15.416-10.928-27.926-24.39-27.926-1.674 0-3.306.193-4.89.561 1.936 4.713 3.018 9.974 3.018 15.526v9.121c0 13.137-3.056 23.111-11.066 30.993 14.842 4.41 27.312 23.42 27.541 41.509z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/phone.svg b/src/assets/icons/svg/phone.svg
new file mode 100644
index 0000000..ab8e8c4
--- /dev/null
+++ b/src/assets/icons/svg/phone.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1567417214476" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2266" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M761.503029 2.90619 242.121921 2.90619c-32.405037 0-58.932204 26.060539-58.932204 58.527998l0 902.302287c0 32.156374 26.217105 58.216913 58.932204 58.216913l519.381108 0c32.344662 0 58.591443-26.060539 58.591443-58.216913L820.094472 61.123103C820.094472 28.966729 793.847691 2.90619 761.503029 2.90619M452.878996 61.123103l98.147344 0c6.780427 0 12.31549 5.536087 12.31549 12.253068 0 6.748704-5.535063 12.253068-12.31549 12.253068l-98.147344 0c-6.779404 0-12.345166-5.504364-12.345166-12.253068C440.532807 66.659189 446.099592 61.123103 452.878996 61.123103M501.641583 980.593398c-29.636994 0-53.987588-23.946388-53.987588-53.677527 0-29.356608 24.039509-53.614082 53.987588-53.614082 29.91738 0 53.987588 23.883967 53.987588 53.614082C555.629171 956.647009 531.559986 980.593398 501.641583 980.593398M766.35657 803.142893c0 16.23373-13.186324 29.107945-29.233811 29.107945l-470.618521 0c-16.35755 0-29.325909-13.186324-29.325909-29.107945L237.178329 163.500794c0-16.232706 13.279445-29.138644 29.325909-29.138644l470.246037 0c16.420995 0 29.357632 13.1853 29.357632 29.138644l0 639.642099L766.35657 803.142893zM766.35657 803.142893" p-id="2267"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/post.svg b/src/assets/icons/svg/post.svg
new file mode 100644
index 0000000..2922c61
--- /dev/null
+++ b/src/assets/icons/svg/post.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566035724641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3998" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M136.4 434.3h77.7c21.5 0 38.9-17.4 38.9-38.9s-17.4-38.9-38.9-38.9h-77.7c-21.5 0-38.9 17.4-38.9 38.9s17.4 38.9 38.9 38.9zM252.9 628.6c0-21.5-17.4-38.9-38.9-38.9h-77.7c-21.5 0-38.9 17.4-38.9 38.9s17.4 38.9 38.9 38.9H214c21.5-0.1 38.9-17.5 38.9-38.9z" p-id="3999"></path><path d="M874.7 97.5H227c-28.6 0-51.8 23.2-51.8 51.8v194.3h38.9c28.6 0 51.8 23.2 51.8 51.8 0 28.6-23.2 51.8-51.8 51.8h-38.9v129.5h38.9c28.6 0 51.8 23.2 51.8 51.8 0 28.6-23.2 51.8-51.8 51.8h-38.9v194.3c0 28.6 23.2 51.8 51.8 51.8h647.7c28.6 0 51.8-23.2 51.8-51.8V149.3c0-28.6-23.2-51.8-51.8-51.8z m-311.3 723c-15.6 0-146.7-71.6-146.7-91 0-19.4 102-368.6 102-368.6l-83.6-104s-12.3-23.1 24.6-23.1h208.9c36.9 0 18.4 23.1 18.4 23.1l-79 104s102 351.3 102 368.6c0.1 17.3-131 91-146.6 91z m169.2-253.6l-27.9 40.2-74.5-240 103.4 171.7c4.6 7.9 4.2 20.6-1 28.1z" p-id="4000"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/process-definition.svg b/src/assets/icons/svg/process-definition.svg
new file mode 100644
index 0000000..202d200
--- /dev/null
+++ b/src/assets/icons/svg/process-definition.svg
@@ -0,0 +1 @@
+<svg t="1716005059256" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3268" width="200" height="200"><path d="M497.798958 952.225272A345.95419 345.95419 0 0 1 359.273733 892.652247a171.541601 171.541601 0 0 0 7.177473-47.37132A179.436821 179.436821 0 0 0 211.417793 665.126359a345.95419 345.95419 0 0 1 185.896546-380.40606 179.436821 179.436821 0 0 0 317.244299 0 351.696169 351.696169 0 0 1 143.549456 128.476763 35.169617 35.169617 0 0 0 30.145386 16.508188 37.322859 37.322859 0 0 0 19.379177-5.024231 36.605111 36.605111 0 0 0 10.766209-46.653574 424.188644 424.188644 0 0 0-183.743304-160.775391v-13.637198a180.872315 180.872315 0 1 0-358.873642 0 129.194511 129.194511 0 0 0 0 15.79044A423.470897 423.470897 0 0 0 132.465591 600.529103a467.253481 467.253481 0 0 0 6.459726 71.774728A180.154568 180.154568 0 0 0 187.014385 1024a178.001326 178.001326 0 0 0 139.96072-68.185992 430.64837 430.64837 0 0 0 158.62215 62.444014h6.459725a35.887364 35.887364 0 0 0 5.741978-71.774729z m57.419783-861.29674a109.097587 109.097587 0 1 1-108.37984 110.533082A109.097587 109.097587 0 0 1 555.218741 90.928532zM187.014385 952.225272a109.097587 109.097587 0 1 1 108.37984-108.37984A109.097587 109.097587 0 0 1 187.014385 952.225272zM933.471559 617.755038l-104.791103-71.774728a35.887364 35.887364 0 0 0-48.089068 8.612967L560.242972 858.918125a37.322859 37.322859 0 0 0-6.459725 24.403408l9.330714 104.073356a35.169617 35.169617 0 0 0 14.354946 25.838902 38.758353 38.758353 0 0 0 21.532418 7.177473h7.177473l98.331378-21.532419a38.758353 38.758353 0 0 0 22.250166-14.354946L945.673263 665.126359a36.605111 36.605111 0 0 0 5.741978-27.274397 37.322859 37.322859 0 0 0-17.943682-20.096924zM675.800285 930.692853l-45.218079 9.330715-4.306484-49.524563 193.791766-262.695505 45.218079 29.427638z m311.50232-399.067489l-103.355608-66.750497a35.887364 35.887364 0 0 0-49.524563 10.048462 35.169617 35.169617 0 0 0 10.766209 49.524562L947.826505 593.35163a34.45187 34.45187 0 0 0 20.096924 5.741979 37.322859 37.322859 0 0 0 30.145386-15.790441 36.605111 36.605111 0 0 0-10.76621-51.677804z" fill="currentColor" p-id="3269"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/qq.svg b/src/assets/icons/svg/qq.svg
new file mode 100644
index 0000000..ee13d4e
--- /dev/null
+++ b/src/assets/icons/svg/qq.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M18.448 57.545l-.244-.744-.198-.968-.132-.53v-2.181l.236-.859.24-.908.317-.953.428-1.06.561-1.103.794-1.104v-.773l.077-.724.123-.984.34-1.106.313-1.194.25-.548.289-.511.371-.569.405-.423v-2.73l.234-1.407.236-1.633.42-1.955.577-2.035.43-1.118.426-1.217.468-1.135.559-1.216.57-1.332.655-1.247.737-1.331.929-1.33.43-.762.457-.624.995-1.406 1.025-1.403 1.163-1.444 1.246-1.405 1.352-1.384 1.41-1.423 1.708-1.536 1.083-.934 1.322-1.008 1.34-.89 1.448-.855 1.392-.76 1.57-.63 1.667-.775 1.657-.532 1.653-.552 1.787-.548 1.785-.417 1.876-.347L59.128.68l1.879-.245 1.876-.252 2.002-.106h5.912l1.97.243 1.981.231 2.019.207 1.874.441 1.979.413 1.857.475 2.035.53 1.862.646 1.782.738 1.904.78 1.736.853 1.689.95 1.655 1.044 1.425.971.662.548.693.401 1.323 1.1 1.115 1.064 1.112 1.1 1.083 1.214.894 1.178 1.064 1.217.74 1.306.752 1.162.798 1.352.661 1.175 1.113 2.489.546 1.286.428 1.192.428 1.294.384 1.217.267 1.047.347 1.231.607 2.198.388 1.924.253 1.861.217 1.497.342 2.28.077.362.274.41.737 1.18.473.8.42.832.534.892.472 1.07.307 1.093.334 1.2.252 1.232.115.605.106.746v.648l-.106.643v.8l-.192.774-.35 1.5-.403.76-.299.852v.213l.142.264.4.623 1.746 2.53 1.377 1.9.66 1.267.889 1.389.774 1.52.893 1.627.894 1.828 1.006 2.069.567 1.268.518 1.239.447 1.307.44 1.175.336 1.235.342 1.16.432 2.261.343 2.31.235 2.05v2.891l-.158 1.025-.226 1.768-.308 1.59-.48 1.44-.18.588-.336.707-.28.493-.375.607-.33.383-.42.494-.375.4-.401.34-.48.207-.432.207-.355.114h-.543l-.346-.114-.66-.32-.302-.212-.317-.223-.347-.304-.35-.342-.579-.63-.684-.89-.539-.917-.538-.734-.526-.855-.741-1.517-.833-1.579-.098-.055h-.138l-.338.247-.196.415-.326.516-.567 1.533-.856 2.182-1.096 2.626-.824 1.308-.864 1.366-1.027 1.536-1.09 1.503-.557.68-.676.743-1.555 1.497.136.135.21.214.777.446 3.235 1.524 1.41.779 1.347.756 1.332.953 1.187.982.574.443.432.511.445.593.367.643.198.533.242.64.105.554.115.647-.115.433v.44l-.105.454-.242.415-.092.325-.22.394-.587.784-.543.627-.42.47-.35.348-.893.638-1.01.556-1.077.532-1.155.511-1.287.495-.693.207-.608.167-1.496.342-1.545.325-1.552.323-1.689.27-1.74.072-1.785.21h-5.539l-1.998-.114-1.86-.168-2.005-.27-1.99-.209-2.095-.286-2.03-.495-1.981-.374-1.968-.552-2.019-.707-1.98-.585-1.044-.342-.927-.323-.586-.223-.582-.12h-1.647l-1.904-.131-.962-.096-1.24-.135-.795.705-1.085.665-1.471.701-1.628.875-.99.475-1.033.376-2.281.914-1.24.305-1.3.343-1.803.344-1.13.086-1.193.1-1.246.135-1.45.053h-5.926l-3.346-.053-3.25-.321-1.644-.23-1.589-.23-1.546-.227-1.547-.305-1.442-.456-1.434-.325-1.294-.51-1.223-.474-1.142-.533-.99-.583-.984-.71-.336-.343-.44-.415-.334-.362-.3-.417-.278-.415-.215-.42-.311-.89-.109-.46-.138-.51v-.473l.138-.533v-.53l.109-.53v-1.069l.052-.564.259-.647.215-.646.39-.779.286-.3.236-.348.615-.738.49-.38.464-.266.428-.338.676-.21.543-.324.676-.341.77-.227.775-.231.897-.192.85-.11 1.008-.13 1.093-.081.284-.092h.063l.137-.115v-.13l-.2-.266-.58-.27-1.45-1.231-.975-.761-1.127-.967-1.136-1.082-1.181-1.382-1.36-1.558-.508-.843-.672-.87-.58-1.007-.522-1.1-.704-1.047-.459-1.194-.547-1.192-.546-1.33-.397-1.273-.378-1.575-.112-.057h-.115l-.059-.113h-.14l-.23.113-.114.057-.158.264-.057.321-.119.286-.206.477-.664 1.157-.345.701-.546.612-.58.736-.641.816-.677.724-.795.701-.734.658-.814.524-.89.546-.855.325-1.008.247-.99.095h-.233l-.228-.095-.18-.384-.29-.188-.38-.912-.237-.493-.255-.707-.21-.734-.113-.724-.313-1.648-.12-.972v-3.185l.12-2.379.196-1.214.23-1.252.21-1.347.374-1.254.42-1.443.431-1.407.578-1.448.545-1.38.754-1.4.699-1.52.855-1.425 1.006-1.538 1.023-1.382 1.069-1.538.891-1.071 1.142-1.227 1.202-1.237.56-.59.678-.662.985-.836 1.012-.853 1.647-1.446 1.242-.889z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/question.svg b/src/assets/icons/svg/question.svg
new file mode 100644
index 0000000..cf75bd4
--- /dev/null
+++ b/src/assets/icons/svg/question.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1581238842264" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1409" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 0C229.233778 0 0 229.233778 0 512s229.233778 512 512 512 512-229.233778 512-512A512 512 0 0 0 512 0z m0 938.666667C276.366222 938.666667 85.333333 747.633778 85.333333 512 85.333333 276.366222 276.366222 85.333333 512 85.333333c235.633778 0 426.666667 191.032889 426.666667 426.666667a426.666667 426.666667 0 0 1-426.666667 426.666667z m0-717.653334a170.666667 170.666667 0 0 0-170.666667 170.666667 42.666667 42.666667 0 0 0 85.333334 0 85.333333 85.333333 0 1 1 85.333333 85.333333 42.666667 42.666667 0 0 0-42.666667 42.666667v111.36a42.666667 42.666667 0 0 0 85.333334 0v-74.24A170.666667 170.666667 0 0 0 512 221.013333z m-42.666667 542.293334a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 0 0-85.333334 0z" p-id="1410"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/radio.svg b/src/assets/icons/svg/radio.svg
new file mode 100644
index 0000000..0cde345
--- /dev/null
+++ b/src/assets/icons/svg/radio.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575966775973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="879" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M507.39346659 71.84873358c241.53533667 0 437.39770766 195.85422109 437.39770767 437.37442191 0 241.53766571-195.86237099 437.38955776-437.39770767 437.38955776-241.50040803 0-437.34997219-195.85189205-437.34997219-437.38955776C70.0434944 267.70295467 265.89189347 71.84873358 507.39346659 71.84873358L507.39346659 71.84873358zM507.39346659 282.81899805c-125.00686734 0-226.37039389 101.38914133-226.37039388 226.41813048 0 125.01268821 101.36352768 226.39717262 226.37039388 226.39717262 125.04295993 0 226.42395136-101.38448441 226.42395136-226.39717262C733.81625401 384.20813938 632.43642653 282.81899805 507.39346659 282.81899805L507.39346659 282.81899805zM507.39346659 120.78172615c-214.46664192 0-388.42047261 173.95150279-388.4204726 388.44026539 0 214.51204949 173.95499463 388.46122325 388.4204726 388.46122325 214.52369237 0 388.46005817-173.94800981 388.46005818-388.46122325C895.85236082 294.73322894 721.91715897 120.78172615 507.39346659 120.78172615z" p-id="880"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/rate.svg b/src/assets/icons/svg/rate.svg
new file mode 100644
index 0000000..aa3b14d
--- /dev/null
+++ b/src/assets/icons/svg/rate.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577246781606" class="icon" viewBox="0 0 1069 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1098" xmlns:xlink="http://www.w3.org/1999/xlink" width="84.5595703125" height="81"><defs><style type="text/css"></style></defs><path d="M633.72929961 378.02038203l9.49872568 18.68789795 20.78025469 2.79745225 206.61592412 27.33248408a11.46496817 11.46496817 0 0 1 6.6095543 19.47324902l-147.2675168 147.35350284-14.89299345 14.89299345 3.8006376 20.68280244 37.84585956 204.89044571a11.46496817 11.46496817 0 0 1-16.4808914 12.2961788L554.68980898 751.84713388l-18.68789794-9.49299345-18.48726123 9.99171915-183.23885392 99.34968163a11.46496817 11.46496817 0 0 1-16.78471347-11.8662416l32.5433127-205.79617881 3.29617793-20.78598692-15.19108243-14.49172002-151.03375839-143.48407587a11.46496817 11.46496817 0 0 1 6.09936328-19.63949062l205.79617881-32.63503185 20.78598691-3.2961788L428.87898125 380.72038203 518.59235674 192.64331182a11.46496817 11.46496817 0 0 1 20.56815264-0.26369385l94.56879023 185.63503183zM496.64840732 85.52038203l-121.75796162 254.98089229L95.76433145 384.76178369A34.3949045 34.3949045 0 0 0 77.46050938 443.66879023l204.87324901 194.66369385-44.16879023 279.1146498a34.3949045 34.3949045 0 0 0 50.36560489 35.61592325l248.4-134.67898038 251.84522285 128.27579591a34.3949045 34.3949045 0 0 0 49.43694287-36.89426777l-51.30573223-277.85350284 199.73120977-199.90891758a34.3949045 34.3949045 0 0 0-19.82866201-58.40827998l-280.11783428-37.03184736L558.32993633 84.71210205a34.3949045 34.3949045 0 0 0-61.68152901 0.80254775z" p-id="1099"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/redis-list.svg b/src/assets/icons/svg/redis-list.svg
new file mode 100644
index 0000000..98a15b2
--- /dev/null
+++ b/src/assets/icons/svg/redis-list.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656035183065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3395" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M958.88 730.06H65.12c-18.28 0-33.12-14.82-33.12-33.12V68.91c0-18.29 14.83-33.12 33.12-33.12h893.77c18.28 0 33.12 14.82 33.12 33.12v628.03c-0.01 18.3-14.84 33.12-33.13 33.12zM98.23 663.83h827.53v-561.8H98.23v561.8z" p-id="3396"></path><path d="M512 954.55c-18.28 0-33.12-14.82-33.12-33.12V733.92c0-18.29 14.83-33.12 33.12-33.12s33.12 14.82 33.12 33.12v187.51c0 18.3-14.84 33.12-33.12 33.12z" p-id="3397"></path><path d="M762.01 988.21H261.99c-18.28 0-33.12-14.82-33.12-33.12 0-18.29 14.83-33.12 33.12-33.12h500.03c18.28 0 33.12 14.82 33.12 33.12-0.01 18.29-14.84 33.12-33.13 33.12zM514.74 578.55c-21.63 0-43.31-3.87-64.21-11.65-45.95-17.13-82.49-51.13-102.86-95.74-5.07-11.08-0.19-24.19 10.89-29.26 11.08-5.09 24.19-0.18 29.26 10.91 15.5 33.88 43.25 59.7 78.14 72.71 34.93 12.99 72.79 11.64 106.66-3.85 33.22-15.17 58.8-42.26 72.03-76.3 4.42-11.37 17.21-17.01 28.57-12.58 11.36 4.42 16.99 17.22 12.57 28.58-17.42 44.82-51.1 80.5-94.82 100.47-24.34 11.12-50.25 16.71-76.23 16.71z" p-id="3398"></path><path d="M325.27 528.78c-1.66 0-3.34-0.18-5.02-0.57-11.88-2.77-19.28-14.63-16.49-26.51l18.84-81c1.34-5.82 5-10.84 10.13-13.92 5.09-3.09 11.3-3.96 17.03-2.41l80.51 21.43c11.79 3.14 18.8 15.23 15.67 27.02-3.15 11.79-15.42 18.75-27.02 15.65l-58.49-15.57-13.69 58.81c-2.37 10.2-11.45 17.07-21.47 17.07zM360.8 351.01c-2.65 0-5.37-0.49-8-1.51-11.36-4.41-16.99-17.21-12.59-28.57 17.4-44.79 51.06-80.47 94.8-100.48 92.15-42.06 201.25-1.39 243.31 90.68 5.07 11.08 0.19 24.19-10.89 29.26-11.13 5.07-24.19 0.17-29.26-10.91-31.97-69.91-114.9-100.82-184.79-68.86-33.22 15.19-58.8 42.28-71.99 76.29-3.41 8.74-11.75 14.1-20.59 14.1z" p-id="3399"></path><path d="M684.68 376.74c-1.47 0-2.95-0.15-4.42-0.44l-81.61-16.68c-11.94-2.45-19.64-14.11-17.21-26.06 2.44-11.96 14.1-19.64 26.04-17.22l59.29 12.12 10.23-59.5c2.05-12 13.52-20.19 25.48-18.01 12.03 2.06 20.09 13.48 18.02 25.5l-14.08 81.96a22.089 22.089 0 0 1-9.29 14.49c-3.7 2.51-8.03 3.84-12.45 3.84z" p-id="3400"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/redis.svg b/src/assets/icons/svg/redis.svg
new file mode 100644
index 0000000..2f1d62d
--- /dev/null
+++ b/src/assets/icons/svg/redis.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1605865043777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="856" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1023.786667 611.84c-0.426667 9.770667-13.354667 20.693333-39.893334 34.56-54.613333 28.458667-337.749333 144.896-397.994666 176.298667-60.288 31.402667-93.738667 31.104-141.354667 8.32-47.616-22.741333-348.842667-144.469333-403.114667-170.368-27.093333-12.970667-40.917333-23.893333-41.386666-34.218667v103.509333c0 10.325333 14.250667 21.290667 41.386666 34.261334 54.272 25.941333 355.541333 147.626667 403.114667 170.368 47.616 22.784 81.066667 23.082667 141.354667-8.362667 60.245333-31.402667 343.338667-147.797333 397.994666-176.298667 27.776-14.464 40.106667-25.728 40.106667-35.925333v-102.058667l-0.213333-0.085333z m0-168.746667c-0.512 9.770667-13.397333 20.650667-39.893334 34.517334-54.613333 28.458667-337.749333 144.896-397.994666 176.298666-60.288 31.402667-93.738667 31.104-141.354667 8.362667-47.616-22.741333-348.842667-144.469333-403.114667-170.410667-27.093333-12.928-40.917333-23.893333-41.386666-34.176v103.509334c0 10.325333 14.250667 21.248 41.386666 34.218666 54.272 25.941333 355.498667 147.626667 403.114667 170.368 47.616 22.784 81.066667 23.082667 141.354667-8.32 60.245333-31.402667 343.338667-147.84 397.994666-176.298666 27.776-14.506667 40.106667-25.770667 40.106667-35.968v-102.058667l-0.256-0.042667z m0-175.018666c0.469333-10.410667-13.141333-19.541333-40.533334-29.610667-53.248-19.498667-334.634667-131.498667-388.522666-151.253333-53.888-19.712-75.818667-18.901333-139.093334 3.84C392.234667 113.706667 92.629333 231.253333 39.338667 252.074667c-26.666667 10.496-39.68 20.181333-39.253334 30.506666V386.133333c0 10.325333 14.250667 21.248 41.386667 34.218667 54.272 25.941333 355.498667 147.669333 403.114667 170.410667 47.616 22.741333 81.066667 23.04 141.354666-8.362667 60.245333-31.402667 343.338667-147.84 397.994667-176.298667 27.776-14.506667 40.106667-25.770667 40.106667-35.968V268.074667h-0.341334zM366.677333 366.08l237.269334-36.437333-71.68 105.088-165.546667-68.650667z m524.8-94.634667l-140.330666 55.466667-15.232 5.973333-140.245334-55.466666 155.392-61.44 140.373334 55.466666z m-411.989333-101.674666l-22.954667-42.325334 71.594667 27.989334 67.498667-22.101334-18.261334 43.733334 68.778667 25.770666-88.704 9.216-19.882667 47.786667-32.085333-53.290667-102.4-9.216 76.416-27.562666z m-176.768 59.733333c70.058667 0 126.805333 21.973333 126.805333 49.109333s-56.746667 49.152-126.805333 49.152-126.848-22.058667-126.848-49.152c0-27.136 56.789333-49.152 126.848-49.152z" p-id="857"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/row.svg b/src/assets/icons/svg/row.svg
new file mode 100644
index 0000000..0780992
--- /dev/null
+++ b/src/assets/icons/svg/row.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1579339929870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1182" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M152 854.856875h325.7146875V237.715625H134.856875v600q0 6.99375 5.0746875 12.0684375T152 854.856875z m737.143125-17.1421875v-600H546.284375v617.1421875H872q6.99375 0 12.0684375-5.07375t5.0746875-12.0684375z m68.5715625-651.429375V837.715625q0 35.3821875-25.16625 60.5484375T872 923.4284375H152q-35.383125 0-60.5484375-25.1653125T66.284375 837.7146875V186.284375q0-35.3821875 25.16625-60.5484375T152 100.5715625h720q35.383125 0 60.5484375 25.1653125t25.16625 60.5484375z" p-id="1183"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/search.svg b/src/assets/icons/svg/search.svg
new file mode 100644
index 0000000..84233dd
--- /dev/null
+++ b/src/assets/icons/svg/search.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/select.svg b/src/assets/icons/svg/select.svg
new file mode 100644
index 0000000..d628382
--- /dev/null
+++ b/src/assets/icons/svg/select.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575803481213" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="804" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M62 511.97954521C62 263.86590869 263.90681826 62 511.97954521 62s449.97954521 201.825 449.97954521 449.97954521c0 248.19545479-201.90681826 449.97954521-449.97954521 449.97954521C263.90681826 962 62 760.175 62 511.97954521M901.98636348 511.97954521c0-215.24318174-175.00909131-390.41590869-390.00681827-390.41590869-215.03863652 0-389.96590869 175.17272695-389.96590868 390.41590869 0 215.28409131 175.00909131 390.45681826 389.96590868 390.45681826C727.01818174 902.47727305 901.98636348 727.30454521 901.98636348 511.97954521M264.17272695 430.28409131c0-5.76818174 2.12727305-11.51590869 6.64772696-15.87272696 8.71363652-8.75454521 22.88863652-8.75454521 31.725 0l209.4340913 208.22727305L721.45454521 414.53409131c8.75454521-8.71363652 22.97045479-8.71363652 31.90909132 0 8.71363652 8.75454521 8.71363652 22.88863652 0 31.60227304L511.97954521 685.74090869 270.71818174 446.01363653C266.27954521 441.77954521 264.17272695 436.05227305 264.17272695 430.28409131" p-id="805"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/server.svg b/src/assets/icons/svg/server.svg
new file mode 100644
index 0000000..eb287e3
--- /dev/null
+++ b/src/assets/icons/svg/server.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1547360688278" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M890 120H134a70 70 0 0 0-70 70v500a70 70 0 0 0 70 70h756a70 70 0 0 0 70-70V190a70 70 0 0 0-70-70z m-10 520a40 40 0 0 1-40 40H712V448a40 40 0 0 0-80 0v232h-80V368a40 40 0 0 0-80 0v312h-80V512a40 40 0 0 0-80 0v168H184a40 40 0 0 1-40-40V240a40 40 0 0 1 40-40h656a40 40 0 0 1 40 40zM696 824H328a40 40 0 0 0 0 80h368a40 40 0 0 0 0-80z" p-id="6718"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/shopping.svg b/src/assets/icons/svg/shopping.svg
new file mode 100644
index 0000000..87513e7
--- /dev/null
+++ b/src/assets/icons/svg/shopping.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M42.913 101.36c1.642 0 3.198.332 4.667.996a12.28 12.28 0 0 1 3.89 2.772c1.123 1.184 1.987 2.582 2.592 4.193.605 1.612.908 3.318.908 5.118 0 1.8-.303 3.507-.908 5.118-.605 1.611-1.469 3.01-2.593 4.194a13.3 13.3 0 0 1-3.889 2.843 10.582 10.582 0 0 1-4.667 1.066c-1.729 0-3.306-.355-4.732-1.066a13.604 13.604 0 0 1-3.825-2.843c-1.123-1.185-1.988-2.583-2.593-4.194a14.437 14.437 0 0 1-.907-5.118c0-1.8.302-3.506.907-5.118.605-1.61 1.47-3.009 2.593-4.193a12.515 12.515 0 0 1 3.825-2.772c1.426-.664 3.003-.996 4.732-.996zm53.932.285c1.643 0 3.22.331 4.733.995a11.386 11.386 0 0 1 3.889 2.772c1.08 1.185 1.945 2.583 2.593 4.194.648 1.61.972 3.317.972 5.118 0 1.8-.324 3.506-.972 5.117-.648 1.611-1.513 3.01-2.593 4.194a12.253 12.253 0 0 1-3.89 2.843 11 11 0 0 1-4.732 1.066 10.58 10.58 0 0 1-4.667-1.066 12.478 12.478 0 0 1-3.824-2.843c-1.08-1.185-1.945-2.583-2.593-4.194a13.581 13.581 0 0 1-.973-5.117c0-1.801.325-3.507.973-5.118.648-1.611 1.512-3.01 2.593-4.194a11.559 11.559 0 0 1 3.824-2.772 11.212 11.212 0 0 1 4.667-.995zm21.781-80.747c2.42 0 4.3.355 5.64 1.066 1.34.71 2.29 1.587 2.852 2.63a6.427 6.427 0 0 1 .778 3.34c-.044 1.185-.195 2.204-.454 3.057-.26.853-.8 2.606-1.62 5.26a589.268 589.268 0 0 1-2.788 8.743 1236.373 1236.373 0 0 0-3.047 9.453c-.994 3.128-1.75 5.592-2.269 7.393-1.123 3.79-2.55 6.42-4.278 7.89-1.728 1.469-3.846 2.203-6.352 2.203H39.023l1.945 12.795h65.342c4.148 0 6.223 1.943 6.223 5.828 0 1.896-.41 3.53-1.232 4.905-.821 1.374-2.442 2.061-4.862 2.061H38.505c-1.729 0-3.176-.426-4.343-1.28-1.167-.852-2.14-1.966-2.917-3.34a21.277 21.277 0 0 1-1.88-4.478 44.128 44.128 0 0 1-1.102-4.55c-.087-.568-.324-1.942-.713-4.122-.39-2.18-.865-4.904-1.426-8.174l-1.88-10.947c-.692-4.027-1.383-8.079-2.075-12.154-1.642-9.572-3.5-20.234-5.574-31.986H6.87c-1.296 0-2.377-.356-3.24-1.067a9.024 9.024 0 0 1-2.14-2.558 10.416 10.416 0 0 1-1.167-3.2C.108 8.53 0 7.488 0 6.54c0-1.896.583-3.46 1.75-4.69C2.917.615 4.494 0 6.482 0h13.095c1.728 0 3.111.284 4.148.853 1.037.569 1.858 1.28 2.463 2.132a8.548 8.548 0 0 1 1.297 2.701c.26.948.475 1.754.648 2.417.173.758.346 1.825.519 3.199.173 1.374.345 2.772.518 4.193.26 1.706.519 3.507.778 5.403h88.678z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/size.svg b/src/assets/icons/svg/size.svg
new file mode 100644
index 0000000..ddb25b8
--- /dev/null
+++ b/src/assets/icons/svg/size.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 54.857h54.796v18.286H36.531V128H18.265V73.143H0V54.857zm127.857-36.571H91.935V128H72.456V18.286H36.534V0h91.326l-.003 18.286z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/skill.svg b/src/assets/icons/svg/skill.svg
new file mode 100644
index 0000000..a3b7312
--- /dev/null
+++ b/src/assets/icons/svg/skill.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M31.652 93.206h33.401c1.44 2.418 3.077 4.663 4.93 6.692h-38.33v-6.692zm0-10.586h28.914a44.8 44.8 0 0 1-1.264-6.688h-27.65v6.688zm0-17.27H59.39c.288-2.286.714-4.532 1.34-6.687H31.65v6.687h.003zm53.913 44.84v5.85c0 2.798-2.095 5.075-4.667 5.075h-70.07c-2.576 0-4.663-2.277-4.663-5.075V31.26l23.22-20.96v22.25H17.16v6.688h18.39V6.688h45.348c2.576 0 4.667 2.277 4.667 5.066v20.009c1.987-.675 4.053-1.128 6.17-1.445v-18.56C91.738 5.28 86.874 0 80.902 0H31.15L0 28.118v87.917c0 6.48 4.859 11.759 10.832 11.759h70.07c5.974 0 10.837-5.27 10.837-11.759v-4.41c-2.117-.312-4.183-.765-6.17-1.435h-.004zM23.279 58.667h-7.96v6.688h7.96v-6.688zm-7.956 41.23h7.96v-6.691h-7.96v6.692zm7.956-23.96h-7.96v6.687h7.96v-6.688zm89.718-15.042l-4.896-4.07-12.447 17.613-11.19-9.305-3.762 5.311 16.091 13.38 16.204-22.929zM128 70.978c0-18.632-13.97-33.782-31.147-33.782-17.168 0-31.135 15.155-31.135 33.782 0 18.628 13.97 33.783 31.135 33.783 17.172 0 31.143-15.15 31.143-33.783H128zm-6.17 0c0 14.933-11.203 27.1-24.981 27.1-13.77 0-24.987-12.158-24.987-27.1 0-14.941 11.195-27.099 24.987-27.099 13.778 0 24.982 12.158 24.982 27.1z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/slider.svg b/src/assets/icons/svg/slider.svg
new file mode 100644
index 0000000..fbe4f39
--- /dev/null
+++ b/src/assets/icons/svg/slider.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577185310368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1238" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M951.453125 476.84375H523.671875a131.8359375 131.8359375 0 0 0-254.1796875 0H72.546875v70.3125h196.9453125a131.8359375 131.8359375 0 0 0 254.1796875 0H951.453125z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/star.svg b/src/assets/icons/svg/star.svg
new file mode 100644
index 0000000..6cf86e6
--- /dev/null
+++ b/src/assets/icons/svg/star.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M70.66 4.328l14.01 29.693c1.088 2.29 3.177 3.882 5.603 4.25l31.347 4.76c6.087.926 8.528 8.756 4.117 13.247L103.05 79.395c-1.75 1.78-2.544 4.352-2.132 6.867l5.352 32.641c1.043 6.337-5.33 11.182-10.778 8.19l-28.039-15.409a7.13 7.13 0 0 0-6.91 0l-28.039 15.41c-5.448 2.99-11.821-1.854-10.777-8.19l5.352-32.642c.415-2.515-.387-5.088-2.136-6.867L2.264 56.278C-2.146 51.787.286 43.957 6.38 43.031l31.343-4.76c2.419-.368 4.51-1.96 5.595-4.25L57.334 4.328c2.728-5.77 10.605-5.77 13.325 0z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/swagger.svg b/src/assets/icons/svg/swagger.svg
new file mode 100644
index 0000000..05d4e7b
--- /dev/null
+++ b/src/assets/icons/svg/swagger.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566036776944" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6463" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 223.995345h168.001164v47.997673c0 26.428509 18.878836 47.997673 41.984 47.997673h140.036654c23.095855 0 41.984-21.569164 41.984-47.997673v-47.997673h504.003491a32.004655 32.004655 0 0 0 0-64.009309H455.996509V111.988364c0-26.428509-18.878836-47.997673-41.984-47.997673H273.985164c-23.095855 0-41.984 21.569164-41.984 47.997673v47.997672H64a32.004655 32.004655 0 0 0 0 64.009309zM288.004655 128h111.997672V256H288.004655V128zM960 479.995345H791.998836v-47.997672c0-26.372655-18.878836-47.997673-41.984-47.997673H609.978182c-23.095855 0-41.984 21.634327-41.984 47.997673v47.997672H64a32.004655 32.004655 0 0 0 0 64.00931h504.003491v47.997672c0 26.363345 18.878836 47.997673 41.984 47.997673h140.036654c23.095855 0 41.984-21.634327 41.984-47.997673v-47.997672h168.001164a32.004655 32.004655 0 1 0-0.009309-64.00931zM735.995345 576H623.997673v-128h111.997672v128zM960 800.293236v-0.288581H455.996509v-47.997673c0-26.363345-18.878836-47.997673-41.984-47.997673H274.050327c-23.105164 0-41.984 21.634327-41.984 47.997673v47.997673H64v0.288581a32.004655 32.004655 0 0 0 0 64.009309c0.986764 0 1.917673-0.195491 2.885818-0.288581h165.115346v47.997672c0 26.363345 18.878836 47.997673 41.984 47.997673h140.036654c23.095855 0 41.984-21.634327 41.984-47.997673v-47.997672h501.108364c0.968145 0.093091 1.899055 0.288582 2.895127 0.288581a32.004655 32.004655 0 1 0-0.009309-64.009309zM400.002327 896H288.004655V768h111.997672v128z" fill="" p-id="6464"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/switch.svg b/src/assets/icons/svg/switch.svg
new file mode 100644
index 0000000..0ba61e3
--- /dev/null
+++ b/src/assets/icons/svg/switch.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1576042673958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1110" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M692 792H332c-150 0-270-120-270-270s120-270 270-270h360c150 0 270 120 270 270 0 147-120 270-270 270zM332 312c-117 0-210 93-210 210s93 210 210 210h360c117 0 210-93 210-210s-93-210-210-210H332z" p-id="1111"></path><path d="M341 522m-150 0a150 150 0 1 0 300 0 150 150 0 1 0-300 0Z" p-id="1112"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/system.svg b/src/assets/icons/svg/system.svg
new file mode 100644
index 0000000..5992593
--- /dev/null
+++ b/src/assets/icons/svg/system.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543827724451" class="icon" style="" viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10233" xmlns:xlink="http://www.w3.org/1999/xlink" width="211.71875" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; }
+</style></defs><path d="M1080.09609 434.500756c-4.216302-23.731757-26.9241-47.945376-50.595623-53.185637l-17.648235-4.095836a175.940257 175.940257 0 0 1-101.612877-80.832531 177.807476 177.807476 0 0 1-18.732427-129.801867l5.541425-16.684509c7.10748-23.129428-2.108151-54.992624-20.599646-70.833873 0 0-16.624276-14.094495-63.244529-41.199293-46.800951-26.984332-66.858502-34.513443-66.858502-34.513443-22.76803-8.372371-54.631227-0.361397-71.255503 17.407304l-12.287509 13.251234a173.470708 173.470708 0 0 1-120.465769 48.065842A174.13327 174.13327 0 0 1 421.329029 33.590675L409.583617 20.761071C393.140039 2.99237 361.096144-4.898138 338.267881 3.353767c0 0-20.358715 7.529111-67.099434 34.513443-46.800951 27.34573-63.244529 41.440225-63.244529 41.440225-18.431263 15.66055-27.646894 47.222582-20.539413 70.592941l5.059562 16.865207a178.048407 178.048407 0 0 1-18.672194 129.621169 174.916297 174.916297 0 0 1-102.275439 81.073463l-17.045906 3.854904c-23.310126 5.42096-46.258856 29.333415-50.595623 53.185637 0 0-3.854905 21.382674-3.854905 75.712737 0 54.330062 3.854905 75.712736 3.854905 75.712736 4.216302 23.972688 26.9241 47.945376 50.595623 53.185637l16.624276 3.854905a174.253736 174.253736 0 0 1 102.395904 81.314394c23.310126 40.837896 28.911785 87.337683 18.732427 129.801867l-4.81863 16.443578c-7.10748 23.129428 2.108151 54.992624 20.599646 70.833872 0 0 16.624276 14.094495 63.244529 41.199293 46.800951 27.104798 66.918735 34.513443 66.918735 34.513443 22.707798 8.372371 54.631227 0.361397 71.255503-17.407303l11.624947-12.588673a175.096996 175.096996 0 0 1 242.256662 0.120465l11.624947 12.648906c16.383345 17.708468 48.427239 25.598976 71.255503 17.347071 0 0 20.358715-7.529111 67.159666-34.513443 46.740719-27.104798 63.124063-41.199293 63.124064-41.199293 18.491496-15.600317 27.707127-47.463513 20.599646-70.833873l-5.059562-17.106139a176.723284 176.723284 0 0 1 18.672194-129.139305 176.060722 176.060722 0 0 1 102.395904-81.314394l16.68451-3.854905c23.310126-5.42096 46.258856-29.333415 50.595623-53.185637 0 0 3.854905-21.382674 3.854904-75.712737-0.240932-54.330062-4.095836-75.833202-4.095836-75.833202z m-537.819428 293.334149c-119.261112 0-216.175824-97.336342-216.175824-217.621412a216.657687 216.657687 0 0 1 216.236057-217.320249c119.200879 0 216.115591 97.276109 216.11559 217.56118-0.240932 120.044139-96.974945 217.320248-216.175823 217.320249z" p-id="10234"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tab.svg b/src/assets/icons/svg/tab.svg
new file mode 100644
index 0000000..b4b48e4
--- /dev/null
+++ b/src/assets/icons/svg/tab.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M78.921.052H49.08c-1.865 0-3.198 1.599-3.198 3.464v6.661c0 1.865 1.6 3.464 3.198 3.464h29.84c1.865 0 3.198-1.599 3.198-3.464V3.516C82.385 1.65 80.786.052 78.92.052zm45.563 0H94.642c-1.865 0-3.464 1.599-3.464 3.464v6.661c0 1.865 1.599 3.464 3.464 3.464h29.842c1.865-.266 3.464-1.599 3.464-3.464V3.516c0-1.865-1.599-3.464-3.464-3.464zm0 22.382H40.02c-1.866 0-3.464-1.599-3.464-3.464V3.516c0-1.865-1.599-3.464-3.464-3.464H3.516C1.65.052.052 1.651.052 3.516V124.75c0 1.598 1.599 3.197 3.464 3.197h120.968c1.865 0 3.464-1.599 3.464-3.464V25.898c0-1.865-1.599-3.464-3.464-3.464z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/table.svg b/src/assets/icons/svg/table.svg
new file mode 100644
index 0000000..0e3dc9d
--- /dev/null
+++ b/src/assets/icons/svg/table.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/textarea.svg b/src/assets/icons/svg/textarea.svg
new file mode 100644
index 0000000..2709f29
--- /dev/null
+++ b/src/assets/icons/svg/textarea.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575802855098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2984" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 160H128c-35.2 0-64 28.8-64 64v576c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64z m0 608c0 16-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V256c0-16 12.8-32 32-32h704c19.2 0 32 12.8 32 32v512z" p-id="2985"></path><path d="M224 288c-19.2 0-32 12.8-32 32v256c0 16 12.8 32 32 32s32-12.8 32-32V320c0-16-12.8-32-32-32z m608 480c19.2 0 32-12.8 32-32V608L704 768h128z" p-id="2986"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/theme.svg b/src/assets/icons/svg/theme.svg
new file mode 100644
index 0000000..5982a2f
--- /dev/null
+++ b/src/assets/icons/svg/theme.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M125.5 36.984L95.336 2.83C93.735 1.018 91.565 0 89.3 0c-2.263 0-4.433 1.018-6.033 2.83l-3.786 4.286c-1.6 1.812-3.77 2.83-6.032 2.831H54.553c-2.263 0-4.434-1.018-6.033-2.83L44.734 2.83C43.134 1.018 40.964 0 38.701 0c-2.263 0-4.434 1.018-6.034 2.83L2.5 36.984C.9 38.796 0 41.254 0 43.815c0 2.562.899 5.02 2.5 6.831L14.565 64.31c2.178 2.468 5.367 3.403 8.33 2.444 1.35-.435 2.709.592 2.709 2.18v49.407c0 5.313 3.84 9.66 8.532 9.66h59.726c4.693 0 8.532-4.347 8.532-9.66V68.934c0-1.59 1.36-2.616 2.71-2.181 2.962.96 6.15.024 8.329-2.444L125.5 50.646c1.6-1.811 2.499-4.269 2.499-6.83 0-2.563-.899-5.02-2.5-6.832z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/time-range.svg b/src/assets/icons/svg/time-range.svg
new file mode 100644
index 0000000..13c1202
--- /dev/null
+++ b/src/assets/icons/svg/time-range.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1579774825624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1248" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M498.595712 482.290351 345.420077 482.290351l0 57.307194 210.477712 0L555.897789 274.196942l-57.301054 0L498.596735 482.290351zM498.595712 482.290351" p-id="1249"></path><path d="M577.685002 644.98478l379.879913 0 0 57.302077L577.685002 702.286858 577.685002 644.98478 577.685002 644.98478zM577.685002 644.98478" p-id="1250"></path><path d="M577.685002 773.764795l379.879913 0 0 57.307194L577.685002 831.071989 577.685002 773.764795 577.685002 773.764795zM577.685002 773.764795" p-id="1251"></path><path d="M577.685002 902.549927l379.879913 0 0 57.307194L577.685002 959.857121 577.685002 902.549927 577.685002 902.549927zM577.685002 902.549927" p-id="1252"></path><path d="M102.523001 382.290823c4.450359 2.615571 9.470699 3.954055 14.530948 3.954055 2.969635 0 5.952572-0.461511 8.836249-1.394766l190.809767-61.886489c15.052834-4.882194 23.297612-21.040199 18.415418-36.08894-4.882194-15.052834-21.040199-23.297612-36.093033-18.415418L175.676092 308.458257c15.994276-26.115797 35.170011-50.537 57.370639-72.743768 73.767074-73.767074 171.845857-114.388237 276.16783-114.388237 104.32095 0 202.39564 40.622186 276.16169 114.388237s114.393353 171.845857 114.393353 276.16783c0 26.427906-2.615571 52.449559-7.709589 77.780481l58.302871 0c4.464685-25.499767 6.708795-51.470255 6.708795-77.780481 0-60.449767-11.845793-119.102608-35.204803-174.336584-22.559808-53.334719-54.850236-101.226472-95.968725-142.349055-41.122583-41.122583-89.017406-73.408917-142.348032-95.968725C628.317169 75.866898 569.659211 64.021106 509.215584 64.021106c-60.448744 0-119.106702 11.845793-174.336584 35.207873-53.334719 22.559808-101.230566 54.846142-142.349055 95.968725-23.980157 23.980157-44.934398 50.278103-62.727647 78.601172l-20.738323-105.655342c-3.043313-15.527648-18.105357-25.642007-33.631982-22.599717-15.527648 3.048429-25.64303 18.105357-22.599717 33.637098l36.102243 183.932126C90.51348 371.153158 95.460142 378.13313 102.523001 382.290823L102.523001 382.290823zM102.523001 382.290823" p-id="1253"></path><path d="M126.020158 587.9416 67.768453 587.9416c5.759167 33.679054 15.368012 66.544579 28.789697 98.278327 22.559808 53.333696 54.850236 101.225449 95.971795 142.348032 41.122583 41.122583 89.014336 73.408917 142.349055 95.968725 54.112432 22.88829 111.517863 34.71157 170.668031 35.18229L505.547031 902.395408c-102.94972-0.941442-199.594851-41.445948-272.499277-114.349351C177.545672 732.543975 140.810003 663.275355 126.020158 587.9416L126.020158 587.9416zM126.020158 587.9416" p-id="1254"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/time.svg b/src/assets/icons/svg/time.svg
new file mode 100644
index 0000000..b376e32
--- /dev/null
+++ b/src/assets/icons/svg/time.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577099827399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1008" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M520 559h204c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H488c-17.673 0-32-14.327-32-32 0-0.167 0.001-0.334 0.004-0.5a32.65 32.65 0 0 1-0.004-0.5V277c0-17.673 14.327-32 32-32 17.673 0 32 14.327 32 32v282z m-8 401C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z m0-64c212.077 0 384-171.923 384-384S724.077 128 512 128 128 299.923 128 512s171.923 384 384 384z" p-id="1009"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tool.svg b/src/assets/icons/svg/tool.svg
new file mode 100644
index 0000000..48e0e35
--- /dev/null
+++ b/src/assets/icons/svg/tool.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1553828490559" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1684" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M898.831744 900.517641 103.816972 900.517641c-36.002982 0-65.363683-29.286-65.363683-65.313541l0-554.949184c0-36.041868 29.361725-65.326844 65.363683-65.326844l795.015795 0c36.002982 0 65.198931 29.284977 65.198931 65.326844l0 554.949184C964.030675 871.231641 934.834726 900.517641 898.831744 900.517641L898.831744 900.517641zM103.816972 255.593236c-13.576203 0-24.711821 11.085476-24.711821 24.662703l0 554.949184c0 13.576203 11.136641 24.662703 24.711821 24.662703l795.015795 0c13.577227 0 24.547069-11.086499 24.547069-24.662703l0-554.949184c0-13.577227-10.970866-24.662703-24.547069-24.662703L103.816972 255.593236 103.816972 255.593236zM664.346245 251.774257c-11.161201 0-20.332071-9.080819-20.332071-20.332071l0-101.278661c0-13.576203-11.047614-24.623817-24.699542-24.623817L383.181611 105.539708c-13.576203 0-24.712845 11.04659-24.712845 24.623817l0 101.278661c0 11.252275-9.041934 20.332071-20.332071 20.332071-11.20111 0-20.319791-9.080819-20.319791-20.332071l0-101.278661c0-35.989679 29.323862-65.275679 65.364707-65.275679l236.133022 0c36.06745 0 65.402569 29.284977 65.402569 65.275679l0 101.278661C684.717202 242.694461 675.636383 251.774257 664.346245 251.774257L664.346245 251.774257zM413.233044 521.725502 75.694471 521.725502c-11.163247 0-20.333094-9.117658-20.333094-20.35663 0-11.252275 9.169847-20.332071 20.333094-20.332071l337.538573 0c11.277858 0 20.319791 9.080819 20.319791 20.332071C433.552835 512.607844 424.510902 521.725502 413.233044 521.725502L413.233044 521.725502zM912.894018 521.725502 575.367725 521.725502c-11.213389 0-20.332071-9.117658-20.332071-20.35663 0-11.252275 9.118682-20.332071 20.332071-20.332071l337.526293 0c11.290137 0 20.332071 9.080819 20.332071 20.332071C933.226089 512.607844 924.184155 521.725502 912.894018 521.725502L912.894018 521.725502zM557.56322 634.217552 445.085496 634.217552c-11.213389 0-20.332071-9.079796-20.332071-20.331048l0-168.763658c0-11.251252 9.118682-20.332071 20.332071-20.332071l112.478747 0c11.290137 0 20.370956 9.080819 20.370956 20.332071l0 168.763658C577.934177 625.137757 568.853357 634.217552 557.56322 634.217552L557.56322 634.217552zM465.417567 593.514525l71.827909 0L537.245476 465.454918l-71.827909 0L465.417567 593.514525 465.417567 593.514525z" p-id="1685"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/topiam.svg b/src/assets/icons/svg/topiam.svg
new file mode 100644
index 0000000..e7ea057
--- /dev/null
+++ b/src/assets/icons/svg/topiam.svg
@@ -0,0 +1,29 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_446_540)">
+<path d="M113.069 160.072C103.717 170.743 93.0453 180.216 81.5345 188.609C61.5105 174.46 44.3642 156.595 30.9349 135.971C23.5009 124.46 17.2659 112.11 12.4697 99.0407C9.592 91.3668 7.19392 83.3332 5.27545 75.2996C2.03803 61.3907 0.359375 47.0022 0.359375 32.1341C0.359375 30.6953 0.359375 29.1365 0.359375 27.6977C6.35459 23.9806 12.7095 20.7432 19.0644 17.7456C20.7431 32.1341 24.1004 46.043 28.8966 59.3524C31.6544 66.9063 34.7719 74.3404 38.4889 81.4147C44.604 93.5251 52.0381 104.796 60.4314 115.228C75.1796 133.093 92.9254 148.321 113.069 160.072Z" fill="url(#paint0_linear_446_540)"/>
+<path d="M196.643 67.6256C195.084 76.3786 192.926 84.8918 190.168 93.1652C178.897 91.1269 167.266 90.0477 155.276 90.0477C154.197 90.0477 153.118 90.0477 152.039 90.0477C126.859 90.4074 102.878 95.6832 80.9352 105.036C72.302 94.8439 64.868 83.453 58.9927 71.3427C81.6546 61.8702 106.475 56.7144 132.614 56.7144C141.487 56.7144 150.24 57.3139 158.753 58.5129C171.823 60.1916 184.533 63.3091 196.643 67.6256Z" fill="url(#paint1_linear_446_540)"/>
+<path d="M199.64 34.0528C199.64 39.2087 199.401 44.3646 199.041 49.4005C186.691 44.1247 173.621 40.048 160.072 37.53C148.321 35.2518 136.211 34.0528 123.981 34.0528C97.7218 34.0528 72.6619 39.3286 49.88 48.9209C42.6858 51.9185 35.7313 55.3958 29.0167 59.2327C24.2205 46.0432 20.8632 32.0144 19.1846 17.6259C26.6186 14.1487 34.2925 11.271 42.2062 8.75301C60.3117 3.11751 79.4964 0 99.4005 0C119.904 0 139.568 3.23741 158.153 9.11272C172.782 13.789 186.691 20.2638 199.52 28.1775C199.64 30.2159 199.64 32.1343 199.64 34.0528Z" fill="url(#paint2_linear_446_540)"/>
+<path d="M190.168 93.2855C182.494 116.547 170.384 137.65 154.796 155.875C149.76 161.751 144.364 167.386 138.609 172.542C126.858 183.214 113.789 192.446 99.7601 200C93.4052 196.523 87.41 192.686 81.5347 188.609C93.0455 180.336 103.717 170.744 113.069 160.072C117.866 154.676 122.302 148.921 126.499 143.046C137.65 127.098 146.403 109.233 152.158 90.1679C153.237 90.1679 154.316 90.1679 155.396 90.1679C167.146 90.048 178.777 91.1272 190.168 93.2855Z" fill="url(#paint3_linear_446_540)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_446_540" x1="15.8569" y1="27.5782" x2="86.4712" y2="182.06" gradientUnits="userSpaceOnUse">
+<stop stop-color="#57A4F7"/>
+<stop offset="1" stop-color="#2158F9"/>
+</linearGradient>
+<linearGradient id="paint1_linear_446_540" x1="58.9501" y1="80.8427" x2="196.648" y2="80.8427" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2158F9"/>
+<stop offset="1" stop-color="#33E1E5"/>
+</linearGradient>
+<linearGradient id="paint2_linear_446_540" x1="19.1564" y1="29.6353" x2="199.647" y2="29.6353" gradientUnits="userSpaceOnUse">
+<stop stop-color="#255DF9"/>
+<stop offset="1" stop-color="#7C35BA"/>
+</linearGradient>
+<linearGradient id="paint3_linear_446_540" x1="95.3808" y1="192.567" x2="174.674" y2="97.4815" gradientUnits="userSpaceOnUse">
+<stop stop-color="#54A0F7"/>
+<stop offset="1" stop-color="#2158F9"/>
+</linearGradient>
+<clipPath id="clip0_446_540">
+<rect width="200" height="200" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/svg/tree-table.svg b/src/assets/icons/svg/tree-table.svg
new file mode 100644
index 0000000..8aafdb8
--- /dev/null
+++ b/src/assets/icons/svg/tree-table.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M44.8 0h79.543C126.78 0 128 1.422 128 4.267v23.466c0 2.845-1.219 4.267-3.657 4.267H44.8c-2.438 0-3.657-1.422-3.657-4.267V4.267C41.143 1.422 42.362 0 44.8 0zm22.857 48h56.686c2.438 0 3.657 1.422 3.657 4.267v23.466c0 2.845-1.219 4.267-3.657 4.267H67.657C65.22 80 64 78.578 64 75.733V52.267C64 49.422 65.219 48 67.657 48zm0 48h56.686c2.438 0 3.657 1.422 3.657 4.267v23.466c0 2.845-1.219 4.267-3.657 4.267H67.657C65.22 128 64 126.578 64 123.733v-23.466C64 97.422 65.219 96 67.657 96zM50.286 68.267c2.02 0 3.657-1.91 3.657-4.267 0-2.356-1.638-4.267-3.657-4.267H17.37V32h6.4c2.02 0 3.658-1.91 3.658-4.267V4.267C27.429 1.91 25.79 0 23.77 0H3.657C1.637 0 0 1.91 0 4.267v23.466C0 30.09 1.637 32 3.657 32h6.4v80c0 2.356 1.638 4.267 3.657 4.267h36.572c2.02 0 3.657-1.91 3.657-4.267 0-2.356-1.638-4.267-3.657-4.267H17.37V68.267h32.915z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/tree.svg b/src/assets/icons/svg/tree.svg
new file mode 100644
index 0000000..dd4b7dd
--- /dev/null
+++ b/src/assets/icons/svg/tree.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M126.713 90.023c.858.985 1.287 2.134 1.287 3.447v29.553c0 1.423-.429 2.6-1.287 3.53-.858.93-1.907 1.395-3.146 1.395H97.824c-1.145 0-2.146-.465-3.004-1.395-.858-.93-1.287-2.107-1.287-3.53V93.47c0-.875.19-1.696.572-2.462.382-.766.906-1.368 1.573-1.806a3.84 3.84 0 0 1 2.146-.657h9.725V69.007a3.84 3.84 0 0 0-.43-1.806 3.569 3.569 0 0 0-1.143-1.313 2.714 2.714 0 0 0-1.573-.492h-36.47v23.149h9.725c1.144 0 2.145.492 3.004 1.478.858.985 1.287 2.134 1.287 3.447v29.553c0 .876-.191 1.696-.573 2.463-.38.766-.905 1.368-1.573 1.806a3.84 3.84 0 0 1-2.145.656H51.915a3.84 3.84 0 0 1-2.145-.656c-.668-.438-1.216-1.04-1.645-1.806a4.96 4.96 0 0 1-.644-2.463V93.47c0-1.313.43-2.462 1.288-3.447.858-.986 1.907-1.478 3.146-1.478h9.582v-23.15h-37.9c-.953 0-1.74.356-2.359 1.068-.62.711-.93 1.56-.93 2.544v19.538h9.726c1.239 0 2.264.492 3.074 1.478.81.985 1.216 2.134 1.216 3.447v29.553c0 1.423-.405 2.6-1.216 3.53-.81.93-1.835 1.395-3.074 1.395H4.29c-.476 0-.93-.082-1.358-.246a4.1 4.1 0 0 1-1.144-.657 4.658 4.658 0 0 1-.93-1.067 5.186 5.186 0 0 1-.643-1.395 5.566 5.566 0 0 1-.215-1.56V93.47c0-.437.048-.875.143-1.313a3.95 3.95 0 0 1 .429-1.15c.19-.328.429-.656.715-.984.286-.329.572-.602.858-.821.286-.22.62-.383 1.001-.493.382-.11.763-.164 1.144-.164h9.726V61.619c0-.985.31-1.833.93-2.544.619-.712 1.358-1.068 2.216-1.068h44.335V39.62h-9.582c-1.24 0-2.288-.492-3.146-1.477a5.09 5.09 0 0 1-1.287-3.448V5.14c0-1.423.429-2.627 1.287-3.612.858-.985 1.907-1.477 3.146-1.477h25.743c.763 0 1.478.246 2.145.739a5.17 5.17 0 0 1 1.573 1.888c.382.766.573 1.587.573 2.462v29.553c0 1.313-.43 2.463-1.287 3.448-.859.985-1.86 1.477-3.004 1.477h-9.725v18.389h42.762c.954 0 1.74.355 2.36 1.067.62.711.93 1.56.93 2.545v26.925h9.582c1.239 0 2.288.492 3.146 1.478z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/upload.svg b/src/assets/icons/svg/upload.svg
new file mode 100644
index 0000000..bae49c0
--- /dev/null
+++ b/src/assets/icons/svg/upload.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577540289643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7922" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M530.944 458.24l4.8 3.456 122.176 106.816a32 32 0 0 1-37.44 51.584l-4.672-3.392L546.56 556.16v280.704a32 32 0 0 1-26.24 31.488l-5.76 0.512a32 32 0 0 1-31.424-26.24l-0.512-5.76-0.064-280.704-69.12 60.48a32 32 0 0 1-40.96 0.896l-4.16-3.968a32 32 0 0 1-0.96-40.96l4.032-4.16 122.176-106.816a32 32 0 0 1 37.312-3.456zM497.92 128c128.128 0 239.168 82.304 275.52 199.04 123.968 11.264 221.312 113.088 221.312 237.44 0 128.128-103.68 232.96-234.88 238.272h-5.888l-35.52 0.192a32 32 0 0 1-0.192-64l35.264-0.128 4.672-0.064c96.384-3.84 172.544-80.896 172.544-174.272 0-96.128-80.512-174.464-179.584-174.464h-1.984a32 32 0 0 1-32-25.28C695.872 264.96 604.736 192 497.92 192 381.824 192 285.44 277.76 274.816 388.48a32 32 0 0 1-28.352 28.8c-83.968 9.152-147.84 78.208-147.84 159.552l0.192 7.936c3.84 85.76 77.056 154.112 166.592 154.112h45.632a32 32 0 0 1 0 64h-45.632C142.016 802.944 40.32 708.032 34.88 586.88l-0.192-9.28c0-106.88 76.352-197.184 179.968-219.904C239.488 226.112 357.76 128 497.856 128z" p-id="7923"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/user.svg b/src/assets/icons/svg/user.svg
new file mode 100644
index 0000000..0ba0716
--- /dev/null
+++ b/src/assets/icons/svg/user.svg
@@ -0,0 +1 @@
+<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/validCode.svg b/src/assets/icons/svg/validCode.svg
new file mode 100644
index 0000000..cfb1021
--- /dev/null
+++ b/src/assets/icons/svg/validCode.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569580729849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1939" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M513.3 958.5c-142.2 0-397.9-222.1-401.6-440.5V268c1.7-39.6 31.7-72.3 71.1-77.3 49-4.6 97.1-16.5 142.7-35.3 47.8-14 91.9-38.3 129.4-71.1 30.3-24.4 72.9-26.3 105.3-4.6 39.9 30.7 83.8 55.9 130.5 74.6 48.6 14.7 98.2 25.9 148.4 33.7 38.5 7.6 67.1 40.3 69.5 79.5 3.3 84.9 2.5 169.9-2.6 254.7-33.7 281.6-253.7 436.4-392.7 436.3z m-0.1-813.7c-7.2-0.2-14.3 2-20 6.4-39.7 35.2-86.8 61.1-137.7 75.7-46.8 19.2-96.2 31-146.6 35.2-11 3.2-18.8 13-19.5 24.4v230.1c3.5 180.3 223.3 361 323.9 361s287.3-120.2 317.6-360.5c7.3-142.7 0-228.6 0-229.6-1.3-13.3-11-24.3-24-27.3-49.6-7.7-98.6-19-146.5-33.7-46.3-19.5-89.7-45.3-129-76.7-5.8-3.8-12.7-5.5-19.5-4.9l1.3-0.1z" fill="#C6CCDA" p-id="1940"></path><path d="M750.1 428L490.7 673.2c-11.7 11.1-29.5 12.9-43.1 4.2l-6.8-5.8-141.2-149.4c-9.3-9.3-12.7-22.9-9-35.5 3.8-12.6 14.1-22.1 27-24.8 12.9-2.7 26.1 1.9 34.6 11.9L469 597.5l233.7-221c14.6-12.8 36.8-11.6 49.9 2.7 13.2 14.2 11.5 35.3-2.5 48.8" fill="#C6CCDA" p-id="1941"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/waiting.svg b/src/assets/icons/svg/waiting.svg
new file mode 100644
index 0000000..2c2042d
--- /dev/null
+++ b/src/assets/icons/svg/waiting.svg
@@ -0,0 +1 @@
+<svg t="1716005941920" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6808" width="200" height="200"><path d="M739.555556 512a256 256 0 1 1 0 512 256 256 0 0 1 0-512z m18.887111-512a180.167111 180.167111 0 0 1 179.882666 169.870222l0.284445 10.24v311.068445a28.444444 28.444444 0 0 1-56.433778 5.12l-0.455111-5.12V180.110222a123.278222 123.278222 0 0 0-114.460445-122.936889l-8.817777-0.341333H209.237333a123.278222 123.278222 0 0 0-122.993777 114.460444l-0.284445 8.817778v662.641778c0 65.080889 50.460444 118.385778 114.460445 122.88l8.817777 0.341333h283.875556a28.444444 28.444444 0 0 1 5.12 56.433778l-5.12 0.455111h-283.875556a180.167111 180.167111 0 0 1-179.882666-169.927111l-0.284445-10.24V180.167111A180.167111 180.167111 0 0 1 198.997333 0.227556L209.237333 0h549.205334zM739.555556 568.888889a199.111111 199.111111 0 1 0 0 398.222222 199.111111 199.111111 0 0 0 0-398.222222z m115.712 314.026667a14.222222 14.222222 0 0 1 0 28.444444h-222.890667a14.222222 14.222222 0 0 1 0-28.444444h222.890667z m-45.738667-227.555556a74.126222 74.126222 0 0 1-37.660445 95.459556v24.234666c0 6.257778 5.12 11.377778 11.377778 11.377778h51.313778c19.057778-0.170667 34.645333 16.042667 34.929778 36.295111v25.486222a11.377778 11.377778 0 0 1-11.377778 11.377778h-228.579556a11.377778 11.377778 0 0 1-11.377777-11.377778v-25.486222c0.512-20.48 16.213333-36.693333 35.271111-36.295111h51.143111a11.377778 11.377778 0 0 0 11.377778-11.377778v-24.291555c-16.440889-7.793778-32.426667-21.674667-39.253334-38.570667a73.500444 73.500444 0 0 1 36.295111-95.459556c35.328-16.497778 81.123556 0.967111 96.540445 38.684445zM360.789333 682.666667a28.444444 28.444444 0 0 1 5.12 56.433777l-5.12 0.455112H199.111111a28.444444 28.444444 0 0 1-5.12-56.433778L199.111111 682.666667h161.678222z m113.777778-227.555556a28.444444 28.444444 0 0 1 5.12 56.433778L474.510222 512H199.111111a28.444444 28.444444 0 0 1-5.12-56.433778L199.111111 455.111111h275.456zM768 227.555556a28.444444 28.444444 0 0 1 5.12 56.433777L768 284.444444H199.111111a28.444444 28.444444 0 0 1-5.12-56.433777L199.111111 227.555556h568.888889z" fill="currentColor" p-id="6809"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/wechat.svg b/src/assets/icons/svg/wechat.svg
new file mode 100644
index 0000000..c586e55
--- /dev/null
+++ b/src/assets/icons/svg/wechat.svg
@@ -0,0 +1 @@
+<svg width="128" height="110" xmlns="http://www.w3.org/2000/svg"><path d="M86.635 33.334c1.467 0 2.917.113 4.358.283C87.078 14.392 67.58.111 45.321.111 20.44.111.055 17.987.055 40.687c0 13.104 6.781 23.863 18.115 32.209l-4.527 14.352 15.82-8.364c5.666 1.182 10.207 2.395 15.858 2.395 1.42 0 2.829-.073 4.227-.189-.886-3.19-1.398-6.53-1.398-9.996 0-20.845 16.98-37.76 38.485-37.76zm-24.34-12.936c3.407 0 5.665 2.363 5.665 5.954 0 3.576-2.258 5.97-5.666 5.97-3.392 0-6.795-2.395-6.795-5.97 0-3.591 3.403-5.954 6.795-5.954zM30.616 32.323c-3.393 0-6.818-2.395-6.818-5.971 0-3.591 3.425-5.954 6.818-5.954 3.392 0 5.65 2.363 5.65 5.954 0 3.576-2.258 5.97-5.65 5.97z"/><path d="M127.945 70.52c0-19.075-18.108-34.623-38.448-34.623-21.537 0-38.5 15.548-38.5 34.623 0 19.108 16.963 34.622 38.5 34.622 4.508 0 9.058-1.2 13.584-2.395l12.414 7.167-3.404-11.923c9.087-7.184 15.854-16.712 15.854-27.471zm-50.928-5.97c-2.254 0-4.53-2.362-4.53-4.773 0-2.378 2.276-4.771 4.53-4.771 3.422 0 5.665 2.393 5.665 4.771 0 2.41-2.243 4.773-5.665 4.773zm24.897 0c-2.24 0-4.498-2.362-4.498-4.773 0-2.378 2.258-4.771 4.498-4.771 3.392 0 5.665 2.393 5.665 4.771 0 2.41-2.273 4.773-5.665 4.773z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/workflow.svg b/src/assets/icons/svg/workflow.svg
new file mode 100644
index 0000000..2f7423a
--- /dev/null
+++ b/src/assets/icons/svg/workflow.svg
@@ -0,0 +1 @@
+<svg t="1716004936483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2712" width="200" height="200"><path d="M1024.99477 113.778v227.555a57.458 57.458 0 0 1-58.027 56.89H734.86277a57.458 57.458 0 0 1-58.027-56.89v-56.889H560.83877v455.112h115.996v-56.89a57.458 57.458 0 0 1 58.027-56.888h231.936a57.458 57.458 0 0 1 58.197 56.889v227.555a57.458 57.458 0 0 1-58.027 56.89H734.86277a57.458 57.458 0 0 1-58.027-56.89v-56.889H502.86877a57.458 57.458 0 0 1-58.027-56.889V568.89L274.51677 735.972a46.763 46.763 0 0 1-65.252 0l-195.754-192a44.658 44.658 0 0 1 0-64l195.754-192.057a46.763 46.763 0 0 1 65.252 0L445.01277 455.11V227.556a57.458 57.458 0 0 1 58.027-56.89h173.966v-56.888a57.458 57.458 0 0 1 58.026-56.89h231.936a57.458 57.458 0 0 1 58.027 56.89z" fill="currentColor" p-id="2713"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/zip.svg b/src/assets/icons/svg/zip.svg
new file mode 100644
index 0000000..f806fc4
--- /dev/null
+++ b/src/assets/icons/svg/zip.svg
@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M78.527 116.793c.178.008.348.024.527.024h40.233c4.711-.005 8.53-3.677 8.534-8.21V18.895c-.004-4.532-3.823-8.204-8.534-8.209H79.054c-.179 0-.353.016-.527.024V0L0 10.082v107.406l78.527 10.342v-11.037zm0-101.362c.174-.024.348-.052.527-.052h40.233c2.018 0 3.659 1.578 3.659 3.52v89.713c-.003 1.942-1.64 3.517-3.659 3.519H79.054c-.179 0-.353-.028-.527-.052V15.431zM30.262 75.757l-18.721-.46V72.37l11.3-16.673v-.148l-10.266.164v-4.51l17.504-.44v3.264L18.696 70.76v.144l11.566.176v4.678zm9.419.231l-5.823-.144V50.671l5.823-.144v25.461zm22.255-11.632c-2.168 1.922-5.353 2.76-9.02 2.736-.702.004-1.402-.04-2.097-.131v9.303l-5.997-.148V50.743c1.852-.352 4.473-.647 8.218-.743 3.838-.096 6.608.539 8.48 1.913 1.807 1.306 3.032 3.5 3.032 6.112s-.926 4.833-2.612 6.331h-.004zM53.36 54.45c-.856-.01-1.71.083-2.541.275v7.682c.523.116 1.167.152 2.06.152 3.301-.004 5.36-1.614 5.36-4.314 0-2.425-1.772-3.843-4.875-3.791l-.004-.004zm39.847-37.066h9.564v3.795h-9.564v-3.795zm-9.568 5.68h9.564v3.8h-9.564v-3.8zm9.568 6.216h9.564v3.799h-9.564V29.28zm0 12h9.564v3.794h-9.564V41.28zm-9.568-6.096h9.564v3.795h-9.564v-3.795zm9.472 47.064c2.512 0 4.921-.96 6.697-2.67 1.776-1.708 2.773-4.026 2.772-6.442l-1.748-15.263c0-5.033-2.492-9.112-7.725-9.112-5.232 0-7.72 4.079-7.72 9.112l-1.752 15.263c-.001 2.417.996 4.735 2.773 6.444 1.777 1.71 4.187 2.669 6.7 2.668h.003zm-3.135-16.75h6.27v12.743h-6.27V65.5z"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/dark.svg b/src/assets/images/dark.svg
new file mode 100644
index 0000000..f646bd7
--- /dev/null
+++ b/src/assets/images/dark.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+            <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                    <rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/light.svg b/src/assets/images/light.svg
new file mode 100644
index 0000000..ab7cc08
--- /dev/null
+++ b/src/assets/images/light.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
+            <g id="Group-8" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/login-background.jpg b/src/assets/images/login-background.jpg
new file mode 100644
index 0000000..fa6408b
Binary files /dev/null and b/src/assets/images/login-background.jpg differ
diff --git a/src/assets/images/profile.jpg b/src/assets/images/profile.jpg
new file mode 100644
index 0000000..f4fde57
Binary files /dev/null and b/src/assets/images/profile.jpg differ
diff --git a/src/assets/logo/logo.png b/src/assets/logo/logo.png
new file mode 100644
index 0000000..3f919d8
Binary files /dev/null and b/src/assets/logo/logo.png differ
diff --git a/src/assets/styles/base/_document.scss b/src/assets/styles/base/_document.scss
new file mode 100644
index 0000000..49f11f4
--- /dev/null
+++ b/src/assets/styles/base/_document.scss
@@ -0,0 +1,90 @@
+/* Global document styles and lightweight utility helpers. */
+
+// --- 视口与排版根 ---
+body {
+  height: 100%;
+  margin: 0;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  background: var(--app-shell-bg);
+  font-family:
+    'MiSans', 'HarmonyOS Sans SC', 'PingFang SC', 'Source Han Sans SC', 'Noto Sans SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', sans-serif;
+}
+
+label {
+  font-weight: 600;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+html.dark .svg-icon,
+html.dark svg {
+  fill: var(--el-text-color-regular);
+}
+
+#app {
+  height: 100%;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: ' ';
+    clear: both;
+    height: 0;
+  }
+}
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+}
diff --git a/src/assets/styles/components/_card-shell.scss b/src/assets/styles/components/_card-shell.scss
new file mode 100644
index 0000000..927bf7d
--- /dev/null
+++ b/src/assets/styles/components/_card-shell.scss
@@ -0,0 +1,67 @@
+/* 业务列表/卡片页：分页、树、列表、el-card 等（与 vendors/element-plus 通用覆盖叠加，入口顺序见 index.scss）。
+ * 属「页面模式」而非 EP 公共主题，故放在 components。 */
+
+// --- 历史「表单分区标题」样式 ---
+.form-header {
+  font-size: 15px;
+  color: var(--el-color-primary);
+  border-bottom: 1px solid var(--app-surface-border);
+  margin: 8px 10px 25px 10px;
+  padding-bottom: 5px;
+}
+
+// --- 树形容器描边（暗色覆盖在 _search-panel） ---
+.tree-border {
+  margin-top: 8px;
+  border: 1px solid var(--app-surface-border);
+  background: var(--app-surface-bg);
+  border-radius: 22px;
+  width: 100%;
+  padding: 12px;
+}
+
+@media (max-width: 768px) {
+  .pagination-container .el-pagination > .el-pagination__jump {
+    display: none !important;
+  }
+
+  .pagination-container .el-pagination > .el-pagination__sizes {
+    display: none !important;
+  }
+}
+
+.el-tree-node__content > .el-checkbox {
+  margin-right: 8px;
+}
+
+// --- el-card 本业务页外观（与 EP vendors 叠加） ---
+.el-card__header {
+  padding: 14px 16px 10px !important;
+  min-height: auto;
+  background: transparent;
+  border-bottom: 1px solid var(--app-surface-border);
+}
+
+.el-card__body {
+  padding: 16px !important;
+}
+
+.el-card {
+  border-radius: var(--app-radius-base);
+  box-shadow: var(--app-shadow-sm);
+  border-color: var(--app-surface-border);
+  overflow: hidden;
+  transition:
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+  background: var(--app-surface-bg);
+}
+
+.el-card:hover {
+  box-shadow: var(--app-shadow-md);
+  border-color: var(--app-accent-soft);
+}
+
+.card-box {
+  margin-bottom: 10px;
+}
diff --git a/src/assets/styles/components/_legacy-utilities.scss b/src/assets/styles/components/_legacy-utilities.scss
new file mode 100644
index 0000000..bce0dc8
--- /dev/null
+++ b/src/assets/styles/components/_legacy-utilities.scss
@@ -0,0 +1,76 @@
+/* 工具类  */
+
+.pt5 {
+  padding-top: 5px;
+}
+
+.pr5 {
+  padding-right: 5px;
+}
+
+.pl5 {
+  padding-left: 5px;
+}
+
+.pb5 {
+  padding-bottom: 5px;
+}
+
+.mt5 {
+  margin-top: 5px;
+}
+
+.mr5 {
+  margin-right: 5px;
+}
+
+.mb5 {
+  margin-bottom: 5px;
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
+.ml5 {
+  margin-left: 5px;
+}
+
+.mt10 {
+  margin-top: 10px;
+}
+
+.mr10 {
+  margin-right: 10px;
+}
+
+.mb10 {
+  margin-bottom: 10px;
+}
+
+.ml10 {
+  margin-left: 10px;
+}
+
+.mt20 {
+  margin-top: 20px;
+}
+
+.mr20 {
+  margin-right: 20px;
+}
+
+.mb20 {
+  margin-bottom: 20px;
+}
+
+.ml20 {
+  margin-left: 20px;
+}
+
+.el-dialog.scrollbar .el-dialog__body {
+  overflow: auto;
+  overflow-x: hidden;
+  max-height: 70vh;
+  padding: 14px 22px 4px;
+}
diff --git a/src/assets/styles/components/_misc.scss b/src/assets/styles/components/_misc.scss
new file mode 100644
index 0000000..15e3a9f
--- /dev/null
+++ b/src/assets/styles/components/_misc.scss
@@ -0,0 +1,9 @@
+.link-type,
+.link-type:focus {
+  color: var(--el-color-primary);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--app-accent-strong);
+  }
+}
diff --git a/src/assets/styles/components/_page-shell.scss b/src/assets/styles/components/_page-shell.scss
new file mode 100644
index 0000000..e9b1dc3
--- /dev/null
+++ b/src/assets/styles/components/_page-shell.scss
@@ -0,0 +1,200 @@
+/* Shared vertical page shell spacing helpers. */
+
+.p-2 {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.app-main > .p-2 {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.p-2 > .el-row,
+.p-2 > .el-card,
+.p-2 > .search-wrap,
+.p-2 > div,
+.p-2 > section {
+  margin-bottom: 0 !important;
+}
+
+// --- CRUD / 树表页用混入（在 .vue 内 @use 后 @include） ---
+
+@mixin action-link-buttons($background: rgba(53, 109, 255, 0.08)) {
+  .data-table {
+    :deep(.el-button.is-link) {
+      width: 32px;
+      height: 32px;
+      border-radius: 10px;
+      background: $background;
+    }
+  }
+}
+
+@mixin toolbar-responsive($mobile-breakpoint: 900px) {
+  @media (max-width: $mobile-breakpoint) {
+    .toolbar-shell {
+      align-items: flex-start;
+    }
+  }
+}
+
+@mixin content-stack($gap: 12px) {
+  .content-main {
+    display: flex;
+    flex-direction: column;
+    gap: $gap;
+  }
+}
+
+@mixin dept-tree-panel($padding-top: 6px) {
+  .dept-tree {
+    padding-top: $padding-top;
+  }
+}
+
+@mixin collapsible-tree-layout($mobile-breakpoint: 900px) {
+  .content-grid,
+  .selector-layout {
+    align-items: stretch;
+  }
+
+  .tree-panel-col,
+  .tree-content-col {
+    min-width: 0;
+    transition:
+      max-width 0.24s ease,
+      flex-basis 0.24s ease;
+  }
+
+  .tree-panel-col.is-collapsed {
+    max-width: 56px;
+    flex: 0 0 56px;
+  }
+
+  .tree-content-col.is-tree-collapsed {
+    max-width: calc(100% - 56px);
+    flex: 0 0 calc(100% - 56px);
+  }
+
+  .tree-panel-shell,
+  .side-panel {
+    height: 100%;
+  }
+
+  .tree-panel-shell {
+    --tree-panel-max-height: 620px;
+  }
+
+  .tree-panel-shell :deep(.el-card__header) {
+    display: block;
+    padding: 12px 16px !important;
+  }
+
+  .tree-panel-shell :deep(.el-card__body) {
+    display: flex;
+    flex-direction: column;
+    height: var(--tree-panel-max-height);
+    min-height: 0;
+    max-height: var(--tree-panel-max-height);
+    overflow: hidden;
+  }
+
+  .tree-panel-header {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .tree-panel-header::after {
+    display: block;
+    width: 9px;
+    min-width: 9px;
+    height: 9px;
+    margin-left: auto;
+    flex-shrink: 0;
+    transform-origin: center;
+    transform: rotate(135deg);
+  }
+
+  .tree-panel-header.is-collapsed {
+    justify-content: center;
+  }
+
+  .side-panel.is-collapsed :deep(.el-card__body) {
+    display: none;
+  }
+
+  .dept-tree,
+  .selector-tree {
+    flex: 1 1 auto;
+    min-height: 180px;
+    max-height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 4px;
+    scrollbar-width: thin;
+  }
+
+  .dept-tree::-webkit-scrollbar,
+  .selector-tree::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .dept-tree::-webkit-scrollbar-thumb,
+  .selector-tree::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: var(--app-text-muted);
+    opacity: 0.55;
+  }
+
+  .dept-tree::-webkit-scrollbar-track,
+  .selector-tree::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .tree-panel-shell.is-collapsed :deep(.el-card__header) {
+    padding: 12px 0 !important;
+  }
+
+  .tree-panel-shell.is-collapsed .tree-panel-header::after {
+    margin-left: 0;
+  }
+
+  .tree-panel-shell.is-collapsed .tree-panel-header::after {
+    transform: rotate(-45deg);
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    .tree-panel-col,
+    .tree-content-col {
+      max-width: 100%;
+      flex: 0 0 100%;
+    }
+
+    .tree-panel-shell {
+      --tree-panel-max-height: 420px;
+    }
+
+    .side-panel.is-collapsed {
+      height: auto;
+    }
+  }
+}
+
+@mixin table-crud-page($mobile-breakpoint: 900px, $background: rgba(53, 109, 255, 0.08)) {
+  @include action-link-buttons($background);
+  @include toolbar-responsive($mobile-breakpoint);
+}
+
+@mixin tree-table-crud-page(
+  $mobile-breakpoint: 900px,
+  $gap: 12px,
+  $tree-padding-top: 6px,
+  $background: rgba(53, 109, 255, 0.08)
+) {
+  @include content-stack($gap);
+  @include dept-tree-panel($tree-padding-top);
+  @include collapsible-tree-layout($mobile-breakpoint);
+  @include table-crud-page($mobile-breakpoint, $background);
+}
diff --git a/src/assets/styles/components/_query-form.scss b/src/assets/styles/components/_query-form.scss
new file mode 100644
index 0000000..8e54e20
--- /dev/null
+++ b/src/assets/styles/components/_query-form.scss
@@ -0,0 +1,136 @@
+/* Shared search and filter form layout. */
+
+.query-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  align-items: center;
+}
+
+.query-form .el-form-item {
+  flex: 0 0 auto;
+  margin-bottom: 0;
+  margin-right: 0;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.query-form .el-form-item__content {
+  min-width: 0;
+}
+
+.query-form.el-form--inline .el-form-item__label {
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 68px;
+  overflow: visible;
+  white-space: nowrap;
+  word-break: keep-all;
+  line-break: strict;
+  justify-content: flex-end;
+}
+
+.query-form .el-form-item:last-child {
+  margin-left: auto;
+  align-self: center;
+}
+
+.query-form .el-form-item:last-child .el-form-item__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  flex-wrap: nowrap;
+}
+
+.query-form .el-form-item:last-child .el-button {
+  margin-left: 0 !important;
+  flex-shrink: 0;
+}
+
+.query-form .el-form-item:last-child .el-button + .el-button {
+  margin-left: 0 !important;
+}
+
+.query-form .el-form-item[style*='width: 308px'] {
+  width: auto !important;
+  min-width: 376px;
+}
+
+.query-form .el-form-item[style*='width: 308px'] .el-form-item__content {
+  flex: 0 0 308px;
+  min-width: 308px;
+}
+
+.query-form .el-form-item[style*='width: 308px'] .el-date-editor.el-range-editor {
+  width: 308px;
+  min-width: 308px;
+}
+
+.query-form .el-input__wrapper,
+.query-form .el-select__wrapper,
+.query-form .el-textarea__inner,
+.query-form .el-date-editor,
+.query-form .el-range-editor,
+.query-form .el-cascader .el-input__wrapper,
+.query-form .el-input-number,
+.query-form .el-input-number__decrease,
+.query-form .el-input-number__increase {
+  border-radius: var(--app-radius-md) !important;
+}
+
+.query-form .el-button {
+  border-radius: var(--app-radius-md) !important;
+}
+
+html.dark .query-form .el-button--primary {
+  --el-button-bg-color: rgba(37, 99, 235, 0.28);
+  --el-button-border-color: rgba(96, 165, 250, 0.62);
+  --el-button-text-color: #dbeafe;
+  --el-button-hover-bg-color: rgba(59, 130, 246, 0.36);
+  --el-button-hover-border-color: rgba(147, 197, 253, 0.78);
+  --el-button-hover-text-color: #eff6ff;
+  --el-button-active-bg-color: rgba(29, 78, 216, 0.44);
+  --el-button-active-border-color: rgba(96, 165, 250, 0.86);
+  --el-button-active-text-color: #eff6ff;
+}
+
+@media (max-width: 900px) {
+  .query-form {
+    gap: 10px 12px;
+  }
+}
+
+@media (max-width: 640px) {
+  .query-form {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .query-form .el-form-item {
+    width: 100%;
+  }
+
+  .query-form .el-form-item[style*='width: 308px'] {
+    min-width: 0;
+  }
+
+  .query-form .el-form-item[style*='width: 308px'] .el-form-item__content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .query-form .el-input,
+  .query-form .el-select,
+  .query-form .el-date-editor,
+  .query-form .el-cascader,
+  .query-form .el-input-number {
+    width: 100% !important;
+  }
+
+  .query-form .el-form-item:last-child {
+    margin-left: 0;
+  }
+}
diff --git a/src/assets/styles/components/_search-panel.scss b/src/assets/styles/components/_search-panel.scss
new file mode 100644
index 0000000..2a17b1a
--- /dev/null
+++ b/src/assets/styles/components/_search-panel.scss
@@ -0,0 +1,91 @@
+/* Search panel, table actions, and responsive panel shells. */
+
+// --- 表格工具列链接按钮（全局） ---
+.data-table .el-button.is-link {
+  width: 28px !important;
+  height: 28px !important;
+  min-width: 28px !important;
+  padding: 0 !important;
+  border-radius: var(--app-radius-md) !important;
+  background: var(--app-accent-soft) !important;
+}
+
+.data-table .el-button.is-link + .el-button.is-link {
+  margin-left: 4px !important;
+}
+
+.search-wrap {
+  margin-bottom: 0 !important;
+}
+
+.search-panel,
+.table-panel {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+.search-panel {
+  isolation: isolate;
+
+  .el-card__header {
+    display: block;
+    padding: 12px 16px !important;
+  }
+
+  .el-card__body {
+    padding-top: 16px !important;
+    overflow: hidden;
+    max-height: 560px;
+    opacity: 1;
+    transition:
+      max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 0.24s ease,
+      padding-top 0.24s ease,
+      padding-bottom 0.24s ease;
+  }
+}
+
+.search-panel.is-collapsed {
+  .el-card__body {
+    max-height: 0;
+    opacity: 0;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    pointer-events: none;
+  }
+}
+
+.search-panel-toggle {
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.24s ease;
+
+  &:hover {
+    color: var(--app-accent-strong);
+  }
+
+  &::after {
+    content: '';
+    margin-left: auto;
+    width: 9px;
+    height: 9px;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    color: var(--app-text-muted);
+    transform: rotate(-135deg);
+    transition:
+      transform 0.24s ease,
+      color 0.24s ease;
+  }
+}
+
+.search-panel.is-collapsed .search-panel-toggle::after {
+  transform: rotate(45deg);
+}
+
+html.dark {
+  .tree-border {
+    background: var(--app-surface-bg);
+    border-color: var(--app-surface-border);
+  }
+}
diff --git a/src/assets/styles/components/_selector-dialog.scss b/src/assets/styles/components/_selector-dialog.scss
new file mode 100644
index 0000000..07930eb
--- /dev/null
+++ b/src/assets/styles/components/_selector-dialog.scss
@@ -0,0 +1,79 @@
+/* Reusable scoped mixins for selector dialogs backed by cards and vxe tables. */
+
+/* 为多个根选择器统一设置 gap */
+@mixin shell-gap($selectors...) {
+  @each $selector in $selectors {
+    #{$selector} {
+      gap: 12px;
+    }
+  }
+}
+
+/* 卡片区域撑满弹窗 */
+@mixin card-shell {
+  .selector-card {
+    height: 100%;
+  }
+}
+
+/* 按弹窗根 class 收紧 body 顶内边距 */
+@mixin dialog-body-padding($dialog-class) {
+  .#{$dialog-class} :deep(.el-dialog__body) {
+    padding-top: 12px;
+  }
+}
+
+/* 头部标题与已选 tag 换行、窄屏左对齐 */
+@mixin selector-header-tags($mobile-breakpoint: 768px) {
+  .selector-header {
+    align-items: flex-start;
+  }
+
+  .selector-tags {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 6px;
+    max-width: min(100%, 520px);
+  }
+
+  .selector-tags :deep(.el-tag) {
+    margin: 0;
+  }
+
+  @media (max-width: $mobile-breakpoint) {
+    .selector-tags {
+      justify-content: flex-start;
+      max-width: 100%;
+    }
+  }
+}
+
+/* vxe 表格圆角与表头色，与全局表格 token 一致 */
+@mixin selector-table {
+  .selector-table {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .selector-table :deep(.vxe-table--render-default) {
+    border-radius: 10px;
+    color: var(--app-text-title);
+  }
+
+  .selector-table :deep(.vxe-header--column) {
+    background: var(--tableHeaderBg);
+    color: var(--tableHeaderTextColor);
+    font-weight: 600;
+  }
+
+  .selector-table :deep(.vxe-body--column),
+  .selector-table :deep(.vxe-header--column) {
+    border-color: var(--app-surface-border);
+  }
+
+  .selector-table :deep(.vxe-body--row.row--hover),
+  .selector-table :deep(.vxe-body--row:hover) {
+    background-color: rgba(53, 109, 255, 0.05);
+  }
+}
diff --git a/src/assets/styles/components/_table-toolbar.scss b/src/assets/styles/components/_table-toolbar.scss
new file mode 100644
index 0000000..33534ad
--- /dev/null
+++ b/src/assets/styles/components/_table-toolbar.scss
@@ -0,0 +1,84 @@
+/* Table headers and toolbar action layouts. */
+
+.top-right-btn {
+  margin-left: auto;
+}
+
+.panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.panel-heading h3,
+.table-heading h3 {
+  margin: 0;
+  font-size: 15px;
+  letter-spacing: 0;
+  color: var(--app-text-title);
+}
+
+.panel-kicker {
+  display: none;
+  color: var(--app-accent-strong);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.toolbar-shell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.table-heading p {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: var(--app-text-muted);
+  line-height: 1.5;
+}
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 8px;
+  margin-left: auto;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 2px;
+}
+
+.toolbar-actions::-webkit-scrollbar {
+  height: 0;
+}
+
+.toolbar-actions > * {
+  flex-shrink: 0;
+}
+
+.toolbar-actions .top-right-btn {
+  margin-left: 0;
+  flex-shrink: 0;
+}
+
+.toolbar-actions .el-button + .el-button,
+.toolbar-actions .el-dropdown + .el-button,
+.toolbar-actions .el-button + .el-dropdown,
+.toolbar-actions .el-dropdown + .el-dropdown,
+.toolbar-actions .top-right-btn + .el-button,
+.toolbar-actions .el-button + .top-right-btn,
+.toolbar-actions .top-right-btn + .el-dropdown,
+.toolbar-actions .el-dropdown + .top-right-btn {
+  margin-left: 0 !important;
+}
+
+.table-panel .toolbar-actions .el-button:not(.is-circle):not(.is-link) {
+  border-radius: var(--app-radius-md) !important;
+}
diff --git a/src/assets/styles/components/_theme-helpers.scss b/src/assets/styles/components/_theme-helpers.scss
new file mode 100644
index 0000000..13b73bf
--- /dev/null
+++ b/src/assets/styles/components/_theme-helpers.scss
@@ -0,0 +1,49 @@
+/* Legacy theme helper classes and color accents. */
+
+.el-button--cyan.is-active,
+.el-button--cyan:active {
+  background: #20b2aa;
+  border-color: #20b2aa;
+  color: #ffffff;
+}
+
+.el-button--cyan:focus,
+.el-button--cyan:hover {
+  background: #48d1cc;
+  border-color: #48d1cc;
+  color: #ffffff;
+}
+
+.el-button--cyan {
+  background-color: #20b2aa;
+  border-color: #20b2aa;
+  color: #ffffff;
+}
+
+.text-navy {
+  color: #1ab394;
+}
+
+.text-primary {
+  color: inherit;
+}
+
+.text-success {
+  color: #1c84c6;
+}
+
+.text-info {
+  color: #23c6c8;
+}
+
+.text-warning {
+  color: #f8ac59;
+}
+
+.text-danger {
+  color: #ed5565;
+}
+
+.text-muted {
+  color: #888888;
+}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
new file mode 100644
index 0000000..96bc9cb
--- /dev/null
+++ b/src/assets/styles/index.scss
@@ -0,0 +1,26 @@
+// =============================================================================
+// 全局样式入口（加载顺序即最终 CSS 层叠顺序，后载入的同优先级规则会覆盖先载入的）
+// =============================================================================
+@use './tokens/sass-vars' as *;
+@use './tokens/theme';
+@use './tokens/theme-dark';
+@use './mixin.scss';
+@use './transition.scss';
+@use './base/document';
+@use './layout/surface';
+@use './layout/sidebar/shell' as sidebar-shell;
+@use './layout/sidebar/menu';
+@use './layout/sidebar/collapsed';
+@use './layout/sidebar/responsive';
+@use './layout/sidebar/popper' as sidebar-popper;
+@use './components/legacy-utilities';
+@use './components/misc';
+@use './components/page-shell';
+@use './components/card-shell';
+@use './components/theme-helpers';
+@use './components/table-toolbar';
+@use './components/query-form';
+@use './components/search-panel';
+
+@use './vendors/element-plus/index' as element-custom;
+@use 'animate.css';
diff --git a/src/assets/styles/layout/_surface.scss b/src/assets/styles/layout/_surface.scss
new file mode 100644
index 0000000..ad6f38b
--- /dev/null
+++ b/src/assets/styles/layout/_surface.scss
@@ -0,0 +1,24 @@
+/* 主内容区面板（.app-container、.panel、.search）：不依赖 Element 类名，与 components 中 EP 类补丁区分。 */
+
+// --- 整块内容容器（常见于路由视图外包一层） ---
+.app-container {
+}
+
+// --- 可复用面板条（hover 抬升阴影，非 el-card） ---
+.panel,
+.search {
+  margin-bottom: 0.75rem;
+  border-radius: var(--app-radius-base);
+  border: 1px solid var(--app-surface-border);
+  background-color: var(--app-surface-bg);
+  padding: 0.75rem;
+  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  transition:
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+
+  &:hover {
+    box-shadow: var(--app-shadow-sm);
+    border-color: rgba(64, 158, 255, 0.2);
+  }
+}
diff --git a/src/assets/styles/layout/sidebar/_collapsed.scss b/src/assets/styles/layout/sidebar/_collapsed.scss
new file mode 100644
index 0000000..c7e572a
--- /dev/null
+++ b/src/assets/styles/layout/sidebar/_collapsed.scss
@@ -0,0 +1,141 @@
+/* 桌面端折叠侧栏：窄宽、仅图标、子菜单箭头隐藏与 tooltip 触发区域（类名 .hideSidebar）。 */
+
+#app {
+  .hideSidebar {
+    .sidebar-container {
+      width: 58px !important;
+    }
+
+    .main-container {
+      margin-left: 70px;
+    }
+
+    .sidebar-shell {
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
+      height: 40px;
+      width: 40px !important;
+      min-width: 40px !important;
+      margin: 3px auto !important;
+      display: flex;
+      align-items: center;
+      justify-content: center !important;
+      box-sizing: border-box;
+
+      &.is-active {
+        background-color: var(--side-menu-active-bg) !important;
+        color: var(--side-menu-active-text) !important;
+        box-shadow: inset 3px 0 0 var(--side-menu-active-line);
+      }
+
+      .el-tooltip {
+        padding: 0 !important;
+      }
+
+      .el-menu-tooltip__trigger {
+        width: 100%;
+        height: 100%;
+        display: inline-flex !important;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+      }
+
+      .svg-icon {
+        margin-right: 0 !important;
+      }
+    }
+
+    & .el-sub-menu {
+      overflow: hidden;
+      border-radius: var(--app-radius-md);
+
+      .el-sub-menu__title,
+      .el-sub-menu__title.el-tooltip__trigger {
+        border-radius: var(--app-radius-md);
+        height: 40px;
+        padding: 0 !important;
+        display: flex;
+        align-items: center;
+        justify-content: center !important;
+        line-height: 1;
+      }
+
+      &.is-active .el-sub-menu__title,
+      &.is-active .el-sub-menu__title.el-tooltip__trigger {
+        background-color: var(--side-menu-active-bg) !important;
+        box-shadow: inset 3px 0 0 var(--side-menu-active-line);
+      }
+
+      & > .el-sub-menu__title {
+        padding: 0 !important;
+      }
+    }
+
+    .el-menu--collapse {
+      > div > .el-sub-menu {
+        width: 40px !important;
+        min-width: 40px !important;
+        margin: 3px auto !important;
+      }
+
+      > div > .el-sub-menu > .el-sub-menu__title,
+      > div > .el-sub-menu > .el-sub-menu__title.el-tooltip__trigger {
+        width: 100% !important;
+        min-width: 100% !important;
+        margin: 0 !important;
+        box-sizing: border-box;
+        transform: none;
+        position: relative;
+      }
+
+      .is-active .svg-icon {
+        fill: currentColor;
+      }
+
+      > div > .el-sub-menu > .el-sub-menu__title .svg-icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 16px;
+        height: 16px;
+        transform: translate(-50%, -50%);
+        display: block;
+        margin: 0 !important;
+        margin-right: 0 !important;
+      }
+
+      > div > .el-sub-menu > .el-sub-menu__title {
+        justify-content: center !important;
+
+        .el-sub-menu__icon-arrow {
+          display: none !important;
+          width: 0 !important;
+          margin: 0 !important;
+          overflow: hidden !important;
+        }
+
+        & > span {
+          height: 0;
+          width: 0;
+          overflow: hidden;
+          visibility: hidden;
+          display: inline-block;
+        }
+
+        & > i {
+          height: 0;
+          width: 0;
+          overflow: hidden;
+          visibility: hidden;
+          display: inline-block;
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/styles/layout/sidebar/_menu.scss b/src/assets/styles/layout/sidebar/_menu.scss
new file mode 100644
index 0000000..b863261
--- /dev/null
+++ b/src/assets/styles/layout/sidebar/_menu.scss
@@ -0,0 +1,113 @@
+/* 侧栏内 el-menu：一级/嵌套项的 hover、active、浅色与 theme-dark 分支（与 _shell 中变量定义配合）。 */
+
+@use '../../tokens/sass-vars' as *;
+
+#app {
+  .sidebar-container {
+    .theme-dark .submenu-title-noDropdown,
+    .theme-dark .el-sub-menu__title {
+      border-radius: var(--app-radius-md);
+      margin: 3px 8px;
+      height: 40px;
+
+      &:hover {
+        background-color: var(--side-menu-hover-bg) !important;
+        color: var(--side-menu-hover-text) !important;
+      }
+    }
+
+    .submenu-title-noDropdown,
+    .el-sub-menu__title {
+      border-radius: var(--app-radius-md);
+      margin: 3px 8px;
+      height: 40px;
+      color: var(--side-menu-text) !important;
+
+      &:hover {
+        background-color: var(--side-menu-hover-bg) !important;
+        color: var(--side-menu-hover-text) !important;
+      }
+    }
+
+    & .theme-dark .is-active > .el-sub-menu__title {
+      color: var(--side-menu-active-text) !important;
+    }
+
+    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .el-sub-menu .el-menu-item {
+      min-width: calc($base-sidebar-width - 16px) !important;
+      border-radius: var(--app-radius-md);
+      height: 40px;
+      margin: 3px 8px;
+      background: transparent !important;
+
+      &:not(.is-active):hover {
+        background-color: var(--side-menu-hover-bg) !important;
+        color: var(--side-menu-hover-text) !important;
+      }
+    }
+
+    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .theme-dark .el-sub-menu .el-menu-item {
+      border-radius: var(--app-radius-md);
+      height: 40px;
+      margin: 3px 8px;
+      background: transparent !important;
+
+      &.is-active {
+        background: var(--side-menu-active-bg) !important;
+        color: var(--side-menu-active-text) !important;
+        box-shadow:
+          inset 3px 0 0 var(--side-menu-active-line),
+          inset 0 0 0 1px var(--side-menu-active-border);
+      }
+
+      &:not(.is-active):hover {
+        background-color: var(--side-menu-hover-bg) !important;
+        color: var(--side-menu-hover-text) !important;
+      }
+    }
+
+    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .theme-dark .el-menu-item {
+      border-radius: var(--app-radius-md);
+      height: 40px;
+      margin: 3px 8px;
+      background: transparent !important;
+
+      &.is-active {
+        background: var(--side-menu-active-bg) !important;
+        color: var(--side-menu-active-text) !important;
+        box-shadow:
+          inset 3px 0 0 var(--side-menu-active-line),
+          inset 0 0 0 1px var(--side-menu-active-border);
+      }
+
+      &:not(.is-active):hover {
+        background-color: var(--side-menu-hover-bg) !important;
+        color: var(--side-menu-hover-text) !important;
+      }
+    }
+
+    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .el-menu-item {
+      border-radius: var(--app-radius-md);
+      height: 40px;
+      margin: 3px 8px;
+      background: transparent !important;
+
+      &.is-active {
+        background: var(--side-menu-active-bg) !important;
+        color: var(--side-menu-active-text) !important;
+        box-shadow:
+          inset 3px 0 0 var(--side-menu-active-line),
+          inset 0 0 0 1px var(--side-menu-active-border);
+      }
+
+      &:not(.is-active):hover {
+        background-color: var(--side-menu-hover-bg) !important;
+        color: var(--side-menu-hover-text) !important;
+      }
+    }
+  }
+}
diff --git a/src/assets/styles/layout/sidebar/_popper.scss b/src/assets/styles/layout/sidebar/_popper.scss
new file mode 100644
index 0000000..03468dc
--- /dev/null
+++ b/src/assets/styles/layout/sidebar/_popper.scss
@@ -0,0 +1,22 @@
+/* 折叠后弹出子菜单（el-popper.is-pure）：圆角与弹出层内 menu 项样式。 */
+
+.el-menu--vertical {
+  & > .el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+  }
+}
+
+.el-popper.is-pure {
+  border-radius: var(--app-radius-md);
+  box-shadow: var(--app-shadow-md);
+
+  .el-menu--popup {
+    border-radius: var(--app-radius-md);
+  }
+
+  .el-menu-item {
+    border-radius: var(--app-radius-sm);
+  }
+}
diff --git a/src/assets/styles/layout/sidebar/_responsive.scss b/src/assets/styles/layout/sidebar/_responsive.scss
new file mode 100644
index 0000000..a845c43
--- /dev/null
+++ b/src/assets/styles/layout/sidebar/_responsive.scss
@@ -0,0 +1,31 @@
+/* 移动端侧栏：抽屉式滑出、隐藏时 translate；.withoutAnimation 关闭过渡（与布局组件 class 约定一致）。 */
+
+@use '../../tokens/sass-vars' as *;
+
+#app {
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform 0.28s;
+      width: $base-sidebar-width !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(calc(-#{$base-sidebar-width} - 12px), 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
diff --git a/src/assets/styles/layout/sidebar/_shell.scss b/src/assets/styles/layout/sidebar/_shell.scss
new file mode 100644
index 0000000..9b0eb07
--- /dev/null
+++ b/src/assets/styles/layout/sidebar/_shell.scss
@@ -0,0 +1,132 @@
+/* 侧栏外壳：固定定位宽度、主区左边距、滚动条与 el-menu 根级样式；与 _menu/_collapsed/_responsive 分工。 */
+
+@use '../../tokens/sass-vars' as *;
+
+#app {
+  // --- 主内容区相对侧栏的偏移 ---
+  .main-container {
+    height: 100%;
+    transition: margin-left 0.28s;
+    margin-left: calc(#{$base-sidebar-width} + 12px);
+    position: relative;
+    background: transparent;
+  }
+
+  .sidebarHide {
+    margin-left: 0 !important;
+  }
+
+  // --- 侧栏固定列：宽度过渡、主题下滚动条内菜单色变量 ---
+  .sidebar-container {
+    -webkit-transition: width 0.28s;
+    transition: width 0.28s;
+    width: $base-sidebar-width !important;
+    background: transparent;
+    height: calc(100vh - 24px);
+    position: fixed;
+    font-size: 0;
+    top: 12px;
+    left: 12px;
+    z-index: 1001;
+    overflow: hidden;
+    box-sizing: border-box;
+    padding: 0;
+    border-right: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+
+    .horizontal-collapse-transition {
+      transition:
+        0s width ease-in-out,
+        0s padding-left ease-in-out,
+        0s padding-right ease-in-out;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    .el-scrollbar.theme-light {
+      --side-menu-text: #1f2937;
+      --side-menu-hover-bg: rgba(64, 158, 255, 0.08);
+      --side-menu-hover-text: #111827;
+      --side-menu-active-bg: rgba(64, 158, 255, 0.12);
+      --side-menu-active-text: #409eff;
+      --side-menu-active-border: rgba(64, 158, 255, 0.16);
+      --side-menu-active-line: #409eff;
+    }
+
+    .el-scrollbar.theme-dark {
+      --side-menu-text: #e5edf8;
+      --side-menu-hover-bg: rgba(255, 255, 255, 0.08);
+      --side-menu-hover-text: #ffffff;
+      --side-menu-active-bg: rgba(64, 158, 255, 0.22);
+      --side-menu-active-text: #ffffff;
+      --side-menu-active-border: rgba(96, 165, 250, 0.24);
+      --side-menu-active-line: #60a5fa;
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 10px;
+    }
+
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+      background: transparent !important;
+    }
+
+    .el-menu--inline {
+      background: transparent !important;
+    }
+
+    .el-menu-item,
+    .menu-title {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important;
+    }
+
+    .el-menu-item,
+    .el-sub-menu__title,
+    .el-menu-item .svg-icon,
+    .el-sub-menu__title .svg-icon,
+    .el-sub-menu__icon-arrow {
+      color: var(--side-menu-text) !important;
+      fill: currentColor;
+    }
+
+    .el-menu-item,
+    .el-sub-menu__title {
+      position: relative;
+      font-weight: 500;
+    }
+
+    .el-menu-item .el-menu-tooltip__trigger {
+      display: inline-block !important;
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-sub-menu {
+    min-width: $base-sidebar-width !important;
+  }
+}
diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss
new file mode 100644
index 0000000..f62e4da
--- /dev/null
+++ b/src/assets/styles/mixin.scss
@@ -0,0 +1,65 @@
+// 清除浮动（嵌套用）
+@mixin clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+// WebKit 滚动条配色（用于可滚动容器）
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: var(--app-surface-border);
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--app-text-muted);
+    border-radius: 20px;
+  }
+}
+
+// 铺满父级的相对定位层
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+// 百分比宽度水平居中块
+@mixin pct($pct) {
+  width: #{$pct};
+  position: relative;
+  margin: 0 auto;
+}
+
+// CSS 三角箭头（极少用，保留兼容）
+@mixin triangle($width, $height, $color, $direction) {
+  $width: $width/2;
+  $color-border-style: $height solid $color;
+  $transparent-border-style: $width solid transparent;
+  height: 0;
+  width: 0;
+
+  @if $direction==up {
+    border-bottom: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  } @else if $direction==right {
+    border-left: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  } @else if $direction==down {
+    border-top: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  } @else if $direction==left {
+    border-right: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+}
diff --git a/src/assets/styles/tokens/_exports.scss b/src/assets/styles/tokens/_exports.scss
new file mode 100644
index 0000000..98bfce9
--- /dev/null
+++ b/src/assets/styles/tokens/_exports.scss
@@ -0,0 +1,21 @@
+/* CSS module exports preserved for JS/Vue consumers. */
+
+@use './sass-vars' as *;
+
+:export {
+  menuColor: $base-menu-color;
+  menuLightColor: $base-menu-light-color;
+  menuColorActive: $base-menu-color-active;
+  menuBackground: $base-menu-background;
+  menuLightBackground: $base-menu-light-background;
+  subMenuBackground: $base-sub-menu-background;
+  subMenuHover: $base-sub-menu-hover;
+  sideBarWidth: $base-sidebar-width;
+  logoTitleColor: $base-logo-title-color;
+  logoLightTitleColor: $base-logo-light-title-color;
+  primaryColor: $color-primary;
+  successColor: $color-success;
+  dangerColor: $color-danger;
+  infoColor: $color-info;
+  warningColor: $color-warning;
+}
diff --git a/src/assets/styles/tokens/_sass-vars.scss b/src/assets/styles/tokens/_sass-vars.scss
new file mode 100644
index 0000000..da76574
--- /dev/null
+++ b/src/assets/styles/tokens/_sass-vars.scss
@@ -0,0 +1,42 @@
+/* Sass variables consumed by legacy modules and CSS module exports. */
+
+$blue: #324157;
+$light-blue: #3a71a8;
+$red: #c03639;
+$pink: #e65d6e;
+$green: #30b08f;
+$tiffany: #4ab7bd;
+$yellow: #fec171;
+$panGreen: #30b08f;
+
+$base-menu-color: var(--menuColor);
+$base-menu-hover: var(--menuHover);
+$base-menu-color-active: var(--menuActiveText);
+$base-menu-background: var(--menuBg);
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color: rgba(0, 0, 0, 0.7);
+$base-menu-light-background: #ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background: var(--subMenuBg);
+$base-sub-menu-hover: var(--subMenuHover);
+$base-sub-menu-title-hover: var(--subMenuTitleHover);
+
+$fixed-header-bg: var(--fixedHeaderBg);
+$table-header-bg: var(--tableHeaderBg);
+$table-header-text-color: var(--tableHeaderTextColor);
+
+$color-primary: #409eff;
+$color-success: #67c23a;
+$color-warning: #e6a23c;
+$color-danger: #f56c6c;
+$color-info: #909399;
+
+$--color-primary: $color-primary;
+$--color-success: $color-success;
+$--color-warning: $color-warning;
+$--color-danger: $color-danger;
+$--color-info: $color-info;
+
+$base-sidebar-width: 200px;
diff --git a/src/assets/styles/tokens/_theme-dark.scss b/src/assets/styles/tokens/_theme-dark.scss
new file mode 100644
index 0000000..354e62b
--- /dev/null
+++ b/src/assets/styles/tokens/_theme-dark.scss
@@ -0,0 +1,229 @@
+/* 暗色主题：在 html.dark 上覆写与浅色同名的业务/app 变量 */
+
+html.dark {
+  --menuBg: #111827;
+  --menuColor: #e5edf8;
+  --menuActiveText: #f8fbff;
+  --menuHover: rgba(85, 129, 255, 0.2);
+
+  --subMenuBg: #111827;
+  --subMenuActiveText: #f8fbff;
+  --subMenuHover: rgba(85, 129, 255, 0.18);
+  --subMenuTitleHover: rgba(148, 163, 184, 0.12);
+
+  --fixedHeaderBg: #0f172a;
+  --tableHeaderBg: var(--el-bg-color);
+  --tableHeaderTextColor: var(--el-text-color);
+
+  // --- 表格：暗色下选中行背景 ---
+  --el-table-current-row-bg-color: rgba(53, 109, 255, 0.14);
+  --el-table-row-hover-bg-color: rgba(148, 163, 184, 0.07);
+
+  // --- 全局：暗色下修正 primary 浅底色（表格行选中、树节点等） ---
+  --el-color-primary-light-9: rgba(53, 109, 255, 0.14);
+
+  .el-tree-node__content {
+    --el-color-primary-light-9: rgba(53, 109, 255, 0.14);
+  }
+
+  .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-text):not(
+      .is-link
+    ) {
+    --el-button-bg-color: rgba(15, 23, 42, 0.44);
+    --el-button-border-color: rgba(96, 165, 250, 0.38);
+    --el-button-text-color: #dbeafe;
+    --el-button-hover-bg-color: rgba(96, 165, 250, 0.16);
+    --el-button-hover-border-color: rgba(96, 165, 250, 0.58);
+    --el-button-hover-text-color: #bfdbfe;
+    --el-button-active-bg-color: rgba(59, 130, 246, 0.22);
+    --el-button-active-border-color: rgba(96, 165, 250, 0.72);
+    --el-button-active-text-color: #dbeafe;
+  }
+
+  // --- 各类型按钮（含 plain）在暗色下的 EP CSS 变量 ---
+  .el-button--primary {
+    --el-button-bg-color: #2b6bd3;
+    --el-button-border-color: #3a7be8;
+    --el-button-text-color: #eef4ff;
+    --el-button-hover-bg-color: #3a7be8;
+    --el-button-hover-border-color: #3a7be8;
+    --el-button-active-bg-color: #255fb8;
+    --el-button-active-border-color: #255fb8;
+  }
+
+  .el-button--primary.is-plain {
+    --el-button-bg-color: rgba(43, 107, 211, 0.12);
+    --el-button-border-color: rgba(58, 123, 232, 0.5);
+    --el-button-text-color: #dbe8ff;
+    --el-button-hover-text-color: #dbe8ff;
+    --el-button-hover-bg-color: rgba(58, 123, 232, 0.2);
+    --el-button-hover-border-color: rgba(58, 123, 232, 0.7);
+    --el-button-active-text-color: #dbe8ff;
+    --el-button-active-bg-color: rgba(43, 107, 211, 0.28);
+    --el-button-active-border-color: rgba(43, 107, 211, 0.8);
+  }
+
+  .el-button--success {
+    --el-button-bg-color: #1f8a5a;
+    --el-button-border-color: #29a46d;
+    --el-button-text-color: #eefaf4;
+    --el-button-hover-bg-color: #29a46d;
+    --el-button-hover-border-color: #29a46d;
+    --el-button-active-bg-color: #1b784f;
+    --el-button-active-border-color: #1b784f;
+  }
+
+  .el-button--success.is-plain {
+    --el-button-bg-color: rgba(31, 138, 90, 0.12);
+    --el-button-border-color: rgba(41, 164, 109, 0.5);
+    --el-button-text-color: #dbf6e8;
+    --el-button-hover-text-color: #dbf6e8;
+    --el-button-hover-bg-color: rgba(41, 164, 109, 0.2);
+    --el-button-hover-border-color: rgba(41, 164, 109, 0.7);
+    --el-button-active-text-color: #dbf6e8;
+    --el-button-active-bg-color: rgba(31, 138, 90, 0.28);
+    --el-button-active-border-color: rgba(31, 138, 90, 0.8);
+  }
+
+  .el-button--warning {
+    --el-button-bg-color: #b87922;
+    --el-button-border-color: #d6953b;
+    --el-button-text-color: #fff7e6;
+    --el-button-hover-bg-color: #d6953b;
+    --el-button-hover-border-color: #d6953b;
+    --el-button-active-bg-color: #a56c1d;
+    --el-button-active-border-color: #a56c1d;
+  }
+
+  .el-button--warning.is-plain {
+    --el-button-bg-color: rgba(184, 121, 34, 0.12);
+    --el-button-border-color: rgba(214, 149, 59, 0.5);
+    --el-button-text-color: #ffecc8;
+    --el-button-hover-text-color: #ffecc8;
+    --el-button-hover-bg-color: rgba(214, 149, 59, 0.2);
+    --el-button-hover-border-color: rgba(214, 149, 59, 0.7);
+    --el-button-active-text-color: #ffecc8;
+    --el-button-active-bg-color: rgba(184, 121, 34, 0.28);
+    --el-button-active-border-color: rgba(184, 121, 34, 0.8);
+  }
+
+  .el-button--danger {
+    --el-button-bg-color: #b24a4a;
+    --el-button-border-color: #d16060;
+    --el-button-text-color: #ffecec;
+    --el-button-hover-bg-color: #d16060;
+    --el-button-hover-border-color: #d16060;
+    --el-button-active-bg-color: #9c3f3f;
+    --el-button-active-border-color: #9c3f3f;
+  }
+
+  .el-button--danger.is-plain {
+    --el-button-bg-color: rgba(178, 74, 74, 0.12);
+    --el-button-border-color: rgba(209, 96, 96, 0.5);
+    --el-button-text-color: #ffd6d6;
+    --el-button-hover-text-color: #ffd6d6;
+    --el-button-hover-bg-color: rgba(209, 96, 96, 0.2);
+    --el-button-hover-border-color: rgba(209, 96, 96, 0.7);
+    --el-button-active-text-color: #ffd6d6;
+    --el-button-active-bg-color: rgba(178, 74, 74, 0.28);
+    --el-button-active-border-color: rgba(178, 74, 74, 0.8);
+  }
+
+  .el-button--info {
+    --el-button-bg-color: #4b5563;
+    --el-button-border-color: #667085;
+    --el-button-text-color: #f3f4f6;
+    --el-button-hover-bg-color: #667085;
+    --el-button-hover-border-color: #667085;
+    --el-button-active-bg-color: #3f4753;
+    --el-button-active-border-color: #3f4753;
+  }
+
+  .el-button--info.is-plain {
+    --el-button-bg-color: rgba(75, 85, 99, 0.16);
+    --el-button-border-color: rgba(102, 112, 133, 0.55);
+    --el-button-text-color: #e5e7eb;
+    --el-button-hover-text-color: #e5e7eb;
+    --el-button-hover-bg-color: rgba(102, 112, 133, 0.22);
+    --el-button-hover-border-color: rgba(102, 112, 133, 0.75);
+    --el-button-active-text-color: #e5e7eb;
+    --el-button-active-bg-color: rgba(75, 85, 99, 0.3);
+    --el-button-active-border-color: rgba(75, 85, 99, 0.85);
+  }
+
+  // --- Switch / Tag 暗色适配 ---
+  .el-switch {
+    --el-switch-on-color: var(--el-color-primary-dark-6);
+    --el-switch-border-color: var(--el-color-primary-light-2);
+  }
+
+  .el-tag--primary {
+    --el-tag-bg-color: var(--el-color-primary-dark-6);
+    --el-tag-border-color: var(--el-color-primary-light-2);
+  }
+
+  .el-tag--success {
+    --el-tag-bg-color: rgba(31, 138, 90, 0.18);
+    --el-tag-border-color: rgba(41, 164, 109, 0.6);
+    --el-tag-text-color: #c7f2df;
+  }
+
+  .el-tag--warning {
+    --el-tag-bg-color: rgba(184, 121, 34, 0.18);
+    --el-tag-border-color: rgba(214, 149, 59, 0.6);
+    --el-tag-text-color: #ffe6bb;
+  }
+
+  .el-tag--danger {
+    --el-tag-bg-color: rgba(178, 74, 74, 0.18);
+    --el-tag-border-color: rgba(209, 96, 96, 0.6);
+    --el-tag-text-color: #ffd0d0;
+  }
+
+  .el-tag--info {
+    --el-tag-bg-color: rgba(75, 85, 99, 0.18);
+    --el-tag-border-color: rgba(102, 112, 133, 0.6);
+    --el-tag-text-color: #e5e7eb;
+  }
+
+  // --- tags-view 与 app 壳变量（暗色） ---
+  --tags-view-active-bg: var(--el-color-primary-dark-6);
+  --tags-view-active-border-color: var(--el-color-primary-light-2);
+
+  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
+  --app-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --app-shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.32);
+  --app-surface-bg: #111827;
+  --app-surface-border: rgba(71, 85, 105, 0.5);
+  --app-shell-bg: #060b16;
+  --app-shell-spot-1: rgba(69, 120, 255, 0.18);
+  --app-shell-spot-2: rgba(45, 212, 191, 0.14);
+  --app-sidebar-border: rgba(148, 163, 184, 0.1);
+  --app-navbar-bg: #111827;
+  --app-navbar-border: rgba(71, 85, 105, 0.48);
+  --app-navbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
+  --app-accent-soft: rgba(64, 158, 255, 0.14);
+  --app-accent-strong: #60a5fa;
+  --app-text-title: #f3f7ff;
+  --app-text-muted: #8ea0bd;
+  --app-overlay-mask: rgba(2, 6, 23, 0.58);
+  --app-elevated-soft-bg: rgba(148, 163, 184, 0.08);
+  --app-elevated-close-bg: rgba(148, 163, 184, 0.18);
+  --app-elevated-close-hover-bg: rgba(96, 165, 250, 0.18);
+  --el-bg-color-page: var(--app-shell-bg);
+
+  // --- vxe-table 暗色（与 vxe 业务表并存） ---
+  --vxe-font-color: #98989e;
+  --vxe-primary-color: #2c7ecf;
+  --vxe-icon-background-color: #98989e;
+  --vxe-table-font-color: #98989e;
+  --vxe-table-resizable-color: #95969a;
+  --vxe-table-header-background-color: #28282a;
+  --vxe-table-body-background-color: #151518;
+  --vxe-table-background-color: #4a5663;
+  --vxe-table-border-width: 1px;
+  --vxe-table-border-color: #37373a;
+  --vxe-toolbar-background-color: #37373a;
+
+  --brder-color: #37373a;
+}
diff --git a/src/assets/styles/tokens/_theme.scss b/src/assets/styles/tokens/_theme.scss
new file mode 100644
index 0000000..4562c1f
--- /dev/null
+++ b/src/assets/styles/tokens/_theme.scss
@@ -0,0 +1,67 @@
+/* 浅色主题：仅声明 CSS 自定义属性，无具体选择器样式。 */
+
+:root {
+  // --- 侧栏与顶栏表格区域 ---
+  --menuBg: #ffffff;
+  --menuColor: #1f2937;
+  --menuActiveText: #111827;
+  --menuHover: rgba(64, 158, 255, 0.12);
+
+  --subMenuBg: #ffffff;
+  --subMenuActiveText: #111827;
+  --subMenuHover: rgba(64, 158, 255, 0.12);
+  --subMenuTitleHover: rgba(64, 158, 255, 0.08);
+
+  --el-menu-base-level-padding: 12px;
+  --el-menu-level-padding: 8px;
+  --el-menu-item-height: 50px;
+
+  --fixedHeaderBg: #ffffff;
+  --tableHeaderBg: #f8fafc;
+  --tableHeaderTextColor: #475569;
+
+  --brder-color: #e8e8e8;
+
+  --tags-view-active-bg: var(--el-color-primary);
+  --tags-view-active-border-color: var(--el-color-primary);
+
+  // --- 应用壳：圆角、阴影、表面、导航、强调色与文案色 ---
+  --app-radius-sm: max(0px, calc(var(--app-radius-base) - 8px));
+  --app-radius-md: max(0px, calc(var(--app-radius-base) - 4px));
+  --app-radius-lg: var(--app-radius-base);
+  --app-radius-base: 14px;
+
+  --app-space-base: 12px;
+
+  --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
+  --app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06);
+  --app-shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.1);
+
+  --app-font-size-base: 14px;
+
+  --app-surface-bg: #ffffff;
+  --app-surface-border: #e5e7eb;
+  --app-shell-bg: #f5f7fa;
+  --app-shell-spot-1: rgba(64, 158, 255, 0.08);
+  --app-shell-spot-2: rgba(64, 158, 255, 0.04);
+  --app-sidebar-border: #e5e7eb;
+  --app-navbar-bg: #ffffff;
+  --app-navbar-border: #e5e7eb;
+  --app-navbar-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+  --app-accent-soft: rgba(64, 158, 255, 0.08);
+  --app-accent-strong: #409eff;
+  --app-text-title: #1f2937;
+  --app-text-muted: #6b7280;
+  --app-overlay-mask: rgba(15, 23, 42, 0.22);
+  --app-elevated-soft-bg: #f8fafc;
+  --app-elevated-close-bg: rgba(148, 163, 184, 0.14);
+  --app-elevated-close-hover-bg: rgba(64, 158, 255, 0.14);
+
+  // --- 与 Element Plus 主题变量的桥接（页面背景、默认圆角/阴影） ---
+  --el-border-radius-base: var(--app-radius-md);
+  --el-border-radius-small: var(--app-radius-sm);
+  --el-border-radius-round: 999px;
+  --el-box-shadow-light: var(--app-shadow-sm);
+  --el-box-shadow: var(--app-shadow-md);
+  --el-bg-color-page: var(--app-shell-bg);
+}
diff --git a/src/assets/styles/transition.scss b/src/assets/styles/transition.scss
new file mode 100644
index 0000000..e6d409f
--- /dev/null
+++ b/src/assets/styles/transition.scss
@@ -0,0 +1,52 @@
+// 全局 Vue transition 类名（fade / fade-transform / breadcrumb），与业务模块无关
+
+// --- 淡入淡出 ---
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter-from,
+.fade-leave-active {
+  opacity: 0;
+}
+
+// --- 带水平位移的淡入淡出（常用于主视图切换） ---
+/* fade-transform */
+.fade-transform--move,
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// --- 面包屑列表项进出场 ---
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all 0.5s;
+}
+
+.breadcrumb-enter-from,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all 0.5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
new file mode 100644
index 0000000..d9af614
--- /dev/null
+++ b/src/assets/styles/variables.module.scss
@@ -0,0 +1,5 @@
+@forward './tokens/sass-vars';
+
+@use './tokens/theme';
+@use './tokens/theme-dark';
+@use './tokens/exports';
diff --git a/src/assets/styles/vendors/element-plus/_card.scss b/src/assets/styles/vendors/element-plus/_card.scss
new file mode 100644
index 0000000..f8e2a08
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_card.scss
@@ -0,0 +1,13 @@
+.el-card {
+  overflow: hidden;
+}
+
+.el-card .el-card__header {
+  border-top-left-radius: var(--app-radius-base);
+  border-top-right-radius: var(--app-radius-base);
+}
+
+.el-card .el-card__body {
+  border-bottom-left-radius: var(--app-radius-base);
+  border-bottom-right-radius: var(--app-radius-base);
+}
diff --git a/src/assets/styles/vendors/element-plus/_dialog.scss b/src/assets/styles/vendors/element-plus/_dialog.scss
new file mode 100644
index 0000000..1767884
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_dialog.scss
@@ -0,0 +1,109 @@
+/* 弹窗：遮罩模糊、居中 el-dialog 头身脚与关闭按钮；底部 .upload-container 为上传区宽度占位。 */
+
+.el-overlay {
+  overflow: hidden;
+  background: var(--app-overlay-mask);
+  backdrop-filter: blur(10px);
+
+  .el-overlay-dialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+
+    .el-dialog {
+      margin: 0 auto !important;
+      border-radius: var(--app-radius-base);
+      box-shadow: var(--app-shadow-md);
+      overflow: hidden;
+      border: 1px solid var(--app-surface-border);
+      background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) padding-box,
+        var(--app-surface-bg);
+
+      .el-dialog__header {
+        position: relative;
+        padding: 18px 20px 14px;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--app-surface-border);
+        margin-right: 0;
+        background: var(--app-elevated-soft-bg);
+      }
+
+      .el-dialog__title {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 1.3;
+        color: var(--app-text-title);
+        letter-spacing: 0;
+      }
+
+      .el-dialog__headerbtn {
+        position: absolute;
+        top: 50%;
+        right: 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        border-radius: 10px;
+        background: var(--app-elevated-close-bg);
+        transform: translateY(-50%);
+        transition:
+          background-color 0.2s ease,
+          transform 0.2s ease,
+          color 0.2s ease;
+
+        .el-dialog__close {
+          color: var(--app-text-muted);
+          font-size: 16px;
+        }
+
+        &:hover {
+          background: var(--app-elevated-close-hover-bg);
+          transform: translateY(calc(-50% - 1px));
+
+          .el-dialog__close {
+            color: var(--app-accent-strong);
+          }
+        }
+      }
+
+      .el-dialog__body {
+        padding: 18px 20px 12px !important;
+      }
+
+      .el-dialog__footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+        padding: 14px 20px 20px;
+        border-top: 1px solid var(--app-surface-border);
+      }
+    }
+  }
+}
+
+.el-dialog__body {
+  max-height: calc(90vh - 111px) !important;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.el-dialog__footer .el-button {
+  margin-left: 0 !important;
+}
+
+.el-dialog__footer .dialog-footer {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  gap: 12px;
+}
diff --git a/src/assets/styles/vendors/element-plus/_dropdown.scss b/src/assets/styles/vendors/element-plus/_dropdown.scss
new file mode 100644
index 0000000..dc8eff9
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_dropdown.scss
@@ -0,0 +1,63 @@
+/* 下拉菜单面板项样式；日期范围分隔符；折叠菜单隐藏箭头；dropdown-link 主色。 */
+
+.el-dropdown-menu {
+  padding: 8px;
+  border-radius: 14px;
+  border: 1px solid var(--app-surface-border);
+  background: var(--app-surface-bg);
+  box-shadow: var(--app-shadow-md);
+
+  .el-dropdown-menu__item {
+    min-height: 36px;
+    margin: 2px 0;
+    border-radius: 10px;
+    color: var(--app-text-title);
+    transition:
+      background-color 0.2s ease,
+      color 0.2s ease;
+
+    &:hover,
+    &:focus {
+      background: var(--app-accent-soft);
+      color: var(--app-accent-strong);
+    }
+  }
+
+  .el-dropdown-menu__item.is-disabled {
+    opacity: 0.5;
+  }
+
+  .el-dropdown-menu__item--divided {
+    margin-top: 8px;
+    position: relative;
+    border-top: none;
+
+    &::before {
+      left: 2px;
+      right: 2px;
+      top: -6px;
+      width: auto;
+      background: var(--app-surface-border);
+    }
+  }
+
+  a {
+    display: block;
+  }
+}
+
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-menu--collapse > div > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
+  display: none;
+}
+
+.el-dropdown .el-dropdown-link {
+  color: var(--el-color-primary) !important;
+}
diff --git a/src/assets/styles/vendors/element-plus/_element-tokens.scss b/src/assets/styles/vendors/element-plus/_element-tokens.scss
new file mode 100644
index 0000000..f694bed
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_element-tokens.scss
@@ -0,0 +1,3 @@
+:root {
+  --el-font-size-base: var(--app-font-size-base);
+}
diff --git a/src/assets/styles/vendors/element-plus/_feedback.scss b/src/assets/styles/vendors/element-plus/_feedback.scss
new file mode 100644
index 0000000..fcc76b9
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_feedback.scss
@@ -0,0 +1,226 @@
+/* 反馈：MessageBox 卡片化；Message / Notification / Alert 圆角与暗色下 success 等背景微调。 */
+
+.el-message-box .el-message-box__message {
+  word-break: break-word;
+}
+
+.el-message-box {
+  width: min(440px, calc(100vw - 32px));
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--app-surface-border);
+  background: var(--app-surface-bg);
+  border-radius: 20px;
+  box-shadow: var(--app-shadow-md);
+
+  .el-message-box__header {
+    padding: 18px 20px 0;
+  }
+
+  .el-message-box__title {
+    font-size: 17px;
+    font-weight: 600;
+    color: var(--app-text-title);
+  }
+
+  .el-message-box__headerbtn {
+    top: 14px;
+    right: 16px;
+    width: 32px;
+    height: 32px;
+    border-radius: 10px;
+    background: var(--app-elevated-close-bg);
+    transition:
+      background-color 0.2s ease,
+      transform 0.2s ease;
+
+    .el-message-box__close {
+      color: var(--app-text-muted);
+      font-size: 16px;
+    }
+
+    &:hover {
+      background: var(--app-elevated-close-hover-bg);
+      transform: translateY(-1px);
+
+      .el-message-box__close {
+        color: var(--app-accent-strong);
+      }
+    }
+  }
+
+  .el-message-box__content {
+    padding: 16px 20px 18px;
+  }
+
+  .el-message-box__container {
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .el-message-box__status {
+    position: static;
+    margin-top: 1px;
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px !important;
+    background: var(--app-elevated-soft-bg);
+  }
+
+  .el-message-box__message {
+    color: var(--app-text-title);
+    font-size: 14px;
+    line-height: 1.7;
+  }
+
+  .el-message-box__btns {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px 20px 20px;
+    border-top: 1px solid var(--app-surface-border);
+  }
+
+  .el-message-box__btns .el-button {
+    margin-left: 0;
+    min-width: 88px;
+  }
+
+  .el-message-box__input {
+    padding-top: 2px;
+  }
+}
+
+.el-message,
+.el-notification,
+.el-alert {
+  border-radius: var(--app-radius-md);
+  box-shadow: var(--app-shadow-sm);
+}
+
+.el-message {
+  min-width: 320px;
+  padding: 12px 14px;
+  border: 1px solid var(--app-surface-border);
+  background: var(--app-surface-bg);
+  gap: 10px;
+  align-items: center;
+
+  .el-message__icon {
+    font-size: 18px;
+  }
+
+  .el-message__content {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.5;
+    color: var(--app-text-title);
+  }
+
+  .el-message__closeBtn {
+    color: var(--app-text-muted);
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--app-accent-strong);
+    }
+  }
+}
+
+.el-message--success {
+  border-color: var(--el-color-success-light-7);
+  background: var(--el-color-success-light-9);
+}
+
+.el-message--warning {
+  border-color: var(--el-color-warning-light-7);
+  background: var(--el-color-warning-light-9);
+}
+
+.el-message--error {
+  border-color: var(--el-color-danger-light-7);
+  background: var(--el-color-danger-light-9);
+}
+
+.el-message--info {
+  border-color: var(--el-color-primary-light-7);
+  background: var(--el-color-primary-light-9);
+}
+
+.el-notification {
+  width: 340px;
+  padding: 16px 18px 16px 16px;
+  border: 1px solid var(--app-surface-border);
+  background: var(--app-surface-bg);
+
+  .el-notification__group {
+    margin-left: 8px;
+  }
+
+  .el-notification__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--app-text-title);
+  }
+
+  .el-notification__content {
+    margin-top: 6px;
+    font-size: 13px;
+    line-height: 1.65;
+    color: var(--app-text-muted);
+  }
+
+  .el-notification__closeBtn {
+    top: 18px;
+    color: var(--app-text-muted);
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--app-accent-strong);
+    }
+  }
+}
+
+.el-notification.right,
+.el-notification.left {
+  margin-top: 12px;
+}
+
+.el-notification--success {
+  border-color: var(--el-color-success-light-7);
+}
+
+.el-notification--warning {
+  border-color: var(--el-color-warning-light-7);
+}
+
+.el-notification--error {
+  border-color: var(--el-color-danger-light-7);
+}
+
+.el-notification--info {
+  border-color: var(--el-color-primary-light-7);
+}
+
+// --- 暗色下 Message 类型背景（与 tokens 中按钮色阶独立） ---
+html.dark {
+  .el-message--success {
+    background: rgba(31, 138, 90, 0.18);
+  }
+
+  .el-message--warning {
+    background: rgba(184, 121, 34, 0.18);
+  }
+
+  .el-message--error {
+    background: rgba(178, 74, 74, 0.18);
+  }
+
+  .el-message--info {
+    background: rgba(43, 107, 211, 0.18);
+  }
+}
diff --git a/src/assets/styles/vendors/element-plus/_form.scss b/src/assets/styles/vendors/element-plus/_form.scss
new file mode 100644
index 0000000..e6f8a37
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_form.scss
@@ -0,0 +1,73 @@
+/* 表单：inline 默认宽度；输入类圆角与 focus 环；按钮/tag/单选复选按钮组圆角。 */
+
+.el-form .el-form-item__label {
+  font-weight: 1000;
+}
+
+.el-form--inline .el-form-item__label {
+  width: 68px;
+}
+
+.el-form--inline .el-select {
+  width: 240px;
+}
+
+.el-form--inline .el-input {
+  width: 240px;
+}
+
+.el-form--inline .el-date-editor {
+  width: 308px;
+}
+
+.el-input__wrapper,
+.el-textarea__inner,
+.el-select__wrapper,
+.el-date-editor,
+.el-range-editor,
+.el-input-number,
+.el-input-number__decrease,
+.el-input-number__increase {
+  border-radius: var(--app-radius-md);
+  transition:
+    box-shadow 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.el-input__wrapper.is-focus,
+.el-textarea__inner:focus,
+.el-select__wrapper.is-focus,
+.el-date-editor.is-focus,
+.el-range-editor.is-focus {
+  box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
+}
+
+.el-button {
+  border-radius: var(--app-radius-md);
+  transition:
+    box-shadow 0.2s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.el-button:not(.is-text):not(.is-link):hover {
+  box-shadow: var(--app-shadow-sm);
+}
+
+.el-tag {
+  border-radius: var(--app-radius-md);
+}
+
+.el-radio-button__inner,
+.el-checkbox-button__inner {
+  border-radius: var(--app-radius-md) !important;
+  box-shadow: none !important;
+}
+
+.el-radio-button:first-child .el-radio-button__inner,
+.el-checkbox-button:first-child .el-checkbox-button__inner,
+.el-radio-button:last-child .el-radio-button__inner,
+.el-checkbox-button:last-child .el-checkbox-button__inner {
+  border-radius: var(--app-radius-md) !important;
+}
diff --git a/src/assets/styles/vendors/element-plus/_index.scss b/src/assets/styles/vendors/element-plus/_index.scss
new file mode 100644
index 0000000..5955cb0
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_index.scss
@@ -0,0 +1,12 @@
+@use 'element-plus/dist/index.css';
+@use 'overrides';
+@use './misc';
+@use './dialog';
+@use './dropdown';
+@use './form';
+@use './feedback';
+@use './popper';
+@use './shell';
+@use './navigation';
+@use './table';
+@use './card';
diff --git a/src/assets/styles/vendors/element-plus/_misc.scss b/src/assets/styles/vendors/element-plus/_misc.scss
new file mode 100644
index 0000000..17a9a14
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_misc.scss
@@ -0,0 +1,82 @@
+/* 零散 EP 覆盖：折叠、面包屑、上传、表格 .cell 与列辅助 class 等；主题级共用壳层见 _overrides。 */
+
+// --- 折叠面板标题与内容缩进 ---
+.el-collapse {
+  .collapse__title {
+    font-weight: 600;
+    padding: 0 8px;
+    font-size: 1.2em;
+    line-height: 1.1em;
+  }
+
+  .el-collapse-item__content {
+    padding: 0 8px;
+  }
+}
+
+// --- 水平分割线上下边距 ---
+.el-divider--horizontal {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+// --- 面包屑链接字重 ---
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+// --- 隐藏原生 file input（配合 EP 上传 UI） ---
+.el-upload {
+  input[type='file'] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+// --- 表格默认 .cell 内 tag 去右间距 ---
+.cell {
+  .el-tag {
+    margin-right: 0px;
+  }
+}
+
+// --- 列 class：窄内边距 / 固定宽操作列 / 状态列居中 ---
+.small-padding {
+  .cell {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+.fixed-width {
+  .el-button--mini {
+    padding: 7px 10px;
+    width: 60px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
diff --git a/src/assets/styles/vendors/element-plus/_navigation.scss b/src/assets/styles/vendors/element-plus/_navigation.scss
new file mode 100644
index 0000000..5074036
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_navigation.scss
@@ -0,0 +1,56 @@
+/* 导航类组件：Tabs、Pagination、面包屑容 */
+
+.el-tabs__header {
+  margin: 0 0 12px 0;
+}
+
+.el-tabs__item {
+  border-radius: var(--app-radius-md);
+  margin: 0 2px;
+}
+
+.el-tabs__nav-wrap::after {
+  background-color: var(--el-border-color-lighter);
+}
+
+.el-pagination .btn-prev,
+.el-pagination .btn-next,
+.el-pagination .el-pager li {
+  border-radius: var(--app-radius-sm);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.el-pagination {
+  gap: 6px;
+  flex-wrap: wrap;
+  color: var(--app-text-muted);
+}
+
+.el-pagination .el-pagination__total,
+.el-pagination .el-pagination__jump {
+  color: var(--app-text-muted);
+}
+
+.el-pagination .btn-prev,
+.el-pagination .btn-next,
+.el-pagination .el-pager li,
+.el-pagination .el-pagination__sizes .el-input__wrapper {
+  min-width: 32px;
+  height: 32px;
+  border: 1px solid var(--app-surface-border);
+  background: var(--app-surface-bg);
+}
+
+.el-pagination .el-pager li.is-active {
+  box-shadow: var(--app-shadow-sm);
+}
+
+.el-breadcrumb {
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+}
diff --git a/src/assets/styles/vendors/element-plus/_overrides.scss b/src/assets/styles/vendors/element-plus/_overrides.scss
new file mode 100644
index 0000000..41c8d81
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_overrides.scss
@@ -0,0 +1,84 @@
+/* 跨多个 Element Plus 组件的共用覆盖（圆角、描边、阴影、主按钮、表格变量、输入框等）。
+ * 注意：本文件在入口中晚于 components/_card-shell 载入，其中 .el-card 等与卡片壳层重叠的属性以本文件为准（例如阴影强度）。 */
+
+// --- 卡片、弹层、抽屉及常见 popper 容器的圆角/边线/阴影 ---
+.el-card,
+.el-dialog,
+.el-drawer,
+.el-popover.el-popper,
+.el-dropdown__popper .el-dropdown-menu,
+.el-picker__popper,
+.el-select__popper.el-popper {
+  border-radius: var(--app-radius-base);
+  border-color: var(--app-surface-border);
+  box-shadow: var(--app-shadow-md);
+}
+
+// --- 实体「面板」背景 ---
+.el-card,
+.el-dialog,
+.el-drawer {
+  background: var(--app-surface-bg);
+}
+
+// --- 按钮默认字重 ---
+.el-button {
+  font-weight: 500;
+}
+
+// --- primary 品牌色（亮色；暗色见 tokens/_theme-dark） ---
+.el-button--primary {
+  --el-button-bg-color: var(--app-accent-strong);
+  --el-button-border-color: var(--app-accent-strong);
+  --el-button-hover-bg-color: #4a7cff;
+  --el-button-hover-border-color: #4a7cff;
+  --el-button-active-bg-color: #2e5ce0;
+  --el-button-active-border-color: #2e5ce0;
+}
+
+// --- 表格 CSS 变量接业务 token ---
+.el-table {
+  --el-table-border-color: var(--app-surface-border);
+  --el-table-header-bg-color: var(--tableHeaderBg);
+  --el-table-tr-bg-color: var(--el-bg-color);
+  --el-table-bg-color: var(--el-bg-color);
+  --el-table-row-hover-bg-color: var(--el-fill-color-light);
+  --el-table-current-row-bg-color: var(--el-color-primary-light-9);
+  background: var(--el-bg-color);
+}
+
+// 暗色模式：行背景、hover、选中全部用不透明色，防止固定列透视
+html.dark .el-table {
+  --el-table-tr-bg-color: var(--app-surface-bg);
+  --el-table-bg-color: var(--app-surface-bg);
+  --el-table-row-hover-bg-color: #2a3a55;
+  --el-table-current-row-bg-color: #1e3a6e;
+  --el-color-primary-light-9: #1e3a6e;
+  background: var(--app-surface-bg);
+}
+
+// 固定列单元格基底背景与普通行保持一致（亮/暗均适用）
+.el-table .el-table__cell {
+  background-color: var(--el-table-tr-bg-color);
+}
+
+// hover 行的所有单元格（含固定列）覆写为不透明背景
+.el-table__body tr.hover-row > td.el-table__cell,
+.el-table__body tr.hover-row.current-row > td.el-table__cell,
+.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
+.el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background-color: var(--el-table-row-hover-bg-color) !important;
+}
+
+// 选中行的所有单元格（含固定列）覆写为不透明背景
+.el-table__body tr.current-row > td.el-table__cell {
+  background-color: var(--el-table-current-row-bg-color) !important;
+}
+
+// --- 输入类默认内描边（与 _form 中 focus 环配合） ---
+.el-input__wrapper,
+.el-textarea__inner,
+.el-select__wrapper {
+  box-shadow: 0 0 0 1px var(--el-border-color) inset;
+}
diff --git a/src/assets/styles/vendors/element-plus/_popper.scss b/src/assets/styles/vendors/element-plus/_popper.scss
new file mode 100644
index 0000000..070bd36
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_popper.scss
@@ -0,0 +1,248 @@
+/* 各类浮层：Select/Cascader/DatePicker/Tooltip/Popover 等边框、列表项 hover、暗色箭头与日历格选中态。 */
+
+.el-select__popper.el-popper,
+.el-picker__popper.el-popper,
+.el-autocomplete__popper.el-popper,
+.el-cascader__dropdown,
+.el-dropdown__popper.el-popper,
+.el-popover.el-popper {
+  border: 1px solid var(--app-surface-border);
+  background: var(--app-surface-bg);
+  box-shadow: var(--app-shadow-md);
+}
+
+.el-select__popper.el-popper,
+.el-autocomplete__popper.el-popper,
+.el-cascader__dropdown,
+.el-dropdown__popper.el-popper,
+.el-popover.el-popper {
+  padding: 8px;
+}
+
+.el-select-dropdown__list,
+.el-autocomplete-suggestion__list,
+.el-cascader-menu {
+  padding: 0;
+}
+
+.el-select-dropdown__item,
+.el-autocomplete-suggestion li,
+.el-cascader-node {
+  min-height: 38px;
+  margin: 2px 0;
+  border-radius: 10px;
+  color: var(--app-text-title);
+  line-height: 38px;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover,
+.el-autocomplete-suggestion li:hover,
+.el-cascader-node:not(.is-disabled):hover,
+.el-cascader-node.in-active-path {
+  background: var(--app-accent-soft);
+  color: var(--app-accent-strong);
+}
+
+.el-select-dropdown__item.is-selected,
+.el-autocomplete-suggestion li.highlighted {
+  background: rgba(64, 158, 255, 0.12);
+  color: var(--app-accent-strong);
+  font-weight: 600;
+}
+
+.el-select-dropdown__item.is-disabled,
+.el-cascader-node.is-disabled {
+  opacity: 0.5;
+}
+
+.el-tree-select__popper .el-tree-node__content {
+  display: flex;
+  align-items: center;
+}
+
+.el-tree-select__popper .el-select-dropdown__item {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-height: 20px;
+  height: 20px;
+  line-height: 20px;
+  margin: 0;
+  padding-left: 0;
+  background: transparent !important;
+}
+
+.el-tree-select__popper .el-tree-node__expand-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+}
+
+.el-autocomplete-suggestion li {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+}
+
+.el-autocomplete-suggestion li div {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.el-cascader-menu {
+  min-width: 180px;
+  border-right-color: var(--app-surface-border);
+}
+
+.el-cascader-node__prefix,
+.el-cascader-node__postfix {
+  color: var(--app-text-muted);
+}
+
+.el-popper.is-dark {
+  border-color: rgba(15, 23, 42, 0.72);
+  background: rgba(15, 23, 42, 0.92);
+  color: #f8fafc;
+}
+
+.el-popper.is-dark .el-popper__arrow::before {
+  background: rgba(15, 23, 42, 0.92);
+  border-color: rgba(15, 23, 42, 0.72);
+}
+
+.el-popper.is-light {
+  border-color: var(--app-surface-border);
+  background: var(--app-surface-bg);
+}
+
+.el-popper.is-light .el-popper__arrow::before {
+  background: var(--app-surface-bg);
+  border-color: var(--app-surface-border);
+}
+
+.el-picker__popper.el-popper {
+  padding: 12px;
+}
+
+.el-date-picker,
+.el-date-range-picker,
+.el-time-panel,
+.el-time-range-picker,
+.el-picker-panel {
+  background: transparent;
+  color: var(--app-text-title);
+}
+
+.el-picker-panel__body-wrapper,
+.el-date-range-picker__content {
+  background: transparent;
+}
+
+.el-picker-panel__icon-btn,
+.el-date-picker__header-label,
+.el-date-range-picker__header-label {
+  color: var(--app-text-title);
+}
+
+.el-date-table td,
+.el-month-table td .cell,
+.el-year-table td .cell {
+  border-radius: 10px;
+}
+
+.el-date-table td.today .el-date-table-cell__text,
+.el-month-table td.today .cell,
+.el-year-table td.today .cell {
+  color: var(--app-accent-strong);
+  font-weight: 700;
+}
+
+.el-date-table td.available:hover,
+.el-month-table td .cell:hover,
+.el-year-table td .cell:hover {
+  color: var(--app-accent-strong);
+  background: var(--app-accent-soft);
+}
+
+.el-date-table td.current:not(.disabled) .el-date-table-cell__text,
+.el-month-table td.current:not(.disabled) .cell,
+.el-year-table td.current:not(.disabled) .cell {
+  background: var(--app-accent-strong);
+  color: #fff;
+}
+
+.el-date-editor .el-range-separator {
+  color: var(--app-text-muted);
+}
+
+.el-time-panel__content::before,
+.el-time-panel__content::after {
+  border-color: var(--app-surface-border);
+}
+
+.el-scrollbar__thumb {
+  background: var(--app-text-muted);
+  opacity: 0.42;
+}
+
+.el-scrollbar__thumb:hover {
+  background: rgba(100, 116, 139, 0.56);
+}
+
+.el-popover,
+.el-tooltip__popper,
+.el-popper {
+  border-radius: var(--app-radius-md);
+  box-shadow: var(--app-shadow-sm);
+}
+
+.el-popover {
+  padding: 10px 12px;
+}
+
+.el-tooltip__popper {
+  max-width: 320px;
+  padding: 8px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.el-popconfirm {
+  max-width: 320px;
+}
+
+.el-popconfirm__main {
+  gap: 10px;
+  line-height: 1.6;
+  color: var(--app-text-title);
+}
+
+.el-popconfirm__action {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.el-popconfirm__action .el-button {
+  margin-left: 0 !important;
+}
+
+html.dark {
+  .el-popper.is-dark {
+    border-color: rgba(30, 41, 59, 0.92);
+    background: rgba(15, 23, 42, 0.96);
+  }
+
+  .el-popper.is-dark .el-popper__arrow::before {
+    background: rgba(15, 23, 42, 0.96);
+    border-color: rgba(30, 41, 59, 0.92);
+  }
+}
diff --git a/src/assets/styles/vendors/element-plus/_shell.scss b/src/assets/styles/vendors/element-plus/_shell.scss
new file mode 100644
index 0000000..663d2fe
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_shell.scss
@@ -0,0 +1,108 @@
+/* Drawers, loading masks, descriptions, trees, and empty states. */
+
+.el-drawer {
+  border-radius: var(--app-radius-base);
+  box-shadow: var(--app-shadow-md);
+  border: 1px solid var(--app-surface-border);
+  overflow: hidden;
+}
+
+.el-drawer__header {
+  margin-bottom: 0;
+  padding: 18px 20px 16px;
+  border-bottom: 1px solid var(--app-surface-border);
+  background: var(--app-elevated-soft-bg);
+  color: var(--app-text-title);
+}
+
+.el-drawer__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--app-text-title);
+}
+
+.el-drawer__body {
+  padding: 18px 20px 20px;
+}
+
+.el-drawer__close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  background: var(--app-elevated-close-bg);
+  color: var(--app-text-muted);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    transform 0.2s ease;
+
+  &:hover {
+    background: var(--app-elevated-close-hover-bg);
+    color: var(--app-accent-strong);
+    transform: translateY(-1px);
+  }
+}
+
+.el-loading-mask {
+  background: color-mix(in srgb, var(--app-surface-bg) 82%, transparent);
+  backdrop-filter: blur(4px);
+}
+
+.el-loading-spinner .path {
+  stroke: var(--app-accent-strong);
+}
+
+.el-descriptions {
+  --el-descriptions-table-border: var(--app-surface-border);
+}
+
+.el-descriptions__body .el-descriptions__table {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.el-descriptions__label.el-descriptions__cell {
+  background: var(--app-elevated-soft-bg) !important;
+  color: var(--app-text-title);
+  font-weight: 600;
+}
+
+.el-descriptions__content.el-descriptions__cell {
+  color: var(--app-text-title);
+}
+
+.el-tree {
+  color: var(--app-text-title);
+  background: transparent;
+}
+
+.el-tree-node__content {
+  min-height: 34px;
+  margin: 2px 0;
+  border-radius: 10px;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+.el-tree-node__content:hover,
+.el-tree-node.is-current > .el-tree-node__content {
+  background: var(--app-accent-soft);
+}
+
+.el-empty__image {
+  opacity: 0.9;
+}
+
+.el-empty__description p {
+  color: var(--app-text-muted);
+}
+
+.el-color-dropdown {
+  border-radius: var(--app-radius-base);
+  border: 1px solid var(--app-surface-border);
+  box-shadow: var(--app-shadow-md);
+}
diff --git a/src/assets/styles/vendors/element-plus/_table.scss b/src/assets/styles/vendors/element-plus/_table.scss
new file mode 100644
index 0000000..c2e05c9
--- /dev/null
+++ b/src/assets/styles/vendors/element-plus/_table.scss
@@ -0,0 +1,100 @@
+/* Element Plus 表格：通用容器圆角、边线、overflow、行 hover、四角单元格、border/fit 清理（不含业务页表头 token，表头见 components/_legacy-utilities）。 */
+@use '../../tokens/sass-vars' as *;
+
+.el-table {
+  border-radius: var(--app-radius-md);
+  border: 1px solid var(--app-surface-border);
+  overflow: hidden;
+
+  // 给右上角表头单元格增加右上角圆角
+  thead tr:first-child th:last-child {
+    border-top-right-radius: var(--app-radius-md);
+  }
+
+  // 给左下角单元格增加左下角圆角
+  tbody tr:last-child td:first-child {
+    border-bottom-left-radius: var(--app-radius-md);
+  }
+
+  // 给右下角单元格增加右下角圆角
+  tbody tr:last-child td:last-child {
+    border-bottom-right-radius: var(--app-radius-md);
+  }
+}
+
+.el-table__header-wrapper {
+  background: transparent;
+}
+
+// 固定列 body 必须有不透明背景，否则横向滚动时数据透视
+.el-table__fixed-body-wrapper,
+.el-table__fixed-right-body-wrapper {
+  background-color: var(--el-bg-color);
+}
+
+html.dark {
+  .el-table__fixed-body-wrapper,
+  .el-table__fixed-right-body-wrapper {
+    background-color: var(--app-surface-bg);
+  }
+}
+
+// 去掉额外的表格边线，使用表格border
+.el-table--border:after,
+.el-table--border:before,
+.el-table--border .el-table__inner-wrapper:after,
+.el-table--border .el-table__inner-wrapper:before,
+.el-table__border-left-patch {
+  display: none;
+}
+
+// 去掉表格右侧和底部边框，使用单元的变宽
+.el-table--fit {
+  border-bottom: 0;
+  border-right: 0;
+}
+
+// 全高表格的外壳会延伸到分页区域，左边框改由实际表头/数据行首列绘制，避免少量数据时边框悬空。
+.el-table.is-full-height-table.el-table--border {
+  border-left: 0;
+
+  > .el-table__inner-wrapper > .el-table__header-wrapper,
+  > .el-table__inner-wrapper > .el-table__body-wrapper,
+  > .el-table__inner-wrapper > .el-table__footer-wrapper {
+    tr > .el-table__cell:first-child {
+      border-left: var(--el-table-border);
+    }
+  }
+}
+
+// --- 表格内操作列：固定宽按钮、下拉链接色 ---
+.el-table .fixed-width .el-button--small {
+  padding-left: 0;
+  padding-right: 0;
+  width: inherit;
+}
+
+.el-table .el-dropdown-link {
+  cursor: pointer;
+  color: var(--el-color-primary);
+  margin-left: 10px;
+}
+
+.el-table {
+  .el-table__header-wrapper,
+  .el-table__fixed-header-wrapper {
+    th {
+      word-break: break-word;
+      background-color: $table-header-bg !important;
+      color: $table-header-text-color;
+      height: 40px !important;
+      font-size: 13px;
+    }
+  }
+
+  .el-table__body-wrapper {
+    .el-button [class*='el-icon-'] + span {
+      margin-left: 1px;
+    }
+  }
+}
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
new file mode 100644
index 0000000..791ae5f
--- /dev/null
+++ b/src/components/Breadcrumb/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">
+          {{ item.meta?.title }}
+        </span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta?.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script setup lang="ts">
+import { RouteLocationMatched } from 'vue-router';
+import { usePermissionStore } from '@/store/modules/permission';
+
+const route = useRoute();
+const router = useRouter();
+const permissionStore = usePermissionStore();
+const levelList = ref<RouteLocationMatched[]>([]);
+
+const getBreadcrumb = () => {
+  // only show routes with meta.title
+  let matched = [];
+  const pathNum = findPathNum(route.path);
+  // multi-level menu
+  if (pathNum > 2) {
+    const reg = /\/\w+/gi;
+    const pathList = route.path.match(reg).map((item, index) => {
+      if (index !== 0) item = item.slice(1);
+      return item;
+    });
+    getMatched(pathList, permissionStore.defaultRoutes, matched);
+  } else {
+    matched = route.matched.filter(item => item.meta && item.meta.title);
+  }
+  // 判断是否为首页
+  if (!isDashboard(matched[0])) {
+    matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched);
+  }
+  levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false);
+};
+const findPathNum = (str, char = '/') => {
+  if (typeof str !== 'string' || str.length === 0) return 0;
+  return str.split(char).length - 1;
+};
+const getMatched = (pathList, routeList, matched) => {
+  const data = routeList.find(item => item.path == pathList[0] || (item.name += '').toLowerCase() == pathList[0]);
+  if (data) {
+    matched.push(data);
+    if (data.children && pathList.length) {
+      pathList.shift();
+      getMatched(pathList, data.children, matched);
+    }
+  }
+};
+const isDashboard = (route: RouteLocationMatched) => {
+  const name = route && (route.name as string);
+  if (!name) {
+    return false;
+  }
+  return name.trim() === 'Index';
+};
+const handleLink = item => {
+  const { redirect, path } = item;
+  redirect ? router.push(redirect) : router.push(path);
+};
+
+watchEffect(() => {
+  // if you go to the redirect page, do not update the breadcrumbs
+  if (route.path.startsWith('/redirect/')) return;
+  getBreadcrumb();
+});
+onMounted(() => {
+  getBreadcrumb();
+});
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 13px;
+  line-height: 1.2;
+  margin-left: 4px;
+  color: var(--app-text-muted);
+
+  :deep(.el-breadcrumb__inner) {
+    color: inherit;
+    font-weight: 500;
+  }
+
+  .no-redirect {
+    color: var(--app-text-title);
+    cursor: text;
+  }
+}
+</style>
diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue
new file mode 100644
index 0000000..6e705a2
--- /dev/null
+++ b/src/components/DictTag/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <template v-for="(item, index) in options">
+      <template v-if="isValueMatch(item.value)">
+        <span
+          v-if="
+            ((item.elTagType as string) === 'default' || (item.elTagType as string) === '') &&
+            (item.elTagClass === '' || item.elTagClass == null)
+          "
+          :key="item.value"
+          :index="index"
+          :class="item.elTagClass"
+        >
+          {{ item.label + ' ' }}
+        </span>
+        <el-tag
+          v-else
+          :key="item.value + ''"
+          :disable-transitions="true"
+          :index="index"
+          :type="
+            item.elTagType === 'primary' ||
+            item.elTagType === 'success' ||
+            item.elTagType === 'info' ||
+            item.elTagType === 'warning' ||
+            item.elTagType === 'danger'
+              ? item.elTagType
+              : 'primary'
+          "
+          :class="item.elTagClass"
+        >
+          {{ item.label + ' ' }}
+        </el-tag>
+      </template>
+    </template>
+    <template v-if="unmatch && showValue">
+      {{ unmatchArray }}
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  options: Array<DictDataOption>;
+  value: number | string | Array<number | string>;
+  showValue?: boolean;
+  separator?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  showValue: true,
+  separator: ','
+});
+
+const values = computed(() => {
+  if (props.value === '' || props.value === null || typeof props.value === 'undefined') return [];
+  if (typeof props.value === 'number' || typeof props.value === 'boolean') return [props.value];
+  return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator);
+});
+
+const unmatch = computed(() => {
+  if (props.options?.length == 0 || props.value === '' || props.value === null || typeof props.value === 'undefined')
+    return false;
+  // 传入值为非数组
+  let unmatch = false; // 添加一个标志来判断是否有未匹配项
+  values.value.forEach(item => {
+    if (!props.options.some(v => v.value == item)) {
+      unmatch = true; // 如果有未匹配项，将标志设置为true
+    }
+  });
+  return unmatch; // 返回标志的值
+});
+
+const unmatchArray = computed(() => {
+  // 记录未匹配的项
+  const itemUnmatchArray: Array<string | number> = [];
+  if (props.value !== '' && props.value !== null && typeof props.value !== 'undefined') {
+    values.value.forEach(item => {
+      if (!props.options.some(v => v.value === item)) {
+        itemUnmatchArray.push(item);
+      }
+    });
+  }
+  // 没有value不显示
+  return handleArray(itemUnmatchArray);
+});
+
+const handleArray = (array: Array<string | number>) => {
+  if (array.length === 0) return '';
+  return array.reduce((pre, cur) => {
+    return pre + ' ' + cur;
+  });
+};
+
+const isValueMatch = (itemValue: any) => {
+  return values.value.some(val => val == itemValue);
+};
+</script>
+
+<style lang="scss" scoped>
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+</style>
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
new file mode 100644
index 0000000..d9c2371
--- /dev/null
+++ b/src/components/Editor/index.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="editor-shell">
+    <EditorToolbar :editor="editorRef" :default-config="toolbarConfig" mode="default" class="editor-toolbar" />
+    <div class="editor-body" :style="styles">
+      <WangEditor
+        v-model="content"
+        :default-config="editorConfig"
+        mode="default"
+        class="editor-content"
+        @onCreated="handleCreated"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import '@wangeditor-next/editor/dist/css/style.css';
+import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor-next/editor';
+import { Editor as WangEditor, Toolbar as EditorToolbar } from '@wangeditor-next/editor-for-vue';
+import { listByIds } from '@/api/system/oss';
+import modal from '@/plugins/modal';
+import { propTypes } from '@/utils/propTypes';
+import { globalHeaders } from '@/utils/request';
+
+const OSS_MARKER_RE = /oss:\/\/([\w-]+)/g;
+const props = defineProps({
+  /* 编辑器的内容 */
+  modelValue: propTypes.string,
+  /* 高度 */
+  height: propTypes.number.def(400),
+  /* 最小高度 */
+  minHeight: propTypes.number.def(400),
+  /* 只读 */
+  readOnly: propTypes.bool.def(false),
+  /* 图片上传文件大小限制(MB) */
+  fileSize: propTypes.number.def(5),
+  /* 视频上传文件大小限制(MB) */
+  videoSize: propTypes.number.def(100),
+  /* 类型（base64格式、url格式） url模式下存储 oss://ossId 标记，展示时通过后端动态解析为可用URL */
+  type: propTypes.string.def('url')
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const editorRef = shallowRef<IDomEditor>();
+const content = ref('');
+
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadOssUrl = baseUrl + '/resource/oss/upload';
+
+// URL → ossId 映射，在上传和解析阶段填充
+const ossUrlToId = new Map<string, string>();
+// 防止 modelValue ↔ content 双向 watch 循环
+const isResolvingContent = ref(false);
+// 记录最后一次 encode 后 emit 的值，用于跳过自身触发的 modelValue 变更
+const lastEncodedValue = ref('');
+
+const styles = computed(() => {
+  const style: Record<string, string> = {};
+  if (props.minHeight) {
+    style.minHeight = `${props.minHeight}px`;
+  }
+  if (props.height) {
+    style.height = `${props.height}px`;
+  }
+  return style;
+});
+
+const toolbarConfig = computed<Partial<IToolbarConfig>>(() => {
+  const excludeKeys = ['fullScreen'];
+
+  if (!props.type) {
+    excludeKeys.push('uploadImage');
+    excludeKeys.push('uploadVideo');
+  }
+
+  return {
+    modalAppendToBody: false,
+    excludeKeys
+  };
+});
+
+/* ==================== OSS 上传 & 内容转换 ==================== */
+
+const uploadToOss = async (file: File): Promise<{ url: string; fileName: string; ossId: string }> => {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const res = await fetch(uploadOssUrl, {
+    method: 'POST',
+    headers: globalHeaders(),
+    body: formData
+  });
+  const data = await res.json();
+
+  if (data.code === 200) {
+    ossUrlToId.set(data.data.url, String(data.data.ossId));
+    return data.data;
+  }
+  throw new Error(data.msg || '上传失败');
+};
+
+/**
+ * 编码：将编辑器内容中的 OSS 真实 URL 替换为 oss://ossId 标记（用于存储）
+ */
+const encodeOssContent = (html: string): string => {
+  if (!html) return html;
+  let result = html;
+  for (const [url, ossId] of ossUrlToId) {
+    result = result.replaceAll(url, `oss://${ossId}`);
+  }
+  return result;
+};
+
+/**
+ * 解码：将存储的 oss://ossId 标记批量替换为真实可用 URL（用于编辑/展示）
+ */
+const decodeOssContent = async (html: string): Promise<string> => {
+  if (!html) return html;
+
+  const matches = [...html.matchAll(OSS_MARKER_RE)];
+  if (matches.length === 0) return html;
+
+  const ossIds = [...new Set(matches.map(m => m[1]))];
+
+  try {
+    const res = await listByIds(ossIds.join(','));
+    let result = html;
+    for (const oss of res.data) {
+      const id = String(oss.ossId);
+      ossUrlToId.set(oss.url, id);
+      result = result.replaceAll(`oss://${id}`, oss.url);
+    }
+    return result;
+  } catch {
+    return html;
+  }
+};
+
+/* ==================== 文件校验 ==================== */
+
+const validateImageFile = (file: File) => {
+  const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg', 'image/svg+xml'];
+  if (!allowedTypes.includes(file.type)) {
+    modal.msgError('图片格式错误!');
+    return false;
+  }
+
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      modal.msgError(`上传图片大小不能超过 ${props.fileSize} MB!`);
+      return false;
+    }
+  }
+
+  return true;
+};
+
+const validateVideoFile = (file: File) => {
+  const allowedTypes = ['video/mp4', 'video/webm', 'video/ogg'];
+  if (!allowedTypes.includes(file.type)) {
+    modal.msgError('视频格式错误, 请上传 mp4/webm/ogg 格式!');
+    return false;
+  }
+
+  if (props.videoSize) {
+    const isLt = file.size / 1024 / 1024 < props.videoSize;
+    if (!isLt) {
+      modal.msgError(`上传视频大小不能超过 ${props.videoSize} MB!`);
+      return false;
+    }
+  }
+
+  return true;
+};
+
+/* ==================== wangeditor 菜单配置 ==================== */
+
+const getUploadImageMenuConfig = () => {
+  if (props.type === 'base64') {
+    return {
+      allowedFileTypes: ['image/jpeg', 'image/jpg', 'image/png', 'image/svg+xml'],
+      customUpload(file: File, insertFn: (url: string, alt?: string, href?: string) => void) {
+        if (!validateImageFile(file)) return;
+
+        modal.loading('正在上传图片，请稍候...');
+        const reader = new FileReader();
+
+        reader.onload = () => {
+          insertFn(reader.result as string, file.name);
+          modal.closeLoading();
+        };
+
+        reader.onerror = () => {
+          modal.msgError('图片插入失败');
+          modal.closeLoading();
+        };
+
+        reader.readAsDataURL(file);
+      }
+    };
+  }
+
+  return {
+    allowedFileTypes: ['image/jpeg', 'image/jpg', 'image/png', 'image/svg+xml'],
+    async customUpload(file: File, insertFn: (url: string, alt?: string, href?: string) => void) {
+      if (!validateImageFile(file)) return;
+
+      modal.loading('正在上传图片，请稍候...');
+      try {
+        const result = await uploadToOss(file);
+        insertFn(result.url, file.name, result.url);
+      } catch {
+        modal.msgError('图片上传失败');
+      } finally {
+        modal.closeLoading();
+      }
+    }
+  };
+};
+
+const getUploadVideoMenuConfig = () => ({
+  allowedFileTypes: ['video/mp4', 'video/webm', 'video/ogg'],
+  async customUpload(file: File, insertFn: (url: string, poster?: string) => void) {
+    if (!validateVideoFile(file)) return;
+
+    modal.loading('正在上传视频，请稍候...');
+    try {
+      const result = await uploadToOss(file);
+      insertFn(result.url);
+    } catch {
+      modal.msgError('视频上传失败');
+    } finally {
+      modal.closeLoading();
+    }
+  }
+});
+
+const editorConfig = computed<Partial<IEditorConfig>>(() => ({
+  placeholder: '请输入内容',
+  autoFocus: false,
+  MENU_CONF: {
+    uploadImage: getUploadImageMenuConfig() as any,
+    uploadVideo: getUploadVideoMenuConfig() as any
+  }
+}));
+
+/* ==================== 双向数据绑定 ==================== */
+
+const syncReadOnly = () => {
+  const editor = editorRef.value;
+  if (!editor) {
+    return;
+  }
+
+  if (props.readOnly) {
+    editor.disable();
+  } else {
+    editor.enable();
+  }
+};
+
+watch(
+  () => props.modelValue,
+  async value => {
+    const nextValue = value || '';
+
+    // 跳过由自身 emit 引起的回传
+    if (nextValue === lastEncodedValue.value) return;
+
+    isResolvingContent.value = true;
+    const resolved = await decodeOssContent(nextValue);
+    if (resolved !== content.value) {
+      content.value = resolved;
+    }
+    nextTick(() => {
+      isResolvingContent.value = false;
+    });
+  },
+  { immediate: true }
+);
+
+watch(content, value => {
+  if (isResolvingContent.value) return;
+
+  const encoded = encodeOssContent(value);
+  lastEncodedValue.value = encoded;
+  if (encoded !== props.modelValue) {
+    emit('update:modelValue', encoded);
+  }
+});
+
+watch(
+  () => props.readOnly,
+  () => {
+    syncReadOnly();
+  }
+);
+
+const handleCreated = (editor: IDomEditor) => {
+  editorRef.value = editor;
+  syncReadOnly();
+};
+
+onBeforeUnmount(() => {
+  editorRef.value?.destroy();
+});
+</script>
+
+<style scoped>
+.editor-shell {
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--el-border-radius-base);
+  overflow: hidden;
+  background: var(--el-bg-color);
+}
+
+.editor-toolbar {
+  border-bottom: 1px solid var(--el-border-color);
+}
+
+.editor-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-content {
+  height: 100%;
+}
+
+.editor-shell :deep(.w-e-toolbar) {
+  border: 0 !important;
+  background-color: transparent;
+}
+
+.editor-shell :deep(.w-e-text-container) {
+  border: 0 !important;
+  background-color: transparent;
+}
+
+.editor-shell :deep(.w-e-text-container [data-slate-editor]) {
+  min-height: inherit;
+}
+</style>
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
new file mode 100644
index 0000000..9b5393e
--- /dev/null
+++ b/src/components/FileUpload/index.vue
@@ -0,0 +1,261 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      ref="fileUploadRef"
+      multiple
+      :action="uploadFileUrl"
+      :before-upload="handleBeforeUpload"
+      :data="uploadData"
+      :file-list="fileList"
+      :limit="limit"
+      :accept="fileAccept"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :show-file-list="false"
+      :headers="headers"
+      class="upload-file-uploader"
+      v-if="!disabled"
+    >
+      <!-- 上传按钮 -->
+      <el-button type="primary">选取文件</el-button>
+    </el-upload>
+    <!-- 上传提示 -->
+    <div v-if="showTip && !disabled" class="el-upload__tip">
+      请上传
+      <template v-if="fileSize">
+        大小不超过
+        <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      </template>
+      <template v-if="fileType">
+        格式为
+        <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
+      </template>
+      的文件
+    </div>
+    <!-- 文件列表 -->
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
+        <el-link :href="`${file.url}`" underline="never" target="_blank">
+          <span class="el-icon-document">{{ getFileName(file.name) }}</span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
+        </div>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { delOss, listByIds } from '@/api/system/oss';
+import type { SysOssExt } from '@/api/system/oss/types';
+import modal from '@/plugins/modal';
+import { propTypes } from '@/utils/propTypes';
+import { globalHeaders } from '@/utils/request';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Object, Array],
+    default: () => []
+  },
+  // 数量限制
+  limit: propTypes.number.def(5),
+  // 大小限制(MB)
+  fileSize: propTypes.number.def(5),
+  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']),
+  // 是否显示提示
+  isShowTip: propTypes.bool.def(true),
+  // 禁用组件（仅查看文件）
+  disabled: propTypes.bool.def(false),
+  // 上传扩展属性
+  ossExt: {
+    type: Object as PropType<SysOssExt>,
+    default: undefined
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+const number = ref(0);
+const uploadList = ref<any[]>([]);
+
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
+const headers = computed(() => globalHeaders());
+
+const fileList = ref<any[]>([]);
+const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
+
+const fileUploadRef = ref<ElUploadInstance>();
+
+// 上传附加数据（ossExt 扩展属性）
+const uploadData = computed(() => {
+  if (!props.ossExt) return {};
+  return {
+    ossExt: JSON.stringify(props.ossExt)
+  }
+});
+
+// 监听 fileType 变化，更新 fileAccept
+const fileAccept = computed(() => props.fileType.map(type => `.${type}`).join(','));
+
+watch(
+  () => props.modelValue,
+  async val => {
+    if (val) {
+      let temp = 1;
+      // 首先将值转为数组
+      let list: any[] = [];
+      if (Array.isArray(val)) {
+        list = val;
+      } else if (typeof val === 'string' || typeof val === 'number') {
+        const res = await listByIds(val);
+        list = res.data.map(oss => {
+          return {
+            name: oss.originalName,
+            url: oss.url,
+            ossId: oss.ossId
+          };
+        });
+      } else {
+        list = [];
+      }
+      // 然后将数组转为对象数组
+      fileList.value = list.map(item => {
+        item = { name: item.name, url: item.url, ossId: item.ossId };
+        item.uid = item.uid || new Date().getTime() + temp++;
+        return item;
+      });
+    } else {
+      fileList.value = [];
+      return [];
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+// 上传前校检格式和大小
+const handleBeforeUpload = (file: any) => {
+  // 校检文件类型
+  if (props.fileType.length) {
+    const fileName = file.name.split('.');
+    const fileExt = fileName[fileName.length - 1];
+    const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
+    if (!isTypeOk) {
+      modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
+      return false;
+    }
+  }
+  // 校检文件名是否包含特殊字符
+  if (file.name.includes(',')) {
+    modal.msgError('文件名不正确，不能包含英文逗号!');
+    return false;
+  }
+  // 校检文件大小
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+      return false;
+    }
+  }
+  modal.loading('正在上传文件，请稍候...');
+  number.value++;
+  return true;
+};
+
+// 文件个数超出
+const handleExceed = () => {
+  modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+};
+
+// 上传失败
+const handleUploadError = () => {
+  modal.msgError('上传文件失败');
+  modal.closeLoading();
+};
+
+// 上传成功回调
+const handleUploadSuccess = (res: any, file: UploadFile) => {
+  if (res.code === 200) {
+    uploadList.value.push({
+      name: res.data.fileName,
+      url: res.data.url,
+      ossId: res.data.ossId
+    });
+    uploadedSuccessfully();
+  } else {
+    number.value--;
+    modal.closeLoading();
+    modal.msgError(res.msg);
+    fileUploadRef.value?.handleRemove(file);
+    uploadedSuccessfully();
+  }
+};
+
+// 删除文件
+const handleDelete = (index: number) => {
+  const ossId = fileList.value[index].ossId;
+  delOss(ossId);
+  fileList.value.splice(index, 1);
+  emit('update:modelValue', listToString(fileList.value));
+};
+
+// 上传结束处理
+const uploadedSuccessfully = () => {
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    emit('update:modelValue', listToString(fileList.value));
+    modal.closeLoading();
+  }
+};
+
+// 获取文件名称
+const getFileName = (name: string) => {
+  // 如果是url那么取最后的名字 如果不是直接返回
+  if (name.lastIndexOf('/') > -1) {
+    return name.slice(name.lastIndexOf('/') + 1);
+  } else {
+    return name;
+  }
+};
+
+// 对象转成指定字符串分隔
+const listToString = (list: any[], separator?: string) => {
+  let strs = '';
+  separator = separator || ',';
+  list.forEach(item => {
+    if (item.ossId) {
+      strs += item.ossId + separator;
+    }
+  });
+  return strs != '' ? strs.substring(0, strs.length - 1) : '';
+};
+</script>
+
+<style lang="scss" scoped>
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
new file mode 100644
index 0000000..9cda5f0
--- /dev/null
+++ b/src/components/Hamburger/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div style="padding: 0 15px" @click="toggleClick">
+    <svg
+      :class="{ 'is-active': isActive }"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path
+        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 8zm-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 8v56zm504-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-8zm0 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-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
+defineProps({
+  isActive: propTypes.bool.def(false)
+});
+
+const emit = defineEmits(['toggleClick']);
+const toggleClick = () => {
+  emit('toggleClick');
+};
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
new file mode 100644
index 0000000..d676a6c
--- /dev/null
+++ b/src/components/IconSelect/index.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="relative" :style="{ width: width }">
+    <el-input v-model="modelValue" readonly placeholder="点击选择图标" @click="visible = !visible">
+      <template #prepend>
+        <svg-icon :icon-class="modelValue" />
+      </template>
+    </el-input>
+
+    <el-popover shadow="none" :visible="visible" placement="bottom-end" trigger="click" :width="450">
+      <template #reference>
+        <div
+          class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]"
+          @click="visible = !visible"
+        >
+          <CaretTop v-show="visible" />
+          <CaretBottom v-show="!visible" />
+        </div>
+      </template>
+
+      <el-input v-model="filterValue" class="p-2" placeholder="搜索图标" clearable @input="filterIcons" />
+
+      <div class="iconify-panel">
+        <div class="iconify-heading">也可以直接输入 Iconify 图标名</div>
+        <div class="iconify-form">
+          <el-input
+            v-model="customIcon"
+            placeholder="例如：mdi:account-circle-outline"
+            clearable
+            @keyup.enter="applyCustomIcon"
+          />
+          <el-button type="primary" plain @click="applyCustomIcon">使用</el-button>
+        </div>
+      </div>
+
+      <el-scrollbar height="w-[200px]">
+        <ul class="icon-list">
+          <el-tooltip
+            v-for="(iconName, index) in iconNames"
+            :key="index"
+            :content="iconName"
+            placement="bottom"
+            effect="light"
+            :teleported="false"
+            :enterable="false"
+          >
+            <li :class="['icon-item', { active: modelValue == iconName }]" @click="selectedIcon(iconName)">
+              <svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" />
+            </li>
+          </el-tooltip>
+        </ul>
+      </el-scrollbar>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import icons from '@/components/IconSelect/requireIcons';
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+  modelValue: propTypes.string.isRequired,
+  width: propTypes.string.def('400px')
+});
+
+const emit = defineEmits(['update:modelValue']);
+const visible = ref(false);
+const { modelValue, width } = toRefs(props);
+const iconNames = ref<string[]>(icons);
+
+const filterValue = ref('');
+const customIcon = ref('');
+
+/**
+ * 筛选图标
+ */
+const filterIcons = () => {
+  if (filterValue.value) {
+    iconNames.value = icons.filter(iconName => iconName.includes(filterValue.value));
+  } else {
+    iconNames.value = icons;
+  }
+};
+/**
+ * 选择图标
+ * @param iconName 选择的图标名称
+ */
+const selectedIcon = (iconName: string) => {
+  emit('update:modelValue', iconName);
+  visible.value = false;
+};
+
+const applyCustomIcon = () => {
+  const value = customIcon.value.trim();
+  if (!value) return;
+  emit('update:modelValue', value);
+  visible.value = false;
+};
+
+watch(
+  () => props.modelValue,
+  value => {
+    customIcon.value = value?.includes(':') ? value : '';
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.el-scrollbar {
+  max-height: calc(50vh - 100px) !important;
+  overflow-y: auto;
+}
+.el-divider--horizontal {
+  margin: 10px auto !important;
+}
+
+.iconify-panel {
+  padding: 2px 4px 12px;
+}
+
+.iconify-heading {
+  margin-bottom: 8px;
+  color: var(--app-text-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.iconify-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+}
+
+.icon-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+  gap: 8px;
+  padding: 4px;
+  margin-top: 10px;
+
+  .icon-item {
+    cursor: pointer;
+    min-height: 44px;
+    padding: 8px 6px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--app-surface-border);
+    border-radius: 12px;
+    background: var(--app-surface-bg);
+    transition:
+      border-color 0.2s ease,
+      background-color 0.2s ease,
+      color 0.2s ease,
+      transform 0.2s ease;
+
+    &:hover {
+      border-color: var(--el-color-primary);
+      background: var(--app-accent-soft);
+      color: var(--el-color-primary);
+      transform: translateY(-1px);
+    }
+  }
+
+  .active {
+    border-color: var(--el-color-primary);
+    background: rgba(64, 158, 255, 0.12);
+    color: var(--el-color-primary);
+  }
+}
+</style>
diff --git a/src/components/IconSelect/requireIcons.ts b/src/components/IconSelect/requireIcons.ts
new file mode 100644
index 0000000..9f06d69
--- /dev/null
+++ b/src/components/IconSelect/requireIcons.ts
@@ -0,0 +1,7 @@
+const icons: string[] = [];
+const modules = import.meta.glob('./../../assets/icons/svg/*.svg');
+for (const path in modules) {
+  const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
+  icons.push(p);
+}
+export default icons;
diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
new file mode 100644
index 0000000..9beada2
--- /dev/null
+++ b/src/components/ImagePreview/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-image
+    :src="`${realSrc}`"
+    fit="cover"
+    :style="`width:${realWidth};height:${realHeight};`"
+    :preview-src-list="realSrcList"
+    preview-teleported
+  >
+    <template #error>
+      <div class="image-slot">
+        <el-icon><picture-filled /></el-icon>
+      </div>
+    </template>
+  </el-image>
+</template>
+
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+  src: propTypes.string.def(''),
+  width: {
+    type: [Number, String],
+    default: ''
+  },
+  height: {
+    type: [Number, String],
+    default: ''
+  }
+});
+
+const realSrc = computed(() => {
+  if (!props.src) {
+    return;
+  }
+  const real_src = props.src.split(',')[0];
+  return real_src;
+});
+
+const realSrcList = computed(() => {
+  if (!props.src) {
+    return [];
+  }
+  const real_src_list = props.src.split(',');
+  const srcList: string[] = [];
+  real_src_list.forEach((item: string) => {
+    if (item.trim() === '') {
+      return;
+    }
+    return srcList.push(item);
+  });
+  return srcList;
+});
+
+const realWidth = computed(() => (typeof props.width == 'string' ? props.width : `${props.width}px`));
+
+const realHeight = computed(() => (typeof props.height == 'string' ? props.height : `${props.height}px`));
+</script>
+
+<style lang="scss" scoped>
+.el-image {
+  border-radius: 5px;
+  background-color: var(--app-elevated-soft-bg);
+  box-shadow: var(--app-shadow-sm);
+
+  :deep(.el-image__inner) {
+    transition: all 0.3s;
+    cursor: pointer;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+
+  :deep(.image-slot) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #909399;
+    font-size: 30px;
+  }
+}
+</style>
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
new file mode 100644
index 0000000..1df5a5a
--- /dev/null
+++ b/src/components/ImageUpload/index.vue
@@ -0,0 +1,262 @@
+<template>
+  <div class="component-upload-image">
+    <el-upload
+      ref="imageUploadRef"
+      multiple
+      :action="uploadImgUrl"
+      list-type="picture-card"
+      :on-success="handleUploadSuccess"
+      :before-upload="handleBeforeUpload"
+      :data="uploadData"
+      :limit="limit"
+      :accept="fileAccept"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :before-remove="handleDelete"
+      :show-file-list="true"
+      :headers="headers"
+      :file-list="fileList"
+      :on-preview="handlePictureCardPreview"
+      :class="{ hide: fileList.length >= limit }"
+    >
+      <el-icon class="avatar-uploader-icon">
+        <plus />
+      </el-icon>
+    </el-upload>
+    <!-- 上传提示 -->
+    <div v-if="showTip" class="el-upload__tip">
+      请上传
+      <template v-if="fileSize">
+        大小不超过
+        <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      </template>
+      <template v-if="fileType">
+        格式为
+        <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
+      </template>
+      的文件
+    </div>
+
+    <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
+      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { compressAccurately } from 'image-conversion';
+import { listByIds, delOss } from '@/api/system/oss';
+import type { OssVO, SysOssExt } from '@/api/system/oss/types';
+import modal from '@/plugins/modal';
+import { propTypes } from '@/utils/propTypes';
+import { globalHeaders } from '@/utils/request';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Object, Array],
+    default: () => []
+  },
+  // 图片数量限制
+  limit: propTypes.number.def(5),
+  // 大小限制(MB)
+  fileSize: propTypes.number.def(5),
+  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: propTypes.array.def(['png', 'jpg', 'jpeg']),
+  // 是否显示提示
+  isShowTip: {
+    type: Boolean,
+    default: true
+  },
+  // 是否支持压缩，默认否
+  compressSupport: {
+    type: Boolean,
+    default: false
+  },
+  // 压缩目标大小，单位KB。默认300KB以上文件才压缩，并压缩至300KB以内
+  compressTargetSize: propTypes.number.def(300),
+  // 上传扩展属性
+  ossExt: {
+    type: Object as PropType<SysOssExt>,
+    default: undefined
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+const number = ref(0);
+const uploadList = ref<any[]>([]);
+const dialogImageUrl = ref('');
+const dialogVisible = ref(false);
+
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadImgUrl = ref(baseUrl + '/resource/oss/upload'); // 上传的图片服务器地址
+const headers = computed(() => globalHeaders());
+
+const fileList = ref<any[]>([]);
+const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
+
+const imageUploadRef = ref<ElUploadInstance>();
+
+// 上传附加数据（ossExt 扩展属性）
+const uploadData = computed(() => {
+  if (!props.ossExt) return {};
+  return {
+    ossExt: JSON.stringify(props.ossExt)
+  }
+});
+
+// 监听 fileType 变化，更新 fileAccept
+const fileAccept = computed(() => props.fileType.map(type => `.${type}`).join(','));
+
+watch(
+  () => props.modelValue,
+  async (val: string) => {
+    if (val) {
+      // 首先将值转为数组
+      let list: OssVO[] = [];
+      if (Array.isArray(val)) {
+        list = val as OssVO[];
+      } else {
+        const res = await listByIds(val);
+        list = res.data;
+      }
+      // 然后将数组转为对象数组
+      fileList.value = list.map(item => {
+        // 字符串回显处理 如果此处存的是url可直接回显 如果存的是id需要调用接口查出来
+        let itemData;
+        if (typeof item === 'string') {
+          itemData = { name: item, url: item };
+        } else {
+          // 此处name使用ossId 防止删除出现重名
+          itemData = { name: item.ossId, url: item.url, ossId: item.ossId };
+        }
+        return itemData;
+      });
+    } else {
+      fileList.value = [];
+      return [];
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+/** 上传前loading加载 */
+const handleBeforeUpload = (file: any) => {
+  let isImg = false;
+  if (props.fileType.length) {
+    let fileExtension = '';
+    if (file.name.lastIndexOf('.') > -1) {
+      fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
+    }
+    isImg = props.fileType.some((type: any) => {
+      if (file.type.indexOf(type) > -1) return true;
+      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+      return false;
+    });
+  } else {
+    isImg = file.type.indexOf('image') > -1;
+  }
+  if (!isImg) {
+    modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}图片格式文件!`);
+    return false;
+  }
+  if (file.name.includes(',')) {
+    modal.msgError('文件名不正确，不能包含英文逗号!');
+    return false;
+  }
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
+      return false;
+    }
+  }
+
+  //压缩图片，开启压缩并且大于指定的压缩大小时才压缩
+  if (props.compressSupport && file.size / 1024 > props.compressTargetSize) {
+    modal.loading('正在上传图片，请稍候...');
+    number.value++;
+    return compressAccurately(file, props.compressTargetSize);
+  } else {
+    modal.loading('正在上传图片，请稍候...');
+    number.value++;
+  }
+};
+
+// 文件个数超出
+const handleExceed = () => {
+  modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+};
+
+// 上传成功回调
+const handleUploadSuccess = (res: any, file: UploadFile) => {
+  if (res.code === 200) {
+    uploadList.value.push({
+      name: res.data.fileName,
+      url: res.data.url,
+      ossId: res.data.ossId
+    });
+    uploadedSuccessfully();
+  } else {
+    number.value--;
+    modal.closeLoading();
+    modal.msgError(res.msg);
+    imageUploadRef.value?.handleRemove(file);
+    uploadedSuccessfully();
+  }
+};
+
+// 删除图片
+const handleDelete = (file: UploadFile): boolean => {
+  const findex = fileList.value.map(f => f.name).indexOf(file.name);
+  if (findex > -1 && uploadList.value.length === number.value) {
+    const ossId = fileList.value[findex].ossId;
+    delOss(ossId);
+    fileList.value.splice(findex, 1);
+    emit('update:modelValue', listToString(fileList.value));
+    return false;
+  }
+  return true;
+};
+
+// 上传结束处理
+const uploadedSuccessfully = () => {
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    emit('update:modelValue', listToString(fileList.value));
+    modal.closeLoading();
+  }
+};
+
+// 上传失败
+const handleUploadError = () => {
+  modal.msgError('上传图片失败');
+  modal.closeLoading();
+};
+
+// 预览
+const handlePictureCardPreview = (file: any) => {
+  dialogImageUrl.value = file.url;
+  dialogVisible.value = true;
+};
+
+// 对象转成指定字符串分隔
+const listToString = (list: any[], separator?: string) => {
+  let strs = '';
+  separator = separator || ',';
+  for (const i in list) {
+    if (undefined !== list[i].ossId && list[i].url.indexOf('blob:') !== 0) {
+      strs += list[i].ossId + separator;
+    }
+  }
+  return strs != '' ? strs.substring(0, strs.length - 1) : '';
+};
+</script>
+
+<style lang="scss" scoped>
+// .el-upload--picture-card 控制加号部分
+:deep(.hide .el-upload--picture-card) {
+  display: none;
+}
+</style>
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
new file mode 100644
index 0000000..6245bdc
--- /dev/null
+++ b/src/components/LangSelect/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <el-dropdown trigger="click" @command="handleLanguageChange">
+    <div class="lang-select--style">
+      <svg-icon icon-class="language" />
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item :disabled="appStore.language === 'zh_CN'" command="zh_CN">中文</el-dropdown-item>
+        <el-dropdown-item :disabled="appStore.language === 'en_US'" command="en_US">English</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import { useAppStore } from '@/store/modules/app';
+
+const appStore = useAppStore();
+const { locale } = useI18n();
+
+const message: any = {
+  zh_CN: '切换语言成功！',
+  en_US: 'Switch Language Successful!'
+};
+const handleLanguageChange = (lang: any) => {
+  locale.value = lang;
+  appStore.changeLanguage(lang);
+  ElMessage.success(message[lang] || '切换语言成功！');
+};
+</script>
+
+<style lang="scss" scoped>
+.lang-select--style {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  :deep(.svg-icon) {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
new file mode 100644
index 0000000..f4e7f42
--- /dev/null
+++ b/src/components/Pagination/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <div :class="{ hidden: hidden }" class="pagination-container">
+    <el-pagination
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :background="background"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :pager-count="pagerCount"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script setup name="Pagination" lang="ts">
+import { propTypes } from '@/utils/propTypes';
+import { scrollTo } from '@/utils/scroll-to';
+
+const props = defineProps({
+  total: propTypes.number,
+  page: propTypes.number.def(1),
+  limit: propTypes.number.def(20),
+  pageSizes: { type: Array<number>, default: () => [10, 20, 30, 50] },
+  // 移动端页码按钮的数量端默认值5
+  pagerCount: propTypes.number.def(document.body.clientWidth < 992 ? 5 : 7),
+  layout: propTypes.string.def('total, sizes, prev, pager, next, jumper'),
+  background: propTypes.bool.def(true),
+  autoScroll: propTypes.bool.def(true),
+  hidden: propTypes.bool.def(false),
+  float: propTypes.string.def('right')
+});
+
+const emit = defineEmits(['update:page', 'update:limit', 'pagination']);
+const currentPage = computed({
+  get() {
+    return props.page;
+  },
+  set(val) {
+    emit('update:page', val);
+  }
+});
+const pageSize = computed({
+  get() {
+    return props.limit;
+  },
+  set(val) {
+    emit('update:limit', val);
+  }
+});
+function handleSizeChange(val: number) {
+  if (currentPage.value * val > props.total) {
+    currentPage.value = 1;
+  }
+  emit('pagination', { page: currentPage.value, limit: val });
+  if (props.autoScroll) {
+    scrollTo(0, 800);
+  }
+}
+function handleCurrentChange(val: number) {
+  emit('pagination', { page: val, limit: pageSize.value });
+  if (props.autoScroll) {
+    scrollTo(0, 800);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pagination-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-top: 10px;
+  margin-top: 18px;
+  border-top: 1px solid var(--app-surface-border);
+
+  .el-pagination {
+    float: none;
+  }
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>
diff --git a/src/components/ParentView/index.vue b/src/components/ParentView/index.vue
new file mode 100644
index 0000000..98240ae
--- /dev/null
+++ b/src/components/ParentView/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/src/components/Process/MessageType.vue b/src/components/Process/MessageType.vue
new file mode 100644
index 0000000..6e4d18e
--- /dev/null
+++ b/src/components/Process/MessageType.vue
@@ -0,0 +1,107 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="props.title"
+    width="50%"
+    draggable
+    :before-close="cancel"
+    center
+    :close-on-click-modal="false"
+  >
+    <el-form v-loading="loading" ref="ruleFormRef" :model="form" :rules="rules" label-width="120px">
+      <el-form-item label="消息提醒" prop="messageType">
+        <el-checkbox-group v-model="form.messageType">
+          <el-checkbox value="1" name="type" disabled>站内信</el-checkbox>
+          <el-checkbox value="2" name="type">邮件</el-checkbox>
+          <el-checkbox value="3" name="type">短信</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="消息内容" prop="message">
+        <el-input v-model="form.message" type="textarea" resize="none" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer" style="float: right; padding-bottom: 20px">
+        <el-button :disabled="buttonDisabled" type="primary" @click="submit(ruleFormRef)">确认</el-button>
+        <el-button :disabled="buttonDisabled" @click="cancel">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ElForm, FormInstance } from 'element-plus';
+import { ref } from 'vue';
+
+const emits = defineEmits(['submitCallback', 'cancelCallback']);
+const props = defineProps({
+  title: {
+    type: String,
+    default: '提示'
+  }
+});
+const ruleFormRef = ref<FormInstance>();
+//遮罩层
+const loading = ref(true);
+const visible = ref(false);
+const buttonDisabled = ref(true);
+const form = ref<Record<string, any>>({
+  message: undefined,
+  messageType: ['1']
+});
+const rules = reactive<Record<string, any>>({
+  messageType: [
+    {
+      required: true,
+      message: '请选择消息提醒',
+      trigger: 'change'
+    }
+  ],
+  message: [
+    {
+      required: true,
+      message: '请输入消息内容',
+      trigger: 'blur'
+    }
+  ]
+});
+//确认
+//打开弹窗
+const open = async () => {
+  reset();
+  visible.value = true;
+  loading.value = false;
+  buttonDisabled.value = false;
+};
+//关闭弹窗
+const close = async () => {
+  reset();
+  visible.value = false;
+};
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      emits('submitCallback', form.value);
+    }
+  });
+};
+//取消
+const cancel = async () => {
+  visible.value = false;
+  buttonDisabled.value = false;
+  emits('cancelCallback');
+};
+//重置
+const reset = async () => {
+  form.value.taskIdList = [];
+  form.value.message = '';
+  form.value.messageType = ['1'];
+};
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  open,
+  close
+});
+</script>
diff --git a/src/components/Process/UserNameDisplay.vue b/src/components/Process/UserNameDisplay.vue
new file mode 100644
index 0000000..3791d2e
--- /dev/null
+++ b/src/components/Process/UserNameDisplay.vue
@@ -0,0 +1,46 @@
+<template>
+  <el-tooltip :disabled="!displayText" :content="displayText || emptyText" effect="dark" placement="top-start">
+    <div class="user-name-display" :style="{ '--user-name-max-lines': maxLines }">
+      {{ displayText || emptyText }}
+    </div>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    content?: string | null;
+    emptyText?: string;
+    maxLines?: number;
+  }>(),
+  {
+    content: '',
+    emptyText: '无',
+    maxLines: 3
+  }
+);
+
+const displayText = computed(() =>
+  props.content
+    ?.split(',')
+    .map(item => item.trim())
+    .filter(Boolean)
+    .join('、') ?? ''
+);
+</script>
+
+<style lang="scss" scoped>
+.user-name-display {
+  display: -webkit-box;
+  overflow: hidden;
+  width: 100%;
+  line-height: 20px;
+  max-height: calc(20px * var(--user-name-max-lines));
+  white-space: normal;
+  word-break: break-all;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--user-name-max-lines);
+}
+</style>
diff --git a/src/components/Process/approvalButton.vue b/src/components/Process/approvalButton.vue
new file mode 100644
index 0000000..a2221c4
--- /dev/null
+++ b/src/components/Process/approvalButton.vue
@@ -0,0 +1,76 @@
+<template>
+  <div style="display: flex; justify-content: space-between">
+    <div>
+      <el-button v-if="submitButtonShow" :loading="props.buttonLoading" type="info" @click="submitForm('draft', mode)">
+        暂存
+      </el-button>
+      <el-button
+        v-if="submitButtonShow"
+        :loading="props.buttonLoading"
+        type="primary"
+        @click="submitForm('submit', mode)"
+      >
+        提 交
+      </el-button>
+      <el-button v-if="approvalButtonShow" :loading="props.buttonLoading" type="primary" @click="approvalVerifyOpen">
+        审批
+      </el-button>
+      <el-button v-if="props.id && props.status !== 'draft'" type="primary" @click="handleApprovalRecord">
+        流程进度
+      </el-button>
+      <slot />
+    </div>
+    <div>
+      <el-button style="float: right" @click="goBack()">返回</el-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import tab from '@/plugins/tab';
+import router from '@/router';
+import { propTypes } from '@/utils/propTypes';
+
+const route = useRoute();
+const props = defineProps({
+  status: propTypes.string.def(''),
+  pageType: propTypes.string.def(''),
+  buttonLoading: propTypes.bool.def(false),
+  id: propTypes.string.def('') || propTypes.number.def(),
+  mode: propTypes.bool.def(false)
+});
+const emits = defineEmits(['submitForm', 'approvalVerifyOpen', 'handleApprovalRecord']);
+//暂存，提交
+const submitForm = async (type, mode) => {
+  emits('submitForm', type, mode);
+};
+//审批
+const approvalVerifyOpen = async () => {
+  emits('approvalVerifyOpen');
+};
+//审批记录
+const handleApprovalRecord = () => {
+  emits('handleApprovalRecord');
+};
+
+//校验提交按钮是否显示
+const submitButtonShow = computed(() => {
+  return (
+    props.pageType === 'add' ||
+    (props.pageType === 'update' &&
+      props.status &&
+      (props.status === 'draft' || props.status === 'cancel' || props.status === 'back'))
+  );
+});
+
+//校验审批按钮是否显示
+const approvalButtonShow = computed(() => {
+  return props.pageType === 'approval' && props.status && props.status === 'waiting';
+});
+
+//返回
+const goBack = () => {
+  tab.closePage(route);
+  router.go(-1);
+};
+</script>
diff --git a/src/components/Process/approvalRecord.vue b/src/components/Process/approvalRecord.vue
new file mode 100644
index 0000000..b420906
--- /dev/null
+++ b/src/components/Process/approvalRecord.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="container">
+    <el-dialog
+      v-model="visible"
+      draggable
+      title="审批记录"
+      :width="props.width"
+      :height="props.height"
+      :close-on-click-modal="false"
+    >
+      <el-tabs v-model="tabActiveName" class="demo-tabs">
+        <el-tab-pane v-loading="loading" label="流程图" name="image" style="height: 68vh">
+          <flowChart :ins-id="insId" v-if="insId" />
+        </el-tab-pane>
+        <el-tab-pane v-loading="loading" label="审批信息" name="info">
+          <div>
+            <el-table :data="historyList" style="width: 100%" border fit>
+              <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
+              <el-table-column prop="nodeName" label="任务名称" sortable align="center"></el-table-column>
+              <el-table-column prop="approverName" label="办理人" sortable align="center" min-width="180">
+                <template #default="scope">
+                  <UserNameDisplay :content="scope.row.approverName" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="flowStatus" label="状态" width="80" sortable align="center">
+                <template #default="scope">
+                  <dict-tag :options="wf_task_status" :value="scope.row.flowStatus"></dict-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="message"
+                label="审批意见"
+                :show-overflow-tooltip="true"
+                sortable
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="createTime"
+                label="开始时间"
+                width="160"
+                :show-overflow-tooltip="true"
+                sortable
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="updateTime"
+                label="结束时间"
+                width="160"
+                :show-overflow-tooltip="true"
+                sortable
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="runDuration"
+                label="运行时长"
+                width="140"
+                :show-overflow-tooltip="true"
+                sortable
+                align="center"
+              ></el-table-column>
+              <el-table-column prop="attachmentList" width="120" label="附件" align="center">
+                <template #default="scope">
+                  <el-popover
+                    v-if="scope.row.attachmentList && scope.row.attachmentList.length > 0"
+                    placement="right"
+                    :width="310"
+                    trigger="click"
+                  >
+                    <template #reference>
+                      <el-button type="primary" style="margin-right: 16px">附件</el-button>
+                    </template>
+                    <el-table border :data="scope.row.attachmentList">
+                      <el-table-column
+                        prop="originalName"
+                        width="202"
+                        :show-overflow-tooltip="true"
+                        label="附件名称"
+                      ></el-table-column>
+                      <el-table-column prop="name" width="80" align="center" :show-overflow-tooltip="true" label="操作">
+                        <template #default="tool">
+                          <el-button type="text" @click="handleDownload(tool.row.ossId)">下载</el-button>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </el-popover>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { listByIds } from '@/api/system/oss';
+import { flowHisTaskList } from '@/api/workflow/instance';
+import FlowChart from '@/components/Process/flowChart.vue';
+import UserNameDisplay from '@/components/Process/UserNameDisplay.vue';
+import download from '@/plugins/download';
+import { useDict } from '@/utils/dict';
+import { propTypes } from '@/utils/propTypes';
+
+const { wf_task_status } = toRefs<any>(useDict('wf_task_status'));
+const props = defineProps({
+  width: propTypes.string.def('80%'),
+  height: propTypes.string.def('100%')
+});
+const loading = ref(false);
+const visible = ref(false);
+const historyList = ref<Array<any>>([]);
+const tabActiveName = ref('image');
+const insId = ref(null);
+
+//初始化查询审批记录
+const init = async (businessId: string | number) => {
+  visible.value = true;
+  loading.value = true;
+  tabActiveName.value = 'image';
+  historyList.value = [];
+  flowHisTaskList(businessId).then(resp => {
+    if (resp.data) {
+      historyList.value = resp.data.list;
+      insId.value = resp.data.instanceId;
+      if (historyList.value.length > 0) {
+        historyList.value.forEach(item => {
+          if (item.ext) {
+            getIds(item.ext).then(res => {
+              item.attachmentList = res.data;
+            });
+          } else {
+            item.attachmentList = [];
+          }
+        });
+      }
+      loading.value = false;
+    }
+  });
+};
+const getIds = async (ids: string | number) => {
+  const res = await listByIds(ids);
+  return res;
+};
+
+/** 下载按钮操作 */
+const handleDownload = (ossId: string) => {
+  download.oss(ossId);
+};
+
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  init
+});
+</script>
+<style lang="scss" scoped>
+.container {
+  :deep(.el-dialog .el-dialog__body) {
+    max-height: calc(100vh - 170px) !important;
+    min-height: calc(100vh - 170px) !important;
+  }
+}
+</style>
diff --git a/src/components/Process/flowChart.vue b/src/components/Process/flowChart.vue
new file mode 100644
index 0000000..7603375
--- /dev/null
+++ b/src/components/Process/flowChart.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <div style="height: 68vh" class="iframe-wrapper">
+      <iframe :src="iframeUrl" style="width: 100%; height: 100%" frameborder="0" scrolling="no" class="custom-iframe" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getToken } from '@/utils/auth';
+
+// Props 定义方式变化
+const props = defineProps({
+  insId: {
+    type: [String, Number],
+    default: null
+  }
+});
+
+const iframeUrl = ref('');
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+
+onMounted(async () => {
+  const url = baseUrl + `/warm-flow-ui/index.html?id=${props.insId}&type=FlowChart&t=${Date.now()}`;
+  iframeUrl.value = url + '&Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID;
+});
+</script>
+<style scoped>
+.iframe-wrapper {
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.custom-iframe {
+  width: 100%;
+  border: none;
+  background: transparent;
+}
+</style>
diff --git a/src/components/Process/flowChartImg.vue b/src/components/Process/flowChartImg.vue
new file mode 100644
index 0000000..b54f561
--- /dev/null
+++ b/src/components/Process/flowChartImg.vue
@@ -0,0 +1,160 @@
+<template>
+  <div
+    ref="imageWrapperRef"
+    class="image-wrapper"
+    @wheel="handleMouseWheel"
+    @mousedown="handleMouseDown"
+    @mousemove="handleMouseMove"
+    @mouseup="handleMouseUp"
+    @mouseleave="handleMouseLeave"
+    @dblclick="resetTransform"
+    :style="transformStyle"
+  >
+    <el-card class="box-card">
+      <el-image :src="props.imgUrl" class="scalable-image" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Props 定义方式变化
+const props = defineProps({
+  imgUrl: {
+    type: String,
+    default: () => ''
+  }
+});
+
+const imageWrapperRef = ref<HTMLElement | null>(null);
+const scale = ref(1); // 初始缩放比例
+const maxScale = 3; // 最大缩放比例
+const minScale = 0.5; // 最小缩放比例
+
+let isDragging = false;
+let startX = 0;
+let startY = 0;
+let currentTranslateX = 0;
+let currentTranslateY = 0;
+
+const handleMouseWheel = (event: WheelEvent) => {
+  event.preventDefault();
+  let newScale = scale.value - event.deltaY / 1000;
+  newScale = Math.max(minScale, Math.min(newScale, maxScale));
+  if (newScale !== scale.value) {
+    scale.value = newScale;
+    resetDragPosition(); // 重置拖拽位置，使图片居中
+  }
+};
+
+const handleMouseDown = (event: MouseEvent) => {
+  if (scale.value > 1) {
+    event.preventDefault(); // 阻止默认行为，防止拖拽
+    isDragging = true;
+    startX = event.clientX;
+    startY = event.clientY;
+  }
+};
+
+const handleMouseMove = (event: MouseEvent) => {
+  if (!isDragging || !imageWrapperRef.value) return;
+
+  const deltaX = event.clientX - startX;
+  const deltaY = event.clientY - startY;
+  startX = event.clientX;
+  startY = event.clientY;
+
+  currentTranslateX += deltaX;
+  currentTranslateY += deltaY;
+
+  // 边界检测，防止图片被拖出容器
+  const bounds = getBounds();
+  if (currentTranslateX > bounds.maxTranslateX) {
+    currentTranslateX = bounds.maxTranslateX;
+  } else if (currentTranslateX < bounds.minTranslateX) {
+    currentTranslateX = bounds.minTranslateX;
+  }
+
+  if (currentTranslateY > bounds.maxTranslateY) {
+    currentTranslateY = bounds.maxTranslateY;
+  } else if (currentTranslateY < bounds.minTranslateY) {
+    currentTranslateY = bounds.minTranslateY;
+  }
+
+  applyTransform();
+};
+
+const handleMouseUp = () => {
+  isDragging = false;
+};
+
+const handleMouseLeave = () => {
+  isDragging = false;
+};
+
+const resetTransform = () => {
+  scale.value = 1;
+  currentTranslateX = 0;
+  currentTranslateY = 0;
+  applyTransform();
+};
+
+const resetDragPosition = () => {
+  currentTranslateX = 0;
+  currentTranslateY = 0;
+  applyTransform();
+};
+
+const applyTransform = () => {
+  if (imageWrapperRef.value) {
+    imageWrapperRef.value.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${scale.value})`;
+  }
+};
+
+const getBounds = () => {
+  if (!imageWrapperRef.value)
+    return {
+      minTranslateX: 0,
+      maxTranslateX: 0,
+      minTranslateY: 0,
+      maxTranslateY: 0
+    };
+
+  const imgRect = imageWrapperRef.value.getBoundingClientRect();
+  const containerRect = imageWrapperRef.value.parentElement?.getBoundingClientRect() ?? imgRect;
+
+  const minTranslateX = (containerRect.width - imgRect.width * scale.value) / 2;
+  const maxTranslateX = -(containerRect.width - imgRect.width * scale.value) / 2;
+  const minTranslateY = (containerRect.height - imgRect.height * scale.value) / 2;
+  const maxTranslateY = -(containerRect.height - imgRect.height * scale.value) / 2;
+
+  return { minTranslateX, maxTranslateX, minTranslateY, maxTranslateY };
+};
+
+const transformStyle = computed(() => ({
+  transition: isDragging ? 'none' : 'transform 0.2s ease'
+}));
+</script>
+
+<style scoped>
+.image-wrapper {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none; /* 禁用文本选择 */
+  cursor: grab; /* 设置初始鼠标指针为可拖动 */
+}
+
+.image-wrapper:active {
+  cursor: grabbing; /* 当正在拖动时改变鼠标指针 */
+}
+
+.scalable-image {
+  object-fit: contain;
+  width: 100%;
+  padding: 15px;
+}
+</style>
diff --git a/src/components/Process/processMeddle.vue b/src/components/Process/processMeddle.vue
new file mode 100644
index 0000000..de8d5ef
--- /dev/null
+++ b/src/components/Process/processMeddle.vue
@@ -0,0 +1,254 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    draggable
+    title="流程干预"
+    :width="props.width"
+    :height="props.height"
+    :close-on-click-modal="false"
+  >
+    <el-descriptions
+      v-loading="loading"
+      class="margin-top"
+      :title="`${task.flowName}(${task.flowCode})`"
+      :column="2"
+      border
+    >
+      <el-descriptions-item label="任务名称">{{ task.nodeName }}</el-descriptions-item>
+      <el-descriptions-item label="节点编码">{{ task.nodeCode }}</el-descriptions-item>
+      <el-descriptions-item label="开始时间">{{ task.createTime }}</el-descriptions-item>
+      <el-descriptions-item label="流程实例ID">{{ task.instanceId }}</el-descriptions-item>
+      <el-descriptions-item label="版本号">{{ task.version }}.0</el-descriptions-item>
+      <el-descriptions-item label="业务ID">{{ task.businessId }}</el-descriptions-item>
+    </el-descriptions>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button
+          v-if="task.flowStatus === 'waiting'"
+          :disabled="buttonDisabled"
+          type="primary"
+          @click="openTransferTask"
+        >
+          转办
+        </el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0"
+          :disabled="buttonDisabled"
+          type="primary"
+          @click="openMultiInstanceUser"
+        >
+          加签
+        </el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0"
+          :disabled="buttonDisabled"
+          type="primary"
+          @click="handleTaskUser"
+        >
+          减签
+        </el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting'"
+          :disabled="buttonDisabled"
+          type="danger"
+          @click="handleTerminationTask"
+        >
+          终止
+        </el-button>
+      </span>
+    </template>
+    <!-- 转办 -->
+    <UserSelect ref="transferTaskRef" :multiple="false" @confirm-call-back="handleTransferTask"></UserSelect>
+    <!-- 加签组件 -->
+    <UserSelect ref="multiInstanceUserRef" :multiple="true" @confirm-call-back="addMultiInstanceUser"></UserSelect>
+    <el-dialog
+      v-model="deleteSignatureVisible"
+      draggable
+      title="减签人员"
+      width="700px"
+      height="400px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div>
+        <el-table :data="deleteUserList" border>
+          <el-table-column prop="nodeName" label="任务名称" />
+          <el-table-column prop="nickName" label="办理人" />
+          <el-table-column label="操作" align="center" width="160">
+            <template #default="scope">
+              <el-button type="danger" size="small" icon="Delete" @click="deleteMultiInstanceUser(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { getTask, taskOperation, currentTaskAllUser, terminationTask } from '@/api/workflow/task';
+import { FlowTaskVO, TaskOperationBo } from '@/api/workflow/task/types';
+import UserSelect from '@/components/UserSelect/index.vue';
+import modal from '@/plugins/modal';
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+  width: propTypes.string.def('50%'),
+  height: propTypes.string.def('100%')
+});
+const emits = defineEmits(['submitCallback']);
+const transferTaskRef = ref<InstanceType<typeof UserSelect>>();
+const multiInstanceUserRef = ref<InstanceType<typeof UserSelect>>();
+//遮罩层
+const loading = ref(true);
+//按钮
+const buttonDisabled = ref(true);
+const visible = ref(false);
+//减签弹窗
+const deleteSignatureVisible = ref(false);
+//可减签的人员
+const deleteUserList = ref<any>([]);
+//任务
+const task = ref<FlowTaskVO>({
+  id: undefined,
+  createTime: undefined,
+  updateTime: undefined,
+  tenantId: undefined,
+  definitionId: undefined,
+  instanceId: undefined,
+  flowName: undefined,
+  businessId: undefined,
+  nodeCode: undefined,
+  nodeName: undefined,
+  flowCode: undefined,
+  flowStatus: undefined,
+  formCustom: undefined,
+  formPath: undefined,
+  nodeType: undefined,
+  nodeRatio: undefined,
+  version: undefined,
+  applyNode: undefined,
+  buttonList: [],
+  businessCode: '',
+  businessTitle: ''
+} as FlowTaskVO);
+
+const open = (taskId: string) => {
+  visible.value = true;
+  getTask(taskId).then(response => {
+    loading.value = false;
+    buttonDisabled.value = false;
+    task.value = response.data;
+  });
+};
+
+//打开转办
+const openTransferTask = () => {
+  transferTaskRef.value.open();
+};
+//转办
+const handleTransferTask = async data => {
+  if (data && data.length > 0) {
+    const taskOperationBo = reactive<TaskOperationBo>({
+      userId: data[0].userId,
+      taskId: task.value.id,
+      message: '',
+      messageType: ['1']
+    });
+    await modal.confirm('是否确认提交？');
+    loading.value = true;
+    buttonDisabled.value = true;
+    await taskOperation(taskOperationBo, 'transferTask').finally(() => {
+      loading.value = false;
+      buttonDisabled.value = false;
+    });
+    visible.value = false;
+    emits('submitCallback');
+    modal.msgSuccess('操作成功');
+  } else {
+    modal.msgWarning('请选择用户！');
+  }
+};
+//加签
+const openMultiInstanceUser = async () => {
+  multiInstanceUserRef.value.open();
+};
+//加签
+const addMultiInstanceUser = async data => {
+  if (data && data.length > 0) {
+    const taskOperationBo = reactive<TaskOperationBo>({
+      userIds: data.map(e => e.userId),
+      taskId: task.value.id,
+      message: '',
+      messageType: ['1']
+    });
+    await modal.confirm('是否确认提交？');
+    loading.value = true;
+    buttonDisabled.value = true;
+    await taskOperation(taskOperationBo, 'addSignature').finally(() => {
+      loading.value = false;
+      buttonDisabled.value = false;
+    });
+    visible.value = false;
+    emits('submitCallback');
+    modal.msgSuccess('操作成功');
+  } else {
+    modal.msgWarning('请选择用户！');
+  }
+};
+//减签
+const deleteMultiInstanceUser = async row => {
+  await modal.confirm('是否确认提交？');
+  loading.value = true;
+  buttonDisabled.value = true;
+  const taskOperationBo = reactive<TaskOperationBo>({
+    userIds: [row.userId],
+    taskId: task.value.id,
+    message: '',
+    messageType: ['1']
+  });
+  await taskOperation(taskOperationBo, 'reductionSignature').finally(() => {
+    loading.value = false;
+    buttonDisabled.value = false;
+  });
+  visible.value = false;
+  emits('submitCallback');
+  modal.msgSuccess('操作成功');
+};
+//获取办理人
+const handleTaskUser = async () => {
+  const data = await currentTaskAllUser(task.value.id);
+  deleteUserList.value = data.data;
+  if (deleteUserList.value && deleteUserList.value.length > 0) {
+    deleteUserList.value.forEach(e => {
+      e.nodeName = task.value.nodeName;
+    });
+  }
+  deleteSignatureVisible.value = true;
+};
+
+//终止任务
+const handleTerminationTask = async () => {
+  const params = {
+    taskId: task.value.id,
+    comment: ''
+  };
+  await modal.confirm('是否确认终止？');
+  loading.value = true;
+  buttonDisabled.value = true;
+  await terminationTask(params).finally(() => {
+    loading.value = false;
+    buttonDisabled.value = false;
+  });
+  visible.value = false;
+  emits('submitCallback');
+  modal.msgSuccess('操作成功');
+};
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  open
+});
+</script>
diff --git a/src/components/Process/submitVerify.vue b/src/components/Process/submitVerify.vue
new file mode 100644
index 0000000..92baf45
--- /dev/null
+++ b/src/components/Process/submitVerify.vue
@@ -0,0 +1,604 @@
+<template>
+  <el-dialog
+    v-model="dialog.visible"
+    :title="dialog.title"
+    width="50%"
+    draggable
+    :before-close="cancel"
+    center
+    :close-on-click-modal="false"
+  >
+    <el-form v-loading="loading" :model="form" label-width="120px">
+      <el-form-item label="消息提醒">
+        <el-checkbox-group v-model="form.messageType">
+          <el-checkbox value="1" name="type" disabled>站内信</el-checkbox>
+          <el-checkbox value="2" name="type">邮件</el-checkbox>
+          <el-checkbox value="3" name="type">短信</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="附件" v-if="buttonObj.file">
+        <fileUpload
+          v-model="form.fileId"
+          :file-type="['png', 'jpg', 'jpeg', 'doc', 'docx', 'xlsx', 'xls', 'ppt', 'txt', 'pdf']"
+          :file-size="20"
+        />
+      </el-form-item>
+      <el-form-item label="抄送" v-if="buttonObj.copy">
+        <el-button type="primary" icon="Plus" circle @click="openUserSelectCopy" />
+        <el-tag
+          v-for="user in selectCopyUserList"
+          :key="user.userId"
+          closable
+          style="margin: 2px"
+          @close="handleCopyCloseTag(user)"
+        >
+          {{ user.nickName }}
+        </el-tag>
+      </el-form-item>
+      <el-form-item
+        v-if="buttonObj.pop && nestNodeList && nestNodeList.length > 0"
+        label="下一步审批人"
+        prop="assigneeMap"
+      >
+        <div v-for="(item, index) in nestNodeList" :key="index" style="margin-bottom: 5px; width: 500px">
+          <span>【{{ item.nodeName }}】：</span>
+          <el-input v-if="false" v-model="form.assigneeMap[item.nodeCode]" />
+          <el-input placeholder="请选择审批人" readonly v-model="nickName[item.nodeCode]">
+            <template v-slot:append>
+              <el-button @click="choosePeople(item)" icon="search">选择</el-button>
+            </template>
+          </el-input>
+        </div>
+      </el-form-item>
+      <el-form-item v-if="task.flowStatus === 'waiting'" label="审批意见">
+        <el-input v-model="form.message" type="textarea" resize="none" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button :disabled="buttonDisabled" type="primary" @click="handleCompleteTask">提交</el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting' && buttonObj.trust"
+          :disabled="buttonDisabled"
+          type="primary"
+          @click="openDelegateTask"
+        >
+          委托
+        </el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting' && buttonObj.transfer"
+          :disabled="buttonDisabled"
+          type="primary"
+          @click="openTransferTask"
+        >
+          转办
+        </el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0 && buttonObj.addSign"
+          :disabled="buttonDisabled"
+          type="primary"
+          @click="openMultiInstanceUser"
+        >
+          加签
+        </el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0 && buttonObj.subSign"
+          :disabled="buttonDisabled"
+          type="primary"
+          @click="handleTaskUser"
+        >
+          减签
+        </el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting' && buttonObj.termination"
+          :disabled="buttonDisabled"
+          type="danger"
+          @click="handleTerminationTask"
+        >
+          终止
+        </el-button>
+        <el-button
+          v-if="task.flowStatus === 'waiting' && buttonObj.back"
+          :disabled="buttonDisabled"
+          type="danger"
+          @click="handleBackProcessOpen"
+        >
+          退回
+        </el-button>
+        <el-button :disabled="buttonDisabled" @click="cancel">取消</el-button>
+      </span>
+    </template>
+    <!-- 抄送 -->
+    <UserSelect
+      ref="userSelectCopyRef"
+      :multiple="true"
+      :data="selectCopyUserIds"
+      @confirm-call-back="userSelectCopyCallBack"
+    ></UserSelect>
+    <!-- 转办 -->
+    <UserSelect ref="transferTaskRef" :multiple="false" @confirm-call-back="handleTransferTask"></UserSelect>
+    <!-- 委托 -->
+    <UserSelect ref="delegateTaskRef" :multiple="false" @confirm-call-back="handleDelegateTask"></UserSelect>
+    <!-- 加签组件 -->
+    <UserSelect ref="multiInstanceUserRef" :multiple="true" @confirm-call-back="addMultiInstanceUser"></UserSelect>
+    <!-- 弹窗选人 -->
+    <UserSelect
+      ref="porUserRef"
+      :data="form.assigneeMap[nodeCode]"
+      :multiple="true"
+      :userIds="popUserIds"
+      @confirm-call-back="handlePopUser"
+    ></UserSelect>
+
+    <!-- 驳回开始 -->
+    <el-dialog v-model="backVisible" draggable title="驳回" width="40%" :close-on-click-modal="false">
+      <el-form v-if="task.flowStatus === 'waiting'" v-loading="backLoading" :model="backForm" label-width="120px">
+        <el-form-item label="驳回节点">
+          <el-select v-model="backForm.nodeCode" clearable placeholder="请选择" style="width: 300px">
+            <el-option
+              v-for="item in taskNodeList"
+              :key="item.nodeCode"
+              :label="item.nodeName"
+              :value="item.nodeCode"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="消息提醒">
+          <el-checkbox-group v-model="backForm.messageType">
+            <el-checkbox value="1" name="type" disabled>站内信</el-checkbox>
+            <el-checkbox value="2" name="type">邮件</el-checkbox>
+            <el-checkbox value="3" name="type">短信</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item v-if="task.flowStatus === 'waiting'" label="附件">
+          <fileUpload
+            v-model="backForm.fileId"
+            :file-type="['png', 'jpg', 'jpeg', 'doc', 'docx', 'xlsx', 'xls', 'ppt', 'txt', 'pdf']"
+            :file-size="20"
+          />
+        </el-form-item>
+        <el-form-item label="审批意见">
+          <el-input v-model="backForm.message" type="textarea" resize="none" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer" style="float: right; padding-bottom: 20px">
+          <el-button :disabled="backButtonDisabled" type="primary" @click="handleBackProcess">确认</el-button>
+          <el-button :disabled="backButtonDisabled" @click="backVisible = false">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 驳回结束 -->
+    <el-dialog
+      v-model="deleteSignatureVisible"
+      draggable
+      title="减签人员"
+      width="700px"
+      height="400px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div>
+        <el-table :data="deleteUserList" border>
+          <el-table-column prop="nodeName" label="任务名称" />
+          <el-table-column prop="nickName" label="办理人" />
+          <el-table-column label="操作" align="center" width="160">
+            <template #default="scope">
+              <el-button type="danger" size="small" icon="Delete" @click="deleteMultiInstanceUser(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ElForm } from 'element-plus';
+import { ref } from 'vue';
+import {
+  completeTask,
+  backProcess,
+  getTask,
+  taskOperation,
+  terminationTask,
+  getBackTaskNode,
+  currentTaskAllUser,
+  getNextNodeList
+} from '@/api/workflow/task';
+import { FlowCopyVo, FlowTaskVO, TaskOperationBo } from '@/api/workflow/task/types';
+import UserSelect from '@/components/UserSelect/index.vue';
+import modal from '@/plugins/modal';
+
+const userSelectCopyRef = ref<InstanceType<typeof UserSelect>>();
+const transferTaskRef = ref<InstanceType<typeof UserSelect>>();
+const delegateTaskRef = ref<InstanceType<typeof UserSelect>>();
+const multiInstanceUserRef = ref<InstanceType<typeof UserSelect>>();
+const porUserRef = ref<InstanceType<typeof UserSelect>>();
+
+const props = defineProps({
+  taskVariables: {
+    type: Object as () => Record<string, any>,
+    default: () => ({})
+  }
+});
+//遮罩层
+const loading = ref(true);
+//按钮
+const buttonDisabled = ref(true);
+//任务id
+const taskId = ref<string>('');
+//抄送人
+const selectCopyUserList = ref<FlowCopyVo[]>([]);
+//抄送人id
+const selectCopyUserIds = ref<string>(undefined);
+//自定义节点变量
+const varNodeList = ref<Map<string, string>>(undefined);
+//可减签的人员
+const deleteUserList = ref<any>([]);
+//弹窗可选择的人员id
+const popUserIds = ref<any>([]);
+//驳回是否显示
+const backVisible = ref(false);
+const backLoading = ref(true);
+const backButtonDisabled = ref(true);
+// 可驳回得任务节点
+const taskNodeList = ref([]);
+const nickName = ref({});
+//节点编码
+const nodeCode = ref<string>('');
+const buttonObj = ref<any>({
+  pop: false,
+  trust: false,
+  transfer: false,
+  addSign: false,
+  subSign: false,
+  termination: false,
+  back: false
+});
+//下一节点列表
+const nestNodeList = ref([]);
+//任务
+const task = ref<FlowTaskVO>({
+  id: undefined,
+  createTime: undefined,
+  updateTime: undefined,
+  tenantId: undefined,
+  definitionId: undefined,
+  instanceId: undefined,
+  flowName: undefined,
+  businessId: undefined,
+  nodeCode: undefined,
+  nodeName: undefined,
+  flowCode: undefined,
+  flowStatus: undefined,
+  formCustom: undefined,
+  formPath: undefined,
+  nodeType: undefined,
+  nodeRatio: undefined,
+  applyNode: false,
+  buttonList: [],
+  copyList: [],
+  varList: undefined,
+  businessCode: undefined,
+  businessTitle: undefined
+});
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: '提示'
+});
+//减签弹窗
+const deleteSignatureVisible = ref(false);
+const form = ref<Record<string, any>>({
+  taskId: undefined,
+  message: undefined,
+  assigneeMap: {},
+  variables: {},
+  messageType: ['1'],
+  flowCopyList: []
+});
+const backForm = ref<Record<string, any>>({
+  taskId: undefined,
+  nodeCode: undefined,
+  message: undefined,
+  variables: {},
+  messageType: ['1']
+});
+
+//打开弹窗
+const openDialog = async (id?: string) => {
+  selectCopyUserIds.value = undefined;
+  selectCopyUserList.value = [];
+  form.value.fileId = undefined;
+  taskId.value = id;
+  form.value.message = undefined;
+  dialog.visible = true;
+  loading.value = true;
+  buttonDisabled.value = true;
+  const response = await getTask(taskId.value);
+  task.value = response.data;
+  buttonObj.value = {};
+  task.value.buttonList?.forEach(e => {
+    buttonObj.value[e.code] = e.show;
+  });
+  selectCopyUserList.value = task.value.copyList;
+  selectCopyUserIds.value = task.value.copyList.map(e => e.userId).join(',');
+  varNodeList.value = task.value.varList;
+  buttonDisabled.value = false;
+  try {
+    const data = {
+      taskId: taskId.value,
+      variables: props.taskVariables
+    };
+    const nextData = await getNextNodeList(data);
+    nestNodeList.value = nextData.data;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const emits = defineEmits(['submitCallback', 'cancelCallback']);
+
+/** 办理流程 */
+const handleCompleteTask = async () => {
+  form.value.taskId = taskId.value;
+  form.value.variables = props.taskVariables;
+  let verify = false;
+  if (buttonObj.value.pop && nestNodeList.value && nestNodeList.value.length > 0) {
+    nestNodeList.value.forEach(e => {
+      if (
+        Object.keys(form.value.assigneeMap).length === 0 ||
+        form.value.assigneeMap[e.nodeCode] === '' ||
+        form.value.assigneeMap[e.nodeCode] === null ||
+        form.value.assigneeMap[e.nodeCode] === undefined
+      ) {
+        verify = true;
+      }
+    });
+    if (verify) {
+      modal.msgWarning('请选择审批人！');
+      return false;
+    }
+  } else {
+    form.value.assigneeMap = {};
+  }
+  if (selectCopyUserList.value && selectCopyUserList.value.length > 0) {
+    const flowCopyList = [];
+    selectCopyUserList.value.forEach(e => {
+      const copyUser = {
+        userId: e.userId,
+        nickName: e.nickName
+      };
+      flowCopyList.push(copyUser);
+    });
+    form.value.flowCopyList = flowCopyList;
+  }
+  await modal.confirm('是否确认提交？');
+  loading.value = true;
+  buttonDisabled.value = true;
+  try {
+    await completeTask(form.value);
+    dialog.visible = false;
+    emits('submitCallback');
+    modal.msgSuccess('操作成功');
+  } finally {
+    loading.value = false;
+    buttonDisabled.value = false;
+  }
+};
+
+/** 驳回弹窗打开 */
+const handleBackProcessOpen = async () => {
+  backForm.value = {};
+  backForm.value.messageType = ['1'];
+  backVisible.value = true;
+  backLoading.value = true;
+  backButtonDisabled.value = true;
+  const data = await getBackTaskNode(task.value.id, task.value.nodeCode);
+  taskNodeList.value = data.data;
+  backLoading.value = false;
+  backButtonDisabled.value = false;
+  backForm.value.nodeCode = taskNodeList.value[0].nodeCode;
+};
+/** 驳回流程 */
+const handleBackProcess = async () => {
+  backForm.value.taskId = taskId.value;
+  await modal.confirm('是否确认驳回到申请人？');
+  loading.value = true;
+  backLoading.value = true;
+  backButtonDisabled.value = true;
+  await backProcess(backForm.value).finally(() => {
+    loading.value = false;
+    buttonDisabled.value = false;
+  });
+  dialog.visible = false;
+  backLoading.value = false;
+  backButtonDisabled.value = false;
+  emits('submitCallback');
+  modal.msgSuccess('操作成功');
+};
+//取消
+const cancel = async () => {
+  dialog.visible = false;
+  buttonDisabled.value = false;
+  nickName.value = {};
+  form.value.assigneeMap = {};
+  emits('cancelCallback');
+};
+//打开抄送人员
+const openUserSelectCopy = () => {
+  userSelectCopyRef.value.open();
+};
+//确认抄送人员
+const userSelectCopyCallBack = (data: FlowCopyVo[]) => {
+  if (data && data.length > 0) {
+    selectCopyUserList.value = data;
+    selectCopyUserIds.value = selectCopyUserList.value.map(item => item.userId).join(',');
+  }
+};
+//删除抄送人员
+const handleCopyCloseTag = (user: FlowCopyVo) => {
+  const userId = user.userId;
+  // 使用split删除用户
+  const index = selectCopyUserList.value.findIndex(item => item.userId === userId);
+  selectCopyUserList.value.splice(index, 1);
+  selectCopyUserIds.value = selectCopyUserList.value.map(item => item.userId).join(',');
+};
+//加签
+const openMultiInstanceUser = async () => {
+  multiInstanceUserRef.value.open();
+};
+//加签
+const addMultiInstanceUser = async data => {
+  if (data && data.length > 0) {
+    const taskOperationBo = reactive<TaskOperationBo>({
+      userIds: data.map(e => e.userId),
+      taskId: taskId.value,
+      message: form.value.message,
+      messageType: ['1']
+    });
+    await modal.confirm('是否确认提交？');
+    loading.value = true;
+    buttonDisabled.value = true;
+    await taskOperation(taskOperationBo, 'addSignature').finally(() => {
+      loading.value = false;
+      buttonDisabled.value = false;
+    });
+    dialog.visible = false;
+    emits('submitCallback');
+    modal.msgSuccess('操作成功');
+  } else {
+    modal.msgWarning('请选择用户！');
+  }
+};
+//减签
+const deleteMultiInstanceUser = async row => {
+  await modal.confirm('是否确认提交？');
+  loading.value = true;
+  buttonDisabled.value = true;
+  const taskOperationBo = reactive<TaskOperationBo>({
+    userIds: [row.userId],
+    taskId: taskId.value,
+    message: form.value.message,
+    messageType: ['1']
+  });
+  await taskOperation(taskOperationBo, 'reductionSignature').finally(() => {
+    loading.value = false;
+    buttonDisabled.value = false;
+  });
+  dialog.visible = false;
+  emits('submitCallback');
+  modal.msgSuccess('操作成功');
+};
+//打开转办
+const openTransferTask = () => {
+  transferTaskRef.value.open();
+};
+//转办
+const handleTransferTask = async data => {
+  if (data && data.length > 0) {
+    const taskOperationBo = reactive<TaskOperationBo>({
+      userId: data[0].userId,
+      taskId: taskId.value,
+      message: form.value.message,
+      messageType: ['1']
+    });
+    await modal.confirm('是否确认提交？');
+    loading.value = true;
+    buttonDisabled.value = true;
+    await taskOperation(taskOperationBo, 'transferTask').finally(() => {
+      loading.value = false;
+      buttonDisabled.value = false;
+    });
+    dialog.visible = false;
+    emits('submitCallback');
+    modal.msgSuccess('操作成功');
+  } else {
+    modal.msgWarning('请选择用户！');
+  }
+};
+
+//打开委托
+const openDelegateTask = () => {
+  delegateTaskRef.value.open();
+};
+//委托
+const handleDelegateTask = async data => {
+  if (data && data.length > 0) {
+    const taskOperationBo = reactive<TaskOperationBo>({
+      userId: data[0].userId,
+      taskId: taskId.value,
+      message: form.value.message,
+      messageType: ['1']
+    });
+    await modal.confirm('是否确认提交？');
+    loading.value = true;
+    buttonDisabled.value = true;
+    await taskOperation(taskOperationBo, 'delegateTask').finally(() => {
+      loading.value = false;
+      buttonDisabled.value = false;
+    });
+    dialog.visible = false;
+    emits('submitCallback');
+    modal.msgSuccess('操作成功');
+  } else {
+    modal.msgWarning('请选择用户！');
+  }
+};
+//终止任务
+const handleTerminationTask = async () => {
+  const params = {
+    taskId: taskId.value,
+    comment: form.value.message
+  };
+  await modal.confirm('是否确认终止？');
+  loading.value = true;
+  buttonDisabled.value = true;
+  await terminationTask(params).finally(() => {
+    loading.value = false;
+    buttonDisabled.value = false;
+  });
+  dialog.visible = false;
+  emits('submitCallback');
+  modal.msgSuccess('操作成功');
+};
+const handleTaskUser = async () => {
+  const data = await currentTaskAllUser(taskId.value);
+  deleteUserList.value = data.data;
+  if (deleteUserList.value && deleteUserList.value.length > 0) {
+    deleteUserList.value.forEach(e => {
+      e.nodeName = task.value.nodeName;
+    });
+  }
+  deleteSignatureVisible.value = true;
+};
+// 选择人员
+const choosePeople = async data => {
+  if (!data.permissionFlag) {
+    modal.msgError('没有可选择的人员，请联系管理员！');
+  }
+  popUserIds.value = data.permissionFlag;
+  nodeCode.value = data.nodeCode;
+  porUserRef.value.open();
+};
+//确认选择
+const handlePopUser = async userList => {
+  const userIds = userList.map(item => {
+    return item.userId;
+  });
+  const nickNames = userList.map(item => {
+    return item.nickName;
+  });
+  form.value.assigneeMap[nodeCode.value] = userIds.join(',');
+  nickName.value[nodeCode.value] = nickNames.join(',');
+};
+
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  openDialog
+});
+</script>
diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
new file mode 100644
index 0000000..caa8194
--- /dev/null
+++ b/src/components/RightToolbar/index.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="top-right-btn" :style="style">
+    <el-row class="toolbar-row">
+      <el-tooltip
+        v-if="search"
+        class="item"
+        effect="dark"
+        :content="showSearch ? '隐藏搜索' : '显示搜索'"
+        placement="top"
+      >
+        <el-button circle icon="Search" @click="toggleSearch()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
+        <el-button circle icon="Refresh" @click="refresh()" />
+      </el-tooltip>
+      <el-tooltip v-if="columns" class="item" effect="dark" content="显示/隐藏列" placement="top">
+        <div class="show-btn">
+          <el-popover placement="bottom" trigger="click">
+            <div class="tree-header">显示/隐藏列</div>
+            <el-tree
+              ref="columnRef"
+              :data="columns"
+              show-checkbox
+              node-key="key"
+              :props="{ label: 'label', children: 'children' } as any"
+              @check="columnChange"
+            ></el-tree>
+            <template #reference>
+              <el-button circle icon="Menu" />
+            </template>
+          </el-popover>
+        </div>
+      </el-tooltip>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import cache from '@/plugins/cache';
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+  showSearch: propTypes.bool.def(true),
+  columns: propTypes.fieldOption,
+  search: propTypes.bool.def(true),
+  gutter: propTypes.number.def(10),
+  /* 列显隐状态记忆的 localStorage key（传入则启用记忆，不传则不记忆） */
+  storageKey: propTypes.string.def('')
+});
+
+const columnRef = ref<ElTreeInstance>();
+const emits = defineEmits(['update:showSearch', 'queryTable']);
+
+const style = computed(() => {
+  const ret: any = {};
+  if (props.gutter) {
+    ret.marginRight = `${props.gutter / 2}px`;
+  }
+  return ret;
+});
+
+// 搜索
+function toggleSearch() {
+  emits('update:showSearch', !props.showSearch);
+}
+
+// 刷新
+function refresh() {
+  emits('queryTable');
+}
+
+// 将当前列显隐状态持久化到 localStorage
+function saveStorage() {
+  if (!props.storageKey) return;
+  try {
+    const state: Record<string, boolean> = {};
+    props.columns?.forEach((col, index) => {
+      state[index] = col.visible;
+    });
+    cache.local.setJSON(props.storageKey, state);
+  } catch (e) {}
+}
+
+// 更改数据列的显示和隐藏
+function columnChange(...args: any[]) {
+  props.columns?.forEach(item => {
+    item.visible = args[1].checkedKeys.includes(item.key);
+  });
+  saveStorage();
+}
+
+// 显隐列初始默认隐藏列
+onMounted(() => {
+  // 如果传入了 storageKey，从 localStorage 恢复列显隐状态
+  if (props.storageKey) {
+    try {
+      const saved = cache.local.getJSON(props.storageKey);
+      if (saved && typeof saved === 'object') {
+        props.columns?.forEach((col, index) => {
+          if (saved[index] !== undefined) col.visible = saved[index];
+        });
+      }
+    } catch (e) {}
+  }
+  props.columns?.forEach(item => {
+    if (item.visible) {
+      columnRef.value?.setChecked(item.key, true, false);
+    }
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-button.is-circle) {
+  width: 38px;
+  height: 38px;
+  border-radius: 14px;
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
+  color: var(--app-text-muted);
+  transition:
+    transform 0.25s ease,
+    border-color 0.25s ease,
+    color 0.25s ease,
+    background 0.25s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    color: var(--app-accent-strong);
+    background: var(--app-accent-soft);
+    border-color: rgba(53, 109, 255, 0.2);
+  }
+}
+
+:deep(.el-transfer__button) {
+  border-radius: 50%;
+  display: block;
+  margin-left: 0px;
+}
+:deep(.el-transfer__button:first-child) {
+  margin-bottom: 10px;
+}
+
+.my-el-transfer {
+  text-align: center;
+}
+
+.toolbar-row {
+  gap: 8px;
+}
+
+.tree-header {
+  width: 100%;
+  line-height: 24px;
+  text-align: center;
+  font-weight: 700;
+  color: var(--app-text-title);
+}
+
+.show-btn {
+  margin-left: 0;
+}
+</style>
diff --git a/src/components/RoleSelect/index.vue b/src/components/RoleSelect/index.vue
new file mode 100644
index 0000000..3d6d1bd
--- /dev/null
+++ b/src/components/RoleSelect/index.vue
@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="80%"
+      append-to-body
+      class="role-select-dialog"
+    >
+      <div class="p-2 role-select-shell">
+        <transition
+          :enter-active-class="animateConfig.searchAnimate.enter"
+          :leave-active-class="animateConfig.searchAnimate.leave"
+        >
+          <div v-show="showSearch">
+            <el-card shadow="hover" class="search-panel selector-card">
+              <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+                <el-form-item label="角色名称" prop="roleName">
+                  <el-input
+                    v-model="queryParams.roleName"
+                    placeholder="请输入角色名称"
+                    clearable
+                    @keyup.enter="handleQuery"
+                  />
+                </el-form-item>
+                <el-form-item label="权限字符" prop="roleKey">
+                  <el-input
+                    v-model="queryParams.roleKey"
+                    placeholder="请输入权限字符"
+                    clearable
+                    @keyup.enter="handleQuery"
+                  />
+                </el-form-item>
+
+                <el-form-item>
+                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+            </el-card>
+          </div>
+        </transition>
+
+        <el-card shadow="hover" class="table-panel selector-card">
+          <template #header>
+            <div class="toolbar-shell selector-header">
+              <div class="table-heading">
+                <h3>角色列表</h3>
+              </div>
+              <div v-if="selectRoleList.length" class="selector-tags">
+                <el-tag v-for="role in selectRoleList" :key="role.roleId" closable @close="handleCloseTag(role)">
+                  {{ role.roleName }}
+                </el-tag>
+              </div>
+            </div>
+          </template>
+
+          <vxe-table
+            ref="tableRef"
+            class="selector-table"
+            height="400px"
+            border
+            show-overflow
+            :data="roleList"
+            :loading="loading"
+            :row-config="{ keyField: 'roleId' }"
+            :checkbox-config="{ reserve: true, checkRowKeys: defaultSelectRoleIds }"
+            highlight-current-row
+            @checkbox-all="handleCheckboxAll"
+            @checkbox-change="handleCheckboxChange"
+          >
+            <vxe-column type="checkbox" width="50" align="center" />
+            <vxe-column v-if="false" key="roleId" label="角色编号" />
+            <vxe-column field="roleName" title="角色名称" />
+            <vxe-column field="roleKey" title="权限字符" />
+            <vxe-column field="roleSort" title="显示顺序" width="100" />
+            <vxe-column title="状态" align="center" width="100">
+              <template #default="scope">
+                <dict-tag :options="sys_normal_disable" :value="scope.row.status"></dict-tag>
+              </template>
+            </vxe-column>
+            <vxe-column field="createTime" title="创建时间" align="center">
+              <template #default="scope">
+                <span>{{ parseTime(scope.row.createTime) }}</span>
+              </template>
+            </vxe-column>
+          </vxe-table>
+
+          <pagination
+            v-if="total > 0"
+            v-model:total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="pageList"
+          />
+        </el-card>
+      </div>
+      <template #footer>
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { VxeTableInstance } from 'vxe-table';
+import animateConfig from '@/animate';
+import api from '@/api/system/role';
+import { RoleVO, RoleQuery } from '@/api/system/role/types';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+import { useDict } from '@/utils/dict';
+import { parseTime } from '@/utils/ruoyi';
+
+interface PropType {
+  modelValue?: RoleVO[] | RoleVO | undefined;
+  multiple?: boolean;
+  data?: string | number | (string | number)[];
+}
+const prop = withDefaults(defineProps<PropType>(), {
+  multiple: true,
+  modelValue: undefined,
+  data: undefined
+});
+const emit = defineEmits(['update:modelValue', 'confirmCallBack']);
+
+const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
+
+const roleList = ref<RoleVO[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
+const selectRoleList = ref<RoleVO[]>([]);
+
+const { dialog, openDialog, closeDialog } = useDialogState('角色选择');
+
+const queryFormRef = ref<ElFormInstance>();
+const tableRef = ref<VxeTableInstance<RoleVO>>();
+
+const queryParams = ref<RoleQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  roleName: '',
+  roleKey: '',
+  status: ''
+});
+
+const defaultSelectRoleIds = computed(() => computedIds(prop.data));
+
+const confirm = () => {
+  emit('update:modelValue', selectRoleList.value);
+  emit('confirmCallBack', selectRoleList.value);
+  closeDialog();
+};
+
+const computedIds = data => {
+  if (data instanceof Array) {
+    return [...data];
+  } else if (typeof data === 'string') {
+    return data.split(',');
+  } else if (typeof data === 'number') {
+    return [data];
+  } else {
+    console.warn('<RoleSelect> The data type of data should be array or string or number, but I received other');
+    return [];
+  }
+};
+
+/**
+ * 查询角色列表
+ */
+const getList = () => {
+  loading.value = true;
+  api.listRole(applyDateRange(queryParams.value)).then(res => {
+    roleList.value = res.data?.rows;
+    total.value = res.data?.total;
+    loading.value = false;
+  });
+};
+const pageList = async () => {
+  await getList();
+  const roles = roleList.value.filter(item => {
+    return selectRoleList.value.some(role => role.roleId === item.roleId);
+  });
+  await tableRef.value.setCheckboxRow(roles, true);
+};
+/**
+ * 搜索按钮操作
+ */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置 */
+const resetQuery = () => {
+  resetDateRange();
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+const handleCheckboxChange = checked => {
+  if (!prop.multiple && checked.checked) {
+    tableRef.value.setCheckboxRow(selectRoleList.value, false);
+    selectRoleList.value = [];
+  }
+  const row = checked.row;
+  if (checked.checked) {
+    selectRoleList.value.push(row);
+  } else {
+    selectRoleList.value = selectRoleList.value.filter(item => {
+      return item.roleId !== row.roleId;
+    });
+  }
+};
+const handleCheckboxAll = checked => {
+  const rows = roleList.value;
+  if (checked.checked) {
+    rows.forEach(row => {
+      if (!selectRoleList.value.some(item => item.roleId === row.roleId)) {
+        selectRoleList.value.push(row);
+      }
+    });
+  } else {
+    selectRoleList.value = selectRoleList.value.filter(item => {
+      return !rows.some(row => row.roleId === item.roleId);
+    });
+  }
+};
+
+const handleCloseTag = (user: RoleVO) => {
+  const roleId = user.roleId;
+  // 使用split删除用户
+  const index = selectRoleList.value.findIndex(item => item.roleId === roleId);
+  const rows = selectRoleList.value[index];
+  tableRef.value?.setCheckboxRow(rows, false);
+  selectRoleList.value.splice(index, 1);
+};
+/**
+ * 初始化选中数据
+ */
+const initSelectRole = async () => {
+  if (defaultSelectRoleIds.value.length > 0) {
+    const { data } = await api.optionSelect(defaultSelectRoleIds.value);
+    selectRoleList.value = data;
+    const users = roleList.value.filter(item => {
+      return defaultSelectRoleIds.value.includes(String(item.roleId));
+    });
+    await nextTick(() => {
+      tableRef.value.setCheckboxRow(users, true);
+    });
+  }
+};
+const close = () => {
+  closeDialog();
+};
+watch(
+  () => dialog.visible,
+  (newValue: boolean) => {
+    if (newValue) {
+      initSelectRole();
+    } else {
+      tableRef.value.clearCheckboxReserve();
+      tableRef.value.clearCheckboxRow();
+      resetQuery();
+      selectRoleList.value = [];
+    }
+  }
+);
+onMounted(() => {
+  getList(); // 初始化列表数据
+});
+
+defineExpose({
+  open: openDialog,
+  close: closeDialog
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/selector-dialog' as selectorDialog;
+
+@include selectorDialog.shell-gap('.role-select-shell');
+@include selectorDialog.card-shell;
+@include selectorDialog.selector-header-tags;
+@include selectorDialog.dialog-body-padding('role-select-dialog');
+@include selectorDialog.selector-table;
+</style>
diff --git a/src/components/RuoYiDoc/index.vue b/src/components/RuoYiDoc/index.vue
new file mode 100644
index 0000000..8938b93
--- /dev/null
+++ b/src/components/RuoYiDoc/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <svg-icon icon-class="question" @click="goto" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const url = ref('https://plus-doc.dromara.org/');
+
+function goto() {
+  window.open(url.value);
+}
+</script>
diff --git a/src/components/RuoYiGit/index.vue b/src/components/RuoYiGit/index.vue
new file mode 100644
index 0000000..8df3af8
--- /dev/null
+++ b/src/components/RuoYiGit/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <svg-icon icon-class="github" @click="goto" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const url = ref('https://gitee.com/dromara/RuoYi-Vue-Plus');
+
+function goto() {
+  window.open(url.value);
+}
+</script>
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
new file mode 100644
index 0000000..ce0b373
--- /dev/null
+++ b/src/components/Screenfull/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { isFullscreen, toggle } = useFullscreen();
+</script>
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
new file mode 100644
index 0000000..b402efe
--- /dev/null
+++ b/src/components/SizeSelect/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <el-dropdown trigger="click" @command="handleSetSize">
+      <div class="size-icon--style">
+        <svg-icon class-name="size-icon" icon-class="size" />
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+            v-for="item of sizeOptions"
+            :key="item.value"
+            :disabled="size === item.value"
+            :command="item.value"
+          >
+            {{ item.label }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/store/modules/app';
+
+const appStore = useAppStore();
+const size = computed(() => appStore.size);
+
+const sizeOptions = ref([
+  { label: '较大', value: 'large' },
+  { label: '默认', value: 'default' },
+  { label: '稍小', value: 'small' }
+]);
+
+const handleSetSize = (size: 'large' | 'default' | 'small') => {
+  appStore.setSize(size);
+};
+</script>
+
+<style lang="scss" scoped>
+.size-icon--style {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  :deep(.svg-icon) {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
new file mode 100644
index 0000000..bb23285
--- /dev/null
+++ b/src/components/SvgIcon/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <Icon v-if="isIconify" :icon="normalizedIcon" :class="svgClass" :style="iconStyle" aria-hidden="true" />
+  <svg v-else :class="svgClass" aria-hidden="true" :style="iconStyle">
+    <use :xlink:href="iconName" :fill="color" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+  iconClass: propTypes.string.isRequired,
+  className: propTypes.string.def(''),
+  color: propTypes.string.def(''),
+  size: propTypes.string.def('')
+});
+const normalizedIcon = computed(() => props.iconClass?.replace(/^i-/, ''));
+const isIconify = computed(() => normalizedIcon.value?.includes(':'));
+const iconName = computed(() => `#icon-${normalizedIcon.value}`);
+const svgClass = computed(() => {
+  if (props.className) {
+    return `svg-icon ${props.className}`;
+  }
+  return 'svg-icon';
+});
+const iconStyle = computed(() => ({
+  color: props.color || undefined,
+  fontSize: props.size || undefined
+}));
+</script>
+
+<style lang="scss" scoped>
+.sub-el-icon,
+.nav-icon {
+  display: inline-block;
+  font-size: 15px;
+  margin-right: 12px;
+  position: relative;
+}
+
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  position: relative;
+  fill: currentColor;
+  vertical-align: -2px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
new file mode 100644
index 0000000..3374da4
--- /dev/null
+++ b/src/components/TopNav/index.vue
@@ -0,0 +1,388 @@
+<template>
+  <el-menu
+    class="mix-topnav-menu"
+    :default-active="activeMenu"
+    mode="horizontal"
+    :ellipsis="false"
+    @select="handleSelect"
+  >
+    <template v-for="(item, index) in topMenus">
+      <el-menu-item v-if="index < visibleNumber" :key="index" :index="item.path">
+        <svg-icon
+          v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
+          :icon-class="item.meta ? item.meta.icon : ''"
+        />
+        {{ item.meta?.title }}
+      </el-menu-item>
+    </template>
+
+    <!-- 顶部菜单超出数量折叠 -->
+    <el-sub-menu
+      v-if="topMenus.length > visibleNumber"
+      class="el-sub-menu__hide-arrow"
+      popper-class="mix-topnav-popper"
+      index="more"
+    >
+      <template #title>更多菜单</template>
+      <template v-for="(item, index) in topMenus">
+        <el-menu-item v-if="index >= visibleNumber" :key="index" :index="item.path">
+          <svg-icon :icon-class="item.meta ? item.meta.icon : ''" />
+          {{ item.meta?.title }}
+        </el-menu-item>
+      </template>
+    </el-sub-menu>
+  </el-menu>
+</template>
+
+<script setup lang="ts">
+import { RouteRecordRaw } from 'vue-router';
+import { constantRoutes } from '@/router';
+import { useAppStore } from '@/store/modules/app';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useSettingsStore } from '@/store/modules/settings';
+import { isHttp } from '@/utils/validate';
+
+// 顶部栏初始数
+const visibleNumber = ref<number>(-1);
+// 隐藏侧边栏路由
+const hideList = ['/index', '/user/profile'];
+
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+const route = useRoute();
+const router = useRouter();
+
+// 主题颜色
+const theme = computed(() => settingsStore.theme);
+// 所有的路由信息
+const routers = computed(() => permissionStore.getTopbarRoutes());
+
+// 顶部显示菜单
+const topMenus = computed(() => {
+  const topMenus: RouteRecordRaw[] = [];
+  routers.value.map(menu => {
+    if (menu.hidden !== true) {
+      // 兼容顶部栏一级菜单内部跳转
+      if (menu.path === '/' && menu.children) {
+        topMenus.push(menu.children ? menu.children[0] : menu);
+      } else {
+        topMenus.push(menu);
+      }
+    }
+  });
+  return topMenus;
+});
+
+// 设置子路由
+const childrenMenus = computed(() => {
+  const childrenMenus: RouteRecordRaw[] = [];
+  routers.value.map(router => {
+    router.children?.forEach(item => {
+      if (item.parentPath === undefined) {
+        if (router.path === '/') {
+          item.path = '/' + item.path;
+        } else {
+          if (!isHttp(item.path)) {
+            item.path = router.path + '/' + item.path;
+          }
+        }
+        item.parentPath = router.path;
+      }
+      childrenMenus.push(item);
+    });
+  });
+  return constantRoutes.concat(childrenMenus);
+});
+
+// 默认激活的菜单
+const activeMenu = computed(() => {
+  const { meta } = route;
+  let path = meta.activeMenu || route.path;
+  if (path === '/index' || route.path === '/index') {
+    path = '/system/user';
+  }
+  let activePath = path;
+  if (path !== undefined && path.lastIndexOf('/') > 0 && hideList.indexOf(path) === -1) {
+    const tmpPath = path.substring(1, path.length);
+    if (!route.meta.link) {
+      activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'));
+      appStore.toggleSideBarHide(false);
+    }
+  } else if (!route.children) {
+    activePath = path;
+    appStore.toggleSideBarHide(true);
+  }
+  activeRoutes(activePath);
+  return activePath;
+});
+
+const setVisibleNumber = () => {
+  let width = document.body.getBoundingClientRect().width;
+  if (width >= 1000) {
+    width -= 420;
+  }
+  visibleNumber.value = Math.max(1, Math.floor(width / 3 / 92) + 2);
+};
+
+const handleSelect = (key: string) => {
+  const route = routers.value.find(item => item.path === key);
+  if (isHttp(key)) {
+    // http(s):// 路径新窗口打开
+    window.open(key, '_blank');
+  } else if (!route || !route.children) {
+    // 没有子路由路径内部打开
+    const routeMenu = childrenMenus.value.find(item => item.path === key);
+    if (routeMenu && routeMenu.query) {
+      const query = JSON.parse(routeMenu.query);
+      router.push({ path: key, query: query });
+    } else {
+      router.push({ path: key });
+    }
+    appStore.toggleSideBarHide(true);
+  } else {
+    // 显示左侧联动菜单
+    activeRoutes(key);
+    appStore.toggleSideBarHide(false);
+  }
+};
+
+const activeRoutes = (key: string) => {
+  const routes: RouteRecordRaw[] = [];
+  if (childrenMenus.value && childrenMenus.value.length > 0) {
+    childrenMenus.value.map(item => {
+      if (key == item.parentPath || (key == 'index' && '' == item.path)) {
+        routes.push(item);
+      }
+    });
+  }
+  if (routes.length > 0) {
+    permissionStore.setSidebarRouters(routes);
+  } else {
+    appStore.toggleSideBarHide(true);
+  }
+  return routes;
+};
+
+onMounted(() => {
+  window.addEventListener('resize', setVisibleNumber);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', setVisibleNumber);
+});
+
+onMounted(() => {
+  setVisibleNumber();
+});
+</script>
+
+<style lang="scss">
+.mix-topnav-menu.el-menu--horizontal {
+  --topbar-pill-bg: var(--app-elevated-soft-bg);
+  --topbar-pill-hover-bg: var(--app-elevated-close-bg);
+  --topbar-pill-active-bg: var(--app-elevated-close-bg);
+  --topbar-pill-text: var(--app-text-title);
+  --topbar-pill-muted: var(--app-text-muted);
+  --topbar-pill-border: var(--app-surface-border);
+  --topbar-pill-active-border: var(--app-surface-border);
+
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  height: 44px;
+  padding: 0;
+  border: none !important;
+  background: transparent !important;
+
+  &::after {
+    display: none !important;
+  }
+}
+
+#app .mix-topnav-menu.el-menu--horizontal > .el-menu-item,
+#app .mix-topnav-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  height: 36px !important;
+  line-height: 36px !important;
+  margin: 0 !important;
+  padding: 0 18px !important;
+  border: 1px solid transparent !important;
+  border-radius: 13px;
+  color: var(--topbar-pill-text) !important;
+  background: transparent !important;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+#app .mix-topnav-menu.el-menu--horizontal > .el-menu-item:hover,
+#app .mix-topnav-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title:hover {
+  background: linear-gradient(180deg, var(--topbar-pill-hover-bg), var(--topbar-pill-bg)) !important;
+  border-color: var(--topbar-pill-border) !important;
+  color: v-bind(theme) !important;
+  transform: translateY(-1px);
+}
+
+#app .mix-topnav-menu.el-menu--horizontal > .el-menu-item.is-active,
+#app .mix-topnav-menu.el-menu--horizontal > .el-sub-menu.is-active > .el-sub-menu__title {
+  background: linear-gradient(180deg, var(--topbar-pill-hover-bg), var(--topbar-pill-active-bg)) !important;
+  border-color: var(--topbar-pill-active-border) !important;
+  color: v-bind(theme) !important;
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+#app .mix-topnav-menu.el-menu--horizontal > .el-menu-item .svg-icon,
+#app .mix-topnav-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title .svg-icon {
+  width: 14px;
+  height: 14px;
+  margin-right: 0 !important;
+  flex-shrink: 0;
+}
+
+#app .mix-topnav-menu.el-menu--horizontal > .el-menu-item span,
+#app .mix-topnav-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title span {
+  color: inherit !important;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+.mix-topnav-menu .el-sub-menu .el-sub-menu__icon-arrow {
+  position: static;
+  margin: 0 0 0 2px;
+  display: block !important;
+  color: inherit;
+  font-size: 11px;
+}
+
+.mix-topnav-menu.el-menu--horizontal > .el-menu-item::after,
+.mix-topnav-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title::after {
+  display: none !important;
+}
+
+.mix-topnav-menu.el-menu--horizontal > .el-sub-menu.el-sub-menu__hide-arrow > .el-sub-menu__title {
+  color: var(--topbar-pill-muted) !important;
+  padding-right: 16px !important;
+}
+
+.mix-topnav-popper.el-popper {
+  border: none !important;
+  border-radius: var(--app-radius-base) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+.mix-topnav-popper.el-popper .el-popper__arrow {
+  display: none !important;
+}
+
+.mix-topnav-popper .el-menu--popup {
+  min-width: 188px;
+  padding: 10px !important;
+  border: 1px solid var(--app-surface-border);
+  border-radius: var(--app-radius-base);
+  background: var(--app-surface-bg) !important;
+  box-shadow: var(--app-shadow-md);
+}
+
+.mix-topnav-popper .el-menu--popup .el-menu-item,
+.mix-topnav-popper .el-menu--popup .el-sub-menu__title {
+  display: flex;
+  align-items: center;
+  height: 38px;
+  line-height: 38px;
+  padding: 0 14px !important;
+  margin: 0 0 4px !important;
+  border-radius: 12px;
+  color: var(--app-text-title) !important;
+  background: transparent !important;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.mix-topnav-popper .el-menu--popup .el-menu-item:last-child,
+.mix-topnav-popper .el-menu--popup .el-sub-menu:last-child > .el-sub-menu__title {
+  margin-bottom: 0 !important;
+}
+
+.mix-topnav-popper .el-menu--popup .el-menu-item:hover,
+.mix-topnav-popper .el-menu--popup .el-sub-menu__title:hover {
+  background: rgba(64, 158, 255, 0.08) !important;
+  color: v-bind(theme) !important;
+  transform: translateX(1px);
+}
+
+.mix-topnav-popper .el-menu--popup .el-menu-item.is-active,
+.mix-topnav-popper .el-menu--popup .el-sub-menu.is-active > .el-sub-menu__title {
+  background: linear-gradient(180deg, rgba(64, 158, 255, 0.16), rgba(64, 158, 255, 0.1)) !important;
+  color: v-bind(theme) !important;
+  box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.12);
+}
+
+.mix-topnav-popper .el-menu--popup .svg-icon {
+  width: 14px;
+  height: 14px;
+  margin-right: 10px !important;
+}
+
+.mix-topnav-popper .el-menu--popup .el-sub-menu__title > span,
+.mix-topnav-popper .el-menu--popup .el-menu-item > span {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+.mix-topnav-popper .el-menu--popup .el-sub-menu__icon-arrow {
+  position: static;
+  margin-left: auto;
+  margin-top: 0;
+  font-size: 11px;
+  align-self: center;
+}
+
+html.dark .mix-topnav-menu.el-menu--horizontal {
+  --topbar-pill-bg: rgba(30, 41, 59, 0.64);
+  --topbar-pill-hover-bg: rgba(51, 65, 85, 0.88);
+  --topbar-pill-active-bg: rgba(51, 65, 85, 0.78);
+  --topbar-pill-border: rgba(71, 85, 105, 0.28);
+  --topbar-pill-active-border: rgba(71, 85, 105, 0.32);
+}
+
+html.dark .mix-topnav-popper .el-menu--popup {
+  border-color: rgba(71, 85, 105, 0.34);
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.94)) !important;
+  box-shadow:
+    0 20px 42px rgba(0, 0, 0, 0.34),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+html.dark .mix-topnav-popper .el-menu--popup .el-menu-item,
+html.dark .mix-topnav-popper .el-menu--popup .el-sub-menu__title {
+  color: #e5edf8 !important;
+}
+
+html.dark .mix-topnav-popper .el-menu--popup .el-menu-item:hover,
+html.dark .mix-topnav-popper .el-menu--popup .el-sub-menu__title:hover {
+  background: rgba(96, 165, 250, 0.14) !important;
+}
+
+html.dark .mix-topnav-popper .el-menu--popup .el-menu-item.is-active,
+html.dark .mix-topnav-popper .el-menu--popup .el-sub-menu.is-active > .el-sub-menu__title {
+  background: linear-gradient(180deg, rgba(37, 99, 235, 0.28), rgba(59, 130, 246, 0.18)) !important;
+  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.16);
+}
+</style>
diff --git a/src/components/TreePanel/index.vue b/src/components/TreePanel/index.vue
new file mode 100644
index 0000000..8e34712
--- /dev/null
+++ b/src/components/TreePanel/index.vue
@@ -0,0 +1,338 @@
+<template>
+  <el-col
+    :lg="modelCollapsed ? 1 : expandedSpan"
+    :xs="24"
+    class="tree-panel-col"
+    :class="{ 'is-collapsed': modelCollapsed }"
+  >
+    <el-card shadow="hover" class="side-panel tree-panel-shell" :class="{ 'is-collapsed': modelCollapsed }">
+      <template #header>
+        <div
+          class="panel-heading search-panel-toggle tree-panel-header"
+          :class="{ 'is-collapsed': modelCollapsed }"
+          @click.stop="toggleCollapsed"
+        >
+          <div v-show="!modelCollapsed">
+            <h3>{{ title }}</h3>
+          </div>
+        </div>
+      </template>
+      <template v-if="!modelCollapsed">
+        <el-input v-model="filterText" :placeholder="placeholder" prefix-icon="Search" clearable />
+        <div ref="treeWrapRef" class="dept-tree-wrap">
+          <el-tree-v2
+            ref="treeRef"
+            class="dept-tree"
+            :data="treeData"
+            :props="mergedTreeProps as any"
+            :height="treeHeight"
+            :item-size="28"
+            :expand-on-click-node="false"
+            :default-expanded-keys="defaultExpandedKeys"
+            :filter-method="internalFilterNode"
+            highlight-current
+            @node-click="onNodeClick"
+          >
+            <template #default="{ node }">
+              <span class="tree-node-label" :class="{ 'is-disabled': isNodeDisabled(node.data) }">
+                <span>{{ node.label }}</span>
+                <el-tooltip v-if="isNodeDisabled(node.data)" content="停用" placement="top">
+                  <el-icon class="tree-node-disabled-icon"><CircleCloseFilled /></el-icon>
+                </el-tooltip>
+              </span>
+            </template>
+          </el-tree-v2>
+        </div>
+      </template>
+    </el-card>
+  </el-col>
+</template>
+
+<script setup lang="ts">
+import type { TreeKey, TreeV2Instance } from 'element-plus';
+
+const props = withDefaults(
+  defineProps<{
+    /** 面板标题 */
+    title: string;
+    /** 搜索输入框占位文字 */
+    placeholder?: string;
+    /** 树数据 */
+    data: any[];
+    /** el-tree node-key */
+    nodeKey?: string;
+    /** el-tree props 配置 */
+    treeProps?: Record<string, string>;
+    /** 节点禁用字段名，未提供或字段不存在则忽略 */
+    disabledField?: string;
+    /** 展开时占的栅格列数 (lg) */
+    expandedSpan?: number;
+    /** 默认过滤字段名 (用于内置 filterNode) */
+    filterField?: string;
+    /** 自定义过滤方法，传入则覆盖默认 filterField 逻辑 */
+    filterNodeMethod?: (value: string, data: any) => boolean;
+    /** 折叠状态 (v-model:collapsed) */
+    collapsed?: boolean;
+  }>(),
+  {
+    placeholder: '请输入名称',
+    nodeKey: 'id',
+    treeProps: () => ({ label: 'label', children: 'children' }),
+    disabledField: 'disabled',
+    expandedSpan: 5,
+    filterField: 'label',
+    collapsed: false
+  }
+);
+
+const emit = defineEmits<{
+  'update:collapsed': [value: boolean];
+  'node-click': [data: any, node: any, component: any];
+}>();
+
+const modelCollapsed = computed({
+  get: () => props.collapsed,
+  set: (val: boolean) => emit('update:collapsed', val)
+});
+
+const filterText = ref('');
+const treeRef = ref<TreeV2Instance>();
+const treeWrapRef = ref<HTMLElement>();
+const treeData = shallowRef<any[]>([]);
+const defaultExpandedKeys = shallowRef<TreeKey[]>([]);
+const { height: treeWrapHeight } = useElementSize(treeWrapRef);
+const treeHeight = computed(() => Math.max(Math.floor(treeWrapHeight.value), 180));
+
+const mergedTreeProps = computed(() => {
+  const label = props.treeProps?.label ?? 'label';
+  const children = props.treeProps?.children ?? 'children';
+  const value = props.treeProps?.value ?? props.nodeKey;
+  if (!props.disabledField) {
+    return {
+      ...props.treeProps,
+      value,
+      label,
+      children
+    };
+  }
+  return {
+    ...props.treeProps,
+    value,
+    label,
+    children,
+    disabled: props.treeProps?.disabled ?? props.disabledField
+  };
+});
+
+const isNodeDisabled = (data: any) => {
+  if (!props.disabledField) {
+    return false;
+  }
+  return Boolean(data?.[props.disabledField]);
+};
+
+const toggleCollapsed = () => {
+  modelCollapsed.value = !modelCollapsed.value;
+};
+
+const getNodeKey = (data: any) => data?.[props.nodeKey] as TreeKey | undefined;
+
+const collectExpandedKeys = (nodes: any[], keys: TreeKey[] = []) => {
+  const childrenField = props.treeProps?.children ?? 'children';
+  for (const node of nodes) {
+    const children = node?.[childrenField];
+    if (Array.isArray(children) && children.length > 0) {
+      const key = getNodeKey(node);
+      if (key !== undefined) {
+        keys.push(key);
+      }
+      collectExpandedKeys(children, keys);
+    }
+  }
+  return keys;
+};
+
+const internalFilterNode = (value: string, data: any) => {
+  if (props.filterNodeMethod) {
+    return props.filterNodeMethod(value, data);
+  }
+  if (!value) return true;
+  return data[props.filterField]?.indexOf(value) !== -1;
+};
+
+const filterTree = useDebounceFn(() => {
+  treeRef.value?.filter(filterText.value);
+}, 200);
+
+watch(filterText, () => filterTree());
+
+watch(
+  () => props.data,
+  (data) => {
+    const rawData = toRaw(data);
+    treeData.value = rawData;
+    defaultExpandedKeys.value = collectExpandedKeys(rawData);
+    nextTick(() => {
+      treeRef.value?.setData(rawData);
+      treeRef.value?.setExpandedKeys(defaultExpandedKeys.value);
+      if (filterText.value) {
+        filterTree();
+      }
+    });
+  },
+  { immediate: true }
+);
+
+const onNodeClick = (data: any, node: any, component: any) => {
+  if (isNodeDisabled(data)) {
+    treeRef.value?.setCurrentKey(undefined as any);
+    return;
+  }
+  emit('node-click', data, node, component);
+};
+
+const contentSpan = computed(() => (modelCollapsed.value ? 23 : 24 - props.expandedSpan));
+
+const setCurrentKey = (key: any) => treeRef.value?.setCurrentKey(key);
+
+defineExpose({
+  treeRef,
+  contentSpan,
+  setCurrentKey
+});
+</script>
+
+<style lang="scss" scoped>
+$mobile-breakpoint: 900px;
+
+.tree-panel-col {
+  min-width: 0;
+  transition:
+    max-width 0.24s ease,
+    flex-basis 0.24s ease;
+}
+
+.tree-panel-col.is-collapsed {
+  max-width: 56px;
+  flex: 0 0 56px;
+}
+
+.tree-panel-shell,
+.side-panel {
+  height: 100%;
+}
+
+.tree-panel-shell {
+  --tree-panel-max-height: 620px;
+}
+
+.tree-panel-shell :deep(.el-card__header) {
+  display: block;
+  padding: 12px 16px !important;
+}
+
+.tree-panel-shell :deep(.el-card__body) {
+  display: flex;
+  flex-direction: column;
+  height: var(--tree-panel-max-height);
+  min-height: 0;
+  max-height: var(--tree-panel-max-height);
+  overflow: hidden;
+}
+
+.tree-panel-header {
+  cursor: pointer;
+  user-select: none;
+}
+
+.tree-panel-header::after {
+  display: block;
+  width: 9px;
+  min-width: 9px;
+  height: 9px;
+  margin-left: auto;
+  flex-shrink: 0;
+  transform-origin: center;
+  transform: rotate(135deg);
+}
+
+.tree-panel-header.is-collapsed {
+  justify-content: center;
+}
+
+.side-panel.is-collapsed :deep(.el-card__body) {
+  display: none;
+}
+
+.tree-panel-shell.is-collapsed :deep(.el-card__header) {
+  padding: 12px 0 !important;
+}
+
+.tree-panel-shell.is-collapsed .tree-panel-header::after {
+  margin-left: 0;
+  transform: rotate(-45deg);
+}
+
+.dept-tree-wrap {
+  margin-top: 8px;
+  flex: 1 1 auto;
+  min-height: 180px;
+  max-height: 100%;
+  min-width: 0;
+}
+
+.dept-tree {
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+}
+
+.dept-tree::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dept-tree::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--app-text-muted);
+  opacity: 0.55;
+}
+
+.dept-tree::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.tree-panel-shell :deep(.tree-node-label) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  line-height: 22px;
+  color: var(--el-text-color-primary);
+}
+
+.tree-panel-shell :deep(.tree-node-label.is-disabled) {
+  color: var(--el-color-danger);
+}
+
+.tree-panel-shell :deep(.tree-node-disabled-icon) {
+  flex: 0 0 auto;
+  margin-top: 1px;
+  font-size: 14px;
+  color: var(--el-color-danger);
+}
+
+@media (max-width: $mobile-breakpoint) {
+  .tree-panel-col {
+    max-width: 100%;
+    flex: 0 0 100%;
+  }
+
+  .tree-panel-shell {
+    --tree-panel-max-height: 420px;
+  }
+
+  .side-panel.is-collapsed {
+    height: auto;
+  }
+}
+</style>
diff --git a/src/components/UserSelect/index.vue b/src/components/UserSelect/index.vue
new file mode 100644
index 0000000..cee9606
--- /dev/null
+++ b/src/components/UserSelect/index.vue
@@ -0,0 +1,415 @@
+<template>
+  <div>
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="80%"
+      append-to-body
+      class="user-select-dialog"
+    >
+      <div class="p-2 user-select-shell">
+        <el-row :gutter="12" class="selector-layout">
+          <!-- 部门树 -->
+          <el-col
+            :lg="treeCollapsed ? 1 : 5"
+            :xs="24"
+            class="tree-panel-col"
+            :class="{ 'is-collapsed': treeCollapsed }"
+          >
+            <el-card
+              shadow="hover"
+              class="side-panel tree-panel-shell selector-card selector-side-card"
+              :class="{ 'is-collapsed': treeCollapsed }"
+            >
+              <template #header>
+                <div
+                  class="panel-heading search-panel-toggle tree-panel-header"
+                  :class="{ 'is-collapsed': treeCollapsed }"
+                  @click.stop="treeCollapsed = !treeCollapsed"
+                >
+                  <div v-show="!treeCollapsed" class="table-heading">
+                    <h3>部门结构</h3>
+                  </div>
+                </div>
+              </template>
+              <template v-if="!treeCollapsed">
+                <el-input
+                  v-model="deptName"
+                  class="selector-dept-input"
+                  placeholder="请输入部门名称"
+                  prefix-icon="Search"
+                  clearable
+                />
+                <el-tree
+                  ref="deptTreeRef"
+                  class="selector-tree"
+                  node-key="id"
+                  :data="deptOptions"
+                  :props="{ label: 'label', children: 'children' } as any"
+                  :expand-on-click-node="false"
+                  :filter-node-method="filterNode"
+                  highlight-current
+                  default-expand-all
+                  @node-click="handleNodeClick"
+                />
+              </template>
+            </el-card>
+          </el-col>
+          <el-col
+            :lg="treeCollapsed ? 23 : 19"
+            :xs="24"
+            class="tree-content-col"
+            :class="{ 'is-tree-collapsed': treeCollapsed }"
+          >
+            <div class="p-2user-select-main">
+              <transition
+                :enter-active-class="animateConfig.searchAnimate.enter"
+                :leave-active-class="animateConfig.searchAnimate.leave"
+              >
+                <div v-show="showSearch">
+                  <el-card shadow="hover" class="search-panel selector-card">
+                    <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+                      <el-form-item label="用户名称" prop="userName">
+                        <el-input
+                          v-model="queryParams.userName"
+                          placeholder="请输入用户名称"
+                          clearable
+                          @keyup.enter="handleQuery"
+                        />
+                      </el-form-item>
+                      <el-form-item label="手机号码" prop="phoneNumber">
+                        <el-input
+                          v-model="queryParams.phoneNumber"
+                          placeholder="请输入手机号码"
+                          clearable
+                          @keyup.enter="handleQuery"
+                        />
+                      </el-form-item>
+                      <el-form-item>
+                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                        <el-button icon="Refresh" @click="() => resetQuery()">重置</el-button>
+                      </el-form-item>
+                    </el-form>
+                  </el-card>
+                </div>
+              </transition>
+
+              <el-card shadow="hover" class="table-panel selector-card">
+                <template #header>
+                  <div class="toolbar-shell selector-header">
+                    <div class="table-heading">
+                      <h3>用户列表</h3>
+                    </div>
+                    <div v-if="prop.multiple && selectUserList.length" class="selector-tags">
+                      <el-tag v-for="user in selectUserList" :key="user.userId" closable @close="handleCloseTag(user)">
+                        {{ user.nickName }}
+                      </el-tag>
+                    </div>
+                  </div>
+                </template>
+
+                <vxe-table
+                  ref="tableRef"
+                  class="selector-table"
+                  height="400px"
+                  border
+                  show-overflow
+                  :data="userList"
+                  :loading="loading"
+                  :row-config="{ keyField: 'userId', isHover: true }"
+                  :checkbox-config="{
+                    reserve: true,
+                    trigger: 'row',
+                    highlight: true,
+                    showHeader: prop.multiple
+                  }"
+                  @checkbox-all="handleCheckboxAll"
+                  @checkbox-change="handleCheckboxChange"
+                >
+                  <vxe-column type="checkbox" width="50" align="center" />
+                  <vxe-column key="userId" title="用户编号" align="center" field="userId" />
+                  <vxe-column key="userName" title="用户名称" align="center" field="userName" />
+                  <vxe-column key="nickName" title="用户昵称" align="center" field="nickName" />
+                  <vxe-column key="deptName" title="部门" align="center" field="deptName" />
+                  <vxe-column key="phoneNumber" title="手机号码" align="center" field="phoneNumber" width="120" />
+                  <vxe-column key="status" title="状态" align="center">
+                    <template #default="scope">
+                      <dict-tag :options="sys_normal_disable" :value="scope.row.status"></dict-tag>
+                    </template>
+                  </vxe-column>
+
+                  <vxe-column title="创建时间" align="center" width="160">
+                    <template #default="scope">
+                      <span>{{ scope.row.createTime }}</span>
+                    </template>
+                  </vxe-column>
+                </vxe-table>
+
+                <pagination
+                  v-show="total > 0"
+                  v-model:page="queryParams.pageNum"
+                  v-model:limit="queryParams.pageSize"
+                  :total="total"
+                  @pagination="pageList"
+                />
+              </el-card>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <template #footer>
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { VxeTableInstance } from 'vxe-table';
+import animateConfig from '@/animate';
+import { DeptTreeVO, DeptVO } from '@/api/system/dept/types';
+import api from '@/api/system/user';
+import { UserQuery, UserVO } from '@/api/system/user/types';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+import { useDict } from '@/utils/dict';
+
+interface PropType {
+  modelValue?: UserVO[] | UserVO | undefined;
+  multiple?: boolean;
+  data?: string | number | (string | number)[] | undefined;
+  userIds?: string | number | (string | number)[] | undefined;
+}
+const prop = withDefaults(defineProps<PropType>(), {
+  multiple: true,
+  modelValue: undefined,
+  data: undefined,
+  userIds: undefined
+});
+const emit = defineEmits(['update:modelValue', 'confirmCallBack']);
+
+const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
+
+const userList = ref<UserVO[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
+const deptName = ref('');
+const treeCollapsed = ref(false);
+const deptOptions = ref<DeptTreeVO[]>([]);
+const selectUserList = ref<UserVO[]>([]);
+
+const deptTreeRef = ref<ElTreeInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const tableRef = ref<VxeTableInstance<UserVO>>();
+
+const { dialog, openDialog, closeDialog } = useDialogState('用户选择');
+
+const queryParams = ref<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  userName: '',
+  phoneNumber: '',
+  status: '',
+  deptId: '',
+  roleId: '',
+  userIds: ''
+});
+
+const defaultSelectUserIds = computed(() => computedIds(prop.data));
+
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    deptTreeRef.value?.filter(deptName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+const confirm = () => {
+  emit('update:modelValue', selectUserList.value);
+  emit('confirmCallBack', selectUserList.value);
+  closeDialog();
+};
+
+const computedIds = data => {
+  if (data === '' || data === null || data === undefined) {
+    return [];
+  }
+  if (data instanceof Array) {
+    return data.map(item => String(item));
+  } else if (typeof data === 'string') {
+    return data.split(',');
+  } else if (typeof data === 'number') {
+    return [String(data)];
+  } else {
+    console.warn('<UserSelect> The data type of data should be array or string or number, but I received other');
+    return [];
+  }
+};
+
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
+
+/** 查询部门下拉树结构 */
+const getTreeSelect = async () => {
+  const res = await api.deptTreeSelect();
+  deptOptions.value = res.data;
+};
+
+/** 查询用户列表 */
+const getList = async () => {
+  loading.value = true;
+  queryParams.value.userIds = prop.userIds;
+  const res = await api.listUser(applyDateRange(queryParams.value));
+  loading.value = false;
+  userList.value = res.data?.rows;
+  total.value = res.data?.total;
+};
+
+const pageList = async () => {
+  await getList();
+  const users = userList.value.filter(item => {
+    return selectUserList.value.some(user => user.userId === item.userId);
+  });
+  await tableRef.value.setCheckboxRow(users, true);
+};
+
+/** 节点单击事件 */
+const handleNodeClick = (data: DeptVO) => {
+  queryParams.value.deptId = data.id;
+  handleQuery();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = (refresh = true) => {
+  resetDateRange();
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.deptId = undefined;
+  deptTreeRef.value?.setCurrentKey(undefined);
+  refresh && handleQuery();
+};
+
+const handleCheckboxChange = checked => {
+  if (!prop.multiple && checked.checked) {
+    tableRef.value.setCheckboxRow(selectUserList.value, false);
+    selectUserList.value = [];
+  }
+  const row = checked.row;
+  if (checked.checked) {
+    selectUserList.value.push(row);
+  } else {
+    selectUserList.value = selectUserList.value.filter(item => {
+      return item.userId !== row.userId;
+    });
+  }
+};
+const handleCheckboxAll = checked => {
+  const rows = userList.value;
+  if (checked.checked) {
+    rows.forEach(row => {
+      if (!selectUserList.value.some(item => item.userId === row.userId)) {
+        selectUserList.value.push(row);
+      }
+    });
+  } else {
+    selectUserList.value = selectUserList.value.filter(item => {
+      return !rows.some(row => row.userId === item.userId);
+    });
+  }
+};
+
+const handleCloseTag = (user: UserVO) => {
+  const userId = user.userId;
+  // 使用split删除用户
+  const index = selectUserList.value.findIndex(item => item.userId === userId);
+  const rows = selectUserList.value[index];
+  tableRef.value?.setCheckboxRow(rows, false);
+  selectUserList.value.splice(index, 1);
+};
+
+const initSelectUser = async () => {
+  if (defaultSelectUserIds.value.length > 0) {
+    const { data } = await api.optionSelect(defaultSelectUserIds.value);
+    selectUserList.value = data;
+    const users = userList.value.filter(item => {
+      return defaultSelectUserIds.value.includes(String(item.userId));
+    });
+    await nextTick(() => {
+      tableRef.value.setCheckboxRow(users, true);
+    });
+  }
+};
+const close = () => {
+  closeDialog();
+};
+
+watch(
+  () => dialog.visible,
+  async (newValue: boolean) => {
+    if (newValue) {
+      await getTreeSelect(); // 初始化部门数据
+      await getList(); // 初始化列表数据
+      await initSelectUser();
+    } else {
+      tableRef.value.clearCheckboxReserve();
+      tableRef.value.clearCheckboxRow();
+      resetQuery(false);
+      selectUserList.value = [];
+    }
+  }
+);
+
+defineExpose({
+  open: openDialog,
+  close: closeDialog
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+@use '@/assets/styles/components/selector-dialog' as selectorDialog;
+
+@include pageShell.collapsible-tree-layout(992px);
+@include selectorDialog.shell-gap('.user-select-shell', '.user-select-main');
+@include selectorDialog.card-shell;
+@include selectorDialog.selector-header-tags(992px);
+@include selectorDialog.dialog-body-padding('user-select-dialog');
+@include selectorDialog.selector-table;
+
+.selector-layout {
+  align-items: stretch;
+}
+
+.selector-side-card {
+  min-height: 100%;
+}
+
+.selector-dept-input {
+  margin-bottom: 12px;
+}
+
+.selector-tree {
+  min-height: 400px;
+}
+
+@media (max-width: 992px) {
+  .selector-tree {
+    min-height: 220px;
+  }
+}
+</style>
diff --git a/src/components/iFrame/index.vue b/src/components/iFrame/index.vue
new file mode 100644
index 0000000..98f2224
--- /dev/null
+++ b/src/components/iFrame/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <div v-loading="loading" :style="'height:' + height">
+    <iframe :src="url" frameborder="no" style="width: 100%; height: 100%" scrolling="auto" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+  src: propTypes.string.isRequired
+});
+
+const height = ref(document.documentElement.clientHeight - 94.5 + 'px;');
+const loading = ref(true);
+const url = computed(() => props.src);
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+  window.onresize = function temp() {
+    height.value = document.documentElement.clientHeight - 94.5 + 'px;';
+  };
+});
+</script>
diff --git a/src/directive/common/copyText.ts b/src/directive/common/copyText.ts
new file mode 100644
index 0000000..54d3f54
--- /dev/null
+++ b/src/directive/common/copyText.ts
@@ -0,0 +1,67 @@
+/**
+ * v-copyText 复制文本内容
+ * Copyright (c) 2022 ruoyi
+ */
+import type { DirectiveBinding } from 'vue';
+
+export default {
+  beforeMount(el: any, { value, arg }: DirectiveBinding) {
+    if (arg === 'callback') {
+      el.$copyCallback = value;
+    } else {
+      el.$copyValue = value;
+      const handler = () => {
+        copyTextToClipboard(el.$copyValue);
+        if (el.$copyCallback) {
+          el.$copyCallback(el.$copyValue);
+        }
+      };
+      el.addEventListener('click', handler);
+      el.$destroyCopy = () => el.removeEventListener('click', handler);
+    }
+  }
+};
+
+function copyTextToClipboard(input: string, { target = document.body } = {}) {
+  const element = document.createElement('textarea');
+  const previouslyFocusedElement = document.activeElement as HTMLInputElement;
+  element.value = input;
+  // Prevent keyboard from showing on mobile
+  element.setAttribute('readonly', '');
+
+  element.style.contain = 'strict';
+  element.style.position = 'absolute';
+  element.style.left = '-9999px';
+  element.style.fontSize = '12pt'; // Prevent zooming on iOS
+
+  const selection = document.getSelection();
+  let originalRange;
+  if (selection) {
+    originalRange = selection?.rangeCount > 0 && selection.getRangeAt(0);
+  }
+  target.append(element);
+  element.select();
+
+  // Explicit selection workaround for iOS
+  element.selectionStart = 0;
+  element.selectionEnd = input.length;
+
+  let isSuccess = false;
+  try {
+    isSuccess = document.execCommand('copy');
+  } catch (err) {
+    console.error(err);
+  }
+  element.remove();
+
+  if (originalRange) {
+    selection?.removeAllRanges();
+    selection?.addRange(originalRange);
+  }
+
+  // Get the focus back on the previously focused element, if any
+  if (previouslyFocusedElement) {
+    previouslyFocusedElement.focus();
+  }
+  return isSuccess;
+}
diff --git a/src/directive/index.ts b/src/directive/index.ts
new file mode 100644
index 0000000..c0bed9a
--- /dev/null
+++ b/src/directive/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue';
+import copyText from './common/copyText';
+import { hasPermi, hasRoles } from './permission';
+
+export default (app: App) => {
+  app.directive('copyText', copyText);
+  app.directive('hasPermi', hasPermi);
+  app.directive('hasRoles', hasRoles);
+};
diff --git a/src/directive/permission/index.ts b/src/directive/permission/index.ts
new file mode 100644
index 0000000..c06568c
--- /dev/null
+++ b/src/directive/permission/index.ts
@@ -0,0 +1,44 @@
+import type { Directive, DirectiveBinding } from 'vue';
+import { useUserStore } from '@/store/modules/user';
+/**
+ * 操作权限处理
+ */
+export const hasPermi: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const { permissions } = useUserStore();
+    // 「其他角色」按钮权限校验
+    const { value } = binding;
+    if (value && value instanceof Array && value.length > 0) {
+      const hasPermission = permissions.some((permi: string) => {
+        return permi === '*:*:*' || value.includes(permi);
+      });
+      if (!hasPermission) {
+        el.parentNode && el.parentNode.removeChild(el);
+        return false;
+      }
+    } else {
+      throw new Error("check perms! Like v-has-permi=\"['system:user:add','system:user:edit']\"");
+    }
+  }
+};
+
+/**
+ * 角色权限处理
+ */
+export const hasRoles: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const { value } = binding;
+    const { roles } = useUserStore();
+    if (value && value instanceof Array && value.length > 0) {
+      const hasRole = roles.some((role: string) => {
+        return role === 'superadmin' || role === 'admin' || value.includes(role);
+      });
+      if (!hasRole) {
+        el.parentNode && el.parentNode.removeChild(el);
+        return false;
+      }
+    } else {
+      throw new Error("check roles! Like v-has-roles=\"['admin','test']\"");
+    }
+  }
+};
diff --git a/src/enums/LanguageEnum.ts b/src/enums/LanguageEnum.ts
new file mode 100644
index 0000000..c857c43
--- /dev/null
+++ b/src/enums/LanguageEnum.ts
@@ -0,0 +1,5 @@
+export enum LanguageEnum {
+  zh_CN = 'zh_CN',
+
+  en_US = 'en_US'
+}
diff --git a/src/enums/MenuTypeEnum.ts b/src/enums/MenuTypeEnum.ts
new file mode 100644
index 0000000..cecebd2
--- /dev/null
+++ b/src/enums/MenuTypeEnum.ts
@@ -0,0 +1,15 @@
+export enum MenuTypeEnum {
+  /**
+   * 目录
+   */
+  M = 'M',
+  /**
+   * 菜单
+   */
+  C = 'C',
+
+  /**
+   * 按钮
+   */
+  F = 'F'
+}
diff --git a/src/enums/NavTypeEnum.ts b/src/enums/NavTypeEnum.ts
new file mode 100644
index 0000000..58573ce
--- /dev/null
+++ b/src/enums/NavTypeEnum.ts
@@ -0,0 +1,17 @@
+/**
+ * 导航栏布局枚举
+ */
+export enum NavTypeEnum {
+  /**
+   * 左侧导航
+   */
+  LEFT = 'left',
+  /**
+   * 顶部导航
+   */
+  TOP = 'top',
+  /**
+   * 混合导航
+   */
+  MIX = 'mix'
+}
diff --git a/src/enums/RespEnum.ts b/src/enums/RespEnum.ts
new file mode 100644
index 0000000..ce60a51
--- /dev/null
+++ b/src/enums/RespEnum.ts
@@ -0,0 +1,90 @@
+export enum HttpStatus {
+  /**
+   * 操作成功
+   */
+  SUCCESS = 200,
+  /**
+   * 对象创建成功
+   */
+  CREATED = 201,
+  /**
+   * 请求已经被接受
+   */
+  ACCEPTED = 202,
+  /**
+   * 操作已经执行成功，但是没有返回数据
+   */
+  NO_CONTENT = 204,
+  /**
+   * 资源已经被移除
+   */
+  MOVED_PERM = 301,
+  /**
+   * 重定向
+   */
+  SEE_OTHER = 303,
+  /**
+   * 资源没有被修改
+   */
+  NOT_MODIFIED = 304,
+  /**
+   * 参数列表错误（缺少，格式不匹配）
+   */
+  PARAM_ERROR = 400,
+  /**
+   * 未授权
+   */
+  UNAUTHORIZED = 401,
+  /**
+   * 访问受限，授权过期
+   */
+  FORBIDDEN = 403,
+  /**
+   * 资源，服务未找到
+   */
+  NOT_FOUND = 404,
+  /**
+   * 不允许的http方法
+   */
+  BAD_METHOD = 405,
+  /**
+   * 资源冲突，或者资源被锁
+   */
+  CONFLICT = 409,
+  /**
+   * 不支持的数据，媒体类型
+   */
+  UNSUPPORTED_TYPE = 415,
+  /**
+   * 系统内部错误
+   */
+  SERVER_ERROR = 500,
+  /**
+   * 接口未实现
+   */
+  NOT_IMPLEMENTED = 501,
+  /**
+   * 服务不可用，过载或者维护
+   */
+  BAD_GATEWAY = 502,
+  /**
+   * 网关超时
+   */
+  GATEWAY_TIMEOUT = 504,
+  /**
+   * 未知错误
+   */
+  UNKNOWN_ERROR = 520,
+  /**
+   * 服务未知错误
+   */
+  SERVICE_ERROR = 521,
+  /**
+   * 数据库未知错误
+   */
+  DATABASE_ERROR = 522,
+  /**
+   * 系统警告消息
+   */
+  WARN = 601
+}
diff --git a/src/enums/SideThemeEnum.ts b/src/enums/SideThemeEnum.ts
new file mode 100644
index 0000000..f172858
--- /dev/null
+++ b/src/enums/SideThemeEnum.ts
@@ -0,0 +1,4 @@
+export enum SideThemeEnum {
+  DARK = 'theme-dark',
+  LIGHT = 'theme-light'
+}
diff --git a/src/hooks/async/useLoading.ts b/src/hooks/async/useLoading.ts
new file mode 100644
index 0000000..19a2178
--- /dev/null
+++ b/src/hooks/async/useLoading.ts
@@ -0,0 +1,22 @@
+export function useLoading(initialValue = false) {
+  const loading = ref(initialValue);
+
+  const setLoading = (value: boolean) => {
+    loading.value = value;
+  };
+
+  const withLoading = async <T>(task: () => Promise<T>) => {
+    loading.value = true;
+    try {
+      return await task();
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    loading,
+    setLoading,
+    withLoading
+  };
+}
diff --git a/src/hooks/dialog/useDialogState.ts b/src/hooks/dialog/useDialogState.ts
new file mode 100644
index 0000000..015bffa
--- /dev/null
+++ b/src/hooks/dialog/useDialogState.ts
@@ -0,0 +1,33 @@
+export function useDialogState(initialTitle = '') {
+  const dialog = reactive<DialogOption>({
+    visible: false,
+    title: initialTitle
+  });
+
+  const openDialog = (title?: string) => {
+    if (title !== undefined) {
+      dialog.title = title;
+    }
+    dialog.visible = true;
+  };
+
+  const closeDialog = () => {
+    dialog.visible = false;
+  };
+
+  const toggleDialog = () => {
+    dialog.visible = !dialog.visible;
+  };
+
+  const setTitle = (title: string) => {
+    dialog.title = title;
+  };
+
+  return {
+    dialog,
+    openDialog,
+    closeDialog,
+    toggleDialog,
+    setTitle
+  };
+}
diff --git a/src/hooks/dialog/useFormDialog.ts b/src/hooks/dialog/useFormDialog.ts
new file mode 100644
index 0000000..c8916d3
--- /dev/null
+++ b/src/hooks/dialog/useFormDialog.ts
@@ -0,0 +1,42 @@
+import type { Ref } from 'vue';
+import { useDialogState } from './useDialogState';
+
+interface UseFormDialogOptions<T extends Record<string, any>> {
+  form: Ref<T>;
+  formRef?: Ref<ElFormInstance | undefined>;
+  initialFormData: T;
+  initialTitle?: string;
+}
+
+export function useFormDialog<T extends Record<string, any>>(options: UseFormDialogOptions<T>) {
+  const { form, formRef, initialFormData, initialTitle } = options;
+  const { dialog, openDialog, closeDialog, setTitle } = useDialogState(initialTitle);
+
+  const resetForm = () => {
+    form.value = { ...initialFormData };
+    formRef?.value?.resetFields();
+    formRef?.value?.clearValidate?.();
+  };
+
+  const openFormDialog = (title?: string) => {
+    resetForm();
+    openDialog(title);
+  };
+
+  const showDialog = (title?: string) => {
+    openDialog(title);
+  };
+
+  const closeFormDialog = () => {
+    closeDialog();
+  };
+
+  return {
+    dialog,
+    resetForm,
+    openDialog: openFormDialog,
+    showDialog,
+    closeDialog: closeFormDialog,
+    setTitle
+  };
+}
diff --git a/src/hooks/form/useDateRangeQuery.ts b/src/hooks/form/useDateRangeQuery.ts
new file mode 100644
index 0000000..98cb224
--- /dev/null
+++ b/src/hooks/form/useDateRangeQuery.ts
@@ -0,0 +1,19 @@
+import { addDateRange } from '@/utils/ruoyi';
+
+export function useDateRangeQuery(propName?: string) {
+  const dateRange = ref<any>(['', '']);
+
+  const applyDateRange = <T extends Record<string, any>>(queryParams: T) => {
+    return addDateRange(queryParams, dateRange.value, propName);
+  };
+
+  const resetDateRange = () => {
+    dateRange.value = ['', ''];
+  };
+
+  return {
+    dateRange,
+    applyDateRange,
+    resetDateRange
+  };
+}
diff --git a/src/hooks/form/useSearchReset.ts b/src/hooks/form/useSearchReset.ts
new file mode 100644
index 0000000..8c261d3
--- /dev/null
+++ b/src/hooks/form/useSearchReset.ts
@@ -0,0 +1,43 @@
+import type { Ref } from 'vue';
+
+interface UseSearchResetOptions<T extends Record<string, any>> {
+  queryFormRef: Ref<ElFormInstance | undefined>;
+  queryParams?: Ref<T>;
+  pageNumKey?: keyof T;
+  pageSizeKey?: keyof T;
+  initialPageNum?: number;
+  initialPageSize?: number;
+  resetExtras?: () => void;
+  afterReset?: () => void;
+}
+
+export function useSearchReset<T extends Record<string, any>>(options: UseSearchResetOptions<T>) {
+  const {
+    queryFormRef,
+    queryParams,
+    pageNumKey,
+    pageSizeKey,
+    initialPageNum = 1,
+    initialPageSize,
+    resetExtras,
+    afterReset
+  } = options;
+
+  const resetQuery = () => {
+    queryFormRef.value?.resetFields();
+    if (queryParams?.value) {
+      if (pageNumKey) {
+        queryParams.value[pageNumKey] = initialPageNum as T[keyof T];
+      }
+      if (pageSizeKey && initialPageSize !== undefined) {
+        queryParams.value[pageSizeKey] = initialPageSize as T[keyof T];
+      }
+    }
+    resetExtras?.();
+    afterReset?.();
+  };
+
+  return {
+    resetQuery
+  };
+}
diff --git a/src/hooks/form/useSearchToggle.ts b/src/hooks/form/useSearchToggle.ts
new file mode 100644
index 0000000..9c89d0a
--- /dev/null
+++ b/src/hooks/form/useSearchToggle.ts
@@ -0,0 +1,17 @@
+export function useSearchToggle(initialValue = true) {
+  const showSearch = ref(initialValue);
+
+  const toggleSearch = () => {
+    showSearch.value = !showSearch.value;
+  };
+
+  const setShowSearch = (value: boolean) => {
+    showSearch.value = value;
+  };
+
+  return {
+    showSearch,
+    toggleSearch,
+    setShowSearch
+  };
+}
diff --git a/src/hooks/table/useFullHeightTable.ts b/src/hooks/table/useFullHeightTable.ts
new file mode 100644
index 0000000..acb4f9f
--- /dev/null
+++ b/src/hooks/table/useFullHeightTable.ts
@@ -0,0 +1,298 @@
+import { useRoute } from 'vue-router';
+import { useSettingsStore } from '@/store/modules/settings';
+
+interface VueBackedHTMLElement extends HTMLElement {
+  [key: string]: unknown;
+}
+
+interface TableComponentHost {
+  proxy?: {
+    doLayout?: () => void;
+  };
+}
+
+interface TableState {
+  height: string;
+  maxHeight: string;
+  bodyHeight: string;
+  bodyMaxHeight: string;
+  bodyOverflowY: string;
+  bodyOverflowX: string;
+}
+
+const tableStates = new WeakMap<HTMLElement, TableState>();
+const vueParentComponentKey = '__vueParentComponent';
+
+const getTableComponentHost = (table: HTMLElement): TableComponentHost | undefined => {
+  const host = (table as VueBackedHTMLElement)[vueParentComponentKey];
+  if (!host || typeof host !== 'object') return undefined;
+  return host as TableComponentHost;
+};
+
+const getOuterHeight = (element: HTMLElement) => {
+  const style = window.getComputedStyle(element);
+  const marginTop = Number.parseFloat(style.marginTop) || 0;
+  const marginBottom = Number.parseFloat(style.marginBottom) || 0;
+  return element.getBoundingClientRect().height + marginTop + marginBottom;
+};
+
+const isVisible = (element: HTMLElement) => {
+  const rect = element.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0;
+};
+
+const getFollowingHeight = (table: HTMLElement) => {
+  const parent = table.parentElement;
+  if (!parent) return 0;
+
+  const children = Array.from(parent.children) as HTMLElement[];
+  const tableIndex = children.indexOf(table);
+  if (tableIndex === -1) return 0;
+
+  return children.slice(tableIndex + 1).reduce((height, child) => {
+    if (!isVisible(child)) return height;
+    return height + getOuterHeight(child);
+  }, 0);
+};
+
+const getBottomPadding = (table: HTMLElement) => {
+  const parent = table.parentElement;
+  if (!parent) return 0;
+  const parentStyle = window.getComputedStyle(parent);
+  return Number.parseFloat(parentStyle.paddingBottom) || 0;
+};
+
+const getBodyWrapper = (table: HTMLElement) => {
+  return table.querySelector<HTMLElement>('.el-table__body-wrapper');
+};
+
+const getTableComponent = (table: HTMLElement) => {
+  return getTableComponentHost(table)?.proxy;
+};
+
+const getPageOverflowHeight = () => {
+  const documentElement = document.documentElement;
+  return Math.max(0, documentElement.scrollHeight - documentElement.clientHeight);
+};
+
+const rememberTableState = (table: HTMLElement) => {
+  if (tableStates.has(table)) return;
+
+  const bodyWrapper = getBodyWrapper(table);
+  tableStates.set(table, {
+    height: table.style.height,
+    maxHeight: table.style.maxHeight,
+    bodyHeight: bodyWrapper?.style.height ?? '',
+    bodyMaxHeight: bodyWrapper?.style.maxHeight ?? '',
+    bodyOverflowY: bodyWrapper?.style.overflowY ?? '',
+    bodyOverflowX: bodyWrapper?.style.overflowX ?? ''
+  });
+};
+
+const resetTable = (table: HTMLElement) => {
+  const originalState = tableStates.get(table);
+  if (!originalState) return;
+
+  const bodyWrapper = getBodyWrapper(table);
+  table.classList.remove('is-full-height-table');
+  table.style.height = originalState.height;
+  table.style.maxHeight = originalState.maxHeight;
+  if (bodyWrapper) {
+    bodyWrapper.style.height = originalState.bodyHeight;
+    bodyWrapper.style.maxHeight = originalState.bodyMaxHeight;
+    bodyWrapper.style.overflowY = originalState.bodyOverflowY;
+    bodyWrapper.style.overflowX = originalState.bodyOverflowX;
+  }
+  tableStates.delete(table);
+  getTableComponent(table)?.doLayout?.();
+};
+
+const resetAllTables = () => {
+  document.querySelectorAll<HTMLElement>('.is-full-height-table').forEach(resetTable);
+};
+
+const calculateTableHeight = (table: HTMLElement) => {
+  const rect = table.getBoundingClientRect();
+  const viewportBottom = window.innerHeight;
+  const followingHeight = getFollowingHeight(table);
+  const bottomPadding = getBottomPadding(table);
+  const bottomOffset = window.innerWidth < 768 ? 28 : 32;
+  const minHeight = window.innerWidth < 768 ? 220 : 260;
+
+  return Math.max(minHeight, Math.floor(viewportBottom - rect.top - followingHeight - bottomPadding - bottomOffset));
+};
+
+const applyTableHeightValue = (table: HTMLElement, tableHeight: number) => {
+  const nextHeight = `${tableHeight}px`;
+  if (table.style.height !== nextHeight) {
+    table.style.height = nextHeight;
+  }
+  if (table.style.maxHeight !== nextHeight) {
+    table.style.maxHeight = nextHeight;
+  }
+  table.classList.add('is-full-height-table');
+
+  const bodyWrapper = getBodyWrapper(table);
+  if (bodyWrapper) {
+    const headerHeight = table.querySelector<HTMLElement>('.el-table__header-wrapper')?.offsetHeight ?? 0;
+    const footerHeight = table.querySelector<HTMLElement>('.el-table__footer-wrapper')?.offsetHeight ?? 0;
+    const bodyHeight = `${Math.max(120, tableHeight - headerHeight - footerHeight)}px`;
+    if (bodyWrapper.style.height !== bodyHeight) {
+      bodyWrapper.style.height = bodyHeight;
+    }
+    if (bodyWrapper.style.maxHeight !== bodyHeight) {
+      bodyWrapper.style.maxHeight = bodyHeight;
+    }
+    bodyWrapper.style.overflowY = 'auto';
+    bodyWrapper.style.overflowX = 'auto';
+  }
+
+  getTableComponent(table)?.doLayout?.();
+};
+
+const applyTableHeight = (table: HTMLElement) => {
+  rememberTableState(table);
+
+  const minHeight = window.innerWidth < 768 ? 220 : 260;
+  const tableHeight = calculateTableHeight(table);
+  applyTableHeightValue(table, tableHeight);
+
+  const overflowHeight = getPageOverflowHeight();
+  if (overflowHeight > 0 && tableHeight > minHeight) {
+    applyTableHeightValue(table, Math.max(minHeight, tableHeight - overflowHeight - 4));
+  }
+};
+
+const canManageTable = (table: HTMLElement) => {
+  if (!isVisible(table)) return false;
+  if (!table.closest('.app-main')) return false;
+  if (!table.closest('.table-panel')) return false;
+  if (table.closest('.el-dialog')) return false;
+  if (table.dataset.fullHeightTable === 'false') return false;
+
+  const hasManualHeight = Boolean(table.style.height || table.style.maxHeight);
+  return !hasManualHeight || tableStates.has(table);
+};
+
+const getManagedTables = () => {
+  return Array.from(document.querySelectorAll<HTMLElement>('.app-main .table-panel .data-table.el-table')).filter(
+    canManageTable
+  );
+};
+
+export function useFullHeightTable() {
+  const route = useRoute();
+  const settingsStore = useSettingsStore();
+  const observedElements = new Set<Element>();
+  let resizeObserver: ResizeObserver | undefined;
+  let mutationObserver: MutationObserver | undefined;
+  let animationFrame = 0;
+  const timerIds = new Set<number>();
+
+  const refreshObservedElements = () => {
+    if (!resizeObserver) return;
+
+    const nextElements = new Set<Element>([
+      ...Array.from(document.querySelectorAll('.app-main, .app-main .p-2, .app-main .table-panel')),
+      ...Array.from(document.querySelectorAll('.app-main .search-panel, .app-main .tree-panel-shell')),
+      ...getManagedTables()
+    ]);
+
+    observedElements.forEach(element => {
+      if (!nextElements.has(element)) {
+        resizeObserver?.unobserve(element);
+        observedElements.delete(element);
+      }
+    });
+
+    nextElements.forEach(element => {
+      if (!observedElements.has(element)) {
+        resizeObserver?.observe(element);
+        observedElements.add(element);
+      }
+    });
+  };
+
+  const recalculate = () => {
+    animationFrame = 0;
+    if (!settingsStore.fullHeightTable) {
+      resetAllTables();
+      return;
+    }
+
+    const tables = getManagedTables();
+    document.querySelectorAll<HTMLElement>('.is-full-height-table').forEach(table => {
+      if (!tables.includes(table)) {
+        resetTable(table);
+      }
+    });
+    tables.forEach(applyTableHeight);
+    refreshObservedElements();
+  };
+
+  const scheduleRecalculate = (delay = 0) => {
+    if (delay > 0) {
+      const timerId = window.setTimeout(() => {
+        timerIds.delete(timerId);
+        scheduleRecalculate();
+      }, delay);
+      timerIds.add(timerId);
+      return;
+    }
+    if (animationFrame) return;
+    animationFrame = window.requestAnimationFrame(recalculate);
+  };
+
+  const scheduleLayoutRecheck = () => {
+    scheduleRecalculate();
+    [80, 180, 360].forEach(scheduleRecalculate);
+  };
+
+  onMounted(() => {
+    resizeObserver = new ResizeObserver(() => scheduleLayoutRecheck());
+    mutationObserver = new MutationObserver(() => {
+      refreshObservedElements();
+      scheduleLayoutRecheck();
+    });
+
+    const appMain = document.querySelector('.app-main');
+    if (appMain) {
+      mutationObserver.observe(appMain, {
+        attributes: true,
+        attributeFilter: ['class', 'style'],
+        childList: true,
+        subtree: true
+      });
+      appMain.addEventListener('transitionend', scheduleLayoutRecheck);
+    }
+    window.addEventListener('resize', scheduleLayoutRecheck);
+
+    refreshObservedElements();
+    scheduleLayoutRecheck();
+  });
+
+  onBeforeUnmount(() => {
+    if (animationFrame) {
+      window.cancelAnimationFrame(animationFrame);
+    }
+    timerIds.forEach(timerId => window.clearTimeout(timerId));
+    timerIds.clear();
+    resizeObserver?.disconnect();
+    mutationObserver?.disconnect();
+    document.querySelector('.app-main')?.removeEventListener('transitionend', scheduleLayoutRecheck);
+    window.removeEventListener('resize', scheduleLayoutRecheck);
+    resetAllTables();
+  });
+
+  watch(
+    () => settingsStore.fullHeightTable,
+    () => scheduleLayoutRecheck()
+  );
+
+  watch(
+    () => route.fullPath,
+    () => {
+      nextTick(() => scheduleLayoutRecheck());
+    }
+  );
+}
diff --git a/src/hooks/table/useTableSelection.ts b/src/hooks/table/useTableSelection.ts
new file mode 100644
index 0000000..739e19d
--- /dev/null
+++ b/src/hooks/table/useTableSelection.ts
@@ -0,0 +1,33 @@
+const isSelectableId = (value: unknown): value is string | number => {
+  return typeof value === 'string' || typeof value === 'number';
+};
+
+export function useTableSelection<T, ID extends string | number = string | number>(getRowId: (row: T) => ID) {
+  const ids = ref<ID[]>([]);
+  const selectedRows = ref<T[]>([]);
+  const single = ref(true);
+  const multiple = ref(true);
+
+  const handleSelectionChange = (selection: T[]) => {
+    selectedRows.value = selection;
+    ids.value = selection.map(getRowId).filter(isSelectableId) as ID[];
+    single.value = selection.length !== 1;
+    multiple.value = selection.length === 0;
+  };
+
+  const clearSelection = () => {
+    selectedRows.value = [];
+    ids.value = [];
+    single.value = true;
+    multiple.value = true;
+  };
+
+  return {
+    ids,
+    selectedRows,
+    single,
+    multiple,
+    handleSelectionChange,
+    clearSelection
+  };
+}
diff --git a/src/hooks/table/useTableSortQuery.ts b/src/hooks/table/useTableSortQuery.ts
new file mode 100644
index 0000000..7a94d8f
--- /dev/null
+++ b/src/hooks/table/useTableSortQuery.ts
@@ -0,0 +1,44 @@
+import type { Ref } from 'vue';
+
+type TableSortOrder = 'ascending' | 'descending' | null;
+
+interface TableSortState {
+  prop: string;
+  order: TableSortOrder;
+}
+
+interface UseTableSortQueryOptions<T extends Record<string, any>> {
+  queryParams: Ref<T>;
+  defaultSort: TableSortState;
+  tableRef?: Ref<ElTableInstance | undefined>;
+  onSortChange?: () => void;
+}
+
+export function useTableSortQuery<T extends { orderByColumn?: string; isAsc?: string | null }>(
+  options: UseTableSortQueryOptions<T>
+) {
+  const { queryParams, defaultSort: initialSort, tableRef, onSortChange } = options;
+  const defaultSort = ref<TableSortState>({ ...initialSort });
+
+  const handleSortChange = (column: { prop: string; order: TableSortOrder }) => {
+    queryParams.value.orderByColumn = column.prop as T['orderByColumn'];
+    queryParams.value.isAsc = column.order as T['isAsc'];
+    onSortChange?.();
+  };
+
+  const resetSort = () => {
+    queryParams.value.orderByColumn = defaultSort.value.prop as T['orderByColumn'];
+    queryParams.value.isAsc = defaultSort.value.order as T['isAsc'];
+    if (tableRef?.value && defaultSort.value.order) {
+      tableRef.value.sort(defaultSort.value.prop, defaultSort.value.order);
+      return;
+    }
+    onSortChange?.();
+  };
+
+  return {
+    defaultSort,
+    handleSortChange,
+    resetSort
+  };
+}
diff --git a/src/hooks/tree/useTreeCollapsed.ts b/src/hooks/tree/useTreeCollapsed.ts
new file mode 100644
index 0000000..8e298eb
--- /dev/null
+++ b/src/hooks/tree/useTreeCollapsed.ts
@@ -0,0 +1,17 @@
+export function useTreeCollapsed(initialValue = false) {
+  const treeCollapsed = ref(initialValue);
+
+  const toggleCollapsed = () => {
+    treeCollapsed.value = !treeCollapsed.value;
+  };
+
+  const setCollapsed = (value: boolean) => {
+    treeCollapsed.value = value;
+  };
+
+  return {
+    treeCollapsed,
+    toggleCollapsed,
+    setCollapsed
+  };
+}
diff --git a/src/hooks/tree/useTreeTableExpand.ts b/src/hooks/tree/useTreeTableExpand.ts
new file mode 100644
index 0000000..26b0c5c
--- /dev/null
+++ b/src/hooks/tree/useTreeTableExpand.ts
@@ -0,0 +1,39 @@
+import type { Ref } from 'vue';
+
+interface UseTreeTableExpandOptions<T> {
+  tableRef: Ref<ElTableInstance | undefined>;
+  data: Ref<T[]>;
+  initialExpandAll?: boolean;
+  getChildren?: (row: T) => T[] | undefined;
+}
+
+export function useTreeTableExpand<T extends Record<string, any>>(options: UseTreeTableExpandOptions<T>) {
+  const { tableRef, data, initialExpandAll = true, getChildren = row => row.children as T[] | undefined } = options;
+
+  const isExpandAll = ref(initialExpandAll);
+
+  const toggleRows = (rows: T[], expanded: boolean) => {
+    rows.forEach(row => {
+      tableRef.value?.toggleRowExpansion(row, expanded);
+      const children = getChildren(row);
+      if (children?.length) {
+        toggleRows(children, expanded);
+      }
+    });
+  };
+
+  const setExpandAll = (expanded: boolean) => {
+    isExpandAll.value = expanded;
+    toggleRows(data.value, expanded);
+  };
+
+  const handleToggleExpandAll = () => {
+    setExpandAll(!isExpandAll.value);
+  };
+
+  return {
+    isExpandAll,
+    setExpandAll,
+    handleToggleExpandAll
+  };
+}
diff --git a/src/lang/en_US.ts b/src/lang/en_US.ts
new file mode 100644
index 0000000..0f6ffac
--- /dev/null
+++ b/src/lang/en_US.ts
@@ -0,0 +1,76 @@
+export default {
+  // 路由国际化
+  route: {
+    dashboard: 'Dashboard',
+    document: 'Document'
+  },
+  // 登录页面国际化
+  login: {
+    username: 'Username',
+    password: 'Password',
+    login: 'Login',
+    logging: 'Logging...',
+    code: 'Verification Code',
+    rememberPassword: 'Remember me',
+    switchRegisterPage: 'Sign up now',
+    rule: {
+      username: {
+        required: 'Please enter your account'
+      },
+      password: {
+        required: 'Please enter your password'
+      },
+      code: {
+        required: 'Please enter a verification code'
+      }
+    },
+    social: {
+      wechat: 'Wechat Login',
+      maxkey: 'MaxKey Login',
+      topiam: 'TopIam Login',
+      gitee: 'Gitee Login',
+      github: 'Github Login'
+    }
+  },
+  // 注册页面国际化
+  register: {
+    username: 'Username',
+    password: 'Password',
+    confirmPassword: 'Confirm Password',
+    register: 'Register',
+    registering: 'Registering...',
+    registerSuccess: 'Congratulations, your {username} account has been registered!',
+    code: 'Verification Code',
+    switchLoginPage: 'Log in with an existing account',
+    rule: {
+      username: {
+        required: 'Please enter your account',
+        length: 'The length of the user account must be between {min} and {max}'
+      },
+      password: {
+        required: 'Please enter your password',
+        length: 'The user password must be between {min} and {max} in length',
+        pattern: "Can't contain illegal characters: {strings}"
+      },
+      code: {
+        required: 'Please enter a verification code'
+      },
+      confirmPassword: {
+        required: 'Please enter your password again',
+        equalToPassword: 'The password entered twice is inconsistent'
+      }
+    }
+  },
+  // 导航栏国际化
+  navbar: {
+    full: 'Full Screen',
+    language: 'Language',
+    dashboard: 'Dashboard',
+    document: 'Document',
+    message: 'Message',
+    layoutSize: 'Layout Size',
+    layoutSetting: 'Layout Setting',
+    personalCenter: 'Personal Center',
+    logout: 'Logout'
+  }
+};
diff --git a/src/lang/index.ts b/src/lang/index.ts
new file mode 100644
index 0000000..8c3aa19
--- /dev/null
+++ b/src/lang/index.ts
@@ -0,0 +1,32 @@
+// 自定义国际化配置
+import { createI18n } from 'vue-i18n';
+import { LanguageEnum } from '@/enums/LanguageEnum';
+import en_US from '@/lang/en_US';
+import zh_CN from '@/lang/zh_CN';
+
+/**
+ * 获取当前语言
+ * @returns zh-cn|en ...
+ */
+export const getLanguage = (): LanguageEnum => {
+  const language = useStorage<LanguageEnum>('language', LanguageEnum.zh_CN);
+  if (language.value) {
+    return language.value;
+  }
+  return LanguageEnum.zh_CN;
+};
+
+const i18n = createI18n({
+  globalInjection: true,
+  allowComposition: true,
+  legacy: false,
+  locale: getLanguage(),
+  messages: {
+    zh_CN: zh_CN,
+    en_US: en_US
+  }
+});
+
+export default i18n;
+
+export type LanguageType = typeof zh_CN;
diff --git a/src/lang/zh_CN.ts b/src/lang/zh_CN.ts
new file mode 100644
index 0000000..4a4b4a8
--- /dev/null
+++ b/src/lang/zh_CN.ts
@@ -0,0 +1,76 @@
+export default {
+  // 路由国际化
+  route: {
+    dashboard: "首页",
+    document: "项目文档",
+  },
+  // 登录页面国际化
+  login: {
+    username: "管理员账号",
+    password: "登录密码",
+    login: "登 录",
+    logging: "登 录 中...",
+    code: "验证码",
+    rememberPassword: "记住登录状态",
+    switchRegisterPage: "立即注册",
+    rule: {
+      username: {
+        required: "请输入管理员账号",
+      },
+      password: {
+        required: "请输入登录密码",
+      },
+      code: {
+        required: "请输入验证码",
+      },
+    },
+    social: {
+      wechat: "微信登录",
+      maxkey: "MaxKey登录",
+      topiam: "TopIam登录",
+      gitee: "Gitee登录",
+      github: "Github登录",
+    },
+  },
+  // 注册页面国际化
+  register: {
+    username: "用户名",
+    password: "密码",
+    confirmPassword: "确认密码",
+    register: "注 册",
+    registering: "注 册 中...",
+    registerSuccess: "恭喜你，您的账号 {username} 注册成功！",
+    code: "验证码",
+    switchLoginPage: "使用已有账户登录",
+    rule: {
+      username: {
+        required: "请输入您的账号",
+        length: "用户账号长度必须介于 {min} 和 {max} 之间",
+      },
+      password: {
+        required: "请输入您的密码",
+        length: "用户密码长度必须介于 {min} 和 {max} 之间",
+        pattern: "不能包含非法字符：{strings}",
+      },
+      code: {
+        required: "请输入验证码",
+      },
+      confirmPassword: {
+        required: "请再次输入您的密码",
+        equalToPassword: "两次输入的密码不一致",
+      },
+    },
+  },
+  // 导航栏国际化
+  navbar: {
+    full: "全屏",
+    language: "语言",
+    dashboard: "首页",
+    document: "项目文档",
+    message: "消息",
+    layoutSize: "布局大小",
+    layoutSetting: "布局设置",
+    personalCenter: "个人中心",
+    logout: "退出登录",
+  },
+};
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..d973a19
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,106 @@
+<template>
+  <section class="app-main">
+    <router-view v-slot="{ Component, route }">
+      <transition :enter-active-class="animate" mode="out-in">
+        <keep-alive :include="tagsViewStore.cachedViews">
+          <component :is="Component" v-if="!route.meta.link" :key="route.path" />
+        </keep-alive>
+      </transition>
+    </router-view>
+    <iframe-toggle />
+  </section>
+</template>
+
+<script setup name="AppMain" lang="ts">
+import animateConfig from '@/animate';
+import { useFullHeightTable } from '@/hooks/table/useFullHeightTable';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useTagsViewStore } from '@/store/modules/tagsView';
+import IframeToggle from './IframeToggle/index.vue';
+
+const route = useRoute();
+const tagsViewStore = useTagsViewStore();
+useFullHeightTable();
+
+// 随机动画集合
+const animate = ref<string>('');
+watch(
+  () => useSettingsStore().animationEnable,
+  (val: boolean) => {
+    if (val) {
+      animate.value = animateConfig.animateList[Math.floor(Math.random() * animateConfig.animateList.length)] as string;
+    } else {
+      animate.value = animateConfig.defaultAnimate as string;
+    }
+  },
+  { immediate: true }
+);
+
+watchEffect(() => {
+  addIframe();
+});
+
+function addIframe() {
+  if (route.meta.link) {
+    useTagsViewStore().addIframeView(route);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  min-height: 100vh;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  padding: 12px;
+
+  &:fullscreen,
+  &:-webkit-full-screen,
+  &:-moz-full-screen,
+  &:-ms-fullscreen {
+    background: var(--el-bg-color);
+    overflow-y: auto;
+  }
+}
+
+.app-main:not(.with-fixed-header) {
+  min-height: calc(100vh - 64px);
+}
+
+.app-main.with-tags-view:not(.with-fixed-header) {
+  min-height: calc(100vh - 105px);
+}
+
+.app-main.with-fixed-header {
+  padding-top: 76px;
+  min-height: calc(100vh - 76px);
+}
+
+.app-main.with-fixed-header.with-tags-view {
+  min-height: calc(100vh - 111px);
+  padding-top: 111px;
+}
+</style>
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 6px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--el-fill-color-lighter);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--el-text-color-placeholder);
+  border-radius: 999px;
+}
+</style>
diff --git a/src/layout/components/IframeToggle/index.vue b/src/layout/components/IframeToggle/index.vue
new file mode 100644
index 0000000..dee6db8
--- /dev/null
+++ b/src/layout/components/IframeToggle/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <inner-link
+    v-for="(item, index) in tagsViewStore.iframeViews"
+    v-show="route.path === item.path"
+    :key="item.path"
+    :iframe-id="'iframe' + index"
+    :src="iframeUrl(item.meta ? item.meta.link : '', item.query)"
+  ></inner-link>
+</template>
+
+<script setup lang="ts">
+import { useTagsViewStore } from '@/store/modules/tagsView';
+import InnerLink from '../InnerLink/index.vue';
+
+const route = useRoute();
+const tagsViewStore = useTagsViewStore();
+
+function iframeUrl(url: string | undefined, query: any) {
+  if (Object.keys(query).length > 0) {
+    const params = Object.keys(query)
+      .map(key => key + '=' + query[key])
+      .join('&');
+    return url + '?' + params;
+  }
+  return url;
+}
+</script>
diff --git a/src/layout/components/InnerLink/index.vue b/src/layout/components/InnerLink/index.vue
new file mode 100644
index 0000000..bb6b89b
--- /dev/null
+++ b/src/layout/components/InnerLink/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div :style="'height:' + height">
+    <iframe :id="iframeId" style="width: 100%; height: 100%; border: 0" :src="src"></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+  src: propTypes.string.def('/'),
+  iframeId: propTypes.string.isRequired
+});
+const height = ref(document.documentElement.clientHeight - 94.5 + 'px');
+</script>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..35eaa12
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,477 @@
+<template>
+  <div class="navbar" :class="'nav' + navType">
+    <div class="navbar-left">
+      <div v-if="navType !== NavTypeEnum.TOP" class="hamburger-shell">
+        <hamburger
+          id="hamburger-container"
+          :is-active="appStore.sidebar.opened"
+          class="hamburger-container"
+          @toggle-click="toggleSideBar"
+        />
+      </div>
+      <router-link v-else-if="showLogo" to="/" class="navtop-logo-shell">
+        <img :src="appLogo" class="navtop-logo-icon" alt="logo" />
+      </router-link>
+
+      <div class="nav-context">
+        <breadcrumb v-if="navType == NavTypeEnum.LEFT" id="breadcrumb-container" class="breadcrumb-container" />
+        <top-nav v-if="navType == NavTypeEnum.MIX" id="topmenu-container" class="topmenu-container" />
+
+        <template v-if="navType == NavTypeEnum.TOP">
+          <top-bar id="topbar-container" class="topbar-container" />
+        </template>
+      </div>
+    </div>
+    <div class="right-menu flex align-center">
+      <template v-if="appStore.device !== 'mobile'">
+        <search-menu ref="searchMenuRef" />
+        <el-tooltip content="搜索" effect="dark" placement="bottom">
+          <div class="right-menu-item hover-effect" @click="openSearchMenu">
+            <svg-icon class-name="search-icon" icon-class="search" />
+          </div>
+        </el-tooltip>
+        <!-- 消息 -->
+        <el-tooltip :content="$t('navbar.message')" effect="dark" placement="bottom">
+          <div>
+            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
+              <template #reference>
+                <el-badge :value="noticeStore.unreadCount.value > 0 ? noticeStore.unreadCount.value : ''" :max="99">
+                  <div class="right-menu-item hover-effect message-trigger">
+                    <svg-icon icon-class="message" />
+                  </div>
+                </el-badge>
+              </template>
+              <template #default>
+                <notice></notice>
+              </template>
+            </el-popover>
+          </div>
+        </el-tooltip>
+        <el-tooltip content="Github" effect="dark" placement="bottom">
+          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <el-tooltip :content="$t('navbar.document')" effect="dark" placement="bottom">
+          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <el-tooltip :content="$t('navbar.full')" effect="dark" placement="bottom">
+          <screenfull id="screenfull" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <el-tooltip :content="$t('navbar.language')" effect="dark" placement="bottom">
+          <lang-select id="lang-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <el-tooltip :content="$t('navbar.layoutSize')" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+      </template>
+      <div class="avatar-container">
+        <el-dropdown class="avatar-dropdown" trigger="click" @command="handleCommand">
+          <div class="avatar-wrapper">
+            <img :src="userStore.avatar" class="user-avatar" />
+            <div class="avatar-meta">
+              <span class="avatar-name">{{ displayName }}</span>
+              <span class="avatar-role">Workspace</span>
+            </div>
+            <el-icon class="avatar-arrow"><caret-bottom /></el-icon>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <router-link to="/user/profile">
+                <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
+              </router-link>
+              <el-dropdown-item v-if="settingsStore.showSettings" command="setLayout">
+                <span>{{ $t('navbar.layoutSetting') }}</span>
+              </el-dropdown-item>
+              <el-dropdown-item divided command="logout">
+                <span>{{ $t('navbar.logout') }}</span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ElMessageBoxOptions } from 'element-plus';
+import { CaretBottom } from '@element-plus/icons-vue';
+import appLogo from '@/assets/logo/logo.png';
+import { NavTypeEnum } from '@/enums/NavTypeEnum';
+import tab from '@/plugins/tab';
+import router from '@/router';
+import { useAppStore } from '@/store/modules/app';
+import { useNoticeStore } from '@/store/modules/notice';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useUserStore } from '@/store/modules/user';
+import notice from './notice/index.vue';
+import TopBar from './TopBar/index.vue';
+import SearchMenu from './TopBar/search.vue';
+
+const appStore = useAppStore();
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
+const noticeStore = storeToRefs(useNoticeStore());
+
+const navType = computed(() => settingsStore.navType);
+const showLogo = computed(() => settingsStore.sidebarLogo);
+const displayName = computed(() => userStore.nickname || '管理员');
+
+// 搜索菜单
+const searchMenuRef = ref<InstanceType<typeof SearchMenu>>();
+
+const openSearchMenu = () => {
+  searchMenuRef.value?.openSearch();
+};
+
+const toggleSideBar = () => {
+  appStore.toggleSideBar(false);
+};
+
+const logout = async () => {
+  await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  } as ElMessageBoxOptions);
+  userStore.logout().then(() => {
+    router.replace({
+      path: '/login',
+      query: {
+        redirect: encodeURIComponent(router.currentRoute.value.fullPath || '/')
+      }
+    });
+    tab.closeAllPage();
+  });
+};
+
+const emits = defineEmits(['setLayout']);
+const setLayout = () => {
+  emits('setLayout');
+};
+// 定义Command方法对象 通过key直接调用方法
+const commandMap: { [key: string]: any } = {
+  setLayout,
+  logout
+};
+const handleCommand = (command: string) => {
+  // 判断是否存在该方法
+  if (commandMap[command]) {
+    commandMap[command]();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.navbar.navtop {
+  .nav-context {
+    flex: 1;
+  }
+
+  .navtop-logo-shell {
+    width: 48px;
+    height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    flex-shrink: 0;
+    border-radius: 14px;
+    border: 1px solid var(--app-surface-border);
+    background: var(--app-surface-bg);
+    box-shadow: var(--app-shadow-sm);
+    transition:
+      transform 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+
+    &:hover {
+      transform: translateY(-1px);
+      border-color: rgba(64, 158, 255, 0.22);
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.76),
+        0 10px 22px rgba(15, 23, 42, 0.08);
+    }
+  }
+
+  .navtop-logo-icon {
+    width: 32px;
+    height: 32px;
+    display: block;
+    border-radius: 11px;
+  }
+
+  .topbar-container {
+    flex: 1;
+    min-width: 0;
+    margin-left: 0;
+    padding: 4px 8px;
+    border-radius: var(--app-radius-base);
+    background: var(--app-surface-bg);
+    border: 1px solid var(--app-surface-border);
+    box-shadow: var(--app-shadow-sm);
+  }
+}
+
+:deep(.el-select .el-input__wrapper) {
+  height: 30px;
+}
+
+:deep(.el-badge__content.is-fixed) {
+  top: 8px;
+  right: 6px;
+}
+
+:deep(.el-badge) {
+  display: inline-flex;
+  align-items: center;
+}
+
+:deep(.el-dropdown) {
+  outline: none;
+}
+
+.flex {
+  display: flex;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.navbar {
+  min-height: 52px;
+  overflow: hidden;
+  position: relative;
+  background: var(--app-navbar-bg);
+  border: 1px solid var(--app-navbar-border);
+  box-shadow: var(--app-navbar-shadow);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--app-radius-base);
+  padding: 6px 12px;
+  box-sizing: border-box;
+
+  .navbar-left {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    gap: 10px;
+    flex: 1;
+  }
+
+  .hamburger-shell {
+    width: 36px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    background: transparent;
+    color: var(--app-accent-strong);
+    flex-shrink: 0;
+    border: 1px solid var(--app-surface-border);
+  }
+
+  .hamburger-container {
+    line-height: 32px;
+    height: 100%;
+    cursor: pointer;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    justify-content: center;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  .nav-context {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0;
+  }
+
+  .breadcrumb-container {
+    flex-shrink: 0;
+  }
+
+  .topmenu-container {
+    position: static;
+    min-width: 0;
+  }
+
+  .topbar-container {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    margin-left: 8px;
+  }
+
+  .right-menu {
+    height: 100%;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+    flex-wrap: nowrap;
+
+    &:focus {
+      outline: none;
+    }
+
+    > * {
+      flex-shrink: 0;
+    }
+
+    .right-menu-item {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      font-size: 16px;
+      color: var(--app-text-muted);
+      border-radius: 12px;
+      vertical-align: text-bottom;
+      background: transparent;
+      border: 1px solid transparent;
+      flex-shrink: 0;
+
+      :deep(.svg-icon),
+      :deep(svg),
+      :deep(.el-icon) {
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        display: block;
+      }
+
+      &.hover-effect {
+        cursor: pointer;
+        transition:
+          background 0.3s,
+          color 0.3s;
+
+        &:hover {
+          background: var(--app-accent-soft);
+          color: var(--app-accent-strong);
+          border-color: rgba(64, 158, 255, 0.16);
+        }
+      }
+    }
+
+    .message-trigger {
+      display: inline-flex;
+    }
+
+    .avatar-container {
+      margin-left: 6px;
+      margin-right: 0;
+      flex-shrink: 0;
+
+      .avatar-dropdown {
+        display: block;
+        width: auto;
+        height: auto;
+        border: none;
+        background: transparent;
+      }
+
+      .avatar-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 4px 8px 4px 4px;
+        border-radius: var(--app-radius-base);
+        background: var(--app-surface-bg);
+        border: 1px solid var(--app-surface-border);
+        min-width: 0;
+        cursor: pointer;
+        transition:
+          background 0.3s,
+          border-color 0.3s;
+
+        &:hover {
+          background: var(--app-accent-soft);
+          border-color: rgba(64, 158, 255, 0.16);
+        }
+
+        .user-avatar {
+          cursor: pointer;
+          width: 28px;
+          height: 28px;
+          border-radius: 12px;
+          object-fit: cover;
+          box-shadow: none;
+        }
+
+        .avatar-meta {
+          display: flex;
+          flex-direction: column;
+          min-width: 0;
+          gap: 2px;
+        }
+
+        .avatar-name {
+          max-width: 88px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: var(--app-text-title);
+          font-size: 12px;
+          font-weight: 600;
+        }
+
+        .avatar-role {
+          color: var(--app-text-muted);
+          font-size: 11px;
+        }
+
+        .avatar-arrow {
+          color: var(--app-text-muted);
+          font-size: 12px;
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+}
+
+html.dark {
+  .navbar.navtop .navtop-logo-shell {
+    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.82));
+    border-color: rgba(71, 85, 105, 0.42);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.06),
+      0 8px 18px rgba(0, 0, 0, 0.24);
+  }
+
+  .navbar.navtop .topbar-container {
+    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.7));
+    border-color: rgba(71, 85, 105, 0.34);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.05),
+      0 8px 22px rgba(0, 0, 0, 0.2);
+  }
+
+  .navbar .right-menu .right-menu-item,
+  .navbar .right-menu .avatar-wrapper {
+    background: var(--app-navbar-bg);
+    border-color: var(--app-navbar-border);
+  }
+}
+</style>
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 0000000..b7d2366
--- /dev/null
+++ b/src/layout/components/Settings/index.vue
@@ -0,0 +1,451 @@
+<template>
+  <el-drawer
+    v-model="showSettings"
+    class="settings-drawer"
+    :with-header="false"
+    direction="rtl"
+    size="300px"
+    close-on-click-modal
+  >
+    <h3 class="drawer-title">菜单导航设置</h3>
+    <div class="nav-wrap">
+      <el-tooltip content="左侧菜单" placement="bottom">
+        <div
+          class="item left"
+          @click="handleNavType(NavTypeEnum.LEFT)"
+          :style="{ '--theme': theme }"
+          :class="{ activeItem: navType == NavTypeEnum.LEFT }"
+        >
+          <b></b>
+          <b></b>
+        </div>
+      </el-tooltip>
+
+      <el-tooltip content="混合菜单" placement="bottom">
+        <div
+          class="item mix"
+          @click="handleNavType(NavTypeEnum.MIX)"
+          :style="{ '--theme': theme }"
+          :class="{ activeItem: navType == NavTypeEnum.MIX }"
+        >
+          <b></b>
+          <b></b>
+        </div>
+      </el-tooltip>
+      <el-tooltip content="顶部菜单" placement="bottom">
+        <div
+          class="item top"
+          @click="handleNavType(NavTypeEnum.TOP)"
+          :style="{ '--theme': theme }"
+          :class="{ activeItem: navType == NavTypeEnum.TOP }"
+        >
+          <b></b>
+          <b></b>
+        </div>
+      </el-tooltip>
+    </div>
+
+    <h3 class="drawer-title">主题风格设置</h3>
+
+    <div class="setting-drawer-block-checbox">
+      <div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.DARK)">
+        <img src="@/assets/images/dark.svg" alt="dark" />
+        <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
+          <i aria-label="图标: check" class="anticon anticon-check">
+            <svg
+              viewBox="64 64 896 896"
+              data-icon="check"
+              width="1em"
+              height="1em"
+              :fill="theme"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <path
+                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+              />
+            </svg>
+          </i>
+        </div>
+      </div>
+      <div class="setting-drawer-block-checbox-item" @click="handleTheme(SideThemeEnum.LIGHT)">
+        <img src="@/assets/images/light.svg" alt="light" />
+        <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
+          <i aria-label="图标: check" class="anticon anticon-check">
+            <svg
+              viewBox="64 64 896 896"
+              data-icon="check"
+              width="1em"
+              height="1em"
+              :fill="theme"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <path
+                d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+              />
+            </svg>
+          </i>
+        </div>
+      </div>
+    </div>
+    <div class="drawer-item">
+      <span>主题颜色</span>
+      <span class="comp-style">
+        <el-color-picker v-model="theme" :predefine="predefineColors" @change="themeChange" />
+      </span>
+    </div>
+    <div class="drawer-item">
+      <span>深色模式</span>
+      <span class="comp-style">
+        <el-switch v-model="isDark" class="drawer-switch" @change="toggleDark" />
+      </span>
+    </div>
+    <div class="drawer-item">
+      <span>页面圆角</span>
+      <span class="comp-style">
+        <el-slider v-model="radiusBase" :min="0" :max="32" :step="2" style="width: 120px" @change="radiusBaseChange" />
+      </span>
+    </div>
+
+    <el-divider />
+
+    <h3 class="drawer-title">系统布局配置</h3>
+
+    <div class="drawer-item">
+      <span>开启 Tags-Views</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>持久化标签页</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.tagsViewPersist" :disabled="!settingsStore.tagsView" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>显示页签图标</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.tagsIcon" :disabled="!settingsStore.tagsView" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>固定 Header</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.fixedHeader" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>显示 Logo</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.sidebarLogo" class="drawer-switch" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>动态标题</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.dynamicTitle" class="drawer-switch" @change="dynamicTitleChange" />
+      </span>
+    </div>
+
+    <div class="drawer-item">
+      <span>全高表格</span>
+      <span class="comp-style">
+        <el-switch v-model="settingsStore.fullHeightTable" class="drawer-switch" />
+      </span>
+    </div>
+
+    <el-divider />
+
+    <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button>
+    <el-button plain icon="Refresh" @click="resetSetting">重置配置</el-button>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { NavTypeEnum } from '@/enums/NavTypeEnum';
+import { SideThemeEnum } from '@/enums/SideThemeEnum';
+import modal from '@/plugins/modal';
+import defaultSettings from '@/settings';
+import { useAppStore } from '@/store/modules/app';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useDynamicTitle } from '@/utils/dynamicTitle';
+import { handleThemeStyle } from '@/utils/theme';
+
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+
+const showSettings = ref(false);
+const theme = ref(settingsStore.theme);
+const sideTheme = ref(settingsStore.sideTheme);
+const storeSettings = computed(() => settingsStore);
+const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']);
+const navType = ref(settingsStore.navType);
+const radiusBase = ref(settingsStore.radiusBase);
+// 是否暗黑模式
+const isDark = useDark({
+  storageKey: 'useDarkKey',
+  valueDark: 'dark',
+  valueLight: 'light'
+});
+// 匹配菜单颜色
+watch(isDark, () => {
+  if (isDark.value) {
+    settingsStore.sideTheme = SideThemeEnum.DARK;
+  } else {
+    settingsStore.sideTheme = sideTheme.value;
+  }
+});
+const toggleDark = () => useToggle(isDark);
+
+/** 菜单导航设置 */
+watch(
+  navType,
+  val => {
+    if (val === NavTypeEnum.TOP) {
+      appStore.toggleSideBarHide(true);
+      permissionStore.setSidebarRouters(permissionStore.defaultRoutes as any);
+    } else if (val === NavTypeEnum.LEFT) {
+      appStore.toggleSideBarHide(false);
+      permissionStore.setSidebarRouters(permissionStore.defaultRoutes as any);
+    } else if (val === NavTypeEnum.MIX) {
+      appStore.toggleSideBarHide(false);
+    }
+  },
+  { immediate: true }
+);
+
+const handleNavType = (val: NavTypeEnum) => {
+  settingsStore.navType = val;
+  navType.value = val;
+};
+
+const dynamicTitleChange = () => {
+  // 动态设置网页标题
+  useDynamicTitle();
+};
+
+const themeChange = (val: string) => {
+  settingsStore.theme = val;
+  handleThemeStyle(val);
+};
+const radiusBaseChange = (val: number) => {
+  settingsStore.radiusBase = val;
+  // 更新 CSS 变量
+  document.documentElement.style.setProperty('--app-radius-base', `${val}px`);
+};
+const handleTheme = (val: string) => {
+  sideTheme.value = val;
+  if (isDark.value && val === SideThemeEnum.LIGHT) {
+    // 暗黑模式颜色不变
+    settingsStore.sideTheme = SideThemeEnum.DARK;
+    return;
+  }
+  settingsStore.sideTheme = val;
+};
+const saveSetting = () => {
+  modal.loading('正在保存到本地，请稍候...');
+  const settings = useStorage<LayoutSetting>('layout-setting', defaultSettings);
+  if (!storeSettings.value.tagsViewPersist) {
+    localStorage.removeItem('tags-view-visited');
+  }
+  settings.value.tagsView = storeSettings.value.tagsView;
+  settings.value.tagsViewPersist = storeSettings.value.tagsViewPersist;
+  settings.value.tagsIcon = storeSettings.value.tagsIcon;
+  settings.value.fixedHeader = storeSettings.value.fixedHeader;
+  settings.value.sidebarLogo = storeSettings.value.sidebarLogo;
+  settings.value.dynamicTitle = storeSettings.value.dynamicTitle;
+  settings.value.sideTheme = storeSettings.value.sideTheme;
+  settings.value.theme = storeSettings.value.theme;
+  settings.value.navType = storeSettings.value.navType;
+  settings.value.radiusBase = storeSettings.value.radiusBase;
+  settings.value.fullHeightTable = storeSettings.value.fullHeightTable;
+  setTimeout(() => {
+    modal.closeLoading();
+  }, 1000);
+};
+const resetSetting = () => {
+  modal.loading('正在清除设置缓存并刷新，请稍候...');
+  localStorage.removeItem('tags-view-visited');
+  useStorage<any>('layout-setting', null).value = null;
+  setTimeout('window.location.reload()', 1000);
+};
+const openSetting = () => {
+  showSettings.value = true;
+};
+
+onMounted(() => {
+  radiusBaseChange(storeSettings.value.radiusBase);
+});
+
+defineExpose({
+  openSetting
+});
+</script>
+
+<style lang="scss" scoped>
+.settings-drawer {
+  :deep(.el-drawer__body) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 18px 18px 20px;
+  }
+}
+
+.setting-drawer-title {
+  margin-bottom: 12px;
+  color: var(--app-text-title);
+  line-height: 22px;
+  font-weight: bold;
+  .drawer-title {
+    font-size: 14px;
+  }
+}
+.setting-drawer-block-checbox {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+
+  .setting-drawer-block-checbox-item {
+    position: relative;
+    margin-right: 16px;
+    border-radius: 12px;
+    cursor: pointer;
+    overflow: hidden;
+    border: 1px solid var(--app-surface-border);
+    transition:
+      border-color 0.2s ease,
+      transform 0.2s ease;
+
+    &:hover {
+      border-color: rgba(64, 158, 255, 0.28);
+      transform: translateY(-1px);
+    }
+
+    img {
+      width: 48px;
+      height: 48px;
+      display: block;
+    }
+
+    .custom-img {
+      width: 48px;
+      height: 38px;
+      border-radius: 5px;
+      box-shadow: 1px 1px 2px #898484;
+    }
+
+    .setting-drawer-block-checbox-selectIcon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      padding-top: 15px;
+      padding-left: 24px;
+      color: var(--app-accent-strong);
+    }
+  }
+}
+
+.drawer-item {
+  padding: 12px 0;
+  font-size: 14px;
+  color: var(--app-text-title);
+  border-bottom: 1px solid var(--app-surface-border);
+
+  .comp-style {
+    float: right;
+    margin: -3px 8px 0px 0px;
+  }
+}
+
+// 导航模式
+.nav-wrap {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+
+  .activeItem {
+    border: 2px solid #{'var(--theme)'} !important;
+  }
+
+  .item {
+    position: relative;
+    margin-right: 16px;
+    cursor: pointer;
+    width: 56px;
+    height: 48px;
+    border-radius: 12px;
+    background: var(--app-elevated-soft-bg);
+    border: 2px solid transparent;
+    transition:
+      transform 0.2s ease,
+      border-color 0.2s ease;
+
+    &:hover {
+      transform: translateY(-1px);
+    }
+  }
+
+  .left {
+    b:first-child {
+      display: block;
+      height: 30%;
+      background: #fff;
+    }
+
+    b:last-child {
+      width: 30%;
+      background: #1b2a47;
+      position: absolute;
+      height: 100%;
+      top: 0;
+      border-radius: 4px 0 0 4px;
+    }
+  }
+
+  .mix {
+    b:first-child {
+      border-radius: 4px 4px 0 0;
+      display: block;
+      height: 30%;
+      background: #1b2a47;
+    }
+
+    b:last-child {
+      width: 30%;
+      background: #1b2a47;
+      position: absolute;
+      height: 70%;
+      border-radius: 0 0 0 4px;
+    }
+  }
+
+  .top {
+    b:first-child {
+      display: block;
+      height: 30%;
+      background: #1b2a47;
+      border-radius: 4px 4px 0 0;
+    }
+
+    b:last-child {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
new file mode 100644
index 0000000..fd75f35
--- /dev/null
+++ b/src/layout/components/Sidebar/Link.vue
@@ -0,0 +1,40 @@
+<template>
+  <component :is="type" v-bind="linkProps()">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { isExternal } from '@/utils/validate';
+
+const props = defineProps({
+  to: {
+    type: [String, Object],
+    required: true
+  }
+});
+
+const isExt = computed(() => {
+  return isExternal(props.to as string);
+});
+
+const type = computed(() => {
+  if (isExt.value) {
+    return 'a';
+  }
+  return 'router-link';
+});
+
+function linkProps() {
+  if (isExt.value) {
+    return {
+      href: props.to,
+      target: '_blank',
+      rel: 'noopener'
+    };
+  }
+  return {
+    to: props.to
+  };
+}
+</script>
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
new file mode 100644
index 0000000..3f9f3ad
--- /dev/null
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
+    <transition :enter-active-class="animateConfig.logoAnimate.enter" mode="out-in">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 v-else class="sidebar-title">
+          {{ title }}
+        </h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 class="sidebar-title">
+          {{ title }}
+        </h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import animateConfig from '@/animate';
+import logo from '@/assets/logo/logo.png';
+import { NavTypeEnum } from '@/enums/NavTypeEnum';
+import { useSettingsStore } from '@/store/modules/settings';
+
+defineProps({
+  collapse: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const title = import.meta.env.VITE_APP_LOGO_TITLE;
+const settingsStore = useSettingsStore();
+const sideTheme = computed(() => settingsStore.sideTheme);
+const isTopNav = computed(() => settingsStore.navType === NavTypeEnum.TOP);
+const isDarkSide = computed(() => !isTopNav.value && sideTheme.value === 'theme-dark');
+const logoSurface = computed(() => (isDarkSide.value ? 'rgba(255, 255, 255, 0.04)' : '#f8fafc'));
+const logoBorder = computed(() => (isDarkSide.value ? 'rgba(148, 163, 184, 0.12)' : '#e5e7eb'));
+const logoTextColor = computed(() => (isDarkSide.value ? '#f8fbff' : 'var(--app-text-title)'));
+</script>
+
+<style lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  position: relative;
+  flex-shrink: 0;
+  height: 46px;
+  line-height: 46px;
+  padding: 0 8px;
+  margin-top: 8px;
+  background: transparent;
+  text-align: center;
+  overflow: hidden;
+  margin-bottom: 0;
+
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border-radius: 14px;
+    background: v-bind(logoSurface);
+    border: 1px solid v-bind(logoBorder);
+
+    & .sidebar-logo {
+      width: 28px;
+      height: 28px;
+      vertical-align: middle;
+      margin-right: 0;
+      margin-left: 0;
+      border-radius: 10px;
+      box-shadow: none;
+    }
+
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: v-bind(logoTextColor);
+      font-weight: 600;
+      line-height: 1;
+      font-size: 15px;
+      letter-spacing: 0.02em;
+      font-family: 'MiSans', 'HarmonyOS Sans SC', 'PingFang SC', sans-serif;
+      vertical-align: middle;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo-link {
+      padding: 0;
+    }
+
+    .sidebar-logo {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
new file mode 100644
index 0000000..3647e8d
--- /dev/null
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -0,0 +1,122 @@
+<template>
+  <div v-if="!item.hidden">
+    <template
+      v-if="
+        hasOneShowingChild(item, item.children) &&
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+        !item.alwaysShow
+      "
+    >
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
+          <template #title>
+            <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>
+          </template>
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-sub-menu
+      v-else
+      ref="subMenu"
+      :index="resolvePath(item.path)"
+      :popper-offset="isNest ? 4 : 12"
+      :popper-class="popperClass"
+      teleported
+    >
+      <template v-if="item.meta" #title>
+        <svg-icon :icon-class="item.meta ? item.meta.icon : ''" />
+        <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
+      </template>
+
+      <sidebar-item
+        v-for="(child, index) in item.children"
+        :key="child.path + index"
+        :is-nest="true"
+        :item="child"
+        :popper-class="popperClass"
+        :base-path="resolvePath(child.path)"
+        class="nest-menu"
+      />
+    </el-sub-menu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RouteRecordRaw } from 'vue-router';
+import { getNormalPath } from '@/utils/ruoyi';
+import { isExternal } from '@/utils/validate';
+import AppLink from './Link.vue';
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<RouteRecordRaw>,
+    required: true
+  },
+  isNest: {
+    type: Boolean,
+    default: false
+  },
+  basePath: {
+    type: String,
+    default: ''
+  },
+  popperClass: {
+    type: String,
+    default: ''
+  }
+});
+
+const onlyOneChild = ref<any>({});
+
+const hasOneShowingChild = (parent: RouteRecordRaw, children?: RouteRecordRaw[]) => {
+  if (!children) {
+    children = [];
+  }
+  const showingChildren = children.filter(item => {
+    if (item.hidden) {
+      return false;
+    }
+    onlyOneChild.value = item;
+    return true;
+  });
+
+  // When there is only one child router, the child router is displayed by default
+  if (showingChildren.length === 1) {
+    return true;
+  }
+
+  // Show parent if there are no child router to display
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
+    return true;
+  }
+
+  return false;
+};
+
+const resolvePath = (routePath: string, routeQuery?: string): any => {
+  if (isExternal(routePath)) {
+    return routePath;
+  }
+  if (isExternal(props.basePath as string)) {
+    return props.basePath;
+  }
+  if (routeQuery) {
+    const query = JSON.parse(routeQuery);
+    return {
+      path: getNormalPath(props.basePath + '/' + routePath),
+      query: query
+    };
+  }
+  return getNormalPath(props.basePath + '/' + routePath);
+};
+
+const hasTitle = (title: string | undefined): string => {
+  if (!title || title.length <= 5) {
+    return '';
+  }
+  return title;
+};
+</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..4832734
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="sidebar-shell" :class="{ 'has-logo': showLogo }" :style="menuStyle">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
+      <transition :enter-active-class="animateConfig.menuSearchAnimate.enter" mode="out-in">
+        <el-menu
+          :default-active="activeMenu"
+          :collapse="isCollapse"
+          :unique-opened="true"
+          :collapse-transition="false"
+          :popper-offset="12"
+          mode="vertical"
+        >
+          <sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :item="r" :base-path="r.path" />
+        </el-menu>
+      </transition>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RouteRecordRaw } from 'vue-router';
+import animateConfig from '@/animate';
+import { useAppStore } from '@/store/modules/app';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useSettingsStore } from '@/store/modules/settings';
+import Logo from './Logo.vue';
+import SidebarItem from './SidebarItem.vue';
+
+const route = useRoute();
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+const sidebarRouters = computed<RouteRecordRaw[]>(() => permissionStore.getSidebarRoutes());
+const showLogo = computed(() => settingsStore.sidebarLogo);
+const sideTheme = computed(() => settingsStore.sideTheme);
+const theme = computed(() => settingsStore.theme);
+const isCollapse = computed(() => !appStore.sidebar.opened);
+
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  // if set path, the sidebar will highlight the path you set
+  if (meta.activeMenu) {
+    return meta.activeMenu;
+  }
+  return path;
+});
+
+const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? '#111827' : '#ffffff'));
+const textColor = computed(() => (sideTheme.value === 'theme-dark' ? '#e5edf8' : '#1f2937'));
+const menuStyle = computed(() => ({
+  backgroundColor: bgColor.value,
+  '--el-menu-bg-color': bgColor.value,
+  '--el-menu-text-color': textColor.value,
+  '--el-menu-active-color': theme.value
+}));
+</script>
+
+<style lang="scss" scoped>
+.sidebar-shell {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 8px 12px;
+  border: 1px solid var(--app-sidebar-border);
+  border-radius: var(--app-radius-base);
+  box-shadow: var(--app-shadow-sm);
+  background: v-bind(bgColor) !important;
+  overflow: hidden;
+}
+
+:deep(.el-scrollbar__view) {
+  min-height: 0;
+  padding-bottom: 12px;
+}
+
+:deep(.el-scrollbar) {
+  flex: 1;
+  min-height: 0;
+  height: auto !important;
+}
+
+:deep(.el-scrollbar__wrap) {
+  height: 100%;
+  overflow-x: hidden;
+}
+</style>
diff --git a/src/layout/components/SocialCallback/index.vue b/src/layout/components/SocialCallback/index.vue
new file mode 100644
index 0000000..2d6653f
--- /dev/null
+++ b/src/layout/components/SocialCallback/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <div v-loading="loading" class="social-callback"></div>
+</template>
+
+<script setup lang="ts">
+import { login, callback } from '@/api/login';
+import { LoginData } from '@/api/types';
+import { setToken, getToken } from '@/utils/auth';
+
+const route = useRoute();
+const loading = ref(true);
+
+/**
+ * 接收Route传递的参数
+ * @param {Object} route.query.
+ */
+const code = route.query.code as string;
+const state = route.query.state as string;
+const source = route.query.source as string;
+
+const processResponse = async (res: any) => {
+  if (res.code !== 200) {
+    throw new Error(res.msg);
+  }
+  if (res.data !== null) {
+    setToken(res.data.access_token);
+  }
+  ElMessage.success(res.msg);
+  setTimeout(() => {
+    location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
+  }, 2000);
+};
+
+const handleError = (error: any) => {
+  ElMessage.error(error.message);
+  setTimeout(() => {
+    location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
+  }, 2000);
+};
+
+const callbackByCode = async (data: LoginData) => {
+  try {
+    const res = await callback(data);
+    await processResponse(res);
+    loading.value = false;
+  } catch (error) {
+    handleError(error);
+  }
+};
+
+const loginByCode = async (data: LoginData) => {
+  try {
+    const res = await login(data);
+    await processResponse(res);
+    loading.value = false;
+  } catch (error) {
+    handleError(error);
+  }
+};
+
+const init = async () => {
+  const data: LoginData = {
+    socialCode: code,
+    socialState: state,
+    source: source,
+    clientId: import.meta.env.VITE_APP_CLIENT_ID,
+    grantType: 'social'
+  };
+
+  if (!getToken()) {
+    await loginByCode(data);
+  } else {
+    await callbackByCode(data);
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    init();
+  });
+});
+</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
new file mode 100644
index 0000000..da1bf70
--- /dev/null
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -0,0 +1,148 @@
+<template>
+  <el-scrollbar ref="scrollContainerRef" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script setup lang="ts">
+import type { RouteLocationNormalized } from 'vue-router';
+
+const tagAndTagSpacing = 4;
+
+const emits = defineEmits(['scroll', 'updateArrows']);
+const scrollContainerRef = ref<ElScrollbarInstance>();
+
+const getScrollWrapper = (): HTMLElement | null => {
+  return scrollContainerRef.value?.wrapRef ?? null;
+};
+
+const emitScroll = () => {
+  emits('scroll');
+  emits('updateArrows');
+};
+
+onMounted(() => {
+  getScrollWrapper()?.addEventListener('scroll', emitScroll, true);
+});
+
+onBeforeUnmount(() => {
+  getScrollWrapper()?.removeEventListener('scroll', emitScroll, true);
+});
+
+const smoothScrollTo = (target: number) => {
+  const scrollWrapper = getScrollWrapper();
+  if (!scrollWrapper) {
+    return;
+  }
+  scrollWrapper.scrollTo({ left: target, behavior: 'smooth' });
+  setTimeout(() => {
+    emits('updateArrows');
+  }, 350);
+};
+
+const handleScroll = (e: WheelEvent) => {
+  const eventDelta = (e as any).wheelDelta || -e.deltaY * 40;
+  const scrollWrapper = getScrollWrapper();
+  if (!scrollWrapper) {
+    return;
+  }
+
+  scrollWrapper.scrollLeft += eventDelta / 4;
+  emits('updateArrows');
+};
+
+const moveToTarget = (currentTag: RouteLocationNormalized) => {
+  const container = scrollContainerRef.value?.$el as HTMLElement | undefined;
+  const scrollWrapper = getScrollWrapper();
+  if (!container || !scrollWrapper) {
+    return;
+  }
+
+  const containerWidth = container.offsetWidth;
+  const tagKey = currentTag.fullPath || currentTag.path;
+  const tagListDom = Array.from(document.querySelectorAll('.tags-view-item')) as HTMLElement[];
+  const currentIndex = tagListDom.findIndex(item => item.dataset.tagKey === tagKey);
+  if (currentIndex === -1) {
+    return;
+  }
+
+  const currentElement = tagListDom[currentIndex];
+  const firstTag = tagListDom[0];
+  const lastTag = tagListDom[tagListDom.length - 1];
+
+  if (currentElement === firstTag) {
+    smoothScrollTo(0);
+    return;
+  }
+
+  if (currentElement === lastTag) {
+    smoothScrollTo(scrollWrapper.scrollWidth - containerWidth);
+    return;
+  }
+
+  const prevTag = tagListDom[currentIndex - 1];
+  const nextTag = tagListDom[currentIndex + 1];
+  if (!prevTag || !nextTag) {
+    return;
+  }
+
+  const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing;
+  const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing;
+
+  if (afterNextTagOffsetLeft > scrollWrapper.scrollLeft + containerWidth) {
+    smoothScrollTo(afterNextTagOffsetLeft - containerWidth);
+  } else if (beforePrevTagOffsetLeft < scrollWrapper.scrollLeft) {
+    smoothScrollTo(beforePrevTagOffsetLeft);
+  }
+};
+
+const scrollToStart = () => {
+  smoothScrollTo(0);
+};
+
+const scrollToEnd = () => {
+  const scrollWrapper = getScrollWrapper();
+  if (!scrollWrapper) {
+    return;
+  }
+  smoothScrollTo(scrollWrapper.scrollWidth - scrollWrapper.clientWidth);
+};
+
+const getScrollState = () => {
+  const scrollWrapper = getScrollWrapper();
+  if (!scrollWrapper) {
+    return { canLeft: false, canRight: false };
+  }
+
+  return {
+    canLeft: scrollWrapper.scrollLeft > 0,
+    canRight: scrollWrapper.scrollLeft < scrollWrapper.scrollWidth - scrollWrapper.clientWidth - 1
+  };
+};
+
+defineExpose({
+  moveToTarget,
+  scrollToStart,
+  scrollToEnd,
+  getScrollState
+});
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+
+  :deep(.el-scrollbar__bar) {
+    bottom: 0;
+  }
+
+  :deep(.el-scrollbar__wrap) {
+    height: 34px;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
new file mode 100644
index 0000000..d687b0c
--- /dev/null
+++ b/src/layout/components/TagsView/index.vue
@@ -0,0 +1,740 @@
+<template>
+  <div id="tags-view-container" class="tags-view-container">
+    <span v-if="canScrollLeft" class="tags-nav-btn tags-nav-btn--left" @click="scrollLeft">
+      <el-icon><ArrowLeft /></el-icon>
+    </span>
+
+    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll" @update-arrows="updateArrowState">
+      <router-link
+        v-for="tag in visitedViews"
+        :key="tag.fullPath || tag.path"
+        :data-tag-key="tag.fullPath || tag.path"
+        :class="{ active: isActive(tag), 'has-icon': tagsIcon }"
+        :to="tag.fullPath || tag.path || '/'"
+        class="tags-view-item"
+        :style="activeStyle(tag)"
+        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : undefined"
+        @contextmenu.prevent="openMenu(tag, $event)"
+      >
+        <svg-icon v-if="tagsIcon && tag.meta && tag.meta.icon && tag.meta.icon !== '#'" :icon-class="tag.meta.icon" />
+        <span class="tags-view-item-title">{{ tag.title || tag.meta?.title }}</span>
+        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
+          <Close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
+        </span>
+      </router-link>
+    </scroll-pane>
+
+    <span v-if="canScrollRight" class="tags-nav-btn tags-nav-btn--right" @click="scrollRight">
+      <el-icon><ArrowRight /></el-icon>
+    </span>
+
+    <el-dropdown class="tags-action-dropdown" trigger="click" placement="bottom-end" @command="handleDropdownCommand">
+      <span class="tags-action-btn">
+        <el-icon><ArrowDown /></el-icon>
+      </span>
+      <template #dropdown>
+        <el-dropdown-menu class="tags-dropdown-menu">
+          <el-dropdown-item v-if="!isAffix(selectedDropdownTag)" command="close">关闭当前</el-dropdown-item>
+          <el-dropdown-item command="closeOthers">关闭其他</el-dropdown-item>
+          <el-dropdown-item command="closeLeft" :disabled="isFirstView()">关闭左侧</el-dropdown-item>
+          <el-dropdown-item command="closeRight" :disabled="isLastView()">关闭右侧</el-dropdown-item>
+          <el-dropdown-item command="closeAll">全部关闭</el-dropdown-item>
+          <el-dropdown-item command="fullscreen" divided>
+            <template v-if="!isFullscreen">
+              <FullScreen />
+              <span>全屏显示</span>
+            </template>
+            <template v-else>
+              <CloseBold />
+              <span>退出全屏</span>
+            </template>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+
+    <span class="tags-action-btn tags-refresh-btn" title="刷新页面" @click="refreshSelectedTag(selectedDropdownTag)">
+      <el-icon><RefreshRight /></el-icon>
+      <span>刷新</span>
+    </span>
+
+    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
+      <li @click="refreshSelectedTag(selectedTag)">
+        <RefreshRight style="width: 1em; height: 1em" />
+        刷新页面
+      </li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+        <Close style="width: 1em; height: 1em" />
+        关闭当前
+      </li>
+      <li @click="closeOthersTags">
+        <CircleClose style="width: 1em; height: 1em" />
+        关闭其他
+      </li>
+      <li v-if="!isFirstView()" @click="closeLeftTags">
+        <Back style="width: 1em; height: 1em" />
+        关闭左侧
+      </li>
+      <li v-if="!isLastView()" @click="closeRightTags">
+        <Right style="width: 1em; height: 1em" />
+        关闭右侧
+      </li>
+      <li @click="closeAllTags(selectedTag)">
+        <CircleClose style="width: 1em; height: 1em" />
+        全部关闭
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  Back,
+  CircleClose,
+  Close,
+  CloseBold,
+  FullScreen,
+  RefreshRight,
+  Right
+} from '@element-plus/icons-vue';
+import tab from '@/plugins/tab';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useTagsViewStore } from '@/store/modules/tagsView';
+import { getNormalPath } from '@/utils/ruoyi';
+import ScrollPane from './ScrollPane.vue';
+
+const visible = ref(false);
+const top = ref(0);
+const left = ref(0);
+const selectedTag = ref<RouteLocationNormalized>();
+const affixTags = ref<RouteLocationNormalized[]>([]);
+const canScrollLeft = ref(false);
+const canScrollRight = ref(false);
+const isFullscreen = ref(false);
+const scrollPaneRef = ref<InstanceType<typeof ScrollPane>>();
+const fullscreenModeClass = 'tags-fullscreen-mode';
+
+const route = useRoute();
+const router = useRouter();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+const tagsViewStore = useTagsViewStore();
+
+const visitedViews = computed(() => tagsViewStore.getVisitedViews());
+const routes = computed(() => permissionStore.getRoutes());
+const tagsIcon = computed(() => settingsStore.tagsIcon);
+const selectedDropdownTag = computed<RouteLocationNormalized | undefined>(() => {
+  return visitedViews.value.find(tag => isActive(tag)) || selectedTag.value;
+});
+
+watch(route, () => {
+  addTags();
+  moveToCurrentTag();
+});
+
+watch(visible, value => {
+  if (value) {
+    document.body.addEventListener('click', closeMenu);
+  } else {
+    document.body.removeEventListener('click', closeMenu);
+  }
+});
+
+watch(
+  visitedViews,
+  () => {
+    nextTick(() => {
+      updateArrowState();
+    });
+  },
+  { deep: true }
+);
+
+const isActive = (currentRoute: RouteLocationNormalized): boolean => {
+  return currentRoute.path === route.path;
+};
+
+const activeStyle = (tag: RouteLocationNormalized) => {
+  if (!isActive(tag)) return {};
+  return {
+    backgroundColor: 'var(--tags-view-active-bg)',
+    borderColor: 'var(--tags-view-active-border-color)'
+  };
+};
+
+const isAffix = (tag?: RouteLocationNormalized) => {
+  return !!tag?.meta?.affix;
+};
+
+const getOperateTag = () => {
+  return selectedTag.value?.fullPath ? selectedTag.value : selectedDropdownTag.value;
+};
+
+const isFirstView = () => {
+  const tag = getOperateTag();
+  if (!tag) {
+    return false;
+  }
+  try {
+    return tag.fullPath === '/index' || tag.fullPath === visitedViews.value[1]?.fullPath;
+  } catch {
+    return false;
+  }
+};
+
+const isLastView = () => {
+  const tag = getOperateTag();
+  if (!tag) {
+    return false;
+  }
+  try {
+    return tag.fullPath === visitedViews.value[visitedViews.value.length - 1]?.fullPath;
+  } catch {
+    return false;
+  }
+};
+
+const filterAffixTags = (routeList: RouteRecordRaw[], basePath = '') => {
+  let tags: RouteLocationNormalized[] = [];
+  routeList.forEach(item => {
+    if (item.meta?.affix) {
+      const tagPath = getNormalPath(basePath + '/' + item.path);
+      tags.push({
+        hash: '',
+        matched: [],
+        params: {},
+        query: {},
+        redirectedFrom: undefined,
+        fullPath: tagPath,
+        path: tagPath,
+        name: item.name as string,
+        meta: { ...item.meta },
+        title: item.meta?.title || 'no-name'
+      } as RouteLocationNormalized);
+    }
+    if (item.children) {
+      const tempTags = filterAffixTags(item.children, item.path);
+      if (tempTags.length >= 1) {
+        tags = [...tags, ...tempTags];
+      }
+    }
+  });
+  return tags;
+};
+
+const initTags = () => {
+  if (settingsStore.tagsViewPersist) {
+    tagsViewStore.loadPersistedViews();
+  }
+  const tags = filterAffixTags(routes.value);
+  affixTags.value = tags;
+  for (const tag of tags) {
+    if (tag.name) {
+      tagsViewStore.addAffixView(tag);
+    }
+  }
+};
+
+const addTags = () => {
+  if (typeof route.query.title === 'string') {
+    route.meta.title = route.query.title;
+  }
+  if (route.name) {
+    tagsViewStore.addView(route as RouteLocationNormalized);
+  }
+};
+
+const moveToCurrentTag = () => {
+  nextTick(() => {
+    for (const item of visitedViews.value) {
+      if (item.path === route.path) {
+        scrollPaneRef.value?.moveToTarget(item);
+        if (item.fullPath !== route.fullPath) {
+          tagsViewStore.updateVisitedView(route as RouteLocationNormalized);
+        }
+        break;
+      }
+    }
+  });
+};
+
+const refreshSelectedTag = (view?: RouteLocationNormalized) => {
+  if (!view) {
+    return;
+  }
+  tab.refreshPage(view);
+  if (route.meta.link) {
+    tagsViewStore.delIframeView(route as RouteLocationNormalized);
+  }
+};
+
+const closeSelectedTag = (view?: RouteLocationNormalized) => {
+  if (!view) {
+    return;
+  }
+  tab.closePage(view).then(({ visitedViews }: { visitedViews: RouteLocationNormalized[] }) => {
+    if (isActive(view)) {
+      toLastView(visitedViews, view);
+    }
+  });
+};
+
+const closeRightTags = () => {
+  const tag = getOperateTag();
+  if (!tag) {
+    return;
+  }
+  tab.closeRightPage(tag).then((views: RouteLocationNormalized[]) => {
+    if (!views.find(item => item.fullPath === route.fullPath)) {
+      toLastView(views);
+    }
+  });
+};
+
+const closeLeftTags = () => {
+  const tag = getOperateTag();
+  if (!tag) {
+    return;
+  }
+  tab.closeLeftPage(tag).then((views: RouteLocationNormalized[]) => {
+    if (!views.find(item => item.fullPath === route.fullPath)) {
+      toLastView(views);
+    }
+  });
+};
+
+const closeOthersTags = () => {
+  const tag = getOperateTag();
+  if (!tag) {
+    return;
+  }
+  router.push(tag.fullPath || tag.path || '/').catch(() => {});
+  tab.closeOtherPage(tag).then(() => {
+    moveToCurrentTag();
+  });
+};
+
+const closeAllTags = (view?: RouteLocationNormalized) => {
+  tab.closeAllPage().then(({ visitedViews: views }: { visitedViews: RouteLocationNormalized[] }) => {
+    if (affixTags.value.some(tag => tag.path === route.path)) {
+      return;
+    }
+    toLastView(views, view);
+  });
+};
+
+const toLastView = (views: RouteLocationNormalized[], view?: RouteLocationNormalized) => {
+  const latestView = views.slice(-1)[0];
+  if (latestView?.fullPath) {
+    router.push(latestView.fullPath);
+  } else if (view?.name === 'Dashboard' && view.fullPath) {
+    router.replace({ path: '/redirect' + view.fullPath });
+  } else {
+    router.push('/');
+  }
+};
+
+const scrollLeft = () => {
+  if (!canScrollLeft.value) {
+    return;
+  }
+  scrollPaneRef.value?.scrollToStart();
+};
+
+const scrollRight = () => {
+  if (!canScrollRight.value) {
+    return;
+  }
+  scrollPaneRef.value?.scrollToEnd();
+};
+
+const updateArrowState = () => {
+  nextTick(() => {
+    const state = scrollPaneRef.value?.getScrollState();
+    canScrollLeft.value = !!state?.canLeft;
+    canScrollRight.value = !!state?.canRight;
+  });
+};
+
+const syncFullscreenLayout = () => {
+  if (!isFullscreen.value) {
+    return;
+  }
+  const mainContainer = document.querySelector('.main-container') as HTMLElement | null;
+  const layoutHeader = mainContainer?.querySelector('.layout-header') as HTMLElement | null;
+  if (!mainContainer || !layoutHeader) {
+    return;
+  }
+  const headerHeight = Math.ceil(layoutHeader.getBoundingClientRect().height);
+  mainContainer.style.setProperty('--tags-fullscreen-header-height', `${headerHeight}px`);
+};
+
+const enterFullscreenMode = async () => {
+  const mainContainer = document.querySelector('.main-container') as HTMLElement | null;
+  if (!mainContainer) {
+    return;
+  }
+  document.body.classList.add(fullscreenModeClass);
+  mainContainer.classList.add(fullscreenModeClass);
+  isFullscreen.value = true;
+  await nextTick();
+  syncFullscreenLayout();
+};
+
+const exitFullscreenMode = () => {
+  const mainContainer = document.querySelector('.main-container') as HTMLElement | null;
+  document.body.classList.remove(fullscreenModeClass);
+  mainContainer?.classList.remove(fullscreenModeClass);
+  mainContainer?.style.removeProperty('--tags-fullscreen-header-height');
+  document.querySelector<HTMLElement>('.tags-action-dropdown .tags-action-btn')?.blur();
+  isFullscreen.value = false;
+};
+
+const toggleFullscreen = async () => {
+  if (isFullscreen.value) {
+    exitFullscreenMode();
+    return;
+  }
+  await enterFullscreenMode();
+};
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isFullscreen.value) {
+    exitFullscreenMode();
+  }
+};
+
+const handleResize = () => {
+  updateArrowState();
+  syncFullscreenLayout();
+};
+
+const handleDropdownCommand = (command: string) => {
+  const tag = selectedDropdownTag.value;
+  if (!tag) {
+    return;
+  }
+  selectedTag.value = tag;
+  switch (command) {
+    case 'fullscreen':
+      toggleFullscreen();
+      break;
+    case 'close':
+      closeSelectedTag(tag);
+      break;
+    case 'closeOthers':
+      closeOthersTags();
+      break;
+    case 'closeLeft':
+      closeLeftTags();
+      break;
+    case 'closeRight':
+      closeRightTags();
+      break;
+    case 'closeAll':
+      closeAllTags(tag);
+      break;
+    default:
+      break;
+  }
+};
+
+const openMenu = (tag: RouteLocationNormalized, e: MouseEvent) => {
+  left.value = e.clientX;
+  top.value = e.clientY;
+  visible.value = true;
+  selectedTag.value = tag;
+};
+
+const closeMenu = () => {
+  visible.value = false;
+};
+
+const handleScroll = () => {
+  closeMenu();
+  updateArrowState();
+};
+
+onMounted(() => {
+  initTags();
+  addTags();
+  updateArrowState();
+  window.addEventListener('resize', handleResize);
+  window.addEventListener('keydown', handleKeyDown);
+});
+
+onBeforeUnmount(() => {
+  exitFullscreenMode();
+  window.removeEventListener('resize', handleResize);
+  window.removeEventListener('keydown', handleKeyDown);
+  document.body.removeEventListener('click', closeMenu);
+});
+</script>
+
+<style lang="scss" scoped>
+.tags-view-container {
+  display: flex;
+  align-items: flex-start;
+  height: 38px;
+  width: 100%;
+  background-color: var(--app-surface-bg);
+  border: 1px solid var(--app-surface-border);
+  border-radius: var(--app-radius-md);
+  box-shadow: var(--app-shadow-sm);
+
+  $btn-width: 26px;
+  $btn-hover-bg: var(--el-fill-color-light);
+  $btn-hover-color: var(--el-text-color-primary);
+
+  .tags-nav-btn {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $btn-width;
+    height: 26px;
+    margin-top: 4px;
+    cursor: pointer;
+    color: var(--app-text-muted);
+    user-select: none;
+    background-color: var(--app-surface-bg);
+    border: 1px solid var(--app-surface-border);
+    border-radius: var(--app-radius-md);
+    transition:
+      box-shadow 0.2s ease,
+      transform 0.2s ease,
+      border-color 0.2s ease,
+      color 0.2s ease;
+
+    &:hover:not(.disabled) {
+      background: $btn-hover-bg;
+      color: $btn-hover-color;
+      border-color: var(--el-color-primary-light-5);
+      box-shadow: var(--app-shadow-sm);
+      transform: translateY(-1px);
+    }
+  }
+
+  .tags-nav-btn--left {
+    margin-left: 8px;
+    margin-right: 4px;
+  }
+
+  .tags-nav-btn--right {
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+
+  .tags-view-wrapper {
+    flex: 1;
+    min-width: 0;
+
+    .tags-view-item {
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+      cursor: pointer;
+      height: 26px;
+      line-height: 25px;
+      background-color: var(--app-surface-bg);
+      border: 1px solid var(--app-surface-border);
+      color: var(--el-text-color-regular);
+      padding: 0 8px;
+      font-size: 12px;
+      margin-left: 5px;
+      margin-top: 4px;
+      border-radius: var(--app-radius-md);
+      transition:
+        box-shadow 0.2s ease,
+        transform 0.2s ease,
+        border-color 0.2s ease,
+        color 0.2s ease;
+
+      &:hover {
+        color: var(--el-color-primary);
+        border-color: var(--el-color-primary-light-5);
+        box-shadow: var(--app-shadow-sm);
+        transform: translateY(-1px);
+      }
+
+      &:first-of-type {
+        margin-left: 10px;
+      }
+
+      &:last-of-type {
+        margin-right: 10px;
+      }
+
+      &.active {
+        background-color: var(--tags-view-active-bg);
+        color: var(--el-color-white);
+        border-color: var(--tags-view-active-border-color);
+
+        &::before {
+          content: '';
+          background: var(--el-color-white);
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          position: relative;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+
+  .tags-view-item.active.has-icon::before {
+    content: none !important;
+  }
+
+  .tags-view-item-title {
+    margin-left: 4px;
+    margin-right: 3px;
+  }
+
+  .tags-action-dropdown {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    margin-top: 4px;
+    margin-left: 4px;
+  }
+
+  .tags-action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    min-width: $btn-width;
+    height: 26px;
+    padding: 0 8px;
+    cursor: pointer;
+    color: var(--app-text-muted);
+    user-select: none;
+    background-color: var(--app-surface-bg);
+    border: 1px solid var(--app-surface-border);
+    border-radius: var(--app-radius-md);
+    transition:
+      box-shadow 0.2s ease,
+      transform 0.2s ease,
+      border-color 0.2s ease,
+      color 0.2s ease;
+
+    &:hover {
+      background: $btn-hover-bg;
+      color: $btn-hover-color;
+      border-color: var(--el-color-primary-light-5);
+      box-shadow: var(--app-shadow-sm);
+      transform: translateY(-1px);
+    }
+  }
+
+  .tags-refresh-btn {
+    width: auto;
+    font-size: 12px;
+    margin-top: 4px;
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+
+  .contextmenu {
+    margin: 0;
+    background: var(--app-surface-bg);
+    z-index: 3000;
+    position: fixed;
+    list-style-type: none;
+    padding: 5px 0;
+    border-radius: var(--app-radius-md);
+    font-size: 12px;
+    font-weight: 400;
+    box-shadow: var(--app-shadow-md);
+
+    li {
+      margin: 0;
+      padding: 7px 16px;
+      cursor: pointer;
+
+      &:hover {
+        background: var(--el-fill-color-light);
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.tags-view-wrapper {
+  .tags-view-item {
+    .el-icon-close {
+      width: 16px;
+      height: 16px;
+      vertical-align: 2px;
+      border-radius: 50%;
+      text-align: center;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transform-origin: 100% 50%;
+
+      &:before {
+        transform: scale(0.6);
+        display: inline-block;
+        vertical-align: -3px;
+      }
+
+      &:hover {
+        background-color: var(--app-surface-border);
+        color: var(--el-color-white);
+        width: 12px !important;
+        height: 12px !important;
+      }
+    }
+  }
+}
+
+body.tags-fullscreen-mode {
+  overflow: hidden;
+}
+
+body.tags-fullscreen-mode .drawer-bg,
+body.tags-fullscreen-mode .sidebar-container,
+body.tags-fullscreen-mode .navbar {
+  display: none !important;
+}
+
+.main-container.tags-fullscreen-mode {
+  position: fixed !important;
+  inset: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  margin-left: 0 !important;
+  z-index: 2000;
+  overflow: hidden;
+  background: var(--app-shell-bg);
+}
+
+.main-container.tags-fullscreen-mode .layout-header {
+  gap: 0;
+  padding: 12px 12px 0;
+}
+
+.main-container.tags-fullscreen-mode .layout-header.fixed-header {
+  position: relative;
+  top: 0;
+  right: auto;
+  width: auto !important;
+}
+
+.main-container.tags-fullscreen-mode .app-main,
+.main-container.tags-fullscreen-mode .app-main.with-fixed-header,
+.main-container.tags-fullscreen-mode .app-main.with-fixed-header.with-tags-view {
+  height: calc(100vh - var(--tags-fullscreen-header-height, 50px));
+  min-height: calc(100vh - var(--tags-fullscreen-header-height, 50px)) !important;
+  padding-top: 12px !important;
+  overflow: auto;
+}
+</style>
diff --git a/src/layout/components/TopBar/index.vue b/src/layout/components/TopBar/index.vue
new file mode 100644
index 0000000..5783d84
--- /dev/null
+++ b/src/layout/components/TopBar/index.vue
@@ -0,0 +1,319 @@
+<template>
+  <el-menu
+    class="topbar-menu"
+    :ellipsis="false"
+    :default-active="activeMenu"
+    :style="{ '--el-menu-active-color': theme }"
+    mode="horizontal"
+  >
+    <sidebar-item
+      :key="menuRoute.path + index"
+      v-for="(menuRoute, index) in topMenus"
+      :item="menuRoute"
+      :base-path="menuRoute.path"
+      popper-class="topbar-menu-popper"
+    />
+
+    <el-sub-menu
+      index="more"
+      class="el-sub-menu__hide-arrow"
+      popper-class="topbar-menu-popper"
+      v-if="moreRoutes.length > 0"
+    >
+      <template #title>
+        <span>更多菜单</span>
+      </template>
+      <sidebar-item
+        :key="menuRoute.path + index"
+        v-for="(menuRoute, index) in moreRoutes"
+        :item="menuRoute"
+        :base-path="menuRoute.path"
+        popper-class="topbar-menu-popper"
+      />
+    </el-sub-menu>
+  </el-menu>
+</template>
+
+<script setup lang="ts">
+import type { RouteRecordRaw } from 'vue-router';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useSettingsStore } from '@/store/modules/settings';
+import SidebarItem from '../Sidebar/SidebarItem.vue';
+
+const route = useRoute();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+
+const theme = computed(() => settingsStore.theme);
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  if (meta.activeMenu) {
+    return meta.activeMenu;
+  }
+  return path;
+});
+
+const visibleNumber = ref(5);
+const topMenus = computed((): RouteRecordRaw[] => {
+  return permissionStore.sidebarRouters.filter(f => !f.hidden).slice(0, visibleNumber.value) as RouteRecordRaw[];
+});
+const moreRoutes = computed((): RouteRecordRaw[] => {
+  return permissionStore.sidebarRouters.filter(f => !f.hidden).slice(visibleNumber.value) as RouteRecordRaw[];
+});
+function setVisibleNumber() {
+  let width = document.body.getBoundingClientRect().width;
+  if (width >= 1000) {
+    width -= 420;
+  }
+  visibleNumber.value = Math.max(1, Math.floor(width / 3 / 92) + 2);
+}
+
+onMounted(() => {
+  window.addEventListener('resize', setVisibleNumber);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', setVisibleNumber);
+});
+
+onMounted(() => {
+  setVisibleNumber();
+});
+</script>
+
+<style lang="scss">
+.topbar-menu.el-menu--horizontal {
+  --topbar-pill-bg: var(--app-elevated-soft-bg);
+  --topbar-pill-hover-bg: var(--app-elevated-close-bg);
+  --topbar-pill-active-bg: var(--app-elevated-close-bg);
+  --topbar-pill-text: var(--app-text-title);
+  --topbar-pill-muted: var(--app-text-muted);
+  --topbar-pill-border: var(--app-surface-border);
+  --topbar-pill-active-border: var(--app-surface-border);
+
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+  height: 44px;
+  padding: 0;
+  border: none !important;
+  background: transparent !important;
+
+  &::after {
+    display: none !important;
+  }
+}
+
+#app .topbar-menu.el-menu--horizontal > div > a > .el-menu-item,
+#app .topbar-menu.el-menu--horizontal > div > .el-sub-menu > .el-sub-menu__title,
+#app .topbar-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  height: 36px !important;
+  line-height: 36px !important;
+  margin: 0 !important;
+  padding: 0 18px !important;
+  border: 1px solid transparent !important;
+  border-radius: 13px;
+  color: var(--topbar-pill-text) !important;
+  background: transparent !important;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+#app .topbar-menu.el-menu--horizontal > div > a > .el-menu-item:hover,
+#app .topbar-menu.el-menu--horizontal > div > .el-sub-menu > .el-sub-menu__title:hover,
+#app .topbar-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title:hover {
+  background: linear-gradient(180deg, var(--topbar-pill-hover-bg), var(--topbar-pill-bg)) !important;
+  border-color: var(--topbar-pill-border) !important;
+  color: v-bind(theme) !important;
+  transform: translateY(-1px);
+}
+
+#app .topbar-menu.el-menu--horizontal > div > a > .el-menu-item.is-active,
+#app .topbar-menu.el-menu--horizontal > div > .el-sub-menu.is-active > .el-sub-menu__title,
+#app .topbar-menu.el-menu--horizontal > .el-sub-menu.is-active > .el-sub-menu__title {
+  background: linear-gradient(180deg, var(--topbar-pill-hover-bg), var(--topbar-pill-active-bg)) !important;
+  border-color: var(--topbar-pill-active-border) !important;
+  color: v-bind(theme) !important;
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+#app .topbar-menu.el-menu--horizontal .el-menu-item .svg-icon + span,
+#app .topbar-menu.el-menu--horizontal .el-sub-menu__title .svg-icon + span {
+  margin-left: 2px;
+}
+
+#app .topbar-menu.el-menu--horizontal > div > a > .el-menu-item .svg-icon,
+#app .topbar-menu.el-menu--horizontal > div > .el-sub-menu > .el-sub-menu__title .svg-icon,
+#app .topbar-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title .svg-icon {
+  width: 14px;
+  height: 14px;
+  margin-right: 0 !important;
+  flex-shrink: 0;
+}
+
+#app .topbar-menu.el-menu--horizontal > div > a > .el-menu-item span,
+#app .topbar-menu.el-menu--horizontal > div > .el-sub-menu > .el-sub-menu__title span,
+#app .topbar-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title span {
+  color: inherit !important;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+.topbar-menu.el-menu--horizontal > div > a > .el-menu-item.is-active span,
+.topbar-menu.el-menu--horizontal > div > .el-sub-menu.is-active > .el-sub-menu__title span,
+.topbar-menu.el-menu--horizontal > .el-sub-menu.is-active > .el-sub-menu__title span {
+  font-weight: 500;
+}
+
+.topbar-menu .el-sub-menu .el-sub-menu__icon-arrow {
+  position: static;
+  margin: 0 0 0 2px;
+  display: block !important;
+  color: inherit;
+  font-size: 11px;
+}
+
+.topbar-menu.el-menu--horizontal > div > a > .el-menu-item::after,
+.topbar-menu.el-menu--horizontal > div > .el-sub-menu > .el-sub-menu__title::after,
+.topbar-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title::after {
+  display: none !important;
+}
+
+.topbar-menu.el-menu--horizontal > .el-sub-menu.el-sub-menu__hide-arrow > .el-sub-menu__title {
+  color: var(--topbar-pill-muted) !important;
+  padding-right: 16px !important;
+}
+
+html.dark .topbar-menu.el-menu--horizontal {
+  --topbar-pill-bg: rgba(30, 41, 59, 0.64);
+  --topbar-pill-hover-bg: rgba(51, 65, 85, 0.88);
+  --topbar-pill-active-bg: rgba(51, 65, 85, 0.78);
+  --topbar-pill-border: rgba(71, 85, 105, 0.28);
+  --topbar-pill-active-border: rgba(71, 85, 105, 0.32);
+}
+
+html.dark #app .topbar-menu.el-menu--horizontal > div > a > .el-menu-item.is-active,
+html.dark #app .topbar-menu.el-menu--horizontal > div > .el-sub-menu.is-active > .el-sub-menu__title,
+html.dark #app .topbar-menu.el-menu--horizontal > .el-sub-menu.is-active > .el-sub-menu__title {
+  box-shadow: none !important;
+}
+
+.topbar-menu-popper.el-popper {
+  border: none !important;
+  border-radius: var(--app-radius-base) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+.topbar-menu-popper.el-popper .el-popper__arrow {
+  display: none !important;
+}
+
+.topbar-menu-popper .el-menu--popup {
+  min-width: 188px;
+  padding: 10px !important;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: var(--app-radius-base);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)) !important;
+  box-shadow:
+    0 18px 40px rgba(15, 23, 42, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.72);
+}
+
+.topbar-menu-popper .el-menu--popup .el-menu-item,
+.topbar-menu-popper .el-menu--popup .el-sub-menu__title {
+  display: flex;
+  align-items: center;
+  height: 38px;
+  line-height: 38px;
+  padding: 0 14px !important;
+  margin: 0 0 4px !important;
+  border-radius: 12px;
+  color: var(--app-text-title) !important;
+  background: transparent !important;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+.topbar-menu-popper .el-menu--popup .el-menu-item:last-child,
+.topbar-menu-popper .el-menu--popup .el-sub-menu:last-child > .el-sub-menu__title {
+  margin-bottom: 0 !important;
+}
+
+.topbar-menu-popper .el-menu--popup .el-menu-item:hover,
+.topbar-menu-popper .el-menu--popup .el-sub-menu__title:hover {
+  background: rgba(64, 158, 255, 0.08) !important;
+  color: v-bind(theme) !important;
+  transform: translateX(1px);
+}
+
+.topbar-menu-popper .el-menu--popup .el-menu-item.is-active,
+.topbar-menu-popper .el-menu--popup .el-sub-menu.is-active > .el-sub-menu__title {
+  background: linear-gradient(180deg, rgba(64, 158, 255, 0.16), rgba(64, 158, 255, 0.1)) !important;
+  color: v-bind(theme) !important;
+  box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.12);
+}
+
+.topbar-menu-popper .el-menu--popup .svg-icon {
+  width: 14px;
+  height: 14px;
+  margin-right: 10px !important;
+}
+
+.topbar-menu-popper .el-menu--popup .menu-title,
+.topbar-menu-popper .el-menu--popup .el-sub-menu__title > span,
+.topbar-menu-popper .el-menu--popup .el-menu-item > span {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+.topbar-menu-popper .el-menu--popup .el-sub-menu__icon-arrow {
+  position: static;
+  margin-left: auto;
+  margin-top: 0;
+  font-size: 11px;
+  align-self: center;
+}
+
+html.dark .topbar-menu-popper .el-menu--popup {
+  border-color: rgba(71, 85, 105, 0.34);
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.94)) !important;
+  box-shadow:
+    0 20px 42px rgba(0, 0, 0, 0.34),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+html.dark .topbar-menu-popper .el-menu--popup .el-menu-item,
+html.dark .topbar-menu-popper .el-menu--popup .el-sub-menu__title {
+  color: #e5edf8 !important;
+}
+
+html.dark .topbar-menu-popper .el-menu--popup .el-menu-item:hover,
+html.dark .topbar-menu-popper .el-menu--popup .el-sub-menu__title:hover {
+  background: rgba(96, 165, 250, 0.14) !important;
+}
+
+html.dark .topbar-menu-popper .el-menu--popup .el-menu-item.is-active,
+html.dark .topbar-menu-popper .el-menu--popup .el-sub-menu.is-active > .el-sub-menu__title {
+  background: linear-gradient(180deg, rgba(37, 99, 235, 0.28), rgba(59, 130, 246, 0.18)) !important;
+  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.16);
+}
+</style>
diff --git a/src/layout/components/TopBar/search.vue b/src/layout/components/TopBar/search.vue
new file mode 100644
index 0000000..c035219
--- /dev/null
+++ b/src/layout/components/TopBar/search.vue
@@ -0,0 +1,473 @@
+<template>
+  <div class="layout-search-dialog">
+    <el-dialog
+      v-model="state.isShowSearch"
+      width="640px"
+      destroy-on-close
+      append-to-body
+      :show-close="false"
+      @close="handleClose"
+      @opened="onDialogOpened"
+    >
+      <el-input
+        ref="searchInputRef"
+        v-model="state.menuQuery"
+        size="large"
+        clearable
+        placeholder="菜单搜索，支持标题、URL模糊查询"
+        @input="querySearch"
+        @keydown="handleSearchKeydown"
+      >
+        <template #prefix>
+          <svg-icon class-name="search-icon" icon-class="search" />
+        </template>
+      </el-input>
+
+      <div v-if="state.menuQuery && state.options.length > 0" class="result-count">
+        找到
+        <strong>{{ state.options.length }}</strong>
+        个结果
+      </div>
+
+      <el-scrollbar wrap-class="layout-search-scrollbar">
+        <div class="result-wrap">
+          <template v-if="state.options.length > 0">
+            <div
+              v-for="(item, index) in state.options"
+              :key="item.path + item.fullTitle"
+              class="search-item"
+              :class="{ 'is-active': index === state.activeIndex }"
+              :style="activeStyle(index)"
+              @mouseenter="state.activeIndex = index"
+              @mouseleave="state.activeIndex = -1"
+              @click="handleSelect(item)"
+            >
+              <div class="search-item__icon">
+                <svg-icon v-if="item.icon" :icon-class="item.icon" class-name="menu-icon" />
+                <svg-icon v-else icon-class="guide" class-name="menu-icon" />
+              </div>
+              <div class="search-item__info">
+                <div class="menu-title" v-html="highlightText(item.fullTitle)"></div>
+                <div class="menu-path" v-html="highlightText(item.path)"></div>
+              </div>
+              <svg-icon v-show="index === state.activeIndex" icon-class="enter" class-name="search-enter" />
+            </div>
+          </template>
+
+          <div v-else-if="state.menuQuery" class="empty-state">
+            <el-icon class="empty-icon"><Search /></el-icon>
+            <p class="empty-text">
+              未找到 "
+              <strong>{{ state.menuQuery }}</strong>
+              " 相关菜单
+            </p>
+            <p class="empty-tip">试试其他关键词或路径</p>
+          </div>
+        </div>
+      </el-scrollbar>
+
+      <div class="search-footer">
+        <span class="shortcut-item">
+          <kbd>↑</kbd>
+          <kbd>↓</kbd>
+          切换
+        </span>
+        <span class="shortcut-item">
+          <kbd>↵</kbd>
+          选择
+        </span>
+        <span class="shortcut-item">
+          <kbd>Esc</kbd>
+          关闭
+        </span>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="layoutBreadcrumbSearch">
+import type { RouteRecordRaw } from 'vue-router';
+import { Search } from '@element-plus/icons-vue';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useSettingsStore } from '@/store/modules/settings';
+import { getNormalPath } from '@/utils/ruoyi';
+import { isHttp } from '@/utils/validate';
+
+type SearchMenuItem = {
+  path: string;
+  icon: string;
+  title: string[];
+  fullTitle: string;
+  query?: string;
+};
+
+type SearchState = {
+  isShowSearch: boolean;
+  menuQuery: string;
+  menuList: SearchMenuItem[];
+  options: SearchMenuItem[];
+  activeIndex: number;
+};
+
+const router = useRouter();
+const permissionStore = usePermissionStore();
+const settingsStore = useSettingsStore();
+const searchInputRef = ref<any>();
+
+const routes = computed(() => permissionStore.defaultRoutes);
+const theme = computed(() => settingsStore.theme);
+
+const state = reactive<SearchState>({
+  isShowSearch: false,
+  menuQuery: '',
+  menuList: [],
+  options: [],
+  activeIndex: -1
+});
+
+const buildSearchPool = () => {
+  state.menuList = generateRoutes(routes.value as RouteRecordRaw[]);
+  if (!state.menuQuery) {
+    state.options = state.menuList;
+  }
+};
+
+const openSearch = () => {
+  state.menuQuery = '';
+  state.activeIndex = -1;
+  buildSearchPool();
+  state.isShowSearch = true;
+};
+
+const onDialogOpened = () => {
+  nextTick(() => {
+    searchInputRef.value?.focus?.();
+  });
+};
+
+const handleClose = () => {
+  searchInputRef.value?.blur?.();
+  state.menuQuery = '';
+  state.activeIndex = -1;
+  state.options = state.menuList;
+  state.isShowSearch = false;
+};
+
+const generateRoutes = (routeList: RouteRecordRaw[], basePath = '', prefixTitle: string[] = []): SearchMenuItem[] => {
+  let result: SearchMenuItem[] = [];
+  routeList.forEach(route => {
+    if (route.hidden) {
+      return;
+    }
+
+    const currentPath = route.path?.startsWith('/') ? route.path : `/${route.path ?? ''}`;
+    const data: SearchMenuItem = {
+      path: !isHttp(route.path || '') ? getNormalPath(basePath + currentPath) : String(route.path || ''),
+      icon: String(route.meta?.icon || ''),
+      title: [...prefixTitle],
+      fullTitle: ''
+    };
+
+    if (route.meta?.title) {
+      data.title = [...data.title, String(route.meta.title)];
+      data.fullTitle = data.title.join(' / ');
+      if (route.redirect !== 'noRedirect') {
+        result.push(data);
+      }
+    }
+
+    if (route.query) {
+      data.query = String(route.query);
+    }
+
+    if (route.children?.length) {
+      result = [...result, ...generateRoutes(route.children, data.path, data.title)];
+    }
+  });
+  return result;
+};
+
+const querySearch = (query: string) => {
+  state.activeIndex = -1;
+  if (!query) {
+    state.options = state.menuList;
+    return;
+  }
+
+  const keyword = query.toLowerCase();
+  state.options = state.menuList.filter(item => {
+    return item.fullTitle.toLowerCase().includes(keyword) || item.path.toLowerCase().includes(keyword);
+  });
+};
+
+const navigateResult = (direction: 'up' | 'down') => {
+  if (!state.options.length) {
+    return;
+  }
+
+  if (direction === 'up') {
+    state.activeIndex = state.activeIndex <= 0 ? state.options.length - 1 : state.activeIndex - 1;
+    return;
+  }
+
+  state.activeIndex = state.activeIndex >= state.options.length - 1 ? 0 : state.activeIndex + 1;
+};
+
+const handleSearchKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    navigateResult('up');
+    return;
+  }
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    navigateResult('down');
+    return;
+  }
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    selectActiveResult();
+  }
+};
+
+const selectActiveResult = () => {
+  if (state.options.length === 0) {
+    return;
+  }
+
+  const current = state.activeIndex >= 0 ? state.options[state.activeIndex] : state.options[0];
+  handleSelect(current);
+};
+
+const handleSelect = async (item: SearchMenuItem) => {
+  if (isHttp(item.path)) {
+    const startIndex = item.path.indexOf('http');
+    window.open(item.path.substring(startIndex), '_blank');
+  } else if (item.query) {
+    try {
+      await router.push({ path: item.path, query: JSON.parse(item.query) });
+    } catch {
+      await router.push(item.path);
+    }
+  } else {
+    await router.push(item.path);
+  }
+
+  handleClose();
+};
+
+const activeStyle = (index: number) => {
+  if (index !== state.activeIndex) {
+    return {};
+  }
+  return {
+    backgroundColor: theme.value,
+    color: '#fff'
+  };
+};
+
+const highlightText = (text: string) => {
+  if (!text || !state.menuQuery) {
+    return text;
+  }
+
+  const escapedKeyword = escapeRegExp(state.menuQuery);
+  const reg = new RegExp(`(${escapedKeyword})`, 'gi');
+  return text.replace(reg, '<span class="highlight">$1</span>');
+};
+
+const escapeRegExp = (value: string) => {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};
+
+watch(
+  routes,
+  () => {
+    buildSearchPool();
+  },
+  { deep: true, immediate: true }
+);
+
+defineExpose({
+  openSearch
+});
+</script>
+
+<style lang="scss" scoped>
+.layout-search-dialog {
+  :deep(.el-dialog) {
+    border-radius: 22px;
+    overflow: hidden;
+    padding: 0;
+  }
+
+  :deep(.el-dialog__header) {
+    display: none;
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 18px 18px 0;
+  }
+
+  :deep(.el-input__wrapper) {
+    min-height: 52px;
+    border-radius: var(--app-radius-base);
+  }
+
+  :deep(.highlight) {
+    color: #ef4444;
+    font-weight: 600;
+  }
+
+  :deep(.is-active .highlight) {
+    color: rgba(255, 255, 255, 0.92);
+  }
+}
+
+.result-count {
+  padding: 10px 6px 0;
+  font-size: 12px;
+  color: var(--app-text-muted);
+
+  strong {
+    color: #ef4444;
+    font-weight: 600;
+  }
+}
+
+.result-wrap {
+  height: 300px;
+  margin: 8px 0 0;
+}
+
+.search-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 56px;
+  margin-bottom: 6px;
+  padding: 10px 12px;
+  border-radius: var(--app-radius-base);
+  cursor: pointer;
+  transition:
+    background-color 0.18s ease,
+    transform 0.18s ease,
+    color 0.18s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    background: rgba(64, 158, 255, 0.08);
+  }
+
+  &.is-active {
+    transform: none;
+  }
+}
+
+.search-item__icon {
+  width: 28px;
+  display: inline-flex;
+  justify-content: center;
+  flex-shrink: 0;
+
+  .menu-icon {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.search-item__info {
+  flex: 1;
+  min-width: 0;
+}
+
+.menu-title,
+.menu-path {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.menu-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: inherit;
+}
+
+.menu-path {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--app-text-muted);
+}
+
+.search-item.is-active .menu-path {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.search-enter {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.empty-state {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--app-text-muted);
+}
+
+.empty-icon {
+  font-size: 40px;
+  margin-bottom: 14px;
+  color: var(--app-text-muted);
+}
+
+.empty-text {
+  margin: 0 0 6px;
+  font-size: 14px;
+
+  strong {
+    color: var(--app-text-title);
+  }
+}
+
+.empty-tip {
+  margin: 0;
+  font-size: 12px;
+}
+
+.search-footer {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 14px 18px 16px;
+  border-top: 1px solid var(--app-surface-border);
+  color: var(--app-text-muted);
+  font-size: 12px;
+}
+
+.shortcut-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  border: 1px solid var(--app-surface-border);
+  border-radius: 6px;
+  background: var(--app-elevated-soft-bg);
+  color: var(--app-text-title);
+  font-size: 11px;
+  line-height: 1;
+  box-shadow: inset 0 -1px 0 var(--app-surface-border);
+}
+</style>
diff --git a/src/layout/components/index.ts b/src/layout/components/index.ts
new file mode 100644
index 0000000..47c83e1
--- /dev/null
+++ b/src/layout/components/index.ts
@@ -0,0 +1,4 @@
+export { default as AppMain } from './AppMain.vue';
+export { default as Navbar } from './Navbar.vue';
+export { default as Settings } from './Settings/index.vue';
+export { default as TagsView } from './TagsView/index.vue';
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
new file mode 100644
index 0000000..50fd262
--- /dev/null
+++ b/src/layout/components/notice/index.vue
@@ -0,0 +1,212 @@
+<template>
+  <div v-loading="state.loading" class="layout-navbars-breadcrumb-user-news">
+    <div class="head-box">
+      <div class="head-box-title">消息盒子</div>
+      <div class="head-box-btn" @click="readAll">全部已读</div>
+    </div>
+    <el-tabs v-model="activeTab" class="message-tabs" stretch>
+      <el-tab-pane :label="`系统 ${tabCount.system}`" name="system"></el-tab-pane>
+      <el-tab-pane :label="`通知 ${tabCount.notice}`" name="notice"></el-tab-pane>
+      <el-tab-pane :label="`工作 ${tabCount.workflow}`" name="workflow"></el-tab-pane>
+    </el-tabs>
+    <div v-loading="state.loading" class="content-box">
+      <template v-if="currentNewsList.length > 0">
+        <div v-for="(v, k) in currentNewsList" :key="k" class="content-box-item" @click="onNewsClick(k)">
+          <div class="item-conten">
+            <div class="content-box-title">{{ v.title || '消息' }}</div>
+            <div>{{ v.message }}</div>
+            <div v-if="v.content" class="content-box-msg">{{ v.content }}</div>
+            <div class="content-box-time">{{ v.time }}</div>
+          </div>
+          <!-- 已读/未读 -->
+          <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">已读</span>
+          <span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
+        </div>
+      </template>
+      <el-empty v-else :description="emptyDescription"></el-empty>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="layoutBreadcrumbUserNews">
+import router from '@/router';
+import { useNoticeStore } from '@/store/modules/notice';
+import { useUserStore } from '@/store/modules/user';
+import { markMessageRead, markMessageReadBatch } from '@/utils/message-read';
+import { NOTICE_GROUP } from '@/utils/push-message';
+
+const noticeStore = useNoticeStore();
+const userStore = useUserStore();
+
+// 定义变量内容
+const state = reactive({
+  loading: false
+});
+const activeTab = ref<string>(NOTICE_GROUP.SYSTEM);
+const newsList = computed(() => noticeStore.state.notices);
+
+const tabCount = computed(() => ({
+  system: newsList.value.filter((item: any) => (item.category || NOTICE_GROUP.SYSTEM) === NOTICE_GROUP.SYSTEM).length,
+  notice: newsList.value.filter((item: any) => item.category === NOTICE_GROUP.NOTICE).length,
+  workflow: newsList.value.filter((item: any) => item.category === NOTICE_GROUP.WORKFLOW).length
+}));
+
+const currentNewsList = computed(() => {
+  return newsList.value.filter((item: any) => {
+    return (item.category || NOTICE_GROUP.SYSTEM) === activeTab.value;
+  });
+});
+
+const emptyDescription = computed(() => {
+  if (activeTab.value === NOTICE_GROUP.NOTICE) {
+    return '暂无通知公告消息';
+  }
+  if (activeTab.value === NOTICE_GROUP.WORKFLOW) {
+    return '暂无工作流消息';
+  }
+  return '暂无系统消息';
+});
+
+//点击消息，写入已读
+const onNewsClick = async (item: any) => {
+  const current = currentNewsList.value[item];
+  if (current?.messageId) {
+    markMessageRead(userStore.userId, current.messageId);
+    noticeStore.markRead(current.messageId);
+  }
+  if (current?.path) {
+    await router.push(current.path);
+  }
+};
+
+const readAll = () => {
+  const ids = newsList.value
+    .map((item: any) => item.messageId)
+    .filter((item: string | number | undefined) => item !== undefined && item !== null);
+  markMessageReadBatch(userStore.userId, ids);
+  noticeStore.markReadBatch(ids);
+};
+</script>
+
+<style lang="scss" scoped>
+.layout-navbars-breadcrumb-user-news {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+
+  .head-box {
+    display: flex;
+    border-bottom: 1px solid var(--app-surface-border);
+    box-sizing: border-box;
+    color: var(--app-text-title);
+    justify-content: space-between;
+    height: 40px;
+    align-items: center;
+    padding: 0 2px 10px;
+
+    .head-box-title {
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .head-box-btn {
+      color: var(--app-accent-strong);
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      opacity: 0.8;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .message-tabs {
+    padding-top: 6px;
+
+    :deep(.el-tabs__header) {
+      margin-bottom: 0;
+    }
+
+    :deep(.el-tabs__nav-wrap::after) {
+      background: var(--app-surface-border);
+    }
+
+    :deep(.el-tabs__item) {
+      font-size: 12px;
+      height: 34px;
+      color: var(--app-text-muted);
+    }
+
+    :deep(.el-tabs__item.is-active) {
+      color: var(--app-accent-strong);
+      font-weight: 600;
+    }
+  }
+
+  .content-box {
+    height: 300px;
+    overflow: auto;
+    font-size: 13px;
+    padding: 8px 0 0;
+
+    .content-box-item {
+      display: flex;
+      gap: 10px;
+      align-items: flex-start;
+      padding: 12px;
+      margin: 4px 0;
+      border-radius: 12px;
+      cursor: pointer;
+      transition:
+        background-color 0.2s ease,
+        transform 0.2s ease;
+
+      &:hover {
+        background: var(--app-accent-soft);
+        transform: translateY(-1px);
+      }
+
+      .content-box-msg {
+        color: var(--el-text-color-secondary);
+        margin: 2px 0 0;
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .content-box-time {
+        color: var(--app-text-muted);
+        font-size: 12px;
+      }
+
+      .item-conten {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        color: var(--app-text-title);
+        line-height: 1.6;
+      }
+
+      .content-box-title {
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--app-accent-strong);
+      }
+
+      .read {
+        flex-shrink: 0;
+        margin-top: 2px;
+      }
+    }
+  }
+
+  :deep(.el-empty__description p) {
+    font-size: 13px;
+  }
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
new file mode 100644
index 0000000..f326e00
--- /dev/null
+++ b/src/layout/index.vue
@@ -0,0 +1,137 @@
+<template>
+  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <side-bar v-if="showSidebar" class="sidebar-container" />
+    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+      <div :class="{ 'fixed-header': fixedHeader }" class="layout-header">
+        <navbar @set-layout="setLayout" />
+        <tags-view v-if="needTagsView" />
+      </div>
+      <app-main :class="{ 'with-fixed-header': fixedHeader, 'with-tags-view': needTagsView }" />
+      <settings ref="settingRef" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NavTypeEnum } from '@/enums/NavTypeEnum';
+import { useAppStore } from '@/store/modules/app';
+import { useSettingsStore } from '@/store/modules/settings';
+import { initMessageBox, initPush } from '@/utils/push';
+import { AppMain, Navbar, Settings, TagsView } from './components';
+import SideBar from './components/Sidebar/index.vue';
+
+const settingsStore = useSettingsStore();
+const theme = computed(() => settingsStore.theme);
+const sidebar = computed(() => useAppStore().sidebar);
+const device = computed(() => useAppStore().device);
+const needTagsView = computed(() => settingsStore.tagsView);
+const fixedHeader = computed(() => settingsStore.fixedHeader);
+const layout = computed(() => settingsStore.navType);
+
+// 根据布局模式判断是否显示侧边栏
+const showSidebar = computed(() => {
+  if (sidebar.value.hide) return false;
+  return layout.value === NavTypeEnum.LEFT || layout.value === NavTypeEnum.MIX;
+});
+
+const classObj = computed(() => ({
+  hideSidebar: !sidebar.value.opened,
+  openSidebar: sidebar.value.opened,
+  withoutAnimation: sidebar.value.withoutAnimation,
+  mobile: device.value === 'mobile'
+}));
+
+const { width } = useWindowSize();
+const WIDTH = 992; // refer to Bootstrap's responsive design
+
+watch(
+  width,
+  w => {
+    if (w - 1 < WIDTH) {
+      useAppStore().toggleDevice('mobile');
+      useAppStore().closeSideBar({ withoutAnimation: true });
+    } else {
+      useAppStore().toggleDevice('desktop');
+    }
+  },
+  { immediate: true }
+);
+
+const settingRef = ref<InstanceType<typeof Settings>>();
+
+onMounted(async () => {
+  try {
+    await initMessageBox();
+  } finally {
+    initPush();
+  }
+});
+
+const handleClickOutside = () => {
+  useAppStore().closeSideBar({ withoutAnimation: false });
+};
+
+const setLayout = () => {
+  settingRef.value?.openSetting();
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/mixin.scss';
+@use '@/assets/styles/tokens/sass-vars' as *;
+
+.app-wrapper {
+  @include mixin.clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background: var(--app-shell-bg);
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+
+.drawer-bg {
+  background: #000;
+  opacity: 0.4;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+
+.layout-header {
+  position: relative;
+  z-index: 9;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 12px 12px 0;
+  background: transparent;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: calc(100% - #{$base-sidebar-width} - 12px);
+  transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 70px);
+}
+
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+  top: 0;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..e4d16c1
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,41 @@
+import HighLight from '@highlightjs/vue-plugin';
+import { ElDialog } from 'element-plus';
+import { createApp } from 'vue';
+import VxeUIPlugin, { VxeUI } from 'vxe-pc-ui';
+import VxeTablePlugin from 'vxe-table';
+import 'virtual:uno.css';
+import 'element-plus/theme-chalk/dark/css-vars.css';
+import '@/assets/styles/index.scss';
+import 'highlight.js/styles/atom-one-dark.css';
+import 'highlight.js/lib/common';
+import 'virtual:svg-icons-register';
+import 'vxe-pc-ui/lib/style.css';
+import 'vxe-table/lib/style.css';
+import i18n from '@/lang/index';
+import ElementIcons from '@/plugins/svgicon';
+import App from './App.vue';
+import directive from './directive';
+import plugins from './plugins/index';
+import './permission';
+import router from './router';
+import store from './store';
+
+VxeUI.setConfig({
+  zIndex: 999999
+});
+
+ElDialog.props.closeOnClickModal.default = false;
+
+const app = createApp(App);
+
+app.use(HighLight);
+app.use(ElementIcons);
+app.use(store);
+app.use(router);
+app.use(i18n);
+app.use(VxeUIPlugin);
+app.use(VxeTablePlugin);
+app.use(plugins);
+directive(app);
+
+app.mount('#app');
diff --git a/src/permission.ts b/src/permission.ts
new file mode 100644
index 0000000..9b19c2a
--- /dev/null
+++ b/src/permission.ts
@@ -0,0 +1,81 @@
+import { to as tos } from 'await-to-js';
+import { ElMessage } from 'element-plus/es';
+import * as NProgressModule from 'nprogress';
+import 'nprogress/nprogress.css';
+import { usePermissionStore } from '@/store/modules/permission';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useUserStore } from '@/store/modules/user';
+import { getToken } from '@/utils/auth';
+import { isHandledRequestError, isRelogin } from '@/utils/request';
+import { isHttp, isPathMatch } from '@/utils/validate';
+import router from './router';
+
+const NProgress = ('default' in NProgressModule ? NProgressModule.default : NProgressModule) as typeof NProgressModule;
+
+NProgress.configure({ showSpinner: false });
+const whiteList = ['/login', '/register', '/social-callback', '/register*', '/register/*'];
+
+const isWhiteList = (path: string) => {
+  return whiteList.some(pattern => isPathMatch(pattern, path));
+};
+
+router.beforeEach(async (to, from) => {
+  NProgress.start();
+  if (getToken()) {
+    to.meta.title && useSettingsStore().setTitle(to.meta.title as string);
+    /* has token*/
+    if (to.path === '/login') {
+      NProgress.done();
+      return { path: '/' };
+    } else if (isWhiteList(to.path)) {
+      return true;
+    } else {
+      if (useUserStore().roles.length === 0) {
+        isRelogin.show = true;
+        // 判断当前用户是否已拉取完user_info信息
+        const [err] = await tos(useUserStore().getInfo());
+        if (err) {
+          await useUserStore().logout();
+          if (!isHandledRequestError(err)) {
+            ElMessage.error(err instanceof Error ? err.message : String(err));
+          }
+          return { path: '/' };
+        } else {
+          isRelogin.show = false;
+          const accessRoutes = await usePermissionStore().generateRoutes();
+          // 根据roles权限生成可访问的路由表
+          accessRoutes.forEach(route => {
+            if (!isHttp(route.path)) {
+              router.addRoute(route); // 动态添加可访问路由表
+            }
+          });
+          // hack方法 确保addRoutes已完成
+          return {
+            path: to.path,
+            replace: true,
+            params: to.params,
+            query: to.query,
+            hash: to.hash,
+            name: to.name as string
+          };
+        }
+      } else {
+        return true;
+      }
+    }
+  } else {
+    // 没有token
+    if (isWhiteList(to.path)) {
+      // 在免登录白名单，直接进入
+      return true;
+    } else {
+      const redirect = encodeURIComponent(to.fullPath || '/');
+      NProgress.done();
+      return `/login?redirect=${redirect}`; // 否则全部重定向到登录页
+    }
+  }
+});
+
+router.afterEach(() => {
+  NProgress.done();
+});
diff --git a/src/plugins/auth.ts b/src/plugins/auth.ts
new file mode 100644
index 0000000..1ef2428
--- /dev/null
+++ b/src/plugins/auth.ts
@@ -0,0 +1,60 @@
+import { useUserStore } from '@/store/modules/user';
+
+const authPermission = (permission: string): boolean => {
+  const all_permission = '*:*:*';
+  const permissions: string[] = useUserStore().permissions;
+  if (permission && permission.length > 0) {
+    return permissions.some(v => {
+      return all_permission === v || v === permission;
+    });
+  } else {
+    return false;
+  }
+};
+
+const authRole = (role: string): boolean => {
+  const super_admin = 'admin';
+  const roles = useUserStore().roles;
+  if (role && role.length > 0) {
+    return roles.some(v => {
+      return super_admin === v || v === role;
+    });
+  } else {
+    return false;
+  }
+};
+
+export default {
+  // 验证用户是否具备某权限
+  hasPermi(permission: string): boolean {
+    return authPermission(permission);
+  },
+  // 验证用户是否含有指定权限，只需包含其中一个
+  hasPermiOr(permissions: string[]): boolean {
+    return permissions.some(item => {
+      return authPermission(item);
+    });
+  },
+  // 验证用户是否含有指定权限，必须全部拥有
+  hasPermiAnd(permissions: string[]): boolean {
+    return permissions.every(item => {
+      return authPermission(item);
+    });
+  },
+  // 验证用户是否具备某角色
+  hasRole(role: string): boolean {
+    return authRole(role);
+  },
+  // 验证用户是否含有指定角色，只需包含其中一个
+  hasRoleOr(roles: string[]): boolean {
+    return roles.some(item => {
+      return authRole(item);
+    });
+  },
+  // 验证用户是否含有指定角色，必须全部拥有
+  hasRoleAnd(roles: string[]): boolean {
+    return roles.every(item => {
+      return authRole(item);
+    });
+  }
+};
diff --git a/src/plugins/cache.ts b/src/plugins/cache.ts
new file mode 100644
index 0000000..e5ceead
--- /dev/null
+++ b/src/plugins/cache.ts
@@ -0,0 +1,79 @@
+const sessionCache = {
+  set(key: string, value: any) {
+    if (!sessionStorage) {
+      return;
+    }
+    if (key != null && value != null) {
+      sessionStorage.setItem(key, value);
+    }
+  },
+  get(key: string) {
+    if (!sessionStorage) {
+      return null;
+    }
+    if (key == null) {
+      return null;
+    }
+    return sessionStorage.getItem(key);
+  },
+  setJSON(key: string, jsonValue: any) {
+    if (jsonValue != null) {
+      this.set(key, JSON.stringify(jsonValue));
+    }
+  },
+  getJSON(key: string) {
+    const value = this.get(key);
+    if (value != null) {
+      return JSON.parse(value);
+    }
+    return null;
+  },
+  remove(key: string) {
+    sessionStorage.removeItem(key);
+  }
+};
+const localCache = {
+  set(key: string, value: any) {
+    if (!localStorage) {
+      return;
+    }
+    if (key != null && value != null) {
+      localStorage.setItem(key, value);
+    }
+  },
+  get(key: string) {
+    if (!localStorage) {
+      return null;
+    }
+    if (key == null) {
+      return null;
+    }
+    return localStorage.getItem(key);
+  },
+  setJSON(key: string, jsonValue: any) {
+    if (jsonValue != null) {
+      this.set(key, JSON.stringify(jsonValue));
+    }
+  },
+  getJSON(key: string) {
+    const value = this.get(key);
+    if (value != null) {
+      return JSON.parse(value);
+    }
+    return null;
+  },
+  remove(key: string) {
+    localStorage.removeItem(key);
+  }
+};
+
+export default {
+  /**
+   * 会话级缓存
+   */
+  session: sessionCache,
+  /**
+   * 本地缓存
+   */
+  local: localCache
+};
diff --git a/src/plugins/download.ts b/src/plugins/download.ts
new file mode 100644
index 0000000..099593a
--- /dev/null
+++ b/src/plugins/download.ts
@@ -0,0 +1,74 @@
+import type { LoadingInstance } from 'element-plus';
+import axiosModule from 'axios';
+import errorCode from '@/utils/errorCode';
+import { extractErrorMessage, globalHeaders } from '@/utils/request';
+import { blobValidate } from '@/utils/ruoyi';
+import { saveBlob } from '@/utils/save';
+
+const axios = axiosModule as any;
+const baseURL = import.meta.env.VITE_APP_BASE_API;
+let downloadLoadingInstance: LoadingInstance | undefined;
+export default {
+  async oss(ossId: string | number) {
+    const url = baseURL + '/resource/oss/download/' + ossId;
+    downloadLoadingInstance = ElLoading.service({
+      text: '正在下载数据，请稍候',
+      background: 'rgba(0, 0, 0, 0.7)'
+    });
+    try {
+      const res = await axios({
+        method: 'get',
+        url: url,
+        responseType: 'blob',
+        headers: globalHeaders()
+      });
+      const isBlob = blobValidate(res.data);
+      if (isBlob) {
+        const blob = new Blob([res.data], { type: 'application/octet-stream' });
+        saveBlob(blob, decodeURIComponent(res.headers['download-filename'] as string));
+      } else {
+        this.printErrMsg(res.data);
+      }
+      downloadLoadingInstance?.close();
+    } catch (r) {
+      console.error(r);
+      const errMsg = await extractErrorMessage(r);
+      ElMessage.error(errMsg || '下载文件出现错误，请联系管理员！');
+      downloadLoadingInstance?.close();
+    }
+  },
+  async zip(url: string, name: string) {
+    url = baseURL + url;
+    downloadLoadingInstance = ElLoading.service({
+      text: '正在下载数据，请稍候',
+      background: 'rgba(0, 0, 0, 0.7)'
+    });
+    try {
+      const res = await axios({
+        method: 'get',
+        url: url,
+        responseType: 'blob',
+        headers: globalHeaders()
+      });
+      const isBlob = blobValidate(res.data);
+      if (isBlob) {
+        const blob = new Blob([res.data], { type: 'application/zip' });
+        saveBlob(blob, name);
+      } else {
+        this.printErrMsg(res.data);
+      }
+      downloadLoadingInstance?.close();
+    } catch (r) {
+      console.error(r);
+      const errMsg = await extractErrorMessage(r);
+      ElMessage.error(errMsg || '下载文件出现错误，请联系管理员！');
+      downloadLoadingInstance?.close();
+    }
+  },
+  async printErrMsg(data: any) {
+    const resText = await data.text();
+    const rspObj = JSON.parse(resText);
+    const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
+    ElMessage.error(errMsg);
+  }
+};
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
new file mode 100644
index 0000000..cd61fb0
--- /dev/null
+++ b/src/plugins/index.ts
@@ -0,0 +1,18 @@
+import type { App } from 'vue';
+import auth from './auth';
+import cache from './cache';
+import download from './download';
+import modal from './modal';
+import tab from './tab';
+
+/**
+ * 仅挂载无法在组合式中通过 import 替代的实例级能力（与业务模块解耦的壳层 API）。
+ * 字典、时间、树、请求下载等请在 setup 中从 @/utils、@/api 显式导入。
+ */
+export default function installPlugin(app: App) {
+  app.config.globalProperties.$tab = tab;
+  app.config.globalProperties.$modal = modal;
+  app.config.globalProperties.$cache = cache;
+  app.config.globalProperties.$download = download;
+  app.config.globalProperties.$auth = auth;
+}
diff --git a/src/plugins/modal.ts b/src/plugins/modal.ts
new file mode 100644
index 0000000..546c8d4
--- /dev/null
+++ b/src/plugins/modal.ts
@@ -0,0 +1,81 @@
+import type { LoadingInstance, MessageBoxData } from 'element-plus';
+
+let loadingInstance: LoadingInstance | undefined;
+export default {
+  // 消息提示
+  msg(content: any) {
+    ElMessage.info(content);
+  },
+  // 错误消息
+  msgError(content: any) {
+    ElMessage.error(content);
+  },
+  // 成功消息
+  msgSuccess(content: any) {
+    ElMessage.success(content);
+  },
+  // 警告消息
+  msgWarning(content: any) {
+    ElMessage.warning(content);
+  },
+  // 弹出提示
+  alert(content: any) {
+    ElMessageBox.alert(content, '系统提示');
+  },
+  // 错误提示
+  alertError(content: any) {
+    ElMessageBox.alert(content, '系统提示', { type: 'error' });
+  },
+  // 成功提示
+  alertSuccess(content: any) {
+    ElMessageBox.alert(content, '系统提示', { type: 'success' });
+  },
+  // 警告提示
+  alertWarning(content: any) {
+    ElMessageBox.alert(content, '系统提示', { type: 'warning' });
+  },
+  // 通知提示
+  notify(content: any) {
+    ElNotification.info(content);
+  },
+  // 错误通知
+  notifyError(content: any) {
+    ElNotification.error(content);
+  },
+  // 成功通知
+  notifySuccess(content: any) {
+    ElNotification.success(content);
+  },
+  // 警告通知
+  notifyWarning(content: any) {
+    ElNotification.warning(content);
+  },
+  // 确认窗体
+  confirm(content: any): Promise<MessageBoxData> {
+    return ElMessageBox.confirm(content, '系统提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+  },
+  // 提交内容
+  prompt(content: any) {
+    return ElMessageBox.prompt(content, '系统提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+  },
+  // 打开遮罩层
+  loading(content: string) {
+    loadingInstance = ElLoading.service({
+      lock: true,
+      text: content,
+      background: 'var(--app-overlay-mask)'
+    });
+  },
+  // 关闭遮罩层
+  closeLoading() {
+    loadingInstance?.close();
+  }
+};
diff --git a/src/plugins/svgicon.ts b/src/plugins/svgicon.ts
new file mode 100644
index 0000000..f2ce685
--- /dev/null
+++ b/src/plugins/svgicon.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue';
+
+export default {
+  install: (app: App) => {
+    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+      app.component(key, component);
+    }
+  }
+};
diff --git a/src/plugins/tab.ts b/src/plugins/tab.ts
new file mode 100644
index 0000000..cf97272
--- /dev/null
+++ b/src/plugins/tab.ts
@@ -0,0 +1,104 @@
+import type { RouteLocationMatched, RouteLocationNormalized, RouteLocationRaw } from 'vue-router';
+import router from '@/router';
+import { useTagsViewStore } from '@/store/modules/tagsView';
+
+export default {
+  /**
+   * 刷新当前tab页签
+   * @param obj 标签对象
+   */
+  async refreshPage(obj?: RouteLocationNormalized): Promise<void> {
+    const { path, query, matched } = router.currentRoute.value;
+    // 防止在重定向过程中重复刷新
+    if (path.startsWith('/redirect/')) {
+      return Promise.resolve();
+    }
+    if (obj === undefined) {
+      matched.forEach((m: RouteLocationMatched) => {
+        if (m.components && m.components.default && m.components.default.name) {
+          if (!['Layout', 'ParentView'].includes(m.components.default.name)) {
+            obj = {
+              name: m.components.default.name,
+              path: path,
+              query: query,
+              matched: undefined,
+              fullPath: undefined,
+              hash: undefined,
+              params: undefined,
+              redirectedFrom: undefined,
+              meta: undefined
+            };
+          }
+        }
+      });
+    }
+    let query1: undefined | {} = {};
+    let path1: undefined | string = '';
+    if (obj) {
+      query1 = obj.query;
+      path1 = obj.path;
+    }
+    await useTagsViewStore().delCachedView(obj);
+    await router.replace({
+      path: '/redirect' + path1,
+      query: query1
+    });
+  },
+  // 关闭当前tab页签，打开新页签
+  closeOpenPage(obj: RouteLocationRaw): void {
+    useTagsViewStore().delView(router.currentRoute.value);
+    if (obj !== undefined) {
+      router.push(obj);
+    }
+  },
+  // 关闭指定tab页签
+  async closePage(
+    obj?: RouteLocationNormalized
+  ): Promise<{ visitedViews: RouteLocationNormalized[]; cachedViews: string[] } | any> {
+    if (obj === undefined) {
+      // prettier-ignore
+      const { visitedViews } = await useTagsViewStore().delView(
+				router.currentRoute.value,
+			);
+      const latestView = visitedViews.slice(-1)[0];
+      if (latestView) {
+        return router.push(latestView.fullPath);
+      }
+      return router.push('/');
+    }
+    return useTagsViewStore().delView(obj);
+  },
+  // 关闭所有tab页签
+  closeAllPage() {
+    return useTagsViewStore().delAllViews();
+  },
+  // 关闭左侧tab页签
+  closeLeftPage(obj?: RouteLocationNormalized) {
+    return useTagsViewStore().delLeftTags(obj || router.currentRoute.value);
+  },
+  // 关闭右侧tab页签
+  closeRightPage(obj?: RouteLocationNormalized) {
+    return useTagsViewStore().delRightTags(obj || router.currentRoute.value);
+  },
+  // 关闭其他tab页签
+  closeOtherPage(obj?: RouteLocationNormalized) {
+    return useTagsViewStore().delOthersViews(obj || router.currentRoute.value);
+  },
+  /**
+   * 打开tab页签
+   * @param url 路由地址
+   * @param title 标题
+   * @param query 参数
+   */
+  openPage(url: string, title?: string, query?: any) {
+    const obj = { path: url, query: { ...query, title } };
+    return router.push(obj);
+  },
+  /**
+   * 修改tab页签
+   * @param obj 标签对象
+   */
+  updatePage(obj: RouteLocationNormalized) {
+    return useTagsViewStore().updateVisitedView(obj);
+  }
+};
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..6a6facb
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,112 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
+/* Layout */
+import Layout from '@/layout/index.vue';
+
+/**
+ * Note: 路由配置项
+ *
+ * hidden: true                     // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
+ * alwaysShow: true                 // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
+ *                                  // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
+ *                                  // 若你想不管路由下面的 children 声明的个数都显示你的根路由
+ *                                  // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
+ * redirect: noRedirect             // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
+ * name:'router-name'               // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
+ * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数
+ * roles: ['admin', 'common']       // 访问路由的角色权限
+ * permissions: ['a:a:a', 'b:b:b']  // 访问路由的菜单权限
+ * meta : {
+    noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+    title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
+    icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
+    breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
+    activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
+  }
+ */
+
+// 公共路由
+export const constantRoutes: RouteRecordRaw[] = [
+  {
+    path: '/redirect',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        component: () => import('@/views/redirect/index.vue')
+      }
+    ]
+  },
+  {
+    path: '/social-callback',
+    hidden: true,
+    component: () => import('@/layout/components/SocialCallback/index.vue')
+  },
+  {
+    path: '/login',
+    component: () => import('@/views/login.vue'),
+    hidden: true
+  },
+  {
+    path: '/register',
+    component: () => import('@/views/register.vue'),
+    hidden: true
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/views/error/404.vue'),
+    hidden: true
+  },
+  {
+    path: '/401',
+    component: () => import('@/views/error/401.vue'),
+    hidden: true
+  },
+  {
+    path: '',
+    component: Layout,
+    redirect: '/index',
+    children: [
+      {
+        path: '/index',
+        component: () => import('@/views/index.vue'),
+        name: 'Index',
+        meta: { title: '首页', icon: 'dashboard', affix: true }
+      }
+    ]
+  },
+  {
+    path: '/user',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'profile',
+        component: () => import('@/views/system/user/profile/index.vue'),
+        name: 'Profile',
+        meta: { title: '个人中心', icon: 'user' }
+      }
+    ]
+  }
+];
+
+// 动态路由，基于用户权限动态去加载
+export const dynamicRoutes: RouteRecordRaw[] = [];
+
+/**
+ * 创建路由
+ */
+const router = createRouter({
+  history: createWebHistory(import.meta.env.VITE_APP_CONTEXT_PATH),
+  routes: constantRoutes,
+  // 刷新时，滚动条位置还原
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return { top: 0 };
+  }
+});
+
+export default router;
diff --git a/src/settings.ts b/src/settings.ts
new file mode 100644
index 0000000..c71d428
--- /dev/null
+++ b/src/settings.ts
@@ -0,0 +1,91 @@
+import { LanguageEnum } from '@/enums/LanguageEnum';
+import { NavTypeEnum } from '@/enums/NavTypeEnum';
+
+const setting: DefaultSettings = {
+  /**
+   * 网页标题
+   */
+  title: import.meta.env.VITE_APP_TITLE,
+
+  theme: '#409EFF',
+
+  /**
+   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
+   */
+  sideTheme: 'theme-dark',
+  /**
+   * 是否系统布局配置
+   */
+  showSettings: true,
+
+  /**
+   * 默认布局
+   */
+  navType: NavTypeEnum.LEFT,
+
+  /**
+   * 是否显示 tagsView
+   */
+  tagsView: true,
+
+  /**
+   * 持久化标签页
+   */
+  tagsViewPersist: false,
+
+  /**
+   * 显示页签图标
+   */
+  tagsIcon: true,
+
+  /**
+   * 是否固定头部
+   */
+  fixedHeader: true,
+
+  /**
+   * 是否显示logo
+   */
+  sidebarLogo: true,
+
+  /**
+   * 是否显示动态标题
+   */
+  dynamicTitle: true,
+
+  /**
+   * 是否开启动画 开启随机 关闭渐进渐出
+   */
+  animationEnable: false,
+
+  /**
+   * 是否暗黑模式
+   */
+  dark: false,
+
+  /**
+   * 默认语言
+   */
+  language: LanguageEnum.zh_CN,
+
+  /**
+   * 默认大小
+   */
+  size: 'default',
+
+  /**
+   * 默认布局
+   */
+  layout: '',
+
+  /**
+   * 页面圆角大小
+   */
+  radiusBase: 14,
+
+  /**
+   * 表格全高内部滚动
+   */
+  fullHeightTable: true
+};
+export default setting;
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..02ae96a
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,5 @@
+import { createPinia } from 'pinia';
+
+const store = createPinia();
+
+export default store;
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
new file mode 100644
index 0000000..1678bd8
--- /dev/null
+++ b/src/store/modules/app.ts
@@ -0,0 +1,73 @@
+import { useStorage } from '@vueuse/core';
+import enUS from 'element-plus/es/locale/lang/en';
+import zhCN from 'element-plus/es/locale/lang/zh-cn';
+import { defineStore } from 'pinia';
+import { computed, reactive, ref } from 'vue';
+
+export const useAppStore = defineStore('app', () => {
+  const sidebarStatus = useStorage('sidebarStatus', '1');
+  const sidebar = reactive({
+    opened: sidebarStatus.value ? !!+sidebarStatus.value : true,
+    withoutAnimation: false,
+    hide: false
+  });
+  const device = ref<string>('desktop');
+  const size = useStorage<'large' | 'default' | 'small'>('size', 'default');
+
+  // 语言
+  const language = useStorage('language', 'zh_CN');
+  const languageObj: any = {
+    en_US: enUS,
+    zh_CN: zhCN
+  };
+  const locale = computed(() => {
+    return languageObj[language.value];
+  });
+
+  const toggleSideBar = (withoutAnimation: boolean) => {
+    if (sidebar.hide) {
+      return false;
+    }
+
+    sidebar.opened = !sidebar.opened;
+    sidebar.withoutAnimation = withoutAnimation;
+    if (sidebar.opened) {
+      sidebarStatus.value = '1';
+    } else {
+      sidebarStatus.value = '0';
+    }
+  };
+
+  const closeSideBar = ({ withoutAnimation }: any): void => {
+    sidebarStatus.value = '0';
+    sidebar.opened = false;
+    sidebar.withoutAnimation = withoutAnimation;
+  };
+  const toggleDevice = (d: string): void => {
+    device.value = d;
+  };
+  const setSize = (s: 'large' | 'default' | 'small'): void => {
+    size.value = s;
+  };
+  const toggleSideBarHide = (status: boolean): void => {
+    sidebar.hide = status;
+  };
+
+  const changeLanguage = (val: string): void => {
+    language.value = val;
+  };
+
+  return {
+    device,
+    sidebar,
+    language,
+    locale,
+    size,
+    changeLanguage,
+    toggleSideBar,
+    closeSideBar,
+    toggleDevice,
+    setSize,
+    toggleSideBarHide
+  };
+});
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
new file mode 100644
index 0000000..742f900
--- /dev/null
+++ b/src/store/modules/dict.ts
@@ -0,0 +1,65 @@
+import { defineStore } from 'pinia';
+
+export const useDictStore = defineStore('dict', () => {
+  const dict = ref<Map<string, DictDataOption[]>>(new Map());
+
+  /**
+   * 获取字典
+   * @param _key 字典key
+   */
+  const getDict = (_key: string): DictDataOption[] | null => {
+    if (!_key) {
+      return null;
+    }
+    return dict.value.get(_key) || null;
+  };
+
+  /**
+   * 设置字典
+   * @param _key 字典key
+   * @param _value 字典value
+   */
+  const setDict = (_key: string, _value: DictDataOption[]) => {
+    if (!_key) {
+      return false;
+    }
+    try {
+      dict.value.set(_key, _value);
+      return true;
+    } catch (e) {
+      console.error('Error in setDict:', e);
+      return false;
+    }
+  };
+
+  /**
+   * 删除字典
+   * @param _key
+   */
+  const removeDict = (_key: string): boolean => {
+    if (!_key) {
+      return false;
+    }
+    try {
+      return dict.value.delete(_key);
+    } catch (e) {
+      console.error('Error in removeDict:', e);
+      return false;
+    }
+  };
+
+  /**
+   * 清空字典
+   */
+  const cleanDict = (): void => {
+    dict.value.clear();
+  };
+
+  return {
+    dict,
+    getDict,
+    setDict,
+    removeDict,
+    cleanDict
+  };
+});
diff --git a/src/store/modules/notice.ts b/src/store/modules/notice.ts
new file mode 100644
index 0000000..44dfc5a
--- /dev/null
+++ b/src/store/modules/notice.ts
@@ -0,0 +1,96 @@
+import { defineStore } from 'pinia';
+import { computed, reactive } from 'vue';
+
+export interface NoticeItem {
+  messageId?: string | number;
+  title?: string;
+  category?: string;
+  type?: string;
+  source?: string;
+  read: boolean;
+  message: string;
+  content?: string;
+  data?: Record<string, any> | null;
+  path?: string;
+  timestamp?: number;
+  time: string;
+}
+
+export const useNoticeStore = defineStore('notice', () => {
+  const state = reactive({
+    notices: [] as NoticeItem[]
+  });
+
+  const unreadCount = computed(() => state.notices.filter(item => !item.read).length);
+
+  const buildNoticeKey = (notice: NoticeItem) => {
+    if (notice.messageId !== undefined && notice.messageId !== null) {
+      return String(notice.messageId);
+    }
+    return [notice.type, notice.source, notice.timestamp, notice.message].join(':');
+  };
+
+  const sortNotices = () => {
+    state.notices.sort((a, b) => Number(b.timestamp || 0) - Number(a.timestamp || 0));
+  };
+
+  const setNotices = (notices: NoticeItem[]) => {
+    state.notices = [...notices];
+    sortNotices();
+  };
+
+  const addNotice = (notice: NoticeItem) => {
+    const key = buildNoticeKey(notice);
+    const index = state.notices.findIndex(item => buildNoticeKey(item) === key);
+    if (index > -1) {
+      state.notices[index] = {
+        ...state.notices[index],
+        ...notice
+      };
+    } else {
+      state.notices.unshift(notice);
+    }
+    sortNotices();
+  };
+
+  const markRead = (messageId?: string | number) => {
+    if (messageId === undefined || messageId === null) {
+      return;
+    }
+    const target = state.notices.find(item => String(item.messageId) === String(messageId));
+    if (target) {
+      target.read = true;
+    }
+  };
+
+  const markReadBatch = (messageIds: Array<string | number>) => {
+    const idSet = new Set(messageIds.map(item => String(item)));
+    state.notices.forEach(item => {
+      if (item.messageId !== undefined && item.messageId !== null && idSet.has(String(item.messageId))) {
+        item.read = true;
+      }
+    });
+  };
+
+  const readAll = () => {
+    markReadBatch(
+      state.notices
+        .map(item => item.messageId)
+        .filter((item): item is string | number => item !== undefined && item !== null)
+    );
+  };
+
+  const clearNotice = () => {
+    state.notices = [];
+  };
+  return {
+    state,
+    unreadCount,
+    setNotices,
+    addNotice,
+    markRead,
+    markReadBatch,
+    readAll,
+    clearNotice
+  };
+});
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
new file mode 100644
index 0000000..11016f0
--- /dev/null
+++ b/src/store/modules/permission.ts
@@ -0,0 +1,213 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { getRouters } from '@/api/menu';
+import ParentView from '@/components/ParentView/index.vue';
+import InnerLink from '@/layout/components/InnerLink/index.vue';
+import Layout from '@/layout/index.vue';
+import auth from '@/plugins/auth';
+import router, { constantRoutes, dynamicRoutes } from '@/router';
+import store from '@/store';
+import { createCustomNameComponent } from '@/utils/createCustomNameComponent';
+
+// 匹配views里面所有的.vue文件，预建查找表避免每次 O(n) 扫描
+const modules = import.meta.glob('./../../views/**/*.vue');
+const viewModuleMap = new Map<string, () => Promise<any>>();
+for (const path in modules) {
+  const viewsIndex = path.indexOf('/views/');
+  if (viewsIndex === -1) continue;
+  const dir = path.substring(viewsIndex + 7, path.lastIndexOf('.vue'));
+  viewModuleMap.set(dir, modules[path] as () => Promise<any>);
+}
+export const usePermissionStore = defineStore('permission', () => {
+  const routes = ref<RouteRecordRaw[]>([]);
+  const addRoutes = ref<RouteRecordRaw[]>([]);
+  const defaultRoutes = ref<RouteRecordRaw[]>([]);
+  const topbarRouters = ref<RouteRecordRaw[]>([]);
+  const sidebarRouters = ref<RouteRecordRaw[]>([]);
+
+  const getRoutes = (): RouteRecordRaw[] => {
+    return routes.value as RouteRecordRaw[];
+  };
+  const getDefaultRoutes = (): RouteRecordRaw[] => {
+    return defaultRoutes.value as RouteRecordRaw[];
+  };
+  const getSidebarRoutes = (): RouteRecordRaw[] => {
+    return sidebarRouters.value as RouteRecordRaw[];
+  };
+  const getTopbarRoutes = (): RouteRecordRaw[] => {
+    return topbarRouters.value as RouteRecordRaw[];
+  };
+
+  const setRoutes = (newRoutes: RouteRecordRaw[]): void => {
+    addRoutes.value = newRoutes;
+    routes.value = constantRoutes.concat(newRoutes);
+  };
+  const setDefaultRoutes = (routes: RouteRecordRaw[]): void => {
+    defaultRoutes.value = constantRoutes.concat(routes);
+  };
+  const setTopbarRoutes = (routes: RouteRecordRaw[]): void => {
+    topbarRouters.value = routes;
+  };
+  const setSidebarRouters = (routes: RouteRecordRaw[]): void => {
+    sidebarRouters.value = routes;
+  };
+  const generateRoutes = async (): Promise<RouteRecordRaw[]> => {
+    const res = await getRouters();
+    const data = Array.isArray(res.data) ? res.data : [];
+    const sdata = structuredClone(data);
+    const rdata = structuredClone(data);
+    const defaultData = structuredClone(data);
+    const sidebarRoutes = filterAsyncRouter(sdata);
+    const rewriteRoutes = filterAsyncRouter(rdata, undefined, true);
+    const defaultRoutes = filterAsyncRouter(defaultData);
+    const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
+    asyncRoutes.forEach(route => {
+      router.addRoute(route);
+    });
+    setRoutes(rewriteRoutes);
+    setSidebarRouters(constantRoutes.concat(sidebarRoutes));
+    setDefaultRoutes(sidebarRoutes);
+    setTopbarRoutes(defaultRoutes);
+    // 路由name重复检查
+    duplicateRouteChecker(asyncRoutes, sidebarRoutes);
+    return rewriteRoutes;
+  };
+
+  /**
+   * 遍历后台传来的路由字符串，转换为组件对象
+   * @param asyncRouterMap 后台传来的路由字符串
+   * @param lastRouter 上一级路由
+   * @param type 是否是重写路由
+   */
+  const filterAsyncRouter = (
+    asyncRouterMap: RouteRecordRaw[],
+    lastRouter?: RouteRecordRaw,
+    type = false
+  ): RouteRecordRaw[] => {
+    return asyncRouterMap.filter(route => {
+      if (type && route.children) {
+        route.children = filterChildren(route.children, undefined);
+      }
+      // Layout ParentView 组件特殊处理
+      if (route.component?.toString() === 'Layout') {
+        route.component = Layout;
+      } else if (route.component?.toString() === 'ParentView') {
+        route.component = ParentView;
+      } else if (route.component?.toString() === 'InnerLink') {
+        route.component = InnerLink;
+      } else {
+        route.component = loadView(route.component, route.name as string);
+      }
+      if (route.children != null && route.children && route.children.length) {
+        route.children = filterAsyncRouter(route.children, route, type);
+      } else {
+        delete route.children;
+        delete route.redirect;
+      }
+      return true;
+    });
+  };
+  const filterChildren = (childrenMap: RouteRecordRaw[], lastRouter?: RouteRecordRaw): RouteRecordRaw[] => {
+    let children: RouteRecordRaw[] = [];
+    childrenMap.forEach(el => {
+      el.path = lastRouter ? lastRouter.path + '/' + el.path : el.path;
+      if (el.children && el.children.length && el.component?.toString() === 'ParentView') {
+        children = children.concat(filterChildren(el.children, el));
+      } else {
+        children.push(el);
+      }
+    });
+    return children;
+  };
+  return {
+    routes,
+    topbarRouters,
+    sidebarRouters,
+    defaultRoutes,
+
+    getRoutes,
+    getDefaultRoutes,
+    getSidebarRoutes,
+    getTopbarRoutes,
+
+    setRoutes,
+    generateRoutes,
+    setSidebarRouters
+  };
+});
+
+// 动态路由遍历，验证是否具备权限
+export const filterDynamicRoutes = (routes: RouteRecordRaw[]) => {
+  const res: RouteRecordRaw[] = [];
+  routes.forEach(route => {
+    if (route.permissions) {
+      if (auth.hasPermiOr(route.permissions)) {
+        res.push(route);
+      }
+    } else if (route.roles) {
+      if (auth.hasRoleOr(route.roles)) {
+        res.push(route);
+      }
+    }
+  });
+  return res;
+};
+
+export const loadView = (view: any, name: string) => {
+  const loader = viewModuleMap.get(view);
+  if (loader) {
+    return createCustomNameComponent(loader, { name });
+  }
+  return undefined;
+};
+
+// 非setup
+export const usePermissionStoreHook = () => {
+  return usePermissionStore(store);
+};
+
+interface Route {
+  name?: string | symbol;
+  path: string;
+  children?: Route[];
+}
+
+/**
+ * 检查路由name是否重复
+ * @param localRoutes 本地路由
+ * @param routes 动态路由
+ */
+function duplicateRouteChecker(localRoutes: Route[], routes: Route[]) {
+  // 展平
+  function flatRoutes(routes: Route[]) {
+    const res: Route[] = [];
+    routes.forEach(route => {
+      if (route.children) {
+        res.push(...flatRoutes(route.children));
+      } else {
+        res.push(route);
+      }
+    });
+    return res;
+  }
+
+  const allRoutes = flatRoutes([...localRoutes, ...routes]);
+
+  const nameList: string[] = [];
+  allRoutes.forEach(route => {
+    const name = route.name?.toString() ?? '';
+    if (!name) return;
+    if (nameList.includes(name)) {
+      const message = `路由名称: [${name}] 重复, 会造成 404`;
+      console.error(message);
+      ElNotification({
+        title: '路由名称重复',
+        message,
+        type: 'error'
+      });
+      return;
+    }
+    nameList.push(name);
+  });
+}
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
new file mode 100644
index 0000000..f4a0389
--- /dev/null
+++ b/src/store/modules/settings.ts
@@ -0,0 +1,60 @@
+import { useStorage } from '@vueuse/core';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { NavTypeEnum } from '@/enums/NavTypeEnum';
+import defaultSettings from '@/settings';
+import { useDynamicTitle } from '@/utils/dynamicTitle';
+
+export const useSettingsStore = defineStore('setting', () => {
+  const storageSetting = useStorage<LayoutSetting>('layout-setting', {
+    tagsView: defaultSettings.tagsView,
+    tagsViewPersist: defaultSettings.tagsViewPersist,
+    tagsIcon: defaultSettings.tagsIcon,
+    fixedHeader: defaultSettings.fixedHeader,
+    sidebarLogo: defaultSettings.sidebarLogo,
+    dynamicTitle: defaultSettings.dynamicTitle,
+    sideTheme: defaultSettings.sideTheme,
+    theme: defaultSettings.theme,
+    navType: defaultSettings.navType,
+    radiusBase: defaultSettings.radiusBase,
+    fullHeightTable: defaultSettings.fullHeightTable
+  });
+  const title = ref<string>(defaultSettings.title);
+  const theme = ref<string>(storageSetting.value.theme);
+  const sideTheme = ref<string>(storageSetting.value.sideTheme);
+  const showSettings = ref<boolean>(defaultSettings.showSettings);
+  const tagsView = ref<boolean>(storageSetting.value.tagsView);
+  const tagsViewPersist = ref<boolean>(storageSetting.value.tagsViewPersist);
+  const tagsIcon = ref<boolean>(storageSetting.value.tagsIcon);
+  const fixedHeader = ref<boolean>(storageSetting.value.fixedHeader);
+  const sidebarLogo = ref<boolean>(storageSetting.value.sidebarLogo);
+  const dynamicTitle = ref<boolean>(storageSetting.value.dynamicTitle);
+  const animationEnable = ref<boolean>(defaultSettings.animationEnable);
+  const dark = ref<boolean>(defaultSettings.dark);
+  const navType = ref<NavTypeEnum>(storageSetting.value.navType || NavTypeEnum.LEFT);
+  const radiusBase = ref<number>(storageSetting.value.radiusBase ?? defaultSettings.radiusBase);
+  const fullHeightTable = ref<boolean>(storageSetting.value.fullHeightTable ?? defaultSettings.fullHeightTable);
+
+  const setTitle = (value: string) => {
+    title.value = value;
+    useDynamicTitle();
+  };
+  return {
+    title,
+    theme,
+    sideTheme,
+    showSettings,
+    tagsView,
+    tagsViewPersist,
+    tagsIcon,
+    fixedHeader,
+    sidebarLogo,
+    dynamicTitle,
+    animationEnable,
+    dark,
+    navType,
+    radiusBase,
+    fullHeightTable,
+    setTitle
+  };
+});
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
new file mode 100644
index 0000000..7ed523e
--- /dev/null
+++ b/src/store/modules/tagsView.ts
@@ -0,0 +1,337 @@
+import type { LocationQuery, RouteLocationNormalized, RouteMeta } from 'vue-router';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useSettingsStore } from './settings';
+
+const PERSIST_KEY = 'tags-view-visited';
+
+type PersistedTagView = {
+  path: string;
+  fullPath?: string;
+  name?: string | symbol | null;
+  title?: string;
+  query?: LocationQuery;
+  meta?: RouteMeta;
+};
+
+type TagView = RouteLocationNormalized & {
+  title?: string;
+};
+
+const isPersistEnabled = () => {
+  return useSettingsStore().tagsViewPersist;
+};
+
+const normalizeVisitedView = (view: RouteLocationNormalized): TagView => {
+  return Object.assign({}, view, {
+    title: view.meta?.title || 'no-name'
+  });
+};
+
+const saveVisitedViews = (views: any[]) => {
+  if (!isPersistEnabled()) {
+    return;
+  }
+
+  const payload: PersistedTagView[] = (views as TagView[])
+    .filter(view => !view.meta?.affix)
+    .map(view => ({
+      path: view.path,
+      fullPath: view.fullPath,
+      name: view.name,
+      title: (view as any).title || view.meta?.title || 'no-name',
+      query: view.query,
+      meta: view.meta
+    }));
+
+  localStorage.setItem(PERSIST_KEY, JSON.stringify(payload));
+};
+
+const loadVisitedViews = (): PersistedTagView[] => {
+  const cache = localStorage.getItem(PERSIST_KEY);
+  if (!cache) {
+    return [];
+  }
+
+  try {
+    return JSON.parse(cache) as PersistedTagView[];
+  } catch {
+    localStorage.removeItem(PERSIST_KEY);
+    return [];
+  }
+};
+
+const clearVisitedViews = () => {
+  localStorage.removeItem(PERSIST_KEY);
+};
+
+export const useTagsViewStore = defineStore('tagsView', () => {
+  const visitedViews = ref<TagView[]>([]);
+  const cachedViews = ref<string[]>([]);
+  const iframeViews = ref<TagView[]>([]);
+
+  const getVisitedViews = (): TagView[] => {
+    return visitedViews.value as TagView[];
+  };
+  const getIframeViews = (): TagView[] => {
+    return iframeViews.value as TagView[];
+  };
+  const getCachedViews = (): string[] => {
+    return cachedViews.value;
+  };
+
+  const addView = (view: RouteLocationNormalized) => {
+    addVisitedView(view);
+    addCachedView(view);
+  };
+
+  const addIframeView = (view: RouteLocationNormalized): void => {
+    if (iframeViews.value.some((v: RouteLocationNormalized) => v.path === view.path)) return;
+    iframeViews.value.push(normalizeVisitedView(view) as RouteLocationNormalized);
+  };
+
+  const delIframeView = (view: RouteLocationNormalized): Promise<RouteLocationNormalized[]> => {
+    return new Promise(resolve => {
+      iframeViews.value = iframeViews.value.filter((item: RouteLocationNormalized) => item.path !== view.path);
+      resolve(iframeViews.value.slice() as RouteLocationNormalized[]);
+    });
+  };
+
+  const addVisitedView = (view: RouteLocationNormalized): void => {
+    if (visitedViews.value.some((v: RouteLocationNormalized) => v.path === view.path)) return;
+    visitedViews.value.push(normalizeVisitedView(view));
+    saveVisitedViews(visitedViews.value);
+  };
+
+  const addAffixView = (view: RouteLocationNormalized): void => {
+    if (visitedViews.value.some((v: RouteLocationNormalized) => v.path === view.path)) return;
+    const insertIndex = visitedViews.value.findIndex(item => !item.meta?.affix);
+    const normalizedView = normalizeVisitedView(view);
+    if (insertIndex === -1) {
+      visitedViews.value.push(normalizedView);
+    } else {
+      visitedViews.value.splice(insertIndex, 0, normalizedView);
+    }
+  };
+
+  const loadPersistedViews = (): void => {
+    loadVisitedViews().forEach(view => {
+      if (visitedViews.value.some(item => item.path === view.path)) {
+        return;
+      }
+
+      visitedViews.value.push({
+        hash: '',
+        matched: [],
+        params: {},
+        redirectedFrom: undefined,
+        path: view.path,
+        fullPath: view.fullPath || view.path,
+        query: view.query || {},
+        name: view.name || undefined,
+        meta: view.meta || {},
+        title: view.title || view.meta?.title || 'no-name'
+      } as TagView);
+    });
+  };
+
+  const delView = (
+    view: RouteLocationNormalized
+  ): Promise<{
+    visitedViews: RouteLocationNormalized[];
+    cachedViews: string[];
+  }> => {
+    return new Promise(resolve => {
+      delVisitedView(view);
+      delCachedView(view);
+      resolve({
+        visitedViews: visitedViews.value.slice() as RouteLocationNormalized[],
+        cachedViews: [...cachedViews.value]
+      });
+    });
+  };
+
+  const delVisitedView = (view: RouteLocationNormalized): Promise<RouteLocationNormalized[]> => {
+    return new Promise(resolve => {
+      for (const [i, v] of visitedViews.value.entries()) {
+        if (v.path === view.path) {
+          visitedViews.value.splice(i, 1);
+          break;
+        }
+      }
+      saveVisitedViews(visitedViews.value);
+      resolve(visitedViews.value.slice() as RouteLocationNormalized[]);
+    });
+  };
+
+  const delCachedView = (view?: RouteLocationNormalized): Promise<string[]> => {
+    let viewName = '';
+    if (view) {
+      viewName = view.name as string;
+    }
+    return new Promise(resolve => {
+      const index = cachedViews.value.indexOf(viewName);
+      index > -1 && cachedViews.value.splice(index, 1);
+      resolve([...cachedViews.value]);
+    });
+  };
+
+  const delOthersViews = (
+    view: RouteLocationNormalized
+  ): Promise<{
+    visitedViews: RouteLocationNormalized[];
+    cachedViews: string[];
+  }> => {
+    return new Promise(resolve => {
+      delOthersVisitedViews(view);
+      delOthersCachedViews(view);
+      resolve({
+        visitedViews: visitedViews.value.slice() as RouteLocationNormalized[],
+        cachedViews: [...cachedViews.value]
+      });
+    });
+  };
+
+  const delOthersVisitedViews = (view: RouteLocationNormalized): Promise<RouteLocationNormalized[]> => {
+    return new Promise(resolve => {
+      visitedViews.value = visitedViews.value.filter((v: RouteLocationNormalized) => {
+        return v.meta?.affix || v.path === view.path;
+      });
+      saveVisitedViews(visitedViews.value);
+      resolve(visitedViews.value.slice() as RouteLocationNormalized[]);
+    });
+  };
+
+  const delOthersCachedViews = (view: RouteLocationNormalized): Promise<string[]> => {
+    const viewName = view.name as string;
+    return new Promise(resolve => {
+      const index = cachedViews.value.indexOf(viewName);
+      if (index > -1) {
+        cachedViews.value = cachedViews.value.slice(index, index + 1);
+      } else {
+        cachedViews.value = [];
+      }
+      resolve([...cachedViews.value]);
+    });
+  };
+
+  const delAllViews = (): Promise<{
+    visitedViews: RouteLocationNormalized[];
+    cachedViews: string[];
+  }> => {
+    return new Promise(resolve => {
+      delAllVisitedViews();
+      delAllCachedViews();
+      resolve({
+        visitedViews: visitedViews.value.slice() as RouteLocationNormalized[],
+        cachedViews: [...cachedViews.value]
+      });
+    });
+  };
+
+  const delAllVisitedViews = (): Promise<RouteLocationNormalized[]> => {
+    return new Promise(resolve => {
+      visitedViews.value = visitedViews.value.filter((tag: RouteLocationNormalized) => tag.meta?.affix);
+      clearVisitedViews();
+      resolve(visitedViews.value.slice() as RouteLocationNormalized[]);
+    });
+  };
+
+  const delAllCachedViews = (): Promise<string[]> => {
+    return new Promise(resolve => {
+      cachedViews.value = [];
+      resolve([...cachedViews.value]);
+    });
+  };
+
+  const updateVisitedView = (view: RouteLocationNormalized): void => {
+    for (let v of visitedViews.value) {
+      if (v.path === view.path) {
+        v = Object.assign(v, view);
+        break;
+      }
+    }
+    saveVisitedViews(visitedViews.value);
+  };
+
+  const delRightTags = (view: RouteLocationNormalized): Promise<RouteLocationNormalized[]> => {
+    return new Promise(resolve => {
+      const index = visitedViews.value.findIndex((v: RouteLocationNormalized) => v.path === view.path);
+      if (index === -1) {
+        resolve(visitedViews.value.slice() as RouteLocationNormalized[]);
+        return;
+      }
+      visitedViews.value = visitedViews.value.filter((item: RouteLocationNormalized, idx: number) => {
+        if (idx <= index || (item.meta && item.meta.affix)) {
+          return true;
+        }
+        const i = cachedViews.value.indexOf(item.name as string);
+        if (i > -1) {
+          cachedViews.value.splice(i, 1);
+        }
+        return false;
+      });
+      saveVisitedViews(visitedViews.value);
+      resolve(visitedViews.value.slice() as RouteLocationNormalized[]);
+    });
+  };
+
+  const delLeftTags = (view: RouteLocationNormalized): Promise<RouteLocationNormalized[]> => {
+    return new Promise(resolve => {
+      const index = visitedViews.value.findIndex((v: RouteLocationNormalized) => v.path === view.path);
+      if (index === -1) {
+        resolve(visitedViews.value.slice() as RouteLocationNormalized[]);
+        return;
+      }
+      visitedViews.value = visitedViews.value.filter((item: RouteLocationNormalized, idx: number) => {
+        if (idx >= index || (item.meta && item.meta.affix)) {
+          return true;
+        }
+        const i = cachedViews.value.indexOf(item.name as string);
+        if (i > -1) {
+          cachedViews.value.splice(i, 1);
+        }
+        return false;
+      });
+      saveVisitedViews(visitedViews.value);
+      resolve(visitedViews.value.slice() as RouteLocationNormalized[]);
+    });
+  };
+
+  const addCachedView = (view: RouteLocationNormalized): void => {
+    const viewName = view.name as string;
+    if (!viewName) return;
+    if (cachedViews.value.includes(viewName)) return;
+    if (!view.meta?.noCache) {
+      cachedViews.value.push(viewName);
+    }
+  };
+
+  return {
+    visitedViews,
+    cachedViews,
+    iframeViews,
+
+    getVisitedViews,
+    getIframeViews,
+    getCachedViews,
+
+    addVisitedView,
+    addAffixView,
+    addCachedView,
+    delVisitedView,
+    delCachedView,
+    updateVisitedView,
+    addView,
+    delView,
+    delAllViews,
+    delAllVisitedViews,
+    delAllCachedViews,
+    delOthersViews,
+    delRightTags,
+    delLeftTags,
+    addIframeView,
+    delIframeView,
+    loadPersistedViews
+  };
+});
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
new file mode 100644
index 0000000..060a14b
--- /dev/null
+++ b/src/store/modules/user.ts
@@ -0,0 +1,91 @@
+import { to } from 'await-to-js';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import type { UserInfo } from '@/api/system/user/types';
+import type { LoginData, LoginResult } from '@/api/types';
+import type { RuoYiAjaxResult } from '@/utils/api-types';
+import { getInfo as getUserInfo, login as loginApi, logout as logoutApi } from '@/api/login';
+import defAva from '@/assets/images/profile.jpg';
+import { getToken, removeToken, setToken } from '@/utils/auth';
+
+export const useUserStore = defineStore('user', () => {
+  const token = ref(getToken());
+  const name = ref('');
+  const nickname = ref('');
+  const userId = ref<string | number>('');
+  const avatar = ref('');
+  const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
+  const permissions = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
+
+  /**
+   * 登录
+   * @param userInfo
+   * @returns
+   */
+  const login = async (userInfo: LoginData): Promise<void> => {
+    const [err, res] = await to(loginApi(userInfo));
+    if (res) {
+      const data = (res as RuoYiAjaxResult<LoginResult>).data;
+      if (!data?.access_token) {
+        return Promise.reject(err);
+      }
+      setToken(data.access_token);
+      token.value = data.access_token;
+      return Promise.resolve();
+    }
+    return Promise.reject(err);
+  };
+
+  // 获取用户信息
+  const getInfo = async (): Promise<void> => {
+    const [err, res] = await to(getUserInfo());
+    if (res) {
+      const data = (res as RuoYiAjaxResult<UserInfo>).data;
+      if (!data?.user) {
+        return Promise.reject(err);
+      }
+      const user = data.user;
+      const profile = user.avatarUrl == '' || user.avatarUrl == null ? defAva : user.avatarUrl;
+
+      if (data.roles && data.roles.length > 0) {
+        // 验证返回的roles是否是一个非空数组
+        roles.value = data.roles;
+        permissions.value = data.permissions;
+      } else {
+        roles.value = ['ROLE_DEFAULT'];
+      }
+      name.value = user.userName;
+      nickname.value = user.nickName;
+      avatar.value = profile;
+      userId.value = user.userId;
+      return Promise.resolve();
+    }
+    return Promise.reject(err);
+  };
+
+  // 注销
+  const logout = async (): Promise<void> => {
+    await logoutApi();
+    token.value = '';
+    roles.value = [];
+    permissions.value = [];
+    removeToken();
+  };
+
+  const setAvatar = (value: string) => {
+    avatar.value = value;
+  };
+
+  return {
+    userId,
+    token,
+    nickname,
+    avatar,
+    roles,
+    permissions,
+    login,
+    getInfo,
+    logout,
+    setAvatar
+  };
+});
diff --git a/src/types/axios.d.ts b/src/types/axios.d.ts
new file mode 100644
index 0000000..ab7f6f4
--- /dev/null
+++ b/src/types/axios.d.ts
@@ -0,0 +1,8 @@
+declare module 'axios' {
+  interface AxiosResponse<T = any> {
+    code: number;
+    msg: string;
+    rows: T;
+    total: number;
+  }
+}
diff --git a/src/types/element.d.ts b/src/types/element.d.ts
new file mode 100644
index 0000000..479b9c1
--- /dev/null
+++ b/src/types/element.d.ts
@@ -0,0 +1,35 @@
+import type * as ep from 'element-plus';
+declare global {
+  type ElTagType = 'primary' | 'success' | 'info' | 'warning' | 'danger';
+  type ElFormInstance = ep.FormInstance;
+  type ElTableInstance = ep.TableInstance;
+  type ElUploadInstance = ep.UploadInstance;
+  type ElScrollbarInstance = ep.ScrollbarInstance;
+  type ElInputInstance = ep.InputInstance;
+  type ElInputNumberInstance = ep.InputNumberInstance;
+  type ElRadioInstance = ep.RadioInstance;
+  type ElRadioGroupInstance = ep.RadioGroupInstance;
+  type ElRadioButtonInstance = ep.RadioButtonInstance;
+  type ElCheckboxInstance = ep.CheckboxInstance;
+  type ElSwitchInstance = ep.SwitchInstance;
+  type ElCascaderInstance = ep.CascaderInstance;
+  type ElColorPickerInstance = ep.ColorPickerInstance;
+  type ElRateInstance = ep.RateInstance;
+  type ElSliderInstance = ep.SliderInstance;
+
+  type ElTreeInstance = InstanceType<typeof ep.ElTree>;
+  type ElTreeSelectInstance = InstanceType<typeof ep.ElTreeSelect>;
+  type ElSelectInstance = InstanceType<typeof ep.ElSelect>;
+  type ElCardInstance = InstanceType<typeof ep.ElCard>;
+  type ElDialogInstance = InstanceType<typeof ep.ElDialog>;
+  type ElCheckboxGroupInstance = InstanceType<typeof ep.ElCheckboxGroup>;
+  type ElDatePickerInstance = InstanceType<typeof ep.ElDatePicker>;
+  type ElTimePickerInstance = InstanceType<typeof ep.ElTimePicker>;
+  type ElTimeSelectInstance = InstanceType<typeof ep.ElTimeSelect>;
+
+  type TransferKey = ep.TransferKey;
+  type CheckboxValueType = ep.CheckboxValueType;
+  type ElFormRules = ep.FormRules;
+  type DateModelType = ep.DateModelType;
+  type UploadFile = ep.UploadFile;
+}
diff --git a/src/types/env.d.ts b/src/types/env.d.ts
new file mode 100644
index 0000000..e0f60fe
--- /dev/null
+++ b/src/types/env.d.ts
@@ -0,0 +1,32 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const Component: DefineComponent<{}, {}, any>;
+  export default Component;
+}
+
+declare module 'virtual:svg-icons-register' {}
+declare module 'virtual:*' {}
+
+// 环境变量
+interface ImportMetaEnv {
+  VITE_APP_TITLE: string;
+  VITE_APP_PORT: number;
+  VITE_APP_BASE_API: string;
+  VITE_APP_BASE_URL: string;
+  VITE_APP_CONTEXT_PATH: string;
+  VITE_APP_MONITOR_ADMIN: string;
+  VITE_APP_SNAILJOB_ADMIN: string;
+  VITE_APP_SNAILAI_ADMIN: string;
+  VITE_APP_ENV: string;
+  VITE_APP_ENCRYPT: string;
+  VITE_APP_RSA_PUBLIC_KEY: string;
+  VITE_APP_RSA_PRIVATE_KEY: string;
+  VITE_APP_CLIENT_ID: string;
+  VITE_APP_MESSAGE_ENABLED: string;
+  VITE_APP_MESSAGE_TRANSPORT: string;
+  VITE_APP_MESSAGE_PATH: string;
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+  // readonly glob: any;
+}
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
new file mode 100644
index 0000000..5cc45d1
--- /dev/null
+++ b/src/types/global.d.ts
@@ -0,0 +1,179 @@
+import type { ComponentInternalInstance as ComponentInstance } from 'vue';
+import { LanguageEnum } from '@/enums/LanguageEnum';
+import { NavTypeEnum } from '@/enums/NavTypeEnum';
+
+declare global {
+  /** vue Instance */
+  type ComponentInternalInstance = ComponentInstance;
+
+  /**
+   * 界面字段隐藏属性
+   */
+  interface FieldOption {
+    key: number;
+    label: string;
+    visible: boolean;
+    children?: Array<FieldOption>;
+  }
+
+  /**
+   * 弹窗属性
+   */
+  interface DialogOption {
+    /**
+     * 弹窗标题
+     */
+    title?: string;
+    /**
+     * 是否显示
+     */
+    visible: boolean;
+  }
+
+  interface UploadOption {
+    /** 设置上传的请求头部 */
+    headers: { [key: string]: any };
+
+    /** 上传的地址 */
+    url: string;
+  }
+
+  /**
+   * 导入属性
+   */
+  interface ImportOption extends UploadOption {
+    /** 是否显示弹出层 */
+    open: boolean;
+    /** 弹出层标题 */
+    title: string;
+    /** 是否禁用上传 */
+    isUploading: boolean;
+
+    updateSupport: number;
+
+    /** 其他参数 */
+    [key: string]: any;
+  }
+  /**
+   * 字典数据  数据配置
+   */
+  interface DictDataOption {
+    label: string;
+    value: string;
+    elTagType?: ElTagType;
+    elTagClass?: string;
+  }
+
+  interface BaseEntity {
+    createBy?: any;
+    createDept?: any;
+    createTime?: string;
+    updateBy?: any;
+    updateTime?: any;
+  }
+
+  /**
+   * 分页数据
+   * T : 表单数据
+   * D : 查询参数
+   */
+  interface PageData<T, D> {
+    form: T;
+    queryParams: D;
+    rules: ElFormRules;
+  }
+  /**
+   * 分页查询参数
+   */
+  interface PageQuery {
+    pageNum: number;
+    pageSize: number;
+  }
+  interface LayoutSetting {
+    /**
+     * 默认布局
+     */
+    navType: NavTypeEnum;
+
+    /**
+     * 是否显示多标签导航
+     */
+    tagsView: boolean;
+    /**
+     * 是否持久化标签页
+     */
+    tagsViewPersist: boolean;
+    /**
+     * 显示页签图标
+     */
+    tagsIcon: boolean;
+    /**
+     * 是否固定头部
+     */
+    fixedHeader: boolean;
+    /**
+     * 是否显示侧边栏Logo
+     */
+    sidebarLogo: boolean;
+    /**
+     * 是否显示动态标题
+     */
+    dynamicTitle: boolean;
+    /**
+     * 侧边栏主题 theme-dark | theme-light
+     */
+    sideTheme: string;
+    /**
+     * 主题模式
+     */
+    theme: string;
+    /**
+     * 页面圆角大小
+     */
+    radiusBase: number;
+
+    /**
+     * 表格全高内部滚动
+     */
+    fullHeightTable: boolean;
+  }
+
+  interface DefaultSettings extends LayoutSetting {
+    /**
+     * 网页标题
+     */
+    title: string;
+
+    /**
+     * 是否显示系统布局设置
+     */
+    showSettings: boolean;
+
+    /**
+     * 导航栏布局
+     */
+    layout: string;
+
+    /**
+     * 布局大小
+     */
+    size: 'large' | 'default' | 'small';
+
+    /**
+     * 语言
+     */
+    language: LanguageEnum;
+
+    /**
+     * 是否启用动画效果
+     */
+    animationEnable: boolean;
+    /**
+     *  是否启用暗黑模式
+     *
+     * true:暗黑模式
+     * false: 明亮模式
+     */
+    dark: boolean;
+  }
+}
diff --git a/src/types/module.d.ts b/src/types/module.d.ts
new file mode 100644
index 0000000..7c88d72
--- /dev/null
+++ b/src/types/module.d.ts
@@ -0,0 +1,31 @@
+import type { LanguageType } from '@/lang';
+import auth from '@/plugins/auth';
+import cache from '@/plugins/cache';
+import download from '@/plugins/download';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $modal: typeof modal;
+    $tab: typeof tab;
+    $download: typeof download;
+    $auth: typeof auth;
+    $cache: typeof cache;
+    /**
+     * i18n $t方法支持ts类型提示
+     * @param key i18n key
+     */
+    $t(key: ObjKeysToUnion<LanguageType>): string;
+  }
+}
+
+/**
+ * { a: 1, b: { ba: { baa: 1, bab: 2 }, bb: 2} } ---> a | b.ba.baa | b.ba.bab | b.bb
+ * https://juejin.cn/post/7280062870670606397
+ */
+export type ObjKeysToUnion<T, P extends string = ''> = T extends object
+  ? {
+      [K in keyof T]: ObjKeysToUnion<T[K], P extends '' ? `${K & string}` : `${P}.${K & string}`>;
+    }[keyof T]
+  : P;
diff --git a/src/types/router.d.ts b/src/types/router.d.ts
new file mode 100644
index 0000000..9f30636
--- /dev/null
+++ b/src/types/router.d.ts
@@ -0,0 +1,37 @@
+import { LocationQuery, type RouteMeta as VRouteMeta } from 'vue-router';
+declare module 'vue-router' {
+  interface RouteMeta extends VRouteMeta {
+    link?: string;
+    title?: string;
+    affix?: boolean;
+    noCache?: boolean;
+    activeMenu?: string;
+    icon?: string;
+    breadcrumb?: boolean;
+  }
+
+  interface _RouteRecordBase {
+    hidden?: boolean | string | number;
+    permissions?: string[];
+    roles?: string[];
+    alwaysShow?: boolean;
+    query?: string;
+    ext?: string;
+    parentPath?: string;
+  }
+
+  interface _RouteLocationBase {
+    children?: _RouteRecordBase[];
+    path?: string;
+    title?: string;
+  }
+
+  interface TagView {
+    fullPath?: string;
+    name?: string;
+    path?: string;
+    title?: string;
+    meta?: RouteMeta;
+    query?: LocationQuery;
+  }
+}
diff --git a/src/utils/api-types.ts b/src/utils/api-types.ts
new file mode 100644
index 0000000..c866339
--- /dev/null
+++ b/src/utils/api-types.ts
@@ -0,0 +1,11 @@
+/**
+ * 与 `src/utils/request` 拦截器一致：resolve 的是若依风格 JSON `{ code, msg, data }`。
+ * axios 1.13 + TS6 下避免从 `axios` 拉已移除的 AxiosPromise。
+ */
+export interface RuoYiAjaxResult<T = unknown> {
+  code?: number;
+  msg?: string;
+  data?: T;
+}
+
+export type AxiosPromise<T = unknown> = Promise<RuoYiAjaxResult<T>>;
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
new file mode 100644
index 0000000..db50ac9
--- /dev/null
+++ b/src/utils/auth.ts
@@ -0,0 +1,9 @@
+const TokenKey = 'Admin-Token';
+
+const tokenStorage = useStorage<null | string>(TokenKey, null);
+
+export const getToken = () => tokenStorage.value;
+
+export const setToken = (access_token: string) => (tokenStorage.value = access_token);
+
+export const removeToken = () => (tokenStorage.value = null);
diff --git a/src/utils/createCustomNameComponent.tsx b/src/utils/createCustomNameComponent.tsx
new file mode 100644
index 0000000..802ea13
--- /dev/null
+++ b/src/utils/createCustomNameComponent.tsx
@@ -0,0 +1,42 @@
+/**
+ * 后台返回的路由动态生成name 解决缓存问题
+ * 感谢 @fourteendp
+ * 详见 https://github.com/vbenjs/vue-vben-admin/issues/3927
+ */
+import { Component, defineComponent, h } from 'vue';
+
+interface Options {
+  name?: string;
+}
+
+export function createCustomNameComponent(loader: () => Promise<any>, options: Options = {}): () => Promise<Component> {
+  const { name } = options;
+  let component: Component | null = null;
+  let wrappedComponent: Component | null = null;
+
+  const load = async () => {
+    try {
+      const { default: loadedComponent } = await loader();
+      component = loadedComponent;
+    } catch (error) {
+      console.error(`Cannot resolve component ${name}, error:`, error);
+    }
+  };
+
+  return async () => {
+    if (!component) {
+      await load();
+    }
+
+    if (!wrappedComponent) {
+      wrappedComponent = defineComponent({
+        name,
+        render() {
+          return h(component as Component);
+        }
+      });
+    }
+
+    return Promise.resolve(wrappedComponent);
+  };
+}
diff --git a/src/utils/crypto.ts b/src/utils/crypto.ts
new file mode 100644
index 0000000..bd81531
--- /dev/null
+++ b/src/utils/crypto.ts
@@ -0,0 +1,78 @@
+import { ecb } from '@noble/ciphers/aes.js';
+
+/**
+ * 随机生成32位的字符串
+ * @returns {string}
+ */
+const generateRandomString = (): string => {
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  return Array.from(array, b => b.toString(16).padStart(2, '0'))
+    .join('')
+    .slice(0, 32);
+};
+
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+const bytesToBase64 = (bytes: Uint8Array): string => {
+  let binary = '';
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return btoa(binary);
+};
+
+const base64ToBytes = (str: string): Uint8Array => {
+  const binary = atob(str);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+};
+
+/**
+ * 随机生成aes 密钥
+ * @returns {Uint8Array}
+ */
+export const generateAesKey = (): Uint8Array => {
+  return encoder.encode(generateRandomString());
+};
+
+/**
+ * 加密base64
+ * @returns {string}
+ */
+export const encryptBase64 = (bytes: Uint8Array): string => {
+  return bytesToBase64(bytes);
+};
+
+/**
+ * 解密base64
+ */
+export const decryptBase64 = (str: string): Uint8Array => {
+  return base64ToBytes(str);
+};
+
+/**
+ * 使用密钥对数据进行加密 (AES/ECB/PKCS7Padding 与后端保持一致)
+ * @param message
+ * @param aesKey
+ * @returns {string}
+ */
+export const encryptWithAes = (message: string, aesKey: Uint8Array): string => {
+  const encrypted = ecb(aesKey).encrypt(encoder.encode(message));
+  return bytesToBase64(encrypted);
+};
+
+/**
+ * 使用密钥对数据进行解密
+ * @param message
+ * @param aesKey
+ * @returns {string}
+ */
+export const decryptWithAes = (message: string, aesKey: Uint8Array): string => {
+  const decrypted = ecb(aesKey).decrypt(base64ToBytes(message));
+  return decoder.decode(decrypted);
+};
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
new file mode 100644
index 0000000..b2bf87d
--- /dev/null
+++ b/src/utils/dict.ts
@@ -0,0 +1,39 @@
+import { getDicts } from '@/api/system/dict/data';
+import { useDictStore } from '@/store/modules/dict';
+
+const pendingRequests = new Map<string, Promise<DictDataOption[]>>();
+
+/**
+ * 获取字典数据
+ */
+export const useDict = (...args: string[]): { [key: string]: DictDataOption[] } => {
+  const res = reactive<{ [key: string]: DictDataOption[] }>({});
+
+  args.forEach(async dictType => {
+    res[dictType] = [];
+    const dicts = useDictStore().getDict(dictType);
+    if (dicts) {
+      res[dictType] = dicts;
+    } else {
+      if (!pendingRequests.has(dictType)) {
+        const request = getDicts(dictType)
+          .then(resp => {
+            const data = resp.data.map(
+              (p): DictDataOption => ({
+                label: p.dictLabel,
+                value: p.dictValue,
+                elTagType: p.listClass,
+                elTagClass: p.cssClass
+              })
+            );
+            useDictStore().setDict(dictType, data);
+            return data;
+          })
+          .finally(() => pendingRequests.delete(dictType));
+        pendingRequests.set(dictType, request);
+      }
+      res[dictType] = await pendingRequests.get(dictType)!;
+    }
+  });
+  return res;
+};
diff --git a/src/utils/dynamicTitle.ts b/src/utils/dynamicTitle.ts
new file mode 100644
index 0000000..8e23ef8
--- /dev/null
+++ b/src/utils/dynamicTitle.ts
@@ -0,0 +1,14 @@
+import defaultSettings from '@/settings';
+import { useSettingsStore } from '@/store/modules/settings';
+
+/**
+ * 动态修改标题
+ */
+export const useDynamicTitle = () => {
+  const settingsStore = useSettingsStore();
+  if (settingsStore.dynamicTitle) {
+    document.title = settingsStore.title + ' - ' + import.meta.env.VITE_APP_TITLE;
+  } else {
+    document.title = defaultSettings.title as string;
+  }
+};
diff --git a/src/utils/errorCode.ts b/src/utils/errorCode.ts
new file mode 100644
index 0000000..d85914e
--- /dev/null
+++ b/src/utils/errorCode.ts
@@ -0,0 +1,7 @@
+export const errorCode: any = {
+  '401': '认证失败，无法访问系统资源',
+  '403': '当前操作没有权限',
+  '404': '访问资源不存在',
+  default: '系统未知错误，请反馈给管理员'
+};
+export default errorCode;
diff --git a/src/utils/geolocation.ts b/src/utils/geolocation.ts
new file mode 100644
index 0000000..0df69b1
--- /dev/null
+++ b/src/utils/geolocation.ts
@@ -0,0 +1,125 @@
+// utils/geolocation.ts
+
+/**
+ * 定位配置参数
+ * @interface GeoOptions
+ */
+interface GeoOptions {
+  /** 是否开启高精度模式，一般会调用设备GPS，耗电更高、速度可能变慢 */
+  enableHighAccuracy?: boolean;
+  /** 定位超时时间，单位毫秒 */
+  timeout?: number;
+  /** 复用缓存位置的最大有效期，单位毫秒；0代表不使用缓存，每次都重新获取 */
+  maximumAge?: number;
+}
+
+/**
+ * 定位成功返回的数据结构
+ * @interface GeoResult
+ */
+export interface GeoResult {
+  /** 纬度 */
+  lat: number;
+  /** 经度 */
+  lng: number;
+  /** 定位精度，单位米，数值越小越精准 */
+  accuracy: number;
+}
+
+/**
+ * 获取浏览器单次当前定位，Promise封装
+ * @param options 定位配置项，可选
+ * @returns Promise<GeoResult> 定位信息
+ * @description 线上环境必须HTTPS，localhost本地调试不受限制；需要用户授权定位权限
+ */
+export function getCurrentPosition(
+  options: GeoOptions = {},
+): Promise<GeoResult> {
+  return new Promise((resolve, reject) => {
+    // 判断当前环境是否支持浏览器原生定位API
+    if (!navigator?.geolocation) {
+      return reject(new Error("当前浏览器不支持定位"));
+    }
+
+    // 合并默认配置与传入配置，PositionOptions是TS内置原生类型
+    const geoOpt: PositionOptions = {
+      timeout: 5000,
+      enableHighAccuracy: true, // ✅ 关键：开启高精度GPS模式
+      maximumAge: 0, // ❗不使用缓存，每次都重新获取最新GPS坐标
+      ...options,
+    };
+
+    // 调用原生定位API
+    navigator.geolocation.getCurrentPosition(
+      // 定位成功回调
+      (position: GeolocationPosition) => {
+        console.log(position);
+        const { latitude, longitude, accuracy } = position.coords;
+        resolve({
+          lat: latitude,
+          lng: longitude,
+          accuracy,
+        });
+      },
+      // 定位失败回调，GeolocationPositionError是TS原生错误类型
+      (err: GeolocationPositionError) => {
+        let msg = "定位失败";
+        console.log(err);
+        switch (err.code) {
+          case err.PERMISSION_DENIED:
+            msg = "用户拒绝定位权限";
+            break;
+          case err.POSITION_UNAVAILABLE:
+            msg = "无法获取位置，信号较差";
+            break;
+          case err.TIMEOUT:
+            msg = "定位超时";
+            break;
+        }
+        reject(new Error(msg));
+      },
+      geoOpt,
+    );
+  });
+}
+
+/**
+ * 持续监听位置变化（适合轨迹、导航场景）
+ * @param onSuccess 位置更新成功回调，每次位置变动都会触发
+ * @param onError 定位异常回调，可选
+ * @param options 定位配置项，可选
+ * @returns number watchId 监听标识，用于后续停止监听
+ */
+export function watchPosition(
+  onSuccess: (res: GeoResult) => void,
+  onError?: (err: GeolocationPositionError) => void,
+  options: GeoOptions = {},
+): number {
+  const geoOpt: PositionOptions = {
+    enableHighAccuracy: true,
+    timeout: 10000,
+    maximumAge: 0,
+    ...options,
+  };
+
+  return navigator.geolocation.watchPosition(
+    (pos) => {
+      // 每次位置更新，统一格式化返回结构
+      onSuccess({
+        lat: pos.coords.latitude,
+        lng: pos.coords.longitude,
+        accuracy: pos.coords.accuracy,
+      });
+    },
+    onError,
+    geoOpt,
+  );
+}
+
+/**
+ * 停止持续位置监听
+ * @param watchId 监听ID，watchPosition返回的值
+ */
+export function clearWatchPosition(watchId: number): void {
+  navigator.geolocation?.clearWatch(watchId);
+}
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
new file mode 100644
index 0000000..ab77af0
--- /dev/null
+++ b/src/utils/i18n.ts
@@ -0,0 +1,16 @@
+// translate router.meta.title, be used in breadcrumb sidebar tagsview
+import i18n from '@/lang/index';
+
+/**
+ * 获取国际化路由，如果不存在则原生返回
+ * @param title 路由名称
+ * @returns {string}
+ */
+export const translateRouteTitle = (title: string): string => {
+  const hasKey = i18n.global.te('route.' + title);
+  if (hasKey) {
+    const translatedTitle = i18n.global.t('route.' + title);
+    return translatedTitle;
+  }
+  return title;
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..be2be50
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,319 @@
+import { parseTime } from '@/utils/ruoyi';
+
+/**
+ * 表格时间格式化
+ */
+export const formatDate = (cellValue: string) => {
+  if (cellValue == null || cellValue == '') return '';
+  const date = new Date(cellValue);
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
+  const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+  const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+  const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+  const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
+};
+
+/**
+ * @param {number} time
+ * @param {string} option
+ * @returns {string}
+ */
+export const formatTime = (time: string, option: string) => {
+  let t: number;
+  if (('' + time).length === 10) {
+    t = parseInt(time) * 1000;
+  } else {
+    t = +time;
+  }
+  const d: any = new Date(t);
+  const now = Date.now();
+
+  const diff = (now - d) / 1000;
+
+  if (diff < 30) {
+    return '刚刚';
+  } else if (diff < 3600) {
+    // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前';
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前';
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前';
+  }
+  if (option) {
+    return parseTime(t, option);
+  } else {
+    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分';
+  }
+};
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export const getQueryObject = (url: string) => {
+  url = url == null ? window.location.href : url;
+  const search = url.substring(url.lastIndexOf('?') + 1);
+  const obj: { [key: string]: string } = {};
+  const reg = /([^?&=]+)=([^?&=]*)/g;
+  search.replace(reg, (rs, $1, $2) => {
+    const name = decodeURIComponent($1);
+    let val = decodeURIComponent($2);
+    val = String(val);
+    obj[name] = val;
+    return rs;
+  });
+  return obj;
+};
+
+/**
+ * @param {string} input value
+ * @returns {number} output value
+ */
+export const byteLength = (str: string) => {
+  // returns the byte length of an utf8 string
+  let s = str.length;
+  for (let i = str.length - 1; i >= 0; i--) {
+    const code = str.charCodeAt(i);
+    if (code > 0x7f && code <= 0x7ff) s++;
+    else if (code > 0x7ff && code <= 0xffff) s += 2;
+    if (code >= 0xdc00 && code <= 0xdfff) i--;
+  }
+  return s;
+};
+
+/**
+ * @param {Array} actual
+ * @returns {Array}
+ */
+export const cleanArray = (actual: Array<any>) => {
+  const newArray: any[] = [];
+  for (let i = 0; i < actual.length; i++) {
+    if (actual[i]) {
+      newArray.push(actual[i]);
+    }
+  }
+  return newArray;
+};
+
+/**
+ * @param {Object} json
+ * @returns {Array}
+ */
+export const param = (json: any) => {
+  if (!json) return '';
+  return cleanArray(
+    Object.keys(json).map(key => {
+      if (json[key] === undefined) return '';
+      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]);
+    })
+  ).join('&');
+};
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export const param2Obj = (url: string) => {
+  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ');
+  if (!search) {
+    return {};
+  }
+  const obj: any = {};
+  const searchArr = search.split('&');
+  searchArr.forEach(v => {
+    const index = v.indexOf('=');
+    if (index !== -1) {
+      const name = v.substring(0, index);
+      const val = v.substring(index + 1, v.length);
+      obj[name] = val;
+    }
+  });
+  return obj;
+};
+
+/**
+ * @param {string} val
+ * @returns {string}
+ */
+export const html2Text = (val: string) => {
+  const div = document.createElement('div');
+  div.innerHTML = val;
+  return div.textContent || div.innerText;
+};
+
+/**
+ * Merges two objects, giving the last one precedence
+ * @param {Object} target
+ * @param {(Object|Array)} source
+ * @returns {Object}
+ */
+export const objectMerge = (target: any, source: any | any[]) => {
+  if (typeof target !== 'object') {
+    target = {};
+  }
+  if (Array.isArray(source)) {
+    return source.slice();
+  }
+  Object.keys(source).forEach(property => {
+    const sourceProperty = source[property];
+    if (typeof sourceProperty === 'object') {
+      target[property] = objectMerge(target[property], sourceProperty);
+    } else {
+      target[property] = sourceProperty;
+    }
+  });
+  return target;
+};
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} className
+ */
+export const toggleClass = (element: HTMLElement, className: string) => {
+  if (!element || !className) {
+    return;
+  }
+  let classString = element.className;
+  const nameIndex = classString.indexOf(className);
+  if (nameIndex === -1) {
+    classString += '' + className;
+  } else {
+    classString = classString.substring(0, nameIndex) + classString.substring(nameIndex + className.length);
+  }
+  element.className = classString;
+};
+
+/**
+ * @param {string} type
+ * @returns {Date}
+ */
+export const getTime = (type: string) => {
+  if (type === 'start') {
+    return new Date().getTime() - 3600 * 1000 * 24 * 90;
+  } else {
+    return new Date(new Date().toDateString());
+  }
+};
+
+/**
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*}
+ */
+export function debounce(func: (...args: any[]) => any, wait: number, immediate: boolean) {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+  let lastArgs: any[] | null = null;
+  let lastContext: any = null;
+  let timestamp = 0;
+  let result: any;
+
+  function later() {
+    const last = Date.now() - timestamp;
+
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      if (!immediate) {
+        result = func.apply(lastContext, lastArgs!);
+        if (!timeout) lastContext = lastArgs = null;
+      }
+    }
+  }
+
+  return function (this: any, ...args: any[]) {
+    lastContext = this;
+    lastArgs = args;
+    timestamp = Date.now();
+    const callNow = immediate && !timeout;
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(lastContext, lastArgs);
+      lastContext = lastArgs = null;
+    }
+    return result;
+  };
+}
+
+/**
+ * This is just a simple version of deep copy
+ * Has a lot of edge cases bug
+ * If you want to use a perfect deep copy, use lodash's _.cloneDeep
+ * @param {Object} source
+ * @returns {Object}
+ */
+export const deepClone = (source: any) => {
+  if (!source && typeof source !== 'object') {
+    throw new Error('error arguments', 'deepClone' as any);
+  }
+  const targetObj: any = source.constructor === Array ? [] : {};
+  Object.keys(source).forEach(keys => {
+    if (source[keys] && typeof source[keys] === 'object') {
+      targetObj[keys] = deepClone(source[keys]);
+    } else {
+      targetObj[keys] = source[keys];
+    }
+  });
+  return targetObj;
+};
+
+/**
+ * @param {Array} arr
+ * @returns {Array}
+ */
+export const uniqueArr = (arr: any) => {
+  return Array.from(new Set(arr));
+};
+
+/**
+ * @returns {string}
+ */
+export const createUniqueString = (): string => {
+  const timestamp = +new Date() + '';
+  const num = (1 + Math.random()) * 65536;
+  const randomNum = parseInt(num + '');
+  return (+(randomNum + timestamp)).toString(32);
+};
+
+/**
+ * Check if an element has a class
+ * @param ele
+ * @param {string} cls
+ * @returns {boolean}
+ */
+export const hasClass = (ele: HTMLElement, cls: string): boolean => {
+  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
+};
+
+/**
+ * Add class to element
+ * @param ele
+ * @param {string} cls
+ */
+export const addClass = (ele: HTMLElement, cls: string) => {
+  if (!hasClass(ele, cls)) ele.className += ' ' + cls;
+};
+
+/**
+ * Remove class from element
+ * @param ele
+ * @param {string} cls
+ */
+export const removeClass = (ele: HTMLElement, cls: string) => {
+  if (hasClass(ele, cls)) {
+    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+    ele.className = ele.className.replace(reg, ' ');
+  }
+};
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export const isExternal = (path: string) => {
+  return /^(https?:|http?:|mailto:|tel:)/.test(path);
+};
diff --git a/src/utils/jsencrypt.ts b/src/utils/jsencrypt.ts
new file mode 100644
index 0000000..e833d3b
--- /dev/null
+++ b/src/utils/jsencrypt.ts
@@ -0,0 +1,22 @@
+import { JSEncrypt } from 'jsencrypt';
+
+// 密钥对生成 http://web.chacuo.net/netrsakeypair
+
+const publicKey = import.meta.env.VITE_APP_RSA_PUBLIC_KEY;
+
+// 前端不建议存放私钥 不建议解密数据 因为都是透明的意义不大
+const privateKey = import.meta.env.VITE_APP_RSA_PRIVATE_KEY;
+
+// 加密
+export const encrypt = (txt: string) => {
+  const encryptor = new JSEncrypt();
+  encryptor.setPublicKey(publicKey); // 设置公钥
+  return encryptor.encrypt(txt); // 对数据进行加密
+};
+
+// 解密
+export const decrypt = (txt: string) => {
+  const encryptor = new JSEncrypt();
+  encryptor.setPrivateKey(privateKey); // 设置私钥
+  return encryptor.decrypt(txt); // 对数据进行解密
+};
diff --git a/src/utils/message-read.ts b/src/utils/message-read.ts
new file mode 100644
index 0000000..9c070cf
--- /dev/null
+++ b/src/utils/message-read.ts
@@ -0,0 +1,43 @@
+import cache from '@/plugins/cache';
+
+const MESSAGE_READ_KEY = 'message_read_ids';
+const MAX_READ_IDS = 300;
+
+const buildCacheKey = (userId: string | number) => `${MESSAGE_READ_KEY}:${userId}`;
+
+const normalizeIds = (ids: Array<string | number>) => {
+  const values = ids.map(item => String(item)).filter(item => !!item);
+  return Array.from(new Set(values)).slice(0, MAX_READ_IDS);
+};
+
+export const getMessageReadIds = (userId: string | number) => {
+  if (!userId) {
+    return [] as string[];
+  }
+  const ids = cache.local.getJSON(buildCacheKey(userId));
+  return Array.isArray(ids) ? normalizeIds(ids) : [];
+};
+
+export const isMessageRead = (userId: string | number, messageId?: string | number) => {
+  if (!userId || messageId === undefined || messageId === null) {
+    return false;
+  }
+  return getMessageReadIds(userId).includes(String(messageId));
+};
+
+export const markMessageRead = (userId: string | number, messageId?: string | number) => {
+  if (!userId || messageId === undefined || messageId === null) {
+    return [];
+  }
+  return markMessageReadBatch(userId, [messageId]);
+};
+
+export const markMessageReadBatch = (userId: string | number, messageIds: Array<string | number>) => {
+  if (!userId) {
+    return [] as string[];
+  }
+  const current = getMessageReadIds(userId);
+  const next = normalizeIds([...messageIds, ...current]);
+  cache.local.setJSON(buildCacheKey(userId), next);
+  return next;
+};
diff --git a/src/utils/ossContent.ts b/src/utils/ossContent.ts
new file mode 100644
index 0000000..e8daa36
--- /dev/null
+++ b/src/utils/ossContent.ts
@@ -0,0 +1,31 @@
+import { listByIds } from '@/api/system/oss';
+
+const OSS_MARKER_RE = /oss:\/\/([\w-]+)/g;
+
+/**
+ * 将 HTML 中的 oss://{ossId} 标记批量解析为真实的 OSS 授权 URL
+ *
+ * 适用于富文本内容展示场景（Editor 组件 / 详情页只读渲染等）
+ *
+ * @example
+ * const html = await resolveOssContent('<p><img src="oss://12345"/></p>');
+ */
+export async function resolveOssContent(html: string): Promise<string> {
+  if (!html) return html;
+
+  const matches = [...html.matchAll(OSS_MARKER_RE)];
+  if (matches.length === 0) return html;
+
+  const ossIds = [...new Set(matches.map(m => m[1]))];
+
+  try {
+    const res = await listByIds(ossIds.join(','));
+    let result = html;
+    for (const oss of res.data) {
+      result = result.replaceAll(`oss://${oss.ossId}`, oss.url);
+    }
+    return result;
+  } catch {
+    return html;
+  }
+}
diff --git a/src/utils/permission.ts b/src/utils/permission.ts
new file mode 100644
index 0000000..da071c1
--- /dev/null
+++ b/src/utils/permission.ts
@@ -0,0 +1,51 @@
+import { useUserStore } from '@/store/modules/user';
+
+/**
+ * 字符权限校验
+ * @param {Array} value 校验值
+ * @returns {Boolean}
+ */
+export const checkPermi = (value: any) => {
+  if (value && value instanceof Array && value.length > 0) {
+    const permissions = useUserStore().permissions;
+    const permissionDatas = value;
+    const all_permission = '*:*:*';
+
+    const hasPermission = permissions.some(permission => {
+      return all_permission === permission || permissionDatas.includes(permission);
+    });
+
+    if (!hasPermission) {
+      return false;
+    }
+    return true;
+  } else {
+    console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`);
+    return false;
+  }
+};
+
+/**
+ * 角色权限校验
+ * @param {Array} value 校验值
+ * @returns {Boolean}
+ */
+export const checkRole = (value: any): boolean => {
+  if (value && value instanceof Array && value.length > 0) {
+    const roles = useUserStore().roles;
+    const permissionRoles = value;
+    const super_admin = 'admin';
+
+    const hasRole = roles.some(role => {
+      return super_admin === role || permissionRoles.includes(role);
+    });
+
+    if (!hasRole) {
+      return false;
+    }
+    return true;
+  } else {
+    console.error(`need roles! Like checkRole="['admin','editor']"`);
+    return false;
+  }
+};
diff --git a/src/utils/propTypes.ts b/src/utils/propTypes.ts
new file mode 100644
index 0000000..4a8ca1a
--- /dev/null
+++ b/src/utils/propTypes.ts
@@ -0,0 +1,26 @@
+import type { CSSProperties } from 'vue';
+import VueTypes, { createTypes, toValidableType, type VueTypesInterface, type VueTypeValidableDef } from 'vue-types';
+
+type PropTypes = VueTypesInterface & {
+  readonly style: VueTypeValidableDef<CSSProperties>;
+  readonly fieldOption: VueTypeValidableDef<Array<FieldOption>>;
+};
+
+const propTypes = createTypes({
+  func: undefined,
+  bool: undefined,
+  string: undefined,
+  number: undefined,
+  object: undefined,
+  integer: undefined
+}) as PropTypes;
+
+export default class ProjectTypes extends VueTypes {
+  static get style() {
+    return toValidableType('style', {
+      type: [String, Object],
+      default: undefined
+    });
+  }
+}
+export { propTypes };
diff --git a/src/utils/push-message.ts b/src/utils/push-message.ts
new file mode 100644
index 0000000..d487584
--- /dev/null
+++ b/src/utils/push-message.ts
@@ -0,0 +1,82 @@
+export const PUSH_MESSAGE_TYPE = {
+  MESSAGE: 'message',
+  NOTICE: 'notice',
+  LLM: 'llm',
+  CUSTOM: 'custom'
+} as const;
+
+export const PUSH_MESSAGE_SOURCE = {
+  BACKEND: 'backend',
+  NOTICE: 'notice',
+  WORKFLOW: 'workflow',
+  LLM: 'llm',
+  CLIENT: 'client'
+} as const;
+
+export const NOTICE_GROUP = {
+  SYSTEM: 'system',
+  NOTICE: 'notice',
+  WORKFLOW: 'workflow'
+} as const;
+
+export interface PushMessagePayload {
+  messageId?: string | number;
+  type?: string;
+  source?: string;
+  message?: string;
+  data?: Record<string, any> | null;
+  path?: string;
+  timestamp?: number;
+}
+
+const MESSAGE_CENTER_TYPES = new Set<string>([PUSH_MESSAGE_TYPE.MESSAGE, PUSH_MESSAGE_TYPE.NOTICE]);
+
+export const parsePushMessage = (raw: string): PushMessagePayload => {
+  try {
+    const payload = JSON.parse(raw) as PushMessagePayload;
+    return {
+      type: payload.type ?? PUSH_MESSAGE_TYPE.MESSAGE,
+      source: payload.source ?? 'backend',
+      messageId: payload.messageId,
+      message: payload.message ?? '',
+      data: payload.data ?? null,
+      path: payload.path,
+      timestamp: payload.timestamp ?? Date.now()
+    };
+  } catch {
+    return {
+      type: PUSH_MESSAGE_TYPE.MESSAGE,
+      source: 'backend',
+      messageId: undefined,
+      message: raw,
+      data: null,
+      path: undefined,
+      timestamp: Date.now()
+    };
+  }
+};
+
+export const shouldAppendNotice = (payload: PushMessagePayload) => {
+  return MESSAGE_CENTER_TYPES.has(payload.type ?? PUSH_MESSAGE_TYPE.MESSAGE);
+};
+
+export const resolveNoticeGroup = (payload: PushMessagePayload) => {
+  if (payload.type === PUSH_MESSAGE_TYPE.NOTICE || payload.source === PUSH_MESSAGE_SOURCE.NOTICE) {
+    return NOTICE_GROUP.NOTICE;
+  }
+  if (payload.source === PUSH_MESSAGE_SOURCE.WORKFLOW) {
+    return NOTICE_GROUP.WORKFLOW;
+  }
+  return NOTICE_GROUP.SYSTEM;
+};
+
+export const resolveNoticeTitle = (payload: PushMessagePayload) => {
+  const group = resolveNoticeGroup(payload);
+  if (group === NOTICE_GROUP.NOTICE) {
+    return '通知公告消息';
+  }
+  if (group === NOTICE_GROUP.WORKFLOW) {
+    return '工作流消息';
+  }
+  return '系统消息';
+};
diff --git a/src/utils/push.ts b/src/utils/push.ts
new file mode 100644
index 0000000..2fef2f5
--- /dev/null
+++ b/src/utils/push.ts
@@ -0,0 +1,192 @@
+import { ElNotification } from 'element-plus';
+import type { MessageVO } from '@/api/system/message/types';
+import { getMessageBox } from '@/api/system/message';
+import { useNoticeStore } from '@/store/modules/notice';
+import { useUserStore } from '@/store/modules/user';
+import { getToken } from '@/utils/auth';
+import { isMessageRead } from '@/utils/message-read';
+import { parsePushMessage, resolveNoticeGroup, resolveNoticeTitle, shouldAppendNotice } from '@/utils/push-message';
+
+let closePushConnection: (() => void) | undefined;
+let stopPushWatchers: Array<() => void> = [];
+const KICKED_MESSAGE = 'kicked';
+let pushKicked = false;
+let resumePushTimer: ReturnType<typeof setTimeout> | undefined;
+
+const formatNoticeTime = (timestamp?: number | string) => {
+  const time = timestamp ? new Date(timestamp) : new Date();
+  return time.toLocaleString();
+};
+
+const appendNotice = (raw: string) => {
+  const payload = parsePushMessage(raw);
+  if (!shouldAppendNotice(payload)) {
+    return;
+  }
+  const userId = useUserStore().userId;
+  const title = resolveNoticeTitle(payload);
+  useNoticeStore().addNotice({
+    messageId: payload.messageId,
+    title,
+    category: resolveNoticeGroup(payload),
+    type: payload.type,
+    source: payload.source,
+    message: payload.message ?? '',
+    content: payload.data?.noticeContent,
+    data: payload.data,
+    path: payload.path,
+    read: isMessageRead(userId, payload.messageId),
+    timestamp: payload.timestamp ?? Date.now(),
+    time: formatNoticeTime(payload.timestamp)
+  });
+  ElNotification({
+    title,
+    message: payload.message ?? '',
+    type: 'success',
+    duration: 3000
+  });
+};
+
+const handlePushMessage = (raw: string) => {
+  if (raw === KICKED_MESSAGE) {
+    pushKicked = true;
+    closePush();
+    return;
+  }
+  appendNotice(raw);
+};
+
+const toNoticeItem = (item: MessageVO) => {
+  const userId = useUserStore().userId;
+  const timestamp = item.createTime ? new Date(item.createTime).getTime() : Date.now();
+  return {
+    messageId: item.messageId,
+    title: item.title,
+    category: resolveNoticeGroup(item),
+    type: item.type,
+    source: item.source,
+    message: item.message ?? '',
+    content: item.content,
+    data: item.data ?? null,
+    path: item.path,
+    read: isMessageRead(userId, item.messageId),
+    timestamp,
+    time: formatNoticeTime(timestamp)
+  };
+};
+
+const buildSseUrl = (path: string) => {
+  return `${import.meta.env.VITE_APP_BASE_API}${path}?Authorization=Bearer ${getToken()}&clientid=${import.meta.env.VITE_APP_CLIENT_ID}`;
+};
+
+const buildWsUrl = (path: string) => {
+  const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  return `${protocol}${window.location.host}${buildSseUrl(path)}`;
+};
+
+const initSsePush = (url: string) => {
+  const { data, error, close } = useEventSource(url, [], {
+    autoReconnect: {
+      retries: 5,
+      delay: 5000,
+      onFailed() {
+        console.warn('SSE connection failed after 5 retries');
+      }
+    }
+  });
+  closePushConnection = close;
+
+  const stopErrorWatch = watch(error, () => {
+    console.warn('SSE connection error:', error.value);
+    error.value = null;
+  });
+
+  const stopDataWatch = watch(data, () => {
+    if (!data.value) return;
+    handlePushMessage(data.value);
+    data.value = null;
+  });
+  stopPushWatchers.push(stopErrorWatch, stopDataWatch);
+};
+
+const initWsPush = (url: string) => {
+  const { close } = useWebSocket(url, {
+    autoReconnect: {
+      retries: 3,
+      delay: 1000,
+      onFailed() {
+        console.warn('websocket重连失败');
+      }
+    },
+    heartbeat: {
+      message: 'ping',
+      interval: 10000,
+      pongTimeout: 2000
+    },
+    onMessage: (_, e) => {
+      if (String(e.data) === 'pong') {
+        return;
+      }
+      handlePushMessage(String(e.data));
+    }
+  });
+  closePushConnection = close;
+};
+
+export const initPush = () => {
+  closePush();
+  if (import.meta.env.VITE_APP_MESSAGE_ENABLED === 'false') {
+    return;
+  }
+  pushKicked = false;
+  const path = import.meta.env.VITE_APP_MESSAGE_PATH || '/resource/message';
+  const transport = import.meta.env.VITE_APP_MESSAGE_TRANSPORT || 'sse';
+  if (transport.toLowerCase() === 'websocket') {
+    initWsPush(buildWsUrl(path));
+    return;
+  }
+  initSsePush(buildSseUrl(path));
+};
+
+export const initMessageBox = async () => {
+  if (import.meta.env.VITE_APP_MESSAGE_ENABLED === 'false') {
+    useNoticeStore().clearNotice();
+    return;
+  }
+  const { data } = await getMessageBox();
+  const notices = [...(data?.systemList ?? []), ...(data?.noticeList ?? []), ...(data?.workflowList ?? [])].map(
+    toNoticeItem
+  );
+  useNoticeStore().setNotices(notices);
+};
+
+export const closePush = () => {
+  closePushConnection?.();
+  closePushConnection = undefined;
+  stopPushWatchers.forEach(stop => stop());
+  stopPushWatchers = [];
+};
+
+const resumePushIfNeeded = () => {
+  if (!pushKicked || !getToken() || document.visibilityState !== 'visible') {
+    return;
+  }
+  if (resumePushTimer) {
+    clearTimeout(resumePushTimer);
+  }
+  resumePushTimer = setTimeout(async () => {
+    resumePushTimer = undefined;
+    if (!pushKicked || !getToken() || document.visibilityState !== 'visible') {
+      return;
+    }
+    try {
+      await initMessageBox();
+    } finally {
+      initPush();
+    }
+  }, 300);
+};
+
+window.addEventListener('focus', resumePushIfNeeded);
+document.addEventListener('visibilitychange', resumePushIfNeeded);
+window.addEventListener('online', resumePushIfNeeded);
diff --git a/src/utils/request.ts b/src/utils/request.ts
new file mode 100644
index 0000000..9de8455
--- /dev/null
+++ b/src/utils/request.ts
@@ -0,0 +1,296 @@
+import type { LoadingInstance } from 'element-plus';
+import axiosModule from 'axios';
+import { HttpStatus } from '@/enums/RespEnum';
+import { getLanguage } from '@/lang';
+import cache from '@/plugins/cache';
+import router from '@/router';
+import { useUserStore } from '@/store/modules/user';
+import { getToken } from '@/utils/auth';
+import { decryptBase64, decryptWithAes, encryptBase64, encryptWithAes, generateAesKey } from '@/utils/crypto';
+import { errorCode } from '@/utils/errorCode';
+import { decrypt, encrypt } from '@/utils/jsencrypt';
+import { blobValidate, tansParams } from '@/utils/ruoyi';
+import { saveBlob } from '@/utils/save';
+
+/** axios 1.13 + TS6：默认导出在类型上会被解析为不可调用的 export= 形态 */
+const axios = axiosModule as any;
+
+const encryptHeader = 'encrypt-key';
+let downloadLoadingInstance: LoadingInstance | undefined;
+// 是否显示重新登录
+export const isRelogin = { show: false };
+
+function createHandledError(message: string) {
+  const error = new Error(message) as Error & { isHandled?: boolean };
+  error.isHandled = true;
+  return error;
+}
+
+export function isHandledRequestError(error: unknown) {
+  return Boolean((error as { isHandled?: boolean } | undefined)?.isHandled);
+}
+
+function normalizeErrorMessage(message?: string) {
+  if (!message) {
+    return undefined;
+  }
+  if (message === 'Network Error') {
+    return '后端接口连接异常';
+  }
+  if (message.includes('timeout')) {
+    return '系统接口请求超时';
+  }
+  if (message.includes('Request failed with status code')) {
+    return '系统接口' + message.slice(-3) + '异常';
+  }
+  return message;
+}
+
+async function parseResponseErrorData(data: unknown): Promise<string | undefined> {
+  if (!data) {
+    return undefined;
+  }
+
+  if (data instanceof Blob) {
+    return parseResponseErrorData(await data.text());
+  }
+
+  if (data instanceof ArrayBuffer) {
+    return parseResponseErrorData(new TextDecoder().decode(data));
+  }
+
+  if (typeof data === 'string') {
+    const text = data.trim();
+    if (!text) {
+      return undefined;
+    }
+    try {
+      return parseResponseErrorData(JSON.parse(text));
+    } catch {
+      return text;
+    }
+  }
+
+  if (typeof data === 'object') {
+    const payload = data as Record<string, any>;
+    return payload.msg || payload.message || errorCode[payload.code] || errorCode['default'];
+  }
+
+  return undefined;
+}
+
+export async function extractErrorMessage(error: any): Promise<string | undefined> {
+  const responseMessage = await parseResponseErrorData(error?.response?.data);
+  if (responseMessage) {
+    return responseMessage;
+  }
+  return normalizeErrorMessage(error?.message);
+}
+
+export const globalHeaders = () => {
+  return {
+    Authorization: 'Bearer ' + getToken(),
+    clientid: import.meta.env.VITE_APP_CLIENT_ID
+  };
+};
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
+axios.defaults.headers['clientid'] = import.meta.env.VITE_APP_CLIENT_ID;
+// 创建 axios 实例
+const service = axios.create({
+  baseURL: import.meta.env.VITE_APP_BASE_API,
+  timeout: 50000,
+  transitional: {
+    // 超时错误更明确
+    clarifyTimeoutError: true
+  }
+});
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config: any) => {
+    // 对应国际化资源文件后缀
+    config.headers['Content-Language'] = getLanguage();
+
+    const isToken = config.headers?.isToken === false;
+    // 是否需要防止数据重复提交
+    const isRepeatSubmit = config.headers?.repeatSubmit === false;
+    // 是否需要加密
+    const isEncrypt = config.headers?.isEncrypt === 'true';
+
+    if (getToken() && !isToken) {
+      config.headers['Authorization'] = 'Bearer ' + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
+    // get请求映射params参数
+    if (config.method === 'get' && config.params) {
+      let url = config.url + '?' + tansParams(config.params);
+      url = url.slice(0, -1);
+      config.params = {};
+      config.url = url;
+    }
+
+    if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
+      const requestObj = {
+        url: config.url,
+        data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
+        time: new Date().getTime()
+      };
+      const sessionObj = cache.session.getJSON('sessionObj');
+      if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+        cache.session.setJSON('sessionObj', requestObj);
+      } else {
+        const s_url = sessionObj.url; // 请求地址
+        const s_data = sessionObj.data; // 请求数据
+        const s_time = sessionObj.time; // 请求时间
+        const interval = 500; // 间隔时间(ms)，小于此时间视为重复提交
+        if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+          const message = '数据正在处理，请勿重复提交';
+          console.warn(`[${s_url}]: ` + message);
+          return Promise.reject(new Error(message));
+        } else {
+          cache.session.setJSON('sessionObj', requestObj);
+        }
+      }
+    }
+    if (import.meta.env.VITE_APP_ENCRYPT === 'true') {
+      // 当开启参数加密
+      if (isEncrypt && (config.method === 'post' || config.method === 'put')) {
+        // 生成一个 AES 密钥
+        const aesKey = generateAesKey();
+        config.headers[encryptHeader] = encrypt(encryptBase64(aesKey));
+        config.data =
+          typeof config.data === 'object'
+            ? encryptWithAes(JSON.stringify(config.data), aesKey)
+            : encryptWithAes(config.data, aesKey);
+      }
+    }
+    // FormData数据去请求头Content-Type
+    if (config.data instanceof FormData) {
+      delete config.headers['Content-Type'];
+    }
+    return config;
+  },
+  (error: any) => {
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  (res: any) => {
+    if (import.meta.env.VITE_APP_ENCRYPT === 'true') {
+      // 加密后的 AES 秘钥
+      const keyStr = res.headers[encryptHeader];
+      // 加密
+      if (keyStr != null && keyStr != '') {
+        const data = res.data;
+        // 请求体 AES 解密
+        const base64Str = decrypt(keyStr);
+        // base64 解码 得到请求头的 AES 秘钥
+        const aesKey = decryptBase64(base64Str.toString());
+        // aesKey 解码 data
+        const decryptData = decryptWithAes(data, aesKey);
+        // 将结果 (得到的是 JSON 字符串) 转为 JSON
+        res.data = JSON.parse(decryptData);
+      }
+    }
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || HttpStatus.SUCCESS;
+    // 获取错误信息
+    const msg = res.data.msg || errorCode[code] || errorCode['default'];
+    // 二进制数据则直接返回
+    if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
+      return res.data;
+    }
+    if (code === 401) {
+      // prettier-ignore
+      if (!isRelogin.show) {
+				isRelogin.show = true;
+				ElMessageBox.confirm(
+					"登录状态已过期，您可以继续留在该页面，或者重新登录",
+					"系统提示",
+					{
+						confirmButtonText: "重新登录",
+						cancelButtonText: "取消",
+						type: "warning",
+					},
+				)
+					.then(() => {
+						isRelogin.show = false;
+						useUserStore()
+							.logout()
+							.then(() => {
+								router.replace({
+									path: "/login",
+									query: {
+										redirect: encodeURIComponent(
+											router.currentRoute.value.fullPath || "/",
+										),
+									},
+								});
+							});
+					})
+					.catch(() => {
+						isRelogin.show = false;
+					});
+			}
+      return Promise.reject('无效的会话，或者会话已过期，请重新登录。');
+    } else if (code === HttpStatus.SERVER_ERROR) {
+      ElMessage({ message: msg, type: 'error' });
+      return Promise.reject(createHandledError(msg));
+    } else if (code === HttpStatus.WARN) {
+      ElMessage({ message: msg, type: 'warning' });
+      return Promise.reject(createHandledError(msg));
+    } else if (code !== HttpStatus.SUCCESS) {
+      ElNotification.error({ title: msg });
+      return Promise.reject(createHandledError(msg));
+    } else {
+      return Promise.resolve(res.data);
+    }
+  },
+  async (error: any) => {
+    const message = (await extractErrorMessage(error)) || errorCode['default'];
+    ElMessage({ message: message, type: 'error', duration: 5 * 1000 });
+    error.isHandled = true;
+    return Promise.reject(error);
+  }
+);
+// 通用下载方法
+export function download(url: string, params: any, fileName: string) {
+  downloadLoadingInstance = ElLoading.service({
+    text: '正在下载数据，请稍候',
+    background: 'rgba(0, 0, 0, 0.7)'
+  });
+  // prettier-ignore
+  return service
+		.post(url, params, {
+			transformRequest: [
+				(params: any) => {
+					return tansParams(params);
+				},
+			],
+			headers: { "Content-Type": "application/x-www-form-urlencoded" },
+			responseType: "blob",
+		})
+		.then(async (resp: any) => {
+			const isLogin = blobValidate(resp);
+			if (isLogin) {
+				const blob = new Blob([resp]);
+				saveBlob(blob, fileName);
+			} else {
+				const blob = new Blob([resp]);
+				const resText = await blob.text();
+				const rspObj = JSON.parse(resText);
+				const errMsg =
+					errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
+				ElMessage.error(errMsg);
+			}
+			downloadLoadingInstance?.close();
+		})
+		.catch((r: any) => {
+			console.error(r);
+			downloadLoadingInstance?.close();
+		});
+}
+// 导出 axios 实例
+export default service;
diff --git a/src/utils/ruoyi.ts b/src/utils/ruoyi.ts
new file mode 100644
index 0000000..36a91be
--- /dev/null
+++ b/src/utils/ruoyi.ts
@@ -0,0 +1,237 @@
+// 日期格式化
+export function parseTime(time: any, pattern?: string) {
+  if (arguments.length === 0 || !time) {
+    return null;
+  }
+  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
+  let date;
+  if (typeof time === 'object') {
+    date = time;
+  } else {
+    if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
+      time = parseInt(time);
+    } else if (typeof time === 'string') {
+      time = time
+        .replace(new RegExp(/-/gm), '/')
+        .replace('T', ' ')
+        .replace(new RegExp(/\.[\d]{3}/gm), '');
+    }
+    if (typeof time === 'number' && time.toString().length === 10) {
+      time = time * 1000;
+    }
+    date = new Date(time);
+  }
+  const formatObj: { [key: string]: any } = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  };
+  return format.replace(/{(y|m|d|h|i|s|a)+}/g, (result: string, key: string) => {
+    let value = formatObj[key];
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value];
+    }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value;
+    }
+    return value || 0;
+  });
+}
+
+/**
+ * 添加日期范围
+ * @param params
+ * @param dateRange
+ * @param propName
+ */
+export const addDateRange = (params: any, dateRange: any[], propName?: string) => {
+  const search = params;
+  search.params =
+    typeof search.params === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
+  dateRange = Array.isArray(dateRange) ? dateRange : [];
+  if (typeof propName === 'undefined') {
+    search.params['beginTime'] = dateRange[0];
+    search.params['endTime'] = dateRange[1];
+  } else {
+    search.params['begin' + propName] = dateRange[0];
+    search.params['end' + propName] = dateRange[1];
+  }
+  return search;
+};
+
+// 回显数据字典
+export const selectDictLabel = (datas: any, value: number | string) => {
+  if (value === undefined) {
+    return '';
+  }
+  const actions: Array<string | number> = [];
+  Object.keys(datas).some(key => {
+    if (datas[key].value == '' + value) {
+      actions.push(datas[key].label);
+      return true;
+    }
+  });
+  if (actions.length === 0) {
+    actions.push(value);
+  }
+  return actions.join('');
+};
+
+// 回显数据字典（字符串数组）
+export const selectDictLabels = (datas: any, value: any, separator: any) => {
+  if (value === undefined || value.length === 0) {
+    return '';
+  }
+  if (Array.isArray(value)) {
+    value = value.join(',');
+  }
+  const actions: any[] = [];
+  const currentSeparator = undefined === separator ? ',' : separator;
+  const temp = value.split(currentSeparator);
+  Object.keys(value.split(currentSeparator)).some(val => {
+    let match = false;
+    Object.keys(datas).some(key => {
+      if (datas[key].value == '' + temp[val]) {
+        actions.push(datas[key].label + currentSeparator);
+        match = true;
+      }
+    });
+    if (!match) {
+      actions.push(temp[val] + currentSeparator);
+    }
+  });
+  return actions.join('').substring(0, actions.join('').length - 1);
+};
+
+// 字符串格式化(%s )
+export function sprintf(str: string) {
+  if (arguments.length !== 0) {
+    let flag = true,
+      i = 1;
+    str = str.replace(/%s/g, function () {
+      const arg = arguments[i++];
+      if (typeof arg === 'undefined') {
+        flag = false;
+        return '';
+      }
+      return arg;
+    });
+    return flag ? str : '';
+  }
+}
+
+// 转换字符串，undefined,null等转化为""
+export const parseStrEmpty = (str: any) => {
+  if (!str || str == 'undefined' || str == 'null') {
+    return '';
+  }
+  return str;
+};
+
+// 数据合并
+export const mergeRecursive = (source: any, target: any) => {
+  for (const p in target) {
+    try {
+      if (target[p].constructor == Object) {
+        source[p] = mergeRecursive(source[p], target[p]);
+      } else {
+        source[p] = target[p];
+      }
+    } catch (e) {
+      source[p] = target[p];
+    }
+  }
+  return source;
+};
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+export const handleTree = <T>(data: any[], id?: string, parentId?: string, children?: string): T[] => {
+  const config: {
+    id: string;
+    parentId: string;
+    childrenList: string;
+  } = {
+    id: id || 'id',
+    parentId: parentId || 'parentId',
+    childrenList: children || 'children'
+  };
+
+  const childrenListMap: any = {};
+  const tree: T[] = [];
+  for (const d of data) {
+    const id = d[config.id];
+    childrenListMap[id] = d;
+    if (!d[config.childrenList]) {
+      d[config.childrenList] = [];
+    }
+  }
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    const parentObj = childrenListMap[parentId];
+    if (!parentObj) {
+      tree.push(d);
+    } else {
+      parentObj[config.childrenList].push(d);
+    }
+  }
+  return tree;
+};
+
+/**
+ * 参数处理
+ * @param {*} params  参数
+ */
+export const tansParams = (params: any) => {
+  let result = '';
+  for (const propName of Object.keys(params)) {
+    const value = params[propName];
+    const part = encodeURIComponent(propName) + '=';
+    if (value !== null && value !== '' && typeof value !== 'undefined') {
+      if (typeof value === 'object') {
+        for (const key of Object.keys(value)) {
+          if (value[key] !== null && value[key] !== '' && typeof value[key] !== 'undefined') {
+            const params = propName + '[' + key + ']';
+            const subPart = encodeURIComponent(params) + '=';
+            result += subPart + encodeURIComponent(value[key]) + '&';
+          }
+        }
+      } else {
+        result += part + encodeURIComponent(value) + '&';
+      }
+    }
+  }
+  return result;
+};
+
+// 返回项目路径
+export const getNormalPath = (p: string): string => {
+  if (p.length === 0 || !p || p === 'undefined') {
+    return p;
+  }
+  const res = p.replace('//', '/');
+  if (res[res.length - 1] === '/') {
+    return res.slice(0, res.length - 1);
+  }
+  return res;
+};
+
+// 验证是否为blob格式
+export const blobValidate = (data: any) => {
+  return data.type !== 'application/json';
+};
+
+export default {
+  handleTree
+};
diff --git a/src/utils/sanitize.ts b/src/utils/sanitize.ts
new file mode 100644
index 0000000..49515db
--- /dev/null
+++ b/src/utils/sanitize.ts
@@ -0,0 +1,214 @@
+const DEFAULT_ALLOWED_TAGS = new Set([
+  'a',
+  'article',
+  'b',
+  'blockquote',
+  'br',
+  'caption',
+  'code',
+  'col',
+  'colgroup',
+  'del',
+  'div',
+  'em',
+  'figcaption',
+  'figure',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'hr',
+  'i',
+  'img',
+  'li',
+  'ol',
+  'p',
+  'pre',
+  's',
+  'section',
+  'span',
+  'strong',
+  'sub',
+  'sup',
+  'table',
+  'tbody',
+  'td',
+  'th',
+  'thead',
+  'tr',
+  'u',
+  'ul',
+  'video',
+  'source'
+]);
+
+const URI_ATTRS = new Set(['href', 'src']);
+const GLOBAL_ALLOWED_ATTRS = new Set(['class', 'title', 'alt', 'style']);
+const TAG_ALLOWED_ATTRS: Record<string, Set<string>> = {
+  a: new Set(['href', 'target', 'rel']),
+  img: new Set(['src', 'alt', 'title']),
+  video: new Set(['src', 'poster', 'controls', 'autoplay', 'muted', 'loop']),
+  source: new Set(['src', 'type']),
+  td: new Set(['colspan', 'rowspan']),
+  th: new Set(['colspan', 'rowspan']),
+  col: new Set(['span']),
+  colgroup: new Set(['span'])
+};
+
+const DANGEROUS_TAGS = new Set([
+  'script',
+  'style',
+  'iframe',
+  'object',
+  'embed',
+  'link',
+  'meta',
+  'base',
+  'form',
+  'input',
+  'button',
+  'textarea',
+  'select',
+  'option',
+  'svg',
+  'math'
+]);
+const SAFE_URL_PATTERN = /^(https?:|mailto:|tel:|\/|#|data:image\/(?:png|jpeg|jpg|gif|webp);base64,)/i;
+const ALLOWED_STYLE_PROPS = new Set([
+  'background-color',
+  'color',
+  'font-family',
+  'font-size',
+  'font-style',
+  'font-weight',
+  'height',
+  'line-height',
+  'list-style-type',
+  'margin-left',
+  'max-width',
+  'min-width',
+  'padding-left',
+  'text-align',
+  'text-decoration',
+  'text-indent',
+  'vertical-align',
+  'white-space',
+  'width'
+]);
+const UNSAFE_STYLE_VALUE_PATTERN = /(?:expression\s*\(|url\s*\(|javascript:|vbscript:|data:|@import|behavior:)/i;
+
+const sanitizeUrl = (value: string) => {
+  const normalized = value.trim();
+  if (!normalized) {
+    return '';
+  }
+  return SAFE_URL_PATTERN.test(normalized) ? normalized : '';
+};
+
+const sanitizeStyle = (value: string) => {
+  const declarations = value
+    .split(';')
+    .map(item => item.trim())
+    .filter(Boolean);
+
+  const safeDeclarations = declarations.flatMap(declaration => {
+    const separatorIndex = declaration.indexOf(':');
+    if (separatorIndex <= 0) {
+      return [];
+    }
+
+    const property = declaration.slice(0, separatorIndex).trim().toLowerCase();
+    const propertyValue = declaration.slice(separatorIndex + 1).trim();
+
+    if (!ALLOWED_STYLE_PROPS.has(property) || !propertyValue || UNSAFE_STYLE_VALUE_PATTERN.test(propertyValue)) {
+      return [];
+    }
+
+    return [`${property}: ${propertyValue}`];
+  });
+
+  return safeDeclarations.join('; ');
+};
+
+const shouldKeepAttr = (tagName: string, attrName: string) => {
+  if (attrName.startsWith('on')) {
+    return false;
+  }
+  if (GLOBAL_ALLOWED_ATTRS.has(attrName)) {
+    return true;
+  }
+  return TAG_ALLOWED_ATTRS[tagName]?.has(attrName) ?? false;
+};
+
+const sanitizeElement = (element: Element) => {
+  const tagName = element.tagName.toLowerCase();
+
+  if (DANGEROUS_TAGS.has(tagName)) {
+    element.remove();
+    return;
+  }
+
+  if (!DEFAULT_ALLOWED_TAGS.has(tagName)) {
+    const parent = element.parentNode;
+    if (!parent) {
+      element.remove();
+      return;
+    }
+    while (element.firstChild) {
+      parent.insertBefore(element.firstChild, element);
+    }
+    parent.removeChild(element);
+    return;
+  }
+
+  Array.from(element.attributes).forEach(attr => {
+    const attrName = attr.name.toLowerCase();
+    if (!shouldKeepAttr(tagName, attrName)) {
+      element.removeAttribute(attr.name);
+      return;
+    }
+
+    if (attrName === 'style') {
+      const sanitizedStyle = sanitizeStyle(attr.value);
+      if (!sanitizedStyle) {
+        element.removeAttribute(attr.name);
+        return;
+      }
+      element.setAttribute(attr.name, sanitizedStyle);
+      return;
+    }
+
+    if (URI_ATTRS.has(attrName)) {
+      const sanitized = sanitizeUrl(attr.value);
+      if (!sanitized) {
+        element.removeAttribute(attr.name);
+        return;
+      }
+      element.setAttribute(attr.name, sanitized);
+    }
+  });
+
+  if (tagName === 'a' && element.hasAttribute('target')) {
+    element.setAttribute('rel', 'noopener noreferrer');
+  }
+};
+
+export function sanitizeHtml(html?: string) {
+  if (!html) {
+    return '';
+  }
+
+  const template = document.createElement('template');
+  template.innerHTML = html;
+  const walker = document.createTreeWalker(template.content, NodeFilter.SHOW_ELEMENT);
+  const elements: Element[] = [];
+
+  while (walker.nextNode()) {
+    elements.push(walker.currentNode as Element);
+  }
+
+  elements.forEach(sanitizeElement);
+  return template.innerHTML;
+}
diff --git a/src/utils/save.ts b/src/utils/save.ts
new file mode 100644
index 0000000..6cb0502
--- /dev/null
+++ b/src/utils/save.ts
@@ -0,0 +1,13 @@
+export function saveBlob(blob: Blob, fileName: string) {
+  const downloadLink = document.createElement('a');
+  const objectUrl = URL.createObjectURL(blob);
+
+  downloadLink.href = objectUrl;
+  downloadLink.download = fileName;
+  downloadLink.rel = 'noopener';
+  downloadLink.click();
+
+  setTimeout(() => {
+    URL.revokeObjectURL(objectUrl);
+  }, 40_000);
+}
diff --git a/src/utils/scroll-to.ts b/src/utils/scroll-to.ts
new file mode 100644
index 0000000..f89af39
--- /dev/null
+++ b/src/utils/scroll-to.ts
@@ -0,0 +1,64 @@
+const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
+  t /= d / 2;
+  if (t < 1) {
+    return (c / 2) * t * t + b;
+  }
+  t--;
+  return (-c / 2) * (t * (t - 2) - 1) + b;
+};
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+const requestAnimFrame = (() =>
+  window.requestAnimationFrame ||
+  (window as any).webkitRequestAnimationFrame ||
+  (window as any).mozRequestAnimationFrame ||
+  (callback => {
+    window.setTimeout(callback, 1000 / 60);
+  }))();
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+const move = (amount: number) => {
+  document.documentElement.scrollTop = amount;
+  (document.body.parentNode as HTMLElement).scrollTop = amount;
+  document.body.scrollTop = amount;
+};
+
+const position = () => {
+  return (
+    document.documentElement.scrollTop || (document.body.parentNode as HTMLElement).scrollTop || document.body.scrollTop
+  );
+};
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export const scrollTo = (to: number, duration: number, callback?: any) => {
+  const start = position();
+  const change = to - start;
+  const increment = 20;
+  let currentTime = 0;
+  duration = typeof duration === 'undefined' ? 500 : duration;
+  const animateScroll = () => {
+    // increment the time
+    currentTime += increment;
+    // find the value with the quadratic in-out easing function
+    const val = easeInOutQuad(currentTime, start, change, duration);
+    // move the document.body
+    move(val);
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll);
+    } else {
+      if (callback && typeof callback === 'function') {
+        // the animation is done so lets callback
+        callback();
+      }
+    }
+  };
+  animateScroll();
+};
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
new file mode 100644
index 0000000..3936248
--- /dev/null
+++ b/src/utils/theme.ts
@@ -0,0 +1,52 @@
+// 处理主题样式
+export const handleThemeStyle = (theme: string) => {
+  document.documentElement.style.setProperty('--el-color-primary', theme);
+  for (let i = 1; i <= 9; i++) {
+    document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(theme, i / 10)}`);
+  }
+  for (let i = 1; i <= 9; i++) {
+    document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(theme, i / 10)}`);
+  }
+};
+
+// hex颜色转rgb颜色
+export const hexToRgb = (str: string): string[] => {
+  str = str.replace('#', '');
+  const hexs = str.match(/../g);
+  for (let i = 0; i < 3; i++) {
+    if (hexs) {
+      hexs[i] = String(parseInt(hexs[i], 16));
+    }
+  }
+  return hexs ? hexs : [];
+};
+
+// rgb颜色转Hex颜色
+export const rgbToHex = (r: string, g: string, b: string) => {
+  const hexs = [Number(r).toString(16), Number(g).toString(16), Number(b).toString(16)];
+  for (let i = 0; i < 3; i++) {
+    if (hexs[i].length == 1) {
+      hexs[i] = `0${hexs[i]}`;
+    }
+  }
+  return `#${hexs.join('')}`;
+};
+
+// 变浅颜色值
+export const getLightColor = (color: string, level: number) => {
+  const rgb = hexToRgb(color);
+  for (let i = 0; i < 3; i++) {
+    const s = (255 - Number(rgb[i])) * level + Number(rgb[i]);
+    rgb[i] = String(Math.floor(s));
+  }
+  return rgbToHex(rgb[0], rgb[1], rgb[2]);
+};
+
+// 变深颜色值
+export const getDarkColor = (color: string, level: number) => {
+  const rgb = hexToRgb(color);
+  for (let i = 0; i < 3; i++) {
+    rgb[i] = String(Math.floor(Number(rgb[i]) * (1 - level)));
+  }
+  return rgbToHex(rgb[0], rgb[1], rgb[2]);
+};
diff --git a/src/utils/validate.ts b/src/utils/validate.ts
new file mode 100644
index 0000000..d673bfd
--- /dev/null
+++ b/src/utils/validate.ts
@@ -0,0 +1,109 @@
+/**
+ * 路径匹配器
+ * @param {string} pattern
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isPathMatch(pattern: string, path: string) {
+  const regexPattern = pattern
+    .replace(/([.+^${}()|[\]\\])/g, '\\$1')
+    .replace(/\*\*/g, '__DOUBLE_STAR__')
+    .replace(/\*/g, '[^/]*')
+    .replace(/\?/g, '[^/]')
+    .replace(/__DOUBLE_STAR__/g, '.*');
+  const regex = new RegExp(`^${regexPattern}$`);
+  return regex.test(path);
+}
+
+/**
+ * 判断url是否是http或https
+ * @returns {Boolean}
+ * @param url
+ */
+export const isHttp = (url: string): boolean => {
+  return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1;
+};
+
+/**
+ * 判断path是否为外链
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export const isExternal = (path: string) => {
+  return /^(https?:|mailto:|tel:)/.test(path);
+};
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export const validUsername = (str: string) => {
+  const valid_map = ['admin', 'editor'];
+  return valid_map.indexOf(str.trim()) >= 0;
+};
+
+/**
+ * @param {string} url
+ * @returns {Boolean}
+ */
+export const validURL = (url: string) => {
+  const reg =
+    /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
+  return reg.test(url);
+};
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export const validLowerCase = (str: string) => {
+  const reg = /^[a-z]+$/;
+  return reg.test(str);
+};
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export const validUpperCase = (str: string) => {
+  const reg = /^[A-Z]+$/;
+  return reg.test(str);
+};
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export const validAlphabets = (str: string) => {
+  const reg = /^[A-Za-z]+$/;
+  return reg.test(str);
+};
+
+/**
+ * @param {string} email
+ * @returns {Boolean}
+ */
+export const validEmail = (email: string) => {
+  const reg =
+    /^(([^<>()\]\\.,;:\s@"]+(\.[^<>()\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return reg.test(email);
+};
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export const isString = (str: any) => {
+  return typeof str === 'string' || str instanceof String;
+};
+
+/**
+ * @param {Array} arg
+ * @returns {Boolean}
+ */
+export const isArray = (arg: string | string[]) => {
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  }
+  return Array.isArray(arg);
+};
diff --git a/src/views/ai/chat/index.vue b/src/views/ai/chat/index.vue
new file mode 100644
index 0000000..07c8f7a
--- /dev/null
+++ b/src/views/ai/chat/index.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { registerCurrentSnailUser } from '@/api/ai/agent';
+import { getToken } from '@/utils/auth';
+
+defineOptions({ name: 'AiChatPage' });
+
+const chatUrl = ref('');
+const loadError = ref('');
+const loading = ref(false);
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+
+function buildChatUrl(openId: string, trustedCredential: string) {
+  const params = new URLSearchParams({ openId, trustedCredential });
+  return `${baseUrl}/snail-chat/?${params.toString()}`;
+}
+
+async function loadChat() {
+  loading.value = true;
+  loadError.value = '';
+  try {
+    const token = getToken();
+    if (!token) {
+      loadError.value = '登录凭证不存在，请重新登录后再试';
+      return;
+    }
+    const { data: user } = await registerCurrentSnailUser();
+    if (!user?.openId) {
+      loadError.value = '获取 AI 用户身份失败';
+      return;
+    }
+    chatUrl.value = buildChatUrl(user.openId, token);
+  } catch {
+    loadError.value = '加载 AI 聊天失败，请稍后重试';
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  loadChat();
+});
+</script>
+
+<template>
+  <div v-loading="loading" class="ai-chat-page">
+    <iframe v-if="chatUrl" class="chat-frame" :src="chatUrl" title="Snail AI" allow="clipboard-read; clipboard-write" />
+    <el-empty v-else class="chat-empty" :description="loadError || '正在加载 Snail AI'">
+      <el-button v-if="loadError" type="primary" @click="loadChat">重新加载</el-button>
+    </el-empty>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.ai-chat-page {
+  height: calc(100vh - 123px);
+  min-height: 0;
+  background: var(--el-bg-color-page);
+  border-radius: var(--app-radius-base);
+  overflow: hidden;
+}
+
+.chat-frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: var(--app-surface-bg);
+}
+
+.chat-empty {
+  height: 100%;
+  background: var(--app-surface-bg);
+}
+
+@media (max-width: 768px) {
+  .ai-chat-page {
+    height: calc(100vh - 88px);
+  }
+}
+</style>
diff --git a/src/views/demo/demo/index.vue b/src/views/demo/demo/index.vue
new file mode 100644
index 0000000..2d35d0e
--- /dev/null
+++ b/src/views/demo/demo/index.vue
@@ -0,0 +1,285 @@
+<template>
+  <div class="p-2 app-container demo-demo-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="key键" prop="testKey">
+            <el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="值" prop="value">
+            <el-input v-model="queryParams.value" placeholder="请输入值" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>测试单列表</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['demo:demo:add']" type="primary" plain icon="Plus" @click="handleAdd">
+              新增
+            </el-button>
+            <el-button
+              v-hasPermi="['demo:demo:edit']"
+              type="success"
+              plain
+              icon="Edit"
+              :disabled="single"
+              @click="handleUpdate()"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-hasPermi="['demo:demo:remove']"
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete()"
+            >
+              删除
+            </el-button>
+            <el-button v-hasPermi="['demo:demo:export']" type="warning" plain icon="Download" @click="handleExport">
+              导出
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        border
+        class="data-table"
+        :data="demoList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column v-if="true" label="主键" align="center" prop="id" />
+        <el-table-column label="部门id" align="center" prop="deptId" />
+        <el-table-column label="用户id" align="center" prop="userId" />
+        <el-table-column label="排序号" align="center" prop="orderNum" />
+        <el-table-column label="key键" align="center" prop="testKey" />
+        <el-table-column label="值" align="center" prop="value" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button
+                v-hasPermi="['demo:demo:edit']"
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                v-hasPermi="['demo:demo:remove']"
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </el-card>
+    <!-- 添加或修改测试单对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="demoFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="部门id" prop="deptId">
+          <el-input v-model="form.deptId" placeholder="请输入部门id" />
+        </el-form-item>
+        <el-form-item label="用户id" prop="userId">
+          <el-input v-model="form.userId" placeholder="请输入用户id" />
+        </el-form-item>
+        <el-form-item label="排序号" prop="orderNum">
+          <el-input v-model="form.orderNum" placeholder="请输入排序号" />
+        </el-form-item>
+        <el-form-item label="key键" prop="testKey">
+          <el-input v-model="form.testKey" placeholder="请输入key键" />
+        </el-form-item>
+        <el-form-item label="值" prop="value">
+          <el-input v-model="form.value" placeholder="请输入值" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Demo" lang="ts">
+import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
+import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import modal from '@/plugins/modal';
+import { download as requestDownload } from '@/utils/request';
+
+const demoList = ref<DemoVO[]>([]);
+const buttonLoading = ref(false);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const demoFormRef = ref<ElFormInstance>();
+
+const initFormData: DemoForm = {
+  id: undefined,
+  deptId: undefined,
+  userId: undefined,
+  orderNum: undefined,
+  testKey: undefined,
+  value: undefined
+};
+const data = reactive<PageData<DemoForm, DemoQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    deptId: undefined,
+    userId: undefined,
+    orderNum: undefined,
+    testKey: undefined,
+    value: undefined
+  },
+  rules: {
+    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
+    deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
+    userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
+    orderNum: [{ required: true, message: '排序号不能为空', trigger: 'blur' }],
+    testKey: [{ required: true, message: 'key键不能为空', trigger: 'blur' }],
+    value: [{ required: true, message: '值不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<DemoVO>(item => item.id);
+const {
+  dialog,
+  resetForm: reset,
+  openDialog,
+  showDialog,
+  closeDialog
+} = useFormDialog({
+  form,
+  formRef: demoFormRef,
+  initialFormData: initFormData
+});
+
+/** 查询测试单列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listDemo(queryParams.value);
+    demoList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  closeDialog();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  openDialog('添加测试单');
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: Partial<DemoVO>) => {
+  reset();
+  const demoId = row?.id || ids.value[0];
+  const res = await getDemo(demoId);
+  Object.assign(form.value, res.data);
+  showDialog('修改测试单');
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  demoFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateDemo(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addDemo(form.value).finally(() => (buttonLoading.value = false));
+      }
+      modal.msgSuccess('修改成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<DemoVO>) => {
+  const demoIds = row?.id || ids.value;
+  await modal.confirm('是否确认删除测试单编号为"' + demoIds + '"的数据项？');
+  await delDemo(demoIds);
+  modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    'demo/demo/export',
+    {
+      ...queryParams.value
+    },
+    `demo_${new Date().getTime()}.xlsx`
+  );
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
diff --git a/src/views/demo/tree/index.vue b/src/views/demo/tree/index.vue
new file mode 100644
index 0000000..f9f5e0d
--- /dev/null
+++ b/src/views/demo/tree/index.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="p-2 app-container demo-tree-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="树节点名" prop="treeName">
+            <el-input
+              v-model="queryParams.treeName"
+              placeholder="请输入树节点名"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>测试树列表</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['demo:tree:add']" type="primary" plain icon="Plus" @click="handleAdd()">
+              新增
+            </el-button>
+            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+      <el-table
+        ref="treeTableRef"
+        v-loading="loading"
+        class="data-table"
+        :data="treeList"
+        row-key="id"
+        border
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column label="父id" prop="parentId" />
+        <el-table-column label="部门id" align="center" prop="deptId" />
+        <el-table-column label="用户id" align="center" prop="userId" />
+        <el-table-column label="树节点名" align="center" prop="treeName" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button
+                v-hasPermi="['demo:tree:edit']"
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+              />
+            </el-tooltip>
+            <el-tooltip content="新增" placement="top">
+              <el-button v-hasPermi="['demo:tree:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                v-hasPermi="['demo:tree:remove']"
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+              />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <!-- 添加或修改测试树对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="treeFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="父id" prop="parentId">
+          <el-tree-select
+            v-model="form.parentId"
+            :data="treeOptions"
+            :props="{ value: 'id', label: 'treeName', children: 'children' } as any"
+            value-key="id"
+            placeholder="请选择父id"
+            check-strictly
+          />
+        </el-form-item>
+        <el-form-item label="部门id" prop="deptId">
+          <el-input v-model="form.deptId" placeholder="请输入部门id" />
+        </el-form-item>
+        <el-form-item label="用户id" prop="userId">
+          <el-input v-model="form.userId" placeholder="请输入用户id" />
+        </el-form-item>
+        <el-form-item label="值" prop="treeName">
+          <el-input v-model="form.treeName" placeholder="请输入值" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Tree" lang="ts">
+import { listTree, getTree, delTree, addTree, updateTree } from '@/api/demo/tree';
+import { TreeVO, TreeQuery, TreeForm } from '@/api/demo/tree/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTreeTableExpand } from '@/hooks/tree/useTreeTableExpand';
+import modal from '@/plugins/modal';
+import { handleTree } from '@/utils/ruoyi';
+
+type TreeOption = {
+  id: number;
+  treeName: string;
+  children?: TreeOption[];
+};
+
+const treeList = ref<TreeVO[]>([]);
+const treeOptions = ref<TreeOption[]>([]);
+const buttonLoading = ref(false);
+const { showSearch } = useSearchToggle();
+const { loading, setLoading, withLoading } = useLoading();
+
+const queryFormRef = ref<ElFormInstance>();
+const treeFormRef = ref<ElFormInstance>();
+const treeTableRef = ref<ElTableInstance>();
+const { isExpandAll, handleToggleExpandAll } = useTreeTableExpand<TreeVO>({
+  tableRef: treeTableRef,
+  data: treeList
+});
+
+const initFormData: TreeForm = {
+  id: undefined,
+  parentId: undefined,
+  deptId: undefined,
+  userId: undefined,
+  treeName: undefined
+};
+
+const data = reactive<PageData<TreeForm, TreeQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    parentId: undefined,
+    deptId: undefined,
+    userId: undefined,
+    treeName: undefined
+  },
+  rules: {
+    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
+    parentId: [{ required: true, message: '父id不能为空', trigger: 'blur' }],
+    deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
+    userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
+    treeName: [{ required: true, message: '值不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const {
+  dialog,
+  resetForm: reset,
+  openDialog,
+  showDialog,
+  closeDialog
+} = useFormDialog({
+  form,
+  formRef: treeFormRef,
+  initialFormData: initFormData
+});
+
+/** 查询测试树列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listTree(queryParams.value);
+    const data = handleTree<TreeVO>(res.data, 'id', 'parentId');
+    if (data) {
+      treeList.value = data;
+    }
+  });
+};
+
+/** 查询测试树下拉树结构 */
+const getTreeselect = async () => {
+  const res = await listTree();
+  treeOptions.value = [];
+  const data: TreeOption = { id: 0, treeName: '顶级节点', children: [] };
+  data.children = handleTree<TreeOption>(res.data, 'id', 'parentId');
+  treeOptions.value.push(data);
+};
+
+// 取消按钮
+const cancel = () => {
+  reset();
+  closeDialog();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 新增按钮操作 */
+const handleAdd = (row?: Partial<TreeVO>) => {
+  openDialog('添加测试树');
+  getTreeselect();
+  if (row && row.id) {
+    form.value.parentId = row.id;
+  } else {
+    form.value.parentId = 0;
+  }
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row: Partial<TreeVO>) => {
+  reset();
+  await getTreeselect();
+  if (row) {
+    form.value.parentId = row.id;
+  }
+  const res = await getTree(row.id);
+  Object.assign(form.value, res.data);
+  showDialog('修改测试树');
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  treeFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateTree(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addTree(form.value).finally(() => (buttonLoading.value = false));
+      }
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row: Partial<TreeVO>) => {
+  await modal.confirm('是否确认删除测试树编号为"' + row.id + '"的数据项？');
+  setLoading(true);
+  await delTree(row.id).finally(() => setLoading(false));
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
diff --git a/src/views/error/401.vue b/src/views/error/401.vue
new file mode 100644
index 0000000..64e79ac
--- /dev/null
+++ b/src/views/error/401.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="errPage-container">
+    <el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
+    <el-row>
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous">401错误!</h1>
+        <h2>您没有访问权限！</h2>
+        <h6>对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面</h6>
+        <ul class="list-unstyled">
+          <li class="link-type">
+            <router-link to="/">回首页</router-link>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream." />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router';
+import errImage from '@/assets/401_images/401.gif';
+
+const route = useRoute();
+const router = useRouter();
+
+const errGif = ref(errImage + '?' + +new Date());
+
+function back() {
+  if (route.query.noGoBack) {
+    router.push({ path: '/' });
+  } else {
+    router.go(-1);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.errPage-container {
+  width: 800px;
+  max-width: 100%;
+  margin: 100px auto;
+  .pan-back-btn {
+    background: #008489;
+    color: #fff;
+    border: none !important;
+  }
+  .pan-gif {
+    margin: 0 auto;
+    display: block;
+  }
+  .pan-img {
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+  }
+  .text-jumbo {
+    font-size: 60px;
+    font-weight: 700;
+    color: #484848;
+  }
+  .list-unstyled {
+    font-size: 14px;
+    li {
+      padding-bottom: 5px;
+    }
+    a {
+      color: #008489;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
new file mode 100644
index 0000000..f0526f4
--- /dev/null
+++ b/src/views/error/404.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404" />
+        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404" />
+        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404" />
+        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404" />
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">404错误!</div>
+        <div class="bullshit__headline">
+          {{ message }}
+        </div>
+        <div class="bullshit__info">
+          对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
+        </div>
+        <router-link to="/index" class="bullshit__return-home">返回首页</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const message = computed(() => {
+  return '找不到网页！';
+});
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404-container {
+  transform: translate(-50%, -50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
new file mode 100644
index 0000000..7934314
--- /dev/null
+++ b/src/views/index.vue
@@ -0,0 +1,370 @@
+<template>
+  <div class="home">
+    <section class="hero-panel">
+      <div class="hero-copy">
+        <h1>RuoYi-Vue-Plus 控制台</h1>
+        <p>
+          企业级后台管理系统 重写 RuoYi-Vue 所有功能 集成 Sa-Token、Mybatis-Plus、WarmFlow、SpringDoc、Hutool、OSS
+          等组件
+        </p>
+        <div class="hero-actions">
+          <el-button type="primary" @click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus')">查看源码</el-button>
+          <el-button plain @click="goTarget('https://plus-doc.dromara.org/#/ruoyi-vue-plus/changlog')">
+            更新日志
+          </el-button>
+        </div>
+      </div>
+    </section>
+
+    <div class="content-grid">
+      <section class="section-card">
+        <div class="section-head">
+          <div>
+            <h2>项目矩阵</h2>
+          </div>
+        </div>
+        <div class="product-list">
+          <article v-for="product in products" :key="product.name" class="product-card">
+            <div class="product-top">
+              <div>
+                <h3>{{ product.name }}</h3>
+                <p>{{ product.summary }}</p>
+              </div>
+              <span class="product-version">{{ product.version }}</span>
+            </div>
+            <div class="product-tags">
+              <el-tag v-for="tag in product.tags" :key="tag" effect="plain">{{ tag }}</el-tag>
+            </div>
+            <div class="product-actions">
+              <el-button type="primary" plain @click="goTarget(product.primaryUrl)">
+                {{ product.primaryLabel }}
+              </el-button>
+              <el-button plain @click="goTarget(product.secondaryUrl)">{{ product.secondaryLabel }}</el-button>
+            </div>
+          </article>
+        </div>
+      </section>
+
+      <section class="section-card capability-card">
+        <div class="section-head">
+          <div>
+            <h2>能力地图</h2>
+          </div>
+        </div>
+        <div class="capability-groups">
+          <article v-for="group in capabilityGroups" :key="group.title" class="capability-group">
+            <h3>{{ group.title }}</h3>
+            <ul>
+              <li v-for="item in group.items" :key="item">{{ item }}</li>
+            </ul>
+          </article>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup name="Index" lang="ts">
+const products = [
+  {
+    name: 'RuoYi-Vue-Plus',
+    version: 'v6.0.0',
+    summary: '面向分布式集群场景的后台管理系统，保持现有业务接口与权限逻辑，适合先完成前端壳升级。',
+    tags: ['Vue 3', 'Element Plus', 'Spring Boot', 'Sa-Token'],
+    primaryLabel: '访问 GitHub',
+    primaryUrl: 'https://github.com/dromara/RuoYi-Vue-Plus',
+    secondaryLabel: '查看更新日志',
+    secondaryUrl: 'https://plus-doc.dromara.org/#/ruoyi-vue-plus/changlog'
+  },
+  {
+    name: 'RuoYi-Cloud-Plus',
+    version: 'v6.0.0',
+    summary: '微服务通用权限管理系统，适合更复杂的服务治理场景，也可以沿用同样的前端升级思路。',
+    tags: ['Spring Cloud', 'Gateway', 'Nacos', 'Dubbo'],
+    primaryLabel: '访问 GitHub',
+    primaryUrl: 'https://github.com/dromara/RuoYi-Cloud-Plus',
+    secondaryLabel: '查看更新日志',
+    secondaryUrl: 'https://plus-doc.dromara.org/#/ruoyi-cloud-plus/changlog'
+  }
+];
+
+const capabilityGroups = [
+  {
+    title: '后端基建',
+    items: ['Spring Boot / Spring Cloud', 'Sa-Token 认证与权限', 'MySQL / Redis', '代码生成器']
+  },
+  {
+    title: '平台能力',
+    items: ['动态菜单与按钮权限', '监控、日志、在线用户', '任务调度与工作流', '文件存储与多云适配']
+  },
+  {
+    title: '前端方向',
+    items: ['UI 卡片化', '主题与布局统一', '通用页面容器规范化', '企业化布局']
+  }
+];
+
+const goTarget = (url: string) => {
+  window.open(url, '__blank');
+};
+</script>
+
+<style lang="scss" scoped>
+.home {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.hero-panel,
+.section-card {
+  border-radius: 28px;
+  border: 1px solid var(--app-surface-border);
+  background: var(--app-surface-bg);
+  box-shadow: var(--app-shadow-sm);
+  backdrop-filter: blur(18px);
+}
+
+.hero-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
+  gap: 18px;
+  padding: 30px;
+  background: radial-gradient(circle at top left, rgba(53, 109, 255, 0.16), transparent 30%), var(--app-surface-bg);
+}
+
+.hero-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+
+  h1 {
+    margin: 0;
+    font-size: clamp(30px, 4vw, 46px);
+    line-height: 1.06;
+    letter-spacing: -0.04em;
+    color: var(--app-text-title);
+  }
+
+  p {
+    margin: 0;
+    max-width: 760px;
+    color: var(--app-text-muted);
+    font-size: 15px;
+    line-height: 1.8;
+  }
+}
+
+.hero-badge {
+  display: inline-flex;
+  width: fit-content;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: rgba(53, 109, 255, 0.12);
+  color: var(--app-accent-strong);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.hero-stats {
+  display: grid;
+  gap: 12px;
+}
+
+.stat-card {
+  padding: 18px 20px;
+  border-radius: 22px;
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  strong {
+    color: var(--app-text-title);
+    font-size: 24px;
+    letter-spacing: -0.03em;
+  }
+
+  span {
+    color: var(--app-text-muted);
+    font-size: 13px;
+  }
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
+  gap: 20px;
+}
+
+.section-card {
+  padding: 24px;
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 18px;
+
+  h2 {
+    margin: 6px 0 0;
+    color: var(--app-text-title);
+    font-size: 26px;
+    letter-spacing: -0.03em;
+  }
+}
+
+.section-kicker {
+  color: var(--app-text-muted);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.product-list,
+.capability-groups {
+  display: grid;
+  gap: 16px;
+}
+
+.product-card {
+  padding: 22px;
+  border-radius: 24px;
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
+  transition:
+    transform 0.25s ease,
+    box-shadow 0.25s ease,
+    border-color 0.25s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--app-shadow-sm);
+    border-color: rgba(53, 109, 255, 0.2);
+  }
+}
+
+.product-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+
+  h3 {
+    margin: 0 0 8px;
+    color: var(--app-text-title);
+    font-size: 22px;
+    letter-spacing: -0.03em;
+  }
+
+  p {
+    margin: 0;
+    color: var(--app-text-muted);
+    line-height: 1.8;
+  }
+}
+
+.product-version {
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(53, 109, 255, 0.12);
+  color: var(--app-accent-strong);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.product-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 18px;
+}
+
+.product-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.capability-card {
+  background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 28%), var(--app-surface-bg);
+}
+
+.capability-group {
+  padding: 18px 18px 18px 20px;
+  border-radius: 22px;
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
+
+  h3 {
+    margin: 0 0 12px;
+    color: var(--app-text-title);
+    font-size: 18px;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    gap: 10px;
+  }
+
+  li {
+    position: relative;
+    padding-left: 16px;
+    color: var(--app-text-muted);
+    line-height: 1.7;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 10px;
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: var(--app-accent-strong);
+      box-shadow: 0 0 0 5px rgba(53, 109, 255, 0.12);
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  .hero-panel,
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .hero-panel,
+  .section-card {
+    padding: 20px;
+    border-radius: 22px;
+  }
+
+  .product-top {
+    flex-direction: column;
+  }
+}
+
+html.dark {
+  .hero-panel {
+    background: radial-gradient(circle at top left, rgba(53, 109, 255, 0.18), transparent 30%), var(--app-surface-bg);
+  }
+}
+</style>
diff --git a/src/views/login.vue b/src/views/login.vue
new file mode 100644
index 0000000..343934e
--- /dev/null
+++ b/src/views/login.vue
@@ -0,0 +1,746 @@
+<template>
+  <div class="login">
+    <div class="login-shell">
+      <section class="login-brand">
+        <div class="logo-box">
+          <div class="logo">智</div>
+          <div class="logo_info">
+            <div class="title">虫子智家</div>
+            <div class="subTitle">智能家居管理平台</div>
+          </div>
+        </div>
+        <h1 class="brand-title">一站式智能家居</h1>
+        <h2 class="brand-title">设备管理平台</h2>
+        <div class="brand-desc">
+          统一管理设备、实时监测空气与能耗数据，为家庭与商用空间构建更安心、更高效的呼吸环境。
+        </div>
+        <div class="brand-highlights">
+          <div class="devices online-devices">
+            <div class="data">12,860</div>
+            <div class="label">在线设备（台）</div>
+          </div>
+          <div class="line"></div>
+          <div class="devices rate-online-devices">
+            <div class="data">98.6%</div>
+            <div class="label">设备在线率</div>
+          </div>
+          <div class="line"></div>
+          <div class="devices realtime">
+            <div class="data">7x24</div>
+            <div class="label">实时监测</div>
+          </div>
+        </div>
+        <div class="brand-metrics">
+          <div class="nav">
+            <div class="label">近 7 天空气质量达标率</div>
+            <div class="unit">单位：%</div>
+          </div>
+          <div class="brand-metrics_list">
+            <article
+              v-for="item in quickStats"
+              :key="item.label"
+              :style="{
+                height: item.rate + '%',
+                flex: 1,
+              }"
+            >
+              <div
+                class="metric-card"
+                :class="{
+                  active: item.isActivcty,
+                }"
+              ></div>
+              <div>
+                周{{
+                  new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(
+                    item.formatlday + 1,
+                  )
+                }}
+                <span style="font-size: 12px"
+                  >({{ item.month }}.{{ item.date }})</span
+                >
+              </div>
+            </article>
+          </div>
+        </div>
+        <div class="null"></div>
+        <div class="brand-footer">
+          <span>© 2025 智净云科技有限公司</span>
+          <span style="margin-left: 24px">京ICP备 2025001234 号 </span>
+        </div>
+      </section>
+      <section class="login_box">
+        <el-form
+          ref="loginRef"
+          :model="loginForm"
+          :rules="loginRules"
+          class="login-form"
+        >
+          <div class="title-box">
+            <div>
+              <h3 class="title">欢迎回来</h3>
+              <p class="subtitle">登录{{ title }}</p>
+            </div>
+            <!-- <lang-select /> -->
+          </div>
+          <div class="loginModel">
+            <span>账号登录</span>
+          </div>
+          <el-form-item prop="username" label-position="top" label="管理员账号">
+            <el-input
+              v-model="loginForm.username"
+              type="text"
+              size="large"
+              auto-complete="off"
+              :placeholder="$t('login.username')"
+            >
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="登录密码" label-position="top" prop="password">
+            <div class="pwd_box">
+              <el-input
+                v-model="loginForm.password"
+                :type="isShowPwd ? 'text' : 'password'"
+                size="large"
+                auto-complete="off"
+                :placeholder="$t('login.password')"
+                @keyup.enter="handleLogin"
+              >
+                <template #suffix>
+                  <!-- 点击取反布尔值 -->
+                  <span class="actions" @click="handleChangePwdShow">
+                    {{ isShowPwd ? "隐藏" : "显示" }}</span
+                  >
+                </template>
+              </el-input>
+            </div>
+          </el-form-item>
+          <!-- <el-form-item v-if="captchaEnabled" prop="code" class="captcha-row">
+            <el-input
+              v-model="loginForm.code"
+              size="large"
+              auto-complete="off"
+              :placeholder="$t('login.code')"
+              @keyup.enter="handleLogin"
+            >
+              <template #prefix
+                ><svg-icon
+                  icon-class="validCode"
+                  class="el-input__icon input-icon"
+              /></template>
+            </el-input>
+            <div class="login-code">
+              <img :src="codeUrl" class="login-code-img" @click="getCode" />
+            </div>
+          </el-form-item> -->
+          <div class="form-meta">
+            <el-checkbox v-model="loginForm.rememberMe">{{
+              $t("login.rememberPassword")
+            }}</el-checkbox>
+            <router-link v-if="register" class="link-type" :to="'/register'">
+              {{ $t("login.switchRegisterPage") }}
+            </router-link>
+          </div>
+          <el-form-item class="submit-row">
+            <el-button
+              :loading="loading"
+              size="large"
+              type="primary"
+              class="submit-button"
+              @click.prevent="handleLogin"
+            >
+              <span v-if="!loading">{{ $t("login.login") }}</span>
+              <span v-else>{{ $t("login.logging") }}</span>
+            </el-button>
+            <p class="tip">如需开通管理员账号，请联系系统管理员</p>
+          </el-form-item>
+        </el-form>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { to } from "await-to-js";
+import { GeoResult, getCurrentPosition } from "@/utils/geolocation";
+import { useI18n } from "vue-i18n";
+import { getCodeImg } from "@/api/login";
+import { LoginData } from "@/api/types";
+import { useUserStore } from "@/store/modules/user";
+
+const title = import.meta.env.VITE_APP_TITLE;
+const quickStats = ref([]);
+const userStore = useUserStore();
+const router = useRouter();
+const { t } = useI18n();
+
+const loginForm = ref<LoginData>({
+  username: "admin",
+  password: "admin123",
+  rememberMe: false,
+  code: "",
+  uuid: "",
+} as LoginData);
+
+const loginRules: ElFormRules = {
+  username: [
+    {
+      required: true,
+      trigger: "blur",
+      message: t("login.rule.username.required"),
+    },
+  ],
+  password: [
+    {
+      required: true,
+      trigger: "blur",
+      message: t("login.rule.password.required"),
+    },
+  ],
+  code: [
+    {
+      required: true,
+      trigger: "change",
+      message: t("login.rule.code.required"),
+    },
+  ],
+};
+
+const codeUrl = ref("");
+const loading = ref(false);
+const captchaEnabled = ref(true);
+const register = ref(false);
+const redirect = ref("/");
+const loginRef = ref<ElFormInstance>();
+
+watch(
+  () => router.currentRoute.value,
+  (newRoute: any) => {
+    redirect.value =
+      newRoute.query &&
+      newRoute.query.redirect &&
+      decodeURIComponent(newRoute.query.redirect);
+  },
+  { immediate: true },
+);
+
+const isShowPwd = ref(false);
+const handleChangePwdShow = () => {
+  isShowPwd.value = !isShowPwd.value;
+};
+
+const handleLogin = () => {
+  loginRef.value?.validate(async (valid: boolean, fields: any) => {
+    if (valid) {
+      loading.value = true;
+      if (loginForm.value.rememberMe) {
+        localStorage.setItem("username", String(loginForm.value.username));
+        localStorage.setItem("rememberMe", String(loginForm.value.rememberMe));
+      } else {
+        localStorage.removeItem("username");
+        localStorage.removeItem("rememberMe");
+      }
+      localStorage.removeItem("password");
+      const [err] = await to(userStore.login(loginForm.value));
+      if (!err) {
+        const redirectUrl = redirect.value || "/";
+        await router.push(redirectUrl);
+        loading.value = false;
+      } else {
+        loading.value = false;
+        if (captchaEnabled.value) {
+          await getCode();
+        }
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+const getCode = async () => {
+  const res = await getCodeImg();
+  const { data } = res;
+  captchaEnabled.value =
+    data.captchaEnabled === undefined ? true : data.captchaEnabled;
+  if (captchaEnabled.value) {
+    loginForm.value.code = "";
+    codeUrl.value = "data:image/gif;base64," + data.img;
+    loginForm.value.uuid = data.uuid;
+  }
+};
+
+const getLoginData = () => {
+  const username = localStorage.getItem("username");
+  const rememberMe = localStorage.getItem("rememberMe");
+  localStorage.removeItem("password");
+  loginForm.value = {
+    username: username === null ? String(loginForm.value.username) : username,
+    password: username === null ? String(loginForm.value.password) : "",
+    rememberMe: rememberMe === "true",
+  } as LoginData;
+};
+
+const handleGetLoc = async () => {
+  try {
+    const loc: GeoResult = await getCurrentPosition();
+    console.log("定位", loc.lat, loc.lng, loc.accuracy);
+    fetch(
+      `https://api.waqi.info/feed/geo:${loc.lat};${loc.lng}?token=eb1ad8d6ec4f8103247ee985174ae0d97d1bf4b4`,
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        const arr = res.data.forecast.daily.pm10 ?? [];
+        console.log(arr.slice(0, 7));
+        const list = handleMaxWaqi(arr.slice(0, 7));
+        quickStats.value = list;
+        console.log(list);
+      });
+  } catch (e) {
+    console.error((e as Error).message);
+  }
+};
+
+function handleMaxWaqi(arr: { avg: number; day: string }[]) {
+  const maxVal = Math.max(...arr.map((item) => item.avg));
+  const nowDate = new Date();
+  return arr.map((item) => {
+    const rate = parseFloat(((item.avg / maxVal) * 100).toFixed(2));
+    const newDate = new Date(item.day);
+    return {
+      ...item,
+      rate,
+      month: newDate.getMonth() + 1,
+      formatlday: newDate.getDay(),
+      date: newDate.getDate(),
+      isActivcty: newDate.getDate() === nowDate.getDate(),
+    };
+  });
+}
+
+onMounted(() => {
+  getCode();
+  getLoginData();
+  handleGetLoc();
+});
+</script>
+
+<style lang="scss" scoped>
+.login {
+  min-height: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(29, 78, 216, 1);
+  box-sizing: border-box;
+}
+
+.login-shell {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.login-brand {
+  width: 55%;
+  height: 100%;
+  color: #fff;
+  box-sizing: border-box;
+  padding: 60px 80px;
+  display: flex;
+  flex-direction: column;
+  .logo-box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 160px;
+    .logo {
+      width: 48px;
+      height: 48px;
+      border-radius: 16px 16px 16px 16px;
+      background-color: rgba(255, 255, 255, 1);
+      margin-right: 16px;
+      color: rgba(29, 78, 216, 1);
+      text-align: center;
+      line-height: 48px;
+    }
+    .logo_info {
+      .title {
+        height: 28px;
+        line-height: 28px;
+        border-radius: 0px 0px 0px 0px;
+        background-color: rgba(0, 0, 0, 0);
+        color: rgba(255, 255, 255, 1);
+        font-size: 20px;
+      }
+      .subTitle {
+        height: 18px;
+        line-height: 18px;
+        border-radius: 0px 0px 0px 0px;
+        background-color: rgba(0, 0, 0, 0);
+        color: rgba(255, 255, 255, 0.722);
+        font-size: 13px;
+      }
+    }
+  }
+
+  h1.brand-title,
+  h2.brand-title {
+    height: 62px;
+    line-height: 62px;
+    margin: 22px 0 14px;
+    font-size: clamp(34px, 4vw, 52px);
+    letter-spacing: -0.03em;
+  }
+  h2.brand-title {
+    font-size: clamp(28px, 4vw, 46px);
+  }
+
+  .brand-desc {
+    color: rgba(226, 232, 240, 0.88);
+    font-size: 15px;
+    line-height: 1.8;
+    margin-top: 20px;
+    margin-bottom: 40px;
+  }
+
+  .brand-highlights {
+    width: min(400px, 100%);
+    display: grid;
+    grid-template-columns: 1fr 96px 1fr 96px 1fr;
+    justify-items: center;
+    min-height: 60px;
+    margin-bottom: 40px;
+    .devices {
+      .data {
+        height: 38px;
+        line-height: 38px;
+        font-size: 30px;
+      }
+      .label {
+        height: 18px;
+        line-height: 18px;
+        color: rgba(255, 255, 255, 0.722);
+        font-size: 13px;
+      }
+    }
+    .line {
+      width: 1px;
+      background-color: rgba(255, 255, 255, 0.24);
+      height: 80%;
+    }
+  }
+
+  .brand-metrics {
+    width: min(800px, 100%);
+    min-height: 248px;
+    border-radius: 16px 16px 16px 16px;
+    background-color: rgba(255, 255, 255, 0.1);
+    box-sizing: border-box;
+    padding: 15px 20px;
+    .nav {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .brand-metrics_list {
+      margin-top: 48px;
+      display: flex;
+      align-items: end;
+      gap: 16px;
+      height: 105px;
+      .metric-card {
+        border-radius: 8px 8px 0px 0px;
+        background-color: rgba(255, 255, 255, 0.3);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        &.active {
+          background-color: rgba(255, 255, 255, 0.6);
+        }
+        span {
+          color: rgba(226, 232, 240, 0.72);
+          font-size: 13px;
+        }
+      }
+    }
+  }
+
+  .null {
+    flex: 1;
+  }
+
+  .brand-footer {
+    margin-top: 157px;
+    line-height: 16px;
+    border-radius: 0px 0px 0px 0px;
+    background-color: rgba(0, 0, 0, 0);
+    color: rgba(255, 255, 255, 0.502);
+    font-size: 13px;
+    text-align: left;
+  }
+}
+
+.login_box {
+  flex: 1;
+  background-color: rgba(245, 247, 251, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .login-form {
+    width: 480px;
+    height: 600px;
+    border-radius: 20px 20px 20px 20px;
+    background-color: rgba(255, 255, 255, 1);
+    box-sizing: border-box;
+    padding: 48px;
+
+    .title-box {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 28px;
+
+      .eyebrow {
+        margin: 0 0 8px;
+        color: var(--app-accent-strong);
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .title {
+        margin: 0;
+        color: var(--app-text-title);
+        font-weight: 700;
+        font-size: 30px;
+        letter-spacing: -0.03em;
+      }
+
+      .subtitle {
+        margin: 8px 0 0;
+        color: var(--app-text-muted);
+        font-size: 14px;
+        line-height: 1.7;
+      }
+
+      :deep(.lang-select--style) {
+        line-height: 0;
+        color: var(--app-text-muted);
+        padding: 10px;
+        border-radius: 14px;
+        background: var(--app-elevated-soft-bg);
+        border: 1px solid var(--app-surface-border);
+      }
+    }
+    .loginModel {
+      height: 22px;
+      line-height: 22px;
+      border-radius: 0px 0px 0px 0px;
+      background-color: rgba(0, 0, 0, 0);
+      color: rgba(37, 99, 235, 1);
+      font-size: 15px;
+      text-align: left;
+      margin-top: 28px;
+      margin-bottom: 40px;
+    }
+
+    .pwd_box {
+      width: 100%;
+      display: flex;
+      height: 48px;
+      line-height: 48px;
+      border-radius: 12px 12px 12px 12px;
+      background-color: rgba(247, 248, 250, 1);
+      border: 1px solid rgba(238, 240, 243, 1);
+      .actions {
+        color: rgba(37, 99, 235, 1);
+      }
+    }
+  }
+}
+
+.login-form .el-input {
+  height: 48px;
+}
+
+.login-form .input-icon {
+  height: 46px;
+  width: 14px;
+  margin-left: 0;
+}
+
+.captcha-row {
+  :deep(.el-form-item__content) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 122px;
+    gap: 12px;
+  }
+}
+
+.form-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: -2px 0 18px;
+}
+
+.social-panel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 16px;
+  margin-bottom: 22px;
+  border-radius: 20px;
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
+}
+
+.social-label {
+  color: var(--app-text-muted);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.social-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.submit-row {
+  margin-bottom: 0;
+}
+
+.submit-button {
+  width: 100%;
+  height: 50px;
+  background-color: rgba(37, 99, 235, 1);
+  border-radius: 12px;
+  box-shadow: 0 18px 34px rgba(53, 109, 255, 0.22);
+}
+.tip {
+  background-color: rgba(0, 0, 0, 0);
+  color: rgba(156, 163, 175, 1);
+  font-size: 12px;
+  text-align: left;
+  line-height: 18px;
+}
+
+.login-form :deep(.el-input__wrapper) {
+  min-height: 48px;
+  background-color: var(--el-bg-color);
+  background-color: rgba(247, 248, 250, 1);
+  box-shadow: 0 0 0 1px var(--app-surface-border) inset;
+}
+
+.login-form :deep(.el-input__wrapper.is-focus) {
+  box-shadow:
+    0 0 0 1px rgba(53, 109, 255, 0.24) inset,
+    0 0 0 4px rgba(53, 109, 255, 0.12);
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.login-form :deep(.el-checkbox__label) {
+  color: var(--app-text-muted);
+}
+
+.login-form :deep(.el-button.is-circle) {
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
+  color: var(--app-text-muted);
+}
+
+.login-form :deep(.el-button.is-circle:hover) {
+  background: rgba(53, 109, 255, 0.12);
+  border-color: rgba(53, 109, 255, 0.2);
+  color: var(--app-accent-strong);
+}
+
+.login-code {
+  height: 48px;
+  box-sizing: border-box;
+  border-radius: 16px;
+  overflow: hidden;
+  background: var(--el-bg-color);
+  border: 1px solid var(--app-surface-border);
+
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: rgba(226, 232, 240, 0.68);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+}
+
+.login-code-img {
+  height: 48px;
+  padding-left: 0;
+}
+
+@media (max-width: 1100px) {
+  .login {
+    padding: 24px 14px 80px;
+  }
+
+  .login-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .login-brand {
+    padding: 28px 24px;
+  }
+
+  .brand-metrics {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 850px) {
+  .login-brand {
+    display: none;
+  }
+
+  .login-form {
+    padding: 26px 18px 20px;
+  }
+
+  .title-box {
+    flex-direction: column;
+  }
+
+  .social-panel {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .social-actions {
+    justify-content: flex-start;
+  }
+
+  .captcha-row :deep(.el-form-item__content) {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/views/monitor/admin/index.vue b/src/views/monitor/admin/index.vue
new file mode 100644
index 0000000..141ad0d
--- /dev/null
+++ b/src/views/monitor/admin/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="p-2 app-container iframe-page">
+    <div class="iframe-page__inner">
+      <i-frame v-model:src="url"></i-frame>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const url = ref(import.meta.env.VITE_APP_MONITOR_ADMIN);
+</script>
+
+<style lang="scss" scoped>
+.iframe-page__inner {
+  overflow: hidden;
+  border-radius: 14px;
+  background: var(--app-surface-bg);
+  box-shadow: var(--app-shadow-sm);
+}
+</style>
diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
new file mode 100644
index 0000000..231387e
--- /dev/null
+++ b/src/views/monitor/cache/index.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="p-2 app-container monitor-cache-page">
+    <el-row :gutter="12" class="cache-grid">
+      <el-col :span="24">
+        <el-card shadow="hover" class="table-panel">
+          <template #header>
+            <div class="toolbar-shell">
+              <div class="table-heading">
+                <h3>缓存概览</h3>
+                <p>Redis 运行状态、资源消耗与实时统计。</p>
+              </div>
+            </div>
+          </template>
+
+          <div class="el-table el-table--enable-row-hover el-table--medium cache-table">
+            <table style="width: 100%">
+              <tbody>
+                <tr>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">Redis版本</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.info" class="cell">{{ cache.info.redis_version }}</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">运行模式</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.info" class="cell">
+                      {{ cache.info.redis_mode === 'standalone' ? '单机' : '集群' }}
+                    </div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">端口</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.info" class="cell">{{ cache.info.tcp_port }}</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">客户端数</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.info" class="cell">{{ cache.info.connected_clients }}</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">运行时间(天)</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.info" class="cell">{{ cache.info.uptime_in_days }}</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">使用内存</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.info" class="cell">{{ cache.info.used_memory_human }}</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">使用CPU</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.info" class="cell">
+                      {{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}
+                    </div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">内存配置</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.info" class="cell">{{ cache.info.maxmemory_human }}</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">AOF是否开启</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.info" class="cell">
+                      {{ cache.info.aof_enabled === '0' ? '否' : '是' }}
+                    </div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">RDB是否成功</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.info" class="cell">
+                      {{ cache.info.rdb_last_bgsave_status }}
+                    </div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">Key数量</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.dbSize" class="cell">{{ cache.dbSize }}</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div class="cell">网络入口/出口</div>
+                  </td>
+                  <td class="el-table__cell is-leaf">
+                    <div v-if="cache.info" class="cell">
+                      {{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :xs="24" :lg="12">
+        <el-card shadow="hover" class="table-panel">
+          <template #header>
+            <div class="toolbar-shell">
+              <div class="table-heading">
+                <h3>命令统计</h3>
+              </div>
+            </div>
+          </template>
+          <div class="el-table el-table--enable-row-hover el-table--medium cache-chart">
+            <div ref="commandstats" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :xs="24" :lg="12">
+        <el-card shadow="hover" class="table-panel">
+          <template #header>
+            <div class="toolbar-shell">
+              <div class="table-heading">
+                <h3>内存信息</h3>
+              </div>
+            </div>
+          </template>
+          <div class="el-table el-table--enable-row-hover el-table--medium cache-chart">
+            <div ref="usedmemory" style="height: 420px" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup name="Cache" lang="ts">
+import * as echarts from 'echarts';
+import { getCache } from '@/api/monitor/cache';
+import { CacheVO } from '@/api/monitor/cache/types';
+import modal from '@/plugins/modal';
+
+const cache = ref<Partial<CacheVO>>({});
+const commandstats = ref();
+const usedmemory = ref();
+let commandstatsInstance: echarts.ECharts | undefined;
+let usedmemoryInstance: echarts.ECharts | undefined;
+
+const handleResize = () => {
+  commandstatsInstance?.resize();
+  usedmemoryInstance?.resize();
+};
+
+const disposeCharts = () => {
+  commandstatsInstance?.dispose();
+  usedmemoryInstance?.dispose();
+  commandstatsInstance = undefined;
+  usedmemoryInstance = undefined;
+};
+
+const getList = async () => {
+  modal.loading('正在加载缓存监控数据，请稍候！');
+  try {
+    const res = await getCache();
+    cache.value = res.data;
+    disposeCharts();
+    commandstatsInstance = echarts.init(commandstats.value, 'macarons');
+    commandstatsInstance.setOption({
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c} ({d}%)'
+      },
+      series: [
+        {
+          name: '命令',
+          type: 'pie',
+          roseType: 'radius',
+          radius: [15, 95],
+          center: ['50%', '38%'],
+          data: res.data.commandStats,
+          animationEasing: 'cubicInOut',
+          animationDuration: 1000
+        }
+      ]
+    });
+    usedmemoryInstance = echarts.init(usedmemory.value, 'macarons');
+    usedmemoryInstance.setOption({
+      tooltip: {
+        formatter: '{b} <br/>{a} : ' + cache.value.info.used_memory_human
+      },
+      series: [
+        {
+          name: '峰值',
+          type: 'gauge',
+          min: 0,
+          max: 1000,
+          detail: {
+            formatter: cache.value.info.used_memory_human
+          },
+          data: [
+            {
+              value: parseFloat(cache.value.info.used_memory_human),
+              name: '内存消耗'
+            }
+          ]
+        }
+      ]
+    });
+  } finally {
+    modal.closeLoading();
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+  getList();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+  disposeCharts();
+});
+</script>
+
+<style lang="scss" scoped>
+.cache-grid {
+  row-gap: 12px;
+}
+
+.cache-table {
+  overflow: hidden;
+  border: 1px solid var(--app-surface-border);
+  border-radius: 10px;
+}
+
+.cache-table table {
+  border-collapse: collapse;
+}
+
+.cache-chart {
+  overflow: hidden;
+  border-radius: 10px;
+}
+</style>
diff --git a/src/views/monitor/logininfo/index.vue b/src/views/monitor/logininfo/index.vue
new file mode 100644
index 0000000..696b257
--- /dev/null
+++ b/src/views/monitor/logininfo/index.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="p-2 app-container monitor-logininfo-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div>
+              <span class="panel-kicker">Search Filters</span>
+              <h3>筛选条件</h3>
+            </div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="登录地址" prop="ipaddr">
+            <el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="用户名称" prop="userName">
+            <el-input
+              v-model="queryParams.userName"
+              placeholder="请输入用户名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="登录状态" clearable>
+              <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="登录时间" style="width: 308px">
+            <el-date-picker
+              v-model="dateRange"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <span class="panel-kicker">Access Logs</span>
+            <h3>登录日志</h3>
+            <p>共 {{ total }} 条记录，支持排序、批量清理、导出和账号解锁。</p>
+          </div>
+          <div class="toolbar-actions">
+            <el-button
+              v-hasPermi="['monitor:logininfo:remove']"
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete()"
+            >
+              删除
+            </el-button>
+            <el-button v-hasPermi="['monitor:logininfo:remove']" type="danger" plain icon="Delete" @click="handleClean">
+              清空
+            </el-button>
+            <el-button
+              v-hasPermi="['monitor:logininfo:unlock']"
+              type="primary"
+              plain
+              icon="Unlock"
+              :disabled="single"
+              @click="handleUnlock"
+            >
+              解锁
+            </el-button>
+            <el-button
+              v-hasPermi="['monitor:logininfo:export']"
+              type="warning"
+              plain
+              icon="Download"
+              @click="handleExport"
+            >
+              导出
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        ref="loginInfoTableRef"
+        v-loading="loading"
+        :data="loginInfoList"
+        class="data-table"
+        :default-sort="defaultSort"
+        border
+        @selection-change="handleSelectionChange"
+        @sort-change="handleSortChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="访问编号" align="center" prop="infoId" />
+        <el-table-column
+          label="用户名称"
+          align="center"
+          prop="userName"
+          :show-overflow-tooltip="true"
+          sortable="custom"
+          :sort-orders="['descending', 'ascending']"
+        />
+        <el-table-column label="客户端" align="center" prop="clientKey" :show-overflow-tooltip="true" />
+        <el-table-column label="设备类型" align="center">
+          <template #default="scope">
+            <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="地址" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+        <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+        <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
+        <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
+        <el-table-column label="登录状态" align="center" prop="status">
+          <template #default="scope">
+            <dict-tag :options="sys_common_status" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column label="描述" align="center" prop="msg" :show-overflow-tooltip="true" />
+        <el-table-column
+          label="访问时间"
+          align="center"
+          prop="loginTime"
+          sortable="custom"
+          :sort-orders="['descending', 'ascending']"
+          width="180"
+        >
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.loginTime) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script setup name="LoginInfo" lang="ts">
+import { list, delLoginInfo, cleanLoginInfo, unlockLoginInfo } from '@/api/monitor/logininfo';
+import { LoginInfoQuery, LoginInfoVO } from '@/api/monitor/logininfo/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTableSortQuery } from '@/hooks/table/useTableSortQuery';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+import { download as requestDownload } from '@/utils/request';
+import { parseTime } from '@/utils/ruoyi';
+
+const { sys_device_type } = toRefs<any>(useDict('sys_device_type'));
+const { sys_common_status } = toRefs<any>(useDict('sys_common_status'));
+
+const loginInfoList = ref<LoginInfoVO[]>([]);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
+
+const queryFormRef = ref<ElFormInstance>();
+const loginInfoTableRef = ref<ElTableInstance>();
+// 查询参数
+const queryParams = ref<LoginInfoQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  ipaddr: '',
+  userName: '',
+  status: '',
+  orderByColumn: 'loginTime',
+  isAsc: 'descending'
+});
+const {
+  ids,
+  selectedRows,
+  single,
+  multiple,
+  handleSelectionChange: handleTableSelectionChange
+} = useTableSelection<LoginInfoVO>(item => item.infoId);
+const selectName = computed(() => selectedRows.value.map(item => item.userName));
+
+/** 查询登录日志列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await list(applyDateRange(queryParams.value));
+    loginInfoList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+const { defaultSort, handleSortChange, resetSort } = useTableSortQuery<LoginInfoQuery>({
+  queryParams,
+  tableRef: loginInfoTableRef,
+  defaultSort: { prop: 'loginTime', order: 'descending' },
+  onSortChange: getList
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    resetDateRange();
+  },
+  afterReset: () => {
+    resetSort();
+  }
+});
+const handleSelectionChange = (selection: LoginInfoVO[]) => {
+  handleTableSelectionChange(selection);
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: LoginInfoVO) => {
+  const infoIds = row?.infoId || ids.value;
+  await modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?');
+  await delLoginInfo(infoIds);
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+/** 清空按钮操作 */
+const handleClean = async () => {
+  await modal.confirm('是否确认清空所有登录日志数据项?');
+  await cleanLoginInfo();
+  await getList();
+  modal.msgSuccess('清空成功');
+};
+/** 解锁按钮操作 */
+const handleUnlock = async () => {
+  const username = selectName.value;
+  await modal.confirm('是否确认解锁用户"' + username + '"数据项?');
+  await unlockLoginInfo(username);
+  modal.msgSuccess('用户' + username + '解锁成功');
+};
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    'monitor/loginInfo/export',
+    {
+      ...queryParams.value
+    },
+    `logininfo_${new Date().getTime()}.xlsx`
+  );
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.table-crud-page;
+</style>
diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
new file mode 100644
index 0000000..30cbad2
--- /dev/null
+++ b/src/views/monitor/online/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="p-2 app-container monitor-online-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel">
+        <template #header>
+          <div class="panel-heading">
+            <div>
+              <span class="panel-kicker">Search Filters</span>
+              <h3>筛选条件</h3>
+            </div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="登录地址" prop="ipaddr">
+            <el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="用户名称" prop="userName">
+            <el-input
+              v-model="queryParams.userName"
+              placeholder="请输入用户名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <span class="panel-kicker">Online Sessions</span>
+            <h3>在线用户</h3>
+            <p>共 {{ total }} 条记录，支持按账号或地址检索并执行会话强退。</p>
+          </div>
+        </div>
+      </template>
+      <el-table
+        v-loading="loading"
+        border
+        class="data-table"
+        :data="
+          onlineList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)
+        "
+        style="width: 100%"
+      >
+        <el-table-column label="序号" width="50" type="index" align="center">
+          <template #default="scope">
+            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
+        <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
+        <el-table-column label="客户端" align="center" prop="clientKey" :show-overflow-tooltip="true" />
+        <el-table-column label="设备类型" align="center">
+          <template #default="scope">
+            <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
+        <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+        <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+        <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
+        <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
+        <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.loginTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="强退" placement="top">
+              <el-button
+                v-hasPermi="['monitor:online:forceLogout']"
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleForceLogout(scope.row)"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script setup name="Online" lang="ts">
+import { to } from 'await-to-js';
+import { forceLogout, list as initData } from '@/api/monitor/online';
+import { OnlineQuery, OnlineVO } from '@/api/monitor/online/types';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+import { parseTime } from '@/utils/ruoyi';
+
+const { sys_device_type } = toRefs<any>(useDict('sys_device_type'));
+
+const onlineList = ref<OnlineVO[]>([]);
+const loading = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+
+const queryParams = ref<OnlineQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  ipaddr: '',
+  userName: ''
+});
+
+/** 查询登录日志列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await initData(queryParams.value);
+  onlineList.value = res.data?.rows;
+  total.value = res.data?.total;
+  loading.value = false;
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+/** 强退按钮操作 */
+const handleForceLogout = async (row: Partial<OnlineVO>) => {
+  const [err] = await to(modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?') as any);
+  if (!err) {
+    await forceLogout(row.tokenId);
+    await getList();
+    modal.msgSuccess('删除成功');
+  }
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.table-crud-page;
+</style>
diff --git a/src/views/monitor/operlog/index.vue b/src/views/monitor/operlog/index.vue
new file mode 100644
index 0000000..151931c
--- /dev/null
+++ b/src/views/monitor/operlog/index.vue
@@ -0,0 +1,371 @@
+<template>
+  <div class="p-2 app-container monitor-operlog-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div>
+              <span class="panel-kicker">Search Filters</span>
+              <h3>筛选条件</h3>
+            </div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="操作地址" prop="operIp">
+            <el-input v-model="queryParams.operIp" placeholder="请输入操作地址" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="系统模块" prop="title">
+            <el-input v-model="queryParams.title" placeholder="请输入系统模块" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="操作人员" prop="operName">
+            <el-input
+              v-model="queryParams.operName"
+              placeholder="请输入操作人员"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="客户端" prop="clientKey">
+            <el-input v-model="queryParams.clientKey" placeholder="请输入客户端" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="设备类型" prop="deviceType">
+            <el-select v-model="queryParams.deviceType" placeholder="请选择设备类型" clearable>
+              <el-option v-for="dict in sys_device_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="浏览器" prop="browser">
+            <el-input v-model="queryParams.browser" placeholder="请输入浏览器" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="操作系统" prop="os">
+            <el-input v-model="queryParams.os" placeholder="请输入操作系统" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="类型" prop="businessType">
+            <el-select v-model="queryParams.businessType" placeholder="操作类型" clearable>
+              <el-option v-for="dict in sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="操作状态" clearable>
+              <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="操作时间" style="width: 308px">
+            <el-date-picker
+              v-model="dateRange"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <span class="panel-kicker">Operation Logs</span>
+            <h3>操作日志</h3>
+            <p>共 {{ total }} 条记录，支持类型过滤、详情查看、批量清空和导出。</p>
+          </div>
+          <div class="toolbar-actions">
+            <el-button
+              v-hasPermi="['monitor:operlog:remove']"
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete()"
+            >
+              删除
+            </el-button>
+            <el-button
+              v-hasPermi="['monitor:operlog:remove']"
+              type="danger"
+              plain
+              icon="WarnTriangleFilled"
+              @click="handleClean"
+            >
+              清空
+            </el-button>
+            <el-button
+              v-hasPermi="['monitor:operlog:export']"
+              type="warning"
+              plain
+              icon="Download"
+              @click="handleExport"
+            >
+              导出
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        ref="operLogTableRef"
+        v-loading="loading"
+        :data="operlogList"
+        class="data-table"
+        border
+        :default-sort="defaultSort"
+        @selection-change="handleSelectionChange"
+        @sort-change="handleSortChange"
+      >
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column label="日志编号" align="center" prop="operId" />
+        <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
+        <el-table-column label="操作类型" align="center" prop="businessType">
+          <template #default="scope">
+            <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作人员"
+          align="center"
+          width="110"
+          prop="operName"
+          :show-overflow-tooltip="true"
+          sortable="custom"
+          :sort-orders="['descending', 'ascending']"
+        />
+        <el-table-column label="部门" align="center" prop="deptName" width="130" :show-overflow-tooltip="true" />
+        <el-table-column label="客户端" align="center" prop="clientKey" width="110" :show-overflow-tooltip="true" />
+        <el-table-column label="设备类型" align="center" prop="deviceType" width="110" :show-overflow-tooltip="true">
+          <template #default="scope">
+            <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="浏览器" align="center" prop="browser" width="110" :show-overflow-tooltip="true" />
+        <el-table-column label="操作系统" align="center" prop="os" width="110" :show-overflow-tooltip="true" />
+        <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
+        <el-table-column label="操作状态" align="center" prop="status">
+          <template #default="scope">
+            <dict-tag :options="sys_common_status" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作日期"
+          align="center"
+          prop="operTime"
+          width="180"
+          sortable="custom"
+          :sort-orders="['descending', 'ascending']"
+        >
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.operTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="消耗时间"
+          align="center"
+          prop="costTime"
+          width="110"
+          :show-overflow-tooltip="true"
+          sortable="custom"
+          :sort-orders="['descending', 'ascending']"
+        >
+          <template #default="scope">
+            <span>{{ scope.row.costTime }}毫秒</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="详细" placement="top">
+              <el-button
+                v-hasPermi="['monitor:operlog:query']"
+                link
+                type="primary"
+                icon="View"
+                @click="handleView(scope.row)"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </el-card>
+    <!-- 操作日志详细 -->
+    <OperInfoDialog ref="operInfoDialogRef" />
+  </div>
+</template>
+
+<script setup name="Operlog" lang="ts">
+import { list, delOperlog, cleanOperlog } from '@/api/monitor/operlog';
+import { OperLogForm, OperLogQuery, OperLogVO } from '@/api/monitor/operlog/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTableSortQuery } from '@/hooks/table/useTableSortQuery';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+import { download as requestDownload } from '@/utils/request';
+import { parseTime, selectDictLabel } from '@/utils/ruoyi';
+import OperInfoDialog from './operInfoDialog.vue';
+
+const { sys_oper_type, sys_common_status, sys_device_type } = toRefs<any>(
+  useDict('sys_oper_type', 'sys_common_status', 'sys_device_type')
+);
+
+const operlogList = ref<OperLogVO[]>([]);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
+
+const operLogTableRef = ref<ElTableInstance>();
+const queryFormRef = ref<ElFormInstance>();
+
+const data = reactive<PageData<OperLogForm, OperLogQuery>>({
+  form: {
+    operId: undefined,
+    tenantId: undefined,
+    title: '',
+    businessType: 0,
+    businessTypes: undefined,
+    method: '',
+    requestMethod: '',
+    operatorType: 0,
+    operName: '',
+    userId: undefined,
+    deptId: undefined,
+    deptName: '',
+    clientKey: '',
+    deviceType: '',
+    browser: '',
+    os: '',
+    operUrl: '',
+    operIp: '',
+    operLocation: '',
+    operParam: '',
+    jsonResult: '',
+    status: 0,
+    errorMsg: '',
+    operTime: '',
+    costTime: 0
+  },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    operIp: '',
+    title: '',
+    operName: '',
+    userId: '',
+    deptId: '',
+    clientKey: '',
+    deviceType: '',
+    browser: '',
+    os: '',
+    businessType: '',
+    status: '',
+    orderByColumn: 'operTime',
+    isAsc: 'descending'
+  },
+  rules: {}
+});
+
+const { queryParams, form } = toRefs(data);
+const {
+  ids,
+  multiple,
+  handleSelectionChange: handleTableSelectionChange
+} = useTableSelection<OperLogVO>(item => item.operId);
+
+/** 查询登录日志 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await list(applyDateRange(queryParams.value));
+    operlogList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+const { defaultSort, handleSortChange, resetSort } = useTableSortQuery<OperLogQuery>({
+  queryParams,
+  tableRef: operLogTableRef,
+  defaultSort: { prop: 'operTime', order: 'descending' },
+  onSortChange: getList
+});
+/** 操作日志类型字典翻译 */
+const typeFormat = (row: OperLogForm) => {
+  return selectDictLabel(sys_oper_type.value, row.businessType);
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    resetDateRange();
+  },
+  afterReset: () => {
+    resetSort();
+  }
+});
+const handleSelectionChange = (selection: OperLogVO[]) => {
+  handleTableSelectionChange(selection);
+};
+
+const operInfoDialogRef = ref<InstanceType<typeof OperInfoDialog>>();
+/** 详细按钮操作 */
+const handleView = (row: Partial<OperLogVO>) => {
+  operInfoDialogRef.value.openDialog(row as OperLogForm);
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<OperLogVO>) => {
+  const operIds = row?.operId || ids.value;
+  await modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?');
+  await delOperlog(operIds);
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+/** 清空按钮操作 */
+const handleClean = async () => {
+  await modal.confirm('是否确认清空所有操作日志数据项?');
+  await cleanOperlog();
+  await getList();
+  modal.msgSuccess('清空成功');
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    'monitor/operlog/export',
+    {
+      ...queryParams.value
+    },
+    `operlog_${new Date().getTime()}.xlsx`
+  );
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.table-crud-page;
+</style>
diff --git a/src/views/monitor/operlog/operInfoDialog.vue b/src/views/monitor/operlog/operInfoDialog.vue
new file mode 100644
index 0000000..a37e9bf
--- /dev/null
+++ b/src/views/monitor/operlog/operInfoDialog.vue
@@ -0,0 +1,126 @@
+<template>
+  <el-dialog
+    v-model="open"
+    title="操作日志详细"
+    width="700px"
+    append-to-body
+    close-on-click-modal
+    @closed="info = null"
+  >
+    <el-descriptions v-if="info" :column="1" border>
+      <el-descriptions-item label="操作状态">
+        <template #default>
+          <el-tag v-if="info.status === 0" type="success">正常</el-tag>
+          <el-tag v-else-if="info.status === 1" type="danger">失败</el-tag>
+        </template>
+      </el-descriptions-item>
+      <el-descriptions-item label="登录信息">
+        <template #default>
+          {{ info.operName }} / {{ info.deptName }} / {{ info.clientKey || '-' }} /
+          {{ deviceTypeFormat(info.deviceType) || '-' }} / {{ info.browser || '-' }} / {{ info.os || '-' }} /
+          {{ info.operIp }} / {{ info.operLocation }}
+        </template>
+      </el-descriptions-item>
+      <el-descriptions-item label="请求信息">
+        <template #default>{{ info.requestMethod }} {{ info.operUrl }}</template>
+      </el-descriptions-item>
+      <el-descriptions-item label="操作模块">
+        <template #default>{{ info.title }} / {{ typeFormat(info) }}</template>
+      </el-descriptions-item>
+      <el-descriptions-item label="操作方法">
+        <template #default>
+          {{ info.method }}
+        </template>
+      </el-descriptions-item>
+      <el-descriptions-item label="请求参数">
+        <template #default>
+          <div class="max-h-300px overflow-y-auto">
+            <VueJsonPretty :data="formatToJsonObject(info.operParam)" />
+          </div>
+        </template>
+      </el-descriptions-item>
+      <el-descriptions-item label="返回参数">
+        <template #default>
+          <div class="max-h-300px overflow-y-auto">
+            <VueJsonPretty :data="formatToJsonObject(info.jsonResult)" />
+          </div>
+        </template>
+      </el-descriptions-item>
+      <el-descriptions-item label="消耗时间">
+        <template #default>
+          <span>{{ info.costTime }}ms</span>
+        </template>
+      </el-descriptions-item>
+      <el-descriptions-item label="操作时间">
+        <template #default>{{ parseTime(info.operTime) }}</template>
+      </el-descriptions-item>
+      <el-descriptions-item v-if="info.status === 1" label="异常信息">
+        <template #default>
+          <span class="text-danger">{{ info.errorMsg }}</span>
+        </template>
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import VueJsonPretty from 'vue-json-pretty';
+import type { OperLogForm } from '@/api/monitor/operlog/types';
+import 'vue-json-pretty/lib/styles.css';
+import { useDict } from '@/utils/dict';
+import { parseTime, selectDictLabel } from '@/utils/ruoyi';
+
+const open = ref(false);
+const info = ref<OperLogForm | null>(null);
+function openDialog(row: OperLogForm) {
+  info.value = row;
+  open.value = true;
+}
+
+function closeDialog() {
+  open.value = false;
+}
+
+defineExpose({
+  openDialog,
+  closeDialog
+});
+
+/**
+ * json转为对象
+ * @param data 原始数据
+ */
+function formatToJsonObject(data: string) {
+  try {
+    return JSON.parse(data);
+  } catch (error) {
+    return data;
+  }
+}
+
+/**
+ * 字典信息
+ */
+const { sys_oper_type, sys_device_type } = toRefs<any>(useDict('sys_oper_type', 'sys_device_type'));
+const typeFormat = (row: OperLogForm) => {
+  return selectDictLabel(sys_oper_type.value, row.businessType);
+};
+const deviceTypeFormat = (deviceType: string) => {
+  return selectDictLabel(sys_device_type.value, deviceType);
+};
+</script>
+
+<style lang="scss" scoped>
+/**
+label宽度固定
+*/
+:deep(.el-descriptions__label) {
+  min-width: 100px;
+}
+/**
+文字超过 换行显示
+*/
+:deep(.el-descriptions__content) {
+  max-width: 300px;
+}
+</style>
diff --git a/src/views/monitor/snailai/index.vue b/src/views/monitor/snailai/index.vue
new file mode 100644
index 0000000..ad679e2
--- /dev/null
+++ b/src/views/monitor/snailai/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="p-2 app-container iframe-page">
+    <div class="iframe-page__inner">
+      <i-frame v-model:src="url"></i-frame>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const url = ref(import.meta.env.VITE_APP_SNAILAI_ADMIN);
+</script>
+
+<style lang="scss" scoped>
+.iframe-page__inner {
+  overflow: hidden;
+  border-radius: 14px;
+  background: var(--app-surface-bg);
+  box-shadow: var(--app-shadow-sm);
+}
+</style>
diff --git a/src/views/monitor/snailjob/index.vue b/src/views/monitor/snailjob/index.vue
new file mode 100644
index 0000000..9253fe4
--- /dev/null
+++ b/src/views/monitor/snailjob/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="p-2 app-container iframe-page">
+    <div class="iframe-page__inner">
+      <i-frame v-model:src="url"></i-frame>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const url = ref(import.meta.env.VITE_APP_SNAILJOB_ADMIN);
+</script>
+
+<style lang="scss" scoped>
+.iframe-page__inner {
+  overflow: hidden;
+  border-radius: 14px;
+  background: var(--app-surface-bg);
+  box-shadow: var(--app-shadow-sm);
+}
+</style>
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
new file mode 100644
index 0000000..2de999f
--- /dev/null
+++ b/src/views/redirect/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+const { params, query } = route;
+const { path } = params;
+
+router.replace({ path: '/' + path, query });
+</script>
diff --git a/src/views/register.vue b/src/views/register.vue
new file mode 100644
index 0000000..6a047f0
--- /dev/null
+++ b/src/views/register.vue
@@ -0,0 +1,523 @@
+<template>
+  <div class="register">
+    <div class="register-shell">
+      <section class="register-brand">
+        <span class="brand-pill">Plus UI Workspace</span>
+        <h1 class="brand-title">企业级后台管理系统</h1>
+        <p class="brand-desc">
+          真正面向企业级的应用框架 组件化 模块化 轻耦合 高扩展 针对企业痛点 业界一流技术栈
+          <br />
+          重写 RuoYi-Vue 所有功能 集成 Sa-Token、Mybatis-Plus、WarmFlow、SpringDoc、Hutool、OSS 定期同步。
+        </p>
+        <div class="brand-highlights">
+          <span v-for="item in highlights" :key="item" class="highlight-chip">{{ item }}</span>
+        </div>
+        <div class="brand-metrics">
+          <article v-for="item in quickStats" :key="item.label" class="metric-card">
+            <strong>{{ item.value }}</strong>
+            <span>{{ item.label }}</span>
+          </article>
+        </div>
+      </section>
+
+      <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
+        <div class="title-box">
+          <div>
+            <p class="eyebrow">Workspace Register</p>
+            <h3 class="title">{{ title }}</h3>
+            <p class="subtitle">创建新的业务工作台账号，接入当前系统权限与登录体系。</p>
+          </div>
+          <lang-select />
+        </div>
+
+        <el-form-item prop="username">
+          <el-input
+            v-model="registerForm.username"
+            type="text"
+            size="large"
+            auto-complete="off"
+            :placeholder="$t('register.username')"
+          >
+            <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            v-model="registerForm.password"
+            type="password"
+            size="large"
+            auto-complete="off"
+            :placeholder="$t('register.password')"
+            @keyup.enter="handleRegister"
+          >
+            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="confirmPassword">
+          <el-input
+            v-model="registerForm.confirmPassword"
+            type="password"
+            size="large"
+            auto-complete="off"
+            :placeholder="$t('register.confirmPassword')"
+            @keyup.enter="handleRegister"
+          >
+            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item v-if="captchaEnabled" prop="code" class="captcha-row">
+          <el-input
+            v-model="registerForm.code"
+            size="large"
+            auto-complete="off"
+            :placeholder="$t('register.code')"
+            @keyup.enter="handleRegister"
+          >
+            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+          </el-input>
+          <div class="register-code">
+            <img :src="codeUrl" class="register-code-img" @click="getCode" />
+          </div>
+        </el-form-item>
+
+        <div class="form-meta">
+          <span class="register-tip">注册后将返回登录页继续完成认证</span>
+          <router-link class="link-type" :to="'/login'">{{ $t('register.switchLoginPage') }}</router-link>
+        </div>
+
+        <el-form-item class="submit-row">
+          <el-button
+            :loading="loading"
+            size="large"
+            type="primary"
+            class="submit-button"
+            @click.prevent="handleRegister"
+          >
+            <span v-if="!loading">{{ $t('register.register') }}</span>
+            <span v-else>{{ $t('register.registering') }}</span>
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="el-register-footer">
+      <span>Copyright © 2018-{{ currentYear }} 疯狂的狮子Li All Rights Reserved.</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { to } from 'await-to-js';
+import { useI18n } from 'vue-i18n';
+import { getCodeImg, register } from '@/api/login';
+import { RegisterForm } from '@/api/types';
+
+const title = import.meta.env.VITE_APP_TITLE;
+const currentYear = new Date().getFullYear();
+const quickStats = [
+  { label: '细粒度权限管理', value: '动态权限控制' },
+  { label: '主流技术栈', value: '全栈技术集成' },
+  { label: 'UI样式', value: '卡片式' }
+];
+const highlights = ['技术栈全面升级', '动态菜单', '多主题布局', '深浅色主题'];
+const router = useRouter();
+
+const { t } = useI18n();
+
+const registerForm = ref<RegisterForm>({
+  username: '',
+  password: '',
+  confirmPassword: '',
+  code: '',
+  uuid: '',
+  userType: 'sys_user'
+});
+
+const equalToPassword = (rule: any, value: string, callback: any) => {
+  if (registerForm.value.password !== value) {
+    callback(new Error(t('register.rule.confirmPassword.equalToPassword')));
+  } else {
+    callback();
+  }
+};
+
+const registerRules: ElFormRules = {
+  username: [
+    {
+      required: true,
+      trigger: 'blur',
+      message: t('register.rule.username.required')
+    },
+    {
+      min: 2,
+      max: 20,
+      message: t('register.rule.username.length', { min: 2, max: 20 }),
+      trigger: 'blur'
+    }
+  ],
+  password: [
+    {
+      required: true,
+      trigger: 'blur',
+      message: t('register.rule.password.required')
+    },
+    {
+      min: 5,
+      max: 20,
+      message: t('register.rule.password.length', { min: 5, max: 20 }),
+      trigger: 'blur'
+    },
+    {
+      pattern: /^[^<>"'|\\]+$/,
+      message: t('register.rule.password.pattern', {
+        strings: '< > " \' \\ |'
+      }),
+      trigger: 'blur'
+    }
+  ],
+  confirmPassword: [
+    {
+      required: true,
+      trigger: 'blur',
+      message: t('register.rule.confirmPassword.required')
+    },
+    { required: true, validator: equalToPassword, trigger: 'blur' }
+  ],
+  code: [
+    {
+      required: true,
+      trigger: 'change',
+      message: t('register.rule.code.required')
+    }
+  ]
+};
+const codeUrl = ref('');
+const loading = ref(false);
+const captchaEnabled = ref(true);
+const registerRef = ref<ElFormInstance>();
+
+const handleRegister = () => {
+  registerRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      loading.value = true;
+      const [err] = await to(register(registerForm.value));
+      if (!err) {
+        const username = registerForm.value.username;
+        await ElMessageBox.alert(t('register.registerSuccess', { username }), '系统提示', {
+          type: 'success'
+        });
+        await router.push('/login');
+      } else {
+        loading.value = false;
+        if (captchaEnabled.value) {
+          getCode();
+        }
+      }
+    }
+  });
+};
+
+const getCode = async () => {
+  const res = await getCodeImg();
+  const { data } = res;
+  captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled;
+  if (captchaEnabled.value) {
+    codeUrl.value = 'data:image/gif;base64,' + data.img;
+    registerForm.value.uuid = data.uuid;
+  }
+};
+
+onMounted(() => {
+  getCode();
+});
+</script>
+
+<style lang="scss" scoped>
+.register {
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 24px 88px;
+  background:
+    radial-gradient(circle at 12% 12%, rgba(53, 109, 255, 0.22), transparent 24%),
+    radial-gradient(circle at 88% 18%, rgba(14, 165, 233, 0.18), transparent 24%),
+    linear-gradient(135deg, #071120 0%, #0f1b33 42%, #15345f 100%);
+}
+
+.register-shell {
+  width: min(1180px, 100%);
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 440px);
+  gap: 26px;
+  align-items: stretch;
+}
+
+.register-brand,
+.register-form {
+  border-radius: 28px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  box-shadow: 0 30px 80px rgba(2, 8, 23, 0.32);
+  backdrop-filter: blur(18px);
+}
+
+.register-brand {
+  padding: 42px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: #eef4ff;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
+    linear-gradient(135deg, rgba(53, 109, 255, 0.32), rgba(15, 23, 42, 0.24));
+}
+
+.brand-pill {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.brand-title {
+  margin: 22px 0 14px;
+  font-size: clamp(34px, 4vw, 52px);
+  line-height: 1.08;
+  letter-spacing: -0.03em;
+}
+
+.brand-desc {
+  margin: 0;
+  max-width: 580px;
+  color: rgba(226, 232, 240, 0.88);
+  font-size: 15px;
+  line-height: 1.8;
+}
+
+.brand-highlights {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 28px 0 34px;
+}
+
+.highlight-chip {
+  padding: 9px 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: #f8fbff;
+  font-size: 13px;
+}
+
+.brand-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.metric-card {
+  padding: 18px 16px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  strong {
+    font-size: 24px;
+    color: #fff;
+  }
+
+  span {
+    color: rgba(226, 232, 240, 0.72);
+    font-size: 13px;
+  }
+}
+
+.register-form {
+  width: 100%;
+  padding: 34px 30px 26px;
+  z-index: 1;
+  background: var(--app-surface-bg);
+}
+
+.title-box {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 28px;
+
+  .eyebrow {
+    margin: 0 0 8px;
+    color: var(--app-accent-strong);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .title {
+    margin: 0;
+    color: var(--app-text-title);
+    font-weight: 700;
+    font-size: 30px;
+    letter-spacing: -0.03em;
+  }
+
+  .subtitle {
+    margin: 8px 0 0;
+    color: var(--app-text-muted);
+    font-size: 14px;
+    line-height: 1.7;
+  }
+
+  :deep(.lang-select--style) {
+    line-height: 0;
+    color: var(--app-text-muted);
+    padding: 10px;
+    border-radius: 14px;
+    background: var(--app-elevated-soft-bg);
+    border: 1px solid var(--app-surface-border);
+  }
+}
+
+.register-form .el-input {
+  height: 48px;
+}
+
+.register-form .input-icon {
+  height: 46px;
+  width: 14px;
+  margin-left: 0;
+}
+
+.captcha-row {
+  :deep(.el-form-item__content) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 122px;
+    gap: 12px;
+  }
+}
+
+.form-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: -2px 0 18px;
+}
+
+.register-tip {
+  color: var(--app-text-muted);
+  font-size: 13px;
+}
+
+.register-code {
+  height: 48px;
+  box-sizing: border-box;
+  border-radius: 16px;
+  overflow: hidden;
+  background: var(--el-bg-color);
+  border: 1px solid var(--app-surface-border);
+
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.submit-row {
+  margin-bottom: 0;
+}
+
+.submit-button {
+  width: 100%;
+  height: 50px;
+  border-radius: 16px;
+  box-shadow: 0 18px 34px rgba(53, 109, 255, 0.22);
+}
+
+.register-form :deep(.el-input__wrapper) {
+  min-height: 48px;
+  background-color: var(--el-bg-color);
+  border-radius: 16px;
+  box-shadow: 0 0 0 1px var(--app-surface-border) inset;
+}
+
+.register-form :deep(.el-input__wrapper.is-focus) {
+  box-shadow:
+    0 0 0 1px rgba(53, 109, 255, 0.24) inset,
+    0 0 0 4px rgba(53, 109, 255, 0.12);
+}
+
+.el-register-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: rgba(226, 232, 240, 0.68);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+}
+
+.register-code-img {
+  height: 48px;
+  padding-left: 0;
+}
+
+@media (max-width: 960px) {
+  .register {
+    padding: 24px 14px 80px;
+  }
+
+  .register-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .register-brand {
+    padding: 28px 24px;
+  }
+
+  .brand-metrics {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .register-brand {
+    display: none;
+  }
+
+  .register-form {
+    padding: 26px 18px 20px;
+  }
+
+  .title-box {
+    flex-direction: column;
+  }
+
+  .form-meta {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .captcha-row :deep(.el-form-item__content) {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/views/system/client/index.vue b/src/views/system/client/index.vue
new file mode 100644
index 0000000..641f601
--- /dev/null
+++ b/src/views/system/client/index.vue
@@ -0,0 +1,489 @@
+<template>
+  <div class="p-2 app-container system-client-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="85px" class="query-form">
+          <el-form-item label="客户端key" prop="clientKey">
+            <el-input
+              v-model="queryParams.clientKey"
+              placeholder="请输入客户端key"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="客户端秘钥" prop="clientSecret">
+            <el-input
+              v-model="queryParams.clientSecret"
+              placeholder="请输入客户端秘钥"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="状态" clearable>
+              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>客户端列表</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['system:client:add']" type="primary" plain icon="Plus" @click="handleAdd">
+              新增
+            </el-button>
+            <el-button
+              v-hasPermi="['system:client:edit']"
+              type="success"
+              plain
+              icon="Edit"
+              :disabled="single"
+              @click="handleUpdate()"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-hasPermi="['system:client:remove']"
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete()"
+            >
+              删除
+            </el-button>
+            <el-button v-hasPermi="['system:client:export']" type="warning" plain icon="Download" @click="handleExport">
+              导出
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        :data="clientList"
+        border
+        class="data-table"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column v-if="false" label="id" align="center" prop="id" />
+        <el-table-column label="客户端id" align="center" prop="clientId" />
+        <el-table-column label="客户端key" align="center" prop="clientKey" />
+        <el-table-column label="客户端秘钥" align="center" prop="clientSecret" />
+        <el-table-column label="授权类型" align="center">
+          <template #default="scope">
+            <dict-tag class="grant-type-tag" :options="sys_grant_type" :value="scope.row.grantTypeList" />
+          </template>
+        </el-table-column>
+        <el-table-column label="设备类型" align="center">
+          <template #default="scope">
+            <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="白名单路径" align="center">
+          <template #default="scope">
+            <div class="rule-tag-list">
+              <el-tag
+                v-for="path in getRuleList(scope.row.accessPathList, scope.row.accessPath)"
+                :key="path"
+                size="small"
+                effect="plain"
+              >
+                {{ path }}
+              </el-tag>
+              <span v-if="!getRuleList(scope.row.accessPathList, scope.row.accessPath).length" class="rule-empty">
+                全部路径
+              </span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="白名单IP" align="center">
+          <template #default="scope">
+            <div class="rule-tag-list">
+              <el-tag
+                v-for="ip in getRuleList(scope.row.ipWhitelistList, scope.row.ipWhitelist)"
+                :key="ip"
+                size="small"
+                type="success"
+                effect="plain"
+              >
+                {{ ip }}
+              </el-tag>
+              <span v-if="!getRuleList(scope.row.ipWhitelistList, scope.row.ipWhitelist).length" class="rule-empty">
+                全部IP
+              </span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="Token活跃超时时间" align="center" prop="activeTimeout" />
+        <el-table-column label="Token固定超时时间" align="center" prop="timeout" />
+        <el-table-column key="status" label="状态" align="center">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.status"
+              active-value="0"
+              inactive-value="1"
+              @change="handleStatusChange(scope.row)"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button
+                v-hasPermi="['system:client:edit']"
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                v-hasPermi="['system:client:remove']"
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </el-card>
+    <!-- 添加或修改客户端管理对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="760px" append-to-body>
+      <el-form ref="clientFormRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="客户端key" prop="clientKey">
+          <el-input v-model="form.clientKey" :disabled="form.id != null" placeholder="请输入客户端key" />
+        </el-form-item>
+        <el-form-item label="客户端秘钥" prop="clientSecret">
+          <el-input v-model="form.clientSecret" :disabled="form.id != null" placeholder="请输入客户端秘钥" />
+        </el-form-item>
+        <el-form-item label="授权类型" prop="grantTypeList">
+          <el-select v-model="form.grantTypeList" multiple placeholder="请输入授权类型">
+            <el-option
+              v-for="dict in sys_grant_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备类型" prop="deviceType">
+          <el-select v-model="form.deviceType" placeholder="请输入设备类型">
+            <el-option
+              v-for="dict in sys_device_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="accessPath" label-width="auto">
+          <template #label>
+            <span>
+              <el-tooltip content="多个路径可按换行、逗号或分号分隔；为空表示允许访问所有接口路径" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+              允许访问路径
+            </span>
+          </template>
+          <el-input v-model="form.accessPath" type="textarea" :rows="4" placeholder="示例：/app/**" />
+        </el-form-item>
+        <el-form-item prop="ipWhitelist" label-width="auto">
+          <template #label>
+            <span>
+              <el-tooltip
+                content="支持精确IP、通配符和CIDR；多个规则可按换行、逗号或分号分隔；为空表示允许所有IP"
+                placement="top"
+              >
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+              IP白名单
+            </span>
+          </template>
+          <el-input
+            v-model="form.ipWhitelist"
+            type="textarea"
+            :rows="4"
+            placeholder="示例：127.0.0.1&#10;192.168.*.*&#10;10.0.0.0/24"
+          />
+        </el-form-item>
+        <el-form-item prop="activeTimeout" label-width="auto">
+          <template #label>
+            <span>
+              <el-tooltip content="指定时间无操作则过期（单位：秒），默认30分钟（1800秒）" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+              Token活跃超时时间
+            </span>
+          </template>
+          <el-input v-model="form.activeTimeout" placeholder="请输入Token活跃超时时间" />
+        </el-form-item>
+        <el-form-item prop="timeout" label-width="auto">
+          <template #label>
+            <span>
+              <el-tooltip content="指定时间必定过期（单位：秒），默认七天（604800秒）" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+              Token固定超时时间
+            </span>
+          </template>
+          <el-input v-model="form.timeout" placeholder="请输入Token固定超时时间" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Client" lang="ts">
+import { listClient, getClient, delClient, addClient, updateClient, changeStatus } from '@/api/system/client';
+import { ClientVO, ClientQuery, ClientForm } from '@/api/system/client/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+import { download as requestDownload } from '@/utils/request';
+
+const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
+const { sys_grant_type } = toRefs<any>(useDict('sys_grant_type'));
+const { sys_device_type } = toRefs<any>(useDict('sys_device_type'));
+
+const clientList = ref<ClientVO[]>([]);
+const { loading, withLoading } = useLoading(true);
+const { loading: buttonLoading, withLoading: withButtonLoading } = useLoading();
+const { showSearch } = useSearchToggle();
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<ClientVO>(item => item.id);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const clientFormRef = ref<ElFormInstance>();
+
+const initFormData: ClientForm = {
+  id: undefined,
+  clientId: undefined,
+  clientKey: undefined,
+  clientSecret: undefined,
+  grantTypeList: undefined,
+  deviceType: undefined,
+  accessPath: undefined,
+  accessPathList: undefined,
+  ipWhitelist: undefined,
+  ipWhitelistList: undefined,
+  activeTimeout: undefined,
+  timeout: undefined,
+  status: '0'
+};
+const data = reactive<PageData<ClientForm, ClientQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    clientId: undefined,
+    clientKey: undefined,
+    clientSecret: undefined,
+    grantType: undefined,
+    deviceType: undefined,
+    accessPath: undefined,
+    ipWhitelist: undefined,
+    activeTimeout: undefined,
+    timeout: undefined,
+    status: undefined
+  },
+  rules: {
+    id: [{ required: true, message: 'id不能为空', trigger: 'blur' }],
+    clientId: [{ required: true, message: '客户端id不能为空', trigger: 'blur' }],
+    clientKey: [{ required: true, message: '客户端key不能为空', trigger: 'blur' }],
+    clientSecret: [{ required: true, message: '客户端秘钥不能为空', trigger: 'blur' }],
+    grantTypeList: [{ required: true, message: '授权类型不能为空', trigger: 'change' }],
+    deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const { dialog, resetForm, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: clientFormRef,
+  initialFormData: initFormData
+});
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+const getRuleList = (ruleList?: string[], ruleValue?: string) => {
+  if (Array.isArray(ruleList) && ruleList.length) {
+    return ruleList;
+  }
+  if (!ruleValue) {
+    return [];
+  }
+  return ruleValue
+    .split(/[\n,;]+/)
+    .map(item => item.trim())
+    .filter(Boolean);
+};
+
+/** 查询客户端管理列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listClient(queryParams.value);
+    clientList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  closeDialog();
+  resetForm();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  openDialog('添加客户端管理');
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: Partial<ClientVO>) => {
+  resetForm();
+  const clientId = row?.id || ids.value[0];
+  const res = await getClient(clientId);
+  Object.assign(form.value, res.data);
+  showDialog('修改客户端管理');
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  clientFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      await withButtonLoading(async () => {
+        if (form.value.id) {
+          await updateClient(form.value);
+        } else {
+          await addClient(form.value);
+        }
+      });
+      modal.msgSuccess('修改成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<ClientVO>) => {
+  const clientIds = row?.id || ids.value;
+  await modal.confirm('是否确认删除客户端管理编号为"' + clientIds + '"的数据项？');
+  await delClient(clientIds);
+  modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    'system/client/export',
+    {
+      ...queryParams.value
+    },
+    `client_${new Date().getTime()}.xlsx`
+  );
+};
+
+/** 状态修改  */
+const handleStatusChange = async (row: Partial<ClientVO>) => {
+  const text = row.status === '0' ? '启用' : '停用';
+  try {
+    await modal.confirm('确认要"' + text + '"吗?');
+    await changeStatus(row.clientId, row.status);
+    modal.msgSuccess(text + '成功');
+  } catch (err) {
+    row.status = row.status === '0' ? '1' : '0';
+  }
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.system-client-page {
+  :deep(.grant-type-tag) {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    row-gap: 4px;
+  }
+
+  :deep(.grant-type-tag .el-tag) {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+
+  .rule-tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 4px;
+  }
+
+  .rule-empty {
+    color: var(--el-text-color-secondary);
+  }
+}
+</style>
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
new file mode 100644
index 0000000..e4a43f2
--- /dev/null
+++ b/src/views/system/config/index.vue
@@ -0,0 +1,346 @@
+<template>
+  <div class="p-2 app-container system-config-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div>
+              <span class="panel-kicker">Search Filters</span>
+              <h3>筛选条件</h3>
+            </div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="参数名称" prop="configName">
+            <el-input
+              v-model="queryParams.configName"
+              placeholder="请输入参数名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="参数键名" prop="configKey">
+            <el-input
+              v-model="queryParams.configKey"
+              placeholder="请输入参数键名"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card v-loading="loading" shadow="hover" class="table-panel config-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <span class="panel-kicker">Config Dataset</span>
+            <h3>参数列表</h3>
+            <p>共 {{ total }} 条记录，支持键值维护、导出和缓存刷新。</p>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['system:config:add']" type="primary" plain icon="Plus" @click="handleAdd">
+              新增
+            </el-button>
+            <el-button v-hasPermi="['system:config:export']" type="warning" plain icon="Download" @click="handleExport">
+              导出
+            </el-button>
+            <el-button
+              v-hasPermi="['system:config:remove']"
+              type="danger"
+              plain
+              icon="Refresh"
+              @click="handleRefreshCache"
+            >
+              刷新缓存
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <div class="config-body">
+        <el-tabs v-model="activeTab" tab-position="left" class="config-tabs" @tab-change="handleTabChange">
+          <el-tab-pane label="全部" name="" />
+          <el-tab-pane label="系统内置" name="Y" />
+          <el-tab-pane label="自定义配置" name="N" />
+        </el-tabs>
+
+        <div class="config-content">
+          <el-table :data="configList" :border="false">
+            <el-table-column label="参数名称" prop="configName" min-width="160" />
+            <el-table-column label="参数键名" prop="configKey" min-width="160" />
+            <el-table-column label="参数键值" min-width="160">
+              <template #default="{ row }">
+                <el-input
+                  v-model="row.configValue"
+                  placeholder="请输入参数键值"
+                  @blur="handleInlineSave(row)"
+                  @keyup.enter="handleInlineSave(row)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" prop="remark" min-width="180" show-overflow-tooltip>
+              <template #default="{ row }">
+                {{ row.remark || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="80" align="center">
+              <template #default="{ row }">
+                <el-tooltip content="修改" placement="top">
+                  <el-button
+                    v-hasPermi="['system:config:edit']"
+                    link
+                    type="primary"
+                    icon="Edit"
+                    @click="handleUpdate(row)"
+                  ></el-button>
+                </el-tooltip>
+                <el-tooltip content="删除" placement="top">
+                  <el-button
+                    v-hasPermi="['system:config:remove']"
+                    link
+                    type="danger"
+                    icon="Delete"
+                    @click="handleDelete(row)"
+                  ></el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            v-show="total > 0"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            :total="total"
+            @pagination="getList"
+          />
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="configFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="参数名称" prop="configName">
+          <el-input v-model="form.configName" placeholder="请输入参数名称" />
+        </el-form-item>
+        <el-form-item label="参数键名" prop="configKey">
+          <el-input v-model="form.configKey" placeholder="请输入参数键名" />
+        </el-form-item>
+        <el-form-item label="参数键值" prop="configValue">
+          <el-input v-model="form.configValue" type="textarea" placeholder="请输入参数键值" />
+        </el-form-item>
+        <el-form-item label="系统内置" prop="configType">
+          <el-radio-group v-model="form.configType">
+            <el-radio v-for="dict in sys_yes_no" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Config" lang="ts">
+import { listConfig, getConfig, delConfig, addConfig, updateConfig, updateConfigByKey, refreshCache } from '@/api/system/config';
+import { ConfigForm, ConfigQuery, ConfigVO } from '@/api/system/config/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+import { download as requestDownload } from '@/utils/request';
+
+const { sys_yes_no } = toRefs<any>(useDict('sys_yes_no'));
+
+const configList = ref<ConfigVO[]>([]);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+const activeTab = ref('');
+
+const queryFormRef = ref<ElFormInstance>();
+const configFormRef = ref<ElFormInstance>();
+const initFormData: ConfigForm = {
+  configId: undefined,
+  configName: '',
+  configKey: '',
+  configValue: '',
+  configType: 'Y',
+  remark: ''
+};
+const data = reactive<PageData<ConfigForm, ConfigQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    configName: '',
+    configKey: '',
+    configType: ''
+  },
+  rules: {
+    configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
+    configKey: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
+    configValue: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const { dialog, resetForm, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: configFormRef,
+  initialFormData: initFormData
+});
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 查询参数列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listConfig({ ...queryParams.value });
+    configList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+/** 取消按钮 */
+const cancel = () => {
+  closeDialog();
+  resetForm();
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** tab 切换 */
+const handleTabChange = (tab: string | number) => {
+  queryParams.value.configType = tab as string;
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 新增按钮操作 */
+const handleAdd = () => {
+  openDialog('添加参数');
+};
+/** 修改按钮操作 */
+const handleUpdate = async (row?: Partial<ConfigVO>) => {
+  resetForm();
+  const configId = row?.configId;
+  const res = await getConfig(configId!);
+  Object.assign(form.value, res.data);
+  showDialog('修改参数');
+};
+/** 内联保存参数值 */
+const handleInlineSave = async (row: Partial<ConfigVO>) => {
+  if (!row.configKey) {
+    return;
+  }
+  await modal.confirm('确认要保存对参数"' + row.configKey + '"的修改吗？');
+  await updateConfigByKey(row.configKey, row.configValue ?? '');
+  modal.msgSuccess('修改成功');
+};
+/** 提交按钮 */
+const submitForm = () => {
+  configFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.configId ? await updateConfig(form.value) : await addConfig(form.value);
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<ConfigVO>) => {
+  const configIds = row?.configId;
+  await modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？');
+  await delConfig(configIds!);
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    'system/config/export',
+    {
+      ...queryParams.value
+    },
+    `config_${new Date().getTime()}.xlsx`
+  );
+};
+/** 刷新缓存按钮操作 */
+const handleRefreshCache = async () => {
+  await refreshCache();
+  modal.msgSuccess('刷新缓存成功');
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.toolbar-responsive;
+
+.config-body {
+  display: flex;
+}
+
+.config-tabs {
+  flex-shrink: 0;
+}
+
+.config-tabs :deep(.el-tabs__header.is-left) {
+  margin-right: 0;
+}
+
+.config-tabs :deep(.el-tabs__nav-wrap.is-left::after) {
+  width: 1px;
+  background: var(--el-border-color-lighter);
+}
+
+.config-tabs :deep(.el-tabs__content) {
+  display: none;
+}
+
+.config-tabs :deep(.el-tabs__item) {
+  height: 36px;
+  padding: 0 16px;
+  font-size: 14px;
+  color: var(--el-text-color-regular);
+}
+
+.config-tabs :deep(.el-tabs__item.is-active) {
+  color: var(--el-color-primary);
+  font-weight: 500;
+}
+
+.config-content {
+  flex: 1;
+  min-width: 0;
+  padding-left: 16px;
+}
+</style>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
new file mode 100644
index 0000000..12b133e
--- /dev/null
+++ b/src/views/system/dept/index.vue
@@ -0,0 +1,381 @@
+<template>
+  <div class="p-2 app-container system-dept-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div>
+              <span class="panel-kicker">Search Filters</span>
+              <h3>筛选条件</h3>
+            </div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="部门名称" prop="deptName">
+            <el-input
+              v-model="queryParams.deptName"
+              placeholder="请输入部门名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="类别编码" prop="deptCategory">
+            <el-input
+              v-model="queryParams.deptCategory"
+              placeholder="请输入类别编码"
+              clearable
+              style="width: 240px"
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="部门状态" clearable>
+              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <span class="panel-kicker">Department Dataset</span>
+            <h3>部门列表</h3>
+            <p>支持树形层级维护、负责人绑定和部门状态管理。</p>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['system:dept:add']" type="primary" plain icon="Plus" @click="handleAdd()">
+              新增
+            </el-button>
+            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        ref="deptTableRef"
+        v-loading="loading"
+        class="data-table"
+        :data="deptList"
+        row-key="deptId"
+        border
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        :default-expand-all="isExpandAll"
+      >
+        <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
+        <el-table-column prop="deptCategory" align="center" label="类别编码" width="200"></el-table-column>
+        <el-table-column prop="orderNum" align="center" label="排序" width="200"></el-table-column>
+        <el-table-column prop="status" align="center" label="状态" width="100">
+          <template #default="scope">
+            <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" align="center" label="操作">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button
+                v-hasPermi="['system:dept:edit']"
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+              />
+            </el-tooltip>
+            <el-tooltip content="新增" placement="top">
+              <el-button
+                v-hasPermi="['system:dept:add']"
+                link
+                type="primary"
+                icon="Plus"
+                @click="handleAdd(scope.row)"
+              />
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                v-hasPermi="['system:dept:remove']"
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+              />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close append-to-body width="600px">
+      <el-form ref="deptFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col v-if="form.parentId !== 0" :span="24">
+            <el-form-item label="上级部门" prop="parentId">
+              <el-tree-select
+                v-model="form.parentId"
+                :data="deptOptions"
+                :props="{ value: 'deptId', label: 'deptName', children: 'children' } as any"
+                value-key="deptId"
+                placeholder="选择上级部门"
+                check-strictly
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门名称" prop="deptName">
+              <el-input v-model="form.deptName" placeholder="请输入部门名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="类别编码" prop="deptCategory">
+              <el-input v-model="form.deptCategory" placeholder="请输入类别编码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="orderNum">
+              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="负责人" prop="leader">
+              <el-select v-model="form.leader" placeholder="请选择负责人">
+                <el-option
+                  v-for="item in deptUserList"
+                  :key="item.userId"
+                  :label="item.userName"
+                  :value="item.userId"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="phone">
+              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门状态">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Dept" lang="ts">
+import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from '@/api/system/dept';
+import { DeptForm, DeptQuery, DeptVO } from '@/api/system/dept/types';
+import { listUserByDeptId } from '@/api/system/user';
+import { UserVO } from '@/api/system/user/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTreeTableExpand } from '@/hooks/tree/useTreeTableExpand';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+import { handleTree, parseTime } from '@/utils/ruoyi';
+
+interface DeptOptionsType {
+  deptId: number | string;
+  deptName: string;
+  children: DeptOptionsType[];
+}
+
+const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
+
+const deptList = ref<DeptVO[]>([]);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const deptOptions = ref<DeptOptionsType[]>([]);
+const deptUserList = ref<UserVO[]>([]);
+
+const deptTableRef = ref<ElTableInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const deptFormRef = ref<ElFormInstance>();
+const { isExpandAll, handleToggleExpandAll } = useTreeTableExpand<DeptVO>({
+  tableRef: deptTableRef,
+  data: deptList
+});
+
+const initFormData: DeptForm = {
+  deptId: undefined,
+  parentId: undefined,
+  deptName: undefined,
+  deptCategory: undefined,
+  orderNum: 0,
+  leader: undefined,
+  phone: undefined,
+  email: undefined,
+  status: '0'
+};
+const initData: PageData<DeptForm, DeptQuery> = {
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    deptName: undefined,
+    deptCategory: undefined,
+    status: undefined
+  },
+  rules: {
+    parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
+    deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
+    orderNum: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
+    email: [
+      {
+        type: 'email',
+        message: '请输入正确的邮箱地址',
+        trigger: ['blur', 'change']
+      }
+    ],
+    phone: [
+      {
+        pattern: /^1[3456789][0-9]\d{8}$/,
+        message: '请输入正确的手机号码',
+        trigger: 'blur'
+      }
+    ]
+  }
+};
+const data = reactive<PageData<DeptForm, DeptQuery>>(initData);
+
+const { queryParams, form, rules } = toRefs<PageData<DeptForm, DeptQuery>>(data);
+const { dialog, openDialog, closeDialog, setTitle } = useDialogState();
+
+/** 查询菜单列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listDept(queryParams.value);
+    const data = handleTree<DeptVO>(res.data, 'deptId');
+    if (data) {
+      deptList.value = data;
+    }
+  });
+};
+
+/** 查询当前部门的所有用户 */
+async function getDeptAllUser(deptId: any) {
+  if (deptId !== null && deptId !== '' && deptId !== undefined) {
+    const res = await listUserByDeptId(deptId);
+    deptUserList.value = res.data;
+  }
+}
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  closeDialog();
+};
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  deptFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 新增按钮操作 */
+const handleAdd = async (row?: Partial<DeptVO>) => {
+  reset();
+  const res = await listDept();
+  const data = handleTree<DeptOptionsType>(res.data, 'deptId');
+  if (data) {
+    deptOptions.value = data;
+    if (row && row.deptId) {
+      form.value.parentId = row?.deptId;
+    }
+    setTitle('添加部门');
+    openDialog();
+  }
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row: Partial<DeptVO>) => {
+  reset();
+  //查询当前部门所有用户
+  getDeptAllUser(row.deptId);
+  const res = await getDept(row.deptId);
+  form.value = res.data;
+  const response = await listDeptExcludeChild(row.deptId);
+  const data = handleTree<DeptOptionsType>(response.data, 'deptId');
+  if (data) {
+    deptOptions.value = data;
+    if (data.length === 0) {
+      const noResultsOptions: DeptOptionsType = {
+        deptId: res.data.parentId,
+        deptName: res.data.parentName,
+        children: []
+      };
+      deptOptions.value.push(noResultsOptions);
+    }
+  }
+  setTitle('修改部门');
+  openDialog();
+};
+/** 提交按钮 */
+const submitForm = () => {
+  deptFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.deptId ? await updateDept(form.value) : await addDept(form.value);
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+/** 删除按钮操作 */
+const handleDelete = async (row: Partial<DeptVO>) => {
+  await modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?');
+  await delDept(row.deptId);
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.table-crud-page;
+</style>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
new file mode 100644
index 0000000..8b7f84a
--- /dev/null
+++ b/src/views/system/dict/index.vue
@@ -0,0 +1,803 @@
+<template>
+  <div class="p-2 app-container dict-page">
+    <el-row :gutter="16" class="dict-grid">
+      <!-- 字典类型 -->
+      <el-col :xs="24" :lg="12">
+        <el-card shadow="hover" class="dict-card table-panel">
+          <template #header>
+            <div class="toolbar-shell dict-card__header">
+              <div class="table-heading">
+                <div
+                  class="panel-heading search-panel-toggle dict-title-toggle"
+                  :class="{ 'is-collapsed': !showTypeSearch }"
+                  @click.stop="showTypeSearch = !showTypeSearch"
+                >
+                  <div>
+                    <h3>字典管理</h3>
+                  </div>
+                </div>
+              </div>
+              <div class="toolbar-actions">
+                <right-toolbar v-model:show-search="showTypeSearch" :search="false" @query-table="getTypeList" />
+              </div>
+            </div>
+          </template>
+
+          <div class="dict-search" :class="{ 'is-collapsed': !showTypeSearch }">
+            <el-form ref="typeQueryFormRef" :model="typeQueryParams" :inline="true" class="query-form">
+              <el-form-item label="字典名称" prop="dictName">
+                <el-input
+                  v-model="typeQueryParams.dictName"
+                  placeholder="请输入字典名称"
+                  clearable
+                  @keyup.enter="handleTypeQuery"
+                />
+              </el-form-item>
+              <el-form-item label="字典类型" prop="dictType">
+                <el-input
+                  v-model="typeQueryParams.dictType"
+                  placeholder="请输入字典类型"
+                  clearable
+                  @keyup.enter="handleTypeQuery"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleTypeQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="handleTypeResetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div class="toolbar-actions dict-actions">
+            <el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleTypeAdd">
+              新增
+            </el-button>
+            <el-button
+              v-hasPermi="['system:dict:edit']"
+              type="success"
+              plain
+              icon="Edit"
+              :disabled="typeSingle"
+              @click="handleTypeUpdate()"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-hasPermi="['system:dict:remove']"
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="typeMultiple"
+              @click="handleTypeDelete()"
+            >
+              删除
+            </el-button>
+            <el-button
+              v-hasPermi="['system:dict:export']"
+              type="warning"
+              plain
+              icon="Download"
+              @click="handleTypeExport"
+            >
+              导出
+            </el-button>
+            <el-button
+              v-hasPermi="['system:dict:remove']"
+              type="danger"
+              plain
+              icon="Refresh"
+              @click="handleRefreshCache"
+            >
+              刷新缓存
+            </el-button>
+          </div>
+
+          <div class="dict-table-wrap">
+            <el-table
+              ref="typeTableRef"
+              v-loading="typeLoading"
+              border
+              class="data-table"
+              :data="typeList"
+              highlight-current-row
+              @row-click="handleTypeRowClick"
+              @selection-change="handleTypeSelectionChange"
+            >
+              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column v-if="false" label="字典编号" align="center" prop="dictId" />
+              <el-table-column label="字典名称" align="center" prop="dictName" width="120" />
+              <el-table-column label="字典类型" align="center" prop="dictType" width="160">
+                <template #default="scope">
+                  <span class="link-type" @click.stop="handleTypeRowClick(scope.row)">
+                    {{ scope.row.dictType }}
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column label="备注" align="center" prop="remark" width="160" />
+              <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="操作"
+                fixed="right"
+                align="center"
+                width="120"
+                class-name="small-padding fixed-width"
+              >
+                <template #default="scope">
+                  <el-tooltip content="修改" placement="top">
+                    <el-button
+                      v-hasPermi="['system:dict:edit']"
+                      link
+                      type="primary"
+                      icon="Edit"
+                      @click="handleTypeUpdate(scope.row)"
+                    ></el-button>
+                  </el-tooltip>
+                  <el-tooltip content="删除" placement="top">
+                    <el-button
+                      v-hasPermi="['system:dict:remove']"
+                      link
+                      type="primary"
+                      icon="Delete"
+                      @click="handleTypeDelete(scope.row)"
+                    ></el-button>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+
+          <pagination
+            v-show="typeTotal > 0"
+            v-model:page="typeQueryParams.pageNum"
+            v-model:limit="typeQueryParams.pageSize"
+            :total="typeTotal"
+            @pagination="getTypeList"
+          />
+        </el-card>
+      </el-col>
+
+      <!-- 字典数据 -->
+      <el-col :xs="24" :lg="12">
+        <el-card shadow="hover" class="dict-card table-panel">
+          <template #header>
+            <div class="toolbar-shell dict-card__header">
+              <div class="table-heading">
+                <div
+                  class="panel-heading search-panel-toggle dict-title-toggle"
+                  :class="{ 'is-collapsed': !showDataSearch }"
+                  @click.stop="showDataSearch = !showDataSearch"
+                >
+                  <div>
+                    <h3>字典数据</h3>
+                    <p v-if="hasCurrentDict" class="dict-card__subtitle">{{ currentDictLabel }}</p>
+                  </div>
+                </div>
+              </div>
+              <div class="toolbar-actions">
+                <right-toolbar v-model:show-search="showDataSearch" :search="false" @query-table="getDataList" />
+              </div>
+            </div>
+          </template>
+
+          <div class="dict-search" :class="{ 'is-collapsed': !showDataSearch }">
+            <el-form ref="dataQueryFormRef" :model="dataQueryParams" :inline="true" class="query-form">
+              <el-form-item label="字典标签" prop="dictLabel">
+                <el-input
+                  v-model="dataQueryParams.dictLabel"
+                  placeholder="请输入字典标签"
+                  clearable
+                  :disabled="!hasCurrentDict"
+                  @keyup.enter="handleDataQuery"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" :disabled="!hasCurrentDict" @click="handleDataQuery">
+                  搜索
+                </el-button>
+                <el-button icon="Refresh" :disabled="!hasCurrentDict" @click="handleDataResetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <div class="toolbar-actions dict-actions">
+            <el-button
+              v-hasPermi="['system:dict:add']"
+              type="primary"
+              plain
+              icon="Plus"
+              :disabled="!hasCurrentDict"
+              @click="handleDataAdd"
+            >
+              新增
+            </el-button>
+            <el-button
+              v-hasPermi="['system:dict:edit']"
+              type="success"
+              plain
+              icon="Edit"
+              :disabled="dataSingle || !hasCurrentDict"
+              @click="handleDataUpdate()"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-hasPermi="['system:dict:remove']"
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="dataMultiple || !hasCurrentDict"
+              @click="handleDataDelete()"
+            >
+              删除
+            </el-button>
+            <el-button
+              v-hasPermi="['system:dict:export']"
+              type="warning"
+              plain
+              icon="Download"
+              :disabled="!hasCurrentDict"
+              @click="handleDataExport"
+            >
+              导出
+            </el-button>
+          </div>
+
+          <div class="dict-table-wrap">
+            <el-table
+              v-loading="dataLoading"
+              border
+              class="data-table"
+              :data="dataList"
+              @selection-change="handleDataSelectionChange"
+            >
+              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column v-if="false" label="字典编码" align="center" prop="dictCode" />
+              <el-table-column label="字典标签" align="center" prop="dictLabel" width="100">
+                <template #default="scope">
+                  <span
+                    v-if="
+                      (scope.row.listClass === '' || scope.row.listClass === 'default') &&
+                      (scope.row.cssClass === '' || scope.row.cssClass == null)
+                    "
+                  >
+                    {{ scope.row.dictLabel }}
+                  </span>
+                  <el-tag
+                    v-else
+                    :type="
+                      scope.row.listClass === 'primary' || scope.row.listClass === 'default'
+                        ? 'primary'
+                        : scope.row.listClass
+                    "
+                    :class="scope.row.cssClass"
+                  >
+                    {{ scope.row.dictLabel }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="字典键值" align="center" prop="dictValue" width="100" />
+              <el-table-column label="字典排序" align="center" prop="dictSort" width="80" />
+              <el-table-column label="备注" align="center" prop="remark" width="100" />
+              <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="操作"
+                fixed="right"
+                align="center"
+                width="120"
+                class-name="small-padding fixed-width"
+              >
+                <template #default="scope">
+                  <el-tooltip content="修改" placement="top">
+                    <el-button
+                      v-hasPermi="['system:dict:edit']"
+                      link
+                      type="primary"
+                      icon="Edit"
+                      @click="handleDataUpdate(scope.row)"
+                    ></el-button>
+                  </el-tooltip>
+                  <el-tooltip content="删除" placement="top">
+                    <el-button
+                      v-hasPermi="['system:dict:remove']"
+                      link
+                      type="primary"
+                      icon="Delete"
+                      @click="handleDataDelete(scope.row)"
+                    ></el-button>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+
+          <pagination
+            v-show="dataTotal > 0"
+            v-model:page="dataQueryParams.pageNum"
+            v-model:limit="dataQueryParams.pageSize"
+            :total="dataTotal"
+            @pagination="getDataList"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 字典类型对话框 -->
+    <el-dialog v-model="typeDialog.visible" :title="typeDialog.title" width="500px" append-to-body>
+      <el-form ref="typeFormRef" :model="typeForm" :rules="typeRules" label-width="100px">
+        <el-form-item label="字典名称" prop="dictName">
+          <el-input v-model="typeForm.dictName" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item prop="dictType">
+          <template #label>
+            <span>
+              <el-tooltip content="数据存储中的Key值，如：sys_user_gender" placement="top">
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+              字典类型
+            </span>
+          </template>
+          <el-input v-model="typeForm.dictType" placeholder="请输入字典类型" maxlength="100" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="typeForm.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitTypeForm">确 定</el-button>
+          <el-button @click="cancelType">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 字典数据对话框 -->
+    <el-dialog v-model="dataDialog.visible" :title="dataDialog.title" width="500px" append-to-body>
+      <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="80px">
+        <el-form-item label="字典类型">
+          <el-input v-model="dataForm.dictType" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="数据标签" prop="dictLabel">
+          <el-input v-model="dataForm.dictLabel" placeholder="请输入数据标签" />
+        </el-form-item>
+        <el-form-item label="数据键值" prop="dictValue">
+          <el-input v-model="dataForm.dictValue" placeholder="请输入数据键值" />
+        </el-form-item>
+        <el-form-item label="样式属性" prop="cssClass">
+          <el-input v-model="dataForm.cssClass" placeholder="请输入样式属性" />
+        </el-form-item>
+        <el-form-item label="显示排序" prop="dictSort">
+          <el-input-number v-model="dataForm.dictSort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="回显样式" prop="listClass">
+          <el-select v-model="dataForm.listClass">
+            <el-option
+              v-for="item in listClassOptions"
+              :key="item.value"
+              :label="item.label + '(' + item.value + ')'"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="dataForm.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitDataForm">确 定</el-button>
+          <el-button @click="cancelData">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Dict" lang="ts">
+import { listData, getData, delData, addData, updateData } from '@/api/system/dict/data';
+import { DictDataForm, DictDataQuery, DictDataVO } from '@/api/system/dict/data/types';
+import { listType, getType, delType, addType, updateType, refreshCache } from '@/api/system/dict/type';
+import { DictTypeForm, DictTypeQuery, DictTypeVO } from '@/api/system/dict/type/types';
+import modal from '@/plugins/modal';
+import { useDictStore } from '@/store/modules/dict';
+import { download as requestDownload } from '@/utils/request';
+import { parseTime } from '@/utils/ruoyi';
+
+const typeList = ref<DictTypeVO[]>([]);
+const typeLoading = ref(true);
+const showTypeSearch = ref(true);
+const typeIds = ref<Array<number | string>>([]);
+const typeSingle = ref(true);
+const typeMultiple = ref(true);
+const typeTotal = ref(0);
+
+const typeFormRef = ref<ElFormInstance>();
+const typeQueryFormRef = ref<ElFormInstance>();
+const typeTableRef = ref<ElTableInstance>();
+
+const typeDialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const typeInitFormData: DictTypeForm = {
+  dictId: undefined,
+  dictName: '',
+  dictType: '',
+  remark: ''
+};
+
+const typeState = reactive<PageData<DictTypeForm, DictTypeQuery>>({
+  form: { ...typeInitFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dictName: '',
+    dictType: ''
+  },
+  rules: {
+    dictName: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
+    dictType: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams: typeQueryParams, form: typeForm, rules: typeRules } = toRefs(typeState);
+
+const currentDict = ref<DictTypeVO | null>(null);
+const hasCurrentDict = computed(() => !!currentDict.value);
+const currentDictLabel = computed(() => {
+  if (!currentDict.value) return '请先选择字典';
+  return `${currentDict.value.dictName} / ${currentDict.value.dictType}`;
+});
+
+const dataList = ref<DictDataVO[]>([]);
+const dataLoading = ref(false);
+const showDataSearch = ref(true);
+const dataIds = ref<Array<string | number>>([]);
+const dataSingle = ref(true);
+const dataMultiple = ref(true);
+const dataTotal = ref(0);
+
+const dataFormRef = ref<ElFormInstance>();
+const dataQueryFormRef = ref<ElFormInstance>();
+
+const dataDialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const listClassOptions = ref<Array<{ value: string; label: string }>>([
+  { value: 'default', label: '默认' },
+  { value: 'primary', label: '主要' },
+  { value: 'success', label: '成功' },
+  { value: 'info', label: '信息' },
+  { value: 'warning', label: '警告' },
+  { value: 'danger', label: '危险' }
+]);
+
+const dataInitFormData: DictDataForm = {
+  dictCode: undefined,
+  dictLabel: '',
+  dictValue: '',
+  cssClass: '',
+  listClass: 'primary',
+  dictSort: 0,
+  remark: ''
+};
+
+const dataState = reactive<PageData<DictDataForm, DictDataQuery>>({
+  form: { ...dataInitFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    dictName: '',
+    dictType: '',
+    dictLabel: ''
+  },
+  rules: {
+    dictLabel: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+    dictValue: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
+    dictSort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams: dataQueryParams, form: dataForm, rules: dataRules } = toRefs(dataState);
+
+const getTypeList = () => {
+  typeLoading.value = true;
+  listType(typeQueryParams.value).then(res => {
+    typeList.value = res.data?.rows;
+    typeTotal.value = res.data?.total;
+    typeLoading.value = false;
+    ensureCurrentType();
+  });
+};
+
+const ensureCurrentType = () => {
+  if (!typeList.value.length) {
+    currentDict.value = null;
+    dataQueryParams.value.dictType = '';
+    dataList.value = [];
+    dataTotal.value = 0;
+    return;
+  }
+
+  const current = currentDict.value && typeList.value.find(item => item.dictId === currentDict.value?.dictId);
+  const nextRow = current || typeList.value[0];
+  setCurrentType(nextRow);
+};
+
+const setCurrentType = (row: DictTypeVO) => {
+  currentDict.value = row;
+  dataQueryParams.value.dictType = row.dictType;
+  dataQueryParams.value.pageNum = 1;
+  dataQueryParams.value.dictLabel = '';
+  getDataList();
+  nextTick(() => typeTableRef.value?.setCurrentRow(row));
+};
+
+const handleTypeRowClick = (row: Partial<DictTypeVO>) => {
+  setCurrentType(row as DictTypeVO);
+};
+
+const cancelType = () => {
+  resetTypeForm();
+  typeDialog.visible = false;
+};
+
+const resetTypeForm = () => {
+  typeForm.value = { ...typeInitFormData };
+  typeFormRef.value?.resetFields();
+};
+
+const handleTypeQuery = () => {
+  typeQueryParams.value.pageNum = 1;
+  getTypeList();
+};
+
+const handleTypeResetQuery = () => {
+  typeQueryFormRef.value?.resetFields();
+  handleTypeQuery();
+};
+
+const handleTypeAdd = () => {
+  resetTypeForm();
+  typeDialog.visible = true;
+  typeDialog.title = '添加字典类型';
+};
+
+const handleTypeSelectionChange = (selection: DictTypeVO[]) => {
+  typeIds.value = selection.map(item => item.dictId);
+  typeSingle.value = selection.length != 1;
+  typeMultiple.value = !selection.length;
+};
+
+const handleTypeUpdate = async (row?: Partial<DictTypeVO>) => {
+  resetTypeForm();
+  const dictId = row?.dictId || typeIds.value[0];
+  const res = await getType(dictId);
+  Object.assign(typeForm.value, res.data);
+  typeDialog.visible = true;
+  typeDialog.title = '修改字典类型';
+};
+
+const submitTypeForm = () => {
+  typeFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      typeForm.value.dictId ? await updateType(typeForm.value) : await addType(typeForm.value);
+      modal.msgSuccess('操作成功');
+      typeDialog.visible = false;
+      getTypeList();
+    }
+  });
+};
+
+const handleTypeDelete = async (row?: Partial<DictTypeVO>) => {
+  const dictIds = row?.dictId || typeIds.value;
+  await modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？');
+  await delType(dictIds);
+  getTypeList();
+  modal.msgSuccess('删除成功');
+};
+
+const handleTypeExport = () => {
+  requestDownload(
+    'system/dict/type/export',
+    {
+      ...typeQueryParams.value
+    },
+    `dict_${new Date().getTime()}.xlsx`
+  );
+};
+
+const handleRefreshCache = async () => {
+  await refreshCache();
+  modal.msgSuccess('刷新成功');
+  useDictStore().cleanDict();
+};
+
+const getDataList = async () => {
+  if (!currentDict.value) {
+    dataList.value = [];
+    dataTotal.value = 0;
+    dataLoading.value = false;
+    return;
+  }
+  dataLoading.value = true;
+  const res = await listData(dataQueryParams.value);
+  dataList.value = res.data?.rows;
+  dataTotal.value = res.data?.total;
+  dataLoading.value = false;
+};
+
+const cancelData = () => {
+  dataDialog.visible = false;
+  resetDataForm();
+};
+
+const resetDataForm = () => {
+  dataForm.value = { ...dataInitFormData };
+  dataFormRef.value?.resetFields();
+};
+
+const handleDataQuery = () => {
+  if (!currentDict.value) return;
+  dataQueryParams.value.pageNum = 1;
+  getDataList();
+};
+
+const handleDataResetQuery = () => {
+  dataQueryFormRef.value?.resetFields();
+  dataQueryParams.value.dictLabel = '';
+  handleDataQuery();
+};
+
+const handleDataAdd = () => {
+  if (!currentDict.value) {
+    modal.msgWarning('请先选择字典');
+    return;
+  }
+  resetDataForm();
+  dataForm.value.dictType = currentDict.value.dictType;
+  dataDialog.visible = true;
+  dataDialog.title = '添加字典数据';
+};
+
+const handleDataSelectionChange = (selection: DictDataVO[]) => {
+  dataIds.value = selection.map(item => item.dictCode);
+  dataSingle.value = selection.length != 1;
+  dataMultiple.value = !selection.length;
+};
+
+const handleDataUpdate = async (row?: Partial<DictDataVO>) => {
+  if (!currentDict.value) {
+    modal.msgWarning('请先选择字典');
+    return;
+  }
+  resetDataForm();
+  const dictCode = row?.dictCode || dataIds.value[0];
+  const res = await getData(dictCode);
+  Object.assign(dataForm.value, res.data);
+  dataDialog.visible = true;
+  dataDialog.title = '修改字典数据';
+};
+
+const submitDataForm = () => {
+  dataFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      dataForm.value.dictCode ? await updateData(dataForm.value) : await addData(dataForm.value);
+      useDictStore().removeDict(dataQueryParams.value.dictType);
+      modal.msgSuccess('操作成功');
+      dataDialog.visible = false;
+      await getDataList();
+    }
+  });
+};
+
+const handleDataDelete = async (row?: Partial<DictDataVO>) => {
+  if (!currentDict.value) {
+    modal.msgWarning('请先选择字典');
+    return;
+  }
+  const dictCodes = row?.dictCode || dataIds.value;
+  await modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？');
+  await delData(dictCodes);
+  await getDataList();
+  modal.msgSuccess('删除成功');
+  useDictStore().removeDict(dataQueryParams.value.dictType);
+};
+
+const handleDataExport = () => {
+  if (!currentDict.value) {
+    modal.msgWarning('请先选择字典');
+    return;
+  }
+  requestDownload(
+    'system/dict/data/export',
+    {
+      ...dataQueryParams.value
+    },
+    `dict_data_${new Date().getTime()}.xlsx`
+  );
+};
+
+onMounted(() => {
+  getTypeList();
+});
+</script>
+
+<style lang="scss" scoped>
+.dict-grid {
+  row-gap: 16px;
+}
+
+.dict-card {
+  height: 100%;
+}
+
+.dict-card__header {
+  gap: 12px;
+}
+
+.dict-title-toggle {
+  padding: 0 !important;
+}
+
+.dict-title-toggle.is-collapsed::after {
+  transform: rotate(45deg);
+}
+
+.dict-card__subtitle {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.dict-search {
+  overflow: hidden;
+  max-height: 240px;
+  opacity: 1;
+  margin-bottom: 12px;
+  transition:
+    max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.24s ease,
+    margin-bottom 0.24s ease;
+}
+
+.dict-search.is-collapsed {
+  max-height: 0;
+  opacity: 0;
+  margin-bottom: 0;
+  pointer-events: none;
+}
+
+.dict-search :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.dict-actions {
+  margin: 0 0 12px;
+  padding-bottom: 0;
+}
+
+.dict-actions :deep(.el-button) {
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 10px !important;
+}
+
+.dict-actions :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
+
+.dict-table-wrap {
+  overflow-x: auto;
+}
+</style>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
new file mode 100644
index 0000000..d6d89bd
--- /dev/null
+++ b/src/views/system/menu/index.vue
@@ -0,0 +1,654 @@
+<template>
+  <div class="p-2 app-container system-menu-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div>
+              <span class="panel-kicker">Search Filters</span>
+              <h3>筛选条件</h3>
+            </div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="菜单名称" prop="menuName">
+            <el-input
+              v-model="queryParams.menuName"
+              placeholder="请输入菜单名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
+              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <span class="panel-kicker">Menu Dataset</span>
+            <h3>菜单列表</h3>
+            <p>支持树形加载、图标选择、级联删除和目录/菜单/按钮三级维护。</p>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['system:menu:add']" type="primary" plain icon="Plus" @click="handleAdd()">
+              新增
+            </el-button>
+            <el-button
+              v-hasPermi="['system:menu:remove']"
+              type="danger"
+              plain
+              icon="Delete"
+              @click="handleCascadeDelete"
+              :loading="deleteLoading"
+            >
+              级联删除
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        ref="menuTableRef"
+        v-loading="loading"
+        class="data-table"
+        :data="menuList"
+        row-key="menuId"
+        border
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        :default-expand-all="false"
+        lazy
+        :load="getChildrenList"
+        :expand-change="expandMenuHandle"
+      >
+        <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="220">
+          <template #default="scope">
+            <div class="menu-name-cell">
+              <svg-icon v-if="isMenuIconVisible(scope.row.icon)" :icon-class="scope.row.icon" />
+              <span class="menu-name-text">{{ scope.row.menuName }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" width="100" align="center">
+          <template #default="scope">
+            <el-tag :type="getMenuTypeMeta(scope.row).type" size="small">
+              {{ getMenuTypeMeta(scope.row).label }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
+        <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="status" label="状态" width="80">
+          <template #default="scope">
+            <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="180">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button
+                v-hasPermi="['system:menu:edit']"
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+              />
+            </el-tooltip>
+            <el-tooltip content="新增" placement="top">
+              <el-button
+                v-hasPermi="['system:menu:add']"
+                link
+                type="primary"
+                icon="Plus"
+                @click="handleAdd(scope.row)"
+              />
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                v-hasPermi="['system:menu:remove']"
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+              />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close append-to-bod width="750px">
+      <el-form ref="menuFormRef" :model="form" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="上级菜单">
+              <el-tree-select
+                v-model="form.parentId"
+                :data="menuOptions"
+                :props="{ value: 'menuId', label: 'menuName', children: 'children' } as any"
+                value-key="menuId"
+                placeholder="选择上级菜单"
+                check-strictly
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="菜单类型" prop="menuType">
+              <el-radio-group v-model="form.menuType">
+                <el-radio value="M">目录</el-radio>
+                <el-radio value="C">菜单</el-radio>
+                <el-radio value="F">按钮</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col v-if="form.menuType !== 'F'" :span="24">
+            <el-form-item label="菜单图标" prop="icon">
+              <!-- 图标选择器 -->
+              <icon-select v-model="form.icon" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单名称" prop="menuName">
+              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="orderNum">
+              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="form.menuType !== 'F'" :span="12">
+            <el-form-item>
+              <template #label>
+                <span>
+                  <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
+                    <el-icon>
+                      <question-filled />
+                    </el-icon>
+                  </el-tooltip>
+                  是否外链
+                </span>
+              </template>
+              <el-radio-group v-model="form.isFrame">
+                <el-radio v-for="dict in sys_yes_no" :key="dict.value" :value="dict.value">
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col v-if="form.menuType !== 'F'" :span="12">
+            <el-form-item prop="path">
+              <template #label>
+                <span>
+                  <el-tooltip
+                    content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
+                    placement="top"
+                  >
+                    <el-icon>
+                      <question-filled />
+                    </el-icon>
+                  </el-tooltip>
+                  路由地址
+                </span>
+              </template>
+              <el-input v-model="form.path" placeholder="请输入路由地址" />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="form.menuType === 'C'" :span="12">
+            <el-form-item prop="component">
+              <template #label>
+                <span>
+                  <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
+                    <el-icon>
+                      <question-filled />
+                    </el-icon>
+                  </el-tooltip>
+                  组件路径
+                </span>
+              </template>
+              <el-input v-model="form.component" placeholder="请输入组件路径" />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="form.menuType !== 'M'" :span="12">
+            <el-form-item>
+              <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
+              <template #label>
+                <span>
+                  <el-tooltip
+                    content="控制器中定义的权限字符，如：@SaCheckPermission('system:user:list')"
+                    placement="top"
+                  >
+                    <el-icon>
+                      <question-filled />
+                    </el-icon>
+                  </el-tooltip>
+                  权限字符
+                </span>
+              </template>
+            </el-form-item>
+          </el-col>
+          <el-col v-if="form.menuType === 'C'" :span="12">
+            <el-form-item>
+              <el-input v-model="form.queryParam" placeholder="请输入路由参数" maxlength="255" />
+              <template #label>
+                <span>
+                  <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
+                    <el-icon>
+                      <question-filled />
+                    </el-icon>
+                  </el-tooltip>
+                  路由参数
+                </span>
+              </template>
+            </el-form-item>
+          </el-col>
+          <el-col v-if="form.menuType === 'C'" :span="12">
+            <el-form-item>
+              <template #label>
+                <span>
+                  <el-tooltip
+                    content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致"
+                    placement="top"
+                  >
+                    <el-icon>
+                      <question-filled />
+                    </el-icon>
+                  </el-tooltip>
+                  是否缓存
+                </span>
+              </template>
+              <el-radio-group v-model="form.isCache">
+                <el-radio value="Y">缓存</el-radio>
+                <el-radio value="N">不缓存</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col v-if="form.menuType !== 'F'" :span="12">
+            <el-form-item>
+              <template #label>
+                <span>
+                  <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
+                    <el-icon>
+                      <question-filled />
+                    </el-icon>
+                  </el-tooltip>
+                  显示状态
+                </span>
+              </template>
+              <el-radio-group v-model="form.visible">
+                <el-radio v-for="dict in sys_show_hide" :key="dict.value" :value="dict.value">
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item>
+              <template #label>
+                <span>
+                  <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
+                    <el-icon>
+                      <question-filled />
+                    </el-icon>
+                  </el-tooltip>
+                  菜单状态
+                </span>
+              </template>
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col v-if="form.visible !== '0'" :span="12">
+            <el-form-item label="激活路径" prop="activeMenu">
+              <template #label>
+                <span>
+                  <el-tooltip content="隐藏菜单填写默认激活路由，比如激活父菜单的路由 /system/user" placement="top">
+                    <el-icon>
+                      <question-filled />
+                    </el-icon>
+                  </el-tooltip>
+                  激活路由
+                </span>
+              </template>
+              <el-input v-model="form.activeMenu" placeholder="请输入激活路径" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" placeholder="请输入备注" maxlength="500" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="deleteDialog.visible" :title="deleteDialog.title" destroy-on-close append-to-bod width="750px">
+      <el-tree
+        ref="menuTreeRef"
+        class="tree-border"
+        :data="menuOptions"
+        show-checkbox
+        node-key="menuId"
+        :check-strictly="false"
+        empty-text="加载中，请稍候"
+        :default-expanded-keys="[0]"
+        :props="{ value: 'menuId', label: 'menuName', children: 'children' } as any"
+      />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitDeleteForm" :loading="deleteLoading">确 定</el-button>
+          <el-button @click="cancelCascade">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Menu" lang="ts">
+import { addMenu, cascadeDelMenu, delMenu, getMenu, listMenu, updateMenu } from '@/api/system/menu';
+import { MenuForm, MenuQuery, MenuVO } from '@/api/system/menu/types';
+import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+import { handleTree } from '@/utils/ruoyi';
+
+interface MenuOptionsType {
+  menuId: number;
+  menuName: string;
+  children: MenuOptionsType[] | undefined;
+}
+
+const { sys_show_hide, sys_normal_disable, sys_yes_no } = toRefs<any>(
+  useDict('sys_show_hide', 'sys_normal_disable', 'sys_yes_no')
+);
+
+const menuList = ref<MenuVO[]>([]);
+const menuChildrenListMap = ref({});
+const menuExpandMap = ref({});
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const menuOptions = ref<MenuOptionsType[]>([]);
+
+const queryFormRef = ref<ElFormInstance>();
+const menuFormRef = ref<ElFormInstance>();
+const initFormData = {
+  path: '',
+  menuId: undefined,
+  parentId: 0,
+  menuName: '',
+  icon: '',
+  menuType: MenuTypeEnum.M,
+  orderNum: 1,
+  isFrame: 'N',
+  isCache: 'Y',
+  visible: '0',
+  status: '0',
+  activeMenu: '',
+  remark: ''
+};
+const data = reactive<PageData<MenuForm, MenuQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    menuName: undefined,
+    status: undefined
+  },
+  rules: {
+    menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
+    orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
+    path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }]
+  }
+});
+
+const menuTableRef = ref<ElTableInstance>();
+
+const { queryParams, form, rules } = toRefs<PageData<MenuForm, MenuQuery>>(data);
+const { dialog, openDialog, closeDialog, setTitle } = useDialogState();
+
+type MenuTagType = 'warning' | 'primary' | 'success' | 'danger';
+
+const isMenuIconVisible = (icon?: string) => {
+  const normalizedIcon = icon?.trim();
+  return !!normalizedIcon && normalizedIcon !== '#';
+};
+
+const getMenuTypeMeta = (menu: Partial<MenuVO>): { label: string; type: MenuTagType } => {
+  if (menu.menuType === MenuTypeEnum.F) {
+    return { label: '按钮', type: 'warning' };
+  }
+  if (menu.isFrame === 'Y') {
+    return { label: '外链', type: 'danger' };
+  }
+  if (menu.menuType === MenuTypeEnum.M) {
+    return { label: '目录', type: 'primary' };
+  }
+  return { label: '菜单', type: 'success' };
+};
+
+/** 获取子菜单列表 */
+const getChildrenList = async (row: any, treeNode: unknown, resolve: (data: any[]) => void) => {
+  menuExpandMap.value[row.menuId] = { row, treeNode, resolve };
+  const children = menuChildrenListMap.value[row.menuId] || [];
+  // 菜单的子菜单清空后关闭展开
+  if (children.length == 0) {
+    // fix: 处理当菜单只有一个子菜单并被删除，需要将父菜单的展开状态关闭
+    menuTableRef.value?.updateKeyChildren(row.menuId, children);
+  }
+  resolve(children);
+};
+
+/** 收起菜单时从menuExpandMap中删除对应菜单id数据 */
+const expandMenuHandle = async (row: any, expanded: boolean) => {
+  if (!expanded) {
+    menuExpandMap.value[row.menuId] = undefined;
+  }
+};
+
+/** 刷新展开的菜单数据 */
+const refreshLoadTree = (parentId: string | number) => {
+  if (menuExpandMap.value[parentId]) {
+    const { row, treeNode, resolve } = menuExpandMap.value[parentId];
+    if (row) {
+      getChildrenList(row, treeNode, resolve);
+      if (row.parentId) {
+        const grandpaMenu = menuExpandMap.value[row.parentId];
+        getChildrenList(grandpaMenu.row, grandpaMenu.treeNode, grandpaMenu.resolve);
+      }
+    }
+  }
+};
+
+/** 重新加载所有已展开的菜单的数据 */
+const refreshAllExpandMenuData = () => {
+  for (const menuId in menuExpandMap.value) {
+    refreshLoadTree(menuId);
+  }
+};
+
+/** 查询菜单列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listMenu(queryParams.value);
+
+    const tempMap = {};
+    // 存储 父菜单:子菜单列表
+    for (const menu of res.data) {
+      const parentId = menu.parentId;
+      if (!tempMap[parentId]) {
+        tempMap[parentId] = [];
+      }
+      tempMap[parentId].push(menu);
+    }
+    // 创建一个当前所有 menuId 的 Set，用于查找父菜单是否存在于当前数据中
+    const menuIdSet = new Set();
+    // 设置有没有子菜单
+    for (const menu of res.data) {
+      menu['hasChildren'] = tempMap[menu.menuId]?.length > 0;
+      menuIdSet.add(menu.menuId);
+    }
+    menuChildrenListMap.value = tempMap;
+    // 找出所有父ID不在当前菜单ID集合中的菜单项，作为新的顶层菜单
+    menuList.value = res.data.filter(menu => !menuIdSet.has(menu.parentId));
+    // 根据新数据重新加载子菜单数据
+    refreshAllExpandMenuData();
+  });
+};
+/** 查询菜单下拉树结构 */
+const getTreeselect = async () => {
+  menuOptions.value = [];
+  const response = await listMenu();
+  const menu: MenuOptionsType = { menuId: 0, menuName: '主类目', children: [] };
+  menu.children = handleTree<MenuOptionsType>(response.data, 'menuId');
+  menuOptions.value.push(menu);
+};
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  closeDialog();
+};
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  menuFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  afterReset: () => {
+    handleQuery();
+  }
+});
+/** 新增按钮操作 */
+const handleAdd = (row?: Partial<MenuVO>) => {
+  reset();
+  getTreeselect();
+  row && row.menuId ? (form.value.parentId = row.menuId) : (form.value.parentId = 0);
+  setTitle('添加菜单');
+  openDialog();
+};
+/** 修改按钮操作 */
+const handleUpdate = async (row: Partial<MenuVO>) => {
+  reset();
+  await getTreeselect();
+  if (row.menuId) {
+    const { data } = await getMenu(row.menuId);
+    form.value = data;
+  }
+  setTitle('修改菜单');
+  openDialog();
+};
+/** 提交按钮 */
+const submitForm = () => {
+  menuFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.menuId ? await updateMenu(form.value) : await addMenu(form.value);
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+/** 删除按钮操作 */
+const handleDelete = async (row: Partial<MenuVO>) => {
+  await modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?');
+  await delMenu(row.menuId);
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+const deleteLoading = ref<boolean>(false);
+const menuTreeRef = ref<ElTreeInstance>();
+
+const {
+  dialog: deleteDialog,
+  openDialog: openDeleteDialog,
+  closeDialog: closeDeleteDialog
+} = useDialogState('级联删除菜单');
+
+/** 级联删除按钮操作 */
+const handleCascadeDelete = () => {
+  menuTreeRef.value?.setCheckedKeys([]);
+  getTreeselect();
+  openDeleteDialog();
+};
+
+/** 取消按钮 */
+const cancelCascade = () => {
+  menuTreeRef.value?.setCheckedKeys([]);
+  closeDeleteDialog();
+};
+
+/** 删除提交按钮 */
+const submitDeleteForm = async () => {
+  const menuIds = menuTreeRef.value?.getCheckedKeys();
+  if (menuIds.length < 0) {
+    modal.msgWarning('请选择要删除的菜单');
+    return;
+  }
+
+  deleteLoading.value = true;
+  await cascadeDelMenu(menuIds).finally(() => (deleteLoading.value = false));
+  await getList();
+  modal.msgSuccess('删除成功');
+  closeDeleteDialog();
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.table-crud-page;
+
+.data-table {
+  .menu-name-cell {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .menu-name-text {
+    min-width: 0;
+  }
+}
+</style>
+
+<style scoped lang="scss">
+.tree-border {
+  height: 300px;
+  overflow: auto;
+}
+</style>
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
new file mode 100644
index 0000000..0716ef5
--- /dev/null
+++ b/src/views/system/notice/index.vue
@@ -0,0 +1,460 @@
+<template>
+  <div class="p-2 app-container system-notice-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div>
+              <span class="panel-kicker">Search Filters</span>
+              <h3>筛选条件</h3>
+            </div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="公告标题" prop="noticeTitle">
+            <el-input
+              v-model="queryParams.noticeTitle"
+              placeholder="请输入公告标题"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="操作人员" prop="createByName">
+            <el-input
+              v-model="queryParams.createByName"
+              placeholder="请输入操作人员"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="类型" prop="noticeType">
+            <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable>
+              <el-option v-for="dict in sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <span class="panel-kicker">Notice Dataset</span>
+            <h3>公告列表</h3>
+            <p>共 {{ total }} 条记录，支持类型筛选、内容编辑和状态管理。</p>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['system:notice:add']" type="primary" plain icon="Plus" @click="handleAdd">
+              新增
+            </el-button>
+            <el-button
+              v-hasPermi="['system:notice:edit']"
+              type="success"
+              plain
+              icon="Edit"
+              :disabled="single"
+              @click="handleUpdate()"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-hasPermi="['system:notice:remove']"
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete()"
+            >
+              删除
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        border
+        class="data-table"
+        :data="noticeList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column v-if="false" label="序号" align="center" prop="noticeId" width="100" />
+        <el-table-column label="公告标题" align="center" prop="noticeTitle" :show-overflow-tooltip="true" />
+        <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
+          <template #default="scope">
+            <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="status" width="100">
+          <template #default="scope">
+            <dict-tag :options="sys_notice_status" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column label="创建者" align="center" prop="createByName" width="100" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="100">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="详情" placement="top">
+              <el-button link type="primary" icon="View" @click="handleDetail(scope.row)"></el-button>
+            </el-tooltip>
+            <el-tooltip content="修改" placement="top">
+              <el-button
+                v-hasPermi="['system:notice:edit']"
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                v-hasPermi="['system:notice:remove']"
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </el-card>
+    <!-- 添加或修改公告对话框 -->
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="780px"
+      append-to-body
+      destroy-on-close
+      @closed="handleDialogClosed"
+    >
+      <el-form ref="noticeFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="公告标题" prop="noticeTitle">
+              <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公告类型" prop="noticeType">
+              <el-select v-model="form.noticeType" placeholder="请选择">
+                <el-option
+                  v-for="dict in sys_notice_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in sys_notice_status" :key="dict.value" :value="dict.value">
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="内容">
+              <editor v-model="form.noticeContent" :min-height="192" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="detailDialog.visible"
+      title="公告详情"
+      width="820px"
+      append-to-body
+      @closed="handleDetailDialogClosed"
+    >
+      <div class="notice-detail">
+        <div class="notice-detail__header">
+          <div class="notice-detail__title">{{ detailForm.noticeTitle || '-' }}</div>
+          <div class="notice-detail__meta">
+            <div class="notice-detail__meta-item">
+              <span class="notice-detail__meta-label">类型：</span>
+              <dict-tag :options="sys_notice_type" :value="detailForm.noticeType" />
+            </div>
+            <div class="notice-detail__meta-item">
+              <span class="notice-detail__meta-label">状态：</span>
+              <dict-tag :options="sys_notice_status" :value="detailForm.status" />
+            </div>
+            <div class="notice-detail__meta-item">
+              <span class="notice-detail__meta-label">创建者：</span>
+              <span>{{ detailForm.createByName || '-' }}</span>
+            </div>
+            <div class="notice-detail__meta-item">
+              <span class="notice-detail__meta-label">创建时间：</span>
+              <span>{{ parseTime(detailForm.createTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</span>
+            </div>
+          </div>
+        </div>
+        <el-divider />
+        <div class="notice-detail__content" v-html="safeNoticeContent"></div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Notice" lang="ts">
+import { useRoute, useRouter } from 'vue-router';
+import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/system/notice';
+import { NoticeForm, NoticeQuery, NoticeVO } from '@/api/system/notice/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+import { resolveOssContent } from '@/utils/ossContent';
+import { parseTime } from '@/utils/ruoyi';
+import { sanitizeHtml } from '@/utils/sanitize';
+
+const { sys_notice_status, sys_notice_type } = toRefs<any>(useDict('sys_notice_status', 'sys_notice_type'));
+const route = useRoute();
+const router = useRouter();
+
+const noticeList = ref<NoticeVO[]>([]);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const noticeFormRef = ref<ElFormInstance>();
+const routeDetailSyncing = ref(false);
+const emptyNoticeContent = '<p>暂无公告内容</p>';
+
+const initFormData: NoticeForm = {
+  noticeId: undefined,
+  noticeTitle: '',
+  noticeType: '',
+  noticeContent: '',
+  status: '0',
+  remark: '',
+  createByName: ''
+};
+const detailForm = ref<NoticeVO>({} as NoticeVO);
+const safeNoticeContent = computed(() => sanitizeHtml(detailForm.value.noticeContent || emptyNoticeContent));
+const data = reactive<PageData<NoticeForm, NoticeQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    noticeTitle: '',
+    createByName: '',
+    status: '',
+    noticeType: ''
+  },
+  rules: {
+    noticeTitle: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
+    noticeType: [{ required: true, message: '公告类型不能为空', trigger: 'change' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<NoticeVO>(item => item.noticeId);
+const {
+  dialog,
+  resetForm: reset,
+  openDialog,
+  showDialog,
+  closeDialog
+} = useFormDialog({
+  form,
+  formRef: noticeFormRef,
+  initialFormData: initFormData
+});
+const {
+  dialog: detailDialog,
+  openDialog: openDetailDialog,
+  closeDialog: closeDetailDialog
+} = useDialogState('公告详情');
+
+/** 查询公告列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listNotice(queryParams.value);
+    noticeList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+/** 取消按钮 */
+const cancel = () => {
+  closeDialog();
+};
+/** 对话框关闭后重置 */
+const handleDialogClosed = () => {
+  reset();
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
+/** 新增按钮操作 */
+const handleAdd = () => {
+  openDialog('添加公告');
+};
+/**修改按钮操作 */
+const handleUpdate = async (row?: Partial<NoticeVO>) => {
+  reset();
+  const noticeId = row?.noticeId || ids.value[0];
+  const { data } = await getNotice(noticeId);
+  Object.assign(form.value, data);
+  showDialog('修改公告');
+};
+/** 详情按钮操作 */
+const handleDetail = async (row: Partial<NoticeVO>) => {
+  await openDetail(row.noticeId);
+};
+/** 打开详情 */
+const openDetail = async (noticeId: string | number) => {
+  const { data } = await getNotice(noticeId);
+  data.noticeContent = await resolveOssContent(data.noticeContent);
+  detailForm.value = data;
+  openDetailDialog();
+};
+/** 详情弹窗关闭后移除路由参数 */
+const handleDetailDialogClosed = async () => {
+  if (!route.query.noticeId) {
+    return;
+  }
+  routeDetailSyncing.value = true;
+  await router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      noticeId: undefined
+    }
+  });
+  routeDetailSyncing.value = false;
+};
+/** 提交按钮 */
+const submitForm = () => {
+  noticeFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.noticeId ? await updateNotice(form.value) : await addNotice(form.value);
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<NoticeVO>) => {
+  const noticeIds = row?.noticeId || ids.value;
+  await modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？');
+  await delNotice(noticeIds);
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+onMounted(() => {
+  getList();
+});
+
+watch(
+  () => route.query.noticeId,
+  async noticeId => {
+    if (routeDetailSyncing.value || !noticeId) {
+      return;
+    }
+    await openDetail(String(noticeId));
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.table-crud-page;
+
+.notice-detail {
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__title {
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--el-text-color-primary);
+    line-height: 1.4;
+  }
+
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px 20px;
+    color: var(--el-text-color-secondary);
+    font-size: 13px;
+    line-height: 1.6;
+  }
+
+  &__meta-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &__meta-label {
+    color: var(--el-text-color-secondary);
+    white-space: nowrap;
+  }
+
+  &__content {
+    max-height: 60vh;
+    overflow: auto;
+    color: var(--el-text-color-primary);
+    line-height: 1.8;
+    word-break: break-word;
+  }
+
+  :deep(.notice-detail__meta-item > div) {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/views/system/oss/config.vue b/src/views/system/oss/config.vue
new file mode 100644
index 0000000..0b4cf0c
--- /dev/null
+++ b/src/views/system/oss/config.vue
@@ -0,0 +1,408 @@
+<template>
+  <div class="p-2 app-container system-oss-config-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div>
+              <span class="panel-kicker">Search Filters</span>
+              <h3>筛选条件</h3>
+            </div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="配置key" prop="configKey">
+            <el-input v-model="queryParams.configKey" placeholder="配置key" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="桶名称" prop="bucketName">
+            <el-input
+              v-model="queryParams.bucketName"
+              placeholder="请输入桶名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="是否默认" prop="status">
+            <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+              <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <span class="panel-kicker">Storage Config</span>
+            <h3>OSS 配置</h3>
+            <p>共 {{ total }} 条记录，支持默认桶切换、权限策略维护和站点配置。</p>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['system:ossConfig:add']" type="primary" plain icon="Plus" @click="handleAdd">
+              新增
+            </el-button>
+            <el-button
+              v-hasPermi="['system:ossConfig:edit']"
+              type="success"
+              plain
+              icon="Edit"
+              :disabled="single"
+              @click="handleUpdate()"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-hasPermi="['system:ossConfig:remove']"
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete()"
+            >
+              删除
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        border
+        class="data-table"
+        :data="ossConfigList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column v-if="columns[0].visible" label="主建" align="center" prop="ossConfigId" />
+        <el-table-column v-if="columns[1].visible" label="配置key" align="center" prop="configKey" />
+        <el-table-column v-if="columns[2].visible" label="访问站点" align="center" prop="endpoint" width="200" />
+        <el-table-column v-if="columns[3].visible" label="自定义域名" align="center" prop="domainUrl" width="200" />
+        <el-table-column v-if="columns[4].visible" label="桶名称" align="center" prop="bucketName" />
+        <el-table-column v-if="columns[5].visible" label="前缀" align="center" prop="prefix" />
+        <el-table-column v-if="columns[6].visible" label="域" align="center" prop="region" />
+        <el-table-column v-if="columns[7].visible" label="桶权限类型" align="center" prop="accessPolicy">
+          <template #default="scope">
+            <el-tag v-if="scope.row.accessPolicy === '0'" type="warning">private</el-tag>
+            <el-tag v-if="scope.row.accessPolicy === '1'" type="success">public</el-tag>
+            <el-tag v-if="scope.row.accessPolicy === '2'" type="info">custom</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="columns[8].visible" label="是否默认" align="center" prop="status">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.status"
+              active-value="Y"
+              inactive-value="N"
+              @change="handleStatusChange(scope.row)"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" align="center" width="150" class-name="small-padding">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button
+                v-hasPermi="['system:ossConfig:edit']"
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                v-hasPermi="['system:ossConfig:remove']"
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </el-card>
+    <!-- 添加或修改对象存储配置对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="800px" append-to-body>
+      <el-form ref="ossConfigFormRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="配置key" prop="configKey">
+          <el-input v-model="form.configKey" placeholder="请输入配置key" />
+        </el-form-item>
+        <el-form-item label="访问站点" prop="endpoint">
+          <el-input v-model="form.endpoint" placeholder="请输入访问站点">
+            <template #prefix>
+              <span style="color: #999">{{ protocol }}</span>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="自定义域名" prop="domainUrl">
+          <el-input v-model="form.domainUrl" placeholder="请输入自定义域名">
+            <template #prefix>
+              <span style="color: #999">{{ protocol }}</span>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="accessKey" prop="accessKey">
+          <el-input v-model="form.accessKey" placeholder="请输入accessKey" />
+        </el-form-item>
+        <el-form-item label="secretKey" prop="secretKey">
+          <el-input v-model="form.secretKey" placeholder="请输入秘钥" show-password />
+        </el-form-item>
+        <el-form-item label="桶名称" prop="bucketName">
+          <el-input v-model="form.bucketName" placeholder="请输入桶名称" />
+        </el-form-item>
+        <el-form-item label="前缀" prop="prefix">
+          <el-input v-model="form.prefix" placeholder="请输入前缀" />
+        </el-form-item>
+        <el-form-item label="是否HTTPS">
+          <el-radio-group v-model="form.isHttps">
+            <el-radio v-for="dict in sys_yes_no" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="桶权限类型">
+          <el-radio-group v-model="form.accessPolicy">
+            <el-radio value="0">private</el-radio>
+            <el-radio value="1">public</el-radio>
+            <el-radio value="2">custom</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="域" prop="region">
+          <el-input v-model="form.region" placeholder="请输入域" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="OssConfig" lang="ts">
+import {
+  listOssConfig,
+  getOssConfig,
+  delOssConfig,
+  addOssConfig,
+  updateOssConfig,
+  changeOssConfigStatus
+} from '@/api/system/ossConfig';
+import { OssConfigForm, OssConfigQuery, OssConfigVO } from '@/api/system/ossConfig/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+
+const { sys_yes_no } = toRefs<any>(useDict('sys_yes_no'));
+const ossConfigList = ref<OssConfigVO[]>([]);
+const buttonLoading = ref(false);
+const { loading, setLoading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const ossConfigFormRef = ref<ElFormInstance>();
+
+// 列显隐信息
+const columns = ref<FieldOption[]>([
+  { key: 0, label: `主建`, visible: false },
+  { key: 1, label: `配置key`, visible: true },
+  { key: 2, label: `访问站点`, visible: true },
+  { key: 3, label: `自定义域名`, visible: true },
+  { key: 4, label: `桶名称`, visible: true },
+  { key: 5, label: `前缀`, visible: true },
+  { key: 6, label: `域`, visible: true },
+  { key: 7, label: `桶权限类型`, visible: true },
+  { key: 8, label: `状态`, visible: true }
+]);
+
+const initFormData: OssConfigForm = {
+  ossConfigId: undefined,
+  configKey: '',
+  accessKey: '',
+  secretKey: '',
+  bucketName: '',
+  prefix: '',
+  endpoint: '',
+  domainUrl: '',
+  isHttps: 'N',
+  accessPolicy: '1',
+  region: '',
+  status: 'N',
+  remark: ''
+};
+const data = reactive<PageData<OssConfigForm, OssConfigQuery>>({
+  form: { ...initFormData },
+  // 查询参数
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    configKey: '',
+    bucketName: '',
+    status: ''
+  },
+  rules: {
+    configKey: [{ required: true, message: 'configKey不能为空', trigger: 'blur' }],
+    accessKey: [
+      { required: true, message: 'accessKey不能为空', trigger: 'blur' },
+      {
+        min: 2,
+        max: 200,
+        message: 'accessKey长度必须介于 2 和 100 之间',
+        trigger: 'blur'
+      }
+    ],
+    secretKey: [
+      { required: true, message: 'secretKey不能为空', trigger: 'blur' },
+      {
+        min: 2,
+        max: 100,
+        message: 'secretKey长度必须介于 2 和 100 之间',
+        trigger: 'blur'
+      }
+    ],
+    bucketName: [
+      { required: true, message: 'bucketName不能为空', trigger: 'blur' },
+      {
+        min: 2,
+        max: 100,
+        message: 'bucketName长度必须介于 2 和 100 之间',
+        trigger: 'blur'
+      }
+    ],
+    endpoint: [
+      { required: true, message: 'endpoint不能为空', trigger: 'blur' },
+      {
+        min: 2,
+        max: 100,
+        message: 'endpoint名称长度必须介于 2 和 100 之间',
+        trigger: 'blur'
+      }
+    ],
+    accessPolicy: [{ required: true, message: 'accessPolicy不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const protocol = computed(() => (form.value.isHttps === 'Y' ? 'https://' : 'http://'));
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<OssConfigVO>(item => item.ossConfigId);
+const {
+  dialog,
+  resetForm: reset,
+  openDialog,
+  showDialog,
+  closeDialog
+} = useFormDialog({
+  form,
+  formRef: ossConfigFormRef,
+  initialFormData: initFormData
+});
+
+/** 查询对象存储配置列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listOssConfig(queryParams.value);
+    ossConfigList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  closeDialog();
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
+/** 新增按钮操作 */
+const handleAdd = () => {
+  openDialog('添加对象存储配置');
+};
+/** 修改按钮操作 */
+const handleUpdate = async (row?: Partial<OssConfigVO>) => {
+  reset();
+  const ossConfigId = row?.ossConfigId || ids.value[0];
+  const res = await getOssConfig(ossConfigId);
+  Object.assign(form.value, res.data);
+  showDialog('修改对象存储配置');
+};
+/** 提交按钮 */
+const submitForm = () => {
+  ossConfigFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.ossConfigId) {
+        await updateOssConfig(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addOssConfig(form.value).finally(() => (buttonLoading.value = false));
+      }
+      modal.msgSuccess('新增成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+/** 状态修改  */
+const handleStatusChange = async (row: Partial<OssConfigVO>) => {
+  const text = row.status === 'Y' ? '启用' : '停用';
+  try {
+    await modal.confirm('确认要"' + text + '""' + row.configKey + '"配置吗?');
+    await changeOssConfigStatus(row.ossConfigId, row.status, row.configKey);
+    await getList();
+    modal.msgSuccess(text + '成功');
+  } catch {
+    row.status = row.status === 'Y' ? 'N' : 'Y';
+  }
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<OssConfigVO>) => {
+  const ossConfigIds = row?.ossConfigId || ids.value;
+  await modal.confirm('是否确认删除OSS配置编号为"' + ossConfigIds + '"的数据项?');
+  setLoading(true);
+  await delOssConfig(ossConfigIds).finally(() => setLoading(false));
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.table-crud-page;
+</style>
diff --git a/src/views/system/oss/index.vue b/src/views/system/oss/index.vue
new file mode 100644
index 0000000..b311015
--- /dev/null
+++ b/src/views/system/oss/index.vue
@@ -0,0 +1,396 @@
+<template>
+  <div class="p-2 app-container system-oss-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div>
+              <span class="panel-kicker">Search Filters</span>
+              <h3>筛选条件</h3>
+            </div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="文件名" prop="fileName">
+            <el-input v-model="queryParams.fileName" placeholder="请输入文件名" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="原名" prop="originalName">
+            <el-input
+              v-model="queryParams.originalName"
+              placeholder="请输入原名"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="文件后缀" prop="fileSuffix">
+            <el-input
+              v-model="queryParams.fileSuffix"
+              placeholder="请输入文件后缀"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="创建时间" style="width: 308px">
+            <el-date-picker
+              v-model="dateRangeCreateTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item label="服务商" prop="service">
+            <el-input v-model="queryParams.service" placeholder="请输入服务商" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <span class="panel-kicker">Object Storage</span>
+            <h3>文件列表</h3>
+            <p>共 {{ total }} 条记录，支持文件上传、预览切换和 OSS 配置跳转。</p>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['system:oss:upload']" type="primary" plain icon="Upload" @click="handleFile">
+              上传文件
+            </el-button>
+            <el-button v-hasPermi="['system:oss:upload']" type="primary" plain icon="Upload" @click="handleImage">
+              上传图片
+            </el-button>
+            <el-button
+              v-hasPermi="['system:oss:remove']"
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete()"
+            >
+              删除
+            </el-button>
+            <el-button
+              v-hasPermi="['system:oss:edit']"
+              :type="previewListResource ? 'danger' : 'warning'"
+              plain
+              @click="handlePreviewListResource(!previewListResource)"
+            >
+              预览开关 : {{ previewListResource ? '禁用' : '启用' }}
+            </el-button>
+            <el-button
+              v-hasPermi="['system:ossConfig:list']"
+              type="info"
+              plain
+              icon="Operation"
+              @click="handleOssConfig"
+            >
+              配置管理
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-if="showTable"
+        v-loading="loading"
+        :data="ossList"
+        class="data-table"
+        border
+        :header-cell-class-name="handleHeaderClass"
+        @selection-change="handleSelectionChange"
+        @header-click="handleHeaderCLick"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column v-if="false" label="对象存储主键" align="center" prop="ossId" />
+        <el-table-column label="文件名" align="center" prop="fileName" />
+        <el-table-column label="原名" align="center" prop="originalName" />
+        <el-table-column label="文件后缀" align="center" prop="fileSuffix" />
+        <el-table-column label="文件展示" align="center" prop="url">
+          <template #default="scope">
+            <ImagePreview
+              v-if="previewListResource && checkFileSuffix(scope.row.fileSuffix)"
+              :width="100"
+              :height="100"
+              :src="scope.row.url"
+              :preview-src-list="[scope.row.url]"
+            />
+            <span v-if="!checkFileSuffix(scope.row.fileSuffix) || !previewListResource" v-text="scope.row.url" />
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180" sortable="custom">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="上传人" align="center" prop="createByName" />
+        <el-table-column label="服务商" align="center" prop="service" sortable="custom" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="下载" placement="top">
+              <el-button
+                v-hasPermi="['system:oss:download']"
+                link
+                type="primary"
+                icon="Download"
+                @click="handleDownload(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                v-hasPermi="['system:oss:remove']"
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </el-card>
+    <!-- 添加或修改OSS对象存储对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="ossFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="文件名">
+          <fileUpload v-if="type === 0" v-model="form.file" />
+          <imageUpload v-if="type === 1" v-model="form.file" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Oss" lang="ts">
+import { useRouter } from 'vue-router';
+import { getConfigKey, updateConfigByKey } from '@/api/system/config';
+import { listOss, delOss } from '@/api/system/oss';
+import { OssForm, OssQuery, OssVO } from '@/api/system/oss/types';
+import ImagePreview from '@/components/ImagePreview/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import download from '@/plugins/download';
+import modal from '@/plugins/modal';
+import { parseTime } from '@/utils/ruoyi';
+
+const router = useRouter();
+
+const ossList = ref<OssVO[]>([]);
+const showTable = ref(true);
+const buttonLoading = ref(false);
+const { loading, setLoading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+const type = ref(0);
+const previewListResource = ref(true);
+const {
+  dateRange: dateRangeCreateTime,
+  applyDateRange: applyCreateTimeDateRange,
+  resetDateRange: resetCreateTimeDateRange
+} = useDateRangeQuery('CreateTime');
+
+// 默认排序
+const defaultSort = ref({ prop: 'createTime', order: 'ascending' });
+
+const ossFormRef = ref<ElFormInstance>();
+const queryFormRef = ref<ElFormInstance>();
+
+const initFormData = {
+  file: undefined
+};
+const data = reactive<PageData<OssForm, OssQuery>>({
+  form: { ...initFormData },
+  // 查询参数
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    fileName: '',
+    originalName: '',
+    fileSuffix: '',
+    createTime: '',
+    service: '',
+    orderByColumn: defaultSort.value.prop,
+    isAsc: defaultSort.value.order
+  },
+  rules: {
+    file: [{ required: true, message: '文件不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<OssVO>(item => item.ossId);
+const {
+  dialog,
+  resetForm: reset,
+  openDialog,
+  closeDialog
+} = useFormDialog({
+  form,
+  formRef: ossFormRef,
+  initialFormData: initFormData
+});
+
+/** 查询OSS对象存储列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await getConfigKey('sys.oss.previewListResource');
+    previewListResource.value = res?.data === undefined ? true : res.data === 'true';
+    const response = await listOss(applyCreateTimeDateRange(queryParams.value));
+    ossList.value = response.data?.rows;
+    total.value = response.data?.total;
+    showTable.value = true;
+  });
+};
+function checkFileSuffix(fileSuffix: string | string[]) {
+  const arr = ['.png', '.jpg', '.jpeg'];
+  const suffixArray = Array.isArray(fileSuffix) ? fileSuffix : [fileSuffix];
+  return suffixArray.some(suffix => arr.includes(suffix.toLowerCase()));
+}
+/** 取消按钮 */
+function cancel() {
+  reset();
+  closeDialog();
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    showTable.value = false;
+    resetCreateTimeDateRange();
+    queryParams.value.orderByColumn = defaultSort.value.prop;
+    queryParams.value.isAsc = defaultSort.value.order;
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+/** 设置列的排序为我们自定义的排序 */
+const handleHeaderClass = ({ column }: any): any => {
+  column.order = column.multiOrder;
+};
+/** 点击表头进行排序 */
+const handleHeaderCLick = (column: any) => {
+  if (column.sortable !== 'custom') {
+    return;
+  }
+  switch (column.multiOrder) {
+    case 'descending':
+      column.multiOrder = 'ascending';
+      break;
+    case 'ascending':
+      column.multiOrder = '';
+      break;
+    default:
+      column.multiOrder = 'descending';
+      break;
+  }
+  handleOrderChange(column.property, column.multiOrder);
+};
+const handleOrderChange = (prop: string, order: string) => {
+  const orderByArr = queryParams.value.orderByColumn ? queryParams.value.orderByColumn.split(',') : [];
+  const isAscArr = queryParams.value.isAsc ? queryParams.value.isAsc.split(',') : [];
+  const propIndex = orderByArr.indexOf(prop);
+  if (propIndex !== -1) {
+    if (order) {
+      //排序里已存在 只修改排序
+      isAscArr[propIndex] = order;
+    } else {
+      //如果order为null 则删除排序字段和属性
+      isAscArr.splice(propIndex, 1); //删除排序
+      orderByArr.splice(propIndex, 1); //删除属性
+    }
+  } else {
+    //排序里不存在则新增排序
+    orderByArr.push(prop);
+    isAscArr.push(order);
+  }
+  //合并排序
+  queryParams.value.orderByColumn = orderByArr.join(',');
+  queryParams.value.isAsc = isAscArr.join(',');
+  getList();
+};
+/** 任务日志列表查询 */
+const handleOssConfig = () => {
+  router.push('/system/oss-config/index');
+};
+/** 文件按钮操作 */
+const handleFile = () => {
+  type.value = 0;
+  openDialog('上传文件');
+};
+/** 图片按钮操作 */
+const handleImage = () => {
+  type.value = 1;
+  openDialog('上传图片');
+};
+/** 提交按钮 */
+const submitForm = () => {
+  closeDialog();
+  getList();
+};
+/** 下载按钮操作 */
+const handleDownload = (row: Partial<OssVO>) => {
+  download.oss(row.ossId);
+};
+/** 预览开关按钮  */
+const handlePreviewListResource = async (preview: boolean) => {
+  try {
+    await updateConfigByKey('sys.oss.previewListResource', preview);
+    await getList();
+    modal.msgSuccess((preview ? '启用' : '停用') + '成功');
+  } catch {
+    return;
+  }
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<OssVO>) => {
+  const ossIds = row?.ossId || ids.value;
+  await modal.confirm('是否确认删除OSS对象存储编号为"' + ossIds + '"的数据项?');
+  setLoading(true);
+  await delOss(ossIds).finally(() => setLoading(false));
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.table-crud-page;
+</style>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
new file mode 100644
index 0000000..1fe6b48
--- /dev/null
+++ b/src/views/system/post/index.vue
@@ -0,0 +1,406 @@
+<template>
+  <div class="p-2 app-container system-post-page">
+    <el-row :gutter="20" class="content-grid">
+      <!-- 部门树 -->
+      <tree-panel
+        ref="treePanelRef"
+        v-model:collapsed="treeCollapsed"
+        title="部门结构"
+        placeholder="请输入部门名称"
+        :data="deptOptions"
+        :expanded-span="5"
+        @node-click="handleNodeClick"
+      />
+      <el-col
+        :lg="treeCollapsed ? 23 : 19"
+        :xs="24"
+        class="tree-content-col content-main"
+        :class="{ 'is-tree-collapsed': treeCollapsed }"
+      >
+        <div class="search-wrap">
+          <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+            <template #header>
+              <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+                <div>
+                  <span class="panel-kicker">Search Filters</span>
+                  <h3>筛选条件</h3>
+                </div>
+              </div>
+            </template>
+            <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+              <el-form-item label="岗位编码" prop="postCode">
+                <el-input
+                  v-model="queryParams.postCode"
+                  placeholder="请输入岗位编码"
+                  clearable
+                  @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item label="类别编码" prop="postCategory">
+                <el-input
+                  v-model="queryParams.postCategory"
+                  placeholder="请输入类别编码"
+                  clearable
+                  style="width: 200px"
+                  @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item label="岗位名称" prop="postName">
+                <el-input
+                  v-model="queryParams.postName"
+                  placeholder="请输入岗位名称"
+                  clearable
+                  @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item label="部门" prop="deptId">
+                <el-tree-select
+                  v-model="queryParams.deptId"
+                  :data="deptOptions"
+                  :props="{ value: 'id', label: 'label', children: 'children' } as any"
+                  value-key="id"
+                  placeholder="请选择部门"
+                  check-strictly
+                />
+              </el-form-item>
+              <el-form-item label="状态" prop="status">
+                <el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
+                  <el-option
+                    v-for="dict in sys_normal_disable"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </div>
+        <el-card shadow="hover" class="table-panel">
+          <template #header>
+            <div class="toolbar-shell">
+              <div class="table-heading">
+                <span class="panel-kicker">Post Dataset</span>
+                <h3>岗位列表</h3>
+                <p>共 {{ total }} 条记录，支持按部门筛选、岗位维护和导出。</p>
+              </div>
+              <div class="toolbar-actions">
+                <el-button v-hasPermi="['system:post:add']" type="primary" plain icon="Plus" @click="handleAdd">
+                  新增
+                </el-button>
+                <el-button
+                  v-hasPermi="['system:post:edit']"
+                  type="success"
+                  plain
+                  icon="Edit"
+                  :disabled="single"
+                  @click="handleUpdate()"
+                >
+                  修改
+                </el-button>
+                <el-button
+                  v-hasPermi="['system:post:remove']"
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="multiple"
+                  @click="handleDelete()"
+                >
+                  删除
+                </el-button>
+                <el-button
+                  v-hasPermi="['system:post:export']"
+                  type="warning"
+                  plain
+                  icon="Download"
+                  @click="handleExport"
+                >
+                  导出
+                </el-button>
+                <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+              </div>
+            </div>
+          </template>
+          <el-table
+            v-loading="loading"
+            border
+            class="data-table"
+            :data="postList"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column v-if="false" label="岗位编号" align="center" prop="postId" />
+            <el-table-column label="岗位编码" align="center" prop="postCode" />
+            <el-table-column label="类别编码" align="center" prop="postCategory" />
+            <el-table-column label="岗位名称" align="center" prop="postName" />
+            <el-table-column label="部门" align="center" prop="deptName" />
+            <el-table-column label="排序" align="center" prop="postSort" />
+            <el-table-column label="状态" align="center" prop="status">
+              <template #default="scope">
+                <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+              <template #default="scope">
+                <span>{{ parseTime(scope.row.createTime) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-tooltip content="修改" placement="top">
+                  <el-button
+                    v-hasPermi="['system:post:edit']"
+                    link
+                    type="primary"
+                    icon="Edit"
+                    @click="handleUpdate(scope.row)"
+                  ></el-button>
+                </el-tooltip>
+                <el-tooltip content="删除" placement="top">
+                  <el-button
+                    v-hasPermi="['system:post:remove']"
+                    link
+                    type="primary"
+                    icon="Delete"
+                    @click="handleDelete(scope.row)"
+                  ></el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <pagination
+            v-show="total > 0"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            :total="total"
+            @pagination="getList"
+          />
+        </el-card>
+
+        <!-- 添加或修改岗位对话框 -->
+        <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+          <el-form ref="postFormRef" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="岗位名称" prop="postName">
+              <el-input v-model="form.postName" placeholder="请输入岗位名称" />
+            </el-form-item>
+            <el-form-item label="部门" prop="deptId">
+              <el-tree-select
+                v-model="form.deptId"
+                :data="deptOptions"
+                :props="{ value: 'id', label: 'label', children: 'children' } as any"
+                value-key="id"
+                placeholder="请选择部门"
+                check-strictly
+              />
+            </el-form-item>
+            <el-form-item label="岗位编码" prop="postCode">
+              <el-input v-model="form.postCode" placeholder="请输入编码名称" />
+            </el-form-item>
+            <el-form-item label="类别编码" prop="postCategory">
+              <el-input v-model="form.postCategory" placeholder="请输入类别编码" />
+            </el-form-item>
+            <el-form-item label="岗位顺序" prop="postSort">
+              <el-input-number v-model="form.postSort" controls-position="right" :min="0" />
+            </el-form-item>
+            <el-form-item label="岗位状态" prop="status">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
+          </el-form>
+          <template #footer>
+            <div class="dialog-footer">
+              <el-button type="primary" @click="submitForm">确 定</el-button>
+              <el-button @click="cancel">取 消</el-button>
+            </div>
+          </template>
+        </el-dialog>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup name="Post" lang="ts">
+import { DeptTreeVO, DeptVO } from '@/api/system/dept/types';
+import { listPost, addPost, delPost, getPost, updatePost, deptTreeSelect } from '@/api/system/post';
+import { PostForm, PostQuery, PostVO } from '@/api/system/post/types';
+import TreePanel from '@/components/TreePanel/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTreeCollapsed } from '@/hooks/tree/useTreeCollapsed';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+import { download as requestDownload } from '@/utils/request';
+import { parseTime } from '@/utils/ruoyi';
+
+const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
+
+const postList = ref<PostVO[]>([]);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<PostVO>(item => item.postId);
+const total = ref(0);
+const { treeCollapsed } = useTreeCollapsed();
+const deptOptions = ref<DeptTreeVO[]>([]);
+const treePanelRef = ref<InstanceType<typeof TreePanel>>();
+const postFormRef = ref<ElFormInstance>();
+const queryFormRef = ref<ElFormInstance>();
+
+const initFormData: PostForm = {
+  postId: undefined,
+  deptId: undefined,
+  postCode: '',
+  postName: '',
+  postCategory: '',
+  postSort: 0,
+  status: '0',
+  remark: ''
+};
+
+const data = reactive<PageData<PostForm, PostQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    deptId: undefined,
+    belongDeptId: undefined,
+    postCode: '',
+    postName: '',
+    postCategory: '',
+    status: ''
+  },
+  rules: {
+    postName: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
+    postCode: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
+    deptId: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
+    postSort: [{ required: true, message: '岗位顺序不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs<PageData<PostForm, PostQuery>>(data);
+const { dialog, resetForm, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: postFormRef,
+  initialFormData: initFormData
+});
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    queryParams.value.deptId = undefined;
+    treePanelRef.value?.setCurrentKey(undefined);
+    queryParams.value.belongDeptId = undefined;
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 查询部门下拉树结构 */
+const getTreeSelect = async () => {
+  const res = await deptTreeSelect();
+  deptOptions.value = res.data;
+};
+
+/** 节点单击事件 */
+const handleNodeClick = (data: DeptVO) => {
+  queryParams.value.belongDeptId = data.id;
+  queryParams.value.deptId = undefined;
+  handleQuery();
+};
+
+/** 查询岗位列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listPost(queryParams.value);
+    postList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  closeDialog();
+  resetForm();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  if (queryParams.value.deptId) {
+    queryParams.value.belongDeptId = undefined;
+  }
+  getList();
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  openDialog('添加岗位');
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: Partial<PostVO>) => {
+  resetForm();
+  const postId = row?.postId || ids.value[0];
+  const res = await getPost(postId);
+  Object.assign(form.value, res.data);
+  showDialog('修改岗位');
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  postFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      form.value.postId ? await updatePost(form.value) : await addPost(form.value);
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<PostVO>) => {
+  const postIds = row?.postId || ids.value;
+  await modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？');
+  await delPost(postIds);
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    'system/post/export',
+    {
+      ...queryParams.value
+    },
+    `post_${new Date().getTime()}.xlsx`
+  );
+};
+
+onMounted(() => {
+  getTreeSelect(); // 初始化部门数据
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.tree-table-crud-page;
+</style>
diff --git a/src/views/system/role/authUser.vue b/src/views/system/role/authUser.vue
new file mode 100644
index 0000000..efd667e
--- /dev/null
+++ b/src/views/system/role/authUser.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="p-2 app-container role-auth-user-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="用户名称" prop="userName">
+            <el-input
+              v-model="queryParams.userName"
+              placeholder="请输入用户名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="手机号码" prop="phoneNumber">
+            <el-input
+              v-model="queryParams.phoneNumber"
+              placeholder="请输入手机号码"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>已授权用户</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['system:role:add']" type="primary" plain icon="Plus" @click="openSelectUser">
+              添加用户
+            </el-button>
+            <el-button
+              v-hasPermi="['system:role:remove']"
+              type="danger"
+              plain
+              icon="CircleClose"
+              :disabled="multiple"
+              @click="cancelAuthUserAll"
+            >
+              批量取消授权
+            </el-button>
+            <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+      <el-table
+        v-loading="loading"
+        border
+        class="data-table"
+        :data="userList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+        <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+        <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+        <el-table-column label="手机" prop="phoneNumber" :show-overflow-tooltip="true" />
+        <el-table-column label="状态" align="center" prop="status">
+          <template #default="scope">
+            <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+          <template #default="scope">
+            <span>{{ scope.row.createTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="取消授权" placement="top">
+              <el-button
+                v-hasPermi="['system:role:remove']"
+                link
+                type="primary"
+                icon="CircleClose"
+                @click="cancelAuthUser(scope.row)"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+      <select-user ref="selectRef" :role-id="queryParams.roleId" @ok="handleQuery" />
+    </el-card>
+  </div>
+</template>
+
+<script setup name="AuthUser" lang="ts">
+import { RouteLocationNormalized } from 'vue-router';
+import { allocatedUserList, authUserCancel, authUserCancelAll } from '@/api/system/role';
+import { UserQuery } from '@/api/system/user/types';
+import { UserVO } from '@/api/system/user/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+import { useDict } from '@/utils/dict';
+import SelectUser from './selectUser.vue';
+
+const route = useRoute();
+const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
+
+const userList = ref<UserVO[]>([]);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const selectRef = ref<InstanceType<typeof SelectUser>>();
+
+const queryParams = reactive<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  roleId: route.params.roleId as string,
+  userName: undefined,
+  phoneNumber: undefined
+});
+const { ids: userIds, multiple, handleSelectionChange } = useTableSelection<UserVO>(item => item.userId);
+
+/** 查询授权用户列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await allocatedUserList(queryParams);
+    userList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+// 返回按钮
+const handleClose = () => {
+  const obj: RouteLocationNormalized = {
+    path: '/system/role',
+    fullPath: '',
+    hash: '',
+    matched: [],
+    meta: undefined,
+    name: undefined,
+    params: undefined,
+    query: undefined,
+    redirectedFrom: undefined
+  };
+  tab.closeOpenPage(obj as any);
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  afterReset: () => {
+    handleQuery();
+  }
+});
+/** 打开授权用户表弹窗 */
+const openSelectUser = () => {
+  selectRef.value?.show();
+};
+/** 取消授权按钮操作 */
+const cancelAuthUser = async (row: Partial<UserVO>) => {
+  await modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？');
+  await authUserCancel({ userId: row.userId, roleId: queryParams.roleId });
+  await getList();
+  modal.msgSuccess('取消授权成功');
+};
+/** 批量取消授权按钮操作 */
+const cancelAuthUserAll = async () => {
+  const roleId = queryParams.roleId;
+  const uIds = userIds.value.join(',');
+  await modal.confirm('是否取消选中用户授权数据项?');
+  await authUserCancelAll({ roleId: roleId, userIds: uIds });
+  await getList();
+  modal.msgSuccess('取消授权成功');
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
new file mode 100644
index 0000000..a28fb25
--- /dev/null
+++ b/src/views/system/role/index.vue
@@ -0,0 +1,1200 @@
+<template>
+  <div class="p-2 system-role-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div>
+              <span class="panel-kicker">Search Filters</span>
+              <h3>筛选条件</h3>
+            </div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="角色名称" prop="roleName">
+            <el-input
+              v-model="queryParams.roleName"
+              placeholder="请输入角色名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="权限字符" prop="roleKey">
+            <el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="queryParams.status" placeholder="角色状态" clearable>
+              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间" style="width: 308px">
+            <el-date-picker
+              v-model="dateRange"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+            ></el-date-picker>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <span class="panel-kicker">Role Dataset</span>
+            <h3>角色列表</h3>
+            <p>共 {{ total }} 条记录，支持菜单权限、数据权限和分配用户等完整配置流程。</p>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['system:role:add']" type="primary" plain icon="Plus" @click="handleAdd()">
+              新增
+            </el-button>
+            <el-button
+              v-hasPermi="['system:role:edit']"
+              type="success"
+              plain
+              :disabled="single"
+              icon="Edit"
+              @click="handleUpdate()"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-hasPermi="['system:role:remove']"
+              type="danger"
+              plain
+              :disabled="ids.length === 0"
+              icon="Delete"
+              @click="handleDelete()"
+            >
+              删除
+            </el-button>
+            <el-button v-hasPermi="['system:role:export']" type="warning" plain icon="Download" @click="handleExport">
+              导出
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        border
+        class="data-table"
+        v-loading="loading"
+        :data="roleList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column v-if="false" label="角色编号" prop="roleId" width="120" />
+        <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+        <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="200" />
+        <el-table-column label="显示顺序" prop="roleSort" width="100" />
+        <el-table-column label="状态" align="center" width="100">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.status"
+              active-value="0"
+              inactive-value="1"
+              @change="handleStatusChange(scope.row)"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column fixed="right" label="操作" width="180">
+          <template #default="scope">
+            <el-tooltip v-if="scope.row.roleId !== 1761300000000000001" content="修改" placement="top">
+              <el-button
+                v-hasPermi="['system:role:edit']"
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip v-if="scope.row.roleId !== 1761300000000000001" content="删除" placement="top">
+              <el-button
+                v-hasPermi="['system:role:remove']"
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip v-if="scope.row.roleId !== 1761300000000000001" content="分配权限" placement="top">
+              <el-button
+                v-hasPermi="['system:role:edit']"
+                link
+                type="primary"
+                icon="CircleCheck"
+                @click="handleDataScope(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip v-if="scope.row.roleId !== 1761300000000000001" content="分配用户" placement="top">
+              <el-button
+                v-hasPermi="['system:role:edit']"
+                link
+                type="primary"
+                icon="User"
+                @click="handleAuthUser(scope.row)"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-card>
+
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="720px" append-to-body>
+      <el-form ref="roleFormRef" :model="form" :rules="rules" label-width="100px" class="dialog-grid-form">
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="角色名称" prop="roleName">
+              <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="roleKey">
+              <template #label>
+                <span>
+                  <el-tooltip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" placement="top">
+                    <el-icon><question-filled /></el-icon>
+                  </el-tooltip>
+                  权限字符
+                </span>
+              </template>
+              <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="角色顺序" prop="roleSort">
+              <el-input-number v-model="form.roleSort" controls-position="right" :min="0" class="w-full" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 分配角色权限对话框 -->
+    <el-dialog v-model="openDataScope" :title="dialog.title" width="760px" append-to-body>
+      <el-form ref="dataScopeRef" :model="form" label-width="90px" class="dialog-grid-form permission-dialog-form">
+        <el-tabs v-model="permissionTab">
+          <el-tab-pane label="菜单权限" name="menu">
+            <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+            <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">
+              全选/全不选
+            </el-checkbox>
+            <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">
+              父子联动
+            </el-checkbox>
+            <div class="menu-tree-permission-wrap tree-border">
+              <div class="menu-tree-header" role="row">
+                <span class="menu-tree-header-name">菜单名称</span>
+                <span class="menu-tree-header-buttons">按钮权限</span>
+              </div>
+              <el-tree
+                ref="menuRef"
+                class="menu-tree-panel"
+                :data="menuOptions"
+                :indent="0"
+                show-checkbox
+                node-key="id"
+                :check-strictly="!form.menuCheckStrictly"
+                empty-text="加载中，请稍候"
+                :props="{ label: 'label', children: 'children', disabled: 'disabled' }"
+                @check="handleMenuTreeCheck"
+              >
+                <template #default="{ data, node }">
+                  <div class="menu-tree-node-row">
+                    <span
+                      class="menu-tree-node-label"
+                      :class="{ 'is-hidden': isMenuPermissionHidden(data), 'is-disabled': data.disabled }"
+                      :style="getMenuNodeLabelStyle(node.level)"
+                    >
+                      <span>{{ data.label }}</span>
+                      <el-tooltip v-if="isMenuPermissionHidden(data)" content="隐藏" placement="top">
+                        <el-icon class="menu-visibility-icon"><Hide /></el-icon>
+                      </el-tooltip>
+                      <el-tooltip v-if="data.disabled" content="停用" placement="top">
+                        <el-icon class="menu-disabled-icon"><CircleCloseFilled /></el-icon>
+                      </el-tooltip>
+                    </span>
+                    <div v-if="data.buttonPermissions?.length" class="menu-tree-node-buttons" @click.stop>
+                      <el-checkbox
+                        v-for="button in data.buttonPermissions"
+                        :key="button.menuId"
+                        :model-value="isPermissionChecked(button.menuId)"
+                        :disabled="button.disabled"
+                        @change="handleButtonPermissionChange(data.id, button.menuId, $event)"
+                        @click.stop
+                      >
+                        <span class="menu-button-label" :class="{ 'is-disabled': button.disabled }">
+                          <span>{{ button.menuName }}</span>
+                          <el-tooltip v-if="button.disabled" content="停用" placement="top">
+                            <el-icon class="menu-button-disabled-icon"><CircleCloseFilled /></el-icon>
+                          </el-tooltip>
+                        </span>
+                      </el-checkbox>
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="数据权限" name="data">
+            <el-form-item label="权限范围">
+              <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
+                <el-option
+                  v-for="item in dataScopeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item v-show="form.dataScope === '2'" label="数据权限">
+              <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">
+                展开/折叠
+              </el-checkbox>
+              <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">
+                全选/全不选
+              </el-checkbox>
+              <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">
+                父子联动
+              </el-checkbox>
+              <el-tree
+                ref="deptRef"
+                class="tree-border"
+                :data="deptOptions"
+                show-checkbox
+                default-expand-all
+                node-key="id"
+                :check-strictly="!form.deptCheckStrictly"
+                empty-text="加载中，请稍候"
+                :props="{ label: 'label', children: 'children' }"
+              ></el-tree>
+            </el-form-item>
+          </el-tab-pane>
+        </el-tabs>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitDataScope">确 定</el-button>
+          <el-button @click="cancelDataScope">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Role" lang="ts">
+import { useRouter } from 'vue-router';
+import { roleMenuTreeselect } from '@/api/system/menu';
+import { MenuTreeOption, RoleMenuButtonOption, RoleMenuTree } from '@/api/system/menu/types';
+import {
+  addRole,
+  changeRoleStatus,
+  delRole,
+  getRole,
+  listRole,
+  updateRolePermission,
+  updateRole,
+  deptTreeSelect
+} from '@/api/system/role';
+import { RoleVO, RoleForm, RoleQuery, DeptTreeOption } from '@/api/system/role/types';
+import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+import { download as requestDownload } from '@/utils/request';
+import { parseTime } from '@/utils/ruoyi';
+
+const router = useRouter();
+const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
+
+interface RoleMenuPermissionOption extends MenuTreeOption {
+  buttonPermissions: RoleMenuButtonOption[];
+  disabled?: boolean;
+  children?: RoleMenuPermissionOption[];
+}
+
+interface RoleMenuPermissionMeta {
+  treeOptions: RoleMenuPermissionOption[];
+  buttonIds: Set<string>;
+  disabledButtonIds: Set<string>;
+  buttonParentMap: Map<string, string>;
+  menuAncestorMap: Map<string, Array<string | number>>;
+  menuButtonIdsMap: Map<string, Array<string | number>>;
+}
+
+const roleList = ref<RoleVO[]>();
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
+const menuPermissionMeta = ref<RoleMenuPermissionMeta>({
+  treeOptions: [],
+  buttonIds: new Set<string>(),
+  disabledButtonIds: new Set<string>(),
+  buttonParentMap: new Map<string, string>(),
+  menuAncestorMap: new Map<string, Array<string | number>>(),
+  menuButtonIdsMap: new Map<string, Array<string | number>>()
+});
+const menuExpand = ref(false);
+const menuNodeAll = ref(false);
+const deptExpand = ref(true);
+const deptNodeAll = ref(false);
+const deptOptions = ref<DeptTreeOption[]>([]);
+const openDataScope = ref(false);
+/**
+ * 权限分配弹窗 Tab：
+ * data=数据权限，menu=菜单权限
+ */
+const permissionTab = ref<'data' | 'menu'>('menu');
+
+/** 数据范围选项*/
+const dataScopeOptions = ref([
+  { value: '1', label: '全部数据权限' },
+  { value: '2', label: '自定数据权限' },
+  { value: '3', label: '本部门数据权限' },
+  { value: '4', label: '本部门及以下数据权限' },
+  { value: '5', label: '仅本人数据权限' },
+  { value: '6', label: '部门及以下或本人数据权限' }
+]);
+
+const queryFormRef = ref<ElFormInstance>();
+const roleFormRef = ref<ElFormInstance>();
+const dataScopeRef = ref<ElFormInstance>();
+const menuRef = ref<ElTreeInstance>();
+const deptRef = ref<ElTreeInstance>();
+const selectedMenuPermissionIds = ref<Array<string | number>>([]);
+const selectedButtonPermissionIds = ref<Array<string | number>>([]);
+const lastCheckedMenuKeys = ref<string[]>([]);
+const syncingMenuTree = ref(false);
+
+const menuOptions = computed(() => menuPermissionMeta.value.treeOptions);
+
+const isButtonPermission = (permissionId: string | number) => {
+  return menuPermissionMeta.value.buttonIds.has(String(permissionId));
+};
+
+const isButtonPermissionDisabled = (permissionId: string | number) => {
+  return menuPermissionMeta.value.disabledButtonIds.has(String(permissionId));
+};
+
+const isPermissionChecked = (permissionId: string | number) => {
+  return selectedButtonPermissionIds.value.some(menuId => String(menuId) === String(permissionId));
+};
+
+const isMenuPermissionHidden = (menu: MenuTreeOption) => menu.visible === '1';
+
+/**
+ * 基于节点层级给菜单名称增加缩进，确保按钮列始终固定对齐。
+ */
+const getMenuNodeLabelStyle = (level: number) => {
+  return {
+    paddingLeft: `${Math.max(0, level - 1) * 18}px`
+  };
+};
+
+const getCheckedMenuKeys = () => {
+  const checkedKeys = (menuRef.value?.getCheckedKeys(false) ?? []) as Array<string | number>;
+  const halfCheckedKeys = (menuRef.value?.getHalfCheckedKeys() ?? []) as Array<string | number>;
+  return {
+    checkedKeys,
+    halfCheckedKeys,
+    allCheckedKeys: [...halfCheckedKeys, ...checkedKeys]
+  };
+};
+
+const createEmptyMenuPermissionMeta = (): RoleMenuPermissionMeta => ({
+  treeOptions: [],
+  buttonIds: new Set<string>(),
+  disabledButtonIds: new Set<string>(),
+  buttonParentMap: new Map<string, string>(),
+  menuAncestorMap: new Map<string, Array<string | number>>(),
+  menuButtonIdsMap: new Map<string, Array<string | number>>()
+});
+
+const isMenuPermissionDisabledByStatus = (menu: MenuTreeOption) => menu.status === '1';
+
+const buildRoleMenuPermissionOptions = (
+  menuTree: MenuTreeOption[],
+  disabledButtonIds: Set<string>,
+  buttonIds: Set<string>,
+  buttonParentMap: Map<string, string>,
+  ancestorDirectoryDisabled = false
+): RoleMenuPermissionOption[] => {
+  return menuTree.reduce<RoleMenuPermissionOption[]>((options, menu) => {
+    if (menu.menuType === MenuTypeEnum.F) {
+      return options;
+    }
+
+    const selfDisabled = isMenuPermissionDisabledByStatus(menu);
+    const nextDirectoryDisabled = ancestorDirectoryDisabled || (menu.menuType === MenuTypeEnum.M && selfDisabled);
+    const nodeDisabled = ancestorDirectoryDisabled || selfDisabled;
+    const buttonPermissions =
+      menu.children
+        ?.filter(child => child.menuType === MenuTypeEnum.F)
+        .map(button => {
+          const buttonDisabled = nodeDisabled || isMenuPermissionDisabledByStatus(button);
+          buttonIds.add(String(button.id));
+          buttonParentMap.set(String(button.id), String(menu.id));
+          if (buttonDisabled) {
+            disabledButtonIds.add(String(button.id));
+          }
+          return {
+            menuId: button.id,
+            menuName: button.label,
+            parentId: button.parentId,
+            status: button.status,
+            disabled: buttonDisabled
+          };
+        }) ?? [];
+    const children = menu.children?.length
+      ? buildRoleMenuPermissionOptions(
+          menu.children,
+          disabledButtonIds,
+          buttonIds,
+          buttonParentMap,
+          nextDirectoryDisabled
+        )
+      : [];
+    options.push({
+      ...menu,
+      disabled: nodeDisabled,
+      buttonPermissions,
+      children
+    });
+    return options;
+  }, []);
+};
+
+const buildMenuPermissionMeta = (menuTree: MenuTreeOption[]): RoleMenuPermissionMeta => {
+  const buttonIds = new Set<string>();
+  const disabledButtonIds = new Set<string>();
+  const buttonParentMap = new Map<string, string>();
+  const treeOptions = buildRoleMenuPermissionOptions(menuTree, disabledButtonIds, buttonIds, buttonParentMap);
+  const menuAncestorMap = new Map<string, Array<string | number>>();
+  const menuButtonIdsMap = new Map<string, Array<string | number>>();
+
+  const collectMenuMeta = (nodes: RoleMenuPermissionOption[], ancestors: Array<string | number> = []) => {
+    return nodes.reduce<Array<string | number>>((permissionIds, node) => {
+      menuAncestorMap.set(String(node.id), ancestors);
+      const childButtonIds = node.children?.length ? collectMenuMeta(node.children, [...ancestors, node.id]) : [];
+      const ownButtonIds = node.buttonPermissions.map(button => button.menuId);
+      const currentButtonIds = [...ownButtonIds, ...childButtonIds];
+      menuButtonIdsMap.set(String(node.id), currentButtonIds);
+      permissionIds.push(...currentButtonIds);
+      return permissionIds;
+    }, []);
+  };
+
+  collectMenuMeta(treeOptions);
+  return {
+    treeOptions,
+    buttonIds,
+    disabledButtonIds,
+    buttonParentMap,
+    menuAncestorMap,
+    menuButtonIdsMap
+  };
+};
+
+const collectMenuNodeIds = (
+  nodes: RoleMenuPermissionOption[] = menuOptions.value,
+  includeDisabled = true
+): Array<string | number> => {
+  return nodes.reduce<Array<string | number>>((menuIds, node) => {
+    if (includeDisabled || !node.disabled) {
+      menuIds.push(node.id);
+    }
+    if (node.children?.length) {
+      menuIds.push(...collectMenuNodeIds(node.children, includeDisabled));
+    }
+    return menuIds;
+  }, []);
+};
+
+const collectButtonPermissionIds = (includeDisabled = true) => {
+  const buttonIds = new Set<string | number>();
+  menuPermissionMeta.value.menuButtonIdsMap.forEach(ids => {
+    ids.forEach(id => {
+      if (includeDisabled || !isButtonPermissionDisabled(id)) {
+        buttonIds.add(id);
+      }
+    });
+  });
+  return [...buttonIds];
+};
+
+const getSelectedButtonPermissionIds = () => {
+  return selectedButtonPermissionIds.value;
+};
+
+const getSelectedMenuPermissionIds = () => {
+  return selectedMenuPermissionIds.value;
+};
+
+const normalizePermissionIds = (permissionIds: Iterable<string | number>) => {
+  const normalizedIds = new Map<string, string | number>();
+  for (const permissionId of permissionIds) {
+    normalizedIds.set(String(permissionId), permissionId);
+  }
+  return [...normalizedIds.values()];
+};
+
+const getPermissionStateIds = () => {
+  return normalizePermissionIds([...getSelectedMenuPermissionIds(), ...getSelectedButtonPermissionIds()]);
+};
+
+const getDerivedMenuIdsFromButtons = (buttonIds: Iterable<string | number> = getSelectedButtonPermissionIds()) => {
+  if (!form.value.menuCheckStrictly) {
+    return [];
+  }
+
+  const derivedMenuIds = new Map<string, string | number>();
+  for (const buttonId of buttonIds) {
+    const parentMenuId = menuPermissionMeta.value.buttonParentMap.get(String(buttonId));
+    if (!parentMenuId) {
+      continue;
+    }
+    derivedMenuIds.set(String(parentMenuId), parentMenuId);
+    menuPermissionMeta.value.menuAncestorMap.get(parentMenuId)?.forEach(ancestorId => {
+      derivedMenuIds.set(String(ancestorId), ancestorId);
+    });
+  }
+  return [...derivedMenuIds.values()];
+};
+
+const setSelectedButtonPermissionIds = (permissionIds: Iterable<string | number>) => {
+  selectedButtonPermissionIds.value = normalizePermissionIds(permissionIds);
+};
+
+const setSelectedMenuPermissionIds = (permissionIds: Iterable<string | number>) => {
+  selectedMenuPermissionIds.value = normalizePermissionIds(permissionIds);
+};
+
+const syncFormMenuPermissionIds = () => {
+  form.value.menuIds = getMenuAllCheckedKeys();
+};
+
+const initPermissionState = (permissionIds: Array<string | number>) => {
+  setSelectedMenuPermissionIds(permissionIds.filter(permissionId => !isButtonPermission(permissionId)));
+  setSelectedButtonPermissionIds(permissionIds.filter(permissionId => isButtonPermission(permissionId)));
+};
+
+const updateMenuCheckAllState = () => {
+  const checkedMenuIds = new Set(getCheckedMenuKeys().checkedKeys.map(menuId => String(menuId)));
+  const allMenuIds = collectMenuNodeIds(menuOptions.value, false);
+  const allButtonIds = collectButtonPermissionIds(false);
+  menuNodeAll.value =
+    allMenuIds.length > 0 &&
+    allMenuIds.every(menuId => checkedMenuIds.has(String(menuId))) &&
+    allButtonIds.every(buttonId =>
+      selectedButtonPermissionIds.value.some(permissionId => String(permissionId) === String(buttonId))
+    );
+};
+
+const updateMenuPermissionOptions = (menuTree: MenuTreeOption[]) => {
+  menuPermissionMeta.value = buildMenuPermissionMeta(menuTree);
+};
+
+const getDisplayCheckedMenuKeys = (checkedKeys: Array<string | number>) => {
+  const displayMenuKeys = new Set<string | number>();
+
+  checkedKeys.forEach(key => {
+    if (form.value.menuCheckStrictly && isButtonPermission(key)) {
+      const parentMenuId = menuPermissionMeta.value.buttonParentMap.get(String(key));
+      if (parentMenuId) {
+        displayMenuKeys.add(parentMenuId);
+      }
+      return;
+    }
+    displayMenuKeys.add(key);
+  });
+
+  return [...displayMenuKeys];
+};
+
+const applyMenuTreeCheckedState = (checkedKeys: Array<string | number>) => {
+  const tree = menuRef.value;
+  if (!tree) {
+    return;
+  }
+
+  syncingMenuTree.value = true;
+  tree.setCheckedKeys([]);
+  getDisplayCheckedMenuKeys(checkedKeys).forEach(key => {
+    tree.setChecked(key, true, false);
+  });
+  syncingMenuTree.value = false;
+};
+
+const buildCheckedButtonPermissionIds = (
+  selectedButtonIds: Iterable<string | number>,
+  newlyCheckedMenuIds: Array<string | number> = []
+) => {
+  const { allCheckedKeys } = getCheckedMenuKeys();
+  const activeMenuIds = new Set(allCheckedKeys.map(key => String(key)));
+  const nextButtonIds = new Set<string | number>();
+
+  for (const buttonId of selectedButtonIds) {
+    if (!form.value.menuCheckStrictly) {
+      nextButtonIds.add(buttonId);
+      continue;
+    }
+    const parentMenuId = menuPermissionMeta.value.buttonParentMap.get(String(buttonId));
+    if (parentMenuId && activeMenuIds.has(parentMenuId)) {
+      nextButtonIds.add(buttonId);
+    }
+  }
+  if (form.value.menuCheckStrictly) {
+    newlyCheckedMenuIds.forEach(menuId => {
+      menuPermissionMeta.value.menuButtonIdsMap.get(String(menuId))?.forEach(buttonId => nextButtonIds.add(buttonId));
+    });
+  }
+
+  return [...nextButtonIds];
+};
+
+const syncButtonPermissionStateFromTree = () => {
+  const previousCheckedMenuIds = new Set(lastCheckedMenuKeys.value);
+  const checkedMenuIds = getCheckedMenuKeys().checkedKeys;
+  const newlyCheckedMenuIds = checkedMenuIds.filter(menuId => !previousCheckedMenuIds.has(String(menuId)));
+  const selectedButtonIds = getSelectedButtonPermissionIds();
+
+  setSelectedButtonPermissionIds(buildCheckedButtonPermissionIds(selectedButtonIds, newlyCheckedMenuIds));
+  updateMenuCheckAllState();
+  lastCheckedMenuKeys.value = checkedMenuIds.map(key => String(key));
+};
+
+const refreshMenuTreeCheckedState = (checkedKeys: Array<string | number>) => {
+  applyMenuTreeCheckedState(checkedKeys);
+  updateMenuCheckAllState();
+  lastCheckedMenuKeys.value = getCheckedMenuKeys().checkedKeys.map(key => String(key));
+};
+
+const handleMenuTreeCheck = () => {
+  if (syncingMenuTree.value) {
+    return;
+  }
+
+  const previousEffectiveMenuIds = new Set([
+    ...getSelectedMenuPermissionIds().map(menuId => String(menuId)),
+    ...getDerivedMenuIdsFromButtons().map(menuId => String(menuId))
+  ]);
+  const currentMenuIds = getCheckedMenuKeys().allCheckedKeys;
+  const currentMenuIdSet = new Set(currentMenuIds.map(menuId => String(menuId)));
+  const nextManualMenuIds = new Set(getSelectedMenuPermissionIds().map(menuId => String(menuId)));
+
+  currentMenuIds.forEach(menuId => {
+    const normalizedMenuId = String(menuId);
+    if (!previousEffectiveMenuIds.has(normalizedMenuId)) {
+      nextManualMenuIds.add(normalizedMenuId);
+    }
+  });
+
+  previousEffectiveMenuIds.forEach(menuId => {
+    if (!currentMenuIdSet.has(menuId)) {
+      nextManualMenuIds.delete(menuId);
+    }
+  });
+
+  setSelectedMenuPermissionIds(currentMenuIds.filter(menuId => nextManualMenuIds.has(String(menuId))));
+  syncButtonPermissionStateFromTree();
+};
+
+const handleButtonPermissionChange = (
+  _parentMenuId: string | number,
+  buttonMenuId: string | number,
+  checked: string | number | boolean
+) => {
+  if (isButtonPermissionDisabled(buttonMenuId)) {
+    return;
+  }
+
+  const selectedButtonIds = new Set(getSelectedButtonPermissionIds());
+
+  if (checked) {
+    selectedButtonIds.add(buttonMenuId);
+  } else {
+    selectedButtonIds.delete(buttonMenuId);
+  }
+
+  setSelectedButtonPermissionIds(selectedButtonIds);
+  refreshMenuTreeCheckedState(getPermissionStateIds());
+};
+
+const initForm: RoleForm = {
+  roleId: undefined,
+  roleSort: 1,
+  status: '0',
+  roleName: '',
+  roleKey: '',
+  menuCheckStrictly: true,
+  deptCheckStrictly: true,
+  remark: '',
+  dataScope: '1',
+  menuIds: [],
+  deptIds: []
+};
+
+const data = reactive<PageData<RoleForm, RoleQuery>>({
+  form: { ...initForm },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    roleName: '',
+    roleKey: '',
+    status: ''
+  },
+  rules: {
+    roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+    roleKey: [{ required: true, message: '权限字符不能为空', trigger: 'blur' }],
+    roleSort: [{ required: true, message: '角色顺序不能为空', trigger: 'blur' }]
+  }
+});
+const { form, queryParams, rules } = toRefs(data);
+const { ids, single, handleSelectionChange } = useTableSelection<RoleVO>(item => item.roleId);
+const { dialog, openDialog, closeDialog, setTitle } = useDialogState();
+
+/**
+ * 查询角色列表
+ */
+const getList = () => {
+  withLoading(async () => {
+    const res = await listRole(applyDateRange(queryParams.value));
+    roleList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+
+/**
+ * 搜索按钮操作
+ */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    resetDateRange();
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+/**删除按钮操作 */
+const handleDelete = async (row?: Partial<RoleVO>) => {
+  const roleids = row?.roleId || ids.value;
+  await modal.confirm('是否确认删除角色编号为' + roleids + '数据项目');
+  await delRole(roleids);
+  getList();
+  modal.msgSuccess('删除成功');
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    'system/role/export',
+    {
+      ...queryParams.value
+    },
+    `role_${new Date().getTime()}.xlsx`
+  );
+};
+/** 角色状态修改 */
+const handleStatusChange = async (row: Partial<RoleVO>) => {
+  const text = row.status === '0' ? '启用' : '停用';
+  try {
+    await modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?');
+    await changeRoleStatus(row.roleId, row.status);
+    modal.msgSuccess(text + '成功');
+  } catch {
+    row.status = row.status === '0' ? '1' : '0';
+  }
+};
+
+/** 分配用户 */
+const handleAuthUser = (row: Partial<RoleVO>) => {
+  router.push('/system/role-auth/user/' + row.roleId);
+};
+
+/** 所有部门节点数据 */
+const getDeptAllCheckedKeys = (): any => {
+  // 目前被选中的部门节点
+  const checkedKeys = deptRef.value?.getCheckedKeys();
+  // 半选中的部门节点
+  const halfCheckedKeys = deptRef.value?.getHalfCheckedKeys();
+  if (halfCheckedKeys) {
+    checkedKeys?.unshift(...halfCheckedKeys);
+  }
+  return checkedKeys;
+};
+/** 重置新增的表单以及其他数据  */
+const reset = () => {
+  menuRef.value?.setCheckedKeys([]);
+  menuPermissionMeta.value = createEmptyMenuPermissionMeta();
+  setSelectedMenuPermissionIds([]);
+  setSelectedButtonPermissionIds([]);
+  lastCheckedMenuKeys.value = [];
+  syncingMenuTree.value = false;
+  menuExpand.value = false;
+  menuNodeAll.value = false;
+  deptExpand.value = true;
+  deptNodeAll.value = false;
+  form.value = { ...initForm };
+  roleFormRef.value?.resetFields();
+};
+
+/** 添加角色 */
+const handleAdd = () => {
+  reset();
+  setTitle('添加角色');
+  openDialog();
+};
+/** 修改角色 */
+const handleUpdate = async (row?: Partial<RoleVO>) => {
+  reset();
+  const roleId = row?.roleId || ids.value[0];
+  const { data } = await getRole(roleId);
+  Object.assign(form.value, data);
+  form.value.roleSort = Number(form.value.roleSort);
+  // 菜单分配已迁移到“分配权限”弹窗，这里预置已有菜单，避免基础信息保存时误清空菜单权限。
+  const { checkedKeys } = await getRoleMenuTreeselect(roleId);
+  form.value.menuIds = checkedKeys;
+  setTitle('修改角色');
+  openDialog();
+};
+/** 根据角色ID查询菜单树结构 */
+const getRoleMenuTreeselect = (roleId: string | number) => {
+  return roleMenuTreeselect(roleId).then((res): RoleMenuTree => {
+    updateMenuPermissionOptions(res.data.menus);
+    return res.data;
+  });
+};
+/** 根据角色ID查询部门树结构 */
+const getRoleDeptTreeSelect = async (roleId: string | number) => {
+  const res = await deptTreeSelect(roleId);
+  deptOptions.value = res.data.depts;
+  return res.data;
+};
+/** 树权限（展开/折叠）*/
+const handleCheckedTreeExpand = (value: unknown, type: string) => {
+  const expanded = Boolean(value);
+  if (type == 'menu') {
+    const nodeMap = menuRef.value?.store?.nodesMap as Record<string, { expanded: boolean }> | undefined;
+    if (nodeMap) {
+      Object.keys(nodeMap).forEach(nodeId => {
+        nodeMap[nodeId].expanded = expanded;
+      });
+    }
+  } else if (type == 'dept') {
+    const treeList = deptOptions.value;
+    for (let i = 0; i < treeList.length; i++) {
+      if (deptRef.value) {
+        deptRef.value.store.nodesMap[treeList[i].id].expanded = expanded;
+      }
+    }
+  }
+};
+/** 树权限（全选/全不选） */
+const handleCheckedTreeNodeAll = (value: any, type: string) => {
+  if (type == 'menu') {
+    setSelectedMenuPermissionIds(value ? collectMenuNodeIds(menuOptions.value, false) : []);
+    setSelectedButtonPermissionIds(value ? collectButtonPermissionIds(false) : []);
+    refreshMenuTreeCheckedState(getPermissionStateIds());
+  } else if (type == 'dept') {
+    deptRef.value?.setCheckedNodes(value ? (deptOptions.value as any) : []);
+  }
+};
+/** 树权限（父子联动） */
+const handleCheckedTreeConnect = async (value: any, type: string) => {
+  if (type == 'menu') {
+    form.value.menuCheckStrictly = value;
+    await nextTick();
+    refreshMenuTreeCheckedState(getPermissionStateIds());
+  } else if (type == 'dept') {
+    form.value.deptCheckStrictly = value;
+  }
+};
+/** 所有菜单节点数据 */
+const getMenuAllCheckedKeys = (): any => {
+  return normalizePermissionIds([...getCheckedMenuKeys().allCheckedKeys, ...getSelectedButtonPermissionIds()]);
+};
+/** 提交按钮 */
+const submitForm = () => {
+  roleFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      syncFormMenuPermissionIds();
+      form.value.roleId ? await updateRole(form.value) : await addRole(form.value);
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      getList();
+    }
+  });
+};
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  closeDialog();
+};
+/** 选择角色权限范围触发 */
+const dataScopeSelectChange = (value: string) => {
+  if (value !== '2') {
+    deptRef.value?.setCheckedKeys([]);
+  }
+};
+/** 分配数据权限操作 */
+const handleDataScope = async (row: Partial<RoleVO>) => {
+  permissionTab.value = 'menu';
+  const response = await getRole(row.roleId);
+  Object.assign(form.value, response.data);
+  const menuRes = await getRoleMenuTreeselect(row.roleId);
+  const res = await getRoleDeptTreeSelect(row.roleId);
+  openDataScope.value = true;
+  setTitle('分配权限');
+  await nextTick(() => {
+    initPermissionState(menuRes.checkedKeys);
+    syncFormMenuPermissionIds();
+    refreshMenuTreeCheckedState(getPermissionStateIds());
+    deptRef.value?.setCheckedKeys(res.checkedKeys);
+    handleCheckedTreeExpand(menuExpand.value, 'menu');
+    handleCheckedTreeExpand(deptExpand.value, 'dept');
+  });
+};
+/** 提交按钮（数据权限） */
+const submitDataScope = async () => {
+  if (form.value.roleId) {
+    // 权限信息统一提交：菜单权限 + 数据权限。
+    syncFormMenuPermissionIds();
+    form.value.deptIds = getDeptAllCheckedKeys();
+    await updateRolePermission(form.value);
+    modal.msgSuccess('修改成功');
+    openDataScope.value = false;
+    getList();
+  }
+};
+/** 取消按钮（数据权限）*/
+const cancelDataScope = () => {
+  dataScopeRef.value?.resetFields();
+  form.value = { ...initForm };
+  permissionTab.value = 'menu';
+  menuRef.value?.setCheckedKeys([]);
+  menuPermissionMeta.value = createEmptyMenuPermissionMeta();
+  setSelectedMenuPermissionIds([]);
+  setSelectedButtonPermissionIds([]);
+  lastCheckedMenuKeys.value = [];
+  syncingMenuTree.value = false;
+  menuExpand.value = false;
+  menuNodeAll.value = false;
+  deptExpand.value = true;
+  deptNodeAll.value = false;
+  openDataScope.value = false;
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.table-crud-page;
+
+.dialog-grid-form {
+  :deep(.el-form-item) {
+    margin-bottom: 16px;
+  }
+
+  :deep(.el-input-number.w-full) {
+    width: 100%;
+  }
+}
+
+.permission-dialog-form {
+  --menu-name-col-width: 220px;
+  --menu-tree-leading-offset: 44px;
+
+  :deep(.el-tabs__header) {
+    margin-bottom: 16px;
+  }
+
+  :deep(.tree-border) {
+    max-height: 320px;
+    padding: 8px;
+    border-radius: 6px;
+    overflow: auto;
+  }
+
+  /* 菜单权限：表头 + 树同一容器，滚动只发生在树区域 */
+  .menu-tree-permission-wrap.tree-border {
+    display: flex;
+    flex-direction: column;
+    max-height: 320px;
+    margin-top: 8px;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .menu-tree-permission-wrap .menu-tree-panel {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 8px;
+    overflow: auto;
+  }
+
+  :deep(.menu-tree-panel .el-tree-node__content) {
+    min-height: 28px;
+    height: auto;
+    align-items: flex-start;
+    padding-top: 3px;
+    padding-bottom: 3px;
+  }
+
+  .menu-tree-permission-wrap .menu-tree-header {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    gap: 12px;
+    padding: 8px 12px 8px calc(var(--menu-tree-leading-offset) + 8px);
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.4;
+    background: var(--el-fill-color-light);
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+
+  .menu-tree-permission-wrap .menu-tree-header-name {
+    width: var(--menu-name-col-width);
+    flex: none;
+  }
+
+  .menu-tree-permission-wrap .menu-tree-header-buttons {
+    flex: 1;
+    min-width: 0;
+  }
+
+  :deep(.menu-tree-node-row) {
+    width: 100%;
+    min-height: 22px;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  :deep(.menu-tree-node-label) {
+    width: var(--menu-name-col-width);
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    line-height: 24px;
+    color: var(--el-text-color-primary);
+    box-sizing: border-box;
+  }
+
+  :deep(.menu-tree-node-label.is-hidden:not(.is-disabled)) {
+    color: var(--el-text-color-secondary);
+  }
+
+  :deep(.menu-tree-node-label.is-disabled) {
+    color: var(--el-color-danger);
+  }
+
+  :deep(.menu-visibility-icon) {
+    flex: 0 0 auto;
+    margin-top: 1px;
+    font-size: 14px;
+    color: var(--el-text-color-secondary);
+  }
+
+  :deep(.menu-disabled-icon) {
+    flex: 0 0 auto;
+    margin-top: 1px;
+    font-size: 14px;
+    color: var(--el-color-danger);
+  }
+
+  :deep(.menu-tree-node-buttons) {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+  }
+
+  :deep(.menu-button-label) {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  :deep(.menu-button-label.is-disabled) {
+    color: var(--el-color-danger);
+  }
+
+  :deep(.menu-button-disabled-icon) {
+    flex: 0 0 auto;
+    margin-top: 1px;
+    font-size: 14px;
+    color: var(--el-color-danger);
+  }
+
+  @media (max-width: 900px) {
+    --menu-name-col-width: 160px;
+  }
+}
+</style>
diff --git a/src/views/system/role/selectUser.vue b/src/views/system/role/selectUser.vue
new file mode 100644
index 0000000..47d3e3e
--- /dev/null
+++ b/src/views/system/role/selectUser.vue
@@ -0,0 +1,172 @@
+<template>
+  <el-row>
+    <el-dialog v-model="visible" title="选择用户" width="800px" top="5vh" append-to-body class="select-user-dialog">
+      <div class="p-2 select-user-shell">
+        <el-card shadow="hover" class="search-panel select-user-card">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+            <el-form-item label="用户名称" prop="userName">
+              <el-input
+                v-model="queryParams.userName"
+                placeholder="请输入用户名称"
+                clearable
+                @keyup.enter="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="手机号码" prop="phoneNumber">
+              <el-input
+                v-model="queryParams.phoneNumber"
+                placeholder="请输入手机号码"
+                clearable
+                @keyup.enter="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card shadow="hover" class="table-panel select-user-card">
+          <el-table
+            ref="tableRef"
+            border
+            class="data-table"
+            :data="userList"
+            height="260px"
+            @row-click="clickRow"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55"></el-table-column>
+            <el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />
+            <el-table-column label="用户昵称" prop="nickName" :show-overflow-tooltip="true" />
+            <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />
+            <el-table-column label="手机" prop="phoneNumber" :show-overflow-tooltip="true" />
+            <el-table-column label="状态" align="center" prop="status">
+              <template #default="scope">
+                <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+              <template #default="scope">
+                <span>{{ parseTime(scope.row.createTime) }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            v-if="total > 0"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            :total="total"
+            @pagination="getList"
+          />
+        </el-card>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSelectUser">确 定</el-button>
+          <el-button @click="visible = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script setup name="SelectUser" lang="ts">
+import { authUserSelectAll, unallocatedUserList } from '@/api/system/role';
+import { UserVO } from '@/api/system/user/types';
+import { UserQuery } from '@/api/system/user/types';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+import { parseTime } from '@/utils/ruoyi';
+
+const props = defineProps({
+  roleId: {
+    type: [Number, String],
+    required: true
+  }
+});
+
+const { sys_normal_disable } = toRefs<any>(useDict('sys_normal_disable'));
+
+const userList = ref<UserVO[]>([]);
+const visible = ref(false);
+const total = ref(0);
+const userIds = ref<Array<string | number>>([]);
+
+const queryParams = reactive<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  roleId: undefined,
+  userName: undefined,
+  phoneNumber: undefined
+});
+
+const tableRef = ref<ElTableInstance>();
+const queryFormRef = ref<ElFormInstance>();
+
+const show = () => {
+  queryParams.roleId = props.roleId;
+  getList();
+  visible.value = true;
+};
+
+/**
+ * 选择行
+ */
+const clickRow = (row: any) => {
+  // ele的bug
+  tableRef.value?.toggleRowSelection(row, false);
+};
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: UserVO[]) => {
+  userIds.value = selection.map((item: UserVO) => item.userId);
+};
+
+/** 查询数据 */
+const getList = async () => {
+  const res = await unallocatedUserList(queryParams);
+  userList.value = res.data?.rows;
+  total.value = res.data?.total;
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  getList();
+};
+
+const emit = defineEmits(['ok']);
+/**选择授权用户操作 */
+const handleSelectUser = async () => {
+  const roleId = queryParams.roleId;
+  const ids = userIds.value.join(',');
+  if (ids == '') {
+    modal.msgError('请选择要分配的用户');
+    return;
+  }
+  await authUserSelectAll({ roleId, userIds: ids });
+  modal.msgSuccess('分配成功');
+  emit('ok');
+  visible.value = false;
+};
+// 暴露
+defineExpose({
+  show
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/selector-dialog' as selectorDialog;
+
+@include selectorDialog.shell-gap('.select-user-shell');
+@include selectorDialog.dialog-body-padding('select-user-dialog');
+
+.select-user-card :deep(.el-card__body) {
+  padding: 14px 16px !important;
+}
+</style>
diff --git a/src/views/system/user/authRole.vue b/src/views/system/user/authRole.vue
new file mode 100644
index 0000000..1469c75
--- /dev/null
+++ b/src/views/system/user/authRole.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="p-2 app-container auth-role-page">
+    <el-card shadow="hover" class="search-panel auth-role-info">
+      <template #header>
+        <div class="panel-heading">
+          <div><h3>基本信息</h3></div>
+        </div>
+      </template>
+      <el-form :model="form" :inline="true" class="query-form auth-role-form">
+        <el-form-item label="用户昵称" prop="nickName">
+          <el-input v-model="form.nickName" disabled />
+        </el-form-item>
+        <el-form-item label="登录账号" prop="userName">
+          <el-input v-model="form.userName" disabled />
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>角色信息</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button type="primary" @click="submitForm()">提交</el-button>
+            <el-button @click="close()">返回</el-button>
+          </div>
+        </div>
+      </template>
+      <el-table
+        ref="tableRef"
+        v-loading="loading"
+        border
+        class="data-table"
+        :row-key="getRowKey"
+        :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
+        @row-click="clickRow"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column label="序号" width="55" type="index" align="center">
+          <template #default="scope">
+            <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          type="selection"
+          :reserve-selection="true"
+          :selectable="checkSelectable"
+          width="55"
+        ></el-table-column>
+        <el-table-column label="角色编号" align="center" prop="roleId" />
+        <el-table-column label="角色名称" align="center" prop="roleName" />
+        <el-table-column label="权限字符" align="center" prop="roleKey" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" v-model:page="pageNum" v-model:limit="pageSize" :total="total" />
+    </el-card>
+  </div>
+</template>
+
+<script setup name="AuthRole" lang="ts">
+import { RouteLocationNormalized } from 'vue-router';
+import { RoleVO } from '@/api/system/role/types';
+import { getAuthRole, updateAuthRole } from '@/api/system/user';
+import { UserForm } from '@/api/system/user/types';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+import { parseTime } from '@/utils/ruoyi';
+
+const route = useRoute();
+
+const loading = ref(true);
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const roleIds = ref<Array<string | number>>([]);
+const roles = ref<RoleVO[]>([]);
+const form = ref<Partial<UserForm>>({
+  nickName: undefined,
+  userName: '',
+  userId: undefined
+});
+
+const tableRef = ref<ElTableInstance>();
+
+/** 单击选中行数据 */
+const clickRow = (row: RoleVO) => {
+  if (checkSelectable(row)) {
+    row.flag = !row.flag;
+    tableRef.value?.toggleRowSelection(row, row.flag);
+  }
+};
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: RoleVO[]) => {
+  roleIds.value = selection.map(item => item.roleId);
+};
+/** 保存选中的数据编号 */
+const getRowKey = (row: RoleVO): string => {
+  return String(row.roleId);
+};
+/** 检查角色状态 */
+const checkSelectable = (row: RoleVO): boolean => {
+  return row.status === '0';
+};
+/** 关闭按钮 */
+const close = () => {
+  const obj: RouteLocationNormalized = {
+    fullPath: '',
+    hash: '',
+    matched: [],
+    meta: undefined,
+    name: undefined,
+    params: undefined,
+    query: undefined,
+    redirectedFrom: undefined,
+    path: '/system/user'
+  };
+  tab.closeOpenPage(obj as any);
+};
+/** 提交按钮 */
+const submitForm = async () => {
+  const userId = form.value.userId;
+  const rIds = roleIds.value.join(',');
+  await updateAuthRole({ userId: userId as string, roleIds: rIds });
+  modal.msgSuccess('授权成功');
+  close();
+};
+
+const getList = async () => {
+  const userId = route.params && route.params.userId;
+  if (userId) {
+    loading.value = true;
+    const res = await getAuthRole(userId as string);
+    Object.assign(form.value, res.data.user);
+    Object.assign(roles.value, res.data.roles);
+    total.value = roles.value.length;
+    await nextTick(() => {
+      roles.value.forEach(row => {
+        if (row?.flag) {
+          tableRef.value?.toggleRowSelection(row, true);
+        }
+      });
+    });
+    loading.value = false;
+  }
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.auth-role-form :deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+.auth-role-form :deep(.el-input) {
+  width: 220px;
+}
+
+.auth-role-info :deep(.el-card__body) {
+  padding-top: 14px !important;
+}
+</style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
new file mode 100644
index 0000000..1fbaaa3
--- /dev/null
+++ b/src/views/system/user/index.vue
@@ -0,0 +1,874 @@
+<template>
+  <div class="p-2 system-user-page">
+    <el-row :gutter="20" class="content-grid">
+      <!-- 部门树 -->
+      <tree-panel
+        ref="treePanelRef"
+        v-model:collapsed="treeCollapsed"
+        title="部门结构"
+        placeholder="请输入部门名称"
+        :data="deptOptions"
+        :expanded-span="5"
+        @node-click="handleNodeClick"
+      />
+      <el-col
+        :lg="treeCollapsed ? 23 : 19"
+        :xs="24"
+        class="tree-content-col content-main"
+        :class="{ 'is-tree-collapsed': treeCollapsed }"
+      >
+        <div class="search-wrap">
+          <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+            <template #header>
+              <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+                <div>
+                  <span class="panel-kicker">Search Filters</span>
+                  <h3>筛选条件</h3>
+                </div>
+              </div>
+            </template>
+            <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+              <el-form-item label="用户名称" prop="userName">
+                <el-input
+                  v-model="queryParams.userName"
+                  placeholder="请输入用户名称"
+                  clearable
+                  @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item label="用户昵称" prop="nickName">
+                <el-input
+                  v-model="queryParams.nickName"
+                  placeholder="请输入用户昵称"
+                  clearable
+                  @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item label="手机号码" prop="phoneNumber">
+                <el-input
+                  v-model="queryParams.phoneNumber"
+                  placeholder="请输入手机号码"
+                  clearable
+                  @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+
+              <el-form-item label="状态" prop="status">
+                <el-select v-model="queryParams.status" placeholder="用户状态" clearable>
+                  <el-option
+                    v-for="dict in sys_normal_disable"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="创建时间" style="width: 308px">
+                <el-date-picker
+                  v-model="dateRange"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  type="daterange"
+                  range-separator="-"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+                ></el-date-picker>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </div>
+
+        <el-card shadow="hover" class="table-panel">
+          <template #header>
+            <div class="toolbar-shell">
+              <div class="table-heading">
+                <span class="panel-kicker">User Dataset</span>
+                <h3>用户列表</h3>
+                <p>共 {{ total }} 条记录，支持部门筛选、状态切换、导入导出和角色分配。</p>
+              </div>
+              <div class="toolbar-actions">
+                <el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus" @click="handleAdd()">
+                  新增
+                </el-button>
+                <el-button
+                  v-has-permi="['system:user:edit']"
+                  type="success"
+                  plain
+                  :disabled="single"
+                  icon="Edit"
+                  @click="handleUpdate()"
+                >
+                  修改
+                </el-button>
+                <el-button
+                  v-has-permi="['system:user:remove']"
+                  type="danger"
+                  plain
+                  :disabled="multiple"
+                  icon="Delete"
+                  @click="handleDelete()"
+                >
+                  删除
+                </el-button>
+                <el-button
+                  v-hasPermi="['system:user:edit']"
+                  type="warning"
+                  plain
+                  icon="Unlock"
+                  :disabled="single"
+                  @click="handleUnlock()"
+                >
+                  解锁
+                </el-button>
+                <el-dropdown class="mt-[1px]">
+                  <el-button plain type="info">
+                    更多
+                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                  </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item icon="Download" @click="importTemplate">下载模板</el-dropdown-item>
+                      <!-- 注意 由于el-dropdown-item标签是延迟加载的 所以v-has-permi自定义标签不生效 需要使用v-if调用方法执行 -->
+                      <el-dropdown-item v-if="checkPermi(['system:user:import'])" icon="Top" @click="handleImport">
+                        导入数据
+                      </el-dropdown-item>
+                      <el-dropdown-item v-if="checkPermi(['system:user:export'])" icon="Download" @click="handleExport">
+                        导出数据
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+                <right-toolbar
+                  v-model:show-search="showSearch"
+                  :columns="columns"
+                  :search="false"
+                  storage-key="sys_user_column_visible"
+                  @query-table="getList"
+                ></right-toolbar>
+              </div>
+            </div>
+          </template>
+
+          <el-table
+            v-loading="loading"
+            border
+            class="data-table"
+            :data="userList"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="50" align="center" />
+            <el-table-column v-if="columns[0].visible" key="userId" label="用户编号" align="center" prop="userId" />
+            <el-table-column
+              v-if="columns[1].visible"
+              key="userName"
+              label="用户名称"
+              align="center"
+              :show-overflow-tooltip="true"
+            >
+              <template #default="scope">
+                <el-link type="primary" underline="never" @click="handleViewDetail(scope.row)">
+                  {{ scope.row.userName }}
+                </el-link>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="columns[2].visible"
+              key="nickName"
+              label="用户昵称"
+              align="center"
+              prop="nickName"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              v-if="columns[3].visible"
+              key="deptName"
+              label="部门"
+              align="center"
+              prop="deptName"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              v-if="columns[4].visible"
+              key="phoneNumber"
+              label="手机号码"
+              align="center"
+              prop="phoneNumber"
+              width="120"
+            />
+            <el-table-column v-if="columns[5].visible" key="status" label="状态" align="center">
+              <template #default="scope">
+                <el-switch
+                  v-model="scope.row.status"
+                  active-value="0"
+                  inactive-value="1"
+                  @change="handleStatusChange(scope.row)"
+                ></el-switch>
+              </template>
+            </el-table-column>
+
+            <el-table-column v-if="columns[6].visible" label="创建时间" align="center" prop="createTime" width="160">
+              <template #default="scope">
+                <span>{{ scope.row.createTime }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-tooltip v-if="scope.row.userId !== '1761100000000000001'" content="修改" placement="top">
+                  <el-button
+                    v-hasPermi="['system:user:edit']"
+                    link
+                    type="primary"
+                    icon="Edit"
+                    @click="handleUpdate(scope.row)"
+                  ></el-button>
+                </el-tooltip>
+                <el-tooltip v-if="scope.row.userId !== '1761100000000000001'" content="删除" placement="top">
+                  <el-button
+                    v-hasPermi="['system:user:remove']"
+                    link
+                    type="primary"
+                    icon="Delete"
+                    @click="handleDelete(scope.row)"
+                  ></el-button>
+                </el-tooltip>
+
+                <el-tooltip v-if="scope.row.userId !== '1761100000000000001'" content="重置密码" placement="top">
+                  <el-button
+                    v-hasPermi="['system:user:resetPwd']"
+                    link
+                    type="primary"
+                    icon="Key"
+                    @click="handleResetPwd(scope.row)"
+                  ></el-button>
+                </el-tooltip>
+
+                <el-tooltip v-if="scope.row.userId !== '1761100000000000001'" content="分配角色" placement="top">
+                  <el-button
+                    v-hasPermi="['system:user:edit']"
+                    link
+                    type="primary"
+                    icon="CircleCheck"
+                    @click="handleAuthRole(scope.row)"
+                  ></el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <pagination
+            v-show="total > 0"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            :total="total"
+            @pagination="getList"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 添加或修改用户配置对话框 -->
+    <el-dialog
+      ref="formDialogRef"
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="600px"
+      append-to-body
+      @close="closeDialog"
+    >
+      <el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户昵称" prop="nickName">
+              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.userId == null || form.userId != useUserStore().userId">
+            <el-form-item label="归属部门" prop="deptId">
+              <el-tree-select
+                v-model="form.deptId"
+                :data="enabledDeptOptions"
+                :props="{ value: 'id', label: 'label', children: 'children' } as any"
+                value-key="id"
+                placeholder="请选择归属部门"
+                check-strictly
+                @change="handleDeptChange"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="手机号码" prop="phoneNumber">
+              <el-input v-model="form.phoneNumber" placeholder="请输入手机号码" maxlength="11" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
+              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
+              <el-input
+                v-model="form.password"
+                placeholder="请输入用户密码"
+                type="password"
+                maxlength="20"
+                show-password
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户性别">
+              <el-select v-model="form.gender" placeholder="请选择">
+                <el-option
+                  v-for="dict in sys_user_gender"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12" v-if="form.userId == null || form.userId != useUserStore().userId">
+            <el-form-item label="岗位">
+              <el-select v-model="form.postIds" multiple placeholder="请选择">
+                <el-option
+                  v-for="item in postOptions"
+                  :key="item.postId"
+                  :label="item.postName"
+                  :value="item.postId"
+                  :disabled="item.status == '1'"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="form.userId == null || form.userId != useUserStore().userId">
+            <el-form-item label="角色" prop="roleIds">
+              <el-select v-model="form.roleIds" filterable multiple placeholder="请选择">
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.roleId"
+                  :label="item.roleName"
+                  :value="item.roleId"
+                  :disabled="item.status == '1'"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel()">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 用户导入对话框 -->
+    <el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
+      <el-upload
+        ref="uploadRef"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        drag
+      >
+        <el-icon class="el-icon--upload">
+          <UploadFilled />
+        </el-icon>
+        <div class="el-upload__text">
+          将文件拖到此处，或
+          <em>点击上传</em>
+        </div>
+        <template #tip>
+          <div class="text-center el-upload__tip">
+            <div class="el-upload__tip">
+              <el-checkbox v-model="upload.updateSupport" />
+              是否更新已经存在的用户数据
+            </div>
+            <span>仅允许导入xls、xlsx格式文件。</span>
+            <el-link
+              type="primary"
+              underline="never"
+              style="font-size: 12px; vertical-align: baseline"
+              @click="importTemplate"
+            >
+              下载模板
+            </el-link>
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 用户详情抽屉 -->
+    <user-view-drawer ref="userViewRef" />
+  </div>
+</template>
+
+<script setup name="User" lang="ts">
+import { to } from 'await-to-js';
+import { useRouter } from 'vue-router';
+import { getConfigKey } from '@/api/system/config';
+import { DeptTreeVO, DeptVO } from '@/api/system/dept/types';
+import { optionselect } from '@/api/system/post';
+import { PostVO } from '@/api/system/post/types';
+import { RoleVO } from '@/api/system/role/types';
+import api from '@/api/system/user';
+import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
+import TreePanel from '@/components/TreePanel/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTreeCollapsed } from '@/hooks/tree/useTreeCollapsed';
+import modal from '@/plugins/modal';
+import { useUserStore } from '@/store/modules/user';
+import { useDict } from '@/utils/dict';
+import { checkPermi } from '@/utils/permission';
+import { globalHeaders } from '@/utils/request';
+import { download as requestDownload } from '@/utils/request';
+import UserViewDrawer from './view.vue';
+
+const router = useRouter();
+const { sys_normal_disable, sys_user_gender } = toRefs<any>(useDict('sys_normal_disable', 'sys_user_gender'));
+const userList = ref<UserVO[]>();
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
+const { treeCollapsed } = useTreeCollapsed();
+const deptOptions = ref<DeptTreeVO[]>([]);
+const enabledDeptOptions = ref<DeptTreeVO[]>([]);
+const initPassword = ref<string>('');
+const postOptions = ref<PostVO[]>([]);
+const roleOptions = ref<RoleVO[]>([]);
+/*** 用户导入参数 */
+const upload = reactive<ImportOption>({
+  // 是否显示弹出层（用户导入）
+  open: false,
+  // 弹出层标题（用户导入）
+  title: '',
+  // 是否禁用上传
+  isUploading: false,
+  // 是否更新已经存在的用户数据
+  updateSupport: 0,
+  // 设置上传的请求头部
+  headers: globalHeaders(),
+  // 上传的地址
+  url: import.meta.env.VITE_APP_BASE_API + '/system/user/importData'
+});
+// 列显隐信息
+const columns = ref<FieldOption[]>([
+  { key: 0, label: `用户编号`, visible: false, children: [] },
+  { key: 1, label: `用户名称`, visible: true, children: [] },
+  { key: 2, label: `用户昵称`, visible: true, children: [] },
+  { key: 3, label: `部门`, visible: true, children: [] },
+  { key: 4, label: `手机号码`, visible: true, children: [] },
+  { key: 5, label: `状态`, visible: true, children: [] },
+  { key: 6, label: `创建时间`, visible: true, children: [] }
+]);
+
+const treePanelRef = ref<InstanceType<typeof TreePanel>>();
+const queryFormRef = ref<ElFormInstance>();
+const userFormRef = ref<ElFormInstance>();
+const uploadRef = ref<ElUploadInstance>();
+const formDialogRef = ref<ElDialogInstance>();
+const userViewRef = ref<InstanceType<typeof UserViewDrawer>>();
+
+const initFormData: UserForm = {
+  userId: undefined,
+  deptId: undefined,
+  userName: '',
+  nickName: undefined,
+  password: '',
+  phoneNumber: undefined,
+  email: undefined,
+  gender: undefined,
+  status: '0',
+  remark: '',
+  postIds: [],
+  roleIds: []
+};
+
+const initData: PageData<UserForm, UserQuery> = {
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: '',
+    phoneNumber: '',
+    status: '',
+    deptId: '',
+    roleId: ''
+  },
+  rules: {
+    userName: [
+      { required: true, message: '用户名称不能为空', trigger: 'blur' },
+      {
+        min: 2,
+        max: 20,
+        message: '用户名称长度必须介于 2 和 20 之间',
+        trigger: 'blur'
+      }
+    ],
+    nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
+    password: [
+      { required: true, message: '用户密码不能为空', trigger: 'blur' },
+      {
+        min: 5,
+        max: 20,
+        message: '用户密码长度必须介于 5 和 20 之间',
+        trigger: 'blur'
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: '不能包含非法字符：< > " \' \\ |',
+        trigger: 'blur'
+      }
+    ],
+    email: [
+      {
+        type: 'email',
+        message: '请输入正确的邮箱地址',
+        trigger: ['blur', 'change']
+      }
+    ],
+    phoneNumber: [
+      {
+        pattern: /^1[3456789][0-9]\d{8}$/,
+        message: '请输入正确的手机号码',
+        trigger: 'blur'
+      }
+    ],
+    roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }]
+  }
+};
+const data = reactive<PageData<UserForm, UserQuery>>(initData);
+
+const { queryParams, form, rules } = toRefs<PageData<UserForm, UserQuery>>(data);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<UserVO>(item => item.userId);
+const { dialog, openDialog: openUserDialog, closeDialog: closeUserDialog, setTitle: setDialogTitle } = useDialogState();
+
+/** 查询用户列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await api.listUser(applyDateRange(queryParams.value));
+    userList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+
+/** 查询部门下拉树结构 */
+const getDeptTree = async () => {
+  const res = await api.deptTreeSelect();
+  deptOptions.value = res.data;
+  enabledDeptOptions.value = filterDisabledDept(res.data);
+};
+
+/** 过滤禁用的部门，并返回独立的新树，避免污染左侧完整部门树 */
+const filterDisabledDept = (deptList: DeptTreeVO[]): DeptTreeVO[] => {
+  return deptList.reduce<DeptTreeVO[]>((result, dept) => {
+    if (dept.disabled) {
+      return result;
+    }
+    result.push({
+      ...dept,
+      children: dept.children?.length ? filterDisabledDept(dept.children) : []
+    });
+    return result;
+  }, []);
+};
+
+/** 节点单击事件 */
+const handleNodeClick = (data: DeptVO) => {
+  queryParams.value.deptId = data.id;
+  handleQuery();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    resetDateRange();
+    queryParams.value.deptId = undefined;
+    treePanelRef.value?.setCurrentKey(undefined);
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<UserVO>) => {
+  const userIds = row?.userId || ids.value;
+  const [err] = await to(modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？') as any);
+  if (!err) {
+    await api.delUser(userIds);
+    await getList();
+    modal.msgSuccess('删除成功');
+  }
+};
+
+/** 解锁按钮操作 */
+const handleUnlock = async () => {
+  const userId = ids.value[0];
+  const [err] = await to(modal.confirm('是否确认解锁用户编号为"' + userId + '"的数据项?') as any);
+  if (!err) {
+    await api.unlockUser(userId);
+    modal.msgSuccess('用户编号"' + userId + '"解锁成功');
+  }
+};
+
+/** 用户状态修改  */
+const handleStatusChange = async (row: Partial<UserVO>) => {
+  const text = row.status === '0' ? '启用' : '停用';
+  try {
+    await modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?');
+    await api.changeUserStatus(row.userId, row.status);
+    modal.msgSuccess(text + '成功');
+  } catch (err) {
+    row.status = row.status === '0' ? '1' : '0';
+  }
+};
+/** 跳转角色分配 */
+const handleAuthRole = (row: Partial<UserVO>) => {
+  const userId = row.userId;
+  router.push('/system/user-auth/role/' + userId);
+};
+
+/** 重置密码按钮操作 */
+const handleResetPwd = async (row: Partial<UserVO>) => {
+  const [err, res] = await to(
+    ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      closeOnClickModal: false,
+      inputPattern: /^.{5,20}$/,
+      inputErrorMessage: '用户密码长度必须介于 5 和 20 之间',
+      inputValidator: value => {
+        if (/<|>|"|'|\||\\/.test(value)) {
+          return '不能包含非法字符：< > " \' \\ |';
+        }
+      }
+    })
+  );
+  if (!err && res) {
+    await api.resetUserPwd(row.userId, res.value);
+    modal.msgSuccess('修改成功，新密码是：' + res.value);
+  }
+};
+
+/** 详情按钮操作 */
+const handleViewDetail = (row: Partial<UserVO>) => {
+  userViewRef.value?.openDrawer(row.userId);
+};
+
+/** 导入按钮操作 */
+const handleImport = () => {
+  upload.title = '用户导入';
+  upload.open = true;
+};
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    'system/user/export',
+    {
+      ...queryParams.value
+    },
+    `user_${new Date().getTime()}.xlsx`
+  );
+};
+/** 下载模板操作 */
+const importTemplate = () => {
+  requestDownload('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`);
+};
+
+/**文件上传中处理 */
+const handleFileUploadProgress = () => {
+  upload.isUploading = true;
+};
+
+const formatImportResultMessage = (message: unknown) => {
+  return String(message ?? '')
+    .replace(/<br\s*\/?>/gi, '\n')
+    .replace(/&nbsp;/gi, ' ')
+    .replace(/<[^>]+>/g, '');
+};
+
+/** 文件上传成功处理 */
+const handleFileSuccess = (response: any, file: UploadFile) => {
+  upload.open = false;
+  upload.isUploading = false;
+  uploadRef.value?.handleRemove(file);
+  ElMessageBox.alert(formatImportResultMessage(response.msg), '导入结果', {
+    customClass: 'import-result-box'
+  });
+  getList();
+};
+
+/** 提交上传文件 */
+function submitFileForm() {
+  uploadRef.value?.submit();
+}
+
+/** 重置操作表单 */
+const reset = () => {
+  form.value = { ...initFormData };
+  userFormRef.value?.resetFields();
+};
+/** 取消按钮 */
+const cancel = () => {
+  closeUserDialog();
+  reset();
+};
+
+/** 新增按钮操作 */
+const handleAdd = async () => {
+  reset();
+  const { data } = await api.getUser();
+  setDialogTitle('新增用户');
+  openUserDialog();
+  postOptions.value = data.posts;
+  roleOptions.value = data.roles;
+  form.value.password = initPassword.value.toString();
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: Partial<UserForm>) => {
+  reset();
+  const userId = row?.userId || ids.value[0];
+  const { data } = await api.getUser(userId);
+  setDialogTitle('修改用户');
+  openUserDialog();
+  Object.assign(form.value, data.user);
+  postOptions.value = data.posts;
+  roleOptions.value = Array.from(
+    new Map([...data.roles, ...data.user.roles].map(role => [role.roleId, role])).values()
+  );
+  form.value.postIds = data.postIds;
+  form.value.roleIds = data.roleIds;
+  form.value.password = '';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  userFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      if (form.value.userId) {
+        // 自己编辑自己的情况下 不允许编辑角色部门岗位
+        if (form.value.userId == useUserStore().userId) {
+          form.value.roleIds = null;
+          form.value.deptId = null;
+          form.value.postIds = null;
+        }
+        await api.updateUser(form.value);
+      } else {
+        await api.addUser(form.value);
+      }
+      modal.msgSuccess('操作成功');
+      closeUserDialog();
+      await getList();
+    }
+  });
+};
+
+/**
+ * 关闭用户弹窗
+ */
+const closeDialog = () => {
+  closeUserDialog();
+  resetForm();
+};
+
+/**
+ * 重置表单
+ */
+const resetForm = () => {
+  userFormRef.value?.resetFields();
+  userFormRef.value?.clearValidate();
+
+  form.value.id = undefined;
+  form.value.status = '1';
+};
+onMounted(() => {
+  getDeptTree(); // 初始化部门数据
+  getList(); // 初始化列表数据
+  getConfigKey('sys.user.initPassword').then(response => {
+    initPassword.value = response.data;
+  });
+});
+
+async function handleDeptChange(value: number | string) {
+  const response = await optionselect(value);
+  postOptions.value = response.data;
+  form.value.postIds = [];
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.tree-table-crud-page;
+
+:global(.import-result-box .el-message-box__message) {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px 20px 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>
diff --git a/src/views/system/user/profile/index.vue b/src/views/system/user/profile/index.vue
new file mode 100644
index 0000000..1759771
--- /dev/null
+++ b/src/views/system/user/profile/index.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="p-2 app-container profile-page">
+    <el-row :gutter="20" class="profile-grid">
+      <el-col :span="6" :xs="24">
+        <el-card shadow="hover" class="side-panel profile-summary-card">
+          <template #header>
+            <div class="panel-heading">
+              <div><h3>个人信息</h3></div>
+            </div>
+          </template>
+          <div class="profile-summary">
+            <div class="text-center profile-avatar">
+              <userAvatar />
+            </div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <div class="profile-item-label">
+                  <svg-icon icon-class="user" />
+                  <span>用户名称</span>
+                </div>
+                <span class="profile-item-value">{{ state.user.userName || '-' }}</span>
+              </li>
+              <li class="list-group-item">
+                <div class="profile-item-label">
+                  <svg-icon icon-class="phone" />
+                  <span>手机号码</span>
+                </div>
+                <span class="profile-item-value">{{ state.user.phoneNumber || '-' }}</span>
+              </li>
+              <li class="list-group-item">
+                <div class="profile-item-label">
+                  <svg-icon icon-class="email" />
+                  <span>用户邮箱</span>
+                </div>
+                <span class="profile-item-value">{{ state.user.email || '-' }}</span>
+              </li>
+              <li class="list-group-item">
+                <div class="profile-item-label">
+                  <svg-icon icon-class="tree" />
+                  <span>所属部门</span>
+                </div>
+                <span v-if="state.user.deptName" class="profile-item-value">
+                  {{ state.user.deptName }} / {{ state.postGroup }}
+                </span>
+                <span v-else class="profile-item-value">-</span>
+              </li>
+              <li class="list-group-item">
+                <div class="profile-item-label">
+                  <svg-icon icon-class="peoples" />
+                  <span>所属角色</span>
+                </div>
+                <span class="profile-item-value">{{ state.roleGroup || '-' }}</span>
+              </li>
+              <li class="list-group-item">
+                <div class="profile-item-label">
+                  <svg-icon icon-class="date" />
+                  <span>创建日期</span>
+                </div>
+                <span class="profile-item-value">{{ state.user.createTime || '-' }}</span>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18" :xs="24">
+        <el-card shadow="hover" class="table-panel profile-main-card">
+          <template #header>
+            <div class="toolbar-shell">
+              <div class="table-heading">
+                <h3>个人设置</h3>
+                <p>维护个人资料、密码、第三方应用和在线设备。</p>
+              </div>
+            </div>
+          </template>
+          <el-tabs v-model="activeTab" class="profile-tabs">
+            <el-tab-pane label="基本资料" name="userinfo">
+              <userInfo :user="userForm" />
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="resetPwd">
+              <resetPwd />
+            </el-tab-pane>
+            <el-tab-pane label="第三方应用" name="thirdParty">
+              <thirdParty :auths="state.auths" />
+            </el-tab-pane>
+            <el-tab-pane label="在线设备" name="onlineDevice">
+              <onlineDevice :devices="state.devices" />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup name="Profile" lang="ts">
+import { getOnline } from '@/api/monitor/online';
+import { getAuthList } from '@/api/system/social/auth';
+import { getUserProfile } from '@/api/system/user';
+import { UserVO } from '@/api/system/user/types';
+import OnlineDevice from './onlineDevice.vue';
+import ResetPwd from './resetPwd.vue';
+import ThirdParty from './thirdParty.vue';
+import UserAvatar from './userAvatar.vue';
+import UserInfo from './userInfo.vue';
+
+const activeTab = ref('userinfo');
+interface State {
+  user: Partial<UserVO>;
+  roleGroup: string;
+  postGroup: string;
+  auths: any;
+  devices: any;
+}
+const state = ref<State>({
+  user: {},
+  roleGroup: '',
+  postGroup: '',
+  auths: [],
+  devices: []
+});
+
+const userForm = ref({});
+
+const getUser = async () => {
+  const res = await getUserProfile();
+  state.value.user = res.data.user;
+  userForm.value = { ...res.data.user };
+  state.value.roleGroup = res.data.roleGroup;
+  state.value.postGroup = res.data.postGroup;
+};
+
+const getAuths = async () => {
+  const res = await getAuthList();
+  state.value.auths = res.data;
+};
+const getOnlines = async () => {
+  const res = await getOnline();
+  state.value.devices = res.data?.rows;
+};
+
+onMounted(() => {
+  getUser();
+  getAuths();
+  getOnlines();
+});
+</script>
+
+<style lang="scss" scoped>
+.profile-grid {
+  row-gap: 12px;
+}
+
+.profile-summary-card,
+.profile-main-card {
+  height: 100%;
+}
+
+.profile-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.profile-avatar {
+  margin-bottom: 4px;
+}
+
+.profile-item-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+}
+
+.profile-item-value {
+  max-width: 58%;
+  text-align: right;
+  color: var(--el-text-color-secondary);
+  word-break: break-word;
+}
+
+.profile-summary :deep(.list-group-item) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 0;
+}
+
+.profile-tabs :deep(.el-tabs__header) {
+  margin-bottom: 18px;
+}
+
+.profile-tabs :deep(.el-tabs__nav-wrap::after),
+.profile-tabs :deep(.el-tabs__active-bar) {
+  display: none;
+}
+
+.profile-tabs :deep(.el-tabs__nav) {
+  gap: 8px;
+}
+
+.profile-tabs :deep(.el-tabs__item) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  min-width: 88px;
+  padding: 0 16px;
+  border-radius: 10px;
+  color: var(--el-text-color-regular);
+}
+
+.profile-tabs :deep(.el-tabs__item:nth-child(2)),
+.profile-tabs :deep(.el-tabs__item.is-top:first-child),
+.profile-tabs :deep(.el-tabs__item.is-top:last-child) {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.profile-tabs :deep(.el-tabs__item.is-active) {
+  background: rgba(53, 109, 255, 0.1);
+  color: var(--el-color-primary);
+}
+
+@media (max-width: 768px) {
+  .profile-item-value {
+    max-width: 50%;
+  }
+}
+
+.list-group-striped > .list-group-item {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.list-group {
+  padding-left: 0px;
+  list-style: none;
+}
+
+.list-group-item {
+  border-bottom: 1px solid #e7eaec;
+  border-top: 1px solid #e7eaec;
+  margin-bottom: -1px;
+  padding: 11px 0px;
+  font-size: 13px;
+}
+</style>
diff --git a/src/views/system/user/profile/onlineDevice.vue b/src/views/system/user/profile/onlineDevice.vue
new file mode 100644
index 0000000..90a8b98
--- /dev/null
+++ b/src/views/system/user/profile/onlineDevice.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="profile-table-wrap">
+    <el-table :data="devices" border class="data-table profile-device-table">
+      <el-table-column label="设备类型" align="center">
+        <template #default="scope">
+          <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
+      <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
+      <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
+      <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
+      <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.loginTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-tooltip content="删除" placement="top">
+            <el-button link type="primary" icon="Delete" @click="handldDelOnline(scope.row)"></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup name="Online" lang="ts">
+import { delOnline } from '@/api/monitor/online';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+import { useDict } from '@/utils/dict';
+import { propTypes } from '@/utils/propTypes';
+import { parseTime } from '@/utils/ruoyi';
+
+const { sys_device_type } = toRefs<any>(useDict('sys_device_type'));
+
+const props = defineProps({
+  devices: propTypes.any.isRequired
+});
+const devices = computed(() => props.devices);
+
+/** 删除按钮操作 */
+const handldDelOnline = (row: any) => {
+  ElMessageBox.confirm('删除设备后，在该设备登录需要重新进行验证')
+    .then(() => {
+      return delOnline(row.tokenId);
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        modal.msgSuccess('删除成功');
+        tab.refreshPage();
+      } else {
+        modal.msgError(res.msg);
+      }
+    })
+    .catch(() => {});
+};
+</script>
+
+<style lang="scss" scoped>
+.profile-table-wrap {
+  width: 100%;
+}
+</style>
diff --git a/src/views/system/user/profile/resetPwd.vue b/src/views/system/user/profile/resetPwd.vue
new file mode 100644
index 0000000..c2e1493
--- /dev/null
+++ b/src/views/system/user/profile/resetPwd.vue
@@ -0,0 +1,97 @@
+<template>
+  <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px" class="profile-form">
+    <el-form-item label="旧密码" prop="oldPassword">
+      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
+    </el-form-item>
+    <el-form-item label="新密码" prop="newPassword">
+      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
+    </el-form-item>
+    <el-form-item label="确认密码" prop="confirmPassword">
+      <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password />
+    </el-form-item>
+    <el-form-item class="profile-form__actions">
+      <el-button type="primary" @click="submit">保存</el-button>
+      <el-button @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import type { ResetPwdForm } from '@/api/system/user/types';
+import { updateUserPwd } from '@/api/system/user';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+
+const pwdRef = ref<ElFormInstance>();
+const user = ref<ResetPwdForm>({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+});
+
+const equalToPassword = (rule: any, value: string, callback: any) => {
+  if (user.value.newPassword !== value) {
+    callback(new Error('两次输入的密码不一致'));
+  } else {
+    callback();
+  }
+};
+const rules = ref({
+  oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
+  newPassword: [
+    { required: true, message: '新密码不能为空', trigger: 'blur' },
+    {
+      min: 6,
+      max: 20,
+      message: '长度在 6 到 20 个字符',
+      trigger: 'blur'
+    },
+    {
+      pattern: /^[^<>"'|\\]+$/,
+      message: '不能包含非法字符：< > " \' \\ |',
+      trigger: 'blur'
+    }
+  ],
+  confirmPassword: [
+    { required: true, message: '确认密码不能为空', trigger: 'blur' },
+    {
+      required: true,
+      validator: equalToPassword,
+      trigger: 'blur'
+    }
+  ]
+});
+
+/** 提交按钮 */
+const submit = () => {
+  pwdRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      await updateUserPwd(user.value.oldPassword, user.value.newPassword);
+      modal.msgSuccess('修改成功');
+    }
+  });
+};
+/** 关闭按钮 */
+const close = () => {
+  tab.closePage();
+};
+</script>
+
+<style lang="scss" scoped>
+.profile-form {
+  max-width: 520px;
+}
+
+.profile-form :deep(.el-input__wrapper) {
+  border-radius: 12px;
+}
+
+.profile-form :deep(.el-button) {
+  border-radius: 10px;
+}
+
+.profile-form__actions :deep(.el-form-item__content) {
+  display: flex;
+  gap: 8px;
+}
+</style>
diff --git a/src/views/system/user/profile/thirdParty.vue b/src/views/system/user/profile/thirdParty.vue
new file mode 100644
index 0000000..59637ff
--- /dev/null
+++ b/src/views/system/user/profile/thirdParty.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="profile-auth">
+    <el-table :data="auths" border class="data-table profile-auth-table">
+      <el-table-column label="序号" width="50" type="index" />
+      <el-table-column label="绑定账号平台" width="140" align="center" prop="source" show-overflow-tooltip />
+      <el-table-column label="头像" width="120" align="center" prop="avatar">
+        <template #default="scope">
+          <img :src="scope.row.avatar" style="width: 45px; height: 45px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="系统账号" width="180" align="center" prop="userName" :show-overflow-tooltip="true" />
+      <el-table-column label="绑定时间" width="180" align="center" prop="createTime" />
+      <el-table-column label="操作" width="80" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-tooltip content="解绑" placement="top">
+            <el-button link type="primary" icon="CircleClose" @click="unlockAuth(scope.row)"></el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="provider-section">
+      <div class="provider-heading">
+        <h4 class="provider-desc">可绑定的第三方应用</h4>
+        <p>点击下方平台完成账号绑定。</p>
+      </div>
+      <div class="user-bind">
+        <a class="third-app" href="#" title="使用 微信 账号授权登录" @click="authUrl('wechat')">
+          <div class="third-app__icon">
+            <svg-icon icon-class="wechat" />
+          </div>
+          <span class="app-name">微信</span>
+        </a>
+        <a class="third-app" href="#" title="使用 MaxKey 账号授权登录" @click="authUrl('maxkey')">
+          <div class="third-app__icon">
+            <svg-icon icon-class="maxkey" />
+          </div>
+          <span class="app-name">MaxKey</span>
+        </a>
+        <a class="third-app" href="#" title="使用 TopIam 账号授权登录" @click="authUrl('topiam')">
+          <div class="third-app__icon">
+            <svg-icon icon-class="topiam" />
+          </div>
+          <span class="app-name">TopIam</span>
+        </a>
+        <a class="third-app" href="#" title="使用 Gitee 账号授权登录" @click="authUrl('gitee')">
+          <div class="third-app__icon">
+            <svg-icon icon-class="gitee" />
+          </div>
+          <span class="app-name">Gitee</span>
+        </a>
+        <a class="third-app" href="#" title="使用 GitHub 账号授权登录" @click="authUrl('github')">
+          <div class="third-app__icon">
+            <svg-icon icon-class="github" />
+          </div>
+          <span class="app-name">GitHub</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { authUnlock, authRouterUrl } from '@/api/system/social/auth';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+  auths: propTypes.any.isRequired
+});
+const auths = computed(() => props.auths);
+
+const unlockAuth = (row: any) => {
+  ElMessageBox.confirm('您确定要解除"' + row.source + '"的账号绑定吗？')
+    .then(() => {
+      return authUnlock(row.id);
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        modal.msgSuccess('解绑成功');
+        tab.refreshPage();
+      } else {
+        modal.msgError(res.msg);
+      }
+    })
+    .catch(() => {});
+};
+
+const authUrl = (source: string) => {
+  authRouterUrl(source).then((res: any) => {
+    if (res.code === 200) {
+      window.location.href = res.data;
+    } else {
+      modal.msgError(res.msg);
+    }
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.profile-auth {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.profile-auth-table {
+  width: 100%;
+}
+
+.provider-section {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.provider-heading p {
+  margin: 6px 0 0;
+  color: var(--el-text-color-secondary);
+}
+
+.user-bind .third-app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 84px;
+  padding: 12px 10px;
+  border: 1px solid var(--app-surface-border);
+  border-radius: 12px;
+  background: var(--app-elevated-soft-bg);
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.user-bind {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 108px));
+  gap: 10px;
+  justify-content: start;
+}
+
+.third-app:hover {
+  transform: translateY(-1px);
+  border-color: rgba(53, 109, 255, 0.3);
+  box-shadow: var(--app-shadow-sm);
+}
+
+.third-app__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: rgba(53, 109, 255, 0.08);
+  font-size: 18px;
+}
+
+a {
+  text-decoration: none;
+  cursor: pointer;
+  color: inherit;
+}
+
+.provider-desc {
+  margin: 0;
+  font-size: 16px;
+}
+
+td > img {
+  height: 20px;
+  width: 20px;
+  display: inline-block;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.app-name {
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 1.2;
+  text-align: center;
+  word-break: break-word;
+}
+
+html.dark {
+  .user-bind .third-app {
+    background: rgba(15, 23, 42, 0.64);
+  }
+}
+</style>
diff --git a/src/views/system/user/profile/userAvatar.vue b/src/views/system/user/profile/userAvatar.vue
new file mode 100644
index 0000000..804fca3
--- /dev/null
+++ b/src/views/system/user/profile/userAvatar.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="user-info-head" @click="editCropper()">
+    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
+    <el-dialog v-model="open" :title="title" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+          <vue-cropper
+            v-if="visible"
+            ref="cropper"
+            :img="options.img"
+            :info="true"
+            :auto-crop="options.autoCrop"
+            :auto-crop-width="options.autoCropWidth"
+            :auto-crop-height="options.autoCropHeight"
+            :fixed-box="options.fixedBox"
+            :output-type="options.outputType"
+            @real-time="realTime"
+          />
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+          <div class="avatar-upload-preview">
+            <img :src="options.previews.url" :style="options.previews.img" />
+          </div>
+        </el-col>
+      </el-row>
+      <br />
+      <el-row>
+        <el-col :lg="2" :md="2">
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+            <el-button>
+              选择
+              <el-icon class="el-icon--right">
+                <Upload />
+              </el-icon>
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 2 }" :md="2">
+          <el-button icon="Plus" @click="changeScale(1)"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
+          <el-button icon="Minus" @click="changeScale(-1)"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
+          <el-button icon="RefreshLeft" @click="rotateLeft()"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
+          <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 2, offset: 6 }" :md="2">
+          <el-button type="primary" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import 'vue-cropper/dist/index.css';
+import { UploadRawFile } from 'element-plus';
+import { VueCropper } from 'vue-cropper';
+import { uploadOss } from '@/api/system/oss';
+import { updateUserProfile } from '@/api/system/user';
+import modal from '@/plugins/modal';
+import { useUserStore } from '@/store/modules/user';
+
+interface Options {
+  img: string | any; // 裁剪图片的地址
+  autoCrop: boolean; // 是否默认生成截图框
+  autoCropWidth: number; // 默认生成截图框宽度
+  autoCropHeight: number; // 默认生成截图框高度
+  fixedBox: boolean; // 固定截图框大小 不允许改变
+  fileName: string;
+  previews: any; // 预览数据
+  outputType: string;
+  visible: boolean;
+}
+
+const userStore = useUserStore();
+
+const open = ref(false);
+const visible = ref(false);
+const title = ref('修改头像');
+
+const cropper = ref<any>({});
+//图片裁剪数据
+const options = reactive<Options>({
+  img: userStore.avatar,
+  autoCrop: true,
+  autoCropWidth: 200,
+  autoCropHeight: 200,
+  fixedBox: true,
+  outputType: 'png',
+  fileName: '',
+  previews: {},
+  visible: false
+});
+
+/** 编辑头像 */
+const editCropper = () => {
+  open.value = true;
+};
+/** 打开弹出层结束时的回调 */
+const modalOpened = () => {
+  visible.value = true;
+};
+/** 覆盖默认上传行为 */
+const requestUpload = (): any => {};
+/** 向左旋转 */
+const rotateLeft = () => {
+  cropper.value.rotateLeft();
+};
+/** 向右旋转 */
+const rotateRight = () => {
+  cropper.value.rotateRight();
+};
+/** 图片缩放 */
+const changeScale = (num: number) => {
+  num = num || 1;
+  cropper.value.changeScale(num);
+};
+/** 上传预处理 */
+const beforeUpload = (file: UploadRawFile): any => {
+  if (file.type.indexOf('image/') == -1) {
+    modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。');
+  } else {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      options.img = reader.result;
+      options.fileName = file.name;
+    };
+  }
+};
+/** 上传图片 */
+const uploadImg = async () => {
+  cropper.value.getCropBlob(async (data: any) => {
+    const formData = new FormData();
+    formData.append('file', data, options.fileName || 'avatar.png');
+    const res = await uploadOss(formData);
+    await updateUserProfile({ avatar: res.data.ossId });
+    open.value = false;
+    options.img = res.data.url;
+    userStore.setAvatar(options.img);
+    modal.msgSuccess('修改成功');
+    visible.value = false;
+  });
+};
+/** 实时预览 */
+const realTime = (data: any) => {
+  options.previews = data;
+};
+/** 关闭窗口 */
+const closeDialog = () => {
+  options.img = userStore.avatar;
+  options.visible = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.img-lg {
+  width: 120px;
+  height: 120px;
+}
+
+.user-info-head {
+  position: relative;
+  display: inline-block;
+  width: 120px;
+  height: 120px;
+  cursor: pointer;
+}
+
+.user-info-head :deep(.img-circle) {
+  width: 120px;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 4px solid var(--app-surface-border);
+  box-shadow: var(--app-shadow-sm);
+}
+
+.user-info-head:hover:after {
+  content: '+';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: #eee;
+  background: rgba(0, 0, 0, 0.5);
+  font-size: 24px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  line-height: 110px;
+  border-radius: 50%;
+}
+
+.avatar-upload-preview {
+  position: absolute;
+  top: 50%;
+  transform: translate(50%, -50%);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  box-shadow: var(--app-shadow-md);
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/system/user/profile/userInfo.vue b/src/views/system/user/profile/userInfo.vue
new file mode 100644
index 0000000..ce9760e
--- /dev/null
+++ b/src/views/system/user/profile/userInfo.vue
@@ -0,0 +1,107 @@
+<template>
+  <el-form ref="userRef" :model="userForm" :rules="rules" label-width="80px" class="profile-form">
+    <el-form-item label="用户昵称" prop="nickName">
+      <el-input v-model="userForm.nickName" maxlength="30" />
+    </el-form-item>
+    <el-form-item label="手机号码" prop="phoneNumber">
+      <el-input v-model="userForm.phoneNumber" maxlength="11" />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input v-model="userForm.email" maxlength="50" />
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-radio-group v-model="userForm.gender">
+        <el-radio v-for="dict in sys_user_gender" :key="dict.value" :value="dict.value">
+          {{ dict.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item class="profile-form__actions">
+      <el-button type="primary" @click="submit">保存</el-button>
+      <el-button @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { updateUserProfile } from '@/api/system/user';
+import type { UserProfileForm } from '@/api/system/user/types';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+import { useDict } from '@/utils/dict';
+import { propTypes } from '@/utils/propTypes';
+
+const { sys_user_gender } = toRefs<any>(useDict('sys_user_gender'));
+const props = defineProps({
+  user: propTypes.any.isRequired
+});
+const userForm = computed(() => props.user);
+const userRef = ref<ElFormInstance>();
+const rule: ElFormRules = {
+  nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
+  email: [
+    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
+    {
+      type: 'email',
+      message: '请输入正确的邮箱地址',
+      trigger: ['blur', 'change']
+    }
+  ],
+  phoneNumber: [
+    {
+      required: true,
+      message: '手机号码不能为空',
+      trigger: 'blur'
+    },
+    {
+      pattern: /^1[3456789][0-9]\d{8}$/,
+      message: '请输入正确的手机号码',
+      trigger: 'blur'
+    }
+  ]
+};
+const rules = ref<ElFormRules>(rule);
+
+/** 提交按钮 */
+const submit = () => {
+  userRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      const profile: UserProfileForm = {
+        nickName: props.user.nickName,
+        phoneNumber: props.user.phoneNumber,
+        email: props.user.email,
+        gender: props.user.gender
+      };
+      await updateUserProfile(profile);
+      modal.msgSuccess('修改成功');
+    }
+  });
+};
+/** 关闭按钮 */
+const close = () => {
+  tab.closePage();
+};
+</script>
+
+<style lang="scss" scoped>
+.profile-form {
+  max-width: 520px;
+}
+
+.profile-form :deep(.el-input__wrapper) {
+  border-radius: 12px;
+}
+
+.profile-form :deep(.el-radio-group) {
+  gap: 16px;
+}
+
+.profile-form :deep(.el-button) {
+  border-radius: 10px;
+}
+
+.profile-form__actions :deep(.el-form-item__content) {
+  display: flex;
+  gap: 8px;
+}
+</style>
diff --git a/src/views/system/user/view.vue b/src/views/system/user/view.vue
new file mode 100644
index 0000000..2de9ed3
--- /dev/null
+++ b/src/views/system/user/view.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-drawer
+    v-model="visible"
+    title="用户信息详情"
+    :size="680"
+    append-to-body
+    :close-on-click-modal="true"
+    @closed="info = null"
+  >
+    <el-descriptions v-if="info" v-loading="loading" :column="2" border>
+      <el-descriptions-item label="用户名称">{{ info.nickName }}</el-descriptions-item>
+      <el-descriptions-item label="归属部门">
+        {{ info.deptName || (info.dept && info.dept.deptName) || '-' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="手机号码">{{ info.phoneNumber || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="邮箱">{{ info.email || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="登录账号">{{ info.userName }}</el-descriptions-item>
+      <el-descriptions-item label="用户状态">
+        <el-tag :type="info.status === '0' ? 'success' : 'danger'">
+          {{ selectDictLabel(sys_normal_disable, info.status) }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="岗位">{{ postNames || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="用户性别">
+        {{ selectDictLabel(sys_user_gender, info.gender) || '-' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="角色" :span="2">{{ roleNames || '-' }}</el-descriptions-item>
+    </el-descriptions>
+
+    <el-divider />
+
+    <el-descriptions v-if="info" :column="2" border>
+      <el-descriptions-item label="创建时间">{{ info.createTime || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="更新时间">{{ info.updateTime || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="最后登录IP">{{ info.loginIp || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="最后登录时间">{{ info.loginDate || '-' }}</el-descriptions-item>
+      <el-descriptions-item label="备注" :span="2">{{ info.remark || '-' }}</el-descriptions-item>
+    </el-descriptions>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import type { PostVO } from '@/api/system/post/types';
+import type { RoleVO } from '@/api/system/role/types';
+import type { UserVO } from '@/api/system/user/types';
+import api from '@/api/system/user';
+import { useDict } from '@/utils/dict';
+import { selectDictLabel } from '@/utils/ruoyi';
+
+const { sys_normal_disable, sys_user_gender } = toRefs<any>(useDict('sys_normal_disable', 'sys_user_gender'));
+
+const visible = ref(false);
+const loading = ref(false);
+const info = ref<UserVO | null>(null);
+const postOptions = ref<PostVO[]>([]);
+const roleOptions = ref<RoleVO[]>([]);
+const postIds = ref<string[]>([]);
+const roleIds = ref<string[]>([]);
+
+const postNames = computed(() => {
+  if (!postOptions.value.length || !postIds.value.length) return '';
+  return postOptions.value
+    .filter(p => postIds.value.includes(String(p.postId)))
+    .map(p => p.postName)
+    .join('、');
+});
+
+const roleNames = computed(() => {
+  if (!roleOptions.value.length || !roleIds.value.length) return '';
+  return roleOptions.value
+    .filter(r => roleIds.value.includes(String(r.roleId)))
+    .map(r => r.roleName)
+    .join('、');
+});
+
+async function openDrawer(userId: string | number) {
+  visible.value = true;
+  loading.value = true;
+  try {
+    const { data } = await api.getUser(userId);
+    info.value = data.user;
+    postOptions.value = data.posts || [];
+    roleOptions.value = data.roles || [];
+    postIds.value = (data.postIds || []).map(String);
+    roleIds.value = (data.roleIds || []).map(String);
+  } catch (error) {
+    console.error('获取用户信息失败:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+defineExpose({ openDrawer });
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-descriptions__label) {
+  min-width: 110px;
+}
+</style>
diff --git a/src/views/tool/gen/basicInfoForm.vue b/src/views/tool/gen/basicInfoForm.vue
new file mode 100644
index 0000000..aa6a996
--- /dev/null
+++ b/src/views/tool/gen/basicInfoForm.vue
@@ -0,0 +1,64 @@
+<template>
+  <el-form ref="formRef" :model="infoForm" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item label="表名称" prop="tableName">
+          <el-input v-model="infoForm.tableName" placeholder="请输入仓库名称" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="表描述" prop="tableComment">
+          <el-input v-model="infoForm.tableComment" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="实体类名称" prop="className">
+          <el-input v-model="infoForm.className" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="作者" prop="functionAuthor">
+          <el-input v-model="infoForm.functionAuthor" placeholder="请输入" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="infoForm.remark" type="textarea" :rows="3"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import type { FormInstance } from 'element-plus';
+import { propTypes } from '@/utils/propTypes';
+
+const prop = defineProps({
+  info: propTypes.any.def({})
+});
+
+const infoForm = computed(() => prop.info);
+const formRef = ref<FormInstance>();
+
+// 表单校验
+const rules = ref({
+  tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
+  tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
+  className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
+  functionAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }]
+});
+
+/** Element Plus 推荐：通过 validate() 的 Promise 做校验 */
+async function validate(): Promise<boolean> {
+  if (!formRef.value) return false;
+  try {
+    await formRef.value.validate();
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+defineExpose({ validate });
+</script>
diff --git a/src/views/tool/gen/editTable.vue b/src/views/tool/gen/editTable.vue
new file mode 100644
index 0000000..504c796
--- /dev/null
+++ b/src/views/tool/gen/editTable.vue
@@ -0,0 +1,233 @@
+<template>
+  <el-card>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基本信息" name="basic">
+        <basic-info-form ref="basicInfo" :info="info" />
+      </el-tab-pane>
+      <el-tab-pane label="字段信息" name="columnInfo">
+        <el-table ref="dragTable" border :data="columns" row-key="columnId" :max-height="tableHeight">
+          <el-table-column label="序号" type="index" min-width="5%" />
+          <el-table-column label="字段列名" prop="columnName" min-width="10%" :show-overflow-tooltip="true" />
+          <el-table-column label="字段描述" min-width="10%">
+            <template #default="scope">
+              <el-input v-model="scope.row.columnComment"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="物理类型" prop="columnType" min-width="10%" :show-overflow-tooltip="true" />
+          <el-table-column label="Java类型" min-width="11%">
+            <template #default="scope">
+              <el-select v-model="scope.row.javaType">
+                <el-option label="Long" value="Long" />
+                <el-option label="String" value="String" />
+                <el-option label="Integer" value="Integer" />
+                <el-option label="Double" value="Double" />
+                <el-option label="BigDecimal" value="BigDecimal" />
+                <el-option label="LocalDateTime" value="LocalDateTime" />
+                <el-option label="Boolean" value="Boolean" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="java属性" min-width="10%">
+            <template #default="scope">
+              <el-input v-model="scope.row.javaField"></el-input>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="插入" min-width="5%">
+            <template #default="scope">
+              <el-checkbox v-model="scope.row.isInsert" true-value="1" false-value="0"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="编辑" min-width="5%">
+            <template #default="scope">
+              <el-checkbox v-model="scope.row.isEdit" true-value="1" false-value="0"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="列表" min-width="5%">
+            <template #default="scope">
+              <el-checkbox v-model="scope.row.isList" true-value="1" false-value="0"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="查询" min-width="5%">
+            <template #default="scope">
+              <el-checkbox v-model="scope.row.isQuery" true-value="1" false-value="0"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="查询方式" min-width="10%">
+            <template #default="scope">
+              <el-select v-model="scope.row.queryType">
+                <el-option label="=" value="EQ" />
+                <el-option label="!=" value="NE" />
+                <el-option label=">" value="GT" />
+                <el-option label=">=" value="GE" />
+                <el-option label="<" value="LT" />
+                <el-option label="<=" value="LE" />
+                <el-option label="LIKE" value="LIKE" />
+                <el-option label="BETWEEN" value="BETWEEN" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="必填" min-width="5%">
+            <template #default="scope">
+              <el-checkbox v-model="scope.row.isRequired" true-value="1" false-value="0"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="显示类型" min-width="12%">
+            <template #default="scope">
+              <el-select v-model="scope.row.htmlType" @change="handleHtmlTypeChange(scope.row)">
+                <el-option label="文本框" value="input" />
+                <el-option label="数字输入" value="inputNumber" />
+                <el-option label="文本域" value="textarea" />
+                <el-option label="下拉框" value="select" />
+                <el-option label="单选框" value="radio" />
+                <el-option label="复选框" value="checkbox" />
+                <el-option label="开关" value="switch" />
+                <el-option label="日期控件" value="datetime" />
+                <el-option label="图片上传" value="imageUpload" />
+                <el-option label="文件上传" value="fileUpload" />
+                <el-option label="富文本控件" value="editor" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="字典类型" min-width="12%">
+            <template #default="scope">
+              <el-select
+                v-model="scope.row.dictType"
+                clearable
+                filterable
+                placeholder="请选择"
+                value-on-clear=""
+                :disabled="!supportsDictHtmlType(scope.row.htmlType)"
+              >
+                <el-option
+                  v-for="dict in dictOptions"
+                  :key="dict.dictType"
+                  :label="dict.dictName"
+                  :value="dict.dictType"
+                >
+                  <span style="float: left">{{ dict.dictName }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
+                </el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="生成信息" name="genInfo">
+        <gen-info-form ref="genInfo" :info="info" :columns="columns" />
+      </el-tab-pane>
+    </el-tabs>
+    <el-form label-width="100px">
+      <div style="text-align: center; margin-left: -100px; margin-top: 10px">
+        <el-button type="primary" @click="submitForm()">提交</el-button>
+        <el-button @click="close()">返回</el-button>
+      </div>
+    </el-form>
+  </el-card>
+</template>
+
+<script setup name="GenEdit" lang="ts">
+import { useRoute } from 'vue-router';
+import { optionselect as getDictOptionselect } from '@/api/system/dict/type';
+import { DictTypeVO } from '@/api/system/dict/type/types';
+import { getGenTable, updateGenTable } from '@/api/tool/gen';
+import { DbColumnVO, DbTableVO } from '@/api/tool/gen/types';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+import BasicInfoForm from './basicInfoForm.vue';
+import GenInfoForm from './genInfoForm.vue';
+
+const route = useRoute();
+const activeName = ref('columnInfo');
+const tableHeight = ref(document.documentElement.scrollHeight - 245 + 'px');
+const columns = ref<DbColumnVO[]>([]);
+const dictOptions = ref<DictTypeVO[]>([]);
+const info = ref<Partial<DbTableVO>>({});
+const DICT_HTML_TYPES = ['select', 'radio', 'checkbox', 'switch'];
+
+const basicInfo = ref<InstanceType<typeof BasicInfoForm>>();
+const genInfo = ref<InstanceType<typeof GenInfoForm>>();
+
+const supportsDictHtmlType = (htmlType?: string) => DICT_HTML_TYPES.includes(htmlType ?? '');
+
+const normalizeColumnDictType = (column: Partial<DbColumnVO>) => {
+  if (!supportsDictHtmlType(String(column.htmlType ?? ''))) {
+    column.dictType = '';
+  }
+};
+
+const handleHtmlTypeChange = (column: Partial<DbColumnVO>) => {
+  normalizeColumnDictType(column);
+};
+
+/** 提交按钮 */
+const submitForm = async () => {
+  const basicOk = (await basicInfo.value?.validate()) ?? false;
+  const genOk = (await genInfo.value?.validate()) ?? false;
+  if (!basicOk || !genOk) {
+    modal.msgError('表单校验未通过，请重新检查提交内容');
+    return;
+  }
+  columns.value.forEach(normalizeColumnDictType);
+  const genTable: Record<string, unknown> = { ...info.value };
+  genTable.columns = columns.value;
+  genTable.params = {
+    treeCode: info.value?.treeCode,
+    treeName: info.value.treeName,
+    treeParentCode: info.value.treeParentCode,
+    parentMenuId: info.value.parentMenuId,
+    enableExport: info.value.enableExport,
+    enableStatus: info.value.enableStatus,
+    statusField: info.value.statusField,
+    enableUnique: info.value.enableUnique,
+    uniqueFields: info.value.uniqueFields,
+    enableSort: info.value.enableSort,
+    sortField: info.value.sortField,
+    treeRootValue: info.value.treeRootValue,
+    treeAncestors: info.value.treeAncestorsField,
+    treeOrderField: info.value.treeOrderField
+  };
+  const response = await updateGenTable(genTable as any);
+  modal.msgSuccess(response.msg ?? '');
+  if (response.code === 200) {
+    close();
+  }
+};
+
+const close = () => {
+  tab.closeOpenPage({
+    path: '/tool/gen',
+    query: { t: Date.now().toString(), pageNum: route.query.pageNum }
+  });
+};
+
+onMounted(async () => {
+  const tableId = route.params?.tableId as string | undefined;
+  if (!tableId) return;
+  const res = await getGenTable(tableId);
+  const detail = res.data;
+  if (!detail) return;
+  columns.value = (detail.rows ?? []).map(column => {
+    const item = { ...column };
+    normalizeColumnDictType(item);
+    return item;
+  });
+  info.value = {
+    enableExport: detail.info.enableExport ?? true,
+    enableStatus: detail.info.enableStatus ?? false,
+    statusField: detail.info.statusField ?? '',
+    enableUnique: detail.info.enableUnique ?? false,
+    uniqueFields: detail.info.uniqueFields ?? [],
+    enableSort: detail.info.enableSort ?? false,
+    sortField: detail.info.sortField ?? '',
+    frontendType: detail.info.frontendType ?? 'vue',
+    treeRootValue: detail.info.treeRootValue ?? '0',
+    treeAncestorsField: detail.info.treeAncestorsField ?? '',
+    treeOrderField: detail.info.treeOrderField ?? '',
+    ...detail.info
+  };
+  info.value.frontendType ||= 'vue';
+  const response = await getDictOptionselect();
+  dictOptions.value = response.data;
+});
+</script>
diff --git a/src/views/tool/gen/genInfoForm.vue b/src/views/tool/gen/genInfoForm.vue
new file mode 100644
index 0000000..cc2f3fb
--- /dev/null
+++ b/src/views/tool/gen/genInfoForm.vue
@@ -0,0 +1,485 @@
+<template>
+  <el-form ref="formRef" :model="infoForm" :rules="rules" label-width="150px">
+    <el-row>
+      <el-col :span="12">
+        <el-form-item prop="tplCategory">
+          <template #label>生成模板</template>
+          <el-select v-model="infoForm.tplCategory">
+            <el-option label="单表（增删改查）" value="crud" />
+            <el-option label="树表（增删改查）" value="tree" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="packageName">
+          <template #label>
+            生成包路径
+            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="infoForm.packageName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="moduleName">
+          <template #label>
+            生成模块名
+            <el-tooltip content="可理解为子系统名，例如 system" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="infoForm.moduleName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="businessName">
+          <template #label>
+            生成业务名
+            <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="infoForm.businessName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="functionName">
+          <template #label>
+            生成功能名
+            <el-tooltip content="用作类描述，例如 用户" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-input v-model="infoForm.functionName" />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item>
+          <template #label>
+            上级菜单
+            <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-tree-select
+            v-model="infoForm.parentMenuId"
+            :data="menuOptions"
+            :props="{ value: 'menuId', label: 'menuName', children: 'children' } as any"
+            value-key="menuId"
+            node-key="menuId"
+            placeholder="选择上级菜单"
+            check-strictly
+            filterable
+            clearable
+            highlight-current
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
+        <el-form-item prop="frontendType">
+          <template #label>
+            前端模板
+            <el-tooltip content="对应后端 resources/vm 下的模板目录，例如 vue、react" placement="top">
+              <el-icon><question-filled /></el-icon>
+            </el-tooltip>
+          </template>
+          <el-radio-group v-model="infoForm.frontendType">
+            <el-radio v-for="item in frontendTypeOptions" :key="item.value" :value="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+
+    </el-row>
+
+    <h4 class="form-header">增强选项</h4>
+    <el-row class="enhance-options" :gutter="20">
+      <el-col :span="24">
+        <el-row :gutter="20" class="enhance-option-row">
+          <el-col :span="8">
+            <el-form-item prop="enableExport" class="enhance-toggle-item">
+              <template #label>
+                导出能力
+                <el-tooltip content="关闭后将不生成 export 接口与前端导出按钮" placement="top">
+                  <el-icon><question-filled /></el-icon>
+                </el-tooltip>
+              </template>
+              <el-switch v-model="infoForm.enableExport" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-col>
+
+      <el-col :span="24">
+        <el-row :gutter="20" class="enhance-option-row">
+          <el-col :span="8">
+            <el-form-item prop="enableStatus" class="enhance-toggle-item">
+              <template #label>
+                状态切换
+                <el-tooltip content="开启后生成 changeStatus 接口与列表状态开关列" placement="top">
+                  <el-icon><question-filled /></el-icon>
+                </el-tooltip>
+              </template>
+              <el-switch v-model="infoForm.enableStatus" />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="infoForm.enableStatus" :span="16">
+            <el-form-item prop="statusField">
+              <el-select v-model="infoForm.statusField" placeholder="请选择状态字段">
+                <el-option
+                  v-for="column in availableColumns"
+                  :key="column.columnName"
+                  :label="column.columnName + '：' + column.columnComment"
+                  :value="column.columnName"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-col>
+
+      <el-col :span="24">
+        <el-row :gutter="20" class="enhance-option-row">
+          <el-col :span="8">
+            <el-form-item prop="enableUnique" class="enhance-toggle-item">
+              <template #label>
+                组合唯一校验
+                <el-tooltip content="开启后按选中的字段生成组合唯一校验，新增和修改都会校验" placement="top">
+                  <el-icon><question-filled /></el-icon>
+                </el-tooltip>
+              </template>
+              <el-switch v-model="infoForm.enableUnique" />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="infoForm.enableUnique" :span="16">
+            <el-form-item prop="uniqueFields">
+              <el-select v-model="infoForm.uniqueFields" multiple clearable filterable placeholder="请选择唯一字段">
+                <el-option
+                  v-for="column in availableColumns"
+                  :key="column.columnName"
+                  :label="column.columnName + '：' + column.columnComment"
+                  :value="column.columnName"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-col>
+
+      <el-col :span="24">
+        <el-row :gutter="20" class="enhance-option-row">
+          <el-col :span="8">
+            <el-form-item prop="enableSort" class="enhance-toggle-item">
+              <template #label>
+                排序调整
+                <el-tooltip content="开启后生成 updateSort 接口，并在列表中以输入框形式快速调整排序字段" placement="top">
+                  <el-icon><question-filled /></el-icon>
+                </el-tooltip>
+              </template>
+              <el-switch v-model="infoForm.enableSort" />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="infoForm.enableSort" :span="16">
+            <el-form-item prop="sortField">
+              <el-select v-model="infoForm.sortField" placeholder="请选择排序字段">
+                <el-option
+                  v-for="column in sortableColumns"
+                  :key="column.columnName"
+                  :label="column.columnName + '：' + column.columnComment"
+                  :value="column.columnName"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+
+    <template v-if="info.tplCategory == 'tree'">
+      <h4 class="form-header">其他信息</h4>
+      <el-row v-show="info.tplCategory == 'tree'">
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树编码字段
+              <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="infoForm.treeCode" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in availableColumns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树父编码字段
+              <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="infoForm.treeParentCode" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in availableColumns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item>
+            <template #label>
+              树名称字段
+              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="infoForm.treeName" placeholder="请选择">
+              <el-option
+                v-for="(column, index) in availableColumns"
+                :key="index"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item prop="treeRootValue">
+            <template #label>
+              根节点值
+              <el-tooltip content="默认是 0，用于根节点 parentId 的默认值" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-input v-model="infoForm.treeRootValue" placeholder="请输入根节点值" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item prop="treeAncestorsField">
+            <template #label>
+              祖级字段
+              <el-tooltip content="选择 ancestors 一类字段后，生成器会自动维护祖级链，避免依赖数据库递归语法" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="infoForm.treeAncestorsField" clearable placeholder="请选择祖级字段">
+              <el-option
+                v-for="column in availableColumns"
+                :key="column.columnName"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item prop="treeOrderField">
+            <template #label>
+              树排序字段
+              <el-tooltip content="树列表默认按祖级、父节点、树排序字段、主键升序排列" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+            </template>
+            <el-select v-model="infoForm.treeOrderField" clearable placeholder="请选择树排序字段">
+              <el-option
+                v-for="column in sortableColumns"
+                :key="column.columnName"
+                :label="column.columnName + '：' + column.columnComment"
+                :value="column.columnName"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </template>
+
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import type { FormInstance } from 'element-plus';
+import { listMenu } from '@/api/system/menu';
+import { propTypes } from '@/utils/propTypes';
+import { handleTree } from '@/utils/ruoyi';
+
+interface MenuOptionsType {
+  menuId: number | string;
+  menuName: string;
+  children?: MenuOptionsType[];
+}
+
+const menuOptions = ref<Array<MenuOptionsType>>([]);
+const formRef = ref<FormInstance>();
+const frontendTypeOptions = [
+  { label: 'Vue', value: 'vue' },
+  { label: 'React', value: 'react' }
+];
+
+const props = defineProps({
+  info: propTypes.any.isRequired,
+  columns: propTypes.any.isRequired
+});
+
+const infoForm = computed(() => props.info);
+const availableColumns = computed(() => props.columns ?? []);
+const sortableColumns = computed(() =>
+  availableColumns.value.filter((column: any) =>
+    ['Integer', 'Long', 'Double', 'BigDecimal', 'LocalDateTime'].includes(column.javaType)
+  )
+);
+
+// 表单校验
+const rules = ref({
+  tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }],
+  frontendType: [
+    { required: true, message: '请选择前端模板', trigger: 'change' },
+    { pattern: /^[A-Za-z0-9_-]+$/, message: '仅支持字母、数字、下划线和中划线', trigger: 'change' }
+  ],
+  packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }],
+  moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
+  businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
+  functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }],
+  statusField: [
+    {
+      validator: (_rule: any, value: string, callback: (error?: Error) => void) => {
+        if (infoForm.value.enableStatus && !value) {
+          callback(new Error('请选择状态字段'));
+          return;
+        }
+        callback();
+      },
+      trigger: 'change'
+    }
+  ],
+  uniqueFields: [
+    {
+      validator: (_rule: any, value: string[], callback: (error?: Error) => void) => {
+        if (infoForm.value.enableUnique && (!value || value.length === 0)) {
+          callback(new Error('请选择唯一字段'));
+          return;
+        }
+        callback();
+      },
+      trigger: 'change'
+    }
+  ],
+  sortField: [
+    {
+      validator: (_rule: any, value: string, callback: (error?: Error) => void) => {
+        if (infoForm.value.enableSort && !value) {
+          callback(new Error('请选择排序字段'));
+          return;
+        }
+        callback();
+      },
+      trigger: 'change'
+    }
+  ],
+  treeRootValue: [
+    {
+      validator: (_rule: any, value: string, callback: (error?: Error) => void) => {
+        if (infoForm.value.tplCategory === 'tree' && !value) {
+          callback(new Error('请输入根节点值'));
+          return;
+        }
+        callback();
+      },
+      trigger: 'blur'
+    }
+  ]
+});
+/** 查询菜单下拉树结构 */
+const getMenuTreeselect = async () => {
+  const res = await listMenu();
+  const data = handleTree<MenuOptionsType>(res.data, 'menuId');
+
+  if (data) {
+    menuOptions.value = data;
+  }
+};
+
+watch(
+  () => infoForm.value.enableStatus,
+  val => {
+    if (!val) {
+      infoForm.value.statusField = '';
+    }
+  }
+);
+
+watch(
+  () => infoForm.value.enableUnique,
+  val => {
+    if (!val) {
+      infoForm.value.uniqueFields = [];
+    }
+  }
+);
+
+watch(
+  () => infoForm.value.enableSort,
+  val => {
+    if (!val) {
+      infoForm.value.sortField = '';
+    }
+  }
+);
+
+async function validate(): Promise<boolean> {
+  if (!formRef.value) return false;
+  try {
+    await formRef.value.validate();
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+defineExpose({ validate });
+
+onMounted(() => {
+  getMenuTreeselect();
+});
+</script>
+
+<style scoped>
+.enhance-options {
+  margin-top: 4px;
+}
+
+.enhance-option-row {
+  min-height: 52px;
+}
+
+.enhance-toggle-item :deep(.el-form-item__content) {
+  justify-content: flex-start;
+}
+
+@media (max-width: 992px) {
+  .enhance-options :deep(.el-col) {
+    max-width: 100%;
+    flex: 0 0 100%;
+  }
+
+  .enhance-option-row {
+    min-height: auto;
+  }
+}
+</style>
diff --git a/src/views/tool/gen/importTable.vue b/src/views/tool/gen/importTable.vue
new file mode 100644
index 0000000..d900bfc
--- /dev/null
+++ b/src/views/tool/gen/importTable.vue
@@ -0,0 +1,137 @@
+<template>
+  <el-dialog v-model="visible" title="导入表" width="1100px" top="5vh" append-to-body>
+    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form-item label="数据源" prop="dataName">
+        <el-select v-model="queryParams.dataName" filterable placeholder="请选择/输入数据源名称">
+          <el-option v-for="item in dataNameList" :key="item" :label="item" :value="item"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="表名称" prop="tableName">
+        <el-input v-model="queryParams.tableName" placeholder="请输入表名称" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input v-model="queryParams.tableComment" placeholder="请输入表描述" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-table
+        ref="tableRef"
+        border
+        :data="dbTableList"
+        height="260px"
+        @row-click="clickRow"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间"></el-table-column>
+        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </el-row>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleImportTable">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { listDbTable, importTable, getDataNames } from '@/api/tool/gen';
+import { DbTableQuery, DbTableVO } from '@/api/tool/gen/types';
+import modal from '@/plugins/modal';
+
+const total = ref(0);
+const visible = ref(false);
+const tables = ref<Array<string>>([]);
+const dbTableList = ref<Array<DbTableVO>>([]);
+
+const tableRef = ref<ElTableInstance>();
+const queryFormRef = ref<ElFormInstance>();
+
+const queryParams = reactive<DbTableQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  dataName: '',
+  tableName: '',
+  tableComment: ''
+});
+const dataNameList = ref<Array<string>>([]);
+
+const emit = defineEmits(['ok']);
+
+/** 查询参数列表 */
+const show = (dataName: string) => {
+  getDataNames().then(res => {
+    if (res.code == 200) {
+      dataNameList.value = res.data;
+      if (dataName) {
+        queryParams.dataName = dataName;
+      } else {
+        queryParams.dataName = dataNameList.value[0];
+      }
+      getList();
+      visible.value = true;
+    }
+  });
+};
+/** 单击选择行 */
+const clickRow = (row: DbTableVO) => {
+  // ele bug
+  tableRef.value?.toggleRowSelection(row, false);
+};
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: DbTableVO[]) => {
+  tables.value = selection.map(item => item.tableName);
+};
+/** 查询表数据 */
+const getList = async () => {
+  const res = await listDbTable(queryParams);
+  dbTableList.value = res.data?.rows;
+  total.value = res.data?.total;
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+/** 导入按钮操作 */
+const handleImportTable = async () => {
+  const tableNames = tables.value.join(',');
+  if (tableNames == '') {
+    modal.msgError('请选择要导入的表');
+    return;
+  }
+  const res = await importTable({
+    tables: tableNames,
+    dataName: queryParams.dataName
+  });
+  modal.msgSuccess(res.msg ?? '');
+  if (res.code === 200) {
+    visible.value = false;
+    emit('ok');
+  }
+};
+
+defineExpose({
+  show
+});
+</script>
diff --git a/src/views/tool/gen/index.vue b/src/views/tool/gen/index.vue
new file mode 100644
index 0000000..54ea1e0
--- /dev/null
+++ b/src/views/tool/gen/index.vue
@@ -0,0 +1,354 @@
+<template>
+  <div class="p-2 app-container tool-gen-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div>
+              <span class="panel-kicker">Search Filters</span>
+              <h3>筛选条件</h3>
+            </div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="数据源" prop="dataName">
+            <el-select v-model="queryParams.dataName" filterable clearable placeholder="请选择/输入数据源名称">
+              <el-option key="" label="全部" value="" />
+              <el-option v-for="item in dataNameList" :key="item" :label="item" :value="item"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="表名称" prop="tableName">
+            <el-input v-model="queryParams.tableName" placeholder="请输入表名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="表描述" prop="tableComment">
+            <el-input
+              v-model="queryParams.tableComment"
+              placeholder="请输入表描述"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="创建时间" style="width: 308px">
+            <el-date-picker
+              v-model="dateRange"
+              value-format="YYYY-MM-DD"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <span class="panel-kicker">Code Generator</span>
+            <h3>数据表列表</h3>
+            <p>共 {{ total }} 条记录，支持导入表结构、同步数据库和代码预览生成。</p>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['tool:gen:code']" type="primary" plain icon="Download" @click="handleGenTable()">
+              生成
+            </el-button>
+            <el-button v-hasPermi="['tool:gen:import']" type="info" plain icon="Upload" @click="openImportTable">
+              导入
+            </el-button>
+            <el-button
+              v-hasPermi="['tool:gen:edit']"
+              type="success"
+              plain
+              icon="Edit"
+              :disabled="single"
+              @click="handleEditTable()"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-hasPermi="['tool:gen:remove']"
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete()"
+            >
+              删除
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        border
+        class="data-table"
+        :data="tableList"
+        @selection-change="handleTableSelectionChange"
+      >
+        <el-table-column type="selection" align="center" width="55"></el-table-column>
+        <el-table-column label="序号" type="index" width="50" align="center">
+          <template #default="scope">
+            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="数据源" align="center" prop="dataName" :show-overflow-tooltip="true" />
+        <el-table-column label="表名称" align="center" prop="tableName" :show-overflow-tooltip="true" />
+        <el-table-column label="表描述" align="center" prop="tableComment" :show-overflow-tooltip="true" />
+        <el-table-column label="实体" align="center" prop="className" :show-overflow-tooltip="true" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
+        <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
+        <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="预览" placement="top">
+              <el-button
+                v-hasPermi="['tool:gen:preview']"
+                link
+                type="primary"
+                icon="View"
+                @click="handlePreview(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="编辑" placement="top">
+              <el-button
+                v-hasPermi="['tool:gen:edit']"
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleEditTable(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                v-hasPermi="['tool:gen:remove']"
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="同步" placement="top">
+              <el-button
+                v-hasPermi="['tool:gen:edit']"
+                link
+                type="primary"
+                icon="Refresh"
+                @click="handleSynchDb(scope.row)"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="生成代码" placement="top">
+              <el-button
+                v-hasPermi="['tool:gen:code']"
+                link
+                type="primary"
+                icon="Download"
+                @click="handleGenTable(scope.row)"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </el-card>
+
+    <!-- 预览界面 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="80%" top="5vh" append-to-body class="scrollbar">
+      <el-tabs v-model="preview.activeName">
+        <el-tab-pane
+          v-for="(value, key) in preview.data"
+          :key="value"
+          :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.ftl'))"
+          :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.ftl'))"
+        >
+          <el-link
+            v-copyText="value"
+            v-copyText:callback="copyTextSuccess"
+            underline="never"
+            icon="DocumentCopy"
+            style="float: right"
+          >
+            &nbsp;复制
+          </el-link>
+          <highlightjs :code="value" />
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+    <import-table ref="importRef" @ok="handleQuery" />
+  </div>
+</template>
+
+<script setup name="Gen" lang="ts">
+import { useRoute } from 'vue-router';
+import { delTable, getDataNames, listTable, previewTable, synchDb } from '@/api/tool/gen';
+import { TableQuery, TableVO } from '@/api/tool/gen/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import download from '@/plugins/download';
+import modal from '@/plugins/modal';
+import router from '@/router';
+import ImportTable from './importTable.vue';
+
+const route = useRoute();
+
+const tableList = ref<TableVO[]>([]);
+const { loading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const total = ref(0);
+const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
+const uniqueId = ref('');
+const dataNameList = ref<Array<string>>([]);
+
+const queryFormRef = ref<ElFormInstance>();
+const importRef = ref<InstanceType<typeof ImportTable>>();
+const selectedRows = ref<TableVO[]>([]);
+
+const queryParams = ref<TableQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  tableName: '',
+  tableComment: '',
+  dataName: ''
+});
+
+const preview = ref<{
+  data: Record<string, string>;
+  activeName: string;
+}>({
+  data: {},
+  activeName: 'domain.java'
+});
+const {
+  ids,
+  single,
+  multiple,
+  handleSelectionChange: updateSelection
+} = useTableSelection<TableVO>(item => item.tableId);
+const { dialog, openDialog: openPreviewDialog } = useDialogState('代码预览');
+
+const handleTableSelectionChange = (selection: TableVO[]) => {
+  selectedRows.value = selection;
+  updateSelection(selection);
+};
+
+/** 查询多数据源名称 */
+const getDataNameList = async () => {
+  const res = await getDataNames();
+  dataNameList.value = res.data;
+};
+
+/** 查询表集合 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listTable(applyDateRange(queryParams.value));
+    tableList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 生成代码操作 */
+const handleGenTable = async (row?: Partial<TableVO>) => {
+  const currentRows = row ? [row] : selectedRows.value;
+  if (!currentRows.length) {
+    modal.msgError('请选择要生成的数据');
+    return;
+  }
+
+  const zipIds = currentRows.map(item => item.tableId).join(',');
+  download.zip('/tool/gen/batchGenCode?tableIdStr=' + zipIds, 'ruoyi.zip');
+};
+/** 同步数据库操作 */
+const handleSynchDb = async (row: Partial<TableVO>) => {
+  const tableId = row.tableId;
+  await modal.confirm('确认要强制同步"' + row.tableName + '"表结构吗？');
+  await synchDb(tableId);
+  modal.msgSuccess('同步成功');
+};
+/** 打开导入表弹窗 */
+const openImportTable = () => {
+  importRef.value?.show(queryParams.value.dataName);
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  resetExtras: () => {
+    resetDateRange();
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+/** 预览按钮 */
+const handlePreview = async (row: Partial<TableVO>) => {
+  const res = await previewTable(row.tableId);
+  preview.value.data = res.data;
+  openPreviewDialog();
+  preview.value.activeName = 'domain.java';
+};
+/** 复制代码成功 */
+const copyTextSuccess = () => {
+  modal.msgSuccess('复制成功');
+};
+/** 修改按钮操作 */
+const handleEditTable = (row?: Partial<TableVO>) => {
+  const tableId = row?.tableId || ids.value[0];
+  router.push({
+    path: '/tool/gen-edit/index/' + tableId,
+    query: { pageNum: queryParams.value.pageNum }
+  });
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<TableVO>) => {
+  const tableIds = row?.tableId || ids.value;
+  await modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？');
+  await delTable(tableIds);
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+onMounted(() => {
+  const time = route.query.t;
+  if (time != null && time != uniqueId.value) {
+    uniqueId.value = time as string;
+    queryParams.value.pageNum = Number(route.query.pageNum);
+    resetDateRange();
+    queryFormRef.value?.resetFields();
+  }
+  getList();
+  getDataNameList();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.table-crud-page;
+
+.el-tab-pane {
+  background-color: #282c34;
+  .el-link {
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/views/workflow/category/index.vue b/src/views/workflow/category/index.vue
new file mode 100644
index 0000000..3a870f5
--- /dev/null
+++ b/src/views/workflow/category/index.vue
@@ -0,0 +1,279 @@
+<template>
+  <div class="p-2 app-container workflow-category-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="分类名称" prop="categoryName">
+            <el-input
+              v-model="queryParams.categoryName"
+              placeholder="请输入分类名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>流程分类</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['workflow:category:add']">
+              新增
+            </el-button>
+            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
+            <right-toolbar v-model:showSearch="showSearch" :search="false" @queryTable="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+      <el-table
+        ref="categoryTableRef"
+        v-loading="loading"
+        class="data-table"
+        :data="categoryList"
+        row-key="categoryId"
+        border
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column label="分类名称" prop="categoryName" width="260" />
+        <el-table-column label="显示顺序" align="center" prop="orderNum" width="200" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
+        <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['workflow:category:edit']"
+              />
+            </el-tooltip>
+            <el-tooltip content="新增" placement="top">
+              <el-button
+                link
+                type="primary"
+                icon="Plus"
+                @click="handleAdd(scope.row)"
+                v-hasPermi="['workflow:category:add']"
+              />
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['workflow:category:remove']"
+              />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="上级分类" prop="parentId">
+          <el-tree-select
+            v-model="form.parentId"
+            :data="categoryOptions"
+            :props="{ value: 'categoryId', label: 'categoryName', children: 'children' } as any"
+            value-key="categoryId"
+            placeholder="请选择上级分类"
+            check-strictly
+          />
+        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="分类名称" prop="categoryName">
+              <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="排序" prop="orderNum">
+              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Category" lang="ts">
+import { listCategory, getCategory, delCategory, addCategory, updateCategory } from '@/api/workflow/category';
+import { CategoryVO, CategoryQuery, CategoryForm } from '@/api/workflow/category/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTreeTableExpand } from '@/hooks/tree/useTreeTableExpand';
+import modal from '@/plugins/modal';
+import { handleTree } from '@/utils/ruoyi';
+
+type CategoryOption = {
+  categoryId: number;
+  categoryName: string;
+  children?: CategoryOption[];
+};
+
+const categoryList = ref<CategoryVO[]>([]);
+const categoryOptions = ref<CategoryOption[]>([]);
+const buttonLoading = ref(false);
+const { showSearch } = useSearchToggle();
+const { loading, setLoading, withLoading } = useLoading();
+
+const queryFormRef = ref<ElFormInstance>();
+const categoryFormRef = ref<ElFormInstance>();
+const categoryTableRef = ref<ElTableInstance>();
+const { isExpandAll, handleToggleExpandAll } = useTreeTableExpand<CategoryVO>({
+  tableRef: categoryTableRef,
+  data: categoryList
+});
+
+const initFormData: CategoryForm = {
+  categoryId: undefined,
+  categoryName: '',
+  parentId: undefined,
+  orderNum: 0
+};
+
+const data = reactive<PageData<CategoryForm, CategoryQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    categoryName: undefined
+  },
+  rules: {
+    categoryId: [{ required: true, message: '流程分类ID不能为空', trigger: 'blur' }],
+    parentId: [{ required: true, message: '请选择上级分类', trigger: 'change' }],
+    categoryName: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const {
+  dialog,
+  resetForm: reset,
+  openDialog,
+  showDialog,
+  closeDialog
+} = useFormDialog({
+  form,
+  formRef: categoryFormRef,
+  initialFormData: initFormData
+});
+
+/** 查询流程分类列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listCategory(queryParams.value);
+    const data = handleTree<CategoryVO>(res.data, 'categoryId', 'parentId');
+    if (data) {
+      categoryList.value = data;
+    }
+  });
+};
+
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await listCategory();
+  categoryOptions.value = [];
+  // 处理树形数据
+  const data = handleTree<CategoryOption>(res.data, 'categoryId', 'parentId');
+  if (data) {
+    categoryOptions.value = data; // 将处理后的树形数据赋值
+  }
+};
+
+// 取消按钮
+const cancel = () => {
+  reset();
+  closeDialog();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 新增按钮操作 */
+const handleAdd = (row?: Partial<CategoryVO>) => {
+  openDialog('添加流程分类');
+  getTreeselect();
+  if (row?.categoryId) {
+    form.value.parentId = row.categoryId;
+  } else {
+    form.value.parentId = undefined;
+  }
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row: Partial<CategoryVO>) => {
+  reset();
+  await getTreeselect();
+  if (row != null) {
+    form.value.parentId = row.parentId;
+  }
+  const res = await getCategory(row.categoryId);
+  Object.assign(form.value, res.data);
+  showDialog('修改流程分类');
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  categoryFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.categoryId) {
+        await updateCategory(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addCategory(form.value).finally(() => (buttonLoading.value = false));
+      }
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row: Partial<CategoryVO>) => {
+  await modal.confirm('是否确认删除"' + row.categoryName + '"的分类？');
+  setLoading(true);
+  await delCategory(row.categoryId).finally(() => setLoading(false));
+  await getList();
+  modal.msgSuccess('删除成功');
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
diff --git a/src/views/workflow/leave/index.vue b/src/views/workflow/leave/index.vue
new file mode 100644
index 0000000..d860dd6
--- /dev/null
+++ b/src/views/workflow/leave/index.vue
@@ -0,0 +1,304 @@
+<template>
+  <div class="p-2 app-container workflow-leave-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="请假天数" prop="startLeaveDays">
+            <el-input
+              v-model="queryParams.startLeaveDays"
+              placeholder="请输入请假天数"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item prop="endLeaveDays">至</el-form-item>
+          <el-form-item prop="endLeaveDays">
+            <el-input
+              v-model="queryParams.endLeaveDays"
+              placeholder="请输入请假天数"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>请假列表</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button v-hasPermi="['workflow:leave:add']" type="primary" plain icon="Plus" @click="handleAdd">
+              新增
+            </el-button>
+            <el-button
+              v-hasPermi="['workflow:leave:export']"
+              type="warning"
+              plain
+              icon="Download"
+              @click="handleExport"
+            >
+              导出
+            </el-button>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        border
+        class="data-table"
+        :data="leaveList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column v-if="false" label="主键" align="center" prop="id" />
+        <el-table-column label="请假类型" align="center">
+          <template #default="scope">
+            <el-tag>{{ options.find(e => e.value === scope.row.leaveType)?.label }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="开始时间" align="center" prop="startDate">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="结束时间" align="center" prop="endDate">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="请假天数" align="center" prop="leaveDays" />
+        <el-table-column label="请假原因" align="center" prop="remark" />
+        <el-table-column align="center" label="流程状态" min-width="70">
+          <template #default="scope">
+            <dict-tag :options="wf_business_status" :value="scope.row.status"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="162">
+          <template #default="scope">
+            <el-row :gutter="10" class="mb8">
+              <el-col
+                :span="1.5"
+                v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'"
+              >
+                <el-button
+                  v-hasPermi="['workflow:leave:edit']"
+                  size="small"
+                  type="primary"
+                  icon="Edit"
+                  @click="handleUpdate(scope.row)"
+                >
+                  修改
+                </el-button>
+              </el-col>
+              <el-col
+                :span="1.5"
+                v-if="scope.row.status === 'draft' || scope.row.status === 'cancel' || scope.row.status === 'back'"
+              >
+                <el-button
+                  v-hasPermi="['workflow:leave:remove']"
+                  size="small"
+                  type="primary"
+                  icon="Delete"
+                  @click="handleDelete(scope.row)"
+                >
+                  删除
+                </el-button>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+              </el-col>
+              <el-col :span="1.5" v-if="scope.row.status === 'waiting'">
+                <el-button
+                  size="small"
+                  type="primary"
+                  icon="Notification"
+                  @click="handleCancelProcessApply(scope.row.id)"
+                >
+                  撤销
+                </el-button>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="getList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script setup name="Leave" lang="ts">
+import { useRoute } from 'vue-router';
+import { cancelProcessApply } from '@/api/workflow/instance';
+import { delLeave, listLeave } from '@/api/workflow/leave';
+import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+import router from '@/router';
+import { useDict } from '@/utils/dict';
+import { download as requestDownload } from '@/utils/request';
+import { parseTime } from '@/utils/ruoyi';
+
+const route = useRoute();
+const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
+const leaveList = ref<LeaveVO[]>([]);
+const { loading, setLoading, withLoading } = useLoading(true);
+const { showSearch } = useSearchToggle();
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<LeaveVO>(item => item.id);
+const total = ref(0);
+const options = [
+  {
+    value: '1',
+    label: '事假'
+  },
+  {
+    value: '2',
+    label: '调休'
+  },
+  {
+    value: '3',
+    label: '病假'
+  },
+  {
+    value: '4',
+    label: '婚假'
+  }
+];
+
+const queryFormRef = ref<ElFormInstance>();
+
+const data = reactive<PageData<LeaveForm, LeaveQuery>>({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    startLeaveDays: undefined,
+    endLeaveDays: undefined
+  },
+  rules: {}
+});
+
+const { queryParams } = toRefs(data);
+
+/** 查询请假列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listLeave(queryParams.value);
+    leaveList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  tab.closePage(route);
+  router.push({
+    path: `/workflow/leaveEdit/index`,
+    query: {
+      type: 'add'
+    }
+  });
+};
+
+/** 修改按钮操作 */
+const handleUpdate = (row?: Partial<LeaveVO>) => {
+  tab.closePage(route);
+  router.push({
+    path: `/workflow/leaveEdit/index`,
+    query: {
+      id: row.id,
+      type: 'update'
+    }
+  });
+};
+
+/** 查看按钮操作 */
+const handleView = (row?: Partial<LeaveVO>) => {
+  tab.closePage(route);
+  router.push({
+    path: `/workflow/leaveEdit/index`,
+    query: {
+      id: row.id,
+      type: 'view'
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<LeaveVO>) => {
+  const leaveIds = row?.id || ids.value;
+  await modal.confirm('是否确认删除请假编号为"' + leaveIds + '"的数据项？');
+  await delLeave(leaveIds);
+  modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  requestDownload(
+    'workflow/leave/export',
+    {
+      ...queryParams.value
+    },
+    `leave_${new Date().getTime()}.xlsx`
+  );
+};
+
+/** 撤销按钮操作 */
+const handleCancelProcessApply = async (id: string) => {
+  await modal.confirm('是否确认撤销当前单据？');
+  setLoading(true);
+  const data = {
+    businessId: id,
+    message: '申请人撤销流程！'
+  };
+  await cancelProcessApply(data).finally(() => setLoading(false));
+  await getList();
+  modal.msgSuccess('撤销成功');
+};
+onMounted(() => {
+  getList();
+});
+</script>
diff --git a/src/views/workflow/leave/leaveEdit.vue b/src/views/workflow/leave/leaveEdit.vue
new file mode 100644
index 0000000..489925c
--- /dev/null
+++ b/src/views/workflow/leave/leaveEdit.vue
@@ -0,0 +1,301 @@
+<template>
+  <div class="p-2">
+    <el-card shadow="never">
+      <!-- mode用于直接后端发起流程 不同接口实现方式可查看具体后端代码 -->
+      <!-- 默认前端发起 前端发起更多样性 比如可以选审批人 选抄送人 上传附件等等 后端发起需要用户自行编写代码传这些参数 -->
+      <approvalButton
+        @submitForm="submitForm"
+        @approvalVerifyOpen="approvalVerifyOpen"
+        @handleApprovalRecord="handleApprovalRecord"
+        :buttonLoading="buttonLoading"
+        :id="form.id"
+        :status="form.status"
+        :pageType="routeParams.type"
+        :mode="false"
+      />
+    </el-card>
+    <el-card shadow="never" style="height: 78vh; overflow-y: auto">
+      <el-form
+        ref="leaveFormRef"
+        v-loading="loading"
+        :disabled="routeParams.type === 'view'"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="流程定义" v-if="routeParams.type === 'add'">
+          <el-select v-model="flowCode" placeholder="选择流程定义" style="width: 100%">
+            <el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="请假类型" prop="leaveType">
+          <el-select v-model="form.leaveType" placeholder="请选择请假类型" style="width: 100%">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="请假时间" required>
+          <el-date-picker
+            v-model="leaveTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            range-separator="To"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+            @change="changeLeaveTime()"
+          />
+        </el-form-item>
+        <el-form-item label="请假天数" prop="leaveDays">
+          <el-input v-model="form.leaveDays" disabled type="number" placeholder="请输入请假天数" />
+        </el-form-item>
+        <el-form-item label="请假原因" prop="remark">
+          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入请假原因" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <!-- 提交组件 -->
+    <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
+    <!-- 审批记录 -->
+    <approvalRecord ref="approvalRecordRef" />
+  </div>
+</template>
+
+<script setup name="Leave" lang="ts">
+import { useRoute } from 'vue-router';
+import { addLeave, getLeave, submitAndFlowStart, updateLeave } from '@/api/workflow/leave';
+import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+import { startWorkFlow } from '@/api/workflow/task';
+import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
+import ApprovalButton from '@/components/Process/approvalButton.vue';
+import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import SubmitVerify from '@/components/Process/submitVerify.vue';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+import router from '@/router';
+
+const route = useRoute();
+
+const buttonLoading = ref(false);
+const loading = ref(true);
+const leaveTime = ref<Array<string>>([]);
+//路由参数
+const routeParams = ref<Record<string, any>>({});
+const options = [
+  {
+    value: '1',
+    label: '事假'
+  },
+  {
+    value: '2',
+    label: '调休'
+  },
+  {
+    value: '3',
+    label: '病假'
+  },
+  {
+    value: '4',
+    label: '婚假'
+  }
+];
+const flowCodeOptions = [
+  {
+    value: 'leave1',
+    label: '请假申请-普通'
+  },
+  {
+    value: 'leave2',
+    label: '请假申请-排他网关'
+  },
+  {
+    value: 'leave3',
+    label: '请假申请-并行网关'
+  },
+  {
+    value: 'leave4',
+    label: '请假申请-会签'
+  },
+  {
+    value: 'leave5',
+    label: '请假申请-并行会签网关'
+  },
+  {
+    value: 'leave6',
+    label: '请假申请-排他并行会签'
+  }
+];
+// 自定义流程可不选择 直接填写flowCode 例如 'leave1'
+const flowCode = ref<string>('leave1');
+
+//提交组件
+const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
+//审批记录组件
+const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
+
+const leaveFormRef = ref<ElFormInstance>();
+
+const submitFormData = ref<StartProcessBo>({
+  businessId: '',
+  flowCode: '',
+  variables: {},
+  bizExt: {}
+});
+const taskVariables = ref<Record<string, any>>({});
+const bizExt = ref<Record<string, any>>({});
+
+const initFormData: LeaveForm = {
+  id: undefined,
+  leaveType: undefined,
+  startDate: undefined,
+  endDate: undefined,
+  leaveDays: undefined,
+  remark: undefined,
+  status: undefined
+};
+const data = reactive<PageData<LeaveForm, LeaveQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    startLeaveDays: undefined,
+    endLeaveDays: undefined
+  },
+  rules: {
+    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
+    leaveType: [{ required: true, message: '请假类型不能为空', trigger: 'blur' }],
+    leaveTime: [{ required: true, message: '请假时间不能为空', trigger: 'blur' }],
+    leaveDays: [{ required: true, message: '请假天数不能为空', trigger: 'blur' }]
+  }
+});
+
+const { form, rules } = toRefs(data);
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  leaveTime.value = [];
+  leaveFormRef.value?.resetFields();
+};
+
+const changeLeaveTime = () => {
+  const startDate = new Date(leaveTime.value[0]).getTime();
+  const endDate = new Date(leaveTime.value[1]).getTime();
+  const diffInMilliseconds = endDate - startDate;
+  form.value.leaveDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24)) + 1;
+};
+/** 获取详情 */
+const getInfo = () => {
+  loading.value = true;
+  buttonLoading.value = false;
+  nextTick(async () => {
+    const res = await getLeave(routeParams.value.id);
+    Object.assign(form.value, res.data);
+    leaveTime.value = [];
+    leaveTime.value.push(form.value.startDate);
+    leaveTime.value.push(form.value.endDate);
+    loading.value = false;
+    buttonLoading.value = false;
+  });
+};
+
+/** 提交按钮 */
+const submitForm = (status: string, mode: boolean) => {
+  if (leaveTime.value.length === 0) {
+    modal.msgError('请假时间不能为空');
+    return;
+  }
+  try {
+    leaveFormRef.value?.validate(async (valid: boolean) => {
+      form.value.startDate = leaveTime.value[0];
+      form.value.endDate = leaveTime.value[1];
+      if (valid) {
+        buttonLoading.value = true;
+        // 设置后端发起和不等于草稿状态 直接走流程发起
+        if (mode && status != 'draft') {
+          const res = await submitAndFlowStart(form.value).finally(() => (buttonLoading.value = false));
+          form.value = res.data;
+          buttonLoading.value = false;
+          modal.msgSuccess('操作成功');
+          tab.closePage(route);
+          router.go(-1);
+        } else {
+          let res;
+          if (form.value.id) {
+            res = await updateLeave(form.value).finally(() => (buttonLoading.value = false));
+          } else {
+            res = await addLeave(form.value).finally(() => (buttonLoading.value = false));
+          }
+          form.value = res.data;
+          if (status === 'draft') {
+            buttonLoading.value = false;
+            modal.msgSuccess('暂存成功');
+            tab.closePage(route);
+            router.go(-1);
+          } else {
+            await handleStartWorkFlow(res.data);
+          }
+        }
+      }
+    });
+  } finally {
+    buttonLoading.value = false;
+  }
+};
+
+//提交申请
+const handleStartWorkFlow = async (data: LeaveForm) => {
+  try {
+    submitFormData.value.flowCode = flowCode.value;
+    submitFormData.value.businessId = data.id;
+    //流程变量
+    taskVariables.value = {
+      // leave2/6 使用的流程变量
+      leaveDays: data.leaveDays,
+      // leave4/5 使用的流程变量
+      userList: ['1', '3', '4']
+    };
+    //流程实例业务扩展字段
+    bizExt.value = {
+      businessTitle: '请假申请',
+      businessCode: data.applyCode
+    };
+    submitFormData.value.variables = taskVariables.value;
+    submitFormData.value.bizExt = bizExt.value;
+    const resp = await startWorkFlow(submitFormData.value);
+    if (submitVerifyRef.value) {
+      buttonLoading.value = false;
+      submitVerifyRef.value.openDialog(resp.data.taskId);
+    }
+  } finally {
+    buttonLoading.value = false;
+  }
+};
+//审批记录
+const handleApprovalRecord = () => {
+  approvalRecordRef.value.init(form.value.id);
+};
+//提交回调
+const submitCallback = async () => {
+  await tab.closePage(route);
+  router.go(-1);
+};
+//审批
+const approvalVerifyOpen = async () => {
+  submitVerifyRef.value.openDialog(routeParams.value.taskId);
+};
+
+onMounted(() => {
+  nextTick(async () => {
+    routeParams.value = route.query;
+    reset();
+    loading.value = false;
+    if (
+      routeParams.value.type === 'update' ||
+      routeParams.value.type === 'view' ||
+      routeParams.value.type === 'approval'
+    ) {
+      getInfo();
+    }
+  });
+});
+</script>
diff --git a/src/views/workflow/processDefinition/design.vue b/src/views/workflow/processDefinition/design.vue
new file mode 100644
index 0000000..4adce29
--- /dev/null
+++ b/src/views/workflow/processDefinition/design.vue
@@ -0,0 +1,65 @@
+<template>
+  <div ref="container" class="warm-flow-designer-page">
+    <iframe ref="iframe" :src="iframeUrl" frameborder="0" class="warm-flow-designer-page__iframe"></iframe>
+  </div>
+</template>
+
+<script setup name="WarmFlow" lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import tab from '@/plugins/tab';
+import { getToken } from '@/utils/auth';
+
+const route = useRoute();
+// definitionId为需要查询的流程定义id，
+// disabled为是否可编辑, 例如：查看的时候不可编辑，不可保存
+const iframeUrl = ref('');
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+
+const onDesignerMessage = (event: MessageEvent) => {
+  if (event.data?.method === 'close') {
+    close();
+  }
+};
+const open = async (definitionId, disabled) => {
+  const url = baseUrl + `/warm-flow-ui/index.html?id=${definitionId}&onlyDesignShow=true`;
+  iframeUrl.value = url + '&Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID;
+};
+/** 关闭按钮 */
+function close() {
+  const obj = {
+    path: '/workflow/processDefinition',
+    query: { activeName: route.query.activeName }
+  };
+  tab.closeOpenPage(obj);
+}
+
+onMounted(() => {
+  window.addEventListener('message', onDesignerMessage);
+  open(route.query.definitionId, route.query.disabled);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', onDesignerMessage);
+});
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  open
+});
+</script>
+
+<style lang="scss" scoped>
+.warm-flow-designer-page {
+  width: 100%;
+  height: calc(100vh - 123px);
+  overflow: hidden;
+}
+
+.warm-flow-designer-page__iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/workflow/processDefinition/index.vue b/src/views/workflow/processDefinition/index.vue
new file mode 100644
index 0000000..63764de
--- /dev/null
+++ b/src/views/workflow/processDefinition/index.vue
@@ -0,0 +1,740 @@
+<template>
+  <div class="p-2 app-container workflow-process-definition-page">
+    <el-row :gutter="20" class="content-grid">
+      <!-- 流程分类树 -->
+      <tree-panel
+        ref="treePanelRef"
+        v-model:collapsed="treeCollapsed"
+        title="流程分类"
+        placeholder="请输入流程分类名"
+        :data="categoryOptions"
+        :expanded-span="4"
+        filter-field="categoryName"
+        @node-click="handleNodeClick"
+      />
+      <el-col
+        :lg="treeCollapsed ? 23 : 20"
+        :xs="24"
+        class="tree-content-col content-main"
+        :class="{ 'is-tree-collapsed': treeCollapsed }"
+      >
+        <div class="search-wrap">
+          <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+            <template #header>
+              <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+                <div><h3>筛选条件</h3></div>
+              </div>
+            </template>
+            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px" class="query-form">
+              <el-form-item label="流程定义名称" prop="flowName">
+                <el-input
+                  v-model="queryParams.flowName"
+                  placeholder="请输入流程定义名称"
+                  clearable
+                  @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item label="流程定义编码" prop="flowCode">
+                <el-input
+                  v-model="queryParams.flowCode"
+                  placeholder="请输入流程定义编码"
+                  clearable
+                  @keyup.enter="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </div>
+        <el-card shadow="hover" class="table-panel">
+          <template #header>
+            <div class="toolbar-shell">
+              <div class="table-heading">
+                <h3>流程定义</h3>
+              </div>
+              <div class="toolbar-actions">
+                <el-button v-hasPermi="['workflow:definition:add']" type="primary" icon="Plus" @click="handleAdd()">
+                  添加
+                </el-button>
+                <el-button
+                  v-hasPermi="['workflow:definition:edit']"
+                  type="success"
+                  icon="Edit"
+                  :disabled="single"
+                  @click="handleUpdate()"
+                >
+                  修改
+                </el-button>
+                <el-button
+                  v-hasPermi="['workflow:definition:remove']"
+                  type="danger"
+                  icon="Delete"
+                  :disabled="multiple"
+                  @click="handleDelete()"
+                >
+                  删除
+                </el-button>
+                <el-button
+                  v-hasPermi="['workflow:definition:import']"
+                  type="primary"
+                  icon="UploadFilled"
+                  @click="openUploadDialog()"
+                >
+                  部署流程文件
+                </el-button>
+                <el-button
+                  v-hasPermi="['workflow:definition:export']"
+                  type="warning"
+                  icon="Download"
+                  :disabled="single"
+                  @click="handleExportDef"
+                >
+                  导出
+                </el-button>
+                <right-toolbar
+                  v-model:show-search="showSearch"
+                  :search="false"
+                  @query-table="handleQuery"
+                ></right-toolbar>
+              </div>
+            </div>
+          </template>
+          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+            <el-tab-pane label="已发布" name="0"></el-tab-pane>
+            <el-tab-pane label="未发布" name="1"></el-tab-pane>
+            <el-table
+              v-loading="loading"
+              border
+              class="data-table"
+              :data="processDefinitionList"
+              @selection-change="handleSelectionChange"
+            >
+              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column align="center" prop="id" label="主键" v-if="false"></el-table-column>
+              <el-table-column
+                align="center"
+                prop="flowName"
+                label="流程定义名称"
+                :show-overflow-tooltip="true"
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                prop="flowCode"
+                label="标识KEY"
+                :show-overflow-tooltip="true"
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                prop="categoryName"
+                label="流程分类"
+                :show-overflow-tooltip="true"
+              ></el-table-column>
+              <el-table-column align="center" prop="version" label="版本号" width="80">
+                <template #default="scope">v{{ scope.row.version }}.0</template>
+              </el-table-column>
+              <el-table-column align="center" prop="activityStatus" label="激活状态" width="130">
+                <template #default="scope">
+                  <el-switch
+                    v-hasPermi="['workflow:definition:active']"
+                    v-model="scope.row.activityStatus"
+                    :active-value="1"
+                    :inactive-value="0"
+                    @change="status => handleProcessDefState(scope.row, status)"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column align="center" prop="isPublish" label="发布状态" width="100">
+                <template #default="scope">
+                  <el-tag v-if="scope.row.isPublish == 0" type="danger">未发布</el-tag>
+                  <el-tag v-else-if="scope.row.isPublish == 1" type="success">已发布</el-tag>
+                  <el-tag v-else type="danger">失效</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                fixed="right"
+                label="操作"
+                align="center"
+                width="236"
+                class-name="small-padding fixed-width"
+              >
+                <template #default="scope">
+                  <div class="process-action-group">
+                    <el-button
+                      v-hasPermi="['workflow:definition:remove']"
+                      link
+                      type="primary"
+                      size="small"
+                      icon="Delete"
+                      @click="handleDelete(scope.row)"
+                    >
+                      删除流程
+                    </el-button>
+                    <el-button
+                      v-hasPermi="['workflow:definition:copy']"
+                      link
+                      type="primary"
+                      size="small"
+                      icon="CopyDocument"
+                      @click="handleCopyDef(scope.row)"
+                    >
+                      复制流程
+                    </el-button>
+                    <el-button
+                      v-hasPermi="['workflow:definition:query']"
+                      link
+                      type="primary"
+                      v-if="scope.row.isPublish === 0"
+                      icon="Pointer"
+                      size="small"
+                      @click="design(scope.row)"
+                    >
+                      流程设计
+                    </el-button>
+                    <el-button
+                      v-hasPermi="['workflow:definition:query']"
+                      link
+                      type="primary"
+                      v-else
+                      icon="View"
+                      size="small"
+                      @click="designView(scope.row)"
+                    >
+                      查看流程
+                    </el-button>
+                    <el-button
+                      v-hasPermi="['workflow:definition:publish']"
+                      link
+                      type="primary"
+                      v-if="scope.row.isPublish !== 1"
+                      size="small"
+                      icon="CircleCheck"
+                      @click="handlePublish(scope.row)"
+                    >
+                      发布流程
+                    </el-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              :total="total"
+              @pagination="getPageList"
+            />
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 部署文件 -->
+    <el-dialog v-if="uploadDialog.visible" v-model="uploadDialog.visible" :title="uploadDialog.title" width="30%">
+      <div v-loading="uploadDialogLoading">
+        <div class="mb5">
+          <el-text class="mx-1" size="large">
+            <span class="text-danger">*</span>
+            请选择部署流程分类：
+          </el-text>
+          <el-tree-select
+            v-model="selectCategory"
+            :data="categoryOptions"
+            :props="{ value: 'id', label: 'label', children: 'children' } as any"
+            filterable
+            value-key="id"
+            :render-after-expand="false"
+            check-strictly
+            style="width: 240px"
+          />
+        </div>
+        <el-upload
+          class="upload-demo"
+          drag
+          multiple
+          accept="application/json,application/text"
+          :before-upload="handlerBeforeUpload"
+          :http-request="handlerImportDefinition"
+        >
+          <el-icon class="UploadFilled"><upload-filled /></el-icon>
+          <div class="el-upload__text"><em>点击上传，选择JSON流程文件</em></div>
+          <div class="el-upload__text">仅支持json格式文件</div>
+          <div class="el-upload__text">PS:如若部署请部署从本项目模型管理导出的数据</div>
+        </el-upload>
+      </div>
+    </el-dialog>
+
+    <!-- 新增/编辑流程定义 -->
+    <el-dialog
+      v-model="modelDialog.visible"
+      :title="modelDialog.title"
+      width="650px"
+      append-to-body
+      :close-on-click-modal="false"
+      class="definition-dialog"
+    >
+      <el-form ref="defFormRef" :model="form" :rules="rules" label-width="120px" class="definition-form">
+        <el-form-item label="流程类别" prop="category">
+          <el-tree-select
+            v-model="form.category"
+            :data="categoryOptions"
+            :props="{ value: 'id', label: 'label', children: 'children' } as any"
+            filterable
+            value-key="id"
+            :render-after-expand="false"
+            check-strictly
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="流程编码" prop="flowCode">
+          <el-input v-model="form.flowCode" placeholder="请输入流程编码" maxlength="40" show-word-limit />
+        </el-form-item>
+        <el-form-item label="流程名称" prop="flowName">
+          <el-input v-model="form.flowName" placeholder="请输入流程名称" maxlength="100" show-word-limit />
+        </el-form-item>
+        <el-form-item label="设计器模式" prop="modelValue">
+          <el-radio-group v-model="form.modelValue" :disabled="!!form.id" class="definition-radio-group">
+            <el-radio value="CLASSICS" size="large" border>经典模式</el-radio>
+            <el-radio value="MIMIC" size="large" border>仿钉钉模式</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="流程配置">
+          <el-checkbox v-model="autoPass" label="下一节点执行人是当前任务处理人自动审批" />
+        </el-form-item>
+        <el-form-item label="是否动态表单" prop="formCustom">
+          <el-radio-group v-model="form.formCustom" class="definition-radio-group">
+            <el-radio value="Y" size="large" border disabled>是</el-radio>
+            <el-radio value="N" size="large" border>否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="表单路径" prop="formPath">
+          <el-input v-model="form.formPath" placeholder="请输入表单路径" maxlength="100" show-word-limit />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeModelDialog()">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">保存</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="processDefinition" lang="ts">
+import type { ElMessageBoxOptions, TabsPaneContext, UploadRequestOptions } from 'element-plus';
+import { useRoute, useRouter } from 'vue-router';
+import { categoryTree } from '@/api/workflow/category';
+import { CategoryTreeVO } from '@/api/workflow/category/types';
+import {
+  listDefinition,
+  deleteDefinition,
+  active,
+  importDef,
+  unPublishList,
+  publish,
+  add,
+  edit,
+  getInfo,
+  copy
+} from '@/api/workflow/definition';
+import { FlowDefinitionQuery, FlowDefinitionVo, FlowDefinitionForm } from '@/api/workflow/definition/types';
+import TreePanel from '@/components/TreePanel/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTreeCollapsed } from '@/hooks/tree/useTreeCollapsed';
+import modal from '@/plugins/modal';
+import { download as requestDownload } from '@/utils/request';
+
+const route = useRoute();
+const router = useRouter();
+
+const queryFormRef = ref<ElFormInstance>();
+const treePanelRef = ref<InstanceType<typeof TreePanel>>();
+
+const { loading, setLoading, withLoading } = useLoading(true);
+const total = ref(0);
+const uploadDialogLoading = ref(false);
+const processDefinitionList = ref<FlowDefinitionVo[]>([]);
+const categoryOptions = ref<CategoryTreeVO[]>([]);
+const { treeCollapsed } = useTreeCollapsed();
+const { showSearch } = useSearchToggle();
+const autoPass = ref(false);
+/** 部署文件分类选择 */
+const selectCategory = ref();
+const defFormRef = ref<ElFormInstance>();
+const activeName = ref('0');
+
+// 查询参数
+const queryParams = ref<FlowDefinitionQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  flowName: undefined,
+  flowCode: undefined,
+  category: undefined
+});
+const rules = {
+  category: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+  flowName: [{ required: true, message: '流程定义名称不能为空', trigger: 'blur' }],
+  formCustom: [{ required: true, message: '请选择是否动态表单', trigger: 'change' }],
+  modelValue: [{ required: true, message: '设计器模式不能为空', trigger: 'change' }],
+  flowCode: [{ required: true, message: '流程定义编码不能为空', trigger: 'blur' }]
+};
+const initFormData: FlowDefinitionForm = {
+  id: '',
+  flowName: '',
+  flowCode: '',
+  category: '',
+  ext: '',
+  formPath: '',
+  formCustom: '',
+  modelValue: ''
+};
+//流程定义参数
+const form = ref<FlowDefinitionForm>({
+  id: '',
+  flowName: '',
+  flowCode: '',
+  category: '',
+  ext: '',
+  formPath: '',
+  formCustom: '',
+  modelValue: ''
+});
+const { ids, selectedRows, single, multiple, handleSelectionChange } = useTableSelection<FlowDefinitionVo, string>(
+  item => String(item.id)
+);
+const flowCodeList = computed(() => selectedRows.value.map(item => item.flowCode));
+const {
+  dialog: uploadDialog,
+  openDialog: openUploadDialog,
+  closeDialog: closeUploadDialog
+} = useDialogState('部署流程文件');
+const {
+  dialog: modelDialog,
+  resetForm: reset,
+  showDialog: showModelDialog,
+  closeDialog: closeModelDialog
+} = useFormDialog({
+  form,
+  formRef: defFormRef,
+  initialFormData: initFormData
+});
+onMounted(() => {
+  getPageList();
+  getTreeselect();
+});
+
+/** 节点单击事件 */
+const handleNodeClick = (data: CategoryTreeVO) => {
+  queryParams.value.category = data.id;
+  if (data.id === '0') {
+    queryParams.value.category = '';
+  }
+  handleQuery();
+};
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await categoryTree();
+  categoryOptions.value = res.data;
+};
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  // v-model处理有延迟 需要手动处理
+  activeName.value = tab.index;
+  handleQuery();
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  if (activeName.value === '0') {
+    getList();
+  } else {
+    getUnPublishList();
+  }
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.category = '';
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+//分页
+const getPageList = async () => {
+  if (route.query.activeName) {
+    activeName.value = route.query.activeName as string;
+    const q = { ...route.query };
+    delete q.activeName;
+    router.replace({ path: route.path, query: q });
+  }
+  if (activeName.value === '0') {
+    getList();
+  } else {
+    getUnPublishList();
+  }
+};
+//分页
+const getList = async () => {
+  await withLoading(async () => {
+    const resp = await listDefinition(queryParams.value);
+    processDefinitionList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
+};
+//查询未发布的流程定义列表
+const getUnPublishList = async () => {
+  await withLoading(async () => {
+    const resp = await unPublishList(queryParams.value);
+    processDefinitionList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<FlowDefinitionVo>) => {
+  const id = row?.id || ids.value;
+  const defList = processDefinitionList.value.filter(x => id.indexOf(x.id) != -1).map(x => x.flowCode);
+  await modal.confirm('是否确认删除流程定义编码为【' + defList + '】的数据项？');
+  setLoading(true);
+  await deleteDefinition(id).finally(() => setLoading(false));
+  await handleQuery();
+  modal.msgSuccess('删除成功');
+};
+
+/** 发布流程定义 */
+const handlePublish = async (row?: Partial<FlowDefinitionVo>) => {
+  await modal.confirm(
+    '是否确认发布流程定义编码为【' +
+      row.flowCode +
+      '】版本为【' +
+      row.version +
+      '】的数据项？，发布后会将已发布流程定义改为失效！'
+  );
+  setLoading(true);
+  await publish(row.id).finally(() => setLoading(false));
+  activeName.value = '0';
+  await handleQuery();
+  modal.msgSuccess('发布成功');
+};
+/** 挂起/激活 */
+const handleProcessDefState = async (row: Partial<FlowDefinitionVo>, status: number | string | boolean) => {
+  let msg: string;
+  if (status === 0) {
+    msg = `暂停后，此流程下的所有任务都不允许往后流转，您确定挂起【${row.flowName || row.flowCode}】吗？`;
+  } else {
+    msg = `启动后，此流程下的所有任务都允许往后流转，您确定激活【${row.flowName || row.flowCode}】吗？`;
+  }
+  try {
+    setLoading(true);
+    await modal.confirm(msg);
+    await active(row.id, !!status);
+    await handleQuery();
+    modal.msgSuccess('操作成功');
+  } catch (error) {
+    row.activityStatus = status === 0 ? 1 : 0;
+    console.error(error);
+  } finally {
+    setLoading(false);
+  }
+};
+
+//上传文件前的钩子
+const handlerBeforeUpload = () => {
+  if (selectCategory.value === 'ALL') {
+    modal.msgError('顶级节点不可作为分类！');
+    return false;
+  }
+  if (!selectCategory.value) {
+    modal.msgError('请选择左侧要上传的分类！');
+    return false;
+  }
+};
+//部署文件
+const handlerImportDefinition = (data: UploadRequestOptions): XMLHttpRequest => {
+  const formData = new FormData();
+  uploadDialogLoading.value = true;
+  formData.append('file', data.file);
+  formData.append('category', selectCategory.value);
+  importDef(formData)
+    .then(() => {
+      closeUploadDialog();
+      modal.msgSuccess('部署成功');
+      activeName.value = '1';
+      handleQuery();
+    })
+    .finally(() => {
+      uploadDialogLoading.value = false;
+    });
+  return;
+};
+/**
+ * 设计流程
+ * @param row
+ */
+const design = async (row: Partial<FlowDefinitionVo>) => {
+  router.push({
+    path: `/workflow/design/index`,
+    query: {
+      definitionId: String(row.id),
+      disabled: 'false',
+      activeName: String(activeName.value)
+    }
+  });
+};
+
+/**
+ * 查看流程
+ * @param row
+ */
+const designView = async (row: Partial<FlowDefinitionVo>) => {
+  router.push({
+    path: `/workflow/design/index`,
+    query: {
+      definitionId: String(row.id),
+      disabled: 'true',
+      activeName: String(activeName.value)
+    }
+  });
+};
+/**
+ * 新增
+ */
+const handleAdd = async () => {
+  reset();
+  if (queryParams.value.category != null && queryParams.value.category !== '') {
+    form.value.category = String(queryParams.value.category);
+  }
+  form.value.modelValue = 'CLASSICS';
+  form.value.formCustom = 'N';
+  showModelDialog('新增流程');
+};
+/** 修改按钮操作 */
+const handleUpdate = async (row?: Partial<FlowDefinitionVo>) => {
+  reset();
+  const id = row?.id || ids.value[0];
+  const res = await getInfo(id);
+  Object.assign(form.value, res.data);
+  autoPass.value = false;
+  if (form.value.ext != null && form.value.ext != '') {
+    const extJson = JSON.parse(form.value.ext);
+    if (extJson.autoPass != null && extJson.autoPass != '') {
+      autoPass.value = extJson.autoPass;
+    }
+  }
+  showModelDialog('修改流程');
+};
+
+const handleSubmit = async () => {
+  defFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      setLoading(true);
+      const ext: { autoPass: boolean } = {
+        autoPass: autoPass.value
+      };
+      form.value.ext = JSON.stringify(ext);
+      if (form.value.id) {
+        await edit(form.value).finally(() => setLoading(false));
+      } else {
+        await add(form.value).finally(() => setLoading(false));
+        activeName.value = '1';
+      }
+      modal.msgSuccess('操作成功');
+      closeModelDialog();
+      handleQuery();
+    }
+  });
+};
+//复制
+const handleCopyDef = async (row: Partial<FlowDefinitionVo>) => {
+  ElMessageBox.confirm(`是否确认复制【${row.flowCode}】版本为【${row.version}】的流程定义！`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning'
+  } as ElMessageBoxOptions).then(() => {
+    setLoading(true);
+    copy(row.id)
+      .then(resp => {
+        if (resp.code === 200) {
+          modal.msgSuccess('操作成功');
+          activeName.value = '1';
+          handleQuery();
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+};
+
+/** 导出按钮操作 */
+const handleExportDef = () => {
+  requestDownload(`/workflow/definition/exportDef/${ids.value[0]}`, {}, `${flowCodeList.value[0]}.json`);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.tree-table-crud-page;
+
+.content-main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.process-action-group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  padding: 2px 0;
+}
+
+.process-action-group :deep(.el-button.is-link) {
+  width: auto !important;
+  min-width: 0 !important;
+  height: 30px !important;
+  padding: 0 10px !important;
+  border-radius: 10px !important;
+  background: rgba(53, 109, 255, 0.08) !important;
+}
+
+.process-action-group :deep(.el-button.is-link + .el-button.is-link) {
+  margin-left: 0 !important;
+}
+
+.process-action-group :deep(.el-button .el-icon) {
+  margin-right: 4px;
+}
+
+.definition-form {
+  padding-top: 8px;
+}
+
+.definition-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.definition-radio-group :deep(.el-radio) {
+  margin-right: 0;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>
diff --git a/src/views/workflow/processInstance/index.vue b/src/views/workflow/processInstance/index.vue
new file mode 100644
index 0000000..e49c061
--- /dev/null
+++ b/src/views/workflow/processInstance/index.vue
@@ -0,0 +1,590 @@
+<template>
+  <div class="p-2 app-container workflow-process-instance-page">
+    <el-row :gutter="20" class="content-grid">
+      <!-- 流程分类树 -->
+      <tree-panel
+        ref="treePanelRef"
+        v-model:collapsed="treeCollapsed"
+        title="流程分类"
+        placeholder="请输入流程分类名"
+        :data="categoryOptions"
+        :expanded-span="4"
+        filter-field="label"
+        @node-click="handleNodeClick"
+      />
+      <el-col
+        :lg="treeCollapsed ? 23 : 20"
+        :xs="24"
+        class="tree-content-col content-main"
+        :class="{ 'is-tree-collapsed': treeCollapsed }"
+      >
+        <div class="search-wrap">
+          <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+            <template #header>
+              <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+                <div><h3>筛选条件</h3></div>
+              </div>
+            </template>
+            <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+              <el-form-item>
+                <el-badge :value="userSelectCount" :max="10" class="item">
+                  <el-button type="primary" @click="openUserSelect">选择申请人</el-button>
+                </el-badge>
+              </el-form-item>
+              <el-form-item label="任务名称" prop="nodeName">
+                <el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+              </el-form-item>
+              <el-form-item label="流程定义名称" label-width="100" prop="flowName">
+                <el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+              </el-form-item>
+              <el-form-item label="流程定义编码" label-width="100" prop="flowCode">
+                <el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </div>
+        <el-card shadow="hover" class="table-panel">
+          <template #header>
+            <div class="toolbar-shell">
+              <div class="table-heading">
+                <h3>流程实例</h3>
+              </div>
+              <div class="toolbar-actions">
+                <el-button
+                  v-hasPermi="['workflow:instance:remove']"
+                  type="danger"
+                  plain
+                  icon="Delete"
+                  :disabled="multiple"
+                  @click="() => handleDelete()"
+                >
+                  删除
+                </el-button>
+                <right-toolbar
+                  v-model:show-search="showSearch"
+                  :search="false"
+                  @query-table="handleQuery"
+                ></right-toolbar>
+              </div>
+            </div>
+          </template>
+          <el-tabs v-model="tab" @tab-click="changeTab">
+            <el-tab-pane name="running" label="运行中"></el-tab-pane>
+            <el-tab-pane name="finish" label="已完成"></el-tab-pane>
+            <el-table
+              v-loading="loading"
+              border
+              class="data-table"
+              :data="processInstanceList"
+              @selection-change="handleSelectionChange"
+            >
+              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+              <el-table-column
+                :show-overflow-tooltip="true"
+                prop="businessCode"
+                align="center"
+                label="业务编码"
+              ></el-table-column>
+              <el-table-column
+                :show-overflow-tooltip="true"
+                prop="businessTitle"
+                align="center"
+                label="业务标题"
+              ></el-table-column>
+              <el-table-column :show-overflow-tooltip="true" align="center" width="120" label="流程定义名称">
+                <template #default="scope">
+                  <span>{{ scope.row.flowName }}v{{ scope.row.version }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" prop="flowCode" width="120" label="流程定义编码"></el-table-column>
+              <el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
+              <el-table-column align="center" prop="nodeName" label="任务名称"></el-table-column>
+              <el-table-column
+                align="center"
+                prop="createByName"
+                :show-overflow-tooltip="true"
+                label="申请人"
+              ></el-table-column>
+              <el-table-column align="center" prop="version" label="版本号" width="90">
+                <template #default="scope">v{{ scope.row.version }}.0</template>
+              </el-table-column>
+              <el-table-column
+                v-if="tab === 'running'"
+                v-hasPermi="['workflow:instance:active']"
+                align="center"
+                prop="isSuspended"
+                label="状态"
+                min-width="70"
+              >
+                <template #default="scope">
+                  <el-tag v-if="!scope.row.isSuspended" type="success">激活</el-tag>
+                  <el-tag v-else type="danger">挂起</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="流程状态" min-width="80">
+                <template #default="scope">
+                  <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+                </template>
+              </el-table-column>
+              <el-table-column align="center" prop="createTime" label="启动时间" width="160"></el-table-column>
+              <el-table-column
+                v-if="tab === 'finish'"
+                align="center"
+                prop="updateTime"
+                label="结束时间"
+                width="160"
+              ></el-table-column>
+              <el-table-column label="操作" align="center" :width="165" fixed="right">
+                <template #default="scope">
+                  <el-row v-if="tab === 'running'" :gutter="10" class="mb8">
+                    <el-col :span="1.5">
+                      <el-popover
+                        :ref="el => setPopoverRef(el, scope.$index)"
+                        trigger="click"
+                        placement="left"
+                        :width="300"
+                      >
+                        <el-input
+                          v-model="deleteReason"
+                          resize="none"
+                          :rows="3"
+                          type="textarea"
+                          placeholder="请输入作废原因"
+                        />
+                        <div style="text-align: right; margin: 5px 0px 0px 0px">
+                          <el-button size="small" text @click="cancelPopover(scope.$index)">取消</el-button>
+                          <el-button size="small" type="primary" @click="handleInvalid(scope.row)">确认</el-button>
+                        </div>
+                        <template #reference>
+                          <el-button type="danger" size="small" icon="CircleClose">作废</el-button>
+                        </template>
+                      </el-popover>
+                    </el-col>
+                    <el-col :span="1.5">
+                      <el-button
+                        v-hasPermi="['workflow:instance:remove']"
+                        type="danger"
+                        size="small"
+                        icon="Delete"
+                        @click="handleDelete(scope.row)"
+                      >
+                        删除
+                      </el-button>
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="10" class="mb8">
+                    <el-col :span="1.5">
+                      <el-button
+                        v-hasPermi="['workflow:instance:query']"
+                        type="primary"
+                        size="small"
+                        icon="View"
+                        @click="handleView(scope.row)"
+                      >
+                        查看
+                      </el-button>
+                    </el-col>
+                    <el-col :span="1.5">
+                      <el-button
+                        v-hasPermi="['workflow:instance:variableQuery']"
+                        type="primary"
+                        size="small"
+                        icon="Document"
+                        @click="handleInstanceVariable(scope.row)"
+                      >
+                        变量
+                      </el-button>
+                    </el-col>
+                  </el-row>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              :total="total"
+              @pagination="handleQuery"
+            />
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-dialog
+      v-if="processDefinitionDialog.visible"
+      v-model="processDefinitionDialog.visible"
+      :title="processDefinitionDialog.title"
+      width="70%"
+    >
+      <el-table v-loading="loading" :data="processDefinitionHistoryList">
+        <el-table-column fixed align="center" type="index" label="序号" width="60"></el-table-column>
+        <el-table-column fixed align="center" prop="name" label="流程定义名称"></el-table-column>
+        <el-table-column fixed align="center" prop="nodeName" label="任务名称"></el-table-column>
+        <el-table-column align="center" prop="key" label="标识Key"></el-table-column>
+        <el-table-column align="center" prop="version" label="版本号" width="90">
+          <template #default="scope">v{{ scope.row.version }}.0</template>
+        </el-table-column>
+        <el-table-column
+          v-hasPermi="['workflow:instance:active']"
+          align="center"
+          prop="suspensionState"
+          label="状态"
+          min-width="70"
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.suspensionState == 1" type="success">激活</el-tag>
+            <el-tag v-else type="danger">挂起</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          prop="deploymentTime"
+          label="部署时间"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+      </el-table>
+    </el-dialog>
+    <!-- 流程变量开始 -->
+    <el-dialog
+      v-model="variableVisible"
+      v-if="variableVisible"
+      draggable
+      title="流程变量"
+      width="60%"
+      :close-on-click-modal="false"
+    >
+      <el-card v-loading="variableLoading">
+        <template #header>
+          <div class="clearfix">
+            <span>
+              流程定义名称：
+              <el-tag>{{ processDefinitionName }}</el-tag>
+            </span>
+          </div>
+        </template>
+        <div class="max-h-500px overflow-y-auto">
+          <VueJsonPretty :data="formatToJsonObject(variables)" />
+        </div>
+      </el-card>
+      <el-card v-loading="variableLoading">
+        <el-form ref="ruleFormRef" :model="form" :inline="true" :rules="rules" label-width="120px">
+          <el-form-item label="变量KEY" prop="key">
+            <el-input v-model="form.key" placeholder="请输入变量KEY" />
+          </el-form-item>
+          <el-form-item label="变量值" prop="value">
+            <el-input v-model="form.value" placeholder="请输入变量值" />
+          </el-form-item>
+          <el-form-item>
+            <el-button v-hasPermi="['workflow:instance:variable']" type="primary" @click="handleVariable(ruleFormRef)">
+              确认
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </el-dialog>
+    <!-- 流程变量结束 -->
+
+    <!-- 申请人 -->
+    <UserSelect
+      ref="userSelectRef"
+      :multiple="true"
+      :data="selectUserIds"
+      @confirm-call-back="userSelectCallBack"
+    ></UserSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElForm, FormInstance, type TabsPaneContext } from 'element-plus';
+import { ref } from 'vue';
+import VueJsonPretty from 'vue-json-pretty';
+import { UserVO } from '@/api/system/user/types';
+import { categoryTree } from '@/api/workflow/category';
+import { CategoryTreeVO } from '@/api/workflow/category/types';
+import {
+  pageByRunning,
+  pageByFinish,
+  deleteByInstanceIds,
+  deleteHisByInstanceIds,
+  instanceVariable,
+  invalid,
+  updateVariable
+} from '@/api/workflow/instance';
+import { FlowInstanceQuery, FlowInstanceVO } from '@/api/workflow/instance/types';
+import 'vue-json-pretty/lib/styles.css';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import TreePanel from '@/components/TreePanel/index.vue';
+import UserSelect from '@/components/UserSelect/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useDialogState } from '@/hooks/dialog/useDialogState';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTreeCollapsed } from '@/hooks/tree/useTreeCollapsed';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+
+const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
+const queryFormRef = ref<ElFormInstance>();
+const treePanelRef = ref<InstanceType<typeof TreePanel>>();
+const popoverRefs = ref<Record<number, { hide?: () => void } | null>>({});
+const setPopoverRef = (el: unknown, index: number) => {
+  if (el) {
+    popoverRefs.value[index] = el as { hide?: () => void };
+  }
+};
+const form = ref<Record<string, any>>({
+  instanceId: undefined,
+  key: undefined,
+  value: undefined
+});
+const ruleFormRef = ref<FormInstance>();
+const userSelectRef = ref<InstanceType<typeof UserSelect>>();
+const { loading, setLoading, withLoading } = useLoading(true);
+const {
+  ids: instanceIds,
+  single,
+  multiple,
+  handleSelectionChange
+} = useTableSelection<FlowInstanceVO>(item => item.id);
+const { showSearch } = useSearchToggle();
+// 总条数
+const total = ref(0);
+// 实例id
+const instanceId = ref(undefined);
+
+// 流程变量是否显示
+const variableVisible = ref(false);
+const variableLoading = ref(true);
+const variables = ref<string>('');
+//流程定义名称
+const processDefinitionName = ref();
+// 模型定义表格数据
+const processInstanceList = ref<FlowInstanceVO[]>([]);
+const processDefinitionHistoryList = ref<Array<any>>([]);
+const categoryOptions = ref<CategoryTreeVO[]>([]);
+const { treeCollapsed } = useTreeCollapsed();
+
+const { dialog: processDefinitionDialog } = useDialogState('流程定义');
+
+const tab = ref('running');
+// 作废原因
+const deleteReason = ref('');
+
+//申请人id
+const selectUserIds = ref<Array<number | string>>([]);
+//申请人选择数量
+const userSelectCount = ref(0);
+// 查询参数
+const queryParams = ref<FlowInstanceQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  nodeName: undefined,
+  flowName: undefined,
+  flowCode: undefined,
+  createByIds: [],
+  category: undefined
+});
+
+/** 节点单击事件 */
+const handleNodeClick = (data: CategoryTreeVO) => {
+  queryParams.value.category = data.id;
+  if (data.id === '0') {
+    queryParams.value.category = '';
+  }
+  handleQuery();
+};
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await categoryTree();
+  categoryOptions.value = res.data;
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  if ('running' === tab.value) {
+    getProcessInstanceRunningList();
+  } else {
+    getProcessInstanceFinishList();
+  }
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.category = '';
+    queryParams.value.createByIds = [];
+    userSelectCount.value = 0;
+    selectUserIds.value = [];
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+//分页
+const getProcessInstanceRunningList = () => {
+  withLoading(async () => {
+    const resp = await pageByRunning(queryParams.value);
+    processInstanceList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
+};
+//分页
+const getProcessInstanceFinishList = () => {
+  withLoading(async () => {
+    const resp = await pageByFinish(queryParams.value);
+    processInstanceList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<FlowInstanceVO>) => {
+  const instanceIdList = row?.id ?? instanceIds.value;
+  await modal.confirm('是否确认删除？');
+  setLoading(true);
+  if ('running' === tab.value) {
+    await deleteByInstanceIds(instanceIdList).finally(() => setLoading(false));
+    getProcessInstanceRunningList();
+  } else {
+    await deleteHisByInstanceIds(instanceIdList).finally(() => setLoading(false));
+    getProcessInstanceFinishList();
+  }
+  modal.msgSuccess('删除成功');
+};
+const changeTab = async (pane: TabsPaneContext) => {
+  processInstanceList.value = [];
+  queryParams.value.pageNum = 1;
+  if ('running' === pane.paneName) {
+    getProcessInstanceRunningList();
+  } else {
+    getProcessInstanceFinishList();
+  }
+};
+/** 作废按钮操作 */
+const handleInvalid = async (row: Partial<FlowInstanceVO>) => {
+  await modal.confirm('是否确认作废？');
+  setLoading(true);
+  if ('running' === tab.value) {
+    const param = {
+      id: row.id,
+      comment: deleteReason.value
+    };
+    await invalid(param).finally(() => setLoading(false));
+    getProcessInstanceRunningList();
+    modal.msgSuccess('操作成功');
+  }
+};
+const cancelPopover = async (index: number) => {
+  popoverRefs.value[index]?.hide?.();
+};
+/** 查看按钮操作 */
+const handleView = row => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: 'view',
+    formCustom: row.formCustom,
+    formPath: row.formPath
+  });
+  workflowCommon.routerJump(routerJumpVo);
+};
+
+//查询流程变量
+const handleInstanceVariable = async (row: Partial<FlowInstanceVO>) => {
+  instanceId.value = row.id;
+  variableLoading.value = true;
+  variableVisible.value = true;
+  processDefinitionName.value = row.flowName;
+  const data = await instanceVariable(row.id);
+  variables.value = data.data.variable;
+  variableLoading.value = false;
+  form.value.instanceId = undefined;
+  form.value.key = undefined;
+  form.value.value = undefined;
+};
+
+/**
+ * json转为对象
+ * @param data 原始数据
+ */
+function formatToJsonObject(data: string) {
+  try {
+    return JSON.parse(data);
+  } catch (error) {
+    return data;
+  }
+}
+
+//打开申请人选择
+const openUserSelect = () => {
+  userSelectRef.value.open();
+};
+//确认选择申请人
+const userSelectCallBack = (data: UserVO[]) => {
+  userSelectCount.value = 0;
+  selectUserIds.value = [];
+  queryParams.value.createByIds = [];
+
+  if (data && data.length > 0) {
+    userSelectCount.value = data.length;
+    selectUserIds.value = data.map(item => item.userId);
+    queryParams.value.createByIds = selectUserIds.value;
+  }
+};
+const rules = reactive<Record<string, any>>({
+  key: [
+    {
+      required: true,
+      message: '请输入KEY',
+      trigger: 'blur'
+    }
+  ],
+  value: [
+    {
+      required: true,
+      message: '请输入变量值',
+      trigger: 'blur'
+    }
+  ]
+});
+
+const handleVariable = async (formEl: FormInstance | undefined) => {
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      form.value.instanceId = instanceId.value;
+      await modal.confirm('是否确认提交？');
+      await updateVariable(form.value);
+      modal.msgSuccess('操作成功');
+      const data = await instanceVariable(instanceId.value);
+      variables.value = data.data.variable;
+    }
+  });
+};
+
+onMounted(() => {
+  getProcessInstanceRunningList();
+  getTreeselect();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.tree-table-crud-page;
+
+.content-main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>
diff --git a/src/views/workflow/spel/index.vue b/src/views/workflow/spel/index.vue
new file mode 100644
index 0000000..5fc1caa
--- /dev/null
+++ b/src/views/workflow/spel/index.vue
@@ -0,0 +1,404 @@
+<template>
+  <div class="p-2 app-container workflow-spel-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="组件名称" prop="componentName">
+            <el-input
+              v-model="queryParams.componentName"
+              placeholder="请输入组件名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="方法名" prop="methodName">
+            <el-input
+              v-model="queryParams.methodName"
+              placeholder="请输入方法名"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>流程表达式</h3>
+          </div>
+          <div class="toolbar-actions">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['workflow:spel:add']">
+              新增
+            </el-button>
+            <el-button
+              type="success"
+              plain
+              icon="Edit"
+              :disabled="single"
+              @click="handleUpdate()"
+              v-hasPermi="['workflow:spel:edit']"
+            >
+              修改
+            </el-button>
+            <el-button
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete()"
+              v-hasPermi="['workflow:spel:remove']"
+            >
+              删除
+            </el-button>
+            <right-toolbar v-model:showSearch="showSearch" :search="false" @queryTable="getList"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        border
+        class="data-table"
+        :data="spelList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="序号" type="index" width="60" align="center">
+          <template #default="scope">
+            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="组件名称" align="center">
+          <template #default="scope">
+            {{ scope.row.componentName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="方法名称" align="center">
+          <template #default="scope">
+            {{ scope.row.methodName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="参数名称" align="center">
+          <template #default="scope">
+            {{ scope.row.methodParams || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="SPEL表达式" align="center" prop="viewSpel" />
+        <el-table-column label="状态" align="center" prop="status">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status === '0'">正常</el-tag>
+            <el-tag v-else>停用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center">
+          <template #default="scope">
+            {{ scope.row.remark || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button
+                link
+                type="primary"
+                icon="Edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['workflow:spel:edit']"
+              ></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button
+                link
+                type="primary"
+                icon="Delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['workflow:spel:remove']"
+              ></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-card>
+    <!-- 添加或修改流程spel表达式定义对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="550px" append-to-body>
+      <el-form ref="spelFormRef" :model="form" :rules="rules" label-width="100px">
+        <!-- 组件名称 -->
+        <el-form-item label="组件名称" prop="componentName">
+          <el-input v-model="form.componentName" placeholder="请输入组件名称" @input="updateViewSpel" />
+          <template #label>
+            <span>
+              <el-tooltip content="注册到Spring容器中的组件名，如：spelRuleComponent" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+              组件名称
+            </span>
+          </template>
+        </el-form-item>
+        <el-form-item label="方法名称" prop="methodName">
+          <el-input v-model="form.methodName" placeholder="请输入方法名称" @input="updateViewSpel" />
+          <template #label>
+            <span>
+              <el-tooltip content="组件中的方法名称，如：selectDeptLeaderById" placement="top">
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+              方法名称
+            </span>
+          </template>
+        </el-form-item>
+        <el-form-item label="方法参数" prop="methodParams">
+          <el-input v-model="form.methodParams" placeholder="请输入方法参数" @input="updateViewSpel" />
+          <template #label>
+            <span>
+              <el-tooltip
+                content="方法参数，如：deptId, 多个使用 ',' 分隔，单参数变量仅支持单个方法参数"
+                placement="top"
+              >
+                <el-icon><question-filled /></el-icon>
+              </el-tooltip>
+              方法参数
+            </span>
+          </template>
+        </el-form-item>
+
+        <!-- 改为只读文本展示 -->
+        <el-form-item label="SPEL表达式">
+          <span class="preview-box">
+            {{ form.viewSpel || '例如：#{@组件名.方法名(#方法参数)} 或 ${方法参数}' }}
+          </span>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Spel" lang="ts">
+import { listSpel, getSpel, delSpel, addSpel, updateSpel } from '@/api/workflow/spel';
+import { SpelVO, SpelQuery, SpelForm } from '@/api/workflow/spel/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useFormDialog } from '@/hooks/dialog/useFormDialog';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+
+const { sys_show_hide, sys_normal_disable } = toRefs<any>(useDict('sys_show_hide', 'sys_normal_disable'));
+
+const spelList = ref<SpelVO[]>([]);
+const { loading, withLoading } = useLoading(true);
+const { loading: buttonLoading, withLoading: withButtonLoading } = useLoading();
+const { showSearch } = useSearchToggle();
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<SpelVO>(item => item.id);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const spelFormRef = ref<ElFormInstance>();
+
+const initFormData: SpelForm = {
+  id: undefined,
+  componentName: undefined,
+  methodName: undefined,
+  methodParams: undefined,
+  viewSpel: undefined,
+  status: '0',
+  remark: undefined
+};
+const data = reactive<PageData<SpelForm, SpelQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    componentName: undefined,
+    methodName: undefined,
+    methodParams: undefined,
+    viewSpel: undefined,
+    status: '0',
+    params: {}
+  },
+  rules: {
+    status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const { dialog, resetForm, openDialog, showDialog, closeDialog } = useFormDialog({
+  form,
+  formRef: spelFormRef,
+  initialFormData: initFormData
+});
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 查询流程spel表达式定义列表 */
+const getList = async () => {
+  await withLoading(async () => {
+    const res = await listSpel(queryParams.value);
+    spelList.value = res.data?.rows;
+    total.value = res.data?.total;
+  });
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  closeDialog();
+  resetForm();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  openDialog('添加流程spel表达式定义');
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: Partial<SpelVO>) => {
+  resetForm();
+  const spelId = row?.id || ids.value[0];
+  const res = await getSpel(spelId);
+  Object.assign(form.value, res.data);
+  showDialog('修改流程spel表达式定义');
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  spelFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      await withButtonLoading(async () => {
+        if (form.value.id) {
+          await updateSpel(form.value);
+        } else {
+          await addSpel(form.value);
+        }
+      });
+      modal.msgSuccess('操作成功');
+      closeDialog();
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: Partial<SpelVO>) => {
+  const spelIds = row?.id || ids.value;
+  await modal.confirm('是否确认删除流程spel表达式定义编号为"' + spelIds + '"的数据项？');
+  await delSpel(spelIds);
+  modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 控制是否显示 viewSpel 输入框 */
+const showViewSpelInput = ref(false);
+
+/** 更新 spel 预览值并决定是否显示输入框 */
+const updateViewSpel = () => {
+  const comp = (form.value.componentName || '').trim();
+  const method = (form.value.methodName || '').trim();
+  const paramStr = (form.value.methodParams || '').trim();
+
+  if (!comp && !method && !paramStr) {
+    form.value.viewSpel = '';
+    return;
+  }
+
+  // 替换变量值：只有参数存在，组件和方法都不存在
+  if (!comp && !method && paramStr) {
+    const paramList = paramStr
+      .split(',')
+      .map(p => p.trim())
+      .filter(p => p.length > 0);
+
+    if (paramList.length === 1) {
+      form.value.viewSpel = `\${${paramList[0]}}`;
+      return;
+    }
+  }
+
+  // 如果缺少组件或方法，提示填写
+  if (!comp || !method) {
+    form.value.viewSpel = '请填写组件名称和方法名';
+    return;
+  }
+
+  let paramList = [];
+
+  if (paramStr) {
+    // 分割并过滤掉空参数
+    paramList = paramStr
+      .split(',')
+      .map(p => p.trim())
+      .filter(p => p.length > 0);
+  }
+
+  const paramPart = paramList.length > 0 ? '(' + paramList.map(p => `#${p}`).join(',') + ')' : '()';
+
+  form.value.viewSpel = `#{@${comp}.${method}${paramPart}}`;
+};
+
+/** 监听所有字段变化 */
+watch(() => [form.value.componentName, form.value.methodName, form.value.methodParams], updateViewSpel);
+
+onMounted(() => {
+  getList();
+});
+</script>
+<style lang="scss">
+.preview-box {
+  width: 100%;
+  padding: 10px 12px;
+  background-color: var(--el-fill-color-light);
+  border-radius: 4px;
+  color: var(--el-text-color-primary);
+  font-family: monospace; /* 等宽字体更清晰 */
+  white-space: nowrap; /* 禁止换行 */
+  overflow-x: auto; /* 超出宽度时显示水平滚动条 */
+  min-height: 36px; /* 与 el-input 高度对齐 */
+  line-height: 1.5;
+}
+</style>
diff --git a/src/views/workflow/task/allTaskWaiting.vue b/src/views/workflow/task/allTaskWaiting.vue
new file mode 100644
index 0000000..5578816
--- /dev/null
+++ b/src/views/workflow/task/allTaskWaiting.vue
@@ -0,0 +1,389 @@
+<template>
+  <div class="p-2 app-container workflow-all-task-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item>
+            <el-badge :value="userSelectCount" :max="10" class="item">
+              <el-button type="primary" @click="openUserSelect">选择申请人</el-button>
+            </el-badge>
+          </el-form-item>
+          <el-form-item label="任务名称" prop="nodeName">
+            <el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="流程定义名称" label-width="100" prop="flowName">
+            <el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>全部任务</h3>
+          </div>
+          <div class="toolbar-actions">
+            <template v-if="tab === 'waiting'">
+              <el-button
+                class="todo-action-btn todo-action-btn--primary"
+                type="primary"
+                plain
+                icon="Edit"
+                :disabled="multiple"
+                @click="handleUserOpen()"
+              >
+                修改办理人
+              </el-button>
+              <el-button
+                class="todo-action-btn todo-action-btn--warning"
+                type="warning"
+                plain
+                icon="Bell"
+                :disabled="multiple"
+                @click="handleUrgeTaskOpen()"
+              >
+                催办
+              </el-button>
+            </template>
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="handleQuery"></right-toolbar>
+          </div>
+        </div>
+      </template>
+      <el-tabs v-model="tab" @tab-click="changeTab">
+        <el-tab-pane name="waiting" label="待办任务"></el-tab-pane>
+        <el-tab-pane name="finish" label="已办任务"></el-tab-pane>
+        <el-table
+          v-loading="loading"
+          border
+          class="data-table"
+          :data="taskList"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+          <el-table-column
+            :show-overflow-tooltip="true"
+            prop="businessCode"
+            align="center"
+            label="业务编码"
+          ></el-table-column>
+          <el-table-column
+            :show-overflow-tooltip="true"
+            prop="businessTitle"
+            align="center"
+            label="业务标题"
+          ></el-table-column>
+          <el-table-column
+            :show-overflow-tooltip="true"
+            prop="flowName"
+            align="center"
+            width="120"
+            label="流程定义名称"
+          ></el-table-column>
+          <el-table-column align="center" prop="flowCode" width="120" label="流程定义编码"></el-table-column>
+          <el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
+          <el-table-column align="center" prop="version" label="版本号" width="90">
+            <template #default="scope">v{{ scope.row.version }}.0</template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="nodeName"
+            :show-overflow-tooltip="true"
+            label="任务名称"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="createByName"
+            :show-overflow-tooltip="true"
+            label="申请人"
+          ></el-table-column>
+          <el-table-column align="center" label="办理人" min-width="180">
+            <template #default="scope">
+              <template v-if="tab === 'waiting'">
+                <UserNameDisplay :content="scope.row.assigneeNames" />
+              </template>
+              <template v-else>
+                <UserNameDisplay :content="scope.row.approverName" />
+              </template>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" label="流程状态" prop="flowStatus" min-width="70">
+            <template #default="scope">
+              <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="tab === 'finish'" align="center" label="任务状态" prop="flowTaskStatus" min-width="70">
+            <template #default="scope">
+              <dict-tag :options="wf_task_status" :value="scope.row.flowTaskStatus"></dict-tag>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
+          <el-table-column label="操作" align="center" :width="tab === 'finish' ? '88' : '188'">
+            <template #default="scope">
+              <el-row :gutter="10" class="mb8">
+                <el-col :span="1.5" v-if="tab === 'waiting' || tab === 'finish'">
+                  <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+                </el-col>
+                <el-col :span="1.5" v-if="tab === 'waiting'">
+                  <el-button type="primary" size="small" icon="Setting" @click="handleMeddle(scope.row)">
+                    流程干预
+                  </el-button>
+                </el-col>
+              </el-row>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="handleQuery"
+        />
+      </el-tabs>
+    </el-card>
+    <!-- 选人组件 -->
+    <UserSelect ref="userSelectRef" :multiple="userMultiple" @confirm-call-back="submitCallback"></UserSelect>
+    <!-- 流程干预组件 -->
+    <processMeddle ref="processMeddleRef" @submitCallback="getWaitingList"></processMeddle>
+    <!-- 申请人 -->
+    <UserSelect
+      ref="applyUserSelectRef"
+      :multiple="true"
+      :data="selectUserIds"
+      @confirm-call-back="userSelectCallBack"
+    ></UserSelect>
+    <!-- 流程干预组件 -->
+    <messageType ref="messageTypeRef" @submitCallback="handleUserTask"></messageType>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TabsPaneContext } from 'element-plus';
+import { UserVO } from '@/api/system/user/types';
+import { pageByAllTaskWait, pageByAllTaskFinish, updateAssignee, urgeTask } from '@/api/workflow/task';
+import { TaskQuery, FlowTaskVO } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import messageType from '@/components/Process/MessageType.vue';
+import processMeddle from '@/components/Process/processMeddle.vue';
+import UserNameDisplay from '@/components/Process/UserNameDisplay.vue';
+import UserSelect from '@/components/UserSelect/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+
+//选人组件
+const userSelectRef = ref<InstanceType<typeof UserSelect>>();
+//流程干预组件
+const processMeddleRef = ref<InstanceType<typeof processMeddle>>();
+//选人组件
+const applyUserSelectRef = ref<InstanceType<typeof UserSelect>>();
+//消息组件
+const messageTypeRef = ref<InstanceType<typeof messageType>>();
+const queryFormRef = ref<ElFormInstance>();
+const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
+const { wf_task_status } = toRefs<any>(useDict('wf_task_status'));
+const { loading, withLoading } = useLoading(true);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<FlowTaskVO, string>(item => String(item.id));
+const userMultiple = ref(false);
+const { showSearch } = useSearchToggle();
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+const buttonType = ref('');
+//申请人id
+const selectUserIds = ref<Array<number | string>>([]);
+//申请人选择数量
+const userSelectCount = ref(0);
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  nodeName: undefined,
+  flowName: undefined,
+  flowCode: undefined,
+  createByIds: []
+});
+const tab = ref('waiting');
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.createByIds = [];
+    userSelectCount.value = 0;
+    selectUserIds.value = [];
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  if ('waiting' === tab.value) {
+    getWaitingList();
+  } else {
+    getFinishList();
+  }
+};
+const changeTab = async (data: TabsPaneContext) => {
+  taskList.value = [];
+  queryParams.value.pageNum = 1;
+  if ('waiting' === data.paneName) {
+    getWaitingList();
+  } else {
+    getFinishList();
+  }
+};
+//分页
+const getWaitingList = () => {
+  withLoading(async () => {
+    const resp = await pageByAllTaskWait(queryParams.value);
+    taskList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
+};
+const getFinishList = () => {
+  withLoading(async () => {
+    const resp = await pageByAllTaskFinish(queryParams.value);
+    taskList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
+};
+// 打开催办
+const handleUrgeTaskOpen = () => {
+  messageTypeRef.value.open();
+};
+//打开修改选人
+const handleUserOpen = () => {
+  userSelectRef.value.open();
+};
+
+//打开修改选人
+const handleUserTask = async data => {
+  await modal.confirm('是否确认提交？');
+  data.taskIdList = ids.value;
+  await urgeTask(data);
+  messageTypeRef.value.close();
+  modal.msgSuccess('操作成功');
+  handleQuery();
+};
+//修改办理人
+const submitCallback = async data => {
+  if (data && data.length > 0) {
+    await modal.confirm('是否确认提交？');
+    await updateAssignee(ids.value, data[0].userId);
+    handleQuery();
+    modal.msgSuccess('操作成功');
+  } else {
+    modal.msgWarning('请选择用户！');
+  }
+};
+/** 查看按钮操作 */
+const handleView = row => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: 'view',
+    formCustom: row.formCustom,
+    formPath: row.formPath
+  });
+  workflowCommon.routerJump(routerJumpVo);
+};
+const handleMeddle = row => {
+  processMeddleRef.value.open(row.id);
+};
+//打开申请人选择
+const openUserSelect = () => {
+  applyUserSelectRef.value.open();
+};
+//确认选择申请人
+const userSelectCallBack = (data: UserVO[]) => {
+  userSelectCount.value = 0;
+  selectUserIds.value = [];
+  queryParams.value.createByIds = [];
+
+  if (data && data.length > 0) {
+    userSelectCount.value = data.length;
+    selectUserIds.value = data.map(item => item.userId);
+    queryParams.value.createByIds = selectUserIds.value;
+  }
+};
+onMounted(() => {
+  getWaitingList();
+});
+</script>
+
+<style lang="scss" scoped>
+.todo-action-btn {
+  height: 32px;
+  padding: 0 14px;
+  border-radius: var(--app-radius-md);
+  font-weight: 600;
+  --el-button-bg-color: var(--el-fill-color-lighter);
+  --el-button-border-color: var(--el-border-color-light);
+  --el-button-text-color: var(--el-text-color-regular);
+  --el-button-hover-bg-color: var(--el-fill-color-light);
+  --el-button-hover-border-color: var(--el-border-color);
+}
+
+.todo-action-btn--primary {
+  --el-button-text-color: var(--el-color-primary);
+  --el-button-border-color: var(--el-color-primary-light-5);
+  --el-button-bg-color: var(--el-color-primary-light-9);
+  --el-button-hover-bg-color: var(--el-color-primary-light-8);
+  --el-button-hover-border-color: var(--el-color-primary-light-5);
+}
+
+.todo-action-btn--warning {
+  --el-button-text-color: var(--el-color-warning);
+  --el-button-border-color: var(--el-color-warning-light-5);
+  --el-button-bg-color: var(--el-color-warning-light-9);
+  --el-button-hover-bg-color: var(--el-color-warning-light-8);
+  --el-button-hover-border-color: var(--el-color-warning-light-5);
+}
+
+html.dark {
+  .todo-action-btn {
+    --el-button-bg-color: rgba(148, 163, 184, 0.12);
+    --el-button-border-color: rgba(148, 163, 184, 0.3);
+    --el-button-text-color: var(--el-text-color-regular);
+    --el-button-hover-bg-color: rgba(148, 163, 184, 0.2);
+    --el-button-hover-border-color: rgba(148, 163, 184, 0.45);
+  }
+
+  .todo-action-btn--primary {
+    --el-button-bg-color: rgba(99, 113, 150, 0.14);
+    --el-button-border-color: rgba(99, 113, 150, 0.45);
+    --el-button-text-color: #c4cfdd;
+    --el-button-hover-bg-color: rgba(99, 113, 150, 0.22);
+    --el-button-hover-border-color: rgba(99, 113, 150, 0.65);
+  }
+
+  .todo-action-btn--warning {
+    --el-button-bg-color: rgba(214, 149, 59, 0.16);
+    --el-button-border-color: rgba(214, 149, 59, 0.55);
+    --el-button-text-color: #ffe6bb;
+    --el-button-hover-bg-color: rgba(214, 149, 59, 0.24);
+    --el-button-hover-border-color: rgba(214, 149, 59, 0.75);
+  }
+}
+</style>
diff --git a/src/views/workflow/task/myDocument.vue b/src/views/workflow/task/myDocument.vue
new file mode 100644
index 0000000..4fa83cf
--- /dev/null
+++ b/src/views/workflow/task/myDocument.vue
@@ -0,0 +1,290 @@
+<template>
+  <div class="p-2 app-container workflow-my-document-page">
+    <el-row :gutter="20" class="content-grid">
+      <!-- 流程分类树 -->
+      <tree-panel
+        ref="treePanelRef"
+        v-model:collapsed="treeCollapsed"
+        title="流程分类"
+        placeholder="请输入流程分类名"
+        :data="categoryOptions"
+        :expanded-span="4"
+        filter-field="categoryName"
+        @node-click="handleNodeClick"
+      />
+      <el-col
+        :lg="treeCollapsed ? 23 : 20"
+        :xs="24"
+        class="tree-content-col content-main"
+        :class="{ 'is-tree-collapsed': treeCollapsed }"
+      >
+        <div class="search-wrap">
+          <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+            <template #header>
+              <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+                <div><h3>筛选条件</h3></div>
+              </div>
+            </template>
+            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px" class="query-form">
+              <el-form-item label="流程定义编码" prop="flowCode">
+                <el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </div>
+        <el-card shadow="hover" class="table-panel">
+          <template #header>
+            <div class="toolbar-shell">
+              <div class="table-heading">
+                <h3>我的单据</h3>
+              </div>
+              <div class="toolbar-actions">
+                <right-toolbar
+                  v-model:show-search="showSearch"
+                  :search="false"
+                  @query-table="handleQuery"
+                ></right-toolbar>
+              </div>
+            </div>
+          </template>
+
+          <el-table
+            v-loading="loading"
+            border
+            class="data-table"
+            :data="processInstanceList"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+            <el-table-column v-if="false" align="center" prop="id" label="id"></el-table-column>
+            <el-table-column
+              :show-overflow-tooltip="true"
+              prop="flowName"
+              align="center"
+              label="流程定义名称"
+            ></el-table-column>
+            <el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
+            <el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
+            <el-table-column align="center" prop="version" label="版本号" width="90">
+              <template #default="scope">v{{ scope.row.version }}.0</template>
+            </el-table-column>
+            <el-table-column v-if="tab === 'running'" align="center" prop="isSuspended" label="状态" min-width="70">
+              <template #default="scope">
+                <el-tag v-if="!scope.row.isSuspended" type="success">激活</el-tag>
+                <el-tag v-else type="danger">挂起</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="流程状态" min-width="70">
+              <template #default="scope">
+                <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="createTime" label="启动时间" width="160"></el-table-column>
+            <el-table-column label="操作" align="center" width="162">
+              <template #default="scope">
+                <el-row :gutter="10" class="mb8">
+                  <el-col
+                    :span="1.5"
+                    v-if="
+                      scope.row.flowStatus === 'draft' ||
+                      scope.row.flowStatus === 'cancel' ||
+                      scope.row.flowStatus === 'back'
+                    "
+                  >
+                    <el-button type="primary" size="small" icon="Edit" @click="handleOpen(scope.row, 'update')">
+                      编辑
+                    </el-button>
+                  </el-col>
+                  <el-col
+                    :span="1.5"
+                    v-if="
+                      scope.row.flowStatus === 'draft' ||
+                      scope.row.flowStatus === 'cancel' ||
+                      scope.row.flowStatus === 'back'
+                    "
+                  >
+                    <el-button type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">
+                      删除
+                    </el-button>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="1.5">
+                    <el-button type="primary" size="small" icon="View" @click="handleOpen(scope.row, 'view')">
+                      查看
+                    </el-button>
+                  </el-col>
+                  <el-col :span="1.5" v-if="scope.row.flowStatus === 'waiting'">
+                    <el-button
+                      type="primary"
+                      size="small"
+                      icon="Notification"
+                      @click="handleCancelProcessApply(scope.row.businessId)"
+                    >
+                      撤销
+                    </el-button>
+                  </el-col>
+                </el-row>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            v-show="total > 0"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            :total="total"
+            @pagination="getList"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 提交组件 -->
+    <submitVerify ref="submitVerifyRef" @submit-callback="getList" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { categoryTree } from '@/api/workflow/category';
+import { CategoryTreeVO } from '@/api/workflow/category/types';
+import { pageByCurrent, deleteByInstanceIds, cancelProcessApply } from '@/api/workflow/instance';
+import { FlowInstanceQuery, FlowInstanceVO } from '@/api/workflow/instance/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import TreePanel from '@/components/TreePanel/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useTreeCollapsed } from '@/hooks/tree/useTreeCollapsed';
+import modal from '@/plugins/modal';
+import { useDict } from '@/utils/dict';
+
+const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
+const queryFormRef = ref<ElFormInstance>();
+
+const { loading, setLoading, withLoading } = useLoading(true);
+const {
+  ids: instanceIds,
+  single,
+  multiple,
+  handleSelectionChange
+} = useTableSelection<FlowInstanceVO>(item => item.id);
+const { showSearch } = useSearchToggle();
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const processInstanceList = ref<FlowInstanceVO[]>([]);
+
+const categoryOptions = ref<CategoryTreeVO[]>([]);
+const { treeCollapsed } = useTreeCollapsed();
+
+const tab = ref('running');
+// 查询参数
+const queryParams = ref<FlowInstanceQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  flowCode: undefined,
+  category: undefined
+});
+
+onMounted(() => {
+  getList();
+  getTreeselect();
+});
+
+/** 节点单击事件 */
+const handleNodeClick = (data: CategoryTreeVO) => {
+  queryParams.value.category = data.id;
+  if (data.id === '0') {
+    queryParams.value.category = '';
+  }
+  handleQuery();
+};
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await categoryTree();
+  categoryOptions.value = res.data;
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.category = '';
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+//分页
+const getList = () => {
+  withLoading(async () => {
+    const resp = await pageByCurrent(queryParams.value);
+    processInstanceList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row: Partial<FlowInstanceVO>) => {
+  const instanceIdList = row.id || instanceIds.value;
+  await modal.confirm('是否确认删除？');
+  setLoading(true);
+  if ('running' === tab.value) {
+    await deleteByInstanceIds(instanceIdList).finally(() => setLoading(false));
+    getList();
+  }
+  modal.msgSuccess('删除成功');
+};
+
+/** 撤销按钮操作 */
+const handleCancelProcessApply = async (businessId: string) => {
+  await modal.confirm('是否确认撤销当前单据？');
+  setLoading(true);
+  if ('running' === tab.value) {
+    const data = {
+      businessId: businessId,
+      message: '申请人撤销流程！'
+    };
+    await cancelProcessApply(data).finally(() => setLoading(false));
+    getList();
+  }
+  modal.msgSuccess('撤销成功');
+};
+
+//办理
+const handleOpen = async (row, type) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: type,
+    formCustom: row.formCustom,
+    formPath: row.formPath
+  });
+  workflowCommon.routerJump(routerJumpVo);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles/components/page-shell' as pageShell;
+
+@include pageShell.tree-table-crud-page;
+
+.content-main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>
diff --git a/src/views/workflow/task/taskCopyList.vue b/src/views/workflow/task/taskCopyList.vue
new file mode 100644
index 0000000..de023c1
--- /dev/null
+++ b/src/views/workflow/task/taskCopyList.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="p-2 app-container workflow-task-copy-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item label="任务名称" prop="nodeName">
+            <el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="流程定义名称" label-width="100" prop="flowName">
+            <el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="流程定义编码" label-width="100" prop="flowCode">
+            <el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>抄送任务</h3>
+          </div>
+          <div class="toolbar-actions">
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="handleQuery"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        border
+        class="data-table"
+        :data="taskList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          prop="businessCode"
+          align="center"
+          label="业务编码"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          prop="businessTitle"
+          align="center"
+          label="业务标题"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          prop="flowName"
+          align="center"
+          label="流程定义名称"
+        ></el-table-column>
+        <el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
+        <el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
+        <el-table-column align="center" prop="version" label="版本号" width="90">
+          <template #default="scope">v{{ scope.row.version }}.0</template>
+        </el-table-column>
+        <el-table-column align="center" prop="nodeName" label="任务名称"></el-table-column>
+        <el-table-column align="center" label="流程状态" min-width="70">
+          <template #default="scope">
+            <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="200">
+          <template #default="scope">
+            <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="handleQuery"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { pageByTaskCopy } from '@/api/workflow/task';
+import { TaskQuery } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useDict } from '@/utils/dict';
+
+const queryFormRef = ref<ElFormInstance>();
+const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
+const { loading, withLoading } = useLoading(true);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<any>(item => item.id);
+const { showSearch } = useSearchToggle();
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  nodeName: undefined,
+  flowName: undefined,
+  flowCode: undefined
+});
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  afterReset: () => {
+    handleQuery();
+  }
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getTaskCopyList();
+};
+//分页
+const getTaskCopyList = () => {
+  withLoading(async () => {
+    const resp = await pageByTaskCopy(queryParams.value);
+    taskList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
+};
+
+/** 查看按钮操作 */
+const handleView = row => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: 'view',
+    formCustom: row.formCustom,
+    formPath: row.formPath
+  });
+  workflowCommon.routerJump(routerJumpVo);
+};
+
+onMounted(() => {
+  getTaskCopyList();
+});
+</script>
diff --git a/src/views/workflow/task/taskFinish.vue b/src/views/workflow/task/taskFinish.vue
new file mode 100644
index 0000000..6878e0b
--- /dev/null
+++ b/src/views/workflow/task/taskFinish.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="p-2 app-container workflow-task-finish-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item>
+            <el-badge :value="userSelectCount" :max="10" class="item">
+              <el-button type="primary" @click="openUserSelect">选择申请人</el-button>
+            </el-badge>
+          </el-form-item>
+          <el-form-item label="任务名称" prop="nodeName">
+            <el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="流程定义名称" label-width="100" prop="flowName">
+            <el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="流程定义编码" label-width="100" prop="flowCode">
+            <el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>已办任务</h3>
+          </div>
+          <div class="toolbar-actions">
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="handleQuery"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        border
+        class="data-table"
+        :data="taskList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          prop="businessCode"
+          align="center"
+          label="业务编码"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          prop="businessTitle"
+          align="center"
+          label="业务标题"
+        ></el-table-column>
+        <el-table-column align="center" prop="flowName" width="120" label="流程定义名称"></el-table-column>
+        <el-table-column align="center" prop="flowCode" width="120" label="流程定义编码"></el-table-column>
+        <el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
+        <el-table-column align="center" prop="version" label="版本号" width="90">
+          <template #default="scope">v{{ scope.row.version }}.0</template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          prop="nodeName"
+          :show-overflow-tooltip="true"
+          label="任务名称"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          prop="createByName"
+          :show-overflow-tooltip="true"
+          label="申请人"
+        ></el-table-column>
+        <el-table-column align="center" prop="approverName" label="办理人" min-width="180">
+          <template #default="scope">
+            <UserNameDisplay :content="scope.row.approverName" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="流程状态" prop="flowStatus" min-width="80">
+          <template #default="scope">
+            <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="任务状态" prop="flowTaskStatus" min-width="80">
+          <template #default="scope">
+            <dict-tag :options="wf_task_status" :value="scope.row.flowTaskStatus"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          prop="createTime"
+          label="创建时间"
+          :show-overflow-tooltip="true"
+          width="150"
+        ></el-table-column>
+        <el-table-column label="操作" align="center" width="200">
+          <template #default="scope">
+            <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="handleQuery"
+      />
+    </el-card>
+    <!-- 申请人 -->
+    <UserSelect
+      ref="userSelectRef"
+      :multiple="true"
+      :data="selectUserIds"
+      @confirm-call-back="userSelectCallBack"
+    ></UserSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UserVO } from '@/api/system/user/types';
+import { pageByTaskFinish } from '@/api/workflow/task';
+import { TaskQuery, FlowTaskVO } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import UserNameDisplay from '@/components/Process/UserNameDisplay.vue';
+import UserSelect from '@/components/UserSelect/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useDict } from '@/utils/dict';
+
+const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
+const { wf_task_status } = toRefs<any>(useDict('wf_task_status'));
+
+const queryFormRef = ref<ElFormInstance>();
+
+const userSelectRef = ref<InstanceType<typeof UserSelect>>();
+const { loading, withLoading } = useLoading(true);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<any>(item => item.id);
+const { showSearch } = useSearchToggle();
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  nodeName: undefined,
+  flowName: undefined,
+  flowCode: undefined,
+  createByIds: []
+});
+//申请人id
+const selectUserIds = ref<Array<number | string>>([]);
+//申请人选择数量
+const userSelectCount = ref(0);
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.createByIds = [];
+    userSelectCount.value = 0;
+    selectUserIds.value = [];
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getFinishList();
+};
+const getFinishList = () => {
+  withLoading(async () => {
+    const resp = await pageByTaskFinish(queryParams.value);
+    taskList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
+};
+/** 查看按钮操作 */
+const handleView = (row: Partial<FlowTaskVO>) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: 'view',
+    formCustom: row.formCustom,
+    formPath: row.formPath
+  });
+  workflowCommon.routerJump(routerJumpVo);
+};
+//打开申请人选择
+const openUserSelect = () => {
+  userSelectRef.value.open();
+};
+//确认选择申请人
+const userSelectCallBack = (data: UserVO[]) => {
+  userSelectCount.value = 0;
+  selectUserIds.value = [];
+  queryParams.value.createByIds = [];
+
+  if (data && data.length > 0) {
+    userSelectCount.value = data.length;
+    selectUserIds.value = data.map(item => item.userId);
+    queryParams.value.createByIds = selectUserIds.value;
+  }
+};
+onMounted(() => {
+  getFinishList();
+});
+</script>
diff --git a/src/views/workflow/task/taskWaiting.vue b/src/views/workflow/task/taskWaiting.vue
new file mode 100644
index 0000000..b545fff
--- /dev/null
+++ b/src/views/workflow/task/taskWaiting.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="p-2 app-container workflow-task-waiting-page">
+    <div class="search-wrap">
+      <el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
+        <template #header>
+          <div class="panel-heading search-panel-toggle" @click.stop="showSearch = !showSearch">
+            <div><h3>筛选条件</h3></div>
+          </div>
+        </template>
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
+          <el-form-item>
+            <el-badge :value="userSelectCount" :max="10" class="item">
+              <el-button type="primary" @click="openUserSelect">选择申请人</el-button>
+            </el-badge>
+          </el-form-item>
+          <el-form-item label="任务名称" prop="nodeName">
+            <el-input v-model="queryParams.nodeName" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="流程定义名称" label-width="100" prop="flowName">
+            <el-input v-model="queryParams.flowName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="流程定义编码" label-width="100" prop="flowCode">
+            <el-input v-model="queryParams.flowCode" placeholder="请输入流程定义编码" @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card shadow="hover" class="table-panel">
+      <template #header>
+        <div class="toolbar-shell">
+          <div class="table-heading">
+            <h3>待办任务</h3>
+          </div>
+          <div class="toolbar-actions">
+            <right-toolbar v-model:show-search="showSearch" :search="false" @query-table="handleQuery"></right-toolbar>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        border
+        class="data-table"
+        :data="taskList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          prop="businessCode"
+          align="center"
+          label="业务编码"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          prop="businessTitle"
+          align="center"
+          label="业务标题"
+        ></el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          prop="flowName"
+          align="center"
+          label="流程定义名称"
+        ></el-table-column>
+        <el-table-column align="center" prop="flowCode" label="流程定义编码"></el-table-column>
+        <el-table-column align="center" prop="categoryName" label="流程分类"></el-table-column>
+        <el-table-column align="center" prop="nodeName" label="任务名称"></el-table-column>
+        <el-table-column align="center" prop="createByName" label="申请人"></el-table-column>
+        <el-table-column align="center" label="办理人" min-width="180">
+          <template #default="scope">
+            <UserNameDisplay :content="scope.row.assigneeNames" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="流程状态" prop="flowStatusName" min-width="70">
+          <template #default="scope">
+            <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
+        <el-table-column label="操作" align="center" width="200">
+          <template #default="scope">
+            <el-button type="primary" size="small" icon="Edit" @click="handleOpen(scope.row)">办理</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        :total="total"
+        @pagination="handleQuery"
+      />
+    </el-card>
+    <!-- 申请人 -->
+    <UserSelect
+      ref="userSelectRef"
+      :multiple="true"
+      :data="selectUserIds"
+      @confirm-call-back="userSelectCallBack"
+    ></UserSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UserVO } from '@/api/system/user/types';
+import { pageByTaskWait } from '@/api/workflow/task';
+import { TaskQuery, FlowTaskVO } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import UserNameDisplay from '@/components/Process/UserNameDisplay.vue';
+import UserSelect from '@/components/UserSelect/index.vue';
+import { useLoading } from '@/hooks/async/useLoading';
+import { useSearchReset } from '@/hooks/form/useSearchReset';
+import { useSearchToggle } from '@/hooks/form/useSearchToggle';
+import { useTableSelection } from '@/hooks/table/useTableSelection';
+import { useDict } from '@/utils/dict';
+
+const { wf_business_status } = toRefs<any>(useDict('wf_business_status'));
+
+const userSelectRef = ref<InstanceType<typeof UserSelect>>();
+//提交组件
+const queryFormRef = ref<ElFormInstance>();
+const { loading, withLoading } = useLoading(true);
+const { ids, single, multiple, handleSelectionChange } = useTableSelection<any>(item => item.id);
+const { showSearch } = useSearchToggle();
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+
+//申请人id
+const selectUserIds = ref<Array<number | string>>([]);
+//申请人选择数量
+const userSelectCount = ref(0);
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  nodeName: undefined,
+  flowName: undefined,
+  flowCode: undefined,
+  createByIds: []
+});
+const { resetQuery } = useSearchReset({
+  queryFormRef,
+  queryParams,
+  pageNumKey: 'pageNum',
+  pageSizeKey: 'pageSize',
+  initialPageSize: 10,
+  resetExtras: () => {
+    queryParams.value.createByIds = [];
+    userSelectCount.value = 0;
+    selectUserIds.value = [];
+  },
+  afterReset: () => {
+    handleQuery();
+  }
+});
+onMounted(() => {
+  getWaitingList();
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getWaitingList();
+};
+//分页
+const getWaitingList = () => {
+  withLoading(async () => {
+    const resp = await pageByTaskWait(queryParams.value);
+    taskList.value = resp.data?.rows;
+    total.value = resp.data?.total;
+  });
+};
+//办理
+const handleOpen = async (row: Partial<FlowTaskVO>) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    businessId: row.businessId,
+    taskId: row.id,
+    type: 'approval',
+    formCustom: row.formCustom,
+    formPath: row.formPath
+  });
+  workflowCommon.routerJump(routerJumpVo);
+};
+//打开申请人选择
+const openUserSelect = () => {
+  userSelectRef.value.open();
+};
+//确认选择申请人
+const userSelectCallBack = (data: UserVO[]) => {
+  userSelectCount.value = 0;
+  selectUserIds.value = [];
+  queryParams.value.createByIds = [];
+
+  if (data && data.length > 0) {
+    userSelectCount.value = data.length;
+    selectUserIds.value = data.map(item => item.userId);
+    queryParams.value.createByIds = selectUserIds.value;
+  }
+};
+</script>
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..9c3fdc1
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    // This setting lets you specify a file for storing incremental compilation information as a part of composite projects which enables faster building of larger TypeScript codebases.
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
+    "strict": true,
+    "allowJs": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["node", "vite/client"],
+    // 自定义配置
+    "noImplicitAny": false, // 禁用 隐式的any错误
+    "removeComments": true, // 移除 ts注释
+    "experimentalDecorators": true, // 启用实验性的装饰器支持
+    "strictFunctionTypes": false, // 禁用严格函数类型检查
+    "strictNullChecks": false, // 禁用严格的空值检查
+    "allowSyntheticDefaultImports": true, // 允许默认导入
+    "forceConsistentCasingInFileNames": true // 强制在文件名中使用一致的大小写
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts", "vitest.config.ts", "src/**/*.d.ts"],
+  "exclude": ["node_modules", "dist", "src/**/__tests__/*"]
+}
diff --git a/uno.config.ts b/uno.config.ts
new file mode 100644
index 0000000..f7bc7de
--- /dev/null
+++ b/uno.config.ts
@@ -0,0 +1,31 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetWind3,
+  presetTypography,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup
+} from 'unocss';
+
+export default defineConfig({
+  shortcuts: {
+    'panel-title':
+      'pb-[5px] font-sans leading-[1.1] font-medium text-base text-[#6379bb] border-b border-b-solid border-[var(--el-border-color-light)] mb-5 mt-0'
+  },
+  theme: {
+    colors: {
+      primary: 'var(--el-color-primary)',
+      primary_dark: 'var(--el-color-primary-light-5)'
+    }
+  },
+  presets: [
+    presetWind3(),
+    presetAttributify(),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {}
+    })
+  ],
+  transformers: [transformerDirectives(), transformerVariantGroup()]
+});
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..4c167e6
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,63 @@
+import { defineConfig, loadEnv } from 'vite';
+import createPlugins from './vite/plugins/index.js';
+import autoprefixer from 'autoprefixer'; // css自动添加兼容性前缀
+
+export default defineConfig(({ mode, command }) => {
+  const env = loadEnv(mode, process.cwd());
+  return {
+    // 部署生产环境和开发环境下的URL。
+    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
+    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
+    base: env.VITE_APP_CONTEXT_PATH,
+    resolve: {
+      tsconfigPaths: true,
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+    },
+    // https://cn.vitejs.dev/config/#resolve-extensions
+    plugins: createPlugins(env, command === 'build'),
+    build: {
+      chunkSizeWarningLimit: 1500,
+      rolldownOptions: {
+        checks: {
+          invalidAnnotation: false,
+          pluginTimings: false
+        }
+      }
+    },
+    server: {
+      host: '0.0.0.0',
+      port: Number(env.VITE_APP_PORT),
+      open: true,
+      proxy: {
+        [env.VITE_APP_BASE_API]: {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+          ws: true,
+          rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
+        }
+      }
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          // additionalData: '@use "@/assets/styles/variables.module.scss as *";'
+          // javascriptEnabled: true
+        }
+      },
+      postcss: {
+        plugins: [
+          // 浏览器兼容性
+          autoprefixer(),
+          {
+            postcssPlugin: 'internal:charset-removal',
+            AtRule: {
+              charset: atRule => {
+                atRule.remove();
+              }
+            }
+          }
+        ]
+      }
+    }
+  };
+});
diff --git a/vite/plugins/auto-import.ts b/vite/plugins/auto-import.ts
new file mode 100644
index 0000000..5b4d1a2
--- /dev/null
+++ b/vite/plugins/auto-import.ts
@@ -0,0 +1,18 @@
+import AutoImport from 'unplugin-auto-import/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+import { resolve } from 'path';
+
+export default () => {
+  return AutoImport({
+    // 自动导入 Vue 相关函数
+    imports: ['vue', 'vue-router', '@vueuse/core', 'pinia'],
+    resolvers: [
+      // 自动导入 Element Plus 相关函数ElMessage, ElMessageBox... (带样式)
+      ElementPlusResolver({
+        importStyle: false
+      })
+    ],
+    vueTemplate: true, // 是否在 vue 模板中自动导入
+    dts: resolve(import.meta.dirname, '../../src/types/auto-imports.d.ts')
+  });
+};
diff --git a/vite/plugins/check-transition.ts b/vite/plugins/check-transition.ts
new file mode 100644
index 0000000..5e54af8
--- /dev/null
+++ b/vite/plugins/check-transition.ts
@@ -0,0 +1,117 @@
+import type { PluginOption } from 'vite';
+
+import { normalizePath } from 'vite';
+import { parse } from 'vue/compiler-sfc';
+
+/** 模板 AST 元素节点类型 */
+const NODE_TYPE_ELEMENT = 1;
+/** 模板 AST 注释节点类型 */
+const NODE_TYPE_COMMENT = 3;
+/** 模板 AST 指令属性类型 */
+const NODE_TYPE_DIRECTIVE = 7;
+
+/**
+ * 判断节点是否为元素节点
+ */
+function isElement(node: any): boolean {
+  return node?.type === NODE_TYPE_ELEMENT;
+}
+
+/**
+ * 判断节点是否为注释节点
+ * @description 注释节点同样是 transition 的一个子节点，会导致多节点
+ */
+function isComment(node: any): boolean {
+  return node?.type === NODE_TYPE_COMMENT;
+}
+
+/**
+ * 节点用于报错展示的标签文本
+ */
+function nodeLabel(node: any): string {
+  return isComment(node) ? '<!--注释-->' : `<${node.tag}>`;
+}
+
+/**
+ * 判断元素是否带有指定指令（如 v-if / v-else-if / v-else）
+ */
+function hasDirective(node: any, name: string): boolean {
+  return (node.props || []).some(
+    (prop: any) => prop.type === NODE_TYPE_DIRECTIVE && prop.name === name,
+  );
+}
+
+/**
+ * 判断多个元素子节点是否构成合法的 v-if / v-else-if / v-else 分支链
+ * @description 分支链任意时刻只渲染一个节点，对外层 transition 是合法的
+ */
+function isConditionalChain(elements: any[]): boolean {
+  // 首个节点必须是 v-if，后续节点必须都是 v-else-if 或 v-else
+  if (!hasDirective(elements[0], 'if')) {
+    return false;
+  }
+  return elements
+    .slice(1)
+    .every((el) => hasDirective(el, 'else-if') || hasDirective(el, 'else'));
+}
+
+/**
+ * 检测页面模板根节点是否存在多标签的 vite 插件
+ * @description 外层路由/页面切换已用 <transition> 包裹，每个页面即为 transition 的子节点。
+ * Vue 的 <transition> 只能管理单个子节点，因此页面模板出现多个根节点会导致过渡失效。
+ * 该插件在编译 src/views 下的页面时检测此类写法并直接报错。
+ */
+export const viteCheckTransitionPlugin = (): PluginOption => {
+  // 仅检测 views 目录下的页面
+  const targetDir = normalizePath('/src/views/');
+
+  return {
+    enforce: 'pre',
+    name: 'vite:check-transition',
+    transform(code, id) {
+      const normalizedId = normalizePath(id);
+
+      // 跳过非 views 下的文件、非 .vue 文件以及带 query 的子请求
+      if (
+        normalizedId.includes('?') ||
+        !normalizedId.endsWith('.vue') ||
+        !normalizedId.includes(targetDir)
+      ) {
+        return null;
+      }
+
+      const { descriptor, errors: parseErrors } = parse(code, {
+        filename: id,
+      });
+
+      // 解析失败交由 vue 插件处理，这里不重复报错
+      if (parseErrors.length > 0 || !descriptor.template?.ast) {
+        return null;
+      }
+
+      // 统计根级元素节点与注释节点，二者都是 transition 的子节点，忽略空白文本
+      const rootNodes = (descriptor.template.ast.children || []).filter(
+        (child: any) => isElement(child) || isComment(child),
+      );
+
+      // 仅元素节点参与 v-if 分支链判断（注释不属于分支链）
+      const rootElements = rootNodes.filter((node: any) => isElement(node));
+      const isChain =
+        rootNodes.length === rootElements.length &&
+        isConditionalChain(rootElements);
+
+      if (rootNodes.length > 1 && !isChain) {
+        const relativePath = normalizedId.slice(
+          normalizedId.indexOf('/src/') + 1,
+        );
+        const tags = rootNodes.map((node: any) => nodeLabel(node)).join(' ');
+
+        throw new Error(
+          `[check-transition] ${relativePath} 存在多个根节点: ${tags}\n  页面外层已包裹 <transition>，模板必须只有单个根节点，请用一个容器元素(如 div)包裹，并删除多余的注释/空标签。`,
+        );
+      }
+
+      return null;
+    },
+  };
+};
diff --git a/vite/plugins/components.ts b/vite/plugins/components.ts
new file mode 100644
index 0000000..36bcda6
--- /dev/null
+++ b/vite/plugins/components.ts
@@ -0,0 +1,15 @@
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+import { resolve } from 'path';
+
+export default () => {
+  return Components({
+    resolvers: [
+      // 自动导入 Element Plus 组件
+      ElementPlusResolver({
+        importStyle: false
+      })
+    ],
+    dts: resolve(import.meta.dirname, '../../src/types/components.d.ts')
+  });
+};
diff --git a/vite/plugins/compression.ts b/vite/plugins/compression.ts
new file mode 100644
index 0000000..8305a52
--- /dev/null
+++ b/vite/plugins/compression.ts
@@ -0,0 +1,112 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import zlib from 'zlib';
+import { promisify } from 'util';
+import type { Plugin, ResolvedConfig } from 'vite';
+
+const gzip = promisify(zlib.gzip);
+const brotliCompress = promisify(zlib.brotliCompress);
+const compressibleFileRE = /\.(js|mjs|json|css|html)$/i;
+const defaultThreshold = 1025;
+
+type CompressionKind = 'gzip' | 'brotli';
+
+const compressionHandlers: Record<CompressionKind, { ext: string; compress: (content: Buffer) => Promise<Buffer> }> = {
+  gzip: {
+    ext: '.gz',
+    compress: content => gzip(content, { level: zlib.constants.Z_BEST_COMPRESSION })
+  },
+  brotli: {
+    ext: '.br',
+    compress: content =>
+      brotliCompress(content, {
+        params: {
+          [zlib.constants.BROTLI_PARAM_QUALITY]: zlib.constants.BROTLI_MAX_QUALITY,
+          [zlib.constants.BROTLI_PARAM_MODE]: zlib.constants.BROTLI_MODE_TEXT
+        }
+      })
+  }
+};
+
+async function collectFiles(rootDir: string): Promise<string[]> {
+  const entries = await fs.readdir(rootDir, { withFileTypes: true });
+  const files = await Promise.all(
+    entries.map(async entry => {
+      const fullPath = path.join(rootDir, entry.name);
+      if (entry.isDirectory()) {
+        return collectFiles(fullPath);
+      }
+      return compressibleFileRE.test(entry.name) ? [fullPath] : [];
+    })
+  );
+  return files.flat();
+}
+
+function createCompressionPlugin(kind: CompressionKind): Plugin {
+  const handler = compressionHandlers[kind];
+  let config: ResolvedConfig | undefined;
+
+  return {
+    name: `local:compression:${kind}`,
+    apply: 'build',
+    enforce: 'post',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    async closeBundle() {
+      const outputDir = path.resolve(process.cwd(), config?.build.outDir ?? 'dist');
+      const files = await collectFiles(outputDir);
+      const compressedEntries: Array<{ file: string; originalKb: string; compressedKb: string }> = [];
+
+      await Promise.all(
+        files.map(async filePath => {
+          const stat = await fs.stat(filePath);
+          if (stat.size < defaultThreshold) {
+            return;
+          }
+
+          const content = await fs.readFile(filePath);
+          const compressed = await handler.compress(content);
+          const outputFile = `${filePath}${handler.ext}`;
+
+          await fs.writeFile(outputFile, compressed);
+          compressedEntries.push({
+            file: path.relative(outputDir, outputFile).replaceAll('\\', '/'),
+            originalKb: (stat.size / 1024).toFixed(2),
+            compressedKb: (compressed.byteLength / 1024).toFixed(2)
+          });
+        })
+      );
+
+      if (!compressedEntries.length) {
+        return;
+      }
+
+      compressedEntries.sort((a, b) => a.file.localeCompare(b.file));
+      config?.logger.info(`\n[compression:${kind}] generated ${compressedEntries.length} files`);
+      for (const entry of compressedEntries) {
+        config?.logger.info(
+          `${path.basename(outputDir)}/${entry.file} ${entry.originalKb}kb -> ${entry.compressedKb}kb`
+        );
+      }
+      config?.logger.info('');
+    }
+  };
+}
+
+export default (env: Record<string, string>) => {
+  const { VITE_BUILD_COMPRESS } = env;
+  const plugins: Plugin[] = [];
+  if (!VITE_BUILD_COMPRESS) {
+    return plugins;
+  }
+
+  const compressionList = VITE_BUILD_COMPRESS.split(',').map(item => item.trim()) as CompressionKind[];
+  if (compressionList.includes('gzip')) {
+    plugins.push(createCompressionPlugin('gzip'));
+  }
+  if (compressionList.includes('brotli')) {
+    plugins.push(createCompressionPlugin('brotli'));
+  }
+  return plugins;
+};
diff --git a/vite/plugins/index.ts b/vite/plugins/index.ts
new file mode 100644
index 0000000..c080b07
--- /dev/null
+++ b/vite/plugins/index.ts
@@ -0,0 +1,22 @@
+import vue from '@vitejs/plugin-vue';
+
+import createUnoCss from './unocss.js';
+import createAutoImport from './auto-import.js';
+import createComponents from './components.js';
+import createSvgIconsPlugin from './svg-icon.js';
+import createCompression from './compression.js';
+import createSetupExtend from './setup-extend.js';
+import { viteCheckTransitionPlugin } from './check-transition.js';
+
+export default (viteEnv: any, isBuild = false): [] => {
+  const vitePlugins: any = [];
+  vitePlugins.push(vue());
+  vitePlugins.push(createUnoCss());
+  vitePlugins.push(createAutoImport());
+  vitePlugins.push(createComponents());
+  vitePlugins.push(createCompression(viteEnv));
+  vitePlugins.push(createSvgIconsPlugin());
+  vitePlugins.push(createSetupExtend());
+  vitePlugins.push(viteCheckTransitionPlugin())
+  return vitePlugins;
+};
diff --git a/vite/plugins/setup-extend.ts b/vite/plugins/setup-extend.ts
new file mode 100644
index 0000000..ed3423f
--- /dev/null
+++ b/vite/plugins/setup-extend.ts
@@ -0,0 +1,5 @@
+import setupExtend from 'unplugin-vue-setup-extend-plus/vite';
+
+export default () => {
+  return setupExtend({});
+};
diff --git a/vite/plugins/svg-icon.ts b/vite/plugins/svg-icon.ts
new file mode 100644
index 0000000..17c0cca
--- /dev/null
+++ b/vite/plugins/svg-icon.ts
@@ -0,0 +1,11 @@
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons-ng';
+import { resolve } from 'path';
+
+export default () => {
+  return createSvgIconsPlugin({
+    // 指定需要缓存的图标文件夹
+    iconDirs: [resolve(import.meta.dirname, '../../src/assets/icons/svg')],
+    // 指定symbolId格式
+    symbolId: 'icon-[dir]-[name]'
+  });
+};
diff --git a/vite/plugins/unocss.ts b/vite/plugins/unocss.ts
new file mode 100644
index 0000000..08e186b
--- /dev/null
+++ b/vite/plugins/unocss.ts
@@ -0,0 +1,7 @@
+import UnoCss from 'unocss/vite';
+
+export default () => {
+  return UnoCss({
+    hmrTopLevelAwait: false // unocss默认是true，低版本浏览器是不支持的，启动后会报错
+  });
+};