chore(projects): release v1.1.0-beta.2

feat(projects): useTable adds expand to display

.env

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

CHANGELOG.md

@@ -1,6 +1,70 @@
 # Changelog
 
 
+## [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)
+
+###    🚀 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
@@ -137,7 +201,7 @@
 
 ### &nbsp;&nbsp;&nbsp;💅 Refactors
 
-- **hooks**: refactor @sa/color-palette &nbsp;-&nbsp; by @honghuangdc [<samp>(93191)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9319173)
+- **hooks**: refactor @sa/color &nbsp;-&nbsp; by @honghuangdc [<samp>(93191)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9319173)
 
 ### &nbsp;&nbsp;&nbsp;📖 Documentation
 

CHANGELOG.zh_CN.md

@@ -0,0 +1,41 @@
+# 更新日志
+
+
+## [v1.1.0-beta.1](https://github.com/soybeanjs/soybean-admin/compare/v1.0.9...v1.1.0-beta.1) (2024-05-07)
+
+###    🚀 功能
+
+- **项目**:
+  - 支持灰度。修复了 #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)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "soybean-admin",
   "type": "module",
-  "version": "1.0.9",
+  "version": "1.1.0-beta.2",
   "description": "A fresh and elegant admin template, based on Vue3、Vite3、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite3、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
   "author": {
     "name": "Soybean",
@@ -49,7 +49,7 @@
     "@better-scroll/core": "2.5.1",
     "@iconify/vue": "4.1.2",
     "@sa/axios": "workspace:*",
-    "@sa/color-palette": "workspace:*",
+    "@sa/color": "workspace:*",
     "@sa/hooks": "workspace:*",
     "@sa/materials": "workspace:*",
     "@sa/utils": "workspace:*",
@@ -68,12 +68,12 @@
   },
   "devDependencies": {
     "@elegant-router/vue": "0.3.6",
-    "@iconify/json": "2.2.206",
+    "@iconify/json": "2.2.207",
     "@sa/scripts": "workspace:*",
     "@sa/uno-preset": "workspace:*",
     "@soybeanjs/eslint-config": "1.3.4",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "20.12.8",
+    "@types/node": "20.12.10",
     "@types/nprogress": "0.2.3",
     "@unocss/eslint-config": "0.59.4",
     "@unocss/preset-icons": "0.59.4",
@@ -88,7 +88,7 @@
     "lint-staged": "15.2.2",
     "sass": "1.76.0",
     "simple-git-hooks": "2.11.1",
-    "tsx": "4.9.1",
+    "tsx": "4.9.3",
     "typescript": "5.4.5",
     "unplugin-icons": "0.19.0",
     "unplugin-vue-components": "0.27.0",

packages/axios/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/axios",
-  "version": "1.0.9",
+  "version": "1.1.0-beta.2",
   "exports": {
     ".": "./src/index.ts"
   },

packages/color-palette/src/index.ts

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

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

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

packages/color/package.json

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

packages/color/src/index.ts

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

packages/color/src/palette/antd.ts

@@ -1,74 +1,6 @@
-import { colord, extend } from 'colord';
+import type { AnyColor, HsvColor } from 'colord';
-import namesPlugin from 'colord/plugins/names';
+import { getHex, getHsv, isValidColor, mixColor } from '../shared';
-import mixPlugin from 'colord/plugins/mix';
+import type { ColorIndex } from '../types';
-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;
@@ -86,32 +18,23 @@ const lightColorCount = 5;
 const darkColorCount = 4;
 
 /**
- * The color index of color palette
+ * Get AntD palette color by index
- *
- * 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 getColorPalette(color: AnyColor, index: ColorIndex): string {
+export function getAntDPaletteColorByIndex(color: AnyColor, index: ColorIndex): string {
-  const transformColor = colord(color);
+  if (!isValidColor(color)) {
-
-  if (!transformColor.isValid()) {
     throw new Error('invalid input color value');
   }
 
   if (index === 6) {
-    return colord(transformColor).toHex();
+    return getHex(color);
   }
 
   const isLight = index < 6;
-  const hsv = transformColor.toHsv();
+  const hsv = getHsv(color);
   const i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
 
   const newHsv: HsvColor = {
@@ -120,7 +43,7 @@ export function getColorPalette(color: AnyColor, index: ColorIndex): string {
     v: getValue(hsv, i, isLight)
   };
 
-  return colord(newHsv).toHex();
+  return getHex(newHsv);
 }
 
 /** Map of dark color index and opacity */
@@ -131,32 +54,33 @@ const darkColorMap = [
   { index: 5, opacity: 0.45 },
   { index: 5, opacity: 0.65 },
   { index: 5, opacity: 0.85 },
-  { index: 4, opacity: 0.9 },
+  { index: 5, opacity: 0.9 },
+  { index: 4, opacity: 0.93 },
   { index: 3, opacity: 0.95 },
   { index: 2, opacity: 0.97 },
   { index: 1, opacity: 0.98 }
 ];
 
 /**
- * Get color palettes
+ * Get AntD color palette
  *
  * @param color - Color
  * @param darkTheme - Dark theme
  * @param darkThemeMixColor - Dark theme mix color (default: #141414)
  */
-export function getColorPalettes(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] {
+export function getAntDColorPalette(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] {
-  const indexes: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  const indexes: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 
-  const patterns = indexes.map(index => getColorPalette(color, index));
+  const patterns = indexes.map(index => getAntDPaletteColorByIndex(color, index));
 
   if (darkTheme) {
     const darkPatterns = darkColorMap.map(({ index, opacity }) => {
-      const darkColor = colord(darkThemeMixColor).mix(patterns[index], opacity);
+      const darkColor = mixColor(darkThemeMixColor, patterns[index], opacity);
 
       return darkColor;
     });
 
-    return darkPatterns.map(item => colord(item).toHex());
+    return darkPatterns.map(item => getHex(item));
   }
 
   return patterns;

packages/color/src/palette/index.ts

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

packages/color/src/palette/recommend.ts

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

packages/color/src/shared/colord.ts

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

packages/color/src/types/index.ts

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

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/hooks",
-  "version": "1.0.9",
+  "version": "1.1.0-beta.2",
   "exports": {
     ".": "./src/index.ts"
   },

packages/hooks/src/use-table.ts

@@ -57,6 +57,12 @@ export type TableConfig<A extends ApiFn, T, C> = {
    * @default true
    */
   immediate?: boolean;
+  /**
+   * whether to display the total items count
+   *
+   * @default false
+   */
+  showTotal?: boolean;
 };
 
 export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<A, T, C>) {

packages/materials/package.json

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

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

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

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

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

packages/ofetch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/fetch",
-  "version": "1.0.9",
+  "version": "1.1.0-beta.2",
   "exports": {
     ".": "./src/index.ts"
   },

packages/scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/scripts",
-  "version": "1.0.9",
+  "version": "1.1.0-beta.2",
   "bin": {
     "sa": "./bin.ts"
   },

packages/uno-preset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/uno-preset",
-  "version": "1.0.9",
+  "version": "1.1.0-beta.2",
   "exports": {
     ".": "./src/index.ts"
   },

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/utils",
-  "version": "1.0.9",
+  "version": "1.1.0-beta.2",
   "exports": {
     ".": "./src/index.ts"
   },

packages/utils/src/index.ts

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

packages/utils/tsconfig.json

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

pnpm-lock.yaml

@@ -17,9 +17,9 @@ importers:
       '@sa/axios':
         specifier: workspace:*
         version: link:packages/axios
-      '@sa/color-palette':
+      '@sa/color':
         specifier: workspace:*
-        version: link:packages/color-palette
+        version: link:packages/color
       '@sa/hooks':
         specifier: workspace:*
         version: link:packages/hooks
@@ -70,8 +70,8 @@ importers:
         specifier: 0.3.6
         version: 0.3.6
       '@iconify/json':
-        specifier: 2.2.206
+        specifier: 2.2.207
-        version: 2.2.206
+        version: 2.2.207
       '@sa/scripts':
         specifier: workspace:*
         version: link:packages/scripts
@@ -85,8 +85,8 @@ importers:
         specifier: 4.17.12
         version: 4.17.12
       '@types/node':
-        specifier: 20.12.8
+        specifier: 20.12.10
-        version: 20.12.8
+        version: 20.12.10
       '@types/nprogress':
         specifier: 0.2.3
         version: 0.2.3
@@ -107,13 +107,13 @@ importers:
         version: 0.59.4
       '@unocss/vite':
         specifier: 0.59.4
-        version: 0.59.4(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))
+        version: 0.59.4(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))
       '@vitejs/plugin-vue':
         specifier: 5.0.4
-        version: 5.0.4(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))
+        version: 5.0.4(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))
       '@vitejs/plugin-vue-jsx':
         specifier: 3.1.0
