feat(theme): 新增主题可配置项，优化代码逻辑和样式

-  在 `komari-theme.json` 中添加了新的配置选项
- 支持自定义标题栏、内容区、实例页面和通用UI元素
- 优化部分组件调用逻辑
- 优化页面样式

src/components/ui/progress-bar.tsx

@@ -0,0 +1,13 @@
+export const ProgressBar = ({
+  value,
+  className,
+}: {
+  value: number;
+  className?: string;
+}) => (
+  <div className="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700">
+    <div
+      className={`h-3 rounded-full transition-all duration-500 ${className}`}
+      style={{ width: `${value}%` }}></div>
+  </div>
+);

src/components/ui/tag.tsx

@@ -1,12 +1,14 @@
 import { Badge } from "@radix-ui/themes";
 import React from "react";
 import { cn } from "@/utils";
+import { useConfigItem } from "@/config";
 
 interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
   tags: string[];
 }
 
-const colors: Array<
+// 定义颜色类型
+type ColorType =
   | "ruby"
   | "gray"
   | "gold"
@@ -32,65 +34,61 @@ const colors: Array<
   | "grass"
   | "lime"
   | "mint"
-  | "sky"
-> = [
-  "ruby",
-  "gray",
-  "gold",
-  "bronze",
-  "brown",
-  "yellow",
-  "amber",
-  "orange",
-  "tomato",
-  "red",
-  "crimson",
-  "pink",
-  "plum",
-  "purple",
-  "violet",
-  "iris",
-  "indigo",
-  "blue",
-  "cyan",
-  "teal",
-  "jade",
-  "green",
-  "grass",
-  "lime",
-  "mint",
-  "sky",
-];
+  | "sky";
 
+// 默认颜色列表，将在组件内部使用
+const defaultColorList: ColorType[] = [
+  "blue",
+  "red",
+  "green",
+  "yellow",
+  "purple",
+  "cyan",
+  "orange",
+  "pink",
+];
 // 解析带颜色的标签
-const parseTagWithColor = (tag: string) => {
+const parseTagWithColor = (tag: string, availableColors: ColorType[]) => {
   const colorMatch = tag.match(/<(\w+)>$/);
   if (colorMatch) {
     const color = colorMatch[1].toLowerCase();
     const text = tag.replace(/<\w+>$/, "");
     // 检查颜色是否在支持的颜色列表中
-    if (colors.includes(color as any)) {
-      return { text, color: color as (typeof colors)[number] };
+    if (availableColors.includes(color as ColorType)) {
+      return { text, color: color as ColorType };
     }
   }
-  return { text: tag, color: null };
+  return { text: tag, color: null as unknown as ColorType | null };
 };
 
 const Tag = React.forwardRef<HTMLDivElement, TagProps>(
   ({ className, tags, ...props }, ref) => {
+    // 在组件内部使用 useConfigItem 钩子
+    const tagDefaultColorList = useConfigItem("tagDefaultColorList");
+
+    // 解析配置的颜色列表
+    const colorList = React.useMemo(() => {
+      if (!tagDefaultColorList) {
+        return defaultColorList;
+      }
+      return tagDefaultColorList
+        .split(",")
+        .map((color: string) => color.trim()) as ColorType[];
+    }, [tagDefaultColorList]);
+
     return (
       <div
         ref={ref}
         className={cn("flex flex-wrap gap-1", className)}
         {...props}>
         {tags.map((tag, index) => {
-          const { text, color } = parseTagWithColor(tag);
-          const badgeColor = color || colors[index % colors.length];
+          const { text, color } = parseTagWithColor(tag, colorList);
+          const badgeColor = color || colorList[index % colorList.length];
 
           return (
             <Badge
               key={index}
-              color={badgeColor}
+              color={badgeColor as ColorType}
               variant="soft"
               className="text-sm">
               <label className="text-xs">{text}</label>