add clear cache & api test button

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)

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)

src/config/i18n.js

@@ -284,9 +284,9 @@ export const I18N = {
     zh: `OpenAI 提示词`,
     en: `OpenAI Prompt`,
   },
-  clear_cache: {
+  if_clear_cache: {
-    zh: `是否清除缓存 (仅扩展有效)`,
+    zh: `是否清除缓存 (仅用于扩展)`,
-    en: `Whether clear cache (only valid for extension)`,
+    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: {
+  sync_success: {
-    zh: `数据同步成功！`,
+    zh: `同步成功！`,
-    en: `Data Sync Success`,
+    en: `Sync Success`,
   },
-  data_sync_error: {
+  sync_failed: {
-    zh: `数据同步失败！`,
+    zh: `同步失败！`,
-    en: `Data Sync Error`,
+    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`,
+  },
 };

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}

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);
     }

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,6 +108,12 @@ export default function Popup({ setShowPopup, translator: tran }) {
   return (
     <Box minWidth={300} sx={{ p: 2 }}>
       <Stack spacing={2}>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          spacing={2}
+        >
           <FormControlLabel
             control={
               <Switch
@@ -108,6 +123,12 @@ export default function Popup({ setShowPopup, translator: tran }) {
             }
             label={i18n("translate_alt")}
           />
+          {!isExt && (
+            <Button variant="text" onClick={handleClearCache}>
+              {i18n("clear_cache")}
+            </Button>
+          )}
+        </Stack>
 
         <TextField
           select