From fc2b8b6e77d1ccb0c82ae676c2349c138a7546e9 Mon Sep 17 00:00:00 2001 From: FarEastTZ <111120735+FarEastTZ@users.noreply.github.com> Date: Fri, 11 Oct 2024 18:29:30 +0800 Subject: [PATCH 1/5] feat: add force use svg flag --- components/ServerFlag.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/components/ServerFlag.tsx b/components/ServerFlag.tsx index 9f8d90b..2532cbf 100644 --- a/components/ServerFlag.tsx +++ b/components/ServerFlag.tsx @@ -1,10 +1,19 @@ import getUnicodeFlagIcon from "country-flag-icons/unicode"; import { useEffect, useState } from "react"; +import { env } from "next-runtime-env"; export default function ServerFlag({ country_code }: { country_code: string }) { const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false); + const useSvgFlag = env("NEXT_PUBLIC_USE_SVG_FLAG") === "true"; + useEffect(() => { + if (useSvgFlag) { + // 如果环境变量要求直接使用 SVG，则无需检查 Emoji 支持 + setSupportsEmojiFlags(false); + return; + } + const checkEmojiSupport = () => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); @@ -20,7 +29,7 @@ export default function ServerFlag({ country_code }: { country_code: string }) { }; checkEmojiSupport(); - }, []); + }, [useSvgFlag]); // 将 `useSvgFlag` 作为依赖，当其变化时重新触发 if (!country_code) return null; @@ -30,7 +39,7 @@ export default function ServerFlag({ country_code }: { country_code: string }) { return ( - {!supportsEmojiFlags ? ( + {useSvgFlag || !supportsEmojiFlags ? ( ) : ( getUnicodeFlagIcon(country_code) From a962b994c25e5aff288d5574874f0cbb9acd9673 Mon Sep 17 00:00:00 2001 From: FarEastTZ <111120735+FarEastTZ@users.noreply.github.com> Date: Fri, 11 Oct 2024 18:39:42 +0800 Subject: [PATCH 2/5] Revert "feat: add force use svg flag" This reverts commit fc2b8b6e77d1ccb0c82ae676c2349c138a7546e9. --- components/ServerFlag.tsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/components/ServerFlag.tsx b/components/ServerFlag.tsx index 2532cbf..9f8d90b 100644 --- a/components/ServerFlag.tsx +++ b/components/ServerFlag.tsx @@ -1,19 +1,10 @@ import getUnicodeFlagIcon from "country-flag-icons/unicode"; import { useEffect, useState } from "react"; -import { env } from "next-runtime-env"; export default function ServerFlag({ country_code }: { country_code: string }) { const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false); - const useSvgFlag = env("NEXT_PUBLIC_USE_SVG_FLAG") === "true"; - useEffect(() => { - if (useSvgFlag) { - // 如果环境变量要求直接使用 SVG，则无需检查 Emoji 支持 - setSupportsEmojiFlags(false); - return; - } - const checkEmojiSupport = () => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); @@ -29,7 +20,7 @@ export default function ServerFlag({ country_code }: { country_code: string }) { }; checkEmojiSupport(); - }, [useSvgFlag]); // 将 `useSvgFlag` 作为依赖，当其变化时重新触发 + }, []); if (!country_code) return null; @@ -39,7 +30,7 @@ export default function ServerFlag({ country_code }: { country_code: string }) { return ( - {useSvgFlag || !supportsEmojiFlags ? ( + {!supportsEmojiFlags ? ( ) : ( getUnicodeFlagIcon(country_code) From 182829b10b5a68c8373cd39cc0df4dd545e2eb4e Mon Sep 17 00:00:00 2001 From: FarEastTZ <111120735+FarEastTZ@users.noreply.github.com> Date: Fri, 11 Oct 2024 18:44:41 +0800 Subject: [PATCH 3/5] feat: add force use svg flag --- components/ServerFlag.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/components/ServerFlag.tsx b/components/ServerFlag.tsx index 9f8d90b..ab4fc7d 100644 --- a/components/ServerFlag.tsx +++ b/components/ServerFlag.tsx @@ -1,10 +1,19 @@ import getUnicodeFlagIcon from "country-flag-icons/unicode"; import { useEffect, useState } from "react"; +import { env } from "next-runtime-env"; export default function ServerFlag({ country_code }: { country_code: string }) { const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false); + const useSvgFlag = env("ForceUseSvgFlag") === "true"; + useEffect(() => { + if (useSvgFlag) { + // 如果环境变量要求直接使用 SVG，则无需检查 Emoji 支持 + setSupportsEmojiFlags(false); + return; + } + const checkEmojiSupport = () => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); @@ -20,7 +29,7 @@ export default function ServerFlag({ country_code }: { country_code: string }) { }; checkEmojiSupport(); - }, []); + }, [useSvgFlag]); // 将 `useSvgFlag` 作为依赖，当其变化时重新触发 if (!country_code) return null; @@ -30,11 +39,11 @@ export default function ServerFlag({ country_code }: { country_code: string }) { return ( - {!supportsEmojiFlags ? ( + {useSvgFlag || !supportsEmojiFlags ? ( ) : ( getUnicodeFlagIcon(country_code) )} ); -} +} \ No newline at end of file From 8c7baae37e9911488a10f89ea7c65b5d4726cd1e Mon Sep 17 00:00:00 2001 From: FarEastTZ <111120735+FarEastTZ@users.noreply.github.com> Date: Fri, 11 Oct 2024 18:45:17 +0800 Subject: [PATCH 4/5] doc: add ForceUseSvgFlag env --- .env.example | 3 ++- README.md | 1 + docker/.env.example | 3 ++- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/.env.example b/.env.example index 61c94ca..ce50312 100644 --- a/.env.example +++ b/.env.example @@ -5,4 +5,5 @@ NEXT_PUBLIC_NezhaFetchInterval=5000 NEXT_PUBLIC_ShowFlag=true NEXT_PUBLIC_DisableCartoon=false NEXT_PUBLIC_ShowTag=true -NEXT_PUBLIC_ShowNetTransfer=false \ No newline at end of file +NEXT_PUBLIC_ShowNetTransfer=false +NEXT_PUBLIC_ForceUseSvgFlag=false \ No newline at end of file diff --git a/README.md b/README.md index 50a23fb..896ae0a 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ | NEXT_PUBLIC_DisableCartoon | 是否禁用卡通人物 | **默认**：false | | NEXT_PUBLIC_ShowTag | 是否显示标签 | **默认**：false | | NEXT_PUBLIC_ShowNetTransfer | 是否显示流量信息 | **默认**：false | +| NEXT_PUBLIC_ForceUseSvgFlag | 是否强制使用SVG显示旗帜 | **默认**：false | #### 多语言支持 diff --git a/docker/.env.example b/docker/.env.example index 61c94ca..ce50312 100644 --- a/docker/.env.example +++ b/docker/.env.example @@ -5,4 +5,5 @@ NEXT_PUBLIC_NezhaFetchInterval=5000 NEXT_PUBLIC_ShowFlag=true NEXT_PUBLIC_DisableCartoon=false NEXT_PUBLIC_ShowTag=true -NEXT_PUBLIC_ShowNetTransfer=false \ No newline at end of file +NEXT_PUBLIC_ShowNetTransfer=false +NEXT_PUBLIC_ForceUseSvgFlag=false \ No newline at end of file From 431dd61c7104ef425089c947003abe4cf7b18cde Mon Sep 17 00:00:00 2001 From: FarEastTZ <111120735+FarEastTZ@users.noreply.github.com> Date: Fri, 11 Oct 2024 19:24:23 +0800 Subject: [PATCH 5/5] fix: ForceUseSvgFlag env name --- components/ServerFlag.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ServerFlag.tsx b/components/ServerFlag.tsx index ab4fc7d..427da2f 100644 --- a/components/ServerFlag.tsx +++ b/components/ServerFlag.tsx @@ -5,7 +5,7 @@ import { env } from "next-runtime-env"; export default function ServerFlag({ country_code }: { country_code: string }) { const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false); - const useSvgFlag = env("ForceUseSvgFlag") === "true"; + const useSvgFlag = env("NEXT_PUBLIC_ForceUseSvgFlag") === "true"; useEffect(() => { if (useSvgFlag) {