feat(i18n): AppUpgradeModal、CloudStorageContainer

netless-io · Jun 17, 2021 · cee89b8 · cee89b8
1 parent e77f92d
commit cee89b8
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 12 deletions.
diff --git a/desktop/renderer-app/src/components/AppUpgradeModal/index.tsx b/desktop/renderer-app/src/components/AppUpgradeModal/index.tsx
@@ -3,6 +3,7 @@ import { Button, Modal } from "antd";
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useState } from "react";
 import { ipcAsyncByMainWindow, ipcReceive, ipcReceiveRemove } from "../../utils/ipc";
+import { useTranslation } from "react-i18next";
 
 export interface AppUpgradeModalProps {
     /** open modal when newVersion has truthy value */
@@ -15,6 +16,7 @@ export const AppUpgradeModal = observer<AppUpgradeModalProps>(function AppUpgrad
     newVersion,
     onClose,
 }) {
+    const { t } = useTranslation();
     const [upgradePercent, setUpgradePercent] = useState(0);
     const [showUpgradeProgress, setShowUpgradeProgress] = useState(false);
     const [upgradeFail, setUpgradeFail] = useState(false);
@@ -37,7 +39,7 @@ export const AppUpgradeModal = observer<AppUpgradeModalProps>(function AppUpgrad
     }, [showUpgradeProgress]);
 
     const renderModalTitle = (): React.ReactNode => {
-        return <div className="app-upgrade-modal-title">版本更新</div>;
+        return <div className="app-upgrade-modal-title">{t("version-updates")}</div>;
     };
 
     const cancelUpgrade = (): void => {
@@ -64,7 +66,7 @@ export const AppUpgradeModal = observer<AppUpgradeModalProps>(function AppUpgrad
             {showUpgradeProgress ? (
                 <div>
                     <span className="app-upgrade-modal-font">
-                        下载中 ({upgradePercent.toFixed(2)}%)...
+                        {t("downloading")} ({upgradePercent.toFixed(2)}%)...
                     </span>
                     <div className="app-upgrade-modal-progress"></div>
                     <div
@@ -73,10 +75,12 @@ export const AppUpgradeModal = observer<AppUpgradeModalProps>(function AppUpgrad
                     ></div>
                     {upgradeFail && (
                         <div>
-                            <span className="app-upgrade-modal-font">更新失败，请重新打开程序</span>
+                            <span className="app-upgrade-modal-font">
+                                {t("update-failed-tips")}
+                            </span>
                             <div className="app-upgrade-modal-btn">
                                 <Button type="primary" onClick={() => window.close()}>
-                                    确定
+                                    {t("confirm")}
                                 </Button>
                             </div>
                         </div>
@@ -85,11 +89,11 @@ export const AppUpgradeModal = observer<AppUpgradeModalProps>(function AppUpgrad
             ) : (
                 <div>
                     <span className="app-upgrade-modal-font">
-                        发现新版本{newVersion || " "}, 请更新到最新版本获取更好的产品体验
+                        {t("new-version-tips", { version: newVersion || " " })}
                     </span>
                     <div className="app-upgrade-modal-btn">
                         <Button type="primary" onClick={upgradeStart}>
-                            立即更新
+                            {t("update-now")}
                         </Button>
                     </div>
                 </div>

diff --git a/packages/flat-components/src/containers/CloudStorageContainer/index.tsx b/packages/flat-components/src/containers/CloudStorageContainer/index.tsx
@@ -9,6 +9,7 @@ import { CloudStorageUploadPanel } from "../../components/CloudStorage";
 import { CloudStorageUploadListContainer } from "./CloudStorageUploadListContainer";
 import { CloudStorageFileListContainer } from "./CloudStorageFileListContainer";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
 
 export * from "./store";
 
@@ -20,33 +21,38 @@ export interface CloudStorageContainerProps {
 /** CloudStorage page with MobX Store */
 export const CloudStorageContainer = observer<CloudStorageContainerProps>(
     function CloudStorageContainer({ store }) {
+        const { t } = useTranslation();
         const containerBtns = (
             <div className="cloud-storage-container-btns">
                 <Button
                     danger
                     onClick={store.onBatchDelete}
                     disabled={store.selectedFileUUIDs.length <= 0}
                 >
-                    删除
+                    {t("delete")}
                 </Button>
                 <Button type="primary" onClick={store.onUpload}>
-                    上传
+                    {t("upload")}
                 </Button>
             </div>
         );
 
+        (window as any).aaa = store;
+
         return (
             <div className="cloud-storage-container">
                 {!store.compact && (
                     <div className="cloud-storage-container-head">
                         <div>
-                            <h1 className="cloud-storage-container-title">我的云盘</h1>
+                            <h1 className="cloud-storage-container-title">{t("my-cloud ")}</h1>
                             <small
                                 className={classNames("cloud-storage-container-subtitle", {
                                     "is-hide": !store.totalUsage,
                                 })}
                             >
-                                {store.totalUsageHR ? `已使用 ${store.totalUsageHR}` : "-"}
+                                {store.totalUsageHR
+                                    ? t("used-storage", { usage: store.totalUsageHR })
+                                    : "-"}
                             </small>
                         </div>
                         {containerBtns}

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -158,5 +158,14 @@
   "roomtype": "Room type: ",
   "theme": "Theme",
   "theme-can-be-up-to-50-characters": "Subject is up to 50 characters",
-  "type": "Type"
+  "type": "Type",
+  "delete": "Delete",
+  "my-cloud ": "My cloud disk",
+  "upload": "Upload",
+  "used-storage": "Used {{usage}}",
+  "downloading": "Downloading",
+  "new-version-tips": "Found a new version {{version}}, please update to the latest version for a better product experience",
+  "update-failed-tips": "Update failed, please reopen the program",
+  "update-now": "Update immediately",
+  "version-updates": "New version update"
 }
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -158,5 +158,14 @@
   "maximum-of-50-rooms-allowed": "最多允许预定 50 个房间",
   "end-series-date-cannot-be-less-than-the-begin-time-date": "结束重复日期不能小于开始时间日期",
   "periodic-room-tip": "结束于 {{date}}，共 {{rate}} 个房间",
-  "room-duration-limit": "房间时长最少 {{minutes}} 分钟"
+  "room-duration-limit": "房间时长最少 {{minutes}} 分钟",
+  "used-storage": "已使用 {{usage}}",
+  "delete": "删除",
+  "upload": "上传",
+  "my-cloud ": "我的云盘",
+  "version-updates": "版本更新",
+  "downloading": "下载中",
+  "update-failed-tips": "更新失败，请重新打开程序",
+  "update-now": "立即更新",
+  "new-version-tips": "发现新版本{{version}}, 请更新到最新版本获取更好的产品体验"
 }