✨ 添加i18n所见即所得模式

Author: CodFrm

CONTRIBUTING.md

@@ -79,6 +79,14 @@ npm start
 - `src/locales`为[扩展](https://github.com/scriptscat/scriptcat)翻译文件目录
 - `public/locales`为[脚本站](https://github.com/scriptscat/scriptlist-frontend)的翻译文件目录
 
+#### 扩展开启所见即所得模式
+
+扩展开启所见即所得模式需要使用`npm run i18n`模式进行构建，然后通过控制台设置伪语言`localStorage['language']='ach-UG';`，然后刷新页面。
+
+#### 脚本站开启所见即所得模式
+
+脚本站访问：[https://scriptcat.org/ach-UG](https://scriptcat.org/ach-UG) 即可开启所见即所得模式
+
 ## 参与开发
 
 ScriptCat 使用 ESLint 来规范代码风格，使用 Jest

build/assets/_locales/i18n.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line no-underscore-dangle, no-var
+var _jipt = [];
+_jipt.push(["project", "scriptcat"]);

build/assets/template/confirm.html

@@ -21,4 +21,11 @@
       color: var(--color-text-1);
     }
   </style>
+  <% if (htmlWebpackPlugin.options.mode === 'i18n') { %>
+  <script type="text/javascript" src="/_locales/i18n.js"></script>
+  <script
+    type="text/javascript"
+    src="https://cdn.crowdin.com/jipt/jipt.js"
+  ></script>
+  <% } %>
 </html>

build/assets/template/import.html

@@ -21,4 +21,11 @@
       color: var(--color-text-1);
     }
   </style>
+  <% if (htmlWebpackPlugin.options.mode === 'i18n') { %>
+  <script type="text/javascript" src="/_locales/i18n.js"></script>
+  <script
+    type="text/javascript"
+    src="https://cdn.crowdin.com/jipt/jipt.js"
+  ></script>
+  <% } %>
 </html>

build/assets/template/install.html

@@ -21,4 +21,11 @@
       color: var(--color-text-1);
     }
   </style>
+  <% if (htmlWebpackPlugin.options.mode === 'i18n') { %>
+  <script type="text/javascript" src="/_locales/i18n.js"></script>
+  <script
+    type="text/javascript"
+    src="https://cdn.crowdin.com/jipt/jipt.js"
+  ></script>
+  <% } %>
 </html>

build/assets/template/options.html

@@ -22,4 +22,11 @@
       color: var(--color-text-1);
     }
   </style>
+  <% if (htmlWebpackPlugin.options.mode === 'i18n') { %>
+  <script type="text/javascript" src="/_locales/i18n.js"></script>
+  <script
+    type="text/javascript"
+    src="https://cdn.crowdin.com/jipt/jipt.js"
+  ></script>
+  <% } %>
 </html>

build/assets/template/popup.html

@@ -26,4 +26,11 @@
       /* overflow: hidden; */
     }
   </style>
+  <% if (htmlWebpackPlugin.options.mode === 'i18n') { %>
+  <script type="text/javascript" src="/_locales/i18n.js"></script>
+  <script
+    type="text/javascript"
+    src="https://cdn.crowdin.com/jipt/jipt.js"
+  ></script>
+  <% } %>
 </html>

package.json

@@ -15,7 +15,8 @@
     "dev:linter": "webpack --mode development --config ./webpack/webpack.linter.dev.ts",
     "pack": "node ./build/pack.js",
     "changlog": "gitmoji-changelog",
-    "crowdin": "crowdin"
+    "crowdin": "crowdin",
+    "i18n": "concurrently \"webpack --mode development --config ./webpack/webpack.i18n.ts\" \"webpack --mode development --config ./webpack/webpack.inject.dev.ts\""
   },
   "dependencies": {
     "@arco-design/web-react": "^2.51.1",

src/locales/locales.ts

@@ -6,6 +6,7 @@ import { Metadata } from "@App/app/repo/scripts";
 import enUS from "./en/translation.json";
 import zhCN from "./zh-CN/translation.json";
 import zhTW from "./zh-TW/translation.json";
+import achUG from "./ach-UG/translation.json";
 import "dayjs/locale/zh-cn";
 
 i18n.use(initReactI18next).init({
@@ -18,6 +19,7 @@ i18n.use(initReactI18next).init({
     "en-US": { title: "English", translation: enUS },
     "zh-CN": { title: "简体中文", translation: zhCN },
     "zh-TW": { title: "繁体中文", translation: zhTW },
+    "ach-UG": { title: "伪语言", translation: achUG },
   },
 });
 

src/pages/options/routes/Setting.tsx

@@ -42,6 +42,9 @@ function Setting() {
   const languageList: { key: string; title: string }[] = [];
   const { t } = useTranslation();
   Object.keys(i18n.store.data).forEach((key) => {
+    if (key === "ach-UG") {
+      return;
+    }
     languageList.push({
       key,
       title: i18n.store.data[key].title as string,