chore(projects): release v1.1.0

docs(projects): update CHANGELOG
chore(projects): release v1.1.0-beta.2
2025-10-12 04:43:42 +08:00 · 2024-05-07 18:21:50 +08:00 · 2024-05-07 15:14:27 +08:00 · 2024-05-07 15:11:16 +08:00 · 2024-05-07 15:08:30 +08:00 · 2024-05-07 14:58:09 +08:00
74 changed files with 2079 additions and 1575 deletions
--- a/.env
+++ b/.env
@@ -43,3 +43,6 @@ 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,3 +1,4 @@
 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,7 +13,6 @@
  "i18n-ally.keystyle": "nested",
  "i18n-ally.localesPaths": ["src/locales/langs"],
  "prettier.enable": false,
-  "unocss.root": ["./"],
  "typescript.tsdk": "node_modules/typescript/lib",
-  "vue.server.hybridMode": true
+  "unocss.root": ["./"]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,152 @@
 # 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
@@ -107,7 +253,7 @@

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

- **hooks**: refactor @sa/color-palette &nbsp;-&nbsp; by @honghuangdc [<samp>(93191)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9319173)
+- **hooks**: refactor @sa/color &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
@@ -0,0 +1,66 @@
+# 更新日志
+
+## [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,6 +106,15 @@ 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,6 +105,15 @@ 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) 来分享。
@@ -126,6 +135,7 @@ pnpm build

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

+
 ## 贡献者

 感谢以下贡献者的贡献。如果您想为本项目做出贡献，请参考 [如何贡献](#如何贡献)。
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "soybean-admin",
  "type": "module",
-  "version": "1.0.8",
+  "version": "1.1.0",
  "description": "A fresh and elegant admin template, based on Vue3、Vite3、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite3、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
  "author": {
    "name": "Soybean",
@@ -49,31 +49,31 @@
    "@better-scroll/core": "2.5.1",
    "@iconify/vue": "4.1.2",
    "@sa/axios": "workspace:*",
-    "@sa/color-palette": "workspace:*",
+    "@sa/color": "workspace:*",
    "@sa/hooks": "workspace:*",
    "@sa/materials": "workspace:*",
    "@sa/utils": "workspace:*",
    "@vueuse/core": "10.9.0",
    "clipboard": "2.0.11",
-    "dayjs": "1.11.10",
+    "dayjs": "1.11.11",
    "echarts": "5.5.0",
    "lodash-es": "4.17.21",
-    "naive-ui": "2.38.1",
+    "naive-ui": "2.38.2",
    "nprogress": "0.2.0",
    "pinia": "2.1.7",
-    "vue": "3.4.25",
+    "vue": "3.4.26",
    "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.204",
+    "@iconify/json": "2.2.207",
    "@sa/scripts": "workspace:*",
    "@sa/uno-preset": "workspace:*",
-    "@soybeanjs/eslint-config": "1.3.2",
+    "@soybeanjs/eslint-config": "1.3.4",
    "@types/lodash-es": "4.17.12",
-    "@types/node": "20.12.7",
+    "@types/node": "20.12.10",
    "@types/nprogress": "0.2.3",
    "@unocss/eslint-config": "0.59.4",
    "@unocss/preset-icons": "0.59.4",
@@ -83,21 +83,21 @@
    "@unocss/vite": "0.59.4",
    "@vitejs/plugin-vue": "5.0.4",
    "@vitejs/plugin-vue-jsx": "3.1.0",
-    "eslint": "9.1.1",
+    "eslint": "9.2.0",
    "eslint-plugin-vue": "9.25.0",
    "lint-staged": "15.2.2",
-    "sass": "1.75.0",
+    "sass": "1.76.0",
    "simple-git-hooks": "2.11.1",
-    "tsx": "4.7.3",
+    "tsx": "4.9.3",
    "typescript": "5.4.5",
-    "unplugin-icons": "0.18.5",
-    "unplugin-vue-components": "0.26.0",
-    "vite": "5.2.10",
+    "unplugin-icons": "0.19.0",
+    "unplugin-vue-components": "0.27.0",
+    "vite": "5.2.11",
    "vite-plugin-progress": "0.0.7",
    "vite-plugin-svg-icons": "2.0.1",
-    "vite-plugin-vue-devtools": "7.1.2",
+    "vite-plugin-vue-devtools": "7.1.3",
    "vue-eslint-parser": "9.4.2",
-    "vue-tsc": "2.0.14"
+    "vue-tsc": "2.0.16"
  },
  "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.0.8",
+  "version": "1.1.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/color-palette/src/index.ts
+++ b/packages/color-palette/src/index.ts
@@ -1,6 +0,0 @@
-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/shared/colord.ts
+++ b/packages/color-palette/src/shared/colord.ts
@@ -1,29 +0,0 @@
-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/package.json
+++ b/packages/color-palette/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@sa/color-palette",
-  "version": "1.0.8",
+  "name": "@sa/color",
+  "version": "1.1.0",
  "exports": {
    ".": "./src/index.ts"
  },
@@ -10,6 +10,7 @@
    }
  },
  "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/src/index.ts