-        version: 3.1.0(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))
+        version: 3.1.0(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))
       eslint:
         specifier: 9.2.0
         version: 9.2.0
@@ -130,8 +130,8 @@ importers:
         specifier: 2.11.1
         version: 2.11.1
       tsx:
-        specifier: 4.9.1
+        specifier: 4.9.3
-        version: 4.9.1
+        version: 4.9.3
       typescript:
         specifier: 5.4.5
         version: 5.4.5
@@ -143,16 +143,16 @@ importers:
         version: 0.27.0(@babel/parser@7.24.5)(rollup@4.17.2)(vue@3.4.26(typescript@5.4.5))
       vite:
         specifier: 5.2.11
-        version: 5.2.11(@types/node@20.12.8)(sass@1.76.0)
+        version: 5.2.11(@types/node@20.12.10)(sass@1.76.0)
       vite-plugin-progress:
         specifier: 0.0.7
-        version: 0.0.7(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))
+        version: 0.0.7(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))
       vite-plugin-svg-icons:
         specifier: 2.0.1
-        version: 2.0.1(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))
+        version: 2.0.1(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))
       vite-plugin-vue-devtools:
         specifier: 7.1.3
-        version: 7.1.3(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))
+        version: 7.1.3(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))
       vue-eslint-parser:
         specifier: 9.4.2
         version: 9.4.2(eslint@9.2.0)
@@ -179,8 +179,11 @@ importers:
         specifier: 6.9.15
         version: 6.9.15
 
-  packages/color-palette:
+  packages/color:
     dependencies:
+      '@sa/utils':
+        specifier: workspace:*
+        version: link:../utils
       colord:
         specifier: 2.9.3
         version: 2.9.3
@@ -197,8 +200,8 @@ importers:
         specifier: workspace:*
         version: link:../utils
       simplebar-vue:
-        specifier: 2.3.3
+        specifier: 2.3.4
-        version: 2.3.3(vue@3.4.26(typescript@5.4.5))
+        version: 2.3.4(vue@3.4.26(typescript@5.4.5))
     devDependencies:
       typed-css-modules:
         specifier: 0.9.1
@@ -461,13 +464,13 @@ packages:
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
     engines: {node: '>=0.1.90'}
 
-  '@css-render/plugin-bem@0.15.12':
+  '@css-render/plugin-bem@0.15.14':
-    resolution: {integrity: sha512-Lq2jSOZn+wYQtsyaFj6QRz2EzAnd3iW5fZeHO1WSXQdVYwvwGX0ZiH3X2JQgtgYLT1yeGtrwrqJdNdMEUD2xTw==}
+    resolution: {integrity: sha512-QK513CJ7yEQxm/P3EwsI+d+ha8kSOcjGvD6SevM41neEMxdULE+18iuQK6tEChAWMOQNQPLG/Rw3Khb69r5neg==}
     peerDependencies:
-      css-render: ~0.15.12
+      css-render: ~0.15.14
 
