add rules help button

src/config/i18n.js

@@ -352,4 +352,12 @@ export const I18N = {
     zh: `清除失败`,
     en: `Clear failed`,
   },
+  share: {
+    zh: `分享`,
+    en: `Share`,
+  },
+  help: {
+    zh: `求助`,
+    en: `Help`,
+  },
 };

src/config/index.js

@@ -58,6 +58,7 @@ export const THEME_DARK = "dark";
 
 export const URL_KISS_WORKER = "https://github.com/fishjar/kiss-worker";
 export const URL_KISS_PROXY = "https://github.com/fishjar/kiss-proxy";
+export const URL_KISS_RULES = "https://github.com/fishjar/kiss-rules";
 export const URL_RAW_PREFIX =
   "https://raw.githubusercontent.com/fishjar/kiss-translator/master";
 export const URL_MICROSOFT_AUTH = "https://edge.microsoft.com/translate/auth";

src/views/Options/Header.js

@@ -36,6 +36,7 @@ function Header(props) {
             underline="none"
             color="inherit"
             href={process.env.REACT_APP_HOMEPAGE}
+            target="_blank"
           >{`${i18n("app_name")} v${process.env.REACT_APP_VERSION}`}</Link>
         </Box>
         <DarkModeButton />

src/views/Options/Rules.js

@@ -13,6 +13,7 @@ import {
   OPT_STYLE_ALL,
   OPT_STYLE_DIY,
   OPT_STYLE_USE_COLOR,
+  URL_KISS_RULES,
 } from "../../config";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { useI18n } from "../../hooks/I18n";
@@ -35,6 +36,7 @@ import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import DeleteIcon from "@mui/icons-material/Delete";
 import IconButton from "@mui/material/IconButton";
+import HelpIcon from "@mui/icons-material/Help";
 import ShareIcon from "@mui/icons-material/Share";
 import SyncIcon from "@mui/icons-material/Sync";
 import { useSubRules } from "../../hooks/SubRules";
@@ -470,7 +472,23 @@ function ShareButton({ rules, injectRules, selectedUrl }) {
       onClick={handleClick}
       startIcon={<ShareIcon />}
     >
-      {"分享"}
+      {i18n("share")}
+    </Button>
+  );
+}
+
+function HelpButton() {
+  const i18n = useI18n();
+  return (
+    <Button
+      size="small"
+      variant="outlined"
+      onClick={() => {
+        window.open(URL_KISS_RULES, "_blank");
+      }}
+      startIcon={<HelpIcon />}
+    >
+      {i18n("help")}
     </Button>
   );
 }
@@ -552,6 +570,8 @@ function UserRules({ subRules }) {
           selectedUrl={selectedUrl}
         />
 
+        <HelpButton />
+
         <FormControlLabel
           control={
             <Switch
@@ -715,6 +735,7 @@ function SubRulesEdit({ subList, addSub }) {
         >
           {i18n("add")}
         </Button>
+        <HelpButton />
       </Stack>
 
       {showInput && (

src/views/Options/Setting.js

@@ -213,7 +213,9 @@ export default function Settings() {
           value={googleUrl}
           onChange={handleChange}
           helperText={
-            <Link href={URL_KISS_PROXY}>{i18n("about_api_proxy")}</Link>
+            <Link href={URL_KISS_PROXY} target="_blank">
+              {i18n("about_api_proxy")}
+            </Link>
           }
         />
 
@@ -254,7 +256,9 @@ export default function Settings() {
           value={openaiUrl}
           onChange={handleChange}
           helperText={
-            <Link href={URL_KISS_PROXY}>{i18n("about_api_proxy")}</Link>
+            <Link href={URL_KISS_PROXY} target="_blank">
+              {i18n("about_api_proxy")}
+            </Link>
           }
         />
 

src/views/Options/SyncSetting.js

@@ -58,7 +58,9 @@ export default function SyncSetting() {
           value={syncUrl}
           onChange={handleChange}
           helperText={
-            <Link href={URL_KISS_WORKER}>{i18n("about_sync_api")}</Link>
+            <Link href={URL_KISS_WORKER} target="_blank">
+              {i18n("about_sync_api")}
+            </Link>
           }
         />