Update

Author: ayaka14732

public/locales/en-GB/translation.json

@@ -1,9 +1,9 @@
 {
   "切韻音系自動推導器": "Tshet-uinh Autoderiver",
-  "schemaCompareDifferent": "Found {{count}} different items.",
-  "phonologicalPosition": "Phonological Position",
+  "音韻地位": "Phonological Position",
   "代表字": "Representative Character",
-  "schemaCompareSame": "The results of the program derivation are the same.",
+  "找到 {{count}} 個相異項目。": "Found {{count}} different items.",
+  "方案推導結果相同。": "The results of the program derivation are the same.",
   "全部複製": "Copy all",
   "已複製": "Copied",
   "複製失敗": "Copy failed",
@@ -14,13 +14,16 @@
   "要刪除此方案嗎？": "Delete this scheme?",
   "此動作無法復原。": "This action cannot be undone.",
   "確定": "Confirm",
+  "確定-OK": "OK",
   "取消": "Cancel",
   "關閉": "Close",
+  "新增": "Add",
+  "錯誤": "Error",
   "開啟檔案時發生錯誤": "An error occurred while opening the file",
   "此推導方案無需選項。": "This derivation scheme requires no options.",
-  "載入更多注音方案": "Load More Transcription Schemes",
   "新增方案": "Add New Scheme",
   "新增空白方案……": "Add Blank Scheme...",
+  "載入更多注音方案": "Load More Transcription Schemes",
   "前往舊版": "Go to Legacy Version",
   "推導結果": "Derivation Result",
   "選項": "Options",
@@ -32,5 +35,12 @@
   "比較多個方案，並導出結果相異的音韻地位": "Compare multiple schemes and export differing phonological positions",
   "導出所有音節": "Export all syllables",
   "導出所有音節，並計數": "Export all syllables with counts",
+  "計數": "Count",
+  "方案名稱顯示為": "Display scheme name as",
+  "將所有選項恢復為預設值": "Reset all options to default values",
+  "此選項需要兩個或以上方案": "This option requires two or more schemes",
+  "方案名稱為空": "Scheme name is empty",
+  "方案名稱含有特殊字元": "Scheme name contains special characters",
+  "方案名稱與現有方案重複": "Scheme name duplicates an existing scheme name",
   "轉換異體字": "Convert Variant Characters"
 }

public/locales/zh-HK/translation.json

@@ -1,9 +1,9 @@
 {
   "切韻音系自動推導器": "切韻音系自動推導器",
-  "schemaCompareDifferent": "找到 {{count}} 個相異項目。",
-  "phonologicalPosition": "音韻地位",
+  "音韻地位": "音韻地位",
   "代表字": "代表字",
-  "schemaCompareSame": "方案推導結果相同。",
+  "找到 {{count}} 個相異項目。": "找到 {{count}} 個相異項目。",
+  "方案推導結果相同。": "方案推導結果相同。",
   "全部複製": "全部複製",
   "已複製": "已複製",
   "複製失敗": "複製失敗",
@@ -14,8 +14,11 @@
   "要刪除此方案嗎？": "要刪除此方案嗎？",
   "此動作無法復原。": "此動作無法復原。",
   "確定": "確定",
+  "確定-OK": "確定",
   "取消": "取消",
   "關閉": "關閉",
+  "新增": "新增",
+  "錯誤": "錯誤",
   "開啟檔案時發生錯誤": "開啟檔案時發生錯誤",
   "此推導方案無需選項。": "此推導方案無需選項。",
   "新增方案": "新增方案",
@@ -32,5 +35,12 @@
   "比較多個方案，並導出結果相異的音韻地位": "比較多個方案，並導出結果相異的音韻地位",
   "導出所有音節": "導出所有音節",
   "導出所有音節，並計數": "導出所有音節，並計數",
+  "計數": "計數",
+  "方案名稱顯示為": "方案名稱顯示為",
+  "將所有選項恢復為預設值": "將所有選項恢復為預設值",
+  "此選項需要兩個或以上方案": "此選項需要兩個或以上方案",
+  "方案名稱為空": "方案名稱為空",
+  "方案名稱含有特殊字元": "方案名稱含有特殊字元",
+  "方案名稱與現有方案重複": "方案名稱與現有方案重複",
   "轉換異體字": "轉換異體字"
 }

