fix: number input

src/config/i18n.js

@@ -1579,9 +1579,9 @@ export const I18N = {
     zh_TW: `AI智慧斷句`,
   },
   ai_chunk_length: {
-    zh: `AI处理切割长度`,
+    zh: `AI处理切割长度(200-20000)`,
-    en: `AI processing chunk length`,
+    en: `AI processing chunk length(200-20000)`,
-    zh_TW: `AI处理切割长度`,
+    zh_TW: `AI处理切割长度(200-20000)`,
   },
   subtitle_helper_1: {
     zh: `1、目前仅支持Youtube，且仅支持浏览器扩展。`,

src/hooks/ValidationInput.js

@@ -0,0 +1,51 @@
+import { useState, useEffect } from "react";
+import TextField from "@mui/material/TextField";
+import { limitNumber } from "../libs/utils";
+
+function ValidationInput({ value, onChange, name, min, max, ...props }) {
+  const [localValue, setLocalValue] = useState(value);
+
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  const handleLocalChange = (e) => {
+    setLocalValue(e.target.value);
+  };
+
+  const handleBlur = () => {
+    const numValue = Number(localValue);
+
+    if (isNaN(numValue)) {
+      setLocalValue(value);
+      return;
+    }
+
+    const validatedValue = limitNumber(numValue, min, max);
+
+    if (validatedValue !== numValue) {
+      setLocalValue(validatedValue);
+    }
+
+    onChange({
+      target: {
+        name: name,
+        value: validatedValue,
+      },
+      preventDefault: () => {},
+    });
+  };
+
+  return (
+    <TextField
+      {...props}
+      type="number"
+      name={name}
+      value={localValue}
+      onChange={handleLocalChange}
+      onBlur={handleBlur}
+    />
+  );
+}
+
+export default ValidationInput;

src/views/Options/Apis.js

@@ -22,7 +22,6 @@ import { useApiList, useApiItem } from "../../hooks/Api";
 import { useConfirm } from "../../hooks/Confirm";
 import { apiTranslate } from "../../apis";
 import Box from "@mui/material/Box";
-import { limitNumber, limitFloat } from "../../libs/utils";
 import ReusableAutocomplete from "./ReusableAutocomplete";
 import ShowMoreButton from "./ShowMoreButton";
 import {
@@ -45,6 +44,7 @@ import {
   BUILTIN_PLACETAGS,
   OPT_TRANS_AZUREAI,
 } from "../../config";
+import ValidationInput from "../../hooks/ValidationInput";
 
 function TestButton({ api }) {
   const i18n = useI18n();
@@ -134,44 +134,12 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
   }, [api, formData]);
 
   const handleChange = (e) => {
+    e.preventDefault();
     let { name, value, type, checked } = e.target;
 
     if (type === "checkbox" || type === "switch") {
       value = checked;
     }
-    // if (value === "true") value = true;
-    // if (value === "false") value = false;
-
-    switch (name) {
-      case "fetchLimit":
-        value = limitNumber(value, 1, 100);
-        break;
-      case "fetchInterval":
-        value = limitNumber(value, 0, 5000);
-        break;
-      case "httpTimeout":
-        value = limitNumber(value, 5000, 60000);
-        break;
-      case "temperature":
-        value = limitFloat(value, 0, 2);
-        break;
-      case "maxTokens":
-        value = limitNumber(value, 0, 2 ** 15);
-        break;
-      case "batchInterval":
-        value = limitNumber(value, 100, 10000);
-        break;
-      case "batchSize":
-        value = limitNumber(value, 1, 100);
-        break;
-      case "batchLength":
-        value = limitNumber(value, 1000, 100000);
-        break;
-      case "contextSize":
-        value = limitNumber(value, 1, 20);
-        break;
-      default:
-    }
 
     setFormData((prevData) => ({
       ...prevData,
@@ -323,7 +291,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                 />
               </Grid>
               <Grid item xs={12} sm={12} md={6} lg={3}>
-                <TextField
+                <ValidationInput
                   size="small"
                   fullWidth
                   label={"Temperature"}
@@ -331,10 +299,12 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                   name="temperature"
                   value={temperature}
                   onChange={handleChange}
+                  min={0}
+                  max={2}
                 />
               </Grid>
               <Grid item xs={12} sm={12} md={6} lg={3}>
-                <TextField
+                <ValidationInput
                   size="small"
                   fullWidth
                   label={"Max Tokens"}
@@ -342,6 +312,8 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                   name="maxTokens"
                   value={maxTokens}
                   onChange={handleChange}
+                  min={0}
+                  max={2 ** 15}
                 />
               </Grid>
               <Grid item xs={12} sm={12} md={6} lg={3}></Grid>
@@ -479,7 +451,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
               </TextField>
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 size="small"
                 fullWidth
                 label={i18n("batch_interval")}
@@ -487,10 +459,12 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                 name="batchInterval"
                 value={batchInterval}
                 onChange={handleChange}
+                min={100}
+                max={10000}
               />
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 size="small"
                 fullWidth
                 label={i18n("batch_size")}
@@ -498,10 +472,12 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                 name="batchSize"
                 value={batchSize}
                 onChange={handleChange}
+                min={1}
+                max={100}
               />
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 size="small"
                 fullWidth
                 label={i18n("batch_length")}
@@ -509,6 +485,8 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                 name="batchLength"
                 value={batchLength}
                 onChange={handleChange}
+                min={1000}
+                max={100000}
               />
             </Grid>
           </Grid>
@@ -544,6 +522,8 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
                   name="contextSize"
                   value={contextSize}
                   onChange={handleChange}
+                  min={1}
+                  max={20}
                 />
               </Grid>
             </Grid>
@@ -554,7 +534,7 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
       <Box>
         <Grid container spacing={2} columns={12}>
           <Grid item xs={12} sm={12} md={6} lg={3}>
-            <TextField
+            <ValidationInput
               size="small"
               fullWidth
               label={i18n("fetch_limit")}
@@ -562,10 +542,12 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
               name="fetchLimit"
               value={fetchLimit}
               onChange={handleChange}
+              min={1}
+              max={100}
             />
           </Grid>
           <Grid item xs={12} sm={12} md={6} lg={3}>
-            <TextField
+            <ValidationInput
               size="small"
               fullWidth
               label={i18n("fetch_interval")}
@@ -573,10 +555,12 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
               name="fetchInterval"
               value={fetchInterval}
               onChange={handleChange}
+              min={0}
+              max={5000}
             />
           </Grid>
           <Grid item xs={12} sm={12} md={6} lg={3}>
-            <TextField
+            <ValidationInput
               size="small"
               fullWidth
               label={i18n("http_timeout")}
@@ -584,6 +568,8 @@ function ApiFields({ apiSlug, isUserApi, deleteApi }) {
               name="httpTimeout"
               value={httpTimeout}
               onChange={handleChange}
+              min={5000}
+              max={60000}
             />
           </Grid>
           <Grid item xs={12} sm={12} md={6} lg={3}></Grid>

src/views/Options/InputSetting.js

@@ -14,8 +14,8 @@ import Switch from "@mui/material/Switch";
 import { useInputRule } from "../../hooks/InputRule";
 import { useCallback } from "react";
 import Grid from "@mui/material/Grid";
-import { limitNumber } from "../../libs/utils";
 import { useApiList } from "../../hooks/Api";
+import ValidationInput from "../../hooks/ValidationInput";
 
 export default function InputSetting() {
   const i18n = useI18n();
@@ -25,12 +25,6 @@ export default function InputSetting() {
   const handleChange = (e) => {
     e.preventDefault();
     let { name, value } = e.target;
-    switch (name) {
-      case "triggerTime":
-        value = limitNumber(value, 10, 1000);
-        break;
-      default:
-    }
     updateInputRule({
       [name]: value,
     });
@@ -175,7 +169,7 @@ export default function InputSetting() {
               </TextField>
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 fullWidth
                 size="small"
                 label={i18n("combo_timeout")}
@@ -183,6 +177,8 @@ export default function InputSetting() {
                 name="triggerTime"
                 value={triggerTime}
                 onChange={handleChange}
+                min={10}
+                max={1000}
               />
             </Grid>
           </Grid>

src/views/Options/Setting.js

@@ -4,7 +4,6 @@ import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
 import Link from "@mui/material/Link";
 import { useSetting } from "../../hooks/Setting";
-import { limitNumber } from "../../libs/utils";
 import { useI18n } from "../../hooks/I18n";
 import { useAlert } from "../../hooks/Alert";
 import { isExt } from "../../libs/client";
@@ -34,6 +33,7 @@ import { kissLog } from "../../libs/log";
 import UploadButton from "./UploadButton";
 import DownloadButton from "./DownloadButton";
 import { getSettingOld } from "../../libs/storage";
+import ValidationInput from "../../hooks/ValidationInput";
 
 function ShortcutItem({ action, label }) {
   const { shortcut, setShortcut } = useShortcut(action);
@@ -52,30 +52,6 @@ export default function Settings() {
     e.preventDefault();
     let { name, value } = e.target;
     switch (name) {
-      case "fetchLimit":
-        value = limitNumber(value, 1, 100);
-        break;
-      case "fetchInterval":
-        value = limitNumber(value, 0, 5000);
-        break;
-      case "transInterval":
-        value = limitNumber(value, 10, 2000);
-        break;
-      case "minLength":
-        value = limitNumber(value, 1, 100);
-        break;
-      case "maxLength":
-        value = limitNumber(value, 100, 100000);
-        break;
-      case "newlineLength":
-        value = limitNumber(value, 1, 1000);
-        break;
-      case "httpTimeout":
-        value = limitNumber(value, 5000, 60000);
-        break;
-      case "touchTranslate":
-        value = limitNumber(value, 0, 4);
-        break;
       case "contextMenuType":
         isExt && sendBgMsg(MSG_CONTEXT_MENUS, value);
         break;
@@ -219,7 +195,7 @@ export default function Settings() {
               </TextField>
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 fullWidth
                 size="small"
                 label={i18n("min_translate_length")}
@@ -227,10 +203,12 @@ export default function Settings() {
                 name="minLength"
                 value={minLength}
                 onChange={handleChange}
+                min={1}
+                max={100}
               />
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 fullWidth
                 size="small"
                 label={i18n("max_translate_length")}
@@ -238,10 +216,12 @@ export default function Settings() {
                 name="maxLength"
                 value={maxLength}
                 onChange={handleChange}
+                min={100}
+                max={100000}
               />
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 fullWidth
                 size="small"
                 label={i18n("num_of_newline_characters")}
@@ -249,10 +229,12 @@ export default function Settings() {
                 name="newlineLength"
                 value={newlineLength}
                 onChange={handleChange}
+                min={1}
+                max={1000}
               />
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 fullWidth
                 size="small"
                 label={i18n("translate_interval")}
@@ -260,10 +242,12 @@ export default function Settings() {
                 name="transInterval"
                 value={transInterval}
                 onChange={handleChange}
+                min={10}
+                max={2000}
               />
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 fullWidth
                 size="small"
                 label={i18n("http_timeout")}
@@ -271,6 +255,8 @@ export default function Settings() {
                 name="httpTimeout"
                 value={httpTimeout}
                 onChange={handleChange}
+                min={5000}
+                max={60000}
               />
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>

src/views/Options/Subtitle.js

@@ -10,7 +10,7 @@ import Alert from "@mui/material/Alert";
 import Switch from "@mui/material/Switch";
 import { useSubtitle } from "../../hooks/Subtitle";
 import { useApiList } from "../../hooks/Api";
-import { limitNumber } from "../../libs/utils";
+import ValidationInput from "../../hooks/ValidationInput";
 
 export default function SubtitleSetting() {
   const i18n = useI18n();
@@ -20,12 +20,6 @@ export default function SubtitleSetting() {
   const handleChange = (e) => {
     e.preventDefault();
     let { name, value } = e.target;
-    switch (name) {
-      case "chunkLength":
-        value = limitNumber(value, 200, 20000);
-        break;
-      default:
-    }
     updateSubtitle({
       [name]: value,
     });
@@ -105,7 +99,7 @@ export default function SubtitleSetting() {
               </TextField>
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 fullWidth
                 size="small"
                 label={i18n("ai_chunk_length")}
@@ -113,6 +107,8 @@ export default function SubtitleSetting() {
                 name="chunkLength"
                 value={chunkLength}
                 onChange={handleChange}
+                min={200}
+                max={20000}
               />
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>

src/views/Options/Tranbox.js

@@ -22,6 +22,7 @@ import { limitNumber } from "../../libs/utils";
 import { useTranbox } from "../../hooks/Tranbox";
 import { isExt } from "../../libs/client";
 import { useApiList } from "../../hooks/Api";
+import ValidationInput from "../../hooks/ValidationInput";
 
 export default function Tranbox() {
   const i18n = useI18n();
@@ -278,7 +279,7 @@ export default function Tranbox() {
             </Grid>
 
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 fullWidth
                 size="small"
                 label={i18n("tranbtn_offset_x")}
@@ -286,10 +287,12 @@ export default function Tranbox() {
                 name="btnOffsetX"
                 value={btnOffsetX}
                 onChange={handleChange}
+                min={-200}
+                max={200}
               />
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 fullWidth
                 size="small"
                 label={i18n("tranbtn_offset_y")}
@@ -297,10 +300,12 @@ export default function Tranbox() {
                 name="btnOffsetY"
                 value={btnOffsetY}
                 onChange={handleChange}
+                min={-200}
+                max={200}
               />
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 fullWidth
                 size="small"
                 label={i18n("tranbox_offset_x")}
@@ -308,10 +313,12 @@ export default function Tranbox() {
                 name="boxOffsetX"
                 value={boxOffsetX}
                 onChange={handleChange}
+                min={-200}
+                max={200}
               />
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
-              <TextField
+              <ValidationInput
                 fullWidth
                 size="small"
                 label={i18n("tranbox_offset_y")}
@@ -319,6 +326,8 @@ export default function Tranbox() {
                 name="boxOffsetY"
                 value={boxOffsetY}
                 onChange={handleChange}
+                min={-200}
+                max={200}
               />
             </Grid>
             {!isExt && (