refactor: 重构系统图标深色模式适配: 智能识别单色图标并选择性着色

- 为 OSConfig 添加 isMonochrome 属性，识别单色和彩色图标
- 只对单色图标 (macOS, OpenWrt, ImmortalWrt, 默认图标) 应用颜色反转
- 保留彩色图标 (Ubuntu, Debian, Arch, Windows 等) 的原始外观
- 添加 isOSIconMonochrome() 函数用于判断图标类型
- 使用 os-icon-mono 类替代 os-icon，实现精确的样式控制

README.md

@@ -21,6 +21,9 @@
 2. **移除了点亮地区版块** - 从状态栏和相关配置中完全移除了点亮地区统计功能
 3. **增加了安卓系统支持** - 添加了安卓系统的图标和识别方案，可以正确识别安卓系统设备
 4. **优化了模拟数据** - 调整了模拟数据的生成逻辑，默认关闭模拟数据模式以便生产环境使用
+5. **改进了分组栏样式** - 优化了分组栏的垂直内边距和水平间距，增加了 "分组" 标签与第一个 tab 的间距，提升了界面的视觉平衡感
+
+> 上述修改内容由 Visual Studio Code GitHub Copilot Agent 协助完成
 
 ## 🚀 快速开始
 

src/components/sections/NodeCard.tsx

@@ -3,6 +3,7 @@ import {
   formatBytes,
   formatUptime,
   getOSImage,
+  isOSIconMonochrome,
   formatTrafficLimit,
 } from "@/utils";
 import type { NodeWithStatus } from "@/types/node";
@@ -50,7 +51,9 @@ export const NodeCard = ({
             <img
               src={getOSImage(node.os)}
               alt={node.os}
-              className="w-6 h-6 object-contain"
+              className={`w-6 h-6 object-contain ${
+                isOSIconMonochrome(node.os) ? "os-icon-mono" : ""
+              }`}
               loading="lazy"
             />
             <CardTitle className="text-base font-bold">{node.name}</CardTitle>

src/index.css

@@ -83,7 +83,7 @@
 }
 
 .dark {
-  --background: #0a0a0a;
+  --background: #000000;
   --foreground: #fafafa;
   --card: var(--card-dark, #17171780);
   --card-foreground: #fafafa;
@@ -140,6 +140,11 @@
     --purcarte-card-color: var(--card-dark);
   }
 
+  /* 深色模式下的卡片/面板背景色 */
+  .dark {
+    --card-dark: rgba(30, 30, 30, 0.8);
+  }
+
   .purcarte-blur {
     @apply bg-(--purcarte-card-color)! backdrop-blur-(--purcarte-blur)!;
   }
@@ -163,12 +168,26 @@
   }
 
   .theme-card-style {
-    @apply rounded-lg shadow-sm shadow-(color:--accent-12)/50 box-border border border-(--accent-12)/50;
+    @apply rounded-lg shadow-sm shadow-(color:--accent-12)/20 box-border border border-(--accent-12)/25;
+  }
+
+  /* 深色模式下的卡片样式 */
+  .dark .theme-card-style {
+    @apply shadow-sm shadow-white/10 border-white/20;
   }
 
   .theme-text-muted {
     @apply text-(--theme-text-muted-color);
   }
+
+  /* 深色模式下的单色系统图标样式 */
+  .os-icon-mono {
+    transition: filter 0.2s ease-in-out;
+  }
+
+  .dark .os-icon-mono {
+    filter: brightness(0) invert(1);
+  }
 }
 
 /* 背景图片伪元素 */

src/main.tsx

