Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

packages/@core/base/design/src/css/ui.css

@@ -34,21 +34,6 @@
   transform: translateX(30px) skewX(-30deg);
 }
 
-/*
-.breadcrumb-transition-move,
-.breadcrumb-transition-enter-active {
-  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
-}
-
-.breadcrumb-transition-leave-active {
-  display: none;
-}
-
-.breadcrumb-transition-enter-from {
-  opacity: 0;
-  transform: translateX(-5px);
-} */
-
 @keyframes slide-down {
   from {
     opacity: 0;

packages/@core/base/design/src/index.ts

@@ -1,6 +1,7 @@
 import './css/global.css';
 import './css/transition.css';
 import './css/nprogress.css';
+import './css/ui.css';
 import './design-tokens';
 
 export {};

packages/@core/base/icons/package.json

@@ -36,6 +36,6 @@
   "dependencies": {
     "@iconify/vue": "^4.1.2",
     "lucide-vue-next": "^0.424.0",
-    "vue": "^3.4.35"
+    "vue": "^3.4.36"
   }
 }

packages/@core/base/shared/build.config.ts

@@ -7,7 +7,7 @@ export default defineBuildConfig({
     'src/index',
     'src/constants/index',
     'src/utils/index',
-    'src/colorful/index',
+    'src/color/index',
     'src/cache/index',
   ],
 });

packages/@core/base/shared/package.json

@@ -35,10 +35,10 @@
       "development": "./src/utils/index.ts",
       "default": "./dist/utils/index.mjs"
     },
