🐛 修复i18n在没有支持语言下无法保存的问题 #485

Fixed the issue that i18n cannot be saved without supporting languages

Author: CodFrm

src/locales/locales.ts

@@ -10,15 +10,19 @@ import zhTW from "./zh-TW/translation.json";
 import achUG from "./ach-UG/translation.json";
 import jaJP from "./ja/translation.json";
 import deDE from "./de/translation.json";
+import "dayjs/locale/en";
+import "dayjs/locale/vi";
 import "dayjs/locale/zh-cn";
 import "dayjs/locale/zh-tw";
 import "dayjs/locale/ja";
 import "dayjs/locale/de";
 import { systemConfig } from "@App/pages/store/global";
 
+const uiLanguage = chrome.i18n.getUILanguage();
+
 i18n.use(initReactI18next).init({
-  fallbackLng: "en",
-  lng: chrome.i18n.getUILanguage(),
+  fallbackLng: "en-US",
+  lng: globalThis.localStorage ? localStorage["language"] || uiLanguage : uiLanguage, // 优先使用localStorage中的语言设置
   interpolation: {
     escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
   },
@@ -35,15 +39,18 @@ i18n.use(initReactI18next).init({
 
 export let localePath = "";
 
-chrome.i18n.getAcceptLanguages((lngs) => {
-  systemConfig.getLanguage(lngs).then((lng) => {
-    i18n.changeLanguage(lng);
-    dayjs.locale(lng.toLocaleLowerCase());
-    if (lng !== "zh-CN") {
-      localePath = "en";
-    }
-  });
-});
+async function initLanguage() {
+  const lng = await systemConfig.getLanguage();
+  i18n.changeLanguage(lng);
+  dayjs.locale(lng.toLocaleLowerCase());
+  if (lng !== "zh-CN") {
+    localePath = "en";
+  }
+}
+
+setTimeout(() => {
+  initLanguage();
+}, 0);
 
 dayjs.extend(relativeTime);
 
@@ -59,4 +66,17 @@ export function i18nDescription(script: { metadata: Metadata }) {
     : script.metadata.description;
 }
 
+// 匹配语言
+export async function matchLanguage() {
+  const acceptLanguages = await chrome.i18n.getAcceptLanguages();
+  // 遍历数组寻找匹配语言
+  for (let i = 0; i < acceptLanguages.length; i += 1) {
+    const lng = acceptLanguages[i];
+    if (i18n.hasResourceBundle(lng, "translation")) {
+      return lng;
+    }
+  }
+  return "";
+}
+
 export default i18n;

src/pages/components/layout/MainLayout.tsx

@@ -17,18 +17,21 @@ import {
   IconCloseCircle,
   IconDesktop,
   IconDown,
+  IconLanguage,
   IconLink,
   IconMoonFill,
   IconSunFill,
 } from "@arco-design/web-react/icon";
-import React, { ReactNode, useRef, useState } from "react";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import "./index.css";
 import { useAppDispatch, useAppSelector } from "@App/pages/store/hooks";
 import { selectThemeMode, setDarkMode } from "@App/pages/store/features/config";
 import { RiFileCodeLine, RiImportLine, RiPlayListAddLine, RiTerminalBoxLine, RiTimerLine } from "react-icons/ri";
 import { scriptClient } from "@App/pages/store/features/script";
 import { useDropzone } from "react-dropzone";
+import i18n, { matchLanguage } from "@App/locales/locales";
+import { systemConfig } from "@App/pages/store/global";
 
 const readFile = (file: File): Promise<string> => {
   return new Promise((resolve) => {
@@ -57,7 +60,6 @@ const uploadFiles = async (files: File[], importByUrlsFunc: (urls: string[]) =>
   importByUrlsFunc(urls);
 };
 
-
 const MainLayout: React.FC<{
   children: ReactNode;
   className: string;
@@ -67,6 +69,7 @@ const MainLayout: React.FC<{
   const dispatch = useAppDispatch();
   const importRef = useRef<RefTextAreaType>(null);
   const [importVisible, setImportVisible] = useState(false);
+  const [showLanguage, setShowLanguage] = useState(false);
   const { t } = useTranslation();
 
   const importByUrlsLocal = async (urls: string[]) => {
@@ -104,6 +107,30 @@ const MainLayout: React.FC<{
     },
   });
 
+  const languageList: { key: string; title: string }[] = [];
+  Object.keys(i18n.store.data).forEach((key) => {
+    if (key === "ach-UG") {
+      return;
+    }
+    languageList.push({
+      key,
+      title: i18n.store.data[key].title as string,
+    });
+  });
+  languageList.push({
+    key: "help",
+    title: t("help_translate"),
+  });
+
+  useEffect(() => {
+    // 当没有匹配语言且系统配置中没有设置语言时显示语言按钮
+    matchLanguage().then((result) => {
+      if (!result) {
+        setShowLanguage(true);
+      }
+    });
+  });
+
   return (
     <ConfigProvider
       renderEmpty={() => {
@@ -130,12 +157,7 @@ const MainLayout: React.FC<{
               setImportVisible(false);
             }}
           >
-            <Input.TextArea
-              ref={importRef}
-              rows={8}
-              placeholder={t("import_script_placeholder")}
-              defaultValue=""
-            />
+            <Input.TextArea ref={importRef} rows={8} placeholder={t("import_script_placeholder")} defaultValue="" />
           </Modal>
           <div className="flex row items-center">
             <img style={{ height: "40px" }} src="/assets/logo.png" alt="ScriptCat" />
@@ -232,6 +254,40 @@ const MainLayout: React.FC<{
                 className="!text-lg"
               />
             </Dropdown>
+            {showLanguage && (
+              <Dropdown
+                droplist={
+                  <Menu>
+                    {languageList.map((value) => (
+                      <Menu.Item
+                        key={value.key}
+                        onClick={() => {
+                          if (value.key === "help") {
+                            window.open("https://crowdin.com/project/scriptcat", "_blank");
+                            return;
+                          }
+                          systemConfig.setLanguage(value.key);
+                          Message.success(t("language_change_tip")!);
+                        }}
+                      >
+                        {value.title}
+                      </Menu.Item>
+                    ))}
+                  </Menu>
+                }
+              >
+                <Button
+                  type="text"
+                  size="small"
+                  iconOnly
+                  icon={<IconLanguage />}
+                  style={{
+                    color: "var(--color-text-1)",
+                  }}
+                  className="!text-lg"
+                ></Button>
+              </Dropdown>
+            )}
           </Space>
         </Layout.Header>
         <Layout

src/pkg/config/config.ts

@@ -3,7 +3,7 @@ import ChromeStorage from "./chrome_storage";
 import { defaultConfig } from "../../../packages/eslint/linter-config";
 import { FileSystemType } from "@Packages/filesystem/factory";
 import { MessageQueue } from "@Packages/message/message_queue";
-import i18n from "@App/locales/locales";
+import i18n, { matchLanguage } from "@App/locales/locales";
 import dayjs from "dayjs";
 import { ExtVersion } from "@App/app/const";
 
@@ -235,27 +235,28 @@ export class SystemConfig {
     this.set("menu_expand_num", val);
   }
 
-  async getLanguage(acceptLanguages?: string[]): Promise<string> {
-    const defaultLanguage = await new Promise<string>(async (resolve) => {
-      if (!acceptLanguages) {
-        acceptLanguages = await chrome.i18n.getAcceptLanguages();
+  async getLanguage() {
+    if (globalThis.localStorage) {
+      const cachedLanguage = localStorage.getItem("language");
+      if (cachedLanguage) {
+        return cachedLanguage;
       }
-      // 遍历数组寻找匹配语言
-      for (let i = 0; i < acceptLanguages.length; i += 1) {
-        const lng = acceptLanguages[i];
-        if (i18n.hasResourceBundle(lng, "translation")) {
-          resolve(lng);
-          break;
-        }
-      }
-    });
-    return this.get("language", defaultLanguage || chrome.i18n.getUILanguage());
+    }
+    let lng = await this.get("language", (await matchLanguage()) || chrome.i18n.getUILanguage());
+    // 设置进入缓存
+    if (globalThis.localStorage) {
+      localStorage.setItem("language", lng);
+    }
+    return lng;
   }
 
   setLanguage(value: any) {
     this.set("language", value);
     i18n.changeLanguage(value);
     dayjs.locale(value.toLocaleLowerCase());
+    if (globalThis.localStorage) {
+      localStorage.setItem("language", value);
+    }
   }
 
   setCheckUpdate(data: { notice: string; version: string; isRead: boolean }) {