chore(release): release tauri v1.0.6

.env

@@ -43,6 +43,3 @@ VITE_STATIC_SUPER_ROLE=R_SUPER
 
 # sourcemap
 VITE_SOURCE_MAP=N
-
-# Used to differentiate storage across different domains
-VITE_STORAGE_PREFIX=SOY_

.env.prod

@@ -1,5 +1,5 @@
 # backend service base url, prod environment
-VITE_SERVICE_BASE_URL=https://mock.apifox.cn/m1/3109515-0-default
+VITE_SERVICE_BASE_URL=https://mock.apifox.com/m1/3109515-0-default
 
 # other backend service base url, prod environment
 VITE_OTHER_SERVICE_BASE_URL= `{

.env.test

@@ -1,5 +1,5 @@
 # backend service base url, test environment
-VITE_SERVICE_BASE_URL=https://mock.apifox.cn/m1/3109515-0-default
+VITE_SERVICE_BASE_URL=https://mock.apifox.com/m1/3109515-0-default
 
 # other backend service base url, test environment
 VITE_OTHER_SERVICE_BASE_URL= `{

.npmrc

@@ -1,4 +1,3 @@
 registry=https://registry.npmmirror.com/
 shamefully-hoist=true
 ignore-workspace-root-check=true
-link-workspace-packages=true

.vscode/launch.json

@@ -12,7 +12,7 @@
       "type": "node",
       "request": "launch",
       "name": "TS Debugger",
-      "runtimeExecutable": "tsx",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/tsx",
       "skipFiles": ["<node_internals>/**", "${workspaceFolder}/node_modules/**"],
       "program": "${file}"
     }

.vscode/settings.json

@@ -13,7 +13,7 @@
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": ["src/locales/langs"],
   "prettier.enable": false,
-  "typescript.tsdk": "node_modules/typescript/lib",
   "unocss.root": ["./"],
-  "vue.server.hybridMode": false
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vue.server.hybridMode": true
 }

CHANGELOG.md

@@ -1,302 +1,6 @@
 # Changelog
 
 