-    "./colorful": {
-      "types": "./src/colorful/index.ts",
-      "development": "./src/colorful/index.ts",
-      "default": "./dist/colorful/index.mjs"
+    "./color": {
+      "types": "./src/color/index.ts",
+      "development": "./src/color/index.ts",
+      "default": "./dist/color/index.mjs"
     },
     "./cache": {
       "types": "./src/cache/index.ts",
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
-    "@vue/shared": "^3.4.35",
+    "@vue/shared": "^3.4.36",
     "clsx": "^2.1.1",
     "defu": "^6.1.4",
     "lodash.clonedeep": "^4.5.0",

packages/@core/base/shared/src/color/convert.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { convertToHsl, convertToHslCssVar, isValidColor } from './convert';
+import { convertToHsl, convertToHslCssVar, convertToRgb } from './convert';
 
 describe('color conversion functions', () => {
   it('should correctly convert color to HSL format', () => {
@@ -26,16 +26,16 @@ describe('color conversion functions', () => {
     const expectedHsl = '0 100% 50% / 0.5';
     expect(convertToHslCssVar(color)).toEqual(expectedHsl);
   });
-});
 
-describe('isValidColor', () => {
-  it('isValidColor function', () => {
-    // 测试有效颜色
-    expect(isValidColor('blue')).toBe(true);
-    expect(isValidColor('#000000')).toBe(true);
+  it('should correctly convert color to RGB CSS variable format', () => {
+    const color = 'hsl(284, 100%, 50%)';
+    const expectedRgb = 'rgb(187, 0, 255)';
+    expect(convertToRgb(color)).toEqual(expectedRgb);
+  });
 
-    // 测试无效颜色
-    expect(isValidColor('invalid color')).toBe(false);
-    expect(isValidColor()).toBe(false);
+  it('should correctly convert color with alpha to RGBA CSS variable format', () => {
+    const color = 'hsla(284, 100%, 50%, 0.92)';
+    const expectedRgba = 'rgba(187, 0, 255, 0.92)';
+    expect(convertToRgb(color)).toEqual(expectedRgba);
   });
 });

packages/@core/base/shared/src/color/convert.ts

@@ -0,0 +1,44 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+/**
+ * 将颜色转换为HSL格式。
+ *
+ * HSL是一种颜色模型，包括色相(Hue)、饱和度(Saturation)和亮度(Lightness)三个部分。
+ *
+ * @param {string} color 输入的颜色。
+ * @returns {string} HSL格式的颜色字符串。
+ */
+function convertToHsl(color: string): string {
+  const { a, h, l, s } = new TinyColor(color).toHsl();
+  const hsl = `hsl(${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%)`;
+  return a < 1 ? `${hsl} ${a}` : hsl;
+}
+
+/**
+ * 将颜色转换为HSL CSS变量。
+ *
+ * 这个函数与convertToHsl函数类似，但是返回的字符串格式稍有不同，
+ * 以便可以作为CSS变量使用。
+ *
+ * @param {string} color 输入的颜色。
+ * @returns {string} 可以作为CSS变量使用的HSL格式的颜色字符串。
+ */
+function convertToHslCssVar(color: string): string {
+  const { a, h, l, s } = new TinyColor(color).toHsl();
+  const hsl = `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+  return a < 1 ? `${hsl} / ${a}` : hsl;
+}
+
+/**
+ * 将颜色转换为RGB颜色字符串
+ * TinyColor无法处理hsl内包含'deg'、'grad'、'rad'或'turn'的字符串
+ * 比如 hsl(231deg 98% 65%)将被解析为rgb(0, 0, 0)
+ * 这里在转换之前先将这些单位去掉
+ * @param str 表示HLS颜色值的字符串
+ * @returns 如果颜色值有效，则返回对应的RGB颜色字符串；如果无效，则返回rgb(0, 0, 0)
+ */
+function convertToRgb(str: string): string {
+  return new TinyColor(str.replaceAll(/deg|grad|rad|turn/g, '')).toRgbString();
+}
+
+export { convertToHsl, convertToHslCssVar, convertToRgb, TinyColor };

packages/@core/base/shared/src/color/generator.ts

@@ -1,7 +1,6 @@
-import { TinyColor } from '@ctrl/tinycolor';
 import { getColors } from 'theme-colors';
 
-import { convertToHslCssVar } from './convert';
+import { convertToHslCssVar, TinyColor } from './convert';
 
 interface ColorItem {
   alias?: string;

packages/@core/base/shared/src/colorful/convert.ts

@@ -1,73 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor';
-/**
- * 将颜色转换为HSL格式。
- *
- * HSL是一种颜色模型，包括色相(Hue)、饱和度(Saturation)和亮度(Lightness)三个部分。
- * 这个函数使用TinyColor库将输入的颜色转换为HSL格式，并返回一个字符串。
- *
- * @param {string} color 输入的颜色，可以是任何TinyColor支持的颜色格式。
- * @returns {string} HSL格式的颜色字符串。
- */
-function convertToHsl(color: string): string {
-  const { a, h, l, s } = new TinyColor(color).toHsl();
-  const hsl = `hsl(${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%)`;
-  return a < 1 ? `${hsl} ${a}` : hsl;
-}
-
-/**
- * 将颜色转换为HSL CSS变量。
- *
- * 这个函数与convertToHsl函数类似，但是返回的字符串格式稍有不同，
- * 以便可以作为CSS变量使用。
- *
- * @param {string} color 输入的颜色，可以是任何TinyColor支持的颜色格式。
- * @returns {string} 可以作为CSS变量使用的HSL格式的颜色字符串。
- */
-function convertToHslCssVar(color: string): string {
-  const { a, h, l, s } = new TinyColor(color).toHsl();
-  const hsl = `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
-  return a < 1 ? `${hsl} / ${a}` : hsl;
-}
-
-/**
- * 检查颜色是否有效
- * @param {string} color - 待检查的颜色
- * 如果颜色有效返回true，否则返回false
- */
-function isValidColor(color?: string) {
-  if (!color) {
-    return false;
-  }
-  return new TinyColor(color).isValid;
-}
-/**
- * 将HLS字符串转换为RGB颜色字符串
- *
- * 本函数接收一个表示HLS值的字符串，移除其中的度量单位，
- * 并将其转换为TinyColor对象，以便进行颜色处理。
- * 如果转换后的颜色无效，则直接返回原始字符串；
- * 否则，返回转换后的RGB颜色字符串
- *
- * @param str 表示HLS颜色值的字符串，可能包含度量单位如'deg'、'grad'、'rad'或'turn'
- * @returns 如果颜色值有效，则返回对应的RGB颜色字符串；如果无效，则返回原始字符串
- */
-function hlsStringToRGBString(str: string): string {
-  // 移除HLS字符串中的度量单位，以便正确解析
-  const color = new TinyColor(
-    `hsl(${str.replaceAll(/deg|grad|rad|turn/g, '')})`,
-  );
-  // 检查颜色是否有效，如果无效则直接返回原始字符串
-  if (!color.isValid) {
-    return str;
-  }
-  // 返回转换后的RGB颜色字符串
-  return color.toRgbString();
-}
-
-export {
-  convertToHsl,
-  convertToHslCssVar,
-  hlsStringToRGBString,
-  isValidColor,
-  TinyColor,
-};

packages/@core/base/shared/src/index.ts

@@ -1,4 +1,4 @@
 export * from './cache';
-export * from './colorful';
+export * from './color';
 export * from './constants';
 export * from './utils';

packages/@core/base/typings/package.json

@@ -38,7 +38,7 @@
     }
   },
   "dependencies": {
-    "vue": "^3.4.35",
-    "vue-router": "^4.4.2"
+    "vue": "^3.4.36",
+    "vue-router": "^4.4.3"
   }
 }

packages/@core/composables/package.json

@@ -37,9 +37,9 @@
   "dependencies": {
     "@vben-core/shared": "workspace:*",
     "@vueuse/core": "^10.11.0",
-    "radix-vue": "^1.9.2",
+    "radix-vue": "^1.9.3",
     "sortablejs": "^1.15.2",
-    "vue": "^3.4.35"
+    "vue": "^3.4.36"
   },
   "devDependencies": {
     "@types/sortablejs": "^1.15.8"

packages/@core/preferences/package.json

@@ -32,6 +32,6 @@
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
-    "vue": "^3.4.35"
+    "vue": "^3.4.36"
   }
 }

packages/@core/ui-kit/layout-ui/package.json

@@ -42,6 +42,6 @@
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
-    "vue": "^3.4.35"
+    "vue": "^3.4.36"
   }
 }

packages/@core/ui-kit/menu-ui/package.json

@@ -43,6 +43,6 @@
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
-    "vue": "^3.4.35"
+    "vue": "^3.4.36"
   }
 }

