From b492910f2e531343bfa21a40a1a099b9a0ed606f Mon Sep 17 00:00:00 2001 From: fankesyooni Date: Thu, 18 Sep 2025 16:56:06 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E7=B3=BB?= =?UTF-8?q?=E7=BB=9F=E5=9B=BE=E6=A0=87=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E9=80=82=E9=85=8D:=20=E6=99=BA=E8=83=BD=E8=AF=86=E5=88=AB?= =?UTF-8?q?=E5=8D=95=E8=89=B2=E5=9B=BE=E6=A0=87=E5=B9=B6=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E6=80=A7=E7=9D=80=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 为 OSConfig 添加 isMonochrome 属性，识别单色和彩色图标 - 只对单色图标 (macOS, OpenWrt, ImmortalWrt, 默认图标) 应用颜色反转 - 保留彩色图标 (Ubuntu, Debian, Arch, Windows 等) 的原始外观 - 添加 isOSIconMonochrome() 函数用于判断图标类型 - 使用 os-icon-mono 类替代 os-icon，实现精确的样式控制 --- src/components/sections/NodeCard.tsx | 5 +++- src/index.css | 9 +++++++ src/utils/osImageHelper.ts | 38 ++++++++++++++++++++++++++++ 3 files changed, 51 insertions(+), 1 deletion(-) diff --git a/src/components/sections/NodeCard.tsx b/src/components/sections/NodeCard.tsx index b31e603..0e4d7ad 100644 --- a/src/components/sections/NodeCard.tsx +++ b/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 = ({ {node.os} {node.name} diff --git a/src/index.css b/src/index.css index 90c85f1..61c9729 100644 --- a/src/index.css +++ b/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); + } } /* 背景图片伪元素 */ diff --git a/src/utils/osImageHelper.ts b/src/utils/osImageHelper.ts index 168a269..6f7b422 100644 --- a/src/utils/osImageHelper.ts +++ b/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 所有操作系统图像的映射表