-## [v1.1.4](https://github.com/honghuangdc/soybean-admin/compare/v1.1.3...v1.1.4) (2024-06-06)
-
-###    🐞 Bug Fixes
-
-- **utils**: modalLogout bug when esc is pressed &nbsp;-&nbsp; by @sigma-plus in https://github.com/honghuangdc/soybean-admin/issues/470 [<samp>(bd69c)</samp>](https://github.com/honghuangdc/soybean-admin/commit/bd69c00)
-
-### &nbsp;&nbsp;&nbsp;🛠 Optimizations
-
-- **projects**: optimize RouteMeta remarks &nbsp;-&nbsp; by @soybeanjs [<samp>(ffb48)</samp>](https://github.com/honghuangdc/soybean-admin/commit/ffb48b1)
-
-### &nbsp;&nbsp;&nbsp;📖 Documentation
-
-- **projects**:
-  - update CHANGELOG &nbsp;-&nbsp; by @soybeanjs [<samp>(756f8)</samp>](https://github.com/honghuangdc/soybean-admin/commit/756f84a)
-  - update Node&pnpm version &nbsp;-&nbsp; by @Azir-11 in https://github.com/honghuangdc/soybean-admin/issues/472 [<samp>(9b05d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/9b05d73)
-
-### &nbsp;&nbsp;&nbsp;🏡 Chore
-
-- **deps**:
-  - update deps &nbsp;-&nbsp; by @soybeanjs [<samp>(d0380)</samp>](https://github.com/honghuangdc/soybean-admin/commit/d0380ce)
-  - update deps &nbsp;-&nbsp; by @soybeanjs [<samp>(1f464)</samp>](https://github.com/honghuangdc/soybean-admin/commit/1f4647b)
-- **projects**:
-  - close http proxy &nbsp;-&nbsp; by @soybeanjs [<samp>(d08a3)</samp>](https://github.com/honghuangdc/soybean-admin/commit/d08a381)
-  - update mock url &nbsp;-&nbsp; by @soybeanjs [<samp>(e6086)</samp>](https://github.com/honghuangdc/soybean-admin/commit/e6086f0)
-  - update vscode settings &nbsp;-&nbsp; by @soybeanjs [<samp>(910df)</samp>](https://github.com/honghuangdc/soybean-admin/commit/910dfca)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![soybeanjs](https://github.com/soybeanjs.png?size=48)](https://github.com/soybeanjs)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;[![sigma-plus](https://github.com/sigma-plus.png?size=48)](https://github.com/sigma-plus)&nbsp;&nbsp;
-
-## [v1.1.3](https://github.com/soybeanjs/soybean-admin/compare/v1.1.2...v1.1.3) (2024-06-02)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
-- **components**:
-  - Fix the issue of search box popping up repeatedly due to carriage return &nbsp;-&nbsp; by @Azir-11 in https://github.com/soybeanjs/soybean-admin/issues/468 [<samp>(5bd96)</samp>](https://github.com/soybeanjs/soybean-admin/commit/5bd96b8)
-- **projects**:
-  - fix click menu search. fixed #466, close #467 &nbsp;-&nbsp; by @soybeanjs in https://github.com/soybeanjs/soybean-admin/issues/466 and https://github.com/soybeanjs/soybean-admin/issues/467 [<samp>(8efdb)</samp>](https://github.com/soybeanjs/soybean-admin/commit/8efdb10)
-  - fix reCacheRoute. fixed #464 &nbsp;-&nbsp; by @soybeanjs in https://github.com/soybeanjs/soybean-admin/issues/464 [<samp>(59faf)</samp>](https://github.com/soybeanjs/soybean-admin/commit/59faf15)
-- **styles**:
-  - fix FirstLevelMenu style. fixed #450 &nbsp;-&nbsp; by @soybeanjs in https://github.com/soybeanjs/soybean-admin/issues/450 [<samp>(db64b)</samp>](https://github.com/soybeanjs/soybean-admin/commit/db64b0e)
-  - fix PinToggler style. fixed #451 &nbsp;-&nbsp; by @soybeanjs in https://github.com/soybeanjs/soybean-admin/issues/451 [<samp>(42b12)</samp>](https://github.com/soybeanjs/soybean-admin/commit/42b121a)
-
-### &nbsp;&nbsp;&nbsp;🛠 Optimizations
-
-- **components**: accuracy draggable area for TableColumnSetting with animation &nbsp;-&nbsp; by @orangelckc in https://github.com/soybeanjs/soybean-admin/issues/465 [<samp>(2aa85)</samp>](https://github.com/soybeanjs/soybean-admin/commit/2aa85c6)
-- **projects**: unocss border shortcut &nbsp;-&nbsp; by @soybeanjs [<samp>(40d0f)</samp>](https://github.com/soybeanjs/soybean-admin/commit/40d0f8a)
-
-### &nbsp;&nbsp;&nbsp;📖 Documentation
-
-- **projects**: update CHANGELOG &nbsp;-&nbsp; by @soybeanjs [<samp>(87b18)</samp>](https://github.com/soybeanjs/soybean-admin/commit/87b1838)
-
-### &nbsp;&nbsp;&nbsp;🏡 Chore
-
-- **other**:
-  - correct spell mistake &nbsp;-&nbsp; by @orangelckc in https://github.com/soybeanjs/soybean-admin/issues/460 [<samp>(086ba)</samp>](https://github.com/soybeanjs/soybean-admin/commit/086bad4)
-  - correct spell mistake &nbsp;-&nbsp; by @Azir-11 in https://github.com/soybeanjs/soybean-admin/issues/462 [<samp>(f1850)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f185041)
-- **projects**:
-  - update vscode launch.json &nbsp;-&nbsp; by @soybeanjs [<samp>(4c1c7)</samp>](https://github.com/soybeanjs/soybean-admin/commit/4c1c7e6)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![soybeanjs](https://github.com/soybeanjs.png?size=48)](https://github.com/soybeanjs)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;[![orangelckc](https://github.com/orangelckc.png?size=48)](https://github.com/orangelckc)&nbsp;&nbsp;
-
-## [v1.1.2](https://github.com/soybeanjs/soybean-admin/compare/v1.1.1...v1.1.2) (2024-05-24)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
-- **projects**:
-  - fix header style & fix button highlight when click global-tab. fixed #446 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/446 [<samp>(64fc0)</samp>](https://github.com/soybeanjs/soybean-admin/commit/64fc099)
-  - fix multi tab page only render once. fixed #441 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/441 [<samp>(e379d)</samp>](https://github.com/soybeanjs/soybean-admin/commit/e379d6c)
-
-### &nbsp;&nbsp;&nbsp;🛠 Optimizations
-
-- **projects**: optimize code &nbsp;-&nbsp; by @honghuangdc [<samp>(bc8dc)</samp>](https://github.com/soybeanjs/soybean-admin/commit/bc8dc47)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-
-## [v1.1.1](https://github.com/soybeanjs/soybean-admin/compare/v1.1.0...v1.1.1) (2024-05-20)
-
-### &nbsp;&nbsp;&nbsp;🚀 Features
-
-- **hooks**: add setOptions for useEcharts &nbsp;-&nbsp; by @honghuangdc [<samp>(e4d53)</samp>](https://github.com/soybeanjs/soybean-admin/commit/e4d53aa)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
-- **projects**:
-  - fix useRouter. fixed #436 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/436 [<samp>(0774a)</samp>](https://github.com/soybeanjs/soybean-admin/commit/0774a51)
-  - add error handle when get routes in dynamic route mode. fixed 440 &nbsp;-&nbsp; by @honghuangdc [<samp>(57b4a)</samp>](https://github.com/soybeanjs/soybean-admin/commit/57b4a9d)
-- **styles**:
-  - fix useTable type &nbsp;-&nbsp; by @honghuangdc [<samp>(07124)</samp>](https://github.com/soybeanjs/soybean-admin/commit/071241f)
-
-### &nbsp;&nbsp;&nbsp;📖 Documentation
-
-- **projects**:
-  - update CHANGELOG &nbsp;-&nbsp; by @honghuangdc [<samp>(19783)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1978397)
-  - update README.md &nbsp;-&nbsp; by @honghuangdc [<samp>(fa56e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/fa56e9c)
-  - update README.md &nbsp;-&nbsp; by @honghuangdc [<samp>(419ea)</samp>](https://github.com/soybeanjs/soybean-admin/commit/419ea42)
-
-### &nbsp;&nbsp;&nbsp;🏡 Chore
-
-- **projects**:
-  - update deps & fix TS error &nbsp;-&nbsp; by @honghuangdc [<samp>(4ea9c)</samp>](https://github.com/soybeanjs/soybean-admin/commit/4ea9c85)
-  - update eslint-config & fix code &nbsp;-&nbsp; by @honghuangdc [<samp>(68ea9)</samp>](https://github.com/soybeanjs/soybean-admin/commit/68ea974)
-  - update @elegant-router/vue & add error handle for resolve route. fixed #442 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/442 [<samp>(24ff8)</samp>](https://github.com/soybeanjs/soybean-admin/commit/24ff852)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-
-## [v1.1.0](https://github.com/honghuangdc/soybean-admin/compare/v1.0.9...v1.1.0) (2024-05-07)
-
-### &nbsp;&nbsp;&nbsp;🚀 Features
-
-- **projects**:
-  - support grayscale. fixed #385 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/385 [<samp>(d335d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/d335df6)
-  - Add prefix to local storage &nbsp;-&nbsp; by **Azir** [<samp>(1fc34)</samp>](https://github.com/honghuangdc/soybean-admin/commit/1fc34cc)
-  - add table showTotal options &nbsp;-&nbsp; by **paynezhuang** [<samp>(3e61e)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3e61eab)
-  - add recommend color switch. closed #388 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/388 [<samp>(a1920)</samp>](https://github.com/honghuangdc/soybean-admin/commit/a1920fc)
-  - add menu route field &nbsp;-&nbsp; by **paynezhuang** [<samp>(dbe31)</samp>](https://github.com/honghuangdc/soybean-admin/commit/dbe31eb)
-  - support repeated request errors occur once in a short time. close #368, close #369 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/368 and https://github.com/honghuangdc/soybean-admin/issues/369 [<samp>(e3bd3)</samp>](https://github.com/honghuangdc/soybean-admin/commit/e3bd397)
-  - close tab by mouse wheel button click &nbsp;-&nbsp; by **JianJroh** [<samp>(d3849)</samp>](https://github.com/honghuangdc/soybean-admin/commit/d3849ba)
-  - page: support manage_menu more options. close #366 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/366 [<samp>(c4b5c)</samp>](https://github.com/honghuangdc/soybean-admin/commit/c4b5c65)
-  - useTable adds expand to display &nbsp;-&nbsp; by **paynezhuang** [<samp>(0a90d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/0a90dd3)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
-- **projects**:
-  - menu fixedIndexInTab default null &nbsp;-&nbsp; by **paynezhuang** [<samp>(3d10e)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3d10ef1)
-  - fix menu-toggler zIndex &nbsp;-&nbsp; by @honghuangdc [<samp>(7bd43)</samp>](https://github.com/honghuangdc/soybean-admin/commit/7bd43df)
-  - fix manage_menu modal style &nbsp;-&nbsp; by @honghuangdc [<samp>(60f3b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/60f3b14)
-  - fix menu data when role is changed. fixed #391 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/391 [<samp>(3b47b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3b47b5a)
-
-### &nbsp;&nbsp;&nbsp;🛠 Optimizations
-
-- **projects**: remove deprecated code &nbsp;-&nbsp; by @honghuangdc [<samp>(72ccb)</samp>](https://github.com/honghuangdc/soybean-admin/commit/72ccb6b)
-
-### &nbsp;&nbsp;&nbsp;💅 Refactors
-
-- **projects**:
-  - refactor @sa/color-palette => @sa/color & perf @sa/utils &nbsp;-&nbsp; by @honghuangdc [<samp>(34999)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3499997)
-  - menu-operate-drawer => menu-operate-modal &nbsp;-&nbsp; by @honghuangdc [<samp>(003e1)</samp>](https://github.com/honghuangdc/soybean-admin/commit/003e145)
-
-### &nbsp;&nbsp;&nbsp;📖 Documentation
-
-- **projects**:
-  - add CHANGELOG.zh_CN.md &nbsp;-&nbsp; by @honghuangdc [<samp>(18b3f)</samp>](https://github.com/honghuangdc/soybean-admin/commit/18b3f05)
-  - update CHANGELOG &nbsp;-&nbsp; by @honghuangdc [<samp>(4d17c)</samp>](https://github.com/honghuangdc/soybean-admin/commit/4d17cfd)
-
-### &nbsp;&nbsp;&nbsp;🏡 Chore
-
-- **deps**:
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(1cb38)</samp>](https://github.com/honghuangdc/soybean-admin/commit/1cb3816)
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(599b4)</samp>](https://github.com/honghuangdc/soybean-admin/commit/599b4e1)
-- **projects**:
-  - merge main to v1.1.0 &nbsp;-&nbsp; by @honghuangdc [<samp>(ebe55)</samp>](https://github.com/honghuangdc/soybean-admin/commit/ebe55af)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[paynezhuang](mailto:paynezhuang@gmail.com),&nbsp;[JianJroh](mailto:rhjian@foxmail.com),&nbsp;[Azir](mailto:2075125282@qq.com)
-
-## [v1.1.0-beta.2](https://github.com/honghuangdc/soybean-admin/compare/v1.1.0-beta.1...v1.1.0-beta.2) (2024-05-07)
-
-### &nbsp;&nbsp;&nbsp;🚀 Features
-
-- **projects**: useTable adds expand to display &nbsp;-&nbsp; by **paynezhuang** [<samp>(0a90d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/0a90dd3)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
-- **projects**:
-  - fix manage_menu modal style &nbsp;-&nbsp; by @honghuangdc [<samp>(60f3b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/60f3b14)
-  - fix menu data when role is changed. fixed #391 &nbsp;-&nbsp; by @honghuangdc in https://github.com/honghuangdc/soybean-admin/issues/391 [<samp>(3b47b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3b47b5a)
-
-### &nbsp;&nbsp;&nbsp;🛠 Optimizations
-
-- **projects**: remove deprecated code &nbsp;-&nbsp; by @honghuangdc [<samp>(72ccb)</samp>](https://github.com/honghuangdc/soybean-admin/commit/72ccb6b)
-
-### &nbsp;&nbsp;&nbsp;📖 Documentation
-
-- **projects**: add CHANGELOG.zh_CN.md &nbsp;-&nbsp; by @honghuangdc [<samp>(18b3f)</samp>](https://github.com/honghuangdc/soybean-admin/commit/18b3f05)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[paynezhuang](mailto:paynezhuang@gmail.com)
-
-## [v1.1.0-beta.1](https://github.com/soybeanjs/soybean-admin/compare/v1.0.9...v1.1.0-beta.1) (2024-05-07)
-
-### &nbsp;&nbsp;&nbsp;🚀 Features
-
-- **projects**:
-  - support grayscale. fixed #385 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/385 [<samp>(d335d)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d335df6)
-  - Add prefix to local storage &nbsp;-&nbsp; by **Azir** [<samp>(1fc34)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1fc34cc)
-  - add table showTotal options &nbsp;-&nbsp; by **paynezhuang** [<samp>(3e61e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3e61eab)
-  - add recommend color switch. closed #388 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/388 [<samp>(a1920)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a1920fc)
-  - add menu route field &nbsp;-&nbsp; by **paynezhuang** [<samp>(dbe31)</samp>](https://github.com/soybeanjs/soybean-admin/commit/dbe31eb)
-  - support repeated request errors occur once in a short time. close #368, close #369 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/368 and https://github.com/soybeanjs/soybean-admin/issues/369 [<samp>(e3bd3)</samp>](https://github.com/soybeanjs/soybean-admin/commit/e3bd397)
-  - close tab by mouse wheel button click &nbsp;-&nbsp; by **JianJroh** [<samp>(d3849)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d3849ba)
-  - page: support manage_menu more options. close #366 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/366 [<samp>(c4b5c)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c4b5c65)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
-- **projects**:
-  - menu fixedIndexInTab default null &nbsp;-&nbsp; by **paynezhuang** [<samp>(3d10e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3d10ef1)
-  - fix menu-toggler zIndex &nbsp;-&nbsp; by @honghuangdc [<samp>(7bd43)</samp>](https://github.com/soybeanjs/soybean-admin/commit/7bd43df)
-
-### &nbsp;&nbsp;&nbsp;💅 Refactors
-
-- **projects**:
-  - refactor @sa/color-palette => @sa/color & perf @sa/utils &nbsp;-&nbsp; by @honghuangdc [<samp>(34999)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3499997)
-  - menu-operate-drawer => menu-operate-modal &nbsp;-&nbsp; by @honghuangdc [<samp>(003e1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/003e145)
-
-### &nbsp;&nbsp;&nbsp;🏡 Chore
-
-- **deps**:
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(1cb38)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1cb3816)
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(599b4)</samp>](https://github.com/soybeanjs/soybean-admin/commit/599b4e1)
-- **projects**:
-  - merge main to v1.1.0 &nbsp;-&nbsp; by @honghuangdc [<samp>(ebe55)</samp>](https://github.com/soybeanjs/soybean-admin/commit/ebe55af)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[JianJroh](mailto:rhjian@foxmail.com),&nbsp;[paynezhuang](mailto:paynezhuang@gmail.com),&nbsp;[Azir](mailto:2075125282@qq.com)
-
-## [v1.0.9](https://github.com/soybeanjs/soybean-admin/compare/v1.0.8...v1.0.9) (2024-05-05)
-
-### &nbsp;&nbsp;&nbsp;🚀 Features
-
-- **packages**: @sa/scripts: add new commit type `optimize` and commit scope `packages` &nbsp;-&nbsp; by @honghuangdc [<samp>(fbc2e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/fbc2e61)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
-- **projects**: fix manage page drawer operate about data reset. fixed #415, fixed #417 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/415 and https://github.com/soybeanjs/soybean-admin/issues/417 [<samp>(f4513)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f4513e1)
-
-### &nbsp;&nbsp;&nbsp;📖 Documentation
-
-- **projects**:
-  - add ecosystem to README.md &nbsp;-&nbsp; by @honghuangdc [<samp>(d0f17)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d0f17a4)
-  - add PanisAdmin to README &nbsp;-&nbsp; by **paynezhuang** [<samp>(ce2a7)</samp>](https://github.com/soybeanjs/soybean-admin/commit/ce2a75b)
-
-### &nbsp;&nbsp;&nbsp;🏡 Chore
-
-- **deps**:
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(413a8)</samp>](https://github.com/soybeanjs/soybean-admin/commit/413a8b2)
-  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(734ef)</samp>](https://github.com/soybeanjs/soybean-admin/commit/734ef98)
-- **projects**:
-  - update .npmrc &nbsp;-&nbsp; by @honghuangdc [<samp>(52188)</samp>](https://github.com/soybeanjs/soybean-admin/commit/52188d8)
-  - update vscode settings &nbsp;-&nbsp; by @honghuangdc [<samp>(c137b)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c137b97)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[paynezhuang](mailto:paynezhuang@gmail.com)
-
-## [v1.0.8](https://github.com/soybeanjs/soybean-admin/compare/v1.0.7...v1.0.8) (2024-04-27)
-
-### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
-
-- **components**:
-  - fix PinToggler label. fixed #407 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/407 [<samp>(c0ed1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c0ed1f2)
-- **projects**:
-  - text level low. #409 &nbsp;-&nbsp; by **alleycharming** in https://github.com/soybeanjs/soybean-admin/issues/409 [<samp>(3ddb1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3ddb17a)
-  - fix tab fixedIndex as null case &nbsp;-&nbsp; by **paynezhuang** [<samp>(4708e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/4708ede)
-  - recovery the layout config before is mobile. fixed #408, fixed #361 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/408 and https://github.com/soybeanjs/soybean-admin/issues/361 [<samp>(dae2a)</samp>](https://github.com/soybeanjs/soybean-admin/commit/dae2aa5)
-
-### &nbsp;&nbsp;&nbsp;🔥 Performance
-
-- **projects**: perf judgement the fixed tab &nbsp;-&nbsp; by @honghuangdc [<samp>(b3e9b)</samp>](https://github.com/soybeanjs/soybean-admin/commit/b3e9bba)
-
-### &nbsp;&nbsp;&nbsp;💅 Refactors
-
-- **projects**: `Soybean Admin` to `SoybeanAdmin` &nbsp;-&nbsp; by @honghuangdc [<samp>(a8dbc)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a8dbc03)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[paynezhuang](mailto:paynezhuang@gmail.com),&nbsp;[alleycharming](mailto:alleycharming@gmail.com)
-
-## [v1.0.7](https://github.com/soybeanjs/soybean-admin/compare/v1.0.6...v1.0.7) (2024-04-25)
-
-### &nbsp;&nbsp;&nbsp;🚀 Features
-
-- **projects**: support iframe page with diffrent url of custom route &nbsp;-&nbsp; by @honghuangdc [<samp>(da12d)</samp>](https://github.com/soybeanjs/soybean-admin/commit/da12d4a)
-
-### &nbsp;&nbsp;&nbsp;🏡 Chore
-
-- **deps**: update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(fbd80)</samp>](https://github.com/soybeanjs/soybean-admin/commit/fbd80c2)
-
-### &nbsp;&nbsp;&nbsp;❤️ Contributors
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-
 ## [v1.0.6](https://github.com/soybeanjs/soybean-admin/compare/v1.0.5...v1.0.6) (2024-04-25)
 
 ### &nbsp;&nbsp;&nbsp;🚀 Features
@@ -365,7 +69,7 @@
 
 ### &nbsp;&nbsp;&nbsp;💅 Refactors
 
-- **hooks**: refactor @sa/color &nbsp;-&nbsp; by @honghuangdc [<samp>(93191)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9319173)
+- **hooks**: refactor @sa/color-palette &nbsp;-&nbsp; by @honghuangdc [<samp>(93191)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9319173)
 
 ### &nbsp;&nbsp;&nbsp;📖 Documentation
 

CHANGELOG.zh_CN.md

@@ -1,200 +0,0 @@
-# 更新日志
-
-## [v1.1.3](https://github.com/soybeanjs/soybean-admin/compare/v1.1.2...v1.1.3) (2024-06-02)
-
-###    🐞 错误修复
-
-- **组件**:
-  - 修复了由于回车导致搜索框反复弹出的问题 &nbsp;-&nbsp; 由 @Azir-11 在 https://github.com/soybeanjs/soybean-admin/issues/468 中修复 [<samp>(5bd96)</samp>](https://github.com/soybeanjs/soybean-admin/commit/5bd96b8)
-- **项目**:
-  - 修复点击菜单搜索。修复了 #466，关闭 #467 &nbsp;-&nbsp; 由 @soybeanjs 在 https://github.com/soybeanjs/soybean-admin/issues/466 和 https://github.com/soybeanjs/soybean-admin/issues/467 中修复 [<samp>(8efdb)</samp>](https://github.com/soybeanjs/soybean-admin/commit/8efdb10)
-  - 修复 reCacheRoute。修复了 #464 &nbsp;-&nbsp; 由 @soybeanjs 在 https://github.com/soybeanjs/soybean-admin/issues/464 中修复 [<samp>(59faf)</samp>](https://github.com/soybeanjs/soybean-admin/commit/59faf15)
-- **样式**:
-  - 修复 FirstLevelMenu 样式。修复了 #450 &nbsp;-&nbsp; 由 @soybeanjs 在 https://github.com/soybeanjs/soybean-admin/issues/450 中修复 [<samp>(db64b)</samp>](https://github.com/soybeanjs/soybean-admin/commit/db64b0e)
-  - 修复 PinToggler 样式。修复了 #451 &nbsp;-&nbsp; 由 @soybeanjs 在 https://github.com/soybeanjs/soybean-admin/issues/451 中修复 [<samp>(42b12)</samp>](https://github.com/soybeanjs/soybean-admin/commit/42b121a)
-
-### &nbsp;&nbsp;&nbsp;🛠 优化
-
-- **组件**: 提高 TableColumnSetting 的拖动区域精度，带有动画 &nbsp;-&nbsp; 由 @orangelckc 在 https://github.com/soybeanjs/soybean-admin/issues/465 中优化 [<samp>(2aa85)</samp>](https://github.com/soybeanjs/soybean-admin/commit/2aa85c6)
-- **项目**: unocss 边框快捷方式 &nbsp;-&nbsp; 由 @soybeanjs 优化 [<samp>(40d0f)</samp>](https://github.com/soybeanjs/soybean-admin/commit/40d0f8a)
-
-### &nbsp;&nbsp;&nbsp;📖 文档
-
-- **项目**: 更新 CHANGELOG &nbsp;-&nbsp; 由 @soybeanjs 更新 [<samp>(87b18)</samp>](https://github.com/soybeanjs/soybean-admin/commit/87b1838)
-
-### &nbsp;&nbsp;&nbsp;🏡 杂项
-
-- **其他**:
-  - 纠正拼写错误 &nbsp;-&nbsp; 由 @orangelckc 在 https://github.com/soybeanjs/soybean-admin/issues/460 中纠正 [<samp>(086ba)</samp>](https://github.com/soybeanjs/soybean-admin/commit/086bad4)
-  - 纠正拼写错误 &nbsp;-&nbsp; 由 @Azir-11 在 https://github.com/soybeanjs/soybean-admin/issues/462 中纠正 [<samp>(f1850)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f185041)
-- **项目**:
-  - 更新 vscode launch.json &nbsp;-&nbsp; 由 @soybeanjs 更新 [<samp>(4c1c7)</samp>](https://github.com/soybeanjs/soybean-admin/commit/4c1c7e6)
-
-### &nbsp;&nbsp;&nbsp;❤️ 贡献者
-
-[![soybeanjs](https://github.com/soybeanjs.png?size=48)](https://github.com/soybeanjs)&nbsp;&nbsp;[![Azir-11](https://github.com/Azir-11.png?size=48)](https://github.com/Azir-11)&nbsp;&nbsp;[![orangelckc](https://github.com/orangelckc.png?size=48)](https://github.com/orangelckc)&nbsp;&nbsp;
-
-## [v1.1.2](https://github.com/soybeanjs/soybean-admin/compare/v1.1.1...v1.1.2) (2024-05-24)
-
-### &nbsp;&nbsp;&nbsp;🐞 错误修复
-
-- **项目**:
-  - 修复头部样式 & 修复点击全局标签时按钮高亮。修复了 #446 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/446 [<samp>(64fc0)</samp>](https://github.com/soybeanjs/soybean-admin/commit/64fc099)
-  - 修复多标签页只渲染一次。修复了 #441 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/441 [<samp>(e379d)</samp>](https://github.com/soybeanjs/soybean-admin/commit/e379d6c)
-
-### &nbsp;&nbsp;&nbsp;🛠 优化
-
-- **项目**: 优化代码 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(bc8dc)</samp>](https://github.com/soybeanjs/soybean-admin/commit/bc8dc47)
-
-### &nbsp;&nbsp;&nbsp;❤️ 贡献者
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-
-## [v1.1.1](https://github.com/soybeanjs/soybean-admin/compare/v1.1.0...v1.1.1) (2024-05-20)
-
-### &nbsp;&nbsp;&nbsp;🚀 功能
-
-- **hooks**: 为 useEcharts 添加 setOptions &nbsp;-&nbsp; 由 @honghuangdc 提交 [<samp>(e4d53)</samp>](https://github.com/soybeanjs/soybean-admin/commit/e4d53aa)
-
-### &nbsp;&nbsp;&nbsp;🐞 修复错误
-
-- **projects**:
-  - 修复 useRouter。修复了 #436 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/436 提交 [<samp>(0774a)</samp>](https://github.com/soybeanjs/soybean-admin/commit/0774a51)
-  - 在动态路由模式下获取路由时添加错误处理。修复了 440 &nbsp;-&nbsp; 由 @honghuangdc 提交 [<samp>(57b4a)</samp>](https://github.com/soybeanjs/soybean-admin/commit/57b4a9d)
-- **styles**:
-  - 修复 useTable 类型 &nbsp;-&nbsp; 由 @honghuangdc 提交 [<samp>(07124)</samp>](https://github.com/soybeanjs/soybean-admin/commit/071241f)
-
-### &nbsp;&nbsp;&nbsp;📖 文档
-
-- **projects**:
-  - 更新 CHANGELOG &nbsp;-&nbsp; 由 @honghuangdc 提交 [<samp>(19783)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1978397)
-  - 更新 README.md &nbsp;-&nbsp; 由 @honghuangdc 提交 [<samp>(fa56e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/fa56e9c)
-  - 更新 README.md &nbsp;-&nbsp; 由 @honghuangdc 提交 [<samp>(419ea)</samp>](https://github.com/soybeanjs/soybean-admin/commit/419ea42)
-
-### &nbsp;&nbsp;&nbsp;🏡 杂项
-
-- **projects**:
-  - 更新依赖并修复 TS 错误 &nbsp;-&nbsp; 由 @honghuangdc 提交 [<samp>(4ea9c)</samp>](https://github.com/soybeanjs/soybean-admin/commit/4ea9c85)
-  - 更新 eslint-config 并修复代码 &nbsp;-&nbsp; 由 @honghuangdc 提交 [<samp>(68ea9)</samp>](https://github.com/soybeanjs/soybean-admin/commit/68ea974)
-  - 更新 @elegant-router/vue 并为 resolve route 添加错误处理。修复了 #442 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/442 提交 [<samp>(24ff8)</samp>](https://github.com/soybeanjs/soybean-admin/commit/24ff852)
-
-### &nbsp;&nbsp;&nbsp;❤️ 贡献者
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-
-## [v1.1.0](https://github.com/honghuangdc/soybean-admin/compare/v1.0.9...v1.1.0) (2024-05-07)
-
-### &nbsp;&nbsp;&nbsp;🚀 功能
-
-- **项目**:
-  - 支持灰度。修复了 #385 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/honghuangdc/soybean-admin/issues/385 [<samp>(d335d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/d335df6)
-  - 添加前缀到本地存储 &nbsp;-&nbsp; 由 **Azir** [<samp>(1fc34)</samp>](https://github.com/honghuangdc/soybean-admin/commit/1fc34cc)
-  - 添加表格显示总数选项 &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(3e61e)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3e61eab)
-  - 添加推荐颜色切换。关闭了 #388 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/honghuangdc/soybean-admin/issues/388 [<samp>(a1920)</samp>](https://github.com/honghuangdc/soybean-admin/commit/a1920fc)
-  - 添加菜单路由字段 &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(dbe31)</samp>](https://github.com/honghuangdc/soybean-admin/commit/dbe31eb)
-  - 支持短时间内重复请求错误只出现一次。关闭了 #368, 关闭了 #369 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/honghuangdc/soybean-admin/issues/368 和 https://github.com/honghuangdc/soybean-admin/issues/369 [<samp>(e3bd3)</samp>](https://github.com/honghuangdc/soybean-admin/commit/e3bd397)
-  - 通过鼠标滚轮按钮点击关闭标签 &nbsp;-&nbsp; 由 **JianJroh** [<samp>(d3849)</samp>](https://github.com/honghuangdc/soybean-admin/commit/d3849ba)
-  - 页面：支持管理菜单更多选项。关闭了 #366 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/honghuangdc/soybean-admin/issues/366 [<samp>(c4b5c)</samp>](https://github.com/honghuangdc/soybean-admin/commit/c4b5c65)
-  - useTable 添加展开显示 &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(0a90d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/0a90dd3)
-
-### &nbsp;&nbsp;&nbsp;🐞 错误修复
-
-- **项目**:
-  - 菜单 fixedIndexInTab 默认为 null &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(3d10e)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3d10ef1)
-  - 修复菜单切换器 zIndex &nbsp;-&nbsp; 由 @honghuangdc [<samp>(7bd43)</samp>](https://github.com/honghuangdc/soybean-admin/commit/7bd43df)
-  - 修复管理菜单模态样式 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(60f3b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/60f3b14)
-  - 当角色改变时修复菜单数据。修复了 #391 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/honghuangdc/soybean-admin/issues/391 [<samp>(3b47b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3b47b5a)
-
-### &nbsp;&nbsp;&nbsp;🛠 优化
-
-- **项目**: 移除废弃的代码 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(72ccb)</samp>](https://github.com/honghuangdc/soybean-admin/commit/72ccb6b)
-
-### &nbsp;&nbsp;&nbsp;💅 重构
-
-- **项目**:
-  - 重构 @sa/color-palette => @sa/color & 优化 @sa/utils 代码 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(34999)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3499997)
-  - menu-operate-drawer => menu-operate-modal &nbsp;-&nbsp; 由 @honghuangdc [<samp>(003e1)</samp>](https://github.com/honghuangdc/soybean-admin/commit/003e145)
-
-### &nbsp;&nbsp;&nbsp;📖 文档
-
-- **项目**:
-  - 添加 CHANGELOG.zh_CN.md &nbsp;-&nbsp; 由 @honghuangdc [<samp>(18b3f)</samp>](https://github.com/honghuangdc/soybean-admin/commit/18b3f05)
-  - 更新 CHANGELOG &nbsp;-&nbsp; 由 @honghuangdc [<samp>(4d17c)</samp>](https://github.com/honghuangdc/soybean-admin/commit/4d17cfd)
-
-### &nbsp;&nbsp;&nbsp;🏡 杂项
-
-- **依赖**:
-  - 更新依赖 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(1cb38)</samp>](https://github.com/honghuangdc/soybean-admin/commit/1cb3816)
-  - 更新依赖 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(599b4)</samp>](https://github.com/honghuangdc/soybean-admin/commit/599b4e1)
-- **项目**:
-  - 合并 main 到 v1.1.0 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(ebe55)</samp>](https://github.com/honghuangdc/soybean-admin/commit/ebe55af)
-
-### &nbsp;&nbsp;&nbsp;❤️ 贡献者
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[paynezhuang](mailto:paynezhuang@gmail.com),&nbsp;[JianJroh](mailto:rhjian@foxmail.com),&nbsp;[Azir](mailto:2075125282@qq.com)
-
-## [v1.1.0-beta.2](https://github.com/honghuangdc/soybean-admin/compare/v1.1.0-beta.1...v1.1.0-beta.2) (2024-05-07)
-
-### &nbsp;&nbsp;&nbsp;🚀 特性
-
-- **项目**: useTable添加展开以显示 &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(0a90d)</samp>](https://github.com/honghuangdc/soybean-admin/commit/0a90dd3) 提供
-
-### &nbsp;&nbsp;&nbsp;🐞 修复的错误
-
-- **项目**:
-  - 修复 manage_menu 模态样式 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(60f3b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/60f3b14) 提供
-  - 当角色改变时修复菜单数据。修复了 #391 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/honghuangdc/soybean-admin/issues/391 [<samp>(3b47b)</samp>](https://github.com/honghuangdc/soybean-admin/commit/3b47b5a) 提供
-
-### &nbsp;&nbsp;&nbsp;🛠 优化
-
-- **项目**: 删除废弃的代码 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(72ccb)</samp>](https://github.com/honghuangdc/soybean-admin/commit/72ccb6b) 提供
-
-### &nbsp;&nbsp;&nbsp;📖 文档
-
-- **项目**: 添加 CHANGELOG.zh_CN.md &nbsp;-&nbsp; 由 @honghuangdc [<samp>(18b3f)</samp>](https://github.com/honghuangdc/soybean-admin/commit/18b3f05) 提供
-
-### &nbsp;&nbsp;&nbsp;❤️ 贡献者
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[paynezhuang](mailto:paynezhuang@gmail.com)
-
-
-## [v1.1.0-beta.1](https://github.com/soybeanjs/soybean-admin/compare/v1.0.9...v1.1.0-beta.1) (2024-05-07)
-
-### &nbsp;&nbsp;&nbsp;🚀 功能
-
-- **项目**:
-  - 支持灰度。修复了 #385 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/385 [<samp>(d335d)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d335df6)
-  - 添加前缀到本地存储 &nbsp;-&nbsp; 由 **Azir** [<samp>(1fc34)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1fc34cc)
-  - 添加表格 showTotal 选项 &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(3e61e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3e61eab)
-  - 添加推荐颜色切换。关闭了 #388 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/388 [<samp>(a1920)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a1920fc)
-  - 添加菜单路由字段 &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(dbe31)</samp>](https://github.com/soybeanjs/soybean-admin/commit/dbe31eb)
-  - 支持短时间内重复请求错误只发生一次。关闭了 #368, 关闭了 #369 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/368 和 https://github.com/soybeanjs/soybean-admin/issues/369 [<samp>(e3bd3)</samp>](https://github.com/soybeanjs/soybean-admin/commit/e3bd397)
-  - 通过鼠标滚轮按钮点击关闭标签 &nbsp;-&nbsp; 由 **JianJroh** [<samp>(d3849)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d3849ba)
-  - 页面：支持更多的 manage_menu 选项。关闭了 #366 &nbsp;-&nbsp; 由 @honghuangdc 在 https://github.com/soybeanjs/soybean-admin/issues/366 [<samp>(c4b5c)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c4b5c65)
-
-### &nbsp;&nbsp;&nbsp;🐞 错误修复
-
-- **项目**:
-  - 修复菜单 fixedIndexInTab 默认为 null &nbsp;-&nbsp; 由 **paynezhuang** [<samp>(3d10e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3d10ef1)完成
-  - 修复菜单切换器 zIndex &nbsp;-&nbsp; 由 @honghuangdc [<samp>(7bd43)</samp>](https://github.com/soybeanjs/soybean-admin/commit/7bd43df)完成
-
-### &nbsp;&nbsp;&nbsp;💅 重构
-
-- **项目**:
-  - 重构 @sa/color-palette => @sa/color & 性能优化 @sa/utils &nbsp;-&nbsp; 由 @honghuangdc [<samp>(34999)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3499997)完成
-  - menu-operate-drawer => menu-operate-modal &nbsp;-&nbsp; 由 @honghuangdc [<samp>(003e1)</samp>](https://github.com/soybeanjs/soybean-admin/commit/003e145)完成
-
-### &nbsp;&nbsp;&nbsp;🏡 杂务
-
-- **依赖**:
-  - 更新依赖 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(1cb38)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1cb3816)完成
-  - 更新依赖 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(599b4)</samp>](https://github.com/soybeanjs/soybean-admin/commit/599b4e1)完成
-- **项目**:
-  - 合并主分支到 v1.1.0 &nbsp;-&nbsp; 由 @honghuangdc [<samp>(ebe55)</samp>](https://github.com/soybeanjs/soybean-admin/commit/ebe55af)完成
-
-### &nbsp;&nbsp;&nbsp;❤️ 贡献者
-
-[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
-[JianJroh](mailto:rhjian@foxmail.com),&nbsp;[paynezhuang](mailto:paynezhuang@gmail.com),&nbsp;[Azir](mailto:2075125282@qq.com)

README.md

@@ -1,6 +1,6 @@
 <div align="center">
 	<img src="./public/favicon.svg" width="160" />
-	<h1>SoybeanAdmin</h1>
+	<h1>Soybean Admin</h1>
   <span>English | <a href="./README.zh_CN.md">中文</a></span>
 </div>
 
@@ -12,11 +12,11 @@
 [![gitee stars](https://gitee.com/honghuangdc/soybean-admin/badge/star.svg)](https://gitee.com/honghuangdc/soybean-admin)
 
 > [!NOTE]
-> If you think `SoybeanAdmin` is helpful to you, or you like our project, please give us a ⭐️ on GitHub. Your support is the driving force for us to continue to improve and add new features! Thank you for your support!
+> If you think `Soybean Admin` is helpful to you, or you like our project, please give us a ⭐️ on GitHub. Your support is the driving force for us to continue to improve and add new features! Thank you for your support!
 
 ## Introduction
 
-[`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) is a clean, elegant, beautiful 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.
+[`Soybean Admin`](https://github.com/soybeanjs/soybean-admin) is a clean, elegant, beautiful 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. `Soybean Admin` 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.
 
 
 ## Features
@@ -78,8 +78,8 @@
 Make sure your environment meets the following requirements:
 
 - **git**: you need git to clone and manage project versions.
-- **NodeJS**: >=18.12.0, recommended 18.19.0 or higher.
-- **pnpm**: >= 8.7.0, recommended 8.14.0 or higher.
+- **NodeJS**: >=18.0.0, recommended 18.19.0 or higher.
+- **pnpm**: >= 8.0.0, recommended 8.14.0 or higher.
 
 **Clone Project**
 
@@ -106,18 +106,6 @@ pnpm dev
 pnpm build
 ```
 
-## Ecosystem
-
-- [electron-mock-admin](https://github.com/lixin59/electron-mock-api): A Mock Api management system that helps front-end developers quickly implement interface mocks.
-- [T-Shell](https://github.com/TheBlindM/T-Shell): A terminal emulator and SSH client with configurable command prompts.
-- [pea](https://github.com/haitang1894/pea) : Adopting SpringBoot3.2 + JDK21, MyBatis-Plus, SpringSecurity security framework, etc., suitable for the simple permission system developed by [soybean-admin](https://gitee.com/honghuangdc/soybean-admin).
-- [MalusAdmin](https://github.com/pridejoy/MalusAdmin): A backend management framework developed based on Vue3/TypeScript/NaiveUI and NET7 & Sqlsugar. It is implemented in the most original and simplest way, with a fresh and elegant front-end, a clear and elegant backend structure, and powerful functions.
-- [PanisAdmin](https://github.com/paynezhuang/panis-admin): Adopting SpringBoot 3, SaToken, MySQL and other frameworks to develop and modify [soybean-admin](https://github.com/soybeanjs/soybean-admin) for the second time, adapting dynamic menu/button-level authorization. Retaining the original flavor, fresh and elegant, high-value back-end management system scaffold.
-- [snail-job](https://github.com/aizuda/snail-job): A distributed task retry and task scheduling platform with "high performance, high value and high activity".
-- [SuperApi](https://github.com/TmmTop/SuperApi): Quickly turn your idea into an online stable product! Entity-less library and table building, add, delete, change and check entity-less library table, support 15 kinds of condition query, as well as paging, list, unlimited tree list and other functions of the API deployment! With interface documentation, Auth authorisation, interface flow restriction, access to the client's real IP, advanced server caching components, dynamic APIs and other features, we look forward to your experience!
-- [FastSoyAdmin](https://github.com/sleep1223/fast-soy-admin): A modern Management Platform based on FastAPI+Vue3+Naive UI.
-
-
 ## How to Contribute
 
 We warmly welcome and appreciate all forms of contributions. If you have any ideas or suggestions, please feel free to share them by submitting [pull requests](https://github.com/soybeanjs/soybean-admin/pulls) or creating GitHub [issue](https://github.com/soybeanjs/soybean-admin/issues/new).
@@ -148,7 +136,7 @@ Thanks the following people for their contributions. If you want to contribute t
 
 ## Communication
 
-`SoybeanAdmin` is a completely open source and free project, helping developers to develop medium and large-scale management systems more conveniently. It also provides WeChat and QQ communication groups. If you have any questions, please feel free to ask in the group.
+`Soybean Admin` is a completely open source and free project, helping developers to develop medium and large-scale management systems more conveniently. It also provides WeChat and QQ communication groups. If you have any questions, please feel free to ask in the group.
 
   <div>
   	<p>QQ Group</p>

README.zh_CN.md

@@ -1,6 +1,6 @@
 <div align="center">
 	<img src="./public/favicon.svg" width="160" />
-	<h1>SoybeanAdmin</h1>
+	<h1>Soybean Admin</h1>
   <span><a href="./README.zh_CN.md">English</a> | 中文</span>
 </div>
 
@@ -12,11 +12,11 @@
 [![gitee stars](https://gitee.com/honghuangdc/soybean-admin/badge/star.svg)](https://gitee.com/honghuangdc/soybean-admin)
 
 > [!NOTE]
-> 如果您觉得 `SoybeanAdmin`对您有所帮助，或者您喜欢我们的项目，请在 GitHub 上给我们一个 ⭐️。您的支持是我们持续改进和增加新功能的动力！感谢您的支持！
+> 如果您觉得 `Soybean Admin`对您有所帮助，或者您喜欢我们的项目，请在 GitHub 上给我们一个 ⭐️。您的支持是我们持续改进和增加新功能的动力！感谢您的支持！
 
 ## 简介
 
-[`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) 是一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。`SoybeanAdmin` 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。
+[`Soybean Admin`](https://github.com/soybeanjs/soybean-admin) 是一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。`Soybean Admin` 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。
 
 ## 特性
 
@@ -77,8 +77,8 @@
 确保你的环境满足以下要求：
 
 - **git**: 你需要git来克隆和管理项目版本。
-- **NodeJS**: >=18.12.0，推荐 18.19.0 或更高。
-- **pnpm**: >= 8.7.0，推荐 8.14.0 或更高。
+- **NodeJS**: >=18.0.0，推荐 18.19.0 或更高。
+- **pnpm**: >= 8.0.0，推荐 8.14.0 或更高。
 
 **克隆项目**
 
@@ -105,18 +105,6 @@ pnpm dev
 pnpm build
 ```
 
-## 周边生态
-
-- [electron-mock-admin](https://github.com/lixin59/electron-mock-api): 一个 Mock Api 管理系统，帮助前端开发伙伴快速实现接口的 mock。
-- [T-Shell](https://github.com/TheBlindM/T-Shell): 是一个可配置命令提示的终端模拟器和 SSH 客户端。
-- [pea](https://github.com/haitang1894/pea) : 采用SpringBoot3.2 + JDK21、MyBatis-Plus、SpringSecurity安全框架等，适配 [soybean-admin](https://gitee.com/honghuangdc/soybean-admin) 开发的简单权限系统。
-- [MalusAdmin](https://github.com/pridejoy/MalusAdmin): 基于 Vue3/TypeScript/NaiveUI 和 NET7 & Sqlsugar 开发的后台管理框架。采用最原生最简洁的方式来实现, 前端清新优雅高颜值，后端 结构清晰，优雅易懂，功能强大。
-- [PanisAdmin](https://github.com/paynezhuang/panis-admin): 采用SpringBoot3、SaToken、MySQL等框架开发，二次修改 [soybean-admin](https://github.com/soybeanjs/soybean-admin)，适配动态菜单/按钮级别的鉴权，保留原汁原味、清新优雅、高颜值的后台管理系统脚手架。
-- [snail-job](https://github.com/aizuda/snail-job): 一款兼具 “高性能、高颜值、高活跃” 的分布式任务重试和分布式任务调度平台。
-- [SuperApi](https://github.com/TmmTop/SuperApi): 快速将你的 idea 变成线上稳定运行的产品！ 无实体建库建表，对无实体库表进行增删改查，支持 15 种条件查询，以及分页，列表，无限级树形列表 等功能的 API 部署！ 拥有接口文档，Auth 授权，接口限流，获取客户端真实 IP，先进的服务器缓存组件，动态 API 等功能，期待您的体验！
-- [FastSoyAdmin](https://github.com/sleep1223/fast-soy-admin): 基于 FastAPI+Vue3+Naive UI 的现代化轻量管理平台.
-
-
 ## 如何贡献
 
 我们热烈欢迎并感谢所有形式的贡献。如果您有任何想法或建议，欢迎通过提交 [pull requests](https://github.com/soybeanjs/soybean-admin/pulls) 或创建 GitHub [issue](https://github.com/soybeanjs/soybean-admin/issues/new) 来分享。
@@ -138,7 +126,6 @@ pnpm build
 
 [Soybean](https://github.com/honghuangdc)
 
-
 ## 贡献者
 
 感谢以下贡献者的贡献。如果您想为本项目做出贡献，请参考 [如何贡献](#如何贡献)。
@@ -149,7 +136,7 @@ pnpm build
 
 ## 交流
 
-`SoybeanAdmin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供微信和 QQ 交流群，使用问题欢迎在群内提问。
+`Soybean Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供微信和 QQ 交流群，使用问题欢迎在群内提问。
 
   <div>
   	<p>QQ交流群</p>

build/plugins/router.ts

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

eslint.config.js

@@ -7,7 +7,7 @@ export default defineConfig(
       'vue/multi-word-component-names': [
         'warn',
         {
-          ignores: ['index', 'App', '[id]', '[url]']
+          ignores: ['index', 'App', '[id]']
         }
       ],
       'vue/component-name-in-template-casing': [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "soybean-admin",
   "type": "module",
-  "version": "1.1.4",
+  "version": "1.0.6",
   "description": "A fresh and elegant admin template, based on Vue3、Vite3、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite3、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
   "author": {
     "name": "Soybean",
@@ -52,57 +52,56 @@
     "@better-scroll/core": "2.5.1",
     "@iconify/vue": "4.1.2",
     "@sa/axios": "workspace:*",
-    "@sa/color": "workspace:*",
+    "@sa/color-palette": "workspace:*",
     "@sa/hooks": "workspace:*",
     "@sa/materials": "workspace:*",
     "@sa/utils": "workspace:*",
-    "@vueuse/core": "10.10.0",
+    "@vueuse/core": "10.9.0",
     "clipboard": "2.0.11",
-    "dayjs": "1.11.11",
+    "dayjs": "1.11.10",
     "echarts": "5.5.0",
     "lodash-es": "4.17.21",
-    "naive-ui": "2.38.2",
+    "naive-ui": "2.38.1",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
-    "tailwind-merge": "^2.3.0",
-    "vue": "3.4.27",
-    "vue-draggable-plus": "0.5.0",
+    "vue": "3.4.25",
+    "vue-draggable-plus": "0.4.0",
     "vue-i18n": "9.13.1",
     "vue-router": "4.3.2"
   },
   "devDependencies": {
-    "@elegant-router/vue": "0.3.7",
-    "@iconify/json": "2.2.216",
+    "@elegant-router/vue": "0.3.6",
+    "@iconify/json": "2.2.204",
     "@sa/scripts": "workspace:*",
     "@sa/uno-preset": "workspace:*",
-    "@soybeanjs/eslint-config": "1.3.6",
+    "@soybeanjs/eslint-config": "1.3.2",
     "@tauri-apps/cli": "1.5.11",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "20.14.2",
+    "@types/node": "20.12.7",
     "@types/nprogress": "0.2.3",
-    "@unocss/eslint-config": "0.60.4",
-    "@unocss/preset-icons": "0.60.4",
-    "@unocss/preset-uno": "0.60.4",
-    "@unocss/transformer-directives": "0.60.4",
-    "@unocss/transformer-variant-group": "0.60.4",
-    "@unocss/vite": "0.60.4",
-    "@vitejs/plugin-vue": "5.0.5",
-    "@vitejs/plugin-vue-jsx": "4.0.0",
-    "eslint": "9.4.0",
-    "eslint-plugin-vue": "9.26.0",
-    "lint-staged": "15.2.5",
-    "sass": "1.77.4",
+    "@unocss/eslint-config": "0.59.4",
+    "@unocss/preset-icons": "0.59.4",
+    "@unocss/preset-uno": "0.59.4",
+    "@unocss/transformer-directives": "0.59.4",
+    "@unocss/transformer-variant-group": "0.59.4",
+    "@unocss/vite": "0.59.4",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vitejs/plugin-vue-jsx": "3.1.0",
+    "eslint": "9.1.1",
+    "eslint-plugin-vue": "9.25.0",
+    "lint-staged": "15.2.2",
+    "sass": "1.75.0",
     "simple-git-hooks": "2.11.1",
-    "tsx": "4.11.2",
+    "tsx": "4.7.2",
     "typescript": "5.4.5",
-    "unplugin-icons": "0.19.0",
-    "unplugin-vue-components": "0.27.0",
-    "vite": "5.2.12",
+    "unplugin-icons": "0.18.5",
+    "unplugin-vue-components": "0.26.0",
+    "vite": "5.2.10",
     "vite-plugin-progress": "0.0.7",
     "vite-plugin-svg-icons": "2.0.1",
-    "vite-plugin-vue-devtools": "7.2.1",
-    "vue-eslint-parser": "9.4.3",
-    "vue-tsc": "2.0.19"
+    "vite-plugin-vue-devtools": "7.1.2",
+    "vue-eslint-parser": "9.4.2",
+    "vue-tsc": "2.0.14"
   },
   "simple-git-hooks": {
     "commit-msg": "pnpm sa git-commit-verify",

packages/axios/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/axios",
-  "version": "1.1.4",
+  "version": "1.0.6",
   "exports": {
     ".": "./src/index.ts"
   },
@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@sa/utils": "workspace:*",
-    "axios": "1.7.2",
-    "axios-retry": "4.4.0",
+    "axios": "1.6.8",
+    "axios-retry": "4.1.0",
     "qs": "6.12.1"
   },
   "devDependencies": {

packages/color-palette/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@sa/color",
-  "version": "1.1.4",
+  "name": "@sa/color-palette",
+  "version": "1.0.6",
   "exports": {
     ".": "./src/index.ts"
   },
@@ -10,7 +10,6 @@
     }
   },
   "dependencies": {
-    "@sa/utils": "workspace:*",
     "colord": "2.9.3"
   }
 }

packages/color-palette/src/index.ts

@@ -0,0 +1,6 @@
+import { colorPalettes } from './constant';
+import { getColorName, getHex, getHsl, getRgb } from './shared';
+
+export * from './palette';
+export { getColorName, getHex, getHsl, getRgb, colorPalettes };
+export * from './types';

packages/color-palette/src/palette/index.ts

@@ -9,12 +9,12 @@ import type {
 } from '../types';
 
 /**
- * get recommended color palette by provided color
+ * get color palette by provided color and color name
  *
  * @param color the provided color
  */
-export function getRecommendedColorPalette(color: string) {
-  const colorPaletteFamily = getRecommendedColorPaletteFamily(color);
+export function getColorPalette(color: string) {
+  const colorPaletteFamily = getColorPaletteFamily(color);
 
   const colorMap = new Map<ColorPaletteNumber, ColorPalette>();
 
@@ -36,13 +36,13 @@ export function getRecommendedColorPalette(color: string) {
 }
 
 /**
- * get recommended palette color by provided color
+ * get color by number
  *
  * @param color the provided color
  * @param number the color palette number
  */
-export function getRecommendedPaletteColorByNumber(color: string, number: ColorPaletteNumber) {
-  const colorPalette = getRecommendedColorPalette(color);
+export function getColorByPaletteNumber(color: string, number: ColorPaletteNumber) {
+  const colorPalette = getColorPalette(color);
 
   const { hex } = colorPalette.colorMap.get(number)!;
 
@@ -54,7 +54,7 @@ export function getRecommendedPaletteColorByNumber(color: string, number: ColorP
  *
  * @param color the provided color
  */
-export function getRecommendedColorPaletteFamily(color: string) {
+export function getColorPaletteFamily(color: string) {
   if (!isValidColor(color)) {
     throw new Error('Invalid color, please check color value!');
   }

packages/color-palette/src/shared/colord.ts

@@ -0,0 +1,29 @@
+import { colord, extend } from 'colord';
+import type { HslColor } from 'colord';
+import labPlugin from 'colord/plugins/lab';
+
+extend([labPlugin]);
+
+export function isValidColor(color: string) {
+  return colord(color).isValid();
+}
+
+export function getHex(color: string) {
+  return colord(color).toHex();
+}
+
+export function getRgb(color: string) {
+  return colord(color).toRgb();
+}
+
+export function getHsl(color: string) {
+  return colord(color).toHsl();
+}
+
+export function getDeltaE(color1: string, color2: string) {
+  return colord(color1).delta(color2);
+}
+
+export function transformHslToHex(color: HslColor) {
+  return colord(color).toHex();
+}

packages/color-palette/src/types/index.ts

@@ -1,8 +1,4 @@
-/**
- * the color palette number
- *
- * the main color number is 500
- */
+/** the color palette number */
 export type ColorPaletteNumber = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 
 /** the color palette */
@@ -49,10 +45,3 @@ export type ColorPaletteMatch = ColorPaletteFamily & {
   /** the match color of the palette */
   match: ColorPalette;
 };
-
-/**
- * The color index of color palette
- *
- * From left to right, the color is from light to dark, 6 is main color
- */
-export type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;

packages/color/src/index.ts

@@ -1,7 +0,0 @@
-import { colorPalettes } from './constant';
-
-export * from './palette';
-export * from './shared';
-export { colorPalettes };
-
-export * from './types';

packages/color/src/palette/index.ts

@@ -1,45 +0,0 @@
-import type { AnyColor } from 'colord';
-import { getHex } from '../shared';
-import type { ColorPaletteNumber } from '../types';
-import { getRecommendedColorPalette } from './recommend';
-import { getAntDColorPalette } from './antd';
-
-/**
- * get color palette by provided color
- *
- * @param color
- * @param recommended whether to get recommended color palette (the provided color may not be the main color)
- */
-export function getColorPalette(color: AnyColor, recommended = false) {
-  const colorMap = new Map<ColorPaletteNumber, string>();
-
-  if (recommended) {
-    const colorPalette = getRecommendedColorPalette(getHex(color));
-    colorPalette.palettes.forEach(palette => {
-      colorMap.set(palette.number, palette.hex);
-    });
-  } else {
-    const colors = getAntDColorPalette(color);
-
-    const colorNumbers: ColorPaletteNumber[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-
-    colorNumbers.forEach((number, index) => {
-      colorMap.set(number, colors[index]);
-    });
-  }
-
-  return colorMap;
-}
-
-/**
- * get color palette color by number
- *
- * @param color the provided color
- * @param number the color palette number
- * @param recommended whether to get recommended color palette (the provided color may not be the main color)
- */
-export function getPaletteColorByNumber(color: AnyColor, number: ColorPaletteNumber, recommended = false) {
-  const colorMap = getColorPalette(color, recommended);
-
-  return colorMap.get(number as ColorPaletteNumber)!;
-}

packages/color/src/shared/colord.ts

@@ -1,93 +0,0 @@
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-import mixPlugin from 'colord/plugins/mix';
-import labPlugin from 'colord/plugins/lab';
-import type { AnyColor, HslColor, RgbColor } from 'colord';
-
-extend([namesPlugin, mixPlugin, labPlugin]);
-
-export function isValidColor(color: AnyColor) {
-  return colord(color).isValid();
-}
-
-export function getHex(color: AnyColor) {
-  return colord(color).toHex();
-}
-
-export function getRgb(color: AnyColor) {
-  return colord(color).toRgb();
-}
-
-export function getHsl(color: AnyColor) {
-  return colord(color).toHsl();
-}
-
-export function getHsv(color: AnyColor) {
-  return colord(color).toHsv();
-}
-
-export function getDeltaE(color1: AnyColor, color2: AnyColor) {
-  return colord(color1).delta(color2);
-}
-
-export function transformHslToHex(color: HslColor) {
-  return colord(color).toHex();
-}
-
-/**
- * Add color alpha
- *
- * @param color - Color
- * @param alpha - Alpha (0 - 1)
- */
-export function addColorAlpha(color: AnyColor, alpha: number) {
-  return colord(color).alpha(alpha).toHex();
-}
-
-/**
- * Mix color
- *
- * @param firstColor - First color
- * @param secondColor - Second color
- * @param ratio - The ratio of the second color (0 - 1)
- */
-export function mixColor(firstColor: AnyColor, secondColor: AnyColor, ratio: number) {
-  return colord(firstColor).mix(secondColor, ratio).toHex();
-}
-
-/**
- * Transform color with opacity to similar color without opacity
- *
- * @param color - Color
- * @param alpha - Alpha (0 - 1)
- * @param bgColor Background color (usually white or black)
- */
-export function transformColorWithOpacity(color: AnyColor, alpha: number, bgColor = '#ffffff') {
-  const originColor = addColorAlpha(color, alpha);
-  const { r: oR, g: oG, b: oB } = colord(originColor).toRgb();
-
-  const { r: bgR, g: bgG, b: bgB } = colord(bgColor).toRgb();
-
-  function calRgb(or: number, bg: number, al: number) {
-    return bg + (or - bg) * al;
-  }
-
-  const resultRgb: RgbColor = {
-    r: calRgb(oR, bgR, alpha),
-    g: calRgb(oG, bgG, alpha),
-    b: calRgb(oB, bgB, alpha)
-  };
-
-  return colord(resultRgb).toHex();
-}
-
-/**
- * Is white color
- *
- * @param color - Color
- */
-export function isWhiteColor(color: AnyColor) {
-  return colord(color).isEqual('#ffffff');
-}
-
-export { colord };

packages/hooks/package.json

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

packages/materials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/materials",
-  "version": "1.1.4",
+  "version": "1.0.6",
   "exports": {
     ".": "./src/index.ts"
   },
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@sa/utils": "workspace:*",
-    "simplebar-vue": "2.3.4"
+    "simplebar-vue": "2.3.3"
   },
   "devDependencies": {
     "typed-css-modules": "0.9.1"

packages/materials/src/libs/page-tab/button-tab.vue

@@ -36,7 +36,7 @@ defineSlots<Slots>();
 
 <template>
   <div
-    class=":soy: relative inline-flex cursor-pointer items-center justify-center gap-12px whitespace-nowrap border-(1px solid) rounded-4px px-12px py-4px"
+    class=":soy: relative inline-flex cursor-pointer items-center justify-center gap-12px whitespace-nowrap border-1px rounded-4px border-solid px-12px py-4px"
     :class="[
       style['button-tab'],
       { [style['button-tab_dark']]: darkMode },

packages/materials/src/libs/page-tab/index.vue

@@ -53,23 +53,10 @@ const bindProps = computed(() => {
 function handleClose() {
   emit('close');
 }
-
-function handleMouseup(e: MouseEvent) {
-  // close tab by mouse wheel button click
-  if (e.button === 1) {
-    handleClose();
-  }
-}
 </script>
 
 <template>
-  <component
-    :is="activeTabComponent.component"
-    :class="activeTabComponent.class"
-    :style="cssVars"
-    v-bind="bindProps"
-    @mouseup="handleMouseup"
-  >
+  <component :is="activeTabComponent.component" :class="activeTabComponent.class" :style="cssVars" v-bind="bindProps">
     <template #prefix>
       <slot name="prefix"></slot>
     </template>

packages/materials/src/libs/page-tab/shared.ts

@@ -1,4 +1,4 @@
-import { addColorAlpha, transformColorWithOpacity } from '@sa/color';
+import { addColorAlpha, transformColorWithOpacity } from '@sa/utils';
 import type { PageTabCssVars, PageTabCssVarsProps } from '../../types';
 
 /** The active color of the tab */

packages/ofetch/package.json

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

packages/scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/scripts",
-  "version": "1.1.4",
+  "version": "1.0.6",
   "bin": {
     "sa": "./bin.ts"
   },
@@ -13,15 +13,15 @@
     }
   },
   "devDependencies": {
-    "@soybeanjs/changelog": "0.3.24",
-    "bumpp": "9.4.1",
+    "@soybeanjs/changelog": "0.3.22",
+    "bumpp": "9.4.0",
     "c12": "1.10.0",
     "cac": "6.7.14",
     "consola": "3.2.3",
     "enquirer": "2.4.1",
-    "execa": "9.1.0",
+    "execa": "8.0.1",
     "kolorist": "1.8.0",
-    "npm-check-updates": "16.14.20",
-    "rimraf": "5.0.7"
+    "npm-check-updates": "16.14.18",
+    "rimraf": "5.0.5"
   }
 }

packages/scripts/src/config/index.ts

@@ -19,7 +19,6 @@ const defaultOptions: CliOption = {
     ['style', 'Changes that do not affect the meaning of the code'],
     ['refactor', 'A code change that neither fixes a bug nor adds a feature'],
     ['perf', 'A code change that improves performance'],
-    ['optimize', 'A code change that optimizes code quality'],
     ['test', 'Adding missing tests or correcting existing tests'],
     ['build', 'Changes that affect the build system or external dependencies'],
     ['ci', 'Changes to our CI configuration files and scripts'],
@@ -28,7 +27,6 @@ const defaultOptions: CliOption = {
   ],
   gitCommitScopes: [
     ['projects', 'project'],
-    ['packages', 'packages'],
     ['components', 'components'],
     ['hooks', 'hook functions'],
     ['utils', 'utils functions'],

packages/scripts/src/shared/index.ts

@@ -3,5 +3,5 @@ import type { Options } from 'execa';
 export async function execCommand(cmd: string, args: string[], options?: Options) {
   const { execa } = await import('execa');
   const res = await execa(cmd, args, options);
-  return (res?.stdout as string)?.trim() || '';
+  return res?.stdout?.trim() || '';
 }

packages/uno-preset/package.json

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

packages/utils/package.json

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

packages/utils/src/color.ts

@@ -1,6 +1,74 @@
-import type { AnyColor, HsvColor } from 'colord';
-import { getHex, getHsv, isValidColor, mixColor } from '../shared';
-import type { ColorIndex } from '../types';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import mixPlugin from 'colord/plugins/mix';
+import type { AnyColor, HsvColor, RgbColor } from 'colord';
+
+extend([namesPlugin, mixPlugin]);
+
+/**
+ * Add color alpha
+ *
+ * @param color - Color
+ * @param alpha - Alpha (0 - 1)
+ */
+export function addColorAlpha(color: string, alpha: number) {
+  return colord(color).alpha(alpha).toHex();
+}
+
+/**
+ * Mix color
+ *
+ * @param firstColor - First color
+ * @param secondColor - Second color
+ * @param ratio - The ratio of the second color (0 - 1)
+ */
+export function mixColor(firstColor: string, secondColor: string, ratio: number) {
+  return colord(firstColor).mix(secondColor, ratio).toHex();
+}
+
+/**
+ * Transform color with opacity to similar color without opacity
+ *
+ * @param color - Color
+ * @param alpha - Alpha (0 - 1)
+ * @param bgColor Background color (usually white or black)
+ */
+export function transformColorWithOpacity(color: string, alpha: number, bgColor = '#ffffff') {
+  const originColor = addColorAlpha(color, alpha);
+  const { r: oR, g: oG, b: oB } = colord(originColor).toRgb();
+
+  const { r: bgR, g: bgG, b: bgB } = colord(bgColor).toRgb();
+
+  function calRgb(or: number, bg: number, al: number) {
+    return bg + (or - bg) * al;
+  }
+
+  const resultRgb: RgbColor = {
+    r: calRgb(oR, bgR, alpha),
+    g: calRgb(oG, bgG, alpha),
+    b: calRgb(oB, bgB, alpha)
+  };
+
+  return colord(resultRgb).toHex();
+}
+
+/**
+ * Is white color
+ *
+ * @param color - Color
+ */
+export function isWhiteColor(color: string) {
+  return colord(color).isEqual('#ffffff');
+}
+
+/**
+ * Get rgb of color
+ *
+ * @param color Color
+ */
+export function getRgbOfColor(color: string) {
+  return colord(color).toRgb();
+}
 
 /** Hue step */
 const hueStep = 2;
@@ -18,23 +86,32 @@ const lightColorCount = 5;
 const darkColorCount = 4;
 
 /**
- * Get AntD palette color by index
+ * The color index of color palette
+ *
+ * From left to right, the color is from light to dark, 6 is main color
+ */
+type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+
+/**
+ * Get color palette (from left to right, the color is from light to dark, 6 is main color)
  *
  * @param color - Color
  * @param index - The color index of color palette (the main color index is 6)
  * @returns Hex color
  */
-export function getAntDPaletteColorByIndex(color: AnyColor, index: ColorIndex): string {
-  if (!isValidColor(color)) {
+export function getColorPalette(color: AnyColor, index: ColorIndex): string {
+  const transformColor = colord(color);
+
+  if (!transformColor.isValid()) {
     throw new Error('invalid input color value');
   }
 
   if (index === 6) {
-    return getHex(color);
+    return colord(transformColor).toHex();
   }
 
   const isLight = index < 6;
-  const hsv = getHsv(color);
+  const hsv = transformColor.toHsv();
   const i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
 
   const newHsv: HsvColor = {
@@ -43,7 +120,7 @@ export function getAntDPaletteColorByIndex(color: AnyColor, index: ColorIndex):
     v: getValue(hsv, i, isLight)
   };
 
-  return getHex(newHsv);
+  return colord(newHsv).toHex();
 }
 
 /** Map of dark color index and opacity */
@@ -54,33 +131,32 @@ const darkColorMap = [
   { index: 5, opacity: 0.45 },
   { index: 5, opacity: 0.65 },
   { index: 5, opacity: 0.85 },
-  { index: 5, opacity: 0.9 },
-  { index: 4, opacity: 0.93 },
+  { index: 4, opacity: 0.9 },
   { index: 3, opacity: 0.95 },
   { index: 2, opacity: 0.97 },
   { index: 1, opacity: 0.98 }
 ];
 
 /**
- * Get AntD color palette
+ * Get color palettes
  *
  * @param color - Color
  * @param darkTheme - Dark theme
  * @param darkThemeMixColor - Dark theme mix color (default: #141414)
  */
-export function getAntDColorPalette(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] {
-  const indexes: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+export function getColorPalettes(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] {
+  const indexes: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
-  const patterns = indexes.map(index => getAntDPaletteColorByIndex(color, index));
+  const patterns = indexes.map(index => getColorPalette(color, index));
 
   if (darkTheme) {
     const darkPatterns = darkColorMap.map(({ index, opacity }) => {
-      const darkColor = mixColor(darkThemeMixColor, patterns[index], opacity);
+      const darkColor = colord(darkThemeMixColor).mix(patterns[index], opacity);
 
       return darkColor;
     });
 
-    return darkPatterns.map(item => getHex(item));
+    return darkPatterns.map(item => colord(item).toHex());
   }
 
   return patterns;

packages/utils/src/index.ts

@@ -1,3 +1,4 @@
+export * from './color';
 export * from './crypto';
 export * from './storage';
 export * from './nanoid';

packages/utils/src/storage.ts

@@ -3,7 +3,7 @@ import localforage from 'localforage';
 /** The storage type */
 export type StorageType = 'local' | 'session';
 
-export function createStorage<T extends object>(type: StorageType, storagePrefix: string) {
+export function createStorage<T extends object>(type: StorageType) {
   const stg = type === 'session' ? window.sessionStorage : window.localStorage;
 
   const storage = {
@@ -16,7 +16,7 @@ export function createStorage<T extends object>(type: StorageType, storagePrefix
     set<K extends keyof T>(key: K, value: T[K]) {
       const json = JSON.stringify(value);
 
-      stg.setItem(`${storagePrefix}${key as string}`, json);
+      stg.setItem(key as string, json);
     },
     /**
      * Get session
@@ -24,7 +24,7 @@ export function createStorage<T extends object>(type: StorageType, storagePrefix
      * @param key Session key
      */
     get<K extends keyof T>(key: K): T[K] | null {
-      const json = stg.getItem(`${storagePrefix}${key as string}`);
+      const json = stg.getItem(key as string);
       if (json) {
         let storageData: T[K] | null = null;
 
@@ -37,12 +37,12 @@ export function createStorage<T extends object>(type: StorageType, storagePrefix
         }
       }
 
-      stg.removeItem(`${storagePrefix}${key as string}`);
+      stg.removeItem(key as string);
 
       return null;
     },
     remove(key: keyof T) {
-      stg.removeItem(`${storagePrefix}${key as string}`);
+      stg.removeItem(key as string);
     },
     clear() {
       stg.clear();

packages/utils/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "jsx": "preserve",
-    "lib": ["DOM", "ESNext"],
-    "baseUrl": ".",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "types": ["node"],
-    "strict": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}

src/components/advanced/table-column-setting.vue

@@ -21,10 +21,10 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
         {{ $t('common.columnSetting') }}
       </NButton>
     </template>
-    <VueDraggable v-model="columns" :animation="150" filter=".none_draggable">
+    <VueDraggable v-model="columns">
       <div v-for="item in columns" :key="item.key" class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
-        <icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
-        <NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
+        <icon-mdi-drag class="mr-8px cursor-move text-icon" />
+        <NCheckbox v-model:checked="item.checked">
           {{ item.title }}
         </NCheckbox>
       </div>

src/components/common/menu-toggler.vue

@@ -9,13 +9,9 @@ interface Props {
   collapsed?: boolean;
   /** Arrow style icon */
   arrowIcon?: boolean;
-  zIndex?: number;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  arrowIcon: false,
-  zIndex: 98
-});
+const props = defineProps<Props>();
 
 type NumberBool = 0 | 1;
 
@@ -40,11 +36,7 @@ const icon = computed(() => {
 </script>
 
 <template>
-  <ButtonIcon
-    :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')"
-    tooltip-placement="bottom-start"
-    :z-index="zIndex"
-  >
+  <ButtonIcon :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')" tooltip-placement="bottom-start">
     <SvgIcon :icon="icon" />
   </ButtonIcon>
 </template>

src/components/common/pin-toggler.vue

@@ -15,7 +15,7 @@ const icon = computed(() => (props.pin ? 'mdi-pin-off' : 'mdi-pin'));
 
 <template>
   <ButtonIcon
-    :tooltip-content="pin ? $t('icon.unpin') : $t('icon.pin')"
+    :tooltip-content="pin ? $t('icon.pin') : $t('icon.unpin')"
     tooltip-placement="bottom-start"
     :z-index="100"
   >

src/components/custom/button-icon.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { createReusableTemplate } from '@vueuse/core';
 import type { PopoverPlacement } from 'naive-ui';
-import { twMerge } from 'tailwind-merge';
 
 defineOptions({
   name: 'ButtonIcon',
@@ -20,29 +21,60 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  class: '',
+  class: 'h-36px text-icon',
   icon: '',
   tooltipContent: '',
   tooltipPlacement: 'bottom',
   zIndex: 98
 });
 
-const DEFAULT_CLASS = 'h-[36px] text-icon';
+interface ButtonProps {
+  className: string;
+}
+
+const [DefineButton, Button] = createReusableTemplate<ButtonProps>();
+
+const cls = computed(() => {
+  let clsStr = props.class;
+
+  if (!clsStr.includes('h-')) {
+    clsStr += ' h-36px';
+  }
+
+  if (!clsStr.includes('text-')) {
+    clsStr += ' text-icon';
+  }
+
+  return clsStr;
+});
 </script>
 
 <template>
-  <NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
+  <!-- define component start: Button -->
+  <DefineButton v-slot="{ $slots, className }">
+    <NButton quaternary :class="className">
+      <div class="flex-center gap-8px">
+        <component :is="$slots.default" />
+      </div>
+    </NButton>
+  </DefineButton>
+  <!-- define component end: Button -->
+
+  <NTooltip v-if="tooltipContent" :placement="tooltipPlacement" :z-index="zIndex">
     <template #trigger>
-      <NButton quaternary :class="twMerge(DEFAULT_CLASS, props.class)" v-bind="$attrs">
-        <div class="flex-center gap-8px">
-          <slot>
-            <SvgIcon :icon="icon" />
-          </slot>
-        </div>
-      </NButton>
+      <Button :class-name="cls" v-bind="$attrs">
+        <slot>
+          <SvgIcon :icon="icon" />
+        </slot>
+      </Button>
     </template>
     {{ tooltipContent }}
   </NTooltip>
+  <Button v-else :class-name="cls" v-bind="$attrs">
+    <slot>
+      <SvgIcon :icon="icon" />
+    </slot>
+  </Button>
 </template>
 
 <style scoped></style>

src/components/custom/wave-bg.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { getPaletteColorByNumber } from '@sa/color';
+import { getColorPalette } from '@sa/utils';
 
 defineOptions({ name: 'WaveBg' });
 
@@ -11,8 +11,8 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const lightColor = computed(() => getPaletteColorByNumber(props.themeColor, 200));
-const darkColor = computed(() => getPaletteColorByNumber(props.themeColor, 500));
+const lightColor = computed(() => getColorPalette(props.themeColor, 3));
+const darkColor = computed(() => getColorPalette(props.themeColor, 6));
 </script>
 
 <template>

src/hooks/common/echarts.ts

@@ -146,10 +146,6 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
     await onUpdated?.(chart!);
   }
 
-  function setOptions(options: T) {
-    chart?.setOption(options);
-  }
-
   /** render chart */
   async function render() {
     if (!isRendered()) {
@@ -229,7 +225,6 @@ export function useEcharts<T extends ECOption>(optionsFactory: () => T, hooks: C
 
   return {
     domRef,
-    updateOptions,
-    setOptions
+    updateOptions
   };
 }

src/hooks/common/table.ts

@@ -1,7 +1,6 @@
 import { computed, effectScope, onScopeDispose, reactive, ref, watch } from 'vue';
 import type { Ref } from 'vue';
 import type { PaginationProps } from 'naive-ui';
-import { cloneDeep } from 'lodash-es';
 import { useBoolean, useHookTable } from '@sa/hooks';
 import { useAppStore } from '@/store/modules/app';
 import { $t } from '@/locales';
@@ -14,14 +13,10 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
   const scope = effectScope();
   const appStore = useAppStore();
 
-  const isMobile = computed(() => appStore.isMobile);
-
-  const { apiFn, apiParams, immediate, showTotal } = config;
+  const { apiFn, apiParams, immediate } = config;
 
   const SELECTION_KEY = '__selection__';
 
-  const EXPAND_KEY = '__expand__';
-
   const {
     loading,
     empty,
@@ -70,12 +65,6 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
             title: $t('common.check'),
             checked: true
           });
-        } else if (column.type === 'expand') {
-          checks.push({
-            key: EXPAND_KEY,
-            title: $t('common.expandColumn'),
-            checked: true
-          });
         }
       });
 
@@ -89,8 +78,6 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
           columnMap.set(column.key as string, column);
         } else if (column.type === 'selection') {
           columnMap.set(SELECTION_KEY, column);
-        } else if (column.type === 'expand') {
-          columnMap.set(EXPAND_KEY, column);
         }
       });
 
@@ -137,20 +124,14 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
       });
 
       getData();
-    },
-    ...(showTotal
-      ? {
-          prefix: page => $t('datatable.itemCount', { total: page.itemCount })
-        }
-      : {})
+    }
   });
 
   // this is for mobile, if the system does not support mobile, you can use `pagination` directly
   const mobilePagination = computed(() => {
     const p: PaginationProps = {
       ...pagination,
-      pageSlot: isMobile.value ? 3 : 9,
-      prefix: !isMobile.value && showTotal ? pagination.prefix : undefined
+      pageSlot: appStore.isMobile ? 3 : 9
     };
 
     return p;
@@ -205,8 +186,7 @@ export function useTableOperate<T extends TableData = TableData>(data: Ref<T[]>,
 
   function handleEdit(id: T['id']) {
     operateType.value = 'edit';
-    const findItem = data.value.find(item => item.id === id) || null;
-    editingData.value = cloneDeep(findItem);
+    editingData.value = data.value.find(item => item.id === id) || null;
 
     openDrawer();
   }

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

@@ -3,7 +3,6 @@ import { computed } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
-import { useTabStore } from '@/store/modules/tab';
 
 defineOptions({
   name: 'GlobalContent'
@@ -21,7 +20,6 @@ withDefaults(defineProps<Props>(), {
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
-const tabStore = useTabStore();
 
 const transitionName = computed(() => (themeStore.page.animate ? themeStore.page.animateMode : ''));
 </script>
@@ -38,7 +36,7 @@ const transitionName = computed(() => (themeStore.page.animate ? themeStore.page
         <component
           :is="Component"
           v-if="appStore.reloadFlag"
-          :key="tabStore.getTabIdByRoute(route)"
+          :key="route.path"
           :class="{ 'p-16px': showPadding }"
           class="flex-grow bg-layout transition-300"
         />

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

@@ -47,7 +47,7 @@ const headerMenus = computed(() => {
 </script>
 
 <template>
-  <DarkModeContainer class="h-full flex-y-center px-12px shadow-header">
+  <DarkModeContainer class="h-full flex-y-center 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" />
     <div v-else class="h-full flex-y-center flex-1-hidden">

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

@@ -57,7 +57,7 @@ function updateExpandedKeys() {
 }
 
 function handleClickMenu(key: RouteKey) {
-  const query = routeStore.getRouteQueryOfMetaByKey(key);
+  const { query } = routeStore.getSelectedMenuMetaByKey(key) || {};
 
   routerPushByKey(key, { query });
 }

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

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { SimpleScrollbar } from '@sa/materials';
-import { transformColorWithOpacity } from '@sa/color';
+import { transformColorWithOpacity } from '@sa/utils';
 import { useAppStore } from '@/store/modules/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useThemeStore } from '@/store/modules/theme';
@@ -68,7 +68,7 @@ function handleClickMixMenu(menu: App.Global.Menu) {
       <component :is="icon" :class="[isMini ? 'text-icon-small' : 'text-icon-large']" />
       <p
         class="w-full ellipsis-text text-center text-12px transition-height-300"
-        :class="[isMini ? 'h-0 pt-0' : 'h-20px pt-4px']"
+        :class="[isMini ? 'h-0 pt-0' : 'h-24px pt-4px']"
       >
         {{ label }}
       </p>
@@ -92,7 +92,6 @@ function handleClickMixMenu(menu: App.Global.Menu) {
     <MenuToggler
       arrow-icon
       :collapsed="appStore.siderCollapse"
-      :z-index="99"
       :class="{ 'text-white:88 !hover:text-white': inverted }"
       @click="appStore.toggleSiderCollapse"
     />

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

@@ -55,8 +55,8 @@ function handleResetActiveMenu() {
         :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>
+        <header class="flex-y-center justify-between" :style="{ height: themeStore.header.height + 'px' }">
+          <h2 class="pl-8px text-16px text-primary font-bold">{{ $t('system.title') }}</h2>
           <PinToggler
             :pin="appStore.mixSiderFixed"
             :class="{ 'text-white:88 !hover:text-white': siderInverted }"

src/layouts/modules/global-search/components/search-modal.vue

@@ -34,9 +34,9 @@ function search() {
 }
 
 function handleClose() {
+  visible.value = false;
   // handle with setTimeout to prevent user from seeing some operations
   setTimeout(() => {
-    visible.value = false;
     resultOptions.value = [];
     keyword.value = '';
   }, 200);
@@ -73,8 +73,10 @@ function getActivePathIndex() {
 }
 
 /** key enter */
-function handleEnter() {
+function handleEnter(e: Event | undefined) {
   if (resultOptions.value?.length === 0 || activePath.value === '') return;
+
+  e?.preventDefault();
   handleClose();
   router.push(activePath.value);
 }

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

@@ -141,10 +141,6 @@ function init() {
   tabStore.initTabStore(route);
 }
 
-function removeFocus() {
-  (document.activeElement as HTMLElement)?.blur();
-}
-
 // watch
 watch(
   () => route.fullPath,
@@ -166,11 +162,7 @@ init();
 <template>
   <DarkModeContainer class="size-full flex-y-center px-16px shadow-tab">
     <div ref="bsWrapper" class="h-full flex-1-hidden">
-      <BetterScroll
-        ref="bsScroll"
-        :options="{ scrollX: true, scrollY: false, click: appStore.isMobile }"
-        @click="removeFocus"
-      >
+      <BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: appStore.isMobile }">
         <div
           ref="tabRef"
           class="h-full flex pr-18px"

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

@@ -21,10 +21,6 @@ function handleSegmentChange(value: string | number) {
   themeStore.setThemeScheme(value as UnionKey.ThemeScheme);
 }
 
-function handleGrayscaleChange(value: boolean) {
-  themeStore.setGrayscale(value);
-}
-
 const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layout.mode.includes('vertical'));
 </script>
 
@@ -50,9 +46,6 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
         <NSwitch v-model:value="themeStore.sider.inverted" />
       </SettingItem>
     </Transition>
-    <SettingItem :label="$t('theme.grayscale')">
-      <NSwitch :value="themeStore.grayscale" @update:value="handleGrayscaleChange" />
-    </SettingItem>
   </div>
 </template>
 

src/layouts/modules/theme-drawer/modules/theme-color.vue

@@ -36,27 +36,6 @@ const swatches: string[] = [
 <template>
   <NDivider>{{ $t('theme.themeColor.title') }}</NDivider>
   <div class="flex-col-stretch gap-12px">
-    <NTooltip placement="top-start">
-      <template #trigger>
-        <SettingItem key="recommend-color" :label="$t('theme.recommendColor')">
-          <NSwitch v-model:value="themeStore.recommendColor" />
-        </SettingItem>
-      </template>
-      <p>
-        <span class="pr-12px">{{ $t('theme.recommendColorDesc') }}</span>
-        <br />
-        <NButton
-          text
-          tag="a"
-          href="https://uicolors.app/create"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-gray"
-        >
-          https://uicolors.app/create
-        </NButton>
-      </p>
-    </NTooltip>
     <SettingItem v-for="(_, key) in themeStore.themeColors" :key="key" :label="$t(`theme.themeColor.${key}`)">
       <template v-if="key === 'info'" #suffix>
         <NCheckbox v-model:checked="themeStore.isInfoFollowPrimary">

src/locales/langs/en-us.ts

@@ -11,7 +11,6 @@ const local: App.I18n.Schema = {
     cancel: 'Cancel',
     close: 'Close',
     check: 'Check',
-    expandColumn: 'Expand Column',
     columnSetting: 'Column Setting',
     config: 'Config',
     confirm: 'Confirm',
@@ -58,7 +57,6 @@ const local: App.I18n.Schema = {
       dark: 'Dark',
       auto: 'Follow System'
     },
-    grayscale: 'Grayscale',
     layoutMode: {
       title: 'Layout Mode',
       vertical: 'Vertical Menu Mode',
@@ -66,8 +64,6 @@ const local: App.I18n.Schema = {
       'vertical-mix': 'Vertical Mix Menu Mode',
       'horizontal-mix': 'Horizontal Mix menu Mode'
     },
-    recommendColor: 'Apply Recommended Color Algorithm',
-    recommendColorDesc: 'The recommended color algorithm refers to',
     themeColor: {
       title: 'Theme Color',
       primary: 'Primary',
@@ -141,16 +137,7 @@ const local: App.I18n.Schema = {
     403: 'No Permission',
     404: 'Page Not Found',
     500: 'Server Error',
-    'iframe-page': 'Iframe',
     home: 'Home',
-    document: 'Document',
-    document_project: 'Project Document',
-    'document_project-link': 'Project Document(External Link)',
-    document_vue: 'Vue Document',
-    document_vite: 'Vite Document',
-    document_unocss: 'UnoCSS Document',
-    document_naive: 'Naive UI Document',
-    document_antd: 'Ant Design Vue Document',
     'user-center': 'User Center',
     about: 'About',
     function: 'System Function',
@@ -228,7 +215,7 @@ const local: App.I18n.Schema = {
     },
     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.`,
+      introduction: `Soybean Admin 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. Soybean Admin 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',
@@ -297,12 +284,6 @@ const local: App.I18n.Schema = {
         superAdminVisible: 'Super Admin Visible',
         adminVisible: 'Admin Visible',
         adminOrUserVisible: 'Admin and User Visible'
-      },
-      request: {
-        repeatedErrorOccurOnce: 'Repeated Request Error Occurs Once',
-        repeatedError: 'Repeated Request Error',
-        repeatedErrorMsg1: 'Custom Request Error 1',
-        repeatedErrorMsg2: 'Custom Request Error 2'
       }
     },
     manage: {
@@ -363,7 +344,7 @@ const local: App.I18n.Schema = {
         menuName: 'Menu Name',
         routeName: 'Route Name',
         routePath: 'Route Path',
-        pathParam: 'Path Param',
+        routeParams: 'Route Params',
         layout: 'Layout Component',
         page: 'Page Component',
         i18nKey: 'I18n Key',
@@ -371,14 +352,12 @@ const local: App.I18n.Schema = {
         localIcon: 'Local Icon',
         iconTypeTitle: 'Icon Type',
         order: 'Order',
-        constant: 'Constant',
         keepAlive: 'Keep Alive',
         href: 'Href',
         hideInMenu: 'Hide In Menu',
         activeMenu: 'Active Menu',
         multiTab: 'Multi Tab',
         fixedIndexInTab: 'Fixed Index In Tab',
-        query: 'Query Params',
         button: 'Button',
         buttonCode: 'Button Code',
         buttonDesc: 'Button Desc',
@@ -389,7 +368,6 @@ const local: App.I18n.Schema = {
           menuName: 'Please enter menu name',
           routeName: 'Please enter route name',
           routePath: 'Please enter route path',
-          pathParam: 'Please enter path param',
           page: 'Please select page component',
           layout: 'Please select layout component',
           i18nKey: 'Please enter i18n key',
@@ -399,12 +377,10 @@ const local: App.I18n.Schema = {
           keepAlive: 'Please select whether to cache route',
           href: 'Please enter href',
           hideInMenu: 'Please select whether to hide menu',
-          activeMenu: 'Please select route name of the highlighted menu',
+          activeMenu: 'Please enter the route name of the highlighted menu',
           multiTab: 'Please select whether to support multiple tabs',
           fixedInTab: 'Please select whether to fix in the tab',
           fixedIndexInTab: 'Please enter the index fixed in the tab',
-          queryKey: 'Please enter route parameter Key',
-          queryValue: 'Please enter route parameter Value',
           button: 'Please select whether it is a button',
           buttonCode: 'Please enter button code',
           buttonDesc: 'Please enter button description',
@@ -469,9 +445,6 @@ const local: App.I18n.Schema = {
     expand: 'Expand Menu',
     pin: 'Pin',
     unpin: 'Unpin'
-  },
-  datatable: {
-    itemCount: 'Total {total} items'
   }
 };
 

src/locales/langs/zh-cn.ts

@@ -11,7 +11,6 @@ const local: App.I18n.Schema = {
     cancel: '取消',
     close: '关闭',
     check: '勾选',
-    expandColumn: '展开列',
     columnSetting: '列设置',
     config: '配置',
     confirm: '确认',
@@ -58,7 +57,6 @@ const local: App.I18n.Schema = {
       dark: '暗黑模式',
       auto: '跟随系统'
     },
-    grayscale: '灰度模式',
     layoutMode: {
       title: '布局模式',
       vertical: '左侧菜单模式',
@@ -66,8 +64,6 @@ const local: App.I18n.Schema = {
       horizontal: '顶部菜单模式',
       'horizontal-mix': '顶部菜单混合模式'
     },
-    recommendColor: '应用推荐算法的颜色',
-    recommendColorDesc: '推荐颜色的算法参照',
     themeColor: {
       title: '主题颜色',
       primary: '主色',
@@ -141,16 +137,7 @@ const local: App.I18n.Schema = {
     403: '无权限',
     404: '页面不存在',
     500: '服务器错误',
-    'iframe-page': '外链页面',
     home: '首页',
-    document: '文档',
-    document_project: '项目文档',
-    'document_project-link': '项目文档(外链)',
-    document_vue: 'Vue文档',
-    document_vite: 'Vite文档',
-    document_unocss: 'UnoCSS文档',
-    document_naive: 'Naive UI文档',
-    document_antd: 'Ant Design Vue文档',
     'user-center': '个人中心',
     about: '关于',
     function: '系统功能',
@@ -228,7 +215,7 @@ const local: App.I18n.Schema = {
     },
     about: {
       title: '关于',
-      introduction: `SoybeanAdmin 是一个优雅且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。SoybeanAdmin 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。`,
+      introduction: `Soybean Admin 是一个优雅且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。Soybean Admin 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。`,
       projectInfo: {
         title: '项目信息',
         version: '版本',
@@ -297,12 +284,6 @@ const local: App.I18n.Schema = {
         superAdminVisible: '超级管理员可见',
         adminVisible: '管理员可见',
         adminOrUserVisible: '管理员和用户可见'
-      },
-      request: {
-        repeatedErrorOccurOnce: '重复请求错误只出现一次',
-        repeatedError: '重复请求错误',
-        repeatedErrorMsg1: '自定义请求错误 1',
-        repeatedErrorMsg2: '自定义请求错误 2'
       }
     },
     manage: {
@@ -363,7 +344,7 @@ const local: App.I18n.Schema = {
         menuName: '菜单名称',
         routeName: '路由名称',
         routePath: '路由路径',
-        pathParam: '路径参数',
+        routeParams: '路由参数',
         layout: '布局',
         page: '页面组件',
         i18nKey: '国际化key',
@@ -371,14 +352,12 @@ const local: App.I18n.Schema = {
         localIcon: '本地图标',
         iconTypeTitle: '图标类型',
         order: '排序',
-        constant: '常量路由',
         keepAlive: '缓存路由',
         href: '外链',
         hideInMenu: '隐藏菜单',
         activeMenu: '高亮的菜单',
         multiTab: '支持多页签',
         fixedIndexInTab: '固定在页签中的序号',
-        query: '路由参数',
         button: '按钮',
         buttonCode: '按钮编码',
         buttonDesc: '按钮描述',
@@ -389,7 +368,6 @@ const local: App.I18n.Schema = {
           menuName: '请输入菜单名称',
           routeName: '请输入路由名称',
           routePath: '请输入路由路径',
-          pathParam: '请输入路径参数',
           page: '请选择页面组件',
           layout: '请选择布局组件',
           i18nKey: '请输入国际化key',
@@ -399,12 +377,10 @@ const local: App.I18n.Schema = {
           keepAlive: '请选择是否缓存路由',
           href: '请输入外链',
           hideInMenu: '请选择是否隐藏菜单',
-          activeMenu: '请选择高亮的菜单的路由名称',
+          activeMenu: '请输入高亮的菜单的路由名称',
           multiTab: '请选择是否支持多标签',
           fixedInTab: '请选择是否固定在页签中',
           fixedIndexInTab: '请输入固定在页签中的序号',
-          queryKey: '请输入路由参数Key',
-          queryValue: '请输入路由参数Value',
           button: '请选择是否按钮',
           buttonCode: '请输入按钮编码',
           buttonDesc: '请输入按钮描述',
@@ -469,9 +445,6 @@ const local: App.I18n.Schema = {
     expand: '展开菜单',
     pin: '固定',
     unpin: '取消固定'
-  },
-  datatable: {
-    itemCount: '共 {total} 条'
   }
 };
 

src/plugins/loading.ts

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

src/router/elegant/imports.ts

@@ -18,7 +18,6 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   403: () => import("@/views/_builtin/403/index.vue"),
   404: () => import("@/views/_builtin/404/index.vue"),
   500: () => import("@/views/_builtin/500/index.vue"),
-  "iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
   login: () => import("@/views/_builtin/login/index.vue"),
   about: () => import("@/views/about/index.vue"),
   "function_hide-child_one": () => import("@/views/function/hide-child/one/index.vue"),

src/router/elegant/routes.ts

@@ -179,19 +179,6 @@ export const generatedRoutes: GeneratedRoute[] = [
       order: 1
     }
   },
-  {
-    name: 'iframe-page',
-    path: '/iframe-page/:url',
-    component: 'layout.base$view.iframe-page',
-    props: true,
-    meta: {
-      title: 'iframe-page',
-      i18nKey: 'route.iframe-page',
-      constant: true,
-      hideInMenu: true,
-      keepAlive: true
-    }
-  },
   {
     name: 'login',
     path: '/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?',

src/router/elegant/transform.ts

@@ -42,13 +42,7 @@ function transformElegantRouteToVueRoute(
   }
 
   function getLayoutName(component: string) {
-    const layout = component.replace(LAYOUT_PREFIX, '');
-
-    if(!layouts[layout]) {
-      throw new Error(`Layout component "${layout}" not found`);
-    }
-
-    return layout;
+    return component.replace(LAYOUT_PREFIX, '');
   }
 
   function isView(component: string) {
@@ -56,13 +50,7 @@ function transformElegantRouteToVueRoute(
   }
 
   function getViewName(component: string) {
-    const view = component.replace(VIEW_PREFIX, '');
-
-    if(!views[view]) {
-      throw new Error(`View component "${view}" not found`);
-    }
-
-    return view;
+    return component.replace(VIEW_PREFIX, '');
   }
 
   function isFirstLevelRoute(item: ElegantConstRoute) {
@@ -93,45 +81,39 @@ function transformElegantRouteToVueRoute(
 
   const vueRoute = { name, path, ...rest } as RouteRecordRaw;
 
-  try {
-    if (component) {
-      if (isSingleLevelRoute(route)) {
-        const { layout, view } = getSingleLevelRouteComponent(component);
-  
-        const singleLevelRoute: RouteRecordRaw = {
-          path,
-          component: layouts[layout],
-          children: [
-            {
-              name,
-              path: '',
-              component: views[view],
-              ...rest
-            } 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 [];
-  }
+  if (component) {
+    if (isSingleLevelRoute(route)) {
+      const { layout, view } = getSingleLevelRouteComponent(component);
 
+      const singleLevelRoute: RouteRecordRaw = {
+        path,
+        component: layouts[layout],
+        children: [
+          {
+            name,
+            path: '',
+            component: views[view],
+            ...rest
+          } 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];
+    }
+
+  }
   
   // add redirect to child
   if (children?.length && !vueRoute.redirect) {
@@ -165,14 +147,6 @@ const routeMap: RouteMap = {
   "exception_403": "/exception/403",
   "exception_404": "/exception/404",
   "exception_500": "/exception/500",
-  "document": "/document",
-  "document_project": "/document/project",
-  "document_project-link": "/document/project-link",
-  "document_vue": "/document/vue",
-  "document_vite": "/document/vite",
-  "document_unocss": "/document/unocss",
-  "document_naive": "/document/naive",
-  "document_antd": "/document/antd",
   "403": "/403",
   "404": "/404",
   "500": "/500",
@@ -188,7 +162,6 @@ const routeMap: RouteMap = {
   "function_tab": "/function/tab",
   "function_toggle-auth": "/function/toggle-auth",
   "home": "/home",
-  "iframe-page": "/iframe-page/:url",
   "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
   "manage": "/manage",
   "manage_menu": "/manage/menu",

src/router/guard/route.ts

@@ -46,7 +46,7 @@ export function createRouteGuard(router: Router) {
           next({ name: rootRoute });
         }
       },
-      // if it is constant route, then it is allowed to access directly
+      // if is is constant route, then it is allowed to access directly
       {
         condition: !needLogin,
         callback: () => {

src/router/routes/index.ts

@@ -51,115 +51,6 @@ const customRoutes: CustomRoute[] = [
         }
       }
     ]
-  },
-  {
-    name: 'document',
-    path: '/document',
-    component: 'layout.base',
-    meta: {
-      title: 'document',
-      i18nKey: 'route.document',
-      order: 2,
-      icon: 'mdi:file-document-multiple-outline'
-    },
-    children: [
-      {
-        name: 'document_antd',
-        path: '/document/antd',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://antdv.com/components/overview-cn'
-        },
-        meta: {
-          title: 'document_antd',
-          i18nKey: 'route.document_antd',
-          order: 7,
-          icon: 'logos:ant-design'
-        }
-      },
-      {
-        name: 'document_naive',
-        path: '/document/naive',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://www.naiveui.com/zh-CN/os-theme/docs/introduction'
-        },
-        meta: {
-          title: 'document_naive',
-          i18nKey: 'route.document_naive',
-          order: 6,
-          icon: 'logos:naiveui'
-        }
-      },
-      {
-        name: 'document_project',
-        path: '/document/project',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://docs.soybeanjs.cn/zh'
-        },
-        meta: {
-          title: 'document_project',
-          i18nKey: 'route.document_project',
-          order: 1,
-          localIcon: 'logo'
-        }
-      },
-      {
-        name: 'document_project-link',
-        path: '/document/project-link',
-        component: 'view.iframe-page',
-        meta: {
-          title: 'document_project-link',
-          i18nKey: 'route.document_project-link',
-          order: 2,
-          localIcon: 'logo',
-          href: 'https://docs.soybeanjs.cn/zh'
-        }
-      },
-      {
-        name: 'document_unocss',
-        path: '/document/unocss',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://unocss.dev/'
-        },
-        meta: {
-          title: 'document_unocss',
-          i18nKey: 'route.document_unocss',
-          order: 5,
-          icon: 'logos:unocss'
-        }
-      },
-      {
-        name: 'document_vite',
-        path: '/document/vite',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://cn.vitejs.dev/'
-        },
-        meta: {
-          title: 'document_vite',
-          i18nKey: 'route.document_vite',
-          order: 4,
-          icon: 'logos:vitejs'
-        }
-      },
-      {
-        name: 'document_vue',
-        path: '/document/vue',
-        component: 'view.iframe-page',
-        props: {
-          url: 'https://cn.vuejs.org/'
-        },
-        meta: {
-          title: 'document_vue',
-          i18nKey: 'route.document_vue',
-          order: 3,
-          icon: 'logos:vue'
-        }
-      }
-    ]
   }
 ];
 

src/service/api/system-manage.ts

@@ -30,6 +30,18 @@ export function fetchGetUserList(params?: Api.SystemManage.UserSearchParams) {
   });
 }
 
+/**
+ * get menu list
+ *
+ * @deprecated this will removed in next version 1.1.0
+ */
+export function fetchGetMenuListV1() {
+  return request<Api.SystemManage.Menu[]>({
+    url: '/systemManage/getMenuList',
+    method: 'get'
+  });
+}
+
 /** get menu list */
 export function fetchGetMenuList() {
   return request<Api.SystemManage.MenuList>({

src/service/request/index.ts

@@ -1,16 +1,20 @@
 import type { AxiosResponse } from 'axios';
 import { BACKEND_ERROR_CODE, createFlatRequest, createRequest } from '@sa/axios';
 import { useAuthStore } from '@/store/modules/auth';
-import { $t } from '@/locales';
 import { localStg } from '@/utils/storage';
 import { getServiceBaseURL } from '@/utils/service';
-import { handleRefreshToken, showErrorMsg } from './shared';
-import type { RequestInstanceState } from './type';
+import { $t } from '@/locales';
+import { handleRefreshToken } from './shared';
 
 const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
 const { baseURL, otherBaseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);
 
-export const request = createFlatRequest<App.Service.Response, RequestInstanceState>(
+interface InstanceState {
+  /** whether the request is refreshing token */
+  isRefreshingToken: boolean;
+}
+
+export const request = createFlatRequest<App.Service.Response, InstanceState>(
   {
     baseURL,
     headers: {
@@ -31,7 +35,7 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
     isBackendSuccess(response) {
       // when the backend response code is "0000"(default), it means the request is success
       // to change this logic by yourself, you can modify the `VITE_SERVICE_SUCCESS_CODE` in `.env` file
-      return String(response.data.code) === import.meta.env.VITE_SERVICE_SUCCESS_CODE;
+      return response.data.code === import.meta.env.VITE_SERVICE_SUCCESS_CODE;
     },
     async onBackendFail(response, instance) {
       const authStore = useAuthStore();
@@ -43,8 +47,6 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
       function logoutAndCleanup() {
         handleLogout();
         window.removeEventListener('beforeunload', handleLogout);
-
-        request.state.errMsgStack = request.state.errMsgStack.filter(msg => msg !== response.data.msg);
       }
 
       // when the backend response code is in `logoutCodes`, it means the user will be logged out and redirected to login page
@@ -56,9 +58,7 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
 
       // when the backend response code is in `modalLogoutCodes`, it means the user will be logged out by displaying a modal
       const modalLogoutCodes = import.meta.env.VITE_SERVICE_MODAL_LOGOUT_CODES?.split(',') || [];
-      if (modalLogoutCodes.includes(response.data.code) && !request.state.errMsgStack?.includes(response.data.msg)) {
-        request.state.errMsgStack = [...(request.state.errMsgStack || []), response.data.msg];
-
+      if (modalLogoutCodes.includes(response.data.code)) {
         // prevent the user from refreshing the page
         window.addEventListener('beforeunload', handleLogout);
 
@@ -67,7 +67,6 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
           content: response.data.msg,
           positiveText: $t('common.confirm'),
           maskClosable: false,
-          closeOnEsc: false,
           onPositiveClick() {
             logoutAndCleanup();
           },
@@ -123,7 +122,7 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
         return;
       }
 
-      showErrorMsg(request.state, message);
+      window.$message?.error?.(message);
     }
   }
 );

src/service/request/shared.ts

@@ -2,7 +2,6 @@ import type { AxiosRequestConfig } from 'axios';
 import { useAuthStore } from '@/store/modules/auth';
 import { localStg } from '@/utils/storage';
 import { fetchRefreshToken } from '../api';
-import type { RequestInstanceState } from './type';
 
 /**
  * refresh token
@@ -30,25 +29,3 @@ export async function handleRefreshToken(axiosConfig: AxiosRequestConfig) {
 
   return null;
 }
-
-export function showErrorMsg(state: RequestInstanceState, message: string) {
-  if (!state.errMsgStack?.length) {
-    state.errMsgStack = [];
-  }
-
-  const isExist = state.errMsgStack.includes(message);
-
-  if (!isExist) {
-    state.errMsgStack.push(message);
-
-    window.$message?.error(message, {
-      onLeave: () => {
-        state.errMsgStack = state.errMsgStack.filter(msg => msg !== message);
-
-        setTimeout(() => {
-          state.errMsgStack = [];
-        }, 5000);
-      }
-    });
-  }
-}

src/service/request/type.ts

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

src/store/modules/app/index.ts

@@ -1,4 +1,4 @@
-import { effectScope, nextTick, onScopeDispose, ref, watch } from 'vue';
+import { effectScope, onScopeDispose, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { breakpointsTailwind, useBreakpoints, useEventListener, useTitle } from '@vueuse/core';
 import { useBoolean } from '@sa/hooks';
@@ -87,26 +87,9 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
       isMobile,
       newValue => {
         if (newValue) {
-          // backup theme setting before is mobile
-          localStg.set('backupThemeSettingBeforeIsMobile', {
-            layout: themeStore.layout.mode,
-            siderCollapse: siderCollapse.value
-          });
+          setSiderCollapse(true);
 
           themeStore.setThemeLayout('vertical');
-          setSiderCollapse(true);
-        } else {
-          // when is not mobile, recover the backup theme setting
-          const backup = localStg.get('backupThemeSettingBeforeIsMobile');
-
-          if (backup) {
-            nextTick(() => {
-              themeStore.setThemeLayout(backup.layout);
-              setSiderCollapse(backup.siderCollapse);
-
-              localStg.remove('backupThemeSettingBeforeIsMobile');
-            });
-          }
         }
       },
       { immediate: true }
@@ -123,7 +106,7 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
       // update tabs by locale
       tabStore.updateTabsByLocale();
 
-      // set dayjs locale
+      // sey dayjs locale
       setDayjsLocale(locale.value);
     });
   });

src/store/modules/route/index.ts

@@ -56,7 +56,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   const constantRoutes = shallowRef<ElegantConstRoute[]>([]);
 
   function addConstantRoutes(routes: ElegantConstRoute[]) {
-    const constantRoutesMap = new Map<string, ElegantConstRoute>([]);
+    const constantRoutesMap = new Map(constantRoutes.value.map(route => [route.name, route]));
 
     routes.forEach(route => {
       constantRoutesMap.set(route.name, route);
@@ -69,7 +69,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   const authRoutes = shallowRef<ElegantConstRoute[]>([]);
 
   function addAuthRoutes(routes: ElegantConstRoute[]) {
-    const authRoutesMap = new Map<string, ElegantConstRoute>([]);
+    const authRoutesMap = new Map(authRoutes.value.map(route => [route.name, route]));
 
     routes.forEach(route => {
       authRoutesMap.set(route.name, route);
@@ -97,19 +97,13 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   /** Cache routes */
   const cacheRoutes = ref<RouteKey[]>([]);
 
-  /** All cache routes */
-  const allCacheRoutes = shallowRef<RouteKey[]>([]);
-
   /**
    * Get cache routes
    *
    * @param routes Vue routes
    */
   function getCacheRoutes(routes: RouteRecordRaw[]) {
-    const alls = getCacheRouteNames(routes);
-
-    cacheRoutes.value = alls;
-    allCacheRoutes.value = [...alls];
+    cacheRoutes.value = getCacheRouteNames(routes);
   }
 
   /**
@@ -136,23 +130,12 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     cacheRoutes.value.splice(index, 1);
   }
 
-  /**
-   * Is cached route
-   *
-   * @param routeKey
-   */
-  function isCachedRoute(routeKey: RouteKey) {
-    return allCacheRoutes.value.includes(routeKey);
-  }
-
   /**
    * Re cache routes by route key
    *
    * @param routeKey
    */
   async function reCacheRoutesByKey(routeKey: RouteKey) {
-    if (!isCachedRoute(routeKey)) return;
-
     removeCacheRoutes(routeKey);
 
     await appStore.reloadPage();
@@ -196,18 +179,15 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   async function initConstantRoute() {
     if (isInitConstantRoute.value) return;
 
-    const staticRoute = createStaticRoutes();
-
     if (authRouteMode.value === 'static') {
+      const staticRoute = createStaticRoutes();
+
       addConstantRoutes(staticRoute.constantRoutes);
     } else {
       const { data, error } = await fetchGetConstantRoutes();
 
       if (!error) {
         addConstantRoutes(data);
-      } else {
-        // if fetch constant routes failed, use static constant routes
-        addConstantRoutes(staticRoute.constantRoutes);
       }
     }
 
@@ -260,9 +240,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
       handleUpdateRootRouteRedirect(home);
 
       setIsInitAuthRoute(true);
-    } else {
-      // if fetch user routes failed, reset store
-      authStore.resetStore();
     }
   }
 
@@ -355,31 +332,15 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   }
 
   /**
-   * Get route meta by key
+   * Get selected menu meta by key
    *
-   * @param key Route key
+   * @param selectedKey Selected menu key
    */
-  function getRouteMetaByKey(key: string) {
+  function getSelectedMenuMetaByKey(selectedKey: string) {
+    // The routes in router.options.routes are static, you need to use router.getRoutes() to get all the routes.
     const allRoutes = router.getRoutes();
 
-    return allRoutes.find(route => route.name === key)?.meta || null;
-  }
-
-  /**
-   * Get route query of meta by key
-   *
-   * @param key
-   */
-  function getRouteQueryOfMetaByKey(key: string) {
-    const meta = getRouteMetaByKey(key);
-
-    const query: Record<string, string> = {};
-
-    meta?.query?.forEach(item => {
-      query[item.key] = item.value;
-    });
-
-    return query;
+    return allRoutes.find(route => route.name === selectedKey)?.meta || null;
   }
 
   return {
@@ -399,6 +360,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     setIsInitAuthRoute,
     getIsAuthRouteExist,
     getSelectedMenuKeyPath,
-    getRouteQueryOfMetaByKey
+    getSelectedMenuMetaByKey
   };
 });

src/store/modules/tab/index.ts

@@ -1,8 +1,8 @@
 import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useEventListener } from '@vueuse/core';
 import type { RouteKey } from '@elegant-router/types';
-import { router } from '@/router';
 import { SetupStoreId } from '@/enum';
 import { useRouterPush } from '@/hooks/common/router';
 import { localStg } from '@/utils/storage';
@@ -17,13 +17,13 @@ import {
   getDefaultHomeTab,
   getFixedTabIds,
   getTabByRoute,
-  getTabIdByRoute,
   isTabInTabs,
   updateTabByI18nKey,
   updateTabsByI18nKey
 } from './shared';
 
 export const useTabStore = defineStore(SetupStoreId.Tab, () => {
+  const router = useRouter();
   const routeStore = useRouteStore();
   const themeStore = useThemeStore();
   const { routerPush } = useRouterPush(false);
@@ -289,7 +289,6 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
     setTabLabel,
     resetTabLabel,
     isTabRetain,
-    updateTabsByLocale,
-    getTabIdByRoute
+    updateTabsByLocale
   };
 });

src/store/modules/tab/shared.ts

@@ -16,24 +16,17 @@ export function getAllTabs(tabs: App.Global.Tab[], homeTab?: App.Global.Tab) {
 
   const filterHomeTabs = tabs.filter(tab => tab.id !== homeTab.id);
 
-  const fixedTabs = filterHomeTabs.filter(isFixedTab).sort((a, b) => a.fixedIndex! - b.fixedIndex!);
+  const fixedTabs = filterHomeTabs
+    .filter(tab => tab.fixedIndex !== undefined)
+    .sort((a, b) => a.fixedIndex! - b.fixedIndex!);
 
-  const remainTabs = filterHomeTabs.filter(tab => !isFixedTab(tab));
+  const remainTabs = filterHomeTabs.filter(tab => tab.fixedIndex === undefined);
 
   const allTabs = [homeTab, ...fixedTabs, ...remainTabs];
 
   return updateTabsLabel(allTabs);
 }
 
-/**
- * Is fixed tab
- *
- * @param tab
- */
-function isFixedTab(tab: App.Global.Tab) {
-  return tab.fixedIndex !== undefined && tab.fixedIndex !== null;
-}
-
 /**
  * Get tab id by route
  *
@@ -184,7 +177,7 @@ export function extractTabsByAllRoutes(router: Router, tabs: App.Global.Tab[]) {
  * @param tabs
  */
 export function getFixedTabs(tabs: App.Global.Tab[]) {
-  return tabs.filter(isFixedTab);
+  return tabs.filter(tab => tab.fixedIndex !== undefined);
 }
 
 /**

src/store/modules/theme/index.ts

@@ -2,17 +2,10 @@ import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
 import type { Ref } from 'vue';
 import { defineStore } from 'pinia';
 import { useEventListener, usePreferredColorScheme } from '@vueuse/core';
-import { getPaletteColorByNumber } from '@sa/color';
+import { getColorPalette } from '@sa/color-palette';
 import { SetupStoreId } from '@/enum';
 import { localStg } from '@/utils/storage';
-import {
-  addThemeVarsToHtml,
-  createThemeToken,
-  getNaiveTheme,
-  initThemeSettings,
-  toggleCssDarkMode,
-  toggleGrayscaleMode
-} from './shared';
+import { addThemeVarsToHtml, createThemeToken, getNaiveTheme, initThemeSettings, toggleCssDarkMode } from './shared';
 
 /** Theme store */
 export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
@@ -30,9 +23,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     return settings.value.themeScheme === 'dark';
   });
 
-  /** grayscale mode */
-  const grayscaleMode = computed(() => settings.value.grayscale);
-
   /** Theme colors */
   const themeColors = computed(() => {
     const { themeColor, otherColor, isInfoFollowPrimary } = settings.value;
@@ -45,7 +35,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   });
 
   /** Naive theme */
-  const naiveTheme = computed(() => getNaiveTheme(themeColors.value, settings.value.recommendColor));
+  const naiveTheme = computed(() => getNaiveTheme(themeColors.value));
 
   /**
    * Settings json
@@ -70,15 +60,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     settings.value.themeScheme = themeScheme;
   }
 
-  /**
-   * Set grayscale value
-   *
-   * @param isGrayscale
-   */
-  function setGrayscale(isGrayscale: boolean) {
-    settings.value.grayscale = isGrayscale;
-  }
-
   /** Toggle theme scheme */
   function toggleThemeScheme() {
     const themeSchemes: UnionKey.ThemeScheme[] = ['light', 'dark', 'auto'];
@@ -99,18 +80,13 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    * @param color Theme color
    */
   function updateThemeColors(key: App.Theme.ThemeColorKey, color: string) {
-    let colorValue = color;
-
-    if (settings.value.recommendColor) {
-      // get a color palette by provided color and color name, and use the suitable color
-
-      colorValue = getPaletteColorByNumber(color, 500, true);
-    }
+    // get a color palette by provided color and color name, and use the suitable color
+    const { main } = getColorPalette(color);
 
     if (key === 'primary') {
-      settings.value.themeColor = colorValue;
+      settings.value.themeColor = main.hex;
     } else {
-      settings.value.otherColor[key] = colorValue;
+      settings.value.otherColor[key] = main.hex;
     }
   }
 
@@ -125,7 +101,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
 
   /** Setup theme vars to html */
   function setupThemeVarsToHtml() {
-    const { themeTokens, darkThemeTokens } = createThemeToken(themeColors.value, settings.value.recommendColor);
+    const { themeTokens, darkThemeTokens } = createThemeToken(themeColors.value);
     addThemeVarsToHtml(themeTokens, darkThemeTokens);
   }
 
@@ -154,19 +130,12 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
       { immediate: true }
     );
 
-    watch(
-      grayscaleMode,
-      val => {
-        toggleGrayscaleMode(val);
-      },
-      { immediate: true }
-    );
-
     // themeColors change, update css vars and storage theme color
     watch(
       themeColors,
       val => {
         setupThemeVarsToHtml();
+
         localStg.set('themeColor', val.primary);
       },
       { immediate: true }
@@ -184,7 +153,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     themeColors,
     naiveTheme,
     settingsJson,
-    setGrayscale,
     resetStore,
     setThemeScheme,
     toggleThemeScheme,

src/store/modules/theme/shared.ts

@@ -1,8 +1,8 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
-import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
+import { getColorByPaletteNumber, getColorPalette } from '@sa/color-palette';
+import { addColorAlpha, getRgbOfColor } from '@sa/utils';
 import { overrideThemeSettings, themeSettings } from '@/theme/settings';
 import { themeVars } from '@/theme/vars';
-import { toggleHtmlClass } from '@/utils/common';
 import { localStg } from '@/utils/storage';
 
 const DARK_CLASS = 'dark';
@@ -33,10 +33,9 @@ export function initThemeSettings() {
  * Create theme token
  *
  * @param colors Theme colors
- * @param [recommended=false] Use recommended color. Default is `false`
  */
-export function createThemeToken(colors: App.Theme.ThemeColor, recommended = false) {
-  const paletteColors = createThemePaletteColors(colors, recommended);
+export function createThemeToken(colors: App.Theme.ThemeColor) {
+  const paletteColors = createThemePaletteColors(colors);
 
   const themeTokens: App.Theme.ThemeToken = {
     colors: {
@@ -76,19 +75,18 @@ export function createThemeToken(colors: App.Theme.ThemeColor, recommended = fal
  * Create theme palette colors
  *
  * @param colors Theme colors
- * @param [recommended=false] Use recommended color. Default is `false`
  */
-function createThemePaletteColors(colors: App.Theme.ThemeColor, recommended = false) {
+function createThemePaletteColors(colors: App.Theme.ThemeColor) {
   const colorKeys = Object.keys(colors) as App.Theme.ThemeColorKey[];
   const colorPaletteVar = {} as App.Theme.ThemePaletteColor;
 
   colorKeys.forEach(key => {
-    const colorMap = getColorPalette(colors[key], recommended);
+    const { palettes, main } = getColorPalette(colors[key]);
 
-    colorPaletteVar[key] = colorMap.get(500)!;
+    colorPaletteVar[key] = main.hex;
 
-    colorMap.forEach((hex, number) => {
-      colorPaletteVar[`${key}-${number}`] = hex;
+    palettes.forEach(item => {
+      colorPaletteVar[`${key}-${item.number}`] = item.hex;
     });
   });
 
@@ -118,7 +116,7 @@ function getCssVarByTokens(tokens: App.Theme.BaseToken) {
 
       if (key === 'colors') {
         cssVarsKey = removeRgbPrefix(cssVarsKey);
-        const { r, g, b } = getRgb(cssValue);
+        const { r, g, b } = getRgbOfColor(cssValue);
         cssValue = `${r} ${g} ${b}`;
       }
 
@@ -169,29 +167,18 @@ export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.
  * @param darkMode Is dark mode
  */
 export function toggleCssDarkMode(darkMode = false) {
-  const { add, remove } = toggleHtmlClass(DARK_CLASS);
+  function addDarkClass() {
+    document.documentElement.classList.add(DARK_CLASS);
+  }
+
+  function removeDarkClass() {
+    document.documentElement.classList.remove(DARK_CLASS);
+  }
 
   if (darkMode) {
-    add();
+    addDarkClass();
   } else {
-    remove();
-  }
-}
-
-/**
- * Toggle grayscale mode
- *
- * @param grayscaleMode Is grayscale mode
- */
-export function toggleGrayscaleMode(grayscaleMode = false) {
-  const GRAYSCALE_CLASS = 'grayscale';
-
-  const { add, remove } = toggleHtmlClass(GRAYSCALE_CLASS);
-
-  if (grayscaleMode) {
-    add();
-  } else {
-    remove();
+    removeDarkClass();
   }
 }
 
@@ -207,14 +194,13 @@ interface NaiveColorAction {
  * Get naive theme colors
  *
  * @param colors Theme colors
- * @param [recommended=false] Use recommended color. Default is `false`
  */
-function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false) {
+function getNaiveThemeColors(colors: App.Theme.ThemeColor) {
   const colorActions: NaiveColorAction[] = [
     { scene: '', handler: color => color },
     { scene: 'Suppl', handler: color => color },
-    { scene: 'Hover', handler: color => getPaletteColorByNumber(color, 500, recommended) },
-    { scene: 'Pressed', handler: color => getPaletteColorByNumber(color, 700, recommended) },
+    { scene: 'Hover', handler: color => getColorByPaletteNumber(color, 500) },
+    { scene: 'Pressed', handler: color => getColorByPaletteNumber(color, 700) },
     { scene: 'Active', handler: color => addColorAlpha(color, 0.1) }
   ];
 
@@ -237,14 +223,13 @@ function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false)
  * Get naive theme
  *
  * @param colors Theme colors
- * @param [recommended=false] Use recommended color. Default is `false`
  */
-export function getNaiveTheme(colors: App.Theme.ThemeColor, recommended = false) {
+export function getNaiveTheme(colors: App.Theme.ThemeColor) {
   const { primary: colorLoading } = colors;
 
   const theme: GlobalThemeOverrides = {
     common: {
-      ...getNaiveThemeColors(colors, recommended),
+      ...getNaiveThemeColors(colors),
       borderRadius: '6px'
     },
     LoadingBar: {

src/styles/css/global.css

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

src/theme/settings.ts

@@ -1,8 +1,6 @@
 /** Default theme settings */
 export const themeSettings: App.Theme.ThemeSetting = {
   themeScheme: 'light',
-  grayscale: false,
-  recommendColor: false,
   themeColor: '#646cff',
   otherColor: {
     info: '#2080f0',

src/typings/api.d.ts

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

src/typings/app.d.ts

@@ -2,7 +2,7 @@
 declare namespace App {
   /** Theme namespace */
   namespace Theme {
-    type ColorPaletteNumber = import('@sa/color').ColorPaletteNumber;
+    type ColorPaletteNumber = import('@sa/color-palette').ColorPaletteNumber;
 
     /** Theme token */
     type ThemeToken = {
@@ -18,10 +18,6 @@ declare namespace App {
     interface ThemeSetting {
       /** Theme scheme */
       themeScheme: UnionKey.ThemeScheme;
-      /** grayscale mode */
-      grayscale: boolean;
-      /** Whether to recommend color */
-      recommendColor: boolean;
       /** Theme color */
       themeColor: string;
       /** Other color */
@@ -158,7 +154,7 @@ declare namespace App {
       /** The menu label */
       label: string;
       /** The menu i18n key */
-      i18nKey?: I18n.I18nKey | null;
+      i18nKey?: I18n.I18nKey;
       /** The route key */
       routeKey: RouteKey;
       /** The route path */
@@ -202,7 +198,7 @@ declare namespace App {
       /** The tab route full path */
       fullPath: string;
       /** The tab fixed index */
-      fixedIndex?: number | null;
+      fixedIndex?: number;
       /**
        * Tab icon
        *
@@ -216,7 +212,7 @@ declare namespace App {
        */
       localIcon?: string;
       /** I18n key */
-      i18nKey?: I18n.I18nKey | null;
+      i18nKey?: I18n.I18nKey;
     };
 
     /** Form rule */
@@ -261,7 +257,6 @@ declare namespace App {
         cancel: string;
         close: string;
         check: string;
-        expandColumn: string;
         columnSetting: string;
         config: string;
         confirm: string;
@@ -303,10 +298,7 @@ declare namespace App {
       };
       theme: {
         themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
-        grayscale: string;
         layoutMode: { title: string } & Record<UnionKey.ThemeLayoutMode, string>;
-        recommendColor: string;
-        recommendColorDesc: string;
         themeColor: {
           title: string;
           followPrimary: string;
@@ -473,12 +465,6 @@ declare namespace App {
             adminVisible: string;
             adminOrUserVisible: string;
           };
-          request: {
-            repeatedErrorOccurOnce: string;
-            repeatedError: string;
-            repeatedErrorMsg1: string;
-            repeatedErrorMsg2: string;
-          };
         };
         manage: {
           common: {
@@ -538,7 +524,7 @@ declare namespace App {
             menuName: string;
             routeName: string;
             routePath: string;
-            pathParam: string;
+            routeParams: string;
             layout: string;
             page: string;
             i18nKey: string;
@@ -546,14 +532,12 @@ declare namespace App {
             localIcon: string;
             iconTypeTitle: string;
             order: string;
-            constant: string;
             keepAlive: string;
             href: string;
             hideInMenu: string;
             activeMenu: string;
             multiTab: string;
             fixedIndexInTab: string;
-            query: string;
             button: string;
             buttonCode: string;
             buttonDesc: string;
@@ -564,7 +548,6 @@ declare namespace App {
               menuName: string;
               routeName: string;
               routePath: string;
-              pathParam: string;
               layout: string;
               page: string;
               i18nKey: string;
@@ -578,8 +561,6 @@ declare namespace App {
               multiTab: string;
               fixedInTab: string;
               fixedIndexInTab: string;
-              queryKey: string;
-              queryValue: string;
               button: string;
               buttonCode: string;
               buttonDesc: string;
@@ -621,9 +602,6 @@ declare namespace App {
         pin: string;
         unpin: string;
       };
-      datatable: {
-        itemCount: string;
-      };
     };
 
     type GetI18nKey<T extends Record<string, unknown>, K extends keyof T = keyof T> = K extends string

src/typings/components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
+/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     AppProvider: typeof import('./../components/common/app-provider.vue')['default']
@@ -19,11 +19,9 @@ declare module 'vue' {
     IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
-    'IconIc:roundPlus': typeof import('~icons/ic/round-plus')['default']
     IconIcRoundDelete: typeof import('~icons/ic/round-delete')['default']
     IconIcRoundPlus: typeof import('~icons/ic/round-plus')['default']
     IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
-    IconIcRoundRemove: typeof import('~icons/ic/round-remove')['default']
     IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
     IconLocalBanner: typeof import('~icons/local/banner')['default']
     IconLocalLogo: typeof import('~icons/local/logo')['default']
@@ -51,7 +49,6 @@ declare module 'vue' {
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
-    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']

src/typings/elegant-router.d.ts

@@ -21,14 +21,6 @@ declare module "@elegant-router/types" {
     "exception_403": "/exception/403";
     "exception_404": "/exception/404";
     "exception_500": "/exception/500";
-    "document": "/document";
-    "document_project": "/document/project";
-    "document_project-link": "/document/project-link";
-    "document_vue": "/document/vue";
-    "document_vite": "/document/vite";
-    "document_unocss": "/document/unocss";
-    "document_naive": "/document/naive";
-    "document_antd": "/document/antd";
     "403": "/403";
     "404": "/404";
     "500": "/500";
@@ -44,7 +36,6 @@ declare module "@elegant-router/types" {
     "function_tab": "/function/tab";
     "function_toggle-auth": "/function/toggle-auth";
     "home": "/home";
-    "iframe-page": "/iframe-page/:url";
     "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
     "manage": "/manage";
     "manage_menu": "/manage/menu";
@@ -81,14 +72,6 @@ declare module "@elegant-router/types" {
     | "exception_403"
     | "exception_404"
     | "exception_500"
-    | "document"
-    | "document_project"
-    | "document_project-link"
-    | "document_vue"
-    | "document_vite"
-    | "document_unocss"
-    | "document_naive"
-    | "document_antd"
   >;
 
   /**
@@ -107,7 +90,6 @@ declare module "@elegant-router/types" {
     | "about"
     | "function"
     | "home"
-    | "iframe-page"
     | "login"
     | "manage"
     | "multi-menu"
@@ -122,7 +104,6 @@ declare module "@elegant-router/types" {
     | "root"
     | "not-found"
     | "exception"
-    | "document"
   >;
 
   /**
@@ -133,7 +114,6 @@ declare module "@elegant-router/types" {
     | "403"
     | "404"
     | "500"
-    | "iframe-page"
     | "login"
     | "about"
     | "function_hide-child_one"
@@ -164,13 +144,6 @@ declare module "@elegant-router/types" {
     | "exception_403"
     | "exception_404"
     | "exception_500"
-    | "document_project"
-    | "document_project-link"
-    | "document_vue"
-    | "document_vite"
-    | "document_unocss"
-    | "document_naive"
-    | "document_antd"
   >;
 
   /**

src/typings/env.d.ts

@@ -101,7 +101,5 @@ declare namespace Env {
      * @link https://docs.iconify.design/api/providers.html
      */
     readonly VITE_ICONIFY_URL?: string;
-    /** Used to differentiate storage across different domains */
-    readonly VITE_STORAGE_PREFIX?: string;
   }
 }

src/typings/naive-ui.d.ts

@@ -43,12 +43,5 @@ declare namespace NaiveUI {
   type NaiveTableConfig<A extends TableApiFn> = Pick<
     import('@sa/hooks').TableConfig<A, GetTableData<A>, TableColumn<TableDataWithIndex<GetTableData<A>>>>,
     'apiFn' | 'apiParams' | 'columns' | 'immediate'
-  > & {
-    /**
-     * whether to display the total items count
-     *
-     * @default false
-     */
-    showTotal?: boolean;
-  };
+  >;
 }

src/typings/router.d.ts

@@ -13,23 +13,21 @@ declare module 'vue-router' {
      *
      * It's used in i18n, if it is set, the title will be ignored
      */
-    i18nKey?: App.I18n.I18nKey | null;
+    i18nKey?: App.I18n.I18nKey;
     /**
      * Roles of the route
      *
      * Route can be accessed if the current user has at least one of the roles
-     *
-     * It only works when the route mode is "static", if the route mode is "dynamic", it will be ignored
      */
     roles?: string[];
     /** Whether to cache the route */
-    keepAlive?: boolean | null;
+    keepAlive?: boolean;
     /**
      * Is constant route
      *
-     * when it is set to true, there will be no login verification and no permission verification to access the route
+     * Does not need to login, and the route is defined in the front-end
      */
-    constant?: boolean | null;
+    constant?: boolean;
     /**
      * Iconify icon
      *
@@ -43,11 +41,11 @@ declare module 'vue-router' {
      */
     localIcon?: string;
     /** Router order */
-    order?: number | null;
+    order?: number;
     /** The outer link of the route */
-    href?: string | null;
+    href?: string;
     /** Whether to hide the route in the menu */
-    hideInMenu?: boolean | null;
+    hideInMenu?: boolean;
     /**
      * The menu key will be activated when entering the route
      *
@@ -56,15 +54,12 @@ declare module 'vue-router' {
      * @example
      *   the route is "user_detail", if it is set to "user_list", the menu "user_list" will be activated
      */
-    activeMenu?: import('@elegant-router/types').RouteKey | null;
-    /**
-     * By default, the same route path will use one tab, even with different query, if set true, the route with
-     * different query will use different tabs
-     */
-    multiTab?: boolean | null;
+    activeMenu?: import('@elegant-router/types').RouteKey;
+    /** By default, the same route path will use one tab, if set to true, it will use multiple tabs */
+    multiTab?: boolean;
     /** If set, the route will be fixed in tabs, and the value is the order of fixed tabs */
-    fixedIndexInTab?: number | null;
+    fixedIndexInTab?: number;
     /** if set query parameters, it will be automatically carried when entering the route */
-    query?: { key: string; value: string }[] | null;
+    query?: Record<string, string>;
   }
 }

src/typings/storage.d.ts

@@ -32,10 +32,5 @@ declare namespace StorageType {
     overrideThemeFlag: string;
     /** The global tabs */
     globalTabs: App.Global.Tab[];
-    /** The backup theme setting before is mobile */
-    backupThemeSettingBeforeIsMobile: {
-      layout: UnionKey.ThemeLayoutMode;
-      siderCollapse: boolean;
-    };
   }
 }

src/utils/common.ts

@@ -36,23 +36,3 @@ export function translateOptions(options: CommonType.Option<string>[]) {
     label: $t(option.label as App.I18n.I18nKey)
   }));
 }
-
-/**
- * Toggle html class
- *
- * @param className
- */
-export function toggleHtmlClass(className: string) {
-  function add() {
-    document.documentElement.classList.add(className);
-  }
-
-  function remove() {
-    document.documentElement.classList.remove(className);
-  }
-
-  return {
-    add,
-    remove
-  };
-}

src/utils/storage.ts

@@ -1,9 +1,7 @@
 import { createLocalforage, createStorage } from '@sa/utils';
 
-const storagePrefix = import.meta.env.VITE_STORAGE_PREFIX || '';
+export const localStg = createStorage<StorageType.Local>('local');
 
-export const localStg = createStorage<StorageType.Local>('local', storagePrefix);
-
-export const sessionStg = createStorage<StorageType.Session>('session', storagePrefix);
+export const sessionStg = createStorage<StorageType.Session>('session');
 
 export const localforage = createLocalforage<StorageType.Local>('local');

src/views/_builtin/iframe-page/[url].vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { onActivated, onMounted } from 'vue';
-
-interface Props {
-  url: string;
-}
-
-defineProps<Props>();
-
-onMounted(() => {
-  console.log('mounted');
-});
-
-onActivated(() => {
-  console.log('activated');
-});
-</script>
-
-<template>
-  <div class="h-full">
-    <iframe id="iframePage" class="size-full" :src="url"></iframe>
-  </div>
-</template>
-
-<style scoped></style>

src/views/_builtin/login/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { getPaletteColorByNumber, mixColor } from '@sa/color';
+import { getColorPalette, mixColor } from '@sa/utils';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
@@ -38,7 +38,7 @@ const moduleMap: Record<UnionKey.LoginModule, LoginModule> = {
 const activeModule = computed(() => moduleMap[props.module || 'pwd-login']);
 
 const bgThemeColor = computed(() =>
-  themeStore.darkMode ? getPaletteColorByNumber(themeStore.themeColor, 600) : themeStore.themeColor
+  themeStore.darkMode ? getColorPalette(themeStore.themeColor, 7) : themeStore.themeColor
 );
 
 const bgColor = computed(() => {

src/views/function/request/index.vue

@@ -13,25 +13,6 @@ async function logoutWithModal() {
 async function refreshToken() {
   await fetchCustomBackendError('9999', $t('request.tokenExpired'));
 }
-
-async function handleRepeatedMessageError() {
-  await Promise.all([
-    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
-    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
-    fetchCustomBackendError('2222', $t('page.function.request.repeatedErrorMsg1')),
-    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
-    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2')),
-    fetchCustomBackendError('3333', $t('page.function.request.repeatedErrorMsg2'))
-  ]);
-}
-
-async function handleRepeatedModalError() {
-  await Promise.all([
-    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
-    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg')),
-    fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'))
-  ]);
-}
 </script>
 
 <template>
@@ -45,18 +26,6 @@ async function handleRepeatedModalError() {
     <NCard :title="$t('request.refreshToken')" :bordered="false" size="small" segmented class="card-wrapper">
       <NButton @click="refreshToken">{{ $t('common.trigger') }}</NButton>
     </NCard>
-    <NCard
-      :title="$t('page.function.request.repeatedErrorOccurOnce')"
-      :bordered="false"
-      size="small"
-      segmented
-      class="card-wrapper"
-    >
-      <NButton @click="handleRepeatedMessageError">{{ $t('page.function.request.repeatedError') }}(Message)</NButton>
-      <NButton class="ml-12px" @click="handleRepeatedModalError">
-        {{ $t('page.function.request.repeatedError') }}(Modal)
-      </NButton>
-    </NCard>
   </NSpace>
 </template>
 

src/views/manage/menu/index.vue

@@ -10,11 +10,11 @@ import { $t } from '@/locales';
 import { yesOrNoRecord } from '@/constants/common';
 import { enableStatusRecord, menuTypeRecord } from '@/constants/business';
 import SvgIcon from '@/components/custom/svg-icon.vue';
-import MenuOperateModal, { type OperateType } from './modules/menu-operate-modal.vue';
+import MenuOperateDrawer, { type OperateType } from './modules/menu-operate-drawer.vue';
 
 const appStore = useAppStore();
 
-const { bool: visible, setTrue: openModal } = useBoolean();
+const { bool: drawerVisible, setTrue: openDrawer, setFalse: _closeDrawer } = useBoolean();
 
 const wrapperRef = ref<HTMLElement | null>(null);
 
@@ -176,7 +176,7 @@ const operateType = ref<OperateType>('add');
 
 function handleAdd() {
   operateType.value = 'add';
-  openModal();
+  openDrawer();
 }
 
 async function handleBatchDelete() {
@@ -200,7 +200,7 @@ function handleEdit(item: Api.SystemManage.Menu) {
   operateType.value = 'edit';
   editingData.value = { ...item };
 
-  openModal();
+  openDrawer();
 }
 
 function handleAddChildMenu(item: Api.SystemManage.Menu) {
@@ -208,7 +208,7 @@ function handleAddChildMenu(item: Api.SystemManage.Menu) {
 
   editingData.value = { ...item };
 
-  openModal();
+  openDrawer();
 }
 
 const allPages = ref<string[]>([]);
@@ -252,8 +252,8 @@ init();
         :pagination="pagination"
         class="sm:h-full"
       />
-      <MenuOperateModal
-        v-model:visible="visible"
+      <MenuOperateDrawer
+        v-model:visible="drawerVisible"
         :operate-type="operateType"
         :row-data="editingData"
         :all-pages="allPages"

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

@@ -0,0 +1,258 @@
+<script setup lang="tsx">
+import { computed, reactive, watch } from 'vue';
+import type { SelectOption } from 'naive-ui';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+import { getLocalIcons } from '@/utils/icon';
+import { getLayoutAndPage, transformLayoutAndPageToComponent } from './shared';
+
+defineOptions({
+  name: 'MenuOperateDrawer'
+});
+
+export type OperateType = NaiveUI.TableOperateType | 'addChild';
+
+interface Props {
+  /** the type of operation */
+  operateType: OperateType;
+  /** the edit menu data or the parent menu data when adding a child menu */
+  rowData?: Api.SystemManage.Menu | null;
+  /** all pages */
+  allPages: string[];
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<OperateType, string> = {
+    add: $t('page.manage.menu.addMenu'),
+    addChild: $t('page.manage.menu.addChildMenu'),
+    edit: $t('page.manage.menu.editMenu')
+  };
+  return titles[props.operateType];
+});
+
+type Model = Pick<
+  Api.SystemManage.Menu,
+  | 'menuType'
+  | 'menuName'
+  | 'icon'
+  | 'iconType'
+  | 'routeName'
+  | 'routePath'
+  | 'component'
+  | 'status'
+  | 'hideInMenu'
+  | 'order'
+  | 'parentId'
+> & {
+  layout: string;
+  page: string;
+};
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    menuType: '1',
+    menuName: '',
+    icon: '',
+    iconType: '1',
+    routeName: '',
+    routePath: '',
+    layout: '',
+    page: '',
+    status: null,
+    hideInMenu: false,
+    order: 0,
+    parentId: 0
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'menuName' | 'status' | 'routeName' | 'routePath'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  menuName: defaultRequiredRule,
+  status: defaultRequiredRule,
+  routeName: defaultRequiredRule,
+  routePath: defaultRequiredRule
+};
+
+const disabledMenuType = computed(() => props.operateType === 'edit');
+
+const localIcons = getLocalIcons();
+const localIconOptions = localIcons.map<SelectOption>(item => ({
+  label: () => (
+    <div class="flex-y-center gap-16px">
+      <SvgIcon localIcon={item} class="text-icon" />
+      <span>{item}</span>
+    </div>
+  ),
+  value: item
+}));
+
+const showLayout = computed(() => model.parentId === 0);
+
+const showPage = computed(() => model.menuType === '2');
+
+const pageOptions = computed(() => {
+  const allPages = [...props.allPages];
+
+  if (model.routeName && !allPages.includes(model.routeName)) {
+    allPages.unshift(model.routeName);
+  }
+
+  const opts: CommonType.Option[] = allPages.map(page => ({
+    label: page,
+    value: page
+  }));
+
+  return opts;
+});
+
+const layoutOptions: CommonType.Option[] = [
+  {
+    label: 'base',
+    value: 'base'
+  },
+  {
+    label: 'blank',
+    value: 'blank'
+  }
+];
+
+function handleUpdateModel() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+
+    return;
+  }
+
+  if (props.operateType === 'addChild' && props.rowData) {
+    const { id } = props.rowData;
+
+    Object.assign(model, createDefaultModel(), { parentId: id });
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    const { component, ...rest } = props.rowData;
+
+    const { layout, page } = getLayoutAndPage(component);
+
+    Object.assign(model, rest, { layout, page });
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+
+  model.component = transformLayoutAndPageToComponent(model.layout, model.page);
+
+  // request
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModel();
+    restoreValidation();
+  }
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" display-directive="show" :width="360">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="80">
+        <NFormItem :label="$t('page.manage.menu.menuType')" path="menuType">
+          <NRadioGroup v-model:value="model.menuType" :disabled="disabledMenuType">
+            <NRadio v-for="item in menuTypeOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.menuName')" path="menuName">
+          <NInput v-model:value="model.menuName" :placeholder="$t('page.manage.menu.form.menuName')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.iconTypeTitle')" path="iconType">
+          <NRadioGroup v-model:value="model.iconType">
+            <NRadio v-for="item in menuIconTypeOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.icon')" path="icon">
+          <template v-if="model.iconType === '1'">
+            <NInput v-model:value="model.icon" :placeholder="$t('page.manage.menu.form.icon')" class="flex-1">
+              <template #suffix>
+                <SvgIcon v-if="model.icon" :icon="model.icon" class="text-icon" />
+              </template>
+            </NInput>
+          </template>
+          <template v-if="model.iconType === '2'">
+            <NSelect
+              v-model:value="model.icon"
+              :placeholder="$t('page.manage.menu.form.localIcon')"
+              :options="localIconOptions"
+            />
+          </template>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.routeName')" path="routeName">
+          <NInput v-model:value="model.routeName" :placeholder="$t('page.manage.menu.form.routeName')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.routePath')" path="routePath">
+          <NInput v-model:value="model.routePath" :placeholder="$t('page.manage.menu.form.routePath')" />
+        </NFormItem>
+        <NFormItem v-if="showLayout" :label="$t('page.manage.menu.layout')" path="layout">
+          <NSelect
+            v-model:value="model.layout"
+            :options="layoutOptions"
+            :placeholder="$t('page.manage.menu.form.layout')"
+          />
+        </NFormItem>
+        <NFormItem v-if="showPage" :label="$t('page.manage.menu.page')" path="page">
+          <NSelect v-model:value="model.page" :options="pageOptions" :placeholder="$t('page.manage.menu.form.page')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.menuStatus')" path="status">
+          <NRadioGroup v-model:value="model.status">
+            <NRadio v-for="item in enableStatusOptions" :key="item.value" :value="item.value" :label="$t(item.label)" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.hideInMenu')" path="hideInMenu">
+          <NRadioGroup v-model:value="model.hideInMenu">
+            <NRadio value :label="$t('common.yesOrNo.yes')" />
+            <NRadio :value="false" :label="$t('common.yesOrNo.no')" />
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.menu.order')" path="order">
+          <NInputNumber v-model:value="model.order" :placeholder="$t('page.manage.menu.form.order')" />
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>

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

@@ -40,40 +40,3 @@ export function transformLayoutAndPageToComponent(layout: string, page: string)
 
   return '';
 }
-
-/**
- * Get route name by route path
- *
- * @param routeName
- */
-export function getRoutePathByRouteName(routeName: string) {
-  return `/${routeName.replace(/_/g, '/')}`;
-}
-
-/**
- * Get path param from route path
- *
- * @param routePath route path
- */
-export function getPathParamFromRoutePath(routePath: string) {
-  const [path, param = ''] = routePath.split('/:');
-
-  return {
-    path,
-    param
-  };
-}
-
-/**
- * Get route path with param
- *
- * @param routePath route path
- * @param param path param
- */
-export function getRoutePathWithParam(routePath: string, param: string) {
-  if (param.trim()) {
-    return `${routePath}/:${param}`;
-  }
-
-  return routePath;
-}

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

@@ -68,8 +68,11 @@ const roleId = computed(() => props.rowData?.id || -1);
 
 const isEdit = computed(() => props.operateType === 'edit');
 
-function handleInitModel() {
-  Object.assign(model, createDefaultModel());
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+    return;
+  }
 
   if (props.operateType === 'edit' && props.rowData) {
     Object.assign(model, props.rowData);
@@ -90,7 +93,7 @@ async function handleSubmit() {
 
 watch(visible, () => {
   if (visible.value) {
-    handleInitModel();
+    handleUpdateModelWhenEdit();
     restoreValidation();
   }
 });

src/views/manage/user/index.vue

@@ -12,7 +12,6 @@ const appStore = useAppStore();
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetUserList,
-  showTotal: true,
   apiParams: {
     current: 1,
     size: 10,

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

@@ -89,8 +89,11 @@ async function getRoleOptions() {
   }
 }
 
-function handleInitModel() {
-  Object.assign(model, createDefaultModel());
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+    return;
+  }
 
   if (props.operateType === 'edit' && props.rowData) {
     Object.assign(model, props.rowData);
@@ -111,7 +114,7 @@ async function handleSubmit() {
 
 watch(visible, () => {
   if (visible.value) {
-    handleInitModel();
+    handleUpdateModelWhenEdit();
     restoreValidation();
     getRoleOptions();
   }