fix: menu-badge color not correct (#4089)

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';
 
@@ -15,10 +15,10 @@ const props = withDefaults(defineProps<Props>(), {});
 
 const variantsMap: Record<string, string> = {
   default: 'bg-green-500',
-  destructive: ' bg-destructive',
+  destructive: 'bg-destructive',
   primary: 'bg-primary',
-  success: ' bg-green-500',
+  success: 'bg-green-500',
-  warning: ' bg-yellow-500',
+  warning: 'bg-yellow-500',
 };
 
 const isDot = computed(() => props.badgeType === 'dot');
@@ -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 {};