feat: add preinit setting

src/config/i18n.js

@@ -1397,4 +1397,9 @@ export const I18N = {
     en: `If you do not fully understand the default prompt, please do not modify it at will, otherwise the translation may fail.`,
     zh_TW: `在未完全理解預設Prompt的情況下，請勿隨意修改，否則可能翻譯失敗。`,
   },
+  if_pre_init: {
+    zh: `是否预初始化`,
+    en: `Whether to pre-initialize`,
+    zh_TW: `是否預初始化`,
+  },
 };

src/config/setting.js

@@ -109,7 +109,7 @@ export const DEFAULT_SUBRULES_LIST = [
   },
 ];
 
-export const DEFAULT_MOUSEHOVER_KEY = ["ControlLeft"];
+export const DEFAULT_MOUSEHOVER_KEY = ["KeyQ"];
 export const DEFAULT_MOUSE_HOVER_SETTING = {
   useMouseHover: true, // 是否启用鼠标悬停翻译
   mouseHoverKey: DEFAULT_MOUSEHOVER_KEY, // 鼠标悬停翻译组合键
@@ -148,4 +148,5 @@ export const DEFAULT_SETTING = {
   transInterval: 100, // 翻译等待时间
   langDetector: OPT_TRANS_MICROSOFT, // 远程语言识别服务
   mouseHoverSetting: DEFAULT_MOUSE_HOVER_SETTING, // 鼠标悬停翻译
+  preInit: true, // 是否预加载脚本
 };

src/hooks/Storage.js

@@ -53,9 +53,9 @@ export function useStorage(key, defaultVal = null, syncKey = "") {
   // 远端同步
   const runSync = useCallback(async (keyToSync, valueToSync) => {
     try {
-      const { value, isNew } = await syncData(keyToSync, valueToSync);
+      const res = await syncData(keyToSync, valueToSync);
-      if (isNew) {
+      if (res?.isNew) {
-        setData(value);
+        setData(res.value);
       }
     } catch (error) {
       kissLog("Sync failed", keyToSync);

src/libs/sync.js

@@ -70,7 +70,8 @@ export const syncData = async (key, value) => {
     syncMeta = {},
   } = await getSyncWithDefault();
   if (!syncUrl || !syncKey || (syncType === OPT_SYNCTYPE_WEBDAV && !syncUser)) {
-    throw new Error("sync args err");
+    // throw new Error("sync args err");
+    return;
   }
 
   let { updateAt = 0, syncAt = 0 } = syncMeta[key] || {};

src/libs/translator.js

@@ -325,14 +325,20 @@ export class Translator {
       this.#enableMouseHover();
     }
 
-    // 是否默认启动
-    if (this.#rule.transOpen === "true") {
     if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", () => this.enable());
+      document.addEventListener("DOMContentLoaded", () => this.#run());
     } else {
-        this.enable();
+      this.#run();
     }
   }
+
+  // 启动
+  #run() {
+    if (this.#rule.transOpen === "true") {
+      this.enable();
+    } else if (this.#setting.preInit) {
+      this.#init();
+    }
   }
 
   // 初始化
@@ -1242,6 +1248,7 @@ export class Translator {
 
   // 注入JS/CSS
   #initInjector() {
+    try {
       const { injectJs, injectCss } = this.#rule;
       if (isExt) {
         injectJs && sendBgMsg(MSG_INJECT_JS, injectJs);
@@ -1250,6 +1257,9 @@ export class Translator {
         injectJs && injectInlineJs(injectJs);
         injectCss && injectInternalCss(injectCss);
       }
+    } catch (err) {
+      kissLog("inject js");
+    }
   }
 
   // 移除JS/CSS

src/views/Options/Apis.js

@@ -282,7 +282,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
         <>
           <Box>
             <Grid container spacing={2} columns={12}>
-              <Grid item xs={6} sm={6} md={6} lg={3}>
+              <Grid item xs={12} sm={6} md={6} lg={3}>
                 {/* todo： 改成 ReusableAutocomplete 可选择和填写模型 */}
                 <TextField
                   size="small"
@@ -293,7 +293,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                   onChange={handleChange}
                 />
               </Grid>
-              <Grid item xs={6} sm={6} md={6} lg={3}>
+              <Grid item xs={12} sm={6} md={6} lg={3}>
                 <ReusableAutocomplete
                   freeSolo
                   size="small"
@@ -305,7 +305,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                   onChange={handleChange}
                 />
               </Grid>
-              <Grid item xs={6} sm={6} md={6} lg={3}>
+              <Grid item xs={12} sm={6} md={6} lg={3}>
                 <TextField
                   size="small"
                   fullWidth
@@ -316,7 +316,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                   onChange={handleChange}
                 />
               </Grid>
-              <Grid item xs={6} sm={6} md={6} lg={3}>
+              <Grid item xs={12} sm={6} md={6} lg={3}>
                 <TextField
                   size="small"
                   fullWidth
@@ -327,7 +327,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                   onChange={handleChange}
                 />
               </Grid>
-              <Grid item xs={6} sm={6} md={6} lg={3}></Grid>
+              <Grid item xs={12} sm={6} md={6} lg={3}></Grid>
             </Grid>
           </Box>
 
@@ -485,7 +485,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
       {API_SPE_TYPES.batch.has(api.apiType) && (
         <Box>
           <Grid container spacing={2} columns={12}>
-            <Grid item xs={6} sm={6} md={6} lg={3}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 fullWidth
@@ -499,7 +499,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                 <MenuItem value={true}>{i18n("enable")}</MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={6} sm={6} md={6} lg={3}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 size="small"
                 fullWidth
@@ -510,7 +510,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                 onChange={handleChange}
               />
             </Grid>
-            <Grid item xs={6} sm={6} md={6} lg={3}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 size="small"
                 fullWidth
@@ -521,7 +521,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                 onChange={handleChange}
               />
             </Grid>
-            <Grid item xs={6} sm={6} md={6} lg={3}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 size="small"
                 fullWidth
@@ -540,7 +540,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
         <>
           <Box>
             <Grid container spacing={2} columns={12}>
-              <Grid item xs={6} sm={6} md={6} lg={3}>
+              <Grid item xs={12} sm={6} md={6} lg={3}>
                 {" "}
                 <TextField
                   select
@@ -555,7 +555,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                   <MenuItem value={true}>{i18n("enable")}</MenuItem>
                 </TextField>
               </Grid>
-              <Grid item xs={6} sm={6} md={6} lg={3}>
+              <Grid item xs={12} sm={6} md={6} lg={3}>
                 {" "}
                 <TextField
                   size="small"
@@ -574,7 +574,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
 
       <Box>
         <Grid container spacing={2} columns={12}>
-          <Grid item xs={6} sm={6} md={6} lg={3}>
+          <Grid item xs={12} sm={6} md={6} lg={3}>
             <TextField
               size="small"
               fullWidth
@@ -585,7 +585,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
               onChange={handleChange}
             />
           </Grid>
-          <Grid item xs={6} sm={6} md={6} lg={3}>
+          <Grid item xs={12} sm={6} md={6} lg={3}>
             <TextField
               size="small"
               fullWidth
@@ -596,7 +596,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
               onChange={handleChange}
             />
           </Grid>
-          <Grid item xs={6} sm={6} md={6} lg={3}>
+          <Grid item xs={12} sm={6} md={6} lg={3}>
             <TextField
               size="small"
               fullWidth
@@ -607,11 +607,17 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
               onChange={handleChange}
             />
           </Grid>
-          <Grid item xs={6} sm={6} md={6} lg={3}></Grid>
+          <Grid item xs={12} sm={6} md={6} lg={3}></Grid>
         </Grid>
       </Box>
 
-      <Stack direction="row" spacing={2}>
+      <Stack
+        direction="row"
+        alignItems="center"
+        spacing={2}
+        useFlexGap
+        flexWrap="wrap"
+      >
         <Button
           size="small"
           variant="contained"
@@ -639,7 +645,6 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
           control={
             <Switch
               size="small"
-              fullWidth
               name="isDisabled"
               checked={isDisabled}
               onChange={handleChange}

src/views/Options/InputSetting.js

@@ -71,8 +71,12 @@ export default function InputSetting() {
           label={i18n("use_input_box_translation")}
         />
 
+        <Box>
+          <Grid container spacing={2} columns={12}>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
                 select
+                fullWidth
                 size="small"
                 name="apiSlug"
                 value={apiSlug}
@@ -85,9 +89,11 @@ export default function InputSetting() {
                   </MenuItem>
                 ))}
               </TextField>
-
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
                 select
+                fullWidth
                 size="small"
                 name="fromLang"
                 value={fromLang}
@@ -100,9 +106,11 @@ export default function InputSetting() {
                   </MenuItem>
                 ))}
               </TextField>
-
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
                 select
+                fullWidth
                 size="small"
                 name="toLang"
                 value={toLang}
@@ -115,9 +123,11 @@ export default function InputSetting() {
                   </MenuItem>
                 ))}
               </TextField>
-
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
                 select
+                fullWidth
                 size="small"
                 name="transSign"
                 value={transSign}
@@ -132,10 +142,13 @@ export default function InputSetting() {
                   </MenuItem>
                 ))}
               </TextField>
+            </Grid>
+          </Grid>
+        </Box>
 
         <Box>
           <Grid container spacing={2} columns={12}>
-            <Grid item xs={12} sm={12} md={4} lg={4}>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <ShortcutInput
                 value={triggerShortcut}
                 onChange={handleShortcutInput}
@@ -143,7 +156,7 @@ export default function InputSetting() {
                 helperText={i18n("trigger_trans_shortcut_help")}
               />
             </Grid>
-            <Grid item xs={12} sm={12} md={4} lg={4}>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
                 select
                 fullWidth
@@ -160,7 +173,7 @@ export default function InputSetting() {
                 ))}
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={12} md={4} lg={4}>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
                 fullWidth
                 size="small"

src/views/Options/Rules.js

@@ -12,7 +12,7 @@ import {
   OPT_LANGS_TO,
   OPT_STYLE_ALL,
   OPT_STYLE_DIY,
-  OPT_STYLE_USE_COLOR,
+  // OPT_STYLE_USE_COLOR,
   URL_KISS_RULES_NEW_ISSUE,
   OPT_SYNCTYPE_WORKER,
   DEFAULT_TRANS_TAG,
@@ -289,7 +289,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
 
         <Box>
           <Grid container spacing={2} columns={12}>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 size="small"
@@ -305,7 +305,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                 <MenuItem value={"false"}>{i18n("default_disabled")}</MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 size="small"
@@ -321,7 +321,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                 <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 size="small"
@@ -337,7 +337,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                 <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 size="small"
@@ -353,7 +353,8 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                 <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
+
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 size="small"
@@ -369,7 +370,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                 <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 size="small"
@@ -385,31 +386,23 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                 <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
               </TextField>
             </Grid>
-          </Grid>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-        </Box>
-
-        <Box>
-          <Grid container spacing={2} columns={12}>
-            {/* <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
                 fullWidth
-                name="transTiming"
+                name="transTag"
-                value={transTiming}
+                value={transTag}
-                label={i18n("trigger_mode")}
+                label={i18n("translation_element_tag")}
                 disabled={disabled}
                 onChange={handleChange}
               >
                 {GlobalItem}
-                {OPT_TIMING_ALL.map((item) => (
+                <MenuItem value={"span"}>{`<span>`}</MenuItem>
-                  <MenuItem key={item} value={item}>
+                <MenuItem value={"font"}>{`<font>`}</MenuItem>
-                    {i18n(item)}
-                  </MenuItem>
-                ))}
               </TextField>
-            </Grid> */}
+            </Grid>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 size="small"
@@ -425,7 +418,8 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                 <MenuItem value={"true"}>{i18n("enable")}</MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
+
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 size="small"
@@ -444,7 +438,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                 ))}
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 size="small"
@@ -463,7 +457,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                 ))}
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 size="small"
@@ -482,74 +476,27 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                 ))}
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
+            {/* <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
                 select
                 size="small"
                 fullWidth
-                name="textStyle"
+                name="transTiming"
-                value={textStyle}
+                value={transTiming}
-                label={i18n("text_style")}
+                label={i18n("trigger_mode")}
                 disabled={disabled}
                 onChange={handleChange}
               >
                 {GlobalItem}
-                {OPT_STYLE_ALL.map((item) => (
+                {OPT_TIMING_ALL.map((item) => (
                   <MenuItem key={item} value={item}>
                     {i18n(item)}
                   </MenuItem>
                 ))}
               </TextField>
-            </Grid>
+            </Grid> */}
-            {OPT_STYLE_USE_COLOR.includes(textStyle) && (
-              <Grid item xs={12} sm={6} md={3} lg={2}>
-                <TextField
-                  size="small"
-                  fullWidth
-                  name="bgColor"
-                  value={bgColor}
-                  label={i18n("bg_color")}
-                  disabled={disabled}
-                  onChange={handleChange}
-                />
-              </Grid>
-            )}
-          </Grid>
-        </Box>
 
