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

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

@@ -1,6 +1,11 @@
 import { describe, expect, it } from 'vitest';
 
-import { convertToHsl, convertToHslCssVar, convertToRgb } from './convert';
+import {
+  convertToHsl,
+  convertToHslCssVar,
+  convertToRgb,
+  isValidColor,
+} from './convert';
 
 describe('color conversion functions', () => {
   it('should correctly convert color to HSL format', () => {
@@ -39,3 +44,15 @@ describe('color conversion functions', () => {
     expect(convertToRgb(color)).toEqual(expectedRgba);
   });
 });
+
+describe('isValidColor', () => {
+  it('isValidColor function', () => {
+    // 测试有效颜色
+    expect(isValidColor('blue')).toBe(true);
+    expect(isValidColor('#000000')).toBe(true);
+
+    // 测试无效颜色
+    expect(isValidColor('invalid color')).toBe(false);
+    expect(isValidColor()).toBe(false);
+  });
+});

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

@@ -41,4 +41,22 @@ function convertToRgb(str: string): string {
   return new TinyColor(str.replaceAll(/deg|grad|rad|turn/g, '')).toRgbString();
 }
 
-export { convertToHsl, convertToHslCssVar, convertToRgb, TinyColor };
+/**
+ * 检查颜色是否有效
+ * @param {string} color - 待检查的颜色
+ * 如果颜色有效返回true，否则返回false
+ */
+function isValidColor(color?: string) {
+  if (!color) {
+    return false;
+  }
+  return new TinyColor(color).isValid;
+}
+
+export {
+  convertToHsl,
+  convertToHslCssVar,
+  convertToRgb,
+  isValidColor,
+  TinyColor,
+};

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