chore(projects): release v1.3.5

.env

@@ -36,7 +36,7 @@ VITE_SERVICE_LOGOUT_CODES=8888,8889
 VITE_SERVICE_MODAL_LOGOUT_CODES=7777,7778
 
 # token expired codes of backend service, when the code is received, it will refresh the token and resend the request
-VITE_SERVICE_EXPIRED_TOKEN_CODES=9999,9998
+VITE_SERVICE_EXPIRED_TOKEN_CODES=9999,9998,3333
 
 # when the route mode is static, the defined super role
 VITE_STATIC_SUPER_ROLE=R_SUPER
@@ -46,3 +46,6 @@ VITE_SOURCE_MAP=N
 
 # Used to differentiate storage across different domains
 VITE_STORAGE_PREFIX=SOY_
+
+# used to control whether the program automatically detects updates
+VITE_AUTOMATICALLY_DETECT_UPDATE=Y

CHANGELOG.md

@@ -1,6 +1,187 @@
 # Changelog
 
 
+## [v1.3.5](https://github.com/soybeanjs/soybean-admin/compare/v1.3.4...v1.3.5) (2024-09-07)
+
+###    🚀 Features
+
+- **packages**:
+  - @sa/axios: add response to flatRequest when success &nbsp;-&nbsp; by @soybeanjs [<samp>(c4e16)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c4e1610)
+- **projects**:
+  - README.zh_CN.md 添加合作推广 &nbsp;-&nbsp; by @PZ-18664918826 in https://github.com/soybeanjs/soybean-admin/issues/601 [<samp>(2fa40)</samp>](https://github.com/soybeanjs/soybean-admin/commit/2fa400b)
+  - Add more commit types according to Apache specifications &nbsp;-&nbsp; by @Azir-11 in https://github.com/soybeanjs/soybean-admin/issues/610 [<samp>(878d9)</samp>](https://github.com/soybeanjs/soybean-admin/commit/878d9c3)
+  - does the configuration support automatic updates. close#612 &nbsp;-&nbsp; by @Azir-11 in https://github.com/soybeanjs/soybean-admin/issues/617 and https://github.com/soybeanjs/soybean-admin/issues/612 [<samp>(4c9f4)</samp>](https://github.com/soybeanjs/soybean-admin/commit/4c9f4e0)
+  - add app error handler. close #587 &nbsp;-&nbsp; by @soybeanjs in https://github.com/soybeanjs/soybean-admin/issues/587 [<samp>(be855)</samp>](https://github.com/soybeanjs/soybean-admin/commit/be8556c)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
+
+- **deps**:
+  - move json5 from devDependencies to dependencies to support production usage &nbsp;-&nbsp; by @mufeng889 in https://github.com/soybeanjs/soybean-admin/issues/618 [<samp>(7cb43)</samp>](https://github.com/soybeanjs/soybean-admin/commit/7cb43fc)
+- **projects**:
+  - avoid retrieving cached HTML &nbsp;-&nbsp; by @Azir-11 in https://github.com/soybeanjs/soybean-admin/issues/605 [<samp>(ef6cf)</samp>](https://github.com/soybeanjs/soybean-admin/commit/ef6cf93)
+  - fix login redirect &nbsp;-&nbsp; by @soybeanjs [<samp>(3830e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3830ec7)
+  - fix vertical-mix-menu when sider collapse. fixed #608 &nbsp;-&nbsp; by @soybeanjs in https://github.com/soybeanjs/soybean-admin/issues/608 [<samp>(c3f1f)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c3f1f69)
+  - fix breadcrumb when activeMenu is parent menu. fixed #589 &nbsp;-&nbsp; by @soybeanjs in https://github.com/soybeanjs/soybean-admin/issues/589 [<samp>(79b2a)</samp>](https://github.com/soybeanjs/soybean-admin/commit/79b2a28)
+  - fix refresh token when meet multi requests. fixed #581 &nbsp;-&nbsp; by @soybeanjs in https://github.com/soybeanjs/soybean-admin/issues/581 [<samp>(27b52)</samp>](https://github.com/soybeanjs/soybean-admin/commit/27b5222)
+- **types**:
+  - fix the type of TableApiFn &nbsp;-&nbsp; by @Azir-11 in https://github.com/soybeanjs/soybean-admin/issues/599 [<samp>(26c93)</samp>](https://github.com/soybeanjs/soybean-admin/commit/26c93df)
+
+### &nbsp;&nbsp;&nbsp;🛠 Optimizations
+
+- **projects**: optimize menu selectedKey &nbsp;-&nbsp; by @soybeanjs [<samp>(531bf)</samp>](https://github.com/soybeanjs/soybean-admin/commit/531bfaf)
+
+### &nbsp;&nbsp;&nbsp;📖 Documentation
+
+- **projects**:
+  - update README &nbsp;-&nbsp; by @mufeng889 in https://github.com/soybeanjs/soybean-admin/issues/594 [<samp>(a8f92)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a8f923e)
+  - update README &nbsp;-&nbsp; by @soybeanjs [<samp>(e9a2e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/e9a2ee4)
+  - update README &nbsp;-&nbsp; by @soybeanjs [<samp>(73e91)</samp>](https://github.com/soybeanjs/soybean-admin/commit/73e917a)
+  - update the location of important information in the document &nbsp;-&nbsp; by **Azir** [<samp>(9c012)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9c012c7)
+
+### &nbsp;&nbsp;&nbsp;🏡 Chore
+
+- **deps**:
+  - update deps &nbsp;-&nbsp; by @soybeanjs [<samp>(a1c14)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a1c14a1)
+  - update deps &nbsp;-&nbsp; by @soybeanjs [<samp>(7fa55)</samp>](https://github.com/soybeanjs/soybean-admin/commit/7fa5590)
+  - update deps &nbsp;-&nbsp; by @soybeanjs [<samp>(a44ea)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a44ea62)
+- **projects**:
+  - use json5 resolve env `VITE_OTHER_SERVICE_BASE_URL` & fix proxy enable &nbsp;-&nbsp; by @soybeanjs [<samp>(b16a9)</samp>](https://github.com/soybeanjs/soybean-admin/commit/b16a963)
+
+### &nbsp;&nbsp;&nbsp;🎨 Styles
+
+- **projects**: rename script czh to commit:zh &nbsp;-&nbsp; by @Azir-11 in https://github.com/soybeanjs/soybean-admin/issues/597 [<samp>(5094f)</samp>](https://github.com/soybeanjs/soybean-admin/commit/5094f0e)
+
+### &nbsp;&nbsp;&nbsp;❤️ Contributors
+
+[![soybeanjs](https://github.com/soybeanjs.png?size=48)](https://github.com/soybeanjs)&nbsp;&nbsp;[![mufeng889](https://github.com/mufeng889.png?size=48)](https://github.com/mufeng889)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;[![PZ-18664918826](https://github.com/PZ-18664918826.png?size=48)](https://github.com/PZ-18664918826)&nbsp;&nbsp;
+[Azir](mailto:2075125282@qq.com),&nbsp;
+
+## [v1.3.4](https://github.com/honghuangdc/soybean-admin/compare/v1.3.3...v1.3.4) (2024-08-01)
+
+### &nbsp;&nbsp;&nbsp;🚨 Breaking Changes
+
+- **projects**: don't reset active menu of vertical-mix layout when it is mixSiderFixed &nbsp;-&nbsp; by @honghuangdc [<samp>(939c5)</samp>](https://github.com/honghuangdc/soybean-admin/commit/939c512)
+
+### &nbsp;&nbsp;&nbsp;🛠 Optimizations
+
+- **projects**: optimize code &nbsp;-&nbsp; by @honghuangdc [<samp>(cb1d4)</samp>](https://github.com/honghuangdc/soybean-admin/commit/cb1d445)
+
+### &nbsp;&nbsp;&nbsp;🏡 Chore
+
+- **projects**: update deps & fix vue-router type &nbsp;-&nbsp; by @honghuangdc [<samp>(96837)</samp>](https://github.com/honghuangdc/soybean-admin/commit/968370b)
+
+### &nbsp;&nbsp;&nbsp;❤️ Contributors
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
+
+## [v1.3.3](https://github.com/honghuangdc/soybean-admin/compare/v1.3.2...v1.3.3) (2024-07-30)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
+
+- **projects**: fix watermark settings &nbsp;-&nbsp; by @honghuangdc [<samp>(5646a)</samp>](https://github.com/honghuangdc/soybean-admin/commit/5646a50)
+
+### &nbsp;&nbsp;&nbsp;📖 Documentation
+
+- **projects**: update CHANGELOG &nbsp;-&nbsp; by @honghuangdc [<samp>(ebc83)</samp>](https://github.com/honghuangdc/soybean-admin/commit/ebc838c)
+
+### &nbsp;&nbsp;&nbsp;❤️ Contributors
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
+
+## [v1.3.2](https://github.com/honghuangdc/soybean-admin/compare/v1.3.1...v1.3.2) (2024-07-30)
+
+### &nbsp;&nbsp;&nbsp;🚀 Features
+
+- **projects**:
+  - add color fading mode.close #567 &nbsp;-&nbsp; by @Azir-11 in https://github.com/honghuangdc/soybean-admin/issues/569 and https://github.com/honghuangdc/soybean-admin/issues/567 [<samp>(4dde4)</samp>](https://github.com/honghuangdc/soybean-admin/commit/4dde4c2)
+  - add full screen watermark. close#571 &nbsp;-&nbsp; by @paynezhuang in https://github.com/honghuangdc/soybean-admin/issues/573 and https://github.com/honghuangdc/soybean-admin/issues/571 [<samp>(ea8aa)</samp>](https://github.com/honghuangdc/soybean-admin/commit/ea8aa6c)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
+
+- **projects**: fix vertical-mix menu selected &nbsp;-&nbsp; by @honghuangdc [<samp>(59f07)</samp>](https://github.com/honghuangdc/soybean-admin/commit/59f07d8)
+
+### &nbsp;&nbsp;&nbsp;🛠 Optimizations
+
+- **projects**:
+  - add type WatermarkProps &nbsp;-&nbsp; by @honghuangdc [<samp>(f26d0)</samp>](https://github.com/honghuangdc/soybean-admin/commit/f26d0a6)
+  - remove home NAlert closable &nbsp;-&nbsp; by @honghuangdc [<samp>(98b75)</samp>](https://github.com/honghuangdc/soybean-admin/commit/98b75c2)
+  - optimize response code comparison &nbsp;-&nbsp; by @honghuangdc [<samp>(cf67d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/cf67d55)
+- **types**:
+  - remove useless types. &nbsp;-&nbsp; by **Azir** [<samp>(eed61)</samp>](https://github.com/honghuangdc/soybean-admin/commit/eed617f)
+
+### &nbsp;&nbsp;&nbsp;📖 Documentation
+
+- **projects**: update CHANGELOG &nbsp;-&nbsp; by @honghuangdc [<samp>(d3759)</samp>](https://github.com/honghuangdc/soybean-admin/commit/d37591d)
+
+### &nbsp;&nbsp;&nbsp;🏡 Chore
+
+- **deps**: update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(993e9)</samp>](https://github.com/honghuangdc/soybean-admin/commit/993e9ca)
+
+### &nbsp;&nbsp;&nbsp;❤️ Contributors
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;[![paynezhuang](https://github.com/paynezhuang.png?size=48)](https://github.com/paynezhuang)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;
+[Azir](mailto:2075125282@qq.com),&nbsp;
+
+## [v1.3.1](https://github.com/honghuangdc/soybean-admin/compare/v1.3.0...v1.3.1) (2024-07-22)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
+
+- **projects**:
+  - fix the issue of abnormal width of the sidebar in the top menu mix and reverse mode &nbsp;-&nbsp; by @Azir-11 in https://github.com/honghuangdc/soybean-admin/issues/562 [<samp>(c4695)</samp>](https://github.com/honghuangdc/soybean-admin/commit/c469512)
+  - fix HorizontalMixMenu inverted. fixed #563 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/563 [<samp>(4e55b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/4e55b0e)
+  - fix vertical-menu will not render when the layout is from mobile &nbsp;-&nbsp; by @honghuangdc [<samp>(84027)</samp>](https://github.com/honghuangdc/soybean-admin/commit/8402734)
+
+### &nbsp;&nbsp;&nbsp;📖 Documentation
+
+- **projects**: update CHANGELOG &nbsp;-&nbsp; by @honghuangdc [<samp>(613c8)</samp>](https://github.com/honghuangdc/soybean-admin/commit/613c836)
+
+### &nbsp;&nbsp;&nbsp;🎨 Styles
+
+- **other**: modify the Chinese name of the grayscale mode &nbsp;-&nbsp; by **Azir** [<samp>(53770)</samp>](https://github.com/honghuangdc/soybean-admin/commit/5377002)
+
+### &nbsp;&nbsp;&nbsp;❤️ Contributors
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;
+[Azir](mailto:2075125282@qq.com),&nbsp;
+
+## [v1.3.0](https://github.com/soybeanjs/soybean-admin/compare/v1.2.8...v1.3.0) (2024-07-22)
+
+### &nbsp;&nbsp;&nbsp;🚨 Breaking Changes
+
+- **projects**: refactor global menu & support `reversed-horizontal-mix-menu`. close #365 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/365 [<samp>(087e5)</samp>](https://github.com/soybeanjs/soybean-admin/commit/087e532)
+
+### &nbsp;&nbsp;&nbsp;🚀 Features
+
+- **packages**:
+  - `@sa/scripts`: command `gitCommit` support chinese &nbsp;-&nbsp; by @mmdapl in https://github.com/soybeanjs/soybean-admin/issues/548 [<samp>(06971)</samp>](https://github.com/soybeanjs/soybean-admin/commit/06971f3)
+  - @sa/axios: replace CancelTokenSource by AbortController. close #530, close #532 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/530 and https://github.com/soybeanjs/soybean-admin/issues/532 [<samp>(527fd)</samp>](https://github.com/soybeanjs/soybean-admin/commit/527fd79)
+  - @sa/scripts: add ignore pattern list for command `gitCommitVerify`. close #504 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/504 [<samp>(958d0)</samp>](https://github.com/soybeanjs/soybean-admin/commit/958d0ba)
+- **projects**:
+  - make branch `main` tiny & modify request retry times to 0 &nbsp;-&nbsp; by @Azir-11 [<samp>(793b1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/793b16e)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
+
+- **hooks**: prevent program freezing when pagesize returns 0 &nbsp;-&nbsp; by @Azir-11 in https://github.com/soybeanjs/soybean-admin/issues/545 [<samp>(f4eeb)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f4eeb2e)
+
+### &nbsp;&nbsp;&nbsp;💅 Refactors
+
+- **projects**:
+  - combine `theme tokens` and `theme settings`. close #379 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/379 [<samp>(1d1b1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1d1b148)
+  - change css vars mount to root &nbsp;-&nbsp; by @honghuangdc [<samp>(00f41)</samp>](https://github.com/soybeanjs/soybean-admin/commit/00f41dd)
+
+### &nbsp;&nbsp;&nbsp;📖 Documentation
+
+- **projects**: update CHANGELOG &nbsp;-&nbsp; by @honghuangdc [<samp>(a0b76)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a0b76da)
+
+### &nbsp;&nbsp;&nbsp;🏡 Chore
+
+- **deps**: update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(f6bd6)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f6bd6b8)
+- **projects**: add script `czh` &nbsp;-&nbsp; by @honghuangdc [<samp>(02069)</samp>](https://github.com/soybeanjs/soybean-admin/commit/0206969)
+
+### &nbsp;&nbsp;&nbsp;❤️ Contributors
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;[![mmdapl](https://github.com/mmdapl.png?size=48)](https://github.com/mmdapl)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;
+
 ## [v1.2.8](https://github.com/soybeanjs/soybean-admin/compare/v1.2.7...v1.2.8) (2024-07-20)
 
 ### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes

CHANGELOG.zh_CN.md

@@ -1,5 +1,128 @@
 # 更新日志
 
+## [v1.3.2](https://github.com/honghuangdc/soybean-admin/compare/v1.3.1...v1.3.2) (2024-07-30)
+
+###    🚀 新功能
+
+- **项目**:
+  - 添加颜色渐变模式。关闭 #567 &nbsp;-&nbsp; 由 @Azir-11 在 https://github.com/honghuangdc/soybean-admin/issues/569 和 https://github.com/honghuangdc/soybean-admin/issues/567 [<samp>(4dde4)</samp>](https://github.com/honghuangdc/soybean-admin/commit/4dde4c2)
+  - 添加全屏水印。关闭 #571 &nbsp;-&nbsp; 由 @paynezhuang 在 https://github.com/honghuangdc/soybean-admin/issues/573 和 https://github.com/honghuangdc/soybean-admin/issues/571 [<samp>(ea8aa)</samp>](https://github.com/honghuangdc/soybean-admin/commit/ea8aa6c)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug 修复
+
+- **项目**: 修复 vertical-mix 菜单选中问题 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(59f07)</samp>](https://github.com/honghuangdc/soybean-admin/commit/59f07d8)
+
+### &nbsp;&nbsp;&nbsp;🛠 优化
+
+- **项目**:
+  - 添加类型 WatermarkProps &nbsp;-&nbsp; 由 @honghuangdc [<samp>(f26d0)</samp>](https://github.com/honghuangdc/soybean-admin/commit/f26d0a6)
+  - 移除 home NAlert 可关闭 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(98b75)</samp>](https://github.com/honghuangdc/soybean-admin/commit/98b75c2)
+  - 优化响应代码比较 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(cf67d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/cf67d55)
+- **类型**:
+  - 移除无用类型。 &nbsp;-&nbsp; 由 **Azir** [<samp>(eed61)</samp>](https://github.com/honghuangdc/soybean-admin/commit/eed617f)
+
+### &nbsp;&nbsp;&nbsp;📖 文档
+
+- **项目**: 更新更新日志 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(d3759)</samp>](https://github.com/honghuangdc/soybean-admin/commit/d37591d)
+
+### &nbsp;&nbsp;&nbsp;🏡 杂项
+
+- **依赖**: 更新依赖 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(993e9)</samp>](https://github.com/honghuangdc/soybean-admin/commit/993e9ca)
+
+### &nbsp;&nbsp;&nbsp;❤️ 贡献者
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;[![paynezhuang](https://github.com/paynezhuang.png?size=48)](https://github.com/paynezhuang)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;
+[Azir](mailto:2075125282@qq.com),&nbsp;
+
+## [v1.3.1](https://github.com/honghuangdc/soybean-admin/compare/v1.3.0...v1.3.1) (2024-07-22)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug 修复
+
+- **项目**:
+  - 修复顶部菜单混合和反向模式下侧边栏宽度异常的问题 &nbsp;-&nbsp; 由 @Azir-11 在 https://github.com/honghuangdc/soybean-admin/issues/562 修复 [<samp>(c4695)</samp>](https://github.com/honghuangdc/soybean-admin/commit/c469512)
+  - 修复水平混合菜单反转问题。修复 #563 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/honghuangdc/soybean-admin/issues/563 修复 [<samp>(4e55b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/4e55b0e)
+  - 修复当布局来自移动端时垂直菜单不渲染的问题 &nbsp;-&nbsp; 由 @honghuangdc 修复 [<samp>(84027)</samp>](https://github.com/honghuangdc/soybean-admin/commit/8402734)
+
+### &nbsp;&nbsp;&nbsp;📖 文档
+
+- **项目**: 更新更新日志 &nbsp;-&nbsp; 由 @honghuangdc 更新 [<samp>(613c8)</samp>](https://github.com/honghuangdc/soybean-admin/commit/613c836)
+
+### &nbsp;&nbsp;&nbsp;🎨 样式
+
+- **其他**: 修改灰度模式的中文名称 &nbsp;-&nbsp; 由 **Azir** 修改 [<samp>(53770)</samp>](https://github.com/honghuangdc/soybean-admin/commit/5377002)
+
+### &nbsp;&nbsp;&nbsp;❤️ 贡献者
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;
+[Azir](mailto:2075125282@qq.com),&nbsp;
+
+
+## [v1.3.0](https://github.com/soybeanjs/soybean-admin/compare/v1.2.8...v1.3.0) (2024-07-22)
+
+### &nbsp;&nbsp;&nbsp;🚨 破坏性变更
+
+- **项目**: 重构全局菜单 & 支持 `reversed-horizontal-mix-menu`。关闭 #365 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/365 提出 [<samp>(087e5)</samp>](https://github.com/soybeanjs/soybean-admin/commit/087e532)
+
+### &nbsp;&nbsp;&nbsp;🚀 功能
+
+- **包**:
+  - `@sa/scripts`: 命令 `gitCommit` 支持中文 &nbsp;-&nbsp; 由 @mmdapl 在 https://github.com/soybeanjs/soybean-admin/issues/548 提出 [<samp>(06971)</samp>](https://github.com/soybeanjs/soybean-admin/commit/06971f3)
+  - @sa/axios: 用 AbortController 替换 CancelTokenSource。关闭 #530, 关闭 #532 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/530 和 https://github.com/soybeanjs/soybean-admin/issues/532 提出 [<samp>(527fd)</samp>](https://github.com/soybeanjs/soybean-admin/commit/527fd79)
+  - @sa/scripts: 为命令 `gitCommitVerify` 添加忽略模式列表。关闭 #504 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/504 提出 [<samp>(958d0)</samp>](https://github.com/soybeanjs/soybean-admin/commit/958d0ba)
+- **项目**:
+  - 使分支 `main` 更精简 & 修改请求重试次数为 0 &nbsp;-&nbsp; 由 @Azir-11 提出 [<samp>(793b1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/793b16e)
+
+### &nbsp;&nbsp;&nbsp;🐞 修复
+
+- **钩子**: 当 pagesize 返回 0 时防止程序冻结 &nbsp;-&nbsp; 由 @Azir-11 在 https://github.com/soybeanjs/soybean-admin/issues/545 提出 [<samp>(f4eeb)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f4eeb2e)
+
+### &nbsp;&nbsp;&nbsp;💅 重构
+
+- **项目**:
+  - 合并 `theme tokens` 和 `theme settings`。关闭 #379 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/379 提出 [<samp>(1d1b1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1d1b148)
+  - 将 css 变量挂载到 root &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(00f41)</samp>](https://github.com/soybeanjs/soybean-admin/commit/00f41dd)
+
+### &nbsp;&nbsp;&nbsp;📖 文档
+
+- **项目**: 更新更新日志 &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(a0b76)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a0b76da)
+
+### &nbsp;&nbsp;&nbsp;🏡 杂务
+
+- **依赖**: 更新依赖 &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(f6bd6)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f6bd6b8)
+- **项目**: 添加脚本 `czh` &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(02069)</samp>](https://github.com/soybeanjs/soybean-admin/commit/0206969)
+
+### &nbsp;&nbsp;&nbsp;❤️ 贡献者
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;[![mmdapl](https://github.com/mmdapl.png?size=48)](https://github.com/mmdapl)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;
+
+
+## [v1.2.8](https://github.com/soybeanjs/soybean-admin/compare/v1.2.7...v1.2.8) (2024-07-20)
+
+### &nbsp;&nbsp;&nbsp;🐞 修复
+
+- **包**:
+  - @sa/hooks: 修复 useHookTable 的 searchParams。修复了 #552 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/552 提出 [<samp>(96c10)</samp>](https://github.com/soybeanjs/soybean-admin/commit/96c1044)
+- **类型**:
+  - 修复了引用类型错误 &nbsp;-&nbsp; 由 **dodu2014** 在 https://github.com/soybeanjs/soybean-admin/issues/551 提出 [<samp>(3e2a9)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3e2a993)
+  - 修复 useHookTable 的数据类型 &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(276ea)</samp>](https://github.com/soybeanjs/soybean-admin/commit/276ea7f)
+
+### &nbsp;&nbsp;&nbsp;💅 重构
+
+- **项目**: 用 `klona` 替换 `lodash-es` 的 `cloneDeep` &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(a9133)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a91335d)
+
+### &nbsp;&nbsp;&nbsp;📖 文档
+
+- **项目**: 更新更新日志 &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(58fc0)</samp>](https://github.com/soybeanjs/soybean-admin/commit/58fc096)
+
+### &nbsp;&nbsp;&nbsp;🏡 杂务
+
+- **依赖**: 更新依赖 &nbsp;-&nbsp; 由 @honghuangdc 提出 [<samp>(cf019)</samp>](https://github.com/soybeanjs/soybean-admin/commit/cf0192a)
+
+### &nbsp;&nbsp;&nbsp;❤️ 贡献者
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
+[dodu2014](mailto:dodu@live.cn)
+
 
 ## [v1.2.7](https://github.com/honghuangdc/soybean-admin/compare/v1.2.6...v1.2.7) (2024-07-12)
 

README.md

@@ -111,6 +111,7 @@ pnpm build
 
 ## Ecosystem
 
+- [react-soybean-admin](https://github.com/mufeng889/react-soybean-admin): SoybeanAdmin based version of React.
 - [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).
@@ -155,7 +156,7 @@ Thanks the following people for their contributions. If you want to contribute t
 
   <div>
   	<p>QQ Group</p>
-    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-2.jpg" style="width:200px" />
+    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-3.jpg" style="width:200px" />
   </div>
 	<!-- <div>
 		<p>WeChat Group</p>
@@ -165,10 +166,6 @@ Thanks the following people for their contributions. If you want to contribute t
 		<p>Add the following WeChat to invite to the WeChat group</p>
 		<img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybeanjs.jpg" style="width:200px" />
 	</div>
-  <div>
-    <p>Add Soybean's WeChat for business consultation, cooperation, project architecture, one-on-one guidance, etc.</p>
-    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybean.jpg" style="width:200px" />
-  </div>
 
 ## Star Trend
 

README.zh_CN.md

@@ -57,6 +57,36 @@
 - [地址](https://docs.soybeanjs.cn)
 - [旧版文档](https://legacy-docs.soybeanjs.cn)
 
+
+## 合作事项
+
+我们非常感谢大家对 [`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) 的支持！为了进一步回馈社区，并助力企业和开发者实现个性化需求，我们现提供多种合作服务，期待与您携手共赢。
+
+##### 1、定制化管理后台开发
+
+针对企业和开发者的特定业务需求，我们提供基于 [`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) 的定制化管理后台开发服务。我们的团队具备丰富的行业经验，能够迅速理解并实现您的需求，打造高效、灵活且安全的定制化解决方案。
+
+- **定制开发**：我们将根据您的具体需求，提供从需求分析、UI设计到功能实现的全方位服务，确保项目高效交付。
+- **功能扩展**：在 [`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) 基础上，扩展您所需的特定功能模块，提升管理后台的功能和用户体验。
+
+##### 2、企业外包服务
+
+我们承接各类企业级外包项目，特别是在管理后台系统的开发、集成与运维方面。我们以精益求精的态度，确保项目的质量和进度，为您的业务提供强有力的技术支持。
+
+- **项目开发**：无论是全新的项目，还是现有系统的优化与集成，我们都将为您量身打造高效可靠的解决方案。
+- **系统集成与维护**：我们也提供基于 [`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) 的系统集成与长期维护服务，确保您的系统稳定、安全地运行。
+
+##### 3、联系方式
+
+如有合作意向或项目咨询，请通过以下方式与我们联系：
+
+- **Email**: [soybeanjs@outlook.com](mailto:soybeanjs@outlook.com)
+- **GitHub Issues**: 欢迎通过 [GitHub Issues](https://github.com/soybeanjs/soybean-admin/issues/new) 联系我们，进行初步的合作洽谈。
+- **商务合作微信**:  honghuangdc
+
+期待与您开展深入合作，共同推动 SoybeanAdmin 项目及其在更多领域的成功应用！
+
+
 ## 示例图片
 
 ![](https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybean-admin-v1-01.png)
@@ -109,6 +139,7 @@ pnpm build
 
 ## 周边生态
 
+- [react-soybean-admin](https://github.com/mufeng889/react-soybean-admin): 基于SoybeanAdmin的React版本.
 - [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) 开发的简单权限系统。
@@ -155,7 +186,7 @@ pnpm build
 
   <div>
   	<p>QQ交流群</p>
-    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-2.jpg" style="width:200px" />
+    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-3.jpg" style="width:200px" />
   </div>
 	<!-- <div>
 		<p>微信群</p>
@@ -165,10 +196,6 @@ pnpm build
 		<p>添加下面微信邀请进微信群</p>
 		<img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybeanjs.jpg" style="width:200px" />
 	</div>
-  <div>
-    <p>添加 Soybean 的微信，业务咨询、合作、项目架构、一对一指导等</p>
-    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybean.jpg" style="width:200px" />
-  </div>
 
 ## Star 趋势
 

build/config/proxy.ts

@@ -5,10 +5,10 @@ import { createServiceConfig } from '../../src/utils/service';
  * Set http proxy
  *
  * @param env - The current env
- * @param isDev - Is development environment
+ * @param enable - If enable http proxy
  */
-export function createViteProxy(env: Env.ImportMeta, isDev: boolean) {
-  const isEnableHttpProxy = isDev && env.VITE_HTTP_PROXY === 'Y';
+export function createViteProxy(env: Env.ImportMeta, enable: boolean) {
+  const isEnableHttpProxy = enable && env.VITE_HTTP_PROXY === 'Y';
 
   if (!isEnableHttpProxy) return undefined;
 

build/plugins/router.ts

@@ -8,20 +8,6 @@ export function setupElegantRouter() {
       base: 'src/layouts/base-layout/index.vue',
       blank: 'src/layouts/blank-layout/index.vue'
     },
-    customRoutes: {
-      names: [
-        'exception_403',
-        'exception_404',
-        'exception_500',
-        'document_project',
-        'document_project-link',
-        'document_vue',
-        'document_vite',
-        'document_unocss',
-        'document_naive',
-        'document_antd'
-      ]
-    },
     routePathTransformer(routeName, routePath) {
       const key = routeName as RouteKey;
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "soybean-admin",
   "type": "module",
-  "version": "1.2.8",
+  "version": "1.3.5",
   "description": "A fresh and elegant admin template, based on Vue3、Vite3、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite3、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
   "author": {
     "name": "Soybean",
@@ -35,6 +35,7 @@
     "build:test": "vite build --mode test",
     "cleanup": "sa cleanup",
     "commit": "sa git-commit",
+    "commit:zh": "sa git-commit -l=zh-cn",
     "dev": "vite --mode test",
     "dev:prod": "vite --mode prod",
     "gen-route": "sa gen-route",
@@ -53,50 +54,51 @@
     "@sa/hooks": "workspace:*",
     "@sa/materials": "workspace:*",
     "@sa/utils": "workspace:*",
-    "@vueuse/core": "10.11.0",
+    "@vueuse/core": "11.0.3",
     "clipboard": "2.0.11",
-    "dayjs": "1.11.12",
+    "dayjs": "1.11.13",
     "echarts": "5.5.1",
+    "json5": "2.2.3",
     "naive-ui": "2.39.0",
     "nprogress": "0.2.0",
-    "pinia": "2.1.7",
-    "tailwind-merge": "2.4.0",
-    "vue": "3.4.33",
-    "vue-draggable-plus": "0.5.2",
-    "vue-i18n": "9.13.1",
-    "vue-router": "4.4.0"
+    "pinia": "2.2.2",
+    "tailwind-merge": "2.5.2",
+    "vue": "3.5.3",
+    "vue-draggable-plus": "0.5.3",
+    "vue-i18n": "9.14.0",
+    "vue-router": "4.4.3"
   },
   "devDependencies": {
-    "@elegant-router/vue": "0.3.7",
-    "@iconify/json": "2.2.229",
+    "@elegant-router/vue": "0.3.8",
+    "@iconify/json": "2.2.245",
     "@sa/scripts": "workspace:*",
     "@sa/uno-preset": "workspace:*",
-    "@soybeanjs/eslint-config": "1.3.7",
-    "@types/node": "20.14.11",
+    "@soybeanjs/eslint-config": "1.4.0",
+    "@types/node": "22.5.4",
     "@types/nprogress": "0.2.3",
-    "@unocss/eslint-config": "0.61.5",
-    "@unocss/preset-icons": "0.61.5",
-    "@unocss/preset-uno": "0.61.5",
-    "@unocss/transformer-directives": "0.61.5",
-    "@unocss/transformer-variant-group": "0.61.5",
-    "@unocss/vite": "0.61.5",
-    "@vitejs/plugin-vue": "5.0.5",
-    "@vitejs/plugin-vue-jsx": "4.0.0",
-    "eslint": "9.7.0",
-    "eslint-plugin-vue": "9.27.0",
-    "lint-staged": "15.2.7",
-    "sass": "1.77.8",
+    "@unocss/eslint-config": "0.62.3",
+    "@unocss/preset-icons": "0.62.3",
+    "@unocss/preset-uno": "0.62.3",
+    "@unocss/transformer-directives": "0.62.3",
+    "@unocss/transformer-variant-group": "0.62.3",
+    "@unocss/vite": "0.62.3",
+    "@vitejs/plugin-vue": "5.1.3",
+    "@vitejs/plugin-vue-jsx": "4.0.1",
+    "eslint": "9.10.0",
+    "eslint-plugin-vue": "9.28.0",
+    "lint-staged": "15.2.10",
+    "sass": "1.78.0",
     "simple-git-hooks": "2.11.1",
-    "tsx": "4.16.2",
-    "typescript": "5.5.3",
-    "unplugin-icons": "0.19.0",
-    "unplugin-vue-components": "0.27.3",
-    "vite": "5.3.4",
+    "tsx": "4.19.0",
+    "typescript": "5.5.4",
+    "unplugin-icons": "0.19.3",
+    "unplugin-vue-components": "0.27.4",
+    "vite": "5.4.3",
     "vite-plugin-progress": "0.0.7",
     "vite-plugin-svg-icons": "2.0.1",
-    "vite-plugin-vue-devtools": "7.3.6",
+    "vite-plugin-vue-devtools": "7.4.4",
     "vue-eslint-parser": "9.4.3",
-    "vue-tsc": "2.0.26"
+    "vue-tsc": "2.1.6"
   },
   "simple-git-hooks": {
     "commit-msg": "pnpm sa git-commit-verify",

packages/axios/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/axios",
-  "version": "1.2.8",
+  "version": "1.3.5",
   "exports": {
     ".": "./src/index.ts"
   },
@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "@sa/utils": "workspace:*",
-    "axios": "1.7.2",
-    "axios-retry": "4.4.1",
-    "qs": "6.12.3"
+    "axios": "1.7.7",
+    "axios-retry": "4.5.0",
+    "qs": "6.13.0"
   },
   "devDependencies": {
     "@types/qs": "6.9.15"

packages/axios/src/index.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosError } from 'axios';
-import type { AxiosResponse, CancelTokenSource, CreateAxiosDefaults, InternalAxiosRequestConfig } from 'axios';
+import type { AxiosResponse, CreateAxiosDefaults, InternalAxiosRequestConfig } from 'axios';
 import axiosRetry from 'axios-retry';
 import { nanoid } from '@sa/utils';
 import { createAxiosConfig, createDefaultOptions, createRetryOptions } from './options';
@@ -22,7 +22,7 @@ function createCommonRequest<ResponseData = any>(
   const axiosConf = createAxiosConfig(axiosConfig);
   const instance = axios.create(axiosConf);
 
-  const cancelTokenSourceMap = new Map<string, CancelTokenSource>();
+  const abortControllerMap = new Map<string, AbortController>();
 
   // config axios retry
   const retryOptions = createRetryOptions(axiosConf);
@@ -35,10 +35,12 @@ function createCommonRequest<ResponseData = any>(
     const requestId = nanoid();
     config.headers.set(REQUEST_ID_KEY, requestId);
 
-    // config cancel token
-    const cancelTokenSource = axios.CancelToken.source();
-    config.cancelToken = cancelTokenSource.token;
-    cancelTokenSourceMap.set(requestId, cancelTokenSource);
+    // config abort controller
+    if (!config.signal) {
+      const abortController = new AbortController();
+      config.signal = abortController.signal;
+      abortControllerMap.set(requestId, abortController);
+    }
 
     // handle config by hook
     const handledConfig = opts.onRequest?.(config) || config;
@@ -79,18 +81,18 @@ function createCommonRequest<ResponseData = any>(
   );
 
   function cancelRequest(requestId: string) {
-    const cancelTokenSource = cancelTokenSourceMap.get(requestId);
-    if (cancelTokenSource) {
-      cancelTokenSource.cancel();
-      cancelTokenSourceMap.delete(requestId);
+    const abortController = abortControllerMap.get(requestId);
+    if (abortController) {
+      abortController.abort();
+      abortControllerMap.delete(requestId);
     }
   }
 
   function cancelAllRequest() {
-    cancelTokenSourceMap.forEach(cancelTokenSource => {
-      cancelTokenSource.cancel();
+    abortControllerMap.forEach(abortController => {
+      abortController.abort();
     });
-    cancelTokenSourceMap.clear();
+    abortControllerMap.clear();
   }
 
   return {
@@ -160,12 +162,12 @@ export function createFlatRequest<ResponseData = any, State = Record<string, unk
       if (responseType === 'json') {
         const data = opts.transformBackendResponse(response);
 
-        return { data, error: null };
+        return { data, error: null, response };
       }
 
       return { data: response.data as MappedType<R, T>, error: null };
     } catch (error) {
-      return { data: null, error };
+      return { data: null, error, response: (error as AxiosError<ResponseData>).response };
     }
   } as FlatRequestInstance<State, ResponseData>;
 

packages/axios/src/options.ts

@@ -20,7 +20,7 @@ export function createDefaultOptions<ResponseData = any>(options?: Partial<Reque
 
 export function createRetryOptions(config?: Partial<CreateAxiosDefaults>) {
   const retryConfig: IAxiosRetryConfig = {
-    retries: 3
+    retries: 0
   };
 
   Object.assign(retryConfig, config);

packages/axios/src/type.ts

@@ -69,7 +69,19 @@ export type CustomAxiosRequestConfig<R extends ResponseType = 'json'> = Omit<Axi
 };
 
 export interface RequestInstanceCommon<T> {
+  /**
+   * cancel the request by request id
+   *
+   * if the request provide abort controller sign from config, it will not collect in the abort controller map
+   *
+   * @param requestId
+   */
   cancelRequest: (requestId: string) => void;
+  /**
+   * cancel all request
+   *
+   * if the request provide abort controller sign from config, it will not collect in the abort controller map
+   */
   cancelAllRequest: () => void;
   /** you can set custom state in the request instance */
   state: T;
@@ -80,18 +92,20 @@ export interface RequestInstance<S = Record<string, unknown>> extends RequestIns
   <T = any, R extends ResponseType = 'json'>(config: CustomAxiosRequestConfig<R>): Promise<MappedType<R, T>>;
 }
 
-export type FlatResponseSuccessData<T = any> = {
+export type FlatResponseSuccessData<T = any, ResponseData = any> = {
   data: T;
   error: null;
+  response: AxiosResponse<ResponseData>;
 };
 
 export type FlatResponseFailData<ResponseData = any> = {
   data: null;
   error: AxiosError<ResponseData>;
+  response: AxiosResponse<ResponseData>;
 };
 
 export type FlatResponseData<T = any, ResponseData = any> =
-  | FlatResponseSuccessData<T>
+  | FlatResponseSuccessData<T, ResponseData>
   | FlatResponseFailData<ResponseData>;
 
 export interface FlatRequestInstance<S = Record<string, unknown>, ResponseData = any> extends RequestInstanceCommon<S> {

packages/color/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/color",
-  "version": "1.2.8",
+  "version": "1.3.5",
   "exports": {
     ".": "./src/index.ts"
   },

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/hooks",
-  "version": "1.2.8",
+  "version": "1.3.5",
   "exports": {
     ".": "./src/index.ts"
   },

packages/materials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/materials",
-  "version": "1.2.8",
+  "version": "1.3.5",
   "exports": {
     ".": "./src/index.ts"
   },

packages/ofetch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/fetch",
-  "version": "1.2.8",
+  "version": "1.3.5",
   "exports": {
     ".": "./src/index.ts"
   },

packages/scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/scripts",
-  "version": "1.2.8",
+  "version": "1.3.5",
   "bin": {
     "sa": "./bin.ts"
   },
@@ -14,14 +14,14 @@
   },
   "devDependencies": {
     "@soybeanjs/changelog": "0.3.24",
-    "bumpp": "9.4.1",
-    "c12": "1.11.1",
+    "bumpp": "9.5.2",
+    "c12": "1.11.2",
     "cac": "6.7.14",
     "consola": "3.2.3",
     "enquirer": "2.4.1",
-    "execa": "9.3.0",
+    "execa": "9.3.1",
     "kolorist": "1.8.0",
-    "npm-check-updates": "16.14.20",
+    "npm-check-updates": "17.1.1",
     "rimraf": "6.0.1"
   }
 }

packages/scripts/src/commands/git-commit.ts

@@ -1,9 +1,9 @@
 import path from 'node:path';
 import { readFileSync } from 'node:fs';
 import { prompt } from 'enquirer';
-import { bgRed, green, red, yellow } from 'kolorist';
 import { execCommand } from '../shared';
-import type { CliOption } from '../types';
+import { locales } from '../locales';
+import type { Lang } from '../locales';
 
 interface PromptObject {
   types: string;
@@ -14,13 +14,11 @@ interface PromptObject {
 /**
  * Git commit with Conventional Commits standard
  *
- * @param gitCommitTypes
- * @param gitCommitScopes
+ * @param lang
  */
-export async function gitCommit(
-  gitCommitTypes: CliOption['gitCommitTypes'],
-  gitCommitScopes: CliOption['gitCommitScopes']
-) {
+export async function gitCommit(lang: Lang = 'en-us') {
+  const { gitCommitMessages, gitCommitTypes, gitCommitScopes } = locales[lang];
+
   const typesChoices = gitCommitTypes.map(([value, msg]) => {
     const nameWithSuffix = `${value}:`;
 
@@ -41,19 +39,19 @@ export async function gitCommit(
     {
       name: 'types',
       type: 'select',
-      message: 'Please select a type',
+      message: gitCommitMessages.types,
       choices: typesChoices
     },
     {
       name: 'scopes',
       type: 'select',
-      message: 'Please select a scope',
+      message: gitCommitMessages.scopes,
       choices: scopesChoices
     },
     {
       name: 'description',
       type: 'text',
-      message: `Please enter a description (add prefix ${yellow('!')} to indicate breaking change)`
+      message: gitCommitMessages.description
     }
   ]);
 
@@ -67,20 +65,20 @@ export async function gitCommit(
 }
 
 /** Git commit message verify */
-export async function gitCommitVerify() {
+export async function gitCommitVerify(lang: Lang = 'en-us', ignores: RegExp[] = []) {
   const gitPath = await execCommand('git', ['rev-parse', '--show-toplevel']);
 
   const gitMsgPath = path.join(gitPath, '.git', 'COMMIT_EDITMSG');
 
   const commitMsg = readFileSync(gitMsgPath, 'utf8').trim();
 
+  if (ignores.some(regExp => regExp.test(commitMsg))) return;
+
   const REG_EXP = /(?<type>[a-z]+)(?:\((?<scope>.+)\))?(?<breaking>!)?: (?<description>.+)/i;
 
   if (!REG_EXP.test(commitMsg)) {
-    throw new Error(
-      `${bgRed(' ERROR ')} ${red('git commit message must match the Conventional Commits standard!')}\n\n${green(
-        'Recommended to use the command `pnpm commit` to generate Conventional Commits compliant commit information.\nGet more info about Conventional Commits, follow this link: https://conventionalcommits.org'
-      )}`
-    );
+    const errorMsg = locales[lang].gitCommitVerify;
+
+    throw new Error(errorMsg);
   }
 }

packages/scripts/src/config/index.ts

@@ -12,34 +12,18 @@ const defaultOptions: CliOption = {
     '**/node_modules',
     '!node_modules/**'
   ],
-  gitCommitTypes: [
-    ['feat', 'A new feature'],
-    ['fix', 'A bug fix'],
-    ['docs', 'Documentation only changes'],
-    ['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'],
-    ['chore', "Other changes that don't modify src or test files"],
-    ['revert', 'Reverts a previous commit']
-  ],
-  gitCommitScopes: [
-    ['projects', 'project'],
-    ['packages', 'packages'],
-    ['components', 'components'],
-    ['hooks', 'hook functions'],
-    ['utils', 'utils functions'],
-    ['types', 'TS declaration'],
-    ['styles', 'style'],
-    ['deps', 'project dependencies'],
-    ['release', 'release project'],
-    ['other', 'other changes']
-  ],
   ncuCommandArgs: ['--deep', '-u'],
-  changelogOptions: {}
+  changelogOptions: {},
+  gitCommitVerifyIgnores: [
+    /^((Merge pull request)|(Merge (.*?) into (.*?)|(Merge branch (.*?)))(?:\r?\n)*$)/m,
+    /^(Merge tag (.*?))(?:\r?\n)*$/m,
+    /^(R|r)evert (.*)/,
+    /^(amend|fixup|squash)!/,
+    /^(Merged (.*?)(in|into) (.*)|Merged PR (.*): (.*))/,
+    /^Merge remote-tracking branch(\s*)(.*)/,
+    /^Automatic merge(.*)/,
+    /^Auto-merged (.*?) into (.*)/
+  ]
 };
 
 export async function loadCliOptions(overrides?: Partial<CliOption>, cwd = process.cwd()) {

packages/scripts/src/index.ts

@@ -3,6 +3,7 @@ import { blue, lightGreen } from 'kolorist';
 import { version } from '../package.json';
 import { cleanup, genChangelog, generateRoute, gitCommit, gitCommitVerify, release, updatePkg } from './commands';
 import { loadCliOptions } from './config';
+import type { Lang } from './locales';
 
 type Command = 'cleanup' | 'update-pkg' | 'git-commit' | 'git-commit-verify' | 'changelog' | 'release' | 'gen-route';
 
@@ -18,13 +19,19 @@ interface CommandArg {
   /** Generate changelog by total tags */
   total?: boolean;
   /**
-   * The glob pattern of dirs to cleanup
+   * The glob pattern of dirs to clean up
    *
    * If not set, it will use the default value
    *
    * Multiple values use "," to separate them
    */
   cleanupDir?: string;
+  /**
+   * display lang of cli
+   *
+   * @default 'en-us'
+   */
+  lang?: Lang;
 }
 
 export async function setupCli() {
@@ -44,6 +51,7 @@ export async function setupCli() {
       '-c, --cleanupDir <dir>',
       'The glob pattern of dirs to cleanup, If not set, it will use the default value, Multiple values use "," to separate them'
     )
+    .option('-l, --lang <lang>', 'display lang of cli', { default: 'en-us', type: [String] })
     .help();
 
   const commands: CommandWithAction<CommandArg> = {
@@ -61,14 +69,14 @@ export async function setupCli() {
     },
     'git-commit': {
       desc: 'git commit, generate commit message which match Conventional Commits standard',
-      action: async () => {
-        await gitCommit(cliOptions.gitCommitTypes, cliOptions.gitCommitScopes);
+      action: async args => {
+        await gitCommit(args?.lang);
       }
     },
     'git-commit-verify': {
       desc: 'verify git commit message, make sure it match Conventional Commits standard',
-      action: async () => {
-        await gitCommitVerify();
+      action: async args => {
+        await gitCommitVerify(args?.lang, cliOptions.gitCommitVerifyIgnores);
       }
     },
     changelog: {

packages/scripts/src/locales/index.ts

@@ -0,0 +1,82 @@
+import { bgRed, green, red, yellow } from 'kolorist';
+
+export type Lang = 'zh-cn' | 'en-us';
+
+export const locales = {
+  'zh-cn': {
+    gitCommitMessages: {
+      types: '请选择提交类型',
+      scopes: '请选择提交范围',
+      description: `请输入描述信息（${yellow('!')}开头表示破坏性改动`
+    },
+    gitCommitTypes: [
+      ['feat', '新功能'],
+      ['feat-wip', '开发中的功能，比如某功能的部分代码'],
+      ['fix', '修复Bug'],
+      ['docs', '只涉及文档更新'],
+      ['typo', '代码或文档勘误，比如错误拼写'],
+      ['style', '修改代码风格，不影响代码含义的变更'],
+      ['refactor', '代码重构，既不修复 bug 也不添加功能的代码变更'],
+      ['perf', '可提高性能的代码更改'],
+      ['optimize', '优化代码质量的代码更改'],
+      ['test', '添加缺失的测试或更正现有测试'],
+      ['build', '影响构建系统或外部依赖项的更改'],
+      ['ci', '对 CI 配置文件和脚本的更改'],
+      ['chore', '没有修改src或测试文件的其他变更'],
+      ['revert', '还原先前的提交']
+    ] as [string, string][],
+    gitCommitScopes: [
+      ['projects', '项目'],
+      ['packages', '包'],
+      ['components', '组件'],
+      ['hooks', '钩子函数'],
+      ['utils', '工具函数'],
+      ['types', 'TS类型声明'],
+      ['styles', '代码风格'],
+      ['deps', '项目依赖'],
+      ['release', '发布项目新版本'],
+      ['other', '其他的变更']
+    ] as [string, string][],
+    gitCommitVerify: `${bgRed(' 错误 ')} ${red('git 提交信息必须符合 Conventional Commits 标准!')}\n\n${green(
+      '推荐使用命令 `pnpm commit` 生成符合 Conventional Commits 标准的提交信息。\n获取有关 Conventional Commits 的更多信息，请访问此链接: https://conventionalcommits.org'
+    )}`
+  },
+  'en-us': {
+    gitCommitMessages: {
+      types: 'Please select a type',
+      scopes: 'Please select a scope',
+      description: `Please enter a description (add prefix ${yellow('!')} to indicate breaking change)`
+    },
+    gitCommitTypes: [
+      ['feat', 'A new feature'],
+      ['feat-wip', 'Features in development, such as partial code for a certain feature'],
+      ['fix', 'A bug fix'],
+      ['docs', 'Documentation only changes'],
+      ['typo', 'Code or document corrections, such as spelling errors'],
+      ['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'],
+      ['chore', "Other changes that don't modify src or test files"],
+      ['revert', 'Reverts a previous commit']
+    ] as [string, string][],
+    gitCommitScopes: [
+      ['projects', 'project'],
+      ['packages', 'packages'],
+      ['components', 'components'],
+      ['hooks', 'hook functions'],
+      ['utils', 'utils functions'],
+      ['types', 'TS declaration'],
+      ['styles', 'style'],
+      ['deps', 'project dependencies'],
+      ['release', 'release project'],
+      ['other', 'other changes']
+    ] as [string, string][],
+    gitCommitVerify: `${bgRed(' ERROR ')} ${red('git commit message must match the Conventional Commits standard!')}\n\n${green(
+      'Recommended to use the command `pnpm commit` to generate Conventional Commits compliant commit information.\nGet more info about Conventional Commits, follow this link: https://conventionalcommits.org'
+    )}`
+  }
+} satisfies Record<Lang, Record<string, unknown>>;

packages/scripts/src/types/index.ts

@@ -14,10 +14,6 @@ export interface CliOption {
    * ```
    */
   cleanupDirs: string[];
-  /** Git commit types */
-  gitCommitTypes: [string, string][];
-  /** Git commit scopes */
-  gitCommitScopes: [string, string][];
   /**
    * Npm-check-updates command args
    *
@@ -30,4 +26,6 @@ export interface CliOption {
    * @link https://github.com/soybeanjs/changelog
    */
   changelogOptions: Partial<ChangelogOption>;
+  /** The ignore pattern list of git commit verify */
+  gitCommitVerifyIgnores: RegExp[];
 }

packages/uno-preset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/uno-preset",
-  "version": "1.2.8",
+  "version": "1.3.5",
   "exports": {
     ".": "./src/index.ts"
   },

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/utils",
-  "version": "1.2.8",
+  "version": "1.3.5",
   "exports": {
     ".": "./src/index.ts"
   },

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { NConfigProvider, darkTheme } from 'naive-ui';
+import type { WatermarkProps } from 'naive-ui';
 import { useAppStore } from './store/modules/app';
 import { useThemeStore } from './store/modules/theme';
 import { naiveDateLocales, naiveLocales } from './locales/naive';
@@ -21,6 +22,22 @@ const naiveLocale = computed(() => {
 const naiveDateLocale = computed(() => {
   return naiveDateLocales[appStore.locale];
 });
+
+const watermarkProps = computed<WatermarkProps>(() => {
+  return {
+    content: themeStore.watermark?.text || 'SoybeanAdmin',
+    cross: true,
+    fullscreen: true,
+    fontSize: 16,
+    lineHeight: 16,
+    width: 384,
+    height: 384,
+    xOffset: 12,
+    yOffset: 60,
+    rotate: -15,
+    zIndex: 9999
+  };
+});
 </script>
 
 <template>
@@ -33,6 +50,7 @@ const naiveDateLocale = computed(() => {
   >
     <AppProvider>
       <RouterView class="bg-layout" />
+      <NWatermark v-if="themeStore.watermark?.visible" v-bind="watermarkProps" />
     </AppProvider>
   </NConfigProvider>
 </template>

src/components/common/dark-mode-container.vue

@@ -9,7 +9,7 @@ defineProps<Props>();
 </script>
 
 <template>
-  <div class="bg-container text-base_text transition-300" :class="{ 'bg-inverted text-#1f1f1f': inverted }">
+  <div class="bg-container text-base-text transition-300" :class="{ 'bg-inverted text-#1f1f1f': inverted }">
     <slot></slot>
   </div>
 </template>

src/constants/app.ts

@@ -1,5 +1,9 @@
 import { transformRecordToOption } from '@/utils/common';
 
+export const GLOBAL_HEADER_MENU_ID = '__GLOBAL_HEADER_MENU__';
+
+export const GLOBAL_SIDER_MENU_ID = '__GLOBAL_SIDER_MENU__';
+
 export const themeSchemaRecord: Record<UnionKey.ThemeScheme, App.I18n.I18nKey> = {
   light: 'theme.themeSchema.light',
   dark: 'theme.themeSchema.dark',

src/constants/business.ts

@@ -1,29 +0,0 @@
-import { transformRecordToOption } from '@/utils/common';
-
-export const enableStatusRecord: Record<Api.Common.EnableStatus, App.I18n.I18nKey> = {
-  '1': 'page.manage.common.status.enable',
-  '2': 'page.manage.common.status.disable'
-};
-
-export const enableStatusOptions = transformRecordToOption(enableStatusRecord);
-
-export const userGenderRecord: Record<Api.SystemManage.UserGender, App.I18n.I18nKey> = {
-  '1': 'page.manage.user.gender.male',
-  '2': 'page.manage.user.gender.female'
-};
-
-export const userGenderOptions = transformRecordToOption(userGenderRecord);
-
-export const menuTypeRecord: Record<Api.SystemManage.MenuType, App.I18n.I18nKey> = {
-  '1': 'page.manage.menu.type.directory',
-  '2': 'page.manage.menu.type.menu'
-};
-
-export const menuTypeOptions = transformRecordToOption(menuTypeRecord);
-
-export const menuIconTypeRecord: Record<Api.SystemManage.IconType, App.I18n.I18nKey> = {
-  '1': 'page.manage.menu.iconType.iconify',
-  '2': 'page.manage.menu.iconType.local'
-};
-
-export const menuIconTypeOptions = transformRecordToOption(menuIconTypeRecord);

src/hooks/common/router.ts

@@ -30,17 +30,30 @@ export function useRouterPush(inSetup = true) {
       name: key
     };
 
-    if (query) {
+    if (Object.keys(query || {}).length) {
       routeLocation.query = query;
     }
 
-    if (params) {
+    if (Object.keys(params || {}).length) {
       routeLocation.params = params;
     }
 
     return routerPush(routeLocation);
   }
 
+  function routerPushByKeyWithMetaQuery(key: RouteKey) {
+    const allRoutes = router.getRoutes();
+    const meta = allRoutes.find(item => item.name === key)?.meta || null;
+
+    const query: Record<string, string> = {};
+
+    meta?.query?.forEach(item => {
+      query[item.key] = item.value;
+    });
+
+    return routerPushByKey(key, { query });
+  }
+
   async function toHome() {
     return routerPushByKey('root');
   }
@@ -80,11 +93,15 @@ export function useRouterPush(inSetup = true) {
     return routerPushByKey('login', { query, params: { module } });
   }
 
-  /** Redirect from login */
-  async function redirectFromLogin() {
+  /**
+   * Redirect from login
+   *
+   * @param [needRedirect=true] Whether to redirect after login. Default is `true`
+   */
+  async function redirectFromLogin(needRedirect = true) {
     const redirect = route.value.query?.redirect as string;
 
-    if (redirect) {
+    if (needRedirect && redirect) {
       routerPush(redirect);
     } else {
       toHome();
@@ -95,6 +112,7 @@ export function useRouterPush(inSetup = true) {
     routerPush,
     routerBack,
     routerPushByKey,
+    routerPushByKeyWithMetaQuery,
     toLogin,
     toggleLoginModule,
     redirectFromLogin

src/hooks/common/table.ts

@@ -40,17 +40,20 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
     transformer: res => {
       const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
 
+      // Ensure that the size is greater than 0, If it is less than 0, it will cause paging calculation errors.
+      const pageSize = size <= 0 ? 10 : size;
+
       const recordsWithIndex = records.map((item, index) => {
         return {
           ...item,
-          index: (current - 1) * size + index + 1
+          index: (current - 1) * pageSize + index + 1
         };
       });
 
       return {
         data: recordsWithIndex,
         pageNum: current,
-        pageSize: size,
+        pageSize,
         total
       };
     },

src/layouts/base-layout/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import { AdminLayout, LAYOUT_SCROLL_EL_ID } from '@sa/materials';
 import type { LayoutMode } from '@sa/materials';
 import { useAppStore } from '@/store/modules/app';
@@ -18,7 +18,9 @@ defineOptions({
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const { menus } = setupMixMenuContext();
+const { childLevelMenus, isActiveFirstLevelMenuHasChildren } = setupMixMenuContext();
+
+const GlobalMenu = defineAsyncComponent(() => import('../modules/global-menu/index.vue'));
 
 const layoutMode = computed(() => {
   const vertical: LayoutMode = 'vertical';
@@ -26,30 +28,34 @@ const layoutMode = computed(() => {
   return themeStore.layout.mode.includes(vertical) ? vertical : horizontal;
 });
 
-const headerPropsConfig: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps> = {
-  vertical: {
-    showLogo: false,
-    showMenu: false,
-    showMenuToggler: true
-  },
-  'vertical-mix': {
-    showLogo: false,
-    showMenu: false,
-    showMenuToggler: false
-  },
-  horizontal: {
-    showLogo: true,
-    showMenu: true,
-    showMenuToggler: false
-  },
-  'horizontal-mix': {
-    showLogo: true,
-    showMenu: true,
-    showMenuToggler: false
-  }
-};
+const headerProps = computed(() => {
+  const { mode, reverseHorizontalMix } = themeStore.layout;
 
-const headerProps = computed(() => headerPropsConfig[themeStore.layout.mode]);
+  const headerPropsConfig: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps> = {
+    vertical: {
+      showLogo: false,
+      showMenu: false,
+      showMenuToggler: true
+    },
+    'vertical-mix': {
+      showLogo: false,
+      showMenu: false,
+      showMenuToggler: false
+    },
+    horizontal: {
+      showLogo: true,
+      showMenu: true,
+      showMenuToggler: false
+    },
+    'horizontal-mix': {
+      showLogo: true,
+      showMenu: true,
+      showMenuToggler: reverseHorizontalMix && isActiveFirstLevelMenuHasChildren.value
+    }
+  };
+
+  return headerPropsConfig[mode];
+});
 
 const siderVisible = computed(() => themeStore.layout.mode !== 'horizontal');
 
@@ -62,11 +68,16 @@ const siderWidth = computed(() => getSiderWidth());
 const siderCollapsedWidth = computed(() => getSiderCollapsedWidth());
 
 function getSiderWidth() {
+  const { reverseHorizontalMix } = themeStore.layout;
   const { width, mixWidth, mixChildMenuWidth } = themeStore.sider;
 
+  if (isHorizontalMix.value && reverseHorizontalMix) {
+    return isActiveFirstLevelMenuHasChildren.value ? width : 0;
+  }
+
   let w = isVerticalMix.value || isHorizontalMix.value ? mixWidth : width;
 
-  if (isVerticalMix.value && appStore.mixSiderFixed && menus.value.length) {
+  if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
     w += mixChildMenuWidth;
   }
 
@@ -74,11 +85,16 @@ function getSiderWidth() {
 }
 
 function getSiderCollapsedWidth() {
+  const { reverseHorizontalMix } = themeStore.layout;
   const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = themeStore.sider;
 
+  if (isHorizontalMix.value && reverseHorizontalMix) {
+    return isActiveFirstLevelMenuHasChildren.value ? collapsedWidth : 0;
+  }
+
   let w = isVerticalMix.value || isHorizontalMix.value ? mixCollapsedWidth : collapsedWidth;
 
-  if (isVerticalMix.value && appStore.mixSiderFixed && menus.value.length) {
+  if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
     w += mixChildMenuWidth;
   }
 
@@ -116,6 +132,7 @@ function getSiderCollapsedWidth() {
     <template #sider>
       <GlobalSider />
     </template>
+    <GlobalMenu />
     <GlobalContent />
     <ThemeDrawer />
     <template #footer>

src/layouts/context/index.ts

@@ -8,6 +8,7 @@ export const { setupStore: setupMixMenuContext, useStore: useMixMenuContext } =
 function useMixMenu() {
   const route = useRoute();
   const routeStore = useRouteStore();
+  const { selectedKey } = useMenu();
 
   const activeFirstLevelMenuKey = ref('');
 
@@ -16,20 +17,35 @@ function useMixMenu() {
   }
 
   function getActiveFirstLevelMenuKey() {
-    const { hideInMenu, activeMenu } = route.meta;
-    const name = route.name as string;
-
-    const routeName = (hideInMenu ? activeMenu : name) || name;
-
-    const [firstLevelRouteName] = routeName.split('_');
+    const [firstLevelRouteName] = selectedKey.value.split('_');
 
     setActiveFirstLevelMenuKey(firstLevelRouteName);
   }
 
-  const menus = computed(
+  const allMenus = computed<App.Global.Menu[]>(() => routeStore.menus);
+
+  const firstLevelMenus = computed<App.Global.Menu[]>(() =>
+    routeStore.menus.map(menu => {
+      const { children: _, ...rest } = menu;
+
+      return rest;
+    })
+  );
+
+  const childLevelMenus = computed<App.Global.Menu[]>(
     () => routeStore.menus.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []
   );
 
+  const isActiveFirstLevelMenuHasChildren = computed(() => {
+    if (!activeFirstLevelMenuKey.value) {
+      return false;
+    }
+
+    const findItem = allMenus.value.find(item => item.key === activeFirstLevelMenuKey.value);
+
+    return Boolean(findItem?.children?.length);
+  });
+
   watch(
     () => route.name,
     () => {
@@ -39,9 +55,29 @@ function useMixMenu() {
   );
 
   return {
+    allMenus,
+    firstLevelMenus,
+    childLevelMenus,
+    isActiveFirstLevelMenuHasChildren,
     activeFirstLevelMenuKey,
     setActiveFirstLevelMenuKey,
-    getActiveFirstLevelMenuKey,
-    menus
+    getActiveFirstLevelMenuKey
+  };
+}
+
+export function useMenu() {
+  const route = useRoute();
+
+  const selectedKey = computed(() => {
+    const { hideInMenu, activeMenu } = route.meta;
+    const name = route.name as string;
+
+    const routeName = (hideInMenu ? activeMenu : name) || name;
+
+    return routeName;
+  });
+
+  return {
+    selectedKey
   };
 }

src/layouts/modules/global-header/components/user-avatar.vue

@@ -18,7 +18,7 @@ function loginOrRegister() {
   toLogin();
 }
 
-type DropdownKey = 'user-center' | 'logout';
+type DropdownKey = 'logout';
 
 type DropdownOption =
   | {
@@ -33,15 +33,6 @@ type DropdownOption =
 
 const options = computed(() => {
   const opts: DropdownOption[] = [
-    {
-      label: $t('common.userCenter'),
-      key: 'user-center',
-      icon: SvgIconVNode({ icon: 'ph:user-circle', fontSize: 18 })
-    },
-    {
-      type: 'divider',
-      key: 'divider'
-    },
     {
       label: $t('common.logout'),
       key: 'logout',
@@ -68,6 +59,7 @@ function handleDropdown(key: DropdownKey) {
   if (key === 'logout') {
     logout();
   } else {
+    // If your other options are jumps from other routes, they will be directly supported here
     routerPushByKey(key);
   }
 }

src/layouts/modules/global-header/index.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { useFullscreen } from '@vueuse/core';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
-import HorizontalMenu from '../global-menu/base-menu.vue';
+import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
 import GlobalLogo from '../global-logo/index.vue';
 import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
 import GlobalSearch from '../global-search/index.vue';
-import { useMixMenuContext } from '../../context';
 import ThemeButton from './components/theme-button.vue';
 import UserAvatar from './components/user-avatar.vue';
 
@@ -29,29 +26,15 @@ defineProps<Props>();
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const routeStore = useRouteStore();
 const { isFullscreen, toggle } = useFullscreen();
-const { menus } = useMixMenuContext();
-
-const headerMenus = computed(() => {
-  if (themeStore.layout.mode === 'horizontal') {
-    return routeStore.menus;
-  }
-
-  if (themeStore.layout.mode === 'horizontal-mix') {
-    return menus.value;
-  }
-
-  return [];
-});
 </script>
 
 <template>
   <DarkModeContainer class="h-full flex-y-center px-12px shadow-header">
     <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
-    <HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
+    <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
+    <div v-if="showMenu" :id="GLOBAL_HEADER_MENU_ID" class="h-full flex-y-center flex-1-hidden"></div>
     <div v-else class="h-full flex-y-center flex-1-hidden">
-      <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
       <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
     </div>
     <div class="h-full flex-y-center justify-end">

src/layouts/modules/global-menu/base-menu.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import type { MentionOption, MenuProps } from 'naive-ui';
-import { SimpleScrollbar } from '@sa/materials';
-import type { RouteKey } from '@elegant-router/types';
-import { useAppStore } from '@/store/modules/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
-import { useRouterPush } from '@/hooks/common/router';
-
-defineOptions({
-  name: 'BaseMenu'
-});
-
-interface Props {
-  darkTheme?: boolean;
-  mode?: MenuProps['mode'];
-  menus: App.Global.Menu[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  mode: 'vertical'
-});
-
-const route = useRoute();
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const routeStore = useRouteStore();
-const { routerPushByKey } = useRouterPush();
-
-const naiveMenus = computed(() => props.menus as unknown as MentionOption[]);
-
-const isHorizontal = computed(() => props.mode === 'horizontal');
-
-const siderCollapse = computed(() => themeStore.layout.mode === 'vertical' && appStore.siderCollapse);
-
-const headerHeight = computed(() => `${themeStore.header.height}px`);
-
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta;
-  const name = route.name as string;
-
-  const routeName = (hideInMenu ? activeMenu : name) || name;
-
-  return routeName;
-});
-
-const expandedKeys = ref<string[]>([]);
-
-function updateExpandedKeys() {
-  if (isHorizontal.value || siderCollapse.value || !selectedKey.value) {
-    expandedKeys.value = [];
-    return;
-  }
-  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
-}
-
-function handleClickMenu(key: RouteKey) {
-  const query = routeStore.getRouteQueryOfMetaByKey(key);
-
-  routerPushByKey(key, { query });
-}
-
-watch(
-  () => route.name,
-  () => {
-    updateExpandedKeys();
-  },
-  { immediate: true }
-);
-</script>
-
-<template>
-  <SimpleScrollbar>
-    <NMenu
-      v-model:expanded-keys="expandedKeys"
-      :mode="mode"
-      :value="selectedKey"
-      :collapsed="siderCollapse"
-      :collapsed-width="themeStore.sider.collapsedWidth"
-      :collapsed-icon-size="22"
-      :options="naiveMenus"
-      :inverted="darkTheme"
-      :indent="18"
-      responsive
-      @update:value="handleClickMenu"
-    />
-  </SimpleScrollbar>
-</template>
-
-<style scoped>
-:deep(.n-menu--horizontal) {
-  --n-item-height: v-bind(headerHeight) !important;
-}
-</style>

src/layouts/modules/global-menu/components/first-level-menu.vue

@@ -3,31 +3,29 @@ import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { SimpleScrollbar } from '@sa/materials';
 import { transformColorWithOpacity } from '@sa/color';
-import { useAppStore } from '@/store/modules/app';
-import { useRouteStore } from '@/store/modules/route';
-import { useThemeStore } from '@/store/modules/theme';
 
 defineOptions({
   name: 'FirstLevelMenu'
 });
 
 interface Props {
+  menus: App.Global.Menu[];
   activeMenuKey?: string;
   inverted?: boolean;
+  siderCollapse?: boolean;
+  darkMode?: boolean;
+  themeColor: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 interface Emits {
   (e: 'select', menu: App.Global.Menu): boolean;
+  (e: 'toggleSiderCollapse'): void;
 }
 
 const emit = defineEmits<Emits>();
 
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const routeStore = useRouteStore();
-
 interface MixMenuItemProps {
   /** Menu item label */
   label: App.Global.Menu['label'];
@@ -36,12 +34,12 @@ interface MixMenuItemProps {
   /** Active menu item */
   active: boolean;
   /** Mini size */
-  isMini: boolean;
+  isMini?: boolean;
 }
 const [DefineMixMenuItem, MixMenuItem] = createReusableTemplate<MixMenuItemProps>();
 
 const selectedBgColor = computed(() => {
-  const { darkMode, themeColor } = themeStore;
+  const { darkMode, themeColor } = props;
 
   const light = transformColorWithOpacity(themeColor, 0.1, '#ffffff');
   const dark = transformColorWithOpacity(themeColor, 0.3, '#000000');
@@ -52,6 +50,10 @@ const selectedBgColor = computed(() => {
 function handleClickMixMenu(menu: App.Global.Menu) {
   emit('select', menu);
 }
+
+function toggleSiderCollapse() {
+  emit('toggleSiderCollapse');
+}
 </script>
 
 <template>
@@ -80,21 +82,21 @@ function handleClickMixMenu(menu: App.Global.Menu) {
     <slot></slot>
     <SimpleScrollbar>
       <MixMenuItem
-        v-for="menu in routeStore.menus"
+        v-for="menu in menus"
         :key="menu.key"
         :label="menu.label"
         :icon="menu.icon"
         :active="menu.key === activeMenuKey"
-        :is-mini="appStore.siderCollapse"
+        :is-mini="siderCollapse"
         @click="handleClickMixMenu(menu)"
       />
     </SimpleScrollbar>
     <MenuToggler
       arrow-icon
-      :collapsed="appStore.siderCollapse"
+      :collapsed="siderCollapse"
       :z-index="99"
       :class="{ 'text-white:88 !hover:text-white': inverted }"
-      @click="appStore.toggleSiderCollapse"
+      @click="toggleSiderCollapse"
     />
   </div>
 </template>

src/layouts/modules/global-menu/horizontal-mix-menu.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { useRouterPush } from '@/hooks/common/router';
-import { useMixMenuContext } from '../../context';
-import FirstLevelMenu from './first-level-menu.vue';
-
-defineOptions({
-  name: 'HorizontalMixMenu'
-});
-
-const { activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
-const { routerPushByKey } = useRouterPush();
-
-function handleSelectMixMenu(menu: App.Global.Menu) {
-  setActiveFirstLevelMenuKey(menu.key);
-
-  if (!menu.children?.length) {
-    routerPushByKey(menu.routeKey);
-  }
-}
-</script>
-
-<template>
-  <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" @select="handleSelectMixMenu">
-    <slot></slot>
-  </FirstLevelMenu>
-</template>
-
-<style scoped></style>

src/layouts/modules/global-menu/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import VerticalMenu from './modules/vertical-menu.vue';
+import VerticalMixMenu from './modules/vertical-mix-menu.vue';
+import HorizontalMenu from './modules/horizontal-menu.vue';
+import HorizontalMixMenu from './modules/horizontal-mix-menu.vue';
+import ReversedHorizontalMixMenu from './modules/reversed-horizontal-mix-menu.vue';
+
+defineOptions({
+  name: 'GlobalMenu'
+});
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+
+const activeMenu = computed(() => {
+  const menuMap: Record<UnionKey.ThemeLayoutMode, Component> = {
+    vertical: VerticalMenu,
+    'vertical-mix': VerticalMixMenu,
+    horizontal: HorizontalMenu,
+    'horizontal-mix': themeStore.layout.reverseHorizontalMix ? ReversedHorizontalMixMenu : HorizontalMixMenu
+  };
+
+  return menuMap[themeStore.layout.mode];
+});
+
+const reRenderVertical = computed(() => themeStore.layout.mode === 'vertical' && appStore.isMobile);
+</script>
+
+<template>
+  <component :is="activeMenu" :key="reRenderVertical" />
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/modules/horizontal-menu.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+import { useMenu } from '../../../context';
+
+defineOptions({
+  name: 'HorizontalMenu'
+});
+
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { selectedKey } = useMenu();
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <NMenu
+      mode="horizontal"
+      :value="selectedKey"
+      :options="routeStore.menus"
+      :indent="18"
+      responsive
+      @update:value="routerPushByKeyWithMetaQuery"
+    />
+  </Teleport>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+import FirstLevelMenu from '../components/first-level-menu.vue';
+import { useMenu, useMixMenuContext } from '../../../context';
+
+defineOptions({
+  name: 'HorizontalMixMenu'
+});
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
+const { selectedKey } = useMenu();
+
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (!menu.children?.length) {
+    routerPushByKeyWithMetaQuery(menu.routeKey);
+  }
+}
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <NMenu
+      mode="horizontal"
+      :value="selectedKey"
+      :options="childLevelMenus"
+      :indent="18"
+      responsive
+      @update:value="routerPushByKeyWithMetaQuery"
+    />
+  </Teleport>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <FirstLevelMenu
+      :menus="allMenus"
+      :active-menu-key="activeFirstLevelMenuKey"
+      :sider-collapse="appStore.siderCollapse"
+      :dark-mode="themeStore.darkMode"
+      :theme-color="themeStore.themeColor"
+      @select="handleSelectMixMenu"
+      @toggle-sider-collapse="appStore.toggleSiderCollapse"
+    />
+  </Teleport>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import type { RouteKey } from '@elegant-router/types';
+import { SimpleScrollbar } from '@sa/materials';
+import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+import { useMenu, useMixMenuContext } from '../../../context';
+
+defineOptions({
+  name: 'ReversedHorizontalMixMenu'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const {
+  firstLevelMenus,
+  childLevelMenus,
+  activeFirstLevelMenuKey,
+  setActiveFirstLevelMenuKey,
+  isActiveFirstLevelMenuHasChildren
+} = useMixMenuContext();
+const { selectedKey } = useMenu();
+
+function handleSelectMixMenu(key: RouteKey) {
+  setActiveFirstLevelMenuKey(key);
+
+  if (!isActiveFirstLevelMenuHasChildren.value) {
+    routerPushByKeyWithMetaQuery(key);
+  }
+}
+
+const expandedKeys = ref<string[]>([]);
+
+function updateExpandedKeys() {
+  if (appStore.siderCollapse || !selectedKey.value) {
+    expandedKeys.value = [];
+    return;
+  }
+  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
+}
+
+watch(
+  () => route.name,
+  () => {
+    updateExpandedKeys();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <NMenu
+      mode="horizontal"
+      :value="activeFirstLevelMenuKey"
+      :options="firstLevelMenus"
+      :indent="18"
+      responsive
+      @update:value="handleSelectMixMenu"
+    />
+  </Teleport>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <SimpleScrollbar>
+      <NMenu
+        v-model:expanded-keys="expandedKeys"
+        mode="vertical"
+        :value="selectedKey"
+        :collapsed="appStore.siderCollapse"
+        :collapsed-width="themeStore.sider.collapsedWidth"
+        :collapsed-icon-size="22"
+        :options="childLevelMenus"
+        :indent="18"
+        @update:value="routerPushByKeyWithMetaQuery"
+      />
+    </SimpleScrollbar>
+  </Teleport>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/modules/vertical-menu.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { SimpleScrollbar } from '@sa/materials';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useMenu } from '../../../context';
+
+defineOptions({
+  name: 'VerticalMenu'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { selectedKey } = useMenu();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const expandedKeys = ref<string[]>([]);
+
+function updateExpandedKeys() {
+  if (appStore.siderCollapse || !selectedKey.value) {
+    expandedKeys.value = [];
+    return;
+  }
+  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
+}
+
+watch(
+  () => route.name,
+  () => {
+    updateExpandedKeys();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <SimpleScrollbar>
+      <NMenu
+        v-model:expanded-keys="expandedKeys"
+        mode="vertical"
+        :value="selectedKey"
+        :collapsed="appStore.siderCollapse"
+        :collapsed-width="themeStore.sider.collapsedWidth"
+        :collapsed-icon-size="22"
+        :options="routeStore.menus"
+        :inverted="inverted"
+        :indent="18"
+        @update:value="routerPushByKeyWithMetaQuery"
+      />
+    </SimpleScrollbar>
+  </Teleport>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/modules/vertical-mix-menu.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { SimpleScrollbar } from '@sa/materials';
+import { useBoolean } from '@sa/hooks';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+import { $t } from '@/locales';
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useMenu, useMixMenuContext } from '../../../context';
+import FirstLevelMenu from '../components/first-level-menu.vue';
+import GlobalLogo from '../../global-logo/index.vue';
+
+defineOptions({
+  name: 'VerticalMenuMix'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
+const {
+  allMenus,
+  childLevelMenus,
+  activeFirstLevelMenuKey,
+  setActiveFirstLevelMenuKey,
+  getActiveFirstLevelMenuKey
+  //
+} = useMixMenuContext();
+const { selectedKey } = useMenu();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const hasChildMenus = computed(() => childLevelMenus.value.length > 0);
+
+const showDrawer = computed(() => hasChildMenus.value && (drawerVisible.value || appStore.mixSiderFixed));
+
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (menu.children?.length) {
+    setDrawerVisible(true);
+  } else {
+    routerPushByKeyWithMetaQuery(menu.routeKey);
+  }
+}
+
+function handleResetActiveMenu() {
+  setDrawerVisible(false);
+
+  if (!appStore.mixSiderFixed) {
+    getActiveFirstLevelMenuKey();
+  }
+}
+
+const expandedKeys = ref<string[]>([]);
+
+function updateExpandedKeys() {
+  if (appStore.siderCollapse || !selectedKey.value) {
+    expandedKeys.value = [];
+    return;
+  }
+  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
+}
+
+watch(
+  () => route.name,
+  () => {
+    updateExpandedKeys();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <div class="h-full flex" @mouseleave="handleResetActiveMenu">
+      <FirstLevelMenu
+        :menus="allMenus"
+        :active-menu-key="activeFirstLevelMenuKey"
+        :inverted="inverted"
+        :sider-collapse="appStore.siderCollapse"
+        :dark-mode="themeStore.darkMode"
+        :theme-color="themeStore.themeColor"
+        @select="handleSelectMixMenu"
+        @toggle-sider-collapse="appStore.toggleSiderCollapse"
+      >
+        <GlobalLogo :show-title="false" :style="{ height: themeStore.header.height + 'px' }" />
+      </FirstLevelMenu>
+      <div
+        class="relative h-full transition-width-300"
+        :style="{ width: appStore.mixSiderFixed && hasChildMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
+      >
+        <DarkModeContainer
+          class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
+          :inverted="inverted"
+          :style="{ width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
+        >
+          <header class="flex-y-center justify-between px-12px" :style="{ height: themeStore.header.height + 'px' }">
+            <h2 class="text-16px text-primary font-bold">{{ $t('system.title') }}</h2>
+            <PinToggler
+              :pin="appStore.mixSiderFixed"
+              :class="{ 'text-white:88 !hover:text-white': inverted }"
+              @click="appStore.toggleMixSiderFixed"
+            />
+          </header>
+          <SimpleScrollbar>
+            <NMenu
+              v-model:expanded-keys="expandedKeys"
+              mode="vertical"
+              :value="selectedKey"
+              :options="childLevelMenus"
+              :inverted="inverted"
+              :indent="18"
+              @update:value="routerPushByKeyWithMetaQuery"
+            />
+          </SimpleScrollbar>
+        </DarkModeContainer>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/vertical-mix-menu.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useBoolean } from '@sa/hooks';
-import { useAppStore } from '@/store/modules/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-import { $t } from '@/locales';
-import { useMixMenuContext } from '../../context';
-import FirstLevelMenu from './first-level-menu.vue';
-import BaseMenu from './base-menu.vue';
-
-defineOptions({
-  name: 'VerticalMixMenu'
-});
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const { routerPushByKey } = useRouterPush();
-const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
-const { menus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey, getActiveFirstLevelMenuKey } = useMixMenuContext();
-
-const siderInverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
-
-const hasMenus = computed(() => menus.value.length > 0);
-
-const showDrawer = computed(() => hasMenus.value && (drawerVisible.value || appStore.mixSiderFixed));
-
-function handleSelectMixMenu(menu: App.Global.Menu) {
-  setActiveFirstLevelMenuKey(menu.key);
-
-  if (menu.children?.length) {
-    setDrawerVisible(true);
-  } else {
-    routerPushByKey(menu.routeKey);
-  }
-}
-
-function handleResetActiveMenu() {
-  getActiveFirstLevelMenuKey();
-  setDrawerVisible(false);
-}
-</script>
-
-<template>
-  <div class="h-full flex" @mouseleave="handleResetActiveMenu">
-    <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" :inverted="siderInverted" @select="handleSelectMixMenu">
-      <slot></slot>
-    </FirstLevelMenu>
-    <div
-      class="relative h-full transition-width-300"
-      :style="{ width: appStore.mixSiderFixed && hasMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
-    >
-      <DarkModeContainer
-        class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
-        :inverted="siderInverted"
-        :style="{ width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
-      >
-        <header class="flex-y-center justify-between px-12px" :style="{ height: themeStore.header.height + 'px' }">
-          <h2 class="text-16px text-primary font-bold">{{ $t('system.title') }}</h2>
-          <PinToggler
-            :pin="appStore.mixSiderFixed"
-            :class="{ 'text-white:88 !hover:text-white': siderInverted }"
-            @click="appStore.toggleMixSiderFixed"
-          />
-        </header>
-        <BaseMenu :dark-theme="siderInverted" :menus="menus" />
-      </DarkModeContainer>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>

src/layouts/modules/global-sider/index.vue

@@ -2,11 +2,8 @@
 import { computed } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
 import GlobalLogo from '../global-logo/index.vue';
-import VerticalMenu from '../global-menu/base-menu.vue';
-import VerticalMixMenu from '../global-menu/vertical-mix-menu.vue';
-import HorizontalMixMenu from '../global-menu/horizontal-mix-menu.vue';
 
 defineOptions({
   name: 'GlobalSider'
@@ -14,12 +11,12 @@ defineOptions({
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const routeStore = useRouteStore();
 
 const isVerticalMix = computed(() => themeStore.layout.mode === 'vertical-mix');
 const isHorizontalMix = computed(() => themeStore.layout.mode === 'horizontal-mix');
 const darkMenu = computed(() => !themeStore.darkMode && !isHorizontalMix.value && themeStore.sider.inverted);
 const showLogo = computed(() => !isVerticalMix.value && !isHorizontalMix.value);
+const menuWrapperClass = computed(() => (showLogo.value ? 'flex-1-hidden' : 'h-full'));
 </script>
 
 <template>
@@ -29,11 +26,7 @@ const showLogo = computed(() => !isVerticalMix.value && !isHorizontalMix.value);
       :show-title="!appStore.siderCollapse"
       :style="{ height: themeStore.header.height + 'px' }"
     />
-    <VerticalMixMenu v-if="isVerticalMix">
-      <GlobalLogo :show-title="false" :style="{ height: themeStore.header.height + 'px' }" />
-    </VerticalMixMenu>
-    <HorizontalMixMenu v-else-if="isHorizontalMix" />
-    <VerticalMenu v-else :dark-theme="darkMenu" :menus="routeStore.menus" />
+    <div :id="GLOBAL_SIDER_MENU_ID" :class="menuWrapperClass"></div>
   </DarkModeContainer>
 </template>
 

src/layouts/modules/theme-drawer/components/setting-item.vue

@@ -14,7 +14,7 @@ defineProps<Props>();
 <template>
   <div class="w-full flex-y-center justify-between">
     <div>
-      <span class="pr-8px text-base_text">{{ label }}</span>
+      <span class="pr-8px text-base-text">{{ label }}</span>
       <slot name="suffix"></slot>
     </div>
     <slot></slot>

src/layouts/modules/theme-drawer/modules/dark-mode.vue

@@ -25,6 +25,10 @@ function handleGrayscaleChange(value: boolean) {
   themeStore.setGrayscale(value);
 }
 
+function handleColourWeaknessChange(value: boolean) {
+  themeStore.setColourWeakness(value);
+}
+
 const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layout.mode.includes('vertical'));
 </script>
 
@@ -53,6 +57,9 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
     <SettingItem :label="$t('theme.grayscale')">
       <NSwitch :value="themeStore.grayscale" @update:value="handleGrayscaleChange" />
     </SettingItem>
+    <SettingItem :label="$t('theme.colourWeakness')">
+      <NSwitch :value="themeStore.colourWeakness" @update:value="handleColourWeaknessChange" />
+    </SettingItem>
   </div>
 </template>
 

src/layouts/modules/theme-drawer/modules/layout-mode.vue

@@ -3,6 +3,7 @@ import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { $t } from '@/locales';
 import LayoutModeCard from '../components/layout-mode-card.vue';
+import SettingItem from '../components/setting-item.vue';
 
 defineOptions({
   name: 'LayoutMode'
@@ -10,6 +11,10 @@ defineOptions({
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
+
+function handleReverseHorizontalMixChange(value: boolean) {
+  themeStore.setLayoutReverseHorizontalMix(value);
+}
 </script>
 
 <template>
@@ -44,6 +49,13 @@ const themeStore = useThemeStore();
       </div>
     </template>
   </LayoutModeCard>
+  <SettingItem
+    v-if="themeStore.layout.mode === 'horizontal-mix'"
+    :label="$t('theme.layoutMode.reverseHorizontalMix')"
+    class="mt-16px"
+  >
+    <NSwitch :value="themeStore.layout.reverseHorizontalMix" @update:value="handleReverseHorizontalMixChange" />
+  </SettingItem>
 </template>
 
 <style scoped>

src/layouts/modules/theme-drawer/modules/page-fun.vue

@@ -101,6 +101,19 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
     >
       <NSwitch v-model:value="themeStore.footer.right" />
     </SettingItem>
+    <SettingItem v-if="themeStore.watermark" key="8" :label="$t('theme.watermark.visible')">
+      <NSwitch v-model:value="themeStore.watermark.visible" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.watermark?.visible" key="8-1" :label="$t('theme.watermark.text')">
+      <NInput
+        v-model:value="themeStore.watermark.text"
+        autosize
+        type="text"
+        size="small"
+        class="w-120px"
+        placeholder="SoybeanAdmin"
+      />
+    </SettingItem>
   </TransitionGroup>
 </template>
 

src/locales/langs/en-us.ts

@@ -23,6 +23,7 @@ const local: App.I18n.Schema = {
     deleteSuccess: 'Delete Success',
     confirmDelete: 'Are you sure you want to delete?',
     edit: 'Edit',
+    warning: 'Warning',
     error: 'Error',
     index: 'Index',
     keywordSearch: 'Please enter keyword',
@@ -64,12 +65,14 @@ const local: App.I18n.Schema = {
       auto: 'Follow System'
     },
     grayscale: 'Grayscale',
+    colourWeakness: 'Colour Weakness',
     layoutMode: {
       title: 'Layout Mode',
       vertical: 'Vertical Menu Mode',
       horizontal: 'Horizontal Menu Mode',
       'vertical-mix': 'Vertical Mix Menu Mode',
-      'horizontal-mix': 'Horizontal Mix menu Mode'
+      'horizontal-mix': 'Horizontal Mix menu Mode',
+      reverseHorizontalMix: 'Reverse first level menus and child level menus position'
     },
     recommendColor: 'Apply Recommended Color Algorithm',
     recommendColorDesc: 'The recommended color algorithm refers to',
@@ -132,6 +135,10 @@ const local: App.I18n.Schema = {
       height: 'Footer Height',
       right: 'Right Footer'
     },
+    watermark: {
+      visible: 'Watermark Full Screen Visible',
+      text: 'Watermark Text'
+    },
     themeDrawerTitle: 'Theme Configuration',
     pageFunTitle: 'Page Function',
     configOperation: {
@@ -147,42 +154,7 @@ const local: App.I18n.Schema = {
     404: 'Page Not Found',
     500: 'Server Error',
     'iframe-page': 'Iframe',
-    home: 'Home',
-    document: 'Document',
-    document_project: 'Project Document',
-    'document_project-link': 'Project Document(External Link)',
-    document_vue: 'Vue Document',
-    document_vite: 'Vite Document',
-    document_unocss: 'UnoCSS Document',
-    document_naive: 'Naive UI Document',
-    document_antd: 'Ant Design Vue Document',
-    'user-center': 'User Center',
-    about: 'About',
-    function: 'System Function',
-    function_tab: 'Tab',
-    'function_multi-tab': 'Multi Tab',
-    'function_hide-child': 'Hide Child',
-    'function_hide-child_one': 'Hide Child',
-    'function_hide-child_two': 'Two',
-    'function_hide-child_three': 'Three',
-    function_request: 'Request',
-    'function_toggle-auth': 'Toggle Auth',
-    'function_super-page': 'Super Admin Visible',
-    manage: 'System Manage',
-    manage_user: 'User Manage',
-    'manage_user-detail': 'User Detail',
-    manage_role: 'Role Manage',
-    manage_menu: 'Menu Manage',
-    'multi-menu': 'Multi Menu',
-    'multi-menu_first': 'Menu One',
-    'multi-menu_first_child': 'Menu One Child',
-    'multi-menu_second': 'Menu Two',
-    'multi-menu_second_child': 'Menu Two Child',
-    'multi-menu_second_child_home': 'Menu Two Child Home',
-    exception: 'Exception',
-    exception_403: '403',
-    exception_404: '404',
-    exception_500: '500'
+    home: 'Home'
   },
   page: {
     login: {
@@ -231,20 +203,9 @@ const local: App.I18n.Schema = {
         title: 'Bind WeChat'
       }
     },
-    about: {
-      title: 'About',
-      introduction: `SoybeanAdmin is an elegant and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite5, TypeScript, Pinia and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. SoybeanAdmin provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly.`,
-      projectInfo: {
-        title: 'Project Info',
-        version: 'Version',
-        latestBuildTime: 'Latest Build Time',
-        githubLink: 'Github Link',
-        previewLink: 'Preview Link'
-      },
-      prdDep: 'Production Dependency',
-      devDep: 'Development Dependency'
-    },
     home: {
+      branchDesc:
+        'For the convenience of everyone in developing and updating the merge, we have streamlined the code of the main branch, only retaining the homepage menu, and the rest of the content has been moved to the example branch for maintenance. The preview address displays the content of the example branch.',
       greeting: 'Good morning, {userName}, today is another day full of vitality!',
       weatherDesc: 'Today is cloudy to clear, 20℃ - 25℃!',
       projectCount: 'Project Count',
@@ -270,163 +231,6 @@ const local: App.I18n.Schema = {
         desc5: 'Soybean just wrote some of the workbench pages casually, and it was enough to see!'
       },
       creativity: 'Creativity'
-    },
-    function: {
-      tab: {
-        tabOperate: {
-          title: 'Tab Operation',
-          addTab: 'Add Tab',
-          addTabDesc: 'To about page',
-          closeTab: 'Close Tab',
-          closeCurrentTab: 'Close Current Tab',
-          closeAboutTab: 'Close "About" Tab',
-          addMultiTab: 'Add Multi Tab',
-          addMultiTabDesc1: 'To MultiTab page',
-          addMultiTabDesc2: 'To MultiTab page(with query params)'
-        },
-        tabTitle: {
-          title: 'Tab Title',
-          changeTitle: 'Change Title',
-          change: 'Change',
-          resetTitle: 'Reset Title',
-          reset: 'Reset'
-        }
-      },
-      multiTab: {
-        routeParam: 'Route Param',
-        backTab: 'Back function_tab'
-      },
-      toggleAuth: {
-        toggleAccount: 'Toggle Account',
-        authHook: 'Auth Hook Function `hasAuth`',
-        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: {
-      common: {
-        status: {
-          enable: 'Enable',
-          disable: 'Disable'
-        }
-      },
-      role: {
-        title: 'Role List',
-        roleName: 'Role Name',
-        roleCode: 'Role Code',
-        roleStatus: 'Role Status',
-        roleDesc: 'Role Description',
-        menuAuth: 'Menu Auth',
-        buttonAuth: 'Button Auth',
-        form: {
-          roleName: 'Please enter role name',
-          roleCode: 'Please enter role code',
-          roleStatus: 'Please select role status',
-          roleDesc: 'Please enter role description'
-        },
-        addRole: 'Add Role',
-        editRole: 'Edit Role'
-      },
-      user: {
-        title: 'User List',
-        userName: 'User Name',
-        userGender: 'Gender',
-        nickName: 'Nick Name',
-        userPhone: 'Phone Number',
-        userEmail: 'Email',
-        userStatus: 'User Status',
-        userRole: 'User Role',
-        form: {
-          userName: 'Please enter user name',
-          userGender: 'Please select gender',
-          nickName: 'Please enter nick name',
-          userPhone: 'Please enter phone number',
-          userEmail: 'Please enter email',
-          userStatus: 'Please select user status',
-          userRole: 'Please select user role'
-        },
-        addUser: 'Add User',
-        editUser: 'Edit User',
-        gender: {
-          male: 'Male',
-          female: 'Female'
-        }
-      },
-      menu: {
-        home: 'Home',
-        title: 'Menu List',
-        id: 'ID',
-        parentId: 'Parent ID',
-        menuType: 'Menu Type',
-        menuName: 'Menu Name',
-        routeName: 'Route Name',
-        routePath: 'Route Path',
-        pathParam: 'Path Param',
-        layout: 'Layout Component',
-        page: 'Page Component',
-        i18nKey: 'I18n Key',
-        icon: 'Icon',
-        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',
-        menuStatus: 'Menu Status',
-        form: {
-          home: 'Please select home',
-          menuType: 'Please select menu type',
-          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',
-          icon: 'Please enter iconify name',
-          localIcon: 'Please enter local icon name',
-          order: 'Please enter order',
-          keepAlive: 'Please select whether to cache route',
-          href: 'Please enter href',
-          hideInMenu: 'Please select whether to hide menu',
-          activeMenu: 'Please select route name of the highlighted menu',
-          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',
-          menuStatus: 'Please select menu status'
-        },
-        addMenu: 'Add Menu',
-        editMenu: 'Edit Menu',
-        addChildMenu: 'Add Child Menu',
-        type: {
-          directory: 'Directory',
-          menu: 'Menu'
-        },
-        iconType: {
-          iconify: 'Iconify Icon',
-          local: 'Local Icon'
-        }
-      }
     }
   },
   form: {

src/locales/langs/zh-cn.ts

@@ -23,6 +23,7 @@ const local: App.I18n.Schema = {
     deleteSuccess: '删除成功',
     confirmDelete: '确认删除吗？',
     edit: '编辑',
+    warning: '警告',
     error: '错误',
     index: '序号',
     keywordSearch: '请输入关键词搜索',
@@ -63,13 +64,15 @@ const local: App.I18n.Schema = {
       dark: '暗黑模式',
       auto: '跟随系统'
     },
-    grayscale: '灰度模式',
+    grayscale: '灰色模式',
+    colourWeakness: '色弱模式',
     layoutMode: {
       title: '布局模式',
       vertical: '左侧菜单模式',
       'vertical-mix': '左侧菜单混合模式',
       horizontal: '顶部菜单模式',
-      'horizontal-mix': '顶部菜单混合模式'
+      'horizontal-mix': '顶部菜单混合模式',
+      reverseHorizontalMix: '一级菜单与子级菜单位置反转'
     },
     recommendColor: '应用推荐算法的颜色',
     recommendColorDesc: '推荐颜色的算法参照',
@@ -132,6 +135,10 @@ const local: App.I18n.Schema = {
       height: '底部高度',
       right: '底部局右'
     },
+    watermark: {
+      visible: '显示全屏水印',
+      text: '水印文本'
+    },
     themeDrawerTitle: '主题配置',
     pageFunTitle: '页面功能',
     configOperation: {
@@ -147,42 +154,7 @@ const local: App.I18n.Schema = {
     404: '页面不存在',
     500: '服务器错误',
     'iframe-page': '外链页面',
-    home: '首页',
-    document: '文档',
-    document_project: '项目文档',
-    'document_project-link': '项目文档(外链)',
-    document_vue: 'Vue文档',
-    document_vite: 'Vite文档',
-    document_unocss: 'UnoCSS文档',
-    document_naive: 'Naive UI文档',
-    document_antd: 'Ant Design Vue文档',
-    'user-center': '个人中心',
-    about: '关于',
-    function: '系统功能',
-    function_tab: '标签页',
-    'function_multi-tab': '多标签页',
-    'function_hide-child': '隐藏子菜单',
-    'function_hide-child_one': '隐藏子菜单',
-    'function_hide-child_two': '菜单二',
-    'function_hide-child_three': '菜单三',
-    function_request: '请求',
-    'function_toggle-auth': '切换权限',
-    'function_super-page': '超级管理员可见',
-    manage: '系统管理',
-    manage_user: '用户管理',
-    'manage_user-detail': '用户详情',
-    manage_role: '角色管理',
-    manage_menu: '菜单管理',
-    'multi-menu': '多级菜单',
-    'multi-menu_first': '菜单一',
-    'multi-menu_first_child': '菜单一子菜单',
-    'multi-menu_second': '菜单二',
-    'multi-menu_second_child': '菜单二子菜单',
-    'multi-menu_second_child_home': '菜单二子菜单首页',
-    exception: '异常页',
-    exception_403: '403',
-    exception_404: '404',
-    exception_500: '500'
+    home: '首页'
   },
   page: {
     login: {
@@ -231,20 +203,9 @@ const local: App.I18n.Schema = {
         title: '绑定微信'
       }
     },
-    about: {
-      title: '关于',
-      introduction: `SoybeanAdmin 是一个优雅且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。SoybeanAdmin 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。`,
-      projectInfo: {
-        title: '项目信息',
-        version: '版本',
-        latestBuildTime: '最新构建时间',
-        githubLink: 'Github 地址',
-        previewLink: '预览地址'
-      },
-      prdDep: '生产依赖',
-      devDep: '开发依赖'
-    },
     home: {
+      branchDesc:
+        '为了方便大家开发和更新合并，我们对main分支的代码进行了精简，只保留了首页菜单，其余内容已移至example分支进行维护。预览地址显示的内容即为example分支的内容。',
       greeting: '早安，{userName}, 今天又是充满活力的一天!',
       weatherDesc: '今日多云转晴，20℃ - 25℃!',
       projectCount: '项目数',
@@ -270,163 +231,6 @@ const local: App.I18n.Schema = {
         desc5: 'Soybean 刚才把工作台页面随便写了一些，凑合能看了！'
       },
       creativity: '创意'
-    },
-    function: {
-      tab: {
-        tabOperate: {
-          title: '标签页操作',
-          addTab: '添加标签页',
-          addTabDesc: '跳转到关于页面',
-          closeTab: '关闭标签页',
-          closeCurrentTab: '关闭当前标签页',
-          closeAboutTab: '关闭"关于"标签页',
-          addMultiTab: '添加多标签页',
-          addMultiTabDesc1: '跳转到多标签页页面',
-          addMultiTabDesc2: '跳转到多标签页页面(带有查询参数)'
-        },
-        tabTitle: {
-          title: '标签页标题',
-          changeTitle: '修改标题',
-          change: '修改',
-          resetTitle: '重置标题',
-          reset: '重置'
-        }
-      },
-      multiTab: {
-        routeParam: '路由参数',
-        backTab: '返回 function_tab'
-      },
-      toggleAuth: {
-        toggleAccount: '切换账号',
-        authHook: '权限钩子函数 `hasAuth`',
-        superAdminVisible: '超级管理员可见',
-        adminVisible: '管理员可见',
-        adminOrUserVisible: '管理员和用户可见'
-      },
-      request: {
-        repeatedErrorOccurOnce: '重复请求错误只出现一次',
-        repeatedError: '重复请求错误',
-        repeatedErrorMsg1: '自定义请求错误 1',
-        repeatedErrorMsg2: '自定义请求错误 2'
-      }
-    },
-    manage: {
-      common: {
-        status: {
-          enable: '启用',
-          disable: '禁用'
-        }
-      },
-      role: {
-        title: '角色列表',
-        roleName: '角色名称',
-        roleCode: '角色编码',
-        roleStatus: '角色状态',
-        roleDesc: '角色描述',
-        menuAuth: '菜单权限',
-        buttonAuth: '按钮权限',
-        form: {
-          roleName: '请输入角色名称',
-          roleCode: '请输入角色编码',
-          roleStatus: '请选择角色状态',
-          roleDesc: '请输入角色描述'
-        },
-        addRole: '新增角色',
-        editRole: '编辑角色'
-      },
-      user: {
-        title: '用户列表',
-        userName: '用户名',
-        userGender: '性别',
-        nickName: '昵称',
-        userPhone: '手机号',
-        userEmail: '邮箱',
-        userStatus: '用户状态',
-        userRole: '用户角色',
-        form: {
-          userName: '请输入用户名',
-          userGender: '请选择性别',
-          nickName: '请输入昵称',
-          userPhone: '请输入手机号',
-          userEmail: '请输入邮箱',
-          userStatus: '请选择用户状态',
-          userRole: '请选择用户角色'
-        },
-        addUser: '新增用户',
-        editUser: '编辑用户',
-        gender: {
-          male: '男',
-          female: '女'
-        }
-      },
-      menu: {
-        home: '首页',
-        title: '菜单列表',
-        id: 'ID',
-        parentId: '父级菜单ID',
-        menuType: '菜单类型',
-        menuName: '菜单名称',
-        routeName: '路由名称',
-        routePath: '路由路径',
-        pathParam: '路径参数',
-        layout: '布局',
-        page: '页面组件',
-        i18nKey: '国际化key',
-        icon: '图标',
-        localIcon: '本地图标',
-        iconTypeTitle: '图标类型',
-        order: '排序',
-        constant: '常量路由',
-        keepAlive: '缓存路由',
-        href: '外链',
-        hideInMenu: '隐藏菜单',
-        activeMenu: '高亮的菜单',
-        multiTab: '支持多页签',
-        fixedIndexInTab: '固定在页签中的序号',
-        query: '路由参数',
-        button: '按钮',
-        buttonCode: '按钮编码',
-        buttonDesc: '按钮描述',
-        menuStatus: '菜单状态',
-        form: {
-          home: '请选择首页',
-          menuType: '请选择菜单类型',
-          menuName: '请输入菜单名称',
-          routeName: '请输入路由名称',
-          routePath: '请输入路由路径',
-          pathParam: '请输入路径参数',
-          page: '请选择页面组件',
-          layout: '请选择布局组件',
-          i18nKey: '请输入国际化key',
-          icon: '请输入图标',
-          localIcon: '请选择本地图标',
-          order: '请输入排序',
-          keepAlive: '请选择是否缓存路由',
-          href: '请输入外链',
-          hideInMenu: '请选择是否隐藏菜单',
-          activeMenu: '请选择高亮的菜单的路由名称',
-          multiTab: '请选择是否支持多标签',
-          fixedInTab: '请选择是否固定在页签中',
-          fixedIndexInTab: '请输入固定在页签中的序号',
-          queryKey: '请输入路由参数Key',
-          queryValue: '请输入路由参数Value',
-          button: '请选择是否按钮',
-          buttonCode: '请输入按钮编码',
-          buttonDesc: '请输入按钮描述',
-          menuStatus: '请选择菜单状态'
-        },
-        addMenu: '新增菜单',
-        editMenu: '编辑菜单',
-        addChildMenu: '新增子菜单',
-        type: {
-          directory: '目录',
-          menu: '菜单'
-        },
-        iconType: {
-          iconify: 'iconify图标',
-          local: '本地图标'
-        }
-      }
     }
   },
   form: {

src/plugins/app.ts

@@ -1,8 +1,20 @@
 import { h } from 'vue';
+import type { App } from 'vue';
 import { NButton } from 'naive-ui';
-import { $t } from '../locales';
+import { $t } from '@/locales';
+
+export function setupAppErrorHandle(app: App) {
+  app.config.errorHandler = (err, vm, info) => {
+    // eslint-disable-next-line no-console
+    console.error(err, vm, info);
+  };
+}
 
 export function setupAppVersionNotification() {
+  const canAutoUpdateApp = import.meta.env.VITE_AUTOMATICALLY_DETECT_UPDATE === 'Y';
+
+  if (!canAutoUpdateApp) return;
+
   let isShow = false;
 
   document.addEventListener('visibilitychange', async () => {
@@ -52,9 +64,7 @@ export function setupAppVersionNotification() {
 }
 
 async function getHtmlBuildTime() {
-  const baseURL = import.meta.env.VITE_BASE_URL;
-
-  const res = await fetch(`${baseURL}index.html`);
+  const res = await fetch(`/index.html?time=${Date.now()}`);
 
   const html = await res.text();
 

src/router/elegant/imports.ts

@@ -20,21 +20,5 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   500: () => import("@/views/_builtin/500/index.vue"),
   "iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
   login: () => import("@/views/_builtin/login/index.vue"),
-  about: () => import("@/views/about/index.vue"),
-  "function_hide-child_one": () => import("@/views/function/hide-child/one/index.vue"),
-  "function_hide-child_three": () => import("@/views/function/hide-child/three/index.vue"),
-  "function_hide-child_two": () => import("@/views/function/hide-child/two/index.vue"),
-  "function_multi-tab": () => import("@/views/function/multi-tab/index.vue"),
-  function_request: () => import("@/views/function/request/index.vue"),
-  "function_super-page": () => import("@/views/function/super-page/index.vue"),
-  function_tab: () => import("@/views/function/tab/index.vue"),
-  "function_toggle-auth": () => import("@/views/function/toggle-auth/index.vue"),
   home: () => import("@/views/home/index.vue"),
-  manage_menu: () => import("@/views/manage/menu/index.vue"),
-  manage_role: () => import("@/views/manage/role/index.vue"),
-  "manage_user-detail": () => import("@/views/manage/user-detail/[id].vue"),
-  manage_user: () => import("@/views/manage/user/index.vue"),
-  "multi-menu_first_child": () => import("@/views/multi-menu/first_child/index.vue"),
-  "multi-menu_second_child_home": () => import("@/views/multi-menu/second_child_home/index.vue"),
-  "user-center": () => import("@/views/user-center/index.vue"),
 };

src/router/elegant/routes.ts

@@ -39,135 +39,6 @@ export const generatedRoutes: GeneratedRoute[] = [
       hideInMenu: true
     }
   },
-  {
-    name: 'about',
-    path: '/about',
-    component: 'layout.base$view.about',
-    meta: {
-      title: 'about',
-      i18nKey: 'route.about',
-      icon: 'fluent:book-information-24-regular',
-      order: 10
-    }
-  },
-  {
-    name: 'function',
-    path: '/function',
-    component: 'layout.base',
-    meta: {
-      title: 'function',
-      i18nKey: 'route.function',
-      icon: 'icon-park-outline:all-application',
-      order: 6
-    },
-    children: [
-      {
-        name: 'function_hide-child',
-        path: '/function/hide-child',
-        meta: {
-          title: 'function_hide-child',
-          i18nKey: 'route.function_hide-child',
-          icon: 'material-symbols:filter-list-off',
-          order: 2
-        },
-        redirect: '/function/hide-child/one',
-        children: [
-          {
-            name: 'function_hide-child_one',
-            path: '/function/hide-child/one',
-            component: 'view.function_hide-child_one',
-            meta: {
-              title: 'function_hide-child_one',
-              i18nKey: 'route.function_hide-child_one',
-              icon: 'material-symbols:filter-list-off',
-              hideInMenu: true,
-              activeMenu: 'function_hide-child'
-            }
-          },
-          {
-            name: 'function_hide-child_three',
-            path: '/function/hide-child/three',
-            component: 'view.function_hide-child_three',
-            meta: {
-              title: 'function_hide-child_three',
-              i18nKey: 'route.function_hide-child_three',
-              hideInMenu: true,
-              activeMenu: 'function_hide-child'
-            }
-          },
-          {
-            name: 'function_hide-child_two',
-            path: '/function/hide-child/two',
-            component: 'view.function_hide-child_two',
-            meta: {
-              title: 'function_hide-child_two',
-              i18nKey: 'route.function_hide-child_two',
-              hideInMenu: true,
-              activeMenu: 'function_hide-child'
-            }
-          }
-        ]
-      },
-      {
-        name: 'function_multi-tab',
-        path: '/function/multi-tab',
-        component: 'view.function_multi-tab',
-        meta: {
-          title: 'function_multi-tab',
-          i18nKey: 'route.function_multi-tab',
-          icon: 'ic:round-tab',
-          multiTab: true,
-          hideInMenu: true,
-          activeMenu: 'function_tab'
-        }
-      },
-      {
-        name: 'function_request',
-        path: '/function/request',
-        component: 'view.function_request',
-        meta: {
-          title: 'function_request',
-          i18nKey: 'route.function_request',
-          icon: 'carbon:network-overlay',
-          order: 3
-        }
-      },
-      {
-        name: 'function_super-page',
-        path: '/function/super-page',
-        component: 'view.function_super-page',
-        meta: {
-          title: 'function_super-page',
-          i18nKey: 'route.function_super-page',
-          icon: 'ic:round-supervisor-account',
-          order: 5,
-          roles: ['R_SUPER']
-        }
-      },
-      {
-        name: 'function_tab',
-        path: '/function/tab',
-        component: 'view.function_tab',
-        meta: {
-          title: 'function_tab',
-          i18nKey: 'route.function_tab',
-          icon: 'ic:round-tab',
-          order: 1
-        }
-      },
-      {
-        name: 'function_toggle-auth',
-        path: '/function/toggle-auth',
-        component: 'view.function_toggle-auth',
-        meta: {
-          title: 'function_toggle-auth',
-          i18nKey: 'route.function_toggle-auth',
-          icon: 'ic:round-construction',
-          order: 4
-        }
-      }
-    ]
-  },
   {
     name: 'home',
     path: '/home',
@@ -203,141 +74,5 @@ export const generatedRoutes: GeneratedRoute[] = [
       constant: true,
       hideInMenu: true
     }
-  },
-  {
-    name: 'manage',
-    path: '/manage',
-    component: 'layout.base',
-    meta: {
-      title: 'manage',
-      i18nKey: 'route.manage',
-      icon: 'carbon:cloud-service-management',
-      order: 9,
-      roles: ['R_ADMIN']
-    },
-    children: [
-      {
-        name: 'manage_menu',
-        path: '/manage/menu',
-        component: 'view.manage_menu',
-        meta: {
-          title: 'manage_menu',
-          i18nKey: 'route.manage_menu',
-          icon: 'material-symbols:route',
-          order: 3,
-          roles: ['R_ADMIN'],
-          keepAlive: true
-        }
-      },
-      {
-        name: 'manage_role',
-        path: '/manage/role',
-        component: 'view.manage_role',
-        meta: {
-          title: 'manage_role',
-          i18nKey: 'route.manage_role',
-          icon: 'carbon:user-role',
-          order: 2,
-          roles: ['R_SUPER']
-        }
-      },
-      {
-        name: 'manage_user',
-        path: '/manage/user',
-        component: 'view.manage_user',
-        meta: {
-          title: 'manage_user',
-          i18nKey: 'route.manage_user',
-          icon: 'ic:round-manage-accounts',
-          order: 1,
-          roles: ['R_ADMIN']
-        }
-      },
-      {
-        name: 'manage_user-detail',
-        path: '/manage/user-detail/:id',
-        component: 'view.manage_user-detail',
-        props: true,
-        meta: {
-          title: 'manage_user-detail',
-          i18nKey: 'route.manage_user-detail',
-          hideInMenu: true,
-          roles: ['R_ADMIN'],
-          activeMenu: 'manage_user'
-        }
-      }
-    ]
-  },
-  {
-    name: 'multi-menu',
-    path: '/multi-menu',
-    component: 'layout.base',
-    meta: {
-      title: 'multi-menu',
-      i18nKey: 'route.multi-menu',
-      order: 8
-    },
-    children: [
-      {
-        name: 'multi-menu_first',
-        path: '/multi-menu/first',
-        meta: {
-          title: 'multi-menu_first',
-          i18nKey: 'route.multi-menu_first',
-          order: 1
-        },
-        children: [
-          {
-            name: 'multi-menu_first_child',
-            path: '/multi-menu/first/child',
-            component: 'view.multi-menu_first_child',
-            meta: {
-              title: 'multi-menu_first_child',
-              i18nKey: 'route.multi-menu_first_child'
-            }
-          }
-        ]
-      },
-      {
-        name: 'multi-menu_second',
-        path: '/multi-menu/second',
-        meta: {
-          title: 'multi-menu_second',
-          i18nKey: 'route.multi-menu_second',
-          order: 2
-        },
-        children: [
-          {
-            name: 'multi-menu_second_child',
-            path: '/multi-menu/second/child',
-            meta: {
-              title: 'multi-menu_second_child',
-              i18nKey: 'route.multi-menu_second_child'
-            },
-            children: [
-              {
-                name: 'multi-menu_second_child_home',
-                path: '/multi-menu/second/child/home',
-                component: 'view.multi-menu_second_child_home',
-                meta: {
-                  title: 'multi-menu_second_child_home',
-                  i18nKey: 'route.multi-menu_second_child_home'
-                }
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    name: 'user-center',
-    path: '/user-center',
-    component: 'layout.base$view.user-center',
-    meta: {
-      title: 'user-center',
-      i18nKey: 'route.user-center',
-      hideInMenu: true
-    }
   }
 ];

src/router/elegant/transform.ts

@@ -97,10 +97,13 @@ function transformElegantRouteToVueRoute(
     if (component) {
       if (isSingleLevelRoute(route)) {
         const { layout, view } = getSingleLevelRouteComponent(component);
-  
+
         const singleLevelRoute: RouteRecordRaw = {
           path,
           component: layouts[layout],
+          meta: {
+            title: route.meta?.title || ''
+          },
           children: [
             {
               name,
@@ -110,36 +113,35 @@ function transformElegantRouteToVueRoute(
             } as RouteRecordRaw
           ]
         };
-  
+
         return [singleLevelRoute];
       }
-  
+
       if (isLayout(component)) {
         const layoutName = getLayoutName(component);
-  
+
         vueRoute.component = layouts[layoutName];
       }
-  
+
       if (isView(component)) {
         const viewName = getViewName(component);
-  
+
         vueRoute.component = views[viewName];
       }
-  
+
     }
   } catch (error: any) {
     console.error(`Error transforming route "${route.name}": ${error.toString()}`);
     return [];
   }
 
-  
   // add redirect to child
   if (children?.length && !vueRoute.redirect) {
     vueRoute.redirect = {
       name: children[0].name
     };
   }
-  
+
   if (children?.length) {
     const childRoutes = children.flatMap(child => transformElegantRouteToVueRoute(child, layouts, views));
 
@@ -161,47 +163,12 @@ function transformElegantRouteToVueRoute(
 const routeMap: RouteMap = {
   "root": "/",
   "not-found": "/:pathMatch(.*)*",
-  "exception": "/exception",
-  "exception_403": "/exception/403",
-  "exception_404": "/exception/404",
-  "exception_500": "/exception/500",
-  "document": "/document",
-  "document_project": "/document/project",
-  "document_project-link": "/document/project-link",
-  "document_vue": "/document/vue",
-  "document_vite": "/document/vite",
-  "document_unocss": "/document/unocss",
-  "document_naive": "/document/naive",
-  "document_antd": "/document/antd",
   "403": "/403",
   "404": "/404",
   "500": "/500",
-  "about": "/about",
-  "function": "/function",
-  "function_hide-child": "/function/hide-child",
-  "function_hide-child_one": "/function/hide-child/one",
-  "function_hide-child_three": "/function/hide-child/three",
-  "function_hide-child_two": "/function/hide-child/two",
-  "function_multi-tab": "/function/multi-tab",
-  "function_request": "/function/request",
-  "function_super-page": "/function/super-page",
-  "function_tab": "/function/tab",
-  "function_toggle-auth": "/function/toggle-auth",
   "home": "/home",
   "iframe-page": "/iframe-page/:url",
-  "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
-  "manage": "/manage",
-  "manage_menu": "/manage/menu",
-  "manage_role": "/manage/role",
-  "manage_user": "/manage/user",
-  "manage_user-detail": "/manage/user-detail/:id",
-  "multi-menu": "/multi-menu",
-  "multi-menu_first": "/multi-menu/first",
-  "multi-menu_first_child": "/multi-menu/first/child",
-  "multi-menu_second": "/multi-menu/second",
-  "multi-menu_second_child": "/multi-menu/second/child",
-  "multi-menu_second_child_home": "/multi-menu/second/child/home",
-  "user-center": "/user-center"
+  "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?"
 };
 
 /**

src/router/routes/index.ts

@@ -8,160 +8,7 @@ import { transformElegantRoutesToVueRoutes } from '../elegant/transform';
  *
  * @link https://github.com/soybeanjs/elegant-router?tab=readme-ov-file#custom-route
  */
-const customRoutes: CustomRoute[] = [
-  {
-    name: 'exception',
-    path: '/exception',
-    component: 'layout.base',
-    meta: {
-      title: 'exception',
-      i18nKey: 'route.exception',
-      icon: 'ant-design:exception-outlined',
-      order: 7
-    },
-    children: [
-      {
-        name: 'exception_403',
-        path: '/exception/403',
-        component: 'view.403',
-        meta: {
-          title: 'exception_403',
-          i18nKey: 'route.exception_403',
-          icon: 'ic:baseline-block'
-        }
-      },
-      {
-        name: 'exception_404',
-        path: '/exception/404',
-        component: 'view.404',
-        meta: {
-          title: 'exception_404',
-          i18nKey: 'route.exception_404',
-          icon: 'ic:baseline-web-asset-off'
-        }
-      },
-      {
-        name: 'exception_500',
-        path: '/exception/500',
-        component: 'view.500',
-        meta: {
-          title: 'exception_500',
-          i18nKey: 'route.exception_500',
-          icon: 'ic:baseline-wifi-off'
-        }
-      }
-    ]
-  },
-  {
-    name: 'document',
-    path: '/document',
-    component: 'layout.base',
-    meta: {
-      title: 'document',
-      i18nKey: 'route.document',
-      order: 2,
-      icon: 'mdi:file-document-multiple-outline'
-    },
-    children: [
-      {
-        name: 'document_antd',
-        path: '/document/antd',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://antdv.com/components/overview-cn'
-        },
-        meta: {
-          title: 'document_antd',
-          i18nKey: 'route.document_antd',
-          order: 7,
-          icon: 'logos:ant-design'
-        }
-      },
-      {
-        name: 'document_naive',
-        path: '/document/naive',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://www.naiveui.com/zh-CN/os-theme/docs/introduction'
-        },
-        meta: {
-          title: 'document_naive',
-          i18nKey: 'route.document_naive',
-          order: 6,
-          icon: 'logos:naiveui'
-        }
-      },
-      {
-        name: 'document_project',
-        path: '/document/project',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://docs.soybeanjs.cn/zh'
-        },
-        meta: {
-          title: 'document_project',
-          i18nKey: 'route.document_project',
-          order: 1,
-          localIcon: 'logo'
-        }
-      },
-      {
-        name: 'document_project-link',
-        path: '/document/project-link',
-        component: 'view.iframe-page',
-        meta: {
-          title: 'document_project-link',
-          i18nKey: 'route.document_project-link',
-          order: 2,
-          localIcon: 'logo',
-          href: 'https://docs.soybeanjs.cn/zh'
-        }
-      },
-      {
-        name: 'document_unocss',
-        path: '/document/unocss',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://unocss.dev/'
-        },
-        meta: {
-          title: 'document_unocss',
-          i18nKey: 'route.document_unocss',
-          order: 5,
-          icon: 'logos:unocss'
-        }
-      },
-      {
-        name: 'document_vite',
-        path: '/document/vite',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://cn.vitejs.dev/'
-        },
-        meta: {
-          title: 'document_vite',
-          i18nKey: 'route.document_vite',
-          order: 4,
-          icon: 'logos:vitejs'
-        }
-      },
-      {
-        name: 'document_vue',
-        path: '/document/vue',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://cn.vuejs.org/'
-        },
-        meta: {
-          title: 'document_vue',
-          i18nKey: 'route.document_vue',
-          order: 3,
-          icon: 'logos:vue'
-        }
-      }
-    ]
-  }
-];
+const customRoutes: CustomRoute[] = [];
 
 /** create routes when the auth route mode is static */
 export function createStaticRoutes() {

src/service/api/index.ts

@@ -1,3 +1,2 @@
 export * from './auth';
 export * from './route';
-export * from './system-manage';

src/service/api/system-manage.ts

@@ -1,55 +0,0 @@
-import { request } from '../request';
-
-/** get role list */
-export function fetchGetRoleList(params?: Api.SystemManage.RoleSearchParams) {
-  return request<Api.SystemManage.RoleList>({
-    url: '/systemManage/getRoleList',
-    method: 'get',
-    params
-  });
-}
-
-/**
- * get all roles
- *
- * these roles are all enabled
- */
-export function fetchGetAllRoles() {
-  return request<Api.SystemManage.AllRole[]>({
-    url: '/systemManage/getAllRoles',
-    method: 'get'
-  });
-}
-
-/** get user list */
-export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
-  return request<Api.SystemManage.UserList>({
-    url: '/systemManage/getUserList',
-    method: 'get',
-    params
-  });
-}
-
-/** get menu list */
-export function fetchGetMenuList() {
-  return request<Api.SystemManage.MenuList>({
-    url: '/systemManage/getMenuList/v2',
-    method: 'get'
-  });
-}
-
-/** get all pages */
-export function fetchGetAllPages() {
-  return request<string[]>({
-    url: '/systemManage/getAllPages',
-    method: 'get'
-  });
-}
-
-/** get menu tree */
-export function fetchGetMenuTree() {
-  return request<Api.SystemManage.MenuTree[]>({
-    url: '/systemManage/getMenuTree',
-    method: 'get'
-  });
-}

src/service/request/index.ts

@@ -4,7 +4,7 @@ import { useAuthStore } from '@/store/modules/auth';
 import { $t } from '@/locales';
 import { localStg } from '@/utils/storage';
 import { getServiceBaseURL } from '@/utils/service';
-import { handleRefreshToken, showErrorMsg } from './shared';
+import { getAuthorization, handleExpiredRequest, showErrorMsg } from './shared';
 import type { RequestInstanceState } from './type';
 
 const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
@@ -19,12 +19,8 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
   },
   {
     async onRequest(config) {
-      const { headers } = config;
-
-      // set token
-      const token = localStg.get('token');
-      const Authorization = token ? `Bearer ${token}` : null;
-      Object.assign(headers, { Authorization });
+      const Authorization = getAuthorization();
+      Object.assign(config.headers, { Authorization });
 
       return config;
     },
@@ -35,6 +31,7 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
     },
     async onBackendFail(response, instance) {
       const authStore = useAuthStore();
+      const responseCode = String(response.data.code);
 
       function handleLogout() {
         authStore.resetStore();
@@ -49,14 +46,14 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
 
       // when the backend response code is in `logoutCodes`, it means the user will be logged out and redirected to login page
       const logoutCodes = import.meta.env.VITE_SERVICE_LOGOUT_CODES?.split(',') || [];
-      if (logoutCodes.includes(response.data.code)) {
+      if (logoutCodes.includes(responseCode)) {
         handleLogout();
         return null;
       }
 
       // when the backend response code is in `modalLogoutCodes`, it means the user will be logged out by displaying a modal
       const modalLogoutCodes = import.meta.env.VITE_SERVICE_MODAL_LOGOUT_CODES?.split(',') || [];
-      if (modalLogoutCodes.includes(response.data.code) && !request.state.errMsgStack?.includes(response.data.msg)) {
+      if (modalLogoutCodes.includes(responseCode) && !request.state.errMsgStack?.includes(response.data.msg)) {
         request.state.errMsgStack = [...(request.state.errMsgStack || []), response.data.msg];
 
         // prevent the user from refreshing the page
@@ -82,15 +79,13 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
       // when the backend response code is in `expiredTokenCodes`, it means the token is expired, and refresh token
       // the api `refreshToken` can not return error code in `expiredTokenCodes`, otherwise it will be a dead loop, should return `logoutCodes` or `modalLogoutCodes`
       const expiredTokenCodes = import.meta.env.VITE_SERVICE_EXPIRED_TOKEN_CODES?.split(',') || [];
-      if (expiredTokenCodes.includes(response.data.code) && !request.state.isRefreshingToken) {
-        request.state.isRefreshingToken = true;
+      if (expiredTokenCodes.includes(responseCode)) {
+        const success = await handleExpiredRequest(request.state);
+        if (success) {
+          const Authorization = getAuthorization();
+          Object.assign(response.config.headers, { Authorization });
 
-        const refreshConfig = await handleRefreshToken(response.config);
-
-        request.state.isRefreshingToken = false;
-
-        if (refreshConfig) {
-          return instance.request(refreshConfig) as Promise<AxiosResponse>;
+          return instance.request(response.config) as Promise<AxiosResponse>;
         }
       }
 
@@ -108,7 +103,7 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
       // get backend error message and code
       if (error.code === BACKEND_ERROR_CODE) {
         message = error.response?.data?.msg || message;
-        backendErrorCode = error.response?.data?.code || '';
+        backendErrorCode = String(error.response?.data?.code || '');
       }
 
       // the error message is displayed in the modal

src/service/request/shared.ts

@@ -1,34 +1,44 @@
-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
- *
- * @param axiosConfig - request config when the token is expired
- */
-export async function handleRefreshToken(axiosConfig: AxiosRequestConfig) {
+export function getAuthorization() {
+  const token = localStg.get('token');
+  const Authorization = token ? `Bearer ${token}` : null;
+
+  return Authorization;
+}
+
+/** refresh token */
+async function handleRefreshToken() {
   const { resetStore } = useAuthStore();
 
-  const refreshToken = localStg.get('refreshToken') || '';
-  const { error, data } = await fetchRefreshToken(refreshToken);
+  const rToken = localStg.get('refreshToken') || '';
+  const { error, data } = await fetchRefreshToken(rToken);
   if (!error) {
     localStg.set('token', data.token);
     localStg.set('refreshToken', data.refreshToken);
-
-    const config = { ...axiosConfig };
-    if (config.headers) {
-      config.headers.Authorization = data.token;
-    }
-
-    return config;
+    return true;
   }
 
   resetStore();
 
-  return null;
+  return false;
+}
+
+export async function handleExpiredRequest(state: RequestInstanceState) {
+  if (!state.refreshTokenFn) {
+    state.refreshTokenFn = handleRefreshToken();
+  }
+
+  const success = await state.refreshTokenFn;
+
+  setTimeout(() => {
+    state.refreshTokenFn = null;
+  }, 1000);
+
+  return success;
 }
 
 export function showErrorMsg(state: RequestInstanceState, message: string) {

src/service/request/type.ts

@@ -1,6 +1,6 @@
 export interface RequestInstanceState {
   /** whether the request is refreshing token */
-  isRefreshingToken: boolean;
+  refreshTokenFn: Promise<boolean> | null;
   /** the request error message stack */
   errMsgStack: string[];
 }

src/store/modules/auth/index.ts

@@ -71,9 +71,7 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
       if (pass) {
         await routeStore.initAuthRoute();
 
-        if (redirect) {
-          await redirectFromLogin();
-        }
+        await redirectFromLogin(redirect);
 
         if (routeStore.isInitAuthRoute) {
           window.$notification?.success({

src/store/modules/route/index.ts

@@ -354,34 +354,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
   }
 
-  /**
-   * Get route meta by key
-   *
-   * @param key Route key
-   */
-  function getRouteMetaByKey(key: string) {
-    const allRoutes = router.getRoutes();
-
-    return allRoutes.find(route => route.name === key)?.meta || null;
-  }
-
-  /**
-   * Get route query of meta by key
-   *
-   * @param key
-   */
-  function getRouteQueryOfMetaByKey(key: string) {
-    const meta = getRouteMetaByKey(key);
-
-    const query: Record<string, string> = {};
-
-    meta?.query?.forEach(item => {
-      query[item.key] = item.value;
-    });
-
-    return query;
-  }
-
   return {
     resetStore,
     routeHome,
@@ -398,7 +370,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     isInitAuthRoute,
     setIsInitAuthRoute,
     getIsAuthRouteExist,
-    getSelectedMenuKeyPath,
-    getRouteQueryOfMetaByKey
+    getSelectedMenuKeyPath
   };
 });

src/store/modules/route/shared.ts

@@ -281,15 +281,25 @@ export function getBreadcrumbsByRoute(
   const key = route.name as string;
   const activeKey = route.meta?.activeMenu;
 
-  const menuKey = activeKey || key;
-
   for (const menu of menus) {
-    if (menu.key === menuKey) {
-      const breadcrumbMenu = menuKey !== activeKey ? menu : getGlobalMenuByBaseRoute(route);
-
+    if (menu.key === key) {
+      const breadcrumbMenu = menu;
       return [transformMenuToBreadcrumb(breadcrumbMenu)];
     }
 
+    if (menu.key === activeKey) {
+      const ROUTE_DEGREE_SPLITTER = '_';
+
+      const parentKey = key.split(ROUTE_DEGREE_SPLITTER).slice(0, -1).join(ROUTE_DEGREE_SPLITTER);
+
+      const breadcrumbMenu = getGlobalMenuByBaseRoute(route);
+      if (parentKey !== activeKey) {
+        return [transformMenuToBreadcrumb(breadcrumbMenu)];
+      }
+
+      return [transformMenuToBreadcrumb(menu), transformMenuToBreadcrumb(breadcrumbMenu)];
+    }
+
     if (menu.children?.length) {
       const result = getBreadcrumbsByRoute(route, menu.children);
       if (result.length > 0) {

src/store/modules/theme/index.ts

@@ -6,12 +6,12 @@ import { getPaletteColorByNumber } from '@sa/color';
 import { SetupStoreId } from '@/enum';
 import { localStg } from '@/utils/storage';
 import {
-  addThemeVarsToHtml,
+  addThemeVarsToGlobal,
   createThemeToken,
   getNaiveTheme,
   initThemeSettings,
-  toggleCssDarkMode,
-  toggleGrayscaleMode
+  toggleAuxiliaryColorModes,
+  toggleCssDarkMode
 } from './shared';
 
 /** Theme store */
@@ -33,6 +33,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   /** grayscale mode */
   const grayscaleMode = computed(() => settings.value.grayscale);
 
+  /** colourWeakness mode */
+  const colourWeaknessMode = computed(() => settings.value.colourWeakness);
+
   /** Theme colors */
   const themeColors = computed(() => {
     const { themeColor, otherColor, isInfoFollowPrimary } = settings.value;
@@ -79,6 +82,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     settings.value.grayscale = isGrayscale;
   }
 
+  /**
+   * Set colourWeakness value
+   *
+   * @param isColourWeakness
+   */
+  function setColourWeakness(isColourWeakness: boolean) {
+    settings.value.colourWeakness = isColourWeakness;
+  }
+
   /** Toggle theme scheme */
   function toggleThemeScheme() {
     const themeSchemes: UnionKey.ThemeScheme[] = ['light', 'dark', 'auto'];
@@ -123,10 +135,22 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     settings.value.layout.mode = mode;
   }
 
-  /** Setup theme vars to html */
-  function setupThemeVarsToHtml() {
-    const { themeTokens, darkThemeTokens } = createThemeToken(themeColors.value, settings.value.recommendColor);
-    addThemeVarsToHtml(themeTokens, darkThemeTokens);
+  /** Setup theme vars to global */
+  function setupThemeVarsToGlobal() {
+    const { themeTokens, darkThemeTokens } = createThemeToken(
+      themeColors.value,
+      settings.value.tokens,
+      settings.value.recommendColor
+    );
+    addThemeVarsToGlobal(themeTokens, darkThemeTokens);
+  }
+  /**
+   * Set layout reverse horizontal mix
+   *
+   * @param reverse Reverse horizontal mix
+   */
+  function setLayoutReverseHorizontalMix(reverse: boolean) {
+    settings.value.layout.reverseHorizontalMix = reverse;
   }
 
   /** Cache theme settings */
@@ -155,9 +179,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     );
 
     watch(
-      grayscaleMode,
+      [grayscaleMode, colourWeaknessMode],
       val => {
-        toggleGrayscaleMode(val);
+        toggleAuxiliaryColorModes(val[0], val[1]);
       },
       { immediate: true }
     );
@@ -166,7 +190,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     watch(
       themeColors,
       val => {
-        setupThemeVarsToHtml();
+        setupThemeVarsToGlobal();
         localStg.set('themeColor', val.primary);
       },
       { immediate: true }
@@ -185,10 +209,12 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     naiveTheme,
     settingsJson,
     setGrayscale,
+    setColourWeakness,
     resetStore,
     setThemeScheme,
     toggleThemeScheme,
     updateThemeColors,
-    setThemeLayout
+    setThemeLayout,
+    setLayoutReverseHorizontalMix
   };
 });

src/store/modules/theme/shared.ts

@@ -30,39 +30,40 @@ export function initThemeSettings() {
 }
 
 /**
- * Create theme token
+ * create theme token css vars value by theme settings
  *
  * @param colors Theme colors
+ * @param tokens Theme setting tokens
  * @param [recommended=false] Use recommended color. Default is `false`
  */
-export function createThemeToken(colors: App.Theme.ThemeColor, recommended = false) {
+export function createThemeToken(
+  colors: App.Theme.ThemeColor,
+  tokens?: App.Theme.ThemeSetting['tokens'],
+  recommended = false
+) {
   const paletteColors = createThemePaletteColors(colors, recommended);
 
-  const themeTokens: App.Theme.ThemeToken = {
+  const { light, dark } = tokens || themeSettings.tokens;
+
+  const themeTokens: App.Theme.ThemeTokenCSSVars = {
     colors: {
       ...paletteColors,
       nprogress: paletteColors.primary,
-      container: 'rgb(255, 255, 255)',
-      layout: 'rgb(247, 250, 252)',
-      inverted: 'rgb(0, 20, 40)',
-      base_text: 'rgb(31, 31, 31)'
+      ...light.colors
     },
     boxShadow: {
-      header: '0 1px 2px rgb(0, 21, 41, 0.08)',
-      sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
-      tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
+      ...light.boxShadow
     }
   };
 
-  const darkThemeTokens: App.Theme.ThemeToken = {
+  const darkThemeTokens: App.Theme.ThemeTokenCSSVars = {
     colors: {
       ...themeTokens.colors,
-      container: 'rgb(28, 28, 28)',
-      layout: 'rgb(18, 18, 18)',
-      base_text: 'rgb(224, 224, 224)'
+      ...dark?.colors
     },
     boxShadow: {
-      ...themeTokens.boxShadow
+      ...themeTokens.boxShadow,
+      ...dark?.boxShadow
     }
   };
 
@@ -132,16 +133,16 @@ function getCssVarByTokens(tokens: App.Theme.BaseToken) {
 }
 
 /**
- * Add theme vars to html
+ * Add theme vars to global
  *
  * @param tokens
  */
-export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.Theme.BaseToken) {
+export function addThemeVarsToGlobal(tokens: App.Theme.BaseToken, darkTokens: App.Theme.BaseToken) {
   const cssVarStr = getCssVarByTokens(tokens);
   const darkCssVarStr = getCssVarByTokens(darkTokens);
 
   const css = `
-    html {
+    :root {
       ${cssVarStr}
     }
   `;
@@ -179,20 +180,16 @@ export function toggleCssDarkMode(darkMode = false) {
 }
 
 /**
- * Toggle grayscale mode
+ * Toggle auxiliary color modes
  *
- * @param grayscaleMode Is grayscale mode
+ * @param grayscaleMode
+ * @param colourWeakness
  */
-export function toggleGrayscaleMode(grayscaleMode = false) {
-  const GRAYSCALE_CLASS = 'grayscale';
-
-  const { add, remove } = toggleHtmlClass(GRAYSCALE_CLASS);
-
-  if (grayscaleMode) {
-    add();
-  } else {
-    remove();
-  }
+export function toggleAuxiliaryColorModes(grayscaleMode = false, colourWeakness = false) {
+  const htmlElement = document.documentElement;
+  htmlElement.style.filter = [grayscaleMode ? 'grayscale(100%)' : '', colourWeakness ? 'invert(80%)' : '']
+    .filter(Boolean)
+    .join(' ');
 }
 
 type NaiveColorScene = '' | 'Suppl' | 'Hover' | 'Pressed' | 'Active';

src/styles/css/global.css

@@ -11,7 +11,3 @@ body,
 html {
   overflow-x: hidden;
 }
-
-html.grayscale {
-  filter: grayscale(100%);
-}

src/theme/settings.ts

@@ -2,6 +2,7 @@
 export const themeSettings: App.Theme.ThemeSetting = {
   themeScheme: 'light',
   grayscale: false,
+  colourWeakness: false,
   recommendColor: false,
   themeColor: '#646cff',
   otherColor: {
@@ -13,7 +14,8 @@ export const themeSettings: App.Theme.ThemeSetting = {
   isInfoFollowPrimary: true,
   layout: {
     mode: 'vertical',
-    scrollMode: 'content'
+    scrollMode: 'content',
+    reverseHorizontalMix: false
   },
   page: {
     animate: true,
@@ -46,6 +48,32 @@ export const themeSettings: App.Theme.ThemeSetting = {
     fixed: false,
     height: 48,
     right: true
+  },
+  watermark: {
+    visible: false,
+    text: 'SoybeanAdmin'
+  },
+  tokens: {
+    light: {
+      colors: {
+        container: 'rgb(255, 255, 255)',
+        layout: 'rgb(247, 250, 252)',
+        inverted: 'rgb(0, 20, 40)',
+        'base-text': 'rgb(31, 31, 31)'
+      },
+      boxShadow: {
+        header: '0 1px 2px rgb(0, 21, 41, 0.08)',
+        sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
+        tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
+      }
+    },
+    dark: {
+      colors: {
+        container: 'rgb(28, 28, 28)',
+        layout: 'rgb(18, 18, 18)',
+        'base-text': 'rgb(224, 224, 224)'
+      }
+    }
   }
 };
 

src/theme/vars.ts

@@ -18,14 +18,14 @@ function createColorPaletteVars() {
 const colorPaletteVars = createColorPaletteVars();
 
 /** Theme vars */
-export const themeVars: App.Theme.ThemeToken = {
+export const themeVars: App.Theme.ThemeTokenCSSVars = {
   colors: {
     ...colorPaletteVars,
     nprogress: 'rgb(var(--nprogress-color))',
     container: 'rgb(var(--container-bg-color))',
     layout: 'rgb(var(--layout-bg-color))',
     inverted: 'rgb(var(--inverted-bg-color))',
-    base_text: 'rgb(var(--base-text-color))'
+    'base-text': 'rgb(var(--base-text-color))'
   },
   boxShadow: {
     header: 'var(--header-box-shadow)',

src/typings/api.d.ts

@@ -20,6 +20,9 @@ declare namespace Api {
       records: T[];
     }
 
+    /** common search params of table */
+    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'current' | 'size'>;
+
     /**
      * enable status
      *
@@ -81,142 +84,4 @@ declare namespace Api {
       home: import('@elegant-router/types').LastLevelRouteKey;
     }
   }
-
-  /**
-   * namespace SystemManage
-   *
-   * backend api module: "systemManage"
-   */
-  namespace SystemManage {
-    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'current' | 'size'>;
-
-    /** role */
-    type Role = Common.CommonRecord<{
-      /** role name */
-      roleName: string;
-      /** role code */
-      roleCode: string;
-      /** role description */
-      roleDesc: string;
-    }>;
-
-    /** role search params */
-    type RoleSearchParams = CommonType.RecordNullable<
-      Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'status'> & CommonSearchParams
-    >;
-
-    /** role list */
-    type RoleList = Common.PaginatingQueryRecord<Role>;
-
-    /** all role */
-    type AllRole = Pick<Role, 'id' | 'roleName' | 'roleCode'>;
-
-    /**
-     * user gender
-     *
-     * - "1": "male"
-     * - "2": "female"
-     */
-    type UserGender = '1' | '2';
-
-    /** user */
-    type User = Common.CommonRecord<{
-      /** user name */
-      userName: string;
-      /** user gender */
-      userGender: UserGender | null;
-      /** user nick name */
-      nickName: string;
-      /** user phone */
-      userPhone: string;
-      /** user email */
-      userEmail: string;
-      /** user role code collection */
-      userRoles: string[];
-    }>;
-
-    /** user search params */
-    type UserSearchParams = CommonType.RecordNullable<
-      Pick<Api.SystemManage.User, 'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'status'> &
-        CommonSearchParams
-    >;
-
-    /** user list */
-    type UserList = Common.PaginatingQueryRecord<User>;
-
-    /**
-     * menu type
-     *
-     * - "1": directory
-     * - "2": menu
-     */
-    type MenuType = '1' | '2';
-
-    type MenuButton = {
-      /**
-       * button code
-       *
-       * it can be used to control the button permission
-       */
-      code: string;
-      /** button description */
-      desc: string;
-    };
-
-    /**
-     * icon type
-     *
-     * - "1": iconify icon
-     * - "2": local icon
-     */
-    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;
-      /** menu type */
-      menuType: MenuType;
-      /** menu name */
-      menuName: string;
-      /** route name */
-      routeName: string;
-      /** route path */
-      routePath: string;
-      /** component */
-      component?: string;
-      /** iconify icon name or local icon name */
-      icon: string;
-      /** icon type */
-      iconType: IconType;
-      /** buttons */
-      buttons?: MenuButton[] | null;
-      /** children menu */
-      children?: Menu[] | null;
-    }> &
-      MenuPropsOfRoute;
-
-    /** menu list */
-    type MenuList = Common.PaginatingQueryRecord<Menu>;
-
-    type MenuTree = {
-      id: number;
-      label: string;
-      pId: number;
-      children?: MenuTree[];
-    };
-  }
 }

src/typings/app.d.ts

@@ -4,22 +4,14 @@ declare namespace App {
   namespace Theme {
     type ColorPaletteNumber = import('@sa/color').ColorPaletteNumber;
 
-    /** Theme token */
-    type ThemeToken = {
-      colors: ThemeTokenColor;
-      boxShadow: {
-        header: string;
-        sider: string;
-        tab: string;
-      };
-    };
-
     /** Theme setting */
     interface ThemeSetting {
       /** Theme scheme */
       themeScheme: UnionKey.ThemeScheme;
       /** grayscale mode */
       grayscale: boolean;
+      /** colour weakness mode */
+      colourWeakness: boolean;
       /** Whether to recommend color */
       recommendColor: boolean;
       /** Theme color */
@@ -34,6 +26,12 @@ declare namespace App {
         mode: UnionKey.ThemeLayoutMode;
         /** Scroll mode */
         scrollMode: UnionKey.ThemeScrollMode;
+        /**
+         * Whether to reverse the horizontal mix
+         *
+         * if true, the vertical child level menus in left and horizontal first level menus in top
+         */
+        reverseHorizontalMix?: boolean;
       };
       /** Page */
       page: {
@@ -97,6 +95,20 @@ declare namespace App {
         /** Whether float the footer to the right when the layout is 'horizontal-mix' */
         right: boolean;
       };
+      /** Watermark */
+      watermark?: {
+        /** Whether to show the watermark */
+        visible: boolean;
+        /** Watermark text */
+        text: string;
+      };
+      /** define some theme settings tokens, will transform to css variables */
+      tokens: {
+        light: ThemeSettingToken;
+        dark?: {
+          [K in keyof ThemeSettingToken]?: Partial<ThemeSettingToken[K]>;
+        };
+      };
     }
 
     interface OtherColor {
@@ -118,14 +130,33 @@ declare namespace App {
 
     type BaseToken = Record<string, Record<string, string>>;
 
-    interface ThemeTokenColor extends ThemePaletteColor {
-      nprogress: string;
+    interface ThemeSettingTokenColor {
+      /** the progress bar color, if not set, will use the primary color */
+      nprogress?: string;
       container: string;
       layout: string;
       inverted: string;
-      base_text: string;
-      [key: string]: string;
+      'base-text': string;
     }
+
+    interface ThemeSettingTokenBoxShadow {
+      header: string;
+      sider: string;
+      tab: string;
+    }
+
+    interface ThemeSettingToken {
+      colors: ThemeSettingTokenColor;
+      boxShadow: ThemeSettingTokenBoxShadow;
+    }
+
+    type ThemeTokenColor = ThemePaletteColor & ThemeSettingTokenColor;
+
+    /** Theme token CSS variables */
+    type ThemeTokenCSSVars = {
+      colors: ThemeTokenColor & { [key: string]: string };
+      boxShadow: ThemeSettingTokenBoxShadow & { [key: string]: string };
+    };
   }
 
   /** Global namespace */
@@ -148,7 +179,7 @@ declare namespace App {
     }
 
     /** The global menu */
-    interface Menu {
+    type Menu = {
       /**
        * The menu key
        *
@@ -167,7 +198,7 @@ declare namespace App {
       icon?: () => VNode;
       /** The menu children */
       children?: Menu[];
-    }
+    };
 
     type Breadcrumb = Omit<Menu, 'children'> & {
       options?: Breadcrumb[];
@@ -273,6 +304,7 @@ declare namespace App {
         deleteSuccess: string;
         confirmDelete: string;
         edit: string;
+        warning: string;
         error: string;
         index: string;
         keywordSearch: string;
@@ -309,7 +341,8 @@ declare namespace App {
       theme: {
         themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
         grayscale: string;
-        layoutMode: { title: string } & Record<UnionKey.ThemeLayoutMode, string>;
+        colourWeakness: string;
+        layoutMode: { title: string; reverseHorizontalMix: string } & Record<UnionKey.ThemeLayoutMode, string>;
         recommendColor: string;
         recommendColorDesc: string;
         themeColor: {
@@ -349,6 +382,10 @@ declare namespace App {
           height: string;
           right: string;
         };
+        watermark: {
+          visible: string;
+          text: string;
+        };
         themeDrawerTitle: string;
         pageFunTitle: string;
         configOperation: {
@@ -406,20 +443,8 @@ declare namespace App {
             title: string;
           };
         };
-        about: {
-          title: string;
-          introduction: string;
-          projectInfo: {
-            title: string;
-            version: string;
-            latestBuildTime: string;
-            githubLink: string;
-            previewLink: string;
-          };
-          prdDep: string;
-          devDep: string;
-        };
         home: {
+          branchDesc: string;
           greeting: string;
           weatherDesc: string;
           projectCount: string;
@@ -446,163 +471,6 @@ declare namespace App {
           };
           creativity: string;
         };
-        function: {
-          tab: {
-            tabOperate: {
-              title: string;
-              addTab: string;
-              addTabDesc: string;
-              closeTab: string;
-              closeCurrentTab: string;
-              closeAboutTab: string;
-              addMultiTab: string;
-              addMultiTabDesc1: string;
-              addMultiTabDesc2: string;
-            };
-            tabTitle: {
-              title: string;
-              changeTitle: string;
-              change: string;
-              resetTitle: string;
-              reset: string;
-            };
-          };
-          multiTab: {
-            routeParam: string;
-            backTab: string;
-          };
-          toggleAuth: {
-            toggleAccount: string;
-            authHook: string;
-            superAdminVisible: string;
-            adminVisible: string;
-            adminOrUserVisible: string;
-          };
-          request: {
-            repeatedErrorOccurOnce: string;
-            repeatedError: string;
-            repeatedErrorMsg1: string;
-            repeatedErrorMsg2: string;
-          };
-        };
-        manage: {
-          common: {
-            status: {
-              enable: string;
-              disable: string;
-            };
-          };
-          role: {
-            title: string;
-            roleName: string;
-            roleCode: string;
-            roleStatus: string;
-            roleDesc: string;
-            form: {
-              roleName: string;
-              roleCode: string;
-              roleStatus: string;
-              roleDesc: string;
-            };
-            addRole: string;
-            editRole: string;
-            menuAuth: string;
-            buttonAuth: string;
-          };
-          user: {
-            title: string;
-            userName: string;
-            userGender: string;
-            nickName: string;
-            userPhone: string;
-            userEmail: string;
-            userStatus: string;
-            userRole: string;
-            form: {
-              userName: string;
-              userGender: string;
-              nickName: string;
-              userPhone: string;
-              userEmail: string;
-              userStatus: string;
-              userRole: string;
-            };
-            addUser: string;
-            editUser: string;
-            gender: {
-              male: string;
-              female: string;
-            };
-          };
-          menu: {
-            home: string;
-            title: string;
-            id: string;
-            parentId: string;
-            menuType: string;
-            menuName: string;
-            routeName: string;
-            routePath: string;
-            pathParam: string;
-            layout: string;
-            page: string;
-            i18nKey: string;
-            icon: string;
-            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;
-            menuStatus: string;
-            form: {
-              home: string;
-              menuType: string;
-              menuName: string;
-              routeName: string;
-              routePath: string;
-              pathParam: string;
-              layout: string;
-              page: string;
-              i18nKey: string;
-              icon: string;
-              localIcon: string;
-              order: string;
-              keepAlive: string;
-              href: string;
-              hideInMenu: string;
-              activeMenu: string;
-              multiTab: string;
-              fixedInTab: string;
-              fixedIndexInTab: string;
-              queryKey: string;
-              queryValue: string;
-              button: string;
-              buttonCode: string;
-              buttonDesc: string;
-              menuStatus: string;
-            };
-            addMenu: string;
-            editMenu: string;
-            addChildMenu: string;
-            type: {
-              directory: string;
-              menu: string;
-            };
-            iconType: {
-              iconify: string;
-              local: string;
-            };
-          };
-        };
       };
       form: {
         required: string;

src/typings/components.d.ts

@@ -37,6 +37,7 @@ declare module 'vue' {
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
     MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
@@ -83,6 +84,7 @@ declare module 'vue' {
     NThing: typeof import('naive-ui')['NThing']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTree: typeof import('naive-ui')['NTree']
+    NWatermark: typeof import('naive-ui')['NWatermark']
     PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
     ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/typings/elegant-router.d.ts

@@ -17,47 +17,12 @@ declare module "@elegant-router/types" {
   export type RouteMap = {
     "root": "/";
     "not-found": "/:pathMatch(.*)*";
-    "exception": "/exception";
-    "exception_403": "/exception/403";
-    "exception_404": "/exception/404";
-    "exception_500": "/exception/500";
-    "document": "/document";
-    "document_project": "/document/project";
-    "document_project-link": "/document/project-link";
-    "document_vue": "/document/vue";
-    "document_vite": "/document/vite";
-    "document_unocss": "/document/unocss";
-    "document_naive": "/document/naive";
-    "document_antd": "/document/antd";
     "403": "/403";
     "404": "/404";
     "500": "/500";
-    "about": "/about";
-    "function": "/function";
-    "function_hide-child": "/function/hide-child";
-    "function_hide-child_one": "/function/hide-child/one";
-    "function_hide-child_three": "/function/hide-child/three";
-    "function_hide-child_two": "/function/hide-child/two";
-    "function_multi-tab": "/function/multi-tab";
-    "function_request": "/function/request";
-    "function_super-page": "/function/super-page";
-    "function_tab": "/function/tab";
-    "function_toggle-auth": "/function/toggle-auth";
     "home": "/home";
     "iframe-page": "/iframe-page/:url";
     "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
-    "manage": "/manage";
-    "manage_menu": "/manage/menu";
-    "manage_role": "/manage/role";
-    "manage_user": "/manage/user";
-    "manage_user-detail": "/manage/user-detail/:id";
-    "multi-menu": "/multi-menu";
-    "multi-menu_first": "/multi-menu/first";
-    "multi-menu_first_child": "/multi-menu/first/child";
-    "multi-menu_second": "/multi-menu/second";
-    "multi-menu_second_child": "/multi-menu/second/child";
-    "multi-menu_second_child_home": "/multi-menu/second/child/home";
-    "user-center": "/user-center";
   };
 
   /**
@@ -72,28 +37,16 @@ declare module "@elegant-router/types" {
 
   /**
    * custom route key
-   */ 
+   */
   export type CustomRouteKey = Extract<
     RouteKey,
     | "root"
     | "not-found"
-    | "exception"
-    | "exception_403"
-    | "exception_404"
-    | "exception_500"
-    | "document"
-    | "document_project"
-    | "document_project-link"
-    | "document_vue"
-    | "document_vite"
-    | "document_unocss"
-    | "document_naive"
-    | "document_antd"
   >;
 
   /**
    * the generated route key
-   */ 
+   */
   export type GeneratedRouteKey = Exclude<RouteKey, CustomRouteKey>;
 
   /**
@@ -104,14 +57,9 @@ declare module "@elegant-router/types" {
     | "403"
     | "404"
     | "500"
-    | "about"
-    | "function"
     | "home"
     | "iframe-page"
     | "login"
-    | "manage"
-    | "multi-menu"
-    | "user-center"
   >;
 
   /**
@@ -121,8 +69,6 @@ declare module "@elegant-router/types" {
     CustomRouteKey,
     | "root"
     | "not-found"
-    | "exception"
-    | "document"
   >;
 
   /**
@@ -135,23 +81,7 @@ declare module "@elegant-router/types" {
     | "500"
     | "iframe-page"
     | "login"
-    | "about"
-    | "function_hide-child_one"
-    | "function_hide-child_three"
-    | "function_hide-child_two"
-    | "function_multi-tab"
-    | "function_request"
-    | "function_super-page"
-    | "function_tab"
-    | "function_toggle-auth"
     | "home"
-    | "manage_menu"
-    | "manage_role"
-    | "manage_user-detail"
-    | "manage_user"
-    | "multi-menu_first_child"
-    | "multi-menu_second_child_home"
-    | "user-center"
   >;
 
   /**
@@ -161,16 +91,6 @@ declare module "@elegant-router/types" {
     CustomRouteKey,
     | "root"
     | "not-found"
-    | "exception_403"
-    | "exception_404"
-    | "exception_500"
-    | "document_project"
-    | "document_project-link"
-    | "document_vue"
-    | "document_vite"
-    | "document_unocss"
-    | "document_naive"
-    | "document_antd"
   >;
 
   /**

src/typings/env.d.ts

@@ -103,6 +103,8 @@ declare namespace Env {
     readonly VITE_ICONIFY_URL?: string;
     /** Used to differentiate storage across different domains */
     readonly VITE_STORAGE_PREFIX?: string;
+    /** Whether to automatically detect updates after configuring application packaging */
+    readonly VITE_AUTOMATICALLY_DETECT_UPDATE?: CommonType.YesOrNo;
   }
 }
 

src/typings/naive-ui.d.ts

@@ -26,7 +26,7 @@ declare namespace NaiveUI {
 
   type TableColumn<T> = TableColumnWithKey<T> | DataTableSelectionColumn<T> | DataTableExpandColumn<T>;
 
-  type TableApiFn<T = any, R = Api.SystemManage.CommonSearchParams> = (
+  type TableApiFn<T = any, R = Api.Common.CommonSearchParams> = (
     params: R
   ) => Promise<FlatResponseData<Api.Common.PaginatingQueryRecord<T>>>;
 

src/typings/union-key.d.ts

@@ -20,7 +20,7 @@ declare namespace UnionKey {
    * - vertical: the vertical menu in left
    * - horizontal: the horizontal menu in top
    * - vertical-mix: two vertical mixed menus in left
-   * - horizontal-mix: the vertical menu in left and horizontal menu in top
+   * - horizontal-mix: the vertical first level menus in left and horizontal child level menus in top
    */
   type ThemeLayoutMode = 'vertical' | 'horizontal' | 'vertical-mix' | 'horizontal-mix';
 

src/utils/service.ts

@@ -1,3 +1,5 @@
+import json5 from 'json5';
+
 /**
  * Create service config by current env
  *
@@ -8,10 +10,10 @@ export function createServiceConfig(env: Env.ImportMeta) {
 
   let other = {} as Record<App.Service.OtherBaseURLKey, string>;
   try {
-    other = JSON.parse(VITE_OTHER_SERVICE_BASE_URL);
+    other = json5.parse(VITE_OTHER_SERVICE_BASE_URL);
   } catch (error) {
     // eslint-disable-next-line no-console
-    console.error('VITE_OTHER_SERVICE_BASE_URL is not a valid JSON string');
+    console.error('VITE_OTHER_SERVICE_BASE_URL is not a valid json5 string');
   }
 
   const httpConfig: App.Service.SimpleServiceConfig = {

src/views/about/index.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
-import pkg from '~/package.json';
-
-const appStore = useAppStore();
-
-const column = computed(() => (appStore.isMobile ? 1 : 2));
-
-interface PkgJson {
-  name: string;
-  version: string;
-  dependencies: PkgVersionInfo[];
-  devDependencies: PkgVersionInfo[];
-}
-
-interface PkgVersionInfo {
-  name: string;
-  version: string;
-}
-
-const { name, version, dependencies, devDependencies } = pkg;
-
-function transformVersionData(tuple: [string, string]): PkgVersionInfo {
-  const [$name, $version] = tuple;
-  return {
-    name: $name,
-    version: $version
-  };
-}
-
-const pkgJson: PkgJson = {
-  name,
-  version,
-  dependencies: Object.entries(dependencies).map(item => transformVersionData(item)),
-  devDependencies: Object.entries(devDependencies).map(item => transformVersionData(item))
-};
-
-const latestBuildTime = BUILD_TIME;
-</script>
-
-<template>
-  <NSpace vertical :size="16">
-    <NCard :title="$t('page.about.title')" :bordered="false" size="small" segmented class="card-wrapper">
-      <p>{{ $t('page.about.introduction') }}</p>
-    </NCard>
-    <NCard :title="$t('page.about.projectInfo.title')" :bordered="false" size="small" segmented class="card-wrapper">
-      <NDescriptions label-placement="left" bordered size="small" :column="column">
-        <NDescriptionsItem :label="$t('page.about.projectInfo.version')">
-          <NTag type="primary">{{ pkgJson.version }}</NTag>
-        </NDescriptionsItem>
-        <NDescriptionsItem :label="$t('page.about.projectInfo.latestBuildTime')">
-          <NTag type="primary">{{ latestBuildTime }}</NTag>
-        </NDescriptionsItem>
-        <NDescriptionsItem :label="$t('page.about.projectInfo.githubLink')">
-          <a class="text-primary" :href="pkg.homepage" target="_blank" rel="noopener noreferrer">
-            {{ $t('page.about.projectInfo.githubLink') }}
-          </a>
-        </NDescriptionsItem>
-        <NDescriptionsItem :label="$t('page.about.projectInfo.previewLink')">
-          <a class="text-primary" :href="pkg.website" target="_blank" rel="noopener noreferrer">
-            {{ $t('page.about.projectInfo.previewLink') }}
-          </a>
-        </NDescriptionsItem>
-      </NDescriptions>
-    </NCard>
-    <NCard :title="$t('page.about.prdDep')" :bordered="false" size="small" segmented class="card-wrapper">
-      <NDescriptions label-placement="left" bordered size="small" :column="column">
-        <NDescriptionsItem v-for="item in pkgJson.dependencies" :key="item.name" :label="item.name">
-          {{ item.version }}
-        </NDescriptionsItem>
-      </NDescriptions>
-    </NCard>
-    <NCard :title="$t('page.about.devDep')" :bordered="false" size="small" segmented class="card-wrapper">
-      <NDescriptions label-placement="left" bordered size="small" :column="column">
-        <NDescriptionsItem v-for="item in pkgJson.devDependencies" :key="item.name" :label="item.name">
-          {{ item.version }}
-        </NDescriptionsItem>
-      </NDescriptions>
-    </NCard>
-  </NSpace>
-</template>
-
-<style scoped></style>

src/views/function/hide-child/one/index.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <LookForward />
-</template>
-
-<style scoped></style>

src/views/function/hide-child/three/index.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <LookForward />
-</template>
-
-<style scoped></style>

src/views/function/hide-child/two/index.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <LookForward />
-</template>
-
-<style scoped></style>

src/views/function/multi-tab/index.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { useRoute } from 'vue-router';
-import { computed } from 'vue';
-import { useRouterPush } from '@/hooks/common/router';
-import { $t } from '@/locales';
-
-const route = useRoute();
-const { routerPushByKey } = useRouterPush();
-
-const routeQuery = computed(() => JSON.stringify(route.query));
-</script>
-
-<template>
-  <div>
-    <LookForward>
-      <div>
-        <NButton @click="routerPushByKey('function_tab')">{{ $t('page.function.multiTab.backTab') }}</NButton>
-        <div class="py-24px">{{ $t('page.function.multiTab.routeParam') }}: {{ routeQuery }}</div>
-      </div>
-    </LookForward>
-  </div>
-</template>
-
-<style scoped></style>

src/views/function/request/index.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { $t } from '@/locales';
-import { fetchCustomBackendError } from '@/service/api';
-
-async function logout() {
-  await fetchCustomBackendError('8888', $t('request.logoutMsg'));
-}
-
-async function logoutWithModal() {
-  await fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'));
-}
-
-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>
-  <NSpace vertical :size="16">
-    <NCard :title="$t('request.logout')" :bordered="false" size="small" segmented class="card-wrapper">
-      <NButton @click="logout">{{ $t('common.trigger') }}</NButton>
-    </NCard>
-    <NCard :title="$t('request.logoutWithModal')" :bordered="false" size="small" segmented class="card-wrapper">
-      <NButton @click="logoutWithModal">{{ $t('common.trigger') }}</NButton>
-    </NCard>
-    <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>
-
-<style scoped></style>

src/views/function/super-page/index.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <LookForward />
-</template>
-
-<style scoped></style>

src/views/function/tab/index.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useRouterPush } from '@/hooks/common/router';
-import { $t } from '@/locales';
-import { useTabStore } from '@/store/modules/tab';
-
-const tabStore = useTabStore();
-const { routerPushByKey } = useRouterPush();
-
-const tabLabel = ref('');
-
-function changeTabLabel() {
-  tabStore.setTabLabel(tabLabel.value);
-}
-
-function resetTabLabel() {
-  tabStore.resetTabLabel();
-}
-</script>
-
-<template>
-  <NSpace vertical :size="16">
-    <NCard
-      :title="$t('page.function.tab.tabOperate.title')"
-      :bordered="false"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
-      <NDivider title-placement="left">{{ $t('page.function.tab.tabOperate.addTab') }}</NDivider>
-      <NButton @click="routerPushByKey('about')">{{ $t('page.function.tab.tabOperate.addTabDesc') }}</NButton>
-      <NDivider title-placement="left">{{ $t('page.function.tab.tabOperate.closeTab') }}</NDivider>
-      <NSpace>
-        <NButton @click="tabStore.removeActiveTab">
-          {{ $t('page.function.tab.tabOperate.closeCurrentTab') }}
-        </NButton>
-        <NButton @click="tabStore.removeTabByRouteName('about')">
-          {{ $t('page.function.tab.tabOperate.closeAboutTab') }}
-        </NButton>
-      </NSpace>
-      <NDivider title-placement="left">{{ $t('page.function.tab.tabOperate.addMultiTab') }}</NDivider>
-      <NSpace>
-        <NButton @click="routerPushByKey('function_multi-tab')">
-          {{ $t('page.function.tab.tabOperate.addMultiTabDesc1') }}
-        </NButton>
-        <NButton @click="routerPushByKey('function_multi-tab', { query: { a: '1' } })">
-          {{ $t('page.function.tab.tabOperate.addMultiTabDesc2') }}
-        </NButton>
-      </NSpace>
-    </NCard>
-    <NCard
-      :title="$t('page.function.tab.tabTitle.title')"
-      :bordered="false"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
-      <NDivider title-placement="left">{{ $t('page.function.tab.tabTitle.changeTitle') }}</NDivider>
-      <NInputGroup class="max-w-240px">
-        <NInput v-model:value="tabLabel" />
-        <NButton type="primary" @click="changeTabLabel">{{ $t('page.function.tab.tabTitle.change') }}</NButton>
-      </NInputGroup>
-      <NDivider title-placement="left">{{ $t('page.function.tab.tabTitle.resetTitle') }}</NDivider>
-      <NButton type="error" ghost class="w-80px" @click="resetTabLabel">
-        {{ $t('page.function.tab.tabTitle.reset') }}
-      </NButton>
-    </NCard>
-  </NSpace>
-</template>
-
-<style scoped></style>

src/views/function/toggle-auth/index.vue

@@ -1,103 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { useLoading } from '@sa/hooks';
-import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
-import { useAuthStore } from '@/store/modules/auth';
-import { useTabStore } from '@/store/modules/tab';
-import { useAuth } from '@/hooks/business/auth';
-
-const route = useRoute();
-const appStore = useAppStore();
-const authStore = useAuthStore();
-const tabStore = useTabStore();
-const { hasAuth } = useAuth();
-const { loading, startLoading, endLoading } = useLoading();
-
-type AccountKey = 'super' | 'admin' | 'user';
-
-interface Account {
-  key: AccountKey;
-  label: string;
-  userName: string;
-  password: string;
-}
-
-const accounts = computed<Account[]>(() => [
-  {
-    key: 'super',
-    label: $t('page.login.pwdLogin.superAdmin'),
-    userName: 'Super',
-    password: '123456'
-  },
-  {
-    key: 'admin',
-    label: $t('page.login.pwdLogin.admin'),
-    userName: 'Admin',
-    password: '123456'
-  },
-  {
-    key: 'user',
-    label: $t('page.login.pwdLogin.user'),
-    userName: 'User',
-    password: '123456'
-  }
-]);
-
-const loginAccount = ref<AccountKey>('super');
-
-async function handleToggleAccount(account: Account) {
-  loginAccount.value = account.key;
-
-  startLoading();
-  await authStore.login(account.userName, account.password, false);
-  tabStore.initTabStore(route);
-  endLoading();
-  appStore.reloadPage();
-}
-</script>
-
-<template>
-  <NSpace vertical :size="16">
-    <NCard :title="$t('route.function_toggle-auth')" :bordered="false" size="small" segmented class="card-wrapper">
-      <NDescriptions bordered :column="1">
-        <NDescriptionsItem :label="$t('page.manage.user.userRole')">
-          <NSpace>
-            <NTag v-for="role in authStore.userInfo.roles" :key="role">{{ role }}</NTag>
-          </NSpace>
-        </NDescriptionsItem>
-        <NDescriptionsItem ions-item :label="$t('page.function.toggleAuth.toggleAccount')">
-          <NSpace>
-            <NButton
-              v-for="account in accounts"
-              :key="account.key"
-              :loading="loading && loginAccount === account.key"
-              :disabled="loading && loginAccount !== account.key"
-              @click="handleToggleAccount(account)"
-            >
-              {{ account.label }}
-            </NButton>
-          </NSpace>
-        </NDescriptionsItem>
-      </NDescriptions>
-    </NCard>
-    <NCard
-      :title="$t('page.function.toggleAuth.authHook')"
-      :bordered="false"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
-      <NSpace>
-        <NButton v-if="hasAuth('B_CODE1')">{{ $t('page.function.toggleAuth.superAdminVisible') }}</NButton>
-        <NButton v-if="hasAuth('B_CODE2')">{{ $t('page.function.toggleAuth.adminVisible') }}</NButton>
-        <NButton v-if="hasAuth('B_CODE3')">
-          {{ $t('page.function.toggleAuth.adminOrUserVisible') }}
-        </NButton>
-      </NSpace>
-    </NCard>
-  </NSpace>
-</template>
-
-<style scoped></style>

src/views/home/index.vue

@@ -15,6 +15,9 @@ const gap = computed(() => (appStore.isMobile ? 0 : 16));
 
 <template>
   <NSpace vertical :size="16">
+    <NAlert :title="$t('common.warning')" type="warning">
+      {{ $t('page.home.branchDesc') }}
+    </NAlert>
     <HeaderBanner />
     <CardData />
     <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>

src/views/manage/menu/index.vue

@@ -1,266 +0,0 @@
-<script setup lang="tsx">
-import { ref } from 'vue';
-import type { Ref } from 'vue';
-import { NButton, NPopconfirm, NTag } from 'naive-ui';
-import { useBoolean } from '@sa/hooks';
-import { fetchGetAllPages, fetchGetMenuList } from '@/service/api';
-import { useAppStore } from '@/store/modules/app';
-import { useTable, useTableOperate } from '@/hooks/common/table';
-import { $t } from '@/locales';
-import { yesOrNoRecord } from '@/constants/common';
-import { enableStatusRecord, menuTypeRecord } from '@/constants/business';
-import SvgIcon from '@/components/custom/svg-icon.vue';
-import MenuOperateModal, { type OperateType } from './modules/menu-operate-modal.vue';
-
-const appStore = useAppStore();
-
-const { bool: visible, setTrue: openModal } = useBoolean();
-
-const wrapperRef = ref<HTMLElement | null>(null);
-
-const { columns, columnChecks, data, loading, pagination, getData, getDataByPage } = useTable({
-  apiFn: fetchGetMenuList,
-  columns: () => [
-    {
-      type: 'selection',
-      align: 'center',
-      width: 48
-    },
-    {
-      key: 'id',
-      title: $t('page.manage.menu.id'),
-      align: 'center'
-    },
-    {
-      key: 'menuType',
-      title: $t('page.manage.menu.menuType'),
-      align: 'center',
-      width: 80,
-      render: row => {
-        const tagMap: Record<Api.SystemManage.MenuType, NaiveUI.ThemeColor> = {
-          1: 'default',
-          2: 'primary'
-        };
-
-        const label = $t(menuTypeRecord[row.menuType]);
-
-        return <NTag type={tagMap[row.menuType]}>{label}</NTag>;
-      }
-    },
-    {
-      key: 'menuName',
-      title: $t('page.manage.menu.menuName'),
-      align: 'center',
-      minWidth: 120,
-      render: row => {
-        const { i18nKey, menuName } = row;
-
-        const label = i18nKey ? $t(i18nKey) : menuName;
-
-        return <span>{label}</span>;
-      }
-    },
-    {
-      key: 'icon',
-      title: $t('page.manage.menu.icon'),
-      align: 'center',
-      width: 60,
-      render: row => {
-        const icon = row.iconType === '1' ? row.icon : undefined;
-
-        const localIcon = row.iconType === '2' ? row.icon : undefined;
-
-        return (
-          <div class="flex-center">
-            <SvgIcon icon={icon} localIcon={localIcon} class="text-icon" />
-          </div>
-        );
-      }
-    },
-    {
-      key: 'routeName',
-      title: $t('page.manage.menu.routeName'),
-      align: 'center',
-      minWidth: 120
-    },
-    {
-      key: 'routePath',
-      title: $t('page.manage.menu.routePath'),
-      align: 'center',
-      minWidth: 120
-    },
-    {
-      key: 'status',
-      title: $t('page.manage.menu.menuStatus'),
-      align: 'center',
-      width: 80,
-      render: row => {
-        if (row.status === null) {
-          return null;
-        }
-
-        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
-          1: 'success',
-          2: 'warning'
-        };
-
-        const label = $t(enableStatusRecord[row.status]);
-
-        return <NTag type={tagMap[row.status]}>{label}</NTag>;
-      }
-    },
-    {
-      key: 'hideInMenu',
-      title: $t('page.manage.menu.hideInMenu'),
-      align: 'center',
-      width: 80,
-      render: row => {
-        const hide: CommonType.YesOrNo = row.hideInMenu ? 'Y' : 'N';
-
-        const tagMap: Record<CommonType.YesOrNo, NaiveUI.ThemeColor> = {
-          Y: 'error',
-          N: 'default'
-        };
-
-        const label = $t(yesOrNoRecord[hide]);
-
-        return <NTag type={tagMap[hide]}>{label}</NTag>;
-      }
-    },
-    {
-      key: 'parentId',
-      title: $t('page.manage.menu.parentId'),
-      width: 90,
-      align: 'center'
-    },
-    {
-      key: 'order',
-      title: $t('page.manage.menu.order'),
-      align: 'center',
-      width: 60
-    },
-    {
-      key: 'operate',
-      title: $t('common.operate'),
-      align: 'center',
-      width: 230,
-      render: row => (
-        <div class="flex-center justify-end gap-8px">
-          {row.menuType === '1' && (
-            <NButton type="primary" ghost size="small" onClick={() => handleAddChildMenu(row)}>
-              {$t('page.manage.menu.addChildMenu')}
-            </NButton>
-          )}
-          <NButton type="primary" ghost size="small" onClick={() => handleEdit(row)}>
-            {$t('common.edit')}
-          </NButton>
-          <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
-            {{
-              default: () => $t('common.confirmDelete'),
-              trigger: () => (
-                <NButton type="error" ghost size="small">
-                  {$t('common.delete')}
-                </NButton>
-              )
-            }}
-          </NPopconfirm>
-        </div>
-      )
-    }
-  ]
-});
-
-const { checkedRowKeys, onBatchDeleted, onDeleted } = useTableOperate(data, getData);
-
-const operateType = ref<OperateType>('add');
-
-function handleAdd() {
-  operateType.value = 'add';
-  openModal();
-}
-
-async function handleBatchDelete() {
-  // request
-  console.log(checkedRowKeys.value);
-
-  onBatchDeleted();
-}
-
-function handleDelete(id: number) {
-  // request
-  console.log(id);
-
-  onDeleted();
-}
-
-/** the edit menu data or the parent menu data when adding a child menu */
-const editingData: Ref<Api.SystemManage.Menu | null> = ref(null);
-
-function handleEdit(item: Api.SystemManage.Menu) {
-  operateType.value = 'edit';
-  editingData.value = { ...item };
-
-  openModal();
-}
-
-function handleAddChildMenu(item: Api.SystemManage.Menu) {
-  operateType.value = 'addChild';
-
-  editingData.value = { ...item };
-
-  openModal();
-}
-
-const allPages = ref<string[]>([]);
-
-async function getAllPages() {
-  const { data: pages } = await fetchGetAllPages();
-  allPages.value = pages || [];
-}
-
-function init() {
-  getAllPages();
-}
-
-// init
-init();
-</script>
-
-<template>
-  <div ref="wrapperRef" class="flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <NCard :title="$t('page.manage.menu.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
-      <template #header-extra>
-        <TableHeaderOperation
-          v-model:columns="columnChecks"
-          :disabled-delete="checkedRowKeys.length === 0"
-          :loading="loading"
-          @add="handleAdd"
-          @delete="handleBatchDelete"
-          @refresh="getData"
-        />
-      </template>
-      <NDataTable
-        v-model:checked-row-keys="checkedRowKeys"
-        :columns="columns"
-        :data="data"
-        size="small"
-        :flex-height="!appStore.isMobile"
-        :scroll-x="1088"
-        :loading="loading"
-        :row-key="row => row.id"
-        remote
-        :pagination="pagination"
-        class="sm:h-full"
-      />
-      <MenuOperateModal
-        v-model:visible="visible"
-        :operate-type="operateType"
-        :row-data="editingData"
-        :all-pages="allPages"
-        @submitted="getDataByPage"
-      />
-    </NCard>
-  </div>
-</template>
-
-<style scoped></style>

src/views/manage/menu/modules/menu-operate-modal.vue

@@ -1,467 +0,0 @@
-<script setup lang="tsx">
-import { computed, reactive, ref, watch } from 'vue';
-import type { SelectOption } from 'naive-ui';
-import { useFormRules, useNaiveForm } from '@/hooks/common/form';
-import { $t } from '@/locales';
-import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
-import SvgIcon from '@/components/custom/svg-icon.vue';
-import { getLocalIcons } from '@/utils/icon';
-import { fetchGetAllRoles } from '@/service/api';
-import {
-  getLayoutAndPage,
-  getPathParamFromRoutePath,
-  getRoutePathByRouteName,
-  getRoutePathWithParam,
-  transformLayoutAndPageToComponent
-} from './shared';
-
-defineOptions({
-  name: 'MenuOperateModal'
-});
-
-export type OperateType = NaiveUI.TableOperateType | 'addChild';
-
-interface Props {
-  /** the type of operation */
-  operateType: OperateType;
-  /** the edit menu data or the parent menu data when adding a child menu */
-  rowData?: Api.SystemManage.Menu | null;
-  /** all pages */
-  allPages: string[];
-}
-
-const props = defineProps<Props>();
-
-interface Emits {
-  (e: 'submitted'): void;
-}
-
-const emit = defineEmits<Emits>();
-
-const visible = defineModel<boolean>('visible', {
-  default: false
-});
-
-const { formRef, validate, restoreValidation } = useNaiveForm();
-const { defaultRequiredRule } = useFormRules();
-
-const title = computed(() => {
-  const titles: Record<OperateType, string> = {
-    add: $t('page.manage.menu.addMenu'),
-    addChild: $t('page.manage.menu.addChildMenu'),
-    edit: $t('page.manage.menu.editMenu')
-  };
-  return titles[props.operateType];
-});
-
-type Model = Pick<
-  Api.SystemManage.Menu,
-  | 'menuType'
-  | 'menuName'
-  | 'routeName'
-  | 'routePath'
-  | 'component'
-  | 'order'
-  | 'i18nKey'
-  | 'icon'
-  | 'iconType'
-  | 'status'
-  | 'parentId'
-  | 'keepAlive'
-  | 'constant'
-  | 'href'
-  | 'hideInMenu'
-  | 'activeMenu'
-  | 'multiTab'
-  | 'fixedIndexInTab'
-> & {
-  query: NonNullable<Api.SystemManage.Menu['query']>;
-  buttons: NonNullable<Api.SystemManage.Menu['buttons']>;
-  layout: string;
-  page: string;
-  pathParam: string;
-};
-
-const model: Model = reactive(createDefaultModel());
-
-function createDefaultModel(): Model {
-  return {
-    menuType: '1',
-    menuName: '',
-    routeName: '',
-    routePath: '',
-    pathParam: '',
-    component: '',
-    layout: '',
-    page: '',
-    i18nKey: null,
-    icon: '',
-    iconType: '1',
-    parentId: 0,
-    status: '1',
-    keepAlive: false,
-    constant: false,
-    order: 0,
-    href: null,
-    hideInMenu: false,
-    activeMenu: null,
-    multiTab: false,
-    fixedIndexInTab: null,
-    query: [],
-    buttons: []
-  };
-}
-
-type RuleKey = Extract<keyof Model, 'menuName' | 'status' | 'routeName' | 'routePath'>;
-
-const rules: Record<RuleKey, App.Global.FormRule> = {
-  menuName: defaultRequiredRule,
-  status: defaultRequiredRule,
-  routeName: defaultRequiredRule,
-  routePath: defaultRequiredRule
-};
-
-const disabledMenuType = computed(() => props.operateType === 'edit');
-
-const localIcons = getLocalIcons();
-const localIconOptions = localIcons.map<SelectOption>(item => ({
-  label: () => (
-    <div class="flex-y-center gap-16px">
-      <SvgIcon localIcon={item} class="text-icon" />
-      <span>{item}</span>
-    </div>
-  ),
-  value: item
-}));
-
-const showLayout = computed(() => model.parentId === 0);
-
-const showPage = computed(() => model.menuType === '2');
-
-const pageOptions = computed(() => {
-  const allPages = [...props.allPages];
-
-  if (model.routeName && !allPages.includes(model.routeName)) {
-    allPages.unshift(model.routeName);
-  }
-
-  const opts: CommonType.Option[] = allPages.map(page => ({
-    label: page,
-    value: page
-  }));
-
-  return opts;
-});
-
-const layoutOptions: CommonType.Option[] = [
-  {
-    label: 'base',
-    value: 'base'
-  },
-  {
-    label: 'blank',
-    value: 'blank'
-  }
-];
-
-/** the enabled role options */
-const roleOptions = ref<CommonType.Option<string>[]>([]);
-
-async function getRoleOptions() {
-  const { error, data } = await fetchGetAllRoles();
-
-  if (!error) {
-    const options = data.map(item => ({
-      label: item.roleName,
-      value: item.roleCode
-    }));
-
-    roleOptions.value = [...options];
-  }
-}
-
-function handleInitModel() {
-  Object.assign(model, createDefaultModel());
-
-  if (!props.rowData) return;
-
-  if (props.operateType === 'addChild') {
-    const { id } = props.rowData;
-
-    Object.assign(model, { parentId: id });
-  }
-
-  if (props.operateType === 'edit') {
-    const { component, ...rest } = props.rowData;
-
-    const { layout, page } = getLayoutAndPage(component);
-    const { path, param } = getPathParamFromRoutePath(rest.routePath);
-
-    Object.assign(model, rest, { layout, page, routePath: path, pathParam: param });
-  }
-
-  if (!model.query) {
-    model.query = [];
-  }
-  if (!model.buttons) {
-    model.buttons = [];
-  }
-}
-
-function closeDrawer() {
-  visible.value = false;
-}
-
-function handleUpdateRoutePathByRouteName() {
-  if (model.routeName) {
-    model.routePath = getRoutePathByRouteName(model.routeName);
-  } else {
-    model.routePath = '';
-  }
-}
-
-function handleUpdateI18nKeyByRouteName() {
-  if (model.routeName) {
-    model.i18nKey = `route.${model.routeName}` as App.I18n.I18nKey;
-  } else {
-    model.i18nKey = null;
-  }
-}
-
-function handleCreateButton() {
-  const buttonItem: Api.SystemManage.MenuButton = {
-    code: '',
-    desc: ''
-  };
-
-  return buttonItem;
-}
-
-function getSubmitParams() {
-  const { layout, page, pathParam, ...params } = model;
-
-  const component = transformLayoutAndPageToComponent(layout, page);
-  const routePath = getRoutePathWithParam(model.routePath, pathParam);
-
-  params.component = component;
-  params.routePath = routePath;
-
-  return params;
-}
-
-async function handleSubmit() {
-  await validate();
-
-  const params = getSubmitParams();
-
-  console.log('params: ', params);
-
-  // request
-  window.$message?.success($t('common.updateSuccess'));
-  closeDrawer();
-  emit('submitted');
-}
-
-watch(visible, () => {
-  if (visible.value) {
-    handleInitModel();
-    restoreValidation();
-    getRoleOptions();
-  }
-});
-
-watch(
-  () => model.routeName,
-  () => {
-    handleUpdateRoutePathByRouteName();
-    handleUpdateI18nKeyByRouteName();
-  }
-);
-</script>
-
-<template>
-  <NModal v-model:show="visible" :title="title" preset="card" class="w-800px">
-    <NScrollbar class="h-480px pr-20px">
-      <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="100">
-        <NGrid responsive="screen" item-responsive>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.menuType')" path="menuType">
-            <NRadioGroup v-model:value="model.menuType" :disabled="disabledMenuType">
-              <NRadio v-for="item in menuTypeOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
-            </NRadioGroup>
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.menuName')" path="menuName">
-            <NInput v-model:value="model.menuName" :placeholder="$t('page.manage.menu.form.menuName')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.routeName')" path="routeName">
-            <NInput v-model:value="model.routeName" :placeholder="$t('page.manage.menu.form.routeName')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.routePath')" path="routePath">
-            <NInput v-model:value="model.routePath" disabled :placeholder="$t('page.manage.menu.form.routePath')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.pathParam')" path="pathParam">
-            <NInput v-model:value="model.pathParam" :placeholder="$t('page.manage.menu.form.pathParam')" />
-          </NFormItemGi>
-          <NFormItemGi v-if="showLayout" span="24 m:12" :label="$t('page.manage.menu.layout')" path="layout">
-            <NSelect
-              v-model:value="model.layout"
-              :options="layoutOptions"
-              :placeholder="$t('page.manage.menu.form.layout')"
-            />
-          </NFormItemGi>
-          <NFormItemGi v-if="showPage" span="24 m:12" :label="$t('page.manage.menu.page')" path="page">
-            <NSelect
-              v-model:value="model.page"
-              :options="pageOptions"
-              :placeholder="$t('page.manage.menu.form.page')"
-            />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.i18nKey')" path="i18nKey">
-            <NInput v-model:value="model.i18nKey" :placeholder="$t('page.manage.menu.form.i18nKey')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.order')" path="order">
-            <NInputNumber v-model:value="model.order" class="w-full" :placeholder="$t('page.manage.menu.form.order')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.iconTypeTitle')" path="iconType">
-            <NRadioGroup v-model:value="model.iconType">
-              <NRadio
-                v-for="item in menuIconTypeOptions"
-                :key="item.value"
-                :value="item.value"
-                :label="$t(item.label)"
-              />
-            </NRadioGroup>
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.icon')" path="icon">
-            <template v-if="model.iconType === '1'">
-              <NInput v-model:value="model.icon" :placeholder="$t('page.manage.menu.form.icon')" class="flex-1">
-                <template #suffix>
-                  <SvgIcon v-if="model.icon" :icon="model.icon" class="text-icon" />
-                </template>
-              </NInput>
-            </template>
-            <template v-if="model.iconType === '2'">
-              <NSelect
-                v-model:value="model.icon"
-                :placeholder="$t('page.manage.menu.form.localIcon')"
-                :options="localIconOptions"
-              />
-            </template>
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.menuStatus')" path="status">
-            <NRadioGroup v-model:value="model.status">
-              <NRadio
-                v-for="item in enableStatusOptions"
-                :key="item.value"
-                :value="item.value"
-                :label="$t(item.label)"
-              />
-            </NRadioGroup>
-          </NFormItemGi>
-          <NFormItemGi span="24 m:12" :label="$t('page.manage.menu.keepAlive')" path="keepAlive">
-            <NRadioGroup v-model:value="model.keepAlive">
-              <NRadio :value="true" :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="true" :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">
-              <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="true" :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>

src/views/manage/menu/modules/shared.ts

@@ -1,79 +0,0 @@
-const LAYOUT_PREFIX = 'layout.';
-const VIEW_PREFIX = 'view.';
-const FIRST_LEVEL_ROUTE_COMPONENT_SPLIT = '$';
-
-export function getLayoutAndPage(component?: string | null) {
-  let layout = '';
-  let page = '';
-
-  const [layoutOrPage = '', pageItem = ''] = component?.split(FIRST_LEVEL_ROUTE_COMPONENT_SPLIT) || [];
-
-  layout = getLayout(layoutOrPage);
-  page = getPage(pageItem || layoutOrPage);
-
-  return { layout, page };
-}
-
-function getLayout(layout: string) {
-  return layout.startsWith(LAYOUT_PREFIX) ? layout.replace(LAYOUT_PREFIX, '') : '';
-}
-
-function getPage(page: string) {
-  return page.startsWith(VIEW_PREFIX) ? page.replace(VIEW_PREFIX, '') : '';
-}
-
-export function transformLayoutAndPageToComponent(layout: string, page: string) {
-  const hasLayout = Boolean(layout);
-  const hasPage = Boolean(page);
-
-  if (hasLayout && hasPage) {
-    return `${LAYOUT_PREFIX}${layout}${FIRST_LEVEL_ROUTE_COMPONENT_SPLIT}${VIEW_PREFIX}${page}`;
-  }
-
-  if (hasLayout) {
-    return `${LAYOUT_PREFIX}${layout}`;
-  }
-
-  if (hasPage) {
-    return `${VIEW_PREFIX}${page}`;
-  }
-
-  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;
-}

src/views/manage/role/index.vue

@@ -1,177 +0,0 @@
-<script setup lang="tsx">
-import { NButton, NPopconfirm, NTag } from 'naive-ui';
-import { fetchGetRoleList } from '@/service/api';
-import { useAppStore } from '@/store/modules/app';
-import { useTable, useTableOperate } from '@/hooks/common/table';
-import { $t } from '@/locales';
-import { enableStatusRecord } from '@/constants/business';
-import RoleOperateDrawer from './modules/role-operate-drawer.vue';
-import RoleSearch from './modules/role-search.vue';
-
-const appStore = useAppStore();
-
-const {
-  columns,
-  columnChecks,
-  data,
-  loading,
-  getData,
-  getDataByPage,
-  mobilePagination,
-  searchParams,
-  resetSearchParams
-} = useTable({
-  apiFn: fetchGetRoleList,
-  apiParams: {
-    current: 1,
-    size: 10,
-    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
-    // the value can not be undefined, otherwise the property in Form will not be reactive
-    status: null,
-    roleName: null,
-    roleCode: null
-  },
-  columns: () => [
-    {
-      type: 'selection',
-      align: 'center',
-      width: 48
-    },
-    {
-      key: 'index',
-      title: $t('common.index'),
-      width: 64,
-      align: 'center'
-    },
-    {
-      key: 'roleName',
-      title: $t('page.manage.role.roleName'),
-      align: 'center',
-      minWidth: 120
-    },
-    {
-      key: 'roleCode',
-      title: $t('page.manage.role.roleCode'),
-      align: 'center',
-      minWidth: 120
-    },
-    {
-      key: 'roleDesc',
-      title: $t('page.manage.role.roleDesc'),
-      minWidth: 120
-    },
-    {
-      key: 'status',
-      title: $t('page.manage.role.roleStatus'),
-      align: 'center',
-      width: 100,
-      render: row => {
-        if (row.status === null) {
-          return null;
-        }
-
-        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
-          1: 'success',
-          2: 'warning'
-        };
-
-        const label = $t(enableStatusRecord[row.status]);
-
-        return <NTag type={tagMap[row.status]}>{label}</NTag>;
-      }
-    },
-    {
-      key: 'operate',
-      title: $t('common.operate'),
-      align: 'center',
-      width: 130,
-      render: row => (
-        <div class="flex-center gap-8px">
-          <NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
-            {$t('common.edit')}
-          </NButton>
-          <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
-            {{
-              default: () => $t('common.confirmDelete'),
-              trigger: () => (
-                <NButton type="error" ghost size="small">
-                  {$t('common.delete')}
-                </NButton>
-              )
-            }}
-          </NPopconfirm>
-        </div>
-      )
-    }
-  ]
-});
-
-const {
-  drawerVisible,
-  operateType,
-  editingData,
-  handleAdd,
-  handleEdit,
-  checkedRowKeys,
-  onBatchDeleted,
-  onDeleted
-  // closeDrawer
-} = useTableOperate(data, getData);
-
-async function handleBatchDelete() {
-  // request
-  console.log(checkedRowKeys.value);
-
-  onBatchDeleted();
-}
-
-function handleDelete(id: number) {
-  // request
-  console.log(id);
-
-  onDeleted();
-}
-
-function edit(id: number) {
-  handleEdit(id);
-}
-</script>
-
-<template>
-  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
-    <NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
-      <template #header-extra>
-        <TableHeaderOperation
-          v-model:columns="columnChecks"
-          :disabled-delete="checkedRowKeys.length === 0"
-          :loading="loading"
-          @add="handleAdd"
-          @delete="handleBatchDelete"
-          @refresh="getData"
-        />
-      </template>
-      <NDataTable
-        v-model:checked-row-keys="checkedRowKeys"
-        :columns="columns"
-        :data="data"
-        size="small"
-        :flex-height="!appStore.isMobile"
-        :scroll-x="702"
-        :loading="loading"
-        remote
-        :row-key="row => row.id"
-        :pagination="mobilePagination"
-        class="sm:h-full"
-      />
-      <RoleOperateDrawer
-        v-model:visible="drawerVisible"
-        :operate-type="operateType"
-        :row-data="editingData"
-        @submitted="getDataByPage"
-      />
-    </NCard>
-  </div>
-</template>
-
-<style scoped></style>

src/views/manage/role/modules/button-auth-modal.vue

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import { computed, shallowRef } from 'vue';
-import { $t } from '@/locales';
-
-defineOptions({
-  name: 'ButtonAuthModal'
-});
-
-interface Props {
-  /** the roleId */
-  roleId: number;
-}
-
-const props = defineProps<Props>();
-
-const visible = defineModel<boolean>('visible', {
-  default: false
-});
-
-function closeModal() {
-  visible.value = false;
-}
-
-const title = computed(() => $t('common.edit') + $t('page.manage.role.buttonAuth'));
-
-type ButtonConfig = {
-  id: number;
-  label: string;
-  code: string;
-};
-
-const tree = shallowRef<ButtonConfig[]>([]);
-
-async function getAllButtons() {
-  // request
-  tree.value = [
-    { id: 1, label: 'button1', code: 'code1' },
-    { id: 2, label: 'button2', code: 'code2' },
-    { id: 3, label: 'button3', code: 'code3' },
-    { id: 4, label: 'button4', code: 'code4' },
-    { id: 5, label: 'button5', code: 'code5' },
-    { id: 6, label: 'button6', code: 'code6' },
-    { id: 7, label: 'button7', code: 'code7' },
-    { id: 8, label: 'button8', code: 'code8' },
-    { id: 9, label: 'button9', code: 'code9' },
-    { id: 10, label: 'button10', code: 'code10' }
-  ];
-}
-
-const checks = shallowRef<number[]>([]);
-
-async function getChecks() {
-  console.log(props.roleId);
-  // request
-  checks.value = [1, 2, 3, 4, 5];
-}
-
-function handleSubmit() {
-  console.log(checks.value, props.roleId);
-  // request
-
-  window.$message?.success?.($t('common.modifySuccess'));
-
-  closeModal();
-}
-
-function init() {
-  getAllButtons();
-  getChecks();
-}
-
-// init
-init();
-</script>
-
-<template>
-  <NModal v-model:show="visible" :title="title" preset="card" class="w-480px">
-    <NTree
-      v-model:checked-keys="checks"
-      :data="tree"
-      key-field="id"
-      block-line
-      checkable
-      expand-on-click
-      virtual-scroll
-      class="h-280px"
-    />
-    <template #footer>
-      <NSpace justify="end">
-        <NButton size="small" class="mt-16px" @click="closeModal">
-          {{ $t('common.cancel') }}
-        </NButton>
-        <NButton type="primary" size="small" class="mt-16px" @click="handleSubmit">
-          {{ $t('common.confirm') }}
-        </NButton>
-      </NSpace>
-    </template>
-  </NModal>
-</template>
-
-<style scoped></style>

src/views/manage/role/modules/menu-auth-modal.vue

@@ -1,130 +0,0 @@
-<script setup lang="ts">
-import { computed, shallowRef, watch } from 'vue';
-import { $t } from '@/locales';
-import { fetchGetAllPages, fetchGetMenuTree } from '@/service/api';
-
-defineOptions({
-  name: 'MenuAuthModal'
-});
-
-interface Props {
-  /** the roleId */
-  roleId: number;
-}
-
-const props = defineProps<Props>();
-
-const visible = defineModel<boolean>('visible', {
-  default: false
-});
-
-function closeModal() {
-  visible.value = false;
-}
-
-const title = computed(() => $t('common.edit') + $t('page.manage.role.menuAuth'));
-
-const home = shallowRef('');
-
-async function getHome() {
-  console.log(props.roleId);
-
-  home.value = 'home';
-}
-
-async function updateHome(val: string) {
-  // request
-
-  home.value = val;
-}
-
-const pages = shallowRef<string[]>([]);
-
-async function getPages() {
-  const { error, data } = await fetchGetAllPages();
-
-  if (!error) {
-    pages.value = data;
-  }
-}
-
-const pageSelectOptions = computed(() => {
-  const opts: CommonType.Option[] = pages.value.map(page => ({
-    label: page,
-    value: page
-  }));
-
-  return opts;
-});
-
-const tree = shallowRef<Api.SystemManage.MenuTree[]>([]);
-
-async function getTree() {
-  const { error, data } = await fetchGetMenuTree();
-
-  if (!error) {
-    tree.value = data;
-  }
-}
-
-const checks = shallowRef<number[]>([]);
-
-async function getChecks() {
-  console.log(props.roleId);
-  // request
-  checks.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
-}
-
-function handleSubmit() {
-  console.log(checks.value, props.roleId);
-  // request
-
-  window.$message?.success?.($t('common.modifySuccess'));
-
-  closeModal();
-}
-
-function init() {
-  getHome();
-  getPages();
-  getTree();
-  getChecks();
-}
-
-watch(visible, val => {
-  if (val) {
-    init();
-  }
-});
-</script>
-
-<template>
-  <NModal v-model:show="visible" :title="title" preset="card" class="w-480px">
-    <div class="flex-y-center gap-16px pb-12px">
-      <div>{{ $t('page.manage.menu.home') }}</div>
-      <NSelect :value="home" :options="pageSelectOptions" size="small" class="w-160px" @update:value="updateHome" />
-    </div>
-    <NTree
-      v-model:checked-keys="checks"
-      :data="tree"
-      key-field="id"
-      checkable
-      expand-on-click
-      virtual-scroll
-      block-line
-      class="h-280px"
-    />
-    <template #footer>
-      <NSpace justify="end">
-        <NButton size="small" class="mt-16px" @click="closeModal">
-          {{ $t('common.cancel') }}
-        </NButton>
-        <NButton type="primary" size="small" class="mt-16px" @click="handleSubmit">
-          {{ $t('common.confirm') }}
-        </NButton>
-      </NSpace>
-    </template>
-  </NModal>
-</template>
-
-<style scoped></style>

src/views/manage/role/modules/role-operate-drawer.vue

@@ -1,134 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive, watch } from 'vue';
-import { useBoolean } from '@sa/hooks';
-import { useFormRules, useNaiveForm } from '@/hooks/common/form';
-import { $t } from '@/locales';
-import { enableStatusOptions } from '@/constants/business';
-import MenuAuthModal from './menu-auth-modal.vue';
-import ButtonAuthModal from './button-auth-modal.vue';
-
-defineOptions({
-  name: 'RoleOperateDrawer'
-});
-
-interface Props {
-  /** the type of operation */
-  operateType: NaiveUI.TableOperateType;
-  /** the edit row data */
-  rowData?: Api.SystemManage.Role | null;
-}
-
-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 { bool: menuAuthVisible, setTrue: openMenuAuthModal } = useBoolean();
-const { bool: buttonAuthVisible, setTrue: openButtonAuthModal } = useBoolean();
-
-const title = computed(() => {
-  const titles: Record<NaiveUI.TableOperateType, string> = {
-    add: $t('page.manage.role.addRole'),
-    edit: $t('page.manage.role.editRole')
-  };
-  return titles[props.operateType];
-});
-
-type Model = Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleDesc' | 'status'>;
-
-const model: Model = reactive(createDefaultModel());
-
-function createDefaultModel(): Model {
-  return {
-    roleName: '',
-    roleCode: '',
-    roleDesc: '',
-    status: null
-  };
-}
-
-type RuleKey = Exclude<keyof Model, 'roleDesc'>;
-
-const rules: Record<RuleKey, App.Global.FormRule> = {
-  roleName: defaultRequiredRule,
-  roleCode: defaultRequiredRule,
-  status: defaultRequiredRule
-};
-
-const roleId = computed(() => props.rowData?.id || -1);
-
-const isEdit = computed(() => props.operateType === 'edit');
-
-function handleInitModel() {
-  Object.assign(model, createDefaultModel());
-
-  if (props.operateType === 'edit' && props.rowData) {
-    Object.assign(model, props.rowData);
-  }
-}
-
-function closeDrawer() {
-  visible.value = false;
-}
-
-async function handleSubmit() {
-  await validate();
-  // request
-  window.$message?.success($t('common.updateSuccess'));
-  closeDrawer();
-  emit('submitted');
-}
-
-watch(visible, () => {
-  if (visible.value) {
-    handleInitModel();
-    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">
-        <NFormItem :label="$t('page.manage.role.roleName')" path="roleName">
-          <NInput v-model:value="model.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
-        </NFormItem>
-        <NFormItem :label="$t('page.manage.role.roleCode')" path="roleCode">
-          <NInput v-model:value="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
-        </NFormItem>
-        <NFormItem :label="$t('page.manage.role.roleStatus')" 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.role.roleDesc')" path="roleDesc">
-          <NInput v-model:value="model.roleDesc" :placeholder="$t('page.manage.role.form.roleDesc')" />
-        </NFormItem>
-      </NForm>
-      <NSpace v-if="isEdit">
-        <NButton @click="openMenuAuthModal">{{ $t('page.manage.role.menuAuth') }}</NButton>
-        <MenuAuthModal v-model:visible="menuAuthVisible" :role-id="roleId" />
-        <NButton @click="openButtonAuthModal">{{ $t('page.manage.role.buttonAuth') }}</NButton>
-        <ButtonAuthModal v-model:visible="buttonAuthVisible" :role-id="roleId" />
-      </NSpace>
-      <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>

src/views/manage/role/modules/role-search.vue

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import { $t } from '@/locales';
-import { enableStatusOptions } from '@/constants/business';
-import { translateOptions } from '@/utils/common';
-
-defineOptions({
-  name: 'RoleSearch'
-});
-
-interface Emits {
-  (e: 'reset'): void;
-  (e: 'search'): void;
-}
-
-const emit = defineEmits<Emits>();
-
-const model = defineModel<Api.SystemManage.RoleSearchParams>('model', { required: true });
-
-function reset() {
-  emit('reset');
-}
-
-function search() {
-  emit('search');
-}
-</script>
-
-<template>
-  <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
-    <NForm :model="model" label-placement="left" :label-width="80">
-      <NGrid responsive="screen" item-responsive>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleName')" path="roleName" class="pr-24px">
-          <NInput v-model:value="model.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
-        </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleCode')" path="roleCode" class="pr-24px">
-          <NInput v-model:value="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
-        </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleStatus')" path="status" class="pr-24px">
-          <NSelect
-            v-model:value="model.status"
-            :placeholder="$t('page.manage.role.form.roleStatus')"
-            :options="translateOptions(enableStatusOptions)"
-            clearable
-          />
-        </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6">
-          <NSpace class="w-full" justify="end">
-            <NButton @click="reset">
-              <template #icon>
-                <icon-ic-round-refresh class="text-icon" />
-              </template>
-              {{ $t('common.reset') }}
-            </NButton>
-            <NButton type="primary" ghost @click="search">
-              <template #icon>
-                <icon-ic-round-search class="text-icon" />
-              </template>
-              {{ $t('common.search') }}
-            </NButton>
-          </NSpace>
-        </NFormItemGi>
-      </NGrid>
-    </NForm>
-  </NCard>
-</template>
-
-<style scoped></style>

src/views/manage/user-detail/[id].vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  id: string;
-}
-
-defineProps<Props>();
-</script>
-
-<template>
-  <LookForward />
-</template>
-
-<style scoped></style>

src/views/manage/user/index.vue

@@ -1,208 +0,0 @@
-<script setup lang="tsx">
-import { NButton, NPopconfirm, NTag } from 'naive-ui';
-import { fetchGetUserList } from '@/service/api';
-import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
-import { enableStatusRecord, userGenderRecord } from '@/constants/business';
-import { useTable, useTableOperate } from '@/hooks/common/table';
-import UserOperateDrawer from './modules/user-operate-drawer.vue';
-import UserSearch from './modules/user-search.vue';
-
-const appStore = useAppStore();
-
-const {
-  columns,
-  columnChecks,
-  data,
-  getData,
-  getDataByPage,
-  loading,
-  mobilePagination,
-  searchParams,
-  resetSearchParams
-} = useTable({
-  apiFn: fetchGetUserList,
-  showTotal: true,
-  apiParams: {
-    current: 1,
-    size: 10,
-    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
-    // the value can not be undefined, otherwise the property in Form will not be reactive
-    status: null,
-    userName: null,
-    userGender: null,
-    nickName: null,
-    userPhone: null,
-    userEmail: null
-  },
-  columns: () => [
-    {
-      type: 'selection',
-      align: 'center',
-      width: 48
-    },
-    {
-      key: 'index',
-      title: $t('common.index'),
-      align: 'center',
-      width: 64
-    },
-    {
-      key: 'userName',
-      title: $t('page.manage.user.userName'),
-      align: 'center',
-      minWidth: 100
-    },
-    {
-      key: 'userGender',
-      title: $t('page.manage.user.userGender'),
-      align: 'center',
-      width: 100,
-      render: row => {
-        if (row.userGender === null) {
-          return null;
-        }
-
-        const tagMap: Record<Api.SystemManage.UserGender, NaiveUI.ThemeColor> = {
-          1: 'primary',
-          2: 'error'
-        };
-
-        const label = $t(userGenderRecord[row.userGender]);
-
-        return <NTag type={tagMap[row.userGender]}>{label}</NTag>;
-      }
-    },
-    {
-      key: 'nickName',
-      title: $t('page.manage.user.nickName'),
-      align: 'center',
-      minWidth: 100
-    },
-    {
-      key: 'userPhone',
-      title: $t('page.manage.user.userPhone'),
-      align: 'center',
-      width: 120
-    },
-    {
-      key: 'userEmail',
-      title: $t('page.manage.user.userEmail'),
-      align: 'center',
-      minWidth: 200
-    },
-    {
-      key: 'status',
-      title: $t('page.manage.user.userStatus'),
-      align: 'center',
-      width: 100,
-      render: row => {
-        if (row.status === null) {
-          return null;
-        }
-
-        const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
-          1: 'success',
-          2: 'warning'
-        };
-
-        const label = $t(enableStatusRecord[row.status]);
-
-        return <NTag type={tagMap[row.status]}>{label}</NTag>;
-      }
-    },
-    {
-      key: 'operate',
-      title: $t('common.operate'),
-      align: 'center',
-      width: 130,
-      render: row => (
-        <div class="flex-center gap-8px">
-          <NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
-            {$t('common.edit')}
-          </NButton>
-          <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
-            {{
-              default: () => $t('common.confirmDelete'),
-              trigger: () => (
-                <NButton type="error" ghost size="small">
-                  {$t('common.delete')}
-                </NButton>
-              )
-            }}
-          </NPopconfirm>
-        </div>
-      )
-    }
-  ]
-});
-
-const {
-  drawerVisible,
-  operateType,
-  editingData,
-  handleAdd,
-  handleEdit,
-  checkedRowKeys,
-  onBatchDeleted,
-  onDeleted
-  // closeDrawer
-} = useTableOperate(data, getData);
-
-async function handleBatchDelete() {
-  // request
-  console.log(checkedRowKeys.value);
-
-  onBatchDeleted();
-}
-
-function handleDelete(id: number) {
-  // request
-  console.log(id);
-
-  onDeleted();
-}
-
-function edit(id: number) {
-  handleEdit(id);
-}
-</script>
-
-<template>
-  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
-    <NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
-      <template #header-extra>
-        <TableHeaderOperation
-          v-model:columns="columnChecks"
-          :disabled-delete="checkedRowKeys.length === 0"
-          :loading="loading"
-          @add="handleAdd"
-          @delete="handleBatchDelete"
-          @refresh="getData"
-        />
-      </template>
-      <NDataTable
-        v-model:checked-row-keys="checkedRowKeys"
-        :columns="columns"
-        :data="data"
-        size="small"
-        :flex-height="!appStore.isMobile"
-        :scroll-x="962"
-        :loading="loading"
-        remote
-        :row-key="row => row.id"
-        :pagination="mobilePagination"
-        class="sm:h-full"
-      />
-      <UserOperateDrawer
-        v-model:visible="drawerVisible"
-        :operate-type="operateType"
-        :row-data="editingData"
-        @submitted="getDataByPage"
-      />
-    </NCard>
-  </div>
-</template>
-
-<style scoped></style>

src/views/manage/user/modules/user-operate-drawer.vue

@@ -1,166 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive, ref, watch } from 'vue';
-import { useFormRules, useNaiveForm } from '@/hooks/common/form';
-import { fetchGetAllRoles } from '@/service/api';
-import { $t } from '@/locales';
-import { enableStatusOptions, userGenderOptions } from '@/constants/business';
-
-defineOptions({
-  name: 'UserOperateDrawer'
-});
-
-interface Props {
-  /** the type of operation */
-  operateType: NaiveUI.TableOperateType;
-  /** the edit row data */
-  rowData?: Api.SystemManage.User | null;
-}
-
-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<NaiveUI.TableOperateType, string> = {
-    add: $t('page.manage.user.addUser'),
-    edit: $t('page.manage.user.editUser')
-  };
-  return titles[props.operateType];
-});
-
-type Model = Pick<
-  Api.SystemManage.User,
-  'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'status'
->;
-
-const model: Model = reactive(createDefaultModel());
-
-function createDefaultModel(): Model {
-  return {
-    userName: '',
-    userGender: null,
-    nickName: '',
-    userPhone: '',
-    userEmail: '',
-    userRoles: [],
-    status: null
-  };
-}
-
-type RuleKey = Extract<keyof Model, 'userName' | 'status'>;
-
-const rules: Record<RuleKey, App.Global.FormRule> = {
-  userName: defaultRequiredRule,
-  status: defaultRequiredRule
-};
-
-/** 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
-    }));
-
-    // the mock data does not have the roleCode, so fill it
-    // if the real request, remove the following code
-    const userRoleOptions = model.userRoles.map(item => ({
-      label: item,
-      value: item
-    }));
-    // end
-
-    roleOptions.value = [...userRoleOptions, ...options];
-  }
-}
-
-function handleInitModel() {
-  Object.assign(model, createDefaultModel());
-
-  if (props.operateType === 'edit' && props.rowData) {
-    Object.assign(model, props.rowData);
-  }
-}
-
-function closeDrawer() {
-  visible.value = false;
-}
-
-async function handleSubmit() {
-  await validate();
-  // request
-  window.$message?.success($t('common.updateSuccess'));
-  closeDrawer();
-  emit('submitted');
-}
-
-watch(visible, () => {
-  if (visible.value) {
-    handleInitModel();
-    restoreValidation();
-    getRoleOptions();
-  }
-});
-</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">
-        <NFormItem :label="$t('page.manage.user.userName')" path="userName">
-          <NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" />
-        </NFormItem>
-        <NFormItem :label="$t('page.manage.user.userGender')" path="userGender">
-          <NRadioGroup v-model:value="model.userGender">
-            <NRadio v-for="item in userGenderOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
-          </NRadioGroup>
-        </NFormItem>
-        <NFormItem :label="$t('page.manage.user.nickName')" path="nickName">
-          <NInput v-model:value="model.nickName" :placeholder="$t('page.manage.user.form.nickName')" />
-        </NFormItem>
-        <NFormItem :label="$t('page.manage.user.userPhone')" path="userPhone">
-          <NInput v-model:value="model.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" />
-        </NFormItem>
-        <NFormItem :label="$t('page.manage.user.userEmail')" path="email">
-          <NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
-        </NFormItem>
-        <NFormItem :label="$t('page.manage.user.userStatus')" 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.user.userRole')" path="roles">
-          <NSelect
-            v-model:value="model.userRoles"
-            multiple
-            :options="roleOptions"
-            :placeholder="$t('page.manage.user.form.userRole')"
-          />
-        </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>

src/views/manage/user/modules/user-search.vue

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { $t } from '@/locales';
-import { useFormRules, useNaiveForm } from '@/hooks/common/form';
-import { enableStatusOptions, userGenderOptions } from '@/constants/business';
-import { translateOptions } from '@/utils/common';
-
-defineOptions({
-  name: 'UserSearch'
-});
-
-interface Emits {
-  (e: 'reset'): void;
-  (e: 'search'): void;
-}
-
-const emit = defineEmits<Emits>();
-
-const { formRef, validate, restoreValidation } = useNaiveForm();
-
-const model = defineModel<Api.SystemManage.UserSearchParams>('model', { required: true });
-
-type RuleKey = Extract<keyof Api.SystemManage.UserSearchParams, 'userEmail' | 'userPhone'>;
-
-const rules = computed<Record<RuleKey, App.Global.FormRule>>(() => {
-  const { patternRules } = useFormRules(); // inside computed to make locale reactive
-
-  return {
-    userEmail: patternRules.email,
-    userPhone: patternRules.phone
-  };
-});
-
-async function reset() {
-  await restoreValidation();
-  emit('reset');
-}
-
-async function search() {
-  await validate();
-  emit('search');
-}
-</script>
-
-<template>
-  <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
-    <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
-      <NGrid responsive="screen" item-responsive>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userName')" path="userName" class="pr-24px">
-          <NInput v-model:value="model.userName" :placeholder="$t('page.manage.user.form.userName')" />
-        </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userGender')" path="userGender" class="pr-24px">
-          <NSelect
-            v-model:value="model.userGender"
-            :placeholder="$t('page.manage.user.form.userGender')"
-            :options="translateOptions(userGenderOptions)"
-            clearable
-          />
-        </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.nickName')" path="nickName" class="pr-24px">
-          <NInput v-model:value="model.nickName" :placeholder="$t('page.manage.user.form.nickName')" />
-        </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userPhone')" path="userPhone" class="pr-24px">
-          <NInput v-model:value="model.userPhone" :placeholder="$t('page.manage.user.form.userPhone')" />
-        </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userEmail')" path="userEmail" class="pr-24px">
-          <NInput v-model:value="model.userEmail" :placeholder="$t('page.manage.user.form.userEmail')" />
-        </NFormItemGi>
-        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.user.userStatus')" path="userStatus" class="pr-24px">
-          <NSelect
-            v-model:value="model.status"
-            :placeholder="$t('page.manage.user.form.userStatus')"
-            :options="translateOptions(enableStatusOptions)"
-            clearable
-          />
-        </NFormItemGi>
-        <NFormItemGi span="24 m:12" class="pr-24px">
-          <NSpace class="w-full" justify="end">
-            <NButton @click="reset">
-              <template #icon>
-                <icon-ic-round-refresh class="text-icon" />
-              </template>
-              {{ $t('common.reset') }}
-            </NButton>
-            <NButton type="primary" ghost @click="search">
-              <template #icon>
-                <icon-ic-round-search class="text-icon" />
-              </template>
-              {{ $t('common.search') }}
-            </NButton>
-          </NSpace>
-        </NFormItemGi>
-      </NGrid>
-    </NForm>
-  </NCard>
-</template>
-
-<style scoped></style>