add clear cache & api test button

2023-09-03 13:11:04 +08:00
parent df4c4ebd50
commit 4096a6976c
6 changed files with 166 additions and 28 deletions
--- a/README.en.md
+++ b/README.en.md
@@ -36,8 +36,8 @@ If you also like a little more simplicity, welcome to pick it up.
 - [x] Support translation services
  - [x] Google
  - [x] Microsoft
-  - [x] OpenAI
  - [x] DeepL
+  - [x] OpenAI
 - [x] Upload to app Store
  - [x] Chrome [Install Link](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof)
  - [x] Edge [Install Link](https://microsoftedge.microsoft.com/addons/detail/kiss-translator/jemckldkclkinpjighnoilpbldbdmmlh)
--- a/README.md
+++ b/README.md
@@ -36,8 +36,8 @@
 - [x] 支持翻译服务
  - [x] Google
  - [x] Microsoft
-  - [x] OpenAI
  - [x] DeepL
+  - [x] OpenAI
 - [x] 上架应用市场
  - [x] Chrome [安装地址](https://chrome.google.com/webstore/detail/kiss-translator/bdiifdefkgmcblbcghdlonllpjhhjgof?hl=zh-CN)
  - [x] Edge [安装地址](https://microsoftedge.microsoft.com/addons/detail/%E7%AE%80%E7%BA%A6%E7%BF%BB%E8%AF%91/jemckldkclkinpjighnoilpbldbdmmlh?hl=zh-CN)
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -284,9 +284,9 @@ export const I18N = {
    zh: `OpenAI 提示词`,
    en: `OpenAI Prompt`,
  },
-  clear_cache: {
-    zh: `是否清除缓存 (仅扩展有效)`,
-    en: `Whether clear cache (only valid for extension)`,
+  if_clear_cache: {
+    zh: `是否清除缓存 (仅用于扩展)`,
+    en: `Whether clear cache (only for extension)`,
  },
  clear_cache_never: {
    zh: `不清除缓存`,
@@ -308,13 +308,13 @@ export const I18N = {
    zh: `数据同步测试`,
    en: `Data Sync Test`,
  },
-  data_sync_success: {
-    zh: `数据同步成功！`,
-    en: `Data Sync Success`,
+  sync_success: {
+    zh: `同步成功！`,
+    en: `Sync Success`,
  },
-  data_sync_error: {
-    zh: `数据同步失败！`,
-    en: `Data Sync Error`,
+  sync_failed: {
+    zh: `同步失败！`,
+    en: `Sync Error`,
  },
  error_got_some_wrong: {
    zh: `抱歉，出错了！`,
@@ -324,4 +324,32 @@ export const I18N = {
    zh: `您的同步设置未填写，无法在线分享。`,
    en: `Your sync settings are missing and cannot be shared online.`,
  },
+  click_test: {
+    zh: `点击测试`,
+    en: `Click Test`,
+  },
+  test_success: {
+    zh: `测试成功`,
+    en: `Test success`,
+  },
+  test_failed: {
+    zh: `测试失败`,
+    en: `Test failed`,
+  },
+  clear_all_cache_now: {
+    zh: `立即清除全部缓存`,
+    en: `Clear all cache now`,
+  },
+  clear_cache: {
+    zh: `清除缓存`,
+    en: `Clear Cache`,
+  },
+  clear_success: {
+    zh: `清除成功`,
+    en: `Clear success`,
+  },
+  clear_failed: {
+    zh: `清除失败`,
+    en: `Clear failed`,
+  },
 };
--- a/src/views/Options/Setting.js
+++ b/src/views/Options/Setting.js
@@ -6,14 +6,26 @@ import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
 import Link from "@mui/material/Link";
+import FormHelperText from "@mui/material/FormHelperText";
 import { useSetting } from "../../hooks/Setting";
 import { limitNumber } from "../../libs/utils";
 import { useI18n } from "../../hooks/I18n";
-import { UI_LANGS, URL_KISS_PROXY, TRANS_NEWLINE_LENGTH } from "../../config";
+import { apiTranslate } from "../../apis";
+import { useAlert } from "../../hooks/Alert";
+import {
+  UI_LANGS,
+  URL_KISS_PROXY,
+  TRANS_NEWLINE_LENGTH,
+  CACHE_NAME,
+  OPT_TRANS_GOOGLE,
+  OPT_TRANS_DEEPL,
+  OPT_TRANS_OPENAI,
+} from "../../config";

 export default function Settings() {
  const i18n = useI18n();
  const { setting, updateSetting } = useSetting();
+  const alert = useAlert();

  const handleChange = (e) => {
    e.preventDefault();
@@ -41,6 +53,33 @@ export default function Settings() {
    });
  };

+  const handleClearCache = () => {
+    try {
+      caches.delete(CACHE_NAME);
+      alert.success(i18n("clear_success"));
+    } catch (err) {
+      console.log("[clear cache]", err);
+    }
+  };
+
+  const handleApiTest = async (translator) => {
+    try {
+      const [text] = await apiTranslate({
+        translator,
+        q: "hello world",
+        fromLang: "en",
+        toLang: "zh-CN",
+        setting,
+      });
+      if (!text) {
+        throw new Error("empty reault");
+      }
+      alert.success(i18n("test_success"));
+    } catch (err) {
+      alert.error(`${i18n("test_failed")}: ${err.message}`);
+    }
+  };
+
  const {
    uiLang,
    googleUrl,
@@ -123,21 +162,41 @@ export default function Settings() {
        />

        <FormControl size="small">
-          <InputLabel>{i18n("clear_cache")}</InputLabel>
+          <InputLabel>{i18n("if_clear_cache")}</InputLabel>
          <Select
            name="clearCache"
            value={clearCache}
-            label={i18n("clear_cache")}
+            label={i18n("if_clear_cache")}
            onChange={handleChange}
          >
            <MenuItem value={false}>{i18n("clear_cache_never")}</MenuItem>
            <MenuItem value={true}>{i18n("clear_cache_restart")}</MenuItem>
          </Select>
+          <FormHelperText>
+            <Link component="button" onClick={handleClearCache}>
+              {i18n("clear_all_cache_now")}
+            </Link>
+          </FormHelperText>
        </FormControl>

        <TextField
          size="small"
-          label={i18n("google_api")}
+          label={
+            <>
+              {i18n("google_api")}
+              {googleUrl && (
+                <Link
+                  sx={{ marginLeft: "1em" }}
+                  component="button"
+                  onClick={() => {
+                    handleApiTest(OPT_TRANS_GOOGLE);
+                  }}
+                >
+                  {i18n("click_test")}
+                </Link>
+              )}
+            </>
+          }
          name="googleUrl"
          value={googleUrl}
          onChange={handleChange}
@@ -148,7 +207,22 @@ export default function Settings() {

        <TextField
          size="small"
-          label={i18n("deepl_api")}
+          label={
+            <>
+              {i18n("deepl_api")}
+              {deeplUrl && (
+                <Link
+                  sx={{ marginLeft: "1em" }}
+                  component="button"
+                  onClick={() => {
+                    handleApiTest(OPT_TRANS_DEEPL);
+                  }}
+                >
+                  {i18n("click_test")}
+                </Link>
+              )}
+            </>
+          }
          name="deeplUrl"
          value={deeplUrl}
          onChange={handleChange}
@@ -164,7 +238,22 @@ export default function Settings() {

        <TextField
          size="small"
-          label={i18n("openai_api")}
+          label={
+            <>
+              {i18n("openai_api")}
+              {openaiUrl && openaiPrompt && (
+                <Link
+                  sx={{ marginLeft: "1em" }}
+                  component="button"
+                  onClick={() => {
+                    handleApiTest(OPT_TRANS_OPENAI);
+                  }}
+                >
+                  {i18n("click_test")}
+                </Link>
+              )}
+            </>
+          }
          name="openaiUrl"
          value={openaiUrl}
          onChange={handleChange}
--- a/src/views/Options/SyncSetting.js
+++ b/src/views/Options/SyncSetting.js
@@ -35,10 +35,10 @@ export default function SyncSetting() {
      setLoading(true);
      await syncSettingAndRules();
      await reloadSetting();
-      alert.success(i18n("data_sync_success"));
+      alert.success(i18n("sync_success"));
    } catch (err) {
      console.log("[sync all]", err);
-      alert.error(i18n("data_sync_error"));
+      alert.error(i18n("sync_failed"));
    } finally {
      setLoading(false);
    }
--- a/src/views/Popup/index.js
+++ b/src/views/Popup/index.js
@@ -19,6 +19,7 @@ import {
  OPT_LANGS_TO,
  OPT_STYLE_ALL,
  OPT_STYLE_USE_COLOR,
+  CACHE_NAME,
 } from "../../config";
 import { sendIframeMsg } from "../../libs/iframe";

@@ -66,6 +67,14 @@ export default function Popup({ setShowPopup, translator: tran }) {
    }
  };

+  const handleClearCache = () => {
+    try {
+      caches.delete(CACHE_NAME);
+    } catch (err) {
+      console.log("[clear cache]", err);
+    }
+  };
+
  useEffect(() => {
    if (!isExt) {
      return;
@@ -99,15 +108,27 @@ export default function Popup({ setShowPopup, translator: tran }) {
  return (
    <Box minWidth={300} sx={{ p: 2 }}>
      <Stack spacing={2}>
-        <FormControlLabel
-          control={
-            <Switch
-              checked={transOpen === "true"}
-              onChange={handleTransToggle}
-            />
-          }
-          label={i18n("translate_alt")}
-        />
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          spacing={2}
+        >
+          <FormControlLabel
+            control={
+              <Switch
+                checked={transOpen === "true"}
+                onChange={handleTransToggle}
+              />
+            }
+            label={i18n("translate_alt")}
+          />
+          {!isExt && (
+            <Button variant="text" onClick={handleClearCache}>
+              {i18n("clear_cache")}
+            </Button>
+          )}
+        </Stack>

        <TextField
          select