packages/@core/ui-kit/shadcn-ui/package.json

@@ -49,7 +49,7 @@
     "@vueuse/core": "^10.11.0",
     "class-variance-authority": "^0.7.0",
     "lucide-vue-next": "^0.424.0",
-    "radix-vue": "^1.9.2",
-    "vue": "^3.4.35"
+    "radix-vue": "^1.9.3",
+    "vue": "^3.4.36"
   }
 }

packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue

@@ -3,7 +3,7 @@ import type { MenuRecordBadgeRaw } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
-import { isValidColor } from '@vben-core/shared';
+import { convertToRgb } from '@vben-core/shared';
 
 import BadgeDot from './menu-badge-dot.vue';
 
@@ -34,9 +34,9 @@ const badgeClass = computed(() => {
 });
 
 const badgeStyle = computed(() => {
-  if (badgeClass.value && isValidColor(badgeClass.value)) {
+  if (badgeClass.value) {
     return {
-      backgroundColor: badgeClass.value,
+      backgroundColor: convertToRgb(badgeClass.value),
     };
   }
   return {};

packages/@core/ui-kit/shadcn-ui/src/index.ts

@@ -1,4 +1,2 @@
-import './styles/index.css';
-
 export * from './components';
 export { VisuallyHidden } from 'radix-vue';

packages/@core/ui-kit/tabs-ui/package.json

@@ -41,6 +41,6 @@
     "@vben-core/icons": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "vue": "^3.4.35"
+    "vue": "^3.4.36"
   }
 }

packages/effects/access/package.json

@@ -24,6 +24,6 @@
     "@vben/stores": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "vue": "^3.4.35"
+    "vue": "^3.4.36"
   }
 }

packages/effects/chart-ui/package.json

@@ -23,6 +23,6 @@
     "@vben/preferences": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "echarts": "^5.5.1",
-    "vue": "^3.4.35"
+    "vue": "^3.4.36"
   }
 }

packages/effects/common-ui/package.json

@@ -27,9 +27,9 @@
     "@vben/locales": "workspace:*",
     "@vben/types": "workspace:*",
     "@vueuse/integrations": "^10.11.0",
-    "qrcode": "^1.5.3",
-    "vue": "^3.4.35",
-    "vue-router": "^4.4.2"
+    "qrcode": "^1.5.4",
+    "vue": "^3.4.36",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
     "@types/qrcode": "^1.5.5"

packages/effects/hooks/package.json

@@ -25,8 +25,8 @@
     "@vben/stores": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "vue": "^3.4.35",
-    "vue-router": "^4.4.2",
+    "vue": "^3.4.36",
+    "vue-router": "^4.4.3",
     "watermark-js-plus": "^1.5.2"
   }
 }