-  '@css-render/vue3-ssr@0.15.12':
+  '@css-render/vue3-ssr@0.15.14':
-    resolution: {integrity: sha512-AQLGhhaE0F+rwybRCkKUdzBdTEM/5PZBYy+fSYe1T9z9+yxMuV/k7ZRqa4M69X+EI1W8pa4kc9Iq2VjQkZx4rg==}
+    resolution: {integrity: sha512-//8027GSbxE9n3QlD73xFY6z4ZbHbvrOVB7AO6hsmrEzGbg+h2A09HboUyDgu+xsmj7JnvJD39Irt+2D0+iV8g==}
     peerDependencies:
       vue: ^3.0.11
 
@@ -658,8 +661,8 @@ packages:
     resolution: {integrity: sha512-Ttl/jHpxfS3st5sxwICYfk4pOH0WrLI1SpW283GgQL7sCWU7EHIOhX4b4fkIxr3tkfzwg8+FNojtzsIEE7Ecgg==}
     engines: {node: '>=18.18'}
 
-  '@iconify/json@2.2.206':
+  '@iconify/json@2.2.207':
-    resolution: {integrity: sha512-Vbi8BTvbEKZtCQDJDqMRDZenU8HYMHFtMkEx92pvyQN/Il5OfGwCNaR+bf9Sv2TkotnoiyqqickeWpdo0hllGQ==}
+    resolution: {integrity: sha512-3ZsZcJHHCDoSbRKcpvdTk4e5ZnTLD902BjeNysj8NZIB5V9WaTh6L91eHyQgEaCt4j1shmAXrIr6LoImL6+GpA==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -1006,8 +1009,8 @@ packages:
   '@types/node@10.17.60':
     resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==}
 
-  '@types/node@20.12.8':
+  '@types/node@20.12.10':
-    resolution: {integrity: sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==}
+    resolution: {integrity: sha512-Eem5pH9pmWBHoGAT8Dr5fdc5rYA+4NAovdM4EktRPVAAiJhmWWfQrA0cFhAbOsQdSfIHjAud6YdkbL69+zSKjw==}
 
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
@@ -1159,14 +1162,14 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
 
-  '@volar/language-core@2.2.0':
+  '@volar/language-core@2.2.1':
-    resolution: {integrity: sha512-a8WG9+4OdeNDW4ywABZIM6S6UN7em8uIlM/BZ2pWQUYrVmX+m8sj/X+QadvO+Li/t/LjAqbWJQtVgxdpEWLALQ==}
+    resolution: {integrity: sha512-iHJAZKcYldZgyS8gx6DfIZApViVBeqbf6iPhqoZpG5A6F4zsZiFldKfwaKaBA3/wnOTWE2i8VUbXywI1WywCPg==}
 
-  '@volar/source-map@2.2.0':
+  '@volar/source-map@2.2.1':
-    resolution: {integrity: sha512-HQlPRlHOVqCCHK8wI76ZldHkEwKsjp7E6idUc36Ekni+KJDNrqgSqPvyHQixybXPHNU7CI9Uxd9/IkxO7LuNBw==}
+    resolution: {integrity: sha512-w1Bgpguhbp7YTr7VUFu6gb4iAZjeEPsOX4zpgiuvlldbzvIWDWy4t0jVifsIsxZ99HAu+c3swiME7wt+GeNqhA==}
 
-  '@volar/typescript@2.2.0':
+  '@volar/typescript@2.2.1':
-    resolution: {integrity: sha512-wC6l4zLiiCLxF+FGaHCbWlQYf4vMsnRxYhcI6WgvaNppOD6r1g+Ef1RKRJUApALWU46Yy/JDU/TbdV6w/X6Liw==}
+    resolution: {integrity: sha512-Z/tqluR7Hz5/5dCqQp7wo9C/6tSv/IYl+tTzgzUt2NjTq95bKSsuO4E+V06D0c+3aP9x5S9jggLqw451hpnc6Q==}
 
   '@vue/babel-helper-vue-transform-on@1.2.2':
     resolution: {integrity: sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==}
@@ -1501,8 +1504,8 @@ packages:
   can-use-dom@0.1.0:
     resolution: {integrity: sha512-ceOhN1DL7Y4O6M0j9ICgmTYziV89WMd96SvSl0REd8PMgrY0B/WBOPoed5S1KUmJqXgUXh8gzSe6E3ae27upsQ==}
 
-  caniuse-lite@1.0.30001615:
+  caniuse-lite@1.0.30001616:
-    resolution: {integrity: sha512-1IpazM5G3r38meiae0bHRnPhz+CBQ3ZLqbQMtrg+AsTPKAXgW38JNsXkyZ+v8waCsDmPq87lmfun5Q2AGysNEQ==}
+    resolution: {integrity: sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==}
 
   chalk@1.1.3:
     resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
@@ -1690,8 +1693,8 @@ packages:
     resolution: {integrity: sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==}
     engines: {node: '>=12'}
 
-  css-render@0.15.12:
+  css-render@0.15.14:
-    resolution: {integrity: sha512-eWzS66patiGkTTik+ipO9qNGZ+uNuGyTmnz6/+EJIiFg8+3yZRpnMwgFo8YdXhQRsiePzehnusrxVvugNjXzbw==}
+    resolution: {integrity: sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==}
 
   css-select@4.3.0:
     resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
@@ -2307,8 +2310,8 @@ packages:
     resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
     engines: {node: '>= 0.4'}
 
-  get-tsconfig@4.7.3:
+  get-tsconfig@4.7.4:
-    resolution: {integrity: sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==}
+    resolution: {integrity: sha512-ofbkKj+0pjXjhejr007J/fLf+sW+8H7K5GCm+msC8q3IpvgjobpyPqSRFemNyIMxklC0zeJpi7VDFna19FacvQ==}
 
   get-value@2.0.6:
     resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==}
@@ -3918,11 +3921,11 @@ packages:
     resolution: {integrity: sha512-tgqwPUMDcNDhuf1Xf6KTUsyeqGdgKMhzaH4PAZZuzguOgTl5uuyeYe/8mWgAr6IBxB5V06uqEf6Dy37gIWDtDg==}
     hasBin: true
 
-  simplebar-core@1.2.4:
+  simplebar-core@1.2.5:
-    resolution: {integrity: sha512-P+Sqshef4fq3++gQ82TgNYcgl3qZFSCP5jS2/8NMmw18oagXOijMzs1G+vm6RUY3oMvpwH3wGoqh9u6SyDjHfQ==}
+    resolution: {integrity: sha512-33AVCYXS8yavWId0GbE4TG1cYELsYybpCKWHJYuWEY/j6nccgz6zQdJ7nCqOpIGo7HgPPbkSSSIlJhi43fHP6A==}
 
-  simplebar-vue@2.3.3:
+  simplebar-vue@2.3.4:
-    resolution: {integrity: sha512-srx6us5Dk6jTU7+Pk+X1DfUqa2ZGeT/LXJGp3j6VuMyK16h20sxtMk//jYrN5E8BxvfkakOj8HodGH1JQpAE7Q==}
+    resolution: {integrity: sha512-ur00AfvISccO7w9HxhIrnU7hqOUoebzQ5LBla3rrgu89O0C5QhXI08KqlS4E1msfdC+vqn+VfPQ0RJotqh42Mw==}
     peerDependencies:
       vue: '>=2.5.17'
 
@@ -4201,8 +4204,8 @@ packages:
   tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
-  tsx@4.9.1:
+  tsx@4.9.3:
-    resolution: {integrity: sha512-CqSJaYyZ6GEqnGtPuMPQHvUwRGU6VHSVF+RDxoOmRg/XD4aF0pD973tKhoUYGQtdcoCHcSOGk34ioFaP+vYcMQ==}
+    resolution: {integrity: sha512-czVbetlILiyJZI5zGlj2kw9vFiSeyra9liPD4nG+Thh4pKTi0AmMEQ8zdV/L2xbIVKrIqif4sUNrsMAOksx9Zg==}
     engines: {node: '>=18.0.0'}
     hasBin: true
 
@@ -4876,11 +4879,11 @@ snapshots:
   '@colors/colors@1.5.0':
     optional: true
 
-  '@css-render/plugin-bem@0.15.12(css-render@0.15.12)':
+  '@css-render/plugin-bem@0.15.14(css-render@0.15.14)':
     dependencies:
-      css-render: 0.15.12
+      css-render: 0.15.14
 
-  '@css-render/vue3-ssr@0.15.12(vue@3.4.26(typescript@5.4.5))':
+  '@css-render/vue3-ssr@0.15.14(vue@3.4.26(typescript@5.4.5))':
     dependencies:
       vue: 3.4.26(typescript@5.4.5)
 
@@ -5027,7 +5030,7 @@ snapshots:
 
   '@humanwhocodes/retry@0.2.4': {}
 
-  '@iconify/json@2.2.206':
+  '@iconify/json@2.2.207':
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.2
@@ -5359,7 +5362,7 @@ snapshots:
 
   '@types/node@10.17.60': {}
 
-  '@types/node@20.12.8':
+  '@types/node@20.12.10':
     dependencies:
       undici-types: 5.26.5
 
@@ -5377,7 +5380,7 @@ snapshots:
 
   '@types/svgo@2.6.4':
     dependencies:
-      '@types/node': 20.12.8
+      '@types/node': 20.12.10
 
   '@types/unist@3.0.2': {}
 
@@ -5551,7 +5554,7 @@ snapshots:
     dependencies:
       '@unocss/core': 0.59.4
 
-  '@unocss/vite@0.59.4(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))':
+  '@unocss/vite@0.59.4(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
@@ -5563,36 +5566,36 @@ snapshots:
       chokidar: 3.6.0
       fast-glob: 3.3.2
       magic-string: 0.30.10
-      vite: 5.2.11(@types/node@20.12.8)(sass@1.76.0)
+      vite: 5.2.11(@types/node@20.12.10)(sass@1.76.0)
     transitivePeerDependencies:
       - rollup
 
-  '@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))':
+  '@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))':
     dependencies:
       '@babel/core': 7.24.5
       '@babel/plugin-transform-typescript': 7.24.5(@babel/core@7.24.5)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.5)
