Merge pull request #33 from hamster1963/windows-nation-flag

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

@@ -9,8 +9,9 @@ import {
 } from "@/components/ui/popover";
 import { cn, formatNezhaInfo } from "@/lib/utils";
 import ServerCardPopover from "./ServerCardPopover";
-import getUnicodeFlagIcon from "country-flag-icons/unicode";
+
 import { env } from "next-runtime-env";
+import ServerFlag from "./ServerFlag";
 
 export default function ServerCard({
   serverInfo,
@@ -32,15 +33,7 @@ export default function ServerCard({
       <Popover>
         <PopoverTrigger asChild>
           <section className={"flex items-center justify-start gap-2 lg:w-28"}>
-            {showFlag ? (
+            {showFlag ? <ServerFlag country_code={country_code} /> : null}
-              country_code ? (
-                <span className="text-[12px] text-muted-foreground">
-                  {getUnicodeFlagIcon(country_code)}
-                </span>
-              ) : (
-                <span className="text-[12px] text-muted-foreground">🏁</span>
-              )
-            ) : null}
             <p
               className={cn(
                 "break-all font-bold tracking-tight",
@@ -58,8 +51,6 @@ export default function ServerCard({
       </Popover>
       <section className={"grid grid-cols-5 items-center gap-3"}>
         <div className={"flex w-14 flex-col"}>
-          {" "}
-          {/* 设置固定宽度 */}
           <p className="text-xs text-muted-foreground">{t("CPU")}</p>
           <div className="flex items-center text-xs font-semibold">
             {cpu.toFixed(2)}%
@@ -67,8 +58,6 @@ export default function ServerCard({
           <ServerUsageBar value={cpu} />
         </div>
         <div className={"flex w-14 flex-col"}>
-          {" "}
-          {/* 设置固定宽度 */}
           <p className="text-xs text-muted-foreground">{t("Mem")}</p>
           <div className="flex items-center text-xs font-semibold">
             {mem.toFixed(2)}%
@@ -76,8 +65,6 @@ export default function ServerCard({
           <ServerUsageBar value={mem} />
         </div>
         <div className={"flex w-14 flex-col"}>
-          {" "}
-          {/* 设置固定宽度 */}
           <p className="text-xs text-muted-foreground">{t("STG")}</p>
           <div className="flex items-center text-xs font-semibold">
             {stg.toFixed(2)}%
@@ -85,8 +72,6 @@ export default function ServerCard({
           <ServerUsageBar value={stg} />
         </div>
         <div className={"flex w-14 flex-col"}>
-          {" "}
-          {/* 设置固定宽度 */}
           <p className="text-xs text-muted-foreground">{t("Upload")}</p>
           <div className="flex items-center text-xs font-semibold">
             {up.toFixed(2)}
@@ -94,8 +79,6 @@ export default function ServerCard({
           </div>
         </div>
         <div className={"flex w-14 flex-col"}>
-          {" "}
-          {/* 设置固定宽度 */}
           <p className="text-xs text-muted-foreground">{t("Download")}</p>
           <div className="flex items-center text-xs font-semibold">
             {down.toFixed(2)}
@@ -113,15 +96,7 @@ export default function ServerCard({
       <Popover>
         <PopoverTrigger asChild>
           <section className={"flex items-center justify-start gap-2 lg:w-28"}>
-            {showFlag ? (
+            {showFlag ? <ServerFlag country_code={country_code} /> : null}
-              country_code ? (
-                <span className="text-[12px] text-muted-foreground">
-                  {getUnicodeFlagIcon(country_code)}
-                </span>
-              ) : (
-                <span className="text-[12px] text-muted-foreground">🏁</span>
-              )
-            ) : null}
             <p
               className={cn(
                 "break-all font-bold tracking-tight",

components/ServerFlag.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import getUnicodeFlagIcon from "country-flag-icons/unicode";
+
+export default function ServerFlag({ country_code }: { country_code: string }) {
+  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();
+  }, []);
+
+  if (!country_code) return null;
+
+  return (
+    <span className="text-[12px] text-muted-foreground">
+      {!supportsEmojiFlags ? (
+        <span className={`fi fi-${country_code}`}></span>
+      ) : (
+        getUnicodeFlagIcon(country_code)
+      )}
+    </span>
+  );
+}

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/node": "^22.7.4",
-    "@types/react": "^18.3.9",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",