-        {textStyle === OPT_STYLE_DIY && (
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-          <TextField
-            size="small"
-            label={i18n("diy_style")}
-            helperText={i18n("diy_style_helper")}
-            name="textDiyStyle"
-            value={textDiyStyle}
-            disabled={disabled}
-            onChange={handleChange}
-            maxRows={10}
-            multiline
-          />
-        )}
-
-        <Box>
-          <Grid container spacing={2} columns={12}>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
-              <TextField
-                select
-                size="small"
-                fullWidth
-                name="transTag"
-                value={transTag}
-                label={i18n("translation_element_tag")}
-                disabled={disabled}
-                onChange={handleChange}
-              >
-                {GlobalItem}
-                <MenuItem value={"span"}>{`<span>`}</MenuItem>
-                <MenuItem value={"font"}>{`<font>`}</MenuItem>
-              </TextField>
-            </Grid>
-            <Grid item xs={12} sm={6} md={3} lg={2}>
               <TextField
                 select
                 size="small"
@@ -568,36 +515,57 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
           </Grid>
         </Box>
 
-        {showMore && (
+        <Box>
-          <>
+          <Grid container spacing={2} columns={12}>
-            {/* <TextField
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-              size="small"
-              label={i18n("fixer_selector")}
-              name="fixerSelector"
-              value={fixerSelector}
-              disabled={disabled}
-              onChange={handleChange}
-              multiline
-              maxRows={10}
-            />
               <TextField
                 select
                 size="small"
-              name="fixerFunc"
+                fullWidth
-              value={fixerFunc}
+                name="textStyle"
-              label={i18n("fixer_function")}
+                value={textStyle}
-              helperText={i18n("fixer_function_helper")}
+                label={i18n("text_style")}
                 disabled={disabled}
                 onChange={handleChange}
               >
                 {GlobalItem}
-              {FIXER_ALL.map((item) => (
+                {OPT_STYLE_ALL.map((item) => (
                   <MenuItem key={item} value={item}>
-                  {item}
+                    {i18n(item)}
                   </MenuItem>
                 ))}
-            </TextField> */}
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
+              <TextField
+                size="small"
+                fullWidth
+                name="bgColor"
+                value={bgColor}
+                label={i18n("bg_color")}
+                disabled={disabled}
+                onChange={handleChange}
+              />
+            </Grid>
+          </Grid>
+        </Box>
 
+        {textStyle === OPT_STYLE_DIY && (
+          <TextField
+            size="small"
+            label={i18n("diy_style")}
+            helperText={i18n("diy_style_helper")}
+            name="textDiyStyle"
+            value={textDiyStyle}
+            disabled={disabled}
+            onChange={handleChange}
+            maxRows={10}
+            multiline
+          />
+        )}
+
+        {showMore && (
+          <>
             <TextField
               select
               size="small"

src/views/Options/Setting.js

@@ -1,12 +1,8 @@
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
-import InputLabel from "@mui/material/InputLabel";
 import TextField from "@mui/material/TextField";
 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";
@@ -102,7 +98,7 @@ export default function Settings() {
 
   const handleImport = async (data) => {
     try {
-      await updateSetting(JSON.parse(data));
+      updateSetting(JSON.parse(data));
     } catch (err) {
       kissLog("import setting", err);
     }
@@ -121,6 +117,7 @@ export default function Settings() {
     csplist = DEFAULT_CSPLIST.join(",\n"),
     transInterval = 100,
     langDetector = OPT_TRANS_MICROSOFT,
+    preInit = true,
   } = setting;
   const { isHide = false, fabClickAction = 0 } = fab || {};
 
@@ -142,9 +139,13 @@ export default function Settings() {
           />
         </Stack>
 
-        <FormControl size="small">
+        <Box>
-          <InputLabel>{i18n("ui_lang")}</InputLabel>
+          <Grid container spacing={2} columns={12}>
-          <Select
+            <Grid item xs={12} sm={6} md={6} lg={3}>
+              <TextField
+                select
+                fullWidth
+                size="small"
                 name="uiLang"
                 value={uiLang}
                 label={i18n("ui_lang")}
@@ -155,10 +156,55 @@ export default function Settings() {
                     {name}
                   </MenuItem>
                 ))}
-          </Select>
+              </TextField>
-        </FormControl>
+            </Grid>
-
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
+                select
+                fullWidth
+                size="small"
+                name="preInit"
+                value={preInit}
+                label={i18n("if_pre_init")}
+                onChange={handleChange}
+              >
+                <MenuItem value={true}>{i18n("enable")}</MenuItem>
+                <MenuItem value={false}>{i18n("disable")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
+              <TextField
+                select
+                fullWidth
+                size="small"
+                name="isHide"
+                value={isHide}
+                label={i18n("hide_fab_button")}
+                onChange={(e) => {
+                  updateFab({ isHide: e.target.value });
+                }}
+              >
+                <MenuItem value={false}>{i18n("show")}</MenuItem>
+                <MenuItem value={true}>{i18n("hide")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
+              <TextField
+                select
+                fullWidth
+                size="small"
+                name="fabClickAction"
+                value={fabClickAction}
+                label={i18n("fab_click_action")}
+                onChange={(e) => updateFab({ fabClickAction: e.target.value })}
+              >
+                <MenuItem value={0}>{i18n("fab_click_menu")}</MenuItem>
+                <MenuItem value={1}>{i18n("fab_click_translate")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
+              <TextField
+                fullWidth
                 size="small"
                 label={i18n("min_translate_length")}
                 type="number"
@@ -166,8 +212,10 @@ export default function Settings() {
                 value={minLength}
                 onChange={handleChange}
               />
-
+            </Grid>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
+                fullWidth
                 size="small"
                 label={i18n("max_translate_length")}
                 type="number"
@@ -175,8 +223,10 @@ export default function Settings() {
                 value={maxLength}
                 onChange={handleChange}
               />
-
+            </Grid>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
+                fullWidth
                 size="small"
                 label={i18n("num_of_newline_characters")}
                 type="number"
@@ -184,8 +234,10 @@ export default function Settings() {
                 value={newlineLength}
                 onChange={handleChange}
               />
-
+            </Grid>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
+                fullWidth
                 size="small"
                 label={i18n("translate_interval")}
                 type="number"
@@ -193,7 +245,10 @@ export default function Settings() {
                 value={transInterval}
                 onChange={handleChange}
               />
+            </Grid>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
               <TextField
+                fullWidth
                 size="small"
                 label={i18n("http_timeout")}
                 type="number"
@@ -201,9 +256,12 @@ export default function Settings() {
                 value={httpTimeout}
                 onChange={handleChange}
               />
-        <FormControl size="small">
+            </Grid>
-          <InputLabel>{i18n("touch_translate_shortcut")}</InputLabel>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-          <Select
+              <TextField
+                select
+                fullWidth
+                size="small"
                 name="touchTranslate"
                 value={touchTranslate}
                 label={i18n("touch_translate_shortcut")}
@@ -214,40 +272,13 @@ export default function Settings() {
                     {i18n(`touch_tap_${item}`)}
                   </MenuItem>
                 ))}
-          </Select>
+              </TextField>
-        </FormControl>
+            </Grid>
-
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-        <FormControl size="small">
+              <TextField
-          <InputLabel>{i18n("hide_fab_button")}</InputLabel>
+                select
-          <Select
+                fullWidth
-            name="isHide"
+                size="small"
-            value={isHide}
-            label={i18n("hide_fab_button")}
-            onChange={(e) => {
-              updateFab({ isHide: e.target.value });
-            }}
-          >
-            <MenuItem value={false}>{i18n("show")}</MenuItem>
-            <MenuItem value={true}>{i18n("hide")}</MenuItem>
-          </Select>
-        </FormControl>
-
-        <FormControl size="small">
-          <InputLabel>{i18n("fab_click_action")}</InputLabel>
-          <Select
-            name="fabClickAction"
-            value={fabClickAction}
-            label={i18n("fab_click_action")}
-            onChange={(e) => updateFab({ fabClickAction: e.target.value })}
-          >
-            <MenuItem value={0}>{i18n("fab_click_menu")}</MenuItem>
-            <MenuItem value={1}>{i18n("fab_click_translate")}</MenuItem>
-          </Select>
-        </FormControl>
-
-        <FormControl size="small">
-          <InputLabel>{i18n("context_menus")}</InputLabel>
-          <Select
                 name="contextMenuType"
                 value={contextMenuType}
                 label={i18n("context_menus")}
@@ -256,12 +287,13 @@ export default function Settings() {
                 <MenuItem value={0}>{i18n("hide_context_menus")}</MenuItem>
                 <MenuItem value={1}>{i18n("simple_context_menus")}</MenuItem>
                 <MenuItem value={2}>{i18n("secondary_context_menus")}</MenuItem>
-          </Select>
+              </TextField>
-        </FormControl>
+            </Grid>
-
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-        <FormControl size="small">
+              <TextField
-          <InputLabel>{i18n("detect_lang_remote")}</InputLabel>
+                select
-          <Select
+                fullWidth
+                size="small"
                 name="langDetector"
                 value={langDetector}
                 label={i18n("detect_lang_remote")}
@@ -272,28 +304,30 @@ export default function Settings() {
                     {item}
                   </MenuItem>
                 ))}
-          </Select>
+              </TextField>
-        </FormControl>
+            </Grid>
+          </Grid>
+        </Box>
 
         {isExt ? (
           <>
-            <FormControl size="small">
+            <TextField
-              <InputLabel>{i18n("if_clear_cache")}</InputLabel>
+              select
-              <Select
+              fullWidth
+              size="small"
               name="clearCache"
               value={clearCache}
               label={i18n("if_clear_cache")}
               onChange={handleChange}
-              >
+              helperText={
-                <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>
+            >
+              <MenuItem value={false}>{i18n("clear_cache_never")}</MenuItem>
+              <MenuItem value={true}>{i18n("clear_cache_restart")}</MenuItem>
+            </TextField>
 
             <TextField
               size="small"
@@ -311,25 +345,25 @@ export default function Settings() {
           <>
             <Box>
               <Grid container spacing={2} columns={12}>
-                <Grid item xs={12} sm={12} md={3} lg={3}>
+                <Grid item xs={12} sm={6} md={6} lg={3}>
                   <ShortcutItem
                     action={OPT_SHORTCUT_TRANSLATE}
                     label={i18n("toggle_translate_shortcut")}
                   />
                 </Grid>
-                <Grid item xs={12} sm={12} md={3} lg={3}>
+                <Grid item xs={12} sm={6} md={6} lg={3}>
                   <ShortcutItem
                     action={OPT_SHORTCUT_STYLE}
                     label={i18n("toggle_style_shortcut")}
                   />
                 </Grid>
-                <Grid item xs={12} sm={12} md={3} lg={3}>
+                <Grid item xs={12} sm={6} md={6} lg={3}>
                   <ShortcutItem
                     action={OPT_SHORTCUT_POPUP}
                     label={i18n("toggle_popup_shortcut")}
                   />
                 </Grid>
-                <Grid item xs={12} sm={12} md={3} lg={3}>
+                <Grid item xs={12} sm={6} md={6} lg={3}>
                   <ShortcutItem
                     action={OPT_SHORTCUT_SETTING}
                     label={i18n("open_setting_shortcut")}

src/views/Options/Tranbox.js

@@ -2,6 +2,7 @@ import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
+import Grid from "@mui/material/Grid";
 import { useI18n } from "../../hooks/I18n";
 import {
   OPT_LANGS_FROM,
@@ -70,8 +71,13 @@ export default function Tranbox() {
     <Box>
       <Stack spacing={3}>
         <Alert severity="info">{i18n("selected_translation_alert")}</Alert>
+
+        <Box>
+          <Grid container spacing={2} columns={12}>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
                 select
+                fullWidth
                 size="small"
                 name="apiSlug"
                 value={apiSlug}
@@ -84,8 +90,10 @@ export default function Tranbox() {
                   </MenuItem>
                 ))}
               </TextField>
-
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
+                fullWidth
                 select
                 size="small"
                 name="fromLang"
@@ -99,8 +107,10 @@ export default function Tranbox() {
                   </MenuItem>
                 ))}
               </TextField>
-
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
+                fullWidth
                 select
                 size="small"
                 name="toLang"
@@ -114,8 +124,10 @@ export default function Tranbox() {
                   </MenuItem>
                 ))}
               </TextField>
-
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
+                fullWidth
                 select
                 size="small"
                 name="toLang2"
@@ -130,8 +142,11 @@ export default function Tranbox() {
                   </MenuItem>
                 ))}
               </TextField>
+            </Grid>
 
+            <Grid item xs={12} sm={12} md={6} lg={3}>
               <TextField
+                fullWidth
                 select
                 size="small"
                 name="enDict"
@@ -142,92 +157,10 @@ export default function Tranbox() {
                 <MenuItem value={"-"}>{i18n("disable")}</MenuItem>
                 <MenuItem value={OPT_DICT_BAIDU}>{OPT_DICT_BAIDU}</MenuItem>
               </TextField>
-
+            </Grid>
-        <TextField
+            <Grid item xs={12} sm={12} md={6} lg={3}>
-          size="small"
-          label={i18n("tranbtn_offset_x")}
-          type="number"
-          name="btnOffsetX"
-          value={btnOffsetX}
-          onChange={handleChange}
-        />
-
-        <TextField
-          size="small"
-          label={i18n("tranbtn_offset_y")}
-          type="number"
-          name="btnOffsetY"
-          value={btnOffsetY}
-          onChange={handleChange}
-        />
-
-        <TextField
-          size="small"
-          label={i18n("tranbox_offset_x")}
-          type="number"
-          name="boxOffsetX"
-          value={boxOffsetX}
-          onChange={handleChange}
-        />
-
-        <TextField
-          size="small"
-          label={i18n("tranbox_offset_y")}
-          type="number"
-          name="boxOffsetY"
-          value={boxOffsetY}
-          onChange={handleChange}
-        />
-
-        <TextField
-          select
-          size="small"
-          name="hideTranBtn"
-          value={hideTranBtn}
-          label={i18n("hide_tran_button")}
-          onChange={handleChange}
-        >
-          <MenuItem value={false}>{i18n("show")}</MenuItem>
-          <MenuItem value={true}>{i18n("hide")}</MenuItem>
-        </TextField>
-
-        <TextField
-          select
-          size="small"
-          name="hideClickAway"
-          value={hideClickAway}
-          label={i18n("hide_click_away")}
-          onChange={handleChange}
-        >
-          <MenuItem value={false}>{i18n("disable")}</MenuItem>
-          <MenuItem value={true}>{i18n("enable")}</MenuItem>
-        </TextField>
-
-        <TextField
-          select
-          size="small"
-          name="simpleStyle"
-          value={simpleStyle}
-          label={i18n("use_simple_style")}
-          onChange={handleChange}
-        >
-          <MenuItem value={false}>{i18n("disable")}</MenuItem>
-          <MenuItem value={true}>{i18n("enable")}</MenuItem>
-        </TextField>
-
-        <TextField
-          select
-          size="small"
-          name="followSelection"
-          value={followSelection}
-          label={i18n("follow_selection")}
-          onChange={handleChange}
-        >
-          <MenuItem value={false}>{i18n("disable")}</MenuItem>
-          <MenuItem value={true}>{i18n("enable")}</MenuItem>
-        </TextField>
-
               <TextField
+                fullWidth
                 select
                 size="small"
                 name="triggerMode"
@@ -241,6 +174,119 @@ export default function Tranbox() {
                   </MenuItem>
                 ))}
               </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                select
+                size="small"
+                name="hideTranBtn"
+                value={hideTranBtn}
+                label={i18n("hide_tran_button")}
+                onChange={handleChange}
+              >
+                <MenuItem value={false}>{i18n("show")}</MenuItem>
+                <MenuItem value={true}>{i18n("hide")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                select
+                size="small"
+                name="hideClickAway"
+                value={hideClickAway}
+                label={i18n("hide_click_away")}
+                onChange={handleChange}
+              >
+                <MenuItem value={false}>{i18n("disable")}</MenuItem>
+                <MenuItem value={true}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                select
+                size="small"
+                name="simpleStyle"
+                value={simpleStyle}
+                label={i18n("use_simple_style")}
+                onChange={handleChange}
+              >
+                <MenuItem value={false}>{i18n("disable")}</MenuItem>
+                <MenuItem value={true}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                select
+                size="small"
+                name="followSelection"
+                value={followSelection}
+                label={i18n("follow_selection")}
+                onChange={handleChange}
+              >
+                <MenuItem value={false}>{i18n("disable")}</MenuItem>
+                <MenuItem value={true}>{i18n("enable")}</MenuItem>
+              </TextField>
+            </Grid>
+
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                size="small"
+                label={i18n("tranbtn_offset_x")}
+                type="number"
+                name="btnOffsetX"
+                value={btnOffsetX}
+                onChange={handleChange}
+              />
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                size="small"
+                label={i18n("tranbtn_offset_y")}
+                type="number"
+                name="btnOffsetY"
+                value={btnOffsetY}
+                onChange={handleChange}
+              />
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                size="small"
+                label={i18n("tranbox_offset_x")}
+                type="number"
+                name="boxOffsetX"
+                value={boxOffsetX}
+                onChange={handleChange}
+              />
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                size="small"
+                label={i18n("tranbox_offset_y")}
+                type="number"
+                name="boxOffsetY"
+                value={boxOffsetY}
+                onChange={handleChange}
+              />
+            </Grid>
+            {!isExt && (
+              <Grid item xs={12} sm={12} md={6} lg={3}>
+                <ShortcutInput
+                  value={tranboxShortcut}
+                  onChange={handleShortcutInput}
+                  label={i18n("trigger_tranbox_shortcut")}
+                />
+              </Grid>
+            )}
+          </Grid>
+        </Box>
 
         <TextField
           size="small"
@@ -251,14 +297,6 @@ export default function Tranbox() {
           maxRows={10}
           multiline
         />
-
-        {!isExt && (
-          <ShortcutInput
-            value={tranboxShortcut}
-            onChange={handleShortcutInput}
-            label={i18n("trigger_tranbox_shortcut")}
-          />
-        )}
       </Stack>
     </Box>
   );