+++ b/packages/color/src/index.ts
@@ -0,0 +1,7 @@
+import { colorPalettes } from './constant';
+
+export * from './palette';
+export * from './shared';
+export { colorPalettes };
+
+export * from './types';
--- a/packages/color/src/palette/antd.ts
+++ b/packages/color/src/palette/antd.ts
@@ -1,74 +1,6 @@
-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();
-}
+import type { AnyColor, HsvColor } from 'colord';
+import { getHex, getHsv, isValidColor, mixColor } from '../shared';
+import type { ColorIndex } from '../types';

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

 /**
- * 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)
+ * Get AntD palette color by index
 *
 * @param color - Color
 * @param index - The color index of color palette (the main color index is 6)
 * @returns Hex color
 */
-export function getColorPalette(color: AnyColor, index: ColorIndex): string {
-  const transformColor = colord(color);
-
-  if (!transformColor.isValid()) {
+export function getAntDPaletteColorByIndex(color: AnyColor, index: ColorIndex): string {
+  if (!isValidColor(color)) {
    throw new Error('invalid input color value');
  }

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

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

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

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

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

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

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

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

      return darkColor;
    });

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

  return patterns;
--- a/packages/color/src/palette/index.ts
+++ b/packages/color/src/palette/index.ts
@@ -0,0 +1,45 @@
+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-palette/src/palette/index.ts
+++ b/packages/color-palette/src/palette/index.ts
@@ -9,12 +9,12 @@ import type {
 } from '../types';

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

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

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

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

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

@@ -54,7 +54,7 @@ export function getColorByPaletteNumber(color: string, number: ColorPaletteNumbe
 *
 * @param color the provided color
 */
-export function getColorPaletteFamily(color: string) {
+export function getRecommendedColorPaletteFamily(color: string) {
  if (!isValidColor(color)) {
    throw new Error('Invalid color, please check color value!');
  }
--- a/packages/color/src/shared/colord.ts
+++ b/packages/color/src/shared/colord.ts
@@ -0,0 +1,93 @@
+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/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,4 +1,8 @@
-/** the color palette number */
+/**
+ * the color palette number
+ *
+ * the main color number is 500
+ */
 export type ColorPaletteNumber = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;

 /** the color palette */
@@ -45,3 +49,10 @@ 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/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/hooks",
-  "version": "1.0.8",
+  "version": "1.1.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/hooks/src/use-table.ts
+++ b/packages/hooks/src/use-table.ts
@@ -57,6 +57,12 @@ 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.0.8",
+  "version": "1.1.0",
  "exports": {
    ".": "./src/index.ts"
  },
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "@sa/utils": "workspace:*",
-    "simplebar-vue": "2.3.3"
+    "simplebar-vue": "2.3.4"
  },
  "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,10 +53,23 @@ 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">
+  <component
+    :is="activeTabComponent.component"
+    :class="activeTabComponent.class"
+    :style="cssVars"
+    v-bind="bindProps"
+    @mouseup="handleMouseup"
+  >
    <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/utils';
+import { addColorAlpha, transformColorWithOpacity } from '@sa/color';
 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.0.8",
+  "version": "1.1.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/scripts",
-  "version": "1.0.8",
+  "version": "1.1.0",
  "bin": {
    "sa": "./bin.ts"
  },
@@ -13,15 +13,15 @@
    }
  },
  "devDependencies": {
-    "@soybeanjs/changelog": "0.3.22",
-    "bumpp": "9.4.0",
+    "@soybeanjs/changelog": "0.3.23",
+    "bumpp": "9.4.1",
    "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.19",
+    "npm-check-updates": "16.14.20",
    "rimraf": "5.0.5"
  }
 }
