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 所有操作系统图像的映射表