feat: i18n

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, Suspense } from "react";
+import React, { useState, Suspense, useEffect } from "react";
 import { Button, Table, Empty, Tabs, Image } from "antd";
 
 import "highlight.js/styles/github.css";
@@ -22,6 +22,7 @@ import "./App.css";
 import CodeTemplates from "./codeTemplates/codeTemplate";
 import ComplexityRating from "./complexityRating/index";
 import SolutionTemplate from "./solutionTemplate/index";
+import { t, initLang } from "./locales";
 // import { data as a } from "./db/binary-tree";
 
 const DataStrutureVis = isInExtension()
@@ -41,7 +42,7 @@ const chrome = window.chrome;
 
 const columns = [
   {
-    title: "题目",
+    title: t("Locale.app.allSolutions.columns.title"),
     dataIndex: "name",
     width: "300",
     align: "center",
@@ -56,7 +57,7 @@ const columns = [
     ),
   },
   {
-    title: "标签",
+    title: t("Locale.app.allSolutions.columns.tag"),
     dataIndex: "pre",
     align: "center",
     render: (tags) => (
@@ -87,7 +88,9 @@ function App() {
     chrome.tabs &&
     // eslint-disable-next-line
     chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) => {
+      console.log("[leetcode 插件打印]:chrome.tabs.query", tabs);
       const currentUrl = tabs[0].url;
+      initLang(currentUrl);
       const match = currentUrl.match(/problems\/(.+?)\//);
       const problemId = match && match[1];
       setProblemId(problemId);
@@ -145,14 +148,14 @@ function App() {
             <div className="guide">
               {page !== "" ? (
                 <Button type="link" onClick={() => setPage("")}>
-                  回到首页
+                  {t("Locale.app.back")}
                 </Button>
               ) : (
                 ""
               )}
               {hasSolution && page === "" ? (
                 <Button type="link" onClick={() => setPage("detail")}>
-                  查看本题题解
+                  {t("Locale.app.viewSolution")}
                   <img
                     src={viewLogo}
                     alt="view-solution"
@@ -172,8 +175,7 @@ function App() {
                     target="_blank"
                     href={selected[problemId].url}
                   >
-                    该题已被收录到精选合集《{selected[problemId].title}
-                    》点击查看
+                    {t("Locale.app.viewInHandpickCollection",selected[problemId].title)}
                     <img
                       alt="view-solutions"
                       src={collectionLogo}
@@ -183,17 +185,17 @@ function App() {
                   </Button>
                 ) : (
                   <Button type="link" onClick={() => setPage("allSolutions")}>
-                    本题暂未被力扣加加收录，点击查看所有已收录题目~
+                    {t("Locale.app.notCollected")}
                   </Button>
                 ))}
             </div>
             {page === "detail" && <ProblemDetail problemId={problemId} />}
           </div>
 
           <div style={page === "allSolutions" ? {} : { display: "none" }}>
-            <Empty description="正在撰写题解...">
+            <Empty description={t("Locale.app.writingExplanation")}>
               <div className="row" style={{ marginTop: "20px" }}>
-                所有已收录的题目
+                {t("Locale.app.allCollected")}
               </div>
               <Table
                 pagination={{ hideOnSinglePage: true }}
@@ -207,17 +209,20 @@ function App() {
       )}
       {page === "" && (
         <Tabs type="card" activeKey={tab} onChange={setTab}>
-          <TabPane key="code-template" tab="代码模板">
+          <TabPane key="code-template" tab={t("Locale.codeTemplate.name")}>
             <CodeTemplates tempaltes={tempaltes}></CodeTemplates>
           </TabPane>
-          <TabPane key="data-structure-vis" tab="数据结构可视化">
+          <TabPane
+            key="data-structure-vis"
+            tab={t("Locale.dataStructureVisualization.name")}
+          >
             {isInExtension() ? (
               <Button
                 type="link"
                 target="_blank"
                 href="https://leetcode-pp.github.io/leetcode-cheat/?tab=data-structure-vis"
               >
-                去网站使用
+                {t("Locale.app.goToTheWebsiteToUse")}
               </Button>
             ) : (
               <Suspense fallback={<div>Loading...</div>}>
@@ -226,40 +231,39 @@ function App() {
             )}
           </TabPane>
           {!isInExtension() && (
-            <TabPane key="solution-template" tab="题解模板">
+            <TabPane
+              key="solution-template"
+              tab={t("Locale.explanationTemplate.name")}
+            >
               <SolutionTemplate></SolutionTemplate>
             </TabPane>
           )}
 
-          <TabPane key="complexityRating" tab="复杂度速查">
+          <TabPane
+            key="complexityRating"
+            tab={t("Locale.complexityQuickCheck.name")}
+          >
             <ComplexityRating />
           </TabPane>
-          <TabPane key="roadmap" tab="学习路线">
+          <TabPane key="roadmap" tab={t("Locale.learningRoute.name")}>
             <Roadmap />
           </TabPane>
           {isInExtension() && (
-            <TabPane key="checkUpdate" tab="检查更新">
-              <div>
-                一般只要你开启了自动更新，那么当插件更新之后
-                chrome会在五个小时以内自动更新。
-                如果你想第一时间更新，或者您禁用了自动更新，都可以在这里检测最新版。
-              </div>
+            <TabPane key="checkUpdate" tab={t("Locale.checkForUpdates.name")}>
+              <div>{t("Locale.app.checkTips")}</div>
               <Button
                 style={{ margin: "20px 0 0 20px" }}
                 type="primary"
                 onClick={checkUpdate}
               >
-                检查更新
+                {t("Locale.app.checkBtn")}
               </Button>
             </TabPane>
           )}
 
-          <TabPane key="about" tab="关于我">
+          <TabPane key="about" tab={t("Locale.aboutMe.name")}>
             <div>
-              作者是一个 Github 40K star 的前端架构师，leetcode 刷题插件
-              leetcode-cheatsheet
-              作者，掌握各种算法套路，写了十几万字的算法刷题套路电子书，公众号回复
-              <b>电子书</b>获取。
+              <div>{t("Locale.app.selfIntroduction")}</div>
               <Image src="https://p.ipic.vip/h9nm77.jpg"></Image>
             </div>
           </TabPane>

src/contentScript.js

@@ -348,17 +348,17 @@ int main()
 
 function getCodeLanguage() {
   const langMap = {
-    cpp: "C++",
-    python3: "Python3",
-    java: "Java",
-    c: "C",
-    javascript: "JavaScript",
-  };
-  const l =
-    window?.monaco?.editor?.getModels()[0]?.getLanguageId() ||
-    localStorage.getItem("global_lang");
+    "cpp": "C++",
+    "python3": "Python3",
+    "java": "Java",
+    "c": "C",
+    "javascript": "JavaScript",
+  }
+  const l =window?.monaco?.editor?.getModels()[0]?.getLanguageId() ||
+    localStorage.getItem("global_lang")
+
+  return langMap[l.toLowerCase()]
 
-  return langMap[l.toLowerCase()];
 }
 function insertButton() {
   const customBtnStyle = {

src/locales/cn.js

@@ -0,0 +1,45 @@
+export const cn = {
+  app: {
+    back: "返回主页",
+    viewSolution: "查看本题题解",
+    viewInHandpickCollection:"该题已被收录到精选合集《{slotText}》点击查看",
+    notCollected: "本题暂未被力扣加加收录，点击查看所有已收录题目~",
+    allCollected: "所有已收录的题目",
+    writingExplanation: "正在撰写题解...",
+    goToTheWebsiteToUse: "去网站使用",
+    checkTips:
+      "一般只要你开启了自动更新，那么当插件更新之后chrome会在五个小时以内自动更新。如果你想第一时间更新，或者您禁用了自动更新，都可以在这里检测最新版。",
+    checkBtn: "检测更新",
+    selfIntroduction:
+      "作者是一个 Github 40K star 的前端架构师，leetcode 刷题插件leetcode-cheatsheet作者，掌握各种算法套路，写了十几万字的算法刷题套路电子书，公众号回复【电子书】获取。",
+    allSolutions: {
+      columns: {
+        title: "题目",
+        tag: "标签",
+      },
+    },
+  },
+  codeTemplate: {
+    name: "代码模板",
+  },
+  dataStructureVisualization: {
+    name: "数据结构可视化",
+  },
+
+  explanationTemplate: {
+    name: "题解模板",
+  },
+  complexityQuickCheck: {
+    name: "复杂度速查",
+  },
+  learningRoute: {
+    name: "学习路线",
+  },
+  checkForUpdates: {
+    name: "检查更新",
+  },
+  aboutMe: {
+    name: "关于我",
+  },
+};
+export default cn;

src/locales/en.js

@@ -0,0 +1,46 @@
+export const en = {
+    app: {
+      back: "Back to Home page",
+      viewSolution: "View solution",
+      viewInHandpickCollection:"This question has been collected in the handpick collection《{slotText}》Click to view",
+      notCollected: "This question has not been collected by LeetCode Plus, click to view all collected questions",
+      allCollected: "All collected questions",
+      writingExplanation: "Writing explanation",
+      goToTheWebsiteToUse: "Go to the website to use",
+      checkTips:
+        "Generally, as long as you turn on automatic updates, chrome will automatically update within five hours after the plug-in is updated. If you want to update as soon as possible, or if you disable automatic updates, you can check the latest version here.",
+      checkBtn: "Check for updates",
+      selfIntroduction:
+        "The author is a front-end architect with 40K stars on Github, the author of the leetcode-cheatsheet leetcode plugin, master all kinds of algorithm routines, and wrote hundreds of thousands of words of algorithm brushing e-books. Reply to the public account [电子书] to get.",
+      allSolutions: {
+        columns: {
+          title: "Title",
+          tag: "Tag",
+        },
+      },
+    },
+    codeTemplate: {
+      name: "Code Template",
+    },
+    dataStructureVisualization: {
+      name: "Data Structure Visualization",
+    },
+
+    explanationTemplate: {
+      name: "Explanation Template",
+    },
+    complexityQuickCheck: {
+      name: "Complexity Quick Check",
+    },
+    learningRoute: {
+      name: "Learning Route",
+    },
+    checkForUpdates: {
+      name: "Check for Updates",
+    },
+    aboutMe: {
+      name: "About Me",
+    },
+  };
+  export default en;
+

src/locales/index.js

@@ -0,0 +1,57 @@
+import cn from "./cn";
+import en from "./en";
+// import { getStorage, setStorage } from "../utils";
+// const STORAGE_LANG_KEY = "LEETCODE_CHEAT_LANG";
+const LEETCODE_URL_CN = "https://leetcode.cn";
+const LEETCODE_URL_EN = "https://leetcode.com";
+const DEFAULT_LANG = "cn";
+
+let lang = DEFAULT_LANG;
+
+const ALL_LANGS = {
+  cn,
+  en,
+};
+
+export const ALL_LANG_OPTIONS = {
+  cn: "简体中文",
+  en: "English",
+};
+
+export const AllLangs = Object.keys(ALL_LANGS);
+
+export const initLang = async (currentUrl) => {
+  const isCnHref = currentUrl.includes(LEETCODE_URL_CN);
+  setLang(isCnHref ? "cn" : "en");
+};
+
+export const setLang = (_lang) => {
+  lang = _lang || DEFAULT_LANG;
+};
+
+const getForPath = (obj, path) => {
+  const pathArr = path.split(".");
+  let result = obj;
+  for (const key of pathArr) {
+    result = result[key];
+  }
+  return result;
+};
+
+export const t = (keypath, slotText) => {
+  const langData ={ Locale: ALL_LANGS[lang] }
+  if (!keypath) return "";
+  let content = getForPath(langData, keypath);
+  if (slotText) {
+    if (Array.isArray(slotText)) {
+      slotText.map((item, idx) => {
+        content = content.replace(`{${idx}}`, item);
+      })
+    } else {
+      content = content.replace("{slotText}", slotText);
+    }
+  }
+  return content;
+};
+
+export default ALL_LANGS[lang];