--- a/packages/scripts/src/config/index.ts
+++ b/packages/scripts/src/config/index.ts
@@ -19,6 +19,7 @@ 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'],
@@ -27,6 +28,7 @@ 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.0.8",
+  "version": "1.1.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sa/utils",
-  "version": "1.0.8",
+  "version": "1.1.0",
  "exports": {
    ".": "./src/index.ts"
  },
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -1,4 +1,3 @@
-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) {
+export function createStorage<T extends object>(type: StorageType, storagePrefix: string) {
  const stg = type === 'session' ? window.sessionStorage : window.localStorage;

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

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

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

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

      return null;
    },
    remove(key: keyof T) {
-      stg.removeItem(key as string);
+      stg.removeItem(`${storagePrefix}${key as string}`);
    },
    clear() {
      stg.clear();
--- a/packages/utils/tsconfig.json
+++ b/packages/utils/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "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,9 +9,13 @@ interface Props {
  collapsed?: boolean;
  /** Arrow style icon */
  arrowIcon?: boolean;
+  zIndex?: number;
 }

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

 type NumberBool = 0 | 1;

@@ -39,7 +43,7 @@ const icon = computed(() => {
  <ButtonIcon
    :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')"
    tooltip-placement="bottom-start"
-    :z-index="99"
+    :z-index="zIndex"
  >
    <SvgIcon :icon="icon" />
  </ButtonIcon>
--- 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 { getColorPalette } from '@sa/utils';
+import { getPaletteColorByNumber } from '@sa/color';

 defineOptions({ name: 'WaveBg' });

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

 const props = defineProps<Props>();

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

 <template>
--- a/src/hooks/common/table.ts
+++ b/src/hooks/common/table.ts
@@ -1,6 +1,7 @@
 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';
@@ -13,10 +14,14 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
  const scope = effectScope();
  const appStore = useAppStore();

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

  const SELECTION_KEY = '__selection__';

+  const EXPAND_KEY = '__expand__';
+
  const {
    loading,
    empty,
@@ -65,6 +70,12 @@ 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
+          });
        }
      });

@@ -78,6 +89,8 @@ 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);
        }
      });

@@ -124,14 +137,20 @@ 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: appStore.isMobile ? 3 : 9
+      pageSlot: isMobile.value ? 3 : 9,
+      prefix: !isMobile.value && showTotal ? pagination.prefix : undefined
    };

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

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

    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.getSelectedMenuMetaByKey(key) || {};