@@ -1,4 +1,4 @@
-import { StrictMode, useState, lazy, Suspense } from "react";
+import { StrictMode, useState, lazy, Suspense, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import "./index.css";
@@ -29,6 +29,16 @@ export const AppContent = () => {
   const enableVideoBackground = useConfigItem("enableVideoBackground");
   const videoBackgroundUrl = useConfigItem("videoBackgroundUrl");
 
+  // 动态设置 HTML 根元素的 dark 类
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+    if (appearance === "dark") {
+      htmlElement.classList.add("dark");
+    } else {
+      htmlElement.classList.remove("dark");
+    }
+  }, [appearance]);
+
   return (
     <>
       {enableVideoBackground && videoBackgroundUrl && (

src/pages/Home.tsx

@@ -136,8 +136,8 @@ const HomePage: React.FC<HomePageProps> = ({ searchTerm, setSearchTerm }) => {
 
       <main className="flex-1 px-4 pb-4">
         {enableGroupedBar && (
-          <div className="flex purcarte-blur theme-card-style overflow-auto whitespace-nowrap overflow-x-auto items-center min-w-[300px] text-secondary-foreground space-x-4 px-4 mb-4">
-            <span>分组</span>
+          <div className="flex purcarte-blur theme-card-style overflow-auto whitespace-nowrap overflow-x-auto items-center min-w-[300px] text-secondary-foreground space-x-2 px-4 py-3 mb-4">
+            <span className="mr-4">分组</span>
             {groups.map((group: string) => (
               <Button
                 key={group}

src/utils/osImageHelper.ts

@@ -7,6 +7,7 @@ interface OSConfig {
   name: string;
   image: string;
   keywords: string[];
+  isMonochrome: boolean; // 是否为单色图标，深色模式下需要颜色反转
 }
 
 // 操作系统匹配组
@@ -15,136 +16,163 @@ const osConfigs: OSConfig[] = [
     name: "Android",
     image: "/assets/os-android.svg",
     keywords: ["android", "lineage", "lineageos", "aosp", "android os"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "Alibaba",
     image: "/assets/os-alibaba.svg",
     keywords: ["alibaba"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "AlmaLinux",
     image: "/assets/os-alma.svg",
     keywords: ["alma", "almalinux"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "Alpine Linux",
     image: "/assets/os-alpine.webp",
     keywords: ["alpine", "alpine linux"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "Arch Linux",
     image: "/assets/os-arch.svg",
     keywords: ["arch", "archlinux", "arch linux"],
+    isMonochrome: false, // 蓝色图标
   },
   {
     name: "Armbian",
     image: "/assets/os-armbian.svg",
     keywords: ["armbian"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "CentOS",
     image: "/assets/os-centos.svg",
     keywords: ["centos", "cent os"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "Debian",
     image: "/assets/os-debian.svg",
     keywords: ["debian", "deb"],
+    isMonochrome: false, // 红色图标
   },
   {
     name: "Fedora",
     image: "/assets/os-fedora.svg",
     keywords: ["fedora"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "FreeBSD",
     image: "/assets/os-freebsd.svg",
     keywords: ["freebsd", "bsd"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "Gentoo",
     image: "/assets/os-gentoo.svg",
     keywords: ["gentoo"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "ImmortalWrt",
     image: "/assets/os-openwrt.svg",
     keywords: ["immortalwrt", "immortal", "emmortal"],
+    isMonochrome: true, // 单色黑色图标
   },
   {
     name: "iStoreOS",
     image: "/assets/os-istore.png",
     keywords: ["istore", "istoreos", "istore os"],
+    isMonochrome: false, // PNG 彩色图标
   },
   {
     name: "Kali Linux",
     image: "/assets/os-kail.svg",
     keywords: ["kail", "kali", "kali linux"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "Linux Mint",
     image: "/assets/os-mint.svg",
     keywords: ["mint", "linux mint"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "macOS",
     image: "/assets/os-macos.svg",
     keywords: ["macos"],
+    isMonochrome: true, // 纯黑色图标
   },
   {
     name: "Manjaro",
     image: "/assets/os-manjaro-.svg",
     keywords: ["manjaro"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "NixOS",
     image: "/assets/os-nix.svg",
     keywords: ["nixos", "nix os", "nix"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "OpenCloudOS",
     image: "/assets/os-opencloud.svg",
     keywords: ["opencloud"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "openSUSE",
     image: "/assets/os-openSUSE.svg",
     keywords: ["opensuse", "suse"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "OpenWrt",
     image: "/assets/os-openwrt.svg",
     keywords: ["openwrt", "open wrt", "open-wrt", "qwrt"],
+    isMonochrome: true, // 单色黑色图标
   },
   {
     name: "Proxmox VE",
     image: "/assets/os-proxmox.ico",
     keywords: ["proxmox", "proxmox ve"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "Red Hat",
     image: "/assets/os-redhat.svg",
     keywords: ["redhat", "rhel", "red hat"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "Rocky Linux",
     image: "/assets/os-rocky.svg",
     keywords: ["rocky", "rocky linux"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "Synology DSM",
     image: "/assets/os-synology.ico",
     keywords: ["synology", "dsm", "synology dsm"],
+    isMonochrome: false, // 彩色图标
   },
   {
     name: "Ubuntu",
     image: "/assets/os-ubuntu.svg",
     keywords: ["ubuntu", "elementary"],
+    isMonochrome: false, // 橙色图标
   },
   {
     name: "Windows",
     image: "/assets/os-windows.svg",
     keywords: ["windows", "win", "microsoft", "ms"],
+    isMonochrome: false, // 蓝色图标
   },
 ];
 
@@ -153,6 +181,7 @@ const defaultOSConfig: OSConfig = {
   name: "Unknown",
   image: "/assets/TablerHelp.svg",
   keywords: ["unknown"],
+  isMonochrome: true, // 默认图标是单色的
 };
 
 /**
@@ -189,6 +218,15 @@ export function getOSImage(osString: string): string {
   return findOSConfig(osString).image;
 }
 
+/**
+ * 根据输入字符串匹配返回操作系统图标是否为单色
+ * @param osString - 操作系统相关的字符串
+ * @returns 是否为单色图标，单色图标在深色模式下需要颜色反转
+ */
+export function isOSIconMonochrome(osString: string): boolean {
+  return findOSConfig(osString).isMonochrome;
+}
+
 /**
  * 获取所有可用的操作系统图像
  * @returns 所有操作系统图像的映射表