🌐 i18n国际化 #188 (#202)

* ✨ i18n基础框架

* 🚧 i18n基础结构&使用yaml作为i18n语言文件格式

* 🌐 国际化初版 #188

* 🌐 English i18n

* 💚 修复i18n文件错误导致的构建失败

* 🐛 修复i18n的一些问题

Author: CodFrm

example/vscode.user.js

@@ -9,6 +9,5 @@
 
 (function() {
     'use strict';
-
     // Your code here...
 })();

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "scriptcat",
-  "version": "0.14.0",
+  "version": "0.14.0-beta.1",
   "description": "脚本猫,一个可以执行用户脚本的浏览器扩展,万物皆可脚本化,让你的浏览器可以做更多的事情!",
   "author": "CodFrm",
   "license": "GPLv3",
@@ -27,13 +27,15 @@
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.4",
     "dexie": "^3.2.3",
+    "i18next": "^22.5.0",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.37.1",
     "monaco-vim": "^0.3.4",
     "pako": "^2.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^12.3.1",
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.3.0",
     "semver": "^7.3.8",
@@ -95,6 +97,7 @@
     "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.10.0",
-    "webpack-merge": "^5.8.0"
+    "webpack-merge": "^5.8.0",
+    "yaml-loader": "^0.8.0"
   }
 }

package.json

@@ -1,6 +1,6 @@
 import { version } from "../../package.json";
 
-export const ExtVersion = `${version}+1234567`;
+export const ExtVersion = version;
 
 export const ExtServer = "https://ext.scriptcat.org/";
 

src/app/const.ts

@@ -17,6 +17,7 @@ import { SystemConfig } from "./pkg/config/config";
 import SystemManager from "./app/service/system/manager";
 import SynchronizeManager from "./app/service/synchronize/manager";
 import SubscribeManager from "./app/service/subscribe/manager";
+import "@App/locales/locales";
 
 // 数据库初始化
 migrate();

src/background.ts

@@ -0,0 +1,16 @@
+# i18n 方案
+
+i18n 使用[i8next](https://www.i18next.com/)实现，之所以不是用`chrome.i18n`的原因是该方案不支持动态切换语言。但是为了某些扩展市场的要求，我们还是在`build/assets/_locales`目录下添加了`chrome.i18n`的语言文件。
+
+## 语言文件
+
+语言文件位于`src/locales`目录下，按照页面划分，每个页面对应一个语言文件，最终由`index.ts`合并进行导出。
+
+## 关键字冲突
+
+如果页面中的关键字一样，但是翻译不一样，可以使用`page.key`的方式进行区分，例如：
+
+```yaml
+list:
+  confirm_delete: 确定要删除吗？请注意这个操作无法恢复！
+```