chore(release): release tauri v1.0.6

2025-10-15 22:33:40 +08:00 · 2024-04-25 22:13:58 +08:00
86 changed files with 1648 additions and 2427 deletions
--- a/.env
+++ b/.env
@@ -43,6 +43,3 @@ VITE_STATIC_SUPER_ROLE=R_SUPER

 # sourcemap
 VITE_SOURCE_MAP=N
-
-# Used to differentiate storage across different domains
-VITE_STORAGE_PREFIX=SOY_
--- a/.npmrc
+++ b/.npmrc
@@ -1,4 +1,3 @@
 registry=https://registry.npmmirror.com/
 shamefully-hoist=true
 ignore-workspace-root-check=true
-link-workspace-packages=true
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,6 +13,7 @@
  "i18n-ally.keystyle": "nested",
  "i18n-ally.localesPaths": ["src/locales/langs"],
  "prettier.enable": false,
+  "unocss.root": ["./"],
  "typescript.tsdk": "node_modules/typescript/lib",
-  "unocss.root": ["./"]
+  "vue.server.hybridMode": true
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,190 +1,6 @@
 # Changelog


-## [v1.1.0](https://github.com/honghuangdc/soybean-admin/compare/v1.0.9...v1.1.0) (2024-05-07)
-
-### &nbsp;&nbsp;&nbsp;🚀 Features
-
- **projects**:
-  - support grayscale. fixed #385 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/385 [<samp>(d335d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/d335df6)
-  - Add prefix to local storage &nbsp;-&nbsp; by **Azir** [<samp>(1fc34)</samp>](https://github.com/honghuangdc/soybean-admin/commit/1fc34cc)
-  - add table showTotal options &nbsp;-&nbsp; by **paynezhuang** [<samp>(3e61e)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3e61eab)
-  - add recommend color switch. closed #388 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/388 [<samp>(a1920)</samp>](https://github.com/honghuangdc/soybean-admin/commit/a1920fc)
-  - add menu route field &nbsp;-&nbsp; by **paynezhuang** [<samp>(dbe31)</samp>](https://github.com/honghuangdc/soybean-admin/commit/dbe31eb)
-  - support repeated request errors occur once in a short time. close #368, close #369 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/368 and https://github.com/honghuangdc/soybean-admin/issues/369 [<samp>(e3bd3)</samp>](https://github.com/honghuangdc/soybean-admin/commit/e3bd397)
-  - close tab by mouse wheel button click &nbsp;-&nbsp; by **JianJroh** [<samp>(d3849)</samp>](https://github.com/honghuangdc/soybean-admin/commit/d3849ba)
-  - page: support manage_menu more options. close #366 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/366 [<samp>(c4b5c)</samp>](https://github.com/honghuangdc/soybean-admin/commit/c4b5c65)
-  - useTable adds expand to display &nbsp;-&nbsp; by **paynezhuang** [<samp>(0a90d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/0a90dd3)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
- **projects**:
-  - menu fixedIndexInTab default null &nbsp;-&nbsp; by **paynezhuang** [<samp>(3d10e)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3d10ef1)
-  - fix menu-toggler zIndex &nbsp;-&nbsp; by @honghuangdc [<samp>(7bd43)</samp>](https://github.com/honghuangdc/soybean-admin/commit/7bd43df)
-  - fix manage_menu modal style &nbsp;-&nbsp; by @honghuangdc [<samp>(60f3b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/60f3b14)
-  - fix menu data when role is changed. fixed #391 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/391 [<samp>(3b47b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3b47b5a)
-
-### &nbsp;&nbsp;&nbsp;🛠 Optimizations
-
- **projects**: remove deprecated code &nbsp;-&nbsp; by @honghuangdc [<samp>(72ccb)</samp>](https://github.com/honghuangdc/soybean-admin/commit/72ccb6b)
-
-### &nbsp;&nbsp;&nbsp;💅 Refactors
-
- **projects**:
-  - refactor @sa/color-palette => @sa/color & perf @sa/utils &nbsp;-&nbsp; by @honghuangdc [<samp>(34999)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3499997)
-  - menu-operate-drawer => menu-operate-modal &nbsp;-&nbsp; by @honghuangdc [<samp>(003e1)</samp>](https://github.com/honghuangdc/soybean-admin/commit/003e145)
-
-### &nbsp;&nbsp;&nbsp;📖 Documentation
-
- **projects**:
-  - add CHANGELOG.zh_CN.md &nbsp;-&nbsp; by @honghuangdc [<samp>(18b3f)</samp>](https://github.com/honghuangdc/soybean-admin/commit/18b3f05)
-  - update CHANGELOG &nbsp;-&nbsp; by @honghuangdc [<samp>(4d17c)</samp>](https://github.com/honghuangdc/soybean-admin/commit/4d17cfd)
-
-### &nbsp;&nbsp;&nbsp;🏡 Chore
-
- **deps**:
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(1cb38)</samp>](https://github.com/honghuangdc/soybean-admin/commit/1cb3816)
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(599b4)</samp>](https://github.com/honghuangdc/soybean-admin/commit/599b4e1)
- **projects**:
-  - merge main to v1.1.0 &nbsp;-&nbsp; by @honghuangdc [<samp>(ebe55)</samp>](https://github.com/honghuangdc/soybean-admin/commit/ebe55af)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[paynezhuang](mailto:paynezhuang@gmail.com),&nbsp;[JianJroh](mailto:rhjian@foxmail.com),&nbsp;[Azir](mailto:2075125282@qq.com)
-
-## [v1.1.0-beta.2](https://github.com/honghuangdc/soybean-admin/compare/v1.1.0-beta.1...v1.1.0-beta.2) (2024-05-07)
-
-### &nbsp;&nbsp;&nbsp;🚀 Features
-
- **projects**: useTable adds expand to display &nbsp;-&nbsp; by **paynezhuang** [<samp>(0a90d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/0a90dd3)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
- **projects**:
-  - fix manage_menu modal style &nbsp;-&nbsp; by @honghuangdc [<samp>(60f3b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/60f3b14)
-  - fix menu data when role is changed. fixed #391 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/391 [<samp>(3b47b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3b47b5a)
-
-### &nbsp;&nbsp;&nbsp;🛠 Optimizations
-
- **projects**: remove deprecated code &nbsp;-&nbsp; by @honghuangdc [<samp>(72ccb)</samp>](https://github.com/honghuangdc/soybean-admin/commit/72ccb6b)
-
-### &nbsp;&nbsp;&nbsp;📖 Documentation
-
- **projects**: add CHANGELOG.zh_CN.md &nbsp;-&nbsp; by @honghuangdc [<samp>(18b3f)</samp>](https://github.com/honghuangdc/soybean-admin/commit/18b3f05)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[paynezhuang](mailto:paynezhuang@gmail.com)
-
-## [v1.1.0-beta.1](https://github.com/soybeanjs/soybean-admin/compare/v1.0.9...v1.1.0-beta.1) (2024-05-07)
-
-### &nbsp;&nbsp;&nbsp;🚀 Features
-
- **projects**:
-  - support grayscale. fixed #385 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/385 [<samp>(d335d)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d335df6)
-  - Add prefix to local storage &nbsp;-&nbsp; by **Azir** [<samp>(1fc34)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1fc34cc)
-  - add table showTotal options &nbsp;-&nbsp; by **paynezhuang** [<samp>(3e61e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3e61eab)
-  - add recommend color switch. closed #388 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/388 [<samp>(a1920)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a1920fc)
-  - add menu route field &nbsp;-&nbsp; by **paynezhuang** [<samp>(dbe31)</samp>](https://github.com/soybeanjs/soybean-admin/commit/dbe31eb)
-  - support repeated request errors occur once in a short time. close #368, close #369 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/368 and https://github.com/soybeanjs/soybean-admin/issues/369 [<samp>(e3bd3)</samp>](https://github.com/soybeanjs/soybean-admin/commit/e3bd397)
-  - close tab by mouse wheel button click &nbsp;-&nbsp; by **JianJroh** [<samp>(d3849)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d3849ba)
-  - page: support manage_menu more options. close #366 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/366 [<samp>(c4b5c)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c4b5c65)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
- **projects**:
-  - menu fixedIndexInTab default null &nbsp;-&nbsp; by **paynezhuang** [<samp>(3d10e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3d10ef1)
-  - fix menu-toggler zIndex &nbsp;-&nbsp; by @honghuangdc [<samp>(7bd43)</samp>](https://github.com/soybeanjs/soybean-admin/commit/7bd43df)
-
-### &nbsp;&nbsp;&nbsp;💅 Refactors
-
- **projects**:
-  - refactor @sa/color-palette => @sa/color & perf @sa/utils &nbsp;-&nbsp; by @honghuangdc [<samp>(34999)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3499997)
-  - menu-operate-drawer => menu-operate-modal &nbsp;-&nbsp; by @honghuangdc [<samp>(003e1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/003e145)
-
-### &nbsp;&nbsp;&nbsp;🏡 Chore
-
- **deps**:
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(1cb38)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1cb3816)
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(599b4)</samp>](https://github.com/soybeanjs/soybean-admin/commit/599b4e1)
- **projects**:
-  - merge main to v1.1.0 &nbsp;-&nbsp; by @honghuangdc [<samp>(ebe55)</samp>](https://github.com/soybeanjs/soybean-admin/commit/ebe55af)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[JianJroh](mailto:rhjian@foxmail.com),&nbsp;[paynezhuang](mailto:paynezhuang@gmail.com),&nbsp;[Azir](mailto:2075125282@qq.com)
-
-## [v1.0.9](https://github.com/soybeanjs/soybean-admin/compare/v1.0.8...v1.0.9) (2024-05-05)
-
-### &nbsp;&nbsp;&nbsp;🚀 Features
-
- **packages**: @sa/scripts: add new commit type `optimize` and commit scope `packages` &nbsp;-&nbsp; by @honghuangdc [<samp>(fbc2e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/fbc2e61)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
- **projects**: fix manage page drawer operate about data reset. fixed #415, fixed #417 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/415 and https://github.com/soybeanjs/soybean-admin/issues/417 [<samp>(f4513)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f4513e1)
-
-### &nbsp;&nbsp;&nbsp;📖 Documentation
-
- **projects**:
-  - add ecosystem to README.md &nbsp;-&nbsp; by @honghuangdc [<samp>(d0f17)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d0f17a4)
-  - add PanisAdmin to README &nbsp;-&nbsp; by **paynezhuang** [<samp>(ce2a7)</samp>](https://github.com/soybeanjs/soybean-admin/commit/ce2a75b)
-
-### &nbsp;&nbsp;&nbsp;🏡 Chore
-
- **deps**:
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(413a8)</samp>](https://github.com/soybeanjs/soybean-admin/commit/413a8b2)
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(734ef)</samp>](https://github.com/soybeanjs/soybean-admin/commit/734ef98)
- **projects**:
-  - update .npmrc &nbsp;-&nbsp; by @honghuangdc [<samp>(52188)</samp>](https://github.com/soybeanjs/soybean-admin/commit/52188d8)
-  - update vscode settings &nbsp;-&nbsp; by @honghuangdc [<samp>(c137b)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c137b97)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[paynezhuang](mailto:paynezhuang@gmail.com)
-
-## [v1.0.8](https://github.com/soybeanjs/soybean-admin/compare/v1.0.7...v1.0.8) (2024-04-27)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
- **components**:
-  - fix PinToggler label. fixed #407 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/407 [<samp>(c0ed1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c0ed1f2)
- **projects**:
-  - text level low. #409 &nbsp;-&nbsp; by **alleycharming** in https://github.com/soybeanjs/soybean-admin/issues/409 [<samp>(3ddb1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3ddb17a)
-  - fix tab fixedIndex as null case &nbsp;-&nbsp; by **paynezhuang** [<samp>(4708e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/4708ede)
-  - recovery the layout config before is mobile. fixed #408, fixed #361 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/408 and https://github.com/soybeanjs/soybean-admin/issues/361 [<samp>(dae2a)</samp>](https://github.com/soybeanjs/soybean-admin/commit/dae2aa5)
-
-### &nbsp;&nbsp;&nbsp;🔥 Performance
-
- **projects**: perf judgement the fixed tab &nbsp;-&nbsp; by @honghuangdc [<samp>(b3e9b)</samp>](https://github.com/soybeanjs/soybean-admin/commit/b3e9bba)
-
-### &nbsp;&nbsp;&nbsp;💅 Refactors
-
- **projects**: `Soybean Admin` to `SoybeanAdmin` &nbsp;-&nbsp; by @honghuangdc [<samp>(a8dbc)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a8dbc03)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[paynezhuang](mailto:paynezhuang@gmail.com),&nbsp;[alleycharming](mailto:alleycharming@gmail.com)
-
-## [v1.0.7](https://github.com/soybeanjs/soybean-admin/compare/v1.0.6...v1.0.7) (2024-04-25)
-
-### &nbsp;&nbsp;&nbsp;🚀 Features
-
- **projects**: support iframe page with diffrent url of custom route &nbsp;-&nbsp; by @honghuangdc [<samp>(da12d)</samp>](https://github.com/soybeanjs/soybean-admin/commit/da12d4a)
-
-### &nbsp;&nbsp;&nbsp;🏡 Chore
-
- **deps**: update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(fbd80)</samp>](https://github.com/soybeanjs/soybean-admin/commit/fbd80c2)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-
 ## [v1.0.6](https://github.com/soybeanjs/soybean-admin/compare/v1.0.5...v1.0.6) (2024-04-25)

 ### &nbsp;&nbsp;&nbsp;🚀 Features
@@ -253,7 +69,7 @@

 ### &nbsp;&nbsp;&nbsp;💅 Refactors

- **hooks**: refactor @sa/color &nbsp;-&nbsp; by @honghuangdc [<samp>(93191)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9319173)
+- **hooks**: refactor @sa/color-palette &nbsp;-&nbsp; by @honghuangdc [<samp>(93191)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9319173)

 ### &nbsp;&nbsp;&nbsp;📖 Documentation

--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,66 +0,0 @@
-# 更新日志
-
-## [v1.1.0-beta.2](https://github.com/honghuangdc/soybean-admin/compare/v1.1.0-beta.1...v1.1.0-beta.2) (2024-05-07)
-
-### &nbsp;&nbsp;&nbsp;🚀 特性
-
- **项目**: useTable添加展开以显示 &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(0a90d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/0a90dd3) 提供
-
-### &nbsp;&nbsp;&nbsp;🐞 修复的错误
-
- **项目**:
-  - 修复 manage_menu 模态样式 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(60f3b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/60f3b14) 提供
-  - 当角色改变时修复菜单数据。修复了 #391 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/honghuangdc/soybean-admin/issues/391 [<samp>(3b47b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3b47b5a) 提供
-
-### &nbsp;&nbsp;&nbsp;🛠 优化
-
- **项目**: 删除废弃的代码 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(72ccb)</samp>](https://github.com/honghuangdc/soybean-admin/commit/72ccb6b) 提供
-
-### &nbsp;&nbsp;&nbsp;📖 文档
-
- **项目**: 添加 CHANGELOG.zh_CN.md &nbsp;-&nbsp; 由 @honghuangdc [<samp>(18b3f)</samp>](https://github.com/honghuangdc/soybean-admin/commit/18b3f05) 提供
-
-### &nbsp;&nbsp;&nbsp;❤️ 贡献者
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[paynezhuang](mailto:paynezhuang@gmail.com)
-
-
-## [v1.1.0-beta.1](https://github.com/soybeanjs/soybean-admin/compare/v1.0.9...v1.1.0-beta.1) (2024-05-07)
-
-### &nbsp;&nbsp;&nbsp;🚀 功能
-
- **项目**:
-  - 支持灰度。修复了 #385 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/385 [<samp>(d335d)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d335df6)
-  - 添加前缀到本地存储 &nbsp;-&nbsp; 由 **Azir** [<samp>(1fc34)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1fc34cc)
-  - 添加表格 showTotal 选项 &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(3e61e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3e61eab)
-  - 添加推荐颜色切换。关闭了 #388 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/388 [<samp>(a1920)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a1920fc)
-  - 添加菜单路由字段 &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(dbe31)</samp>](https://github.com/soybeanjs/soybean-admin/commit/dbe31eb)
-  - 支持短时间内重复请求错误只发生一次。关闭了 #368, 关闭了 #369 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/368 和 https://github.com/soybeanjs/soybean-admin/issues/369 [<samp>(e3bd3)</samp>](https://github.com/soybeanjs/soybean-admin/commit/e3bd397)
-  - 通过鼠标滚轮按钮点击关闭标签 &nbsp;-&nbsp; 由 **JianJroh** [<samp>(d3849)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d3849ba)
-  - 页面：支持更多的 manage_menu 选项。关闭了 #366 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/366 [<samp>(c4b5c)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c4b5c65)
-
-### &nbsp;&nbsp;&nbsp;🐞 错误修复
-
- **项目**:
-  - 修复菜单 fixedIndexInTab 默认为 null &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(3d10e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3d10ef1)完成
-  - 修复菜单切换器 zIndex &nbsp;-&nbsp; 由 @honghuangdc [<samp>(7bd43)</samp>](https://github.com/soybeanjs/soybean-admin/commit/7bd43df)完成
-
-### &nbsp;&nbsp;&nbsp;💅 重构
-
- **项目**:
-  - 重构 @sa/color-palette => @sa/color & 性能优化 @sa/utils &nbsp;-&nbsp; 由 @honghuangdc [<samp>(34999)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3499997)完成
-  - menu-operate-drawer => menu-operate-modal &nbsp;-&nbsp; 由 @honghuangdc [<samp>(003e1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/003e145)完成
-
-### &nbsp;&nbsp;&nbsp;🏡 杂务
-
- **依赖**:
-  - 更新依赖 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(1cb38)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1cb3816)完成
-  - 更新依赖 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(599b4)</samp>](https://github.com/soybeanjs/soybean-admin/commit/599b4e1)完成
- **项目**:
-  - 合并主分支到 v1.1.0 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(ebe55)</samp>](https://github.com/soybeanjs/soybean-admin/commit/ebe55af)完成
-
-### &nbsp;&nbsp;&nbsp;❤️ 贡献者
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[JianJroh](mailto:rhjian@foxmail.com),&nbsp;[paynezhuang](mailto:paynezhuang@gmail.com),&nbsp;[Azir](mailto:2075125282@qq.com)
--- a/README.md
+++ b/README.md
@@ -106,15 +106,6 @@ pnpm dev
 pnpm build
 ```

-## Ecosystem
-
- [electron-mock-admin](https://github.com/lixin59/electron-mock-api): A Mock Api management system that helps front-end developers quickly implement interface mocks.
- [T-Shell](https://github.com/TheBlindM/T-Shell): A terminal emulator and SSH client with configurable command prompts.
- [pea](https://github.com/haitang1894/pea) : Adopting SpringBoot3.2 + JDK21, MyBatis-Plus, SpringSecurity security framework, etc., suitable for the simple permission system developed by [soybean-admin](https://gitee.com/honghuangdc/soybean-admin).
- [MalusAdmin](https://github.com/pridejoy/MalusAdmin): A backend management framework developed based on Vue3/TypeScript/NaiveUI and NET7 & Sqlsugar. It is implemented in the most original and simplest way, with a fresh and elegant front-end, a clear and elegant backend structure, and powerful functions.
- [PanisAdmin](https://github.com/paynezhuang/panis-admin): Adopting SpringBoot 3, SaToken, MySQL and other frameworks to develop and modify [soybean-admin](https://github.com/soybeanjs/soybean-admin) for the second time, adapting dynamic menu/button-level authorization. Retaining the original flavor, fresh and elegant, high-value back-end management system scaffold.
-
-
 ## How to Contribute

 We warmly welcome and appreciate all forms of contributions. If you have any ideas or suggestions, please feel free to share them by submitting [pull requests](https://github.com/soybeanjs/soybean-admin/pulls) or creating GitHub [issue](https://github.com/soybeanjs/soybean-admin/issues/new).
--- a/README.zh_CN.md
+++ b/README.zh_CN.md
@@ -105,15 +105,6 @@ pnpm dev
 pnpm build
 ```

-## 周边生态
-
- [electron-mock-admin](https://github.com/lixin59/electron-mock-api): 一个 Mock Api 管理系统，帮助前端开发伙伴快速实现接口的 mock。
- [T-Shell](https://github.com/TheBlindM/T-Shell): 是一个可配置命令提示的终端模拟器和 SSH 客户端。
- [pea](https://github.com/haitang1894/pea) : 采用SpringBoot3.2 + JDK21、MyBatis-Plus、SpringSecurity安全框架等，适配 [soybean-admin](https://gitee.com/honghuangdc/soybean-admin) 开发的简单权限系统。
- [MalusAdmin](https://github.com/pridejoy/MalusAdmin): 基于 Vue3/TypeScript/NaiveUI 和 NET7 & Sqlsugar 开发的后台管理框架。采用最原生最简洁的方式来实现, 前端清新优雅高颜值，后端 结构清晰，优雅易懂，功能强大。
- [PanisAdmin](https://github.com/paynezhuang/panis-admin): 采用SpringBoot3、SaToken、MySQL等框架开发，二次修改 [soybean-admin](https://github.com/soybeanjs/soybean-admin)，适配动态菜单/按钮级别的鉴权，保留原汁原味、清新优雅、高颜值的后台管理系统脚手架。
-
-
 ## 如何贡献

 我们热烈欢迎并感谢所有形式的贡献。如果您有任何想法或建议，欢迎通过提交 [pull requests](https://github.com/soybeanjs/soybean-admin/pulls) 或创建 GitHub [issue](https://github.com/soybeanjs/soybean-admin/issues/new) 来分享。
@@ -135,7 +126,6 @@ pnpm build

 [Soybean](https://github.com/honghuangdc)

-
 ## 贡献者

 感谢以下贡献者的贡献。如果您想为本项目做出贡献，请参考 [如何贡献](#如何贡献)。
--- a/build/plugins/router.ts
+++ b/build/plugins/router.ts
@@ -9,18 +9,7 @@ export function setupElegantRouter() {
      blank: 'src/layouts/blank-layout/index.vue'
    },
    customRoutes: {
-      names: [
-        'exception_403',
-        'exception_404',
-        'exception_500',
-        'document_project',
-        'document_project-link',
-        'document_vue',
-        'document_vite',
-        'document_unocss',
-        'document_naive',
-        'document_antd'
-      ]
+      names: ['exception_403', 'exception_404', 'exception_500']
    },
    routePathTransformer(routeName, routePath) {
      const key = routeName as RouteKey;
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -7,7 +7,7 @@ export default defineConfig(
      'vue/multi-word-component-names': [
        'warn',
        {
-          ignores: ['index', 'App', '[id]', '[url]']
+          ignores: ['index', 'App', '[id]']
        }
      ],
      'vue/component-name-in-template-casing': [
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "soybean-admin",
  "type": "module",
-  "version": "1.1.0",
+  "version": "1.0.6",
  "description": "A fresh and elegant admin template, based on Vue3、Vite3、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite3、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
  "author": {
    "name": "Soybean",
@@ -52,32 +52,32 @@
    "@better-scroll/core": "2.5.1",
    "@iconify/vue": "4.1.2",
    "@sa/axios": "workspace:*",
-    "@sa/color": "workspace:*",
+    "@sa/color-palette": "workspace:*",
    "@sa/hooks": "workspace:*",
    "@sa/materials": "workspace:*",
    "@sa/utils": "workspace:*",
    "@vueuse/core": "10.9.0",
    "clipboard": "2.0.11",
-    "dayjs": "1.11.11",
+    "dayjs": "1.11.10",
    "echarts": "5.5.0",
    "lodash-es": "4.17.21",
-    "naive-ui": "2.38.2",
+    "naive-ui": "2.38.1",
    "nprogress": "0.2.0",
    "pinia": "2.1.7",
-    "vue": "3.4.26",
+    "vue": "3.4.25",
    "vue-draggable-plus": "0.4.0",
    "vue-i18n": "9.13.1",
    "vue-router": "4.3.2"
  },
  "devDependencies": {
    "@elegant-router/vue": "0.3.6",
-    "@iconify/json": "2.2.207",
+    "@iconify/json": "2.2.204",
    "@sa/scripts": "workspace:*",
    "@sa/uno-preset": "workspace:*",
-    "@soybeanjs/eslint-config": "1.3.4",
+    "@soybeanjs/eslint-config": "1.3.2",
    "@tauri-apps/cli": "1.5.11",
    "@types/lodash-es": "4.17.12",
-    "@types/node": "20.12.10",
+    "@types/node": "20.12.7",
    "@types/nprogress": "0.2.3",
    "@unocss/eslint-config": "0.59.4",
    "@unocss/preset-icons": "0.59.4",
@@ -87,21 +87,21 @@
    "@unocss/vite": "0.59.4",
    "@vitejs/plugin-vue": "5.0.4",
    "@vitejs/plugin-vue-jsx": "3.1.0",
-    "eslint": "9.2.0",
+    "eslint": "9.1.1",
    "eslint-plugin-vue": "9.25.0",
    "lint-staged": "15.2.2",
-    "sass": "1.76.0",
+    "sass": "1.75.0",
    "simple-git-hooks": "2.11.1",
-    "tsx": "4.9.3",
+    "tsx": "4.7.2",
    "typescript": "5.4.5",
-    "unplugin-icons": "0.19.0",
-    "unplugin-vue-components": "0.27.0",
-    "vite": "5.2.11",
+    "unplugin-icons": "0.18.5",
+    "unplugin-vue-components": "0.26.0",
+    "vite": "5.2.10",
    "vite-plugin-progress": "0.0.7",
    "vite-plugin-svg-icons": "2.0.1",
-    "vite-plugin-vue-devtools": "7.1.3",
+    "vite-plugin-vue-devtools": "7.1.2",
    "vue-eslint-parser": "9.4.2",
-    "vue-tsc": "2.0.16"
+    "vue-tsc": "2.0.14"
  },
  "simple-git-hooks": {
    "commit-msg": "pnpm sa git-commit-verify",
--- a/packages/axios/package.json
+++ b/packages/axios/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/axios",
-  "version": "1.1.0",
+  "version": "1.0.6",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/color-palette/package.json
+++ b/packages/color-palette/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@sa/color",
-  "version": "1.1.0",
+  "name": "@sa/color-palette",
+  "version": "1.0.6",
  "exports": {
    ".": "./src/index.ts"
  },
@@ -10,7 +10,6 @@
    }
  },
  "dependencies": {
-    "@sa/utils": "workspace:*",
    "colord": "2.9.3"
  }
 }
--- a/packages/color-palette/src/constant/index.ts
+++ b/packages/color-palette/src/constant/index.ts
--- a/packages/color-palette/src/constant/name.ts
+++ b/packages/color-palette/src/constant/name.ts
--- a/packages/color-palette/src/constant/palette.ts
+++ b/packages/color-palette/src/constant/palette.ts
--- a/packages/color-palette/src/index.ts
+++ b/packages/color-palette/src/index.ts
@@ -0,0 +1,6 @@
+import { colorPalettes } from './constant';
+import { getColorName, getHex, getHsl, getRgb } from './shared';
+
+export * from './palette';
+export { getColorName, getHex, getHsl, getRgb, colorPalettes };
+export * from './types';
--- a/packages/color-palette/src/palette/index.ts
+++ b/packages/color-palette/src/palette/index.ts
@@ -9,12 +9,12 @@ import type {
 } from '../types';

 /**
- * get recommended color palette by provided color
+ * get color palette by provided color and color name
 *
 * @param color the provided color
 */
-export function getRecommendedColorPalette(color: string) {
-  const colorPaletteFamily = getRecommendedColorPaletteFamily(color);
+export function getColorPalette(color: string) {
+  const colorPaletteFamily = getColorPaletteFamily(color);

  const colorMap = new Map<ColorPaletteNumber, ColorPalette>();

@@ -36,13 +36,13 @@ export function getRecommendedColorPalette(color: string) {
 }

 /**
- * get recommended palette color by provided color
+ * get color by number
 *
 * @param color the provided color
 * @param number the color palette number
 */
-export function getRecommendedPaletteColorByNumber(color: string, number: ColorPaletteNumber) {
-  const colorPalette = getRecommendedColorPalette(color);
+export function getColorByPaletteNumber(color: string, number: ColorPaletteNumber) {
+  const colorPalette = getColorPalette(color);

  const { hex } = colorPalette.colorMap.get(number)!;

@@ -54,7 +54,7 @@ export function getRecommendedPaletteColorByNumber(color: string, number: ColorP
 *
 * @param color the provided color
 */
-export function getRecommendedColorPaletteFamily(color: string) {
+export function getColorPaletteFamily(color: string) {
  if (!isValidColor(color)) {
    throw new Error('Invalid color, please check color value!');
  }
--- a/packages/color-palette/src/shared/colord.ts
+++ b/packages/color-palette/src/shared/colord.ts
@@ -0,0 +1,29 @@
+import { colord, extend } from 'colord';
+import type { HslColor } from 'colord';
+import labPlugin from 'colord/plugins/lab';
+
+extend([labPlugin]);
+
+export function isValidColor(color: string) {
+  return colord(color).isValid();
+}
+
+export function getHex(color: string) {
+  return colord(color).toHex();
+}
+
+export function getRgb(color: string) {
+  return colord(color).toRgb();
+}
+
+export function getHsl(color: string) {
+  return colord(color).toHsl();
+}
+
+export function getDeltaE(color1: string, color2: string) {
+  return colord(color1).delta(color2);
+}
+
+export function transformHslToHex(color: HslColor) {
+  return colord(color).toHex();
+}
--- a/packages/color-palette/src/shared/index.ts
+++ b/packages/color-palette/src/shared/index.ts
--- a/packages/color-palette/src/shared/name.ts
+++ b/packages/color-palette/src/shared/name.ts
--- a/packages/color-palette/src/types/index.ts
+++ b/packages/color-palette/src/types/index.ts
@@ -1,8 +1,4 @@
-/**
- * the color palette number
- *
- * the main color number is 500
- */
+/** the color palette number */
 export type ColorPaletteNumber = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;

 /** the color palette */
@@ -49,10 +45,3 @@ export type ColorPaletteMatch = ColorPaletteFamily & {
  /** the match color of the palette */
  match: ColorPalette;
 };
-
-/**
- * The color index of color palette
- *
- * From left to right, the color is from light to dark, 6 is main color
- */
-export type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
--- a/packages/color-palette/tsconfig.json
+++ b/packages/color-palette/tsconfig.json
--- a/packages/color/src/index.ts
+++ b/packages/color/src/index.ts
@@ -1,7 +0,0 @@
-import { colorPalettes } from './constant';
-
-export * from './palette';
-export * from './shared';
-export { colorPalettes };
-
-export * from './types';
--- a/packages/color/src/palette/index.ts
+++ b/packages/color/src/palette/index.ts
@@ -1,45 +0,0 @@
-import type { AnyColor } from 'colord';
-import { getHex } from '../shared';
-import type { ColorPaletteNumber } from '../types';
-import { getRecommendedColorPalette } from './recommend';
-import { getAntDColorPalette } from './antd';
-
-/**
- * get color palette by provided color
- *
- * @param color
- * @param recommended whether to get recommended color palette (the provided color may not be the main color)
- */
-export function getColorPalette(color: AnyColor, recommended = false) {
-  const colorMap = new Map<ColorPaletteNumber, string>();
-
-  if (recommended) {
-    const colorPalette = getRecommendedColorPalette(getHex(color));
-    colorPalette.palettes.forEach(palette => {
-      colorMap.set(palette.number, palette.hex);
-    });
-  } else {
-    const colors = getAntDColorPalette(color);
-
-    const colorNumbers: ColorPaletteNumber[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-
-    colorNumbers.forEach((number, index) => {
-      colorMap.set(number, colors[index]);
-    });
-  }
-
-  return colorMap;
-}
-
-/**
- * get color palette color by number
- *
- * @param color the provided color
- * @param number the color palette number
- * @param recommended whether to get recommended color palette (the provided color may not be the main color)
- */
-export function getPaletteColorByNumber(color: AnyColor, number: ColorPaletteNumber, recommended = false) {
-  const colorMap = getColorPalette(color, recommended);
-
-  return colorMap.get(number as ColorPaletteNumber)!;
-}
--- a/packages/color/src/shared/colord.ts
+++ b/packages/color/src/shared/colord.ts
@@ -1,93 +0,0 @@
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-import mixPlugin from 'colord/plugins/mix';
-import labPlugin from 'colord/plugins/lab';
-import type { AnyColor, HslColor, RgbColor } from 'colord';
-
-extend([namesPlugin, mixPlugin, labPlugin]);
-
-export function isValidColor(color: AnyColor) {
-  return colord(color).isValid();
-}
-
-export function getHex(color: AnyColor) {
-  return colord(color).toHex();
-}
-
-export function getRgb(color: AnyColor) {
-  return colord(color).toRgb();
-}
-
-export function getHsl(color: AnyColor) {
-  return colord(color).toHsl();
-}
-
-export function getHsv(color: AnyColor) {
-  return colord(color).toHsv();
-}
-
-export function getDeltaE(color1: AnyColor, color2: AnyColor) {
-  return colord(color1).delta(color2);
-}
-
-export function transformHslToHex(color: HslColor) {
-  return colord(color).toHex();
-}
-
-/**
- * Add color alpha
- *
- * @param color - Color
- * @param alpha - Alpha (0 - 1)
- */
-export function addColorAlpha(color: AnyColor, alpha: number) {
-  return colord(color).alpha(alpha).toHex();
-}
-
-/**
- * Mix color
- *
- * @param firstColor - First color
- * @param secondColor - Second color
- * @param ratio - The ratio of the second color (0 - 1)
- */
-export function mixColor(firstColor: AnyColor, secondColor: AnyColor, ratio: number) {
-  return colord(firstColor).mix(secondColor, ratio).toHex();
-}
-
-/**
- * Transform color with opacity to similar color without opacity
- *
- * @param color - Color
- * @param alpha - Alpha (0 - 1)
- * @param bgColor Background color (usually white or black)
- */
-export function transformColorWithOpacity(color: AnyColor, alpha: number, bgColor = '#ffffff') {
-  const originColor = addColorAlpha(color, alpha);
-  const { r: oR, g: oG, b: oB } = colord(originColor).toRgb();
-
-  const { r: bgR, g: bgG, b: bgB } = colord(bgColor).toRgb();
-
-  function calRgb(or: number, bg: number, al: number) {
-    return bg + (or - bg) * al;
-  }
-
-  const resultRgb: RgbColor = {
-    r: calRgb(oR, bgR, alpha),
-    g: calRgb(oG, bgG, alpha),
-    b: calRgb(oB, bgB, alpha)
-  };
-
-  return colord(resultRgb).toHex();
-}
-
-/**
- * Is white color
- *
- * @param color - Color
- */
-export function isWhiteColor(color: AnyColor) {
-  return colord(color).isEqual('#ffffff');
-}
-
-export { colord };
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/hooks",
-  "version": "1.1.0",
+  "version": "1.0.6",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/hooks/src/use-table.ts
+++ b/packages/hooks/src/use-table.ts
@@ -57,12 +57,6 @@ export type TableConfig<A extends ApiFn, T, C> = {
   * @default true
   */
  immediate?: boolean;
-  /**
-   * whether to display the total items count
-   *
-   * @default false
-   */
-  showTotal?: boolean;
 };

 export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<A, T, C>) {
--- a/packages/materials/package.json
+++ b/packages/materials/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/materials",
-  "version": "1.1.0",
+  "version": "1.0.6",
  "exports": {
    ".": "./src/index.ts"
  },
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "@sa/utils": "workspace:*",
-    "simplebar-vue": "2.3.4"
+    "simplebar-vue": "2.3.3"
  },
  "devDependencies": {
    "typed-css-modules": "0.9.1"
--- a/packages/materials/src/libs/page-tab/index.vue
+++ b/packages/materials/src/libs/page-tab/index.vue
@@ -53,23 +53,10 @@ const bindProps = computed(() => {
 function handleClose() {
  emit('close');
 }
-
-function handleMouseup(e: MouseEvent) {
-  // close tab by mouse wheel button click
-  if (e.button === 1) {
-    handleClose();
-  }
-}
 </script>

 <template>
-  <component
-    :is="activeTabComponent.component"
-    :class="activeTabComponent.class"
-    :style="cssVars"
-    v-bind="bindProps"
-    @mouseup="handleMouseup"
-  >
+  <component :is="activeTabComponent.component" :class="activeTabComponent.class" :style="cssVars" v-bind="bindProps">
    <template #prefix>
      <slot name="prefix"></slot>
    </template>
--- a/packages/materials/src/libs/page-tab/shared.ts
+++ b/packages/materials/src/libs/page-tab/shared.ts
@@ -1,4 +1,4 @@
-import { addColorAlpha, transformColorWithOpacity } from '@sa/color';
+import { addColorAlpha, transformColorWithOpacity } from '@sa/utils';
 import type { PageTabCssVars, PageTabCssVarsProps } from '../../types';

 /** The active color of the tab */
--- a/packages/ofetch/package.json
+++ b/packages/ofetch/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/fetch",
-  "version": "1.1.0",
+  "version": "1.0.6",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/scripts",
-  "version": "1.1.0",
+  "version": "1.0.6",
  "bin": {
    "sa": "./bin.ts"
  },
@@ -13,15 +13,15 @@
    }
  },
  "devDependencies": {
-    "@soybeanjs/changelog": "0.3.23",
-    "bumpp": "9.4.1",
+    "@soybeanjs/changelog": "0.3.22",
+    "bumpp": "9.4.0",
    "c12": "1.10.0",
    "cac": "6.7.14",
    "consola": "3.2.3",
    "enquirer": "2.4.1",
    "execa": "8.0.1",
    "kolorist": "1.8.0",
-    "npm-check-updates": "16.14.20",
+    "npm-check-updates": "16.14.18",
    "rimraf": "5.0.5"
  }
 }
--- a/packages/scripts/src/config/index.ts
+++ b/packages/scripts/src/config/index.ts
@@ -19,7 +19,6 @@ const defaultOptions: CliOption = {
    ['style', 'Changes that do not affect the meaning of the code'],
    ['refactor', 'A code change that neither fixes a bug nor adds a feature'],
    ['perf', 'A code change that improves performance'],
-    ['optimize', 'A code change that optimizes code quality'],
    ['test', 'Adding missing tests or correcting existing tests'],
    ['build', 'Changes that affect the build system or external dependencies'],
    ['ci', 'Changes to our CI configuration files and scripts'],
@@ -28,7 +27,6 @@ const defaultOptions: CliOption = {
  ],
  gitCommitScopes: [
    ['projects', 'project'],
-    ['packages', 'packages'],
    ['components', 'components'],
    ['hooks', 'hook functions'],
    ['utils', 'utils functions'],
--- a/packages/uno-preset/package.json
+++ b/packages/uno-preset/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/uno-preset",
-  "version": "1.1.0",
+  "version": "1.0.6",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/utils",
-  "version": "1.1.0",
+  "version": "1.0.6",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/color/src/palette/antd.ts
+++ b/packages/color/src/palette/antd.ts
@@ -1,6 +1,74 @@
-import type { AnyColor, HsvColor } from 'colord';
-import { getHex, getHsv, isValidColor, mixColor } from '../shared';
-import type { ColorIndex } from '../types';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import mixPlugin from 'colord/plugins/mix';
+import type { AnyColor, HsvColor, RgbColor } from 'colord';
+
+extend([namesPlugin, mixPlugin]);
+
+/**
+ * Add color alpha
+ *
+ * @param color - Color
+ * @param alpha - Alpha (0 - 1)
+ */
+export function addColorAlpha(color: string, alpha: number) {
+  return colord(color).alpha(alpha).toHex();
+}
+
+/**
+ * Mix color
+ *
+ * @param firstColor - First color
+ * @param secondColor - Second color
+ * @param ratio - The ratio of the second color (0 - 1)
+ */
+export function mixColor(firstColor: string, secondColor: string, ratio: number) {
+  return colord(firstColor).mix(secondColor, ratio).toHex();
+}
+
+/**
+ * Transform color with opacity to similar color without opacity
+ *
+ * @param color - Color
+ * @param alpha - Alpha (0 - 1)
+ * @param bgColor Background color (usually white or black)
+ */
+export function transformColorWithOpacity(color: string, alpha: number, bgColor = '#ffffff') {
+  const originColor = addColorAlpha(color, alpha);
+  const { r: oR, g: oG, b: oB } = colord(originColor).toRgb();
+
+  const { r: bgR, g: bgG, b: bgB } = colord(bgColor).toRgb();
+
+  function calRgb(or: number, bg: number, al: number) {
+    return bg + (or - bg) * al;
+  }
+
+  const resultRgb: RgbColor = {
+    r: calRgb(oR, bgR, alpha),
+    g: calRgb(oG, bgG, alpha),
+    b: calRgb(oB, bgB, alpha)
+  };
+
+  return colord(resultRgb).toHex();
+}
+
+/**
+ * Is white color
+ *
+ * @param color - Color
+ */
+export function isWhiteColor(color: string) {
+  return colord(color).isEqual('#ffffff');
+}
+
+/**
+ * Get rgb of color
+ *
+ * @param color Color
+ */
+export function getRgbOfColor(color: string) {
+  return colord(color).toRgb();
+}

 /** Hue step */
 const hueStep = 2;
@@ -18,23 +86,32 @@ const lightColorCount = 5;
 const darkColorCount = 4;

 /**
- * Get AntD palette color by index
+ * The color index of color palette
+ *
+ * From left to right, the color is from light to dark, 6 is main color
+ */
+type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+
+/**
+ * Get color palette (from left to right, the color is from light to dark, 6 is main color)
 *
 * @param color - Color
 * @param index - The color index of color palette (the main color index is 6)
 * @returns Hex color
 */
-export function getAntDPaletteColorByIndex(color: AnyColor, index: ColorIndex): string {
-  if (!isValidColor(color)) {
+export function getColorPalette(color: AnyColor, index: ColorIndex): string {
+  const transformColor = colord(color);
+
+  if (!transformColor.isValid()) {
    throw new Error('invalid input color value');
  }

  if (index === 6) {
-    return getHex(color);
+    return colord(transformColor).toHex();
  }

  const isLight = index < 6;
-  const hsv = getHsv(color);
+  const hsv = transformColor.toHsv();
  const i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;

  const newHsv: HsvColor = {
@@ -43,7 +120,7 @@ export function getAntDPaletteColorByIndex(color: AnyColor, index: ColorIndex):
    v: getValue(hsv, i, isLight)
  };

-  return getHex(newHsv);
+  return colord(newHsv).toHex();
 }

 /** Map of dark color index and opacity */
@@ -54,33 +131,32 @@ const darkColorMap = [
  { index: 5, opacity: 0.45 },
  { index: 5, opacity: 0.65 },
  { index: 5, opacity: 0.85 },
-  { index: 5, opacity: 0.9 },
-  { index: 4, opacity: 0.93 },
+  { index: 4, opacity: 0.9 },
  { index: 3, opacity: 0.95 },
  { index: 2, opacity: 0.97 },
  { index: 1, opacity: 0.98 }
 ];

 /**
- * Get AntD color palette
+ * Get color palettes
 *
 * @param color - Color
 * @param darkTheme - Dark theme
 * @param darkThemeMixColor - Dark theme mix color (default: #141414)
 */
-export function getAntDColorPalette(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] {
-  const indexes: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+export function getColorPalettes(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] {
+  const indexes: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

-  const patterns = indexes.map(index => getAntDPaletteColorByIndex(color, index));
+  const patterns = indexes.map(index => getColorPalette(color, index));

  if (darkTheme) {
    const darkPatterns = darkColorMap.map(({ index, opacity }) => {
-      const darkColor = mixColor(darkThemeMixColor, patterns[index], opacity);
+      const darkColor = colord(darkThemeMixColor).mix(patterns[index], opacity);

      return darkColor;
    });

-    return darkPatterns.map(item => getHex(item));
+    return darkPatterns.map(item => colord(item).toHex());
  }

  return patterns;
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -1,3 +1,4 @@
+export * from './color';
 export * from './crypto';
 export * from './storage';
 export * from './nanoid';
--- a/packages/utils/src/storage.ts
+++ b/packages/utils/src/storage.ts
@@ -3,7 +3,7 @@ import localforage from 'localforage';
 /** The storage type */
 export type StorageType = 'local' | 'session';

-export function createStorage<T extends object>(type: StorageType, storagePrefix: string) {
+export function createStorage<T extends object>(type: StorageType) {
  const stg = type === 'session' ? window.sessionStorage : window.localStorage;

  const storage = {
@@ -16,7 +16,7 @@ export function createStorage<T extends object>(type: StorageType, storagePrefix
    set<K extends keyof T>(key: K, value: T[K]) {
      const json = JSON.stringify(value);

-      stg.setItem(`${storagePrefix}${key as string}`, json);
+      stg.setItem(key as string, json);
    },
    /**
     * Get session
@@ -24,7 +24,7 @@ export function createStorage<T extends object>(type: StorageType, storagePrefix
     * @param key Session key
     */
    get<K extends keyof T>(key: K): T[K] | null {
-      const json = stg.getItem(`${storagePrefix}${key as string}`);
+      const json = stg.getItem(key as string);
      if (json) {
        let storageData: T[K] | null = null;

@@ -37,12 +37,12 @@ export function createStorage<T extends object>(type: StorageType, storagePrefix
        }
      }

-      stg.removeItem(`${storagePrefix}${key as string}`);
+      stg.removeItem(key as string);

      return null;
    },
    remove(key: keyof T) {
-      stg.removeItem(`${storagePrefix}${key as string}`);
+      stg.removeItem(key as string);
    },
    clear() {
      stg.clear();
--- a/packages/utils/tsconfig.json
+++ b/packages/utils/tsconfig.json
@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "jsx": "preserve",
-    "lib": ["DOM", "ESNext"],
-    "baseUrl": ".",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "types": ["node"],
-    "strict": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/common/menu-toggler.vue
+++ b/src/components/common/menu-toggler.vue
@@ -9,13 +9,9 @@ interface Props {
  collapsed?: boolean;
  /** Arrow style icon */
  arrowIcon?: boolean;
-  zIndex?: number;
 }

-const props = withDefaults(defineProps<Props>(), {
-  arrowIcon: false,
-  zIndex: 98
-});
+const props = defineProps<Props>();

 type NumberBool = 0 | 1;

@@ -40,11 +36,7 @@ const icon = computed(() => {
 </script>

 <template>
-  <ButtonIcon
-    :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')"
-    tooltip-placement="bottom-start"
-    :z-index="zIndex"
-  >
+  <ButtonIcon :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')" tooltip-placement="bottom-start">
    <SvgIcon :icon="icon" />
  </ButtonIcon>
 </template>
--- a/src/components/common/pin-toggler.vue
+++ b/src/components/common/pin-toggler.vue
@@ -15,7 +15,7 @@ const icon = computed(() => (props.pin ? 'mdi-pin-off' : 'mdi-pin'));

 <template>
  <ButtonIcon
-    :tooltip-content="pin ? $t('icon.unpin') : $t('icon.pin')"
+    :tooltip-content="pin ? $t('icon.pin') : $t('icon.unpin')"
    tooltip-placement="bottom-start"
    :z-index="100"
  >
--- a/src/components/custom/wave-bg.vue
+++ b/src/components/custom/wave-bg.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { getPaletteColorByNumber } from '@sa/color';
+import { getColorPalette } from '@sa/utils';

 defineOptions({ name: 'WaveBg' });

@@ -11,8 +11,8 @@ interface Props {

 const props = defineProps<Props>();

-const lightColor = computed(() => getPaletteColorByNumber(props.themeColor, 200));
-const darkColor = computed(() => getPaletteColorByNumber(props.themeColor, 500));
+const lightColor = computed(() => getColorPalette(props.themeColor, 3));
+const darkColor = computed(() => getColorPalette(props.themeColor, 6));
 </script>

 <template>
--- a/src/hooks/common/table.ts
+++ b/src/hooks/common/table.ts
@@ -1,7 +1,6 @@
 import { computed, effectScope, onScopeDispose, reactive, ref, watch } from 'vue';
 import type { Ref } from 'vue';
 import type { PaginationProps } from 'naive-ui';
-import { cloneDeep } from 'lodash-es';
 import { useBoolean, useHookTable } from '@sa/hooks';
 import { useAppStore } from '@/store/modules/app';
 import { $t } from '@/locales';
@@ -14,14 +13,10 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
  const scope = effectScope();
  const appStore = useAppStore();

-  const isMobile = computed(() => appStore.isMobile);
-
-  const { apiFn, apiParams, immediate, showTotal } = config;
+  const { apiFn, apiParams, immediate } = config;

  const SELECTION_KEY = '__selection__';

-  const EXPAND_KEY = '__expand__';
-
  const {
    loading,
    empty,
@@ -70,12 +65,6 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
            title: $t('common.check'),
            checked: true
          });
-        } else if (column.type === 'expand') {
-          checks.push({
-            key: EXPAND_KEY,
-            title: $t('common.expandColumn'),
-            checked: true
-          });
        }
      });

@@ -89,8 +78,6 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
          columnMap.set(column.key as string, column);
        } else if (column.type === 'selection') {
          columnMap.set(SELECTION_KEY, column);
-        } else if (column.type === 'expand') {
-          columnMap.set(EXPAND_KEY, column);
        }
      });

@@ -137,20 +124,14 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
      });

      getData();
-    },
-    ...(showTotal
-      ? {
-          prefix: page => $t('datatable.itemCount', { total: page.itemCount })
    }
-      : {})
  });

  // this is for mobile, if the system does not support mobile, you can use `pagination` directly
  const mobilePagination = computed(() => {
    const p: PaginationProps = {
      ...pagination,
-      pageSlot: isMobile.value ? 3 : 9,
-      prefix: !isMobile.value && showTotal ? pagination.prefix : undefined
+      pageSlot: appStore.isMobile ? 3 : 9
    };

    return p;
@@ -205,8 +186,7 @@ export function useTableOperate<T extends TableData = TableData>(data: Ref<T[]>,

  function handleEdit(id: T['id']) {
    operateType.value = 'edit';
-    const findItem = data.value.find(item => item.id === id) || null;
-    editingData.value = cloneDeep(findItem);
+    editingData.value = data.value.find(item => item.id === id) || null;

    openDrawer();
  }
--- a/src/layouts/modules/global-menu/base-menu.vue
+++ b/src/layouts/modules/global-menu/base-menu.vue
@@ -57,7 +57,7 @@ function updateExpandedKeys() {
 }

 function handleClickMenu(key: RouteKey) {
-  const query = routeStore.getRouteQueryOfMetaByKey(key);
+  const { query } = routeStore.getSelectedMenuMetaByKey(key) || {};

  routerPushByKey(key, { query });
 }
--- a/src/layouts/modules/global-menu/first-level-menu.vue
+++ b/src/layouts/modules/global-menu/first-level-menu.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { SimpleScrollbar } from '@sa/materials';
-import { transformColorWithOpacity } from '@sa/color';
+import { transformColorWithOpacity } from '@sa/utils';
 import { useAppStore } from '@/store/modules/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useThemeStore } from '@/store/modules/theme';
@@ -92,7 +92,6 @@ function handleClickMixMenu(menu: App.Global.Menu) {
    <MenuToggler
      arrow-icon
      :collapsed="appStore.siderCollapse"
-      :z-index="99"
      :class="{ 'text-white:88 !hover:text-white': inverted }"
      @click="appStore.toggleSiderCollapse"
    />
--- a/src/layouts/modules/theme-drawer/modules/dark-mode.vue
+++ b/src/layouts/modules/theme-drawer/modules/dark-mode.vue
@@ -21,10 +21,6 @@ function handleSegmentChange(value: string | number) {
  themeStore.setThemeScheme(value as UnionKey.ThemeScheme);
 }

-function handleGrayscaleChange(value: boolean) {
-  themeStore.setGrayscale(value);
-}
-
 const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layout.mode.includes('vertical'));
 </script>

@@ -50,9 +46,6 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
        <NSwitch v-model:value="themeStore.sider.inverted" />
      </SettingItem>
    </Transition>
-    <SettingItem :label="$t('theme.grayscale')">
-      <NSwitch :value="themeStore.grayscale" @update:value="handleGrayscaleChange" />
-    </SettingItem>
  </div>
 </template>

--- a/src/layouts/modules/theme-drawer/modules/theme-color.vue
+++ b/src/layouts/modules/theme-drawer/modules/theme-color.vue
@@ -36,27 +36,6 @@ const swatches: string[] = [
 <template>
  <NDivider>{{ $t('theme.themeColor.title') }}</NDivider>
  <div class="flex-col-stretch gap-12px">
-    <NTooltip placement="top-start">
-      <template #trigger>
-        <SettingItem key="recommend-color" :label="$t('theme.recommendColor')">
-          <NSwitch v-model:value="themeStore.recommendColor" />
-        </SettingItem>
-      </template>
-      <p>
-        <span class="pr-12px">{{ $t('theme.recommendColorDesc') }}</span>
-        <br />
-        <NButton
-          text
-          tag="a"
-          href="https://uicolors.app/create"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-gray"
-        >
-          https://uicolors.app/create
-        </NButton>
-      </p>
-    </NTooltip>
    <SettingItem v-for="(_, key) in themeStore.themeColors" :key="key" :label="$t(`theme.themeColor.${key}`)">
      <template v-if="key === 'info'" #suffix>
        <NCheckbox v-model:checked="themeStore.isInfoFollowPrimary">
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -11,7 +11,6 @@ const local: App.I18n.Schema = {
    cancel: 'Cancel',
    close: 'Close',
    check: 'Check',
-    expandColumn: 'Expand Column',
    columnSetting: 'Column Setting',
    config: 'Config',
    confirm: 'Confirm',
@@ -58,7 +57,6 @@ const local: App.I18n.Schema = {
      dark: 'Dark',
      auto: 'Follow System'
    },
-    grayscale: 'Grayscale',
    layoutMode: {
      title: 'Layout Mode',
      vertical: 'Vertical Menu Mode',
@@ -66,8 +64,6 @@ const local: App.I18n.Schema = {
      'vertical-mix': 'Vertical Mix Menu Mode',
      'horizontal-mix': 'Horizontal Mix menu Mode'
    },
-    recommendColor: 'Apply Recommended Color Algorithm',
-    recommendColorDesc: 'The recommended color algorithm refers to',
    themeColor: {
      title: 'Theme Color',
      primary: 'Primary',
@@ -141,16 +137,7 @@ const local: App.I18n.Schema = {
    403: 'No Permission',
    404: 'Page Not Found',
    500: 'Server Error',
-    'iframe-page': 'Iframe',
    home: 'Home',
-    document: 'Document',
-    document_project: 'Project Document',
-    'document_project-link': 'Project Document(External Link)',
-    document_vue: 'Vue Document',
-    document_vite: 'Vite Document',
-    document_unocss: 'UnoCSS Document',
-    document_naive: 'Naive UI Document',
-    document_antd: 'Ant Design Vue Document',
    'user-center': 'User Center',
    about: 'About',
    function: 'System Function',
@@ -297,12 +284,6 @@ const local: App.I18n.Schema = {
        superAdminVisible: 'Super Admin Visible',
        adminVisible: 'Admin Visible',
        adminOrUserVisible: 'Admin and User Visible'
-      },
-      request: {
-        repeatedErrorOccurOnce: 'Repeated Request Error Occurs Once',
-        repeatedError: 'Repeated Request Error',
-        repeatedErrorMsg1: 'Custom Request Error 1',
-        repeatedErrorMsg2: 'Custom Request Error 2'
      }
    },
    manage: {
@@ -363,7 +344,7 @@ const local: App.I18n.Schema = {
        menuName: 'Menu Name',
        routeName: 'Route Name',
        routePath: 'Route Path',
-        pathParam: 'Path Param',
+        routeParams: 'Route Params',
        layout: 'Layout Component',
        page: 'Page Component',
        i18nKey: 'I18n Key',
@@ -371,14 +352,12 @@ const local: App.I18n.Schema = {
        localIcon: 'Local Icon',
        iconTypeTitle: 'Icon Type',
        order: 'Order',
-        constant: 'Constant',
        keepAlive: 'Keep Alive',
        href: 'Href',
        hideInMenu: 'Hide In Menu',
        activeMenu: 'Active Menu',
        multiTab: 'Multi Tab',
        fixedIndexInTab: 'Fixed Index In Tab',
-        query: 'Query Params',
        button: 'Button',
        buttonCode: 'Button Code',
        buttonDesc: 'Button Desc',
@@ -389,7 +368,6 @@ const local: App.I18n.Schema = {
          menuName: 'Please enter menu name',
          routeName: 'Please enter route name',
          routePath: 'Please enter route path',
-          pathParam: 'Please enter path param',
          page: 'Please select page component',
          layout: 'Please select layout component',
          i18nKey: 'Please enter i18n key',
@@ -399,12 +377,10 @@ const local: App.I18n.Schema = {
          keepAlive: 'Please select whether to cache route',
          href: 'Please enter href',
          hideInMenu: 'Please select whether to hide menu',
-          activeMenu: 'Please select route name of the highlighted menu',
+          activeMenu: 'Please enter the route name of the highlighted menu',
          multiTab: 'Please select whether to support multiple tabs',
          fixedInTab: 'Please select whether to fix in the tab',
          fixedIndexInTab: 'Please enter the index fixed in the tab',
-          queryKey: 'Please enter route parameter Key',
-          queryValue: 'Please enter route parameter Value',
          button: 'Please select whether it is a button',
          buttonCode: 'Please enter button code',
          buttonDesc: 'Please enter button description',
@@ -469,9 +445,6 @@ const local: App.I18n.Schema = {
    expand: 'Expand Menu',
    pin: 'Pin',
    unpin: 'Unpin'
-  },
-  datatable: {
-    itemCount: 'Total {total} items'
  }
 };

--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -11,7 +11,6 @@ const local: App.I18n.Schema = {
    cancel: '取消',
    close: '关闭',
    check: '勾选',
-    expandColumn: '展开列',
    columnSetting: '列设置',
    config: '配置',
    confirm: '确认',
@@ -58,7 +57,6 @@ const local: App.I18n.Schema = {
      dark: '暗黑模式',
      auto: '跟随系统'
    },
-    grayscale: '灰度模式',
    layoutMode: {
      title: '布局模式',
      vertical: '左侧菜单模式',
@@ -66,8 +64,6 @@ const local: App.I18n.Schema = {
      horizontal: '顶部菜单模式',
      'horizontal-mix': '顶部菜单混合模式'
    },
-    recommendColor: '应用推荐算法的颜色',
-    recommendColorDesc: '推荐颜色的算法参照',
    themeColor: {
      title: '主题颜色',
      primary: '主色',
@@ -141,16 +137,7 @@ const local: App.I18n.Schema = {
    403: '无权限',
    404: '页面不存在',
    500: '服务器错误',
-    'iframe-page': '外链页面',
    home: '首页',
-    document: '文档',
-    document_project: '项目文档',
-    'document_project-link': '项目文档(外链)',
-    document_vue: 'Vue文档',
-    document_vite: 'Vite文档',
-    document_unocss: 'UnoCSS文档',
-    document_naive: 'Naive UI文档',
-    document_antd: 'Ant Design Vue文档',
    'user-center': '个人中心',
    about: '关于',
    function: '系统功能',
@@ -297,12 +284,6 @@ const local: App.I18n.Schema = {
        superAdminVisible: '超级管理员可见',
        adminVisible: '管理员可见',
        adminOrUserVisible: '管理员和用户可见'
-      },
-      request: {
-        repeatedErrorOccurOnce: '重复请求错误只出现一次',
-        repeatedError: '重复请求错误',
-        repeatedErrorMsg1: '自定义请求错误 1',
-        repeatedErrorMsg2: '自定义请求错误 2'
      }
    },
    manage: {
@@ -363,7 +344,7 @@ const local: App.I18n.Schema = {
        menuName: '菜单名称',
        routeName: '路由名称',
        routePath: '路由路径',
-        pathParam: '路径参数',
+        routeParams: '路由参数',
        layout: '布局',
        page: '页面组件',
        i18nKey: '国际化key',
@@ -371,14 +352,12 @@ const local: App.I18n.Schema = {
        localIcon: '本地图标',
        iconTypeTitle: '图标类型',
        order: '排序',
-        constant: '常量路由',
        keepAlive: '缓存路由',
        href: '外链',
        hideInMenu: '隐藏菜单',
        activeMenu: '高亮的菜单',
        multiTab: '支持多页签',
        fixedIndexInTab: '固定在页签中的序号',
-        query: '路由参数',
        button: '按钮',
        buttonCode: '按钮编码',
        buttonDesc: '按钮描述',
@@ -389,7 +368,6 @@ const local: App.I18n.Schema = {
          menuName: '请输入菜单名称',
          routeName: '请输入路由名称',
          routePath: '请输入路由路径',
-          pathParam: '请输入路径参数',
          page: '请选择页面组件',
          layout: '请选择布局组件',
          i18nKey: '请输入国际化key',
@@ -399,12 +377,10 @@ const local: App.I18n.Schema = {
          keepAlive: '请选择是否缓存路由',
          href: '请输入外链',
          hideInMenu: '请选择是否隐藏菜单',
-          activeMenu: '请选择高亮的菜单的路由名称',
+          activeMenu: '请输入高亮的菜单的路由名称',
          multiTab: '请选择是否支持多标签',
          fixedInTab: '请选择是否固定在页签中',
          fixedIndexInTab: '请输入固定在页签中的序号',
-          queryKey: '请输入路由参数Key',
-          queryValue: '请输入路由参数Value',
          button: '请选择是否按钮',
          buttonCode: '请输入按钮编码',
          buttonDesc: '请输入按钮描述',
@@ -469,9 +445,6 @@ const local: App.I18n.Schema = {
    expand: '展开菜单',
    pin: '固定',
    unpin: '取消固定'
-  },
-  datatable: {
-    itemCount: '共 {total} 条'
  }
 };

--- a/src/plugins/loading.ts
+++ b/src/plugins/loading.ts
@@ -1,5 +1,5 @@
 // @unocss-include
-import { getRgb } from '@sa/color';
+import { getRgbOfColor } from '@sa/utils';
 import { $t } from '@/locales';
 import { localStg } from '@/utils/storage';
 import systemLogo from '@/assets/svg-icon/logo.svg?raw';
@@ -7,7 +7,7 @@ import systemLogo from '@/assets/svg-icon/logo.svg?raw';
 export function setupLoading() {
  const themeColor = localStg.get('themeColor') || '#646cff';

-  const { r, g, b } = getRgb(themeColor);
+  const { r, g, b } = getRgbOfColor(themeColor);

  const primaryColor = `--primary-color: ${r} ${g} ${b}`;

--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@@ -18,7 +18,6 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
  403: () => import("@/views/_builtin/403/index.vue"),
  404: () => import("@/views/_builtin/404/index.vue"),
  500: () => import("@/views/_builtin/500/index.vue"),
-  "iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
  login: () => import("@/views/_builtin/login/index.vue"),
  about: () => import("@/views/about/index.vue"),
  "function_hide-child_one": () => import("@/views/function/hide-child/one/index.vue"),
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -179,19 +179,6 @@ export const generatedRoutes: GeneratedRoute[] = [
      order: 1
    }
  },
-  {
-    name: 'iframe-page',
-    path: '/iframe-page/:url',
-    component: 'layout.base$view.iframe-page',
-    props: true,
-    meta: {
-      title: 'iframe-page',
-      i18nKey: 'route.iframe-page',
-      constant: true,
-      hideInMenu: true,
-      keepAlive: true
-    }
-  },
  {
    name: 'login',
    path: '/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?',
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -147,14 +147,6 @@ const routeMap: RouteMap = {
  "exception_403": "/exception/403",
  "exception_404": "/exception/404",
  "exception_500": "/exception/500",
-  "document": "/document",
-  "document_project": "/document/project",
-  "document_project-link": "/document/project-link",
-  "document_vue": "/document/vue",
-  "document_vite": "/document/vite",
-  "document_unocss": "/document/unocss",
-  "document_naive": "/document/naive",
-  "document_antd": "/document/antd",
  "403": "/403",
  "404": "/404",
  "500": "/500",
@@ -170,7 +162,6 @@ const routeMap: RouteMap = {
  "function_tab": "/function/tab",
  "function_toggle-auth": "/function/toggle-auth",
  "home": "/home",
-  "iframe-page": "/iframe-page/:url",
  "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
  "manage": "/manage",
  "manage_menu": "/manage/menu",
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -51,115 +51,6 @@ const customRoutes: CustomRoute[] = [
        }
      }
    ]
-  },
-  {
-    name: 'document',
-    path: '/document',
-    component: 'layout.base',
-    meta: {
-      title: 'document',
-      i18nKey: 'route.document',
-      order: 2,
-      icon: 'mdi:file-document-multiple-outline'
-    },
-    children: [
-      {
-        name: 'document_antd',
-        path: '/document/antd',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://antdv.com/components/overview-cn'
-        },
-        meta: {
-          title: 'document_antd',
-          i18nKey: 'route.document_antd',
-          order: 7,
-          icon: 'logos:ant-design'
-        }
-      },
-      {
-        name: 'document_naive',
-        path: '/document/naive',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://www.naiveui.com/zh-CN/os-theme/docs/introduction'
-        },
-        meta: {
-          title: 'document_naive',
-          i18nKey: 'route.document_naive',
-          order: 6,
-          icon: 'logos:naiveui'
-        }
-      },
-      {
-        name: 'document_project',
-        path: '/document/project',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://docs.soybeanjs.cn/zh'
-        },
-        meta: {
-          title: 'document_project',
-          i18nKey: 'route.document_project',
-          order: 1,
-          localIcon: 'logo'
-        }
-      },
-      {
-        name: 'document_project-link',
-        path: '/document/project-link',
-        component: 'view.iframe-page',
-        meta: {
-          title: 'document_project-link',
-          i18nKey: 'route.document_project-link',
-          order: 2,
-          localIcon: 'logo',
-          href: 'https://docs.soybeanjs.cn/zh'
-        }
-      },
-      {
-        name: 'document_unocss',
-        path: '/document/unocss',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://unocss.dev/'
-        },
-        meta: {
-          title: 'document_unocss',
-          i18nKey: 'route.document_unocss',
-          order: 5,
-          icon: 'logos:unocss'
-        }
-      },
-      {
-        name: 'document_vite',
-        path: '/document/vite',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://cn.vitejs.dev/'
-        },
-        meta: {
-          title: 'document_vite',
-          i18nKey: 'route.document_vite',
-          order: 4,
-          icon: 'logos:vitejs'
-        }
-      },
-      {
-        name: 'document_vue',
-        path: '/document/vue',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://cn.vuejs.org/'
-        },
-        meta: {
-          title: 'document_vue',
-          i18nKey: 'route.document_vue',
-          order: 3,
-          icon: 'logos:vue'
-        }
-      }
-    ]
  }
 ];

--- a/src/service/api/system-manage.ts
+++ b/src/service/api/system-manage.ts
@@ -30,6 +30,18 @@ export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
  });
 }

+/**
+ * get menu list
+ *
+ * @deprecated this will removed in next version 1.1.0
+ */
+export function fetchGetMenuListV1() {
+  return request<Api.SystemManage.Menu[]>({
+    url: '/systemManage/getMenuList',
+    method: 'get'
+  });
+}
+
 /** get menu list */
 export function fetchGetMenuList() {
  return request<Api.SystemManage.MenuList>({
--- a/src/service/request/index.ts
+++ b/src/service/request/index.ts
@@ -1,16 +1,20 @@
 import type { AxiosResponse } from 'axios';
 import { BACKEND_ERROR_CODE, createFlatRequest, createRequest } from '@sa/axios';
 import { useAuthStore } from '@/store/modules/auth';
-import { $t } from '@/locales';
 import { localStg } from '@/utils/storage';
 import { getServiceBaseURL } from '@/utils/service';
-import { handleRefreshToken, showErrorMsg } from './shared';
-import type { RequestInstanceState } from './type';
+import { $t } from '@/locales';
+import { handleRefreshToken } from './shared';

 const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
 const { baseURL, otherBaseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);

-export const request = createFlatRequest<App.Service.Response, RequestInstanceState>(
+interface InstanceState {
+  /** whether the request is refreshing token */
+  isRefreshingToken: boolean;
+}
+
+export const request = createFlatRequest<App.Service.Response, InstanceState>(
  {
    baseURL,
    headers: {
@@ -31,7 +35,7 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
    isBackendSuccess(response) {
      // when the backend response code is "0000"(default), it means the request is success
      // to change this logic by yourself, you can modify the `VITE_SERVICE_SUCCESS_CODE` in `.env` file
-      return String(response.data.code) === import.meta.env.VITE_SERVICE_SUCCESS_CODE;
+      return response.data.code === import.meta.env.VITE_SERVICE_SUCCESS_CODE;
    },
    async onBackendFail(response, instance) {
      const authStore = useAuthStore();
@@ -43,8 +47,6 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
      function logoutAndCleanup() {
        handleLogout();
        window.removeEventListener('beforeunload', handleLogout);
-
-        request.state.errMsgStack = request.state.errMsgStack.filter(msg => msg !== response.data.msg);
      }

      // when the backend response code is in `logoutCodes`, it means the user will be logged out and redirected to login page
@@ -56,15 +58,13 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt

      // when the backend response code is in `modalLogoutCodes`, it means the user will be logged out by displaying a modal
      const modalLogoutCodes = import.meta.env.VITE_SERVICE_MODAL_LOGOUT_CODES?.split(',') || [];
-      if (modalLogoutCodes.includes(response.data.code) && !request.state.errMsgStack?.includes(response.data.msg)) {
-        request.state.errMsgStack = [...(request.state.errMsgStack || []), response.data.msg];
-
+      if (modalLogoutCodes.includes(response.data.code)) {
        // prevent the user from refreshing the page
        window.addEventListener('beforeunload', handleLogout);

        window.$dialog?.error({
          title: 'Error',
-          content: response.data.code,
+          content: response.data.msg,
          positiveText: $t('common.confirm'),
          maskClosable: false,
          onPositiveClick() {
@@ -122,7 +122,7 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
        return;
      }

-      showErrorMsg(request.state, message);
+      window.$message?.error?.(message);
    }
  }
 );
--- a/src/service/request/shared.ts
+++ b/src/service/request/shared.ts
@@ -2,7 +2,6 @@ import type { AxiosRequestConfig } from 'axios';
 import { useAuthStore } from '@/store/modules/auth';
 import { localStg } from '@/utils/storage';
 import { fetchRefreshToken } from '../api';
-import type { RequestInstanceState } from './type';

 /**
 * refresh token
@@ -30,25 +29,3 @@ export async function handleRefreshToken(axiosConfig: AxiosRequestConfig) {

  return null;
 }
-
-export function showErrorMsg(state: RequestInstanceState, message: string) {
-  if (!state.errMsgStack?.length) {
-    state.errMsgStack = [];
-  }
-
-  const isExist = state.errMsgStack.includes(message);
-
-  if (!isExist) {
-    state.errMsgStack.push(message);
-
-    window.$message?.error(message, {
-      onLeave: () => {
-        state.errMsgStack = state.errMsgStack.filter(msg => msg !== message);
-
-        setTimeout(() => {
-          state.errMsgStack = [];
-        }, 5000);
-      }
-    });
-  }
-}
--- a/src/service/request/type.ts
+++ b/src/service/request/type.ts
@@ -1,6 +0,0 @@
-export interface RequestInstanceState {
-  /** whether the request is refreshing token */
-  isRefreshingToken: boolean;
-  /** the request error message stack */
-  errMsgStack: string[];
-}
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -1,4 +1,4 @@
-import { effectScope, nextTick, onScopeDispose, ref, watch } from 'vue';
+import { effectScope, onScopeDispose, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { breakpointsTailwind, useBreakpoints, useEventListener, useTitle } from '@vueuse/core';
 import { useBoolean } from '@sa/hooks';
@@ -87,26 +87,9 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
      isMobile,
      newValue => {
        if (newValue) {
-          // backup theme setting before is mobile
-          localStg.set('backupThemeSettingBeforeIsMobile', {
-            layout: themeStore.layout.mode,
-            siderCollapse: siderCollapse.value
-          });
+          setSiderCollapse(true);

          themeStore.setThemeLayout('vertical');
-          setSiderCollapse(true);
-        } else {
-          // when is not mobile, recover the backup theme setting
-          const backup = localStg.get('backupThemeSettingBeforeIsMobile');
-
-          if (backup) {
-            nextTick(() => {
-              themeStore.setThemeLayout(backup.layout);
-              setSiderCollapse(backup.siderCollapse);
-
-              localStg.remove('backupThemeSettingBeforeIsMobile');
-            });
-          }
        }
      },
      { immediate: true }
--- a/src/store/modules/route/index.ts
+++ b/src/store/modules/route/index.ts
@@ -56,7 +56,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
  const constantRoutes = shallowRef<ElegantConstRoute[]>([]);

  function addConstantRoutes(routes: ElegantConstRoute[]) {
-    const constantRoutesMap = new Map<string, ElegantConstRoute>([]);
+    const constantRoutesMap = new Map(constantRoutes.value.map(route => [route.name, route]));

    routes.forEach(route => {
      constantRoutesMap.set(route.name, route);
@@ -69,7 +69,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
  const authRoutes = shallowRef<ElegantConstRoute[]>([]);

  function addAuthRoutes(routes: ElegantConstRoute[]) {
-    const authRoutesMap = new Map<string, ElegantConstRoute>([]);
+    const authRoutesMap = new Map(authRoutes.value.map(route => [route.name, route]));

    routes.forEach(route => {
      authRoutesMap.set(route.name, route);
@@ -332,31 +332,15 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
  }

  /**
-   * Get route meta by key
+   * Get selected menu meta by key
   *
-   * @param key Route key
+   * @param selectedKey Selected menu key
   */
-  function getRouteMetaByKey(key: string) {
+  function getSelectedMenuMetaByKey(selectedKey: string) {
+    // The routes in router.options.routes are static, you need to use router.getRoutes() to get all the routes.
    const allRoutes = router.getRoutes();

-    return allRoutes.find(route => route.name === key)?.meta || null;
-  }
-
-  /**
-   * Get route query of meta by key
-   *
-   * @param key
-   */
-  function getRouteQueryOfMetaByKey(key: string) {
-    const meta = getRouteMetaByKey(key);
-
-    const query: Record<string, string> = {};
-
-    meta?.query?.forEach(item => {
-      query[item.key] = item.value;
-    });
-
-    return query;
+    return allRoutes.find(route => route.name === selectedKey)?.meta || null;
  }

  return {
@@ -376,6 +360,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
    setIsInitAuthRoute,
    getIsAuthRouteExist,
    getSelectedMenuKeyPath,
-    getRouteQueryOfMetaByKey
+    getSelectedMenuMetaByKey
  };
 });
--- a/src/store/modules/tab/shared.ts
+++ b/src/store/modules/tab/shared.ts
@@ -16,24 +16,17 @@ export function getAllTabs(tabs: App.Global.Tab[], homeTab?: App.Global.Tab) {

  const filterHomeTabs = tabs.filter(tab => tab.id !== homeTab.id);

-  const fixedTabs = filterHomeTabs.filter(isFixedTab).sort((a, b) => a.fixedIndex! - b.fixedIndex!);
+  const fixedTabs = filterHomeTabs
+    .filter(tab => tab.fixedIndex !== undefined)
+    .sort((a, b) => a.fixedIndex! - b.fixedIndex!);

-  const remainTabs = filterHomeTabs.filter(tab => !isFixedTab(tab));
+  const remainTabs = filterHomeTabs.filter(tab => tab.fixedIndex === undefined);

  const allTabs = [homeTab, ...fixedTabs, ...remainTabs];

  return updateTabsLabel(allTabs);
 }

-/**
- * Is fixed tab
- *
- * @param tab
- */
-function isFixedTab(tab: App.Global.Tab) {
-  return tab.fixedIndex !== undefined && tab.fixedIndex !== null;
-}
-
 /**
 * Get tab id by route
 *
@@ -184,7 +177,7 @@ export function extractTabsByAllRoutes(router: Router, tabs: App.Global.Tab[]) {
 * @param tabs
 */
 export function getFixedTabs(tabs: App.Global.Tab[]) {
-  return tabs.filter(isFixedTab);
+  return tabs.filter(tab => tab.fixedIndex !== undefined);
 }

 /**
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -2,17 +2,10 @@ import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
 import type { Ref } from 'vue';
 import { defineStore } from 'pinia';
 import { useEventListener, usePreferredColorScheme } from '@vueuse/core';
-import { getPaletteColorByNumber } from '@sa/color';
+import { getColorPalette } from '@sa/color-palette';
 import { SetupStoreId } from '@/enum';
 import { localStg } from '@/utils/storage';
-import {
-  addThemeVarsToHtml,
-  createThemeToken,
-  getNaiveTheme,
-  initThemeSettings,
-  toggleCssDarkMode,
-  toggleGrayscaleMode
-} from './shared';
+import { addThemeVarsToHtml, createThemeToken, getNaiveTheme, initThemeSettings, toggleCssDarkMode } from './shared';

 /** Theme store */
 export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
@@ -30,9 +23,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    return settings.value.themeScheme === 'dark';
  });

-  /** grayscale mode */
-  const grayscaleMode = computed(() => settings.value.grayscale);
-
  /** Theme colors */
  const themeColors = computed(() => {
    const { themeColor, otherColor, isInfoFollowPrimary } = settings.value;
@@ -45,7 +35,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
  });

  /** Naive theme */
-  const naiveTheme = computed(() => getNaiveTheme(themeColors.value, settings.value.recommendColor));
+  const naiveTheme = computed(() => getNaiveTheme(themeColors.value));

  /**
   * Settings json
@@ -70,15 +60,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    settings.value.themeScheme = themeScheme;
  }

-  /**
-   * Set grayscale value
-   *
-   * @param isGrayscale
-   */
-  function setGrayscale(isGrayscale: boolean) {
-    settings.value.grayscale = isGrayscale;
-  }
-
  /** Toggle theme scheme */
  function toggleThemeScheme() {
    const themeSchemes: UnionKey.ThemeScheme[] = ['light', 'dark', 'auto'];
@@ -99,18 +80,13 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   * @param color Theme color
   */
  function updateThemeColors(key: App.Theme.ThemeColorKey, color: string) {
-    let colorValue = color;
-
-    if (settings.value.recommendColor) {
    // get a color palette by provided color and color name, and use the suitable color
-
-      colorValue = getPaletteColorByNumber(color, 500, true);
-    }
+    const { main } = getColorPalette(color);

    if (key === 'primary') {
-      settings.value.themeColor = colorValue;
+      settings.value.themeColor = main.hex;
    } else {
-      settings.value.otherColor[key] = colorValue;
+      settings.value.otherColor[key] = main.hex;
    }
  }

@@ -125,7 +101,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {

  /** Setup theme vars to html */
  function setupThemeVarsToHtml() {
-    const { themeTokens, darkThemeTokens } = createThemeToken(themeColors.value, settings.value.recommendColor);
+    const { themeTokens, darkThemeTokens } = createThemeToken(themeColors.value);
    addThemeVarsToHtml(themeTokens, darkThemeTokens);
  }

@@ -154,19 +130,12 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
      { immediate: true }
    );

-    watch(
-      grayscaleMode,
-      val => {
-        toggleGrayscaleMode(val);
-      },
-      { immediate: true }
-    );
-
    // themeColors change, update css vars and storage theme color
    watch(
      themeColors,
      val => {
        setupThemeVarsToHtml();
+
        localStg.set('themeColor', val.primary);
      },
      { immediate: true }
@@ -184,7 +153,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    themeColors,
    naiveTheme,
    settingsJson,
-    setGrayscale,
    resetStore,
    setThemeScheme,
    toggleThemeScheme,
--- a/src/store/modules/theme/shared.ts
+++ b/src/store/modules/theme/shared.ts
@@ -1,8 +1,8 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
-import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
+import { getColorByPaletteNumber, getColorPalette } from '@sa/color-palette';
+import { addColorAlpha, getRgbOfColor } from '@sa/utils';
 import { overrideThemeSettings, themeSettings } from '@/theme/settings';
 import { themeVars } from '@/theme/vars';
-import { toggleHtmlClass } from '@/utils/common';
 import { localStg } from '@/utils/storage';

 const DARK_CLASS = 'dark';
@@ -33,10 +33,9 @@ export function initThemeSettings() {
 * Create theme token
 *
 * @param colors Theme colors
- * @param [recommended=false] Use recommended color. Default is `false`
 */
-export function createThemeToken(colors: App.Theme.ThemeColor, recommended = false) {
-  const paletteColors = createThemePaletteColors(colors, recommended);
+export function createThemeToken(colors: App.Theme.ThemeColor) {
+  const paletteColors = createThemePaletteColors(colors);

  const themeTokens: App.Theme.ThemeToken = {
    colors: {
@@ -76,19 +75,18 @@ export function createThemeToken(colors: App.Theme.ThemeColor, recommended = fal
 * Create theme palette colors
 *
 * @param colors Theme colors
- * @param [recommended=false] Use recommended color. Default is `false`
 */
-function createThemePaletteColors(colors: App.Theme.ThemeColor, recommended = false) {
+function createThemePaletteColors(colors: App.Theme.ThemeColor) {
  const colorKeys = Object.keys(colors) as App.Theme.ThemeColorKey[];
  const colorPaletteVar = {} as App.Theme.ThemePaletteColor;

  colorKeys.forEach(key => {
-    const colorMap = getColorPalette(colors[key], recommended);
+    const { palettes, main } = getColorPalette(colors[key]);

-    colorPaletteVar[key] = colorMap.get(500)!;
+    colorPaletteVar[key] = main.hex;

-    colorMap.forEach((hex, number) => {
-      colorPaletteVar[`${key}-${number}`] = hex;
+    palettes.forEach(item => {
+      colorPaletteVar[`${key}-${item.number}`] = item.hex;
    });
  });

@@ -118,7 +116,7 @@ function getCssVarByTokens(tokens: App.Theme.BaseToken) {

      if (key === 'colors') {
        cssVarsKey = removeRgbPrefix(cssVarsKey);
-        const { r, g, b } = getRgb(cssValue);
+        const { r, g, b } = getRgbOfColor(cssValue);
        cssValue = `${r} ${g} ${b}`;
      }

@@ -169,29 +167,18 @@ export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.
 * @param darkMode Is dark mode
 */
 export function toggleCssDarkMode(darkMode = false) {
-  const { add, remove } = toggleHtmlClass(DARK_CLASS);
+  function addDarkClass() {
+    document.documentElement.classList.add(DARK_CLASS);
+  }
+
+  function removeDarkClass() {
+    document.documentElement.classList.remove(DARK_CLASS);
+  }

  if (darkMode) {
-    add();
+    addDarkClass();
  } else {
-    remove();
-  }
-}
-
-/**
- * Toggle grayscale mode
- *
- * @param grayscaleMode Is grayscale mode
- */
-export function toggleGrayscaleMode(grayscaleMode = false) {
-  const GRAYSCALE_CLASS = 'grayscale';
-
-  const { add, remove } = toggleHtmlClass(GRAYSCALE_CLASS);
-
-  if (grayscaleMode) {
-    add();
-  } else {
-    remove();
+    removeDarkClass();
  }
 }

@@ -207,14 +194,13 @@ interface NaiveColorAction {
 * Get naive theme colors
 *
 * @param colors Theme colors
- * @param [recommended=false] Use recommended color. Default is `false`
 */
-function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false) {
+function getNaiveThemeColors(colors: App.Theme.ThemeColor) {
  const colorActions: NaiveColorAction[] = [
    { scene: '', handler: color => color },
    { scene: 'Suppl', handler: color => color },
-    { scene: 'Hover', handler: color => getPaletteColorByNumber(color, 500, recommended) },
-    { scene: 'Pressed', handler: color => getPaletteColorByNumber(color, 700, recommended) },
+    { scene: 'Hover', handler: color => getColorByPaletteNumber(color, 500) },
+    { scene: 'Pressed', handler: color => getColorByPaletteNumber(color, 700) },
    { scene: 'Active', handler: color => addColorAlpha(color, 0.1) }
  ];

@@ -237,14 +223,13 @@ function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false)
 * Get naive theme
 *
 * @param colors Theme colors
- * @param [recommended=false] Use recommended color. Default is `false`
 */
-export function getNaiveTheme(colors: App.Theme.ThemeColor, recommended = false) {
+export function getNaiveTheme(colors: App.Theme.ThemeColor) {
  const { primary: colorLoading } = colors;

  const theme: GlobalThemeOverrides = {
    common: {
-      ...getNaiveThemeColors(colors, recommended),
+      ...getNaiveThemeColors(colors),
      borderRadius: '6px'
    },
    LoadingBar: {
--- a/src/styles/css/global.css
+++ b/src/styles/css/global.css
@@ -11,7 +11,3 @@ body,
 html {
  overflow-x: hidden;
 }
-
-html.grayscale {
-  filter: grayscale(100%);
-}
--- a/src/theme/settings.ts
+++ b/src/theme/settings.ts
@@ -1,8 +1,6 @@
 /** Default theme settings */
 export const themeSettings: App.Theme.ThemeSetting = {
  themeScheme: 'light',
-  grayscale: false,
-  recommendColor: false,
  themeColor: '#646cff',
  otherColor: {
    info: '#2080f0',
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@@ -171,20 +171,6 @@ declare namespace Api {
     */
    type IconType = '1' | '2';

-    type MenuPropsOfRoute = Pick<
-      import('vue-router').RouteMeta,
-      | 'i18nKey'
-      | 'keepAlive'
-      | 'constant'
-      | 'order'
-      | 'href'
-      | 'hideInMenu'
-      | 'activeMenu'
-      | 'multiTab'
-      | 'fixedIndexInTab'
-      | 'query'
-    >;
-
    type Menu = Common.CommonRecord<{
      /** parent menu id */
      parentId: number;
@@ -198,16 +184,42 @@ declare namespace Api {
      routePath: string;
      /** component */
      component?: string;
+      /**
+       * i18n key
+       *
+       * it is for internationalization
+       */
+      i18nKey?: App.I18n.I18nKey;
      /** iconify icon name or local icon name */
      icon: string;
      /** icon type */
      iconType: IconType;
-      /** buttons */
-      buttons?: MenuButton[] | null;
+      /** menu order */
+      order: number;
+      /** whether to cache the route */
+      keepAlive?: boolean;
+      /** outer link */
+      href?: string;
+      /** whether to hide the route in the menu */
+      hideInMenu?: boolean;
+      /**
+       * The menu key will be activated when entering the route
+       *
+       * The route is not in the menu
+       *
+       * @example
+       *   the route is "user_detail", if it is set to "user_list", the menu "user_list" will be activated
+       */
+      activeMenu?: import('@elegant-router/types').LastLevelRouteKey;
+      /** By default, the same route path will use one tab, if set to true, it will use multiple tabs */
+      multiTab?: boolean;
+      /** If set, the route will be fixed in tabs, and the value is the order of fixed tabs */
+      fixedIndexInTab?: number;
+      /** menu buttons */
+      buttons?: MenuButton[];
      /** children menu */
-      children?: Menu[] | null;
-    }> &
-      MenuPropsOfRoute;
+      children?: Menu[];
+    }>;

    /** menu list */
    type MenuList = Common.PaginatingQueryRecord<Menu>;
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -2,7 +2,7 @@
 declare namespace App {
  /** Theme namespace */
  namespace Theme {
-    type ColorPaletteNumber = import('@sa/color').ColorPaletteNumber;
+    type ColorPaletteNumber = import('@sa/color-palette').ColorPaletteNumber;

    /** Theme token */
    type ThemeToken = {
@@ -18,10 +18,6 @@ declare namespace App {
    interface ThemeSetting {
      /** Theme scheme */
      themeScheme: UnionKey.ThemeScheme;
-      /** grayscale mode */
-      grayscale: boolean;
-      /** Whether to recommend color */
-      recommendColor: boolean;
      /** Theme color */
      themeColor: string;
      /** Other color */
@@ -158,7 +154,7 @@ declare namespace App {
      /** The menu label */
      label: string;
      /** The menu i18n key */
-      i18nKey?: I18n.I18nKey | null;
+      i18nKey?: I18n.I18nKey;
      /** The route key */
      routeKey: RouteKey;
      /** The route path */
@@ -202,7 +198,7 @@ declare namespace App {
      /** The tab route full path */
      fullPath: string;
      /** The tab fixed index */
-      fixedIndex?: number | null;
+      fixedIndex?: number;
      /**
       * Tab icon
       *
@@ -216,7 +212,7 @@ declare namespace App {
       */
      localIcon?: string;
      /** I18n key */
-      i18nKey?: I18n.I18nKey | null;
+      i18nKey?: I18n.I18nKey;
    };

    /** Form rule */
@@ -261,7 +257,6 @@ declare namespace App {
        cancel: string;
        close: string;
        check: string;
-        expandColumn: string;
        columnSetting: string;
        config: string;
        confirm: string;
@@ -303,10 +298,7 @@ declare namespace App {
      };
      theme: {
        themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
-        grayscale: string;
        layoutMode: { title: string } & Record<UnionKey.ThemeLayoutMode, string>;
-        recommendColor: string;
-        recommendColorDesc: string;
        themeColor: {
          title: string;
          followPrimary: string;
@@ -473,12 +465,6 @@ declare namespace App {
            adminVisible: string;
            adminOrUserVisible: string;
          };
-          request: {
-            repeatedErrorOccurOnce: string;
-            repeatedError: string;
-            repeatedErrorMsg1: string;
-            repeatedErrorMsg2: string;
-          };
        };
        manage: {
          common: {
@@ -538,7 +524,7 @@ declare namespace App {
            menuName: string;
            routeName: string;
            routePath: string;
-            pathParam: string;
+            routeParams: string;
            layout: string;
            page: string;
            i18nKey: string;
@@ -546,14 +532,12 @@ declare namespace App {
            localIcon: string;
            iconTypeTitle: string;
            order: string;
-            constant: string;
            keepAlive: string;
            href: string;
            hideInMenu: string;
            activeMenu: string;
            multiTab: string;
            fixedIndexInTab: string;
-            query: string;
            button: string;
            buttonCode: string;
            buttonDesc: string;
@@ -564,7 +548,6 @@ declare namespace App {
              menuName: string;
              routeName: string;
              routePath: string;
-              pathParam: string;
              layout: string;
              page: string;
              i18nKey: string;
@@ -578,8 +561,6 @@ declare namespace App {
              multiTab: string;
              fixedInTab: string;
              fixedIndexInTab: string;
-              queryKey: string;
-              queryValue: string;
              button: string;
              buttonCode: string;
              buttonDesc: string;
@@ -621,9 +602,6 @@ declare namespace App {
        pin: string;
        unpin: string;
      };
-      datatable: {
-        itemCount: string;
-      };
    };

    type GetI18nKey<T extends Record<string, unknown>, K extends keyof T = keyof T> = K extends string
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -1,10 +1,10 @@
 /* eslint-disable */
+/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}

-/* prettier-ignore */
 declare module 'vue' {
  export interface GlobalComponents {
    AppProvider: typeof import('./../components/common/app-provider.vue')['default']
@@ -19,11 +19,9 @@ declare module 'vue' {
    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
    IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
    IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
-    'IconIc:roundPlus': typeof import('~icons/ic/round-plus')['default']
    IconIcRoundDelete: typeof import('~icons/ic/round-delete')['default']
    IconIcRoundPlus: typeof import('~icons/ic/round-plus')['default']
    IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
-    IconIcRoundRemove: typeof import('~icons/ic/round-remove')['default']
    IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
    IconLocalBanner: typeof import('~icons/local/banner')['default']
    IconLocalLogo: typeof import('~icons/local/logo')['default']
@@ -51,7 +49,6 @@ declare module 'vue' {
    NDrawer: typeof import('naive-ui')['NDrawer']
    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
    NDropdown: typeof import('naive-ui')['NDropdown']
-    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
    NEmpty: typeof import('naive-ui')['NEmpty']
    NForm: typeof import('naive-ui')['NForm']
    NFormItem: typeof import('naive-ui')['NFormItem']
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -21,14 +21,6 @@ declare module "@elegant-router/types" {
    "exception_403": "/exception/403";
    "exception_404": "/exception/404";
    "exception_500": "/exception/500";
-    "document": "/document";
-    "document_project": "/document/project";
-    "document_project-link": "/document/project-link";
-    "document_vue": "/document/vue";
-    "document_vite": "/document/vite";
-    "document_unocss": "/document/unocss";
-    "document_naive": "/document/naive";
-    "document_antd": "/document/antd";
    "403": "/403";
    "404": "/404";
    "500": "/500";
@@ -44,7 +36,6 @@ declare module "@elegant-router/types" {
    "function_tab": "/function/tab";
    "function_toggle-auth": "/function/toggle-auth";
    "home": "/home";
-    "iframe-page": "/iframe-page/:url";
    "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
    "manage": "/manage";
    "manage_menu": "/manage/menu";
@@ -81,14 +72,6 @@ declare module "@elegant-router/types" {
    | "exception_403"
    | "exception_404"
    | "exception_500"
-    | "document"
-    | "document_project"
-    | "document_project-link"
-    | "document_vue"
-    | "document_vite"
-    | "document_unocss"
-    | "document_naive"
-    | "document_antd"
  >;

  /**
@@ -107,7 +90,6 @@ declare module "@elegant-router/types" {
    | "about"
    | "function"
    | "home"
-    | "iframe-page"
    | "login"
    | "manage"
    | "multi-menu"
@@ -122,7 +104,6 @@ declare module "@elegant-router/types" {
    | "root"
    | "not-found"
    | "exception"
-    | "document"
  >;

  /**
@@ -133,7 +114,6 @@ declare module "@elegant-router/types" {
    | "403"
    | "404"
    | "500"
-    | "iframe-page"
    | "login"
    | "about"
    | "function_hide-child_one"
@@ -164,13 +144,6 @@ declare module "@elegant-router/types" {
    | "exception_403"
    | "exception_404"
    | "exception_500"
-    | "document_project"
-    | "document_project-link"
-    | "document_vue"
-    | "document_vite"
-    | "document_unocss"
-    | "document_naive"
-    | "document_antd"
  >;

  /**
--- a/src/typings/env.d.ts
+++ b/src/typings/env.d.ts
@@ -101,7 +101,5 @@ declare namespace Env {
     * @link https://docs.iconify.design/api/providers.html
     */
    readonly VITE_ICONIFY_URL?: string;
-    /** Used to differentiate storage across different domains */
-    readonly VITE_STORAGE_PREFIX?: string;
  }
 }
--- a/src/typings/naive-ui.d.ts
+++ b/src/typings/naive-ui.d.ts
@@ -42,6 +42,6 @@ declare namespace NaiveUI {

  type NaiveTableConfig<A extends TableApiFn> = Pick<
    import('@sa/hooks').TableConfig<A, GetTableData<A>, TableColumn<TableDataWithIndex<GetTableData<A>>>>,
-    'apiFn' | 'apiParams' | 'columns' | 'immediate' | 'showTotal'
+    'apiFn' | 'apiParams' | 'columns' | 'immediate'
  >;
 }
--- a/src/typings/router.d.ts
+++ b/src/typings/router.d.ts
@@ -13,23 +13,21 @@ declare module 'vue-router' {
     *
     * It's used in i18n, if it is set, the title will be ignored
     */
-    i18nKey?: App.I18n.I18nKey | null;
+    i18nKey?: App.I18n.I18nKey;
    /**
     * Roles of the route
     *
     * Route can be accessed if the current user has at least one of the roles
-     *
-     * It only works when the route mode is "static", if the route mode is "dynamic", it will be ignored
     */
    roles?: string[];
    /** Whether to cache the route */
-    keepAlive?: boolean | null;
+    keepAlive?: boolean;
    /**
     * Is constant route
     *
     * Does not need to login, and the route is defined in the front-end
     */
-    constant?: boolean | null;
+    constant?: boolean;
    /**
     * Iconify icon
     *
@@ -43,11 +41,11 @@ declare module 'vue-router' {
     */
    localIcon?: string;
    /** Router order */
-    order?: number | null;
+    order?: number;
    /** The outer link of the route */
-    href?: string | null;
+    href?: string;
    /** Whether to hide the route in the menu */
-    hideInMenu?: boolean | null;
+    hideInMenu?: boolean;
    /**
     * The menu key will be activated when entering the route
     *
@@ -56,12 +54,12 @@ declare module 'vue-router' {
     * @example
     *   the route is "user_detail", if it is set to "user_list", the menu "user_list" will be activated
     */
-    activeMenu?: import('@elegant-router/types').RouteKey | null;
+    activeMenu?: import('@elegant-router/types').RouteKey;
    /** By default, the same route path will use one tab, if set to true, it will use multiple tabs */
-    multiTab?: boolean | null;
+    multiTab?: boolean;
    /** If set, the route will be fixed in tabs, and the value is the order of fixed tabs */
-    fixedIndexInTab?: number | null;
+    fixedIndexInTab?: number;
    /** if set query parameters, it will be automatically carried when entering the route */
-    query?: { key: string; value: string }[] | null;
+    query?: Record<string, string>;
  }
 }
--- a/src/typings/storage.d.ts
+++ b/src/typings/storage.d.ts
@@ -32,10 +32,5 @@ declare namespace StorageType {
    overrideThemeFlag: string;
    /** The global tabs */
    globalTabs: App.Global.Tab[];
-    /** The backup theme setting before is mobile */
-    backupThemeSettingBeforeIsMobile: {
-      layout: UnionKey.ThemeLayoutMode;
-      siderCollapse: boolean;
-    };
  }
 }
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -36,23 +36,3 @@ export function translateOptions(options: CommonType.Option<string>[]) {
    label: $t(option.label as App.I18n.I18nKey)
  }));
 }
-
-/**
- * Toggle html class
- *
- * @param className
- */
-export function toggleHtmlClass(className: string) {
-  function add() {
-    document.documentElement.classList.add(className);
-  }
-
-  function remove() {
-    document.documentElement.classList.remove(className);
-  }
-
-  return {
-    add,
-    remove
-  };
-}
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@@ -1,9 +1,7 @@
 import { createLocalforage, createStorage } from '@sa/utils';

-const storagePrefix = import.meta.env.VITE_STORAGE_PREFIX || '';
+export const localStg = createStorage<StorageType.Local>('local');

-export const localStg = createStorage<StorageType.Local>('local', storagePrefix);
-
-export const sessionStg = createStorage<StorageType.Session>('session', storagePrefix);
+export const sessionStg = createStorage<StorageType.Session>('session');

 export const localforage = createLocalforage<StorageType.Local>('local');
--- a/src/views/_builtin/iframe-page/[url].vue
+++ b/src/views/_builtin/iframe-page/[url].vue
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { onActivated, onMounted } from 'vue';
-
-interface Props {
-  url: string;
-}
-
-defineProps<Props>();
-
-onMounted(() => {
-  console.log('mounted');
-});
-
-onActivated(() => {
-  console.log('activated');
-});
-</script>
-
-<template>
-  <div class="h-full">
-    <iframe id="iframePage" class="size-full" :src="url"></iframe>
-  </div>
-</template>
-
-<style scoped></style>
--- a/src/views/_builtin/login/index.vue
+++ b/src/views/_builtin/login/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { getPaletteColorByNumber, mixColor } from '@sa/color';
+import { getColorPalette, mixColor } from '@sa/utils';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
@@ -38,7 +38,7 @@ const moduleMap: Record<UnionKey.LoginModule, LoginModule> = {
 const activeModule = computed(() => moduleMap[props.module || 'pwd-login']);

 const bgThemeColor = computed(() =>
-  themeStore.darkMode ? getPaletteColorByNumber(themeStore.themeColor, 600) : themeStore.themeColor
+  themeStore.darkMode ? getColorPalette(themeStore.themeColor, 7) : themeStore.themeColor
 );

 const bgColor = computed(() => {
--- a/src/views/function/request/index.vue
+++ b/src/views/function/request/index.vue
@@ -13,25 +13,6 @@ async function logoutWithModal() {
 async function refreshToken() {
  await fetchCustomBackendError('9999', $t('request.tokenExpired'));
 }
-
-async function handleRepeatedMessageError() {
-  await Promise.all([
-    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
-    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
-    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
-    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
-    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
-    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2'))
-  ]);
-}
-
-async function handleRepeatedModalError() {
-  await Promise.all([
-    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
-    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
-    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'))
-  ]);
-}
 </script>

 <template>
@@ -45,18 +26,6 @@ async function handleRepeatedModalError() {
    <NCard :title="$t('request.refreshToken')" :bordered="false" size="small" segmented class="card-wrapper">
      <NButton @click="refreshToken">{{ $t('common.trigger') }}</NButton>
    </NCard>
-    <NCard
-      :title="$t('page.function.request.repeatedErrorOccurOnce')"
-      :bordered="false"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
-      <NButton @click="handleRepeatedMessageError">{{ $t('page.function.request.repeatedError') }}(Message)</NButton>
-      <NButton class="ml-12px" @click="handleRepeatedModalError">
-        {{ $t('page.function.request.repeatedError') }}(Modal)
-      </NButton>
-    </NCard>
  </NSpace>
 </template>

--- a/src/views/manage/menu/index.vue
+++ b/src/views/manage/menu/index.vue
@@ -10,11 +10,11 @@ import { $t } from '@/locales';
 import { yesOrNoRecord } from '@/constants/common';
 import { enableStatusRecord, menuTypeRecord } from '@/constants/business';
 import SvgIcon from '@/components/custom/svg-icon.vue';
-import MenuOperateModal, { type OperateType } from './modules/menu-operate-modal.vue';
+import MenuOperateDrawer, { type OperateType } from './modules/menu-operate-drawer.vue';

 const appStore = useAppStore();

-const { bool: visible, setTrue: openModal } = useBoolean();
+const { bool: drawerVisible, setTrue: openDrawer, setFalse: _closeDrawer } = useBoolean();

 const wrapperRef = ref<HTMLElement | null>(null);

@@ -176,7 +176,7 @@ const operateType = ref<OperateType>('add');

 function handleAdd() {
  operateType.value = 'add';
-  openModal();
+  openDrawer();
 }

 async function handleBatchDelete() {
@@ -200,7 +200,7 @@ function handleEdit(item: Api.SystemManage.Menu) {
  operateType.value = 'edit';
  editingData.value = { ...item };

-  openModal();
+  openDrawer();
 }

 function handleAddChildMenu(item: Api.SystemManage.Menu) {
@@ -208,7 +208,7 @@ function handleAddChildMenu(item: Api.SystemManage.Menu) {

  editingData.value = { ...item };

-  openModal();
+  openDrawer();
 }

 const allPages = ref<string[]>([]);
@@ -252,8 +252,8 @@ init();
        :pagination="pagination"
        class="sm:h-full"
      />
-      <MenuOperateModal
-        v-model:visible="visible"
+      <MenuOperateDrawer
+        v-model:visible="drawerVisible"
        :operate-type="operateType"
        :row-data="editingData"
        :all-pages="allPages"
--- a/src/views/manage/menu/modules/menu-operate-drawer.vue
+++ b/src/views/manage/menu/modules/menu-operate-drawer.vue
@@ -0,0 +1,258 @@
+<script setup lang="tsx">
+import { computed, reactive, watch } from 'vue';
+import type { SelectOption } from 'naive-ui';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+import { getLocalIcons } from '@/utils/icon';
+import { getLayoutAndPage, transformLayoutAndPageToComponent } from './shared';
+
+defineOptions({
+  name: 'MenuOperateDrawer'
+});
+
+export type OperateType = NaiveUI.TableOperateType | 'addChild';
+
+interface Props {
+  /** the type of operation */
+  operateType: OperateType;
+  /** the edit menu data or the parent menu data when adding a child menu */
+  rowData?: Api.SystemManage.Menu | null;
+  /** all pages */
+  allPages: string[];
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<OperateType, string> = {
+    add: $t('page.manage.menu.addMenu'),
+    addChild: $t('page.manage.menu.addChildMenu'),
+    edit: $t('page.manage.menu.editMenu')
+  };
+  return titles[props.operateType];
+});
+
+type Model = Pick<
+  Api.SystemManage.Menu,
+  | 'menuType'
+  | 'menuName'
+  | 'icon'
+  | 'iconType'
+  | 'routeName'
+  | 'routePath'
+  | 'component'
+  | 'status'
+  | 'hideInMenu'
+  | 'order'
+  | 'parentId'
+> & {
+  layout: string;
+  page: string;
+};
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    menuType: '1',
+    menuName: '',
+    icon: '',
+    iconType: '1',
+    routeName: '',
+    routePath: '',
+    layout: '',
+    page: '',
+    status: null,
+    hideInMenu: false,
+    order: 0,
+    parentId: 0
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'menuName' | 'status' | 'routeName' | 'routePath'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  menuName: defaultRequiredRule,
+  status: defaultRequiredRule,
+  routeName: defaultRequiredRule,
+  routePath: defaultRequiredRule
+};
+
+const disabledMenuType = computed(() => props.operateType === 'edit');
+
+const localIcons = getLocalIcons();
+const localIconOptions = localIcons.map<SelectOption>(item => ({
+  label: () => (
+    <div class="flex-y-center gap-16px">
+      <SvgIcon localIcon={item} class="text-icon" />
+      <span>{item}</span>
+    </div>
+  ),
+  value: item
+}));
+
+const showLayout = computed(() => model.parentId === 0);
+
+const showPage = computed(() => model.menuType === '2');
+
+const pageOptions = computed(() => {
+  const allPages = [...props.allPages];
+
+  if (model.routeName && !allPages.includes(model.routeName)) {
+    allPages.unshift(model.routeName);
+  }
+
+  const opts: CommonType.Option[] = allPages.map(page => ({
+    label: page,
+    value: page
+  }));
+
+  return opts;
+});
+
+const layoutOptions: CommonType.Option[] = [
+  {
+    label: 'base',
+    value: 'base'
+  },
+  {
+    label: 'blank',
+    value: 'blank'
+  }
+];
+
+function handleUpdateModel() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+
+    return;
+  }
+
+  if (props.operateType === 'addChild' && props.rowData) {
+    const { id } = props.rowData;
+
+    Object.assign(model, createDefaultModel(), { parentId: id });
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    const { component, ...rest } = props.rowData;
+
+    const { layout, page } = getLayoutAndPage(component);
+
+    Object.assign(model, rest, { layout, page });
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+
+  model.component = transformLayoutAndPageToComponent(model.layout, model.page);
+
+  // request
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModel();
+    restoreValidation();
+  }
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" display-directive="show" :width="360">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
+        <NFormItem :label="$t('page.manage.menu.menuType')" path="menuType">
+          <NRadioGroup v-model:value="model.menuType" :disabled="disabledMenuType">
+            <NRadio v-for="item in menuTypeOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.menuName')" path="menuName">
+          <NInput v-model:value="model.menuName" :placeholder="$t('page.manage.menu.form.menuName')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.iconTypeTitle')" path="iconType">
+          <NRadioGroup v-model:value="model.iconType">
+            <NRadio v-for="item in menuIconTypeOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.icon')" path="icon">
+          <template v-if="model.iconType === '1'">
+            <NInput v-model:value="model.icon" :placeholder="$t('page.manage.menu.form.icon')" class="flex-1">
+              <template #suffix>
+                <SvgIcon v-if="model.icon" :icon="model.icon" class="text-icon" />
+              </template>
+            </NInput>
+          </template>
+          <template v-if="model.iconType === '2'">
+            <NSelect
+              v-model:value="model.icon"
+              :placeholder="$t('page.manage.menu.form.localIcon')"
+              :options="localIconOptions"
+            />
+          </template>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.routeName')" path="routeName">
+          <NInput v-model:value="model.routeName" :placeholder="$t('page.manage.menu.form.routeName')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.routePath')" path="routePath">
+          <NInput v-model:value="model.routePath" :placeholder="$t('page.manage.menu.form.routePath')" />
+        </NFormItem>
+        <NFormItem v-if="showLayout" :label="$t('page.manage.menu.layout')" path="layout">
+          <NSelect
+            v-model:value="model.layout"
+            :options="layoutOptions"
+            :placeholder="$t('page.manage.menu.form.layout')"
+          />
+        </NFormItem>
+        <NFormItem v-if="showPage" :label="$t('page.manage.menu.page')" path="page">
+          <NSelect v-model:value="model.page" :options="pageOptions" :placeholder="$t('page.manage.menu.form.page')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.menuStatus')" path="status">
+          <NRadioGroup v-model:value="model.status">
+            <NRadio v-for="item in enableStatusOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.hideInMenu')" path="hideInMenu">
+          <NRadioGroup v-model:value="model.hideInMenu">
+            <NRadio value :label="$t('common.yesOrNo.yes')" />
+            <NRadio :value="false" :label="$t('common.yesOrNo.no')" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.order')" path="order">
+          <NInputNumber v-model:value="model.order" :placeholder="$t('page.manage.menu.form.order')" />
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>
--- a/src/views/manage/menu/modules/menu-operate-modal.vue
+++ b/src/views/manage/menu/modules/menu-operate-modal.vue
@@ -1,468 +0,0 @@
-<script setup lang="tsx">
-import { computed, reactive, ref, watch } from 'vue';
-import type { SelectOption } from 'naive-ui';
-import { useFormRules, useNaiveForm } from '@/hooks/common/form';
-import { $t } from '@/locales';
-import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
-import SvgIcon from '@/components/custom/svg-icon.vue';
-import { getLocalIcons } from '@/utils/icon';
-import { fetchGetAllRoles } from '@/service/api';
-import {
-  getLayoutAndPage,
-  getPathParamFromRoutePath,
-  getRoutePathByRouteName,
-  getRoutePathWithParam,
-  transformLayoutAndPageToComponent
-} from './shared';
-
-defineOptions({
-  name: 'MenuOperateModal'
-});
-
-export type OperateType = NaiveUI.TableOperateType | 'addChild';
-
-interface Props {
-  /** the type of operation */
-  operateType: OperateType;
-  /** the edit menu data or the parent menu data when adding a child menu */
-  rowData?: Api.SystemManage.Menu | null;
-  /** all pages */
-  allPages: string[];
-}
-
-const props = defineProps<Props>();
-
-interface Emits {
-  (e: 'submitted'): void;
-}
-
-const emit = defineEmits<Emits>();
-
-const visible = defineModel<boolean>('visible', {
-  default: false
-});
-
-const { formRef, validate, restoreValidation } = useNaiveForm();
-const { defaultRequiredRule } = useFormRules();
-
-const title = computed(() => {
-  const titles: Record<OperateType, string> = {
-    add: $t('page.manage.menu.addMenu'),
-    addChild: $t('page.manage.menu.addChildMenu'),
-    edit: $t('page.manage.menu.editMenu')
-  };
-  return titles[props.operateType];
-});
-
-type Model = Pick<
-  Api.SystemManage.Menu,
-  | 'menuType'
-  | 'menuName'
-  | 'routeName'
-  | 'routePath'
-  | 'component'
-  | 'order'
-  | 'i18nKey'
-  | 'icon'
-  | 'iconType'
-  | 'status'
-  | 'parentId'
-  | 'keepAlive'
-  | 'constant'
-  | 'href'
-  | 'hideInMenu'
-  | 'activeMenu'
-  | 'multiTab'
-  | 'fixedIndexInTab'
-> & {
-  query: NonNullable<Api.SystemManage.Menu['query']>;
-  buttons: NonNullable<Api.SystemManage.Menu['buttons']>;
-  layout: string;
-  page: string;
-  pathParam: string;
-};
-
-const model: Model = reactive(createDefaultModel());
-
-function createDefaultModel(): Model {
-  return {
-    menuType: '1',
-    menuName: '',
-    routeName: '',
-    routePath: '',
-    pathParam: '',
-    component: '',
-    layout: '',
-    page: '',
-    i18nKey: null,
-    icon: '',
-    iconType: '1',
-    parentId: 0,
-    status: '1',
-    keepAlive: false,
-    constant: false,
-    order: 0,
-    href: null,
-    hideInMenu: false,
-    activeMenu: null,
-    multiTab: false,
-    fixedIndexInTab: null,
-    query: [],
-    buttons: []
-  };
-}
-
-type RuleKey = Extract<keyof Model, 'menuName' | 'status' | 'routeName' | 'routePath'>;
-
-const rules: Record<RuleKey, App.Global.FormRule> = {
-  menuName: defaultRequiredRule,
-  status: defaultRequiredRule,
-  routeName: defaultRequiredRule,
-  routePath: defaultRequiredRule
-};
-
-const disabledMenuType = computed(() => props.operateType === 'edit');
-
-const localIcons = getLocalIcons();
-const localIconOptions = localIcons.map<SelectOption>(item => ({
-  label: () => (
-    <div class="flex-y-center gap-16px">
-      <SvgIcon localIcon={item} class="text-icon" />
-      <span>{item}</span>
-    </div>
-  ),
-  value: item
-}));
-
-const showLayout = computed(() => model.parentId === 0);
-
-const showPage = computed(() => model.menuType === '2');
-
-const pageOptions = computed(() => {
-  const allPages = [...props.allPages];
-
-  if (model.routeName && !allPages.includes(model.routeName)) {
-    allPages.unshift(model.routeName);
-  }
-
-  const opts: CommonType.Option[] = allPages.map(page => ({
-    label: page,
-    value: page
-  }));
-
-  return opts;
-});
-
-const layoutOptions: CommonType.Option[] = [
-  {
-    label: 'base',
-    value: 'base'
-  },
-  {
-    label: 'blank',
-    value: 'blank'
-  }
-];
-
-/** the enabled role options */
-const roleOptions = ref<CommonType.Option<string>[]>([]);
-
-async function getRoleOptions() {
-  const { error, data } = await fetchGetAllRoles();
-
-  if (!error) {
-    const options = data.map(item => ({
-      label: item.roleName,
-      value: item.roleCode
-    }));
-
-    roleOptions.value = [...options];
-  }
-}
-
-function handleInitModel() {
-  Object.assign(model, createDefaultModel());
-
-  if (!props.rowData) return;
-
-  if (props.operateType === 'addChild') {
-    const { id } = props.rowData;
-
-    Object.assign(model, { parentId: id });
-  }
-
-  if (props.operateType === 'edit') {
-    const { component, ...rest } = props.rowData;
-
-    const { layout, page } = getLayoutAndPage(component);
-    const { path, param } = getPathParamFromRoutePath(rest.routePath);
-
-    Object.assign(model, rest, { layout, page, routePath: path, pathParam: param });
-  }
-
-  if (!model.query) {
-    model.query = [];
-  }
-  if (!model.buttons) {
-    model.buttons = [];
-  }
-}
-
-function closeDrawer() {
-  visible.value = false;
-}
-
-function handleUpdateRoutePathByRouteName() {
-  if (model.routeName) {
-    model.routePath = getRoutePathByRouteName(model.routeName);
-  } else {
-    model.routePath = '';
-  }
-}
-
-function handleUpdateI18nKeyByRouteName() {
-  if (model.routeName) {
-    model.i18nKey = `route.${model.routeName}` as App.I18n.I18nKey;
-  } else {
-    model.i18nKey = null;
-  }
-}
-
-function handleCreateButton() {
-  const buttonItem: Api.SystemManage.MenuButton = {
-    code: '',
-    desc: ''
-  };
-
-  return buttonItem;
-}
-
-function getSubmitParams() {
-  const { layout, page, pathParam, ...params } = model;
-
-  const component = transformLayoutAndPageToComponent(layout, page);
-  const routePath = getRoutePathWithParam(model.routePath, pathParam);
-
-  params.component = component;
-  params.routePath = routePath;
-
-  return params;
-}
-
-async function handleSubmit() {
-  await validate();
-
-  const params = getSubmitParams();
-
-  console.log('params: ', params);
-
-  // request
-  window.$message?.success($t('common.updateSuccess'));
-  closeDrawer();
-  emit('submitted');
-}
-
-watch(visible, () => {
-  if (visible.value) {
-    handleInitModel();
-    restoreValidation();
-    getRoleOptions();
-  }
-});
-
-watch(
-  () => model.routeName,
-  () => {
-    handleUpdateRoutePathByRouteName();
-    handleUpdateI18nKeyByRouteName();
-  }
-);
-</script>
-
-<template>
-  <NModal v-model:show="visible" :title="title" preset="card" class="w-800px">
-    <NScrollbar class="h-480px pr-20px">
-      <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="100">
-        <NGrid responsive="screen" item-responsive>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.menuType')" path="menuType">
-            <NRadioGroup v-model:value="model.menuType" :disabled="disabledMenuType">
-              <NRadio v-for="item in menuTypeOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
-            </NRadioGroup>
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.menuName')" path="menuName">
-            <NInput v-model:value="model.menuName" :placeholder="$t('page.manage.menu.form.menuName')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.routeName')" path="routeName">
-            <NInput v-model:value="model.routeName" :placeholder="$t('page.manage.menu.form.routeName')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.routePath')" path="routePath">
-            <NInput v-model:value="model.routePath" disabled :placeholder="$t('page.manage.menu.form.routePath')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.pathParam')" path="pathParam">
-            <NInput v-model:value="model.pathParam" :placeholder="$t('page.manage.menu.form.pathParam')" />
-          </NFormItemGi>
-          <NFormItemGi v-if="showLayout" span="24 m:12" :label="$t('page.manage.menu.layout')" path="layout">
-            <NSelect
-              v-model:value="model.layout"
-              :options="layoutOptions"
-              :placeholder="$t('page.manage.menu.form.layout')"
-            />
-          </NFormItemGi>
-          <NFormItemGi v-if="showPage" span="24 m:12" :label="$t('page.manage.menu.page')" path="page">
-            <NSelect
-              v-model:value="model.page"
-              :options="pageOptions"
-              :placeholder="$t('page.manage.menu.form.page')"
-            />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.i18nKey')" path="i18nKey">
-            <NInput v-model:value="model.i18nKey" :placeholder="$t('page.manage.menu.form.i18nKey')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.order')" path="order">
-            <NInputNumber v-model:value="model.order" class="w-full" :placeholder="$t('page.manage.menu.form.order')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.iconTypeTitle')" path="iconType">
-            <NRadioGroup v-model:value="model.iconType">
-              <NRadio
-                v-for="item in menuIconTypeOptions"
-                :key="item.value"
-                :value="item.value"
-                :label="$t(item.label)"
-              />
-            </NRadioGroup>
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.icon')" path="icon">
-            <template v-if="model.iconType === '1'">
-              <NInput v-model:value="model.icon" :placeholder="$t('page.manage.menu.form.icon')" class="flex-1">
-                <template #suffix>
-                  <SvgIcon v-if="model.icon" :icon="model.icon" class="text-icon" />
-                </template>
-              </NInput>
-            </template>
-            <template v-if="model.iconType === '2'">
-              <NSelect
-                v-model:value="model.icon"
-                :placeholder="$t('page.manage.menu.form.localIcon')"
-                :options="localIconOptions"
-              />
-            </template>
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.menuStatus')" path="status">
-            <NRadioGroup v-model:value="model.status">
-              <NRadio
-                v-for="item in enableStatusOptions"
-                :key="item.value"
-                :value="item.value"
-                :label="$t(item.label)"
-              />
-            </NRadioGroup>
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.keepAlive')" path="keepAlive">
-            <NRadioGroup v-model:value="model.keepAlive">
-              <NRadio value :label="$t('common.yesOrNo.yes')" />
-              <NRadio :value="false" :label="$t('common.yesOrNo.no')" />
-            </NRadioGroup>
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.constant')" path="constant">
-            <NRadioGroup v-model:value="model.constant">
-              <NRadio value :label="$t('common.yesOrNo.yes')" />
-              <NRadio :value="false" :label="$t('common.yesOrNo.no')" />
-            </NRadioGroup>
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.href')" path="href">
-            <NInput v-model:value="model.href" :placeholder="$t('page.manage.menu.form.href')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.hideInMenu')" path="hideInMenu">
-            <NRadioGroup v-model:value="model.hideInMenu">
-              <!-- eslint-disable-next-line vue/prefer-true-attribute-shorthand -->
-              <NRadio :value="true" :label="$t('common.yesOrNo.yes')" />
-              <NRadio :value="false" :label="$t('common.yesOrNo.no')" />
-            </NRadioGroup>
-          </NFormItemGi>
-          <NFormItemGi
-            v-if="model.hideInMenu"
-            span="24 m:12"
-            :label="$t('page.manage.menu.activeMenu')"
-            path="activeMenu"
-          >
-            <NSelect
-              v-model:value="model.activeMenu"
-              :options="pageOptions"
-              clearable
-              :placeholder="$t('page.manage.menu.form.activeMenu')"
-            />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.multiTab')" path="multiTab">
-            <NRadioGroup v-model:value="model.multiTab">
-              <NRadio value :label="$t('common.yesOrNo.yes')" />
-              <NRadio :value="false" :label="$t('common.yesOrNo.no')" />
-            </NRadioGroup>
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.fixedIndexInTab')" path="fixedIndexInTab">
-            <NInputNumber
-              v-model:value="model.fixedIndexInTab"
-              class="w-full"
-              clearable
-              :placeholder="$t('page.manage.menu.form.fixedIndexInTab')"
-            />
-          </NFormItemGi>
-          <NFormItemGi span="24" :label="$t('page.manage.menu.query')">
-            <NDynamicInput
-              v-model:value="model.query"
-              preset="pair"
-              :key-placeholder="$t('page.manage.menu.form.queryKey')"
-              :value-placeholder="$t('page.manage.menu.form.queryValue')"
-            >
-              <template #action="{ index, create, remove }">
-                <NSpace class="ml-12px">
-                  <NButton size="medium" @click="() => create(index)">
-                    <icon-ic:round-plus class="text-icon" />
-                  </NButton>
-                  <NButton size="medium" @click="() => remove(index)">
-                    <icon-ic-round-remove class="text-icon" />
-                  </NButton>
-                </NSpace>
-              </template>
-            </NDynamicInput>
-          </NFormItemGi>
-          <NFormItemGi span="24" :label="$t('page.manage.menu.button')">
-            <NDynamicInput v-model:value="model.buttons" :on-create="handleCreateButton">
-              <template #default="{ value }">
-                <div class="ml-8px flex-y-center flex-1 gap-12px">
-                  <NInput
-                    v-model:value="value.code"
-                    :placeholder="$t('page.manage.menu.form.buttonCode')"
-                    class="flex-1"
-                  />
-                  <NInput
-                    v-model:value="value.desc"
-                    :placeholder="$t('page.manage.menu.form.buttonDesc')"
-                    class="flex-1"
-                  />
-                </div>
-              </template>
-              <template #action="{ index, create, remove }">
-                <NSpace class="ml-12px">
-                  <NButton size="medium" @click="() => create(index)">
-                    <icon-ic:round-plus class="text-icon" />
-                  </NButton>
-                  <NButton size="medium" @click="() => remove(index)">
-                    <icon-ic-round-remove class="text-icon" />
-                  </NButton>
-                </NSpace>
-              </template>
-            </NDynamicInput>
-          </NFormItemGi>
-        </NGrid>
-      </NForm>
-    </NScrollbar>
-    <template #footer>
-      <NSpace justify="end" :size="16">
-        <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
-        <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
-      </NSpace>
-    </template>
-  </NModal>
-</template>
-
-<style scoped></style>
--- a/src/views/manage/menu/modules/shared.ts
+++ b/src/views/manage/menu/modules/shared.ts
@@ -40,40 +40,3 @@ export function transformLayoutAndPageToComponent(layout: string, page: string)

  return '';
 }
-
-/**
- * Get route name by route path
- *
- * @param routeName
- */
-export function getRoutePathByRouteName(routeName: string) {
-  return `/${routeName.replace(/_/g, '/')}`;
-}
-
-/**
- * Get path param from route path
- *
- * @param routePath route path
- */
-export function getPathParamFromRoutePath(routePath: string) {
-  const [path, param = ''] = routePath.split('/:');
-
-  return {
-    path,
-    param
-  };
-}
-
-/**
- * Get route path with param
- *
- * @param routePath route path
- * @param param path param
- */
-export function getRoutePathWithParam(routePath: string, param: string) {
-  if (param.trim()) {
-    return `${routePath}/:${param}`;
-  }
-
-  return routePath;
-}
--- a/src/views/manage/role/modules/role-operate-drawer.vue
+++ b/src/views/manage/role/modules/role-operate-drawer.vue
@@ -68,8 +68,11 @@ const roleId = computed(() => props.rowData?.id || -1);

 const isEdit = computed(() => props.operateType === 'edit');

-function handleInitModel() {
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
    Object.assign(model, createDefaultModel());
+    return;
+  }

  if (props.operateType === 'edit' && props.rowData) {
    Object.assign(model, props.rowData);
@@ -90,7 +93,7 @@ async function handleSubmit() {

 watch(visible, () => {
  if (visible.value) {
-    handleInitModel();
+    handleUpdateModelWhenEdit();
    restoreValidation();
  }
 });
--- a/src/views/manage/user/index.vue
+++ b/src/views/manage/user/index.vue
@@ -12,7 +12,6 @@ const appStore = useAppStore();

 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: fetchGetUserList,
-  showTotal: true,
  apiParams: {
    current: 1,
    size: 10,
--- a/src/views/manage/user/modules/user-operate-drawer.vue
+++ b/src/views/manage/user/modules/user-operate-drawer.vue
@@ -89,8 +89,11 @@ async function getRoleOptions() {
  }
 }

-function handleInitModel() {
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
    Object.assign(model, createDefaultModel());
+    return;
+  }

  if (props.operateType === 'edit' && props.rowData) {
    Object.assign(model, props.rowData);
@@ -111,7 +114,7 @@ async function handleSubmit() {

 watch(visible, () => {
  if (visible.value) {
-    handleInitModel();
+    handleUpdateModelWhenEdit();
    restoreValidation();
    getRoleOptions();
  }