packages/effects/hooks/src/use-design-tokens.ts

@@ -1,7 +1,7 @@
 import { reactive, watch } from 'vue';
 
 import { preferences } from '@vben/preferences';
-import { hlsStringToRGBString, updateCSSVariables } from '@vben/utils';
+import { convertToRgb, updateCSSVariables } from '@vben/utils';
 
 /**
  * 用于适配各个框架的设计系统
@@ -102,7 +102,7 @@ export function useNaiveDesignTokens() {
 
   const getCssVariableValue = (variable: string, isColor: boolean = true) => {
     const value = rootStyles.getPropertyValue(variable);
-    return isColor ? hlsStringToRGBString(value) : value;
+    return isColor ? convertToRgb(`hsl(${value})`) : value;
   };
 
   watch(
@@ -145,8 +145,6 @@ export function useNaiveDesignTokens() {
       commonTokens.invertedColor = getCssVariableValue('--background-deep');
 
       commonTokens.borderRadius = getCssVariableValue('--radius', false);
-
-      // antDesignTokens.colorBgMask = getCssVariableValue('--overlay');
     },
     { immediate: true },
   );
@@ -160,7 +158,7 @@ export function useElementPlusDesignTokens() {
 
   const getCssVariableValue = (variable: string, isColor: boolean = true) => {
     const value = rootStyles.getPropertyValue(variable);
-    return isColor ? `hsl(${value})` : value;
+    return isColor ? convertToRgb(`hsl(${value})`) : value;
   };
   watch(
     () => preferences.theme,

packages/effects/layouts/package.json

@@ -33,7 +33,7 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "^10.11.0",
-    "vue": "^3.4.35",
-    "vue-router": "^4.4.2"
+    "vue": "^3.4.36",
+    "vue-router": "^4.4.3"
   }
 }

packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue

@@ -22,17 +22,11 @@ const modelValue = defineModel<BuiltinThemeType>({ default: 'default' });
 const themeColorPrimary = defineModel<string>('themeColorPrimary');
 
 const inputValue = computed(() => {
-  return new TinyColor(themeColorPrimary.value).toHexString();
+  return new TinyColor(themeColorPrimary.value || '').toHexString();
 });
 
 const builtinThemePresets = computed(() => {
-  return [
-    // {
-    //   color: 'hsl(231 98% 65%)',
-    //   type: 'default',
-    // },
-    ...BUILT_IN_THEME_PRESETS,
-  ];
+  return [...BUILT_IN_THEME_PRESETS];
 });
 
 function typeView(name: BuiltinThemeType) {

packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue

@@ -277,12 +277,6 @@ async function handleReset() {
                 v-model:theme-semi-dark-menu="themeSemiDarkMenu"
               />
             </Block>
-            <!-- <Block :title="$t('preferences.theme-color')">
-              <ThemeColor
-                v-model="themeColorPrimary"
-                :color-primary-presets="colorPrimaryPresets"
-              />
-            </Block> -->
             <Block :title="$t('preferences.theme.builtin.title')">
               <BuiltinTheme
                 v-model="themeBuiltinType"

packages/locales/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@intlify/core-base": "^9.13.1",
-    "vue": "^3.4.35",
+    "vue": "^3.4.36",
     "vue-i18n": "^9.13.1"
   }
 }

packages/stores/package.json

@@ -24,7 +24,7 @@
     "@vben-core/typings": "workspace:*",
     "pinia": "2.2.0",
     "pinia-plugin-persistedstate": "^3.2.1",
-    "vue": "^3.4.35",
-    "vue-router": "^4.4.2"
+    "vue": "^3.4.36",
+    "vue-router": "^4.4.3"
   }
 }

packages/types/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@vben-core/typings": "workspace:*",
-    "vue": "^3.4.35",
-    "vue-router": "^4.4.2"
+    "vue": "^3.4.36",
+    "vue-router": "^4.4.3"
   }
 }

packages/utils/package.json

@@ -24,6 +24,6 @@
   "dependencies": {
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "vue-router": "^4.4.2"
+    "vue-router": "^4.4.3"
   }
 }

packages/utils/src/index.ts

@@ -1,3 +1,3 @@
 export * from './helpers';
-export * from '@vben-core/shared/colorful';
+export * from '@vben-core/shared/color';
 export * from '@vben-core/shared/utils';