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"
   }
 }