input box trans

src/config/i18n.js

@@ -555,6 +555,10 @@ export const I18N = {
     zh: `启用输入框翻译`,
     en: `Input Box Translation`,
   },
+  input_translation_help: {
+    zh: `输入框翻译功能除需这里开启，还需要在“规则设置”页面，填写相应的“输入框选择器”`,
+    en: `In addition to turning on the input box translation function here, you also need to fill in the corresponding "input selector" on the "Rule Settings" page.`,
+  },
   input_selector: {
     zh: `输入框选择器`,
     en: `Input Selector`,
@@ -567,8 +571,8 @@ export const I18N = {
     zh: `触发翻译快捷键`,
     en: `Trigger Translation Shortcut Keys`,
   },
-  trigger_trans_count: {
-    zh: `触发翻译连击次数`,
-    en: `Trigger Translation Press Nunber`,
+  shortcut_press_count: {
+    zh: `快捷键连击次数`,
+    en: `Shortcut Press Nunber`,
   },
 };

src/libs/translator.js

@@ -296,10 +296,11 @@ export class Translator {
             }
 
             timer = setInterval(() => {
+              const loadingText = `${text} ${"-\\|/"[++num % 4]} `;
               if (this._inputNodeNames.includes(node.nodeName)) {
-                node.value = text + "-\\|/"[++num % 4];
+                node.value = loadingText;
               } else {
-                node.textContent = text + "-\\|/"[++num % 4];
+                node.textContent = loadingText;
               }
             }, 200);
 

src/views/Options/InputSetting.js

@@ -10,6 +10,8 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import { useInputRule } from "../../hooks/InputRule";
 import { useCallback } from "react";
+import Grid from "@mui/material/Grid";
+import Alert from "@mui/material/Alert";
 
 export default function InputSetting() {
   const i18n = useI18n();
@@ -49,6 +51,8 @@ export default function InputSetting() {
   return (
     <Box>
       <Stack spacing={3}>
+        <Alert severity="info">{i18n("input_translation_help")}</Alert>
+
         <FormControlLabel
           control={
             <Switch
@@ -108,26 +112,34 @@ export default function InputSetting() {
           ))}
         </TextField>
 
-        <ShortcutInput
-          value={triggerShortcut}
-          onChange={handleShortcutInput}
-          label={i18n("trigger_trans_shortcut")}
-        />
-
-        <TextField
-          select
-          size="small"
-          name="triggerCount"
-          value={triggerCount}
-          label={i18n("trigger_trans_count")}
-          onChange={handleChange}
-        >
-          {[1, 2, 3].map((val) => (
-            <MenuItem key={val} value={val}>
-              {val}
-            </MenuItem>
-          ))}
-        </TextField>
+        <Box>
+          <Grid container rowSpacing={2} columns={12}>
+            <Grid item xs={12} sm={12} md={6} lg={6}>
+              <ShortcutInput
+                value={triggerShortcut}
+                onChange={handleShortcutInput}
+                label={i18n("trigger_trans_shortcut")}
+              />
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={6}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="triggerCount"
+                value={triggerCount}
+                label={i18n("shortcut_press_count")}
+                onChange={handleChange}
+              >
+                {[1, 2, 3, 4, 5].map((val) => (
+                  <MenuItem key={val} value={val}>
+                    {val}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+          </Grid>
+        </Box>
       </Stack>
     </Box>
   );

src/views/Options/SyncSetting.js

@@ -44,7 +44,7 @@ export default function SyncSetting() {
     }
   };
 
-  const { syncUrl, syncKey } = sync;
+  const { syncUrl = "", syncKey = "" } = sync;
 
   return (
     <Box>