chore(projects): release v1.0.4

fix(styles): fix css var is inserted repeatedly

CHANGELOG.md

@@ -1,7 +1,99 @@
 # Changelog
 
 
-## [v1.0.1](https://github.com/soybeanjs/soybean-admin/compare/tauri-v1.0.0...v1.0.1) (24-04-03)
+## [v1.0.4](https://github.com/soybeanjs/soybean-admin/compare/v1.0.3...v1.0.4) (2024-04-24)
+
+###    🐞 Bug Fixes
+
+- **projects**:
+  - fix CHANGELOG versions &nbsp;-&nbsp; by @honghuangdc [<samp>(d9af5)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d9af5aa)
+  - fix disabled page animate &nbsp;-&nbsp; by @honghuangdc [<samp>(23f28)</samp>](https://github.com/soybeanjs/soybean-admin/commit/23f283a)
+  - fix routes data when role is change. fixed #391 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/391 [<samp>(cb83d)</samp>](https://github.com/soybeanjs/soybean-admin/commit/cb83d6d)
+  - fix tabs data when role is change. fixed #392 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/392 [<samp>(04aa0)</samp>](https://github.com/soybeanjs/soybean-admin/commit/04aa097)
+  - recovery pnpm-lock.yaml &nbsp;-&nbsp; by @honghuangdc [<samp>(c6952)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c695208)
+
+### &nbsp;&nbsp;&nbsp;💅 Refactors
+
+- **hooks**: refactor @sa/color-palette &nbsp;-&nbsp; by @honghuangdc [<samp>(93191)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9319173)
+
+### &nbsp;&nbsp;&nbsp;📖 Documentation
+
+- **projects**:
+  - update README.md &nbsp;-&nbsp; by @honghuangdc [<samp>(5a523)</samp>](https://github.com/soybeanjs/soybean-admin/commit/5a5232b)
+  - update README.md &nbsp;-&nbsp; by @honghuangdc [<samp>(79d9c)</samp>](https://github.com/soybeanjs/soybean-admin/commit/79d9c51)
+
+### &nbsp;&nbsp;&nbsp;🏡 Chore
+
+- **deps**:
+  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(ac928)</samp>](https://github.com/soybeanjs/soybean-admin/commit/ac92817)
+  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(3ceeb)</samp>](https://github.com/soybeanjs/soybean-admin/commit/3ceeb6f)
+  - update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(9a669)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9a66979)
+- **projects**:
+  - update pnpm version &nbsp;-&nbsp; by @honghuangdc [<samp>(42e16)</samp>](https://github.com/soybeanjs/soybean-admin/commit/42e16a0)
+  - update deps & update pnpm version & update eslint config &nbsp;-&nbsp; by @honghuangdc [<samp>(7392b)</samp>](https://github.com/soybeanjs/soybean-admin/commit/7392beb)
+
+### &nbsp;&nbsp;&nbsp;❤️ Contributors
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
+
+## [v1.0.3](https://github.com/soybeanjs/soybean-admin/compare/v1.0.2...v1.0.3) (24-04-16)
+
+### &nbsp;&nbsp;&nbsp;🚀 Features
+
+- **hooks**: deleting the route export of useRoutePush, use vue-router &nbsp;-&nbsp; by **paynezhuang** [<samp>(c6648)</samp>](https://github.com/soybeanjs/soybean-admin/commit/c6648b6)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
+
+- **projects**:
+  - fix menu edit rules &nbsp;-&nbsp; by **paynezhuang** [<samp>(00105)</samp>](https://github.com/soybeanjs/soybean-admin/commit/001059c)
+  - fix SvgIcon inheritAttrs warning &nbsp;-&nbsp; by @honghuangdc [<samp>(efc0e)</samp>](https://github.com/soybeanjs/soybean-admin/commit/efc0e25)
+  - fix axios createRequest: add default state &nbsp;-&nbsp; by @honghuangdc [<samp>(d6eda)</samp>](https://github.com/soybeanjs/soybean-admin/commit/d6eda8f)
+  - update union-key.d.ts &nbsp;-&nbsp; by @honghuangdc [<samp>(60bef)</samp>](https://github.com/soybeanjs/soybean-admin/commit/60beff7)
+  - fix update theme color &nbsp;-&nbsp; by @honghuangdc [<samp>(27c53)</samp>](https://github.com/soybeanjs/soybean-admin/commit/27c53cd)
+
+### &nbsp;&nbsp;&nbsp;🔥 Performance
+
+- **projects**: perf code &nbsp;-&nbsp; by @honghuangdc [<samp>(b7f07)</samp>](https://github.com/soybeanjs/soybean-admin/commit/b7f0749)
+
+### &nbsp;&nbsp;&nbsp;💅 Refactors
+
+- **projects**: update naive-ui.d.ts &nbsp;-&nbsp; by @honghuangdc [<samp>(bb74d)</samp>](https://github.com/soybeanjs/soybean-admin/commit/bb74d99)
+
+### &nbsp;&nbsp;&nbsp;📖 Documentation
+
+- **projects**: update README.md &nbsp;-&nbsp; by @honghuangdc [<samp>(f4a9c)</samp>](https://github.com/soybeanjs/soybean-admin/commit/f4a9cf8)
+
+### &nbsp;&nbsp;&nbsp;🏡 Chore
+
+- **release**: release tauri v1.0.2 &nbsp;-&nbsp; by @honghuangdc [<samp>(ebdef)</samp>](https://github.com/soybeanjs/soybean-admin/commit/ebdef72)
+
+### &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.2](https://github.com/soybeanjs/soybean-admin/compare/v1.0.1...v1.0.2) (24-04-08)
+
+### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
+
+- **projects**: unify border-radius of Tag. fixed #378 &nbsp;-&nbsp; by @honghuangdc in https://github.com/soybeanjs/soybean-admin/issues/378 [<samp>(2f15a)</samp>](https://github.com/soybeanjs/soybean-admin/commit/2f15a2a)
+- **styles**: fix css var is inserted repeatedly &nbsp;-&nbsp; by **燕博文** [<samp>(769d8)</samp>](https://github.com/soybeanjs/soybean-admin/commit/769d84a)
+
+### &nbsp;&nbsp;&nbsp;💅 Refactors
+
+- **projects**: refactor addThemeVarsToHtml &nbsp;-&nbsp; by @honghuangdc [<samp>(41e47)</samp>](https://github.com/soybeanjs/soybean-admin/commit/41e470e)
+
+### &nbsp;&nbsp;&nbsp;🏡 Chore
+
+- **deps**: update deps &nbsp;-&nbsp; by @honghuangdc [<samp>(a1b48)</samp>](https://github.com/soybeanjs/soybean-admin/commit/a1b484a)
+- **projects**: disabled unocss eslint rule: order-attributify &nbsp;-&nbsp; by @honghuangdc [<samp>(1c72d)</samp>](https://github.com/soybeanjs/soybean-admin/commit/1c72dc7)
+
+### &nbsp;&nbsp;&nbsp;❤️ Contributors
+
+[![honghuangdc](https://github.com/honghuangdc.png?size=48)](https://github.com/honghuangdc)&nbsp;&nbsp;
+[燕博文](mailto:349952469@qq.com)
+
+## [v1.0.1](https://github.com/soybeanjs/soybean-admin/compare/v1.0.0...v1.0.1) (24-04-03)
 
 ### &nbsp;&nbsp;&nbsp;🐞 Bug Fixes
 

README.md

@@ -3,13 +3,13 @@
 	<h1>Soybean Admin</h1>
   <span>English | <a href="./README.zh_CN.md">中文</a></span>
 </div>
-<br />
 
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE) ![](https://img.shields.io/github/stars/soybeanjs/soybean-admin) ![](https://img.shields.io/github/forks/soybeanjs/soybean-admin)
+---
 
-
->[!CAUTION]
-> the old version of `Soybean Admin` is moved to branch [legacy](https://github.com/soybeanjs/soybean-admin/tree/legacy). It is recommended to use the latest version of `Soybean Admin`.
+[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
+[![github stars](https://img.shields.io/github/stars/soybeanjs/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
+[![github forks](https://img.shields.io/github/forks/soybeanjs/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
+[![gitee stars](https://gitee.com/honghuangdc/soybean-admin/badge/star.svg)](https://gitee.com/honghuangdc/soybean-admin)
 
 > [!NOTE]
 > 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!
@@ -79,7 +79,6 @@ Make sure your environment meets the following requirements:
 
 - **git**: you need git to clone and manage project versions.
 - **NodeJS**: >=18.0.0, recommended 18.19.0 or higher.
-  > You can use [fnm](https://github.com/Schniz/fnm) to manage your NodeJS version, [installation tutorial](https://juejin.cn/post/7113462239734022158).
 - **pnpm**: >= 8.0.0, recommended 8.14.0 or higher.
 
 **Clone Project**
@@ -113,7 +112,7 @@ We warmly welcome and appreciate all forms of contributions. If you have any ide
 
 ## Git Commit Guidelines
 
-This project has built-in `commit` command, you can execute `pnpm commit` to generate commit information that conforms to [Conventional Commits](conventionalcommits) specification. When submitting PR, please be sure to use `commit` command to create commit information to ensure the standardization of information.
+This project has built-in `commit` command, you can execute `pnpm commit` to generate commit information that conforms to [Conventional Commits](https://www.conventionalcommits.org/) specification. When submitting PR, please be sure to use `commit` command to create commit information to ensure the standardization of information.
 
 ## Browser Support
 
@@ -143,17 +142,17 @@ Thanks the following people for their contributions. If you want to contribute t
   	<p>QQ Group</p>
     <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin-2.jpg" style="width:200px" />
   </div>
-	<div>
+	<!-- <div>
 		<p>WeChat Group</p>
 		<img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-0402.jpg" style="width:200px" />
-	</div>
+	</div> -->
 	<div>
 		<p>Add the following WeChat to invite to the WeChat group</p>
 		<img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybeanjs.jpg" style="width:200px" />
 	</div>
-  <!-- <div>
+  <div>
     <p>Add Soybean's WeChat for business consultation, cooperation, project architecture, one-on-one guidance, etc.</p>
-    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybean.jpg" style="width:200px" /> -->
+    <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/wechat-soybean.jpg" style="width:200px" />
   </div>
 
 ## Star Trend

README.zh_CN.md

@@ -3,21 +3,17 @@
 	<h1>Soybean Admin</h1>
   <span><a href="./README.zh_CN.md">English</a> | 中文</span>
 </div>
-<br />
 
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE) ![](https://img.shields.io/github/stars/soybeanjs/soybean-admin) ![](https://img.shields.io/github/forks/soybeanjs/soybean-admin)
+---
 
->[!CAUTION]
-> 旧版本的 `Soybean Admin` 已经移动到分支 [legacy](https://github.com/soybeanjs/soybean-admin/tree/legacy)。建议使用最新版本的 `Soybean Admin`。
+[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
+[![github stars](https://img.shields.io/github/stars/honghuangdc/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
+[![github forks](https://img.shields.io/github/forks/honghuangdc/soybean-admin)](https://github.com/soybeanjs/soybean-admin)
+[![gitee stars](https://gitee.com/honghuangdc/soybean-admin/badge/star.svg)](https://gitee.com/honghuangdc/soybean-admin)
 
 > [!NOTE]
 > 如果您觉得 `Soybean Admin`对您有所帮助，或者您喜欢我们的项目，请在 GitHub 上给我们一个 ⭐️。您的支持是我们持续改进和增加新功能的动力！感谢您的支持！
 
-<br />
-
-[![Star History Chart](https://api.star-history.com/svg?repos=soybeanjs/soybean-admin&type=Date)](https://star-history.com/#soybeanjs/soybean-admin&Date)
-
-
 ## 简介
 
 [`Soybean Admin`](https://github.com/soybeanjs/soybean-admin) 是一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件，代码规范严谨，实现了自动化的文件路由系统。此外，它还采用了基于 ApiFox 的在线Mock数据方案。`Soybean Admin` 为您提供了一站式的后台管理解决方案，无需额外配置，开箱即用。同样是一个快速学习前沿技术的最佳实践。
@@ -82,7 +78,6 @@
 
 - **git**: 你需要git来克隆和管理项目版本。
 - **NodeJS**: >=18.0.0，推荐 18.19.0 或更高。
-  > 你可以使用 [fnm](https://github.com/Schniz/fnm) 来管理你的NodeJS版本，[安装教程](https://juejin.cn/post/7113462239734022158)。
 - **pnpm**: >= 8.0.0，推荐 8.14.0 或更高。
 
 **克隆项目**
@@ -116,7 +111,7 @@ pnpm build
 
 ## Git 提交规范
 
-本项目已内置 `commit` 命令，您可以通过执行 `pnpm commit` 来生成符合 [Conventional Commits](conventionalcommits) 规范的提交信息。在提交PR时，请务必使用 `commit` 命令来创建提交信息，以确保信息的规范性。
+本项目已内置 `commit` 命令，您可以通过执行 `pnpm commit` 来生成符合 [Conventional Commits]([conventionalcommits](https://www.conventionalcommits.org/)) 规范的提交信息。在提交PR时，请务必使用 `commit` 命令来创建提交信息，以确保信息的规范性。
 
 
 ## 浏览器支持

eslint.config.js

@@ -1,7 +1,7 @@
 import { defineConfig } from '@soybeanjs/eslint-config';
 
 export default defineConfig(
-  { vue: true, unocss: true, ignores: ['src-tauri/target'] },
+  { vue: true, unocss: true },
   {
     rules: {
       'vue/multi-word-component-names': [
@@ -17,7 +17,8 @@ export default defineConfig(
           registeredComponentsOnly: false,
           ignores: ['/^icon-/']
         }
-      ]
+      ],
+      'unocss/order-attributify': 'off'
     }
   }
 );

package.json

@@ -1,8 +1,8 @@
 {
   "name": "soybean-admin",
   "type": "module",
-  "version": "1.0.1",
-  "packageManager": "pnpm@8.15.6",
+  "version": "1.0.4",
+  "packageManager": "pnpm@9.0.5",
   "description": "A fresh and elegant admin template, based on Vue3、Vite3、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite3、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
   "author": {
     "name": "Soybean",
@@ -29,25 +29,22 @@
   ],
   "scripts": {
     "build": "vite build --mode prod",
-    "build:tauri": "pnpm tauri build",
     "build:test": "vite build --mode test",
     "cleanup": "sa cleanup",
     "commit": "sa git-commit",
     "dev": "vite --mode test",
     "dev:prod": "vite --mode prod",
-    "dev:tauri": "pnpm tauri dev",
     "gen-route": "sa gen-route",
     "lint": "eslint . --fix",
     "prepare": "simple-git-hooks",
     "preview": "vite preview",
     "release": "sa release",
-    "tauri-icon": "pnpm tauri icon ./public/logo.png",
     "typecheck": "vue-tsc --noEmit --skipLibCheck",
     "update-pkg": "sa update-pkg"
   },
   "dependencies": {
     "@better-scroll/core": "2.5.1",
-    "@iconify/vue": "4.1.1",
+    "@iconify/vue": "4.1.2",
     "@sa/axios": "workspace:*",
     "@sa/color-palette": "workspace:*",
     "@sa/hooks": "workspace:*",
@@ -61,44 +58,43 @@
     "naive-ui": "2.38.1",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
-    "vue": "3.4.21",
+    "vue": "3.4.24",
     "vue-draggable-plus": "0.4.0",
-    "vue-i18n": "9.10.2",
-    "vue-router": "4.3.0"
+    "vue-i18n": "9.13.1",
+    "vue-router": "4.3.2"
   },
   "devDependencies": {
     "@elegant-router/vue": "0.3.6",
-    "@iconify/json": "2.2.196",
+    "@iconify/json": "2.2.203",
     "@sa/scripts": "workspace:*",
     "@sa/uno-preset": "workspace:*",
-    "@soybeanjs/eslint-config": "1.2.5",
-    "@tauri-apps/cli": "1.5.11",
+    "@soybeanjs/eslint-config": "1.3.2",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "20.12.2",
+    "@types/node": "20.12.7",
     "@types/nprogress": "0.2.3",
-    "@unocss/eslint-config": "0.58.9",
-    "@unocss/preset-icons": "0.58.9",
-    "@unocss/preset-uno": "0.58.9",
-    "@unocss/transformer-directives": "0.58.9",
-    "@unocss/transformer-variant-group": "0.58.9",
-    "@unocss/vite": "0.58.9",
+    "@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": "8.57.0",
-    "eslint-plugin-vue": "9.24.0",
+    "eslint": "9.1.1",
+    "eslint-plugin-vue": "9.25.0",
     "lint-staged": "15.2.2",
-    "sass": "1.72.0",
+    "sass": "1.75.0",
     "simple-git-hooks": "2.11.1",
-    "tsx": "4.7.1",
-    "typescript": "5.4.3",
+    "tsx": "4.7.2",
+    "typescript": "5.4.5",
     "unplugin-icons": "0.18.5",
     "unplugin-vue-components": "0.26.0",
-    "vite": "5.2.7",
+    "vite": "5.2.10",
     "vite-plugin-progress": "0.0.7",
     "vite-plugin-svg-icons": "2.0.1",
-    "vite-plugin-vue-devtools": "7.0.25",
+    "vite-plugin-vue-devtools": "7.1.2",
     "vue-eslint-parser": "9.4.2",
-    "vue-tsc": "2.0.7"
+    "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.0.1",
+  "version": "1.0.4",
   "exports": {
     ".": "./src/index.ts"
   },
@@ -13,9 +13,9 @@
     "@sa/utils": "workspace:*",
     "axios": "1.6.8",
     "axios-retry": "4.1.0",
-    "qs": "6.12.0"
+    "qs": "6.12.1"
   },
   "devDependencies": {
-    "@types/qs": "6.9.14"
+    "@types/qs": "6.9.15"
   }
 }

packages/axios/src/index.ts

@@ -127,6 +127,7 @@ export function createRequest<ResponseData = any, State = Record<string, unknown
 
   request.cancelRequest = cancelRequest;
   request.cancelAllRequest = cancelAllRequest;
+  request.state = {} as State;
 
   return request;
 }

packages/color-palette/package.json

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

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

@@ -0,0 +1,2 @@
+export * from './name';
+export * from './palette';

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

@@ -0,0 +1,356 @@
+import type { ColorPaletteFamily } from '../types';
+
+export const colorPalettes: ColorPaletteFamily[] = [
+  {
+    name: 'Slate',
+    palettes: [
+      { hex: '#f8fafc', number: 50 },
+      { hex: '#f1f5f9', number: 100 },
+      { hex: '#e2e8f0', number: 200 },
+      { hex: '#cbd5e1', number: 300 },
+      { hex: '#94a3b8', number: 400 },
+      { hex: '#64748b', number: 500 },
+      { hex: '#475569', number: 600 },
+      { hex: '#334155', number: 700 },
+      { hex: '#1e293b', number: 800 },
+      { hex: '#0f172a', number: 900 },
+      { hex: '#020617', number: 950 }
+    ]
+  },
+  {
+    name: 'Gray',
+    palettes: [
+      { hex: '#f9fafb', number: 50 },
+      { hex: '#f3f4f6', number: 100 },
+      { hex: '#e5e7eb', number: 200 },
+      { hex: '#d1d5db', number: 300 },
+      { hex: '#9ca3af', number: 400 },
+      { hex: '#6b7280', number: 500 },
+      { hex: '#4b5563', number: 600 },
+      { hex: '#374151', number: 700 },
+      { hex: '#1f2937', number: 800 },
+      { hex: '#111827', number: 900 },
+      { hex: '#030712', number: 950 }
+    ]
+  },
+  {
+    name: 'Zinc',
+    palettes: [
+      { hex: '#fafafa', number: 50 },
+      { hex: '#f4f4f5', number: 100 },
+      { hex: '#e4e4e7', number: 200 },
+      { hex: '#d4d4d8', number: 300 },
+      { hex: '#a1a1aa', number: 400 },
+      { hex: '#71717a', number: 500 },
+      { hex: '#52525b', number: 600 },
+      { hex: '#3f3f46', number: 700 },
+      { hex: '#27272a', number: 800 },
+      { hex: '#18181b', number: 900 },
+      { hex: '#09090b', number: 950 }
+    ]
+  },
+  {
+    name: 'Neutral',
+    palettes: [
+      { hex: '#fafafa', number: 50 },
+      { hex: '#f5f5f5', number: 100 },
+      { hex: '#e5e5e5', number: 200 },
+      { hex: '#d4d4d4', number: 300 },
+      { hex: '#a3a3a3', number: 400 },
+      { hex: '#737373', number: 500 },
+      { hex: '#525252', number: 600 },
+      { hex: '#404040', number: 700 },
+      { hex: '#262626', number: 800 },
+      { hex: '#171717', number: 900 },
+      { hex: '#0a0a0a', number: 950 }
+    ]
+  },
+  {
+    name: 'Stone',
+    palettes: [
+      { hex: '#fafaf9', number: 50 },
+      { hex: '#f5f5f4', number: 100 },
+      { hex: '#e7e5e4', number: 200 },
+      { hex: '#d6d3d1', number: 300 },
+      { hex: '#a8a29e', number: 400 },
+      { hex: '#78716c', number: 500 },
+      { hex: '#57534e', number: 600 },
+      { hex: '#44403c', number: 700 },
+      { hex: '#292524', number: 800 },
+      { hex: '#1c1917', number: 900 },
+      { hex: '#0c0a09', number: 950 }
+    ]
+  },
+  {
+    name: 'Red',
+    palettes: [
+      { hex: '#fef2f2', number: 50 },
+      { hex: '#fee2e2', number: 100 },
+      { hex: '#fecaca', number: 200 },
+      { hex: '#fca5a5', number: 300 },
+      { hex: '#f87171', number: 400 },
+      { hex: '#ef4444', number: 500 },
+      { hex: '#dc2626', number: 600 },
+      { hex: '#b91c1c', number: 700 },
+      { hex: '#991b1b', number: 800 },
+      { hex: '#7f1d1d', number: 900 },
+      { hex: '#450a0a', number: 950 }
+    ]
+  },
+  {
+    name: 'Orange',
+    palettes: [
+      { hex: '#fff7ed', number: 50 },
+      { hex: '#ffedd5', number: 100 },
+      { hex: '#fed7aa', number: 200 },
+      { hex: '#fdba74', number: 300 },
+      { hex: '#fb923c', number: 400 },
+      { hex: '#f97316', number: 500 },
+      { hex: '#ea580c', number: 600 },
+      { hex: '#c2410c', number: 700 },
+      { hex: '#9a3412', number: 800 },
+      { hex: '#7c2d12', number: 900 },
+      { hex: '#431407', number: 950 }
+    ]
+  },
+  {
+    name: 'Amber',
+    palettes: [
+      { hex: '#fffbeb', number: 50 },
+      { hex: '#fef3c7', number: 100 },
+      { hex: '#fde68a', number: 200 },
+      { hex: '#fcd34d', number: 300 },
+      { hex: '#fbbf24', number: 400 },
+      { hex: '#f59e0b', number: 500 },
+      { hex: '#d97706', number: 600 },
+      { hex: '#b45309', number: 700 },
+      { hex: '#92400e', number: 800 },
+      { hex: '#78350f', number: 900 },
+      { hex: '#451a03', number: 950 }
+    ]
+  },
+  {
+    name: 'Yellow',
+    palettes: [
+      { hex: '#fefce8', number: 50 },
+      { hex: '#fef9c3', number: 100 },
+      { hex: '#fef08a', number: 200 },
+      { hex: '#fde047', number: 300 },
+      { hex: '#facc15', number: 400 },
+      { hex: '#eab308', number: 500 },
+      { hex: '#ca8a04', number: 600 },
+      { hex: '#a16207', number: 700 },
+      { hex: '#854d0e', number: 800 },
+      { hex: '#713f12', number: 900 },
+      { hex: '#422006', number: 950 }
+    ]
+  },
+  {
+    name: 'Lime',
+    palettes: [
+      { hex: '#f7fee7', number: 50 },
+      { hex: '#ecfccb', number: 100 },
+      { hex: '#d9f99d', number: 200 },
+      { hex: '#bef264', number: 300 },
+      { hex: '#a3e635', number: 400 },
+      { hex: '#84cc16', number: 500 },
+      { hex: '#65a30d', number: 600 },
+      { hex: '#4d7c0f', number: 700 },
+      { hex: '#3f6212', number: 800 },
+      { hex: '#365314', number: 900 },
+      { hex: '#1a2e05', number: 950 }
+    ]
+  },
+  {
+    name: 'Green',
+    palettes: [
+      { hex: '#f0fdf4', number: 50 },
+      { hex: '#dcfce7', number: 100 },
+      { hex: '#bbf7d0', number: 200 },
+      { hex: '#86efac', number: 300 },
+      { hex: '#4ade80', number: 400 },
+      { hex: '#22c55e', number: 500 },
+      { hex: '#16a34a', number: 600 },
+      { hex: '#15803d', number: 700 },
+      { hex: '#166534', number: 800 },
+      { hex: '#14532d', number: 900 },
+      { hex: '#052e16', number: 950 }
+    ]
+  },
+  {
+    name: 'Emerald',
+    palettes: [
+      { hex: '#ecfdf5', number: 50 },
+      { hex: '#d1fae5', number: 100 },
+      { hex: '#a7f3d0', number: 200 },
+      { hex: '#6ee7b7', number: 300 },
+      { hex: '#34d399', number: 400 },
+      { hex: '#10b981', number: 500 },
+      { hex: '#059669', number: 600 },
+      { hex: '#047857', number: 700 },
+      { hex: '#065f46', number: 800 },
+      { hex: '#064e3b', number: 900 },
+      { hex: '#022c22', number: 950 }
+    ]
+  },
+  {
+    name: 'Teal',
+    palettes: [
+      { hex: '#f0fdfa', number: 50 },
+      { hex: '#ccfbf1', number: 100 },
+      { hex: '#99f6e4', number: 200 },
+      { hex: '#5eead4', number: 300 },
+      { hex: '#2dd4bf', number: 400 },
+      { hex: '#14b8a6', number: 500 },
+      { hex: '#0d9488', number: 600 },
+      { hex: '#0f766e', number: 700 },
+      { hex: '#115e59', number: 800 },
+      { hex: '#134e4a', number: 900 },
+      { hex: '#042f2e', number: 950 }
+    ]
+  },
+  {
+    name: 'Cyan',
+    palettes: [
+      { hex: '#ecfeff', number: 50 },
+      { hex: '#cffafe', number: 100 },
+      { hex: '#a5f3fc', number: 200 },
+      { hex: '#67e8f9', number: 300 },
+      { hex: '#22d3ee', number: 400 },
+      { hex: '#06b6d4', number: 500 },
+      { hex: '#0891b2', number: 600 },
+      { hex: '#0e7490', number: 700 },
+      { hex: '#155e75', number: 800 },
+      { hex: '#164e63', number: 900 },
+      { hex: '#083344', number: 950 }
+    ]
+  },
+  {
+    name: 'Sky',
+    palettes: [
+      { hex: '#f0f9ff', number: 50 },
+      { hex: '#e0f2fe', number: 100 },
+      { hex: '#bae6fd', number: 200 },
+      { hex: '#7dd3fc', number: 300 },
+      { hex: '#38bdf8', number: 400 },
+      { hex: '#0ea5e9', number: 500 },
+      { hex: '#0284c7', number: 600 },
+      { hex: '#0369a1', number: 700 },
+      { hex: '#075985', number: 800 },
+      { hex: '#0c4a6e', number: 900 },
+      { hex: '#082f49', number: 950 }
+    ]
+  },
+  {
+    name: 'Blue',
+    palettes: [
+      { hex: '#eff6ff', number: 50 },
+      { hex: '#dbeafe', number: 100 },
+      { hex: '#bfdbfe', number: 200 },
+      { hex: '#93c5fd', number: 300 },
+      { hex: '#60a5fa', number: 400 },
+      { hex: '#3b82f6', number: 500 },
+      { hex: '#2563eb', number: 600 },
+      { hex: '#1d4ed8', number: 700 },
+      { hex: '#1e40af', number: 800 },
+      { hex: '#1e3a8a', number: 900 },
+      { hex: '#172554', number: 950 }
+    ]
+  },
+  {
+    name: 'Indigo',
+    palettes: [
+      { hex: '#eef2ff', number: 50 },
+      { hex: '#e0e7ff', number: 100 },
+      { hex: '#c7d2fe', number: 200 },
+      { hex: '#a5b4fc', number: 300 },
+      { hex: '#818cf8', number: 400 },
+      { hex: '#6366f1', number: 500 },
+      { hex: '#4f46e5', number: 600 },
+      { hex: '#4338ca', number: 700 },
+      { hex: '#3730a3', number: 800 },
+      { hex: '#312e81', number: 900 },
+      { hex: '#1e1b4b', number: 950 }
+    ]
+  },
+  {
+    name: 'Violet',
+    palettes: [
+      { hex: '#f5f3ff', number: 50 },
+      { hex: '#ede9fe', number: 100 },
+      { hex: '#ddd6fe', number: 200 },
+      { hex: '#c4b5fd', number: 300 },
+      { hex: '#a78bfa', number: 400 },
+      { hex: '#8b5cf6', number: 500 },
+      { hex: '#7c3aed', number: 600 },
+      { hex: '#6d28d9', number: 700 },
+      { hex: '#5b21b6', number: 800 },
+      { hex: '#4c1d95', number: 900 },
+      { hex: '#2e1065', number: 950 }
+    ]
+  },
+  {
+    name: 'Purple',
+    palettes: [
+      { hex: '#faf5ff', number: 50 },
+      { hex: '#f3e8ff', number: 100 },
+      { hex: '#e9d5ff', number: 200 },
+      { hex: '#d8b4fe', number: 300 },
+      { hex: '#c084fc', number: 400 },
+      { hex: '#a855f7', number: 500 },
+      { hex: '#9333ea', number: 600 },
+      { hex: '#7e22ce', number: 700 },
+      { hex: '#6b21a8', number: 800 },
+      { hex: '#581c87', number: 900 },
+      { hex: '#3b0764', number: 950 }
+    ]
+  },
+  {
+    name: 'Fuchsia',
+    palettes: [
+      { hex: '#fdf4ff', number: 50 },
+      { hex: '#fae8ff', number: 100 },
+      { hex: '#f5d0fe', number: 200 },
+      { hex: '#f0abfc', number: 300 },
+      { hex: '#e879f9', number: 400 },
+      { hex: '#d946ef', number: 500 },
+      { hex: '#c026d3', number: 600 },
+      { hex: '#a21caf', number: 700 },
+      { hex: '#86198f', number: 800 },
+      { hex: '#701a75', number: 900 },
+      { hex: '#4a044e', number: 950 }
+    ]
+  },
+  {
+    name: 'Pink',
+    palettes: [
+      { hex: '#fdf2f8', number: 50 },
+      { hex: '#fce7f3', number: 100 },
+      { hex: '#fbcfe8', number: 200 },
+      { hex: '#f9a8d4', number: 300 },
+      { hex: '#f472b6', number: 400 },
+      { hex: '#ec4899', number: 500 },
+      { hex: '#db2777', number: 600 },
+      { hex: '#be185d', number: 700 },
+      { hex: '#9d174d', number: 800 },
+      { hex: '#831843', number: 900 },
+      { hex: '#500724', number: 950 }
+    ]
+  },
+  {
+    name: 'Rose',
+    palettes: [
+      { hex: '#fff1f2', number: 50 },
+      { hex: '#ffe4e6', number: 100 },
+      { hex: '#fecdd3', number: 200 },
+      { hex: '#fda4af', number: 300 },
+      { hex: '#fb7185', number: 400 },
+      { hex: '#f43f5e', number: 500 },
+      { hex: '#e11d48', number: 600 },
+      { hex: '#be123c', number: 700 },
+      { hex: '#9f1239', number: 800 },
+      { hex: '#881337', number: 900 },
+      { hex: '#4c0519', number: 950 }
+    ]
+  }
+];

packages/color-palette/src/index.ts

@@ -1,56 +1,6 @@
-import { getColorPaletteFamily } from './palette';
-import { getColorName } from './name';
-import type { ColorPalette, ColorPaletteFamily, ColorPaletteItem, ColorPaletteNumber } from './type';
-import defaultPalettes from './json/palette.json';
+import { colorPalettes } from './constant';
+import { getColorName, getHex, getHsl, getRgb } from './shared';
 
-/**
- * Get color palette by provided color and color name
- *
- * @param color The provided color
- * @param colorName Color name
- */
-export function getColorPalette(color: string, colorName: string) {
-  const colorPaletteFamily = getColorPaletteFamily(color, colorName);
-
-  const colorMap = new Map<ColorPaletteNumber, ColorPaletteItem>();
-
-  colorPaletteFamily.palettes.forEach(palette => {
-    colorMap.set(palette.number, palette);
-  });
-
-  const mainColor = colorMap.get(500) as ColorPaletteItem;
-  const matchColor = colorPaletteFamily.palettes.find(palette => palette.hexcode === color) as ColorPaletteItem;
-
-  const colorPalette: ColorPalette = {
-    ...colorPaletteFamily,
-    colorMap,
-    main: mainColor,
-    match: matchColor
-  };
-
-  return colorPalette;
-}
-
-/**
- * Get color by color palette number
- *
- * @param color Color
- * @param num Color palette number
- * @returns Color hexcode
- */
-export function getColorByColorPaletteNumber(color: string, num: ColorPaletteNumber) {
-  const colorPalette = getColorPalette(color, color);
-
-  const colorItem = colorPalette.colorMap.get(num) as ColorPaletteItem;
-
-  return colorItem.hexcode;
-}
-
-export default getColorPalette;
-
-/** The builtin color palettes */
-const colorPalettes = defaultPalettes as ColorPaletteFamily[];
-
-export { getColorName, colorPalettes };
-
-export type { ColorPalette, ColorPaletteNumber, ColorPaletteItem, ColorPaletteFamily };
+export * from './palette';
+export { getColorName, getHex, getHsl, getRgb, colorPalettes };
+export * from './types';

packages/color-palette/src/json/palette.json

@@ -1,274 +0,0 @@
-[
-  {
-    "key": "red",
-    "palettes": [
-      { "hexcode": "#fef2f2", "number": 50, "name": "Bridesmaid" },
-      { "hexcode": "#fee2e2", "number": 100, "name": "Pippin" },
-      { "hexcode": "#fecaca", "number": 200, "name": "Your Pink" },
-      { "hexcode": "#fca5a5", "number": 300, "name": "Cornflower Lilac" },
-      { "hexcode": "#f87171", "number": 400, "name": "Bittersweet" },
-      { "hexcode": "#ef4444", "number": 500, "name": "Cinnabar" },
-      { "hexcode": "#dc2626", "number": 600, "name": "Persian Red" },
-      { "hexcode": "#b91c1c", "number": 700, "name": "Thunderbird" },
-      { "hexcode": "#991b1b", "number": 800, "name": "Old Brick" },
-      { "hexcode": "#7f1d1d", "number": 900, "name": "Falu Red" },
-      { "hexcode": "#450a0a", "number": 950, "name": "Mahogany" }
-    ]
-  },
-  {
-    "key": "orange",
-    "palettes": [
-      { "hexcode": "#fff7ed", "number": 50, "name": "Serenade" },
-      { "hexcode": "#ffedd5", "number": 100, "name": "Derby" },
-      { "hexcode": "#fed7aa", "number": 200, "name": "Caramel" },
-      { "hexcode": "#fdba74", "number": 300, "name": "Macaroni and Cheese" },
-      { "hexcode": "#fb923c", "number": 400, "name": "Neon Carrot" },
-      { "hexcode": "#f97316", "number": 500, "name": "Ecstasy" },
-      { "hexcode": "#ea580c", "number": 600, "name": "Trinidad" },
-      { "hexcode": "#c2410c", "number": 700, "name": "Tia Maria" },
-      { "hexcode": "#9a3412", "number": 800, "name": "Tabasco" },
-      { "hexcode": "#7c2d12", "number": 900, "name": "Pueblo" },
-      { "hexcode": "#431407", "number": 950, "name": "Rebel" }
-    ]
-  },
-  {
-    "key": "amber",
-    "palettes": [
-      { "hexcode": "#fffbeb", "number": 50, "name": "Island Spice" },
-      { "hexcode": "#fef3c7", "number": 100, "name": "Beeswax" },
-      { "hexcode": "#fde68a", "number": 200, "name": "Sweet Corn" },
-      { "hexcode": "#fcd34d", "number": 300, "name": "Mustard" },
-      { "hexcode": "#fbbf24", "number": 400, "name": "Lightning Yellow" },
-      { "hexcode": "#f59e0b", "number": 500, "name": "California" },
-      { "hexcode": "#d97706", "number": 600, "name": "Christine" },
-      { "hexcode": "#b45309", "number": 700, "name": "Vesuvius" },
-      { "hexcode": "#92400e", "number": 800, "name": "Korma" },
-      { "hexcode": "#78350f", "number": 900, "name": "Copper Canyon" },
-      { "hexcode": "#451a03", "number": 950, "name": "Brown Pod" }
-    ]
-  },
-  {
-    "key": "yellow",
-    "palettes": [
-      { "hexcode": "#fefce8", "number": 50, "name": "Orange White" },
-      { "hexcode": "#fef9c3", "number": 100, "name": "Lemon Chiffon" },
-      { "hexcode": "#fef08a", "number": 200, "name": "Sweet Corn" },
-      { "hexcode": "#fde047", "number": 300, "name": "Bright Sun" },
-      { "hexcode": "#facc15", "number": 400, "name": "Candlelight" },
-      { "hexcode": "#eab308", "number": 500, "name": "Corn" },
-      { "hexcode": "#ca8a04", "number": 600, "name": "Pirate Gold" },
-      { "hexcode": "#a16207", "number": 700, "name": "Mai Tai" },
-      { "hexcode": "#854d0e", "number": 800, "name": "Korma" },
-      { "hexcode": "#713f12", "number": 900, "name": "Sepia" },
-      { "hexcode": "#422006", "number": 950, "name": "Dark Ebony" }
-    ]
-  },
-  {
-    "key": "lime",
-    "palettes": [
-      { "hexcode": "#f7fee7", "number": 50, "name": "Spring Sun" },
-      { "hexcode": "#ecfccb", "number": 100, "name": "Chiffon" },
-      { "hexcode": "#d9f99d", "number": 200, "name": "Gossip" },
-      { "hexcode": "#bef264", "number": 300, "name": "Sulu" },
-      { "hexcode": "#a3e635", "number": 400, "name": "Conifer" },
-      { "hexcode": "#84cc16", "number": 500, "name": "Lima" },
-      { "hexcode": "#65a30d", "number": 600, "name": "Christi" },
-      { "hexcode": "#4d7c0f", "number": 700, "name": "Green Leaf" },
-      { "hexcode": "#3f6212", "number": 800, "name": "Dell" },
-      { "hexcode": "#365314", "number": 900, "name": "Clover" },
-      { "hexcode": "#1a2e05", "number": 950, "name": "Deep Forest Green" }
-    ]
-  },
-  {
-    "key": "green",
-    "palettes": [
-      { "hexcode": "#f0fdf4", "number": 50, "name": "Ottoman" },
-      { "hexcode": "#dcfce7", "number": 100, "name": "Blue Romance" },
-      { "hexcode": "#bbf7d0", "number": 200, "name": "Magic Mint" },
-      { "hexcode": "#86efac", "number": 300, "name": "Algae Green" },
-      { "hexcode": "#4ade80", "number": 400, "name": "Emerald" },
-      { "hexcode": "#22c55e", "number": 500, "name": "Malachite" },
-      { "hexcode": "#16a34a", "number": 600, "name": "Salem" },
-      { "hexcode": "#15803d", "number": 700, "name": "Jewel" },
-      { "hexcode": "#166534", "number": 800, "name": "Jewel" },
-      { "hexcode": "#14532d", "number": 900, "name": "Green Pea" },
-      { "hexcode": "#052e16", "number": 950, "name": "English Holly" }
-    ]
-  },
-  {
-    "key": "emerald",
-    "palettes": [
-      { "hexcode": "#ecfdf5", "number": 50, "name": "White Ice" },
-      { "hexcode": "#d1fae5", "number": 100, "name": "Granny Apple" },
-      { "hexcode": "#a7f3d0", "number": 200, "name": "Magic Mint" },
-      { "hexcode": "#6ee7b7", "number": 300, "name": "Bermuda" },
-      { "hexcode": "#34d399", "number": 400, "name": "Shamrock" },
-      { "hexcode": "#10b981", "number": 500, "name": "Mountain Meadow" },
-      { "hexcode": "#059669", "number": 600, "name": "Green Haze" },
-      { "hexcode": "#047857", "number": 700, "name": "Watercourse" },
-      { "hexcode": "#065f46", "number": 800, "name": "Watercourse" },
-      { "hexcode": "#064e3b", "number": 900, "name": "Evening Sea" },
-      { "hexcode": "#022c22", "number": 950, "name": "Burnham" }
-    ]
-  },
-  {
-    "key": "teal",
-    "palettes": [
-      { "hexcode": "#f0fdfa", "number": 50, "name": "White Ice" },
-      { "hexcode": "#ccfbf1", "number": 100, "name": "Scandal" },
-      { "hexcode": "#99f6e4", "number": 200, "name": "Ice Cold" },
-      { "hexcode": "#5eead4", "number": 300, "name": "Turquoise Blue" },
-      { "hexcode": "#2dd4bf", "number": 400, "name": "Turquoise" },
-      { "hexcode": "#14b8a6", "number": 500, "name": "Java" },
-      { "hexcode": "#0d9488", "number": 600, "name": "Blue Chill" },
-      { "hexcode": "#0f766e", "number": 700, "name": "Genoa" },
-      { "hexcode": "#115e59", "number": 800, "name": "Eden" },
-      { "hexcode": "#134e4a", "number": 900, "name": "Eden" },
-      { "hexcode": "#042f2e", "number": 950, "name": "Tiber" }
-    ]
-  },
-  {
-    "key": "cyan",
-    "palettes": [
-      { "hexcode": "#ecfeff", "number": 50, "name": "Bubbles" },
-      { "hexcode": "#cffafe", "number": 100, "name": "Oyster Bay" },
-      { "hexcode": "#a5f3fc", "number": 200, "name": "Anakiwa" },
-      { "hexcode": "#67e8f9", "number": 300, "name": "Spray" },
-      { "hexcode": "#22d3ee", "number": 400, "name": "Bright Turquoise" },
-      { "hexcode": "#06b6d4", "number": 500, "name": "Cerulean" },
-      { "hexcode": "#0891b2", "number": 600, "name": "Bondi Blue" },
-      { "hexcode": "#0e7490", "number": 700, "name": "Blue Chill" },
-      { "hexcode": "#155e75", "number": 800, "name": "Blumine" },
-      { "hexcode": "#164e63", "number": 900, "name": "Chathams Blue" },
-      { "hexcode": "#083344", "number": 950, "name": "Tarawera" }
-    ]
-  },
-  {
-    "key": "sky",
-    "palettes": [
-      { "hexcode": "#f0f9ff", "number": 50, "name": "Alice Blue" },
-      { "hexcode": "#e0f2fe", "number": 100, "name": "Pattens Blue" },
-      { "hexcode": "#bae6fd", "number": 200, "name": "French Pass" },
-      { "hexcode": "#7dd3fc", "number": 300, "name": "Malibu" },
-      { "hexcode": "#38bdf8", "number": 400, "name": "Picton Blue" },
-      { "hexcode": "#0ea5e9", "number": 500, "name": "Cerulean" },
-      { "hexcode": "#0284c7", "number": 600, "name": "Lochmara" },
-      { "hexcode": "#0369a1", "number": 700, "name": "Bahama Blue" },
-      { "hexcode": "#075985", "number": 800, "name": "Venice Blue" },
-      { "hexcode": "#0c4a6e", "number": 900, "name": "Chathams Blue" },
-      { "hexcode": "#082f49", "number": 950, "name": "Blue Whale" }
-    ]
-  },
-  {
-    "key": "blue",
-    "palettes": [
-      { "hexcode": "#eff6ff", "number": 50, "name": "Zumthor" },
-      { "hexcode": "#dbeafe", "number": 100, "name": "Hawkes Blue" },
-      { "hexcode": "#bfdbfe", "number": 200, "name": "Tropical Blue" },
-      { "hexcode": "#93c5fd", "number": 300, "name": "Malibu" },
-      { "hexcode": "#60a5fa", "number": 400, "name": "Cornflower Blue" },
-      { "hexcode": "#3b82f6", "number": 500, "name": "Dodger Blue" },
-      { "hexcode": "#2563eb", "number": 600, "name": "Royal Blue" },
-      { "hexcode": "#1d4ed8", "number": 700, "name": "Cerulean Blue" },
-      { "hexcode": "#1e40af", "number": 800, "name": "Persian Blue" },
-      { "hexcode": "#1e3a8a", "number": 900, "name": "Bay of Many" },
-      { "hexcode": "#172554", "number": 950, "name": "Bunting" }
-    ]
-  },
-  {
-    "key": "indigo",
-    "palettes": [
-      { "hexcode": "#eef2ff", "number": 50, "name": "Zircon" },
-      { "hexcode": "#e0e7ff", "number": 100, "name": "Hawkes Blue" },
-      { "hexcode": "#c7d2fe", "number": 200, "name": "Periwinkle" },
-      { "hexcode": "#a5b4fc", "number": 300, "name": "Perano" },
-      { "hexcode": "#818cf8", "number": 400, "name": "Portage" },
-      { "hexcode": "#6366f1", "number": 500, "name": "Royal Blue" },
-      { "hexcode": "#4f46e5", "number": 600, "name": "Royal Blue" },
-      { "hexcode": "#4338ca", "number": 700, "name": "Governor Bay" },
-      { "hexcode": "#3730a3", "number": 800, "name": "Governor Bay" },
-      { "hexcode": "#312e81", "number": 900, "name": "Minsk" },
-      { "hexcode": "#1e1b4b", "number": 950, "name": "Port Gore" }
-    ]
-  },
-  {
-    "key": "violet",
-    "palettes": [
-      { "hexcode": "#f5f3ff", "number": 50, "name": "Titan White" },
-      { "hexcode": "#ede9fe", "number": 100, "name": "Titan White" },
-      { "hexcode": "#ddd6fe", "number": 200, "name": "Fog" },
-      { "hexcode": "#c4b5fd", "number": 300, "name": "Melrose" },
-      { "hexcode": "#a78bfa", "number": 400, "name": "Dull Lavender" },
-      { "hexcode": "#8b5cf6", "number": 500, "name": "Medium Purple" },
-      { "hexcode": "#7c3aed", "number": 600, "name": "Purple Heart" },
-      { "hexcode": "#6d28d9", "number": 700, "name": "Purple Heart" },
-      { "hexcode": "#5b21b6", "number": 800, "name": "Purple Heart" },
-      { "hexcode": "#4c1d95", "number": 900, "name": "Daisy Bush" },
-      { "hexcode": "#2e1065", "number": 950, "name": "Violent Violet" }
-    ]
-  },
-  {
-    "key": "purple",
-    "palettes": [
-      { "hexcode": "#faf5ff", "number": 50, "name": "Magnolia" },
-      { "hexcode": "#f3e8ff", "number": 100, "name": "Blue Chalk" },
-      { "hexcode": "#e9d5ff", "number": 200, "name": "Blue Chalk" },
-      { "hexcode": "#d8b4fe", "number": 300, "name": "Mauve" },
-      { "hexcode": "#c084fc", "number": 400, "name": "Heliotrope" },
-      { "hexcode": "#a855f7", "number": 500, "name": "Medium Purple" },
-      { "hexcode": "#9333ea", "number": 600, "name": "Electric Violet" },
-      { "hexcode": "#7e22ce", "number": 700, "name": "Purple Heart" },
-      { "hexcode": "#6b21a8", "number": 800, "name": "Seance" },
-      { "hexcode": "#581c87", "number": 900, "name": "Daisy Bush" },
-      { "hexcode": "#3b0764", "number": 950, "name": "Christalle" }
-    ]
-  },
-  {
-    "key": "fuchsia",
-    "palettes": [
-      { "hexcode": "#fdf4ff", "number": 50, "name": "White Pointer" },
-      { "hexcode": "#fae8ff", "number": 100, "name": "White Pointer" },
-      { "hexcode": "#f5d0fe", "number": 200, "name": "Mauve" },
-      { "hexcode": "#f0abfc", "number": 300, "name": "Mauve" },
-      { "hexcode": "#e879f9", "number": 400, "name": "Heliotrope" },
-      { "hexcode": "#d946ef", "number": 500, "name": "Heliotrope" },
-      { "hexcode": "#c026d3", "number": 600, "name": "Fuchsia Pink" },
-      { "hexcode": "#a21caf", "number": 700, "name": "Violet Eggplant" },
-      { "hexcode": "#86198f", "number": 800, "name": "Seance" },
-      { "hexcode": "#701a75", "number": 900, "name": "Seance" },
-      { "hexcode": "#4a044e", "number": 950, "name": "Clairvoyant" }
-    ]
-  },
-  {
-    "key": "pink",
-    "palettes": [
-      { "hexcode": "#fdf2f8", "number": 50, "name": "Wisp Pink" },
-      { "hexcode": "#fce7f3", "number": 100, "name": "Carousel Pink" },
-      { "hexcode": "#fbcfe8", "number": 200, "name": "Classic Rose" },
-      { "hexcode": "#f9a8d4", "number": 300, "name": "Lavender Pink" },
-      { "hexcode": "#f472b6", "number": 400, "name": "Persian Pink" },
-      { "hexcode": "#ec4899", "number": 500, "name": "Brilliant Rose" },
-      { "hexcode": "#db2777", "number": 600, "name": "Cerise" },
-      { "hexcode": "#be185d", "number": 700, "name": "Maroon Flush" },
-      { "hexcode": "#9d174d", "number": 800, "name": "Disco" },
-      { "hexcode": "#831843", "number": 900, "name": "Disco" },
-      { "hexcode": "#500724", "number": 950, "name": "Cab Sav" }
-    ]
-  },
-  {
-    "key": "rose",
-    "palettes": [
-      { "hexcode": "#fff1f2", "number": 50, "name": "Lavender blush" },
-      { "hexcode": "#ffe4e6", "number": 100, "name": "Cosmos" },
-      { "hexcode": "#fecdd3", "number": 200, "name": "Pastel Pink" },
-      { "hexcode": "#fda4af", "number": 300, "name": "Sweet Pink" },
-      { "hexcode": "#fb7185", "number": 400, "name": "Froly" },
-      { "hexcode": "#f43f5e", "number": 500, "name": "Radical Red" },
-      { "hexcode": "#e11d48", "number": 600, "name": "Amaranth" },
-      { "hexcode": "#be123c", "number": 700, "name": "Cardinal" },
-      { "hexcode": "#9f1239", "number": 800, "name": "Shiraz" },
-      { "hexcode": "#881337", "number": 900, "name": "Claret" },
-      { "hexcode": "#4c0519", "number": 950, "name": "Cab Sav" }
-    ]
-  }
-]

packages/color-palette/src/palette.ts

@@ -1,95 +0,0 @@
-import { getDeltaE, getHsl, isValidColor, transformHslToHex } from './color';
-import { getColorName } from './name';
-import type { ColorPaletteFamily, ColorPaletteFamilyWithNearestPalette } from './type';
-import defaultPalettes from './json/palette.json';
-
-export function getNearestColorPaletteFamily(color: string, families: ColorPaletteFamily[]) {
-  const familyWithConfig = families.map(family => {
-    const palettes = family.palettes.map(palette => {
-      return {
-        ...palette,
-        delta: getDeltaE(color, palette.hexcode)
-      };
-    });
-
-    const nearestPalette = palettes.reduce((prev, curr) => (prev.delta < curr.delta ? prev : curr));
-
-    return {
-      ...family,
-      palettes,
-      nearestPalette
-    };
-  });
-
-  const nearestPaletteFamily = familyWithConfig.reduce((prev, curr) =>
-    prev.nearestPalette.delta < curr.nearestPalette.delta ? prev : curr
-  );
-
-  const { l } = getHsl(color);
-
-  const paletteFamily: ColorPaletteFamilyWithNearestPalette = {
-    ...nearestPaletteFamily,
-    nearestLightnessPalette: nearestPaletteFamily.palettes.reduce((prev, curr) => {
-      const { l: prevLightness } = getHsl(prev.hexcode);
-      const { l: currLightness } = getHsl(curr.hexcode);
-
-      const deltaPrev = Math.abs(prevLightness - l);
-      const deltaCurr = Math.abs(currLightness - l);
-
-      return deltaPrev < deltaCurr ? prev : curr;
-    })
-  };
-
-  return paletteFamily;
-}
-
-export function getColorPaletteFamily(color: string, colorName: string) {
-  if (!isValidColor(color)) {
-    throw new Error('Invalid color, please check color value!');
-  }
-
-  const { h: h1, s: s1 } = getHsl(color);
-
-  const { nearestLightnessPalette, palettes } = getNearestColorPaletteFamily(
-    color,
-    defaultPalettes as ColorPaletteFamily[]
-  );
-
-  const { number, hexcode } = nearestLightnessPalette;
-
-  const { h: h2, s: s2 } = getHsl(hexcode);
-
-  const deltaH = h1 - h2 || h2;
-
-  const sRatio = s1 / s2;
-
-  const colorPaletteFamily: ColorPaletteFamily = {
-    key: colorName,
-    palettes: palettes.map(palette => {
-      let hexValue = color;
-
-      const isSame = number === palette.number;
-
-      if (!isSame) {
-        const { h: h3, s: s3, l } = getHsl(palette.hexcode);
-
-        const newH = deltaH < 0 ? h3 + deltaH : deltaH;
-        const newS = s3 * sRatio;
-
-        hexValue = transformHslToHex({
-          h: newH,
-          s: newS,
-          l
-        });
-      }
-
-      return {
-        hexcode: hexValue,
-        number: palette.number,
-        name: getColorName(hexValue)
-      };
-    })
-  };
-
-  return colorPaletteFamily;
-}

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

@@ -0,0 +1,152 @@
+import { getColorName, getDeltaE, getHsl, isValidColor, transformHslToHex } from '../shared';
+import { colorPalettes } from '../constant';
+import type {
+  ColorPalette,
+  ColorPaletteFamily,
+  ColorPaletteFamilyWithNearestPalette,
+  ColorPaletteMatch,
+  ColorPaletteNumber
+} from '../types';
+
+/**
+ * get color palette by provided color and color name
+ *
+ * @param color the provided color
+ */
+export function getColorPalette(color: string) {
+  const colorPaletteFamily = getColorPaletteFamily(color);
+
+  const colorMap = new Map<ColorPaletteNumber, ColorPalette>();
+
+  colorPaletteFamily.palettes.forEach(palette => {
+    colorMap.set(palette.number, palette);
+  });
+
+  const mainColor = colorMap.get(500)!;
+  const matchColor = colorPaletteFamily.palettes.find(palette => palette.hex === color)!;
+
+  const colorPalette: ColorPaletteMatch = {
+    ...colorPaletteFamily,
+    colorMap,
+    main: mainColor,
+    match: matchColor
+  };
+
+  return colorPalette;
+}
+
+/**
+ * get color by number
+ *
+ * @param color the provided color
+ * @param number the color palette number
+ */
+export function getColorByPaletteNumber(color: string, number: ColorPaletteNumber) {
+  const colorPalette = getColorPalette(color);
+
+  const { hex } = colorPalette.colorMap.get(number)!;
+
+  return hex;
+}
+
+/**
+ * get color palette family by provided color and color name
+ *
+ * @param color the provided color
+ */
+export function getColorPaletteFamily(color: string) {
+  if (!isValidColor(color)) {
+    throw new Error('Invalid color, please check color value!');
+  }
+
+  let colorName = getColorName(color);
+
+  colorName = colorName.toLowerCase().replace(/\s/g, '-');
+
+  const { h: h1, s: s1 } = getHsl(color);
+
+  const { nearestLightnessPalette, palettes } = getNearestColorPaletteFamily(color, colorPalettes);
+
+  const { number, hex } = nearestLightnessPalette;
+
+  const { h: h2, s: s2 } = getHsl(hex);
+
+  const deltaH = h1 - h2;
+
+  const sRatio = s1 / s2;
+
+  const colorPaletteFamily: ColorPaletteFamily = {
+    name: colorName,
+    palettes: palettes.map(palette => {
+      let hexValue = color;
+
+      const isSame = number === palette.number;
+
+      if (!isSame) {
+        const { h: h3, s: s3, l } = getHsl(palette.hex);
+
+        const newH = deltaH < 0 ? h3 + deltaH : h3 - deltaH;
+        const newS = s3 * sRatio;
+
+        hexValue = transformHslToHex({
+          h: newH,
+          s: newS,
+          l
+        });
+      }
+
+      return {
+        hex: hexValue,
+        number: palette.number
+      };
+    })
+  };
+
+  return colorPaletteFamily;
+}
+
+/**
+ * get nearest color palette family
+ *
+ * @param color color
+ * @param families color palette families
+ */
+function getNearestColorPaletteFamily(color: string, families: ColorPaletteFamily[]) {
+  const familyWithConfig = families.map(family => {
+    const palettes = family.palettes.map(palette => {
+      return {
+        ...palette,
+        delta: getDeltaE(color, palette.hex)
+      };
+    });
+
+    const nearestPalette = palettes.reduce((prev, curr) => (prev.delta < curr.delta ? prev : curr));
+
+    return {
+      ...family,
+      palettes,
+      nearestPalette
+    };
+  });
+
+  const nearestPaletteFamily = familyWithConfig.reduce((prev, curr) =>
+    prev.nearestPalette.delta < curr.nearestPalette.delta ? prev : curr
+  );
+
+  const { l } = getHsl(color);
+
+  const paletteFamily: ColorPaletteFamilyWithNearestPalette = {
+    ...nearestPaletteFamily,
+    nearestLightnessPalette: nearestPaletteFamily.palettes.reduce((prev, curr) => {
+      const { l: prevLightness } = getHsl(prev.hex);
+      const { l: currLightness } = getHsl(curr.hex);
+
+      const deltaPrev = Math.abs(prevLightness - l);
+      const deltaCurr = Math.abs(currLightness - l);
+
+      return deltaPrev < deltaCurr ? prev : curr;
+    })
+  };
+
+  return paletteFamily;
+}

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

@@ -0,0 +1,2 @@
+export * from './colord';
+export * from './name';

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

@@ -1,6 +1,11 @@
-import { getHex, getHsl, getRgb } from './color';
-import colorNames from './json/color-name.json';
+import { colorNames } from '../constant';
+import { getHex, getHsl, getRgb } from './colord';
 
+/**
+ * Get color name
+ *
+ * @param color
+ */
 export function getColorName(color: string) {
   const hex = getHex(color);
   const rgb = getRgb(color);
@@ -17,15 +22,13 @@ export function getColorName(color: string) {
   colorNames.some((item, index) => {
     const [hexValue, colorName] = item;
 
-    const hexcode = `#${hexValue}`;
-
-    const match = hex === hexcode;
+    const match = hex === hexValue;
 
     if (match) {
       name = colorName;
     } else {
-      const { r, g, b } = getRgb(hexcode);
-      const { h, s, l } = getHsl(hexcode);
+      const { r, g, b } = getRgb(hexValue);
+      const { h, s, l } = getHsl(hexValue);
 
       ndf1 = (rgb.r - r) ** 2 + (rgb.g - g) ** 2 + (rgb.b - b) ** 2;
       ndf2 = (hsl.h - h) ** 2 + (hsl.s - s) ** 2 + (hsl.l - l) ** 2;
@@ -40,7 +43,7 @@ export function getColorName(color: string) {
     return match;
   });
 
-  name = cl < 0 ? 'Invalid Color' : colorNames[cl][1];
+  name = colorNames[cl][1];
 
   return name;
 }

packages/color-palette/src/type.ts

@@ -1,49 +0,0 @@
-/** The color palette number */
-export type ColorPaletteNumber = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
-
-/** The color palette item */
-export type ColorPaletteItem = {
-  /** The color hexcode */
-  hexcode: string;
-  /**
-   * The color number
-   *
-   * @link {@link ColorPaletteNumber}
-   */
-  number: ColorPaletteNumber;
-  /** The color name */
-  name: string;
-};
-
-export type ColorPaletteFamily = {
-  /** The color palette family key */
-  key: string;
-  /** The color palette family's palettes */
-  palettes: ColorPaletteItem[];
-};
-
-export type ColorPaletteWithDelta = ColorPaletteItem & {
-  delta: number;
-};
-
-export type ColorPaletteItemWithName = ColorPaletteItem & {
-  name: string;
-};
-
-export type ColorPaletteFamilyWithNearestPalette = ColorPaletteFamily & {
-  nearestPalette: ColorPaletteWithDelta;
-  nearestLightnessPalette: ColorPaletteWithDelta;
-};
-
-export type ColorPalette = ColorPaletteFamily & {
-  /** The color map of the palette */
-  colorMap: Map<ColorPaletteNumber, ColorPaletteItem>;
-  /**
-   * The main color of the palette
-   *
-   * Which number is 500
-   */
-  main: ColorPaletteItemWithName;
-  /** The match color of the palette */
-  match: ColorPaletteItemWithName;
-};

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

@@ -0,0 +1,47 @@
+/** the color palette number */
+export type ColorPaletteNumber = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+
+/** the color palette */
+export type ColorPalette = {
+  /** the color hex value */
+  hex: string;
+  /**
+   * the color number
+   *
+   * - 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
+   */
+  number: ColorPaletteNumber;
+};
+
+/** the color palette family */
+export type ColorPaletteFamily = {
+  /** the color palette family name */
+  name: string;
+  /** the color palettes */
+  palettes: ColorPalette[];
+};
+
+/** the color palette with delta */
+export type ColorPaletteWithDelta = ColorPalette & {
+  delta: number;
+};
+
+/** the color palette family with nearest palette */
+export type ColorPaletteFamilyWithNearestPalette = ColorPaletteFamily & {
+  nearestPalette: ColorPaletteWithDelta;
+  nearestLightnessPalette: ColorPaletteWithDelta;
+};
+
+/** the color palette match */
+export type ColorPaletteMatch = ColorPaletteFamily & {
+  /** the color map of the palette */
+  colorMap: Map<ColorPaletteNumber, ColorPalette>;
+  /**
+   * the main color of the palette
+   *
+   * which number is 500
+   */
+  main: ColorPalette;
+  /** the match color of the palette */
+  match: ColorPalette;
+};

packages/hooks/package.json

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

packages/materials/package.json

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

packages/materials/src/libs/admin-layout/index.vue

@@ -203,7 +203,7 @@ function handleClickMask() {
       <!-- Main Content -->
       <main
         :id="isContentScroll ? scrollElId : undefined"
-        class="flex flex-grow flex-col"
+        class="flex flex-col flex-grow"
         :class="[commonClass, contentClass, leftGapClass, { 'overflow-y-auto': isContentScroll }]"
       >
         <slot></slot>

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

@@ -25,31 +25,6 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
-type SlotFn = (props?: Record<string, unknown>) => any;
-
-type Slots = {
-  /**
-   * Slot
-   *
-   * The center content of the tab
-   */
-  default?: SlotFn;
-  /**
-   * Slot
-   *
-   * The left content of the tab
-   */
-  prefix?: SlotFn;
-  /**
-   * Slot
-   *
-   * The right content of the tab
-   */
-  suffix?: SlotFn;
-};
-
-defineSlots<Slots>();
-
 const activeTabComponent = computed(() => {
   const { mode, chromeClass, buttonClass } = props;
 
@@ -88,7 +63,7 @@ function handleClose() {
     <slot></slot>
     <template #suffix>
       <slot name="suffix">
-        <SvgClose v-if="closable" :class="[style['svg-close']]" @click="handleClose" />
+        <SvgClose v-if="closable" :class="[style['svg-close']]" @click.stop="handleClose" />
       </slot>
     </template>
   </component>

packages/materials/src/libs/page-tab/svg-close.vue

@@ -2,23 +2,10 @@
 defineOptions({
   name: 'SvgClose'
 });
-
-const emit = defineEmits<Emits>();
-
-interface Emits {
-  (e: 'click'): void;
-}
-
-function handleClick() {
-  emit('click');
-}
 </script>
 
 <template>
-  <div
-    class=":soy: relative h-16px w-16px inline-flex items-center justify-center rd-50% text-14px"
-    @click.stop="handleClick"
-  >
+  <div class=":soy: relative h-16px w-16px inline-flex items-center justify-center rd-50% text-14px">
     <svg width="1em" height="1em" viewBox="0 0 1024 1024">
       <path
         fill="currentColor"

packages/ofetch/package.json

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

packages/scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/scripts",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "bin": {
     "sa": "./bin.ts"
   },
@@ -13,7 +13,7 @@
     }
   },
   "devDependencies": {
-    "@soybeanjs/changelog": "0.3.15",
+    "@soybeanjs/changelog": "0.3.22",
     "bumpp": "9.4.0",
     "c12": "1.10.0",
     "cac": "6.7.14",

packages/uno-preset/package.json

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

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/utils",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "exports": {
     ".": "./src/index.ts"
   },
@@ -13,7 +13,7 @@
     "colord": "2.9.3",
     "crypto-js": "4.2.0",
     "localforage": "1.10.0",
-    "nanoid": "5.0.6"
+    "nanoid": "5.0.7"
   },
   "devDependencies": {
     "@types/crypto-js": "4.2.2"

src-tauri/.gitignore

@@ -1,3 +0,0 @@
-# Generated by Cargo
-# will have compiled files and executables
-/target/

src-tauri/Cargo.toml

@@ -1,26 +0,0 @@
-[package]
-name = "app"
-version = "0.1.0"
-description = "A Tauri App"
-authors = ["you"]
-license = ""
-repository = ""
-default-run = "app"
-edition = "2021"
-rust-version = "1.60"
-
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
-[build-dependencies]
-tauri-build = { version = "1.5.1", features = [] }
-
-[dependencies]
-serde_json = "1.0"
-serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.6.1", features = [] }
-
-[features]
-# this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.
-# If you use cargo directly instead of tauri's cli you can use this feature flag to switch between tauri's `dev` and `build` modes.
-# DO NOT REMOVE!!
-custom-protocol = [ "tauri/custom-protocol" ]

src-tauri/build.rs

@@ -1,3 +0,0 @@
-fn main() {
-  tauri_build::build()
-}

src-tauri/src/main.rs

@@ -1,8 +0,0 @@
-// Prevents additional console window on Windows in release, DO NOT REMOVE!!
-#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
-
-fn main() {
-  tauri::Builder::default()
-    .run(tauri::generate_context!())
-    .expect("error while running tauri application");
-}

src-tauri/tauri.conf.json

@@ -1,60 +0,0 @@
-{
-  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
-  "build": {
-    "beforeBuildCommand": "npm run build",
-    "beforeDevCommand": "npm run dev",
-    "devPath": "http://localhost:9527",
-    "distDir": "../dist"
-  },
-  "package": {
-    "productName": "soybean-admin",
-    "version": "1.0.0"
-  },
-  "tauri": {
-    "allowlist": {
-      "all": false
-    },
-    "bundle": {
-      "active": true,
-      "category": "DeveloperTool",
-      "copyright": "",
-      "deb": {
-        "depends": []
-      },
-      "externalBin": [],
-      "icon": ["icons/32x32.png", "icons/128x128.png", "icons/128x128@2x.png", "icons/icon.icns", "icons/icon.ico"],
-      "identifier": "cn.soybeanjs.admin",
-      "longDescription": "",
-      "macOS": {
-        "entitlements": null,
-        "exceptionDomain": "",
-        "frameworks": [],
-        "providerShortName": null,
-        "signingIdentity": null
-      },
-      "resources": [],
-      "shortDescription": "",
-      "targets": "all",
-      "windows": {
-        "certificateThumbprint": null,
-        "digestAlgorithm": "sha256",
-        "timestampUrl": ""
-      }
-    },
-    "security": {
-      "csp": null
-    },
-    "updater": {
-      "active": false
-    },
-    "windows": [
-      {
-        "fullscreen": false,
-        "height": 768,
-        "resizable": true,
-        "title": "SoybeanAdmin",
-        "width": 1366
-      }
-    ]
-  }
-}

src/components/custom/svg-icon.vue

@@ -2,7 +2,7 @@
 import { computed, useAttrs } from 'vue';
 import { Icon } from '@iconify/vue';
 
-defineOptions({ name: 'SvgIcon' });
+defineOptions({ name: 'SvgIcon', inheritAttrs: false });
 
 /**
  * Props

src/hooks/common/router.ts

@@ -92,7 +92,6 @@ export function useRouterPush(inSetup = true) {
   }
 
   return {
-    route,
     routerPush,
     routerBack,
     routerPushByKey,

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
@@ -19,12 +20,14 @@ withDefaults(defineProps<Props>(), {
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
+
+const transitionName = computed(() => (themeStore.page.animate ? themeStore.page.animateMode : ''));
 </script>
 
 <template>
   <RouterView v-slot="{ Component, route }">
     <Transition
-      :name="themeStore.page.animateMode"
+      :name="transitionName"
       mode="out-in"
       @before-leave="appStore.setContentXScrollable(true)"
       @after-enter="appStore.setContentXScrollable(false)"

src/store/modules/app/index.ts

@@ -35,11 +35,11 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
   async function reloadPage(duration = 300) {
     setReloadFlag(false);
 
-    if (duration > 0) {
-      await new Promise(resolve => {
-        setTimeout(resolve, duration);
-      });
-    }
+    const d = themeStore.page.animate ? duration : 40;
+
+    await new Promise(resolve => {
+      setTimeout(resolve, d);
+    });
 
     setReloadFlag(true);
   }

src/store/modules/auth/index.ts

@@ -1,4 +1,5 @@
 import { computed, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useLoading } from '@sa/hooks';
 import { SetupStoreId } from '@/enum';
@@ -10,8 +11,9 @@ import { useRouteStore } from '../route';
 import { clearAuthStorage, getToken, getUserInfo } from './shared';
 
 export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
+  const route = useRoute();
   const routeStore = useRouteStore();
-  const { route, toLogin, redirectFromLogin } = useRouterPush(false);
+  const { toLogin, redirectFromLogin } = useRouterPush(false);
   const { loading: loginLoading, startLoading, endLoading } = useLoading();
 
   const token = ref(getToken());
@@ -36,7 +38,7 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
 
     authStore.$reset();
 
-    if (!route.value.meta.constant) {
+    if (!route.meta.constant) {
       await toLogin();
     }
 

src/store/modules/route/index.ts

@@ -52,6 +52,19 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     routeHome.value = routeKey;
   }
 
+  /** constant routes */
+  const constantRoutes = shallowRef<ElegantConstRoute[]>([]);
+
+  function addConstantRoutes(routes: ElegantConstRoute[]) {
+    const constantRoutesMap = new Map(constantRoutes.value.map(route => [route.name, route]));
+
+    routes.forEach(route => {
+      constantRoutesMap.set(route.name, route);
+    });
+
+    constantRoutes.value = Array.from(constantRoutesMap.values());
+  }
+
   /** auth routes */
   const authRoutes = shallowRef<ElegantConstRoute[]>([]);
 
@@ -167,18 +180,18 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     if (isInitConstantRoute.value) return;
 
     if (authRouteMode.value === 'static') {
-      const { constantRoutes } = createStaticRoutes();
+      const staticRoute = createStaticRoutes();
 
-      addAuthRoutes(constantRoutes);
+      addConstantRoutes(staticRoute.constantRoutes);
     } else {
       const { data, error } = await fetchGetConstantRoutes();
 
       if (!error) {
-        addAuthRoutes(data);
+        addConstantRoutes(data);
       }
     }
 
-    handleAuthRoutes();
+    handleConstantAndAuthRoutes();
 
     setIsInitConstantRoute(true);
   }
@@ -206,7 +219,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
       addAuthRoutes(filteredAuthRoutes);
     }
 
-    handleAuthRoutes();
+    handleConstantAndAuthRoutes();
 
     setIsInitAuthRoute(true);
   }
@@ -220,7 +233,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
 
       addAuthRoutes(routes);
 
-      handleAuthRoutes();
+      handleConstantAndAuthRoutes();
 
       setRouteHome(home);
 
@@ -230,9 +243,11 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     }
   }
 
-  /** handle auth routes */
-  function handleAuthRoutes() {
-    const sortRoutes = sortRoutesByOrder(authRoutes.value);
+  /** handle constant and auth routes */
+  function handleConstantAndAuthRoutes() {
+    const allRoutes = [...constantRoutes.value, ...authRoutes.value];
+
+    const sortRoutes = sortRoutesByOrder(allRoutes);
 
     const vueRoutes = getAuthVueRoutes(sortRoutes);
 

src/store/modules/theme/index.ts

@@ -2,6 +2,7 @@ import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
 import type { Ref } from 'vue';
 import { defineStore } from 'pinia';
 import { useEventListener, usePreferredColorScheme } from '@vueuse/core';
+import { getColorPalette } from '@sa/color-palette';
 import { SetupStoreId } from '@/enum';
 import { localStg } from '@/utils/storage';
 import { addThemeVarsToHtml, createThemeToken, getNaiveTheme, initThemeSettings, toggleCssDarkMode } from './shared';
@@ -79,10 +80,13 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    * @param color Theme color
    */
   function updateThemeColors(key: App.Theme.ThemeColorKey, color: string) {
+    // 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 = color;
+      settings.value.themeColor = main.hex;
     } else {
-      settings.value.otherColor[key] = color;
+      settings.value.otherColor[key] = main.hex;
     }
   }
 

src/store/modules/theme/shared.ts

@@ -1,5 +1,5 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
-import { getColorByColorPaletteNumber, getColorPalette } from '@sa/color-palette';
+import { getColorByPaletteNumber, getColorPalette } from '@sa/color-palette';
 import { addColorAlpha, getRgbOfColor } from '@sa/utils';
 import { overrideThemeSettings, themeSettings } from '@/theme/settings';
 import { themeVars } from '@/theme/vars';
@@ -81,12 +81,12 @@ function createThemePaletteColors(colors: App.Theme.ThemeColor) {
   const colorPaletteVar = {} as App.Theme.ThemePaletteColor;
 
   colorKeys.forEach(key => {
-    const { palettes, main } = getColorPalette(colors[key], key);
+    const { palettes, main } = getColorPalette(colors[key]);
 
-    colorPaletteVar[key] = main.hexcode;
+    colorPaletteVar[key] = main.hex;
 
     palettes.forEach(item => {
-      colorPaletteVar[`${key}-${item.number}`] = item.hexcode;
+      colorPaletteVar[`${key}-${item.number}`] = item.hex;
     });
   });
 
@@ -150,7 +150,11 @@ export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.
     }
   `;
 
-  const style = document.createElement('style');
+  const styleId = 'theme-vars';
+
+  const style = document.querySelector(`#${styleId}`) || document.createElement('style');
+
+  style.id = styleId;
 
   style.textContent = css + darkCss;
 
@@ -195,8 +199,8 @@ function getNaiveThemeColors(colors: App.Theme.ThemeColor) {
   const colorActions: NaiveColorAction[] = [
     { scene: '', handler: color => color },
     { scene: 'Suppl', handler: color => color },
-    { scene: 'Hover', handler: color => getColorByColorPaletteNumber(color, 500) },
-    { scene: 'Pressed', handler: color => getColorByColorPaletteNumber(color, 700) },
+    { scene: 'Hover', handler: color => getColorByPaletteNumber(color, 500) },
+    { scene: 'Pressed', handler: color => getColorByPaletteNumber(color, 700) },
     { scene: 'Active', handler: color => addColorAlpha(color, 0.1) }
   ];
 
@@ -230,6 +234,9 @@ export function getNaiveTheme(colors: App.Theme.ThemeColor) {
     },
     LoadingBar: {
       colorLoading
+    },
+    Tag: {
+      borderRadius: '6px'
     }
   };
 

src/typings/naive-ui.d.ts

@@ -41,7 +41,7 @@ declare namespace NaiveUI {
   type GetTableData<A extends TableApiFn> = A extends TableApiFn<infer T> ? T : never;
 
   type NaiveTableConfig<A extends TableApiFn> = Pick<
-    import('@sa/hooks').TableConfig<A, GetTableData<A>, TableColumn<NaiveUI.TableDataWithIndex<GetTableData<A>>>>,
+    import('@sa/hooks').TableConfig<A, GetTableData<A>, TableColumn<TableDataWithIndex<GetTableData<A>>>>,
     'apiFn' | 'apiParams' | 'columns' | 'immediate'
   >;
 }

src/typings/union-key.d.ts

@@ -27,8 +27,8 @@ declare namespace UnionKey {
   /**
    * The scroll mode when content overflow
    *
-   * - Wrapper the wrapper component's root element overflow
-   * - Content the content component overflow
+   * - wrapper: the wrapper component's root element overflow
+   * - content: the content component overflow
    */
   type ThemeScrollMode = import('@sa/materials').LayoutScrollMode;
 

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

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
 import { useLoading } from '@sa/hooks';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useAuthStore } from '@/store/modules/auth';
+import { useTabStore } from '@/store/modules/tab';
 import { useAuth } from '@/hooks/business/auth';
 
+const route = useRoute();
 const appStore = useAppStore();
 const authStore = useAuthStore();
+const tabStore = useTabStore();
 const { hasAuth } = useAuth();
 const { loading, startLoading, endLoading } = useLoading();
 
@@ -48,6 +52,7 @@ async function handleToggleAccount(account: Account) {
 
   startLoading();
   await authStore.login(account.userName, account.password, false);
+  tabStore.initTabStore(route);
   endLoading();
   appStore.reloadPage();
 }

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

@@ -84,11 +84,13 @@ function createDefaultModel(): Model {
   };
 }
 
-type RuleKey = Extract<keyof Model, 'userName' | 'userStatus'>;
+type RuleKey = Extract<keyof Model, 'menuName' | 'status' | 'routeName' | 'routePath'>;
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
-  userName: defaultRequiredRule,
-  userStatus: defaultRequiredRule
+  menuName: defaultRequiredRule,
+  status: defaultRequiredRule,
+  routeName: defaultRequiredRule,
+  routePath: defaultRequiredRule
 };
 
 const disabledMenuType = computed(() => props.operateType === 'edit');

tsconfig.json

@@ -15,7 +15,7 @@
     "types": ["vite/client", "node", "unplugin-icons/types/vue", "naive-ui/volar"],
     "strict": true,
     "strictNullChecks": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,