+  const query = routeStore.getRouteQueryOfMetaByKey(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/utils';
+import { transformColorWithOpacity } from '@sa/color';
 import { useAppStore } from '@/store/modules/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useThemeStore } from '@/store/modules/theme';
@@ -92,6 +92,7 @@ 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,6 +21,10 @@ 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>

@@ -46,6 +50,9 @@ 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,6 +36,27 @@ 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,6 +11,7 @@ const local: App.I18n.Schema = {
    cancel: 'Cancel',
    close: 'Close',
    check: 'Check',
+    expandColumn: 'Expand Column',
    columnSetting: 'Column Setting',
    config: 'Config',
    confirm: 'Confirm',
@@ -57,6 +58,7 @@ const local: App.I18n.Schema = {
      dark: 'Dark',
      auto: 'Follow System'
    },
+    grayscale: 'Grayscale',
    layoutMode: {
      title: 'Layout Mode',
      vertical: 'Vertical Menu Mode',
@@ -64,6 +66,8 @@ 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',
@@ -293,6 +297,12 @@ 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: {
@@ -353,7 +363,7 @@ const local: App.I18n.Schema = {
        menuName: 'Menu Name',
        routeName: 'Route Name',
        routePath: 'Route Path',
-        routeParams: 'Route Params',
+        pathParam: 'Path Param',
        layout: 'Layout Component',
        page: 'Page Component',
        i18nKey: 'I18n Key',
@@ -361,12 +371,14 @@ 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',
@@ -377,6 +389,7 @@ 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',
@@ -386,10 +399,12 @@ 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 enter the route name of the highlighted menu',
+          activeMenu: 'Please select 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',
@@ -454,6 +469,9 @@ 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,6 +11,7 @@ const local: App.I18n.Schema = {
    cancel: '取消',
    close: '关闭',
    check: '勾选',
+    expandColumn: '展开列',
    columnSetting: '列设置',
    config: '配置',
    confirm: '确认',
@@ -57,6 +58,7 @@ const local: App.I18n.Schema = {
      dark: '暗黑模式',
      auto: '跟随系统'
    },
+    grayscale: '灰度模式',
    layoutMode: {
      title: '布局模式',
      vertical: '左侧菜单模式',
@@ -64,6 +66,8 @@ const local: App.I18n.Schema = {
      horizontal: '顶部菜单模式',
      'horizontal-mix': '顶部菜单混合模式'
    },
+    recommendColor: '应用推荐算法的颜色',
+    recommendColorDesc: '推荐颜色的算法参照',
    themeColor: {
      title: '主题颜色',
      primary: '主色',
@@ -293,6 +297,12 @@ const local: App.I18n.Schema = {
        superAdminVisible: '超级管理员可见',
        adminVisible: '管理员可见',
        adminOrUserVisible: '管理员和用户可见'
+      },
+      request: {
+        repeatedErrorOccurOnce: '重复请求错误只出现一次',
+        repeatedError: '重复请求错误',
+        repeatedErrorMsg1: '自定义请求错误 1',
+        repeatedErrorMsg2: '自定义请求错误 2'
      }
    },
    manage: {
@@ -353,7 +363,7 @@ const local: App.I18n.Schema = {
        menuName: '菜单名称',
        routeName: '路由名称',
        routePath: '路由路径',
-        routeParams: '路由参数',
+        pathParam: '路径参数',
        layout: '布局',
        page: '页面组件',
        i18nKey: '国际化key',
@@ -361,12 +371,14 @@ const local: App.I18n.Schema = {
        localIcon: '本地图标',
        iconTypeTitle: '图标类型',
        order: '排序',
+        constant: '常量路由',
        keepAlive: '缓存路由',
        href: '外链',
        hideInMenu: '隐藏菜单',
        activeMenu: '高亮的菜单',
        multiTab: '支持多页签',
        fixedIndexInTab: '固定在页签中的序号',
+        query: '路由参数',
        button: '按钮',
        buttonCode: '按钮编码',
        buttonDesc: '按钮描述',
@@ -377,6 +389,7 @@ const local: App.I18n.Schema = {
          menuName: '请输入菜单名称',
          routeName: '请输入路由名称',
          routePath: '请输入路由路径',
+          pathParam: '请输入路径参数',
          page: '请选择页面组件',
          layout: '请选择布局组件',
          i18nKey: '请输入国际化key',
@@ -386,10 +399,12 @@ const local: App.I18n.Schema = {
          keepAlive: '请选择是否缓存路由',
          href: '请输入外链',
          hideInMenu: '请选择是否隐藏菜单',
-          activeMenu: '请输入高亮的菜单的路由名称',
+          activeMenu: '请选择高亮的菜单的路由名称',
          multiTab: '请选择是否支持多标签',
          fixedInTab: '请选择是否固定在页签中',
          fixedIndexInTab: '请输入固定在页签中的序号',
+          queryKey: '请输入路由参数Key',
+          queryValue: '请输入路由参数Value',
          button: '请选择是否按钮',
          buttonCode: '请输入按钮编码',
          buttonDesc: '请输入按钮描述',
@@ -454,6 +469,9 @@ 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 { getRgbOfColor } from '@sa/utils';
+import { getRgb } from '@sa/color';
 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 } = getRgbOfColor(themeColor);
+  const { r, g, b } = getRgb(themeColor);

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

--- a/src/service/api/system-manage.ts
+++ b/src/service/api/system-manage.ts
@@ -30,18 +30,6 @@ 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,20 +1,16 @@
 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 { $t } from '@/locales';
-import { handleRefreshToken } from './shared';
+import { handleRefreshToken, showErrorMsg } from './shared';
+import type { RequestInstanceState } from './type';

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

-interface InstanceState {
-  /** whether the request is refreshing token */
-  isRefreshingToken: boolean;
-}
-
-export const request = createFlatRequest<App.Service.Response, InstanceState>(
+export const request = createFlatRequest<App.Service.Response, RequestInstanceState>(
  {
    baseURL,
    headers: {
@@ -35,7 +31,7 @@ export const request = createFlatRequest<App.Service.Response, InstanceState>(
    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 response.data.code === import.meta.env.VITE_SERVICE_SUCCESS_CODE;
+      return String(response.data.code) === import.meta.env.VITE_SERVICE_SUCCESS_CODE;
    },
    async onBackendFail(response, instance) {
      const authStore = useAuthStore();
@@ -47,6 +43,8 @@ export const request = createFlatRequest<App.Service.Response, InstanceState>(
      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
@@ -58,13 +56,15 @@ export const request = createFlatRequest<App.Service.Response, InstanceState>(

      // 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)) {
+      if (modalLogoutCodes.includes(response.data.code) && !request.state.errMsgStack?.includes(response.data.msg)) {
+        request.state.errMsgStack = [...(request.state.errMsgStack || []), response.data.msg];
+
        // prevent the user from refreshing the page
        window.addEventListener('beforeunload', handleLogout);

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

-      window.$message?.error?.(message);
+      showErrorMsg(request.state, message);
    }
  }
 );
--- a/src/service/request/shared.ts
+++ b/src/service/request/shared.ts
@@ -2,6 +2,7 @@ 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
@@ -29,3 +30,25 @@ 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
@@ -0,0 +1,6 @@
+export interface RequestInstanceState {
+  /** whether the request is refreshing token */
+  isRefreshingToken: boolean;
+  /** the request error message stack */
+  errMsgStack: string[];
+}
--- 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(constantRoutes.value.map(route => [route.name, route]));
+    const constantRoutesMap = new Map<string, ElegantConstRoute>([]);

    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(authRoutes.value.map(route => [route.name, route]));
+    const authRoutesMap = new Map<string, ElegantConstRoute>([]);

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

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

-    return allRoutes.find(route => route.name === selectedKey)?.meta || null;
+    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 {
@@ -360,6 +376,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
    setIsInitAuthRoute,
    getIsAuthRouteExist,
    getSelectedMenuKeyPath,
-    getSelectedMenuMetaByKey
+    getRouteQueryOfMetaByKey
  };
 });
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -2,10 +2,17 @@ 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 { getColorPalette } from '@sa/color-palette';
+import { getPaletteColorByNumber } from '@sa/color';
 import { SetupStoreId } from '@/enum';
 import { localStg } from '@/utils/storage';
-import { addThemeVarsToHtml, createThemeToken, getNaiveTheme, initThemeSettings, toggleCssDarkMode } from './shared';
+import {
+  addThemeVarsToHtml,
+  createThemeToken,
+  getNaiveTheme,
+  initThemeSettings,
+  toggleCssDarkMode,
+  toggleGrayscaleMode
+} from './shared';

 /** Theme store */
 export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
@@ -23,6 +30,9 @@ 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;
@@ -35,7 +45,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
  });

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

  /**
   * Settings json
@@ -60,6 +70,15 @@ 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'];
@@ -80,13 +99,18 @@ 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
-    const { main } = getColorPalette(color);
+
+      colorValue = getPaletteColorByNumber(color, 500, true);
+    }

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

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

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

@@ -130,12 +154,19 @@ 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 }
@@ -153,6 +184,7 @@ 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 { getColorByPaletteNumber, getColorPalette } from '@sa/color-palette';
-import { addColorAlpha, getRgbOfColor } from '@sa/utils';
+import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
 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,9 +33,10 @@ 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) {
-  const paletteColors = createThemePaletteColors(colors);
+export function createThemeToken(colors: App.Theme.ThemeColor, recommended = false) {
+  const paletteColors = createThemePaletteColors(colors, recommended);

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

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

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

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

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

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

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

  if (darkMode) {
-    addDarkClass();
+    add();
  } else {
-    removeDarkClass();
+    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();
  }
 }

@@ -194,13 +207,14 @@ 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) {
+function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false) {
  const colorActions: NaiveColorAction[] = [
    { scene: '', handler: color => color },
    { scene: 'Suppl', handler: color => color },
-    { scene: 'Hover', handler: color => getColorByPaletteNumber(color, 500) },
-    { scene: 'Pressed', handler: color => getColorByPaletteNumber(color, 700) },
+    { scene: 'Hover', handler: color => getPaletteColorByNumber(color, 500, recommended) },
+    { scene: 'Pressed', handler: color => getPaletteColorByNumber(color, 700, recommended) },
    { scene: 'Active', handler: color => addColorAlpha(color, 0.1) }
  ];

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

  const theme: GlobalThemeOverrides = {
    common: {
-      ...getNaiveThemeColors(colors),
+      ...getNaiveThemeColors(colors, recommended),
      borderRadius: '6px'
    },
    LoadingBar: {
--- a/src/styles/css/global.css
+++ b/src/styles/css/global.css
@@ -11,3 +11,7 @@ body,
 html {
  overflow-x: hidden;
 }
+
+html.grayscale {
+  filter: grayscale(100%);
+}
--- a/src/theme/settings.ts
+++ b/src/theme/settings.ts
@@ -1,6 +1,8 @@
 /** 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,6 +171,20 @@ 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;
@@ -184,42 +198,16 @@ 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;
-      /** 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[];
+      /** buttons */
+      buttons?: MenuButton[] | null;
      /** children menu */
-      children?: Menu[];
-    }>;
+      children?: Menu[] | null;
+    }> &
+      MenuPropsOfRoute;

    /** 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-palette').ColorPaletteNumber;
+    type ColorPaletteNumber = import('@sa/color').ColorPaletteNumber;

    /** Theme token */
    type ThemeToken = {
@@ -18,6 +18,10 @@ 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 */
@@ -154,7 +158,7 @@ declare namespace App {
      /** The menu label */
      label: string;
      /** The menu i18n key */
-      i18nKey?: I18n.I18nKey;
+      i18nKey?: I18n.I18nKey | null;
      /** The route key */
      routeKey: RouteKey;
      /** The route path */
@@ -212,7 +216,7 @@ declare namespace App {
       */
      localIcon?: string;
      /** I18n key */
-      i18nKey?: I18n.I18nKey;
+      i18nKey?: I18n.I18nKey | null;
    };

    /** Form rule */
@@ -257,6 +261,7 @@ declare namespace App {
        cancel: string;
        close: string;
        check: string;
+        expandColumn: string;
        columnSetting: string;
        config: string;
        confirm: string;
@@ -298,7 +303,10 @@ 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;
@@ -465,6 +473,12 @@ declare namespace App {
            adminVisible: string;
            adminOrUserVisible: string;
          };
+          request: {
+            repeatedErrorOccurOnce: string;
+            repeatedError: string;
+            repeatedErrorMsg1: string;
+            repeatedErrorMsg2: string;
+          };
        };
        manage: {
          common: {
@@ -524,7 +538,7 @@ declare namespace App {
            menuName: string;
            routeName: string;
            routePath: string;
-            routeParams: string;
+            pathParam: string;
            layout: string;
            page: string;
            i18nKey: string;
@@ -532,12 +546,14 @@ 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;
@@ -548,6 +564,7 @@ declare namespace App {
              menuName: string;
              routeName: string;
              routePath: string;
+              pathParam: string;
              layout: string;
              page: string;
              i18nKey: string;
@@ -561,6 +578,8 @@ declare namespace App {
              multiTab: string;
              fixedInTab: string;
              fixedIndexInTab: string;
+              queryKey: string;
+              queryValue: string;
              button: string;
              buttonCode: string;
              buttonDesc: string;
@@ -602,6 +621,9 @@ 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,9 +19,11 @@ 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']
@@ -49,6 +51,7 @@ 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/env.d.ts
+++ b/src/typings/env.d.ts
@@ -101,5 +101,7 @@ 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'
+    'apiFn' | 'apiParams' | 'columns' | 'immediate' | 'showTotal'
  >;
 }
--- a/src/typings/router.d.ts
+++ b/src/typings/router.d.ts
@@ -13,21 +13,23 @@ declare module 'vue-router' {
     *
     * It's used in i18n, if it is set, the title will be ignored
     */
-    i18nKey?: App.I18n.I18nKey;
+    i18nKey?: App.I18n.I18nKey | null;
    /**
     * 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;
+    keepAlive?: boolean | null;
    /**
     * Is constant route
     *
     * Does not need to login, and the route is defined in the front-end
     */
-    constant?: boolean;
+    constant?: boolean | null;
    /**
     * Iconify icon
     *
@@ -41,11 +43,11 @@ declare module 'vue-router' {
     */
    localIcon?: string;
    /** Router order */
-    order?: number;
+    order?: number | null;
    /** The outer link of the route */
-    href?: string;
+    href?: string | null;
    /** Whether to hide the route in the menu */
-    hideInMenu?: boolean;
+    hideInMenu?: boolean | null;
    /**
     * The menu key will be activated when entering the route
     *
@@ -54,12 +56,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;
+    activeMenu?: import('@elegant-router/types').RouteKey | null;
    /** By default, the same route path will use one tab, if set to true, it will use multiple tabs */
-    multiTab?: boolean;
+    multiTab?: boolean | null;
    /** If set, the route will be fixed in tabs, and the value is the order of fixed tabs */
    fixedIndexInTab?: number | null;
    /** if set query parameters, it will be automatically carried when entering the route */
-    query?: Record<string, string>;
+    query?: { key: string; value: string }[] | null;
  }
 }
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -36,3 +36,23 @@ 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,7 +1,9 @@
 import { createLocalforage, createStorage } from '@sa/utils';

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

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

 export const localforage = createLocalforage<StorageType.Local>('local');
--- 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 { getColorPalette, mixColor } from '@sa/utils';
+import { getPaletteColorByNumber, mixColor } from '@sa/color';
 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 ? getColorPalette(themeStore.themeColor, 7) : themeStore.themeColor
+  themeStore.darkMode ? getPaletteColorByNumber(themeStore.themeColor, 600) : themeStore.themeColor
 );

 const bgColor = computed(() => {
--- a/src/views/function/request/index.vue
+++ b/src/views/function/request/index.vue
@@ -13,6 +13,25 @@ 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>
@@ -26,6 +45,18 @@ async function refreshToken() {
    <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 MenuOperateDrawer, { type OperateType } from './modules/menu-operate-drawer.vue';
+import MenuOperateModal, { type OperateType } from './modules/menu-operate-modal.vue';

 const appStore = useAppStore();

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

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

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

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

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

-  openDrawer();
+  openModal();
 }

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

  editingData.value = { ...item };

-  openDrawer();
+  openModal();
 }

 const allPages = ref<string[]>([]);
@@ -252,8 +252,8 @@ init();
        :pagination="pagination"
        class="sm:h-full"
      />
-      <MenuOperateDrawer
-        v-model:visible="drawerVisible"
+      <MenuOperateModal
+        v-model:visible="visible"
        :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
@@ -1,258 +0,0 @@
-<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
@@ -0,0 +1,468 @@
+<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,3 +40,40 @@ 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,11 +68,8 @@ const roleId = computed(() => props.rowData?.id || -1);

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

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

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

 watch(visible, () => {
  if (visible.value) {
-    handleUpdateModelWhenEdit();
+    handleInitModel();
    restoreValidation();
  }
 });
--- a/src/views/manage/user/index.vue
+++ b/src/views/manage/user/index.vue
@@ -12,6 +12,7 @@ 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,11 +89,8 @@ async function getRoleOptions() {
  }
 }

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

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

 watch(visible, () => {
  if (visible.value) {
-    handleUpdateModelWhenEdit();
+    handleInitModel();
    restoreValidation();
    getRoleOptions();
  }
Author	SHA1	Message	Date
Soybean	e7f0a30bd8	chore(projects): release v1.1.0	2024-05-07 18:21:50 +08:00
Soybean	4d17cfdcd3	docs(projects): update CHANGELOG	2024-05-07 15:14:27 +08:00
Soybean	46e90a7208	chore(projects): release v1.1.0-beta.2	2024-05-07 15:11:16 +08:00
Soybean	3b47b5a56f	fix(projects): fix menu data when role is changed. fixed #391	2024-05-07 15:08:30 +08:00
Soybean	073fbcfc36	Merge pull request #421 from paynezhuang/main feat(projects): useTable adds expand to display	2024-05-07 14:58:09 +08:00
paynezhuang	0a90dd3764	feat(projects): useTable adds expand to display	2024-05-07 14:53:42 +08:00
Soybean	60f3b14085	fix(projects): fix manage_menu modal style	2024-05-07 10:51:21 +08:00
Soybean	18b3f05382	docs(projects): add CHANGELOG.zh_CN.md	2024-05-07 10:17:20 +08:00
Soybean	72ccb6bf6d	optimize(projects): remove deprecated code	2024-05-07 02:09:22 +08:00
Soybean	21df57b71c	chore(projects): release v1.1.0-beta.1	2024-05-07 01:57:37 +08:00
Soybean	7bd43df5f7	fix(projects): fix menu-toggler zIndex	2024-05-07 01:56:56 +08:00
Soybean	599b4e1947	chore(deps): update deps	2024-05-07 01:49:27 +08:00
Soybean	003e145e77	refactor(projects): menu-operate-drawer => menu-operate-modal	2024-05-07 01:44:41 +08:00
Soybean	c4b5c65625	feat(projects): page: support manage_menu more options. close #366	2024-05-07 01:39:52 +08:00
Soybean	ebe55af7d5	chore(projects): merge main to v1.1.0	2024-05-05 01:34:24 +08:00
Soybean	a6b92103a6	chore(projects): release v1.0.9	2024-05-05 00:44:27 +08:00
Soybean	f4513e1e38	fix(projects): fix manage page drawer operate about data reset. fixed #415 , fixed #417	2024-05-05 00:43:01 +08:00
Soybean	734ef9852c	chore(deps): update deps	2024-05-05 00:31:51 +08:00
Soybean	c137b97089	chore(projects): update vscode settings	2024-05-05 00:18:23 +08:00
Soybean	b8f9e60211	Merge pull request #418 from paynezhuang/main	2024-04-30 16:54:29 +08:00
paynezhuang	ce2a75b5a8	docs(projects): add PanisAdmin to README	2024-04-30 16:51:51 +08:00
Soybean	d0f17a440c	docs(projects): add ecosystem to README.md	2024-04-29 15:43:46 +08:00
Soybean	1ed2eb5fdd	Merge pull request #367 from JianJroh/feat/click-mousewheel-close-tab feat(projects): close tab by mouse wheel button click	2024-04-29 10:50:00 +08:00
JianJroh	d3849baaff	feat(projects): close tab by mouse wheel button click	2024-04-29 09:57:44 +08:00
Soybean	413a8b29c7	chore(deps): update deps	2024-04-27 22:44:19 +08:00
Soybean	52188d8853	chore(projects): update .npmrc	2024-04-27 13:47:53 +08:00
Soybean	fbc2e61f49	feat(packages): @sa/scripts: add new commit type `optimize` and commit scope `packages`	2024-04-27 13:32:45 +08:00
Soybean	e3bd397248	feat(projects): support repeated request errors occur once in a short time. close #368 , close #369	2024-04-27 02:35:13 +08:00
Soybean	42f950f819	Merge pull request #412 from paynezhuang/fix/menu_fixedInIndex fix(projects): menu fixedIndexInTab default null and Tab fixedIndex	2024-04-27 02:02:28 +08:00
paynezhuang	3d10ef1a90	fix(projects): menu fixedIndexInTab default null	2024-04-27 00:03:17 +08:00
Soybean	6b465c0ebd	Merge pull request #411 from paynezhuang/feat/menu feat(projects): add menu route field	2024-04-26 22:15:29 +08:00
paynezhuang	dbe31eb1dc	feat(projects): add menu route field	2024-04-26 20:06:53 +08:00
Soybean	a1920fcad9	feat(projects): add recommend color switch. closed #388	2024-04-26 02:19:48 +08:00
Soybean	34999971fd	refactor(projects): refactor @sa/color-palette => @sa/color & perf @sa/utils	2024-04-26 01:51:16 +08:00
Soybean	1cb3816e48	chore(deps): update deps	2024-04-25 23:51:09 +08:00
Soybean	de9567420a	Merge pull request #406 from paynezhuang/feat/table-total-items feat(projects): add table showTotal options	2024-04-25 23:31:59 +08:00
paynezhuang	3e61eab498	feat(projects): add table showTotal options	2024-04-25 22:51:25 +08:00
Soybean	ec5b1c3f84	Merge pull request #402 from Azir-11/v1.1.0	2024-04-25 12:14:50 +08:00
Azir	1fc34cc5f8	feat(projects): Add prefix to local storage	2024-04-25 12:10:31 +08:00
Soybean	c347528bbb	Merge pull request #395 from Li-0221/v1.1.0 feat(projects): support grayscale. fixed #385	2024-04-24 15:36:20 +08:00
Soybean	d335df6f46	feat(projects): support grayscale. fixed #385	2024-04-24 15:23:23 +08:00