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,13 +325,19 @@ export class Translator {
       this.#enableMouseHover();
     }
 
-    // 是否默认启动
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => this.#run());
+    } else {
+      this.#run();
+    }
+  }
+
+  // 启动
+  #run() {
     if (this.#rule.transOpen === "true") {
-      if (document.readyState === "loading") {
+      this.enable();
-        document.addEventListener("DOMContentLoaded", () => this.enable());
+    } else if (this.#setting.preInit) {
-      } else {
+      this.#init();
-        this.enable();
-      }
     }
   }
 
@@ -1242,13 +1248,17 @@ export class Translator {
 
   // 注入JS/CSS
   #initInjector() {
-    const { injectJs, injectCss } = this.#rule;
+    try {
-    if (isExt) {
+      const { injectJs, injectCss } = this.#rule;
-      injectJs && sendBgMsg(MSG_INJECT_JS, injectJs);
+      if (isExt) {
-      injectCss && sendBgMsg(MSG_INJECT_CSS, injectCss);
+        injectJs && sendBgMsg(MSG_INJECT_JS, injectJs);
-    } else {
+        injectCss && sendBgMsg(MSG_INJECT_CSS, injectCss);
-      injectJs && injectInlineJs(injectJs);
+      } else {
-      injectCss && injectInternalCss(injectCss);
+        injectJs && injectInlineJs(injectJs);
+        injectCss && injectInternalCss(injectCss);
+      }
+    } catch (err) {
+      kissLog("inject js");
     }
   }
 

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,71 +71,84 @@ export default function InputSetting() {
           label={i18n("use_input_box_translation")}
         />
 
-        <TextField
+        <Box>
-          select
+          <Grid container spacing={2} columns={12}>
-          size="small"
+            <Grid item xs={12} sm={12} md={6} lg={3}>
-          name="apiSlug"
+              <TextField
-          value={apiSlug}
+                select
-          label={i18n("translate_service")}
+                fullWidth
-          onChange={handleChange}
+                size="small"
-        >
+                name="apiSlug"
-          {enabledApis.map((api) => (
+                value={apiSlug}
-            <MenuItem key={api.apiSlug} value={api.apiSlug}>
+                label={i18n("translate_service")}
-              {api.apiName}
+                onChange={handleChange}
-            </MenuItem>
+              >
-          ))}
+                {enabledApis.map((api) => (
-        </TextField>
+                  <MenuItem key={api.apiSlug} value={api.apiSlug}>
-
+                    {api.apiName}
-        <TextField
+                  </MenuItem>
-          select
+                ))}
-          size="small"
+              </TextField>
-          name="fromLang"
+            </Grid>
-          value={fromLang}
+            <Grid item xs={12} sm={12} md={6} lg={3}>
-          label={i18n("from_lang")}
+              <TextField
-          onChange={handleChange}
+                select
-        >
+                fullWidth
-          {OPT_LANGS_FROM.map(([lang, name]) => (
+                size="small"
-            <MenuItem key={lang} value={lang}>
+                name="fromLang"
-              {name}
+                value={fromLang}
-            </MenuItem>
+                label={i18n("from_lang")}
-          ))}
+                onChange={handleChange}
-        </TextField>
+              >
-
+                {OPT_LANGS_FROM.map(([lang, name]) => (
-        <TextField
+                  <MenuItem key={lang} value={lang}>
-          select
+                    {name}
-          size="small"
+                  </MenuItem>
-          name="toLang"
+                ))}
-          value={toLang}
+              </TextField>
-          label={i18n("to_lang")}
+            </Grid>
-          onChange={handleChange}
+            <Grid item xs={12} sm={12} md={6} lg={3}>
-        >
+              <TextField
-          {OPT_LANGS_TO.map(([lang, name]) => (
+                select
-            <MenuItem key={lang} value={lang}>
+                fullWidth
-              {name}
+                size="small"
-            </MenuItem>
+                name="toLang"
-          ))}
+                value={toLang}
-        </TextField>
+                label={i18n("to_lang")}
-
+                onChange={handleChange}
-        <TextField
+              >
-          select
+                {OPT_LANGS_TO.map(([lang, name]) => (
-          size="small"
+                  <MenuItem key={lang} value={lang}>
-          name="transSign"
+                    {name}
-          value={transSign}
+                  </MenuItem>
-          label={i18n("input_trans_start_sign")}
+                ))}
-          onChange={handleChange}
+              </TextField>
-          helperText={i18n("input_trans_start_sign_help")}
+            </Grid>
-        >
+            <Grid item xs={12} sm={12} md={6} lg={3}>
-          <MenuItem value={""}>{i18n("style_none")}</MenuItem>
+              <TextField
-          {OPT_INPUT_TRANS_SIGNS.map((item) => (
+                select
-            <MenuItem key={item} value={item}>
+                fullWidth
-              {item}
+                size="small"
-            </MenuItem>
+                name="transSign"
-          ))}
+                value={transSign}
-        </TextField>
+                label={i18n("input_trans_start_sign")}
+                onChange={handleChange}
+                helperText={i18n("input_trans_start_sign_help")}
+              >
+                <MenuItem value={""}>{i18n("style_none")}</MenuItem>
+                {OPT_INPUT_TRANS_SIGNS.map((item) => (
+                  <MenuItem key={item} value={item}>
+                    {item}
+                  </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>
 
+        <Box>
+          <Grid container spacing={2} columns={12}>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
+              <TextField
+                select
+                size="small"
+                fullWidth
+                name="textStyle"
+                value={textStyle}
+                label={i18n("text_style")}
+                disabled={disabled}
+                onChange={handleChange}
+              >
+                {GlobalItem}
+                {OPT_STYLE_ALL.map((item) => (
+                  <MenuItem key={item} value={item}>
+                    {i18n(item)}
+                  </MenuItem>
+                ))}
+              </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
-              size="small"
-              label={i18n("fixer_selector")}
-              name="fixerSelector"
-              value={fixerSelector}
-              disabled={disabled}
-              onChange={handleChange}
-              multiline
-              maxRows={10}
-            />
-            <TextField
-              select
-              size="small"
-              name="fixerFunc"
-              value={fixerFunc}
-              label={i18n("fixer_function")}
-              helperText={i18n("fixer_function_helper")}
-              disabled={disabled}
-              onChange={handleChange}
-            >
-              {GlobalItem}
-              {FIXER_ALL.map((item) => (
-                <MenuItem key={item} value={item}>
-                  {item}
-                </MenuItem>
-              ))}
-            </TextField> */}
-
             <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,158 +139,195 @@ 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}>
-            name="uiLang"
+              <TextField
-            value={uiLang}
+                select
-            label={i18n("ui_lang")}
+                fullWidth
-            onChange={handleChange}
+                size="small"
-          >
+                name="uiLang"
-            {UI_LANGS.map(([lang, name]) => (
+                value={uiLang}
-              <MenuItem key={lang} value={lang}>
+                label={i18n("ui_lang")}
-                {name}
+                onChange={handleChange}
-              </MenuItem>
+              >
-            ))}
+                {UI_LANGS.map(([lang, name]) => (
-          </Select>
+                  <MenuItem key={lang} value={lang}>
-        </FormControl>
+                    {name}
-
+                  </MenuItem>
-        <TextField
+                ))}
-          size="small"
+              </TextField>
-          label={i18n("min_translate_length")}
+            </Grid>
-          type="number"
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-          name="minLength"
+              <TextField
-          value={minLength}
+                select
-          onChange={handleChange}
+                fullWidth
-        />
+                size="small"
-
+                name="preInit"
-        <TextField
+                value={preInit}
-          size="small"
+                label={i18n("if_pre_init")}
-          label={i18n("max_translate_length")}
+                onChange={handleChange}
-          type="number"
+              >
-          name="maxLength"
+                <MenuItem value={true}>{i18n("enable")}</MenuItem>
-          value={maxLength}
+                <MenuItem value={false}>{i18n("disable")}</MenuItem>
-          onChange={handleChange}
+              </TextField>
-        />
+            </Grid>
-
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-        <TextField
+              <TextField
-          size="small"
+                select
-          label={i18n("num_of_newline_characters")}
+                fullWidth
-          type="number"
+                size="small"
-          name="newlineLength"
+                name="isHide"
-          value={newlineLength}
+                value={isHide}
-          onChange={handleChange}
+                label={i18n("hide_fab_button")}
-        />
+                onChange={(e) => {
-
+                  updateFab({ isHide: e.target.value });
-        <TextField
+                }}
-          size="small"
+              >
-          label={i18n("translate_interval")}
+                <MenuItem value={false}>{i18n("show")}</MenuItem>
-          type="number"
+                <MenuItem value={true}>{i18n("hide")}</MenuItem>
-          name="transInterval"
+              </TextField>
-          value={transInterval}
+            </Grid>
-          onChange={handleChange}
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-        />
+              <TextField
-        <TextField
+                select
-          size="small"
+                fullWidth
-          label={i18n("http_timeout")}
+                size="small"
-          type="number"
+                name="fabClickAction"
-          name="httpTimeout"
+                value={fabClickAction}
-          value={httpTimeout}
+                label={i18n("fab_click_action")}
-          onChange={handleChange}
+                onChange={(e) => updateFab({ fabClickAction: e.target.value })}
-        />
+              >
-        <FormControl size="small">
+                <MenuItem value={0}>{i18n("fab_click_menu")}</MenuItem>
-          <InputLabel>{i18n("touch_translate_shortcut")}</InputLabel>
+                <MenuItem value={1}>{i18n("fab_click_translate")}</MenuItem>
-          <Select
+              </TextField>
-            name="touchTranslate"
+            </Grid>
-            value={touchTranslate}
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-            label={i18n("touch_translate_shortcut")}
+              <TextField
-            onChange={handleChange}
+                fullWidth
-          >
+                size="small"
-            {[0, 2, 3, 4].map((item) => (
+                label={i18n("min_translate_length")}
-              <MenuItem key={item} value={item}>
+                type="number"
-                {i18n(`touch_tap_${item}`)}
+                name="minLength"
-              </MenuItem>
+                value={minLength}
-            ))}
+                onChange={handleChange}
-          </Select>
+              />
-        </FormControl>
+            </Grid>
-
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-        <FormControl size="small">
+              <TextField
-          <InputLabel>{i18n("hide_fab_button")}</InputLabel>
+                fullWidth
-          <Select
+                size="small"
-            name="isHide"
+                label={i18n("max_translate_length")}
-            value={isHide}
+                type="number"
-            label={i18n("hide_fab_button")}
+                name="maxLength"
-            onChange={(e) => {
+                value={maxLength}
-              updateFab({ isHide: e.target.value });
+                onChange={handleChange}
-            }}
+              />
-          >
+            </Grid>
-            <MenuItem value={false}>{i18n("show")}</MenuItem>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-            <MenuItem value={true}>{i18n("hide")}</MenuItem>
+              <TextField
-          </Select>
+                fullWidth
-        </FormControl>
+                size="small"
-
+                label={i18n("num_of_newline_characters")}
-        <FormControl size="small">
+                type="number"
-          <InputLabel>{i18n("fab_click_action")}</InputLabel>
+                name="newlineLength"
-          <Select
+                value={newlineLength}
-            name="fabClickAction"
+                onChange={handleChange}
-            value={fabClickAction}
+              />
-            label={i18n("fab_click_action")}
+            </Grid>
-            onChange={(e) => updateFab({ fabClickAction: e.target.value })}
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-          >
+              <TextField
-            <MenuItem value={0}>{i18n("fab_click_menu")}</MenuItem>
+                fullWidth
-            <MenuItem value={1}>{i18n("fab_click_translate")}</MenuItem>
+                size="small"
-          </Select>
+                label={i18n("translate_interval")}
-        </FormControl>
+                type="number"
-
+                name="transInterval"
-        <FormControl size="small">
+                value={transInterval}
-          <InputLabel>{i18n("context_menus")}</InputLabel>
+                onChange={handleChange}
-          <Select
+              />
-            name="contextMenuType"
+            </Grid>
-            value={contextMenuType}
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-            label={i18n("context_menus")}
+              <TextField
-            onChange={handleChange}
+                fullWidth
-          >
+                size="small"
-            <MenuItem value={0}>{i18n("hide_context_menus")}</MenuItem>
+                label={i18n("http_timeout")}
-            <MenuItem value={1}>{i18n("simple_context_menus")}</MenuItem>
+                type="number"
-            <MenuItem value={2}>{i18n("secondary_context_menus")}</MenuItem>
+                name="httpTimeout"
-          </Select>
+                value={httpTimeout}
-        </FormControl>
+                onChange={handleChange}
-
+              />
-        <FormControl size="small">
+            </Grid>
-          <InputLabel>{i18n("detect_lang_remote")}</InputLabel>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
-          <Select
+              <TextField
-            name="langDetector"
+                select
-            value={langDetector}
+                fullWidth
-            label={i18n("detect_lang_remote")}
+                size="small"
-            onChange={handleChange}
+                name="touchTranslate"
-          >
+                value={touchTranslate}
-            {OPT_LANGDETECTOR_ALL.map((item) => (
+                label={i18n("touch_translate_shortcut")}
-              <MenuItem value={item} key={item}>
+                onChange={handleChange}
-                {item}
+              >
-              </MenuItem>
+                {[0, 2, 3, 4].map((item) => (
-            ))}
+                  <MenuItem key={item} value={item}>
-          </Select>
+                    {i18n(`touch_tap_${item}`)}
-        </FormControl>
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
+              <TextField
+                select
+                fullWidth
+                size="small"
+                name="contextMenuType"
+                value={contextMenuType}
+                label={i18n("context_menus")}
+                onChange={handleChange}
+              >
+                <MenuItem value={0}>{i18n("hide_context_menus")}</MenuItem>
+                <MenuItem value={1}>{i18n("simple_context_menus")}</MenuItem>
+                <MenuItem value={2}>{i18n("secondary_context_menus")}</MenuItem>
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={6} md={6} lg={3}>
+              <TextField
+                select
+                fullWidth
+                size="small"
+                name="langDetector"
+                value={langDetector}
+                label={i18n("detect_lang_remote")}
+                onChange={handleChange}
+              >
+                {OPT_LANGDETECTOR_ALL.map((item) => (
+                  <MenuItem value={item} key={item}>
+                    {item}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+          </Grid>
+        </Box>
 
         {isExt ? (
           <>
-            <FormControl size="small">
+            <TextField
-              <InputLabel>{i18n("if_clear_cache")}</InputLabel>
+              select
-              <Select
+              fullWidth
-                name="clearCache"
+              size="small"
-                value={clearCache}
+              name="clearCache"
-                label={i18n("if_clear_cache")}
+              value={clearCache}
-                onChange={handleChange}
+              label={i18n("if_clear_cache")}
-              >
+              onChange={handleChange}
-                <MenuItem value={false}>{i18n("clear_cache_never")}</MenuItem>
+              helperText={
-                <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,177 +71,222 @@ export default function Tranbox() {
     <Box>
       <Stack spacing={3}>
         <Alert severity="info">{i18n("selected_translation_alert")}</Alert>
-        <TextField
-          select
-          size="small"
-          name="apiSlug"
-          value={apiSlug}
-          label={i18n("translate_service")}
-          onChange={handleChange}
-        >
-          {enabledApis.map((api) => (
-            <MenuItem key={api.apiSlug} value={api.apiSlug}>
-              {api.apiName}
-            </MenuItem>
-          ))}
-        </TextField>
 
-        <TextField
+        <Box>
-          select
+          <Grid container spacing={2} columns={12}>
-          size="small"
+            <Grid item xs={12} sm={12} md={6} lg={3}>
-          name="fromLang"
+              <TextField
-          value={fromLang}
+                select
-          label={i18n("from_lang")}
+                fullWidth
-          onChange={handleChange}
+                size="small"
-        >
+                name="apiSlug"
-          {OPT_LANGS_FROM.map(([lang, name]) => (
+                value={apiSlug}
-            <MenuItem key={lang} value={lang}>
+                label={i18n("translate_service")}
-              {name}
+                onChange={handleChange}
-            </MenuItem>
+              >
-          ))}
+                {enabledApis.map((api) => (
-        </TextField>
+                  <MenuItem key={api.apiSlug} value={api.apiSlug}>
+                    {api.apiName}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                select
+                size="small"
+                name="fromLang"
+                value={fromLang}
+                label={i18n("from_lang")}
+                onChange={handleChange}
+              >
+                {OPT_LANGS_FROM.map(([lang, name]) => (
+                  <MenuItem key={lang} value={lang}>
+                    {name}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                select
+                size="small"
+                name="toLang"
+                value={toLang}
+                label={i18n("to_lang")}
+                onChange={handleChange}
+              >
+                {OPT_LANGS_TO.map(([lang, name]) => (
+                  <MenuItem key={lang} value={lang}>
+                    {name}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                select
+                size="small"
+                name="toLang2"
+                value={toLang2}
+                label={i18n("to_lang2")}
+                helperText={i18n("to_lang2_helper")}
+                onChange={handleChange}
+              >
+                {[["none", "None"], ...OPT_LANGS_TO].map(([lang, name]) => (
+                  <MenuItem key={lang} value={lang}>
+                    {name}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
 
-        <TextField
+            <Grid item xs={12} sm={12} md={6} lg={3}>
-          select
+              <TextField
-          size="small"
+                fullWidth
-          name="toLang"
+                select
-          value={toLang}
+                size="small"
-          label={i18n("to_lang")}
+                name="enDict"
-          onChange={handleChange}
+                value={enDict}
-        >
+                label={i18n("english_dict")}
-          {OPT_LANGS_TO.map(([lang, name]) => (
+                onChange={handleChange}
-            <MenuItem key={lang} value={lang}>
+              >
-              {name}
+                <MenuItem value={"-"}>{i18n("disable")}</MenuItem>
-            </MenuItem>
+                <MenuItem value={OPT_DICT_BAIDU}>{OPT_DICT_BAIDU}</MenuItem>
-          ))}
+              </TextField>
-        </TextField>
+            </Grid>
+            <Grid item xs={12} sm={12} md={6} lg={3}>
+              <TextField
+                fullWidth
+                select
+                size="small"
+                name="triggerMode"
+                value={triggerMode}
+                label={i18n("trigger_mode")}
+                onChange={handleChange}
+              >
+                {OPT_TRANBOX_TRIGGER_ALL.map((item) => (
+                  <MenuItem key={item} value={item}>
+                    {i18n(`trigger_${item}`)}
+                  </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>
 
-        <TextField
+            <Grid item xs={12} sm={12} md={6} lg={3}>
-          select
+              <TextField
-          size="small"
+                fullWidth
-          name="toLang2"
+                size="small"
-          value={toLang2}
+                label={i18n("tranbtn_offset_x")}
-          label={i18n("to_lang2")}
+                type="number"
-          helperText={i18n("to_lang2_helper")}
+                name="btnOffsetX"
-          onChange={handleChange}
+                value={btnOffsetX}
-        >
+                onChange={handleChange}
-          {[["none", "None"], ...OPT_LANGS_TO].map(([lang, name]) => (
+              />
-            <MenuItem key={lang} value={lang}>
+            </Grid>
-              {name}
+            <Grid item xs={12} sm={12} md={6} lg={3}>
-            </MenuItem>
+              <TextField
-          ))}
+                fullWidth
-        </TextField>
+                size="small"
-
+                label={i18n("tranbtn_offset_y")}
-        <TextField
+                type="number"
-          select
+                name="btnOffsetY"
-          size="small"
+                value={btnOffsetY}
-          name="enDict"
+                onChange={handleChange}
-          value={enDict}
+              />
-          label={i18n("english_dict")}
+            </Grid>
-          onChange={handleChange}
+            <Grid item xs={12} sm={12} md={6} lg={3}>
-        >
+              <TextField
-          <MenuItem value={"-"}>{i18n("disable")}</MenuItem>
+                fullWidth
-          <MenuItem value={OPT_DICT_BAIDU}>{OPT_DICT_BAIDU}</MenuItem>
+                size="small"
-        </TextField>
+                label={i18n("tranbox_offset_x")}
-
+                type="number"
-        <TextField
+                name="boxOffsetX"
-          size="small"
+                value={boxOffsetX}
-          label={i18n("tranbtn_offset_x")}
+                onChange={handleChange}
-          type="number"
+              />
-          name="btnOffsetX"
+            </Grid>
-          value={btnOffsetX}
+            <Grid item xs={12} sm={12} md={6} lg={3}>
-          onChange={handleChange}
+              <TextField
-        />
+                fullWidth
-
+                size="small"
-        <TextField
+                label={i18n("tranbox_offset_y")}
-          size="small"
+                type="number"
-          label={i18n("tranbtn_offset_y")}
+                name="boxOffsetY"
-          type="number"
+                value={boxOffsetY}
-          name="btnOffsetY"
+                onChange={handleChange}
-          value={btnOffsetY}
+              />
-          onChange={handleChange}
+            </Grid>
-        />
+            {!isExt && (
-
+              <Grid item xs={12} sm={12} md={6} lg={3}>
-        <TextField
+                <ShortcutInput
-          size="small"
+                  value={tranboxShortcut}
-          label={i18n("tranbox_offset_x")}
+                  onChange={handleShortcutInput}
-          type="number"
+                  label={i18n("trigger_tranbox_shortcut")}
-          name="boxOffsetX"
+                />
-          value={boxOffsetX}
+              </Grid>
-          onChange={handleChange}
+            )}
-        />
+          </Grid>
-
+        </Box>
-        <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
-          select
-          size="small"
-          name="triggerMode"
-          value={triggerMode}
-          label={i18n("trigger_mode")}
-          onChange={handleChange}
-        >
-          {OPT_TRANBOX_TRIGGER_ALL.map((item) => (
-            <MenuItem key={item} value={item}>
-              {i18n(`trigger_${item}`)}
-            </MenuItem>
-          ))}
-        </TextField>
 
         <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>
   );