src/Components/App.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useRef } from "react";
 
+import { t } from "i18next";
 import "purecss/build/pure.css";
+import { useTranslation } from "react-i18next";
 // NOTE sweetalert2's ESM export does not setup styles properly, manually importing
 import "sweetalert2/dist/sweetalert2.css";
 
@@ -12,10 +14,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Main from "./Main";
 import Swal from "../Classes/SwalReact";
 import { codeFontFamily, noop } from "../consts";
-import { useTranslation } from "react-i18next";
-
 import i18n from "../i18n";
-import { t } from "i18next";
 
 injectGlobal`
   html,

src/Components/CreateSchemaDialog.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
+import { t } from "i18next";
+
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { faFile, faFileCode } from "@fortawesome/free-regular-svg-icons";
@@ -14,7 +16,6 @@ import { fetchFile, normalizeFileName, stopPropagation } from "../utils";
 
 import type { Folder, Sample, SchemaState } from "../consts";
 import type { ChangeEventHandler, FormEvent, RefObject } from "react";
-import { t } from "i18next";
 
 const Container = styled.dialog`
   transform: scale(0.9);
@@ -209,9 +210,9 @@ const CreateSchemaDialog = forwardRef<HTMLDialogElement, CreateSchemaDialogProps
 
   const validation = useMemo(() => {
     const name = normalizeFileName(createSchemaName);
-    if (!name) return "方案名稱為空";
-    if (invalidCharsRegex.test(name)) return "方案名稱含有特殊字元";
-    if (hasSchemaName(name)) return "方案名稱與現有方案重複";
+    if (!name) return t("方案名稱為空");
+    if (invalidCharsRegex.test(name)) return t("方案名稱含有特殊字元");
+    if (hasSchemaName(name)) return t("方案名稱與現有方案重複");
     return "";
   }, [createSchemaName, hasSchemaName]);
 
@@ -339,7 +340,7 @@ const CreateSchemaDialog = forwardRef<HTMLDialogElement, CreateSchemaDialogProps
         <Action method="dialog" className="pure-form" onSubmit={addSchema}>
           <Rename>
             <label>
-              <div>方案名稱顯示為</div>
+              <div>{t("方案名稱顯示為")}</div>
               <input
                 ref={inputRef}
                 type="text"
@@ -354,10 +355,10 @@ const CreateSchemaDialog = forwardRef<HTMLDialogElement, CreateSchemaDialogProps
             </label>
           </Rename>
           <button type="reset" className="pure-button" onClick={closeDialog}>
-            取消
+            {t("取消")}
           </button>
           <button type="submit" className="pure-button pure-button-primary">
-            新增
+            {t("新增")}
           </button>
         </Action>
         <Validation>{validation || "\xa0"}</Validation>

src/Components/Main.tsx