-      vite: 5.2.11(@types/node@20.12.8)(sass@1.76.0)
+      vite: 5.2.11(@types/node@20.12.10)(sass@1.76.0)
       vue: 3.4.26(typescript@5.4.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.0.4(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))':
+  '@vitejs/plugin-vue@5.0.4(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))':
     dependencies:
-      vite: 5.2.11(@types/node@20.12.8)(sass@1.76.0)
+      vite: 5.2.11(@types/node@20.12.10)(sass@1.76.0)
       vue: 3.4.26(typescript@5.4.5)
 
-  '@volar/language-core@2.2.0':
+  '@volar/language-core@2.2.1':
     dependencies:
-      '@volar/source-map': 2.2.0
+      '@volar/source-map': 2.2.1
 
-  '@volar/source-map@2.2.0':
+  '@volar/source-map@2.2.1':
     dependencies:
       muggle-string: 0.4.1
 
-  '@volar/typescript@2.2.0':
+  '@volar/typescript@2.2.1':
     dependencies:
-      '@volar/language-core': 2.2.0
+      '@volar/language-core': 2.2.1
       path-browserify: 1.0.1
 
   '@vue/babel-helper-vue-transform-on@1.2.2': {}
@@ -5656,14 +5659,14 @@ snapshots:
 
   '@vue/devtools-api@6.6.1': {}
 
-  '@vue/devtools-core@7.1.3(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))':
+  '@vue/devtools-core@7.1.3(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))':
     dependencies:
       '@vue/devtools-kit': 7.1.3(vue@3.4.26(typescript@5.4.5))
       '@vue/devtools-shared': 7.1.3
       mitt: 3.0.1
       nanoid: 3.3.7
       pathe: 1.1.2
-      vite-hot-client: 0.2.3(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))
+      vite-hot-client: 0.2.3(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))
     transitivePeerDependencies:
       - vite
       - vue
@@ -5683,7 +5686,7 @@ snapshots:
 
   '@vue/language-core@2.0.16(typescript@5.4.5)':
     dependencies:
-      '@volar/language-core': 2.2.0
+      '@volar/language-core': 2.2.1
       '@vue/compiler-dom': 3.4.26
       '@vue/shared': 3.4.26
       computeds: 0.0.1
@@ -5931,7 +5934,7 @@ snapshots:
 
   browserslist@4.23.0:
     dependencies:
-      caniuse-lite: 1.0.30001615
+      caniuse-lite: 1.0.30001616
       electron-to-chromium: 1.4.756
       node-releases: 2.0.14
       update-browserslist-db: 1.0.15(browserslist@4.23.0)
@@ -6056,7 +6059,7 @@ snapshots:
 
   can-use-dom@0.1.0: {}
 
-  caniuse-lite@1.0.30001615: {}
+  caniuse-lite@1.0.30001616: {}
 
   chalk@1.1.3:
     dependencies:
@@ -6250,7 +6253,7 @@ snapshots:
     dependencies:
       type-fest: 1.4.0
 
-  css-render@0.15.12:
+  css-render@0.15.14:
     dependencies:
       '@emotion/hash': 0.8.0
       csstype: 3.0.11
@@ -6631,7 +6634,7 @@ snapshots:
       doctrine: 3.0.0
       eslint: 9.2.0
       eslint-import-resolver-node: 0.3.9
-      get-tsconfig: 4.7.3
+      get-tsconfig: 4.7.4
       is-glob: 4.0.3
       minimatch: 9.0.4
       semver: 7.6.0
@@ -6645,7 +6648,7 @@ snapshots:
       enhanced-resolve: 5.16.0
       eslint: 9.2.0
       eslint-plugin-es-x: 7.6.0(eslint@9.2.0)
-      get-tsconfig: 4.7.3
+      get-tsconfig: 4.7.4
       globals: 15.1.0
       ignore: 5.3.1
       minimatch: 9.0.4
@@ -6997,7 +7000,7 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
 
-  get-tsconfig@4.7.3:
+  get-tsconfig@4.7.4:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
@@ -7994,13 +7997,13 @@ snapshots:
 
   naive-ui@2.38.2(vue@3.4.26(typescript@5.4.5)):
     dependencies:
-      '@css-render/plugin-bem': 0.15.12(css-render@0.15.12)
+      '@css-render/plugin-bem': 0.15.14(css-render@0.15.14)
-      '@css-render/vue3-ssr': 0.15.12(vue@3.4.26(typescript@5.4.5))
+      '@css-render/vue3-ssr': 0.15.14(vue@3.4.26(typescript@5.4.5))
       '@types/katex': 0.16.7
       '@types/lodash': 4.17.1
       '@types/lodash-es': 4.17.12
       async-validator: 4.2.5
-      css-render: 0.15.12
+      css-render: 0.15.14
       csstype: 3.1.3
       date-fns: 2.30.0
       date-fns-tz: 2.0.1(date-fns@2.30.0)
@@ -8787,16 +8790,16 @@ snapshots:
 
   simple-git-hooks@2.11.1: {}
 
-  simplebar-core@1.2.4:
+  simplebar-core@1.2.5:
     dependencies:
       '@types/lodash-es': 4.17.12
       can-use-dom: 0.1.0
       lodash: 4.17.21
       lodash-es: 4.17.21
 
-  simplebar-vue@2.3.3(vue@3.4.26(typescript@5.4.5)):
+  simplebar-vue@2.3.4(vue@3.4.26(typescript@5.4.5)):
     dependencies:
-      simplebar-core: 1.2.4
+      simplebar-core: 1.2.5
       vue: 3.4.26(typescript@5.4.5)
       vue-demi: 0.13.11(vue@3.4.26(typescript@5.4.5))
     transitivePeerDependencies:
