From 32d0e396efef75b021ce7efd1def8061ec7bace3 Mon Sep 17 00:00:00 2001
From: Montia37 <MTChaoyi@outlook.com>
Date: Mon, 8 Sep 2025 20:53:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=80=8F=E6=98=8E=E8=83=8C=E6=99=AF=E9=80=89=E9=A1=B9=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=87=E7=AD=BE=E6=98=BE=E7=A4=BA=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                 |  1 +
 komari-theme.json         |  7 +++++++
 src/components/ui/tag.tsx | 33 +++++++++++++++++++++++----------
 src/config/default.ts     |  2 ++
 src/index.css             | 12 ++++++++++++
 5 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 69cbccb..8901252 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@
 | 启用磨砂玻璃效果 | `enableBlur` | `switch` | `true` | 启用后将使主要容器拥有磨砂玻璃效果 |
 | 磨砂玻璃模糊值 | `blurValue` | `number` | `10` | 调整模糊值大小，数值越大模糊效果越明显，建议值为 5-20，为 0 则表示不启用模糊效果 |
 | 磨砂玻璃背景色 | `blurBackgroundColor` | `string` | `rgba(255, 255, 255, 0.5)\|rgba(0, 0, 0, 0.5)` | 调整模糊背景色，推荐 rgba 颜色值，使用“\|”分隔亮色模式和暗色模式的颜色值（eg: rgba(255, 255, 255, 0.5)\|rgba(0, 0, 0, 0.5)） |
+| 启用标签透明背景 | `enableTransparentTags` | `switch` | `true` | 启用后标签将使用较为透明的背景色，当背景情况复杂导致标签难以辨识时建议关闭 |
 | 标签默认颜色列表 | `tagDefaultColorList` | `string` | `ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red` | 标签默认颜色列表，展示的标签将按顺序调用该颜色池，逗号分隔（可用的颜色列表请参考：https://www.radix-ui.com/themes/docs/theme/color ，改完没有生效则说明填写有误） |
 | 启用 localStorage 配置 | `enableLocalStorage` | `switch` | `true` | 启用后将优先使用用户浏览器本地配置的视图和外观设置。关闭后将强制使用下方的主题配置，本地可调整但刷新即恢复 |
 | 默认展示视图 | `selectedDefaultView` | `select` | `grid` | 设置默认展示视图为网格或表格 |
diff --git a/komari-theme.json b/komari-theme.json
index 325c8cb..4ad451f 100644
--- a/komari-theme.json
+++ b/komari-theme.json
@@ -55,6 +55,13 @@
                 "default": "rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)",
                 "help": "调整模糊背景色，推荐 rgba 颜色值，使用“|”分隔亮色模式和暗色模式的颜色值（eg: rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)）"
             },
+            {
+                "key": "enableTransparentTags",
+                "name": "启用标签透明背景",
+                "type": "switch",
+                "default": true,
+                "help": "启用后标签将使用较为透明的背景色，当背景情况复杂导致标签难以辨识时建议关闭"
+            },
             {
                 "key": "tagDefaultColorList",
                 "name": "标签默认颜色列表",
diff --git a/src/components/ui/tag.tsx b/src/components/ui/tag.tsx
index 0781b22..3d33a0a 100644
--- a/src/components/ui/tag.tsx
+++ b/src/components/ui/tag.tsx
@@ -84,6 +84,7 @@ const Tag = React.forwardRef<HTMLDivElement, TagProps>(
   ({ className, tags, ...props }, ref) => {
     // 在组件内部使用 useConfigItem 钩子
     const tagDefaultColorList = useConfigItem("tagDefaultColorList");
+    const enableTransparentTags = useConfigItem("enableTransparentTags");
 
     // 解析配置的颜色列表，仅用于循环排序
     const colorList = React.useMemo(() => {
@@ -100,16 +101,28 @@ const Tag = React.forwardRef<HTMLDivElement, TagProps>(
         {tags.map((tag, index) => {
           const { text, color } = parseTagWithColor(tag);
           const badgeColor = color || colorList[index % colorList.length];
-
-          return (
-            <Badge
-              key={index}
-              color={badgeColor as ColorType}
-              variant="surface"
-              className="text-sm">
-              <label className="text-xs">{text}</label>
-            </Badge>
-          );
+          if (!enableTransparentTags) {
+            return (
+              <Badge
+                key={index}
+                color={badgeColor as ColorType}
+                variant="surface"
+                className="text-sm">
+                <label className="text-xs">{text}</label>
+              </Badge>
+            );
+          } else {
+            return (
+              <div
+                key={index}
+                data-accent-color={badgeColor}
+                className={cn(
+                  "rt-reset rt-Badge rt-r-size-1 transition-colors rt-Badge-tag-transparent"
+                )}>
+                {text}
+              </div>
+            );
+          }
         })}
       </div>
     );
diff --git a/src/config/default.ts b/src/config/default.ts
index 27e9461..c76f8e1 100644
--- a/src/config/default.ts
+++ b/src/config/default.ts
@@ -5,6 +5,7 @@ export interface ConfigOptions {
   videoBackgroundUrl?: string; // 视频背景URL
   blurValue?: number; // 磨砂玻璃模糊值
   blurBackgroundColor?: string; // 磨砂玻璃背景颜色
+  enableTransparentTags?: boolean; // 是否启用标签透明背景
   tagDefaultColorList?: string; // 标签默认颜色列表
   enableLocalStorage?: boolean; // 是否启用本地存储
   selectedDefaultView?: "grid" | "table"; // 默认视图模式
@@ -33,6 +34,7 @@ export const DEFAULT_CONFIG: ConfigOptions = {
   videoBackgroundUrl: "/assets/LanternRivers_1080p15fps2Mbps3s.mp4",
   blurValue: 10,
   blurBackgroundColor: "rgba(255, 255, 255, 0.5)|rgba(0, 0, 0, 0.5)",
+  enableTransparentTags: true,
   tagDefaultColorList:
     "ruby,gray,gold,bronze,brown,yellow,amber,orange,tomato,red",
   enableLocalStorage: true,
diff --git a/src/index.css b/src/index.css
index 706caa3..9e96740 100644
--- a/src/index.css
+++ b/src/index.css
@@ -138,6 +138,18 @@
     --theme-text-muted-color: rgb(from var(--accent-12) r g b / 0.8);
   }
 
+  .dark .rt-Badge-tag-transparent {
+    --tag-transparent-bg: rgb(from var(--accent-11) r g b / 0.4);
+    --tag-transparent-color: rgb(from var(--accent-4) r g b / 0.8);
+    @apply bg-(--tag-transparent-bg) text-(--tag-transparent-color);
+  }
+
+  .rt-Badge-tag-transparent {
+    --tag-transparent-bg: rgb(from var(--accent-4) r g b / 0.4);
+    --tag-transparent-color: rgb(from var(--accent-11) r g b / 0.8);
+    @apply bg-(--tag-transparent-bg) text-(--tag-transparent-color);
+  }
+
   .theme-text-shadow {
     @apply text-shadow-sm text-shadow-(color:--accent-8)/50;
   }