@@ -349,7 +349,7 @@ export default function Main({ evaluateHandlerRef }: { evaluateHandlerRef: Mutab
                   <TooltipLabel description={copyTooltipText} onHideTooltip={onHideTooltip}>
                     <CopyButton onClick={copyEvaluationResult}>
                       <FontAwesomeIcon icon={faCopy} size="sm" />
-                      <div>全部複製</div>
+                      <div>{t("全部複製")}</div>
                     </CopyButton>
                   </TooltipLabel>
                   <form method="dialog">

src/Components/SchemaEditor.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
+import { t } from "i18next";
+
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { faFileCode } from "@fortawesome/free-regular-svg-icons";
@@ -26,7 +28,6 @@ import {
 
 import type { UseMainState, ReactNode } from "../consts";
 import type { MouseEvent, MutableRefObject } from "react";
-import { t } from "i18next";
 
 const TabBar = styled.div`
   display: flex;
@@ -590,9 +591,9 @@ export default function SchemaEditor({ state, setState, commonOptions, evaluateH
 
   function validateFileName(name: string) {
     const hasSchemaName = (name: string) => schemas.find(schema => schema.name === name);
-    if (!name) return "方案名稱為空";
-    if (invalidCharsRegex.test(name)) return "方案名稱含有特殊字元";
-    if (hasSchemaName(name)) return "方案名稱與現有方案重複";
+    if (!name) return t("方案名稱為空");
+    if (invalidCharsRegex.test(name)) return t("方案名稱含有特殊字元");
+    if (hasSchemaName(name)) return t("方案名稱與現有方案重複");
     return "";
   }
 
@@ -852,9 +853,9 @@ export default function SchemaEditor({ state, setState, commonOptions, evaluateH
         <OptionsTitle>
           <span>{t("選項")}</span>
           {activeSchema?.parameters.size || activeSchema?.parameters.errors.length ? (
-            <ResetButton title="將所有選項恢復成預設值" onClick={resetParameters}>
+            <ResetButton onClick={resetParameters}>
               <FontAwesomeIcon icon={faRotateLeft} size="sm" />
-              <div>將所有選項恢復成預設值</div>
+              <div>{t("將所有選項恢復為預設值")}</div>
             </ResetButton>
           ) : null}
         </OptionsTitle>

src/evaluate.ts

@@ -1,3 +1,4 @@
+import { t } from "i18next";
 import { 推導方案 } from "tshet-uinh-deriver-tools";
 
 import { Formatter } from "./Classes/CustomElement";
@@ -30,7 +31,7 @@ export default async function evaluate(state: MainState): Promise<ReactNode> {
 
   if (option === "convertPresetArticle" && !getArticle())
     setArticle(await fetchFile(tshetUinhTextLabelURLPrefix + "index.txt"));
-  else if (option === "compareSchemas" && schemas.length < 2) throw notifyError("此選項需要兩個或以上方案");
+  else if (option === "compareSchemas" && schemas.length < 2) throw notifyError(t("此選項需要兩個或以上方案"));
   else await new Promise(resolve => setTimeout(resolve));
 
   try {

src/index.tsx

@@ -3,8 +3,6 @@ import { createRoot } from "react-dom/client";
 
 import App from "./Components/App";
 
-import "./i18n";
-
 const root = createRoot(document.getElementById("root")!);
 root.render(
   <StrictMode>

src/options.tsx

@@ -169,7 +169,7 @@ export const evaluateOption: Record<Option, Handler> = {
   },
 
   exportAllPositions({ schemas }, callDeriver) {
-    return <Table head={["音韻地位", ...title(schemas), "代表字"]} body={finalize(iterate(callDeriver))} />;
+    return <Table head={[t("音韻地位"), ...title(schemas), t("代表字")]} body={finalize(iterate(callDeriver))} />;
   },
 
   exportAllSyllables({ schemas }, callDeriver) {
@@ -192,7 +192,7 @@ export const evaluateOption: Record<Option, Handler> = {
       }, null);
     return (
       <Table
-        head={[...title(schemas), "計數"]}
+        head={[...title(schemas), t("計數")]}
         body={result.sort((a, b) => b[2] - a[2]).map(([, 擬音陣列, count]) => [...wrap(擬音陣列), count + ""])}
       />
     );
@@ -205,16 +205,13 @@ export const evaluateOption: Record<Option, Handler> = {
     return result.length ? (
       <>
         <Title>
-          {t("schemaCompareDifferent", { count: result.length })}
+          {t("找到 {{count}} 個相異項目。", { count: result.length })}
           <span hidden>{"\n\n"}</span>
         </Title>
-        <Table
-          head={[t("phonologicalPosition"), ...title(schemas), t("代表字")]}
-          body={finalize(result)}
-        />
+        <Table head={[t("音韻地位"), ...title(schemas), t("代表字")]} body={finalize(result)} />
       </>
     ) : (
-      <h3>{t("schemaCompareSame")}</h3>
+      <h3>{t("方案推導結果相同。")}</h3>
     );
   },
 };

src/utils.tsx

@@ -1,3 +1,5 @@
+import { t } from "i18next";
+
 import { css as stylesheet } from "@emotion/css";
 import styled from "@emotion/styled";
 
@@ -66,9 +68,9 @@ export function notifyError(msg: string, err?: unknown) {
   }
   const config: SweetAlertOptions = {
     icon: "error",
-    title: "錯誤",
+    title: t("錯誤"),
     text: msg,
-    confirmButtonText: "確定",
+    confirmButtonText: t("確定-OK"),
   };
   if (technical !== null) {
     config.customClass = errorModal;