@@ -9104,10 +9107,10 @@ snapshots:
 
   tslib@2.6.2: {}
 
-  tsx@4.9.1:
+  tsx@4.9.3:
     dependencies:
       esbuild: 0.20.2
-      get-tsconfig: 4.7.3
+      get-tsconfig: 4.7.4
     optionalDependencies:
       fsevents: 2.3.3
 
@@ -9360,11 +9363,11 @@ snapshots:
       evtd: 0.2.4
       vue: 3.4.26(typescript@5.4.5)
 
-  vite-hot-client@0.2.3(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0)):
+  vite-hot-client@0.2.3(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0)):
     dependencies:
-      vite: 5.2.11(@types/node@20.12.8)(sass@1.76.0)
+      vite: 5.2.11(@types/node@20.12.10)(sass@1.76.0)
 
-  vite-plugin-inspect@0.8.4(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0)):
+  vite-plugin-inspect@0.8.4(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0)):
     dependencies:
       '@antfu/utils': 0.7.7
       '@rollup/pluginutils': 5.1.0(rollup@4.17.2)
@@ -9375,19 +9378,19 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.0.0
       sirv: 2.0.4
-      vite: 5.2.11(@types/node@20.12.8)(sass@1.76.0)
+      vite: 5.2.11(@types/node@20.12.10)(sass@1.76.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-progress@0.0.7(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0)):
+  vite-plugin-progress@0.0.7(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0)):
     dependencies:
       picocolors: 1.0.0
       progress: 2.0.3
       rd: 2.0.1
-      vite: 5.2.11(@types/node@20.12.8)(sass@1.76.0)
+      vite: 5.2.11(@types/node@20.12.10)(sass@1.76.0)
 
-  vite-plugin-svg-icons@2.0.1(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0)):
+  vite-plugin-svg-icons@2.0.1(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0)):
     dependencies:
       '@types/svgo': 2.6.4
       cors: 2.8.5
@@ -9397,27 +9400,27 @@ snapshots:
       pathe: 0.2.0
       svg-baker: 1.7.0
       svgo: 2.8.0
-      vite: 5.2.11(@types/node@20.12.8)(sass@1.76.0)
+      vite: 5.2.11(@types/node@20.12.10)(sass@1.76.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-devtools@7.1.3(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5)):
+  vite-plugin-vue-devtools@7.1.3(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5)):
     dependencies:
-      '@vue/devtools-core': 7.1.3(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))
+      '@vue/devtools-core': 7.1.3(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))(vue@3.4.26(typescript@5.4.5))
       '@vue/devtools-kit': 7.1.3(vue@3.4.26(typescript@5.4.5))
       '@vue/devtools-shared': 7.1.3
       execa: 8.0.1
       sirv: 2.0.4
-      vite: 5.2.11(@types/node@20.12.8)(sass@1.76.0)
+      vite: 5.2.11(@types/node@20.12.10)(sass@1.76.0)
-      vite-plugin-inspect: 0.8.4(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))
+      vite-plugin-inspect: 0.8.4(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))
-      vite-plugin-vue-inspector: 5.0.1(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0))
+      vite-plugin-vue-inspector: 5.0.1(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0))
     transitivePeerDependencies:
       - '@nuxt/kit'
       - rollup
       - supports-color
       - vue
 
-  vite-plugin-vue-inspector@5.0.1(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0)):
+  vite-plugin-vue-inspector@5.0.1(vite@5.2.11(@types/node@20.12.10)(sass@1.76.0)):
     dependencies:
       '@babel/core': 7.24.5
       '@babel/plugin-proposal-decorators': 7.24.1(@babel/core@7.24.5)
@@ -9428,17 +9431,17 @@ snapshots:
       '@vue/compiler-dom': 3.4.26
       kolorist: 1.8.0
       magic-string: 0.30.10
-      vite: 5.2.11(@types/node@20.12.8)(sass@1.76.0)
+      vite: 5.2.11(@types/node@20.12.10)(sass@1.76.0)
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.2.11(@types/node@20.12.8)(sass@1.76.0):
+  vite@5.2.11(@types/node@20.12.10)(sass@1.76.0):
     dependencies:
       esbuild: 0.20.2
       postcss: 8.4.38
       rollup: 4.17.2
     optionalDependencies:
-      '@types/node': 20.12.8
+      '@types/node': 20.12.10
       fsevents: 2.3.3
       sass: 1.76.0
 
@@ -9491,7 +9494,7 @@ snapshots:
 
   vue-tsc@2.0.16(typescript@5.4.5):
     dependencies:
-      '@volar/typescript': 2.2.0
+      '@volar/typescript': 2.2.1
       '@vue/language-core': 2.0.16(typescript@5.4.5)
       semver: 7.6.0
       typescript: 5.4.5
@@ -9508,9 +9511,9 @@ snapshots:
 
   vueuc@0.4.58(vue@3.4.26(typescript@5.4.5)):
     dependencies:
-      '@css-render/vue3-ssr': 0.15.12(vue@3.4.26(typescript@5.4.5))
+      '@css-render/vue3-ssr': 0.15.14(vue@3.4.26(typescript@5.4.5))
       '@juggle/resize-observer': 3.4.0
-      css-render: 0.15.12
+      css-render: 0.15.14
       evtd: 0.2.4
       seemly: 0.3.8
       vdirs: 0.1.8(vue@3.4.26(typescript@5.4.5))

src/components/common/menu-toggler.vue

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

src/components/custom/wave-bg.vue

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

src/hooks/common/table.ts

@@ -14,10 +14,14 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
   const scope = effectScope();
   const appStore = useAppStore();
 
-  const { apiFn, apiParams, immediate } = config;
+  const isMobile = computed(() => appStore.isMobile);
+
+  const { apiFn, apiParams, immediate, showTotal } = config;
 
   const SELECTION_KEY = '__selection__';
 
+  const EXPAND_KEY = '__expand__';
+
   const {
     loading,
     empty,
@@ -66,6 +70,12 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
             title: $t('common.check'),
             checked: true
           });
+        } else if (column.type === 'expand') {
+          checks.push({
+            key: EXPAND_KEY,
+            title: $t('common.expandColumn'),
+            checked: true
+          });
         }
       });
 
@@ -79,6 +89,8 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
           columnMap.set(column.key as string, column);
         } else if (column.type === 'selection') {
           columnMap.set(SELECTION_KEY, column);
+        } else if (column.type === 'expand') {
+          columnMap.set(EXPAND_KEY, column);
         }
       });
 
@@ -125,14 +137,20 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
       });
 
       getData();
