fix: 修复 tags 无法解析颜色的问题

src/components/ui/tag.tsx

@@ -36,25 +36,44 @@ type ColorType =
   | "mint"
   | "sky";
 
-// 默认颜色列表，将在组件内部使用
+// 完整的颜色列表，用于标签颜色匹配
-const defaultColorList: ColorType[] = [
+const allColors: ColorType[] = [
-  "blue",
+  "ruby",
-  "red",
+  "gray",
-  "green",
+  "gold",
+  "bronze",
+  "brown",
   "yellow",
-  "purple",
+  "amber",
-  "cyan",
   "orange",
+  "tomato",
+  "red",
+  "crimson",
   "pink",
+  "plum",
+  "purple",
+  "violet",
+  "iris",
+  "indigo",
+  "blue",
+  "cyan",
+  "teal",
+  "jade",
+  "green",
+  "grass",
+  "lime",
+  "mint",
+  "sky",
 ];
+
 // 解析带颜色的标签
-const parseTagWithColor = (tag: string, availableColors: ColorType[]) => {
+const parseTagWithColor = (tag: string) => {
   const colorMatch = tag.match(/<(\w+)>$/);
   if (colorMatch) {
     const color = colorMatch[1].toLowerCase();
     const text = tag.replace(/<\w+>$/, "");
-    // 检查颜色是否在支持的颜色列表中
+    // 检查颜色是否在完整的颜色列表中
-    if (availableColors.includes(color as ColorType)) {
+    if (allColors.includes(color as ColorType)) {
       return { text, color: color as ColorType };
     }
   }
@@ -66,11 +85,8 @@ const Tag = React.forwardRef<HTMLDivElement, TagProps>(
     // 在组件内部使用 useConfigItem 钩子
     const tagDefaultColorList = useConfigItem("tagDefaultColorList");
 
-    // 解析配置的颜色列表
+    // 解析配置的颜色列表，仅用于循环排序
     const colorList = React.useMemo(() => {
-      if (!tagDefaultColorList) {
-        return defaultColorList;
-      }
       return tagDefaultColorList
         .split(",")
         .map((color: string) => color.trim()) as ColorType[];
@@ -82,7 +98,7 @@ const Tag = React.forwardRef<HTMLDivElement, TagProps>(
         className={cn("flex flex-wrap gap-1", className)}
         {...props}>
         {tags.map((tag, index) => {
-          const { text, color } = parseTagWithColor(tag, colorList);
+          const { text, color } = parseTagWithColor(tag);
           const badgeColor = color || colorList[index % colorList.length];
 
           return (

src/config/hooks.ts

@@ -1,6 +1,7 @@
 import { useContext } from "react";
 import type { ConfigOptions } from "./default";
 import { ConfigContext } from "./ConfigContext";
+import { DEFAULT_CONFIG } from "./default";
 
 /**
  * 使用全局配置 Hook，用于获取当前应用配置
@@ -13,13 +14,14 @@ export function useAppConfig(): ConfigOptions {
 /**
  * 使用特定配置项 Hook，直接获取某个配置项的值
  * @param key 配置项键名
- * @returns 配置项的值
+ * @returns 配置项的值，如果为 undefined 则返回默认配置中的值
  */
 export function useConfigItem<K extends keyof ConfigOptions>(
   key: K
-): ConfigOptions[K] {
+): NonNullable<ConfigOptions[K]> {
   const config = useContext(ConfigContext);
-  return config[key];
+  // 如果配置项为 undefined，则回退到默认配置
+  return (config[key] ?? DEFAULT_CONFIG[key]) as NonNullable<ConfigOptions[K]>;
 }
 
 // 导出配置类型