fix: nation flags in windows

app/[locale]/layout.tsx

@@ -1,6 +1,8 @@
 // @auto-i18n-check. Please do not delete the line.
 
 import "@/styles/globals.css";
+import "/node_modules/flag-icons/css/flag-icons.min.css";
+
 import React from "react";
 import { NextIntlClientProvider, useMessages } from "next-intl";
 import { PublicEnvScript } from "next-runtime-env";

components/ServerCard.tsx

@@ -11,18 +11,40 @@ import { cn, formatNezhaInfo } from "@/lib/utils";
 import ServerCardPopover from "./ServerCardPopover";
 import getUnicodeFlagIcon from "country-flag-icons/unicode";
 import { env } from "next-runtime-env";
+import { useEffect, useState } from "react";
 
 export default function ServerCard({
   serverInfo,
 }: {
   serverInfo: NezhaAPISafe;
 }) {
+  const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false);
+
+  useEffect(() => {
+    const checkEmojiSupport = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      const emojiFlag = "🇺🇸"; // 使用美国国旗作为测试
+      if (!ctx) return;
+      ctx.fillStyle = "#000";
+      ctx.textBaseline = 'top';
+      ctx.font = '32px Arial';
+      ctx.fillText(emojiFlag, 0, 0);
+
+      const support = ctx.getImageData(16, 16, 1, 1).data[3] !== 0;
+      setSupportsEmojiFlags(support);
+    };
+
+    checkEmojiSupport();
+  }, []);
+
   const t = useTranslations("ServerCard");
   const { name, country_code, online, cpu, up, down, mem, stg, ...props } =
     formatNezhaInfo(serverInfo);
 
   const showFlag = env("NEXT_PUBLIC_ShowFlag") === "true";
 
+
   return online ? (
     <Card
       className={
@@ -33,13 +55,13 @@ export default function ServerCard({
         <PopoverTrigger asChild>
           <section className={"flex items-center justify-start gap-2 lg:w-28"}>
             {showFlag ? (
-              country_code ? (
-                <span className="text-[12px] text-muted-foreground">
-                  {getUnicodeFlagIcon(country_code)}
-                </span>
-              ) : (
-                <span className="text-[12px] text-muted-foreground">🏁</span>
-              )
+              <span className="text-[12px] text-muted-foreground">
+                {!supportsEmojiFlags ? (
+                  <span className={`fi fi-${country_code}`}></span>
+                ) : (
+                  getUnicodeFlagIcon(country_code)
+                )}
+              </span>
             ) : null}
             <p
               className={cn(
@@ -114,13 +136,13 @@ export default function ServerCard({
         <PopoverTrigger asChild>
           <section className={"flex items-center justify-start gap-2 lg:w-28"}>
             {showFlag ? (
-              country_code ? (
-                <span className="text-[12px] text-muted-foreground">
-                  {getUnicodeFlagIcon(country_code)}
-                </span>
-              ) : (
-                <span className="text-[12px] text-muted-foreground">🏁</span>
-              )
+              <span className="text-[12px] text-muted-foreground">
+                {!supportsEmojiFlags ? (
+                  <span className={`fi fi-${country_code}`}></span>
+                ) : (
+                  getUnicodeFlagIcon(country_code)
+                )}
+              </span>
             ) : null}
             <p
               className={cn(

package.json

@@ -27,6 +27,7 @@
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.13",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "flag-icons": "^7.2.3",
     "lucide-react": "^0.414.0",
     "luxon": "^3.5.0",
     "next": "^14.2.13",
@@ -47,8 +48,8 @@
     "eslint-plugin-turbo": "^2.1.2",
     "eslint-plugin-unused-imports": "^4.1.4",
     "@next/bundle-analyzer": "^14.2.13",
-    "@types/node": "^22.7.2",
-    "@types/react": "^18.3.9",
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",