diff --git a/.env.development b/.env.development
index 7edd98a2396a70361ec9b1bc654c55a3aae9ad69..e1f7af614c853e13e110f6adf94d08e44dca9d31 100644
--- a/.env.development
+++ b/.env.development
@@ -13,11 +13,13 @@ VITE_APP_CONTEXT_PATH = '/'
 # 监控地址
 VITE_APP_MONITRO_ADMIN = 'http://localhost:9090/admin/applications'
 
-# powerjob 控制台地址
-VITE_APP_POWERJOB_ADMIN = 'http://localhost:7700/'
+# SnailJob 控制台地址
+VITE_APP_SNAILJOB_ADMIN = 'http://localhost:8800/snail-job'
 
 VITE_APP_PORT = 80
 
+# 接口加密功能开关(如需关闭 后端也必须对应关闭)
+VITE_APP_ENCRYPT = true
 # 接口加密传输 RSA 公钥与后端解密私钥对应 如更换需前后端一同更换
 VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
 # 接口响应解密 RSA 私钥与后端加密公钥对应 如更换需前后端一同更换
@@ -26,5 +28,5 @@ VITE_APP_RSA_PRIVATE_KEY = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAmc3C
 # 客户端id
 VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
 
-# websocket 开关(开发环境默认关闭ws 因vite的bug导致如ws无法连接则会崩溃)
-VITE_APP_WEBSOCKET = false
+# websocket 开关
+VITE_APP_WEBSOCKET = true
diff --git a/.env.production b/.env.production
index 0e3b9fc5282a6c242948fa75356ec1b942e07901..2700ee0ddd0ccab7af61255695ecb8ce405dcb2f 100644
--- a/.env.production
+++ b/.env.production
@@ -10,8 +10,8 @@ VITE_APP_CONTEXT_PATH = '/'
 # 监控地址
 VITE_APP_MONITRO_ADMIN = '/admin/applications'
 
-# powerjob 控制台地址
-VITE_APP_POWERJOB_ADMIN = '/powerjob'
+# SnailJob 控制台地址
+VITE_APP_SNAILJOB_ADMIN = 'http://localhost:8800/snail-job'
 
 # 生产环境
 VITE_APP_BASE_API = '/prod-api'
@@ -21,6 +21,8 @@ VITE_BUILD_COMPRESS = gzip
 
 VITE_APP_PORT = 80
 
+# 接口加密功能开关(如需关闭 后端也必须对应关闭)
+VITE_APP_ENCRYPT = true
 # 接口加密传输 RSA 公钥与后端解密私钥对应 如更换需前后端一同更换
 VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
 # 接口响应解密 RSA 私钥与后端加密公钥对应 如更换需前后端一同更换
diff --git a/.eslintignore b/.eslintignore
index c4d771a13f37a416c0ca5a57778945e5802d7b08..e74db40bfcd94e703617d0de83d00b004ab7132a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -11,7 +11,7 @@ dist
 .husky
 .local
 /bin
-.eslintrc.js
+.eslintrc.cjs
 prettier.config.js
 src/assets
-tailwind.config.js
\ No newline at end of file
+tailwind.config.js
diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 65%
rename from .eslintrc.js
rename to .eslintrc.cjs
index a1b32e3987b7595620506444b2204e11ee1b72a5..6042c39be0864a75105eabc787224abee03a6e41 100644
--- a/.eslintrc.js
+++ b/.eslintrc.cjs
@@ -1,28 +1,37 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true,
-    node: true
+    node: true,
+    es6: true
   },
   parser: 'vue-eslint-parser',
   extends: [
-    'eslint:recommended',
-    'plugin:vue/vue3-essential',
-    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
     './.eslintrc-auto-import.json',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
     'plugin:prettier/recommended'
   ],
   parserOptions: {
     ecmaVersion: '2020',
     sourceType: 'module',
+    project: './tsconfig.*?.json',
     parser: '@typescript-eslint/parser'
   },
-  plugins: ['vue', '@typescript-eslint'],
+  plugins: ['vue', '@typescript-eslint', 'import', 'promise', 'node', 'prettier'],
   rules: {
-    'vue/multi-word-component-names': 'off',
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-this-alias': 'off',
+
+    // vue
+    'vue/multi-word-component-names': 'off',
+    'vue/valid-define-props': 'off',
     'vue/no-v-model-argument': 'off',
+    'prefer-rest-params': 'off',
+    // prettier
+    'prettier/prettier': 'error',
     '@typescript-eslint/ban-types': [
       'error',
       {
diff --git a/.gitignore b/.gitignore
index 40df4749927f06e2a6a0422c0c1f979730f85a80..1fd56f08a1c72b287819f25e55e661b4ebac3c32 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
+pnpm-lock.yaml
 
 # 编译生成的文件
 auto-imports.d.ts
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000000000000000000000000000000000..6ca3ce50e67c2ad83f8152f280c5b5bc974e3d56
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,20 @@
+{
+  "printWidth": 150,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "preserve",
+  "jsxSingleQuote": false,
+  "bracketSameLine": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "arrowParens": "always",
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "vueIndentScriptAndStyle": false,
+  "endOfLine": "auto"
+}
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
deleted file mode 100644
index 61d2d92a7b5c417a0d69cc5ada18f18ef907b595..0000000000000000000000000000000000000000
--- a/.prettierrc.cjs
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * 代码格式化配置
- */
-module.exports = {
-  // 一行最多多少个字符
-  printWidth: 150,
-  // 指定每个缩进级别的空格数
-  tabWidth: 2,
-  // 使用制表符而不是空格缩进行
-  useTabs: false,
-  // 在语句末尾是否需要分号
-  semi: true,
-  // 是否使用单引号
-  singleQuote: true,
-  // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
-  quoteProps: 'as-needed',
-  // 在JSX中使用单引号而不是双引号
-  jsxSingleQuote: false,
-  // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
-  trailingComma: 'none',
-  // 在对象文字中的括号之间打印空格
-  bracketSpacing: true,
-  // jsx 标签的反尖括号需要换行
-  jsxBracketSameLine: false,
-  embeddedLanguageFormatting: 'off',
-  // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
-  arrowParens: 'always',
-  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
-  rangeStart: 0,
-  rangeEnd: Infinity,
-  // 指定要使用的解析器，不需要写文件开头的 @prettier
-  requirePragma: false,
-  // 不需要自动在文件开头插入 @prettier
-  insertPragma: false,
-  // 使用默认的折行标准 always\never\preserve
-  proseWrap: 'preserve',
-  // 指定HTML文件的全局空格敏感度 css\strict\ignore
-  htmlWhitespaceSensitivity: 'css',
-  // Vue文件脚本和样式标签缩进
-  vueIndentScriptAndStyle: false,
-  // 在 windows 操作系统中换行符通常是回车 (CR) 加换行分隔符 (LF)，也就是回车换行(CRLF)，
-  // 然而在 Linux 和 Unix 中只使用简单的换行分隔符 (LF)。
-  // 对应的控制字符为 "\n" (LF) 和 "\r\n"(CRLF)。auto意为保持现有的行尾
-  // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
-  endOfLine: 'auto'
-};
diff --git a/README.md b/README.md
index 27424637da781085de7881fd92c5537a4cebc7c9..010adb9724595c5a5166080bf281322b4498925d 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,10 @@
 ## 平台简介
 
-* 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [TS](https://www.typescriptlang.org/) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
-* 配套后端代码仓库地址
-* [RuoYi-Vue-Plus 5.X(注意版本号)](https://gitee.com/dromara/RuoYi-Vue-Plus)
-* [RuoYi-Cloud-Plus 2.X(注意版本号)](https://gitee.com/dromara/RuoYi-Cloud-Plus)
+- 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [TS](https://www.typescriptlang.org/) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
+- 成员项目: 基于 vben(ant-design-vue) 的前端项目 [ruoyi-plus-vben](https://gitee.com/dapppp/ruoyi-plus-vben)
+- 配套后端代码仓库地址
+- [RuoYi-Vue-Plus 5.X(注意版本号)](https://gitee.com/dromara/RuoYi-Vue-Plus)
+- [RuoYi-Cloud-Plus 2.X(注意版本号)](https://gitee.com/dromara/RuoYi-Cloud-Plus)
 
 ## 前端运行
 
@@ -17,7 +18,7 @@ npm install --registry=https://registry.npmmirror.com
 # 启动服务
 npm run dev
 
-# 构建生产环境 
+# 构建生产环境
 npm run build:prod
 
 # 前端访问地址 http://localhost:80
@@ -25,51 +26,51 @@ npm run build:prod
 
 ## 本框架与RuoYi的业务差异
 
-| 业务     | 功能说明                                    | 本框架 | RuoYi            |
-|--------|-----------------------------------------|-----|------------------|
-| 租户管理   | 系统内租户的管理 如:租户套餐、过期时间、用户数量、企业信息等         | 支持  | 无                |
-| 租户套餐管理 | 系统内租户所能使用的套餐管理 如:套餐内所包含的菜单等             | 支持  | 无                |
-| 用户管理   | 用户的管理配置 如:新增用户、分配用户所属部门、角色、岗位等          | 支持  | 支持               |
-| 部门管理   | 配置系统组织机构（公司、部门、小组） 树结构展现支持数据权限          | 支持  | 支持               |
-| 岗位管理   | 配置系统用户所属担任职务                            | 支持  | 支持               |
-| 菜单管理   | 配置系统菜单、操作权限、按钮权限标识等                     | 支持  | 支持               |
-| 角色管理   | 角色菜单权限分配、设置角色按机构进行数据范围权限划分              | 支持  | 支持               |
-| 字典管理   | 对系统中经常使用的一些较为固定的数据进行维护                  | 支持  | 支持               |
-| 参数管理   | 对系统动态配置常用参数                             | 支持  | 支持               |
-| 通知公告   | 系统通知公告信息发布维护                            | 支持  | 支持               |
-| 操作日志   | 系统正常操作日志记录和查询 系统异常信息日志记录和查询             | 支持  | 支持               |
-| 登录日志   | 系统登录日志记录查询包含登录异常                        | 支持  | 支持               |
-| 文件管理   | 系统文件展示、上传、下载、删除等管理                      | 支持  | 无                |
-| 文件配置管理 | 系统文件上传、下载所需要的配置信息动态添加、修改、删除等管理          | 支持  | 无                |
-| 在线用户管理 | 已登录系统的在线用户信息监控与强制踢出操作                   | 支持  | 支持               |
-| 定时任务   | 运行报表、任务管理(添加、修改、删除)、日志管理、执行器管理等         | 支持  | 仅支持任务与日志管理       |
-| 代码生成   | 多数据源前后端代码的生成（java、html、xml、sql）支持CRUD下载 | 支持  | 仅支持单数据源          |
-| 系统接口   | 根据业务代码自动生成相关的api接口文档                    | 支持  | 支持               |
-| 服务监控   | 监视集群系统CPU、内存、磁盘、堆栈、在线日志、Spring相关配置等     | 支持  | 仅支持单机CPU、内存、磁盘监控 |
-| 缓存监控   | 对系统的缓存信息查询，命令统计等。                       | 支持  | 支持               |
-| 在线构建器  | 拖动表单元素生成相应的HTML代码。                      | 支持  | 支持               |
-| 使用案例   | 系统的一些功能案例                               | 支持  | 不支持              |
+| 业务         | 功能说明                                                      | 本框架 | RuoYi                         |
+| ------------ | ------------------------------------------------------------- | ------ | ----------------------------- |
+| 租户管理     | 系统内租户的管理 如:租户套餐、过期时间、用户数量、企业信息等  | 支持   | 无                            |
+| 租户套餐管理 | 系统内租户所能使用的套餐管理 如:套餐内所包含的菜单等          | 支持   | 无                            |
+| 用户管理     | 用户的管理配置 如:新增用户、分配用户所属部门、角色、岗位等    | 支持   | 支持                          |
+| 部门管理     | 配置系统组织机构（公司、部门、小组） 树结构展现支持数据权限   | 支持   | 支持                          |
+| 岗位管理     | 配置系统用户所属担任职务                                      | 支持   | 支持                          |
+| 菜单管理     | 配置系统菜单、操作权限、按钮权限标识等                        | 支持   | 支持                          |
+| 角色管理     | 角色菜单权限分配、设置角色按机构进行数据范围权限划分          | 支持   | 支持                          |
+| 字典管理     | 对系统中经常使用的一些较为固定的数据进行维护                  | 支持   | 支持                          |
+| 参数管理     | 对系统动态配置常用参数                                        | 支持   | 支持                          |
+| 通知公告     | 系统通知公告信息发布维护                                      | 支持   | 支持                          |
+| 操作日志     | 系统正常操作日志记录和查询 系统异常信息日志记录和查询         | 支持   | 支持                          |
+| 登录日志     | 系统登录日志记录查询包含登录异常                              | 支持   | 支持                          |
+| 文件管理     | 系统文件展示、上传、下载、删除等管理                          | 支持   | 无                            |
+| 文件配置管理 | 系统文件上传、下载所需要的配置信息动态添加、修改、删除等管理  | 支持   | 无                            |
+| 在线用户管理 | 已登录系统的在线用户信息监控与强制踢出操作                    | 支持   | 支持                          |
+| 定时任务     | 运行报表、任务管理(添加、修改、删除)、日志管理、执行器管理等  | 支持   | 仅支持任务与日志管理          |
+| 代码生成     | 多数据源前后端代码的生成（java、html、xml、sql）支持CRUD下载  | 支持   | 仅支持单数据源                |
+| 系统接口     | 根据业务代码自动生成相关的api接口文档                         | 支持   | 支持                          |
+| 服务监控     | 监视集群系统CPU、内存、磁盘、堆栈、在线日志、Spring相关配置等 | 支持   | 仅支持单机CPU、内存、磁盘监控 |
+| 缓存监控     | 对系统的缓存信息查询，命令统计等。                            | 支持   | 支持                          |
+| 在线构建器   | 拖动表单元素生成相应的HTML代码。                              | 支持   | 支持                          |
+| 使用案例     | 系统的一些功能案例                                            | 支持   | 不支持                        |
 
 ## 演示图例
 
-|                                                                                            |                                                                                            |
-|--------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
-| ![输入图片说明](https://foruda.gitee.com/images/1680077524361362822/270bb429_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680077619939771291/989bf9b6_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680077681751513929/1c27c5bd_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680077721559267315/74d63e23_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680077765638904515/1b75d4a6_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078026375951297/eded7a4b_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078237104531207/0eb1b6a7_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078254306078709/5931e22f_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078287971528493/0b9af60a_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078308138770249/8d3b6696_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078352553634393/db5ef880_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078378238393374/601e4357_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078414983206024/2aae27c1_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078446738419874/ecce7d59_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078475971341775/149e8634_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078491666717143/3fadece7_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078558863188826/fb8ced2a_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078574561685461/ae68a0b2_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078594932772013/9d8bfec6_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078626493093532/fcfe4ff6_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078643608812515/0295bd4f_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078685196286463/d7612c81_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078703877318597/56fce0bc_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078716586545643/b6dbd68f_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078734103217688/eb1e6aa6_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078759131415480/73c525d8_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078779416197879/75e3ed02_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078802329118061/77e10915_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078893627848351/34a1c342_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078928175016986/f126ec4a_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078941718318363/b68a0f72_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680078963175518631/3bb769a1_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680078982294090567/b31c343d_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680079000642440444/77ca82a9_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680079020995074177/03b7d52e_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680079039367822173/76811806_1766278.png "屏幕截图") |
-| ![输入图片说明](https://foruda.gitee.com/images/1680079274333484664/4dfdc7c0_1766278.png "屏幕截图") | ![输入图片说明](https://foruda.gitee.com/images/1680079290467458224/d6715fcf_1766278.png "屏幕截图") |
+|                                                                                                      |                                                                                                      |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| ![输入图片说明](https://foruda.gitee.com/images/1680077524361362822/270bb429_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680077619939771291/989bf9b6_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680077681751513929/1c27c5bd_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680077721559267315/74d63e23_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680077765638904515/1b75d4a6_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078026375951297/eded7a4b_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078237104531207/0eb1b6a7_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078254306078709/5931e22f_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078287971528493/0b9af60a_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078308138770249/8d3b6696_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078352553634393/db5ef880_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078378238393374/601e4357_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078414983206024/2aae27c1_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078446738419874/ecce7d59_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078475971341775/149e8634_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078491666717143/3fadece7_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078558863188826/fb8ced2a_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078574561685461/ae68a0b2_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078594932772013/9d8bfec6_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078626493093532/fcfe4ff6_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078643608812515/0295bd4f_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078685196286463/d7612c81_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078703877318597/56fce0bc_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078716586545643/b6dbd68f_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078734103217688/eb1e6aa6_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078759131415480/73c525d8_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078779416197879/75e3ed02_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078802329118061/77e10915_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078893627848351/34a1c342_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078928175016986/f126ec4a_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078941718318363/b68a0f72_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680078963175518631/3bb769a1_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680078982294090567/b31c343d_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680079000642440444/77ca82a9_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680079020995074177/03b7d52e_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680079039367822173/76811806_1766278.png '屏幕截图') |
+| ![输入图片说明](https://foruda.gitee.com/images/1680079274333484664/4dfdc7c0_1766278.png '屏幕截图') | ![输入图片说明](https://foruda.gitee.com/images/1680079290467458224/d6715fcf_1766278.png '屏幕截图') |
diff --git a/commitlint.config.js b/commitlint.config.js
deleted file mode 100644
index 3b75ed533c34463f00dadd072d03372e618f3a69..0000000000000000000000000000000000000000
--- a/commitlint.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-  rules: {
-    'type-enum': [
-      2,
-      'always',
-      [
-        'feat', // 新功能 feature
-        'fix', // 修复 bug
-        'docs', // 文档注释
-        'style', // 代码格式
-        'refactor', // 重构
-        'perf', // 性能优化
-        'test', // 增加测试
-        'chore', // 构建过程或辅助工具的变动
-        'revert', // 回退
-        'build' // 打包
-      ]
-    ],
-    'subject-case': [0]
-  }
-};
diff --git a/html/ie.html b/html/ie.html
index 87d262d42e038ea85ce572055e033db055b677fa..4d2773d1101d041660a09b1c9beca0cfe8f2f38c 100644
--- a/html/ie.html
+++ b/html/ie.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
@@ -7,24 +7,206 @@
     <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}
+      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">
+  <body style="margin-top: 50px">
     <h1>请升级您的浏览器，以便我们更好的为您提供服务！</h1>
     <p>您正在使用 Internet Explorer 的早期版本（IE11以下版本或使用该内核的浏览器）。这意味着在升级浏览器前，您将无法访问此网站。</p>
     <hr />
diff --git a/index.html b/index.html
index c0dab512df3bc10d9862c1a949427c18f7f514e5..aa1c86d9de765b8e3a231ebbfc70fe10b4b92f7f 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
@@ -9,7 +9,7 @@
     <title>RuoYi-Vue-Plus多租户管理系统</title>
     <!--[if lt IE 11
       ]><script>
-        window.location.href='/html/ie.html';
+        window.location.href = '/html/ie.html';
       </script><!
     [endif]-->
     <style>
@@ -47,7 +47,7 @@
         margin: -75px 0 0 -75px;
         border-radius: 50%;
         border: 3px solid transparent;
-        border-top-color: #FFF;
+        border-top-color: #fff;
         -webkit-animation: spin 2s linear infinite;
         -ms-animation: spin 2s linear infinite;
         -moz-animation: spin 2s linear infinite;
@@ -57,7 +57,7 @@
       }
 
       #loader:before {
-        content: "";
+        content: '';
         position: absolute;
         top: 5px;
         left: 5px;
@@ -65,7 +65,7 @@
         bottom: 5px;
         border-radius: 50%;
         border: 3px solid transparent;
-        border-top-color: #FFF;
+        border-top-color: #fff;
         -webkit-animation: spin 3s linear infinite;
         -moz-animation: spin 3s linear infinite;
         -o-animation: spin 3s linear infinite;
@@ -74,7 +74,7 @@
       }
 
       #loader:after {
-        content: "";
+        content: '';
         position: absolute;
         top: 15px;
         left: 15px;
@@ -82,7 +82,7 @@
         bottom: 15px;
         border-radius: 50%;
         border: 3px solid transparent;
-        border-top-color: #FFF;
+        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;
@@ -90,7 +90,6 @@
         animation: spin 1.5s linear infinite;
       }
 
-
       @-webkit-keyframes spin {
         0% {
           -webkit-transform: rotate(0deg);
@@ -119,13 +118,12 @@
         }
       }
 
-
       #loader-wrapper .loader-section {
         position: fixed;
         top: 0;
         width: 51%;
         height: 100%;
-        background: #7171C6;
+        background: #7171c6;
         z-index: 1000;
         -webkit-transform: translateX(0);
         -ms-transform: translateX(0);
@@ -140,21 +138,20 @@
         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.000);
-        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+        -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.000);
-        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+        -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 {
@@ -182,7 +179,7 @@
 
       #loader-wrapper .load_title {
         font-family: 'Open Sans';
-        color: #FFF;
+        color: #fff;
         font-size: 19px;
         width: 100%;
         text-align: center;
@@ -197,7 +194,7 @@
         font-weight: normal;
         font-style: italic;
         font-size: 13px;
-        color: #FFF;
+        color: #fff;
         opacity: 0.5;
       }
     </style>
diff --git a/package.json b/package.json
index 6af6ba2140f6fa421281d19bbe0c17bc59d84a12..5154ed0f97d04d1bbd8ec44713a0810b4ab7ae06 100644
--- a/package.json
+++ b/package.json
@@ -1,15 +1,16 @@
 {
   "name": "ruoyi-vue-plus",
-  "version": "5.1.2",
+  "version": "5.2.0-BETA",
   "description": "RuoYi-Vue-Plus多租户管理系统",
   "author": "LionLi",
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "dev": "vite serve --mode development",
-    "build:prod": "vite build --mode production &&vue-tsc --noEmit",
+    "build:prod": "vite build --mode production",
+    "build:dev": "vite build --mode development",
     "preview": "vite preview",
-    "lint": "eslint src/**/*.{ts,js,vue} --fix",
-    "prepare": "husky install",
+    "lint:eslint": "eslint  --fix --ext .ts,.js,.vue ./src ",
     "prettier": "prettier --write ."
   },
   "repository": {
@@ -17,68 +18,84 @@
     "url": "https://gitee.com/JavaLionLi/plus-ui.git"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "2.1.0",
+    "@element-plus/icons-vue": "2.3.1",
+    "@highlightjs/vue-plugin": "2.1.0",
+    "@lezer/common": "1.2.1",
     "@vueup/vue-quill": "1.2.0",
-    "@vueuse/core": "9.5.0",
+    "@vueuse/core": "10.9.0",
     "animate.css": "4.1.1",
-    "await-to-js": "^3.0.0",
-    "axios": "^1.3.4",
-    "echarts": "5.4.0",
-    "element-plus": "2.2.27",
+    "await-to-js": "3.0.0",
+    "axios": "1.6.8",
+    "bpmn-js": "16.4.0",
+    "camunda-bpmn-js-behaviors": "1.2.2",
+    "camunda-bpmn-moddle": "7.0.1",
+    "crypto-js": "4.2.0",
+    "diagram-js": "12.3.0",
+    "didi": "9.0.2",
+    "echarts": "5.5.0",
+    "element-plus": "2.7.2",
     "file-saver": "2.0.5",
-    "fuse.js": "6.6.2",
-    "js-cookie": "3.0.1",
-    "jsencrypt": "3.3.1",
-    "crypto-js": "^4.1.1",
+    "fuse.js": "7.0.0",
+    "highlight.js": "11.9.0",
+    "image-conversion": "^2.1.1",
+    "js-cookie": "3.0.5",
+    "jsencrypt": "3.3.2",
+    "moddle": "6.2.3",
     "nprogress": "0.2.0",
     "path-browserify": "1.0.1",
-    "path-to-regexp": "6.2.0",
-    "pinia": "2.0.22",
-    "screenfull": "6.0.0",
-    "vform3-builds": "3.0.8",
-    "vue": "3.2.45",
-    "vue-cropper": "1.0.3",
-    "vue-i18n": "9.2.2",
-    "vue-router": "4.1.4",
-    "vue-types": "^5.0.3"
+    "path-to-regexp": "6.2.1",
+    "pinia": "2.1.7",
+    "preact": "10.19.7",
+    "screenfull": "6.0.2",
+    "vform3-builds": "3.0.10",
+    "vue": "3.4.25",
+    "vue-cropper": "1.1.1",
+    "vue-i18n": "9.10.2",
+    "vue-router": "4.3.2",
+    "vue-types": "5.1.1",
+    "vxe-table": "4.5.22",
+    "zeebe-bpmn-moddle": "1.0.0"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.40",
-    "@intlify/unplugin-vue-i18n": "0.8.2",
-    "@types/crypto-js": "^4.1.1",
-    "@types/file-saver": "2.0.5",
-    "@types/js-cookie": "3.0.3",
-    "@types/node": "18.14.2",
-    "@types/nprogress": "0.2.0",
-    "@types/path-browserify": "^1.0.0",
-    "@typescript-eslint/eslint-plugin": "5.56.0",
-    "@typescript-eslint/parser": "5.56.0",
-    "@unocss/preset-attributify": "^0.50.6",
-    "@unocss/preset-icons": "^0.50.6",
-    "@unocss/preset-uno": "^0.50.6",
-    "@vitejs/plugin-vue": "4.0.0",
-    "@vue/compiler-sfc": "3.2.45",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.36.0",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-vue": "9.9.0",
-    "fast-glob": "^3.2.11",
-    "husky": "7.0.4",
-    "postcss": "^8.4.21",
-    "prettier": "2.8.6",
-    "sass": "1.56.1",
-    "typescript": "4.9.5",
-    "unocss": "^0.50.6",
-    "unplugin-auto-import": "0.13.0",
-    "unplugin-icons": "0.15.1",
-    "unplugin-vue-components": "0.23.0",
-    "vite": "4.3.1",
+    "@iconify/json": "2.2.201",
+    "@intlify/unplugin-vue-i18n": "3.0.1",
+    "@types/crypto-js": "4.2.2",
+    "@types/file-saver": "2.0.7",
+    "@types/js-cookie": "3.0.6",
+    "@types/node": "18.18.2",
+    "@types/nprogress": "0.2.3",
+    "@types/path-browserify": "1.0.2",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
+    "@unocss/preset-attributify": "0.58.6",
+    "@unocss/preset-icons": "0.58.6",
+    "@unocss/preset-uno": "0.58.6",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vue/compiler-sfc": "3.4.23",
+    "autoprefixer": "10.4.18",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-define-config": "2.1.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-vue": "9.23.0",
+    "fast-glob": "3.3.2",
+    "postcss": "8.4.36",
+    "prettier": "3.2.5",
+    "sass": "1.72.0",
+    "typescript": "5.4.5",
+    "unocss": "0.58.6",
+    "unplugin-auto-import": "0.17.5",
+    "unplugin-icons": "0.18.5",
+    "unplugin-vue-components": "0.26.0",
+    "unplugin-vue-setup-extend-plus": "1.0.1",
+    "vite": "5.2.10",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-svg-icons": "2.0.1",
-    "unplugin-vue-setup-extend-plus": "0.4.9",
-    "vitest": "^0.29.7",
-    "vue-eslint-parser": "9.1.0",
-    "vue-tsc": "0.35.0"
+    "vitest": "1.5.0",
+    "vue-eslint-parser": "9.4.2",
+    "vue-tsc": "2.0.13"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 41ffdd4d92ba5eeb196d6e28b3385c1460906b4f..66dbed6d3598d37df9438575cdb16be123a0104c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,20 @@
 <template>
-  <el-config-provider :locale="appStore.locale" :size="size">
+  <el-config-provider :locale="appStore.locale" :size="appStore.size">
     <router-view />
   </el-config-provider>
 </template>
 
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
-import { handleThemeStyle } from '@/utils/theme'
+import useSettingsStore from '@/store/modules/settings';
+import { handleThemeStyle } from '@/utils/theme';
 import useAppStore from '@/store/modules/app';
 
 const appStore = useAppStore();
-const size = computed(() => appStore.size as any);
 
 onMounted(() => {
   nextTick(() => {
     // 初始化主题样式
-    handleThemeStyle(useSettingsStore().theme)
-  })
-})
+    handleThemeStyle(useSettingsStore().theme);
+  });
+});
 </script>
diff --git a/src/api/login.ts b/src/api/login.ts
index 100a5e9f7df7262ad518c11b85805544f17d81e6..b6955debe2b3e26f0eb58b9fc1c2207216676244 100644
--- a/src/api/login.ts
+++ b/src/api/login.ts
@@ -20,7 +20,8 @@ export function login(data: LoginData): AxiosPromise<LoginResult> {
     url: '/auth/login',
     headers: {
       isToken: false,
-      isEncrypt: true
+      isEncrypt: true,
+      repeatSubmit: false
     },
     method: 'post',
     data: params
@@ -38,7 +39,8 @@ export function register(data: any) {
     url: '/auth/register',
     headers: {
       isToken: false,
-      isEncrypt: true
+      isEncrypt: true,
+      repeatSubmit: false
     },
     method: 'post',
     data: params
diff --git a/src/api/monitor/online/index.ts b/src/api/monitor/online/index.ts
index 3d9034a8c004a075393481e0f84efc01529523fb..74847026f16f39a66ad870bc2f80793806e90583 100644
--- a/src/api/monitor/online/index.ts
+++ b/src/api/monitor/online/index.ts
@@ -18,3 +18,19 @@ export function forceLogout(tokenId: string) {
     method: 'delete'
   });
 }
+
+// 获取当前用户登录在线设备
+export function getOnline() {
+  return request({
+    url: '/monitor/online',
+    method: 'get'
+  });
+}
+
+// 删除当前在线设备
+export function delOnline(tokenId: string) {
+  return request({
+    url: '/monitor/online/' + tokenId,
+    method: 'post'
+  });
+}
diff --git a/src/api/system/client/index.ts b/src/api/system/client/index.ts
index 06544dab3d5fbfd6c7af51b34f1f154f25351227..6b302b0aa1bd14e7ff6e0263f2d2ab64566c1fa9 100644
--- a/src/api/system/client/index.ts
+++ b/src/api/system/client/index.ts
@@ -64,12 +64,12 @@ export const delClient = (id: string | number | Array<string | number>) => {
 
 /**
  * 状态修改
- * @param id ID
+ * @param clientId 客户端id
  * @param status 状态
  */
-export function changeStatus(id: number | string, status: string) {
+export function changeStatus(clientId: string, status: string) {
   const data = {
-    id,
+    clientId,
     status
   };
   return request({
diff --git a/src/api/system/client/types.ts b/src/api/system/client/types.ts
index d7cb926b6ee5e4365957f9e9165a236f76107b12..142118dac0e69f6815adc60c5d9084f1ec7ba2a2 100644
--- a/src/api/system/client/types.ts
+++ b/src/api/system/client/types.ts
@@ -7,7 +7,7 @@ export interface ClientVO {
   /**
    * 客户端id
    */
-  clientId: string | number;
+  clientId: string;
 
   /**
    * 客户端key
diff --git a/src/api/system/config/index.ts b/src/api/system/config/index.ts
index e52a256666c96244ba7590c331cd994f9b58de32..1e4842d5bbb172aa40ebeb215553229163cd9d1f 100644
--- a/src/api/system/config/index.ts
+++ b/src/api/system/config/index.ts
@@ -20,7 +20,7 @@ export function getConfig(configId: string | number): AxiosPromise<ConfigVO> {
 }
 
 // 根据参数键名查询参数值
-export function getConfigKey(configKey: string): AxiosPromise<String> {
+export function getConfigKey(configKey: string): AxiosPromise<string> {
   return request({
     url: '/system/config/configKey/' + configKey,
     method: 'get'
diff --git a/src/api/system/dept/types.ts b/src/api/system/dept/types.ts
index 867dbdedda09943896a8dc33838464fe0fa94244..494745c44bba00500b1307c44cd8bc0e59b30564 100644
--- a/src/api/system/dept/types.ts
+++ b/src/api/system/dept/types.ts
@@ -3,6 +3,7 @@
  */
 export interface DeptQuery extends PageQuery {
   deptName?: string;
+  deptCategory?: string;
   status?: number;
 }
 
@@ -16,6 +17,7 @@ export interface DeptVO extends BaseEntity {
   children: DeptVO[];
   deptId: number | string;
   deptName: string;
+  deptCategory: string;
   orderNum: number;
   leader: string;
   phone: string;
@@ -35,6 +37,7 @@ export interface DeptForm {
   children?: DeptForm[];
   deptId?: number | string;
   deptName?: string;
+  deptCategory?: string;
   orderNum?: number;
   leader?: string;
   phone?: string;
diff --git a/src/api/system/post/index.ts b/src/api/system/post/index.ts
index 3e523ab9211a26897beada432816765676cc97d2..5f6ab18b625b352f9161a45a1655f336dfad80c2 100644
--- a/src/api/system/post/index.ts
+++ b/src/api/system/post/index.ts
@@ -19,6 +19,18 @@ export function getPost(postId: string | number): AxiosPromise<PostVO> {
   });
 }
 
+// 获取岗位选择框列表
+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({
diff --git a/src/api/system/post/types.ts b/src/api/system/post/types.ts
index 84e6786cdeb2d56666a5841dfe798427a66aa1ee..45a0540c95f1578ff8253053a6a76afc1747bf7f 100644
--- a/src/api/system/post/types.ts
+++ b/src/api/system/post/types.ts
@@ -1,7 +1,10 @@
 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;
@@ -9,15 +12,20 @@ export interface PostVO extends BaseEntity {
 
 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
index 4e8b6127975d6aac3aa00d0f8d507059a65f3a05..fb0fcabcf1090d9286b88b0da90e27a375451c02 100644
--- a/src/api/system/role/index.ts
+++ b/src/api/system/role/index.ts
@@ -12,6 +12,17 @@ export const listRole = (query: RoleQuery): AxiosPromise<RoleVO[]> => {
   });
 };
 
+/**
+ * 通过roleIds查询角色
+ * @param roleIds
+ */
+export const optionSelect = (roleIds: (number | string)[]): AxiosPromise<RoleVO[]> => {
+  return request({
+    url: '/system/role/optionselect?roleIds=' + roleIds,
+    method: 'get'
+  });
+};
+
 /**
  * 查询角色详细
  */
@@ -142,3 +153,8 @@ export const deptTreeSelect = (roleId: string | number): AxiosPromise<RoleDeptTr
     method: 'get'
   });
 };
+
+export default {
+  optionSelect,
+  listRole
+};
diff --git a/src/api/system/tenant/index.ts b/src/api/system/tenant/index.ts
index 4531a0a4678ed9fb94564843074b07e8a3eace17..4380dbe14fb7cda82525da4c428b05f618e5891c 100644
--- a/src/api/system/tenant/index.ts
+++ b/src/api/system/tenant/index.ts
@@ -25,7 +25,8 @@ export function addTenant(data: TenantForm) {
     url: '/system/tenant',
     method: 'post',
     headers: {
-      isEncrypt: true
+      isEncrypt: true,
+      repeatSubmit: false
     },
     data: data
   });
diff --git a/src/api/system/user/index.ts b/src/api/system/user/index.ts
index fdcafc2aca86f01c38159321a643b7437c072680..25c78848a2c7509ca425dc6bd3404b60dd7571d2 100644
--- a/src/api/system/user/index.ts
+++ b/src/api/system/user/index.ts
@@ -17,6 +17,17 @@ export const listUser = (query: UserQuery): AxiosPromise<UserVO[]> => {
   });
 };
 
+/**
+ * 通过用户ids查询用户
+ * @param userIds
+ */
+export const optionSelect = (userIds: (number | string)[]): AxiosPromise<UserVO[]> => {
+  return request({
+    url: '/system/user/optionselect?userIds=' + userIds,
+    method: 'get'
+  });
+};
+
 /**
  * 获取用户详情
  * @param userId
@@ -75,7 +86,8 @@ export const resetUserPwd = (userId: string | number, password: string) => {
     url: '/system/user/resetPwd',
     method: 'put',
     headers: {
-      isEncrypt: true
+      isEncrypt: true,
+      repeatSubmit: false
     },
     data: data
   });
@@ -134,7 +146,8 @@ export const updateUserPwd = (oldPassword: string, newPassword: string) => {
     url: '/system/user/profile/updatePwd',
     method: 'put',
     headers: {
-      isEncrypt: true
+      isEncrypt: true,
+      repeatSubmit: false
     },
     data: data
   });
@@ -199,6 +212,7 @@ export const deptTreeSelect = (): AxiosPromise<DeptVO[]> => {
 export default {
   listUser,
   getUser,
+  optionSelect,
   addUser,
   updateUser,
   delUser,
diff --git a/src/api/system/user/types.ts b/src/api/system/user/types.ts
index 77e9c320b564b8e5717ee58d7968171ac3223629..3488e9f1175071109929731985419af22b33ba72 100644
--- a/src/api/system/user/types.ts
+++ b/src/api/system/user/types.ts
@@ -1,4 +1,3 @@
-import { DeptVO } from './../dept/types';
 import { RoleVO } from '@/api/system/role/types';
 import { PostVO } from '@/api/system/post/types';
 
@@ -40,7 +39,7 @@ export interface UserVO extends BaseEntity {
   loginIp: string;
   loginDate: string;
   remark: string;
-  dept: DeptVO;
+  deptName: string;
   roles: RoleVO[];
   roleIds: any;
   postIds: any;
diff --git a/src/api/tool/gen/index.ts b/src/api/tool/gen/index.ts
index b91df6ace4cce7566c90820a4f8d58b3392da519..efe079cf0c2bbb01866b55c37984f75db472c26c 100644
--- a/src/api/tool/gen/index.ts
+++ b/src/api/tool/gen/index.ts
@@ -28,7 +28,7 @@ export const getGenTable = (tableId: string | number): AxiosPromise<GenTableVO>
 };
 
 // 修改代码生成信息
-export const updateGenTable = (data: DbTableForm) => {
+export const updateGenTable = (data: DbTableForm): AxiosPromise<GenTableVO> => {
   return request({
     url: '/tool/gen',
     method: 'put',
@@ -37,7 +37,7 @@ export const updateGenTable = (data: DbTableForm) => {
 };
 
 // 导入表
-export const importTable = (data: { tables: string; dataName: string }) => {
+export const importTable = (data: { tables: string; dataName: string }): AxiosPromise<GenTableVO> => {
   return request({
     url: '/tool/gen/importTable',
     method: 'post',
diff --git a/src/api/workflow/category/index.ts b/src/api/workflow/category/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e9723b05d4cfde93d1c071171ba6c3bc06af80fc
--- /dev/null
+++ b/src/api/workflow/category/index.ts
@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { CategoryVO, CategoryForm, CategoryQuery } from '@/api/workflow/category/types';
+
+/**
+ * 查询流程分类列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listCategory = (query?: CategoryQuery): AxiosPromise<CategoryVO[]> => {
+  return request({
+    url: '/workflow/category/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询流程分类详细
+ * @param id
+ */
+export const getCategory = (id: string | number): AxiosPromise<CategoryVO> => {
+  return request({
+    url: '/workflow/category/' + id,
+    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 id
+ */
+export const delCategory = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/workflow/category/' + id,
+    method: 'delete'
+  });
+};
diff --git a/src/api/workflow/category/types.ts b/src/api/workflow/category/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..414fa55ed8da5f8bbc6ac72eb36d04bc12361966
--- /dev/null
+++ b/src/api/workflow/category/types.ts
@@ -0,0 +1,67 @@
+export interface CategoryVO {
+  /**
+   * 主键
+   */
+  id: string;
+
+  /**
+   * 分类名称
+   */
+  categoryName: string;
+
+  /**
+   * 分类编码
+   */
+  categoryCode: string;
+
+  /**
+   * 父级id
+   */
+  parentId: string | number;
+
+  /**
+   * 排序
+   */
+  sortNum: number;
+
+  children?: CategoryVO[];
+}
+
+export interface CategoryForm extends BaseEntity {
+  /**
+   * 主键
+   */
+  id?: string | number;
+
+  /**
+   * 分类名称
+   */
+  categoryName?: string;
+
+  /**
+   * 分类编码
+   */
+  categoryCode?: string;
+
+  /**
+   * 父级id
+   */
+  parentId?: string | number;
+
+  /**
+   * 排序
+   */
+  sortNum?: number;
+}
+
+export interface CategoryQuery extends PageQuery {
+  /**
+   * 分类名称
+   */
+  categoryName?: string;
+
+  /**
+   * 分类编码
+   */
+  categoryCode?: string;
+}
diff --git a/src/api/workflow/definitionConfig/index.ts b/src/api/workflow/definitionConfig/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d34bf05c14e4b7edcc424e082e63dca35bbbecb6
--- /dev/null
+++ b/src/api/workflow/definitionConfig/index.ts
@@ -0,0 +1,49 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { DefinitionConfigVO, DefinitionConfigForm } from '@/api/workflow/definitionConfig/types';
+
+/**
+ * 查询表单配置详细
+ * @param definitionId
+ */
+export const getByDefId = (definitionId: string | number): AxiosPromise<DefinitionConfigVO> => {
+  return request({
+    url: '/workflow/definitionConfig/getByDefId/' + definitionId,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增表单配置
+ * @param data
+ */
+export const saveOrUpdate = (data: DefinitionConfigForm) => {
+  return request({
+    url: '/workflow/definitionConfig/saveOrUpdate',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 删除表单配置
+ * @param id
+ */
+export const deldefinitionConfig = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/workflow/definitionConfig/' + id,
+    method: 'delete'
+  });
+};
+
+/**
+ * 查询流程定义配置排除当前查询的流程定义
+ * @param tableName
+ * @param definitionId
+ */
+export const getByTableNameNotDefId = (tableName: string, definitionId: string | number) => {
+  return request({
+    url: `/workflow/definitionConfig/getByTableNameNotDefId/${tableName}/${definitionId}`,
+    method: 'get'
+  });
+};
diff --git a/src/api/workflow/definitionConfig/types.ts b/src/api/workflow/definitionConfig/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7627403d513874812c53ebb7e1028e3841fe3844
--- /dev/null
+++ b/src/api/workflow/definitionConfig/types.ts
@@ -0,0 +1,102 @@
+import { FormManageVO } from '@/api/workflow/formManage/types';
+
+export interface DefinitionConfigVO {
+  /**
+   * 主键
+   */
+  id: string | number;
+
+  /**
+   * 表名
+   */
+  tableName?: string;
+
+  /**
+   * 流程定义ID
+   */
+  definitionId: string | number;
+
+  /**
+   * 流程KEY
+   */
+  processKey: string;
+
+  /**
+   * 流程版本
+   */
+  version?: string | number;
+
+  /**
+   * 备注
+   */
+  remark: string;
+
+  /**
+   * 表单管理
+   */
+  wfFormManageVo: FormManageVO;
+}
+
+export interface DefinitionConfigForm extends BaseEntity {
+  /**
+   * 主键
+   */
+  id?: string | number;
+
+  /**
+   * 表名
+   */
+  tableName?: string;
+
+  /**
+   * 流程定义ID
+   */
+  definitionId?: string | number;
+
+  /**
+   * 流程KEY
+   */
+  processKey?: string;
+
+  /**
+   * 流程版本
+   */
+  version?: string | number;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+
+  /**
+   * 表单管理
+   */
+  wfFormManageVo?: FormManageVO;
+}
+
+export interface DefinitionConfigQuery extends PageQuery {
+  /**
+   * 表名
+   */
+  tableName?: string;
+
+  /**
+   * 流程定义ID
+   */
+  definitionId?: string | number;
+
+  /**
+   * 流程KEY
+   */
+  processKey?: string;
+
+  /**
+   * 流程版本
+   */
+  version?: string | number;
+
+  /**
+   * 表单管理
+   */
+  wfFormManageVo: FormManageVO;
+}
diff --git a/src/api/workflow/formManage/index.ts b/src/api/workflow/formManage/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2930cfec1d41e5d00a47f064651a2d66844a323
--- /dev/null
+++ b/src/api/workflow/formManage/index.ts
@@ -0,0 +1,76 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { FormManageVO, FormManageForm, FormManageQuery } from '@/api/workflow/formManage/types';
+
+/**
+ * 查询表单管理列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listFormManage = (query?: FormManageQuery): AxiosPromise<FormManageVO[]> => {
+  return request({
+    url: '/workflow/formManage/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询表单管理列表
+ * @param query
+ * @returns {*}
+ */
+
+export const selectListFormManage = (): AxiosPromise<FormManageVO[]> => {
+  return request({
+    url: '/workflow/formManage/list/selectList',
+    method: 'get',
+  });
+};
+
+/**
+ * 查询表单管理详细
+ * @param id
+ */
+export const getFormManage = (id: string | number): AxiosPromise<FormManageVO> => {
+  return request({
+    url: '/workflow/formManage/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增表单管理
+ * @param data
+ */
+export const addFormManage = (data: FormManageForm) => {
+  return request({
+    url: '/workflow/formManage',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改表单管理
+ * @param data
+ */
+export const updateFormManage = (data: FormManageForm) => {
+  return request({
+    url: '/workflow/formManage',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除表单管理
+ * @param id
+ */
+export const delFormManage = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/workflow/formManage/' + id,
+    method: 'delete'
+  });
+};
diff --git a/src/api/workflow/formManage/types.ts b/src/api/workflow/formManage/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6554f5529798483f7ad0860672951fe25ab92ac4
--- /dev/null
+++ b/src/api/workflow/formManage/types.ts
@@ -0,0 +1,69 @@
+export interface FormManageVO {
+  /**
+   * 主键
+   */
+  id: string | number;
+
+  /**
+   * 表单名称
+   */
+  formName: string;
+
+  /**
+   * 表单类型
+   */
+  formType: string;
+  /**
+   * 表单类型名称
+   */
+  formTypeName: string;
+
+  /**
+   * 路由地址/表单ID
+   */
+  router: string;
+
+  /**
+   * 备注
+   */
+  remork: string;
+}
+
+export interface FormManageForm extends BaseEntity {
+  /**
+   * 主键
+   */
+  id?: string | number;
+
+  /**
+   * 表单名称
+   */
+  formName?: string;
+
+  /**
+   * 表单类型
+   */
+  formType?: string;
+
+  /**
+   * 路由地址/表单ID
+   */
+  router?: string;
+
+  /**
+   * 备注
+   */
+  remork?: string;
+}
+
+export interface FormManageQuery extends PageQuery {
+  /**
+   * 表单名称
+   */
+  formName?: string;
+
+  /**
+   * 表单类型
+   */
+  formType?: string;
+}
diff --git a/src/api/workflow/leave/index.ts b/src/api/workflow/leave/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..36c6fdfca60d862139911e2a97b03e0d4df6ce91
--- /dev/null
+++ b/src/api/workflow/leave/index.ts
@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { LeaveVO, LeaveQuery, LeaveForm } from '@/api/workflow/leave/types';
+
+/**
+ * 查询请假列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listLeave = (query?: LeaveQuery): AxiosPromise<LeaveVO[]> => {
+  return request({
+    url: '/demo/leave/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询请假详细
+ * @param id
+ */
+export const getLeave = (id: string | number): AxiosPromise<LeaveVO> => {
+  return request({
+    url: '/demo/leave/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增请假
+ * @param data
+ */
+export const addLeave = (data: LeaveForm): AxiosPromise<LeaveVO> => {
+  return request({
+    url: '/demo/leave',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改请假
+ * @param data
+ */
+export const updateLeave = (data: LeaveForm): AxiosPromise<LeaveVO> => {
+  return request({
+    url: '/demo/leave',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除请假
+ * @param id
+ */
+export const delLeave = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/demo/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 0000000000000000000000000000000000000000..b093546df9caea7a6740fe186d8bd6e292596379
--- /dev/null
+++ b/src/api/workflow/leave/types.ts
@@ -0,0 +1,24 @@
+export interface LeaveVO {
+  id: string | number;
+  leaveType: string;
+  startDate: string;
+  endDate: string;
+  leaveDays: number;
+  remark: string;
+  processInstanceVo: any;
+}
+
+export interface LeaveForm extends BaseEntity {
+  id?: string | number;
+  leaveType?: string;
+  startDate?: string;
+  endDate?: string;
+  leaveDays?: number;
+  remark?: string;
+  processInstanceVo?: any;
+}
+
+export interface LeaveQuery extends PageQuery {
+  startLeaveDays?: number;
+  endLeaveDays?: number;
+}
diff --git a/src/api/workflow/model/index.ts b/src/api/workflow/model/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..56f7fedbc5a324274915b50546b1bc99c505fc57
--- /dev/null
+++ b/src/api/workflow/model/index.ts
@@ -0,0 +1,104 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { ModelForm, ModelQuery, ModelVO } from '@/api/workflow/model/types';
+
+/**
+ * 查询模型列表
+ * @param query
+ * @returns {*}
+ */
+export const listModel = (query: ModelQuery): AxiosPromise<ModelVO[]> => {
+  return request({
+    url: '/workflow/model/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询模型信息
+ * @param query
+ * @returns {*}
+ */
+export const getInfo = (id: string): AxiosPromise<ModelForm> => {
+  return request({
+    url: '/workflow/model/getInfo/'+id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增模型
+ * @param data
+ * @returns {*}
+ */
+export const addModel = (data: ModelForm): AxiosPromise<void> => {
+  return request({
+    url: '/workflow/model/save',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改模型信息
+ * @param data
+ * @returns {*}
+ */
+export function update(data: ModelForm): AxiosPromise<void> {
+  return request({
+    url: '/workflow/model/update',
+    method: 'put',
+    data: data
+  });
+}
+
+/**
+ * 修改模型信息
+ * @param data
+ * @returns {*}
+ */
+export function editModelXml(data: ModelForm): AxiosPromise<void> {
+  return request({
+    url: '/workflow/model/editModelXml',
+    method: 'put',
+    data: data
+  });
+}
+
+/**
+ * 按id删除模型
+ * @returns {*}
+ * @param id 模型id
+ */
+export function delModel(id: string | string[]): AxiosPromise<void> {
+  return request({
+    url: '/workflow/model/' + id,
+    method: 'delete'
+  });
+}
+
+/**
+ * 模型部署
+ * @returns {*}
+ * @param id 模型id
+ */
+export const modelDeploy = (id: string): AxiosPromise<void> => {
+  return request({
+    url: `/workflow/model/modelDeploy/${id}`,
+    method: 'post'
+  });
+};
+
+/**
+ * 复制模型
+ * @param data
+ * @returns {*}
+ */
+export const copyModel = (data: ModelForm): AxiosPromise<void> => {
+  return request({
+    url: '/workflow/model/copyModel',
+    method: 'post',
+    data: data
+  });
+};
\ No newline at end of file
diff --git a/src/api/workflow/model/types.ts b/src/api/workflow/model/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..40a0faa1fe461f8675815eba9eae723c0cfa0f51
--- /dev/null
+++ b/src/api/workflow/model/types.ts
@@ -0,0 +1,66 @@
+export interface ModelForm {
+  id: string,
+  name: string;
+  key: string;
+  categoryCode: string;
+  xml:string,
+  svg:string,
+  description: string;
+}
+
+export interface ModelQuery extends PageQuery {
+  name?: string;
+  key?: string;
+  categoryCode?: string;
+}
+
+export interface OriginalPersistentState {
+  metaInfo: string;
+  editorSourceValueId: string;
+  createTime: string;
+  deploymentId?: string;
+  name: string;
+  tenantId: string;
+  category?: string;
+  version: number;
+  editorSourceExtraValueId?: string;
+  key: string;
+  lastUpdateTime: string;
+}
+
+export interface PersistentState {
+  metaInfo: string;
+  editorSourceValueId: string;
+  createTime: string;
+  deploymentId?: string;
+  name: string;
+  tenantId: string;
+  category?: string;
+  version: number;
+  editorSourceExtraValueId?: string;
+  key: string;
+  lastUpdateTime: string;
+}
+
+export interface ModelVO {
+  id: string;
+  revision: number;
+  originalPersistentState: OriginalPersistentState;
+  name: string;
+  key: string;
+  category?: string;
+  createTime: string;
+  lastUpdateTime: string;
+  version: number;
+  metaInfo: string;
+  deploymentId?: string;
+  editorSourceValueId: string;
+  editorSourceExtraValueId?: string;
+  tenantId: string;
+  persistentState: PersistentState;
+  revisionNext: number;
+  idPrefix: string;
+  inserted: boolean;
+  updated: boolean;
+  deleted: boolean;
+}
diff --git a/src/api/workflow/nodeConfig/index.ts b/src/api/workflow/nodeConfig/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3270c17e55398cfe314506301a226479aeafb430
--- /dev/null
+++ b/src/api/workflow/nodeConfig/index.ts
@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { NodeConfigVO, NodeConfigForm, NodeConfigQuery } from '@/api/workflow/nodeConfig/types';
+
+/**
+ * 查询节点配置列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listNodeConfig = (query?: NodeConfigQuery): AxiosPromise<NodeConfigVO[]> => {
+  return request({
+    url: '/workflow/nodeConfig/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询节点配置详细
+ * @param id
+ */
+export const getNodeConfig = (id: string | number): AxiosPromise<NodeConfigVO> => {
+  return request({
+    url: '/workflow/nodeConfig/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增节点配置
+ * @param data
+ */
+export const addNodeConfig = (data: NodeConfigForm) => {
+  return request({
+    url: '/workflow/nodeConfig',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改节点配置
+ * @param data
+ */
+export const updateNodeConfig = (data: NodeConfigForm) => {
+  return request({
+    url: '/workflow/nodeConfig',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除节点配置
+ * @param id
+ */
+export const delNodeConfig = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/workflow/nodeConfig/' + id,
+    method: 'delete'
+  });
+};
diff --git a/src/api/workflow/nodeConfig/types.ts b/src/api/workflow/nodeConfig/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4e3a60b33d3bc5da962a1c28e1a5fafdb5b7886c
--- /dev/null
+++ b/src/api/workflow/nodeConfig/types.ts
@@ -0,0 +1,43 @@
+import { FormManageVO } from '@/api/workflow/formManage/types';
+
+export interface NodeConfigVO {
+  /**
+   * 主键
+   */
+  id: string | number;
+
+  /**
+   * 表单id
+   */
+  formId: string | number;
+
+  /**
+   * 表单类型
+   */
+  formType: string;
+
+  /**
+   * 节点名称
+   */
+  nodeName: string;
+
+  /**
+   * 节点id
+   */
+  nodeId: string | number;
+
+  /**
+   * 流程定义id
+   */
+  definitionId: string | number;
+
+  /**
+   * 表单管理
+   */
+  wfFormManageVo: FormManageVO;
+
+}
+
+
+
+
diff --git a/src/api/workflow/processDefinition/index.ts b/src/api/workflow/processDefinition/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c06312017140e7f7cd6a127422f99a7731c3c211
--- /dev/null
+++ b/src/api/workflow/processDefinition/index.ts
@@ -0,0 +1,114 @@
+import request from '@/utils/request';
+import { ProcessDefinitionQuery, ProcessDefinitionVO, definitionXmlVO } from '@/api/workflow/processDefinition/types';
+import { AxiosPromise } from 'axios';
+
+/**
+ * 获取流程定义列表
+ * @param query 流程实例id
+ * @returns
+ */
+export const listProcessDefinition = (query: ProcessDefinitionQuery): AxiosPromise<ProcessDefinitionVO[]> => {
+  return request({
+    url: `/workflow/processDefinition/list`,
+    method: 'get',
+    params: query
+  });
+};
+/**
+ * 按照流程定义key获取流程定义
+ * @param processInstanceId 流程实例id
+ * @returns
+ */
+export const getListByKey = (key: string) => {
+  return request({
+    url: `/workflow/processDefinition/getListByKey/${key}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 通过流程定义id获取流程图
+ */
+export const definitionImage = (processDefinitionId: string): AxiosPromise<any> => {
+  return request({
+    url: `/workflow/processDefinition/definitionImage/${processDefinitionId}` + '?t' + Math.random(),
+    method: 'get'
+  });
+};
+
+/**
+ * 通过流程定义id获取xml
+ * @param processDefinitionId 流程定义id
+ * @returns
+ */
+export const definitionXml = (processDefinitionId: string): AxiosPromise<definitionXmlVO> => {
+  return request({
+    url: `/workflow/processDefinition/definitionXml/${processDefinitionId}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 删除流程定义
+ * @param deploymentId 部署id
+ * @param processDefinitionId 流程定义id
+ * @returns
+ */
+export const deleteProcessDefinition = (deploymentId: string | string[], processDefinitionId: string | string[]) => {
+  return request({
+    url: `/workflow/processDefinition/${deploymentId}/${processDefinitionId}`,
+    method: 'delete'
+  });
+};
+
+/**
+ * 挂起/激活
+ * @param processDefinitionId 流程定义id
+ * @returns
+ */
+export const updateDefinitionState = (processDefinitionId: string) => {
+  return request({
+    url: `/workflow/processDefinition/updateDefinitionState/${processDefinitionId}`,
+    method: 'put'
+  });
+};
+
+/**
+ * 流程定义转换为模型
+ * @param processDefinitionId 流程定义id
+ * @returns
+ */
+export const convertToModel = (processDefinitionId: string) => {
+  return request({
+    url: `/workflow/processDefinition/convertToModel/${processDefinitionId}`,
+    method: 'put'
+  });
+};
+
+/**
+ * 通过zip或xml部署流程定义
+ * @returns
+ */
+export function deployProcessFile(data: any) {
+  return request({
+    url: '/workflow/processDefinition/deployByFile',
+    method: 'post',
+    data: data,
+    headers: {
+      repeatSubmit: false
+    }
+  });
+}
+
+/**
+ * 迁移流程
+ * @param currentProcessDefinitionId
+ * @param fromProcessDefinitionId
+ * @returns
+ */
+export const migrationDefinition = (currentProcessDefinitionId: string, fromProcessDefinitionId: string) => {
+  return request({
+    url: `/workflow/processDefinition/migrationDefinition/${currentProcessDefinitionId}/${fromProcessDefinitionId}`,
+    method: 'put'
+  });
+};
diff --git a/src/api/workflow/processDefinition/types.ts b/src/api/workflow/processDefinition/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..979ec253aebdce3e7c9e94974192ec77ad6b15a4
--- /dev/null
+++ b/src/api/workflow/processDefinition/types.ts
@@ -0,0 +1,24 @@
+import { DefinitionConfigVO } from '@/api/workflow/definitionConfig/types';
+export interface ProcessDefinitionQuery extends PageQuery {
+  key?: string;
+  name?: string;
+  categoryCode?: string;
+}
+
+export interface ProcessDefinitionVO extends BaseEntity {
+  id: string;
+  name: string;
+  key: string;
+  version: number;
+  suspensionState: number;
+  resourceName: string;
+  diagramResourceName: string;
+  deploymentId: string;
+  deploymentTime: string;
+  wfDefinitionConfigVo: DefinitionConfigVO;
+}
+
+export interface definitionXmlVO {
+  xml: string[];
+  xmlStr: string;
+}
diff --git a/src/api/workflow/processInstance/index.ts b/src/api/workflow/processInstance/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..80f122f19d16578d9bf9b39162f70d5c10161c84
--- /dev/null
+++ b/src/api/workflow/processInstance/index.ts
@@ -0,0 +1,136 @@
+import request from '@/utils/request';
+import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types';
+import { AxiosPromise } from 'axios';
+
+/**
+ * 查询运行中实例列表
+ * @param query
+ * @returns {*}
+ */
+export const getPageByRunning = (query: ProcessInstanceQuery): AxiosPromise<ProcessInstanceVO[]> => {
+  return request({
+    url: '/workflow/processInstance/getPageByRunning',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询已完成实例列表
+ * @param query
+ * @returns {*}
+ */
+export const getPageByFinish = (query: ProcessInstanceQuery): AxiosPromise<ProcessInstanceVO[]> => {
+  return request({
+    url: '/workflow/processInstance/getPageByFinish',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 通过流程实例id获取历史流程图
+ */
+export const getHistoryImage = (processInstanceId: string) => {
+  return request({
+    url: `/workflow/processInstance/getHistoryImage/${processInstanceId}` + '?t' + Math.random(),
+    method: 'get'
+  });
+};
+
+/**
+ * 通过流程实例id获取历史流程图运行中，历史等节点
+ */
+export const getHistoryList = (instanceId: string): AxiosPromise<Record<string, any>> => {
+  return request({
+    url: `/workflow/processInstance/getHistoryList/${instanceId}` + '?t' + Math.random(),
+    method: 'get'
+  });
+};
+
+/**
+ * 获取审批记录
+ * @param processInstanceId 流程实例id
+ * @returns
+ */
+export const getHistoryRecord = (processInstanceId: string) => {
+  return request({
+    url: `/workflow/processInstance/getHistoryRecord/${processInstanceId}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 作废
+ * @param data 参数
+ * @returns
+ */
+export const deleteRunInstance = (data: object) => {
+  return request({
+    url: `/workflow/processInstance/deleteRunInstance`,
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 运行中的实例 删除程实例，删除历史记录，删除业务与流程关联信息
+ * @param processInstanceId 流程实例id
+ * @returns
+ */
+export const deleteRunAndHisInstance = (processInstanceId: string | string[]) => {
+  return request({
+    url: `/workflow/processInstance/deleteRunAndHisInstance/${processInstanceId}`,
+    method: 'delete'
+  });
+};
+
+/**
+ * 已完成的实例 删除程实例，删除历史记录，删除业务与流程关联信息
+ * @param processInstanceId 流程实例id
+ * @returns
+ */
+export const deleteFinishAndHisInstance = (processInstanceId: string | string[]) => {
+  return request({
+    url: `/workflow/processInstance/deleteFinishAndHisInstance/${processInstanceId}`,
+    method: 'delete'
+  });
+};
+
+/**
+ * 分页查询当前登录人单据
+ * @param query
+ * @returns {*}
+ */
+export const getPageByCurrent = (query: ProcessInstanceQuery): AxiosPromise<ProcessInstanceVO[]> => {
+  return request({
+    url: '/workflow/processInstance/getPageByCurrent',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 撤销流程
+ * @param processInstanceId 流程实例id
+ * @returns
+ */
+export const cancelProcessApply = (processInstanceId: string) => {
+  return request({
+    url: `/workflow/processInstance/cancelProcessApply/${processInstanceId}`,
+    method: 'post'
+  });
+};
+
+export default {
+  getPageByRunning,
+  getPageByFinish,
+  getHistoryImage,
+  getHistoryList,
+  getHistoryRecord,
+  deleteRunInstance,
+  deleteRunAndHisInstance,
+  deleteFinishAndHisInstance,
+  getPageByCurrent,
+  cancelProcessApply
+};
diff --git a/src/api/workflow/processInstance/types.ts b/src/api/workflow/processInstance/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..99d0511acf039efa99f152e7167fe21c4fe7dfee
--- /dev/null
+++ b/src/api/workflow/processInstance/types.ts
@@ -0,0 +1,27 @@
+import { TaskVO } from '@/api/workflow/task/types';
+
+export interface ProcessInstanceQuery extends PageQuery {
+  categoryCode?: string;
+  name?: string;
+  key?: string;
+  startUserId?: string;
+  businessKey?: string;
+}
+
+export interface ProcessInstanceVO extends BaseEntity {
+  id: string;
+  processDefinitionId: string;
+  processDefinitionName: string;
+  processDefinitionKey: string;
+  processDefinitionVersion: string;
+  deploymentId: string;
+  businessKey: string;
+  isSuspended?: any;
+  tenantId: string;
+  startTime: string;
+  endTime?: string;
+  startUserId: string;
+  businessStatus: string;
+  businessStatusName: string;
+  taskVoList: TaskVO[];
+}
diff --git a/src/api/workflow/task/index.ts b/src/api/workflow/task/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d29de30dea8ff090950717f450f37e6acb7bfa0a
--- /dev/null
+++ b/src/api/workflow/task/index.ts
@@ -0,0 +1,264 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { TaskQuery, TaskVO } from '@/api/workflow/task/types';
+
+/**
+ * 查询待办列表
+ * @param query
+ * @returns {*}
+ */
+export const getPageByTaskWait = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
+  return request({
+    url: '/workflow/task/getPageByTaskWait',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询已办列表
+ * @param query
+ * @returns {*}
+ */
+export const getPageByTaskFinish = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
+  return request({
+    url: '/workflow/task/getPageByTaskFinish',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询当前用户的抄送列表
+ * @param query
+ * @returns {*}
+ */
+export const getPageByTaskCopy = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
+  return request({
+    url: '/workflow/task/getPageByTaskCopy',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 当前租户所有待办任务
+ * @param query
+ * @returns {*}
+ */
+export const getPageByAllTaskWait = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
+  return request({
+    url: '/workflow/task/getPageByAllTaskWait',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 当前租户所有已办任务
+ * @param query
+ * @returns {*}
+ */
+export const getPageByAllTaskFinish = (query: TaskQuery): AxiosPromise<TaskVO[]> => {
+  return request({
+    url: '/workflow/task/getPageByAllTaskFinish',
+    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 taskId
+ * @returns {*}
+ */
+export const claim = (taskId: string): any => {
+  return request({
+    url: '/workflow/task/claim/' + taskId,
+    method: 'post'
+  });
+};
+
+/**
+ * 归还任务
+ * @param taskId
+ * @returns {*}
+ */
+export const returnTask = (taskId: string): any => {
+  return request({
+    url: '/workflow/task/returnTask/' + taskId,
+    method: 'post'
+  });
+};
+
+/**
+ * 任务驳回
+ * @param data
+ * @returns {*}
+ */
+export const backProcess = (data: any): any => {
+  return request({
+    url: '/workflow/task/backProcess',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 获取当前任务
+ * @param taskId
+ * @returns
+ */
+export const getTaskById = (taskId: string) => {
+  return request({
+    url: '/workflow/task/getTaskById/' + taskId,
+    method: 'get'
+  });
+};
+
+/**
+ * 加签
+ * @param data
+ * @returns
+ */
+export const addMultiInstanceExecution = (data: any) => {
+  return request({
+    url: '/workflow/task/addMultiInstanceExecution',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 减签
+ * @param data
+ * @returns
+ */
+export const deleteMultiInstanceExecution = (data: any) => {
+  return request({
+    url: '/workflow/task/deleteMultiInstanceExecution',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改任务办理人
+ * @param taskIds
+ * @param userId
+ * @returns
+ */
+export const updateAssignee = (taskIds: Array<string>, userId: string) => {
+  return request({
+    url: `/workflow/task/updateAssignee/${taskIds}/${userId}`,
+    method: 'put'
+  });
+};
+
+/**
+ * 转办任务
+ * @returns
+ */
+export const transferTask = (data: any) => {
+  return request({
+    url: `/workflow/task/transferTask`,
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 终止任务
+ * @returns
+ */
+export const terminationTask = (data: any) => {
+  return request({
+    url: `/workflow/task/terminationTask`,
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 查询流程变量
+ * @returns
+ */
+export const getInstanceVariable = (taskId: string) => {
+  return request({
+    url: `/workflow/task/getInstanceVariable/${taskId}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 获取可驳回得任务节点
+ * @returns
+ */
+export const getTaskNodeList = (processInstanceId: string) => {
+  return request({
+    url: `/workflow/task/getTaskNodeList/${processInstanceId}`,
+    method: 'get'
+  });
+};
+
+/**
+ * 委托任务
+ * @returns
+ */
+export const delegateTask = (data: any) => {
+  return request({
+    url: `/workflow/task/delegateTask`,
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 查询工作流任务用户选择加签人员
+ * @param taskId
+ * @returns {*}
+ */
+export const getTaskUserIdsByAddMultiInstance = (taskId: string) => {
+  return request({
+    url: '/workflow/task/getTaskUserIdsByAddMultiInstance/' + taskId,
+    method: 'get'
+  });
+};
+
+/**
+ * 查询工作流选择减签人员
+ * @param taskId
+ * @returns {*}
+ */
+export const getListByDeleteMultiInstance = (taskId: string) => {
+  return request({
+    url: '/workflow/task/getListByDeleteMultiInstance/' + taskId,
+    method: 'get'
+  });
+};
diff --git a/src/api/workflow/task/types.ts b/src/api/workflow/task/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0425a1a75517620caf641bbaf99e2cb7ab1b17d0
--- /dev/null
+++ b/src/api/workflow/task/types.ts
@@ -0,0 +1,49 @@
+import { NodeConfigVO } from '@/api/workflow/nodeConfig/types';
+import { DefinitionConfigVO } from '@/api/workflow/definitionConfig/types';
+export interface TaskQuery extends PageQuery {
+  name?: string;
+  processDefinitionKey?: string;
+  processDefinitionName?: string;
+}
+
+export interface ParticipantVo {
+  groupIds?: string[] | number[];
+  candidate: string[] | number[];
+  candidateName: string[];
+  claim: boolean;
+}
+
+export interface TaskVO extends BaseEntity {
+  id: string;
+  name: string;
+  description?: string;
+  priority: number;
+  owner?: string;
+  assignee?: string | number;
+  assigneeName?: string;
+  processInstanceId: string;
+  executionId: string;
+  taskDefinitionId?: any;
+  processDefinitionId: string;
+  endTime?: string;
+  taskDefinitionKey: string;
+  dueDate?: string;
+  category?: any;
+  parentTaskId?: any;
+  tenantId: string;
+  claimTime?: string;
+  businessStatus?: string;
+  businessStatusName?: string;
+  processDefinitionName?: string;
+  processDefinitionKey?: string;
+  participantVo?: ParticipantVo;
+  multiInstance?: boolean;
+  businessKey?: string;
+  wfNodeConfigVo?: NodeConfigVO;
+  wfDefinitionConfigVo?: DefinitionConfigVO;
+}
+
+export interface VariableVo {
+  key: string;
+  value: string;
+}
diff --git a/src/api/workflow/workflowCommon/index.ts b/src/api/workflow/workflowCommon/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a90216aa696c6ecd676eebcedc6d0e4aa0d1da72
--- /dev/null
+++ b/src/api/workflow/workflowCommon/index.ts
@@ -0,0 +1,29 @@
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+
+export default {
+    routerJump(routerJumpVo: RouterJumpVo,proxy){
+        if (routerJumpVo.wfNodeConfigVo && routerJumpVo.wfNodeConfigVo.formType === 'static' && routerJumpVo.wfNodeConfigVo.wfFormManageVo) {
+            proxy.$tab.closePage(proxy.$route);
+            proxy.$router.push({
+                path: `${routerJumpVo.wfNodeConfigVo.wfFormManageVo.router}`,
+                query: {
+                    id: routerJumpVo.businessKey,
+                    type: routerJumpVo.type,
+                    taskId: routerJumpVo.taskId
+                }
+            });
+        } else if (routerJumpVo.wfNodeConfigVo && routerJumpVo.wfNodeConfigVo.formType === 'dynamic' && routerJumpVo.wfNodeConfigVo.wfFormManageVo) {
+            proxy.$tab.closePage(proxy.$route);
+            proxy.$router.push({
+                path: `${routerJumpVo.wfNodeConfigVo.wfFormManageVo.router}`,
+                query: {
+                    id: routerJumpVo.businessKey,
+                    type: routerJumpVo.type,
+                    taskId: routerJumpVo.taskId
+                }
+            });
+        }else {
+            proxy?.$modal.msgError('请到模型配置菜单！');
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/api/workflow/workflowCommon/types.ts b/src/api/workflow/workflowCommon/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0f1ef1f6f0b73a0f62468690804f86d0dfff9fac
--- /dev/null
+++ b/src/api/workflow/workflowCommon/types.ts
@@ -0,0 +1,16 @@
+import { NodeConfigVO } from '@/api/workflow/nodeConfig/types';
+import { DefinitionConfigVO } from '@/api/workflow/definitionConfig/types';
+
+export interface RouterJumpVo {
+  wfNodeConfigVo: NodeConfigVO;
+  wfDefinitionConfigVo: DefinitionConfigVO;
+  businessKey: string;
+  taskId: string;
+  type: string;
+}
+
+export interface StartProcessBo {
+  businessKey: string | number;
+  tableName: string;
+  variables: any;
+}
diff --git a/src/assets/icons/svg/caret-back.svg b/src/assets/icons/svg/caret-back.svg
new file mode 100644
index 0000000000000000000000000000000000000000..9bae722337a5dd2c80391ebaaa48966c2e2e9d98
--- /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 0000000000000000000000000000000000000000..1ec3f7d0179c2a998cee507aae88b3dc03ca4901
--- /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/category.svg b/src/assets/icons/svg/category.svg
new file mode 100644
index 0000000000000000000000000000000000000000..df92526d20e0199c53176a218fce8ba117906cb9
--- /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/finish.svg b/src/assets/icons/svg/finish.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4685c232b407777031deba62f3a47243aa1f826a
--- /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/model.svg b/src/assets/icons/svg/model.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0c57d70602055fc6cb16fdaab6ee4368e8e5e87c
--- /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/my-copy.svg b/src/assets/icons/svg/my-copy.svg
new file mode 100644
index 0000000000000000000000000000000000000000..49f69fa062bf77e27384556dfa1e19d886a10f89
--- /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 0000000000000000000000000000000000000000..1f1ea447be3d5066e1e129ecdd91a1ae0d540077
--- /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/process-definition.svg b/src/assets/icons/svg/process-definition.svg
new file mode 100644
index 0000000000000000000000000000000000000000..202d20038985277596ef34c22df300e376fbb2fe
--- /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/topiam.svg b/src/assets/icons/svg/topiam.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e7ea0577b790fc6257cc255614d5b753713d2a5e
--- /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/waiting.svg b/src/assets/icons/svg/waiting.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2c2042d6cb15b7c69c5ceb314649919f480d1be5
--- /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/workflow.svg b/src/assets/icons/svg/workflow.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2f7423a53c3c37f3130b4b854d05603495862cad
--- /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/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index 43c093c9dbe3805ab2c687bdf13dcae0a17888eb..220e4ac8f541b39466c36208222543e8e341f4b1 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -1,4 +1,15 @@
-// cover some element-ui styles
+
+.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;
@@ -68,6 +79,12 @@
       .el-dialog__body {
         padding: 15px !important;
       }
+      .el-dialog__header {
+        padding: 16px 16px 8px 16px;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--brder-color);
+        margin-right: 0;
+      }
     }
   }
 }
@@ -114,3 +131,19 @@
 .el-dropdown .el-dropdown-link {
   color: var(--el-color-primary) !important;
 }
+
+/* 当 el-form 的 inline 属性为 true 时 */
+/* 设置 label 的宽度默认为 68px */
+.el-form--inline .el-form-item__label {
+  width: 68px;
+}
+
+/* 设置 el-select 的宽度默认为 240px */
+.el-form--inline .el-select {
+  width: 240px;
+}
+
+/* 设置 el-input 的宽度默认为 240px */
+.el-form--inline .el-input {
+  width: 240px;
+}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 48865fba7be664141e6d1ab3d2473c20a57c0edc..bdf9b03223e294c060a25942185b9ef2ab560d63 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -14,7 +14,14 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family:
+    Helvetica Neue,
+    Helvetica,
+    PingFang SC,
+    Hiragino Sans GB,
+    Microsoft YaHei,
+    Arial,
+    sans-serif;
 }
 
 label {
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index d47a2bd5e9488cbd55b3a8107321c90587658fe2..d85da5541ce1af7746dc98d53dbc10b254b538f6 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -28,7 +28,10 @@
 
     // reset element-ui css
     .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+      transition:
+        0s width ease-in-out,
+        0s padding-left ease-in-out,
+        0s padding-right ease-in-out;
     }
 
     .scrollbar-wrapper {
@@ -106,7 +109,6 @@
       }
     }
 
-
     & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
       background-color: $base-sub-menu-background !important;
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index d07d3d4621bf75a2d762804c63f6ce2fdbf773df..92fc34d508d9dd70da51f216c99684e5800430be 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -13,6 +13,14 @@
   --fixedHeaderBg: #ffffff;
   --tableHeaderBg: #f8f8f9;
   --tableHeaderTextColor: #515a6e;
+
+  // 工作流
+  --bpmn-panel-border: #eeeeee;
+  --bpmn-panel-box-shadow: #cccccc;
+  --bpmn-panel-bar-background-color: #f5f7fa;
+
+  // ele
+  --brder-color: #e8e8e8
 }
 html.dark {
   --menuBg: #1d1e1f;
@@ -33,6 +41,26 @@ html.dark {
   .el-tree-node__content {
     --el-color-primary-light-9: #262727;
   }
+  // vxe-table 主题
+  --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;
+
+  // 工作流
+  --bpmn-panel-border: #37373A;
+  --bpmn-panel-box-shadow: #37373A;
+  --bpmn-panel-bar-background-color: #37373A;
+
+  // ele
+  --brder-color: #37373A
 }
 
 // base color
diff --git a/src/bpmn/assets/defaultXML.ts b/src/bpmn/assets/defaultXML.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dff0349505cfb52217e269ff0a53234754106f1f
--- /dev/null
+++ b/src/bpmn/assets/defaultXML.ts
@@ -0,0 +1,23 @@
+function generateRandomValue() {
+  // 生成一个随机数
+  const randomValue = Math.random().toString(36).slice(2, 12);
+  return `Process_${randomValue}`;
+}
+
+const cartage: string = 'default';
+export default `<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
+  <process id="process_${generateRandomValue()}" name="name_${generateRandomValue()}">
+    <startEvent id="startNode1" name="开始" />
+  </process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">
+    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
+      <bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke="">
+        <omgdc:Bounds x="240" y="200" width="30" height="30" />
+        <bpmndi:BPMNLabel>
+          <omgdc:Bounds x="242" y="237" width="23" height="14" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</definitions>`;
diff --git a/src/bpmn/assets/lang/zh.ts b/src/bpmn/assets/lang/zh.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ee0c5de3c80d509bb376dda0884ee6aab36a7545
--- /dev/null
+++ b/src/bpmn/assets/lang/zh.ts
@@ -0,0 +1,126 @@
+export const NodeName = {
+  'bpmn:Process': '流程',
+  'bpmn:StartEvent': '开始事件',
+  'bpmn:IntermediateThrowEvent': '中间事件',
+  'bpmn:Task': '任务',
+  'bpmn:SendTask': '发送任务',
+  'bpmn:ReceiveTask': '接收任务',
+  'bpmn:UserTask': '用户任务',
+  'bpmn:ManualTask': '手工任务',
+  'bpmn:BusinessRuleTask': '业务规则任务',
+  'bpmn:ServiceTask': '服务任务',
+  'bpmn:ScriptTask': '脚本任务',
+  'bpmn:EndEvent': '结束事件',
+  'bpmn:SequenceFlow': '流程线',
+  'bpmn:ExclusiveGateway': '互斥网关',
+  'bpmn:ParallelGateway': '并行网关',
+  'bpmn:InclusiveGateway': '相容网关',
+  'bpmn:ComplexGateway': '复杂网关',
+  'bpmn:EventBasedGateway': '事件网关',
+  'bpmn:Participant': '池/参与者',
+  'bpmn:SubProcess': '子流程',
+  'bpmn:DataObjectReference': '数据对象引用',
+  'bpmn:DataStoreReference': '数据存储引用',
+  'bpmn:Group': '组'
+};
+
+export default {
+  'Activate hand tool': '启动手动工具',
+  'Activate lasso tool': '启动 Lasso 工具',
+  'Activate create/remove space tool': '启动创建/删除空间工具',
+  'Activate global connect tool': '启动全局连接工具',
+  'Ad-hoc': 'Ad-hoc',
+  'Add lane above': '在上方添加泳道',
+  'Add lane below': '在下方添加泳道',
+  'Business rule task': '规则任务',
+  'Call activity': '引用流程',
+  'Compensation end event': '结束补偿事件',
+  'Compensation intermediate throw event': '中间补偿抛出事件',
+  'Complex gateway': '复杂网关',
+  'Conditional intermediate catch event': '中间条件捕获事件',
+  'Conditional start event (non-interrupting)': '条件启动事件 (非中断)',
+  'Conditional start event': '条件启动事件',
+  'Connect using association': '文本关联',
+  'Connect using sequence/message flow or association': '消息关联',
+  'Change element': '更改元素',
+  'Change type': '更改类型',
+  'Create data object reference': '创建数据对象引用',
+  'Create data store reference': '创建数据存储引用',
+  'Create expanded sub-process': '创建可折叠子流程',
+  'Create pool/participant': '创建池/参与者',
+  'Collection': '集合',
+  'Connect using data input association': '数据输入关联',
+  'Data store reference': '数据存储引用',
+  'Data object reference': '数据对象引用',
+  'Divide into two lanes': '分成两个泳道',
+  'Divide into three lanes': '分成三个泳道',
+  'End event': '结束事件',
+  'Error end event': '结束错误事件',
+  'Escalation end event': '结束升级事件',
+  'Escalation intermediate throw event': '中间升级抛出事件',
+  'Event sub-process': '事件子流程',
+  'Event-based gateway': '事件网关',
+  'Exclusive gateway': '互斥网关',
+  'Empty pool/participant (removes content)': '清空池/参与者 (删除内容)',
+  'Empty pool/participant': '清空池/参与者',
+  'Expanded pool/participant': '展开池/参与者',
+  'Inclusive gateway': '相容网关',
+  'Intermediate throw event': '中间抛出事件',
+  'Loop': '循环',
+  'Link intermediate catch event': '中间链接捕获事件',
+  'Link intermediate throw event': '中间链接抛出事件',
+  'Manual task': '手动任务',
+  'Message end event': '结束消息事件',
+  'Message intermediate catch event': '中间消息捕获事件',
+  'Message intermediate throw event': '中间消息抛出事件',
+  'Message start event': '消息启动事件',
+  'Parallel gateway': '并行网关',
+  'Parallel multi-instance': '并行多实例',
+  'Participant multiplicity': '参与者多重性',
+  'Receive task': '接受任务',
+  'Remove': '移除',
+  'Script task': '脚本任务',
+  'Send task': '发送任务',
+  'Sequential multi-instance': '串行多实例',
+  'Service task': '服务任务',
+  'Signal end event': '结束信号事件',
+  'Signal intermediate catch event': '中间信号捕获事件',
+  'Signal intermediate throw event': '中间信号抛出事件',
+  'Signal start event (non-interrupting)': '信号启动事件 (非中断)',
+  'Signal start event': '信号启动事件',
+  'Start event': '开始事件',
+  'Sub-process (collapsed)': '可折叠子流程',
+  'Sub-process (expanded)': '可展开子流程',
+  'Sub rocess': '子流程',
+  'Task': '任务',
+  'Transaction': '事务',
+  'Terminate end event': '终止边界事件',
+  'Timer intermediate catch event': '中间定时捕获事件',
+  'Timer start event (non-interrupting)': '定时启动事件 (非中断)',
+  'Timer start event': '定时启动事件',
+  'User task': '用户任务',
+  'Create start event': '创建开始事件',
+  'Create gateway': '创建网关',
+  'Create intermediate/boundary event': '创建中间/边界事件',
+  'Create end event': '创建结束事件',
+  'Create group': '创建组',
+  'Create startEvent': '开始节点',
+  'Create endEvent': '结束节点',
+  'Create exclusiveGateway': '互斥网关',
+  'Create parallelGateway': '并行网关',
+  'Create task': '任务节点',
+  'Create userTask': '用户任务节点',
+  'Condition type': '条件类型',
+  'Append end event': '追加结束事件节点',
+  'Append gateway': '追加网关节点',
+  'Append task': '追加任务',
+  'Append user task': '追加用户任务节点',
+  'Append text annotation': '追加文本注释',
+  'Append intermediate/boundary event': '追加中间或边界事件',
+  'Append receive task': '追加接收任务节点',
+  'Append message intermediate catch event': '追加中间消息捕获事件',
+  'Append timer intermediate catch event': '追加中间定时捕获事件',
+  'Append conditional intermediate catch event': '追加中间条件捕获事件',
+  'Append signal intermediate catch event': '追加中间信号捕获事件',
+  'flow elements must be children of pools/participants': '流程元素必须是池/参与者的子元素'
+};
diff --git a/src/bpmn/assets/moddle/flowable.ts b/src/bpmn/assets/moddle/flowable.ts
new file mode 100644
index 0000000000000000000000000000000000000000..de959a6e6270a378f0f5afd22566836a903f5ad3
--- /dev/null
+++ b/src/bpmn/assets/moddle/flowable.ts
@@ -0,0 +1,1250 @@
+export default {
+  'name': 'Flowable',
+  'uri': 'http://flowable.org/bpmn',
+  'prefix': 'flowable',
+  'xml': {
+    'tagAlias': 'lowerCase'
+  },
+  'associations': [],
+  'types': [
+    {
+      'name': 'flowable:extCandidateUsers',
+      'isAbstract': true,
+      'extends': [],
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['*']
+      },
+      'properties': [
+        {
+          'name': 'body',
+          'type': 'String',
+          'isBody': true
+        }
+      ]
+    },
+    {
+      'name': 'flowable:extAssignee',
+      'isAbstract': true,
+      'extends': [],
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['*']
+      },
+      'properties': [
+        {
+          'name': 'body',
+          'type': 'String',
+          'isBody': true
+        }
+      ]
+    },
+    {
+      'name': 'flowable:property',
+      'superClass': ['Element'],
+      'properties': [
+        {
+          'name': 'id',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'name',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'value',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'flowable:properties',
+      'isAbstract': true,
+      'extends': [],
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['*']
+      },
+      'properties': [
+        {
+          'name': 'values',
+          'type': 'flowable:property',
+          'isMany': true
+        }
+      ]
+    },
+    {
+      'name': 'InOutBinding',
+      'superClass': ['Element'],
+      'isAbstract': true,
+      'properties': [
+        {
+          'name': 'source',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'sourceExpression',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'target',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'businessKey',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'local',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': false
+        },
+        {
+          'name': 'variables',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'In',
+      'superClass': ['InOutBinding'],
+      'meta': {
+        'allowedIn': ['bpmn:CallActivity']
+      }
+    },
+    {
+      'name': 'Out',
+      'superClass': ['InOutBinding'],
+      'meta': {
+        'allowedIn': ['bpmn:CallActivity']
+      }
+    },
+    {
+      'name': 'AsyncCapable',
+      'isAbstract': true,
+      'extends': ['bpmn:Activity', 'bpmn:Gateway', 'bpmn:Event'],
+      'properties': [
+        {
+          'name': 'async',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': false
+        },
+        {
+          'name': 'asyncBefore',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': false
+        },
+        {
+          'name': 'asyncAfter',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': false
+        },
+        {
+          'name': 'exclusive',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': true
+        }
+      ]
+    },
+    {
+      'name': 'flowable:in',
+      'superClass': ['Element'],
+      'properties': [
+        {
+          'name': 'source',
+          'type': 'string',
+          'isAttr': true
+        },
+        {
+          'name': 'target',
+          'type': 'string',
+          'isAttr': true
+        }
+      ]
+    },
+    {
+      'name': 'flowable:out',
+      'superClass': ['Element'],
+      'properties': [
+        {
+          'name': 'source',
+          'type': 'string',
+          'isAttr': true
+        },
+        {
+          'name': 'target',
+          'type': 'string',
+          'isAttr': true
+        }
+      ]
+    },
+    {
+      'name': 'BoundaryEvent',
+      'superClass': ['CatchEvent'],
+      'properties': [
+        {
+          'name': 'cancelActivity',
+          'default': true,
+          'isAttr': true,
+          'type': 'Boolean'
+        },
+        {
+          'name': 'attachedToRef',
+          'type': 'Activity',
+          'isAttr': true,
+          'isReference': true
+        }
+      ]
+    },
+    {
+      'name': 'JobPriorized',
+      'isAbstract': true,
+      'extends': ['bpmn:Process', 'flowable:AsyncCapable'],
+      'properties': [
+        {
+          'name': 'jobPriority',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'SignalEventDefinition',
+      'isAbstract': true,
+      'extends': ['bpmn:SignalEventDefinition'],
+      'properties': [
+        {
+          'name': 'async',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': false
+        }
+      ]
+    },
+    {
+      'name': 'ErrorEventDefinition',
+      'isAbstract': true,
+      'extends': ['bpmn:ErrorEventDefinition'],
+      'properties': [
+        {
+          'name': 'errorCodeVariable',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'errorMessageVariable',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'Error',
+      'isAbstract': true,
+      'extends': ['bpmn:Error'],
+      'properties': [
+        {
+          'name': 'flowable:errorMessage',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'PotentialStarter',
+      'superClass': ['Element'],
+      'properties': [
+        {
+          'name': 'resourceAssignmentExpression',
+          'type': 'bpmn:ResourceAssignmentExpression'
+        }
+      ]
+    },
+    {
+      'name': 'UserTask',
+      'isAbstract': true,
+      'extends': ['bpmn:UserTask'],
+      'properties': [
+        {
+          'name': 'timerEventDefinition',
+          'type': 'Expression'
+        },
+        {
+          'name': 'multiInstanceLoopCharacteristics',
+          'type': 'MultiInstanceLoopCharacteristics'
+        }
+      ]
+    },
+    {
+      'name': 'StartEvent',
+      'isAbstract': true,
+      'extends': ['bpmn:StartEvent'],
+      'properties': [
+        {
+          'name': 'timerEventDefinition',
+          'type': 'Expression'
+        }
+      ]
+    },
+    {
+      'name': 'FormSupported',
+      'isAbstract': true,
+      'extends': ['bpmn:StartEvent', 'bpmn:UserTask'],
+      'properties': [
+        {
+          'name': 'formHandlerClass',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'formKey',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'TemplateSupported',
+      'isAbstract': true,
+      'extends': ['bpmn:Process', 'bpmn:FlowElement'],
+      'properties': [
+        {
+          'name': 'modelerTemplate',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'Initiator',
+      'isAbstract': true,
+      'extends': ['bpmn:StartEvent'],
+      'properties': [
+        {
+          'name': 'initiator',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'ScriptTask',
+      'isAbstract': true,
+      'extends': ['bpmn:ScriptTask'],
+      'properties': [
+        {
+          'name': 'resultVariable',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'resource',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'Process',
+      'isAbstract': true,
+      'extends': ['bpmn:Process'],
+      'properties': [
+        {
+          'name': 'candidateStarterGroups',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'candidateStarterUsers',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'versionTag',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'historyTimeToLive',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'isStartableInTasklist',
+          'isAttr': true,
+          'type': 'Boolean',
+          'default': true
+        }
+      ]
+    },
+    {
+      'name': 'EscalationEventDefinition',
+      'isAbstract': true,
+      'extends': ['bpmn:EscalationEventDefinition'],
+      'properties': [
+        {
+          'name': 'escalationCodeVariable',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'FormalExpression',
+      'isAbstract': true,
+      'extends': ['bpmn:FormalExpression'],
+      'properties': [
+        {
+          'name': 'resource',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'Assignable',
+      'extends': ['bpmn:UserTask'],
+      'properties': [
+        {
+          'name': 'candidateGroups',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'dueDate',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'followUpDate',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'priority',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'CallActivity',
+      'extends': ['bpmn:CallActivity'],
+      'properties': [
+        {
+          'name': 'calledElementBinding',
+          'isAttr': true,
+          'type': 'String',
+          'default': 'latest'
+        },
+        {
+          'name': 'calledElementVersion',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'calledElementVersionTag',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'calledElementTenantId',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'caseRef',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'caseBinding',
+          'isAttr': true,
+          'type': 'String',
+          'default': 'latest'
+        },
+        {
+          'name': 'caseVersion',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'caseTenantId',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'variableMappingClass',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'variableMappingDelegateExpression',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'ServiceTaskLike',
+      'extends': ['bpmn:ServiceTask', 'bpmn:BusinessRuleTask', 'bpmn:SendTask', 'bpmn:MessageEventDefinition'],
+      'properties': [
+        {
+          'name': 'expression',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'class',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'delegateExpression',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'resultVariable',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'ExclusiveGateway',
+      'isAbstract': true,
+      'extends': ['bpmn:ExclusiveGateway'],
+      'properties': [
+        {
+          'name': 'serviceClass',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'DmnCapable',
+      'extends': ['bpmn:BusinessRuleTask'],
+      'properties': [
+        {
+          'name': 'decisionRef',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'decisionRefBinding',
+          'isAttr': true,
+          'type': 'String',
+          'default': 'latest'
+        },
+        {
+          'name': 'decisionRefVersion',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'mapDecisionResult',
+          'isAttr': true,
+          'type': 'String',
+          'default': 'resultList'
+        },
+        {
+          'name': 'decisionRefTenantId',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'ExternalCapable',
+      'extends': ['flowable:ServiceTaskLike'],
+      'properties': [
+        {
+          'name': 'type',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'topic',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'TaskPriorized',
+      'extends': ['bpmn:Process', 'flowable:ExternalCapable'],
+      'properties': [
+        {
+          'name': 'taskPriority',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'Properties',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['*']
+      },
+      'properties': [
+        {
+          'name': 'values',
+          'type': 'Property',
+          'isMany': true
+        }
+      ]
+    },
+    {
+      'name': 'Property',
+      'superClass': ['Element'],
+      'properties': [
+        {
+          'name': 'id',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'name',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'value',
+          'type': 'String',
+          'isAttr': true
+        }
+      ]
+    },
+    {
+      'name': 'Connector',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['flowable:ServiceTaskLike']
+      },
+      'properties': [
+        {
+          'name': 'inputOutput',
+          'type': 'InputOutput'
+        },
+        {
+          'name': 'connectorId',
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'InputOutput',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['bpmn:FlowNode', 'flowable:Connector']
+      },
+      'properties': [
+        {
+          'name': 'inputOutput',
+          'type': 'InputOutput'
+        },
+        {
+          'name': 'connectorId',
+          'type': 'String'
+        },
+        {
+          'name': 'inputParameters',
+          'isMany': true,
+          'type': 'InputParameter'
+        },
+        {
+          'name': 'outputParameters',
+          'isMany': true,
+          'type': 'OutputParameter'
+        }
+      ]
+    },
+    {
+      'name': 'InputOutputParameter',
+      'properties': [
+        {
+          'name': 'name',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'value',
+          'isBody': true,
+          'type': 'String'
+        },
+        {
+          'name': 'definition',
+          'type': 'InputOutputParameterDefinition'
+        }
+      ]
+    },
+    {
+      'name': 'InputOutputParameterDefinition',
+      'isAbstract': true
+    },
+    {
+      'name': 'List',
+      'superClass': ['InputOutputParameterDefinition'],
+      'properties': [
+        {
+          'name': 'items',
+          'isMany': true,
+          'type': 'InputOutputParameterDefinition'
+        }
+      ]
+    },
+    {
+      'name': 'Map',
+      'superClass': ['InputOutputParameterDefinition'],
+      'properties': [
+        {
+          'name': 'entries',
+          'isMany': true,
+          'type': 'Entry'
+        }
+      ]
+    },
+    {
+      'name': 'Entry',
+      'properties': [
+        {
+          'name': 'key',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'value',
+          'isBody': true,
+          'type': 'String'
+        },
+        {
+          'name': 'definition',
+          'type': 'InputOutputParameterDefinition'
+        }
+      ]
+    },
+    {
+      'name': 'Value',
+      'superClass': ['InputOutputParameterDefinition'],
+      'properties': [
+        {
+          'name': 'id',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'name',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'value',
+          'isBody': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'Script',
+      'superClass': ['InputOutputParameterDefinition'],
+      'properties': [
+        {
+          'name': 'scriptFormat',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'resource',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'value',
+          'isBody': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'Field',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['flowable:ServiceTaskLike', 'flowable:ExecutionListener', 'flowable:TaskListener']
+      },
+      'properties': [
+        {
+          'name': 'name',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'expression',
+          'isAttr': true,
+          'type': 'expression'
+        },
+        {
+          'name': 'string',
+          'type': 'string'
+        },
+        {
+          'name': 'stringValue',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'string',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['flowable:Field']
+      },
+      'properties': [
+        {
+          'name': 'body',
+          'isBody': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'expression',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['flowable:Field']
+      },
+      'properties': [
+        {
+          'name': 'body',
+          'isBody': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'InputParameter',
+      'superClass': ['InputOutputParameter']
+    },
+    {
+      'name': 'OutputParameter',
+      'superClass': ['InputOutputParameter']
+    },
+    {
+      'name': 'Collectable',
+      'isAbstract': true,
+      'extends': ['bpmn:MultiInstanceLoopCharacteristics'],
+      'superClass': ['flowable:AsyncCapable'],
+      'properties': [
+        {
+          'name': 'collection',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'elementVariable',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'SequenceFlow',
+      'superClass': ['FlowElement'],
+      'properties': [
+        {
+          'name': 'isImmediate',
+          'isAttr': true,
+          'type': 'Boolean'
+        },
+        {
+          'name': 'conditionExpression',
+          'type': 'Expression'
+        },
+        {
+          'name': 'sourceRef',
+          'type': 'FlowNode',
+          'isAttr': true,
+          'isReference': true
+        },
+        {
+          'name': 'targetRef',
+          'type': 'FlowNode',
+          'isAttr': true,
+          'isReference': true
+        }
+      ]
+    },
+    {
+      'name': 'MultiInstanceLoopCharacteristics',
+      'superClass': ['LoopCharacteristics'],
+      'properties': [
+        {
+          'name': 'isSequential',
+          'default': false,
+          'isAttr': true,
+          'type': 'Boolean'
+        },
+        {
+          'name': 'behavior',
+          'type': 'MultiInstanceBehavior',
+          'default': 'All',
+          'isAttr': true
+        },
+        {
+          'name': 'loopCardinality',
+          'type': 'Expression',
+          'xml': {
+            'serialize': 'xsi:type'
+          }
+        },
+        {
+          'name': 'loopDataInputRef',
+          'type': 'ItemAwareElement',
+          'isReference': true
+        },
+        {
+          'name': 'loopDataOutputRef',
+          'type': 'ItemAwareElement',
+          'isReference': true
+        },
+        {
+          'name': 'inputDataItem',
+          'type': 'DataInput',
+          'xml': {
+            'serialize': 'property'
+          }
+        },
+        {
+          'name': 'outputDataItem',
+          'type': 'DataOutput',
+          'xml': {
+            'serialize': 'property'
+          }
+        },
+        {
+          'name': 'complexBehaviorDefinition',
+          'type': 'ComplexBehaviorDefinition',
+          'isMany': true
+        },
+        {
+          'name': 'completionCondition',
+          'type': 'Expression',
+          'xml': {
+            'serialize': 'xsi:type'
+          }
+        },
+        {
+          'name': 'oneBehaviorEventRef',
+          'type': 'EventDefinition',
+          'isAttr': true,
+          'isReference': true
+        },
+        {
+          'name': 'noneBehaviorEventRef',
+          'type': 'EventDefinition',
+          'isAttr': true,
+          'isReference': true
+        }
+      ]
+    },
+    {
+      'name': 'FailedJobRetryTimeCycle',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['flowable:AsyncCapable', 'bpmn:MultiInstanceLoopCharacteristics']
+      },
+      'properties': [
+        {
+          'name': 'body',
+          'isBody': true,
+          'type': 'String'
+        }
+      ]
+    },
+    {
+      'name': 'ExecutionListener',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': [
+          'bpmn:Task',
+          'bpmn:ServiceTask',
+          'bpmn:UserTask',
+          'bpmn:BusinessRuleTask',
+          'bpmn:ScriptTask',
+          'bpmn:ReceiveTask',
+          'bpmn:ManualTask',
+          'bpmn:ExclusiveGateway',
+          'bpmn:SequenceFlow',
+          'bpmn:ParallelGateway',
+          'bpmn:InclusiveGateway',
+          'bpmn:EventBasedGateway',
+          'bpmn:StartEvent',
+          'bpmn:IntermediateCatchEvent',
+          'bpmn:IntermediateThrowEvent',
+          'bpmn:EndEvent',
+          'bpmn:BoundaryEvent',
+          'bpmn:CallActivity',
+          'bpmn:SubProcess',
+          'bpmn:Process'
+        ]
+      },
+      'properties': [
+        {
+          'name': 'expression',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'class',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'delegateExpression',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'event',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'script',
+          'type': 'Script'
+        },
+        {
+          'name': 'fields',
+          'type': 'Field',
+          'isMany': true
+        }
+      ]
+    },
+    {
+      'name': 'TaskListener',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['bpmn:UserTask']
+      },
+      'properties': [
+        {
+          'name': 'expression',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'class',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'delegateExpression',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'event',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'script',
+          'type': 'Script'
+        },
+        {
+          'name': 'fields',
+          'type': 'Field',
+          'isMany': true
+        }
+      ]
+    },
+    {
+      'name': 'FormProperty',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['bpmn:StartEvent', 'bpmn:UserTask']
+      },
+      'properties': [
+        {
+          'name': 'id',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'name',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'type',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'required',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'readable',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'writable',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'variable',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'expression',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'datePattern',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'default',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'values',
+          'type': 'Value',
+          'isMany': true
+        }
+      ]
+    },
+    {
+      'name': 'FormData',
+      'superClass': ['Element'],
+      'meta': {
+        'allowedIn': ['bpmn:StartEvent', 'bpmn:UserTask']
+      },
+      'properties': [
+        {
+          'name': 'fields',
+          'type': 'FormField',
+          'isMany': true
+        },
+        {
+          'name': 'businessKey',
+          'type': 'String',
+          'isAttr': true
+        }
+      ]
+    },
+    {
+      'name': 'FormField',
+      'superClass': ['Element'],
+      'properties': [
+        {
+          'name': 'id',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'label',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'type',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'datePattern',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'defaultValue',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'properties',
+          'type': 'Properties'
+        },
+        {
+          'name': 'validation',
+          'type': 'Validation'
+        },
+        {
+          'name': 'values',
+          'type': 'Value',
+          'isMany': true
+        }
+      ]
+    },
+    {
+      'name': 'Validation',
+      'superClass': ['Element'],
+      'properties': [
+        {
+          'name': 'constraints',
+          'type': 'Constraint',
+          'isMany': true
+        }
+      ]
+    },
+    {
+      'name': 'Constraint',
+      'superClass': ['Element'],
+      'properties': [
+        {
+          'name': 'name',
+          'type': 'String',
+          'isAttr': true
+        },
+        {
+          'name': 'config',
+          'type': 'String',
+          'isAttr': true
+        }
+      ]
+    },
+    {
+      'name': 'ConditionalEventDefinition',
+      'isAbstract': true,
+      'extends': ['bpmn:ConditionalEventDefinition'],
+      'properties': [
+        {
+          'name': 'variableName',
+          'isAttr': true,
+          'type': 'String'
+        },
+        {
+          'name': 'variableEvent',
+          'isAttr': true,
+          'type': 'String'
+        }
+      ]
+    }
+  ],
+  'emumerations': []
+};
diff --git a/src/bpmn/assets/module/ContextPad/CustomContextPadProvider.ts b/src/bpmn/assets/module/ContextPad/CustomContextPadProvider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9f12ff24d1cf4c2a155faada59795abf4a4cc8a3
--- /dev/null
+++ b/src/bpmn/assets/module/ContextPad/CustomContextPadProvider.ts
@@ -0,0 +1,138 @@
+import ContextPadProvider from 'bpmn-js/lib/features/context-pad/ContextPadProvider';
+import { Injector } from 'didi';
+import EventBus from 'diagram-js/lib/core/EventBus';
+import ContextPad from 'diagram-js/lib/features/context-pad/ContextPad';
+import Modeling from 'bpmn-js/lib/features/modeling/Modeling.js';
+import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
+import Connect from 'diagram-js/lib/features/connect/Connect';
+import Create from 'diagram-js/lib/features/create/Create';
+import PopupMenu from 'diagram-js/lib/features/popup-menu/PopupMenu';
+import Canvas from 'diagram-js/lib/core/Canvas';
+import Rules from 'diagram-js/lib/features/rules/Rules';
+import { Element, Shape } from 'diagram-js/lib/model/Types';
+import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
+import modeler from '@/store/modules/modeler';
+
+// @Description: 增强元素连线事件
+
+class CustomContextPadProvider extends ContextPadProvider {
+  private _contextPad: ContextPad;
+  private _modeling: Modeling;
+  private _elementFactory: ElementFactory;
+  private _autoPlace: any;
+  private _connect: Connect;
+  private _create: Create;
+  private _popupMenu: PopupMenu;
+  private _canvas: Canvas;
+  private _rules: Rules;
+
+  constructor(
+    config: any,
+    injector: Injector,
+    eventBus: EventBus,
+    contextPad: ContextPad,
+    modeling: Modeling,
+    elementFactory: ElementFactory,
+    connect: Connect,
+    create: Create,
+    popupMenu: PopupMenu,
+    canvas: Canvas,
+    rules: Rules,
+    translate
+  ) {
+    // @ts-ignore
+    super(config, injector, eventBus, contextPad, modeling, elementFactory, connect, create, popupMenu, canvas, rules, translate);
+
+    this._contextPad = contextPad;
+    this._modeling = modeling;
+    this._elementFactory = elementFactory;
+    this._connect = connect;
+    this._create = create;
+    this._popupMenu = popupMenu;
+    this._canvas = canvas;
+    this._rules = rules;
+
+    this._autoPlace = injector.get('autoPlace', false);
+  }
+
+  getContextPadEntries(element: Element) {
+    const actions: Record<string, any> = {};
+
+    const appendUserTask = (event: Event, element: Shape) => {
+      const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' });
+      this._create.start(event, shape, {
+        source: element
+      });
+    };
+
+    const appendMultiInstanceUserTask = (event: Event, element: Shape) => {
+      const store = modeler();
+      const bpmnFactory = store.getModeler().get('bpmnFactory') as BpmnFactory;
+      const businessObject = bpmnFactory.create('bpmn:UserTask', {
+        // name: '多实例用户任务',
+        isForCompensation: false
+      });
+      businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
+      // 创建 Shape
+      const shape = this._elementFactory.createShape({
+        type: 'bpmn:UserTask',
+        businessObject: businessObject
+      });
+      this._create.start(event, shape, { source: element });
+    };
+
+    const appendTask = this._autoPlace
+      ? (event, element) => {
+          const bpmnFactory: BpmnFactory | undefined = modeler().getModeler().get('bpmnFactory');
+          const businessObject = bpmnFactory.create('bpmn:UserTask', {
+            // name: '多实例用户任务',// 右键创建显示
+            isForCompensation: false
+          });
+
+          // 创建多实例属性并分配给用户任务的 loopCharacteristics
+          businessObject.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
+
+          // 创建 Shape
+          const shape = this._elementFactory.createShape({
+            type: 'bpmn:UserTask',
+            businessObject: businessObject
+          });
+
+          this._autoPlace.append(element, shape);
+        }
+      : appendMultiInstanceUserTask;
+
+    const append = this._autoPlace
+      ? (event: Event, element: Shape) => {
+          const shape = this._elementFactory.createShape({ type: 'bpmn:UserTask' });
+          this._autoPlace.append(element, shape);
+        }
+      : appendUserTask;
+
+    // // 添加创建用户任务按钮
+    actions['append.append-user-task'] = {
+      group: 'model',
+      className: 'bpmn-icon-user-task',
+      title: '用户任务',
+      action: {
+        dragstart: appendUserTask,
+        click: append
+      }
+    };
+
+    // 添加创建多实例用户任务按钮
+    actions['append.append-multi-instance-user-task'] = {
+      group: 'model',
+      className: 'bpmn-icon-user', // 你可以使用多实例用户任务的图标  bpmn-icon-user   bpmn-icon-user-task
+      title: '多实例用户任务',
+      action: {
+        dragstart: appendMultiInstanceUserTask,
+        click: appendTask
+      }
+    };
+
+    return actions;
+  }
+}
+
+export default CustomContextPadProvider;
diff --git a/src/bpmn/assets/module/Palette/CustomPaletteProvider.ts b/src/bpmn/assets/module/Palette/CustomPaletteProvider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8556d9b94fb421a3b4014be38196ceaf2f00a16a
--- /dev/null
+++ b/src/bpmn/assets/module/Palette/CustomPaletteProvider.ts
@@ -0,0 +1,109 @@
+import { assign } from 'min-dash';
+import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
+import ElementFactory from 'bpmn-js/lib/features/modeling/ElementFactory';
+import Create from 'diagram-js/lib/features/create/Create';
+import SpaceTool from 'diagram-js/lib/features/space-tool/SpaceTool';
+import LassoTool from 'diagram-js/lib/features/lasso-tool/LassoTool';
+import HandTool from 'diagram-js/lib/features/hand-tool/HandTool';
+import GlobalConnect from 'diagram-js/lib/features/global-connect/GlobalConnect';
+import Palette from 'diagram-js/lib/features/palette/Palette';
+import modeler from '@/store/modules/modeler';
+import BpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
+
+// @Description: 增强左侧面板
+class CustomPaletteProvider extends PaletteProvider {
+  private readonly _palette: Palette;
+  private readonly _create: Create;
+  private readonly _elementFactory: ElementFactory;
+  private readonly _spaceTool: SpaceTool;
+  private readonly _lassoTool: LassoTool;
+  private readonly _handTool: HandTool;
+  private readonly _globalConnect: GlobalConnect;
+  private readonly _translate: any;
+
+  constructor(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
+    super(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate);
+    this._palette = palette;
+    this._create = create;
+    this._elementFactory = elementFactory;
+    this._spaceTool = spaceTool;
+    this._lassoTool = lassoTool;
+    this._handTool = handTool;
+    this._globalConnect = globalConnect;
+    this._translate = translate;
+  }
+
+  getPaletteEntries() {
+    const actions = {},
+      create = this._create,
+      elementFactory = this._elementFactory,
+      translate = this._translate;
+
+    function createAction(type: string, group: string, className: string, title: string, options?: object) {
+      function createListener(event) {
+        const shape = elementFactory.createShape(assign({ type: type }, options));
+        if (options) {
+          !shape.businessObject.di && (shape.businessObject.di = {});
+          shape.businessObject.di.isExpanded = (options as { [key: string]: any }).isExpanded;
+        }
+        create.start(event, shape, null);
+      }
+      const shortType = type.replace(/^bpmn:/, '');
+      return {
+        group: group,
+        className: className,
+        title: title || translate('Create {type}', { type: shortType }),
+        action: {
+          dragstart: createListener,
+          click: createListener
+        }
+      };
+    }
+
+    function createMultiInstanceUserTask(event) {
+      const bpmnFactory: BpmnFactory | undefined = modeler().getBpmnFactory();
+      // 创建一个 bpmn:UserTask
+      const userTask = bpmnFactory.create('bpmn:UserTask', {
+        // name: '多实例用户任务', // 在画板中显示字段
+        isForCompensation: false
+      });
+      // 将多实例属性分配给 bpmn:UserTask 的 loopCharacteristics
+      userTask.loopCharacteristics = bpmnFactory.create('bpmn:MultiInstanceLoopCharacteristics');
+      const customUserTask = elementFactory.createShape({
+        type: 'bpmn:UserTask',
+        businessObject: userTask // 分配创建的 userTask 到 businessObject
+      });
+      create.start(event, customUserTask, {});
+    }
+
+    assign(actions, {
+      'create.parallel-gateway': createAction('bpmn:ParallelGateway', 'gateway', 'bpmn-icon-gateway-parallel', '并行网关'),
+      'create.event-base-gateway': createAction('bpmn:EventBasedGateway', 'gateway', 'bpmn-icon-gateway-eventbased', '事件网关'),
+      // 分组线
+      'gateway-separator': {
+        group: 'gateway',
+        separator: true
+      },
+      'create.user-task': createAction('bpmn:UserTask', 'activity', 'bpmn-icon-user-task', '创建用户任务'),
+      'create.multi-instance-user-task': {
+        group: 'activity',
+        type: 'bpmn:UserTask',
+        className: 'bpmn-icon-user task-multi-instance',
+        title: '创建多实例用户任务',
+        action: {
+          click: createMultiInstanceUserTask,
+          dragstart: createMultiInstanceUserTask
+        }
+      },
+      'task-separator': {
+        group: 'activity',
+        separator: true
+      }
+    });
+    return actions;
+  }
+}
+
+CustomPaletteProvider['$inject'] = ['palette', 'create', 'elementFactory', 'spaceTool', 'lassoTool', 'handTool', 'globalConnect', 'translate'];
+
+export default CustomPaletteProvider;
diff --git a/src/bpmn/assets/module/Renderer/CustomRenderer.ts b/src/bpmn/assets/module/Renderer/CustomRenderer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6a4eb1a202d394d57c8871cb8f1066a3d399791f
--- /dev/null
+++ b/src/bpmn/assets/module/Renderer/CustomRenderer.ts
@@ -0,0 +1,56 @@
+import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
+import {
+  append as svgAppend,
+  attr as svgAttr,
+  create as svgCreate,
+  select as svgSelect,
+  selectAll as svgSelectAll,
+  clone as svgClone,
+  clear as svgClear,
+  remove as svgRemove
+} from 'tiny-svg';
+
+const HIGH_PRIORITY = 1500;
+export default class CustomRenderer extends BaseRenderer {
+  bpmnRenderer: BaseRenderer;
+  modeling: any;
+  constructor(eventBus, bpmnRenderer, modeling) {
+    super(eventBus, HIGH_PRIORITY);
+    this.bpmnRenderer = bpmnRenderer;
+    this.modeling = modeling;
+  }
+  canRender(element) {
+    // ignore labels
+    return !element.labelTarget;
+  }
+
+  /**
+   * 自定义节点图形
+   * @param {*} parentNode 当前元素的svgNode
+   * @param {*} element
+   * @returns
+   */
+  drawShape(parentNode, element) {
+    const shape = this.bpmnRenderer.drawShape(parentNode, element);
+    const { type, width, height } = element;
+    // 开始 填充绿色
+    if (type === 'bpmn:StartEvent') {
+      svgAttr(shape, { fill: '#77DF6D' });
+      return shape;
+    }
+    if (type === 'bpmn:EndEvent') {
+      svgAttr(shape, { fill: '#EE7B77' });
+      return shape;
+    }
+    if (type === 'bpmn:UserTask') {
+      svgAttr(shape, { fill: '#A9C4F8' });
+      return shape;
+    }
+    return shape;
+  }
+
+  getShapePath(shape) {
+    return this.bpmnRenderer.getShapePath(shape);
+  }
+}
+CustomRenderer['$inject'] = ['eventBus', 'bpmnRenderer'];
diff --git a/src/bpmn/assets/module/Translate/index.ts b/src/bpmn/assets/module/Translate/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6b52dae6097693dc9788bd074bff4449644fa2ac
--- /dev/null
+++ b/src/bpmn/assets/module/Translate/index.ts
@@ -0,0 +1,15 @@
+import zh from '../../lang/zh';
+
+const customTranslate = (template: any, replacements: any) => {
+  replacements = replacements || {};
+  template = zh[template] || template;
+  return template.replace(/{([^}]+)}/g, function (_: any, key: any) {
+    return replacements[key] || '{' + key + '}';
+  });
+};
+
+export const translateModule = {
+  translate: ['value', customTranslate]
+};
+
+export default translateModule;
diff --git a/src/bpmn/assets/module/index.ts b/src/bpmn/assets/module/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..55f6b9fd6aee730dc8411e845a54e2adb594cce7
--- /dev/null
+++ b/src/bpmn/assets/module/index.ts
@@ -0,0 +1,17 @@
+// 翻译模块
+import TranslationModule from './Translate';
+import { ModuleDeclaration } from 'didi';
+import CustomPaletteProvider from './Palette/CustomPaletteProvider';
+import CustomRenderer from './Renderer/CustomRenderer';
+import CustomContextPadProvider from './ContextPad/CustomContextPadProvider';
+
+const Module: ModuleDeclaration[] = [
+  {
+    __init__: ['customPaletteProvider', 'customContextPadProvider', 'customRenderer'],
+    customPaletteProvider: ['type', CustomPaletteProvider],
+    customRenderer: ['type', CustomRenderer],
+    customContextPadProvider: ['type', CustomContextPadProvider]
+  },
+  TranslationModule
+];
+export default Module;
diff --git a/src/bpmn/assets/showConfig.ts b/src/bpmn/assets/showConfig.ts
new file mode 100644
index 0000000000000000000000000000000000000000..853eb3587edbaf812b9c53eb452ed195cbe6f92a
--- /dev/null
+++ b/src/bpmn/assets/showConfig.ts
@@ -0,0 +1,50 @@
+export default {
+  'bpmn:EndEvent': {},
+  'bpmn:StartEvent': {
+    initiator: true,
+    formKey: true
+  },
+  'bpmn:UserTask': {
+    allocationType: true,
+    specifyDesc: true,
+    multipleUserAuditType: true,
+    async: true,
+    priority: true,
+    skipExpression: true,
+    dueDate: true,
+    taskListener: true,
+    executionListener: true
+  },
+  'bpmn:ServiceTask': {
+    async: true,
+    skipExpression: true,
+    isForCompensation: true,
+    triggerable: true,
+    class: true
+  },
+  'bpmn:ScriptTask': {
+    async: true,
+    isForCompensation: true,
+    autoStoreVariables: true
+  },
+  'bpmn:ManualTask': {
+    async: true,
+    isForCompensation: true
+  },
+  'bpmn:ReceiveTask': {
+    async: true,
+    isForCompensation: true
+  },
+  'bpmn:SendTask': {
+    async: true,
+    isForCompensation: true
+  },
+  'bpmn:BusinessRuleTask': {
+    async: true,
+    isForCompensation: true,
+    ruleVariablesInput: true,
+    rules: true,
+    resultVariable: true,
+    exclude: true
+  }
+};
diff --git a/src/bpmn/assets/style/index.scss b/src/bpmn/assets/style/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3c927920f75f7f4300d8d86cdddc35364cd3ef08
--- /dev/null
+++ b/src/bpmn/assets/style/index.scss
@@ -0,0 +1,284 @@
+.djs-palette {
+  width: 300px;
+
+  .bpmn-icon-hand-tool:hover {
+    &:after {
+      content: '启动手动工具';
+      position: absolute;
+      left: 45px;
+      width: 120px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-lasso-tool:hover {
+    &:after {
+      content: '启动套索工具';
+      position: absolute;
+      left: 100px;
+      width: 120px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-space-tool:hover {
+    &:after {
+      content: '启动创建/删除空间工具';
+      position: absolute;
+      left: 45px;
+      width: 170px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-connection-multi:hover {
+    &:after {
+      content: '启动全局连接工具';
+      position: absolute;
+      left: 100px;
+      width: 140px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-start-event-none:hover {
+    &:after {
+      content: '创建开始事件';
+      position: absolute;
+      left: 45px;
+      width: 120px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-intermediate-event-none:hover {
+    &:after {
+      content: '创建中间/边界事件';
+      position: absolute;
+      left: 100px;
+      width: 140px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-end-event-none:hover {
+    &:after {
+      content: '创建结束事件';
+      position: absolute;
+      left: 45px;
+      width: 120px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-gateway-none:hover {
+    &:after {
+      content: '创建网关';
+      position: absolute;
+      left: 100px;
+      width: 90px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-gateway-parallel:hover {
+    &:after {
+      content: '创建并行网关';
+      position: absolute;
+      left: 45px;
+      width: 120px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-gateway-eventbased:hover {
+    &:after {
+      content: '创建事件网关';
+      position: absolute;
+      left: 100px;
+      width: 120px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-task:hover {
+    &:after {
+      content: '创建任务';
+      position: absolute;
+      left: 45px;
+      width: 80px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-subprocess-expanded:hover {
+    &:after {
+      content: '创建可折叠子流程';
+      position: absolute;
+      left: 100px;
+      width: 140px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-user-task:hover {
+    &:after {
+      content: '创建用户任务';
+      position: absolute;
+      left: 45px;
+      width: 120px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+
+  .task-multi-instance:hover {
+    &:after {
+      content: '创建多实例用户任务';
+      position: absolute;
+      left: 100px;
+      width: 160px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-participant:hover {
+    &:after {
+      content: '创建泳池/泳道';
+      position: absolute;
+      left: 45px;
+      width: 120px;
+      font-size: 15px;
+      font-weight: bold;
+      color: #3a84de;
+      border-radius: 2px;
+      border: 1px solid #cccccc;
+      background-color: #fafafa;
+      opacity: 0.8;
+    }
+  }
+  .bpmn-icon-data-object {
+    display: none;
+    &:hover {
+      &:after {
+        content: '创建数据对象';
+        position: absolute;
+        left: 45px;
+        width: 120px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #3a84de;
+        border-radius: 2px;
+        border: 1px solid #cccccc;
+        background-color: #fafafa;
+        opacity: 0.8;
+      }
+    }
+  }
+  .bpmn-icon-data-store {
+    display: none;
+    &:hover {
+      &:after {
+        content: '创建数据存储';
+        position: absolute;
+        left: 100px;
+        width: 120px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #3a84de;
+        border-radius: 2px;
+        border: 1px solid #cccccc;
+        background-color: #fafafa;
+        opacity: 0.8;
+      }
+    }
+  }
+  .bpmn-icon-group {
+    display: none;
+    &:hover {
+      &:after {
+        content: '创建分组';
+        position: absolute;
+        left: 100px;
+        width: 100px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #3a84de;
+        border-radius: 2px;
+        border: 1px solid #cccccc;
+        background-color: #fafafa;
+        opacity: 0.8;
+      }
+    }
+  }
+}
diff --git a/src/bpmn/hooks/usePanel.ts b/src/bpmn/hooks/usePanel.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d92b7d735ae23255beb0c8fe6a3fc5ea181d221c
--- /dev/null
+++ b/src/bpmn/hooks/usePanel.ts
@@ -0,0 +1,145 @@
+import showConfig from '../assets/showConfig';
+import { ModdleElement } from 'bpmn';
+import useModelerStore from '@/store/modules/modeler';
+import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
+interface Options {
+  element: ModdleElement;
+}
+
+export default (ops: Options) => {
+  const { element } = ops;
+  const { getModeling, getModdle } = useModelerStore();
+  const modeling = getModeling();
+  const moddle = getModdle();
+
+  /**
+   * 当前节点类型
+   */
+  const elementType = computed(() => {
+    const bizObj = element.businessObject;
+    return bizObj.eventDefinitions ? bizObj.eventDefinitions[0].$type : bizObj.$type;
+  });
+
+  /**
+   * 用于控制面板字段显示与隐藏的配置
+   */
+  const config = computed(() => showConfig[elementType.value] || {});
+
+  /**
+   * 创建一个节点
+   * @param elementType 节点类型
+   * @param properties 属性
+   * @param parent 父节点
+   */
+  const createModdleElement = (elementType: string, properties: any, parent: ModdleElement) => {
+    const element = moddle.create(elementType, properties);
+    parent && (element.$parent = parent);
+    return element;
+  };
+
+  /**
+   * 获取扩展属性，如果不存在会自动创建
+   */
+  const getExtensionElements = (create = true) => {
+    let extensionElements = element.businessObject.get<ModdleElement>('extensionElements');
+    if (!extensionElements && create) {
+      extensionElements = createModdleElement('bpmn:ExtensionElements', { values: [] }, element.businessObject);
+      modeling.updateModdleProperties(element, element.businessObject, { extensionElements });
+    }
+    return extensionElements;
+  };
+
+  /**
+   * 获取extensionElements下的properties
+   * @param extensionElements 可选参数，默认获取当前Element下的extensionElements下的Properties
+   */
+  const getPropertiesElements = (extensionElements?: ModdleElement) => {
+    if (!extensionElements) {
+      extensionElements = getExtensionElements();
+    }
+    let propertiesElements = extensionElements.values.find((item) => item.$type === 'flowable:properties');
+    if (!propertiesElements) {
+      propertiesElements = createModdleElement('flowable:properties', { values: [] }, extensionElements);
+      modeling.updateModdleProperties(element, extensionElements, {
+        values: [...extensionElements.get<[]>('values'), propertiesElements]
+      });
+    }
+    return propertiesElements;
+  };
+
+  /**
+   * 更新节点属性
+   * @param properties 属性值
+   */
+  const updateProperties = (properties: any) => {
+    modeling.updateProperties(element, properties);
+  };
+
+  /**
+   * 更新节点信息
+   * @param updateElement 需要更新的节点
+   * @param properties 属性
+   */
+  const updateModdleProperties = (updateElement, properties: any) => {
+    modeling.updateModdleProperties(element, updateElement, properties);
+  };
+
+  /**
+   * 更新Property属性
+   * @param name key值
+   * @param value 值
+   */
+  const updateProperty = (name: string, value: string) => {
+    const propertiesElements = getPropertiesElements();
+
+    let propertyElements = propertiesElements.values.find((item) => item.name === name);
+    if (!propertyElements) {
+      propertyElements = createModdleElement('flowable:property', { name: name, value: value }, propertiesElements);
+      modeling.updateModdleProperties(element, propertiesElements, {
+        values: [...propertiesElements.get('values'), propertyElements]
+      });
+    } else {
+      propertyElements.name = name;
+      propertyElements.value = value;
+    }
+    return propertyElements;
+  };
+
+  const idChange = (newVal: string) => {
+    if (newVal) {
+      updateProperties({ id: newVal });
+    }
+  };
+  const nameChange = (newVal: string) => {
+    if (newVal) {
+      updateProperties({ name: newVal });
+    }
+  };
+  const formKeyChange = (newVal: string) => {
+    updateProperties({ formKey: newVal });
+  };
+  const constant = {
+    MultiInstanceType: [
+      { id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '无', value: MultiInstanceTypeEnum.NONE },
+      { id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行', value: MultiInstanceTypeEnum.SERIAL },
+      { id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行', value: MultiInstanceTypeEnum.PARALLEL }
+    ]
+  };
+
+  return {
+    elementType,
+    constant,
+    showConfig: config,
+
+    updateProperties,
+    updateProperty,
+    updateModdleProperties,
+
+    createModdleElement,
+    idChange,
+    nameChange,
+    formKeyChange,
+    getExtensionElements,
+    getPropertiesElements
+  };
+};
diff --git a/src/bpmn/hooks/useParseElement.ts b/src/bpmn/hooks/useParseElement.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a5a255d6d776731628dc52c37627ed279cf39cc6
--- /dev/null
+++ b/src/bpmn/hooks/useParseElement.ts
@@ -0,0 +1,34 @@
+import { ModdleElement } from 'bpmn';
+
+interface Options {
+  element: ModdleElement;
+}
+
+interface Data {
+  id: string;
+}
+
+export default (ops: Options) => {
+  const { element } = ops;
+
+  const parseData = <T>(): T => {
+    const result = {
+      ...element.businessObject,
+      ...element.businessObject.$attrs
+    };
+
+    // 移除flowable前缀，格式化数组
+    for (const key in result) {
+      if (key.indexOf('flowable:') === 0) {
+        const newKey = key.replace('flowable:', '');
+        result[newKey] = result[key];
+        delete result[key];
+      }
+    }
+    return { ...result } as T;
+  };
+
+  return {
+    parseData
+  };
+};
diff --git a/src/bpmn/index.vue b/src/bpmn/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..924a8380e52109728ba14834cf4c9404ab2cbaba
--- /dev/null
+++ b/src/bpmn/index.vue
@@ -0,0 +1,496 @@
+<template>
+  <div class="containers-bpmn">
+    <!-- dark模式下 连接线的箭头样式 -->
+    <svg width="0" height="0" style="position: absolute">
+      <defs>
+        <marker id="markerArrow-dark-mode" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
+          <path d="M 1 5 L 11 10 L 1 15 Z" class="arrow-dark" />
+        </marker>
+      </defs>
+    </svg>
+    <div v-loading="loading" class="app-containers-bpmn">
+      <el-container class="h-full">
+        <el-container style="align-items: stretch">
+          <el-header>
+            <div class="process-toolbar">
+              <el-space wrap :size="10">
+                <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
+                  <el-button size="small" icon="Rank" @click="fitViewport" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="放大" placement="bottom">
+                  <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="缩小" placement="bottom">
+                  <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="后退" placement="bottom">
+                  <el-button size="small" icon="Back" @click="bpmnModeler.get('commandStack').undo()" />
+                </el-tooltip>
+                <el-tooltip effect="dark" content="前进" placement="bottom">
+                  <el-button size="small" icon="Right" @click="bpmnModeler.get('commandStack').redo()" />
+                </el-tooltip>
+              </el-space>
+              <el-space wrap :size="10" style="float: right; padding-right: 10px">
+                <el-button size="small" type="primary" @click="saveXml">保 存</el-button>
+                <el-dropdown size="small">
+                  <el-button size="small" type="primary"> 预 览 </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item icon="Document" @click="previewXML">XML预览</el-dropdown-item>
+                      <el-dropdown-item icon="View" @click="previewSVG"> SVG预览</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+                <el-dropdown size="small">
+                  <el-button size="small" type="primary"> 下 载 </el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item icon="Download" @click="downloadXML">下载XML</el-dropdown-item>
+                      <el-dropdown-item icon="Download" @click="downloadSVG"> 下载SVG</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </el-space>
+            </div>
+          </el-header>
+          <div ref="canvas" class="canvas" />
+        </el-container>
+        <div :class="{ 'process-panel': true, 'hide': panelFlag }">
+          <div class="process-panel-bar" @click="panelBarClick">
+            <div class="open-bar">
+              <el-link type="default" :underline="false">
+                <svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon>
+              </el-link>
+            </div>
+          </div>
+          <transition enter-active-class="animate__animated animate__fadeIn">
+            <div v-show="showPanel" v-if="bpmnModeler" class="panel-content">
+              <PropertyPanel :modeler="bpmnModeler" />
+            </div>
+          </transition>
+        </div>
+      </el-container>
+    </div>
+  </div>
+  <div>
+    <el-dialog v-model="perviewXMLShow" title="XML预览" width="80%" append-to-body>
+      <highlightjs :code="xmlStr" language="XML" />
+    </el-dialog>
+  </div>
+  <div>
+    <el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%" append-to-body>
+      <div style="text-align: center" v-html="svgData" />
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup name="BpmnDesign">
+import 'bpmn-js/dist/assets/diagram-js.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
+import './assets/style/index.scss';
+import { Canvas, Modeler } from 'bpmn';
+import PropertyPanel from './panel/index.vue';
+import BpmnModeler from 'bpmn-js/lib/Modeler.js';
+import defaultXML from './assets/defaultXML';
+import flowableModdle from './assets/moddle/flowable';
+import Modules from './assets/module/index';
+import useModelerStore from '@/store/modules/modeler';
+import useDialog from '@/hooks/useDialog';
+
+const emit = defineEmits(['closeCallBack', 'saveCallBack']);
+
+const { visible, title, openDialog, closeDialog } = useDialog({
+  title: '编辑流程'
+});
+const modelerStore = useModelerStore();
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const panelFlag = ref(false);
+const showPanel = ref(true);
+const canvas = ref<HTMLDivElement>();
+const panel = ref<HTMLDivElement>();
+const bpmnModeler = ref<Modeler>();
+const zoom = ref(1);
+const perviewXMLShow = ref(false);
+const perviewSVGShow = ref(false);
+const xmlStr = ref('');
+const svgData = ref('');
+const loading = ref(false);
+
+const panelBarClick = () => {
+  // 延迟执行，否则会导致面板收起时，属性面板不显示
+  panelFlag.value = !panelFlag.value;
+  setTimeout(() => {
+    showPanel.value = !panelFlag.value;
+  }, 100);
+};
+
+/**
+ * 初始化Canvas
+ */
+const initCanvas = () => {
+  bpmnModeler.value = new BpmnModeler({
+    container: canvas.value,
+    // 键盘
+    keyboard: {
+      bindTo: window // 或者window，注意与外部表单的键盘监听事件是否冲突
+    },
+    propertiesPanel: {
+      parent: panel.value
+    },
+    additionalModules: Modules,
+    moddleExtensions: {
+      flowable: flowableModdle
+    }
+  });
+};
+
+/**
+ * 初始化Model
+ */
+const initModel = () => {
+  if (modelerStore.getModeler()) {
+    modelerStore.getModeler().destroy();
+    modelerStore.setModeler(undefined);
+  }
+  modelerStore.setModeler(bpmnModeler.value);
+};
+
+/**
+ * 新建
+ */
+const newDiagram = async () => {
+  await proxy?.$modal.confirm('是否确认新建');
+  initDiagram();
+};
+
+/**
+ * 初始化
+ */
+const initDiagram = (xml?: string) => {
+  if (!xml) xml = defaultXML;
+  bpmnModeler.value.importXML(xml);
+};
+
+/**
+ * 自适应屏幕
+ */
+const fitViewport = () => {
+  zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom('fit-viewport');
+  const bbox = document.querySelector<SVGGElement>('.app-containers-bpmn .viewport').getBBox();
+  const currentViewBox = bpmnModeler.value.get<Canvas>('canvas').viewbox();
+  const elementMid = {
+    x: bbox.x + bbox.width / 2 - 65,
+    y: bbox.y + bbox.height / 2
+  };
+  bpmnModeler.value.get<Canvas>('canvas').viewbox({
+    x: elementMid.x - currentViewBox.width / 2,
+    y: elementMid.y - currentViewBox.height / 2,
+    width: currentViewBox.width,
+    height: currentViewBox.height
+  });
+  zoom.value = (bbox.width / currentViewBox.width) * 1.8;
+};
+/**
+ * 放大或者缩小
+ * @param zoomIn true 放大 | false 缩小
+ */
+const zoomViewport = (zoomIn = true) => {
+  zoom.value = bpmnModeler.value.get<Canvas>('canvas').zoom();
+  zoom.value += zoomIn ? 0.1 : -0.1;
+  bpmnModeler.value.get<Canvas>('canvas').zoom(zoom.value);
+};
+
+/**
+ * 下载XML
+ */
+const downloadXML = async () => {
+  try {
+    const { xml } = await bpmnModeler.value.saveXML({ format: true });
+    downloadFile(`${getProcessElement().name}.bpmn20.xml`, xml, 'application/xml');
+  } catch (e) {
+    proxy?.$modal.msgError(e);
+  }
+};
+
+/**
+ * 下载SVG
+ */
+const downloadSVG = async () => {
+  try {
+    const { svg } = await bpmnModeler.value.saveSVG();
+    downloadFile(getProcessElement().name, svg, 'image/svg+xml');
+  } catch (e) {
+    proxy?.$modal.msgError(e);
+  }
+};
+
+/**
+ * XML预览
+ */
+const previewXML = async () => {
+  try {
+    const { xml } = await bpmnModeler.value.saveXML({ format: true });
+    xmlStr.value = xml;
+    perviewXMLShow.value = true;
+  } catch (e) {
+    proxy?.$modal.msgError(e);
+  }
+};
+
+/**
+ * SVG预览
+ */
+const previewSVG = async () => {
+  try {
+    const { svg } = await bpmnModeler.value.saveSVG();
+    svgData.value = svg;
+    perviewSVGShow.value = true;
+  } catch (e) {
+    proxy?.$modal.msgError(e);
+  }
+};
+
+const curNodeInfo = reactive({
+  curType: '', // 任务类型 用户任务
+  curNode: '',
+  expValue: '' //多用户和部门角色实现
+});
+
+const downloadFile = (fileName: string, data: any, type: string) => {
+  const a = document.createElement('a');
+  const url = window.URL.createObjectURL(new Blob([data], { type: type }));
+  a.href = url;
+  a.download = fileName;
+  a.click();
+  window.URL.revokeObjectURL(url);
+};
+
+const getProcessElement = () => {
+  const rootElements = bpmnModeler.value?.getDefinitions().rootElements;
+  for (let i = 0; i < rootElements.length; i++) {
+    if (rootElements[i].$type === 'bpmn:Process') return rootElements[i];
+  }
+};
+
+const getProcess = () => {
+  const element = getProcessElement();
+  return {
+    id: element.id,
+    name: element.name
+  };
+};
+
+const saveXml = async () => {
+  const { xml } = await bpmnModeler.value.saveXML({ format: true });
+  const { svg } = await bpmnModeler.value.saveSVG();
+  const process = getProcess();
+  let data = {
+    xml: xml,
+    svg: svg,
+    key: process.id,
+    name: process.name,
+    loading: loading
+  };
+  emit('saveCallBack', data);
+};
+
+const open = (xml?: string) => {
+  openDialog();
+  nextTick(() => {
+    initDiagram(xml);
+  });
+};
+const close = () => {
+  closeDialog();
+};
+
+onMounted(() => {
+  nextTick(() => {
+    initCanvas();
+    initModel();
+  });
+});
+
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  initDiagram,
+  saveXml,
+  open,
+  close
+});
+</script>
+
+<style lang="scss">
+/** 夜间模式 线条的颜色 */
+$stroke-color-dark: white;
+$bpmn-font-size: 12px;
+/** 日间模式 字体颜色 */
+$bpmn-font-color-dark: white;
+/** 夜间模式 字体颜色 */
+$bpmn-font-color-light: #222;
+
+/* 背景网格 */
+@mixin djs-container {
+  background-image: linear-gradient(90deg, hsl(0deg 0% 78.4% / 15%) 10%, transparent 0), linear-gradient(hsl(0deg 0% 78.4% / 15%) 10%, transparent 0) !important;
+  background-size: 10px 10px !important;
+}
+
+html[class='light'] {
+  /** 从左侧拖动时的背景图 */
+  svg.new-parent {
+    @include djs-container;
+  }
+
+  /** 双击编辑元素时样式保持一致 */
+  div.djs-direct-editing-parent {
+    border-radius: 10px;
+    background-color: transparent !important;
+    color: $bpmn-font-color-light;
+  }
+
+  g.djs-visual {
+    .djs-label {
+      fill: $bpmn-font-color-light !important;
+      font-size: $bpmn-font-size !important;
+    }
+  }
+}
+
+html[class='dark'] {
+  /** dark模式下 连接线的箭头样式 */
+  .arrow-dark {
+    stroke-width: 1px;
+    stroke-linecap: round;
+    stroke: $stroke-color-dark;
+    fill: $stroke-color-dark;
+    stroke-linejoin: round;
+  }
+
+  /** 从左侧拖动时的背景图 */
+  svg.new-parent {
+    background-color: black !important;
+    @include djs-container;
+  }
+
+  /** 双击编辑元素时样式保持一致 */
+  div.djs-direct-editing-parent {
+    border-radius: 10px;
+    background-color: transparent !important;
+    color: $bpmn-font-color-dark;
+  }
+
+  /** 元素相关设置 */
+  g.djs-visual {
+    /** 元素边框 需要去除文字(.djs-label) */
+    & > *:first-child:not(.djs-label) {
+      stroke: $stroke-color-dark !important;
+    }
+
+    /** 字体颜色 */
+    .djs-label {
+      fill: $bpmn-font-color-dark !important;
+      font-size: $bpmn-font-size !important;
+    }
+
+    /* 连接线样式 */
+    path[data-corner-radius] {
+      stroke: $stroke-color-dark !important;
+      marker-end: url('#markerArrow-dark-mode') !important;
+    }
+  }
+}
+
+.containers-bpmn {
+  height: 100%;
+  .app-containers-bpmn {
+    width: 100%;
+    height: 100%;
+    .canvas {
+      width: 100%;
+      height: 100%;
+      @include djs-container;
+    }
+    .el-header {
+      height: 35px;
+      padding: 0;
+    }
+
+    .process-panel {
+      transition: width 0.25s ease-in;
+      .process-panel-bar {
+        width: 34px;
+        height: 40px;
+        .open-bar {
+          width: 34px;
+          line-height: 40px;
+        }
+      }
+      // 收起面板样式
+      &.hide {
+        width: 34px;
+        overflow: hidden;
+        padding: 0;
+        .process-panel-bar {
+          width: 34px;
+          height: 100%;
+          box-sizing: border-box;
+          display: block;
+          text-align: left;
+          line-height: 34px;
+        }
+        .process-panel-bar:hover {
+          background-color: var(--bpmn-panel-bar-background-color);
+        }
+      }
+    }
+  }
+}
+pre {
+  margin: 0;
+  height: 100%;
+  max-height: calc(80vh - 32px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  .hljs {
+    word-break: break-word;
+    white-space: pre-wrap;
+    padding: 0.5em;
+  }
+}
+
+.open-bar {
+  font-size: 20px;
+  cursor: pointer;
+  text-align: center;
+}
+.process-panel {
+  box-sizing: border-box;
+  padding: 0 8px 0 8px;
+  border-left: 1px solid var(--bpmn-panel-border);
+  box-shadow: var(--bpmn-panel-box-shadow) 0 0 8px;
+  max-height: 100%;
+  width: 25%;
+  height: calc(100vh - 100px);
+  .el-collapse {
+    height: calc(100vh - 182px);
+    overflow: auto;
+  }
+}
+
+// 任务栏 透明度
+//:deep(.djs-palette) {
+//  opacity: 0.3;
+//  transition: all 1s;
+//}
+//
+//:deep(.djs-palette:hover) {
+//  opacity: 1;
+//  transition: all 1s;
+//}
+</style>
diff --git a/src/bpmn/panel/GatewayPanel.vue b/src/bpmn/panel/GatewayPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5931539e67502d894638b6b7af3ae0c512d0e784
--- /dev/null
+++ b/src/bpmn/panel/GatewayPanel.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <el-collapse v-model="currentCollapseItem">
+      <el-collapse-item name="1">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <InfoFilled />
+            </el-icon>
+            常规
+          </div>
+        </template>
+        <div>
+          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+            <el-form-item prop="id" label="节点 ID">
+              <el-input v-model="formData.id" @change="idChange"> </el-input>
+            </el-form-item>
+            <el-form-item prop="name" label="节点名称">
+              <el-input v-model="formData.name" @change="nameChange"> </el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-collapse-item>
+
+      <el-collapse-item name="2">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <BellFilled />
+            </el-icon>
+            执行监听器
+          </div>
+        </template>
+        <div>
+          <ExecutionListener :element="element"></ExecutionListener>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script setup lang="ts">
+import useParseElement from '../hooks/useParseElement';
+import usePanel from '../hooks/usePanel';
+import { Modeler, ModdleElement } from 'bpmn';
+import { GatewayPanel } from 'bpmnDesign';
+import ExecutionListener from './property/ExecutionListener.vue';
+
+interface PropType {
+  element: ModdleElement;
+}
+const props = withDefaults(defineProps<PropType>(), {});
+const { nameChange, idChange } = usePanel({
+  element: toRaw(props.element)
+});
+const { parseData } = useParseElement({
+  element: toRaw(props.element)
+});
+const currentCollapseItem = ref(['1', '2']);
+const formData = ref(parseData<GatewayPanel>());
+
+const formRules = ref<ElFormRules>({
+  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/ParticipantPanel.vue b/src/bpmn/panel/ParticipantPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cca28bdc7c0f6b9b43cb5d9c3c673b2d60b9a57a
--- /dev/null
+++ b/src/bpmn/panel/ParticipantPanel.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <el-collapse v-model="currentCollapseItem">
+      <el-collapse-item name="1">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <InfoFilled />
+            </el-icon>
+            常规
+          </div>
+        </template>
+        <div>
+          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
+            <el-form-item prop="id" label="节点 ID">
+              <el-input v-model="formData.id" @change="idChange"></el-input>
+            </el-form-item>
+            <el-form-item prop="name" label="节点名称">
+              <el-input v-model="formData.name" @change="nameChange"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-collapse-item>
+
+      <el-collapse-item name="2">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <BellFilled />
+            </el-icon>
+            执行监听器
+          </div>
+        </template>
+        <div>
+          <ExecutionListener :element="element"></ExecutionListener>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script setup lang="ts">
+import useParseElement from '../hooks/useParseElement';
+import usePanel from '../hooks/usePanel';
+import ExecutionListener from './property/ExecutionListener.vue';
+import { ModdleElement } from 'bpmn';
+import { ParticipantPanel } from 'bpmnDesign';
+
+interface PropType {
+  element: ModdleElement;
+}
+
+const props = withDefaults(defineProps<PropType>(), {});
+const { nameChange, idChange } = usePanel({
+  element: toRaw(props.element)
+});
+const { parseData } = useParseElement({
+  element: toRaw(props.element)
+});
+
+const formData = ref(parseData<ParticipantPanel>());
+const currentCollapseItem = ref(['1', '2']);
+const formRules = ref<ElFormRules>({
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/ProcessPanel.vue b/src/bpmn/panel/ProcessPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7d9a359e2374c35284a449c4e3f91f22ded17eaa
--- /dev/null
+++ b/src/bpmn/panel/ProcessPanel.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <el-collapse v-model="currentCollapseItem">
+      <el-collapse-item name="1">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <InfoFilled />
+            </el-icon>
+            常规
+          </div>
+        </template>
+        <div>
+          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+            <el-form-item label="流程标识" prop="id">
+              <el-input v-model="formData.id" @change="idChange"></el-input>
+            </el-form-item>
+            <el-form-item label="流程名称" prop="name">
+              <el-input v-model="formData.name" @change="nameChange"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-collapse-item>
+
+      <el-collapse-item name="2">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <BellFilled />
+            </el-icon>
+            执行监听器
+          </div>
+        </template>
+        <div>
+          <ExecutionListener :element="element"></ExecutionListener>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ExecutionListener from './property/ExecutionListener.vue';
+import useParseElement from '../hooks/useParseElement';
+import usePanel from '../hooks/usePanel';
+import { Modeler, ModdleElement } from 'bpmn';
+import { ProcessPanel } from 'bpmnDesign';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+interface PropType {
+  element: ModdleElement;
+}
+const props = withDefaults(defineProps<PropType>(), {});
+
+const { parseData } = useParseElement({
+  element: toRaw(props.element)
+});
+const { idChange, nameChange } = usePanel({
+  element: toRaw(props.element)
+});
+const currentCollapseItem = ref(['1', '2']);
+const formData = ref<ProcessPanel>(parseData<ProcessPanel>());
+
+const formRules = ref<ElFormRules>({
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/bpmn/panel/SequenceFlowPanel.vue b/src/bpmn/panel/SequenceFlowPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fd8ad3cd75e285f588df9e38e53ca7637397ff9e
--- /dev/null
+++ b/src/bpmn/panel/SequenceFlowPanel.vue
@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <el-collapse v-model="currentCollapseItem">
+      <el-collapse-item name="1">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <InfoFilled />
+            </el-icon>
+            常规
+          </div>
+        </template>
+        <div>
+          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
+            <el-form-item prop="id" label="节点 ID">
+              <el-input v-model="formData.id" @change="idChange"> </el-input>
+            </el-form-item>
+            <el-form-item prop="name" label="节点名称">
+              <el-input v-model="formData.name" @change="nameChange"> </el-input>
+            </el-form-item>
+            <el-form-item prop="conditionExpression" label="跳转条件">
+              <el-input v-model="formData.conditionExpressionValue" @change="conditionExpressionChange"> </el-input>
+            </el-form-item>
+            <el-form-item prop="skipExpression" label="跳过表达式">
+              <el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-collapse-item>
+
+      <el-collapse-item name="2">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <BellFilled />
+            </el-icon>
+            执行监听器
+          </div>
+        </template>
+        <div>
+          <ExecutionListener :element="element"></ExecutionListener>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script setup lang="ts">
+import useParseElement from '../hooks/useParseElement';
+import useModelerStore from '@/store/modules/modeler';
+import usePanel from '../hooks/usePanel';
+import ExecutionListener from './property/ExecutionListener.vue';
+import { Modeler, ModdleElement } from 'bpmn';
+import { SequenceFlowPanel } from 'bpmnDesign';
+
+interface PropType {
+  element: ModdleElement;
+}
+const props = withDefaults(defineProps<PropType>(), {});
+const { nameChange, idChange, updateProperties } = usePanel({
+  element: toRaw(props.element)
+});
+const { parseData } = useParseElement({
+  element: toRaw(props.element)
+});
+const moddle = useModelerStore().getModdle();
+const currentCollapseItem = ref(['1', '2']);
+const formData = ref(parseData<SequenceFlowPanel>());
+
+const formRules = ref<ElFormRules>({
+  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+
+const conditionExpressionChange = (val: string) => {
+  if (val) {
+    const newCondition = moddle.create('bpmn:FormalExpression', { body: val });
+    updateProperties({ conditionExpression: newCondition });
+  } else {
+    updateProperties({ conditionExpression: null });
+  }
+};
+
+const skipExpressionChange = (val: string) => {
+  updateProperties({ 'flowable:skipExpression': val });
+};
+
+onBeforeMount(() => {
+  if (formData.value.conditionExpression) {
+    formData.value.conditionExpressionValue = formData.value.conditionExpression.body;
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/StartEndPanel.vue b/src/bpmn/panel/StartEndPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d43ed80bb4b3a72903ca25243a2903b7cba54382
--- /dev/null
+++ b/src/bpmn/panel/StartEndPanel.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <el-collapse v-model="currentCollapseItem">
+      <el-collapse-item name="1">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <InfoFilled />
+            </el-icon>
+            常规
+          </div>
+        </template>
+        <div>
+          <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
+            <el-form-item prop="id" label="节点 ID">
+              <el-input v-model="formData.id" @change="idChange"> </el-input>
+            </el-form-item>
+            <el-form-item prop="name" label="节点名称">
+              <el-input v-model="formData.name" @change="nameChange"> </el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-collapse-item>
+
+      <el-collapse-item name="2">
+        <template #title>
+          <div class="collapse__title">
+            <el-icon>
+              <BellFilled />
+            </el-icon>
+            执行监听器
+          </div>
+        </template>
+        <div>
+          <ExecutionListener :element="element"></ExecutionListener>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script setup lang="ts">
+import ExecutionListener from './property/ExecutionListener.vue';
+import useParseElement from '../hooks/useParseElement';
+import usePanel from '../hooks/usePanel';
+import { Modeler, ModdleElement } from 'bpmn';
+import { StartEndPanel } from 'bpmnDesign';
+
+interface PropType {
+  element: ModdleElement;
+}
+const props = withDefaults(defineProps<PropType>(), {});
+const { nameChange, idChange } = usePanel({
+  element: toRaw(props.element)
+});
+const { parseData } = useParseElement({
+  element: toRaw(props.element)
+});
+
+const formData = ref(parseData<StartEndPanel>());
+const currentCollapseItem = ref(['1', '2']);
+const formRules = ref<ElFormRules>({
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/SubProcessPanel.vue b/src/bpmn/panel/SubProcessPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e0cedcb846f3c7b73709b8c6a754ddeacc820801
--- /dev/null
+++ b/src/bpmn/panel/SubProcessPanel.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
+      <el-collapse v-model="currentCollapseItem">
+        <el-collapse-item name="1">
+          <template #title>
+            <div class="collapse__title">
+              <el-icon>
+                <InfoFilled />
+              </el-icon>
+              常规
+            </div>
+          </template>
+          <div>
+            <el-form-item prop="id" label="节点 ID">
+              <el-input v-model="formData.id" @change="idChange"> </el-input>
+            </el-form-item>
+            <el-form-item prop="name" label="节点名称">
+              <el-input v-model="formData.name" @change="nameChange"> </el-input>
+            </el-form-item>
+          </div>
+        </el-collapse-item>
+
+        <el-collapse-item name="2">
+          <template #title>
+            <div class="collapse__title">
+              <el-icon>
+                <BellFilled />
+              </el-icon>
+              执行监听器
+            </div>
+          </template>
+          <div>
+            <ExecutionListener :element="element"></ExecutionListener>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item name="3">
+          <template #title>
+            <div class="collapse__title">
+              <el-icon>
+                <HelpFilled />
+              </el-icon>
+              多实例
+            </div>
+          </template>
+          <div>
+            <el-form-item label="多实例类型">
+              <el-select v-model="formData.multiInstanceType" @change="multiInstanceTypeChange">
+                <el-option v-for="item in constant.MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option>
+              </el-select>
+            </el-form-item>
+
+            <div v-if="formData.multiInstanceType !== MultiInstanceTypeEnum.NONE">
+              <el-form-item label="集合">
+                <template #label>
+                  <span>
+                    集合
+                    <el-tooltip placement="top">
+                      <el-icon><QuestionFilled /></el-icon>
+                      <template #content>
+                        属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />
+                        不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />
+                        这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。
+                      </template>
+                    </el-tooltip>
+                  </span>
+                </template>
+                <el-input v-model="formData.collection" @change="collectionChange"></el-input>
+              </el-form-item>
+              <el-form-item label="元素变量">
+                <template #label>
+                  <span>
+                    元素变量
+                    <el-tooltip placement="top">
+                      <el-icon><QuestionFilled /></el-icon>
+                      <template #content>
+                        每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />
+                        创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />
+                        一般来说，该字符串应与指定人员变量相同。
+                      </template>
+                    </el-tooltip>
+                  </span>
+                </template>
+                <el-input v-model="formData.elementVariable" @change="elementVariableChange"> </el-input>
+              </el-form-item>
+              <el-form-item label="完成条件">
+                <template #label>
+                  <span>
+                    完成条件
+                    <el-tooltip placement="top">
+                      <el-icon><QuestionFilled /></el-icon>
+                      <template #content>
+                        多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />
+                        结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />
+                        活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />
+                        表示当任务完成60%时，该节点就算完成
+                      </template>
+                    </el-tooltip>
+                  </span>
+                </template>
+                <el-input v-model="formData.completionCondition" @change="completionConditionChange"> </el-input>
+              </el-form-item>
+            </div>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </el-form>
+  </div>
+</template>
+<script setup lang="ts">
+import ExecutionListener from './property/ExecutionListener.vue';
+import useParseElement from '../hooks/useParseElement';
+import usePanel from '../hooks/usePanel';
+import { ModdleElement } from 'bpmn';
+import { SubProcessPanel } from 'bpmnDesign';
+import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
+
+interface PropType {
+  element: ModdleElement;
+}
+const props = withDefaults(defineProps<PropType>(), {});
+const { nameChange, idChange, updateProperties, createModdleElement, constant } = usePanel({
+  element: toRaw(props.element)
+});
+const { parseData } = useParseElement({
+  element: toRaw(props.element)
+});
+
+const formData = ref(parseData<SubProcessPanel>());
+const currentCollapseItem = ref(['1', '2', '3']);
+
+const multiInstanceTypeChange = (newVal) => {
+  if (newVal !== MultiInstanceTypeEnum.NONE) {
+    let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
+    if (!loopCharacteristics) {
+      loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+    }
+    loopCharacteristics.isSequential = newVal === MultiInstanceTypeEnum.SERIAL;
+    updateProperties({ loopCharacteristics: loopCharacteristics });
+  } else {
+    updateProperties({ loopCharacteristics: undefined });
+  }
+};
+const collectionChange = (newVal) => {
+  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
+  if (!loopCharacteristics) {
+    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+  }
+  loopCharacteristics.collection = newVal && newVal.length > 0 ? newVal : undefined;
+  updateProperties({ loopCharacteristics: loopCharacteristics });
+};
+const elementVariableChange = (newVal) => {
+  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
+  if (!loopCharacteristics) {
+    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+  }
+  loopCharacteristics.elementVariable = newVal && newVal.length > 0 ? newVal : undefined;
+  updateProperties({ loopCharacteristics: loopCharacteristics });
+};
+const completionConditionChange = (newVal) => {
+  let loopCharacteristics = props.element.businessObject.get<ModdleElement>('loopCharacteristics');
+  if (!loopCharacteristics) {
+    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+  }
+  if (newVal && newVal.length > 0) {
+    if (!loopCharacteristics.completionCondition) {
+      loopCharacteristics.completionCondition = createModdleElement('bpmn:Expression', { body: newVal }, loopCharacteristics);
+    } else {
+      loopCharacteristics.completionCondition.body = newVal;
+    }
+  } else {
+    loopCharacteristics.completionCondition = undefined;
+  }
+  updateProperties({ loopCharacteristics: loopCharacteristics });
+};
+
+onBeforeMount(() => {
+  if (formData.value.loopCharacteristics) {
+    const loopCharacteristics = formData.value.loopCharacteristics;
+    formData.value.collection = loopCharacteristics.collection || '';
+    formData.value.elementVariable = loopCharacteristics.elementVariable || '';
+    formData.value.completionCondition = loopCharacteristics.completionCondition?.body || '';
+    formData.value.multiInstanceType = loopCharacteristics.isSequential ? MultiInstanceTypeEnum.SERIAL : MultiInstanceTypeEnum.PARALLEL;
+  }
+});
+
+const formRules = ref<ElFormRules>({
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/TaskPanel.vue b/src/bpmn/panel/TaskPanel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc037eed76dc88952c965e4e1f8b5ae4789f923e
--- /dev/null
+++ b/src/bpmn/panel/TaskPanel.vue
@@ -0,0 +1,492 @@
+<template>
+  <div>
+    <el-form ref="formRef" size="default" :model="formData" :rules="formRules" label-width="100px">
+      <el-collapse v-model="currentCollapseItem">
+        <el-collapse-item name="1">
+          <template #title>
+            <div class="collapse__title">
+              <el-icon>
+                <InfoFilled />
+              </el-icon>
+              常规
+            </div>
+          </template>
+          <div>
+            <el-form-item prop="id" label="节点 ID">
+              <el-input v-model="formData.id" @change="idChange"> </el-input>
+            </el-form-item>
+            <el-form-item prop="name" label="节点名称">
+              <el-input v-model="formData.name" @change="nameChange"> </el-input>
+            </el-form-item>
+            <el-form-item v-if="showConfig.skipExpression" prop="skipExpression" label="跳过表达式">
+              <el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input>
+            </el-form-item>
+            <el-form-item v-loading="formManageListLoading" prop="formKey" label="表单地址">
+              <el-select v-model="formData.formKey" clearable filterable placeholder="请选择表单" style="width: 260px" @change="formKeyChange">
+                <el-option
+                  v-for="item in formManageList"
+                  :key="item.id"
+                  :label="item.formTypeName + ':' + item.formName"
+                  :value="item.formType + ':' + item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item name="2">
+          <template #title>
+            <div class="collapse__title">
+              <el-icon>
+                <Checked />
+              </el-icon>
+              任务
+            </div>
+          </template>
+          <div>
+            <el-form-item v-if="showConfig.async" prop="sync" label="是否异步">
+              <el-switch v-model="formData.async" inline-prompt active-text="是" inactive-text="否" @change="syncChange" />
+            </el-form-item>
+
+            <el-tabs tab-position="left" class="demo-tabs">
+              <el-tab-pane label="身份存储">
+                <el-form-item label="分配人员">
+                  <el-input v-model="formData.assignee" @blur="blurAssignee(formData.assignee)">
+                    <template #append>
+                      <el-button icon="Search" type="primary" @click="openSingleUserSelect" />
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="候选人员">
+                  <el-badge :value="selectUserLength" :max="99">
+                    <el-button size="small" type="primary" @click="openUserSelect">选择人员</el-button>
+                  </el-badge>
+                </el-form-item>
+                <el-form-item label="候选组">
+                  <el-badge :value="selectRoleLength" :max="99">
+                    <el-button size="small" type="primary" @click="openRoleSelect">选择组</el-button>
+                  </el-badge>
+                </el-form-item>
+              </el-tab-pane>
+
+              <!-- <el-tab-pane label="固定值">
+                <el-form-item prop="auditUserType" label="分配类型">
+                  <el-select v-model="formData.allocationType">
+                    <el-option v-for="item in AllocationTypeSelect" :key="item.id" :value="item.value" :label="item.label"> </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item v-if="formData.allocationType === AllocationTypeEnum.USER" label="分配人员">
+                  <el-input v-model="formData.assignee">
+                    <template #append>
+                      <el-button icon="Search" type="primary" @click="openSingleUserSelect" />
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <div v-if="formData.allocationType === AllocationTypeEnum.CANDIDATE">
+                  <el-form-item label="候选人员">
+                    <el-badge :value="selectUserLength" :max="99">
+                      <el-button size="small" type="primary" @click="openUserSelect">选择人员</el-button>
+                    </el-badge>
+                  </el-form-item>
+                  <el-form-item label="候选组">
+                    <el-badge :value="selectRoleLength" :max="99">
+                      <el-button size="small" type="primary" @click="openRoleSelect">选择组</el-button>
+                    </el-badge>
+                  </el-form-item>
+                </div>
+                <el-form-item v-if="formData.allocationType === AllocationTypeEnum.SPECIFY && showConfig.specifyDesc" style="">
+                  <el-radio-group v-model="formData.specifyDesc" class="ml-4">
+                    <el-radio v-for="item in SpecifyDesc" :key="item.id" :value="item.value" size="large">{{ item.label }}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-tab-pane> -->
+            </el-tabs>
+
+            <el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
+              <el-input v-model="formData.dueDate" clearable @change="dueDateChange" @click="openDueDate">
+                <template #append>
+                  <el-button icon="Search" type="primary" @click="openDueDate" />
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item v-if="showConfig.priority" prop="priority" label="优先级">
+              <el-input-number v-model="formData.priority" :min="0" @change="priorityChange"> </el-input-number>
+            </el-form-item>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item name="3">
+          <template #title>
+            <div class="collapse__title">
+              <el-icon>
+                <HelpFilled />
+              </el-icon>
+              多实例
+            </div>
+          </template>
+          <div>
+            <el-form-item label="多实例类型">
+              <el-select v-model="formData.multiInstanceType" @change="multiInstanceTypeChange">
+                <el-option v-for="item in constant.MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option>
+              </el-select>
+            </el-form-item>
+
+            <div v-if="formData.multiInstanceType !== MultiInstanceTypeEnum.NONE">
+              <el-form-item label="集合">
+                <template #label>
+                  <span>
+                    集合
+                    <el-tooltip placement="top">
+                      <el-icon><QuestionFilled /></el-icon>
+                      <template #content>
+                        属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />
+                        不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />
+                        这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。
+                      </template>
+                    </el-tooltip>
+                  </span>
+                </template>
+                <el-input v-model="formData.collection" @change="collectionChange"></el-input>
+              </el-form-item>
+              <el-form-item label="元素变量">
+                <template #label>
+                  <span>
+                    元素变量
+                    <el-tooltip placement="top">
+                      <el-icon><QuestionFilled /></el-icon>
+                      <template #content>
+                        每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />
+                        创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />
+                        一般来说，该字符串应与指定人员变量相同。
+                      </template>
+                    </el-tooltip>
+                  </span>
+                </template>
+                <el-input v-model="formData.elementVariable" @change="elementVariableChange"> </el-input>
+              </el-form-item>
+              <el-form-item label="完成条件">
+                <template #label>
+                  <span>
+                    完成条件
+                    <el-tooltip placement="top">
+                      <el-icon><QuestionFilled /></el-icon>
+                      <template #content>
+                        多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />
+                        结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />
+                        活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />
+                        表示当任务完成60%时，该节点就算完成
+                      </template>
+                    </el-tooltip>
+                  </span>
+                </template>
+                <el-input v-model="formData.completionCondition" @change="completionConditionChange"> </el-input>
+              </el-form-item>
+            </div>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item v-if="showConfig.taskListener" name="4">
+          <template #title>
+            <div class="collapse__title">
+              <el-icon>
+                <BellFilled />
+              </el-icon>
+              任务监听器
+            </div>
+          </template>
+          <div>
+            <TaskListener v-if="showConfig.taskListener" :element="element"></TaskListener>
+          </div>
+        </el-collapse-item>
+        <el-collapse-item v-if="showConfig.executionListener" name="5">
+          <template #title>
+            <div class="collapse__title">
+              <el-icon>
+                <BellFilled />
+              </el-icon>
+              执行监听器
+            </div>
+          </template>
+          <div>
+            <ExecutionListener v-if="showConfig.executionListener" :element="element"></ExecutionListener>
+          </div>
+        </el-collapse-item>
+
+        <el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
+          <el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" />
+        </el-form-item>
+        <el-form-item v-if="showConfig.triggerServiceTask" prop="triggerServiceTask" label="服务任务可触发">
+          <el-switch v-model="formData.triggerServiceTask" inline-prompt active-text="是" inactive-text="否" />
+        </el-form-item>
+        <el-form-item v-if="showConfig.autoStoreVariables" prop="autoStoreVariables" label="自动存储变量">
+          <el-switch v-model="formData.autoStoreVariables" inline-prompt active-text="是" inactive-text="否" />
+        </el-form-item>
+        <el-form-item v-if="showConfig.ruleVariablesInput" prop="skipExpression" label="输入变量">
+          <el-input v-model="formData.ruleVariablesInput"> </el-input>
+        </el-form-item>
+        <el-form-item v-if="showConfig.exclude" prop="exclude" label="排除">
+          <el-switch v-model="formData.exclude" inline-prompt active-text="是" inactive-text="否" />
+        </el-form-item>
+        <el-form-item v-if="showConfig.class" prop="class" label="类">
+          <el-input v-model="formData.class"> </el-input>
+        </el-form-item>
+      </el-collapse>
+    </el-form>
+    <UserSelect ref="userSelectRef" :data="formData.candidateUsers" @confirm-call-back="userSelectCallBack"></UserSelect>
+    <UserSelect ref="singleUserSelectRef" :data="formData.assignee" :multiple="false" @confirm-call-back="singleUserSelectCallBack"></UserSelect>
+    <RoleSelect ref="roleSelectRef" :data="formData.candidateGroups" @confirm-call-back="roleSelectCallBack"></RoleSelect>
+    <DueDate ref="dueDateRef" v-model="formData.dueDate" :data="formData.dueDate" @confirm-call-back="dueDateCallBack"></DueDate>
+  </div>
+</template>
+<script setup lang="ts">
+import useParseElement from '../hooks/useParseElement';
+import usePanel from '../hooks/usePanel';
+import UserSelect from '@/components/UserSelect';
+import RoleSelect from '@/components/RoleSelect';
+import ExecutionListener from './property/ExecutionListener.vue';
+import TaskListener from './property/TaskListener.vue';
+import DueDate from './property/DueDate.vue';
+import { ModdleElement } from 'bpmn';
+import { TaskPanel } from 'bpmnDesign';
+import { AllocationTypeEnum, MultiInstanceTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
+import { UserVO } from '@/api/system/user/types';
+import { RoleVO } from '@/api/system/role/types';
+import { selectListFormManage } from '@/api/workflow/formManage';
+import { FormManageVO } from '@/api/workflow/formManage/types';
+const formManageList = ref<FormManageVO[]>([]);
+const formManageListLoading = ref(false);
+interface PropType {
+  element: ModdleElement;
+}
+const props = withDefaults(defineProps<PropType>(), {});
+const { showConfig, nameChange, formKeyChange, idChange, updateProperties, getExtensionElements, createModdleElement, constant } = usePanel({
+  element: toRaw(props.element)
+});
+const { parseData } = useParseElement({
+  element: toRaw(props.element)
+});
+
+const initFormData = {
+  id: '',
+  name: '',
+  dueDate: '',
+  multiInstanceType: MultiInstanceTypeEnum.NONE,
+  allocationType: AllocationTypeEnum.USER,
+  specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
+};
+const formData = ref({ ...initFormData, ...parseData<TaskPanel>() });
+const assignee = ref<Partial<UserVO>>({
+  userName: ''
+});
+const currentCollapseItem = ref(['1', '2']);
+const userSelectRef = ref<InstanceType<typeof UserSelect>>();
+const singleUserSelectRef = ref<InstanceType<typeof UserSelect>>();
+const roleSelectRef = ref<InstanceType<typeof RoleSelect>>();
+const dueDateRef = ref<InstanceType<typeof DueDate>>();
+
+const isMultiple = ref(true);
+const openUserSelect = () => {
+  userSelectRef.value.open();
+};
+const openSingleUserSelect = () => {
+  if (formData.value.assignee.includes('$')) {
+    formData.value.assignee = '';
+  }
+  singleUserSelectRef.value.open();
+};
+const openRoleSelect = () => {
+  roleSelectRef.value.open();
+};
+const openDueDate = (e) => {
+  dueDateRef.value.openDialog();
+};
+const blurAssignee = (assignee) => {
+  updateProperties({ 'flowable:assignee': assignee ? assignee : undefined });
+};
+const singleUserSelectCallBack = (data: UserVO[]) => {
+  const user: UserVO = data.length !== 0 ? data[0] : undefined;
+  updateProperties({ 'flowable:assignee': user?.userId });
+  assignee.value = user ? user : { userName: '' };
+  formData.value.assignee = String(user?.userId);
+  let extensionElements = getExtensionElements();
+  extensionElements.values = extensionElements.get('values').filter((item) => item.$type !== 'flowable:extAssignee');
+  if (user) {
+    const extAssigneeElement = createModdleElement('flowable:extAssignee', { body: '' }, extensionElements);
+    extensionElements.get('values').push(extAssigneeElement);
+    extAssigneeElement.body = JSON.stringify({ userName: user.userName, userId: user.userId });
+  }
+  if (extensionElements.values.length === 0) {
+    extensionElements = undefined;
+  }
+  updateProperties({ extensionElements: extensionElements });
+};
+const userSelectCallBack = (data: UserVO[]) => {
+  let extensionElements = getExtensionElements();
+  extensionElements.values = extensionElements.values.filter((item) => item.$type !== 'flowable:extCandidateUsers');
+  if (data.length === 0) {
+    formData.value.candidateUsers = undefined;
+    updateProperties({ 'flowable:candidateUsers': undefined });
+  } else {
+    const userIds = data.map((item) => item.userId).join(',');
+    formData.value.candidateUsers = userIds;
+    updateProperties({ 'flowable:candidateUsers': userIds });
+    const extCandidateUsersElement = createModdleElement('flowable:extCandidateUsers', { body: '' }, extensionElements);
+    extensionElements.values.push(extCandidateUsersElement);
+    const users = data.map((item) => {
+      return {
+        userId: item.userId,
+        userName: item.userName
+      };
+    });
+    extCandidateUsersElement.body = JSON.stringify(users);
+  }
+  if (extensionElements.values.length === 0) {
+    extensionElements = undefined;
+  }
+  updateProperties({ extensionElements: extensionElements });
+};
+const roleSelectCallBack = (data: RoleVO[]) => {
+  if (data.length === 0) {
+    formData.value.candidateGroups = '';
+    updateProperties({ 'flowable:candidateGroups': undefined });
+  } else {
+    const roleIds = data.map((item) => item.roleId).join(',');
+    formData.value.candidateGroups = roleIds;
+    updateProperties({ 'flowable:candidateGroups': roleIds });
+  }
+};
+const dueDateCallBack = (data: string) => {
+  updateProperties({ 'flowable:dueDate': data });
+};
+
+const taskTabClick = (e) => {
+  formData.value.candidateGroups = '';
+  formData.value.candidateUsers = '';
+  formData.value.assignee = '';
+  // formData.value.fixedAssignee = '';
+  assignee.value = {};
+};
+
+const syncChange = (newVal) => {
+  updateProperties({ 'flowable:async': newVal });
+};
+const skipExpressionChange = (newVal) => {
+  updateProperties({ 'flowable:skipExpression': newVal && newVal.length > 0 ? newVal : undefined });
+};
+const priorityChange = (newVal) => {
+  updateProperties({ 'flowable:priority': newVal });
+};
+const fixedAssigneeChange = (newVal) => {
+  updateProperties({ 'flowable:assignee': newVal && newVal.length > 0 ? newVal : undefined });
+};
+const multiInstanceTypeChange = (newVal) => {
+  if (newVal !== MultiInstanceTypeEnum.NONE) {
+    let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
+    if (!loopCharacteristics) {
+      loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+    }
+    loopCharacteristics.isSequential = newVal === MultiInstanceTypeEnum.SERIAL;
+    updateProperties({ loopCharacteristics: loopCharacteristics });
+  } else {
+    updateProperties({ loopCharacteristics: undefined });
+  }
+};
+const collectionChange = (newVal) => {
+  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
+  if (!loopCharacteristics) {
+    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+  }
+  loopCharacteristics.collection = newVal && newVal.length > 0 ? newVal : undefined;
+  updateProperties({ loopCharacteristics: loopCharacteristics });
+};
+const elementVariableChange = (newVal) => {
+  let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
+  if (!loopCharacteristics) {
+    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+  }
+  loopCharacteristics.elementVariable = newVal && newVal.length > 0 ? newVal : undefined;
+  updateProperties({ loopCharacteristics: loopCharacteristics });
+};
+const completionConditionChange = (newVal) => {
+  let loopCharacteristics = props.element.businessObject.get<ModdleElement>('loopCharacteristics');
+  if (!loopCharacteristics) {
+    loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
+  }
+  if (newVal && newVal.length > 0) {
+    if (!loopCharacteristics.completionCondition) {
+      loopCharacteristics.completionCondition = createModdleElement('bpmn:Expression', { body: newVal }, loopCharacteristics);
+    } else {
+      loopCharacteristics.completionCondition.body = newVal;
+    }
+  } else {
+    loopCharacteristics.completionCondition = undefined;
+  }
+  updateProperties({ loopCharacteristics: loopCharacteristics });
+};
+const dueDateChange = (newVal) => {
+  updateProperties({ 'flowable:dueDate': newVal && newVal.length > 0 ? newVal : undefined });
+};
+const selectUserLength = computed(() => {
+  if (formData.value.candidateUsers) {
+    return formData.value.candidateUsers.split(',').length;
+  } else {
+    return 0;
+  }
+});
+const selectRoleLength = computed(() => {
+  if (formData.value.candidateGroups) {
+    return formData.value.candidateGroups.split(',').length;
+  } else {
+    return 0;
+  }
+});
+
+onBeforeMount(() => {
+  const extensionElements = getExtensionElements(false);
+  if (extensionElements && extensionElements.get('values')) {
+    let extAssigneeElement = extensionElements.get('values').find((item) => item.$type === 'flowable:extAssignee');
+    if (extAssigneeElement) {
+      assignee.value = JSON.parse(extAssigneeElement.body);
+    }
+  }
+
+  if (formData.value.loopCharacteristics) {
+    const loopCharacteristics = formData.value.loopCharacteristics;
+    formData.value.collection = loopCharacteristics.collection || '';
+    formData.value.elementVariable = loopCharacteristics.elementVariable || '';
+    formData.value.completionCondition = loopCharacteristics.completionCondition?.body || '';
+    formData.value.multiInstanceType = loopCharacteristics.isSequential ? MultiInstanceTypeEnum.SERIAL : MultiInstanceTypeEnum.PARALLEL;
+  }
+
+  if (formData.value.assignee) {
+    formData.value.fixedAssignee = formData.value.assignee;
+  }
+});
+
+const formRules = ref<ElFormRules>({
+  id: [{ required: true, message: '请输入', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+
+const AllocationTypeSelect = [
+  { id: 'b9cdf970-dd91-47c0-819f-42a7010ca2a6', label: '指定人员', value: AllocationTypeEnum.USER },
+  { id: '3f7ccbcd-c464-4602-bb9d-e96649d10585', label: '候选人员', value: AllocationTypeEnum.CANDIDATE },
+  { id: 'c49065e0-7f2d-4c09-aedb-ab2d47d9a454', label: '发起人自己', value: AllocationTypeEnum.YOURSELF },
+  { id: '6ef40a03-7e9a-4898-89b2-c88fe9064542', label: '发起人指定', value: AllocationTypeEnum.SPECIFY }
+];
+const SpecifyDesc = [
+  { id: 'fa253b34-4335-458c-b1bc-b039e2a2b7a6', label: '指定一个人', value: 'specifySingle' },
+  { id: '7365ff54-2e05-4312-9bfb-0b8edd779c5b', label: '指定多个人', value: 'specifyMultiple' }
+];
+
+const listFormManage = async () => {
+  formManageListLoading.value = true;
+  const res = await selectListFormManage();
+  formManageList.value = res.data;
+  formManageListLoading.value = false;
+};
+onMounted(() => {
+  nextTick(() => {
+    listFormManage();
+  });
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/bpmn/panel/index.vue b/src/bpmn/panel/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..eecb0cb5f473f74a1b413f2b07a244b10b4550bb
--- /dev/null
+++ b/src/bpmn/panel/index.vue
@@ -0,0 +1,110 @@
+<template>
+  <div ref="propertyPanel">
+    <div v-if="nodeName" class="node-name">{{ nodeName }}</div>
+    <component :is="component" v-if="element" :element="element" />
+  </div>
+</template>
+<script setup lang="ts" name="PropertyPanel">
+import { NodeName } from '../assets/lang/zh';
+import TaskPanel from './TaskPanel.vue';
+import ProcessPanel from './ProcessPanel.vue';
+import StartEndPanel from './StartEndPanel.vue';
+import GatewayPanel from './GatewayPanel.vue';
+import SequenceFlowPanel from './SequenceFlowPanel.vue';
+import ParticipantPanel from './ParticipantPanel.vue';
+import SubProcessPanel from './SubProcessPanel.vue';
+import { Modeler, ModdleElement } from 'bpmn';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+interface propsType {
+  modeler: Modeler;
+}
+const props = withDefaults(defineProps<propsType>(), {});
+
+const element = ref<ModdleElement>();
+const processElement = ref<ModdleElement>();
+
+const startEndType = ['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'];
+const taskType = [
+  'bpmn:UserTask',
+  'bpmn:Task',
+  'bpmn:SendTask',
+  'bpmn:ReceiveTask',
+  'bpmn:ManualTask',
+  'bpmn:BusinessRuleTask',
+  'bpmn:ServiceTask',
+  'bpmn:ScriptTask'
+];
+const sequenceType = ['bpmn:SequenceFlow'];
+const gatewayType = ['bpmn:InclusiveGateway', 'bpmn:ExclusiveGateway', 'bpmn:ParallelGateway', 'bpmn:EventBasedGateway', 'bpmn:ComplexGateway'];
+const processType = ['bpmn:Process'];
+
+// 组件计算
+const component = computed(() => {
+  if (!element.value) return null;
+  const type = element.value.type;
+  if (startEndType.includes(type)) return StartEndPanel;
+  if (taskType.includes(type)) return TaskPanel;
+  if (sequenceType.includes(type)) return SequenceFlowPanel;
+  if (gatewayType.includes(type)) return GatewayPanel;
+  if (processType.includes(type)) return ProcessPanel;
+  if (type === 'bpmn:Participant') return ParticipantPanel;
+  if (type === 'bpmn:SubProcess') return SubProcessPanel;
+  //return proxy?.$modal.msgWarning('面板开发中....');
+  return undefined;
+});
+
+const nodeName = computed(() => {
+  if (element.value) {
+    const bizObj = element.value.businessObject;
+    const type = bizObj?.eventDefinitions && bizObj?.eventDefinitions.length > 0 ? bizObj.eventDefinitions[0].$type : bizObj.$type;
+    return NodeName[type] || type;
+  }
+  return '';
+});
+
+const handleModeler = () => {
+  props.modeler.on('root.added', (e: any) => {
+    element.value = null;
+    if (e.element.type === 'bpmn:Process') {
+      nextTick(() => {
+        element.value = e.element;
+        processElement.value = e.element;
+      });
+    }
+  });
+  props.modeler.on('element.click', (e: any) => {
+    if (e.element.type === 'bpmn:Process') {
+      nextTick(() => {
+        element.value = e.element;
+        processElement.value = e.element;
+      });
+    }
+  });
+  props.modeler.on('selection.changed', (e: any) => {
+    // 先给null为了让vue刷新
+    element.value = null;
+    const newElement = e.newSelection[0];
+    if (newElement) {
+      nextTick(() => {
+        element.value = newElement;
+      });
+    } else {
+      nextTick(() => {
+        element.value = processElement.value;
+      });
+    }
+  });
+};
+
+onMounted(() => {
+  handleModeler();
+});
+</script>
+
+<style scoped lang="scss">
+.node-name {
+  font-size: 16px;
+  font-weight: bold;
+  padding: 10px;
+}
+</style>
diff --git a/src/bpmn/panel/property/DueDate.vue b/src/bpmn/panel/property/DueDate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..882766b20f09de090e081dcae0c12c462dadc394
--- /dev/null
+++ b/src/bpmn/panel/property/DueDate.vue
@@ -0,0 +1,252 @@
+<template>
+  <div>
+    <el-dialog v-model="visible" :title="title" width="600px" append-to-body>
+      <el-form label-width="100px">
+        <el-form-item label="小时">
+          <el-radio-group v-model="hourValue" @change="hourChange">
+            <el-radio-button label="4" value="4" />
+            <el-radio-button label="8" value="8" />
+            <el-radio-button label="12" value="12" />
+            <el-radio-button label="24" value="24" />
+            <el-radio-button label="自定义" value="自定义" />
+            <el-input-number v-show="hourValue === '自定义'" v-model="customHourValue" :min="1" @change="customHourValueChange"></el-input-number>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="天">
+          <el-radio-group v-model="dayValue" @change="dayChange">
+            <el-radio-button label="1" value="1" />
+            <el-radio-button label="2" value="2" />
+            <el-radio-button label="3" value="3" />
+            <el-radio-button label="4" value="4" />
+            <el-radio-button label="自定义" value="自定义" />
+            <el-input-number v-show="dayValue === '自定义'" v-model="customDayValue" :min="1" @change="customDayValueChange"></el-input-number>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="周">
+          <el-radio-group v-model="weekValue" @change="weekChange">
+            <el-radio-button label="1" value="1" />
+            <el-radio-button label="2" value="2" />
+            <el-radio-button label="3" value="3" />
+            <el-radio-button label="4" value="4" />
+            <el-radio-button label="自定义" value="自定义" />
+            <el-input-number v-show="weekValue === '自定义'" v-model="customWeekValue" :min="1" @change="customWeekValueChange"></el-input-number>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="月">
+          <el-radio-group v-model="monthValue" @change="monthChange">
+            <el-radio-button label="1" value="1" />
+            <el-radio-button label="2" value="2" />
+            <el-radio-button label="3" value="3" />
+            <el-radio-button label="4" value="4" />
+            <el-radio-button label="自定义" value="自定义" />
+            <el-input-number v-show="monthValue === '自定义'" v-model="customMonthValue" :min="1" @change="customMonthValueChange"></el-input-number>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div>
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button type="primary" @click="confirm">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useDialog from '@/hooks/useDialog';
+
+interface PropType {
+  modelValue?: string;
+  data?: string;
+}
+const prop = withDefaults(defineProps<PropType>(), {
+  modelValue: '',
+  data: ''
+});
+const emit = defineEmits(['update:modelValue', 'confirmCallBack']);
+
+const { title, visible, openDialog, closeDialog } = useDialog({
+  title: '设置任务到期时间'
+});
+const formValue = ref();
+const valueType = ref();
+
+const hourValue = ref('');
+const dayValue = ref('');
+const weekValue = ref('');
+const monthValue = ref('');
+
+const customHourValue = ref(1);
+const customDayValue = ref(1);
+const customWeekValue = ref(1);
+const customMonthValue = ref(1);
+
+const hourValueConst = ['4', '8', '12', '24'];
+const dayAndWeekAndMonthValueConst = ['1', '2', '3', '4'];
+
+const initValue = () => {
+  formValue.value = prop.data;
+  if (prop.data) {
+    const lastStr = prop.data.substring(prop.data.length - 1);
+    if (lastStr === 'H') {
+      const hourValueValue = prop.data.substring(2, prop.data.length - 1);
+      if (hourValueConst.includes(hourValueValue)) {
+        hourValue.value = hourValueValue;
+      } else {
+        hourValue.value = '自定义';
+        customHourValue.value = Number(hourValueValue);
+      }
+    }
+    const dayAndWeekAndMonthValue = prop.data.substring(1, prop.data.length - 1);
+    if (lastStr === 'D') {
+      if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
+        dayValue.value = dayAndWeekAndMonthValue;
+      } else {
+        dayValue.value = '自定义';
+        customDayValue.value = Number(dayAndWeekAndMonthValue);
+      }
+    }
+    if (lastStr === 'W') {
+      if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
+        weekValue.value = dayAndWeekAndMonthValue;
+      } else {
+        weekValue.value = '自定义';
+        customWeekValue.value = Number(dayAndWeekAndMonthValue);
+      }
+    }
+    if (lastStr === 'M') {
+      if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
+        monthValue.value = dayAndWeekAndMonthValue;
+      } else {
+        monthValue.value = '自定义';
+        customMonthValue.value = Number(dayAndWeekAndMonthValue);
+      }
+    }
+  }
+};
+
+const confirm = () => {
+  emit('update:modelValue', formValue.value);
+  emit('confirmCallBack', formValue.value);
+  closeDialog();
+};
+
+const customHourValueChange = (customHourValue) => {
+  formValue.value = `PT${customHourValue}H`;
+
+  dayValue.value = '';
+  weekValue.value = '';
+  monthValue.value = '';
+  customDayValue.value = 1;
+  customWeekValue.value = 1;
+  customMonthValue.value = 1;
+};
+const customDayValueChange = (customDayValue) => {
+  formValue.value = `P${customDayValue}D`;
+  hourValue.value = '';
+  weekValue.value = '';
+  monthValue.value = '';
+
+  customHourValue.value = 1;
+  customWeekValue.value = 1;
+  customMonthValue.value = 1;
+};
+
+const customWeekValueChange = (customWeekValue) => {
+  formValue.value = `P${customWeekValue}W`;
+  hourValue.value = '';
+  dayValue.value = '';
+  monthValue.value = '';
+
+  customHourValue.value = 1;
+  customDayValue.value = 1;
+  customMonthValue.value = 1;
+};
+
+const customMonthValueChange = (customMonthValue) => {
+  formValue.value = `P${customMonthValue}M`;
+  hourValue.value = '';
+  dayValue.value = '';
+  weekValue.value = '';
+
+  customHourValue.value = 1;
+  customDayValue.value = 1;
+  customWeekValue.value = 1;
+};
+
+const hourChange = (hourValue) => {
+  if (hourValue === '自定义') {
+    formValue.value = `PT${customHourValue.value}H`;
+  } else {
+    formValue.value = `PT${hourValue}H`;
+  }
+
+  dayValue.value = '';
+  weekValue.value = '';
+  monthValue.value = '';
+  customDayValue.value = 1;
+  customWeekValue.value = 1;
+  customMonthValue.value = 1;
+};
+const dayChange = (dayValue) => {
+  if (dayValue === '自定义') {
+    formValue.value = `P${customDayValue.value}D`;
+  } else {
+    formValue.value = `P${dayValue}D`;
+  }
+
+  hourValue.value = '';
+  weekValue.value = '';
+  monthValue.value = '';
+
+  customHourValue.value = 1;
+  customWeekValue.value = 1;
+  customMonthValue.value = 1;
+};
+const weekChange = (weekValue) => {
+  if (weekValue === '自定义') {
+    formValue.value = `P${customWeekValue.value}W`;
+  } else {
+    formValue.value = `P${weekValue}W`;
+  }
+
+  hourValue.value = '';
+  dayValue.value = '';
+  monthValue.value = '';
+
+  customHourValue.value = 1;
+  customDayValue.value = 1;
+  customMonthValue.value = 1;
+};
+const monthChange = (monthValue) => {
+  if (monthValue === '自定义') {
+    formValue.value = `P${customMonthValue.value}M`;
+  } else {
+    formValue.value = `P${monthValue}M`;
+  }
+
+  hourValue.value = '';
+  dayValue.value = '';
+  weekValue.value = '';
+
+  customHourValue.value = 1;
+  customDayValue.value = 1;
+  customWeekValue.value = 1;
+};
+
+watch(
+  () => visible.value,
+  () => {
+    if (visible.value) {
+      initValue();
+    }
+  }
+);
+
+defineExpose({
+  openDialog,
+  closeDialog
+});
+</script>
diff --git a/src/bpmn/panel/property/ExecutionListener.vue b/src/bpmn/panel/property/ExecutionListener.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7620cf300c9372b9b466a5d3c02f3e855dc3f8c7
--- /dev/null
+++ b/src/bpmn/panel/property/ExecutionListener.vue
@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <vxe-toolbar>
+      <template #buttons>
+        <el-button type="primary" link size="small" @click="insertEvent">新增</el-button>
+        <el-button type="primary" link size="small" @click="removeSelectRowEvent">删除</el-button>
+      </template>
+    </vxe-toolbar>
+    <vxe-table
+      ref="tableRef"
+      size="mini"
+      height="100px"
+      border
+      show-overflow
+      keep-source
+      :data="tableData"
+      :menu-config="menuConfig"
+      @cell-dblclick="cellDBLClickEvent"
+      @menu-click="contextMenuClickEvent"
+    >
+      <vxe-column type="checkbox" width="40"></vxe-column>
+      <vxe-column type="seq" width="40"></vxe-column>
+      <vxe-column field="event" title="事件" min-width="100px">
+        <template #default="slotParams">
+          <span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="type" title="类型" min-width="100px">
+        <template #default="slotParams">
+          <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="className" title="Java 类名" min-width="100px"> </vxe-column>
+    </vxe-table>
+
+    <el-dialog
+      v-model="formDialog.visible.value"
+      :title="formDialog.title.value"
+      width="600px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      append-to-body
+    >
+      <el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px">
+        <el-form-item label="事件" prop="event">
+          <el-select v-model="formData.event">
+            <el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
+          <template #label>
+            <span>
+              类型
+              <el-tooltip placement="top">
+                <el-icon><QuestionFilled /></el-icon>
+                <template #content>
+                  类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口<br />
+                  表达式：示例 ${myObject.callMethod(task, task.eventName)}<br />
+                  委托表达式：示例 ${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口
+                </template>
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.type">
+            <el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          :label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'"
+          prop="className"
+        >
+          <el-input v-model="formData.className" type="text"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-tabs type="border-card">
+        <el-tab-pane label="参数">
+          <ListenerParam ref="listenerParamRef" :table-data="formData.params" />
+        </el-tab-pane>
+      </el-tabs>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="formDialog.closeDialog">取 消</el-button>
+          <el-button type="primary" @click="submitEvent">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import ListenerParam from './ListenerParam.vue';
+import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
+import { ExecutionListenerVO } from 'bpmnDesign';
+import { Moddle, Modeler, ModdleElement } from 'bpmn';
+
+import usePanel from '../../hooks/usePanel';
+import useDialog from '@/hooks/useDialog';
+import useModelerStore from '@/store/modules/modeler';
+
+const emit = defineEmits(['close']);
+interface PropType {
+  element: ModdleElement;
+}
+const props = withDefaults(defineProps<PropType>(), {});
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const selectRow = ref<ExecutionListenerVO | null>();
+const formDialog = useDialog({
+  title: selectRow.value ? '编辑&保存' : '新增&保存'
+});
+
+const { showConfig, elementType, updateProperties } = usePanel({
+  element: toRaw(props.element)
+});
+const { getModdle } = useModelerStore();
+const moddle = getModdle();
+
+const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
+const tableRef = ref<VxeTableInstance<ExecutionListenerVO>>();
+const formRef = ref<ElFormInstance>();
+
+const initData: ExecutionListenerVO = {
+  event: '',
+  type: '',
+  className: '',
+  params: []
+};
+const formData = ref<ExecutionListenerVO>({ ...initData });
+const tableData = ref<ExecutionListenerVO[]>([]);
+const tableRules = ref<ElFormRules>({
+  event: [{ required: true, message: '请选择', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择', trigger: 'blur' }],
+  className: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+
+const submitEvent = async () => {
+  const error = await listenerParamRef.value.validate();
+  await formRef.value.validate((validate) => {
+    if (validate && !error) {
+      const $table = tableRef.value;
+      if ($table) {
+        formData.value.params = listenerParamRef.value.getTableData();
+        if (selectRow.value) {
+          Object.assign(selectRow.value, formData.value);
+        } else {
+          $table.insertAt({ ...formData.value }, -1);
+        }
+        updateElement();
+        formDialog.closeDialog();
+      }
+    }
+  });
+};
+
+const removeSelectRowEvent = async () => {
+  const $table = tableRef.value;
+  if ($table) {
+    const selectCount = $table.getCheckboxRecords().length;
+    if (selectCount === 0) {
+      proxy?.$modal.msgWarning('请选择行');
+    } else {
+      await $table.removeCheckboxRow();
+      updateElement();
+    }
+  }
+};
+const insertEvent = async () => {
+  Object.assign(formData.value, initData);
+  selectRow.value = null;
+  formDialog.openDialog();
+};
+
+const editEvent = (row: ExecutionListenerVO) => {
+  Object.assign(formData.value, row);
+  selectRow.value = row;
+  formDialog.openDialog();
+};
+
+const removeEvent = async (row: ExecutionListenerVO) => {
+  await proxy?.$modal.confirm('您确定要删除该数据?');
+  const $table = tableRef.value;
+  if ($table) {
+    await $table.remove(row);
+    updateElement();
+  }
+};
+const updateElement = () => {
+  const $table = tableRef.value;
+  const data = $table.getTableData().fullData;
+  if (data.length) {
+    let extensionElements = props.element.businessObject.get('extensionElements');
+    if (!extensionElements) {
+      extensionElements = moddle.create('bpmn:ExtensionElements');
+    }
+    // 清除旧值
+    extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
+    data.forEach((item) => {
+      const executionListener = moddle.create('flowable:ExecutionListener');
+      executionListener['event'] = item.event;
+      executionListener[item.type] = item.className;
+      if (item.params && item.params.length) {
+        item.params.forEach((field) => {
+          const fieldElement = moddle.create('flowable:Field');
+          fieldElement['name'] = field.name;
+          fieldElement[field.type] = field.value;
+          executionListener.get('fields').push(fieldElement);
+        });
+      }
+      extensionElements.get('values').push(executionListener);
+    });
+    updateProperties({ extensionElements: extensionElements });
+  } else {
+    const extensionElements = props.element.businessObject[`extensionElements`];
+    if (extensionElements) {
+      extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
+    }
+  }
+};
+
+const cellDBLClickEvent: VxeTableEvents.CellDblclick<ExecutionListenerVO> = ({ row }) => {
+  editEvent(row);
+};
+
+const menuConfig = reactive<VxeTablePropTypes.MenuConfig<ExecutionListenerVO>>({
+  body: {
+    options: [
+      [
+        { code: 'edit', name: '编辑', prefixIcon: 'vxe-icon-edit', disabled: false },
+        { code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete', disabled: false }
+      ]
+    ]
+  },
+  visibleMethod({ options, column }) {
+    const isDisabled = !column;
+    options.forEach((list) => {
+      list.forEach((item) => {
+        item.disabled = isDisabled;
+      });
+    });
+    return true;
+  }
+});
+const contextMenuClickEvent: VxeTableEvents.MenuClick<ExecutionListenerVO> = ({ menu, row, column }) => {
+  const $table = tableRef.value;
+  if ($table) {
+    switch (menu.code) {
+      case 'edit':
+        editEvent(row);
+        break;
+      case 'remove':
+        removeEvent(row);
+        break;
+    }
+  }
+};
+
+const initTableData = () => {
+  tableData.value =
+    props.element.businessObject.extensionElements?.values
+      .filter((item) => item.$type === 'flowable:ExecutionListener')
+      .map((item) => {
+        let type;
+        if ('class' in item) type = 'class';
+        if ('expression' in item) type = 'expression';
+        if ('delegateExpression' in item) type = 'delegateExpression';
+        return {
+          event: item.event,
+          type: type,
+          className: item[type],
+          params:
+            item.fields?.map((field) => {
+              let fieldType;
+              if ('stringValue' in field) fieldType = 'stringValue';
+              if ('expression' in field) fieldType = 'expression';
+              return {
+                name: field.name,
+                type: fieldType,
+                value: field[fieldType]
+              };
+            }) ?? []
+        };
+      }) ?? [];
+};
+
+onMounted(() => {
+  initTableData();
+});
+
+const typeSelect = [
+  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
+  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
+  { id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
+];
+const eventSelect = [
+  { id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '开始', value: 'start' },
+  { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '结束', value: 'end' },
+  { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '启用', value: 'take' }
+];
+</script>
+
+<style scoped lang="scss">
+.el-badge {
+  :deep(.el-badge__content) {
+    top: 10px;
+  }
+}
+</style>
diff --git a/src/bpmn/panel/property/ListenerParam.vue b/src/bpmn/panel/property/ListenerParam.vue
new file mode 100644
index 0000000000000000000000000000000000000000..334249bdb0fdc9361cfebf9dc2f56526cbb2c471
--- /dev/null
+++ b/src/bpmn/panel/property/ListenerParam.vue
@@ -0,0 +1,121 @@
+<template>
+  <vxe-toolbar>
+    <template #buttons>
+      <el-button icon="Plus" @click="insertRow">新增</el-button>
+    </template>
+  </vxe-toolbar>
+  <vxe-table
+    ref="tableRef"
+    :height="height"
+    border
+    show-overflow
+    keep-source
+    :data="tableData"
+    :edit-rules="tableRules"
+    :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
+  >
+    <vxe-column type="seq" width="40"></vxe-column>
+    <vxe-column field="type" title="类型" :edit-render="{}">
+      <template #default="slotParams">
+        <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
+      </template>
+      <template #edit="slotParams">
+        <vxe-select v-model="slotParams.row.type">
+          <vxe-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></vxe-option>
+        </vxe-select>
+      </template>
+    </vxe-column>
+    <vxe-column field="name" title="名称" :edit-render="{}">
+      <template #edit="slotParams">
+        <vxe-input v-model="slotParams.row.name" type="text"></vxe-input>
+      </template>
+    </vxe-column>
+    <vxe-column field="value" title="值" :edit-render="{}">
+      <template #edit="slotParams">
+        <vxe-input v-model="slotParams.row.value" type="text"></vxe-input>
+      </template>
+    </vxe-column>
+    <vxe-column title="操作" width="100" show-overflow align="center">
+      <template #default="slotParams">
+        <el-tooltip content="删除" placement="top">
+          <el-button link type="danger" icon="Delete" @click="removeRow(slotParams.row)"></el-button>
+        </el-tooltip>
+      </template>
+    </vxe-column>
+  </vxe-table>
+</template>
+
+<script setup lang="ts">
+import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
+import { ParamVO } from 'bpmnDesign';
+import useDialog from '@/hooks/useDialog';
+
+interface PropType {
+  height?: string;
+  tableData?: ParamVO[];
+}
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const props = withDefaults(defineProps<PropType>(), {
+  height: '200px',
+  tableData: () => []
+});
+
+const tableRules = ref<VxeTablePropTypes.EditRules>({
+  type: [{ required: true, message: '请选择', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }],
+  value: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+
+const { title, visible, openDialog, closeDialog } = useDialog({
+  title: '监听器参数'
+});
+const typeSelect = [
+  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '字符串', value: 'stringValue' },
+  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' }
+];
+
+const tableRef = ref<VxeTableInstance<ParamVO>>();
+
+const getTableData = () => {
+  const $table = tableRef.value;
+  if ($table) {
+    return $table.getTableData().fullData;
+  }
+  return [];
+};
+
+const insertRow = async () => {
+  const $table = tableRef.value;
+  if ($table) {
+    const { row: newRow } = await $table.insertAt({}, -1);
+    // 插入一条数据并触发校验
+    await $table.validate(newRow);
+  }
+};
+
+const removeRow = async (row: ParamVO) => {
+  await proxy?.$modal.confirm('您确定要删除该数据?');
+  const $table = tableRef.value;
+  if ($table) {
+    await $table.remove(row);
+  }
+};
+
+const validate = async () => {
+  const $table = tableRef.value;
+  if ($table) {
+    return await $table.validate(true);
+  }
+};
+
+defineExpose({
+  closeDialog,
+  openDialog,
+  validate,
+  getTableData
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/bpmn/panel/property/TaskListener.vue b/src/bpmn/panel/property/TaskListener.vue
new file mode 100644
index 0000000000000000000000000000000000000000..db774e4ace2ea6db058206a06a8c92ad4a5d26d4
--- /dev/null
+++ b/src/bpmn/panel/property/TaskListener.vue
@@ -0,0 +1,310 @@
+<template>
+  <div>
+    <vxe-toolbar>
+      <template #buttons>
+        <el-button type="primary" link size="small" @click="insertEvent">新增</el-button>
+        <el-button type="primary" link size="small" @click="removeSelectRowEvent">删除</el-button>
+      </template>
+    </vxe-toolbar>
+    <vxe-table
+      ref="tableRef"
+      size="mini"
+      height="100px"
+      border
+      show-overflow
+      keep-source
+      :data="tableData"
+      :menu-config="menuConfig"
+      @cell-dblclick="cellDBLClickEvent"
+      @menu-click="contextMenuClickEvent"
+    >
+      <vxe-column type="checkbox" width="40"></vxe-column>
+      <vxe-column type="seq" width="40"></vxe-column>
+      <vxe-column field="event" title="事件" min-width="100px">
+        <template #default="slotParams">
+          <span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="type" title="类型" min-width="100px">
+        <template #default="slotParams">
+          <span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="className" title="Java 类名" min-width="100px"> </vxe-column>
+    </vxe-table>
+
+    <el-dialog
+      v-model="formDialog.visible.value"
+      :title="formDialog.title.value"
+      width="600px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      append-to-body
+    >
+      <el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px">
+        <el-form-item label="事件" prop="event">
+          <template #label>
+            <span>
+              事件
+              <el-tooltip placement="top">
+                <el-icon><QuestionFilled /></el-icon>
+                <template #content>
+                  create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br />
+                  assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br />
+                  complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br />
+                  delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。
+                </template>
+              </el-tooltip>
+            </span>
+          </template>
+          <el-select v-model="formData.event">
+            <el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
+          <el-select v-model="formData.type">
+            <el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          :label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'"
+          prop="className"
+        >
+          <el-input v-model="formData.className" type="text"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-tabs type="border-card">
+        <el-tab-pane label="参数">
+          <ListenerParam ref="listenerParamRef" :table-data="formData.params" />
+        </el-tab-pane>
+      </el-tabs>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="formDialog.closeDialog">取 消</el-button>
+          <el-button type="primary" @click="submitEvent">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import ListenerParam from './ListenerParam.vue';
+import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
+import { TaskListenerVO } from 'bpmnDesign';
+import { ModdleElement } from 'bpmn';
+
+import usePanel from '../../hooks/usePanel';
+import useDialog from '@/hooks/useDialog';
+import useModelerStore from '@/store/modules/modeler';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+interface PropType {
+  element: ModdleElement;
+}
+const props = withDefaults(defineProps<PropType>(), {});
+
+const selectRow = ref<TaskListenerVO | null>();
+const formDialog = useDialog({
+  title: selectRow.value ? '编辑&保存' : '新增&保存'
+});
+const { showConfig, elementType, updateProperties } = usePanel({
+  element: toRaw(props.element)
+});
+const { getModdle } = useModelerStore();
+const moddle = getModdle();
+
+const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
+const tableRef = ref<VxeTableInstance<TaskListenerVO>>();
+const formRef = ref<ElFormInstance>();
+
+const initData: TaskListenerVO = {
+  event: '',
+  type: '',
+  className: '',
+  name: '',
+  params: []
+};
+const formData = ref<TaskListenerVO>({ ...initData });
+const currentIndex = ref(0);
+const tableData = ref<TaskListenerVO[]>([]);
+const tableRules = ref<VxeTablePropTypes.EditRules>({
+  event: [{ required: true, message: '请选择', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入', trigger: 'blur' }],
+  className: [{ required: true, message: '请输入', trigger: 'blur' }]
+});
+
+const submitEvent = async () => {
+  const error = await listenerParamRef.value.validate();
+  await formRef.value.validate((validate) => {
+    if (validate && !error) {
+      const $table = tableRef.value;
+      if ($table) {
+        formData.value.params = listenerParamRef.value.getTableData();
+        if (selectRow.value) {
+          Object.assign(selectRow.value, formData.value);
+        } else {
+          $table.insertAt({ ...formData.value }, -1);
+        }
+        updateElement();
+        formDialog.closeDialog();
+      }
+    }
+  });
+};
+
+const insertEvent = async () => {
+  Object.assign(formData.value, initData);
+  selectRow.value = null;
+  formDialog.openDialog();
+};
+
+const editEvent = (row: TaskListenerVO) => {
+  Object.assign(formData.value, row);
+  selectRow.value = row;
+  formDialog.openDialog();
+};
+const removeEvent = async (row: TaskListenerVO) => {
+  await proxy?.$modal.confirm('您确定要删除该数据?');
+  const $table = tableRef.value;
+  if ($table) {
+    await $table.remove(row);
+    updateElement();
+  }
+};
+
+const removeSelectRowEvent = async () => {
+  const $table = tableRef.value;
+  if ($table) {
+    const selectCount = $table.getCheckboxRecords().length;
+    if (selectCount === 0) {
+      proxy?.$modal.msgWarning('请选择行');
+    } else {
+      await $table.removeCheckboxRow();
+      updateElement();
+    }
+  }
+};
+const updateElement = () => {
+  const $table = tableRef.value;
+  const data = $table.getTableData().fullData;
+  if (data.length) {
+    let extensionElements = props.element.businessObject.get('extensionElements');
+    if (!extensionElements) {
+      extensionElements = moddle.create('bpmn:ExtensionElements');
+    }
+    // 清除旧值
+    extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
+    data.forEach((item) => {
+      const taskListener = moddle.create('flowable:TaskListener');
+      taskListener['event'] = item.event;
+      taskListener[item.type] = item.className;
+      if (item.params && item.params.length) {
+        item.params.forEach((field) => {
+          const fieldElement = moddle.create('flowable:Field');
+          fieldElement['name'] = field.name;
+          fieldElement[field.type] = field.value;
+          taskListener.get('fields').push(fieldElement);
+        });
+      }
+      extensionElements.get('values').push(taskListener);
+    });
+    updateProperties({ extensionElements: extensionElements });
+  } else {
+    const extensionElements = props.element.businessObject[`extensionElements`];
+    if (extensionElements) {
+      extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
+    }
+  }
+};
+
+const cellDBLClickEvent: VxeTableEvents.CellDblclick<TaskListenerVO> = ({ row }) => {
+  editEvent(row);
+};
+
+const menuConfig = reactive<VxeTablePropTypes.MenuConfig<TaskListenerVO>>({
+  body: {
+    options: [
+      [
+        { code: 'edit', name: '编辑', prefixIcon: 'vxe-icon-edit', disabled: false },
+        { code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete', disabled: false }
+      ]
+    ]
+  },
+  visibleMethod({ options, column }) {
+    const isDisabled = !column;
+    options.forEach((list) => {
+      list.forEach((item) => {
+        item.disabled = isDisabled;
+      });
+    });
+    return true;
+  }
+});
+const contextMenuClickEvent: VxeTableEvents.MenuClick<TaskListenerVO> = ({ menu, row, column }) => {
+  const $table = tableRef.value;
+  if ($table) {
+    switch (menu.code) {
+      case 'edit':
+        editEvent(row);
+        break;
+      case 'remove':
+        removeEvent(row);
+        break;
+    }
+  }
+};
+const initTableData = () => {
+  tableData.value =
+    props.element.businessObject.extensionElements?.values
+      .filter((item) => item.$type === 'flowable:TaskListener')
+      .map((item) => {
+        let type;
+        if ('class' in item) type = 'class';
+        if ('expression' in item) type = 'expression';
+        if ('delegateExpression' in item) type = 'delegateExpression';
+        return {
+          event: item.event,
+          type: type,
+          className: item[type],
+          params:
+            item.fields?.map((field) => {
+              let fieldType;
+              if ('stringValue' in field) fieldType = 'stringValue';
+              if ('expression' in field) fieldType = 'expression';
+              return {
+                name: field.name,
+                type: fieldType,
+                value: field[fieldType]
+              };
+            }) ?? []
+        };
+      }) ?? [];
+};
+
+onMounted(() => {
+  initTableData();
+});
+
+const typeSelect = [
+  { id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
+  { id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
+  { id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
+];
+const eventSelect = [
+  { id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '创建', value: 'create' },
+  { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '指派', value: 'assignment' },
+  { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '完成', value: 'complete' },
+  { id: '68801972-85f1-482f-bd86-1fad015c26ed', label: '删除', value: 'delete' }
+];
+</script>
+
+<style scoped lang="scss">
+.el-badge {
+  :deep(.el-badge__content) {
+    top: 10px;
+  }
+}
+</style>
diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f845168c415ae753f8a561cfae7ff283a3325fa
--- /dev/null
+++ b/src/components/BpmnDesign/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="design">
+    <el-dialog v-model="visible" width="100%" fullscreen :title="title">
+      <div class="modeler">
+        <bpmn-design ref="bpmnDesignRef" @save-call-back="saveCallBack"></bpmn-design>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup name="Design">
+import { getInfo, editModelXml } from '@/api/workflow/model';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+import { ModelForm } from '@/api/workflow/model/types';
+import BpmnDesign from '@/bpmn/index.vue';
+import useDialog from '@/hooks/useDialog';
+const bpmnDesignRef = ref<InstanceType<typeof BpmnDesign>>();
+const modelForm = ref<ModelForm>();
+const emit = defineEmits(['closeCallBack']);
+const { visible, title } = useDialog({
+  title: '编辑流程'
+});
+const modelId = ref('');
+const open = async (id) => {
+  visible.value = true;
+  modelId.value = id;
+  const { data } = await getInfo(id);
+  modelForm.value = data;
+  bpmnDesignRef.value.initDiagram(modelForm.value.xml);
+};
+//保存模型
+const saveCallBack = async (data) => {
+  await proxy?.$modal.confirm('是否确认保存？');
+  data.loading.value = true;
+  modelForm.value.id = modelId.value;
+  modelForm.value.xml = data.xml;
+  modelForm.value.svg = data.svg;
+  modelForm.value.key = data.key;
+  modelForm.value.name = data.name;
+  editModelXml(modelForm.value).then((res) => {
+    if (res.code === 200) {
+      visible.value = false;
+      proxy?.$modal.msgSuccess('保存成功');
+      emit('closeCallBack', data);
+    }
+  });
+  data.loading.value = false;
+};
+
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  open
+});
+</script>
+
+<style lang="scss" scoped>
+.design {
+  :deep(.el-dialog .el-dialog__body) {
+    max-height: 100% !important;
+    min-height: calc(100vh - 80px);
+    padding: 10px 0 10px 0 !important;
+  }
+  :deep(.el-dialog__header) {
+    padding: 0 0 5px 0 !important;
+  }
+}
+</style>
diff --git a/src/components/BpmnView/index.vue b/src/components/BpmnView/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a79f08442196ede6e78f56e6608bf98ef89aeb90
--- /dev/null
+++ b/src/components/BpmnView/index.vue
@@ -0,0 +1,410 @@
+<template>
+  <div v-loading="loading" class="bpmnDialogContainers">
+    <el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto">
+      <div class="header-div">
+        <div>
+          <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
+            <el-button size="small" icon="Rank" @click="fitViewport" />
+          </el-tooltip>
+          <el-tooltip effect="dark" content="放大" placement="bottom">
+            <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)" />
+          </el-tooltip>
+          <el-tooltip effect="dark" content="缩小" placement="bottom">
+            <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)" />
+          </el-tooltip>
+        </div>
+        <div>
+          <div class="tips-label">
+            <div class="un-complete">未完成</div>
+            <div class="in-progress">进行中</div>
+            <div class="complete">已完成</div>
+          </div>
+        </div>
+      </div>
+    </el-header>
+    <div class="flow-containers">
+      <el-container class="bpmn-el-container" style="align-items: stretch">
+        <el-main style="padding: 0">
+          <div ref="canvas" class="canvas" />
+        </el-main>
+      </el-container>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BpmnViewer from 'bpmn-js/lib/Viewer';
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
+import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
+import { ModuleDeclaration } from 'didi';
+import { Canvas, ModdleElement } from 'bpmn';
+import EventBus from 'diagram-js/lib/core/EventBus';
+import Overlays from 'diagram-js/lib/features/overlays/Overlays';
+import processApi from '@/api/workflow/processInstance/index';
+
+const canvas = ref<HTMLElement>();
+const modeler = ref<BpmnViewer>();
+const taskList = ref([]);
+const zoom = ref(1);
+const xml = ref('');
+const loading = ref(false);
+const bpmnVisible = ref(true);
+const historyList = ref([]);
+
+const init = (instanceId) => {
+  loading.value = true;
+  bpmnVisible.value = true;
+  nextTick(async () => {
+    if (modeler.value) modeler.value.destroy();
+    modeler.value = new BpmnViewer({
+      container: canvas.value,
+      additionalModules: [
+        {
+          //禁止滚轮滚动
+          zoomScroll: ['value', '']
+        },
+        ZoomScrollModule,
+        MoveCanvasModule
+      ] as ModuleDeclaration[]
+    });
+    const resp = await processApi.getHistoryList(instanceId);
+    xml.value = resp.data.xml;
+    taskList.value = resp.data.taskList;
+    historyList.value = resp.data.historyList;
+    await createDiagram(xml.value);
+    loading.value = false;
+  });
+};
+
+const initXml = (xmlStr: string) => {
+  loading.value = true;
+  bpmnVisible.value = true;
+  nextTick(async () => {
+    if (modeler.value) modeler.value.destroy();
+    modeler.value = new BpmnViewer({
+      container: canvas.value,
+      additionalModules: [
+        {
+          //禁止滚轮滚动
+          zoomScroll: ['value', '']
+        },
+        ZoomScrollModule,
+        MoveCanvasModule
+      ] as ModuleDeclaration[]
+    });
+    xml.value = xmlStr;
+    await createDiagram(xml.value);
+    loading.value = false;
+  });
+};
+
+const createDiagram = async (data) => {
+  try {
+    await modeler.value.importXML(data);
+    fitViewport();
+    fillColor();
+    loading.value = false;
+    addEventBusListener();
+  } catch (err) {
+    console.log(err);
+  }
+};
+const addEventBusListener = () => {
+  const eventBus = modeler.value.get<EventBus>('eventBus');
+  const overlays = modeler.value.get<Overlays>('overlays');
+  eventBus.on<ModdleElement>('element.hover', (e) => {
+    let data = historyList.value.find((t) => t.taskDefinitionKey === e.element.id);
+    if (e.element.type === 'bpmn:UserTask' && data) {
+      setTimeout(() => {
+        genNodeDetailBox(e, overlays, data);
+      }, 10);
+    }
+  });
+  eventBus.on('element.out', (e) => {
+    overlays.clear();
+  });
+};
+const genNodeDetailBox = (e, overlays, data) => {
+  overlays.add(e.element.id, {
+    position: { top: e.element.height, left: 0 },
+    html: `<div class="verlays">
+                    <p>审批人员: ${data.nickName || ''}<p/>
+                    <p>节点状态：${data.status || ''}</p>
+                    <p>开始时间：${data.startTime || ''}</p>
+                    <p>结束时间：${data.endTime || ''}</p>
+                    <p>审批耗时：${data.runDuration || ''}</p>
+                   </div>`
+  });
+};
+// 让图能自适应屏幕
+const fitViewport = () => {
+  zoom.value = modeler.value.get<Canvas>('canvas').zoom('fit-viewport');
+  const bbox = document.querySelector<SVGGElement>('.flow-containers .viewport').getBBox();
+  const currentViewBox = modeler.value.get('canvas').viewbox();
+  const elementMid = {
+    x: bbox.x + bbox.width / 2 - 65,
+    y: bbox.y + bbox.height / 2
+  };
+  modeler.value.get<Canvas>('canvas').viewbox({
+    x: elementMid.x - currentViewBox.width / 2,
+    y: elementMid.y - currentViewBox.height / 2,
+    width: currentViewBox.width,
+    height: currentViewBox.height
+  });
+  zoom.value = (bbox.width / currentViewBox.width) * 1.8;
+};
+// 放大缩小
+const zoomViewport = (zoomIn = true) => {
+  zoom.value = modeler.value.get<Canvas>('canvas').zoom();
+  zoom.value += zoomIn ? 0.1 : -0.1;
+  modeler.value.get<Canvas>('canvas').zoom(zoom.value);
+};
+//上色
+const fillColor = () => {
+  const canvas = modeler.value.get<Canvas>('canvas');
+  bpmnNodeList(modeler.value._definitions.rootElements[0].flowElements, canvas);
+};
+//递归上色
+const bpmnNodeList = (flowElements, canvas) => {
+  flowElements.forEach((n) => {
+    if (n.$type === 'bpmn:UserTask') {
+      const completeTask = taskList.value.find((m) => m.key === n.id);
+      if (completeTask) {
+        canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo');
+        n.outgoing?.forEach((nn) => {
+          const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
+          if (targetTask) {
+            canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
+          } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
+            canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo');
+            canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo');
+            nn.targetRef.outgoing.forEach((e) => {
+              gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed);
+            });
+          } else if (nn.targetRef.$type === 'bpmn:ParallelGateway') {
+            canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo');
+            canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo');
+            nn.targetRef.outgoing.forEach((e) => {
+              gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed);
+            });
+          } else if (nn.targetRef.$type === 'bpmn:InclusiveGateway') {
+            canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo');
+            canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo');
+            nn.targetRef.outgoing.forEach((e) => {
+              gateway(e.id, e.targetRef.$type, e.targetRef.id, canvas, completeTask.completed);
+            });
+          }
+        });
+      }
+    } else if (n.$type === 'bpmn:ExclusiveGateway') {
+      n.outgoing.forEach((nn) => {
+        const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
+        if (targetTask) {
+          canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
+        }
+      });
+    } else if (n.$type === 'bpmn:ParallelGateway') {
+      n.outgoing.forEach((nn) => {
+        const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
+        if (targetTask) {
+          canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
+        }
+      });
+    } else if (n.$type === 'bpmn:InclusiveGateway') {
+      n.outgoing.forEach((nn) => {
+        const targetTask = taskList.value.find((m) => m.key === nn.targetRef.id);
+        if (targetTask) {
+          canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
+        }
+      });
+    } else if (n.$type === 'bpmn:SubProcess') {
+      const completeTask = taskList.value.find((m) => m.key === n.id);
+      if (completeTask) {
+        canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo');
+      }
+      bpmnNodeList(n.flowElements, canvas);
+    } else if (n.$type === 'bpmn:StartEvent') {
+      canvas.addMarker(n.id, 'startEvent');
+      if (n.outgoing) {
+        n.outgoing.forEach((nn) => {
+          const completeTask = taskList.value.find((m) => m.key === nn.targetRef.id);
+          if (completeTask) {
+            canvas.addMarker(nn.id, 'highlight');
+            canvas.addMarker(n.id, 'highlight');
+          }
+        });
+      }
+    } else if (n.$type === 'bpmn:EndEvent') {
+      canvas.addMarker(n.id, 'endEvent');
+      const completeTask = taskList.value.find((m) => m.key === n.id);
+      if (completeTask) {
+        canvas.addMarker(completeTask.key, 'highlight');
+        canvas.addMarker(n.id, 'highlight');
+        return;
+      }
+    }
+  });
+};
+const gateway = (id, targetRefType, targetRefId, canvas, completed) => {
+  if (targetRefType === 'bpmn:ExclusiveGateway') {
+    canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo');
+    canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo');
+  }
+  if (targetRefType === 'bpmn:ParallelGateway') {
+    canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo');
+    canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo');
+  }
+  if (targetRefType === 'bpmn:InclusiveGateway') {
+    canvas.addMarker(id, completed ? 'highlight' : 'highlight-todo');
+    canvas.addMarker(targetRefId, completed ? 'highlight' : 'highlight-todo');
+  }
+};
+defineExpose({
+  init,
+  initXml
+});
+</script>
+
+<style lang="scss" scoped>
+.canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.header-div {
+  display: flex;
+  padding: 10px 0;
+  justify-content: space-between;
+
+  .tips-label {
+    display: flex;
+    div {
+      margin-right: 10px;
+      padding: 5px;
+      font-size: 12px;
+    }
+    .un-complete {
+      border: 1px solid #000;
+    }
+    .in-progress {
+      background-color: rgb(255, 237, 204);
+      border: 1px dashed orange;
+    }
+    .complete {
+      background-color: rgb(204, 230, 204);
+      border: 1px solid green;
+    }
+  }
+}
+
+.view-mode {
+  .el-header,
+  .el-aside,
+  .djs-palette,
+  .bjs-powered-by {
+    display: none;
+  }
+  .el-loading-mask {
+    background-color: initial;
+  }
+  .el-loading-spinner {
+    display: none;
+  }
+}
+.bpmn-el-container {
+  height: calc(100vh - 350px);
+}
+.flow-containers {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  .canvas {
+    width: 100%;
+    height: 100%;
+  }
+  .load {
+    margin-right: 10px;
+  }
+  :deep(.el-form-item__label) {
+    font-size: 13px;
+  }
+
+  :deep(.djs-palette) {
+    left: 0 !important;
+    top: 0;
+    border-top: none;
+  }
+
+  :deep(.djs-container svg) {
+    min-height: 650px;
+  }
+
+  :deep(.startEvent.djs-shape .djs-visual > :nth-child(1)) {
+    fill: #77df6d !important;
+  }
+  :deep(.endEvent.djs-shape .djs-visual > :nth-child(1)) {
+    fill: #ee7b77 !important;
+  }
+  :deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
+    fill: green !important;
+    stroke: green !important;
+    fill-opacity: 0.2 !important;
+  }
+  :deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
+    fill: green !important;
+  }
+  :deep(.highlight.djs-shape .djs-visual > path) {
+    fill: green !important;
+    fill-opacity: 0.2 !important;
+    stroke: green !important;
+  }
+  :deep(.highlight.djs-connection > .djs-visual > path) {
+    stroke: green !important;
+  }
+
+  // 边框滚动动画
+  @keyframes path-animation {
+    from {
+      stroke-dashoffset: 100%;
+    }
+
+    to {
+      stroke-dashoffset: 0%;
+    }
+  }
+
+  :deep(.highlight-todo.djs-connection > .djs-visual > path) {
+    animation: path-animation 60s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    stroke-dasharray: 4px !important;
+    stroke: orange !important;
+    fill-opacity: 0.2 !important;
+    marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr');
+  }
+
+  :deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
+    animation: path-animation 60s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    stroke-dasharray: 4px !important;
+    stroke: orange !important;
+    fill: orange !important;
+    fill-opacity: 0.2 !important;
+  }
+}
+:deep(.verlays) {
+  width: 250px;
+  background: rgb(102, 102, 102);
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  color: #fff;
+  padding: 15px 10px;
+  p {
+    line-height: 28px;
+    margin: 0;
+    padding: 0;
+  }
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index b96829af9e95a304a51d934936a83f5b6a8505f3..9502e60fc1f51dadff40da24f404f6e72785174c 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -2,8 +2,7 @@
   <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>
+        <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>
@@ -11,42 +10,42 @@
 </template>
 
 <script setup lang="ts">
-import { RouteLocationMatched } from 'vue-router'
+import { RouteLocationMatched } from 'vue-router';
 
 const route = useRoute();
 const router = useRouter();
-const levelList = ref<RouteLocationMatched[]>([])
+const levelList = ref<RouteLocationMatched[]>([]);
 
 const getBreadcrumb = () => {
   // only show routes with meta.title
-  let matched = route.matched.filter(item => item.meta && item.meta.title);
-  const first = matched[0]
+  let matched = route.matched.filter((item) => item.meta && item.meta.title);
+  const first = matched[0];
   // 判断是否为首页
   if (!isDashboard(first)) {
-    matched = ([{ path: '/index', meta: { title: '首页' } }] as any).concat(matched)
+    matched = ([{ path: '/index', meta: { title: '首页' } }] as any).concat(matched);
   }
-  levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
-}
+  levelList.value = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false);
+};
 const isDashboard = (route: RouteLocationMatched) => {
-  const name = route && route.name as string
+  const name = route && (route.name as string);
   if (!name) {
-    return false
+    return false;
   }
-  return name.trim() === 'Index'
-}
-const handleLink = (item: RouteLocationMatched) => {
-  const { redirect, path } = item
-  redirect ? router.push(redirect as string) : router.push(path)
-}
+  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()
-})
+  if (route.path.startsWith('/redirect/')) return;
+  getBreadcrumb();
+});
 onMounted(() => {
   getBreadcrumb();
-})
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/BuildCode/index.vue b/src/components/BuildCode/index.vue
index b23665cbbef49c920a41e9b76eb6ffb88ee9228c..0b8e3f4db238fde1b8c0ee88b67897177ec8587a 100644
--- a/src/components/BuildCode/index.vue
+++ b/src/components/BuildCode/index.vue
@@ -1,53 +1,50 @@
-<!-- 代码构建 -->
+<template>
+  <!-- 代码构建 -->
+  <div>
+    <v-form-designer
+      ref="buildRef"
+      class="build"
+      :designer-config="{ importJsonButton: true, exportJsonButton: true, exportCodeButton: true, generateSFCButton: true, formTemplates: true }"
+    >
+      <template v-if="showBtn" #customToolButtons>
+        <el-button link type="primary" icon="Select" @click="getJson">保存</el-button>
+      </template>
+    </v-form-designer>
+  </div>
+</template>
+
 <script setup lang="ts">
+interface Props {
+  showBtn: boolean;
+  formJson: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showBtn: true,
+  formJson: ''
+});
 
-const props = defineProps({
-  showBtn: {
-    type: Boolean,
-    default: false
-  },
-  formJson: {
-    type: Object,
-    default: undefined
-  }
-})
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const buildRef = ref();
 const emits = defineEmits(['reJson', 'saveDesign']);
 
-
-
 //获取表单json
 const getJson = () => {
-  const formJson = JSON.stringify(buildRef.value.getFormJson())
-  const fieldJson = JSON.stringify(buildRef.value.getFieldWidgets())
+  const formJson = JSON.stringify(buildRef.value.getFormJson());
+  const fieldJson = JSON.stringify(buildRef.value.getFieldWidgets());
   let data = {
-    formJson, fieldJson
-  }
-  emits("saveDesign", data)
-}
+    formJson,
+    fieldJson
+  };
+  emits('saveDesign', data);
+};
 
 onMounted(() => {
   if (props.formJson) {
-    buildRef.value.setFormJson(props.formJson)
+    buildRef.value.setFormJson(props.formJson);
   }
-})
+});
 </script>
 
-<template>
-  <div>
-    <v-form-designer
-      class="build"
-      ref="buildRef"
-      :designer-config="{ importJsonButton: true, exportJsonButton: true, exportCodeButton: true, generateSFCButton: true, formTemplates: true }"
-    >
-      <template #customToolButtons v-if="showBtn">
-        <el-button link type="primary" icon="Select" @click="getJson">保存</el-button>
-      </template>
-    </v-form-designer>
-  </div>
-</template>
-
 <style lang="scss">
 .build {
   margin: 0 !important;
diff --git a/src/components/BuildCode/render.vue b/src/components/BuildCode/render.vue
index 62f3d864c0f2951a742c2fa52cbf51be93be7566..aeb9312bdc766422b57876a2fb4b7dd61d3dff4b 100644
--- a/src/components/BuildCode/render.vue
+++ b/src/components/BuildCode/render.vue
@@ -1,62 +1,57 @@
+<template>
+  <div class="">
+    <v-form-render ref="vFormRef" :form-json="formJson" :form-data="formData" />
+  </div>
+</template>
+
 <!-- 动态表单渲染 -->
-<script setup name="Render">
+<script setup name="Render" lang="ts">
+interface Props {
+  formJson: string | object;
+  formData: string | object;
+  isView: boolean;
+}
 
-const props = defineProps({
-  formJson: {
-    type: [String, Object],
-    default: ""
-  },
-  formData: {
-    type: [String, Object],
-    default: ""
-  },
-  isView: {
-    type: Boolean,
-    default: false
-  }
-})
+const props = withDefaults(defineProps<Props>(), {
+  formJson: '',
+  formData: '',
+  isView: false
+});
 
-const vFormRef = ref(null)
+const vFormRef = ref();
 // 获取表单数据-异步
 const getFormData = () => {
-  return vFormRef.value.getFormData()
-}
+  return vFormRef.value.getFormData();
+};
 
 /**
  * 设置表单内容
  * @param {表单配置} formConf
  * formConfig：{ formTemplate：表单模板，formData：表单数据，hiddenField：需要隐藏的字段字符串集合，disabledField：需要禁用的自读字符串集合}
  */
-const initForm = (formConf) => {
-  const { formTemplate, formData, hiddenField, disabledField } = toRaw(formConf)
+const initForm = (formConf: any) => {
+  const { formTemplate, formData, hiddenField, disabledField } = toRaw(formConf);
   if (formTemplate) {
-    vFormRef.value.setFormJson(formTemplate)
+    vFormRef.value.setFormJson(formTemplate);
     if (formData) {
-      vFormRef.value.setFormData(formData)
+      vFormRef.value.setFormData(formData);
     }
     if (disabledField && disabledField.length > 0) {
       setTimeout(() => {
-        vFormRef.value.disableWidgets(disabledField)
-      }, 200)
+        vFormRef.value.disableWidgets(disabledField);
+      }, 200);
     }
     if (hiddenField && hiddenField.length > 0) {
       setTimeout(() => {
-        vFormRef.value.hideWidgets(hiddenField)
-      }, 200)
+        vFormRef.value.hideWidgets(hiddenField);
+      }, 200);
     }
     if (props.isView) {
-      console.log(props.isView)
       setTimeout(() => {
-        vFormRef.value.disableForm()
-      }, 100)
+        vFormRef.value.disableForm();
+      }, 100);
     }
   }
-}
-defineExpose({ getFormData, initForm })
+};
+defineExpose({ getFormData, initForm });
 </script>
-
-<template>
-  <div class="">
-    <v-form-render ref="vFormRef" :form-json="formJson" :form-data="formData" />
-  </div>
-</template>
diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue
index 45b288b7373f6e4a8631d84fe8f048cfc6cf9ca1..ad326c2cd9bd4f05ce4f38f09a1c3e9d7f88d010 100644
--- a/src/components/DictTag/index.vue
+++ b/src/components/DictTag/index.vue
@@ -2,19 +2,31 @@
   <div>
     <template v-for="(item, index) in options">
       <template v-if="values.includes(item.value)">
-        <span v-if="(item.elTagType === 'default' || item.elTagType === '') && (item.elTagClass === '' || item.elTagClass == null)"
-              :key="item.value" :index="index" :class="item.elTagClass">
-          {{ item.label + " " }}
+        <span
+          v-if="(item.elTagType === 'default' || item.elTagType === '') && (item.elTagClass === '' || item.elTagClass == null)"
+          :key="item.value"
+          :index="index"
+          :class="item.elTagClass"
+        >
+          {{ item.label + ' ' }}
         </span>
         <el-tag
           v-else
-          :disable-transitions="true"
           :key="item.value + ''"
+          :disable-transitions="true"
           :index="index"
-          :type="(item.elTagType === 'primary' || item.elTagType === 'default')? '' : item.elTagType"
+          :type="
+            item.elTagType === 'primary' ||
+            item.elTagType === 'success' ||
+            item.elTagType === 'info' ||
+            item.elTagType === 'warning' ||
+            item.elTagType === 'danger'
+              ? item.elTagType
+              : 'primary'
+          "
           :class="item.elTagClass"
         >
-          {{ item.label + " " }}
+          {{ item.label + ' ' }}
         </el-tag>
       </template>
     </template>
@@ -25,57 +37,54 @@
 </template>
 
 <script setup lang="ts">
-import { propTypes } from '@/utils/propTypes';
-
-
-const props = defineProps({
-  // 数据
-  options: {
-    type: Array as PropType<DictDataOption[]>,
-    default: null,
-  },
-  // 当前的值
-  value: [Number, String, Array] as PropType<number | string | Array<number | string>>,
-  // 当未找到匹配的数据时，显示value
-  showValue: propTypes.bool.def(true),
-  separator: propTypes.string.def(","),
+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 []
-  return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator);
+  if (props.value === '' || props.value === null || typeof props.value === 'undefined') return [];
+  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
+  if (props.options?.length == 0 || props.value === '' || props.value === null || typeof props.value === 'undefined') return false;
   // 传入值为非数组
-  values.value.forEach(item => {
-    if (!props.options.some(v => v.value === item)) {
-      return true // 如果有未匹配项，将标志设置为true
+  let unmatch = false; // 添加一个标志来判断是否有未匹配项
+  values.value.forEach((item) => {
+    if (!props.options.some((v) => v.value === item)) {
+      unmatch = true; // 如果有未匹配项，将标志设置为true
     }
-  })
-  return false // 返回标志的值
+  });
+  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)) {
+  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 "";
+  if (array.length === 0) return '';
   return array.reduce((pre, cur) => {
-    return pre + " " + cur;
+    return pre + ' ' + cur;
   });
-}
+};
 </script>
 
 <style scoped>
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index b5299b42a31827875f0340294a5650f3f8604456..fc30c85ed2062b314cabbb0b07e54fc1beaccc25 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <el-upload
+      v-if="type === 'url'"
       :action="upload.url"
       :before-upload="handleBeforeUpload"
       :on-success="handleUploadSuccess"
@@ -9,28 +10,30 @@
       name="file"
       :show-file-list="false"
       :headers="upload.headers"
-      ref="uploadRef"
-      v-if="type === 'url'"
     >
+      <i ref="uploadRef"></i>
     </el-upload>
-    <div class="editor">
-      <quill-editor
-        ref="quillEditorRef"
-        v-model:content="content"
-        contentType="html"
-        @textChange="(e: any) => $emit('update:modelValue', content)"
-        :options="options"
-        :style="styles"
-      />
-    </div>
+  </div>
+  <div class="editor">
+    <quill-editor
+      ref="quillEditorRef"
+      v-model:content="content"
+      content-type="html"
+      :options="options"
+      :style="styles"
+      @text-change="(e: any) => $emit('update:modelValue', content)"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { QuillEditor, Quill } from '@vueup/vue-quill';
 import '@vueup/vue-quill/dist/vue-quill.snow.css';
+
+import { QuillEditor, Quill } from '@vueup/vue-quill';
 import { propTypes } from '@/utils/propTypes';
-import { globalHeaders } from "@/utils/request";
+import { globalHeaders } from '@/utils/request';
+
+defineEmits(['update:modelValue']);
 
 const props = defineProps({
   /* 编辑器的内容 */
@@ -52,42 +55,43 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const upload = reactive<UploadOption>({
   headers: globalHeaders(),
   url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload'
-})
+});
 const quillEditorRef = ref();
+const uploadRef = ref<HTMLDivElement>();
 
-const options = ref({
-  theme: "snow",
+const options = ref<any>({
+  theme: 'snow',
   bounds: document.body,
-  debug: "warn",
+  debug: 'warn',
   modules: {
     // 工具栏配置
     toolbar: {
       container: [
-        ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
-        ["blockquote", "code-block"],                    // 引用  代码块
-        [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
-        [{ indent: "-1" }, { indent: "+1" }],            // 缩进
-        [{ size: ["small", false, "large", "huge"] }],   // 字体大小
-        [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
-        [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
-        [{ align: [] }],                                 // 对齐方式
-        ["clean"],                                       // 清除文本格式
-        ["link", "image", "video"]                       // 链接、图片、视频
+        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+        ['blockquote', 'code-block'], // 引用  代码块
+        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
+        [{ indent: '-1' }, { indent: '+1' }], // 缩进
+        [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
+        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+        [{ align: [] }], // 对齐方式
+        ['clean'], // 清除文本格式
+        ['link', 'image', 'video'] // 链接、图片、视频
       ],
       handlers: {
-        image: function (value: any) {
+        image: (value: boolean) => {
           if (value) {
             // 调用element图片上传
-            (document.querySelector(".editor-img-uploader>.el-upload") as HTMLDivElement)?.click();
+            uploadRef.value.click();
           } else {
-            Quill.format("image", true);
+            Quill.format('image', true);
           }
-        },
-      },
+        }
+      }
     }
   },
-  placeholder: "请输入内容",
-  readOnly: props.readOnly,
+  placeholder: '请输入内容',
+  readOnly: props.readOnly
 });
 
 const styles = computed(() => {
@@ -99,14 +103,18 @@ const styles = computed(() => {
     style.height = `${props.height}px`;
   }
   return style;
-})
+});
 
-const content = ref("");
-watch(() => props.modelValue, (v) => {
-  if (v !== content.value) {
-    content.value = v === undefined ? "<p></p>" : v;
-  }
-}, { immediate: true });
+const content = ref('');
+watch(
+  () => props.modelValue,
+  (v: string) => {
+    if (v !== content.value) {
+      content.value = v === undefined ? '<p></p>' : v;
+    }
+  },
+  { immediate: true }
+);
 
 // 图片上传成功返回图片地址
 const handleUploadSuccess = (res: any) => {
@@ -117,19 +125,19 @@ const handleUploadSuccess = (res: any) => {
     // 获取光标位置
     let length = quill.selection.savedRange.index;
     // 插入图片，res为服务器返回的图片链接地址
-    quill.insertEmbed(length, "image", res.data.url);
+    quill.insertEmbed(length, 'image', res.data.url);
     // 调整光标到最后
     quill.setSelection(length + 1);
     proxy?.$modal.closeLoading();
   } else {
-    proxy?.$modal.loading(res.msg);
+    proxy?.$modal.msgError('图片插入失败');
     proxy?.$modal.closeLoading();
   }
-}
+};
 
 // 图片上传前拦截
 const handleBeforeUpload = (file: any) => {
-  const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
+  const type = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg'];
   const isJPG = type.includes(file.type);
   //检验文件格式
   if (!isJPG) {
@@ -146,13 +154,12 @@ const handleBeforeUpload = (file: any) => {
   }
   proxy?.$modal.loading('正在上传文件，请稍候...');
   return true;
-}
+};
 
 // 图片失败拦截
 const handleUploadError = (err: any) => {
-  console.error(err);
   proxy?.$modal.msgError('上传文件失败');
-}
+};
 </script>
 
 <style>
@@ -167,71 +174,71 @@ const handleUploadError = (err: any) => {
 .quill-img {
   display: none;
 }
-.ql-snow .ql-tooltip[data-mode="link"]::before {
-  content: "请输入链接地址:";
+.ql-snow .ql-tooltip[data-mode='link']::before {
+  content: '请输入链接地址:';
 }
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
   border-right: 0;
-  content: "保存";
+  content: '保存';
   padding-right: 0;
 }
-.ql-snow .ql-tooltip[data-mode="video"]::before {
-  content: "请输入视频地址:";
+.ql-snow .ql-tooltip[data-mode='video']::before {
+  content: '请输入视频地址:';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
-  content: "14px";
+  content: '14px';
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
-  content: "10px";
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
+  content: '10px';
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
-  content: "18px";
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
+  content: '18px';
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
-  content: "32px";
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
+  content: '32px';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
-  content: "文本";
+  content: '文本';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
-  content: "标题1";
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
+  content: '标题1';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
-  content: "标题2";
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
+  content: '标题2';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
-  content: "标题3";
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
+  content: '标题3';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
-  content: "标题4";
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
+  content: '标题4';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
-  content: "标题5";
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
+  content: '标题5';
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
-  content: "标题6";
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
+  content: '标题6';
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
-  content: "标准字体";
+  content: '标准字体';
 }
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
-  content: "衬线字体";
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
+  content: '衬线字体';
 }
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
-  content: "等宽字体";
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
+  content: '等宽字体';
 }
 </style>
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index be99ac0325f1c4636125284ba031f004a183b169..aaaa45ca468b3a0fe6310a556513077d529d3a4a 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="upload-file">
     <el-upload
+      ref="fileUploadRef"
       multiple
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
@@ -12,30 +13,29 @@
       :show-file-list="false"
       :headers="headers"
       class="upload-file-uploader"
-      ref="fileUploadRef"
     >
       <!-- 上传按钮 -->
       <el-button type="primary">选取文件</el-button>
     </el-upload>
     <!-- 上传提示 -->
-    <div class="el-upload__tip" v-if="showTip">
+    <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>
+        格式为 <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 :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+      <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="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
         </el-link>
         <div class="ele-upload-list__item-content-action">
-          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
+          <el-button type="danger" link @click="handleDelete(index)">删除</el-button>
         </div>
       </li>
     </transition-group>
@@ -43,20 +43,23 @@
 </template>
 
 <script setup lang="ts">
-import { listByIds, delOss } from "@/api/system/oss";
 import { propTypes } from '@/utils/propTypes';
-import { globalHeaders } from "@/utils/request";
+import { delOss, listByIds } from '@/api/system/oss';
+import { globalHeaders } from '@/utils/request';
 
 const props = defineProps({
-    modelValue: [String, Object, Array],
-    // 数量限制
-    limit: propTypes.number.def(5),
-    // 大小限制(MB)
-    fileSize: propTypes.number.def(5),
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: propTypes.array.def(["doc", "xls", "ppt", "txt", "pdf"]),
-    // 是否显示提示
-    isShowTip: propTypes.bool.def(true),
+  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', 'xls', 'ppt', 'txt', 'pdf']),
+  // 是否显示提示
+  isShowTip: propTypes.bool.def(true)
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -65,153 +68,162 @@ 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 uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
 const headers = ref(globalHeaders());
 
 const fileList = ref<any[]>([]);
-const showTip = computed(
-    () => props.isShowTip && (props.fileType || props.fileSize)
-);
+const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
 
 const fileUploadRef = ref<ElUploadInstance>();
 
-watch(() => props.modelValue, async val => {
+watch(
+  () => props.modelValue,
+  async (val) => {
     if (val) {
-        let temp = 1;
-        // 首先将值转为数组
-        let list = [];
-        if (Array.isArray(val)) {
-            list = val;
-        } else {
-            const res = await listByIds(val as string)
-            list = res.data.map((oss) => {
-                const data = { name: oss.originalName, url: oss.url, ossId: oss.ossId };
-                return data;
-            });
-        }
-        // 然后将数组转为对象数组
-        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;
+      let temp = 1;
+      // 首先将值转为数组
+      let list: any[] = [];
+      if (Array.isArray(val)) {
+        list = val;
+      } else {
+        const res = await listByIds(val);
+        list = res.data.map((oss) => {
+          return {
+            name: oss.originalName,
+            url: oss.url,
+            ossId: oss.ossId
+          };
         });
+      }
+      // 然后将数组转为对象数组
+      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 [];
+      fileList.value = [];
+      return [];
     }
-}, { deep: true, immediate: true });
+  },
+  { 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) {
-            proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);
-            return false;
-        }
+  // 校检文件类型
+  if (props.fileType.length) {
+    const fileName = file.name.split('.');
+    const fileExt = fileName[fileName.length - 1];
+    const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
+    if (!isTypeOk) {
+      proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
+      return false;
     }
-    // 校检文件大小
-    if (props.fileSize) {
-        const isLt = file.size / 1024 / 1024 < props.fileSize;
-        if (!isLt) {
-            proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
-            return false;
-        }
+  }
+  // 校检文件大小
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+      return false;
     }
-    proxy?.$modal.loading("正在上传文件，请稍候...");
-    number.value++;
-    return true;
-}
+  }
+  proxy?.$modal.loading('正在上传文件，请稍候...');
+  number.value++;
+  return true;
+};
 
 // 文件个数超出
 const handleExceed = () => {
-    proxy?.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
-}
+  proxy?.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+};
 
 // 上传失败
 const handleUploadError = () => {
-    proxy?.$modal.msgError("上传文件失败");
-}
+  proxy?.$modal.msgError('上传文件失败');
+};
 
 // 上传成功回调
 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--;
-        proxy?.$modal.closeLoading();
-        proxy?.$modal.msgError(res.msg);
-        fileUploadRef.value?.handleRemove(file);
-        uploadedSuccessfully();
-    }
-}
+  if (res.code === 200) {
+    uploadList.value.push({
+      name: res.data.fileName,
+      url: res.data.url,
+      ossId: res.data.ossId
+    });
+    uploadedSuccessfully();
+  } else {
+    number.value--;
+    proxy?.$modal.closeLoading();
+    proxy?.$modal.msgError(res.msg);
+    fileUploadRef.value?.handleRemove(file);
+    uploadedSuccessfully();
+  }
+};
 
 // 删除文件
 const handleDelete = (index: number) => {
-    let ossId = fileList.value[index].ossId;
-    delOss(ossId);
-    fileList.value.splice(index, 1);
-    emit("update:modelValue", listToString(fileList.value));
-}
+  let 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));
-        proxy?.$modal.closeLoading();
-    }
-}
+  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));
+    proxy?.$modal.closeLoading();
+  }
+};
 
 // 获取文件名称
 const getFileName = (name: string) => {
-    // 如果是url那么取最后的名字 如果不是直接返回
-    if (name.lastIndexOf("/") > -1) {
-        return name.slice(name.lastIndexOf("/") + 1);
-    } else {
-        return name;
-    }
-}
+  // 如果是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) : "";
-}
+  let strs = '';
+  separator = separator || ',';
+  list.forEach((item) => {
+    if (item.ossId) {
+      strs += item.ossId + separator;
+    }
+  });
+  return strs != '' ? strs.substring(0, strs.length - 1) : '';
+};
 </script>
 
 <style scoped lang="scss">
 .upload-file-uploader {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 .upload-file-list .el-upload-list__item {
-    border: 1px solid #e4e7ed;
-    line-height: 2;
-    margin-bottom: 10px;
-    position: relative;
+  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;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
 }
 
 .ele-upload-list__item-content-action .el-link {
-    margin-right: 10px;
+  margin-right: 10px;
 }
 </style>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 489ac43e738cded772ecb31118edd5bf725cf330..f9f5e6233020e0926673081470d810c65b0e687b 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="padding: 0 15px;" @click="toggleClick">
+  <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"
@@ -13,12 +13,12 @@ import { propTypes } from '@/utils/propTypes';
 
 defineProps({
   isActive: propTypes.bool.def(false)
-})
+});
 
-const emit = defineEmits(['toggleClick'])
+const emit = defineEmits(['toggleClick']);
 const toggleClick = () => {
   emit('toggleClick');
-}
+};
 </script>
 
 <style scoped>
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index b922c6c4062009d7f267175377e65bfb54bc9588..a785958d457938322a509d13a0475139c2a9f44d 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div :class="{ 'show': show }" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click"/>
+  <div :class="{ show: show }" class="header-search">
+    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
     <el-select
       ref="headerSearchSelectRef"
       v-model="search"
@@ -12,23 +12,22 @@
       class="header-search-select"
       @change="change"
     >
-      <el-option v-for="option in options" :key="option.item.path" :value="option.item"
-                 :label="option.item.title.join(' > ')"/>
+      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
     </el-select>
   </div>
 </template>
 
 <script setup lang="ts" name="HeaderSearch">
 import Fuse from 'fuse.js';
-import {getNormalPath} from '@/utils/ruoyi';
-import {isHttp} from '@/utils/validate';
+import { getNormalPath } from '@/utils/ruoyi';
+import { isHttp } from '@/utils/validate';
 import usePermissionStore from '@/store/modules/permission';
-import {RouteOption} from 'vue-router';
+import { RouteRecordRaw } from 'vue-router';
 
 type Router = Array<{
   path: string;
   title: string[];
-}>
+}>;
 
 const search = ref('');
 const options = ref<any>([]);
@@ -37,39 +36,39 @@ const show = ref(false);
 const fuse = ref();
 const headerSearchSelectRef = ref<ElSelectInstance>();
 const router = useRouter();
-const routes = computed(() => usePermissionStore().routes);
+const routes = computed(() => usePermissionStore().getRoutes());
 
 const click = () => {
-  show.value = !show.value
+  show.value = !show.value;
   if (show.value) {
-    headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
+    headerSearchSelectRef.value && headerSearchSelectRef.value.focus();
   }
 };
 const close = () => {
-  headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
-  options.value = []
-  show.value = false
-}
+  headerSearchSelectRef.value && headerSearchSelectRef.value.blur();
+  options.value = [];
+  show.value = false;
+};
 const change = (val: any) => {
   const path = val.path;
   const query = val.query;
   if (isHttp(path)) {
     // http(s):// 路径新窗口打开
-    const pindex = path.indexOf("http");
-    window.open(path.substr(pindex, path.length), "_blank");
+    const pindex = path.indexOf('http');
+    window.open(path.substr(pindex, path.length), '_blank');
   } else {
     if (query) {
       router.push({ path: path, query: JSON.parse(query) });
     } else {
-      router.push(path)
+      router.push(path);
     }
   }
-  search.value = ''
-  options.value = []
+  search.value = '';
+  options.value = [];
   nextTick(() => {
-    show.value = false
-  })
-}
+    show.value = false;
+  });
+};
 const initFuse = (list: Router) => {
   fuse.value = new Fuse(list, {
     shouldSort: true,
@@ -77,20 +76,23 @@ const initFuse = (list: Router) => {
     location: 0,
     distance: 100,
     minMatchCharLength: 1,
-    keys: [{
-      name: 'title',
-      weight: 0.7
-    }, {
-      name: 'path',
-      weight: 0.3
-    }]
-  })
-}
+    keys: [
+      {
+        name: 'title',
+        weight: 0.7
+      },
+      {
+        name: 'path',
+        weight: 0.3
+      }
+    ]
+  });
+};
 // Filter out the routes that can be displayed in the sidebar
 // And generate the internationalized title
-const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: string[] = []) => {
-  let res: Router = []
-  routes.forEach(r => {
+const generateRoutes = (routes: RouteRecordRaw[], basePath = '', prefixTitle: string[] = []) => {
+  let res: Router = [];
+  routes.forEach((r) => {
     // skip hidden router
     if (!r.hidden) {
       const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
@@ -98,7 +100,7 @@ const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: strin
         path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
         title: [...prefixTitle],
         query: ''
-      }
+      };
       if (r.meta && r.meta.title) {
         data.title = [...data.title, r.meta.title];
         if (r.redirect !== 'noRedirect') {
@@ -109,7 +111,7 @@ const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: strin
       }
 
       if (r.query) {
-        data.query = r.query
+        data.query = r.query;
       }
 
       // recursive child routes
@@ -120,20 +122,20 @@ const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: strin
         }
       }
     }
-  })
+  });
   return res;
-}
+};
 const querySearch = (query: string) => {
   if (query !== '') {
-    options.value = fuse.value.search(query)
+    options.value = fuse.value.search(query);
   } else {
-    options.value = []
+    options.value = [];
   }
-}
+};
 
 onMounted(() => {
   searchPool.value = generateRoutes(routes.value);
-})
+});
 
 // watchEffect(() => {
 //     searchPool.value = generateRoutes(routes.value)
@@ -141,15 +143,15 @@ onMounted(() => {
 
 watch(show, (value) => {
   if (value) {
-    document.body.addEventListener('click', close)
+    document.body.addEventListener('click', close);
   } else {
-    document.body.removeEventListener('click', close)
+    document.body.removeEventListener('click', close);
   }
-})
+});
 
-watch(searchPool, (list) => {
-  initFuse(list)
-})
+watch(searchPool, (list: Router) => {
+  initFuse(list);
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 1cd0023cd4a76c05636922c525c89b2f87b3be09..3bfde4dc016828253e91edbe5289c0659b72a55d 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="relative" :style="{ width: width }">
-    <el-input v-model="modelValue" readonly @click="visible = !visible" placeholder="点击选择图标">
+  <div class="relative" :style="{ 'width': width }">
+    <el-input v-model="modelValue" readonly placeholder="点击选择图标" @click="visible = !visible">
       <template #prepend>
         <svg-icon :icon-class="modelValue" />
       </template>
@@ -8,18 +8,18 @@
 
     <el-popover shadow="none" :visible="visible" placement="bottom-end" trigger="click" :width="450">
       <template #reference>
-        <div @click="visible = !visible" class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]">
+        <div class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]" @click="visible = !visible">
           <i-ep-caret-top v-show="visible"></i-ep-caret-top>
           <i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom>
         </div>
       </template>
 
-      <el-input class="p-2" v-model="filterValue" placeholder="搜索图标" clearable @input="filterIcons" />
+      <el-input v-model="filterValue" class="p-2" placeholder="搜索图标" clearable @input="filterIcons" />
 
       <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">
-            <li :class="['icon-item', {active: modelValue == iconName}]" @click="selectedIcon(iconName)">
+            <li :class="['icon-item', { active: modelValue == iconName }]" @click="selectedIcon(iconName)">
               <svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" />
             </li>
           </el-tooltip>
@@ -50,13 +50,11 @@ const filterValue = ref('');
  */
 const filterIcons = () => {
   if (filterValue.value) {
-    iconNames.value = icons.filter(iconName =>
-      iconName.includes(filterValue.value)
-    );
+    iconNames.value = icons.filter((iconName) => iconName.includes(filterValue.value));
   } else {
     iconNames.value = icons;
   }
-}
+};
 /**
  * 选择图标
  * @param iconName 选择的图标名称
@@ -64,12 +62,12 @@ const filterIcons = () => {
 const selectedIcon = (iconName: string) => {
   emit('update:modelValue', iconName);
   visible.value = false;
-}
+};
 </script>
 
 <style scoped lang="scss">
 .el-scrollbar {
-  max-height: calc(50vh - 100px)!important;
+  max-height: calc(50vh - 100px) !important;
   overflow-y: auto;
 }
 .el-divider--horizontal {
@@ -99,8 +97,8 @@ const selectedIcon = (iconName: string) => {
     }
   }
   .active {
-      border-color: var(--el-color-primary);
-      color: var(--el-color-primary);
-    }
+    border-color: var(--el-color-primary);
+    color: var(--el-color-primary);
+  }
 }
 </style>
diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index 723ccdb208bf657c7c516ecb5e3d3ff9ed3e85d9..349f72909cce60f5ccdf45ffb7a40325f98d1930 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -15,11 +15,11 @@ const props = defineProps({
   src: propTypes.string.def(''),
   width: {
     type: [Number, String],
-    default: ""
+    default: ''
   },
   height: {
     type: [Number, String],
-    default: ""
+    default: ''
   }
 });
 
@@ -27,29 +27,28 @@ const realSrc = computed(() => {
   if (!props.src) {
     return;
   }
-  let real_src = props.src.split(",")[0];
+  let real_src = props.src.split(',')[0];
   return real_src;
 });
 
 const realSrcList = computed(() => {
   if (!props.src) {
-    return;
+    return [];
   }
-  let real_src_list = props.src.split(",");
+  let real_src_list = props.src.split(',');
   let srcList: string[] = [];
-  real_src_list.forEach(item => {
+  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 realWidth = computed(() => (typeof props.width == 'string' ? props.width : `${props.width}px`));
 
-const realHeight = computed(() =>
-  typeof props.height == "string" ? props.height : `${props.height}px`
-);
+const realHeight = computed(() => (typeof props.height == 'string' ? props.height : `${props.height}px`));
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index d8ed32bf67dc12633dae26794670581c3b146ad1..1c6dcd15521125057777676e61ba1e01f830fec8 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="component-upload-image">
     <el-upload
+      ref="imageUpload"
       multiple
       :action="uploadImgUrl"
       list-type="picture-card"
@@ -9,7 +10,6 @@
       :limit="limit"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
-      ref="imageUpload"
       :before-remove="handleDelete"
       :show-file-list="true"
       :headers="headers"
@@ -22,13 +22,13 @@
       </el-icon>
     </el-upload>
     <!-- 上传提示 -->
-    <div class="el-upload__tip" v-if="showTip">
+    <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>
+        格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
       </template>
       的文件
     </div>
@@ -40,177 +40,195 @@
 </template>
 
 <script setup lang="ts">
-import { listByIds, delOss } from "@/api/system/oss";
-import { ComponentInternalInstance } from "vue";
-import { OssVO } from "@/api/system/oss/types";
+import { listByIds, delOss } from '@/api/system/oss';
+import { OssVO } from '@/api/system/oss/types';
 import { propTypes } from '@/utils/propTypes';
-import {globalHeaders} from "@/utils/request";
+import { globalHeaders } from '@/utils/request';
+import { compressAccurately } from 'image-conversion';
 
 const props = defineProps({
-    modelValue: [String, Object, Array],
-    // 图片数量限制
-    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
-    },
+  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)
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const emit = defineEmits(['update:modelValue']);
 const number = ref(0);
 const uploadList = ref<any[]>([]);
-const dialogImageUrl = ref("");
+const dialogImageUrl = ref('');
 const dialogVisible = ref(false);
 
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
-const uploadImgUrl = ref(baseUrl + "/resource/oss/upload"); // 上传的图片服务器地址
+const uploadImgUrl = ref(baseUrl + '/resource/oss/upload'); // 上传的图片服务器地址
 const headers = ref(globalHeaders());
 
 const fileList = ref<any[]>([]);
-const showTip = computed(
-    () => props.isShowTip && (props.fileType || props.fileSize)
-);
+const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
 
 const imageUploadRef = ref<ElUploadInstance>();
 
-watch(() => props.modelValue, async val => {
+watch(
+  () => props.modelValue,
+  async (val: string) => {
     if (val) {
-        // 首先将值转为数组
-        let list: OssVO[] = [];
-        if (Array.isArray(val)) {
-            list = val as OssVO[];
+      // 首先将值转为数组
+      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 {
-            const res = await listByIds(val as string)
-            list = res.data
+          // 此处name使用ossId 防止删除出现重名
+          itemData = { name: item.ossId, url: item.url, ossId: item.ossId };
         }
-        // 然后将数组转为对象数组
-        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;
-        });
+        return itemData;
+      });
     } else {
-        fileList.value = [];
-        return [];
+      fileList.value = [];
+      return [];
     }
-}, { deep: true, immediate: true });
+  },
+  { 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;
+  let isImg = false;
+  if (props.fileType.length) {
+    let fileExtension = '';
+    if (file.name.lastIndexOf('.') > -1) {
+      fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
     }
-    if (!isImg) {
-        proxy?.$modal.msgError(
-            `文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`
-        );
-        return false;
+    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) {
+    proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}图片格式文件!`);
+    return false;
+  }
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      proxy?.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
+      return false;
     }
-    if (props.fileSize) {
-        const isLt = file.size / 1024 / 1024 < props.fileSize;
-        if (!isLt) {
-            proxy?.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
-            return false;
-        }
-    }
-    proxy?.$modal.loading("正在上传图片，请稍候...");
+  }
+
+  //压缩图片，开启压缩并且大于指定的压缩大小时才压缩
+  if (props.compressSupport && file.size / 1024 > props.compressTargetSize) {
+    proxy?.$modal.loading('正在上传图片，请稍候...');
     number.value++;
-}
+    return compressAccurately(file, props.compressTargetSize);
+  } else {
+    proxy?.$modal.loading('正在上传图片，请稍候...');
+    number.value++;
+  }
+};
 
 // 文件个数超出
 const handleExceed = () => {
-    proxy?.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
-}
+  proxy?.$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--;
-        proxy?.$modal.closeLoading();
-        proxy?.$modal.msgError(res.msg);
-        imageUploadRef.value?.handleRemove(file);
-        uploadedSuccessfully();
-    }
-}
+  if (res.code === 200) {
+    uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
+    uploadedSuccessfully();
+  } else {
+    number.value--;
+    proxy?.$modal.closeLoading();
+    proxy?.$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) {
-        let ossId = fileList.value[findex].ossId;
-        delOss(ossId);
-        fileList.value.splice(findex, 1);
-        emit("update:modelValue", listToString(fileList.value));
-        return false;
-    }
-    return true;
-}
+  const findex = fileList.value.map((f) => f.name).indexOf(file.name);
+  if (findex > -1 && uploadList.value.length === number.value) {
+    let 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));
-        proxy?.$modal.closeLoading();
-    }
-}
+  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));
+    proxy?.$modal.closeLoading();
+  }
+};
 
 // 上传失败
 const handleUploadError = () => {
-    proxy?.$modal.msgError("上传图片失败");
-    proxy?.$modal.closeLoading();
-}
+  proxy?.$modal.msgError('上传图片失败');
+  proxy?.$modal.closeLoading();
+};
 
 // 预览
 const handlePictureCardPreview = (file: any) => {
-    dialogImageUrl.value = file.url;
-    dialogVisible.value = true;
-}
+  dialogImageUrl.value = file.url;
+  dialogVisible.value = true;
+};
 
 // 对象转成指定字符串分隔
 const listToString = (list: any[], separator?: string) => {
-    let strs = "";
-    separator = separator || ",";
-    for (let i in list) {
-        if (undefined !== list[i].ossId && list[i].url.indexOf("blob:") !== 0) {
-            strs += list[i].ossId + separator;
-        }
+  let strs = '';
+  separator = separator || ',';
+  for (let 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) : "";
-}
+  }
+  return strs != '' ? strs.substring(0, strs.length - 1) : '';
+};
 </script>
 
 <style scoped lang="scss">
 // .el-upload--picture-card 控制加号部分
 :deep(.hide .el-upload--picture-card) {
-    display: none;
+  display: none;
 }
 </style>
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
index a30a2f698ab7155b7e656ab9854d1f5141d1a668..b5fafd33656786ffa79890c21761571524208128 100644
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@@ -14,22 +14,21 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import SvgIcon from '@/components/SvgIcon/index.vue';
 import { useAppStore } from '@/store/modules/app';
+import SvgIcon from '@/components/SvgIcon/index.vue';
 
 const appStore = useAppStore();
 const { locale } = useI18n();
 
-
 const message: any = {
   zh_CN: '切换语言成功！',
-  en_US: 'Switch Language Successful!',
-}
-const handleLanguageChange = (lang: string) => {
+  en_US: 'Switch Language Successful!'
+};
+const handleLanguageChange = (lang: any) => {
   locale.value = lang;
   appStore.changeLanguage(lang);
   ElMessage.success(message[lang] || '切换语言成功！');
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index df73cebba3ca3d59229331caee525ab466eb9706..ac02193a74529dd6510f4de975c3b1ac3004bb71 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <div :class="{ 'hidden': hidden }" class="pagination-container">
+  <div :class="{ hidden: hidden }" class="pagination-container">
     <el-pagination
-      :background="background"
       v-model:current-page="currentPage"
       v-model:page-size="pageSize"
+      :background="background"
       :layout="layout"
       :page-sizes="pageSizes"
       :pager-count="pagerCount"
@@ -16,69 +16,69 @@
 
 <script lang="ts">
 export default {
-    name: 'Pagination'
-}
+  name: 'Pagination'
+};
 </script>
 
 <script setup lang="ts">
-import { scrollTo } from '@/utils/scroll-to'
-import { propTypes } from "@/utils/propTypes";
+import { scrollTo } from '@/utils/scroll-to';
+import { propTypes } from '@/utils/propTypes';
 
 const props = defineProps({
-    total: propTypes.number,
-    page: propTypes.number.def(1),
-    limit: propTypes.number.def(20),
-    pageSizes: {
-      type: Array as PropType<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')
-})
+  total: propTypes.number,
+  page: propTypes.number.def(1),
+  limit: propTypes.number.def(20),
+  pageSizes: {
+    type: Array,
+    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)
-    }
-})
+  get() {
+    return props.page;
+  },
+  set(val) {
+    emit('update:page', val);
+  }
+});
 const pageSize = computed({
-    get() {
-        return props.limit
-    },
-    set(val){
-        emit('update:limit', val)
-    }
-})
+  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)
-    }
+  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)
-    }
+  emit('pagination', { page: val, limit: pageSize.value });
+  if (props.autoScroll) {
+    scrollTo(0, 800);
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .pagination-container {
   padding: 32px 16px;
-  .el-pagination{
+  .el-pagination {
     float: v-bind(float);
   }
 }
diff --git a/src/components/Process/approvalRecord.vue b/src/components/Process/approvalRecord.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cbce87a355c897c4eea0bb333ef4971a5025550f
--- /dev/null
+++ b/src/components/Process/approvalRecord.vue
@@ -0,0 +1,116 @@
+<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 label="流程图" name="bpmn">
+          <BpmnView ref="bpmnViewRef"></BpmnView>
+        </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="name" label="任务名称" sortable align="center"></el-table-column>
+              <el-table-column prop="nickName" :show-overflow-tooltip="true" label="办理人" sortable align="center">
+                <template #default="scope">
+                  <el-tag type="success">{{ scope.row.nickName || '无' }}</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="状态" sortable align="center">
+                <template #default="scope">
+                  <el-tag type="success">{{ scope.row.statusName }}</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="comment" label="审批意见" sortable align="center"></el-table-column>
+              <el-table-column prop="startTime" label="开始时间" sortable align="center"></el-table-column>
+              <el-table-column prop="endTime" label="结束时间" sortable align="center"></el-table-column>
+              <el-table-column prop="runDuration" label="运行时长" sortable align="center"></el-table-column>
+              <el-table-column prop="attachmentList" label="附件" sortable 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 style="margin-right: 16px">附件</el-button>
+                    </template>
+                    <el-table border :data="scope.row.attachmentList">
+                      <el-table-column prop="name" 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.contentId)">下载</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 lang="ts" setup>
+import BpmnView from '@/components/BpmnView/index.vue';
+import processApi from '@/api/workflow/processInstance';
+import { propTypes } from '@/utils/propTypes';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const props = defineProps({
+  width: propTypes.string.def('70%'),
+  height: propTypes.string.def('100%')
+});
+const loading = ref(false);
+const visible = ref(false);
+const historyList = ref<Array<any>>([]);
+const tabActiveName = ref('bpmn');
+
+const bpmnViewRef = ref<BpmnView>();
+
+//初始化查询审批记录
+const init = async (instanceId: string) => {
+  visible.value = true;
+  loading.value = true;
+  tabActiveName.value = 'bpmn';
+  historyList.value = [];
+  processApi.getHistoryRecord(instanceId).then((resp) => {
+    historyList.value = resp.data;
+    loading.value = false;
+  });
+  await nextTick(() => {
+    bpmnViewRef.value.init(instanceId);
+  });
+};
+
+/** 下载按钮操作 */
+const handleDownload = (ossId: string) => {
+  proxy?.$download.oss(ossId);
+};
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  init
+});
+</script>
+<style lang="scss" scoped>
+.triangle {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+}
+
+.triangle::after {
+  content: ' ';
+  position: absolute;
+  top: 8em;
+  right: 215px;
+  border: 15px solid;
+  border-color: transparent #fff transparent transparent;
+}
+
+.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/multiInstanceUser.vue b/src/components/Process/multiInstanceUser.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b2039b9836eec7856568a2ca520ea008b2e48899
--- /dev/null
+++ b/src/components/Process/multiInstanceUser.vue
@@ -0,0 +1,368 @@
+<template>
+  <el-dialog v-model="visible" draggable :title="title" :width="width" :height="height" append-to-body
+    :close-on-click-modal="false">
+    <div class="p-2" v-if="multiInstance === 'add'">
+      <el-row :gutter="20">
+        <!-- 部门树 -->
+        <el-col :lg="4" :xs="24" style="">
+          <el-card shadow="hover">
+            <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
+            <el-tree class="mt-2" ref="deptTreeRef" node-key="id" :data="deptOptions"
+              :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false"
+              :filter-node-method="filterNode" highlight-current default-expand-all
+              @node-click="handleNodeClick"></el-tree>
+          </el-card>
+        </el-col>
+        <el-col :lg="20" :xs="24">
+          <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+            :leave-active-class="proxy?.animate.searchAnimate.leave">
+            <div class="search" v-show="showSearch">
+              <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+                <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" @click="handleQuery" icon="Search">搜索</el-button>
+                  <el-button @click="resetQuery" icon="Refresh">重置</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </transition>
+
+          <el-card shadow="hover">
+            <template #header>
+              <el-row :gutter="10">
+                <right-toolbar v-model:showSearch="showSearch" @queryTable="handleQuery" :search="true"></right-toolbar>
+              </el-row>
+            </template>
+
+            <el-table v-loading="loading" :data="userList" ref="multipleTableRef" row-key="userId"
+              @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="50" align="center" />
+              <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
+              <el-table-column label="用户名称" align="center" key="userName" prop="userName" :show-overflow-tooltip="true" />
+              <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
+              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
+              <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+                <template #default="scope">
+                  <span>{{ scope.row.createTime }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
+          </el-card>
+          <el-card shadow="hover">
+            <el-tag v-for="(user, index) in chooseUserList" :key="user.userId" style="margin:2px" closable
+              @close="handleCloseTag(user, index)">{{ user.userName }}
+            </el-tag>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="p-2" v-if="multiInstance === 'delete'">
+      <el-table v-loading="loading" :data="taskList" @selection-change="handleTaskSelection">
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="name" label="任务名称" />
+        <el-table-column prop="assigneeName" label="办理人" />
+      </el-table>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="visible = false">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="User" lang="ts">
+import { deptTreeSelect, listUser, optionSelect } from '@/api/system/user';
+import {
+  addMultiInstanceExecution,
+  deleteMultiInstanceExecution,
+  getTaskUserIdsByAddMultiInstance,
+  getListByDeleteMultiInstance
+} from '@/api/workflow/task';
+import { UserVO } from '@/api/system/user/types';
+import { DeptVO } from '@/api/system/dept/types';
+import { ComponentInternalInstance } from 'vue';
+import { ElTree, ElTable } from 'element-plus';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const props = defineProps({
+  // 宽
+  width: {
+    type: String,
+    default: '70%'
+  },
+  // 高
+  height: {
+    type: String,
+    default: '100%'
+  },
+  // 标题
+  title: {
+    type: String,
+    default: '加签人员'
+  },
+  //是否多选
+  multiple: {
+    type: Boolean,
+    default: true
+  },
+  //回显用户id
+  userIdList: {
+    type: Array,
+    default: []
+  }
+});
+const deptTreeRef = ref(ElTree);
+const multipleTableRef = ref(ElTable);
+
+const userList = ref<UserVO[]>();
+const taskList = ref<Array<any>[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const selectionTask = ref<Array<any>[]>();
+const visible = ref(false);
+const total = ref(0);
+const deptName = ref('');
+const deptOptions = ref<DeptVO[]>([]);
+const chooseUserList = ref(ref<UserVO[]>());
+const userIds = ref<Array<number | string>>([]);
+//加签或者减签
+const multiInstance = ref('');
+const queryParams = ref<Record<string, any>>({
+  pageNum: 1,
+  pageSize: 10,
+  userName: '',
+  nickName: '',
+  taskId: ''
+});
+/** 查询用户列表 */
+const getAddMultiInstanceList = async (taskId: string, userIdList: Array<number | string>) => {
+  deptOptions.value = [];
+  getTreeSelect();
+  multiInstance.value = 'add';
+  userIds.value = userIdList;
+  visible.value = true;
+  queryParams.value.taskId = taskId;
+  loading.value = true;
+  const res1 = await getTaskUserIdsByAddMultiInstance(taskId);
+  queryParams.value.excludeUserIds = res1.data;
+  const res = await listUser(queryParams.value);
+  loading.value = false;
+  userList.value = res.rows;
+  total.value = res.total;
+  if (userList.value && userIds.value.length > 0) {
+    const data = await optionSelect(userIds.value);
+    if (data.data && data.data.length > 0) {
+      chooseUserList.value = data.data;
+      data.data.forEach((user: UserVO) => {
+        multipleTableRef.value!.toggleRowSelection(
+          userList.value.find((item) => {
+            return item.userId == user.userId;
+          }),
+          true
+        );
+      });
+    }
+  }
+};
+
+const getList = async () => {
+  loading.value = true;
+  const res1 = await getTaskUserIdsByAddMultiInstance(queryParams.value.taskId);
+  queryParams.value.excludeUserIds = res1.data;
+  const res = await listUser(queryParams.value);
+  loading.value = false;
+  userList.value = res.rows;
+  total.value = res.total;
+  if (userList.value && userIds.value.length > 0) {
+    const data = await optionSelect(userIds.value);
+    if (data.data && data.data.length > 0) {
+      chooseUserList.value = data.data;
+      data.data.forEach((user: UserVO) => {
+        multipleTableRef.value!.toggleRowSelection(
+          userList.value.find((item) => {
+            return item.userId == user.userId;
+          }),
+          true
+        );
+      });
+    }
+  }
+};
+
+const getDeleteMultiInstanceList = async (taskId: string) => {
+  deptOptions.value = [];
+  loading.value = true;
+  queryParams.value.taskId = taskId;
+  multiInstance.value = 'delete';
+  visible.value = true;
+  const res = await getListByDeleteMultiInstance(taskId);
+  taskList.value = res.data;
+  loading.value = false;
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getAddMultiInstanceList(queryParams.value.taskId, userIds.value);
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value.pageNum = 1;
+  queryParams.value.deptId = undefined;
+  queryParams.value.userName = undefined;
+  queryParams.value.nickName = undefined;
+  deptTreeRef.value.setCurrentKey(null);
+  handleQuery();
+};
+
+/** 选择条数  */
+const handleSelectionChange = (selection: UserVO[]) => {
+  if (props.multiple) {
+    chooseUserList.value = selection.filter((element, index, self) => {
+      return self.findIndex((x) => x.userId === element.userId) === index;
+    });
+    selection.forEach((u) => {
+      if (chooseUserList.value && !chooseUserList.value.includes(u)) {
+        multipleTableRef.value!.toggleRowSelection(u, undefined);
+      }
+    });
+    userIds.value = chooseUserList.value.map((item) => {
+      return item.userId;
+    });
+  } else {
+    chooseUserList.value = selection;
+    if (selection.length > 1) {
+      let delRow = selection.shift();
+      multipleTableRef.value!.toggleRowSelection(delRow, undefined);
+    }
+    if (selection.length === 0) {
+      chooseUserList.value = [];
+    }
+  }
+};
+/** 选择条数  */
+const handleTaskSelection = (selection: any) => {
+  selectionTask.value = selection;
+};
+
+/** 查询部门下拉树结构 */
+const getTreeSelect = async () => {
+  const res = await deptTreeSelect();
+  deptOptions.value = res.data;
+};
+
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    if (visible.value && deptOptions.value && deptOptions.value.length > 0) {
+      deptTreeRef.value.filter(deptName.value);
+    }
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+/** 节点单击事件 */
+const handleNodeClick = (data: DeptVO) => {
+  queryParams.value.deptId = data.id;
+  getList();
+};
+//删除tag
+const handleCloseTag = (user: UserVO, index: any) => {
+  if (multipleTableRef.value.selection && multipleTableRef.value.selection.length > 0) {
+    multipleTableRef.value.selection.forEach((u: UserVO, i: Number) => {
+      if (user.userId === u.userId) {
+        multipleTableRef.value.selection.splice(i, 1);
+      }
+    });
+  }
+  if (chooseUserList.value && chooseUserList.value.length > 0) {
+    chooseUserList.value.splice(index, 1);
+  }
+  multipleTableRef.value.toggleRowSelection(user, undefined);
+
+  if (userIds.value && userIds.value.length > 0) {
+    userIds.value.forEach((userId, i) => {
+      if (userId === user.userId) {
+        userIds.value.splice(i, 1);
+      }
+    });
+  }
+};
+const submitFileForm = async () => {
+  if (multiInstance.value === 'add') {
+    if (chooseUserList.value && chooseUserList.value.length > 0) {
+      loading.value = true;
+      let userIds = chooseUserList.value.map((item) => {
+        return item.userId;
+      });
+      let nickNames = chooseUserList.value.map((item) => {
+        return item.nickName;
+      });
+      let params = {
+        taskId: queryParams.value.taskId,
+        assignees: userIds,
+        assigneeNames: nickNames
+      };
+      await addMultiInstanceExecution(params);
+      emits('submitCallback');
+      loading.value = false;
+      proxy?.$modal.msgSuccess('操作成功');
+      visible.value = false;
+    }
+  } else {
+    if (selectionTask.value && selectionTask.value.length > 0) {
+      loading.value = true;
+      let taskIds = selectionTask.value.map((item: any) => {
+        return item.id;
+      });
+      let executionIds = selectionTask.value.map((item: any) => {
+        return item.executionId;
+      });
+      let assigneeIds = selectionTask.value.map((item: any) => {
+        return item.assignee;
+      });
+      let assigneeNames = selectionTask.value.map((item: any) => {
+        return item.assigneeName;
+      });
+      let params = {
+        taskId: queryParams.value.taskId,
+        taskIds: taskIds,
+        executionIds: executionIds,
+        assigneeIds: assigneeIds,
+        assigneeNames: assigneeNames
+      };
+      await deleteMultiInstanceExecution(params);
+      emits('submitCallback');
+      loading.value = false;
+      proxy?.$modal.msgSuccess('操作成功');
+      visible.value = false;
+    }
+  }
+};
+//事件
+const emits = defineEmits(['submitCallback']);
+
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  getAddMultiInstanceList,
+  getDeleteMultiInstanceList
+});
+</script>
diff --git a/src/components/Process/submitVerify.vue b/src/components/Process/submitVerify.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d71b8558eed8ce50fac9e70461717ac9620fb24a
--- /dev/null
+++ b/src/components/Process/submitVerify.vue
@@ -0,0 +1,353 @@
+<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 label="1" name="type" disabled>站内信</el-checkbox>
+          <el-checkbox label="2" name="type">邮件</el-checkbox>
+          <el-checkbox label="3" name="type">短信</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="附件" v-if="task.businessStatus === 'waiting'">
+        <fileUpload v-model="form.fileId" :fileType="['doc', 'xls', 'ppt', 'txt', 'pdf', 'xlsx', 'docx', 'zip']" :fileSize="'20'"/>
+      </el-form-item>
+      <el-form-item label="抄送">
+        <el-button type="primary" @click="openUserSelectCopy" icon="Plus" circle />
+          <el-tag v-for="user in selectCopyUserList" :key="user.userId" closable style="margin: 2px" @close="handleCopyCloseTag(user)">
+            {{ user.userName }}
+          </el-tag>
+      </el-form-item>
+      <el-form-item label="审批意见" v-if="task.businessStatus === 'waiting'">
+        <el-input v-model="form.message" type="textarea" resize="none" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button v-loading="buttonLoading" type="primary" @click="handleCompleteTask"> 提交 </el-button>
+        <el-button v-if="task.businessStatus === 'waiting'" v-loading="buttonLoading" type="primary" @click="openDelegateTask"> 委托 </el-button>
+        <el-button v-if="task.businessStatus === 'waiting'" v-loading="buttonLoading" type="primary" @click="openTransferTask"> 转办 </el-button>
+        <el-button v-if="task.businessStatus === 'waiting' && task.multiInstance" v-loading="buttonLoading" type="primary" @click="addMultiInstanceUser"> 加签 </el-button>
+        <el-button v-if="task.businessStatus === 'waiting' && task.multiInstance" v-loading="buttonLoading" type="primary" @click="deleteMultiInstanceUser"> 减签 </el-button>
+        <el-button v-if="task.businessStatus === 'waiting'" v-loading="buttonLoading" type="danger" @click="handleTerminationTask"> 终止 </el-button>
+        <el-button v-if="task.businessStatus === 'waiting'" v-loading="buttonLoading" type="danger" @click="handleBackProcessOpen"> 退回 </el-button>
+        <el-button v-loading="buttonLoading" @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>
+    <!-- 加签组件 -->
+    <multiInstanceUser ref="multiInstanceUserRef" :title="title" @submit-callback='closeDialog' />
+
+    <!-- 驳回开始 -->
+    <el-dialog v-model="backVisible" draggable title="驳回" width="40%" :close-on-click-modal="false">
+      <el-form v-loading="backLoading" :model="backForm" label-width="120px" v-if="task.businessStatus === 'waiting'">
+        <el-form-item label="驳回节点">
+          <el-select clearable placeholder="请选择" v-model="backForm.targetActivityId" style="width: 300px">
+            <el-option
+              v-for="item in taskNodeList"
+              :key="item.nodeId"
+              :label="item.nodeName"
+              :value="item.nodeId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="消息提醒">
+          <el-checkbox-group v-model="backForm.messageType">
+            <el-checkbox label="1" name="type" disabled>站内信</el-checkbox>
+            <el-checkbox label="2" name="type">邮件</el-checkbox>
+            <el-checkbox label="3" name="type">短信</el-checkbox>
+          </el-checkbox-group>
+        </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 type="primary" v-loading="backLoading" @click="handleBackProcess">确认</el-button>
+          <el-button v-loading="backLoading" @click="backVisible = false">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 驳回结束 -->
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ComponentInternalInstance } from 'vue';
+import { ElForm } from 'element-plus';
+import { completeTask, backProcess, getTaskById,transferTask,terminationTask,getTaskNodeList,delegateTask } from '@/api/workflow/task';
+import UserSelect from '@/components/UserSelect';
+import MultiInstanceUser from '@/components/Process/multiInstanceUser.vue';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+import { UserVO } from '@/api/system/user/types';
+import { TaskVO } from '@/api/workflow/task/types';
+const userSelectCopyRef = ref<InstanceType<typeof UserSelect>>();
+const transferTaskRef = ref<InstanceType<typeof UserSelect>>();
+const delegateTaskRef = ref<InstanceType<typeof UserSelect>>();
+
+  //加签组件
+const multiInstanceUserRef = ref<InstanceType<typeof MultiInstanceUser>>();
+
+const props = defineProps({
+  taskVariables: {
+    type: Object as () => Record<string, any>,
+    default: {}
+  }
+});
+//遮罩层
+const loading = ref(true);
+//按钮
+const buttonLoading = ref(true);
+//任务id
+const taskId = ref<string>('');
+//抄送人
+const selectCopyUserList = ref<UserVO[]>([]);
+//抄送人id
+const selectCopyUserIds = ref<string>(undefined);
+// 驳回是否显示
+const backVisible = ref(false);
+const backLoading = ref(true);
+// 可驳回得任务节点
+const taskNodeList = ref([]);
+//任务
+const task = ref<TaskVO>({
+  id: undefined,
+  name: undefined,
+  description: undefined,
+  priority: undefined,
+  owner: undefined,
+  assignee: undefined,
+  assigneeName: undefined,
+  processInstanceId: undefined,
+  executionId: undefined,
+  taskDefinitionId: undefined,
+  processDefinitionId: undefined,
+  endTime: undefined,
+  taskDefinitionKey: undefined,
+  dueDate: undefined,
+  category: undefined,
+  parentTaskId: undefined,
+  tenantId: undefined,
+  claimTime: undefined,
+  businessStatus: undefined,
+  businessStatusName: undefined,
+  processDefinitionName: undefined,
+  processDefinitionKey: undefined,
+  participantVo: undefined,
+  multiInstance: undefined,
+  businessKey: undefined,
+  wfNodeConfigVo: undefined
+});
+//加签 减签标题
+const title = ref('');
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: '提示'
+});
+
+const form = ref<Record<string, any>>({
+  taskId: undefined,
+  message: undefined,
+  variables: {},
+  messageType: ['1'],
+  wfCopyList: []
+});
+const backForm = ref<Record<string, any>>({
+  taskId: undefined,
+  targetActivityId: undefined,
+  message: undefined,
+  variables: {},
+  messageType: ['1']
+});
+const closeDialog = () => {
+  dialog.visible = false
+}
+//打开弹窗
+const openDialog = (id?: string) => {
+  selectCopyUserIds.value = undefined
+  selectCopyUserList.value = []
+  form.value.fileId = undefined
+  taskId.value = id;
+  form.value.message = undefined;
+  dialog.visible = true;
+  loading.value = true;
+  buttonLoading.value = true;
+  nextTick(() => {
+    getTaskById(taskId.value).then((response) => {
+      task.value = response.data;
+      loading.value = false;
+      buttonLoading.value = false;
+    });
+  });
+};
+
+onMounted(() => {});
+const emits = defineEmits(['submitCallback', 'cancelCallback']);
+
+/** 办理流程 */
+const handleCompleteTask = async () => {
+  form.value.taskId = taskId.value;
+  form.value.taskVariables = props.taskVariables;
+  if(selectCopyUserList && selectCopyUserList.value.length > 0){
+    let wfCopyList = []
+    selectCopyUserList.value.forEach( e=> {
+      let copyUser = {
+        userId: e.userId,
+        userName: e.nickName
+      }
+      wfCopyList.push(copyUser)
+    })
+    form.value.wfCopyList = wfCopyList
+  }
+  await proxy?.$modal.confirm('是否确认提交？');
+  loading.value = true;
+  buttonLoading.value = true;
+  try {
+    await completeTask(form.value);
+    dialog.visible = false;
+    emits('submitCallback');
+    proxy?.$modal.msgSuccess('操作成功');
+  } finally {
+    loading.value = false
+    buttonLoading.value = false
+  }
+};
+
+/** 驳回弹窗打开 */
+const handleBackProcessOpen = async () => {
+  backForm.value = {}
+  backForm.value.messageType = ['1']
+  backVisible.value = true
+  backLoading.value = true
+  let data = await getTaskNodeList(task.value.processInstanceId)
+  taskNodeList.value = data.data
+  backLoading.value = false
+  backForm.value.targetActivityId = taskNodeList.value[0].nodeId
+}
+/** 驳回流程 */
+const handleBackProcess = async () => {
+  backForm.value.taskId = taskId.value;
+  await proxy?.$modal.confirm('是否确认驳回到申请人？');
+  loading.value = true;
+  backLoading.value = true;
+  await backProcess(backForm.value).finally(() => (loading.value = false));
+  dialog.visible = false;
+  backLoading.value = false
+  emits('submitCallback');
+  proxy?.$modal.msgSuccess('操作成功');
+};
+//取消
+const cancel = async () => {
+  dialog.visible = false;
+  buttonLoading.value = false;
+  emits('cancelCallback');
+};
+//打开抄送人员
+const openUserSelectCopy = () => {
+  userSelectCopyRef.value.open();
+};
+//确认抄送人员
+const userSelectCopyCallBack = (data: UserVO[]) => {
+  if(data && data.length > 0){
+    selectCopyUserList.value = data
+    selectCopyUserIds.value = selectCopyUserList.value.map((item) => item.userId).join(',');
+  }
+}
+//删除抄送人员
+const handleCopyCloseTag = (user: UserVO) => {
+  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 addMultiInstanceUser = () => {
+  if (multiInstanceUserRef.value) {
+    title.value = '加签人员';
+    multiInstanceUserRef.value.getAddMultiInstanceList(taskId.value, []);
+  }
+};
+//减签
+const deleteMultiInstanceUser = () => {
+  if (multiInstanceUserRef.value) {
+    title.value = '减签人员';
+    multiInstanceUserRef.value.getDeleteMultiInstanceList(taskId.value);
+  }
+};
+//打开转办
+const openTransferTask = () => {
+  transferTaskRef.value.open();
+};
+//转办
+const handleTransferTask  = async (data) => {
+  if(data && data.length > 0){
+    let params = {
+      taskId: taskId.value,
+      userId: data[0].userId,
+      comment: form.value.message
+    }
+    await proxy?.$modal.confirm('是否确认提交？');
+    loading.value = true;
+    buttonLoading.value = true;
+    await transferTask(params).finally(() => (loading.value = false));
+    dialog.visible = false;
+    emits('submitCallback');
+    proxy?.$modal.msgSuccess('操作成功');
+  }else{
+    proxy?.$modal.msgWarning('请选择用户！');
+  }
+}
+
+//打开委托
+const openDelegateTask = () => {
+  delegateTaskRef.value.open();
+};
+//委托
+const handleDelegateTask  = async (data) => {
+  if(data && data.length > 0){
+    let params = {
+      taskId: taskId.value,
+      userId: data[0].userId,
+      nickName: data[0].nickName
+    }
+    await proxy?.$modal.confirm('是否确认提交？');
+    loading.value = true;
+    buttonLoading.value = true;
+    await delegateTask(params).finally(() => (loading.value = false));
+    dialog.visible = false;
+    emits('submitCallback');
+    proxy?.$modal.msgSuccess('操作成功');
+  }else{
+    proxy?.$modal.msgWarning('请选择用户！');
+  }
+}
+//终止任务
+const handleTerminationTask  = async (data) => {
+    let params = {
+      taskId: taskId.value,
+      comment: form.value.message
+    }
+    await proxy?.$modal.confirm('是否确认终止？');
+    loading.value = true;
+    buttonLoading.value = true;
+    await terminationTask(params).finally(() => (loading.value = false));
+    dialog.visible = false;
+    emits('submitCallback');
+    proxy?.$modal.msgSuccess('操作成功');
+  
+}
+
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  openDialog
+});
+</script>
diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
index 6be382f7a2b21cb40f904d1f9822c53b4112df86..e8c9d6505fcd7311fe8990cdde7721859681c5e7 100644
--- a/src/components/RightToolbar/index.vue
+++ b/src/components/RightToolbar/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="top-right-btn" :style="style">
     <el-row>
-      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
+      <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 class="item" effect="dark" content="显示/隐藏列" placement="top" v-if="columns">
+      <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>
@@ -15,9 +15,9 @@
               ref="columnRef"
               :data="columns"
               show-checkbox
-              @check="columnChange"
               node-key="key"
               :props="{ label: 'label', children: 'children' }"
+              @check="columnChange"
             ></el-tree>
             <template #reference>
               <el-button circle icon="Menu" />
@@ -33,51 +33,49 @@
 import { propTypes } from '@/utils/propTypes';
 
 const props = defineProps({
-    showSearch: propTypes.bool.def(true),
-    columns: {
-        type: Array as PropType<FieldOption[]>,
-    },
-    search: propTypes.bool.def(true),
-    gutter: propTypes.number.def(10),
-})
+  showSearch: propTypes.bool.def(true),
+  columns: propTypes.fieldOption,
+  search: propTypes.bool.def(true),
+  gutter: propTypes.number.def(10)
+});
 
 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;
+  const ret: any = {};
+  if (props.gutter) {
+    ret.marginRight = `${props.gutter / 2}px`;
+  }
+  return ret;
 });
 
 // 搜索
 function toggleSearch() {
-    emits("update:showSearch", !props.showSearch);
+  emits('update:showSearch', !props.showSearch);
 }
 
 // 刷新
 function refresh() {
-    emits("queryTable");
+  emits('queryTable');
 }
 
 // 更改数据列的显示和隐藏
 function columnChange(...args: any[]) {
   props.columns?.forEach((item) => {
     item.visible = args[1].checkedKeys.includes(item.key);
-  })
+  });
 }
 
 // 显隐列初始默认隐藏列
 onMounted(() => {
-    props.columns?.forEach((item) => {
-        if (item.visible) {
-          columnRef.value?.setChecked(item.key, true, false);
-            // value.value.push(item.key);
-        }
-    })
-})
+  props.columns?.forEach((item) => {
+    if (item.visible) {
+      columnRef.value?.setChecked(item.key, true, false);
+      // value.value.push(item.key);
+    }
+  });
+});
 </script>
 
 <style lang="scss" scoped>
@@ -93,7 +91,7 @@ onMounted(() => {
 .my-el-transfer {
   text-align: center;
 }
-.tree-header{
+.tree-header {
   width: 100%;
   line-height: 24px;
   text-align: center;
diff --git a/src/components/RoleSelect/index.vue b/src/components/RoleSelect/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6ba207627bb699b55032ffdb050976a43809a5d1
--- /dev/null
+++ b/src/components/RoleSelect/index.vue
@@ -0,0 +1,250 @@
+<template>
+  <div>
+    <el-dialog v-model="roleDialog.visible.value" :title="roleDialog.title.value" width="80%" append-to-body>
+      <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+        <div v-show="showSearch" class="mb-[10px]">
+          <el-card shadow="hover">
+            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+              <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">
+        <template #header>
+          <el-tag v-for="role in selectRoleList" :key="role.roleId" closable style="margin: 2px" @close="handleCloseTag(role)">
+            {{ role.roleName }}
+          </el-tag>
+        </template>
+
+        <vxe-table
+          ref="tableRef"
+          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>
+      <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 { RoleVO, RoleQuery } from '@/api/system/role/types';
+import { VxeTableInstance } from 'vxe-table';
+import useDialog from '@/hooks/useDialog';
+import api from '@/api/system/role';
+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 router = useRouter();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
+
+const roleList = ref<RoleVO[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const selectRoleList = ref<RoleVO[]>([]);
+
+const roleDialog = useDialog({
+  title: '角色选择'
+});
+
+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);
+  roleDialog.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(proxy?.addDateRange(queryParams.value, dateRange.value)).then((res) => {
+    roleList.value = res.rows;
+    total.value = res.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 = () => {
+  dateRange.value = ['', ''];
+  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 = () => {
+  roleDialog.closeDialog();
+};
+watch(
+  () => roleDialog.visible.value,
+  (newValue: boolean) => {
+    if (newValue) {
+      initSelectRole();
+    } else {
+      tableRef.value.clearCheckboxReserve();
+      tableRef.value.clearCheckboxRow();
+      resetQuery();
+      selectRoleList.value = [];
+    }
+  }
+);
+onMounted(() => {
+  getList(); // 初始化列表数据
+});
+
+defineExpose({
+  open: roleDialog.openDialog,
+  close: roleDialog.closeDialog
+});
+</script>
diff --git a/src/components/RuoYiDoc/index.vue b/src/components/RuoYiDoc/index.vue
index 6c7ac0d2d403a8ba65243bab485cf99a1ce03856..1e27d89ab2a71b9cd460bf347072d80b1bf74699 100644
--- a/src/components/RuoYiDoc/index.vue
+++ b/src/components/RuoYiDoc/index.vue
@@ -8,6 +8,6 @@
 const url = ref('https://plus-doc.dromara.org/');
 
 function goto() {
-  window.open(url.value)
+  window.open(url.value);
 }
 </script>
diff --git a/src/components/RuoYiGit/index.vue b/src/components/RuoYiGit/index.vue
index 82393eb5db6999a0c7526f8fabddb345066ccf36..ad278088cae2a959c0303fb204d6eda9fda47c72 100644
--- a/src/components/RuoYiGit/index.vue
+++ b/src/components/RuoYiGit/index.vue
@@ -8,6 +8,6 @@
 const url = ref('https://gitee.com/dromara/RuoYi-Vue-Plus');
 
 function goto() {
-  window.open(url.value)
+  window.open(url.value);
 }
 </script>
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index 058ff7104149cd8ec21a026b95f9348b83cd501f..abf72cc6f74ca0bf1c8c36c3de0a3dfe374ad935 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -16,20 +16,20 @@
 </template>
 
 <script setup lang="ts">
-import useAppStore from "@/store/modules/app";
+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" },
+  { label: '较大', value: 'large' },
+  { label: '默认', value: 'default' },
+  { label: '稍小', value: 'small' }
 ]);
 
-const handleSetSize = (size: string) => {
-    appStore.setSize(size);
-}
+const handleSetSize = (size: 'large' | 'default' | 'small') => {
+  appStore.setSize(size);
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 3a7540ffcb75a0022edbb420b60432be2d96bcd0..05dfe877395e30882b379b83412cc39ededdda7a 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -8,17 +8,17 @@
 import { propTypes } from '@/utils/propTypes';
 
 const props = defineProps({
-    iconClass: propTypes.string.isRequired,
-    className: propTypes.string.def(''),
-    color: propTypes.string.def(''),
-})
-const iconName =  computed(() => `#icon-${props.iconClass}`);
+  iconClass: propTypes.string.isRequired,
+  className: propTypes.string.def(''),
+  color: propTypes.string.def('')
+});
+const iconName = computed(() => `#icon-${props.iconClass}`);
 const svgClass = computed(() => {
-    if (props.className) {
-        return `svg-icon ${props.className}`
-    }
-    return 'svg-icon'
-})
+  if (props.className) {
+    return `svg-icon ${props.className}`;
+  }
+  return 'svg-icon';
+});
 </script>
 
 <style scope lang="scss">
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index 227fccc78722b8aeb6c95abf49c883187592510c..e93e0059c2088b326ab829a7525db991397cdcf5 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -1,19 +1,18 @@
 <template>
-  <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
+  <el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false" @select="handleSelect">
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
-        ><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
+      <el-menu-item v-if="index < visibleNumber" :key="index" :style="{ '--theme': theme }" :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 :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+    <el-sub-menu v-if="topMenus.length > visibleNumber" :style="{ '--theme': theme }" index="more">
       <template #title>更多菜单</template>
       <template v-for="(item, index) in topMenus">
-        <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber"
-          ><svg-icon :icon-class="item.meta ? item.meta.icon : '' " /> {{ item.meta?.title }}</el-menu-item
+        <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>
@@ -26,7 +25,7 @@ import { isHttp } from '@/utils/validate';
 import useAppStore from '@/store/modules/app';
 import useSettingsStore from '@/store/modules/settings';
 import usePermissionStore from '@/store/modules/permission';
-import { RouteOption } from 'vue-router';
+import { RouteRecordRaw } from 'vue-router';
 
 // 顶部栏初始数
 const visibleNumber = ref<number>(-1);
@@ -35,86 +34,89 @@ const currentIndex = ref<string>();
 // 隐藏侧边栏路由
 const hideList = ['/index', '/user/profile'];
 
-const appStore = useAppStore()
-const settingsStore = useSettingsStore()
-const permissionStore = usePermissionStore()
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
 const route = useRoute();
 const router = useRouter();
 
 // 主题颜色
 const theme = computed(() => settingsStore.theme);
 // 所有的路由信息
-const routers = computed(() => permissionStore.topbarRouters);
+const routers = computed(() => permissionStore.getTopbarRoutes());
 
 // 顶部显示菜单
 const topMenus = computed(() => {
-  let topMenus:RouteOption[] = [];
+  let topMenus: RouteRecordRaw[] = [];
   routers.value.map((menu) => {
     if (menu.hidden !== true) {
       // 兼容顶部栏一级菜单内部跳转
-      if (menu.path === "/") {
-          topMenus.push(menu.children? menu.children[0] : menu);
+      if (menu.path === '/') {
+        topMenus.push(menu.children ? menu.children[0] : menu);
       } else {
-          topMenus.push(menu);
+        topMenus.push(menu);
       }
     }
-  })
+  });
   return topMenus;
-})
+});
 
 // 设置子路由
 const childrenMenus = computed(() => {
-  let childrenMenus:RouteOption[] = [];
+  let childrenMenus: RouteRecordRaw[] = [];
   routers.value.map((router) => {
     router.children?.forEach((item) => {
       if (item.parentPath === undefined) {
-        if(router.path === "/") {
-          item.path = "/" + item.path;
+        if (router.path === '/') {
+          item.path = '/' + item.path;
         } else {
-          if(!isHttp(item.path)) {
-            item.path = router.path + "/" + item.path;
+          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 path = route.path;
+  let path = route.path;
+  if (path === '/index') {
+    path = '/system/user';
+  }
   let activePath = path;
-  if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
+  if (path !== undefined && path.lastIndexOf('/') > 0 && hideList.indexOf(path) === -1) {
     const tmpPath = path.substring(1, path.length);
-    activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
+    activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'));
     if (!route.meta.link) {
-        appStore.toggleSideBarHide(false);
+      appStore.toggleSideBarHide(false);
     }
-  } else if(!route.children) {
+  } else if (!route.children) {
     activePath = path;
     appStore.toggleSideBarHide(true);
   }
   activeRoutes(activePath);
   return activePath;
-})
+});
 
 const setVisibleNumber = () => {
   const width = document.body.getBoundingClientRect().width / 3;
   visibleNumber.value = parseInt(String(width / 85));
-}
+};
 
 const handleSelect = (key: string) => {
   currentIndex.value = key;
-  const route = routers.value.find(item => item.path === key);
+  const route = routers.value.find((item) => item.path === key);
   if (isHttp(key)) {
     // http(s):// 路径新窗口打开
-    window.open(key, "_blank");
+    window.open(key, '_blank');
   } else if (!route || !route.children) {
     // 没有子路由路径内部打开
-    const routeMenu = childrenMenus.value.find(item => item.path === key);
+    const routeMenu = childrenMenus.value.find((item) => item.path === key);
     if (routeMenu && routeMenu.query) {
       let query = JSON.parse(routeMenu.query);
       router.push({ path: key, query: query });
@@ -127,35 +129,35 @@ const handleSelect = (key: string) => {
     activeRoutes(key);
     appStore.toggleSideBarHide(false);
   }
-}
+};
 
 const activeRoutes = (key: string) => {
-  let routes:RouteOption[] = [];
+  let routes: RouteRecordRaw[] = [];
   if (childrenMenus.value && childrenMenus.value.length > 0) {
     childrenMenus.value.map((item) => {
-      if (key == item.parentPath || (key == "index" && "" == item.path)) {
+      if (key == item.parentPath || (key == 'index' && '' == item.path)) {
         routes.push(item);
       }
     });
   }
-  if(routes.length > 0) {
+  if (routes.length > 0) {
     permissionStore.setSidebarRouters(routes);
   } else {
     appStore.toggleSideBarHide(true);
   }
   return routes;
-}
+};
 
 onMounted(() => {
-  window.addEventListener('resize', setVisibleNumber)
-})
+  window.addEventListener('resize', setVisibleNumber);
+});
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', setVisibleNumber)
-})
+  window.removeEventListener('resize', setVisibleNumber);
+});
 
 onMounted(() => {
-  setVisibleNumber()
-})
+  setVisibleNumber();
+});
 </script>
 
 <style lang="scss">
@@ -168,7 +170,8 @@ onMounted(() => {
   margin: 0 10px !important;
 }
 
-.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
+.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
+.el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
   border-bottom: 2px solid #{'var(--theme)'} !important;
   color: #303133;
 }
@@ -184,7 +187,9 @@ onMounted(() => {
 }
 
 /* 背景色隐藏 */
-.topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
+.topmenu-container.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
+.topmenu-container.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
+.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
   background-color: #ffffff !important;
 }
 
diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue
index 3076804ee2c9eb20b1e1b40d4545544714d5185c..7accd6bdbfb66849c0d5c1d49ef677bf43e5d181 100644
--- a/src/components/TreeSelect/index.vue
+++ b/src/components/TreeSelect/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="el-tree-select">
     <el-select
-      style="width: 100%"
-      v-model="valueId"
       ref="treeSelect"
+      v-model="valueId"
+      style="width: 100%"
       :filterable="true"
       :clearable="true"
-      @clear="clearHandle"
       :filter-method="selectFilterData"
       :placeholder="placeholder"
+      @clear="clearHandle"
     >
       <el-option :value="valueId" :label="valueTitle">
         <el-tree
@@ -29,43 +29,32 @@
 </template>
 
 <script setup lang="ts">
+interface ObjMap {
+  value: string;
+  label: string;
+  children: string;
+}
+interface Props {
+  objMap: ObjMap;
+  accordion: boolean;
+  value: string | number;
+  options: any[];
+  placeholder: string;
+}
 
-const props = defineProps({
-  /* 配置项 */
-  objMap: {
-    type: Object,
-    default: () => {
-      return {
-        value: 'id', // ID字段名
-        label: 'label', // 显示名称
-        children: 'children' // 子级字段名
-      }
-    }
-  },
-  /* 自动收起 */
-  accordion: {
-    type: Boolean,
-    default: () => {
-      return false
-    }
-  },
-  /**当前双向数据绑定的值 */
-  value: {
-    type: [String, Number],
-    default: ''
+const props = withDefaults(defineProps<Props>(), {
+  objMap: () => {
+    return {
+      value: 'id',
+      label: 'label',
+      children: 'children'
+    };
   },
-  /**当前的数据 */
-  options: {
-    type: Array,
-    default: () => []
-  },
-  /**输入框内部的文字 */
-  placeholder: {
-    type: String,
-    default: ''
-  }
-})
-
+  accordion: false,
+  value: '',
+  options: () => [],
+  placeholder: ''
+});
 
 const selectTree = ref<ElTreeSelectInstance>();
 
@@ -74,7 +63,7 @@ const emit = defineEmits(['update:value']);
 const valueId = computed({
   get: () => props.value,
   set: (val) => {
-    emit('update:value', val)
+    emit('update:value', val);
   }
 });
 const valueTitle = ref('');
@@ -83,54 +72,54 @@ const defaultExpandedKey = ref<any[]>([]);
 const initHandle = () => {
   nextTick(() => {
     const selectedValue = valueId.value;
-    if (selectedValue !== null && typeof (selectedValue) !== 'undefined') {
-      const node = selectTree.value?.getNode(selectedValue)
+    if (selectedValue !== null && typeof selectedValue !== 'undefined') {
+      const node = selectTree.value?.getNode(selectedValue);
       if (node) {
-        valueTitle.value = node.data[props.objMap.label]
-        selectTree.value?.setCurrentKey(selectedValue) // 设置默认选中
-        defaultExpandedKey.value = [selectedValue] // 设置默认展开
+        valueTitle.value = node.data[props.objMap.label];
+        selectTree.value?.setCurrentKey(selectedValue); // 设置默认选中
+        defaultExpandedKey.value = [selectedValue]; // 设置默认展开
       }
     } else {
-      clearHandle()
+      clearHandle();
     }
-  })
-}
+  });
+};
 const handleNodeClick = (node: any) => {
-  valueTitle.value = node[props.objMap.label]
+  valueTitle.value = node[props.objMap.label];
   valueId.value = node[props.objMap.value];
   defaultExpandedKey.value = [];
-  selectTree.value?.blur()
-  selectFilterData('')
-}
+  selectTree.value?.blur();
+  selectFilterData('');
+};
 const selectFilterData = (val: any) => {
-  selectTree.value?.filter(val)
-}
+  selectTree.value?.filter(val);
+};
 const filterNode = (value: any, data: any) => {
-  if (!value) return true
-  return data[props.objMap['label']].indexOf(value) !== -1
-}
+  if (!value) return true;
+  return data[props.objMap['label']].indexOf(value) !== -1;
+};
 const clearHandle = () => {
-  valueTitle.value = ''
-  valueId.value = ''
+  valueTitle.value = '';
+  valueId.value = '';
   defaultExpandedKey.value = [];
-  clearSelected()
-}
+  clearSelected();
+};
 const clearSelected = () => {
-  const allNode = document.querySelectorAll('#tree-option .el-tree-node')
-  allNode.forEach((element) => element.classList.remove('is-current'))
-}
+  const allNode = document.querySelectorAll('#tree-option .el-tree-node');
+  allNode.forEach((element) => element.classList.remove('is-current'));
+};
 
 onMounted(() => {
-  initHandle()
-})
+  initHandle();
+});
 
 watch(valueId, () => {
   initHandle();
-})
+});
 </script>
 
 <style lang="scss" scoped>
-@import "@/assets/styles/variables.module.scss";
+@import '@/assets/styles/variables.module.scss';
 
 .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
   padding: 0;
diff --git a/src/components/UserSelect/index.vue b/src/components/UserSelect/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f6e552e41d3ed389d8dcdfa4582d50ba402e9cf7
--- /dev/null
+++ b/src/components/UserSelect/index.vue
@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <el-dialog v-model="userDialog.visible.value" :title="userDialog.title.value" width="80%" append-to-body>
+      <el-row :gutter="20">
+        <!-- 部门树 -->
+        <el-col :lg="4" :xs="24" style="">
+          <el-card shadow="hover">
+            <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
+            <el-tree
+              ref="deptTreeRef"
+              class="mt-2"
+              node-key="id"
+              :data="deptOptions"
+              :props="{ label: 'label', children: 'children' }"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              highlight-current
+              default-expand-all
+              @node-click="handleNodeClick"
+            />
+          </el-card>
+        </el-col>
+        <el-col :lg="20" :xs="24">
+          <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+            <div v-show="showSearch" class="mb-[10px]">
+              <el-card shadow="hover">
+                <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+                  <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">
+            <template v-if="prop.multiple" #header>
+              <el-tag v-for="user in selectUserList" :key="user.userId" closable style="margin: 2px" @close="handleCloseTag(user)">
+                {{ user.userName }}
+              </el-tag>
+            </template>
+
+            <vxe-table
+              ref="tableRef"
+              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>
+        </el-col>
+      </el-row>
+
+      <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 api from '@/api/system/user';
+import { UserQuery, UserVO } from '@/api/system/user/types';
+import { DeptVO } from '@/api/system/dept/types';
+import { VxeTableInstance } from 'vxe-table';
+import useDialog from '@/hooks/useDialog';
+
+interface PropType {
+  modelValue?: UserVO[] | UserVO | 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 { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
+
+const userList = ref<UserVO[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const deptName = ref('');
+const deptOptions = ref<DeptVO[]>([]);
+const selectUserList = ref<UserVO[]>([]);
+
+const deptTreeRef = ref<ElTreeInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const tableRef = ref<VxeTableInstance<UserVO>>();
+
+const userDialog = useDialog({
+  title: '用户选择'
+});
+
+const queryParams = ref<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  userName: '',
+  phonenumber: '',
+  status: '',
+  deptId: '',
+  roleId: ''
+});
+
+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);
+  userDialog.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('<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;
+  const res = await api.listUser(proxy?.addDateRange(queryParams.value, dateRange.value));
+  loading.value = false;
+  userList.value = res.rows;
+  total.value = res.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 = () => {
+  dateRange.value = ['', ''];
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.deptId = undefined;
+  deptTreeRef.value?.setCurrentKey(undefined);
+  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 = () => {
+  userDialog.closeDialog();
+};
+
+watch(
+  () => userDialog.visible.value,
+  (newValue: boolean) => {
+    if (newValue) {
+      initSelectUser();
+    } else {
+      tableRef.value.clearCheckboxReserve();
+      tableRef.value.clearCheckboxRow();
+      resetQuery();
+      selectUserList.value = [];
+    }
+  }
+);
+
+onMounted(() => {
+  getTreeSelect(); // 初始化部门数据
+  getList(); // 初始化列表数据
+});
+
+defineExpose({
+  open: userDialog.openDialog,
+  close: userDialog.closeDialog
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/iFrame/index.vue b/src/components/iFrame/index.vue
index 6679f085a58bc1ca1092b25e1bc3a838e4906d79..98f222420921592233139169100fb2a7d2e77590 100644
--- a/src/components/iFrame/index.vue
+++ b/src/components/iFrame/index.vue
@@ -9,18 +9,18 @@ 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)
+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;";
+    height.value = document.documentElement.clientHeight - 94.5 + 'px;';
   };
-})
+});
 </script>
diff --git a/src/directive/common/copyText.ts b/src/directive/common/copyText.ts
index b6805f84173ea03551e9d40429351067244cf48d..0e605d31f0df0e092f6835e9f0cb269ac80e6692 100644
--- a/src/directive/common/copyText.ts
+++ b/src/directive/common/copyText.ts
@@ -2,9 +2,10 @@
  * v-copyText 复制文本内容
  * Copyright (c) 2022 ruoyi
  */
+import { DirectiveBinding } from 'vue';
 
 export default {
-  beforeMount(el: any, { value, arg }: any) {
+  beforeMount(el: any, { value, arg }: DirectiveBinding) {
     if (arg === 'callback') {
       el.$copyCallback = value;
     } else {
diff --git a/src/directive/permission/index.ts b/src/directive/permission/index.ts
index 7e9ddebda74d8e567342045803b9b5a0422bbcd9..afde3329d3fdf4838cae58b8574973feb266e391 100644
--- a/src/directive/permission/index.ts
+++ b/src/directive/permission/index.ts
@@ -9,7 +9,7 @@ export const hasPermi: Directive = {
     // 「其他角色」按钮权限校验
     const { value } = binding;
     if (value && value instanceof Array && value.length > 0) {
-      const hasPermission = permissions.some((permi) => {
+      const hasPermission = permissions.some((permi: string) => {
         return permi === '*:*:*' || value.includes(permi);
       });
       if (!hasPermission) {
@@ -30,7 +30,7 @@ export const hasRoles: Directive = {
     const { value } = binding;
     const { roles } = useUserStore();
     if (value && value instanceof Array && value.length > 0) {
-      const hasRole = roles.some((role) => {
+      const hasRole = roles.some((role: string) => {
         return role === 'admin' || value.includes(role);
       });
       if (!hasRole) {
diff --git a/src/enums/LanguageEnum.ts b/src/enums/LanguageEnum.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c857c435e56f1bb38a80e3b669c0066c64e0766f
--- /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/bpmn/IndexEnums.ts b/src/enums/bpmn/IndexEnums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8c398233c683a377584a3a2485713b28f1149d7b
--- /dev/null
+++ b/src/enums/bpmn/IndexEnums.ts
@@ -0,0 +1,17 @@
+export enum AllocationTypeEnum {
+  USER = 'user',
+  CANDIDATE = 'candidate',
+  YOURSELF = 'yourself',
+  SPECIFY = 'specify'
+}
+
+export enum SpecifyDescEnum {
+  SPECIFY_MULTIPLE = 'specifyMultiple',
+  SPECIFY_SINGLE = 'specifySingle'
+}
+
+export enum MultiInstanceTypeEnum {
+  SERIAL = 'serial',
+  PARALLEL = 'parallel',
+  NONE = 'none'
+}
diff --git a/src/hooks/useDialog.ts b/src/hooks/useDialog.ts
new file mode 100644
index 0000000000000000000000000000000000000000..68440bf2eca51b6d82e67ee4428f7981ea86eb10
--- /dev/null
+++ b/src/hooks/useDialog.ts
@@ -0,0 +1,31 @@
+import { Ref } from 'vue';
+
+interface Options {
+  title?: string;
+}
+interface Return {
+  title: Ref<string>;
+  visible: Ref<boolean>;
+  openDialog: () => void;
+  closeDialog: () => void;
+}
+export default (ops?: Options): Return => {
+  const visible = ref(false);
+  const title = ref(ops.title || '');
+
+  const openDialog = () => {
+    visible.value = true;
+  };
+
+  const closeDialog = () => {
+    visible.value = false;
+  };
+
+  return {
+    title,
+    visible,
+
+    openDialog,
+    closeDialog
+  };
+};
\ No newline at end of file
diff --git a/src/lang/en_US.json b/src/lang/en_US.json
new file mode 100644
index 0000000000000000000000000000000000000000..17b472eee3b777b6fc3e4fa5c0f6a016d3397087
--- /dev/null
+++ b/src/lang/en_US.json
@@ -0,0 +1,25 @@
+{
+  "route": {
+    "dashboard": "Dashboard",
+    "document": "Document"
+  },
+  "login": {
+    "username": "Username",
+    "password": "Password",
+    "login": "Login",
+    "code": "Verification Code",
+    "copyright": ""
+  },
+  "navbar": {
+    "full": "Full Screen",
+    "language": "Language",
+    "dashboard": "Dashboard",
+    "document": "Document",
+    "message": "Message",
+    "layoutSize": "Layout Size",
+    "selectTenant": "Select Tenant",
+    "layoutSetting": "Layout Setting",
+    "personalCenter": "Personal Center",
+    "logout": "Logout"
+  }
+}
diff --git a/src/lang/index.ts b/src/lang/index.ts
index dddb86bafaa173123a6d581b6bbcfaad800309ba..e4e1d255061e09b71851d9428b20b3f223207ae8 100644
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -1,32 +1,24 @@
 // 自定义国际化配置
 import { createI18n } from 'vue-i18n';
 
-// 本地语言包
-import enUSLocale from './en_US';
-import zhCNLocale from './zh_CN';
-
-const messages = {
-  zh_CN: {
-    ...zhCNLocale
-  },
-  en_US: {
-    ...enUSLocale
-  }
-};
+import { LanguageEnum } from '@/enums/LanguageEnum';
+import messages from '@intlify/unplugin-vue-i18n/messages';
 
 /**
  * 获取当前语言
  * @returns zh-cn|en ...
  */
-export const getLanguage = () => {
-  const language = useStorage('language', 'zh_CN');
+export const getLanguage = (): LanguageEnum => {
+  const language = useStorage<LanguageEnum>('language', LanguageEnum.zh_CN);
   if (language.value) {
     return language.value;
   }
-  return 'zh_CN';
+  return LanguageEnum.zh_CN;
 };
 
 const i18n = createI18n({
+  globalInjection: true,
+  allowComposition: true,
   legacy: false,
   locale: getLanguage(),
   messages
diff --git a/src/lang/zh_CN.json b/src/lang/zh_CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..071598d122f70a3e5ea91c664b79a01909165aaa
--- /dev/null
+++ b/src/lang/zh_CN.json
@@ -0,0 +1,25 @@
+{
+  "route": {
+    "dashboard": "首页",
+    "document": "项目文档"
+  },
+  "login": {
+    "username": "用户名",
+    "password": "密码",
+    "login": "登 录",
+    "code": "请输入验证码",
+    "copyright": ""
+  },
+  "navbar": {
+    "full": "全屏",
+    "language": "语言",
+    "dashboard": "首页",
+    "document": "项目文档",
+    "message": "消息",
+    "layoutSize": "布局大小",
+    "selectTenant": "选择租户",
+    "layoutSetting": "布局设置",
+    "personalCenter": "个人中心",
+    "logout": "退出登录"
+  }
+}
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 8a732320dd398c7fcd67cc38318851bd96111d25..d634935a145b57db5515b958109b0cb5f01509cf 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -2,9 +2,12 @@
   <section class="app-main">
     <router-view v-slot="{ Component, route }">
       <transition :enter-active-class="animante" mode="out-in">
-        <keep-alive :include="tagsViewStore.cachedViews">
-          <component v-if="!route.meta.link" :is="Component" :key="route.path" />
-        </keep-alive>
+        <div>
+          <keep-alive :include="tagsViewStore.cachedViews" v-if="!route.meta.noCache">
+            <component v-if="!route.meta.link" :is="Component" :key="route.path" />
+          </keep-alive>
+          <component v-if="!route.meta.link && route.meta.noCache" :is="Component" :key="route.path" />
+        </div>
       </transition>
     </router-view>
     <iframe-toggle />
@@ -12,24 +15,28 @@
 </template>
 
 <script setup name="AppMain" lang="ts">
-import useTagsViewStore from '@/store/modules/tagsView';
 import useSettingsStore from '@/store/modules/settings';
-import IframeToggle  from './IframeToggle/index.vue'
-import { ComponentInternalInstance } from "vue";
+import useTagsViewStore from '@/store/modules/tagsView';
+
+import IframeToggle from './IframeToggle/index.vue';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const tagsViewStore = useTagsViewStore();
 
 // 随机动画集合
 const animante = ref<string>('');
 const animationEnable = ref(useSettingsStore().animationEnable);
-watch(()=> useSettingsStore().animationEnable, (val) => {
+watch(
+  () => useSettingsStore().animationEnable,
+  (val: boolean) => {
     animationEnable.value = val;
     if (val) {
-        animante.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string;
+      animante.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string;
     } else {
-        animante.value = proxy?.animate.defaultAnimate as string;
+      animante.value = proxy?.animate.defaultAnimate as string;
     }
-}, { immediate: true });
+  },
+  { immediate: true }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -41,7 +48,7 @@ watch(()=> useSettingsStore().animationEnable, (val) => {
   overflow: hidden;
 }
 
-.fixed-header+.app-main {
+.fixed-header + .app-main {
   padding-top: 50px;
 }
 
@@ -51,7 +58,7 @@ watch(()=> useSettingsStore().animationEnable, (val) => {
     min-height: calc(100vh - 84px);
   }
 
-  .fixed-header+.app-main {
+  .fixed-header + .app-main {
     padding-top: 84px;
   }
 }
diff --git a/src/layout/components/IframeToggle/index.vue b/src/layout/components/IframeToggle/index.vue
index efb2b7a6dcd87fb4bb472e1db01e2b15e575c2d1..2de529de2d76c14885e5155f67b2e3690c7e41cd 100644
--- a/src/layout/components/IframeToggle/index.vue
+++ b/src/layout/components/IframeToggle/index.vue
@@ -1,26 +1,27 @@
 <template>
-  <transition-group name="fade-transform" mode="out-in">
-    <inner-link
-      v-for="(item, index) in tagsViewStore.iframeViews"
-      :key="item.path"
-      :iframeId="'iframe' + index"
-      v-show="route.path === item.path"
-      :src="iframeUrl(item.meta ? item.meta.link : '', item.query)"
-    ></inner-link>
-  </transition-group>
+  <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 InnerLink from "../InnerLink/index.vue";
+import InnerLink from '../InnerLink/index.vue';
+
 import useTagsViewStore from '@/store/modules/tagsView';
 
 const route = useRoute();
 const tagsViewStore = useTagsViewStore();
 
-function iframeUrl(url: string, query: any) {
+function iframeUrl(url: string | undefined, query: any) {
   if (Object.keys(query).length > 0) {
-    let params = Object.keys(query).map((key) => key + "=" + query[key]).join("&");
-    return url + "?" + params;
+    let params = Object.keys(query)
+      .map((key) => key + '=' + query[key])
+      .join('&');
+    return url + '?' + params;
   }
   return url;
 }
diff --git a/src/layout/components/InnerLink/index.vue b/src/layout/components/InnerLink/index.vue
index fa2869c2532cdacefb7808da1fa40cc5061178e7..bb6b89b0416a1443146e5bdc2d83f21329bb5be1 100644
--- a/src/layout/components/InnerLink/index.vue
+++ b/src/layout/components/InnerLink/index.vue
@@ -1,18 +1,15 @@
 <template>
   <div :style="'height:' + height">
-    <iframe :id="iframeId" style="width: 100%; height: 100%" :src="src" frameborder="no"></iframe>
+    <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: {
-        type: String,
-        default: "/"
-    },
-    iframeId: {
-        type: String
-    }
+  src: propTypes.string.def('/'),
+  iframeId: propTypes.string.isRequired
 });
-const height = ref(document.documentElement.clientHeight - 94.5 + "px");
+const height = ref(document.documentElement.clientHeight - 94.5 + 'px');
 </script>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 7818fd46d3cddbe3af33fd642623d01d41e27e7b..fd4eb8c4073c63d213705db8014eaacb66ba3727 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,18 +1,19 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
+    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" />
+    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
+    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
 
     <div class="right-menu flex align-center">
       <template v-if="appStore.device !== 'mobile'">
         <el-select
+          v-if="userId === 1 && tenantEnabled"
           v-model="companyName"
+          class="min-w-244px"
           clearable
           filterable
           reserve-keyword
           :placeholder="$t('navbar.selectTenant')"
-          v-if="userId === 1 && tenantEnabled"
           @change="dynamicTenantEvent"
           @clear="dynamicClearEvent"
         >
@@ -63,17 +64,17 @@
         </el-tooltip>
       </template>
       <div class="avatar-container">
-        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
+        <el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
           <div class="avatar-wrapper">
             <img :src="userStore.avatar" class="user-avatar" />
             <el-icon><caret-bottom /></el-icon>
           </div>
           <template #dropdown>
             <el-dropdown-menu>
-              <router-link to="/user/profile" v-if="!dynamic">
+              <router-link v-if="!dynamic" to="/user/profile">
                 <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
               </router-link>
-              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
+              <el-dropdown-item v-if="settingsStore.showSettings" command="setLayout">
                 <span>{{ $t('navbar.layoutSetting') }}</span>
               </el-dropdown-item>
               <el-dropdown-item divided command="logout">
@@ -92,12 +93,11 @@ import SearchMenu from './TopBar/search.vue';
 import useAppStore from '@/store/modules/app';
 import useUserStore from '@/store/modules/user';
 import useSettingsStore from '@/store/modules/settings';
-import { getTenantList } from "@/api/login";
-import { dynamicClear, dynamicTenant } from "@/api/system/tenant";
-import { ComponentInternalInstance } from "vue";
-import { TenantVO } from "@/api/types";
-import notice from './notice/index.vue';
 import useNoticeStore from '@/store/modules/notice';
+import { getTenantList } from '@/api/login';
+import { dynamicClear, dynamicTenant } from '@/api/system/tenant';
+import { TenantVO } from '@/api/types';
+import notice from './notice/index.vue';
 
 const appStore = useAppStore();
 const userStore = useUserStore();
@@ -119,7 +119,7 @@ const searchMenuRef = ref<InstanceType<typeof SearchMenu>>();
 
 const openSearchMenu = () => {
   searchMenuRef.value?.openSearch();
-}
+};
 
 // 动态切换
 const dynamicTenantEvent = async (tenantId: string) => {
@@ -129,14 +129,14 @@ const dynamicTenantEvent = async (tenantId: string) => {
     proxy?.$tab.closeAllPage();
     proxy?.$router.push('/');
   }
-}
+};
 
 const dynamicClearEvent = async () => {
   await dynamicClear();
   dynamic.value = false;
   proxy?.$tab.closeAllPage();
   proxy?.$router.push('/');
-}
+};
 
 /** 租户列表 */
 const initTenantList = async () => {
@@ -145,56 +145,58 @@ const initTenantList = async () => {
   if (tenantEnabled.value) {
     tenantList.value = data.voList;
   }
-}
+};
 
 defineExpose({
-  initTenantList,
-})
+  initTenantList
+});
 
 const toggleSideBar = () => {
   appStore.toggleSideBar(false);
-}
+};
 
 const logout = async () => {
-    await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    })
-    await userStore.logout()
-    location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
-}
+  await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  });
+  await userStore.logout();
+  location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index';
+};
 
-const emits = defineEmits(['setLayout'])
+const emits = defineEmits(['setLayout']);
 const setLayout = () => {
-    emits('setLayout');
-}
+  emits('setLayout');
+};
 // 定义Command方法对象 通过key直接调用方法
-const commandMap: {[key: string]: any} = {
-    setLayout,
-    logout
+const commandMap: { [key: string]: any } = {
+  setLayout,
+  logout
 };
 const handleCommand = (command: string) => {
-    // 判断是否存在该方法
-    if (commandMap[command]) {
-        commandMap[command]();
-    }
-}
-
+  // 判断是否存在该方法
+  if (commandMap[command]) {
+    commandMap[command]();
+  }
+};
 //用深度监听 消息
-watch(() => noticeStore.state.value.notices, (newVal, oldVal) => {
-  newNotice.value = newVal.filter((item: any) => !item.read).length;
-}, { deep: true });
+watch(
+  () => noticeStore.state.value.notices,
+  (newVal) => {
+    newNotice.value = newVal.filter((item: any) => !item.read).length;
+  },
+  { deep: true }
+);
 </script>
 
 <style lang="scss" scoped>
-
 :deep(.el-select .el-input__wrapper) {
-  height:30px;
+  height: 30px;
 }
 
-:deep(.el-badge__content.is-fixed){
-    top: 12px;
+:deep(.el-badge__content.is-fixed) {
+  top: 12px;
 }
 
 .flex {
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index d5522aec12a3a5dcddd45fed32330dd2ff7331b1..3082bebd46e24e7ae00960bf952ff83cea20158e 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px" close-on-click-modal>
+  <el-drawer v-model="showSettings" :with-header="false" direction="rtl" size="300px" close-on-click-modal>
     <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;">
+        <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" class>
               <path
@@ -17,7 +17,7 @@
       </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;">
+        <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" class>
               <path
@@ -37,7 +37,7 @@
     <div class="drawer-item">
       <span>深色模式</span>
       <span class="comp-style">
-        <el-switch v-model="isDark" @change="toggleDark" class="drawer-switch" />
+        <el-switch v-model="isDark" class="drawer-switch" @change="toggleDark" />
       </span>
     </div>
 
@@ -48,35 +48,35 @@
     <div class="drawer-item">
       <span>开启 TopNav</span>
       <span class="comp-style">
-        <el-switch v-model="topNav" class="drawer-switch" />
+        <el-switch v-model="settingsStore.topNav" class="drawer-switch" @change="topNavChange" />
       </span>
     </div>
 
     <div class="drawer-item">
       <span>开启 Tags-Views</span>
       <span class="comp-style">
-        <el-switch v-model="tagsView" class="drawer-switch" />
+        <el-switch v-model="settingsStore.tagsView" class="drawer-switch" />
       </span>
     </div>
 
     <div class="drawer-item">
       <span>固定 Header</span>
       <span class="comp-style">
-        <el-switch v-model="fixedHeader" class="drawer-switch" />
+        <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="sidebarLogo" class="drawer-switch" />
+        <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="dynamicTitle" class="drawer-switch" />
+        <el-switch v-model="settingsStore.dynamicTitle" class="drawer-switch" @change="dynamicTitleChange" />
       </span>
     </div>
 
@@ -88,126 +88,92 @@
 </template>
 
 <script setup lang="ts">
-import { useDynamicTitle } from '@/utils/dynamicTitle'
-import useAppStore from '@/store/modules/app'
-import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
-import { handleThemeStyle } from '@/utils/theme'
-import { ComponentInternalInstance } from "vue";
-import { SettingTypeEnum } from "@/enums/SettingTypeEnum";
-import { SideThemeEnum } from "@/enums/SideThemeEnum";
+import { useDynamicTitle } from '@/utils/dynamicTitle';
+import useAppStore from '@/store/modules/app';
+import useSettingsStore from '@/store/modules/settings';
+import usePermissionStore from '@/store/modules/permission';
+import { handleThemeStyle } from '@/utils/theme';
+import { SideThemeEnum } from '@/enums/SideThemeEnum';
+import defaultSettings from '@/settings';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const appStore = useAppStore()
-const settingsStore = useSettingsStore()
-const permissionStore = usePermissionStore()
-
+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 predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585']);
 
 // 是否暗黑模式
 const isDark = useDark({
   storageKey: 'useDarkKey',
   valueDark: 'dark',
-  valueLight: 'light',
+  valueLight: 'light'
 });
-watch(isDark, ()=> {
+// 匹配菜单颜色
+watch(isDark, () => {
   if (isDark.value) {
-    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: SideThemeEnum.DARK })
+    settingsStore.sideTheme = SideThemeEnum.DARK;
   } else {
-    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: sideTheme.value })
+    settingsStore.sideTheme = sideTheme.value;
   }
-})
+});
 const toggleDark = () => useToggle(isDark);
 
-/** 是否需要topNav */
-const topNav = computed({
-    get: () => storeSettings.value.topNav,
-    set: (val) => {
-        settingsStore.changeSetting({ key: SettingTypeEnum.TOP_NAV, value: val })
-        if (!val) {
-            appStore.toggleSideBarHide(false);
-            permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
-        }
-    }
-})
-/** 是否需要tagview */
-const tagsView = computed({
-    get: () => storeSettings.value.tagsView,
-    set: (val) => {
-        settingsStore.changeSetting({ key: SettingTypeEnum.TAGS_VIEW, value: val })
-    }
-})
-/**是否需要固定头部 */
-const fixedHeader = computed({
-    get: () => storeSettings.value.fixedHeader,
-    set: (val) => {
-        settingsStore.changeSetting({ key: SettingTypeEnum.FIXED_HEADER, value: val })
-    }
-})
-/**是否需要侧边栏的logo */
-const sidebarLogo = computed({
-    get: () => storeSettings.value.sidebarLogo,
-    set: (val) => {
-        settingsStore.changeSetting({ key: SettingTypeEnum.SIDEBAR_LOGO, value: val })
-    }
-})
-/**是否需要侧边栏的动态网页的title */
-const dynamicTitle = computed({
-    get: () => storeSettings.value.dynamicTitle,
-    set: (val) => {
-        settingsStore.changeSetting({ key: SettingTypeEnum.DYNAMIC_TITLE, value: val })
-        // 动态设置网页标题
-        useDynamicTitle()
-    }
-})
+const topNavChange = (val: any) => {
+  if (!val) {
+    appStore.toggleSideBarHide(false);
+    permissionStore.setSidebarRouters(permissionStore.defaultRoutes as any);
+  }
+};
 
-const themeChange = (val: string | null) => {
-    settingsStore.changeSetting({ key: SettingTypeEnum.THEME, value: val })
-    theme.value = val;
-    if (val) {
-        handleThemeStyle(val);
-    }
-}
+const dynamicTitleChange = () => {
+  // 动态设置网页标题
+  useDynamicTitle();
+};
+
+const themeChange = (val: string) => {
+  settingsStore.theme = val;
+  handleThemeStyle(val);
+};
 const handleTheme = (val: string) => {
-    sideTheme.value = val;
-    if (isDark.value && val === SideThemeEnum.LIGHT) {
-      // 暗黑模式颜色不变
-      settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: SideThemeEnum.DARK })
-      return
-    }
-    settingsStore.changeSetting({ key: SettingTypeEnum.SIDE_THEME, value: val })
-}
+  sideTheme.value = val;
+  if (isDark.value && val === SideThemeEnum.LIGHT) {
+    // 暗黑模式颜色不变
+    settingsStore.sideTheme = SideThemeEnum.DARK;
+    return;
+  }
+  settingsStore.sideTheme = val;
+};
 const saveSetting = () => {
-    proxy?.$modal.loading("正在保存到本地，请稍候...");
-    let layoutSetting = {
-        "topNav": storeSettings.value.topNav,
-        "tagsView": storeSettings.value.tagsView,
-        "fixedHeader": storeSettings.value.fixedHeader,
-        "sidebarLogo": storeSettings.value.sidebarLogo,
-        "dynamicTitle": storeSettings.value.dynamicTitle,
-        "sideTheme": storeSettings.value.sideTheme,
-        "theme": storeSettings.value.theme
-    };
-    localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));
-    setTimeout(() => {proxy?.$modal.closeLoading()}, 1000)
-}
+  proxy?.$modal.loading('正在保存到本地，请稍候...');
+  const settings = useStorage<LayoutSetting>('layout-setting', defaultSettings);
+  settings.value.topNav = storeSettings.value.topNav;
+  settings.value.tagsView = storeSettings.value.tagsView;
+  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;
+  setTimeout(() => {
+    proxy?.$modal.closeLoading();
+  }, 1000);
+};
 const resetSetting = () => {
-    proxy?.$modal.loading("正在清除设置缓存并刷新，请稍候...");
-    localStorage.removeItem("layout-setting")
-    setTimeout("window.location.reload()", 1000)
-}
+  proxy?.$modal.loading('正在清除设置缓存并刷新，请稍候...');
+  useStorage<any>('layout-setting', null).value = null;
+  setTimeout('window.location.reload()', 1000);
+};
 const openSetting = () => {
-    showSettings.value = true;
-}
+  showSettings.value = true;
+};
 
 defineExpose({
-    openSetting,
-})
+  openSetting
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
index 4c6e8b3206436e8b2406ca8892a4e87cc2a11d81..fd75f357e9f9f1496d367f3a64b4f9fe72e64b3d 100644
--- a/src/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
@@ -5,36 +5,36 @@
 </template>
 
 <script setup lang="ts">
-import { isExternal } from '@/utils/validate'
+import { isExternal } from '@/utils/validate';
 
 const props = defineProps({
-    to: {
-        type: [String, Object],
-        required: true
-    }
-})
+  to: {
+    type: [String, Object],
+    required: true
+  }
+});
 
 const isExt = computed(() => {
-    return isExternal(props.to as string)
-})
+  return isExternal(props.to as string);
+});
 
 const type = computed(() => {
-    if (isExt.value) {
-        return 'a'
-    }
-    return 'router-link'
-})
+  if (isExt.value) {
+    return 'a';
+  }
+  return 'router-link';
+});
 
 function linkProps() {
-    if (isExt.value) {
-        return {
-            href: props.to,
-            target: '_blank',
-            rel: 'noopener'
-        }
-    }
+  if (isExt.value) {
     return {
-        to: props.to
-    }
+      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
index a06158ac651dafe68b538e15969c6a21c97eac24..631c261034111d4c4c199f222b1c42f4bc464b46 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="sidebar-logo-container"
-    :class="{ 'collapse': collapse }"
+    :class="{ collapse: collapse }"
     :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
   >
     <transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
@@ -22,18 +22,17 @@
 </template>
 
 <script setup lang="ts">
-import variables from '@/assets/styles/variables.module.scss'
-import logo from '@/assets/logo/logo.png'
-import useSettingsStore from '@/store/modules/settings'
-import { ComponentInternalInstance } from "vue";
+import variables from '@/assets/styles/variables.module.scss';
+import logo from '@/assets/logo/logo.png';
+import useSettingsStore from '@/store/modules/settings';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 defineProps({
-    collapse: {
-        type: Boolean,
-        required: true
-    }
-})
+  collapse: {
+    type: Boolean,
+    required: true
+  }
+});
 
 const title = ref('RuoYi-Vue-Plus');
 const settingsStore = useSettingsStore();
@@ -77,7 +76,12 @@ const sideTheme = computed(() => settingsStore.sideTheme);
       font-weight: 600;
       line-height: 50px;
       font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      font-family:
+        Avenir,
+        Helvetica Neue,
+        Arial,
+        Helvetica,
+        sans-serif;
       vertical-align: middle;
     }
   }
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 4459cdfa43b57df65236ce93f4257d9b995222cd..37200622d13365170aad5618a8c4af21781252b1 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -13,7 +13,7 @@
 
     <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
       <template v-if="item.meta" #title>
-        <svg-icon :icon-class="item.meta ? item.meta.icon : '' " />
+        <svg-icon :icon-class="item.meta ? item.meta.icon : ''" />
         <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
       </template>
 
@@ -30,79 +30,74 @@
 </template>
 
 <script setup lang="ts">
-import { isExternal } from '@/utils/validate'
-import AppLink from './Link.vue'
-import { getNormalPath } from '@/utils/ruoyi'
-import { RouteOption } from "vue-router";
+import { isExternal } from '@/utils/validate';
+import AppLink from './Link.vue';
+import { getNormalPath } from '@/utils/ruoyi';
+import { RouteRecordRaw } from 'vue-router';
 
 const props = defineProps({
-    // route object
-    item: {
-        type: Object as PropType<RouteOption>,
-        required: true
-    },
-    isNest: {
-        type: Boolean,
-        default: false
-    },
-    basePath: {
-        type: String,
-        default: ''
-    }
-})
+  item: {
+    type: Object as PropType<RouteRecordRaw>,
+    required: true
+  },
+  isNest: {
+    type: Boolean,
+    default: false
+  },
+  basePath: {
+    type: String,
+    default: ''
+  }
+});
 
 const onlyOneChild = ref<any>({});
 
-const hasOneShowingChild = (parent: RouteOption, children?:RouteOption[]) => {
-    if (!children) {
-        children = [];
+const hasOneShowingChild = (parent: RouteRecordRaw, children?: RouteRecordRaw[]) => {
+  if (!children) {
+    children = [];
+  }
+  const showingChildren = children.filter((item) => {
+    if (item.hidden) {
+      return false;
+    } else {
+      // Temp set(will be used if only has one showing child)
+      onlyOneChild.value = item;
+      return true;
     }
-    const showingChildren = children.filter(item => {
-        if (item.hidden) {
-            return false
-        } else {
-            // Temp set(will be used if only has one showing child)
-            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
-    }
+  // 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 }
-        if (parent.name === '2222') {
-          console.log(onlyOneChild.value)
-        }
-        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
+  return false;
 };
 
-const resolvePath = (routePath:string, routeQuery?:string): any => {
-    if (isExternal(routePath)) {
-        return routePath
-    }
-    if (isExternal(props.basePath)) {
-        return props.basePath
-    }
-    if (routeQuery) {
-        let query = JSON.parse(routeQuery);
-        return { path: getNormalPath(props.basePath + '/' + routePath), query: query }
-    }
-    return getNormalPath(props.basePath + '/' + routePath)
-}
+const resolvePath = (routePath: string, routeQuery?: string): any => {
+  if (isExternal(routePath)) {
+    return routePath;
+  }
+  if (isExternal(props.basePath as string)) {
+    return props.basePath;
+  }
+  if (routeQuery) {
+    let 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;
-}
+  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
index fc290b114d9d26bc0704530ca30d3f4b7e8e6841..a4f20d0b972e7c7443097169d55d4894189cb036 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -13,7 +13,7 @@
           :collapse-transition="false"
           mode="vertical"
         >
-          <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
+          <sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :item="r" :base-path="r.path" />
         </el-menu>
       </transition>
     </el-scrollbar>
@@ -21,35 +21,35 @@
 </template>
 
 <script setup lang="ts">
-import Logo from './Logo.vue'
-import SidebarItem from './SidebarItem.vue'
-import variables from '@/assets/styles/variables.module.scss'
-import useAppStore from '@/store/modules/app'
-import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
-import { RouteOption } from "vue-router";
+import Logo from './Logo.vue';
+import SidebarItem from './SidebarItem.vue';
+import variables from '@/assets/styles/variables.module.scss';
+import useAppStore from '@/store/modules/app';
+import useSettingsStore from '@/store/modules/settings';
+import usePermissionStore from '@/store/modules/permission';
+import { RouteRecordRaw } from 'vue-router';
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const route = useRoute();
-const appStore = useAppStore()
-const settingsStore = useSettingsStore()
-const permissionStore = usePermissionStore()
-
-const sidebarRouters =  computed<RouteOption[]>(() => permissionStore.sidebarRouters);
+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 { 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' ? variables.menuBackground : variables.menuLightBackground);
-const textColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor);
+const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
+const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
 </script>
diff --git a/src/layout/components/SocialCallback/index.vue b/src/layout/components/SocialCallback/index.vue
index e3a50e0a7164fe7a54a6dfae64fe583fadf98430..eac66bc2fbe849dbf8feda580db7aff289f9283e 100644
--- a/src/layout/components/SocialCallback/index.vue
+++ b/src/layout/components/SocialCallback/index.vue
@@ -10,7 +10,6 @@ import { LoginData } from '@/api/types';
 const route = useRoute();
 const loading = ref(true);
 
-
 /**
  * 接收Route传递的参数
  * @param {Object} route.query.
@@ -18,8 +17,7 @@ const loading = ref(true);
 const code = route.query.code as string;
 const state = route.query.state as string;
 const source = route.query.source as string;
-const tenantId = localStorage.getItem("tenantId") ? localStorage.getItem("tenantId") as string : '000000';
-
+const tenantId = localStorage.getItem('tenantId') ? (localStorage.getItem('tenantId') as string) : '000000';
 
 const processResponse = async (res: any) => {
   if (res.code !== 200) {
@@ -52,7 +50,6 @@ const callbackByCode = async (data: LoginData) => {
 };
 
 const loginByCode = async (data: LoginData) => {
-  console.log(2)
   try {
     const res = await login(data);
     await processResponse(res);
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index b50c6281e2058af409073da24d453262a47c0225..3b30043902c34e3387799da44784a0fc214a6126 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -5,84 +5,85 @@
 </template>
 
 <script setup lang="ts">
-import useTagsViewStore from '@/store/modules/tagsView'
-import { TagView } from 'vue-router'
+import { RouteLocationNormalized } from 'vue-router';
+import useTagsViewStore from '@/store/modules/tagsView';
+
 const tagAndTagSpacing = ref(4);
 
-const scrollContainerRef = ref<ElScrollbarInstance>()
-const scrollWrapper = computed(() => scrollContainerRef.value?.$refs.wrapRef as any);
+const scrollContainerRef = ref<ElScrollbarInstance>();
+const scrollWrapper = computed(() => scrollContainerRef.value?.$refs.wrapRef);
 
 onMounted(() => {
-    scrollWrapper.value?.addEventListener('scroll', emitScroll, true)
-})
+  scrollWrapper.value?.addEventListener('scroll', emitScroll, true);
+});
 onBeforeUnmount(() => {
-    scrollWrapper.value?.removeEventListener('scroll', emitScroll)
-})
+  scrollWrapper.value?.removeEventListener('scroll', emitScroll);
+});
 
 const handleScroll = (e: WheelEvent) => {
-    const eventDelta = (e as any).wheelDelta || - e.deltaY * 40
-    const $scrollWrapper = scrollWrapper.value;
-    $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-}
-const emits = defineEmits(['scroll'])
+  const eventDelta = (e as any).wheelDelta || -e.deltaY * 40;
+  const $scrollWrapper = scrollWrapper.value;
+  $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
+};
+const emits = defineEmits(['scroll']);
 const emitScroll = () => {
-    emits('scroll')
-}
+  emits('scroll');
+};
 
-const tagsViewStore = useTagsViewStore()
+const tagsViewStore = useTagsViewStore();
 const visitedViews = computed(() => tagsViewStore.visitedViews);
 
-const moveToTarget = (currentTag: TagView) => {
-    const $container = scrollContainerRef.value?.$el
-    const $containerWidth = $container.offsetWidth
-    const $scrollWrapper = scrollWrapper.value;
+const moveToTarget = (currentTag: RouteLocationNormalized) => {
+  const $container = scrollContainerRef.value?.$el;
+  const $containerWidth = $container.offsetWidth;
+  const $scrollWrapper = scrollWrapper.value;
 
-    let firstTag = null
-    let lastTag = null
+  let firstTag = null;
+  let lastTag = null;
 
-    // find first tag and last tag
-    if (visitedViews.value.length > 0) {
-        firstTag = visitedViews.value[0]
-        lastTag = visitedViews.value[visitedViews.value.length - 1]
-    }
+  // find first tag and last tag
+  if (visitedViews.value.length > 0) {
+    firstTag = visitedViews.value[0];
+    lastTag = visitedViews.value[visitedViews.value.length - 1];
+  }
 
-    if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
-    } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
-    } else {
-        const tagListDom: any = document.getElementsByClassName('tags-view-item');
-        const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
-        let prevTag = null
-        let nextTag = null
+  if (firstTag === currentTag) {
+    $scrollWrapper.scrollLeft = 0;
+  } else if (lastTag === currentTag) {
+    $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
+  } else {
+    const tagListDom: any = document.getElementsByClassName('tags-view-item');
+    const currentIndex = visitedViews.value.findIndex((item) => item === currentTag);
+    let prevTag = null;
+    let nextTag = null;
 
-        for (const k in tagListDom) {
-            if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
-                if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
-                    prevTag = tagListDom[k];
-                }
-                if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
-                    nextTag = tagListDom[k];
-                }
-            }
+    for (const k in tagListDom) {
+      if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
+        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
+          prevTag = tagListDom[k];
         }
+        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
+          nextTag = tagListDom[k];
+        }
+      }
+    }
 
-        // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value
+    // the tag's offsetLeft after of nextTag
+    const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value;
 
-        // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-            $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
-        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-            $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
-        }
+    // the tag's offsetLeft before of prevTag
+    const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value;
+    if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+      $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth;
+    } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+      $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft;
     }
-}
+  }
+};
 
 defineExpose({
-    moveToTarget,
-})
+  moveToTarget
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 1df486e31bd109df246b71280fdf2b5e2d515dd3..1e12ca45d0b51a29c891ba730cd997cd1796513f 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -14,226 +14,230 @@
       >
         {{ tag.title }}
         <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
-          <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
+          <close class="el-icon-close" style="width: 1em; height: 1em; vertical-align: middle" />
         </span>
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em;" /> 刷新页面</li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em;" /> 关闭当前</li>
-      <li @click="closeOthersTags"><circle-close 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)"><circle-close style="width: 1em; height: 1em;" /> 全部关闭</li>
+      <li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> 刷新页面</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em" /> 关闭当前</li>
+      <li @click="closeOthersTags"><circle-close 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)"><circle-close style="width: 1em; height: 1em" /> 全部关闭</li>
     </ul>
   </div>
 </template>
 
 <script setup lang="ts">
-import ScrollPane from './ScrollPane.vue'
-import { getNormalPath } from '@/utils/ruoyi'
-import useTagsViewStore from "@/store/modules/tagsView";
-import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
-import { ComponentInternalInstance } from "vue";
-import { RouteOption, TagView, RouteLocationRaw } from "vue-router";
+import ScrollPane from './ScrollPane.vue';
+import { getNormalPath } from '@/utils/ruoyi';
+import useSettingsStore from '@/store/modules/settings';
+import usePermissionStore from '@/store/modules/permission';
+import useTagsViewStore from '@/store/modules/tagsView';
+import { RouteRecordRaw, RouteLocationNormalized } from 'vue-router';
 
 const visible = ref(false);
 const top = ref(0);
 const left = ref(0);
-const selectedTag = ref<TagView>({});
-const affixTags = ref<TagView[]>([]);
-const scrollPaneRef = ref(ScrollPane);
+const selectedTag = ref<RouteLocationNormalized>();
+const affixTags = ref<RouteLocationNormalized[]>([]);
+const scrollPaneRef = ref<InstanceType<typeof ScrollPane>>();
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const route = useRoute();
 const router = useRouter();
 
-const visitedViews = computed(() => useTagsViewStore().visitedViews);
-const routes = computed(() => usePermissionStore().routes);
+const visitedViews = computed(() => useTagsViewStore().getVisitedViews());
+const routes = computed(() => usePermissionStore().getRoutes());
 const theme = computed(() => useSettingsStore().theme);
 
 watch(route, () => {
-    addTags();
-    moveToCurrentTag();
-})
+  addTags();
+  moveToCurrentTag();
+});
 watch(visible, (value) => {
-    if (value) {
-        document.body.addEventListener('click', closeMenu);
-    } else {
-        document.body.removeEventListener('click', closeMenu);
-    }
-})
+  if (value) {
+    document.body.addEventListener('click', closeMenu);
+  } else {
+    document.body.removeEventListener('click', closeMenu);
+  }
+});
 
-const isActive = (r: TagView): boolean => {
-    return r.path === route.path;
-}
-const activeStyle = (tag: TagView) => {
-    if (!isActive(tag)) return {};
-    return {
-        "background-color": theme.value,
-        "border-color": theme.value
-    };
-}
-const isAffix = (tag: TagView) => {
-    return tag.meta && tag.meta.affix;
-}
+const isActive = (r: RouteLocationNormalized): boolean => {
+  return r.path === route.path;
+};
+const activeStyle = (tag: RouteLocationNormalized) => {
+  if (!isActive(tag)) return {};
+  return {
+    'background-color': theme.value,
+    'border-color': theme.value
+  };
+};
+const isAffix = (tag: RouteLocationNormalized) => {
+  return tag?.meta && tag?.meta?.affix;
+};
 const isFirstView = () => {
-    try {
-        return selectedTag.value.fullPath === '/index' || selectedTag.value.fullPath === visitedViews.value[1].fullPath;
-    } catch (err) {
-        return false;
-    }
-}
+  try {
+    return selectedTag.value.fullPath === '/index' || selectedTag.value.fullPath === visitedViews.value[1].fullPath;
+  } catch (err) {
+    return false;
+  }
+};
 const isLastView = () => {
-    try {
-        return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1].fullPath;
-    } catch (err) {
-        return false;
+  try {
+    return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1].fullPath;
+  } catch (err) {
+    return false;
+  }
+};
+const filterAffixTags = (routes: RouteRecordRaw[], basePath = '') => {
+  let tags: RouteLocationNormalized[] = [];
+
+  routes.forEach((route) => {
+    if (route.meta && route.meta.affix) {
+      const tagPath = getNormalPath(basePath + '/' + route.path);
+      tags.push({
+        hash: '',
+        matched: [],
+        params: undefined,
+        query: undefined,
+        redirectedFrom: undefined,
+        fullPath: tagPath,
+        path: tagPath,
+        name: route.name as string,
+        meta: { ...route.meta }
+      });
     }
-}
-const filterAffixTags = (routes:RouteOption [], basePath = '') => {
-    let tags:TagView[] = []
-    routes.forEach(route => {
-        if (route.meta && route.meta.affix) {
-            const tagPath = getNormalPath(basePath + '/' + route.path);
-            tags.push({
-                fullPath: tagPath,
-                path: tagPath,
-                name: route.name,
-                meta: { ...route.meta }
-            })
-        }
-        if (route.children) {
-            const tempTags = filterAffixTags(route.children, route.path);
-            if (tempTags.length >= 1) {
-                tags = [...tags, ...tempTags];
-            }
-        }
-    })
-    return tags
-}
+    if (route.children) {
+      const tempTags = filterAffixTags(route.children, route.path);
+      if (tempTags.length >= 1) {
+        tags = [...tags, ...tempTags];
+      }
+    }
+  });
+  return tags;
+};
 const initTags = () => {
-    const res = filterAffixTags(routes.value);
-    affixTags.value = res;
-    for (const tag of res) {
-        // Must have tag name
-        if (tag.name) {
-            useTagsViewStore().addVisitedView(tag);
-        }
+  const res = filterAffixTags(routes.value);
+  affixTags.value = res;
+  for (const tag of res) {
+    // Must have tag name
+    if (tag.name) {
+      useTagsViewStore().addVisitedView(tag);
     }
-}
+  }
+};
 const addTags = () => {
-    const { name } = route;
-    if(route.query.title) {
-        route.meta.title = route.query.title;
-    }
-    if (name) {
-        useTagsViewStore().addView(route);
-        if (route.meta.link) {
-            useTagsViewStore().addIframeView(route);
-        }
+  const { name } = route;
+  if (route.query.title) {
+    route.meta.title = route.query.title as string;
+  }
+  if (name) {
+    useTagsViewStore().addView(route as any);
+    if (route.meta.link) {
+      useTagsViewStore().addIframeView(route as any);
     }
-    return false
-}
+  }
+  return false;
+};
 const moveToCurrentTag = () => {
-    nextTick(() => {
-        for (const r of visitedViews.value) {
-            if (r.path === route.path) {
-                scrollPaneRef.value.moveToTarget(r);
-                // when query is different then update
-                if (r.fullPath !== route.fullPath) {
-                    useTagsViewStore().updateVisitedView(route);
-                }
-            }
+  nextTick(() => {
+    for (const r of visitedViews.value) {
+      if (r.path === route.path) {
+        scrollPaneRef.value?.moveToTarget(r);
+        // when query is different then update
+        if (r.fullPath !== route.fullPath) {
+          useTagsViewStore().updateVisitedView(route);
         }
-    })
-}
-const refreshSelectedTag = (view: TagView) => {
-    proxy?.$tab.refreshPage(view);
-    if (route.meta.link) {
-        useTagsViewStore().delIframeView(route);
+      }
     }
-}
-const closeSelectedTag = (view: TagView) => {
-    proxy?.$tab.closePage(view).then(({ visitedViews }: any) => {
-        if (isActive(view)) {
-            toLastView(visitedViews, view);
-        }
-    })
-}
+  });
+};
+const refreshSelectedTag = (view: RouteLocationNormalized) => {
+  proxy?.$tab.refreshPage(view);
+  if (route.meta.link) {
+    useTagsViewStore().delIframeView(route);
+  }
+};
+const closeSelectedTag = (view: RouteLocationNormalized) => {
+  proxy?.$tab.closePage(view).then(({ visitedViews }: any) => {
+    if (isActive(view)) {
+      toLastView(visitedViews, view);
+    }
+  });
+};
 const closeRightTags = () => {
-    proxy?.$tab.closeRightPage(selectedTag.value).then(visitedViews => {
-        if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
-            toLastView(visitedViews);
-        }
-    })
-}
+  proxy?.$tab.closeRightPage(selectedTag.value).then((visitedViews: RouteLocationNormalized[]) => {
+    if (!visitedViews.find((i: RouteLocationNormalized) => i.fullPath === route.fullPath)) {
+      toLastView(visitedViews);
+    }
+  });
+};
 const closeLeftTags = () => {
-    proxy?.$tab.closeLeftPage(selectedTag.value).then(visitedViews => {
-        if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
-            toLastView(visitedViews);
-        }
-    })
-}
+  proxy?.$tab.closeLeftPage(selectedTag.value).then((visitedViews: RouteLocationNormalized[]) => {
+    if (!visitedViews.find((i: RouteLocationNormalized) => i.fullPath === route.fullPath)) {
+      toLastView(visitedViews);
+    }
+  });
+};
 const closeOthersTags = () => {
-    router.push(selectedTag.value as RouteLocationRaw).catch(() => { });
-    proxy?.$tab.closeOtherPage(selectedTag.value).then(() => {
-        moveToCurrentTag();
-    })
-}
-const closeAllTags = (view: TagView) => {
-    proxy?.$tab.closeAllPage().then(({ visitedViews }) => {
-        if (affixTags.value.some(tag => tag.path === route.path)) {
-            return;
-        }
-        toLastView(visitedViews, view);
-    })
-}
-const toLastView = (visitedViews:TagView[], view?: TagView) => {
-    const latestView = visitedViews.slice(-1)[0];
-    if (latestView) {
-        router.push(latestView.fullPath as string);
-    } else {
-        // now the default is to redirect to the home page if there is no tags-view,
-        // you can adjust it according to your needs.
-        if (view?.name === 'Dashboard') {
-            // to reload home page
-            router.replace({ path: '/redirect' + view?.fullPath });
-        } else {
-            router.push('/');
-        }
+  router.push(selectedTag.value).catch(() => {});
+  proxy?.$tab.closeOtherPage(selectedTag.value).then(() => {
+    moveToCurrentTag();
+  });
+};
+const closeAllTags = (view: RouteLocationNormalized) => {
+  proxy?.$tab.closeAllPage().then(({ visitedViews }) => {
+    if (affixTags.value.some((tag) => tag.path === route.path)) {
+      return;
     }
-}
-const openMenu = (tag: TagView, e: MouseEvent) => {
-    const menuMinWidth = 105;
-    const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
-    const offsetWidth = proxy?.$el.offsetWidth; // container width
-    const maxLeft = offsetWidth - menuMinWidth; // left boundary
-    const l = e.clientX - offsetLeft + 15; // 15: margin right
-
-    if (l > maxLeft) {
-        left.value = maxLeft;
+    toLastView(visitedViews, view);
+  });
+};
+const toLastView = (visitedViews: RouteLocationNormalized[], view?: RouteLocationNormalized) => {
+  const latestView = visitedViews.slice(-1)[0];
+  if (latestView) {
+    router.push(latestView.fullPath as string);
+  } else {
+    // now the default is to redirect to the home page if there is no tags-view,
+    // you can adjust it according to your needs.
+    if (view?.name === 'Dashboard') {
+      // to reload home page
+      router.replace({ path: '/redirect' + view?.fullPath });
     } else {
-        left.value = l;
+      router.push('/');
     }
+  }
+};
+const openMenu = (tag: RouteLocationNormalized, e: MouseEvent) => {
+  const menuMinWidth = 105;
+  const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
+  const offsetWidth = proxy?.$el.offsetWidth; // container width
+  const maxLeft = offsetWidth - menuMinWidth; // left boundary
+  const l = e.clientX - offsetLeft + 15; // 15: margin right
 
-    top.value = e.clientY
-    visible.value = true;
-    selectedTag.value = tag;
-}
+  if (l > maxLeft) {
+    left.value = maxLeft;
+  } else {
+    left.value = l;
+  }
+
+  top.value = e.clientY;
+  visible.value = true;
+  selectedTag.value = tag;
+};
 const closeMenu = () => {
-    visible.value = false;
-}
+  visible.value = false;
+};
 const handleScroll = () => {
-    closeMenu();
-}
-
+  closeMenu();
+};
 
 onMounted(() => {
-    initTags();
-    addTags();
-})
+  initTags();
+  addTags();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -242,7 +246,9 @@ onMounted(() => {
   width: 100%;
   background-color: var(--el-bg-color);
   border: 1px solid var(--el-border-color-light);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.12),
+    0 0 3px 0 rgba(0, 0, 0, 0.04);
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -271,7 +277,7 @@ onMounted(() => {
         color: #fff;
         border-color: #42b983;
         &::before {
-          content: "";
+          content: '';
           background: #fff;
           display: inline-block;
           width: 8px;
diff --git a/src/layout/components/TopBar/search.vue b/src/layout/components/TopBar/search.vue
index 9dee36069d818d0d26510f842338024fdd5cc153..cf4b024fcb548759155be300c2966ceb9f9a2423 100644
--- a/src/layout/components/TopBar/search.vue
+++ b/src/layout/components/TopBar/search.vue
@@ -3,12 +3,12 @@
     <el-dialog v-model="state.isShowSearch" destroy-on-close :show-close="false">
       <template #footer>
         <el-autocomplete
+          ref="layoutMenuAutocompleteRef"
           v-model="state.menuQuery"
           :fetch-suggestions="menuSearch"
           placeholder="搜索"
-          ref="layoutMenuAutocompleteRef"
-          @select="onHandleSelect"
           :fit-input-width="true"
+          @select="onHandleSelect"
         >
           <template #prefix>
             <svg-icon class-name="search-icon" icon-class="search" />
@@ -29,130 +29,130 @@
 import { getNormalPath } from '@/utils/ruoyi';
 import { isHttp } from '@/utils/validate';
 import usePermissionStore from '@/store/modules/permission';
-import { RouteOption } from 'vue-router';
+import { RouteRecordRaw } from 'vue-router';
 type Router = Array<{
-	path: string;
-	icon: string;
-	title: string[];
-}>
+  path: string;
+  icon: string;
+  title: string[];
+}>;
 type SearchState<T = any> = {
-	isShowSearch: boolean;
-	menuQuery: string;
-	menuList: T[];
+  isShowSearch: boolean;
+  menuQuery: string;
+  menuList: T[];
 };
 // 定义变量内容
 const layoutMenuAutocompleteRef = ref();
 const router = useRouter();
 const routes = computed(() => usePermissionStore().routes);
 const state = reactive<SearchState>({
-	isShowSearch: false,
-	menuQuery: '',
-	menuList: [],
+  isShowSearch: false,
+  menuQuery: '',
+  menuList: []
 });
 
 // 搜索弹窗打开
 const openSearch = () => {
-	state.menuQuery = '';
-	state.isShowSearch = true;
-	state.menuList = generateRoutes(routes.value);
-	nextTick(() => {
-		setTimeout(() => {
-			layoutMenuAutocompleteRef.value.focus();
-		});
-	});
+  state.menuQuery = '';
+  state.isShowSearch = true;
+  state.menuList = generateRoutes(routes.value as any);
+  nextTick(() => {
+    setTimeout(() => {
+      layoutMenuAutocompleteRef.value.focus();
+    });
+  });
 };
 // 搜索弹窗关闭
 const closeSearch = () => {
-	state.isShowSearch = false;
+  state.isShowSearch = false;
 };
 // 菜单搜索数据过滤
 const menuSearch = (queryString: string, cb: Function) => {
-	let options = state.menuList.filter((item) => {
-		return item.title.indexOf(queryString) > -1;
-	});
-	cb(options);
+  let options = state.menuList.filter((item) => {
+    return item.title.indexOf(queryString) > -1;
+  });
+  cb(options);
 };
 
 // Filter out the routes that can be displayed in the sidebar
 // And generate the internationalized title
-const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: string[] = []) => {
-	let res: Router = []
-	routes.forEach(r => {
-        // skip hidden router
-		if (!r.hidden) {
-			const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
-				const data: any = {
-					path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
-					icon: r.meta?.icon,
-					title: [...prefixTitle]
-				}
-				if (r.meta && r.meta.title) {
-					data.title = [...data.title, r.meta.title];
-					if (r.redirect !== 'noRedirect') {
-						// only push the routes with title
-						// special case: need to exclude parent router without redirect
-            res.push(data);
-					}
-				}
-				// recursive child routes
-				if (r.children) {
-						const tempRoutes = generateRoutes(r.children, data.path, data.title);
-						if (tempRoutes.length >= 1) {
-								res = [...res, ...tempRoutes];
-						}
-				}
-		}
-	})
-	res.forEach((item: any) => {
-		if (item.title instanceof Array) {
-			item.title = item.title.join('/');
-		}
-	});
-	return res;
-}
+const generateRoutes = (routes: RouteRecordRaw[], basePath = '', prefixTitle: string[] = []) => {
+  let res: Router = [];
+  routes.forEach((r) => {
+    // skip hidden router
+    if (!r.hidden) {
+      const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
+      const data: any = {
+        path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
+        icon: r.meta?.icon,
+        title: [...prefixTitle]
+      };
+      if (r.meta && r.meta.title) {
+        data.title = [...data.title, r.meta.title];
+        if (r.redirect !== 'noRedirect') {
+          // only push the routes with title
+          // special case: need to exclude parent router without redirect
+          res.push(data);
+        }
+      }
+      // recursive child routes
+      if (r.children) {
+        const tempRoutes = generateRoutes(r.children, data.path, data.title);
+        if (tempRoutes.length >= 1) {
+          res = [...res, ...tempRoutes];
+        }
+      }
+    }
+  });
+  res.forEach((item: any) => {
+    if (item.title instanceof Array) {
+      item.title = item.title.join('/');
+    }
+  });
+  return res;
+};
 // 当前菜单选中时
 const onHandleSelect = (val: any) => {
-	const paths = val.path;
-	if (isHttp(paths)) {
-		// http(s):// 路径新窗口打开
-		const pindex = paths.indexOf("http");
-		window.open(paths.substring(pindex, paths.length), "_blank");
-	} else {
-		router.push(paths);
-	}
-	state.menuQuery = ''
-	closeSearch();
-
+  const paths = val.path;
+  if (isHttp(paths)) {
+    // http(s):// 路径新窗口打开
+    const pindex = paths.indexOf('http');
+    window.open(paths.substring(pindex, paths.length), '_blank');
+  } else {
+    router.push(paths);
+  }
+  state.menuQuery = '';
+  closeSearch();
 };
 
 // 暴露变量
 defineExpose({
-	openSearch
+  openSearch
 });
 </script>
 
 <style scoped lang="scss">
 .layout-search-dialog {
-	position: relative;
-	:deep(.el-dialog) {
-		.el-dialog__header,
-		.el-dialog__body {
-			display: none;
-		}
-		.el-dialog__footer {
-			width: 100%;
-			position: absolute;
-			left: 50%;
-			transform: translateX(-50%);
-			top: -53vh;
-		}
-	}
-	:deep(.el-autocomplete) {
-		width: 560px;
-		position: absolute;
-		top: 150px;
-		left: 50%;
-		transform: translateX(-50%);
-	}
+  position: relative;
+  :deep(.el-dialog) {
+    padding: 0;
+    .el-dialog__header,
+    .el-dialog__body {
+      display: none;
+    }
+    .el-dialog__footer {
+      width: 100%;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: -53vh;
+    }
+  }
+  :deep(.el-autocomplete) {
+    width: 560px;
+    position: absolute;
+    top: 150px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 </style>
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index ef4a6a9a270a9e823fc31c182d29eac89bf2ca70..e43b2b8cfc72ed9f8e3c197074149a2456d32ecc 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="layout-navbars-breadcrumb-user-news" v-loading="state.loading">
+  <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>
-    <div class="content-box" v-loading="state.loading">
+    <div v-loading="state.loading" class="content-box">
       <template v-if="newsList.length > 0">
-        <div class="content-box-item" v-for="(v, k) in newsList" :key="k" @click="onNewsClick(k)">
+        <div v-for="(v, k) in newsList" :key="k" class="content-box-item" @click="onNewsClick(k)">
           <div class="item-conten">
             <div>{{ v.message }}</div>
             <div class="content-box-msg"></div>
@@ -17,26 +17,24 @@
           <span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
         </div>
       </template>
-      <el-empty :description="'消息为空'" v-else></el-empty>
+      <el-empty v-else :description="'消息为空'"></el-empty>
     </div>
-    <div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">前往gitee</div>
+    <div v-if="newsList.length > 0" class="foot-box" @click="onGoToGiteeClick">前往gitee</div>
   </div>
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbUserNews">
-import { ref } from "vue";
-import { storeToRefs } from 'pinia'
-import { nextTick, onMounted, reactive } from "vue";
+import { storeToRefs } from 'pinia';
 import useNoticeStore from '@/store/modules/notice';
 
 const noticeStore = storeToRefs(useNoticeStore());
-const {readAll} = useNoticeStore();
+const { readAll } = useNoticeStore();
 
 // 定义变量内容
 const state = reactive({
-  loading: false,
+  loading: false
 });
-const newsList =ref([]) as any;
+const newsList = ref([]) as any;
 
 /**
  * 初始化数据
@@ -48,7 +46,6 @@ const getTableData = async () => {
   state.loading = false;
 };
 
-
 //点击消息，写入已读
 const onNewsClick = (item: any) => {
   newsList.value[item].read = true;
@@ -58,7 +55,7 @@ const onNewsClick = (item: any) => {
 
 // 前往通知中心点击
 const onGoToGiteeClick = () => {
-  window.open("https://gitee.com/dromara/RuoYi-Vue-Plus/tree/5.X/");
+  window.open('https://gitee.com/dromara/RuoYi-Vue-Plus/tree/5.X/');
 };
 
 onMounted(() => {
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 8239ed724d6db4d1f45b98e57cbe03559d795725..29fb5ff56d844be923b18fb46fc7eebef2a5aad0 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -12,7 +12,7 @@
         <settings ref="settingRef" />
       </el-scrollbar> -->
       <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar ref="navbarRef" @setLayout="setLayout" />
+        <navbar ref="navbarRef" @set-layout="setLayout" />
         <tags-view v-if="needTagsView" />
       </div>
       <app-main />
@@ -22,12 +22,13 @@
 </template>
 
 <script setup lang="ts">
-import SideBar from './components/Sidebar/index.vue'
-import { AppMain, Navbar, Settings, TagsView } from './components'
-import useAppStore from '@/store/modules/app'
-import useSettingsStore from '@/store/modules/settings'
+import SideBar from './components/Sidebar/index.vue';
+import { AppMain, Navbar, Settings, TagsView } from './components';
+import useAppStore from '@/store/modules/app';
+import useSettingsStore from '@/store/modules/settings';
+import { initWebSocket } from '@/utils/websocket';
 
-const settingsStore = useSettingsStore()
+const settingsStore = useSettingsStore();
 const theme = computed(() => settingsStore.theme);
 const sidebar = computed(() => useAppStore().sidebar);
 const device = computed(() => useAppStore().device);
@@ -35,48 +36,53 @@ const needTagsView = computed(() => settingsStore.tagsView);
 const fixedHeader = computed(() => settingsStore.fixedHeader);
 
 const classObj = computed(() => ({
-    hideSidebar: !sidebar.value.opened,
-    openSidebar: sidebar.value.opened,
-    withoutAnimation: sidebar.value.withoutAnimation,
-    mobile: device.value === 'mobile'
-}))
+  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
 
 watchEffect(() => {
-    if (device.value === 'mobile' && sidebar.value.opened) {
-        useAppStore().closeSideBar({ withoutAnimation: false })
-    }
-    if (width.value - 1 < WIDTH) {
-        useAppStore().toggleDevice('mobile')
-        useAppStore().closeSideBar({ withoutAnimation: true })
-    } else {
-        useAppStore().toggleDevice('desktop')
-    }
-})
-
-const navbarRef = ref(Navbar);
-const settingRef = ref(Settings);
+  if (device.value === 'mobile') {
+    useAppStore().closeSideBar({ withoutAnimation: false });
+  }
+  if (width.value - 1 < WIDTH) {
+    useAppStore().toggleDevice('mobile');
+    useAppStore().closeSideBar({ withoutAnimation: true });
+  } else {
+    useAppStore().toggleDevice('desktop');
+  }
+});
+
+const navbarRef = ref<InstanceType<typeof Navbar>>();
+const settingRef = ref<InstanceType<typeof Settings>>();
 
 onMounted(() => {
   nextTick(() => {
-    navbarRef.value.initTenantList();
-  })
-})
+    navbarRef.value?.initTenantList();
+  });
+});
+
+onMounted(() => {
+  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');
+});
 
 const handleClickOutside = () => {
-  useAppStore().closeSideBar({ withoutAnimation: false })
-}
+  useAppStore().closeSideBar({ withoutAnimation: false });
+};
 
 const setLayout = () => {
-  settingRef.value.openSetting();
-}
+  settingRef.value?.openSetting();
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "@/assets/styles/mixin.scss";
-  @import "@/assets/styles/variables.module.scss";
+@import '@/assets/styles/mixin.scss';
+@import '@/assets/styles/variables.module.scss';
 
 .app-wrapper {
   @include clearfix;
diff --git a/src/main.ts b/src/main.ts
index 0ad939a69a452b2342e9a23ef8cdc13a6a7554b8..592de58b25b55bca622e801e07c5712668d82958 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 // global css
-import 'uno.css';
+import 'virtual:uno.css';
 import '@/assets/styles/index.scss';
 import 'element-plus/theme-chalk/dark/css-vars.css';
 
@@ -14,10 +14,12 @@ import directive from './directive';
 
 // 注册插件
 import plugins from './plugins/index'; // plugins
-import { download } from '@/utils/request';
 
-// 预设动画
-import animate from './animate';
+// 高亮组件
+// import 'highlight.js/styles/a11y-light.css';
+import 'highlight.js/styles/atom-one-dark.css';
+import 'highlight.js/lib/common';
+import HighLight from '@highlightjs/vue-plugin';
 
 // svg图标
 import 'virtual:svg-icons-register';
@@ -26,30 +28,28 @@ import ElementIcons from '@/plugins/svgicon';
 // permission control
 import './permission';
 
-import { useDict } from '@/utils/dict';
-import { getConfigKey, updateConfigByKey } from '@/api/system/config';
-import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi';
-
 // 国际化
 import i18n from '@/lang/index';
 
+// vxeTable
+import VXETable from 'vxe-table';
+import 'vxe-table/lib/style.css';
+VXETable.config({
+  zIndex: 999999
+});
+
+// 修改 el-dialog 默认点击遮照为不关闭
+import { ElDialog } from 'element-plus';
+ElDialog.props.closeOnClickModal.default = false;
+
 const app = createApp(App);
-// 全局方法挂载
-app.config.globalProperties.useDict = useDict;
-app.config.globalProperties.getConfigKey = getConfigKey;
-app.config.globalProperties.updateConfigByKey = updateConfigByKey;
-app.config.globalProperties.download = download;
-app.config.globalProperties.parseTime = parseTime;
-app.config.globalProperties.handleTree = handleTree;
-app.config.globalProperties.addDateRange = addDateRange;
-app.config.globalProperties.selectDictLabel = selectDictLabel;
-app.config.globalProperties.selectDictLabels = selectDictLabels;
-app.config.globalProperties.animate = animate;
 
+app.use(HighLight);
 app.use(ElementIcons);
 app.use(router);
 app.use(store);
 app.use(i18n);
+app.use(VXETable);
 app.use(plugins);
 // 自定义指令
 directive(app);
diff --git a/src/permission.ts b/src/permission.ts
index c819ff4ce4f948ba955533f02dcc8780fe5c2fd4..1123738ce12d57934f4df687f7e439a52889c373 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -15,13 +15,13 @@ const whiteList = ['/login', '/register', '/social-callback'];
 router.beforeEach(async (to, from, next) => {
   NProgress.start();
   if (getToken()) {
-    to.meta.title && useSettingsStore().setTitle(to.meta.title as string);
+    to.meta.title && useSettingsStore().setTitle(to.meta.title);
     /* has token*/
     if (to.path === '/login') {
       next({ path: '/' });
       NProgress.done();
-    } else if (whiteList.indexOf(to.path) !== -1) {
-      next()
+    } else if (whiteList.indexOf(to.path as string) !== -1) {
+      next();
     } else {
       if (useUserStore().roles.length === 0) {
         isRelogin.show = true;
@@ -40,7 +40,7 @@ router.beforeEach(async (to, from, next) => {
               router.addRoute(route); // 动态添加可访问路由表
             }
           });
-          next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
+          next({ path: to.path, replace: true, params: to.params, query: to.query, hash: to.hash, name: to.name as string }); // hack方法 确保addRoutes已完成
         }
       } else {
         next();
@@ -48,11 +48,12 @@ router.beforeEach(async (to, from, next) => {
     }
   } else {
     // 没有token
-    if (whiteList.indexOf(to.path) !== -1) {
+    if (whiteList.indexOf(to.path as string) !== -1) {
       // 在免登录白名单，直接进入
       next();
     } else {
-      next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
+      const redirect = encodeURIComponent(to.fullPath || '/');
+      next(`/login?redirect=${redirect}`) // 否则全部重定向到登录页
       NProgress.done();
     }
   }
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 09d550a44104672b3f516bf3d9ebc9f45dd7d84f..6c5e0c37b8b89a3b2f0d97603d32ebe54387aeef 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -3,6 +3,13 @@ import tab from './tab';
 import download from './download';
 import cache from './cache';
 import auth from './auth';
+// 预设动画
+import animate from '@/animate';
+
+import { download as dl } from '@/utils/request';
+import { useDict } from '@/utils/dict';
+import { getConfigKey, updateConfigByKey } from '@/api/system/config';
+import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi';
 
 import { App } from 'vue';
 
@@ -21,4 +28,16 @@ export default function installPlugin(app: App) {
 
   // 认证对象
   app.config.globalProperties.$auth = auth;
+
+  // 全局方法挂载
+  app.config.globalProperties.useDict = useDict;
+  app.config.globalProperties.getConfigKey = getConfigKey;
+  app.config.globalProperties.updateConfigByKey = updateConfigByKey;
+  app.config.globalProperties.download = dl;
+  app.config.globalProperties.parseTime = parseTime;
+  app.config.globalProperties.handleTree = handleTree;
+  app.config.globalProperties.addDateRange = addDateRange;
+  app.config.globalProperties.selectDictLabel = selectDictLabel;
+  app.config.globalProperties.selectDictLabels = selectDictLabels;
+  app.config.globalProperties.animate = animate;
 }
diff --git a/src/plugins/tab.ts b/src/plugins/tab.ts
index 97442ffdb7fdd8c04c6c744b95b3ea9b61866bab..dd240cd419abb70a4a2995d62e65cd0ca2aeae98 100644
--- a/src/plugins/tab.ts
+++ b/src/plugins/tab.ts
@@ -1,19 +1,29 @@
-import { useTagsViewStore } from '@/store/modules/tagsView';
 import router from '@/router';
-import { TagView, RouteLocationRaw } from 'vue-router';
+import { RouteLocationMatched, RouteLocationNormalized } from 'vue-router';
+import useTagsViewStore from '@/store/modules/tagsView';
 
 export default {
   /**
    * 刷新当前tab页签
    * @param obj 标签对象
    */
-  async refreshPage(obj?: TagView): Promise<void> {
+  async refreshPage(obj?: RouteLocationNormalized): Promise<void> {
     const { path, query, matched } = router.currentRoute.value;
     if (obj === undefined) {
-      matched.forEach((m) => {
+      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 };
+            obj = {
+              name: m.components.default.name,
+              path: path,
+              query: query,
+              matched: undefined,
+              fullPath: undefined,
+              hash: undefined,
+              params: undefined,
+              redirectedFrom: undefined,
+              meta: undefined
+            };
           }
         }
       });
@@ -31,17 +41,17 @@ export default {
     });
   },
   // 关闭当前tab页签，打开新页签
-  closeOpenPage(obj: RouteLocationRaw): void {
+  closeOpenPage(obj: RouteLocationNormalized): void {
     useTagsViewStore().delView(router.currentRoute.value);
     if (obj !== undefined) {
       router.push(obj);
     }
   },
   // 关闭指定tab页签
-  async closePage(obj?: TagView): Promise<{ visitedViews: TagView[]; cachedViews: string[] } | any> {
+  async closePage(obj?: RouteLocationNormalized): Promise<{ visitedViews: RouteLocationNormalized[]; cachedViews: string[] } | any> {
     if (obj === undefined) {
       // prettier-ignore
-      const { visitedViews } = await useTagsViewStore().delView(router.currentRoute.value) as any
+      const { visitedViews } = await useTagsViewStore().delView(router.currentRoute.value)
       const latestView = visitedViews.slice(-1)[0];
       if (latestView) {
         return router.push(latestView.fullPath);
@@ -55,15 +65,15 @@ export default {
     return useTagsViewStore().delAllViews();
   },
   // 关闭左侧tab页签
-  closeLeftPage(obj?: TagView) {
+  closeLeftPage(obj?: RouteLocationNormalized) {
     return useTagsViewStore().delLeftTags(obj || router.currentRoute.value);
   },
   // 关闭右侧tab页签
-  closeRightPage(obj?: TagView) {
+  closeRightPage(obj?: RouteLocationNormalized) {
     return useTagsViewStore().delRightTags(obj || router.currentRoute.value);
   },
   // 关闭其他tab页签
-  closeOtherPage(obj?: TagView) {
+  closeOtherPage(obj?: RouteLocationNormalized) {
     return useTagsViewStore().delOthersViews(obj || router.currentRoute.value);
   },
   /**
@@ -80,7 +90,7 @@ export default {
    * 修改tab页签
    * @param obj 标签对象
    */
-  updatePage(obj: TagView) {
+  updatePage(obj: RouteLocationNormalized) {
     return useTagsViewStore().updateVisitedView(obj);
   }
 };
diff --git a/src/router/index.ts b/src/router/index.ts
index 271385c6d8761aedc1009c6c387db26ce8cb7f6a..2343685589bd6cc3b7200276dba2c1ae3e903952 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,4 @@
-import { createWebHistory, createRouter, RouteOption } from 'vue-router';
+import { createWebHistory, createRouter, RouteRecordRaw } from 'vue-router';
 /* Layout */
 import Layout from '@/layout/index.vue';
 
@@ -25,7 +25,7 @@ import Layout from '@/layout/index.vue';
  */
 
 // 公共路由
-export const constantRoutes: RouteOption[] = [
+export const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/redirect',
     component: Layout,
@@ -92,7 +92,7 @@ export const constantRoutes: RouteOption[] = [
 ];
 
 // 动态路由，基于用户权限动态去加载
-export const dynamicRoutes: RouteOption[] = [
+export const dynamicRoutes: RouteRecordRaw[] = [
   {
     path: '/system/user-auth',
     component: Layout,
@@ -162,6 +162,20 @@ export const dynamicRoutes: RouteOption[] = [
         meta: { title: '修改生成配置', activeMenu: '/tool/gen', icon: '' }
       }
     ]
+  },
+  {
+    path: '/demo/leaveEdit',
+    component: Layout,
+    hidden: true,
+    permissions: ['demo:leave:edit'],
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/workflow/leave/leaveEdit.vue'),
+        name: 'leaveEdit',
+        meta: { title: '请假申请', activeMenu: '/demo/leave', noCache: true }
+      }
+    ]
   }
 ];
 
diff --git a/src/settings.ts b/src/settings.ts
index 9cebde7ae46bbf8449e9b6fb22704496e333d706..4b62c75d68a28be118a2bdc374d02eac0853b70c 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,3 +1,5 @@
+import { LanguageEnum } from '@/enums/LanguageEnum';
+
 const setting: DefaultSettings = {
   /**
    * 网页标题
@@ -50,6 +52,11 @@ const setting: DefaultSettings = {
 
   animationEnable: false,
 
-  dark: false
+  dark: false,
+  language: LanguageEnum.zh_CN,
+
+  size: 'default',
+
+  layout: ''
 };
 export default setting;
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 90866c1bcd20c8f7de1f4653afd4b2f571c7922a..0205faba15badbfd57061383b39d5238d4c9e7ea 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -9,7 +9,7 @@ export const useAppStore = defineStore('app', () => {
     hide: false
   });
   const device = ref<string>('desktop');
-  const size = useStorage('size', 'default');
+  const size = useStorage<'large' | 'default' | 'small'>('size', 'default');
 
   // 语言
   const language = useStorage('language', 'zh_CN');
@@ -43,7 +43,7 @@ export const useAppStore = defineStore('app', () => {
   const toggleDevice = (d: string): void => {
     device.value = d;
   };
-  const setSize = (s: string): void => {
+  const setSize = (s: 'large' | 'default' | 'small'): void => {
     size.value = s;
   };
   const toggleSideBarHide = (status: boolean): void => {
diff --git a/src/store/modules/modeler.ts b/src/store/modules/modeler.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b19c1a7277975a9f3c153e68b49aaa22d0308cb
--- /dev/null
+++ b/src/store/modules/modeler.ts
@@ -0,0 +1,76 @@
+import { Modeler, Modeling, Canvas, ElementRegistry, Moddle, BpmnFactory } from 'bpmn';
+
+type ModelerStore = {
+  modeler: Modeler | undefined;
+  moddle: Moddle | undefined;
+  modeling: Modeling | undefined;
+  canvas: Canvas | undefined;
+  elementRegistry: ElementRegistry | undefined;
+  bpmnFactory: BpmnFactory | undefined;
+  // 流程定义根节点信息
+  procDefId: string | undefined;
+  procDefName: string | undefined;
+};
+
+const defaultState: ModelerStore = {
+  modeler: undefined,
+  moddle: undefined,
+  modeling: undefined,
+  canvas: undefined,
+  elementRegistry: undefined,
+  bpmnFactory: undefined,
+  procDefId: undefined,
+  procDefName: undefined
+};
+export const useModelerStore = defineStore('modeler', () => {
+  let modeler = defaultState.modeler;
+  let moddle = defaultState.moddle;
+  let modeling = defaultState.modeling;
+  let canvas = defaultState.canvas;
+  let elementRegistry = defaultState.elementRegistry;
+  let bpmnFactory = defaultState.bpmnFactory;
+  const procDefId = ref(defaultState.procDefId);
+  const procDefName = ref(defaultState.procDefName);
+
+  const getModeler = () => modeler;
+  const getModdle = () => moddle;
+  const getModeling = (): Modeling | undefined => modeling;
+  const getCanvas = (): Canvas | undefined => canvas;
+  const getElRegistry = (): ElementRegistry | undefined => elementRegistry;
+  const getBpmnFactory = (): BpmnFactory | undefined => bpmnFactory;
+  const getProcDefId = (): string | undefined => procDefId.value;
+  const getProcDefName = (): string | undefined => procDefName.value;
+
+  // 设置根节点
+  const setModeler = (modelers: Modeler | undefined) => {
+    if (modelers) {
+      modeler = modelers;
+      modeling = modelers.get<Modeling>('modeling');
+      moddle = modelers.get<Moddle>('moddle');
+      canvas = modelers.get<Canvas>('canvas');
+      bpmnFactory = modelers.get<BpmnFactory>('bpmnFactory');
+      elementRegistry = modelers.get<ElementRegistry>('elementRegistry');
+    } else {
+      modeling = moddle = canvas = elementRegistry = bpmnFactory = undefined;
+    }
+  };
+  // 设置流程定义根节点信息
+  const setProcDef = (modeler: Modeler | undefined) => {
+    procDefId.value = modeler.get<Canvas>('canvas').getRootElement().businessObject.get('id');
+    procDefName.value = modeler.get<Canvas>('canvas').getRootElement().businessObject.get('name');
+  };
+
+  return {
+    getModeler,
+    getModdle,
+    getModeling,
+    getCanvas,
+    getElRegistry,
+    getBpmnFactory,
+    getProcDefId,
+    getProcDefName,
+    setModeler,
+    setProcDef
+  };
+});
+export default useModelerStore;
diff --git a/src/store/modules/notice.ts b/src/store/modules/notice.ts
index f3f8e5ad718c1055b1782ef5c8d8b8248158b0e5..de980b63bb8464154ab588fda033e967edec619a 100644
--- a/src/store/modules/notice.ts
+++ b/src/store/modules/notice.ts
@@ -22,7 +22,7 @@ export const useNoticeStore = defineStore('notice', () => {
 
   //实现全部已读
   const readAll = () => {
-    state.notices.forEach((item) => {
+    state.notices.forEach((item: any) => {
       item.read = true;
     });
   };
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index ed64e46eeb8779427c9adad985f9688198e7471a..cf12a73024064f50518b4755b98faccdc9c816fc 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -2,35 +2,46 @@ import { defineStore } from 'pinia';
 import router, { constantRoutes, dynamicRoutes } from '@/router';
 import store from '@/store';
 import { getRouters } from '@/api/menu';
+import auth from '@/plugins/auth';
+import { RouteRecordRaw } from 'vue-router';
+
 import Layout from '@/layout/index.vue';
 import ParentView from '@/components/ParentView/index.vue';
 import InnerLink from '@/layout/components/InnerLink/index.vue';
-import auth from '@/plugins/auth';
-import { RouteOption } from 'vue-router';
+
 // 匹配views里面所有的.vue文件
 const modules = import.meta.glob('./../../views/**/*.vue');
-
 export const usePermissionStore = defineStore('permission', () => {
-  const routes = ref<RouteOption[]>([]);
-  const addRoutes = ref<RouteOption[]>([]);
-  const defaultRoutes = ref<RouteOption[]>([]);
-  const topbarRouters = ref<RouteOption[]>([]);
-  const sidebarRouters = ref<RouteOption[]>([]);
+  const routes = ref<RouteRecordRaw[]>([]);
+  const addRoutes = ref<RouteRecordRaw[]>([]);
+  const defaultRoutes = ref<RouteRecordRaw[]>([]);
+  const topbarRouters = ref<RouteRecordRaw[]>([]);
+  const sidebarRouters = ref<RouteRecordRaw[]>([]);
 
-  const setRoutes = (newRoutes: RouteOption[]): void => {
+  const getRoutes = (): RouteRecordRaw[] => {
+    return routes.value;
+  };
+  const getSidebarRoutes = (): RouteRecordRaw[] => {
+    return sidebarRouters.value;
+  };
+  const getTopbarRoutes = (): RouteRecordRaw[] => {
+    return topbarRouters.value;
+  };
+
+  const setRoutes = (newRoutes: RouteRecordRaw[]): void => {
     addRoutes.value = newRoutes;
     routes.value = constantRoutes.concat(newRoutes);
   };
-  const setDefaultRoutes = (routes: RouteOption[]): void => {
+  const setDefaultRoutes = (routes: RouteRecordRaw[]): void => {
     defaultRoutes.value = constantRoutes.concat(routes);
   };
-  const setTopbarRoutes = (routes: RouteOption[]): void => {
+  const setTopbarRoutes = (routes: RouteRecordRaw[]): void => {
     topbarRouters.value = routes;
   };
-  const setSidebarRouters = (routes: RouteOption[]): void => {
+  const setSidebarRouters = (routes: RouteRecordRaw[]): void => {
     sidebarRouters.value = routes;
   };
-  const generateRoutes = async (): Promise<RouteOption[]> => {
+  const generateRoutes = async (): Promise<RouteRecordRaw[]> => {
     const res = await getRouters();
     const { data } = res;
     const sdata = JSON.parse(JSON.stringify(data));
@@ -47,7 +58,7 @@ export const usePermissionStore = defineStore('permission', () => {
     setSidebarRouters(constantRoutes.concat(sidebarRoutes));
     setDefaultRoutes(sidebarRoutes);
     setTopbarRoutes(defaultRoutes);
-    return new Promise<RouteOption[]>((resolve) => resolve(rewriteRoutes));
+    return new Promise<RouteRecordRaw[]>((resolve) => resolve(rewriteRoutes));
   };
 
   /**
@@ -56,22 +67,20 @@ export const usePermissionStore = defineStore('permission', () => {
    * @param lastRouter 上一级路由
    * @param type 是否是重写路由
    */
-  const filterAsyncRouter = (asyncRouterMap: RouteOption[], lastRouter?: RouteOption, type = false): RouteOption[] => {
+  const filterAsyncRouter = (asyncRouterMap: RouteRecordRaw[], lastRouter?: RouteRecordRaw, type = false): RouteRecordRaw[] => {
     return asyncRouterMap.filter((route) => {
       if (type && route.children) {
         route.children = filterChildren(route.children, undefined);
       }
-      if (route.component) {
-        // Layout ParentView 组件特殊处理
-        if (route.component === 'Layout') {
-          route.component = Layout;
-        } else if (route.component === 'ParentView') {
-          route.component = ParentView;
-        } else if (route.component === 'InnerLink') {
-          route.component = InnerLink;
-        } else {
-          route.component = loadView(route.component);
-        }
+      // 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);
       }
       if (route.children != null && route.children && route.children.length) {
         route.children = filterAsyncRouter(route.children, route, type);
@@ -82,11 +91,11 @@ export const usePermissionStore = defineStore('permission', () => {
       return true;
     });
   };
-  const filterChildren = (childrenMap: RouteOption[], lastRouter?: RouteOption): RouteOption[] => {
-    let children: RouteOption[] = [];
+  const filterChildren = (childrenMap: RouteRecordRaw[], lastRouter?: RouteRecordRaw): RouteRecordRaw[] => {
+    let children: RouteRecordRaw[] = [];
     childrenMap.forEach((el) => {
       if (el.children && el.children.length) {
-        if (el.component === 'ParentView' && !lastRouter) {
+        if (el.component?.toString() === 'ParentView' && !lastRouter) {
           el.children.forEach((c) => {
             c.path = el.path + '/' + c.path;
             if (c.children && c.children.length) {
@@ -101,20 +110,33 @@ export const usePermissionStore = defineStore('permission', () => {
       if (lastRouter) {
         el.path = lastRouter.path + '/' + el.path;
         if (el.children && el.children.length) {
-          children = children.concat(filterChildren(el.children, el))
-          return
+          children = children.concat(filterChildren(el.children, el));
+          return;
         }
       }
       children = children.concat(el);
     });
     return children;
   };
-  return { routes, setRoutes, generateRoutes, setSidebarRouters, topbarRouters, sidebarRouters, defaultRoutes };
+  return {
+    routes,
+    topbarRouters,
+    sidebarRouters,
+    defaultRoutes,
+
+    getRoutes,
+    getSidebarRoutes,
+    getTopbarRoutes,
+
+    setRoutes,
+    generateRoutes,
+    setSidebarRouters
+  };
 });
 
 // 动态路由遍历，验证是否具备权限
-export const filterDynamicRoutes = (routes: RouteOption[]) => {
-  const res: RouteOption[] = [];
+export const filterDynamicRoutes = (routes: RouteRecordRaw[]) => {
+  const res: RouteRecordRaw[] = [];
   routes.forEach((route) => {
     if (route.permissions) {
       if (auth.hasPermiOr(route.permissions)) {
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index fcf595cc7d2df214f76cb5cc2b59e5f19adc105e..ef49b3c268b743ed6281400d6aa2ef7899dd4f89 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -1,35 +1,29 @@
 import { defineStore } from 'pinia';
 import defaultSettings from '@/settings';
-import { SettingTypeEnum } from '@/enums/SettingTypeEnum';
 import { useDynamicTitle } from '@/utils/dynamicTitle';
-import { Ref } from 'vue';
 
 export const useSettingsStore = defineStore('setting', () => {
-  const storageSetting = JSON.parse(localStorage.getItem('layout-setting') || '{}');
+  const storageSetting = useStorage<LayoutSetting>('layout-setting', {
+    topNav: defaultSettings.topNav,
+    tagsView: defaultSettings.tagsView,
+    fixedHeader: defaultSettings.fixedHeader,
+    sidebarLogo: defaultSettings.sidebarLogo,
+    dynamicTitle: defaultSettings.dynamicTitle,
+    sideTheme: defaultSettings.sideTheme,
+    theme: defaultSettings.theme
+  });
+  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 topNav = ref<boolean>(storageSetting.value.topNav);
+  const tagsView = ref<boolean>(storageSetting.value.tagsView);
+  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 prop: { [key: string]: Ref<any> } = {
-    title: ref<string>(''),
-    theme: ref<string>(storageSetting.theme || defaultSettings.theme),
-    sideTheme: ref<string>(storageSetting.sideTheme || defaultSettings.sideTheme),
-    showSettings: ref<boolean>(storageSetting.showSettings || defaultSettings.showSettings),
-    topNav: ref<boolean>(storageSetting.topNav === undefined ? defaultSettings.topNav : storageSetting.topNav),
-    tagsView: ref<boolean>(storageSetting.tagsView === undefined ? defaultSettings.tagsView : storageSetting.tagsView),
-    fixedHeader: ref<boolean>(storageSetting.fixedHeader === undefined ? defaultSettings.fixedHeader : storageSetting.fixedHeader),
-    sidebarLogo: ref<boolean>(storageSetting.sidebarLogo === undefined ? defaultSettings.sidebarLogo : storageSetting.sidebarLogo),
-    dynamicTitle: ref<boolean>(storageSetting.dynamicTitle === undefined ? defaultSettings.dynamicTitle : storageSetting.dynamicTitle),
-    animationEnable: ref<boolean>(storageSetting.animationEnable === undefined ? defaultSettings.animationEnable : storageSetting.animationEnable),
-    dark: ref<boolean>(storageSetting.dark || defaultSettings.dark)
-  };
-
-  const { title, theme, sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle, animationEnable, dark } = prop;
-
-  // actions
-  const changeSetting = (param: { key: SettingTypeEnum; value: any }) => {
-    const { key, value } = param;
-    if (key in prop) {
-      prop[key].value = value;
-    }
-  };
   const setTitle = (value: string) => {
     title.value = value;
     useDynamicTitle();
@@ -46,7 +40,6 @@ export const useSettingsStore = defineStore('setting', () => {
     dynamicTitle,
     animationEnable,
     dark,
-    changeSetting,
     setTitle
   };
 });
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index 1c1c9a24a668b090d1d6eb3b9d668a585c598c75..b9502eb52a36e16beaf23c6f9760560646766220 100644
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@@ -1,38 +1,53 @@
-import { TagView, RouteRecordNormalized } from 'vue-router';
+import { RouteLocationNormalized } from 'vue-router';
 
 export const useTagsViewStore = defineStore('tagsView', () => {
-  const visitedViews = ref<TagView[]>([]);
+  const visitedViews = ref<RouteLocationNormalized[]>([]);
   const cachedViews = ref<string[]>([]);
-  const iframeViews = ref<TagView[]>([]);
+  const iframeViews = ref<RouteLocationNormalized[]>([]);
 
-  const addView = (view: TagView) => {
+  const getVisitedViews = (): RouteLocationNormalized[] => {
+    return visitedViews.value;
+  };
+  const getIframeViews = (): RouteLocationNormalized[] => {
+    return iframeViews.value;
+  };
+  const getCachedViews = (): string[] => {
+    return cachedViews.value;
+  };
+
+  const addView = (view: RouteLocationNormalized) => {
     addVisitedView(view);
     addCachedView(view);
   };
 
-  const addIframeView = (view: TagView): void => {
-    if (iframeViews.value.some((v) => v.path === view.path)) return;
+  const addIframeView = (view: RouteLocationNormalized): void => {
+    if (iframeViews.value.some((v: RouteLocationNormalized) => v.path === view.path)) return;
     iframeViews.value.push(
       Object.assign({}, view, {
         title: view.meta?.title || 'no-name'
       })
     );
   };
-  const delIframeView = (view: TagView): Promise<TagView[]> => {
+  const delIframeView = (view: RouteLocationNormalized): Promise<RouteLocationNormalized[]> => {
     return new Promise((resolve) => {
-      iframeViews.value = iframeViews.value.filter((item) => item.path !== view.path);
+      iframeViews.value = iframeViews.value.filter((item: RouteLocationNormalized) => item.path !== view.path);
       resolve([...iframeViews.value]);
     });
   };
-  const addVisitedView = (view: TagView): void => {
-    if (visitedViews.value.some((v) => v.path === view.path)) return;
+  const addVisitedView = (view: RouteLocationNormalized): void => {
+    if (visitedViews.value.some((v: RouteLocationNormalized) => v.path === view.path)) return;
     visitedViews.value.push(
       Object.assign({}, view, {
         title: view.meta?.title || 'no-name'
       })
     );
   };
-  const delView = (view: TagView): Promise<{ visitedViews: TagView[]; cachedViews: string[] }> => {
+  const delView = (
+    view: RouteLocationNormalized
+  ): Promise<{
+    visitedViews: RouteLocationNormalized[];
+    cachedViews: string[];
+  }> => {
     return new Promise((resolve) => {
       delVisitedView(view);
       if (!isDynamicRoute(view)) {
@@ -45,7 +60,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
     });
   };
 
-  const delVisitedView = (view: TagView): Promise<TagView[]> => {
+  const delVisitedView = (view: RouteLocationNormalized): Promise<RouteLocationNormalized[]> => {
     return new Promise((resolve) => {
       for (const [i, v] of visitedViews.value.entries()) {
         if (v.path === view.path) {
@@ -56,7 +71,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
       resolve([...visitedViews.value]);
     });
   };
-  const delCachedView = (view?: TagView): Promise<string[]> => {
+  const delCachedView = (view?: RouteLocationNormalized): Promise<string[]> => {
     let viewName = '';
     if (view) {
       viewName = view.name as string;
@@ -67,7 +82,12 @@ export const useTagsViewStore = defineStore('tagsView', () => {
       resolve([...cachedViews.value]);
     });
   };
-  const delOthersViews = (view: TagView): Promise<{ visitedViews: TagView[]; cachedViews: string[] }> => {
+  const delOthersViews = (
+    view: RouteLocationNormalized
+  ): Promise<{
+    visitedViews: RouteLocationNormalized[];
+    cachedViews: string[];
+  }> => {
     return new Promise((resolve) => {
       delOthersVisitedViews(view);
       delOthersCachedViews(view);
@@ -78,15 +98,15 @@ export const useTagsViewStore = defineStore('tagsView', () => {
     });
   };
 
-  const delOthersVisitedViews = (view: TagView): Promise<TagView[]> => {
+  const delOthersVisitedViews = (view: RouteLocationNormalized): Promise<RouteLocationNormalized[]> => {
     return new Promise((resolve) => {
-      visitedViews.value = visitedViews.value.filter((v) => {
+      visitedViews.value = visitedViews.value.filter((v: RouteLocationNormalized) => {
         return v.meta?.affix || v.path === view.path;
       });
       resolve([...visitedViews.value]);
     });
   };
-  const delOthersCachedViews = (view: TagView): Promise<string[]> => {
+  const delOthersCachedViews = (view: RouteLocationNormalized): Promise<string[]> => {
     const viewName = view.name as string;
     return new Promise((resolve) => {
       const index = cachedViews.value.indexOf(viewName);
@@ -99,7 +119,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
     });
   };
 
-  const delAllViews = (): Promise<{ visitedViews: TagView[]; cachedViews: string[] }> => {
+  const delAllViews = (): Promise<{ visitedViews: RouteLocationNormalized[]; cachedViews: string[] }> => {
     return new Promise((resolve) => {
       delAllVisitedViews();
       delAllCachedViews();
@@ -109,9 +129,9 @@ export const useTagsViewStore = defineStore('tagsView', () => {
       });
     });
   };
-  const delAllVisitedViews = (): Promise<TagView[]> => {
+  const delAllVisitedViews = (): Promise<RouteLocationNormalized[]> => {
     return new Promise((resolve) => {
-      visitedViews.value = visitedViews.value.filter((tag) => tag.meta?.affix);
+      visitedViews.value = visitedViews.value.filter((tag: RouteLocationNormalized) => tag.meta?.affix);
       resolve([...visitedViews.value]);
     });
   };
@@ -123,7 +143,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
     });
   };
 
-  const updateVisitedView = (view: TagView): void => {
+  const updateVisitedView = (view: RouteLocationNormalized): void => {
     for (let v of visitedViews.value) {
       if (v.path === view.path) {
         v = Object.assign(v, view);
@@ -131,13 +151,13 @@ export const useTagsViewStore = defineStore('tagsView', () => {
       }
     }
   };
-  const delRightTags = (view: TagView): Promise<TagView[]> => {
+  const delRightTags = (view: RouteLocationNormalized): Promise<RouteLocationNormalized[]> => {
     return new Promise((resolve) => {
-      const index = visitedViews.value.findIndex((v) => v.path === view.path);
+      const index = visitedViews.value.findIndex((v: RouteLocationNormalized) => v.path === view.path);
       if (index === -1) {
         return;
       }
-      visitedViews.value = visitedViews.value.filter((item, idx) => {
+      visitedViews.value = visitedViews.value.filter((item: RouteLocationNormalized, idx: number) => {
         if (idx <= index || (item.meta && item.meta.affix)) {
           return true;
         }
@@ -150,13 +170,13 @@ export const useTagsViewStore = defineStore('tagsView', () => {
       resolve([...visitedViews.value]);
     });
   };
-  const delLeftTags = (view: TagView): Promise<TagView[]> => {
+  const delLeftTags = (view: RouteLocationNormalized): Promise<RouteLocationNormalized[]> => {
     return new Promise((resolve) => {
-      const index = visitedViews.value.findIndex((v) => v.path === view.path);
+      const index = visitedViews.value.findIndex((v: RouteLocationNormalized) => v.path === view.path);
       if (index === -1) {
         return;
       }
-      visitedViews.value = visitedViews.value.filter((item, idx) => {
+      visitedViews.value = visitedViews.value.filter((item: RouteLocationNormalized, idx: number) => {
         if (idx >= index || (item.meta && item.meta.affix)) {
           return true;
         }
@@ -170,7 +190,7 @@ export const useTagsViewStore = defineStore('tagsView', () => {
     });
   };
 
-  const addCachedView = (view: TagView): void => {
+  const addCachedView = (view: RouteLocationNormalized): void => {
     const viewName = view.name as string;
     if (!viewName) return;
     if (cachedViews.value.includes(viewName)) return;
@@ -179,15 +199,20 @@ export const useTagsViewStore = defineStore('tagsView', () => {
     }
   };
 
-  const isDynamicRoute = (view: any): boolean => {
+  const isDynamicRoute = (view: RouteLocationNormalized): boolean => {
     // 检查匹配的路由记录中是否有动态段
-    return view.matched.some((m: RouteRecordNormalized) => m.path.includes(':'));
+    return view.matched.some((m) => m.path.includes(':'));
   };
 
   return {
     visitedViews,
     cachedViews,
     iframeViews,
+
+    getVisitedViews,
+    getIframeViews,
+    getCachedViews,
+
     addVisitedView,
     addCachedView,
     delVisitedView,
@@ -205,5 +230,4 @@ export const useTagsViewStore = defineStore('tagsView', () => {
     delIframeView
   };
 });
-
 export default useTagsViewStore;
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 7c02de0a0f0d73d8aae290ef946a7027ba3ad3ae..41222943fd5484e690bd110496a973bcfbe1ac1f 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -1,9 +1,9 @@
 import { to } from 'await-to-js';
-import defAva from '@/assets/images/profile.jpg';
-import store from '@/store';
 import { getToken, removeToken, setToken } from '@/utils/auth';
 import { login as loginApi, logout as logoutApi, getInfo as getUserInfo } from '@/api/login';
 import { LoginData } from '@/api/types';
+import defAva from '@/assets/images/profile.jpg';
+import store from '@/store';
 
 export const useUserStore = defineStore('user', () => {
   const token = ref(getToken());
diff --git a/src/types/axios.d.ts b/src/types/axios.d.ts
index 36a9f8faf775930ec42734fb31ca487db108f644..9f2c6d2e9f36aa4e88f05b793b9e9ab66afbbd1f 100644
--- a/src/types/axios.d.ts
+++ b/src/types/axios.d.ts
@@ -1,7 +1,6 @@
-import axios from 'axios';
-
+export {};
 declare module 'axios' {
-  export interface AxiosResponse<T = any> {
+  interface AxiosResponse<T = any> {
     code: number;
     msg: string;
     rows: T;
diff --git a/src/types/bpmn/editor/global.d.ts b/src/types/bpmn/editor/global.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1b9a634329c43695c413827346b9bd6fdd2ce7dd
--- /dev/null
+++ b/src/types/bpmn/editor/global.d.ts
@@ -0,0 +1,13 @@
+import { MessageApiInjection } from 'naive-ui/lib/message/src/MessageProvider';
+
+declare global {
+  interface Window {
+    bpmnInstances: any;
+    __messageBox: MessageApiInjection;
+    URL: any;
+  }
+}
+
+declare interface Window {
+  bpmnInstances: any;
+}
diff --git a/src/types/bpmn/index.d.ts b/src/types/bpmn/index.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8e8d15c9c4dfc6f4174fb3da99603be31a4e173
--- /dev/null
+++ b/src/types/bpmn/index.d.ts
@@ -0,0 +1,15 @@
+declare module 'bpmn' {
+  import type modeler from 'bpmn-js/lib/Modeler';
+  import type modeling from 'bpmn-js/lib/features/modeling/Modeling';
+  import type canvas from 'diagram-js/lib/core/Canvas';
+  import type elementRegistry from 'diagram-js/lib/core/ElementRegistry';
+  import type bpmnFactory from 'bpmn-js/lib/features/modeling/BpmnFactory';
+
+  export type Modeler = modeler;
+  export type Modeling = modeling;
+  export type Canvas = canvas;
+  export type ElementRegistry = elementRegistry;
+  export type Moddle = import('moddle').Moddle;
+  export type ModdleElement = import('moddle').ModdleElement;
+  export type BpmnFactory = bpmnFactory;
+}
diff --git a/src/types/bpmn/moddle.d.ts b/src/types/bpmn/moddle.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1ed79335f16a568b4ce09f7bc1da9b5503f00034
--- /dev/null
+++ b/src/types/bpmn/moddle.d.ts
@@ -0,0 +1,37 @@
+declare module 'moddle' {
+  import type { Element as element } from 'bpmn-js/lib/model/Types';
+
+  export type Element = {
+    get<T>(name: string): T;
+
+    set(name: string, value: any): void;
+  } & element;
+
+  export interface ModdleElement extends Element {
+    $model: Moddle;
+    readonly $type: string;
+    $attrs: object | {};
+    $parent: any;
+    businessObject: ModdleElement;
+    type: string;
+
+    [field: string]: any;
+
+    hasType(element: ModdleElement, type?: string): boolean;
+  }
+
+  export interface Package {
+    name: string;
+    prefix: string;
+  }
+
+  export interface Moddle {
+    typeCache: Record<string, ModdleElement>;
+
+    getPackage: typeof Registry.prototype.getPackage;
+
+    getPackages: typeof Registry.prototype.getPackages;
+
+    create(type: string, attrs?: any): ModdleElement;
+  }
+}
diff --git a/src/types/bpmn/panel.d.ts b/src/types/bpmn/panel.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..317926173113ca947f2c842c24cfee54a0b1630e
--- /dev/null
+++ b/src/types/bpmn/panel.d.ts
@@ -0,0 +1,92 @@
+declare module 'bpmnDesign' {
+  import { AllocationTypeEnum, SpecifyDescEnum, MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
+
+  export interface ParamVO {
+    type: string;
+    name: string;
+    value: string;
+  }
+
+  export interface TaskListenerVO {
+    event: string;
+    type: string;
+    name: string;
+    className: string;
+    params: ParamVO[];
+  }
+
+  export interface ExecutionListenerVO {
+    event: string;
+    type: string;
+    className: string;
+    params: ParamVO[];
+  }
+
+  interface BasePanel {
+    id: string;
+    name: string;
+  }
+  export interface ProcessPanel extends BasePanel {}
+
+  export interface TaskPanel extends BasePanel {
+    allocationType: AllocationTypeEnum;
+    specifyDesc: SpecifyDescEnum;
+    multiInstanceType: MultiInstanceTypeEnum;
+    async?: boolean;
+    priority?: number;
+    formKey?: string;
+    skipExpression?: string;
+    isForCompensation?: boolean;
+    triggerServiceTask?: boolean;
+    autoStoreVariables?: boolean;
+    ruleVariablesInput?: string;
+    excludeTaskListener?: boolean;
+    exclude?: boolean;
+    class?: string;
+    dueDate?: string;
+    fixedAssignee?: string;
+
+    candidateUsers?: string;
+    assignee?: string;
+    candidateGroups?: string;
+    collection?: string;
+    elementVariable?: string;
+    completionCondition?: string;
+    isSequential?: boolean;
+
+    loopCharacteristics?: {
+      collection: string;
+      elementVariable: string;
+      isSequential: boolean;
+      completionCondition: {
+        body: string;
+      };
+    };
+  }
+
+  export interface StartEndPanel extends BasePanel {}
+  export interface GatewayPanel extends BasePanel {}
+  export interface SequenceFlowPanel extends BasePanel {
+    conditionExpression: {
+      body: string;
+    };
+    conditionExpressionValue: string;
+    skipExpression: string;
+  }
+
+  export interface ParticipantPanel extends BasePanel {}
+  export interface SubProcessPanel extends BasePanel {
+    multiInstanceType: MultiInstanceTypeEnum;
+    collection?: string;
+    elementVariable?: string;
+    completionCondition?: string;
+    loopCharacteristics?: {
+      collection: string;
+      elementVariable: string;
+      isSequential: boolean;
+      completionCondition: {
+        body: string;
+      };
+    };
+  }
+}
diff --git a/src/types/element.d.ts b/src/types/element.d.ts
index ba7598d6d59b001393b664b46c4cf499156ceb38..ae6ecfcde7e7a8d60dc01a3bdd854fe014026745 100644
--- a/src/types/element.d.ts
+++ b/src/types/element.d.ts
@@ -1,34 +1,35 @@
 import type * as ep from 'element-plus';
 declare global {
-  declare type ElTagType = '' | 'success' | 'warning' | 'info' | 'danger' | 'default' | 'primary';
-  declare type ElFormInstance = InstanceType<typeof ep.ElForm>;
-  declare type ElTableInstance = InstanceType<typeof ep.ElTable>;
+  declare type ElTagType = 'primary' | 'success' | 'info' | 'warning' | 'danger';
+  declare type ElFormInstance = ep.FormInstance;
+  declare type ElTableInstance = ep.TableInstance;
+  declare type ElUploadInstance = ep.UploadInstance;
+  declare type ElScrollbarInstance = ep.ScrollbarInstance;
+  declare type ElInputInstance = ep.InputInstance;
+  declare type ElInputNumberInstance = ep.InputNumberInstance;
+  declare type ElRadioInstance = ep.RadioInstance;
+  declare type ElRadioGroupInstance = ep.RadioGroupInstance;
+  declare type ElRadioButtonInstance = ep.RadioButtonInstance;
+  declare type ElCheckboxInstance = ep.CheckboxInstance;
+  declare type ElSwitchInstance = ep.SwitchInstance;
+  declare type ElCascaderInstance = ep.CascaderInstance;
+  declare type ElColorPickerInstance = ep.ColorPickerInstance;
+  declare type ElRateInstance = ep.RateInstance;
+  declare type ElSliderInstance = ep.SliderInstance;
+
   declare type ElTreeInstance = InstanceType<typeof ep.ElTree>;
   declare type ElTreeSelectInstance = InstanceType<typeof ep.ElTreeSelect>;
   declare type ElSelectInstance = InstanceType<typeof ep.ElSelect>;
-  declare type ElUploadInstance = InstanceType<typeof ep.ElUpload>;
   declare type ElCardInstance = InstanceType<typeof ep.ElCard>;
   declare type ElDialogInstance = InstanceType<typeof ep.ElDialog>;
-  declare type ElInputInstance = InstanceType<typeof ep.ElInput>;
-  declare type ElInputNumberInstance = InstanceType<typeof ep.ElInputNumber>;
-  declare type ElRadioInstance = InstanceType<typeof ep.ElRadio>;
-  declare type ElRadioGroupInstance = InstanceType<typeof ep.ElRadioGroup>;
-  declare type ElRadioButtonInstance = InstanceType<typeof ep.ElRadioButton>;
-  declare type ElCheckboxInstance = InstanceType<typeof ep.ElCheckbox>;
   declare type ElCheckboxGroupInstance = InstanceType<typeof ep.ElCheckboxGroup>;
-  declare type ElSwitchInstance = InstanceType<typeof ep.ElSwitch>;
   declare type ElDatePickerInstance = InstanceType<typeof ep.ElDatePicker>;
   declare type ElTimePickerInstance = InstanceType<typeof ep.ElTimePicker>;
   declare type ElTimeSelectInstance = InstanceType<typeof ep.ElTimeSelect>;
-  declare type ElCascaderInstance = InstanceType<typeof ep.ElCascader>;
-  declare type ElColorPickerInstance = InstanceType<typeof ep.ElColorPicker>;
-  declare type ElRateInstance = InstanceType<typeof ep.ElRate>;
-  declare type ElSliderInstance = InstanceType<typeof ep.ElSlider>;
-  declare type ElScrollbarInstance = InstanceType<typeof ep.ElScrollbar>;
 
   declare type TransferKey = ep.TransferKey;
   declare type CheckboxValueType = ep.CheckboxValueType;
   declare type ElFormRules = ep.FormRules;
   declare type DateModelType = ep.DateModelType;
-  declare type UploadFile = typeof ep.UploadFile;
+  declare type UploadFile = ep.UploadFile;
 }
diff --git a/src/types/env.d.ts b/src/types/env.d.ts
index 9560307a774be254e93b94e1d55e2e2ded0c487b..bfc37ccfc39c1c21a2fe4e93a24c96d0b074954e 100644
--- a/src/types/env.d.ts
+++ b/src/types/env.d.ts
@@ -1,62 +1,9 @@
 declare module '*.vue' {
   import { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
-declare module '*.avif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.bmp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.gif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpeg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.webp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.svg' {
-  const src: string;
-  export default src;
+  const Component: DefineComponent<{}, {}, any>;
+  export default Component;
 }
 
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.scss' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.sass' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
 // 环境变量
 interface ImportMetaEnv {
   VITE_APP_TITLE: string;
@@ -66,7 +13,9 @@ interface ImportMetaEnv {
   VITE_APP_CONTEXT_PATH: string;
   VITE_APP_MONITRO_ADMIN: string;
   VITE_APP_POWERJOB_ADMIN: string;
+  VITE_APP_EASYRETRY_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;
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 32081bf6810c1b0f0969f6c47407269fbd72cf09..17476a39be7ccbb201e1379f0c8cba6d88b019bc 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,4 +1,5 @@
-import type { ComponentInternalInstance as ComponentInstance, PropType as VuePropType } from 'vue';
+import type { PropType as VuePropType, ComponentInternalInstance as ComponentInstance } from 'vue';
+import { LanguageEnum } from '@/enums/LanguageEnum';
 
 declare global {
   /** vue Instance */
@@ -49,6 +50,8 @@ declare global {
     /** 是否禁用上传 */
     isUploading: boolean;
 
+    updateSupport: number;
+
     /** 其他参数 */
     [key: string]: any;
   }
@@ -87,5 +90,77 @@ declare global {
     pageNum: number;
     pageSize: number;
   }
+  declare interface LayoutSetting {
+    /**
+     * 是否显示顶部导航
+     */
+    topNav: boolean;
+
+    /**
+     * 是否显示多标签导航
+     */
+    tagsView: boolean;
+    /**
+     * 是否固定头部
+     */
+    fixedHeader: boolean;
+    /**
+     * 是否显示侧边栏Logo
+     */
+    sidebarLogo: boolean;
+    /**
+     * 是否显示动态标题
+     */
+    dynamicTitle: boolean;
+    /**
+     * 侧边栏主题 theme-dark | theme-light
+     */
+    sideTheme: string;
+    /**
+     * 主题模式
+     */
+    theme: string;
+  }
+
+  declare interface DefaultSettings extends LayoutSetting {
+    /**
+     * 网页标题
+     */
+    title: string;
+
+    /**
+     * 是否显示系统布局设置
+     */
+    showSettings: boolean;
+
+    /**
+     * 导航栏布局
+     */
+    layout: string;
+
+    /**
+     * 布局大小
+     */
+    size: 'large' | 'default' | 'small';
+
+    /**
+     * 语言
+     */
+    language: LanguageEnum;
+
+    /**
+     * 是否启用动画效果
+     */
+    animationEnable: boolean;
+    /**
+     *  是否启用暗黑模式
+     *
+     * true:暗黑模式
+     * false: 明亮模式
+     */
+    dark: boolean;
+
+    errorLog: string;
+  }
 }
 export {};
diff --git a/src/types/module.d.ts b/src/types/module.d.ts
index 987c349330fbf2da68f3c7d99f23e19ae4ee150e..984df9fc4e5c4da4ed61405f308d26412a6b8564 100644
--- a/src/types/module.d.ts
+++ b/src/types/module.d.ts
@@ -1,15 +1,17 @@
-import type modal from '@/plugins/modal';
-import type tab from '@/plugins/tab';
-import type download from '@/plugins/download';
-import type auth from '@/plugins/auth';
-import type cache from '@/plugins/cache';
-import type animate from '@/animate';
-import type { useDict } from '@/utils/dict';
-import type { addDateRange, handleTree, selectDictLabel, selectDictLabels, parseTime } from '@/utils/ruoyi';
-import type { getConfigKey, updateConfigByKey } from '@/api/system/config';
-import type { download as rd } from '@/utils/request';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+import download from '@/plugins/download';
+import auth from '@/plugins/auth';
+import cache from '@/plugins/cache';
+import animate from '@/animate';
+import { useDict } from '@/utils/dict';
+import { handleTree, addDateRange, selectDictLabel, selectDictLabels, parseTime } from '@/utils/ruoyi';
+import { getConfigKey, updateConfigByKey } from '@/api/system/config';
+import { download as rd } from '@/utils/request';
 
-declare module '@vue/runtime-core' {
+export {};
+
+declare module 'vue' {
   interface ComponentCustomProperties {
     // 全局方法声明
     $modal: typeof modal;
@@ -30,3 +32,8 @@ declare module '@vue/runtime-core' {
     parseTime: typeof parseTime;
   }
 }
+
+declare module 'vform3-builds' {
+  const content: any;
+  export = content;
+}
diff --git a/src/types/router.d.ts b/src/types/router.d.ts
index 9731fa2092ec71050df72608b53f9d3481663fbd..11a60a054686a8c1d541953689f8217c9b14fb3e 100644
--- a/src/types/router.d.ts
+++ b/src/types/router.d.ts
@@ -1,36 +1,38 @@
-import { RouteRecordRaw } from 'vue-router';
-
+import { LocationQuery, type RouteMeta as VRouteMeta } from 'vue-router';
 declare module 'vue-router' {
-  declare type RouteOption = {
-    hidden?: boolean;
+  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[];
-    component?: any;
-    children?: RouteOption[];
     alwaysShow?: boolean;
-    parentPath?: string;
-    meta?: {
-      title: string;
-      icon: string;
-    };
     query?: string;
-  } & RouteRecordRaw;
-
-  declare interface _RouteLocationBase {
-    children?: RouteOption[];
+    parentPath?: string;
   }
 
-  declare interface RouteLocationOptions {
-    fullPath?: string;
+  interface _RouteLocationBase {
+    children?: _RouteRecordBase[];
+    path?: string;
+    title?: string;
   }
 
-  declare interface TagView extends Partial<_RouteLocationBase> {
+  interface TagView {
+    fullPath?: string;
+    name?: string;
+    path?: string;
     title?: string;
-    meta?: {
-      link?: string;
-      title?: string;
-      affix?: boolean;
-      noCache?: boolean;
-    };
+    meta?: RouteMeta;
+    query?: LocationQuery;
   }
 }
+
+export {};
diff --git a/src/types/setting.d.ts b/src/types/setting.d.ts
deleted file mode 100644
index 1b5f9fd59de5c43d37e7ecfb13a1438a52284a8b..0000000000000000000000000000000000000000
--- a/src/types/setting.d.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-declare type DefaultSettings = {
-  /**
-   * 网页标题
-   */
-  title?: string;
-
-  /**
-   * 侧边栏主题 theme-dark | theme-light
-   */
-  sideTheme?: string;
-
-  /**
-   * 是否显示系统布局设置
-   */
-  showSettings?: boolean;
-
-  /**
-   * 是否显示顶部导航
-   */
-  topNav?: boolean;
-
-  /**
-   * 是否显示多标签导航
-   */
-  tagsView?: boolean;
-  /**
-   * 是否固定头部
-   */
-  fixedHeader?: boolean;
-  /**
-   * 是否显示侧边栏Logo
-   */
-  sidebarLogo?: boolean;
-  /**
-   * 导航栏布局
-   */
-  layout?: string;
-  /**
-   * 主题模式
-   */
-  theme?: string;
-
-  /**
-   * 布局大小
-   */
-  size?: string;
-
-  /**
-   * 语言
-   */
-  language?: string;
-
-  /**
-   * 是否显示动态标题
-   */
-  dynamicTitle?: boolean;
-  /**
-   * 是否启用动画效果
-   */
-  animationEnable?: boolean;
-  /**
-   *  是否启用暗黑模式
-   *
-   * true:暗黑模式
-   * false: 明亮模式
-   */
-  dark?: boolean;
-
-  errorLog?: string;
-};
diff --git a/src/types/vform3-builds.d.ts b/src/types/vform3-builds.d.ts
deleted file mode 100644
index 82573de596eed537e2b11319170f261a92690bcf..0000000000000000000000000000000000000000
--- a/src/types/vform3-builds.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module 'vform3-builds' {
-  const content: any;
-  export = content;
-}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index f4744626ec5f32763909645f47198bf2b2110a4c..2b0aad5fac4d72d7c7698fc6ab08a20f187bbfe1 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -89,7 +89,7 @@ export const byteLength = (str: string) => {
  * @returns {Array}
  */
 export const cleanArray = (actual: Array<any>) => {
-  const newArray = [];
+  const newArray: any[] = [];
   for (let i = 0; i < actual.length; i++) {
     if (actual[i]) {
       newArray.push(actual[i]);
diff --git a/src/utils/propTypes.ts b/src/utils/propTypes.ts
index 184704053551f8e64e16343fb1a19e5de8758ac4..24d861dc9a1de5489e52ce61641b927ed669f216 100644
--- a/src/utils/propTypes.ts
+++ b/src/utils/propTypes.ts
@@ -3,6 +3,7 @@ import VueTypes, { createTypes, toValidableType, VueTypeValidableDef, VueTypesIn
 
 type PropTypes = VueTypesInterface & {
   readonly style: VueTypeValidableDef<CSSProperties>;
+  readonly fieldOption: VueTypeValidableDef<Array<FieldOption>>;
 };
 
 const propTypes = createTypes({
diff --git a/src/utils/request.ts b/src/utils/request.ts
index a183ca63a8d1100e28f91fc81b6175832ed3d180..f2a69f0fe9de18cbbce90d8309e54f89d104547c 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -36,11 +36,12 @@ service.interceptors.request.use(
     // 对应国际化资源文件后缀
     config.headers['Content-Language'] = getLanguage();
 
-    const isToken = (config.headers || {}).isToken === false;
+    const isToken = config.headers?.isToken === false;
     // 是否需要防止数据重复提交
-    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;
+    const isRepeatSubmit = config.headers?.repeatSubmit === false;
     // 是否需要加密
-    const isEncrypt = (config.headers || {}).isEncrypt === 'true';
+    const isEncrypt = config.headers?.isEncrypt === 'true';
+
     if (getToken() && !isToken) {
       config.headers['Authorization'] = 'Bearer ' + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
     }
@@ -75,12 +76,14 @@ service.interceptors.request.use(
         }
       }
     }
-    // 当开启参数加密
-    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);
+    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) {
@@ -89,7 +92,6 @@ service.interceptors.request.use(
     return config;
   },
   (error: any) => {
-    console.log(error);
     return Promise.reject(error);
   }
 );
@@ -97,19 +99,21 @@ service.interceptors.request.use(
 // 响应拦截器
 service.interceptors.response.use(
   (res: AxiosResponse) => {
-    // 加密后的 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);
+    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;
@@ -138,7 +142,6 @@ service.interceptors.response.use(
       }
       return Promise.reject('无效的会话，或者会话已过期，请重新登录。');
     } else if (code === HttpStatus.SERVER_ERROR) {
-      console.log(msg);
       ElMessage({ message: msg, type: 'error' });
       return Promise.reject(new Error(msg));
     } else if (code === HttpStatus.WARN) {
diff --git a/src/utils/ruoyi.ts b/src/utils/ruoyi.ts
index a116b52727845574c068224fa4bd5e395dd5b13c..8efd12c5c294d924f69d3a3b6639cf8758aa7695 100644
--- a/src/utils/ruoyi.ts
+++ b/src/utils/ruoyi.ts
@@ -68,7 +68,7 @@ export const selectDictLabel = (datas: any, value: number | string) => {
   if (value === undefined) {
     return '';
   }
-  const actions = [];
+  const actions: Array<string | number> = [];
   Object.keys(datas).some((key) => {
     if (datas[key].value == '' + value) {
       actions.push(datas[key].label);
@@ -245,3 +245,7 @@ export const getNormalPath = (p: string): string => {
 export const blobValidate = (data: any) => {
   return data.type !== 'application/json';
 };
+
+export default {
+  handleTree
+};
diff --git a/src/utils/websocket.ts b/src/utils/websocket.ts
index a4529f9c895eb530d4ff8182876206cd5a4af77d..d4dd8a87649d32f9c38ba535ce47ff09a213bf22 100644
--- a/src/utils/websocket.ts
+++ b/src/utils/websocket.ts
@@ -19,10 +19,8 @@
  */
 
 import { getToken } from '@/utils/auth';
+import { ElNotification } from 'element-plus';
 import useNoticeStore from '@/store/modules/notice';
-import { ElNotification } from "element-plus";
-
-const { addNotice } = useNoticeStore();
 
 let socketUrl: any = ''; // socket地址
 let websocket: any = null; // websocket 实例
@@ -125,7 +123,7 @@ export const websocketonmessage = () => {
     if (e.data.indexOf('ping') > 0) {
       return;
     }
-    addNotice({
+    useNoticeStore().addNotice({
       message: e.data,
       read: false,
       time: new Date().toLocaleString()
@@ -135,7 +133,7 @@ export const websocketonmessage = () => {
       message: e.data,
       type: 'success',
       duration: 3000
-    })
+    });
     return e.data;
   };
 };
diff --git a/src/views/demo/demo/index.vue b/src/views/demo/demo/index.vue
index a7f3bd76e0d04e02058a1ea07b9f2d0d1c714ce2..523deff2066da6817a14141c49af56b258b376f5 100644
--- a/src/views/demo/demo/index.vue
+++ b/src/views/demo/demo/index.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="部门id" prop="deptId">
-              <el-input v-model="queryParams.deptId" placeholder="请输入部门id" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.deptId" placeholder="请输入部门id" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="用户id" prop="userId">
-              <el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="排序号" prop="orderNum">
-              <el-input v-model="queryParams.orderNum" placeholder="请输入排序号" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.orderNum" placeholder="请输入排序号" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="key键" prop="testKey">
-              <el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <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 style="width: 240px" @keyup.enter="handleQuery" />
+              <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>
@@ -32,26 +32,26 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['demo:demo:add']">新增</el-button>
+            <el-button v-hasPermi="['demo:demo:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['demo:demo:edit']">修改</el-button>
+            <el-button v-hasPermi="['demo:demo:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['demo:demo:remove']"
+            <el-button v-hasPermi="['demo:demo:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
               >删除</el-button
             >
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['demo:demo:export']">导出</el-button>
+            <el-button v-hasPermi="['demo:demo:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" :data="demoList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="主键" align="center" prop="id" v-if="true" />
+        <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" />
@@ -60,19 +60,19 @@
         <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="['demo:demo:edit']"></el-button>
+              <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 link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['demo:demo:remove']"></el-button>
+              <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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改测试单对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <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" />
@@ -129,8 +129,8 @@ const initFormData: DemoForm = {
   userId: undefined,
   orderNum: undefined,
   testKey: undefined,
-  value: undefined,
-}
+  value: undefined
+};
 const data = reactive<PageData<DemoForm, DemoQuery>>({
   form: { ...initFormData },
   queryParams: {
@@ -140,27 +140,15 @@ const data = reactive<PageData<DemoForm, DemoQuery>>({
     userId: undefined,
     orderNum: undefined,
     testKey: undefined,
-    value: 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" }
-    ],
+    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' }]
   }
 });
 
@@ -173,55 +161,55 @@ const getList = async () => {
   demoList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 
 /** 取消按钮 */
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
 
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   demoFormRef.value?.resetFields();
-}
+};
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: DemoVO[]) => {
-  ids.value = selection.map(item => item.id);
+  ids.value = selection.map((item) => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = "添加测试单";
-}
+  dialog.title = '添加测试单';
+};
 
 /** 修改按钮操作 */
 const handleUpdate = async (row?: DemoVO) => {
   reset();
-  const _id = row?.id || ids.value[0]
+  const _id = row?.id || ids.value[0];
   const res = await getDemo(_id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改测试单";
-}
+  dialog.title = '修改测试单';
+};
 
 /** 提交按钮 */
 const submitForm = () => {
@@ -229,32 +217,36 @@ const submitForm = () => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.id) {
-        await updateDemo(form.value).finally(() => buttonLoading.value = false);
+        await updateDemo(form.value).finally(() => (buttonLoading.value = false));
       } else {
-        await addDemo(form.value).finally(() => buttonLoading.value = false);
+        await addDemo(form.value).finally(() => (buttonLoading.value = false));
       }
-      proxy?.$modal.msgSuccess("修改成功");
+      proxy?.$modal.msgSuccess('修改成功');
       dialog.visible = false;
       await getList();
     }
   });
-}
+};
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: DemoVO) => {
   const _ids = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除测试单编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
+  await proxy?.$modal.confirm('是否确认删除测试单编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
   await delDemo(_ids);
-  proxy?.$modal.msgSuccess("删除成功");
+  proxy?.$modal.msgSuccess('删除成功');
   await getList();
-}
+};
 
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download('demo/demo/export', {
-    ...queryParams.value
-  }, `demo_${new Date().getTime()}.xlsx`)
-}
+  proxy?.download(
+    'demo/demo/export',
+    {
+      ...queryParams.value
+    },
+    `demo_${new Date().getTime()}.xlsx`
+  );
+};
 
 onMounted(() => {
   getList();
diff --git a/src/views/demo/tree/index.vue b/src/views/demo/tree/index.vue
index d79f8177f6d19be3eb0de9cdd2c2942e46bab2e5..921ddd92d882eb087f7e4a536ec4e8ffcae02a8b 100644
--- a/src/views/demo/tree/index.vue
+++ b/src/views/demo/tree/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="树节点名" prop="treeName">
-              <el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <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>
@@ -20,21 +20,21 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['demo:tree:add']">新增</el-button>
+            <el-button v-hasPermi="['demo:tree:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
       <el-table
+        ref="treeTableRef"
         v-loading="loading"
         :data="treeList"
         row-key="id"
         :default-expand-all="isExpandAll"
-        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-        ref="treeTableRef"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
         <el-table-column label="父id" align="center" prop="parentId" />
         <el-table-column label="部门id" align="center" prop="deptId" />
@@ -43,20 +43,20 @@
         <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="['demo:tree:edit']" />
+              <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 link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['demo:tree:add']" />
+              <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 link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['demo:tree:remove']" />
+              <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 :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <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
@@ -89,18 +89,16 @@
 </template>
 
 <script setup name="Tree" lang="ts">
-import { listTree, getTree, delTree, addTree, updateTree } from "@/api/demo/tree";
+import { listTree, getTree, delTree, addTree, updateTree } from '@/api/demo/tree';
 import { TreeVO, TreeQuery, TreeForm } from '@/api/demo/tree/types';
 
-
 type TreeOption = {
   id: number;
   treeName: string;
   children?: TreeOption[];
-}
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;;
+};
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const treeList = ref<TreeVO[]>([]);
 const treeOptions = ref<TreeOption[]>([]);
@@ -111,46 +109,35 @@ const loading = ref(false);
 
 const queryFormRef = ref<ElFormInstance>();
 const treeFormRef = ref<ElFormInstance>();
-const treeTableRef = ref<ElTableInstance>()
+const treeTableRef = ref<ElTableInstance>();
 
 const dialog = reactive<DialogOption>({
-    visible: false,
-    title: ''
+  visible: false,
+  title: ''
 });
 
-
 const initFormData: TreeForm = {
-    id: undefined,
-    parentId: undefined,
-    deptId: undefined,
-    userId: undefined,
-    treeName: undefined,
-}
+  id: undefined,
+  parentId: undefined,
+  deptId: undefined,
+  userId: undefined,
+  treeName: undefined
+};
 
 const data = reactive<PageData<TreeForm, TreeQuery>>({
-  form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     parentId: undefined,
     deptId: undefined,
     userId: undefined,
-    treeName: 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" }
-    ],
+    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' }]
   }
 });
 
@@ -160,44 +147,44 @@ const { queryParams, form, rules } = toRefs(data);
 const getList = async () => {
   loading.value = true;
   const res = await listTree(queryParams.value);
-  const data = proxy?.handleTree<TreeVO>(res.data, "id", "parentId");
+  const data = proxy?.handleTree<TreeVO>(res.data, 'id', 'parentId');
   if (data) {
     treeList.value = data;
     loading.value = false;
   }
-}
+};
 
 /** 查询测试树下拉树结构 */
 const getTreeselect = async () => {
   const res = await listTree();
   treeOptions.value = [];
   const data: TreeOption = { id: 0, treeName: '顶级节点', children: [] };
-  data.children = proxy?.handleTree<TreeOption>(res.data, "id", "parentId");
+  data.children = proxy?.handleTree<TreeOption>(res.data, 'id', 'parentId');
   treeOptions.value.push(data);
-}
+};
 
 // 取消按钮
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
 
 // 表单重置
 const reset = () => {
-  form.value = {...initFormData}
+  form.value = { ...initFormData };
   treeFormRef.value?.resetFields();
-}
+};
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   getList();
-}
+};
 
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 
 /** 新增按钮操作 */
 const handleAdd = (row?: TreeVO) => {
@@ -209,22 +196,22 @@ const handleAdd = (row?: TreeVO) => {
     form.value.parentId = 0;
   }
   dialog.visible = true;
-  dialog.title = "添加测试树";
-}
+  dialog.title = '添加测试树';
+};
 
 /** 展开/折叠操作 */
 const handleToggleExpandAll = () => {
   isExpandAll.value = !isExpandAll.value;
-  toggleExpandAll(treeList.value, isExpandAll.value)
-}
+  toggleExpandAll(treeList.value, isExpandAll.value);
+};
 
 /** 展开/折叠操作 */
 const toggleExpandAll = (data: TreeVO[], status: boolean) => {
   data.forEach((item) => {
-    treeTableRef.value?.toggleRowExpansion(item, status)
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
-  })
-}
+    treeTableRef.value?.toggleRowExpansion(item, status);
+    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
+  });
+};
 
 /** 修改按钮操作 */
 const handleUpdate = async (row: TreeVO) => {
@@ -236,8 +223,8 @@ const handleUpdate = async (row: TreeVO) => {
   const res = await getTree(row.id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改测试树";
-}
+  dialog.title = '修改测试树';
+};
 
 /** 提交按钮 */
 const submitForm = () => {
@@ -245,25 +232,25 @@ const submitForm = () => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.id) {
-        await updateTree(form.value).finally(() => buttonLoading.value = false);
+        await updateTree(form.value).finally(() => (buttonLoading.value = false));
       } else {
-        await addTree(form.value).finally(() => buttonLoading.value = false);
+        await addTree(form.value).finally(() => (buttonLoading.value = false));
       }
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
   });
-}
+};
 
 /** 删除按钮操作 */
 const handleDelete = async (row: TreeVO) => {
   await proxy?.$modal.confirm('是否确认删除测试树编号为"' + row.id + '"的数据项？');
   loading.value = true;
-  await delTree(row.id).finally(() => loading.value = false);
+  await delTree(row.id).finally(() => (loading.value = false));
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
-}
+  proxy?.$modal.msgSuccess('删除成功');
+};
 
 onMounted(() => {
   getList();
diff --git a/src/views/error/401.vue b/src/views/error/401.vue
index 1d9c76e684239593ff43ec9f8d18e88e6d1ceb13..968550c76d3283f5ad24f125ef64e29eba44f42a 100644
--- a/src/views/error/401.vue
+++ b/src/views/error/401.vue
@@ -24,11 +24,11 @@ import errImage from '@/assets/401_images/401.gif';
 
 let { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-const errGif = ref(errImage + "?" + +new Date());
+const errGif = ref(errImage + '?' + +new Date());
 
 function back() {
   if (proxy?.$route.query.noGoBack) {
-    proxy.$router.push({ path: "/" });
+    proxy.$router.push({ path: '/' });
   } else {
     proxy?.$router.go(-1);
   }
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
index 94ed936de456a0e97a203921ae20d87ababd042f..b9a9ea3ceb379893352ae59a0cb60f4072190128 100644
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@@ -23,13 +23,13 @@
 
 <script setup lang="ts">
 let message = computed(() => {
-  return '找不到网页！'
-})
+  return '找不到网页！';
+});
 </script>
 
 <style lang="scss" scoped>
-.wscn-http404-container{
-  transform: translate(-50%,-50%);
+.wscn-http404-container {
+  transform: translate(-50%, -50%);
   position: absolute;
   top: 40%;
   left: 50%;
diff --git a/src/views/index.vue b/src/views/index.vue
index 12d764b5bcef2bb39da729c7f64762936303ea29..249a41b648a61c7ada58c57a93947d26c64caa4d 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -21,7 +21,7 @@
           * 分布式锁 Lock4j 注解锁、工具锁 多种多样<br />
           * 分布式幂等 Lock4j 基于分布式锁实现<br />
           * 分布式链路追踪 SkyWalking 支持链路追踪、网格分析、度量聚合、可视化<br />
-          * 分布式任务调度 PowerJob 高性能 高可靠 易扩展<br />
+          * 分布式任务调度 SnailJob 高性能 高可靠 易扩展<br />
           * 文件存储 Minio 本地存储<br />
           * 文件存储 七牛、阿里、腾讯 云存储<br />
           * 监控框架 SpringBoot-Admin 全方位服务监控<br />
@@ -33,7 +33,7 @@
           * 部署方式 Docker 容器编排 一键部署业务集群<br />
           * 国际化 SpringMessage Spring标准国际化方案<br />
         </p>
-        <p><b>当前版本:</b> <span>v5.1.2</span></p>
+        <p><b>当前版本:</b> <span>v5.2.0-BETA</span></p>
         <p>
           <el-tag type="danger">&yen;免费开源</el-tag>
         </p>
@@ -78,7 +78,7 @@
           * 分布式监控 Prometheus、Grafana 全方位性能监控<br />
           * 其余与 Vue 版本一致<br />
         </p>
-        <p><b>当前版本:</b> <span>v2.1.2</span></p>
+        <p><b>当前版本:</b> <span>v2.2.0-BETA</span></p>
         <p>
           <el-tag type="danger">&yen;免费开源</el-tag>
         </p>
@@ -96,16 +96,9 @@
 </template>
 
 <script setup name="Index" lang="ts">
-import { initWebSocket } from '@/utils/websocket';
-
-onMounted(() => {
-  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
-  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
-});
-
-const goTarget = (url:string) => {
-  window.open(url, '__blank')
-}
+const goTarget = (url: string) => {
+  window.open(url, '__blank');
+};
 </script>
 
 <style scoped lang="scss">
@@ -131,7 +124,7 @@ const goTarget = (url:string) => {
     margin: 0;
   }
 
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 13px;
   color: #676a6c;
   overflow-x: hidden;
diff --git a/src/views/login.vue b/src/views/login.vue
index e5c73fafe72988167fc06c96d6da95cc123859e8..7e1394e9c2c3a744df9a03368dd67417c8ea3287 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -2,7 +2,7 @@
   <div class="login">
     <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
       <h3 class="title">RuoYi-Vue-Plus多租户管理系统</h3>
-      <el-form-item prop="tenantId" v-if="tenantEnabled">
+      <el-form-item v-if="tenantEnabled" prop="tenantId">
         <el-select v-model="loginForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%">
           <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
           <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
@@ -18,22 +18,25 @@
           <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
         </el-input>
       </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
+      <el-form-item v-if="captchaEnabled" prop="code">
         <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @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" @click="getCode" class="login-code-img" />
+          <img :src="codeUrl" class="login-code-img" @click="getCode" />
         </div>
       </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="float: right;">
+      <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">记住密码</el-checkbox>
+      <el-form-item style="float: right">
         <el-button circle title="微信登录" @click="doSocialLogin('wechat')">
           <svg-icon icon-class="wechat" />
         </el-button>
         <el-button circle title="MaxKey登录" @click="doSocialLogin('maxkey')">
           <svg-icon icon-class="maxkey" />
         </el-button>
+        <el-button circle title="TopIam登录" @click="doSocialLogin('topiam')">
+          <svg-icon icon-class="topiam" />
+        </el-button>
         <el-button circle title="Gitee登录" @click="doSocialLogin('gitee')">
           <svg-icon icon-class="gitee" />
         </el-button>
@@ -41,19 +44,19 @@
           <svg-icon icon-class="github" />
         </el-button>
       </el-form-item>
-      <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
+      <el-form-item style="width: 100%">
+        <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right;" v-if="register">
+        <div v-if="register" style="float: right">
           <router-link class="link-type" :to="'/register'">立即注册</router-link>
         </div>
       </el-form-item>
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2018-2023 疯狂的狮子Li All Rights Reserved.</span>
+      <span>Copyright © 2018-2024 疯狂的狮子Li All Rights Reserved.</span>
     </div>
   </div>
 </template>
@@ -64,7 +67,7 @@ import { authBinding } from '@/api/system/social/auth';
 import { useUserStore } from '@/store/modules/user';
 import { LoginData, TenantVO } from '@/api/types';
 import { to } from 'await-to-js';
-import { HttpStatus } from "@/enums/RespEnum";
+import { HttpStatus } from '@/enums/RespEnum';
 
 const userStore = useUserStore();
 const router = useRouter();
@@ -79,7 +82,7 @@ const loginForm = ref<LoginData>({
 } as LoginData);
 
 const loginRules: ElFormRules = {
-  tenantId: [{ required: true, trigger: "blur", message: "请输入您的租户编号" }],
+  tenantId: [{ required: true, trigger: 'blur', message: '请输入您的租户编号' }],
   username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
   password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
   code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
@@ -92,7 +95,6 @@ const captchaEnabled = ref(true);
 // 租户开关
 const tenantEnabled = ref(true);
 
-
 // 注册开关
 const register = ref(false);
 const redirect = ref(undefined);
@@ -100,9 +102,13 @@ const loginRef = ref<ElFormInstance>();
 // 租户列表
 const tenantList = ref<TenantVO[]>([]);
 
-watch(() => router.currentRoute.value, (newRoute: any) => {
-  redirect.value = newRoute.query && newRoute.query.redirect;
-}, { immediate: true });
+watch(
+  () => router.currentRoute.value,
+  (newRoute: any) => {
+    redirect.value = newRoute.query && newRoute.query.redirect;
+  },
+  { immediate: true }
+);
 
 const handleLogin = () => {
   loginRef.value?.validate(async (valid: boolean, fields: any) => {
@@ -110,13 +116,13 @@ const handleLogin = () => {
       loading.value = true;
       // 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码
       if (loginForm.value.rememberMe) {
-        localStorage.setItem("tenantId", String(loginForm.value.tenantId));
+        localStorage.setItem('tenantId', String(loginForm.value.tenantId));
         localStorage.setItem('username', String(loginForm.value.username));
         localStorage.setItem('password', String(loginForm.value.password));
         localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
       } else {
         // 否则移除
-        localStorage.removeItem("tenantId");
+        localStorage.removeItem('tenantId');
         localStorage.removeItem('username');
         localStorage.removeItem('password');
         localStorage.removeItem('rememberMe');
@@ -124,7 +130,8 @@ const handleLogin = () => {
       // 调用action的登录方法
       const [err] = await to(userStore.login(loginForm.value));
       if (!err) {
-        await router.push({ path: redirect.value || '/' });
+        const redirectUrl = redirect.value || '/';
+        await router.push(redirectUrl);
         loading.value = false;
       } else {
         loading.value = false;
@@ -153,7 +160,7 @@ const getCode = async () => {
 };
 
 const getLoginData = () => {
-  const tenantId = localStorage.getItem("tenantId");
+  const tenantId = localStorage.getItem('tenantId');
   const username = localStorage.getItem('username');
   const password = localStorage.getItem('password');
   const rememberMe = localStorage.getItem('rememberMe');
@@ -163,8 +170,7 @@ const getLoginData = () => {
     password: password === null ? String(loginForm.value.password) : String(password),
     rememberMe: rememberMe === null ? false : Boolean(rememberMe)
   } as LoginData;
-}
-
+};
 
 /**
  * 获取租户列表
@@ -178,12 +184,15 @@ const initTenantList = async () => {
       loginForm.value.tenantId = tenantList.value[0].tenantId;
     }
   }
-}
+};
 
 //检测租户选择框的变化
-watch(() => loginForm.value.tenantId, () => {
-  localStorage.setItem("tenantId", String(loginForm.value.tenantId))
-});
+watch(
+  () => loginForm.value.tenantId,
+  () => {
+    localStorage.setItem('tenantId', String(loginForm.value.tenantId));
+  }
+);
 
 /**
  * 第三方登录
@@ -200,8 +209,6 @@ const doSocialLogin = (type: string) => {
   });
 };
 
-
-
 onMounted(() => {
   getCode();
   initTenantList();
@@ -215,7 +222,7 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url('../assets/images/login-background.jpg');
   background-size: cover;
 }
 
diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
index 8719c9413309fd8e47d1da4060860673114dc448..81bbf2de30f45a51542c091d6dd40708a55598cd 100644
--- a/src/views/monitor/cache/index.vue
+++ b/src/views/monitor/cache/index.vue
@@ -4,8 +4,8 @@
       <el-col :span="24" class="card-box">
         <el-card shadow="hover">
           <template #header>
-            <Monitor style="width: 1em; height: 1em; vertical-align: middle;" />
-            <span style="vertical-align: middle;">基本信息</span>
+            <Monitor style="width: 1em; height: 1em; vertical-align: middle" />
+            <span style="vertical-align: middle">基本信息</span>
           </template>
 
           <div class="el-table el-table--enable-row-hover el-table--medium">
@@ -16,25 +16,25 @@
                     <div class="cell">Redis版本</div>
                   </td>
                   <td class="el-table__cell is-leaf">
-                    <div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div>
+                    <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 class="cell" v-if="cache.info">{{ cache.info.redis_mode === "standalone" ? "单机" : "集群" }}</div>
+                    <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 class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div>
+                    <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 class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div>
+                    <div v-if="cache.info" class="cell">{{ cache.info.connected_clients }}</div>
                   </td>
                 </tr>
                 <tr>
@@ -42,25 +42,25 @@
                     <div class="cell">运行时间(天)</div>
                   </td>
                   <td class="el-table__cell is-leaf">
-                    <div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div>
+                    <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 class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div>
+                    <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 class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div>
+                    <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 class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div>
+                    <div v-if="cache.info" class="cell">{{ cache.info.maxmemory_human }}</div>
                   </td>
                 </tr>
                 <tr>
@@ -68,25 +68,25 @@
                     <div class="cell">AOF是否开启</div>
                   </td>
                   <td class="el-table__cell is-leaf">
-                    <div class="cell" v-if="cache.info">{{ cache.info.aof_enabled === "0" ? "否" : "是" }}</div>
+                    <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 class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div>
+                    <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 class="cell" v-if="cache.dbSize">{{ cache.dbSize }}</div>
+                    <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 class="cell" v-if="cache.info">
+                    <div v-if="cache.info" class="cell">
                       {{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps
                     </div>
                   </td>
@@ -100,8 +100,8 @@
       <el-col :span="12" class="card-box">
         <el-card shadow="hover">
           <template #header>
-            <PieChart style="width: 1em; height: 1em; vertical-align: middle;" />
-            <span style="vertical-align: middle;">命令统计</span>
+            <PieChart style="width: 1em; height: 1em; vertical-align: middle" />
+            <span style="vertical-align: middle">命令统计</span>
           </template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
             <div ref="commandstats" style="height: 420px" />
@@ -112,7 +112,7 @@
       <el-col :span="12" class="card-box">
         <el-card shadow="hover">
           <template #header>
-            <Odometer style="width: 1em; height: 1em; vertical-align: middle;" /> <span style="vertical-align: middle;">内存信息</span>
+            <Odometer style="width: 1em; height: 1em; vertical-align: middle" /> <span style="vertical-align: middle">内存信息</span>
           </template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
             <div ref="usedmemory" style="height: 420px" />
@@ -126,45 +126,46 @@
 <script setup name="Cache" lang="ts">
 import { getCache } from '@/api/monitor/cache';
 import * as echarts from 'echarts';
+import { CacheVO } from '@/api/monitor/cache/types';
 
-const cache = ref<any>({});
+const cache = ref<Partial<CacheVO>>({});
 const commandstats = ref();
 const usedmemory = ref();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const getList = async () => {
-  proxy?.$modal.loading("正在加载缓存监控数据，请稍候！");
+  proxy?.$modal.loading('正在加载缓存监控数据，请稍候！');
   const res = await getCache();
   proxy?.$modal.closeLoading();
   cache.value = res.data;
-  const commandstatsIntance = echarts.init(commandstats.value, "macarons");
+  const commandstatsIntance = echarts.init(commandstats.value, 'macarons');
   commandstatsIntance.setOption({
     tooltip: {
-      trigger: "item",
-      formatter: "{a} <br/>{b} : {c} ({d}%)"
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)'
     },
     series: [
       {
-        name: "命令",
-        type: "pie",
-        roseType: "radius",
+        name: '命令',
+        type: 'pie',
+        roseType: 'radius',
         radius: [15, 95],
-        center: ["50%", "38%"],
+        center: ['50%', '38%'],
         data: res.data.commandStats,
-        animationEasing: "cubicInOut",
+        animationEasing: 'cubicInOut',
         animationDuration: 1000
       }
     ]
   });
-  const usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
+  const usedmemoryInstance = echarts.init(usedmemory.value, 'macarons');
   usedmemoryInstance.setOption({
     tooltip: {
-      formatter: "{b} <br/>{a} : " + cache.value.info.used_memory_human
+      formatter: '{b} <br/>{a} : ' + cache.value.info.used_memory_human
     },
     series: [
       {
-        name: "峰值",
-        type: "gauge",
+        name: '峰值',
+        type: 'gauge',
         min: 0,
         max: 1000,
         detail: {
@@ -173,19 +174,19 @@ const getList = async () => {
         data: [
           {
             value: parseFloat(cache.value.info.used_memory_human),
-            name: "内存消耗"
+            name: '内存消耗'
           }
         ]
       }
     ]
-  })
-  window.addEventListener("resize",()=>{
-    commandstatsIntance.resize()
-    usedmemoryInstance.resize()
   });
-}
+  window.addEventListener('resize', () => {
+    commandstatsIntance.resize();
+    usedmemoryInstance.resize();
+  });
+};
 
 onMounted(() => {
   getList();
-})
+});
 </script>
diff --git a/src/views/monitor/logininfor/index.vue b/src/views/monitor/logininfor/index.vue
index 067790ede380b86e7b47180068bea5aca192a087..27c0a85f367aca00ca70317418fbb3d30d8ce44c 100644
--- a/src/views/monitor/logininfor/index.vue
+++ b/src/views/monitor/logininfor/index.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="登录地址" prop="ipaddr">
-              <el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 240px;" @keyup.enter="handleQuery" />
+              <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 style="width: 240px;" @keyup.enter="handleQuery" />
+              <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 style="width: 240px">
+              <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>
@@ -39,22 +39,22 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['monitor:logininfor:remove']">
+            <el-button v-hasPermi="['monitor:logininfor:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
+            <el-button v-hasPermi="['monitor:logininfor:remove']" type="danger" plain icon="Delete" @click="handleClean">清空</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Unlock" :disabled="single" @click="handleUnlock" v-hasPermi="['monitor:logininfor:unlock']">
+            <el-button v-hasPermi="['monitor:logininfor:unlock']" type="primary" plain icon="Unlock" :disabled="single" @click="handleUnlock">
               解锁
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['monitor:logininfor:export']">导出</el-button>
+            <el-button v-hasPermi="['monitor:logininfor:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
@@ -62,8 +62,8 @@
         ref="loginInfoTableRef"
         v-loading="loading"
         :data="loginInfoList"
-        @selection-change="handleSelectionChange"
         :default-sort="defaultSort"
+        @selection-change="handleSelectionChange"
         @sort-change="handleSortChange"
       >
         <el-table-column type="selection" width="55" align="center" />
@@ -99,18 +99,18 @@
         </el-table-column>
       </el-table>
 
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <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="Logininfor" lang="ts">
-import { list, delLoginInfo, cleanLoginInfo, unlockLoginInfo } from "@/api/monitor/loginInfo";
-import { LoginInfoQuery, LoginInfoVO } from "@/api/monitor/loginInfo/types";
+import { list, delLoginInfo, cleanLoginInfo, unlockLoginInfo } from '@/api/monitor/loginInfo';
+import { LoginInfoQuery, LoginInfoVO } from '@/api/monitor/loginInfo/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_device_type } = toRefs<any>(proxy?.useDict("sys_device_type"));
-const { sys_common_status } = toRefs<any>(proxy?.useDict("sys_common_status"));
+const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));
+const { sys_common_status } = toRefs<any>(proxy?.useDict('sys_common_status'));
 
 const loginInfoList = ref<LoginInfoVO[]>([]);
 const loading = ref(true);
@@ -120,85 +120,89 @@ const single = ref(true);
 const multiple = ref(true);
 const selectName = ref<Array<string>>([]);
 const total = ref(0);
-const dateRange = ref<[DateModelType,DateModelType]>(['', '']);
-const defaultSort = ref<any>({ prop: "loginTime", order: "descending" });
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const defaultSort = ref<any>({ prop: 'loginTime', order: 'descending' });
 
 const queryFormRef = ref<ElFormInstance>();
 const loginInfoTableRef = ref<ElTableInstance>();
 // 查询参数
 const queryParams = ref<LoginInfoQuery>({
-    pageNum: 1,
-    pageSize: 10,
-    ipaddr: '',
-    userName: '',
-    status: '',
-    orderByColumn: defaultSort.value.prop,
-    isAsc: defaultSort.value.order
+  pageNum: 1,
+  pageSize: 10,
+  ipaddr: '',
+  userName: '',
+  status: '',
+  orderByColumn: defaultSort.value.prop,
+  isAsc: defaultSort.value.order
 });
 
 /** 查询登录日志列表 */
 const getList = async () => {
-    loading.value = true;
-    const res = await list(proxy?.addDateRange(queryParams.value, dateRange.value));
-    loginInfoList.value = res.rows;
-    total.value = res.total;
-    loading.value = false;
-}
+  loading.value = true;
+  const res = await list(proxy?.addDateRange(queryParams.value, dateRange.value));
+  loginInfoList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
-    queryParams.value.pageNum = 1;
-    getList();
-}
+  queryParams.value.pageNum = 1;
+  getList();
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
-    dateRange.value = ['', ''];
-    queryFormRef.value?.resetFields();
-    queryParams.value.pageNum = 1;
-    loginInfoTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
-}
+  dateRange.value = ['', ''];
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  loginInfoTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
+};
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: LoginInfoVO[]) => {
-    ids.value = selection.map(item => item.infoId);
-    multiple.value = !selection.length;
-    single.value = selection.length != 1;
-    selectName.value = selection.map(item => item.userName);
-}
+  ids.value = selection.map((item) => item.infoId);
+  multiple.value = !selection.length;
+  single.value = selection.length != 1;
+  selectName.value = selection.map((item) => item.userName);
+};
 /** 排序触发事件 */
 const handleSortChange = (column: any) => {
-    queryParams.value.orderByColumn = column.prop;
-    queryParams.value.isAsc = column.order;
-    getList();
-}
+  queryParams.value.orderByColumn = column.prop;
+  queryParams.value.isAsc = column.order;
+  getList();
+};
 /** 删除按钮操作 */
 const handleDelete = async (row?: LoginInfoVO) => {
-    const infoIds = row?.infoId || ids.value;
-    await proxy?.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?');
-    await delLoginInfo(infoIds);
-    await getList();
-    proxy?.$modal.msgSuccess("删除成功");
-}
+  const infoIds = row?.infoId || ids.value;
+  await proxy?.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?');
+  await delLoginInfo(infoIds);
+  await getList();
+  proxy?.$modal.msgSuccess('删除成功');
+};
 /** 清空按钮操作 */
 const handleClean = async () => {
-    await proxy?.$modal.confirm("是否确认清空所有登录日志数据项?");
-    await cleanLoginInfo();
-    await getList();
-    proxy?.$modal.msgSuccess("清空成功");
-}
+  await proxy?.$modal.confirm('是否确认清空所有登录日志数据项?');
+  await cleanLoginInfo();
+  await getList();
+  proxy?.$modal.msgSuccess('清空成功');
+};
 /** 解锁按钮操作 */
 const handleUnlock = async () => {
-    const username = selectName.value;
-    await proxy?.$modal.confirm('是否确认解锁用户"' + username + '"数据项?');
-    await unlockLoginInfo(username);
-    proxy?.$modal.msgSuccess("用户" + username + "解锁成功");
-}
+  const username = selectName.value;
+  await proxy?.$modal.confirm('是否确认解锁用户"' + username + '"数据项?');
+  await unlockLoginInfo(username);
+  proxy?.$modal.msgSuccess('用户' + username + '解锁成功');
+};
 /** 导出按钮操作 */
 const handleExport = () => {
-    proxy?.download("monitor/logininfor/export", {
-        ...queryParams.value,
-    }, `config_${new Date().getTime()}.xlsx`);
-}
+  proxy?.download(
+    'monitor/logininfor/export',
+    {
+      ...queryParams.value
+    },
+    `config_${new Date().getTime()}.xlsx`
+  );
+};
 
 onMounted(() => {
-    getList();
-})
+  getList();
+});
 </script>
diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
index d105cd7737119bc1bb86cff014c419b8f9dd62c1..eb12364713f2b078b256229521a6c7937d708265 100644
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -2,12 +2,12 @@
   <div class="p-2">
     <div class="mb-[10px]">
       <el-card shadow="hover">
-        <el-form :model="queryParams" ref="queryFormRef" :inline="true">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
           <el-form-item label="登录地址" prop="ipaddr">
-            <el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 200px" @keyup.enter="handleQuery" />
+            <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 style="width: 200px" @keyup.enter="handleQuery" />
+            <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>
@@ -20,7 +20,7 @@
       <el-table
         v-loading="loading"
         :data="onlineList.slice((queryParams.pageNum - 1) * queryParams.pageSize, queryParams.pageNum * queryParams.pageSize)"
-        style="width: 100%;"
+        style="width: 100%"
       >
         <el-table-column label="序号" width="50" type="index" align="center">
           <template #default="scope">
@@ -48,26 +48,26 @@
         <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="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">
+              <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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" />
+      <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 { forceLogout, list as initData } from "@/api/monitor/online";
-import { OnlineQuery, OnlineVO } from "@/api/monitor/online/types";
-import api from "@/api/system/user";
-import {to} from "await-to-js";
+import { forceLogout, list as initData } from '@/api/monitor/online';
+import { OnlineQuery, OnlineVO } from '@/api/monitor/online/types';
+import api from '@/api/system/user';
+import { to } from 'await-to-js';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_device_type } = toRefs<any>(proxy?.useDict("sys_device_type"));
+const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));
 
 const onlineList = ref<OnlineVO[]>([]);
 const loading = ref(true);
@@ -89,28 +89,28 @@ const getList = async () => {
   onlineList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 /** 强退按钮操作 */
 const handleForceLogout = async (row: OnlineVO) => {
   const [err] = await to(proxy?.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?') as any);
   if (!err) {
     await forceLogout(row.tokenId);
     await getList();
-    proxy?.$modal.msgSuccess("删除成功");
+    proxy?.$modal.msgSuccess('删除成功');
   }
-}
+};
 
 onMounted(() => {
   getList();
-})
+});
 </script>
diff --git a/src/views/monitor/operlog/index.vue b/src/views/monitor/operlog/index.vue
index ea68c248909d8f26723ed19193e8a4ed25969a0d..1442984ba81ab8db9c0357a289bab887c990e27d 100644
--- a/src/views/monitor/operlog/index.vue
+++ b/src/views/monitor/operlog/index.vue
@@ -1,25 +1,25 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="操作地址" prop="operIp">
-              <el-input v-model="queryParams.operIp" placeholder="请输入操作地址" clearable style="width: 240px;" @keyup.enter="handleQuery"/>
+              <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 style="width: 240px;" @keyup.enter="handleQuery" />
+              <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 style="width: 240px;" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.operName" placeholder="请输入操作人员" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="类型" prop="businessType">
-              <el-select v-model="queryParams.businessType" placeholder="操作类型" clearable style="width: 240px">
+              <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 style="width: 240px">
+              <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>
@@ -47,17 +47,17 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['monitor:operlog:remove']">
+            <el-button v-hasPermi="['monitor:operlog:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="WarnTriangleFilled" @click="handleClean" v-hasPermi="['monitor:operlog:remove']">清空</el-button>
+            <el-button v-hasPermi="['monitor:operlog:remove']" type="danger" plain icon="WarnTriangleFilled" @click="handleClean">清空</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['monitor:operlog:export']">导出</el-button>
+            <el-button v-hasPermi="['monitor:operlog:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
@@ -65,8 +65,8 @@
         ref="operLogTableRef"
         v-loading="loading"
         :data="operlogList"
-        @selection-change="handleSelectionChange"
         :default-sort="defaultSort"
+        @selection-change="handleSelectionChange"
         @sort-change="handleSortChange"
       >
         <el-table-column type="selection" width="50" align="center" />
@@ -114,20 +114,20 @@
         <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="View" @click="handleView(scope.row)" v-hasPermi="['monitor:operlog:query']"> </el-button>
+              <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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 操作日志详细 -->
-    <el-dialog title="操作日志详细" v-model="dialog.visible" width="700px" append-to-body>
+    <el-dialog v-model="dialog.visible" title="操作日志详细" width="700px" append-to-body>
       <el-form :model="form" label-width="100px">
         <el-row>
           <el-col :span="24">
-            <el-form-item label="登录信息：">{{ form.operName }} / {{form.deptName}} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
+            <el-form-item label="登录信息：">{{ form.operName }} / {{ form.deptName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="请求信息：">{{ form.requestMethod }} {{ form.operUrl }}</el-form-item>
@@ -157,7 +157,7 @@
             <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
+            <el-form-item v-if="form.status === 1" label="异常信息：">{{ form.errorMsg }}</el-form-item>
           </el-col>
         </el-row>
       </el-form>
@@ -175,7 +175,7 @@ import { list, delOperlog, cleanOperlog } from '@/api/monitor/operlog';
 import { OperLogForm, OperLogQuery, OperLogVO } from '@/api/monitor/operlog/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_oper_type, sys_common_status } = toRefs<any>(proxy?.useDict("sys_oper_type", "sys_common_status"));
+const { sys_oper_type, sys_common_status } = toRefs<any>(proxy?.useDict('sys_oper_type', 'sys_common_status'));
 
 const operlogList = ref<OperLogVO[]>([]);
 const loading = ref(true);
@@ -184,7 +184,7 @@ const ids = ref<Array<number | string>>([]);
 const multiple = ref(true);
 const total = ref(0);
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
-const defaultSort = ref<any>({ prop: "operTime", order: "descending" });
+const defaultSort = ref<any>({ prop: 'operTime', order: 'descending' });
 
 const operLogTableRef = ref<ElTableInstance>();
 const queryFormRef = ref<ElFormInstance>();
@@ -194,7 +194,6 @@ const dialog = reactive<DialogOption>({
   title: ''
 });
 
-
 const data = reactive<PageData<OperLogForm, OperLogQuery>>({
   form: {
     operId: undefined,
@@ -240,63 +239,67 @@ const getList = async () => {
   operlogList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 /** 操作日志类型字典翻译 */
 const typeFormat = (row: OperLogForm) => {
   return proxy?.selectDictLabel(sys_oper_type.value, row.businessType);
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   dateRange.value = ['', ''];
   queryFormRef.value?.resetFields();
   queryParams.value.pageNum = 1;
   operLogTableRef.value?.sort(defaultSort.value.prop, defaultSort.value.order);
-}
+};
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: OperLogVO[]) => {
-  ids.value = selection.map(item => item.operId);
+  ids.value = selection.map((item) => item.operId);
   multiple.value = !selection.length;
-}
+};
 /** 排序触发事件 */
 const handleSortChange = (column: any) => {
   queryParams.value.orderByColumn = column.prop;
   queryParams.value.isAsc = column.order;
   getList();
-}
+};
 /** 详细按钮操作 */
 const handleView = (row: OperLogVO) => {
   dialog.visible = true;
   form.value = row;
-}
+};
 /** 删除按钮操作 */
 const handleDelete = async (row?: OperLogVO) => {
   const operIds = row?.operId || ids.value;
   await proxy?.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?');
   await delOperlog(operIds);
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
-}
+  proxy?.$modal.msgSuccess('删除成功');
+};
 
 /** 清空按钮操作 */
 const handleClean = async () => {
-  await proxy?.$modal.confirm("是否确认清空所有操作日志数据项?");
+  await proxy?.$modal.confirm('是否确认清空所有操作日志数据项?');
   await cleanOperlog();
   await getList();
-  proxy?.$modal.msgSuccess("清空成功");
-}
+  proxy?.$modal.msgSuccess('清空成功');
+};
 
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download("monitor/operlog/export", {
-    ...queryParams.value,
-  }, `config_${new Date().getTime()}.xlsx`);
-}
+  proxy?.download(
+    'monitor/operlog/export',
+    {
+      ...queryParams.value
+    },
+    `config_${new Date().getTime()}.xlsx`
+  );
+};
 onMounted(() => {
   getList();
-})
+});
 </script>
diff --git a/src/views/monitor/powerjob/index.vue b/src/views/monitor/snailjob/index.vue
similarity index 67%
rename from src/views/monitor/powerjob/index.vue
rename to src/views/monitor/snailjob/index.vue
index 0319e9738b90591c752e4a864470f25516a7c48e..89e3b2310201e5415e30bb8f5db815e38a2c8b58 100644
--- a/src/views/monitor/powerjob/index.vue
+++ b/src/views/monitor/snailjob/index.vue
@@ -5,5 +5,5 @@
 </template>
 
 <script setup lang="ts">
-const url = ref(import.meta.env.VITE_APP_POWERJOB_ADMIN);
+const url = ref(import.meta.env.VITE_APP_SNAILJOB_ADMIN);
 </script>
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
index 15401f8e8158e64ab5a9a9a57076bc3084381f26..97a6556d4fb3eb6ad666218b8b40423f5672d7bf 100644
--- a/src/views/redirect/index.vue
+++ b/src/views/redirect/index.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script setup>
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router';
 
 const route = useRoute();
 const router = useRouter();
-const { params, query } = route
-const { path } = params
+const { params, query } = route;
+const { path } = params;
 
-router.replace({ path: '/' + path, query })
+router.replace({ path: '/' + path, query });
 </script>
diff --git a/src/views/register.vue b/src/views/register.vue
index ad78cf12e9a74fdec881e008c35f841d70c12239..c3d19301c54f5f0ef4c686a2ac548401eb7a5f9a 100644
--- a/src/views/register.vue
+++ b/src/views/register.vue
@@ -2,7 +2,7 @@
   <div class="register">
     <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
       <h3 class="title">RuoYi-Vue-Plus多租户管理系统</h3>
-      <el-form-item prop="tenantId" v-if="tenantEnabled">
+      <el-form-item v-if="tenantEnabled" prop="tenantId">
         <el-select v-model="registerForm.tenantId" filterable placeholder="请选择/输入公司名称" style="width: 100%">
           <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
           <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
@@ -30,27 +30,27 @@
           <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
         </el-input>
       </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input size="large" v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleRegister">
+      <el-form-item v-if="captchaEnabled" prop="code">
+        <el-input v-model="registerForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @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" @click="getCode" class="register-code-img" />
+          <img :src="codeUrl" class="register-code-img" @click="getCode" />
         </div>
       </el-form-item>
-      <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleRegister">
+      <el-form-item style="width: 100%">
+        <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleRegister">
           <span v-if="!loading">注 册</span>
           <span v-else>注 册 中...</span>
         </el-button>
-        <div style="float: right;">
+        <div style="float: right">
           <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
         </div>
       </el-form-item>
     </el-form>
     <!--  底部  -->
     <div class="el-register-footer">
-      <span>Copyright © 2018-2023 疯狂的狮子Li All Rights Reserved.</span>
+      <span>Copyright © 2018-2024 疯狂的狮子Li All Rights Reserved.</span>
     </div>
   </div>
 </template>
@@ -63,46 +63,44 @@ import { to } from 'await-to-js';
 const router = useRouter();
 
 const registerForm = ref<RegisterForm>({
-  tenantId: "",
-  username: "",
-  password: "",
-  confirmPassword: "",
-  code: "",
-  uuid: "",
-  userType: "sys_user"
+  tenantId: '',
+  username: '',
+  password: '',
+  confirmPassword: '',
+  code: '',
+  uuid: '',
+  userType: 'sys_user'
 });
 
 // 租户开关
 const tenantEnabled = ref(true);
 
-
 const equalToPassword = (rule: any, value: string, callback: any) => {
   if (registerForm.value.password !== value) {
-    callback(new Error("两次输入的密码不一致"));
+    callback(new Error('两次输入的密码不一致'));
   } else {
     callback();
   }
 };
 
 const registerRules: ElFormRules = {
-  tenantId: [
-    { required: true, trigger: "blur", message: "请输入您的租户编号" }
-  ],
+  tenantId: [{ required: true, trigger: 'blur', message: '请输入您的租户编号' }],
   username: [
-    { required: true, trigger: "blur", message: "请输入您的账号" },
-    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
+    { required: true, trigger: 'blur', message: '请输入您的账号' },
+    { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
   ],
   password: [
-    { required: true, trigger: "blur", message: "请输入您的密码" },
-    { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }
+    { required: true, trigger: 'blur', message: '请输入您的密码' },
+    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
+    { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' }
   ],
   confirmPassword: [
-    { required: true, trigger: "blur", message: "请再次输入您的密码" },
-    { required: true, validator: equalToPassword, trigger: "blur" }
+    { required: true, trigger: 'blur', message: '请再次输入您的密码' },
+    { required: true, validator: equalToPassword, trigger: 'blur' }
   ],
-  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+  code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
 };
-const codeUrl = ref("");
+const codeUrl = ref('');
 const loading = ref(false);
 const captchaEnabled = ref(true);
 const registerRef = ref<ElFormInstance>();
@@ -116,20 +114,20 @@ const handleRegister = () => {
       const [err] = await to(register(registerForm.value));
       if (!err) {
         const username = registerForm.value.username;
-        await ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
+        await ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + ' 注册成功！</font>', '系统提示', {
           dangerouslyUseHTMLString: true,
-          type: "success",
+          type: 'success'
         });
-        await router.push("/login");
+        await router.push('/login');
       } else {
         loading.value = false;
-        if (captchaEnabled) {
+        if (captchaEnabled.value) {
           getCode();
         }
       }
     }
   });
-}
+};
 
 const getCode = async () => {
   const res = await getCodeImg();
@@ -150,12 +148,12 @@ const initTenantList = async () => {
       registerForm.value.tenantId = tenantList.value[0].tenantId;
     }
   }
-}
+};
 
 onMounted(() => {
   getCode();
   initTenantList();
-})
+});
 </script>
 
 <style lang="scss" scoped>
@@ -164,7 +162,7 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url('../assets/images/login-background.jpg');
   background-size: cover;
 }
 
diff --git a/src/views/system/client/index.vue b/src/views/system/client/index.vue
index b39b9e5379352ddf672637488a64b5a6877613c9..af8696bf3d2a7bde4e699acc8c3a681cda0cf4b5 100644
--- a/src/views/system/client/index.vue
+++ b/src/views/system/client/index.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
-        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
+      <div v-show="showSearch" class="search">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
           <el-form-item label="客户端key" prop="clientKey">
-            <el-input v-model="queryParams.clientKey" placeholder="请输入客户端key" clearable style="width: 240px" @keyup.enter="handleQuery" />
+            <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 style="width: 240px" @keyup.enter="handleQuery" />
+            <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-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>
@@ -26,28 +26,28 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:client:add']">新增</el-button>
+            <el-button v-hasPermi="['system:client:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:client:edit']">
+            <el-button v-hasPermi="['system:client:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">
               修改
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:client:remove']">
+            <el-button v-hasPermi="['system:client:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:client:export']">导出</el-button>
+            <el-button v-hasPermi="['system:client:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" :data="clientList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="id" align="center" prop="id" v-if="true" />
+        <el-table-column v-if="true" 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" />
@@ -63,7 +63,7 @@
         </el-table-column>
         <el-table-column label="Token活跃超时时间" align="center" prop="activeTimeout" />
         <el-table-column label="Token固定超时时间" align="center" prop="timeout" />
-        <el-table-column label="状态" align="center" key="status">
+        <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>
@@ -71,19 +71,19 @@
         <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="['system:client:edit']"></el-button>
+              <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 link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:client:remove']"></el-button>
+              <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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改客户端管理对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" 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" />
@@ -125,7 +125,7 @@
         </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" :label="dict.value">
+            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">
               {{ dict.label }}
             </el-radio>
           </el-radio-group>
@@ -146,9 +146,9 @@ import { listClient, getClient, delClient, addClient, updateClient, changeStatus
 import { ClientVO, ClientQuery, ClientForm } from '@/api/system/client/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
-const { sys_grant_type } = toRefs<any>(proxy?.useDict("sys_grant_type"));
-const { sys_device_type } = toRefs<any>(proxy?.useDict("sys_device_type"));
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
+const { sys_grant_type } = toRefs<any>(proxy?.useDict('sys_grant_type'));
+const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));
 
 const clientList = ref<ClientVO[]>([]);
 const buttonLoading = ref(false);
@@ -176,10 +176,10 @@ const initFormData: ClientForm = {
   deviceType: undefined,
   activeTimeout: undefined,
   timeout: undefined,
-  status: undefined,
-}
+  status: undefined
+};
 const data = reactive<PageData<ClientForm, ClientQuery>>({
-  form: {...initFormData},
+  form: { ...initFormData },
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -190,27 +190,15 @@ const data = reactive<PageData<ClientForm, ClientQuery>>({
     deviceType: undefined,
     activeTimeout: undefined,
     timeout: undefined,
-    status: 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" }
-    ],
+    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' }]
   }
 });
 
@@ -223,55 +211,55 @@ const getList = async () => {
   clientList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 
 /** 取消按钮 */
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
 
 /** 表单重置 */
 const reset = () => {
-  form.value = {...initFormData};
+  form.value = { ...initFormData };
   clientFormRef.value?.resetFields();
-}
+};
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: ClientVO[]) => {
-  ids.value = selection.map(item => item.id);
+  ids.value = selection.map((item) => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = "添加客户端管理";
-}
+  dialog.title = '添加客户端管理';
+};
 
 /** 修改按钮操作 */
 const handleUpdate = async (row?: ClientVO) => {
   reset();
-  const _id = row?.id || ids.value[0]
+  const _id = row?.id || ids.value[0];
   const res = await getClient(_id);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改客户端管理";
-}
+  dialog.title = '修改客户端管理';
+};
 
 /** 提交按钮 */
 const submitForm = () => {
@@ -279,44 +267,48 @@ const submitForm = () => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.id) {
-        await updateClient(form.value).finally(() =>  buttonLoading.value = false);
+        await updateClient(form.value).finally(() => (buttonLoading.value = false));
       } else {
-        await addClient(form.value).finally(() =>  buttonLoading.value = false);
+        await addClient(form.value).finally(() => (buttonLoading.value = false));
       }
-      proxy?.$modal.msgSuccess("修改成功");
+      proxy?.$modal.msgSuccess('修改成功');
       dialog.visible = false;
       await getList();
     }
   });
-}
+};
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: ClientVO) => {
   const _ids = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除客户端管理编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
+  await proxy?.$modal.confirm('是否确认删除客户端管理编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
   await delClient(_ids);
-  proxy?.$modal.msgSuccess("删除成功");
+  proxy?.$modal.msgSuccess('删除成功');
   await getList();
-}
+};
 
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download('system/client/export', {
-    ...queryParams.value
-  }, `client_${new Date().getTime()}.xlsx`)
-}
+  proxy?.download(
+    'system/client/export',
+    {
+      ...queryParams.value
+    },
+    `client_${new Date().getTime()}.xlsx`
+  );
+};
 
 /** 状态修改  */
 const handleStatusChange = async (row: ClientVO) => {
-  let text = row.status === "0" ? "启用" : "停用"
+  let text = row.status === '0' ? '启用' : '停用';
   try {
     await proxy?.$modal.confirm('确认要"' + text + '"吗?');
-    await changeStatus(row.id, row.status);
-    proxy?.$modal.msgSuccess(text + "成功");
+    await changeStatus(row.clientId, row.status);
+    proxy?.$modal.msgSuccess(text + '成功');
   } catch (err) {
-    row.status = row.status === "0" ? "1" : "0";
+    row.status = row.status === '0' ? '1' : '0';
   }
-}
+};
 
 onMounted(() => {
   getList();
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index 7e2e161bdc2d06a48577ed8f71c6164eb214e2f9..138068e43e1dfd007a92dfcef87df84fd7328aa4 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="参数名称" prop="configName">
-              <el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <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 style="width: 240px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.configKey" placeholder="请输入参数键名" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="系统内置" prop="configType">
-              <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
+              <el-select v-model="queryParams.configType" 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 label="创建时间" style="width: 308px;">
+            <el-form-item label="创建时间" style="width: 308px">
               <el-date-picker
                 v-model="dateRange"
                 value-format="YYYY-MM-DD HH:mm:ss"
@@ -38,31 +38,31 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:config:add']">新增</el-button>
+            <el-button v-hasPermi="['system:config:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:config:edit']">
+            <el-button v-hasPermi="['system:config:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">
               修改
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:config:remove']">
+            <el-button v-hasPermi="['system:config:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:config:export']">导出</el-button>
+            <el-button v-hasPermi="['system:config:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Refresh" @click="handleRefreshCache" v-hasPermi="['system:config:remove']">刷新缓存</el-button>
+            <el-button v-hasPermi="['system:config:remove']" type="danger" plain icon="Refresh" @click="handleRefreshCache">刷新缓存</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="参数主键" align="center" prop="configId" v-if="false" />
+        <el-table-column v-if="false" label="参数主键" align="center" prop="configId" />
         <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
         <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
         <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
@@ -80,19 +80,19 @@
         <el-table-column label="操作" align="center" width="150" 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="['system:config:edit']"></el-button>
+              <el-button v-hasPermi="['system:config:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']"></el-button>
+              <el-button v-hasPermi="['system:config: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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
 
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <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="请输入参数名称" />
@@ -105,7 +105,7 @@
         </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" :label="dict.value">{{ dict.label }}</el-radio>
+            <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">
@@ -123,11 +123,11 @@
 </template>
 
 <script setup name="Config" lang="ts">
-import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
-import { ConfigForm, ConfigQuery, ConfigVO } from "@/api/system/config/types";
+import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from '@/api/system/config';
+import { ConfigForm, ConfigQuery, ConfigVO } from '@/api/system/config/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_yes_no } = toRefs<any>(proxy?.useDict("sys_yes_no"));
+const { sys_yes_no } = toRefs<any>(proxy?.useDict('sys_yes_no'));
 
 const configList = ref<ConfigVO[]>([]);
 const loading = ref(true);
@@ -149,9 +149,9 @@ const initFormData: ConfigForm = {
   configName: '',
   configKey: '',
   configValue: '',
-  configType: "Y",
+  configType: 'Y',
   remark: ''
-}
+};
 const data = reactive<PageData<ConfigForm, ConfigQuery>>({
   form: { ...initFormData },
   queryParams: {
@@ -159,12 +159,12 @@ const data = reactive<PageData<ConfigForm, ConfigQuery>>({
     pageSize: 10,
     configName: '',
     configKey: '',
-    configType: '',
+    configType: ''
   },
   rules: {
-    configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
-    configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
-    configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
+    configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
+    configKey: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
+    configValue: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }]
   }
 });
 
@@ -177,40 +177,40 @@ const getList = async () => {
   configList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 /** 取消按钮 */
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   configFormRef.value?.resetFields();
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   dateRange.value = ['', ''];
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: ConfigVO[]) => {
-  ids.value = selection.map(item => item.configId);
+  ids.value = selection.map((item) => item.configId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = "添加参数";
-}
+  dialog.title = '添加参数';
+};
 /** 修改按钮操作 */
 const handleUpdate = async (row?: ConfigVO) => {
   reset();
@@ -218,40 +218,44 @@ const handleUpdate = async (row?: ConfigVO) => {
   const res = await getConfig(configId);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改参数";
-}
+  dialog.title = '修改参数';
+};
 /** 提交按钮 */
 const submitForm = () => {
   configFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.configId ? await updateConfig(form.value) : await addConfig(form.value);
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
   });
-}
+};
 /** 删除按钮操作 */
 const handleDelete = async (row?: ConfigVO) => {
   const configIds = row?.configId || ids.value;
   await proxy?.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？');
   await delConfig(configIds);
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
-}
+  proxy?.$modal.msgSuccess('删除成功');
+};
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download("system/config/export", {
-    ...queryParams.value
-  }, `config_${new Date().getTime()}.xlsx`);
-}
+  proxy?.download(
+    'system/config/export',
+    {
+      ...queryParams.value
+    },
+    `config_${new Date().getTime()}.xlsx`
+  );
+};
 /** 刷新缓存按钮操作 */
 const handleRefreshCache = async () => {
   await refreshCache();
-  proxy?.$modal.msgSuccess("刷新缓存成功");
-}
+  proxy?.$modal.msgSuccess('刷新缓存成功');
+};
 
 onMounted(() => {
   getList();
-})
+});
 </script>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 97971258ca96e93744924f240133b373e0cc9a75..71aeff1cc4752a0dfed1acaae597f303f9b4d480 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,14 +1,17 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="部门名称" prop="deptName">
-              <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <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-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>
@@ -25,24 +28,25 @@
       <template #header>
         <el-row :gutter="10">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['system:dept:add']">新增 </el-button>
+            <el-button v-hasPermi="['system:dept:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增 </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table
+        ref="deptTableRef"
         v-loading="loading"
         :data="deptList"
         row-key="deptId"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-        ref="deptTableRef"
         :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">
@@ -57,23 +61,23 @@
         <el-table-column fixed="right" align="center" label="操作">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']" />
+              <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 link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']" />
+              <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 link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']" />
+              <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 :title="dialog.title" v-model="dialog.visible" destroy-on-close append-to-body width="600px">
+    <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 :span="24" v-if="form.parentId !== 0">
+          <el-col v-if="form.parentId !== 0" :span="24">
             <el-form-item label="上级部门" prop="parentId">
               <el-tree-select
                 v-model="form.parentId"
@@ -90,6 +94,11 @@
               <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" />
@@ -115,8 +124,7 @@
           <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" :label="dict.value">{{ dict.label
-                }}</el-radio>
+                <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>
@@ -133,26 +141,25 @@
 </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 {UserVO} from "@/api/system/user/types";
-import {listUserByDeptId} from "@/api/system/user";
+import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from '@/api/system/dept';
+import { DeptForm, DeptQuery, DeptVO } from '@/api/system/dept/types';
+import { UserVO } from '@/api/system/user/types';
+import { listUserByDeptId } from '@/api/system/user';
 
 interface DeptOptionsType {
   deptId: number | string;
   deptName: string;
   children: DeptOptionsType[];
-
 }
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance
-const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
 
-const deptList = ref<DeptVO[]>([])
-const loading = ref(true)
-const showSearch = ref(true)
-const deptOptions = ref<DeptOptionsType[]>([])
-const isExpandAll = ref(true)
+const deptList = ref<DeptVO[]>([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const deptOptions = ref<DeptOptionsType[]>([]);
+const isExpandAll = ref(true);
 const deptUserList = ref<UserVO[]>([]);
 
 const dialog = reactive<DialogOption>({
@@ -168,45 +175,48 @@ const initFormData: DeptForm = {
   deptId: undefined,
   parentId: undefined,
   deptName: undefined,
+  deptCategory: undefined,
   orderNum: 0,
   leader: undefined,
   phone: undefined,
   email: undefined,
-  status: "0"
-}
-const data = reactive<PageData<DeptForm, DeptQuery>>({
+  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[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
-  },
-})
+    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[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }]
+  }
+};
+const data = reactive<PageData<DeptForm, DeptQuery>>(initData);
 
-const { queryParams, form, rules } = toRefs<PageData<DeptForm, DeptQuery>>(data)
+const { queryParams, form, rules } = toRefs<PageData<DeptForm, DeptQuery>>(data);
 
 /** 查询菜单列表 */
 const getList = async () => {
   loading.value = true;
   const res = await listDept(queryParams.value);
-  const data = proxy?.handleTree<DeptVO>(res.data, "deptId")
+  const data = proxy?.handleTree<DeptVO>(res.data, 'deptId');
   if (data) {
-    deptList.value = data
+    deptList.value = data;
   }
-  loading.value = false
-}
+  loading.value = false;
+};
 
 /** 查询当前部门的所有用户 */
 async function getDeptAllUser(deptId: any) {
-  if (deptId !== null && deptId !== "" && deptId !== undefined) {
+  if (deptId !== null && deptId !== '' && deptId !== undefined) {
     const res = await listUserByDeptId(deptId);
     deptUserList.value = res.data;
   }
@@ -214,52 +224,52 @@ async function getDeptAllUser(deptId: any) {
 
 /** 取消按钮 */
 const cancel = () => {
-  reset()
-  dialog.visible = false
-}
+  reset();
+  dialog.visible = false;
+};
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   deptFormRef.value?.resetFields();
-}
+};
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   getList();
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
-  handleQuery()
-}
+  handleQuery();
+};
 
 /** 展开/折叠操作 */
 const handleToggleExpandAll = () => {
   isExpandAll.value = !isExpandAll.value;
-  toggleExpandAll(deptList.value, isExpandAll.value)
-}
+  toggleExpandAll(deptList.value, isExpandAll.value);
+};
 /** 展开/折叠所有 */
 const toggleExpandAll = (data: DeptVO[], status: boolean) => {
   data.forEach((item) => {
-    deptTableRef.value?.toggleRowExpansion(item, status)
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
-  })
-}
+    deptTableRef.value?.toggleRowExpansion(item, status);
+    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
+  });
+};
 
 /** 新增按钮操作 */
 const handleAdd = async (row?: DeptVO) => {
   reset();
   const res = await listDept();
-  const data = proxy?.handleTree<DeptOptionsType>(res.data, "deptId");
+  const data = proxy?.handleTree<DeptOptionsType>(res.data, 'deptId');
   if (data) {
-    deptOptions.value = data
+    deptOptions.value = data;
     if (row && row.deptId) {
       form.value.parentId = row?.deptId;
     }
     dialog.visible = true;
-    dialog.title = "添加部门";
+    dialog.title = '添加部门';
   }
-}
+};
 
 /** 修改按钮操作 */
 const handleUpdate = async (row: DeptVO) => {
@@ -267,9 +277,9 @@ const handleUpdate = async (row: DeptVO) => {
   //查询当前部门所有用户
   getDeptAllUser(row.deptId);
   const res = await getDept(row.deptId);
-  form.value = res.data
+  form.value = res.data;
   const response = await listDeptExcludeChild(row.deptId);
-  const data = proxy?.handleTree<DeptOptionsType>(response.data, "deptId")
+  const data = proxy?.handleTree<DeptOptionsType>(response.data, 'deptId');
   if (data) {
     deptOptions.value = data;
     if (data.length === 0) {
@@ -282,26 +292,26 @@ const handleUpdate = async (row: DeptVO) => {
     }
   }
   dialog.visible = true;
-  dialog.title = "修改部门";
-}
+  dialog.title = '修改部门';
+};
 /** 提交按钮 */
 const submitForm = () => {
   deptFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.deptId ? await updateDept(form.value) : await addDept(form.value);
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
-  })
-}
+  });
+};
 /** 删除按钮操作 */
 const handleDelete = async (row: DeptVO) => {
   await proxy?.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?');
   await delDept(row.deptId);
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
-}
+  proxy?.$modal.msgSuccess('删除成功');
+};
 
 onMounted(() => {
   getList();
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
index c2ef550b435ba371dbe548a2d39054a9e0c1e3dd..33c7fc8cb9878d6b5e540f5e4cd15ed9069bd649 100644
--- a/src/views/system/dict/data.vue
+++ b/src/views/system/dict/data.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="字典名称" prop="dictType">
-              <el-select v-model="queryParams.dictType" style="width: 200px">
+              <el-select v-model="queryParams.dictType">
                 <el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictType" />
               </el-select>
             </el-form-item>
             <el-form-item label="字典标签" prop="dictLabel">
-              <el-input v-model="queryParams.dictLabel" placeholder="请输入字典标签" clearable style="width: 200px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.dictLabel" placeholder="请输入字典标签" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -24,33 +24,41 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增</el-button>
+            <el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:dict:edit']">修改</el-button>
+            <el-button v-hasPermi="['system:dict:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:dict:remove']">
+            <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:dict:export']">导出</el-button>
+            <el-button v-hasPermi="['system:dict:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="字典编码" align="center" prop="dictCode" v-if="false" />
+        <el-table-column v-if="false" label="字典编码" align="center" prop="dictCode" />
         <el-table-column label="字典标签" align="center" prop="dictLabel">
           <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') ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
+            <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" />
@@ -64,19 +72,19 @@
         <el-table-column label="操作" align="center" width="160" 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="['system:dict:edit']"></el-button>
+              <el-button v-hasPermi="['system:dict:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']"></el-button>
+              <el-button v-hasPermi="['system:dict: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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
       <el-form ref="dataFormRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="字典类型">
           <el-input v-model="form.dictType" :disabled="true" />
@@ -118,13 +126,14 @@
 </template>
 
 <script setup name="Data" lang="ts">
-import useDictStore from '@/store/modules/dict'
-import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";
-import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
+import useDictStore from '@/store/modules/dict';
+import { optionselect as getDictOptionselect, getType } from '@/api/system/dict/type';
+import { listData, getData, delData, addData, updateData } from '@/api/system/dict/data';
 import { DictTypeVO } from '@/api/system/dict/type/types';
-import { DictDataForm, DictDataQuery, DictDataVO } from "@/api/system/dict/data/types";
+import { DictDataForm, DictDataQuery, DictDataVO } from '@/api/system/dict/data/types';
+import { RouteLocationNormalized } from 'vue-router';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const route = useRoute();
 
 const dataList = ref<DictDataVO[]>([]);
@@ -134,26 +143,25 @@ const ids = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-const defaultDictType = ref("");
+const defaultDictType = ref('');
 const typeOptions = ref<DictTypeVO[]>([]);
 
 const dataFormRef = ref<ElFormInstance>();
 const queryFormRef = ref<ElFormInstance>();
 
-
 const dialog = 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 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 initFormData: DictDataForm = {
@@ -161,10 +169,10 @@ const initFormData: DictDataForm = {
   dictLabel: '',
   dictValue: '',
   cssClass: '',
-  listClass: "default",
+  listClass: 'primary',
   dictSort: 0,
   remark: ''
-}
+};
 const data = reactive<PageData<DictDataForm, DictDataQuery>>({
   form: { ...initFormData },
   queryParams: {
@@ -175,9 +183,9 @@ const data = reactive<PageData<DictDataForm, DictDataQuery>>({
     dictLabel: ''
   },
   rules: {
-    dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
-    dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
-    dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
+    dictLabel: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+    dictValue: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
+    dictSort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }]
   }
 });
 
@@ -189,13 +197,13 @@ const getTypes = async (dictId: string | number) => {
   queryParams.value.dictType = data.dictType;
   defaultDictType.value = data.dictType;
   getList();
-}
+};
 
 /** 查询字典类型列表 */
 const getTypeList = async () => {
-  const res = await getDictOptionselect()
+  const res = await getDictOptionselect();
   typeOptions.value = res.data;
-}
+};
 /** 查询字典数据列表 */
 const getList = async () => {
   loading.value = true;
@@ -203,46 +211,56 @@ const getList = async () => {
   dataList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 /** 取消按钮 */
 const cancel = () => {
   dialog.visible = false;
   reset();
-}
+};
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   dataFormRef.value?.resetFields();
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 /** 返回按钮操作 */
 const handleClose = () => {
-  const obj = { path: "/system/dict" };
+  const obj: RouteLocationNormalized = {
+    fullPath: '',
+    hash: '',
+    matched: [],
+    meta: undefined,
+    name: undefined,
+    params: undefined,
+    query: undefined,
+    redirectedFrom: undefined,
+    path: '/system/dict'
+  };
   proxy?.$tab.closeOpenPage(obj);
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   queryParams.value.dictType = defaultDictType.value;
   handleQuery();
-}
+};
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   form.value.dictType = queryParams.value.dictType;
   dialog.visible = true;
-  dialog.title = "添加字典数据";
-}
+  dialog.title = '添加字典数据';
+};
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: DictDataVO[]) => {
-  ids.value = selection.map(item => item.dictCode);
+  ids.value = selection.map((item) => item.dictCode);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 /** 修改按钮操作 */
 const handleUpdate = async (row?: DictDataVO) => {
   reset();
@@ -250,40 +268,42 @@ const handleUpdate = async (row?: DictDataVO) => {
   const res = await getData(dictCode);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改字典数据";
-}
+  dialog.title = '修改字典数据';
+};
 /** 提交按钮 */
 const submitForm = () => {
   dataFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.dictCode ? await updateData(form.value) : await addData(form.value);
       useDictStore().removeDict(queryParams.value.dictType);
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
-
     }
   });
-}
+};
 /** 删除按钮操作 */
 const handleDelete = async (row?: DictDataVO) => {
   const dictCodes = row?.dictCode || ids.value;
   await proxy?.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？');
   await delData(dictCodes);
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
+  proxy?.$modal.msgSuccess('删除成功');
   useDictStore().removeDict(queryParams.value.dictType);
-
-}
+};
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download("system/dict/data/export", {
-    ...queryParams.value
-  }, `dict_data_${new Date().getTime()}.xlsx`);
-}
+  proxy?.download(
+    'system/dict/data/export',
+    {
+      ...queryParams.value
+    },
+    `dict_data_${new Date().getTime()}.xlsx`
+  );
+};
 
 onMounted(() => {
-  getTypes(route.params && route.params.dictId as string);
+  getTypes(route.params && (route.params.dictId as string));
   getTypeList();
-})
+});
 </script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index f3b0051cb2bb877297622738db4bf6bf74fe91e0..d44a04af37902204750eebab9da8e42c61148244 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="字典名称" prop="dictName">
-              <el-input v-model="queryParams.dictName" placeholder="请输入字典名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.dictName" placeholder="请输入字典名称" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="字典类型" prop="dictType">
-              <el-input v-model="queryParams.dictType" placeholder="请输入字典类型" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.dictType" placeholder="请输入字典类型" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="创建时间" style="width: 308px">
               <el-date-picker
@@ -33,29 +33,29 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dict:add']">新增</el-button>
+            <el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:dict:edit']">修改</el-button>
+            <el-button v-hasPermi="['system:dict:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:dict:remove']">
+            <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:dict:export']">导出</el-button>
+            <el-button v-hasPermi="['system:dict:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Refresh" @click="handleRefreshCache" v-hasPermi="['system:dict:remove']">刷新缓存</el-button>
+            <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Refresh" @click="handleRefreshCache">刷新缓存</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="字典编号" align="center" prop="dictId" v-if="false" />
+        <el-table-column v-if="false" label="字典编号" align="center" prop="dictId" />
         <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
         <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
           <template #default="scope">
@@ -73,19 +73,19 @@
         <el-table-column label="操作" align="center" width="160" 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="['system:dict:edit']"></el-button>
+              <el-button v-hasPermi="['system:dict:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']"></el-button>
+              <el-button v-hasPermi="['system:dict: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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
       <el-form ref="dictFormRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="字典名称" prop="dictName">
           <el-input v-model="form.dictName" placeholder="请输入字典名称" />
@@ -108,9 +108,9 @@
 </template>
 
 <script setup name="Dict" lang="ts">
-import useDictStore from '@/store/modules/dict'
-import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
-import { DictTypeForm, DictTypeQuery, DictTypeVO } from "@/api/system/dict/type/types";
+import useDictStore from '@/store/modules/dict';
+import { listType, getType, delType, addType, updateType, refreshCache } from '@/api/system/dict/type';
+import { DictTypeForm, DictTypeQuery, DictTypeVO } from '@/api/system/dict/type/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -126,7 +126,6 @@ const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 const dictFormRef = ref<ElFormInstance>();
 const queryFormRef = ref<ElFormInstance>();
 
-
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -137,7 +136,7 @@ const initFormData: DictTypeForm = {
   dictName: '',
   dictType: '',
   remark: ''
-}
+};
 const data = reactive<PageData<DictTypeForm, DictTypeQuery>>({
   form: { ...initFormData },
   queryParams: {
@@ -147,9 +146,9 @@ const data = reactive<PageData<DictTypeForm, DictTypeQuery>>({
     dictType: ''
   },
   rules: {
-    dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
-    dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
-  },
+    dictName: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
+    dictType: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }]
+  }
 });
 
 const { queryParams, form, rules } = toRefs(data);
@@ -157,45 +156,45 @@ const { queryParams, form, rules } = toRefs(data);
 /** 查询字典类型列表 */
 const getList = () => {
   loading.value = true;
-  listType(proxy?.addDateRange(queryParams.value, dateRange.value)).then(res => {
+  listType(proxy?.addDateRange(queryParams.value, dateRange.value)).then((res) => {
     typeList.value = res.rows;
     total.value = res.total;
     loading.value = false;
   });
-}
+};
 /** 取消按钮 */
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   dictFormRef.value?.resetFields();
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   dateRange.value = ['', ''];
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = "添加字典类型";
-}
+  dialog.title = '添加字典类型';
+};
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: DictTypeVO[]) => {
-  ids.value = selection.map(item => item.dictId);
+  ids.value = selection.map((item) => item.dictId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 /** 修改按钮操作 */
 const handleUpdate = async (row?: DictTypeVO) => {
   reset();
@@ -203,41 +202,45 @@ const handleUpdate = async (row?: DictTypeVO) => {
   const res = await getType(dictId);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改字典类型";
-}
+  dialog.title = '修改字典类型';
+};
 /** 提交按钮 */
 const submitForm = () => {
   dictFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.dictId ? await updateType(form.value) : await addType(form.value);
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       getList();
     }
   });
-}
+};
 /** 删除按钮操作 */
 const handleDelete = async (row?: DictTypeVO) => {
   const dictIds = row?.dictId || ids.value;
   await proxy?.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？');
   await delType(dictIds);
   getList();
-  proxy?.$modal.msgSuccess("删除成功");
-}
+  proxy?.$modal.msgSuccess('删除成功');
+};
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download("system/dict/type/export", {
-    ...queryParams.value
-  }, `dict_${new Date().getTime()}.xlsx`);
-}
+  proxy?.download(
+    'system/dict/type/export',
+    {
+      ...queryParams.value
+    },
+    `dict_${new Date().getTime()}.xlsx`
+  );
+};
 /** 刷新缓存按钮操作 */
 const handleRefreshCache = async () => {
   await refreshCache();
-  proxy?.$modal.msgSuccess("刷新成功");
+  proxy?.$modal.msgSuccess('刷新成功');
   useDictStore().cleanDict();
-}
+};
 
 onMounted(() => {
   getList();
-})
+});
 </script>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 06cd928f6b67b20ade7049a312cfb5cad55b1b41..9e5b5c3a6f3a0491aa62f0e85857b083890f4bdc 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="菜单名称" prop="menuName">
-              <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <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-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>
@@ -25,21 +25,21 @@
       <template #header>
         <el-row :gutter="10">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['system:menu:add']">新增 </el-button>
+            <el-button v-hasPermi="['system:menu:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增 </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table
+        ref="menuTableRef"
         v-loading="loading"
         :data="menuList"
         row-key="menuId"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-        ref="menuTableRef"
         :default-expand-all="isExpandAll"
       >
         <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
@@ -64,20 +64,20 @@
         <el-table-column fixed="right" label="操作" width="180">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']" />
+              <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 link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']" />
+              <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 link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']" />
+              <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 :title="dialog.title" v-model="dialog.visible" destroy-on-close append-to-bod width="750px">
+    <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">
@@ -95,13 +95,13 @@
           <el-col :span="24">
             <el-form-item label="菜单类型" prop="menuType">
               <el-radio-group v-model="form.menuType">
-                <el-radio label="M">目录</el-radio>
-                <el-radio label="C">菜单</el-radio>
-                <el-radio label="F">按钮</el-radio>
+                <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 :span="24" v-if="form.menuType !== 'F'">
+          <el-col v-if="form.menuType !== 'F'" :span="24">
             <el-form-item label="菜单图标" prop="icon">
               <!-- 图标选择器 -->
               <icon-select v-model="form.icon" />
@@ -117,7 +117,7 @@
               <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="form.menuType !== 'F'">
+          <el-col v-if="form.menuType !== 'F'" :span="12">
             <el-form-item>
               <template #label>
                 <span>
@@ -134,7 +134,7 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="form.menuType !== 'F'">
+          <el-col v-if="form.menuType !== 'F'" :span="12">
             <el-form-item prop="path">
               <template #label>
                 <span>
@@ -149,7 +149,7 @@
               <el-input v-model="form.path" placeholder="请输入路由地址" />
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="form.menuType === 'C'">
+          <el-col v-if="form.menuType === 'C'" :span="12">
             <el-form-item prop="component">
               <template #label>
                 <span>
@@ -164,7 +164,7 @@
               <el-input v-model="form.component" placeholder="请输入组件路径" />
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="form.menuType !== 'M'">
+          <el-col v-if="form.menuType !== 'M'" :span="12">
             <el-form-item>
               <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
               <template #label>
@@ -179,7 +179,7 @@
               </template>
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="form.menuType === 'C'">
+          <el-col v-if="form.menuType === 'C'" :span="12">
             <el-form-item>
               <el-input v-model="form.queryParam" placeholder="请输入路由参数" maxlength="255" />
               <template #label>
@@ -194,7 +194,7 @@
               </template>
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="form.menuType === 'C'">
+          <el-col v-if="form.menuType === 'C'" :span="12">
             <el-form-item>
               <template #label>
                 <span>
@@ -212,7 +212,7 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="form.menuType !== 'F'">
+          <el-col v-if="form.menuType !== 'F'" :span="12">
             <el-form-item>
               <template #label>
                 <span>
@@ -271,14 +271,14 @@ interface MenuOptionsType {
   children: MenuOptionsType[] | undefined;
 }
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance
-const { sys_show_hide, sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_show_hide", "sys_normal_disable"));
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_show_hide, sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_show_hide', 'sys_normal_disable'));
 
-const menuList = ref<MenuVO[]>([])
-const loading = ref(true)
-const showSearch = ref(true)
-const menuOptions = ref<MenuOptionsType[]>([])
-const isExpandAll = ref(false)
+const menuList = ref<MenuVO[]>([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const menuOptions = ref<MenuOptionsType[]>([]);
+const isExpandAll = ref(false);
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -295,11 +295,11 @@ const initFormData = {
   icon: '',
   menuType: MenuTypeEnum.M,
   orderNum: 1,
-  isFrame: "1",
-  isCache: "0",
-  visible: "0",
-  status: "0"
-}
+  isFrame: '1',
+  isCache: '0',
+  visible: '0',
+  status: '0'
+};
 const data = reactive<PageData<MenuForm, MenuQuery>>({
   form: { ...initFormData },
   queryParams: {
@@ -307,73 +307,73 @@ const data = reactive<PageData<MenuForm, MenuQuery>>({
     status: undefined
   },
   rules: {
-    menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
-    orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
-    path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
-  },
-})
+    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 { queryParams, form, rules } = toRefs<PageData<MenuForm, MenuQuery>>(data);
 /** 查询菜单列表 */
 const getList = async () => {
-  loading.value = true
+  loading.value = true;
   const res = await listMenu(queryParams.value);
-  const data = proxy?.handleTree<MenuVO>(res.data, "menuId")
+  const data = proxy?.handleTree<MenuVO>(res.data, 'menuId');
   if (data) {
-    menuList.value = data
+    menuList.value = data;
   }
-  loading.value = false
-}
+  loading.value = false;
+};
 /** 查询菜单下拉树结构 */
 const getTreeselect = async () => {
-  menuOptions.value = []
+  menuOptions.value = [];
   const response = await listMenu();
-  const menu: MenuOptionsType = { menuId: 0, menuName: "主类目", children: [] }
-  menu.children = proxy?.handleTree<MenuOptionsType>(response.data, "menuId")
-  menuOptions.value.push(menu)
-}
+  const menu: MenuOptionsType = { menuId: 0, menuName: '主类目', children: [] };
+  menu.children = proxy?.handleTree<MenuOptionsType>(response.data, 'menuId');
+  menuOptions.value.push(menu);
+};
 /** 取消按钮 */
 const cancel = () => {
-  reset()
-  dialog.visible = false
-}
+  reset();
+  dialog.visible = false;
+};
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   menuFormRef.value?.resetFields();
-}
+};
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   getList();
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 /** 新增按钮操作 */
 const handleAdd = (row?: MenuVO) => {
   reset();
   getTreeselect();
-  row && row.menuId ? form.value.parentId = row.menuId : form.value.parentId = 0;
+  row && row.menuId ? (form.value.parentId = row.menuId) : (form.value.parentId = 0);
   dialog.visible = true;
-  dialog.title = "添加菜单";
-}
+  dialog.title = '添加菜单';
+};
 /** 展开/折叠操作 */
 const handleToggleExpandAll = () => {
   isExpandAll.value = !isExpandAll.value;
-  toggleExpandAll(menuList.value, isExpandAll.value)
-}
+  toggleExpandAll(menuList.value, isExpandAll.value);
+};
 /** 展开/折叠所有 */
 const toggleExpandAll = (data: MenuVO[], status: boolean) => {
   data.forEach((item: MenuVO) => {
-    menuTableRef.value?.toggleRowExpansion(item, status)
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
-  })
-}
+    menuTableRef.value?.toggleRowExpansion(item, status);
+    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
+  });
+};
 /** 修改按钮操作 */
 const handleUpdate = async (row: MenuVO) => {
   reset();
@@ -383,26 +383,26 @@ const handleUpdate = async (row: MenuVO) => {
     form.value = data;
   }
   dialog.visible = true;
-  dialog.title = "修改菜单";
-}
+  dialog.title = '修改菜单';
+};
 /** 提交按钮 */
 const submitForm = () => {
   menuFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.menuId ? await updateMenu(form.value) : await addMenu(form.value);
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
-  })
-}
+  });
+};
 /** 删除按钮操作 */
 const handleDelete = async (row: MenuVO) => {
   await proxy?.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?');
   await delMenu(row.menuId);
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
-}
+  proxy?.$modal.msgSuccess('删除成功');
+};
 
 onMounted(() => {
   getList();
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index 0c41ce177c918a358a42e6f1230e582073585d42..7d4bbe057f68054ff8ff8d176f40a263e7c41906 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="公告标题" prop="noticeTitle">
-              <el-input v-model="queryParams.noticeTitle" placeholder="请输入公告标题" clearable style="width: 200px" @keyup.enter="handleQuery" />
+              <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 style="width: 200px" @keyup.enter="handleQuery" />
+              <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 style="width: 200px">
+              <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>
@@ -28,25 +28,25 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:notice:add']">新增</el-button>
+            <el-button v-hasPermi="['system:notice:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:notice:edit']"
+            <el-button v-hasPermi="['system:notice:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
               >修改</el-button
             >
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:notice:remove']">
+            <el-button v-hasPermi="['system:notice:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="序号" align="center" prop="noticeId" width="100" v-if="false" />
+        <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">
@@ -67,19 +67,19 @@
         <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="['system:notice:edit']"></el-button>
+              <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 link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:notice:remove']"></el-button>
+              <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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改公告对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="780px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="780px" append-to-body>
       <el-form ref="noticeFormRef" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="12">
@@ -97,8 +97,7 @@
           <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" :label="dict.value">{{ dict.label
-                }}</el-radio>
+                <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>
@@ -120,11 +119,11 @@
 </template>
 
 <script setup name="Notice" lang="ts">
-import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
-import { NoticeForm, NoticeQuery, NoticeVO } from "@/api/system/notice/types";
+import { listNotice, getNotice, delNotice, addNotice, updateNotice } from '@/api/system/notice';
+import { NoticeForm, NoticeQuery, NoticeVO } from '@/api/system/notice/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_notice_status, sys_notice_type } = toRefs<any>(proxy?.useDict("sys_notice_status", "sys_notice_type"));
+const { sys_notice_status, sys_notice_type } = toRefs<any>(proxy?.useDict('sys_notice_status', 'sys_notice_type'));
 
 const noticeList = ref<NoticeVO[]>([]);
 const loading = ref(true);
@@ -137,7 +136,6 @@ const total = ref(0);
 const queryFormRef = ref<ElFormInstance>();
 const noticeFormRef = ref<ElFormInstance>();
 
-
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -148,10 +146,10 @@ const initFormData: NoticeForm = {
   noticeTitle: '',
   noticeType: '',
   noticeContent: '',
-  status: "0",
+  status: '0',
   remark: '',
   createByName: ''
-}
+};
 const data = reactive<PageData<NoticeForm, NoticeQuery>>({
   form: { ...initFormData },
   queryParams: {
@@ -163,9 +161,9 @@ const data = reactive<PageData<NoticeForm, NoticeQuery>>({
     noticeType: ''
   },
   rules: {
-    noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
-    noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]
-  },
+    noticeTitle: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
+    noticeType: [{ required: true, message: '公告类型不能为空', trigger: 'change' }]
+  }
 });
 
 const { queryParams, form, rules } = toRefs(data);
@@ -177,39 +175,39 @@ const getList = async () => {
   noticeList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 /** 取消按钮 */
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   noticeFormRef.value?.resetFields();
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: NoticeVO[]) => {
-  ids.value = selection.map(item => item.noticeId);
+  ids.value = selection.map((item) => item.noticeId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = "添加公告";
-}
+  dialog.title = '添加公告';
+};
 /**修改按钮操作 */
 const handleUpdate = async (row?: NoticeVO) => {
   reset();
@@ -217,29 +215,29 @@ const handleUpdate = async (row?: NoticeVO) => {
   const { data } = await getNotice(noticeId);
   Object.assign(form.value, data);
   dialog.visible = true;
-  dialog.title = "修改公告";
-}
+  dialog.title = '修改公告';
+};
 /** 提交按钮 */
 const submitForm = () => {
   noticeFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.noticeId ? await updateNotice(form.value) : await addNotice(form.value);
-      proxy?.$modal.msgSuccess("修改成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
   });
-}
+};
 /** 删除按钮操作 */
 const handleDelete = async (row?: NoticeVO) => {
-  const noticeIds = row?.noticeId || ids.value
+  const noticeIds = row?.noticeId || ids.value;
   await proxy?.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？');
   await delNotice(noticeIds);
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
-}
+  proxy?.$modal.msgSuccess('删除成功');
+};
 
 onMounted(() => {
   getList();
-})
+});
 </script>
diff --git a/src/views/system/oss/config.vue b/src/views/system/oss/config.vue
index 876347ae7bb4051dd28c030bb403b96f076d45ea..41766f6fa79f58e0f8fceba8a7359cd14b9943e8 100644
--- a/src/views/system/oss/config.vue
+++ b/src/views/system/oss/config.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="配置key" prop="configKey">
-              <el-input v-model="queryParams.configKey" placeholder="配置key" clearable style="width: 200px" @keyup.enter="handleQuery" />
+              <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 style="width: 200px" @keyup.enter="handleQuery" />
+              <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 style="width: 200px">
+              <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
                 <el-option key="0" label="是" value="0" />
                 <el-option key="1" label="否" value="1" />
               </el-select>
@@ -29,37 +29,39 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:ossConfig:add']">新增</el-button>
+            <el-button v-hasPermi="['system:ossConfig:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:ossConfig:edit']">修改</el-button>
+            <el-button v-hasPermi="['system:ossConfig:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
+              >修改</el-button
+            >
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:ossConfig:remove']">
+            <el-button v-hasPermi="['system:ossConfig:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" :data="ossConfigList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="主建" align="center" prop="ossConfigId" v-if="columns[0].visible" />
-        <el-table-column label="配置key" align="center" prop="configKey" v-if="columns[1].visible" />
-        <el-table-column label="访问站点" align="center" prop="endpoint" v-if="columns[2].visible" width="200" />
-        <el-table-column label="自定义域名" align="center" prop="domain" v-if="columns[3].visible" width="200" />
-        <el-table-column label="桶名称" align="center" prop="bucketName" v-if="columns[4].visible" />
-        <el-table-column label="前缀" align="center" prop="prefix" v-if="columns[5].visible" />
-        <el-table-column label="域" align="center" prop="region" v-if="columns[6].visible" />
-        <el-table-column label="桶权限类型" align="center" prop="accessPolicy" v-if="columns[7].visible">
+        <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="domain" 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 type="warning" v-if="scope.row.accessPolicy === '0'">private</el-tag>
-            <el-tag type="success" v-if="scope.row.accessPolicy === '1'">public</el-tag>
-            <el-tag type="info" v-if="scope.row.accessPolicy === '2'">custom</el-tag>
+            <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 label="是否默认" align="center" prop="status" v-if="columns[8].visible">
+        <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="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
           </template>
@@ -67,19 +69,19 @@
         <el-table-column label="操作" fixed="right" align="center" width="150" class-name="small-padding">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:ossConfig:edit']"></el-button>
+              <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 link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:ossConfig:remove']"></el-button>
+              <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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改对象存储配置对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
+    <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" />
@@ -104,14 +106,14 @@
         </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" :label="dict.value">{{ dict.label }}</el-radio>
+            <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 label="0">private</el-radio>
-            <el-radio label="1">public</el-radio>
-            <el-radio label="2">custom</el-radio>
+            <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">
@@ -132,19 +134,11 @@
 </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 { listOssConfig, getOssConfig, delOssConfig, addOssConfig, updateOssConfig, changeOssConfigStatus } from '@/api/system/ossConfig';
+import { OssConfigForm, OssConfigQuery, OssConfigVO } from '@/api/system/ossConfig/types';
 
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance
-const { sys_yes_no } = toRefs<any>(proxy?.useDict("sys_yes_no"));
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_yes_no } = toRefs<any>(proxy?.useDict('sys_yes_no'));
 
 const ossConfigList = ref<OssConfigVO[]>([]);
 const buttonLoading = ref(false);
@@ -176,7 +170,6 @@ const columns = ref<FieldOption[]>([
   { key: 8, label: `状态`, visible: true }
 ]);
 
-
 const initFormData: OssConfigForm = {
   ossConfigId: undefined,
   configKey: '',
@@ -186,12 +179,12 @@ const initFormData: OssConfigForm = {
   prefix: '',
   endpoint: '',
   domain: '',
-  isHttps: "N",
-  accessPolicy: "1",
+  isHttps: 'N',
+  accessPolicy: '1',
   region: '',
-  status: "1",
-  remark: '',
-}
+  status: '1',
+  remark: ''
+};
 const data = reactive<PageData<OssConfigForm, OssConfigQuery>>({
   form: { ...initFormData },
   // 查询参数
@@ -200,47 +193,47 @@ const data = reactive<PageData<OssConfigForm, OssConfigQuery>>({
     pageSize: 10,
     configKey: '',
     bucketName: '',
-    status: '',
+    status: ''
   },
   rules: {
-    configKey: [{ required: true, message: "configKey不能为空", trigger: "blur" },],
+    configKey: [{ required: true, message: 'configKey不能为空', trigger: 'blur' }],
     accessKey: [
-      { required: true, message: "accessKey不能为空", trigger: "blur" },
+      { required: true, message: 'accessKey不能为空', trigger: 'blur' },
       {
         min: 2,
         max: 200,
-        message: "accessKey长度必须介于 2 和 100 之间",
-        trigger: "blur",
-      },
+        message: 'accessKey长度必须介于 2 和 100 之间',
+        trigger: 'blur'
+      }
     ],
     secretKey: [
-      { required: true, message: "secretKey不能为空", trigger: "blur" },
+      { required: true, message: 'secretKey不能为空', trigger: 'blur' },
       {
         min: 2,
         max: 100,
-        message: "secretKey长度必须介于 2 和 100 之间",
-        trigger: "blur",
-      },
+        message: 'secretKey长度必须介于 2 和 100 之间',
+        trigger: 'blur'
+      }
     ],
     bucketName: [
-      { required: true, message: "bucketName不能为空", trigger: "blur" },
+      { required: true, message: 'bucketName不能为空', trigger: 'blur' },
       {
         min: 2,
         max: 100,
-        message: "bucketName长度必须介于 2 和 100 之间",
-        trigger: "blur",
-      },
+        message: 'bucketName长度必须介于 2 和 100 之间',
+        trigger: 'blur'
+      }
     ],
     endpoint: [
-      { required: true, message: "endpoint不能为空", trigger: "blur" },
+      { required: true, message: 'endpoint不能为空', trigger: 'blur' },
       {
         min: 2,
         max: 100,
-        message: "endpoint名称长度必须介于 2 和 100 之间",
-        trigger: "blur",
-      },
+        message: 'endpoint名称长度必须介于 2 和 100 之间',
+        trigger: 'blur'
+      }
     ],
-    accessPolicy: [{ required: true, message: "accessPolicy不能为空", trigger: "blur" }]
+    accessPolicy: [{ required: true, message: 'accessPolicy不能为空', trigger: 'blur' }]
   }
 });
 
@@ -253,39 +246,39 @@ const getList = async () => {
   ossConfigList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 /** 取消按钮 */
 const cancel = () => {
   dialog.visible = false;
   reset();
-}
+};
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   ossConfigFormRef.value?.resetFields();
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 /** 选择条数  */
 const handleSelectionChange = (selection: OssConfigVO[]) => {
-  ids.value = selection.map(item => item.ossConfigId);
+  ids.value = selection.map((item) => item.ossConfigId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = "添加对象存储配置";
-}
+  dialog.title = '添加对象存储配置';
+};
 /** 修改按钮操作 */
 const handleUpdate = async (row?: OssConfigVO) => {
   reset();
@@ -293,49 +286,49 @@ const handleUpdate = async (row?: OssConfigVO) => {
   const res = await getOssConfig(ossConfigId);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改对象存储配置";
-}
+  dialog.title = '修改对象存储配置';
+};
 /** 提交按钮 */
 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);
+        await updateOssConfig(form.value).finally(() => (buttonLoading.value = false));
       } else {
-        await addOssConfig(form.value).finally(() => buttonLoading.value = false);
+        await addOssConfig(form.value).finally(() => (buttonLoading.value = false));
       }
-      proxy?.$modal.msgSuccess("新增成功");
+      proxy?.$modal.msgSuccess('新增成功');
       dialog.visible = false;
       await getList();
     }
   });
-}
+};
 /** 状态修改  */
 const handleStatusChange = async (row: OssConfigVO) => {
-  let text = row.status === "0" ? "启用" : "停用";
+  let text = row.status === '0' ? '启用' : '停用';
   try {
     await proxy?.$modal.confirm('确认要"' + text + '""' + row.configKey + '"配置吗?');
     await changeOssConfigStatus(row.ossConfigId, row.status, row.configKey);
-    await getList()
-    proxy?.$modal.msgSuccess(text + "成功");
-  } catch { return } finally {
-    row.status = row.status === "0" ? "1" : "0";
+    await getList();
+    proxy?.$modal.msgSuccess(text + '成功');
+  } catch {
+    return;
+  } finally {
+    row.status = row.status === '0' ? '1' : '0';
   }
-
-}
+};
 /** 删除按钮操作 */
 const handleDelete = async (row?: OssConfigVO) => {
   const ossConfigIds = row?.ossConfigId || ids.value;
   await proxy?.$modal.confirm('是否确认删除OSS配置编号为"' + ossConfigIds + '"的数据项?');
   loading.value = true;
-  await delOssConfig(ossConfigIds).finally(() => loading.value = false);
+  await delOssConfig(ossConfigIds).finally(() => (loading.value = false));
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
-
-}
+  proxy?.$modal.msgSuccess('删除成功');
+};
 
 onMounted(() => {
   getList();
-})
+});
 </script>
diff --git a/src/views/system/oss/index.vue b/src/views/system/oss/index.vue
index ec11708790f9fcad0471a383aa2bb807ae0bac62..a2f1f1b6077bfa279a3624c29069710a7735e2f0 100644
--- a/src/views/system/oss/index.vue
+++ b/src/views/system/oss/index.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="文件名" prop="fileName">
-              <el-input v-model="queryParams.fileName" placeholder="请输入文件名" clearable style="width: 200px" @keyup.enter="handleQuery" />
+              <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 style="width: 200px" @keyup.enter="handleQuery" />
+              <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 style="width: 200px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.fileSuffix" placeholder="请输入文件后缀" clearable @keyup.enter="handleQuery" />
             </el-form-item>
-            <el-form-item label="创建时间">
+            <el-form-item label="创建时间" style="width: 308px;">
               <el-date-picker
                 v-model="dateRangeCreateTime"
                 value-format="YYYY-MM-DD HH:mm:ss"
@@ -25,7 +25,7 @@
               ></el-date-picker>
             </el-form-item>
             <el-form-item label="服务商" prop="service">
-              <el-input v-model="queryParams.service" placeholder="请输入服务商" clearable style="width: 200px" @keyup.enter="handleQuery" />
+              <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>
@@ -40,44 +40,42 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Upload" @click="handleFile" v-hasPermi="['system:oss:upload']">上传文件</el-button>
+            <el-button v-hasPermi="['system:oss:upload']" type="primary" plain icon="Upload" @click="handleFile">上传文件</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Upload" @click="handleImage" v-hasPermi="['system:oss:upload']">上传图片</el-button>
+            <el-button v-hasPermi="['system:oss:upload']" type="primary" plain icon="Upload" @click="handleImage">上传图片</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:oss:remove']">
+            <el-button v-hasPermi="['system:oss:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button
+              v-hasPermi="['system:oss:edit']"
               :type="previewListResource ? 'danger' : 'warning'"
               plain
               @click="handlePreviewListResource(!previewListResource)"
-              v-hasPermi="['system:oss:edit']"
-              >预览开关 :
-              {{
-                previewListResource ? "禁用" : "启用" }}</el-button
+              >预览开关 : {{ previewListResource ? '禁用' : '启用' }}</el-button
             >
           </el-col>
           <el-col :span="1.5">
-            <el-button type="info" plain icon="Operation" @click="handleOssConfig" v-hasPermi="['system:oss:list']">配置管理</el-button>
+            <el-button v-hasPermi="['system:oss:list']" type="info" plain icon="Operation" @click="handleOssConfig">配置管理</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table
+        v-if="showTable"
         v-loading="loading"
         :data="ossList"
-        @selection-change="handleSelectionChange"
         :header-cell-class-name="handleHeaderClass"
+        @selection-change="handleSelectionChange"
         @header-click="handleHeaderCLick"
-        v-if="showTable"
       >
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="对象存储主键" align="center" prop="ossId" v-if="false" />
+        <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" />
@@ -90,7 +88,7 @@
               :src="scope.row.url"
               :preview-src-list="[scope.row.url]"
             />
-            <span v-text="scope.row.url" v-if="!checkFileSuffix(scope.row.fileSuffix) || !previewListResource" />
+            <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">
@@ -103,23 +101,23 @@
         <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="Download" @click="handleDownload(scope.row)" v-hasPermi="['system:oss:download']"></el-button>
+              <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 link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:oss:remove']"></el-button>
+              <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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改OSS对象存储对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <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-model="form.file" v-if="type === 0" />
-          <imageUpload v-model="form.file" v-if="type === 1" />
+          <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>
@@ -133,9 +131,9 @@
 </template>
 
 <script setup name="Oss" lang="ts">
-import { listOss, delOss } from "@/api/system/oss";
-import ImagePreview from "@/components/ImagePreview/index.vue";
-import { OssForm, OssQuery, OssVO } from "@/api/system/oss/types";
+import { listOss, delOss } from '@/api/system/oss';
+import ImagePreview from '@/components/ImagePreview/index.vue';
+import { OssForm, OssQuery, OssVO } from '@/api/system/oss/types';
 
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -165,8 +163,8 @@ const ossFormRef = ref<ElFormInstance>();
 const queryFormRef = ref<ElFormInstance>();
 
 const initFormData = {
-  file: undefined,
-}
+  file: undefined
+};
 const data = reactive<PageData<OssForm, OssQuery>>({
   form: { ...initFormData },
   // 查询参数
@@ -182,9 +180,7 @@ const data = reactive<PageData<OssForm, OssQuery>>({
     isAsc: defaultSort.value.order
   },
   rules: {
-    file: [
-      { required: true, message: "文件不能为空", trigger: "blur" }
-    ]
+    file: [{ required: true, message: '文件不能为空', trigger: 'blur' }]
   }
 });
 
@@ -193,19 +189,18 @@ const { queryParams, form, rules } = toRefs(data);
 /** 查询OSS对象存储列表 */
 const getList = async () => {
   loading.value = true;
-  const res = await proxy?.getConfigKey("sys.oss.previewListResource");
+  const res = await proxy?.getConfigKey('sys.oss.previewListResource');
   previewListResource.value = res?.data === undefined ? true : res.data === 'true';
-  const response = await listOss(proxy?.addDateRange(queryParams.value, dateRangeCreateTime.value, "CreateTime"));
+  const response = await listOss(proxy?.addDateRange(queryParams.value, dateRangeCreateTime.value, 'CreateTime'));
   ossList.value = response.rows;
   total.value = response.total;
   loading.value = false;
   showTable.value = true;
-}
-function checkFileSuffix(fileSuffix: string[]) {
-  let arr = ["png", "jpg", "jpeg"];
-  return arr.some(type => {
-    return fileSuffix.indexOf(type) > -1;
-  });
+};
+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() {
@@ -233,18 +228,18 @@ function resetQuery() {
 }
 /** 选择条数  */
 function handleSelectionChange(selection: OssVO[]) {
-  ids.value = selection.map(item => item.ossId);
+  ids.value = selection.map((item) => item.ossId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 }
 /** 设置列的排序为我们自定义的排序 */
 const handleHeaderClass = ({ column }: any): any => {
-  column.order = column.multiOrder
-}
+  column.order = column.multiOrder;
+};
 /** 点击表头进行排序 */
 const handleHeaderCLick = (column: any) => {
   if (column.sortable !== 'custom') {
-    return
+    return;
   }
   switch (column.multiOrder) {
     case 'descending':
@@ -257,20 +252,20 @@ const handleHeaderCLick = (column: any) => {
       column.multiOrder = 'descending';
       break;
   }
-  handleOrderChange(column.property, column.multiOrder)
-}
+  handleOrderChange(column.property, column.multiOrder);
+};
 const handleOrderChange = (prop: string, order: string) => {
-  let orderByArr = queryParams.value.orderByColumn ? queryParams.value.orderByColumn.split(",") : [];
-  let isAscArr = queryParams.value.isAsc ? queryParams.value.isAsc.split(",") : [];
-  let propIndex = orderByArr.indexOf(prop)
+  let orderByArr = queryParams.value.orderByColumn ? queryParams.value.orderByColumn.split(',') : [];
+  let isAscArr = queryParams.value.isAsc ? queryParams.value.isAsc.split(',') : [];
+  let propIndex = orderByArr.indexOf(prop);
   if (propIndex !== -1) {
     if (order) {
       //排序里已存在 只修改排序
       isAscArr[propIndex] = order;
     } else {
       //如果order为null 则删除排序字段和属性
-      isAscArr.splice(propIndex, 1);//删除排序
-      orderByArr.splice(propIndex, 1);//删除属性
+      isAscArr.splice(propIndex, 1); //删除排序
+      orderByArr.splice(propIndex, 1); //删除属性
     }
   } else {
     //排序里不存在则新增排序
@@ -278,58 +273,60 @@ const handleOrderChange = (prop: string, order: string) => {
     isAscArr.push(order);
   }
   //合并排序
-  queryParams.value.orderByColumn = orderByArr.join(",");
-  queryParams.value.isAsc = isAscArr.join(",");
+  queryParams.value.orderByColumn = orderByArr.join(',');
+  queryParams.value.isAsc = isAscArr.join(',');
   getList();
-}
+};
 /** 任务日志列表查询 */
 const handleOssConfig = () => {
-  router.push('/system/oss-config/index')
-}
+  router.push('/system/oss-config/index');
+};
 /** 文件按钮操作 */
 const handleFile = () => {
   reset();
   type.value = 0;
   dialog.visible = true;
-  dialog.title = "上传文件";
-}
+  dialog.title = '上传文件';
+};
 /** 图片按钮操作 */
 const handleImage = () => {
   reset();
   type.value = 1;
   dialog.visible = true;
-  dialog.title = "上传图片";
-}
+  dialog.title = '上传图片';
+};
 /** 提交按钮 */
 const submitForm = () => {
   dialog.visible = false;
   getList();
-}
+};
 /** 下载按钮操作 */
 const handleDownload = (row: OssVO) => {
-  proxy?.$download.oss(row.ossId)
-}
+  proxy?.$download.oss(row.ossId);
+};
 /** 用户状态修改  */
 const handlePreviewListResource = async (preview: boolean) => {
-  let text = preview ? "启用" : "停用";
+  let text = preview ? '启用' : '停用';
   try {
     await proxy?.$modal.confirm('确认要"' + text + '""预览列表图片"配置吗?');
-    await proxy?.updateConfigByKey("sys.oss.previewListResource", preview);
-    await getList()
-    proxy?.$modal.msgSuccess(text + "成功");
-  } catch { return }
-}
+    await proxy?.updateConfigByKey('sys.oss.previewListResource', preview);
+    await getList();
+    proxy?.$modal.msgSuccess(text + '成功');
+  } catch {
+    return;
+  }
+};
 /** 删除按钮操作 */
 const handleDelete = async (row?: OssVO) => {
   const ossIds = row?.ossId || ids.value;
   await proxy?.$modal.confirm('是否确认删除OSS对象存储编号为"' + ossIds + '"的数据项?');
   loading.value = true;
-  await delOss(ossIds).finally(() => loading.value = false);
+  await delOss(ossIds).finally(() => (loading.value = false));
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
-}
+  proxy?.$modal.msgSuccess('删除成功');
+};
 
 onMounted(() => {
   getList();
-})
+});
 </script>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index b1cddd3b8df081ae56e0688a4396b1f700839990..49b735b7c5ba60264f8341b719e168edc61869a5 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -1,117 +1,182 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+    <el-row :gutter="20">
+      <!-- 部门树 -->
+      <el-col :lg="4" :xs="24" style="">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="70">
+          <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
+          <el-tree
+            ref="deptTreeRef"
+            class="mt-2"
+            node-key="id"
+            :data="deptOptions"
+            :props="{ label: 'label', children: 'children' }"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          />
+        </el-card>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card shadow="hover">
+              <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+                <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' }"
+                    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>
+        </transition>
+        <el-card shadow="hover">
+          <template #header>
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button v-hasPermi="['system:post:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button v-hasPermi="['system:post:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
+                  >修改</el-button
+                >
+              </el-col>
+              <el-col :span="1.5">
+                <el-button v-hasPermi="['system:post:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
+                  删除
+                </el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button v-hasPermi="['system:post:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+              </el-col>
+              <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
+            </el-row>
+          </template>
+          <el-table v-loading="loading" :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' }"
+                value-key="id"
+                placeholder="请选择部门"
+                check-strictly
+              />
+            </el-form-item>
             <el-form-item label="岗位编码" prop="postCode">
-              <el-input v-model="queryParams.postCode" placeholder="请输入岗位编码" clearable style="width: 200px" @keyup.enter="handleQuery" />
+              <el-input v-model="form.postCode" placeholder="请输入编码名称" />
             </el-form-item>
-            <el-form-item label="岗位名称" prop="postName">
-              <el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable style="width: 200px" @keyup.enter="handleQuery" />
+            <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-select v-model="queryParams.status" placeholder="岗位状态" clearable style="width: 200px">
-                <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-              </el-select>
+            <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>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
             </el-form-item>
           </el-form>
-        </el-card>
-      </div>
-    </transition>
-    <el-card shadow="hover">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:post:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:post:edit']">修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:post:remove']">
-              删除
-            </el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:post:export']">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-      </template>
-
-      <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="岗位编号" align="center" prop="postId" v-if="false" />
-        <el-table-column label="岗位编码" align="center" prop="postCode" />
-        <el-table-column label="岗位名称" align="center" prop="postName" />
-        <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 #footer>
+            <div class="dialog-footer">
+              <el-button type="primary" @click="submitForm">确 定</el-button>
+              <el-button @click="cancel">取 消</el-button>
+            </div>
           </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 link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']"></el-button>
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post: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>
-
-    <!-- 添加或修改岗位对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" 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="postCode">
-          <el-input v-model="form.postCode" 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" :label="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-dialog>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script setup name="Post" lang="ts">
-import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post";
-import { PostForm, PostQuery, PostVO } from "@/api/system/post/types";
+import { listPost, addPost, delPost, getPost, updatePost } from '@/api/system/post';
+import { PostForm, PostQuery, PostVO } from '@/api/system/post/types';
+import { DeptVO } from '@/api/system/dept/types';
+import api from '@/api/system/user';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
 
 const postList = ref<PostVO[]>([]);
 const loading = ref(true);
@@ -120,7 +185,9 @@ const ids = ref<Array<number | string>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-
+const deptName = ref('');
+const deptOptions = ref<DeptVO[]>([]);
+const deptTreeRef = ref<ElTreeInstance>();
 const postFormRef = ref<ElFormInstance>();
 const queryFormRef = ref<ElFormInstance>();
 
@@ -131,12 +198,14 @@ const dialog = reactive<DialogOption>({
 
 const initFormData: PostForm = {
   postId: undefined,
+  deptId: undefined,
   postCode: '',
   postName: '',
+  postCategory: '',
   postSort: 0,
-  status: "0",
+  status: '0',
   remark: ''
-}
+};
 
 const data = reactive<PageData<PostForm, PostQuery>>({
   form: { ...initFormData },
@@ -145,17 +214,48 @@ const data = reactive<PageData<PostForm, PostQuery>>({
     pageSize: 10,
     postCode: '',
     postName: '',
+    postCategory: '',
     status: ''
   },
   rules: {
-    postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
-    postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
-    postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
+    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 filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
+
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    deptTreeRef.value?.filter(deptName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+/** 查询部门下拉树结构 */
+const getTreeSelect = async () => {
+  const res = await api.deptTreeSelect();
+  deptOptions.value = res.data;
+};
+
+/** 节点单击事件 */
+const handleNodeClick = (data: DeptVO) => {
+  queryParams.value.belongDeptId = data.id;
+  queryParams.value.deptId = undefined;
+  handleQuery();
+};
+
 /** 查询岗位列表 */
 const getList = async () => {
   loading.value = true;
@@ -163,39 +263,54 @@ const getList = async () => {
   postList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
+
 /** 取消按钮 */
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
+
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   postFormRef.value?.resetFields();
-}
+};
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
+  if (queryParams.value.deptId) {
+    queryParams.value.belongDeptId = undefined;
+  }
   getList();
-}
+};
+
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.deptId = undefined;
+  deptTreeRef.value?.setCurrentKey(undefined);
+  /** 清空左边部门树选中值 */
+  queryParams.value.belongDeptId = undefined;
   handleQuery();
-}
+};
+
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: PostVO[]) => {
-  ids.value = selection.map(item => item.postId);
+  ids.value = selection.map((item) => item.postId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
+
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   dialog.visible = true;
-  dialog.title = "添加岗位";
-}
+  dialog.title = '添加岗位';
+};
+
 /** 修改按钮操作 */
 const handleUpdate = async (row?: PostVO) => {
   reset();
@@ -203,35 +318,43 @@ const handleUpdate = async (row?: PostVO) => {
   const res = await getPost(postId);
   Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改岗位";
-}
+  dialog.title = '修改岗位';
+};
+
 /** 提交按钮 */
 const submitForm = () => {
   postFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.postId ? await updatePost(form.value) : await addPost(form.value);
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
   });
-}
+};
+
 /** 删除按钮操作 */
 const handleDelete = async (row?: PostVO) => {
   const postIds = row?.postId || ids.value;
   await proxy?.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？');
   await delPost(postIds);
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
-}
+  proxy?.$modal.msgSuccess('删除成功');
+};
+
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download("system/post/export", {
-    ...queryParams.value
-  }, `post_${new Date().getTime()}.xlsx`);
-}
+  proxy?.download(
+    'system/post/export',
+    {
+      ...queryParams.value
+    },
+    `post_${new Date().getTime()}.xlsx`
+  );
+};
 
 onMounted(() => {
+  getTreeSelect(); // 初始化部门数据
   getList();
 });
 </script>
diff --git a/src/views/system/role/authUser.vue b/src/views/system/role/authUser.vue
index 7ad8a5a388834dcf032bcbd2ec2d473d81dabe9f..63948043be73373452cc10c892b48629156f8453 100644
--- a/src/views/system/role/authUser.vue
+++ b/src/views/system/role/authUser.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="search" v-show="showSearch">
-        <el-form :model="queryParams" ref="queryFormRef" :inline="true">
+      <div v-show="showSearch" class="search">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
           <el-form-item label="用户名称" prop="userName">
-            <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+            <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 style="width: 240px" @keyup.enter="handleQuery" />
+            <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>
@@ -20,17 +20,17 @@
       <template #header>
         <el-row :gutter="10">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="openSelectUser" v-hasPermi="['system:role:add']">添加用户</el-button>
+            <el-button v-hasPermi="['system:role:add']" type="primary" plain icon="Plus" @click="openSelectUser">添加用户</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="CircleClose" :disabled="multiple" @click="cancelAuthUserAll" v-hasPermi="['system:role:remove']">
+            <el-button v-hasPermi="['system:role:remove']" type="danger" plain icon="CircleClose" :disabled="multiple" @click="cancelAuthUserAll">
               批量取消授权
             </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :search="true"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" :search="true" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
       <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
@@ -52,28 +52,28 @@
         <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="CircleClose" @click="cancelAuthUser(scope.row)" v-hasPermi="['system:role:remove']"> </el-button>
+              <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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-      <select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
+      <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 { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
-import { UserQuery } from "@/api/system/user/types";
-import { UserVO } from "@/api/system/user/types";
-import SelectUser from "./selectUser.vue";
-
+import { allocatedUserList, authUserCancel, authUserCancelAll } from '@/api/system/role';
+import { UserQuery } from '@/api/system/user/types';
+import { UserVO } from '@/api/system/user/types';
+import SelectUser from './selectUser.vue';
+import { RouteLocationNormalized } from 'vue-router';
 
 const route = useRoute();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
+const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
 
 const userList = ref<UserVO[]>([]);
 const loading = ref(true);
@@ -90,7 +90,7 @@ const queryParams = reactive<UserQuery>({
   pageSize: 10,
   roleId: route.params.roleId as string,
   userName: undefined,
-  phonenumber: undefined,
+  phonenumber: undefined
 });
 
 /** 查询授权用户列表 */
@@ -100,47 +100,57 @@ const getList = async () => {
   userList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 // 返回按钮
 const handleClose = () => {
-  const obj = { path: "/system/role" };
+  const obj: RouteLocationNormalized = {
+    path: '/system/role',
+    fullPath: '',
+    hash: '',
+    matched: [],
+    meta: undefined,
+    name: undefined,
+    params: undefined,
+    query: undefined,
+    redirectedFrom: undefined
+  };
   proxy?.$tab.closeOpenPage(obj);
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNum = 1;
   getList();
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 // 多选框选中数据
 const handleSelectionChange = (selection: UserVO[]) => {
-  userIds.value = selection.map(item => item.userId);
+  userIds.value = selection.map((item) => item.userId);
   multiple.value = !selection.length;
-}
+};
 /** 打开授权用户表弹窗 */
 const openSelectUser = () => {
   selectRef.value?.show();
-}
+};
 /** 取消授权按钮操作 */
 const cancelAuthUser = async (row: UserVO) => {
   await proxy?.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？');
   await authUserCancel({ userId: row.userId, roleId: queryParams.roleId });
   await getList();
-  proxy?.$modal.msgSuccess("取消授权成功");
-}
+  proxy?.$modal.msgSuccess('取消授权成功');
+};
 /** 批量取消授权按钮操作 */
 const cancelAuthUserAll = async () => {
   const roleId = queryParams.roleId;
-  const uIds = userIds.value.join(",");
-  await proxy?.$modal.confirm("是否取消选中用户授权数据项?");
+  const uIds = userIds.value.join(',');
+  await proxy?.$modal.confirm('是否取消选中用户授权数据项?');
   await authUserCancelAll({ roleId: roleId, userIds: uIds });
   await getList();
-  proxy?.$modal.msgSuccess("取消授权成功");
-}
+  proxy?.$modal.msgSuccess('取消授权成功');
+};
 
 onMounted(() => {
   getList();
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index bb6fc2ce12f155f4fa9e3e4561b386a3aff63918..bd84af3cac340157e3ace1d42e3f0ea277d936bb 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="角色名称" prop="roleName">
-              <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <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 style="width: 240px" @keyup.enter="handleQuery" />
+              <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 style="width: 240px">
+              <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>
@@ -28,8 +28,8 @@
             </el-form-item>
 
             <el-form-item>
-              <el-button type="primary" @click="handleQuery" icon="Search">搜索</el-button>
-              <el-button @click="resetQuery" icon="Refresh">重置</el-button>
+              <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>
@@ -40,24 +40,24 @@
       <template #header>
         <el-row :gutter="10">
           <el-col :span="1.5">
-            <el-button type="primary" plain @click="handleAdd()" icon="Plus" v-hasPermi="['system:role:add']">新增</el-button>
+            <el-button v-hasPermi="['system:role:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain @click="handleUpdate()" :disabled="single" icon="Edit" v-hasPermi="['system:role:edit']">修改</el-button>
+            <el-button v-hasPermi="['system:role:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">修改</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain :disabled="ids.length === 0" @click="handleDelete()" v-hasPermi="['system:role:delete']">删除</el-button>
+            <el-button v-hasPermi="['system:role:delete']" type="danger" plain :disabled="ids.length === 0" @click="handleDelete()">删除</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:role:export']">导出</el-button>
+            <el-button v-hasPermi="['system:role:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table ref="roleTableRef" v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="角色编号" prop="roleId" width="120" v-if="false" />
+        <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" />
@@ -74,17 +74,17 @@
 
         <el-table-column fixed="right" label="操作" width="180">
           <template #default="scope">
-            <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+            <el-tooltip v-if="scope.row.roleId !== 1" 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 content="删除" placement="top" v-if="scope.row.roleId !== 1">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
+            <el-tooltip v-if="scope.row.roleId !== 1" 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 content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
-              <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+            <el-tooltip v-if="scope.row.roleId !== 1" 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 content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
-              <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+            <el-tooltip v-if="scope.row.roleId !== 1" 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>
@@ -99,7 +99,7 @@
       />
     </el-card>
 
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
       <el-form ref="roleFormRef" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="form.roleName" placeholder="请输入角色名称" />
@@ -120,9 +120,7 @@
         </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" :label="dict.value">{{
-              dict.label
-            }}</el-radio>
+            <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="菜单权限">
@@ -130,10 +128,10 @@
           <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
           <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
           <el-tree
+            ref="menuRef"
             class="tree-border"
             :data="menuOptions"
             show-checkbox
-            ref="menuRef"
             node-key="id"
             :check-strictly="!form.menuCheckStrictly"
             empty-text="加载中，请稍候"
@@ -153,8 +151,8 @@
     </el-dialog>
 
     <!-- 分配角色数据权限对话框 -->
-    <el-dialog :title="dialog.title" v-model="openDataScope" width="500px" append-to-body>
-      <el-form :model="form" label-width="80px" ref="dataScopeRef">
+    <el-dialog v-model="openDataScope" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="dataScopeRef" :model="form" label-width="80px">
         <el-form-item label="角色名称">
           <el-input v-model="form.roleName" :disabled="true" />
         </el-form-item>
@@ -166,16 +164,16 @@
             <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 label="数据权限" v-show="form.dataScope === '2'">
+        <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
-            ref="deptRef"
             node-key="id"
             :check-strictly="!form.deptCheckStrictly"
             empty-text="加载中，请稍候"
@@ -194,7 +192,7 @@
 </template>
 
 <script setup name="Role" lang="ts">
-import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
+import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from '@/api/system/role';
 import { roleMenuTreeselect, treeselect as menuTreeselect } from '@/api/system/menu/index';
 import { RoleVO, RoleForm, RoleQuery, DeptTreeOption } from '@/api/system/role/types';
 import { MenuTreeOption, RoleMenuTree } from '@/api/system/menu/types';
@@ -204,29 +202,29 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
 
 const roleList = ref<RoleVO[]>();
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref<Array<string | number>>([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const dateRange = ref<[DateModelType, DateModelType]>(['', ''])
-const menuOptions = ref<MenuTreeOption[]>([])
-const menuExpand = ref(false)
-const menuNodeAll = ref(false)
-const deptExpand = ref(true)
-const deptNodeAll = ref(false)
-const deptOptions = ref<DeptTreeOption[]>([])
-const openDataScope = ref(false)
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const menuOptions = ref<MenuTreeOption[]>([]);
+const menuExpand = ref(false);
+const menuNodeAll = ref(false);
+const deptExpand = ref(true);
+const deptNodeAll = ref(false);
+const deptOptions = ref<DeptTreeOption[]>([]);
+const openDataScope = ref(false);
 
 /** 数据范围选项*/
 const dataScopeOptions = ref([
-  { value: "1", label: "全部数据权限" },
-  { value: "2", label: "自定数据权限" },
-  { value: "3", label: "本部门数据权限" },
-  { value: "4", label: "本部门及以下数据权限" },
-  { value: "5", label: "仅本人数据权限" }
-])
+  { value: '1', label: '全部数据权限' },
+  { value: '2', label: '自定数据权限' },
+  { value: '3', label: '本部门数据权限' },
+  { value: '4', label: '本部门及以下数据权限' },
+  { value: '5', label: '仅本人数据权限' }
+]);
 
 const queryFormRef = ref<ElFormInstance>();
 const roleFormRef = ref<ElFormInstance>();
@@ -245,8 +243,8 @@ const initForm: RoleForm = {
   remark: '',
   dataScope: '1',
   menuIds: [],
-  deptIds: [],
-}
+  deptIds: []
+};
 
 const data = reactive<PageData<RoleForm, RoleQuery>>({
   form: { ...initForm },
@@ -255,15 +253,15 @@ const data = reactive<PageData<RoleForm, RoleQuery>>({
     pageSize: 10,
     roleName: '',
     roleKey: '',
-    status: '',
+    status: ''
   },
   rules: {
-    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
-    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
-    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
+    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 { form, queryParams, rules } = toRefs(data);
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -274,13 +272,13 @@ const dialog = reactive<DialogOption>({
  * 查询角色列表
  */
 const getList = () => {
-  loading.value = true
-  listRole(proxy?.addDateRange(queryParams.value, dateRange.value)).then(res => {
-    roleList.value = res.rows
-    total.value = res.total
-    loading.value = false
-  })
-}
+  loading.value = true;
+  listRole(proxy?.addDateRange(queryParams.value, dateRange.value)).then((res) => {
+    roleList.value = res.rows;
+    total.value = res.total;
+    loading.value = false;
+  });
+};
 
 /**
  * 搜索按钮操作
@@ -288,14 +286,14 @@ const getList = () => {
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 
 /** 重置 */
 const resetQuery = () => {
-  dateRange.value = ['', '']
+  dateRange.value = ['', ''];
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 /**删除按钮操作 */
 const handleDelete = async (row?: RoleVO) => {
   const roleids = row?.roleId || ids.value;
@@ -303,43 +301,47 @@ const handleDelete = async (row?: RoleVO) => {
   await delRole(roleids);
   getList();
   proxy?.$modal.msgSuccess('删除成功');
-}
+};
 
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download("system/role/export", {
-    ...queryParams.value,
-  }, `role_${new Date().getTime()}.xlsx`)
-}
+  proxy?.download(
+    'system/role/export',
+    {
+      ...queryParams.value
+    },
+    `role_${new Date().getTime()}.xlsx`
+  );
+};
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: RoleVO[]) => {
   ids.value = selection.map((item: RoleVO) => item.roleId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 
 /** 角色状态修改 */
 const handleStatusChange = async (row: RoleVO) => {
-  let text = row.status === "0" ? "启用" : "停用";
+  let text = row.status === '0' ? '启用' : '停用';
   try {
     await proxy?.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?');
     await changeRoleStatus(row.roleId, row.status);
-    proxy?.$modal.msgSuccess(text + "成功");
+    proxy?.$modal.msgSuccess(text + '成功');
   } catch {
-    row.status = row.status === "0" ? "1" : "0";
+    row.status = row.status === '0' ? '1' : '0';
   }
-}
+};
 
 /** 分配用户 */
 const handleAuthUser = (row: RoleVO) => {
-  router.push("/system/role-auth/user/" + row.roleId);
-}
+  router.push('/system/role-auth/user/' + row.roleId);
+};
 
 /** 查询菜单树结构 */
 const getMenuTreeselect = async () => {
   const res = await menuTreeselect();
   menuOptions.value = res.data;
-}
+};
 /** 所有部门节点数据 */
 const getDeptAllCheckedKeys = (): any => {
   // 目前被选中的部门节点
@@ -349,67 +351,65 @@ const getDeptAllCheckedKeys = (): any => {
   if (halfCheckedKeys) {
     checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys);
   }
-  return checkedKeys
-}
+  return checkedKeys;
+};
 /** 重置新增的表单以及其他数据  */
 const reset = () => {
   menuRef.value?.setCheckedKeys([]);
-  menuExpand.value = false
-  menuNodeAll.value = false
-  deptExpand.value = true
-  deptNodeAll.value = false
+  menuExpand.value = false;
+  menuNodeAll.value = false;
+  deptExpand.value = true;
+  deptNodeAll.value = false;
   form.value = { ...initForm };
   roleFormRef.value?.resetFields();
-
-}
+};
 
 /** 添加角色 */
 const handleAdd = () => {
   reset();
   getMenuTreeselect();
   dialog.visible = true;
-  dialog.title = "添加角色";
-}
+  dialog.title = '添加角色';
+};
 /** 修改角色 */
 const handleUpdate = async (row?: RoleVO) => {
   reset();
-  const roleId = row?.roleId || ids.value[0]
+  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 res = await getRoleMenuTreeselect(roleId);
-  dialog.title = "修改角色";
+  dialog.title = '修改角色';
   dialog.visible = true;
   res.checkedKeys.forEach((v) => {
     nextTick(() => {
       menuRef.value?.setChecked(v, true, false);
-    })
-  })
-
-}
+    });
+  });
+};
 /** 根据角色ID查询菜单树结构 */
 const getRoleMenuTreeselect = (roleId: string | number) => {
   return roleMenuTreeselect(roleId).then((res): RoleMenuTree => {
     menuOptions.value = 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: boolean, type: string) => {
-  if (type == "menu") {
+  if (type == 'menu') {
     let treeList = menuOptions.value;
     for (let i = 0; i < treeList.length; i++) {
       if (menuRef.value) {
         menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
       }
     }
-  } else if (type == "dept") {
+  } else if (type == 'dept') {
     let treeList = deptOptions.value;
     for (let i = 0; i < treeList.length; i++) {
       if (deptRef.value) {
@@ -417,23 +417,23 @@ const handleCheckedTreeExpand = (value: boolean, type: string) => {
       }
     }
   }
-}
+};
 /** 树权限（全选/全不选） */
 const handleCheckedTreeNodeAll = (value: any, type: string) => {
-  if (type == "menu") {
-    menuRef.value?.setCheckedNodes(value ? menuOptions.value as any : []);
-  } else if (type == "dept") {
-    deptRef.value?.setCheckedNodes(value ? deptOptions.value as any : []);
+  if (type == 'menu') {
+    menuRef.value?.setCheckedNodes(value ? (menuOptions.value as any) : []);
+  } else if (type == 'dept') {
+    deptRef.value?.setCheckedNodes(value ? (deptOptions.value as any) : []);
   }
-}
+};
 /** 树权限（父子联动） */
 const handleCheckedTreeConnect = (value: any, type: string) => {
-  if (type == "menu") {
+  if (type == 'menu') {
     form.value.menuCheckStrictly = value;
-  } else if (type == "dept") {
+  } else if (type == 'dept') {
     form.value.deptCheckStrictly = value;
   }
-}
+};
 /** 所有菜单节点数据 */
 const getMenuAllCheckedKeys = (): any => {
   // 目前被选中的菜单节点
@@ -444,57 +444,57 @@ const getMenuAllCheckedKeys = (): any => {
     checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys);
   }
   return checkedKeys;
-}
+};
 /** 提交按钮 */
 const submitForm = () => {
   roleFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-      form.value.menuIds = getMenuAllCheckedKeys()
+      form.value.menuIds = getMenuAllCheckedKeys();
       form.value.roleId ? await updateRole(form.value) : await addRole(form.value);
-      proxy?.$modal.msgSuccess("操作成功")
-      dialog.visible = false
-      getList()
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      getList();
     }
-  })
-}
+  });
+};
 /** 取消按钮 */
 const cancel = () => {
-  reset()
+  reset();
   dialog.visible = false;
-}
+};
 /** 选择角色权限范围触发 */
 const dataScopeSelectChange = (value: string) => {
-  if (value !== "2") {
-    deptRef.value?.setCheckedKeys([])
+  if (value !== '2') {
+    deptRef.value?.setCheckedKeys([]);
   }
-}
+};
 /** 分配数据权限操作 */
 const handleDataScope = async (row: RoleVO) => {
   const response = await getRole(row.roleId);
   Object.assign(form.value, response.data);
   const res = await getRoleDeptTreeSelect(row.roleId);
   openDataScope.value = true;
-  dialog.title = "分配数据权限";
+  dialog.title = '分配数据权限';
   await nextTick(() => {
     deptRef.value?.setCheckedKeys(res.checkedKeys);
-  })
-}
+  });
+};
 /** 提交按钮（数据权限） */
 const submitDataScope = async () => {
   if (form.value.roleId) {
     form.value.deptIds = getDeptAllCheckedKeys();
     await dataScope(form.value);
-    proxy?.$modal.msgSuccess("修改成功");
+    proxy?.$modal.msgSuccess('修改成功');
     openDataScope.value = false;
     getList();
   }
-}
+};
 /** 取消按钮（数据权限）*/
 const cancelDataScope = () => {
   dataScopeRef.value?.resetFields();
   form.value = { ...initForm };
   openDataScope.value = false;
-}
+};
 
 onMounted(() => {
   getList();
diff --git a/src/views/system/role/selectUser.vue b/src/views/system/role/selectUser.vue
index e0cd4331738f6b90e3ab3c12c457ff3f9a7a0f5c..ec7a2573999fe799342c67e89ec28eacbe0e4fbc 100644
--- a/src/views/system/role/selectUser.vue
+++ b/src/views/system/role/selectUser.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row>
-    <el-dialog title="选择用户" v-model="visible" width="800px" top="5vh" append-to-body>
-      <el-form :model="queryParams" ref="queryFormRef" :inline="true">
+    <el-dialog v-model="visible" title="选择用户" width="800px" top="5vh" append-to-body>
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
         <el-form-item label="用户名称" prop="userName">
           <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
         </el-form-item>
@@ -14,7 +14,7 @@
         </el-form-item>
       </el-form>
       <el-row>
-        <el-table @row-click="clickRow" ref="tableRef" :data="userList" @selection-change="handleSelectionChange" height="260px">
+        <el-table ref="tableRef" :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" />
@@ -31,7 +31,7 @@
             </template>
           </el-table-column>
         </el-table>
-        <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+        <pagination v-if="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
       </el-row>
       <template #footer>
         <div class="dialog-footer">
@@ -44,16 +44,16 @@
 </template>
 
 <script setup name="SelectUser" lang="ts">
-import { authUserSelectAll, unallocatedUserList } from "@/api/system/role";
+import { authUserSelectAll, unallocatedUserList } from '@/api/system/role';
 import { UserVO } from '@/api/system/user/types';
 import { UserQuery } from '@/api/system/user/types';
 
-
 const props = defineProps({
   roleId: {
-    type: [Number, String]
+    type: [Number, String],
+    required: true
   }
-})
+});
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
@@ -69,7 +69,7 @@ const queryParams = reactive<UserQuery>({
   roleId: undefined,
   userName: undefined,
   phonenumber: undefined
-})
+});
 
 const tableRef = ref<ElTableInstance>();
 const queryFormRef = ref<ElFormInstance>();
@@ -78,7 +78,7 @@ const show = () => {
   queryParams.roleId = props.roleId;
   getList();
   visible.value = true;
-}
+};
 
 /**
  * 选择行
@@ -86,35 +86,35 @@ const show = () => {
 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.rows;
   total.value = res.total;
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNum = 1;
   getList();
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   getList();
-}
+};
 
-const emit = defineEmits(["ok"]);
+const emit = defineEmits(['ok']);
 /**选择授权用户操作 */
 const handleSelectUser = async () => {
   const roleId = queryParams.roleId;
   const ids = userIds.value.join(',');
-  if (ids == "") {
+  if (ids == '') {
     proxy?.$modal.msgError('请选择要分配的用户');
     return;
   }
@@ -122,10 +122,10 @@ const handleSelectUser = async () => {
   proxy?.$modal.msgSuccess('分配成功');
   emit('ok');
   visible.value = false;
-}
+};
 // 暴露
 defineExpose({
-  show,
+  show
 });
 </script>
 
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index 9a7fdf350bfbe1db841b119c6469c8dc1e16aa4c..fabe18d3b4ae71dd72fec914e5fb85e1c325f0c3 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="租户编号" prop="tenantId">
-              <el-input v-model="queryParams.tenantId" placeholder="请输入租户编号" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.tenantId" placeholder="请输入租户编号" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="联系人" prop="contactUserName">
-              <el-input v-model="queryParams.contactUserName" placeholder="请输入联系人" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.contactUserName" placeholder="请输入联系人" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="联系电话" prop="contactPhone">
-              <el-input v-model="queryParams.contactPhone" placeholder="请输入联系电话" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.contactPhone" placeholder="请输入联系电话" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="企业名称" prop="companyName">
-              <el-input v-model="queryParams.companyName" placeholder="请输入企业名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.companyName" placeholder="请输入企业名称" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -29,28 +29,28 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:tenant:add']">新增</el-button>
+            <el-button v-hasPermi="['system:tenant:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:tenant:edit']"
+            <el-button v-hasPermi="['system:tenant:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
               >修改</el-button
             >
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:tenant:remove']">
+            <el-button v-hasPermi="['system:tenant:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:tenant:export']">导出</el-button>
+            <el-button v-hasPermi="['system:tenant:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" :data="tenantList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="id" align="center" prop="id" v-if="false" />
+        <el-table-column v-if="false" label="id" align="center" prop="id" />
         <el-table-column label="租户编号" align="center" prop="tenantId" />
         <el-table-column label="联系人" align="center" prop="contactUserName" />
         <el-table-column label="联系电话" align="center" prop="contactPhone" />
@@ -69,23 +69,23 @@
         <el-table-column width="150" label="操作" align="center" fixed="right" 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="['system:tenant:edit']"></el-button>
+              <el-button v-hasPermi="['system:tenant:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip content="同步套餐" placement="top">
-              <el-button link type="primary" icon="Refresh" @click="handleSyncTenantPackage(scope.row)" v-hasPermi="['system:tenant:edit']">
+              <el-button v-hasPermi="['system:tenant:edit']" link type="primary" icon="Refresh" @click="handleSyncTenantPackage(scope.row)">
               </el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:tenant:remove']"></el-button>
+              <el-button v-hasPermi="['system:tenant: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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
     <!-- 添加或修改租户对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
       <el-form ref="tenantFormRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="企业名称" prop="companyName">
           <el-input v-model="form.companyName" placeholder="请输入企业名称" />
@@ -100,7 +100,7 @@
           <el-input v-model="form.username" placeholder="请输入系统用户名" maxlength="30" />
         </el-form-item>
         <el-form-item v-if="!form.id" label="用户密码" prop="password">
-          <el-input type="password" v-model="form.password" placeholder="请输入系统用户密码" maxlength="20" />
+          <el-input v-model="form.password" type="password" placeholder="请输入系统用户密码" maxlength="20" />
         </el-form-item>
         <el-form-item label="租户套餐" prop="packageId">
           <el-select v-model="form.packageId" :disabled="!!form.tenantId" placeholder="请选择租户套餐" clearable style="width: 100%">
@@ -108,7 +108,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="过期时间" prop="expireTime">
-          <el-date-picker clearable v-model="form.expireTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择过期时间">
+          <el-date-picker v-model="form.expireTime" clearable type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择过期时间">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="用户数量" prop="accountCount">
@@ -124,7 +124,7 @@
           <el-input v-model="form.licenseNumber" placeholder="请输入统一社会信用代码" />
         </el-form-item>
         <el-form-item label="企业简介" prop="intro">
-          <el-input type="textarea" v-model="form.intro" placeholder="请输入企业简介" />
+          <el-input v-model="form.intro" type="textarea" placeholder="请输入企业简介" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
@@ -182,8 +182,8 @@ const initFormData: TenantForm = {
   packageId: '',
   expireTime: '',
   accountCount: 0,
-  status: '0',
-}
+  status: '0'
+};
 const data = reactive<PageData<TenantForm, TenantQuery>>({
   form: { ...initFormData },
   queryParams: {
@@ -195,17 +195,17 @@ const data = reactive<PageData<TenantForm, TenantQuery>>({
     companyName: ''
   },
   rules: {
-    id: [{ required: true, message: "id不能为空", trigger: "blur" }],
-    tenantId: [{ required: true, message: "租户编号不能为空", trigger: "blur" }],
-    contactUserName: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
-    contactPhone: [{ required: true, message: "联系电话不能为空", trigger: "blur" }],
-    companyName: [{ required: true, message: "企业名称不能为空", trigger: "blur" }],
+    id: [{ required: true, message: 'id不能为空', trigger: 'blur' }],
+    tenantId: [{ required: true, message: '租户编号不能为空', trigger: 'blur' }],
+    contactUserName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
+    contactPhone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
+    companyName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
     username: [
-      { required: true, message: "用户名不能为空", trigger: "blur" },
+      { required: true, message: '用户名不能为空', trigger: 'blur' },
       { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
     ],
     password: [
-      { required: true, message: "密码不能为空", trigger: "blur" },
+      { required: true, message: '密码不能为空', trigger: 'blur' },
       { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
     ]
   }
@@ -215,9 +215,9 @@ const { queryParams, form, rules } = toRefs(data);
 
 /** 查询所有租户套餐 */
 const getTenantPackage = async () => {
-  const res = await selectTenantPackage()
+  const res = await selectTenantPackage();
   packageList.value = res.data;
-}
+};
 
 /** 查询租户列表 */
 const getList = async () => {
@@ -226,60 +226,58 @@ const getList = async () => {
   tenantList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 
 // 租户套餐状态修改
 const handleStatusChange = async (row: TenantVO) => {
-  let text = row.status === "0" ? "启用" : "停用";
+  let text = row.status === '0' ? '启用' : '停用';
   try {
     await proxy?.$modal.confirm('确认要"' + text + '""' + row.companyName + '"租户吗？');
     await changeTenantStatus(row.id, row.tenantId, row.status);
-    proxy?.$modal.msgSuccess(text + "成功");
+    proxy?.$modal.msgSuccess(text + '成功');
   } catch {
-    row.status = row.status === "0" ? "1" : "0";
+    row.status = row.status === '0' ? '1' : '0';
   }
-
-
-}
+};
 
 // 取消按钮
 const cancel = () => {
   reset();
   dialog.visible = false;
-}
+};
 
 // 表单重置
 const reset = () => {
   form.value = { ...initFormData };
   tenantFormRef.value?.resetFields();
-}
+};
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 
 // 多选框选中数据
 const handleSelectionChange = (selection: TenantVO[]) => {
-  ids.value = selection.map(item => item.id);
+  ids.value = selection.map((item) => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset();
   getTenantPackage();
   dialog.visible = true;
-  dialog.title = "添加租户";
-}
+  dialog.title = '添加租户';
+};
 
 /** 修改按钮操作 */
 const handleUpdate = async (row?: TenantVO) => {
@@ -287,10 +285,10 @@ const handleUpdate = async (row?: TenantVO) => {
   await getTenantPackage();
   const _id = row?.id || ids.value[0];
   const res = await getTenant(_id);
-  Object.assign(form.value, res.data)
+  Object.assign(form.value, res.data);
   dialog.visible = true;
-  dialog.title = "修改租户";
-}
+  dialog.title = '修改租户';
+};
 
 /** 提交按钮 */
 const submitForm = () => {
@@ -298,28 +296,26 @@ const submitForm = () => {
     if (valid) {
       buttonLoading.value = true;
       if (form.value.id) {
-        await updateTenant(form.value).finally(() => buttonLoading.value = false);
+        await updateTenant(form.value).finally(() => (buttonLoading.value = false));
       } else {
-        await addTenant(form.value).finally(() => buttonLoading.value = false);
+        await addTenant(form.value).finally(() => (buttonLoading.value = false));
       }
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
   });
-}
+};
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: TenantVO) => {
   const _ids = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除租户编号为"' + _ids + '"的数据项？')
+  await proxy?.$modal.confirm('是否确认删除租户编号为"' + _ids + '"的数据项？');
   loading.value = true;
-  await delTenant(_ids).finally(() => loading.value = false);
+  await delTenant(_ids).finally(() => (loading.value = false));
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
-
-
-}
+  proxy?.$modal.msgSuccess('删除成功');
+};
 
 /** 同步租户套餐按钮操作 */
 const handleSyncTenantPackage = async (row: TenantVO) => {
@@ -328,20 +324,26 @@ const handleSyncTenantPackage = async (row: TenantVO) => {
     loading.value = true;
     await syncTenantPackage(row.tenantId, row.packageId);
     await getList();
-    proxy?.$modal.msgSuccess("同步成功");
-  } catch { return } finally {
+    proxy?.$modal.msgSuccess('同步成功');
+  } catch {
+    return;
+  } finally {
     loading.value = false;
   }
-}
+};
 
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download('system/tenant/export', {
-    ...queryParams.value
-  }, `tenant_${new Date().getTime()}.xlsx`)
-}
+  proxy?.download(
+    'system/tenant/export',
+    {
+      ...queryParams.value
+    },
+    `tenant_${new Date().getTime()}.xlsx`
+  );
+};
 
 onMounted(() => {
   getList();
-})
+});
 </script>
diff --git a/src/views/system/tenantPackage/index.vue b/src/views/system/tenantPackage/index.vue
index 53119960310c0466bffde6d6460867ce32e947b8..55cc7d758742c4c6ad1de85562423adfe396c59f 100644
--- a/src/views/system/tenantPackage/index.vue
+++ b/src/views/system/tenantPackage/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="套餐名称" prop="packageName">
-              <el-input v-model="queryParams.packageName" placeholder="请输入套餐名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.packageName" placeholder="请输入套餐名称" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -20,28 +20,28 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:tenantPackage:add']"> 新增 </el-button>
+            <el-button v-hasPermi="['system:tenantPackage:add']" type="primary" plain icon="Plus" @click="handleAdd"> 新增 </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:tenantPackage:edit']">
+            <el-button v-hasPermi="['system:tenantPackage:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">
               修改
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:tenantPackage:remove']">
+            <el-button v-hasPermi="['system:tenantPackage:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:tenantPackage:export']">导出 </el-button>
+            <el-button v-hasPermi="['system:tenantPackage:export']" type="warning" plain icon="Download" @click="handleExport">导出 </el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
       <el-table v-loading="loading" :data="tenantPackageList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="租户套餐id" align="center" prop="packageId" v-if="false" />
+        <el-table-column v-if="false" label="租户套餐id" align="center" prop="packageId" />
         <el-table-column label="套餐名称" align="center" prop="packageName" />
         <el-table-column label="备注" align="center" prop="remark" />
         <el-table-column label="状态" align="center" prop="status">
@@ -52,20 +52,20 @@
         <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="['system:tenantPackage:edit']"></el-button>
+              <el-button v-hasPermi="['system:tenantPackage:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:tenantPackage:remove']"></el-button>
+              <el-button v-hasPermi="['system:tenantPackage: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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
 
     <!-- 添加或修改租户套餐对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
       <el-form ref="tenantPackageFormRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="套餐名称" prop="packageName">
           <el-input v-model="form.packageName" placeholder="请输入套餐名称" />
@@ -75,10 +75,10 @@
           <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选 </el-checkbox>
           <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动 </el-checkbox>
           <el-tree
+            ref="menuTreeRef"
             class="tree-border"
             :data="menuOptions"
             show-checkbox
-            ref="menuTreeRef"
             node-key="id"
             :check-strictly="!form.menuCheckStrictly"
             empty-text="加载中，请稍候"
@@ -107,11 +107,11 @@ import {
   addTenantPackage,
   updateTenantPackage,
   changePackageStatus
-} from "@/api/system/tenantPackage";
-import { treeselect as menuTreeselect, tenantPackageMenuTreeselect } from "@/api/system/menu";
-import { TenantPkgForm, TenantPkgQuery, TenantPkgVO } from "@/api/system/tenantPackage/types";
-import { MenuTreeOption } from "@/api/system/menu/types";
-import to from "await-to-js";
+} from '@/api/system/tenantPackage';
+import { treeselect as menuTreeselect, tenantPackageMenuTreeselect } from '@/api/system/menu';
+import { TenantPkgForm, TenantPkgQuery, TenantPkgVO } from '@/api/system/tenantPackage/types';
+import { MenuTreeOption } from '@/api/system/menu/types';
+import to from 'await-to-js';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -133,15 +133,14 @@ const tenantPackageFormRef = ref<ElFormInstance>();
 
 const dialog = reactive<DialogOption>({
   visible: false,
-  title: ""
+  title: ''
 });
 
-
 const initFormData: TenantPkgForm = {
   packageId: undefined,
-  packageName: "",
-  menuIds: "",
-  remark: "",
+  packageName: '',
+  menuIds: '',
+  remark: '',
   menuCheckStrictly: true
 };
 const data = reactive<PageData<TenantPkgForm, TenantPkgQuery>>({
@@ -149,11 +148,11 @@ const data = reactive<PageData<TenantPkgForm, TenantPkgQuery>>({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    packageName: ""
+    packageName: ''
   },
   rules: {
-    packageId: [{ required: true, message: "租户套餐id不能为空", trigger: "blur" }],
-    packageName: [{ required: true, message: "套餐名称不能为空", trigger: "blur" }]
+    packageId: [{ required: true, message: '租户套餐id不能为空', trigger: 'blur' }],
+    packageName: [{ required: true, message: '套餐名称不能为空', trigger: 'blur' }]
   }
 });
 
@@ -195,13 +194,13 @@ const getList = async () => {
 
 // 租户套餐状态修改
 const handleStatusChange = async (row: TenantPkgVO) => {
-  let text = row.status === "0" ? "启用" : "停用";
-  const [err] = await to(proxy?.$modal.confirm("确认要\"" + text + "\"\"" + row.packageName + "\"套餐吗？") as Promise<any>);
+  let text = row.status === '0' ? '启用' : '停用';
+  const [err] = await to(proxy?.$modal.confirm('确认要"' + text + '""' + row.packageName + '"套餐吗？') as Promise<any>);
   if (err) {
-    row.status = row.status === "0" ? "1" : "0";
+    row.status = row.status === '0' ? '1' : '0';
   } else {
     await changePackageStatus(row.packageId, row.status);
-    proxy?.$modal.msgSuccess(text + "成功");
+    proxy?.$modal.msgSuccess(text + '成功');
   }
 };
 
@@ -234,14 +233,14 @@ const resetQuery = () => {
 
 // 多选框选中数据
 const handleSelectionChange = (selection: TenantPkgVO[]) => {
-  ids.value = selection.map(item => item.packageId);
+  ids.value = selection.map((item) => item.packageId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 };
 
 // 树权限（展开/折叠）
 const handleCheckedTreeExpand = (value: CheckboxValueType, type: string) => {
-  if (type == "menu") {
+  if (type == 'menu') {
     let treeList = menuOptions.value;
     for (let i = 0; i < treeList.length; i++) {
       if (menuTreeRef.value) {
@@ -253,14 +252,14 @@ const handleCheckedTreeExpand = (value: CheckboxValueType, type: string) => {
 
 // 树权限（全选/全不选）
 const handleCheckedTreeNodeAll = (value: CheckboxValueType, type: string) => {
-  if (type == "menu") {
-    menuTreeRef.value?.setCheckedNodes(value ? menuOptions.value as any : []);
+  if (type == 'menu') {
+    menuTreeRef.value?.setCheckedNodes(value ? (menuOptions.value as any) : []);
   }
 };
 
 // 树权限（父子联动）
 const handleCheckedTreeConnect = (value: CheckboxValueType, type: string) => {
-  if (type == "menu") {
+  if (type == 'menu') {
     form.value.menuCheckStrictly = value as boolean;
   }
 };
@@ -270,7 +269,7 @@ const handleAdd = () => {
   reset();
   getMenuTreeselect();
   dialog.visible = true;
-  dialog.title = "添加租户套餐";
+  dialog.title = '添加租户套餐';
 };
 
 /** 修改按钮操作 */
@@ -281,7 +280,7 @@ const handleUpdate = async (row?: TenantPkgVO) => {
   form.value = response.data;
   const res = await getPackageMenuTreeselect(_packageId);
   dialog.visible = true;
-  dialog.title = "修改租户套餐";
+  dialog.title = '修改租户套餐';
   res.data.checkedKeys.forEach((v) => {
     nextTick(() => {
       menuTreeRef.value?.setChecked(v, true, false);
@@ -296,11 +295,11 @@ const submitForm = () => {
       buttonLoading.value = true;
       form.value.menuIds = getMenuAllCheckedKeys();
       if (form.value.packageId != null) {
-        await updateTenantPackage(form.value).finally(() => buttonLoading.value = false);
+        await updateTenantPackage(form.value).finally(() => (buttonLoading.value = false));
       } else {
-        await addTenantPackage(form.value).finally(() => buttonLoading.value = false);
+        await addTenantPackage(form.value).finally(() => (buttonLoading.value = false));
       }
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
@@ -310,20 +309,24 @@ const submitForm = () => {
 /** 删除按钮操作 */
 const handleDelete = async (row?: TenantPkgVO) => {
   const _packageIds = row?.packageId || ids.value;
-  await proxy?.$modal.confirm("是否确认删除租户套餐编号为\"" + _packageIds + "\"的数据项？").finally(() => {
+  await proxy?.$modal.confirm('是否确认删除租户套餐编号为"' + _packageIds + '"的数据项？').finally(() => {
     loading.value = false;
   });
   await delTenantPackage(_packageIds);
   loading.value = true;
   await getList();
-  proxy?.$modal.msgSuccess("删除成功");
+  proxy?.$modal.msgSuccess('删除成功');
 };
 
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download("system/tenantPackage/export", {
-    ...queryParams.value
-  }, `tenantPackage_${new Date().getTime()}.xlsx`);
+  proxy?.download(
+    'system/tenantPackage/export',
+    {
+      ...queryParams.value
+    },
+    `tenantPackage_${new Date().getTime()}.xlsx`
+  );
 };
 
 onMounted(() => {
diff --git a/src/views/system/user/authRole.vue b/src/views/system/user/authRole.vue
index e869ba34181092e5294585e72ca0a25dcd589623..87d233453e21e0023d1fd62ec4033999aa471df6 100644
--- a/src/views/system/user/authRole.vue
+++ b/src/views/system/user/authRole.vue
@@ -2,7 +2,7 @@
   <div class="p-2">
     <div class="panel">
       <h4 class="panel-title">基本信息</h4>
-      <el-form :model="form" label-width="80px" :inline="true">
+      <el-form :model="form" :inline="true">
         <el-row :gutter="10">
           <el-col :span="2.5">
             <el-form-item label="用户昵称" prop="nickName">
@@ -21,12 +21,12 @@
       <h4 class="panel-title">角色信息</h4>
       <div>
         <el-table
+          ref="tableRef"
           v-loading="loading"
           :row-key="getRowKey"
+          :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
           @row-click="clickRow"
-          ref="tableRef"
           @selection-change="handleSelectionChange"
-          :data="roles.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
         >
           <el-table-column label="序号" width="55" type="index" align="center">
             <template #default="scope">
@@ -43,8 +43,8 @@
             </template>
           </el-table-column>
         </el-table>
-        <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
-        <div style="text-align: center;margin-left:-120px;margin-top:30px;">
+        <pagination v-show="total > 0" v-model:page="pageNum" v-model:limit="pageSize" :total="total" />
+        <div style="text-align: center; margin-left: -120px; margin-top: 30px">
           <el-button type="primary" @click="submitForm()">提交</el-button>
           <el-button @click="close()">返回</el-button>
         </div>
@@ -55,9 +55,11 @@
 </template>
 
 <script setup name="AuthRole" lang="ts">
-import { RoleVO } from "@/api/system/role/types";
-import { getAuthRole, updateAuthRole } from "@/api/system/user";
-import { UserForm } from "@/api/system/user/types";
+import { RoleVO } from '@/api/system/role/types';
+import { getAuthRole, updateAuthRole } from '@/api/system/user';
+import { UserForm } from '@/api/system/user/types';
+import { RouteLocationNormalized } from 'vue-router';
+import { parseTime } from '@/utils/ruoyi';
 
 const route = useRoute();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -70,7 +72,7 @@ const roleIds = ref<Array<string | number>>([]);
 const roles = ref<RoleVO[]>([]);
 const form = ref<Partial<UserForm>>({
   nickName: undefined,
-  userName: "",
+  userName: '',
   userId: undefined
 });
 
@@ -83,7 +85,7 @@ const clickRow = (row: RoleVO) => {
 };
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: RoleVO[]) => {
-  roleIds.value = selection.map(item => item.roleId);
+  roleIds.value = selection.map((item) => item.roleId);
 };
 /** 保存选中的数据编号 */
 const getRowKey = (row: RoleVO): string => {
@@ -91,15 +93,25 @@ const getRowKey = (row: RoleVO): string => {
 };
 /** 关闭按钮 */
 const close = () => {
-  const obj = { path: "/system/user" };
+  const obj: RouteLocationNormalized = {
+    fullPath: '',
+    hash: '',
+    matched: [],
+    meta: undefined,
+    name: undefined,
+    params: undefined,
+    query: undefined,
+    redirectedFrom: undefined,
+    path: '/system/user'
+  };
   proxy?.$tab.closeOpenPage(obj);
 };
 /** 提交按钮 */
 const submitForm = async () => {
   const userId = form.value.userId;
-  const rIds = roleIds.value.join(",");
+  const rIds = roleIds.value.join(',');
   await updateAuthRole({ userId: userId as string, roleIds: rIds });
-  proxy?.$modal.msgSuccess("授权成功");
+  proxy?.$modal.msgSuccess('授权成功');
   close();
 };
 
@@ -112,7 +124,7 @@ const getList = async () => {
     Object.assign(roles.value, res.data.roles);
     total.value = roles.value.length;
     await nextTick(() => {
-      roles.value.forEach(row => {
+      roles.value.forEach((row) => {
         if (row?.flag) {
           tableRef.value?.toggleRowSelection(row, true);
         }
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 100b5a7f2ae03aba858988f2641854e1b8d2b04b..c1bdcf9a4f0dae6f406af72a317e0b9eb7b5bb9b 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -6,8 +6,8 @@
         <el-card shadow="hover">
           <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
           <el-tree
-            class="mt-2"
             ref="deptTreeRef"
+            class="mt-2"
             node-key="id"
             :data="deptOptions"
             :props="{ label: 'label', children: 'children' }"
@@ -21,28 +21,22 @@
       </el-col>
       <el-col :lg="20" :xs="24">
         <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-          <div class="mb-[10px]" v-show="showSearch">
+          <div v-show="showSearch" class="mb-[10px]">
             <el-card shadow="hover">
-              <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
+              <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                 <el-form-item label="用户名称" prop="userName">
-                  <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+                  <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
-                    style="width: 240px"
-                    @keyup.enter="handleQuery"
-                  />
+                  <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 style="width: 240px">
+                  <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-form-item label="创建时间" style="width: 308px">
                   <el-date-picker
                     v-model="dateRange"
                     value-format="YYYY-MM-DD"
@@ -53,8 +47,8 @@
                   ></el-date-picker>
                 </el-form-item>
                 <el-form-item>
-                  <el-button type="primary" @click="handleQuery" icon="Search">搜索</el-button>
-                  <el-button @click="resetQuery" icon="Refresh">重置</el-button>
+                  <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>
@@ -65,15 +59,15 @@
           <template #header>
             <el-row :gutter="10">
               <el-col :span="1.5">
-                <el-button type="primary" plain @click="handleAdd()" v-has-permi="['system:user:add']" icon="Plus">新增</el-button>
+                <el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
               </el-col>
               <el-col :span="1.5">
-                <el-button type="success" plain @click="handleUpdate()" :disabled="single" v-has-permi="['system:user:add']" icon="Edit">
+                <el-button v-has-permi="['system:user:add']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
                   修改
                 </el-button>
               </el-col>
               <el-col :span="1.5">
-                <el-button type="danger" plain @click="handleDelete()" :disabled="multiple" v-has-permi="['system:user:delete']" icon="Delete">
+                <el-button v-has-permi="['system:user:delete']" type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()">
                   删除
                 </el-button>
               </el-col>
@@ -85,38 +79,31 @@
                   ></el-button>
                   <template #dropdown>
                     <el-dropdown-menu>
-                      <el-dropdown-item @click="importTemplate" icon="Download">下载模板</el-dropdown-item>
-                      <el-dropdown-item @click="handleImport" icon="Top"> 导入数据</el-dropdown-item>
-                      <el-dropdown-item @click="handleExport" icon="Download"> 导出数据</el-dropdown-item>
+                      <el-dropdown-item icon="Download" @click="importTemplate">下载模板</el-dropdown-item>
+                      <el-dropdown-item icon="Top" @click="handleImport"> 导入数据</el-dropdown-item>
+                      <el-dropdown-item icon="Download" @click="handleExport"> 导出数据</el-dropdown-item>
                     </el-dropdown-menu>
                   </template>
                 </el-dropdown>
               </el-col>
-              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns" :search="true"></right-toolbar>
+              <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
             </el-row>
           </template>
 
           <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="50" align="center" />
-            <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
-            <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-            <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-            <el-table-column
-              label="部门"
-              align="center"
-              key="deptName"
-              prop="dept.deptName"
-              v-if="columns[3].visible"
-              :show-overflow-tooltip="true"
-            />
-            <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
-            <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
+            <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" prop="userName" :show-overflow-tooltip="true" />
+            <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 label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+            <el-table-column v-if="columns[6].visible" label="创建时间" align="center" prop="createTime" width="160">
               <template #default="scope">
                 <span>{{ scope.row.createTime }}</span>
               </template>
@@ -124,19 +111,19 @@
 
             <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
               <template #default="scope">
-                <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">
-                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
+                <el-tooltip v-if="scope.row.userId !== 1" 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 content="删除" placement="top" v-if="scope.row.userId !== 1">
-                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>
+                <el-tooltip v-if="scope.row.userId !== 1" 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 content="重置密码" placement="top" v-if="scope.row.userId !== 1">
-                  <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>
+                <el-tooltip v-if="scope.row.userId !== 1" 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 content="分配角色" placement="top" v-if="scope.row.userId !== 1">
-                  <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
+                <el-tooltip v-if="scope.row.userId !== 1" 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>
@@ -144,9 +131,9 @@
 
           <pagination
             v-show="total > 0"
-            :total="total"
             v-model:page="queryParams.pageNum"
             v-model:limit="queryParams.pageSize"
+            :total="total"
             @pagination="getList"
           />
         </el-card>
@@ -154,8 +141,8 @@
     </el-row>
 
     <!-- 添加或修改用户配置对话框 -->
-    <el-dialog ref="formDialogRef" :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body @close="closeDialog">
-      <el-form :model="form" :rules="rules" ref="userFormRef" label-width="80px">
+    <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">
@@ -171,6 +158,7 @@
                 value-key="id"
                 placeholder="请选择归属部门"
                 check-strictly
+                @change="handleDeptChange"
               />
             </el-form-item>
           </el-col>
@@ -210,8 +198,7 @@
           <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" :label="dict.value">{{
-                  dict.label }}</el-radio>
+                <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>
@@ -231,8 +218,8 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="角色">
-              <el-select v-model="form.roleIds" multiple placeholder="请选择">
+            <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"
@@ -261,7 +248,7 @@
     </el-dialog>
 
     <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
+    <el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
       <el-upload
         ref="uploadRef"
         :limit="1"
@@ -282,7 +269,7 @@
           <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="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
+            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
           </div>
         </template>
       </el-upload>
@@ -297,22 +284,22 @@
 </template>
 
 <script setup name="User" lang="ts">
-import api from "@/api/system/user"
+import api from '@/api/system/user';
 import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
-import { treeselect } from "@/api/system/dept";
-import { DeptVO } from "@/api/system/dept/types";
-import { RoleVO } from "@/api/system/role/types";
-import { PostVO } from "@/api/system/post/types";
-import { to } from "await-to-js";
-import { globalHeaders } from "@/utils/request";
+import { DeptVO } from '@/api/system/dept/types';
+import { RoleVO } from '@/api/system/role/types';
+import { PostQuery, PostVO } from '@/api/system/post/types';
+import { treeselect } from '@/api/system/dept';
+import { globalHeaders } from '@/utils/request';
+import { to } from 'await-to-js';
+import { optionselect } from '@/api/system/post';
 
 const router = useRouter();
-const { proxy } = getCurrentInstance() as ComponentInternalInstance
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_normal_disable, sys_user_sex } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
-
 const userList = ref<UserVO[]>();
 const loading = ref(true);
-const showSearch = ref(true)
+const showSearch = ref(true);
 const ids = ref<Array<number | string>>([]);
 const single = ref(true);
 const multiple = ref(true);
@@ -320,7 +307,7 @@ const total = ref(0);
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 const deptName = ref('');
 const deptOptions = ref<DeptVO[]>([]);
-const initPassword = ref<String>('');
+const initPassword = ref<string>('');
 const postOptions = ref<PostVO[]>([]);
 const roleOptions = ref<RoleVO[]>([]);
 /*** 用户导入参数 */
@@ -328,7 +315,7 @@ const upload = reactive<ImportOption>({
   // 是否显示弹出层（用户导入）
   open: false,
   // 弹出层标题（用户导入）
-  title: "",
+  title: '',
   // 是否禁用上传
   isUploading: false,
   // 是否更新已经存在的用户数据
@@ -336,19 +323,18 @@ const upload = reactive<ImportOption>({
   // 设置上传的请求头部
   headers: globalHeaders(),
   // 上传的地址
-  url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
-})
+  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: [] }
-])
-
+  { 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 deptTreeRef = ref<ElTreeInstance>();
 const queryFormRef = ref<ElFormInstance>();
@@ -370,12 +356,13 @@ const initFormData: UserForm = {
   phonenumber: undefined,
   email: undefined,
   sex: undefined,
-  status: "0",
+  status: '0',
   remark: '',
   postIds: [],
   roleIds: []
-}
-const data = reactive<PageData<UserForm, UserQuery>>({
+};
+
+const initData: PageData<UserForm, UserQuery> = {
   form: { ...initFormData },
   queryParams: {
     pageNum: 1,
@@ -383,27 +370,61 @@ const data = reactive<PageData<UserForm, UserQuery>>({
     userName: '',
     phonenumber: '',
     status: '',
-    deptId: ''
+    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" }],
-    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
-    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
+    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[3|4|5|6|7|8|9][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 { queryParams, form, rules } = toRefs<PageData<UserForm, UserQuery>>(data);
 
 /** 通过条件过滤节点  */
 const filterNode = (value: string, data: any) => {
-  if (!value) return true
-  return data.label.indexOf(value) !== -1
-}
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
 /** 根据名称筛选部门树 */
 watchEffect(
-  () => { deptTreeRef.value?.filter(deptName.value); },
+  () => {
+    deptTreeRef.value?.filter(deptName.value);
+  },
   {
     flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
   }
@@ -422,29 +443,28 @@ const getList = async () => {
   loading.value = false;
   userList.value = res.rows;
   total.value = res.total;
-}
+};
 
 /** 节点单击事件 */
 const handleNodeClick = (data: DeptVO) => {
   queryParams.value.deptId = data.id;
-  handleQuery()
-}
-
+  handleQuery();
+};
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
-  queryParams.value.pageNum = 1
-  getList()
-}
+  queryParams.value.pageNum = 1;
+  getList();
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
-  dateRange.value = ['', '']
+  dateRange.value = ['', ''];
   queryFormRef.value?.resetFields();
   queryParams.value.pageNum = 1;
   queryParams.value.deptId = undefined;
   deptTreeRef.value?.setCurrentKey(undefined);
   handleQuery();
-}
+};
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: UserVO) => {
@@ -453,78 +473,90 @@ const handleDelete = async (row?: UserVO) => {
   if (!err) {
     await api.delUser(userIds);
     await getList();
-    proxy?.$modal.msgSuccess("删除成功");
+    proxy?.$modal.msgSuccess('删除成功');
   }
-}
+};
 
 /** 用户状态修改  */
 const handleStatusChange = async (row: UserVO) => {
-  let text = row.status === "0" ? "启用" : "停用"
+  let text = row.status === '0' ? '启用' : '停用';
   try {
     await proxy?.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?');
     await api.changeUserStatus(row.userId, row.status);
-    proxy?.$modal.msgSuccess(text + "成功");
+    proxy?.$modal.msgSuccess(text + '成功');
   } catch (err) {
-    row.status = row.status === "0" ? "1" : "0";
+    row.status = row.status === '0' ? '1' : '0';
   }
-}
+};
 /** 跳转角色分配 */
 const handleAuthRole = (row: UserVO) => {
   const userId = row.userId;
-  router.push("/system/user-auth/role/" + userId);
-}
+  router.push('/system/user-auth/role/' + userId);
+};
 
 /** 重置密码按钮操作 */
 const handleResetPwd = async (row: UserVO) => {
-  const [err, res] = await to(ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    closeOnClickModal: false,
-    inputPattern: /^.{5,20}$/,
-    inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
-  }))
-  if (!err) {
+  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);
-    proxy?.$modal.msgSuccess("修改成功，新密码是：" + res.value);
+    proxy?.$modal.msgSuccess('修改成功，新密码是：' + res.value);
   }
-}
+};
 
 /** 选择条数  */
 const handleSelectionChange = (selection: UserVO[]) => {
   ids.value = selection.map((item) => item.userId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 
 /** 导入按钮操作 */
 const handleImport = () => {
-  upload.title = "用户导入";
+  upload.title = '用户导入';
   upload.open = true;
-}
+};
 /** 导出按钮操作 */
 const handleExport = () => {
-  proxy?.download("system/user/export", {
-    ...queryParams.value,
-  }, `user_${new Date().getTime()}.xlsx`);
+  proxy?.download(
+    'system/user/export',
+    {
+      ...queryParams.value
+    },
+    `user_${new Date().getTime()}.xlsx`
+  );
 };
 /** 下载模板操作 */
 const importTemplate = () => {
-  proxy?.download("system/user/importTemplate", {
-  }, `user_template_${new Date().getTime()}.xlsx`);
-}
+  proxy?.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`);
+};
 
 /**文件上传中处理 */
 const handleFileUploadProgress = () => {
   upload.isUploading = true;
-}
+};
 /** 文件上传成功处理 */
 const handleFileSuccess = (response: any, file: UploadFile) => {
   upload.open = false;
   upload.isUploading = false;
   uploadRef.value?.handleRemove(file);
-  ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
+  ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
+    dangerouslyUseHTMLString: true
+  });
   getList();
-}
+};
 
 /** 提交上传文件 */
 function submitFileForm() {
@@ -538,59 +570,58 @@ const initTreeData = async () => {
     const { data } = await treeselect();
     deptOptions.value = data;
   }
-}
-
+};
 
 /** 重置操作表单 */
 const reset = () => {
   form.value = { ...initFormData };
   userFormRef.value?.resetFields();
-}
+};
 /** 取消按钮 */
 const cancel = () => {
   dialog.visible = false;
   reset();
-}
+};
 
 /** 新增按钮操作 */
 const handleAdd = async () => {
   reset();
   const { data } = await api.getUser();
   dialog.visible = true;
-  dialog.title = "新增用户";
+  dialog.title = '新增用户';
   await initTreeData();
   postOptions.value = data.posts;
   roleOptions.value = data.roles;
   form.value.password = initPassword.value.toString();
-}
+};
+
 /** 修改按钮操作 */
 const handleUpdate = async (row?: UserForm) => {
   reset();
-  const userId = row?.userId || ids.value[0]
-  const { data } = await api.getUser(userId)
+  const userId = row?.userId || ids.value[0];
+  const { data } = await api.getUser(userId);
   dialog.visible = true;
-  dialog.title = "修改用户";
+  dialog.title = '修改用户';
   await initTreeData();
   Object.assign(form.value, data.user);
   postOptions.value = data.posts;
   roleOptions.value = data.roles;
   form.value.postIds = data.postIds;
   form.value.roleIds = data.roleIds;
-  form.value.password = "";
-}
+  form.value.password = '';
+};
 
 /** 提交按钮 */
 const submitForm = () => {
   userFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       form.value.userId ? await api.updateUser(form.value) : await api.addUser(form.value);
-      proxy?.$modal.msgSuccess("操作成功");
+      proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
     }
-  })
-}
-
+  });
+};
 
 /**
  * 关闭用户弹窗
@@ -598,7 +629,7 @@ const submitForm = () => {
 const closeDialog = () => {
   dialog.visible = false;
   resetForm();
-}
+};
 
 /**
  * 重置表单
@@ -609,14 +640,20 @@ const resetForm = () => {
 
   form.value.id = undefined;
   form.value.status = '1';
-}
+};
 onMounted(() => {
-  getTreeSelect() // 初始化部门数据
-  getList() // 初始化列表数据
-  proxy?.getConfigKey("sys.user.initPassword").then(response => {
+  getTreeSelect(); // 初始化部门数据
+  getList(); // 初始化列表数据
+  proxy?.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></style>
diff --git a/src/views/system/user/profile/index.vue b/src/views/system/user/profile/index.vue
index 47a66328de9c292d8eecbcca91e5105ac58a1f4b..426fca88d2bf94c82738352163832f66e1e05b78 100644
--- a/src/views/system/user/profile/index.vue
+++ b/src/views/system/user/profile/index.vue
@@ -3,14 +3,14 @@
     <el-row :gutter="20">
       <el-col :span="6" :xs="24">
         <el-card class="box-card">
-          <template v-slot:header>
+          <template #header>
             <div class="clearfix">
               <span>个人信息</span>
             </div>
           </template>
           <div>
             <div class="text-center">
-              <userAvatar/>
+              <userAvatar />
             </div>
             <ul class="list-group list-group-striped">
               <li class="list-group-item">
@@ -27,7 +27,7 @@
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="tree" />所属部门
-                <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
+                <div v-if="state.user.deptName" class="pull-right">{{ state.user.deptName }} / {{ state.postGroup }}</div>
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="peoples" />所属角色
@@ -43,7 +43,7 @@
       </el-col>
       <el-col :span="18" :xs="24">
         <el-card>
-          <template v-slot:header>
+          <template #header>
             <div class="clearfix">
               <span>基本资料</span>
             </div>
@@ -58,6 +58,9 @@
             <el-tab-pane label="第三方应用" name="thirdParty">
               <thirdParty :auths="state.auths" />
             </el-tab-pane>
+            <el-tab-pane label="在线设备" name="onlinDevice">
+              <onlinDevice :devices="state.devices" />
+            </el-tab-pane>
           </el-tabs>
         </el-card>
       </el-col>
@@ -66,38 +69,54 @@
 </template>
 
 <script setup name="Profile" lang="ts">
-import UserAvatar from "./userAvatar.vue";
-import UserInfo from "./userInfo.vue";
-import ResetPwd from "./resetPwd.vue";
-import ThirdParty from "./thirdParty.vue";
-import { getAuthList } from "@/api/system/social/auth";
-import { getUserProfile } from "@/api/system/user";
+import UserAvatar from './userAvatar.vue';
+import UserInfo from './userInfo.vue';
+import ResetPwd from './resetPwd.vue';
+import ThirdParty from './thirdParty.vue';
+import OnlinDevice from './onlineDevice.vue';
+import { getAuthList } from '@/api/system/social/auth';
+import { getUserProfile } from '@/api/system/user';
+import { getOnline } from '@/api/monitor/online';
+import { UserVO } from '@/api/system/user/types';
 
-const activeTab = ref("userinfo");
-const state = ref<Record<string, any>>({
-    user: {},
-    roleGroup: '',
-    postGroup: '',
-    auths: []
+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 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 res = await getAuthList();
+  state.value.auths = res.data;
+};
+const getOnlines = async () => {
+  const res = await getOnline();
+  state.value.devices = res.rows;
 };
 
 onMounted(() => {
-    getUser();
-    getAuths();
-})
+  getUser();
+  getAuths();
+  getOnlines();
+});
 </script>
diff --git a/src/views/system/user/profile/onlineDevice.vue b/src/views/system/user/profile/onlineDevice.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8da96f60f0354a97baf96bb242c95d2bcdbd5d2a
--- /dev/null
+++ b/src/views/system/user/profile/onlineDevice.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <el-table :data="devices" style="width: 100%; height: 100%; font-size: 14px">
+      <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 name="Online" lang="ts" setup>
+import { delOnline } from '@/api/monitor/online';
+import { propTypes } from '@/utils/propTypes';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { sys_device_type } = toRefs<any>(proxy?.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) {
+        proxy?.$modal.msgSuccess('删除成功');
+        proxy?.$tab.refreshPage();
+      } else {
+        proxy?.$modal.msgError(res.msg);
+      }
+    })
+    .catch(() => {});
+};
+
+</script>
diff --git a/src/views/system/user/profile/resetPwd.vue b/src/views/system/user/profile/resetPwd.vue
index 11b00f6d4819931bd33c6893d4eaada01344e9b3..6d536daf9f15f00e948ddb5636ba67ab36e28639 100644
--- a/src/views/system/user/profile/resetPwd.vue
+++ b/src/views/system/user/profile/resetPwd.vue
@@ -17,37 +17,44 @@
 </template>
 
 <script setup lang="ts">
-import { updateUserPwd } from "@/api/system/user";
-import type { ResetPwdForm } from "@/api/system/user/types";
+import { updateUserPwd } from '@/api/system/user';
+import type { ResetPwdForm } from '@/api/system/user/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const pwdRef = ref<ElFormInstance>();
 const user = ref<ResetPwdForm>({
-  oldPassword: "",
-  newPassword: "",
-  confirmPassword: ""
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: ''
 });
 
 const equalToPassword = (rule: any, value: string, callback: any) => {
   if (user.value.newPassword !== value) {
-    callback(new Error("两次输入的密码不一致"));
+    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"
-  }],
-  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, {
-    required: true,
-    validator: equalToPassword,
-    trigger: "blur"
-  }]
+  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'
+    }
+  ]
 });
 
 /** 提交按钮 */
@@ -55,7 +62,7 @@ const submit = () => {
   pwdRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       await updateUserPwd(user.value.oldPassword, user.value.newPassword);
-      proxy?.$modal.msgSuccess("修改成功");
+      proxy?.$modal.msgSuccess('修改成功');
     }
   });
 };
diff --git a/src/views/system/user/profile/thirdParty.vue b/src/views/system/user/profile/thirdParty.vue
index 4170894fa12dc78a46288c594b5f0a24c683d54d..40daa8625631e6ad8ecb6a565675454468aab1d4 100644
--- a/src/views/system/user/profile/thirdParty.vue
+++ b/src/views/system/user/profile/thirdParty.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-    <el-table :data="auths" style="width: 100%; height: 100%; font-size: 10px">
-      <el-table-column label="序号" width="50" type="index"></el-table-column>
+    <el-table :data="auths" style="width: 100%; height: 100%; font-size: 14px">
+      <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 v-slot="scope">
+        <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 v-slot="scope">
+        <template #default="scope">
           <el-button size="small" type="text" @click="unlockAuth(scope.row)">解绑</el-button>
         </template>
       </el-table-column>
@@ -20,25 +20,31 @@
     <div id="git-user-binding">
       <h4 class="provider-desc">你可以绑定以下第三方帐号</h4>
       <div id="authlist" class="user-bind">
-        <a class="third-app" href="#" @click="authUrl('wechat');" title="使用 微信 账号授权登录">
+        <a class="third-app" href="#" title="使用 微信 账号授权登录" @click="authUrl('wechat')">
           <div class="git-other-login-icon">
             <svg-icon icon-class="wechat" />
           </div>
           <span class="app-name">WeiXin</span>
         </a>
-        <a class="third-app" href="#" @click="authUrl('maxkey');" title="使用 MaxKey 账号授权登录">
+        <a class="third-app" href="#" title="使用 MaxKey 账号授权登录" @click="authUrl('maxkey')">
           <div class="git-other-login-icon">
             <svg-icon icon-class="maxkey" />
           </div>
           <span class="app-name">MaxKey</span>
         </a>
-        <a class="third-app" href="#" @click="authUrl('gitee');" title="使用 Gitee 账号授权登录">
+        <a class="third-app" href="#" title="使用 TopIam 账号授权登录" @click="authUrl('topiam')">
+          <div class="git-other-login-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="git-other-login-icon">
             <svg-icon icon-class="gitee" />
           </div>
           <span class="app-name">Gitee</span>
         </a>
-        <a class="third-app" href="#" @click="authUrl('github');" title="使用 GitHub 账号授权登录">
+        <a class="third-app" href="#" title="使用 GitHub 账号授权登录" @click="authUrl('github')">
           <div class="git-other-login-icon">
             <svg-icon icon-class="github" />
           </div>
@@ -50,31 +56,30 @@
 </template>
 
 <script lang="ts" setup>
-import { authUnlock, authBinding } from "@/api/system/social/auth";
-import { PropType } from "vue";
+import { authUnlock, authBinding } from '@/api/system/social/auth';
+import { propTypes } from '@/utils/propTypes';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const props = defineProps({
-  auths: {
-    type: Object as PropType<any>,
-  }
+  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) => {
+    })
+    .then((res: any) => {
       if (res.code === 200) {
-        proxy?.$modal.msgSuccess("解绑成功");
+        proxy?.$modal.msgSuccess('解绑成功');
         proxy?.$tab.refreshPage();
       } else {
         proxy?.$modal.msgError(res.msg);
       }
-    }).catch(() => { });
+    })
+    .catch(() => {});
 };
 
 const authUrl = (source: string) => {
@@ -111,7 +116,7 @@ const authUrl = (source: string) => {
   margin-top: 10px;
 }
 
-.git-other-login-icon>img {
+.git-other-login-icon > img {
   height: 32px;
 }
 
@@ -122,15 +127,13 @@ a {
 }
 
 .provider-desc {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans",
-    "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei",
-    "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp",
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Liberation Sans', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', SimHei, SimSun,
+    'WenQuanYi Zen Hei Sharp', sans-serif;
   font-size: 1.071rem;
 }
 
-td>img {
+td > img {
   height: 20px;
   width: 20px;
   display: inline-block;
diff --git a/src/views/system/user/profile/userAvatar.vue b/src/views/system/user/profile/userAvatar.vue
index ce25c113b06c5c170c8662c752573e8d3257d8f7..32b6f5c8040c492be11227da9c926c194fd38cbd 100644
--- a/src/views/system/user/profile/userAvatar.vue
+++ b/src/views/system/user/profile/userAvatar.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="user-info-head" @click="editCropper()">
     <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
-    <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
+    <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"
-            :autoCrop="options.autoCrop"
-            :autoCropWidth="options.autoCropWidth"
-            :autoCropHeight="options.autoCropHeight"
-            :fixedBox="options.fixedBox"
-            :outputType="options.outputType"
-            @realTime="realTime"
-            v-if="visible"
+            :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' }">
@@ -56,10 +56,11 @@
 </template>
 
 <script setup lang="ts">
-import "vue-cropper/dist/index.css";
-import { VueCropper } from "vue-cropper";
-import { uploadAvatar } from "@/api/system/user";
-import useUserStore from "@/store/modules/user";
+import 'vue-cropper/dist/index.css';
+import { VueCropper } from 'vue-cropper';
+import { uploadAvatar } from '@/api/system/user';
+import useUserStore from '@/store/modules/user';
+import { UploadRawFile } from 'element-plus';
 
 interface Options {
   img: string | any; // 裁剪图片的地址
@@ -73,13 +74,12 @@ interface Options {
   visible: boolean;
 }
 
-
 const userStore = useUserStore();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const open = ref(false);
 const visible = ref(false);
-const title = ref("修改头像");
+const title = ref('修改头像');
 
 const cropper = ref<any>({});
 //图片裁剪数据
@@ -89,8 +89,8 @@ const options = reactive<Options>({
   autoCropWidth: 200,
   autoCropHeight: 200,
   fixedBox: true,
-  outputType: "png",
-  fileName: "",
+  outputType: 'png',
+  fileName: '',
   previews: {},
   visible: false
 });
@@ -104,8 +104,7 @@ const modalOpened = () => {
   visible.value = true;
 };
 /** 覆盖默认上传行为 */
-const requestUpload = (): any => {
-};
+const requestUpload = (): any => {};
 /** 向左旋转 */
 const rotateLeft = () => {
   cropper.value.rotateLeft();
@@ -120,9 +119,9 @@ const changeScale = (num: number) => {
   cropper.value.changeScale(num);
 };
 /** 上传预处理 */
-const beforeUpload = (file: any) => {
-  if (file.type.indexOf("image/") == -1) {
-    proxy?.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
+const beforeUpload = (file: UploadRawFile): any => {
+  if (file.type.indexOf('image/') == -1) {
+    proxy?.$modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。');
   } else {
     const reader = new FileReader();
     reader.readAsDataURL(file);
@@ -136,12 +135,12 @@ const beforeUpload = (file: any) => {
 const uploadImg = async () => {
   cropper.value.getCropBlob(async (data: any) => {
     let formData = new FormData();
-    formData.append("avatarfile", data, options.fileName);
+    formData.append('avatarfile', data, options.fileName);
     const res = await uploadAvatar(formData);
     open.value = false;
     options.img = res.data.imgUrl;
-    userStore.setAvatar(options.img as string)
-    proxy?.$modal.msgSuccess("修改成功");
+    userStore.setAvatar(options.img);
+    proxy?.$modal.msgSuccess('修改成功');
     visible.value = false;
   });
 };
@@ -164,7 +163,7 @@ const closeDialog = () => {
 }
 
 .user-info-head:hover:after {
-  content: "+";
+  content: '+';
   position: absolute;
   left: 0;
   right: 0;
diff --git a/src/views/system/user/profile/userInfo.vue b/src/views/system/user/profile/userInfo.vue
index 3dd5ff7d5f189fea5e92ccb18481268468a75852..d5b8a4c8b8045fdaa62af5d9c01c9abc6769514e 100644
--- a/src/views/system/user/profile/userInfo.vue
+++ b/src/views/system/user/profile/userInfo.vue
@@ -11,8 +11,8 @@
     </el-form-item>
     <el-form-item label="性别">
       <el-radio-group v-model="userForm.sex">
-        <el-radio label="0">男</el-radio>
-        <el-radio label="1">女</el-radio>
+        <el-radio value="0">男</el-radio>
+        <el-radio value="1">女</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item>
@@ -23,38 +23,42 @@
 </template>
 
 <script setup lang="ts">
-import { updateUserProfile } from "@/api/system/user";
+import { updateUserProfile } from '@/api/system/user';
+import { propTypes } from '@/utils/propTypes';
 
 const props = defineProps({
-  user: {
-    type: Object as PropType<any>,
-    required: true
-  }
+  user: propTypes.any.isRequired
 });
 const userForm = computed(() => props.user);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const userRef = ref<ElFormInstance>();
-const rules = ref<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[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
-});
-
+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[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+  ]
+};
+const rules = ref<ElFormRules>(rule);
 
 /** 提交按钮 */
 const submit = () => {
   userRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       await updateUserProfile(props.user);
-      proxy?.$modal.msgSuccess("修改成功");
+      proxy?.$modal.msgSuccess('修改成功');
     }
   });
 };
diff --git a/src/views/tool/gen/basicInfoForm.vue b/src/views/tool/gen/basicInfoForm.vue
index c77d0c9152c4f5f576c8be9c2b4c1b7493756364..54120887c4556cf377e56ab7ce07d6cfacb534a8 100644
--- a/src/views/tool/gen/basicInfoForm.vue
+++ b/src/views/tool/gen/basicInfoForm.vue
@@ -3,27 +3,27 @@
     <el-row>
       <el-col :span="12">
         <el-form-item label="表名称" prop="tableName">
-          <el-input placeholder="请输入仓库名称" v-model="infoForm.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 placeholder="请输入" v-model="infoForm.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 placeholder="请输入" v-model="infoForm.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 placeholder="请输入" v-model="infoForm.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 type="textarea" :rows="3" v-model="infoForm.remark"></el-input>
+          <el-input v-model="infoForm.remark" type="textarea" :rows="3"></el-input>
         </el-form-item>
       </el-col>
     </el-row>
@@ -31,19 +31,19 @@
 </template>
 
 <script setup lang="ts">
-import { propTypes } from "@/utils/propTypes";
+import { propTypes } from '@/utils/propTypes';
 
 const prop = defineProps({
   info: propTypes.any.def({})
 });
 
-const infoForm = computed(() => prop.info)
+const infoForm = computed(() => prop.info);
 
 // 表单校验
 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" }]
+  tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
+  tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
+  className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
+  functionAuthor: [{ required: true, message: '请输入作者', trigger: 'blur' }]
 });
 </script>
diff --git a/src/views/tool/gen/editTable.vue b/src/views/tool/gen/editTable.vue
index fdd1eebf68ff2c8dba605ac0263c6267be26a828..bbb0889e3cfdefa74117ee3231f0f82da4780a66 100644
--- a/src/views/tool/gen/editTable.vue
+++ b/src/views/tool/gen/editTable.vue
@@ -35,22 +35,22 @@
 
           <el-table-column label="插入" min-width="5%">
             <template #default="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isInsert"></el-checkbox>
+              <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 true-label="1" false-label="0" v-model="scope.row.isEdit"></el-checkbox>
+              <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 true-label="1" false-label="0" v-model="scope.row.isList"></el-checkbox>
+              <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 true-label="1" false-label="0" v-model="scope.row.isQuery"></el-checkbox>
+              <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%">
@@ -69,7 +69,7 @@
           </el-table-column>
           <el-table-column label="必填" min-width="5%">
             <template #default="scope">
-              <el-checkbox true-label="1" false-label="0" v-model="scope.row.isRequired"></el-checkbox>
+              <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%">
@@ -104,7 +104,7 @@
       </el-tab-pane>
     </el-tabs>
     <el-form label-width="100px">
-      <div style="text-align: center;margin-left:-100px;margin-top:10px;">
+      <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>
@@ -118,7 +118,8 @@ import { DbColumnVO, DbTableVO } from '@/api/tool/gen/types';
 import { optionselect as getDictOptionselect } from '@/api/system/dict/type';
 import { DictTypeVO } from '@/api/system/dict/type/types';
 import BasicInfoForm from './basicInfoForm.vue';
-import GenInfoForm from "./genInfoForm.vue";
+import GenInfoForm from './genInfoForm.vue';
+import { RouteLocationNormalized } from 'vue-router';
 
 const route = useRoute();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -138,8 +139,8 @@ const submitForm = () => {
   const basicForm = basicInfo.value?.$refs.basicInfoForm;
   const genForm = genInfo.value?.$refs.genInfoForm;
 
-  Promise.all([basicForm, genForm].map(getFormPromise)).then(async res => {
-    const validateResult = res.every(item => !!item);
+  Promise.all([basicForm, genForm].map(getFormPromise)).then(async (res) => {
+    const validateResult = res.every((item) => !!item);
     if (validateResult) {
       const genTable: any = Object.assign({}, info.value);
       genTable.columns = columns.value;
@@ -155,24 +156,34 @@ const submitForm = () => {
         close();
       }
     } else {
-      proxy?.$modal.msgError("表单校验未通过，请重新检查提交内容");
+      proxy?.$modal.msgError('表单校验未通过，请重新检查提交内容');
     }
   });
-}
+};
 const getFormPromise = (form: any) => {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     form.validate((res: any) => {
       resolve(res);
     });
   });
-}
+};
 const close = () => {
-  const obj = { path: "/tool/gen", query: { t: Date.now(), pageNum: route.query.pageNum } };
+  const obj: RouteLocationNormalized = {
+    path: '/tool/gen',
+    fullPath: '',
+    hash: '',
+    matched: [],
+    meta: undefined,
+    name: undefined,
+    params: undefined,
+    redirectedFrom: undefined,
+    query: { t: Date.now().toString(), pageNum: route.query.pageNum }
+  };
   proxy?.$tab.closeOpenPage(obj);
-}
+};
 
 (async () => {
-  const tableId = route.params && route.params.tableId as string;
+  const tableId = route.params && (route.params.tableId as string);
   if (tableId) {
     // 获取表详细信息
     const res = await getGenTable(tableId);
diff --git a/src/views/tool/gen/genInfoForm.vue b/src/views/tool/gen/genInfoForm.vue
index 94486e27773af5b64f7ad10ae01d741c5e30974a..0ee9f1df054af32e23c03a3612c0b8d1ab9e05dd 100644
--- a/src/views/tool/gen/genInfoForm.vue
+++ b/src/views/tool/gen/genInfoForm.vue
@@ -90,12 +90,12 @@
               <el-icon><question-filled /></el-icon>
             </el-tooltip>
           </template>
-          <el-radio v-model="infoForm.genType" label="0">zip压缩包</el-radio>
-          <el-radio v-model="infoForm.genType" label="1">自定义路径</el-radio>
+          <el-radio v-model="infoForm.genType" value="0">zip压缩包</el-radio>
+          <el-radio v-model="infoForm.genType" value="1">自定义路径</el-radio>
         </el-form-item>
       </el-col>
 
-      <el-col :span="24" v-if="infoForm.genType == '1'">
+      <el-col v-if="infoForm.genType == '1'" :span="24">
         <el-form-item prop="genPath">
           <template #label>
             自定义路径
@@ -223,21 +223,21 @@
 
 <script setup lang="ts">
 import { listMenu } from '@/api/system/menu';
-import { propTypes } from "@/utils/propTypes";
+import { propTypes } from '@/utils/propTypes';
 
 interface MenuOptionsType {
   menuId: number | string;
   menuName: string;
-  children: MenuOptionsType[] | undefined;
+  children?: MenuOptionsType[];
 }
+const { proxy } = getCurrentInstance();
 
 const subColumns = ref<any>([]);
 const menuOptions = ref<Array<MenuOptionsType>>([]);
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const props = defineProps({
-  info: propTypes.any.def(null),
-  tables: propTypes.any.def(null)
+  info: propTypes.any.isRequired,
+  tables: propTypes.any.isRequired
 });
 
 const infoForm = computed(() => props.info);
@@ -246,21 +246,21 @@ const table = computed(() => props.tables);
 
 // 表单校验
 const rules = ref({
-  tplCategory: [{ required: true, message: "请选择生成模板", trigger: "blur" }],
-  packageName: [{ required: true, message: "请输入生成包路径", trigger: "blur" }],
-  moduleName: [{ required: true, message: "请输入生成模块名", trigger: "blur" }],
-  businessName: [{ required: true, message: "请输入生成业务名", trigger: "blur" }],
-  functionName: [{ required: true, message: "请输入生成功能名", trigger: "blur" }]
+  tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }],
+  packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }],
+  moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
+  businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
+  functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }]
 });
 const subSelectChange = () => {
-  infoForm.value.subTableFkName = "";
-}
+  infoForm.value.subTableFkName = '';
+};
 const tplSelectChange = (value: string) => {
-  if (value !== "sub") {
-    infoForm.value.subTableName = "";
-    infoForm.value.subTableFkName = "";
+  if (value !== 'sub') {
+    infoForm.value.subTableName = '';
+    infoForm.value.subTableFkName = '';
   }
-}
+};
 const setSubTableColumns = (value: string) => {
   table.value.forEach((item: any) => {
     const name = item.tableName;
@@ -268,24 +268,28 @@ const setSubTableColumns = (value: string) => {
       subColumns.value = item.columns;
       return;
     }
-  })
-}
+  });
+};
 
 /** 查询菜单下拉树结构 */
 const getMenuTreeselect = async () => {
   const res = await listMenu();
-  res.data.forEach(m => m.menuId = m.menuId.toString());
-  const data = proxy?.handleTree<MenuOptionsType>(res.data, "menuId");
+  res.data.forEach((m) => (m.menuId = m.menuId.toString()));
+  const data = proxy?.handleTree<MenuOptionsType>(res.data, 'menuId');
+
   if (data) {
-    menuOptions.value = data
+    menuOptions.value = data;
   }
-}
+};
 
-watch(() => props.info.subTableName, val => {
-  setSubTableColumns(val);
-});
+watch(
+  () => props.info.subTableName,
+  (val) => {
+    setSubTableColumns(val);
+  }
+);
 
 onMounted(() => {
   getMenuTreeselect();
-})
+});
 </script>
diff --git a/src/views/tool/gen/importTable.vue b/src/views/tool/gen/importTable.vue
index 1ba79ece9457b26f435954b4617ff5cc56cb0f7c..50ec0ee2041246aed7fea6771eb4285648fb54ab 100644
--- a/src/views/tool/gen/importTable.vue
+++ b/src/views/tool/gen/importTable.vue
@@ -1,9 +1,9 @@
 <template>
   <!-- 导入表 -->
-  <el-dialog title="导入表" v-model="visible" width="1100px" top="5vh" append-to-body>
-    <el-form :model="queryParams" ref="queryFormRef" :inline="true">
+  <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="请选择/输入数据源名称" style="width: 200px">
+        <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>
@@ -19,14 +19,14 @@
       </el-form-item>
     </el-form>
     <el-row>
-      <el-table @row-click="clickRow" ref="tableRef" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
+      <el-table ref="tableRef" :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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <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">
@@ -59,7 +59,7 @@ const queryParams = reactive<DbTableQuery>({
 });
 const dataNameList = ref<Array<string>>([]);
 
-const emit = defineEmits(["ok"]);
+const emit = defineEmits(['ok']);
 
 /** 查询参数列表 */
 const show = (dataName: string) => {
@@ -71,53 +71,53 @@ const show = (dataName: string) => {
   }
   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);
-}
+  tables.value = selection.map((item) => item.tableName);
+};
 /** 查询表数据 */
 const getList = async () => {
   const res = await listDbTable(queryParams);
   dbTableList.value = res.rows;
   total.value = res.total;
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNum = 1;
   getList();
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 /** 导入按钮操作 */
 const handleImportTable = async () => {
-  const tableNames = tables.value.join(",");
-  if (tableNames == "") {
-    proxy?.$modal.msgError("请选择要导入的表");
+  const tableNames = tables.value.join(',');
+  if (tableNames == '') {
+    proxy?.$modal.msgError('请选择要导入的表');
     return;
   }
   const res = await importTable({ tables: tableNames, dataName: queryParams.dataName });
   proxy?.$modal.msgSuccess(res.msg);
   if (res.code === 200) {
     visible.value = false;
-    emit("ok");
+    emit('ok');
   }
-}
+};
 /** 查询多数据源名称 */
 const getDataNameList = async () => {
-  const res = await getDataNames()
+  const res = await getDataNames();
   dataNameList.value = res.data;
-}
+};
 
 defineExpose({
-  show,
+  show
 });
 </script>
diff --git a/src/views/tool/gen/index.vue b/src/views/tool/gen/index.vue
index cb684f8ec2374557f0a66a9f02cc315807d48d56..2618a2090a6fc80a31a0038872f2a9a63696ed9a 100644
--- a/src/views/tool/gen/index.vue
+++ b/src/views/tool/gen/index.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
+      <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item label="数据源" prop="dataName">
-              <el-select v-model="queryParams.dataName" filterable clearable placeholder="请选择/输入数据源名称" style="width: 200px">
+              <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 style="width: 200px" @keyup.enter="handleQuery" />
+              <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 style="width: 200px" @keyup.enter="handleQuery" />
+              <el-input v-model="queryParams.tableComment" placeholder="请输入表描述" clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="创建时间" style="width: 308px">
               <el-date-picker
@@ -39,20 +39,20 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Download" @click="handleGenTable()" v-hasPermi="['tool:gen:code']">生成</el-button>
+            <el-button v-hasPermi="['tool:gen:code']" type="primary" plain icon="Download" @click="handleGenTable()">生成</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="info" plain icon="Upload" @click="openImportTable" v-hasPermi="['tool:gen:import']">导入</el-button>
+            <el-button v-hasPermi="['tool:gen:import']" type="info" plain icon="Upload" @click="openImportTable">导入</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleEditTable()" v-hasPermi="['tool:gen:edit']">修改</el-button>
+            <el-button v-hasPermi="['tool:gen:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleEditTable()">修改</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['tool:gen:remove']">
+            <el-button v-hasPermi="['tool:gen:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
               删除
             </el-button>
           </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
         </el-row>
       </template>
 
@@ -72,36 +72,36 @@
         <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="预览" placement="top">
-              <el-button link type="primary" icon="View" @click="handlePreview(scope.row)" v-hasPermi="['tool:gen:preview']"></el-button>
+              <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 link type="primary" icon="Edit" @click="handleEditTable(scope.row)" v-hasPermi="['tool:gen:edit']"></el-button>
+              <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 link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['tool:gen:remove']"></el-button>
+              <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 link type="primary" icon="Refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['tool:gen:edit']"></el-button>
+              <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 link type="primary" icon="Download" @click="handleGenTable(scope.row)" v-hasPermi="['tool:gen:code']"></el-button>
+              <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" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
 
     <!-- 预览界面 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="80%" top="5vh" append-to-body class="scrollbar">
+    <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('.vm'))"
           :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
-          :key="value"
         >
-          <el-link :underline="false" icon="DocumentCopy" v-copyText="value" v-copyText:callback="copyTextSuccess" style="float:right">
+          <el-link v-copyText="value" v-copyText:callback="copyTextSuccess" :underline="false" icon="DocumentCopy" style="float: right">
             &nbsp;复制
           </el-link>
           <pre>{{ value }}</pre>
@@ -129,7 +129,7 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
-const uniqueId = ref("");
+const uniqueId = ref('');
 const dataNameList = ref<Array<string>>([]);
 
 const queryFormRef = ref<ElFormInstance>();
@@ -140,13 +140,16 @@ const queryParams = ref<TableQuery>({
   pageSize: 10,
   tableName: '',
   tableComment: '',
-  dataName: ""
-})
+  dataName: ''
+});
 
-const preview = ref<any>({
+const preview = ref<{
+  data: Record<string, string>;
+  activeName: string;
+}>({
   data: {},
   activeName: 'domain.java'
-})
+});
 const dialog = reactive<DialogOption>({
   visible: false,
   title: '代码预览'
@@ -161,13 +164,13 @@ onActivated(() => {
     queryFormRef.value?.resetFields();
     getList();
   }
-})
+});
 
 /** 查询多数据源名称 */
 const getDataNameList = async () => {
-  const res = await getDataNames()
+  const res = await getDataNames();
   dataNameList.value = res.data;
-}
+};
 
 /** 查询表集合 */
 const getList = async () => {
@@ -176,65 +179,65 @@ const getList = async () => {
   tableList.value = res.rows;
   total.value = res.total;
   loading.value = false;
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-}
+};
 /** 生成代码操作 */
 const handleGenTable = async (row?: TableVO) => {
   const tbIds = row?.tableId || ids.value;
-  if (tbIds == "") {
+  if (tbIds == '') {
     proxy?.$modal.msgError('请选择要生成的数据');
     return;
   }
-  if (row?.genType === "1") {
+  if (row?.genType === '1') {
     await genCode(row.tableId);
     proxy?.$modal.msgSuccess('成功生成到自定义路径：' + row.genPath);
   } else {
     proxy?.$download.zip('/tool/gen/batchGenCode?tableIdStr=' + tbIds, 'ruoyi.zip');
   }
-}
+};
 /** 同步数据库操作 */
 const handleSynchDb = async (row: TableVO) => {
   const tableId = row.tableId;
   await proxy?.$modal.confirm('确认要强制同步"' + row.tableName + '"表结构吗？');
   await synchDb(tableId);
   proxy?.$modal.msgSuccess('同步成功');
-}
+};
 /** 打开导入表弹窗 */
 const openImportTable = () => {
   importRef.value?.show(queryParams.value.dataName);
-}
+};
 /** 重置按钮操作 */
 const resetQuery = () => {
   dateRange.value = ['', ''];
   queryFormRef.value?.resetFields();
   handleQuery();
-}
+};
 /** 预览按钮 */
 const handlePreview = async (row: TableVO) => {
   const res = await previewTable(row.tableId);
   preview.value.data = res.data;
   dialog.visible = true;
   preview.value.activeName = 'domain.java';
-}
+};
 /** 复制代码成功 */
 const copyTextSuccess = () => {
   proxy?.$modal.msgSuccess('复制成功');
-}
+};
 // 多选框选中数据
 const handleSelectionChange = (selection: TableVO[]) => {
-  ids.value = selection.map(item => item.tableId);
+  ids.value = selection.map((item) => item.tableId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
-}
+};
 /** 修改按钮操作 */
 const handleEditTable = (row?: 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?: TableVO) => {
   const tableIds = row?.tableId || ids.value;
@@ -242,10 +245,10 @@ const handleDelete = async (row?: TableVO) => {
   await delTable(tableIds);
   await getList();
   proxy?.$modal.msgSuccess('删除成功');
-}
+};
 
 onMounted(() => {
   getList();
   getDataNameList();
-})
+});
 </script>
diff --git a/src/views/workflow/category/index.vue b/src/views/workflow/category/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fd3bfc50f5f11c98d67736eeacac62ddd7b58033
--- /dev/null
+++ b/src/views/workflow/category/index.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="search">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="分类名称" prop="categoryName">
+            <el-input v-model="queryParams.categoryName" placeholder="请输入分类名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item label="分类编码" prop="categoryCode">
+            <el-input v-model="queryParams.categoryCode" 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>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['workflow:category:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
+        </el-row>
+      </template>
+      <el-table
+        ref="categoryTableRef"
+        v-loading="loading"
+        :data="categoryList"
+        row-key="id"
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column label="分类名称" prop="categoryName" />
+        <el-table-column label="分类编码" align="center" prop="categoryCode" />
+        <el-table-column label="排序" align="center" prop="sortNum" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button v-hasPermi="['workflow:category:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
+            </el-tooltip>
+            <el-tooltip content="新增" placement="top">
+              <el-button v-hasPermi="['workflow:category:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button v-hasPermi="['workflow:category: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="categoryFormRef" v-loading="loading" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="父级分类" prop="parentId">
+          <el-tree-select
+            v-model="form.parentId"
+            :data="categoryOptions"
+            :props="{ value: 'id', label: 'categoryName', children: 'children' }"
+            value-key="id"
+            placeholder="请选择父级id"
+            check-strictly
+          />
+        </el-form-item>
+        <el-form-item label="分类名称" prop="categoryName">
+          <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
+        </el-form-item>
+        <el-form-item label="分类编码" prop="categoryCode">
+          <el-input v-model="form.categoryCode" placeholder="请输入分类编码" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sortNum">
+          <el-input-number v-model="form.sortNum" placeholder="请输入排序" controls-position="right" :min="0" />
+        </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="Category" lang="ts">
+import { listCategory, getCategory, delCategory, addCategory, updateCategory } from '@/api/workflow/category';
+import { CategoryVO, CategoryQuery, CategoryForm } from '@/api/workflow/category/types';
+
+type CategoryOption = {
+  id: number;
+  categoryName: string;
+  children?: CategoryOption[];
+};
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const categoryList = ref<CategoryVO[]>([]);
+const categoryOptions = ref<CategoryOption[]>([]);
+const buttonLoading = ref(false);
+const showSearch = ref(true);
+const isExpandAll = ref(true);
+const loading = ref(false);
+
+const queryFormRef = ref<ElFormInstance>();
+const categoryFormRef = ref<ElFormInstance>();
+const categoryTableRef = ref<ElTableInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: CategoryForm = {
+  id: undefined,
+  categoryName: undefined,
+  categoryCode: undefined,
+  parentId: undefined,
+  sortNum: 0
+};
+
+const data = reactive<PageData<CategoryForm, CategoryQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    categoryName: undefined,
+    categoryCode: undefined
+  },
+  rules: {
+    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
+    categoryName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+    categoryCode: [{ required: true, message: '分类编码不能为空', trigger: 'blur' }],
+    parentId: [{ required: true, message: '父级id不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询流程分类列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listCategory(queryParams.value);
+  const data = proxy?.handleTree<CategoryVO>(res.data, 'id', 'parentId');
+  if (data) {
+    categoryList.value = data;
+    loading.value = false;
+  }
+};
+
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await listCategory();
+  categoryOptions.value = [];
+  const data: CategoryOption = { id: 0, categoryName: '顶级节点', children: [] };
+  data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId');
+  categoryOptions.value.push(data);
+};
+
+// 取消按钮
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+// 表单重置
+const reset = () => {
+  form.value = { ...initFormData };
+  categoryFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 新增按钮操作 */
+const handleAdd = (row?: CategoryVO) => {
+  dialog.visible = true;
+  dialog.title = '添加流程分类';
+  nextTick(() => {
+    reset();
+    getTreeselect();
+    if (row != null && row.id) {
+      form.value.parentId = row.id;
+    } else {
+      form.value.parentId = 0;
+    }
+  });
+};
+
+/** 展开/折叠操作 */
+const handleToggleExpandAll = () => {
+  isExpandAll.value = !isExpandAll.value;
+  toggleExpandAll(categoryList.value, isExpandAll.value);
+};
+
+/** 展开/折叠操作 */
+const toggleExpandAll = (data: CategoryVO[], status: boolean) => {
+  data.forEach((item) => {
+    categoryTableRef.value?.toggleRowExpansion(item, status);
+    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
+  });
+};
+
+/** 修改按钮操作 */
+const handleUpdate = (row: CategoryVO) => {
+  loading.value = true;
+  dialog.visible = true;
+  dialog.title = '修改流程分类';
+  nextTick(async () => {
+    reset();
+    await getTreeselect();
+    if (row != null) {
+      form.value.parentId = row.id;
+    }
+    const res = await getCategory(row.id);
+    loading.value = false;
+    Object.assign(form.value, res.data);
+  });
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  categoryFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateCategory(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addCategory(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row: CategoryVO) => {
+  await proxy?.$modal.confirm('是否确认删除流程分类编号为"' + row.id + '"的数据项？');
+  loading.value = true;
+  await delCategory(row.id).finally(() => (loading.value = false));
+  await getList();
+  proxy?.$modal.msgSuccess('删除成功');
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
diff --git a/src/views/workflow/formManage/index.vue b/src/views/workflow/formManage/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5057b3a278717deb59f6642cf3d91d5c5b4edc02
--- /dev/null
+++ b/src/views/workflow/formManage/index.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="search">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="表单名称" prop="formName">
+            <el-input v-model="queryParams.formName" 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>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['workflow:formManage:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['workflow:formManage:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
+              >修改</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['workflow:formManage:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
+              >删除</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['workflow:formManage:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" :data="formManageList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="表单名称" align="center" prop="formName" />
+        <el-table-column label="表单类型" align="center">
+          <template #default="scope">
+            <dict-tag :options="wf_form_type" :value="scope.row.formType"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="地址" align="center" prop="router" />
+        <el-table-column label="备注" align="center" prop="remork" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button v-hasPermi="['workflow:formManage:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button v-hasPermi="['workflow:formManage: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="formManageFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="表单名称" prop="formName">
+          <el-input v-model="form.formName" placeholder="请输入表单名称" />
+        </el-form-item>
+        <el-form-item label="表单类型" prop="formType">
+          <el-radio-group v-model="form.formType" @change="form.router = ''">
+            <el-radio v-for="dict in wf_form_type" :key="dict.value" border :value="dict.value">{{ dict.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="form.formType === 'static'" label="路由地址" prop="router">
+          <el-input v-model="form.router" placeholder="请输入路由地址" />
+        </el-form-item>
+        <el-form-item v-else label="表单" prop="router">
+          <el-input v-model="form.router" disabled placeholder="请选择表单">
+            <template #append>
+              <el-button icon="Search" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="备注" prop="remork">
+          <el-input v-model="form.remork" 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="FormManage" lang="ts">
+import { listFormManage, getFormManage, delFormManage, addFormManage, updateFormManage } from '@/api/workflow/formManage';
+import { FormManageVO, FormManageQuery, FormManageForm } from '@/api/workflow/formManage/types';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_form_type } = toRefs<any>(proxy?.useDict('wf_form_type'));
+
+const formManageList = ref<FormManageVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const formManageFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: FormManageForm = {
+  id: undefined,
+  formName: undefined,
+  formType: 'static',
+  remork: undefined
+};
+const data = reactive<PageData<FormManageForm, FormManageQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    formName: undefined,
+    formType: undefined
+  },
+  rules: {
+    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
+    formName: [{ required: true, message: '表单名称不能为空', trigger: 'blur' }],
+    formType: [{ required: true, message: '表单类型不能为空', trigger: 'change' }],
+    router: [{ required: true, message: '不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询表单管理列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listFormManage(queryParams.value);
+  formManageList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  formManageFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: FormManageVO[]) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = '添加表单管理';
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: FormManageVO) => {
+  reset();
+  const _id = row?.id || ids.value[0];
+  const res = await getFormManage(_id);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = '修改表单管理';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  formManageFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateFormManage(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addFormManage(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: FormManageVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除表单管理编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await delFormManage(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'workflow/formManage/export',
+    {
+      ...queryParams.value
+    },
+    `formManage_${new Date().getTime()}.xlsx`
+  );
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
diff --git a/src/views/workflow/leave/index.vue b/src/views/workflow/leave/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..23d54423ce2f5416a9937ea025c0455f03cc3b1a
--- /dev/null
+++ b/src/views/workflow/leave/index.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="search">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <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>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['demo:leave:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['demo:leave:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" :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.processInstanceVo.businessStatus"></dict-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-button
+              v-if="
+                scope.row.processInstanceVo.businessStatus === 'draft' ||
+                scope.row.processInstanceVo.businessStatus === 'cancel' ||
+                scope.row.processInstanceVo.businessStatus === 'back'
+              "
+              v-hasPermi="['demo:leave:edit']"
+              size="small"
+              link
+              type="primary"
+              icon="Edit"
+              @click="handleUpdate(scope.row)"
+              >修改</el-button
+            >
+            <el-button
+              v-if="
+                scope.row.processInstanceVo.businessStatus === 'draft' ||
+                scope.row.processInstanceVo.businessStatus === 'cancel' ||
+                scope.row.processInstanceVo.businessStatus === 'back'
+              "
+              v-hasPermi="['demo:leave:remove']"
+              size="small"
+              link
+              type="primary"
+              icon="Delete"
+              @click="handleDelete(scope.row)"
+              >删除</el-button
+            >
+            <el-button link type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+            <el-button
+              v-if="scope.row.processInstanceVo.businessStatus === 'waiting'"
+              link
+              size="small"
+              type="primary"
+              icon="Notification"
+              @click="handleCancelProcessApply(scope.row.processInstanceVo.id)"
+              >撤销</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="getList" />
+    </el-card>
+  </div>
+</template>
+
+<script setup name="Leave" lang="ts">
+import { delLeave, listLeave } from '@/api/workflow/leave';
+import { cancelProcessApply } from '@/api/workflow/processInstance';
+import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+const leaveList = ref<LeaveVO[]>([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+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 () => {
+  loading.value = true;
+  const res = await listLeave(queryParams.value);
+  leaveList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: LeaveVO[]) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push(`/demo/leaveEdit/index/add/add`);
+  proxy.$router.push({
+    path: `/demo/leaveEdit/index`,
+    query: {
+      type: 'add'
+    }
+  });
+};
+
+/** 修改按钮操作 */
+const handleUpdate = (row?: LeaveVO) => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/demo/leaveEdit/index`,
+    query: {
+      id: row.id,
+      type: 'update'
+    }
+  });
+};
+
+/** 查看按钮操作 */
+const handleView = (row?: LeaveVO) => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/demo/leaveEdit/index`,
+    query: {
+      id: row.id,
+      type: 'view'
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: LeaveVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除请假编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await delLeave(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'demo/leave/export',
+    {
+      ...queryParams.value
+    },
+    `leave_${new Date().getTime()}.xlsx`
+  );
+};
+
+/** 撤销按钮操作 */
+const handleCancelProcessApply = async (id: string) => {
+  await proxy?.$modal.confirm('是否确认撤销当前单据？');
+  loading.value = true;
+  await cancelProcessApply(id).finally(() => (loading.value = false));
+  await getList();
+  proxy?.$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 0000000000000000000000000000000000000000..e978ad87776c347b14c7d9f8eaea96728b1972a5
--- /dev/null
+++ b/src/views/workflow/leave/leaveEdit.vue
@@ -0,0 +1,273 @@
+<template>
+  <div class="p-2">
+    <el-card shadow="never">
+      <div style="display: flex; justify-content: space-between">
+        <div>
+          <el-button
+            v-if="
+              routeParams.type === 'add' ||
+              (routeParams.type === 'update' &&
+                form.processInstanceVo &&
+                form.processInstanceVo.businessStatus &&
+                (form.processInstanceVo.businessStatus === 'draft' ||
+                  form.processInstanceVo.businessStatus === 'cancel' ||
+                  form.processInstanceVo.businessStatus === 'back'))
+            "
+            :loading="buttonLoading"
+            type="info"
+            @click="submitForm('draft')"
+            >暂存</el-button
+          >
+          <el-button
+            v-if="
+              routeParams.type === 'add' ||
+              (routeParams.type === 'update' &&
+                form.processInstanceVo &&
+                (form.processInstanceVo.businessStatus === 'draft' ||
+                  form.processInstanceVo.businessStatus === 'cancel' ||
+                  form.processInstanceVo.businessStatus === 'back'))
+            "
+            :loading="buttonLoading"
+            type="primary"
+            @click="submitForm('submit')"
+            >提 交</el-button
+          >
+          <el-button
+            v-if="routeParams.type === 'approval' && form.processInstanceVo && form.processInstanceVo.businessStatus === 'waiting'"
+            :loading="buttonLoading"
+            type="primary"
+            @click="approvalVerifyOpen"
+            >审批</el-button
+          >
+          <el-button v-if="processInstanceId" type="primary" @click="handleApprovalRecord">流程进度</el-button>
+        </div>
+        <div>
+          <el-button style="float: right" @click="goBack()">返回</el-button>
+        </div>
+      </div>
+    </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="请假类型" 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="请假时间">
+          <el-date-picker
+            v-model="leaveTime"
+            type="daterange"
+            range-separator="To"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @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 { addLeave, getLeave, updateLeave } from '@/api/workflow/leave';
+import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+import { startWorkFlow } from '@/api/workflow/task';
+import SubmitVerify from '@/components/Process/submitVerify.vue';
+import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import { AxiosResponse } from 'axios';
+import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const buttonLoading = ref(false);
+const loading = ref(true);
+const leaveTime = ref<Array<string>>([]);
+//流程实例id
+const processInstanceId = ref('');
+//路由参数
+const routeParams = ref<Record<string, any>>({});
+const options = [
+  {
+    value: '1',
+    label: '事假'
+  },
+  {
+    value: '2',
+    label: '调休'
+  },
+  {
+    value: '3',
+    label: '病假'
+  },
+  {
+    value: '4',
+    label: '婚假'
+  }
+];
+//提交组件
+const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
+//审批记录组件
+const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
+
+const leaveFormRef = ref<ElFormInstance>();
+
+const submitFormData = ref<StartProcessBo>({
+  businessKey: '',
+  tableName: '',
+  variables: {}
+});
+const taskVariables = ref<Record<string, any>>({});
+
+const initFormData: LeaveForm = {
+  id: undefined,
+  leaveType: undefined,
+  startDate: undefined,
+  endDate: undefined,
+  leaveDays: undefined,
+  remark: undefined,
+  processInstanceVo: {}
+};
+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));
+};
+/** 获取详情 */
+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);
+    if (form.value.processInstanceVo) {
+      processInstanceId.value = form.value.processInstanceVo.id;
+    }
+    loading.value = false;
+    buttonLoading.value = false;
+  });
+};
+
+/** 提交按钮 */
+const submitForm = (status: string) => {
+  if (leaveTime.value.length === 0) {
+    proxy?.$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;
+        let res: AxiosResponse<LeaveVO>;
+        if (form.value.id) {
+          res = await updateLeave(form.value);
+        } else {
+          res = await addLeave(form.value);
+        }
+        form.value = res.data;
+        if (status === 'draft') {
+          buttonLoading.value = false;
+          proxy?.$modal.msgSuccess('暂存成功');
+          proxy.$tab.closePage(proxy.$route);
+          proxy.$router.go(-1);
+        } else {
+          await handleStartWorkFlow(res.data);
+        }
+      }
+    });
+  } finally {
+    buttonLoading.value = false;
+  }
+};
+
+//提交申请
+const handleStartWorkFlow = async (data: LeaveVO) => {
+  try {
+    submitFormData.value.tableName = 'test_leave';
+    submitFormData.value.businessKey = data.id;
+    //流程变量
+    taskVariables.value = {
+      entity: data,
+      leaveDays: data.leaveDays,
+      userList: [1, 3],
+      userList2: [1, 3]
+    };
+    submitFormData.value.variables = taskVariables.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(processInstanceId.value);
+};
+//提交回调
+const submitCallback = async () => {
+  await proxy.$tab.closePage(proxy.$route);
+  proxy.$router.go(-1);
+};
+
+//返回
+const goBack = () => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.go(-1);
+};
+//审批
+const approvalVerifyOpen = async () => {
+  submitVerifyRef.value.openDialog(routeParams.value.taskId);
+};
+onMounted(() => {
+  nextTick(async () => {
+    routeParams.value = proxy.$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/model/index.vue b/src/views/workflow/model/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e83cd944735546f601796d06b2cf0b4535dcb189
--- /dev/null
+++ b/src/views/workflow/model/index.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 流程分类树 -->
+      <el-col :lg="4" :xs="24" style="">
+        <el-card shadow="hover">
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+          <el-tree
+            ref="categoryTreeRef"
+            class="mt-2"
+            node-key="id"
+            :data="categoryOptions"
+            :props="{ label: 'categoryName', children: 'children' }"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </el-card>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card shadow="hover">
+              <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
+                <el-form-item label="模型名称" prop="name">
+                  <el-input v-model="queryParams.name" placeholder="请输入模型名称" clearable @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="模型KEY" prop="key">
+                  <el-input v-model="queryParams.key" placeholder="请输入模型KEY" 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">
+          <template #header>
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="primary" plain :disabled="multiple" icon="Download" @click="clickExportZip()">导出</el-button>
+              </el-col>
+              <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
+            </el-row>
+          </template>
+
+          <el-table v-loading="loading" border :data="modelList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column fixed align="center" type="index" label="序号" width="80"></el-table-column>
+            <el-table-column align="center" :show-overflow-tooltip="true" prop="name" label="模型名称" width="200"></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 align="center" prop="metaInfo" label="备注说明" min-width="130"></el-table-column>
+            <el-table-column align="center" :show-overflow-tooltip="true" prop="createTime" label="创建时间" width="160"></el-table-column>
+            <el-table-column align="center" :show-overflow-tooltip="true" prop="lastUpdateTime" label="更新时间" width="160"></el-table-column>
+            <el-table-column fixed="right" label="操作" align="center" width="170" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="1.5">
+                    <el-button link type="primary" size="small" icon="Pointer" @click="clickDesign(scope.row.id)">设计流程</el-button>
+                  </el-col>
+                  <el-col :span="1.5">
+                    <el-button link 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 link type="primary" size="small" icon="ScaleToOriginal" @click="clickDeploy(scope.row.id, scope.row.key)">
+                      流程部署
+                    </el-button>
+                  </el-col>
+                  <el-col :span="1.5">
+                    <el-button link type="primary" size="small" icon="CopyDocument" @click="handleCopy(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="getList"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 设计流程开始 -->
+    <Design ref="designRef" @close-call-back="handleQuery"></Design>
+    <!-- 设计流程结束 -->
+    <!-- 添加模型对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="650px" append-to-body :close-on-click-modal="false">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="模型名称：" prop="name">
+          <el-input v-model="form.name" :disabled="ids && ids.length > 0 && billType === 'update'" maxlength="20" show-word-limit />
+        </el-form-item>
+        <el-form-item label="模型KEY：" prop="key">
+          <el-input v-model="form.key" :disabled="ids && ids.length > 0 && billType === 'update'" maxlength="20" show-word-limit />
+        </el-form-item>
+        <el-form-item label="流程分类" prop="categoryCode">
+          <el-tree-select
+            v-model="form.categoryCode"
+            :data="categoryOptions"
+            :props="{ value: 'categoryCode', label: 'categoryName', children: 'children' }"
+            value-key="categoryCode"
+            placeholder="请选择流程分类"
+            check-strictly
+          />
+        </el-form-item>
+        <el-form-item label="备注：" prop="description">
+          <el-input v-model="form.description" type="textarea" maxlength="200" show-word-limit></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup name="Model">
+import Design from '../../../components/BpmnDesign/index.vue';
+import { listModel, addModel, delModel, modelDeploy, getInfo, update } from '@/api/workflow/model';
+import { ModelQuery, ModelForm, ModelVO } from '@/api/workflow/model/types';
+import { listCategory } from '@/api/workflow/category';
+import { copyModel } from '@/api/workflow/model';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const formRef = ref<ElFormInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const categoryTreeRef = ref<ElTreeInstance>();
+const designRef = ref<InstanceType<typeof Design>>();
+
+type CategoryOption = {
+  categoryCode: string;
+  categoryName: string;
+  children?: CategoryOption[];
+};
+
+const buttonLoading = ref(false);
+const loading = ref(true);
+const ids = ref<string[]>([]);
+const single = ref(true);
+const multiple = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const modelList = ref<ModelVO[]>([]);
+const categoryOptions = ref<CategoryOption[]>([]);
+const categoryName = ref('');
+const billType = ref<string>('');
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: ModelForm = {
+  id: '',
+  name: '',
+  key: '',
+  categoryCode: '',
+  xml: '',
+  svg: '',
+  description: ''
+};
+const data = reactive<PageData<ModelForm, ModelQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    name: '',
+    key: '',
+    categoryCode: ''
+  },
+  rules: {
+    name: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
+    key: [{ required: true, message: '模型KEY不能为空', trigger: 'blur' }],
+    categoryCode: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }]
+  }
+});
+const { queryParams, form, rules } = toRefs(data);
+
+onMounted(() => {
+  getList();
+  getTreeselect();
+});
+
+/** 节点单击事件 */
+const handleNodeClick = (data: ModelForm) => {
+  queryParams.value.categoryCode = data.categoryCode;
+  if (data.categoryCode === 'ALL') {
+    queryParams.value.categoryCode = '';
+  }
+  handleQuery();
+};
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.categoryName.indexOf(value) !== -1;
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    categoryTreeRef.value?.filter(categoryName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.categoryCode = '';
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: ModelVO[]) => {
+  ids.value = selection.map((item: ModelVO) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+//分页
+const getList = async () => {
+  loading.value = true;
+  const resp = await listModel(queryParams.value);
+  modelList.value = resp.rows;
+  total.value = resp.total;
+  loading.value = false;
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: ModelVO) => {
+  const id = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除模型id为【' + id + '】的数据项？');
+  loading.value = true;
+  await delModel(id).finally(() => (loading.value = false));
+  await getList();
+  proxy?.$modal.msgSuccess('删除成功');
+};
+// 流程部署
+const clickDeploy = async (id: string, key: string) => {
+  await proxy?.$modal.confirm('是否部署模型key为【' + key + '】流程？');
+  loading.value = true;
+  await modelDeploy(id).finally(() => (loading.value = false));
+  await getList();
+  proxy?.$modal.msgSuccess('部署成功');
+};
+//新增打开
+const handleAdd = () => {
+  billType.value = 'add';
+  ids.value = [];
+  getTreeselect();
+  form.value = { ...initFormData };
+  dialog.visible = true;
+  dialog.title = '新增模型';
+};
+//修改打开
+const handleUpdate = () => {
+  billType.value = 'update';
+  dialog.title = '修改模型';
+  nextTick(async () => {
+    await getTreeselect();
+    const _id = ids.value[0];
+    const res = await getInfo(_id);
+    Object.assign(form.value, res.data);
+    dialog.visible = true;
+  });
+};
+
+//复制打开
+const handleCopy = (row?: ModelVO) => {
+  billType.value = 'copy';
+  dialog.title = '复制模型';
+  nextTick(async () => {
+    await getTreeselect();
+    form.value = { ...initFormData };
+    form.value.id = row.id;
+    dialog.visible = true;
+  });
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  formRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if ('copy' === billType.value) {
+        await copyModel(form.value);
+        proxy?.$modal.msgSuccess('操作成功');
+      } else if (ids.value && ids.value.length > 0 && 'update' === billType.value) {
+        form.value.id = ids.value[0];
+        await update(form.value);
+        proxy?.$modal.msgSuccess('操作成功');
+      } else {
+        initXml(form.value.key, form.value.name);
+        form.value.xml = xml.value;
+        await addModel(form.value);
+        proxy?.$modal.msgSuccess('操作成功');
+      }
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  formRef.value.resetFields();
+};
+
+// 打开设计流程
+const clickDesign = async (id: string) => {
+  await designRef.value.open(id);
+};
+// 导出流程模型
+const clickExportZip = () => {
+  proxy?.$download.zip('/workflow/model/export/zip/' + ids.value, '模型');
+};
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await listCategory();
+  categoryOptions.value = [];
+  const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] };
+  data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId');
+  categoryOptions.value.push(data);
+};
+
+const xml = ref<string>('');
+
+const initXml = async (key: string, name: string) => {
+  xml.value = `<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef">
+  <process id="${key}" name="${name}">
+    <startEvent id="startNode1" name="开始" />
+  </process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_flow">
+    <bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c">
+      <bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke="">
+        <omgdc:Bounds x="240" y="200" width="30" height="30" />
+        <bpmndi:BPMNLabel>
+          <omgdc:Bounds x="242" y="237" width="23" height="14" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</definitions>`;
+  return xml;
+};
+</script>
diff --git a/src/views/workflow/processDefinition/components/processPreview.vue b/src/views/workflow/processDefinition/components/processPreview.vue
new file mode 100644
index 0000000000000000000000000000000000000000..19a95df36ae1495bae9e1e6ef3af463e5e399e96
--- /dev/null
+++ b/src/views/workflow/processDefinition/components/processPreview.vue
@@ -0,0 +1,45 @@
+<template>
+  <el-dialog v-model="data.visible" title="预览" width="70%" append-to-body destroy-on-close>
+    <div v-if="data.type === 'bpmn' && data.xmlStr">
+      <BpmnViewer ref="bpmnViewerRef"></BpmnViewer>
+    </div>
+    <div v-if="data.type === 'xml' && data.xmlStr">
+      <highlightjs language="xml" :code="data.xmlStr" />
+    </div>
+    <template #footer>
+      <span v-if="data.type === 'xml'" class="dialog-footer"> </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import BpmnViewer from '@/components/BpmnView/index.vue';
+
+const data = reactive({
+  visible: false,
+  type: '',
+  xmlStr: ''
+});
+
+const bpmnViewerRef = ref<InstanceType<typeof BpmnViewer>>();
+type PreviewType = 'xml' | 'bpmn';
+//打开
+const openDialog = (xmlStr: string, type: PreviewType) => {
+  data.visible = true;
+  data.xmlStr = xmlStr;
+  data.type = type;
+  /** 流程图 */
+  if (type === 'bpmn') {
+    /** 必须放在nextTick 否则第一次打开为空 */
+    nextTick(() => {
+      bpmnViewerRef.value?.initXml(data.xmlStr);
+    });
+  }
+};
+/**
+ * 对外暴露子组件方法
+ */
+defineExpose({
+  openDialog
+});
+</script>
diff --git a/src/views/workflow/processDefinition/index.vue b/src/views/workflow/processDefinition/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1dacb8032d694f5c7924f3db04e658caa10f26cf
--- /dev/null
+++ b/src/views/workflow/processDefinition/index.vue
@@ -0,0 +1,517 @@
+<template>
+  <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 流程分类树 -->
+      <el-col :lg="4" :xs="24" style="">
+        <el-card shadow="hover">
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+          <el-tree
+            ref="categoryTreeRef"
+            class="mt-2"
+            node-key="id"
+            :data="categoryOptions"
+            :props="{ label: 'categoryName', children: 'children' }"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </el-card>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card shadow="hover">
+              <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
+                <el-form-item label="流程定义名称" prop="name">
+                  <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" clearable @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="流程定义KEY" prop="key">
+                  <el-input v-model="queryParams.key" placeholder="请输入流程定义KEY" 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">
+          <template #header>
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="danger" icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="primary" icon="UploadFilled" @click="uploadDialog.visible = true">部署流程文件</el-button>
+              </el-col>
+              <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar>
+            </el-row>
+          </template>
+
+          <el-table v-loading="loading" border :data="processDefinitionList" @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 align="center" prop="name" label="流程定义名称" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column align="center" prop="key" label="标识KEY" width="80"></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="resourceName" label="流程XML" width="100" :show-overflow-tooltip="true">
+              <template #default="scope">
+                <el-link type="primary" @click="clickPreview(scope.row.id, 'xml')">{{ scope.row.resourceName }}</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="diagramResourceName" label="流程图片" width="100" :show-overflow-tooltip="true">
+              <template #default="scope">
+                <el-link type="primary" @click="clickPreview(scope.row.id, 'bpmn')">{{ scope.row.diagramResourceName }}</el-link>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="suspensionState" label="状态" width="80">
+              <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="部署时间" width="120" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column align="center" label="表名/表单KEY" width="120" :show-overflow-tooltip="true">
+              <template #default="scope">
+                <span v-if="scope.row.wfDefinitionConfigVo">
+                  {{ scope.row.wfDefinitionConfigVo.tableName }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" align="center" width="220" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-row :gutter="10" class="mb8">
+                  <el-col :span="1.5">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      :icon="scope.row.suspensionState === 1 ? 'Lock' : 'Unlock'"
+                      @click="handleProcessDefState(scope.row)"
+                    >
+                      {{ scope.row.suspensionState === 1 ? '挂起流程' : '激活流程' }}
+                    </el-button>
+                  </el-col>
+                  <el-col :span="1.5">
+                    <el-button link type="primary" size="small" icon="Document" @click="getProcessDefinitionHitoryList(scope.row.id, scope.row.key)">
+                      历史版本
+                    </el-button>
+                  </el-col>
+                  <el-col :span="1.5">
+                    <el-button link 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 link type="primary" size="small" icon="Sort" @click="handleConvertToModel(scope.row)"> 转换模型 </el-button>
+                  </el-col>
+                  <el-col :span="1.5">
+                    <el-button link type="primary" size="small" icon="Tickets" @click="handleDefinitionConfigOpen(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="getList"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 预览图片或xml -->
+    <process-preview ref="previewRef" />
+
+    <!-- 部署文件 -->
+    <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: 'categoryCode', label: 'categoryName', children: 'children' }"
+            filterable
+            value-key="categoryCode"
+            :render-after-expand="false"
+            check-strictly
+            style="width: 240px"
+          />
+        </div>
+        <el-upload
+          class="upload-demo"
+          drag
+          multiple
+          accept="application/zip,application/xml,.bpmn"
+          :before-upload="handlerBeforeUpload"
+          :http-request="handerDeployProcessFile"
+        >
+          <el-icon class="UploadFilled"><upload-filled /></el-icon>
+          <div class="el-upload__text"><em>点击上传，选择BPMN流程文件</em></div>
+          <div class="el-upload__text">仅支持 .zip、.bpmn20.xml、bpmn 格式文件</div>
+          <div class="el-upload__text">PS:如若部署请部署从本项目模型管理导出的数据</div>
+        </el-upload>
+      </div>
+    </el-dialog>
+
+    <!-- 历史版本 -->
+    <el-dialog v-if="processDefinitionDialog.visible" v-model="processDefinitionDialog.visible" :title="processDefinitionDialog.title" width="70%">
+      <el-table v-loading="loading" :data="processDefinitionHistoryList" @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 align="center" prop="name" label="流程定义名称" :show-overflow-tooltip="true" min-width="80"></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 align="center" prop="resourceName" label="流程XML" min-width="80" :show-overflow-tooltip="true">
+          <template #default="scope">
+            <el-link type="primary" @click="clickPreviewXML(scope.row.id)">{{ scope.row.resourceName }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="diagramResourceName" label="流程图片" min-width="80" :show-overflow-tooltip="true">
+          <template #default="scope">
+            <el-link type="primary" @click="clickPreviewImg(scope.row.id)">{{ scope.row.diagramResourceName }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column 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-column fixed="right" label="操作" align="center" width="200" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button
+                  link
+                  type="primary"
+                  size="small"
+                  :icon="scope.row.suspensionState === 1 ? 'Lock' : 'Unlock'"
+                  @click="handleProcessDefState(scope.row)"
+                >
+                  {{ scope.row.suspensionState === 1 ? '挂起流程' : '激活流程' }}
+                </el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="text" size="small" icon="Tickets" @click="handleDefinitionConfigOpen(scope.row)">绑定业务</el-button>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button link type="primary" icon="Sort" size="small" @click="handleConvertToModel(scope.row)"> 转换模型 </el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button link type="primary" icon="Delete" size="small" @click="handleDelete(scope.row)">删除</el-button>
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <!-- 表单配置 -->
+    <el-dialog
+      v-model="definitionConfigDialog.visible"
+      :title="definitionConfigDialog.title"
+      width="650px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form :model="definitionConfigForm" label-width="auto">
+        <el-form-item label="流程KEY">
+          <el-input v-model="definitionConfigForm.processKey" disabled />
+        </el-form-item>
+        <el-form-item label="表名" prop="formId">
+          <el-input v-model="definitionConfigForm.tableName" placeholder="示例:test_leave" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="definitionConfigForm.remark" type="textarea" resize="none" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="definitionConfigDialog.visible = false">取消</el-button>
+          <el-button type="primary" @click="handlerSaveForm">保存</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup name="processDefinition">
+import {
+  listProcessDefinition,
+  definitionImage,
+  definitionXml,
+  deleteProcessDefinition,
+  updateDefinitionState,
+  convertToModel,
+  deployProcessFile,
+  getListByKey
+} from '@/api/workflow/processDefinition';
+import { getByTableNameNotDefId, getByDefId, saveOrUpdate } from '@/api/workflow/definitionConfig';
+import ProcessPreview from './components/processPreview.vue';
+import { listCategory } from '@/api/workflow/category';
+import { CategoryVO } from '@/api/workflow/category/types';
+import { ProcessDefinitionQuery, ProcessDefinitionVO } from '@/api/workflow/processDefinition/types';
+import { DefinitionConfigForm } from '@/api/workflow/definitionConfig/types';
+import { UploadRequestOptions, ElMessage, ElMessageBox } from 'element-plus';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const previewRef = ref<InstanceType<typeof ProcessPreview>>();
+const queryFormRef = ref<ElFormInstance>();
+const categoryTreeRef = ref<ElTreeInstance>();
+const definitionConfigForm = ref<DefinitionConfigForm>({});
+
+type CategoryOption = {
+  categoryCode: string;
+  categoryName: string;
+  children?: CategoryOption[];
+};
+
+const loading = ref(true);
+const ids = ref<Array<any>>([]);
+const deploymentIds = ref<Array<any>>([]);
+const keys = ref<Array<any>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const uploadDialogLoading = ref(false);
+const processDefinitionList = ref<ProcessDefinitionVO[]>([]);
+const processDefinitionHistoryList = ref<ProcessDefinitionVO[]>([]);
+const categoryOptions = ref<CategoryOption[]>([]);
+const categoryName = ref('');
+/** 部署文件分类选择 */
+const selectCategory = ref();
+
+const uploadDialog = reactive<DialogOption>({
+  visible: false,
+  title: '部署流程文件'
+});
+
+const processDefinitionDialog = reactive<DialogOption>({
+  visible: false,
+  title: '历史版本'
+});
+
+const definitionConfigDialog = reactive<DialogOption>({
+  visible: false,
+  title: '流程定义配置'
+});
+
+// 查询参数
+const queryParams = ref<ProcessDefinitionQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  name: undefined,
+  key: undefined,
+  categoryCode: undefined
+});
+
+onMounted(() => {
+  getList();
+  getTreeselect();
+});
+
+/** 节点单击事件 */
+const handleNodeClick = (data: CategoryVO) => {
+  queryParams.value.categoryCode = data.categoryCode;
+  if (data.categoryCode === 'ALL') {
+    queryParams.value.categoryCode = '';
+  }
+  handleQuery();
+};
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.categoryName.indexOf(value) !== -1;
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    categoryTreeRef.value.filter(categoryName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await listCategory();
+  categoryOptions.value = [];
+  const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] };
+  data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId');
+  categoryOptions.value.push(data);
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.categoryCode = '';
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: any) => {
+  ids.value = selection.map((item: any) => item.id);
+  deploymentIds.value = selection.map((item: any) => item.deploymentId);
+  keys.value = selection.map((item: any) => item.key);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+//分页
+const getList = async () => {
+  loading.value = true;
+  const resp = await listProcessDefinition(queryParams.value);
+  processDefinitionList.value = resp.rows;
+  total.value = resp.total;
+  loading.value = false;
+};
+//获取历史流程定义
+const getProcessDefinitionHitoryList = async (id: string, key: string) => {
+  processDefinitionDialog.visible = true;
+  loading.value = true;
+  const resp = await getListByKey(key);
+  if (resp.data && resp.data.length > 0) {
+    processDefinitionHistoryList.value = resp.data.filter((item: any) => item.id !== id);
+  }
+  loading.value = false;
+};
+
+type PreviewType = 'xml' | 'bpmn';
+//预览 公共方法
+const clickPreview = async (id: string, type: PreviewType) => {
+  loading.value = true;
+  const resp = await definitionXml(id);
+  if (previewRef.value) {
+    const xmlStr = resp.data.xmlStr;
+    loading.value = false;
+    previewRef.value.openDialog(xmlStr, type);
+  }
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: ProcessDefinitionVO) => {
+  const id = row?.id || ids.value;
+  const deployIds = row?.deploymentId || deploymentIds.value;
+  const defKeys = row?.key || keys.value;
+  await proxy?.$modal.confirm('是否确认删除流程定义KEY为【' + defKeys + '】的数据项？');
+  loading.value = true;
+  await deleteProcessDefinition(deployIds, id).finally(() => (loading.value = false));
+  await getList();
+  proxy?.$modal.msgSuccess('删除成功');
+};
+/** 挂起/激活 */
+const handleProcessDefState = async (row: ProcessDefinitionVO) => {
+  let msg: string;
+  if (row.suspensionState === 1) {
+    msg = `暂停后，此流程下的所有任务都不允许往后流转，您确定挂起【${row.name || row.key}】吗？`;
+  } else {
+    msg = `启动后，此流程下的所有任务都允许往后流转，您确定激活【${row.name || row.key}】吗？`;
+  }
+  await proxy?.$modal.confirm(msg);
+  loading.value = true;
+  await updateDefinitionState(row.id).finally(() => (loading.value = false));
+  await getList();
+  proxy?.$modal.msgSuccess('操作成功');
+};
+/** 流程定义转换为模型 */
+const handleConvertToModel = async (row: ProcessDefinitionVO) => {
+  await proxy?.$modal.confirm('是否确认转换流程定义key为【' + row.key + '】的数据项？');
+  await convertToModel(row.id).finally(() => (loading.value = false));
+  getList();
+  proxy?.$modal.msgSuccess('操作成功');
+};
+
+//上传文件前的钩子
+const handlerBeforeUpload = () => {
+  if (selectCategory.value === 'ALL') {
+    proxy?.$modal.msgError('顶级节点不可作为分类！');
+    return false;
+  }
+  if (!selectCategory.value) {
+    proxy?.$modal.msgError('请选择左侧要上传的分类！');
+    return false;
+  }
+};
+//部署文件
+const handerDeployProcessFile = (data: UploadRequestOptions): XMLHttpRequest => {
+  let formData = new FormData();
+  uploadDialogLoading.value = true;
+  formData.append('file', data.file);
+  formData.append('categoryCode', selectCategory.value);
+  deployProcessFile(formData)
+    .then(() => {
+      uploadDialog.visible = false;
+      proxy?.$modal.msgSuccess('部署成功');
+      handleQuery();
+    })
+    .finally(() => {
+      uploadDialogLoading.value = false;
+    });
+  return;
+};
+//打开流程定义配置
+const handleDefinitionConfigOpen = async (row: ProcessDefinitionVO) => {
+  definitionConfigDialog.visible = true;
+  definitionConfigForm.value.processKey = row.key;
+  definitionConfigForm.value.definitionId = row.id;
+  definitionConfigForm.value.version = row.version;
+  const resp = await getByDefId(row.id);
+  if (resp.data) {
+    definitionConfigForm.value = resp.data;
+  } else {
+    definitionConfigForm.value.tableName = undefined;
+    definitionConfigForm.value.remark = undefined;
+  }
+};
+//保存表单
+const handlerSaveForm = async () => {
+  getByTableNameNotDefId(definitionConfigForm.value.tableName, definitionConfigForm.value.definitionId).then((res) => {
+    if (res.data && res.data.length > 0) {
+      ElMessageBox.confirm('表名已被【' + res.data[0].processKey + '】版本v' + res.data[0].version + '.0绑定确认后将会删除绑定的流程KEY!', '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        saveOrUpdate(definitionConfigForm.value).then((resp) => {
+          if (resp.code === 200) {
+            proxy?.$modal.msgSuccess('操作成功');
+            definitionConfigDialog.visible = false;
+            getList();
+          }
+        });
+      });
+    } else {
+      saveOrUpdate(definitionConfigForm.value).then((resp) => {
+        if (resp.code === 200) {
+          proxy?.$modal.msgSuccess('操作成功');
+          definitionConfigDialog.visible = false;
+          getList();
+        }
+      });
+    }
+  });
+};
+</script>
diff --git a/src/views/workflow/processInstance/index.vue b/src/views/workflow/processInstance/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4f994af7bf837b9d0cbb1e0c2bcffb622d515b55
--- /dev/null
+++ b/src/views/workflow/processInstance/index.vue
@@ -0,0 +1,361 @@
+<template>
+  <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 流程分类树 -->
+      <el-col :lg="4" :xs="24" style="">
+        <el-card shadow="hover">
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+          <el-tree
+            ref="categoryTreeRef"
+            class="mt-2"
+            node-key="id"
+            :data="categoryOptions"
+            :props="{ label: 'categoryName', children: 'children' }"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </el-card>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <div class="mb-[10px]">
+          <el-card shadow="hover" class="text-center">
+            <el-radio-group v-model="tab" @change="changeTab(tab)">
+              <el-radio-button value="running">运行中</el-radio-button>
+              <el-radio-button value="finish">已完成</el-radio-button>
+            </el-radio-group>
+          </el-card>
+        </div>
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card shadow="hover">
+              <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
+                <el-form-item label="流程定义名称" prop="name">
+                  <el-input v-model="queryParams.name" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="流程定义KEY" prop="key">
+                  <el-input v-model="queryParams.key" placeholder="请输入流程定义KEY" @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">
+          <template #header>
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+              </el-col>
+              <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
+            </el-row>
+          </template>
+
+          <el-table v-loading="loading" border :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" align="center" label="流程定义名称">
+              <template #default="scope">
+                <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+            <el-table-column align="center" prop="processDefinitionVersion" label="版本号" width="90">
+              <template #default="scope"> v{{ scope.row.processDefinitionVersion }}.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.businessStatus"></dict-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="startTime" label="启动时间" width="160"></el-table-column>
+            <el-table-column v-if="tab === 'finish'" align="center" prop="endTime" label="结束时间" width="160"></el-table-column>
+            <el-table-column label="操作" align="center" :width="130">
+              <template #default="scope">
+                <el-row v-if="tab === 'running'" :gutter="10" class="mb8">
+                  <el-col :span="1.5">
+                    <el-popover :ref="`popoverRef${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 link type="primary" size="small" icon="CircleClose">作废</el-button>
+                      </template>
+                    </el-popover>
+                  </el-col>
+                  <el-col :span="1.5">
+                    <el-button link 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 link type="primary" size="small" icon="View" @click="handleView(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-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 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 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-column fixed="right" label="操作" align="center" width="200" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-button link type="primary" size="small" icon="Sort" @click="handleChange(scope.row.id)">切换</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  getPageByRunning,
+  getPageByFinish,
+  deleteRunAndHisInstance,
+  deleteFinishAndHisInstance,
+  deleteRunInstance
+} from '@/api/workflow/processInstance';
+import { getListByKey, migrationDefinition } from '@/api/workflow/processDefinition';
+import { listCategory } from '@/api/workflow/category';
+import { CategoryVO } from '@/api/workflow/category/types';
+import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+//审批记录组件
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+const queryFormRef = ref<ElFormInstance>();
+const categoryTreeRef = ref<ElTreeInstance>();
+
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref<Array<any>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 流程定义id
+const processDefinitionId = ref<string>('');
+// 模型定义表格数据
+const processInstanceList = ref<ProcessInstanceVO[]>([]);
+const processDefinitionHistoryList = ref<Array<any>>([]);
+const categoryOptions = ref<CategoryOption[]>([]);
+const categoryName = ref('');
+
+const processDefinitionDialog = reactive<DialogOption>({
+  visible: false,
+  title: '流程定义'
+});
+
+type CategoryOption = {
+  categoryCode: string;
+  categoryName: string;
+  children?: CategoryOption[];
+};
+
+const tab = ref('running');
+// 作废原因
+const deleteReason = ref('');
+// 查询参数
+const queryParams = ref<ProcessInstanceQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  name: undefined,
+  key: undefined,
+  categoryCode: undefined
+});
+
+/** 节点单击事件 */
+const handleNodeClick = (data: CategoryVO) => {
+  queryParams.value.categoryCode = data.categoryCode;
+  if (data.categoryCode === 'ALL') {
+    queryParams.value.categoryCode = '';
+  }
+  handleQuery();
+};
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.categoryName.indexOf(value) !== -1;
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    categoryTreeRef.value.filter(categoryName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await listCategory();
+  categoryOptions.value = [];
+  const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] };
+  data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId');
+  categoryOptions.value.push(data);
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  if ('running' === tab.value) {
+    getProcessInstanceRunningList();
+  } else {
+    getProcessInstanceFinishList();
+  }
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.categoryCode = '';
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: ProcessInstanceVO[]) => {
+  ids.value = selection.map((item: any) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+//分页
+const getProcessInstanceRunningList = () => {
+  loading.value = true;
+  getPageByRunning(queryParams.value).then((resp) => {
+    processInstanceList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+//分页
+const getProcessInstanceFinishList = () => {
+  loading.value = true;
+  getPageByFinish(queryParams.value).then((resp) => {
+    processInstanceList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  const id = row.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除id为【' + id + '】的数据项？');
+  loading.value = true;
+  if ('running' === tab.value) {
+    await deleteRunAndHisInstance(id).finally(() => (loading.value = false));
+    getProcessInstanceRunningList();
+  } else {
+    await deleteFinishAndHisInstance(id).finally(() => (loading.value = false));
+    getProcessInstanceFinishList();
+  }
+  proxy?.$modal.msgSuccess('删除成功');
+};
+const changeTab = async (data: string) => {
+  processInstanceList.value = [];
+  queryParams.value.pageNum = 1;
+  if ('running' === data) {
+    getProcessInstanceRunningList();
+  } else {
+    getProcessInstanceFinishList();
+  }
+};
+/** 作废按钮操作 */
+const handleInvalid = async (row: ProcessInstanceVO) => {
+  await proxy?.$modal.confirm('是否确认作废业务id为【' + row.businessKey + '】的数据项？');
+  loading.value = true;
+  if ('running' === tab.value) {
+    let param = {
+      processInstanceId: row.id,
+      deleteReason: deleteReason.value
+    };
+    await deleteRunInstance(param).finally(() => (loading.value = false));
+    getProcessInstanceRunningList();
+    proxy?.$modal.msgSuccess('操作成功');
+  }
+};
+const cancelPopover = async (index: any) => {
+  (proxy?.$refs[`popoverRef${index}`] as any).hide(); //关闭弹窗
+};
+//获取流程定义
+const getProcessDefinitionHitoryList = (id: string, key: string) => {
+  processDefinitionDialog.visible = true;
+  processDefinitionId.value = id;
+  loading.value = true;
+  getListByKey(key).then((resp) => {
+    if (resp.data && resp.data.length > 0) {
+      processDefinitionHistoryList.value = resp.data.filter((item: any) => item.id !== id);
+    }
+    loading.value = false;
+  });
+};
+//切换流程版本
+const handleChange = async (id: string) => {
+  await proxy?.$modal.confirm('是否确认切换？');
+  loading.value = true;
+  migrationDefinition(processDefinitionId.value, id).then((resp) => {
+    proxy?.$modal.msgSuccess('操作成功');
+    getProcessInstanceRunningList();
+    processDefinitionDialog.visible = false;
+    loading.value = false;
+  });
+};
+/** 查看按钮操作 */
+const handleView = (row) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    wfDefinitionConfigVo: row.wfDefinitionConfigVo,
+    wfNodeConfigVo: row.wfNodeConfigVo,
+    businessKey: row.businessKey,
+    taskId: row.id,
+    type: 'view'
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+
+onMounted(() => {
+  getProcessInstanceRunningList();
+  getTreeselect();
+});
+</script>
diff --git a/src/views/workflow/task/allTaskWaiting.vue b/src/views/workflow/task/allTaskWaiting.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fe530b81af2001a61b6b586d4e882f7a08f63ad6
--- /dev/null
+++ b/src/views/workflow/task/allTaskWaiting.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="p-2">
+    <div class="mb-[10px]">
+      <el-card shadow="hover" class="text-center">
+        <el-radio-group v-model="tab" @change="changeTab(tab)">
+          <el-radio-button value="waiting">待办任务</el-radio-button>
+          <el-radio-button value="finish">已办任务</el-radio-button>
+        </el-radio-group>
+      </el-card>
+    </div>
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="任务名称" prop="name">
+              <el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义名称" label-width="100" prop="processDefinitionName">
+              <el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义KEY" label-width="100" prop="processDefinitionKey">
+              <el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @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">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Edit" :disabled="multiple" @click="handleUpdate">修改办理人</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :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" align="center" label="流程定义名称">
+          <template #default="scope">
+            <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+        <el-table-column align="center" prop="name" label="任务名称"></el-table-column>
+        <el-table-column align="center" prop="assigneeName" label="办理人">
+          <template v-if="tab === 'waiting'" #default="scope">
+            <template v-if="scope.row.participantVo && scope.row.assignee === null">
+              <el-tag v-for="(item, index) in scope.row.participantVo.candidateName" :key="index" type="success">
+                {{ item }}
+              </el-tag>
+            </template>
+            <template v-else>
+              <el-tag type="success">
+                {{ scope.row.assigneeName || '无' }}
+              </el-tag>
+            </template>
+          </template>
+          <template v-else-if="tab === 'finish'" #default="scope">
+            <el-tag type="success">
+              {{ scope.row.assigneeName || '无' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="流程状态" min-width="70">
+          <template #default="scope">
+            <dict-tag v-if="tab === 'waiting'" :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag>
+            <el-tag v-else type="success">已完成</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="tab === 'waiting'" align="center" prop="createTime" label="创建时间" width="160"></el-table-column>
+        <el-table-column v-if="tab === 'finish'" align="center" prop="startTime" label="创建时间" width="160"></el-table-column>
+        <el-table-column label="操作" align="center" :width="tab === 'finish' ? '80' : '151'">
+          <template #default="scope">
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button link type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
+              </el-col>
+              <el-col v-if="tab === 'waiting'" :span="1.5">
+                <el-button link type="primary" size="small" icon="Document" @click="handleInstanceVariable(scope.row)">流程变量</el-button>
+              </el-col>
+            </el-row>
+            <el-row v-if="scope.row.multiInstance" :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button link type="primary" size="small" icon="Remove" @click="deleteMultiInstanceUser(scope.row)">减签</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button link type="primary" size="small" icon="CirclePlus" @click="addMultiInstanceUser(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-card>
+    <!-- 加签组件 -->
+    <multiInstanceUser ref="multiInstanceUserRef" :title="title" @submit-callback="handleQuery" />
+    <!-- 选人组件 -->
+    <UserSelect ref="userSelectRef" :multiple="false" @confirm-call-back="submitCallback"></UserSelect>
+    <!-- 流程变量开始 -->
+    <el-dialog v-model="variableVisible" draggable title="流程变量" width="60%" :close-on-click-modal="false">
+      <el-card v-loading="variableLoading" class="box-card">
+        <template #header>
+          <div class="clearfix">
+            <span
+              >流程定义名称：<el-tag>{{ processDefinitionName }}</el-tag></span
+            >
+          </div>
+        </template>
+        <div v-for="(v, index) in variableList" :key="index">
+          <el-form v-if="v.key !== '_FLOWABLE_SKIP_EXPRESSION_ENABLED'" :label-position="'right'" label-width="150px">
+            <el-form-item :label="v.key + '：'">
+              {{ v.value }}
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-card>
+    </el-dialog>
+    <!-- 流程变量结束 -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getPageByAllTaskWait, getPageByAllTaskFinish, updateAssignee, getInstanceVariable } from '@/api/workflow/task';
+import MultiInstanceUser from '@/components/Process/multiInstanceUser.vue';
+import UserSelect from '@/components/UserSelect';
+import { TaskQuery, TaskVO, VariableVo } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+//审批记录组件
+//加签组件
+const multiInstanceUserRef = ref<InstanceType<typeof MultiInstanceUser>>();
+//选人组件
+const userSelectRef = ref<InstanceType<typeof UserSelect>>();
+
+const queryFormRef = ref<ElFormInstance>();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref<Array<any>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+const title = ref('');
+// 流程变量是否显示
+const variableVisible = ref(false);
+const variableLoading = ref(true);
+// 流程变量
+const variableList = ref<VariableVo>({
+  key: '',
+  value: ''
+});
+//流程定义名称
+const processDefinitionName = ref();
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  name: undefined,
+  processDefinitionName: undefined,
+  processDefinitionKey: undefined
+});
+const tab = ref('waiting');
+
+//加签
+const addMultiInstanceUser = (row: TaskVO) => {
+  if (multiInstanceUserRef.value) {
+    title.value = '加签人员';
+    multiInstanceUserRef.value.getAddMultiInstanceList(row.id, []);
+  }
+};
+//减签
+const deleteMultiInstanceUser = (row: TaskVO) => {
+  if (multiInstanceUserRef.value) {
+    title.value = '减签人员';
+    multiInstanceUserRef.value.getDeleteMultiInstanceList(row.id);
+  }
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  if ('waiting' === tab.value) {
+    getWaitingList();
+  } else {
+    getFinishList();
+  }
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: any) => {
+  ids.value = selection.map((item: any) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+const changeTab = async (data: string) => {
+  taskList.value = [];
+  queryParams.value.pageNum = 1;
+  if ('waiting' === data) {
+    getWaitingList();
+  } else {
+    getFinishList();
+  }
+};
+//分页
+const getWaitingList = () => {
+  loading.value = true;
+  getPageByAllTaskWait(queryParams.value).then((resp) => {
+    taskList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+const getFinishList = () => {
+  loading.value = true;
+  getPageByAllTaskFinish(queryParams.value).then((resp) => {
+    taskList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+//打开修改选人
+const handleUpdate = () => {
+  userSelectRef.value.open();
+};
+//修改办理人
+const submitCallback = async (data) => {
+  if (data && data.length > 0) {
+    await proxy?.$modal.confirm('是否确认提交？');
+    loading.value = true;
+    await updateAssignee(ids.value, data[0].userId);
+    handleQuery();
+    proxy?.$modal.msgSuccess('操作成功');
+  } else {
+    proxy?.$modal.msgWarning('请选择用户！');
+  }
+};
+//查询流程变量
+const handleInstanceVariable = async (row: TaskVO) => {
+  variableLoading.value = true;
+  variableVisible.value = true;
+  processDefinitionName.value = row.processDefinitionName;
+  let data = await getInstanceVariable(row.id);
+  variableList.value = data.data;
+  variableLoading.value = false;
+};
+/** 查看按钮操作 */
+const handleView = (row) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    wfDefinitionConfigVo: row.wfDefinitionConfigVo,
+    wfNodeConfigVo: row.wfNodeConfigVo,
+    businessKey: row.businessKey,
+    taskId: row.id,
+    type: 'view'
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+onMounted(() => {
+  getWaitingList();
+});
+</script>
diff --git a/src/views/workflow/task/myDocument.vue b/src/views/workflow/task/myDocument.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e8592f8e9a1c224e3a0d110a086b5c38e20c08f8
--- /dev/null
+++ b/src/views/workflow/task/myDocument.vue
@@ -0,0 +1,261 @@
+<template>
+  <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 流程分类树 -->
+      <el-col :lg="4" :xs="24" style="">
+        <el-card shadow="hover">
+          <el-input v-model="categoryName" placeholder="请输入流程分类名" prefix-icon="Search" clearable />
+          <el-tree
+            ref="categoryTreeRef"
+            class="mt-2"
+            node-key="id"
+            :data="categoryOptions"
+            :props="{ label: 'categoryName', children: 'children' }"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            highlight-current
+            default-expand-all
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </el-card>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card shadow="hover">
+              <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
+                <el-form-item label="流程定义名称" prop="name">
+                  <el-input v-model="queryParams.name" 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>
+        </transition>
+        <el-card shadow="hover">
+          <template #header>
+            <el-row :gutter="10" class="mb8">
+              <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
+            </el-row>
+          </template>
+
+          <el-table v-loading="loading" border :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" align="center" label="流程定义名称">
+              <template #default="scope">
+                <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+            <el-table-column align="center" prop="processDefinitionVersion" label="版本号" width="90">
+              <template #default="scope"> v{{ scope.row.processDefinitionVersion }}.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.businessStatus"></dict-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" prop="startTime" label="启动时间" width="160"></el-table-column>
+            <el-table-column v-if="tab === 'finish'" align="center" prop="endTime" label="结束时间" width="160"></el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-tooltip
+                  v-if="scope.row.businessStatus === 'draft' || scope.row.businessStatus === 'cancel' || scope.row.businessStatus === 'back'"
+                  content="修改"
+                  placement="top"
+                >
+                  <el-button v-hasPermi="['demo:leave:edit']" link type="primary" icon="Edit" @click="handleOpen(scope.row, 'update')"></el-button>
+                </el-tooltip>
+                <el-tooltip
+                  v-if="scope.row.businessStatus === 'draft' || scope.row.businessStatus === 'cancel' || scope.row.businessStatus === 'back'"
+                  content="删除"
+                  placement="top"
+                >
+                  <el-button v-hasPermi="['demo:leave:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+                </el-tooltip>
+                <el-tooltip placement="top" content="查看">
+                  <el-button link type="primary" icon="View" @click="handleOpen(scope.row, 'view')"></el-button>
+                </el-tooltip>
+                <el-tooltip v-if="scope.row.businessStatus === 'waiting'" content="撤销" placement="top">
+                  <el-button link type="primary" icon="Notification" @click="handleCancelProcessApply(scope.row.id)"></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>
+    <!-- 提交组件 -->
+    <submitVerify ref="submitVerifyRef" @submit-callback="getList" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getPageByCurrent, deleteRunAndHisInstance, cancelProcessApply } from '@/api/workflow/processInstance';
+import { listCategory } from '@/api/workflow/category';
+import { CategoryVO } from '@/api/workflow/category/types';
+import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+const queryFormRef = ref<ElFormInstance>();
+const categoryTreeRef = ref<ElTreeInstance>();
+
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref<Array<any>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const processInstanceList = ref<ProcessInstanceVO[]>([]);
+
+const categoryOptions = ref<CategoryOption[]>([]);
+const categoryName = ref('');
+
+interface CategoryOption {
+  categoryCode: string;
+  categoryName: string;
+  children?: CategoryOption[];
+}
+
+const tab = ref('running');
+// 查询参数
+const queryParams = ref<ProcessInstanceQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  name: undefined,
+  categoryCode: undefined
+});
+
+onMounted(() => {
+  getList();
+  getTreeselect();
+});
+
+/** 节点单击事件 */
+const handleNodeClick = (data: CategoryVO) => {
+  queryParams.value.categoryCode = data.categoryCode;
+  if (data.categoryCode === 'ALL') {
+    queryParams.value.categoryCode = '';
+  }
+  handleQuery();
+};
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.categoryName.indexOf(value) !== -1;
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    categoryTreeRef.value.filter(categoryName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+/** 查询流程分类下拉树结构 */
+const getTreeselect = async () => {
+  const res = await listCategory();
+  categoryOptions.value = [];
+  const data: CategoryOption = { categoryCode: 'ALL', categoryName: '顶级节点', children: [] };
+  data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId');
+  categoryOptions.value.push(data);
+};
+
+//审批记录
+const handleApprovalRecord = (processInstanceId: string) => {
+  if (approvalRecordRef.value) {
+    approvalRecordRef.value.init(processInstanceId);
+  }
+};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.categoryCode = '';
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: ProcessInstanceVO[]) => {
+  ids.value = selection.map((item: any) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+//分页
+const getList = () => {
+  loading.value = true;
+  getPageByCurrent(queryParams.value).then((resp) => {
+    processInstanceList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row: ProcessInstanceVO) => {
+  const id = row.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除id为【' + id + '】的数据项？');
+  loading.value = true;
+  if ('running' === tab.value) {
+    await deleteRunAndHisInstance(id).finally(() => (loading.value = false));
+    getList();
+  }
+  proxy?.$modal.msgSuccess('删除成功');
+};
+
+/** 撤销按钮操作 */
+const handleCancelProcessApply = async (processInstanceId: string) => {
+  await proxy?.$modal.confirm('是否确认撤销当前单据？');
+  loading.value = true;
+  if ('running' === tab.value) {
+    await cancelProcessApply(processInstanceId).finally(() => (loading.value = false));
+    getList();
+  }
+  proxy?.$modal.msgSuccess('撤销成功');
+};
+
+//办理
+const handleOpen = async (row, type) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    wfDefinitionConfigVo: row.wfDefinitionConfigVo,
+    wfNodeConfigVo: row.wfNodeConfigVo,
+    businessKey: row.businessKey,
+    taskId: row.id,
+    type: type
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+</script>
diff --git a/src/views/workflow/task/taskCopyList.vue b/src/views/workflow/task/taskCopyList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7784a08fd12f5455dfed2015fdfc0deff22f9589
--- /dev/null
+++ b/src/views/workflow/task/taskCopyList.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="任务名称" prop="name">
+              <el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义名称" label-width="100" prop="processDefinitionName">
+              <el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义KEY" label-width="100" prop="processDefinitionKey">
+              <el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @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">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :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" align="center" label="流程定义名称">
+          <template #default="scope">
+            <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+        <el-table-column align="center" prop="name" label="任务名称"></el-table-column>
+        <el-table-column align="center" prop="assigneeName" label="办理人">
+          <template #default="scope">
+            <template v-if="scope.row.participantVo && scope.row.assignee === null">
+              <el-tag v-for="(item, index) in scope.row.participantVo.candidateName" :key="index" type="success">
+                {{ item }}
+              </el-tag>
+            </template>
+            <template v-else>
+              <el-tag type="success">
+                {{ scope.row.assigneeName || '无' }}
+              </el-tag>
+            </template>
+          </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.businessStatus"></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 lang="ts" setup>
+import { getPageByTaskCopy } from '@/api/workflow/task';
+import { TaskQuery } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+//审批记录组件
+const queryFormRef = ref<ElFormInstance>();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref<Array<any>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  name: undefined,
+  processDefinitionName: undefined,
+  processDefinitionKey: undefined
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getTaskCopyList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: any) => {
+  ids.value = selection.map((item: any) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+//分页
+const getTaskCopyList = () => {
+  loading.value = true;
+  getPageByTaskCopy(queryParams.value).then((resp) => {
+    taskList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+
+/** 查看按钮操作 */
+const handleView = (row) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    wfDefinitionConfigVo: row.wfDefinitionConfigVo,
+    wfNodeConfigVo: row.wfNodeConfigVo,
+    businessKey: row.businessKey,
+    taskId: row.id,
+    type: 'view'
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+
+onMounted(() => {
+  getTaskCopyList();
+});
+</script>
diff --git a/src/views/workflow/task/taskFinish.vue b/src/views/workflow/task/taskFinish.vue
new file mode 100644
index 0000000000000000000000000000000000000000..155bd4f9f437dbb380430ff12c39c3358ecbdefa
--- /dev/null
+++ b/src/views/workflow/task/taskFinish.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="任务名称" prop="name">
+              <el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义名称" label-width="100" prop="processDefinitionName">
+              <el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义KEY" label-width="100" prop="processDefinitionKey">
+              <el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @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">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :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" align="center" label="流程定义名称">
+          <template #default="scope">
+            <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+        <el-table-column align="center" prop="name" label="任务名称"></el-table-column>
+        <el-table-column align="center" prop="assigneeName" label="办理人">
+          <template #default="scope">
+            <el-tag type="success">
+              {{ scope.row.assigneeName || '无' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="startTime" label="创建时间" width="160"></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 lang="ts" setup>
+import { getPageByTaskFinish } from '@/api/workflow/task';
+import { TaskQuery, TaskVO } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+//审批记录组件
+const queryFormRef = ref<ElFormInstance>();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref<Array<any>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  name: undefined,
+  processDefinitionName: undefined,
+  processDefinitionKey: undefined
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getFinishList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: any) => {
+  ids.value = selection.map((item: any) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+const getFinishList = () => {
+  loading.value = true;
+  getPageByTaskFinish(queryParams.value).then((resp) => {
+    taskList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+/** 查看按钮操作 */
+const handleView = (row: TaskVO) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    wfDefinitionConfigVo: row.wfDefinitionConfigVo,
+    wfNodeConfigVo: row.wfNodeConfigVo,
+    businessKey: row.businessKey,
+    taskId: row.id,
+    type: 'view'
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+
+onMounted(() => {
+  getFinishList();
+});
+</script>
diff --git a/src/views/workflow/task/taskWaiting.vue b/src/views/workflow/task/taskWaiting.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dc6546a47b4fca80bb849c4aad8b5771c328bd6a
--- /dev/null
+++ b/src/views/workflow/task/taskWaiting.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="任务名称" prop="name">
+              <el-input v-model="queryParams.name" placeholder="请输入任务名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义名称" label-width="100" prop="processDefinitionName">
+              <el-input v-model="queryParams.processDefinitionName" placeholder="请输入流程定义名称" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="流程定义KEY" label-width="100" prop="processDefinitionKey">
+              <el-input v-model="queryParams.processDefinitionKey" placeholder="请输入流程定义KEY" @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">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :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" align="center" label="流程定义名称">
+          <template #default="scope">
+            <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="processDefinitionKey" label="流程定义KEY"></el-table-column>
+        <el-table-column align="center" prop="name" label="任务名称"></el-table-column>
+        <el-table-column align="center" prop="assigneeName" label="办理人">
+          <template #default="scope">
+            <template v-if="scope.row.participantVo && scope.row.assignee === null">
+              <el-tag v-for="(item, index) in scope.row.participantVo.candidateName" :key="index" type="success">
+                {{ item }}
+              </el-tag>
+            </template>
+            <template v-else>
+              <el-tag type="success">
+                {{ scope.row.assigneeName || '无' }}
+              </el-tag>
+            </template>
+          </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.businessStatus"></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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getPageByTaskWait } from '@/api/workflow/task';
+import { TaskQuery, TaskVO } from '@/api/workflow/task/types';
+import workflowCommon from '@/api/workflow/workflowCommon';
+import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
+//提交组件
+const queryFormRef = ref<ElFormInstance>();
+// 遮罩层
+const loading = ref(true);
+// 选中数组
+const ids = ref<Array<any>>([]);
+// 非单个禁用
+const single = ref(true);
+// 非多个禁用
+const multiple = ref(true);
+// 显示搜索条件
+const showSearch = ref(true);
+// 总条数
+const total = ref(0);
+// 模型定义表格数据
+const taskList = ref([]);
+// 查询参数
+const queryParams = ref<TaskQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  name: undefined,
+  processDefinitionName: undefined,
+  processDefinitionKey: undefined
+});
+onMounted(() => {
+  getWaitingList();
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getWaitingList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.pageSize = 10;
+  handleQuery();
+};
+// 多选框选中数据
+const handleSelectionChange = (selection: any) => {
+  ids.value = selection.map((item: any) => item.id);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
+};
+//分页
+const getWaitingList = () => {
+  loading.value = true;
+  getPageByTaskWait(queryParams.value).then((resp) => {
+    taskList.value = resp.rows;
+    total.value = resp.total;
+    loading.value = false;
+  });
+};
+//办理
+const handleOpen = async (row: TaskVO) => {
+  const routerJumpVo = reactive<RouterJumpVo>({
+    wfDefinitionConfigVo: row.wfDefinitionConfigVo,
+    wfNodeConfigVo: row.wfNodeConfigVo,
+    businessKey: row.businessKey,
+    taskId: row.id,
+    type: 'approval'
+  });
+  workflowCommon.routerJump(routerJumpVo, proxy);
+};
+</script>
diff --git a/tsconfig.json b/tsconfig.json
index 3dc32e719b37a56a6b9438ff2d225a3a7fbd4c89..e4bf3ac4c758622728a0ebe0e4d1986a6339d9c9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,26 +1,34 @@
 {
   "compilerOptions": {
-    "target": "es2022",
-    "useDefineForClassFields": true,
+    "target": "esnext",
     "module": "esnext",
-    "moduleResolution": "node",
+//    "useDefineForClassFields": true,
+    "moduleResolution": "bundler",
     "strict": true,
     "jsx": "preserve",
+    "strictNullChecks": false,
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
+    "strictFunctionTypes": false,
     "lib": ["esnext", "dom"],
+    "noImplicitAny": false,
     "baseUrl": ".",
     "allowJs": true,
+    "experimentalDecorators": true,
     "paths": {
       "@/*": ["src/*"]
     },
+    "compilerOptions": {
+      "types": ["element-plus/global"]
+    },
     "types": ["vite/client"],
     "skipLibCheck": true,
+    "removeComments": true,
     // 允许默认导入
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true
   },
-  "include": ["src/**/*.ts", "src/**/*.vue", "src/types/**/*.d.ts"],
-  "exclude": ["node_modules", "dist", "**/*.js"]
+  "include": ["src/**/*.ts", "src/**/*.vue", "src/types/**/*.d.ts", "vite.config.ts"],
+  "exclude": ["node_modules", "dist", "**/*.js", "**/*.md", "src/**/*.md"]
 }
diff --git a/uno.config.ts b/uno.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0c60a220b9f30f512e7a7577888463c5c23a5fc4
--- /dev/null
+++ b/uno.config.ts
@@ -0,0 +1,33 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  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: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons(),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {}
+    })
+  ],
+  transformers: [transformerDirectives(), transformerVariantGroup()]
+});
diff --git a/vite.config.ts b/vite.config.ts
index 788aace679b08163a7f721fe49d57ed38061640c..eea111e9c36e709d16987121dab6f860e9bb964a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,8 +13,7 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
     resolve: {
       alias: {
         '~': path.resolve(__dirname, './'),
-        '@': path.resolve(__dirname, './src'),
-        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
+        '@': path.resolve(__dirname, './src')
       },
       extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
     },
@@ -64,12 +63,31 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
         '@vueuse/core',
         'path-to-regexp',
         'echarts',
-        '@wangeditor/editor',
-        '@wangeditor/editor-for-vue',
         'vue-i18n',
         '@vueup/vue-quill',
-        '@iconify/iconify',
+        'bpmn-js/lib/Viewer',
+        'bpmn-js/lib/Modeler.js',
+        'bpmn-js-properties-panel',
+        'min-dash',
+        'diagram-js/lib/navigation/movecanvas',
+        'diagram-js/lib/navigation/zoomscroll',
+        'bpmn-js/lib/features/palette/PaletteProvider',
+        'bpmn-js/lib/features/context-pad/ContextPadProvider',
+        'diagram-js/lib/draw/BaseRenderer',
+        'tiny-svg',
+        'image-conversion',
 
+        'element-plus/es/components/text/style/css',
+        'element-plus/es/components/collapse-item/style/css',
+        'element-plus/es/components/collapse/style/css',
+        'element-plus/es/components/space/style/css',
+        'element-plus/es/components/container/style/css',
+        'element-plus/es/components/aside/style/css',
+        'element-plus/es/components/main/style/css',
+        'element-plus/es/components/header/style/css',
+        'element-plus/es/components/button-group/style/css',
+        'element-plus/es/components/radio-button/style/css',
+        'element-plus/es/components/checkbox-group/style/css',
         'element-plus/es/components/form/style/css',
         'element-plus/es/components/form-item/style/css',
         'element-plus/es/components/button/style/css',
diff --git a/vite/plugins/compression.ts b/vite/plugins/compression.ts
index 123ff3a55a1153b82c180296bae7468d38cc0514..aa8c779681022dd5a46b15391436fd86b9b70a7a 100644
--- a/vite/plugins/compression.ts
+++ b/vite/plugins/compression.ts
@@ -1,6 +1,6 @@
 import compression from 'vite-plugin-compression';
 
-export default function createCompression(env: any) {
+export default (env: any) => {
   const { VITE_BUILD_COMPRESS } = env;
   const plugin: any[] = [];
   if (VITE_BUILD_COMPRESS) {
@@ -25,4 +25,4 @@ export default function createCompression(env: any) {
     }
   }
   return plugin;
-}
+};
diff --git a/vite/plugins/i18n.ts b/vite/plugins/i18n.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8777d1aeeca2475620456f7e9ceec66bef075901
--- /dev/null
+++ b/vite/plugins/i18n.ts
@@ -0,0 +1,6 @@
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+export default (path: any) => {
+  return VueI18nPlugin({
+    include: [path.resolve(__dirname, '../../src/lang/**.json')]
+  });
+};
diff --git a/vite/plugins/index.ts b/vite/plugins/index.ts
index a31412d4323ca12464ba4997d131c6c499a648c7..0ec5b8d7907803d66f87355b557bce378c84a840 100644
--- a/vite/plugins/index.ts
+++ b/vite/plugins/index.ts
@@ -6,17 +6,19 @@ import createIcons from './icons';
 import createSvgIconsPlugin from './svg-icon';
 import createCompression from './compression';
 import createSetupExtend from './setup-extend';
+import createI18n from './i18n';
 import path from 'path';
 
 export default (viteEnv: any, isBuild = false): [] => {
-  const vitePlusgins: any = [];
-  vitePlusgins.push(vue());
-  vitePlusgins.push(createUnoCss());
-  vitePlusgins.push(createAutoImport(path));
-  vitePlusgins.push(createComponents(path));
-  vitePlusgins.push(createCompression(viteEnv));
-  vitePlusgins.push(createIcons());
-  vitePlusgins.push(createSvgIconsPlugin(path, isBuild));
-  vitePlusgins.push(createSetupExtend());
-  return vitePlusgins;
+  const vitePlugins: any = [];
+  vitePlugins.push(vue());
+  vitePlugins.push(createUnoCss());
+  vitePlugins.push(createAutoImport(path));
+  vitePlugins.push(createComponents(path));
+  vitePlugins.push(createCompression(viteEnv));
+  vitePlugins.push(createIcons());
+  vitePlugins.push(createSvgIconsPlugin(path, isBuild));
+  vitePlugins.push(createSetupExtend());
+  vitePlugins.push(createI18n(path));
+  return vitePlugins;
 };
diff --git a/vite/plugins/setup-extend.ts b/vite/plugins/setup-extend.ts
index a1dbb5a31ebee48014c4c3f3ecc917d1f65638d6..ed3423f0cbbe482f6bb91c6cf30784c7e427786e 100644
--- a/vite/plugins/setup-extend.ts
+++ b/vite/plugins/setup-extend.ts
@@ -1,5 +1,5 @@
-import setupExtend from 'unplugin-vue-setup-extend-plus/vite'
+import setupExtend from 'unplugin-vue-setup-extend-plus/vite';
 
 export default () => {
-  return setupExtend({})
+  return setupExtend({});
 };
diff --git a/vite/plugins/unocss.ts b/vite/plugins/unocss.ts
index 76585c749047707642dd4bd5a2836da9e71c13a3..08e186b37932a330bbd0f66ba7095f1e5096f027 100644
--- a/vite/plugins/unocss.ts
+++ b/vite/plugins/unocss.ts
@@ -1,14 +1,7 @@
 import UnoCss from 'unocss/vite';
-import { presetUno, presetAttributify, presetIcons } from 'unocss';
 
 export default () => {
   return UnoCss({
-    presets: [presetUno(), presetAttributify(), presetIcons()],
-    // rules: [['search', {}]],
-    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'
-    },
     hmrTopLevelAwait: false // unocss默认是true，低版本浏览器是不支持的，启动后会报错
   });
 };