chore: update i18n (#212)

* feat: 增加部分 i18n

* feat: 增加部分 i18n

* feat: 增加部分 i18n

web/src/components/CreateShortcutDialog.tsx

@@ -6,6 +6,7 @@ import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import toastHelper from "./Toast";
 import Selector from "./common/Selector";
+import useI18n from "../hooks/useI18n";
 import "../less/create-shortcut-dialog.less";
 
 interface Props extends DialogProps {
@@ -18,6 +19,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
   const [title, setTitle] = useState<string>("");
   const [filters, setFilters] = useState<Filter[]>([]);
   const requestState = useLoading(false);
+  const { t } = useI18n();
 
   const shownMemoLength = memoService.getState().memos.filter((memo) => {
     return checkShouldShowMemoWithFilters(memo, filters);
@@ -99,7 +101,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
       <div className="dialog-header-container">
         <p className="title-text">
           <span className="icon-text">🚀</span>
-          {shortcutId ? "Edit Shortcut" : "Create Shortcut"}
+          {shortcutId ? t("common.edit-shortcut") : t("common.create-shortcut")}
         </p>
         <button className="btn close-btn" onClick={destroy}>
           <Icon.X />
@@ -107,11 +109,11 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
       </div>
       <div className="dialog-content-container">
         <div className="form-item-container input-form-container">
-          <span className="normal-text">Title</span>
+          <span className="normal-text">{t("common.title")}</span>
           <input className="title-input" type="text" placeholder="shortcut title" value={title} onChange={handleTitleInputChange} />
         </div>
         <div className="form-item-container filter-form-container">
-          <span className="normal-text">Filters</span>
+          <span className="normal-text">{t("common.filters")}</span>
           <div className="filters-wrapper">
             {filters.map((f, index) => {
               return (
@@ -125,7 +127,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
               );
             })}
             <div className="create-filter-btn" onClick={handleAddFilterBenClick}>
-              New Filter
+              {t("common.new-filter")}
             </div>
           </div>
         </div>
@@ -134,10 +136,10 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
         <div></div>
         <div className="btns-container">
           <span className={`tip-text ${filters.length === 0 && "hidden"}`}>
-            <strong>{shownMemoLength}</strong> eligible memo
+            <strong>{shownMemoLength}</strong> {t("common.eligible-memo")}
           </span>
           <button className={`btn save-btn ${requestState.isLoading ? "requesting" : ""}`} onClick={handleSaveBtnClick}>
-            Save
+            {t("common.save")}
           </button>
         </div>
       </div>

web/src/components/MemoFilter.tsx

@@ -2,6 +2,7 @@ import { useAppSelector } from "../store";
 import { locationService, shortcutService } from "../services";
 import * as utils from "../helpers/utils";
 import { getTextWithMemoType } from "../helpers/filter";
+import useI18n from "../hooks/useI18n";
 import "../less/memo-filter.less";
 
 const MemoFilter = () => {
@@ -10,10 +11,11 @@ const MemoFilter = () => {
   const { tag: tagQuery, duration, type: memoType, text: textQuery, shortcutId } = query;
   const shortcut = shortcutId ? shortcutService.getShortcutById(shortcutId) : null;
   const showFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || memoType || textQuery || shortcut);
+  const { t } = useI18n();
 
   return (
     <div className={`filter-query-container ${showFilter ? "" : "!hidden"}`}>
-      <span className="tip-text">Filter:</span>
+      <span className="tip-text">{t("common.filter")}:</span>
       <div
         className={"filter-item-container " + (shortcut ? "" : "hidden")}
         onClick={() => {

web/src/components/SearchBar.tsx

@@ -2,10 +2,12 @@ import { locationService } from "../services";
 import { useAppSelector } from "../store";
 import { memoSpecialTypes } from "../helpers/filter";
 import Icon from "./Icon";
+import useI18n from "../hooks/useI18n";
 import "../less/search-bar.less";
 
 const SearchBar = () => {
   const memoType = useAppSelector((state) => state.location.query?.type);
+  const { t } = useI18n();
 
   const handleMemoTypeItemClick = (type: MemoSpecType | undefined) => {
     const { type: prevType } = locationService.getState().query ?? {};
@@ -28,9 +30,9 @@ const SearchBar = () => {
       </div>
       <div className="quickly-action-wrapper">
         <div className="quickly-action-container">
-          <p className="title-text">QUICKLY FILTER</p>
+          <p className="title-text">{t("common.quickly-filter")}</p>
           <div className="section-container types-container">
-            <span className="section-text">Type:</span>
+            <span className="section-text">{t("common.types")}:</span>
             <div className="values-container">
               {memoSpecialTypes.map((t, idx) => {
                 return (

web/src/components/ShortcutList.tsx

@@ -14,6 +14,7 @@ const ShortcutList = () => {
   const query = useAppSelector((state) => state.location.query);
   const shortcuts = useAppSelector((state) => state.shortcut.shortcuts);
   const loadingState = useLoading();
+  const { t } = useI18n();
 
   const pinnedShortcuts = shortcuts
     .filter((s) => s.rowStatus === "ARCHIVED")
@@ -37,7 +38,7 @@ const ShortcutList = () => {
   return (
     <div className="shortcuts-wrapper">
       <p className="title-text">
-        <span className="normal-text">Shortcuts</span>
+        <span className="normal-text">{t("common.shortcuts")}</span>
         <button className="btn" onClick={() => showCreateShortcutDialog()}>
           <Icon.Plus className="icon-img" />
         </button>

web/src/components/TagList.tsx

@@ -69,7 +69,7 @@ const TagList = () => {
 
   return (
     <div className="tags-wrapper">
-      <p className="title-text">Tags</p>
+      <p className="title-text">{t("common.tags")}</p>
       <div className="tags-container">
         {tags.map((t, idx) => (
           <TagItemContainer key={t.text + "-" + idx} tag={t} tagQuery={query?.tag} />

web/src/locales/en.json

@@ -25,7 +25,18 @@
     "explore": "Explore",
     "sign-in": "Sign in",
     "sign-out": "Sign out",
-    "back-to-home": "Back to Home"
+    "back-to-home": "Back to Home",
+    "shortcuts": "Shortcuts",
+    "create-shortcut" : "Create Shortcut",
+    "edit-shortcut": "Edit Shortcut",
+    "title": "Title",
+    "filter": "Filter",
+    "filters": "Filters",
+    "new-filter": "New Filter",
+    "eligible-memo": "eligible memo",
+    "tags": "Tags",
+    "quickly-filter": "QUICKLY FILTER",
+    "types": "TYPE"
   },
   "slogan": "An open source, self-hosted knowledge base that works with a SQLite db file.",
   "auth": {

web/src/locales/zh.json

@@ -25,7 +25,18 @@
     "explore": "探索",
     "sign-in": "登录",
     "sign-out": "退出登录",
-    "back-to-home": "回到主页"
+    "back-to-home": "回到主页",
+    "shortcuts": "快捷方式",
+    "create-shortcut" : "创建快捷方式",
+    "edit-shortcut": "编辑快捷方式",
+    "title": "标题",
+    "filter": "过滤",
+    "filters": "全部过滤",
+    "new-filter": "新建过滤",
+    "eligible-memo": "符合条件的memo",
+    "tags": "全部标签",
+    "quickly-filter": "快速过滤",
+    "types": "类型"
   },
   "slogan": "一个开源的、支持私有化部署的碎片化知识卡片管理工具。",
   "auth": {