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

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

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

@@ -179,6 +179,15 @@
   .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/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 所有操作系统图像的映射表