-    }
+    },
+    ...(showTotal
+      ? {
+          prefix: page => $t('datatable.itemCount', { total: page.itemCount })
+        }
+      : {})
   });
 
   // this is for mobile, if the system does not support mobile, you can use `pagination` directly
   const mobilePagination = computed(() => {
     const p: PaginationProps = {
       ...pagination,
-      pageSlot: appStore.isMobile ? 3 : 9
+      pageSlot: isMobile.value ? 3 : 9,
+      prefix: !isMobile.value && showTotal ? pagination.prefix : undefined
     };
 
     return p;

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

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

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

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { SimpleScrollbar } from '@sa/materials';
-import { transformColorWithOpacity } from '@sa/utils';
+import { transformColorWithOpacity } from '@sa/color';
 import { useAppStore } from '@/store/modules/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useThemeStore } from '@/store/modules/theme';
@@ -92,6 +92,7 @@ function handleClickMixMenu(menu: App.Global.Menu) {
     <MenuToggler
       arrow-icon
       :collapsed="appStore.siderCollapse"
+      :z-index="99"
       :class="{ 'text-white:88 !hover:text-white': inverted }"
       @click="appStore.toggleSiderCollapse"
     />

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

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

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

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

src/locales/langs/en-us.ts

@@ -11,6 +11,7 @@ const local: App.I18n.Schema = {
     cancel: 'Cancel',
     close: 'Close',
     check: 'Check',
+    expandColumn: 'Expand Column',
     columnSetting: 'Column Setting',
     config: 'Config',
     confirm: 'Confirm',
@@ -57,6 +58,7 @@ const local: App.I18n.Schema = {
       dark: 'Dark',
       auto: 'Follow System'
     },
+    grayscale: 'Grayscale',
     layoutMode: {
       title: 'Layout Mode',
       vertical: 'Vertical Menu Mode',
@@ -64,6 +66,8 @@ const local: App.I18n.Schema = {
       'vertical-mix': 'Vertical Mix Menu Mode',
       'horizontal-mix': 'Horizontal Mix menu Mode'
     },
+    recommendColor: 'Apply Recommended Color Algorithm',
+    recommendColorDesc: 'The recommended color algorithm refers to',
     themeColor: {
       title: 'Theme Color',
       primary: 'Primary',
@@ -293,6 +297,12 @@ const local: App.I18n.Schema = {
         superAdminVisible: 'Super Admin Visible',
         adminVisible: 'Admin Visible',
         adminOrUserVisible: 'Admin and User Visible'
+      },
+      request: {
+        repeatedErrorOccurOnce: 'Repeated Request Error Occurs Once',
+        repeatedError: 'Repeated Request Error',
+        repeatedErrorMsg1: 'Custom Request Error 1',
+        repeatedErrorMsg2: 'Custom Request Error 2'
       }
     },
     manage: {
@@ -353,7 +363,7 @@ const local: App.I18n.Schema = {
         menuName: 'Menu Name',
         routeName: 'Route Name',
         routePath: 'Route Path',
-        routeParams: 'Route Params',
+        pathParam: 'Path Param',
         layout: 'Layout Component',
         page: 'Page Component',
         i18nKey: 'I18n Key',
@@ -361,12 +371,14 @@ const local: App.I18n.Schema = {
         localIcon: 'Local Icon',
         iconTypeTitle: 'Icon Type',
         order: 'Order',
+        constant: 'Constant',
         keepAlive: 'Keep Alive',
         href: 'Href',
         hideInMenu: 'Hide In Menu',
         activeMenu: 'Active Menu',
         multiTab: 'Multi Tab',
         fixedIndexInTab: 'Fixed Index In Tab',
+        query: 'Query Params',
         button: 'Button',
         buttonCode: 'Button Code',
         buttonDesc: 'Button Desc',
@@ -377,6 +389,7 @@ const local: App.I18n.Schema = {
           menuName: 'Please enter menu name',
           routeName: 'Please enter route name',
           routePath: 'Please enter route path',
+          pathParam: 'Please enter path param',
           page: 'Please select page component',
           layout: 'Please select layout component',
           i18nKey: 'Please enter i18n key',
@@ -386,10 +399,12 @@ const local: App.I18n.Schema = {
           keepAlive: 'Please select whether to cache route',
           href: 'Please enter href',
           hideInMenu: 'Please select whether to hide menu',
-          activeMenu: 'Please enter the route name of the highlighted menu',
+          activeMenu: 'Please select route name of the highlighted menu',
           multiTab: 'Please select whether to support multiple tabs',
           fixedInTab: 'Please select whether to fix in the tab',
           fixedIndexInTab: 'Please enter the index fixed in the tab',
+          queryKey: 'Please enter route parameter Key',
+          queryValue: 'Please enter route parameter Value',
           button: 'Please select whether it is a button',
           buttonCode: 'Please enter button code',
           buttonDesc: 'Please enter button description',
@@ -454,6 +469,9 @@ const local: App.I18n.Schema = {
     expand: 'Expand Menu',
     pin: 'Pin',
     unpin: 'Unpin'
+  },
+  datatable: {
+    itemCount: 'Total {total} items'
   }
 };
 

src/locales/langs/zh-cn.ts

@@ -11,6 +11,7 @@ const local: App.I18n.Schema = {
     cancel: '取消',
     close: '关闭',
     check: '勾选',
+    expandColumn: '展开列',
     columnSetting: '列设置',
     config: '配置',
     confirm: '确认',
@@ -57,6 +58,7 @@ const local: App.I18n.Schema = {
       dark: '暗黑模式',
       auto: '跟随系统'
     },
+    grayscale: '灰度模式',
     layoutMode: {
       title: '布局模式',
       vertical: '左侧菜单模式',
@@ -64,6 +66,8 @@ const local: App.I18n.Schema = {
       horizontal: '顶部菜单模式',
       'horizontal-mix': '顶部菜单混合模式'
     },
+    recommendColor: '应用推荐算法的颜色',
+    recommendColorDesc: '推荐颜色的算法参照',
     themeColor: {
       title: '主题颜色',
       primary: '主色',
@@ -293,6 +297,12 @@ const local: App.I18n.Schema = {
         superAdminVisible: '超级管理员可见',
         adminVisible: '管理员可见',
         adminOrUserVisible: '管理员和用户可见'
+      },
+      request: {
+        repeatedErrorOccurOnce: '重复请求错误只出现一次',
+        repeatedError: '重复请求错误',
+        repeatedErrorMsg1: '自定义请求错误 1',
+        repeatedErrorMsg2: '自定义请求错误 2'
       }
     },
     manage: {
@@ -353,7 +363,7 @@ const local: App.I18n.Schema = {
         menuName: '菜单名称',
         routeName: '路由名称',
         routePath: '路由路径',
-        routeParams: '路由参数',
+        pathParam: '路径参数',
         layout: '布局',
         page: '页面组件',
         i18nKey: '国际化key',
@@ -361,12 +371,14 @@ const local: App.I18n.Schema = {
         localIcon: '本地图标',
         iconTypeTitle: '图标类型',
         order: '排序',
+        constant: '常量路由',
         keepAlive: '缓存路由',
         href: '外链',
         hideInMenu: '隐藏菜单',
         activeMenu: '高亮的菜单',
         multiTab: '支持多页签',
         fixedIndexInTab: '固定在页签中的序号',
+        query: '路由参数',
         button: '按钮',
         buttonCode: '按钮编码',
         buttonDesc: '按钮描述',
@@ -377,6 +389,7 @@ const local: App.I18n.Schema = {
           menuName: '请输入菜单名称',
           routeName: '请输入路由名称',
           routePath: '请输入路由路径',
+          pathParam: '请输入路径参数',
           page: '请选择页面组件',
           layout: '请选择布局组件',
           i18nKey: '请输入国际化key',
@@ -386,10 +399,12 @@ const local: App.I18n.Schema = {
           keepAlive: '请选择是否缓存路由',
           href: '请输入外链',
           hideInMenu: '请选择是否隐藏菜单',
-          activeMenu: '请输入高亮的菜单的路由名称',
+          activeMenu: '请选择高亮的菜单的路由名称',
           multiTab: '请选择是否支持多标签',
           fixedInTab: '请选择是否固定在页签中',
           fixedIndexInTab: '请输入固定在页签中的序号',
+          queryKey: '请输入路由参数Key',
+          queryValue: '请输入路由参数Value',
           button: '请选择是否按钮',
           buttonCode: '请输入按钮编码',
           buttonDesc: '请输入按钮描述',
@@ -454,6 +469,9 @@ const local: App.I18n.Schema = {
     expand: '展开菜单',
     pin: '固定',
     unpin: '取消固定'
+  },
+  datatable: {
+    itemCount: '共 {total} 条'
   }
 };
 

src/plugins/loading.ts

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

src/service/api/system-manage.ts

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

src/service/request/index.ts

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

src/service/request/shared.ts

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

src/service/request/type.ts

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

src/store/modules/route/index.ts

@@ -56,7 +56,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   const constantRoutes = shallowRef<ElegantConstRoute[]>([]);
 
   function addConstantRoutes(routes: ElegantConstRoute[]) {
-    const constantRoutesMap = new Map(constantRoutes.value.map(route => [route.name, route]));
+    const constantRoutesMap = new Map<string, ElegantConstRoute>([]);
 
     routes.forEach(route => {
       constantRoutesMap.set(route.name, route);
@@ -69,7 +69,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   const authRoutes = shallowRef<ElegantConstRoute[]>([]);
 
   function addAuthRoutes(routes: ElegantConstRoute[]) {
-    const authRoutesMap = new Map(authRoutes.value.map(route => [route.name, route]));
+    const authRoutesMap = new Map<string, ElegantConstRoute>([]);
 
     routes.forEach(route => {
       authRoutesMap.set(route.name, route);
@@ -332,15 +332,31 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   }
 
   /**
-   * Get selected menu meta by key
+   * Get route meta by key
    *
-   * @param selectedKey Selected menu key
+   * @param key Route key
    */
-  function getSelectedMenuMetaByKey(selectedKey: string) {
+  function getRouteMetaByKey(key: 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 === selectedKey)?.meta || null;
+    return allRoutes.find(route => route.name === key)?.meta || null;
+  }
+
+  /**
+   * Get route query of meta by key
+   *
+   * @param key
+   */
+  function getRouteQueryOfMetaByKey(key: string) {
+    const meta = getRouteMetaByKey(key);
+
+    const query: Record<string, string> = {};
+
+    meta?.query?.forEach(item => {
+      query[item.key] = item.value;
+    });
+
+    return query;
   }
 
   return {
@@ -360,6 +376,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     setIsInitAuthRoute,
     getIsAuthRouteExist,
     getSelectedMenuKeyPath,
-    getSelectedMenuMetaByKey
+    getRouteQueryOfMetaByKey
   };
 });

src/store/modules/theme/index.ts

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

src/store/modules/theme/shared.ts

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

src/styles/css/global.css

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

src/theme/settings.ts

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

src/typings/api.d.ts

@@ -171,6 +171,20 @@ declare namespace Api {
      */
     type IconType = '1' | '2';
 
+    type MenuPropsOfRoute = Pick<
+      import('vue-router').RouteMeta,
+      | 'i18nKey'
+      | 'keepAlive'
+      | 'constant'
+      | 'order'
+      | 'href'
+      | 'hideInMenu'
+      | 'activeMenu'
+      | 'multiTab'
+      | 'fixedIndexInTab'
+      | 'query'
+    >;
+
     type Menu = Common.CommonRecord<{
       /** parent menu id */
       parentId: number;
@@ -184,42 +198,16 @@ declare namespace Api {
       routePath: string;
       /** component */
       component?: string;
-      /**
-       * i18n key
-       *
-       * it is for internationalization
-       */
-      i18nKey?: App.I18n.I18nKey;
       /** iconify icon name or local icon name */
       icon: string;
       /** icon type */
       iconType: IconType;
-      /** menu order */
+      /** buttons */
-      order: number;
+      buttons?: MenuButton[] | null;
-      /** 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[];
+      children?: Menu[] | null;
-    }>;
+    }> &
+      MenuPropsOfRoute;
 
     /** 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-palette').ColorPaletteNumber;
+    type ColorPaletteNumber = import('@sa/color').ColorPaletteNumber;
 
     /** Theme token */
     type ThemeToken = {
@@ -18,6 +18,10 @@ declare namespace App {
     interface ThemeSetting {
       /** Theme scheme */
       themeScheme: UnionKey.ThemeScheme;
+      /** grayscale mode */
+      grayscale: boolean;
+      /** Whether to recommend color */
+      recommendColor: boolean;
       /** Theme color */
       themeColor: string;
       /** Other color */
@@ -154,7 +158,7 @@ declare namespace App {
       /** The menu label */
       label: string;
       /** The menu i18n key */
-      i18nKey?: I18n.I18nKey;
+      i18nKey?: I18n.I18nKey | null;
       /** The route key */
       routeKey: RouteKey;
       /** The route path */
@@ -212,7 +216,7 @@ declare namespace App {
        */
       localIcon?: string;
       /** I18n key */
-      i18nKey?: I18n.I18nKey;
+      i18nKey?: I18n.I18nKey | null;
     };
 
     /** Form rule */
@@ -257,6 +261,7 @@ declare namespace App {
         cancel: string;
         close: string;
         check: string;
+        expandColumn: string;
         columnSetting: string;
         config: string;
         confirm: string;
@@ -298,7 +303,10 @@ declare namespace App {
       };
       theme: {
         themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
+        grayscale: string;
         layoutMode: { title: string } & Record<UnionKey.ThemeLayoutMode, string>;
+        recommendColor: string;
+        recommendColorDesc: string;
         themeColor: {
           title: string;
           followPrimary: string;
@@ -465,6 +473,12 @@ declare namespace App {
             adminVisible: string;
             adminOrUserVisible: string;
           };
+          request: {
+            repeatedErrorOccurOnce: string;
+            repeatedError: string;
+            repeatedErrorMsg1: string;
+            repeatedErrorMsg2: string;
+          };
         };
         manage: {
           common: {
@@ -524,7 +538,7 @@ declare namespace App {
             menuName: string;
             routeName: string;
             routePath: string;
-            routeParams: string;
+            pathParam: string;
             layout: string;
             page: string;
             i18nKey: string;
@@ -532,12 +546,14 @@ declare namespace App {
             localIcon: string;
             iconTypeTitle: string;
             order: string;
+            constant: string;
             keepAlive: string;
             href: string;
             hideInMenu: string;
             activeMenu: string;
             multiTab: string;
             fixedIndexInTab: string;
+            query: string;
             button: string;
             buttonCode: string;
             buttonDesc: string;
@@ -548,6 +564,7 @@ declare namespace App {
               menuName: string;
               routeName: string;
               routePath: string;
+              pathParam: string;
               layout: string;
               page: string;
               i18nKey: string;
@@ -561,6 +578,8 @@ declare namespace App {
               multiTab: string;
               fixedInTab: string;
               fixedIndexInTab: string;
+              queryKey: string;
+              queryValue: string;
               button: string;
               buttonCode: string;
               buttonDesc: string;
@@ -602,6 +621,9 @@ declare namespace App {
         pin: string;
         unpin: string;
       };
+      datatable: {
+        itemCount: string;
+      };
     };
 
     type GetI18nKey<T extends Record<string, unknown>, K extends keyof T = keyof T> = K extends string

src/typings/components.d.ts

@@ -19,9 +19,11 @@ declare module 'vue' {
     IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
+    'IconIc:roundPlus': typeof import('~icons/ic/round-plus')['default']
     IconIcRoundDelete: typeof import('~icons/ic/round-delete')['default']
     IconIcRoundPlus: typeof import('~icons/ic/round-plus')['default']
     IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
+    IconIcRoundRemove: typeof import('~icons/ic/round-remove')['default']
     IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
     IconLocalBanner: typeof import('~icons/local/banner')['default']
     IconLocalLogo: typeof import('~icons/local/logo')['default']
@@ -49,6 +51,7 @@ declare module 'vue' {
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']

src/typings/env.d.ts

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

src/typings/naive-ui.d.ts

@@ -42,6 +42,6 @@ declare namespace NaiveUI {
 
   type NaiveTableConfig<A extends TableApiFn> = Pick<
     import('@sa/hooks').TableConfig<A, GetTableData<A>, TableColumn<TableDataWithIndex<GetTableData<A>>>>,
-    'apiFn' | 'apiParams' | 'columns' | 'immediate'
+    'apiFn' | 'apiParams' | 'columns' | 'immediate' | 'showTotal'
   >;
 }

src/typings/router.d.ts

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

src/utils/common.ts

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

src/utils/storage.ts

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

src/views/_builtin/login/index.vue

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

src/views/function/request/index.vue

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

src/views/manage/menu/index.vue

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

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

@@ -1,256 +0,0 @@
-<script setup lang="tsx">
-import { computed, reactive, watch } from 'vue';
-import type { SelectOption } from 'naive-ui';
-import { useFormRules, useNaiveForm } from '@/hooks/common/form';
-import { $t } from '@/locales';
-import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
-import SvgIcon from '@/components/custom/svg-icon.vue';
-import { getLocalIcons } from '@/utils/icon';
-import { getLayoutAndPage, transformLayoutAndPageToComponent } from './shared';
-
-defineOptions({
-  name: 'MenuOperateDrawer'
-});
-
-export type OperateType = NaiveUI.TableOperateType | 'addChild';
-
-interface Props {
-  /** the type of operation */
-  operateType: OperateType;
-  /** the edit menu data or the parent menu data when adding a child menu */
-  rowData?: Api.SystemManage.Menu | null;
-  /** all pages */
-  allPages: string[];
-}
-
-const props = defineProps<Props>();
-
-interface Emits {
-  (e: 'submitted'): void;
-}
-
-const emit = defineEmits<Emits>();
-
-const visible = defineModel<boolean>('visible', {
-  default: false
-});
-
-const { formRef, validate, restoreValidation } = useNaiveForm();
-const { defaultRequiredRule } = useFormRules();
-
-const title = computed(() => {
-  const titles: Record<OperateType, string> = {
-    add: $t('page.manage.menu.addMenu'),
-    addChild: $t('page.manage.menu.addChildMenu'),
-    edit: $t('page.manage.menu.editMenu')
-  };
-  return titles[props.operateType];
-});
-
-type Model = Pick<
-  Api.SystemManage.Menu,
-  | 'menuType'
-  | 'menuName'
-  | 'icon'
-  | 'iconType'
-  | 'routeName'
-  | 'routePath'
-  | 'component'
-  | 'status'
-  | 'hideInMenu'
-  | 'order'
-  | 'parentId'
-> & {
-  layout: string;
-  page: string;
-};
-
-const model: Model = reactive(createDefaultModel());
-
-function createDefaultModel(): Model {
-  return {
-    menuType: '1',
-    menuName: '',
-    icon: '',
-    iconType: '1',
-    routeName: '',
-    routePath: '',
-    layout: '',
-    page: '',
-    status: null,
-    hideInMenu: false,
-    order: 0,
-    parentId: 0
-  };
-}
-
-type RuleKey = Extract<keyof Model, 'menuName' | 'status' | 'routeName' | 'routePath'>;
-
-const rules: Record<RuleKey, App.Global.FormRule> = {
-  menuName: defaultRequiredRule,
-  status: defaultRequiredRule,
-  routeName: defaultRequiredRule,
-  routePath: defaultRequiredRule
-};
-
-const disabledMenuType = computed(() => props.operateType === 'edit');
-
-const localIcons = getLocalIcons();
-const localIconOptions = localIcons.map<SelectOption>(item => ({
-  label: () => (
-    <div class="flex-y-center gap-16px">
-      <SvgIcon localIcon={item} class="text-icon" />
-      <span>{item}</span>
-    </div>
-  ),
-  value: item
-}));
-
-const showLayout = computed(() => model.parentId === 0);
-
-const showPage = computed(() => model.menuType === '2');
-
-const pageOptions = computed(() => {
-  const allPages = [...props.allPages];
-
-  if (model.routeName && !allPages.includes(model.routeName)) {
-    allPages.unshift(model.routeName);
-  }
-
-  const opts: CommonType.Option[] = allPages.map(page => ({
-    label: page,
-    value: page
-  }));
-
-  return opts;
-});
-
-const layoutOptions: CommonType.Option[] = [
-  {
-    label: 'base',
-    value: 'base'
-  },
-  {
-    label: 'blank',
-    value: 'blank'
-  }
-];
-
-function 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);
-
-    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) {
-    handleInitModel();
-    restoreValidation();
-  }
-});
-</script>
-
-<template>
-  <NDrawer v-model:show="visible" display-directive="show" :width="360">
-    <NDrawerContent :title="title" :native-scrollbar="false" closable>
-      <NForm ref="formRef" :model="model" :rules="rules" 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

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

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

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

src/views/manage/user/index.vue

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